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

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

@@ -1,4 +1,4 @@
-import { Component, Element, Event, h, Method, Prop, State, Watch } from '@stencil/core';
+import { h } from '@stencil/core';
 import { getTextContent, hasSlot } from '../../utils/slot';
 import FormControl from '../../functional-components/form-control/form-control';
 import { EventListeners } from '../../utils/event-listeners';
@@ -41,69 +41,32 @@ export class SixSelect {
     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.filterPlaceholder = undefined;
     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;
+    this.defaultValue = undefined;
   }
   handleDisabledChange() {
     if (this.disabled && this.isOpen) {
@@ -188,7 +151,7 @@ export class SixSelect {
   }
   /** Resets the formcontrol */
   async reset() {
-    this.value = this.defaultValue;
+    this.clearValues();
     this.customErrorText = '';
     this.customValidation = false;
     this.input.setCustomValidity('');
@@ -213,11 +176,14 @@ export class SixSelect {
   hasMenuItems() {
     return this.getItems().length > 0;
   }
-  getValueAsArray() {
-    const values = Array.isArray(this.value) ? this.value : [this.value];
+  getValueAsStringArray() {
+    const values = this.getValueAsArray();
     // enforce that the values are converted to 'string' before the value is compared
     return values.map(String);
   }
+  getValueAsArray() {
+    return Array.isArray(this.value) ? this.value : [this.value];
+  }
   handleBlur() {
     this.hasFocus = false;
     this.sixBlur.emit();
@@ -301,17 +267,20 @@ export class SixSelect {
   }
   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];
+    if (this.multiple) {
+      if (this.value == null || this.value === '') {
+        this.value = [];
       }
-      else {
-        return item.value;
+      else if (!Array.isArray(this.value)) {
+        this.value = [this.value];
       }
-    };
-    this.value = getValue();
+      this.value = this.value.includes(item.value)
+        ? this.value.filter((v) => v !== item.value)
+        : [...this.value, item.value];
+    }
+    else {
+      this.value = item.value;
+    }
     this.syncItemsFromValue();
   }
   handleMenuShow(event) {
@@ -354,7 +323,7 @@ export class SixSelect {
   }
   syncItemsFromValue() {
     const items = this.getItems();
-    const value = this.getValueAsArray();
+    const value = this.getValueAsStringArray();
     // Sync checked states
     items.forEach((item) => (item.checked = value.includes(item.value)));
     // Sync display label
@@ -374,9 +343,7 @@ export class SixSelect {
         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));
+        this.displayTags.push(h("six-tag", { exportparts: "base:tag", type: "info", size: this.size }, "+", total - this.maxTagsVisible));
       }
     }
     else {
@@ -413,7 +380,7 @@ export class SixSelect {
     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))
+      ? this.getValueAsStringArray().filter((val) => checkedValues.includes(val))
       : checkedValues.length > 0
         ? checkedValues[0]
         : '';
@@ -424,682 +391,691 @@ export class SixSelect {
   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 })))));
+    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 !== '';
+    if (this.multiple) {
+      return Array.isArray(this.value) ? this.value.length > 0 : false;
+    }
+    return 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."
+  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"
       },
-      "attribute": "label",
-      "reflect": false,
-      "defaultValue": "''"
-    },
-    "helpText": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
+      "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"
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The select's help text. Alternatively, you can use the help-text slot."
+      "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"
       },
-      "attribute": "help-text",
-      "reflect": false,
-      "defaultValue": "''"
-    },
-    "errorText": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
+      "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": "''"
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The select's error text. Alternatively, you can use the error-text slot."
+      "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": "''"
       },
-      "attribute": "error-text",
-      "reflect": false,
-      "defaultValue": "''"
-    },
-    "required": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
+      "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
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The select's required attribute."
+      "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"
       },
-      "attribute": "required",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "clearable": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
+      "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'"
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Set to true to add a clear button when the select is populated."
+      "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"
       },
-      "attribute": "clearable",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "invalid": {
-      "type": "boolean",
-      "mutable": true,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
+      "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": "''"
       },
-      "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."
+      "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"
       },
-      "attribute": "invalid",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "line": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
+      "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": "''"
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Set to render as line"
+      "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": "''"
       },
-      "attribute": "line",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "errorOnBlur": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
+      "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": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Set to display the error text on blur and not when typing"
+      "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"
       },
-      "attribute": "error-on-blur",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "filter": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
+      "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"
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Set to true to allow filtering for entries in the dropdown"
+      "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"
       },
-      "attribute": "filter",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "asyncFilter": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
+      "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"
       },
-      "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"
+      "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"
       },
-      "attribute": "async-filter",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "autocomplete": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
+      "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"
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Set to true to turn the six-select into an autocomplete."
+      "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"
       },
-      "attribute": "autocomplete",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "inputDebounce": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
+      "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"
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The debounce for when the input changes for autocompletes should be emitted"
+      "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"
       },
-      "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"
+      "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"
+        },
+        "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"
       },
-      "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."
+      "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"
       },
-      "complexType": {
-        "original": "SixSelectChangePayload",
-        "resolved": "SixSelectChangePayload",
-        "references": {
-          "SixSelectChangePayload": {
-            "location": "local"
-          }
-        }
+      "defaultValue": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string | string[] | undefined",
+          "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
       }
-    }, {
-      "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"
+    };
+  }
+  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",
+              "path": "/home/runner/work/six-webcomponents/six-webcomponents/libraries/ui-library/src/components/six-select/six-select.tsx"
+            }
           }
         }
-      }
-    }, {
-      "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"
+      }, {
+        "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"
+            }
           }
         }
-      }
-    }]; }
-  static get methods() { return {
-    "reportValidity": {
-      "complexType": {
-        "signature": "() => Promise<boolean>",
-        "parameters": [],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
+      }, {
+        "method": "sixBlur",
+        "name": "six-select-blur",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitted when the control loses focus."
         },
-        "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"
+        "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>"
         },
-        "return": "Promise<boolean>"
+        "docs": {
+          "text": "Checks for validity and shows the browser's validation message if the control is invalid.",
+          "tags": []
+        }
       },
-      "docs": {
-        "text": "Checks for validity.",
-        "tags": []
-      }
-    },
-    "setCustomValidity": {
-      "complexType": {
-        "signature": "(message: string) => Promise<void>",
-        "parameters": [{
-            "tags": [],
-            "text": ""
-          }],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
+      "checkValidity": {
+        "complexType": {
+          "signature": "() => Promise<boolean>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<boolean>"
         },
-        "return": "Promise<void>"
+        "docs": {
+          "text": "Checks for validity.",
+          "tags": []
+        }
       },
-      "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"
-          }
+      "setCustomValidity": {
+        "complexType": {
+          "signature": "(message: string) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
         },
-        "return": "Promise<void>"
+        "docs": {
+          "text": "Sets a custom validation message. If `message` is not empty, the field will be considered invalid.",
+          "tags": []
+        }
       },
-      "docs": {
-        "text": "Resets the formcontrol",
-        "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"
-    }]; }
+  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"
+      }];
+  }
 }
+//# sourceMappingURL=six-select.js.map