'use strict';

var index = require('./index-pX0sBY0-.js');
var domUtils = require('./dom-utils-BdvOgC2b.js');
var tracking = require('./tracking-BPjaTlNR.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) {
        index.registerInstance(this, hostRef);
    }
    get el() { return index.getElement(this); }
    /** Icon to display in the notification. */
    icon;
    /** Visual style of the notification (e.g. success, error). */
    variant = "success";
    /** Text for the optional action link. */
    linkText;
    /** URL the notification link should navigate to. */
    linkHref;
    /** Where to open the link (same tab, new tab, etc.). */
    linkTarget = "_blank";
    async componentDidLoad() {
        if (!domUtils.isNestedInIfxComponent(this.el)) {
            const framework = tracking.detectFramework();
            tracking.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 (index.h(index.Host, { key: '639e4e57f82a683329109c5d8d92ca1e1208d53c' }, index.h("div", { key: '6ee39a684b391ba39c76e0d2a97844f7ac80267b', class: "ifx-notification__wrapper " + this.getClassName() }, index.h("div", { key: '423762970fd3da912776ca8544ae07af3093383f', class: "ifx-notification__icon" }, index.h("ifx-icon", { key: '166cd01e6e0949f1b07213ce73d78fe5a64c1877', icon: this.icon })), index.h("div", { key: 'acb811f46e5ff8d6aa7a8e1d476882ab5b800f49', class: "ifx-notification__body" }, index.h("div", { key: 'fe2788d80c72477fa933fd31621416675e10c99d', class: "ifx-notification__slot" }, index.h("slot", { key: '49799ed83313157ef21b2cddadb92ac54147ea2d' })), this.linkText && this.linkHref && (index.h("div", { key: '20df178bf642167583a9fec45605030ae5941352', class: "ifx-notification__link" }, index.h("ifx-link", { key: '3316fec443320be7a4d893e086c4ca4dd66f1852', href: this.linkHref, target: this.linkTarget }, this.linkText, index.h("ifx-icon", { key: '630a2531e399af39e0c1bfa745605a49c05efa2f', icon: "arrow-right-16" }))))))));
    }
};
Notification.style = notificationCss();

exports.ifx_notification = Notification;
