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

package/dist-cms/packages/documents/document-types/workspace/views/design/document-type-workspace-view-edit.element.js

@@ -4,12 +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 { css, html, customElement, state, repeat } from '../../../../../../external/lit/index.js';
-import { UUITextStyles } from '../../../../../../external/uui/index.js';
+import { css, html, customElement, state, repeat, nothing, query } from '../../../../../../external/lit/index.js';
 import { UmbContentTypeContainerStructureHelper } from '../../../../../core/content-type/index.js';
 import { encodeFolderName } from '../../../../../../shared/router/index.js';
 import { UmbLitElement } from '../../../../../../shared/lit-element/index.js';
 import { UMB_WORKSPACE_CONTEXT } from '../../../../../core/workspace/index.js';
+import { UMB_CONFIRM_MODAL, UMB_MODAL_MANAGER_CONTEXT_TOKEN } from '../../../../../core/modal/index.js';
+import { UmbTextStyles } from '../../../../../../shared/style/index.js';
 export let UmbDocumentTypeWorkspaceViewEditElement = class UmbDocumentTypeWorkspaceViewEditElement extends UmbLitElement {
     constructor() {
         super();
@@ -17,7 +18,9 @@ export let UmbDocumentTypeWorkspaceViewEditElement = class UmbDocumentTypeWorksp
         this._hasRootGroups = false;
         this._routes = [];
         this._activePath = '';
+        this._buttonDisabled = false;
         this._tabsStructureHelper = new UmbContentTypeContainerStructureHelper(this);
+        //TODO: We need to differentiate between local and composition tabs (and hybrids)
         this._tabsStructureHelper.setIsRoot(true);
         this._tabsStructureHelper.setContainerChildType('Tab');
         this.observe(this._tabsStructureHelper.containers, (tabs) => {
@@ -30,6 +33,9 @@ export let UmbDocumentTypeWorkspaceViewEditElement = class UmbDocumentTypeWorksp
             this._tabsStructureHelper.setStructureManager(workspaceContext.structure);
             this._observeRootGroups();
         });
+        this.consumeContext(UMB_MODAL_MANAGER_CONTEXT_TOKEN, (context) => {
+            this._modalManagerContext = context;
+        });
     }
     _observeRootGroups() {
         if (!this._workspaceContext)
@@ -79,32 +85,61 @@ export let UmbDocumentTypeWorkspaceViewEditElement = class UmbDocumentTypeWorksp
         }
         this._routes = routes;
     }
-    #requestRemoveTab(tabId) {
+    #requestRemoveTab(tab) {
+        const Message = {
+            headline: 'Delete tab',
+            content: html `<umb-localize key="contentTypeEditor_confirmDeleteTabMessage" .args=${[tab?.name ?? tab?.id]}
+					>Are you sure you want to delete the tab <strong>${tab?.name ?? tab?.id}</strong></umb-localize
+				>
+				<div style="color:var(--uui-color-danger-emphasis)">
+					<umb-localize key="contentTypeEditor_confirmDeleteTabNotice"
+						>This will delete all items that doesn't belong to a composition.</umb-localize
+					>
+				</div>`,
+            confirmLabel: this.localize.term('actions_delete'),
+            color: 'danger',
+        };
         // TODO: If this tab is composed of other tabs, then notify that it will only delete the local tab.
-        // TODO: Update URL when removing tab.
-        this.#remove(tabId);
+        const modalHandler = this._modalManagerContext?.open(UMB_CONFIRM_MODAL, Message);
+        modalHandler?.onSubmit().then(() => {
+            this.#remove(tab?.id);
+        });
     }
     #remove(tabId) {
         if (!tabId)
             return;
         this._workspaceContext?.structure.removeContainer(null, tabId);
+        this._tabsStructureHelper?.isOwnerContainer(tabId)
+            ? window.history.replaceState(null, '', this._routerPath + this._routes[0]?.path ?? '/root')
+            : '';
     }
     async #addTab() {
+        if (this.shadowRoot?.querySelector('uui-tab[active] uui-input') &&
+            (this.shadowRoot?.querySelector('uui-tab[active] uui-input')).value === '') {
+            this.#focusInput();
+            return;
+        }
         const tab = await this._workspaceContext?.structure.createContainer(null, null, 'Tab');
         if (tab) {
             const path = this._routerPath + '/tab/' + encodeFolderName(tab.name || '');
             window.history.replaceState(null, '', path);
-            setTimeout(() => {
-                this.shadowRoot?.querySelector('uui-tab[active] uui-input')?.focus();
-            }, 100);
+            this.#focusInput();
         }
     }
-    #tabNameChanged(event, tab) {
+    async #focusInput() {
+        setTimeout(() => {
+            this.shadowRoot?.querySelector('uui-tab[active] uui-input')?.focus();
+        }, 100);
+    }
+    async #tabNameChanged(event, tab) {
+        if (this._buttonDisabled)
+            this._buttonDisabled = !this._buttonDisabled;
         let newName = event.target.value;
         if (newName === '') {
             newName = 'Unnamed';
+            event.target.value = 'Unnamed';
         }
-        const changedName = this._workspaceContext?.structure.makeContainerNameUniqueForOwnerDocument(newName, 'Tab');
+        const changedName = this._workspaceContext?.structure.makeContainerNameUniqueForOwnerContentType(newName, 'Tab', tab.id);
         // Check if it collides with another tab name of this same document-type, if so adjust name:
         if (changedName) {
             newName = changedName;
@@ -122,42 +157,64 @@ export let UmbDocumentTypeWorkspaceViewEditElement = class UmbDocumentTypeWorksp
         const rootTabPath = this._routerPath + '/root';
         const rootTabActive = rootTabPath === this._activePath;
         return html `<uui-tab-group>
-			<uui-tab
-				class=${this._hasRootGroups || rootTabActive ? '' : 'content-tab-is-empty'}
-				label="Content"
-				.active=${rootTabActive}
-				href=${rootTabPath}
-				>Content</uui-tab
-			>
-			${repeat(this._tabs, (tab) => tab.id + tab.name, (tab) => {
+				<uui-tab
+					class=${this._hasRootGroups || rootTabActive ? '' : 'content-tab-is-empty'}
+					label="Content"
+					.active=${rootTabActive}
+					href=${rootTabPath}>
+					<umb-localize key="general_content">Content</umb-localize>
+				</uui-tab>
+				${repeat(this._tabs, (tab) => tab.id + tab.name, (tab) => {
             const path = this._routerPath + '/tab/' + encodeFolderName(tab.name || '');
             const tabActive = path === this._activePath;
-            return html `<uui-tab label=${tab.name} .active=${tabActive} href=${path}>
-						${tabActive && this._tabsStructureHelper.isOwnerContainer(tab.id)
-                ? html ` <uui-input
-									label="Tab name"
-									look="placeholder"
-									value=${tab.name}
-									placeholder="Enter a name"
-									@change=${(e) => this.#tabNameChanged(e, tab)}
-									@blur=${(e) => this.#tabNameChanged(e, tab)}>
-									<uui-button
-										label="Remove tab"
-										class="trash"
-										slot="append"
-										@click=${() => this.#requestRemoveTab(tab.id)}
-										compact>
-										<uui-icon name="umb:trash"></uui-icon>
-									</uui-button>
-							  </uui-input>`
-                : tab.name}
-					</uui-tab>`;
+            return html `<uui-tab label=${tab.name ?? 'unnamed'} .active=${tabActive} href=${path}>
+							<div class="tab">
+								${!this._tabsStructureHelper.isOwnerContainer(tab.id)
+                ? html `<uui-icon class="external" name="umb:merge"></uui-icon> `
+                : nothing}
+								${tabActive && this._tabsStructureHelper.isOwnerContainer(tab.id)
+                ? html `<uui-input
+											id="input"
+											label="Tab name"
+											look="placeholder"
+											value="${tab.name}"
+											placeholder="Unnamed"
+											@change=${(e) => this.#tabNameChanged(e, tab)}
+											@blur=${(e) => this.#tabNameChanged(e, tab)}
+											@input=${() => (this._buttonDisabled = true)}
+											@focus=${(e) => (e.target.value ? nothing : (this._buttonDisabled = true))}
+											auto-width>
+											<uui-button
+												label="Remove tab"
+												class="trash"
+												slot="append"
+												?disabled=${this._buttonDisabled}
+												@click=${() => this.#requestRemoveTab(tab)}
+												compact>
+												<uui-icon name="umb:trash"></uui-icon>
+											</uui-button>
+									  </uui-input>`
+                : html `<div class="no-edit">
+											${tab.name}
+											${this._tabsStructureHelper.isOwnerContainer(tab.id)
+                    ? html `<uui-button
+														label="Remove tab"
+														class="trash"
+														slot="append"
+														@click=${() => this.#requestRemoveTab(tab)}
+														compact>
+														<uui-icon name="umb:trash"></uui-icon>
+												  </uui-button> `
+                    : nothing}
+									  </div>`}
+							</div>
+						</uui-tab>`;
         })}
+			</uui-tab-group>
 			<uui-button id="add-tab" @click="${this.#addTab}" label="Add tab" compact>
 				<uui-icon name="umb:add"></uui-icon>
 				Add tab
-			</uui-button>
-		</uui-tab-group>`;
+			</uui-button>`;
     }
     renderActions() {
         return html `<div class="tab-actions">
@@ -165,9 +222,9 @@ export let UmbDocumentTypeWorkspaceViewEditElement = class UmbDocumentTypeWorksp
 				<uui-icon name="umb:merge"></uui-icon>
 				Compositions
 			</uui-button>
-			<uui-button label="Recorder" compact>
+			<uui-button label=${this.localize.term('general_reorder')} compact>
 				<uui-icon name="umb:navigation"></uui-icon>
-				Recorder
+				<umb-localize key="general_reorder">Reorder</umb-localize>
 			</uui-button>
 		</div>`;
     }
@@ -175,7 +232,8 @@ export let UmbDocumentTypeWorkspaceViewEditElement = class UmbDocumentTypeWorksp
         return html `
 			<umb-body-layout header-fit-height>
 				<div id="header" slot="header">
-					${this._routerPath ? this.renderTabsNavigation() : ''}${this.renderActions()}
+					<div id="tabs-wrapper">${this._routerPath ? this.renderTabsNavigation() : ''}</div>
+					${this.renderActions()}
 				</div>
 				<umb-router-slot
 					.routes=${this._routes}
@@ -190,7 +248,7 @@ export let UmbDocumentTypeWorkspaceViewEditElement = class UmbDocumentTypeWorksp
 		`;
     }
     static { this.styles = [
-        UUITextStyles,
+        UmbTextStyles,
         css `
 			:host {
 				position: relative;
@@ -209,13 +267,51 @@ export let UmbDocumentTypeWorkspaceViewEditElement = class UmbDocumentTypeWorksp
 				flex-wrap: nowrap;
 			}
 
+			#tabs-wrapper {
+				display: flex;
+			}
+
 			.content-tab-is-empty {
-				height: 31px;
 				align-self: center;
 				border-radius: 3px;
 				--uui-tab-text: var(--uui-color-text-alt);
 				border: dashed 1px var(--uui-color-border-emphasis);
 			}
+
+			uui-tab {
+				border-left: 1px solid transparent;
+				border-right: 1px solid var(--uui-color-border);
+			}
+
+			uui-tab:not(:hover, :focus) .trash {
+				opacity: 0;
+				transition: opacity 120ms;
+			}
+
+			.tab {
+				position: relative;
+			}
+
+			.external {
+				vertical-align: sub;
+			}
+
+			uui-input:not(:focus, :hover) {
+				border: 1px solid transparent;
+			}
+
+			.no-edit {
+				display: inline-flex;
+				padding-left: var(--uui-size-space-3);
+				border: 1px solid transparent;
+				align-items: center;
+				gap: var(--uui-size-space-3);
+			}
+
+			.trash {
+				opacity: 1;
+				transition: opacity 120ms;
+			}
 		`,
     ]; }
 };
@@ -231,6 +327,12 @@ __decorate([
 __decorate([
     state()
 ], UmbDocumentTypeWorkspaceViewEditElement.prototype, "_activePath", void 0);
+__decorate([
+    state()
+], UmbDocumentTypeWorkspaceViewEditElement.prototype, "_buttonDisabled", void 0);
+__decorate([
+    query('uui-tab')
+], UmbDocumentTypeWorkspaceViewEditElement.prototype, "_tabElements", void 0);
 UmbDocumentTypeWorkspaceViewEditElement = __decorate([
     customElement('umb-document-type-workspace-view-edit')
 ], UmbDocumentTypeWorkspaceViewEditElement);

package/dist-cms/packages/documents/document-types/workspace/views/settings/document-type-workspace-view-settings.element.js

@@ -5,7 +5,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { css, html, customElement, state } from '../../../../../../external/lit/index.js';
-import { UUITextStyles } from '../../../../../../external/uui/index.js';
+import { UmbTextStyles } from "../../../../../../shared/style/index.js";
 import { UmbLitElement } from '../../../../../../shared/lit-element/index.js';
 import { UMB_WORKSPACE_CONTEXT } from '../../../../../core/workspace/index.js';
 export let UmbDocumentTypeWorkspaceViewSettingsElement = class UmbDocumentTypeWorkspaceViewSettingsElement extends UmbLitElement {
@@ -82,7 +82,7 @@ export let UmbDocumentTypeWorkspaceViewSettingsElement = class UmbDocumentTypeWo
 		`;
     }
     static { this.styles = [
-        UUITextStyles,
+        UmbTextStyles,
         css `
 			:host {
 				display: block;

package/dist-cms/packages/documents/document-types/workspace/views/structure/document-type-workspace-view-structure.element.js

@@ -5,7 +5,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { css, html, customElement, state } from '../../../../../../external/lit/index.js';
-import { UUITextStyles } from '../../../../../../external/uui/index.js';
+import { UmbTextStyles } from "../../../../../../shared/style/index.js";
 import { UmbLitElement } from '../../../../../../shared/lit-element/index.js';
 import { UMB_WORKSPACE_CONTEXT } from '../../../../../core/workspace/index.js';
 export let UmbDocumentTypeWorkspaceViewStructureElement = class UmbDocumentTypeWorkspaceViewStructureElement extends UmbLitElement {
@@ -34,11 +34,11 @@ export let UmbDocumentTypeWorkspaceViewStructureElement = class UmbDocumentTypeW
         return html `
 			<uui-box headline="Structure">
 				<umb-workspace-property-layout alias="Root" label="Allow as Root">
-					<div slot="description">Allow editors to create content of this type in the root of the content tree.</div>
+					<div slot="description">${this.localize.term('contentTypeEditor_allowAsRootDescription')}</div>
 					<div slot="editor">
 						<uui-toggle
-							label="Allow as root"
-							.checked=${this._allowedAsRoot}
+							label=${this.localize.term('contentTypeEditor_allowAsRootHeading')}
+							?checked=${this._allowedAsRoot}
 							@change=${(e) => {
             this.#workspaceContext?.setAllowedAsRoot(e.target.checked);
         }}></uui-toggle>
@@ -51,7 +51,7 @@ export let UmbDocumentTypeWorkspaceViewStructureElement = class UmbDocumentTypeW
 					<div slot="editor">
 						<!-- TODO: maybe we want to somehow display the hierarchy, but not necessary in the same way as old backoffice? -->
 						<umb-input-document-type
-							.selectedIds=${this._allowedContentTypeIDs}
+							.selectedIds=${this._allowedContentTypeIDs ?? []}
 							@change="${(e) => {
             const sortedContentTypesList = e.target.selectedIds.map((id, index) => ({
                 id: id,
@@ -72,7 +72,7 @@ export let UmbDocumentTypeWorkspaceViewStructureElement = class UmbDocumentTypeW
 		`;
     }
     static { this.styles = [
-        UUITextStyles,
+        UmbTextStyles,
         css `
 			:host {
 				display: block;

package/dist-cms/packages/documents/document-types/workspace/views/templates/document-type-workspace-view-templates.element.js

@@ -6,7 +6,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import '../../../../../templating/templates/components/input-template/input-template.element.js';
 import { css, html, customElement, state } from '../../../../../../external/lit/index.js';
-import { UUITextStyles } from '../../../../../../external/uui/index.js';
+import { UmbTextStyles } from "../../../../../../shared/style/index.js";
 import { UmbLitElement } from '../../../../../../shared/lit-element/index.js';
 import { UMB_WORKSPACE_CONTEXT } from '../../../../../core/workspace/index.js';
 export let UmbDocumentTypeWorkspaceViewTemplatesElement = class UmbDocumentTypeWorkspaceViewTemplatesElement extends UmbLitElement {
@@ -53,7 +53,7 @@ export let UmbDocumentTypeWorkspaceViewTemplatesElement = class UmbDocumentTypeW
 		</uui-box>`;
     }
     static { this.styles = [
-        UUITextStyles,
+        UmbTextStyles,
         css `
 			:host {
 				display: block;

package/dist-cms/packages/documents/documents/collection/views/table/document-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';
@@ -100,7 +100,7 @@ export let UmbDocumentTableCollectionViewElement = class UmbDocumentTableCollect
 		`;
     }
     static { this.styles = [
-        UUITextStyles,
+        UmbTextStyles,
         css `
 			:host {
 				display: block;

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

@@ -1 +1,2 @@
 export * from './input-document/input-document.element.js';
+export * from './input-document-granular-permission/input-document-granular-permission.element.js';

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

@@ -1 +1,2 @@
 export * from './input-document/input-document.element.js';
+export * from './input-document-granular-permission/input-document-granular-permission.element.js';

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

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

package/dist-cms/packages/documents/documents/components/input-document/input-document.context.js

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

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

@@ -1,13 +1,15 @@
 import { UmbLitElement } from '../../../../../shared/lit-element/index.js';
 declare const UmbInputDocumentElement_base: (new (...args: any[]) => import("../../../../../external/uui/index.js").FormControlMixinInterface) & typeof UmbLitElement;
 export declare class UmbInputDocumentElement extends UmbInputDocumentElement_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 UmbInputDocumentElement extends UmbInputDocumentElement_bas
      * 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,20 +32,12 @@ export declare class UmbInputDocumentElement extends UmbInputDocumentElement_bas
      * @default
      */
     maxMessage: string;
-    private _selectedIds;
     get selectedIds(): Array<string>;
     set selectedIds(ids: Array<string>);
     set value(idsString: string);
     private _items?;
-    private _modalContext?;
-    private _documentStore?;
-    private _pickedItemsObserver?;
     constructor();
     protected getFormElement(): undefined;
-    private _observePickedDocuments;
-    private _openPicker;
-    private _removeItem;
-    private _setSelection;
     render(): import("lit-html").TemplateResult<1>;
     private _renderItem;
     static styles: import("@lit/reactive-element/css-tag.js").CSSResult[];

package/dist-cms/packages/documents/documents/components/input-document/input-document.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 { UMB_DOCUMENT_TREE_STORE_CONTEXT_TOKEN } from '../../repository/document.tree.store.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_DOCUMENT_PICKER_MODAL, } from '../../../../core/modal/index.js';
+import { UmbDocumentPickerContext } from './input-document.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 UmbInputDocumentElement = class UmbInputDocumentElement 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._observePickedDocuments();
+        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,75 +60,40 @@ export let UmbInputDocumentElement = class UmbInputDocumentElement extends FormC
          * @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.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_DOCUMENT_TREE_STORE_CONTEXT_TOKEN, (instance) => {
-            this._documentStore = instance;
-            this._observePickedDocuments();
-        });
-        this.consumeContext(UMB_MODAL_MANAGER_CONTEXT_TOKEN, (instance) => {
-            this._modalContext = instance;
-        });
+        this.#pickerContext = new UmbDocumentPickerContext(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;
     }
-    _observePickedDocuments() {
-        this._pickedItemsObserver?.destroy();
-        if (!this._documentStore)
-            return;
-        // TODO: consider changing this to the list data endpoint when it is available
-        this._pickedItemsObserver = this.observe(this._documentStore.items(this._selectedIds), (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_DOCUMENT_PICKER_MODAL, {
-            multiple: this.max === 1 ? false : true,
-            selection: [...this._selectedIds],
-        });
-        modalContext?.onSubmit().then(({ selection }) => {
-            this._setSelection(selection);
-        });
-    }
-    async _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',
-        });
-        await modalContext?.onSubmit();
-        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))}
-			<uui-button id="add-button" look="placeholder" @click=${this._openPicker} label="open">Add</uui-button>
+			<uui-ref-list>${this._items?.map((item) => this._renderItem(item))}</uui-ref-list>
+			<uui-button id="add-button" look="placeholder" @click=${() => this.#pickerContext.openPicker()} label="open"
+				>Add</uui-button
+			>
 		`;
     }
     _renderItem(item) {
-        // TODO: remove when we have a way to handle trashed items
-        const tempItem = item;
+        if (!item.id)
+            return;
         return html `
-			<uui-ref-node name=${ifDefined(item.name === null ? undefined : item.name)} detail=${ifDefined(item.id)}>
-				${tempItem.isTrashed ? html ` <uui-tag size="s" slot="tag" color="danger">Trashed</uui-tag> ` : nothing}
+			<uui-ref-node name=${ifDefined(item.name)} detail=${ifDefined(item.id)}>
+				<!-- TODO: implement is trashed <uui-tag size="s" slot="tag" color="danger">Trashed</uui-tag> -->
 				<uui-action-bar slot="actions">
-					<uui-button @click=${() => this._removeItem(item)} label="Remove document ${item.name}">Remove</uui-button>
+					<uui-button
+						@click=${() => this.#pickerContext.requestRemoveItem(item.id)}
+						label="Remove document ${item.name}"
+						>Remove</uui-button
+					>
 				</uui-action-bar>
 			</uui-ref-node>
 		`;
     }
     static { this.styles = [
-        UUITextStyles,
         css `
 			#add-button {
 				width: 100%;
@@ -117,13 +103,13 @@ export let UmbInputDocumentElement = class UmbInputDocumentElement extends FormC
 };
 __decorate([
     property({ type: Number })
-], UmbInputDocumentElement.prototype, "min", void 0);
+], UmbInputDocumentElement.prototype, "min", null);
 __decorate([
     property({ type: String, attribute: 'min-message' })
 ], UmbInputDocumentElement.prototype, "minMessage", void 0);
 __decorate([
     property({ type: Number })
-], UmbInputDocumentElement.prototype, "max", void 0);
+], UmbInputDocumentElement.prototype, "max", null);
 __decorate([
     property({ type: String, attribute: 'min-message' })
 ], UmbInputDocumentElement.prototype, "maxMessage", void 0);