pyro/dist/select-item.js

Pyro custom elements

import { i as n, r as v, x as h, t as u } from "./custom-element-CWJsDAat.js";
import { n as p } from "./property-Bf-I6Ep_.js";
var d = Object.defineProperty, y = Object.getOwnPropertyDescriptor, c = (t, o, s, l) => {
  for (var e = l > 1 ? void 0 : l ? y(o, s) : o, a = t.length - 1, i; a >= 0; a--)
    (i = t[a]) && (e = (l ? i(o, s, e) : i(e)) || e);
  return l && e && d(o, s, e), e;
};
let r = class extends v {
  constructor() {
    super(...arguments), this.value = "", this.label = "";
  }
  handleClick(t) {
    this.dispatchEvent(
      new CustomEvent("pyro-selected", {
        bubbles: !0,
        cancelable: !1,
        composed: !0,
        detail: this.value
      })
    ), t.stopPropagation();
  }
  render() {
    return h` <div @click=${this.handleClick} role="option" tabindex="0"><slot>${this.label}</slot></div> `;
  }
};
r.styles = n`
    :host {
      display: block;
      color: var(--pyro-select-item-text-color, var(--pyro-text-color));
      background: var(--pyro-select-item-surface-color, var(--pyro-surface-color));
      text-align: var(--pyro-select-item-text-align, left);
      line-height: 1;
      cursor: pointer;
    }
    :host(:hover) {
      background: var(--pyro-select-item-hover-color, var(--pyro-hover-color));
    }
    div {
      padding: var(--pyro-spacing); // FIXME: does not inherit
    }
  `;
c([
  p()
], r.prototype, "value", 2);
c([
  p()
], r.prototype, "label", 2);
r = c([
  u("pyro-select-item")
], r);
export {
  r as PyroSelectItem
};