import { Host, h, } from "@stencil/core";
import classNames from "classnames";
import { isNestedInIfxComponent } from "../..//shared/utils/dom-utils";
import { detectFramework } from "../..//shared/utils/framework-detection";
import { trackComponent } from "../../shared/utils/tracking";
export class IconButton {
    el;
    /**
     * Visual style of the icon button.
     * Primary has a solid background, secondary has an outline and tertiary is just the icon with no background or border.
     * @default "primary"
     */
    variant = "primary";
    /**
     * Size of the icon button.
     * Options: xs (20px), s (32px), m (36px) and l (40px).
     * @default "m"
     */
    size = "m";
    /**
     * Disables the button and blocks user interaction.
     * @default false
     */
    disabled = false;
    /**
     * Icon name rendered by the nested `ifx-icon`.
     * Refer to the [Icon Library](https://infineon.github.io/infineon-design-system-stencil/storybook/?path=/docs/icon-library--development) for available icons.
     */
    icon;
    updateIcon(newIcon) {
        this.internalIcon = newIcon;
    }
    /**
     * URL to navigate to; when provided, the component renders as a link.
     */
    href;
    /**
     * Target for link navigation when `href` is set.
     * @default "_self"
     */
    target = "_self";
    /**
     * Visual shape of the icon button.
     * @default "round"
     */
    shape = "round";
    /**
     * Accessible name announced by assistive technologies.
     */
    ariaLabelText;
    internalIcon;
    focusableElement;
    /**
     * Sets focus on the icon button. If the button is rendered as a link, it focuses the anchor element; otherwise, it focuses the button element.
     */
    async setFocus() {
        this.focusableElement.focus();
    }
    handleClick(event) {
        if (this.disabled) {
            event.stopImmediatePropagation();
        }
    }
    componentWillLoad() {
        this.internalIcon = this.icon;
    }
    async componentDidLoad() {
        if (!isNestedInIfxComponent(this.el)) {
            const framework = detectFramework();
            trackComponent("ifx-icon-button", await framework);
        }
    }
    render() {
        return (h(Host, { key: 'f49a3ed9259acb2f9ae740cd85f81f01c88871ac', "aria-disabled": this.disabled, "aria-label": this.ariaLabelText }, this.href ? (h("a", { ref: (el) => (this.focusableElement = el), class: this.getClassNames(), href: !this.disabled ? this.href : undefined, target: this.target, rel: this.target === "_blank" ? "noopener noreferrer" : undefined }, h("ifx-icon", { icon: this.internalIcon }))) : (h("button", { class: this.getClassNames(), type: "button", disabled: this.disabled }, h("ifx-icon", { icon: this.internalIcon })))));
    }
    getVariantClass() {
        return `${this.variant}` === "secondary"
            ? `secondary`
            : `${this.variant}` === "tertiary"
                ? `tertiary`
                : `primary`;
    }
    getSizeClass() {
        return ["xs", "s", "m", "l"].includes(this.size) ? this.size : "m";
    }
    getClassNames() {
        const shape = this.shape || "round";
        return classNames("btn icon-button", `btn-${shape}`, `btn-${this.getSizeClass()}`, `btn-${this.getVariantClass()}`, this.disabled ? "disabled" : "");
    }
    static get is() { return "ifx-icon-button"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["icon-button.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["icon-button.css"]
        };
    }
    static get properties() {
        return {
            "variant": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "\"primary\" | \"secondary\" | \"tertiary\"",
                    "resolved": "\"primary\" | \"secondary\" | \"tertiary\"",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "default",
                            "text": "\"primary\""
                        }],
                    "text": "Visual style of the icon button.\nPrimary has a solid background, secondary has an outline and tertiary is just the icon with no background or border."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "variant",
                "defaultValue": "\"primary\""
            },
            "size": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "\"xs\" | \"s\" | \"m\" | \"l\"",
                    "resolved": "\"l\" | \"m\" | \"s\" | \"xs\"",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "default",
                            "text": "\"m\""
                        }],
                    "text": "Size of the icon button.\nOptions: xs (20px), s (32px), m (36px) and l (40px)."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "size",
                "defaultValue": "\"m\""
            },
            "disabled": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "default",
                            "text": "false"
                        }],
                    "text": "Disables the button and blocks user interaction."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "disabled",
                "defaultValue": "false"
            },
            "icon": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Icon name rendered by the nested `ifx-icon`.\nRefer to the [Icon Library](https://infineon.github.io/infineon-design-system-stencil/storybook/?path=/docs/icon-library--development) for available icons."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "icon"
            },
            "href": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "URL to navigate to; when provided, the component renders as a link."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "href"
            },
            "target": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "default",
                            "text": "\"_self\""
                        }],
                    "text": "Target for link navigation when `href` is set."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "target",
                "defaultValue": "\"_self\""
            },
            "shape": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "\"round\" | \"square\"",
                    "resolved": "\"round\" | \"square\"",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "default",
                            "text": "\"round\""
                        }],
                    "text": "Visual shape of the icon button."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "shape",
                "defaultValue": "\"round\""
            },
            "ariaLabelText": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string | null",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Accessible name announced by assistive technologies."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "aria-label-text"
            }
        };
    }
    static get states() {
        return {
            "internalIcon": {}
        };
    }
    static get methods() {
        return {
            "setFocus": {
                "complexType": {
                    "signature": "() => Promise<void>",
                    "parameters": [],
                    "references": {
                        "Promise": {
                            "location": "global",
                            "id": "global::Promise"
                        }
                    },
                    "return": "Promise<void>"
                },
                "docs": {
                    "text": "Sets focus on the icon button. If the button is rendered as a link, it focuses the anchor element; otherwise, it focuses the button element.",
                    "tags": []
                }
            }
        };
    }
    static get elementRef() { return "el"; }
    static get watchers() {
        return [{
                "propName": "icon",
                "methodName": "updateIcon"
            }];
    }
    static get listeners() {
        return [{
                "name": "click",
                "method": "handleClick",
                "target": undefined,
                "capture": true,
                "passive": false
            }];
    }
}
