@umbraco-cms/backoffice 14.0.0-40e04294 → 14.0.0-43239cee

package/dist-cms/packages/core/localization/localize-number.element.d.ts

@@ -0,0 +1,28 @@
+import { UmbLitElement } from '../../../shared/lit-element/index.js';
+/**
+ * This element allows you to localize a number
+ * @element umb-localize-number
+ * @slot - The fallback value if the key is not found.
+ */
+export declare class UmbLocalizeNumberElement extends UmbLitElement {
+    /**
+     * The number to localize.
+     * @attr
+     * @example number=1_000_000
+     */
+    number: number | string;
+    /**
+     * Formatting options
+     * @attr
+     * @example options={ style: 'currency', currency: 'EUR' }
+     */
+    options?: Intl.NumberFormatOptions;
+    protected get text(): string;
+    protected render(): import("lit-html").TemplateResult<1>;
+    static styles: import("@lit/reactive-element/css-tag").CSSResult[];
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'umb-localize-number': UmbLocalizeNumberElement;
+    }
+}

package/dist-cms/packages/core/localization/localize-number.element.js

@@ -0,0 +1,42 @@
+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, property, state, unsafeHTML } from '../../../external/lit/index.js';
+import { UmbLitElement } from '../../../shared/lit-element/index.js';
+/**
+ * This element allows you to localize a number
+ * @element umb-localize-number
+ * @slot - The fallback value if the key is not found.
+ */
+export let UmbLocalizeNumberElement = class UmbLocalizeNumberElement extends UmbLitElement {
+    get text() {
+        return this.localize.number(this.number, this.options);
+    }
+    render() {
+        return this.number
+            ? html `${unsafeHTML(this.text)}`
+            : html `<slot></slot>`;
+    }
+    static { this.styles = [
+        css `
+			:host {
+				display: contents;
+			}
+		`,
+    ]; }
+};
+__decorate([
+    property()
+], UmbLocalizeNumberElement.prototype, "number", void 0);
+__decorate([
+    property()
+], UmbLocalizeNumberElement.prototype, "options", void 0);
+__decorate([
+    state()
+], UmbLocalizeNumberElement.prototype, "text", null);
+UmbLocalizeNumberElement = __decorate([
+    customElement('umb-localize-number')
+], UmbLocalizeNumberElement);

package/dist-cms/packages/core/localization/localize-relative-time.element.d.ts

@@ -0,0 +1,34 @@
+import { UmbLitElement } from '../../../shared/lit-element/index.js';
+/**
+ * This element allows you to localize a relative time
+ * @element umb-localize-relative-time
+ * @slot - The fallback value if the key is not found.
+ */
+export declare class UmbLocalizeRelativeTimeElement extends UmbLitElement {
+    /**
+     * The date to localize.
+     * @attr
+     * @example time=10
+     */
+    time: number;
+    /**
+     * Formatting options
+     * @attr
+     * @example options={ dateStyle: 'full', timeStyle: 'long', timeZone: 'Australia/Sydney' }
+     */
+    options?: Intl.RelativeTimeFormatOptions;
+    /**
+     * Unit
+     * @attr
+     * @example unit='seconds'
+     */
+    unit: Intl.RelativeTimeFormatUnit;
+    protected get text(): string;
+    protected render(): import("lit-html").TemplateResult<1>;
+    static styles: import("@lit/reactive-element/css-tag").CSSResult[];
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'umb-localize-relative-time': UmbLocalizeRelativeTimeElement;
+    }
+}

package/dist-cms/packages/core/localization/localize-relative-time.element.js

@@ -0,0 +1,54 @@
+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, property, state, unsafeHTML } from '../../../external/lit/index.js';
+import { UmbLitElement } from '../../../shared/lit-element/index.js';
+/**
+ * This element allows you to localize a relative time
+ * @element umb-localize-relative-time
+ * @slot - The fallback value if the key is not found.
+ */
+export let UmbLocalizeRelativeTimeElement = class UmbLocalizeRelativeTimeElement extends UmbLitElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * Unit
+         * @attr
+         * @example unit='seconds'
+         */
+        this.unit = 'seconds';
+    }
+    get text() {
+        return this.localize.relativeTime(this.time, this.unit, this.options);
+    }
+    render() {
+        return this.time
+            ? html `${unsafeHTML(this.text)}`
+            : html `<slot></slot>`;
+    }
+    static { this.styles = [
+        css `
+			:host {
+				display: contents;
+			}
+		`,
+    ]; }
+};
+__decorate([
+    property()
+], UmbLocalizeRelativeTimeElement.prototype, "time", void 0);
+__decorate([
+    property()
+], UmbLocalizeRelativeTimeElement.prototype, "options", void 0);
+__decorate([
+    property()
+], UmbLocalizeRelativeTimeElement.prototype, "unit", void 0);
+__decorate([
+    state()
+], UmbLocalizeRelativeTimeElement.prototype, "text", null);
+UmbLocalizeRelativeTimeElement = __decorate([
+    customElement('umb-localize-relative-time')
+], UmbLocalizeRelativeTimeElement);

package/dist-cms/packages/core/localization/localize.element.js

@@ -31,7 +31,7 @@ export let UmbLocalizeElement = class UmbLocalizeElement extends UmbLitElement {
         return localizedValue;
     }
     render() {
-        return this.text
+        return this.text.trim()
             ? html `${unsafeHTML(this.text)}`
             : this.debug
                 ? html `<span style="color:red">${this.key}</span>`

package/dist-cms/packages/core/modal/common/entity-user-permission-settings/entity-user-permission-settings-modal.element.d.ts

@@ -0,0 +1,19 @@
+import { UmbEntityUserPermissionSettingsModalData, UmbEntityUserPermissionSettingsModalResult, UmbModalContext } from '../../index.js';
+import { UmbLitElement } from '../../../../../shared/lit-element/index.js';
+export declare class UmbEntityUserPermissionSettingsModalElement extends UmbLitElement {
+    #private;
+    modalContext?: UmbModalContext<UmbEntityUserPermissionSettingsModalData, UmbEntityUserPermissionSettingsModalResult>;
+    data?: UmbEntityUserPermissionSettingsModalData;
+    private _userPermissionManifests;
+    private _handleConfirm;
+    private _handleCancel;
+    constructor();
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: import("@lit/reactive-element/css-tag").CSSResult[];
+}
+export default UmbEntityUserPermissionSettingsModalElement;
+declare global {
+    interface HTMLElementTagNameMap {
+        'umb-entity-user-permission-modal': UmbEntityUserPermissionSettingsModalElement;
+    }
+}

package/dist-cms/packages/core/modal/common/entity-user-permission-settings/entity-user-permission-settings-modal.element.js

@@ -0,0 +1,97 @@
+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 { html, customElement, property, state, css } from '../../../../../external/lit/index.js';
+import { UmbTextStyles } from '../../../../../shared/style/index.js';
+import { UmbLitElement } from '../../../../../shared/lit-element/index.js';
+import { umbExtensionsRegistry } from '../../../extension-registry/index.js';
+export let UmbEntityUserPermissionSettingsModalElement = class UmbEntityUserPermissionSettingsModalElement extends UmbLitElement {
+    _handleConfirm() {
+        this.modalContext?.submit();
+    }
+    _handleCancel() {
+        this.modalContext?.reject();
+    }
+    constructor() {
+        super();
+        this._userPermissionManifests = [];
+        this.observe(umbExtensionsRegistry.extensionsOfType('userPermission'), (userPermissionManifests) => (this._userPermissionManifests = userPermissionManifests));
+    }
+    render() {
+        return html `
+			<umb-body-layout headline="Hello">
+				<uui-box>
+					Render user permissions for ${this.data?.entityType} ${this.data?.unique}
+					${this._userPermissionManifests.map((permission) => this.#renderPermission(permission))}
+
+					<uui-button slot="actions" id="cancel" label="Cancel" @click="${this._handleCancel}">Cancel</uui-button>
+					<uui-button
+						slot="actions"
+						id="confirm"
+						color="positive"
+						look="primary"
+						label="Confirm"
+						@click=${this._handleConfirm}></uui-button>
+				</uui-box>
+			</umb-body-layout>
+		`;
+    }
+    #onChangeUserPermission(event, userPermissionManifest) {
+        console.log(userPermissionManifest);
+        console.log(event.target.checked);
+    }
+    #isAllowed(userPermissionManifest) {
+        return true;
+        //return this._userGroup?.permissions?.includes(userPermissionManifest.alias);
+    }
+    #renderPermission(userPermissionManifest) {
+        return html `<div
+			style="display: flex; align-items:center; border-bottom: 1px solid var(--uui-color-divider); padding: 9px 0 12px 0;">
+			<uui-toggle
+				label=${userPermissionManifest.meta.label}
+				?checked=${this.#isAllowed(userPermissionManifest)}
+				@change=${(event) => this.#onChangeUserPermission(event, userPermissionManifest)}>
+				<div class="permission-meta">
+					<div class="permission-name">${userPermissionManifest.meta.label}</div>
+					<small>${userPermissionManifest.meta.description}</small>
+				</div>
+			</uui-toggle>
+		</div>`;
+    }
+    static { this.styles = [
+        UmbTextStyles,
+        css `
+			.permission-toggle {
+				display: flex;
+				align-items: center;
+				border-bottom: 1px solid var(--uui-color-divider);
+				padding: var(--uui-size-space-3) 0 var(--uui-size-space-4) 0;
+			}
+
+			.permission-meta {
+				margin-left: var(--uui-size-space-4);
+				line-height: 1.2em;
+			}
+
+			.permission-name {
+				font-weight: bold;
+			}
+		`,
+    ]; }
+};
+__decorate([
+    property({ attribute: false })
+], UmbEntityUserPermissionSettingsModalElement.prototype, "modalContext", void 0);
+__decorate([
+    property({ type: Object })
+], UmbEntityUserPermissionSettingsModalElement.prototype, "data", void 0);
+__decorate([
+    state()
+], UmbEntityUserPermissionSettingsModalElement.prototype, "_userPermissionManifests", void 0);
+UmbEntityUserPermissionSettingsModalElement = __decorate([
+    customElement('umb-entity-user-permission-settings-modal')
+], UmbEntityUserPermissionSettingsModalElement);
+export default UmbEntityUserPermissionSettingsModalElement;

package/dist-cms/packages/core/modal/common/manifests.js

@@ -59,5 +59,11 @@ const modals = [
         name: 'Tree Picker Modal',
         loader: () => import('./tree-picker/tree-picker-modal.element.js'),
     },
+    {
+        type: 'modal',
+        alias: 'Umb.Modal.EntityUserPermissionSettings',
+        name: 'Entity User Permission Settings Modal',
+        loader: () => import('./entity-user-permission-settings/entity-user-permission-settings-modal.element.js'),
+    },
 ];
 export const manifests = [...modals];

package/dist-cms/packages/core/modal/common/tree-picker/tree-picker-modal.element.js

@@ -4,9 +4,10 @@ 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 } from '../../../../../external/lit/index.js';
-import { UmbTextStyles } from "../../../../../shared/style/index.js";
+import { html, customElement, state } from '../../../../../external/lit/index.js';
+import { UmbTextStyles } from '../../../../../shared/style/index.js';
 import { UmbModalBaseElement } from '../../../../../shared/modal/index.js';
+import { UmbSelectedEvent } from '../../../../../shared/umb-events/index.js';
 export let UmbTreePickerModalElement = class UmbTreePickerModalElement extends UmbModalBaseElement {
     constructor() {
         super(...arguments);
@@ -22,6 +23,7 @@ export let UmbTreePickerModalElement = class UmbTreePickerModalElement extends U
         e.stopPropagation();
         const element = e.target;
         this._selection = element.selection;
+        this.dispatchEvent(new UmbSelectedEvent());
     }
     #submit() {
         this.modalContext?.submit({ selection: this._selection });
@@ -48,7 +50,7 @@ export let UmbTreePickerModalElement = class UmbTreePickerModalElement extends U
 			</umb-body-layout>
 		`;
     }
-    static { this.styles = [UmbTextStyles, css ``]; }
+    static { this.styles = [UmbTextStyles]; }
 };
 __decorate([
     state()

package/dist-cms/packages/core/modal/token/entity-user-permission-settings-modal.token.d.ts

@@ -0,0 +1,7 @@
+import { UmbModalToken } from '../index.js';
+export interface UmbEntityUserPermissionSettingsModalData {
+    unique: string;
+    entityType: Array<string>;
+}
+export type UmbEntityUserPermissionSettingsModalResult = undefined;
+export declare const UMB_ENTITY_USER_PERMISSION_MODAL: UmbModalToken<UmbEntityUserPermissionSettingsModalData, undefined>;

package/dist-cms/packages/core/modal/token/entity-user-permission-settings-modal.token.js

@@ -0,0 +1,4 @@
+import { UmbModalToken } from '../index.js';
+export const UMB_ENTITY_USER_PERMISSION_MODAL = new UmbModalToken('Umb.Modal.EntityUserPermissionSettings', {
+    type: 'sidebar',
+});

package/dist-cms/packages/core/modal/token/index.d.ts

@@ -33,3 +33,4 @@ export * from './data-type-picker-modal.token.js';
 export * from './workspace-modal.token.js';
 export * from './data-type-picker-flow-modal.token.js';
 export * from './data-type-picker-flow-data-type-picker-modal.token.js';
+export * from './entity-user-permission-settings-modal.token.js';

package/dist-cms/packages/core/modal/token/index.js

@@ -33,3 +33,4 @@ export * from './data-type-picker-modal.token.js';
 export * from './workspace-modal.token.js';
 export * from './data-type-picker-flow-modal.token.js';
 export * from './data-type-picker-flow-data-type-picker-modal.token.js';
+export * from './entity-user-permission-settings-modal.token.js';

package/dist-cms/packages/core/picker-input/picker-input.context.js

@@ -48,9 +48,6 @@ export class UmbPickerInputContext {
         });
     }
     async requestRemoveItem(unique) {
-        await this.#init;
-        if (!this.repository)
-            throw new Error('Repository is not initialized');
         // TODO: id won't always be available on the model, so we need to get the unique property from somewhere. Maybe the repository?
         const item = this.#itemManager.getItems().find((item) => this.#getUnique(item) === unique);
         if (!item)
@@ -67,5 +64,6 @@ export class UmbPickerInputContext {
     #removeItem(unique) {
         const newSelection = this.getSelection().filter((value) => value !== unique);
         this.setSelection(newSelection);
+        this.host.dispatchEvent(new UmbChangeEvent());
     }
 }

package/dist-cms/packages/core/tree/tree.context.js

@@ -3,6 +3,7 @@ import { UmbBooleanState } from '../../../libs/observable-api/index.js';
 import { UmbBaseController } from '../../../libs/controller-api/index.js';
 import { createExtensionClass } from '../../../libs/extension-api/index.js';
 import { UmbSelectionManagerBase } from '../../../shared/utils/index.js';
+import { UmbSelectedEvent } from '../../../shared/umb-events/index.js';
 export class UmbTreeContextBase extends UmbBaseController {
     #selectionManager;
     #selectable;
@@ -62,11 +63,11 @@ export class UmbTreeContextBase extends UmbBaseController {
         if (!this.getSelectable())
             return;
         this.#selectionManager.select(unique);
-        this._host.getHostElement().dispatchEvent(new CustomEvent('selected'));
+        this._host.getHostElement().dispatchEvent(new UmbSelectedEvent());
     }
     deselect(unique) {
         this.#selectionManager.deselect(unique);
-        this._host.getHostElement().dispatchEvent(new CustomEvent('selected'));
+        this._host.getHostElement().dispatchEvent(new UmbSelectedEvent());
     }
     async requestTreeRoot() {
         await this.#init;

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 { 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 { UMB_MODAL_MANAGER_CONTEXT_TOKEN, UMB_CONFIRM_MODAL, UMB_DOCUMENT_PICKER_MODAL, } from '../../../../core/modal/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,69 +60,35 @@ 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>
 		`;
@@ -116,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);