'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

const index = require('./index-ca0e0765.js');

const accordionCss = ":root{--ifx-font-family:\"Source Sans 3\";font-family:var(--ifx-font-family, 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) {
    index.registerInstance(this, hostRef);
    this.autoCollapse = false;
  }
  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", { class: "accordion-wrapper" }, index.h("slot", null)));
  }
  get el() { return index.getElement(this); }
};
Accordion.style = accordionCss;

const accordionItemCss = ":root{--ifx-font-family:\"Source Sans 3\";font-family:var(--ifx-font-family, sans-serif)}.accordion-item{border-radius:3px;overflow:hidden;transition:all 0.3s;font-family:var(--ifx-font-family)}.accordion-title:hover{border:1px solid #EEEDED;color:#08665C}.accordion-title{display:flex;align-items:center;padding:12px 16px;gap:12px;color:#0A8276;background-color:#FFFFFF;border:1px solid #EEEDED;cursor:pointer}.accordion-caption{font-weight:600;font-size:1.125rem}.accordion-content{gap:8px;max-height:0;overflow:hidden;transition:max-height 0.3s ease-in-out;line-height:24px;font-size:1rem;font-weight:400}.inner-content{background-color:#FFFFFF;padding:24px;word-wrap:break-word;overflow-wrap:anywhere;align-self:stretch;}.accordion-icon{font-weight:bold;display:inline-block;transition:transform 0.3s}.accordion-icon:hover{color:#08665C}.accordion-item.open .accordion-icon{transform:rotate(-180deg)}";

const IfxAccordionItem = class {
  constructor(hostRef) {
    index.registerInstance(this, hostRef);
    this.ifxItemOpen = index.createEvent(this, "ifxItemOpen", 7);
    this.ifxItemClose = index.createEvent(this, "ifxItemClose", 7);
    this.caption = undefined;
    this.open = false;
    this.initialCollapse = true;
    this.internalOpen = false;
  }
  componentWillLoad() {
    this.internalOpen = this.open;
    if (!this.initialCollapse) {
      this.internalOpen = true;
    }
  }
  componentDidLoad() {
    this.openAccordionItem();
  }
  componentDidUpdate() {
    this.openAccordionItem();
  }
  openChanged(newValue) {
    this.internalOpen = newValue;
  }
  toggleOpen() {
    this.internalOpen = !this.internalOpen;
    this.open = this.internalOpen;
    if (this.internalOpen) {
      this.ifxItemOpen.emit({ isOpen: this.internalOpen });
    }
    else {
      this.ifxItemClose.emit({ isClosed: !this.internalOpen });
    }
  }
  openAccordionItem() {
    if (this.internalOpen) {
      this.contentEl.style.maxHeight = `${this.contentEl.scrollHeight}px`;
    }
    else {
      this.contentEl.style.maxHeight = '0';
    }
  }
  handleSlotChange(e) {
    const slotElement = e.target;
    const nodes = slotElement.assignedNodes();
    if (nodes.length > 0) {
      nodes.forEach(node => {
        const observer = new MutationObserver((mutationsList, _) => {
          for (let mutation of mutationsList) {
            if (mutation.type === 'childList') {
              if (this.internalOpen) {
                this.openAccordionItem();
              }
            }
          }
        });
        observer.observe(node, { attributes: true, childList: true, subtree: true });
      });
    }
    if (this.internalOpen) {
      this.openAccordionItem();
    }
  }
  render() {
    return (index.h("div", { "aria-label": this.caption, class: `accordion-item ${this.internalOpen ? 'open' : ''}` }, index.h("div", { class: "accordion-title", onClick: () => this.toggleOpen() }, index.h("span", { class: "accordion-icon" }, index.h("ifx-icon", { icon: "chevron-down-12" })), index.h("span", { class: "accordion-caption" }, this.caption)), index.h("div", { class: "accordion-content", ref: (el) => (this.contentEl = el) }, index.h("div", { class: "inner-content" }, index.h("slot", { onSlotchange: (e) => this.handleSlotChange(e) })))));
  }
  static get watchers() { return {
    "open": ["openChanged"]
  }; }
};
IfxAccordionItem.style = accordionItemCss;

exports.ifx_accordion = Accordion;
exports.ifx_accordion_item = IfxAccordionItem;

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