number range input + editor

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

@@ -76,9 +76,6 @@ export class UmbInputDocumentPickerElement extends FormControlMixin(UmbLitElemen
 		}
 	}
 
-	@property({ type: Array, attribute: false })
-	public config = [];
-
 	@state()
 	private _items?: Array<FolderTreeItem>;
 

src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-number-range/input-number-range.element.ts

@@ -0,0 +1,91 @@
+import { css, html } from 'lit';
+import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
+import { customElement, property, state } from 'lit/decorators.js';
+import { FormControlMixin } from '@umbraco-ui/uui-base/lib/mixins';
+import { UmbLitElement } from '@umbraco-cms/element';
+
+function getNumberOrUndefined(value: string) {
+  const num = parseInt(value, 10);
+  return isNaN(num) ? undefined : num;
+}
+
+@customElement('umb-input-number-range')
+export class UmbInputNumberRangeElement extends FormControlMixin(UmbLitElement) {
+	static styles = [
+		UUITextStyles,
+		css`
+
+		`,
+	];
+
+	@state()
+	private _minValue?: number;
+	@property()
+	public get minValue() {
+		return this._minValue;
+	}
+	public set minValue(keys: number | undefined) {
+		this._minValue = keys;
+		this.updateValue();
+	}
+
+	@state()
+	private _maxValue?: number;
+	@property()
+	public get maxValue() {
+		return this._maxValue;
+	}
+	public set maxValue(keys: number | undefined) {
+		this._maxValue = keys;
+		this.updateValue();
+	}
+
+	private updateValue() {
+		const newValue = (this._minValue || this._maxValue) ? (this._minValue || '')+','+(this._maxValue || '') : '';
+		if(super.value !== newValue) {
+			super.value = newValue;
+		}
+	}
+
+	@property()
+	public set value(keysString: string) {
+		if(keysString !== this._value) {
+			const splittedValue = keysString.split(/[ ,]+/);
+			this.minValue = getNumberOrUndefined(splittedValue[0]);
+			this.maxValue = getNumberOrUndefined(splittedValue[1]);
+		}
+	}
+
+	constructor() {
+		super();
+	}
+
+  protected getFormElement() {
+    return this;
+  }
+
+	private _onMinInput(e:InputEvent) {
+		this.minValue = Number((e.target as HTMLInputElement).value);
+		this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }));
+	}
+
+	private _onMaxInput(e:InputEvent) {
+		this.maxValue = Number((e.target as HTMLInputElement).value);
+		this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }));
+	}
+
+
+
+	render() {
+		return html`<uui-input type="number" .value=${this._minValue} @input=${this._onMinInput}></uui-input> – <uui-input type="number" .value=${this._maxValue} @input=${this._onMaxInput}></uui-input>`;
+	}
+
+}
+
+export default UmbInputNumberRangeElement;
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'umb-input-number-range': UmbInputNumberRangeElement;
+	}
+}

src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/content-picker/manifests.ts

@@ -18,6 +18,12 @@ export const manifest: ManifestPropertyEditorUI = {
 					description: 'Opens the node in a dialog',
 					propertyEditorUI: 'Umb.PropertyEditorUI.Toggle',
 				},
+				{
+					alias: 'validationLimit',
+					label: 'Amount of Documents',
+					description: 'Require a certain amount of documents',
+					propertyEditorUI: 'Umb.PropertyEditorUI.NumberRange',
+				},
 			],
 		},
 	},

src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/content-picker/property-editor-ui-document-picker.element.ts

@@ -1,6 +1,5 @@
 import { html } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
-import { ChangeEvent } from 'react';
 import { UmbLitElement } from '@umbraco-cms/element';
 // eslint-disable-next-line import/no-named-as-default
 import type { UmbInputDocumentPickerElement } from 'src/backoffice/shared/components/input-document-picker/input-document-picker.element';
@@ -34,7 +33,7 @@ export class UmbPropertyEditorUIContentPickerElement extends UmbLitElement {
 	public config = [];
 
 
-	private _onChange(event: ChangeEvent) {
+	private _onChange(event: CustomEvent) {
 		this.value = (event.target as UmbInputDocumentPickerElement).selectedKeys;
 		this.dispatchEvent(new CustomEvent('property-value-change'));
 	}

src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/number-range/property-editor-ui-number-range.element.ts

@@ -1,6 +1,13 @@
 import { html, LitElement } from 'lit';
 import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
-import { customElement, property } from 'lit/decorators.js';
+import { customElement, property, state } from 'lit/decorators.js';
+import type {UmbInputNumberRangeElement} from 'src/backoffice/shared/components/input-number-range/input-number-range.element';
+import 'src/backoffice/shared/components/input-number-range/input-number-range.element';
+
+type ValueType = {
+	min?: number;
+	max?: number;
+}
 
 /**
  * @element umb-property-editor-ui-number-range
@@ -9,14 +16,35 @@ import { customElement, property } from 'lit/decorators.js';
 export class UmbPropertyEditorUINumberRangeElement extends LitElement {
 	static styles = [UUITextStyles];
 
-	@property()
-	value = '';
+	@property({type: Object})
+	private _value: ValueType = {min: undefined, max: undefined};
+	public get value() {
+		return this._value;
+	}
+	public set value(value: ValueType) {
+		this._value = value;
+		this._minValue = value.min;
+		this._maxValue = value.max;
+	}
 
 	@property({ type: Array, attribute: false })
 	public config = [];
 
+	private _onChange(event: CustomEvent) {
+		this.value = {
+			min: (event.target as UmbInputNumberRangeElement).minValue,
+			max: (event.target as UmbInputNumberRangeElement).maxValue
+		}
+		this.dispatchEvent(new CustomEvent('property-value-change'));
+	}
+
+	@state()
+	_minValue?:number;
+	@state()
+	_maxValue?:number;
+
 	render() {
-		return html`<div>umb-property-editor-ui-number-range</div>`;
+		return html`<umb-input-number-range .minValue=${this._minValue} .maxValue=${this._maxValue} @change=${this._onChange}></umb-input-number-range>`;
 	}
 }
 

src/Umbraco.Web.UI.Client/src/core/mocks/data/data-type.data.ts

@@ -72,7 +72,11 @@ export const data: Array<DataTypeDetails> = [
 		isFolder: false,
 		propertyEditorModelAlias: 'Umbraco.ContentPicker',
 		propertyEditorUIAlias: 'Umb.PropertyEditorUI.ContentPicker',
-		data: [],
+		data: [
+			{
+				alias: 'validationLimit',
+				value: {min: 2, max:4},
+			}],
 	},
 	{
 		name: 'Eye Dropper',