import { h, Host } from "@stencil/core";
import { getRel } from "../../util/link-helper";
import { getMouseEventHandlers } from "../../util/3d-tilt-hover-effect";
/**
 * This component can be used on places such as a start page or a dashboard.
 * Clicking on the component should navigate the user to a new screen,
 * to which you need to provide a URL, by specifying an `href` for the `link` property.
 *
 * By default, this navigation will happen within the same browser tab.
 * However, it is possible to override that behavior, by specifying a `target`
 * for the `link` property
 *
 * @exampleComponent limel-example-shortcut-basic
 * @exampleComponent limel-example-shortcut-notification
 * @exampleComponent limel-example-shortcut-styling
 * @exampleComponent limel-example-shortcut-with-click-handler
 */
export class Shortcut {
    constructor() {
        /**
         * The text to show below the shortcut. Long label will be truncated.
         */
        this.label = null;
        /**
         * Set to `true` if shortcut is disabled.
         */
        this.disabled = false;
        this.renderLabel = () => {
            if (this.label) {
                return h("span", { "aria-hidden": "true" }, this.label);
            }
        };
        this.getAriaLabel = () => {
            var _a, _b;
            if (this.label && ((_a = this.link) === null || _a === void 0 ? void 0 : _a.title)) {
                return this.label + '. ' + this.link.title;
            }
            if (this.label) {
                return this.label;
            }
            if ((_b = this.link) === null || _b === void 0 ? void 0 : _b.title) {
                return this.link.title;
            }
        };
        this.renderNotification = () => {
            if (this.badge) {
                return h("limel-badge", { label: this.badge });
            }
        };
    }
    componentWillLoad() {
        const { handleMouseEnter, handleMouseLeave } = getMouseEventHandlers(this.host);
        this.handleMouseEnter = handleMouseEnter;
        this.handleMouseLeave = handleMouseLeave;
    }
    render() {
        var _a, _b, _c, _d, _e;
        const rel = getRel((_a = this.link) === null || _a === void 0 ? void 0 : _a.target, (_b = this.link) === null || _b === void 0 ? void 0 : _b.rel);
        return (h(Host, { key: 'cfca58724948367892595cd9dd49d4482ac61bf3', onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, h("a", { key: 'f13f91fa379319448a95ca0182f61d375636b952', "aria-disabled": this.disabled, href: (_c = this.link) === null || _c === void 0 ? void 0 : _c.href, target: (_d = this.link) === null || _d === void 0 ? void 0 : _d.target, rel: rel, tabindex: "0", "aria-label": this.getAriaLabel(), title: (_e = this.link) === null || _e === void 0 ? void 0 : _e.title }, h("limel-icon", { key: '3d5b929acb6a26081626098f69cd29fb70b42faa', name: this.icon }), h("limel-3d-hover-effect-glow", { key: '05dd83b54485aa7fdbc103e84f50532313e4b8f0' })), this.renderLabel(), this.renderNotification()));
    }
    static get is() { return "limel-shortcut"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["shortcut.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["shortcut.css"]
        };
    }
    static get properties() {
        return {
            "icon": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Name of icon for the shortcut."
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "attribute": "icon"
            },
            "label": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "The text to show below the shortcut. Long label will be truncated."
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "attribute": "label",
                "defaultValue": "null"
            },
            "disabled": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Set to `true` if shortcut is disabled."
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "attribute": "disabled",
                "defaultValue": "false"
            },
            "badge": {
                "type": "any",
                "mutable": false,
                "complexType": {
                    "original": "number | string",
                    "resolved": "number | string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "If specified, will display a notification badge\non the shortcut."
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "attribute": "badge"
            },
            "link": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "Link",
                    "resolved": "Link",
                    "references": {
                        "Link": {
                            "location": "import",
                            "path": "../../global/shared-types/link.types",
                            "id": "src/global/shared-types/link.types.ts::Link",
                            "referenceLocation": "Link"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "If supplied, the shortcut will be a clickable link."
                },
                "getter": false,
                "setter": false
            }
        };
    }
    static get elementRef() { return "host"; }
}
