import { r as registerInstance, a as getElement, h, d as Host } from './index-Cby2wKoI.js';
import { i as isNestedInIfxComponent } from './dom-utils-CtINY9El.js';
import { d as detectFramework, t as trackComponent } from './tracking-DNHOWgWh.js';

const notificationCss = () => `.ifx-notification__wrapper{display:flex;flex-direction:row;align-items:center;padding:8px 16px;background-color:#FFFFFF;font-family:var(--ifx-font-family);color:#1D1D1D;border:1px solid #EEEDED}.ifx-notification__wrapper.ifx-notification__wrapper--success{border-left:4px solid #4CA460}.ifx-notification__wrapper.ifx-notification__wrapper--success .ifx-notification__icon{color:#4CA460}.ifx-notification__wrapper.ifx-notification__wrapper--locked{border-left:4px solid #E16B25}.ifx-notification__wrapper.ifx-notification__wrapper--locked .ifx-notification__icon{color:#E16B25}.ifx-notification__wrapper.ifx-notification__wrapper--error{border-left:4px solid #CD002F}.ifx-notification__wrapper.ifx-notification__wrapper--error .ifx-notification__icon{color:#CD002F}.ifx-notification__wrapper.ifx-notification__wrapper--neutral{border-left:4px solid #0A8276}.ifx-notification__wrapper.ifx-notification__wrapper--neutral .ifx-notification__icon{color:#0A8276}.ifx-notification__wrapper .ifx-notification__icon{margin-right:8px;display:flex;align-self:center}.ifx-notification__wrapper .ifx-notification__body{display:flex;flex-direction:row;flex-grow:1;font-size:0.875rem}.ifx-notification__wrapper .ifx-notification__body .ifx-notification__slot{flex-grow:1;display:inline-flex;align-items:center}.ifx-notification__wrapper .ifx-notification__link{font-size:0.875rem}@media (max-width: 576px){.ifx-notification__wrapper .ifx-notification__icon{align-self:flex-start}.ifx-notification__wrapper .ifx-notification__body{flex-direction:column}.ifx-notification__wrapper .ifx-notification__link{margin-top:8px}}`;

const Notification = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
    }
    get el() { return getElement(this); }
    icon;
    variant = "success";
    linkText;
    linkHref;
    linkTarget = "_blank";
    async componentDidLoad() {
        if (!isNestedInIfxComponent(this.el)) {
            const framework = detectFramework();
            trackComponent("ifx-notification", await framework);
        }
    }
    getClassName() {
        switch (this.variant) {
            case "success":
                return "ifx-notification__wrapper--success";
            case "locked":
                return "ifx-notification__wrapper--locked";
            case "error":
                return "ifx-notification__wrapper--error";
            case "neutral":
                return "ifx-notification__wrapper--neutral";
            default:
                return "ifx-notification__wrapper--success";
        }
    }
    render() {
        return (h(Host, { key: '7c24532c4c13e94890beef7559e1b59e1051ec3c' }, h("div", { key: '959139f99bf476ee606595e82e475781a50b4097', class: "ifx-notification__wrapper " + this.getClassName() }, h("div", { key: '1c064798ba1eee6e55f55fdfcbe48f6a935f87e6', class: "ifx-notification__icon" }, h("ifx-icon", { key: '4b0b6d4dca80ca2809110580a6ef106750bc7d24', icon: this.icon })), h("div", { key: '23176c7deb31459a8b64d408659e23fef8a27bb8', class: "ifx-notification__body" }, h("div", { key: '37563292f93d01d885f85e75c704d0ce4ee45ed9', class: "ifx-notification__slot" }, h("slot", { key: '44f3a2a5baa187bc0cf9aa60768bbff2ddeac9a3' })), this.linkText && this.linkHref && (h("div", { key: '9b26058a528029fc4f0f0d88c7d29bb1c668658c', class: "ifx-notification__link" }, h("ifx-link", { key: 'c58948a40aa54007e141a7e329055d09afff64dd', href: this.linkHref, target: this.linkTarget }, this.linkText, h("ifx-icon", { key: '4943a933ac201582ba54665061a60a5f2e72b4a7', icon: "arrow-right-16" }))))))));
    }
};
Notification.style = notificationCss();

export { Notification as ifx_notification };
//# sourceMappingURL=ifx-notification.entry.js.map

//# sourceMappingURL=ifx-notification.entry.js.map