pyro/dist/list-item.js

Pyro custom elements

import { T as p, i as h, r as d, x as b, t as u } from "./custom-element-CWJsDAat.js";
import { n as c } from "./property-Bf-I6Ep_.js";
import { e as f, i as m, t as v } from "./directive-kLG6oqUu.js";
/**
 * @license
 * Copyright 2018 Google LLC
 * SPDX-License-Identifier: BSD-3-Clause
 */
const y = f(class extends m {
  constructor(s) {
    var e;
    if (super(s), s.type !== v.ATTRIBUTE || s.name !== "class" || ((e = s.strings) == null ? void 0 : e.length) > 2) throw Error("`classMap()` can only be used in the `class` attribute and must be the only part in the attribute.");
  }
  render(s) {
    return " " + Object.keys(s).filter((e) => s[e]).join(" ") + " ";
  }
  update(s, [e]) {
    var i, r;
    if (this.st === void 0) {
      this.st = /* @__PURE__ */ new Set(), s.strings !== void 0 && (this.nt = new Set(s.strings.join(" ").split(/\s/).filter((t) => t !== "")));
      for (const t in e) e[t] && !((i = this.nt) != null && i.has(t)) && this.st.add(t);
      return this.render(e);
    }
    const l = s.element.classList;
    for (const t of this.st) t in e || (l.remove(t), this.st.delete(t));
    for (const t in e) {
      const o = !!e[t];
      o === this.st.has(t) || (r = this.nt) != null && r.has(t) || (o ? (l.add(t), this.st.add(t)) : (l.remove(t), this.st.delete(t)));
    }
    return p;
  }
});
var g = Object.defineProperty, x = Object.getOwnPropertyDescriptor, n = (s, e, l, i) => {
  for (var r = i > 1 ? void 0 : i ? x(e, l) : e, t = s.length - 1, o; t >= 0; t--)
    (o = s[t]) && (r = (i ? o(e, l, r) : o(r)) || r);
  return i && r && g(e, l, r), r;
};
let a = class extends d {
  constructor() {
    super(...arguments), this.handleClick = (s) => {
      var e;
      (e = this.callback) == null || e.call(this), s.stopPropagation(), this.dispatchEvent(
        new CustomEvent("click", {
          bubbles: !0,
          cancelable: !1,
          composed: !0,
          detail: { label: this.label, callback: this.callback, selected: this.selected }
        })
      ), this.selected = !0;
    }, this.label = "", this.selected = !1;
  }
  render() {
    return b`
      <div tabindex="0" @click=${this.handleClick} class=${y({ clickable: !!this.callback })}>
        <slot name="prefix"></slot>
        <slot>${this.label}</slot>
        <slot name="suffix"></slot>
      </div>
    `;
  }
};
a.styles = h`
    :host {
      display: block;
      color: var(--pyro-list-item-text-color, var(--pyro-text-color));
      padding: var(--pyro-list-item-spacing, var(--pyro-spacing-s));
      user-select: none;
    }
    .clickable {
      cursor: pointer;
    }
  `;
n([
  c()
], a.prototype, "label", 2);
n([
  c({ reflect: !0, type: Boolean })
], a.prototype, "selected", 2);
n([
  c({ attribute: !1 })
], a.prototype, "callback", 2);
a = n([
  u("pyro-list-item")
], a);
export {
  a as PyroListItem
};