@umbraco-cms/backoffice 14.0.0--preview004-07058ebe → 14.0.0--preview004-c2e8b331

package/dist-cms/packages/core/property-editor/uis/collection-view/config/layout-configuration/property-editor-ui-collection-view-layout-configuration.element.js

@@ -4,7 +4,10 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { html, customElement, property } from '../../../../../../../external/lit/index.js';
+import { html, customElement, property, repeat, css, ifDefined } from '../../../../../../../external/lit/index.js';
+import { extractUmbColorVariable } from '../../../../../../../shared/resources/index.js';
+import { UMB_ICON_PICKER_MODAL, UMB_MODAL_MANAGER_CONTEXT_TOKEN, } from '../../../../../modal/index.js';
+import { UmbPropertyValueChangeEvent, } from '../../../../index.js';
 import { UmbTextStyles } from '../../../../../../../shared/style/index.js';
 import { UmbLitElement } from '../../../../../../../shared/lit-element/index.js';
 /**
@@ -12,16 +15,146 @@ import { UmbLitElement } from '../../../../../../../shared/lit-element/index.js'
  */
 let UmbPropertyEditorUICollectionViewLayoutConfigurationElement = class UmbPropertyEditorUICollectionViewLayoutConfigurationElement extends UmbLitElement {
     constructor() {
-        super(...arguments);
-        this.value = '';
+        super();
+        this.value = [];
+        this.consumeContext(UMB_MODAL_MANAGER_CONTEXT_TOKEN, (instance) => {
+            this._modalContext = instance;
+        });
+    }
+    #onAdd() {
+        this.value = [...this.value, { isSystem: false, icon: 'icon-stop', selected: true }];
+        this.dispatchEvent(new UmbPropertyValueChangeEvent());
+    }
+    #onRemove(unique) {
+        const values = [...this.value];
+        values.splice(unique, 1);
+        this.value = values;
+        this.dispatchEvent(new UmbPropertyValueChangeEvent());
+    }
+    #onChangePath(e, index) {
+        const values = [...this.value];
+        values[index] = { ...values[index], path: e.target.value };
+        this.value = values;
+        this.dispatchEvent(new UmbPropertyValueChangeEvent());
+    }
+    #onChangeName(e, index) {
+        const values = [...this.value];
+        values[index] = { ...values[index], name: e.target.value };
+        this.value = values;
+        this.dispatchEvent(new UmbPropertyValueChangeEvent());
+    }
+    #onChangeSelected(e, index) {
+        const values = [...this.value];
+        values[index] = { ...values[index], selected: e.target.checked };
+        this.value = values;
+        this.dispatchEvent(new UmbPropertyValueChangeEvent());
+    }
+    async #onIconChange(index) {
+        const icon = this.#iconReader(this.value[index].icon ?? '');
+        // TODO: send icon data to modal
+        const modalContext = this._modalContext?.open(UMB_ICON_PICKER_MODAL);
+        const picked = await modalContext?.onSubmit();
+        if (!picked)
+            return;
+        const values = [...this.value];
+        values[index] = { ...values[index], icon: `${picked.icon} color-${picked.color}` };
+        this.value = values;
+        this.dispatchEvent(new UmbPropertyValueChangeEvent());
     }
     render() {
-        return html `<div>umb-property-editor-ui-collection-view-layout-configuration</div>`;
+        return html `<div id="layout-wrapper">
+				${repeat(this.value, (layout, index) => '' + layout.name + layout.icon, (layout, index) => html ` <div class="layout-item">
+							<uui-icon name="icon-navigation"></uui-icon> ${layout.isSystem
+            ? this.renderSystemFieldRow(layout, index)
+            : this.renderCustomFieldRow(layout, index)}
+						</div>`)}
+			</div>
+			<uui-button
+				id="add"
+				label=${this.localize.term('general_add')}
+				look="placeholder"
+				@click=${this.#onAdd}></uui-button>`;
+    }
+    #iconReader(iconString) {
+        if (!iconString)
+            return { icon: '' };
+        const parts = iconString.split(' ');
+        if (parts.length === 2) {
+            const [icon, color] = parts;
+            const varName = extractUmbColorVariable(color.replace('color-', ''));
+            return { icon, color: varName };
+        }
+        else {
+            const [icon] = parts;
+            return { icon };
+        }
+    }
+    renderSystemFieldRow(layout, index) {
+        const icon = this.#iconReader(layout.icon ?? '');
+        return html ` <uui-button compact disabled label="Icon" look="outline">
+				<uui-icon name=${ifDefined(icon.icon)}></uui-icon>
+			</uui-button>
+			${index}
+			<span><strong>${ifDefined(layout.name)}</strong> <small>(system field)</small></span>
+			<uui-checkbox
+				?checked=${layout.selected}
+				label="Show"
+				@change=${(e) => this.#onChangeSelected(e, index)}>
+			</uui-checkbox>`;
+    }
+    renderCustomFieldRow(layout, index) {
+        const icon = this.#iconReader(layout.icon ?? '');
+        return html `<uui-button compact look="outline" label="pick icon" @click=${() => this.#onIconChange(index)}>
+				${icon.color
+            ? html `<uui-icon name=${icon.icon} style="color:var(${icon.color})"></uui-icon>`
+            : html `<uui-icon name=${icon.icon}></uui-icon>`}
+			</uui-button>
+			${index}
+			<uui-input
+				label="name"
+				value=${ifDefined(layout.name)}
+				placeholder="Name..."
+				@change=${(e) => this.#onChangeName(e, index)}></uui-input>
+			<uui-input
+				label="path"
+				value=${ifDefined(layout.path)}
+				placeholder="Layout path..."
+				@change=${(e) => this.#onChangePath(e, index)}></uui-input>
+			<uui-button
+				label=${this.localize.term('actions_remove')}
+				look="secondary"
+				@click=${() => this.#onRemove(index)}></uui-button>`;
     }
-    static { this.styles = [UmbTextStyles]; }
+    static { this.styles = [
+        UmbTextStyles,
+        css `
+			#layout-wrapper {
+				display: flex;
+				flex-direction: column;
+				gap: 1px;
+				margin-bottom: var(--uui-size-3);
+			}
+
+			.layout-item {
+				background-color: var(--uui-color-surface-alt);
+				display: flex;
+				align-items: center;
+				gap: var(--uui-size-6);
+				padding: var(--uui-size-3) var(--uui-size-6);
+			}
+
+			.layout-item > :last-child {
+				margin-left: auto;
+			}
+
+			#add {
+				width: 100%;
+			}
+		`,
+    ]; }
 };
 __decorate([
-    property()
+    property({ type: Array })
 ], UmbPropertyEditorUICollectionViewLayoutConfigurationElement.prototype, "value", void 0);
 __decorate([
     property({ type: Object, attribute: false })

package/dist-cms/packages/core/property-editor/uis/collection-view/config/order-by/property-editor-ui-collection-view-order-by.element.d.ts

@@ -5,7 +5,11 @@ import { UmbLitElement } from '../../../../../../../shared/lit-element/index.js'
  * @element umb-property-editor-ui-collection-view-order-by
  */
 export declare class UmbPropertyEditorUICollectionViewOrderByElement extends UmbLitElement implements UmbPropertyEditorUiElement {
-    value: string;
+    #private;
+    private _value;
+    set value(v: string);
+    get value(): string;
+    _options: Array<Option>;
     config?: UmbPropertyEditorConfigCollection;
     render(): import("lit-html").TemplateResult<1>;
     static styles: import("@lit/reactive-element/css-tag").CSSResult[];

package/dist-cms/packages/core/property-editor/uis/collection-view/config/order-by/property-editor-ui-collection-view-order-by.element.js

@@ -4,7 +4,8 @@ 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 } from '../../../../../../../external/lit/index.js';
+import { html, customElement, property, state } from '../../../../../../../external/lit/index.js';
+import { UmbPropertyValueChangeEvent, } from '../../../../index.js';
 import { UmbTextStyles } from '../../../../../../../shared/style/index.js';
 import { UmbLitElement } from '../../../../../../../shared/lit-element/index.js';
 /**
@@ -13,16 +14,35 @@ import { UmbLitElement } from '../../../../../../../shared/lit-element/index.js'
 let UmbPropertyEditorUICollectionViewOrderByElement = class UmbPropertyEditorUICollectionViewOrderByElement extends UmbLitElement {
     constructor() {
         super(...arguments);
-        this.value = '';
+        this._value = '';
+        this._options = [
+            { value: 'name', name: 'Name' },
+            { value: 'updateDate', name: 'Last edited' },
+            { value: 'owner', name: 'Created by' },
+        ];
+    }
+    set value(v) {
+        this._value = v;
+        this._options = this._options.map((option) => (option.value === v ? { ...option, selected: true } : option));
+    }
+    get value() {
+        return this._value;
+    }
+    #onChange(e) {
+        this.value = e.target.value;
+        this.dispatchEvent(new UmbPropertyValueChangeEvent());
     }
     render() {
-        return html `<div>umb-property-editor-ui-collection-view-order-by</div>`;
+        return html `<uui-select label="select" .options=${this._options} @change=${this.#onChange}></uui-select>`;
     }
     static { this.styles = [UmbTextStyles]; }
 };
 __decorate([
     property()
-], UmbPropertyEditorUICollectionViewOrderByElement.prototype, "value", void 0);
+], UmbPropertyEditorUICollectionViewOrderByElement.prototype, "value", null);
+__decorate([
+    state()
+], UmbPropertyEditorUICollectionViewOrderByElement.prototype, "_options", void 0);
 __decorate([
     property({ type: Object, attribute: false })
 ], UmbPropertyEditorUICollectionViewOrderByElement.prototype, "config", void 0);

package/dist-cms/packages/core/property-editor/uis/dropdown/manifests.js

@@ -5,7 +5,7 @@ export const manifest = {
     js: () => import('./property-editor-ui-dropdown.element.js'),
     meta: {
         label: 'Dropdown',
-        propertyEditorSchemaAlias: 'Umbraco.Dropdown',
+        propertyEditorSchemaAlias: 'Umbraco.DropDown.Flexible',
         icon: 'icon-time',
         group: 'pickers',
         settings: {

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

@@ -5,8 +5,12 @@ import type { UmbPropertyEditorConfigCollection } from '../../index.js';
  * @element umb-property-editor-ui-icon-picker
  */
 export declare class UmbPropertyEditorUIIconPickerElement extends UmbLitElement implements UmbPropertyEditorUiElement {
-    value: string;
-    config?: UmbPropertyEditorConfigCollection;
+    private _value;
+    set value(v: string);
+    get value(): string;
+    private _icon;
+    private _color;
+    set config(config: UmbPropertyEditorConfigCollection | undefined);
     private _modalContext?;
     constructor();
     private _openModal;

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

@@ -4,34 +4,68 @@ 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 } from '../../../../../external/lit/index.js';
+import { html, customElement, property, state } from '../../../../../external/lit/index.js';
 import { UmbTextStyles } from '../../../../../shared/style/index.js';
 import { UMB_MODAL_MANAGER_CONTEXT_TOKEN, UMB_ICON_PICKER_MODAL, } from '../../../modal/index.js';
 import { UmbLitElement } from '../../../../../shared/lit-element/index.js';
+import { extractUmbColorVariable } from '../../../../../shared/resources/index.js';
 /**
  * @element umb-property-editor-ui-icon-picker
  */
 let UmbPropertyEditorUIIconPickerElement = class UmbPropertyEditorUIIconPickerElement extends UmbLitElement {
+    set value(v) {
+        this._value = v;
+        const parts = v.split(' ');
+        if (parts.length === 2) {
+            this._icon = parts[0];
+            this._color = parts[1].replace('color-', '');
+        }
+        else {
+            this._icon = v;
+            this._color = '';
+        }
+    }
+    get value() {
+        return this._value;
+    }
+    set config(config) {
+        if (!config)
+            return;
+        console.log('config', config);
+    }
     constructor() {
         super();
-        this.value = '';
+        this._value = '';
+        this._icon = '';
+        this._color = '';
         this.consumeContext(UMB_MODAL_MANAGER_CONTEXT_TOKEN, (instance) => {
             this._modalContext = instance;
         });
     }
-    _openModal() {
-        // TODO: Modal should know the current selected one, and bring back the newly selected one.
-        this._modalContext?.open(UMB_ICON_PICKER_MODAL);
+    async _openModal() {
+        const modalContext = this._modalContext?.open(UMB_ICON_PICKER_MODAL);
+        const data = await modalContext?.onSubmit();
+        if (!data)
+            return;
+        if (data.color) {
+            this.value = `${data.icon} color-${data.color}`;
+        }
+        else {
+            this.value = data.icon;
+        }
+        this.dispatchEvent(new CustomEvent('property-value-change'));
     }
-    // TODO: We should show the current picked icon.
     render() {
         return html `
 			<uui-button
-				label="open-icon-picker"
+				compact
+				label=${this.localize.term('defaultdialogs_selectIcon')}
 				look="secondary"
 				@click=${this._openModal}
 				style="margin-right: var(--uui-size-space-3)">
-				Pick an icon
+				${this._color
+            ? html ` <uui-icon name="${this._icon}" style="color:var(${extractUmbColorVariable(this._color)})"></uui-icon>`
+            : html ` <uui-icon name="${this._icon}"></uui-icon>`}
 			</uui-button>
 		`;
     }
@@ -39,10 +73,13 @@ let UmbPropertyEditorUIIconPickerElement = class UmbPropertyEditorUIIconPickerEl
 };
 __decorate([
     property()
-], UmbPropertyEditorUIIconPickerElement.prototype, "value", void 0);
+], UmbPropertyEditorUIIconPickerElement.prototype, "value", null);
+__decorate([
+    state()
+], UmbPropertyEditorUIIconPickerElement.prototype, "_icon", void 0);
 __decorate([
-    property({ attribute: false })
-], UmbPropertyEditorUIIconPickerElement.prototype, "config", void 0);
+    state()
+], UmbPropertyEditorUIIconPickerElement.prototype, "_color", void 0);
 UmbPropertyEditorUIIconPickerElement = __decorate([
     customElement('umb-property-editor-ui-icon-picker')
 ], UmbPropertyEditorUIIconPickerElement);

package/dist-cms/packages/core/property-editor/uis/image-crops-configuration/property-editor-ui-image-crops-configuration.element.js

@@ -101,7 +101,7 @@ let UmbPropertyEditorUIImageCropsConfigurationElement = class UmbPropertyEditorU
 							<span class="append" slot="append">px</span>
 						</uui-input>
 					</div>
-					${this.#renderActions()}
+					<div class="action-wrapper">${this.#renderActions()}</div>
 				</form>
 			</uui-form>
 			<div class="crops">
@@ -123,7 +123,6 @@ let UmbPropertyEditorUIImageCropsConfigurationElement = class UmbPropertyEditorU
         UmbTextStyles,
         css `
 			:host {
-				max-width: 500px;
 				display: block;
 			}
 			.crops {
@@ -171,6 +170,10 @@ let UmbPropertyEditorUIImageCropsConfigurationElement = class UmbPropertyEditorU
 				display: flex;
 				align-items: center;
 			}
+			.action-wrapper {
+				display: flex;
+				align-items: flex-end;
+			}
 		`,
     ]; }
 };

package/dist-cms/packages/core/property-editor/uis/order-direction/property-editor-ui-order-direction.element.d.ts

@@ -5,6 +5,7 @@ import { UmbPropertyEditorConfigCollection } from '../../index.js';
  * @element umb-property-editor-ui-order-direction
  */
 export declare class UmbPropertyEditorUIOrderDirectionElement extends UmbLitElement implements UmbPropertyEditorUiElement {
+    #private;
     value: string;
     config?: UmbPropertyEditorConfigCollection;
     render(): import("lit-html").TemplateResult<1>;

package/dist-cms/packages/core/property-editor/uis/order-direction/property-editor-ui-order-direction.element.js

@@ -4,21 +4,38 @@ 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 } from '../../../../../external/lit/index.js';
+import { html, customElement, property, css } from '../../../../../external/lit/index.js';
 import { UmbTextStyles } from '../../../../../shared/style/index.js';
 import { UmbLitElement } from '../../../../../shared/lit-element/index.js';
+import { UmbPropertyValueChangeEvent, } from '../../index.js';
 /**
  * @element umb-property-editor-ui-order-direction
  */
 let UmbPropertyEditorUIOrderDirectionElement = class UmbPropertyEditorUIOrderDirectionElement extends UmbLitElement {
     constructor() {
         super(...arguments);
-        this.value = '';
+        this.value = 'asc';
+    }
+    #onInput(e) {
+        this.value = e.target.value;
+        this.dispatchEvent(new UmbPropertyValueChangeEvent());
     }
     render() {
-        return html `<div>umb-property-editor-ui-order-direction</div>`;
+        return html `<uui-radio-group @input=${this.#onInput} value=${this.value}>
+			<uui-radio name="order" label="Ascending [a-z]" value="asc"></uui-radio>
+			<uui-radio name="order" label="Descending [z-a]" value="desc"></uui-radio>
+		</uui-radio-group>`;
     }
-    static { this.styles = [UmbTextStyles]; }
+    static { this.styles = [
+        UmbTextStyles,
+        css `
+			uui-radio-group {
+				display: flex;
+				flex-direction: row;
+				gap: var(--uui-size-6);
+			}
+		`,
+    ]; }
 };
 __decorate([
     property()

package/dist-cms/packages/core/property-editor/uis/value-type/property-editor-ui-value-type.element.d.ts

@@ -1,3 +1,4 @@
+import type { UUISelectElement } from '../../../../../external/uui/index.js';
 import { UmbPropertyEditorUiElement } from '../../../extension-registry/index.js';
 import { UmbLitElement } from '../../../../../shared/lit-element/index.js';
 import type { UmbPropertyEditorConfigCollection } from '../../index.js';
@@ -9,6 +10,7 @@ export declare class UmbPropertyEditorUIValueTypeElement extends UmbLitElement i
     private _value;
     get value(): string | undefined;
     set value(value: string | undefined);
+    selectEl?: UUISelectElement;
     private _options;
     config?: UmbPropertyEditorConfigCollection;
     render(): import("lit-html").TemplateResult<1>;

package/dist-cms/packages/core/property-editor/uis/value-type/property-editor-ui-value-type.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 } from '../../../../../external/lit/index.js';
+import { html, customElement, property, state, query } from '../../../../../external/lit/index.js';
 import { UmbTextStyles } from '../../../../../shared/style/index.js';
 import { UmbLitElement } from '../../../../../shared/lit-element/index.js';
 /**
@@ -30,6 +30,8 @@ let UmbPropertyEditorUIValueTypeElement = class UmbPropertyEditorUIValueTypeElem
     set value(value) {
         this._value = value;
         const selected = this._options.filter((option) => {
+            if (this.selectEl && option.value === this.value)
+                this.selectEl.value = this.value;
             return (option.selected = option.value === this.value);
         });
         if (selected.length === 0) {
@@ -51,6 +53,9 @@ let UmbPropertyEditorUIValueTypeElement = class UmbPropertyEditorUIValueTypeElem
 __decorate([
     property()
 ], UmbPropertyEditorUIValueTypeElement.prototype, "value", null);
+__decorate([
+    query('uui-select')
+], UmbPropertyEditorUIValueTypeElement.prototype, "selectEl", void 0);
 __decorate([
     state()
 ], UmbPropertyEditorUIValueTypeElement.prototype, "_options", void 0);

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

@@ -16,18 +16,6 @@ export const manifest = {
                     description: 'Opens the node in a dialog',
                     propertyEditorUiAlias: 'Umb.PropertyEditorUi.Toggle',
                 },
-                {
-                    alias: 'validationLimit',
-                    label: 'Amount of Documents',
-                    description: 'Require a certain amount of documents',
-                    propertyEditorUiAlias: 'Umb.PropertyEditorUi.NumberRange',
-                },
-                {
-                    alias: 'ignoreUserStartNodes',
-                    label: 'Ignore User Start Nodes',
-                    description: 'Selecting this option allows a user to choose nodes that they normally dont have access to',
-                    propertyEditorUiAlias: 'Umb.PropertyEditorUi.Toggle',
-                },
             ],
         },
     },

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

@@ -1,3 +1,2 @@
 import { manifest as documentPickerUI } from './document-picker/manifests.js';
-import { manifest as contentPicker } from './Umbraco.ContentPicker.js';
-export const manifests = [documentPickerUI, contentPicker];
+export const manifests = [documentPickerUI];

package/dist-cms/packages/settings/languages/app-language-select/app-language-select.element.js

@@ -70,7 +70,7 @@ let UmbAppLanguageSelectElement = class UmbAppLanguageSelectElement extends UmbL
 		</button>`;
     }
     #renderContent() {
-        return html ` <uui-popover-container id="dropdown-popover" @toggle=${this.#onPopoverToggle}>
+        return html ` <uui-popover-container id="dropdown-popover" @beforetoggle=${this.#onPopoverToggle}>
 			<umb-popover-layout>
 				${repeat(this._languages, (language) => language.isoCode, (language) => html `
 						<uui-menu-item

package/dist-cms/shared/resources/extractUmbColorVariable.function.d.ts

@@ -0,0 +1 @@
+export declare function extractUmbColorVariable(colorAlias: string): string | undefined;

package/dist-cms/shared/resources/extractUmbColorVariable.function.js

@@ -0,0 +1,15 @@
+const umbracoColors = [
+    { alias: 'text', varName: '--uui-color-text' },
+    { alias: 'yellow', varName: '--uui-palette-sunglow' },
+    { alias: 'pink', varName: '--uui-palette-spanish-pink' },
+    { alias: 'dark', varName: '--uui-palette-gunmetal' },
+    { alias: 'darkblue', varName: '--uui-palette-space-cadet' },
+    { alias: 'blue', varName: '--uui-palette-violet-blue' },
+    { alias: 'red', varName: '--uui-palette-maroon-flush' },
+    { alias: 'green', varName: '--uui-palette-jungle-green' },
+    { alias: 'brown', varName: '--uui-palette-chamoisee' },
+];
+export function extractUmbColorVariable(colorAlias) {
+    const found = umbracoColors.find((umbColor) => umbColor.alias === colorAlias);
+    return found?.varName;
+}

package/dist-cms/shared/resources/index.d.ts

@@ -1,3 +1,4 @@
 export * from './resource.controller.js';
 export * from './tryExecute.function.js';
 export * from './tryExecuteAndNotify.function.js';
+export * from './extractUmbColorVariable.function.js';

package/dist-cms/shared/resources/index.js

@@ -1,3 +1,4 @@
 export * from './resource.controller.js';
 export * from './tryExecute.function.js';
 export * from './tryExecuteAndNotify.function.js';
+export * from './extractUmbColorVariable.function.js';