@umbraco-cms/backoffice 17.0.2 → 17.1.0

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

@@ -10,6 +10,8 @@ export declare class UmbPropertyEditorUINumberRangeElement extends UmbPropertyEd
     private _minValue?;
     private _maxValue?;
     private _validationRange?;
+    mandatory: boolean;
+    mandatoryMessage: string;
     set value(value: UmbNumberRangeValueType | undefined);
     get value(): UmbNumberRangeValueType | undefined;
     set config(config: UmbPropertyEditorConfigCollection);

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

@@ -5,15 +5,20 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { customElement, html, property, state } from '../../../external/lit/index.js';
-import { UmbFormControlMixin } from '../../core/validation/index.js';
+import { UMB_VALIDATION_EMPTY_LOCALIZATION_KEY, UmbFormControlMixin } from '../../core/validation/index.js';
 import { UmbChangeEvent } from '../../core/event/index.js';
 import { UmbLitElement } from '../../core/lit-element/index.js';
 /**
  * @element umb-property-editor-ui-number-range
  */
 let UmbPropertyEditorUINumberRangeElement = class UmbPropertyEditorUINumberRangeElement extends UmbFormControlMixin(UmbLitElement, undefined) {
+    constructor() {
+        super(...arguments);
+        this.mandatory = false;
+        this.mandatoryMessage = UMB_VALIDATION_EMPTY_LOCALIZATION_KEY;
+    }
     set value(value) {
-        super.value = value || { min: undefined, max: undefined };
+        super.value = value;
         this._minValue = value?.min;
         this._maxValue = value?.max;
     }
@@ -26,7 +31,9 @@ let UmbPropertyEditorUINumberRangeElement = class UmbPropertyEditorUINumberRange
         this._validationRange = config.getValueByAlias('validationRange');
     }
     #onChange(event) {
-        this.value = { min: event.target.minValue, max: event.target.maxValue };
+        const min = event.target.minValue;
+        const max = event.target.maxValue;
+        this.value = min == null && max == null ? undefined : { min, max };
         this.dispatchEvent(new UmbChangeEvent());
     }
     firstUpdated() {
@@ -40,6 +47,8 @@ let UmbPropertyEditorUINumberRangeElement = class UmbPropertyEditorUINumberRange
 			<umb-input-number-range
 				.minValue=${this._minValue}
 				.maxValue=${this._maxValue}
+				?required=${this.mandatory}
+				.requiredMessage=${this.mandatoryMessage}
 				.validationRange=${this._validationRange}
 				@change=${this.#onChange}>
 			</umb-input-number-range>
@@ -55,6 +64,12 @@ __decorate([
 __decorate([
     state()
 ], UmbPropertyEditorUINumberRangeElement.prototype, "_validationRange", void 0);
+__decorate([
+    property({ type: Boolean })
+], UmbPropertyEditorUINumberRangeElement.prototype, "mandatory", void 0);
+__decorate([
+    property({ type: String })
+], UmbPropertyEditorUINumberRangeElement.prototype, "mandatoryMessage", void 0);
 __decorate([
     property({ type: Object })
 ], UmbPropertyEditorUINumberRangeElement.prototype, "value", null);

package/dist-cms/packages/property-editors/slider/Umbraco.Slider.js

@@ -10,18 +10,20 @@ export const manifest = {
                     alias: 'minVal',
                     label: 'Minimum value',
                     description: '',
-                    propertyEditorUiAlias: 'Umb.PropertyEditorUi.Integer',
+                    propertyEditorUiAlias: 'Umb.PropertyEditorUi.Decimal',
+                    config: [{ alias: 'step', value: '0.00001' }],
                 },
                 {
                     alias: 'maxVal',
                     label: 'Maximum value',
                     description: '',
-                    propertyEditorUiAlias: 'Umb.PropertyEditorUi.Integer',
+                    propertyEditorUiAlias: 'Umb.PropertyEditorUi.Decimal',
+                    config: [{ alias: 'step', value: '0.00001' }],
                 },
             ],
             defaultData: [
-                { alias: 'minVal', value: 0 },
-                { alias: 'maxVal', value: 100 },
+                { alias: 'minVal', value: 0.0 },
+                { alias: 'maxVal', value: 100.0 },
             ],
         },
     },

package/dist-cms/packages/property-editors/slider/manifests.js

@@ -30,33 +30,36 @@ export const manifests = [
                         alias: 'initVal1',
                         label: 'Initial value',
                         description: '',
-                        propertyEditorUiAlias: 'Umb.PropertyEditorUi.Integer',
+                        propertyEditorUiAlias: 'Umb.PropertyEditorUi.Decimal',
+                        config: [{ alias: 'step', value: '0.00001' }],
                     },
                     {
                         alias: 'initVal2',
                         label: 'Initial value 2',
                         description: 'Used when range is enabled',
-                        propertyEditorUiAlias: 'Umb.PropertyEditorUi.Integer',
+                        propertyEditorUiAlias: 'Umb.PropertyEditorUi.Decimal',
+                        config: [{ alias: 'step', value: '0.00001' }],
                     },
                     {
                         alias: 'step',
                         label: 'Step increments',
                         description: '',
-                        propertyEditorUiAlias: 'Umb.PropertyEditorUi.Integer',
+                        propertyEditorUiAlias: 'Umb.PropertyEditorUi.Decimal',
+                        config: [{ alias: 'step', value: '0.00001' }],
                     },
                 ],
                 defaultData: [
                     {
                         alias: 'initVal1',
-                        value: 0,
+                        value: 0.0,
                     },
                     {
                         alias: 'initVal2',
-                        value: 0,
+                        value: 0.0,
                     },
                     {
                         alias: 'step',
-                        value: 1,
+                        value: 1.0,
                     },
                 ],
             },

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

@@ -14,6 +14,12 @@ export declare class UmbPropertyEditorUISliderElement 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 _enableRange;
     private _initVal1;
     private _initVal2;

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

@@ -8,12 +8,21 @@ import { UmbChangeEvent } from '../../core/event/index.js';
 import { customElement, html, property, state } from '../../../external/lit/index.js';
 import { UmbLitElement } from '../../core/lit-element/index.js';
 import { UMB_PROPERTY_CONTEXT } from '../../core/property/index.js';
-import { UmbFormControlMixin } from '../../core/validation/index.js';
+import { UMB_VALIDATION_EMPTY_LOCALIZATION_KEY, UmbFormControlMixin } from '../../core/validation/index.js';
+/**
+ *
+ * @param value
+ */
 function stringToValueObject(value) {
     const [from, to] = (value ?? ',').split(',');
     const fromNumber = makeNumberOrUndefined(from);
     return { from: fromNumber, to: makeNumberOrUndefined(to, fromNumber) };
 }
+/**
+ *
+ * @param value
+ * @param fallback
+ */
 function makeNumberOrUndefined(value, fallback) {
     if (value === undefined) {
         return fallback;
@@ -24,6 +33,11 @@ function makeNumberOrUndefined(value, fallback) {
     }
     return n;
 }
+/**
+ *
+ * @param value
+ * @param fallback
+ */
 function undefinedFallback(value, fallback) {
     return value === undefined ? fallback : value;
 }
@@ -42,8 +56,8 @@ let UmbPropertyEditorUISliderElement = class UmbPropertyEditorUISliderElement ex
         this._initVal1 = isNaN(initVal1) ? 0 : initVal1;
         const initVal2 = Number(config.getValueByAlias('initVal2'));
         this._initVal2 = isNaN(initVal2) ? this._initVal1 + this._step : initVal2;
-        this._min = this.#parseInt(config.getValueByAlias('minVal')) || 0;
-        this._max = this.#parseInt(config.getValueByAlias('maxVal')) || 100;
+        this._min = this.#parseNumber(config.getValueByAlias('minVal')) || 0;
+        this._max = this.#parseNumber(config.getValueByAlias('maxVal')) || 100;
         if (this._min === this._max) {
             this._max = this._min + 100;
             console.warn(`Property Editor (Slider) has been misconfigured, 'min' and 'max' are equal values. Please correct your data type configuration. To render the slider correctly, we changed this slider to: min = ${this._min}, max = ${this._max}`, this);
@@ -58,6 +72,7 @@ let UmbPropertyEditorUISliderElement = class UmbPropertyEditorUISliderElement ex
          * @default false
          */
         this.readonly = false;
+        this.mandatoryMessage = UMB_VALIDATION_EMPTY_LOCALIZATION_KEY;
         this._enableRange = false;
         this._initVal1 = 0;
         this._initVal2 = 1;
@@ -74,9 +89,9 @@ let UmbPropertyEditorUISliderElement = class UmbPropertyEditorUISliderElement ex
             console.warn(`Property '${this._label}' (Slider) has been misconfigured, 'min' is greater than 'max'. Please correct your data type configuration.`, this);
         }
     }
-    #parseInt(input) {
+    #parseNumber(input) {
         const num = Number(input);
-        return Number.isNaN(num) ? undefined : num;
+        return Number.isFinite(num) ? undefined : num;
     }
     #onChange(event) {
         const partialValue = stringToValueObject(event.target.value);
@@ -98,7 +113,9 @@ let UmbPropertyEditorUISliderElement = class UmbPropertyEditorUISliderElement ex
 				.max=${this._max}
 				?enable-range=${this._enableRange}
 				@change=${this.#onChange}
-				?readonly=${this.readonly}>
+				?readonly=${this.readonly}
+				?required=${this.mandatory}
+				.requiredMessage=${this.mandatoryMessage}>
 			</umb-input-slider>
 		`;
     }
@@ -106,6 +123,12 @@ let UmbPropertyEditorUISliderElement = class UmbPropertyEditorUISliderElement ex
 __decorate([
     property({ type: Boolean, reflect: true })
 ], UmbPropertyEditorUISliderElement.prototype, "readonly", void 0);
+__decorate([
+    property({ type: Boolean })
+], UmbPropertyEditorUISliderElement.prototype, "mandatory", void 0);
+__decorate([
+    property({ type: String })
+], UmbPropertyEditorUISliderElement.prototype, "mandatoryMessage", void 0);
 __decorate([
     state()
 ], UmbPropertyEditorUISliderElement.prototype, "_enableRange", void 0);

package/dist-cms/packages/property-editors/slider/slider-property-value-preset.js

@@ -1,13 +1,13 @@
 export class UmbSliderPropertyValuePreset {
     async processValue(value, config) {
-        const enableRange = Boolean(config.find((x) => x.alias === 'enableRange') ?? false);
+        const enableRange = Boolean(config.find((x) => x.alias === 'enableRange')?.value ?? false);
         /*
-        const min = Number(config.find((x) => x.alias === 'minVal') ?? 0);
-        const max = Number(config.find((x) => x.alias === 'maxVal') ?? 100);
+        const min = Number(config.find((x) => x.alias === 'minVal')?.value ?? 0);
+        const max = Number(config.find((x) => x.alias === 'maxVal')?.value ?? 100);
         const minVerified = isNaN(min) ? undefined : min;
         const maxVerified = isNaN(max) ? undefined : max;
         */
-        const step = config.find((x) => x.alias === 'step') ?? 0;
+        const step = Number(config.find((x) => x.alias === 'step')?.value ?? 0);
         const stepVerified = step > 0 ? step : 1;
         const initValueMin = Number(config.find((x) => x.alias === 'initVal1')?.value) || 0;
         const initValueMinVerified = isNaN(initValueMin) ? 0 : initValueMin;

package/dist-cms/packages/property-editors/text-box/Umbraco.TextBox.js

@@ -9,8 +9,12 @@ export const manifest = {
                 {
                     alias: 'maxChars',
                     label: 'Maximum allowed characters',
-                    description: 'If empty, 512 character limit',
                     propertyEditorUiAlias: 'Umb.PropertyEditorUi.Integer',
+                    config: [
+                        { alias: 'min', value: 1 },
+                        { alias: 'max', value: 512 },
+                        { alias: 'placeholder', value: '512' },
+                    ],
                 },
             ],
             defaultData: [

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

@@ -1,5 +1,5 @@
-import type { UmbPropertyEditorUiElement, UmbPropertyEditorConfigCollection } from '../../core/property-editor/index.js';
 import { UmbLitElement } from '../../core/lit-element/index.js';
+import type { UmbPropertyEditorUiElement, UmbPropertyEditorConfigCollection } from '../../core/property-editor/index.js';
 declare const UmbPropertyEditorUITextBoxElement_base: import("../../../libs/extension-api/index.js").HTMLElementConstructor<import("../../core/validation/index.js").UmbFormControlMixinElement<string | undefined>> & typeof UmbLitElement;
 export declare class UmbPropertyEditorUITextBoxElement extends UmbPropertyEditorUITextBoxElement_base implements UmbPropertyEditorUiElement {
     #private;
@@ -22,7 +22,7 @@ export declare class UmbPropertyEditorUITextBoxElement extends UmbPropertyEditor
      */
     name?: string;
     private _type;
-    private _inputMode?;
+    private _inputMode;
     private _maxChars?;
     private _placeholder?;
     set config(config: UmbPropertyEditorConfigCollection | undefined);

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

@@ -4,11 +4,10 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { UmbTextStyles } from '../../core/style/index.js';
-import { css, html, customElement, state, ifDefined, property } from '../../../external/lit/index.js';
+import { css, customElement, html, property, state } from '../../../external/lit/index.js';
+import { UmbChangeEvent } from '../../core/event/index.js';
 import { UmbLitElement } from '../../core/lit-element/index.js';
 import { UMB_VALIDATION_EMPTY_LOCALIZATION_KEY, UmbFormControlMixin } from '../../core/validation/index.js';
-import { UmbChangeEvent } from '../../core/event/index.js';
 let UmbPropertyEditorUITextBoxElement = class UmbPropertyEditorUITextBoxElement extends UmbFormControlMixin(UmbLitElement, undefined) {
     constructor() {
         super(...arguments);
@@ -21,14 +20,19 @@ let UmbPropertyEditorUITextBoxElement = class UmbPropertyEditorUITextBoxElement
         this.readonly = false;
         this.mandatoryMessage = UMB_VALIDATION_EMPTY_LOCALIZATION_KEY;
         this.#defaultType = 'text';
+        this.#defaultInputMode = 'text';
         this._type = this.#defaultType;
+        this._inputMode = this.#defaultInputMode;
     }
     #defaultType;
+    #defaultInputMode;
     set config(config) {
-        this._type = config?.getValueByAlias('inputType') ?? this.#defaultType;
-        this._inputMode = config?.getValueByAlias('inputMode');
-        this._maxChars = config?.getValueByAlias('maxChars');
-        this._placeholder = config?.getValueByAlias('placeholder');
+        if (!config)
+            return;
+        this._type = config.getValueByAlias('inputType') ?? this.#defaultType;
+        this._inputMode = config.getValueByAlias('inputMode') || this.#defaultInputMode;
+        this._maxChars = this.#parseNumber(config.getValueByAlias('maxChars'));
+        this._placeholder = this.localize.string(config.getValueByAlias('placeholder') ?? '');
     }
     firstUpdated() {
         this.addFormControlElement(this.shadowRoot.querySelector('uui-input'));
@@ -36,6 +40,14 @@ let UmbPropertyEditorUITextBoxElement = class UmbPropertyEditorUITextBoxElement
     focus() {
         return this.shadowRoot?.querySelector('uui-input')?.focus();
     }
+    #parseNumber(input) {
+        const num = Number(input);
+        return Number.isFinite(num) ? num : undefined;
+    }
+    #getMaxLengthMessage(max, current) {
+        const exceeded = current - max;
+        return this.localize.term('textbox_characters_exceed', max, exceeded);
+    }
     #onInput(e) {
         const newValue = e.target.value;
         if (newValue === this.value)
@@ -44,20 +56,23 @@ let UmbPropertyEditorUITextBoxElement = class UmbPropertyEditorUITextBoxElement
         this.dispatchEvent(new UmbChangeEvent());
     }
     render() {
-        return html `<uui-input
-			.label=${this.localize.term('general_fieldFor', [this.name])}
-			.value=${this.value ?? ''}
-			.type=${this._type}
-			placeholder=${ifDefined(this._placeholder)}
-			inputMode=${ifDefined(this._inputMode)}
-			maxlength=${ifDefined(this._maxChars)}
-			@input=${this.#onInput}
-			?required=${this.mandatory}
-			.requiredMessage=${this.mandatoryMessage}
-			?readonly=${this.readonly}></uui-input>`;
+        return html `
+			<uui-input
+				.inputMode=${this._inputMode}
+				.label=${this.localize.term('general_fieldFor', [this.name])}
+				.maxlength=${this._maxChars}
+				.maxlengthMessage=${this.#getMaxLengthMessage.bind(this)}
+				.placeholder=${this._placeholder ?? ''}
+				.requiredMessage=${this.mandatoryMessage}
+				.type=${this._type}
+				.value=${this.value ?? ''}
+				?readonly=${this.readonly}
+				?required=${this.mandatory}
+				@input=${this.#onInput}>
+			</uui-input>
+		`;
     }
     static { this.styles = [
-        UmbTextStyles,
         css `
 			uui-input {
 				width: 100%;

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

@@ -59,6 +59,10 @@ let UmbPropertyEditorUITextareaElement = class UmbPropertyEditorUITextareaElemen
 				@input=${this.#onInput}
 				?required=${this.mandatory}
 				.requiredMessage=${this.mandatoryMessage}
+				.maxlengthMessage=${() => {
+            const exceeded = (this.value?.length ?? 0) - (this._maxChars ?? 0);
+            return this.localize.term('textbox_characters_exceed', this._maxChars, exceeded);
+        }}
 				?readonly=${this.readonly}></uui-textarea>
 		`;
     }

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

@@ -4,10 +4,10 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { UmbChangeEvent } from '../../core/event/index.js';
 import { customElement, html, property, state } from '../../../external/lit/index.js';
+import { UmbChangeEvent } from '../../core/event/index.js';
 import { UmbLitElement } from '../../core/lit-element/index.js';
-import { UMB_VALIDATION_FALSE_LOCALIZATION_KEY, UmbFormControlMixin } from '../../core/validation/index.js';
+import { UmbFormControlMixin, UMB_VALIDATION_FALSE_LOCALIZATION_KEY } from '../../core/validation/index.js';
 let UmbPropertyEditorUIToggleElement = class UmbPropertyEditorUIToggleElement extends UmbFormControlMixin(UmbLitElement) {
     constructor() {
         super(...arguments);
@@ -23,33 +23,33 @@ let UmbPropertyEditorUIToggleElement = class UmbPropertyEditorUIToggleElement ex
     set config(config) {
         if (!config)
             return;
-        this._labelOff = config.getValueByAlias('labelOff');
-        this._labelOn = config.getValueByAlias('labelOn');
         this._showLabels = Boolean(config.getValueByAlias('showLabels'));
-        this._ariaLabel = config.getValueByAlias('ariaLabel');
+        this._labelOn = this.localize.string(config.getValueByAlias('labelOn') ?? '');
+        this._labelOff = this.localize.string(config.getValueByAlias('labelOff') ?? '');
+        this._ariaLabel =
+            this.localize.string(config.getValueByAlias('ariaLabel')) ||
+                this.localize.term('general_toggleFor', [this.name]);
     }
     firstUpdated() {
         this.addFormControlElement(this.shadowRoot.querySelector('umb-input-toggle'));
     }
     #onChange(event) {
-        const checked = event.target.checked;
-        this.value = this.mandatory ? (checked ?? null) : checked;
+        //checked is never null/undefined
+        this.value = event.target.checked;
         this.dispatchEvent(new UmbChangeEvent());
     }
     render() {
         return html `
 			<umb-input-toggle
-				.ariaLabel=${this._ariaLabel
-            ? this.localize.string(this._ariaLabel)
-            : this.localize.term('general_toggleFor', [this.name])}
+				.ariaLabel=${this._ariaLabel ?? null}
 				.labelOn=${this._labelOn}
 				.labelOff=${this._labelOff}
+				.requiredMessage=${this.mandatoryMessage}
+				.showLabels=${this._showLabels}
 				?checked=${this.value}
-				?showLabels=${this._showLabels}
+				?readonly=${this.readonly}
 				?required=${this.mandatory}
-				.requiredMessage=${this.mandatoryMessage}
-				@change=${this.#onChange}
-				?readonly=${this.readonly}>
+				@change=${this.#onChange}>
 			</umb-input-toggle>
 		`;
     }

package/dist-cms/packages/relations/relation-types/collection/views/manifests.js

@@ -7,7 +7,7 @@ export const manifests = [
         js: () => import('./table/relation-type-table-collection-view.element.js'),
         meta: {
             label: 'Table',
-            icon: 'icon-list',
+            icon: 'icon-table',
             pathName: 'table',
         },
         conditions: [

package/dist-cms/packages/rte/components/rte-base.element.js

@@ -11,9 +11,9 @@ import { UmbBlockRteEntriesContext, UmbBlockRteManagerContext } from '../../bloc
 import { UmbChangeEvent } from '../../core/event/index.js';
 import { UmbFormControlMixin, UmbValidationContext, UMB_VALIDATION_EMPTY_LOCALIZATION_KEY, } from '../../core/validation/index.js';
 import { UmbLitElement } from '../../core/lit-element/index.js';
-import { UmbVariantId } from '../../core/variant/index.js';
+import { UMB_VARIANT_CONTEXT, UmbVariantId } from '../../core/variant/index.js';
 import { UMB_CONTENT_WORKSPACE_CONTEXT } from '../../content/content/index.js';
-import { UMB_PROPERTY_CONTEXT, UMB_PROPERTY_DATASET_CONTEXT } from '../../core/property/index.js';
+import { UMB_PROPERTY_CONTEXT } from '../../core/property/index.js';
 /**
  * The abstract base class that is used as a base for the rich-text-editor component.
  * @cssprop --umb-rte-width - The width of the rich-text-editor (default: unset)
@@ -144,8 +144,10 @@ export class UmbPropertyEditorUiRteElementBase extends UmbFormControlMixin(UmbLi
         this.consumeContext(UMB_PROPERTY_CONTEXT, (context) => {
             this.#gotPropertyContext(context);
         });
-        this.consumeContext(UMB_PROPERTY_DATASET_CONTEXT, (context) => {
-            this.#managerContext.setVariantId(context?.getVariantId());
+        this.consumeContext(UMB_VARIANT_CONTEXT, async (context) => {
+            this.observe(context?.displayVariantId, (variantId) => {
+                this.#managerContext.setVariantId(variantId);
+            }, 'observeContextualVariantId');
         });
         this.observe(this.#entriesContext.layoutEntries, (layouts) => {
             // Update manager:

package/dist-cms/packages/static-file/components/input-static-file/input-static-file.context.d.ts

@@ -3,5 +3,7 @@ import type { UmbStaticFileItemModel } from '../../types.js';
 import { UmbPickerInputContext } from '../../../core/picker-input/index.js';
 import type { UmbControllerHost } from '../../../../libs/controller-api/index.js';
 export declare class UmbStaticFilePickerInputContext extends UmbPickerInputContext<UmbStaticFileItemModel, UmbStaticFileItemModel, UmbStaticFilePickerModalData, UmbStaticFilePickerModalValue> {
+    #private;
     constructor(host: UmbControllerHost);
+    protected _requestItemName(unique: string): Promise<string>;
 }

package/dist-cms/packages/static-file/components/input-static-file/input-static-file.context.js

@@ -1,8 +1,15 @@
 import { UMB_STATIC_FILE_PICKER_MODAL } from '../../modals/index.js';
 import { UMB_STATIC_FILE_ITEM_REPOSITORY_ALIAS } from '../../constants.js';
 import { UmbPickerInputContext } from '../../../core/picker-input/index.js';
+import { UmbServerFilePathUniqueSerializer } from '../../../core/server-file-system/index.js';
 export class UmbStaticFilePickerInputContext extends UmbPickerInputContext {
+    #serializer = new UmbServerFilePathUniqueSerializer();
     constructor(host) {
         super(host, UMB_STATIC_FILE_ITEM_REPOSITORY_ALIAS, UMB_STATIC_FILE_PICKER_MODAL);
     }
+    async _requestItemName(unique) {
+        // If item doesn't exist, use the file path as the name
+        const item = this.getSelectedItemByUnique(unique);
+        return item?.name ?? this.#serializer.toServerPath(unique) ?? unique;
+    }
 }

package/dist-cms/packages/static-file/components/input-static-file/input-static-file.element.d.ts

@@ -1,6 +1,7 @@
 import type { UmbStaticFileItemModel } from '../../repository/item/types.js';
 import { nothing } from '../../../../external/lit/index.js';
 import { UmbLitElement } from '../../../core/lit-element/index.js';
+import '../../../core/entity-item/index.js';
 declare const UmbInputStaticFileElement_base: import("../../../../libs/extension-api/index.js").HTMLElementConstructor<import("../../../core/validation/index.js").UmbFormControlMixinElement<string | undefined>> & typeof UmbLitElement;
 export declare class UmbInputStaticFileElement extends UmbInputStaticFileElement_base {
     #private;
@@ -40,10 +41,10 @@ export declare class UmbInputStaticFileElement extends UmbInputStaticFileElement
     get value(): string | undefined;
     pickableFilter?: (item: UmbStaticFileItemModel) => boolean;
     private _items?;
+    private _statuses?;
     constructor();
     protected getFormElement(): undefined;
     render(): typeof nothing | import("lit-html").TemplateResult<1>;
-    private _renderItem;
     static styles: import("lit").CSSResult[];
 }
 export default UmbInputStaticFileElement;

package/dist-cms/packages/static-file/components/input-static-file/input-static-file.element.js

@@ -7,9 +7,10 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { UmbStaticFilePickerInputContext } from './input-static-file.context.js';
 import { css, customElement, html, nothing, property, repeat, state } from '../../../../external/lit/index.js';
 import { splitStringToArray } from '../../../core/utils/index.js';
+import { UmbFormControlMixin } from '../../../core/validation/index.js';
 import { UmbLitElement } from '../../../core/lit-element/index.js';
 import { UmbServerFilePathUniqueSerializer } from '../../../core/server-file-system/index.js';
-import { UmbFormControlMixin } from '../../../core/validation/index.js';
+import '../../../core/entity-item/index.js';
 let UmbInputStaticFileElement = class UmbInputStaticFileElement extends UmbFormControlMixin(UmbLitElement) {
     #serializer;
     /**
@@ -71,16 +72,17 @@ let UmbInputStaticFileElement = class UmbInputStaticFileElement extends UmbFormC
         this.addValidator('rangeOverflow', () => this.maxMessage, () => !!this.max && this.#pickerContext.getSelection().length > this.max);
         this.observe(this.#pickerContext.selection, (selection) => (this.value = selection.join(',')));
         this.observe(this.#pickerContext.selectedItems, (selectedItems) => (this._items = selectedItems));
+        this.observe(this.#pickerContext.statuses, (statuses) => (this._statuses = statuses));
     }
     getFormElement() {
         return undefined;
     }
     render() {
-        if (!this._items)
+        if (!this._statuses)
             return nothing;
         return html `
 			<uui-ref-list>
-				${repeat(this._items, (item) => item.unique, (item) => this._renderItem(item))}
+				${repeat(this._statuses, (status) => status.unique, (status) => this.#renderItem(status))}
 			</uui-ref-list>
 			${this.#renderAddButton()}
 		`;
@@ -103,18 +105,24 @@ let UmbInputStaticFileElement = class UmbInputStaticFileElement extends UmbFormC
 				label=${this.localize.term('general_choose')}></uui-button>
 		`;
     }
-    _renderItem(item) {
-        if (!item.unique)
-            return;
+    #renderItem(status) {
+        const unique = status.unique;
+        const item = this._items?.find((x) => x.unique === unique);
+        const isError = status.state.type === 'error';
         return html `
-			<uui-ref-node name=${item.name} .detail=${this.#serializer.toServerPath(item.unique) || ''}>
-				<!-- TODO: implement is trashed, if we cant retrieve the item on the server (but only ask the server if we need to anyway...). <uui-tag size="s" slot="tag" color="danger">Trashed</uui-tag> -->
+			<umb-entity-item-ref
+				id=${unique}
+				.item=${item}
+				?error=${isError}
+				.errorMessage=${status.state.error}
+				.errorDetail=${isError ? this.#serializer.toServerPath(unique) : undefined}
+				?standalone=${this.max === 1}>
 				<uui-action-bar slot="actions">
 					<uui-button
 						label=${this.localize.term('general_remove')}
-						@click=${() => this.#pickerContext.requestRemoveItem(item.unique)}></uui-button>
+						@click=${() => this.#pickerContext.requestRemoveItem(unique)}></uui-button>
 				</uui-action-bar>
-			</uui-ref-node>
+			</umb-entity-item-ref>
 		`;
     }
     static { this.styles = [
@@ -146,6 +154,9 @@ __decorate([
 __decorate([
     state()
 ], UmbInputStaticFileElement.prototype, "_items", void 0);
+__decorate([
+    state()
+], UmbInputStaticFileElement.prototype, "_statuses", void 0);
 UmbInputStaticFileElement = __decorate([
     customElement('umb-input-static-file')
 ], UmbInputStaticFileElement);

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

@@ -2,7 +2,7 @@ export const manifest = {
     type: 'propertyEditorUi',
     alias: 'Umb.PropertyEditorUi.StaticFilePicker',
     name: 'Static File Picker Property Editor UI',
-    js: () => import('./property-editor-ui-static-file-picker.element.js'),
+    element: () => import('./property-editor-ui-static-file-picker.element.js'),
     meta: {
         label: 'Static File Picker',
         icon: 'icon-document',

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

@@ -12,6 +12,7 @@ export declare class UmbPropertyEditorUIStaticFilePickerElement extends UmbLitEl
     private _onChange;
     render(): import("lit-html").TemplateResult<1>;
 }
+export { UmbPropertyEditorUIStaticFilePickerElement as element };
 export default UmbPropertyEditorUIStaticFilePickerElement;
 declare global {
     interface HTMLElementTagNameMap {

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

@@ -85,4 +85,5 @@ UmbPropertyEditorUIStaticFilePickerElement = __decorate([
     customElement('umb-property-editor-ui-static-file-picker')
 ], UmbPropertyEditorUIStaticFilePickerElement);
 export { UmbPropertyEditorUIStaticFilePickerElement };
+export { UmbPropertyEditorUIStaticFilePickerElement as element };
 export default UmbPropertyEditorUIStaticFilePickerElement;