@mk-kit/ui 0.54.0 → 0.55.0

package/fesm2022/mk-kit-ui-dnd.mjs

@@ -67,6 +67,7 @@ function mkTransferArrayItem(from, to, fromIndex, toIndex) {
  */
 class MkDragDropRegistry {
     lists = new Map();
+    zones = new Map();
     /** Register (or replace) the list published under `id`. */
     register(id, list) {
         this.lists.set(id, list);
@@ -94,6 +95,38 @@ class MkDragDropRegistry {
         const connected = list.connectedTo();
         return this.all().filter((l) => l === list || (connected.includes(l.id()) && !l.mkDropListDisabled()));
     }
+    /** Register (or replace) the zone published under `id`. */
+    registerZone(id, zone) {
+        this.zones.set(id, zone);
+    }
+    /** Remove `zone` from the registry if it is still the holder of `id`. */
+    unregisterZone(id, zone) {
+        if (this.zones.get(id) === zone)
+            this.zones.delete(id);
+    }
+    /** Look up a zone by its `mkDropZoneId`. */
+    getZone(id) {
+        return this.zones.get(id);
+    }
+    /** Every enabled zone named in `list`'s `mkDropListConnectedTo`, in registration order. */
+    connectedZones(list) {
+        const connected = list.connectedTo();
+        return [...this.zones.values()].filter((z) => connected.includes(z.id()) && !z.mkDropZoneDisabled());
+    }
+    /**
+     * The keyboard travel group for `list`: its connected lists **and** zones,
+     * in document order, so arrow keys walk targets the way they appear on
+     * screen regardless of when each registered.
+     */
+    travelGroup(list) {
+        const targets = [...this.connectedGroup(list), ...this.connectedZones(list)];
+        return targets.sort((a, b) => {
+            if (a.element === b.element)
+                return 0;
+            const pos = a.element.compareDocumentPosition(b.element);
+            return pos & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1;
+        });
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkDragDropRegistry, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkDragDropRegistry, providedIn: 'root' });
 }
@@ -199,6 +232,12 @@ const SETTLE_MS = 180;
  * it up, **Arrow** keys to move it (crossing into connected lists at the ends /
  * across the perpendicular axis), **Space/Enter** to drop, **Escape** to cancel.
  *
+ * Besides lists, an item can be released on a connected `[mkDropZone]` — a
+ * target that reports *where* it was dropped instead of an index (a timeline,
+ * a priority band, a "focus on this" pane). Zones sit in the same keyboard
+ * travel group as lists, in document order; while an item hovers a zone no
+ * placeholder is shown and the zone streams `mkDropZoneMoved` events.
+ *
  * Touch: a swipe scrolls the page as usual — the drag only arms after a
  * long-press ({@link mkDragTouchDelay}, default 300 ms). While armed the item
  * gets the `mk-drag--armed` class so consumers can style the lift moment.
@@ -290,6 +329,8 @@ class MkDrag {
     targetIndex = 0;
     homeIndex = 0;
     placeholder = null;
+    /** The zone the item hovers (pointer) or sits on (keyboard); `null` while a list is the target. */
+    targetZone = null;
     // --- pointer session state ---
     pointerId = null;
     started = false;
@@ -361,6 +402,12 @@ class MkDrag {
     cachedGroup = [];
     /** List bounds snapshotted at lift / after invalidation. */
     listRects = new Map();
+    /** Connected zones resolved once at lift, and their bounds. */
+    cachedZones = [];
+    zoneRects = new Map();
+    /** Last pointer position a frame applied — the drop position on a zone. */
+    lastX = 0;
+    lastY = 0;
     /** Item bounds per list, aligned with `itemElementsExcept(this)`. */
     itemRects = new Map();
     /** Lists whose snapshots a placeholder move invalidated (re-measured next frame). */
@@ -564,17 +611,30 @@ class MkDrag {
         }
         const x = this.pendingX;
         const y = this.pendingY;
-        const list = this.listUnderPoint(x, y) ?? this.targetList;
-        const index = list ? this.indexInList(list, x, y) : this.targetIndex;
+        this.lastX = x;
+        this.lastY = y;
+        const hit = this.targetUnderPoint(x, y);
         // Writes: follow the cursor, then settle the placeholder.
         if (this.preview) {
             const dx = x - this.offsetX - this.originLeft;
             const dy = y - this.offsetY - this.originTop;
             this.preview.style.transform = `translate3d(${dx}px, ${dy}px, 0)`;
         }
+        if (hit && !(hit instanceof MkDropList)) {
+            this.hoverZone(hit, x, y);
+            return;
+        }
+        // Over nothing: the last target keeps the item (a zone included).
+        if (!hit && this.targetZone)
+            return;
+        const list = hit ?? this.targetList;
         if (!list)
             return;
-        if (list !== this.targetList) {
+        const index = this.indexInList(list, x, y);
+        const wasOnZone = this.targetZone !== null;
+        if (wasOnZone)
+            this.leaveZone();
+        if (list !== this.targetList || wasOnZone) {
             this.targetList?.setReceiving(false);
             this.targetList = list;
             list.setReceiving(true);
@@ -582,6 +642,64 @@ class MkDrag {
         this.targetIndex = index;
         this.syncPlaceholder();
     }
+    /** Pointer entered / moved over `zone`: no placeholder, the zone gets the position. */
+    hoverZone(zone, x, y) {
+        const hover = this.zoneHover(zone, x, y, true);
+        if (zone === this.targetZone) {
+            zone.emitMoved(hover);
+            return;
+        }
+        this.leaveZone();
+        this.targetList?.setReceiving(false);
+        this.detachPlaceholder();
+        this.targetZone = zone;
+        zone.setReceiving(true);
+        zone.emitEntered(hover);
+    }
+    /** Leave the current zone, if any (the zone is told, so it can clear its preview). */
+    leaveZone() {
+        const zone = this.targetZone;
+        if (!zone)
+            return;
+        this.targetZone = null;
+        zone.setReceiving(false);
+        zone.emitLeft(this);
+    }
+    /**
+     * Take the placeholder out of the lists while the item is over a zone. The
+     * next `syncPlaceholder` re-inserts it (the idempotence guard is reset), and
+     * the list it left is re-measured because its layout just changed.
+     */
+    detachPlaceholder() {
+        const ph = this.placeholder;
+        if (!ph)
+            return;
+        const prev = this.lastSyncList;
+        ph.remove();
+        this.lastSyncList = null;
+        this.lastSyncIndex = -1;
+        if (prev)
+            this.dirtyLists.add(prev);
+    }
+    /** Position of the item over `zone` — cached bounds on the pointer path, live otherwise. */
+    zoneHover(zone, x, y, isPointerEvent) {
+        const r = this.zoneRects.get(zone) ?? zone.element.getBoundingClientRect();
+        const clamp = (v) => Math.min(1, Math.max(0, v));
+        return {
+            item: this,
+            zone,
+            x,
+            y,
+            offsetX: x - r.left,
+            offsetY: y - r.top,
+            fractionX: r.width ? clamp((x - r.left) / r.width) : 0,
+            fractionY: r.height ? clamp((y - r.top) / r.height) : 0,
+            isPointerEvent,
+        };
+    }
+    zoneEvent(zone, x, y, isPointerEvent, previousContainer, previousIndex) {
+        return { ...this.zoneHover(zone, x, y, isPointerEvent), previousContainer, previousIndex };
+    }
     finishPointer(cancel) {
         if (this.pointerId !== null) {
             try {
@@ -603,7 +721,8 @@ class MkDrag {
         // reflects exactly where the pointer ended, not the last painted frame.
         this.flushMoveFrame(!cancel);
         const settle = () => this.commitPointer(cancel);
-        if (cancel || this.prefersReducedMotion() || !this.preview) {
+        // A zone has no placeholder to settle onto — commit straight away.
+        if (cancel || this.targetZone || this.prefersReducedMotion() || !this.preview) {
             settle();
             return;
         }
@@ -632,10 +751,23 @@ class MkDrag {
     commitPointer(cancel) {
         if (this.destroyed)
             return;
+        const zone = this.targetZone;
         const container = this.targetList;
         const previousContainer = this.home;
         const currentIndex = this.targetIndex;
         const previousIndex = this.homeIndex;
+        if (!cancel && zone && previousContainer) {
+            // Build the event before cleanup clears the cached bounds; detach the
+            // zone first so cleanup does not report a "left".
+            const event = this.zoneEvent(zone, this.lastX, this.lastY, true, previousContainer, previousIndex);
+            this.targetZone = null;
+            zone.setReceiving(false);
+            this.cleanupDom();
+            this.dragging.set(false);
+            zone.emitDrop(event);
+            this.announceDroppedInZone(zone, 'polite');
+            return;
+        }
         this.cleanupDom();
         this.dragging.set(false);
         if (cancel || !container || !previousContainer) {
@@ -664,6 +796,9 @@ class MkDrag {
             return;
         }
         // Picked up: capture the movement / drop / cancel keys.
+        // On a zone there is no position to step through — every arrow walks the
+        // travel group (previous / next target), Space/Enter drops at the centre.
+        const onZone = this.targetZone !== null;
         const horizontal = this.targetList?.mkDropListOrientation() === 'horizontal';
         switch (key) {
             case ' ':
@@ -677,19 +812,19 @@ class MkDrag {
                 break;
             case 'ArrowUp':
                 e.preventDefault();
-                horizontal ? this.stepList(-1) : this.stepPrimary(-1);
+                onZone || horizontal ? this.stepTarget(-1) : this.stepPrimary(-1);
                 break;
             case 'ArrowDown':
                 e.preventDefault();
-                horizontal ? this.stepList(1) : this.stepPrimary(1);
+                onZone || horizontal ? this.stepTarget(1) : this.stepPrimary(1);
                 break;
             case 'ArrowLeft':
                 e.preventDefault();
-                horizontal ? this.stepPrimary(-1) : this.stepList(-1);
+                onZone || !horizontal ? this.stepTarget(-1) : this.stepPrimary(-1);
                 break;
             case 'ArrowRight':
                 e.preventDefault();
-                horizontal ? this.stepPrimary(1) : this.stepList(1);
+                onZone || !horizontal ? this.stepTarget(1) : this.stepPrimary(1);
                 break;
             default:
                 break;
@@ -744,28 +879,66 @@ class MkDrag {
         this.syncPlaceholder();
         this.announceMove(false);
     }
-    stepList(step) {
-        const list = this.targetList;
-        if (!list)
+    /**
+     * Cross to the previous / next target on the perpendicular axis: connected
+     * lists **and** zones, in document order (see `MkDragDropRegistry.travelGroup`).
+     */
+    stepTarget(step) {
+        const current = this.targetZone ?? this.targetList;
+        if (!current || !this.home)
+            return;
+        const group = this.registry.travelGroup(this.home);
+        const i = group.indexOf(current);
+        if (i < 0)
             return;
-        const adj = this.adjacentList(list, step);
-        if (!adj)
+        const next = group[i + step];
+        if (!next)
             return;
-        this.moveToList(adj, Math.min(this.targetIndex, this.maxIndex(adj)), true);
+        if (next instanceof MkDropList) {
+            const wasOnZone = this.targetZone !== null;
+            this.leaveZone();
+            this.moveToList(next, Math.min(this.targetIndex, this.maxIndex(next)), true, wasOnZone);
+        }
+        else {
+            this.moveToZone(next);
+        }
     }
-    moveToList(list, index, crossed) {
+    moveToZone(zone) {
+        this.leaveZone();
+        this.targetList?.setReceiving(false);
+        this.detachPlaceholder();
+        this.targetZone = zone;
+        zone.setReceiving(true);
+        const r = zone.element.getBoundingClientRect();
+        zone.emitEntered(this.zoneHover(zone, r.left + r.width / 2, r.top + r.height / 2, false));
+        this.announcer.announce(this.i18n.dndMovedToZone(zone.label()), 'assertive');
+    }
+    moveToList(list, index, crossed, fromZone = false) {
         this.targetList?.setReceiving(false);
         this.targetList = list;
         this.targetIndex = index;
         list.setReceiving(true);
         this.syncPlaceholder();
-        this.announceMove(crossed);
+        // Coming back from a zone into the same list still crossed a target.
+        this.announceMove(crossed || fromZone);
     }
     dropKeyboard() {
+        const zone = this.targetZone;
         const container = this.targetList;
         const previousContainer = this.home;
         const currentIndex = this.targetIndex;
         const previousIndex = this.homeIndex;
+        if (zone && previousContainer) {
+            const r = zone.element.getBoundingClientRect();
+            const event = this.zoneEvent(zone, r.left + r.width / 2, r.top + r.height / 2, false, previousContainer, previousIndex);
+            this.targetZone = null;
+            zone.setReceiving(false);
+            this.cleanupDom();
+            this.lifted.set(false);
+            zone.emitDrop(event);
+            this.announceDroppedInZone(zone, 'assertive');
+            return;
+        }
         this.cleanupDom();
         this.lifted.set(false);
         if (!container || !previousContainer)
@@ -801,6 +974,10 @@ class MkDrag {
     announceDropped(index, politeness) {
         this.announcer.announce(this.i18n.dndDropped(index + 1), politeness);
     }
+    /** Confirmation after a drop on a zone. */
+    announceDroppedInZone(zone, politeness) {
+        this.announcer.announce(this.i18n.dndDroppedInZone(zone.label()), politeness);
+    }
     /** The drag was cancelled and the item snapped back. */
     announceCancelled(politeness) {
         this.announcer.announce(this.i18n.dndCancelled, politeness);
@@ -821,10 +998,15 @@ class MkDrag {
     /** Snapshot every connected list's bounds + item bounds (at lift / scroll). */
     snapshotRects() {
         this.cachedGroup = this.home ? this.registry.connectedGroup(this.home) : [];
+        this.cachedZones = this.home ? this.registry.connectedZones(this.home) : [];
         this.listRects.clear();
         this.itemRects.clear();
+        this.zoneRects.clear();
         for (const list of this.cachedGroup)
             this.measureList(list);
+        for (const zone of this.cachedZones) {
+            this.zoneRects.set(zone, zone.element.getBoundingClientRect());
+        }
     }
     /** (Re)measure one list's bounds and item bounds into the cache. */
     measureList(list) {
@@ -832,25 +1014,31 @@ class MkDrag {
         this.itemRects.set(list, list.itemElementsExcept(this).map((el) => el.getBoundingClientRect()));
     }
     /**
-     * Which connected list (if any) the pointer is currently over. Pointer path
-     * only — reads the rects snapshotted at lift, not live layout.
+     * Which connected list or zone (if any) the pointer is currently over.
+     * Pointer path only — reads the rects snapshotted at lift, not live layout.
      */
-    listUnderPoint(x, y) {
-        // Every candidate whose bounds contain the point. Lists nested inside the
-        // dragged item itself are never targets (an item cannot be dropped into
-        // its own descendants).
+    targetUnderPoint(x, y) {
+        // Every candidate whose bounds contain the point. Targets nested inside the
+        // dragged item itself are never hit (an item cannot be dropped into its
+        // own descendants).
         const hits = [];
+        const inside = (r) => x >= r.left && x <= r.right && y >= r.top && y <= r.bottom;
         for (const list of this.cachedGroup) {
             if (list.element !== this.element && this.element.contains(list.element))
                 continue;
-            const r = this.listRects.get(list) ?? list.element.getBoundingClientRect();
-            if (x >= r.left && x <= r.right && y >= r.top && y <= r.bottom)
+            if (inside(this.listRects.get(list) ?? list.element.getBoundingClientRect()))
                 hits.push(list);
         }
+        for (const zone of this.cachedZones) {
+            if (this.element.contains(zone.element))
+                continue;
+            if (inside(this.zoneRects.get(zone) ?? zone.element.getBoundingClientRect()))
+                hits.push(zone);
+        }
         if (hits.length <= 1)
             return hits[0] ?? null;
-        // Nested lists: the innermost hit wins — the one that contains no other hit.
-        return (hits.find((list) => !hits.some((other) => other !== list && list.element.contains(other.element))) ??
+        // Nested targets: the innermost hit wins — the one that contains no other hit.
+        return (hits.find((t) => !hits.some((other) => other !== t && t.element.contains(other.element))) ??
             hits[0]);
     }
     /**
@@ -960,9 +1148,12 @@ class MkDrag {
         this.element.style.display = '';
         this.home?.setReceiving(false);
         this.targetList?.setReceiving(false);
+        this.leaveZone();
         this.cachedGroup = [];
+        this.cachedZones = [];
         this.listRects.clear();
         this.itemRects.clear();
+        this.zoneRects.clear();
         this.dirtyLists.clear();
         this.scrollDirty = false;
         this.lastSyncList = null;
@@ -1209,6 +1400,127 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
                     }, template: "<ng-content />\n", styles: ["@charset \"UTF-8\";:host{display:block;position:relative}:host(.mk-drop-list--receiving){outline:var(--mk-border-width-strong) solid var(--mk-primary-subtle-text);outline-offset:calc(-1 * var(--mk-border-width-strong));border-radius:var(--mk-radius-md);background-color:color-mix(in srgb,var(--mk-primary) 6%,transparent)}:host(.mk-drop-list--disabled){cursor:not-allowed}\n"] }]
         }], ctorParameters: () => [], propDecorators: { mkDropListData: [{ type: i0.Input, args: [{ isSignal: true, alias: "mkDropListData", required: false }] }], mkDropListId: [{ type: i0.Input, args: [{ isSignal: true, alias: "mkDropListId", required: false }] }], mkDropListConnectedTo: [{ type: i0.Input, args: [{ isSignal: true, alias: "mkDropListConnectedTo", required: false }] }], mkDropListLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "mkDropListLabel", required: false }] }], mkDropListLabelledBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "mkDropListLabelledBy", required: false }] }], mkDropListOrientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "mkDropListOrientation", required: false }] }], mkDropListDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "mkDropListDisabled", required: false }] }], mkDropListDropped: [{ type: i0.Output, args: ["mkDropListDropped"] }], drags: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => MkDrag), { isSignal: true }] }] } });
 
+/**
+ * A drop **target** that is not a list: an item dragged out of a connected
+ * `[mkDropList]` can be released anywhere on it, and the zone reports *where*
+ * — client coordinates, the offset inside the zone and the 0–1 fraction along
+ * each axis — so the consumer can turn a position into meaning: a time on a
+ * timeline, a priority band, a "focus on this" pane, a trash can.
+ *
+ * Nothing reorders and no placeholder is shown while an item hovers a zone;
+ * the zone gets the `mk-drop-zone--receiving` class and a stream of
+ * {@link mkDropZoneMoved} events instead. Zones and lists can overlap — the
+ * innermost target under the pointer wins, so a column can hold three
+ * priority bands and still accept plain drops between the bands.
+ *
+ * Wire a zone exactly like another list: give it an id and name that id in
+ * the source list's `mkDropListConnectedTo`.
+ *
+ * Keyboard: a lifted item reaches zones with the arrow keys that cross lists
+ * (Left/Right in a vertical list, Up/Down in a horizontal one) — zones sit in
+ * the same DOM-ordered travel group as connected lists; Space/Enter drops at
+ * the zone's centre. Every step is announced.
+ *
+ * ```html
+ * <ul mkDropList mkDropListId="backlog" [mkDropListConnectedTo]="['now', 'rail']" …>
+ * <section mkDropZone mkDropZoneId="now" mkDropZoneLabel="Focus now"
+ *          (mkDropZoneDropped)="focus($event.item.mkDragData())">
+ * <div mkDropZone mkDropZoneId="rail" mkDropZoneLabel="Today"
+ *      (mkDropZoneMoved)="preview($event.fractionY)"
+ *      (mkDropZoneDropped)="schedule($event.item.mkDragData(), $event.fractionY)">
+ * ```
+ *
+ * @typeParam Z the zone's own payload type (`mkDropZoneData`).
+ * @typeParam T the dragged item's data type. A zone cannot infer it from a
+ *   binding the way a list does from `mkDropListData`, so it defaults to
+ *   `any` — a handler typed `(e: MkDropZoneEvent<Task>) => …` binds directly.
+ */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any -- see the class doc
+class MkDropZone {
+    registry = inject(MkDragDropRegistry);
+    /** The zone's host element (drop target bounds). */
+    element = inject(ElementRef).nativeElement;
+    /** Stable id source lists name in `mkDropListConnectedTo`. Auto-generated when omitted. */
+    mkDropZoneId = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "mkDropZoneId" }] : /* istanbul ignore next */ []));
+    /**
+     * Human-readable name, used in screen-reader announcements when a lifted
+     * item reaches the zone ("Moved to Focus now") and as the zone's accessible
+     * name. Set it: the fallback is the id, which may be generated gibberish.
+     */
+    mkDropZoneLabel = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "mkDropZoneLabel" }] : /* istanbul ignore next */ []));
+    /** Id of a visible element that names the zone (`aria-labelledby`); wins over the label as the accessible name. */
+    mkDropZoneLabelledBy = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "mkDropZoneLabelledBy" }] : /* istanbul ignore next */ []));
+    /** Arbitrary payload handed back on every hover and drop event. */
+    mkDropZoneData = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "mkDropZoneData" }] : /* istanbul ignore next */ []));
+    /** Disable dropping onto this zone (it leaves the travel group too). */
+    mkDropZoneDisabled = input(false, { ...(ngDevMode ? { debugName: "mkDropZoneDisabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** An item entered the zone (pointer or keyboard). */
+    mkDropZoneEntered = output();
+    /** The pointer moved while over the zone (one per frame, pointer only). */
+    mkDropZoneMoved = output();
+    /** The item left the zone without dropping (moved on, or the drag was cancelled). */
+    mkDropZoneLeft = output();
+    /** The item was released on the zone. */
+    mkDropZoneDropped = output();
+    /** Resolved id (input or generated). */
+    id = computed(() => this.mkDropZoneId() ?? this.autoId, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+    autoId = mkUniqueId('mk-drop-zone');
+    /** Announceable name: the label when set, otherwise the resolved id. */
+    label = computed(() => this.mkDropZoneLabel() || this.id(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    /** A `role` written in the template is kept; a zone is otherwise a named `group`. */
+    role = this.element.getAttribute('role') ?? 'group';
+    staticAriaLabel = this.element.getAttribute('aria-label');
+    ariaLabel = computed(() => this.mkDropZoneLabelledBy() ? null : this.mkDropZoneLabel() || this.staticAriaLabel || null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    /** Highlight while a drag is hovering (or a keyboard-lifted item sits on) the zone. */
+    _receiving = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_receiving" }] : /* istanbul ignore next */ []));
+    constructor() {
+        effect((onCleanup) => {
+            const id = this.id();
+            this.registry.registerZone(id, this);
+            onCleanup(() => this.registry.unregisterZone(id, this));
+        });
+    }
+    /** Toggle the "receiving" highlight (called by the active drag). */
+    setReceiving(value) {
+        this._receiving.set(value);
+    }
+    /** Called by the active `MkDrag` — not part of the consumer API. */
+    emitEntered(event) {
+        this.mkDropZoneEntered.emit(event);
+    }
+    emitMoved(event) {
+        this.mkDropZoneMoved.emit(event);
+    }
+    emitLeft(item) {
+        this.mkDropZoneLeft.emit(item);
+    }
+    emitDrop(event) {
+        this.mkDropZoneDropped.emit(event);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkDropZone, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.7", type: MkDropZone, isStandalone: true, selector: "[mkDropZone]", inputs: { mkDropZoneId: { classPropertyName: "mkDropZoneId", publicName: "mkDropZoneId", isSignal: true, isRequired: false, transformFunction: null }, mkDropZoneLabel: { classPropertyName: "mkDropZoneLabel", publicName: "mkDropZoneLabel", isSignal: true, isRequired: false, transformFunction: null }, mkDropZoneLabelledBy: { classPropertyName: "mkDropZoneLabelledBy", publicName: "mkDropZoneLabelledBy", isSignal: true, isRequired: false, transformFunction: null }, mkDropZoneData: { classPropertyName: "mkDropZoneData", publicName: "mkDropZoneData", isSignal: true, isRequired: false, transformFunction: null }, mkDropZoneDisabled: { classPropertyName: "mkDropZoneDisabled", publicName: "mkDropZoneDisabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { mkDropZoneEntered: "mkDropZoneEntered", mkDropZoneMoved: "mkDropZoneMoved", mkDropZoneLeft: "mkDropZoneLeft", mkDropZoneDropped: "mkDropZoneDropped" }, host: { properties: { "attr.role": "role", "attr.aria-label": "ariaLabel()", "attr.aria-labelledby": "mkDropZoneLabelledBy() || null", "attr.aria-disabled": "mkDropZoneDisabled() || null", "class.mk-drop-zone--receiving": "_receiving()", "class.mk-drop-zone--disabled": "mkDropZoneDisabled()" }, classAttribute: "mk-drop-zone" }, exportAs: ["mkDropZone"], ngImport: i0, template: '<ng-content />', isInline: true, styles: ["@charset \"UTF-8\";:host{display:block;position:relative}:host(.mk-drop-zone--receiving){outline:var(--mk-border-width-strong) dashed var(--mk-primary);outline-offset:calc(-1 * var(--mk-border-width-strong));border-radius:var(--mk-radius-md);background-color:color-mix(in srgb,var(--mk-primary) 8%,transparent)}:host(.mk-drop-zone--disabled){cursor:not-allowed}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkDropZone, decorators: [{
+            type: Component,
+            args: [{ selector: '[mkDropZone]', exportAs: 'mkDropZone', template: '<ng-content />', changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'mk-drop-zone',
+                        '[attr.role]': 'role',
+                        '[attr.aria-label]': 'ariaLabel()',
+                        '[attr.aria-labelledby]': 'mkDropZoneLabelledBy() || null',
+                        '[attr.aria-disabled]': 'mkDropZoneDisabled() || null',
+                        '[class.mk-drop-zone--receiving]': '_receiving()',
+                        '[class.mk-drop-zone--disabled]': 'mkDropZoneDisabled()',
+                    }, styles: ["@charset \"UTF-8\";:host{display:block;position:relative}:host(.mk-drop-zone--receiving){outline:var(--mk-border-width-strong) dashed var(--mk-primary);outline-offset:calc(-1 * var(--mk-border-width-strong));border-radius:var(--mk-radius-md);background-color:color-mix(in srgb,var(--mk-primary) 8%,transparent)}:host(.mk-drop-zone--disabled){cursor:not-allowed}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { mkDropZoneId: [{ type: i0.Input, args: [{ isSignal: true, alias: "mkDropZoneId", required: false }] }], mkDropZoneLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "mkDropZoneLabel", required: false }] }], mkDropZoneLabelledBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "mkDropZoneLabelledBy", required: false }] }], mkDropZoneData: [{ type: i0.Input, args: [{ isSignal: true, alias: "mkDropZoneData", required: false }] }], mkDropZoneDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "mkDropZoneDisabled", required: false }] }], mkDropZoneEntered: [{ type: i0.Output, args: ["mkDropZoneEntered"] }], mkDropZoneMoved: [{ type: i0.Output, args: ["mkDropZoneMoved"] }], mkDropZoneLeft: [{ type: i0.Output, args: ["mkDropZoneLeft"] }], mkDropZoneDropped: [{ type: i0.Output, args: ["mkDropZoneDropped"] }] } });
+
 /**
  * Thin convenience wrapper over a single `[mkDropList]` for the common
  * "reorderable list" case. Bind `items` two-way and provide an `<ng-template>`
@@ -1283,5 +1595,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { MkDrag, MkDragDropRegistry, MkDragHandle, MkDropList, MkSortableList, mkMoveItemInArray, mkTransferArrayItem };
+export { MkDrag, MkDragDropRegistry, MkDragHandle, MkDropList, MkDropZone, MkSortableList, mkMoveItemInArray, mkTransferArrayItem };
 //# sourceMappingURL=mk-kit-ui-dnd.mjs.map