add getter for min a max

src/Umbraco.Web.UI.Client/libs/picker/picker.context.ts

@@ -1,4 +1,4 @@
-import { UmbItemRepository, UmbTreeRepository } from '@umbraco-cms/backoffice/repository';
+import { UmbItemRepository } from '@umbraco-cms/backoffice/repository';
 import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller';
 import { ArrayState, UmbObserverController } from '@umbraco-cms/backoffice/observable-api';
 import { createExtensionClass, umbExtensionsRegistry } from '@umbraco-cms/backoffice/extensions-api';
@@ -14,7 +14,7 @@ import { UmbChangeEvent } from '@umbraco-cms/backoffice/events';
 
 export class UmbPickerContext<ItemType extends ItemResponseModelBaseModel> {
 	host: UmbControllerHostElement;
-	modalAlias: UmbModalToken | string;
+	modalAlias: string | UmbModalToken;
 	repository?: UmbItemRepository<ItemType>;
 	#getUnique: (entry: ItemType) => string | undefined;
 
@@ -36,7 +36,7 @@ export class UmbPickerContext<ItemType extends ItemResponseModelBaseModel> {
 	constructor(
 		host: UmbControllerHostElement,
 		repositoryAlias: string,
-		modalAlias: UmbModalToken | string,
+		modalAlias: string | UmbModalToken,
 		getUniqueMethod?: (entry: ItemType) => string | undefined
 	) {
 		this.host = host;
@@ -74,13 +74,14 @@ export class UmbPickerContext<ItemType extends ItemResponseModelBaseModel> {
 		this.#selection.next(selection);
 	}
 
-	// TODO: this need to accept an options object at some point to pass to the modal context
-	openPicker() {
+	// TODO: revisit this method. How do we best pass picker data?
+	openPicker(pickerData: any) {
 		if (!this.modalContext) throw new Error('Modal context is not initialized');
 
 		const modalHandler = this.modalContext.open(this.modalAlias, {
 			multiple: this.max === 1 ? false : true,
 			selection: [...this.getSelection()],
+			...pickerData,
 		});
 
 		modalHandler?.onSubmit().then(({ selection }: any) => {

src/Umbraco.Web.UI.Client/src/backoffice/settings/data-types/components/data-type-input/data-type-input.element.ts

@@ -44,11 +44,16 @@ export class UmbDataTypeInputElement extends FormControlMixin(UmbLitElement) {
 	 * @attr
 	 * @default undefined
 	 */
+	private _max: number | undefined;
 	@property({ type: Number })
+	public get max(): number | undefined {
+		return this._max;
+	}
 	public set max(value: number | undefined) {
 		if (value !== undefined) {
 			this.#pickerContext.max = value;
 		}
+		this._max = value;
 	}
 
 	/**

src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-language-picker/input-language-picker.element.ts

@@ -21,10 +21,15 @@ export class UmbInputLanguagePickerElement extends FormControlMixin(UmbLitElemen
 	 * This is a minimum amount of selected items in this input.
 	 * @type {number}
 	 * @attr
-	 * @default undefined
+	 * @default 0
 	 */
 	@property({ type: Number })
-	min?: number;
+	public get min(): number {
+		return this.#pickerContext.min;
+	}
+	public set min(value: number) {
+		this.#pickerContext.min = value;
+	}
 
 	/**
 	 * Min validation message.
@@ -39,10 +44,15 @@ export class UmbInputLanguagePickerElement extends FormControlMixin(UmbLitElemen
 	 * This is a maximum amount of selected items in this input.
 	 * @type {number}
 	 * @attr
-	 * @default undefined
+	 * @default Infinite
 	 */
 	@property({ type: Number })
-	max?: number;
+	public get max(): number {
+		return this.#pickerContext.max;
+	}
+	public set max(value: number) {
+		this.#pickerContext.max = value;
+	}
 
 	/**
 	 * Max validation message.
@@ -92,7 +102,7 @@ export class UmbInputLanguagePickerElement extends FormControlMixin(UmbLitElemen
 			() => !!this.max && this._selectedIsoCodes.length > this.max
 		);
 
-		this.observe(this.#pickerContext.selection, (selection) => (this.selectedIsoCodes = selection));
+		this.observe(this.#pickerContext.selection, (selection) => (this._selectedIsoCodes = selection));
 		this.observe(this.#pickerContext.selectedItems, (selectedItems) => (this._items = selectedItems));
 	}
 
@@ -101,14 +111,15 @@ export class UmbInputLanguagePickerElement extends FormControlMixin(UmbLitElemen
 	}
 
 	private _openPicker() {
-		// TODO: add filter
-		// filter: this.filter,
-		this.#pickerContext.openPicker();
+		this.#pickerContext.openPicker({
+			filter: this.filter,
+			hello: 'world',
+		});
 	}
 
 	render() {
 		return html`
-			${this._items.map((item) => this._renderItem(item))}
+			<uui-ref-list> ${this._items.map((item) => this._renderItem(item))} </uui-ref-list>
 			<uui-button
 				id="add-button"
 				look="placeholder"