@umbraco-cms/backoffice 16.3.4 → 17.0.0-rc1

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

@@ -5,9 +5,22 @@ export const manifests = [
         name: 'Missing Property Editor UI',
         element: () => import('./property-editor-ui-missing.element.js'),
         meta: {
-            label: 'Missing',
+            label: 'Missing Property Editor',
             propertyEditorSchemaAlias: undefined, // By setting it to undefined, this editor won't appear in the property editor UI picker modal.
-            icon: 'icon-ordered-list',
+            icon: 'icon-circle-dotted',
+            group: '',
+            supportsReadOnly: true,
+        },
+    },
+    {
+        type: 'propertyEditorUi',
+        alias: 'Umb.PropertyEditorUi.MissingUi',
+        name: 'Missing Property Editor UI UI',
+        element: () => import('./property-editor-ui-missing-ui.element.js'),
+        meta: {
+            label: 'Missing Property Editor UI',
+            propertyEditorSchemaAlias: undefined, // By setting it to undefined, this editor won't appear in the property editor UI picker modal.
+            icon: 'icon-circle-dotted',
             group: '',
             supportsReadOnly: true,
         },

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

@@ -0,0 +1,18 @@
+import { UmbLitElement } from '../../core/lit-element/index.js';
+import type { UmbPropertyEditorUiElement } from '../../core/property-editor/index.js';
+export declare class UmbPropertyEditorUIMissingBaseElement extends UmbLitElement implements UmbPropertyEditorUiElement {
+    #private;
+    value: string;
+    private _expanded;
+    focalPointElement: HTMLElement;
+    private _dataTypeDetailModel?;
+    private _dataTypeDetailRepository;
+    protected _titleKey: string;
+    protected _detailsDescriptionKey: string;
+    protected _displayPropertyEditorUi: boolean;
+    constructor();
+    private _updateEditorAlias;
+    render(): import("lit-html").TemplateResult<1>;
+    private _renderDetails;
+    static styles: import("lit").CSSResult[];
+}

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

@@ -0,0 +1,130 @@
+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 { css, html, nothing, property, query, state } from '../../../external/lit/index.js';
+import { UmbLitElement } from '../../core/lit-element/index.js';
+import { UMB_PROPERTY_TYPE_BASED_PROPERTY_CONTEXT } from '../../content/content/index.js';
+import { UmbDataTypeDetailRepository } from '../../data-type/index.js';
+export class UmbPropertyEditorUIMissingBaseElement extends UmbLitElement {
+    constructor() {
+        super();
+        this.value = '';
+        this._expanded = false;
+        this._dataTypeDetailRepository = new UmbDataTypeDetailRepository(this);
+        this._titleKey = '';
+        this._detailsDescriptionKey = '';
+        this._displayPropertyEditorUi = true;
+        this.consumeContext(UMB_PROPERTY_TYPE_BASED_PROPERTY_CONTEXT, (propertyContext) => {
+            if (!propertyContext?.dataType)
+                return;
+            this.observe(propertyContext.dataType, (dt) => {
+                if (!dt?.unique)
+                    return;
+                this._updateEditorAlias(dt);
+            });
+        });
+    }
+    async _updateEditorAlias(dataType) {
+        this.observe(await this._dataTypeDetailRepository.byUnique(dataType.unique), (dataType) => {
+            this._dataTypeDetailModel = dataType;
+        });
+    }
+    async #onDetails() {
+        this._expanded = !this._expanded;
+        if (this._expanded) {
+            await this.updateComplete;
+            this.focalPointElement?.focus();
+        }
+    }
+    render() {
+        return html `<uui-box id="info">
+			<div slot="headline"><uui-icon id="alert" name="alert"></uui-icon>${this.localize.term(this._titleKey)}</div>
+			<div id="content">
+				<umb-localize key="missingEditor_description"></umb-localize>
+				${this._expanded ? this._renderDetails() : nothing}
+			</div>
+
+			<uui-button
+				id="details-button"
+				compact
+				label="${this.localize.term(this._expanded ? 'missingEditor_detailsHide' : 'missingEditor_detailsShow')}"
+				@click=${this.#onDetails}>
+				<span>${this.localize.term(this._expanded ? 'missingEditor_detailsHide' : 'missingEditor_detailsShow')}</span
+				><uui-symbol-expand id="expand-symbol" .open=${this._expanded}></uui-symbol-expand>
+			</uui-button>
+		</uui-box>`;
+    }
+    _renderDetails() {
+        return html ` <div id="details" tabindex="0">
+			<umb-localize id="details-title" key="missingEditor_detailsTitle"></umb-localize>
+			<p>
+				<umb-localize key=${this._detailsDescriptionKey}></umb-localize>
+			</p>
+			<p>
+				<strong><umb-localize key="missingEditor_detailsDataType"></umb-localize></strong>:
+				<code>${this._dataTypeDetailModel?.name}</code><br />
+				<strong><umb-localize key="missingEditor_detailsPropertyEditor"></umb-localize></strong>:
+				<code>${this._dataTypeDetailModel?.editorAlias}</code>
+				${this._displayPropertyEditorUi
+            ? html `
+							<br />
+							<strong><umb-localize key="missingEditor_detailsPropertyEditorUi"></umb-localize></strong>:
+							<code>${this._dataTypeDetailModel?.editorUiAlias}</code>
+						`
+            : nothing}
+			</p>
+			<umb-code-block id="codeblock" copy language="${this.localize.term('missingEditor_detailsData')}"
+				>${typeof this.value === 'object' ? JSON.stringify(this.value, null, 2) : String(this.value)}</umb-code-block
+			>
+		</div>`;
+    }
+    static { this.styles = [
+        css `
+			:host {
+				display: flex;
+				flex-direction: column;
+				gap: var(--uui-size-space-3);
+				--uui-box-default-padding: 0;
+			}
+			#content {
+				padding: var(--uui-size-space-5);
+				padding-bottom: var(--uui-size-space-3);
+			}
+			#alert {
+				padding-right: var(--uui-size-space-2);
+			}
+			#details-button {
+				float: right;
+			}
+			#details {
+				margin-top: var(--uui-size-space-5);
+			}
+			#details-title {
+				font-weight: 800;
+			}
+			#expand-symbol {
+				transform: rotate(90deg);
+			}
+			#expand-symbol[open] {
+				transform: rotate(180deg);
+			}
+			#codeblock {
+				max-height: 400px;
+				display: flex;
+				flex-direction: column;
+			}
+		`,
+    ]; }
+}
+__decorate([
+    property()
+], UmbPropertyEditorUIMissingBaseElement.prototype, "value", void 0);
+__decorate([
+    state()
+], UmbPropertyEditorUIMissingBaseElement.prototype, "_expanded", void 0);
+__decorate([
+    query('#details')
+], UmbPropertyEditorUIMissingBaseElement.prototype, "focalPointElement", void 0);

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

@@ -0,0 +1,13 @@
+import { UmbPropertyEditorUIMissingBaseElement } from './property-editor-ui-missing-base.element.js';
+/**
+ * @element umb-property-editor-ui-missing-ui
+ */
+export declare class UmbPropertyEditorUIMissingUiElement extends UmbPropertyEditorUIMissingBaseElement {
+    constructor();
+}
+export default UmbPropertyEditorUIMissingUiElement;
+declare global {
+    interface HTMLElementTagNameMap {
+        'umb-property-editor-ui-missing-ui': UmbPropertyEditorUIMissingUiElement;
+    }
+}

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

@@ -0,0 +1,24 @@
+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 { UmbPropertyEditorUIMissingBaseElement } from './property-editor-ui-missing-base.element.js';
+import { customElement } from '../../../external/lit/index.js';
+/**
+ * @element umb-property-editor-ui-missing-ui
+ */
+let UmbPropertyEditorUIMissingUiElement = class UmbPropertyEditorUIMissingUiElement extends UmbPropertyEditorUIMissingBaseElement {
+    constructor() {
+        super();
+        this._titleKey = 'missingEditor_missingUiTitle';
+        this._detailsDescriptionKey = 'missingEditor_missingUiDetailsDescription';
+        this._displayPropertyEditorUi = true;
+    }
+};
+UmbPropertyEditorUIMissingUiElement = __decorate([
+    customElement('umb-property-editor-ui-missing-ui')
+], UmbPropertyEditorUIMissingUiElement);
+export { UmbPropertyEditorUIMissingUiElement };
+export default UmbPropertyEditorUIMissingUiElement;

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

@@ -1,20 +1,9 @@
-import { UmbLitElement } from '../../core/lit-element/index.js';
-import type { UmbPropertyEditorUiElement } from '../../core/property-editor/index.js';
+import { UmbPropertyEditorUIMissingBaseElement } from './property-editor-ui-missing-base.element.js';
 /**
  * @element umb-property-editor-ui-missing
  */
-export declare class UmbPropertyEditorUIMissingElement extends UmbLitElement implements UmbPropertyEditorUiElement {
-    #private;
-    value: string;
-    private _expanded;
-    focalPointElement: HTMLElement;
-    private _dataTypeDetailModel?;
-    private _dataTypeDetailRepository;
+export declare class UmbPropertyEditorUIMissingElement extends UmbPropertyEditorUIMissingBaseElement {
     constructor();
-    private _updateEditorAlias;
-    render(): import("lit-html").TemplateResult<1>;
-    private _renderDetails;
-    static styles: import("lit").CSSResult[];
 }
 export default UmbPropertyEditorUIMissingElement;
 declare global {

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

@@ -4,125 +4,19 @@ 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, query, state } from '../../../external/lit/index.js';
-import { UmbLitElement } from '../../core/lit-element/index.js';
-import { UMB_PROPERTY_TYPE_BASED_PROPERTY_CONTEXT } from '../../content/content/index.js';
-import { UmbDataTypeDetailRepository } from '../../data-type/index.js';
+import { UmbPropertyEditorUIMissingBaseElement } from './property-editor-ui-missing-base.element.js';
+import { customElement } from '../../../external/lit/index.js';
 /**
  * @element umb-property-editor-ui-missing
  */
-let UmbPropertyEditorUIMissingElement = class UmbPropertyEditorUIMissingElement extends UmbLitElement {
+let UmbPropertyEditorUIMissingElement = class UmbPropertyEditorUIMissingElement extends UmbPropertyEditorUIMissingBaseElement {
     constructor() {
         super();
-        this.value = '';
-        this._expanded = false;
-        this._dataTypeDetailRepository = new UmbDataTypeDetailRepository(this);
-        this.consumeContext(UMB_PROPERTY_TYPE_BASED_PROPERTY_CONTEXT, (propertyContext) => {
-            if (!propertyContext?.dataType)
-                return;
-            this.observe(propertyContext.dataType, (dt) => {
-                if (!dt?.unique)
-                    return;
-                this._updateEditorAlias(dt);
-            });
-        });
+        this._titleKey = 'missingEditor_title';
+        this._detailsDescriptionKey = 'missingEditor_detailsDescription';
+        this._displayPropertyEditorUi = false;
     }
-    async _updateEditorAlias(dataType) {
-        this.observe(await this._dataTypeDetailRepository.byUnique(dataType.unique), (dataType) => {
-            this._dataTypeDetailModel = dataType;
-        });
-    }
-    async #onDetails() {
-        this._expanded = !this._expanded;
-        if (this._expanded) {
-            await this.updateComplete;
-            this.focalPointElement?.focus();
-        }
-    }
-    render() {
-        return html `<uui-box id="info">
-			<div slot="headline">
-				<uui-icon id="alert" name="alert"></uui-icon>${this.localize.term('missingEditor_title')}
-			</div>
-			<div id="content">
-				<umb-localize key="missingEditor_description"></umb-localize>
-				${this._expanded ? this._renderDetails() : nothing}
-			</div>
-
-			<uui-button
-				id="details-button"
-				compact
-				label="${this.localize.term(this._expanded ? 'missingEditor_detailsHide' : 'missingEditor_detailsShow')}"
-				@click=${this.#onDetails}>
-				<span>${this.localize.term(this._expanded ? 'missingEditor_detailsHide' : 'missingEditor_detailsShow')}</span
-				><uui-symbol-expand id="expand-symbol" .open=${this._expanded}></uui-symbol-expand>
-			</uui-button>
-		</uui-box>`;
-    }
-    _renderDetails() {
-        return html ` <div id="details" tabindex="0">
-			<umb-localize id="details-title" key="missingEditor_detailsTitle"></umb-localize>
-			<p>
-				<umb-localize key="missingEditor_detailsDescription"></umb-localize>
-			</p>
-			<p>
-				<strong><umb-localize key="missingEditor_detailsDataType"></umb-localize></strong>:
-				<code>${this._dataTypeDetailModel?.name}</code><br />
-				<strong><umb-localize key="missingEditor_detailsPropertyEditor"></umb-localize></strong>:
-				<code>${this._dataTypeDetailModel?.editorAlias}</code>
-			</p>
-			<umb-code-block id="codeblock" copy language="${this.localize.term('missingEditor_detailsData')}"
-				>${typeof this.value === 'object' ? JSON.stringify(this.value, null, 2) : String(this.value)}</umb-code-block
-			>
-		</div>`;
-    }
-    static { this.styles = [
-        css `
-			:host {
-				display: flex;
-				flex-direction: column;
-				gap: var(--uui-size-space-3);
-				--uui-box-default-padding: 0;
-			}
-			#content {
-				padding: var(--uui-size-space-5);
-				padding-bottom: var(--uui-size-space-3);
-			}
-			#alert {
-				padding-right: var(--uui-size-space-2);
-			}
-			#details-button {
-				float: right;
-			}
-			#details {
-				margin-top: var(--uui-size-space-5);
-			}
-			#details-title {
-				font-weight: 800;
-			}
-			#expand-symbol {
-				transform: rotate(90deg);
-			}
-			#expand-symbol[open] {
-				transform: rotate(180deg);
-			}
-			#codeblock {
-				max-height: 400px;
-				display: flex;
-				flex-direction: column;
-			}
-		`,
-    ]; }
 };
-__decorate([
-    property()
-], UmbPropertyEditorUIMissingElement.prototype, "value", void 0);
-__decorate([
-    state()
-], UmbPropertyEditorUIMissingElement.prototype, "_expanded", void 0);
-__decorate([
-    query('#details')
-], UmbPropertyEditorUIMissingElement.prototype, "focalPointElement", void 0);
 UmbPropertyEditorUIMissingElement = __decorate([
     customElement('umb-property-editor-ui-missing')
 ], UmbPropertyEditorUIMissingElement);

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

@@ -1,12 +1,12 @@
 import type { UmbSliderPropertyEditorUiValue } from './types.js';
 import { UmbLitElement } from '../../core/lit-element/index.js';
 import type { UmbPropertyEditorConfigCollection, UmbPropertyEditorUiElement } from '../../core/property-editor/index.js';
+declare const UmbPropertyEditorUISliderElement_base: import("../../../libs/extension-api/index.js").HTMLElementConstructor<import("../../core/validation/index.js").UmbFormControlMixinElement<UmbSliderPropertyEditorUiValue>> & typeof UmbLitElement;
 /**
  * @element umb-property-editor-ui-slider
  */
-export declare class UmbPropertyEditorUISliderElement extends UmbLitElement implements UmbPropertyEditorUiElement {
+export declare class UmbPropertyEditorUISliderElement extends UmbPropertyEditorUISliderElement_base implements UmbPropertyEditorUiElement {
     #private;
-    value: UmbSliderPropertyEditorUiValue | undefined;
     /**
      * Sets the input to readonly mode, meaning value cannot be changed but still able to read and select its content.
      * @type {boolean}

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

@@ -8,10 +8,29 @@ 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';
+function stringToValueObject(value) {
+    const [from, to] = (value ?? ',').split(',');
+    const fromNumber = makeNumberOrUndefined(from);
+    return { from: fromNumber, to: makeNumberOrUndefined(to, fromNumber) };
+}
+function makeNumberOrUndefined(value, fallback) {
+    if (value === undefined) {
+        return fallback;
+    }
+    const n = Number(value);
+    if (isNaN(n)) {
+        return fallback;
+    }
+    return n;
+}
+function undefinedFallback(value, fallback) {
+    return value === undefined ? fallback : value;
+}
 /**
  * @element umb-property-editor-ui-slider
  */
-let UmbPropertyEditorUISliderElement = class UmbPropertyEditorUISliderElement extends UmbLitElement {
+let UmbPropertyEditorUISliderElement = class UmbPropertyEditorUISliderElement extends UmbFormControlMixin(UmbLitElement) {
     set config(config) {
         if (!config)
             return;
@@ -50,6 +69,7 @@ let UmbPropertyEditorUISliderElement = class UmbPropertyEditorUISliderElement ex
         });
     }
     firstUpdated() {
+        this.addFormControlElement(this.shadowRoot.querySelector('umb-input-slider'));
         if (this._min && this._max && this._min > this._max) {
             console.warn(`Property '${this._label}' (Slider) has been misconfigured, 'min' is greater than 'max'. Please correct your data type configuration.`, this);
         }
@@ -58,20 +78,21 @@ let UmbPropertyEditorUISliderElement = class UmbPropertyEditorUISliderElement ex
         const num = Number(input);
         return Number.isNaN(num) ? undefined : num;
     }
-    #getValueObject(value) {
-        const [from, to] = value.split(',').map(Number);
-        return { from, to: to ?? from };
-    }
     #onChange(event) {
-        this.value = this.#getValueObject(event.target.value);
+        const partialValue = stringToValueObject(event.target.value);
+        const handledFrom = undefinedFallback(partialValue.from, this._initVal1);
+        this.value = {
+            from: handledFrom,
+            to: this._enableRange ? undefinedFallback(partialValue.to, this._initVal2) : handledFrom,
+        };
         this.dispatchEvent(new UmbChangeEvent());
     }
     render() {
         return html `
 			<umb-input-slider
 				.label=${this._label ?? 'Slider'}
-				.valueLow=${this.value?.from ?? this._initVal1}
-				.valueHigh=${this.value?.to ?? this._initVal2}
+				.valueLow=${undefinedFallback(this.value?.from, this._initVal1)}
+				.valueHigh=${undefinedFallback(this.value?.to, this._initVal2)}
 				.step=${this._step}
 				.min=${this._min}
 				.max=${this._max}
@@ -82,9 +103,6 @@ let UmbPropertyEditorUISliderElement = class UmbPropertyEditorUISliderElement ex
 		`;
     }
 };
-__decorate([
-    property({ type: Object })
-], UmbPropertyEditorUISliderElement.prototype, "value", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
 ], UmbPropertyEditorUISliderElement.prototype, "readonly", void 0);

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

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

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

@@ -1,8 +1,5 @@
-export type UmbSliderPropertyEditorUiValue = {
+export interface UmbSliderPropertyEditorUiValueObject {
     from: number;
     to: number;
-} | undefined;
-/**
- * @deprecated this type will be removed in v.17.0, use `UmbPropertyEditorUISliderValue` instead
- */
-export type UmbSliderValue = UmbSliderPropertyEditorUiValue;
+}
+export type UmbSliderPropertyEditorUiValue = UmbSliderPropertyEditorUiValueObject | undefined;

package/dist-cms/packages/property-editors/time-zone-picker/manifests.d.ts

@@ -0,0 +1,2 @@
+import type { ManifestPropertyEditorUi } from '../../core/property-editor/index.js';
+export declare const manifest: ManifestPropertyEditorUi;

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

@@ -0,0 +1,11 @@
+export const manifest = {
+    type: 'propertyEditorUi',
+    alias: 'Umb.PropertyEditorUi.TimeZonePicker',
+    name: 'Time Zone Picker Property Editor UI',
+    element: () => import('./property-editor-ui-time-zone-picker.element.js'),
+    meta: {
+        label: 'Time Zone Picker',
+        icon: 'icon-globe',
+        group: '',
+    },
+};

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

@@ -0,0 +1,28 @@
+import type { UmbPropertyEditorUiElement, UmbPropertyEditorConfigCollection } from '../../core/property-editor/index.js';
+import { UmbLitElement } from '../../core/lit-element/index.js';
+export interface UmbTimeZonePickerValue {
+    mode: string;
+    timeZones: Array<string>;
+}
+declare const UmbPropertyEditorUITimeZonePickerElement_base: import("../../../libs/extension-api/index.js").HTMLElementConstructor<import("../../core/validation/index.js").UmbFormControlMixinElement<UmbTimeZonePickerValue | undefined>> & typeof UmbLitElement;
+/**
+ * @element umb-property-editor-ui-time-zone-picker
+ */
+export declare class UmbPropertyEditorUITimeZonePickerElement extends UmbPropertyEditorUITimeZonePickerElement_base implements UmbPropertyEditorUiElement {
+    #private;
+    private _supportedModes;
+    private _selectedTimeZones;
+    set value(value: UmbTimeZonePickerValue | undefined);
+    get value(): UmbTimeZonePickerValue | undefined;
+    readonly: boolean;
+    config?: UmbPropertyEditorConfigCollection;
+    constructor();
+    render(): import("lit-html").TemplateResult<1>;
+    static readonly styles: import("lit").CSSResult[];
+}
+export default UmbPropertyEditorUITimeZonePickerElement;
+declare global {
+    interface HTMLElementTagNameMap {
+        'umb-property-editor-ui-time-zone-picker': UmbPropertyEditorUITimeZonePickerElement;
+    }
+}

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

@@ -0,0 +1,111 @@
+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 { html, customElement, property, css, map, ref } from '../../../external/lit/index.js';
+import { UmbLitElement } from '../../core/lit-element/index.js';
+import { UmbChangeEvent } from '../../core/event/index.js';
+import { UMB_VALIDATION_EMPTY_LOCALIZATION_KEY, UmbFormControlMixin } from '../../core/validation/index.js';
+/**
+ * @element umb-property-editor-ui-time-zone-picker
+ */
+let UmbPropertyEditorUITimeZonePickerElement = class UmbPropertyEditorUITimeZonePickerElement extends UmbFormControlMixin(UmbLitElement) {
+    set value(value) {
+        super.value = value;
+        this._selectedTimeZones = value?.timeZones ?? [];
+    }
+    get value() {
+        return super.value;
+    }
+    #inputTimeZone;
+    constructor() {
+        super();
+        this._supportedModes = ['all', 'local', 'custom'];
+        this._selectedTimeZones = [];
+        this.readonly = false;
+        this.addValidator('valueMissing', () => UMB_VALIDATION_EMPTY_LOCALIZATION_KEY, () => !this.value?.mode || this._supportedModes.indexOf(this.value.mode) === -1);
+    }
+    #onModeInput(event) {
+        if (!this._supportedModes.includes(event.target.value))
+            throw new Error(`Unknown mode: ${event.target.value}`);
+        this.value = {
+            mode: event.target.value,
+            timeZones: this.#inputTimeZone?.value ? Array.from(this.#inputTimeZone?.value) : [],
+        };
+        this.dispatchEvent(new UmbChangeEvent());
+    }
+    #onChange(event) {
+        const target = event.target;
+        const selectedOptions = target.value;
+        if (this.value?.mode === 'custom') {
+            this.value = { mode: this.value.mode, timeZones: selectedOptions };
+        }
+        else {
+            this.value = { mode: this.value?.mode ?? 'all', timeZones: [] };
+        }
+        this.dispatchEvent(new UmbChangeEvent());
+    }
+    #inputTimeZoneRefChanged(input) {
+        if (this.#inputTimeZone) {
+            this.removeFormControlElement(this.#inputTimeZone);
+        }
+        this.#inputTimeZone = input;
+        if (this.#inputTimeZone) {
+            this.addFormControlElement(this.#inputTimeZone);
+        }
+    }
+    render() {
+        return html `
+			<uui-radio-group
+				required
+				?readonly=${this.readonly}
+				@input=${this.#onModeInput}
+				.value=${this.value?.mode ?? 'all'}>
+				${map(this._supportedModes, (mode) => html `<uui-radio
+							name="order"
+							label=${this.localize.term(`dateTimePicker_config_timeZones_${mode}`)}
+							value="${mode}"></uui-radio>`)}
+			</uui-radio-group>
+			<div class="timezone-picker" ?hidden=${this.value?.mode !== 'custom'}>
+				<umb-input-time-zone
+					.value=${this._selectedTimeZones}
+					?readonly=${this.readonly}
+					?required=${this.value?.mode === 'custom'}
+					@change=${this.#onChange}
+					${ref(this.#inputTimeZoneRefChanged)}>
+				</umb-input-time-zone>
+			</div>
+		`;
+    }
+    static { this.styles = [
+        css `
+			:host {
+				display: grid;
+				gap: var(--uui-size-space-3);
+			}
+
+			.timezone-picker {
+				display: flex;
+				flex-direction: row;
+				gap: var(--uui-size-space-6);
+			}
+
+			.timezone-picker[hidden] {
+				display: none;
+			}
+		`,
+    ]; }
+};
+__decorate([
+    property({ type: Boolean, reflect: true })
+], UmbPropertyEditorUITimeZonePickerElement.prototype, "readonly", void 0);
+__decorate([
+    property({ attribute: false })
+], UmbPropertyEditorUITimeZonePickerElement.prototype, "config", void 0);
+UmbPropertyEditorUITimeZonePickerElement = __decorate([
+    customElement('umb-property-editor-ui-time-zone-picker')
+], UmbPropertyEditorUITimeZonePickerElement);
+export { UmbPropertyEditorUITimeZonePickerElement };
+export default UmbPropertyEditorUITimeZonePickerElement;

package/dist-cms/packages/property-editors/umbraco-package.d.ts

@@ -1,7 +1,12 @@
 export declare const name = "Umbraco.Core.PropertyEditors";
-export declare const extensions: {
+export declare const extensions: ({
+    name: string;
+    alias: string;
+    type: string;
+    js: () => Promise<typeof import("./manifests.js")>;
+} | {
     name: string;
     alias: string;
     type: string;
     js: () => Promise<typeof import("./entry-point.js")>;
-}[];
+})[];