@orangelogic/design-system 2.19.0-pr77202.21

package/library/components/dropdown.js

@@ -0,0 +1,368 @@
+import { i as w, n as s, C as b, x, c as v } from "../chunks/custom-element.fmLrnDZr.js";
+import { c as k } from "../chunks/component.styles.DtouHn2g.js";
+import { s as y, a as c, g as u, b as f } from "../chunks/animation-registry.DavRkTTr.js";
+import { w as g } from "../chunks/event.mFzZi4sr.js";
+import { L as E } from "../chunks/i18n.C6c6_pqI.js";
+import { H as C } from "../chunks/slot.DJLm4Dig.js";
+import { g as m } from "../chunks/tabbable.CcMz3mIL.js";
+import { w as D } from "../chunks/watch.BCJD77bD.js";
+import { e as h } from "../chunks/query.BBf1UFkC.js";
+import { e as T } from "../chunks/class-map.DqNfBvJI.js";
+import { o as O } from "../chunks/if-defined.CKupVaWs.js";
+import _ from "./input.js";
+import d from "./menu.js";
+import L from "./popup.js";
+import S from "./textarea.js";
+const A = w`
+  :host {
+    display: inline-block;
+    --panel-padding: 0px;
+    --panel-overflow: auto;
+  }
+
+  .dropdown::part(popup) {
+    z-index: var(--cx-z-index-dropdown);
+  }
+
+  .dropdown[data-current-placement^='top']::part(popup) {
+    transform-origin: bottom;
+  }
+
+  .dropdown[data-current-placement^='bottom']::part(popup) {
+    transform-origin: top;
+  }
+
+  .dropdown[data-current-placement^='left']::part(popup) {
+    transform-origin: right;
+  }
+
+  .dropdown[data-current-placement^='right']::part(popup) {
+    transform-origin: left;
+  }
+
+  .dropdown__trigger {
+    display: block;
+  }
+
+  .dropdown__panel {
+    display: block;
+    padding: var(--panel-padding);
+    background-color: var(--cx-panel-background-color);
+    border: var(--cx-panel-border-width) solid var(--cx-panel-border-color);
+    font-family: var(--cx-font-sans);
+    font-size: var(--cx-font-size-medium);
+    font-weight: var(--cx-font-weight-regular);
+    box-shadow: var(--cx-shadow-large);
+    border-radius: var(--cx-border-radius-large);
+    pointer-events: none;
+    max-height: min(
+      var(--auto-size-available-height),
+      var(--max-height, var(--auto-size-available-height))
+    );
+    overflow: var(--panel-overflow, auto);
+  }
+
+  .dropdown--open .dropdown__panel {
+    pointer-events: all;
+  }
+
+  /* When users slot a menu, make sure it conforms to the popup's auto-size */
+  ::slotted(cx-menu) {
+    max-width: min(100%, var(--auto-size-available-width)) !important;
+    border: none;
+  }
+
+  /**
+   * Fix for tooltip of a dropdown trigger.
+   * See https://github.com/shoelace-style/shoelace/discussions/1961
+   */
+  .dropdown__trigger::slotted(cx-tooltip) {
+    display: inline-block;
+  }
+`;
+var K = Object.defineProperty, P = Object.getOwnPropertyDescriptor, n = (e, t, o, a) => {
+  for (var r = a > 1 ? void 0 : a ? P(t, o) : t, p = e.length - 1, l; p >= 0; p--)
+    (l = e[p]) && (r = (a ? l(t, o, r) : l(r)) || r);
+  return a && r && K(t, o, r), r;
+};
+let i = class extends b {
+  constructor() {
+    super(), this.localize = new E(this), this.hasSlotController = new C(this, "[default]"), this.open = !1, this.placement = "bottom-start", this.disabled = !1, this.stayOpenOnSelect = !1, this.distance = 0, this.skidding = 0, this.hoist = !1, this.sync = void 0, this.autoWidthFactor = 1, this.ignoredKeys = [], this.noFlip = !1, this.flipPadding = 10, this.handleKeyDown = this.handleKeyDown.bind(this), this.handleDocumentKeyDown = this.handleDocumentKeyDown.bind(this), this.handleDocumentMouseDown = this.handleDocumentMouseDown.bind(this), this.handlePanelSelect = this.handlePanelSelect.bind(this);
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.containingElement ??= this;
+  }
+  runFirstUpdated() {
+    this.panel.hidden = !this.open || !this.hasSlotController.test("[default]"), this.open && (this.addOpenListeners(), this.popup.active = !0);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this.removeOpenListeners(), this.hide();
+  }
+  focusOnTrigger() {
+    const e = this.trigger.assignedElements({ flatten: !0 })[0];
+    typeof e?.focus == "function" && e.focus();
+  }
+  getMenu() {
+    return this.panel.assignedElements({ flatten: !0 }).find((e) => e.tagName.toLowerCase() === "cx-menu");
+  }
+  handleKeyDown(e) {
+    this.open && e.key === "Escape" && (e.stopPropagation(), this.hide(), this.focusOnTrigger());
+  }
+  handleDocumentKeyDown(e) {
+    e.key === "Escape" && this.open && (e.stopPropagation(), this.focusOnTrigger(), this.hide());
+  }
+  handleDocumentMouseDown(e) {
+    const t = e.composedPath();
+    this.containingElement && !t.includes(this.containingElement) && this.hide();
+  }
+  handlePanelSelect(e) {
+    const t = e.target;
+    !this.stayOpenOnSelect && t.tagName.toLowerCase() === "cx-menu" && (this.hide(), this.focusOnTrigger());
+  }
+  async handleTriggerClick() {
+    this.open ? (this.hide(), this.panel.assignedElements().forEach(async (e) => {
+      e instanceof d && e.variant === "multiple" && e.resetActiveMenu();
+    })) : (this.show(), this.focusOnTrigger());
+  }
+  async handleTriggerKeyDown(e) {
+    if (this.ignoredKeys.includes(e.key) || [" ", "Enter"].includes(e.key) && e.key === " " && (e.target instanceof _ || e.target instanceof S || e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement))
+      return;
+    const t = this.getMenu();
+    if (t) {
+      const o = t.getAllItems(), a = o[0], r = o.at(-1);
+      ["ArrowDown", "ArrowUp", "Home", "End", "Enter", " "].includes(
+        e.key
+      ) && (e.preventDefault(), this.open || (this.show(), await this.updateComplete), o.length > 0 && (typeof t.checkVisibility == "function" && !t?.checkVisibility() && await new Promise((p) => {
+        this.popup.addEventListener("cx-opened", p);
+      }), this.updateComplete.then(() => {
+        (e.key === "ArrowDown" || e.key === "Home" || e.key === "Enter" || e.key === " ") && (t.setCurrentItem(a), a.focus()), r && (e.key === "ArrowUp" || e.key === "End") && (t.setCurrentItem(r), r.focus());
+      })));
+    }
+  }
+  handleTriggerKeyUp(e) {
+    e.key === " " && e.preventDefault();
+  }
+  handleTriggerSlotChange() {
+    this.updateAccessibleTrigger();
+  }
+  //
+  // Slotted triggers can be arbitrary content, but we need to link them to the dropdown panel with `aria-haspopup` and
+  // `aria-expanded`. These must be applied to the "accessible trigger" (the tabbable portion of the trigger element
+  // that gets slotted in) so screen readers will understand them. The accessible trigger could be the slotted element,
+  // a child of the slotted element, or an element in the slotted element's shadow root.
+  //
+  // For example, the accessible trigger of an <cx-button> is a <button> located inside its shadow root.
+  //
+  // To determine this, we assume the first tabbable element in the trigger slot is the "accessible trigger."
+  //
+  updateAccessibleTrigger() {
+    const t = this.trigger.assignedElements({
+      flatten: !0
+    }).find(
+      (a) => m(a).start
+    );
+    let o;
+    if (t) {
+      switch (t.tagName.toLowerCase()) {
+        // Shoelace buttons have to update the internal button so it's announced correctly by screen readers
+        case "cx-button":
+        case "cx-icon-button":
+          o = t.button;
+          break;
+        default:
+          o = t;
+      }
+      o.setAttribute("aria-haspopup", "true"), o.setAttribute("aria-expanded", this.open ? "true" : "false");
+    }
+  }
+  blurTrigger() {
+    const t = this.trigger.assignedElements({
+      flatten: !0
+    }).find(
+      (a) => m(a).start
+    );
+    let o;
+    if (t) {
+      switch (t.tagName.toLowerCase()) {
+        // Shoelace buttons have to update the internal button so it's announced correctly by screen readers
+        case "cx-button":
+        case "cx-icon-button":
+          o = t.button;
+          break;
+        default:
+          o = t;
+      }
+      o.blur();
+    }
+  }
+  /** Shows the dropdown panel. */
+  async show() {
+    if (!this.open)
+      return this.open = !0, await this.updateComplete, g(this, "cx-after-show");
+  }
+  /** Hides the dropdown panel */
+  async hide() {
+    if (this.open)
+      return this.open = !1, g(this, "cx-after-hide");
+  }
+  /**
+   * Instructs the dropdown menu to reposition. Useful when the position or size of the trigger changes when the menu
+   * is activated.
+   */
+  reposition() {
+    this.popup.reposition();
+  }
+  addOpenListeners() {
+    this.panel.addEventListener("cx-select", this.handlePanelSelect), "CloseWatcher" in globalThis ? (this.closeWatcher?.destroy(), this.closeWatcher = new CloseWatcher(), this.closeWatcher.onclose = () => {
+      this.hide(), this.focusOnTrigger();
+    }) : this.panel.addEventListener("keydown", this.handleKeyDown), document.addEventListener("keydown", this.handleDocumentKeyDown), document.addEventListener("mousedown", this.handleDocumentMouseDown);
+  }
+  removeOpenListeners() {
+    this.panel && (this.panel.removeEventListener("cx-select", this.handlePanelSelect), this.panel.removeEventListener("keydown", this.handleKeyDown)), document.removeEventListener("keydown", this.handleDocumentKeyDown), document.removeEventListener("mousedown", this.handleDocumentMouseDown), this.closeWatcher?.destroy();
+  }
+  async handleOpenChange() {
+    if (this.disabled) {
+      this.open = !1;
+      return;
+    }
+    if (this.updateAccessibleTrigger(), this.open && this.hasSlotController.test("[default]")) {
+      this.emit("cx-show"), this.addOpenListeners(), await c(this), this.panel.hidden = !1, this.popup.active = !0;
+      const { keyframes: e, options: t } = u(this, "dropdown.show", {
+        dir: this.localize.dir()
+      });
+      await f(this.popup.popup, e, t), this.emit("cx-after-show"), this.panel.assignedElements().forEach(async (o) => {
+        o instanceof d && o.variant === "multiple" && (await o.updateComplete, o.adjustMenuSize(0));
+      });
+    } else {
+      this.emit("cx-hide"), this.removeOpenListeners(), await c(this);
+      const { keyframes: e, options: t } = u(this, "dropdown.hide", {
+        dir: this.localize.dir()
+      });
+      await f(this.popup.popup, e, t), this.panel.hidden = !0, this.popup.active = !1, this.emit("cx-after-hide"), this.panel.assignedElements().forEach(async (o) => {
+        o instanceof d && o.variant === "multiple" && o.resetActiveMenu();
+      });
+    }
+  }
+  render() {
+    return x`
+      <cx-popup
+        part="base"
+        exportparts="popup:base__popup"
+        id="dropdown"
+        placement=${this.placement}
+        distance=${this.distance}
+        skidding=${this.skidding}
+        strategy=${this.hoist ? "overlay" : "absolute"}
+        ?flip=${!this.noFlip}
+        shift
+        auto-size="both"
+        auto-size-padding="10"
+        flip-padding=${this.flipPadding}
+        sync=${O(this.sync ? this.sync : void 0)}
+        class=${T({
+      dropdown: !0,
+      "dropdown--open": this.open
+    })}
+        auto-width-factor=${this.autoWidthFactor}
+      >
+        <slot
+          name="trigger"
+          slot="anchor"
+          part="trigger"
+          class="dropdown__trigger"
+          @click=${this.handleTriggerClick}
+          @keydown=${this.handleTriggerKeyDown}
+          @keyup=${this.handleTriggerKeyUp}
+          @slotchange=${this.handleTriggerSlotChange}
+        ></slot>
+
+        <div
+          aria-hidden=${this.open && this.hasSlotController.test("[default]") ? "false" : "true"}
+          aria-labelledby="dropdown"
+        >
+          <slot part="panel" class="dropdown__panel"></slot>
+        </div>
+      </cx-popup>
+    `;
+  }
+};
+i.styles = [k, A];
+i.dependencies = { "cx-popup": L };
+n([
+  h(".dropdown")
+], i.prototype, "popup", 2);
+n([
+  h(".dropdown__trigger")
+], i.prototype, "trigger", 2);
+n([
+  h(".dropdown__panel")
+], i.prototype, "panel", 2);
+n([
+  s({ reflect: !0, type: Boolean })
+], i.prototype, "open", 2);
+n([
+  s({ reflect: !0 })
+], i.prototype, "placement", 2);
+n([
+  s({ reflect: !0, type: Boolean })
+], i.prototype, "disabled", 2);
+n([
+  s({ attribute: "stay-open-on-select", reflect: !0, type: Boolean })
+], i.prototype, "stayOpenOnSelect", 2);
+n([
+  s({ attribute: "containing-element" })
+], i.prototype, "containingElement", 2);
+n([
+  s({ type: Number })
+], i.prototype, "distance", 2);
+n([
+  s({ type: Number })
+], i.prototype, "skidding", 2);
+n([
+  s({ type: Boolean })
+], i.prototype, "hoist", 2);
+n([
+  s({ reflect: !0 })
+], i.prototype, "sync", 2);
+n([
+  s({ attribute: "auto-width-factor" })
+], i.prototype, "autoWidthFactor", 2);
+n([
+  s({
+    attribute: "ignored-keys",
+    converter: {
+      fromAttribute: (e) => e?.split(" ") ?? [],
+      toAttribute: (e) => e.join(" ")
+    },
+    type: String
+  })
+], i.prototype, "ignoredKeys", 2);
+n([
+  s({ attribute: "no-flip", reflect: !0, type: Boolean })
+], i.prototype, "noFlip", 2);
+n([
+  s({ attribute: "flip-padding", type: Number })
+], i.prototype, "flipPadding", 2);
+n([
+  D("open", { waitUntilFirstUpdate: !0 })
+], i.prototype, "handleOpenChange", 1);
+i = n([
+  v("cx-dropdown")
+], i);
+y("dropdown.show", {
+  keyframes: [
+    { opacity: 0, scale: 0.9 },
+    { opacity: 1, scale: 1 }
+  ],
+  options: { duration: 100, easing: "ease" }
+});
+y("dropdown.hide", {
+  keyframes: [
+    { opacity: 1, scale: 1 },
+    { opacity: 0, scale: 0.9 }
+  ],
+  options: { duration: 100, easing: "ease" }
+});
+export {
+  i as default
+};

package/library/components/dynamic-select.d.ts

@@ -0,0 +1,3 @@
+export * from '../packages/molecules/src/dynamic-select/dynamic-select'
+import _default from '../packages/molecules/src/dynamic-select/dynamic-select'
+export default _default

package/library/components/dynamic-select.js

@@ -0,0 +1,333 @@
+import { C as m } from "../chunks/button.G_W-dK6b.js";
+import y from "./icon-button.js";
+import { C as l, a as b } from "../chunks/option.pgg_ZoHY.js";
+import { C as g } from "../chunks/select.DMdl1Kdd.js";
+import { n as o, C as $, x as h, c as x } from "../chunks/custom-element.fmLrnDZr.js";
+import { d as v } from "../chunks/debounce.DZNkg8Q5.js";
+import { L as O } from "../chunks/i18n.C6c6_pqI.js";
+import { w as f } from "../chunks/watch.BCJD77bD.js";
+import { r as p } from "../chunks/state.Dt9F_SuS.js";
+import { e as w } from "../chunks/query.BBf1UFkC.js";
+import { c as C } from "../chunks/repeat.B1pVpmRx.js";
+import { n as d } from "../chunks/when.Dr1es41R.js";
+import { b as B, a as S } from "../chunks/_baseUniq.BUihBa8c.js";
+function E(i, r) {
+  return i && i.length ? B(i, S(r)) : [];
+}
+var T = Object.defineProperty, D = Object.getOwnPropertyDescriptor, e = (i, r, s, n) => {
+  for (var a = n > 1 ? void 0 : n ? D(r, s) : r, u = i.length - 1, c; u >= 0; u--)
+    (c = i[u]) && (a = (n ? c(r, s, a) : c(a)) || a);
+  return n && a && T(r, s, a), a;
+};
+let t = class extends $ {
+  constructor() {
+    super(...arguments), this.localize = new O(this), this.name = "", this.value = "", this.size = "medium", this.placeholder = "", this.allowFreetext = !1, this.multiple = !1, this.maxOptionsVisible = 3, this.disabled = !1, this.clearable = !1, this.open = !1, this.hoist = !1, this.freeWidth = !1, this.autosizePadding = 10, this.filled = !1, this.pill = !1, this.label = "", this.placement = "bottom", this.helpText = "", this.form = "", this.required = !1, this.useTag = !1, this.inputBehavior = "filter", this.getOptionValue = (i) => !i || !(i instanceof l) ? "" : typeof i.value == "string" ? i.value : "", this.setOptionCurrent = (i, r) => {
+      if (i instanceof l) {
+        if (r === void 0) {
+          i.current = !i.current;
+          return;
+        }
+        i.current = r;
+      }
+    }, this.setOptionSelected = (i, r) => {
+      if (!(!(i instanceof l) || i.getAttribute("role") !== "option")) {
+        if (r === void 0) {
+          i.selected = !i.selected;
+          return;
+        }
+        i.selected = r, r && this.selectEl.setCurrentOption(i);
+      }
+    }, this.stayOpenOnSelect = !1, this.forceOnChange = !1, this.allowDefaultMouseDown = !1, this.useSearchTerm = !1, this.noSelectOnEnter = !1, this.noResetCurrent = !1, this.iconName = "", this.noDropdown = !1, this.noDropdownOnEmpty = !1, this.noFlip = !1, this.customChangeEvent = "", this.options = [], this.start = 0, this.searchTerm = "", this.hasMore = !1, this.loading = !1;
+  }
+  createRenderRoot() {
+    return this;
+  }
+  async fetchOptions(i = !1) {
+    if (this.api)
+      try {
+        this.loading = !0;
+        const r = await this.api({
+          searchTerm: this.searchTerm,
+          start: this.start
+        });
+        if (i ? this.options = r.data : this.options = E([...this.options, ...r.data], "value"), this.hasMore = r.hasMore, await this.updateComplete, this.selectEl) {
+          let s;
+          this.multiple ? s = this.value?.trim() ? this.value.trim().split(/\s+/) : [] : s = this.value, this.selectEl.value = s;
+        }
+      } catch {
+        this.options = [];
+      } finally {
+        this.loading = !1;
+      }
+  }
+  async handleStartChange() {
+    await this.updateComplete, this.api ? await this.fetchOptions() : this.options = [];
+  }
+  async handleSearchTermChange() {
+    this.api ? (this.start = 0, await this.updateComplete, await this.fetchOptions(!0)) : this.options = [];
+  }
+  handleInputChange(i) {
+    const { value: r } = i.target.displayInput;
+    this.searchTerm = r, this.selectEl.getOptionLabel = (s) => !s || !(s instanceof l) ? r : s.getTextLabel() || r;
+  }
+  handleLoadMore() {
+    this.start += 10;
+  }
+  handleCustomChange(i) {
+    if (!i.target)
+      return;
+    const r = i.target, s = this.options.find(
+      (n) => n.value === r.value
+    );
+    s && this.emit(this.customChangeEvent, {
+      detail: s
+    });
+  }
+  render() {
+    const i = this.noDropdown || this.noDropdownOnEmpty && !this.options.length;
+    return h`
+      <cx-select
+        ?allow-freetext=${this.allowFreetext}
+        auto-size-padding=${this.autosizePadding}
+        ?clearable=${this.clearable}
+        data-label=${this.dataset.label}
+        ?disabled=${this.disabled}
+        ?filled=${this.filled}
+        ?force-on-change=${this.forceOnChange}
+        form=${this.form}
+        .syncElement=${this.syncElement}
+        ?free-width=${this.freeWidth}
+        .getOptionValue=${this.getOptionValue}
+        .setOptionCurrent=${this.setOptionCurrent}
+        .setOptionSelected=${this.setOptionSelected}
+        help-text=${this.helpText}
+        ?hoist=${this.hoist}
+        input-behavior=${this.inputBehavior}
+        label=${this.label}
+        max-options-visible=${this.maxOptionsVisible}
+        name=${this.name}
+        ?multiple=${this.multiple}
+        ?open=${this.open}
+        ?pill=${this.pill}
+        placeholder=${this.placeholder}
+        ?required=${this.required}
+        size=${this.size}
+        ?stay-open-on-select=${this.stayOpenOnSelect}
+        ?no-flip=${this.noFlip}
+        ?use-tag=${this.useTag}
+        value=${this.value}
+        @input=${this.useSearchTerm ? this.handleInputChange : void 0}
+        ?no-reset-current=${this.noResetCurrent}
+        ?no-select-on-enter=${this.noSelectOnEnter}
+        ?no-dropdown=${i}
+        ?loading=${this.loading}
+        ?allow-default-mouse-down=${this.allowDefaultMouseDown}
+        @cx-change=${this.customChangeEvent ? this.handleCustomChange : void 0}
+      >
+        ${d(this.iconName, () => h`<cx-icon-button
+            class="icon-button"
+            tabindex="-1"
+            label=${this.localize.term("search")}
+            name=${this.iconName}
+            slot="prefix"
+          ></cx-icon-button>`)}
+        ${C(
+      this.options,
+      (r) => r.value ?? "",
+      (r) => h`
+              <cx-option
+                value=${r.value ?? ""}
+                ?disabled=${r.disabled}
+                show-check
+                check-placement=${b.Right}
+              >
+                ${r.label ?? r.value ?? ""}
+              </cx-option>
+            `
+    )}
+        ${d(
+      this.hasMore,
+      () => h`<cx-option value="load-more" class="tree-item__actions">
+              <cx-button
+                variant="text"
+                ?loading=${this.loading}
+                @click=${this.handleLoadMore}
+              >
+                ${this.localize.term("more")}
+              </cx-button>
+            </cx-option>`
+    )}
+      </cx-select>
+    `;
+  }
+};
+t.dependencies = {
+  "cx-button": m,
+  "cx-icon-button": y,
+  "cx-option": l,
+  "cx-select": g
+};
+e([
+  w("cx-select")
+], t.prototype, "selectEl", 2);
+e([
+  o()
+], t.prototype, "name", 2);
+e([
+  o({ reflect: !0, type: String })
+], t.prototype, "value", 2);
+e([
+  o({ reflect: !0 })
+], t.prototype, "size", 2);
+e([
+  o()
+], t.prototype, "placeholder", 2);
+e([
+  o({ attribute: "allow-freetext", reflect: !0, type: Boolean })
+], t.prototype, "allowFreetext", 2);
+e([
+  o({ reflect: !0, type: Boolean })
+], t.prototype, "multiple", 2);
+e([
+  o({ attribute: "max-options-visible", type: Number })
+], t.prototype, "maxOptionsVisible", 2);
+e([
+  o({ reflect: !0, type: Boolean })
+], t.prototype, "disabled", 2);
+e([
+  o({ type: Boolean })
+], t.prototype, "clearable", 2);
+e([
+  o({ reflect: !0, type: Boolean })
+], t.prototype, "open", 2);
+e([
+  o({ type: Boolean })
+], t.prototype, "hoist", 2);
+e([
+  o({ attribute: "sync-element" })
+], t.prototype, "syncElement", 2);
+e([
+  o({ attribute: "free-width", reflect: !0, type: Boolean })
+], t.prototype, "freeWidth", 2);
+e([
+  o({ attribute: "auto-size-padding", type: Number })
+], t.prototype, "autosizePadding", 2);
+e([
+  o({ reflect: !0, type: Boolean })
+], t.prototype, "filled", 2);
+e([
+  o({ reflect: !0, type: Boolean })
+], t.prototype, "pill", 2);
+e([
+  o()
+], t.prototype, "label", 2);
+e([
+  o({ reflect: !0 })
+], t.prototype, "placement", 2);
+e([
+  o({ attribute: "help-text" })
+], t.prototype, "helpText", 2);
+e([
+  o({ reflect: !0 })
+], t.prototype, "form", 2);
+e([
+  o({ reflect: !0, type: Boolean })
+], t.prototype, "required", 2);
+e([
+  o({ attribute: "use-tag", reflect: !0, type: Boolean })
+], t.prototype, "useTag", 2);
+e([
+  o({ attribute: "input-behavior" })
+], t.prototype, "inputBehavior", 2);
+e([
+  o({ attribute: "get-option-value" })
+], t.prototype, "getOptionValue", 2);
+e([
+  o({ attribute: "set-option-current" })
+], t.prototype, "setOptionCurrent", 2);
+e([
+  o({ attribute: "set-option-selected" })
+], t.prototype, "setOptionSelected", 2);
+e([
+  o({ attribute: "stay-open-on-select", type: Boolean })
+], t.prototype, "stayOpenOnSelect", 2);
+e([
+  o({ attribute: "force-on-change", type: Boolean })
+], t.prototype, "forceOnChange", 2);
+e([
+  o({ attribute: "allow-default-mouse-down", type: Boolean })
+], t.prototype, "allowDefaultMouseDown", 2);
+e([
+  o({ attribute: "api", type: Function })
+], t.prototype, "api", 2);
+e([
+  o({ attribute: "use-search-term", reflect: !0, type: Boolean })
+], t.prototype, "useSearchTerm", 2);
+e([
+  o({
+    attribute: "no-select-on-enter",
+    reflect: !0,
+    type: Boolean
+  })
+], t.prototype, "noSelectOnEnter", 2);
+e([
+  o({
+    attribute: "no-reset-current",
+    reflect: !0,
+    type: Boolean
+  })
+], t.prototype, "noResetCurrent", 2);
+e([
+  o({ attribute: "icon-name", reflect: !0, type: String })
+], t.prototype, "iconName", 2);
+e([
+  o({
+    attribute: "no-dropdown",
+    reflect: !0,
+    type: Boolean
+  })
+], t.prototype, "noDropdown", 2);
+e([
+  o({
+    attribute: "no-dropdown-on-empty",
+    reflect: !0,
+    type: Boolean
+  })
+], t.prototype, "noDropdownOnEmpty", 2);
+e([
+  o({ attribute: "no-flip", reflect: !0, type: Boolean })
+], t.prototype, "noFlip", 2);
+e([
+  o({ attribute: "custom-change-event", type: String })
+], t.prototype, "customChangeEvent", 2);
+e([
+  p()
+], t.prototype, "options", 2);
+e([
+  p()
+], t.prototype, "start", 2);
+e([
+  p()
+], t.prototype, "searchTerm", 2);
+e([
+  p()
+], t.prototype, "hasMore", 2);
+e([
+  p()
+], t.prototype, "loading", 2);
+e([
+  v(200)
+], t.prototype, "fetchOptions", 1);
+e([
+  f("api"),
+  f("start", { waitUntilFirstUpdate: !0 })
+], t.prototype, "handleStartChange", 1);
+e([
+  f("searchTerm", { waitUntilFirstUpdate: !0 })
+], t.prototype, "handleSearchTermChange", 1);
+t = e([
+  x("cx-dynamic-select")
+], t);
+export {
+  t as default
+};