import { r as registerInstance, h, d as Host, a as getElement } from './index-DtIEDtZ8.js';
import { d as detectFramework, t as trackComponent } from './framework-detection-DcmcuUOA.js';
import { i as isNestedInIfxComponent } from './dom-utils-Bw2fh5LT.js';

const notificationCss = ":root{--ifx-font-family:\"Source Sans 3\", 'Arial, sans-serif'}.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);
        this.variant = 'success';
        this.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: '7bbeaae1a7a9d3717f5aca378041e232d8a60fa3' }, h("div", { key: '06cb1830b2d084e3f3908a1a3e507c429bcec8ec', class: "ifx-notification__wrapper " + this.getClassName() }, h("div", { key: '93dfa7a2463fd2e689b549d05455d771725eaecf', class: "ifx-notification__icon" }, h("ifx-icon", { key: '07d73ca0368cf493cb01d6df1f30374df9663abb', icon: this.icon })), h("div", { key: '9da8c205def2615bb2e3da50c03acce2c3c49712', class: "ifx-notification__body" }, h("div", { key: '22cd9dfabc23b685d983f403e3649d247e97b7fc', class: "ifx-notification__slot" }, h("slot", { key: '1feecd971094e46f36572c1005dacfa943b005f4' })), this.linkText && this.linkHref &&
            h("div", { key: '2779a104d2b7a0d13114a90b7346c4ef5554704c', class: "ifx-notification__link" }, h("ifx-link", { key: '293725867cdeb88f4fa16efbcf812e58ddc9ab4b', href: this.linkHref, target: this.linkTarget }, this.linkText, h("ifx-icon", { key: 'aca1eae60ca7b17536ad673d9dc236f5bdd456a8', icon: "arrow-right-16" })))))));
    }
    get el() { return getElement(this); }
};
Notification.style = notificationCss;

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

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