@umbraco-cms/backoffice 15.1.2 → 15.2.0

package/dist-cms/packages/multi-url-picker/link-picker-modal/link-picker-modal.element.js

@@ -6,22 +6,40 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { css, customElement, html, nothing, query, state, when } from '../../../external/lit/index.js';
 import { isUmbracoFolder, UmbMediaTypeStructureRepository } from '../../media/media-types/index.js';
-import { umbFocus } from '../../core/lit-element/index.js';
+import { umbBindToValidation, UmbValidationContext } from '../../core/validation/index.js';
+import { umbConfirmModal, UmbModalBaseElement } from '../../core/modal/index.js';
 import { UmbDocumentDetailRepository } from '../../documents/documents/index.js';
 import { UmbMediaDetailRepository } from '../../media/media/index.js';
-import { UmbModalBaseElement } from '../../core/modal/index.js';
 let UmbLinkPickerModalElement = class UmbLinkPickerModalElement extends UmbModalBaseElement {
     constructor() {
         super(...arguments);
+        this.#propertyLayoutOrientation = 'vertical';
+        this.#validationContext = new UmbValidationContext(this);
         this._config = {
             hideAnchor: false,
             hideTarget: false,
         };
     }
-    async firstUpdated() {
+    #propertyLayoutOrientation;
+    #validationContext;
+    connectedCallback() {
+        super.connectedCallback();
         if (this.data?.config) {
             this._config = this.data.config;
         }
+        if (this.modalContext) {
+            this.observe(this.modalContext.size, (size) => {
+                if (size === 'large' || size === 'full') {
+                    this.#propertyLayoutOrientation = 'horizontal';
+                }
+            });
+        }
+        this.#getMediaTypes();
+    }
+    firstUpdated() {
+        this._linkAnchorInput?.addValidator('valueMissing', () => this.localize.term('linkPicker_modalAnchorValidationMessage'), () => !this.value.link.url && !this.value.link.queryString);
+    }
+    async #getMediaTypes() {
         // Get all the media types, excluding the folders, so that files are selectable media items.
         const mediaTypeStructureRepository = new UmbMediaTypeStructureRepository(this);
         const { data: mediaTypes } = await mediaTypeStructureRepository.requestAllowedChildrenOf(null);
@@ -44,7 +62,7 @@ let UmbLinkPickerModalElement = class UmbLinkPickerModalElement extends UmbModal
             this.#partialUpdateLink({ queryString: `#${query}` });
         }
         else {
-            this.#partialUpdateLink({ queryString: query });
+            this.#partialUpdateLink({ queryString: '' });
         }
     }
     #onLinkTitleInput(event) {
@@ -77,23 +95,29 @@ let UmbLinkPickerModalElement = class UmbLinkPickerModalElement extends UmbModal
         let icon, name, url;
         const unique = event.target.value;
         if (unique) {
-            if (type === 'document') {
-                const documentRepository = new UmbDocumentDetailRepository(this);
-                const { data: documentData } = await documentRepository.requestByUnique(unique);
-                if (documentData) {
-                    icon = documentData.documentType.icon;
-                    name = documentData.variants[0].name;
-                    url = documentData.urls[0].url;
+            switch (type) {
+                case 'document': {
+                    const documentRepository = new UmbDocumentDetailRepository(this);
+                    const { data: documentData } = await documentRepository.requestByUnique(unique);
+                    if (documentData) {
+                        icon = documentData.documentType.icon;
+                        name = documentData.variants[0].name;
+                        url = documentData.urls[0]?.url ?? '';
+                    }
+                    break;
                 }
-            }
-            if (type === 'media') {
-                const mediaRepository = new UmbMediaDetailRepository(this);
-                const { data: mediaData } = await mediaRepository.requestByUnique(unique);
-                if (mediaData) {
-                    icon = mediaData.mediaType.icon;
-                    name = mediaData.variants[0].name;
-                    url = mediaData.urls[0].url;
+                case 'media': {
+                    const mediaRepository = new UmbMediaDetailRepository(this);
+                    const { data: mediaData } = await mediaRepository.requestByUnique(unique);
+                    if (mediaData) {
+                        icon = mediaData.mediaType.icon;
+                        name = mediaData.variants[0].name;
+                        url = mediaData.urls[0].url;
+                    }
+                    break;
                 }
+                default:
+                    break;
             }
         }
         const link = {
@@ -101,9 +125,25 @@ let UmbLinkPickerModalElement = class UmbLinkPickerModalElement extends UmbModal
             name: this.value.link.name || name,
             type: unique ? type : undefined,
             unique,
-            url,
+            url: url ?? this.value.link.url,
         };
         this.#partialUpdateLink(link);
+        await this.#validationContext.validate();
+    }
+    async #onResetUrl() {
+        if (this.value.link.url) {
+            await umbConfirmModal(this, {
+                color: 'danger',
+                headline: this.localize.term('linkPicker_resetUrlHeadline'),
+                content: this.localize.term('linkPicker_resetUrlMessage'),
+                confirmLabel: this.localize.term('linkPicker_resetUrlLabel'),
+            });
+        }
+        this.#partialUpdateLink({ type: null, url: null });
+    }
+    async #onSubmit() {
+        await this.#validationContext.validate();
+        this.modalContext?.submit();
     }
     #triggerDocumentPicker() {
         this._documentPickerElement?.shadowRoot?.querySelector('#btn-add')?.dispatchEvent(new Event('click'));
@@ -111,12 +151,15 @@ let UmbLinkPickerModalElement = class UmbLinkPickerModalElement extends UmbModal
     #triggerMediaPicker() {
         this._mediaPickerElement?.shadowRoot?.querySelector('#btn-add')?.dispatchEvent(new Event('click'));
     }
+    #triggerExternalUrl() {
+        this.#partialUpdateLink({ type: 'external' });
+    }
     render() {
         return html `
 			<umb-body-layout headline=${this.localize.term('defaultdialogs_selectLink')}>
 				<uui-box>
-					${this.#renderLinkUrlInput()} ${this.#renderLinkTitleInput()} ${this.#renderLinkTargetInput()}
-					${this.#renderInternals()}
+					${this.#renderLinkType()} ${this.#renderLinkAnchorInput()} ${this.#renderLinkTitleInput()}
+					${this.#renderLinkTargetInput()}
 				</uui-box>
 				<div slot="actions">
 					<uui-button label=${this.localize.term('general_close')} @click=${this._rejectModal}></uui-button>
@@ -124,51 +167,127 @@ let UmbLinkPickerModalElement = class UmbLinkPickerModalElement extends UmbModal
 						color="positive"
 						look="primary"
 						label=${this.localize.term('general_submit')}
-						?disabled=${!this.value.link.url && !this.value.link.queryString}
-						@click=${this._submitModal}></uui-button>
+						?disabled=${!this.value.link.type}
+						@click=${this.#onSubmit}></uui-button>
 				</div>
 			</umb-body-layout>
 		`;
     }
-    #renderLinkUrlInput() {
+    #renderLinkType() {
         return html `
-			<umb-property-layout orientation="vertical">
-				<div class="side-by-side" slot="editor">
-					<umb-property-layout
-						orientation="vertical"
-						label=${this.localize.term('defaultdialogs_link')}
-						style="padding:0;">
-						<uui-input
-							slot="editor"
-							placeholder=${this.localize.term('general_url')}
-							label=${this.localize.term('general_url')}
-							.value=${this.value.link.url ?? ''}
-							?disabled=${this.value.link.unique ? true : false}
-							@change=${this.#onLinkUrlInput}
-							${umbFocus()}>
-						</uui-input>
-					</umb-property-layout>
-					${when(!this._config.hideAnchor, () => html `
-							<umb-property-layout
-								orientation="vertical"
-								label=${this.localize.term('defaultdialogs_anchorLinkPicker')}
-								style="padding:0;">
-								<uui-input
-									slot="editor"
-									placeholder=${this.localize.term('placeholders_anchor')}
-									label=${this.localize.term('placeholders_anchor')}
-									@change=${this.#onLinkAnchorInput}
-									.value=${this.value.link.queryString ?? ''}></uui-input>
-							</umb-property-layout>
-						`)}
+			<umb-property-layout
+				orientation=${this.#propertyLayoutOrientation}
+				label=${this.localize.term('linkPicker_modalSource')}
+				mandatory>
+				<div slot="editor">
+					${this.#renderLinkTypeSelection()} ${this.#renderDocumentPicker()} ${this.#renderMediaPicker()}
+					${this.#renderLinkUrlInput()} ${this.#renderLinkUrlInputReadOnly()}
 				</div>
 			</umb-property-layout>
 		`;
     }
+    #renderLinkTypeSelection() {
+        if (this.value.link.type)
+            return nothing;
+        return html `
+			<uui-button-group>
+				<uui-button
+					data-mark="action:document"
+					look="placeholder"
+					label=${this.localize.term('general_document')}
+					@click=${this.#triggerDocumentPicker}></uui-button>
+				<uui-button
+					data-mark="action:media"
+					look="placeholder"
+					label=${this.localize.term('general_media')}
+					@click=${this.#triggerMediaPicker}></uui-button>
+				<uui-button
+					data-mark="action:external"
+					look="placeholder"
+					label=${this.localize.term('linkPicker_modalManual')}
+					@click=${this.#triggerExternalUrl}></uui-button>
+			</uui-button-group>
+		`;
+    }
+    #renderDocumentPicker() {
+        return html `
+			<umb-input-document
+				?hidden=${!this.value.link.unique || this.value.link.type !== 'document'}
+				.max=${1}
+				.showOpenButton=${true}
+				.value=${this.value.link.unique && this.value.link.type === 'document' ? this.value.link.unique : ''}
+				@change=${(e) => this.#onPickerSelection(e, 'document')}>
+			</umb-input-document>
+		`;
+    }
+    #renderMediaPicker() {
+        return html `
+			<umb-input-media
+				?hidden=${!this.value.link.unique || this.value.link.type !== 'media'}
+				.allowedContentTypeIds=${this._allowedMediaTypeUniques}
+				.max=${1}
+				.value=${this.value.link.unique && this.value.link.type === 'media' ? this.value.link.unique : ''}
+				@change=${(e) => this.#onPickerSelection(e, 'media')}></umb-input-media>
+		`;
+    }
+    #renderLinkUrlInput() {
+        if (this.value.link.type !== 'external')
+            return nothing;
+        return html `
+			<uui-input
+				data-mark="input:url"
+				label=${this.localize.term('placeholders_enterUrl')}
+				placeholder=${this.localize.term('placeholders_enterUrl')}
+				.value=${this.value.link.url ?? ''}
+				?disabled=${!!this.value.link.unique}
+				?required=${this._config.hideAnchor}
+				@change=${this.#onLinkUrlInput}
+				${umbBindToValidation(this)}>
+				${when(!this.value.link.unique, () => html `
+						<div slot="append">
+							<uui-button
+								slot="append"
+								compact
+								label=${this.localize.term('general_remove')}
+								@click=${this.#onResetUrl}>
+								<uui-icon name="remove"></uui-icon>
+							</uui-button>
+						</div>
+					`)}
+			</uui-input>
+		`;
+    }
+    #renderLinkUrlInputReadOnly() {
+        if (!this.value.link.unique || !this.value.link.url)
+            return nothing;
+        return html `<uui-input readonly value=${this.value.link.url}></uui-input>`;
+    }
+    #renderLinkAnchorInput() {
+        if (this._config.hideAnchor)
+            return nothing;
+        return html `
+			<umb-property-layout
+				orientation=${this.#propertyLayoutOrientation}
+				label=${this.localize.term('defaultdialogs_anchorLinkPicker')}>
+				<uui-input
+					data-mark="input:anchor"
+					slot="editor"
+					id="link-anchor"
+					label=${this.localize.term('placeholders_anchor')}
+					placeholder=${this.localize.term('placeholders_anchor')}
+					.value=${this.value.link.queryString ?? ''}
+					@change=${this.#onLinkAnchorInput}
+					${umbBindToValidation(this)}></uui-input>
+			</umb-property-layout>
+		`;
+    }
     #renderLinkTitleInput() {
         return html `
-			<umb-property-layout orientation="vertical" label=${this.localize.term('defaultdialogs_nodeNameLinkPicker')}>
+			<umb-property-layout
+				orientation=${this.#propertyLayoutOrientation}
+				label=${this.localize.term('defaultdialogs_nodeNameLinkPicker')}>
 				<uui-input
+					data-mark="input:title"
 					slot="editor"
 					label=${this.localize.term('defaultdialogs_nodeNameLinkPicker')}
 					placeholder=${this.localize.term('defaultdialogs_nodeNameLinkPicker')}
@@ -182,7 +301,7 @@ let UmbLinkPickerModalElement = class UmbLinkPickerModalElement extends UmbModal
         if (this._config.hideTarget)
             return nothing;
         return html `
-			<umb-property-layout orientation="vertical" label=${this.localize.term('content_target')}>
+			<umb-property-layout orientation=${this.#propertyLayoutOrientation} label=${this.localize.term('content_target')}>
 				<uui-toggle
 					slot="editor"
 					label=${this.localize.term('defaultdialogs_openInNewWindow')}
@@ -193,39 +312,6 @@ let UmbLinkPickerModalElement = class UmbLinkPickerModalElement extends UmbModal
 			</umb-property-layout>
 		`;
     }
-    #renderInternals() {
-        return html `
-			<umb-property-layout orientation="vertical" label=${this.localize.term('defaultdialogs_linkinternal')}>
-				<div slot="editor">
-					${when(!this.value.link.unique, () => html `
-							<uui-button-group>
-								<uui-button
-									look="placeholder"
-									label=${this.localize.term('defaultdialogs_linkToPage')}
-									@click=${this.#triggerDocumentPicker}></uui-button>
-								<uui-button
-									look="placeholder"
-									label=${this.localize.term('defaultdialogs_linkToMedia')}
-									@click=${this.#triggerMediaPicker}></uui-button>
-							</uui-button-group>
-						`)}
-					<umb-input-document
-						?hidden=${!this.value.link.unique || this.value.link.type !== 'document'}
-						.max=${1}
-						.showOpenButton=${true}
-						.value=${this.value.link.unique && this.value.link.type === 'document' ? this.value.link.unique : ''}
-						@change=${(e) => this.#onPickerSelection(e, 'document')}>
-					</umb-input-document>
-					<umb-input-media
-						?hidden=${!this.value.link.unique || this.value.link.type !== 'media'}
-						.allowedContentTypeIds=${this._allowedMediaTypeUniques}
-						.max=${1}
-						.value=${this.value.link.unique && this.value.link.type === 'media' ? this.value.link.unique : ''}
-						@change=${(e) => this.#onPickerSelection(e, 'media')}></umb-input-media>
-				</div>
-			</umb-property-layout>
-		`;
-    }
     static { this.styles = [
         css `
 			uui-box {
@@ -238,15 +324,9 @@ let UmbLinkPickerModalElement = class UmbLinkPickerModalElement extends UmbModal
 
 			uui-input {
 				width: 100%;
-			}
 
-			.side-by-side {
-				display: flex;
-				flex-wrap: wrap;
-				gap: var(--uui-size-space-5);
-
-				umb-property-layout {
-					flex: 1 1 0px;
+				&[readonly] {
+					margin-top: var(--uui-size-space-2);
 				}
 			}
 		`,
@@ -254,16 +334,19 @@ let UmbLinkPickerModalElement = class UmbLinkPickerModalElement extends UmbModal
 };
 __decorate([
     state()
-], UmbLinkPickerModalElement.prototype, "_config", void 0);
+], UmbLinkPickerModalElement.prototype, "_allowedMediaTypeUniques", void 0);
 __decorate([
     state()
-], UmbLinkPickerModalElement.prototype, "_allowedMediaTypeUniques", void 0);
+], UmbLinkPickerModalElement.prototype, "_config", void 0);
 __decorate([
     query('umb-input-document')
 ], UmbLinkPickerModalElement.prototype, "_documentPickerElement", void 0);
 __decorate([
     query('umb-input-media')
 ], UmbLinkPickerModalElement.prototype, "_mediaPickerElement", void 0);
+__decorate([
+    query('#link-anchor', true)
+], UmbLinkPickerModalElement.prototype, "_linkAnchorInput", void 0);
 UmbLinkPickerModalElement = __decorate([
     customElement('umb-link-picker-modal')
 ], UmbLinkPickerModalElement);

package/dist-cms/packages/packages/package-builder/workspace/workspace-package-builder.element.js

@@ -16,10 +16,12 @@ import { UmbLitElement, umbFocus } from '../../../core/lit-element/index.js';
 import { UmbServerFilePathUniqueSerializer } from '../../../core/server-file-system/index.js';
 import { UmbTextStyles } from '../../../core/style/index.js';
 import { UMB_NOTIFICATION_CONTEXT } from '../../../core/notification/index.js';
+import { UmbValidationContext, umbBindToValidation } from '../../../core/validation/index.js';
 let UmbWorkspacePackageBuilderElement = class UmbWorkspacePackageBuilderElement extends UmbLitElement {
     #notificationContext;
     #packageRepository = new UmbPackageRepository(this);
     #serverFilePathUniqueSerializer = new UmbServerFilePathUniqueSerializer();
+    #validationContext = new UmbValidationContext(this);
     constructor() {
         super();
         this.consumeContext(UMB_NOTIFICATION_CONTEXT, (context) => {
@@ -44,37 +46,39 @@ let UmbWorkspacePackageBuilderElement = class UmbWorkspacePackageBuilderElement
         const mimeType = typeof data === 'object' ? 'application/zip' : 'text/xml';
         blobDownload(data, filename, mimeType);
     }
-    #isNameDefined() {
-        const valid = this._packageNameInput?.checkValidity() ?? false;
-        if (!valid)
-            this.#notificationContext?.peek('danger', { data: { message: 'Package missing a name' } });
-        return valid;
-    }
     async #save() {
-        if (!this.#isNameDefined())
-            return;
-        if (!this._package)
-            return;
-        this._submitState = 'waiting';
-        const unique = await this.#packageRepository.saveCreatedPackage(this._package);
-        if (!unique)
-            return;
-        this._package.unique = unique;
-        this.requestUpdate('_package');
-        this._submitState = 'success';
-        this.#notificationContext?.peek('positive', { data: { message: 'Package saved' } });
+        try {
+            await this.#validationContext.validate();
+            if (!this._package)
+                return;
+            this._submitState = 'waiting';
+            const unique = await this.#packageRepository.saveCreatedPackage(this._package);
+            if (!unique)
+                return;
+            this._package.unique = unique;
+            this.requestUpdate('_package');
+            this._submitState = 'success';
+            this.#notificationContext?.peek('positive', { data: { message: 'Package saved' } });
+        }
+        catch {
+            this._submitState = 'failed';
+        }
     }
     async #update() {
-        if (!this.#isNameDefined())
-            return;
-        if (!this._package?.unique)
-            return;
-        this._submitState = 'waiting';
-        const success = await this.#packageRepository.updateCreatedPackage(this._package);
-        if (!success)
-            return;
-        this._submitState = 'success';
-        this.#notificationContext?.peek('positive', { data: { message: 'Package updated' } });
+        try {
+            await this.#validationContext.validate();
+            if (!this._package?.unique)
+                return;
+            this._submitState = 'waiting';
+            const success = await this.#packageRepository.updateCreatedPackage(this._package);
+            if (!success)
+                return;
+            this._submitState = 'success';
+            this.#notificationContext?.peek('positive', { data: { message: 'Package updated' } });
+        }
+        catch {
+            this._submitState = 'failed';
+        }
     }
     render() {
         return html `
@@ -90,10 +94,12 @@ let UmbWorkspacePackageBuilderElement = class UmbWorkspacePackageBuilderElement
 			<div id="header" slot="header">
 				<uui-input
 					id="package-name-input"
+					data-mark="input:workspace-name"
 					required
 					label="Name of the package"
 					placeholder=${this.localize.term('placeholders_entername')}
 					${umbFocus()}
+					${umbBindToValidation(this, '$.name', this._package.name)}
 					.value=${this._package?.name ?? ''}
 					@input=${(e) => (this._package.name = e.target.value)}></uui-input>
 			</div>

package/dist-cms/packages/packages/package-repo/workspace/workspace-package.element.js

@@ -27,7 +27,7 @@ let UmbWorkspacePackageElement = class UmbWorkspacePackageElement extends UmbLit
         return html `<div class="header" slot="header">
 			<uui-button compact @click="${this._navigateBack}">
 				<uui-icon name="icon-arrow-left"></uui-icon>
-				${this._package.name ?? 'Package name'}
+				<span data-mark="input:workspace-name">${this._package.name ?? 'Package name'}</span>
 			</uui-button>
 		</div>`;
     }

package/dist-cms/packages/packages/package-section/manifests.js

@@ -1,3 +1,4 @@
+import { UMB_SECTION_USER_PERMISSION_CONDITION_ALIAS } from '../../core/section/index.js';
 const sectionAlias = 'Umb.Section.Packages';
 export const manifests = [
     {
@@ -11,7 +12,7 @@ export const manifests = [
         },
         conditions: [
             {
-                alias: 'Umb.Condition.SectionUserPermission',
+                alias: UMB_SECTION_USER_PERMISSION_CONDITION_ALIAS,
                 match: sectionAlias,
             },
         ],

package/dist-cms/packages/performance-profiling/manifests.js

@@ -1,3 +1,4 @@
+import { UMB_SETTINGS_SECTION_ALIAS } from '../settings/index.js';
 export const manifests = [
     {
         type: 'dashboard',
@@ -12,7 +13,7 @@ export const manifests = [
         conditions: [
             {
                 alias: 'Umb.Condition.SectionAlias',
-                match: 'Umb.Section.Settings',
+                match: UMB_SETTINGS_SECTION_ALIAS,
             },
         ],
     },

package/dist-cms/packages/property-editors/checkbox-list/components/input-checkbox-list/input-checkbox-list.element.d.ts

@@ -1,9 +1,10 @@
 import { nothing } from '../../../../../external/lit/index.js';
 import { UmbLitElement } from '../../../../core/lit-element/index.js';
-type UmbCheckboxListItem = {
+export type UmbCheckboxListItem = {
     label: string;
     value: string;
     checked: boolean;
+    invalid?: boolean;
 };
 declare const UmbInputCheckboxListElement_base: (new (...args: any[]) => import("@umbraco-ui/uui-base").UUIFormControlMixinElement<FormData | FormDataEntryValue>) & typeof UmbLitElement;
 export declare class UmbInputCheckboxListElement extends UmbInputCheckboxListElement_base {
@@ -22,7 +23,7 @@ export declare class UmbInputCheckboxListElement extends UmbInputCheckboxListEle
     readonly: boolean;
     protected getFormElement(): undefined;
     render(): typeof nothing | import("lit-html").TemplateResult<1>;
-    static styles: import("lit").CSSResult[];
+    static readonly styles: import("lit").CSSResult[];
 }
 export default UmbInputCheckboxListElement;
 declare global {

package/dist-cms/packages/property-editors/checkbox-list/components/input-checkbox-list/input-checkbox-list.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, html, nothing, repeat, customElement, property } from '../../../../../external/lit/index.js';
+import { css, html, nothing, repeat, customElement, property, classMap } from '../../../../../external/lit/index.js';
 import { UUIFormControlMixin } from '../../../../../external/uui/index.js';
 import { UmbChangeEvent } from '../../../../core/event/index.js';
 import { UmbLitElement } from '../../../../core/lit-element/index.js';
@@ -66,8 +66,10 @@ let UmbInputCheckboxListElement = class UmbInputCheckboxListElement extends UUIF
     }
     #renderCheckbox(item) {
         return html `<uui-checkbox
+			class=${classMap({ invalid: !!item.invalid })}
 			?checked=${item.checked}
-			label=${item.label}
+			label=${item.label + (item.invalid ? ` (${this.localize.term('validation_legacyOption')})` : '')}
+			title=${item.invalid ? this.localize.term('validation_legacyOptionDescription') : ''}
 			value=${item.value}
 			?readonly=${this.readonly}></uui-checkbox>`;
     }
@@ -75,6 +77,10 @@ let UmbInputCheckboxListElement = class UmbInputCheckboxListElement extends UUIF
         css `
 			uui-checkbox {
 				width: 100%;
+
+				&.invalid {
+					text-decoration: line-through;
+				}
 			}
 		`,
     ]; }

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

@@ -35,7 +35,7 @@ let UmbPropertyEditorUICheckboxListElement = class UmbPropertyEditorUICheckboxLi
         if (!config)
             return;
         const items = config.getValueByAlias('items');
-        if (Array.isArray(items) && items.length > 0) {
+        if (Array.isArray(items) && items.length) {
             this._list =
                 typeof items[0] === 'string'
                     ? items.map((item) => ({ label: item, value: item, checked: this.#selection.includes(item) }))
@@ -44,6 +44,12 @@ let UmbPropertyEditorUICheckboxListElement = class UmbPropertyEditorUICheckboxLi
                         value: item.value,
                         checked: this.#selection.includes(item.value),
                     }));
+            // If selection includes a value that is not in the list, add it to the list
+            this.#selection.forEach((value) => {
+                if (!this._list.find((item) => item.value === value)) {
+                    this._list.push({ label: value, value, checked: true, invalid: true });
+                }
+            });
         }
     }
     #onChange(event) {

package/dist-cms/packages/property-editors/color-picker/constants.d.ts

@@ -0,0 +1 @@
+export declare const UMB_COLOR_PICKER_PROPERTY_EDITOR_UI_ALIAS = "Umb.PropertyEditorUi.ColorPicker";

package/dist-cms/packages/property-editors/color-picker/constants.js

@@ -0,0 +1 @@
+export const UMB_COLOR_PICKER_PROPERTY_EDITOR_UI_ALIAS = 'Umb.PropertyEditorUi.ColorPicker';

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

@@ -1,8 +1,9 @@
+import { UMB_COLOR_PICKER_PROPERTY_EDITOR_UI_ALIAS } from './constants.js';
 import { manifest as schemaManifest } from './Umbraco.ColorPicker.js';
 export const manifests = [
     {
         type: 'propertyEditorUi',
-        alias: 'Umb.PropertyEditorUi.ColorPicker',
+        alias: UMB_COLOR_PICKER_PROPERTY_EDITOR_UI_ALIAS,
         name: 'Color Picker Property Editor UI',
         element: () => import('./property-editor-ui-color-picker.element.js'),
         meta: {

package/dist-cms/packages/property-editors/content-picker/dynamic-root/modals/dynamic-root-origin-picker-modal.element.js

@@ -63,7 +63,7 @@ let UmbDynamicRootOriginPickerModalModalElement = class UmbDynamicRootOriginPick
 										name=${ifDefined(item.meta.label)}
 										detail=${ifDefined(item.meta.description)}
 										icon=${ifDefined(item.meta.icon)}
-										@click=${() => this.#choose(item)}></umb-ref-item>
+										@open=${() => this.#choose(item)}></umb-ref-item>
 								`)}
 						</uui-ref-list>
 					</uui-box>

package/dist-cms/packages/property-editors/content-picker/dynamic-root/modals/dynamic-root-query-step-picker-modal.element.js

@@ -54,7 +54,7 @@ let UmbDynamicRootQueryStepPickerModalModalElement = class UmbDynamicRootQuerySt
 										name=${ifDefined(item.meta.label)}
 										detail=${ifDefined(item.meta.description)}
 										icon=${ifDefined(item.meta.icon)}
-										@click=${() => this.#choose(item)}></umb-ref-item>
+										@open=${() => this.#choose(item)}></umb-ref-item>
 								`)}
 						</uui-ref-list>
 					</uui-box>

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

@@ -18,7 +18,7 @@ export declare class UmbPropertyEditorUIDropdownElement extends UmbLitElement im
     private _multiple;
     private _options;
     render(): import("lit-html").TemplateResult<1>;
-    static styles: (import("lit").CSSResult | import("lit").CSSResult[])[];
+    static readonly styles: (import("lit").CSSResult | import("lit").CSSResult[])[];
 }
 export default UmbPropertyEditorUIDropdownElement;
 declare global {