/* 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