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

package/dist-cms/packages/core/sorter/sorter.controller.js

@@ -1,15 +1,4 @@
-var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
-    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
-    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 __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
-    if (kind === "m") throw new TypeError("Private method is not writable");
-    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
-    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 _UmbSorterController_instances, _a, _UmbSorterController_host, _UmbSorterController_isConnected, _UmbSorterController_config, _UmbSorterController_observer, _UmbSorterController_model, _UmbSorterController_rqaId, _UmbSorterController_containerElement, _UmbSorterController_useContainerShadowRoot, _UmbSorterController_scrollElement, _UmbSorterController_enabled, _UmbSorterController_dragX, _UmbSorterController_dragY, _UmbSorterController_initialize, _UmbSorterController_uninitialize, _UmbSorterController_setupPlaceholderStyle, _UmbSorterController_removePlaceholderStyle, _UmbSorterController_setCurrentElement, _UmbSorterController_handleDragStart, _UmbSorterController_handleDragEnd, _UmbSorterController_handleDragMove, _UmbSorterController_updateDragMove, _UmbSorterController_moveElementTo, _UmbSorterController_autoScrollRAF, _UmbSorterController_autoScrollEl, _UmbSorterController_performAutoScroll, _UmbSorterController_stopAutoScroll;
+var _a;
 import { isWithinRect } from '../utils/index.js';
 import { UmbControllerBase } from '../../../libs/class-api/index.js';
 const autoScrollSensitivity = 50;
@@ -69,47 +58,51 @@ function destroyPreventEvent(element) {
  * @description This controller can make user able to sort items.
  */
 export class UmbSorterController extends UmbControllerBase {
+    #host;
+    #isConnected;
+    #config;
+    #observer;
+    #model;
+    #rqaId;
+    #containerElement;
+    #useContainerShadowRoot;
+    #scrollElement;
+    #enabled;
+    #dragX;
+    #dragY;
     get identifier() {
-        return __classPrivateFieldGet(this, _UmbSorterController_config, "f").identifier;
+        return this.#config.identifier;
     }
     constructor(host, config) {
         super(host);
-        _UmbSorterController_instances.add(this);
-        _UmbSorterController_host.set(this, void 0);
-        _UmbSorterController_isConnected.set(this, false);
-        _UmbSorterController_config.set(this, void 0);
-        _UmbSorterController_observer.set(this, void 0);
-        _UmbSorterController_model.set(this, []);
-        _UmbSorterController_rqaId.set(this, void 0);
-        _UmbSorterController_containerElement.set(this, void 0);
-        _UmbSorterController_useContainerShadowRoot.set(this, void 0);
-        _UmbSorterController_scrollElement.set(this, void 0);
-        _UmbSorterController_enabled.set(this, true);
-        _UmbSorterController_dragX.set(this, 0);
-        _UmbSorterController_dragY.set(this, 0);
-        _UmbSorterController_initialize.set(this, () => {
-            const containerEl = (__classPrivateFieldGet(this, _UmbSorterController_config, "f").containerSelector
-                ? __classPrivateFieldGet(this, _UmbSorterController_host, "f").shadowRoot.querySelector(__classPrivateFieldGet(this, _UmbSorterController_config, "f").containerSelector)
-                : __classPrivateFieldGet(this, _UmbSorterController_host, "f")) ?? __classPrivateFieldGet(this, _UmbSorterController_host, "f");
-            __classPrivateFieldSet(this, _UmbSorterController_containerElement, containerEl, "f");
-            __classPrivateFieldSet(this, _UmbSorterController_useContainerShadowRoot, __classPrivateFieldGet(this, _UmbSorterController_containerElement, "f") === __classPrivateFieldGet(this, _UmbSorterController_host, "f"), "f");
+        this.#isConnected = false;
+        this.#model = [];
+        this.#enabled = true;
+        this.#dragX = 0;
+        this.#dragY = 0;
+        this.#initialize = () => {
+            const containerEl = (this.#config.containerSelector
+                ? this.#host.shadowRoot.querySelector(this.#config.containerSelector)
+                : this.#host) ?? this.#host;
+            this.#containerElement = containerEl;
+            this.#useContainerShadowRoot = this.#containerElement === this.#host;
             // Only look at the shadowRoot if the containerElement is host.
-            const containerElement = __classPrivateFieldGet(this, _UmbSorterController_useContainerShadowRoot, "f")
-                ? __classPrivateFieldGet(this, _UmbSorterController_containerElement, "f").shadowRoot ?? __classPrivateFieldGet(this, _UmbSorterController_containerElement, "f")
-                : __classPrivateFieldGet(this, _UmbSorterController_containerElement, "f");
+            const containerElement = this.#useContainerShadowRoot
+                ? this.#containerElement.shadowRoot ?? this.#containerElement
+                : this.#containerElement;
             containerElement.addEventListener('dragover', this._itemDraggedOver);
             // TODO: Do we need to handle dragleave?
-            __classPrivateFieldGet(this, _UmbSorterController_observer, "f").disconnect();
-            containerElement.querySelectorAll(__classPrivateFieldGet(this, _UmbSorterController_config, "f").itemSelector).forEach((child) => {
-                if (child.matches && child.matches(__classPrivateFieldGet(this, _UmbSorterController_config, "f").itemSelector)) {
+            this.#observer.disconnect();
+            containerElement.querySelectorAll(this.#config.itemSelector).forEach((child) => {
+                if (child.matches && child.matches(this.#config.itemSelector)) {
                     this.setupItem(child);
                 }
             });
-            __classPrivateFieldGet(this, _UmbSorterController_observer, "f").observe(containerElement, {
+            this.#observer.observe(containerElement, {
                 childList: true,
                 subtree: false,
             });
-        });
+        };
         this._itemDraggedOver = (e) => {
             //if(UmbSorterController.activeSorter === this) return;
             const dropSorter = _a.dropSorter;
@@ -121,7 +114,7 @@ export class UmbSorterController extends UmbControllerBase {
                     e.dataTransfer.dropEffect = 'move';
                 }
                 // Do nothing as we are the active sorter.
-                __classPrivateFieldGet(this, _UmbSorterController_instances, "m", _UmbSorterController_handleDragMove).call(this, e);
+                this.#handleDragMove(e);
                 // Maybe we need to stop the event in this case.
                 // Do not bubble up to parent sorters:
                 e.stopPropagation();
@@ -135,38 +128,38 @@ export class UmbSorterController extends UmbControllerBase {
                 e.stopPropagation();
             }
         };
-        _UmbSorterController_handleDragStart.set(this, (event) => {
-            const element = event.target.closest(__classPrivateFieldGet(this, _UmbSorterController_config, "f").itemSelector);
+        this.#handleDragStart = (event) => {
+            const element = event.target.closest(this.#config.itemSelector);
             if (!element)
                 return;
             if (_a.activeElement && _a.activeElement !== element) {
                 // TODO: Remove this console log at one point.
                 console.log("drag start realized that something was already active, so we'll end it. -------!!!!#€#%#€");
-                __classPrivateFieldGet(this, _UmbSorterController_handleDragEnd, "f").call(this);
+                this.#handleDragEnd();
             }
             event.stopPropagation();
             if (event.dataTransfer) {
                 event.dataTransfer.effectAllowed = 'all'; // copyMove when we enhance the drag with clipboard data.// defaults to 'all'
             }
-            if (!__classPrivateFieldGet(this, _UmbSorterController_scrollElement, "f")) {
-                __classPrivateFieldSet(this, _UmbSorterController_scrollElement, getParentScrollElement(__classPrivateFieldGet(this, _UmbSorterController_containerElement, "f"), true), "f");
+            if (!this.#scrollElement) {
+                this.#scrollElement = getParentScrollElement(this.#containerElement, true);
             }
-            __classPrivateFieldGet(this, _UmbSorterController_instances, "m", _UmbSorterController_setCurrentElement).call(this, element);
+            this.#setCurrentElement(element);
             _a.activeItem = this.getItemOfElement(_a.activeElement);
             _a.originalSorter = this;
-            _a.originalIndex = __classPrivateFieldGet(this, _UmbSorterController_model, "f").indexOf(_a.activeItem);
+            _a.originalIndex = this.#model.indexOf(_a.activeItem);
             if (!_a.activeItem) {
                 console.error('Could not find item related to this element.', _a.activeElement);
                 return;
             }
             // Get the current index of the item:
-            _a.activeIndex = __classPrivateFieldGet(this, _UmbSorterController_model, "f").indexOf(_a.activeItem);
+            _a.activeIndex = this.#model.indexOf(_a.activeItem);
             _a.activeElement.style.transform = 'translateZ(0)'; // Solves problem with FireFox and ShadowDom in the drag-image.
-            if (__classPrivateFieldGet(this, _UmbSorterController_config, "f").dataTransferResolver) {
-                __classPrivateFieldGet(this, _UmbSorterController_config, "f").dataTransferResolver(event.dataTransfer, _a.activeItem);
+            if (this.#config.dataTransferResolver) {
+                this.#config.dataTransferResolver(event.dataTransfer, _a.activeItem);
             }
-            if (__classPrivateFieldGet(this, _UmbSorterController_config, "f").onStart) {
-                __classPrivateFieldGet(this, _UmbSorterController_config, "f").onStart({
+            if (this.#config.onStart) {
+                this.#config.onStart({
                     item: _a.activeItem,
                     element: _a.activeElement,
                 });
@@ -175,16 +168,16 @@ export class UmbSorterController extends UmbControllerBase {
             _a.activeSorter = this;
             _a.dropSorter = this;
             // We must wait one frame before changing the look of the block.
-            __classPrivateFieldSet(this, _UmbSorterController_rqaId, requestAnimationFrame(() => {
+            this.#rqaId = requestAnimationFrame(() => {
                 // It should be okay to use the same rqaId, as the move does not, or is okay not, to happen on first frame/drag-move.
-                __classPrivateFieldSet(this, _UmbSorterController_rqaId, undefined, "f");
+                this.#rqaId = undefined;
                 if (_a.activeElement) {
                     _a.activeElement.style.transform = '';
                 }
-            }), "f");
+            });
             return true;
-        });
-        _UmbSorterController_handleDragEnd.set(this, async (event) => {
+        };
+        this.#handleDragEnd = async (event) => {
             // If not good drop, revert model?
             if (!_a.activeElement || !_a.activeItem) {
                 return;
@@ -194,18 +187,18 @@ export class UmbSorterController extends UmbControllerBase {
                 _a.originalSorter.moveItemInModel(_a.originalIndex ?? 0, _a.activeSorter);
             }
             _a.activeElement.style.transform = '';
-            __classPrivateFieldGet(this, _UmbSorterController_instances, "m", _UmbSorterController_removePlaceholderStyle).call(this);
-            __classPrivateFieldGet(this, _UmbSorterController_instances, "m", _UmbSorterController_stopAutoScroll).call(this);
+            this.#removePlaceholderStyle();
+            this.#stopAutoScroll();
             this.removeAllowIndication();
-            if (__classPrivateFieldGet(this, _UmbSorterController_config, "f").onEnd) {
-                __classPrivateFieldGet(this, _UmbSorterController_config, "f").onEnd({
+            if (this.#config.onEnd) {
+                this.#config.onEnd({
                     item: _a.activeItem,
                     element: _a.activeElement,
                 });
             }
-            if (__classPrivateFieldGet(this, _UmbSorterController_rqaId, "f")) {
-                cancelAnimationFrame(__classPrivateFieldGet(this, _UmbSorterController_rqaId, "f"));
-                __classPrivateFieldSet(this, _UmbSorterController_rqaId, undefined, "f");
+            if (this.#rqaId) {
+                cancelAnimationFrame(this.#rqaId);
+                this.#rqaId = undefined;
             }
             _a.activeItem = undefined;
             _a.activeElement = undefined;
@@ -214,34 +207,34 @@ export class UmbSorterController extends UmbControllerBase {
             _a.dropSorter = undefined;
             _a.originalIndex = undefined;
             _a.originalSorter = undefined;
-            __classPrivateFieldSet(this, _UmbSorterController_dragX, 0, "f");
-            __classPrivateFieldSet(this, _UmbSorterController_dragY, 0, "f");
-        });
-        _UmbSorterController_updateDragMove.set(this, () => {
-            __classPrivateFieldSet(this, _UmbSorterController_rqaId, undefined, "f");
+            this.#dragX = 0;
+            this.#dragY = 0;
+        };
+        this.#updateDragMove = () => {
+            this.#rqaId = undefined;
             if (!_a.activeElement || !_a.activeItem) {
                 return;
             }
             // Maybe no need to check this twice, like we do it before the RAF an inside it, I think its fine to choose one of them.
             const currentElementRect = _a.activeElement.getBoundingClientRect();
-            const insideCurrentRect = isWithinRect(__classPrivateFieldGet(this, _UmbSorterController_dragX, "f"), __classPrivateFieldGet(this, _UmbSorterController_dragY, "f"), currentElementRect);
+            const insideCurrentRect = isWithinRect(this.#dragX, this.#dragY, currentElementRect);
             if (insideCurrentRect) {
                 return;
             }
-            const containerElement = __classPrivateFieldGet(this, _UmbSorterController_useContainerShadowRoot, "f")
-                ? __classPrivateFieldGet(this, _UmbSorterController_containerElement, "f").shadowRoot ?? __classPrivateFieldGet(this, _UmbSorterController_containerElement, "f")
-                : __classPrivateFieldGet(this, _UmbSorterController_containerElement, "f");
+            const containerElement = this.#useContainerShadowRoot
+                ? this.#containerElement.shadowRoot ?? this.#containerElement
+                : this.#containerElement;
             // We want to retrieve the children of the container, every time to ensure we got the right order and index
-            const orderedContainerElements = Array.from(containerElement.querySelectorAll(__classPrivateFieldGet(this, _UmbSorterController_config, "f").itemSelector));
-            const currentContainerRect = __classPrivateFieldGet(this, _UmbSorterController_containerElement, "f").getBoundingClientRect();
+            const orderedContainerElements = Array.from(containerElement.querySelectorAll(this.#config.itemSelector));
+            const currentContainerRect = this.#containerElement.getBoundingClientRect();
             // gather elements on the same row.
             const elementsInSameRow = [];
             let placeholderIsInThisRow = false;
             for (const el of orderedContainerElements) {
                 const elRect = el.getBoundingClientRect();
                 // gather elements on the same row.
-                if (__classPrivateFieldGet(this, _UmbSorterController_dragY, "f") >= elRect.top && __classPrivateFieldGet(this, _UmbSorterController_dragY, "f") <= elRect.bottom) {
-                    const dragElement = __classPrivateFieldGet(this, _UmbSorterController_config, "f").draggableSelector ? el.querySelector(__classPrivateFieldGet(this, _UmbSorterController_config, "f").draggableSelector) : el;
+                if (this.#dragY >= elRect.top && this.#dragY <= elRect.bottom) {
+                    const dragElement = this.#config.draggableSelector ? el.querySelector(this.#config.draggableSelector) : el;
                     if (dragElement) {
                         const dragElementRect = dragElement.getBoundingClientRect();
                         if (el !== _a.activeElement) {
@@ -259,12 +252,12 @@ export class UmbSorterController extends UmbControllerBase {
             let placeAfter = false;
             elementsInSameRow.forEach((sameRow) => {
                 const centerX = sameRow.dragRect.left + sameRow.dragRect.width * 0.5;
-                const distance = Math.abs(__classPrivateFieldGet(this, _UmbSorterController_dragX, "f") - centerX);
+                const distance = Math.abs(this.#dragX - centerX);
                 if (distance < lastDistance) {
                     foundEl = sameRow.el;
                     foundElDragRect = sameRow.dragRect;
                     lastDistance = distance;
-                    placeAfter = __classPrivateFieldGet(this, _UmbSorterController_dragX, "f") > centerX;
+                    placeAfter = this.#dragX > centerX;
                 }
             });
             if (foundEl) {
@@ -280,9 +273,9 @@ export class UmbSorterController extends UmbControllerBase {
                 if (this.updateAllowIndication(_a.activeItem) === false) {
                     return;
                 }
-                const verticalDirection = __classPrivateFieldGet(this, _UmbSorterController_config, "f").resolvePlacement
-                    ? __classPrivateFieldGet(this, _UmbSorterController_config, "f").resolvePlacement({
-                        containerElement: __classPrivateFieldGet(this, _UmbSorterController_containerElement, "f"),
+                const verticalDirection = this.#config.resolvePlacement
+                    ? this.#config.resolvePlacement({
+                        containerElement: this.#containerElement,
                         containerRect: currentContainerRect,
                         item: _a.activeItem,
                         element: _a.activeElement,
@@ -292,8 +285,8 @@ export class UmbSorterController extends UmbControllerBase {
                         relatedRect: foundElDragRect,
                         placeholderIsInThisRow: placeholderIsInThisRow,
                         horizontalPlaceAfter: placeAfter,
-                        pointerX: __classPrivateFieldGet(this, _UmbSorterController_dragX, "f"),
-                        pointerY: __classPrivateFieldGet(this, _UmbSorterController_dragY, "f"),
+                        pointerX: this.#dragX,
+                        pointerY: this.#dragY,
                     })
                     : true;
                 if (verticalDirection === null) {
@@ -301,7 +294,7 @@ export class UmbSorterController extends UmbControllerBase {
                     return;
                 }
                 if (verticalDirection) {
-                    placeAfter = __classPrivateFieldGet(this, _UmbSorterController_dragY, "f") > foundElDragRect.top + foundElDragRect.height * 0.5;
+                    placeAfter = this.#dragY > foundElDragRect.top + foundElDragRect.height * 0.5;
                 }
                 if (verticalDirection) {
                     let el;
@@ -329,7 +322,7 @@ export class UmbSorterController extends UmbControllerBase {
                 }
                 const foundElIndex = orderedContainerElements.indexOf(foundEl);
                 const newIndex = placeAfter ? foundElIndex + 1 : foundElIndex;
-                __classPrivateFieldGet(this, _UmbSorterController_instances, "m", _UmbSorterController_moveElementTo).call(this, newIndex);
+                this.#moveElementTo(newIndex);
                 return;
             }
             // We skipped the above part cause we are above or below container, or within an empty container:
@@ -337,75 +330,75 @@ export class UmbSorterController extends UmbControllerBase {
             if (this.updateAllowIndication(_a.activeItem) === false) {
                 return;
             }
-            if (__classPrivateFieldGet(this, _UmbSorterController_model, "f").length === 0) {
+            if (this.#model.length === 0) {
                 // Here is no items, so we should just move into the top of the container.
-                __classPrivateFieldGet(this, _UmbSorterController_instances, "m", _UmbSorterController_moveElementTo).call(this, 0);
+                this.#moveElementTo(0);
             }
-            else if (__classPrivateFieldGet(this, _UmbSorterController_dragY, "f") < currentContainerRect.top) {
-                __classPrivateFieldGet(this, _UmbSorterController_instances, "m", _UmbSorterController_moveElementTo).call(this, 0);
+            else if (this.#dragY < currentContainerRect.top) {
+                this.#moveElementTo(0);
             }
-            else if (__classPrivateFieldGet(this, _UmbSorterController_dragY, "f") > currentContainerRect.bottom) {
-                __classPrivateFieldGet(this, _UmbSorterController_instances, "m", _UmbSorterController_moveElementTo).call(this, -1);
+            else if (this.#dragY > currentContainerRect.bottom) {
+                this.#moveElementTo(-1);
             }
-        });
+        };
         // TODO: Move auto scroll into its own class?
-        _UmbSorterController_autoScrollRAF.set(this, null);
-        _UmbSorterController_autoScrollEl.set(this, document.scrollingElement || document.documentElement);
+        this.#autoScrollRAF = null;
+        this.#autoScrollEl = document.scrollingElement || document.documentElement;
         this.autoScrollX = 0;
         this.autoScrollY = 0;
-        _UmbSorterController_performAutoScroll.set(this, () => {
-            __classPrivateFieldGet(this, _UmbSorterController_autoScrollEl, "f").scrollLeft += this.autoScrollX * autoScrollSpeed;
-            __classPrivateFieldGet(this, _UmbSorterController_autoScrollEl, "f").scrollTop += this.autoScrollY * autoScrollSpeed;
-            __classPrivateFieldSet(this, _UmbSorterController_autoScrollRAF, requestAnimationFrame(__classPrivateFieldGet(this, _UmbSorterController_performAutoScroll, "f")), "f");
-        });
-        __classPrivateFieldSet(this, _UmbSorterController_host, host, "f");
+        this.#performAutoScroll = () => {
+            this.#autoScrollEl.scrollLeft += this.autoScrollX * autoScrollSpeed;
+            this.#autoScrollEl.scrollTop += this.autoScrollY * autoScrollSpeed;
+            this.#autoScrollRAF = requestAnimationFrame(this.#performAutoScroll);
+        };
+        this.#host = host;
         // Set defaults:
-        config.identifier ?? (config.identifier = Symbol());
-        config.ignorerSelector ?? (config.ignorerSelector = 'a, img, iframe');
+        config.identifier ??= Symbol();
+        config.ignorerSelector ??= 'a, img, iframe';
         if (!config.placeholderClass && !config.placeholderAttr) {
             config.placeholderAttr = 'drag-placeholder';
         }
-        __classPrivateFieldSet(this, _UmbSorterController_config, config, "f");
+        this.#config = config;
         host.addUmbController(this);
-        __classPrivateFieldSet(this, _UmbSorterController_observer, new MutationObserver((mutations) => {
+        this.#observer = new MutationObserver((mutations) => {
             mutations.forEach((mutation) => {
                 mutation.addedNodes.forEach((addedNode) => {
-                    if (addedNode.matches && addedNode.matches(__classPrivateFieldGet(this, _UmbSorterController_config, "f").itemSelector)) {
+                    if (addedNode.matches && addedNode.matches(this.#config.itemSelector)) {
                         this.setupItem(addedNode);
                     }
                 });
                 mutation.removedNodes.forEach((removedNode) => {
-                    if (removedNode.matches && removedNode.matches(__classPrivateFieldGet(this, _UmbSorterController_config, "f").itemSelector)) {
+                    if (removedNode.matches && removedNode.matches(this.#config.itemSelector)) {
                         this.destroyItem(removedNode);
                     }
                 });
             });
-        }), "f");
+        });
     }
     enable() {
-        if (__classPrivateFieldGet(this, _UmbSorterController_enabled, "f"))
+        if (this.#enabled)
             return;
-        __classPrivateFieldSet(this, _UmbSorterController_enabled, true, "f");
-        if (__classPrivateFieldGet(this, _UmbSorterController_isConnected, "f")) {
-            __classPrivateFieldGet(this, _UmbSorterController_initialize, "f").call(this);
+        this.#enabled = true;
+        if (this.#isConnected) {
+            this.#initialize();
         }
     }
     disable() {
-        if (!__classPrivateFieldGet(this, _UmbSorterController_enabled, "f"))
+        if (!this.#enabled)
             return;
-        __classPrivateFieldSet(this, _UmbSorterController_enabled, false, "f");
-        if (__classPrivateFieldGet(this, _UmbSorterController_isConnected, "f")) {
-            __classPrivateFieldGet(this, _UmbSorterController_instances, "m", _UmbSorterController_uninitialize).call(this);
+        this.#enabled = false;
+        if (this.#isConnected) {
+            this.#uninitialize();
         }
     }
     setModel(model) {
-        if (__classPrivateFieldGet(this, _UmbSorterController_model, "f")) {
+        if (this.#model) {
             // TODO: Some updates might need to be done, as the model is about to change? Do make the changes after setting the model?.. [NL]
-            __classPrivateFieldSet(this, _UmbSorterController_model, model, "f");
+            this.#model = model;
         }
     }
     hasItem(unique) {
-        return __classPrivateFieldGet(this, _UmbSorterController_model, "f").find((x) => __classPrivateFieldGet(this, _UmbSorterController_config, "f").getUniqueOfModel(x) === unique) !== undefined;
+        return this.#model.find((x) => this.#config.getUniqueOfModel(x) === unique) !== undefined;
     }
     /*
     getItem(unique: string) {
@@ -414,78 +407,163 @@ export class UmbSorterController extends UmbControllerBase {
     }
     */
     hostConnected() {
-        __classPrivateFieldSet(this, _UmbSorterController_isConnected, true, "f");
-        if (__classPrivateFieldGet(this, _UmbSorterController_enabled, "f")) {
-            requestAnimationFrame(__classPrivateFieldGet(this, _UmbSorterController_initialize, "f"));
+        this.#isConnected = true;
+        if (this.#enabled) {
+            requestAnimationFrame(this.#initialize);
         }
     }
     hostDisconnected() {
-        __classPrivateFieldSet(this, _UmbSorterController_isConnected, false, "f");
-        if (__classPrivateFieldGet(this, _UmbSorterController_enabled, "f")) {
-            __classPrivateFieldGet(this, _UmbSorterController_instances, "m", _UmbSorterController_uninitialize).call(this);
+        this.#isConnected = false;
+        if (this.#enabled) {
+            this.#uninitialize();
+        }
+    }
+    #initialize;
+    #uninitialize() {
+        // TODO: Is there more clean up to do??
+        this.#observer.disconnect();
+        if (this.#containerElement) {
+            // Only look at the shadowRoot if the containerElement is host.
+            const containerElement = this.#useContainerShadowRoot
+                ? this.#containerElement.shadowRoot ?? this.#containerElement
+                : this.#containerElement;
+            containerElement.removeEventListener('dragover', this._itemDraggedOver);
+            this.#containerElement = undefined;
         }
     }
     setupItem(element) {
-        if (__classPrivateFieldGet(this, _UmbSorterController_config, "f").ignorerSelector) {
-            setupIgnorerElements(element, __classPrivateFieldGet(this, _UmbSorterController_config, "f").ignorerSelector);
+        if (this.#config.ignorerSelector) {
+            setupIgnorerElements(element, this.#config.ignorerSelector);
         }
-        if (!__classPrivateFieldGet(this, _UmbSorterController_config, "f").disabledItemSelector || !element.matches(__classPrivateFieldGet(this, _UmbSorterController_config, "f").disabledItemSelector)) {
+        if (!this.#config.disabledItemSelector || !element.matches(this.#config.disabledItemSelector)) {
             // Idea: to make sure on does not get initialized twice: if ((element as HTMLElement).draggable === true) return;
-            const draggableElement = __classPrivateFieldGet(this, _UmbSorterController_config, "f").draggableSelector
-                ? element.querySelector(__classPrivateFieldGet(this, _UmbSorterController_config, "f").draggableSelector) ?? element
+            const draggableElement = this.#config.draggableSelector
+                ? element.querySelector(this.#config.draggableSelector) ?? element
                 : element;
             draggableElement.draggable = true;
-            draggableElement.addEventListener('dragstart', __classPrivateFieldGet(this, _UmbSorterController_handleDragStart, "f"));
-            draggableElement.addEventListener('dragend', __classPrivateFieldGet(this, _UmbSorterController_handleDragEnd, "f"));
+            draggableElement.addEventListener('dragstart', this.#handleDragStart);
+            draggableElement.addEventListener('dragend', this.#handleDragEnd);
         }
         // If we have a currentItem and the element matches, we should set the currentElement to this element.
         if (_a.activeItem) {
-            const elUnique = __classPrivateFieldGet(this, _UmbSorterController_config, "f").getUniqueOfElement(element);
-            const modelUnique = __classPrivateFieldGet(this, _UmbSorterController_config, "f").getUniqueOfModel(_a.activeItem);
+            const elUnique = this.#config.getUniqueOfElement(element);
+            const modelUnique = this.#config.getUniqueOfModel(_a.activeItem);
             if (elUnique === modelUnique && elUnique !== undefined) {
                 if (_a.activeElement !== element) {
-                    __classPrivateFieldGet(this, _UmbSorterController_instances, "m", _UmbSorterController_setCurrentElement).call(this, element);
+                    this.#setCurrentElement(element);
                 }
             }
         }
     }
     destroyItem(element) {
-        if (__classPrivateFieldGet(this, _UmbSorterController_config, "f").ignorerSelector) {
-            destroyIgnorerElements(element, __classPrivateFieldGet(this, _UmbSorterController_config, "f").ignorerSelector);
+        if (this.#config.ignorerSelector) {
+            destroyIgnorerElements(element, this.#config.ignorerSelector);
         }
-        const draggableElement = __classPrivateFieldGet(this, _UmbSorterController_config, "f").draggableSelector
-            ? element.querySelector(__classPrivateFieldGet(this, _UmbSorterController_config, "f").draggableSelector) ?? element
+        const draggableElement = this.#config.draggableSelector
+            ? element.querySelector(this.#config.draggableSelector) ?? element
             : element;
-        draggableElement.removeEventListener('dragstart', __classPrivateFieldGet(this, _UmbSorterController_handleDragStart, "f"));
+        draggableElement.removeEventListener('dragstart', this.#handleDragStart);
         // We are not ready to remove the dragend or drop, as this is might be the active one just moving container:
         //draggableElement.removeEventListener('dragend', this.#handleDragEnd);
     }
+    #setupPlaceholderStyle() {
+        if (this.#config.placeholderClass) {
+            _a.activeElement?.classList.add(this.#config.placeholderClass);
+        }
+        if (this.#config.placeholderAttr) {
+            _a.activeElement?.setAttribute(this.#config.placeholderAttr, '');
+        }
+    }
+    #removePlaceholderStyle() {
+        if (this.#config.placeholderClass) {
+            _a.activeElement?.classList.remove(this.#config.placeholderClass);
+        }
+        if (this.#config.placeholderAttr) {
+            _a.activeElement?.removeAttribute(this.#config.placeholderAttr);
+        }
+    }
+    #setCurrentElement(element) {
+        _a.activeElement = element;
+        _a.activeDragElement = this.#config.draggableSelector
+            ? element.querySelector(this.#config.draggableSelector) ?? undefined
+            : element;
+        if (!_a.activeDragElement) {
+            throw new Error('Could not find drag element, query was made with the `draggableSelector` of "' +
+                this.#config.draggableSelector +
+                '"');
+            return;
+        }
+        this.#setupPlaceholderStyle();
+    }
+    #handleDragStart;
+    #handleDragEnd;
+    #handleDragMove(event) {
+        if (!_a.activeElement) {
+            return;
+        }
+        const clientX = event.touches
+            ? event.touches[0].clientX
+            : event.clientX;
+        const clientY = event.touches
+            ? event.touches[0].clientY
+            : event.clientY;
+        if (clientX !== 0 && clientY !== 0) {
+            if (this.#dragX === clientX && this.#dragY === clientY) {
+                return;
+            }
+            this.#dragX = clientX;
+            this.#dragY = clientY;
+            this.handleAutoScroll(this.#dragX, this.#dragY);
+            const activeDragRect = _a.activeDragElement.getBoundingClientRect();
+            const insideCurrentRect = isWithinRect(this.#dragX, this.#dragY, activeDragRect);
+            if (!insideCurrentRect) {
+                if (this.#rqaId === undefined) {
+                    this.#rqaId = requestAnimationFrame(this.#updateDragMove);
+                }
+            }
+        }
+    }
+    #updateDragMove;
+    //
+    async #moveElementTo(newIndex) {
+        if (!_a.activeElement || !_a.activeSorter) {
+            return;
+        }
+        const requestingSorter = _a.dropSorter;
+        if (!requestingSorter) {
+            throw new Error('Could not find requestingSorter');
+        }
+        // If same container and same index, do nothing:
+        if (requestingSorter === _a.activeSorter && _a.activeIndex === newIndex)
+            return;
+        await requestingSorter.moveItemInModel(newIndex, _a.activeSorter);
+    }
     /** Management methods: */
     getItemOfElement(element) {
         if (!element) {
             throw new Error('Element was not defined');
         }
-        const elementUnique = __classPrivateFieldGet(this, _UmbSorterController_config, "f").getUniqueOfElement(element);
+        const elementUnique = this.#config.getUniqueOfElement(element);
         if (elementUnique === undefined) {
             console.error('Could not find unique of element', element);
             return undefined;
         }
-        return __classPrivateFieldGet(this, _UmbSorterController_model, "f").find((entry) => elementUnique === __classPrivateFieldGet(this, _UmbSorterController_config, "f").getUniqueOfModel(entry));
+        return this.#model.find((entry) => elementUnique === this.#config.getUniqueOfModel(entry));
     }
     async removeItem(item) {
         if (!item) {
             return false;
         }
-        if (__classPrivateFieldGet(this, _UmbSorterController_config, "f").performItemRemove) {
-            return (await __classPrivateFieldGet(this, _UmbSorterController_config, "f").performItemRemove({ item })) ?? false;
+        if (this.#config.performItemRemove) {
+            return (await this.#config.performItemRemove({ item })) ?? false;
         }
         else {
-            const oldIndex = __classPrivateFieldGet(this, _UmbSorterController_model, "f").indexOf(item);
+            const oldIndex = this.#model.indexOf(item);
             if (oldIndex !== -1) {
-                const newModel = [...__classPrivateFieldGet(this, _UmbSorterController_model, "f")];
+                const newModel = [...this.#model];
                 newModel.splice(oldIndex, 1);
-                __classPrivateFieldSet(this, _UmbSorterController_model, newModel, "f");
-                __classPrivateFieldGet(this, _UmbSorterController_config, "f").onChange?.({ model: newModel, item });
+                this.#model = newModel;
+                this.#config.onChange?.({ model: newModel, item });
                 return true;
             }
         }
@@ -512,7 +590,7 @@ export class UmbSorterController extends UmbControllerBase {
     }
     */
     hasOtherItemsThan(item) {
-        return __classPrivateFieldGet(this, _UmbSorterController_model, "f").filter((x) => x !== item).length > 0;
+        return this.#model.filter((x) => x !== item).length > 0;
     }
     // TODO: Could get item via attr.
     async moveItemInModel(newIndex, fromCtrl) {
@@ -528,26 +606,26 @@ export class UmbSorterController extends UmbControllerBase {
         if (localMove) {
             // Local move:
             // TODO: Maybe this should be replaceable/configurable:
-            const oldIndex = __classPrivateFieldGet(this, _UmbSorterController_model, "f").indexOf(item);
+            const oldIndex = this.#model.indexOf(item);
             if (oldIndex === -1) {
                 console.error('Could not find item in model');
                 return false;
             }
-            if (__classPrivateFieldGet(this, _UmbSorterController_config, "f").performItemMove) {
-                const result = await __classPrivateFieldGet(this, _UmbSorterController_config, "f").performItemMove({ item, newIndex, oldIndex });
+            if (this.#config.performItemMove) {
+                const result = await this.#config.performItemMove({ item, newIndex, oldIndex });
                 if (result === false) {
                     return false;
                 }
             }
             else {
-                const newModel = [...__classPrivateFieldGet(this, _UmbSorterController_model, "f")];
+                const newModel = [...this.#model];
                 newModel.splice(oldIndex, 1);
                 if (oldIndex <= newIndex) {
                     newIndex--;
                 }
                 newModel.splice(newIndex, 0, item);
-                __classPrivateFieldSet(this, _UmbSorterController_model, newModel, "f");
-                __classPrivateFieldGet(this, _UmbSorterController_config, "f").onChange?.({ model: newModel, item });
+                this.#model = newModel;
+                this.#config.onChange?.({ model: newModel, item });
             }
             _a.activeIndex = newIndex;
         }
@@ -557,22 +635,22 @@ export class UmbSorterController extends UmbControllerBase {
                 console.error('Sync could not remove item');
                 return false;
             }
-            if (__classPrivateFieldGet(this, _UmbSorterController_config, "f").performItemInsert) {
-                const result = await __classPrivateFieldGet(this, _UmbSorterController_config, "f").performItemInsert({ item, newIndex });
+            if (this.#config.performItemInsert) {
+                const result = await this.#config.performItemInsert({ item, newIndex });
                 if (result === false) {
                     return false;
                 }
             }
             else {
-                const newModel = [...__classPrivateFieldGet(this, _UmbSorterController_model, "f")];
+                const newModel = [...this.#model];
                 newModel.splice(newIndex, 0, item);
-                __classPrivateFieldSet(this, _UmbSorterController_model, newModel, "f");
-                __classPrivateFieldGet(this, _UmbSorterController_config, "f").onContainerChange?.({
+                this.#model = newModel;
+                this.#config.onContainerChange?.({
                     model: newModel,
                     item,
                     from: fromCtrl,
                 });
-                __classPrivateFieldGet(this, _UmbSorterController_config, "f").onChange?.({ model: newModel, item });
+                this.#config.onChange?.({ model: newModel, item });
             }
             // If everything went well, we can set new activeSorter to this:
             _a.activeSorter = this;
@@ -600,14 +678,17 @@ export class UmbSorterController extends UmbControllerBase {
         }
         _a.lastIndicationSorter = undefined;
     }
+    // TODO: Move auto scroll into its own class?
+    #autoScrollRAF;
+    #autoScrollEl;
     handleAutoScroll(clientX, clientY) {
         let scrollRect = null;
-        if (__classPrivateFieldGet(this, _UmbSorterController_scrollElement, "f")) {
-            __classPrivateFieldSet(this, _UmbSorterController_autoScrollEl, __classPrivateFieldGet(this, _UmbSorterController_scrollElement, "f"), "f");
-            scrollRect = __classPrivateFieldGet(this, _UmbSorterController_autoScrollEl, "f").getBoundingClientRect();
+        if (this.#scrollElement) {
+            this.#autoScrollEl = this.#scrollElement;
+            scrollRect = this.#autoScrollEl.getBoundingClientRect();
         }
         else {
-            __classPrivateFieldSet(this, _UmbSorterController_autoScrollEl, document.scrollingElement || document.documentElement, "f");
+            this.#autoScrollEl = document.scrollingElement || document.documentElement;
             scrollRect = {
                 top: 0,
                 left: 0,
@@ -617,13 +698,13 @@ export class UmbSorterController extends UmbControllerBase {
                 width: window.innerWidth,
             };
         }
-        const scrollWidth = __classPrivateFieldGet(this, _UmbSorterController_autoScrollEl, "f").scrollWidth;
-        const scrollHeight = __classPrivateFieldGet(this, _UmbSorterController_autoScrollEl, "f").scrollHeight;
+        const scrollWidth = this.#autoScrollEl.scrollWidth;
+        const scrollHeight = this.#autoScrollEl.scrollHeight;
         const canScrollX = scrollRect.width < scrollWidth;
         const canScrollY = scrollRect.height < scrollHeight;
-        const scrollPosX = __classPrivateFieldGet(this, _UmbSorterController_autoScrollEl, "f").scrollLeft;
-        const scrollPosY = __classPrivateFieldGet(this, _UmbSorterController_autoScrollEl, "f").scrollTop;
-        cancelAnimationFrame(__classPrivateFieldGet(this, _UmbSorterController_autoScrollRAF, "f"));
+        const scrollPosX = this.#autoScrollEl.scrollLeft;
+        const scrollPosY = this.#autoScrollEl.scrollTop;
+        cancelAnimationFrame(this.#autoScrollRAF);
         if (canScrollX || canScrollY) {
             this.autoScrollX =
                 Math.abs(scrollRect.right - clientX) <= autoScrollSensitivity && scrollPosX + scrollRect.width < scrollWidth
@@ -637,28 +718,33 @@ export class UmbSorterController extends UmbControllerBase {
                     : Math.abs(scrollRect.top - clientY) <= autoScrollSensitivity && !!scrollPosY
                         ? -1
                         : 0;
-            __classPrivateFieldSet(this, _UmbSorterController_autoScrollRAF, requestAnimationFrame(__classPrivateFieldGet(this, _UmbSorterController_performAutoScroll, "f")), "f");
+            this.#autoScrollRAF = requestAnimationFrame(this.#performAutoScroll);
         }
     }
+    #performAutoScroll;
+    #stopAutoScroll() {
+        cancelAnimationFrame(this.#autoScrollRAF);
+        this.#autoScrollRAF = null;
+    }
     notifyDisallowed() {
-        if (__classPrivateFieldGet(this, _UmbSorterController_config, "f").onDisallowed) {
-            __classPrivateFieldGet(this, _UmbSorterController_config, "f").onDisallowed({
+        if (this.#config.onDisallowed) {
+            this.#config.onDisallowed({
                 item: _a.activeItem,
                 element: _a.activeElement,
             });
         }
     }
     notifyAllowed() {
-        if (__classPrivateFieldGet(this, _UmbSorterController_config, "f").onAllowed) {
-            __classPrivateFieldGet(this, _UmbSorterController_config, "f").onAllowed({
+        if (this.#config.onAllowed) {
+            this.#config.onAllowed({
                 item: _a.activeItem,
                 element: _a.activeElement,
             });
         }
     }
     notifyRequestDrop(data) {
-        if (__classPrivateFieldGet(this, _UmbSorterController_config, "f").onRequestMove) {
-            return __classPrivateFieldGet(this, _UmbSorterController_config, "f").onRequestMove(data) || false;
+        if (this.#config.onRequestMove) {
+            return this.#config.onRequestMove(data) || false;
         }
         return true;
     }
@@ -666,92 +752,13 @@ export class UmbSorterController extends UmbControllerBase {
         super.destroy();
         // Do something when host element is destroyed.
         if (_a.activeElement) {
-            __classPrivateFieldGet(this, _UmbSorterController_handleDragEnd, "f").call(this);
+            this.#handleDragEnd();
         }
         _a.lastIndicationSorter = undefined;
         // TODO: Clean up items??
-        __classPrivateFieldGet(this, _UmbSorterController_observer, "f").disconnect();
+        this.#observer.disconnect();
         // For auto scroller:
-        __classPrivateFieldSet(this, _UmbSorterController_scrollElement, null, "f");
+        this.#scrollElement = null;
     }
 }
-_a = UmbSorterController, _UmbSorterController_host = new WeakMap(), _UmbSorterController_isConnected = new WeakMap(), _UmbSorterController_config = new WeakMap(), _UmbSorterController_observer = new WeakMap(), _UmbSorterController_model = new WeakMap(), _UmbSorterController_rqaId = new WeakMap(), _UmbSorterController_containerElement = new WeakMap(), _UmbSorterController_useContainerShadowRoot = new WeakMap(), _UmbSorterController_scrollElement = new WeakMap(), _UmbSorterController_enabled = new WeakMap(), _UmbSorterController_dragX = new WeakMap(), _UmbSorterController_dragY = new WeakMap(), _UmbSorterController_initialize = new WeakMap(), _UmbSorterController_handleDragStart = new WeakMap(), _UmbSorterController_handleDragEnd = new WeakMap(), _UmbSorterController_updateDragMove = new WeakMap(), _UmbSorterController_autoScrollRAF = new WeakMap(), _UmbSorterController_autoScrollEl = new WeakMap(), _UmbSorterController_performAutoScroll = new WeakMap(), _UmbSorterController_instances = new WeakSet(), _UmbSorterController_uninitialize = function _UmbSorterController_uninitialize() {
-    // TODO: Is there more clean up to do??
-    __classPrivateFieldGet(this, _UmbSorterController_observer, "f").disconnect();
-    if (__classPrivateFieldGet(this, _UmbSorterController_containerElement, "f")) {
-        // Only look at the shadowRoot if the containerElement is host.
-        const containerElement = __classPrivateFieldGet(this, _UmbSorterController_useContainerShadowRoot, "f")
-            ? __classPrivateFieldGet(this, _UmbSorterController_containerElement, "f").shadowRoot ?? __classPrivateFieldGet(this, _UmbSorterController_containerElement, "f")
-            : __classPrivateFieldGet(this, _UmbSorterController_containerElement, "f");
-        containerElement.removeEventListener('dragover', this._itemDraggedOver);
-        __classPrivateFieldSet(this, _UmbSorterController_containerElement, undefined, "f");
-    }
-}, _UmbSorterController_setupPlaceholderStyle = function _UmbSorterController_setupPlaceholderStyle() {
-    if (__classPrivateFieldGet(this, _UmbSorterController_config, "f").placeholderClass) {
-        _a.activeElement?.classList.add(__classPrivateFieldGet(this, _UmbSorterController_config, "f").placeholderClass);
-    }
-    if (__classPrivateFieldGet(this, _UmbSorterController_config, "f").placeholderAttr) {
-        _a.activeElement?.setAttribute(__classPrivateFieldGet(this, _UmbSorterController_config, "f").placeholderAttr, '');
-    }
-}, _UmbSorterController_removePlaceholderStyle = function _UmbSorterController_removePlaceholderStyle() {
-    if (__classPrivateFieldGet(this, _UmbSorterController_config, "f").placeholderClass) {
-        _a.activeElement?.classList.remove(__classPrivateFieldGet(this, _UmbSorterController_config, "f").placeholderClass);
-    }
-    if (__classPrivateFieldGet(this, _UmbSorterController_config, "f").placeholderAttr) {
-        _a.activeElement?.removeAttribute(__classPrivateFieldGet(this, _UmbSorterController_config, "f").placeholderAttr);
-    }
-}, _UmbSorterController_setCurrentElement = function _UmbSorterController_setCurrentElement(element) {
-    _a.activeElement = element;
-    _a.activeDragElement = __classPrivateFieldGet(this, _UmbSorterController_config, "f").draggableSelector
-        ? element.querySelector(__classPrivateFieldGet(this, _UmbSorterController_config, "f").draggableSelector) ?? undefined
-        : element;
-    if (!_a.activeDragElement) {
-        throw new Error('Could not find drag element, query was made with the `draggableSelector` of "' +
-            __classPrivateFieldGet(this, _UmbSorterController_config, "f").draggableSelector +
-            '"');
-        return;
-    }
-    __classPrivateFieldGet(this, _UmbSorterController_instances, "m", _UmbSorterController_setupPlaceholderStyle).call(this);
-}, _UmbSorterController_handleDragMove = function _UmbSorterController_handleDragMove(event) {
-    if (!_a.activeElement) {
-        return;
-    }
-    const clientX = event.touches
-        ? event.touches[0].clientX
-        : event.clientX;
-    const clientY = event.touches
-        ? event.touches[0].clientY
-        : event.clientY;
-    if (clientX !== 0 && clientY !== 0) {
-        if (__classPrivateFieldGet(this, _UmbSorterController_dragX, "f") === clientX && __classPrivateFieldGet(this, _UmbSorterController_dragY, "f") === clientY) {
-            return;
-        }
-        __classPrivateFieldSet(this, _UmbSorterController_dragX, clientX, "f");
-        __classPrivateFieldSet(this, _UmbSorterController_dragY, clientY, "f");
-        this.handleAutoScroll(__classPrivateFieldGet(this, _UmbSorterController_dragX, "f"), __classPrivateFieldGet(this, _UmbSorterController_dragY, "f"));
-        const activeDragRect = _a.activeDragElement.getBoundingClientRect();
-        const insideCurrentRect = isWithinRect(__classPrivateFieldGet(this, _UmbSorterController_dragX, "f"), __classPrivateFieldGet(this, _UmbSorterController_dragY, "f"), activeDragRect);
-        if (!insideCurrentRect) {
-            if (__classPrivateFieldGet(this, _UmbSorterController_rqaId, "f") === undefined) {
-                __classPrivateFieldSet(this, _UmbSorterController_rqaId, requestAnimationFrame(__classPrivateFieldGet(this, _UmbSorterController_updateDragMove, "f")), "f");
-            }
-        }
-    }
-}, _UmbSorterController_moveElementTo = 
-//
-async function _UmbSorterController_moveElementTo(newIndex) {
-    if (!_a.activeElement || !_a.activeSorter) {
-        return;
-    }
-    const requestingSorter = _a.dropSorter;
-    if (!requestingSorter) {
-        throw new Error('Could not find requestingSorter');
-    }
-    // If same container and same index, do nothing:
-    if (requestingSorter === _a.activeSorter && _a.activeIndex === newIndex)
-        return;
-    await requestingSorter.moveItemInModel(newIndex, _a.activeSorter);
-}, _UmbSorterController_stopAutoScroll = function _UmbSorterController_stopAutoScroll() {
-    cancelAnimationFrame(__classPrivateFieldGet(this, _UmbSorterController_autoScrollRAF, "f"));
-    __classPrivateFieldSet(this, _UmbSorterController_autoScrollRAF, null, "f");
-};
+_a = UmbSorterController;