'use strict';

var index = require('./index-pX0sBY0-.js');
var index$1 = require('./index-CVw4GUo6.js');
var domUtils = require('./dom-utils-BdvOgC2b.js');
var tracking = require('./tracking-BPjaTlNR.js');
require('./_commonjsHelpers-CFO10eej.js');

const iconButtonCss = () => `:host{display:inline-flex}.btn{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:8px;gap:8px;color:#FFFFFF;flex-direction:row;font-weight:600;border-radius:1px;line-height:1.5rem;outline:none;font-family:var(--ifx-font-family);text-decoration:none;user-select:none;border:1px solid rgba(0, 0, 0, 0);font-size:1rem;transition:color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out}.btn:not(.disabled){cursor:pointer}.btn-primary{color:#FFFFFF;background-color:#0A8276}.btn-primary:disabled,.btn-primary.disabled{background-color:#BFBBBB;color:#FFFFFF;pointer-events:none}.btn-secondary{color:#0A8276;background-color:#FFFFFF;border-color:#0A8276}.btn-secondary:disabled,.btn-secondary.disabled{background-color:#FFFFFF;border:1px solid #BFBBBB;color:#BFBBBB;pointer-events:none}.btn-tertiary{background-color:transparent;color:#1D1D1D}.btn-tertiary:disabled,.btn-tertiary.disabled{color:#BFBBBB;pointer-events:none}.btn.icon-button{min-width:initial;min-height:initial;width:40px;height:40px;padding:0;justify-content:center}.btn.icon-button.btn-round{border-radius:100px}.btn.icon-button.btn-square{border-radius:1px}.btn.icon-button.btn-xs{width:20px;height:20px;padding:2px}.btn.icon-button.btn-s{width:32px;height:32px;padding:8px}.btn.icon-button.btn-m{width:40px;height:40px;padding:0}.btn.icon-button.btn-l{width:48px;height:48px;padding:8px}.btn.btn-primary:not(:disabled,.disabled):focus:not(:active,.active){outline:none;box-shadow:0 0 0 2px #FFFFFF, 0 0 0 4px #0A8276}.btn.btn-primary:not(:disabled,.disabled):hover{background-color:#08665C;border-color:#08665C}.btn.btn-primary:not(:disabled,.disabled):active,.btn.btn-primary:not(:disabled,.disabled).active{background-color:#06534B;border-color:#06534B}.btn.btn-secondary:not(:disabled,.disabled):focus:not(:active,.active){outline:none;box-shadow:0 0 0 2px #FFFFFF, 0 0 0 4px #0A8276}.btn.btn-secondary:not(:disabled,.disabled):hover{background-color:#08665C;border-color:#08665C;color:#FFFFFF}.btn.btn-secondary:not(:disabled,.disabled):active,.btn.btn-secondary:not(:disabled,.disabled).active{background-color:#06534B;border-color:#06534B}.btn.btn-tertiary:not(:disabled,.disabled):focus:not(:active,.active){outline:none;color:#1D1D1D;box-shadow:0 0 0 0px #FFFFFF, 0 0 0 2px #0A8276}.btn.btn-tertiary:not(:disabled,.disabled):hover{color:#0A8276}.btn.btn-tertiary:not(:disabled,.disabled):active,.btn.btn-tertiary:not(:disabled,.disabled).active{color:#08665C}`;

const IconButton = class {
    constructor(hostRef) {
        index.registerInstance(this, hostRef);
    }
    get el() { return index.getElement(this); }
    /**
     * 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 (!domUtils.isNestedInIfxComponent(this.el)) {
            const framework = tracking.detectFramework();
            tracking.trackComponent("ifx-icon-button", await framework);
        }
    }
    render() {
        return (index.h(index.Host, { key: 'f49a3ed9259acb2f9ae740cd85f81f01c88871ac', "aria-disabled": this.disabled, "aria-label": this.ariaLabelText }, this.href ? (index.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 }, index.h("ifx-icon", { icon: this.internalIcon }))) : (index.h("button", { class: this.getClassNames(), type: "button", disabled: this.disabled }, index.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 index$1.classNames("btn icon-button", `btn-${shape}`, `btn-${this.getSizeClass()}`, `btn-${this.getVariantClass()}`, this.disabled ? "disabled" : "");
    }
    static get watchers() { return {
        "icon": [{
                "updateIcon": 0
            }]
    }; }
};
IconButton.style = iconButtonCss();

exports.ifx_icon_button = IconButton;
