@umbraco-cms/backoffice 14.0.0--preview005-c4fa2a31 → 14.0.0--preview005-0faefb02

package/dist-cms/packages/core/components/input-image-cropper/image-cropper-focus-setter.element.js

@@ -10,7 +10,7 @@ var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (
     return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
 };
 var _UmbImageCropperFocusSetterElement_instances, _UmbImageCropperFocusSetterElement_DOT_RADIUS, _UmbImageCropperFocusSetterElement_addEventListeners, _UmbImageCropperFocusSetterElement_removeEventListeners, _UmbImageCropperFocusSetterElement_onStartDrag, _UmbImageCropperFocusSetterElement_onEndDrag, _UmbImageCropperFocusSetterElement_onDrag, _UmbImageCropperFocusSetterElement_onSetFocalPoint;
-import { clamp } from './mathUtils.js';
+import { clamp } from '../../../../shared/utils/index.js';
 import { LitElement, css, html, nothing, customElement, property, query, } from '../../../../external/lit/index.js';
 let UmbImageCropperFocusSetterElement = class UmbImageCropperFocusSetterElement extends LitElement {
     constructor() {

package/dist-cms/packages/core/components/input-image-cropper/image-cropper-preview.element.js

@@ -16,7 +16,7 @@ var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (
     return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
 };
 var _UmbImageCropperPreviewElement_instances, _UmbImageCropperPreviewElement_focalPoint, _UmbImageCropperPreviewElement_initializeCrop, _UmbImageCropperPreviewElement_onFocalPointUpdated;
-import { clamp, calculateExtrapolatedValue } from './mathUtils.js';
+import { calculateExtrapolatedValue, clamp } from '../../../../shared/utils/index.js';
 import { LitElement, css, html, nothing, customElement, property, query } from '../../../../external/lit/index.js';
 let UmbImageCropperPreviewElement = class UmbImageCropperPreviewElement extends LitElement {
     constructor() {

package/dist-cms/packages/core/components/input-image-cropper/image-cropper.element.js

@@ -16,7 +16,7 @@ var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (
     return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
 };
 var _UmbImageCropperElement_instances, _UmbImageCropperElement_VIEWPORT_PADDING, _UmbImageCropperElement_MAX_SCALE_FACTOR, _UmbImageCropperElement_SCROLL_ZOOM_SPEED, _UmbImageCropperElement_minImageScale, _UmbImageCropperElement_maxImageScale, _UmbImageCropperElement_oldImageScale, _UmbImageCropperElement_isDragging, _UmbImageCropperElement_mouseOffsetX, _UmbImageCropperElement_mouseOffsetY, _UmbImageCropperElement_getImageScale_get, _UmbImageCropperElement_addEventListeners, _UmbImageCropperElement_removeEventListeners, _UmbImageCropperElement_initializeCrop, _UmbImageCropperElement_updateImageScale, _UmbImageCropperElement_updateImagePosition, _UmbImageCropperElement_calculateCropCoordinates, _UmbImageCropperElement_toLocalPosition, _UmbImageCropperElement_onSave, _UmbImageCropperElement_onCancel, _UmbImageCropperElement_onReset, _UmbImageCropperElement_onSliderUpdate, _UmbImageCropperElement_onStartDrag, _UmbImageCropperElement_onDrag, _UmbImageCropperElement_onEndDrag, _UmbImageCropperElement_onWheel;
-import { clamp, calculateExtrapolatedValue, inverseLerp, lerp } from './mathUtils.js';
+import { calculateExtrapolatedValue, clamp, inverseLerp, lerp } from '../../../../shared/utils/index.js';
 import { customElement, property, query, state, LitElement, css, html, } from '../../../../external/lit/index.js';
 let UmbImageCropperElement = class UmbImageCropperElement extends LitElement {
     constructor() {

package/dist-cms/packages/core/repository/repository-items.manager.js

@@ -9,7 +9,7 @@ var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (
     if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
     return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
 };
-var _UmbRepositoryItemsManager_instances, _UmbRepositoryItemsManager_getUnique, _UmbRepositoryItemsManager_init, _UmbRepositoryItemsManager_uniques, _UmbRepositoryItemsManager_items, _UmbRepositoryItemsManager_requestItems;
+var _UmbRepositoryItemsManager_instances, _UmbRepositoryItemsManager_getUnique, _UmbRepositoryItemsManager_init, _UmbRepositoryItemsManager_uniques, _UmbRepositoryItemsManager_items, _UmbRepositoryItemsManager_requestItems, _UmbRepositoryItemsManager_sortByUniques;
 import { UmbArrayState } from '../../../libs/observable-api/index.js';
 import { umbExtensionsRegistry } from '../extension-registry/index.js';
 import { UmbExtensionApiInitializer } from '../../../libs/extension-api/index.js';
@@ -36,19 +36,28 @@ export class UmbRepositoryItemsManager extends UmbBaseController {
         __classPrivateFieldSet(this, _UmbRepositoryItemsManager_init, new UmbExtensionApiInitializer(this, umbExtensionsRegistry, repositoryAlias, [this], (permitted, repository) => {
             this.repository = permitted ? repository.api : undefined;
         }).asPromise(), "f");
+        this.observe(this.uniques, (uniques) => {
+            if (uniques.length === 0) {
+                __classPrivateFieldGet(this, _UmbRepositoryItemsManager_items, "f").setValue([]);
+                return;
+            }
+            // Check if we already have the items, and then just sort them:
+            const items = __classPrivateFieldGet(this, _UmbRepositoryItemsManager_items, "f").getValue();
+            if (uniques.length === items.length &&
+                uniques.every((unique) => items.find((item) => __classPrivateFieldGet(this, _UmbRepositoryItemsManager_getUnique, "f").call(this, item) === unique))) {
+                __classPrivateFieldGet(this, _UmbRepositoryItemsManager_items, "f").setValue(__classPrivateFieldGet(this, _UmbRepositoryItemsManager_instances, "m", _UmbRepositoryItemsManager_sortByUniques).call(this, items));
+            }
+            else {
+                // We need to load new items, so ...
+                __classPrivateFieldGet(this, _UmbRepositoryItemsManager_instances, "m", _UmbRepositoryItemsManager_requestItems).call(this);
+            }
+        });
     }
     getUniques() {
         return __classPrivateFieldGet(this, _UmbRepositoryItemsManager_uniques, "f").value;
     }
     setUniques(uniques) {
         __classPrivateFieldGet(this, _UmbRepositoryItemsManager_uniques, "f").setValue(uniques);
-        //TODO: Check if it's safe to call requestItems here.
-        // We don't have to request items if there is no uniques.
-        if (uniques.length === 0) {
-            __classPrivateFieldGet(this, _UmbRepositoryItemsManager_items, "f").setValue([]);
-            return;
-        }
-        __classPrivateFieldGet(this, _UmbRepositoryItemsManager_instances, "m", _UmbRepositoryItemsManager_requestItems).call(this);
     }
     getItems() {
         return __classPrivateFieldGet(this, _UmbRepositoryItemsManager_items, "f").value;
@@ -62,6 +71,15 @@ _UmbRepositoryItemsManager_getUnique = new WeakMap(), _UmbRepositoryItemsManager
     // This is where this.#getUnique comes in play. Unless that can come from the repository, but that collides with the idea of having a multi-type repository. If that happens.
     const { data, asObservable } = await this.repository.requestItems(this.getUniques());
     if (asObservable) {
-        this.observe(asObservable(), (data) => __classPrivateFieldGet(this, _UmbRepositoryItemsManager_items, "f").setValue(data), '_observeRequestedItems');
+        this.observe(asObservable(), (data) => {
+            __classPrivateFieldGet(this, _UmbRepositoryItemsManager_items, "f").setValue(__classPrivateFieldGet(this, _UmbRepositoryItemsManager_instances, "m", _UmbRepositoryItemsManager_sortByUniques).call(this, data));
+        }, '_observeRequestedItems');
     }
+}, _UmbRepositoryItemsManager_sortByUniques = function _UmbRepositoryItemsManager_sortByUniques(data) {
+    const uniques = this.getUniques();
+    return [...data].sort((a, b) => {
+        const aIndex = uniques.indexOf(__classPrivateFieldGet(this, _UmbRepositoryItemsManager_getUnique, "f").call(this, a) ?? '');
+        const bIndex = uniques.indexOf(__classPrivateFieldGet(this, _UmbRepositoryItemsManager_getUnique, "f").call(this, b) ?? '');
+        return aIndex - bIndex;
+    });
 };

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

@@ -45,7 +45,6 @@ export declare class UmbInputDocumentTypeElement extends UmbInputDocumentTypeEle
     private _items?;
     private _editDocumentTypePath;
     constructor();
-    connectedCallback(): void;
     protected getFormElement(): undefined;
     render(): import("lit-html").TemplateResult<1>;
     static styles: import("../../../../../external/lit/index.js").CSSResult[];

package/dist-cms/packages/documents/document-types/components/input-document-type/input-document-type.element.js

@@ -85,9 +85,6 @@ let UmbInputDocumentTypeElement = class UmbInputDocumentTypeElement extends Form
             .observeRouteBuilder((routeBuilder) => {
             this._editDocumentTypePath = routeBuilder({});
         });
-    }
-    connectedCallback() {
-        super.connectedCallback();
         this.addValidator('rangeUnderflow', () => this.minMessage, () => !!this.min && __classPrivateFieldGet(this, _UmbInputDocumentTypeElement_pickerContext, "f").getSelection().length < this.min);
         this.addValidator('rangeOverflow', () => this.maxMessage, () => !!this.max && __classPrivateFieldGet(this, _UmbInputDocumentTypeElement_pickerContext, "f").getSelection().length > this.max);
         this.observe(__classPrivateFieldGet(this, _UmbInputDocumentTypeElement_pickerContext, "f").selection, (selection) => (super.value = selection.join(',')));

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

@@ -39,9 +39,8 @@ export declare class UmbInputDocumentElement extends UmbInputDocumentElement_bas
     showOpenButton?: boolean;
     ignoreUserStartNodes?: boolean;
     set value(idsString: string);
-    private _items?;
+    private _items;
     constructor();
-    connectedCallback(): void;
     protected getFormElement(): undefined;
     render(): import("lit-html").TemplateResult<1>;
     static styles: import("../../../../../external/lit/index.js").CSSResult[];

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

@@ -9,12 +9,22 @@ var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (
     if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
     return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
 };
-var _UmbInputDocumentElement_instances, _UmbInputDocumentElement_pickerContext, _UmbInputDocumentElement_pickableFilter, _UmbInputDocumentElement_openPicker, _UmbInputDocumentElement_openItem, _UmbInputDocumentElement_renderItems, _UmbInputDocumentElement_renderAddButton, _UmbInputDocumentElement_renderItem, _UmbInputDocumentElement_renderIsTrashed, _UmbInputDocumentElement_renderOpenButton;
+var _UmbInputDocumentElement_instances, _UmbInputDocumentElement_sorter, _UmbInputDocumentElement_pickerContext, _UmbInputDocumentElement_pickableFilter, _UmbInputDocumentElement_openPicker, _UmbInputDocumentElement_openItem, _UmbInputDocumentElement_renderItems, _UmbInputDocumentElement_renderAddButton, _UmbInputDocumentElement_renderItem, _UmbInputDocumentElement_renderIcon, _UmbInputDocumentElement_renderIsTrashed, _UmbInputDocumentElement_renderOpenButton;
 import { UmbDocumentPickerContext } from './input-document.context.js';
 import { css, html, customElement, property, state, ifDefined, repeat } from '../../../../../external/lit/index.js';
 import { FormControlMixin } from '../../../../../external/uui/index.js';
 import { UmbLitElement } from '../../../../../shared/lit-element/index.js';
 import { splitStringToArray } from '../../../../../shared/utils/index.js';
+import { UmbSorterController } from '../../../../core/sorter/index.js';
+const SORTER_CONFIG = {
+    compareElementToModel: (element, model) => {
+        return element.getAttribute('detail') === model;
+    },
+    querySelectModelToElement: () => null,
+    identifier: 'Umb.SorterIdentifier.InputDocument',
+    itemSelector: 'uui-ref-node',
+    containerSelector: 'uui-ref-list',
+};
 let UmbInputDocumentElement = class UmbInputDocumentElement extends FormControlMixin(UmbLitElement) {
     /**
      * This is a minimum amount of selected items in this input.
@@ -45,6 +55,7 @@ let UmbInputDocumentElement = class UmbInputDocumentElement extends FormControlM
     }
     set selectedIds(ids) {
         __classPrivateFieldGet(this, _UmbInputDocumentElement_pickerContext, "f").setSelection(ids);
+        __classPrivateFieldGet(this, _UmbInputDocumentElement_sorter, "f").setModel(ids);
     }
     set value(idsString) {
         // Its with full purpose we don't call super.value, as thats being handled by the observation of the context selection.
@@ -53,6 +64,12 @@ let UmbInputDocumentElement = class UmbInputDocumentElement extends FormControlM
     constructor() {
         super();
         _UmbInputDocumentElement_instances.add(this);
+        _UmbInputDocumentElement_sorter.set(this, new UmbSorterController(this, {
+            ...SORTER_CONFIG,
+            onChange: ({ model }) => {
+                this.selectedIds = model;
+            },
+        }));
         /**
          * Min validation message.
          * @type {boolean}
@@ -67,6 +84,7 @@ let UmbInputDocumentElement = class UmbInputDocumentElement extends FormControlM
          * @default
          */
         this.maxMessage = 'This field exceeds the allowed amount of items';
+        this._items = [];
         _UmbInputDocumentElement_pickerContext.set(this, new UmbDocumentPickerContext(this));
         _UmbInputDocumentElement_pickableFilter.set(this, (item) => {
             if (this.allowedContentTypeIds && this.allowedContentTypeIds.length > 0) {
@@ -74,9 +92,6 @@ let UmbInputDocumentElement = class UmbInputDocumentElement extends FormControlM
             }
             return true;
         });
-    }
-    connectedCallback() {
-        super.connectedCallback();
         this.addValidator('rangeUnderflow', () => this.minMessage, () => !!this.min && __classPrivateFieldGet(this, _UmbInputDocumentElement_pickerContext, "f").getSelection().length < this.min);
         this.addValidator('rangeOverflow', () => this.maxMessage, () => !!this.max && __classPrivateFieldGet(this, _UmbInputDocumentElement_pickerContext, "f").getSelection().length > this.max);
         this.observe(__classPrivateFieldGet(this, _UmbInputDocumentElement_pickerContext, "f").selection, (selection) => (super.value = selection.join(',')));
@@ -89,6 +104,7 @@ let UmbInputDocumentElement = class UmbInputDocumentElement extends FormControlM
         return html ` ${__classPrivateFieldGet(this, _UmbInputDocumentElement_instances, "m", _UmbInputDocumentElement_renderItems).call(this)} ${__classPrivateFieldGet(this, _UmbInputDocumentElement_instances, "m", _UmbInputDocumentElement_renderAddButton).call(this)} `;
     }
 };
+_UmbInputDocumentElement_sorter = new WeakMap();
 _UmbInputDocumentElement_pickerContext = new WeakMap();
 _UmbInputDocumentElement_pickableFilter = new WeakMap();
 _UmbInputDocumentElement_instances = new WeakSet();
@@ -107,9 +123,8 @@ _UmbInputDocumentElement_openItem = function _UmbInputDocumentElement_openItem(i
 _UmbInputDocumentElement_renderItems = function _UmbInputDocumentElement_renderItems() {
     if (!this._items)
         return;
-    // TODO: Add sorting. [LK]
-    return html `<uui-ref-list
-			>${repeat(this._items, (item) => item.id, (item) => __classPrivateFieldGet(this, _UmbInputDocumentElement_instances, "m", _UmbInputDocumentElement_renderItem).call(this, item))}
+    return html `<uui-ref-list>
+			${repeat(this._items, (item) => item.id, (item) => __classPrivateFieldGet(this, _UmbInputDocumentElement_instances, "m", _UmbInputDocumentElement_renderItem).call(this, item))}
 		</uui-ref-list>`;
 };
 _UmbInputDocumentElement_renderAddButton = function _UmbInputDocumentElement_renderAddButton() {
@@ -126,7 +141,7 @@ _UmbInputDocumentElement_renderItem = function _UmbInputDocumentElement_renderIt
         return;
     return html `
 			<uui-ref-node name=${ifDefined(item.name)} detail=${ifDefined(item.id)}>
-				${__classPrivateFieldGet(this, _UmbInputDocumentElement_instances, "m", _UmbInputDocumentElement_renderIsTrashed).call(this, item)}
+				${__classPrivateFieldGet(this, _UmbInputDocumentElement_instances, "m", _UmbInputDocumentElement_renderIcon).call(this, item)} ${__classPrivateFieldGet(this, _UmbInputDocumentElement_instances, "m", _UmbInputDocumentElement_renderIsTrashed).call(this, item)}
 				<uui-action-bar slot="actions">
 					${__classPrivateFieldGet(this, _UmbInputDocumentElement_instances, "m", _UmbInputDocumentElement_renderOpenButton).call(this, item)}
 					<uui-button
@@ -138,6 +153,11 @@ _UmbInputDocumentElement_renderItem = function _UmbInputDocumentElement_renderIt
 			</uui-ref-node>
 		`;
 };
+_UmbInputDocumentElement_renderIcon = function _UmbInputDocumentElement_renderIcon(item) {
+    if (!item.icon)
+        return;
+    return html `<uui-icon slot="icon" name=${item.icon}></uui-icon>`;
+};
 _UmbInputDocumentElement_renderIsTrashed = function _UmbInputDocumentElement_renderIsTrashed(item) {
     if (!item.isTrashed)
         return;
@@ -155,6 +175,10 @@ UmbInputDocumentElement.styles = [
 			#add-button {
 				width: 100%;
 			}
+
+			uui-ref-node[drag-placeholder] {
+				opacity: 0.2;
+			}
 		`,
 ];
 __decorate([

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

@@ -40,7 +40,6 @@ export declare class UmbInputMediaElement extends UmbInputMediaElement_base {
     set value(idsString: string);
     private _items?;
     constructor();
-    connectedCallback(): void;
     protected getFormElement(): undefined;
     render(): import("lit-html").TemplateResult<1>;
     static styles: import("../../../../../external/lit/index.js").CSSResult[];

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

@@ -9,12 +9,22 @@ var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (
     if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
     return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
 };
-var _UmbInputMediaElement_instances, _UmbInputMediaElement_pickerContext, _UmbInputMediaElement_pickableFilter, _UmbInputMediaElement_openPicker, _UmbInputMediaElement_openItem, _UmbInputMediaElement_renderItems, _UmbInputMediaElement_renderAddButton, _UmbInputMediaElement_renderItem, _UmbInputMediaElement_renderIsTrashed;
+var _UmbInputMediaElement_instances, _UmbInputMediaElement_sorter, _UmbInputMediaElement_pickerContext, _UmbInputMediaElement_pickableFilter, _UmbInputMediaElement_openPicker, _UmbInputMediaElement_openItem, _UmbInputMediaElement_renderItems, _UmbInputMediaElement_renderAddButton, _UmbInputMediaElement_renderItem, _UmbInputMediaElement_renderIsTrashed;
 import { UmbMediaPickerContext } from './input-media.context.js';
 import { css, html, customElement, property, state, ifDefined, repeat } from '../../../../../external/lit/index.js';
 import { FormControlMixin } from '../../../../../external/uui/index.js';
 import { UmbLitElement } from '../../../../../shared/lit-element/index.js';
 import { splitStringToArray } from '../../../../../shared/utils/index.js';
+import { UmbSorterController } from '../../../../core/sorter/index.js';
+const SORTER_CONFIG = {
+    compareElementToModel: (element, model) => {
+        return element.getAttribute('detail') === model;
+    },
+    querySelectModelToElement: () => null,
+    identifier: 'Umb.SorterIdentifier.InputMedia',
+    itemSelector: 'uui-card-media',
+    containerSelector: '.container',
+};
 let UmbInputMediaElement = class UmbInputMediaElement extends FormControlMixin(UmbLitElement) {
     /**
      * This is a minimum amount of selected items in this input.
@@ -45,6 +55,7 @@ let UmbInputMediaElement = class UmbInputMediaElement extends FormControlMixin(U
     }
     set selectedIds(ids) {
         __classPrivateFieldGet(this, _UmbInputMediaElement_pickerContext, "f").setSelection(ids);
+        __classPrivateFieldGet(this, _UmbInputMediaElement_sorter, "f").setModel(ids);
     }
     set value(idsString) {
         // Its with full purpose we don't call super.value, as thats being handled by the observation of the context selection.
@@ -53,6 +64,12 @@ let UmbInputMediaElement = class UmbInputMediaElement extends FormControlMixin(U
     constructor() {
         super();
         _UmbInputMediaElement_instances.add(this);
+        _UmbInputMediaElement_sorter.set(this, new UmbSorterController(this, {
+            ...SORTER_CONFIG,
+            onChange: ({ model }) => {
+                this.selectedIds = model;
+            },
+        }));
         /**
          * Min validation message.
          * @type {boolean}
@@ -77,21 +94,19 @@ let UmbInputMediaElement = class UmbInputMediaElement extends FormControlMixin(U
             // }
             return true;
         });
-    }
-    connectedCallback() {
-        super.connectedCallback();
-        this.addValidator('rangeUnderflow', () => this.minMessage, () => !!this.min && __classPrivateFieldGet(this, _UmbInputMediaElement_pickerContext, "f").getSelection().length < this.min);
-        this.addValidator('rangeOverflow', () => this.maxMessage, () => !!this.max && __classPrivateFieldGet(this, _UmbInputMediaElement_pickerContext, "f").getSelection().length > this.max);
         this.observe(__classPrivateFieldGet(this, _UmbInputMediaElement_pickerContext, "f").selection, (selection) => (super.value = selection.join(',')));
         this.observe(__classPrivateFieldGet(this, _UmbInputMediaElement_pickerContext, "f").selectedItems, (selectedItems) => (this._items = selectedItems));
+        this.addValidator('rangeUnderflow', () => this.minMessage, () => !!this.min && __classPrivateFieldGet(this, _UmbInputMediaElement_pickerContext, "f").getSelection().length < this.min);
+        this.addValidator('rangeOverflow', () => this.maxMessage, () => !!this.max && __classPrivateFieldGet(this, _UmbInputMediaElement_pickerContext, "f").getSelection().length > this.max);
     }
     getFormElement() {
         return undefined;
     }
     render() {
-        return html ` ${__classPrivateFieldGet(this, _UmbInputMediaElement_instances, "m", _UmbInputMediaElement_renderItems).call(this)} ${__classPrivateFieldGet(this, _UmbInputMediaElement_instances, "m", _UmbInputMediaElement_renderAddButton).call(this)} `;
+        return html `<div class="container">${__classPrivateFieldGet(this, _UmbInputMediaElement_instances, "m", _UmbInputMediaElement_renderItems).call(this)} ${__classPrivateFieldGet(this, _UmbInputMediaElement_instances, "m", _UmbInputMediaElement_renderAddButton).call(this)}</div>`;
     }
 };
+_UmbInputMediaElement_sorter = new WeakMap();
 _UmbInputMediaElement_pickerContext = new WeakMap();
 _UmbInputMediaElement_pickableFilter = new WeakMap();
 _UmbInputMediaElement_instances = new WeakSet();
@@ -110,10 +125,7 @@ _UmbInputMediaElement_openItem = function _UmbInputMediaElement_openItem(item) {
 _UmbInputMediaElement_renderItems = function _UmbInputMediaElement_renderItems() {
     if (!this._items)
         return;
-    // TODO: Add sorting. [LK]
-    return html `
-			${repeat(this._items, (item) => item.id, (item) => __classPrivateFieldGet(this, _UmbInputMediaElement_instances, "m", _UmbInputMediaElement_renderItem).call(this, item))}
-		`;
+    return html `${repeat(this._items, (item) => item.id, (item) => __classPrivateFieldGet(this, _UmbInputMediaElement_instances, "m", _UmbInputMediaElement_renderItem).call(this, item))}`;
 };
 _UmbInputMediaElement_renderAddButton = function _UmbInputMediaElement_renderAddButton() {
     if (this._items && this.max && this._items.length >= this.max)
@@ -156,7 +168,7 @@ _UmbInputMediaElement_renderIsTrashed = function _UmbInputMediaElement_renderIsT
 };
 UmbInputMediaElement.styles = [
     css `
-			:host {
+			.container {
 				display: grid;
 				gap: var(--uui-size-space-3);
 				grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
@@ -172,6 +184,10 @@ UmbInputMediaElement.styles = [
 				display: block;
 				margin: 0 auto;
 			}
+
+			uui-card-media[drag-placeholder] {
+				opacity: 0.2;
+			}
 		`,
 ];
 __decorate([

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

@@ -37,7 +37,6 @@ export declare class UmbInputMediaTypeElement extends UmbInputMediaTypeElement_b
     set value(idsString: string);
     private _items?;
     constructor();
-    connectedCallback(): void;
     protected getFormElement(): undefined;
     render(): import("lit-html").TemplateResult<1>;
     static styles: import("../../../../../external/lit/index.js").CSSResult[];

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

@@ -68,9 +68,6 @@ let UmbInputMediaTypeElement = class UmbInputMediaTypeElement extends FormContro
          */
         this.maxMessage = 'This field exceeds the allowed amount of items';
         _UmbInputMediaTypeElement_pickerContext.set(this, new UmbMediaTypePickerContext(this));
-    }
-    connectedCallback() {
-        super.connectedCallback();
         this.addValidator('rangeUnderflow', () => this.minMessage, () => !!this.min && __classPrivateFieldGet(this, _UmbInputMediaTypeElement_pickerContext, "f").getSelection().length < this.min);
         this.addValidator('rangeOverflow', () => this.maxMessage, () => !!this.max && __classPrivateFieldGet(this, _UmbInputMediaTypeElement_pickerContext, "f").getSelection().length > this.max);
         this.observe(__classPrivateFieldGet(this, _UmbInputMediaTypeElement_pickerContext, "f").selection, (selection) => (super.value = selection.join(',')));

package/dist-cms/packages/members/member-types/components/input-member-type/input-member-type.element.d.ts

@@ -37,7 +37,6 @@ export declare class UmbInputMemberTypeElement extends UmbInputMemberTypeElement
     set value(idsString: string);
     private _items?;
     constructor();
-    connectedCallback(): void;
     protected getFormElement(): undefined;
     render(): import("lit-html").TemplateResult<1>;
     static styles: import("../../../../../external/lit/index.js").CSSResult[];

package/dist-cms/packages/members/member-types/components/input-member-type/input-member-type.element.js

@@ -68,9 +68,6 @@ let UmbInputMemberTypeElement = class UmbInputMemberTypeElement extends FormCont
          */
         this.maxMessage = 'This field exceeds the allowed amount of items';
         _UmbInputMemberTypeElement_pickerContext.set(this, new UmbMemberTypePickerContext(this));
-    }
-    connectedCallback() {
-        super.connectedCallback();
         this.addValidator('rangeUnderflow', () => this.minMessage, () => !!this.min && __classPrivateFieldGet(this, _UmbInputMemberTypeElement_pickerContext, "f").getSelection().length < this.min);
         this.addValidator('rangeOverflow', () => this.maxMessage, () => !!this.max && __classPrivateFieldGet(this, _UmbInputMemberTypeElement_pickerContext, "f").getSelection().length > this.max);
         this.observe(__classPrivateFieldGet(this, _UmbInputMemberTypeElement_pickerContext, "f").selection, (selection) => (super.value = selection.join(',')));
@@ -117,7 +114,7 @@ _UmbInputMemberTypeElement_renderItem = function _UmbInputMemberTypeElement_rend
         return;
     return html `
 			<uui-ref-node-document-type name=${ifDefined(item.name)}>
-			${__classPrivateFieldGet(this, _UmbInputMemberTypeElement_instances, "m", _UmbInputMemberTypeElement_renderIcon).call(this, item)}
+				${__classPrivateFieldGet(this, _UmbInputMemberTypeElement_instances, "m", _UmbInputMemberTypeElement_renderIcon).call(this, item)}
 				<uui-action-bar slot="actions">
 					<uui-button
 						@click=${() => __classPrivateFieldGet(this, _UmbInputMemberTypeElement_pickerContext, "f").requestRemoveItem(item.id)}

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

@@ -1,4 +1,5 @@
 import { UmbLitElement } from '../../../../../shared/lit-element/index.js';
+import type { MemberItemResponseModel } from '../../../../../external/backend-api/index.js';
 declare const UmbInputMemberElement_base: (new (...args: any[]) => import("../../../../../external/uui/index.js").FormControlMixinInterface) & typeof UmbLitElement;
 export declare class UmbInputMemberElement extends UmbInputMemberElement_base {
     #private;
@@ -36,8 +37,10 @@ export declare class UmbInputMemberElement extends UmbInputMemberElement_base {
     set selectedIds(ids: Array<string>);
     allowedContentTypeIds?: string[] | undefined;
     set value(idsString: string);
-    private _items?;
+    private _items;
     constructor();
+    protected _openPicker(): void;
+    protected _requestRemoveItem(item: MemberItemResponseModel): void;
     protected getFormElement(): undefined;
     render(): import("lit-html").TemplateResult<1>;
     static styles: import("../../../../../external/lit/index.js").CSSResult[];

package/dist-cms/packages/members/members/components/input-member/input-member.element.js

@@ -9,11 +9,21 @@ var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (
     if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
     return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
 };
-var _UmbInputMemberElement_instances, _UmbInputMemberElement_pickableFilter, _UmbInputMemberElement_openPicker, _UmbInputMemberElement_requestRemoveItem, _UmbInputMemberElement_renderItems, _UmbInputMemberElement_renderAddButton, _UmbInputMemberElement_renderItem, _UmbInputMemberElement_renderIsTrashed;
+var _UmbInputMemberElement_instances, _UmbInputMemberElement_sorter, _UmbInputMemberElement_pickableFilter, _UmbInputMemberElement_openPicker, _UmbInputMemberElement_requestRemoveItem, _UmbInputMemberElement_renderItems, _UmbInputMemberElement_renderAddButton, _UmbInputMemberElement_renderItem, _UmbInputMemberElement_renderIsTrashed;
 import { css, html, customElement, property, state, ifDefined, repeat } from '../../../../../external/lit/index.js';
 import { FormControlMixin } from '../../../../../external/uui/index.js';
 import { UmbLitElement } from '../../../../../shared/lit-element/index.js';
 import { splitStringToArray } from '../../../../../shared/utils/index.js';
+import { UmbSorterController } from '../../../../core/sorter/index.js';
+const SORTER_CONFIG = {
+    compareElementToModel: (element, model) => {
+        return element.getAttribute('detail') === model;
+    },
+    querySelectModelToElement: () => null,
+    identifier: 'Umb.SorterIdentifier.InputMember',
+    itemSelector: 'uui-ref-node',
+    containerSelector: 'uui-ref-list',
+};
 let UmbInputMemberElement = class UmbInputMemberElement extends FormControlMixin(UmbLitElement) {
     /**
      * This is a minimum amount of selected items in this input.
@@ -53,6 +63,7 @@ let UmbInputMemberElement = class UmbInputMemberElement extends FormControlMixin
     set selectedIds(ids) {
         // TODO: Uncomment, once `UmbMemberPickerContext` has been implemented. [LK]
         //this.#pickerContext.setSelection(ids);
+        __classPrivateFieldGet(this, _UmbInputMemberElement_sorter, "f").setModel(ids);
     }
     set value(idsString) {
         // Its with full purpose we don't call super.value, as thats being handled by the observation of the context selection.
@@ -63,6 +74,12 @@ let UmbInputMemberElement = class UmbInputMemberElement extends FormControlMixin
     constructor() {
         super();
         _UmbInputMemberElement_instances.add(this);
+        _UmbInputMemberElement_sorter.set(this, new UmbSorterController(this, {
+            ...SORTER_CONFIG,
+            onChange: ({ model }) => {
+                this.selectedIds = model;
+            },
+        }));
         /**
          * Min validation message.
          * @type {boolean}
@@ -77,6 +94,7 @@ let UmbInputMemberElement = class UmbInputMemberElement extends FormControlMixin
          * @default
          */
         this.maxMessage = 'This field exceeds the allowed amount of items';
+        this._items = [];
         _UmbInputMemberElement_pickableFilter.set(this, (item) => {
             // TODO: Uncomment, once `UmbMemberPickerContext` has been implemented. [LK]
             console.log('member.pickableFilter', item);
@@ -99,6 +117,16 @@ let UmbInputMemberElement = class UmbInputMemberElement extends FormControlMixin
         // this.observe(this.#pickerContext.selection, (selection) => (super.value = selection.join(',')));
         // this.observe(this.#pickerContext.selectedItems, (selectedItems) => (this._items = selectedItems));
     }
+    _openPicker() {
+        console.log('member.openPicker');
+        // this.#pickerContext.openPicker({
+        // 	hideTreeRoot: true,
+        // });
+    }
+    _requestRemoveItem(item) {
+        console.log('member.requestRemoveItem', item);
+        //this.#pickerContext.requestRemoveItem(item.id!);
+    }
     getFormElement() {
         return undefined;
     }
@@ -106,6 +134,7 @@ let UmbInputMemberElement = class UmbInputMemberElement extends FormControlMixin
         return html ` ${__classPrivateFieldGet(this, _UmbInputMemberElement_instances, "m", _UmbInputMemberElement_renderItems).call(this)} ${__classPrivateFieldGet(this, _UmbInputMemberElement_instances, "m", _UmbInputMemberElement_renderAddButton).call(this)} `;
     }
 };
+_UmbInputMemberElement_sorter = new WeakMap();
 _UmbInputMemberElement_pickableFilter = new WeakMap();
 _UmbInputMemberElement_instances = new WeakSet();
 _UmbInputMemberElement_openPicker = function _UmbInputMemberElement_openPicker() {
@@ -124,9 +153,8 @@ _UmbInputMemberElement_requestRemoveItem = function _UmbInputMemberElement_reque
 _UmbInputMemberElement_renderItems = function _UmbInputMemberElement_renderItems() {
     if (!this._items)
         return;
-    // TODO: Add sorting. [LK]
-    return html `<uui-ref-list
-			>${repeat(this._items, (item) => item.id, (item) => __classPrivateFieldGet(this, _UmbInputMemberElement_instances, "m", _UmbInputMemberElement_renderItem).call(this, item))}
+    return html `<uui-ref-list>
+			${repeat(this._items, (item) => item.id, (item) => __classPrivateFieldGet(this, _UmbInputMemberElement_instances, "m", _UmbInputMemberElement_renderItem).call(this, item))}
 		</uui-ref-list>`;
 };
 _UmbInputMemberElement_renderAddButton = function _UmbInputMemberElement_renderAddButton() {
@@ -162,6 +190,10 @@ UmbInputMemberElement.styles = [
 			#add-button {
 				width: 100%;
 			}
+
+			uui-ref-node[drag-placeholder] {
+				opacity: 0.2;
+			}
 		`,
 ];
 __decorate([

package/dist-cms/shared/utils/index.d.ts

@@ -11,6 +11,7 @@ export * from './path-folder-name.function.js';
 export * from './selection-manager/selection.manager.js';
 export * from './udi.js';
 export * from './umbraco-path.function.js';
+export * from './math.js';
 export * from './split-string-to-array.js';
 declare global {
     interface Window {

package/dist-cms/shared/utils/index.js

@@ -11,4 +11,5 @@ export * from './path-folder-name.function.js';
 export * from './selection-manager/selection.manager.js';
 export * from './udi.js';
 export * from './umbraco-path.function.js';
+export * from './math.js';
 export * from './split-string-to-array.js';