import { h, Host } from "@stencil/core";
import translate from "../../global/translations";
/**
 * This component resembles a drag handle button, but is implemented
 * as a `private` component to allow for easier styling and future extensions.
 *
 * :::important
 * This component has its `shadow` set to `false` in order to
 * integrate well with the drag-and-drop functionality, as well as
 * providing a better accessibility.
 *
 * Keep in mind that its styles might be affected by the consumer
 * component, due to its light dom.
 * :::
 *
 * :::tip
 * It's recommended to place the drag handle on the right side of
 * the item it is meant to reorder, to ensure consistent layout
 * design conventions.
 * :::
 *
 * @exampleComponent limel-example-drag-handle-basic
 * @exampleComponent limel-example-drag-handle-horizontal
 *
 * @private
 */
export class DragHandleComponent {
    constructor() {
        /**
         * The direction in which the drag handle can be used to reorder items.
         */
        this.dragDirection = 'vertical';
        /**
         * The preferred direction for the tooltip to open.
         * Defaults to 'left', as our recommended placement for a drag handle
         * in the UI is on the far right side of draggable elements.
         */
        this.tooltipOpenDirection = 'left';
        /**
         * Language to use for translations.
         */
        this.language = 'en';
        this.dragHandleId = 'drag-handle-' + crypto.randomUUID();
        this.handleClick = (event) => {
            // Prevent bubbling so the parent item does not treat the pointer click as
            // a toggle or reorder action.
            event.preventDefault();
            event.stopPropagation();
        };
    }
    render() {
        const tooltipLabel = translate.get('drag-handle.drag-to-reorder', this.language);
        const ariaLabel = translate.get('drag-handle.drag-handle', this.language);
        return (h(Host, { key: 'cdc2934af9efc0aa9cd9a10ca95512c6585d59bd' }, h("button", { key: '77523e84ce813eed4b31f66dcdba296de46d2dd9', "data-drag-handle": true, type: "button", class: "limel-drag-handle", tabindex: -1, "aria-label": ariaLabel, id: this.dragHandleId, onClick: this.handleClick }, h("div", { key: '02c38fbc191483c6b1e8197516c3d462e8a2d894', class: "drag-icon", role: "presentation", "aria-hidden": "true" }, h("div", { key: "1" }), h("div", { key: "2" }), h("div", { key: "3" }), h("div", { key: "4" }), h("div", { key: "5" }), h("div", { key: "6" })), h("limel-tooltip", { key: '4cf2b4324230fae2faa607e7cec9758b4850b587', openDirection: this.tooltipOpenDirection, elementId: this.dragHandleId, label: tooltipLabel }))));
    }
    static get is() { return "limel-drag-handle"; }
    static get originalStyleUrls() {
        return {
            "$": ["drag-handle.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["drag-handle.css"]
        };
    }
    static get properties() {
        return {
            "dragDirection": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "'vertical' | 'horizontal'",
                    "resolved": "\"horizontal\" | \"vertical\"",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "The direction in which the drag handle can be used to reorder items."
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "attribute": "drag-direction",
                "defaultValue": "'vertical'"
            },
            "tooltipOpenDirection": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "OpenDirection",
                    "resolved": "\"bottom\" | \"bottom-end\" | \"bottom-start\" | \"left\" | \"left-end\" | \"left-start\" | \"right\" | \"right-end\" | \"right-start\" | \"top\" | \"top-end\" | \"top-start\"",
                    "references": {
                        "OpenDirection": {
                            "location": "import",
                            "path": "../menu/menu.types",
                            "id": "src/components/menu/menu.types.ts::OpenDirection",
                            "referenceLocation": "OpenDirection"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "The preferred direction for the tooltip to open.\nDefaults to 'left', as our recommended placement for a drag handle\nin the UI is on the far right side of draggable elements."
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "attribute": "tooltip-open-direction",
                "defaultValue": "'left'"
            },
            "language": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "Languages",
                    "resolved": "\"da\" | \"de\" | \"en\" | \"fi\" | \"fr\" | \"nb\" | \"nl\" | \"no\" | \"sv\"",
                    "references": {
                        "Languages": {
                            "location": "import",
                            "path": "../date-picker/date.types",
                            "id": "src/components/date-picker/date.types.ts::Languages",
                            "referenceLocation": "Languages"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Language to use for translations."
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "attribute": "language",
                "defaultValue": "'en'"
            }
        };
    }
}
