@umbraco-cms/backoffice 18.0.1 → 18.1.0-rc

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

@@ -7,12 +7,22 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { customElement, html, property, state } from '../../../../external/lit/index.js';
 import { UmbLitElement } from '../../../core/lit-element/index.js';
 import { UmbFormControlMixin } from '../../../core/validation/index.js';
+import { UmbPropertyEditorUiInteractionMemoryManager } from '../../../core/property-editor/index.js';
 import { UmbChangeEvent } from '../../../core/event/index.js';
 import { umbExtensionsRegistry } from '../../../core/extension-registry/index.js';
 import { UmbExtensionApiInitializer } from '../../../../libs/extension-api/index.js';
 let UmbEntityDataPickerPropertyEditorUIElement = class UmbEntityDataPickerPropertyEditorUIElement extends UmbFormControlMixin(UmbLitElement, undefined) {
+    get dataSourceAlias() {
+        return this._dataSourceAlias;
+    }
+    set dataSourceAlias(value) {
+        this._dataSourceAlias = value;
+        this.#createDataSourceApi(this._dataSourceAlias);
+        this.#extractDataSourceConfig();
+    }
+    #interactionMemoryManager;
     constructor() {
-        super(...arguments);
+        super();
         /**
          * Sets the input to readonly mode, meaning value cannot be changed but still able to read and select its content.
          * @type {boolean}
@@ -24,17 +34,17 @@ let UmbEntityDataPickerPropertyEditorUIElement = class UmbEntityDataPickerProper
         this._minMessage = '';
         this._max = Infinity;
         this._maxMessage = '';
-    }
-    get dataSourceAlias() {
-        return this._dataSourceAlias;
-    }
-    set dataSourceAlias(value) {
-        this._dataSourceAlias = value;
-        this.#createDataSourceApi(this._dataSourceAlias);
-        this.#extractDataSourceConfig();
+        this._interactionMemories = [];
+        this.#interactionMemoryManager = new UmbPropertyEditorUiInteractionMemoryManager(this, {
+            memoryUniquePrefix: 'UmbEntityDataPicker',
+        });
+        this.observe(this.#interactionMemoryManager.memoriesForPropertyEditor, (interactionMemories) => {
+            this._interactionMemories = interactionMemories ?? [];
+        });
     }
     set config(config) {
         this.#propertyEditorConfigCollection = config;
+        this.#interactionMemoryManager.setPropertyEditorConfig(config);
         const minMax = config?.getValueByAlias('validationLimit');
         this._min = minMax?.min ?? 0;
         this._max = minMax?.max ?? Infinity;
@@ -101,6 +111,16 @@ let UmbEntityDataPickerPropertyEditorUIElement = class UmbEntityDataPickerProper
             throw new Error('Selection is not of type array. Cannot set property value.');
         }
     }
+    async #onInputInteractionMemoriesChange(event) {
+        const target = event.target;
+        const interactionMemories = target.interactionMemories;
+        if (interactionMemories && interactionMemories.length > 0) {
+            await this.#interactionMemoryManager.saveMemoriesForPropertyEditor(interactionMemories);
+        }
+        else {
+            await this.#interactionMemoryManager.deleteMemoriesForPropertyEditor();
+        }
+    }
     render() {
         return html `<umb-input-entity-data
 			.selection=${this.value?.ids ?? []}
@@ -112,7 +132,9 @@ let UmbEntityDataPickerPropertyEditorUIElement = class UmbEntityDataPickerProper
 			.max=${this._max}
 			.max-message=${this._maxMessage}
 			?readonly=${this.readonly}
-			@change=${this.#onChange}></umb-input-entity-data>`;
+			@change=${this.#onChange}
+			.interactionMemories=${this._interactionMemories}
+			@interaction-memories-change=${this.#onInputInteractionMemoriesChange}></umb-input-entity-data>`;
     }
 };
 __decorate([
@@ -142,6 +164,9 @@ __decorate([
 __decorate([
     state()
 ], UmbEntityDataPickerPropertyEditorUIElement.prototype, "_pickerViews", void 0);
+__decorate([
+    state()
+], UmbEntityDataPickerPropertyEditorUIElement.prototype, "_interactionMemories", void 0);
 UmbEntityDataPickerPropertyEditorUIElement = __decorate([
     customElement('umb-entity-data-picker-property-editor-ui')
 ], UmbEntityDataPickerPropertyEditorUIElement);

package/dist-cms/packages/property-editors/entity-data-picker/property-editor/manifests.js

@@ -9,7 +9,7 @@ export const manifests = [
         meta: {
             label: 'Entity Data Picker',
             icon: 'icon-page-add',
-            group: 'pickers',
+            group: '#propertyEditorUIGroups_pickers',
             keywords: ['select', 'entity', 'data', 'source', 'pick'],
             propertyEditorSchemaAlias: 'Umbraco.EntityDataPicker',
             supportsReadOnly: true,

package/dist-cms/packages/property-editors/eye-dropper/manifests.js

@@ -1,4 +1,5 @@
 import { manifest as schemaManifest } from './Umbraco.ColorPicker.EyeDropper.js';
+import { manifests as valueSummaryManifests } from './value-summary/manifests.js';
 export const manifests = [
     {
         type: 'propertyEditorUi',
@@ -8,7 +9,7 @@ export const manifests = [
         meta: {
             label: 'Eye Dropper Color Picker',
             icon: 'icon-colorpicker',
-            group: 'pickers',
+            group: '#propertyEditorUIGroups_pickers',
             keywords: ['color', 'colour', 'hex', 'palette', 'hue', 'pick'],
             propertyEditorSchemaAlias: 'Umbraco.ColorPicker.EyeDropper',
             settings: {
@@ -30,4 +31,5 @@ export const manifests = [
         },
     },
     schemaManifest,
+    ...valueSummaryManifests,
 ];

package/dist-cms/packages/property-editors/eye-dropper/value-summary/manifests.d.ts

@@ -0,0 +1 @@
+export declare const manifests: Array<UmbExtensionManifest>;

package/dist-cms/packages/property-editors/eye-dropper/value-summary/manifests.js

@@ -0,0 +1,11 @@
+import { UMB_EYE_DROPPER_PROPERTY_EDITOR_VALUE_TYPE } from '../value-type/constants.js';
+export const manifests = [
+    {
+        type: 'valueSummary',
+        kind: 'default',
+        alias: 'Umb.ValueSummary.PropertyEditor.EyeDropper',
+        name: 'Eye Dropper Property Editor Value Summary',
+        forValueType: UMB_EYE_DROPPER_PROPERTY_EDITOR_VALUE_TYPE,
+        element: () => import('./value-summary.element.js'),
+    },
+];

package/dist-cms/packages/property-editors/eye-dropper/value-summary/value-summary.element.d.ts

@@ -0,0 +1,11 @@
+import { nothing } from '../../../../external/lit/index.js';
+import { UmbValueSummaryElementBase } from '../../../core/value-summary/index.js';
+export declare class UmbEyeDropperPropertyEditorValueSummaryElement extends UmbValueSummaryElementBase<string> {
+    render(): typeof nothing | import("lit-html").TemplateResult<1>;
+}
+export { UmbEyeDropperPropertyEditorValueSummaryElement as element };
+declare global {
+    interface HTMLElementTagNameMap {
+        'umb-eye-dropper-property-editor-value-summary': UmbEyeDropperPropertyEditorValueSummaryElement;
+    }
+}

package/dist-cms/packages/property-editors/eye-dropper/value-summary/value-summary.element.js

@@ -0,0 +1,23 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    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 { customElement, html, nothing } from '../../../../external/lit/index.js';
+import { UmbValueSummaryElementBase } from '../../../core/value-summary/index.js';
+let UmbEyeDropperPropertyEditorValueSummaryElement = class UmbEyeDropperPropertyEditorValueSummaryElement extends UmbValueSummaryElementBase {
+    render() {
+        if (!this._value)
+            return nothing;
+        return html `<uui-color-swatch
+			label=${this._value}
+			value=${this._value}
+			style="--uui-swatch-size: 1em;"></uui-color-swatch>`;
+    }
+};
+UmbEyeDropperPropertyEditorValueSummaryElement = __decorate([
+    customElement('umb-eye-dropper-property-editor-value-summary')
+], UmbEyeDropperPropertyEditorValueSummaryElement);
+export { UmbEyeDropperPropertyEditorValueSummaryElement };
+export { UmbEyeDropperPropertyEditorValueSummaryElement as element };

package/dist-cms/packages/property-editors/eye-dropper/value-type/constants.d.ts

@@ -0,0 +1,6 @@
+export declare const UMB_EYE_DROPPER_PROPERTY_EDITOR_VALUE_TYPE: "Umbraco.ColorPicker.EyeDropper";
+declare global {
+    interface UmbValueTypeMap {
+        [UMB_EYE_DROPPER_PROPERTY_EDITOR_VALUE_TYPE]: string;
+    }
+}

package/dist-cms/packages/property-editors/eye-dropper/value-type/constants.js

@@ -0,0 +1 @@
+export const UMB_EYE_DROPPER_PROPERTY_EDITOR_VALUE_TYPE = 'Umbraco.ColorPicker.EyeDropper';

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

@@ -7,7 +7,7 @@ export const manifests = [
         meta: {
             label: 'Icon Picker',
             icon: 'icon-autofill',
-            group: 'common',
+            group: '#propertyEditorUIGroups_common',
             keywords: ['icon', 'symbol', 'glyph'],
             settings: {
                 properties: [

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

@@ -16,6 +16,7 @@ export declare class UmbPropertyEditorUIIconPickerElement extends UmbPropertyEdi
     set config(config: UmbPropertyEditorConfigCollection | undefined);
     private _openModal;
     render(): import("lit-html").TemplateResult<1>;
+    static styles: import("lit").CSSResult;
 }
 export default UmbPropertyEditorUIIconPickerElement;
 declare global {

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

@@ -4,7 +4,7 @@ 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 { html, customElement, property, state, ifDefined } from '../../../external/lit/index.js';
+import { html, customElement, property, state, ifDefined, css } from '../../../external/lit/index.js';
 import { umbOpenModal } from '../../core/modal/index.js';
 import { UMB_ICON_PICKER_MODAL } from '../../core/icon-registry/index.js';
 import { UmbLitElement } from '../../core/lit-element/index.js';
@@ -88,6 +88,11 @@ let UmbPropertyEditorUIIconPickerElement = class UmbPropertyEditorUIIconPickerEl
 			</uui-button>
 		`;
     }
+    static { this.styles = css `
+		uui-button {
+			min-width: var(--uui-size-11);
+		}
+	`; }
 };
 __decorate([
     property({ type: Boolean })

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

@@ -8,7 +8,7 @@ export const manifests = [
         meta: {
             label: 'Label',
             icon: 'icon-readonly',
-            group: 'common',
+            group: '#propertyEditorUIGroups_common',
             keywords: ['readonly', 'display', 'static', 'computed', 'info', 'key', 'id'],
             propertyEditorSchemaAlias: 'Umbraco.Label',
             supportsReadOnly: true,

package/dist-cms/packages/property-editors/multiple-text-string/manifests.js

@@ -1,4 +1,5 @@
 import { manifests as schemaManifests } from './Umbraco.MultipleTextString.js';
+import { manifests as valueSummaryManifests } from './value-summary/manifests.js';
 export const manifests = [
     {
         type: 'propertyEditorUi',
@@ -9,10 +10,11 @@ export const manifests = [
             label: 'Multiple Text String',
             propertyEditorSchemaAlias: 'Umbraco.MultipleTextstring',
             icon: 'icon-ordered-list',
-            group: 'lists',
+            group: '#propertyEditorUIGroups_lists',
             keywords: ['string', 'list', 'items', 'values', 'features', 'tags', 'keywords', 'bullets', 'entries', 'array'],
             supportsReadOnly: true,
         },
     },
     ...schemaManifests,
+    ...valueSummaryManifests,
 ];

package/dist-cms/packages/property-editors/multiple-text-string/value-summary/manifests.d.ts

@@ -0,0 +1 @@
+export declare const manifests: Array<UmbExtensionManifest>;

package/dist-cms/packages/property-editors/multiple-text-string/value-summary/manifests.js

@@ -0,0 +1,11 @@
+import { UMB_MULTIPLE_TEXT_STRING_PROPERTY_EDITOR_VALUE_TYPE } from '../value-type/constants.js';
+export const manifests = [
+    {
+        type: 'valueSummary',
+        kind: 'default',
+        alias: 'Umb.ValueSummary.PropertyEditor.MultipleTextString',
+        name: 'Multiple Text String Property Editor Value Summary',
+        forValueType: UMB_MULTIPLE_TEXT_STRING_PROPERTY_EDITOR_VALUE_TYPE,
+        element: () => import('./value-summary.element.js'),
+    },
+];

package/dist-cms/packages/property-editors/multiple-text-string/value-summary/value-summary.element.d.ts

@@ -0,0 +1,11 @@
+import { nothing } from '../../../../external/lit/index.js';
+import { UmbValueSummaryElementBase } from '../../../core/value-summary/index.js';
+export declare class UmbMultipleTextStringPropertyEditorValueSummaryElement extends UmbValueSummaryElementBase<Array<string>> {
+    render(): typeof nothing | import("lit-html").TemplateResult<1>;
+}
+export { UmbMultipleTextStringPropertyEditorValueSummaryElement as element };
+declare global {
+    interface HTMLElementTagNameMap {
+        'umb-multiple-text-string-property-editor-value-summary': UmbMultipleTextStringPropertyEditorValueSummaryElement;
+    }
+}

package/dist-cms/packages/property-editors/multiple-text-string/value-summary/value-summary.element.js

@@ -0,0 +1,21 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    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 { customElement, html, nothing } from '../../../../external/lit/index.js';
+import { UmbValueSummaryElementBase } from '../../../core/value-summary/index.js';
+let UmbMultipleTextStringPropertyEditorValueSummaryElement = class UmbMultipleTextStringPropertyEditorValueSummaryElement extends UmbValueSummaryElementBase {
+    render() {
+        if (!this._value?.length)
+            return nothing;
+        const text = this._value.join(', ');
+        return html `<span title="${text}">${text}</span>`;
+    }
+};
+UmbMultipleTextStringPropertyEditorValueSummaryElement = __decorate([
+    customElement('umb-multiple-text-string-property-editor-value-summary')
+], UmbMultipleTextStringPropertyEditorValueSummaryElement);
+export { UmbMultipleTextStringPropertyEditorValueSummaryElement };
+export { UmbMultipleTextStringPropertyEditorValueSummaryElement as element };

package/dist-cms/packages/property-editors/multiple-text-string/value-type/constants.d.ts

@@ -0,0 +1,6 @@
+export declare const UMB_MULTIPLE_TEXT_STRING_PROPERTY_EDITOR_VALUE_TYPE: "Umbraco.MultipleTextstring";
+declare global {
+    interface UmbValueTypeMap {
+        [UMB_MULTIPLE_TEXT_STRING_PROPERTY_EDITOR_VALUE_TYPE]: Array<string>;
+    }
+}

package/dist-cms/packages/property-editors/multiple-text-string/value-type/constants.js

@@ -0,0 +1 @@
+export const UMB_MULTIPLE_TEXT_STRING_PROPERTY_EDITOR_VALUE_TYPE = 'Umbraco.MultipleTextstring';

package/dist-cms/packages/property-editors/number/decimal-property-value-preset.d.ts

@@ -2,7 +2,7 @@ import type { UmbDecimalPropertyEditorUiValue } from './types.js';
 import type { UmbPropertyValuePreset } from '../../core/property/index.js';
 import type { UmbPropertyEditorConfig } from '../../core/property-editor/index.js';
 export declare class UmbDecimalPropertyValuePreset implements UmbPropertyValuePreset<UmbDecimalPropertyEditorUiValue, UmbPropertyEditorConfig> {
-    processValue(value: undefined | UmbDecimalPropertyEditorUiValue, config: UmbPropertyEditorConfig): Promise<number>;
+    processValue(value: undefined | UmbDecimalPropertyEditorUiValue, config: UmbPropertyEditorConfig): Promise<number | undefined>;
     destroy(): void;
 }
 export { UmbDecimalPropertyValuePreset as api };

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

@@ -1,8 +1,10 @@
+import { umbResolveNumberPresetValue } from './resolve-number-preset-value.function.js';
 export class UmbDecimalPropertyValuePreset {
     async processValue(value, config) {
-        const min = Number(config.find((x) => x.alias === 'min')?.value ?? 0);
-        const minVerified = isNaN(min) ? 0 : min;
-        return value !== undefined ? value : minVerified;
+        if (value !== undefined && value !== null) {
+            return value;
+        }
+        return umbResolveNumberPresetValue(config);
     }
     destroy() { }
 }

package/dist-cms/packages/property-editors/number/integer-property-value-preset.d.ts

@@ -2,7 +2,7 @@ import type { UmbIntegerPropertyEditorUiValue } from './types.js';
 import type { UmbPropertyValuePreset } from '../../core/property/index.js';
 import type { UmbPropertyEditorConfig } from '../../core/property-editor/index.js';
 export declare class UmbIntegerPropertyValuePreset implements UmbPropertyValuePreset<UmbIntegerPropertyEditorUiValue, UmbPropertyEditorConfig> {
-    processValue(value: undefined | UmbIntegerPropertyEditorUiValue, config: UmbPropertyEditorConfig): Promise<number>;
+    processValue(value: undefined | UmbIntegerPropertyEditorUiValue, config: UmbPropertyEditorConfig): Promise<number | undefined>;
     destroy(): void;
 }
 export { UmbIntegerPropertyValuePreset as api };

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

@@ -1,8 +1,14 @@
+import { umbResolveNumberPresetValue } from './resolve-number-preset-value.function.js';
 export class UmbIntegerPropertyValuePreset {
     async processValue(value, config) {
-        const min = Number(config.find((x) => x.alias === 'min')?.value ?? 0);
-        const minVerified = isNaN(min) ? 0 : Math.round(min);
-        return value !== undefined ? value : minVerified;
+        if (value !== undefined && value !== null) {
+            return value;
+        }
+        const fallbackValue = umbResolveNumberPresetValue(config);
+        if (fallbackValue !== undefined) {
+            return Math.round(fallbackValue);
+        }
+        return undefined;
     }
     destroy() { }
 }

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

@@ -17,7 +17,7 @@ export const manifests = [
             label: 'Decimal',
             propertyEditorSchemaAlias: 'Umbraco.Decimal',
             icon: 'icon-autofill',
-            group: 'common',
+            group: '#propertyEditorUIGroups_common',
             keywords: [
                 'number',
                 'decimal',
@@ -66,7 +66,7 @@ export const manifests = [
         meta: {
             label: 'Numeric',
             icon: 'icon-autofill',
-            group: 'common',
+            group: '#propertyEditorUIGroups_common',
             keywords: [
                 'number',
                 'integer',

package/dist-cms/packages/property-editors/number/resolve-number-preset-value.function.d.ts

@@ -0,0 +1,7 @@
+import type { UmbPropertyEditorConfig } from '../../core/property-editor/index.js';
+/**
+ * Resolves the value a numeric property should be preset with, based on its `min`/`max` configuration.
+ * @param {UmbPropertyEditorConfig} config - The property editor configuration.
+ * @returns {number | undefined} The value to preset, or `undefined` to leave the field empty.
+ */
+export declare function umbResolveNumberPresetValue(config: UmbPropertyEditorConfig): number | undefined;

package/dist-cms/packages/property-editors/number/resolve-number-preset-value.function.js

@@ -0,0 +1,24 @@
+function parseNumberConfig(config, alias) {
+    const value = config.find((x) => x.alias === alias)?.value;
+    if (value === undefined || value === null || value === '') {
+        return undefined;
+    }
+    const num = Number(value);
+    return Number.isFinite(num) ? num : undefined;
+}
+/**
+ * Resolves the value a numeric property should be preset with, based on its `min`/`max` configuration.
+ * @param {UmbPropertyEditorConfig} config - The property editor configuration.
+ * @returns {number | undefined} The value to preset, or `undefined` to leave the field empty.
+ */
+export function umbResolveNumberPresetValue(config) {
+    const min = parseNumberConfig(config, 'min');
+    if (min !== undefined && min > 0) {
+        return min;
+    }
+    const max = parseNumberConfig(config, 'max');
+    if (max !== undefined && max < 0) {
+        return max;
+    }
+    return undefined;
+}

package/dist-cms/packages/property-editors/number/types.d.ts

@@ -1,2 +1,2 @@
-export type UmbIntegerPropertyEditorUiValue = number;
-export type UmbDecimalPropertyEditorUiValue = number;
+export type UmbIntegerPropertyEditorUiValue = number | undefined;
+export type UmbDecimalPropertyEditorUiValue = number | undefined;

package/dist-cms/packages/property-editors/number-range/manifests.js

@@ -6,6 +6,6 @@ export const manifest = {
     meta: {
         label: 'Number Range',
         icon: 'icon-autofill',
-        group: 'common',
+        group: '#propertyEditorUIGroups_common',
     },
 };

package/dist-cms/packages/property-editors/order-direction/manifests.js

@@ -6,6 +6,6 @@ export const manifest = {
     meta: {
         label: 'Order Direction',
         icon: 'icon-autofill',
-        group: 'common',
+        group: '#propertyEditorUIGroups_common',
     },
 };

package/dist-cms/packages/property-editors/radio-button-list/manifests.js

@@ -9,7 +9,7 @@ export const manifests = [
             label: 'Radio Button List',
             propertyEditorSchemaAlias: 'Umbraco.RadioButtonList',
             icon: 'icon-target',
-            group: 'lists',
+            group: '#propertyEditorUIGroups_lists',
             keywords: ['select', 'choice', 'option', 'type', 'category', 'single', 'variant', 'size', 'gender'],
             supportsReadOnly: true,
         },

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

@@ -6,7 +6,7 @@ export const manifest = {
     meta: {
         label: 'Select',
         icon: 'icon-list',
-        group: 'pickers',
+        group: '#propertyEditorUIGroups_pickers',
         keywords: ['dropdown', 'select', 'choice', 'option', 'picker', 'combobox', 'type', 'list'],
         settings: {
             properties: [

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

@@ -17,7 +17,7 @@ export const manifests = [
             label: 'Slider',
             propertyEditorSchemaAlias: 'Umbraco.Slider',
             icon: 'icon-navigation-horizontal',
-            group: 'common',
+            group: '#propertyEditorUIGroups_common',
             keywords: [
                 'number',
                 'range',

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

@@ -8,7 +8,7 @@ export const manifest = {
             properties: [
                 {
                     alias: 'maxChars',
-                    label: 'Maximum allowed characters',
+                    label: '#textbox_maxCharsLabel',
                     propertyEditorUiAlias: 'Umb.PropertyEditorUi.Integer',
                     config: [
                         { alias: 'min', value: 1 },
@@ -22,6 +22,10 @@ export const manifest = {
                     alias: 'maxChars',
                     value: 512,
                 },
+                {
+                    alias: 'autocomplete',
+                    value: 'off',
+                },
             ],
         },
     },

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

@@ -17,7 +17,7 @@ export const manifests = [
             label: 'Text Box',
             propertyEditorSchemaAlias: 'Umbraco.TextBox',
             icon: 'icon-autofill',
-            group: 'common',
+            group: '#propertyEditorUIGroups_common',
             keywords: [
                 'string',
                 'headline',
@@ -40,7 +40,29 @@ export const manifests = [
             ],
             supportsReadOnly: true,
             settings: {
-                properties: [inputTypeConfig],
+                properties: [
+                    inputTypeConfig,
+                    {
+                        alias: 'autocomplete',
+                        label: '#textbox_autocompleteLabel',
+                        propertyEditorUiAlias: 'Umb.PropertyEditorUi.Dropdown',
+                        config: [
+                            {
+                                alias: 'items',
+                                value: [
+                                    { name: 'On', value: 'on' },
+                                    { name: 'Off', value: 'off' },
+                                ],
+                            },
+                        ],
+                    },
+                    {
+                        alias: 'placeholder',
+                        label: '#general_placeholder',
+                        description: 'Placeholder text shown inside the input when empty',
+                        propertyEditorUiAlias: 'Umb.PropertyEditorUi.TextBox',
+                    },
+                ],
                 defaultData: [
                     {
                         alias: 'inputType',
@@ -59,7 +81,7 @@ export const manifests = [
             label: 'Email',
             propertyEditorSchemaAlias: 'Umbraco.EmailAddress',
             icon: 'icon-message',
-            group: 'common',
+            group: '#propertyEditorUIGroups_common',
             keywords: ['email', 'contact', 'address', 'newsletter', 'recipient'],
             supportsReadOnly: true,
             settings: {

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

@@ -16,6 +16,11 @@ export declare class UmbPropertyEditorUITextBoxElement extends UmbPropertyEditor
      */
     mandatory?: boolean;
     mandatoryMessage: string;
+    /**
+     * The alias of this field.
+     * @type {string}
+     */
+    alias?: string;
     /**
      * The name of this field.
      * @type {string}
@@ -25,6 +30,7 @@ export declare class UmbPropertyEditorUITextBoxElement extends UmbPropertyEditor
     private _inputMode;
     private _maxChars?;
     private _placeholder?;
+    private _autocomplete?;
     set config(config: UmbPropertyEditorConfigCollection | undefined);
     protected firstUpdated(): void;
     focus(): Promise<void> | undefined;

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

@@ -4,7 +4,7 @@ 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 { css, customElement, html, nothing, property, state } from '../../../external/lit/index.js';
+import { css, customElement, html, ifDefined, nothing, 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';
@@ -33,7 +33,9 @@ let UmbPropertyEditorUITextBoxElement = class UmbPropertyEditorUITextBoxElement
         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') ?? '');
+        this._placeholder = this.localize.string(config.getValueByAlias('placeholder'));
+        const autocomplete = config.getValueByAlias('autocomplete');
+        this._autocomplete = Array.isArray(autocomplete) ? autocomplete[0] : autocomplete;
     }
     firstUpdated() {
         this.addFormControlElement(this.shadowRoot.querySelector('uui-input'));
@@ -75,14 +77,16 @@ let UmbPropertyEditorUITextBoxElement = class UmbPropertyEditorUITextBoxElement
     render() {
         return html `
 			<uui-input
+				.name=${this.alias ?? ''}
 				.inputMode=${this._inputMode}
 				.label=${this.localize.term('general_fieldFor', [this.name])}
 				.maxlength=${this._maxChars}
 				.maxlengthMessage=${this.#getMaxLengthMessage.bind(this)}
-				.placeholder=${this._placeholder ?? ''}
+				placeholder=${ifDefined(this._placeholder)}
 				.requiredMessage=${this.mandatoryMessage}
 				.type=${this._type}
 				.value=${this.value ?? ''}
+				.autocomplete=${this._autocomplete ?? 'on'}
 				?readonly=${this.readonly}
 				?required=${this.mandatory}
 				@input=${this.#onInput}>
@@ -115,6 +119,9 @@ __decorate([
 __decorate([
     property({ type: String })
 ], UmbPropertyEditorUITextBoxElement.prototype, "mandatoryMessage", void 0);
+__decorate([
+    property({ type: String })
+], UmbPropertyEditorUITextBoxElement.prototype, "alias", void 0);
 __decorate([
     property({ type: String })
 ], UmbPropertyEditorUITextBoxElement.prototype, "name", void 0);
@@ -130,6 +137,9 @@ __decorate([
 __decorate([
     state()
 ], UmbPropertyEditorUITextBoxElement.prototype, "_placeholder", void 0);
+__decorate([
+    state()
+], UmbPropertyEditorUITextBoxElement.prototype, "_autocomplete", void 0);
 UmbPropertyEditorUITextBoxElement = __decorate([
     customElement('umb-property-editor-ui-text-box')
 ], UmbPropertyEditorUITextBoxElement);