@breadstone/mosaik-elements-foundation 0.0.224 → 0.0.227

package/DragDrop/Directives/DragDirective.js

@@ -0,0 +1,231 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+// #region Imports
+import { nothing } from 'lit';
+import { directive, PartType } from 'lit/directive.js';
+import { DirectiveBase } from '../../Controls/Directives/Abstracts/DirectiveBase';
+import { createDragRef } from '../Core/DragRef';
+/**
+ * Lit Directive for making elements draggable.
+ *
+ * @internal
+ */
+class DragDirective extends DirectiveBase {
+    // #region Fields
+    _dragRef = null;
+    _lastConfig = null;
+    // #endregion
+    // #region Ctor
+    /**
+     * @param args - Directive args.
+     */
+    constructor(args) {
+        super(args);
+        // Validate part type
+        if (args.type !== PartType.ELEMENT) {
+            throw new Error('drag() directive can only be used on elements');
+        }
+    }
+    // #endregion
+    // #region Methods
+    /**
+     * Render method.
+     *
+     * @param config - Configuration.
+     */
+    render(_config) {
+        return nothing;
+    }
+    /**
+     * Update method.
+     *
+     * @param part - Element part.
+     * @param config - Configuration.
+     */
+    update(part, [config]) {
+        const element = part.element;
+        element.setAttribute('data-drag', '');
+        // Create dragRef on first update
+        if (!this._dragRef) {
+            console.log('%c[DragDirective] Creating dragRef', 'color: #FF5722; font-weight: bold', {
+                elementTag: element.tagName,
+                config
+            });
+            this._dragRef = createDragRef(element, config);
+            if (config?.data !== undefined) {
+                this._dragRef.data = config.data;
+            }
+            this._lastConfig = config ?? null;
+            // Expose dragRef on element for dropList auto-discovery
+            element.__dragRef = this._dragRef;
+            // Auto-discover and register drag handles, preview, and placeholder (delayed to next microtask)
+            // This ensures child directives (dragHandle, dragPreview, dragPlaceholder) have been processed
+            Promise.resolve().then(() => {
+                this._discoverAndRegisterHandles(element);
+                this._discoverAndRegisterPreview(element);
+                this._discoverAndRegisterPlaceholder(element);
+            });
+            // Try to find parent drop list and register with it
+            this._registerWithParentDropList(element);
+        }
+        else if (this._configChanged(config)) {
+            // Update config if changed
+            const { data, ...refConfig } = config ?? {};
+            Object.assign(this._dragRef, refConfig);
+            if (data !== undefined) {
+                this._dragRef.data = data;
+            }
+            this._lastConfig = config ?? null;
+        }
+    }
+    // #endregion
+    // #region Private Methods
+    /**
+     * Try to find a parent drop list and register with it.
+     *
+     * @param element - The drag element.
+     *
+     * @private
+     */
+    _registerWithParentDropList(element) {
+        if (!this._dragRef) {
+            return;
+        }
+        // Walk up the DOM to find a parent with __dropListRef
+        let parent = element.parentElement;
+        while (parent) {
+            const dropListRef = parent.__dropListRef;
+            if (dropListRef) {
+                console.log('%c[DragDirective] Found parent dropList, registering', 'color: #4CAF50');
+                this._dragRef.withDropContainer(dropListRef);
+                break;
+            }
+            parent = parent.parentElement;
+        }
+    }
+    /**
+     * Discover and register drag handles within the element.
+     *
+     * @param element - The drag element.
+     *
+     * @private
+     */
+    _discoverAndRegisterHandles(element) {
+        if (!this._dragRef) {
+            return;
+        }
+        // Find all elements with data-drag-handle attribute
+        const handleElements = Array.from(element.querySelectorAll('[data-drag-handle]'));
+        if (handleElements.length > 0) {
+            console.log('%c[DragDirective] Found drag handles, registering', 'color: #9C27B0', {
+                count: handleElements.length
+            });
+            this._dragRef.withHandles(handleElements);
+        }
+        else {
+            console.log('%c[DragDirective] No drag handles found, using entire element', 'color: #9C27B0');
+        }
+    }
+    /**
+     * Discover and register custom preview template within the element.
+     *
+     * @param element - The drag element.
+     *
+     * @private
+     */
+    _discoverAndRegisterPreview(element) {
+        if (!this._dragRef) {
+            return;
+        }
+        // Find element with data-drag-preview attribute
+        const previewElement = element.querySelector('[data-drag-preview]');
+        if (previewElement) {
+            console.log('%c[DragDirective] Found drag preview template, registering', 'color: #9C27B0', {
+                element: previewElement,
+                matchSize: previewElement.getAttribute('data-preview-match-size') === 'true'
+            });
+            this._dragRef.withPreviewTemplate(previewElement);
+        }
+    }
+    /**
+     * Discover and register custom placeholder template within the element.
+     *
+     * @param element - The drag element.
+     *
+     * @private
+     */
+    _discoverAndRegisterPlaceholder(element) {
+        if (!this._dragRef) {
+            return;
+        }
+        // Find element with data-drag-placeholder attribute
+        const placeholderElement = element.querySelector('[data-drag-placeholder]');
+        if (placeholderElement) {
+            console.log('%c[DragDirective] Found drag placeholder template, registering', 'color: #9C27B0', {
+                element: placeholderElement
+            });
+            this._dragRef.withPlaceholderTemplate(placeholderElement);
+        }
+    }
+    /**
+     * Check if config changed.
+     *
+     * @param newConfig - New config.
+     * @returns True if changed.
+     *
+     * @private
+     */
+    _configChanged(newConfig) {
+        if (!this._lastConfig && !newConfig) {
+            return false;
+        }
+        if (!this._lastConfig || !newConfig) {
+            return true;
+        }
+        // Shallow comparison (excluding data)
+        const keys = Object.keys(newConfig).filter((k) => k !== 'data');
+        return keys.some((key) => {
+            const k = key;
+            return this._lastConfig[k] !== newConfig[k];
+        });
+    }
+    // #endregion
+    // #region Lifecycle
+    /**
+     * Called when the directive is disconnected from the DOM.
+     * Cleans up the drag ref.
+     *
+     * @public
+     */
+    disconnected() {
+        console.log('%c[DragDirective] Disconnected, cleaning up', 'color: #FF9800');
+        if (this._dragRef) {
+            this._dragRef.dispose();
+            this._dragRef = null;
+        }
+    }
+    /**
+     * Called when the directive is reconnected to the DOM.
+     *
+     * @public
+     */
+    reconnected() {
+        console.log('%c[DragDirective] Reconnected', 'color: #4CAF50');
+        // Drag ref will be recreated in next update
+    }
+}
+// #endregion
+/**
+ * Make an element draggable.
+ *
+ * @param config - Configuration options.
+ * @returns Directive.
+ *
+ * @public
+ *
+ * @example
+ * ```html
+ * <div ${drag({ lockAxis: 'x' })}>Drag me</div>
+ * ```
+ */
+export const drag = directive(DragDirective);
+//# sourceMappingURL=DragDirective.js.map

package/DragDrop/Directives/DragDirective.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DragDirective.js","sourceRoot":"","sources":["../../../src/DragDrop/Directives/DragDirective.ts"],"names":[],"mappings":"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"}

package/DragDrop/Directives/DragHandleDirective.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Mark an element as a drag handle.
+ * Elements with this directive will be used as handles for dragging their parent draggable.
+ *
+ * @returns Directive.
+ *
+ * @public
+ *
+ * @example
+ * ```html
+ * <div ${drag()}>
+ *   <div ${dragHandle()}>⋮⋮</div>
+ *   <div>Content</div>
+ * </div>
+ * ```
+ */
+export declare const dragHandle: (...values: Parameters<DragHandleDirective["render"]>) => any;
+//# sourceMappingURL=DragHandleDirective.d.ts.map

package/DragDrop/Directives/DragHandleDirective.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DragHandleDirective.d.ts","sourceRoot":"","sources":["../../../src/DragDrop/Directives/DragHandleDirective.ts"],"names":[],"mappings":"AAiEA;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,UAAU,EAA4C,CAAC,GAAG,MAAM,EAAE,UAAU,CAAC,mBAAmB,CAAC,QAAQ,CAAC,CAAC,KAAK,GAAG,CAAC"}

package/DragDrop/Directives/DragHandleDirective.js

@@ -0,0 +1,60 @@
+/* eslint-disable no-restricted-syntax */
+import { nothing } from 'lit';
+import { directive, PartType } from 'lit/directive.js';
+import { DirectiveBase } from '../../Controls/Directives/Abstracts/DirectiveBase';
+// #endregion
+// #region DragHandleDirective
+/**
+ * Directive for marking elements as drag handles.
+ *
+ * @internal
+ */
+class DragHandleDirective extends DirectiveBase {
+    // #region Ctor
+    /**
+     * @param args - Directive args.
+     */
+    constructor(args) {
+        super(args);
+        // Validate part type
+        if (args.type !== PartType.ELEMENT) {
+            throw new Error('dragHandle() directive can only be used on elements');
+        }
+    }
+    // #endregion
+    // #region Methods
+    /**
+     * Render method.
+     */
+    render() {
+        return nothing;
+    }
+    update(part, _args) {
+        const element = part.element;
+        element.setAttribute('data-drag-handle', '');
+        element.style.cursor = 'grab';
+        element.setAttribute('role', 'button');
+        element.setAttribute('aria-label', 'Drag handle');
+        element.setAttribute('tabindex', '0');
+        return this.render();
+    }
+}
+// #endregion
+/**
+ * Mark an element as a drag handle.
+ * Elements with this directive will be used as handles for dragging their parent draggable.
+ *
+ * @returns Directive.
+ *
+ * @public
+ *
+ * @example
+ * ```html
+ * <div ${drag()}>
+ *   <div ${dragHandle()}>⋮⋮</div>
+ *   <div>Content</div>
+ * </div>
+ * ```
+ */
+export const dragHandle = directive(DragHandleDirective);
+//# sourceMappingURL=DragHandleDirective.js.map

package/DragDrop/Directives/DragHandleDirective.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DragHandleDirective.js","sourceRoot":"","sources":["../../../src/DragDrop/Directives/DragHandleDirective.ts"],"names":[],"mappings":"AAAA,yCAAyC;AAKzC,OAAO,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AAC9B,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,EAAE,aAAa,EAAsB,MAAM,mDAAmD,CAAC;AAEtG,aAAa;AAEb,8BAA8B;AAE9B;;;;GAIG;AAEH,MAAM,mBAAoB,SAAQ,aAAa;IAE3C,eAAe;IAEf;;OAEG;IACH,YAAmB,IAAmB;QAClC,KAAK,CAAC,IAAI,CAAC,CAAC;QAEZ,qBAAqB;QACrB,IAAI,IAAI,CAAC,IAAI,KAAK,QAAQ,CAAC,OAAO,EAAE,CAAC;YACjC,MAAM,IAAI,KAAK,CAAC,qDAAqD,CAAC,CAAC;QAC3E,CAAC;IACL,CAAC;IAED,aAAa;IAEb,kBAAkB;IAElB;;OAEG;IAEI,MAAM;QACT,OAAO,OAAO,CAAC;IACnB,CAAC;IAEe,MAAM,CAAC,IAAiB,EAAE,KAAsB;QAC5D,MAAM,OAAO,GAAG,IAAI,CAAC,OAAsB,CAAC;QAE5C,OAAO,CAAC,YAAY,CAAC,kBAAkB,EAAE,EAAE,CAAC,CAAC;QAC7C,OAAO,CAAC,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC;QAC9B,OAAO,CAAC,YAAY,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC;QACvC,OAAO,CAAC,YAAY,CAAC,YAAY,EAAE,aAAa,CAAC,CAAC;QAClD,OAAO,CAAC,YAAY,CAAC,UAAU,EAAE,GAAG,CAAC,CAAC;QAEtC,OAAO,IAAI,CAAC,MAAM,EAAE,CAAC;IACzB,CAAC;CAIJ;AAED,aAAa;AAEb;;;;;;;;;;;;;;;GAeG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,SAAS,CAAC,mBAA0B,CAAkE,CAAC"}

package/DragDrop/Directives/DragPlaceholderDirective.d.ts

@@ -0,0 +1,39 @@
+import { type TemplateResult } from 'lit';
+/**
+ * Configuration for drag placeholder directive.
+ *
+ * @public
+ */
+export interface IDragPlaceholderConfig {
+    /**
+     * Template function to render custom placeholder.
+     */
+    template?: () => TemplateResult;
+    /**
+     * Optional data to pass to placeholder template.
+     */
+    data?: any;
+}
+/**
+ * Define a custom drag placeholder template.
+ * The element with this directive will be cloned and shown in place of the dragged element.
+ *
+ * @param config - Configuration options.
+ * @returns Directive.
+ *
+ * @public
+ *
+ * @example
+ * ```typescript
+ * html`
+ *   <div ${drag()}>
+ *     <div ${dragPlaceholder()}>
+ *       <div class="placeholder-style">Drop here...</div>
+ *     </div>
+ *     <div>Actual content</div>
+ *   </div>
+ * `
+ * ```
+ */
+export declare const dragPlaceholder: (...values: Parameters<DragPlaceholderDirective["render"]>) => any;
+//# sourceMappingURL=DragPlaceholderDirective.d.ts.map

package/DragDrop/Directives/DragPlaceholderDirective.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DragPlaceholderDirective.d.ts","sourceRoot":"","sources":["../../../src/DragDrop/Directives/DragPlaceholderDirective.ts"],"names":[],"mappings":"AAIA,OAAO,EAA6B,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAQrE;;;;GAIG;AACH,MAAM,WAAW,sBAAsB;IAEnC;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,cAAc,CAAC;IAEhC;;OAEG;IACH,IAAI,CAAC,EAAE,GAAG,CAAC;CACd;AAwED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,eAAO,MAAM,eAAe,EAAiD,CAAC,GAAG,MAAM,EAAE,UAAU,CAAC,wBAAwB,CAAC,QAAQ,CAAC,CAAC,KAAK,GAAG,CAAC"}

package/DragDrop/Directives/DragPlaceholderDirective.js

@@ -0,0 +1,76 @@
+/* eslint-disable no-restricted-syntax */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+// #region Imports
+import { nothing } from 'lit';
+import { directive, PartType } from 'lit/directive.js';
+import { DirectiveBase } from '../../Controls/Directives/Abstracts/DirectiveBase';
+/**
+ * Lit Directive for custom drag placeholder templates.
+ * Defines the element that remains in place while dragging.
+ *
+ * @internal
+ */
+class DragPlaceholderDirective extends DirectiveBase {
+    // #region Fields
+    _placeholderElement = null;
+    _lastConfig = null;
+    // #endregion
+    // #region Ctor
+    /**
+     * @param args - Directive args.
+     */
+    constructor(args) {
+        super(args);
+        // Validate part type
+        if (args.type !== PartType.ELEMENT) {
+            throw new Error('dragPlaceholder() directive can only be used on elements');
+        }
+    }
+    // #endregion
+    // #region Methods
+    /**
+     * Render method.
+     *
+     * @param config - Configuration.
+     */
+    render(_config) {
+        return nothing;
+    }
+    update(part, [config]) {
+        const element = part.element;
+        // Store reference
+        this._placeholderElement = element;
+        this._lastConfig = config ?? null;
+        element.setAttribute('data-drag-placeholder', '');
+        element.style.display = 'none';
+        // Store data directly as property (not serialized)
+        if (config?.data !== undefined) {
+            element.__placeholderData = config.data;
+        }
+        return this.render(config);
+    }
+}
+// #endregion
+/**
+ * Define a custom drag placeholder template.
+ * The element with this directive will be cloned and shown in place of the dragged element.
+ *
+ * @param config - Configuration options.
+ * @returns Directive.
+ *
+ * @public
+ *
+ * @example
+ * ```typescript
+ * html`
+ *   <div ${drag()}>
+ *     <div ${dragPlaceholder()}>
+ *       <div class="placeholder-style">Drop here...</div>
+ *     </div>
+ *     <div>Actual content</div>
+ *   </div>
+ * `
+ * ```
+ */
+export const dragPlaceholder = directive(DragPlaceholderDirective);
+//# sourceMappingURL=DragPlaceholderDirective.js.map

package/DragDrop/Directives/DragPlaceholderDirective.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DragPlaceholderDirective.js","sourceRoot":"","sources":["../../../src/DragDrop/Directives/DragPlaceholderDirective.ts"],"names":[],"mappings":"AAAA,yCAAyC;AACzC,uDAAuD;AACvD,kBAAkB;AAElB,OAAO,EAAE,OAAO,EAAyC,MAAM,KAAK,CAAC;AACrE,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,EAAE,aAAa,EAAsB,MAAM,mDAAmD,CAAC;AAwBtG;;;;;GAKG;AAEH,MAAM,wBAAyB,SAAQ,aAAa;IAEhD,iBAAiB;IAET,mBAAmB,GAAuB,IAAI,CAAC;IAC/C,WAAW,GAAkC,IAAI,CAAC;IAE1D,aAAa;IAEb,eAAe;IAEf;;OAEG;IACH,YAAmB,IAAmB;QAClC,KAAK,CAAC,IAAI,CAAC,CAAC;QAEZ,qBAAqB;QACrB,IAAI,IAAI,CAAC,IAAI,KAAK,QAAQ,CAAC,OAAO,EAAE,CAAC;YACjC,MAAM,IAAI,KAAK,CAAC,0DAA0D,CAAC,CAAC;QAChF,CAAC;IACL,CAAC;IAED,aAAa;IAEb,kBAAkB;IAElB;;;;OAIG;IACI,MAAM,CAAC,OAAgC;QAC1C,OAAO,OAAO,CAAC;IACnB,CAAC;IAEe,MAAM,CAClB,IAAiB,EACjB,CAAC,MAAM,CAAuC;QAE9C,MAAM,OAAO,GAAG,IAAI,CAAC,OAAsB,CAAC;QAE5C,kBAAkB;QAClB,IAAI,CAAC,mBAAmB,GAAG,OAAO,CAAC;QACnC,IAAI,CAAC,WAAW,GAAG,MAAM,IAAI,IAAI,CAAC;QAElC,OAAO,CAAC,YAAY,CAAC,uBAAuB,EAAE,EAAE,CAAC,CAAC;QAClD,OAAO,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;QAE/B,mDAAmD;QACnD,IAAI,MAAM,EAAE,IAAI,KAAK,SAAS,EAAE,CAAC;YAC5B,OAAe,CAAC,iBAAiB,GAAG,MAAM,CAAC,IAAI,CAAC;QACrD,CAAC;QAED,OAAO,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC;IAC/B,CAAC;CAIJ;AAED,aAAa;AAEb;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,SAAS,CAAC,wBAA+B,CAAuE,CAAC"}

package/DragDrop/Directives/DragPreviewDirective.d.ts

@@ -0,0 +1,45 @@
+import type { TemplateResult } from 'lit';
+/**
+ * Configuration for drag preview directive.
+ *
+ * @public
+ */
+export interface IDragPreviewConfig {
+    /**
+     * Template function to render custom preview.
+     */
+    template?: () => TemplateResult;
+    /**
+     * Whether to match size of dragged element.
+     *
+     * @defaultValue false
+     */
+    matchSize?: boolean;
+    /**
+     * Optional data to pass to preview template.
+     */
+    data?: any;
+}
+/**
+ * Define a custom drag preview template.
+ * The element with this directive will be cloned and used as the drag preview.
+ *
+ * @param config - Configuration options.
+ * @returns Directive.
+ *
+ * @public
+ *
+ * @example
+ * ```typescript
+ * html`
+ *   <div ${drag()}>
+ *     <div ${dragPreview({ matchSize: true })}>
+ *       <strong>Custom Preview!</strong>
+ *     </div>
+ *     <div>Actual content</div>
+ *   </div>
+ * `
+ * ```
+ */
+export declare const dragPreview: (...values: Parameters<DragPreviewDirective["render"]>) => any;
+//# sourceMappingURL=DragPreviewDirective.d.ts.map

package/DragDrop/Directives/DragPreviewDirective.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DragPreviewDirective.d.ts","sourceRoot":"","sources":["../../../src/DragDrop/Directives/DragPreviewDirective.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAe,cAAc,EAAE,MAAM,KAAK,CAAC;AAQvD;;;;GAIG;AACH,MAAM,WAAW,kBAAkB;IAE/B;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,cAAc,CAAC;IAEhC;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;OAEG;IACH,IAAI,CAAC,EAAE,GAAG,CAAC;CACd;AAiFD;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,eAAO,MAAM,WAAW,EAA6C,CAAC,GAAG,MAAM,EAAE,UAAU,CAAC,oBAAoB,CAAC,QAAQ,CAAC,CAAC,KAAK,GAAG,CAAC"}

package/DragDrop/Directives/DragPreviewDirective.js

@@ -0,0 +1,81 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+// #region Imports
+import { directive, PartType } from 'lit/directive.js';
+import { DirectiveBase } from '../../Controls/Directives/Abstracts/DirectiveBase';
+/**
+ * Lit Directive for custom drag preview templates.
+ * Allows defining a custom preview element that appears during drag.
+ *
+ * @internal
+ */
+class DragPreviewDirective extends DirectiveBase {
+    // #region Fields
+    _previewElement = null;
+    _lastConfig = null;
+    // #endregion
+    // #region Ctor
+    /**
+     * @param args - Directive args.
+     */
+    constructor(args) {
+        super(args);
+        // Validate part type
+        if (args.type !== PartType.ELEMENT) {
+            throw new Error('dragPreview() directive can only be used on elements');
+        }
+    }
+    // #endregion
+    // #region Methods
+    /**
+     * Render method.
+     *
+     * @private
+     */
+    render(_config) {
+        // Render returns nothing - all work is done in update
+        return undefined;
+    }
+    update(part, [config]) {
+        const element = part.element;
+        // Store reference
+        this._previewElement = element;
+        this._lastConfig = config ?? null;
+        // Add marker attribute for DragController to find
+        element.setAttribute('data-drag-preview', '');
+        // Hide by default (will be shown/cloned during drag)
+        element.setAttribute('style', 'display: none');
+        // Store config as data attribute for DragController
+        if (config?.matchSize) {
+            element.setAttribute('data-preview-match-size', 'true');
+        }
+        // Store data directly as property (not serialized)
+        if (config?.data !== undefined) {
+            element.__previewData = config.data;
+        }
+        return this.render(config);
+    }
+}
+// #endregion
+/**
+ * Define a custom drag preview template.
+ * The element with this directive will be cloned and used as the drag preview.
+ *
+ * @param config - Configuration options.
+ * @returns Directive.
+ *
+ * @public
+ *
+ * @example
+ * ```typescript
+ * html`
+ *   <div ${drag()}>
+ *     <div ${dragPreview({ matchSize: true })}>
+ *       <strong>Custom Preview!</strong>
+ *     </div>
+ *     <div>Actual content</div>
+ *   </div>
+ * `
+ * ```
+ */
+export const dragPreview = directive(DragPreviewDirective);
+//# sourceMappingURL=DragPreviewDirective.js.map

package/DragDrop/Directives/DragPreviewDirective.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DragPreviewDirective.js","sourceRoot":"","sources":["../../../src/DragDrop/Directives/DragPreviewDirective.ts"],"names":[],"mappings":"AAAA,uDAAuD;AACvD,kBAAkB;AAGlB,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,EAAE,aAAa,EAAsB,MAAM,mDAAmD,CAAC;AA+BtG;;;;;GAKG;AAEH,MAAM,oBAAqB,SAAQ,aAAa;IAE5C,iBAAiB;IAET,eAAe,GAAuB,IAAI,CAAC;IAC3C,WAAW,GAA8B,IAAI,CAAC;IAEtD,aAAa;IAEb,eAAe;IAEf;;OAEG;IACH,YAAmB,IAAmB;QAClC,KAAK,CAAC,IAAI,CAAC,CAAC;QAEZ,qBAAqB;QACrB,IAAI,IAAI,CAAC,IAAI,KAAK,QAAQ,CAAC,OAAO,EAAE,CAAC;YACjC,MAAM,IAAI,KAAK,CAAC,sDAAsD,CAAC,CAAC;QAC5E,CAAC;IACL,CAAC;IAED,aAAa;IAEb,kBAAkB;IAElB;;;;OAIG;IACI,MAAM,CAAC,OAA4B;QACtC,sDAAsD;QACtD,OAAO,SAAS,CAAC;IACrB,CAAC;IAEe,MAAM,CAClB,IAAiB,EACjB,CAAC,MAAM,CAAmC;QAE1C,MAAM,OAAO,GAAG,IAAI,CAAC,OAAsB,CAAC;QAE5C,kBAAkB;QAClB,IAAI,CAAC,eAAe,GAAG,OAAO,CAAC;QAC/B,IAAI,CAAC,WAAW,GAAG,MAAM,IAAI,IAAI,CAAC;QAElC,kDAAkD;QAClD,OAAO,CAAC,YAAY,CAAC,mBAAmB,EAAE,EAAE,CAAC,CAAC;QAE9C,qDAAqD;QACrD,OAAO,CAAC,YAAY,CAAC,OAAO,EAAE,eAAe,CAAC,CAAC;QAE/C,oDAAoD;QACpD,IAAI,MAAM,EAAE,SAAS,EAAE,CAAC;YACpB,OAAO,CAAC,YAAY,CAAC,yBAAyB,EAAE,MAAM,CAAC,CAAC;QAC5D,CAAC;QAED,mDAAmD;QACnD,IAAI,MAAM,EAAE,IAAI,KAAK,SAAS,EAAE,CAAC;YAC5B,OAAe,CAAC,aAAa,GAAG,MAAM,CAAC,IAAI,CAAC;QACjD,CAAC;QAED,OAAO,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC;IAC/B,CAAC;CAIJ;AAED,aAAa;AAEb;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,SAAS,CAAC,oBAA2B,CAAmE,CAAC"}

package/DragDrop/Directives/DropListDirective.d.ts

@@ -0,0 +1,44 @@
+import type { DragRef } from '../Core/DragRef';
+import { type DropListRef } from '../Core/DropListRef';
+import type { IDropListRefConfig } from '../Core/Types';
+/**
+ * Directive configuration.
+ */
+export interface IDropListDirectiveConfig<TData = unknown, TItem = any> extends IDropListRefConfig {
+    /**
+     * Data associated with this drop list.
+     */
+    data?: TData;
+    /**
+     * Items in the list.
+     */
+    items?: Array<DragRef<TItem>>;
+    /**
+     * Connected drop lists (DropListRef, not Controller).
+     */
+    connectedTo?: Array<DropListRef<unknown, TItem>>;
+    /**
+     * Whether to automatically discover child drag items.
+     * When true, the directive will scan for child elements with drag directives.
+     *
+     * @defaultValue true
+     */
+    autoDiscoverItems?: boolean;
+}
+/**
+ * Make an element a drop container.
+ *
+ * @param config - Configuration options.
+ * @returns Directive.
+ *
+ * @public
+ *
+ * @example
+ * ```html
+ * <div ${dropList({ orientation: 'horizontal' })}>
+ *   <!-- Draggable items -->
+ * </div>
+ * ```
+ */
+export declare const dropList: (...values: Parameters<DropListDirective["render"]>) => any;
+//# sourceMappingURL=DropListDirective.d.ts.map

package/DragDrop/Directives/DropListDirective.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DropListDirective.d.ts","sourceRoot":"","sources":["../../../src/DragDrop/Directives/DropListDirective.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC;AAE/C,OAAO,EAAqB,KAAK,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAC1E,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAMxD;;GAEG;AACH,MAAM,WAAW,wBAAwB,CAAC,KAAK,GAAG,OAAO,EAAE,KAAK,GAAG,GAAG,CAClE,SAAQ,kBAAkB;IAE1B;;OAEG;IACH,IAAI,CAAC,EAAE,KAAK,CAAC;IAEb;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC;IAE9B;;OAEG;IACH,WAAW,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC,CAAC;IAEjD;;;;;OAKG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC/B;AAkRD;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,QAAQ,EAA0C,CAAC,GAAG,MAAM,EAAE,UAAU,CAAC,iBAAiB,CAAC,QAAQ,CAAC,CAAC,KAAK,GAAG,CAAC"}