ngx-kit 9.1.0 → 9.2.1

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

@@ -132,6 +132,54 @@ function resolveLogicalDirection(dir, rtl) {
 
 /** Above any app chrome (modals, sticky headers) but below the browser's own UI. */
 const PREVIEW_Z_INDEX = '2147483000';
+/**
+ * The clone lives in <body>, so rules that depend on its ORIGINAL ancestors (`.palette .tile`,
+ * `.board { font: ... }`, `[dir=rtl] .x`) no longer match it. These are the properties that make
+ * the difference between "looks like the block I grabbed" and "looks like an unstyled <div>":
+ * the inherited text properties plus the root box's own visual properties. Only the ROOT is
+ * handled (one `getComputedStyle` at drag start); use `*ngxDragPreview` for a bespoke preview.
+ */
+const PREVIEW_STYLE_PROPS = [
+    // inherited
+    'direction',
+    'color',
+    'font-family',
+    'font-size',
+    'font-weight',
+    'font-style',
+    'line-height',
+    'letter-spacing',
+    'text-align',
+    'text-transform',
+    'white-space',
+    // the root box
+    'background-color',
+    'background-image',
+    'background-size',
+    'background-position',
+    'background-repeat',
+    'border-top',
+    'border-right',
+    'border-bottom',
+    'border-left',
+    'border-radius',
+    'box-shadow',
+    'padding-top',
+    'padding-right',
+    'padding-bottom',
+    'padding-left',
+    'opacity',
+];
+function copyVisualStyles(source, target) {
+    const cs = source.ownerDocument.defaultView?.getComputedStyle(source);
+    if (!cs)
+        return;
+    for (const prop of PREVIEW_STYLE_PROPS) {
+        const value = cs.getPropertyValue(prop);
+        if (value)
+            target.style.setProperty(prop, value);
+    }
+}
 class DragPreviewRef {
     tpl;
     /** Set by `ngxDragPreview` so the embedded view can join Angular's change-detection tree. */
@@ -163,6 +211,7 @@ class DragPreviewRef {
             // Avoid duplicated ids in the document.
             this.element.removeAttribute('id');
             this.element.querySelectorAll('[id]').forEach((n) => n.removeAttribute('id'));
+            copyVisualStyles(dragEl, this.element);
             this.element.classList.add('ngx-drag-preview');
             this.element.setAttribute('aria-hidden', 'true');
             this.element.setAttribute('inert', '');
@@ -214,21 +263,56 @@ class DragPreviewRef {
 }
 
 function viewportDeltaToLocal(element, delta, includeElementTransform = true) {
-    const matrix = getLocalToViewportMatrix(element, includeElementTransform);
+    const inverse = invertLinear(getLocalToViewportMatrix(element, includeElementTransform));
+    return applyLinear(inverse, delta);
+}
+/**
+ * Inverse of a 2D linear transform, or `null` when it is not invertible (zero-scale ancestor).
+ * Exposed so hot paths (every pointer move) can compute the matrix ONCE per drag instead of
+ * walking the ancestor chain with `getComputedStyle` on every event.
+ */
+function invertLinear(matrix) {
     const determinant = matrix.a * matrix.d - matrix.b * matrix.c;
-    if (!Number.isFinite(determinant) || Math.abs(determinant) < 1e-8) {
-        // A zero-scale ancestor has no invertible coordinate space. Avoid NaN/Infinity.
+    if (!Number.isFinite(determinant) || Math.abs(determinant) < 1e-8)
+        return null;
+    return {
+        a: matrix.d / determinant,
+        b: -matrix.b / determinant,
+        c: -matrix.c / determinant,
+        d: matrix.a / determinant,
+    };
+}
+/** Applies a linear transform to a vector. A `null` matrix (see `invertLinear`) yields `{0,0}`. */
+function applyLinear(matrix, delta) {
+    if (!matrix)
         return { x: 0, y: 0 };
-    }
-    const inverseA = matrix.d / determinant;
-    const inverseB = -matrix.b / determinant;
-    const inverseC = -matrix.c / determinant;
-    const inverseD = matrix.a / determinant;
     return {
-        x: inverseA * delta.x + inverseC * delta.y,
-        y: inverseB * delta.x + inverseD * delta.y,
+        x: matrix.a * delta.x + matrix.c * delta.y,
+        y: matrix.b * delta.x + matrix.d * delta.y,
     };
 }
+/**
+ * Converts a SIZE measured in the viewport pixels of `fromDocument` into the viewport pixels of
+ * `toDocument` (they differ when the iframe element is scaled, e.g. a zoomed-out device preview).
+ * Returns `null` when the documents are unrelated / cross-origin.
+ */
+function convertSizeBetweenDocuments(size, fromDocument, toDocument) {
+    if (fromDocument === toDocument)
+        return { ...size };
+    const a = convertPointBetweenDocuments({ x: 0, y: 0 }, fromDocument, toDocument);
+    const b = convertPointBetweenDocuments({ x: size.x, y: size.y }, fromDocument, toDocument);
+    if (!a || !b)
+        return null;
+    return { x: b.x - a.x, y: b.y - a.y };
+}
+/**
+ * Axis scale (always positive) between `element`'s local CSS pixels and viewport pixels,
+ * i.e. how many screen pixels one CSS pixel inside `element` occupies. Rotation is ignored.
+ */
+function getLocalScale(element) {
+    const m = getLocalToViewportMatrix(element);
+    return { x: Math.hypot(m.a, m.b) || 1, y: Math.hypot(m.c, m.d) || 1 };
+}
 function localDeltaToViewport(element, delta) {
     const matrix = getLocalToViewportMatrix(element);
     return {
@@ -398,6 +482,14 @@ class DragRef {
     lastEffective = { x: 0, y: 0 };
     scrollListener;
     resizeListener;
+    /**
+     * Every document that hosts a candidate list (the source document, plus any same-origin iframe
+     * such as a page-builder canvas) needs its own scroll/resize listeners: `scroll` does not cross
+     * the iframe boundary, so scrolling the canvas never reaches a listener on the parent page.
+     */
+    documentListeners = new Map();
+    /** viewport → local matrix of the dragged element, computed once per free drag. */
+    freeDragInverse;
     init() {
         this.previousTransform =
             this.el.ownerDocument.defaultView?.getComputedStyle(this.el).transform ?? '';
@@ -426,6 +518,7 @@ class DragRef {
         this.moveDx = 0;
         this.moveDy = 0;
         this.scrollCompensation = { x: 0, y: 0 };
+        this.freeDragInverse = undefined;
         // Only draggables that are direct children of their drop list take part in sorting.
         // Everything else is a plain free drag.
         const list = this.dropList && this.dropList.el === this.el.parentElement ? this.dropList : null;
@@ -617,7 +710,11 @@ class DragRef {
             : '';
         const tx = this.moveDx + this.scrollCompensation.x;
         const ty = this.moveDy + this.scrollCompensation.y;
-        const local = viewportDeltaToLocal(this.el, { x: tx, y: ty });
+        if (this.freeDragInverse === undefined) {
+            // Includes the element's own (pre-drag) transform: the translate is appended after it.
+            this.freeDragInverse = invertLinear(getLocalToViewportMatrix(this.el, true));
+        }
+        const local = applyLinear(this.freeDragInverse, { x: tx, y: ty });
         this.el.style.transform = `${base}translate3d(${local.x}px, ${local.y}px, 0)`;
     }
     // -------------------------------------------------------------------------------------
@@ -646,9 +743,40 @@ class DragRef {
                 l._refresh();
             this.updateDropTarget(this.lastEffective);
         };
-        // Capture: `scroll` does not bubble, and any ancestor (or the page) may be the one scrolling.
-        doc.addEventListener('scroll', this.scrollListener, { capture: true, passive: true });
-        win.addEventListener('resize', this.resizeListener, { passive: true });
+        this.syncDocumentListeners();
+    }
+    /**
+     * Keeps scroll/resize listeners attached to every document that currently hosts a candidate
+     * list. Capture: `scroll` does not bubble, and any ancestor (or the page) may be scrolling.
+     */
+    syncDocumentListeners() {
+        if (!this.scrollListener || !this.resizeListener)
+            return;
+        const scroll = this.scrollListener;
+        const resize = this.resizeListener;
+        const wanted = new Set([this.el.ownerDocument]);
+        for (const list of this.cachedLists) {
+            const doc = list.el?.ownerDocument;
+            if (doc)
+                wanted.add(doc);
+        }
+        for (const [doc, remove] of this.documentListeners) {
+            if (!wanted.has(doc)) {
+                remove();
+                this.documentListeners.delete(doc);
+            }
+        }
+        for (const doc of wanted) {
+            const win = doc.defaultView;
+            if (!win || this.documentListeners.has(doc))
+                continue;
+            doc.addEventListener('scroll', scroll, { capture: true, passive: true });
+            win.addEventListener('resize', resize, { passive: true });
+            this.documentListeners.set(doc, () => {
+                doc.removeEventListener('scroll', scroll, { capture: true });
+                win.removeEventListener('resize', resize);
+            });
+        }
     }
     /**
      * Recomputes which registered lists are valid targets for this drag — connected to the
@@ -677,6 +805,7 @@ class DragRef {
         }
         this.dropCandidates = next;
         this.cachedLists = next.map((c) => c.list);
+        this.syncDocumentListeners();
     }
     /**
      * Decide which list is under the pointer, switch if needed, then re-sort in the active one.
@@ -751,11 +880,9 @@ class DragRef {
      * regardless of how the drag ended. Only then is the drop event emitted.
      */
     finishListDrag(commit) {
-        const doc = this.el.ownerDocument;
-        if (this.scrollListener)
-            doc.removeEventListener('scroll', this.scrollListener, { capture: true });
-        if (this.resizeListener)
-            doc.defaultView?.removeEventListener('resize', this.resizeListener);
+        for (const remove of this.documentListeners.values())
+            remove();
+        this.documentListeners.clear();
         this.scrollListener = this.resizeListener = undefined;
         const target = commit ? this.activeDropList : null;
         const event = target?._finish(this, true) ?? null;
@@ -1284,6 +1411,13 @@ class SortSession {
     /** undefined = not created yet, null = this layout has no whitespace separators. */
     spacer;
     onOffsetChange;
+    /**
+     * viewport → local-CSS-pixel matrix of the container's coordinate space. Every slot is a direct
+     * child of the container, so ONE matrix serves all of them. It is computed lazily and kept for
+     * the whole session: walking the ancestor chain with `getComputedStyle` on every displacement
+     * would put style reads on the hot path (see the "zero style reads per move" test).
+     */
+    inverse;
     constructor(init) {
         this.spacer = init.spacer;
         this.onOffsetChange = init.onOffsetChange;
@@ -1356,6 +1490,7 @@ class SortSession {
             return;
         const target = this.targetIdx;
         this.clearDisplacement();
+        this.inverse = undefined; // the viewport may have changed the ancestors' transforms
         this.snapshot();
         this.frame = new ScrollFrame(this.container, true);
         if (this.mode === 'transform') {
@@ -1455,11 +1590,17 @@ class SortSession {
         }
         else {
             this.applied.set(e.el, off);
-            const local = viewportDeltaToLocal(e.el, off, false);
+            const local = this.toLocal(off);
             e.el.style.transform = `translate3d(${local.x}px, ${local.y}px, 0)${e.base}`;
         }
         this.onOffsetChange?.(e.el, off);
     }
+    toLocal(delta) {
+        if (this.inverse === undefined) {
+            this.inverse = invertLinear(getLocalToViewportMatrix(this.container, true));
+        }
+        return applyLinear(this.inverse, delta);
+    }
     // ---------------------------------------------------------------------------------------
     // flow strategy (single placeholder move + FLIP transforms)
     // ---------------------------------------------------------------------------------------
@@ -1481,7 +1622,7 @@ class SortSession {
             const dx = first[i].left - last[i].left;
             const dy = first[i].top - last[i].top;
             if (this.animationMs > 0 && (Math.abs(dx) > 0.5 || Math.abs(dy) > 0.5)) {
-                const local = viewportDeltaToLocal(e.el, { x: dx, y: dy }, false);
+                const local = this.toLocal({ x: dx, y: dy });
                 e.el.style.transform = `translate3d(${local.x}px, ${local.y}px, 0)${e.base}`;
                 moved.push(e);
             }
@@ -1551,6 +1692,14 @@ class DropListRef {
     dropListGroup;
     /** Duration (ms) of the sibling slide animation. `0` disables animation. */
     sortAnimationDuration = 200;
+    /**
+     * How the auto-generated placeholder is sized.
+     *  - `'item'` (default): exactly the dragged item's footprint.
+     *  - `'stretch'`: only the MAIN axis follows the item; the cross axis fills the list. This is
+     *    what a page-builder canvas wants when a small palette tile is dragged into a full-width
+     *    column of blocks (the tile's own width means nothing there).
+     */
+    placeholderFit = 'item';
     _draggables = new Set();
     onDrop = new EventEmitter();
     /**
@@ -2012,14 +2161,35 @@ class DropListRef {
         if (ph.custom)
             return;
         placeholder.style.display = drag.originalDisplay;
+        // `rect` is in the VIEWPORT pixels of the dragged item's document. CSS sizes are local to the
+        // list: convert across an (optionally scaled) iframe boundary first, then through the
+        // list's own scaled/zoomed ancestors. Without this a placeholder inside a `scale(.5)` canvas
+        // would be drawn at half the size it reserves.
+        const inTarget = convertSizeBetweenDocuments({ x: rect.width, y: rect.height }, drag.el.ownerDocument, this.el.ownerDocument) ?? { x: rect.width, y: rect.height };
+        const scale = getLocalScale(this.el);
+        const width = Math.abs(inTarget.x) / scale.x;
+        const height = Math.abs(inTarget.y) / scale.y;
         // Occupies exactly the dragged item's footprint, so the gap reserved in the list — and the
         // sibling-displacement math derived from it — matches the item's real size.
-        set('width', `${rect.width}px`);
-        set('height', `${rect.height}px`);
-        // set('min-width', `${rect.width}px`);
-        // set('min-height', `${rect.height}px`);
-        // set('max-width', `${rect.width}px`);
-        // set('max-height', `${rect.height}px`);
+        const axis = this.placeholderFit === 'stretch' ? fallbackAxis(this.el) : null;
+        if (axis === 'y') {
+            // vertical stack: the width is whatever the list gives its children
+            set('width', 'auto');
+            set('max-width', 'none');
+            if (placeholder.style.display === 'inline' || placeholder.style.display === 'inline-block') {
+                placeholder.style.display = 'block';
+            }
+        }
+        else {
+            set('width', `${width}px`);
+        }
+        if (axis === 'x') {
+            set('height', 'auto');
+            set('max-height', 'none');
+        }
+        else {
+            set('height', `${height}px`);
+        }
         set('visibility', 'visible');
         set('opacity', '0.16');
         set('pointer-events', 'none');
@@ -2047,6 +2217,24 @@ function measureHit(el) {
         return null;
     const clips = [];
     const root = el.ownerDocument.documentElement;
+    // The visible window of the document itself. Matters for a list inside an <iframe>: a tall
+    // canvas extends far below the iframe's viewport, and a pointer that is already outside the
+    // frame (toolbar, footer) must not count as "over the list".
+    const ownerWin = el.ownerDocument.defaultView;
+    if (ownerWin?.frameElement) {
+        // In quirks mode (an iframe written without <!doctype>) `documentElement.clientHeight` is the
+        // height of the CONTENT, and the viewport size lives on <body> instead.
+        const sizer = el.ownerDocument.compatMode === 'CSS1Compat' ? root : (el.ownerDocument.body ?? root);
+        clips.push({
+            box: {
+                left: 0,
+                top: 0,
+                right: sizer.clientWidth || ownerWin.innerWidth,
+                bottom: sizer.clientHeight || ownerWin.innerHeight,
+            },
+            frame: new ScrollFrame(null, false, null), // the window clip never moves with scrolling
+        });
+    }
     for (let node = el.parentElement; node && node !== root; node = node.parentElement) {
         const s = node.ownerDocument.defaultView?.getComputedStyle(node);
         if (!s)
@@ -2250,7 +2438,10 @@ class AutoScroller {
     raf = 0;
     container;
     win;
+    /** Document the pointer coordinates (`update(x, y)`) are expressed in. */
+    pointerDoc;
     speed = { x: 0, y: 0 };
+    carry = { x: 0, y: 0 };
     onTick;
     edge;
     maxSpeed;
@@ -2261,6 +2452,7 @@ class AutoScroller {
     /** onTick اجرا می‌شود بعد از هر گام اسکرول، تا با آخرین موقعیت pointer، sort/placeholder به‌روز شود. */
     start(fromEl, onTick) {
         this.win = fromEl.ownerDocument.defaultView ?? undefined;
+        this.pointerDoc = fromEl.ownerDocument;
         this.container = findScrollableAncestor(fromEl);
         this.onTick = onTick;
     }
@@ -2269,10 +2461,24 @@ class AutoScroller {
         this.container = findScrollableAncestor(fromEl);
     }
     update(clientX, clientY) {
+        // The scroll container may live in another document (a page-builder iframe). Its rect is in
+        // THAT document's viewport pixels, so bring the pointer into the same space first.
+        let x = clientX;
+        let y = clientY;
+        const containerDoc = documentOf(this.container);
+        if (this.pointerDoc && containerDoc && containerDoc !== this.pointerDoc) {
+            const p = convertPointBetweenDocuments({ x, y }, this.pointerDoc, containerDoc);
+            if (!p) {
+                this.speed = { x: 0, y: 0 };
+                return;
+            }
+            x = p.x;
+            y = p.y;
+        }
         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),
+            x: edgeSpeed(x, rect.left, rect.right, this.edge, this.maxSpeed),
+            y: edgeSpeed(y, rect.top, rect.bottom, this.edge, this.maxSpeed),
         };
         if ((this.speed.x || this.speed.y) && !this.raf) {
             this.raf = this.win?.requestAnimationFrame(this.tick) ?? 0;
@@ -2283,8 +2489,10 @@ class AutoScroller {
             this.win?.cancelAnimationFrame(this.raf);
         this.raf = 0;
         this.speed = { x: 0, y: 0 };
+        this.carry = { x: 0, y: 0 };
         this.onTick = undefined;
         this.win = undefined;
+        this.pointerDoc = undefined;
     }
     tick = () => {
         if (!this.speed.x && !this.speed.y) {
@@ -2292,14 +2500,21 @@ class AutoScroller {
             return;
         }
         const container = this.container;
-        if (isWindow(container)) {
-            container.scrollBy(this.speed.x, this.speed.y);
-        }
-        else {
-            // Edge speed is measured in viewport pixels; scrollLeft/Top are local to the scroller.
-            const local = viewportDeltaToLocal(container, this.speed);
-            container.scrollLeft += local.x;
-            container.scrollTop += local.y;
+        // Edge speed is measured in viewport pixels; an element's scrollLeft/Top are local to it.
+        const local = isWindow(container) ? this.speed : viewportDeltaToLocal(container, this.speed);
+        // Browsers snap scroll offsets to whole pixels, so a slow speed (< 1px/frame, i.e. when the
+        // pointer has just entered the edge zone) would never move anything. Carry the remainder.
+        this.carry.x += local.x;
+        this.carry.y += local.y;
+        const dx = Math.trunc(this.carry.x);
+        const dy = Math.trunc(this.carry.y);
+        this.carry.x -= dx;
+        this.carry.y -= dy;
+        if (dx || dy) {
+            // `behavior: 'instant'` matters: with `scroll-behavior: smooth` on <html> or on the scroller
+            // (very common in apps) every per-frame scroll would start a new animation that cancels the
+            // previous one, and the list would not move at all.
+            container.scrollBy({ left: dx, top: dy, behavior: 'instant' });
         }
         // Pointer ثابت مانده ولی محتوا اسکرول شده؛
         // بنابراین موقعیت placeholder/sort را دوباره محاسبه کن.
@@ -2318,7 +2533,21 @@ function getScrollRect(container) {
     if (isWindow(container)) {
         return { left: 0, top: 0, right: container.innerWidth, bottom: container.innerHeight };
     }
-    return container.getBoundingClientRect();
+    // A scroller taller than the screen (or partly outside it) is only "edge-sensitive" at the
+    // edges the user can actually see: clip its rect to the document viewport.
+    const r = container.getBoundingClientRect();
+    const win = container.ownerDocument.defaultView;
+    if (!win)
+        return r;
+    return {
+        left: Math.max(r.left, 0),
+        top: Math.max(r.top, 0),
+        right: Math.min(r.right, win.innerWidth),
+        bottom: Math.min(r.bottom, win.innerHeight),
+    };
+}
+function documentOf(container) {
+    return isWindow(container) ? container.document : container.ownerDocument;
 }
 function findScrollableAncestor(el) {
     let node = el;
@@ -2328,7 +2557,12 @@ function findScrollableAncestor(el) {
             break;
         const style = win.getComputedStyle(node);
         const scrollable = /(auto|scroll|overlay)/.test(style.overflowY + style.overflowX);
-        if (scrollable && node.scrollHeight > node.clientHeight) {
+        if (scrollable && (node.scrollHeight > node.clientHeight || node.scrollWidth > node.clientWidth)) {
+            // <html>/<body> scroll the whole document: their own rect spans the full (tall) page, so
+            // edge detection must use the window's viewport instead.
+            const doc = node.ownerDocument;
+            if (node === doc.documentElement || node === doc.body)
+                return win;
             return node;
         }
         node = node.parentElement;
@@ -2403,6 +2637,19 @@ class NgxDraggable {
     /** Auto-scroll the nearest scrollable ancestor while dragging near its edge. */
     autoScroll = input(true, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "autoScroll" }] : /* istanbul ignore next */ []));
+    /**
+     * Presses that start inside an element matching this selector never start a drag (the element
+     * stays fully usable: text caret, clicks, selection). Handy for editable regions of a block.
+     */
+    noDragSelector = input('[data-no-drag]', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "noDragSelector" }] : /* istanbul ignore next */ []));
+    /**
+     * When `true`, presses on native interactive controls (`button, a, input, textarea, select`,
+     * `[contenteditable]`) do not start a drag either. Off by default so that a page-builder canvas
+     * block can be grabbed by its own button/link, which is exactly what you want while editing.
+     */
+    ignoreInteractive = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ignoreInteractive" }] : /* istanbul ignore next */ []));
     set data(v) {
         this._ref.data = v;
     }
@@ -2431,6 +2678,8 @@ class NgxDraggable {
     lastWindowScroll = { left: 0, top: 0 };
     removeContainerScroll;
     removeWindowScroll;
+    removeDocKeydown;
+    keyboardDrag = false;
     renderer = inject(Renderer2);
     constructor(host) {
         this.host = host;
@@ -2474,6 +2723,7 @@ class NgxDraggable {
         this.removeEscape?.();
         this.removeCancel?.();
         this.removeLostCapture?.();
+        this.removeDocKeydown?.();
         this.scroller.stop();
         this.stopScrollTracking();
         // Destroyed mid-drag (e.g. the model changed underneath us): never leave a body clone behind.
@@ -2484,7 +2734,7 @@ class NgxDraggable {
     pointerDown(e) {
         if (this.disabled() ||
             e.button !== 0 ||
-            // this.isInteractive(e.target) ||
+            this.isExcluded(e.target) ||
             !this.isOnHandle(e.target))
             return;
         // Nested draggables: pointerdown bubbles, so without this an ancestor draggable would start
@@ -2494,15 +2744,27 @@ class NgxDraggable {
         claimedPointerEvents.add(e);
         e.preventDefault();
         this.down = true;
+        this.keyboardDrag = false;
         this.pointerId = e.pointerId;
-        this._ref.el.setPointerCapture(this.pointerId);
+        // Pointer capture keeps move/up events flowing to this document even while the pointer is
+        // over an <iframe> (the page-builder canvas). It can throw (pointer already gone, synthetic
+        // events from automation tools) — in that case we simply fall back to plain document events.
+        try {
+            this._ref.el.setPointerCapture(this.pointerId);
+        }
+        catch {
+            /* not capturable: document level listeners below still work inside this document */
+        }
         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._ref.el, 'pointermove', (ev) => this.pointerMove(ev));
-        this.removeUp = this.renderer.listen(this._ref.el, 'pointerup', (ev) => this.pointerUp(ev));
         const doc = this._ref.el.ownerDocument;
+        // Listen on the DOCUMENT (captured events bubble up to it): this keeps working when the
+        // dragged element is re-rendered / detached by the framework mid-drag, and it is the same
+        // for real captured events and for events dispatched by test tooling.
+        this.removeMove = this.renderer.listen(doc, 'pointermove', (ev) => this.pointerMove(ev));
+        this.removeUp = this.renderer.listen(doc, 'pointerup', (ev) => this.pointerUp(ev));
         this.removeEscape = this.renderer.listen(doc, 'keydown', (ev) => {
             if (ev.key === 'Escape' && this.dragging())
                 this.cancel();
@@ -2587,9 +2849,7 @@ class NgxDraggable {
     pointerUp(e) {
         if (!this.down || e.pointerId !== this.pointerId)
             return;
-        if (this._ref.el.hasPointerCapture(this.pointerId)) {
-            this._ref.el.releasePointerCapture(this.pointerId);
-        }
+        this.releaseCapture();
         if (this.dragging()) {
             // Also when released OUTSIDE every list: endDrag() rolls the drag back and cleans up.
             // The release position is authoritative for list sorting (a fast flick may end with
@@ -2601,6 +2861,9 @@ class NgxDraggable {
             // endDrag must run for free drags too, otherwise their lifecycle never completes.
             this._ref.endDrag();
             this.service.end(this._ref);
+            // The browser still fires a `click` on the captured element after the button is released.
+            // After a real drag that click must not select the block / follow its link.
+            this.swallowNextClick();
         }
         this.finish();
         this.dragEnd.emit(this._ref.pointer);
@@ -2615,15 +2878,27 @@ class NgxDraggable {
         }
         this.pointerUp(e);
     }
+    releaseCapture() {
+        if (this.pointerId < 0)
+            return;
+        try {
+            if (this._ref.el.hasPointerCapture?.(this.pointerId)) {
+                this._ref.el.releasePointerCapture(this.pointerId);
+            }
+        }
+        catch {
+            /* element detached or pointer already released */
+        }
+    }
     cancel() {
         this._ref.cancelDrag();
         this.service.end(this._ref);
         this.finish();
     }
     finish() {
-        if (this.pointerId >= 0 && this._ref.el.hasPointerCapture?.(this.pointerId)) {
-            this._ref.el.releasePointerCapture(this.pointerId);
-        }
+        this.releaseCapture();
+        this.removeDocKeydown?.();
+        this.removeDocKeydown = undefined;
         this.dragging.set(false);
         this.down = false;
         this.scroller.stop();
@@ -2636,10 +2911,20 @@ class NgxDraggable {
         this.removeMove = this.removeUp = this.removeEscape = undefined;
         this.removeCancel = this.removeLostCapture = undefined;
     }
+    /** Keys already processed (the host listener and the document listener may both see one). */
+    handledKeys = new WeakSet();
     /** Arrow-key movement for keyboard/assistive-tech users. Shift multiplies the step by 4. */
     keyDown(e) {
-        if (this.disabled())
+        if (this.disabled() || this.handledKeys.has(e))
+            return;
+        // Only the draggable ITSELF being focused means "move me". Arrow keys typed into an input,
+        // a textarea or a contenteditable region inside the block belong to that control (caret
+        // movement), and must never start a drag or be swallowed.
+        if (e.target !== this.host.nativeElement && e.target !== this._ref.el && !this.dragging())
             return;
+        if (this.dragging() && isEditableTarget(e.target))
+            return;
+        this.handledKeys.add(e);
         const step = this.keyboardStep() * (e.shiftKey ? 4 : 1);
         const deltas = {
             ArrowLeft: { x: -step, y: 0 },
@@ -2665,6 +2950,7 @@ class NgxDraggable {
                 this.dragging.set(true);
                 this.service.begin(this._ref);
                 this.startScrollTracking();
+                this.beginKeyboardSession();
                 this.dragStart.emit(origin);
             }
             this._ref.nudge(delta.x, delta.y);
@@ -2677,26 +2963,62 @@ class NgxDraggable {
             this.service.end(this._ref);
             this.dragEnd.emit(this._ref.pointer);
             this.finish();
+            this.restoreFocus();
         }
         else if (e.key === 'Escape' && this.dragging()) {
             e.preventDefault();
             this._ref.cancelDrag();
             this.service.end(this._ref);
             this.finish();
+            this.restoreFocus();
         }
     }
+    /**
+     * A list item is `display:none` while it is being moved, so the browser drops its focus and
+     * the following arrow/Enter/Escape presses would go to <body>. Listen on the document for the
+     * duration of a keyboard drag so the gesture keeps working.
+     */
+    beginKeyboardSession() {
+        this.keyboardDrag = true;
+        this.removeDocKeydown?.();
+        this.removeDocKeydown = this.renderer.listen(this._ref.el.ownerDocument, 'keydown', (ev) => this.keyDown(ev));
+    }
+    restoreFocus() {
+        this.removeDocKeydown?.();
+        this.removeDocKeydown = undefined;
+        if (this.keyboardDrag) {
+            this.keyboardDrag = false;
+            this._ref.el.focus?.({ preventScroll: true });
+        }
+    }
+    /** Swallow the single `click` the browser dispatches right after a completed drag. */
+    swallowNextClick() {
+        const doc = this._ref.el.ownerDocument;
+        const stop = (ev) => {
+            ev.stopPropagation();
+            ev.preventDefault();
+        };
+        doc.addEventListener('click', stop, { capture: true, once: true });
+        // If no click follows (pointer released elsewhere), do not eat the user's NEXT real click.
+        doc.defaultView?.setTimeout(() => doc.removeEventListener('click', stop, { capture: true }), 0);
+    }
     isOnHandle(target) {
         if (!this.dragHandle())
             return true;
         // TODO notsafe instanseof: node.nodeType === Node.ELEMENT_NODE
         return isElementTarget(target) && !!target.closest(this.dragHandle());
     }
-    isInteractive(target) {
-        // TODO notsafe instanseof: node.nodeType === Node.ELEMENT_NODE
-        return (isElementTarget(target) && !!target.closest('button,a,input,textarea,select,[data-no-drag]'));
+    /** Should a press on `target` be left alone (no drag)? */
+    isExcluded(target) {
+        if (!isElementTarget(target))
+            return false;
+        const selector = this.noDragSelector();
+        if (selector && target.closest(selector))
+            return true;
+        return this.ignoreInteractive() && isEditableOrInteractive(target);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NgxDraggable, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.4", type: NgxDraggable, isStandalone: true, selector: "[NgxDraggable],[ngxDraggable]", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, boundary: { classPropertyName: "boundary", publicName: "boundary", isSignal: true, isRequired: false, transformFunction: null }, dragRootElement: { classPropertyName: "dragRootElement", publicName: "dragRootElement", isSignal: true, isRequired: false, transformFunction: null }, dragHandle: { classPropertyName: "dragHandle", publicName: "dragHandle", isSignal: true, isRequired: false, transformFunction: null }, lockAxis: { classPropertyName: "lockAxis", publicName: "lockAxis", isSignal: true, isRequired: false, transformFunction: null }, dragThreshold: { classPropertyName: "dragThreshold", publicName: "dragThreshold", isSignal: true, isRequired: false, transformFunction: null }, keyboardStep: { classPropertyName: "keyboardStep", publicName: "keyboardStep", isSignal: true, isRequired: false, transformFunction: null }, autoScroll: { classPropertyName: "autoScroll", publicName: "autoScroll", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { disabled: "disabledChange", dragRootElement: "dragRootElementChange", dragHandle: "dragHandleChange", dragStart: "dragStart", dragMove: "dragMove", dragEnd: "dragEnd" }, host: { properties: { "style.touch-action": "\"none\"", "attr.tabindex": "disabled() ? null : 0", "attr.aria-grabbed": "dragging()", "class.disable-drag": "disabled()" }, classAttribute: "ngx-draggable" }, providers: [{ provide: NGX_DRAGGABLE, useExisting: NgxDraggable }], queries: [{ propertyName: "customPreview", first: true, predicate: NgxDragPreview, descendants: true }], ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.4", type: NgxDraggable, isStandalone: true, selector: "[NgxDraggable],[ngxDraggable]", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, boundary: { classPropertyName: "boundary", publicName: "boundary", isSignal: true, isRequired: false, transformFunction: null }, dragRootElement: { classPropertyName: "dragRootElement", publicName: "dragRootElement", isSignal: true, isRequired: false, transformFunction: null }, dragHandle: { classPropertyName: "dragHandle", publicName: "dragHandle", isSignal: true, isRequired: false, transformFunction: null }, lockAxis: { classPropertyName: "lockAxis", publicName: "lockAxis", isSignal: true, isRequired: false, transformFunction: null }, dragThreshold: { classPropertyName: "dragThreshold", publicName: "dragThreshold", isSignal: true, isRequired: false, transformFunction: null }, keyboardStep: { classPropertyName: "keyboardStep", publicName: "keyboardStep", isSignal: true, isRequired: false, transformFunction: null }, autoScroll: { classPropertyName: "autoScroll", publicName: "autoScroll", isSignal: true, isRequired: false, transformFunction: null }, noDragSelector: { classPropertyName: "noDragSelector", publicName: "noDragSelector", isSignal: true, isRequired: false, transformFunction: null }, ignoreInteractive: { classPropertyName: "ignoreInteractive", publicName: "ignoreInteractive", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { disabled: "disabledChange", dragRootElement: "dragRootElementChange", dragHandle: "dragHandleChange", dragStart: "dragStart", dragMove: "dragMove", dragEnd: "dragEnd" }, host: { properties: { "style.touch-action": "\"none\"", "attr.tabindex": "disabled() ? null : 0", "attr.aria-grabbed": "dragging()", "class.disable-drag": "disabled()" }, classAttribute: "ngx-draggable" }, providers: [{ provide: NGX_DRAGGABLE, useExisting: NgxDraggable }], queries: [{ propertyName: "customPreview", first: true, predicate: NgxDragPreview, descendants: true }], ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NgxDraggable, decorators: [{
             type: Directive,
@@ -2711,13 +3033,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
                         '[class.disable-drag]': 'disabled()',
                     },
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], boundary: [{ type: i0.Input, args: [{ isSignal: true, alias: "boundary", required: false }] }], dragRootElement: [{ type: i0.Input, args: [{ isSignal: true, alias: "dragRootElement", required: false }] }, { type: i0.Output, args: ["dragRootElementChange"] }], dragHandle: [{ type: i0.Input, args: [{ isSignal: true, alias: "dragHandle", required: false }] }, { type: i0.Output, args: ["dragHandleChange"] }], lockAxis: [{ type: i0.Input, args: [{ isSignal: true, alias: "lockAxis", required: false }] }], dragThreshold: [{ type: i0.Input, args: [{ isSignal: true, alias: "dragThreshold", required: false }] }], keyboardStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "keyboardStep", required: false }] }], autoScroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoScroll", required: false }] }], data: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], boundary: [{ type: i0.Input, args: [{ isSignal: true, alias: "boundary", required: false }] }], dragRootElement: [{ type: i0.Input, args: [{ isSignal: true, alias: "dragRootElement", required: false }] }, { type: i0.Output, args: ["dragRootElementChange"] }], dragHandle: [{ type: i0.Input, args: [{ isSignal: true, alias: "dragHandle", required: false }] }, { type: i0.Output, args: ["dragHandleChange"] }], lockAxis: [{ type: i0.Input, args: [{ isSignal: true, alias: "lockAxis", required: false }] }], dragThreshold: [{ type: i0.Input, args: [{ isSignal: true, alias: "dragThreshold", required: false }] }], keyboardStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "keyboardStep", required: false }] }], autoScroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoScroll", required: false }] }], noDragSelector: [{ type: i0.Input, args: [{ isSignal: true, alias: "noDragSelector", required: false }] }], ignoreInteractive: [{ type: i0.Input, args: [{ isSignal: true, alias: "ignoreInteractive", required: false }] }], data: [{
                 type: Input,
                 args: ['data']
             }], customPreview: [{
                 type: ContentChild,
                 args: [NgxDragPreview]
             }], dragStart: [{ type: i0.Output, args: ["dragStart"] }], dragMove: [{ type: i0.Output, args: ["dragMove"] }], dragEnd: [{ type: i0.Output, args: ["dragEnd"] }] } });
+function isEditableOrInteractive(el) {
+    return !!el.closest('button,a[href],input,textarea,select,[contenteditable]:not([contenteditable="false"])');
+}
+function isEditableTarget(target) {
+    if (!isElementTarget(target))
+        return false;
+    return !!target.closest('input,textarea,select,[contenteditable]:not([contenteditable="false"])');
+}
 function isElementTarget(target) {
     return (!!target &&
         typeof target === 'object' &&
@@ -2816,7 +3146,12 @@ class NgxResizable {
         this.beforeTransform = element.style.transform;
         this.resizing.set(true);
         element.style.transition = 'none';
-        element.setPointerCapture?.(e.pointerId);
+        try {
+            element.setPointerCapture?.(e.pointerId);
+        }
+        catch {
+            /* synthetic / already-ended pointer: document listeners below still receive the events */
+        }
         const doc = element.ownerDocument;
         this.removeDocumentListeners = [
             this.renderer.listen(doc, 'pointermove', (event) => this.onPointerMove(event)),
@@ -2873,6 +3208,11 @@ class NgxResizable {
         if (this.disabled()) {
             return;
         }
+        // Only when the resizable element itself is focused: arrow keys pressed inside an input /
+        // contenteditable that lives in the block are caret movement, not a resize request.
+        if (e.target !== this.el.nativeElement) {
+            return;
+        }
         const rtl = isRtl(this.el.nativeElement);
         const step = this.keyboardStep() * (e.shiftKey ? 4 : 1);
         let dw = 0;
@@ -2896,8 +3236,9 @@ class NgxResizable {
         const rect = this.el.nativeElement.getBoundingClientRect();
         const width = this.clampGrid(Math.max(this.minWidth(), Math.min(this.maxWidth(), this.el.nativeElement.offsetWidth + dw)), 'x');
         const height = this.clampGrid(Math.max(this.minHeight(), Math.min(this.maxHeight(), this.el.nativeElement.offsetHeight + dh)), 'y');
-        this.el.nativeElement.style.width = `${width}px`;
-        this.el.nativeElement.style.height = `${height}px`;
+        const styled = this.toStyleSize(width, height);
+        this.el.nativeElement.style.width = `${styled.width}px`;
+        this.el.nativeElement.style.height = `${styled.height}px`;
         const out = {
             width,
             height,
@@ -2967,8 +3308,9 @@ class NgxResizable {
         /**
          * Boundary constraint.
          */
-        if (this.boundary) {
-            const clamped = clampResizeWithinBoundary(this.boundary()?.getBoundingClientRect(), this.start, width * scaleX, height * scaleY, moveLeft, moveTop);
+        const boundaryEl = this.boundary();
+        if (boundaryEl) {
+            const clamped = clampResizeWithinBoundary(boundaryEl.getBoundingClientRect(), this.start, width * scaleX, height * scaleY, moveLeft, moveTop);
             width = clamped.width / scaleX;
             height = clamped.height / scaleY;
             moveLeft = clamped.left;
@@ -3001,8 +3343,9 @@ class NgxResizable {
          * 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`;
+        const style = this.toStyleSize(out.width, out.height);
+        element.style.width = `${style.width}px`;
+        element.style.height = `${style.height}px`;
         /**
          * Force/read layout after changing the size.
          */
@@ -3037,9 +3380,29 @@ class NgxResizable {
         element.style.transform =
             `${baseTransform}translate3d(` + `${localCorrection.x}px, ` + `${localCorrection.y}px, 0)`;
     }
+    /**
+     * `offsetWidth/Height` (what we measure and report) are BORDER-box sizes. The inline
+     * `width/height` we write are interpreted according to `box-sizing`: for the CSS default
+     * (`content-box`) writing the border-box number would make a padded/bordered block jump by
+     * its padding+border the instant a resize starts. Convert so the box is exactly the size
+     * reported in `IResizableOutput`.
+     */
+    toStyleSize(width, height) {
+        const el = this.el.nativeElement;
+        const cs = el.ownerDocument.defaultView?.getComputedStyle(el);
+        if (!cs || cs.boxSizing === 'border-box')
+            return { width, height };
+        const px = (v) => Number.parseFloat(v) || 0;
+        const extraX = px(cs.paddingLeft) + px(cs.paddingRight) + px(cs.borderLeftWidth) + px(cs.borderRightWidth);
+        const extraY = px(cs.paddingTop) + px(cs.paddingBottom) + px(cs.borderTopWidth) + px(cs.borderBottomWidth);
+        return { width: Math.max(0, width - extraX), height: Math.max(0, height - extraY) };
+    }
     clampGrid(value, axis) {
-        const grid = typeof this.grid() === 'number' ? this.grid : this.grid()?.[axis];
-        if (!grid || grid <= 0) {
+        const g = this.grid();
+        // NOTE: the previous code returned the input *signal function* for a numeric grid, so every
+        // snapped size became NaN and the resize silently stopped working.
+        const grid = typeof g === 'number' ? g : g?.[axis];
+        if (!grid || !Number.isFinite(grid) || grid <= 0) {
             return value;
         }
         return Math.round(value / grid) * grid;
@@ -3052,8 +3415,13 @@ class NgxResizable {
         for (const remove of this.removeDocumentListeners)
             remove();
         this.removeDocumentListeners = [];
-        if (pointerId >= 0 && this.el.nativeElement.hasPointerCapture?.(pointerId)) {
-            this.el.nativeElement.releasePointerCapture(pointerId);
+        try {
+            if (pointerId >= 0 && this.el.nativeElement.hasPointerCapture?.(pointerId)) {
+                this.el.nativeElement.releasePointerCapture(pointerId);
+            }
+        }
+        catch {
+            /* already released */
         }
         this.beforeTransform = '';
     }
@@ -3194,6 +3562,13 @@ class NgxDropList {
     set disableSort(value) {
         this._ref.disableSort = value === true;
     }
+    /** `'stretch'`: the placeholder only copies the item's size along the list's main axis. */
+    set placeholderFit(value) {
+        this._ref.placeholderFit = value === 'stretch' ? 'stretch' : 'item';
+    }
+    set sortAnimationDuration(value) {
+        this._ref.sortAnimationDuration = value == null ? 200 : Math.max(0, value);
+    }
     drop = new EventEmitter();
     customPlaceholder;
     sub;
@@ -3225,7 +3600,7 @@ class NgxDropList {
         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 }], queries: [{ propertyName: "customPlaceholder", first: true, predicate: NgxPlaceholder, descendants: true }], ngImport: i0 });
+    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", placeholderFit: "placeholderFit", sortAnimationDuration: "sortAnimationDuration" }, outputs: { drop: "drop" }, host: { classAttribute: "ngx-drop-list" }, providers: [{ provide: NGX_DROPLIST, useExisting: NgxDropList }], queries: [{ propertyName: "customPlaceholder", first: true, predicate: NgxPlaceholder, descendants: true }], ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NgxDropList, decorators: [{
             type: Directive,
@@ -3241,6 +3616,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
                 type: Input
             }], disableSort: [{
                 type: Input
+            }], placeholderFit: [{
+                type: Input
+            }], sortAnimationDuration: [{
+                type: Input
             }], drop: [{
                 type: Output
             }], customPlaceholder: [{
@@ -3313,9 +3692,54 @@ function clamp(v, max) {
     return Math.max(0, Math.min(max, v));
 }
 
+/**
+ * Helpers for a page builder's "export HTML" step.
+ *
+ * While you edit, the directives decorate the canvas DOM: `ngx-*` classes, `tabindex="0"`,
+ * `aria-grabbed`, `touch-action: none`, and — if an export happens mid-drag — a placeholder or a
+ * preview clone. None of that belongs in the page a visitor receives. Run the canvas through
+ * `getCleanHtml()` (or `stripEditorArtifacts()` on a clone you already have) before saving.
+ */
+const TRANSIENT_NODES = '.ngx-drag-placeholder, .ngx-drag-preview';
+/** Mutates `root` (and its subtree) in place. Pass a CLONE of live DOM, never the live canvas. */
+function stripEditorArtifacts(root, options = {}) {
+    const prefix = options.classPrefix ?? 'ngx-';
+    const dropClasses = new Set(['disable-drag', ...(options.extraClasses ?? [])]);
+    const dropAttrs = ['aria-grabbed', ...(options.extraAttributes ?? [])];
+    root.querySelectorAll(TRANSIENT_NODES).forEach((n) => n.remove());
+    const all = [root, ...Array.from(root.querySelectorAll('*'))];
+    for (const el of all) {
+        // `tabindex="0"` is only ours on draggables (a real focusable of the page keeps its own).
+        if (el.classList.contains('ngx-draggable') && el.getAttribute('tabindex') === '0') {
+            el.removeAttribute('tabindex');
+        }
+        for (const attr of dropAttrs)
+            el.removeAttribute(attr);
+        for (const cls of Array.from(el.classList)) {
+            if (cls.startsWith(prefix) || dropClasses.has(cls))
+                el.classList.remove(cls);
+        }
+        if (!el.classList.length)
+            el.removeAttribute('class');
+        const style = el.style;
+        if (style) {
+            if (style.touchAction === 'none')
+                style.removeProperty('touch-action');
+            if (!el.getAttribute('style')?.trim())
+                el.removeAttribute('style');
+        }
+    }
+}
+/** Serialised, editor-free HTML of `el`'s children (the canvas content). */
+function getCleanHtml(el, options) {
+    const clone = el.cloneNode(true);
+    stripEditorArtifacts(clone, options);
+    return clone.innerHTML;
+}
+
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { AutoScroller, DragDropService, DragRef, DropListGroupRef, DropListRef, NGX_DRAGGABLE, NGX_DRAG_PREVIEW, NGX_DROPLIST, NGX_DROPLIST_GROUP, NGX_PLACEHOLDER, NgxDragPreview, NgxDraggable, NgxDropList, NgxDropListGroup, NgxPlaceholder, NgxResizable, PlaceHolderRef, adjustForZoom, checkBoundX, checkBoundY, clampResizeWithinBoundary, copyArrayItem, findScrollableAncestor, getPageZoom, getScrollPosition, isRtl, moveItemInArray, resolveLogicalDirection, transferArrayItem };
+export { AutoScroller, DragDropService, DragRef, DropListGroupRef, DropListRef, NGX_DRAGGABLE, NGX_DRAG_PREVIEW, NGX_DROPLIST, NGX_DROPLIST_GROUP, NGX_PLACEHOLDER, NgxDragPreview, NgxDraggable, NgxDropList, NgxDropListGroup, NgxPlaceholder, NgxResizable, PlaceHolderRef, adjustForZoom, checkBoundX, checkBoundY, clampResizeWithinBoundary, copyArrayItem, findScrollableAncestor, getCleanHtml, getPageZoom, getScrollPosition, isRtl, moveItemInArray, resolveLogicalDirection, stripEditorArtifacts, transferArrayItem };
 //# sourceMappingURL=ngx-kit-drag-resize.mjs.map