//ifxAccordionItem
import { h, } from "@stencil/core";
export class AccordionItem {
    el;
    /** The caption of the accordion item. */
    caption;
    /** Set the open attribute to open the accordion item. */
    open = false;
    /** The aria-level attribute for the accordion item header. */
    ariaLevelNumber = 3;
    /** The icon to be displayed in the accordion item header. */
    icon = "";
    internalOpen = false;
    ifxOpen;
    /** Event emitted when an accordion item is closed. */
    ifxClose;
    contentEl;
    titleEl;
    resizeObserver;
    componentWillLoad() {
        this.internalOpen = this.open;
    }
    componentDidLoad() {
        this.checkSlotContent();
        this.openAccordionItem();
        this.contentEl = this.el.shadowRoot.querySelector("#accordion-content");
        if (this.contentEl) {
            this.attachResizeObserver();
        }
    }
    componentDidUpdate() {
        this.checkSlotContent();
        this.openAccordionItem();
    }
    openChanged(newValue) {
        this.internalOpen = newValue;
    }
    toggleOpen() {
        this.internalOpen = !this.internalOpen;
        this.open = this.internalOpen;
        if (this.internalOpen) {
            this.ifxOpen.emit({ isOpen: this.internalOpen });
        }
        else {
            this.ifxClose.emit({ isClosed: !this.internalOpen });
        }
    }
    openAccordionItem() {
        if (this.internalOpen) {
            this.contentEl.style.height = `${this.contentEl.scrollHeight}px`;
            this.contentEl.style.overflow = "hidden";
        }
        else {
            this.contentEl.style.height = "0";
            this.contentEl.style.overflow = "hidden";
        }
    }
    getInnerContentWrapper() {
        const innerContentEl = this.el.shadowRoot.querySelector(".inner-content");
        return innerContentEl;
    }
    attachResizeObserver() {
        const innerContentEl = this.getInnerContentWrapper();
        if (innerContentEl) {
            this.resizeObserver = new ResizeObserver(() => {
                if (this.internalOpen) {
                    this.openAccordionItem();
                }
            });
            this.resizeObserver.observe(innerContentEl);
        }
    }
    handleKeydown(ev) {
        const path = ev.composedPath();
        if (!path.includes(this.titleEl)) {
            return;
        }
        switch (ev.key) {
            case "Enter": // fallthrough
            case " ": // space
                ev.preventDefault();
                this.toggleOpen();
                break;
        }
    }
    checkSlotContent() {
        const slot = this.el.shadowRoot.querySelector("slot");
        const hasContent = slot.assignedNodes().length > 0;
        const innerContent = this.getInnerContentWrapper();
        if (!hasContent) {
            innerContent.classList.add("no-content");
        }
        else if (innerContent.classList.contains("no-content")) {
            innerContent.classList.remove("no-content");
        }
    }
    render() {
        return (h("div", { key: 'c7a18a15bd5272ae71ffc3cefa75268cd60a8238', class: `accordion-item ${this.internalOpen ? "open" : ""}` }, h("div", { key: '03e56643c6ecd4444995a05bdf218e78043f3b8a', role: "button", "aria-expanded": this.internalOpen, "aria-controls": "accordion-content", class: "accordion-title", onClick: () => this.toggleOpen(), tabindex: "0", ref: (el) => (this.titleEl = el) }, this.icon ? (h("div", { class: "icon-wrapper" }, h("span", { "aria-hidden": "true", role: "heading", "aria-level": this.ariaLevelNumber, class: "accordion-icon" }, h("ifx-icon", { icon: "chevron-down-16" })), h("span", { class: "icon-wrapper-caption" }, h("ifx-icon", { icon: this.icon }), h("span", { id: "accordion-caption", class: "accordion-caption" }, this.caption)))) : (h("div", { class: "no-icon" }, h("span", { "aria-hidden": "true", role: "heading", "aria-level": this.ariaLevelNumber, class: "accordion-icon" }, h("ifx-icon", { icon: "chevron-down-16" })), h("span", { id: "accordion-caption", class: "accordion-caption" }, this.caption)))), h("div", { key: '74c24479cad98d8424d5626bc8751898f28b4bc1', id: "accordion-content", class: "accordion-content", ref: (el) => (this.contentEl = el), role: "region", "aria-labelledby": "accordion-caption" }, h("div", { key: 'c798429300e14be3e9b2ebb288a19ec8b325f719', class: "inner-content" }, h("slot", { key: '3ea46dbcadda505149e0dfc2dcb5125ed3c92eb1' })))));
    }
    static get is() { return "ifx-accordion-item"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["accordionItem.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["accordionItem.css"]
        };
    }
    static get properties() {
        return {
            "caption": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "The caption of the accordion item."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "caption"
            },
            "open": {
                "type": "boolean",
                "mutable": true,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Set the open attribute to open the accordion item."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "open",
                "defaultValue": "false"
            },
            "ariaLevelNumber": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "The aria-level attribute for the accordion item header."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "aria-level-number",
                "defaultValue": "3"
            },
            "icon": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "The icon to be displayed in the accordion item header."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "icon",
                "defaultValue": "\"\""
            }
        };
    }
    static get states() {
        return {
            "internalOpen": {}
        };
    }
    static get events() {
        return [{
                "method": "ifxOpen",
                "name": "ifxOpen",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "complexType": {
                    "original": "any",
                    "resolved": "any",
                    "references": {}
                }
            }, {
                "method": "ifxClose",
                "name": "ifxClose",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "Event emitted when an accordion item is closed."
                },
                "complexType": {
                    "original": "any",
                    "resolved": "any",
                    "references": {}
                }
            }];
    }
    static get elementRef() { return "el"; }
    static get watchers() {
        return [{
                "propName": "open",
                "methodName": "openChanged"
            }];
    }
    static get listeners() {
        return [{
                "name": "keydown",
                "method": "handleKeydown",
                "target": undefined,
                "capture": false,
                "passive": false
            }];
    }
}
//# sourceMappingURL=accordionItem.js.map
