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 };