pyro/dist/list.js

Pyro custom elements

import { i as c, r as m, x as d, t as h } from "./custom-element-CWJsDAat.js";
import { n } from "./property-Bf-I6Ep_.js";
import { o as y } from "./query-assigned-elements-DjfhL1cl.js";
import { f as b } from "./findDeepChildren-DcrW2E5D.js";
import { PyroListItem as I } from "./list-item.js";
var f = Object.defineProperty, v = Object.getOwnPropertyDescriptor, o = (e, s, i, t) => {
  for (var r = t > 1 ? void 0 : t ? v(s, i) : s, a = e.length - 1, p; a >= 0; a--)
    (p = e[a]) && (r = (t ? p(s, i, r) : p(r)) || r);
  return t && r && f(s, i, r), r;
};
let l = class extends m {
  constructor() {
    super(...arguments), this.items = [], this.header = "", this._listItems = [], this.handleBubbledClick = (e) => {
      this._listItems.forEach((t) => {
        t.isSameNode(e.target) ? t.setAttribute("selected", "") : t.removeAttribute("selected");
      });
      const s = this.items.map((t) => ({
        ...t,
        selected: !1
      })), i = e.detail.label;
      if (this.items.length > 0) {
        const t = s.findIndex((r) => r.label === i);
        s[t] = { ...s[t], selected: !0 }, this.items = s;
      }
    };
  }
  firstUpdated() {
    this._listItems = b(this._slotElements, "pyro-list-item");
  }
  render() {
    return d`
      <slot name="header" part="header"><div class="lost">${this.header}</div></slot>
      <slot @click=${this.handleBubbledClick} class="items" part="items">
        ${this.items.map(
      (e) => d`
            <pyro-list-item
              part="item${e.selected ? " selected" : ""}"
              label=${e.label}
              .callback=${e.callback}
              ?selected=${e.selected}
              >${e.label}</pyro-list-item
            >
          `
    )}
      </slot>
    `;
  }
};
l.styles = c`
    :host {
      display: block;
      color: var(--pyro-list-text-color, var(--pyro-text-color));
      padding: var(--pyro-list-spacing, var(--pyro-spacing-s));
      min-width: var(--pyro-list-min-width, 130px);
    }
    .items {
      list-style: none;
      padding: 0;
      margin: 0;
      border: var(--pyro-list-border, none);
    }
    ::slotted(*[slot='header']),
    .lost {
      padding-bottom: var(--pyro-list-spacing, var(--pyro-spacing));
    }
  `;
o([
  n({ type: Array, attribute: !1 })
], l.prototype, "items", 2);
o([
  n()
], l.prototype, "header", 2);
o([
  y({ flatten: !0 })
], l.prototype, "_slotElements", 2);
l = o([
  h("pyro-list")
], l);
export {
  l as PyroList,
  I as PyroListItem
};