import { h } from "@stencil/core";
import { ExpandableFaqItemHeadingLevel } from "./expandable-faq-item-heading-level.enum";
import { ExpandableFaqItemVariation } from "./expandable-faq-item-variation.enum";
import { randomIdGenerator } from "../../../global/utils/randomIdGenerator";
/**
 * @enums ExpandableFaqItemHeadingLevel - expandable-faq-item-heading-level.enum.ts
 * @enums ExpandableFaqItemVariation - expandable-faq-item-variation.enum.ts
 * @swedishName FAQ - Enskild fråga
 */
export class ExpandableFaqItem {
    constructor() {
        this.afHeading = undefined;
        this.afHeadingLevel = ExpandableFaqItemHeadingLevel.H3;
        this.afFullWidth = false;
        this.afExpanded = false;
        this.afVariation = ExpandableFaqItemVariation.PRIMARY;
        this.afAnimation = true;
        this.afId = randomIdGenerator('digi-expandable-faq-item');
    }
    get cssModifiers() {
        return {
            'digi-expandable-faq-item--expanded': this.afExpanded,
            'digi-expandable-faq-item--fullwidth': this.afFullWidth,
            'digi-expandable-faq-item--primary': this.afVariation === ExpandableFaqItemVariation.PRIMARY,
            'digi-expandable-faq-item--secondary': this.afVariation === ExpandableFaqItemVariation.SECONDARY,
            'digi-expandable-faq-item--tertiary': this.afVariation === ExpandableFaqItemVariation.TERTIARY
        };
    }
    /**
     * Hämtar en höjden till innehållet i vanliga frågor och svar och animera innehållet.
     * @en Gets a height to the content for FAQ and animate the content.
     */
    componentDidLoad() {
        const content = this.hostElement.children[0].querySelector(`#${this.afId}-content`);
        if (!this.afExpanded) {
            content.setAttribute('style', 'visibility: hidden;');
        }
        else {
            content.setAttribute('style', 'height: auto;');
        }
        content.addEventListener('transitionend', () => {
            if (!this.afExpanded) {
                content.setAttribute('style', 'visibility: hidden;  height: ' + 0 + 'px');
            }
            else
                content.setAttribute('style', 'height: auto');
        });
    }
    animateContentHeight() {
        const content = this.hostElement.children[0].querySelector(`#${this.afId}-content`);
        const sectionHeight = content.firstElementChild
            .offsetHeight;
        if (!this.afExpanded && content.style.height === 'auto') {
            content.setAttribute('style', 'height: ' + sectionHeight + 'px');
            setTimeout(() => {
                content.setAttribute('style', 'height: 0');
            });
            return;
        }
        if (this.afExpanded) {
            content.setAttribute('style', 'visibility: visible; height:' + sectionHeight + 'px');
            if (!this.afAnimation) {
                setTimeout(() => {
                    content.setAttribute('style', 'height: auto');
                });
            }
        }
        else {
            content.setAttribute('style', 'height: ' + 0 + 'px');
        }
    }
    render() {
        return (h("article", { key: '77cebf9e6024110a7a13e0a8b8bad26443783f3f', "aria-expanded": this.afExpanded ? 'true' : 'false', class: Object.assign({ 'digi-expandable-faq-item': true }, this.cssModifiers) }, h("header", { key: 'cfcd9dd4602a738d93c588e78aacf3a1d680be7f', class: "digi-expandable-faq-item__header" }, h(this.afHeadingLevel, { key: '070e9ce1ae568f76a98c790eecd9f6c8170882eb' }, h("button", { key: 'bd22294c7b556c2f048a9168e7ef6623df5f7344', type: "button", class: "digi-expandable-faq-item__button", onClick: (e) => {
                e.preventDefault();
                this.afExpanded = !this.afExpanded;
                this.afOnClick.emit(e);
            }, "aria-expanded": this.afExpanded ? 'true' : 'false', "aria-controls": `${this.afId}-content` }, h("digi-icon-chevron-down", { key: '8d32c3b205fb19bd82887eaeb586e823f43f275a', class: {
                'digi-expandable-faq-item__header--toggle-icon': true,
                'digi-expandable-faq-item__header--toggle-icon--expanded': this.afExpanded
            } }), h("div", { key: '8f3a9b920c46c0bd7604fc263eee364aab0530bc', class: "digi-expandable-faq-item__header-text" }, this.afHeading)))), h("section", { key: '0044fcff40a354d5aa2eab9cd3aa8bb8f84a655e', class: {
                'digi-expandable-faq-item__content': true,
                'digi-expandable-faq-item__content--animation': this.afAnimation,
                'digi-expandable-faq-item__content--hidden': !this.afExpanded
            }, id: `${this.afId}-content` }, h("div", { key: '57d0847d6c133b95366884299109f728b72f9cdf' }, h("digi-typography", { key: 'a7ac9df70a7e68d0f55b6f745d456884ab3527ac' }, h("slot", { key: '49f68abb221c4b439269ea016c8f66e7dd5c37ea' }))))));
    }
    static get is() { return "digi-expandable-faq-item"; }
    static get encapsulation() { return "scoped"; }
    static get originalStyleUrls() {
        return {
            "$": ["expandable-faq-item.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["expandable-faq-item.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 of FAQ text"
                        }],
                    "text": "Rubrikens vanliga fr\u00E5gor"
                },
                "getter": false,
                "setter": false,
                "attribute": "af-heading",
                "reflect": false
            },
            "afHeadingLevel": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "ExpandableFaqItemHeadingLevel",
                    "resolved": "ExpandableFaqItemHeadingLevel.H1 | ExpandableFaqItemHeadingLevel.H2 | ExpandableFaqItemHeadingLevel.H3 | ExpandableFaqItemHeadingLevel.H4 | ExpandableFaqItemHeadingLevel.H5 | ExpandableFaqItemHeadingLevel.H6",
                    "references": {
                        "ExpandableFaqItemHeadingLevel": {
                            "location": "import",
                            "path": "./expandable-faq-item-heading-level.enum",
                            "id": "src/components/_expandable/expandable-faq-item/expandable-faq-item-heading-level.enum.ts::ExpandableFaqItemHeadingLevel"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "Set heading level. Default is 'h3'"
                        }],
                    "text": "S\u00E4tter rubrikniv\u00E5. 'h3' \u00E4r f\u00F6rvalt."
                },
                "getter": false,
                "setter": false,
                "attribute": "af-heading-level",
                "reflect": false,
                "defaultValue": "ExpandableFaqItemHeadingLevel.H3"
            },
            "afFullWidth": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "Makes the component take up 100% of the width of the surface it is in."
                        }],
                    "text": "G\u00F6r s\u00E5 att komponenten tar upp 100% i bredd av ytan den befinner sig i."
                },
                "getter": false,
                "setter": false,
                "attribute": "af-full-width",
                "reflect": false,
                "defaultValue": "false"
            },
            "afExpanded": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "Sets the state of the FAQ item to expanded or not."
                        }],
                    "text": "S\u00E4tter l\u00E4ge p\u00E5 FAQ-fr\u00E5gan om den ska vara expanderad eller ej."
                },
                "getter": false,
                "setter": false,
                "attribute": "af-expanded",
                "reflect": false,
                "defaultValue": "false"
            },
            "afVariation": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "ExpandableFaqItemVariation",
                    "resolved": "ExpandableFaqItemVariation.PRIMARY | ExpandableFaqItemVariation.SECONDARY | ExpandableFaqItemVariation.TERTIARY",
                    "references": {
                        "ExpandableFaqItemVariation": {
                            "location": "import",
                            "path": "./expandable-faq-item-variation.enum",
                            "id": "src/components/_expandable/expandable-faq-item/expandable-faq-item-variation.enum.ts::ExpandableFaqItemVariation"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "Set variation. Can be 'Primary' or 'Secondary'"
                        }],
                    "text": "S\u00E4tter variant. Kan vara 'Primary' eller 'Secondary'"
                },
                "getter": false,
                "setter": false,
                "attribute": "af-variation",
                "reflect": false,
                "defaultValue": "ExpandableFaqItemVariation.PRIMARY"
            },
            "afAnimation": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "Sets the state of the animation for the accordion's expanded area. Animation is on as default."
                        }],
                    "text": "St\u00E4ller in ifall komponenten ska ha en animation vid utf\u00E4llning. Animation \u00E4r p\u00E5slagen som standard."
                },
                "getter": false,
                "setter": false,
                "attribute": "af-animation",
                "reflect": false,
                "defaultValue": "true"
            },
            "afId": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "Set id attribute. Defaults to random string."
                        }],
                    "text": "S\u00E4tter attributet 'id'. Om inget v\u00E4ljs s\u00E5 skapas ett slumpm\u00E4ssigt id."
                },
                "getter": false,
                "setter": false,
                "attribute": "af-id",
                "reflect": false,
                "defaultValue": "randomIdGenerator('digi-expandable-faq-item')"
            }
        };
    }
    static get events() {
        return [{
                "method": "afOnClick",
                "name": "afOnClick",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "The button element's 'onclick' event."
                        }],
                    "text": "Buttonelementets 'onclick'-event."
                },
                "complexType": {
                    "original": "MouseEvent",
                    "resolved": "MouseEvent",
                    "references": {
                        "MouseEvent": {
                            "location": "global",
                            "id": "global::MouseEvent"
                        }
                    }
                }
            }];
    }
    static get elementRef() { return "hostElement"; }
    static get watchers() {
        return [{
                "propName": "afExpanded",
                "methodName": "animateContentHeight"
            }];
    }
}
