diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-document-picker/input-document-picker.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-document-picker/input-document-picker.element.ts index 547ba89ca4..5583ff1221 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-document-picker/input-document-picker.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-document-picker/input-document-picker.element.ts @@ -20,6 +20,44 @@ export class UmbInputDocumentPickerElement extends FormControlMixin(UmbLitElemen `, ]; + + /** + * This is a minimum amount of selected items in this input. + * @type {number} + * @attr + * @default undefined + */ + @property({ type: Number }) + min?: number; + + /** + * Min validation message. + * @type {boolean} + * @attr + * @default + */ + @property({ type: String, attribute: 'min-message' }) + minMessage = 'This field need more items'; + + /** + * This is a maximum amount of selected items in this input. + * @type {number} + * @attr + * @default undefined + */ + @property({ type: Number }) + max?: number; + + /** + * Max validation message. + * @type {boolean} + * @attr + * @default + */ + @property({ type: String, attribute: 'min-message' }) + maxMessage = 'This field exceeds the allowed amount of items'; + + private _selectedKeys: Array = []; public get selectedKeys(): Array { return this._selectedKeys; @@ -51,6 +89,17 @@ export class UmbInputDocumentPickerElement extends FormControlMixin(UmbLitElemen constructor() { super(); + this.addValidator( + 'rangeUnderflow', + () => this.minMessage, + () => !!this.min && (this._value as string).length < this.min + ); + this.addValidator( + 'rangeOverflow', + () => this.maxMessage, + () => !!this.max && (this._value as string).length > this.max + ); + this.consumeContext('umbDocumentStore', (instance) => { this._documentStore = instance this._observePickedDocuments();