@umbraco-cms/backoffice 14.2.0 → 14.3.0

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

@@ -4,8 +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 { UmbMediaPickerContext } from './input-media.context.js';
-import { css, customElement, html, ifDefined, property, repeat, state } from '../../../../../external/lit/index.js';
+import { UmbMediaPickerInputContext } from './input-media.context.js';
+import { css, customElement, html, ifDefined, nothing, property, repeat, state, } from '../../../../../external/lit/index.js';
 import { splitStringToArray } from '../../../../core/utils/index.js';
 import { UmbChangeEvent } from '../../../../core/event/index.js';
 import { UmbLitElement } from '../../../../core/lit-element/index.js';
@@ -62,6 +62,25 @@ let UmbInputMediaElement = class UmbInputMediaElement extends UmbFormControlMixi
     get value() {
         return this.selection.length > 0 ? this.selection.join(',') : undefined;
     }
+    /**
+     * Sets the input to readonly mode, meaning value cannot be changed but still able to read and select its content.
+     * @type {boolean}
+     * @attr
+     * @default
+     */
+    get readonly() {
+        return this.#readonly;
+    }
+    set readonly(value) {
+        this.#readonly = value;
+        if (this.#readonly) {
+            this.#sorter.disable();
+        }
+        else {
+            this.#sorter.enable();
+        }
+    }
+    #readonly;
     #pickerContext;
     constructor() {
         super();
@@ -98,9 +117,10 @@ let UmbInputMediaElement = class UmbInputMediaElement extends UmbFormControlMixi
          */
         this.maxMessage = 'This field exceeds the allowed amount of items';
         this.startNode = '';
+        this.#readonly = false;
         this._editMediaPath = '';
         this._cards = [];
-        this.#pickerContext = new UmbMediaPickerContext(this);
+        this.#pickerContext = new UmbMediaPickerInputContext(this);
         this.#pickableFilter = (item) => {
             if (this.allowedContentTypeIds && this.allowedContentTypeIds.length > 0) {
                 return this.allowedContentTypeIds.includes(item.mediaType.unique);
@@ -142,50 +162,61 @@ let UmbInputMediaElement = class UmbInputMediaElement extends UmbFormControlMixi
     }
     #renderItems() {
         if (!this._cards?.length)
-            return;
+            return nothing;
         return html `
 			${repeat(this._cards, (item) => item.unique, (item) => this.#renderItem(item))}
 		`;
     }
     #renderAddButton() {
+        // TODO: Stop preventing adding more, instead implement proper validation for user feedback. [NL]
         if (this._cards && this.max && this._cards.length >= this.max)
-            return;
-        return html `
-			<uui-button
-				id="btn-add"
-				look="placeholder"
-				@click=${this.#openPicker}
-				label=${this.localize.term('general_choose')}>
-				<uui-icon name="icon-add"></uui-icon>
-				${this.localize.term('general_choose')}
-			</uui-button>
-		`;
+            return nothing;
+        if (this.readonly && this._cards.length > 0) {
+            return nothing;
+        }
+        else {
+            return html `
+				<uui-button
+					id="btn-add"
+					look="placeholder"
+					@click=${this.#openPicker}
+					label=${this.localize.term('general_choose')}
+					?disabled=${this.readonly}>
+					<uui-icon name="icon-add"></uui-icon>
+					${this.localize.term('general_choose')}
+				</uui-button>
+			`;
+        }
     }
     #renderItem(item) {
+        const href = this.readonly ? undefined : `${this._editMediaPath}edit/${item.unique}`;
         return html `
 			<uui-card-media
 				name=${ifDefined(item.name === null ? undefined : item.name)}
 				detail=${ifDefined(item.unique)}
-				href="${this._editMediaPath}edit/${item.unique}">
+				href="${ifDefined(href)}"
+				?readonly=${this.readonly}>
 				<umb-imaging-thumbnail
 					unique=${item.unique}
 					alt=${item.name}
 					icon=${item.mediaType.icon}></umb-imaging-thumbnail>
 				${this.#renderIsTrashed(item)}
-				<uui-action-bar slot="actions">
-					<uui-button
-						label=${this.localize.term('general_remove')}
-						look="secondary"
-						@click=${() => this.#onRemove(item)}>
-						<uui-icon name="icon-trash"></uui-icon>
-					</uui-button>
-				</uui-action-bar>
+				<uui-action-bar slot="actions"> ${this.#renderRemoveAction(item)}</uui-action-bar>
 			</uui-card-media>
 		`;
     }
+    #renderRemoveAction(item) {
+        if (this.readonly)
+            return nothing;
+        return html `
+			<uui-button label=${this.localize.term('general_remove')} look="secondary" @click=${() => this.#onRemove(item)}>
+				<uui-icon name="icon-trash"></uui-icon>
+			</uui-button>
+		`;
+    }
     #renderIsTrashed(item) {
         if (!item.isTrashed)
-            return;
+            return nothing;
         return html `
 			<uui-tag size="s" slot="tag" color="danger">
 				<umb-localize key="mediaPicker_trashed">Trashed</umb-localize>
@@ -253,6 +284,9 @@ __decorate([
 __decorate([
     property({ type: String })
 ], UmbInputMediaElement.prototype, "value", null);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], UmbInputMediaElement.prototype, "readonly", null);
 __decorate([
     state()
 ], UmbInputMediaElement.prototype, "_editMediaPath", void 0);

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

@@ -47,6 +47,14 @@ export declare class UmbInputRichMediaElement extends UmbInputRichMediaElement_b
     get alias(): string | undefined;
     set variantId(value: string | UmbVariantId | undefined);
     get variantId(): string | undefined;
+    /**
+     * Sets the input to readonly mode, meaning value cannot be changed but still able to read and select its content.
+     * @type {boolean}
+     * @attr
+     * @default false
+     */
+    get readonly(): boolean;
+    set readonly(value: boolean);
     private _cards;
     private _routeBuilder?;
     constructor();

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

@@ -58,6 +58,25 @@ let UmbInputRichMediaElement = class UmbInputRichMediaElement extends UUIFormCon
     get variantId() {
         return this.#modalRouter.getUniquePathValue('variantId');
     }
+    /**
+     * Sets the input to readonly mode, meaning value cannot be changed but still able to read and select its content.
+     * @type {boolean}
+     * @attr
+     * @default false
+     */
+    get readonly() {
+        return this.#readonly;
+    }
+    set readonly(value) {
+        this.#readonly = value;
+        if (this.#readonly) {
+            this.#sorter.disable();
+        }
+        else {
+            this.#sorter.enable();
+        }
+    }
+    #readonly;
     #itemRepository;
     #modalRouter;
     #modalManager;
@@ -73,7 +92,8 @@ let UmbInputRichMediaElement = class UmbInputRichMediaElement extends UUIFormCon
             identifier: 'Umb.SorterIdentifier.InputRichMedia',
             itemSelector: 'uui-card-media',
             containerSelector: '.container',
-            /** TODO: This component probably needs some grid-like logic for resolve placement... [LI] */
+            // TODO: This component probably needs some grid-like logic for resolve placement... [LI]
+            // TODO: You can also use verticalDirection? [NL]
             resolvePlacement: () => false,
             onChange: ({ model }) => {
                 this.#items = model;
@@ -113,6 +133,7 @@ let UmbInputRichMediaElement = class UmbInputRichMediaElement extends UUIFormCon
         this.startNode = '';
         this.multiple = false;
         this.#focalPointEnabled = false;
+        this.#readonly = false;
         this._cards = [];
         this.#itemRepository = new UmbMediaItemRepository(this);
         this.#pickableFilter = (item) => {
@@ -246,6 +267,8 @@ let UmbInputRichMediaElement = class UmbInputRichMediaElement extends UUIFormCon
 		`;
     }
     #renderDropzone() {
+        if (this.readonly)
+            return nothing;
         if (this._cards && this._cards.length >= this.max)
             return;
         return html `<umb-dropzone @change=${this.#onUploadCompleted}></umb-dropzone>`;
@@ -258,41 +281,51 @@ let UmbInputRichMediaElement = class UmbInputRichMediaElement extends UUIFormCon
 		`;
     }
     #renderAddButton() {
+        // TODO: Stop preventing adding more, instead implement proper validation for user feedback. [NL]
         if ((this._cards && this.max && this._cards.length >= this.max) || (this._cards.length && !this.multiple))
             return;
-        return html `
-			<uui-button
-				id="btn-add"
-				look="placeholder"
-				@click=${this.#openPicker}
-				label=${this.localize.term('general_choose')}>
-				<uui-icon name="icon-add"></uui-icon>
-				${this.localize.term('general_choose')}
-			</uui-button>
-		`;
+        if (this.readonly && this._cards.length > 0) {
+            return nothing;
+        }
+        else {
+            return html `
+				<uui-button
+					id="btn-add"
+					look="placeholder"
+					@click=${this.#openPicker}
+					label=${this.localize.term('general_choose')}
+					?disabled=${this.readonly}>
+					<uui-icon name="icon-add"></uui-icon>
+					${this.localize.term('general_choose')}
+				</uui-button>
+			`;
+        }
     }
     #renderItem(item) {
         if (!item.unique)
             return nothing;
-        const href = this._routeBuilder?.({ key: item.unique });
+        const href = this.readonly ? undefined : this._routeBuilder?.({ key: item.unique });
         return html `
-			<uui-card-media id=${item.unique} name=${item.name} .href=${href}>
+			<uui-card-media id=${item.unique} name=${item.name} .href=${href} ?readonly=${this.readonly}>
 				<umb-imaging-thumbnail
 					unique=${item.media}
 					alt=${item.name}
 					icon=${item.icon ?? 'icon-picture'}></umb-imaging-thumbnail>
-				${this.#renderIsTrashed(item)}
-				<uui-action-bar slot="actions">
-					<uui-button
-						label=${this.localize.term('general_remove')}
-						look="secondary"
-						@click=${() => this.#onRemove(item)}>
-						<uui-icon name="icon-trash"></uui-icon>
-					</uui-button>
-				</uui-action-bar>
+				${this.#renderIsTrashed(item)} ${this.#renderActions(item)}
 			</uui-card-media>
 		`;
     }
+    #renderActions(item) {
+        if (this.readonly)
+            return nothing;
+        return html `
+			<uui-action-bar slot="actions">
+				<uui-button label=${this.localize.term('general_remove')} look="secondary" @click=${() => this.#onRemove(item)}>
+					<uui-icon name="icon-trash"></uui-icon>
+				</uui-button>
+			</uui-action-bar>
+		`;
+    }
     #renderIsTrashed(item) {
         if (!item.isTrashed)
             return;
@@ -343,6 +376,9 @@ __decorate([
 __decorate([
     property()
 ], UmbInputRichMediaElement.prototype, "variantId", null);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], UmbInputRichMediaElement.prototype, "readonly", null);
 __decorate([
     state()
 ], UmbInputRichMediaElement.prototype, "_cards", void 0);

package/dist-cms/packages/media/media/components/input-upload-field/index.d.ts

@@ -1,6 +1,2 @@
+export * from './preview/index.js';
 export * from './input-upload-field.element.js';
-export * from './input-upload-field-file.element.js';
-export * from './input-upload-field-audio.element.js';
-export * from './input-upload-field-video.element.js';
-export * from './input-upload-field-svg.element.js';
-export * from './input-upload-field-image.element.js';

package/dist-cms/packages/media/media/components/input-upload-field/index.js

@@ -1,6 +1,2 @@
+export * from './preview/index.js';
 export * from './input-upload-field.element.js';
-export * from './input-upload-field-file.element.js';
-export * from './input-upload-field-audio.element.js';
-export * from './input-upload-field-video.element.js';
-export * from './input-upload-field-svg.element.js';
-export * from './input-upload-field-image.element.js';

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

@@ -1,7 +1,6 @@
 import type { MediaValueType } from '../../property-editors/upload-field/types.js';
 import type { UmbTemporaryFileModel } from '../../../../core/temporary-file/index.js';
 import { UmbLitElement } from '../../../../core/lit-element/index.js';
-import './input-upload-field-file.element.js';
 export declare class UmbInputUploadFieldElement extends UmbLitElement {
     #private;
     set value(value: MediaValueType);
@@ -14,11 +13,15 @@ export declare class UmbInputUploadFieldElement extends UmbLitElement {
     set allowedFileExtensions(value: Array<string>);
     get allowedFileExtensions(): Array<string> | undefined;
     temporaryFile?: UmbTemporaryFileModel;
+    set src(src: string);
+    get src(): string;
     private _src;
     private _extensions?;
+    private _previewAlias?;
     private _dropzone?;
-    render(): import("lit-html").TemplateResult<1>;
-    static styles: import("@lit/reactive-element/css-tag.js").CSSResult[];
+    constructor();
+    render(): import("lit-html").TemplateResult<1> | "An error occurred. No previewer found for the file type.";
+    static readonly styles: import("@lit/reactive-element/css-tag.js").CSSResult[];
 }
 export default UmbInputUploadFieldElement;
 declare global {

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

@@ -4,22 +4,19 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
+import { getMimeTypeFromExtension } from './utils.js';
 import { TemporaryFileStatus, UmbTemporaryFileManager } from '../../../../core/temporary-file/index.js';
 import { UmbId } from '../../../../core/id/index.js';
 import { css, html, nothing, ifDefined, customElement, property, query, state, } from '../../../../../external/lit/index.js';
 import { UmbLitElement } from '../../../../core/lit-element/index.js';
 import { UmbChangeEvent } from '../../../../core/event/index.js';
-import './input-upload-field-file.element.js';
+import { UmbExtensionsManifestInitializer } from '../../../../../libs/extension-api/index.js';
+import { umbExtensionsRegistry } from '../../../../core/extension-registry/index.js';
 let UmbInputUploadFieldElement = class UmbInputUploadFieldElement extends UmbLitElement {
-    constructor() {
-        super(...arguments);
-        this._src = '';
-        this.#manager = new UmbTemporaryFileManager(this);
-    }
     set value(value) {
         if (!value?.src)
             return;
-        this._src = value.src;
+        this.src = value.src;
     }
     get value() {
         return !this.temporaryFile ? { src: this._src } : { temporaryFileId: this.temporaryFile.temporaryUnique };
@@ -35,7 +32,24 @@ let UmbInputUploadFieldElement = class UmbInputUploadFieldElement extends UmbLit
     get allowedFileExtensions() {
         return this._extensions;
     }
+    set src(src) {
+        this._src = src;
+        this._previewAlias = this.#getPreviewElementAlias();
+    }
+    get src() {
+        return this._src;
+    }
     #manager;
+    #manifests;
+    constructor() {
+        super();
+        this._src = '';
+        this.#manager = new UmbTemporaryFileManager(this);
+        this.#manifests = [];
+        new UmbExtensionsManifestInitializer(this, umbExtensionsRegistry, 'fileUploadPreview', null, (manifests) => {
+            this.#manifests = manifests.map((manifest) => manifest.manifest);
+        });
+    }
     #setExtensions(extensions) {
         if (!extensions?.length) {
             this._extensions = undefined;
@@ -44,6 +58,46 @@ let UmbInputUploadFieldElement = class UmbInputUploadFieldElement extends UmbLit
         // TODO: The dropzone uui component does not support file extensions without a dot. Remove this when it does.
         this._extensions = extensions?.map((extension) => `.${extension}`);
     }
+    #getPreviewElementAlias() {
+        const fallbackAlias = this.#manifests.find((manifest) => manifest.forMimeTypes.includes('*/*'))?.alias;
+        const mimeType = this.#getMimeTypeFromPath(this._src);
+        if (!mimeType)
+            return fallbackAlias;
+        // Check for an exact match
+        const exactMatch = this.#manifests.find((manifest) => {
+            return manifest.forMimeTypes.includes(mimeType);
+        });
+        if (exactMatch)
+            return exactMatch.alias;
+        // Check for wildcard match (e.g. image/*)
+        const wildcardMatch = this.#manifests.find((manifest) => {
+            const forMimeTypes = Array.isArray(manifest.forMimeTypes) ? manifest.forMimeTypes : [manifest.forMimeTypes];
+            return forMimeTypes.find((type) => {
+                const snippet = type.replace(/\*/g, '');
+                if (mimeType.startsWith(snippet))
+                    return manifest.alias;
+                if (mimeType.endsWith(snippet))
+                    return manifest.alias;
+                return undefined;
+            });
+        });
+        if (wildcardMatch)
+            return wildcardMatch.alias;
+        // Use fallbackAlias.
+        return fallbackAlias;
+    }
+    #getMimeTypeFromPath(path) {
+        // Extract the the MIME type from the data url
+        if (path.startsWith('data:')) {
+            const mimeType = path.substring(5, path.indexOf(';'));
+            return mimeType;
+        }
+        // Extract the file extension from the path
+        const extension = path.split('.').pop()?.toLowerCase();
+        if (!extension)
+            return null;
+        return getMimeTypeFromExtension('.' + extension);
+    }
     async #onUpload(e) {
         //Property Editor for Upload field will always only have one file.
         const item = {
@@ -53,7 +107,7 @@ let UmbInputUploadFieldElement = class UmbInputUploadFieldElement extends UmbLit
         const upload = this.#manager.uploadOne(item);
         const reader = new FileReader();
         reader.onload = () => {
-            this._src = reader.result;
+            this.src = reader.result;
         };
         reader.readAsDataURL(item.file);
         const uploaded = await upload;
@@ -69,7 +123,12 @@ let UmbInputUploadFieldElement = class UmbInputUploadFieldElement extends UmbLit
         this._dropzone.browse();
     }
     render() {
-        return html `${this._src ? this.#renderFile(this._src, this.temporaryFile?.file) : this.#renderDropzone()}`;
+        if (this.src && this._previewAlias) {
+            return this.#renderFile(this.src, this._previewAlias, this.temporaryFile?.file);
+        }
+        else {
+            return this.#renderDropzone();
+        }
     }
     #renderDropzone() {
         return html `
@@ -83,12 +142,17 @@ let UmbInputUploadFieldElement = class UmbInputUploadFieldElement extends UmbLit
 			</uui-file-dropzone>
 		`;
     }
-    #renderFile(src, file) {
-        const extension = this.#getFileExtensionFromPath(src);
+    #renderFile(src, previewAlias, file) {
+        if (!previewAlias)
+            return 'An error occurred. No previewer found for the file type.';
         return html `
 			<div id="wrapper">
 				<div style="position:relative; display: flex; width: fit-content; max-width: 100%">
-					${getElementTemplate()}
+					<umb-extension-slot
+						type="fileUploadPreview"
+						.props=${{ path: src, file: file }}
+						.filter=${(manifest) => manifest.alias === previewAlias}>
+					</umb-extension-slot>
 					${this.temporaryFile?.status === TemporaryFileStatus.WAITING
             ? html `<umb-temporary-file-badge></umb-temporary-file-badge>`
             : nothing}
@@ -96,50 +160,6 @@ let UmbInputUploadFieldElement = class UmbInputUploadFieldElement extends UmbLit
 			</div>
 			${this.#renderButtonRemove()}
 		`;
-        /**
-         *
-         */
-        function getElementTemplate() {
-            switch (extension) {
-                case '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=${src}></umb-input-upload-field-video>`;
-                case '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=${src}></umb-input-upload-field-svg>`;
-                default:
-                    return html `<umb-input-upload-field-file .path=${src} .file=${file}></umb-input-upload-field-file>`;
-            }
-        }
-    }
-    #getFileExtensionFromPath(path) {
-        // Extract the MIME type from the data URL
-        if (path.startsWith('data:')) {
-            const mimeType = path.substring(5, path.indexOf(';'));
-            if (mimeType === 'image/svg+xml')
-                return 'svg';
-            if (mimeType.startsWith('image/'))
-                return 'image';
-            if (mimeType.startsWith('audio/'))
-                return 'audio';
-            if (mimeType.startsWith('video/'))
-                return 'video';
-        }
-        // Extract the file extension from the path
-        const extension = path.split('.').pop()?.toLowerCase();
-        if (!extension)
-            return 'file';
-        if (['svg'].includes(extension))
-            return 'svg';
-        if (['mp3', 'weba', 'oga', 'opus'].includes(extension))
-            return 'audio';
-        if (['mp4', 'mov', 'webm', 'ogv'].includes(extension))
-            return 'video';
-        if (['jpg', 'jpeg', 'png', 'gif'].includes(extension))
-            return 'image';
-        return 'file';
     }
     #renderButtonRemove() {
         return html `<uui-button compact @click=${this.#handleRemove} label=${this.localize.term('content_uploadClear')}>
@@ -147,7 +167,7 @@ let UmbInputUploadFieldElement = class UmbInputUploadFieldElement extends UmbLit
 		</uui-button>`;
     }
     #handleRemove() {
-        this._src = '';
+        this.src = '';
         this.temporaryFile = undefined;
         this.dispatchEvent(new UmbChangeEvent());
     }
@@ -204,6 +224,9 @@ __decorate([
 __decorate([
     state()
 ], UmbInputUploadFieldElement.prototype, "_extensions", void 0);
+__decorate([
+    state()
+], UmbInputUploadFieldElement.prototype, "_previewAlias", void 0);
 __decorate([
     query('#dropzone')
 ], UmbInputUploadFieldElement.prototype, "_dropzone", void 0);

package/dist-cms/packages/media/media/components/input-upload-field/manifests.d.ts

@@ -0,0 +1 @@
+export * from './preview/manifest.js';

package/dist-cms/packages/media/media/components/input-upload-field/manifests.js

@@ -0,0 +1 @@
+export * from './preview/manifest.js';

package/dist-cms/packages/media/media/components/input-upload-field/preview/index.d.ts

@@ -0,0 +1,5 @@
+export * from './input-upload-field-file.element.js';
+export * from './input-upload-field-audio.element.js';
+export * from './input-upload-field-video.element.js';
+export * from './input-upload-field-svg.element.js';
+export * from './input-upload-field-image.element.js';

package/dist-cms/packages/media/media/components/input-upload-field/preview/index.js

@@ -0,0 +1,5 @@
+export * from './input-upload-field-file.element.js';
+export * from './input-upload-field-audio.element.js';
+export * from './input-upload-field-video.element.js';
+export * from './input-upload-field-svg.element.js';
+export * from './input-upload-field-image.element.js';

package/dist-cms/packages/media/media/components/input-upload-field/preview/input-upload-field-audio.element.d.ts

@@ -0,0 +1,11 @@
+import { UmbLitElement } from '../../../../../core/lit-element/index.js';
+export default class UmbInputUploadFieldAudioElement extends UmbLitElement {
+    path: string;
+    render(): import("lit-html").TemplateResult<1>;
+    static readonly styles: import("@lit/reactive-element/css-tag.js").CSSResult[];
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'umb-input-upload-field-audio': UmbInputUploadFieldAudioElement;
+    }
+}

package/dist-cms/packages/media/media/components/input-upload-field/{input-upload-field-audio.element.js → preview/input-upload-field-audio.element.js}

@@ -4,8 +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, css } from '../../../../../external/lit/index.js';
-import { UmbLitElement } from '../../../../core/lit-element/index.js';
+import { html, customElement, property, css } from '../../../../../../external/lit/index.js';
+import { UmbLitElement } from '../../../../../core/lit-element/index.js';
 let UmbInputUploadFieldAudioElement = class UmbInputUploadFieldAudioElement extends UmbLitElement {
     constructor() {
         super(...arguments);
@@ -35,4 +35,4 @@ __decorate([
 UmbInputUploadFieldAudioElement = __decorate([
     customElement('umb-input-upload-field-audio')
 ], UmbInputUploadFieldAudioElement);
-export { UmbInputUploadFieldAudioElement };
+export default UmbInputUploadFieldAudioElement;

package/dist-cms/packages/media/media/components/input-upload-field/{input-upload-field-file.element.d.ts → preview/input-upload-field-file.element.d.ts}

@@ -1,6 +1,6 @@
-import type { PropertyValueMap } from '../../../../../external/lit/index.js';
-import { UmbLitElement } from '../../../../core/lit-element/index.js';
-export declare class UmbInputUploadFieldFileElement extends UmbLitElement {
+import type { PropertyValueMap } from '../../../../../../external/lit/index.js';
+import { UmbLitElement } from '../../../../../core/lit-element/index.js';
+export default class UmbInputUploadFieldFileElement extends UmbLitElement {
     #private;
     path: string;
     /**
@@ -17,7 +17,7 @@ export declare class UmbInputUploadFieldFileElement extends UmbLitElement {
     constructor();
     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[];
+    static readonly styles: import("@lit/reactive-element/css-tag.js").CSSResult[];
 }
 declare global {
     interface HTMLElementTagNameMap {