import { h } from "@stencil/core";
import Notification from "@ecl/notification";
export class EclNotification {
    constructor() {
        this.variant = 'info';
        this.noScript = false;
        this.withClose = true;
    }
    getClass() {
        return [
            `ecl-notification`,
            `ecl-notification--${this.getVariant()}`,
            this.styleClass
        ].join(' ');
    }
    getVariant() {
        return this.variant === 'information' ? 'info' : this.variant;
    }
    componentWillLoad() {
        var _a;
        this.theme = (_a = document.documentElement.getAttribute('data-ecl-theme')) !== null && _a !== void 0 ? _a : (this.theme || 'ec');
    }
    componentDidLoad() {
        const links = document.querySelectorAll('[slot="notification-link"]');
        if (links.length > 0) {
            links.forEach((link) => {
                const wrapper = document.createElement('div');
                wrapper.classList.add('ecl-notification__link', `sc-ecl-notification-${this.theme}`);
                link.firstElementChild.classList.add(`ecl-notification__link`, `sc-ecl-notification-${this.theme}`);
                link.parentNode.insertBefore(wrapper, link);
                wrapper.appendChild(link);
            });
        }
        if (!this.noScript) {
            ;
            window.ECL = window.ECL || {};
            ECL.Notification = Notification;
            const notification = new Notification(this.el.firstElementChild);
            notification.init();
        }
    }
    render() {
        return (h("div", { key: '61e27f7d03fcffa6aa487c22ca3006de9493ea9a', class: this.getClass(), "data-ecl-notification": true, role: "alert" }, h("ecl-icon", { key: '01012a41f09bb5597508c080267dad90ff78f05a', icon: this.variant === 'success' ? 'check-filled' : this.variant, size: "m", "style-class": `ecl-notification__icon sc-ecl-notification-${this.theme}` }), h("div", { key: '98201b744651db52d584f64fea8908af1e2fcf67', class: "ecl-notification__content" }, this.withClose ?
            h("ecl-button", { variant: "tertiary", type: "button", "style-class": `ecl-notification__close sc-ecl-notification-${this.theme}`, "data-ecl-notification-close": true, hideLabel: true }, this.closeLabel, h("ecl-icon", { slot: "icon-after", icon: "close", theme: this.theme, "style-class": "ecl-button__icon" })) : '', this.notificationTitle ?
            h("div", { class: "ecl-notification__title" }, this.notificationTitle)
            : '', h("div", { key: '18c17474fba94195b4b8434694a73d1db4095765', class: "ecl-notification__description" }, h("slot", { key: 'f0c5f180a1c2c21928d4a9dfa41c006052367731' })), h("slot", { key: '0b7a0d656973280113934e792273fcef19876899', name: "notification-link" }))));
    }
    static get is() { return "ecl-notification"; }
    static get encapsulation() { return "scoped"; }
    static get originalStyleUrls() {
        return {
            "ec": ["./build/styles/ecl-notification-ec.css"],
            "eu": ["./build/styles/ecl-notification-eu.css"]
        };
    }
    static get styleUrls() {
        return {
            "ec": ["build/styles/ecl-notification-ec.css"],
            "eu": ["build/styles/ecl-notification-eu.css"]
        };
    }
    static get assetsDirs() { return ["build"]; }
    static get properties() {
        return {
            "theme": {
                "type": "string",
                "mutable": true,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "theme"
            },
            "variant": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "variant",
                "defaultValue": "'info'"
            },
            "styleClass": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "style-class"
            },
            "notificationTitle": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "notification-title"
            },
            "closeLabel": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "close-label"
            },
            "noScript": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "no-script",
                "defaultValue": "false"
            },
            "withClose": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "with-close",
                "defaultValue": "true"
            }
        };
    }
    static get elementRef() { return "el"; }
}
