@umbraco-cms/backoffice 14.0.0-rc3 → 14.0.0-rc4

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

@@ -4,10 +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 { UUIFormControlMixin } from '../../../../external/uui/index.js';
-import { UmbLitElement } from '../../lit-element/index.js';
+import { customElement, html, property } from '../../../../external/lit/index.js';
 import { UmbChangeEvent } from '../../event/index.js';
+import { UmbLitElement } from '../../lit-element/index.js';
+import { UUIFormControlMixin } from '../../../../external/uui/index.js';
 let UmbInputSliderElement = class UmbInputSliderElement extends UUIFormControlMixin(UmbLitElement, '') {
     constructor() {
         super(...arguments);
@@ -21,29 +21,35 @@ let UmbInputSliderElement = class UmbInputSliderElement extends UUIFormControlMi
     getFormElement() {
         return undefined;
     }
-    #onChange(e) {
-        e.stopPropagation();
-        this.value = e.target.value;
+    #onChange(event) {
+        event.stopPropagation();
+        this.value = event.target.value;
         this.dispatchEvent(new UmbChangeEvent());
     }
     render() {
         return this.enableRange ? this.#renderRangeSlider() : this.#renderSlider();
     }
     #renderSlider() {
-        return html `<uui-slider
-			.min="${this.min}"
-			.max="${this.max}"
-			.step="${this.step}"
-			.value="${this.valueLow.toString()}"
-			@change="${this.#onChange}"></uui-slider>`;
+        return html `
+			<uui-slider
+				.min=${this.min}
+				.max=${this.max}
+				.step=${this.step}
+				.value=${this.valueLow.toString()}
+				@change=${this.#onChange}>
+			</uui-slider>
+		`;
     }
     #renderRangeSlider() {
-        return html `<uui-range-slider
-			.min="${this.min}"
-			.max="${this.max}"
-			.step="${this.step}"
-			.value="${this.valueLow},${this.valueHigh}"
-			@change="${this.#onChange}"></uui-range-slider>`;
+        return html `
+			<uui-range-slider
+				.min=${this.min}
+				.max=${this.max}
+				.step=${this.step}
+				.value="${this.valueLow},${this.valueHigh}"
+				@change=${this.#onChange}>
+			</uui-range-slider>
+		`;
     }
 };
 __decorate([

package/dist-cms/packages/core/components/input-upload-field/input-upload-field-file.element.js

@@ -9,7 +9,6 @@ import { html, customElement, property, state, css } from '../../../../external/
 import { UmbLitElement } from '../../lit-element/index.js';
 let UmbInputUploadFieldFileElement = class UmbInputUploadFieldFileElement extends UmbLitElement {
     #serverUrl;
-    #serverUrlPromise;
     /**
      *
      */
@@ -19,15 +18,15 @@ let UmbInputUploadFieldFileElement = class UmbInputUploadFieldFileElement extend
         this.extension = '';
         this.label = '';
         this.#serverUrl = '';
-        this.#serverUrlPromise = this.consumeContext(UMB_APP_CONTEXT, (instance) => {
+        this.consumeContext(UMB_APP_CONTEXT, (instance) => {
             this.#serverUrl = instance.getServerUrl();
         }).asPromise();
     }
     updated(_changedProperties) {
         super.updated(_changedProperties);
-        if (_changedProperties.has('file')) {
-            this.extension = this.file?.name.split('.').pop() || '';
-            this.label = this.file?.name || 'loading...';
+        if (_changedProperties.has('file') && this.file) {
+            this.extension = this.#getExtensionFromMime(this.file.type) ?? '';
+            this.label = this.file.name || 'loading...';
         }
         if (_changedProperties.has('path')) {
             if (this.#serverUrl) {
@@ -38,9 +37,23 @@ let UmbInputUploadFieldFileElement = class UmbInputUploadFieldFileElement extend
             }
         }
     }
+    #getExtensionFromMime(mime) {
+        //TODO Temporary solution.
+        if (!mime)
+            return ''; //folders
+        const extension = mime.split('/')[1];
+        switch (extension) {
+            case 'svg+xml':
+                return 'svg';
+            default:
+                return extension;
+        }
+    }
     #renderLabel() {
-        if (this.path)
-            return html `<a id="label" href=${this.path}>${this.label}</a>`;
+        if (this.path) {
+            // Don't make it a link if it's a temp file upload.
+            return this.file ? this.label : html `<a id="label" href=${this.path} target="_blank">${this.label}</a>`;
+        }
         return html `<span id="label">${this.label}</span>`;
     }
     render() {

package/dist-cms/packages/core/components/input-upload-field/input-upload-field.element.d.ts

@@ -1,34 +1,22 @@
+import type { MediaValueType } from '../../../property-editors/upload-field/property-editor-ui-upload-field.element.js';
+import type { UmbTemporaryFileModel } from '../../temporary-file/temporary-file-manager.class.js';
 import { UmbLitElement } from '../../lit-element/index.js';
 import './input-upload-field-file.element.js';
-declare const UmbInputUploadFieldElement_base: (new (...args: any[]) => import("../../../../external/uui/index.js").UUIFormControlMixinInterface<FormDataEntryValue | FormData, string>) & typeof UmbLitElement;
-export declare class UmbInputUploadFieldElement extends UmbInputUploadFieldElement_base {
+export declare class UmbInputUploadFieldElement extends UmbLitElement {
     #private;
-    private _keys;
+    set value(value: MediaValueType);
+    get value(): MediaValueType;
     /**
-     * @description Keys to the files that belong to this upload field.
-     * @type {Array<String>}
-     * @default []
-     */
-    set keys(fileKeys: Array<string>);
-    get keys(): Array<string>;
-    /**
-     * @description Allowed file extensions. If left empty, all are allowed.
+     * @description Allowed file extensions. Allow all if empty.
      * @type {Array<String>}
      * @default undefined
      */
-    set fileExtensions(value: Array<string>);
-    get fileExtensions(): Array<string> | undefined;
-    /**
-     * @description Allows the user to upload multiple files.
-     * @default false
-     * @attr
-     */
-    multiple: boolean;
-    private _files;
+    set allowedFileExtensions(value: Array<string>);
+    get allowedFileExtensions(): Array<string> | undefined;
+    temporaryFile?: UmbTemporaryFileModel;
+    private _src;
     private _extensions?;
     private _dropzone?;
-    protected getFormElement(): undefined;
-    constructor();
     render(): import("lit-html").TemplateResult<1>;
     static styles: import("@lit/reactive-element/css-tag.js").CSSResult[];
 }

package/dist-cms/packages/core/components/input-upload-field/input-upload-field.element.js

@@ -4,135 +4,63 @@ 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 { UmbTemporaryFileManager } from '../../temporary-file/temporary-file-manager.class.js';
+import { TemporaryFileStatus, UmbTemporaryFileManager } from '../../temporary-file/temporary-file-manager.class.js';
 import { UmbId } from '../../id/index.js';
-import { css, html, nothing, ifDefined, customElement, property, query, state, repeat, } from '../../../../external/lit/index.js';
-import { UUIFormControlMixin } from '../../../../external/uui/index.js';
+import { css, html, nothing, ifDefined, customElement, property, query, state, } from '../../../../external/lit/index.js';
 import { UmbLitElement } from '../../lit-element/index.js';
-import './input-upload-field-file.element.js';
 import { UmbChangeEvent } from '../../event/index.js';
-import { UMB_APP_CONTEXT } from '../../../../apps/app/index.js';
-let UmbInputUploadFieldElement = class UmbInputUploadFieldElement extends UUIFormControlMixin(UmbLitElement, '') {
-    /**
-     * @description Keys to the files that belong to this upload field.
-     * @type {Array<String>}
-     * @default []
-     */
-    set keys(fileKeys) {
-        this._keys = fileKeys;
-        super.value = this._keys.join(',');
-        this.#setFilePaths();
+import './input-upload-field-file.element.js';
+let UmbInputUploadFieldElement = class UmbInputUploadFieldElement extends UmbLitElement {
+    constructor() {
+        super(...arguments);
+        this._src = '';
+        this.#manager = new UmbTemporaryFileManager(this);
     }
-    get keys() {
-        return this._keys;
+    set value(value) {
+        if (!value?.src)
+            return;
+        this._src = value.src;
+    }
+    get value() {
+        return !this.temporaryFile ? { src: this._src } : { temporaryFileId: this.temporaryFile.temporaryUnique };
     }
     /**
-     * @description Allowed file extensions. If left empty, all are allowed.
+     * @description Allowed file extensions. Allow all if empty.
      * @type {Array<String>}
      * @default undefined
      */
-    set fileExtensions(value) {
+    set allowedFileExtensions(value) {
         this.#setExtensions(value);
     }
-    get fileExtensions() {
+    get allowedFileExtensions() {
         return this._extensions;
     }
     #manager;
-    #serverUrl;
-    #serverUrlPromise;
-    getFormElement() {
-        return undefined;
-    }
-    constructor() {
-        super();
-        this._keys = [];
-        /**
-         * @description Allows the user to upload multiple files.
-         * @default false
-         * @attr
-         */
-        this.multiple = false;
-        this._files = [];
-        this.#serverUrl = '';
-        this.#manager = new UmbTemporaryFileManager(this);
-        /*this.consumeContext(UMB_PROPERTY_DATASET_CONTEXT, async (context) => {
-            this.observe(await context.propertyValueByAlias('umbracoExtension'), (value) => {
-                //const test = value;
-            });
-        });*/
-        this.#serverUrlPromise = this.consumeContext(UMB_APP_CONTEXT, (instance) => {
-            this.#serverUrl = instance.getServerUrl();
-        }).asPromise();
-        this.observe(this.#manager.queue, (value) => {
-            this.error = !value.length;
-            this._files = this._files.map((file) => {
-                const queueItem = value.find((item) => item.unique === file.unique);
-                if (queueItem) {
-                    file.queueItem = queueItem;
-                }
-                return file;
-            });
-        });
-    }
-    async #setFilePaths() {
-        await this.#serverUrlPromise;
-        this.keys.forEach((key) => {
-            if (!UmbId.validate(key) && key.startsWith('/')) {
-                this._files.push({
-                    path: this.#serverUrl + key,
-                    unique: UmbId.new(),
-                });
-                this.requestUpdate();
-            }
-        });
-    }
-    #setExtensions(value) {
-        if (!value) {
+    #setExtensions(extensions) {
+        if (!extensions?.length) {
             this._extensions = undefined;
             return;
         }
         // TODO: The dropzone uui component does not support file extensions without a dot. Remove this when it does.
-        this._extensions = value?.map((extension) => {
-            return `.${extension}`;
-        });
-    }
-    #onUpload(e) {
-        const files = e.detail.files;
-        if (!files?.length)
-            return;
-        // TODO: Should we validate the mimetype some how?
-        this.#setFiles(files);
-    }
-    #setFiles(files) {
-        const items = files.map((file) => ({
-            unique: UmbId.new(),
-            file,
-            status: 'waiting',
-        }));
-        this.#manager.upload(items);
-        this.keys = items.map((item) => item.unique);
-        this.value = this.keys.join(',');
-        this.dispatchEvent(new UmbChangeEvent());
-        // Read files to get their paths and add them to the file paths array.
-        items.forEach((item) => {
-            this._files.push({
-                path: '',
-                unique: item.unique,
-                queueItem: item,
-                file: item.file,
-            });
-            const reader = new FileReader();
-            reader.onload = () => {
-                this._files = this._files.map((file) => {
-                    if (file.unique === item.unique) {
-                        file.path = reader.result;
-                    }
-                    return file;
-                });
-                this.requestUpdate();
-            };
-            reader.readAsDataURL(item.file);
-        });
+        this._extensions = extensions?.map((extension) => `.${extension}`);
+    }
+    async #onUpload(e) {
+        //Property Editor for Upload field will always only have one file.
+        const item = {
+            temporaryUnique: UmbId.new(),
+            file: e.detail.files[0],
+        };
+        const upload = this.#manager.uploadOne(item);
+        const reader = new FileReader();
+        reader.onload = () => {
+            this._src = reader.result;
+        };
+        reader.readAsDataURL(item.file);
+        const uploaded = await upload;
+        if (uploaded.status === TemporaryFileStatus.SUCCESS) {
+            this.temporaryFile = { temporaryUnique: item.temporaryUnique, file: item.file };
+            this.dispatchEvent(new UmbChangeEvent());
+        }
     }
     #handleBrowse() {
         if (!this._dropzone)
@@ -140,57 +68,48 @@ let UmbInputUploadFieldElement = class UmbInputUploadFieldElement extends UUIFor
         this._dropzone.browse();
     }
     render() {
-        return html `
-			<div id="wrapper">${this.#renderFiles()}</div>
-			${this.#renderDropzone()} ${this.#renderButtonRemove()}
-		`;
+        return html `${this._src ? this.#renderFile(this._src, this.temporaryFile?.file) : this.#renderDropzone()}`;
     }
-    //TODO When the property editor gets saved, it seems that the property editor gets the file path from the server rather than key/id.
-    // This however does not work when there is multiple files. Can the server not handle multiple files uploaded into one property editor?
     #renderDropzone() {
-        if (!this.multiple && this._files.length)
-            return nothing;
         return html `
 			<uui-file-dropzone
 				id="dropzone"
 				label="dropzone"
 				@change="${this.#onUpload}"
-				accept="${ifDefined(this._extensions?.join(', '))}"
-				?multiple="${this.multiple}">
+				accept="${ifDefined(this._extensions?.join(', '))}">
 				<uui-button label=${this.localize.term('media_clickToUpload')} @click="${this.#handleBrowse}"></uui-button>
 			</uui-file-dropzone>
 		`;
     }
-    #renderFiles() {
-        return repeat(this._files, (path) => path, (path) => this.#renderFile(path));
-    }
-    #renderFile(file) {
-        // TODO: Get the mime type from the server and use that to determine the file type.
-        const type = this.#getFileTypeFromPath(file.path);
+    #renderFile(src, file) {
+        const extension = this.#getFileExtensionFromPath(src);
         return html `
-			<div style="position:relative; display: flex; width: fit-content; max-width: 100%">
-				${getElementTemplate()}
-				${file.queueItem?.status === 'waiting' ? html `<umb-temporary-file-badge></umb-temporary-file-badge>` : nothing}
+			<div id="wrapper">
+				<div style="position:relative; display: flex; width: fit-content; max-width: 100%">
+					${getElementTemplate()}
+					${this.temporaryFile?.status === TemporaryFileStatus.WAITING
+            ? html `<umb-temporary-file-badge></umb-temporary-file-badge>`
+            : nothing}
+				</div>
 			</div>
+			${this.#renderButtonRemove()}
 		`;
         function getElementTemplate() {
-            switch (type) {
+            switch (extension) {
                 case 'audio':
-                    return html `<umb-input-upload-field-audio .path=${file.path}></umb-input-upload-field-audio>`;
+                    return html `<umb-input-upload-field-audio .path=${src}></umb-input-upload-field-audio>`;
                 case 'video':
-                    return html `<umb-input-upload-field-video .path=${file.path}></umb-input-upload-field-video>`;
+                    return html `<umb-input-upload-field-video .path=${src}></umb-input-upload-field-video>`;
                 case 'image':
-                    return html `<umb-input-upload-field-image .path=${file.path}></umb-input-upload-field-image>`;
+                    return html `<umb-input-upload-field-image .path=${src}></umb-input-upload-field-image>`;
                 case 'svg':
-                    return html `<umb-input-upload-field-svg .path=${file.path}></umb-input-upload-field-svg>`;
-                case 'file':
-                    return html `<umb-input-upload-field-file
-						.path=${file.path}
-						.file=${file.file}></umb-input-upload-field-file>`;
+                    return html `<umb-input-upload-field-svg .path=${src}></umb-input-upload-field-svg>`;
+                default:
+                    return html `<umb-input-upload-field-file .path=${src} .file=${file}></umb-input-upload-field-file>`;
             }
         }
     }
-    #getFileTypeFromPath(path) {
+    #getFileExtensionFromPath(path) {
         // Extract the MIME type from the data URL
         if (path.startsWith('data:')) {
             const mimeType = path.substring(5, path.indexOf(';'));
@@ -218,22 +137,20 @@ let UmbInputUploadFieldElement = class UmbInputUploadFieldElement extends UUIFor
         return 'file';
     }
     #renderButtonRemove() {
-        if (!this._files.length)
-            return;
         return html `<uui-button compact @click=${this.#handleRemove} label=${this.localize.term('content_uploadClear')}>
 			<uui-icon name="icon-trash"></uui-icon>${this.localize.term('content_uploadClear')}
 		</uui-button>`;
     }
     #handleRemove() {
-        const uniques = this._files.map((file) => file.unique);
-        this.#manager.remove(uniques);
-        this._files = [];
-        this.value = '';
-        this.keys = [];
+        this._src = '';
+        this.temporaryFile = undefined;
         this.dispatchEvent(new UmbChangeEvent());
     }
     static { this.styles = [
         css `
+			:host {
+				position: relative;
+			}
 			uui-icon {
 				vertical-align: sub;
 				margin-right: var(--uui-size-space-4);
@@ -245,6 +162,7 @@ let UmbInputUploadFieldElement = class UmbInputUploadFieldElement extends UUIFor
 				gap: var(--uui-size-space-4);
 				box-sizing: border-box;
 			}
+
 			#wrapper:has(umb-input-upload-field-file) {
 				padding: var(--uui-size-space-4);
 				border: 1px solid var(--uui-color-border);
@@ -258,17 +176,17 @@ let UmbInputUploadFieldElement = class UmbInputUploadFieldElement extends UUIFor
     ]; }
 };
 __decorate([
-    property({ type: Array })
-], UmbInputUploadFieldElement.prototype, "keys", null);
+    property({ type: Object })
+], UmbInputUploadFieldElement.prototype, "value", null);
 __decorate([
     property({ type: Array })
-], UmbInputUploadFieldElement.prototype, "fileExtensions", null);
+], UmbInputUploadFieldElement.prototype, "allowedFileExtensions", null);
 __decorate([
-    property({ type: Boolean })
-], UmbInputUploadFieldElement.prototype, "multiple", void 0);
+    state()
+], UmbInputUploadFieldElement.prototype, "temporaryFile", void 0);
 __decorate([
     state()
-], UmbInputUploadFieldElement.prototype, "_files", void 0);
+], UmbInputUploadFieldElement.prototype, "_src", void 0);
 __decorate([
     state()
 ], UmbInputUploadFieldElement.prototype, "_extensions", void 0);

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

@@ -74,7 +74,7 @@ let UmbMultipleColorPickerItemInputElement = class UmbMultipleColorPickerItemInp
         this.value = event.target.value;
         this.dispatchEvent(new UmbInputEvent());
     }
-    #onColorInput(event) {
+    #onColorChange(event) {
         event.stopPropagation();
         this.value = this._colorPicker.value;
         this.dispatchEvent(new UmbChangeEvent());
@@ -119,7 +119,7 @@ let UmbMultipleColorPickerItemInputElement = class UmbMultipleColorPickerItemInp
 								value=${this._valueHex}
 								@click=${this.#onColorClick}></uui-color-swatch>
 						</uui-input>
-						<input aria-hidden="${true}" type="color" id="color" value=${this.value} @input=${this.#onColorInput} />
+						<input aria-hidden="${true}" type="color" id="color" value=${this.value} @change=${this.#onColorChange} />
 					</div>
 					${when(this.showLabels, () => html `
 							<uui-input

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

@@ -0,0 +1,2 @@
+import './split-panel.element.js';
+export * from './split-panel.element.js';

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

@@ -0,0 +1,2 @@
+import './split-panel.element.js';
+export * from './split-panel.element.js';

package/dist-cms/packages/core/components/split-panel/split-panel.element.d.ts

@@ -0,0 +1,47 @@
+import { type PropertyValueMap, LitElement } from '../../../../external/lit/index.js';
+/**
+ * Custom element for a split panel with adjustable divider.
+ * @element umb-split-panel
+ * @slot start - Content for the start panel.
+ * @slot end - Content for the end panel.
+ * @cssprop --umb-split-panel-initial-position - Initial position of the divider.
+ * @cssprop --umb-split-panel-start-min-width - Minimum width of the start panel.
+ * @cssprop --umb-split-panel-end-min-width - Minimum width of the end panel.
+ * @cssprop --umb-split-panel-divider-touch-area-width - Width of the divider touch area.
+ * @cssprop --umb-split-panel-divider-width - Width of the divider.
+ * @cssprop --umb-split-panel-divider-color - Color of the divider.
+ */
+export declare class UmbSplitPanelElement extends LitElement {
+    #private;
+    mainElement: HTMLElement;
+    dividerTouchAreaElement: HTMLElement;
+    dividerElement: HTMLElement;
+    /**
+     * Snap points for the divider position.
+     * Pixel or percent space-separated values: e.g., "100px 50% -75% -200px".
+     * Negative values are relative to the end of the container.
+     */
+    snap?: string;
+    /**
+     * Locking mode for the split panel.
+     * Possible values: "start", "end", "none" (default).
+     */
+    lock: 'start' | 'end' | 'none';
+    /**
+     * Initial position of the divider.
+     * Pixel or percent value: e.g., "100px" or "25%".
+     * Defaults to a CSS variable if not set: "var(--umb-split-panel-initial-position) which defaults to 50%".
+     */
+    position: string;
+    _hasStartPanel: boolean;
+    _hasEndPanel: boolean;
+    disconnectedCallback(): void;
+    protected updated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: import("@lit/reactive-element/css-tag.js").CSSResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'umb-split-panel': UmbSplitPanelElement;
+    }
+}