import { r as registerInstance, h, a as getElement, c as createEvent } from './index-DtIEDtZ8.js';
import { d as detectFramework, t as trackComponent } from './framework-detection-DcmcuUOA.js';
import { i as isNestedInIfxComponent } from './dom-utils-Bw2fh5LT.js';

const accordionCss = ":root{--ifx-font-family:\"Source Sans 3\", 'Arial, sans-serif'}:host{display:block}.accordion-wrapper{display:flex;flex-direction:column;gap:8px;font-family:var(--ifx-font-family)}";

const Accordion = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        this.autoCollapse = false;
    }
    async componentDidLoad() {
        if (!isNestedInIfxComponent(this.el)) {
            const framework = detectFramework();
            trackComponent('ifx-accordion', await framework);
        }
    }
    async onItemOpen(event) {
        if (this.autoCollapse) {
            const items = Array.from(this.el.querySelectorAll('ifx-accordion-item'));
            for (const item of items) {
                const itemElement = item;
                if (itemElement !== event.target && (await itemElement.open)) {
                    itemElement.open = false;
                }
            }
        }
    }
    render() {
        return (h("div", { key: '903cc44b4886b77e59e66ab2a5cdf681dafeb9bc', class: "accordion-wrapper" }, h("slot", { key: 'e0abec42188606e8c80fc3db44fba19a7aa69ed8' })));
    }
    static get delegatesFocus() { return true; }
    get el() { return getElement(this); }
};
Accordion.style = accordionCss;

const accordionItemCss = ":root{--ifx-font-family:\"Source Sans 3\", 'Arial, sans-serif'}.accordion-item{border-radius:3px;transition:all 0.3s;font-family:var(--ifx-font-family)}.accordion-title:focus{outline:none}.accordion-title:focus::after{content:\"\";display:block;position:absolute;top:-4px;bottom:-4px;left:-4px;right:-4px;border-radius:5px;border:2px solid #0A8276;box-sizing:border-box}.accordion-title:hover{border:1px solid #EEEDED;color:#08665C}.accordion-title{display:flex;align-items:center;position:relative;padding:12px 16px;gap:12px;color:#0A8276;background-color:#FFFFFF;border:1px solid #EEEDED;cursor:pointer;margin:4px 4px 0px}.accordion-caption{font-weight:600;font-size:1.125rem}.accordion-content{gap:8px;overflow:hidden;height:0;transition:height 0.3s ease;line-height:24px;font-size:1rem;font-weight:400}.inner-content{background-color:#FFFFFF;padding:16px;word-wrap:break-word;overflow-wrap:anywhere;align-self:stretch;margin:0 4px 4px;border:1px solid transparent;border-top:1px solid transparent}.accordion-icon{font-weight:bold;display:flex;transition:transform 0.3s}.accordion-icon:hover{color:#08665C}.accordion-item.open .accordion-content{max-height:1000px}.accordion-item.open .accordion-icon{transform:rotate(-180deg)}.accordion-item.open .inner-content{border-color:#EEEDED;border-top-color:transparent;transition:border-color 0s}.accordion-item:not(.open) .inner-content{transition:border-color 0s 0.3s}.inner-content.no-content{border:none;padding:0;margin:0}";

const AccordionItem = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        this.ifxOpen = createEvent(this, "ifxOpen", 7);
        this.ifxClose = createEvent(this, "ifxClose", 7);
        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.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: '1317347110a9c74932695b8ffff8ca31d3c8e6c3', class: `accordion-item ${this.internalOpen ? 'open' : ''}` }, h("div", { key: 'ad5d46e476f76ac121239c15904a4884a6ba4cc5', 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: '924e061fd270701a7c78433a56fcd70a40dfe7f5', "aria-hidden": "true", role: "heading", "aria-level": String(this.AriaLevel), class: "accordion-icon" }, h("ifx-icon", { key: '40cee40a058eb576d0ef5482f6f7f0adb47a5f4e', icon: "chevron-down-16" })), h("span", { key: '37715ae9f3621954f081bec3d4e861d1dd60847b', id: "accordion-caption", class: "accordion-caption" }, this.caption)), h("div", { key: '32c1186d1f4dd1a5a09842224cbfe3d648cc7fac', id: "accordion-content", class: "accordion-content", ref: el => (this.contentEl = el), role: "region", "aria-labelledby": "accordion-caption" }, h("div", { key: '35618fea4d36844fbad5aed1c07dc2e7378a1d4e', class: "inner-content" }, h("slot", { key: 'eaa5cdaffd9381f8b05b202f6213d8304fbf7cbb' })))));
    }
    get el() { return getElement(this); }
    static get watchers() { return {
        "open": ["openChanged"]
    }; }
};
AccordionItem.style = accordionItemCss;

export { Accordion as ifx_accordion, AccordionItem as ifx_accordion_item };
//# sourceMappingURL=ifx-accordion.ifx-accordion-item.entry.js.map

//# sourceMappingURL=ifx-accordion_2.entry.js.map