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

package/dist-cms/packages/media/media/dropzone/modals/dropzone-media-type-picker/dropzone-media-type-picker-modal.element.js

@@ -0,0 +1,72 @@
+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 { css, customElement, html, query, repeat, state } from '../../../../../../external/lit/index.js';
+import { UmbModalBaseElement } from '../../../../../core/modal/index.js';
+import { UmbTextStyles } from '../../../../../core/style/index.js';
+let UmbDropzoneMediaTypePickerModalElement = class UmbDropzoneMediaTypePickerModalElement extends UmbModalBaseElement {
+    constructor() {
+        super(...arguments);
+        this._options = [];
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this._options = this.data?.options ?? [];
+        requestAnimationFrame(() => this._buttonAuto.focus());
+    }
+    #onMediaTypePick(unique) {
+        this.value = { mediaTypeUnique: unique };
+        this._submitModal();
+    }
+    render() {
+        return html ` <div id="options">
+			<uui-button
+				id="auto"
+				look="secondary"
+				@click=${() => this.#onMediaTypePick(undefined)}
+				label="Automatically"
+				compact>
+				<umb-icon name="icon-wand"></umb-icon> Auto pick
+			</uui-button>
+			${repeat(this._options, (option) => option.unique, (option) => html `<uui-button
+						look="secondary"
+						@click=${() => this.#onMediaTypePick(option.unique)}
+						label=${option.name}
+						compact>
+						<umb-icon .name=${option.icon ?? 'icon-circle-dotted'}></umb-icon>${option.name}
+					</uui-button>`)}
+		</div>`;
+    }
+    static { this.styles = [
+        UmbTextStyles,
+        css `
+			#options {
+				display: flex;
+				margin: var(--uui-size-layout-1);
+				gap: var(--uui-size-3);
+			}
+			uui-button {
+				width: 150px;
+				height: 150px;
+			}
+			umb-icon {
+				font-size: var(--uui-size-10);
+				margin-bottom: var(--uui-size-2);
+			}
+		`,
+    ]; }
+};
+__decorate([
+    state()
+], UmbDropzoneMediaTypePickerModalElement.prototype, "_options", void 0);
+__decorate([
+    query('#auto')
+], UmbDropzoneMediaTypePickerModalElement.prototype, "_buttonAuto", void 0);
+UmbDropzoneMediaTypePickerModalElement = __decorate([
+    customElement('umb-dropzone-media-type-picker-modal')
+], UmbDropzoneMediaTypePickerModalElement);
+export { UmbDropzoneMediaTypePickerModalElement };
+export default UmbDropzoneMediaTypePickerModalElement;

package/dist-cms/packages/media/media/dropzone/modals/dropzone-media-type-picker/dropzone-media-type-picker-modal.token.d.ts

@@ -0,0 +1,10 @@
+import type { UmbAllowedMediaTypeModel } from '../../../../media-types/index.js';
+import { UmbModalToken } from '../../../../../core/modal/index.js';
+export interface UmbDropzoneMediaTypePickerModalData {
+    options: Array<UmbAllowedMediaTypeModel>;
+    files?: Array<File>;
+}
+export type UmbDropzoneMediaTypePickerModalValue = {
+    mediaTypeUnique: string | undefined;
+};
+export declare const UMB_DROPZONE_MEDIA_TYPE_PICKER_MODAL: UmbModalToken<UmbDropzoneMediaTypePickerModalData, UmbDropzoneMediaTypePickerModalValue>;

package/dist-cms/packages/media/media/dropzone/modals/dropzone-media-type-picker/dropzone-media-type-picker-modal.token.js

@@ -0,0 +1,6 @@
+import { UmbModalToken } from '../../../../../core/modal/index.js';
+export const UMB_DROPZONE_MEDIA_TYPE_PICKER_MODAL = new UmbModalToken('Umb.Modal.Dropzone.MediaTypePicker', {
+    modal: {
+        type: 'dialog',
+    },
+});

package/dist-cms/packages/media/media/dropzone/modals/dropzone-media-type-picker/index.d.ts

@@ -0,0 +1,2 @@
+export * from './dropzone-media-type-picker-modal.element.js';
+export * from './dropzone-media-type-picker-modal.token.js';

package/dist-cms/packages/media/media/dropzone/modals/dropzone-media-type-picker/index.js

@@ -0,0 +1,2 @@
+export * from './dropzone-media-type-picker-modal.element.js';
+export * from './dropzone-media-type-picker-modal.token.js';

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

@@ -0,0 +1 @@
+export * from './dropzone-media-type-picker/index.js';

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

@@ -0,0 +1 @@
+export * from './dropzone-media-type-picker/index.js';

package/dist-cms/packages/media/media/dropzone/modals/manifests.d.ts

@@ -0,0 +1,2 @@
+import type { ManifestTypes } from '../../../../core/extension-registry/index.js';
+export declare const manifests: Array<ManifestTypes>;

package/dist-cms/packages/media/media/dropzone/modals/manifests.js

@@ -0,0 +1,9 @@
+const modals = [
+    {
+        type: 'modal',
+        alias: 'Umb.Modal.Dropzone.MediaTypePicker',
+        name: 'Dropzone Media Type Picker Modal',
+        js: () => import('./dropzone-media-type-picker/dropzone-media-type-picker-modal.element.js'),
+    },
+];
+export const manifests = [...modals];

package/dist-cms/packages/media/media/entity-actions/create/media-create-options-modal.token.d.ts

@@ -1,9 +1,7 @@
+import type { UmbEntityModel } from '../../../../core/entity/index.js';
 import { UmbModalToken } from '../../../../core/modal/index.js';
 export interface UmbMediaCreateOptionsModalData {
-    parent: {
-        unique: string | null;
-        entityType: string;
-    };
+    parent: UmbEntityModel;
     mediaType: {
         unique: string;
     } | null;

package/dist-cms/packages/media/media/entity.d.ts

@@ -2,3 +2,4 @@ export declare const UMB_MEDIA_ENTITY_TYPE = "media";
 export declare const UMB_MEDIA_ROOT_ENTITY_TYPE = "media-root";
 export type UmbMediaEntityType = typeof UMB_MEDIA_ENTITY_TYPE;
 export type UmbMediaRootEntityType = typeof UMB_MEDIA_ROOT_ENTITY_TYPE;
+export type UmbMediaEntityTypeUnion = UmbMediaEntityType | UmbMediaRootEntityType;

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

@@ -4,10 +4,12 @@ export * from './repository/index.js';
 export * from './workspace/index.js';
 export * from './reference/index.js';
 export * from './components/index.js';
+export * from './dropzone/index.js';
 export * from './entity.js';
 export * from './paths.js';
 export * from './utils/index.js';
 export { UMB_MEDIA_TREE_ALIAS, UMB_MEDIA_TREE_PICKER_MODAL } from './tree/index.js';
 export { UMB_MEDIA_COLLECTION_ALIAS } from './collection/index.js';
 export { UMB_MEDIA_MENU_ALIAS } from './menu/manifests.js';
+export { UMB_MEDIA_PICKER_MODAL } from './modals/media-picker/index.js';
 export type { UmbMediaTreeItemModel } from './tree/index.js';

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

@@ -4,9 +4,11 @@ export * from './repository/index.js';
 export * from './workspace/index.js';
 export * from './reference/index.js';
 export * from './components/index.js';
+export * from './dropzone/index.js';
 export * from './entity.js';
 export * from './paths.js';
 export * from './utils/index.js';
 export { UMB_MEDIA_TREE_ALIAS, UMB_MEDIA_TREE_PICKER_MODAL } from './tree/index.js';
 export { UMB_MEDIA_COLLECTION_ALIAS } from './collection/index.js';
 export { UMB_MEDIA_MENU_ALIAS } from './menu/manifests.js';
+export { UMB_MEDIA_PICKER_MODAL } from './modals/media-picker/index.js';

package/dist-cms/packages/media/media/manifests.js

@@ -1,7 +1,9 @@
 import { manifests as collectionManifests } from './collection/manifests.js';
+import { manifests as dropzoneManifests } from './dropzone/manifests.js';
 import { manifests as entityActionsManifests } from './entity-actions/manifests.js';
 import { manifests as entityBulkActionsManifests } from './entity-bulk-actions/manifests.js';
 import { manifests as menuManifests } from './menu/manifests.js';
+import { manifests as modalManifests } from './modals/manifests.js';
 import { manifests as propertyEditorsManifests } from './property-editors/manifests.js';
 import { manifests as recycleBinManifests } from './recycle-bin/manifests.js';
 import { manifests as repositoryManifests } from './repository/manifests.js';
@@ -11,9 +13,11 @@ import { manifests as treeManifests } from './tree/manifests.js';
 import { manifests as workspaceManifests } from './workspace/manifests.js';
 export const manifests = [
     ...collectionManifests,
+    ...dropzoneManifests,
     ...entityActionsManifests,
     ...entityBulkActionsManifests,
     ...menuManifests,
+    ...modalManifests,
     ...propertyEditorsManifests,
     ...recycleBinManifests,
     ...repositoryManifests,

package/dist-cms/packages/media/media/modals/index.d.ts

@@ -0,0 +1 @@
+export * from './media-picker/index.js';

package/dist-cms/packages/media/media/modals/index.js

@@ -0,0 +1 @@
+export * from './media-picker/index.js';

package/dist-cms/packages/media/media/modals/manifests.d.ts

@@ -0,0 +1 @@
+export declare const manifests: import("../../../core/extension-registry/index.js").ManifestModal[];

package/dist-cms/packages/media/media/modals/manifests.js

@@ -0,0 +1,2 @@
+import { manifests as mediaPickerManifests } from './media-picker/manifests.js';
+export const manifests = [...mediaPickerManifests];

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

@@ -0,0 +1,2 @@
+export * from './media-picker-folder-path.element.js';
+export * from './media-picker-create-item.element.js';

package/dist-cms/packages/media/media/modals/media-picker/components/index.js

@@ -0,0 +1,2 @@
+export * from './media-picker-folder-path.element.js';
+export * from './media-picker-create-item.element.js';

package/dist-cms/packages/media/media/modals/media-picker/components/media-picker-create-item.element.d.ts

@@ -0,0 +1,17 @@
+import { UmbLitElement } from '../../../../../core/lit-element/index.js';
+export declare class UmbMediaPickerCreateItemElement extends UmbLitElement {
+    #private;
+    private _node;
+    set node(value: string | null);
+    get node(): string | null;
+    private _popoverOpen;
+    private _allowedMediaTypes;
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: import("@lit/reactive-element/css-tag.js").CSSResult[];
+}
+export default UmbMediaPickerCreateItemElement;
+declare global {
+    interface HTMLElementTagNameMap {
+        'umb-media-picker-create-item': UmbMediaPickerCreateItemElement;
+    }
+}

package/dist-cms/packages/media/media/modals/media-picker/components/media-picker-create-item.element.js

@@ -0,0 +1,93 @@
+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 { UmbMediaDetailRepository } from '../../../repository/detail/media-detail.repository.js';
+import { css, html, customElement, state, repeat, property } from '../../../../../../external/lit/index.js';
+import { UmbLitElement } from '../../../../../core/lit-element/index.js';
+import { UmbMediaTypeStructureRepository } from '../../../../media-types/index.js';
+let UmbMediaPickerCreateItemElement = class UmbMediaPickerCreateItemElement extends UmbLitElement {
+    constructor() {
+        super(...arguments);
+        this.#mediaTypeStructure = new UmbMediaTypeStructureRepository(this); // used to get allowed media items
+        this.#mediaDetailRepository = new UmbMediaDetailRepository(this); // used to get media type of node
+        this._node = null;
+        this._popoverOpen = false;
+        this._allowedMediaTypes = [];
+    }
+    #mediaTypeStructure; // used to get allowed media items
+    #mediaDetailRepository; // used to get media type of node
+    set node(value) {
+        this._node = value;
+        this.#getAllowedMediaTypes();
+    }
+    get node() {
+        return this._node;
+    }
+    async #getNodeMediaType() {
+        if (!this._node)
+            return null;
+        const { data } = await this.#mediaDetailRepository.requestByUnique(this.node);
+        return data?.mediaType.unique ?? null;
+    }
+    async #getAllowedMediaTypes() {
+        const mediaType = await this.#getNodeMediaType();
+        const { data: allowedMediaTypes } = await this.#mediaTypeStructure.requestAllowedChildrenOf(mediaType);
+        this._allowedMediaTypes = allowedMediaTypes?.items ?? [];
+    }
+    // TODO: This ignorer is just neede for JSON SCHEMA TO WORK, As its not updated with latest TS jet.
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    #onPopoverToggle(event) {
+        this._popoverOpen = event.newState === 'open';
+    }
+    render() {
+        return html `
+			<uui-button
+				popovertarget="collection-action-menu-popover"
+				label=${this.localize.term('actions_create')}
+				color="default"
+				look="outline">
+				${this.localize.term('actions_create')}
+				<uui-symbol-expand .open=${this._popoverOpen}></uui-symbol-expand>
+			</uui-button>
+			<uui-popover-container
+				id="collection-action-menu-popover"
+				placement="bottom-start"
+				@toggle=${this.#onPopoverToggle}>
+				<umb-popover-layout>
+					<uui-scroll-container>
+						${!this._allowedMediaTypes.length
+            ? html `<div id="not-allowed">${this.localize.term('mediaPicker_notAllowed')}</div>`
+            : repeat(this._allowedMediaTypes, (item) => item.unique, (item) => html `<uui-menu-item label=${item.name}>
+											<umb-icon slot="icon" name=${item.icon ?? 'icon-circle-dotted'}></umb-icon>
+										</uui-menu-item>`)}
+					</uui-scroll-container>
+				</umb-popover-layout>
+			</uui-popover-container>
+		`;
+    }
+    static { this.styles = [
+        css `
+			#not-allowed {
+				padding: var(--uui-size-space-3);
+			}
+		`,
+    ]; }
+};
+__decorate([
+    property()
+], UmbMediaPickerCreateItemElement.prototype, "node", null);
+__decorate([
+    state()
+], UmbMediaPickerCreateItemElement.prototype, "_popoverOpen", void 0);
+__decorate([
+    state()
+], UmbMediaPickerCreateItemElement.prototype, "_allowedMediaTypes", void 0);
+UmbMediaPickerCreateItemElement = __decorate([
+    customElement('umb-media-picker-create-item')
+], UmbMediaPickerCreateItemElement);
+export { UmbMediaPickerCreateItemElement };
+export default UmbMediaPickerCreateItemElement;

package/dist-cms/packages/media/media/modals/media-picker/components/media-picker-folder-path.element.d.ts

@@ -0,0 +1,19 @@
+import type { UmbMediaPathModel } from '../types.js';
+import { UmbLitElement } from '../../../../../core/lit-element/index.js';
+export declare class UmbMediaPickerFolderPathElement extends UmbLitElement {
+    #private;
+    set currentMedia(value: UmbMediaPathModel);
+    get currentMedia(): UmbMediaPathModel;
+    private _currentMedia;
+    private _paths;
+    private _typingNewFolder;
+    connectedCallback(): void;
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: import("@lit/reactive-element/css-tag.js").CSSResult[];
+}
+export default UmbMediaPickerFolderPathElement;
+declare global {
+    interface HTMLElementTagNameMap {
+        'umb-media-picker-folder-path': UmbMediaPickerFolderPathElement;
+    }
+}

package/dist-cms/packages/media/media/modals/media-picker/components/media-picker-folder-path.element.js

@@ -0,0 +1,155 @@
+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 { UmbMediaDetailRepository } from '../../../repository/index.js';
+import { UmbMediaTreeRepository } from '../../../tree/index.js';
+import { UMB_MEDIA_ENTITY_TYPE, UMB_MEDIA_ROOT_ENTITY_TYPE } from '../../../entity.js';
+import { css, html, customElement, state, repeat, property } from '../../../../../../external/lit/index.js';
+import { UmbId } from '../../../../../core/id/index.js';
+import { getUmbracoFolderUnique } from '../../../../media-types/index.js';
+import { UmbLitElement } from '../../../../../core/lit-element/index.js';
+import { UmbChangeEvent } from '../../../../../core/event/index.js';
+const root = { name: 'Media', unique: null, entityType: UMB_MEDIA_ROOT_ENTITY_TYPE };
+let UmbMediaPickerFolderPathElement = class UmbMediaPickerFolderPathElement extends UmbLitElement {
+    constructor() {
+        super(...arguments);
+        this.#mediaTreeRepository = new UmbMediaTreeRepository(this); // used to get file structure
+        this.#mediaDetailRepository = new UmbMediaDetailRepository(this); // used to create folders
+        this._currentMedia = root;
+        this._paths = [root];
+        this._typingNewFolder = false;
+    }
+    #mediaTreeRepository; // used to get file structure
+    #mediaDetailRepository; // used to create folders
+    set currentMedia(value) {
+        if (value !== this._currentMedia) {
+            this._currentMedia = value;
+            this.#loadPath();
+        }
+    }
+    get currentMedia() {
+        return this._currentMedia;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.#loadPath();
+    }
+    async #loadPath() {
+        const unique = this._currentMedia.unique;
+        const items = unique
+            ? (await this.#mediaTreeRepository.requestTreeItemAncestors({
+                treeItem: { unique, entityType: UMB_MEDIA_ENTITY_TYPE },
+            })).data
+            : undefined;
+        if (items) {
+            this._paths = [
+                root,
+                ...items.map((item) => ({ name: item.name, unique: item.unique, entityType: item.entityType })),
+            ];
+            return;
+        }
+        this._paths = [root];
+    }
+    #goToFolder(entity) {
+        this._paths = [...this._paths].slice(0, this._paths.findIndex((path) => path.unique === entity.unique) + 1);
+        this.currentMedia = entity;
+        this.dispatchEvent(new UmbChangeEvent());
+    }
+    #focusFolderInput() {
+        this._typingNewFolder = true;
+        requestAnimationFrame(() => {
+            const element = this.getHostElement().shadowRoot.querySelector('#new-folder');
+            element.focus();
+            element.select();
+        });
+    }
+    async #addFolder(e) {
+        e.stopPropagation();
+        const newName = e.target.value;
+        this._typingNewFolder = false;
+        if (!newName)
+            return;
+        const newUnique = UmbId.new();
+        const parentUnique = this._paths[this._paths.length - 1].unique;
+        const preset = {
+            unique: newUnique,
+            mediaType: {
+                unique: getUmbracoFolderUnique(),
+                collection: null,
+            },
+            variants: [
+                {
+                    culture: null,
+                    segment: null,
+                    name: newName,
+                    createDate: null,
+                    updateDate: null,
+                },
+            ],
+        };
+        const { data: scaffold } = await this.#mediaDetailRepository.createScaffold(preset);
+        if (!scaffold)
+            return;
+        const { data } = await this.#mediaDetailRepository.create(scaffold, parentUnique);
+        if (!data)
+            return;
+        const name = data.variants[0].name;
+        const unique = data.unique;
+        const entityType = data.entityType;
+        this._paths = [...this._paths, { name, unique, entityType }];
+        this.currentMedia = { name, unique, entityType };
+        this.dispatchEvent(new UmbChangeEvent());
+    }
+    render() {
+        return html `<div id="path">
+			${repeat(this._paths, (path) => path.unique, (path) => html `<uui-button
+							compact
+							.label=${path.name}
+							?disabled=${this.currentMedia.unique === path.unique}
+							@click=${() => this.#goToFolder(path)}></uui-button
+						>/`)}${this._typingNewFolder
+            ? html `<uui-input
+						id="new-folder"
+						label="enter a name"
+						value="new folder name"
+						@blur=${this.#addFolder}
+						auto-width></uui-input>`
+            : html `<uui-button label="add folder" compact @click=${this.#focusFolderInput}>+</uui-button>`}
+		</div>`;
+    }
+    static { this.styles = [
+        css `
+			#path {
+				display: flex;
+				align-items: center;
+				margin: 0 var(--uui-size-3);
+			}
+			#path uui-button {
+				font-weight: bold;
+			}
+			#path uui-input {
+				height: 100%;
+			}
+		`,
+    ]; }
+};
+__decorate([
+    property({ attribute: false })
+], UmbMediaPickerFolderPathElement.prototype, "currentMedia", null);
+__decorate([
+    state()
+], UmbMediaPickerFolderPathElement.prototype, "_currentMedia", void 0);
+__decorate([
+    state()
+], UmbMediaPickerFolderPathElement.prototype, "_paths", void 0);
+__decorate([
+    state()
+], UmbMediaPickerFolderPathElement.prototype, "_typingNewFolder", void 0);
+UmbMediaPickerFolderPathElement = __decorate([
+    customElement('umb-media-picker-folder-path')
+], UmbMediaPickerFolderPathElement);
+export { UmbMediaPickerFolderPathElement };
+export default UmbMediaPickerFolderPathElement;

package/dist-cms/packages/media/media/modals/media-picker/index.d.ts

@@ -0,0 +1,4 @@
+export * from './components/index.js';
+export * from './media-picker-modal.element.js';
+export * from './media-picker-modal.token.js';
+export * from './types.js';

package/dist-cms/packages/media/media/modals/media-picker/index.js

@@ -0,0 +1,4 @@
+export * from './components/index.js';
+export * from './media-picker-modal.element.js';
+export * from './media-picker-modal.token.js';
+export * from './types.js';

package/dist-cms/packages/media/media/modals/media-picker/manifests.d.ts

@@ -0,0 +1,2 @@
+import type { ManifestModal } from '../../../../core/extension-registry/index.js';
+export declare const manifests: ManifestModal[];

package/dist-cms/packages/media/media/modals/media-picker/manifests.js

@@ -0,0 +1,9 @@
+const modals = [
+    {
+        type: 'modal',
+        alias: 'Umb.Modal.MediaPicker',
+        name: 'Media Picker Modal',
+        js: () => import('./media-picker-modal.element.js'),
+    },
+];
+export const manifests = [...modals];

package/dist-cms/packages/media/media/modals/media-picker/media-picker-modal.element.d.ts

@@ -0,0 +1,22 @@
+import type { UmbMediaPickerModalData, UmbMediaPickerModalValue } from './media-picker-modal.token.js';
+import { UmbModalBaseElement } from '../../../../core/modal/index.js';
+export declare class UmbMediaPickerModalElement extends UmbModalBaseElement<UmbMediaPickerModalData<unknown>, UmbMediaPickerModalValue> {
+    #private;
+    private _filter;
+    private _selectableFilter;
+    private _mediaFilteredList;
+    private _searchOnlyThisFolder;
+    private _searchQuery;
+    private _currentMediaEntity;
+    private _dropzone;
+    constructor();
+    connectedCallback(): Promise<void>;
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: import("@lit/reactive-element/css-tag.js").CSSResult[];
+}
+export default UmbMediaPickerModalElement;
+declare global {
+    interface HTMLElementTagNameMap {
+        'umb-media-picker-modal': UmbMediaPickerModalElement;
+    }
+}