@prioticket/design-system-web 1.4.1 → 1.4.2

package/dist/components/pd-select.es.js

@@ -1,280 +1,253 @@
-import { css as m, LitElement as y, nothing as c, html as r } from "lit";
-import { query as h, property as l, state as u, customElement as v } from "lit/decorators.js";
+import { css as y, LitElement as v, render as h, nothing as d, html as i } from "lit";
+import { query as m, property as a, state as u, customElement as f } from "lit/decorators.js";
 import "@material/web/select/filled-select.js";
 import "@material/web/select/outlined-select.js";
 import "@material/web/select/select-option.js";
 import "@material/web/icon/icon.js";
 import "@material/web/checkbox/checkbox.js";
 import "./pd-chip.es.js";
-var f = Object.defineProperty, b = Object.getOwnPropertyDescriptor, s = (e, i, o, a) => {
-  for (var n = a > 1 ? void 0 : a ? b(i, o) : i, d = e.length - 1, p; d >= 0; d--)
-    (p = e[d]) && (n = (a ? p(i, o, n) : p(n)) || n);
-  return a && n && f(i, o, n), n;
+var g = Object.defineProperty, b = Object.getOwnPropertyDescriptor, s = (e, t, r, l) => {
+  for (var n = l > 1 ? void 0 : l ? b(t, r) : t, c = e.length - 1, p; c >= 0; c--)
+    (p = e[c]) && (n = (l ? p(t, r, n) : p(n)) || n);
+  return l && n && g(t, r, n), n;
 };
-let t = class extends y {
+let o = class extends v {
   constructor() {
-    super(...arguments), this.variant = "outlined", this.label = "", this.value = "", this.disabled = !1, this.required = !1, this.errorText = "", this.error = !1, this.supportingText = "", this.options = [], this.leadingIcon = "", this.multiple = !1, this.showChips = !0, this.chipVariant = "input", this.placeholder = "", this.searchable = !1, this.isOpen = !1, this.searchQuery = "", this.selectedValues = [], this.boundHandleClickOutside = this.handleClickOutside.bind(this), this.boundHandleKeyDown = this.handleKeyDown.bind(this), this.boundUpdateDropdownPosition = this.updateDropdownPosition.bind(this);
+    super(...arguments), this.variant = "outlined", this.label = "", this.value = "", this.disabled = !1, this.required = !1, this.errorText = "", this.error = !1, this.supportingText = "", this.options = [], this.leadingIcon = "", this.multiple = !1, this.showChips = !0, this.chipVariant = "input", this.placeholder = "", this.searchable = !1, this.isOpen = !1, this.searchQuery = "", this.selectedValues = [], this.overlayEl = null, this.updateOverlayPosition = () => {
+      if (!this.overlayEl || !this.trigger) return;
+      const e = this.trigger.getBoundingClientRect();
+      this.overlayEl.style.left = `${e.left}px`, this.overlayEl.style.top = `${e.bottom + 4}px`, this.overlayEl.style.width = `${e.width}px`;
+    }, this.handleTriggerClick = (e) => {
+      this.disabled || (e.stopPropagation(), this.searchQuery = "", this.isOpen = !this.isOpen);
+    }, this.handleClickOutside = (e) => {
+      if (!this.isOpen) return;
+      const t = e.composedPath();
+      t.includes(this) || this.overlayEl && t.includes(this.overlayEl) || (this.isOpen = !1);
+    }, this.handleKeyDown = (e) => {
+      e.key === "Escape" && (this.isOpen = !1);
+    };
   }
   connectedCallback() {
-    super.connectedCallback(), document.addEventListener("click", this.boundHandleClickOutside), document.addEventListener("keydown", this.boundHandleKeyDown), window.addEventListener("scroll", this.boundUpdateDropdownPosition, !0), window.addEventListener("resize", this.boundUpdateDropdownPosition);
+    super.connectedCallback(), document.addEventListener("click", this.handleClickOutside), document.addEventListener("keydown", this.handleKeyDown), window.addEventListener("scroll", this.updateOverlayPosition, !0), window.addEventListener("resize", this.updateOverlayPosition);
   }
   disconnectedCallback() {
-    super.disconnectedCallback(), document.removeEventListener("click", this.boundHandleClickOutside), document.removeEventListener("keydown", this.boundHandleKeyDown), window.removeEventListener("scroll", this.boundUpdateDropdownPosition, !0), window.removeEventListener("resize", this.boundUpdateDropdownPosition);
+    super.disconnectedCallback(), document.removeEventListener("click", this.handleClickOutside), document.removeEventListener("keydown", this.handleKeyDown), window.removeEventListener("scroll", this.updateOverlayPosition, !0), window.removeEventListener("resize", this.updateOverlayPosition), this.closeOverlay();
   }
   willUpdate(e) {
-    e.has("value") && this.multiple && (Array.isArray(this.value) ? this.selectedValues = [...this.value] : this.value ? this.selectedValues = [this.value] : this.selectedValues = []);
-  }
-  handleChange(e) {
-    e.stopPropagation();
-    const i = e.target;
-    this.value = i.value, this.dispatchEvent(
-      new CustomEvent("change", {
-        bubbles: !0,
-        composed: !0,
-        detail: { value: this.value }
-      })
-    );
-  }
-  handleOpen() {
-    this.trailingIcon?.classList.add("rotated");
-  }
-  handleClose() {
-    this.trailingIcon?.classList.remove("rotated");
-  }
-  // Multi-select specific handlers
-  handleTriggerClick(e) {
-    this.disabled || (e.stopPropagation(), this.isOpen = !this.isOpen, this.isOpen && (this.searchQuery = "", this.updateComplete.then(() => {
-      this.updateDropdownPosition();
-    })));
-  }
-  handleOptionClick(e, i) {
-    if (i.stopPropagation(), !this.options.find((a) => a.value === e)?.disabled) {
-      if (this.selectedValues.includes(e))
-        this.selectedValues = this.selectedValues.filter((a) => a !== e);
-      else {
-        if (this.maxSelections && this.selectedValues.length >= this.maxSelections) return;
-        this.selectedValues = [...this.selectedValues, e];
-      }
-      this.value = [...this.selectedValues], this.dispatchEvent(
-        new CustomEvent("change", {
-          bubbles: !0,
-          composed: !0,
-          detail: { value: this.selectedValues }
-        })
-      );
-    }
-  }
-  handleChipRemove(e, i) {
-    i.stopPropagation(), this.selectedValues = this.selectedValues.filter((o) => o !== e), this.value = [...this.selectedValues], this.dispatchEvent(
-      new CustomEvent("change", {
-        bubbles: !0,
-        composed: !0,
-        detail: { value: this.selectedValues }
-      })
-    ), this.dispatchEvent(
-      new CustomEvent("chip-remove", {
-        bubbles: !0,
-        composed: !0,
-        detail: { value: e }
-      })
-    );
-  }
-  handleClickOutside(e) {
-    if (!this.isOpen) return;
-    e.composedPath().includes(this) || (this.isOpen = !1);
-  }
-  handleKeyDown(e) {
-    if (!this.isOpen && (e.key === "Enter" || e.key === " ")) {
-      this.multiple && e.target === this.trigger && (this.isOpen = !0, this.searchQuery = "", this.updateComplete.then(() => this.updateDropdownPosition()), e.preventDefault());
-      return;
-    }
-    this.isOpen && e.key === "Escape" && (this.isOpen = !1, e.preventDefault());
-  }
-  handleSearchInput(e) {
-    const i = e.target;
-    this.searchQuery = i.value;
-  }
-  updateDropdownPosition() {
+    e.has("value") && this.multiple && (this.selectedValues = Array.isArray(this.value) ? [...this.value] : this.value ? [this.value] : []), e.has("isOpen") && (this.isOpen ? this.openOverlay() : this.closeOverlay()), this.overlayEl && (e.has("searchQuery") || e.has("selectedValues")) && (h(this.renderDropdown(), this.overlayEl), e.has("selectedValues") && this.updateComplete.then(() => {
+      requestAnimationFrame(() => this.updateOverlayPosition());
+    }));
   }
   getOptionLabel(e) {
-    return this.options.find((o) => o.value === e)?.label || e;
-  }
-  isSelected(e) {
-    return this.selectedValues.includes(e);
+    return this.options.find((t) => t.value === e)?.label ?? e;
   }
   get filteredOptions() {
     const e = this.searchQuery.trim().toLowerCase();
-    return e ? this.options.filter((i) => i.label.toLowerCase().includes(e)) : this.options;
-  }
-  get displayPlaceholder() {
-    return this.placeholder || "";
+    return e ? this.options.filter((t) => t.label.toLowerCase().includes(e)) : this.options;
+  }
+  openOverlay() {
+    if (this.overlayEl || !this.trigger) return;
+    const e = this.trigger.getBoundingClientRect(), t = document.createElement("div");
+    t.style.position = "fixed", t.style.left = `${e.left}px`, t.style.top = `${e.bottom + 4}px`, t.style.width = `${e.width}px`, t.style.zIndex = "10000";
+    const r = document.createElement("style");
+    r.textContent = o.overlayStyles, t.appendChild(r), document.body.appendChild(t), this.overlayEl = t, h(this.renderDropdown(), t);
+  }
+  closeOverlay() {
+    this.overlayEl && (h(d, this.overlayEl), this.overlayEl.remove(), this.overlayEl = null);
+  }
+  handleOptionClick(e, t) {
+    if (t.stopPropagation(), this.selectedValues.includes(e))
+      this.selectedValues = this.selectedValues.filter((r) => r !== e);
+    else {
+      if (this.maxSelections && this.selectedValues.length >= this.maxSelections) return;
+      this.selectedValues = [...this.selectedValues, e];
+    }
+    this.value = [...this.selectedValues], this.dispatchEvent(new CustomEvent("change", {
+      bubbles: !0,
+      composed: !0,
+      detail: { value: this.value }
+    }));
+  }
+  handleChipRemove(e, t) {
+    t.stopPropagation(), this.selectedValues = this.selectedValues.filter((r) => r !== e), this.value = [...this.selectedValues];
+  }
+  /* -------------------- Rendering -------------------- */
+  renderDropdown() {
+    return i`
+      <div class="dropdown" role="listbox" aria-multiselectable="true">
+        ${this.searchable ? i`
+          <div class="search">
+            <md-icon class="pd-icon">search</md-icon>
+            <input
+              type="text"
+              .value=${this.searchQuery}
+              @input=${(e) => this.searchQuery = e.target.value}
+            />
+          </div>
+        ` : d}
+
+        <div class="options">
+          ${this.filteredOptions.map((e) => {
+      const t = this.selectedValues.includes(e.value), r = e.disabled ?? !1;
+      return i`
+              <div
+                class="option"
+                data-selected=${t}
+                data-disabled=${r}
+                @click=${(l) => !r && this.handleOptionClick(e.value, l)}
+              >
+                <md-checkbox ?checked=${t} ?disabled=${r}></md-checkbox>
+                <span>${e.label}</span>
+              </div>
+            `;
+    })}
+        </div>
+      </div>
+    `;
   }
-  // Render multi-select mode
   renderMultiSelect() {
-    const e = this.selectedValues.length > 0, i = e || this.isOpen;
-    return r`
+    const e = this.selectedValues.length > 0, t = e || this.isOpen;
+    return i`
       <div class="container">
         <div class="wrap">
-          ${this.label ? r`
-                <label class="label" data-float=${i ? "true" : "false"}>
-                  ${this.label}${this.required ? r`<span class="required">*</span>` : c}
-                </label>
-              ` : c}
+          ${this.label ? i`
+            <label class="label" data-float=${t}>
+              ${this.label}${this.required ? i`<span class="required">*</span>` : d}
+            </label>
+          ` : d}
 
           <div
             class="field"
-            data-open=${this.isOpen ? "true" : "false"}
-            @click=${this.handleTriggerClick}
-            @keydown=${this.handleKeyDown}
-            tabindex=${this.disabled ? "-1" : "0"}
+            data-open=${this.isOpen}
+            tabindex="0"
             role="combobox"
-            aria-expanded=${this.isOpen}
-            aria-haspopup="listbox"
-            aria-disabled=${this.disabled}
-            aria-label=${this.label || "Select"}
+            @click=${this.handleTriggerClick}
           >
-            ${this.leadingIcon ? r`<md-icon class="pd-icon pd-icon--leading">${this.leadingIcon}</md-icon>` : c}
+            ${this.leadingIcon ? i`<md-icon class="pd-icon pd-icon--leading">${this.leadingIcon}</md-icon>` : d}
 
             <div class="content">
-              ${e && this.showChips ? r`
+              ${e ? i`
                     <div class="chips">
-                      ${this.selectedValues.map(
-      (o) => r`
-                          <pd-chip
-                            variant=${this.chipVariant}
-                            label=${this.getOptionLabel(o)}
-                            ?remove-only=${this.chipVariant === "input"}
-                            ?removable=${this.chipVariant === "filter"}
-                            ?disabled=${this.disabled}
-                            @chip-remove=${(a) => this.handleChipRemove(o, a)}
-                            @chip-click=${(a) => this.handleChipRemove(o, a)}
-                          ></pd-chip>
-                        `
-    )}
+                      ${this.selectedValues.map((r) => i`
+                        <pd-chip
+                          label=${this.getOptionLabel(r)}
+                          @chip-remove=${(l) => this.handleChipRemove(r, l)}
+                        ></pd-chip>
+                      `)}
                     </div>
-                  ` : e && !this.showChips ? r`<span class="summary">${this.selectedValues.length} selected</span>` : r`<span class="placeholder">${this.displayPlaceholder}</span>`}
+                  ` : i`<span class="placeholder">${this.placeholder}</span>`}
             </div>
 
-            <md-icon
-              class="pd-icon pd-icon--trailing"
-              aria-hidden="true"
-              data-rotated=${this.isOpen ? "true" : "false"}
-            >
+            <md-icon class="pd-icon pd-icon--trailing" data-rotated=${this.isOpen}>
               keyboard_arrow_down
             </md-icon>
           </div>
-
-          ${this.isOpen ? r`
-                <div class="dropdown" role="listbox" aria-multiselectable="true">
-                  ${this.searchable ? r`
-                        <div class="search">
-                          <md-icon class="pd-icon" aria-hidden="true">search</md-icon>
-                          <input
-                            type="text"
-                            placeholder="Search..."
-                            .value=${this.searchQuery}
-                            @input=${this.handleSearchInput}
-                            @click=${(o) => o.stopPropagation()}
-                          />
-                        </div>
-                      ` : c}
-
-                  <div class="options">
-                    ${this.filteredOptions.length === 0 ? r`<div class="option" data-disabled="true">No options found</div>` : this.filteredOptions.map((o) => {
-      const a = this.isSelected(o.value), n = !a && this.maxSelections !== void 0 && this.selectedValues.length >= this.maxSelections, d = !!o.disabled || n;
-      return r`
-                            <div
-                              class="option"
-                              role="option"
-                              data-selected=${a ? "true" : "false"}
-                              data-disabled=${d ? "true" : "false"}
-                              aria-selected=${a}
-                              aria-disabled=${d}
-                              @click=${(p) => !d && this.handleOptionClick(o.value, p)}
-                            >
-                              <md-checkbox
-                                ?checked=${a}
-                                ?disabled=${d}
-                                touch-target="wrapper"
-                                @click=${(p) => p.stopPropagation()}
-                                @change=${(p) => !d && this.handleOptionClick(o.value, p)}
-                              ></md-checkbox>
-                              <span>${o.label}</span>
-                            </div>
-                          `;
-    })}
-                  </div>
-                </div>
-              ` : c}
         </div>
 
-        ${this.supportingText || this.error && this.errorText ? r`
-              <div class="supporting">
-                ${this.error && this.errorText ? this.errorText : this.supportingText}
-              </div>
-            ` : c}
+        ${this.supportingText ? i`<div class="supporting">${this.supportingText}</div>` : d}
       </div>
     `;
   }
-  // Render single-select mode (Material Web select)
   renderSingleSelect() {
-    const e = r`
-      ${this.leadingIcon ? r`<md-icon class="pd-icon pd-icon--leading" slot="leading-icon">${this.leadingIcon}</md-icon>` : c}
-
-      <md-icon class="pd-icon pd-icon--trailing" slot="trailing-icon">keyboard_arrow_down</md-icon>
-
-      ${this.options.map(
-      (i) => r`
-          <md-select-option .value=${i.value} ?disabled=${i.disabled}>
-            <div slot="headline">${i.label}</div>
-          </md-select-option>
-        `
-    )}
-    `;
-    return this.variant === "filled" ? r`
-        <md-filled-select
-          .label=${this.label}
-          .value=${this.value}
-          ?disabled=${this.disabled}
-          ?required=${this.required}
-          ?error=${this.error}
-          .errorText=${this.errorText}
-          .supportingText=${this.supportingText}
-          @change=${this.handleChange}
-          @opening=${this.handleOpen}
-          @closed=${this.handleClose}
-        >
-          ${e}
-        </md-filled-select>
-      ` : r`
-      <md-outlined-select
-        .label=${this.label}
-        .value=${this.value}
-        ?disabled=${this.disabled}
-        ?required=${this.required}
-        ?error=${this.error}
-        .errorText=${this.errorText}
-        .supportingText=${this.supportingText}
-        @change=${this.handleChange}
-        @opening=${this.handleOpen}
-        @closed=${this.handleClose}
-      >
-        ${e}
-      </md-outlined-select>
+    const e = i`
+      ${this.leadingIcon ? i`<md-icon slot="leading-icon" class="pd-icon">${this.leadingIcon}</md-icon>` : d}
+      <md-icon slot="trailing-icon" class="pd-icon">keyboard_arrow_down</md-icon>
+      ${this.options.map((t) => i`
+        <md-select-option .value=${t.value} ?disabled=${t.disabled}>
+          <div slot="headline">${t.label}</div>
+        </md-select-option>
+      `)}
     `;
+    return this.variant === "filled" ? i`<md-filled-select .label=${this.label}>${e}</md-filled-select>` : i`<md-outlined-select .label=${this.label}>${e}</md-outlined-select>`;
   }
   render() {
     return this.multiple ? this.renderMultiSelect() : this.renderSingleSelect();
   }
 };
-t.styles = m`
+o.overlayStyles = `
+    .dropdown {
+      background: var(--md-sys-color-surface-container, #f3edf7);
+      border-radius: var(--md-sys-shape-corner-medium, 12px);
+      box-shadow: 0 1px 2px rgba(0,0,0,0.3), 0 2px 6px 2px rgba(0,0,0,0.15);
+      overflow: hidden;
+      max-height: 320px;
+      display: flex;
+      flex-direction: column;
+      animation: dropdown-open 200ms cubic-bezier(0.2, 0, 0, 1) forwards;
+      transform-origin: top left;
+    }
+
+    @keyframes dropdown-open {
+      from { opacity: 0; transform: scaleY(0.8); }
+      to { opacity: 1; transform: scaleY(1); }
+    }
+
+    .search {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      padding: 12px 16px;
+      border-bottom: 1px solid var(--md-sys-color-outline-variant, #cac4d0);
+      background: var(--md-sys-color-surface-container, #f3edf7);
+    }
+
+    .search input {
+      flex: 1;
+      border: none;
+      background: transparent;
+      font-family: var(--md-sys-typescale-body-large-font, Roboto, sans-serif);
+      font-size: var(--md-sys-typescale-body-large-size, 1rem);
+      color: var(--md-sys-color-on-surface, #1d1b20);
+      outline: none;
+    }
+
+    .options {
+      overflow-y: auto;
+      flex: 1;
+    }
+
+    .option {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      padding: 12px 16px;
+      cursor: pointer;
+      transition: background-color 100ms ease;
+    }
+
+    .option:hover {
+      background-color: var(--md-sys-color-surface-container-highest, #e6e0e9);
+    }
+
+    .option[data-selected="true"] {
+      background-color: var(--md-sys-color-secondary-container, #e8def8);
+    }
+
+    .option[data-disabled="true"] {
+      opacity: 0.38;
+      cursor: default;
+      pointer-events: none;
+    }
+
+    .option span {
+      font-family: var(--md-sys-typescale-body-large-font, Roboto, sans-serif);
+      font-size: var(--md-sys-typescale-body-large-size, 1rem);
+      color: var(--md-sys-color-on-surface, #1d1b20);
+    }
+
+    .pd-icon {
+      font-size: 24px;
+      color: var(--md-sys-color-on-surface-variant, #49454f);
+    }
+  `;
+o.styles = y`
   :host {
     display: inline-block;
     width: 100%;
     font-family: var(--md-sys-typescale-body-large-font, inherit);
     /* one source of truth */
     --pd-select-padding-x: 16px;
-    --pd-select-padding-y: 12px;
+    --pd-select-padding-y: 16px;
     --pd-select-icon-size: 24px;
     --pd-select-gap: 8px;
     --md-filled-select-text-field-container-shape: var(--md-sys-shape-corner-small);
@@ -324,8 +297,8 @@ t.styles = m`
     color: var(--md-sys-color-on-surface-variant);
     pointer-events: none;
     transition: all var(--md-sys-motion-duration-short2, 150ms)
-      var(--md-sys-motion-easing-standard, ease);
-    background: var(--md-sys-color-surface, #fff);
+    var(--md-sys-motion-easing-standard, ease);
+    background: #fff;
     padding: 0 4px;
     z-index: 1;
   }
@@ -350,7 +323,7 @@ t.styles = m`
     padding: var(--pd-select-padding-y) var(--pd-select-padding-x);
     border-radius: var(--md-sys-shape-corner-small, 4px);
     cursor: pointer;
-    background: var(--md-sys-color-surface, #fff);
+    background: #fff;
     transition: all var(--md-sys-motion-duration-short2, 150ms)
       var(--md-sys-motion-easing-standard, ease);
   }
@@ -519,74 +492,74 @@ t.styles = m`
   }
 `;
 s([
-  h("md-filled-select, md-outlined-select")
-], t.prototype, "select", 2);
+  m("md-filled-select, md-outlined-select")
+], o.prototype, "select", 2);
 s([
-  h('[slot="trailing-icon"]')
-], t.prototype, "trailingIcon", 2);
+  m('[slot="trailing-icon"]')
+], o.prototype, "trailingIcon", 2);
 s([
-  h(".field")
-], t.prototype, "trigger", 2);
+  m(".field")
+], o.prototype, "trigger", 2);
 s([
-  l({ type: String, reflect: !0 })
-], t.prototype, "variant", 2);
+  a({ type: String, reflect: !0 })
+], o.prototype, "variant", 2);
 s([
-  l({ type: String })
-], t.prototype, "label", 2);
+  a({ type: String })
+], o.prototype, "label", 2);
 s([
-  l({ type: String, reflect: !0 })
-], t.prototype, "value", 2);
+  a({ type: String, reflect: !0 })
+], o.prototype, "value", 2);
 s([
-  l({ type: Boolean, reflect: !0 })
-], t.prototype, "disabled", 2);
+  a({ type: Boolean, reflect: !0 })
+], o.prototype, "disabled", 2);
 s([
-  l({ type: Boolean })
-], t.prototype, "required", 2);
+  a({ type: Boolean })
+], o.prototype, "required", 2);
 s([
-  l({ type: String, attribute: "error-text" })
-], t.prototype, "errorText", 2);
+  a({ type: String, attribute: "error-text" })
+], o.prototype, "errorText", 2);
 s([
-  l({ type: Boolean, reflect: !0 })
-], t.prototype, "error", 2);
+  a({ type: Boolean, reflect: !0 })
+], o.prototype, "error", 2);
 s([
-  l({ type: String, attribute: "supporting-text" })
-], t.prototype, "supportingText", 2);
+  a({ type: String, attribute: "supporting-text" })
+], o.prototype, "supportingText", 2);
 s([
-  l({ type: Array })
-], t.prototype, "options", 2);
+  a({ type: Array })
+], o.prototype, "options", 2);
 s([
-  l({ type: String, attribute: "leading-icon" })
-], t.prototype, "leadingIcon", 2);
+  a({ type: String, attribute: "leading-icon" })
+], o.prototype, "leadingIcon", 2);
 s([
-  l({ type: Boolean })
-], t.prototype, "multiple", 2);
+  a({ type: Boolean })
+], o.prototype, "multiple", 2);
 s([
-  l({ type: Number, attribute: "max-selections" })
-], t.prototype, "maxSelections", 2);
+  a({ type: Number, attribute: "max-selections" })
+], o.prototype, "maxSelections", 2);
 s([
-  l({ type: Boolean, attribute: "show-chips" })
-], t.prototype, "showChips", 2);
+  a({ type: Boolean, attribute: "show-chips" })
+], o.prototype, "showChips", 2);
 s([
-  l({ type: String, attribute: "chip-variant" })
-], t.prototype, "chipVariant", 2);
+  a({ type: String, attribute: "chip-variant" })
+], o.prototype, "chipVariant", 2);
 s([
-  l({ type: String })
-], t.prototype, "placeholder", 2);
+  a({ type: String })
+], o.prototype, "placeholder", 2);
 s([
-  l({ type: Boolean })
-], t.prototype, "searchable", 2);
+  a({ type: Boolean })
+], o.prototype, "searchable", 2);
 s([
   u()
-], t.prototype, "isOpen", 2);
+], o.prototype, "isOpen", 2);
 s([
   u()
-], t.prototype, "searchQuery", 2);
+], o.prototype, "searchQuery", 2);
 s([
   u()
-], t.prototype, "selectedValues", 2);
-t = s([
-  v("pd-select")
-], t);
+], o.prototype, "selectedValues", 2);
+o = s([
+  f("pd-select")
+], o);
 export {
-  t as PdSelect
+  o as PdSelect
 };