@six-group/ui-library 3.0.0-beta.1.7 → 3.0.0-beta.1.8

package/dist/collection/components/six-select/six-select.js

@@ -1,1105 +1,1105 @@
-import { Component, Element, Event, h, Method, Prop, State, Watch } from '@stencil/core';
-import { getTextContent, hasSlot } from '../../utils/slot';
-import FormControl from '../../functional-components/form-control/form-control';
-import { EventListeners } from '../../utils/event-listeners';
-import { debounce, DEFAULT_DEBOUNCE_FAST } from '../../utils/execution-control';
-let id = 0;
-/**
- * @since 1.0
- * @status stable
- *
- * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.
- *
- * @slot - The select's options in the form of menu items.
- * @slot label - The select's label. Alternatively, you can use the label prop.
- * @slot help-text - Help text that describes how to use the select.
- * @slot error-text - Error text that is shown for validation errors. Alternatively, you can use the error-text prop.
- *
- * @part base - The component's base wrapper.
- * @part clear-button - The input's clear button, exported from six-input.
- * @part form-control - The form control that wraps the label, input, and help text.
- * @part help-text - The select's help text.
- * @part icon - The select's icon.
- * @part label - The select's label.
- * @part menu - The select menu, a six-menu element.
- * @part tag - The multiselect option, a six-tag element.
- * @part tags - The container in which multiselect options are rendered.
- */
-export class SixSelect {
-  constructor() {
-    this.inputId = `select-${++id}`;
-    this.labelId = `select-label-${id}`;
-    this.helpTextId = `select-help-text-${id}`;
-    this.errorTextId = `select-error-text-${id}`;
-    this.customErrorText = '';
-    this.customValidation = false;
-    this.eventListeners = new EventListeners();
-    this.hasFocus = false;
-    this.hasHelpTextSlot = false;
-    this.hasErrorTextSlot = false;
-    this.hasLabelSlot = false;
-    this.isOpen = false;
-    this.displayLabel = '';
-    this.displayTags = [];
-    /** Set to true to enable multiselect. */
-    this.multiple = false;
-    /**
-     * The maximum number of tags to show when `multiple` is true. After the maximum, "+n" will be shown to indicate the
-     * number of additional items that are selected. Set to -1 to remove the limit.
-     */
-    this.maxTagsVisible = 3;
-    /** Set to true to disable the select control. */
-    this.disabled = false;
-    /** The select's name. */
-    this.name = '';
-    /** The select's placeholder text. */
-    this.placeholder = '';
-    /** The debounce for the filter callbacks. */
-    this.filterDebounce = DEFAULT_DEBOUNCE_FAST;
-    /** The select's size. */
-    this.size = 'medium';
-    /**
-     * Enable this option to prevent the panel from being clipped when the component is placed inside a container with
-     * `overflow: auto|scroll`.
-     */
-    this.hoist = false;
-    /** The value of the control. This will be a string or an array depending on `multiple`. */
-    this.value = '';
-    /** Set to true to draw a pill-style select with rounded edges. */
-    this.pill = false;
-    /** The select's label. Alternatively, you can use the label slot. */
-    this.label = '';
-    /** The select's help text. Alternatively, you can use the help-text slot. */
-    this.helpText = '';
-    /** The select's error text. Alternatively, you can use the error-text slot. */
-    this.errorText = '';
-    /** The select's required attribute. */
-    this.required = false;
-    /** Set to true to add a clear button when the select is populated. */
-    this.clearable = false;
-    /** This will be true when the control is in an invalid state. Validity is determined by the `required` prop. */
-    this.invalid = false;
-    /** Set to render as line */
-    this.line = false;
-    /** Set to display the error text on blur and not when typing */
-    this.errorOnBlur = false;
-    /** Set to true to allow filtering for entries in the dropdown */
-    this.filter = false;
-    /**
-     * Set to true to allow async filtering.
-     * When you enter something in the search field the component will only emit an event but not filter any elements itself.
-     * You can then simply listen to the 'six-async-filter-fired' event to manage the shown menu-items yourself
-     */
-    this.asyncFilter = false;
-    /**
-     * Set to true to turn the six-select into an autocomplete.
-     */
-    this.autocomplete = false;
-    /** The debounce for when the input changes for autocompletes should be emitted */
-    this.inputDebounce = DEFAULT_DEBOUNCE_FAST;
-    /** Set the options to be shown in the dropdown (alternative to setting the elements via html) */
-    this.options = null;
-    /** Defines whether the menu list will be rendered virtually i.e. only the elements actually shown (and a couple around)
-     *  are actually rendered in the DOM. If you use virtual scrolling pass the elements via prop instead of via slot. */
-    this.virtualScroll = false;
-    /** The default value the select will be reverted to when reset is executed */
-    this.defaultValue = null;
-  }
-  handleDisabledChange() {
-    if (this.disabled && this.isOpen) {
-      this.dropdown.hide();
-    }
-  }
-  handleLabelChange() {
-    this.handleSlotChange();
-  }
-  handleMultipleChange() {
-    // Cast to array | string based on `this.multiple`
-    const value = this.getValueAsArray();
-    this.value = this.multiple ? value : value[0] || '';
-    this.syncItemsFromValue();
-  }
-  handleValueChange() {
-    this.syncItemsFromValue();
-    if (this.input) {
-      this.sixChange.emit({ value: this.value, isSelected: true });
-    }
-  }
-  connectedCallback() {
-    if (this.virtualScroll && this.options === null) {
-      console.error('Options must be defined when using virtual scrolling');
-    }
-    this.handleBlur = this.handleBlur.bind(this);
-    this.handleFocus = this.handleFocus.bind(this);
-    this.handleClearClick = this.handleClearClick.bind(this);
-    this.handleKeyDown = this.handleKeyDown.bind(this);
-    this.handleSelectAll = this.handleSelectAll.bind(this);
-    this.handleLabelClick = this.handleLabelClick.bind(this);
-    this.handleMenuHide = this.handleMenuHide.bind(this);
-    this.handleMenuShow = this.handleMenuShow.bind(this);
-    this.handleMenuSelect = this.handleMenuSelect.bind(this);
-    this.handleSlotChange = this.handleSlotChange.bind(this);
-    this.handleInvalid = this.handleInvalid.bind(this);
-    this.handleTagInteraction = this.handleTagInteraction.bind(this);
-    this.host.shadowRoot.addEventListener('slotchange', this.handleSlotChange);
-  }
-  componentWillLoad() {
-    this.handleSlotChange();
-    if (this.multiple && this.value) {
-      this.value = this.getValueAsArray();
-    }
-  }
-  componentDidLoad() {
-    this.resizeObserver = new ResizeObserver(() => this.resizeMenu());
-    // We need to do an initial sync after the component has rendered, so this will suppress the re-render warning
-    requestAnimationFrame(() => this.syncItemsFromValue());
-    this.eventListeners.add(this.input, 'invalid', async (event) => {
-      if (this.customValidation || (!this.hasErrorTextSlot && !this.errorText && !this.customErrorText)) {
-        this.customErrorText = await this.input.getValidationMessage();
-      }
-      event.preventDefault();
-    });
-    this.eventListeners.add(this.input, 'six-input-input', debounce((event) => {
-      const enteredValue = this.input.value;
-      this.clearValues();
-      this.sixChange.emit({ value: enteredValue, isSelected: false });
-      event.stopPropagation();
-    }, this.inputDebounce));
-    this.input.value = this.hasSelection() ? this.displayLabel : '';
-  }
-  disconnectedCallback() {
-    this.host.shadowRoot.removeEventListener('slotchange', this.handleSlotChange);
-    this.eventListeners.removeAll();
-  }
-  /** Checks for validity and shows the browser's validation message if the control is invalid. */
-  async reportValidity() {
-    return this.input.reportValidity();
-  }
-  /** Checks for validity. */
-  async checkValidity() {
-    return this.input.isValid();
-  }
-  /** Sets a custom validation message. If `message` is not empty, the field will be considered invalid. */
-  async setCustomValidity(message) {
-    this.customErrorText = '';
-    this.customValidation = message !== '';
-    this.input.setCustomValidity(message);
-    this.invalid = !this.input.checkValidity();
-  }
-  /** Resets the formcontrol */
-  async reset() {
-    this.value = this.defaultValue;
-    this.customErrorText = '';
-    this.customValidation = false;
-    this.input.setCustomValidity('');
-    this.invalid = false;
-  }
-  getItemLabel(item) {
-    const slot = item.shadowRoot.querySelector('slot:not([name])');
-    if (slot) {
-      return getTextContent(slot);
-    }
-    else {
-      // bugfix/COMSLI-203-six-select-value-is-not-updated-if-the-slot-is-changed
-      return item.textContent;
-    }
-  }
-  getItems() {
-    if (this.options !== null) {
-      return this.options.map((option) => h("six-menu-item", { value: option.value }, option.label));
-    }
-    return [...this.host.querySelectorAll('six-menu-item')];
-  }
-  hasMenuItems() {
-    return this.getItems().length > 0;
-  }
-  getValueAsArray() {
-    const values = Array.isArray(this.value) ? this.value : [this.value];
-    // enforce that the values are converted to 'string' before the value is compared
-    return values.map(String);
-  }
-  handleBlur() {
-    this.hasFocus = false;
-    this.sixBlur.emit();
-  }
-  handleFocus() {
-    this.hasFocus = true;
-    this.sixFocus.emit();
-  }
-  handleInvalid() {
-    this.invalid = true;
-  }
-  handleClearClick(event) {
-    event.stopPropagation();
-    this.clearValues();
-  }
-  clearValues() {
-    var _a;
-    this.value = (_a = this.defaultValue) !== null && _a !== void 0 ? _a : (this.multiple ? [] : '');
-    this.syncItemsFromValue();
-  }
-  handleSelectAll(event) {
-    const nonFilteredItems = this.getItems().filter((item) => item.style.display !== 'none');
-    const keyName = event.key;
-    const keyCode = event.code;
-    if (keyName === 'Control') {
-      return;
-    }
-    if (this.isOpen && this.multiple && keyCode === 'KeyA' && event.ctrlKey) {
-      event.preventDefault();
-      const hasDeselectedOptions = nonFilteredItems.some((opt) => !opt.disabled && !opt.checked);
-      nonFilteredItems
-        .filter((option) => !option.disabled)
-        .forEach((option) => (option.checked = hasDeselectedOptions));
-      const checkedItems = nonFilteredItems.filter((option) => option.checked).map((option) => option.value);
-      this.value = hasDeselectedOptions ? checkedItems : [];
-    }
-  }
-  handleKeyDown(event) {
-    const target = event.target;
-    const items = this.getItems();
-    const firstItem = items[0];
-    const lastItem = items[items.length - 1];
-    // Ignore key presses on tags
-    if (target.tagName.toLowerCase() === 'six-tag') {
-      return;
-    }
-    // Tabbing out of the control closes it
-    if (event.key === 'Tab') {
-      if (this.isOpen) {
-        this.dropdown.hide();
-      }
-      return;
-    }
-    // Up/down opens the menu
-    if (['ArrowDown', 'ArrowUp'].includes(event.key)) {
-      event.preventDefault();
-      // Show the menu if it's not already open
-      if (!this.isOpen) {
-        this.dropdown.show();
-      }
-      // Focus on a menu item
-      if (event.key === 'ArrowDown' && firstItem) {
-        firstItem.setFocus();
-        return;
-      }
-      if (event.key === 'ArrowUp' && lastItem) {
-        lastItem.setFocus();
-        return;
-      }
-    }
-    // All other keys open the menu and initiate type to select
-    if (!this.isOpen) {
-      event.stopPropagation();
-      event.preventDefault();
-      this.dropdown.show();
-      this.menu.typeToSelect(event.key);
-    }
-  }
-  handleLabelClick() {
-    this.box.focus();
-  }
-  handleMenuSelect(event) {
-    const item = event.detail.item;
-    const getValue = () => {
-      if (this.multiple) {
-        return this.value.includes(item.value)
-          ? this.value.filter((v) => v !== item.value)
-          : [...this.value, item.value];
-      }
-      else {
-        return item.value;
-      }
-    };
-    this.value = getValue();
-    this.syncItemsFromValue();
-  }
-  handleMenuShow(event) {
-    if (this.disabled) {
-      event.preventDefault();
-      return;
-    }
-    this.resizeMenu();
-    this.resizeObserver.observe(this.host);
-    this.isOpen = true;
-  }
-  handleMenuHide() {
-    this.resizeObserver.unobserve(this.host);
-    this.isOpen = false;
-  }
-  handleSlotChange() {
-    this.hasHelpTextSlot = hasSlot(this.host, 'help-text');
-    this.hasErrorTextSlot = hasSlot(this.host, 'error-text');
-    this.hasLabelSlot = hasSlot(this.host, 'label');
-    this.syncItemsFromValue();
-  }
-  handleTagInteraction(event) {
-    // Don't toggle the menu when a tag's clear button is activated
-    const path = event.composedPath();
-    const clearButton = path.find((el) => {
-      if (el instanceof HTMLElement) {
-        const element = el;
-        return element.classList.contains('tag__clear');
-      }
-    });
-    if (clearButton) {
-      event.stopPropagation();
-    }
-  }
-  resizeMenu() {
-    this.menu.style.minWidth = `${this.box.clientWidth}px`;
-    if (this.dropdown) {
-      this.dropdown.reposition();
-    }
-  }
-  syncItemsFromValue() {
-    const items = this.getItems();
-    const value = this.getValueAsArray();
-    // Sync checked states
-    items.forEach((item) => (item.checked = value.includes(item.value)));
-    // Sync display label
-    if (this.multiple) {
-      const checkedItems = [];
-      value.forEach((val) => items.map((item) => (item.value === val ? checkedItems.push(item) : null)));
-      this.displayTags = checkedItems.map((item) => {
-        return (h("six-tag", { exportparts: "base:tag", type: "primary", size: this.size, pill: this.pill, clearable: true, onClick: this.handleTagInteraction, onKeyDown: this.handleTagInteraction, "onSix-tag-clear": (event) => {
-            event.stopPropagation();
-            if (!this.disabled) {
-              item.checked = false;
-              this.syncValueFromItems();
-            }
-          } }, this.getItemLabel(item)));
-      });
-      if (this.maxTagsVisible > 0 && this.displayTags.length > this.maxTagsVisible) {
-        const total = this.displayTags.length;
-        this.displayLabel = '';
-        this.displayTags = this.displayTags.slice(0, this.maxTagsVisible);
-        this.displayTags.push(h("six-tag", { exportparts: "base:tag", type: "info", size: this.size },
-          "+",
-          total - this.maxTagsVisible));
-      }
-    }
-    else {
-      this.displayLabel = this.extractLabelForSelectedItem(value, items);
-      this.displayTags = [];
-    }
-    const hasSelection = this.hasSelection();
-    if (hasSelection) {
-      this.touched = true;
-    }
-    if (this.input && this.touched) {
-      if (!this.autocomplete) {
-        this.input.value = hasSelection ? this.displayLabel : '';
-      }
-      else if (hasSelection) {
-        this.input.value = Array.isArray(this.value) ? this.value.join(',') : this.value;
-      }
-      this.invalid = !this.input.checkValidity();
-    }
-  }
-  extractLabelForSelectedItem(value, items) {
-    if (value.length === 0 || (value.length === 1 && value[0] === '')) {
-      return '';
-    }
-    if (this.options !== null) {
-      const selectedOption = this.options.find((item) => item.value === value[0]);
-      return (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.value) || '';
-    }
-    const checkedItem = items.find((item) => item.value === value[0]);
-    return checkedItem ? this.getItemLabel(checkedItem) : '';
-  }
-  syncValueFromItems() {
-    const items = this.getItems();
-    const checkedItems = items.filter((item) => item.checked);
-    const checkedValues = checkedItems.map((item) => item.value);
-    this.value = this.multiple
-      ? this.getValueAsArray().filter((val) => checkedValues.includes(val))
-      : checkedValues.length > 0
-        ? checkedValues[0]
-        : '';
-  }
-  displayError() {
-    return this.invalid && (!this.errorOnBlur || (!this.hasFocus && !this.isOpen));
-  }
-  render() {
-    var _a;
-    const hasSelection = this.hasSelection();
-    return (h(FormControl, { inputId: this.inputId, label: this.label, labelId: this.labelId, hasLabelSlot: this.hasLabelSlot, helpTextId: this.helpTextId, helpText: this.helpText, hasHelpTextSlot: this.hasHelpTextSlot, errorTextId: this.errorTextId, errorText: this.customErrorText ? this.customErrorText : this.errorText, hasErrorTextSlot: this.hasErrorTextSlot, size: this.size, onLabelClick: this.handleLabelClick, disabled: this.disabled, required: this.required, displayError: this.displayError() },
-      h("six-dropdown", { part: "base", ref: (el) => (this.dropdown = el), hoist: this.hoist, closeOnSelect: !this.multiple, containingElement: this.host, disableHideOnEnterAndSpace: this.autocomplete, class: {
-          select: true,
-          'select--open': this.isOpen,
-          'select--empty': ((_a = this.value) === null || _a === void 0 ? void 0 : _a.length) === 0,
-          'select--focused': this.hasFocus,
-          'select--clearable': this.clearable,
-          'select--disabled': this.disabled,
-          'select--multiple': this.multiple,
-          'select--has-tags': this.multiple && hasSelection,
-          'select--placeholder-visible': this.displayLabel === '',
-          'select--small': this.size === 'small',
-          'select--medium': this.size === 'medium',
-          'select--large': this.size === 'large',
-          'select--pill': this.pill,
-          'select--invalid': this.invalid,
-        }, onKeyDown: this.handleSelectAll, "onSix-dropdown-show": this.handleMenuShow, "onSix-dropdown-hide": this.handleMenuHide, filterPlaceholder: this.filterPlaceholder, filterDebounce: this.filterDebounce, filter: this.filter, asyncFilter: this.asyncFilter },
-        h("div", { slot: "trigger", ref: (el) => (this.box = el), id: this.inputId, class: {
-            select__box: true,
-            'select__box--line': this.line,
-            'select__box--autocomplete': this.autocomplete,
-          }, role: "combobox", "aria-labelledby": this.labelId, "aria-describedby": this.helpTextId, "aria-haspopup": "true", "aria-expanded": this.isOpen ? 'true' : 'false', tabIndex: this.disabled ? -1 : 0, onBlur: this.handleBlur, onFocus: this.handleFocus, onKeyDown: this.handleKeyDown },
-          h("span", { class: "select__label" }, this.displayTags.length ? (h("span", { part: "tags", class: "select__tags" }, this.displayTags)) : (this.displayLabel || this.placeholder)),
-          this.clearable && hasSelection && (h("six-icon-button", { exportparts: "base:clear-button", class: "select__clear", name: "clear", size: "small", onClick: this.handleClearClick, tabindex: "-1" })),
-          this.hasMenuItems() && (h("span", { part: "icon", class: "select__icon" },
-            h("six-icon", { size: "medium" }, "expand_more"))),
-          h("six-input", { ref: (el) => (this.input = el), class: {
-              select__input: true,
-              'select__hidden-select': !this.autocomplete,
-            }, "aria-hidden": "true", required: this.required, onInvalid: this.handleInvalid, onFocus: this.handleFocus, clearable: this.clearable, placeholder: this.placeholder, pill: this.pill, disabled: this.disabled, size: this.size, tabIndex: -1 })),
-        h("six-menu", { ref: (el) => (this.menu = el), part: "menu", class: {
-            select__menu: true,
-            'select__menu--filtered': this.filter || this.asyncFilter,
-            'select__menu--hidden': !this.hasMenuItems(),
-          }, "onSix-menu-item-selected": this.handleMenuSelect, items: this.options, virtualScroll: this.virtualScroll, "remove-box-shadow": true },
-          h("slot", { onSlotchange: this.handleSlotChange })))));
-  }
-  hasSelection() {
-    return this.multiple ? this.value.length > 0 : this.value !== '';
-  }
-  static get is() { return "six-select"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["six-select.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["six-select.css"]
-  }; }
-  static get properties() { return {
-    "multiple": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Set to true to enable multiselect."
-      },
-      "attribute": "multiple",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "maxTagsVisible": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The maximum number of tags to show when `multiple` is true. After the maximum, \"+n\" will be shown to indicate the\nnumber of additional items that are selected. Set to -1 to remove the limit."
-      },
-      "attribute": "max-tags-visible",
-      "reflect": false,
-      "defaultValue": "3"
-    },
-    "disabled": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Set to true to disable the select control."
-      },
-      "attribute": "disabled",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "name": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The select's name."
-      },
-      "attribute": "name",
-      "reflect": false,
-      "defaultValue": "''"
-    },
-    "placeholder": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The select's placeholder text."
-      },
-      "attribute": "placeholder",
-      "reflect": false,
-      "defaultValue": "''"
-    },
-    "filterPlaceholder": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The filter's placeholder text."
-      },
-      "attribute": "filter-placeholder",
-      "reflect": false
-    },
-    "filterDebounce": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The debounce for the filter callbacks."
-      },
-      "attribute": "filter-debounce",
-      "reflect": false,
-      "defaultValue": "DEFAULT_DEBOUNCE_FAST"
-    },
-    "size": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "'small' | 'medium' | 'large'",
-        "resolved": "\"large\" | \"medium\" | \"small\"",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The select's size."
-      },
-      "attribute": "size",
-      "reflect": false,
-      "defaultValue": "'medium'"
-    },
-    "hoist": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Enable this option to prevent the panel from being clipped when the component is placed inside a container with\n`overflow: auto|scroll`."
-      },
-      "attribute": "hoist",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "value": {
-      "type": "string",
-      "mutable": true,
-      "complexType": {
-        "original": "string | string[]",
-        "resolved": "string | string[]",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The value of the control. This will be a string or an array depending on `multiple`."
-      },
-      "attribute": "value",
-      "reflect": false,
-      "defaultValue": "''"
-    },
-    "pill": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Set to true to draw a pill-style select with rounded edges."
-      },
-      "attribute": "pill",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "label": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The select's label. Alternatively, you can use the label slot."
-      },
-      "attribute": "label",
-      "reflect": false,
-      "defaultValue": "''"
-    },
-    "helpText": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The select's help text. Alternatively, you can use the help-text slot."
-      },
-      "attribute": "help-text",
-      "reflect": false,
-      "defaultValue": "''"
-    },
-    "errorText": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The select's error text. Alternatively, you can use the error-text slot."
-      },
-      "attribute": "error-text",
-      "reflect": false,
-      "defaultValue": "''"
-    },
-    "required": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The select's required attribute."
-      },
-      "attribute": "required",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "clearable": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Set to true to add a clear button when the select is populated."
-      },
-      "attribute": "clearable",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "invalid": {
-      "type": "boolean",
-      "mutable": true,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "This will be true when the control is in an invalid state. Validity is determined by the `required` prop."
-      },
-      "attribute": "invalid",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "line": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Set to render as line"
-      },
-      "attribute": "line",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "errorOnBlur": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Set to display the error text on blur and not when typing"
-      },
-      "attribute": "error-on-blur",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "filter": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Set to true to allow filtering for entries in the dropdown"
-      },
-      "attribute": "filter",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "asyncFilter": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Set to true to allow async filtering.\nWhen you enter something in the search field the component will only emit an event but not filter any elements itself.\nYou can then simply listen to the 'six-async-filter-fired' event to manage the shown menu-items yourself"
-      },
-      "attribute": "async-filter",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "autocomplete": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Set to true to turn the six-select into an autocomplete."
-      },
-      "attribute": "autocomplete",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "inputDebounce": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The debounce for when the input changes for autocompletes should be emitted"
-      },
-      "attribute": "input-debounce",
-      "reflect": false,
-      "defaultValue": "DEFAULT_DEBOUNCE_FAST"
-    },
-    "options": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "SixMenuItemData[] | null",
-        "resolved": "SixMenuItemData[]",
-        "references": {
-          "SixMenuItemData": {
-            "location": "import",
-            "path": "../six-menu/six-menu"
-          }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Set the options to be shown in the dropdown (alternative to setting the elements via html)"
-      },
-      "defaultValue": "null"
-    },
-    "virtualScroll": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Defines whether the menu list will be rendered virtually i.e. only the elements actually shown (and a couple around)\nare actually rendered in the DOM. If you use virtual scrolling pass the elements via prop instead of via slot."
-      },
-      "attribute": "virtual-scroll",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "defaultValue": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string | string[]",
-        "resolved": "string | string[]",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The default value the select will be reverted to when reset is executed"
-      },
-      "attribute": "default-value",
-      "reflect": false,
-      "defaultValue": "null"
-    }
-  }; }
-  static get states() { return {
-    "hasFocus": {},
-    "hasHelpTextSlot": {},
-    "hasErrorTextSlot": {},
-    "hasLabelSlot": {},
-    "isOpen": {},
-    "displayLabel": {},
-    "displayTags": {}
-  }; }
-  static get events() { return [{
-      "method": "sixChange",
-      "name": "six-select-change",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Emitted when the control's value changes."
-      },
-      "complexType": {
-        "original": "SixSelectChangePayload",
-        "resolved": "SixSelectChangePayload",
-        "references": {
-          "SixSelectChangePayload": {
-            "location": "local"
-          }
-        }
-      }
-    }, {
-      "method": "sixFocus",
-      "name": "six-select-focus",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Emitted when the control gains focus."
-      },
-      "complexType": {
-        "original": "EmptyPayload",
-        "resolved": "undefined",
-        "references": {
-          "EmptyPayload": {
-            "location": "import",
-            "path": "../../utils/types"
-          }
-        }
-      }
-    }, {
-      "method": "sixBlur",
-      "name": "six-select-blur",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Emitted when the control loses focus."
-      },
-      "complexType": {
-        "original": "EmptyPayload",
-        "resolved": "undefined",
-        "references": {
-          "EmptyPayload": {
-            "location": "import",
-            "path": "../../utils/types"
-          }
-        }
-      }
-    }]; }
-  static get methods() { return {
-    "reportValidity": {
-      "complexType": {
-        "signature": "() => Promise<boolean>",
-        "parameters": [],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
-        },
-        "return": "Promise<boolean>"
-      },
-      "docs": {
-        "text": "Checks for validity and shows the browser's validation message if the control is invalid.",
-        "tags": []
-      }
-    },
-    "checkValidity": {
-      "complexType": {
-        "signature": "() => Promise<boolean>",
-        "parameters": [],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
-        },
-        "return": "Promise<boolean>"
-      },
-      "docs": {
-        "text": "Checks for validity.",
-        "tags": []
-      }
-    },
-    "setCustomValidity": {
-      "complexType": {
-        "signature": "(message: string) => Promise<void>",
-        "parameters": [{
-            "tags": [],
-            "text": ""
-          }],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
-        },
-        "return": "Promise<void>"
-      },
-      "docs": {
-        "text": "Sets a custom validation message. If `message` is not empty, the field will be considered invalid.",
-        "tags": []
-      }
-    },
-    "reset": {
-      "complexType": {
-        "signature": "() => Promise<void>",
-        "parameters": [],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
-        },
-        "return": "Promise<void>"
-      },
-      "docs": {
-        "text": "Resets the formcontrol",
-        "tags": []
-      }
-    }
-  }; }
-  static get elementRef() { return "host"; }
-  static get watchers() { return [{
-      "propName": "disabled",
-      "methodName": "handleDisabledChange"
-    }, {
-      "propName": "helpText",
-      "methodName": "handleLabelChange"
-    }, {
-      "propName": "errorText",
-      "methodName": "handleLabelChange"
-    }, {
-      "propName": "label",
-      "methodName": "handleLabelChange"
-    }, {
-      "propName": "multiple",
-      "methodName": "handleMultipleChange"
-    }, {
-      "propName": "value",
-      "methodName": "handleValueChange"
-    }]; }
-}
+import { Component, Element, Event, h, Method, Prop, State, Watch } from '@stencil/core';
+import { getTextContent, hasSlot } from '../../utils/slot';
+import FormControl from '../../functional-components/form-control/form-control';
+import { EventListeners } from '../../utils/event-listeners';
+import { debounce, DEFAULT_DEBOUNCE_FAST } from '../../utils/execution-control';
+let id = 0;
+/**
+ * @since 1.0
+ * @status stable
+ *
+ * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.
+ *
+ * @slot - The select's options in the form of menu items.
+ * @slot label - The select's label. Alternatively, you can use the label prop.
+ * @slot help-text - Help text that describes how to use the select.
+ * @slot error-text - Error text that is shown for validation errors. Alternatively, you can use the error-text prop.
+ *
+ * @part base - The component's base wrapper.
+ * @part clear-button - The input's clear button, exported from six-input.
+ * @part form-control - The form control that wraps the label, input, and help text.
+ * @part help-text - The select's help text.
+ * @part icon - The select's icon.
+ * @part label - The select's label.
+ * @part menu - The select menu, a six-menu element.
+ * @part tag - The multiselect option, a six-tag element.
+ * @part tags - The container in which multiselect options are rendered.
+ */
+export class SixSelect {
+  constructor() {
+    this.inputId = `select-${++id}`;
+    this.labelId = `select-label-${id}`;
+    this.helpTextId = `select-help-text-${id}`;
+    this.errorTextId = `select-error-text-${id}`;
+    this.customErrorText = '';
+    this.customValidation = false;
+    this.eventListeners = new EventListeners();
+    this.hasFocus = false;
+    this.hasHelpTextSlot = false;
+    this.hasErrorTextSlot = false;
+    this.hasLabelSlot = false;
+    this.isOpen = false;
+    this.displayLabel = '';
+    this.displayTags = [];
+    /** Set to true to enable multiselect. */
+    this.multiple = false;
+    /**
+     * The maximum number of tags to show when `multiple` is true. After the maximum, "+n" will be shown to indicate the
+     * number of additional items that are selected. Set to -1 to remove the limit.
+     */
+    this.maxTagsVisible = 3;
+    /** Set to true to disable the select control. */
+    this.disabled = false;
+    /** The select's name. */
+    this.name = '';
+    /** The select's placeholder text. */
+    this.placeholder = '';
+    /** The debounce for the filter callbacks. */
+    this.filterDebounce = DEFAULT_DEBOUNCE_FAST;
+    /** The select's size. */
+    this.size = 'medium';
+    /**
+     * Enable this option to prevent the panel from being clipped when the component is placed inside a container with
+     * `overflow: auto|scroll`.
+     */
+    this.hoist = false;
+    /** The value of the control. This will be a string or an array depending on `multiple`. */
+    this.value = '';
+    /** Set to true to draw a pill-style select with rounded edges. */
+    this.pill = false;
+    /** The select's label. Alternatively, you can use the label slot. */
+    this.label = '';
+    /** The select's help text. Alternatively, you can use the help-text slot. */
+    this.helpText = '';
+    /** The select's error text. Alternatively, you can use the error-text slot. */
+    this.errorText = '';
+    /** The select's required attribute. */
+    this.required = false;
+    /** Set to true to add a clear button when the select is populated. */
+    this.clearable = false;
+    /** This will be true when the control is in an invalid state. Validity is determined by the `required` prop. */
+    this.invalid = false;
+    /** Set to render as line */
+    this.line = false;
+    /** Set to display the error text on blur and not when typing */
+    this.errorOnBlur = false;
+    /** Set to true to allow filtering for entries in the dropdown */
+    this.filter = false;
+    /**
+     * Set to true to allow async filtering.
+     * When you enter something in the search field the component will only emit an event but not filter any elements itself.
+     * You can then simply listen to the 'six-async-filter-fired' event to manage the shown menu-items yourself
+     */
+    this.asyncFilter = false;
+    /**
+     * Set to true to turn the six-select into an autocomplete.
+     */
+    this.autocomplete = false;
+    /** The debounce for when the input changes for autocompletes should be emitted */
+    this.inputDebounce = DEFAULT_DEBOUNCE_FAST;
+    /** Set the options to be shown in the dropdown (alternative to setting the elements via html) */
+    this.options = null;
+    /** Defines whether the menu list will be rendered virtually i.e. only the elements actually shown (and a couple around)
+     *  are actually rendered in the DOM. If you use virtual scrolling pass the elements via prop instead of via slot. */
+    this.virtualScroll = false;
+    /** The default value the select will be reverted to when reset is executed */
+    this.defaultValue = null;
+  }
+  handleDisabledChange() {
+    if (this.disabled && this.isOpen) {
+      this.dropdown.hide();
+    }
+  }
+  handleLabelChange() {
+    this.handleSlotChange();
+  }
+  handleMultipleChange() {
+    // Cast to array | string based on `this.multiple`
+    const value = this.getValueAsArray();
+    this.value = this.multiple ? value : value[0] || '';
+    this.syncItemsFromValue();
+  }
+  handleValueChange() {
+    this.syncItemsFromValue();
+    if (this.input) {
+      this.sixChange.emit({ value: this.value, isSelected: true });
+    }
+  }
+  connectedCallback() {
+    if (this.virtualScroll && this.options === null) {
+      console.error('Options must be defined when using virtual scrolling');
+    }
+    this.handleBlur = this.handleBlur.bind(this);
+    this.handleFocus = this.handleFocus.bind(this);
+    this.handleClearClick = this.handleClearClick.bind(this);
+    this.handleKeyDown = this.handleKeyDown.bind(this);
+    this.handleSelectAll = this.handleSelectAll.bind(this);
+    this.handleLabelClick = this.handleLabelClick.bind(this);
+    this.handleMenuHide = this.handleMenuHide.bind(this);
+    this.handleMenuShow = this.handleMenuShow.bind(this);
+    this.handleMenuSelect = this.handleMenuSelect.bind(this);
+    this.handleSlotChange = this.handleSlotChange.bind(this);
+    this.handleInvalid = this.handleInvalid.bind(this);
+    this.handleTagInteraction = this.handleTagInteraction.bind(this);
+    this.host.shadowRoot.addEventListener('slotchange', this.handleSlotChange);
+  }
+  componentWillLoad() {
+    this.handleSlotChange();
+    if (this.multiple && this.value) {
+      this.value = this.getValueAsArray();
+    }
+  }
+  componentDidLoad() {
+    this.resizeObserver = new ResizeObserver(() => this.resizeMenu());
+    // We need to do an initial sync after the component has rendered, so this will suppress the re-render warning
+    requestAnimationFrame(() => this.syncItemsFromValue());
+    this.eventListeners.add(this.input, 'invalid', async (event) => {
+      if (this.customValidation || (!this.hasErrorTextSlot && !this.errorText && !this.customErrorText)) {
+        this.customErrorText = await this.input.getValidationMessage();
+      }
+      event.preventDefault();
+    });
+    this.eventListeners.add(this.input, 'six-input-input', debounce((event) => {
+      const enteredValue = this.input.value;
+      this.clearValues();
+      this.sixChange.emit({ value: enteredValue, isSelected: false });
+      event.stopPropagation();
+    }, this.inputDebounce));
+    this.input.value = this.hasSelection() ? this.displayLabel : '';
+  }
+  disconnectedCallback() {
+    this.host.shadowRoot.removeEventListener('slotchange', this.handleSlotChange);
+    this.eventListeners.removeAll();
+  }
+  /** Checks for validity and shows the browser's validation message if the control is invalid. */
+  async reportValidity() {
+    return this.input.reportValidity();
+  }
+  /** Checks for validity. */
+  async checkValidity() {
+    return this.input.isValid();
+  }
+  /** Sets a custom validation message. If `message` is not empty, the field will be considered invalid. */
+  async setCustomValidity(message) {
+    this.customErrorText = '';
+    this.customValidation = message !== '';
+    this.input.setCustomValidity(message);
+    this.invalid = !this.input.checkValidity();
+  }
+  /** Resets the formcontrol */
+  async reset() {
+    this.value = this.defaultValue;
+    this.customErrorText = '';
+    this.customValidation = false;
+    this.input.setCustomValidity('');
+    this.invalid = false;
+  }
+  getItemLabel(item) {
+    const slot = item.shadowRoot.querySelector('slot:not([name])');
+    if (slot) {
+      return getTextContent(slot);
+    }
+    else {
+      // bugfix/COMSLI-203-six-select-value-is-not-updated-if-the-slot-is-changed
+      return item.textContent;
+    }
+  }
+  getItems() {
+    if (this.options !== null) {
+      return this.options.map((option) => h("six-menu-item", { value: option.value }, option.label));
+    }
+    return [...this.host.querySelectorAll('six-menu-item')];
+  }
+  hasMenuItems() {
+    return this.getItems().length > 0;
+  }
+  getValueAsArray() {
+    const values = Array.isArray(this.value) ? this.value : [this.value];
+    // enforce that the values are converted to 'string' before the value is compared
+    return values.map(String);
+  }
+  handleBlur() {
+    this.hasFocus = false;
+    this.sixBlur.emit();
+  }
+  handleFocus() {
+    this.hasFocus = true;
+    this.sixFocus.emit();
+  }
+  handleInvalid() {
+    this.invalid = true;
+  }
+  handleClearClick(event) {
+    event.stopPropagation();
+    this.clearValues();
+  }
+  clearValues() {
+    var _a;
+    this.value = (_a = this.defaultValue) !== null && _a !== void 0 ? _a : (this.multiple ? [] : '');
+    this.syncItemsFromValue();
+  }
+  handleSelectAll(event) {
+    const nonFilteredItems = this.getItems().filter((item) => item.style.display !== 'none');
+    const keyName = event.key;
+    const keyCode = event.code;
+    if (keyName === 'Control') {
+      return;
+    }
+    if (this.isOpen && this.multiple && keyCode === 'KeyA' && event.ctrlKey) {
+      event.preventDefault();
+      const hasDeselectedOptions = nonFilteredItems.some((opt) => !opt.disabled && !opt.checked);
+      nonFilteredItems
+        .filter((option) => !option.disabled)
+        .forEach((option) => (option.checked = hasDeselectedOptions));
+      const checkedItems = nonFilteredItems.filter((option) => option.checked).map((option) => option.value);
+      this.value = hasDeselectedOptions ? checkedItems : [];
+    }
+  }
+  handleKeyDown(event) {
+    const target = event.target;
+    const items = this.getItems();
+    const firstItem = items[0];
+    const lastItem = items[items.length - 1];
+    // Ignore key presses on tags
+    if (target.tagName.toLowerCase() === 'six-tag') {
+      return;
+    }
+    // Tabbing out of the control closes it
+    if (event.key === 'Tab') {
+      if (this.isOpen) {
+        this.dropdown.hide();
+      }
+      return;
+    }
+    // Up/down opens the menu
+    if (['ArrowDown', 'ArrowUp'].includes(event.key)) {
+      event.preventDefault();
+      // Show the menu if it's not already open
+      if (!this.isOpen) {
+        this.dropdown.show();
+      }
+      // Focus on a menu item
+      if (event.key === 'ArrowDown' && firstItem) {
+        firstItem.setFocus();
+        return;
+      }
+      if (event.key === 'ArrowUp' && lastItem) {
+        lastItem.setFocus();
+        return;
+      }
+    }
+    // All other keys open the menu and initiate type to select
+    if (!this.isOpen) {
+      event.stopPropagation();
+      event.preventDefault();
+      this.dropdown.show();
+      this.menu.typeToSelect(event.key);
+    }
+  }
+  handleLabelClick() {
+    this.box.focus();
+  }
+  handleMenuSelect(event) {
+    const item = event.detail.item;
+    const getValue = () => {
+      if (this.multiple) {
+        return this.value.includes(item.value)
+          ? this.value.filter((v) => v !== item.value)
+          : [...this.value, item.value];
+      }
+      else {
+        return item.value;
+      }
+    };
+    this.value = getValue();
+    this.syncItemsFromValue();
+  }
+  handleMenuShow(event) {
+    if (this.disabled) {
+      event.preventDefault();
+      return;
+    }
+    this.resizeMenu();
+    this.resizeObserver.observe(this.host);
+    this.isOpen = true;
+  }
+  handleMenuHide() {
+    this.resizeObserver.unobserve(this.host);
+    this.isOpen = false;
+  }
+  handleSlotChange() {
+    this.hasHelpTextSlot = hasSlot(this.host, 'help-text');
+    this.hasErrorTextSlot = hasSlot(this.host, 'error-text');
+    this.hasLabelSlot = hasSlot(this.host, 'label');
+    this.syncItemsFromValue();
+  }
+  handleTagInteraction(event) {
+    // Don't toggle the menu when a tag's clear button is activated
+    const path = event.composedPath();
+    const clearButton = path.find((el) => {
+      if (el instanceof HTMLElement) {
+        const element = el;
+        return element.classList.contains('tag__clear');
+      }
+    });
+    if (clearButton) {
+      event.stopPropagation();
+    }
+  }
+  resizeMenu() {
+    this.menu.style.minWidth = `${this.box.clientWidth}px`;
+    if (this.dropdown) {
+      this.dropdown.reposition();
+    }
+  }
+  syncItemsFromValue() {
+    const items = this.getItems();
+    const value = this.getValueAsArray();
+    // Sync checked states
+    items.forEach((item) => (item.checked = value.includes(item.value)));
+    // Sync display label
+    if (this.multiple) {
+      const checkedItems = [];
+      value.forEach((val) => items.map((item) => (item.value === val ? checkedItems.push(item) : null)));
+      this.displayTags = checkedItems.map((item) => {
+        return (h("six-tag", { exportparts: "base:tag", type: "primary", size: this.size, pill: this.pill, clearable: true, onClick: this.handleTagInteraction, onKeyDown: this.handleTagInteraction, "onSix-tag-clear": (event) => {
+            event.stopPropagation();
+            if (!this.disabled) {
+              item.checked = false;
+              this.syncValueFromItems();
+            }
+          } }, this.getItemLabel(item)));
+      });
+      if (this.maxTagsVisible > 0 && this.displayTags.length > this.maxTagsVisible) {
+        const total = this.displayTags.length;
+        this.displayLabel = '';
+        this.displayTags = this.displayTags.slice(0, this.maxTagsVisible);
+        this.displayTags.push(h("six-tag", { exportparts: "base:tag", type: "info", size: this.size },
+          "+",
+          total - this.maxTagsVisible));
+      }
+    }
+    else {
+      this.displayLabel = this.extractLabelForSelectedItem(value, items);
+      this.displayTags = [];
+    }
+    const hasSelection = this.hasSelection();
+    if (hasSelection) {
+      this.touched = true;
+    }
+    if (this.input && this.touched) {
+      if (!this.autocomplete) {
+        this.input.value = hasSelection ? this.displayLabel : '';
+      }
+      else if (hasSelection) {
+        this.input.value = Array.isArray(this.value) ? this.value.join(',') : this.value;
+      }
+      this.invalid = !this.input.checkValidity();
+    }
+  }
+  extractLabelForSelectedItem(value, items) {
+    if (value.length === 0 || (value.length === 1 && value[0] === '')) {
+      return '';
+    }
+    if (this.options !== null) {
+      const selectedOption = this.options.find((item) => item.value === value[0]);
+      return (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.value) || '';
+    }
+    const checkedItem = items.find((item) => item.value === value[0]);
+    return checkedItem ? this.getItemLabel(checkedItem) : '';
+  }
+  syncValueFromItems() {
+    const items = this.getItems();
+    const checkedItems = items.filter((item) => item.checked);
+    const checkedValues = checkedItems.map((item) => item.value);
+    this.value = this.multiple
+      ? this.getValueAsArray().filter((val) => checkedValues.includes(val))
+      : checkedValues.length > 0
+        ? checkedValues[0]
+        : '';
+  }
+  displayError() {
+    return this.invalid && (!this.errorOnBlur || (!this.hasFocus && !this.isOpen));
+  }
+  render() {
+    var _a;
+    const hasSelection = this.hasSelection();
+    return (h(FormControl, { inputId: this.inputId, label: this.label, labelId: this.labelId, hasLabelSlot: this.hasLabelSlot, helpTextId: this.helpTextId, helpText: this.helpText, hasHelpTextSlot: this.hasHelpTextSlot, errorTextId: this.errorTextId, errorText: this.customErrorText ? this.customErrorText : this.errorText, hasErrorTextSlot: this.hasErrorTextSlot, size: this.size, onLabelClick: this.handleLabelClick, disabled: this.disabled, required: this.required, displayError: this.displayError() },
+      h("six-dropdown", { part: "base", ref: (el) => (this.dropdown = el), hoist: this.hoist, closeOnSelect: !this.multiple, containingElement: this.host, disableHideOnEnterAndSpace: this.autocomplete, class: {
+          select: true,
+          'select--open': this.isOpen,
+          'select--empty': ((_a = this.value) === null || _a === void 0 ? void 0 : _a.length) === 0,
+          'select--focused': this.hasFocus,
+          'select--clearable': this.clearable,
+          'select--disabled': this.disabled,
+          'select--multiple': this.multiple,
+          'select--has-tags': this.multiple && hasSelection,
+          'select--placeholder-visible': this.displayLabel === '',
+          'select--small': this.size === 'small',
+          'select--medium': this.size === 'medium',
+          'select--large': this.size === 'large',
+          'select--pill': this.pill,
+          'select--invalid': this.invalid,
+        }, onKeyDown: this.handleSelectAll, "onSix-dropdown-show": this.handleMenuShow, "onSix-dropdown-hide": this.handleMenuHide, filterPlaceholder: this.filterPlaceholder, filterDebounce: this.filterDebounce, filter: this.filter, asyncFilter: this.asyncFilter },
+        h("div", { slot: "trigger", ref: (el) => (this.box = el), id: this.inputId, class: {
+            select__box: true,
+            'select__box--line': this.line,
+            'select__box--autocomplete': this.autocomplete,
+          }, role: "combobox", "aria-labelledby": this.labelId, "aria-describedby": this.helpTextId, "aria-haspopup": "true", "aria-expanded": this.isOpen ? 'true' : 'false', tabIndex: this.disabled ? -1 : 0, onBlur: this.handleBlur, onFocus: this.handleFocus, onKeyDown: this.handleKeyDown },
+          h("span", { class: "select__label" }, this.displayTags.length ? (h("span", { part: "tags", class: "select__tags" }, this.displayTags)) : (this.displayLabel || this.placeholder)),
+          this.clearable && hasSelection && (h("six-icon-button", { exportparts: "base:clear-button", class: "select__clear", name: "clear", size: "small", onClick: this.handleClearClick, tabindex: "-1" })),
+          this.hasMenuItems() && (h("span", { part: "icon", class: "select__icon" },
+            h("six-icon", { size: "medium" }, "expand_more"))),
+          h("six-input", { ref: (el) => (this.input = el), class: {
+              select__input: true,
+              'select__hidden-select': !this.autocomplete,
+            }, "aria-hidden": "true", required: this.required, onInvalid: this.handleInvalid, onFocus: this.handleFocus, clearable: this.clearable, placeholder: this.placeholder, pill: this.pill, disabled: this.disabled, size: this.size, tabIndex: -1 })),
+        h("six-menu", { ref: (el) => (this.menu = el), part: "menu", class: {
+            select__menu: true,
+            'select__menu--filtered': this.filter || this.asyncFilter,
+            'select__menu--hidden': !this.hasMenuItems(),
+          }, "onSix-menu-item-selected": this.handleMenuSelect, items: this.options, virtualScroll: this.virtualScroll, "remove-box-shadow": true },
+          h("slot", { onSlotchange: this.handleSlotChange })))));
+  }
+  hasSelection() {
+    return this.multiple ? this.value.length > 0 : this.value !== '';
+  }
+  static get is() { return "six-select"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["six-select.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["six-select.css"]
+  }; }
+  static get properties() { return {
+    "multiple": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Set to true to enable multiselect."
+      },
+      "attribute": "multiple",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "maxTagsVisible": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The maximum number of tags to show when `multiple` is true. After the maximum, \"+n\" will be shown to indicate the\nnumber of additional items that are selected. Set to -1 to remove the limit."
+      },
+      "attribute": "max-tags-visible",
+      "reflect": false,
+      "defaultValue": "3"
+    },
+    "disabled": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Set to true to disable the select control."
+      },
+      "attribute": "disabled",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "name": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The select's name."
+      },
+      "attribute": "name",
+      "reflect": false,
+      "defaultValue": "''"
+    },
+    "placeholder": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The select's placeholder text."
+      },
+      "attribute": "placeholder",
+      "reflect": false,
+      "defaultValue": "''"
+    },
+    "filterPlaceholder": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The filter's placeholder text."
+      },
+      "attribute": "filter-placeholder",
+      "reflect": false
+    },
+    "filterDebounce": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The debounce for the filter callbacks."
+      },
+      "attribute": "filter-debounce",
+      "reflect": false,
+      "defaultValue": "DEFAULT_DEBOUNCE_FAST"
+    },
+    "size": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'small' | 'medium' | 'large'",
+        "resolved": "\"large\" | \"medium\" | \"small\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The select's size."
+      },
+      "attribute": "size",
+      "reflect": false,
+      "defaultValue": "'medium'"
+    },
+    "hoist": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Enable this option to prevent the panel from being clipped when the component is placed inside a container with\n`overflow: auto|scroll`."
+      },
+      "attribute": "hoist",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "value": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "string | string[]",
+        "resolved": "string | string[]",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The value of the control. This will be a string or an array depending on `multiple`."
+      },
+      "attribute": "value",
+      "reflect": false,
+      "defaultValue": "''"
+    },
+    "pill": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Set to true to draw a pill-style select with rounded edges."
+      },
+      "attribute": "pill",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "label": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The select's label. Alternatively, you can use the label slot."
+      },
+      "attribute": "label",
+      "reflect": false,
+      "defaultValue": "''"
+    },
+    "helpText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The select's help text. Alternatively, you can use the help-text slot."
+      },
+      "attribute": "help-text",
+      "reflect": false,
+      "defaultValue": "''"
+    },
+    "errorText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The select's error text. Alternatively, you can use the error-text slot."
+      },
+      "attribute": "error-text",
+      "reflect": false,
+      "defaultValue": "''"
+    },
+    "required": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The select's required attribute."
+      },
+      "attribute": "required",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "clearable": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Set to true to add a clear button when the select is populated."
+      },
+      "attribute": "clearable",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "invalid": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "This will be true when the control is in an invalid state. Validity is determined by the `required` prop."
+      },
+      "attribute": "invalid",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "line": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Set to render as line"
+      },
+      "attribute": "line",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "errorOnBlur": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Set to display the error text on blur and not when typing"
+      },
+      "attribute": "error-on-blur",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "filter": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Set to true to allow filtering for entries in the dropdown"
+      },
+      "attribute": "filter",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "asyncFilter": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Set to true to allow async filtering.\nWhen you enter something in the search field the component will only emit an event but not filter any elements itself.\nYou can then simply listen to the 'six-async-filter-fired' event to manage the shown menu-items yourself"
+      },
+      "attribute": "async-filter",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "autocomplete": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Set to true to turn the six-select into an autocomplete."
+      },
+      "attribute": "autocomplete",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "inputDebounce": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The debounce for when the input changes for autocompletes should be emitted"
+      },
+      "attribute": "input-debounce",
+      "reflect": false,
+      "defaultValue": "DEFAULT_DEBOUNCE_FAST"
+    },
+    "options": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "SixMenuItemData[] | null",
+        "resolved": "SixMenuItemData[]",
+        "references": {
+          "SixMenuItemData": {
+            "location": "import",
+            "path": "../six-menu/six-menu"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Set the options to be shown in the dropdown (alternative to setting the elements via html)"
+      },
+      "defaultValue": "null"
+    },
+    "virtualScroll": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Defines whether the menu list will be rendered virtually i.e. only the elements actually shown (and a couple around)\nare actually rendered in the DOM. If you use virtual scrolling pass the elements via prop instead of via slot."
+      },
+      "attribute": "virtual-scroll",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "defaultValue": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string | string[]",
+        "resolved": "string | string[]",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The default value the select will be reverted to when reset is executed"
+      },
+      "attribute": "default-value",
+      "reflect": false,
+      "defaultValue": "null"
+    }
+  }; }
+  static get states() { return {
+    "hasFocus": {},
+    "hasHelpTextSlot": {},
+    "hasErrorTextSlot": {},
+    "hasLabelSlot": {},
+    "isOpen": {},
+    "displayLabel": {},
+    "displayTags": {}
+  }; }
+  static get events() { return [{
+      "method": "sixChange",
+      "name": "six-select-change",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Emitted when the control's value changes."
+      },
+      "complexType": {
+        "original": "SixSelectChangePayload",
+        "resolved": "SixSelectChangePayload",
+        "references": {
+          "SixSelectChangePayload": {
+            "location": "local"
+          }
+        }
+      }
+    }, {
+      "method": "sixFocus",
+      "name": "six-select-focus",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Emitted when the control gains focus."
+      },
+      "complexType": {
+        "original": "EmptyPayload",
+        "resolved": "undefined",
+        "references": {
+          "EmptyPayload": {
+            "location": "import",
+            "path": "../../utils/types"
+          }
+        }
+      }
+    }, {
+      "method": "sixBlur",
+      "name": "six-select-blur",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Emitted when the control loses focus."
+      },
+      "complexType": {
+        "original": "EmptyPayload",
+        "resolved": "undefined",
+        "references": {
+          "EmptyPayload": {
+            "location": "import",
+            "path": "../../utils/types"
+          }
+        }
+      }
+    }]; }
+  static get methods() { return {
+    "reportValidity": {
+      "complexType": {
+        "signature": "() => Promise<boolean>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<boolean>"
+      },
+      "docs": {
+        "text": "Checks for validity and shows the browser's validation message if the control is invalid.",
+        "tags": []
+      }
+    },
+    "checkValidity": {
+      "complexType": {
+        "signature": "() => Promise<boolean>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<boolean>"
+      },
+      "docs": {
+        "text": "Checks for validity.",
+        "tags": []
+      }
+    },
+    "setCustomValidity": {
+      "complexType": {
+        "signature": "(message: string) => Promise<void>",
+        "parameters": [{
+            "tags": [],
+            "text": ""
+          }],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "Sets a custom validation message. If `message` is not empty, the field will be considered invalid.",
+        "tags": []
+      }
+    },
+    "reset": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "Resets the formcontrol",
+        "tags": []
+      }
+    }
+  }; }
+  static get elementRef() { return "host"; }
+  static get watchers() { return [{
+      "propName": "disabled",
+      "methodName": "handleDisabledChange"
+    }, {
+      "propName": "helpText",
+      "methodName": "handleLabelChange"
+    }, {
+      "propName": "errorText",
+      "methodName": "handleLabelChange"
+    }, {
+      "propName": "label",
+      "methodName": "handleLabelChange"
+    }, {
+      "propName": "multiple",
+      "methodName": "handleMultipleChange"
+    }, {
+      "propName": "value",
+      "methodName": "handleValueChange"
+    }]; }
+}