//ifxAccordionItem
import { h } from "@stencil/core";
export class AccordionItem {
    constructor() {
        this.open = false;
        this.AriaLevel = 3;
        this.internalOpen = false;
    }
    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.contentEl) {
            if (this.internalOpen) {
                this.contentEl.style.height = 'auto';
                const updatedHeight = this.contentEl.scrollHeight;
                this.contentEl.style.height = `${updatedHeight}px`;
                this.contentEl.style.overflow = 'visible';
            }
            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: 'ac0d35621b7f06c3dd0bcde1b400dd173a1fcabd', class: `accordion-item ${this.internalOpen ? 'open' : ''}` }, h("div", { key: '88eaf8e286c71444636256f3b8d249912624dbd5', role: "button", "aria-expanded": this.internalOpen, "aria-controls": "accordion-content", class: "accordion-title", onClick: () => this.toggleOpen(), tabindex: "0", ref: el => (this.titleEl = el) }, h("span", { key: '4dee92a98b178f371592b69723fc24b7606e916f', "aria-hidden": "true", role: "heading", "aria-level": String(this.AriaLevel), class: "accordion-icon" }, h("ifx-icon", { key: 'cfab69fc24b3c7e442379701612827d8564a1572', icon: "chevron-down-16" })), h("span", { key: 'e3f2864b2987b47e4f4f80e033198dda06f25805', id: "accordion-caption", class: "accordion-caption" }, this.caption)), h("div", { key: '8a5c24c39e6366f1bdbbe4360113f4bda340fa19', id: "accordion-content", class: "accordion-content", ref: el => (this.contentEl = el), role: "region", "aria-labelledby": "accordion-caption" }, h("div", { key: '2d9585a6958af61c60b98d4b1dc2763bfdddf603', class: "inner-content" }, h("slot", { key: '2fe3539eb389112be66e8bfe729b6b2bbadec2df' })))));
    }
    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",
                "attribute": "caption",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false
            },
            "open": {
                "type": "boolean",
                "attribute": "open",
                "mutable": true,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "false"
            },
            "AriaLevel": {
                "type": "number",
                "attribute": "aria-level",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "3"
            }
        };
    }
    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": ""
                },
                "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
