import { r as registerInstance, h, a as getElement, c as createEvent } from './index-PqnYwNKt.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;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;}.accordion-icon{font-weight:bold;display:flex;transition:transform 0.3s}.accordion-icon:hover{color:#08665C}.accordion-item.open .accordion-icon{transform:rotate(-180deg)}.accordion-item.open .inner-content{border:1px solid #EEEDED;border-top:none;margin:0 4px 4px}.inner-content.no-content{border:none;padding: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.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' })))));
    }
    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