@wolf-scope/wolf-ui/dist/components/dropdown/dropdown.mjs

UI library for web applications using Lit

import { property as n, state as a } from "lit/decorators.js";
import { unsafeCSS as c, LitElement as f, html as h } from "lit";
import "../typography/register.mjs";
import "../../chain-filter-963a1f6f.js";
import { c as w } from "../../click-outside-cd5a1f33.js";
import "../typography/typography.mjs";
const m = `:host{display:inline-block;position:relative;margin:var(--wolf-spacing-lg)}.dropdown{position:absolute;top:100%;left:0;z-index:1;display:none;background-color:var(--wolf-theme-color);box-shadow:var(--wolf-box-shadow-color-default);padding:var(--wolf-spacing-sm) 0}.selected-dropdown-item{padding:8px 16px;display:inline-flex;cursor:pointer;width:100%;box-sizing:border-box;border:1px solid var(--wolf-border-color);border-radius:var(--wolf-border-radius)}.selected-dropdown-item .icon-toggle{position:absolute;right:8px}:host([isOpen]) .dropdown{display:block;border:1px solid var(--wolf-border-color);border-radius:var(--wolf-border-radius);margin-top:1px}:host([isOpen]) .icon-toggle{transform:rotate(180deg)}
`;
var u = Object.defineProperty, g = Object.getOwnPropertyDescriptor, d = (l, o, t, r) => {
  for (var e = r > 1 ? void 0 : r ? g(o, t) : o, i = l.length - 1, p; i >= 0; i--)
    (p = l[i]) && (e = (r ? p(o, t, e) : p(e)) || e);
  return r && e && u(o, t, e), e;
};
const _ = "wolf-dropdown";
class s extends f {
  constructor() {
    super(...arguments), this.label = "", this.isOpen = !1, this.options = [], this.closeDropdown = () => {
      this.isOpen = !1;
    };
  }
  get selectedItem() {
    return this.options.find((o) => o.selected) ?? this.options[0];
  }
  toggleDropdown() {
    this.isOpen = !this.isOpen;
  }
  updated(o) {
    super.updated(o), this.isOpen && w(this, this.closeDropdown);
  }
  handleOptionSelected(o) {
    this.options.forEach((t) => {
      t.selected = t.value === o.detail.value;
    }), this.isOpen = !1;
  }
  connectedCallback() {
    super.connectedCallback(), setTimeout(() => {
      this.options = Array.from(this.querySelectorAll("wolf-dropdown-item"));
    });
  }
  render() {
    return h`
      <wolf-typography variant="header-xsmall">${this.label}</wolf-typography>
      <div class="selected-dropdown-item" @click="${this.toggleDropdown}">
        <wolf-typography variant="body-default"
          >${this.selectedItem?.label || this.selectedItem?.value}</wolf-typography
        >
        <wolf-icon color="var(--wolf-color-text)" class="icon-toggle" icon="expand_more"></wolf-icon>
      </div>
      <div class="dropdown">
        <slot @item-selected=${this.handleOptionSelected}></slot>
      </div>
    `;
  }
}
s.styles = c(m);
d([
  n()
], s.prototype, "label", 2);
d([
  n({ type: Boolean, reflect: !0 })
], s.prototype, "isOpen", 2);
d([
  a()
], s.prototype, "options", 2);
export {
  s as WolfDropdown,
  _ as tagName
};