@umbraco-cms/backoffice 15.3.0 → 15.4.0-rc

package/dist-cms/packages/log-viewer/workspace/logviewer-workspace.context.js

@@ -2,11 +2,11 @@ import { UmbLogViewerRepository } from '../repository/log-viewer.repository.js';
 import { UMB_APP_LOG_VIEWER_CONTEXT } from './logviewer-workspace.context-token.js';
 import { UmbBasicState, UmbArrayState, UmbObjectState, UmbStringState } from '../../../libs/observable-api/index.js';
 import { DirectionModel, LogLevelModel } from '../../../external/backend-api/index.js';
-import { UmbControllerBase } from '../../../libs/class-api/index.js';
+import { UmbContextBase } from '../../../libs/class-api/index.js';
 import { query } from '../../core/router/index.js';
 import { UMB_WORKSPACE_CONTEXT } from '../../core/workspace/index.js';
 // TODO: Revisit usage of workspace for this case...
-export class UmbLogViewerWorkspaceContext extends UmbControllerBase {
+export class UmbLogViewerWorkspaceContext extends UmbContextBase {
     #repository;
     getEntityType() {
         return 'log-viewer';
@@ -42,7 +42,7 @@ export class UmbLogViewerWorkspaceContext extends UmbControllerBase {
     #sortingDirection;
     #intervalID;
     constructor(host) {
-        super(host);
+        super(host, UMB_APP_LOG_VIEWER_CONTEXT);
         this.workspaceAlias = 'Umb.Workspace.LogViewer';
         this.defaultDateRange = {
             startDate: this.yesterday,
@@ -118,9 +118,8 @@ export class UmbLogViewerWorkspaceContext extends UmbControllerBase {
                 this.#logs.setValue(data);
             }
         };
+        // TODO: Revisit usage of workspace for this case... currently no other workspace context provides them self with their own token, we need to update UMB_APP_LOG_VIEWER_CONTEXT to become a workspace context. [NL]
         this.provideContext(UMB_WORKSPACE_CONTEXT, this);
-        // TODO: Revisit usage of workspace for this case... currently no other workspace context provides them self with their own token.
-        this.provideContext(UMB_APP_LOG_VIEWER_CONTEXT, this);
         this.#repository = new UmbLogViewerRepository(host);
     }
     hostConnected() {

package/dist-cms/packages/log-viewer/workspace/views/overview/components/log-viewer-log-types-chart.element.js

@@ -109,7 +109,8 @@ let UmbLogViewerLogTypesChartElement = class UmbLogViewerLogTypesChartElement ex
 			#chart {
 				width: 150px;
 				aspect-ratio: 1;
-				background: radial-gradient(white 40%, transparent 41%),
+				background:
+					radial-gradient(white 40%, transparent 41%),
 					conic-gradient(
 						var(--umb-log-viewer-debug-color) 0% 20%,
 						var(--umb-log-viewer-information-color) 20% 40%,

package/dist-cms/packages/log-viewer/workspace/views/search/components/log-viewer-level-tag.element.js

@@ -11,15 +11,15 @@ let UmbLogViewerLevelTagElement = class UmbLogViewerLevelTagElement extends LitE
         this.levelMap = {
             Verbose: { look: 'secondary' },
             Debug: {
-                look: 'default',
-                style: 'background-color: var(--umb-log-viewer-debug-color); color: var(--uui-color-surface)',
+                look: 'primary',
+                style: 'background-color: var(--umb-log-viewer-debug-color)',
             },
             Information: { look: 'primary', color: 'positive' },
             Warning: { look: 'primary', color: 'warning' },
             Error: { look: 'primary', color: 'danger' },
             Fatal: {
                 look: 'primary',
-                style: 'background-color: var(--umb-log-viewer-fatal-color); color: var(--uui-color-surface)',
+                style: 'background-color: var(--umb-log-viewer-fatal-color)',
             },
         };
     }

package/dist-cms/packages/log-viewer/workspace/views/search/components/log-viewer-message.element.js

@@ -196,7 +196,6 @@ let UmbLogViewerMessageElement = class UmbLogViewerMessageElement extends UmbLit
 
 			pre {
 				border-left: 4px solid #d42054;
-				color: #303033;
 				display: block;
 				font-family:
 					Lato,

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

@@ -1,6 +1,6 @@
+import type { UmbMarkdownPropertyEditorUiValue } from './types.js';
 import type { UmbPropertyValuePreset } from '../../../core/property/index.js';
 import type { UmbPropertyEditorConfig } from '../../../core/property-editor/index.js';
-import type { UmbMarkdownPropertyEditorUiValue } from './types.js';
 export declare class UmbMarkdownPropertyValuePreset implements UmbPropertyValuePreset<UmbMarkdownPropertyEditorUiValue> {
     processValue(value: undefined | UmbMarkdownPropertyEditorUiValue, config: UmbPropertyEditorConfig): Promise<string | undefined>;
     destroy(): void;

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

@@ -6,8 +6,8 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { html, customElement, property, state } from '../../../../external/lit/index.js';
 import { UmbLitElement } from '../../../core/lit-element/index.js';
-import { UmbPropertyValueChangeEvent } from '../../../core/property-editor/index.js';
 import '../../components/input-markdown-editor/index.js';
+import { UmbChangeEvent } from '../../../core/event/index.js';
 /**
  * @element umb-property-editor-ui-markdown-editor
  */
@@ -31,7 +31,7 @@ let UmbPropertyEditorUIMarkdownEditorElement = class UmbPropertyEditorUIMarkdown
     }
     #onChange(event) {
         this.value = event.target.value;
-        this.dispatchEvent(new UmbPropertyValueChangeEvent());
+        this.dispatchEvent(new UmbChangeEvent());
     }
     render() {
         return html `

package/dist-cms/packages/media/dropzone/components/index.d.ts

@@ -0,0 +1 @@
+export * from './input-dropzone/input-dropzone.element.js';

package/dist-cms/packages/media/dropzone/components/index.js

@@ -0,0 +1 @@
+export * from './input-dropzone/input-dropzone.element.js';

package/dist-cms/packages/media/dropzone/components/input-dropzone/input-dropzone.element.d.ts

@@ -0,0 +1,61 @@
+import type { UmbUploadableItem } from '../../types.js';
+import { UmbDropzoneManager } from '../../dropzone-manager.class.js';
+import { nothing } from '../../../../../external/lit/index.js';
+import type { UUIFileDropzoneElement, UUIFileDropzoneEvent } from '../../../../../external/uui/index.js';
+import { UmbLitElement } from '../../../../core/lit-element/index.js';
+declare const UmbInputDropzoneElement_base: import("../../../../../libs/extension-api/index.js").HTMLElementConstructor<import("../../../../core/validation/index.js").UmbFormControlMixinElement<UmbUploadableItem[] | undefined>> & typeof UmbLitElement;
+/**
+ * A dropzone for uploading files and folders.
+ * The files will be uploaded to the server as temporary files and can be used in the backoffice.
+ * @element umb-input-dropzone
+ * @fires ProgressEvent When the progress of the upload changes.
+ * @fires UmbDropzoneChangeEvent When the upload is complete.
+ * @fires UmbDropzoneSubmittedEvent When the upload is submitted.
+ * @slot - The default slot.
+ * @slot text - A text shown above the dropzone graphic.
+ */
+export declare class UmbInputDropzoneElement extends UmbInputDropzoneElement_base {
+    #private;
+    /**
+     * Comma-separated list of accepted mime types or file extensions.
+     */
+    accept?: string;
+    /**
+     * Disable folder uploads.
+     */
+    disableFolderUpload: boolean;
+    /**
+     * Disables the dropzone.
+     * @description The dropzone will not accept any uploads.
+     */
+    disabled: boolean;
+    /**
+     * Determines if the dropzone should accept multiple files.
+     */
+    multiple: boolean;
+    /**
+     * The label for the dropzone.
+     */
+    label: string;
+    protected _dropzone?: UUIFileDropzoneElement;
+    protected _progressItems: Array<UmbUploadableItem>;
+    protected _manager: UmbDropzoneManager;
+    constructor();
+    disconnectedCallback(): void;
+    /**
+     * Opens the file browse dialog.
+     */
+    browse(): void;
+    render(): import("lit-html").TemplateResult<1>;
+    protected renderUploader(): typeof nothing | import("lit-html").TemplateResult<1>;
+    protected renderPlaceholder(item: UmbUploadableItem): import("lit-html").TemplateResult<1>;
+    protected onUpload(e: UUIFileDropzoneEvent): Promise<void>;
+    static readonly styles: import("lit").CSSResult[];
+}
+export declare const UmbInputDropzoneDashedStyles: import("lit").CSSResult;
+declare global {
+    interface HTMLElementTagNameMap {
+        'umb-input-dropzone': UmbInputDropzoneElement;
+    }
+}
+export {};

package/dist-cms/packages/media/dropzone/components/input-dropzone/input-dropzone.element.js

@@ -0,0 +1,268 @@
+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 { UmbFileDropzoneItemStatus } from '../../constants.js';
+import { UmbDropzoneManager } from '../../dropzone-manager.class.js';
+import { UmbDropzoneChangeEvent } from '../../dropzone-change.event.js';
+import { UmbDropzoneSubmittedEvent } from '../../dropzone-submitted.event.js';
+import { css, customElement, html, ifDefined, nothing, property, query, repeat, state, when, } from '../../../../../external/lit/index.js';
+import { UmbLitElement } from '../../../../core/lit-element/index.js';
+import { UmbTextStyles } from '../../../../core/style/index.js';
+import { formatBytes } from '../../../../core/utils/index.js';
+import { UmbFormControlMixin } from '../../../../core/validation/index.js';
+/**
+ * A dropzone for uploading files and folders.
+ * The files will be uploaded to the server as temporary files and can be used in the backoffice.
+ * @element umb-input-dropzone
+ * @fires ProgressEvent When the progress of the upload changes.
+ * @fires UmbDropzoneChangeEvent When the upload is complete.
+ * @fires UmbDropzoneSubmittedEvent When the upload is submitted.
+ * @slot - The default slot.
+ * @slot text - A text shown above the dropzone graphic.
+ */
+let UmbInputDropzoneElement = class UmbInputDropzoneElement extends UmbFormControlMixin(UmbLitElement) {
+    /**
+     * Determines if the dropzone should be disabled.
+     * If the dropzone is disabled, it will not accept any uploads.
+     * It is considered disabled if the `disabled` property is set or if `multiple` is set to `false` and there is already an upload in progress.
+     * @returns {boolean} True if the dropzone should not accept uploads, otherwise false.
+     */
+    get #isDisabled() {
+        return this.disabled || (!this.multiple && this._progressItems.length > 0);
+    }
+    constructor() {
+        super();
+        /**
+         * Disable folder uploads.
+         */
+        this.disableFolderUpload = false;
+        /**
+         * Disables the dropzone.
+         * @description The dropzone will not accept any uploads.
+         */
+        this.disabled = false;
+        /**
+         * Determines if the dropzone should accept multiple files.
+         */
+        this.multiple = false;
+        /**
+         * The label for the dropzone.
+         */
+        this.label = 'dropzone';
+        this._progressItems = [];
+        this._manager = new UmbDropzoneManager(this);
+        this.observe(this._manager.progress, (progress) => this.dispatchEvent(new ProgressEvent('progress', { loaded: progress.completed, total: progress.total })), '_observeProgress');
+        this.observe(this._manager.progressItems, (progressItems) => {
+            this._progressItems = [...progressItems];
+            const waiting = this._progressItems.find((item) => item.status === UmbFileDropzoneItemStatus.WAITING);
+            if (this._progressItems.length && !waiting) {
+                this.value = [...this._progressItems];
+                this.dispatchEvent(new UmbDropzoneChangeEvent(this._progressItems));
+            }
+        }, '_observeProgressItems');
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this._manager.destroy();
+    }
+    /**
+     * Opens the file browse dialog.
+     */
+    browse() {
+        if (this.#isDisabled)
+            return;
+        this._dropzone?.browse();
+    }
+    render() {
+        return html `
+			<slot name="text"></slot>
+			<uui-file-dropzone
+				id="dropzone"
+				label=${this.label}
+				accept=${ifDefined(this.accept)}
+				?multiple=${this.multiple}
+				?disabled=${this.#isDisabled}
+				?disallowFolderUpload=${this.disableFolderUpload}
+				@change=${this.onUpload}
+				@click=${this.#handleBrowse}>
+				<slot>
+					<uui-button label=${this.localize.term('media_clickToUpload')} @click=${this.#handleBrowse}></uui-button>
+				</slot>
+			</uui-file-dropzone>
+			${this.renderUploader()}
+		`;
+    }
+    renderUploader() {
+        if (!this._progressItems?.length)
+            return nothing;
+        return html `
+			<div id="uploader">
+				${repeat(this._progressItems, (item) => item.unique, (item) => this.renderPlaceholder(item))}
+				<uui-button
+					id="uploader-clear"
+					compact
+					@click=${this.#handleRemove}
+					label=${this.localize.term('content_uploadClear')}>
+					<uui-icon name="icon-trash"></uui-icon>${this.localize.term('content_uploadClear')}
+				</uui-button>
+			</div>
+		`;
+    }
+    renderPlaceholder(item) {
+        const file = item.temporaryFile?.file;
+        return html `
+			<div class="placeholder">
+				<div class="fileIcon">
+					${when(item.status === UmbFileDropzoneItemStatus.COMPLETE, () => html `<umb-icon name="check" color="green"></umb-icon>`)}
+					${when(item.status === UmbFileDropzoneItemStatus.ERROR ||
+            item.status === UmbFileDropzoneItemStatus.CANCELLED ||
+            item.status === UmbFileDropzoneItemStatus.NOT_ALLOWED, () => html `<umb-icon name="wrong" color="red"></umb-icon>`)}
+				</div>
+				<div class="fileDetails">
+					<div class="fileName" title=${file?.name ?? ''}>${file?.name ?? ''}</div>
+					<div class="fileSize">
+						${formatBytes(file?.size ?? 0, { decimals: 2 })}:
+						${this.localize.number(item.progress, { maximumFractionDigits: 0 })}%
+					</div>
+					${when(item.status === UmbFileDropzoneItemStatus.WAITING, () => html `<div class="progress"><uui-loader-bar progress=${item.progress}></uui-loader-bar></div>`)}
+					${when(item.status === UmbFileDropzoneItemStatus.ERROR, () => html `<div class="error">An error occured</div>`)}
+					${when(item.status === UmbFileDropzoneItemStatus.CANCELLED, () => html `<div class="error">Cancelled</div>`)}
+					${when(item.status === UmbFileDropzoneItemStatus.NOT_ALLOWED, () => html `<div class="error">File type not allowed</div>`)}
+				</div>
+				<div class="fileActions">
+					${when(item.status === UmbFileDropzoneItemStatus.WAITING, () => html `
+							<uui-button
+								compact
+								@click=${() => this.#handleCancel(item)}
+								label=${this.localize.term('general_cancel')}>
+								<uui-icon name="icon-remove"></uui-icon>${this.localize.term('general_cancel')}
+							</uui-button>
+						`)}
+				</div>
+			</div>
+		`;
+    }
+    async onUpload(e) {
+        e.stopImmediatePropagation();
+        if (this.#isDisabled)
+            return;
+        if (!e.detail.files.length && !e.detail.folders.length)
+            return;
+        const uploadables = this._manager.createTemporaryFiles(e.detail.files);
+        this.dispatchEvent(new UmbDropzoneSubmittedEvent(await uploadables));
+    }
+    #handleBrowse(e) {
+        if (!this._dropzone)
+            return;
+        e.stopImmediatePropagation();
+        this._dropzone.browse();
+    }
+    #handleCancel(item) {
+        item.temporaryFile?.abortController?.abort();
+    }
+    #handleRemove() {
+        this._manager.removeAll();
+    }
+    static { this.styles = [
+        UmbTextStyles,
+        css `
+			:host {
+				display: flex;
+				flex-direction: column;
+				flex-wrap: wrap;
+				place-items: center;
+				cursor: pointer;
+			}
+
+			:host([disabled]) #dropzone {
+				opacity: 0.5;
+				pointer-events: none;
+			}
+
+			#dropzone {
+				width: 100%;
+				inset: 0;
+				backdrop-filter: opacity(1); /* Removes the built in blur effect */
+
+				&[disabled] {
+					opacity: 0.5;
+					pointer-events: none;
+				}
+			}
+
+			#uploader {
+				display: flex;
+				flex-direction: column;
+				flex-wrap: wrap;
+				align-items: center;
+				gap: var(--uui-size-space-3);
+
+				.placeholder {
+					display: grid;
+					grid-template-columns: 30px 200px 1fr;
+					max-width: fit-content;
+					padding: var(--uui-size-space-3);
+					border: 1px dashed var(--uui-color-divider-emphasis);
+				}
+
+				.fileIcon,
+				.fileActions {
+					place-self: center center;
+				}
+
+				.fileName {
+					white-space: nowrap;
+					overflow: hidden;
+					text-overflow: ellipsis;
+					font-size: var(--uui-size-5);
+				}
+
+				.fileSize {
+					font-size: var(--uui-font-size-small);
+					color: var(--uui-color-text-alt);
+				}
+
+				.error {
+					color: var(--uui-color-danger);
+				}
+			}
+		`,
+    ]; }
+};
+__decorate([
+    property({ type: String })
+], UmbInputDropzoneElement.prototype, "accept", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'disable-folder-upload' })
+], UmbInputDropzoneElement.prototype, "disableFolderUpload", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], UmbInputDropzoneElement.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean })
+], UmbInputDropzoneElement.prototype, "multiple", void 0);
+__decorate([
+    property({ type: String })
+], UmbInputDropzoneElement.prototype, "label", void 0);
+__decorate([
+    query('#dropzone', true)
+], UmbInputDropzoneElement.prototype, "_dropzone", void 0);
+__decorate([
+    state()
+], UmbInputDropzoneElement.prototype, "_progressItems", void 0);
+UmbInputDropzoneElement = __decorate([
+    customElement('umb-input-dropzone')
+], UmbInputDropzoneElement);
+export { UmbInputDropzoneElement };
+export const UmbInputDropzoneDashedStyles = css `
+	umb-input-dropzone {
+		position: relative;
+		display: block;
+		inset: 0;
+		cursor: pointer;
+		border: 1px dashed var(--uui-color-divider-emphasis);
+	}
+`;

package/dist-cms/packages/media/dropzone/constants.d.ts

@@ -0,0 +1,8 @@
+export { UMB_DROPZONE_MEDIA_TYPE_PICKER_MODAL } from './modals/dropzone-media-type-picker/dropzone-media-type-picker-modal.token.js';
+export declare enum UmbFileDropzoneItemStatus {
+    WAITING = "waiting",
+    COMPLETE = "complete",
+    NOT_ALLOWED = "not allowed",
+    CANCELLED = "cancelled",
+    ERROR = "error"
+}

package/dist-cms/packages/media/{media/dropzone/types.js → dropzone/constants.js}

@@ -1,3 +1,4 @@
+export { UMB_DROPZONE_MEDIA_TYPE_PICKER_MODAL } from './modals/dropzone-media-type-picker/dropzone-media-type-picker-modal.token.js';
 export var UmbFileDropzoneItemStatus;
 (function (UmbFileDropzoneItemStatus) {
     UmbFileDropzoneItemStatus["WAITING"] = "waiting";

package/dist-cms/packages/media/dropzone/dropzone-change.event.d.ts

@@ -0,0 +1,9 @@
+import type { UmbUploadableItem } from './types.js';
+export declare class UmbDropzoneChangeEvent extends Event {
+    static readonly TYPE = "change";
+    /**
+     * An array of resolved uploadable items.
+     */
+    items: UmbUploadableItem[];
+    constructor(items: Array<UmbUploadableItem>, args?: EventInit);
+}

package/dist-cms/packages/media/dropzone/dropzone-change.event.js

@@ -0,0 +1,7 @@
+export class UmbDropzoneChangeEvent extends Event {
+    static { this.TYPE = 'change'; }
+    constructor(items, args) {
+        super(UmbDropzoneChangeEvent.TYPE, { bubbles: false, composed: false, cancelable: false, ...args });
+        this.items = items;
+    }
+}

package/dist-cms/packages/media/{media/dropzone → dropzone}/dropzone-manager.class.d.ts

@@ -1,6 +1,6 @@
 import type { UmbFileDropzoneDroppedItems, UmbFileDropzoneProgress, UmbUploadableItem } from './types.js';
-import { UmbControllerBase } from '../../../../libs/class-api/index.js';
-import type { UmbControllerHost } from '../../../../libs/controller-api/index.js';
+import { UmbControllerBase } from '../../../libs/class-api/index.js';
+import type { UmbControllerHost } from '../../../libs/controller-api/index.js';
 /**
  * Manages the dropzone and uploads folders and files to the server.
  * @function createMediaItems - Upload files and folders to the server and creates the items using corresponding media type.
@@ -13,7 +13,13 @@ export declare class UmbDropzoneManager extends UmbControllerBase {
     readonly progress: import("rxjs").Observable<UmbFileDropzoneProgress>;
     readonly progressItems: import("rxjs").Observable<UmbUploadableItem[]>;
     constructor(host: UmbControllerHost);
+    /**
+     * @deprecated Not used anymore; this method will be removed in Umbraco 17.
+     */
     setIsFoldersAllowed(isAllowed: boolean): void;
+    /**
+     * @deprecated Not used anymore; this method will be removed in Umbraco 17.
+     */
     getIsFoldersAllowed(): boolean;
     /** @deprecated Please use `createMediaItems()` instead; this method will be removed in Umbraco 17. */
     createFilesAsMedia: (items: UmbFileDropzoneDroppedItems, parentUnique?: string | null) => UmbUploadableItem[];
@@ -33,5 +39,8 @@ export declare class UmbDropzoneManager extends UmbControllerBase {
      * @returns {Promise<Array<UmbUploadableItem>>} - Files as temporary files.
      */
     createTemporaryFiles(files: Array<File>): Promise<Array<UmbUploadableItem>>;
+    removeOne(item: UmbUploadableItem): void;
+    remove(items: Array<UmbUploadableItem>): void;
+    removeAll(): void;
     destroy(): void;
 }