@umbraco-cms/backoffice 14.0.0-178e68bb → 14.0.0-1ab621da

package/dist-cms/packages/{settings/logviewer → log-viewer}/workspace/views/search/components/log-viewer-polling-button.element.js

@@ -5,9 +5,8 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { UMB_APP_LOG_VIEWER_CONTEXT_TOKEN, } from '../../../logviewer.context.js';
-import { UUITextStyles } from '../../../../../../../external/uui/index.js';
-import { css, html, customElement, query, state } from '../../../../../../../external/lit/index.js';
-import { UmbLitElement } from '../../../../../../../shared/lit-element/index.js';
+import { css, html, customElement, query, state } from '../../../../../../external/lit/index.js';
+import { UmbLitElement } from '../../../../../../shared/lit-element/index.js';
 export let UmbLogViewerPollingButtonElement = class UmbLogViewerPollingButtonElement extends UmbLitElement {
     #pollingIntervals;
     #logViewerContext;
@@ -66,7 +65,6 @@ export let UmbLogViewerPollingButtonElement = class UmbLogViewerPollingButtonEle
 		</uui-button-group>`;
     }
     static { this.styles = [
-        UUITextStyles,
         css `
 			#polling-interval-menu {
 				margin: 0;

package/dist-cms/packages/{settings/logviewer → log-viewer}/workspace/views/search/components/log-viewer-search-input-modal.element.d.ts

@@ -1,5 +1,5 @@
-import { UmbModalBaseElement } from '../../../../../../../shared/modal/index.js';
-import { SavedLogSearchPresenationBaseModel } from '../../../../../../../external/backend-api/index.js';
+import { UmbModalBaseElement } from '../../../../../../shared/modal/index.js';
+import { SavedLogSearchPresenationBaseModel } from '../../../../../../external/backend-api/index.js';
 export default class UmbLogViewerSaveSearchModalElement extends UmbModalBaseElement<{
     query: string;
 }, SavedLogSearchPresenationBaseModel> {

package/dist-cms/packages/{settings/logviewer → log-viewer}/workspace/views/search/components/log-viewer-search-input-modal.element.js

@@ -4,9 +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, css, customElement, query, state } from '../../../../../../../external/lit/index.js';
-import { UUITextStyles } from '../../../../../../../external/uui/index.js';
-import { UmbModalBaseElement } from '../../../../../../../shared/modal/index.js';
+import { html, css, customElement, query, state } from '../../../../../../external/lit/index.js';
+import { UmbModalBaseElement } from '../../../../../../shared/modal/index.js';
 let UmbLogViewerSaveSearchModalElement = class UmbLogViewerSaveSearchModalElement extends UmbModalBaseElement {
     constructor() {
         super(...arguments);
@@ -49,7 +48,6 @@ let UmbLogViewerSaveSearchModalElement = class UmbLogViewerSaveSearchModalElemen
 		`;
     }
     static { this.styles = [
-        UUITextStyles,
         css `
 			uui-input {
 				width: 100%;

package/dist-cms/packages/{settings/logviewer → log-viewer}/workspace/views/search/components/log-viewer-search-input.element.d.ts

@@ -1,5 +1,5 @@
-import { UmbLitElement } from '../../../../../../../shared/lit-element/index.js';
-import { UmbModalContext, UmbModalToken } from '../../../../../../core/modal/index.js';
+import { UmbLitElement } from '../../../../../../shared/lit-element/index.js';
+import { UmbModalContext, UmbModalToken } from '../../../../../core/modal/index.js';
 import './log-viewer-search-input-modal.element.js';
 export interface UmbContextSaveSearchModalData {
     query: string;

package/dist-cms/packages/{settings/logviewer → log-viewer}/workspace/views/search/components/log-viewer-search-input.element.js

@@ -5,12 +5,11 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { UMB_APP_LOG_VIEWER_CONTEXT_TOKEN } from '../../../logviewer.context.js';
-import { UUITextStyles, } from '../../../../../../../external/uui/index.js';
-import { css, html, customElement, query, state } from '../../../../../../../external/lit/index.js';
-import { Subject, debounceTime, tap } from '../../../../../../../external/rxjs/index.js';
-import { UmbLitElement } from '../../../../../../../shared/lit-element/index.js';
-import { query as getQuery, path, toQueryString } from '../../../../../../../shared/router/index.js';
-import { UMB_MODAL_MANAGER_CONTEXT_TOKEN, UmbModalToken, } from '../../../../../../core/modal/index.js';
+import { css, html, customElement, query, state } from '../../../../../../external/lit/index.js';
+import { Subject, debounceTime, tap } from '../../../../../../external/rxjs/index.js';
+import { UmbLitElement } from '../../../../../../shared/lit-element/index.js';
+import { query as getQuery, path, toQueryString } from '../../../../../../shared/router/index.js';
+import { UMB_MODAL_MANAGER_CONTEXT_TOKEN, UmbModalToken, } from '../../../../../core/modal/index.js';
 import './log-viewer-search-input-modal.element.js';
 export const UMB_LOG_VIEWER_SAVE_SEARCH_MODAL = new UmbModalToken('Umb.Modal.LogViewer.SaveSearch', {
     type: 'dialog',
@@ -153,7 +152,6 @@ export let UmbLogViewerSearchInputElement = class UmbLogViewerSearchInputElement
 		`;
     }
     static { this.styles = [
-        UUITextStyles,
         css `
 			:host {
 				display: flex;

package/dist-cms/packages/{settings/logviewer → log-viewer}/workspace/views/search/log-search-view.element.d.ts

@@ -1,4 +1,4 @@
-import { UmbLitElement } from '../../../../../../shared/lit-element/index.js';
+import { UmbLitElement } from '../../../../../shared/lit-element/index.js';
 export declare class UmbLogViewerSearchViewElement extends UmbLitElement {
     #private;
     private _canShowLogs;

package/dist-cms/packages/{settings/logviewer → log-viewer}/workspace/views/search/log-search-view.element.js

@@ -5,9 +5,9 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { UMB_APP_LOG_VIEWER_CONTEXT_TOKEN } from '../../logviewer.context.js';
-import { UUITextStyles } from '../../../../../../external/uui/index.js';
-import { css, html, customElement, state } from '../../../../../../external/lit/index.js';
-import { UmbLitElement } from '../../../../../../shared/lit-element/index.js';
+import { UmbTextStyles } from "../../../../../shared/style/index.js";
+import { css, html, customElement, state } from '../../../../../external/lit/index.js';
+import { UmbLitElement } from '../../../../../shared/lit-element/index.js';
 export let UmbLogViewerSearchViewElement = class UmbLogViewerSearchViewElement extends UmbLitElement {
     #logViewerContext;
     #canShowLogsObserver;
@@ -54,7 +54,7 @@ export let UmbLogViewerSearchViewElement = class UmbLogViewerSearchViewElement e
 		`;
     }
     static { this.styles = [
-        UUITextStyles,
+        UmbTextStyles,
         css `
 			uui-box {
 				--uui-box-default-padding: 0;

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

@@ -1 +1,2 @@
-export declare const manifests: (import("../core/index.js").ManifestSectionSidebarApp | import("../core/index.js").ManifestCollectionView | import("../core/index.js").ManifestDashboardCollection | import("../core/index.js").ManifestEntityAction | import("../core/index.js").ManifestEntityBulkAction | import("../core/index.js").ManifestMenu | import("../core/index.js").ManifestMenuItem | import("../core/index.js").ManifestRepository | import("../core/index.js").ManifestSection | import("../core/index.js").ManifestStore | import("../core/index.js").ManifestTree | import("../core/index.js").ManifestTreeItem | import("../core/index.js").ManifestTreeStore | import("../core/index.js").ManifestWorkspace | import("../core/index.js").ManifestWorkspaceAction | import("../core/index.js").ManifestWorkspaceEditorView | import("../core/index.js").ManifestWorkspaceViewCollection)[];
+import './media/components/index.js';
+export declare const manifests: (import("../core/index.js").ManifestSectionSidebarApp | import("../core/index.js").ManifestCollectionView | import("../core/index.js").ManifestDashboardCollection | import("../core/index.js").ManifestEntityAction | import("../core/index.js").ManifestEntityBulkAction | import("../core/index.js").ManifestItemStore | import("../core/index.js").ManifestMenu | import("../core/index.js").ManifestMenuItem | import("../core/index.js").ManifestRepository | import("../core/index.js").ManifestSection | import("../core/index.js").ManifestStore | import("../core/index.js").ManifestTree | import("../core/index.js").ManifestTreeItem | import("../core/index.js").ManifestTreeStore | import("../core/index.js").ManifestWorkspace | import("../core/index.js").ManifestWorkspaceAction | import("../core/index.js").ManifestWorkspaceEditorView | import("../core/index.js").ManifestWorkspaceViewCollection | import("../core/index.js").ManifestUserPermission)[];

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

@@ -2,4 +2,5 @@ import { manifests as mediaSectionManifests } from './section.manifests.js';
 import { manifests as mediaMenuManifests } from './menu.manifests.js';
 import { manifests as mediaManifests } from './media/manifests.js';
 import { manifests as mediaTypesManifests } from './media-types/manifests.js';
+import './media/components/index.js';
 export const manifests = [...mediaSectionManifests, ...mediaMenuManifests, ...mediaManifests, ...mediaTypesManifests];

package/dist-cms/packages/media/media/collection-view/collection-view-media-test.element.js

@@ -4,13 +4,13 @@ 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 { UUITextStyles } from '../../../../external/uui/index.js';
+import { UmbTextStyles } from "../../../../shared/style/index.js";
 import { css, html, LitElement, customElement } from '../../../../external/lit/index.js';
 export let UmbCollectionViewMediaTestElement = class UmbCollectionViewMediaTestElement extends LitElement {
     render() {
         return html `umb-collection-view-media-test`;
     }
-    static { this.styles = [UUITextStyles, css ``]; }
+    static { this.styles = [UmbTextStyles, css ``]; }
 };
 UmbCollectionViewMediaTestElement = __decorate([
     customElement('umb-collection-view-media-test')

package/dist-cms/packages/media/media/collection-view/media-grid-collection-view.element.js

@@ -4,7 +4,7 @@ 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 { UUITextStyles } from '../../../../external/uui/index.js';
+import { UmbTextStyles } from "../../../../shared/style/index.js";
 import { css, html, customElement, state, repeat } from '../../../../external/lit/index.js';
 import { UMB_COLLECTION_CONTEXT_TOKEN } from '../../../core/collection/index.js';
 import { UmbLitElement } from '../../../../shared/lit-element/index.js';
@@ -96,7 +96,7 @@ export let UmbMediaGridCollectionViewElement = class UmbMediaGridCollectionViewE
 		`;
     }
     static { this.styles = [
-        UUITextStyles,
+        UmbTextStyles,
         css `
 			:host {
 				display: flex;

package/dist-cms/packages/media/media/collection-view/media-table-collection-view.element.js

@@ -4,7 +4,7 @@ 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 { UUITextStyles } from '../../../../external/uui/index.js';
+import { UmbTextStyles } from "../../../../shared/style/index.js";
 import { css, html, customElement, state } from '../../../../external/lit/index.js';
 import { UMB_COLLECTION_CONTEXT_TOKEN } from '../../../core/collection/index.js';
 import { UmbLitElement } from '../../../../shared/lit-element/index.js';
@@ -84,7 +84,7 @@ export let UmbMediaTableCollectionViewElement = class UmbMediaTableCollectionVie
 		`;
     }
     static { this.styles = [
-        UUITextStyles,
+        UmbTextStyles,
         css `
 			:host {
 				display: block;

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

@@ -1 +1,2 @@
 import './input-media/input-media.element.js';
+export * from './input-media/input-media.element.js';

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

@@ -1 +1,2 @@
 import './input-media/input-media.element.js';
+export * from './input-media/input-media.element.js';

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

@@ -0,0 +1,6 @@
+import { UmbPickerInputContext } from '../../../../core/picker-input/index.js';
+import { UmbControllerHostElement } from '../../../../../libs/controller-api/index.js';
+import { MediaItemResponseModel } from '../../../../../external/backend-api/index.js';
+export declare class UmbMediaPickerContext extends UmbPickerInputContext<MediaItemResponseModel> {
+    constructor(host: UmbControllerHostElement);
+}

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

@@ -0,0 +1,7 @@
+import { UmbPickerInputContext } from '../../../../core/picker-input/index.js';
+import { UMB_MEDIA_TREE_PICKER_MODAL } from '../../../../core/modal/index.js';
+export class UmbMediaPickerContext extends UmbPickerInputContext {
+    constructor(host) {
+        super(host, 'Umb.Repository.Media', UMB_MEDIA_TREE_PICKER_MODAL);
+    }
+}

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

@@ -1,13 +1,15 @@
 import { UmbLitElement } from '../../../../../shared/lit-element/index.js';
 declare const UmbInputMediaElement_base: (new (...args: any[]) => import("../../../../../external/uui/index.js").FormControlMixinInterface) & typeof UmbLitElement;
 export declare class UmbInputMediaElement extends UmbInputMediaElement_base {
+    #private;
     /**
      * This is a minimum amount of selected items in this input.
      * @type {number}
      * @attr
-     * @default undefined
+     * @default 0
      */
-    min?: number;
+    get min(): number;
+    set min(value: number);
     /**
      * Min validation message.
      * @type {boolean}
@@ -19,9 +21,10 @@ export declare class UmbInputMediaElement extends UmbInputMediaElement_base {
      * This is a maximum amount of selected items in this input.
      * @type {number}
      * @attr
-     * @default undefined
+     * @default Infinity
      */
-    max?: number;
+    get max(): number;
+    set max(value: number);
     /**
      * Max validation message.
      * @type {boolean}
@@ -29,24 +32,13 @@ export declare class UmbInputMediaElement extends UmbInputMediaElement_base {
      * @default
      */
     maxMessage: string;
-    private _selectedIds;
     get selectedIds(): Array<string>;
     set selectedIds(ids: Array<string>);
     set value(idsString: string);
     private _items?;
-    private _modalContext?;
-    private _pickedItemsObserver?;
-    private _repository;
     constructor();
-    connectedCallback(): void;
     protected getFormElement(): undefined;
-    private _observePickedMedias;
-    private _openPicker;
-    private _removeItem;
-    private _setSelection;
     render(): import("lit-html").TemplateResult<1>;
-    private _renderButton;
-    private _renderItem;
     static styles: import("@lit/reactive-element/css-tag.js").CSSResult[];
 }
 export default UmbInputMediaElement;

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

@@ -4,25 +4,46 @@ 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 { UmbMediaRepository } from '../../repository/media.repository.js';
-import { css, html, nothing, customElement, property, state, ifDefined } from '../../../../../external/lit/index.js';
-import { UUITextStyles, FormControlMixin } from '../../../../../external/uui/index.js';
-import { UMB_MODAL_MANAGER_CONTEXT_TOKEN, UMB_CONFIRM_MODAL, UMB_MEDIA_TREE_PICKER_MODAL, } from '../../../../core/modal/index.js';
+import { UmbMediaPickerContext } from './input-media.context.js';
+import { css, html, customElement, property, state, ifDefined } from '../../../../../external/lit/index.js';
+import { FormControlMixin } from '../../../../../external/uui/index.js';
 import { UmbLitElement } from '../../../../../shared/lit-element/index.js';
 export let UmbInputMediaElement = class UmbInputMediaElement extends FormControlMixin(UmbLitElement) {
+    /**
+     * This is a minimum amount of selected items in this input.
+     * @type {number}
+     * @attr
+     * @default 0
+     */
+    get min() {
+        return this.#pickerContext.min;
+    }
+    set min(value) {
+        this.#pickerContext.min = value;
+    }
+    /**
+     * This is a maximum amount of selected items in this input.
+     * @type {number}
+     * @attr
+     * @default Infinity
+     */
+    get max() {
+        return this.#pickerContext.max;
+    }
+    set max(value) {
+        this.#pickerContext.max = value;
+    }
     get selectedIds() {
-        return this._selectedIds;
+        return this.#pickerContext.getSelection();
     }
     set selectedIds(ids) {
-        this._selectedIds = ids;
-        super.value = ids.join(',');
-        this._observePickedMedias();
+        this.#pickerContext.setSelection(ids);
     }
     set value(idsString) {
-        if (idsString !== this._value) {
-            this.selectedIds = idsString.split(/[ ,]+/);
-        }
+        // Its with full purpose we don't call super.value, as thats being handled by the observation of the context selection.
+        this.selectedIds = idsString.split(/[ ,]+/);
     }
+    #pickerContext;
     constructor() {
         super();
         /**
@@ -39,98 +60,54 @@ export let UmbInputMediaElement = class UmbInputMediaElement extends FormControl
          * @default
          */
         this.maxMessage = 'This field exceeds the allowed amount of items';
-        // TODO: do we need both selectedIds and value? If we just use value we follow the same pattern as native form controls.
-        this._selectedIds = [];
-        this._repository = new UmbMediaRepository(this);
-        this.addValidator('rangeUnderflow', () => this.minMessage, () => !!this.min && this._selectedIds.length < this.min);
-        this.addValidator('rangeOverflow', () => this.maxMessage, () => !!this.max && this._selectedIds.length > this.max);
-        this.consumeContext(UMB_MODAL_MANAGER_CONTEXT_TOKEN, (instance) => {
-            this._modalContext = instance;
-        });
-    }
-    connectedCallback() {
-        super.connectedCallback();
-        this._observePickedMedias();
+        this.#pickerContext = new UmbMediaPickerContext(this);
+        this.addValidator('rangeUnderflow', () => this.minMessage, () => !!this.min && this.#pickerContext.getSelection().length < this.min);
+        this.addValidator('rangeOverflow', () => this.maxMessage, () => !!this.max && this.#pickerContext.getSelection().length > this.max);
+        this.observe(this.#pickerContext.selection, (selection) => (super.value = selection.join(',')));
+        this.observe(this.#pickerContext.selectedItems, (selectedItems) => (this._items = selectedItems));
     }
     getFormElement() {
         return undefined;
     }
-    async _observePickedMedias() {
-        this._pickedItemsObserver?.destroy();
-        // TODO: consider changing this to the list data endpoint when it is available
-        const { asObservable } = await this._repository.requestItemsLegacy(this._selectedIds);
-        if (!asObservable)
-            return;
-        this._pickedItemsObserver = this.observe(asObservable(), (items) => {
-            this._items = items;
-        });
-    }
-    _openPicker() {
-        // We send a shallow copy(good enough as its just an array of ids) of our this._selectedIds, as we don't want the modal to manipulate our data:
-        const modalContext = this._modalContext?.open(UMB_MEDIA_TREE_PICKER_MODAL, {
-            multiple: this.max === 1 ? false : true,
-            selection: [...this._selectedIds],
-        });
-        modalContext?.onSubmit().then(({ selection }) => {
-            this._setSelection(selection);
-        });
-    }
-    _removeItem(item) {
-        const modalContext = this._modalContext?.open(UMB_CONFIRM_MODAL, {
-            color: 'danger',
-            headline: `Remove ${item.name}?`,
-            content: 'Are you sure you want to remove this item',
-            confirmLabel: 'Remove',
-        });
-        modalContext?.onSubmit().then(() => {
-            const newSelection = this._selectedIds.filter((value) => value !== item.id);
-            this._setSelection(newSelection);
-        });
-    }
-    _setSelection(newSelection) {
-        this.selectedIds = newSelection;
-        this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }));
-    }
     render() {
-        return html ` ${this._items?.map((item) => this._renderItem(item))} ${this._renderButton()} `;
+        return html ` ${this._items?.map((item) => this.#renderItem(item))} ${this.#renderButton()} `;
     }
-    _renderButton() {
+    #renderButton() {
         if (this._items && this.max && this._items.length >= this.max)
             return;
-        return html `<uui-button id="add-button" look="placeholder" @click=${this._openPicker} label="open">
-			<uui-icon name="umb:add"></uui-icon>
-			Add
-		</uui-button>`;
+        return html `
+			<uui-button id="add-button" look="placeholder" @click=${() => this.#pickerContext.openPicker()} label="open">
+				<uui-icon name="umb:add"></uui-icon>
+				Add
+			</uui-button>
+		`;
     }
-    _renderItem(item) {
-        // TODO: remove when we have a way to handle trashed items
-        const tempItem = item;
+    #renderItem(item) {
         return html `
 			<uui-card-media
 				name=${ifDefined(item.name === null ? undefined : item.name)}
 				detail=${ifDefined(item.id)}
 				file-ext="jpg">
-				${tempItem.isTrashed ? html ` <uui-tag size="s" slot="tag" color="danger">Trashed</uui-tag> ` : nothing}
+				<!-- <uui-tag size="s" slot="tag" color="danger">Trashed</uui-tag> -->
 				<uui-action-bar slot="actions">
 					<uui-button label="Copy media">
 						<uui-icon name="umb:documents"></uui-icon>
 					</uui-button>
-					<uui-button @click=${() => this._removeItem(item)} label="Remove media ${item.name}">
+					<uui-button @click=${() => this.#pickerContext.requestRemoveItem(item.id)} label="Remove media ${item.name}">
 						<uui-icon name="umb:trash"></uui-icon>
 					</uui-button>
 				</uui-action-bar>
 			</uui-card-media>
 		`;
-        //TODO: <uui-button-inline-create vertical></uui-button-inline-create>
     }
     static { this.styles = [
-        UUITextStyles,
         css `
 			:host {
 				display: grid;
 				gap: var(--uui-size-space-3);
 				grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
 			}
+
 			#add-button {
 				text-align: center;
 				height: 160px;
@@ -145,13 +122,13 @@ export let UmbInputMediaElement = class UmbInputMediaElement extends FormControl
 };
 __decorate([
     property({ type: Number })
-], UmbInputMediaElement.prototype, "min", void 0);
+], UmbInputMediaElement.prototype, "min", null);
 __decorate([
     property({ type: String, attribute: 'min-message' })
 ], UmbInputMediaElement.prototype, "minMessage", void 0);
 __decorate([
     property({ type: Number })
-], UmbInputMediaElement.prototype, "max", void 0);
+], UmbInputMediaElement.prototype, "max", null);
 __decorate([
     property({ type: String, attribute: 'min-message' })
 ], UmbInputMediaElement.prototype, "maxMessage", void 0);

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

@@ -1,4 +1,5 @@
 import { ContentTreeItemResponseModel } from '../../../external/backend-api/index.js';
+export * from './components/index.js';
 export interface ContentProperty {
     alias: string;
     label: string;
@@ -15,4 +16,5 @@ export interface MediaDetails extends ContentTreeItemResponseModel {
     properties: Array<ContentProperty>;
     data: Array<ContentPropertyData>;
     variants: Array<any>;
+    icon?: string;
 }

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

@@ -1 +1 @@
-export {};
+export * from './components/index.js';

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

@@ -1 +1 @@
-export declare const manifests: (import("../../core/index.js").ManifestCollectionView | import("../../core/index.js").ManifestEntityAction | import("../../core/index.js").ManifestEntityBulkAction | import("../../core/index.js").ManifestMenuItem | import("../../core/index.js").ManifestRepository | import("../../core/index.js").ManifestStore | import("../../core/index.js").ManifestTree | import("../../core/index.js").ManifestTreeItem | import("../../core/index.js").ManifestTreeStore | import("../../core/index.js").ManifestWorkspace | import("../../core/index.js").ManifestWorkspaceAction | import("../../core/index.js").ManifestWorkspaceEditorView | import("../../core/index.js").ManifestWorkspaceViewCollection)[];
+export declare const manifests: (import("../../core/index.js").ManifestCollectionView | import("../../core/index.js").ManifestEntityAction | import("../../core/index.js").ManifestEntityBulkAction | import("../../core/index.js").ManifestItemStore | import("../../core/index.js").ManifestMenuItem | import("../../core/index.js").ManifestRepository | import("../../core/index.js").ManifestStore | import("../../core/index.js").ManifestTree | import("../../core/index.js").ManifestTreeItem | import("../../core/index.js").ManifestTreeStore | import("../../core/index.js").ManifestWorkspace | import("../../core/index.js").ManifestWorkspaceAction | import("../../core/index.js").ManifestWorkspaceEditorView | import("../../core/index.js").ManifestWorkspaceViewCollection | import("../../core/index.js").ManifestUserPermission)[];

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

@@ -5,6 +5,7 @@ import { manifests as treeManifests } from './tree/manifests.js';
 import { manifests as workspaceManifests } from './workspace/manifests.js';
 import { manifests as entityActionsManifests } from './entity-actions/manifests.js';
 import { manifests as entityBulkActionsManifests } from './entity-bulk-actions/manifests.js';
+import { manifests as userPermissionManifests } from './user-permissions/manifests.js';
 export const manifests = [
     ...collectionViewManifests,
     ...repositoryManifests,
@@ -13,4 +14,5 @@ export const manifests = [
     ...workspaceManifests,
     ...entityActionsManifests,
     ...entityBulkActionsManifests,
+    ...userPermissionManifests,
 ];

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

@@ -1,5 +1,6 @@
-import type { ManifestStore, ManifestTreeStore, ManifestRepository } from '../../../core/extension-registry/index.js';
+import type { ManifestStore, ManifestTreeStore, ManifestRepository, ManifestItemStore } from '../../../core/extension-registry/index.js';
 export declare const MEDIA_REPOSITORY_ALIAS = "Umb.Repository.Media";
 export declare const MEDIA_STORE_ALIAS = "Umb.Store.Media";
 export declare const MEDIA_TREE_STORE_ALIAS = "Umb.Store.MediaTree";
-export declare const manifests: (ManifestRepository | ManifestStore | ManifestTreeStore)[];
+export declare const MEDIA_ITEM_STORE_ALIAS = "Umb.Store.MediaItem";
+export declare const manifests: (ManifestItemStore | ManifestRepository | ManifestStore | ManifestTreeStore)[];

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

@@ -1,3 +1,4 @@
+import { UmbMediaItemStore } from './media-item.store.js';
 import { UmbMediaRepository } from './media.repository.js';
 import { UmbMediaStore } from './media.store.js';
 import { UmbMediaTreeStore } from './media.tree.store.js';
@@ -10,6 +11,7 @@ const repository = {
 };
 export const MEDIA_STORE_ALIAS = 'Umb.Store.Media';
 export const MEDIA_TREE_STORE_ALIAS = 'Umb.Store.MediaTree';
+export const MEDIA_ITEM_STORE_ALIAS = 'Umb.Store.MediaItem';
 const store = {
     type: 'store',
     alias: MEDIA_STORE_ALIAS,
@@ -22,4 +24,10 @@ const treeStore = {
     name: 'Media Tree Store',
     class: UmbMediaTreeStore,
 };
-export const manifests = [store, treeStore, repository];
+const itemStore = {
+    type: 'itemStore',
+    alias: MEDIA_ITEM_STORE_ALIAS,
+    name: 'Media Item Store',
+    class: UmbMediaItemStore,
+};
+export const manifests = [store, treeStore, itemStore, repository];

package/dist-cms/packages/media/media/repository/media-item.store.d.ts

@@ -0,0 +1,20 @@
+import { UmbContextToken } from '../../../../libs/context-api/index.js';
+import { UmbControllerHostElement } from '../../../../libs/controller-api/index.js';
+import { UmbItemStore, UmbStoreBase } from '../../../core/store/index.js';
+import { MediaItemResponseModel } from '../../../../external/backend-api/index.js';
+/**
+ * @export
+ * @class UmbMediaItemStore
+ * @extends {UmbStoreBase}
+ * @description - Data Store for Media items
+ */
+export declare class UmbMediaItemStore extends UmbStoreBase<MediaItemResponseModel> implements UmbItemStore<MediaItemResponseModel> {
+    /**
+     * Creates an instance of UmbMediaItemStore.
+     * @param {UmbControllerHostElement} host
+     * @memberof UmbMediaItemStore
+     */
+    constructor(host: UmbControllerHostElement);
+    items(ids: Array<string>): import("rxjs").Observable<MediaItemResponseModel[]>;
+}
+export declare const UMB_Media_ITEM_STORE_CONTEXT_TOKEN: UmbContextToken<UmbMediaItemStore, UmbMediaItemStore>;

package/dist-cms/packages/media/media/repository/media-item.store.js

@@ -0,0 +1,23 @@
+import { UmbContextToken } from '../../../../libs/context-api/index.js';
+import { UmbStoreBase } from '../../../core/store/index.js';
+import { UmbArrayState } from '../../../../libs/observable-api/index.js';
+/**
+ * @export
+ * @class UmbMediaItemStore
+ * @extends {UmbStoreBase}
+ * @description - Data Store for Media items
+ */
+export class UmbMediaItemStore extends UmbStoreBase {
+    /**
+     * Creates an instance of UmbMediaItemStore.
+     * @param {UmbControllerHostElement} host
+     * @memberof UmbMediaItemStore
+     */
+    constructor(host) {
+        super(host, UMB_Media_ITEM_STORE_CONTEXT_TOKEN.toString(), new UmbArrayState([], (x) => x.id));
+    }
+    items(ids) {
+        return this._data.asObservablePart((items) => items.filter((item) => ids.includes(item.id ?? '')));
+    }
+}
+export const UMB_Media_ITEM_STORE_CONTEXT_TOKEN = new UmbContextToken('UmbMediaItemStore');

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

@@ -33,6 +33,12 @@ export declare class UmbMediaRepository implements UmbTreeRepository<EntityTreeI
     rootTreeItems(): Promise<import("rxjs").Observable<EntityTreeItemResponseModel[]>>;
     treeItemsOf(parentId: string | null): Promise<import("rxjs").Observable<EntityTreeItemResponseModel[]>>;
     itemsLegacy(ids: Array<string>): Promise<import("rxjs").Observable<EntityTreeItemResponseModel[]>>;
+    requestItems(ids: Array<string>): Promise<{
+        data: import("../../../../external/backend-api/index.js").MediaItemResponseModel[] | undefined;
+        error: import("../../../../external/backend-api/index.js").ApiError | import("../../../../external/backend-api/index.js").CancelError | undefined;
+        asObservable: () => import("rxjs").Observable<import("../../../../external/backend-api/index.js").MediaItemResponseModel[]>;
+    }>;
+    items(ids: Array<string>): Promise<import("rxjs").Observable<import("../../../../external/backend-api/index.js").MediaItemResponseModel[]>>;
     createScaffold(parentId: string | null): Promise<{
         data: {
             id: string;