import { h } from "@stencil/core";
import { trackComponent } from "../../global/utils/tracking";
import { isNestedInIfxComponent } from "../../global/utils/dom-utils";
import { detectFramework } from "../../global/utils/framework-detection";
export class Alert {
    constructor() {
        this.variant = 'primary';
        this.closable = true;
        this.AriaLive = 'assertive';
        this.alertTypeDescription = {
            "primary": 'Neutral alert',
            "success": 'Success Alert',
            "danger": 'Error Alert',
            "warning": 'Warning Alert',
            "info": 'Neutral alert',
        };
    }
    handleClose() {
        this.ifxClose.emit();
    }
    renderCloseButton() {
        return (h("div", { class: "close-icon-wrapper" }, h("button", { onClick: this.handleClose.bind(this), "aria-label": "Dismiss alert" }, h("ifx-icon", { icon: "cross-16" }))));
    }
    generateUniqueId(prefix = 'id') {
        return `${prefix}-${Math.random().toString(36).substring(2, 9)}`;
    }
    componentWillLoad() {
        if (!this.uniqueId) {
            this.uniqueId = this.generateUniqueId('alert');
        }
    }
    async componentDidLoad() {
        if (!isNestedInIfxComponent(this.el)) {
            const framework = await detectFramework();
            trackComponent('ifx-alert', framework);
        }
    }
    render() {
        return this.variant === 'info' ? (h("div", { class: "alert__info-wrapper", role: "alert", "aria-live": this.AriaLive, "aria-describedby": this.alertTypeDescription[this.variant], "aria-labelledby": "alert-text alert-description" }, h("div", { class: "info__text-wrapper" }, h("div", { class: "info__headline-wrapper" }, h("slot", { name: "headline" })), h("div", { id: `alert-description-${this.uniqueId}`, class: "info__description-wrapper" }, h("slot", { name: "desc" }))), this.closable ? this.renderCloseButton() : null)) : (h("div", { class: `alert ${this.variant}`, role: "alert" }, this.icon && (h("div", { class: "icon-wrapper" }, h("ifx-icon", { icon: this.icon }))), h("div", { class: "alert-text", id: `alert-text-${this.uniqueId}` }, h("slot", null)), this.closable ? this.renderCloseButton() : null));
    }
    static get is() { return "ifx-alert"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["alert.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["alert.css"]
        };
    }
    static get properties() {
        return {
            "variant": {
                "type": "string",
                "attribute": "variant",
                "mutable": false,
                "complexType": {
                    "original": "'primary' | 'success' | 'danger' | 'warning' | 'info'",
                    "resolved": "\"danger\" | \"info\" | \"primary\" | \"success\" | \"warning\"",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "'primary'"
            },
            "icon": {
                "type": "string",
                "attribute": "icon",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false
            },
            "closable": {
                "type": "boolean",
                "attribute": "closable",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "true"
            },
            "AriaLive": {
                "type": "string",
                "attribute": "aria-live",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "'assertive'"
            }
        };
    }
    static get states() {
        return {
            "uniqueId": {}
        };
    }
    static get events() {
        return [{
                "method": "ifxClose",
                "name": "ifxClose",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "complexType": {
                    "original": "any",
                    "resolved": "any",
                    "references": {}
                }
            }];
    }
    static get elementRef() { return "el"; }
}
//# sourceMappingURL=alert.js.map
