@umbraco-cms/backoffice 17.0.2 → 17.1.0

package/dist-cms/packages/preview/umbraco-package.js

@@ -0,0 +1,9 @@
+export const name = 'Umbraco.Core.Preview';
+export const extensions = [
+    {
+        name: 'Preview Bundle',
+        alias: 'Umb.Bundle.Preview',
+        type: 'bundle',
+        js: () => import('./manifests.js'),
+    },
+];

package/dist-cms/packages/preview/vite.config.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("vite").UserConfig;
+export default _default;

package/dist-cms/packages/preview/vite.config.js

@@ -0,0 +1,9 @@
+import { defineConfig } from 'vite';
+import { rmSync } from 'fs';
+import { getDefaultConfig } from '../../vite-config-base.js';
+const dist = '../../../dist-cms/packages/preview';
+// delete the unbundled dist folder
+rmSync(dist, { recursive: true, force: true });
+export default defineConfig({
+    ...getDefaultConfig({ dist }),
+});

package/dist-cms/packages/property-editors/color-picker/property-editor-ui-color-picker.element.d.ts

@@ -1,10 +1,11 @@
 import { UmbLitElement } from '../../core/lit-element/index.js';
 import type { UmbPropertyEditorConfigCollection, UmbPropertyEditorUiElement } from '../../core/property-editor/index.js';
 import type { UmbSwatchDetails } from '../../core/models/index.js';
+declare const UmbPropertyEditorUIColorPickerElement_base: import("../../../libs/extension-api/index.js").HTMLElementConstructor<import("../../core/validation/index.js").UmbFormControlMixinElement<UmbSwatchDetails | undefined>> & typeof UmbLitElement;
 /**
  * @element umb-property-editor-ui-color-picker
  */
-export declare class UmbPropertyEditorUIColorPickerElement extends UmbLitElement implements UmbPropertyEditorUiElement {
+export declare class UmbPropertyEditorUIColorPickerElement extends UmbPropertyEditorUIColorPickerElement_base implements UmbPropertyEditorUiElement {
     #private;
     set value(value: UmbSwatchDetails | undefined);
     get value(): UmbSwatchDetails | undefined;
@@ -15,9 +16,12 @@ export declare class UmbPropertyEditorUIColorPickerElement extends UmbLitElement
      * @default false
      */
     readonly: boolean;
+    mandatory: boolean;
+    mandatoryMessage: string;
     private _showLabels;
     private _swatches;
     set config(config: UmbPropertyEditorConfigCollection | undefined);
+    firstUpdated(): void;
     render(): import("lit-html").TemplateResult<1>;
 }
 export default UmbPropertyEditorUIColorPickerElement;

package/dist-cms/packages/property-editors/color-picker/property-editor-ui-color-picker.element.js

@@ -7,13 +7,13 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { html, customElement, property, state } from '../../../external/lit/index.js';
 import { UmbLitElement } from '../../core/lit-element/index.js';
 import { UmbChangeEvent } from '../../core/event/index.js';
+import { UMB_VALIDATION_EMPTY_LOCALIZATION_KEY, UmbFormControlMixin } from '../../core/validation/index.js';
 /**
  * @element umb-property-editor-ui-color-picker
  */
-let UmbPropertyEditorUIColorPickerElement = class UmbPropertyEditorUIColorPickerElement extends UmbLitElement {
+let UmbPropertyEditorUIColorPickerElement = class UmbPropertyEditorUIColorPickerElement extends UmbFormControlMixin(UmbLitElement) {
     constructor() {
         super(...arguments);
-        this.#defaultShowLabels = false;
         /**
          * Sets the input to readonly mode, meaning value cannot be changed but still able to read and select its content.
          * @type {boolean}
@@ -21,21 +21,21 @@ let UmbPropertyEditorUIColorPickerElement = class UmbPropertyEditorUIColorPicker
          * @default false
          */
         this.readonly = false;
-        this._showLabels = this.#defaultShowLabels;
+        this.mandatory = false;
+        this.mandatoryMessage = UMB_VALIDATION_EMPTY_LOCALIZATION_KEY;
+        this._showLabels = false;
         this._swatches = [];
     }
-    #defaultShowLabels;
     set value(value) {
-        this.#value = value ? this.#ensureHashPrefix(value) : undefined;
+        super.value = value ? this.#ensureHashPrefix(value) : undefined;
     }
     get value() {
-        return this.#value;
+        return super.value;
     }
-    #value;
     set config(config) {
         if (!config)
             return;
-        this._showLabels = config?.getValueByAlias('useLabel') ?? this.#defaultShowLabels;
+        this._showLabels = config?.getValueByAlias('useLabel') ?? false;
         const swatches = config?.getValueByAlias('items') ?? [];
         this._swatches = swatches.map((swatch) => this.#ensureHashPrefix(swatch));
     }
@@ -51,12 +51,17 @@ let UmbPropertyEditorUIColorPickerElement = class UmbPropertyEditorUIColorPicker
         this.value = this._swatches.find((swatch) => swatch.value === value);
         this.dispatchEvent(new UmbChangeEvent());
     }
+    firstUpdated() {
+        this.addFormControlElement(this.shadowRoot.querySelector('umb-input-color'));
+    }
     render() {
         return html `<umb-input-color
-			value=${this.value?.value ?? ''}
+			.value=${this.value?.value}
 			.swatches=${this._swatches}
 			?showLabels=${this._showLabels}
 			@change=${this.#onChange}
+			?required=${this.mandatory}
+			.requiredMessage=${this.mandatoryMessage}
 			?readonly=${this.readonly}></umb-input-color>`;
     }
 };
@@ -66,6 +71,12 @@ __decorate([
 __decorate([
     property({ type: Boolean, reflect: true })
 ], UmbPropertyEditorUIColorPickerElement.prototype, "readonly", void 0);
+__decorate([
+    property({ type: Boolean })
+], UmbPropertyEditorUIColorPickerElement.prototype, "mandatory", void 0);
+__decorate([
+    property({ type: String })
+], UmbPropertyEditorUIColorPickerElement.prototype, "mandatoryMessage", void 0);
 __decorate([
     state()
 ], UmbPropertyEditorUIColorPickerElement.prototype, "_showLabels", void 0);

package/dist-cms/packages/property-editors/content-picker/components/input-content/input-content.element.d.ts

@@ -26,6 +26,9 @@ export declare class UmbInputContentElement extends UmbInputContentElement_base
      * @default false
      */
     readonly: boolean;
+    required: boolean;
+    requiredMessage: string;
+    constructor();
     get interactionMemories(): Array<UmbInteractionMemoryModel> | undefined;
     set interactionMemories(value: Array<UmbInteractionMemoryModel> | undefined);
     firstUpdated(): void;

package/dist-cms/packages/property-editors/content-picker/components/input-content/input-content.element.js

@@ -7,28 +7,10 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { css, customElement, html, property } from '../../../../../external/lit/index.js';
 import { splitStringToArray } from '../../../../core/utils/index.js';
 import { UmbChangeEvent } from '../../../../core/event/index.js';
-import { UmbFormControlMixin } from '../../../../core/validation/index.js';
+import { UMB_VALIDATION_EMPTY_LOCALIZATION_KEY, UmbFormControlMixin } from '../../../../core/validation/index.js';
 import { UmbInteractionMemoriesChangeEvent } from '../../../../core/interaction-memory/index.js';
 import { UmbLitElement } from '../../../../core/lit-element/index.js';
 let UmbInputContentElement = class UmbInputContentElement extends UmbFormControlMixin(UmbLitElement) {
-    constructor() {
-        super(...arguments);
-        this.#type = 'content';
-        this.min = 0;
-        this.minMessage = 'This field need more items';
-        this.max = 0;
-        this.maxMessage = 'This field exceeds the allowed amount of items';
-        this.#allowedContentTypeIds = [];
-        /**
-         * Sets the input to readonly mode, meaning value cannot be changed but still able to read and select its content.
-         * @type {boolean}
-         * @attr
-         * @default false
-         */
-        this.readonly = false;
-        this.#entityTypeLookup = { content: 'document', media: 'media', member: 'member' };
-        this.#selection = [];
-    }
     set type(newType) {
         const oldType = this.#type;
         if (newType?.toLowerCase() !== this.#type) {
@@ -60,6 +42,27 @@ let UmbInputContentElement = class UmbInputContentElement extends UmbFormControl
     get value() {
         return this.#selection.length > 0 ? this.#selection.join(',') : undefined;
     }
+    constructor() {
+        super();
+        this.#type = 'content';
+        this.min = 0;
+        this.minMessage = 'This field need more items';
+        this.max = 0;
+        this.maxMessage = 'This field exceeds the allowed amount of items';
+        this.#allowedContentTypeIds = [];
+        /**
+         * Sets the input to readonly mode, meaning value cannot be changed but still able to read and select its content.
+         * @type {boolean}
+         * @attr
+         * @default false
+         */
+        this.readonly = false;
+        this.required = false;
+        this.requiredMessage = UMB_VALIDATION_EMPTY_LOCALIZATION_KEY;
+        this.#entityTypeLookup = { content: 'document', media: 'media', member: 'member' };
+        this.#selection = [];
+        this.addValidator('valueMissing', () => this.requiredMessage, () => !this.readonly && (this.required || this.min > 0) && this.selection.length === 0);
+    }
     get interactionMemories() {
         return this.#interactionMemories;
     }
@@ -180,6 +183,12 @@ __decorate([
 __decorate([
     property({ type: Boolean, reflect: true })
 ], UmbInputContentElement.prototype, "readonly", void 0);
+__decorate([
+    property({ type: Boolean })
+], UmbInputContentElement.prototype, "required", void 0);
+__decorate([
+    property({ type: String })
+], UmbInputContentElement.prototype, "requiredMessage", void 0);
 __decorate([
     property({ type: Array, attribute: false })
 ], UmbInputContentElement.prototype, "interactionMemories", null);

package/dist-cms/packages/property-editors/content-picker/property-editor-ui-content-picker.element.d.ts

@@ -14,6 +14,8 @@ export declare class UmbPropertyEditorUIContentPickerElement extends UmbProperty
      * @default false
      */
     readonly: boolean;
+    mandatory: boolean;
+    mandatoryMessage: string;
     private _type;
     private _min;
     private _minMessage;

package/dist-cms/packages/property-editors/content-picker/property-editor-ui-content-picker.element.js

@@ -9,7 +9,7 @@ import { css, customElement, html, nothing, property, repeat, state } from '../.
 import { UmbChangeEvent } from '../../core/event/index.js';
 import { umbConfirmModal } from '../../core/modal/index.js';
 import { UmbLitElement } from '../../core/lit-element/index.js';
-import { UmbFormControlMixin } from '../../core/validation/index.js';
+import { UMB_VALIDATION_EMPTY_LOCALIZATION_KEY, UmbFormControlMixin } from '../../core/validation/index.js';
 import { UMB_ANCESTORS_ENTITY_CONTEXT } from '../../core/entity/index.js';
 import { UMB_DOCUMENT_ENTITY_TYPE } from '../../documents/documents/index.js';
 import { UMB_MEDIA_ENTITY_TYPE } from '../../media/media/index.js';
@@ -34,6 +34,8 @@ let UmbPropertyEditorUIContentPickerElement = class UmbPropertyEditorUIContentPi
          * @default false
          */
         this.readonly = false;
+        this.mandatory = false;
+        this.mandatoryMessage = UMB_VALIDATION_EMPTY_LOCALIZATION_KEY;
         this._type = 'content';
         this._min = 0;
         this._minMessage = '';
@@ -74,10 +76,6 @@ let UmbPropertyEditorUIContentPickerElement = class UmbPropertyEditorUIContentPi
         this._allowedContentTypeUniques = config.getValueByAlias('filter');
         this._minMessage = `${this.localize.term('validation_minCount')} ${this._min} ${this.localize.term('validation_items')}`;
         this._maxMessage = `${this.localize.term('validation_maxCount')} ${this._max} ${this.localize.term('validation_itemsSelected')}`;
-        // NOTE: Run validation immediately, to notify if the value is outside of min/max range. [LK]
-        if (this._min > 0 || this._max < Infinity) {
-            this.checkValidity();
-        }
     }
     #parseInt(value, fallback) {
         const num = Number(value);
@@ -148,6 +146,8 @@ let UmbPropertyEditorUIContentPickerElement = class UmbPropertyEditorUIContentPi
 				.startNode=${startNode}
 				.allowedContentTypeIds=${this._allowedContentTypeUniques ?? ''}
 				?readonly=${this.readonly}
+				?required=${this.mandatory}
+				.requiredMessage=${this.mandatoryMessage}
 				@change=${this.#onChange}
 				.interactionMemories=${this._interactionMemories}
 				@interaction-memories-change=${this.#onInputInteractionMemoriesChange}>
@@ -202,6 +202,12 @@ let UmbPropertyEditorUIContentPickerElement = class UmbPropertyEditorUIContentPi
 __decorate([
     property({ type: Boolean, reflect: true })
 ], UmbPropertyEditorUIContentPickerElement.prototype, "readonly", void 0);
+__decorate([
+    property({ type: Boolean })
+], UmbPropertyEditorUIContentPickerElement.prototype, "mandatory", void 0);
+__decorate([
+    property({ type: String })
+], UmbPropertyEditorUIContentPickerElement.prototype, "mandatoryMessage", void 0);
 __decorate([
     state()
 ], UmbPropertyEditorUIContentPickerElement.prototype, "_type", void 0);

package/dist-cms/packages/property-editors/date-picker/property-editor-ui-date-picker.element.d.ts

@@ -1,5 +1,6 @@
 import type { UmbPropertyEditorConfigCollection, UmbPropertyEditorUiElement } from '../../core/property-editor/index.js';
 import { UmbLitElement } from '../../core/lit-element/index.js';
+declare const UmbPropertyEditorUIDatePickerElement_base: import("../../../libs/extension-api/index.js").HTMLElementConstructor<import("../../core/validation/index.js").UmbFormControlMixinElement<string | undefined>> & typeof UmbLitElement;
 /**
  * This property editor allows the user to pick a date, datetime-local, or time.
  * It uses raw datetime strings back and forth, and therefore it has no knowledge
@@ -19,7 +20,7 @@ import { UmbLitElement } from '../../core/lit-element/index.js';
  * with the "datetime-local" type.
  * @element umb-property-editor-ui-date-picker
  */
-export declare class UmbPropertyEditorUIDatePickerElement extends UmbLitElement implements UmbPropertyEditorUiElement {
+export declare class UmbPropertyEditorUIDatePickerElement extends UmbPropertyEditorUIDatePickerElement_base implements UmbPropertyEditorUiElement {
     #private;
     /**
      * Sets the input to readonly mode, meaning value cannot be changed but still able to read and select its content.
@@ -28,13 +29,16 @@ export declare class UmbPropertyEditorUIDatePickerElement extends UmbLitElement
      * @default false
      */
     readonly: boolean;
+    mandatory: boolean;
+    get value(): string | undefined;
+    set value(value: string | undefined);
     private _inputType;
     private _min?;
     private _max?;
     private _step?;
-    value?: string;
     private _inputValue?;
     set config(config: UmbPropertyEditorConfigCollection | undefined);
+    firstUpdated(): void;
     render(): import("lit-html").TemplateResult<1>;
 }
 export default UmbPropertyEditorUIDatePickerElement;

package/dist-cms/packages/property-editors/date-picker/property-editor-ui-date-picker.element.js

@@ -7,6 +7,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { html, customElement, property, state } from '../../../external/lit/index.js';
 import { UmbLitElement } from '../../core/lit-element/index.js';
 import { UmbChangeEvent } from '../../core/event/index.js';
+import { UmbFormControlMixin } from '../../core/validation/index.js';
 /**
  * This property editor allows the user to pick a date, datetime-local, or time.
  * It uses raw datetime strings back and forth, and therefore it has no knowledge
@@ -26,7 +27,7 @@ import { UmbChangeEvent } from '../../core/event/index.js';
  * with the "datetime-local" type.
  * @element umb-property-editor-ui-date-picker
  */
-let UmbPropertyEditorUIDatePickerElement = class UmbPropertyEditorUIDatePickerElement extends UmbLitElement {
+let UmbPropertyEditorUIDatePickerElement = class UmbPropertyEditorUIDatePickerElement extends UmbFormControlMixin(UmbLitElement) {
     constructor() {
         super(...arguments);
         /**
@@ -36,8 +37,16 @@ let UmbPropertyEditorUIDatePickerElement = class UmbPropertyEditorUIDatePickerEl
          * @default false
          */
         this.readonly = false;
+        this.mandatory = false;
         this._inputType = 'datetime-local';
     }
+    get value() {
+        return super.value;
+    }
+    set value(value) {
+        super.value = value;
+        this.#formatValue(value ?? '');
+    }
     set config(config) {
         if (!config)
             return;
@@ -114,16 +123,20 @@ let UmbPropertyEditorUIDatePickerElement = class UmbPropertyEditorUIDatePickerEl
             this.dispatchEvent(new UmbChangeEvent());
         }
     }
+    firstUpdated() {
+        this.addFormControlElement(this.shadowRoot.querySelector('umb-input-date'));
+    }
     render() {
         return html `
 			<umb-input-date
 				label=${this.localize.term('placeholders_enterdate')}
-				.value=${this._inputValue}
+				.value=${this._inputValue ?? ''}
 				.min=${this._min}
 				.max=${this._max}
 				.step=${this._step}
 				.type=${this._inputType}
 				@change=${this.#onChange}
+				?required=${this.mandatory}
 				?readonly=${this.readonly}>
 			</umb-input-date>
 		`;
@@ -132,6 +145,12 @@ let UmbPropertyEditorUIDatePickerElement = class UmbPropertyEditorUIDatePickerEl
 __decorate([
     property({ type: Boolean, reflect: true })
 ], UmbPropertyEditorUIDatePickerElement.prototype, "readonly", void 0);
+__decorate([
+    property({ type: Boolean })
+], UmbPropertyEditorUIDatePickerElement.prototype, "mandatory", void 0);
+__decorate([
+    property({ type: String })
+], UmbPropertyEditorUIDatePickerElement.prototype, "value", null);
 __decorate([
     state()
 ], UmbPropertyEditorUIDatePickerElement.prototype, "_inputType", void 0);
@@ -144,9 +163,6 @@ __decorate([
 __decorate([
     state()
 ], UmbPropertyEditorUIDatePickerElement.prototype, "_step", void 0);
-__decorate([
-    property()
-], UmbPropertyEditorUIDatePickerElement.prototype, "value", void 0);
 __decorate([
     state()
 ], UmbPropertyEditorUIDatePickerElement.prototype, "_inputValue", void 0);

package/dist-cms/packages/property-editors/eye-dropper/property-editor-ui-eye-dropper.element.d.ts

@@ -1,14 +1,18 @@
 import { UmbLitElement } from '../../core/lit-element/index.js';
 import type { UmbPropertyEditorConfigCollection, UmbPropertyEditorUiElement } from '../../core/property-editor/index.js';
+declare const UmbPropertyEditorUIEyeDropperElement_base: import("../../../libs/extension-api/index.js").HTMLElementConstructor<import("../../core/validation/index.js").UmbFormControlMixinElement<string | undefined>> & typeof UmbLitElement;
 /**
  * @element umb-property-editor-ui-eye-dropper
  */
-export declare class UmbPropertyEditorUIEyeDropperElement extends UmbLitElement implements UmbPropertyEditorUiElement {
+export declare class UmbPropertyEditorUIEyeDropperElement extends UmbPropertyEditorUIEyeDropperElement_base implements UmbPropertyEditorUiElement {
     #private;
-    value: string;
+    readonly: boolean;
+    mandatory: boolean;
+    mandatoryMessage: string;
     private _opacity;
     private _showPalette;
     set config(config: UmbPropertyEditorConfigCollection | undefined);
+    protected firstUpdated(): void;
     render(): import("lit-html").TemplateResult<1>;
 }
 export default UmbPropertyEditorUIEyeDropperElement;

package/dist-cms/packages/property-editors/eye-dropper/property-editor-ui-eye-dropper.element.js

@@ -7,13 +7,16 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { html, customElement, property, state } from '../../../external/lit/index.js';
 import { UmbLitElement } from '../../core/lit-element/index.js';
 import { UmbChangeEvent } from '../../core/event/index.js';
+import { UMB_VALIDATION_EMPTY_LOCALIZATION_KEY, UmbFormControlMixin } from '../../core/validation/index.js';
 /**
  * @element umb-property-editor-ui-eye-dropper
  */
-let UmbPropertyEditorUIEyeDropperElement = class UmbPropertyEditorUIEyeDropperElement extends UmbLitElement {
+let UmbPropertyEditorUIEyeDropperElement = class UmbPropertyEditorUIEyeDropperElement extends UmbFormControlMixin(UmbLitElement) {
     constructor() {
         super(...arguments);
-        this.value = '';
+        this.readonly = false;
+        this.mandatory = false;
+        this.mandatoryMessage = UMB_VALIDATION_EMPTY_LOCALIZATION_KEY;
         this._opacity = false;
         this._showPalette = false;
     }
@@ -27,19 +30,31 @@ let UmbPropertyEditorUIEyeDropperElement = class UmbPropertyEditorUIEyeDropperEl
         this.value = event.target.value;
         this.dispatchEvent(new UmbChangeEvent());
     }
+    firstUpdated() {
+        this.addFormControlElement(this.shadowRoot.querySelector('umb-input-eye-dropper'));
+    }
     render() {
         return html `
 			<umb-input-eye-dropper
 				.opacity=${this._opacity}
 				.showPalette=${this._showPalette}
-				value=${this.value}
+				.value=${this.value}
+				?required=${this.mandatory}
+				.requiredMessage=${this.mandatoryMessage}
+				?readonly=${this.readonly}
 				@change=${this.#onChange}></umb-input-eye-dropper>
 		`;
     }
 };
 __decorate([
-    property()
-], UmbPropertyEditorUIEyeDropperElement.prototype, "value", void 0);
+    property({ type: Boolean, reflect: true })
+], UmbPropertyEditorUIEyeDropperElement.prototype, "readonly", void 0);
+__decorate([
+    property({ type: Boolean })
+], UmbPropertyEditorUIEyeDropperElement.prototype, "mandatory", void 0);
+__decorate([
+    property({ type: String })
+], UmbPropertyEditorUIEyeDropperElement.prototype, "mandatoryMessage", void 0);
 __decorate([
     state()
 ], UmbPropertyEditorUIEyeDropperElement.prototype, "_opacity", void 0);

package/dist-cms/packages/property-editors/icon-picker/manifests.js

@@ -16,6 +16,12 @@ export const manifests = [
                         description: 'Icon name to show when no icon is selected',
                         propertyEditorUiAlias: 'Umb.PropertyEditorUi.IconPicker',
                     },
+                    {
+                        alias: 'hideColors',
+                        label: 'Hide colors',
+                        description: 'Hide color swatches from modal',
+                        propertyEditorUiAlias: 'Umb.PropertyEditorUi.Toggle',
+                    },
                 ],
             },
         },

package/dist-cms/packages/property-editors/icon-picker/property-editor-ui-icon-picker.element.d.ts

@@ -1,15 +1,18 @@
 import type { UmbPropertyEditorConfigCollection, UmbPropertyEditorUiElement } from '../../core/property-editor/index.js';
 import { UmbLitElement } from '../../core/lit-element/index.js';
+declare const UmbPropertyEditorUIIconPickerElement_base: import("../../../libs/extension-api/index.js").HTMLElementConstructor<import("../../core/validation/index.js").UmbFormControlMixinElement<string | undefined>> & typeof UmbLitElement;
 /**
  * @element umb-property-editor-ui-icon-picker
  */
-export declare class UmbPropertyEditorUIIconPickerElement extends UmbLitElement implements UmbPropertyEditorUiElement {
+export declare class UmbPropertyEditorUIIconPickerElement extends UmbPropertyEditorUIIconPickerElement_base implements UmbPropertyEditorUiElement {
+    mandatory: boolean;
+    protected firstUpdated(): void;
     set value(v: string);
     get value(): string;
-    private _value;
     private _icon;
     private _color;
     private _placeholderIcon;
+    private _hideColors;
     set config(config: UmbPropertyEditorConfigCollection | undefined);
     private _openModal;
     render(): import("lit-html").TemplateResult<1>;

package/dist-cms/packages/property-editors/icon-picker/property-editor-ui-icon-picker.element.js

@@ -10,38 +10,44 @@ import { UMB_ICON_PICKER_MODAL } from '../../core/icon-registry/index.js';
 import { UmbLitElement } from '../../core/lit-element/index.js';
 import { extractUmbColorVariable } from '../../core/resources/index.js';
 import { UmbChangeEvent } from '../../core/event/index.js';
+import { UmbFormControlMixin } from '../../core/validation/index.js';
 /**
  * @element umb-property-editor-ui-icon-picker
  */
-let UmbPropertyEditorUIIconPickerElement = class UmbPropertyEditorUIIconPickerElement extends UmbLitElement {
+let UmbPropertyEditorUIIconPickerElement = class UmbPropertyEditorUIIconPickerElement extends UmbFormControlMixin(UmbLitElement, undefined) {
     constructor() {
         super(...arguments);
-        this._value = '';
+        this.mandatory = false;
         this._icon = '';
         this._color = '';
         this._placeholderIcon = '';
+        this._hideColors = false;
+    }
+    firstUpdated() {
+        this.addValidator('valueMissing', () => 'Icon is required', () => this.mandatory && !this._icon);
     }
-    //
     set value(v) {
-        this._value = v ?? '';
-        const parts = this._value.split(' ');
+        const val = v ?? '';
+        super.value = val;
+        const parts = val.split(' ');
         if (parts.length === 2) {
             this._icon = parts[0];
             this._color = parts[1].replace('color-', '');
         }
         else {
-            this._icon = this._value;
+            this._icon = val;
             this._color = '';
         }
     }
     get value() {
-        return this._value;
+        return super.value ?? '';
     }
     set config(config) {
         if (!config)
             return;
         const placeholder = config.getValueByAlias('placeholder');
         this._placeholderIcon = typeof placeholder === 'string' ? placeholder : '';
+        this._hideColors = config.getValueByAlias('hideColors');
     }
     async _openModal() {
         const data = await umbOpenModal(this, UMB_ICON_PICKER_MODAL, {
@@ -49,7 +55,7 @@ let UmbPropertyEditorUIIconPickerElement = class UmbPropertyEditorUIIconPickerEl
                 icon: this._icon,
                 color: this._color,
             },
-            data: { placeholder: this._placeholderIcon },
+            data: { placeholder: this._placeholderIcon, showEmptyOption: !this.mandatory, hideColors: this._hideColors },
         }).catch(() => undefined);
         if (!data)
             return;
@@ -83,6 +89,9 @@ let UmbPropertyEditorUIIconPickerElement = class UmbPropertyEditorUIIconPickerEl
 		`;
     }
 };
+__decorate([
+    property({ type: Boolean })
+], UmbPropertyEditorUIIconPickerElement.prototype, "mandatory", void 0);
 __decorate([
     property()
 ], UmbPropertyEditorUIIconPickerElement.prototype, "value", null);
@@ -95,6 +104,9 @@ __decorate([
 __decorate([
     state()
 ], UmbPropertyEditorUIIconPickerElement.prototype, "_placeholderIcon", void 0);
+__decorate([
+    state()
+], UmbPropertyEditorUIIconPickerElement.prototype, "_hideColors", void 0);
 UmbPropertyEditorUIIconPickerElement = __decorate([
     customElement('umb-property-editor-ui-icon-picker')
 ], UmbPropertyEditorUIIconPickerElement);

package/dist-cms/packages/property-editors/number/property-editor-ui-number.element.d.ts

@@ -10,6 +10,12 @@ export declare class UmbPropertyEditorUINumberElement extends UmbPropertyEditorU
      * @default false
      */
     readonly: boolean;
+    /**
+     * Sets the input to mandatory, meaning validation will fail if the value is empty.
+     * @type {boolean}
+     */
+    mandatory?: boolean;
+    mandatoryMessage: string;
     private _label?;
     private _max?;
     private _min?;

package/dist-cms/packages/property-editors/number/property-editor-ui-number.element.js

@@ -5,18 +5,18 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { css, customElement, html, ifDefined, property, state } from '../../../external/lit/index.js';
-import { UmbFormControlMixin } from '../../core/validation/index.js';
+import { UmbChangeEvent } from '../../core/event/index.js';
 import { UmbLitElement } from '../../core/lit-element/index.js';
 import { UMB_PROPERTY_CONTEXT } from '../../core/property/index.js';
-import { UmbChangeEvent } from '../../core/event/index.js';
-let UmbPropertyEditorUINumberElement = class UmbPropertyEditorUINumberElement extends UmbFormControlMixin(UmbLitElement) {
+import { UMB_VALIDATION_EMPTY_LOCALIZATION_KEY, UmbFormControlMixin } from '../../core/validation/index.js';
+let UmbPropertyEditorUINumberElement = class UmbPropertyEditorUINumberElement extends UmbFormControlMixin(UmbLitElement, undefined) {
     set config(config) {
         if (!config)
             return;
         this._min = this.#parseNumber(config.getValueByAlias('min'));
         this._max = this.#parseNumber(config.getValueByAlias('max'));
         this._step = this.#parseNumber(config.getValueByAlias('step'));
-        this._placeholder = config.getValueByAlias('placeholder');
+        this._placeholder = this.localize.string(config.getValueByAlias('placeholder') ?? '');
     }
     constructor() {
         super();
@@ -27,6 +27,7 @@ let UmbPropertyEditorUINumberElement = class UmbPropertyEditorUINumberElement ex
          * @default false
          */
         this.readonly = false;
+        this.mandatoryMessage = UMB_VALIDATION_EMPTY_LOCALIZATION_KEY;
         this.consumeContext(UMB_PROPERTY_CONTEXT, (context) => {
             this._label = context?.getLabel();
         });
@@ -38,6 +39,7 @@ let UmbPropertyEditorUINumberElement = class UmbPropertyEditorUINumberElement ex
         if (this._min && this._max && this._min > this._max) {
             console.warn(`Property '${this._label}' (Numeric) has been misconfigured, 'min' is greater than 'max'. Please correct your data type configuration.`, this);
         }
+        this.addFormControlElement(this.shadowRoot.querySelector('uui-input'));
     }
     #parseNumber(input) {
         const num = Number(input);
@@ -58,10 +60,12 @@ let UmbPropertyEditorUINumberElement = class UmbPropertyEditorUINumberElement ex
 				min=${ifDefined(this._min)}
 				max=${ifDefined(this._max)}
 				step=${ifDefined(this._step)}
-				placeholder=${ifDefined(this._placeholder)}
 				value=${this.value?.toString() ?? ''}
-				@change=${this.#onChange}
-				?readonly=${this.readonly}>
+				.placeholder=${this._placeholder ?? ''}
+				.requiredMessage=${this.mandatoryMessage}
+				?required=${this.mandatory}
+				?readonly=${this.readonly}
+				@change=${this.#onChange}>
 			</uui-input>
 		`;
     }
@@ -76,6 +80,12 @@ let UmbPropertyEditorUINumberElement = class UmbPropertyEditorUINumberElement ex
 __decorate([
     property({ type: Boolean, reflect: true })
 ], UmbPropertyEditorUINumberElement.prototype, "readonly", void 0);
+__decorate([
+    property({ type: Boolean })
+], UmbPropertyEditorUINumberElement.prototype, "mandatory", void 0);
+__decorate([
+    property({ type: String })
+], UmbPropertyEditorUINumberElement.prototype, "mandatoryMessage", void 0);
 __decorate([
     state()
 ], UmbPropertyEditorUINumberElement.prototype, "_label", void 0);