/* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
import { c as customElement } from "../../chunks/runtime.js";
import { css, html } from "lit";
import { LitElement, createEvent, safeClassMap } from "@arcgis/lumina";
import { c as createObserver } from "../../chunks/observers.js";
const CSS = {
  accordion: "accordion",
  transparent: "accordion--transparent"
};
const styles = css`:host{position:relative;display:block;max-inline-size:100%;line-height:1.5rem}.accordion{border-width:1px;border-block-end-width:0px;border-style:solid;border-color:var(--calcite-accordion-border-color, var(--calcite-color-border-2));background-color:var(--calcite-accordion-background-color, var(--calcite-color-foreground-1))}.accordion--transparent{--calcite-accordion-border-color: transparent;border-color:var(--calcite-color-transparent);background-color:var(--calcite-color-transparent)}:host([scale=s]){--calcite-internal-accordion-item-spacing-unit: .25rem;--calcite-internal-accordion-icon-margin: .5rem;--calcite-internal-accordion-item-padding: var(--calcite-internal-accordion-item-spacing-unit) .5rem;font-size:var(--calcite-font-size-relative-sm);line-height:var(--calcite-font-line-height-sm)}:host([scale=m]){--calcite-internal-accordion-item-spacing-unit: .5rem;--calcite-internal-accordion-icon-margin: .75rem;--calcite-internal-accordion-item-padding: var(--calcite-internal-accordion-item-spacing-unit) .75rem;font-size:var(--calcite-font-size-relative-base);line-height:var(--calcite-font-line-height-base)}:host([scale=l]){--calcite-internal-accordion-item-spacing-unit: .75rem;--calcite-internal-accordion-icon-margin: 1rem;--calcite-internal-accordion-item-padding: var(--calcite-internal-accordion-item-spacing-unit) 1rem;font-size:var(--calcite-font-size-relative-md);line-height:var(--calcite-font-line-height-md)}:host([hidden]){display:none}[hidden]{display:none}`;
class Accordion extends LitElement {
  constructor() {
    super();
    this.mutationObserver = createObserver("mutation", () => this.updateAccordionItems());
    this.appearance = "solid";
    this.iconPosition = "end";
    this.iconType = "chevron";
    this.scale = "m";
    this.selectionMode = "multiple";
    this.calciteInternalAccordionChange = createEvent({ cancelable: false });
    this.listen("calciteInternalAccordionItemSelect", this.updateActiveItemOnChange);
  }
  static {
    this.properties = { appearance: [3, {}, { reflect: true }], iconPosition: [3, {}, { reflect: true }], iconType: [3, {}, { reflect: true }], scale: [3, {}, { reflect: true }], selectionMode: [3, {}, { reflect: true }] };
  }
  static {
    this.styles = styles;
  }
  connectedCallback() {
    super.connectedCallback();
    this.mutationObserver?.observe(this.el, { childList: true });
    this.updateAccordionItems();
  }
  willUpdate(changes) {
    if (changes.has("appearance") && (this.hasUpdated || this.appearance !== "solid") || changes.has("iconPosition") && (this.hasUpdated || this.iconPosition !== "end") || changes.has("iconType") && (this.hasUpdated || this.iconType !== "chevron") || changes.has("scale") && (this.hasUpdated || this.scale !== "m") || changes.has("selectionMode") && (this.hasUpdated || this.selectionMode !== "multiple")) {
      this.updateAccordionItems();
    }
  }
  disconnectedCallback() {
    super.disconnectedCallback();
    this.mutationObserver?.disconnect();
  }
  updateActiveItemOnChange(event) {
    this.calciteInternalAccordionChange.emit({
      requestedAccordionItem: event.detail.requestedAccordionItem
    });
    event.stopPropagation();
  }
  updateAccordionItems() {
    this.el.querySelectorAll("calcite-accordion-item").forEach((item) => {
      item.appearance = this.appearance;
      item.iconPosition = this.iconPosition;
      item.iconType = this.iconType;
      item.scale = this.scale;
    });
    document.dispatchEvent(new CustomEvent("calciteInternalAccordionItemsSync"));
  }
  render() {
    const transparent = this.appearance === "transparent";
    return html`<div class=${safeClassMap({
      [CSS.transparent]: transparent,
      [CSS.accordion]: !transparent
    })}><slot></slot></div>`;
  }
}
customElement("calcite-accordion", Accordion);
export {
  Accordion
};
