@umbraco-cms/backoffice 14.0.0--preview004-64d63c8e → 14.0.0--preview004-07058ebe

package/dist-cms/custom-elements.json

@@ -1205,15 +1205,15 @@
       "properties": [
         {
           "name": "imageElement",
-          "type": "HTMLImageElement"
+          "type": "HTMLImageElement | undefined"
         },
         {
           "name": "wrapperElement",
-          "type": "HTMLImageElement"
+          "type": "HTMLImageElement | undefined"
         },
         {
           "name": "focalPointElement",
-          "type": "HTMLImageElement"
+          "type": "HTMLImageElement | undefined"
         },
         {
           "name": "src",
@@ -1937,6 +1937,176 @@
         }
       ]
     },
+    {
+      "name": "umb-multiple-color-picker-input",
+      "path": "./../src/packages/core/components/multiple-color-picker-input/multiple-color-picker-input.element.ts",
+      "attributes": [
+        {
+          "name": "min",
+          "description": "This is a minimum amount of selected items in this input.",
+          "type": "number",
+          "default": "\"undefined\""
+        },
+        {
+          "name": "max",
+          "description": "This is a maximum amount of selected items in this input.",
+          "type": "number",
+          "default": "\"undefined\""
+        },
+        {
+          "name": "min-message",
+          "description": "Min validation message.",
+          "type": "boolean",
+          "default": "\"\""
+        },
+        {
+          "name": "maxMessage",
+          "description": "Max validation message.",
+          "type": "boolean",
+          "default": "\"\""
+        },
+        {
+          "name": "disabled",
+          "description": "Disables the input",
+          "type": "boolean",
+          "default": "\"false\""
+        },
+        {
+          "name": "readonly",
+          "description": "Makes the input readonly",
+          "type": "boolean",
+          "default": "\"false\""
+        },
+        {
+          "name": "showLabels",
+          "type": "boolean",
+          "default": "true"
+        },
+        {
+          "name": "items",
+          "type": "array"
+        }
+      ],
+      "properties": [
+        {
+          "name": "min",
+          "attribute": "min",
+          "description": "This is a minimum amount of selected items in this input.",
+          "type": "number",
+          "default": "\"undefined\""
+        },
+        {
+          "name": "max",
+          "attribute": "max",
+          "description": "This is a maximum amount of selected items in this input.",
+          "type": "number",
+          "default": "\"undefined\""
+        },
+        {
+          "name": "minMessage",
+          "attribute": "min-message",
+          "description": "Min validation message.",
+          "type": "boolean",
+          "default": "\"\""
+        },
+        {
+          "name": "maxMessage",
+          "attribute": "maxMessage",
+          "description": "Max validation message.",
+          "type": "boolean",
+          "default": "\"\""
+        },
+        {
+          "name": "disabled",
+          "attribute": "disabled",
+          "description": "Disables the input",
+          "type": "boolean",
+          "default": "\"false\""
+        },
+        {
+          "name": "readonly",
+          "attribute": "readonly",
+          "description": "Makes the input readonly",
+          "type": "boolean",
+          "default": "\"false\""
+        },
+        {
+          "name": "showLabels",
+          "attribute": "showLabels",
+          "type": "boolean",
+          "default": "true"
+        },
+        {
+          "name": "items",
+          "attribute": "items",
+          "type": "array"
+        },
+        {
+          "name": "styles",
+          "type": "array",
+          "default": "[null]"
+        }
+      ]
+    },
+    {
+      "name": "umb-multiple-color-picker-item-input",
+      "path": "./../src/packages/core/components/multiple-color-picker-input/multiple-color-picker-item-input.element.ts",
+      "attributes": [
+        {
+          "name": "disabled",
+          "description": "Disables the input",
+          "type": "boolean",
+          "default": "\"false\""
+        },
+        {
+          "name": "readonly",
+          "description": "Disables the input",
+          "type": "boolean",
+          "default": "\"false\""
+        },
+        {
+          "name": "label",
+          "type": "string | undefined"
+        },
+        {
+          "name": "showLabels",
+          "type": "boolean",
+          "default": "true"
+        }
+      ],
+      "properties": [
+        {
+          "name": "disabled",
+          "attribute": "disabled",
+          "description": "Disables the input",
+          "type": "boolean",
+          "default": "\"false\""
+        },
+        {
+          "name": "readonly",
+          "attribute": "readonly",
+          "description": "Disables the input",
+          "type": "boolean",
+          "default": "\"false\""
+        },
+        {
+          "name": "label",
+          "attribute": "label",
+          "type": "string | undefined"
+        },
+        {
+          "name": "showLabels",
+          "attribute": "showLabels",
+          "type": "boolean",
+          "default": "true"
+        },
+        {
+          "name": "styles",
+          "type": "array",
+          "default": "[null]"
+        }
+      ]
+    },
     {
       "name": "umb-input-multiple-text-string-item",
       "path": "./../src/packages/core/components/multiple-text-string-input/input-multiple-text-string-item.element.ts",
@@ -3624,6 +3794,33 @@
         }
       ]
     },
+    {
+      "name": "umb-property-editor-ui-color-editor",
+      "path": "./../src/packages/core/property-editor/uis/color-editor/property-editor-ui-color-editor.element.ts",
+      "attributes": [
+        {
+          "name": "value",
+          "type": "array",
+          "default": "[]"
+        }
+      ],
+      "properties": [
+        {
+          "name": "value",
+          "attribute": "value",
+          "type": "array",
+          "default": "[]"
+        },
+        {
+          "name": "config"
+        }
+      ],
+      "events": [
+        {
+          "name": "property-value-change"
+        }
+      ]
+    },
     {
       "name": "umb-property-editor-ui-color-picker",
       "path": "./../src/packages/core/property-editor/uis/color-picker/property-editor-ui-color-picker.element.ts",

package/dist-cms/packages/core/components/index.d.ts

@@ -31,3 +31,4 @@ export * from './tooltip-menu/index.js';
 export * from './variant-selector/index.js';
 export * from './popover-layout/index.js';
 export * from './multiple-text-string-input/index.js';
+export * from './multiple-color-picker-input/index.js';

package/dist-cms/packages/core/components/index.js

@@ -33,3 +33,4 @@ export * from './tooltip-menu/index.js';
 export * from './variant-selector/index.js';
 export * from './popover-layout/index.js';
 export * from './multiple-text-string-input/index.js';
+export * from './multiple-color-picker-input/index.js';

package/dist-cms/packages/core/components/input-image-cropper/image-cropper-focus-setter.element.d.ts

@@ -2,9 +2,9 @@ import { UmbImageCropperFocalPoint } from './index.js';
 import { LitElement, PropertyValueMap, nothing } from '../../../../external/lit/index.js';
 export declare class UmbImageCropperFocusSetterElement extends LitElement {
     #private;
-    imageElement: HTMLImageElement;
-    wrapperElement: HTMLImageElement;
-    focalPointElement: HTMLImageElement;
+    imageElement?: HTMLImageElement;
+    wrapperElement?: HTMLImageElement;
+    focalPointElement?: HTMLImageElement;
     src?: string;
     focalPoint: UmbImageCropperFocalPoint;
     connectedCallback(): void;

package/dist-cms/packages/core/components/input-image-cropper/image-cropper-focus-setter.element.js

@@ -35,7 +35,7 @@ let UmbImageCropperFocusSetterElement = class UmbImageCropperFocusSetterElement
     }
     updated(_changedProperties) {
         super.updated(_changedProperties);
-        if (_changedProperties.has('focalPoint')) {
+        if (_changedProperties.has('focalPoint') && this.focalPointElement) {
             this.focalPointElement.style.left = `calc(${this.focalPoint.left * 100}% - ${this.#DOT_RADIUS}px)`;
             this.focalPointElement.style.top = `calc(${this.focalPoint.top * 100}% - ${this.#DOT_RADIUS}px)`;
         }
@@ -43,21 +43,27 @@ let UmbImageCropperFocusSetterElement = class UmbImageCropperFocusSetterElement
     firstUpdated(_changedProperties) {
         super.firstUpdated(_changedProperties);
         this.style.setProperty('--dot-radius', `${this.#DOT_RADIUS}px`);
-        this.focalPointElement.style.left = `calc(${this.focalPoint.left * 100}% - ${this.#DOT_RADIUS}px)`;
-        this.focalPointElement.style.top = `calc(${this.focalPoint.top * 100}% - ${this.#DOT_RADIUS}px)`;
-        this.imageElement.onload = () => {
-            const imageAspectRatio = this.imageElement.naturalWidth / this.imageElement.naturalHeight;
-            if (imageAspectRatio > 1) {
-                this.imageElement.style.width = '100%';
-                this.wrapperElement.style.width = '100%';
-            }
-            else {
-                this.imageElement.style.height = '100%';
-                this.wrapperElement.style.height = '100%';
-            }
-            this.imageElement.style.aspectRatio = `${imageAspectRatio}`;
-            this.wrapperElement.style.aspectRatio = `${imageAspectRatio}`;
-        };
+        if (this.focalPointElement) {
+            this.focalPointElement.style.left = `calc(${this.focalPoint.left * 100}% - ${this.#DOT_RADIUS}px)`;
+            this.focalPointElement.style.top = `calc(${this.focalPoint.top * 100}% - ${this.#DOT_RADIUS}px)`;
+        }
+        if (this.imageElement) {
+            this.imageElement.onload = () => {
+                if (!this.imageElement || !this.wrapperElement)
+                    return;
+                const imageAspectRatio = this.imageElement.naturalWidth / this.imageElement.naturalHeight;
+                if (imageAspectRatio > 1) {
+                    this.imageElement.style.width = '100%';
+                    this.wrapperElement.style.width = '100%';
+                }
+                else {
+                    this.imageElement.style.height = '100%';
+                    this.wrapperElement.style.height = '100%';
+                }
+                this.imageElement.style.aspectRatio = `${imageAspectRatio}`;
+                this.wrapperElement.style.aspectRatio = `${imageAspectRatio}`;
+            };
+        }
     }
     async #addEventListeners() {
         await this.updateComplete; // Wait for the @query to be resolved
@@ -73,6 +79,8 @@ let UmbImageCropperFocusSetterElement = class UmbImageCropperFocusSetterElement
     #onDrag;
     #onSetFocalPoint(event) {
         event.preventDefault();
+        if (!this.focalPointElement || !this.imageElement)
+            return;
         const image = this.imageElement.getBoundingClientRect();
         const x = clamp(event.clientX - image.left, 0, image.width);
         const y = clamp(event.clientY - image.top, 0, image.height);

package/dist-cms/packages/core/components/input-image-cropper/input-image-cropper.element.js

@@ -87,8 +87,8 @@ let UmbInputImageCropperElement = class UmbInputImageCropperElement extends LitE
 						.focalPoint=${this.focalPoint}
 						.src=${this.src}></umb-image-cropper-focus-setter>
 					<div id="actions">
-						<uui-button>Remove files (NOT IMPLEMENTED YET)</uui-button>
-						<uui-button @click=${this.#onResetFocalPoint}>Reset focal point</uui-button>
+						<uui-button label="Remove files">Remove files (NOT IMPLEMENTED YET)</uui-button>
+						<uui-button label="Reset focal point" @click=${this.#onResetFocalPoint}>Reset focal point</uui-button>
 					</div> `;
     }
     #renderSide() {

package/dist-cms/packages/core/components/multiple-color-picker-input/index.d.ts

@@ -0,0 +1,2 @@
+export * from './multiple-color-picker-input.element.js';
+export * from './multiple-color-picker-item-input.element.js';

package/dist-cms/packages/core/components/multiple-color-picker-input/index.js

@@ -0,0 +1,2 @@
+export * from './multiple-color-picker-input.element.js';
+export * from './multiple-color-picker-item-input.element.js';

package/dist-cms/packages/core/components/multiple-color-picker-input/multiple-color-picker-input.element.d.ts

@@ -0,0 +1,65 @@
+import type { UmbSwatchDetails } from '../../../../shared/models/index.js';
+import { UmbLitElement } from '../../../../shared/lit-element/index.js';
+declare const UmbMultipleColorPickerInputElement_base: (new (...args: any[]) => import("../../../../external/uui/index.js").FormControlMixinInterface) & typeof UmbLitElement;
+/**
+ * @element umb-multiple-color-picker-input
+ */
+export declare class UmbMultipleColorPickerInputElement extends UmbMultipleColorPickerInputElement_base {
+    #private;
+    /**
+     * This is a minimum amount of selected items in this input.
+     * @type {number}
+     * @attr
+     * @default undefined
+     */
+    min?: number;
+    /**
+     * Min validation message.
+     * @type {boolean}
+     * @attr
+     * @default
+     */
+    minMessage: string;
+    /**
+     * This is a maximum amount of selected items in this input.
+     * @type {number}
+     * @attr
+     * @default undefined
+     */
+    max?: number;
+    /**
+     * Max validation message.
+     * @type {boolean}
+     * @attr
+     * @default
+     */
+    maxMessage: string;
+    /**
+     * Disables the input
+     * @type {boolean}
+     * @attr
+     * @default false
+     */
+    disabled: boolean;
+    /**
+     * Makes the input readonly
+     * @type {boolean}
+     * @attr
+     * @default false
+     */
+    readonly: boolean;
+    showLabels: boolean;
+    constructor();
+    private _items;
+    get items(): Array<UmbSwatchDetails>;
+    set items(items: Array<UmbSwatchDetails>);
+    protected getFormElement(): undefined;
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: import("@lit/reactive-element/css-tag.js").CSSResult[];
+}
+export default UmbMultipleColorPickerInputElement;
+declare global {
+    interface HTMLElementTagNameMap {
+        'umb-multiple-color-picker-input': UmbMultipleColorPickerInputElement;
+    }
+}

package/dist-cms/packages/core/components/multiple-color-picker-input/multiple-color-picker-input.element.js

@@ -0,0 +1,207 @@
+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 { UMB_DATA_TYPE_WORKSPACE_CONTEXT } from '../../data-type/workspace/data-type-workspace.context.js';
+import { css, html, nothing, repeat, customElement, property, state, ifDefined, } from '../../../../external/lit/index.js';
+import { FormControlMixin } from '../../../../external/uui/index.js';
+import { UmbChangeEvent } from '../../event/index.js';
+import { UmbLitElement } from '../../../../shared/lit-element/index.js';
+import { UmbSorterController } from '../../sorter/index.js';
+const SORTER_CONFIG = {
+    compareElementToModel: (element, model) => {
+        return element.getAttribute('data-sort-entry-id') === model.value;
+    },
+    querySelectModelToElement: (container, modelEntry) => {
+        return container.querySelector('data-sort-entry-id=[' + modelEntry.value + ']');
+    },
+    identifier: 'Umb.SorterIdentifier.ColorEditor',
+    itemSelector: 'umb-multiple-color-picker-item-input',
+    containerSelector: '#sorter-wrapper',
+};
+/**
+ * @element umb-multiple-color-picker-input
+ */
+let UmbMultipleColorPickerInputElement = class UmbMultipleColorPickerInputElement extends FormControlMixin(UmbLitElement) {
+    #prevalueSorter;
+    constructor() {
+        super();
+        this.#prevalueSorter = new UmbSorterController(this, {
+            ...SORTER_CONFIG,
+            performItemInsert: (args) => {
+                const frozenArray = [...this.items];
+                const indexToMove = frozenArray.findIndex((x) => x.value === args.item.value);
+                frozenArray.splice(indexToMove, 1);
+                frozenArray.splice(args.newIndex, 0, args.item);
+                this.items = frozenArray;
+                this.dispatchEvent(new UmbChangeEvent());
+                return true;
+            },
+            performItemRemove: (args) => {
+                return true;
+            },
+        });
+        /**
+         * Min validation message.
+         * @type {boolean}
+         * @attr
+         * @default
+         */
+        this.minMessage = 'This field need more items';
+        /**
+         * Max validation message.
+         * @type {boolean}
+         * @attr
+         * @default
+         */
+        this.maxMessage = 'This field exceeds the allowed amount of items';
+        /**
+         * Disables the input
+         * @type {boolean}
+         * @attr
+         * @default false
+         */
+        this.disabled = false;
+        /**
+         * Makes the input readonly
+         * @type {boolean}
+         * @attr
+         * @default false
+         */
+        this.readonly = false;
+        this.showLabels = true;
+        this._items = [];
+        this.consumeContext(UMB_DATA_TYPE_WORKSPACE_CONTEXT, (instance) => {
+            const workspace = instance;
+            this.observe(workspace.data, (data) => {
+                const property = data?.values.find((setting) => setting.alias === 'useLabel');
+                if (property)
+                    this.showLabels = property.value;
+            });
+        });
+        this.addValidator('rangeUnderflow', () => this.minMessage, () => !!this.min && this._items.length < this.min);
+        this.addValidator('rangeOverflow', () => this.maxMessage, () => !!this.max && this._items.length > this.max);
+    }
+    get items() {
+        return this._items;
+    }
+    set items(items) {
+        this._items = items ?? [];
+        this.#prevalueSorter.setModel(this.items);
+    }
+    #onAdd() {
+        this._items = [...this._items, { value: '', label: '' }];
+        this.pristine = false;
+        this.dispatchEvent(new UmbChangeEvent());
+        this.#focusNewItem();
+    }
+    #onChange(event, currentIndex) {
+        event.stopPropagation();
+        const target = event.currentTarget;
+        const value = target.value;
+        const label = target.label;
+        this.items = this._items.map((item, index) => (index === currentIndex ? { value, label } : item));
+        this.dispatchEvent(new UmbChangeEvent());
+    }
+    async #focusNewItem() {
+        await this.updateComplete;
+        const items = this.shadowRoot?.querySelectorAll('umb-multiple-color-picker-item-input');
+        const newItem = items[items.length - 1];
+        newItem.focus();
+    }
+    #deleteItem(event, itemIndex) {
+        event.stopPropagation();
+        this._items = this._items.filter((item, index) => index !== itemIndex);
+        this.pristine = false;
+        this.dispatchEvent(new UmbChangeEvent());
+    }
+    getFormElement() {
+        return undefined;
+    }
+    render() {
+        return html `<div id="sorter-wrapper">${this.#renderItems()}</div>
+			${this.#renderAddButton()} `;
+    }
+    #renderItems() {
+        return html `
+			${repeat(this._items, (item) => item.value, (item, index) => html ` <umb-multiple-color-picker-item-input
+						?showLabels=${this.showLabels}
+						value=${item.value}
+						data-sort-entry-id=${item.value}
+						label=${ifDefined(item.label)}
+						name="item-${index}"
+						@change=${(event) => this.#onChange(event, index)}
+						@delete="${(event) => this.#deleteItem(event, index)}"
+						?disabled=${this.disabled}
+						?readonly=${this.readonly}
+						required
+						required-message="Item ${index + 1} is missing a value"></umb-multiple-color-picker-item-input>`)}
+		`;
+    }
+    #renderAddButton() {
+        return html `
+			${this.disabled || this.readonly
+            ? nothing
+            : html `<uui-button
+						id="action"
+						label=${this.localize.term('general_add')}
+						look="placeholder"
+						color="default"
+						@click="${this.#onAdd}"
+						?disabled=${this.disabled}></uui-button>`}
+		`;
+    }
+    static { this.styles = [
+        css `
+			#action {
+				display: block;
+			}
+
+			.--umb-sorter-placeholder {
+				position: relative;
+				visibility: hidden;
+			}
+			.--umb-sorter-placeholder::after {
+				content: '';
+				position: absolute;
+				inset: 0px;
+				border-radius: var(--uui-border-radius);
+				border: 1px dashed var(--uui-color-divider-emphasis);
+			}
+		`,
+    ]; }
+};
+__decorate([
+    property({ type: Number })
+], UmbMultipleColorPickerInputElement.prototype, "min", void 0);
+__decorate([
+    property({ type: String, attribute: 'min-message' })
+], UmbMultipleColorPickerInputElement.prototype, "minMessage", void 0);
+__decorate([
+    property({ type: Number })
+], UmbMultipleColorPickerInputElement.prototype, "max", void 0);
+__decorate([
+    property({ type: String, attribute: 'min-message' })
+], UmbMultipleColorPickerInputElement.prototype, "maxMessage", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], UmbMultipleColorPickerInputElement.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], UmbMultipleColorPickerInputElement.prototype, "readonly", void 0);
+__decorate([
+    property({ type: Boolean })
+], UmbMultipleColorPickerInputElement.prototype, "showLabels", void 0);
+__decorate([
+    state()
+], UmbMultipleColorPickerInputElement.prototype, "_items", void 0);
+__decorate([
+    property({ type: Array })
+], UmbMultipleColorPickerInputElement.prototype, "items", null);
+UmbMultipleColorPickerInputElement = __decorate([
+    customElement('umb-multiple-color-picker-input')
+], UmbMultipleColorPickerInputElement);
+export { UmbMultipleColorPickerInputElement };
+export default UmbMultipleColorPickerInputElement;

package/dist-cms/packages/core/components/multiple-color-picker-input/multiple-color-picker-item-input.element.d.ts

@@ -0,0 +1,39 @@
+import { UUIColorPickerElement, UUIInputElement } from '../../../../external/uui/index.js';
+import { UmbLitElement } from '../../../../shared/lit-element/index.js';
+declare const UmbMultipleColorPickerItemInputElement_base: (new (...args: any[]) => import("../../../../external/uui/index.js").FormControlMixinInterface) & typeof UmbLitElement;
+/**
+ * @element umb-multiple-color-picker-item-input
+ */
+export declare class UmbMultipleColorPickerItemInputElement extends UmbMultipleColorPickerItemInputElement_base {
+    #private;
+    /**
+     * Disables the input
+     * @type {boolean}
+     * @attr
+     * @default false
+     */
+    disabled: boolean;
+    /**
+     * Disables the input
+     * @type {boolean}
+     * @attr
+     * @default false
+     */
+    readonly: boolean;
+    label?: string;
+    protected _input?: UUIInputElement;
+    protected _colorPicker: UUIColorPickerElement;
+    private _modalContext?;
+    showLabels: boolean;
+    constructor();
+    focus(): Promise<void>;
+    protected getFormElement(): undefined;
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: import("@lit/reactive-element/css-tag").CSSResult[];
+}
+export default UmbMultipleColorPickerItemInputElement;
+declare global {
+    interface HTMLElementTagNameMap {
+        'umb-multiple-color-picker-item-input': UmbMultipleColorPickerItemInputElement;
+    }
+}