import { _t } from "../../../text";
import { h } from "@stencil/core";
import { randomIdGenerator } from "../../../global/utils/randomIdGenerator";
import { ExpandableAccordionHeaderLevel } from "./expandable-accordion-header-level.enum";
/**
 * @slot default - Kan innehålla vad som helst. Blir innehållet i den utfällbara delen av komponenten
 * @enums ExpandableAccordionHeaderLevel - expandable-accordion-header-level.enum.ts
 * @swedishName Utfällbar rubrik
 */
export class ExpandableAccordion {
    constructor() {
        this.afHeading = undefined;
        this.afHeadingLevel = ExpandableAccordionHeaderLevel.H2;
        this.afFullWidth = false;
        this.afExpanded = false;
        this.afAnimation = true;
        this.afId = randomIdGenerator('digi-expandable-accordion');
        this.afExpandText = _t.show;
        this.afCollapseText = _t.hide;
    }
    get cssModifiers() {
        return {
            [`digi-expandable-accordion--expanded-${!!this.afExpanded}`]: true,
            [`digi-expandable-accordion--animation-${!!this.afAnimation}`]: true,
            [`digi-expandable-accordion--variation-primary`]: true,
            [`digi-expandable-accordion--fullwidth`]: this.afFullWidth
        };
    }
    /**
     * Hämtar en höjden till innehållet i Utfällbar yta och animera innehållet.
     * @en Gets a height to the content for expandable 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');
        }
    }
    clickToggleHandler(e, resetFocus = false) {
        e.preventDefault();
        this.afExpanded = !this.afExpanded;
        if (resetFocus) {
            this._button.focus();
        }
        this.afOnClick.emit(e);
    }
    render() {
        return (h("article", { key: '293f1af18ec10b52ff734f449e9248c0040e1550', "aria-expanded": this.afExpanded ? 'true' : 'false', class: Object.assign({ 'digi-expandable-accordion': true }, this.cssModifiers) }, h("header", { key: '43f3dd32444ebe7c7f4d89d02ae51172ee71323c', class: "digi-expandable-accordion__header" }, h(this.afHeadingLevel, { key: '593d5f642ffceb433eb0c284977ff004752e5d95', class: "digi-expandable-accordion__heading" }, h("button", { key: '38f4d583fe8173137de825eb7cfead4bd02a06dc', type: "button", class: "digi-expandable-accordion__button", onClick: (e) => this.clickToggleHandler(e), "aria-expanded": this.afExpanded ? 'true' : 'false', "aria-controls": `${this.afId}-content`, ref: (el) => (this._button = el) }, h("digi-icon-chevron-down", { key: '607b495071e96df847175f5ea55cf5ba3534e113', class: "digi-expandable-accordion__toggle-icon" }), h("div", { key: '9e543a4d2ec72dcec7d904c89836d8b8ea4b3c37', class: "digi-expandable-accordion__heading-text" }, this.afHeading)))), h("section", { key: '65d5666a1bba3609cc452240d2c6baaae9e1a364', class: "digi-expandable-accordion__content", id: `${this.afId}-content` }, h("div", { key: '6d38ae958f5ebdcd3bb56dc5516b65bd5f196c2d' }, h("digi-typography", { key: '95dca191c7e197e5bc303ca88d933ab0d2c3d31c' }, h("slot", { key: '86171e79136fff82378ef011def29b38dca87955' }))))));
    }
    static get is() { return "digi-expandable-accordion"; }
    static get encapsulation() { return "scoped"; }
    static get originalStyleUrls() {
        return {
            "$": ["expandable-accordion.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["expandable-accordion.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 Utf\u00E4llbar yta"
                },
                "getter": false,
                "setter": false,
                "attribute": "af-heading",
                "reflect": false
            },
            "afHeadingLevel": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "ExpandableAccordionHeaderLevel",
                    "resolved": "ExpandableAccordionHeaderLevel.H1 | ExpandableAccordionHeaderLevel.H2 | ExpandableAccordionHeaderLevel.H3 | ExpandableAccordionHeaderLevel.H4 | ExpandableAccordionHeaderLevel.H5 | ExpandableAccordionHeaderLevel.H6",
                    "references": {
                        "ExpandableAccordionHeaderLevel": {
                            "location": "import",
                            "path": "./expandable-accordion-header-level.enum",
                            "id": "src/components/_expandable/expandable-accordion/expandable-accordion-header-level.enum.ts::ExpandableAccordionHeaderLevel"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "Set heading level. Default is 'h2'"
                        }],
                    "text": "S\u00E4tter utf\u00E4llbar rubrik. 'h2' \u00E4r f\u00F6rvalt."
                },
                "getter": false,
                "setter": false,
                "attribute": "af-heading-level",
                "reflect": false,
                "defaultValue": "ExpandableAccordionHeaderLevel.H2"
            },
            "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 accordion to expanded or not."
                        }],
                    "text": "S\u00E4tter l\u00E4ge p\u00E5 rubriken om den ska vara expanderad eller ej."
                },
                "getter": false,
                "setter": false,
                "attribute": "af-expanded",
                "reflect": false,
                "defaultValue": "false"
            },
            "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-accordion')"
            },
            "afExpandText": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "Sets the text on the button that expands the component. Defaults to \"Visa\"."
                        }],
                    "text": "S\u00E4tter texten som visas p\u00E5 knappen som expanderar komponenten. Om inget v\u00E4ljs s\u00E5 anv\u00E4nds \"Visa\""
                },
                "getter": false,
                "setter": false,
                "attribute": "af-expand-text",
                "reflect": false,
                "defaultValue": "_t.show"
            },
            "afCollapseText": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "Sets the text on the button that collapses the component. Defaults to \"D\u00F6lj\"."
                        }],
                    "text": "S\u00E4tter texten som visas p\u00E5 knappen som kollapsar komponenten. Om inget v\u00E4ljs s\u00E5 anv\u00E4nds \"D\u00F6lj\""
                },
                "getter": false,
                "setter": false,
                "attribute": "af-collapse-text",
                "reflect": false,
                "defaultValue": "_t.hide"
            }
        };
    }
    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"
            }];
    }
}
