ngx-kit 6.3.0 → 7.0.1

package/fesm2022/ngx-kit-grid-layout.mjs

@@ -0,0 +1,994 @@
+import * as i0 from '@angular/core';
+import { signal, computed, effect, Injectable, input, output, inject, ElementRef, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
+import * as i1 from 'ngx-kit/drag-resize';
+import { isRtl, NgxDraggable, NgxResizable } from 'ngx-kit/drag-resize';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+
+class GridLayoutOptions {
+    cols = 12;
+    rowHeight = 50;
+    gap = 8;
+    padding = 0;
+    flow = 'free';
+    compact = 'vertical';
+    allowOverlap = false;
+    pushItems = true;
+    swap = false;
+    dragThreshold = 3;
+    animate = true;
+    rtl = 'auto';
+    maxRows;
+    gridBackgroundConfig = {
+        show: 'always',
+        borderColor: 'rgba(128,128,128,.16)',
+        gapColor: 'transparent',
+        rowColor: 'rgba(128,128,128,.07)',
+        columnColor: 'rgba(128,128,128,.07)',
+        borderWidth: 1,
+    };
+}
+
+class GridItemConfig {
+    x;
+    y;
+    w;
+    h;
+    minW;
+    minH;
+    maxW;
+    maxH;
+    /** Item can't be dragged or resized, and never moves during compaction/push. */
+    static;
+    /** Overrides the layout-level draggable/resizable flags for this item only. */
+    isDraggable;
+    isResizable;
+    constructor(x = 0, y = 0, w = 1, h = 1, s) {
+        this.x = x;
+        this.y = y;
+        this.w = w;
+        this.h = h;
+        this.static = s == true;
+    }
+}
+const normalizeGridItem = (value) => ({
+    x: Math.max(0, Math.floor(value?.x ?? 0)),
+    y: Math.max(0, Math.floor(value?.y ?? 0)),
+    w: Math.max(1, Math.floor(value?.w ?? 1)),
+    h: Math.max(1, Math.floor(value?.h ?? 1)),
+    minW: value?.minW,
+    minH: value?.minH,
+    maxW: value?.maxW,
+    maxH: value?.maxH,
+    static: value?.static ?? false,
+    isDraggable: value?.isDraggable,
+    isResizable: value?.isResizable,
+});
+/**
+ * Value equality for two (already-normalized) configs.
+ *
+ * This is what breaks the register -> settle -> new-object -> re-register
+ * feedback loop: signals compare by *reference*, so anything that recomputes
+ * a fresh config object on every change-detection pass (a `computed()` layout,
+ * an inline object literal in a template, etc.) will always look "changed" to
+ * an `effect()` even when nothing meaningful did. Callers must compare by
+ * value before writing back to a signal, otherwise the write itself produces
+ * a new reference that trips the same effect again — forever.
+ */
+function gridItemConfigsEqual(a, b) {
+    return (a.x === b.x &&
+        a.y === b.y &&
+        a.w === b.w &&
+        a.h === b.h &&
+        (a.minW ?? null) === (b.minW ?? null) &&
+        (a.minH ?? null) === (b.minH ?? null) &&
+        (a.maxW ?? null) === (b.maxW ?? null) &&
+        (a.maxH ?? null) === (b.maxH ?? null) &&
+        !!a.static === !!b.static &&
+        (a.isDraggable ?? null) === (b.isDraggable ?? null) &&
+        (a.isResizable ?? null) === (b.isResizable ?? null));
+}
+
+/** Axis-aligned bounding-box overlap test in grid-cell space. */
+function collides(a, b) {
+    return a.x < b.x + b.w && a.x + a.w > b.x && a.y < b.y + b.h && a.y + a.h > b.y;
+}
+/** First item (other than `self`) whose cells overlap `config`, or null. */
+function getFirstCollision(items, selfId, config) {
+    for (const item of items) {
+        if (item.id === selfId)
+            continue;
+        if (collides(item.config, config))
+            return item;
+    }
+    return null;
+}
+/** All items whose cells overlap `config`, excluding `selfId`. */
+function getAllCollisions(items, selfId, config) {
+    return items.filter((item) => item.id !== selfId && collides(item.config, config));
+}
+
+function isStatic(node) {
+    return !!node.config.static;
+}
+function clampToCols(config, cols) {
+    config.w = Math.min(Math.max(1, config.w), cols);
+    config.x = Math.max(0, Math.min(config.x, cols - config.w));
+    config.y = Math.max(0, config.y);
+}
+function clone(items) {
+    return items.map((i) => ({ ...i, config: { ...i.config } }));
+}
+/**
+ * Moves `id` to grid cell (x, y) and, unless overlap is explicitly allowed,
+ * cascades any resulting collisions by pushing the colliding items out of the
+ * way (downward for vertical-flow grids, rightward for horizontal-flow ones).
+ * Static items are treated as fixed obstacles: they block, but never move.
+ * Pure function — returns a new array, never mutates its input.
+ */
+function moveItem(items, id, x, y, opts, depth = 0) {
+    let arr = clone(items);
+    const item = arr.find((i) => i.id === id);
+    if (!item || isStatic(item))
+        return arr;
+    item.config.x = x;
+    item.config.y = y;
+    clampToCols(item.config, opts.cols);
+    if (opts.allowOverlap || depth > arr.length + 24)
+        return arr;
+    const compareFn = compareForCompaction(opts.compact);
+    let guard = 0;
+    while (guard++ < arr.length + 24) {
+        const mover = arr.find((i) => i.id === id);
+        const staticBlocker = arr.find((i) => i.id !== id && isStatic(i) && collides(mover.config, i.config));
+        if (staticBlocker) {
+            if (opts.compact === 'horizontal') {
+                mover.config.x = staticBlocker.config.x + staticBlocker.config.w;
+            }
+            else {
+                mover.config.y = staticBlocker.config.y + staticBlocker.config.h;
+            }
+            clampToCols(mover.config, opts.cols);
+            continue; // the new position may collide with something else — re-check from the top.
+        }
+        const blockers = arr
+            .filter((i) => i.id !== id && !isStatic(i) && collides(mover.config, i.config))
+            .sort(compareFn);
+        if (blockers.length === 0)
+            break;
+        arr = pushAway(arr, mover, blockers[0], opts, depth + 1);
+    }
+    return arr;
+}
+function pushAway(items, mover, blocked, opts, depth) {
+    const targetX = opts.compact === 'horizontal' ? mover.config.x + mover.config.w : blocked.config.x;
+    const targetY = opts.compact === 'horizontal' ? blocked.config.y : mover.config.y + mover.config.h;
+    return moveItem(items, blocked.id, targetX, targetY, opts, depth);
+}
+function compareForCompaction(mode) {
+    return (a, b) => mode === 'horizontal'
+        ? a.config.x - b.config.x || a.config.y - b.config.y
+        : a.config.y - b.config.y || a.config.x - b.config.x;
+}
+/**
+ * When the actively-moved item directly overlaps exactly one same-size item,
+ * exchanging their positions reads much better than a cascading push. The
+ * caller (service) decides when to offer this vs. falling back to `moveItem`.
+ */
+function trySwap(items, id, previous, next) {
+    if (items.some((i) => i.id !== id && isStatic(i) && collides(i.config, next)))
+        return null;
+    const collisions = items.filter((i) => i.id !== id && !isStatic(i) && collides(i.config, next));
+    if (collisions.length !== 1)
+        return null;
+    const [target] = collisions;
+    if (target.config.w !== next.w || target.config.h !== next.h)
+        return null;
+    const arr = clone(items);
+    const mover = arr.find((i) => i.id === id);
+    const other = arr.find((i) => i.id === target.id);
+    mover.config.x = next.x;
+    mover.config.y = next.y;
+    other.config.x = previous.x;
+    other.config.y = previous.y;
+    return arr;
+}
+/**
+ * Removes gaps by pulling every non-static item as far toward the start of the
+ * grid as it can go without overlapping another item, in reading order.
+ */
+function compact(items, mode) {
+    const arr = clone(items);
+    if (mode === 'none')
+        return arr;
+    const canX = mode === 'horizontal' || mode === 'both';
+    const canY = mode === 'vertical' || mode === 'both';
+    const sorted = [...arr].sort((a, b) => a.config.y - b.config.y || a.config.x - b.config.x);
+    for (const item of sorted) {
+        if (isStatic(item))
+            continue;
+        if (canY) {
+            let y = item.config.y;
+            while (y > 0 && !getFirstCollision(arr, item.id, { ...item.config, y: y - 1 }))
+                y--;
+            item.config.y = y;
+        }
+        if (canX) {
+            let x = item.config.x;
+            while (x > 0 && !getFirstCollision(arr, item.id, { ...item.config, x: x - 1 }))
+                x--;
+            item.config.x = x;
+        }
+    }
+    return arr;
+}
+/** Highest occupied row (0-based, exclusive) across all items — drives the grid's auto-height. */
+function maxOccupiedRow(items) {
+    return items.reduce((max, i) => Math.max(max, i.config.y + i.config.h), 0);
+}
+/**
+ * Finds a cell for `config` that doesn't collide with any existing item.
+ * Tries the requested (x, y) first; if that's already occupied, scans
+ * forward in reading order (row by row, top to bottom, left to right — the
+ * caller is responsible for any RTL flipping when it turns this back into
+ * pixels) for the first gap large enough to fit it.
+ *
+ * This is what a newly-registered item (or one whose config changes to a
+ * position that's no longer free) should go through instead of silently
+ * overlapping whatever's already there: unlike a drag/resize, registering an
+ * item isn't a deliberate "make room for me" gesture, so relocating the new
+ * item to open space reads far better than shoving already-placed items
+ * around to accommodate it.
+ */
+function findFreeSpot(items, config, cols, excludeId) {
+    const others = excludeId ? items.filter((i) => i.id !== excludeId) : items;
+    const fits = (x, y) => !others.some((i) => collides(i.config, { ...config, x, y }));
+    const startX = Math.max(0, Math.min(config.x, cols - config.w));
+    const startY = Math.max(0, config.y);
+    if (fits(startX, startY))
+        return { x: startX, y: startY };
+    // The row just past the current bottom is always fully empty, so this loop
+    // is guaranteed to find a fit no later than `maxY`.
+    const maxY = maxOccupiedRow(others) + 1;
+    for (let y = 0; y <= maxY; y++) {
+        for (let x = 0; x <= cols - config.w; x++) {
+            if (fits(x, y))
+                return { x, y };
+        }
+    }
+    return { x: startX, y: maxY + 1 };
+}
+
+function computeMetrics(containerWidth, options) {
+    const cols = Math.max(1, Math.floor(options.cols));
+    const gap = options.gap ?? 0;
+    const padding = options.padding ?? 0;
+    const contentWidth = Math.max(0, containerWidth - padding * 2);
+    const colWidth = Math.max(1, (contentWidth - gap * (cols - 1)) / cols);
+    const rowHeight = options.rowHeight === 'fit' ? Math.max(1, colWidth) : Math.max(1, options.rowHeight);
+    return { contentWidth, colWidth, rowHeight, gap, padding };
+}
+/** Physical CSS `left` (px, relative to the grid surface's content box) for a logical column. */
+function colToLeft(colIndex, spanCols, m, rtl) {
+    if (!rtl)
+        return m.padding + colIndex * (m.colWidth + m.gap);
+    const widthPx = spanCols * m.colWidth + (spanCols - 1) * m.gap;
+    const rightEdge = m.padding + colIndex * (m.colWidth + m.gap);
+    return m.contentWidth + m.padding - rightEdge - widthPx;
+}
+function rowToTop(rowIndex, m) {
+    return m.padding + rowIndex * (m.rowHeight + m.gap);
+}
+function spanToWidthPx(spanCols, m) {
+    return spanCols * m.colWidth + Math.max(0, spanCols - 1) * m.gap;
+}
+function spanToHeightPx(spanRows, m) {
+    return spanRows * m.rowHeight + Math.max(0, spanRows - 1) * m.gap;
+}
+/** Physical left px (as above) -> nearest logical column index. Inverse of `colToLeft`. */
+function leftToCol(leftPx, spanCols, m, rtl) {
+    if (!rtl)
+        return Math.round((leftPx - m.padding) / (m.colWidth + m.gap));
+    const widthPx = spanCols * m.colWidth + (spanCols - 1) * m.gap;
+    const rightEdge = m.contentWidth + m.padding - leftPx - widthPx;
+    return Math.round((rightEdge - m.padding) / (m.colWidth + m.gap));
+}
+function topToRow(topPx, m) {
+    return Math.round((topPx - m.padding) / (m.rowHeight + m.gap));
+}
+/** Places an item's pixel box (left/top/width/height) inside the grid surface, RTL-aware. */
+function placeItem(config, m, rtl) {
+    return {
+        left: colToLeft(config.x, config.w, m, rtl),
+        top: rowToTop(config.y, m),
+        width: spanToWidthPx(config.w, m),
+        height: spanToHeightPx(config.h, m),
+    };
+}
+
+/** Structural + value equality for two item-state arrays (order-independent). */
+function itemsEqual(a, b) {
+    if (a.length !== b.length)
+        return false;
+    return a.every((itemA) => {
+        const itemB = b.find((x) => x.id === itemA.id);
+        return (!!itemB && itemA.element === itemB.element && gridItemConfigsEqual(itemA.config, itemB.config));
+    });
+}
+/** Value equality for two options objects — see `setOptions` for why this matters. */
+function optionsEqual(a, b) {
+    const bg1 = a.gridBackgroundConfig ?? {};
+    const bg2 = b.gridBackgroundConfig ?? {};
+    return (a.cols === b.cols &&
+        a.rowHeight === b.rowHeight &&
+        a.gap === b.gap &&
+        a.padding === b.padding &&
+        a.flow === b.flow &&
+        a.compact === b.compact &&
+        a.allowOverlap === b.allowOverlap &&
+        a.pushItems === b.pushItems &&
+        a.swap === b.swap &&
+        a.dragThreshold === b.dragThreshold &&
+        a.animate === b.animate &&
+        a.rtl === b.rtl &&
+        (a.maxRows ?? null) === (b.maxRows ?? null) &&
+        bg1.show === bg2.show &&
+        bg1.borderColor === bg2.borderColor &&
+        bg1.gapColor === bg2.gapColor &&
+        bg1.rowColor === bg2.rowColor &&
+        bg1.columnColor === bg2.columnColor &&
+        bg1.borderWidth === bg2.borderWidth);
+}
+class GridLayoutService {
+    options = signal(new GridLayoutOptions(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
+    items = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+    editMode = signal(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "editMode" }] : /* istanbul ignore next */ []));
+    activeId = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activeId" }] : /* istanbul ignore next */ []));
+    isInteracting = computed(() => this.activeId() !== null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isInteracting" }] : /* istanbul ignore next */ []));
+    height = computed(() => this.calculateHeight(this.items(), this.options()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "height" }] : /* istanbul ignore next */ []));
+    layout = computed(() => this.items().map((x) => ({ id: x.id, ...x.config })), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "layout" }] : /* istanbul ignore next */ []));
+    columns = computed(() => Math.max(1, Math.floor(this.options().cols)), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []));
+    rtl = computed(() => {
+        this.rtlTick();
+        return this.resolveRtl();
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rtl" }] : /* istanbul ignore next */ []));
+    rtlTick = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rtlTick" }] : /* istanbul ignore next */ []));
+    layoutListener;
+    startConfig = null;
+    startItems = null;
+    previewItems = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "previewItems" }] : /* istanbul ignore next */ []));
+    _element;
+    placeholder;
+    constructor() {
+        effect(() => {
+            // Re-run whenever options or items change so CSS positions always reflect state.
+            this.options();
+            this.items();
+            this.previewItems();
+            this.rtlTick();
+            if (this._element)
+                this.applyCss();
+        });
+    }
+    connect(onLayout) {
+        this.layoutListener = onLayout;
+    }
+    setOptions(value) {
+        const next = Object.assign(new GridLayoutOptions(), this.options(), value);
+        if (optionsEqual(this.options(), next))
+            return;
+        this.options.set(next);
+    }
+    setEditMode(value) {
+        this.editMode.set(value);
+    }
+    setItems(items) {
+        this.items.set(items.map((x) => ({ ...x, config: normalizeGridItem(x.config) })));
+        this.settle();
+        this.emit();
+    }
+    registerItem(item) {
+        const existing = this.items().find((x) => x.id === item.id);
+        if (!existing) {
+            const normalized = normalizeGridItem(item.config);
+            const placed = this.options().allowOverlap
+                ? normalized
+                : { ...normalized, ...findFreeSpot(this.items(), normalized, this.columns()) };
+            this.items.update((xs) => [...xs, { ...item, config: placed }]);
+            this.settle();
+            return;
+        }
+        if (existing.element === item.element)
+            return;
+        this.items.update((xs) => xs.map((x) => (x.id === item.id ? { ...x, element: item.element } : x)));
+    }
+    updateItemConfig(id, config) {
+        const existing = this.items().find((x) => x.id === id);
+        if (!existing)
+            return;
+        const normalized = normalizeGridItem(config);
+        const placed = this.options().allowOverlap
+            ? normalized
+            : { ...normalized, ...findFreeSpot(this.items(), normalized, this.columns(), id) };
+        if (gridItemConfigsEqual(existing.config, placed))
+            return;
+        this.items.update((xs) => xs.map((x) => (x.id === id ? { ...x, config: placed } : x)));
+        this.settle();
+    }
+    unregisterItem(id) {
+        this.items.update((xs) => xs.filter((x) => x.id !== id));
+        this.settle();
+        this.emit();
+    }
+    /** Called once the grid surface element exists (e.g. from `ngAfterViewInit`). */
+    attachElement(el) {
+        this._element = el;
+        this.placeholder =
+            el.querySelector('.ngx-grid-layout__placeholder') ?? undefined;
+        if (this.placeholder) {
+            this.placeholder.style.position = 'absolute';
+            this.placeholder.style.display = 'none';
+            this.placeholder.style.pointerEvents = 'none';
+            this.placeholder.setAttribute('aria-hidden', 'true');
+        }
+        // `rtl` reads `this._element` directly (it isn't a signal), so bump a tick
+        // signal to force the `rtl` computed to re-evaluate now that the element,
+        // and therefore its computed `direction`, is known.
+        this.rtlTick.update((n) => n + 1);
+        this.applyCss();
+    }
+    /** Recomputes pixel positions after the surface resizes. Call from a `ResizeObserver`. */
+    refreshMetrics() {
+        this.applyCss();
+    }
+    isItemDraggable(item) {
+        return this.editMode() && !item.config.static && (item.config.isDraggable ?? true);
+    }
+    isItemResizable(item) {
+        return this.editMode() && !item.config.static && (item.config.isResizable ?? true);
+    }
+    // ---- Pointer-driven interaction (drag / resize) ----------------------------------
+    begin(id) {
+        const target = this.items().find((x) => x.id === id);
+        if (!target)
+            return;
+        this.startItems = this.items().map((x) => ({ ...x, config: { ...x.config } }));
+        this.startConfig = { ...target.config };
+        this.previewItems.set(null);
+        this.activeId.set(id);
+        this.applyCss();
+    }
+    move(id) {
+        const target = this.items().find((it) => it.id === id);
+        if (!target?.element)
+            return;
+        const next = this.screenToGrid(target);
+        this.preview(id, next);
+    }
+    resize(id, out) {
+        const target = this.items().find((x) => x.id === id);
+        if (!target?.element)
+            return;
+        const next = this.screenResizeToGrid(target, out);
+        this.preview(id, next);
+    }
+    end(id) {
+        if (this.activeId() !== id)
+            return;
+        const preview = this.previewItems();
+        if (preview) {
+            this.items.set(preview.map((x) => ({ ...x, config: { ...x.config } })));
+        }
+        const target = this.items().find((x) => x.id === id);
+        if (target?.element)
+            target.element.style.transform = '';
+        this.previewItems.set(null);
+        this.activeId.set(null);
+        this.startConfig = null;
+        this.startItems = null;
+        // Final normalization/compaction happens only after the preview is committed.
+        this.settle(id);
+        this.applyCss();
+        this.emit();
+    }
+    // ---- Keyboard-driven interaction (a11y) -------------------------------------------
+    /** Moves an item by whole grid cells — used by arrow-key handling in the item component. */
+    moveByCells(id, dCols, dRows) {
+        const target = this.items().find((x) => x.id === id);
+        if (!target)
+            return;
+        this.begin(id);
+        this.preview(id, { ...target.config, x: target.config.x + dCols, y: target.config.y + dRows });
+        this.end(id);
+    }
+    /** Resizes an item by whole grid cells — used by shift+arrow handling in the item component. */
+    resizeByCells(id, dCols, dRows) {
+        const target = this.items().find((x) => x.id === id);
+        if (!target)
+            return;
+        this.begin(id);
+        const w = this.clampSize(target.config.w + dCols, target.config.minW, target.config.maxW, this.columns());
+        const h = this.clampSize(target.config.h + dRows, target.config.minH, target.config.maxH, Infinity);
+        this.preview(id, { ...target.config, w, h });
+        this.end(id);
+    }
+    // ---- Internals ----------------------------------------------------------------------
+    preview(id, config) {
+        const base = this.startItems;
+        if (!base)
+            return;
+        const clamped = this.clamp(config);
+        const opt = this.options();
+        // The placeholder is the moving item during preview. The real DOM element
+        // remains under ngxDraggable's control and is never repositioned by the grid.
+        let candidate;
+        if (!opt.allowOverlap && opt.swap && this.startConfig) {
+            const swapped = trySwap(base, id, this.startConfig, clamped);
+            candidate =
+                swapped ??
+                    base.map((x) => x.id === id ? { ...x, config: { ...clamped } } : { ...x, config: { ...x.config } });
+        }
+        else {
+            candidate = base.map((x) => x.id === id ? { ...x, config: { ...clamped } } : { ...x, config: { ...x.config } });
+        }
+        if (!opt.allowOverlap && opt.pushItems) {
+            candidate = moveItem(candidate, id, clamped.x, clamped.y, {
+                cols: this.columns(),
+                compact: opt.compact === 'none' ? 'vertical' : opt.compact,
+                allowOverlap: false,
+                maxRows: opt.maxRows,
+            });
+        }
+        if (!opt.allowOverlap && opt.compact !== 'none') {
+            candidate = compact(candidate, opt.compact);
+        }
+        this.previewItems.set(candidate);
+        this.applyCss();
+    }
+    screenToGrid(item) {
+        const containerRect = this._element.getBoundingClientRect();
+        const r = item.element.getBoundingClientRect();
+        const m = this.metrics();
+        const rtl = this.rtl();
+        const leftPx = r.left - containerRect.left;
+        const topPx = r.top - containerRect.top;
+        const nx = leftToCol(leftPx, item.config.w, m, rtl);
+        const ny = topToRow(topPx, m);
+        return this.clamp({ ...item.config, x: nx, y: ny });
+    }
+    screenResizeToGrid(item, out) {
+        const m = this.metrics();
+        const gap = m.gap;
+        let w = Math.max(1, Math.round((out.width + gap) / (m.colWidth + gap)));
+        let h = Math.max(1, Math.round((out.height + gap) / (m.rowHeight + gap)));
+        let x = item.config.x;
+        let y = item.config.y;
+        // moveLeft/moveTop are physical (viewport) deltas from the resizable directive;
+        // moving the item's *start* edge left/up in physical space means, in RTL, that
+        // the logical column count grows from the *end* instead — handled by re-deriving
+        // x from the resulting physical box rather than from moveLeft directly.
+        if (this.rtl()) {
+            // 'w' handle grows width to the right physically but that's the grid's logical end;
+            // recompute x from the (possibly shifted) physical left edge captured via the element.
+            const r = item.element.getBoundingClientRect();
+            const containerRect = this._element.getBoundingClientRect();
+            const leftPx = r.left + out.moveLeft - containerRect.left;
+            x = leftToCol(leftPx, w, m, true);
+        }
+        else {
+            if (out.moveLeft)
+                x += Math.round(out.moveLeft / (m.colWidth + gap));
+        }
+        if (out.moveTop)
+            y += Math.round(out.moveTop / (m.rowHeight + gap));
+        return this.clamp({ ...item.config, x, y, w, h });
+    }
+    clamp(c) {
+        const cols = this.columns();
+        const next = { ...c };
+        next.w = this.clampSize(next.w, next.minW, next.maxW, cols);
+        next.h = this.clampSize(next.h, next.minH, next.maxH, this.options().maxRows ?? Infinity);
+        next.x = Math.max(0, Math.min(next.x, cols - next.w));
+        next.y = Math.max(0, next.y);
+        if (this.options().maxRows)
+            next.y = Math.min(next.y, Math.max(0, this.options().maxRows - next.h));
+        return next;
+    }
+    clampSize(size, min, max, hardMax) {
+        let v = Math.max(min ?? 1, size);
+        if (max)
+            v = Math.min(v, max);
+        return Math.min(v, hardMax);
+    }
+    /** Applies pushes on drag-end and, when configured, removes gaps via compaction. */
+    settle(activeId) {
+        const opt = this.options();
+        const before = this.items();
+        let arr = before.map((x) => ({ ...x, config: { ...x.config } }));
+        if (!opt.allowOverlap) {
+            if (activeId && opt.pushItems) {
+                arr = moveItem(arr, activeId, arr.find((x) => x.id === activeId).config.x, arr.find((x) => x.id === activeId).config.y, {
+                    cols: this.columns(),
+                    compact: opt.compact === 'none' ? 'vertical' : opt.compact,
+                    allowOverlap: false,
+                    maxRows: opt.maxRows,
+                });
+            }
+            if (opt.compact !== 'none')
+                arr = compact(arr, opt.compact);
+        }
+        // Compaction/push are deterministic pure functions: if they didn't change
+        // anything, keep the previous array reference instead of writing an
+        // equal-but-new one — that would otherwise ripple into every computed
+        // derived from `items` (layout, height, per-item `interactive`, ...) for
+        // no reason, and risks re-arming the same feedback loop described above.
+        if (itemsEqual(before, arr))
+            return;
+        this.items.set(arr);
+        this.applyCss();
+    }
+    applyCss() {
+        if (!this._element)
+            return;
+        const source = this.previewItems() ?? this.items();
+        const activeId = this.activeId();
+        const m = this.metrics();
+        const rtl = this.rtl();
+        for (const item of source) {
+            if (!item.element)
+                continue;
+            // While dragging/resizing, the real active element is moved by
+            // ngxDraggable/ngxResizable. Never fight those directives by writing
+            // left/top/width/height here.
+            if (item.id === activeId)
+                continue;
+            const box = placeItem(item.config, m, rtl);
+            const style = item.element.style;
+            style.position = 'absolute';
+            style.left = `${box.left}px`;
+            style.top = `${box.top}px`;
+            style.width = `${box.width}px`;
+            style.height = `${box.height}px`;
+            item.element.dataset['gridX'] = String(item.config.x);
+            item.element.dataset['gridY'] = String(item.config.y);
+            item.element.dataset['gridW'] = String(item.config.w);
+            item.element.dataset['gridH'] = String(item.config.h);
+        }
+        const placeholderItem = activeId ? source.find((x) => x.id === activeId) : undefined;
+        if (this.placeholder) {
+            if (placeholderItem && activeId) {
+                const box = placeItem(placeholderItem.config, m, rtl);
+                const style = this.placeholder.style;
+                style.display = 'block';
+                style.left = `${box.left}px`;
+                style.top = `${box.top}px`;
+                style.width = `${box.width}px`;
+                style.height = `${box.height}px`;
+                this.placeholder.dataset['gridX'] = String(placeholderItem.config.x);
+                this.placeholder.dataset['gridY'] = String(placeholderItem.config.y);
+                this.placeholder.dataset['gridW'] = String(placeholderItem.config.w);
+                this.placeholder.dataset['gridH'] = String(placeholderItem.config.h);
+            }
+            else {
+                this.placeholder.style.display = 'none';
+            }
+        }
+    }
+    metrics() {
+        const rect = this._element?.getBoundingClientRect() ?? { width: 0 };
+        return computeMetrics(rect.width, this.options());
+    }
+    resolveRtl() {
+        const opt = this.options().rtl;
+        if (opt === true || opt === false)
+            return opt;
+        return this._element ? isRtl(this._element) : false;
+    }
+    calculateHeight(items, o) {
+        const preview = this.previewItems();
+        const source = preview ?? items;
+        const rows = Math.max(1, maxOccupiedRow(source));
+        const m = this._element
+            ? this.metrics()
+            : {
+                rowHeight: o.rowHeight === 'fit' ? 100 : o.rowHeight,
+                gap: o.gap ?? 0,
+                padding: o.padding ?? 0,
+            };
+        return m.padding * 2 + rows * m.rowHeight + Math.max(0, rows - 1) * m.gap;
+    }
+    emit() {
+        this.layoutListener?.(this.layout());
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: GridLayoutService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: GridLayoutService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: GridLayoutService, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [] });
+
+class NgxGridLayoutComponent {
+    options = input(new GridLayoutOptions(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
+    editMode = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "editMode" }] : /* istanbul ignore next */ []));
+    layoutChange = output();
+    /** Explicit direction override. Leave unset to inherit the page/host direction automatically. */
+    dir = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dir" }] : /* istanbul ignore next */ []));
+    dirOverride = this.dir;
+    service = inject(GridLayoutService);
+    el = inject((ElementRef));
+    surface;
+    resizeObserver;
+    constructor() {
+        effect(() => {
+            const opts = { ...this.options() };
+            if (this.dir())
+                opts.rtl = this.dir() === 'rtl';
+            this.service.setOptions(opts);
+            this.service.setEditMode(this.editMode());
+        });
+        this.service.connect((layout) => this.layoutChange.emit(layout));
+    }
+    ngAfterViewInit() {
+        this.surface = this.el.nativeElement.querySelector('.ngx-grid-layout__surface');
+        this.service.attachElement(this.surface);
+        this.setCss();
+        this.resizeObserver = new ResizeObserver(() => {
+            this.service.refreshMetrics();
+            this.setCss();
+        });
+        this.resizeObserver.observe(this.surface);
+    }
+    ngOnDestroy() {
+        this.resizeObserver?.disconnect();
+    }
+    setItems(items) {
+        this.service.setItems(items);
+    }
+    update(options) {
+        this.service.setOptions(options);
+        this.setCss();
+    }
+    setCss() {
+        const el = this.el.nativeElement, o = this.service.options();
+        el.style.setProperty('--grid-cols', String(o.cols));
+        el.style.setProperty('--grid-gap', `${o.gap ?? 0}px`);
+        el.style.setProperty('--grid-row', `${o.rowHeight === 'fit' ? 100 : o.rowHeight}px`);
+        const b = o.gridBackgroundConfig;
+        el.style.setProperty('--grid-gap-color', `${b.gapColor}`);
+        el.style.setProperty('--grid-border-width', `${b?.borderWidth ?? 0}px`);
+        el.style.setProperty('--grid-border-color', b?.borderColor ?? 'transparent');
+        el.style.setProperty('--grid-row-color', b?.rowColor ?? 'transparent');
+        el.style.setProperty('--grid-col-color', b?.columnColor ?? 'transparent');
+        el.style.setProperty('--grid-bg-opacity', b?.show === 'never'
+            ? '0'
+            : b?.show === 'whenDragging'
+                ? this.service.isInteracting()
+                    ? '1'
+                    : '0'
+                : '1');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NgxGridLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: NgxGridLayoutComponent, isStandalone: true, selector: "ngx-grid-layout", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, editMode: { classPropertyName: "editMode", publicName: "editMode", isSignal: true, isRequired: false, transformFunction: null }, dir: { classPropertyName: "dir", publicName: "dir", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { layoutChange: "layoutChange" }, host: { properties: { "class.ngx-grid-layout--dragging": "service.isInteracting()", "class.ngx-grid-layout--view": "!editMode()", "style.height.px": "service.height()", "attr.dir": "dirOverride() ?? null" } }, ngImport: i0, template: `
+    <div class="ngx-grid-layout__surface" [class.edit-mode]="editMode()">
+      <div class="ngx-grid-layout__placeholder"></div>
+      <ng-content />
+    </div>
+  `, isInline: true, styles: [":host{display:block;position:relative;contain:layout style;min-height:1px}.ngx-grid-layout__surface{position:relative;width:100%;height:100%;min-height:inherit}.ngx-grid-layout__placeholder{display:none;position:absolute;box-sizing:border-box;pointer-events:none;z-index:0;border:2px dashed currentColor;border-radius:inherit;opacity:.45}.ngx-grid-layout__surface.edit-mode:before{content:\"\";position:absolute;inset:0;pointer-events:none;opacity:var(--grid-bg-opacity);border:var(--grid-border-width) solid var(--grid-border-color);box-sizing:border-box;transition:opacity .15s ease;background-image:repeating-linear-gradient(var(--grid-border-color) 0 var(--grid-border-width),var(--grid-row-color) var(--grid-border-width) calc(var(--grid-row) - var(--grid-border-width)),var(--grid-border-color) calc(var(--grid-row) - var(--grid-border-width)) calc(var(--grid-row)),var(--grid-gap-color) calc(var(--grid-row)) calc(var(--grid-row) + var(--grid-gap))),repeating-linear-gradient(90deg,var(--grid-border-color) 0 var(--grid-border-width),var(--grid-col-color) var(--grid-border-width) calc(100% - (var(--grid-border-width) + var(--grid-gap))),var(--grid-border-color) calc(100% - (var(--grid-border-width) + var(--grid-gap))) calc(100% - var(--grid-gap)),var(--grid-gap-color) calc(100% - var(--grid-gap)) 100%);background-size:calc((100% + var(--grid-gap)) / var(--grid-cols)) calc(var(--grid-row) + var(--grid-gap));background-position:0 0}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NgxGridLayoutComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngx-grid-layout', standalone: true, template: `
+    <div class="ngx-grid-layout__surface" [class.edit-mode]="editMode()">
+      <div class="ngx-grid-layout__placeholder"></div>
+      <ng-content />
+    </div>
+  `, host: {
+                        '[class.ngx-grid-layout--dragging]': 'service.isInteracting()',
+                        '[class.ngx-grid-layout--view]': '!editMode()',
+                        '[style.height.px]': 'service.height()',
+                        '[attr.dir]': 'dirOverride() ?? null',
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block;position:relative;contain:layout style;min-height:1px}.ngx-grid-layout__surface{position:relative;width:100%;height:100%;min-height:inherit}.ngx-grid-layout__placeholder{display:none;position:absolute;box-sizing:border-box;pointer-events:none;z-index:0;border:2px dashed currentColor;border-radius:inherit;opacity:.45}.ngx-grid-layout__surface.edit-mode:before{content:\"\";position:absolute;inset:0;pointer-events:none;opacity:var(--grid-bg-opacity);border:var(--grid-border-width) solid var(--grid-border-color);box-sizing:border-box;transition:opacity .15s ease;background-image:repeating-linear-gradient(var(--grid-border-color) 0 var(--grid-border-width),var(--grid-row-color) var(--grid-border-width) calc(var(--grid-row) - var(--grid-border-width)),var(--grid-border-color) calc(var(--grid-row) - var(--grid-border-width)) calc(var(--grid-row)),var(--grid-gap-color) calc(var(--grid-row)) calc(var(--grid-row) + var(--grid-gap))),repeating-linear-gradient(90deg,var(--grid-border-color) 0 var(--grid-border-width),var(--grid-col-color) var(--grid-border-width) calc(100% - (var(--grid-border-width) + var(--grid-gap))),var(--grid-border-color) calc(100% - (var(--grid-border-width) + var(--grid-gap))) calc(100% - var(--grid-gap)),var(--grid-gap-color) calc(100% - var(--grid-gap)) 100%);background-size:calc((100% + var(--grid-gap)) / var(--grid-cols)) calc(var(--grid-row) + var(--grid-gap));background-position:0 0}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], editMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "editMode", required: false }] }], layoutChange: [{ type: i0.Output, args: ["layoutChange"] }], dir: [{ type: i0.Input, args: [{ isSignal: true, alias: "dir", required: false }] }] } });
+
+class NgxGridItemComponent {
+    /** Bound as `[id]` in templates (matches the demo app's existing usage). */
+    itemId = input(undefined, { ...(ngDevMode ? { debugName: "itemId" } : /* istanbul ignore next */ {}), alias: 'id' });
+    config = input({ x: 0, y: 0, w: 1, h: 1 }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "config" }] : /* istanbul ignore next */ []));
+    layoutChange = output();
+    dragging = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dragging" }] : /* istanbul ignore next */ []));
+    resizing = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resizing" }] : /* istanbul ignore next */ []));
+    active = computed(() => this.dragging() || this.resizing(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
+    transitionStyle = computed(() => !this.active() && this.service.options().animate
+        ? 'left .18s ease, top .18s ease, width .18s ease, height .18s ease'
+        : 'none', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "transitionStyle" }] : /* istanbul ignore next */ []));
+    interactive = computed(() => {
+        const id = this.itemId();
+        const item = id ? this.service.items().find((x) => x.id === id) : undefined;
+        return !!item && (this.service.isItemDraggable(item) || this.service.isItemResizable(item));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "interactive" }] : /* istanbul ignore next */ []));
+    service = inject(GridLayoutService);
+    el = inject((ElementRef));
+    drag = inject(NgxDraggable);
+    resize = inject(NgxResizable);
+    resizable = computed(() => {
+        return !this.resize.disabled && this.service.editMode();
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resizable" }] : /* istanbul ignore next */ []));
+    constructor() {
+        // `takeUntilDestroyed()` releases these subscriptions on destroy — the
+        // event for every grid item ever created (real damage in layouts where
+        // items are added/removed dynamically, e.g. via *ngFor + trackBy).
+        this.drag.dragStart.pipe(takeUntilDestroyed()).subscribe(() => this.onDragStart());
+        this.drag.dragMove.pipe(takeUntilDestroyed()).subscribe(() => this.onDragMove());
+        this.drag.dragEnd.pipe(takeUntilDestroyed()).subscribe(() => this.onDragEnd());
+        this.resize.resizeStart.pipe(takeUntilDestroyed()).subscribe(() => this.onResizeStart());
+        this.resize.resizeMove.pipe(takeUntilDestroyed()).subscribe((v) => this.onResizeMove(v));
+        this.resize.resizeEnd.pipe(takeUntilDestroyed()).subscribe(() => this.onResizeEnd());
+        // Keep the hosted directives in sync with per-item state: static items and
+        // items explicitly marked non-draggable/non-resizable stop reacting entirely.
+        effect(() => {
+            const id = this.itemId();
+            const item = id ? this.service.items().find((x) => x.id === id) : undefined;
+            this.drag.disabled = !item || !this.service.isItemDraggable(item);
+            this.resize.disabled = !item || !this.service.isItemResizable(item);
+            if (item)
+                this.applySizeConstraints(item.config);
+        });
+    }
+    ngOnInit() {
+        const id = this.itemId();
+        if (!id)
+            return;
+        this.service.registerItem({
+            id,
+            config: this.config(),
+            element: this.el.nativeElement,
+        });
+    }
+    ngOnDestroy() {
+        const id = this.itemId();
+        if (id)
+            this.service.unregisterItem(id);
+    }
+    onDragStart = () => {
+        this.dragging.set(true);
+        const id = this.itemId();
+        if (id)
+            this.service.begin(id);
+    };
+    onDragMove = () => {
+        const id = this.itemId();
+        if (id)
+            this.service.move(id);
+    };
+    onDragEnd = () => {
+        this.dragging.set(false);
+        this.finishInteraction();
+    };
+    onResizeStart = () => {
+        this.resizing.set(true);
+        const id = this.itemId();
+        if (id)
+            this.service.begin(id);
+    };
+    onResizeMove = (v) => {
+        const id = this.itemId();
+        if (id)
+            this.service.resize(id, v);
+    };
+    onResizeEnd = () => {
+        this.resizing.set(false);
+        this.finishInteraction();
+    };
+    /** Arrow keys move the item by one cell; Shift+arrow resizes it by one cell. */
+    onKeyDown(e) {
+        const id = this.itemId();
+        if (!id || !this.interactive())
+            return;
+        const item = this.service.items().find((x) => x.id === id);
+        if (!item)
+            return;
+        const deltas = {
+            ArrowLeft: [-1, 0],
+            ArrowRight: [1, 0],
+            ArrowUp: [0, -1],
+            ArrowDown: [0, 1],
+        };
+        const delta = deltas[e.key];
+        if (!delta)
+            return;
+        e.preventDefault();
+        if (e.shiftKey && this.service.isItemResizable(item)) {
+            this.service.resizeByCells(id, delta[0], delta[1]);
+        }
+        else if (this.service.isItemDraggable(item)) {
+            this.service.moveByCells(id, delta[0], delta[1]);
+        }
+        this.layoutChange.emit(this.service.items().find((x) => x.id === id)?.config ?? this.config());
+    }
+    finishInteraction() {
+        const id = this.itemId();
+        if (!id)
+            return;
+        this.service.end(id);
+        this.layoutChange.emit(this.service.items().find((x) => x.id === id)?.config ?? this.config());
+    }
+    /** Converts the item's min/max cell counts (config) into px for the resize directive. */
+    applySizeConstraints(config) {
+        const cellPx = this.el.nativeElement.getBoundingClientRect();
+        const cols = Math.max(1, config.w);
+        const rows = Math.max(1, config.h);
+        const colPx = cellPx.width / cols || 1;
+        const rowPx = cellPx.height / rows || 1;
+        this.resize.minWidth = (config.minW ?? 1) * colPx;
+        this.resize.minHeight = (config.minH ?? 1) * rowPx;
+        this.resize.maxWidth = config.maxW ? config.maxW * colPx : Infinity;
+        this.resize.maxHeight = config.maxH ? config.maxH * rowPx : Infinity;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NgxGridItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: NgxGridItemComponent, isStandalone: true, selector: "ngx-grid-item", inputs: { itemId: { classPropertyName: "itemId", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { layoutChange: "layoutChange" }, host: { listeners: { "keydown": "onKeyDown($event)" }, properties: { "style.position": "\"absolute\"", "style.display": "\"block\"", "style.boxSizing": "\"border-box\"", "style.transition": "transitionStyle()", "class.ngx-grid-item--dragging": "dragging()", "class.ngx-grid-item--resizing": "resizing()", "class.ngx-grid-item--static": "config().static", "class.with-resize-handler": "resizable()", "attr.tabindex": "interactive() ? 0 : null", "attr.aria-grabbed": "dragging()", "attr.data-grid-id": "itemId()" } }, hostDirectives: [{ directive: i1.NgxDraggable, inputs: ["dragHandle", "dragHandle", "lockAxis", "lockAxis"] }, { directive: i1.NgxResizable }], ngImport: i0, template: `
+    <ng-content />
+  `, isInline: true, styles: [":host{display:block}:host.with-resize-handler:after{position:absolute;pointer-events:none;outline:1px #2196f3 solid;outline-offset:-5px;background:linear-gradient(#2196f3,#2196f3) 0 0/10px 10px no-repeat,linear-gradient(#2196f3,#2196f3) 100% 0/10px 10px no-repeat,linear-gradient(#2196f3,#2196f3) 0 100%/10px 10px no-repeat,linear-gradient(#2196f3,#2196f3) 100% 100%/10px 10px no-repeat,linear-gradient(#2196f3,#2196f3) 50% 0/10px 10px no-repeat,linear-gradient(#2196f3,#2196f3) 50% 100%/10px 10px no-repeat,linear-gradient(#2196f3,#2196f3) 0 50%/10px 10px no-repeat,linear-gradient(#2196f3,#2196f3) 100% 50%/10px 10px no-repeat;background-repeat:no-repeat;transition:none;inset:-2.5px;opacity:0;animation:showResizeHandle .3s forwards}:host:hover:after{opacity:1;content:\" \"}@keyframes showResizeHandle{0%{opacity:0}to{opacity:1}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NgxGridItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngx-grid-item', standalone: true, hostDirectives: [
+                        { directive: NgxDraggable, inputs: ['dragHandle', 'lockAxis'], outputs: [] },
+                        NgxResizable,
+                    ], template: `
+    <ng-content />
+  `, host: {
+                        '[style.position]': '"absolute"',
+                        '[style.display]': '"block"',
+                        '[style.boxSizing]': '"border-box"',
+                        '[style.transition]': 'transitionStyle()',
+                        '[class.ngx-grid-item--dragging]': 'dragging()',
+                        '[class.ngx-grid-item--resizing]': 'resizing()',
+                        '[class.ngx-grid-item--static]': 'config().static',
+                        '[class.with-resize-handler]': 'resizable()',
+                        '[attr.tabindex]': 'interactive() ? 0 : null',
+                        '[attr.aria-grabbed]': 'dragging()',
+                        '[attr.data-grid-id]': 'itemId()',
+                        '(keydown)': 'onKeyDown($event)',
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block}:host.with-resize-handler:after{position:absolute;pointer-events:none;outline:1px #2196f3 solid;outline-offset:-5px;background:linear-gradient(#2196f3,#2196f3) 0 0/10px 10px no-repeat,linear-gradient(#2196f3,#2196f3) 100% 0/10px 10px no-repeat,linear-gradient(#2196f3,#2196f3) 0 100%/10px 10px no-repeat,linear-gradient(#2196f3,#2196f3) 100% 100%/10px 10px no-repeat,linear-gradient(#2196f3,#2196f3) 50% 0/10px 10px no-repeat,linear-gradient(#2196f3,#2196f3) 50% 100%/10px 10px no-repeat,linear-gradient(#2196f3,#2196f3) 0 50%/10px 10px no-repeat,linear-gradient(#2196f3,#2196f3) 100% 50%/10px 10px no-repeat;background-repeat:no-repeat;transition:none;inset:-2.5px;opacity:0;animation:showResizeHandle .3s forwards}:host:hover:after{opacity:1;content:\" \"}@keyframes showResizeHandle{0%{opacity:0}to{opacity:1}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { itemId: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }], layoutChange: [{ type: i0.Output, args: ["layoutChange"] }] } });
+
+class NgxGridLayoutModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NgxGridLayoutModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.4", ngImport: i0, type: NgxGridLayoutModule, imports: [NgxGridLayoutComponent, NgxGridItemComponent], exports: [NgxGridLayoutComponent, NgxGridItemComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NgxGridLayoutModule, providers: [GridLayoutService] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NgxGridLayoutModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [NgxGridLayoutComponent, NgxGridItemComponent],
+                    exports: [NgxGridLayoutComponent, NgxGridItemComponent],
+                    providers: [GridLayoutService],
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { GridItemConfig, GridLayoutOptions, GridLayoutService, NgxGridItemComponent, NgxGridLayoutComponent, NgxGridLayoutModule, colToLeft, collides, compact, computeMetrics, findFreeSpot, getAllCollisions, getFirstCollision, gridItemConfigsEqual, leftToCol, maxOccupiedRow, moveItem, normalizeGridItem, placeItem, rowToTop, spanToHeightPx, spanToWidthPx, topToRow, trySwap };
+//# sourceMappingURL=ngx-kit-grid-layout.mjs.map