ngx-kit 6.3.0 → 7.0.0

package/fesm2022/ngx-kit-drag-resize.mjs

@@ -0,0 +1,1664 @@
+import * as i0 from '@angular/core';
+import { signal, EventEmitter, Injectable, InjectionToken, Directive, inject, Output, Input, HostListener } from '@angular/core';
+import { DOCUMENT } from '@angular/common';
+
+/**
+ * Boundary clamping utilities.
+ * All functions work purely in viewport ("client") coordinates so they can be
+ * reused identically for translate-based dragging and left/top-based resizing.
+ */
+const TOLERANCE = 0.5;
+/** Clamps a proposed vertical delta so the element's rect stays inside the boundary rect. */
+function checkBoundY(selfRect, boundaryRect, offsetY) {
+    if (!boundaryRect)
+        return offsetY;
+    const newTop = selfRect.top + offsetY;
+    const newBottom = selfRect.bottom + offsetY;
+    if (newTop < boundaryRect.top + TOLERANCE)
+        return offsetY + (boundaryRect.top - newTop);
+    if (newBottom > boundaryRect.bottom - TOLERANCE)
+        return offsetY - (newBottom - boundaryRect.bottom);
+    return offsetY;
+}
+/** Clamps a proposed horizontal delta so the element's rect stays inside the boundary rect. */
+function checkBoundX(selfRect, boundaryRect, offsetX) {
+    if (!boundaryRect)
+        return offsetX;
+    const newLeft = selfRect.left + offsetX;
+    const newRight = selfRect.right + offsetX;
+    if (newLeft < boundaryRect.left + TOLERANCE)
+        return offsetX + (boundaryRect.left - newLeft);
+    if (newRight > boundaryRect.right - TOLERANCE)
+        return offsetX - (newRight - boundaryRect.right);
+    return offsetX;
+}
+/**
+ * Clamps a resize result (width/height/left/top, all relative CSS px deltas from the
+ * element's start position) so the element never grows/moves outside `boundaryRect`.
+ * `startRect` is the element's `getBoundingClientRect()` captured at resize-start.
+ */
+function clampResizeWithinBoundary(boundaryRect, startRect, width, height, left, top) {
+    if (!boundaryRect)
+        return { width, height, left, top };
+    // Viewport position implied by the proposed left/top deltas.
+    const viewportLeft = startRect.left + left;
+    const viewportTop = startRect.top + top;
+    let clampedWidth = width;
+    let clampedHeight = height;
+    let clampedLeft = left;
+    let clampedTop = top;
+    if (viewportLeft < boundaryRect.left) {
+        const overflow = boundaryRect.left - viewportLeft;
+        clampedLeft = left + overflow;
+        clampedWidth = Math.max(0, clampedWidth - overflow);
+    }
+    if (viewportTop < boundaryRect.top) {
+        const overflow = boundaryRect.top - viewportTop;
+        clampedTop = top + overflow;
+        clampedHeight = Math.max(0, clampedHeight - overflow);
+    }
+    const clampedViewportLeft = startRect.left + clampedLeft;
+    const rightEdge = clampedViewportLeft + clampedWidth;
+    if (rightEdge > boundaryRect.right) {
+        clampedWidth = Math.max(0, boundaryRect.right - clampedViewportLeft);
+    }
+    const clampedViewportTop = startRect.top + clampedTop;
+    const bottomEdge = clampedViewportTop + clampedHeight;
+    if (bottomEdge > boundaryRect.bottom) {
+        clampedHeight = Math.max(0, boundaryRect.bottom - clampedViewportTop);
+    }
+    return { width: clampedWidth, height: clampedHeight, left: clampedLeft, top: clampedTop };
+}
+/** Current page zoom level (1 = 100%). Falls back to devicePixelRatio pre visualViewport. */
+function getPageZoom() {
+    return window.visualViewport?.scale ?? window.devicePixelRatio ?? 1;
+}
+/** Adjusts a raw pointer-derived value for the current page zoom level. */
+function adjustForZoom(value) {
+    const zoom = getPageZoom();
+    return zoom ? value / zoom : value;
+}
+
+function cloneDragElementInBody(dragEl, rect, pointerX, pointerY) {
+    const preview = dragEl.cloneNode(true);
+    // Avoid duplicated ids in the document.
+    preview.removeAttribute('id');
+    preview.classList.add('ngx-drag-preview');
+    Object.assign(preview.style, {
+        position: 'fixed',
+        top: `${rect.top}px`,
+        left: `${rect.left}px`,
+        width: `${rect.width}px`,
+        height: `${rect.height}px`,
+        margin: '0',
+        pointerEvents: 'none',
+        boxSizing: 'border-box',
+    });
+    document.body.appendChild(preview);
+    return {
+        element: preview,
+        offsetX: pointerX - rect.left,
+        offsetY: pointerY - rect.top,
+    };
+}
+
+let zIndexCounter = 1000;
+class DragRef {
+    data;
+    el;
+    boundary;
+    lockAxis;
+    dropList = null;
+    dropListGroup;
+    placeholder;
+    originDropList = null;
+    originIndex = -1;
+    isDragging = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isDragging" }] : /* istanbul ignore next */ []));
+    position = signal({ x: 0, y: 0 }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []));
+    startPointer = { x: 0, y: 0 };
+    startRect;
+    lastPointer = { x: 0, y: 0 };
+    previousTransform = '';
+    previousZIndex = '';
+    moveDx = 0;
+    moveDy = 0;
+    preview;
+    previewOffsetX = 0;
+    previewOffsetY = 0;
+    sourceVisibility = '';
+    sourceDisplay = '';
+    sourcePointerEvents = '';
+    init() {
+        this.previousTransform = getComputedStyle(this.el).getPropertyValue('transform');
+    }
+    withDropList(list) {
+        if (this.dropList === list)
+            return this;
+        this.dropList?.removeItem(this);
+        this.dropList = list;
+        list?.addItem(this);
+        return this;
+    }
+    clearDropList() {
+        this.dropList?.removeItem(this);
+        this.dropList = null;
+    }
+    pointerDown(pointer) {
+        this.startPointer = { ...pointer };
+        this.lastPointer = { ...pointer };
+    }
+    startDrag(pointer) {
+        this.startRect = this.el.getBoundingClientRect();
+        this.startPointer = { ...pointer };
+        this.lastPointer = { ...pointer };
+        this.moveDx = 0;
+        this.moveDy = 0;
+        this.originDropList = this.dropList;
+        this.originIndex = this.dropList?.getItemIndex(this) ?? -1;
+        this.previousTransform = getComputedStyle(this.el).getPropertyValue('transform');
+        this.isDragging.set(true);
+        this.previousZIndex = this.el.style.zIndex;
+        this.sourceVisibility = this.el.style.visibility;
+        this.sourceDisplay = this.el.style.display;
+        this.sourcePointerEvents = this.el.style.pointerEvents;
+        this.el.classList.add('ngx-draggable--dragging');
+        this.el.style.willChange = 'transform';
+        this.el.style.transition = 'none';
+        this.el.style.zIndex = String(++zIndexCounter);
+        /*
+         * IMPORTANT:
+         *
+         * Normal Drag:
+         *   absolutely nothing changes in the element's rendering mechanism.
+         *
+         * DropList Drag:
+         *   create a body-level preview because the original element can be
+         *   inside an overflow:auto/hidden container such as a Kanban column.
+         */
+        if (this.dropList) {
+            this.placeholder = this.dropList.createPlaceholder(this);
+            const preview = cloneDragElementInBody(this.el, this.startRect, pointer.x, pointer.y);
+            this.preview = preview.element;
+            this.previewOffsetX = preview.offsetX;
+            this.previewOffsetY = preview.offsetY;
+            this.el.style.visibility = 'hidden';
+            this.el.style.display = 'none';
+            this.el.style.pointerEvents = 'none';
+            this.updatePreview();
+        }
+        else {
+            // KEEP THE ORIGINAL DRAG BEHAVIOR.
+            this.applyTransform();
+        }
+    }
+    dragMove(pointer) {
+        if (!this.isDragging())
+            return;
+        this.lastPointer = { ...pointer };
+        let dx = pointer.x - this.startPointer.x;
+        let dy = pointer.y - this.startPointer.y;
+        if (this.boundary) {
+            dx = checkBoundX(this.startRect, this.boundary.getBoundingClientRect(), dx);
+            dy = checkBoundY(this.startRect, this.boundary.getBoundingClientRect(), dy);
+        }
+        if (this.lockAxis === 'x')
+            dy = 0;
+        if (this.lockAxis === 'y')
+            dx = 0;
+        this.moveDx = dx;
+        this.moveDy = dy;
+        this.position.set({
+            x: dx,
+            y: dy,
+        });
+        if (this.dropList) {
+            this.updatePreview();
+        }
+        else {
+            this.applyTransform();
+        }
+    }
+    nudge(dx, dy) {
+        if (!this.isDragging())
+            this.startDrag(this.lastPointer);
+        this.dragMove({
+            x: this.startPointer.x + this.moveDx + dx,
+            y: this.startPointer.y + this.moveDy + dy,
+        });
+    }
+    endDrag() {
+        if (!this.isDragging())
+            return;
+        const dropList = this.dropList;
+        this.isDragging.set(false);
+        // Normal Drag MUST behave exactly like before.
+        this.placeholder?.detach();
+        this.placeholder = undefined;
+        if (dropList) {
+            dropList.finishDrag(this);
+            this.el.style.transform = this.previousTransform;
+        }
+        // Remove body preview after DropList has finished reading its state.
+        this.preview?.remove();
+        this.preview = undefined;
+        this.el.classList.remove('ngx-draggable--dragging');
+        this.el.style.visibility = this.sourceVisibility;
+        this.el.style.display = this.sourceDisplay;
+        this.el.style.pointerEvents = this.sourcePointerEvents;
+        this.el.style.willChange = '';
+        this.el.style.zIndex = this.previousZIndex;
+    }
+    cancelDrag() {
+        if (!this.isDragging())
+            return;
+        this.moveDx = 0;
+        this.moveDy = 0;
+        this.position.set({ x: 0, y: 0 });
+        this.dropList?.exit(this);
+        this.clearDropList();
+        this.el.style.transform = this.previousTransform;
+        this.el.style.visibility = this.sourceVisibility;
+        this.el.style.pointerEvents = this.sourcePointerEvents;
+        this.endDrag();
+    }
+    get x() {
+        return this.moveDx;
+    }
+    get y() {
+        return this.moveDy;
+    }
+    get pointer() {
+        return this.lastPointer;
+    }
+    get start() {
+        return this.startRect;
+    }
+    getPlaceholderElement() {
+        return this.placeholder?.element;
+    }
+    applyTransform() {
+        const base = this.previousTransform && this.previousTransform !== 'none'
+            ? this.previousTransform + ' '
+            : '';
+        this.el.style.transform = `${base}translate3d(${this.moveDx}px, ${this.moveDy}px, 0)`;
+    }
+    updatePreview() {
+        if (!this.preview)
+            return;
+        this.preview.style.transform = `translate3d(${this.moveDx}px, ${this.moveDy}px, 0)`;
+    }
+}
+
+/** Base (LTR) physical direction for every logical direction. */
+const LTR_BASE = {
+    start: 'w',
+    end: 'e',
+    'n-start': 'nw',
+    'n-end': 'ne',
+    's-start': 'sw',
+    's-end': 'se',
+};
+/** Mirrors the horizontal component of a physical direction. 'n' / 's' pass through unchanged. */
+const MIRROR = {
+    n: 'n',
+    s: 's',
+    e: 'w',
+    w: 'e',
+    ne: 'nw',
+    nw: 'ne',
+    se: 'sw',
+    sw: 'se',
+};
+function isLogicalDirection(dir) {
+    return Object.prototype.hasOwnProperty.call(LTR_BASE, dir);
+}
+/**
+ * True when `element` sits inside a right-to-left context.
+ *
+ * Reads the *computed* `direction` style instead of `element.dir`, because
+ * `direction` is inherited and is almost never set on the resizable element
+ * itself - it's usually set on `<html>`, `<body>`, or some ancestor wrapper.
+ */
+function isRtl(element) {
+    if (typeof window === 'undefined') {
+        return false;
+    }
+    return window.getComputedStyle(element).direction === 'rtl';
+}
+/**
+ * Resolves a logical direction ('start' | 'end' | 'n-start' | 'n-end' | 's-start' | 's-end')
+ * to a physical, viewport-space direction ('n' | 'e' | 's' | 'w' | 'ne' | 'nw' | 'se' | 'sw')
+ * based on `rtl`.
+ *
+ * Physical directions pass through untouched, so it's always safe to call this
+ * even when `dir` might already be physical (e.g. resolving a direction that was
+ * already resolved once before).
+ */
+function resolveLogicalDirection(dir, rtl) {
+    if (!isLogicalDirection(dir)) {
+        return dir;
+    }
+    const base = LTR_BASE[dir];
+    return rtl ? MIRROR[base] : base;
+}
+
+/**
+ * Live geometry sorting.
+ *
+ * Unlike the old snapshot-only implementation, every sort pass reads the
+ * current DOM order and current client rects. This matters when:
+ *  - the placeholder changes layout,
+ *  - a Kanban column is scrolled while dragging,
+ *  - the dragged item enters another list,
+ *  - CSS grid/flex reflows occur.
+ */
+class PositionalSortStrategy {
+    container;
+    dragging = null;
+    index = -1;
+    flow = 'free';
+    rtl = false;
+    withElementContainer(el) {
+        this.container = el;
+        return this;
+    }
+    start(_items) {
+        this.flow = detectFlow(this.container);
+        this.rtl = isRtl(this.container);
+        this.index = -1;
+    }
+    enter(drag, x, y) {
+        this.dragging = drag;
+        this.index = this.findInsertionIndex(drag, x, y);
+        this.movePlaceholder(drag, this.index);
+    }
+    sort(drag, x, y) {
+        this.dragging = drag;
+        const next = this.findInsertionIndex(drag, x, y);
+        const previous = this.getCurrentIndex();
+        if (next === previous)
+            return null;
+        this.movePlaceholder(drag, next);
+        return {
+            previousIndex: previous,
+            currentIndex: next,
+        };
+    }
+    getCurrentIndex() {
+        if (!this.container)
+            return Math.max(0, this.index);
+        const placeholder = this.dragging?.getPlaceholderElement();
+        if (placeholder?.parentElement === this.container) {
+            const refs = new Set(this.container.__ngxDragItems ?? []);
+            let position = 0;
+            const itemElements = new Set(Array.from(refs, (item) => item.el));
+            for (const node of Array.from(this.container.children)) {
+                if (node === placeholder)
+                    return position;
+                if (node instanceof HTMLElement &&
+                    itemElements.has(node) &&
+                    node !== this.dragging?.el) {
+                    position++;
+                }
+            }
+        }
+        return Math.max(0, this.index);
+    }
+    getItemIndex(item) {
+        let index = 0;
+        const refs = new Set(this.container.__ngxDragItems ?? []);
+        const itemElements = new Set(Array.from(refs, (ref) => ref.el));
+        for (const node of Array.from(this.container.children)) {
+            if (node === item.el)
+                return index;
+            if (node instanceof HTMLElement &&
+                !node.classList.contains('ngx-drag-placeholder') &&
+                !node.classList.contains('ngx-drag-in-body') &&
+                (!refs.size || itemElements.has(node))) {
+                index++;
+            }
+        }
+        return -1;
+    }
+    reset() {
+        this.dragging = null;
+        this.index = -1;
+    }
+    movePlaceholder(drag, index) {
+        const ph = drag.getPlaceholderElement();
+        if (!ph || !this.container)
+            return;
+        const items = this.readItems(drag);
+        const reference = items[index]?.drag.el ?? null;
+        if (reference) {
+            if (ph !== reference.previousSibling) {
+                this.container.insertBefore(ph, reference);
+            }
+        }
+        else if (ph.parentElement !== this.container || ph !== this.container.lastElementChild) {
+            this.container.appendChild(ph);
+        }
+        this.index = Math.max(0, Math.min(index, items.length));
+    }
+    findInsertionIndex(drag, x, y) {
+        const items = this.readItems(drag);
+        if (!items.length)
+            return 0;
+        switch (this.flow) {
+            case 'flex-row':
+                return this.findFlexRow(items, x);
+            case 'flex-column':
+                return this.findFlexColumn(items, y);
+            case 'grid':
+            case 'free':
+            default:
+                return this.findGrid(items, x, y);
+        }
+    }
+    readItems(drag) {
+        const itemSet = new Set(
+        // DropListRef maintains the authoritative set; DOM order is authoritative
+        // for placement, so we only inspect direct children here.
+        this.container.__ngxDragItems ?? []);
+        const byElement = new Map(Array.from(itemSet, (item) => [item.el, item]));
+        const result = [];
+        Array.from(this.container.children).forEach((element, domIndex) => {
+            if (!(element instanceof HTMLElement) ||
+                element === drag.el ||
+                element.classList.contains('ngx-drag-placeholder') ||
+                element.classList.contains('ngx-drag-in-body')) {
+                return;
+            }
+            const ref = byElement.get(element);
+            if (!ref)
+                return;
+            result.push({
+                drag: ref,
+                rect: element.getBoundingClientRect(),
+                domIndex,
+            });
+        });
+        // Fallback for environments where the private bridge is not available.
+        if (!result.length) {
+            return [];
+        }
+        return result;
+    }
+    findFlexRow(items, x) {
+        for (let i = 0; i < items.length; i++) {
+            const r = items[i].rect;
+            const mid = r.left + r.width / 2;
+            const before = this.rtl ? x > mid : x < mid;
+            if (before)
+                return i;
+        }
+        return items.length;
+    }
+    findFlexColumn(items, y) {
+        for (let i = 0; i < items.length; i++) {
+            const r = items[i].rect;
+            if (y < r.top + r.height / 2)
+                return i;
+        }
+        return items.length;
+    }
+    findGrid(items, x, y) {
+        let best = items[0];
+        let bestScore = Number.POSITIVE_INFINITY;
+        for (const item of items) {
+            const cx = item.rect.left + item.rect.width / 2;
+            const cy = item.rect.top + item.rect.height / 2;
+            const dx = Math.abs(x - cx) / Math.max(item.rect.width, 1);
+            const dy = Math.abs(y - cy) / Math.max(item.rect.height, 1);
+            const score = dx + dy * 1.2;
+            if (score < bestScore) {
+                bestScore = score;
+                best = item;
+            }
+        }
+        const target = best.rect;
+        const sameRow = y >= target.top - target.height * 0.35 &&
+            y <= target.bottom + target.height * 0.35;
+        const before = sameRow
+            ? this.rtl
+                ? x > target.left + target.width / 2
+                : x < target.left + target.width / 2
+            : y < target.top + target.height / 2;
+        return Math.max(0, Math.min(items.length, items.findIndex((x) => x === best) + (before ? 0 : 1)));
+    }
+}
+function detectFlow(el) {
+    const s = getComputedStyle(el);
+    if (s.display.includes('grid'))
+        return 'grid';
+    if (s.display.includes('flex')) {
+        if (s.flexWrap !== 'nowrap')
+            return 'grid';
+        return s.flexDirection.startsWith('column') ? 'flex-column' : 'flex-row';
+    }
+    return 'free';
+}
+
+class PlaceHolderRef {
+    tpl;
+    dropList;
+    element;
+    _visible = false;
+    attach(container, source, reference) {
+        if (!this.element) {
+            // Keep the same tag/attributes as the dragged item so selectors such as
+            // ".list > article" and grid/flex item rules continue to apply.
+            this.element = source.cloneNode(false);
+            this.element.removeAttribute('id');
+            this.element.classList.add('ngx-drag-placeholder');
+            this.element.setAttribute('aria-hidden', 'true');
+            this.element.setAttribute('inert', '');
+            this.element.removeAttribute('tabindex');
+        }
+        // The placeholder must never inherit a live drag transform/animation.
+        this.element.style.setProperty('transform', 'none', 'important');
+        this.element.style.setProperty('transition', 'none', 'important');
+        this.element.style.setProperty('animation', 'none', 'important');
+        this.element.style.setProperty('pointer-events', 'none', 'important');
+        this.element.style.setProperty('visibility', 'visible', 'important');
+        this.element.style.setProperty('opacity', '0.16', 'important');
+        this.element.style.setProperty('outline', '2px dashed currentColor', 'important');
+        this.element.style.setProperty('outline-offset', '-2px', 'important');
+        this._visible = true;
+        if (reference && reference.parentNode === container) {
+            if (this.element !== reference)
+                container.insertBefore(this.element, reference);
+        }
+        else if (this.element.parentNode !== container) {
+            container.appendChild(this.element);
+        }
+        return this.element;
+    }
+    detach() {
+        this.element?.remove();
+        this._visible = false;
+    }
+    get visible() {
+        return this._visible && !!this.element?.isConnected;
+    }
+}
+
+/**
+ * DropListRef is intentionally generic, while the positional sorting strategy
+ * works on DragRef<any>. The public DropList/DragRef relationship is invariant
+ * because IDropEvent<T> contains T in a callback position. Keep the strongly
+ * typed Set here, and narrow only at the DOM-local bridge / strategy boundary.
+ */
+class DropListRef {
+    data;
+    el;
+    disableSort = false;
+    connectedTo = [];
+    dropListGroup;
+    _draggables = new Set();
+    onDrop = new EventEmitter();
+    strategy = new PositionalSortStrategy();
+    active = false;
+    previousIndex = -1;
+    placeholder;
+    addItem(item) {
+        this._draggables.add(item);
+        this.publishDragItems();
+    }
+    removeItem(item) {
+        this._draggables.delete(item);
+        this.publishDragItems();
+    }
+    isConnectedTo(other) {
+        if (other === this)
+            return true;
+        if (this.connectedTo.includes(other.el) || other.connectedTo.includes(this.el))
+            return true;
+        return !!this.dropListGroup && this.dropListGroup.has(other);
+    }
+    createPlaceholder(drag) {
+        // There is exactly one placeholder for the active drag.
+        this.placeholder?.detach();
+        const ref = new PlaceHolderRef();
+        ref.dropList = this;
+        const source = drag.el;
+        const rect = source.getBoundingClientRect();
+        ref.attach(this.el, source);
+        this.copyPlaceholderGeometry(source, ref.element, rect);
+        this.placeholder = ref;
+        drag.placeholder = ref;
+        this.enter(drag, drag.pointer.x, drag.pointer.y);
+        return ref;
+    }
+    enter(drag, x = 0, y = 0) {
+        if (!this.active) {
+            this.active = true;
+            this.previousIndex = this.indexOf(drag);
+            // Sorting strategy reads the live DOM. Expose the authoritative refs
+            // through a DOM-local bridge with the intentionally wider any type.
+            this.publishDragItems();
+            this.strategy.withElementContainer(this.el).start(this.getStrategyItems());
+            this.el.classList.add('ngx-drop-list--active');
+        }
+        this.strategy.enter(this.asStrategyDrag(drag), x, y);
+    }
+    sortItem(drag, position) {
+        if (!this.active || this.disableSort)
+            return null;
+        return (this.strategy.sort(this.asStrategyDrag(drag), position.x, position.y)?.currentIndex ?? null);
+    }
+    finishDrag(drag) {
+        if (!this.active)
+            return;
+        const currentIndex = this.strategy.getCurrentIndex();
+        this.onDrop.emit({
+            previousIndex: Math.max(0, drag.originIndex >= 0 ? drag.originIndex : this.previousIndex),
+            currentIndex,
+            item: drag,
+            container: this,
+            previousContainer: drag.originDropList ?? this,
+        });
+        this.reset();
+    }
+    exit(_drag) {
+        if (!this.active)
+            return;
+        this.placeholder?.detach();
+        this.reset();
+    }
+    resetSortTransforms() {
+        this.reset();
+    }
+    getFinalIndex() {
+        return this.strategy.getCurrentIndex();
+    }
+    getItemIndex(item) {
+        return this.indexOf(item);
+    }
+    indexOf(item) {
+        const elements = new Set(this._draggables);
+        let index = 0;
+        for (const node of Array.from(this.el.children)) {
+            if (!(node instanceof HTMLElement))
+                continue;
+            if (node === this.placeholder?.element)
+                continue;
+            if (node.classList.contains('ngx-drag-in-body'))
+                continue;
+            const ref = Array.from(elements).find((candidate) => candidate.el === node);
+            if (!ref)
+                continue;
+            if (ref === item)
+                return index;
+            index++;
+        }
+        return -1;
+    }
+    reset() {
+        this.active = false;
+        this.strategy.reset();
+        this.placeholder?.detach();
+        this.placeholder = undefined;
+        this.publishDragItems();
+        this.el.classList.remove('ngx-drop-list--active');
+    }
+    copyPlaceholderGeometry(source, placeholder, rect) {
+        // copyComputedStyleTree(source, placeholder);
+        placeholder.style.setProperty('width', `${rect.width}px`, 'important');
+        placeholder.style.setProperty('height', `${rect.height}px`, 'important');
+        placeholder.style.setProperty('min-width', `${rect.width}px`, 'important');
+        placeholder.style.setProperty('min-height', `${rect.height}px`, 'important');
+        placeholder.style.setProperty('max-width', `${rect.width}px`, 'important');
+        placeholder.style.setProperty('max-height', `${rect.height}px`, 'important');
+        placeholder.style.setProperty('visibility', 'visible', 'important');
+        placeholder.style.setProperty('opacity', '0.16', 'important');
+        placeholder.style.setProperty('pointer-events', 'none', 'important');
+        placeholder.style.setProperty('transform', 'none', 'important');
+        placeholder.style.setProperty('transition', 'none', 'important');
+        placeholder.style.setProperty('animation', 'none', 'important');
+        placeholder.style.setProperty('box-sizing', 'border-box', 'important');
+    }
+    /**
+     * The sorting strategy only needs a read-only collection of draggable refs.
+     * Using DragRef<any> at this internal boundary avoids the invariant generic
+     * relationship between DragRef<T> and DragRef<unknown>.
+     */
+    getStrategyItems() {
+        return Array.from(this._draggables);
+    }
+    asStrategyDrag(drag) {
+        return drag;
+    }
+    publishDragItems() {
+        this.el.__ngxDragItems = this._draggables;
+    }
+}
+
+/**
+ * Groups multiple drop lists so items can be dragged between them without
+ * needing an explicit `connectedTo` list on every single one.
+ * Lists register themselves automatically when `NgxDropListGroup` wraps them.
+ */
+class DropListGroupRef {
+    lists = new Set();
+    add(list) {
+        this.lists.add(list);
+    }
+    remove(list) {
+        this.lists.delete(list);
+    }
+    has(list) {
+        return !!list && this.lists.has(list);
+    }
+}
+
+class DragDropService {
+    drags = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "drags" }] : /* istanbul ignore next */ []));
+    dropLists = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dropLists" }] : /* istanbul ignore next */ []));
+    activeDrag = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activeDrag" }] : /* istanbul ignore next */ []));
+    registerDragItem(ref) {
+        this.drags.update((items) => (items.includes(ref) ? items : [...items, ref]));
+    }
+    removeDragItem(ref) {
+        this.drags.update((items) => items.filter((x) => x !== ref));
+        if (this.activeDrag() === ref)
+            this.activeDrag.set(null);
+    }
+    registerDropList(ref) {
+        this.dropLists.update((items) => (items.includes(ref) ? items : [...items, ref]));
+    }
+    removeDropList(ref) {
+        this.dropLists.update((items) => items.filter((x) => x !== ref));
+    }
+    begin(ref) {
+        this.activeDrag.set(ref);
+    }
+    end(ref) {
+        if (this.activeDrag() === ref)
+            this.activeDrag.set(null);
+    }
+    cancelActive() {
+        const ref = this.activeDrag();
+        if (!ref)
+            return;
+        ref.cancelDrag();
+        this.activeDrag.set(null);
+    }
+    findDropList(point, current) {
+        const candidates = this.dropLists()
+            .filter((list) => {
+            const r = list.el?.getBoundingClientRect();
+            return (!!r &&
+                point.x >= r.left &&
+                point.x <= r.right &&
+                point.y >= r.top &&
+                point.y <= r.bottom);
+        });
+        // Staying over the current list should always win.
+        if (current && candidates.includes(current))
+            return current;
+        // Never jump into an unrelated list just because it overlaps the pointer.
+        // Prefer the smallest matching connected container (useful for nested lists).
+        return candidates
+            .filter((list) => !current || current.isConnectedTo(list))
+            .sort((a, b) => {
+            const ra = a.el.getBoundingClientRect();
+            const rb = b.el.getBoundingClientRect();
+            return ra.width * ra.height - rb.width * rb.height;
+        })[0] ?? null;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: DragDropService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: DragDropService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: DragDropService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+const NGX_DROPLIST_GROUP = new InjectionToken('ngx-drop-list-group');
+/** Wrap several `ngxDropList`s to let items move freely between them. */
+class NgxDropListGroup {
+    _ref = new DropListGroupRef();
+    ngOnDestroy() {
+        this._ref.lists.clear();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NgxDropListGroup, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.4", type: NgxDropListGroup, isStandalone: true, selector: "[NgxDropListGroup],[ngxDropListGroup]", providers: [{ provide: NGX_DROPLIST_GROUP, useExisting: NgxDropListGroup }], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NgxDropListGroup, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[NgxDropListGroup],[ngxDropListGroup]',
+                    providers: [{ provide: NGX_DROPLIST_GROUP, useExisting: NgxDropListGroup }],
+                }]
+        }] });
+
+const NGX_DROPLIST = new InjectionToken('ngx-drop-list');
+class NgxDropList {
+    el;
+    _ref = new DropListRef();
+    set data(value) {
+        this._ref.data = value;
+    }
+    set connectedTo(value) {
+        this._ref.connectedTo = value ?? [];
+    }
+    set disableSort(value) {
+        this._ref.disableSort = value === true;
+    }
+    drop = new EventEmitter();
+    service = inject(DragDropService);
+    group = inject(NGX_DROPLIST_GROUP, { optional: true, skipSelf: true });
+    constructor(el) {
+        this.el = el;
+    }
+    ngOnInit() {
+        this._ref.el = this.el.nativeElement;
+        this._ref.dropListGroup = this.group?._ref ?? null;
+        // Previously the group directive never actually tracked its lists — fixed here.
+        this.group?._ref.add(this._ref);
+        this._ref.onDrop.subscribe((e) => this.drop.emit(e));
+        this.service.registerDropList(this._ref);
+    }
+    ngOnDestroy() {
+        this.group?._ref.remove(this._ref);
+        this.service.removeDropList(this._ref);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NgxDropList, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.4", type: NgxDropList, isStandalone: true, selector: "[NgxDropList],[ngxDropList]", inputs: { data: "data", connectedTo: "connectedTo", disableSort: "disableSort" }, outputs: { drop: "drop" }, host: { classAttribute: "ngx-drop-list" }, providers: [{ provide: NGX_DROPLIST, useExisting: NgxDropList }], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NgxDropList, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[NgxDropList],[ngxDropList]',
+                    providers: [{ provide: NGX_DROPLIST, useExisting: NgxDropList }],
+                    host: { class: 'ngx-drop-list' },
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { data: [{
+                type: Input,
+                args: ['data']
+            }], connectedTo: [{
+                type: Input
+            }], disableSort: [{
+                type: Input
+            }], drop: [{
+                type: Output
+            }] } });
+
+/**
+ * Auto-scrolls the nearest scrollable ancestor (or window) while the pointer
+ * is dragged near the edge of the scrollable viewport. Direction-agnostic —
+ * works the same in RTL and LTR since it operates on physical scroll deltas.
+ */
+class AutoScroller {
+    raf = 0;
+    container = window;
+    speed = { x: 0, y: 0 };
+    edge;
+    maxSpeed;
+    constructor(edge = 56, maxSpeed = 18) {
+        this.edge = edge;
+        this.maxSpeed = maxSpeed;
+    }
+    start(fromEl) {
+        this.container = findScrollableAncestor(fromEl);
+    }
+    /** Call on every pointermove with the current client coordinates. */
+    update(clientX, clientY) {
+        const rect = getScrollRect(this.container);
+        this.speed = {
+            x: edgeSpeed(clientX, rect.left, rect.right, this.edge, this.maxSpeed),
+            y: edgeSpeed(clientY, rect.top, rect.bottom, this.edge, this.maxSpeed),
+        };
+        if ((this.speed.x || this.speed.y) && !this.raf) {
+            this.raf = requestAnimationFrame(this.tick);
+        }
+    }
+    stop() {
+        if (this.raf)
+            cancelAnimationFrame(this.raf);
+        this.raf = 0;
+        this.speed = { x: 0, y: 0 };
+    }
+    tick = () => {
+        if (!this.speed.x && !this.speed.y) {
+            this.raf = 0;
+            return;
+        }
+        if (this.container instanceof Window) {
+            this.container.scrollBy(this.speed.x, this.speed.y);
+        }
+        else {
+            this.container.scrollLeft += this.speed.x;
+            this.container.scrollTop += this.speed.y;
+        }
+        this.raf = requestAnimationFrame(this.tick);
+    };
+}
+function edgeSpeed(pos, min, max, edge, maxSpeed) {
+    if (pos < min + edge)
+        return -maxSpeed * (1 - Math.max(0, pos - min) / edge);
+    if (pos > max - edge)
+        return maxSpeed * (1 - Math.max(0, max - pos) / edge);
+    return 0;
+}
+function getScrollRect(container) {
+    if (container instanceof Window) {
+        return { left: 0, top: 0, right: window.innerWidth, bottom: window.innerHeight };
+    }
+    return container.getBoundingClientRect();
+}
+function findScrollableAncestor(el) {
+    let node = el;
+    while (node) {
+        const style = getComputedStyle(node);
+        const scrollable = /(auto|scroll|overlay)/.test(style.overflowY + style.overflowX);
+        if (scrollable && node.scrollHeight > node.clientHeight)
+            return node;
+        node = node.parentElement;
+    }
+    return window;
+}
+
+const NGX_DRAGGABLE = new InjectionToken('ngx-draggable');
+const DEFAULT_KEYBOARD_STEP = 8;
+class NgxDraggable {
+    host;
+    renderer;
+    disabled = false;
+    /** Element whose rect constrains the drag. Now actually enforced. */
+    boundary;
+    dragRootElement = '';
+    /** CSS selector for a drag handle. When set, only pointerdowns inside it start a drag. */
+    dragHandle = '';
+    /** Restrict movement to a single axis. */
+    lockAxis;
+    /** Minimum pointer travel (px) before a drag starts, so clicks still register normally. */
+    dragThreshold = 3;
+    /** Pixel step used when dragging via the keyboard (arrow keys, focus required). */
+    keyboardStep = DEFAULT_KEYBOARD_STEP;
+    /** Auto-scroll the nearest scrollable ancestor while dragging near its edge. */
+    autoScroll = true;
+    set data(v) {
+        this._ref.data = v;
+    }
+    dragStart = new EventEmitter();
+    dragMove = new EventEmitter();
+    dragEnd = new EventEmitter();
+    _ref = new DragRef();
+    dragging = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dragging" }] : /* istanbul ignore next */ []));
+    doc = inject(DOCUMENT);
+    service = inject(DragDropService);
+    list = inject(NGX_DROPLIST, { optional: true, skipSelf: true });
+    group = inject(NGX_DROPLIST_GROUP, { optional: true, skipSelf: true });
+    scroller = new AutoScroller();
+    down = false;
+    start = { x: 0, y: 0 };
+    pointerId = -1;
+    removeDown;
+    removeMove;
+    removeUp;
+    removeKeydown;
+    removeEscape;
+    constructor(host, renderer) {
+        this.host = host;
+        this.renderer = renderer;
+    }
+    ngOnInit() {
+        this._ref.el = this.dragRootElement
+            ? (this.host.nativeElement.closest(this.dragRootElement) ?? this.host.nativeElement)
+            : this.host.nativeElement;
+        this._ref.boundary = this.boundary;
+        this._ref.lockAxis = this.lockAxis;
+        this._ref.dropListGroup = this.group?._ref;
+        this._ref.init();
+        this._ref.withDropList(this.list?._ref ?? null);
+        this.service.registerDragItem(this._ref);
+        this.removeDown = this.renderer.listen(this.host.nativeElement, 'pointerdown', (e) => this.pointerDown(e));
+        this.removeKeydown = this.renderer.listen(this.host.nativeElement, 'keydown', (e) => this.keyDown(e));
+    }
+    ngOnDestroy() {
+        this.removeDown?.();
+        this.removeMove?.();
+        this.removeUp?.();
+        this.removeKeydown?.();
+        this.removeEscape?.();
+        this.scroller.stop();
+        this.service.removeDragItem(this._ref);
+        this._ref.dropList?.removeItem(this._ref);
+    }
+    pointerDown(e) {
+        if (this.disabled ||
+            e.button !== 0 ||
+            // this.isInteractive(e.target) ||
+            !this.isOnHandle(e.target))
+            return;
+        e.preventDefault();
+        this.down = true;
+        this.pointerId = e.pointerId;
+        this.start = { x: e.clientX, y: e.clientY };
+        this._ref.boundary = this.boundary;
+        this._ref.lockAxis = this.lockAxis;
+        this._ref.pointerDown(this.start);
+        this.removeMove = this.renderer.listen(this.doc, 'pointermove', (ev) => this.pointerMove(ev));
+        this.removeUp = this.renderer.listen(this.doc, 'pointerup', (ev) => this.pointerUp(ev));
+        this.removeEscape = this.renderer.listen(this.doc, 'keydown', (ev) => {
+            if (ev.key === 'Escape' && this.dragging())
+                this.cancel();
+        });
+    }
+    pointerMove(e) {
+        if (!this.down || e.pointerId !== this.pointerId)
+            return;
+        const p = { x: e.clientX, y: e.clientY };
+        if (!this.dragging() && Math.hypot(p.x - this.start.x, p.y - this.start.y) < this.dragThreshold)
+            return;
+        if (!this.dragging()) {
+            this._ref.startDrag(p);
+            this.dragging.set(true);
+            this.service.begin(this._ref);
+            if (this.autoScroll)
+                this.scroller.start(this._ref.el);
+            this.dragStart.emit(p);
+        }
+        this._ref.dragMove(p);
+        const target = this.service.findDropList(p, this._ref.dropList);
+        if (target !== this._ref.dropList) {
+            this._ref.dropList?.exit(this._ref);
+            this._ref.clearDropList();
+            if (target) {
+                this._ref.withDropList(target);
+                target.createPlaceholder(this._ref);
+                if (this.autoScroll) {
+                    this.scroller.stop();
+                    this.scroller.start(target.el);
+                }
+            }
+            else if (this.autoScroll) {
+                this.scroller.stop();
+            }
+        }
+        // Sorting uses the pointer against the currently active list. Its geometry
+        // is read live, so the placeholder and auto-scroll are both reflected.
+        this._ref.dropList?.sortItem(this._ref, p);
+        if (this.autoScroll)
+            this.scroller.update(p.x, p.y);
+        this.dragMove.emit(p);
+    }
+    pointerUp(e) {
+        if (!this.down || e.pointerId !== this.pointerId)
+            return;
+        if (this.dragging()) {
+            if (this._ref.dropList) {
+                this._ref.endDrag();
+            }
+            this.service.end(this._ref);
+        }
+        this.finish();
+        this.dragEnd.emit(this._ref.pointer);
+    }
+    cancel() {
+        this._ref.cancelDrag();
+        this.service.end(this._ref);
+        this.finish();
+    }
+    finish() {
+        this.dragging.set(false);
+        this.down = false;
+        this.scroller.stop();
+        this.removeMove?.();
+        this.removeUp?.();
+        this.removeEscape?.();
+        this.removeMove = this.removeUp = this.removeEscape = undefined;
+    }
+    /** Arrow-key movement for keyboard/assistive-tech users. Shift multiplies the step by 4. */
+    keyDown(e) {
+        if (this.disabled)
+            return;
+        const step = this.keyboardStep * (e.shiftKey ? 4 : 1);
+        const deltas = {
+            ArrowLeft: { x: -step, y: 0 },
+            ArrowRight: { x: step, y: 0 },
+            ArrowUp: { x: 0, y: -step },
+            ArrowDown: { x: 0, y: step },
+        };
+        const delta = deltas[e.key];
+        if (delta) {
+            e.preventDefault();
+            if (!this.dragging()) {
+                this._ref.pointerDown({ x: 0, y: 0 });
+                this._ref.boundary = this.boundary;
+                this._ref.lockAxis = this.lockAxis;
+                this._ref.startDrag({ x: 0, y: 0 });
+                this.dragging.set(true);
+                this.service.begin(this._ref);
+                this.dragStart.emit({ x: 0, y: 0 });
+            }
+            this._ref.nudge(delta.x, delta.y);
+            this.dragMove.emit(this._ref.pointer);
+            return;
+        }
+        if ((e.key === 'Enter' || e.key === ' ') && this.dragging()) {
+            e.preventDefault();
+            this._ref.endDrag();
+            this.service.end(this._ref);
+            this.dragEnd.emit(this._ref.pointer);
+            this.dragging.set(false);
+        }
+        else if (e.key === 'Escape' && this.dragging()) {
+            e.preventDefault();
+            this._ref.cancelDrag();
+            this.service.end(this._ref);
+            this.dragging.set(false);
+        }
+    }
+    isOnHandle(target) {
+        if (!this.dragHandle)
+            return true;
+        return target instanceof HTMLElement && !!target.closest(this.dragHandle);
+    }
+    isInteractive(target) {
+        return (target instanceof HTMLElement &&
+            !!target.closest('button,a,input,textarea,select,[data-no-drag]'));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NgxDraggable, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.4", type: NgxDraggable, isStandalone: true, selector: "[NgxDraggable],[ngxDraggable]", inputs: { disabled: "disabled", boundary: "boundary", dragRootElement: "dragRootElement", dragHandle: "dragHandle", lockAxis: "lockAxis", dragThreshold: "dragThreshold", keyboardStep: "keyboardStep", autoScroll: "autoScroll", data: "data" }, outputs: { dragStart: "dragStart", dragMove: "dragMove", dragEnd: "dragEnd" }, host: { properties: { "style.touch-action": "\"none\"", "attr.tabindex": "disabled ? null : 0", "attr.aria-grabbed": "dragging()" }, classAttribute: "ngx-draggable" }, providers: [{ provide: NGX_DRAGGABLE, useExisting: NgxDraggable }], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NgxDraggable, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[NgxDraggable],[ngxDraggable]',
+                    providers: [{ provide: NGX_DRAGGABLE, useExisting: NgxDraggable }],
+                    host: {
+                        '[style.touch-action]': '"none"',
+                        '[attr.tabindex]': 'disabled ? null : 0',
+                        '[attr.aria-grabbed]': 'dragging()',
+                        class: 'ngx-draggable',
+                    },
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { disabled: [{
+                type: Input
+            }], boundary: [{
+                type: Input
+            }], dragRootElement: [{
+                type: Input
+            }], dragHandle: [{
+                type: Input
+            }], lockAxis: [{
+                type: Input
+            }], dragThreshold: [{
+                type: Input
+            }], keyboardStep: [{
+                type: Input
+            }], autoScroll: [{
+                type: Input
+            }], data: [{
+                type: Input,
+                args: ['data']
+            }], dragStart: [{
+                type: Output
+            }], dragMove: [{
+                type: Output
+            }], dragEnd: [{
+                type: Output
+            }] } });
+
+const ALL_DIRECTIONS = ['n', 'ne', 'e', 'se', 's', 'sw', 'w', 'nw'];
+const KEYBOARD_STEP = 8;
+class NgxResizable {
+    el;
+    disabled = false;
+    minWidth = 20;
+    minHeight = 20;
+    maxWidth = Infinity;
+    maxHeight = Infinity;
+    directions = [...ALL_DIRECTIONS];
+    grid;
+    /** Element whose rect constrains the resize. Previously accepted nowhere on this directive. */
+    boundary;
+    /** Pixel step used when resizing via the keyboard (arrow keys, focus required). */
+    keyboardStep = KEYBOARD_STEP;
+    resizeStart = new EventEmitter();
+    resizeMove = new EventEmitter();
+    resizeEnd = new EventEmitter();
+    resizing = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resizing" }] : /* istanbul ignore next */ []));
+    direction = 'se';
+    start;
+    pointer = {
+        x: 0,
+        y: 0,
+    };
+    beforeTransition = '';
+    beforeWidth = '';
+    beforeHeight = '';
+    beforeTransform = '';
+    pointerId = -1;
+    constructor(el) {
+        this.el = el;
+    }
+    onPointerDown(e) {
+        if (this.disabled || e.button !== 0) {
+            return;
+        }
+        const dir = this.hitDirection(e);
+        if (!dir) {
+            return;
+        }
+        e.preventDefault();
+        e.stopPropagation();
+        e.stopImmediatePropagation();
+        const element = this.el.nativeElement;
+        this.direction = dir;
+        this.pointerId = e.pointerId;
+        /**
+         * This is the actual visual rectangle.
+         * It already contains any transform created by DragRef.
+         */
+        this.start = element.getBoundingClientRect();
+        this.pointer = {
+            x: e.clientX,
+            y: e.clientY,
+        };
+        this.beforeTransition = element.style.transition;
+        /**
+         * Keep DragRef's transform as the immutable base.
+         *
+         * Resize will temporarily add its own translation
+         * on top of this transform.
+         */
+        this.beforeTransform = element.style.transform;
+        this.resizing.set(true);
+        element.style.transition = 'none';
+        element.setPointerCapture?.(e.pointerId);
+        const out = this.calculate(e);
+        this.apply(out);
+        this.resizeStart.emit(out);
+    }
+    onPointerMove(e) {
+        if (!this.resizing() || e.pointerId !== this.pointerId) {
+            return;
+        }
+        const out = this.calculate(e);
+        this.apply(out);
+        this.resizeMove.emit(out);
+    }
+    onPointerUp(e) {
+        if (!this.resizing() || e.pointerId !== this.pointerId) {
+            return;
+        }
+        const out = this.calculate(e);
+        this.apply(out);
+        this.resizeEnd.emit(out);
+        this.finish();
+    }
+    onDocumentKeyDown(e) {
+        if (!this.resizing()) {
+            return;
+        }
+        if (e.key !== 'Escape') {
+            return;
+        }
+        e.preventDefault();
+        const element = this.el.nativeElement;
+        element.style.width = this.beforeWidth;
+        element.style.height = this.beforeHeight;
+        element.style.transform = this.beforeTransform;
+        this.finish();
+    }
+    onHandleKeyDown(e) {
+        if (this.disabled) {
+            return;
+        }
+        const rtl = isRtl(this.el.nativeElement);
+        const step = this.keyboardStep * (e.shiftKey ? 4 : 1);
+        let dw = 0;
+        let dh = 0;
+        if (e.key === 'ArrowRight') {
+            dw = rtl ? -step : step;
+        }
+        else if (e.key === 'ArrowLeft') {
+            dw = rtl ? step : -step;
+        }
+        else if (e.key === 'ArrowDown') {
+            dh = step;
+        }
+        else if (e.key === 'ArrowUp') {
+            dh = -step;
+        }
+        else {
+            return;
+        }
+        e.preventDefault();
+        const rect = this.el.nativeElement.getBoundingClientRect();
+        const width = this.clampGrid(Math.max(this.minWidth, Math.min(this.maxWidth, rect.width + dw)), 'x');
+        const height = this.clampGrid(Math.max(this.minHeight, Math.min(this.maxHeight, rect.height + dh)), 'y');
+        this.el.nativeElement.style.width = `${width}px`;
+        this.el.nativeElement.style.height = `${height}px`;
+        const out = {
+            width,
+            height,
+            moveLeft: 0,
+            moveTop: 0,
+            left: rect.left,
+            top: rect.top,
+            direction: 'se',
+        };
+        this.resizeMove.emit(out);
+        this.resizeEnd.emit(out);
+    }
+    calculate(e) {
+        const dx = e.clientX - this.pointer.x;
+        const dy = e.clientY - this.pointer.y;
+        let width = this.start.width;
+        let height = this.start.height;
+        /**
+         * East
+         */
+        if (this.direction.includes('e')) {
+            width += dx;
+        }
+        /**
+         * West
+         */
+        if (this.direction.includes('w')) {
+            width -= dx;
+        }
+        /**
+         * South
+         */
+        if (this.direction.includes('s')) {
+            height += dy;
+        }
+        /**
+         * North
+         */
+        if (this.direction.includes('n')) {
+            height -= dy;
+        }
+        width = this.clampGrid(Math.max(this.minWidth, Math.min(this.maxWidth, width)), 'x');
+        height = this.clampGrid(Math.max(this.minHeight, Math.min(this.maxHeight, height)), 'y');
+        /**
+         * Calculate the intended visual position.
+         *
+         * This is useful for boundary calculations and
+         * emitted resize events.
+         */
+        let left = this.start.left;
+        let top = this.start.top;
+        if (this.direction.includes('w')) {
+            left = this.start.right - width;
+        }
+        if (this.direction.includes('n')) {
+            top = this.start.bottom - height;
+        }
+        let moveLeft = left - this.start.left;
+        let moveTop = top - this.start.top;
+        /**
+         * Boundary constraint.
+         */
+        if (this.boundary) {
+            const clamped = clampResizeWithinBoundary(this.boundary.getBoundingClientRect(), this.start, width, height, moveLeft, moveTop);
+            width = clamped.width;
+            height = clamped.height;
+            moveLeft = clamped.left;
+            moveTop = clamped.top;
+            left = this.start.left + moveLeft;
+            top = this.start.top + moveTop;
+        }
+        return {
+            width,
+            height,
+            moveLeft,
+            moveTop,
+            left,
+            top,
+            direction: this.direction,
+        };
+    }
+    apply(out) {
+        const element = this.el.nativeElement;
+        /**
+         * Always reset to the transform that existed before
+         * this resize operation started.
+         *
+         * This prevents resize corrections from accumulating.
+         */
+        element.style.transform = this.beforeTransform;
+        /**
+         * Apply the actual size first.
+         *
+         * Changing width/height may cause the browser to re-layout
+         * the element, especially for relative/flex/grid/static layouts.
+         */
+        element.style.width = `${out.width}px`;
+        element.style.height = `${out.height}px`;
+        /**
+         * Force/read layout after changing the size.
+         */
+        const current = element.getBoundingClientRect();
+        /**
+         * These are the positions where the element MUST visually be.
+         *
+         * `out.moveLeft` / `out.moveTop` are calculated in `calculate()`
+         * from the original visual rectangle.
+         */
+        const targetLeft = this.start.left + out.moveLeft;
+        const targetTop = this.start.top + out.moveTop;
+        /**
+         * Browser's actual position after width/height changed.
+         *
+         * The difference between target and current position is the
+         * correction that must be applied using transform.
+         */
+        const correctionX = targetLeft - current.left;
+        const correctionY = targetTop - current.top;
+        const hasCorrection = correctionX !== 0 || correctionY !== 0;
+        if (!hasCorrection) {
+            element.style.transform = this.beforeTransform;
+            return;
+        }
+        /**
+         * Preserve DragRef's existing transform and add only the
+         * correction required by Resize.
+         */
+        const baseTransform = this.beforeTransform && this.beforeTransform !== 'none' ? `${this.beforeTransform} ` : '';
+        element.style.transform =
+            `${baseTransform}translate3d(` + `${correctionX}px, ` + `${correctionY}px, 0)`;
+    }
+    clampGrid(value, axis) {
+        const grid = typeof this.grid === 'number' ? this.grid : this.grid?.[axis];
+        if (!grid || grid <= 0) {
+            return value;
+        }
+        return Math.round(value / grid) * grid;
+    }
+    finish() {
+        this.resizing.set(false);
+        this.el.nativeElement.style.transition = this.beforeTransition;
+        this.pointerId = -1;
+        this.beforeTransform = '';
+    }
+    resolvedDirections() {
+        const rtl = isRtl(this.el.nativeElement);
+        const set = new Set();
+        for (const direction of this.directions) {
+            set.add(resolveLogicalDirection(direction, rtl));
+        }
+        return [...set];
+    }
+    hitDirection(e) {
+        const element = this.el.nativeElement;
+        const rect = element.getBoundingClientRect();
+        const edge = Math.min(12, Math.max(6, Math.min(rect.width, rect.height) * 0.18));
+        const isLeft = e.clientX - rect.left <= edge;
+        const isRight = rect.right - e.clientX <= edge;
+        const isTop = e.clientY - rect.top <= edge;
+        const isBottom = rect.bottom - e.clientY <= edge;
+        /**
+         * Explicit resize handle has priority.
+         */
+        const handle = e.target instanceof HTMLElement
+            ? e.target.closest('[data-ngx-resize-handle]')
+            : null;
+        if (handle && element.contains(handle)) {
+            const raw = handle.dataset['ngxResizeHandle'];
+            if (!raw) {
+                return null;
+            }
+            const resolved = resolveLogicalDirection(raw, isRtl(element));
+            return this.resolvedDirections().includes(resolved) ? resolved : null;
+        }
+        /**
+         * These are PHYSICAL screen directions.
+         *
+         * left  -> w
+         * right -> e
+         *
+         * RTL is handled only when a logical direction
+         * such as "start" / "end" is requested.
+         */
+        const direction = isTop && isLeft
+            ? 'nw'
+            : isTop && isRight
+                ? 'ne'
+                : isBottom && isLeft
+                    ? 'sw'
+                    : isBottom && isRight
+                        ? 'se'
+                        : isTop
+                            ? 'n'
+                            : isRight
+                                ? 'e'
+                                : isBottom
+                                    ? 's'
+                                    : isLeft
+                                        ? 'w'
+                                        : null;
+        if (!direction) {
+            return null;
+        }
+        return this.resolvedDirections().includes(direction) ? direction : null;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NgxResizable, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.4", type: NgxResizable, isStandalone: true, selector: "[NgxResizable],[ngxResizable]", inputs: { disabled: "disabled", minWidth: "minWidth", minHeight: "minHeight", maxWidth: "maxWidth", maxHeight: "maxHeight", directions: "directions", grid: "grid", boundary: "boundary", keyboardStep: "keyboardStep" }, outputs: { resizeStart: "resizeStart", resizeMove: "resizeMove", resizeEnd: "resizeEnd" }, host: { listeners: { "pointerdown": "onPointerDown($event)", "document:pointermove": "onPointerMove($event)", "document:pointerup": "onPointerUp($event)", "document:keydown": "onDocumentKeyDown($event)", "keydown": "onHandleKeyDown($event)" }, properties: { "style.touch-action": "\"none\"" }, classAttribute: "ngx-resizable" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NgxResizable, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[NgxResizable],[ngxResizable]',
+                    host: {
+                        '[style.touch-action]': '"none"',
+                        class: 'ngx-resizable',
+                    },
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { disabled: [{
+                type: Input
+            }], minWidth: [{
+                type: Input
+            }], minHeight: [{
+                type: Input
+            }], maxWidth: [{
+                type: Input
+            }], maxHeight: [{
+                type: Input
+            }], directions: [{
+                type: Input
+            }], grid: [{
+                type: Input
+            }], boundary: [{
+                type: Input
+            }], keyboardStep: [{
+                type: Input
+            }], resizeStart: [{
+                type: Output
+            }], resizeMove: [{
+                type: Output
+            }], resizeEnd: [{
+                type: Output
+            }], onPointerDown: [{
+                type: HostListener,
+                args: ['pointerdown', ['$event']]
+            }], onPointerMove: [{
+                type: HostListener,
+                args: ['document:pointermove', ['$event']]
+            }], onPointerUp: [{
+                type: HostListener,
+                args: ['document:pointerup', ['$event']]
+            }], onDocumentKeyDown: [{
+                type: HostListener,
+                args: ['document:keydown', ['$event']]
+            }], onHandleKeyDown: [{
+                type: HostListener,
+                args: ['keydown', ['$event']]
+            }] } });
+
+const NGX_PLACEHOLDER = new InjectionToken('ngx-place-holder');
+class NgxPlaceholder {
+    tpl;
+    _ref = new PlaceHolderRef();
+    list = inject(NGX_DROPLIST, { optional: true, skipSelf: true });
+    constructor(tpl) {
+        this.tpl = tpl;
+        this._ref.tpl = tpl;
+        this._ref.dropList = this.list?._ref;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NgxPlaceholder, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.4", type: NgxPlaceholder, isStandalone: true, selector: "[NgxPlaceholder],[ngxPlaceholder]", providers: [{ provide: NGX_PLACEHOLDER, useExisting: NgxPlaceholder }], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NgxPlaceholder, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[NgxPlaceholder],[ngxPlaceholder]',
+                    providers: [{ provide: NGX_PLACEHOLDER, useExisting: NgxPlaceholder }],
+                }]
+        }], ctorParameters: () => [{ type: i0.TemplateRef }] });
+
+function moveItemInArray(array, from, to) {
+    const f = clamp(from, array.length - 1);
+    const t = clamp(to, array.length - 1);
+    if (f === t)
+        return;
+    const target = array[f];
+    const delta = t < f ? -1 : 1;
+    for (let i = f; i !== t; i += delta)
+        array[i] = array[i + delta];
+    array[t] = target;
+}
+function transferArrayItem(src, dst, from, to) {
+    const f = clamp(from, src.length - 1);
+    const t = clamp(to, dst.length);
+    if (src.length)
+        dst.splice(t, 0, src.splice(f, 1)[0]);
+}
+/**
+ * Copies an item from one array to another, leaving it in its
+ * original position in current array.
+ * @param currentArray Array from which to copy the item.
+ * @param targetArray Array into which is copy the item.
+ * @param currentIndex Index of the item in its current array.
+ * @param targetIndex Index at which to insert the item.
+ *
+ */
+function copyArrayItem(currentArray, targetArray, currentIndex, targetIndex) {
+    const to = clamp(targetIndex, targetArray.length);
+    if (currentArray.length) {
+        targetArray.splice(to, 0, currentArray[currentIndex]);
+    }
+}
+function clamp(v, max) {
+    return Math.max(0, Math.min(max, v));
+}
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AutoScroller, DragDropService, DragRef, DropListGroupRef, DropListRef, NGX_DRAGGABLE, NGX_DROPLIST, NGX_DROPLIST_GROUP, NGX_PLACEHOLDER, NgxDraggable, NgxDropList, NgxDropListGroup, NgxPlaceholder, NgxResizable, PlaceHolderRef, adjustForZoom, checkBoundX, checkBoundY, clampResizeWithinBoundary, copyArrayItem, getPageZoom, isRtl, moveItemInArray, resolveLogicalDirection, transferArrayItem };
+//# sourceMappingURL=ngx-kit-drag-resize.mjs.map