@orangelogic/design-system 2.60.0 → 2.61.0

package/library/components/select.js

@@ -1,27 +1,1444 @@
-import "./line-clamp.js";
-import "../chunks/typography.BFpl0WMA.js";
-import "../chunks/custom-element.vnXBMQxc.js";
-import "../chunks/component.styles.CI-v8BZa.js";
-import "../chunks/form-control.styles.NE2Q-quE.js";
-import "../chunks/animation-registry.DavRkTTr.js";
-import "../chunks/default-value.CIKAvD5l.js";
-import "../chunks/event.mFzZi4sr.js";
-import "../chunks/form.B8u0ywni.js";
-import "../chunks/i18n.BP2FRO1v.js";
-import "../chunks/scroll.DwPiX2Ox.js";
-import "../chunks/slot.DJLm4Dig.js";
-import { C as y } from "../chunks/select.DfO4de04.js";
-import "../chunks/watch.BCJD77bD.js";
-import "../chunks/state.Cw55xXlb.js";
-import "../chunks/query.BBf1UFkC.js";
-import "../chunks/class-map.CoZTSvbM.js";
-import "../chunks/unsafe-html.DyO9_Rsq.js";
-import "../chunks/when.Dr1es41R.js";
-import "./icon.js";
-import "../chunks/option.D9KJhzHs.js";
-import "../chunks/popup._w5T7x8f.js";
-import "./spinner.js";
-import "./tag.js";
+import O from "./line-clamp.js";
+import { C } from "../chunks/typography.oDzoLbZS.js";
+import { n as o, C as S } from "../chunks/lib-cortex-element.CVMmyPMC.js";
+import { c as k } from "../chunks/component.styles.DMSLciL5.js";
+import { f as z } from "../chunks/form-control.styles.CUGhvlfT.js";
+import { s as x, a as y } from "../chunks/animate.El-MpOws.js";
+import { c as D } from "../chunks/custom-element.L4WJXn1j.js";
+import { d as I } from "../chunks/default-value.COZopaet.js";
+import { w as v } from "../chunks/event.mFzZi4sr.js";
+import { F as L } from "../chunks/form.CO12-VK0.js";
+import { L as $ } from "../chunks/i18n.DrzK7TPf.js";
+import { s as T } from "../chunks/scroll.xtO5yojm.js";
+import { H as E } from "../chunks/slot.j5oheLJC.js";
+import { i as B } from "../chunks/user-agent.D9aPuOyL.js";
+import { w as h } from "../chunks/watch.q1sEjPWL.js";
+import { i as F, x as p, E as A } from "../chunks/lit-element.jLBm65_O.js";
+import { r as f } from "../chunks/state.CSDxrqLd.js";
+import { e as u } from "../chunks/query.BBf1UFkC.js";
+import { e as b } from "../chunks/class-map.BiVq-cVR.js";
+import { o as V } from "../chunks/unsafe-html.Dff7-rCx.js";
+import { n as m } from "../chunks/when.Dr1es41R.js";
+import { s as w, g as _ } from "../chunks/animation-registry.HmpwNuGH.js";
+import P from "./icon.js";
+import { C as d } from "../chunks/option.D1u5-cTt.js";
+import M from "./popup.js";
+import U from "./spinner.js";
+import N from "./tag.js";
+const R = (e) => !(document.createElement(e.tagName).constructor === HTMLElement || customElements.get(e.tagName.toLowerCase())), W = F`
+  :host {
+    display: block;
+  }
+
+  :host([data-user-invalid])::part(combobox) {
+    border-color: var(--cx-input-invalid-border-color);
+  }
+
+  :host([data-user-invalid]:focus-within)::part(combobox) {
+    border-color: var(--cx-input-invalid-border-color);
+    box-shadow: var(--cx-input-invalid-shadow);
+  }
+
+  /** The popup */
+  .select {
+    flex: 1 1 auto;
+    display: inline-flex;
+    width: 100%;
+    position: relative;
+    vertical-align: middle;
+  }
+
+  .select::part(popup) {
+    z-index: var(--cx-z-index-dropdown);
+  }
+
+  .select[data-current-placement^='top']::part(popup) {
+    transform-origin: bottom;
+  }
+
+  .select[data-current-placement^='bottom']::part(popup) {
+    transform-origin: top;
+  }
+
+  /* Combobox */
+  .select__combobox {
+    flex: 1;
+    display: flex;
+    position: relative;
+    align-items: center;
+    justify-content: start;
+    font-family: var(--cx-input-font-family);
+    font-weight: var(--cx-input-font-weight);
+    letter-spacing: var(--cx-input-letter-spacing);
+    vertical-align: middle;
+    overflow: hidden;
+    cursor: pointer;
+    transition:
+      var(--cx-transition-fast) color,
+      var(--cx-transition-fast) border,
+      var(--cx-transition-fast) box-shadow,
+      var(--cx-transition-fast) background-color;
+    /*
+      match default width of HTMLInputElement, so that in multiselect mode,
+      when display input gets hidden, the select doesn't shrink
+    */
+    width: 20ch;
+    min-width: 0;
+  }
+
+  .select__display-input {
+    position: relative;
+    width: 100%;
+    font: inherit;
+    border: none;
+    background: none;
+    color: var(--cx-input-color);
+    cursor: inherit;
+    overflow: hidden;
+    margin: 0;
+    padding: 0;
+    -webkit-appearance: none;
+    text-overflow: ellipsis;
+    transition: padding-top 0.2s ease-in-out;
+  }
+
+  .select__tags + .select__display-input {
+    padding-top: var(--cx-spacing-2x-small);
+  }
+
+  .select__display-input--small {
+    line-height: var(--cx-line-height-small);
+  }
+  .select__display-input--medium {
+    line-height: var(--cx-line-height-medium);
+  }
+  .select__display-input--large {
+    line-height: var(--cx-line-height-large);
+  }
+
+  .select__display-input--hidden {
+    /**
+     * Use visibility instead of overflow hidden since browser force input to be overflow clip
+     * Use height 0 instead of display none for smoother transition
+     */
+    height: 0;
+    padding-top: 0 !important;
+    visibility: hidden;
+  }
+
+  .form-control--has-label .select__display-input {
+    padding-top: var(--cx-spacing-x-small);
+    padding-bottom: var(--cx-spacing-2x-small);
+  }
+
+  .select__display-input::placeholder {
+    color: var(--cx-input-placeholder-color);
+  }
+
+  .select:not(.select--disabled):hover .select__display-input {
+    color: var(--cx-input-color-hover);
+  }
+
+  .select:not(.select--disabled):hover .select__combobox {
+    border-color: var(--cx-input-border-color-hover);
+  }
+
+  .select__display-input:focus {
+    outline: none;
+  }
+
+  .select__value-input {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: -1;
+  }
+
+  .select__tags {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    max-width: 100%;
+  }
+
+  .form-control--has-label .select__tags {
+    margin-top: var(--cx-spacing-x-small);
+  }
+
+  /** In multiple mode, select__tags is displayed instead of display__input
+   * Make sure select__tags have the same height as a display__input of the same size
+   */
+  .select--small:not(.select--placeholder-visible) .select__tags {
+    min-height: var(--cx-line-height-medium);
+  }
+
+  .select--medium:not(.select--placeholder-visible) .select__tags {
+    min-height: var(--cx-line-height-medium);
+  }
+
+  .select--large:not(.select--placeholder-visible) .select__tags {
+    min-height: var(--cx-line-height-medium);
+  }
+
+  .select__tags::slotted(cx-tag) {
+    cursor: pointer !important;
+  }
+
+  .select--disabled .select__tags,
+  .select--disabled .select__tags::slotted(cx-tag) {
+    cursor: default !important;
+  }
+
+  .select__tag-wrapper {
+    line-height: 1;
+  }
+
+  /* Standard selects */
+  .select--standard .select__combobox {
+    background-color: var(--cx-input-background-color);
+    border: solid var(--cx-input-border-width) var(--cx-input-border-color);
+  }
+
+  .select--standard.select--disabled .select__combobox {
+    background-color: var(--cx-input-background-color-disabled);
+    border-color: var(--cx-input-border-color-disabled);
+    color: var(--cx-input-color-disabled);
+    opacity: 0.5;
+    cursor: default;
+    outline: none;
+  }
+
+  .select--standard:not(.select--disabled).select--open .select__combobox,
+  .select--standard:not(.select--disabled).select--focused .select__combobox {
+    background-color: var(--cx-input-background-color-focus);
+    border-color: var(--cx-input-border-color-focus);
+  }
+
+  /* Filled selects */
+  .select--filled .select__combobox {
+    border: none;
+    background-color: var(--cx-input-filled-background-color);
+    color: var(--cx-input-color);
+  }
+
+  .select--filled:hover:not(.select--disabled) .select__combobox {
+    background-color: var(--cx-input-filled-background-color-hover);
+  }
+
+  .select--filled.select--disabled .select__combobox {
+    background-color: var(--cx-input-filled-background-color-disabled);
+    opacity: 0.5;
+    cursor: default;
+  }
+
+  .select--filled:not(.select--disabled).select--open .select__combobox,
+  .select--filled:not(.select--disabled).select--focused .select__combobox {
+    background-color: var(--cx-input-filled-background-color-focus);
+    outline: var(--cx-focus-ring);
+  }
+
+  /* Sizes */
+  .select--small .select__combobox {
+    border-radius: var(--cx-input-border-radius-small);
+    font-size: var(--cx-input-font-size-small);
+    min-height: var(--cx-input-height-small);
+    padding-block: 0;
+    padding-inline: var(--cx-input-spacing-small);
+  }
+
+  .form-control:not(.form-control--has-label)
+    .select--small.select--multiple
+    .select__combobox {
+    padding-block: 2px;
+  }
+
+  .form-control:not(.form-control--has-label)
+    .select--multiple
+    .select__display-input {
+    margin-top: 0;
+  }
+
+  .form-control:not(.form-control--has-label) .input-container {
+    justify-content: center;
+  }
+
+  .form-control:not(.form-control--has-label)
+    .input-container
+    .select__display-input {
+    margin-top: 0;
+  }
+
+  .select--small .select__clear {
+    margin-inline-start: var(--cx-input-spacing-small);
+  }
+
+  .select--small .select__prefix::slotted(*) {
+    margin-inline-end: var(--cx-input-spacing-small);
+  }
+
+  .select--small .select__tags {
+    gap: 2px;
+  }
+
+  .select--medium .select__combobox {
+    border-radius: var(--cx-input-border-radius-medium);
+    font-size: var(--cx-input-font-size-small);
+    min-height: var(--cx-input-height-medium);
+    padding-block: 0;
+    padding-inline: var(--cx-input-spacing-medium);
+  }
+
+  .form-control:not(.form-control--has-label)
+    .select--medium.select--multiple
+    .select__combobox {
+    padding-block: 3px;
+  }
+
+  .select--medium .select__clear {
+    margin-inline-start: var(--cx-input-spacing-medium);
+  }
+
+  .select--medium .select__prefix::slotted(*) {
+    margin-inline-end: var(--cx-input-spacing-medium);
+  }
+
+  .select--medium .select__tags {
+    gap: 3px;
+  }
+
+  .select--large .select__combobox {
+    border-radius: var(--cx-input-border-radius-large);
+    font-size: var(--cx-input-font-size-small);
+    min-height: var(--cx-input-height-large);
+    padding-block: 0;
+    padding-inline: var(--cx-input-spacing-large);
+  }
+
+  .form-control:not(.form-control--has-label)
+    .select--large.select--multiple
+    .select__combobox {
+    padding-block: 4px;
+  }
+
+  .select--large .select__clear {
+    margin-inline-start: var(--cx-input-spacing-large);
+  }
+
+  .select--large .select__prefix::slotted(*) {
+    margin-inline-end: var(--cx-input-spacing-large);
+  }
+
+  .select--large .select__tags {
+    gap: 4px;
+  }
+
+  /* Pills */
+  .select--pill.select--small .select__combobox {
+    border-radius: var(--cx-input-height-small);
+  }
+
+  .select--pill.select--medium .select__combobox {
+    border-radius: var(--cx-input-height-medium);
+  }
+
+  .select--pill.select--large .select__combobox {
+    border-radius: var(--cx-input-height-large);
+  }
+
+  /* Prefix */
+  .select__prefix {
+    flex: 0;
+    display: inline-flex;
+    align-items: center;
+    color: var(--cx-input-placeholder-color);
+  }
+
+  /* Suffix */
+  .select__suffix {
+    flex: 0;
+    display: inline-flex;
+    align-items: center;
+    color: var(--cx-input-placeholder-color);
+  }
+
+  /* Clear button */
+  .select__clear {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    font-size: inherit;
+    color: var(--cx-input-icon-color);
+    border: none;
+    background: none;
+    padding: 0;
+    transition: var(--cx-transition-fast) color;
+    cursor: pointer;
+    z-index: 1;
+  }
+
+  .select__clear:hover {
+    color: var(--cx-input-icon-color-hover);
+  }
+
+  .select__clear:focus {
+    outline: none;
+  }
+
+  /* Expand icon */
+  .select__expand-icon {
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+    transition: var(--cx-transition-medium) rotate ease;
+    rotate: 0;
+    margin-inline-start: var(--cx-spacing-small);
+    font-size: var(--cx-font-size-large);
+  }
+
+  .select--open .select__expand-icon {
+    rotate: -180deg;
+  }
+
+  /* Listbox */
+  .select__listbox {
+    display: block;
+    position: relative;
+    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);
+    background: var(--cx-panel-background-color);
+    border: solid var(--cx-panel-border-width) var(--cx-panel-border-color);
+    border-radius: var(--cx-border-radius-large);
+    padding-block: var(--cx-spacing-x-small);
+    padding-inline: 0;
+    overflow: auto;
+    overscroll-behavior: none;
+
+    /* Make sure it adheres to the popup's auto size */
+    max-width: var(--auto-size-available-width);
+    max-height: var(--auto-size-available-height);
+  }
+
+  .select__listbox ::slotted(cx-divider) {
+    --spacing: var(--cx-spacing-x-small);
+  }
+
+  .select__listbox ::slotted(small) {
+    display: block;
+    font-size: var(--cx-font-size-small);
+    color: var(--cx-color-neutral-500);
+    padding-block: var(--cx-spacing-2x-small);
+    padding-inline: var(--cx-spacing-small);
+  }
+
+  .select__no-options {
+    display: block;
+    font-size: var(--cx-font-size-small);
+    color: var(--cx-color-neutral-500);
+    padding-block: var(--cx-spacing-2x-small);
+    padding-inline: var(--cx-spacing-small);
+    text-align: left;
+    cursor: default;
+    user-select: none;
+  }
+
+  /*
+   * Adapt label to be inside select
+   */
+
+  .input-container {
+    position: relative;
+    display: inline-flex;
+    flex-direction: column;
+    flex: 1;
+    width: 0;
+  }
+
+  .input-container__display-value {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    column-gap: var(--cx-spacing-small);
+    row-gap: var(--cx-spacing-3x-small);
+    height: 100%;
+    width: 100%;
+  }
+
+  /* Center label vertically + same style as input value */
+  .form-control__label {
+    position: relative;
+    -webkit-transition: transform 0.2s ease-in-out;
+    -moz-transition: transform 0.2s ease-in-out;
+    transition: transform 0.2s ease-in-out;
+    pointer-events: none;
+    width: fit-content;
+    line-height: 1; /* use line-height: 1 for easier transform calculation */
+  }
+
+  /* when empty with no placeholder (initial state), transform label to vertical center
+    = (input height - label height) / 2
+  */
+  .select--small .form-control__label {
+    transform: translateY(
+      calc(
+        (
+            var(--cx-input-height-small) +
+              1.25rem - var(--cx-input-font-size-small)
+          ) /
+          2
+      )
+    );
+    margin: 0;
+  }
+
+  .select--medium .form-control__label {
+    transform: translateY(
+      calc(
+        (
+          var(--cx-input-height-medium) / 2 +
+            1rem - var(--cx-input-font-size-medium)
+        )
+      )
+    );
+    margin: 0;
+  }
+
+  .select--large .form-control__label {
+    transform: translateY(
+      calc(
+        (
+            var(--cx-input-height-large) +
+              1rem - var(--cx-input-font-size-large)
+          ) /
+          2
+      )
+    );
+    margin: 0;
+  }
+
+  /* Increase input height if there's a label */
+  .form-control--has-label .select--small {
+    min-height: calc(var(--cx-input-height-small) + 1rem);
+  }
+  .form-control--has-label .select--medium {
+    min-height: calc(var(--cx-input-height-medium) + 1rem);
+  }
+  .form-control--has-label .select--large {
+    min-height: calc(var(--cx-input-height-large) + 1rem);
+  }
+
+  /* When focused or not empty, transform label to top
+    Instead of 0, use var(--cx-spacing-2x-small) to have a distance from top
+  */
+  .form-control--has-label .select--focused .form-control__label,
+  .form-control--has-label .select--placeholder-visible .form-control__label,
+  .form-control--has-label .select:not(.select--empty) .form-control__label {
+    transform: translateY(
+      calc(var(--cx-spacing-2x-small) + var(--cx-spacing-3x-small))
+    ); /* distance from top */
+  }
+
+  /* Display options in vertical direction */
+  .select__listbox slot {
+    display: flex;
+    flex-direction: column;
+  }
+
+  /*
+   * Input groups support a variety of input types (e.g. inputs with tooltips, inputs as dropdown triggers, etc.).
+   * This means inputs aren't always direct descendants of the input group, thus we can't target them with the
+   * ::slotted selector. To work around this, the input group component does some magic to add these special classes to
+   * inputs and we style them here instead.
+   */
+
+  :host(
+      [data-cx-input-group__input--first]:not(
+        [data-cx-input-group__input--last]
+      )
+    )
+    .select__combobox {
+    border-start-end-radius: 0;
+    border-end-end-radius: 0;
+  }
+
+  :host([data-cx-input-group__input--inner]) .select__combobox {
+    border-radius: 0;
+  }
+
+  :host(
+      [data-cx-input-group__input--last]:not(
+        [data-cx-input-group__input--first]
+      )
+    )
+    .select__combobox {
+    border-start-start-radius: 0;
+    border-end-start-radius: 0;
+  }
+
+  /* All except the first */
+  :host([data-cx-input-group__input]:not([data-cx-input-group__input--first])) {
+    margin-inline-start: calc(-1 * var(--cx-input-border-width));
+  }
+
+  /* Bump hovered, focused, and checked inputs up so their focus ring isn't clipped */
+  :host([data-cx-input-group__input--hover]) {
+    z-index: 1;
+  }
+
+  /* Focus and checked are always on top */
+  :host([data-cx-input-group__input--focus]),
+  :host([data-cx-input-group__input][checked]) {
+    z-index: 2;
+  }
+`;
+var H = Object.defineProperty, q = Object.getOwnPropertyDescriptor, s = (e, t, l, n) => {
+  for (var a = n > 1 ? void 0 : n ? q(t, l) : t, r = e.length - 1, c; r >= 0; r--)
+    (c = e[r]) && (a = (n ? c(t, l, a) : c(a)) || a);
+  return n && a && H(t, l, a), a;
+};
+let i = class extends S {
+  constructor() {
+    super(...arguments), this.formControlController = new L(this, {
+      assumeInteractionOn: ["cx-input"]
+    }), this.hasSlotController = new E(
+      this,
+      "help-text",
+      "label"
+    ), this.localize = new $(this), this.typeToSelectString = "", this.hasFocus = !1, this.displayLabel = "", this.selectedOptions = [], this.name = "", this.value = "", this.defaultValue = "", 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.noFlip = !1, this.freeWidth = !1, this.autosizePadding = 10, this.filled = !1, this.pill = !1, this.label = "", this.placement = "bottom", this.helpText = "", this.form = void 0, this.required = !1, this.useTag = !1, this.noSelectOnEnter = !1, this.noResetCurrent = !1, this.noDropdown = !1, this.loading = !1, this.getTag = (e) => {
+      const t = this.hasSlotController.test("label"), n = (this.label ? !0 : !!t) ? this.size === "large" ? "medium" : "small" : this.size, a = (r) => {
+        this.handleTagRemove(r, e);
+      };
+      return p`
+      <cx-tag
+        part="tag"
+        exportparts="
+              base:tag__base,
+              content:tag__content,
+              remove-button:tag__remove-button,
+              remove-button__base:tag__remove-button__base
+            "
+        ?pill=${this.pill}
+        size=${n}
+        ?removable=${this.multiple}
+        @cx-remove=${a}
+      >
+        <cx-line-clamp lines="1">
+          ${this.getOptionLabel(e)}
+        </cx-line-clamp>
+      </cx-tag>
+    `;
+    }, this.inputBehavior = "filter", this.getOptionValue = (e) => !e || !(e instanceof d) ? "" : e.value, this.getOptionLabel = (e) => !e || !(e instanceof d) ? "" : e.getTextLabel(), this.getOptionSelected = (e) => {
+      if (!(!e || !(e instanceof d)))
+        return e.selected;
+    }, this.getOptionDisabled = (e) => {
+      if (!(!e || !(e instanceof d)))
+        return e.disabled;
+    }, this.stayOpenOnSelect = !1, this.forceOnChange = !1, this.allowDefaultMouseDown = !1, this.noOptionText = "", this.handleDocumentFocusIn = (e) => {
+      const t = e.composedPath();
+      this && !t.includes(this) && !this.stayOpenOnSelect && this.hide();
+    }, this.handleDocumentKeyDown = (e) => {
+      const t = e.target, l = t.closest(".select__clear") !== null, n = t.closest("cx-icon-button") !== null;
+      if (!(l || n)) {
+        if (e.key === "Escape" && this.open && !this.closeWatcher) {
+          (this.shouldShowNoOptionsMessage || this.getVisibleOptions().length > 0) && e.stopPropagation(), e.preventDefault(), this.hide(), this.displayInput.focus({ preventScroll: !0 });
+          return;
+        }
+        if (e.key === "Enter") {
+          if (e.preventDefault(), e.stopImmediatePropagation(), this.emit("cx-enter", {
+            detail: {
+              value: this.displayInput.value
+            }
+          }), !this.open) {
+            this.show();
+            return;
+          }
+          if (this.currentOption && !this.getOptionDisabled(this.currentOption)) {
+            if (!this.noSelectOnEnter) {
+              if (this.multiple)
+                switch (this.toggleOptionSelection(this.currentOption), this.displayLabel = "", this.displayInput.value = "", this.typeToSelectString = "", this.inputBehavior) {
+                  case "filter": {
+                    this.filterOptionsByInput();
+                    break;
+                  }
+                  case "select":
+                    this.selectOptionByInput();
+                }
+              else
+                this.setSelectedOptions(this.currentOption);
+              this.updateComplete.then(() => {
+                this.emit("cx-input"), this.emit("cx-change");
+              });
+            }
+            !this.multiple && !this.stayOpenOnSelect && (this.hide(), this.displayInput.focus({ preventScroll: !0 }));
+          }
+          return;
+        }
+        if (["ArrowUp", "ArrowDown", "Home", "End"].includes(e.key)) {
+          const a = this.getAllOptions().filter((g) => this.inputBehavior === "filter" ? !g.hidden : !0), r = this.currentOption ? a.indexOf(this.currentOption) : -1;
+          let c = Math.max(0, r);
+          if (e.preventDefault(), !this.open && (this.show(), this.currentOption))
+            return;
+          e.key === "ArrowDown" ? (c = r + 1, c > a.length - 1 && (c = 0)) : e.key === "ArrowUp" ? (c = r - 1, c < 0 && (c = a.length - 1)) : e.key === "Home" ? c = 0 : e.key === "End" && (c = a.length - 1), this.setCurrentOption(a[c]);
+        }
+      }
+    }, this.handleDocumentMouseDown = (e) => {
+      const t = e.composedPath();
+      this && !t.includes(this) && !this.stayOpenOnSelect && this.hide();
+    };
+  }
+  /**
+   * Gets whether to show the no options message
+   */
+  get shouldShowNoOptionsMessage() {
+    return !!this.noOptionText && this.getVisibleOptions().length === 0;
+  }
+  /**
+   * Gets the validity state object
+   */
+  get validity() {
+    return this.valueInput.validity;
+  }
+  /**
+   * Gets the validation message
+   */
+  get validationMessage() {
+    return this.valueInput.validationMessage;
+  }
+  // #region Overridable methods
+  /**
+   *
+   * @param option The option to update the selected state
+   * @param selected If undefined, the option will be toggled. If true, the option will be selected. If false, the option will be unselected.
+   * @returns
+   */
+  setOptionSelected(e, t) {
+    if (!(!(e instanceof d) || e.getAttribute("role") !== "option")) {
+      if (t === void 0) {
+        e.selected = !e.selected;
+        return;
+      }
+      e.selected = t, t && this.setCurrentOption(e);
+    }
+  }
+  /**
+   *
+   * current = whether the option is currently focused on e.g via keyboard
+   * @param option The option to update the current state
+   * @param current If undefined, the option will be toggled. If true, the option will be set as current. If false, the option will be unset.
+   * @returns
+   */
+  setOptionCurrent(e, t) {
+    if (e instanceof d) {
+      if (t === void 0) {
+        e.current = !e.current;
+        return;
+      }
+      e.current = t;
+    }
+  }
+  /**
+   * For each option, this function is called to determine if the option should be displayed based on the input string
+   * @param option
+   * @param value The current input string
+   * @returns Whether this option should be displayed
+   */
+  filterCallback(e, t) {
+    return this.getOptionLabel(e).toLowerCase().includes(t);
+  }
+  // #endregion
+  connectedCallback() {
+    super.connectedCallback(), this.stayOpenOnSelect || (this.open = !1);
+  }
+  runFirstUpdated() {
+    B() && (this.contentEditable = "true");
+  }
+  addOpenListeners() {
+    document.addEventListener(
+      "focusin",
+      this.handleDocumentFocusIn
+    ), document.addEventListener(
+      "keydown",
+      this.handleDocumentKeyDown
+    ), document.addEventListener(
+      "mousedown",
+      this.handleDocumentMouseDown
+    ), this.getRootNode() !== document && this.getRootNode().addEventListener(
+      "focusin",
+      this.handleDocumentFocusIn
+    ), "CloseWatcher" in window && (this.closeWatcher?.destroy(), this.closeWatcher = new CloseWatcher(), this.closeWatcher.onclose = () => {
+      this.open && (this.hide(), this.displayInput.focus({ preventScroll: !0 }));
+    });
+  }
+  removeOpenListeners() {
+    document.removeEventListener(
+      "focusin",
+      this.handleDocumentFocusIn
+    ), document.removeEventListener(
+      "keydown",
+      this.handleDocumentKeyDown
+    ), document.removeEventListener(
+      "mousedown",
+      this.handleDocumentMouseDown
+    ), this.getRootNode() !== document && this.getRootNode().removeEventListener(
+      "focusin",
+      this.handleDocumentFocusIn
+    ), this.closeWatcher?.destroy();
+  }
+  handleFocus() {
+    this.hasFocus = !0, this.displayInput.setSelectionRange(0, this.displayInput.value.length), this.emit("cx-focus"), setTimeout(() => this.displayInput.focus(), 0);
+  }
+  handleBlur(e) {
+    const t = e.relatedTarget;
+    t && this.contains(t) || (this.hasFocus = !1, this.allowFreetext || (this.displayInput.value = this.displayLabel, this.typeToSelectString = ""), this.emit("cx-blur"));
+  }
+  handleInput(e) {
+    if (!this.open && (this.show(), e.data === " "))
+      return;
+    const t = e.target, l = [
+      "ArrowUp",
+      "ArrowDown",
+      "Enter",
+      "Escape",
+      "Tab",
+      "Home",
+      "End"
+    ];
+    if (!(e.data && l.includes(e.data)))
+      switch (this.typeToSelectString = t.value.toLowerCase(), this.displayLabel = t.value, this.emit("cx-input"), this.inputBehavior) {
+        case "filter": {
+          this.filterOptionsByInput();
+          break;
+        }
+        case "select":
+          this.selectOptionByInput();
+      }
+  }
+  handleComboboxMouseDown(e) {
+    const t = e.composedPath();
+    let l = !1, n = !1;
+    t.forEach((a) => {
+      if (a instanceof HTMLElement && a.classList.contains("select__expand-icon")) {
+        n = !0;
+        return;
+      }
+      a instanceof HTMLElement && a.tagName.toLowerCase() === "cx-icon-button" && (l = !0);
+    }), !(this.disabled || l) && (n || this.inputBehavior !== "filter" || !this.open) && (this.allowDefaultMouseDown ? requestAnimationFrame(() => {
+      this.displayInput.focus({ preventScroll: !0 });
+    }) : (e.preventDefault(), this.displayInput.focus({ preventScroll: !0 })), this.open = !this.open);
+  }
+  handleComboboxKeyDown(e) {
+    e.key !== "Tab" && ((e.key !== "Escape" || this.open && (this.shouldShowNoOptionsMessage || this.getVisibleOptions().length > 0)) && e.stopPropagation(), this.handleDocumentKeyDown(e));
+  }
+  handleClearClick(e) {
+    e.stopPropagation(), (this.value !== "" || this.displayLabel !== "") && (this.setSelectedOptions([]), this.displayInput.focus({ preventScroll: !0 }), this.typeToSelectString = "", this.displayLabel = "", this.displayInput.value = "", this.inputBehavior === "filter" && this.filterOptionsByInput(), this.updateComplete.then(() => {
+      this.emit("cx-clear"), this.emit("cx-input"), this.emit("cx-change");
+    }));
+  }
+  handleClearMouseDown(e) {
+    e.stopPropagation(), e.preventDefault();
+  }
+  handleOptionClick(e) {
+    const l = e.target.closest('[role="option"], cx-option'), n = this.value, a = e.composedPath().some(
+      (c) => c?.classList?.contains("tree-item__expand-button")
+    ), r = e.composedPath().some(
+      (c) => c?.classList?.contains("tree-item__actions")
+    );
+    l && !this.getOptionDisabled(l) && !a && !r && (this.multiple ? this.toggleOptionSelection(l) : this.setSelectedOptions(l), this.updateComplete.then(
+      () => this.displayInput.focus({ preventScroll: !0 })
+    ), (this.value !== n || this.forceOnChange) && this.updateComplete.then(() => {
+      this.emit("cx-input"), this.emit("cx-change");
+    }), !this.multiple && !this.stayOpenOnSelect && (this.hide(), this.displayInput.focus({ preventScroll: !0 })));
+  }
+  handleDefaultSlotChange() {
+    const e = this.getAllOptions(), t = Array.isArray(this.value) ? this.value : [this.value], l = [];
+    for (const n of e) {
+      const a = this.getOptionValue(n);
+      if (!a && !(n instanceof d))
+        return;
+      l.push(a);
+      const r = n.tagName.toLowerCase();
+      if (!R(n) && !customElements.get(r)) {
+        customElements.whenDefined(r).then(() => this.handleDefaultSlotChange());
+        return;
+      }
+    }
+    e.forEach((n) => l.push(this.getOptionValue(n))), this.setSelectedOptions(
+      e.filter((n) => t.includes(this.getOptionValue(n)))
+    );
+  }
+  handleTagRemove(e, t) {
+    e.stopPropagation(), this.disabled || (this.toggleOptionSelection(t, !1), this.updateComplete.then(() => {
+      this.emit("cx-input"), this.emit("cx-change");
+    }));
+  }
+  /**
+   * Gets an array of all <cx-option> elements
+   */
+  getAllOptions() {
+    return [
+      ...this.querySelectorAll('[role="option"], cx-option')
+    ];
+  }
+  /**
+   * Gets the first <cx-option> element
+   */
+  getFirstOption() {
+    return this.querySelector("cx-option");
+  }
+  /**
+   * Gets an array of all visible <cx-option> elements
+   */
+  getVisibleOptions() {
+    return this.getAllOptions().filter((e) => !e.hidden);
+  }
+  /**
+   * Sets the current option, which is the option the user is currently interacting with (e.g. via keyboard). Only one
+   * option may be "current" at a time.
+   */
+  setCurrentOption(e) {
+    this.getAllOptions().forEach((l) => {
+      this.setOptionCurrent(l, !1), l.tabIndex = -1;
+    }), e && (this.currentOption = e, this.setOptionCurrent(e, !0), e.tabIndex = 0, e.scrollIntoView({ block: "nearest" }));
+  }
+  /**
+   * Sets the selected option(s)
+   */
+  setSelectedOptions(e) {
+    const t = this.getAllOptions(), l = Array.isArray(e) ? e : [e];
+    t.forEach((n) => this.setOptionSelected(n, !1)), l.length && l.forEach((n) => this.setOptionSelected(n, !0)), this.selectionChanged();
+  }
+  /**
+   * Toggles an option's selected state
+   */
+  toggleOptionSelection(e, t) {
+    this.setOptionSelected(e, t), this.selectionChanged();
+  }
+  /**
+   * This method must be called whenever the selection changes. It will update the selected options cache, the current
+   * value, and the display value
+   */
+  selectionChanged() {
+    this.selectedOptions = this.getAllOptions().filter(
+      (e) => this.getOptionSelected(e)
+    ), this.multiple ? (this.value = this.selectedOptions.map((e) => this.getOptionValue(e)), this.displayLabel = "") : (this.value = this.getOptionValue(this.selectedOptions[0]) ?? "", this.displayLabel = this.getOptionLabel(this.selectedOptions[0]) ?? ""), this.updateComplete.then(() => {
+      this.formControlController.updateValidity();
+    });
+  }
+  get tags() {
+    const e = this.hasSlotController.test("label"), l = (this.label ? !0 : !!e) ? this.size === "large" ? "medium" : "small" : this.size;
+    return this.selectedOptions.map((n, a) => {
+      if (a < this.maxOptionsVisible || this.maxOptionsVisible <= 0) {
+        const r = this.getTag(n, a);
+        return p`${typeof r == "string" ? V(r) : r}`;
+      } else if (a === this.maxOptionsVisible)
+        return p`<cx-tag ?pill=${this.pill} size=${l}>
+          +${this.selectedOptions.length - a}
+        </cx-tag>`;
+      return A;
+    });
+  }
+  handleInvalid(e) {
+    this.formControlController.setValidity(!1), this.formControlController.emitInvalidEvent(e);
+  }
+  handleDisabledChange() {
+    this.disabled && (this.open = !1, this.handleOpenChange());
+  }
+  handleValueChange() {
+    const e = this.getAllOptions(), t = Array.isArray(this.value) ? this.value : [this.value];
+    this.setSelectedOptions(
+      e.filter((l) => t.includes(this.getOptionValue(l)))
+    );
+  }
+  async handleNoDropdownChange() {
+    await this.updateComplete, this.noDropdown ? this.open = !1 : this.handleOpenChange();
+  }
+  async handleOpenChange() {
+    if (this.open && !this.disabled) {
+      if (this.noDropdown)
+        return;
+      this.inputBehavior === "filter" && this.filterOptionsByInput(), this.noResetCurrent || this.setCurrentOption(this.selectedOptions[0] || this.getFirstOption()), this.emit("cx-show"), this.addOpenListeners(), await x(this), this.listbox.hidden = !1, this.popup.active = !0, requestAnimationFrame(() => {
+        this.currentOption && this.setCurrentOption(this.currentOption);
+      });
+      const { keyframes: e, options: t } = _(this, "select.show", {
+        dir: this.localize.dir()
+      });
+      await y(this.popup.popup, e, t), this.currentOption && T(this.currentOption, this.listbox, "vertical", "auto"), this.emit("cx-after-show");
+    } else {
+      this.emit("cx-hide"), this.removeOpenListeners(), await x(this);
+      const { keyframes: e, options: t } = _(this, "select.hide", {
+        dir: this.localize.dir()
+      });
+      await y(this.popup.popup, e, t), this.listbox.hidden = !0, this.popup.active = !1, this.emit("cx-after-hide");
+    }
+  }
+  selectOptionByInput() {
+    const e = this.getAllOptions();
+    for (const t of e)
+      if (this.getOptionLabel(t).toLowerCase().startsWith(this.typeToSelectString)) {
+        this.setCurrentOption(t);
+        break;
+      }
+  }
+  filterOptionsByInput() {
+    const e = this.getAllOptions();
+    for (const t of e)
+      this.filterCallback(t, this.typeToSelectString) ? (t.hidden = !1, t.style.display = "") : (t.hidden = !0, t.style.display = "none");
+    this.popup.style.removeProperty("--auto-size-available-width"), this.popup.style.removeProperty("--auto-size-available-height");
+  }
+  /** Shows the listbox. */
+  async show() {
+    if (this.open || this.disabled) {
+      this.open = !1;
+      return;
+    }
+    return this.open = !0, v(this, "cx-after-show");
+  }
+  /** Hides the listbox. */
+  async hide() {
+    if (!this.open || this.disabled) {
+      this.open = !1;
+      return;
+    }
+    return this.open = !1, v(this, "cx-after-hide");
+  }
+  /** Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid. */
+  checkValidity() {
+    return this.valueInput.checkValidity();
+  }
+  /** Gets the associated form, if one exists. */
+  getForm() {
+    return this.formControlController.getForm();
+  }
+  /** Checks for validity and shows the browser's validation message if the control is invalid. */
+  reportValidity() {
+    return this.valueInput.reportValidity();
+  }
+  /** Sets a custom validation message. Pass an empty string to restore validity. */
+  setCustomValidity(e) {
+    this.valueInput.setCustomValidity(e), this.formControlController.updateValidity();
+  }
+  /** Sets focus on the control. */
+  focus(e) {
+    this.displayInput.focus(e);
+  }
+  /** Removes focus from the control. */
+  blur() {
+    this.displayInput.blur();
+  }
+  render() {
+    const e = this.hasSlotController.test("label"), t = this.hasSlotController.test("help-text"), l = this.label ? !0 : !!e, n = this.helpText ? !0 : !!t, a = this.clearable && !this.disabled && (this.displayLabel.length > 0 || this.selectedOptions.length > 0), r = this.placeholder && this.value.length === 0 && this.displayLabel.length === 0, c = this.value.length === 0 && this.displayLabel.length === 0 || (this.multiple || this.useTag) && this.tags.length === 0, g = (this.multiple || this.useTag) && this.selectedOptions.length > 0;
+    return p`
+      <div
+        part="form-control"
+        class=${b({
+      "form-control": !0,
+      "form-control--has-help-text": n,
+      "form-control--has-label": l,
+      "form-control--large": this.size === "large",
+      "form-control--medium": this.size === "medium",
+      "form-control--small": this.size === "small"
+    })}
+      >
+        <div part="form-control-input" class="form-control-input">
+          <cx-popup
+            .active=${this.open && this.stayOpenOnSelect}
+            .syncElement=${this.syncElement}
+            class=${b({
+      select: !0,
+      "select--bottom": this.placement === "bottom",
+      "select--disabled": this.disabled,
+      "select--empty": c,
+      "select--filled": this.filled,
+      "select--focused": this.hasFocus || this.open,
+      "select--large": this.size === "large",
+      "select--medium": this.size === "medium",
+      "select--multiple": this.multiple || this.useTag,
+      "select--open": this.open,
+      "select--pill": this.pill,
+      "select--placeholder-visible": r,
+      "select--small": this.size === "small",
+      "select--standard": !0,
+      "select--top": this.placement === "top"
+    })}
+            placement=${this.placement}
+            strategy=${this.hoist ? "overlay" : "absolute"}
+            ?flip=${!this.noFlip}
+            shift
+            sync=${this.freeWidth ? void 0 : "width"}
+            auto-size="both"
+            auto-size-padding=${this.autosizePadding}
+            flip-padding="10"
+          >
+            <div
+              part="combobox"
+              class="select__combobox"
+              slot="anchor"
+              @keydown=${this.handleComboboxKeyDown}
+              @mousedown=${this.handleComboboxMouseDown}
+            >
+              <slot part="prefix" name="prefix" class="select__prefix"></slot>
+
+              <span class="input-container" @click=${this.handleFocus}>
+                <label
+                  id="label"
+                  part="form-control-label"
+                  class="form-control__label"
+                  aria-hidden=${l ? "false" : "true"}
+                >
+                  <slot name="label">${this.label}</slot>
+                </label>
+                ${m(
+      g,
+      () => p`
+                    <div
+                      part="tags"
+                      class="select__tags"
+                      @cx-remove=${this.handleTagRemove}
+                    >
+                      ${this.tags}
+                    </div>
+                  `
+    )}
+                <input
+                  part="display-input"
+                  class=${b({
+      "select__display-input": !0,
+      "select__display-input--hidden": (this.multiple || this.useTag) && !this.hasFocus && !c,
+      "select__display-input--large": this.size === "large",
+      "select__display-input--medium": this.size === "medium",
+      "select__display-input--small": this.size === "small"
+    })}
+                  type="text"
+                  placeholder=${this.placeholder}
+                  .disabled=${this.disabled}
+                  ?readonly=${this.inputBehavior === "none" && !this.allowFreetext}
+                  .value=${this.displayLabel}
+                  autocomplete="off"
+                  spellcheck="false"
+                  autocapitalize="off"
+                  aria-controls="listbox"
+                  aria-expanded=${this.open ? "true" : "false"}
+                  aria-haspopup="listbox"
+                  aria-label=${l ? void 0 : this.dataset.label}
+                  aria-labelledby="label"
+                  aria-disabled=${this.disabled ? "true" : "false"}
+                  aria-describedby="help-text"
+                  role="combobox"
+                  tabindex="0"
+                  @input=${this.handleInput}
+                  @blur=${this.handleBlur}
+                />
+              </span>
+
+              <input
+                class="select__value-input"
+                type="text"
+                ?disabled=${this.disabled}
+                ?required=${this.required}
+                .value=${Array.isArray(this.value) ? this.value.join(", ") : this.value}
+                tabindex="-1"
+                aria-hidden="true"
+                @focus=${this.focus}
+                @invalid=${this.handleInvalid}
+              />
+
+              ${m(
+      this.loading,
+      () => p`
+                  <cx-spinner
+                    part="spinner"
+                    role="status"
+                    aria-live="polite"
+                  ></cx-spinner>
+                `
+    )}
+              ${m(
+      a,
+      () => p`
+                  <button
+                    part="clear-button"
+                    class="select__clear"
+                    type="button"
+                    aria-label=${this.localize.term("clearEntry")}
+                    @mousedown=${this.handleClearMouseDown}
+                    @click=${this.handleClearClick}
+                    tabindex="-1"
+                  >
+                    <slot name="clear-icon">
+                      <cx-icon name="cancel"></cx-icon>
+                    </slot>
+                  </button>
+                `
+    )}
+
+              <slot name="suffix" part="suffix" class="select__suffix"></slot>
+
+              <slot
+                name="expand-icon"
+                part="expand-icon"
+                class="select__expand-icon"
+              >
+                <cx-icon name="arrow_drop_down"></cx-icon>
+              </slot>
+            </div>
+
+            <div
+              id="listbox"
+              role="listbox"
+              aria-expanded=${this.open ? "true" : "false"}
+              aria-multiselectable=${this.multiple ? "true" : "false"}
+              aria-labelledby="label"
+              part="listbox"
+              class="select__listbox"
+              tabindex="-1"
+              @mouseup=${this.handleOptionClick}
+              @slotchange=${this.handleDefaultSlotChange}
+            >
+              <slot></slot>
+              ${m(
+      this.shouldShowNoOptionsMessage,
+      () => p`
+                  <cx-typography
+                    variant="body3"
+                    class="select__no-options"
+                    role="option"
+                  >
+                    ${this.noOptionText}
+                  </cx-typography>
+                `
+    )}
+            </div>
+          </cx-popup>
+        </div>
+
+        <div
+          part="form-control-help-text"
+          id="help-text"
+          class="form-control__help-text"
+          aria-hidden=${n ? "false" : "true"}
+        >
+          <slot name="help-text">${this.helpText}</slot>
+        </div>
+      </div>
+    `;
+  }
+};
+i.styles = [
+  k,
+  z,
+  W
+];
+i.dependencies = {
+  "cx-icon": P,
+  "cx-line-clamp": O,
+  "cx-popup": M,
+  "cx-spinner": U,
+  "cx-tag": N,
+  "cx-typography": C
+};
+s([
+  u(".select")
+], i.prototype, "popup", 2);
+s([
+  u(".select__combobox")
+], i.prototype, "combobox", 2);
+s([
+  u(".select__display-input")
+], i.prototype, "displayInput", 2);
+s([
+  u(".select__value-input")
+], i.prototype, "valueInput", 2);
+s([
+  u(".select__listbox")
+], i.prototype, "listbox", 2);
+s([
+  f()
+], i.prototype, "hasFocus", 2);
+s([
+  f()
+], i.prototype, "displayLabel", 2);
+s([
+  f()
+], i.prototype, "currentOption", 2);
+s([
+  f()
+], i.prototype, "selectedOptions", 2);
+s([
+  o()
+], i.prototype, "name", 2);
+s([
+  o({
+    converter: {
+      fromAttribute: (e) => e.split(" "),
+      toAttribute: (e) => Array.isArray(e) ? e.join(" ") : e
+    }
+  })
+], i.prototype, "value", 2);
+s([
+  I()
+], i.prototype, "defaultValue", 2);
+s([
+  o({ reflect: !0 })
+], i.prototype, "size", 2);
+s([
+  o()
+], i.prototype, "placeholder", 2);
+s([
+  o({ attribute: "allow-freetext", reflect: !0, type: Boolean })
+], i.prototype, "allowFreetext", 2);
+s([
+  o({ reflect: !0, type: Boolean })
+], i.prototype, "multiple", 2);
+s([
+  o({ attribute: "max-options-visible", type: Number })
+], i.prototype, "maxOptionsVisible", 2);
+s([
+  o({ reflect: !0, type: Boolean })
+], i.prototype, "disabled", 2);
+s([
+  o({ type: Boolean })
+], i.prototype, "clearable", 2);
+s([
+  o({ reflect: !0, type: Boolean })
+], i.prototype, "open", 2);
+s([
+  o({ type: Boolean })
+], i.prototype, "hoist", 2);
+s([
+  o({ attribute: "no-flip", reflect: !0, type: Boolean })
+], i.prototype, "noFlip", 2);
+s([
+  o({ attribute: "sync-element" })
+], i.prototype, "syncElement", 2);
+s([
+  o({ attribute: "free-width", reflect: !0, type: Boolean })
+], i.prototype, "freeWidth", 2);
+s([
+  o({ attribute: "auto-size-padding", type: Number })
+], i.prototype, "autosizePadding", 2);
+s([
+  o({ reflect: !0, type: Boolean })
+], i.prototype, "filled", 2);
+s([
+  o({ reflect: !0, type: Boolean })
+], i.prototype, "pill", 2);
+s([
+  o()
+], i.prototype, "label", 2);
+s([
+  o({ reflect: !0 })
+], i.prototype, "placement", 2);
+s([
+  o({ attribute: "help-text" })
+], i.prototype, "helpText", 2);
+s([
+  o({ reflect: !1 })
+], i.prototype, "form", 2);
+s([
+  o({ reflect: !0, type: Boolean })
+], i.prototype, "required", 2);
+s([
+  o({ attribute: "use-tag", reflect: !0, type: Boolean })
+], i.prototype, "useTag", 2);
+s([
+  o({
+    attribute: "no-select-on-enter",
+    reflect: !0,
+    type: Boolean
+  })
+], i.prototype, "noSelectOnEnter", 2);
+s([
+  o({
+    attribute: "no-reset-current",
+    reflect: !0,
+    type: Boolean
+  })
+], i.prototype, "noResetCurrent", 2);
+s([
+  o({
+    attribute: "no-dropdown",
+    reflect: !0,
+    type: Boolean
+  })
+], i.prototype, "noDropdown", 2);
+s([
+  o({
+    attribute: "loading",
+    reflect: !0,
+    type: Boolean
+  })
+], i.prototype, "loading", 2);
+s([
+  o({ attribute: "get-tag" })
+], i.prototype, "getTag", 2);
+s([
+  o({ attribute: "input-behavior" })
+], i.prototype, "inputBehavior", 2);
+s([
+  o({ attribute: "get-option-value" })
+], i.prototype, "getOptionValue", 2);
+s([
+  o({ attribute: "get-option-label" })
+], i.prototype, "getOptionLabel", 2);
+s([
+  o({ attribute: "get-option-selected" })
+], i.prototype, "getOptionSelected", 2);
+s([
+  o({ attribute: "get-option-disabled" })
+], i.prototype, "getOptionDisabled", 2);
+s([
+  o({ attribute: "stay-open-on-select", type: Boolean })
+], i.prototype, "stayOpenOnSelect", 2);
+s([
+  o({ attribute: "force-on-change", type: Boolean })
+], i.prototype, "forceOnChange", 2);
+s([
+  o({ attribute: "allow-default-mouse-down", type: Boolean })
+], i.prototype, "allowDefaultMouseDown", 2);
+s([
+  o({ attribute: "no-option-text", type: String })
+], i.prototype, "noOptionText", 2);
+s([
+  h("getOptionValue", { waitUntilFirstUpdate: !0 }),
+  h("getOptionLabel", { waitUntilFirstUpdate: !0 }),
+  h("getOptionSelected", { waitUntilFirstUpdate: !0 }),
+  h("getOptionDisabled", { waitUntilFirstUpdate: !0 })
+], i.prototype, "handleDefaultSlotChange", 1);
+s([
+  h("disabled", { waitUntilFirstUpdate: !0 })
+], i.prototype, "handleDisabledChange", 1);
+s([
+  h("value", { waitUntilFirstUpdate: !0 })
+], i.prototype, "handleValueChange", 1);
+s([
+  h("noDropdown", { waitUntilFirstUpdate: !0 })
+], i.prototype, "handleNoDropdownChange", 1);
+s([
+  h("open", { waitUntilFirstUpdate: !0 })
+], i.prototype, "handleOpenChange", 1);
+i = s([
+  D("cx-select")
+], i);
+w("select.show", {
+  keyframes: [
+    { opacity: 0, scale: 0.9 },
+    { opacity: 1, scale: 1 }
+  ],
+  options: { duration: 100, easing: "ease" }
+});
+w("select.hide", {
+  keyframes: [
+    { opacity: 1, scale: 1 },
+    { opacity: 0, scale: 0.9 }
+  ],
+  options: { duration: 100, easing: "ease" }
+});
 export {
-  y as default
+  i as default
 };