import { h } from "@stencil/core";
import { randomIdGenerator } from "../../../global/utils/randomIdGenerator";
import { FormErrorListHeadingLevel } from "./form-error-list-heading-level.enum";
import { logger } from "../../../global/utils/logger";
import { TypographyVariation, } from "../../../enums";
import { NotificationAlertVariation } from "../../_notification/notification-alert/notification-alert-variation.enum";
/**
 * @enums FormErrorListHeadingLevel - form-error-list-heading-level.enum.ts
 * @swedishName Felmeddelandelista
 */
export class FormErrorList {
    constructor() {
        this.linkItems = [];
        this.afHeading = undefined;
        this.afHeadingLevel = FormErrorListHeadingLevel.H2;
        this.afDescription = undefined;
        this.afId = randomIdGenerator('digi-form-error-list');
        this.afOverrideLink = false;
        this.afEnableHeadingFocus = true;
    }
    /**
     * Sätter fokus på rubriken.
     * @en Sets focus on the heading.
     */
    async afMSetHeadingFocus() {
        this.setHeadingFocus();
    }
    componentWillLoad() {
        this.getLinks();
    }
    componentWillUpdate() {
        this.getLinks(true);
    }
    componentDidLoad() {
        this.setHeadingFocus();
        this.afOnReady.emit();
    }
    getLinks(update) {
        const elements = this.hostElement.children;
        if (!elements || elements.length <= 0) {
            logger.warn(`The slot contains no link elements`, this.hostElement);
            return;
        }
        let items;
        if (update) {
            items = this._observer.children;
        }
        else {
            items = elements;
        }
        this.linkItems = [...items]
            .filter((element) => element.tagName.toLowerCase() === 'a')
            .map((element) => {
            return {
                text: element.textContent,
                href: element.getAttribute('href') || ''
            };
        });
    }
    setHeadingFocus() {
        if (this.afEnableHeadingFocus) {
            setTimeout(async () => {
                const el = await this._notificationAlert.afMGetHeadingElement();
                !!el && el.focus();
            }, 0);
        }
    }
    clickResponse(e) {
        if (this.afOverrideLink) {
            e.detail.preventDefault();
        }
        this.afOnClickLink.emit(e);
    }
    render() {
        return (h("div", { key: 'b1538bef3aa4d16c21c04cc6ec3a16e1da48cf9c', class: "digi-form-error-list", id: this.afId }, h("digi-notification-alert", { key: '2b6989a273a1182560cf313e22c5c6d2fd01fd33', ref: (el) => (this._notificationAlert = el), "af-heading": this.afHeading, "af-heading-level": this.afHeadingLevel, "af-variation": NotificationAlertVariation.DANGER }, this.afDescription && (h("digi-typography", { key: '9142a6f39761391edd40aa8102cff60547be34b2', "af-variation": TypographyVariation.SMALL }, h("p", { key: '0244fd85c399f6823dca2437e5b25e329fcfa9b2', class: "digi-form-error-list__description" }, this.afDescription))), h("ul", { key: '47caec67e8e33bdaa13abb8b04f5ce9756a93e8b', class: "digi-form-error-list__list" }, this.linkItems.map((item) => {
            return (h("li", { class: "digi-form-error-list__item" }, h("digi-link-internal", { class: "digi-form-error-list__link", afHref: item.href }, item.text)));
        }))), h("div", { key: '9e48117d3a59c50c10684f05a40f350c5b936867', hidden: true, class: "digi-form-error-list__slot" }, h("digi-util-mutation-observer", { key: '02d6c18bd0c16be3fb3266abebd4bd8156e4a432', afOptions: {
                attributes: false,
                childList: true,
                subtree: true,
                characterData: true
            }, ref: (el) => (this._observer = el), onAfOnChange: () => this.getLinks() }, h("slot", { key: 'd1d766b6f1f094c135a0ae8c9624a0e871ccdfad' })))));
    }
    static get is() { return "digi-form-error-list"; }
    static get encapsulation() { return "scoped"; }
    static get originalStyleUrls() {
        return {
            "$": ["form-error-list.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["form-error-list.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": "FormErrorListHeadingLevel",
                    "resolved": "FormErrorListHeadingLevel.H1 | FormErrorListHeadingLevel.H2 | FormErrorListHeadingLevel.H3 | FormErrorListHeadingLevel.H4 | FormErrorListHeadingLevel.H5 | FormErrorListHeadingLevel.H6",
                    "references": {
                        "FormErrorListHeadingLevel": {
                            "location": "import",
                            "path": "./form-error-list-heading-level.enum",
                            "id": "src/components/_form/form-error-list/form-error-list-heading-level.enum.ts::FormErrorListHeadingLevel"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "Set heading level. Default is 'h2'"
                        }],
                    "text": "S\u00E4tt rubrikens vikt. 'h2' \u00E4r f\u00F6rvalt."
                },
                "getter": false,
                "setter": false,
                "attribute": "af-heading-level",
                "reflect": false,
                "defaultValue": "FormErrorListHeadingLevel.H2"
            },
            "afDescription": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "An optional description text."
                        }],
                    "text": "En valfri beskrivande text."
                },
                "getter": false,
                "setter": false,
                "attribute": "af-description",
                "reflect": false
            },
            "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' p\u00E5 det omslutande elementet. Ges inget v\u00E4rde s\u00E5 genereras ett slumpm\u00E4ssigt."
                },
                "getter": false,
                "setter": false,
                "attribute": "af-id",
                "reflect": false,
                "defaultValue": "randomIdGenerator('digi-form-error-list')"
            },
            "afOverrideLink": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "Override default anchor link behavior and sets focus programmatically. Should only be used if default anchor link behaviour is a problem with e.g. routing"
                        }],
                    "text": "Kringg\u00E5r felmeddelandenas ankarl\u00E4nkar och s\u00E4tter ist\u00E4llet fokus programmatiskt.\nB\u00F6r endast anv\u00E4ndas om det vanliga beteendet \u00E4r problematiskt pga dynamisk routing eller liknande."
                },
                "getter": false,
                "setter": false,
                "attribute": "af-override-link",
                "reflect": false,
                "defaultValue": "false"
            },
            "afEnableHeadingFocus": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "Used to enable automatic focus on header when the component is initialized."
                        }],
                    "text": "Anv\u00E4nds f\u00F6r att aktivera automatisk fokusering p\u00E5 rubrik n\u00E4r komponenten initieras."
                },
                "getter": false,
                "setter": false,
                "attribute": "af-enable-heading-focus",
                "reflect": false,
                "defaultValue": "true"
            }
        };
    }
    static get states() {
        return {
            "linkItems": {}
        };
    }
    static get events() {
        return [{
                "method": "afOnClickLink",
                "name": "afOnClickLink",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "The link elements' 'onclick' event."
                        }],
                    "text": "L\u00E4nkelementens 'onclick'-event."
                },
                "complexType": {
                    "original": "any",
                    "resolved": "any",
                    "references": {}
                }
            }, {
                "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 {
            "afMSetHeadingFocus": {
                "complexType": {
                    "signature": "() => Promise<void>",
                    "parameters": [],
                    "references": {
                        "Promise": {
                            "location": "global",
                            "id": "global::Promise"
                        }
                    },
                    "return": "Promise<void>"
                },
                "docs": {
                    "text": "S\u00E4tter fokus p\u00E5 rubriken.",
                    "tags": [{
                            "name": "en",
                            "text": "Sets focus on the heading."
                        }]
                }
            }
        };
    }
    static get elementRef() { return "hostElement"; }
    static get listeners() {
        return [{
                "name": "afOnClick",
                "method": "clickResponse",
                "target": undefined,
                "capture": false,
                "passive": false
            }];
    }
}
