@umbraco-cms/backoffice 16.1.0 → 16.2.0-rc

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

@@ -4,11 +4,12 @@ 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 { ensureArray, updateItemsSelectedState } from '../utils/property-editor-ui-state-manager.js';
+import './components/input-checkbox-list/input-checkbox-list.element.js';
 import { customElement, html, property, state } from '@umbraco-cms/backoffice/external/lit';
 import { UmbChangeEvent } from '@umbraco-cms/backoffice/event';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 import { UMB_VALIDATION_EMPTY_LOCALIZATION_KEY, UmbFormControlMixin } from '@umbraco-cms/backoffice/validation';
-import './components/input-checkbox-list/input-checkbox-list.element.js';
 /**
  * @element umb-property-editor-ui-checkbox-list
  */
@@ -28,7 +29,9 @@ let UmbPropertyEditorUICheckboxListElement = class UmbPropertyEditorUICheckboxLi
     }
     #selection;
     set value(value) {
-        this.#selection = Array.isArray(value) ? value : value ? [value] : [];
+        this.#selection = ensureArray(value);
+        // Update the checked state of existing list items when value changes
+        this.#updateCheckedState();
     }
     get value() {
         return this.#selection;
@@ -61,6 +64,20 @@ let UmbPropertyEditorUICheckboxListElement = class UmbPropertyEditorUICheckboxLi
         this.value = event.target.selection;
         this.dispatchEvent(new UmbChangeEvent());
     }
+    /**
+     * Updates the checked state of all list items based on current selection.
+     * This fixes the issue where UI doesn't update when values are set programmatically.
+     */
+    #updateCheckedState() {
+        // Only update if we have list items loaded
+        if (this._list.length > 0) {
+            // Update state only if changes are needed
+            const updatedList = updateItemsSelectedState(this._list, this.#selection, 'checked');
+            if (updatedList !== this._list) {
+                this._list = updatedList;
+            }
+        }
+    }
     render() {
         return html `
 			<umb-input-checkbox-list

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

@@ -54,6 +54,7 @@ let UmbInputContentElement = class UmbInputContentElement extends UmbFormControl
     }
     set value(selectionString) {
         this.#selection = splitStringToArray(selectionString);
+        super.value = selectionString; // Call the parent setter to ensure the value change is triggered in the FormControlMixin. [NL]
     }
     get value() {
         return this.#selection.length > 0 ? this.#selection.join(',') : undefined;

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

@@ -9,7 +9,7 @@ export declare class UmbInputContentPickerSourceElement extends UmbInputContentP
     get type(): UmbContentPickerSourceType;
     nodeId?: string;
     dynamicRoot?: UmbContentPickerDynamicRoot;
-    _options: Array<Option>;
+    private _options;
     connectedCallback(): void;
     render(): import("lit-html").TemplateResult<1>;
     static readonly styles: import("lit").CSSResult[];

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

@@ -7,7 +7,7 @@ export declare class UmbPropertyEditorUIContentPickerSourceTypeElement extends U
     #private;
     set value(value: string);
     get value(): string;
-    private sourceType;
+    private _sourceType;
     constructor();
     private _observeProperty;
     render(): import("lit-html").TemplateResult<1>;

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

@@ -27,7 +27,7 @@ let UmbPropertyEditorUIContentPickerSourceTypeElement = class UmbPropertyEditorU
     #initialized;
     constructor() {
         super();
-        this.sourceType = 'content';
+        this._sourceType = 'content';
         this.#initialized = false;
         this.#selection = [];
         this.consumeContext(UMB_PROPERTY_DATASET_CONTEXT, (datasetContext) => {
@@ -45,10 +45,10 @@ let UmbPropertyEditorUIContentPickerSourceTypeElement = class UmbPropertyEditorU
             if (startNode?.type) {
                 // If we had a sourceType before, we can see this as a change and not the initial value,
                 // so let's reset the value, so we don't carry over content-types to the new source type.
-                if (this.#initialized && this.sourceType !== startNode.type) {
+                if (this.#initialized && this._sourceType !== startNode.type) {
                     this.#setValue([]);
                 }
-                this.sourceType = startNode.type;
+                this._sourceType = startNode.type;
                 if (!this.#initialized) {
                     this.#initialized = true;
                 }
@@ -56,7 +56,7 @@ let UmbPropertyEditorUIContentPickerSourceTypeElement = class UmbPropertyEditorU
         }, 'observeValue');
     }
     #onChange(event) {
-        switch (this.sourceType) {
+        switch (this._sourceType) {
             case 'content':
                 this.#setValue(event.target.selection);
                 break;
@@ -79,7 +79,7 @@ let UmbPropertyEditorUIContentPickerSourceTypeElement = class UmbPropertyEditorU
         return this.#renderType();
     }
     #renderType() {
-        switch (this.sourceType) {
+        switch (this._sourceType) {
             case 'content':
                 return this.#renderTypeContent();
             case 'media':
@@ -109,7 +109,7 @@ __decorate([
 ], UmbPropertyEditorUIContentPickerSourceTypeElement.prototype, "value", null);
 __decorate([
     state()
-], UmbPropertyEditorUIContentPickerSourceTypeElement.prototype, "sourceType", void 0);
+], UmbPropertyEditorUIContentPickerSourceTypeElement.prototype, "_sourceType", void 0);
 UmbPropertyEditorUIContentPickerSourceTypeElement = __decorate([
     customElement('umb-property-editor-ui-content-picker-source-type')
 ], UmbPropertyEditorUIContentPickerSourceTypeElement);

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

@@ -1,16 +1,12 @@
-import type { UmbInputContentElement } from './components/input-content/index.js';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 import type { UmbPropertyEditorConfigCollection, UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/property-editor';
 import './components/input-content/index.js';
-type UmbContentPickerValueType = UmbInputContentElement['selection'];
 declare const UmbPropertyEditorUIContentPickerElement_base: import("@umbraco-cms/backoffice/extension-api").HTMLElementConstructor<import("@umbraco-cms/backoffice/validation").UmbFormControlMixinElement<import("@umbraco-cms/backoffice/models").UmbReferenceByUniqueAndType[] | undefined>> & typeof UmbLitElement;
 /**
  * @element umb-property-editor-ui-content-picker
  */
 export declare class UmbPropertyEditorUIContentPickerElement extends UmbPropertyEditorUIContentPickerElement_base implements UmbPropertyEditorUiElement {
     #private;
-    set value(value: UmbContentPickerValueType | undefined);
-    get value(): UmbContentPickerValueType | undefined;
     /**
      * Sets the input to readonly mode, meaning value cannot be changed but still able to read and select its content.
      * @type {boolean}
@@ -28,7 +24,7 @@ export declare class UmbPropertyEditorUIContentPickerElement extends UmbProperty
     private _rootEntityType?;
     private _invalidData?;
     set config(config: UmbPropertyEditorConfigCollection | undefined);
-    firstUpdated(): void;
+    firstUpdated(changedProperties: Map<string | number | symbol, unknown>): void;
     focus(): void | undefined;
     render(): import("lit-html").TemplateResult<1>;
     static readonly styles: import("lit").CSSResult[];

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

@@ -22,7 +22,6 @@ import './components/input-content/index.js';
 let UmbPropertyEditorUIContentPickerElement = class UmbPropertyEditorUIContentPickerElement extends UmbFormControlMixin(UmbLitElement, undefined) {
     constructor() {
         super(...arguments);
-        this.#value = [];
         /**
          * Sets the input to readonly mode, meaning value cannot be changed but still able to read and select its content.
          * @type {boolean}
@@ -42,13 +41,6 @@ let UmbPropertyEditorUIContentPickerElement = class UmbPropertyEditorUIContentPi
             member: UMB_MEMBER_ENTITY_TYPE,
         };
     }
-    set value(value) {
-        this.#value = value;
-    }
-    get value() {
-        return this.#value;
-    }
-    #value;
     #dynamicRoot;
     #dynamicRootRepository;
     #entityTypeDictionary;
@@ -62,7 +54,7 @@ let UmbPropertyEditorUIContentPickerElement = class UmbPropertyEditorUIContentPi
             this._rootEntityType = this.#entityTypeDictionary[startNode.type];
             this.#dynamicRoot = startNode.dynamicRoot;
             // NOTE: Filter out any items that do not match the entity type. [LK]
-            this._invalidData = this.#value?.filter((x) => x.type !== this._rootEntityType);
+            this._invalidData = this.value?.filter((x) => x.type !== this._rootEntityType);
             if (this._invalidData?.length) {
                 this.readonly = true;
             }
@@ -81,7 +73,8 @@ let UmbPropertyEditorUIContentPickerElement = class UmbPropertyEditorUIContentPi
         const num = Number(value);
         return !isNaN(num) && num > 0 ? num : fallback;
     }
-    firstUpdated() {
+    firstUpdated(changedProperties) {
+        super.firstUpdated(changedProperties);
         this.addFormControlElement(this.shadowRoot.querySelector('umb-input-content'));
         this.#setPickerRootUnique();
         if (this._min && this._max && this._min > this._max) {
@@ -184,9 +177,6 @@ let UmbPropertyEditorUIContentPickerElement = class UmbPropertyEditorUIContentPi
 		`,
     ]; }
 };
-__decorate([
-    property({ type: Array })
-], UmbPropertyEditorUIContentPickerElement.prototype, "value", null);
 __decorate([
     property({ type: Boolean, reflect: true })
 ], UmbPropertyEditorUIContentPickerElement.prototype, "readonly", void 0);

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

@@ -4,6 +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 { ensureArray, updateItemsSelectedState } from '../utils/property-editor-ui-state-manager.js';
 import { css, customElement, html, map, nothing, property, state, when } from '@umbraco-cms/backoffice/external/lit';
 import { UmbChangeEvent } from '@umbraco-cms/backoffice/event';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
@@ -29,7 +30,9 @@ let UmbPropertyEditorUIDropdownElement = class UmbPropertyEditorUIDropdownElemen
     }
     #selection;
     set value(value) {
-        this.#selection = this.#ensureValueIsArray(value);
+        this.#selection = ensureArray(value);
+        // Update the selected state of existing options when value changes
+        this.#updateSelectedState();
     }
     get value() {
         return this.#selection;
@@ -69,9 +72,6 @@ let UmbPropertyEditorUIDropdownElement = class UmbPropertyEditorUIDropdownElemen
             this.addFormControlElement(this.shadowRoot.querySelector('umb-input-dropdown-list'));
         }
     }
-    #ensureValueIsArray(value) {
-        return Array.isArray(value) ? value : value ? [value] : [];
-    }
     #onChange(event) {
         const value = event.target.value;
         this.#setValue(value ? [value] : []);
@@ -84,11 +84,25 @@ let UmbPropertyEditorUIDropdownElement = class UmbPropertyEditorUIDropdownElemen
     #setValue(value) {
         if (!value)
             return;
-        const selection = this.#ensureValueIsArray(value);
+        const selection = ensureArray(value);
         this._options.forEach((item) => (item.selected = selection.includes(item.value)));
         this.value = value;
         this.dispatchEvent(new UmbChangeEvent());
     }
+    /**
+     * Updates the selected state of all options based on current selection.
+     * This fixes the issue where UI doesn't update when values are set programmatically.
+     */
+    #updateSelectedState() {
+        // Only update if we have options loaded
+        if (this._options.length > 0) {
+            // Update state only if changes are needed
+            const updatedOptions = updateItemsSelectedState(this._options, this.#selection, 'selected');
+            if (updatedOptions !== this._options) {
+                this._options = updatedOptions;
+            }
+        }
+    }
     render() {
         return html `
 			${when(this._multiple, () => this.#renderDropdownMultiple(), () => this.#renderDropdownSingle())}

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

@@ -7,9 +7,9 @@ declare const UmbPropertyEditorUINumberRangeElement_base: import("@umbraco-cms/b
  */
 export declare class UmbPropertyEditorUINumberRangeElement extends UmbPropertyEditorUINumberRangeElement_base implements UmbPropertyEditorUiElement {
     #private;
-    _minValue?: number;
-    _maxValue?: number;
-    _validationRange?: UmbNumberRangeValueType;
+    private _minValue?;
+    private _maxValue?;
+    private _validationRange?;
     set value(value: UmbNumberRangeValueType | undefined);
     get value(): UmbNumberRangeValueType | undefined;
     set config(config: UmbPropertyEditorConfigCollection);

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

@@ -5,7 +5,9 @@ import type { UmbPropertyEditorConfigCollection, UmbPropertyEditorUiElement } fr
  */
 export declare class UmbPropertyEditorUISelectElement extends UmbLitElement implements UmbPropertyEditorUiElement {
     #private;
-    value?: string;
+    private _value;
+    set value(newValue: string | undefined);
+    get value(): string;
     set config(config: UmbPropertyEditorConfigCollection | undefined);
     private _options;
     render(): import("lit-html").TemplateResult<1>;

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

@@ -4,6 +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 { updateItemsSelectedState } from '../utils/property-editor-ui-state-manager.js';
 import { customElement, html, property, state } from '@umbraco-cms/backoffice/external/lit';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 import { UmbChangeEvent } from '@umbraco-cms/backoffice/event';
@@ -13,9 +14,17 @@ import { UmbChangeEvent } from '@umbraco-cms/backoffice/event';
 let UmbPropertyEditorUISelectElement = class UmbPropertyEditorUISelectElement extends UmbLitElement {
     constructor() {
         super(...arguments);
-        this.value = '';
+        this._value = '';
         this._options = [];
     }
+    // Update the selected state of existing options when value changes
+    set value(newValue) {
+        this._value = newValue || '';
+        this.#updateSelectedState();
+    }
+    get value() {
+        return this._value;
+    }
     set config(config) {
         if (!config)
             return;
@@ -23,21 +32,35 @@ let UmbPropertyEditorUISelectElement = class UmbPropertyEditorUISelectElement ex
         if (Array.isArray(items) && items.length > 0) {
             this._options =
                 typeof items[0] === 'string'
-                    ? items.map((item) => ({ name: item, value: item, selected: item === this.value }))
-                    : items.map((item) => ({ name: item.name, value: item.value, selected: item.value === this.value }));
+                    ? items.map((item) => ({ name: item, value: item, selected: item === this._value }))
+                    : items.map((item) => ({ name: item.name, value: item.value, selected: item.value === this._value }));
         }
     }
     #onChange(event) {
         this.value = event.target.value;
         this.dispatchEvent(new UmbChangeEvent());
     }
+    /**
+     * Updates the selected state of all options based on current value.
+     * This fixes the issue where UI doesn't update when values are set programmatically.
+     */
+    #updateSelectedState() {
+        // Only update if we have options loaded
+        if (this._options.length > 0) {
+            // Update state only if changes are needed
+            const updatedOptions = updateItemsSelectedState(this._options, [this._value], 'selected');
+            if (updatedOptions !== this._options) {
+                this._options = updatedOptions;
+            }
+        }
+    }
     render() {
         return html `<uui-select .options=${this._options} @change=${this.#onChange}></uui-select>`;
     }
 };
 __decorate([
     property()
-], UmbPropertyEditorUISelectElement.prototype, "value", void 0);
+], UmbPropertyEditorUISelectElement.prototype, "value", null);
 __decorate([
     state()
 ], UmbPropertyEditorUISelectElement.prototype, "_options", void 0);

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

@@ -16,10 +16,10 @@ export declare class UmbPropertyEditorUIToggleElement extends UmbPropertyEditorU
      */
     mandatory?: boolean;
     mandatoryMessage: string;
-    _ariaLabel?: string;
-    _labelOff?: string;
-    _labelOn?: string;
-    _showLabels: boolean;
+    private _ariaLabel?;
+    private _labelOff?;
+    private _labelOn?;
+    private _showLabels;
     set config(config: UmbPropertyEditorConfigCollection | undefined);
     protected firstUpdated(): void;
     render(): import("lit-html").TemplateResult<1>;

package/dist-cms/packages/property-editors/utils/property-editor-test-utils.d.ts

@@ -0,0 +1,109 @@
+import { expect } from '@open-wc/testing';
+/**
+ * Shared test utilities for property editor components
+ */
+/**
+ * Type definitions for better domain modeling
+ */
+export type UmbPropertyEditorElement = {
+    config?: unknown;
+};
+export type UmbShadowDOMElement = {
+    shadowRoot?: ShadowRoot | null;
+};
+export type UmbSingleSelectElement = {
+    value: string;
+} & UmbShadowDOMElement;
+export type UmbMultiSelectElement = {
+    value: string[];
+} & UmbShadowDOMElement;
+export interface UmbConfigItem {
+    name: string;
+    value: string;
+}
+export interface UmbTestDataEntry<T> {
+    value: T;
+    expected: T;
+}
+export type UmbConfigAlias = 'items' | 'multiple';
+export type UmbCSSSelector = 'uui-select' | 'umb-input-checkbox-list' | 'umb-input-dropdown-list';
+/**
+ * Helper function to setup basic string array configuration
+ * @param {UmbPropertyEditorElement} element - The property editor element to configure
+ * @param {string[]} items - Array of string items for configuration
+ */
+export declare function setupBasicStringConfig(element: UmbPropertyEditorElement, items?: string[]): void;
+/**
+ * Helper function to setup object array configuration
+ * @param {UmbPropertyEditorElement} element - The property editor element to configure
+ * @param {UmbConfigItem[]} items - Array of object items for configuration
+ */
+export declare function setupObjectConfig(element: UmbPropertyEditorElement, items?: UmbConfigItem[]): void;
+/**
+ * Helper function to setup empty configuration
+ * @param {UmbPropertyEditorElement} element - The property editor element to configure
+ */
+export declare function setupEmptyConfig(element: UmbPropertyEditorElement): void;
+/**
+ * Helper function to get select element from shadow DOM
+ * @param {UmbShadowDOMElement} element - The property editor element
+ * @returns {Element | null} The UUI select element or null
+ */
+export declare function getSelectElement(element: UmbShadowDOMElement): import("@umbraco-ui/uui-select").UUISelectElement | import("@umbraco-cms/backoffice/components").UmbInputDropdownListElement | import("../checkbox-list/components").UmbInputCheckboxListElement | null | undefined;
+/**
+ * Helper function to get checkbox list element from shadow DOM
+ * @param {UmbShadowDOMElement} element - The property editor element
+ * @returns {Element | null} The checkbox list element or null
+ */
+export declare function getCheckboxListElement(element: UmbShadowDOMElement): import("@umbraco-ui/uui-select").UUISelectElement | import("@umbraco-cms/backoffice/components").UmbInputDropdownListElement | import("../checkbox-list/components").UmbInputCheckboxListElement | null | undefined;
+/**
+ * Helper function to get dropdown element from shadow DOM
+ * @param {UmbShadowDOMElement} element - The property editor element
+ * @returns {Element | null} The dropdown element or null
+ */
+export declare function getDropdownElement(element: UmbShadowDOMElement): import("@umbraco-ui/uui-select").UUISelectElement | import("@umbraco-cms/backoffice/components").UmbInputDropdownListElement | import("../checkbox-list/components").UmbInputCheckboxListElement | null | undefined;
+/**
+ * Helper function to get selected value from select DOM
+ * @param {UmbShadowDOMElement} element - The property editor element
+ * @returns {string} The selected value string
+ */
+export declare function getSelectedValue(element: UmbShadowDOMElement): string;
+/**
+ * Helper function to get selection from checkbox list DOM
+ * @param {UmbShadowDOMElement} element - The property editor element
+ * @returns {string[]} Array of selected values
+ */
+export declare function getCheckboxSelection(element: UmbShadowDOMElement): string[];
+/**
+ * Helper function to get selection from dropdown DOM
+ * @param {UmbShadowDOMElement} element - The property editor element
+ * @returns {string[]} Array of selected values
+ */
+export declare function getDropdownSelection(element: UmbShadowDOMElement): string[];
+/**
+ * Helper function to verify both value and DOM state for single select
+ * @param {UmbSingleSelectElement} element - The property editor element
+ * @param {string} expectedValue - Expected element value
+ * @param {string} expectedSelected - Expected selected value in DOM
+ */
+export declare function verifySelectValueAndDOM(element: UmbSingleSelectElement, expectedValue: string, expectedSelected: string): void;
+/**
+ * Helper function to verify both value and DOM state for multi-select
+ * @param {UmbMultiSelectElement} element - The property editor element
+ * @param {string[]} expectedValue - Expected element value array
+ * @param {string[]} expectedSelection - Expected selection array in DOM
+ */
+export declare function verifyMultiSelectValueAndDOM(element: UmbMultiSelectElement, expectedValue: string[], expectedSelection: string[]): void;
+/**
+ * Helper function to verify both value and DOM state for dropdown
+ * @param {UmbMultiSelectElement} element - The property editor element
+ * @param {string[]} expectedValue - Expected element value array
+ * @param {string[]} expectedSelection - Expected selection array in DOM
+ */
+export declare function verifyDropdownValueAndDOM(element: UmbMultiSelectElement, expectedValue: string[], expectedSelection: string[]): void;
+/**
+ * Common test data for multiple updates
+ */
+export declare const SINGLE_SELECT_TEST_DATA: UmbTestDataEntry<string>[];
+export declare const MULTI_SELECT_TEST_DATA: UmbTestDataEntry<string[]>[];
+export { expect };

package/dist-cms/packages/property-editors/utils/property-editor-test-utils.js

@@ -0,0 +1,147 @@
+import { expect } from '@open-wc/testing';
+/**
+ * Helper function to setup basic string array configuration
+ * @param {UmbPropertyEditorElement} element - The property editor element to configure
+ * @param {string[]} items - Array of string items for configuration
+ */
+export function setupBasicStringConfig(element, items = ['Red', 'Green', 'Blue']) {
+    element.config = {
+        getValueByAlias: (alias) => {
+            if (alias === 'items') {
+                return items;
+            }
+            return undefined;
+        },
+    };
+}
+/**
+ * Helper function to setup object array configuration
+ * @param {UmbPropertyEditorElement} element - The property editor element to configure
+ * @param {UmbConfigItem[]} items - Array of object items for configuration
+ */
+export function setupObjectConfig(element, items = [
+    { name: 'Red Color', value: 'red' },
+    { name: 'Green Color', value: 'green' },
+    { name: 'Blue Color', value: 'blue' },
+]) {
+    element.config = {
+        getValueByAlias: (alias) => {
+            if (alias === 'items') {
+                return items;
+            }
+            return undefined;
+        },
+    };
+}
+/**
+ * Helper function to setup empty configuration
+ * @param {UmbPropertyEditorElement} element - The property editor element to configure
+ */
+export function setupEmptyConfig(element) {
+    element.config = {
+        getValueByAlias: () => undefined,
+    };
+}
+/**
+ * Helper function to get select element from shadow DOM
+ * @param {UmbShadowDOMElement} element - The property editor element
+ * @returns {Element | null} The UUI select element or null
+ */
+export function getSelectElement(element) {
+    return element.shadowRoot?.querySelector('uui-select');
+}
+/**
+ * Helper function to get checkbox list element from shadow DOM
+ * @param {UmbShadowDOMElement} element - The property editor element
+ * @returns {Element | null} The checkbox list element or null
+ */
+export function getCheckboxListElement(element) {
+    return element.shadowRoot?.querySelector('umb-input-checkbox-list');
+}
+/**
+ * Helper function to get dropdown element from shadow DOM
+ * @param {UmbShadowDOMElement} element - The property editor element
+ * @returns {Element | null} The dropdown element or null
+ */
+export function getDropdownElement(element) {
+    return element.shadowRoot?.querySelector('umb-input-dropdown-list');
+}
+/**
+ * Helper function to get selected value from select DOM
+ * @param {UmbShadowDOMElement} element - The property editor element
+ * @returns {string} The selected value string
+ */
+export function getSelectedValue(element) {
+    const selectElement = getSelectElement(element);
+    return selectElement?.value || '';
+}
+/**
+ * Helper function to get selection from checkbox list DOM
+ * @param {UmbShadowDOMElement} element - The property editor element
+ * @returns {string[]} Array of selected values
+ */
+export function getCheckboxSelection(element) {
+    const checkboxElement = getCheckboxListElement(element);
+    return checkboxElement?.selection || [];
+}
+/**
+ * Helper function to get selection from dropdown DOM
+ * @param {UmbShadowDOMElement} element - The property editor element
+ * @returns {string[]} Array of selected values
+ */
+export function getDropdownSelection(element) {
+    const dropdownElement = getDropdownElement(element);
+    // Prefer selection array if available, fallback to parsing value string
+    if (dropdownElement?.selection) {
+        return dropdownElement.selection;
+    }
+    // Fallback: parse comma-separated string (note: assumes values don't contain commas)
+    return dropdownElement?.value ? dropdownElement.value.split(', ').filter((v) => v.trim().length > 0) : [];
+}
+/**
+ * Helper function to verify both value and DOM state for single select
+ * @param {UmbSingleSelectElement} element - The property editor element
+ * @param {string} expectedValue - Expected element value
+ * @param {string} expectedSelected - Expected selected value in DOM
+ */
+export function verifySelectValueAndDOM(element, expectedValue, expectedSelected) {
+    expect(element.value).to.equal(expectedValue);
+    expect(getSelectedValue(element)).to.equal(expectedSelected);
+}
+/**
+ * Helper function to verify both value and DOM state for multi-select
+ * @param {UmbMultiSelectElement} element - The property editor element
+ * @param {string[]} expectedValue - Expected element value array
+ * @param {string[]} expectedSelection - Expected selection array in DOM
+ */
+export function verifyMultiSelectValueAndDOM(element, expectedValue, expectedSelection) {
+    expect(element.value).to.deep.equal(expectedValue);
+    expect(getCheckboxSelection(element)).to.deep.equal(expectedSelection);
+}
+/**
+ * Helper function to verify both value and DOM state for dropdown
+ * @param {UmbMultiSelectElement} element - The property editor element
+ * @param {string[]} expectedValue - Expected element value array
+ * @param {string[]} expectedSelection - Expected selection array in DOM
+ */
+export function verifyDropdownValueAndDOM(element, expectedValue, expectedSelection) {
+    expect(element.value).to.deep.equal(expectedValue);
+    expect(getDropdownSelection(element)).to.deep.equal(expectedSelection);
+}
+/**
+ * Common test data for multiple updates
+ */
+export const SINGLE_SELECT_TEST_DATA = [
+    { value: 'Red', expected: 'Red' },
+    { value: 'Green', expected: 'Green' },
+    { value: 'Blue', expected: 'Blue' },
+    { value: '', expected: '' },
+];
+export const MULTI_SELECT_TEST_DATA = [
+    { value: ['Red'], expected: ['Red'] },
+    { value: ['Red', 'Blue'], expected: ['Red', 'Blue'] },
+    { value: ['Green'], expected: ['Green'] },
+    { value: [], expected: [] },
+];
+// Re-export expect for convenience
+export { expect };

package/dist-cms/packages/property-editors/utils/property-editor-ui-state-manager.d.ts

@@ -0,0 +1,30 @@
+/**
+ * Utility functions for managing property editor UI state updates
+ * when values are set programmatically.
+ */
+/**
+ * Interface for items that can be selected/checked
+ */
+export interface UmbSelectableItem {
+    value: string;
+    selected?: boolean;
+    checked?: boolean;
+}
+/**
+ * Updates the selected state of items based on current selection.
+ * This function is for internal use only within the property-editors package and should not be exposed
+ * to external consumers to avoid unwanted external dependencies.
+ * @internal
+ * @template T
+ * @param {T[]} items - Array of items to update
+ * @param {string[]} selection - Array of selected values
+ * @param {'selected' | 'checked'} stateProperty - Property name to update ('selected' or 'checked')
+ * @returns {T[]} New array with updated state, or original array if no changes needed
+ */
+export declare function updateItemsSelectedState<T extends UmbSelectableItem>(items: T[], selection: string[], stateProperty?: 'selected' | 'checked'): T[];
+/**
+ * Helper function to ensure a value is an array
+ * @param {string | string[] | null | undefined} value - Value to convert to array
+ * @returns {string[]} Array representation of the value
+ */
+export declare function ensureArray(value: string | string[] | null | undefined): string[];