@wolf-scope/wolf-ui/dist/components/accordion-item/accordion-item.mjs

UI library for web applications using Lit

import { property as a } from "lit/decorators.js";
import { unsafeCSS as p, LitElement as c, html as h } from "lit";
import "../icon/register.mjs";
import "../icon/icon.mjs";
import "lit/directives/style-map.js";
import "../../chain-filter-963a1f6f.js";
const f = `:host{display:block;border:1px solid var(--wolf-border-color);border-radius:var(--wolf-border-radius);padding:1px;margin:4px;color:var(--wolf-color-text)}.header{display:flex;position:relative;align-items:center;cursor:pointer;padding:8px;background-color:var(--wolf-theme-color)}.header ::slotted([slot=icon-start]){margin-right:4px}.header .icon-toggle{position:absolute;transition:transform .15s ease-in;right:8px}.content{padding:0 8px;max-height:0;overflow:hidden;opacity:0;transition:opacity .15s ease,max-height .15s ease,padding .15s ease;background-color:var(--wolf-theme-color)}:host([expanded]) .content{display:block;padding:8px;max-height:fit-content;opacity:1}:host([disabled]){opacity:.5;pointer-events:none}:host([expanded]) .icon-toggle{transform:rotate(180deg)}:host([noBorder]){border:none}
`;
var m = Object.defineProperty, g = Object.getOwnPropertyDescriptor, i = (s, t, n, r) => {
  for (var e = r > 1 ? void 0 : r ? g(t, n) : t, l = s.length - 1, d; l >= 0; l--)
    (d = s[l]) && (e = (r ? d(t, n, e) : d(e)) || e);
  return r && e && m(t, n, e), e;
};
const _ = "wolf-accordion-item";
class o extends c {
  constructor() {
    super(...arguments), this.selected = !1, this.disabled = !1, this.expanded = !1, this.label = "";
  }
  handleClick() {
    this.disabled || (this.expanded = !this.expanded, this.dispatchEvent(
      new CustomEvent("changed", { bubbles: !0, composed: !0, detail: { expanded: this.expanded } })
    ));
  }
  render() {
    return h` <div class="header" @click="${this.handleClick}">
        <slot name="icon-start"></slot>
        <div name="header"><wolf-typography variant="body-default">${this.label}</wolf-typography></div>
        <wolf-icon color="var(--wolf-color-text)" class="icon-toggle" icon="expand_more"></wolf-icon>
      </div>
      <div class="content">
        <slot></slot>
      </div>`;
  }
}
o.styles = p(f);
i([
  a({ type: Boolean })
], o.prototype, "selected", 2);
i([
  a({ type: Boolean })
], o.prototype, "disabled", 2);
i([
  a({ type: Boolean, reflect: !0 })
], o.prototype, "expanded", 2);
i([
  a()
], o.prototype, "label", 2);
export {
  o as WolfAccordionItem,
  _ as tagName
};