forty-cdk 0.2.0 → 0.3.0

package/fesm2022/forty-cdk-drag-drop.mjs

@@ -0,0 +1,1180 @@
+import * as i0 from '@angular/core';
+import { InjectionToken, inject, signal, Directive, afterNextRender, ElementRef, DOCUMENT, PLATFORM_ID, DestroyRef, Injector, input, booleanAttribute, output, computed, TemplateRef, ViewContainerRef, contentChild, model, effect } from '@angular/core';
+import { isPlatformBrowser } from '@angular/common';
+import { createDefaults, fencePlaceholderIndex, placeholderInsertion, playFlip, LiveAnnouncer, injectPrefersReducedMotion, injectTextDirection, RovingTabindex, Collection, reconcileRovingActive, registerHandle, createAutoScroller, firstEnabledHost, moveIndex, buildDragSlots, indexOfSlot, PreviewController, resolveDropTarget, stepSlot, createPointerDragSession, createTemplatePreview, resolveListNavigation, clampPreviewPosition } from 'forty-cdk/core';
+
+const FOR_DRAG_DROP_CONTEXT = new InjectionToken('FOR_DRAG_DROP_CONTEXT');
+function injectDropListContext(piece) {
+    const ctx = inject(FOR_DRAG_DROP_CONTEXT, { optional: true });
+    if (!ctx) {
+        throw new Error(`[forty-cdk/drag-drop] ${piece} must be used inside a [forDropList] element.`);
+    }
+    return ctx;
+}
+const FOR_DRAGGABLE_CONTEXT = new InjectionToken('FOR_DRAGGABLE_CONTEXT');
+function injectDraggableContext(piece) {
+    const ctx = inject(FOR_DRAGGABLE_CONTEXT, { optional: true });
+    if (!ctx) {
+        throw new Error(`[forty-cdk/drag-drop] ${piece} must be used inside a [forDraggable] or [forFreeDrag] element.`);
+    }
+    return ctx;
+}
+
+/**
+ * Library fallback for drag-drop defaults, read at the root injector when no
+ * consumer has called `provideForDragDropDefaults`. Exported for the shared
+ * defaults contract spec; not re-exported from the primitive's public entry.
+ */
+const FOR_DRAG_DROP_FALLBACK_DEFAULTS = {
+    itemRoleDescription: 'sortable',
+    announceLift: (label, index, total) => `${label}, lifted. ${index} of ${total}.`,
+    announceMove: (label, index, total) => `${label}, moved to position ${index} of ${total}.`,
+    announceDrop: (label, index, total) => `${label}, dropped at position ${index} of ${total}.`,
+    announceCancel: (label) => `${label}, movement cancelled.`,
+    autoScrollEdgeSize: 50,
+    autoScrollMaxSpeed: 16,
+};
+const { token, provideDefaults } = createDefaults('FOR_DRAG_DROP_DEFAULTS', FOR_DRAG_DROP_FALLBACK_DEFAULTS);
+/** Token holding the resolved drag-drop defaults for the current scope. */
+const FOR_DRAG_DROP_DEFAULTS = token;
+/**
+ * Configures forty-cdk drag-drop defaults for this injector scope. Partial
+ * overrides inherit unspecified keys from the parent scope (or library
+ * defaults at the root).
+ */
+function provideForDragDropDefaults(defaults = {}) {
+    return provideDefaults(defaults);
+}
+
+const FOR_DROP_LIST_GROUP = new InjectionToken('FOR_DROP_LIST_GROUP');
+/**
+ * Groups sibling `[forDropList]` elements so items can be transferred between
+ * them without hand-wiring `[connectedTo]` on each list. Every list nested
+ * under `[forDropListGroup]` automatically becomes a connected transfer target
+ * for every other member of the group.
+ */
+class ForDropListGroup {
+    #members = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "#members" }] : /* istanbul ignore next */ []));
+    /** All registered drop lists in this group, in registration order. */
+    members = this.#members.asReadonly();
+    /** @internal */
+    register(ctx) {
+        const current = this.#members();
+        if (current.includes(ctx)) {
+            return;
+        }
+        this.#members.set([...current, ctx]);
+    }
+    /** @internal */
+    unregister(ctx) {
+        this.#members.set(this.#members().filter((c) => c !== ctx));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForDropListGroup, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.2", type: ForDropListGroup, isStandalone: true, selector: "[forDropListGroup]", providers: [{ provide: FOR_DROP_LIST_GROUP, useExisting: ForDropListGroup }], exportAs: ["forDropListGroup"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForDropListGroup, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[forDropListGroup]',
+                    exportAs: 'forDropListGroup',
+                    providers: [{ provide: FOR_DROP_LIST_GROUP, useExisting: ForDropListGroup }],
+                }]
+        }] });
+
+/**
+ * Lazy `liveSort` strategy: relocates the rendered placeholder's root nodes to the live resolved
+ * drop index during a pointer drag — within the source list and across connected lists — so
+ * siblings part to reveal where the item will land.
+ *
+ * Created at `pointerLift` only when `liveSort` is on (and on a browser platform); when it is off
+ * the list creates no sorter and `#resolveDrop` skips placeholder movement entirely, replacing the
+ * former inline `if (this.liveSort())` gate. A `dragDisabled` sibling in the source list acts as a
+ * hard visual fence: the placeholder stops at the first pinned item instead of travelling past it.
+ *
+ * Constructed directly (`new PlaceholderSorter(options)`); it holds no injection context.
+ */
+class PlaceholderSorter {
+    #source;
+    #lifted;
+    #doc;
+    #sourceItems;
+    #originIndex;
+    #nodes = null;
+    constructor(options) {
+        this.#source = options.source;
+        this.#lifted = options.lifted;
+        this.#doc = options.doc;
+        this.#sourceItems = options.sourceItems;
+        this.#originIndex = options.originIndex;
+    }
+    /** Store (or clear) the placeholder's root nodes supplied by the draggable. */
+    setNodes(nodes) {
+        this.#nodes = nodes;
+    }
+    /** Move the placeholder to the fenced resolved drop index in `targetCtx`. */
+    onTargetChange(targetCtx, index) {
+        this.#move(targetCtx, this.#fencedIndex(targetCtx, index));
+    }
+    #fencedIndex(targetCtx, index) {
+        if (targetCtx !== this.#source) {
+            return index;
+        }
+        const disabled = this.#sourceItems()
+            .filter((h) => h.host !== this.#lifted)
+            .map((h) => h.disabled());
+        const origin = this.#originIndex();
+        return fencePlaceholderIndex(index, disabled, origin < 0 ? 0 : origin);
+    }
+    #move(targetCtx, index) {
+        const nodes = this.#nodes;
+        if (nodes === null || nodes.length === 0) {
+            return;
+        }
+        const fragment = this.#doc.createDocumentFragment();
+        for (const node of nodes) {
+            fragment.appendChild(node);
+        }
+        const hosts = targetCtx
+            .items()
+            .map((h) => h.host)
+            .filter((h) => h !== this.#lifted);
+        const { parent, ref } = placeholderInsertion(hosts, index, targetCtx.host);
+        parent.insertBefore(fragment, ref);
+    }
+}
+
+/**
+ * Lazy `animateReorder` strategy: runs the FLIP reflow of displaced sibling items and settles the
+ * floating preview into the final slot on a committed drop.
+ *
+ * Created in `drop()` only when the animation gate is satisfied (`animateReorder` on, a browser
+ * platform, motion not reduced, and the item actually moved); when it is not, the list creates no
+ * animator and tears down instantly, replacing the former inline `animate && first` gate.
+ *
+ * {@link captureFirst} measures every item's pre-change position and must run **before** the
+ * `dragDrop` event mutates the DOM; {@link schedule} runs the Invert + Play after the consumer's
+ * data change has rendered. Constructed directly (`new ReorderAnimator(options)`); it holds no
+ * injection context beyond the injector handed in for `afterNextRender`.
+ */
+class ReorderAnimator {
+    #containers;
+    #injector;
+    #win;
+    #first = null;
+    constructor(options) {
+        this.#containers = options.containers;
+        this.#injector = options.injector;
+        this.#win = options.win;
+    }
+    /** Capture each item's First (pre-change) rect across all containers. Run before the data change. */
+    captureFirst() {
+        const map = new Map();
+        for (const ctx of this.#containers) {
+            for (const h of ctx.items()) {
+                const r = h.host.getBoundingClientRect();
+                map.set(h.host, { left: r.left, top: r.top });
+            }
+        }
+        this.#first = map;
+    }
+    /**
+     * Schedule the FLIP play (and preview settle, when a preview was kept) after the next render —
+     * once the consumer's data change has reflowed the displaced siblings into their new positions.
+     */
+    schedule(liftedHost, preview) {
+        const first = this.#first;
+        if (first === null) {
+            return;
+        }
+        const win = this.#win;
+        afterNextRender(() => {
+            playFlip({ first, win, exclude: preview ? liftedHost : null });
+            if (preview) {
+                if (liftedHost.isConnected && win) {
+                    const r = liftedHost.getBoundingClientRect();
+                    preview.settle(r.left, r.top, win);
+                }
+                else {
+                    preview.destroy();
+                }
+            }
+        }, { injector: this.#injector });
+    }
+}
+
+/**
+ * Optional DI seam overriding the fallback `orientation` of every `[forDropList]` in scope.
+ * `ForDropList`'s `orientation` input falls back to this token's value (`'vertical'` when the
+ * token is not provided); a consumer `orientation` binding always wins over it. Wrappers
+ * compose a horizontal list without leaking `orientation="horizontal"` boilerplate into the
+ * consumer's template — `ForTableColumnReorder` provides `'horizontal'` so column reordering
+ * resolves along the row axis out of the box.
+ */
+const FOR_DROP_LIST_DEFAULT_ORIENTATION = new InjectionToken('FOR_DROP_LIST_DEFAULT_ORIENTATION');
+/**
+ * Root directive of the drag-drop primitive. Apply on any container element to
+ * create a reorderable list. Items inside are declared with `[forDraggable]`.
+ *
+ * Supports both keyboard dragging and pointer (mouse / touch / pen) dragging.
+ */
+class ForDropList {
+    #hostRef = inject(ElementRef);
+    #defaults = inject(FOR_DRAG_DROP_DEFAULTS);
+    #announcer = inject(LiveAnnouncer);
+    #group = inject(FOR_DROP_LIST_GROUP, { optional: true });
+    #document = inject(DOCUMENT);
+    #isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
+    #destroyRef = inject(DestroyRef);
+    #injector = inject(Injector);
+    #prefersReducedMotion = injectPrefersReducedMotion();
+    #defaultOrientation = inject(FOR_DROP_LIST_DEFAULT_ORIENTATION, { optional: true }) ?? 'vertical';
+    /**
+     * Layout orientation of the list. Affects which arrow keys move focus and the lifted item, and
+     * how a pointer drag resolves the live drop index. Defaults to `'vertical'`, or to
+     * `FOR_DROP_LIST_DEFAULT_ORIENTATION` when an in-scope provider sets it (e.g.
+     * `ForTableColumnReorder` defaults it to `'horizontal'`).
+     *
+     * `'mixed'` is for wrapping grids (`flex-wrap` / CSS grid) of uniformly-sized items: the drop
+     * index is resolved in 2D so an item flowing across rows lands in the slot under the pointer's
+     * row and column, and every arrow key steps the lifted item linearly in DOM order. A `'mixed'`
+     * list that happens to render as a single row or single column resolves identically to
+     * `'horizontal'` / `'vertical'`.
+     */
+    orientation = input(this.#defaultOrientation, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
+    /**
+     * Writing direction. When unset (default `null`), the inherited ambient direction is
+     * resolved from the nearest ancestor carrying a `dir` attribute (or `<html dir>`),
+     * defaulting to `'ltr'`.
+     */
+    _dirInput = input(null, { ...(ngDevMode ? { debugName: "_dirInput" } : /* istanbul ignore next */ {}), alias: 'dir' });
+    dir = injectTextDirection(this._dirInput);
+    /** When true, the entire list and all its items are disabled. */
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Other lists this one can transfer items into. Union'd with any `[forDropListGroup]`
+     * members. Disabled lists are excluded from the effective connected set.
+     */
+    connectedTo = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "connectedTo" }] : /* istanbul ignore next */ []));
+    /**
+     * When true (the default), a pointer drag that nears the edge of the nearest scrollable
+     * container (the list, a scrollable ancestor, or the viewport) auto-scrolls it toward that
+     * edge so off-screen drop targets become reachable. Set `false` to opt out. Edge size and
+     * max speed are configured via `provideForDragDropDefaults`. Keyboard dragging is unaffected.
+     */
+    autoScroll = input(true, { ...(ngDevMode ? { debugName: "autoScroll" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * When true, the `[forDragPlaceholder]` follows the live resolved drop index during a
+     * **pointer** drag — within this list and across connected lists — so siblings part to
+     * reveal where the item will land. When false (the default), the placeholder stays in the
+     * dragged item's source slot (the #806 behaviour). Has no effect without a
+     * `[forDragPlaceholder]` template, and none on keyboard dragging.
+     *
+     * A `dragDisabled` sibling acts as a hard fence: the placeholder stops at the first
+     * pinned item instead of travelling past it. This is purely visual — the committed drop
+     * index emitted by `dragDrop` is resolved separately and unaffected.
+     */
+    liveSort = input(false, { ...(ngDevMode ? { debugName: "liveSort" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * When true, a committed drop (keyboard or pointer) animates: displaced sibling items
+     * transition from their old positions to their new ones (FLIP), and — on a pointer drag — the
+     * floating preview settles into the final slot before it is removed. Opt-in and default off.
+     * Duration / easing are styled by the consumer via CSS on the published hooks
+     * (`[data-drag-animating]` on items, `[data-settling]` on the preview); the library imposes
+     * none. Fully skipped under `prefers-reduced-motion: reduce` (teardown stays instant).
+     */
+    animateReorder = input(false, { ...(ngDevMode ? { debugName: "animateReorder" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Confine the pointer-drag preview within a boundary during a pointer drag. Accepts an
+     * `HTMLElement`, or a selector string resolved via `closest()` from the list host. `null`
+     * (the default) leaves the preview unbounded. Affects the visual preview only — the resolved
+     * drop index is unchanged. Has no effect on keyboard dragging (no floating preview).
+     */
+    boundary = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "boundary" }] : /* istanbul ignore next */ []));
+    /**
+     * Constrain pointer-drag preview movement to one axis. `'x'` keeps the preview at its lift-time
+     * `y` (horizontal movement); `'y'` keeps it at its lift-time `x` (vertical movement). `null`
+     * (the default) is free movement. Independent of `orientation` (which drives the drop index);
+     * this is a purely visual constraint, and has no effect on keyboard dragging.
+     */
+    lockAxis = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "lockAxis" }] : /* istanbul ignore next */ []));
+    /**
+     * Emitted by the **source** list when a drop commits (keyboard or pointer) — whether
+     * the item stays in this list (reorder) or moves to a connected list (transfer). Apply
+     * `moveItemInArray` or `transferArrayItem` to your data signal inside the handler.
+     */
+    dragDrop = output();
+    host = this.#hostRef.nativeElement;
+    /** Effective disabled — the list's own `disabled` input (fieldset wiring deferred to v2). */
+    effectiveDisabled = computed(() => this.disabled(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "effectiveDisabled" }] : /* istanbul ignore next */ []));
+    roving = new RovingTabindex();
+    #items = new Collection();
+    items = this.#items.items;
+    #liftedHost = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "#liftedHost" }] : /* istanbul ignore next */ []));
+    #flatIndex = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "#flatIndex" }] : /* istanbul ignore next */ []));
+    #dragOver = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "#dragOver" }] : /* istanbul ignore next */ []));
+    #previewController = null;
+    #sorter = null;
+    #autoScroller = null;
+    #lastPoint = null;
+    /** Insertion index this list is the current drop target at, else `null`. */
+    dragOverIndex = this.#dragOver.asReadonly();
+    /** `true` while a drag originating from this list is in progress. */
+    isDragging = computed(() => this.#liftedHost() !== null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isDragging" }] : /* istanbul ignore next */ []));
+    constructor() {
+        reconcileRovingActive(this.roving, this.#items.items);
+        const group = this.#group;
+        if (group) {
+            registerHandle(this, (ctx) => group.register(ctx), (ctx) => group.unregister(ctx));
+        }
+        if (this.#isBrowser) {
+            this.#autoScroller = createAutoScroller({
+                host: this.host,
+                win: this.#document.defaultView,
+                edgeSize: this.#defaults.autoScrollEdgeSize,
+                maxSpeed: this.#defaults.autoScrollMaxSpeed,
+                onFrame: () => this.#onAutoScrollFrame(),
+            });
+            this.#destroyRef.onDestroy(() => this.#autoScroller?.stop());
+        }
+    }
+    registerItem(handle) {
+        this.#items.register(handle);
+    }
+    unregisterItem(handle) {
+        this.#items.unregister(handle);
+        this.roving.unregister(handle.host);
+    }
+    itemTabindex(el) {
+        return this.roving.hasActive() ? this.roving.tabindexFor(el) : null;
+    }
+    isFirstFocusableItem(el) {
+        return firstEnabledHost(this.#items.items()) === el;
+    }
+    isItemHighlighted(el) {
+        return this.roving.active() === el;
+    }
+    setActiveItem(el) {
+        this.roving.setActive(el);
+    }
+    navigate(el, action) {
+        if (this.effectiveDisabled()) {
+            return;
+        }
+        const items = this.#items.items();
+        if (items.length === 0) {
+            return;
+        }
+        const currentIndex = items.findIndex((h) => h.host === el);
+        const next = moveIndex(currentIndex < 0 ? 0 : currentIndex, items.length, action, {
+            loop: false,
+            isDisabled: (i) => items[i].disabled(),
+        });
+        if (next === null) {
+            return;
+        }
+        items[next]?.host.focus();
+    }
+    #beginLift(el) {
+        if (this.effectiveDisabled() || this.#liftedHost() !== null) {
+            return -1;
+        }
+        const items = this.#items.items();
+        const handle = items.find((h) => h.host === el);
+        if (!handle || handle.disabled()) {
+            return -1;
+        }
+        const from = this.#items.indexOfHost(el);
+        if (from < 0) {
+            return -1;
+        }
+        const connected = this.#effectiveConnected();
+        const slots = buildDragSlots(items.length, connected.map((c) => c.items().length));
+        const flatIndex = indexOfSlot(slots, 0, from);
+        this.#liftedHost.set(el);
+        this.#flatIndex.set(flatIndex < 0 ? 0 : flatIndex);
+        this.#dragOver.set(from);
+        const label = (el.textContent ?? '').trim();
+        this.#announcer.announce(this.#defaults.announceLift(label, from + 1, items.length), 'assertive');
+        return from;
+    }
+    lift(el) {
+        return this.#beginLift(el);
+    }
+    pointerLift(el, point, preview) {
+        const from = this.#beginLift(el);
+        if (from < 0) {
+            return -1;
+        }
+        if (this.#isBrowser) {
+            this.#previewController = new PreviewController({
+                source: el,
+                point,
+                preview,
+                doc: this.#document,
+                boundary: this.#resolveBoundary(),
+                lockAxis: this.lockAxis,
+            });
+            if (this.liveSort()) {
+                this.#sorter = new PlaceholderSorter({
+                    source: this,
+                    lifted: el,
+                    doc: this.#document,
+                    sourceItems: this.#items.items,
+                    originIndex: () => this.#items.indexOfHost(el),
+                });
+            }
+        }
+        return from;
+    }
+    pointerMove(point) {
+        const lifted = this.#liftedHost();
+        if (lifted === null || !this.#isBrowser) {
+            return;
+        }
+        this.#lastPoint = point;
+        this.#resolveDrop(point, lifted);
+        if (this.autoScroll()) {
+            this.#autoScroller?.update(point);
+        }
+        else {
+            this.#autoScroller?.stop();
+        }
+    }
+    #resolveDrop(point, lifted) {
+        const connected = this.#effectiveConnected();
+        const containers = [this, ...connected];
+        const geoms = containers.map((ctx) => ({
+            rect: ctx.host.getBoundingClientRect(),
+            itemRects: ctx
+                .items()
+                .filter((h) => h.host !== lifted)
+                .map((h) => h.host.getBoundingClientRect()),
+        }));
+        const target = resolveDropTarget(point, geoms, this.orientation(), this.dir());
+        this.#previewController?.moveTo(point);
+        if (!target) {
+            return;
+        }
+        const slots = buildDragSlots(this.#items.items().length, connected.map((c) => c.items().length));
+        const flat = indexOfSlot(slots, target.containerIndex, target.index);
+        if (flat < 0) {
+            return;
+        }
+        containers.forEach((ctx, i) => ctx.setDragOver(i === target.containerIndex ? target.index : null));
+        const changed = flat !== this.#flatIndex();
+        this.#flatIndex.set(flat);
+        if (changed) {
+            const targetCtx = containers[target.containerIndex];
+            this.#sorter?.onTargetChange(targetCtx, target.index);
+            const label = (lifted.textContent ?? '').trim();
+            this.#announcer.announce(this.#defaults.announceMove(label, target.index + 1, targetCtx.items().length), 'polite');
+        }
+    }
+    #resolveBoundary() {
+        const boundary = this.boundary();
+        if (boundary === null) {
+            return null;
+        }
+        return typeof boundary === 'string' ? this.host.closest(boundary) : boundary;
+    }
+    #onAutoScrollFrame() {
+        const lifted = this.#liftedHost();
+        const point = this.#lastPoint;
+        if (lifted === null || point === null) {
+            return;
+        }
+        this.#resolveDrop(point, lifted);
+    }
+    isLifted(el) {
+        return this.#liftedHost() === el;
+    }
+    moveLifted(action) {
+        const liftedHost = this.#liftedHost();
+        if (liftedHost === null) {
+            return;
+        }
+        const delta = action === 'next' || action === 'last' ? 1 : -1;
+        const connected = this.#effectiveConnected();
+        const slots = buildDragSlots(this.#items.items().length, connected.map((c) => c.items().length));
+        const current = this.#flatIndex();
+        const next = stepSlot(slots, current, delta);
+        if (next === current) {
+            return;
+        }
+        const prevSlot = slots[current];
+        const nextSlot = slots[next];
+        if (!prevSlot || !nextSlot) {
+            return;
+        }
+        const prevTarget = prevSlot.containerIndex === 0 ? this : connected[prevSlot.containerIndex - 1];
+        const nextTarget = nextSlot.containerIndex === 0 ? this : connected[nextSlot.containerIndex - 1];
+        if (prevTarget && prevTarget !== nextTarget) {
+            prevTarget.setDragOver(null);
+        }
+        if (nextTarget) {
+            nextTarget.setDragOver(nextSlot.index);
+        }
+        this.#flatIndex.set(next);
+        if (nextTarget) {
+            const targetItems = nextTarget.items();
+            const label = (liftedHost.textContent ?? '').trim();
+            this.#announcer.announce(this.#defaults.announceMove(label, nextSlot.index + 1, targetItems.length), 'polite');
+        }
+    }
+    drop() {
+        const liftedHost = this.#liftedHost();
+        if (liftedHost === null) {
+            return;
+        }
+        const connected = this.#effectiveConnected();
+        const items = this.#items.items();
+        const slots = buildDragSlots(items.length, connected.map((c) => c.items().length));
+        const slot = slots[this.#flatIndex()];
+        if (!slot) {
+            this.#teardown(connected);
+            return;
+        }
+        const previousIndex = this.#items.indexOfHost(liftedHost);
+        const currentIndex = slot.index;
+        const container = slot.containerIndex === 0 ? this : (connected[slot.containerIndex - 1] ?? this);
+        const handle = items.find((h) => h.host === liftedHost);
+        const item = handle ? handle.data() : undefined;
+        const label = (liftedHost.textContent ?? '').trim();
+        const targetItems = container.items();
+        const moved = !(previousIndex === currentIndex && container === this);
+        const animate = this.animateReorder() && this.#isBrowser && !this.#prefersReducedMotion() && moved;
+        const preview = this.#previewController?.preview ?? null;
+        const animator = animate
+            ? new ReorderAnimator({
+                containers: [this, ...connected],
+                injector: this.#injector,
+                win: this.#document.defaultView,
+            })
+            : null;
+        animator?.captureFirst();
+        this.dragDrop.emit({
+            item,
+            previousContainer: this,
+            container,
+            previousIndex,
+            currentIndex,
+        });
+        this.#announcer.announce(this.#defaults.announceDrop(label, currentIndex + 1, targetItems.length), 'assertive');
+        if (animator) {
+            animator.schedule(liftedHost, preview);
+            this.#teardown(connected, true);
+        }
+        else {
+            this.#teardown(connected);
+        }
+    }
+    cancel() {
+        const liftedHost = this.#liftedHost();
+        if (liftedHost === null) {
+            return;
+        }
+        const label = (liftedHost.textContent ?? '').trim();
+        this.#announcer.announce(this.#defaults.announceCancel(label), 'assertive');
+        this.#teardown(this.#effectiveConnected());
+    }
+    setDragOver(index) {
+        this.#dragOver.set(index);
+    }
+    setLivePlaceholder(nodes) {
+        this.#sorter?.setNodes(nodes);
+    }
+    #effectiveConnected = computed(() => {
+        const explicit = this.connectedTo();
+        const groupMembers = this.#group?.members() ?? [];
+        const seen = new Set();
+        seen.add(this);
+        const result = [];
+        for (const ctx of [...explicit, ...groupMembers]) {
+            if (!seen.has(ctx) && !ctx.disabled()) {
+                seen.add(ctx);
+                result.push(ctx);
+            }
+        }
+        return result;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "#effectiveConnected" }] : /* istanbul ignore next */ []));
+    #teardown(connected, keepPreview = false) {
+        this.#autoScroller?.stop();
+        this.#lastPoint = null;
+        this.#dragOver.set(null);
+        for (const ctx of connected) {
+            ctx.setDragOver(null);
+        }
+        this.#liftedHost.set(null);
+        this.#flatIndex.set(0);
+        if (!keepPreview) {
+            this.#previewController?.destroy();
+        }
+        this.#previewController = null;
+        this.#sorter = null;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForDropList, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: ForDropList, isStandalone: true, selector: "[forDropList]", inputs: { orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, _dirInput: { classPropertyName: "_dirInput", publicName: "dir", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, connectedTo: { classPropertyName: "connectedTo", publicName: "connectedTo", isSignal: true, isRequired: false, transformFunction: null }, autoScroll: { classPropertyName: "autoScroll", publicName: "autoScroll", isSignal: true, isRequired: false, transformFunction: null }, liveSort: { classPropertyName: "liveSort", publicName: "liveSort", isSignal: true, isRequired: false, transformFunction: null }, animateReorder: { classPropertyName: "animateReorder", publicName: "animateReorder", isSignal: true, isRequired: false, transformFunction: null }, boundary: { classPropertyName: "boundary", publicName: "boundary", isSignal: true, isRequired: false, transformFunction: null }, lockAxis: { classPropertyName: "lockAxis", publicName: "lockAxis", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dragDrop: "dragDrop" }, host: { properties: { "attr.data-orientation": "orientation()", "attr.dir": "dir()", "attr.data-disabled": "effectiveDisabled() ? '' : null", "attr.data-dragging": "isDragging() ? '' : null", "attr.data-drag-over": "dragOverIndex() !== null ? '' : null" } }, providers: [{ provide: FOR_DRAG_DROP_CONTEXT, useExisting: ForDropList }], exportAs: ["forDropList"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForDropList, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[forDropList]',
+                    exportAs: 'forDropList',
+                    host: {
+                        '[attr.data-orientation]': 'orientation()',
+                        '[attr.dir]': 'dir()',
+                        '[attr.data-disabled]': "effectiveDisabled() ? '' : null",
+                        '[attr.data-dragging]': "isDragging() ? '' : null",
+                        '[attr.data-drag-over]': "dragOverIndex() !== null ? '' : null",
+                    },
+                    providers: [{ provide: FOR_DRAG_DROP_CONTEXT, useExisting: ForDropList }],
+                }]
+        }], ctorParameters: () => [], propDecorators: { orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], _dirInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "dir", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], connectedTo: [{ type: i0.Input, args: [{ isSignal: true, alias: "connectedTo", required: false }] }], autoScroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoScroll", required: false }] }], liveSort: [{ type: i0.Input, args: [{ isSignal: true, alias: "liveSort", required: false }] }], animateReorder: [{ type: i0.Input, args: [{ isSignal: true, alias: "animateReorder", required: false }] }], boundary: [{ type: i0.Input, args: [{ isSignal: true, alias: "boundary", required: false }] }], lockAxis: [{ type: i0.Input, args: [{ isSignal: true, alias: "lockAxis", required: false }] }], dragDrop: [{ type: i0.Output, args: ["dragDrop"] }] } });
+
+/**
+ * Optional custom drag preview. Apply `[forDragPreview]` on an `<ng-template>` inside a
+ * `[forDraggable]`; its content renders as the floating element that follows the pointer during a
+ * pointer drag, replacing the default cloned preview. Has no effect on keyboard dragging.
+ */
+class ForDragPreview {
+    /** The template rendered as the floating pointer-drag preview. */
+    templateRef = inject(TemplateRef);
+    constructor() {
+        injectDraggableContext('ForDragPreview');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForDragPreview, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.2", type: ForDragPreview, isStandalone: true, selector: "ng-template[forDragPreview]", exportAs: ["forDragPreview"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForDragPreview, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-template[forDragPreview]',
+                    exportAs: 'forDragPreview',
+                }]
+        }], ctorParameters: () => [] });
+
+/**
+ * Optional custom drag placeholder. Apply `[forDragPlaceholder]` on an `<ng-template>` inside a
+ * `[forDraggable]`; during a **pointer** drag the dragged item's host is hidden and this template
+ * renders in its slot, preserving the gap. Keyboard dragging keeps the default (the lifted item
+ * stays in place, reflecting `data-dragging`).
+ */
+class ForDragPlaceholder {
+    /** The template rendered in the dragged item's slot during a pointer drag. */
+    templateRef = inject(TemplateRef);
+    constructor() {
+        injectDraggableContext('ForDragPlaceholder');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForDragPlaceholder, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.2", type: ForDragPlaceholder, isStandalone: true, selector: "ng-template[forDragPlaceholder]", exportAs: ["forDragPlaceholder"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForDragPlaceholder, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-template[forDragPlaceholder]',
+                    exportAs: 'forDragPlaceholder',
+                }]
+        }], ctorParameters: () => [] });
+
+const POINTER_ARM_THRESHOLD_PX$1 = 5;
+/**
+ * Marks an element as a draggable item inside a `[forDropList]`. Handles
+ * keyboard and pointer interaction for lift, move, drop, and cancel.
+ */
+class ForDraggable {
+    #list = injectDropListContext('ForDraggable');
+    #host = inject(ElementRef);
+    #defaults = inject(FOR_DRAG_DROP_DEFAULTS);
+    #destroyRef = inject(DestroyRef);
+    #isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
+    #document = inject(DOCUMENT);
+    #vcr = inject(ViewContainerRef);
+    previewTpl = contentChild(ForDragPreview, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "previewTpl" }] : /* istanbul ignore next */ []));
+    placeholderTpl = contentChild(ForDragPlaceholder, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "placeholderTpl" }] : /* istanbul ignore next */ []));
+    #placeholderView = null;
+    /** `true` while a pointer-drag placeholder template occupies this item's slot (host hidden). */
+    placeholderActive = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "placeholderActive" }] : /* istanbul ignore next */ []));
+    #handles = new Set();
+    #pointerDragging = false;
+    #pointerSession = null;
+    /** Data payload handed back in the `dragDrop` event when this item is dropped. */
+    dragData = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dragData" }] : /* istanbul ignore next */ []));
+    /**
+     * When true, this item cannot be lifted. The item remains focusable. It also acts as a
+     * hard fence for the `liveSort` placeholder: a sibling being dragged cannot move its
+     * placeholder across a pinned item (the committed drop index is unaffected).
+     */
+    dragDisabled = input(false, { ...(ngDevMode ? { debugName: "dragDisabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Emitted when a drag (keyboard or pointer) starts from this item. */
+    dragStart = output();
+    /** Emitted when a drag originating from this item ends (committed or cancelled). */
+    dragEnd = output();
+    effectiveDisabled = computed(() => this.dragDisabled() || this.#list.disabled(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "effectiveDisabled" }] : /* istanbul ignore next */ []));
+    /** `true` when this item is the currently lifted draggable. Reflected as `data-dragging`. */
+    lifted = computed(() => this.#list.isLifted(this.#host.nativeElement), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "lifted" }] : /* istanbul ignore next */ []));
+    /** `true` when this item is the roving-tabindex active candidate. */
+    highlighted = computed(() => this.#list.isItemHighlighted(this.#host.nativeElement), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "highlighted" }] : /* istanbul ignore next */ []));
+    /** `aria-roledescription` value from defaults. */
+    roleDescription = computed(() => this.#defaults.itemRoleDescription, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "roleDescription" }] : /* istanbul ignore next */ []));
+    tabindex = computed(() => {
+        if (this.effectiveDisabled()) {
+            return -1;
+        }
+        const rovingTabindex = this.#list.itemTabindex(this.#host.nativeElement);
+        if (rovingTabindex !== null) {
+            return rovingTabindex;
+        }
+        return this.#list.isFirstFocusableItem(this.#host.nativeElement) ? 0 : -1;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tabindex" }] : /* istanbul ignore next */ []));
+    touchAction = computed(() => !this.effectiveDisabled() && this.#handles.size === 0 ? 'none' : null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "touchAction" }] : /* istanbul ignore next */ []));
+    constructor() {
+        const handle = {
+            host: this.#host.nativeElement,
+            data: this.dragData,
+            disabled: this.effectiveDisabled,
+        };
+        registerHandle(handle, (h) => this.#list.registerItem(h), (h) => this.#list.unregisterItem(h));
+        if (this.#isBrowser) {
+            this.#pointerSession = createPointerDragSession({
+                host: this.#host.nativeElement,
+                document: this.#document,
+                armThreshold: POINTER_ARM_THRESHOLD_PX$1,
+                cancelOnEscape: true,
+                capturePointer: true,
+                canStart: (event) => this.#canStartPointer(event),
+                onLift: (event) => this.#onPointerLift(event),
+                onMove: (event) => this.#onPointerMove(event),
+                onCommit: () => this.#onPointerCommit(),
+                onCancel: () => this.#onPointerCancel(),
+            });
+            this.#destroyRef.onDestroy(() => this.#pointerSession?.destroy());
+            this.#destroyRef.onDestroy(() => this.#clearPlaceholder());
+        }
+    }
+    registerHandle(el) {
+        this.#handles.add(el);
+    }
+    unregisterHandle(el) {
+        this.#handles.delete(el);
+    }
+    #canStartPointer(event) {
+        if (this.effectiveDisabled()) {
+            return false;
+        }
+        if (event.pointerType === 'mouse' && event.button !== 0) {
+            return false;
+        }
+        if (this.#handles.size === 0) {
+            return true;
+        }
+        const target = event.target;
+        return target !== null && [...this.#handles].some((h) => h.contains(target));
+    }
+    #onPointerLift(event) {
+        const preview = this.#buildPreview();
+        const index = this.#list.pointerLift(this.#host.nativeElement, { x: event.clientX, y: event.clientY }, preview);
+        if (index < 0) {
+            preview?.destroy();
+            return false;
+        }
+        this.#renderPlaceholder();
+        this.#pointerDragging = true;
+        this.dragStart.emit({ source: this.#list, index });
+        return true;
+    }
+    #onPointerMove(event) {
+        this.#list.pointerMove({ x: event.clientX, y: event.clientY });
+    }
+    #onPointerCommit() {
+        this.#pointerDragging = false;
+        this.#clearPlaceholder();
+        this.#list.drop();
+        this.dragEnd.emit({ dropped: true });
+    }
+    #onPointerCancel() {
+        if (!this.#pointerDragging) {
+            return;
+        }
+        this.#pointerDragging = false;
+        this.#clearPlaceholder();
+        this.#list.cancel();
+        this.dragEnd.emit({ dropped: false });
+    }
+    #buildPreview() {
+        const preview = this.previewTpl();
+        if (!preview || !this.#isBrowser) {
+            return null;
+        }
+        const viewRef = this.#vcr.createEmbeddedView(preview.templateRef);
+        viewRef.detectChanges();
+        return createTemplatePreview(viewRef.rootNodes, this.#document, () => viewRef.destroy());
+    }
+    #renderPlaceholder() {
+        const placeholder = this.placeholderTpl();
+        if (!placeholder || !this.#isBrowser) {
+            return;
+        }
+        this.#placeholderView = this.#vcr.createEmbeddedView(placeholder.templateRef);
+        this.#placeholderView.detectChanges();
+        this.placeholderActive.set(true);
+        this.#list.setLivePlaceholder(this.#placeholderView.rootNodes);
+    }
+    #clearPlaceholder() {
+        this.#list.setLivePlaceholder(null);
+        this.placeholderActive.set(false);
+        this.#placeholderView?.destroy();
+        this.#placeholderView = null;
+    }
+    onNativeDragStart(event) {
+        if (this.#pointerDragging) {
+            event.preventDefault();
+        }
+    }
+    onFocus() {
+        if (!this.effectiveDisabled()) {
+            this.#list.setActiveItem(this.#host.nativeElement);
+        }
+    }
+    onBlur() {
+        if (this.lifted() && !this.#pointerDragging) {
+            this.#list.cancel();
+            this.dragEnd.emit({ dropped: false });
+        }
+    }
+    onKeyDown(event) {
+        if (this.effectiveDisabled() || this.#pointerDragging) {
+            return;
+        }
+        const host = this.#host.nativeElement;
+        if (this.lifted()) {
+            if (event.key === ' ' || event.key === 'Enter') {
+                event.preventDefault();
+                this.#list.drop();
+                this.dragEnd.emit({ dropped: true });
+                return;
+            }
+            if (event.key === 'Escape') {
+                event.preventDefault();
+                this.#list.cancel();
+                this.dragEnd.emit({ dropped: false });
+                return;
+            }
+            const action = resolveListNavigation(event, {
+                orientation: this.#list.orientation(),
+                dir: this.#list.dir(),
+            });
+            if (action) {
+                event.preventDefault();
+                this.#list.moveLifted(action);
+            }
+            return;
+        }
+        if (event.key === ' ' || event.key === 'Enter') {
+            event.preventDefault();
+            const index = this.#list.lift(host);
+            if (index >= 0) {
+                this.dragStart.emit({ source: this.#list, index });
+            }
+            return;
+        }
+        const action = resolveListNavigation(event, {
+            orientation: this.#list.orientation(),
+            dir: this.#list.dir(),
+        });
+        if (action) {
+            event.preventDefault();
+            this.#list.navigate(host, action);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForDraggable, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "22.0.2", type: ForDraggable, isStandalone: true, selector: "[forDraggable]", inputs: { dragData: { classPropertyName: "dragData", publicName: "dragData", isSignal: true, isRequired: true, transformFunction: null }, dragDisabled: { classPropertyName: "dragDisabled", publicName: "dragDisabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dragStart: "dragStart", dragEnd: "dragEnd" }, host: { listeners: { "dragstart": "onNativeDragStart($event)", "keydown": "onKeyDown($event)", "focus": "onFocus()", "blur": "onBlur()" }, properties: { "attr.tabindex": "tabindex()", "attr.aria-roledescription": "roleDescription() || null", "attr.aria-disabled": "effectiveDisabled() ? 'true' : null", "attr.data-dragging": "lifted() ? '' : null", "attr.data-disabled": "effectiveDisabled() ? '' : null", "style.touch-action": "touchAction()", "style.display": "placeholderActive() ? 'none' : null" } }, providers: [{ provide: FOR_DRAGGABLE_CONTEXT, useExisting: ForDraggable }], queries: [{ propertyName: "previewTpl", first: true, predicate: ForDragPreview, descendants: true, isSignal: true }, { propertyName: "placeholderTpl", first: true, predicate: ForDragPlaceholder, descendants: true, isSignal: true }], exportAs: ["forDraggable"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForDraggable, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[forDraggable]',
+                    exportAs: 'forDraggable',
+                    providers: [{ provide: FOR_DRAGGABLE_CONTEXT, useExisting: ForDraggable }],
+                    host: {
+                        '[attr.tabindex]': 'tabindex()',
+                        '[attr.aria-roledescription]': 'roleDescription() || null',
+                        '[attr.aria-disabled]': "effectiveDisabled() ? 'true' : null",
+                        '[attr.data-dragging]': "lifted() ? '' : null",
+                        '[attr.data-disabled]': "effectiveDisabled() ? '' : null",
+                        '[style.touch-action]': 'touchAction()',
+                        '[style.display]': "placeholderActive() ? 'none' : null",
+                        '(dragstart)': 'onNativeDragStart($event)',
+                        '(keydown)': 'onKeyDown($event)',
+                        '(focus)': 'onFocus()',
+                        '(blur)': 'onBlur()',
+                    },
+                }]
+        }], ctorParameters: () => [], propDecorators: { previewTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ForDragPreview), { isSignal: true }] }], placeholderTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ForDragPlaceholder), { isSignal: true }] }], dragData: [{ type: i0.Input, args: [{ isSignal: true, alias: "dragData", required: true }] }], dragDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "dragDisabled", required: false }] }], dragStart: [{ type: i0.Output, args: ["dragStart"] }], dragEnd: [{ type: i0.Output, args: ["dragEnd"] }] } });
+
+const POINTER_ARM_THRESHOLD_PX = 5;
+/**
+ * Standalone free-drag directive: repositions its host (or a resolved `rootElement`) by pointer
+ * drag via a CSS `transform: translate(...)`, with **no** `[forDropList]` dependency. Unlike
+ * `[forDraggable]`, it never commits a reorder — it only moves an arbitrary element around,
+ * optionally confined to a `boundary` and locked to one axis. Composes the shared
+ * `createPointerDragSession` transport and accepts `[forDragHandle]` children.
+ *
+ * Pointer-only: there is no WAI-ARIA APG pattern for "freely reposition an element", so this is
+ * a documented headless exception (see `.claude/rules/conventions.md`). It owns no role or ARIA
+ * state and must not destroy the moved element's semantics — the consumer keeps the moved
+ * element operable at its default position (e.g. a repositionable dialog stays usable by
+ * keyboard); dragging is a pointer convenience, not the only way to use it.
+ */
+class ForFreeDrag {
+    #host = inject(ElementRef);
+    #document = inject(DOCUMENT);
+    #destroyRef = inject(DestroyRef);
+    #isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
+    #handles = new Set();
+    #lift = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "#lift" }] : /* istanbul ignore next */ []));
+    #pointerSession = null;
+    /** When true, the element can't be dragged (it stays focusable; the transform doesn't change). */
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * The element actually moved: an `HTMLElement`, or a selector resolved via `closest()` from the
+     * host. `null` (the default) moves the host itself. Mirrors CDK's `cdkDragRootElement` — drag a
+     * child handle, move an ancestor (e.g. drag a whole dialog by its header).
+     */
+    rootElement = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rootElement" }] : /* istanbul ignore next */ []));
+    /**
+     * Confine movement within an `HTMLElement`, a `closest()` selector resolved from the host, or
+     * `null` (the default) for unbounded movement. Unlike `[forDropList]`'s boundary (which clamps a
+     * floating clone), this clamps the **real moved element** so its box stays fully inside.
+     */
+    boundary = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "boundary" }] : /* istanbul ignore next */ []));
+    /**
+     * Constrain movement to one axis. `'x'` pins the element at its lift-time `y` (horizontal-only);
+     * `'y'` pins it at its lift-time `x` (vertical-only). `null` (the default) is free.
+     */
+    lockAxis = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "lockAxis" }] : /* istanbul ignore next */ []));
+    /** Two-way translate offset (px) from the element's natural position. Controllable / restorable. */
+    position = model({ x: 0, y: 0 }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []));
+    /** Emitted when a pointer drag starts, with the lift-time position. */
+    dragStart = output();
+    /**
+     * Emitted on every armed move with the live position. (Non-native verb — `dragMove`, not
+     * `drag` / `dragMoved` — so `@angular-eslint/no-output-native` stays clear.)
+     */
+    dragMove = output();
+    /** Emitted when the drag ends, with the final position. */
+    dragEnd = output();
+    /** True while a pointer drag is armed. Reflected as `data-dragging`. */
+    dragging = computed(() => this.#lift() !== null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dragging" }] : /* istanbul ignore next */ []));
+    touchAction = computed(() => !this.disabled() && this.#handles.size === 0 ? 'none' : null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "touchAction" }] : /* istanbul ignore next */ []));
+    constructor() {
+        if (this.#isBrowser) {
+            effect(() => {
+                const { x, y } = this.position();
+                const el = this.#resolvedRoot();
+                el.style.transform = x === 0 && y === 0 ? '' : `translate(${x}px, ${y}px)`;
+            });
+            this.#pointerSession = createPointerDragSession({
+                host: this.#host.nativeElement,
+                document: this.#document,
+                armThreshold: POINTER_ARM_THRESHOLD_PX,
+                cancelOnEscape: true,
+                capturePointer: true,
+                canStart: (event) => this.#canStartPointer(event),
+                onLift: (event) => this.#onLift(event),
+                onMove: (event) => this.#onMove(event),
+                onCommit: () => this.#onCommit(),
+                onCancel: () => this.#onCancel(),
+            });
+            this.#destroyRef.onDestroy(() => this.#pointerSession?.destroy());
+        }
+    }
+    registerHandle(el) {
+        this.#handles.add(el);
+    }
+    unregisterHandle(el) {
+        this.#handles.delete(el);
+    }
+    #resolvedRoot = computed(() => {
+        const root = this.rootElement();
+        const host = this.#host.nativeElement;
+        if (root === null) {
+            return host;
+        }
+        return typeof root === 'string' ? (host.closest(root) ?? host) : root;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "#resolvedRoot" }] : /* istanbul ignore next */ []));
+    #resolveBoundary() {
+        const boundary = this.boundary();
+        if (boundary === null) {
+            return null;
+        }
+        return typeof boundary === 'string'
+            ? this.#host.nativeElement.closest(boundary)
+            : boundary;
+    }
+    #canStartPointer(event) {
+        if (this.disabled()) {
+            return false;
+        }
+        if (event.pointerType === 'mouse' && event.button !== 0) {
+            return false;
+        }
+        if (this.#handles.size === 0) {
+            return true;
+        }
+        const target = event.target;
+        return target !== null && [...this.#handles].some((h) => h.contains(target));
+    }
+    #onLift(event) {
+        const rect = this.#resolvedRoot().getBoundingClientRect();
+        const position = this.position();
+        this.#lift.set({
+            point: { x: event.clientX, y: event.clientY },
+            position,
+            topLeft: { x: rect.left, y: rect.top },
+            natural: { x: rect.left - position.x, y: rect.top - position.y },
+            size: { width: rect.width, height: rect.height },
+        });
+        this.dragStart.emit(position);
+        return true;
+    }
+    #onMove(event) {
+        const lift = this.#lift();
+        if (!lift) {
+            return;
+        }
+        const desired = {
+            x: lift.topLeft.x + (event.clientX - lift.point.x),
+            y: lift.topLeft.y + (event.clientY - lift.point.y),
+        };
+        const boundaryRect = this.#resolveBoundary()?.getBoundingClientRect() ?? null;
+        const clamped = clampPreviewPosition(desired, lift.size, boundaryRect, this.lockAxis(), lift.topLeft);
+        const next = { x: clamped.x - lift.natural.x, y: clamped.y - lift.natural.y };
+        this.position.set(next);
+        this.dragMove.emit(next);
+    }
+    #onCommit() {
+        this.#lift.set(null);
+        this.dragEnd.emit(this.position());
+    }
+    #onCancel() {
+        const lift = this.#lift();
+        if (lift) {
+            this.position.set(lift.position);
+        }
+        this.#lift.set(null);
+        this.dragEnd.emit(this.position());
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForFreeDrag, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: ForFreeDrag, isStandalone: true, selector: "[forFreeDrag]", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, rootElement: { classPropertyName: "rootElement", publicName: "rootElement", isSignal: true, isRequired: false, transformFunction: null }, boundary: { classPropertyName: "boundary", publicName: "boundary", isSignal: true, isRequired: false, transformFunction: null }, lockAxis: { classPropertyName: "lockAxis", publicName: "lockAxis", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { position: "positionChange", dragStart: "dragStart", dragMove: "dragMove", dragEnd: "dragEnd" }, host: { properties: { "attr.data-dragging": "dragging() ? '' : null", "attr.data-disabled": "disabled() ? '' : null", "style.touch-action": "touchAction()" } }, providers: [{ provide: FOR_DRAGGABLE_CONTEXT, useExisting: ForFreeDrag }], exportAs: ["forFreeDrag"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForFreeDrag, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[forFreeDrag]',
+                    exportAs: 'forFreeDrag',
+                    providers: [{ provide: FOR_DRAGGABLE_CONTEXT, useExisting: ForFreeDrag }],
+                    host: {
+                        '[attr.data-dragging]': "dragging() ? '' : null",
+                        '[attr.data-disabled]': "disabled() ? '' : null",
+                        '[style.touch-action]': 'touchAction()',
+                    },
+                }]
+        }], ctorParameters: () => [], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], rootElement: [{ type: i0.Input, args: [{ isSignal: true, alias: "rootElement", required: false }] }], boundary: [{ type: i0.Input, args: [{ isSignal: true, alias: "boundary", required: false }] }], lockAxis: [{ type: i0.Input, args: [{ isSignal: true, alias: "lockAxis", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }, { type: i0.Output, args: ["positionChange"] }], dragStart: [{ type: i0.Output, args: ["dragStart"] }], dragMove: [{ type: i0.Output, args: ["dragMove"] }], dragEnd: [{ type: i0.Output, args: ["dragEnd"] }] } });
+
+/**
+ * Optional drag handle inside a `[forDraggable]`. When at least one handle is present on an item, a pointer
+ * drag may only start from within a handle (keyboard dragging is unaffected). Apply on a child element.
+ */
+class ForDragHandle {
+    #context = injectDraggableContext('ForDragHandle');
+    #host = inject(ElementRef);
+    constructor() {
+        registerHandle(this.#host.nativeElement, (el) => this.#context.registerHandle(el), (el) => this.#context.unregisterHandle(el));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForDragHandle, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.2", type: ForDragHandle, isStandalone: true, selector: "[forDragHandle]", host: { properties: { "style.touch-action": "'none'", "attr.data-drag-handle": "''" } }, exportAs: ["forDragHandle"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForDragHandle, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[forDragHandle]',
+                    exportAs: 'forDragHandle',
+                    host: {
+                        '[style.touch-action]': "'none'",
+                        '[attr.data-drag-handle]': "''",
+                    },
+                }]
+        }], ctorParameters: () => [] });
+
+/**
+ * Returns a copy of `array` with the item at `from` moved to `to`. Indices are clamped to
+ * the array bounds; an out-of-range or no-op move returns a shallow copy unchanged.
+ */
+function moveItemInArray(array, from, to) {
+    const len = array.length;
+    if (len === 0) {
+        return [];
+    }
+    const clampedFrom = Math.max(0, Math.min(len - 1, from));
+    const clampedTo = Math.max(0, Math.min(len - 1, to));
+    const copy = [...array];
+    if (clampedFrom === clampedTo) {
+        return copy;
+    }
+    const [item] = copy.splice(clampedFrom, 1);
+    copy.splice(clampedTo, 0, item);
+    return copy;
+}
+/**
+ * Moves the item at `fromIndex` of `from` into `to` at `toIndex`, returning new arrays for
+ * both. Does not mutate the inputs. Indices are clamped (`toIndex` may equal `to.length`,
+ * i.e. append).
+ */
+function transferArrayItem(from, to, fromIndex, toIndex) {
+    if (from.length === 0) {
+        return { from: [], to: [...to] };
+    }
+    const clampedFrom = Math.max(0, Math.min(from.length - 1, fromIndex));
+    const clampedTo = Math.max(0, Math.min(to.length, toIndex));
+    const nextFrom = [...from];
+    const [item] = nextFrom.splice(clampedFrom, 1);
+    const nextTo = [...to];
+    nextTo.splice(clampedTo, 0, item);
+    return { from: nextFrom, to: nextTo };
+}
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { FOR_DRAGGABLE_CONTEXT, FOR_DRAG_DROP_CONTEXT, FOR_DRAG_DROP_DEFAULTS, FOR_DROP_LIST_DEFAULT_ORIENTATION, FOR_DROP_LIST_GROUP, ForDragHandle, ForDragPlaceholder, ForDragPreview, ForDraggable, ForDropList, ForDropListGroup, ForFreeDrag, moveItemInArray, provideForDragDropDefaults, transferArrayItem };
+//# sourceMappingURL=forty-cdk-drag-drop.mjs.map