'use strict';

var index = require('./index-CpWVsZ_u.js');
var domUtils = require('./dom-utils-BdvOgC2b.js');
var tracking = require('./tracking-BPjaTlNR.js');

const accordionCss = () => `:host{display:block}.accordion-wrapper{display:flex;flex-direction:column;gap:8px;font-family:var(--ifx-font-family)}`;

const Accordion = class {
    constructor(hostRef) {
        index.registerInstance(this, hostRef);
    }
    get el() { return index.getElement(this); }
    /** Collapse the other items when one item is opened. */
    autoCollapse = false;
    async componentDidLoad() {
        if (!domUtils.isNestedInIfxComponent(this.el)) {
            const framework = tracking.detectFramework();
            tracking.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 (index.h("div", { key: '3c3cc80be721384a1a8e7cb52d8480f11fdbc8ea', class: "accordion-wrapper" }, index.h("slot", { key: '8216da5ba75604ada6f177eab26359e35d8d13ae' })));
    }
    static get delegatesFocus() { return true; }
};
Accordion.style = accordionCss();

const accordionItemCss = () => `.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}.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:auto}.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}.accordion-icon .with-icon{justify-content:flex-end;align-items:center}.no-icon{display:flex;align-items:center;gap:12px;flex-direction:row}.icon-wrapper{display:flex;align-items:center;justify-content:flex-start;flex-direction:row-reverse;width:100%;gap:12px;justify-content:space-between}.icon-wrapper-caption{display:flex;align-items:center;justify-content:flex-start;gap:12px}`;

const AccordionItem = class {
    constructor(hostRef) {
        index.registerInstance(this, hostRef);
        this.ifxOpen = index.createEvent(this, "ifxOpen", 7);
        this.ifxClose = index.createEvent(this, "ifxClose", 7);
    }
    get el() { return index.getElement(this); }
    /** 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 (index.h("div", { key: 'c7a18a15bd5272ae71ffc3cefa75268cd60a8238', class: `accordion-item ${this.internalOpen ? "open" : ""}` }, index.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 ? (index.h("div", { class: "icon-wrapper" }, index.h("span", { "aria-hidden": "true", role: "heading", "aria-level": this.ariaLevelNumber, class: "accordion-icon" }, index.h("ifx-icon", { icon: "chevron-down-16" })), index.h("span", { class: "icon-wrapper-caption" }, index.h("ifx-icon", { icon: this.icon }), index.h("span", { id: "accordion-caption", class: "accordion-caption" }, this.caption)))) : (index.h("div", { class: "no-icon" }, index.h("span", { "aria-hidden": "true", role: "heading", "aria-level": this.ariaLevelNumber, class: "accordion-icon" }, index.h("ifx-icon", { icon: "chevron-down-16" })), index.h("span", { id: "accordion-caption", class: "accordion-caption" }, this.caption)))), index.h("div", { key: '74c24479cad98d8424d5626bc8751898f28b4bc1', id: "accordion-content", class: "accordion-content", ref: (el) => (this.contentEl = el), role: "region", "aria-labelledby": "accordion-caption" }, index.h("div", { key: 'c798429300e14be3e9b2ebb288a19ec8b325f719', class: "inner-content" }, index.h("slot", { key: '3ea46dbcadda505149e0dfc2dcb5125ed3c92eb1' })))));
    }
    static get watchers() { return {
        "open": [{
                "openChanged": 0
            }]
    }; }
};
AccordionItem.style = accordionItemCss();

exports.ifx_accordion = Accordion;
exports.ifx_accordion_item = AccordionItem;
//# sourceMappingURL=ifx-accordion.ifx-accordion-item.entry.cjs.js.map

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