pyro/dist/select.js

Pyro custom elements

import { i as c, r as d, x as u, t as b } from "./custom-element-CWJsDAat.js";
import { n as s } from "./property-Bf-I6Ep_.js";
import { o as h } from "./query-assigned-elements-DjfhL1cl.js";
import { o as v } from "./unsafe-html-DZSpJPU8.js";
import { C as y } from "./chevron-down-DE1KgYoW.js";
import { PyroSelectItem as P } from "./select-item.js";
/**
 * @license
 * Copyright 2017 Google LLC
 * SPDX-License-Identifier: BSD-3-Clause
 */
function f(e) {
  return s({ ...e, state: !0, attribute: !1 });
}
var m = Object.defineProperty, g = Object.getOwnPropertyDescriptor, l = (e, o, i, a) => {
  for (var r = a > 1 ? void 0 : a ? g(o, i) : o, n = e.length - 1, p; n >= 0; n--)
    (p = e[n]) && (r = (a ? p(o, i, r) : p(r)) || r);
  return a && r && m(o, i, r), r;
};
let t = class extends d {
  constructor() {
    super(...arguments), this.value = "", this["default-label"] = "-", this.disabled = !1, this.label = "", this.allData = [], this.getCurrentLabel = () => {
      var e;
      return this.allData.length === 0 && (this.allData = this.getChildrenData()), ((e = this.allData.find((o) => o.value === this.value)) == null ? void 0 : e.label) ?? this["default-label"];
    }, this._handleOutsideClick = (e) => this.toggleOpen(e);
  }
  handleSelect(e) {
    this.value = e.detail, this.label = this.getCurrentLabel(), this.dispatchEvent(
      new CustomEvent("input", {
        bubbles: !0,
        cancelable: !1,
        composed: !0,
        detail: this.value
      })
    );
  }
  getChildrenData() {
    return this._listItems.map((e) => ({
      value: e.value,
      label: e.label
    }));
  }
  toggleOpen(e) {
    this.shadowRoot.querySelector(".items-wrapper").toggleAttribute("open"), this.shadowRoot.querySelector("button").toggleAttribute("open"), e.stopPropagation();
  }
  connectedCallback() {
    super.connectedCallback(), window.addEventListener("pyro-selected", this._handleOutsideClick);
  }
  disconnectedCallback() {
    super.disconnectedCallback(), window.removeEventListener("pyro-selected", this._handleOutsideClick);
  }
  firstUpdated() {
    this.label = this.getCurrentLabel();
  }
  render() {
    return u`
      <button @click=${this.toggleOpen} ?disabled=${this.disabled}>
        <span>${this.label}</span>
        <slot name="icon">${v(y)}</slot>
      </button>
      <div class="items-wrapper">
        <div role="listbox" @pyro-selected=${this.handleSelect}>
          <slot></slot>
        </div>
      </div>
    `;
  }
};
t.styles = c`
    :host {
      display: inline-flex;
      position: relative;
      color: var(--pyro-select-text-color, var(--pyro-text-color));
      flex-direction: column;
    }
    button {
      display: flex;
      justify-content: space-between;
      width: 100%;
      background: inherit;
      color: var(--pyro-select-text-color, var(--pyro-text-color));
      border: var(--pyro-select-border, var(--pyro-border));
      border-radius: var(--pyro-select-border-radius, var(--pyro-border-radius));
      background: var(--pyro-select-surface-color, var(--pyro-surface-color));
      padding: var(--pyro-select-spacing, var(--pyro-spacing));
      min-width: var(--pyro-select-min-width, var(--pyro-fields-min-width));
      font-size: var(--pyro-select-font-size, var(--pyro-font-size));
      cursor: pointer;
    }
    button span {
      width: 100%;
      text-align: var(--pyro-select-text-align, left);
    }
    .items-wrapper {
      position: relative;
      display: none;
    }
    .items-wrapper[open] {
      display: block;
    }
    [role='listbox'] {
      position: absolute;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      width: 100%;
      z-index: 999999999;
      max-height: var(--pyro-select-max-height, 240px);
      overflow: auto;
      border: var(--pyro-select-border, var(--pyro-border));
      border-top: none;
      background: var(--pyro-select-surface-color, var(--pyro-surface-color));
    }
    button[open] slot[name='icon'] > *,
    button[open] ::slotted([slot='icon']) {
      transform: rotate(-180deg);
    }
  `;
l([
  s()
], t.prototype, "value", 2);
l([
  s()
], t.prototype, "default-label", 2);
l([
  s({ type: Boolean, reflect: !0 })
], t.prototype, "disabled", 2);
l([
  f()
], t.prototype, "label", 2);
l([
  h()
], t.prototype, "_listItems", 2);
t = l([
  b("pyro-select")
], t);
export {
  t as PyroSelect,
  P as PyroSelectItem
};