import { r as s } from '../../assets/chunks/customElementsUtils-dada1f80-chunk.js';
import { I as l } from '../../assets/chunks/Icon.types-993d5022-chunk.js';
import '../../../../../@lit/reactive-element/reactive-element.js';
import { html as x } from '../../../../../lit-html/lit-html.js';
import { LitElement as s$1 } from '../../../../../lit-element/lit-element.js';
import { property as n } from '../../../../../@lit/reactive-element/decorators/property.js';
import { state as t$1 } from '../../../../../@lit/reactive-element/decorators/state.js';
import '../../../../../@lit/reactive-element/decorators/query-assigned-elements.js';
import { classMap as o } from '../../../../../lit-html/directives/class-map.js';
import { d as f } from '../../assets/chunks/utils-2f3dd30a-chunk.js';
import '../headline/index.js';
import { H as t$2 } from '../../assets/chunks/Headline.types-16b43077-chunk.js';
import { css as i$1, unsafeCSS as r } from '../../../../../@lit/reactive-element/css-tag.js';

const y = `.header{-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;cursor:pointer;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;vertical-align:top;margin-bottom:var(--expandable-gap);padding:var(--expandable-header-padding)}.header .icon{color:var(--link-color);margin-right:8px;-webkit-transform:rotate(0deg);transform:rotate(0);-webkit-transition:-webkit-transform .3s ease-in-out;transition:-webkit-transform .3s ease-in-out;transition:transform .3s ease-in-out;transition:transform .3s ease-in-out,-webkit-transform .3s ease-in-out}.stretched .header{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}.illuminated .header .label{color:var(--link-color);--headline-color: var(--link-color)}.illuminated.inverted .header .label{color:var(--color-white);--headline-color: var(--color-white)}.content-container{overflow:hidden;-webkit-transition:height .3s ease-out;transition:height .3s ease-out}.content{opacity:.3;overflow:hidden;-webkit-transition:opacity .3s ease-in-out;transition:opacity .3s ease-in-out;padding:var(--expandable-content-padding)}.expanded .icon{-webkit-transform:rotate(-180deg);transform:rotate(-180deg)}.expanded .content{opacity:1}.icon-right .header{-webkit-box-orient:horizontal;-webkit-box-direction:reverse;-webkit-flex-direction:row-reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between}.icon-right .icon{margin-left:8px;margin-right:0}.icon-right.expanded .icon{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.expanded:not(.animating){overflow:visible}.inverted .header .icon,.inverted .header .label{color:#fff;--headline-color: #fff }.inverted .content{color:#fff}
`;
var c = /* @__PURE__ */ ((a) => (a.LEFT = "left", a.RIGHT = "right", a))(c || {}), k = Object.defineProperty, E = Object.getOwnPropertyDescriptor, i = (a, e, r, n) => {
  for (var o = n > 1 ? void 0 : n ? E(e, r) : e, d = a.length - 1, l; d >= 0; d--)
    (l = a[d]) && (o = (n ? l(e, r, o) : l(o)) || o);
  return n && o && k(e, r, o), o;
};
class t extends s$1 {
  constructor() {
    super(...arguments), this.expanded = !1, this.iconPosition = c.LEFT, this.inverted = !1, this.stretched = !1, this.illuminated = !1, this.isAnimating = !1, this.isExpanded = !1, this.contentHeight = 0;
  }
  static get styles() {
    return i$1`
            ${r(y)}
        `;
  }
  connectedCallback() {
    super.connectedCallback(), this.resizeFunction = f(() => this.resizeContentHeight(), 50), window.addEventListener("resize", this.resizeFunction);
  }
  disconnectedCallback() {
    super.disconnectedCallback(), this.resizeFunction && window.removeEventListener("resize", this.resizeFunction);
  }
  update(e) {
    e.has("expanded") && (this.isExpanded = this.expanded), this.resizeContentHeight(), super.update(e);
  }
  firstUpdated(e) {
    this.resizeContentHeight(), super.firstUpdated(e);
  }
  toggleOpenState() {
    this.isAnimating = !0, this.isExpanded = !this.isExpanded, setTimeout(() => {
      this.isAnimating = !1;
    }, 300);
    const e = new CustomEvent("axa-expandable.change", {
      bubbles: !1,
      composed: !0,
      detail: {
        open: this.isExpanded
      }
    });
    this.dispatchEvent(e);
  }
  handleClick(e) {
    e.preventDefault(), this.toggleOpenState();
  }
  handleKeyDown(e) {
    (e.code === "Enter" || e.code === "Space" || e.code === "NumpadEnter") && (e.preventDefault(), this.toggleOpenState());
  }
  resizeContentHeight() {
    var e;
    this.shadowRoot && (this.contentHeight = ((e = this.shadowRoot.getElementById("expandable_content")) == null ? void 0 : e.getBoundingClientRect().height) || 0);
  }
  render() {
    const e = {
      expandable: !0,
      animating: this.isAnimating,
      expanded: this.isExpanded,
      "icon-right": this.iconPosition === c.RIGHT,
      inverted: this.inverted,
      illuminated: this.illuminated,
      stretched: this.stretched
    }, r = this.isExpanded ? this.contentHeight : 0;
    return x`
            <div class="${o(e)}" role="region">
                <div
                    class="header"
                    role="button"
                    aria-labelledby="label"
                    aria-expanded="${this.isExpanded ? "true" : "false"}"
                    tabindex="0"
                    @click="${(n) => this.handleClick(n)}"
                    @keydown="${(n) => this.handleKeyDown(n)}"
                >
                    <div class="icon">
                        <axa-icon name="${l.IconExpandMore}"></axa-icon>
                    </div>
                    <slot name="label" id="label">
                        <div class="label"><axa-headline heading="${t$2.HEADING_2}">${this.label}</axa-headline></div>
                    </slot>
                </div>
                <div class="content-container" style="height: ${r}px">
                    <div id="expandable_content" class="content" aria-hidden="${this.isExpanded ? "false" : "true"}">
                        <slot name="content"></slot>
                    </div>
                </div>
            </div>
        `;
  }
}
i([
  n()
], t.prototype, "expanded", 2);
i([
  n()
], t.prototype, "label", 2);
i([
  n({ attribute: "icon-position" })
], t.prototype, "iconPosition", 2);
i([
  n()
], t.prototype, "inverted", 2);
i([
  n()
], t.prototype, "stretched", 2);
i([
  n({ type: Boolean })
], t.prototype, "illuminated", 2);
i([
  t$1()
], t.prototype, "isAnimating", 2);
i([
  t$1()
], t.prototype, "isExpanded", 2);
i([
  t$1()
], t.prototype, "contentHeight", 2);
s("axa-expandable", t);

export { t as Expandable, c as ExpandableIconPosition };