import { Host, h } from "@stencil/core";
import { tokenizeHotkeyString } from "../../util/hotkeys";
import { isAppleDevice } from "../../util/device";
import { formatDisplayToken } from "./format-display-token";
/**
 * This is a display-only component used to visualize keyboard shortcuts.
 * It renders hotkey strings as styled `<kbd>` elements with
 * platform-aware glyphs (e.g. `⌘` on macOS, `⊞ Win` on Windows).
 *
 * It does **not** listen for or handle any keyboard events.
 * Keyboard event handling is the responsibility of the parent component
 * (e.g. `limel-menu` or `limel-select`).
 *
 * @exampleComponent limel-example-hotkey-basic
 * @exampleComponent limel-example-hotkey-disabled
 * @private
 */
export class Hotkey {
    constructor() {
        /**
         * When `true`, the hotkey is rendered in a visually disabled state.
         */
        this.disabled = false;
    }
    componentWillLoad() {
        this.isApple = isAppleDevice();
    }
    render() {
        const parts = tokenizeHotkeyString(this.value);
        const displayParts = parts.map((part) => formatDisplayToken(part, this.isApple));
        const ariaLabel = displayParts
            .map((p) => p.ariaName)
            .filter(Boolean)
            .join(' ');
        return (h(Host, { key: 'ab1b9d31080740d19a4633c8c5bc92b02625c111', "aria-label": ariaLabel || undefined }, displayParts.map(({ display, isGlyph }, index) => (h("kbd", { key: `${parts[index]}-${index}`, class: isGlyph ? 'is-glyph' : undefined }, h("span", null, display))))));
    }
    static get is() { return "limel-hotkey"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["hotkey.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["hotkey.css"]
        };
    }
    static get properties() {
        return {
            "value": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "The hotkey string to visualize, e.g. `\"meta+c\"` or `\"shift+enter\"`."
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "attribute": "value"
            },
            "disabled": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "When `true`, the hotkey is rendered in a visually disabled state."
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "attribute": "disabled",
                "defaultValue": "false"
            }
        };
    }
}
