import { h } from "@stencil/core";
import { randomIdGenerator } from "../../../global/utils/randomIdGenerator";
import { NotificationAlertSize } from "./notification-alert-size.enum";
import { NotificationAlertHeadingLevel } from "./notification-alert-heading-level.enum";
import { NotificationAlertVariation } from "./notification-alert-variation.enum";
import { ButtonVariation, TypographyVariation } from "../../../enums";
/**
 * @slot default - Kan innehålla vad som helst
 *
 * @enums NotificationAlertSize - notification-alert-size.enum.ts
 * @enums NotificationAlertHeadingLevel - notification-alert-heading-level.enum.ts
 * @enums NotificationAlertVariation - notification-alert-variation.enum.ts
 * @swedishName Informationsmeddelande
 */
export class NotificationAlert {
    constructor() {
        this.listItems = [];
        this.afHeading = undefined;
        this.afHeadingLevel = NotificationAlertHeadingLevel.H2;
        this.afSize = NotificationAlertSize.LARGE;
        this.afVariation = NotificationAlertVariation.INFO;
        this.afCloseable = false;
        this.afCloseAriaLabel = 'Stäng meddelandet';
        this.afId = randomIdGenerator('digi-notification-alert');
    }
    /**
     * Hämtar en referens till rubrikelementet. Bra för att t.ex. sätta fokus programmatiskt.
     * @en Returns a reference to the heading element. Handy for setting focus programmatically.
     */
    async afMGetHeadingElement() {
        return this._heading;
    }
    clickHandler(e) {
        this.afOnClose.emit(e);
    }
    componentDidLoad() {
        this.afOnReady.emit();
    }
    get cssModifiers() {
        return {
            [`digi-notification-alert--size-${this.afSize}`]: !!this.afSize,
            [`digi-notification-alert--variation-${this.afVariation}`]: !!this.afVariation,
            'digi-notification-alert--closeable': this.afCloseable
        };
    }
    get icon() {
        switch (this.afVariation) {
            case NotificationAlertVariation.SUCCESS:
                return h("digi-icon-notification-succes", null);
            case NotificationAlertVariation.WARNING:
                return h("digi-icon-notification-warning", null);
            case NotificationAlertVariation.DANGER:
                return h("digi-icon-notification-error", null);
            default:
                return h("digi-icon-notification-info", null);
        }
    }
    render() {
        return (h("div", { key: 'dc748e929eed3f3897d2fc2593afbf55ff734cfb', class: Object.assign({ 'digi-notification-alert': true }, this.cssModifiers) }, h("div", { key: 'ad1523ca0a2de00319faccf5b728d21d883298d0', class: "digi-notification-alert__layout" }, h("div", { key: 'f4bff6c9866930439b75da1b90128cb8e4a0e7b4', class: "icon-wrapper" }, h("div", { key: 'fcb244add5f937821abe4ef3d4ba1696c616eff5', class: "digi-notification-alert__icon", slot: "media" }, this.icon)), h("div", { key: '7646d9beba96bacd023f2798c993eead395cfe32', class: "main-wrapper" }, h("div", { key: '912c0b10d5269da2871ca9841356ccbcb08f9b95', class: "digi-notification-alert__wrapper" }, this.afCloseable && (h("digi-button", { key: 'aa9613aaa2f920e9c78eb5604ea8b547479be74a', "af-aria-label": this.afCloseAriaLabel, "af-variation": ButtonVariation.FUNCTION, onAfOnClick: (e) => this.clickHandler(e), class: "digi-notification-alert__close-button" }, h("span", { key: '4a02046286eb6a95b11e4abd952523f6ccb0cce6', class: "digi-notification-alert__close-button__text" }, "St\u00E4ng"), h("digi-icon-x", { key: '7586bb5c83b84d75a7f9dba3aacecb42f95116ec', slot: "icon-secondary", "aria-hidden": "true" }))), h("div", { key: '16a07407a8a9c4624a17804ddb194ab9e48b81fb', class: "digi-notification-alert__text" }, this.afHeading &&
            this.afSize === NotificationAlertSize.LARGE && (h(this.afHeadingLevel, { key: '00fdd00229e28890d4129015e901ec3e4c09e467', ref: (el) => (this._heading = el), tabindex: "-1", class: "digi-notification-alert__heading" }, this.afHeading)), h("div", { key: '3d613250eb00a25ed41624f2e04f619fa4cd8f84', class: "digi-notification-alert__content" }, h("digi-typography", { key: '2e205fee8a60564e89b5fbd7a0afefde19bd8ae2', "af-variation": TypographyVariation.SMALL }, h("slot", { key: 'e500c4ff93a2a14e2184375d62b1270642010831' })))))))));
    }
    static get is() { return "digi-notification-alert"; }
    static get encapsulation() { return "scoped"; }
    static get originalStyleUrls() {
        return {
            "$": ["notification-alert.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["notification-alert.css"]
        };
    }
    static get properties() {
        return {
            "afHeading": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "The heading text"
                        }],
                    "text": "Rubrikens text"
                },
                "getter": false,
                "setter": false,
                "attribute": "af-heading",
                "reflect": false
            },
            "afHeadingLevel": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "`${NotificationAlertHeadingLevel}`",
                    "resolved": "\"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\"",
                    "references": {
                        "NotificationAlertHeadingLevel": {
                            "location": "import",
                            "path": "./notification-alert-heading-level.enum",
                            "id": "src/components/_notification/notification-alert/notification-alert-heading-level.enum.ts::NotificationAlertHeadingLevel"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "Set heading level. Default is 'h2'"
                        }],
                    "text": "S\u00E4tter rubrikens vikt. 'h2' \u00E4r f\u00F6rvalt."
                },
                "getter": false,
                "setter": false,
                "attribute": "af-heading-level",
                "reflect": false,
                "defaultValue": "NotificationAlertHeadingLevel.H2"
            },
            "afSize": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "`${NotificationAlertSize}`",
                    "resolved": "\"large\" | \"medium\" | \"small\"",
                    "references": {
                        "NotificationAlertSize": {
                            "location": "import",
                            "path": "./notification-alert-size.enum",
                            "id": "src/components/_notification/notification-alert/notification-alert-size.enum.ts::NotificationAlertSize"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "Set size of alert notification. Can be 'small', 'medium' or 'large'."
                        }],
                    "text": "S\u00E4tter storlek. Kan vara 'small', 'medium' eller 'large'."
                },
                "getter": false,
                "setter": false,
                "attribute": "af-size",
                "reflect": false,
                "defaultValue": "NotificationAlertSize.LARGE"
            },
            "afVariation": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "`${NotificationAlertVariation}`",
                    "resolved": "\"danger\" | \"info\" | \"success\" | \"warning\"",
                    "references": {
                        "NotificationAlertVariation": {
                            "location": "import",
                            "path": "./notification-alert-variation.enum",
                            "id": "src/components/_notification/notification-alert/notification-alert-variation.enum.ts::NotificationAlertVariation"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "Set variation of alert notification. Can be 'info', 'success', 'warning' or 'danger'."
                        }],
                    "text": "S\u00E4tter variant. Kan vara 'info', 'success', 'warning' eller 'danger'."
                },
                "getter": false,
                "setter": false,
                "attribute": "af-variation",
                "reflect": false,
                "defaultValue": "NotificationAlertVariation.INFO"
            },
            "afCloseable": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "If true, the close button is added to the component"
                        }],
                    "text": "G\u00F6r det m\u00F6jligt att st\u00E4nga meddelandet med en st\u00E4ngknapp"
                },
                "getter": false,
                "setter": false,
                "attribute": "af-closeable",
                "reflect": false,
                "defaultValue": "false"
            },
            "afCloseAriaLabel": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "Close button aria-label attribute"
                        }],
                    "text": "St\u00E4ngknappens attribut 'aria-label'"
                },
                "getter": false,
                "setter": false,
                "attribute": "af-close-aria-label",
                "reflect": false,
                "defaultValue": "'St\u00E4ng meddelandet'"
            },
            "afId": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "Label id attribute. Defaults to random string."
                        }],
                    "text": "S\u00E4tter attributet 'id'. Ges inget v\u00E4rde s\u00E5 genereras ett slumpm\u00E4ssigt."
                },
                "getter": false,
                "setter": false,
                "attribute": "af-id",
                "reflect": false,
                "defaultValue": "randomIdGenerator('digi-notification-alert')"
            }
        };
    }
    static get events() {
        return [{
                "method": "afOnClose",
                "name": "afOnClose",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "Close button's 'onclick' event"
                        }],
                    "text": "St\u00E4ngknappens 'onclick'-event"
                },
                "complexType": {
                    "original": "MouseEvent",
                    "resolved": "MouseEvent",
                    "references": {
                        "MouseEvent": {
                            "location": "global",
                            "id": "global::MouseEvent"
                        }
                    }
                }
            }, {
                "method": "afOnReady",
                "name": "afOnReady",
                "bubbles": false,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "When the component and slots are loaded and initialized this event will trigger."
                        }],
                    "text": "N\u00E4r komponenten och slotsen \u00E4r laddade och initierade s\u00E5 skickas detta eventet."
                },
                "complexType": {
                    "original": "any",
                    "resolved": "any",
                    "references": {}
                }
            }];
    }
    static get methods() {
        return {
            "afMGetHeadingElement": {
                "complexType": {
                    "signature": "() => Promise<any>",
                    "parameters": [],
                    "references": {
                        "Promise": {
                            "location": "global",
                            "id": "global::Promise"
                        }
                    },
                    "return": "Promise<any>"
                },
                "docs": {
                    "text": "H\u00E4mtar en referens till rubrikelementet. Bra f\u00F6r att t.ex. s\u00E4tta fokus programmatiskt.",
                    "tags": [{
                            "name": "en",
                            "text": "Returns a reference to the heading element. Handy for setting focus programmatically."
                        }]
                }
            }
        };
    }
    static get elementRef() { return "hostElement"; }
}
