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