@nanoporetech-digital/components 7.9.2 → 8.0.0-alpha.0

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

@@ -1,19 +1,18 @@
 /*!
- * Web Components for Nanopore digital Web Apps
+ * Custom elements for Nanopore-Digital Web applications
  */
 import { Build, Host, } from "@stencil/core";
 import { h } from "../../utils/renderer";
 import { getActiveElement } from "../../utils/active-element";
 import { closestElement } from "../../utils/dom";
-import { createColorClasses } from "../../utils/theme";
-import { debounce, debounceEvent } from "../../utils/throttle";
+import { debounceEvent } from "../../utils/throttle";
 import { FormControl, FormControlWrap } from "../form-control/form-control";
 let selectIds = 0;
 /**
- * The select component is a wrapper to the HTML select element with custom styling and additional functionality.
- * It accepts most of the same properties as the HTML [select](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select).
- * It's multi selection functionality is vastly improved from the native solution. It allows for the control of
- * value order through drag and drop or changing the insertion point with arrow keys. It also can allow for user defined values.
+ * Selects allow users to choose items from a menu of options.
+ *
+ * @status stable
+ * @version 1.0.0
  *
  * @slot start - suitable for inline action buttons or icons that may add extra contextual information
  * @slot end - suitable for inline action buttons or icons that may add extra contextual information
@@ -66,13 +65,11 @@ export class Select {
         this._datalist = ele;
         this.setDataListOpts();
     }
-    constructor() {
-        this.showInlineValidation = debounce(this.showInlineValidation, 50);
-    }
     currInsertIndex = -1;
     showErrorMsg = false;
     errorMessage = '';
     hasFocus = false;
+    hasOpened = false;
     hasLabelSlot = false;
     hasHelperSlot = false;
     hasHelperEndSlot = false;
@@ -85,7 +82,7 @@ export class Select {
     get invalid() {
         return this._invalid;
     }
-    _invalid = false;
+    _invalid = null;
     /**
      * Current validation message - if any. @readonly
      */
@@ -94,11 +91,6 @@ export class Select {
             return '';
         return this.nativeSelect.validationMessage;
     }
-    /**
-     * The color to use from your application's color palette.
-     * Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
-     */
-    color;
     /**
      * This Boolean attribute lets you specify that a form control should have select focus when the page loads.
      */
@@ -116,10 +108,16 @@ export class Select {
      * Whether to show validation errors underneath input
      */
     showInlineError = true;
+    _label = '';
     /**
-     * String to place within a label element. Alternatively use the 'label' slot
+     * String to place within a label element. Alternatively you may use a label slot.
      */
-    label;
+    get label() {
+        return this.required && !this._label.endsWith('*') ? this._label + ' *' : this._label;
+    }
+    set label(value) {
+        this._label = value;
+    }
     /**
      * Visually hide the label - but make it accessible.
      */
@@ -168,6 +166,8 @@ export class Select {
     readonly = false;
     /**
      * If `true`, the user must fill in a value before submitting a form.
+     * By default, setting this will also add an asterisk to the label.
+     * You can disable this by using the `label` slot instead.
      */
     required = false;
     /**
@@ -203,7 +203,7 @@ export class Select {
         }
         if (typeof val === 'string') {
             if (this.multiple)
-                this._value = val.split(',');
+                this._value = val.split(',').map((v) => v.trim());
             else
                 this._value = val;
         }
@@ -215,6 +215,22 @@ export class Select {
         }
     }
     _value;
+    /**
+     * Update the native select element when the value changes
+     */
+    valueChanged() {
+        this.customValidate();
+        if (this.onInit) {
+            if (this.multiple) {
+                this.currInsertIndex = this.value.length - 1;
+            }
+            return;
+        }
+        requestAnimationFrame(() => {
+            this.shouldValidate();
+            this.nanoChange.emit({ value: this.value });
+        });
+    }
     /**
      * You can set options via js as an array of strings: `domElement.options = ['option 1', 'option 2']` or
      * objects `domElement.options = [{label: 'option 1', value: 'opt-1'}]`. See `nano-option` docs for all available properties.
@@ -244,7 +260,7 @@ export class Select {
     /**
      * If `true`, a clear icon will appear in the select when there is a value. Clicking it clears the select.
      */
-    clearSelect = false;
+    clearable = false;
     /**
      * Hide the native select element and cover with a value 'mask'.
      * Enables a fluid nano-select width upon value change (if required). Doesn't work with multiple="true".
@@ -267,21 +283,6 @@ export class Select {
             return;
         this.showInlineValidation();
     }
-    /**
-     * Update the native select element when the value changes
-     */
-    valueChanged() {
-        this.customValidate();
-        if (this.onInit) {
-            if (this.multiple)
-                this.currInsertIndex = this.value.length - 1;
-            return;
-        }
-        requestAnimationFrame(() => {
-            this.shouldValidate();
-            this.nanoChange.emit({ value: this.value });
-        });
-    }
     /** nano-dropdown config options you can pass to the nested dropdown component */
     dropDownConfig = {};
     setDataListOpts() {
@@ -290,6 +291,7 @@ export class Select {
         this.datalist.input = this.inputCtrl;
         const currDWConfig = this.datalist.dropDownConfig || {};
         this.datalist.dropDownConfig = {
+            distance: 10,
             ...currDWConfig,
             ...this.dropDownConfig,
             tetherTo: this.selectWrap,
@@ -467,8 +469,6 @@ export class Select {
         this.inputSearchVal = '';
     };
     removeValue = (toFind) => {
-        if (this.readonly || this.disabled)
-            return;
         if (!this.multiple || !this.value.length)
             return;
         if (!toFind)
@@ -481,7 +481,7 @@ export class Select {
         this.setFocus();
     };
     slotChangeObserver() {
-        if (!window['MutationObserver'])
+        if (Build.isServer)
             return;
         const mo = (this.mo = new MutationObserver(() => this.processSlottedContent()));
         mo.observe(this.el, { childList: true, subtree: true });
@@ -516,19 +516,11 @@ export class Select {
             return;
         this.clearSelectValue();
     }
-    handleBlur(e) {
+    handleBlur() {
         if (!this.hasFocus)
             return;
-        const kev = e;
-        let target;
         requestAnimationFrame(() => {
-            if (kev.key) {
-                if (kev.key !== 'Tab')
-                    return;
-                target = getActiveElement();
-            }
-            else
-                target = e.target;
+            const target = getActiveElement();
             if (closestElement(this.el.tagName.toLowerCase(), target) !== this.el) {
                 this.onBlur();
             }
@@ -599,7 +591,7 @@ export class Select {
         this.nanoFocus.emit();
     };
     clearSelectValue = (ev) => {
-        if (this.clearSelect && !this.readonly && !this.disabled && ev) {
+        if (this.clearable && !this.readonly && !this.disabled && ev) {
             ev.preventDefault();
             ev.stopPropagation();
         }
@@ -627,7 +619,7 @@ export class Select {
     };
     onDragLeave = (ev) => {
         const ele = ev.target;
-        const spanVal = ele.dataset && ele.dataset.value ? ele.dataset.value : null;
+        const spanVal = ele.dataset?.value || null;
         if (!spanVal ||
             this.dragVal === spanVal ||
             !this.value.includes(this.dragVal)) {
@@ -636,7 +628,7 @@ export class Select {
         }
         const to = this.value.indexOf(spanVal);
         const from = this.value.indexOf(this.dragVal);
-        const tmpArr = this.value;
+        const tmpArr = [...this.value];
         const tmpVal = tmpArr[to];
         tmpArr[to] = tmpArr[from];
         tmpArr[from] = tmpVal;
@@ -702,31 +694,37 @@ export class Select {
             helperEndId,
             hasValue: !!this.value.length || !!this.inputSearchVal.length,
             controlId: this.selectId,
+            alwaysShowPlaceholder: false,
         };
         const controlOptions = (({ readonly, disabled }) => ({
             readonly,
             disabled,
-            clearControl: this.clearSelect,
+            clearControl: this.clearable,
         }))(this);
-        return (h(Host, { key: 'a8b87fdaaa377377dc9a9c3a6b4937ae854f43bb', type: this.multiple ? 'select-multiple' : 'select-one', "aria-disabled": this.disabled ? 'true' : null, class: {
-                ...createColorClasses(this.color),
+        return (h(Host, { key: 'dd8d62d6064ca5bbca75c9b5b308ab2c8140c778', type: this.multiple ? 'select-multiple' : 'select-one', "aria-disabled": this.disabled ? 'true' : null, class: {
                 'has-value': !!this.value.length || !!this.inputSearchVal.length,
                 'has-focus': this.hasFocus,
-                'is-invalid': this.invalid,
-                'has-label': this.label !== null && !this.floatLabel,
-                'has-float-label': this.label !== null && this.floatLabel,
-                rtl: this.rtl,
-                'has-multiple': this.multiple,
-                'has-clr-btn': this.clearSelect,
-                masked: this.mask,
+                'is-invalid': this._invalid === true,
+                'is-valid': this._invalid === false,
                 'nano-select': true,
-            } }, h(FormControlWrap, { key: '6bb32ca83cc5d25f65510f938dbe79b43fa5c108', ...wrapOptions }, h(FormControl, { key: 'c66fc73cb316399ecd7cf26eb1f34d30b40b4692', ...controlOptions, onClearText: this.clearSelectValue, control: this.el, ref: (el) => (this.selectWrap = el), endValueSlot: h("slot", { name: "down-arrow" }, h("nano-icon", { slot: "value-end", name: "light/chevron-down" })) }, this.multiple && (h("div", { key: '5b26becd4bea50f2bbbd6545490517520bf54bf2', class: "select__multi-wrap select" }, this.multipleValues(labelId, moreId, helperEndId))), !this.multiple && [
-            this.mask && (h("div", { key: 'b01c76ac8e10f63b7bba076799fb70583f8f0b8f', class: "select__mask" }, this.getLabel(this.value))),
-            h("input", { key: 'f030e89b72b594dde16b701c9ca07c65542162b2', id: this.selectId, class: "select__native-input", ref: (input) => (this.inputCtrl = input), "aria-labelledby": labelId + ' ' + moreId + ' ' + helperEndId, disabled: this.disabled, form: this.form, placeholder: this.placeholder, readonly: true, required: this.required, value: this.getLabel(this.value), onFocus: this.onFocus }),
-        ])), h("nano-datalist", { key: '74dbc317d620eb13e4b3b82559fb8f19f6b3bda5', disabled: this.disabled || this.readonly, onNanoOptionsUpdated: this.setOptions, ref: (el) => (this.datalist = el), selected: this.valArray, type: this.multiple ? 'selctMulti' : 'select', onNanoSelect: this.setValue, onNanoDeselect: (e) => {
+            } }, h(FormControlWrap, { key: '811e296732a794fe171b99ab8831fb8a9f014c43', ...wrapOptions, class: {
+                'has-error': !!this.errorMessage &&
+                    this.showInlineError &&
+                    this._invalid === true,
+                'has-helper': this.hasHelperSlot,
+                'is-open': this.hasOpened,
+                masked: this.mask,
+            } }, h(FormControl, { key: '667499839b71ae46a1e8b8ee410e20334518a212', ...controlOptions, ref: (el) => (this.selectWrap = el), onClearText: this.clearSelectValue, control: this.el, endValueSlot: h("slot", { name: "down-arrow" }, h("nano-icon", { class: "select__down-arrow", name: "light/chevron-down" })), showInlineError: this.showInlineError }, this.multiple && (h("div", { key: '3d4d2f085444d08bad5ea6893779d62eec37e4c1', class: "select__multi-wrap select" }, this.multipleValues(labelId, moreId, helperEndId))), !this.multiple && [
+            this.mask && (h("div", { key: 'e7354f6e04484f1f56f0a8adc1a83a1fd9217230', class: "select__mask" }, this.getLabel(this.value))),
+            h("input", { key: 'c751e574ade62cf7ec18b61b54f79e7066652236', ref: (input) => (this.inputCtrl = input), id: this.selectId, class: "select__native-input", "aria-labelledby": labelId + ' ' + moreId + ' ' + helperEndId, disabled: this.disabled, form: this.form, placeholder: this.placeholder, readOnly: true, required: this.required, value: this.getLabel(this.value), onFocus: this.onFocus }),
+        ])), !this.readonly && !this.disabled && (h("nano-datalist", { key: '800b2ba2ba4b397bf23e1e1f872dacf82fbac2c6', ref: (el) => (this.datalist = el), selected: this.valArray, type: this.multiple ? 'selectMulti' : 'select', options: this._options.length ? this._options : undefined, onNanoDeselect: (e) => {
                 e.preventDefault();
                 this.removeValue(e.detail.value);
-            }, options: this._options.length ? this._options : undefined }, this.allowCustomValues && this.multiple && !!this.inputSearchVal && (h("nano-option", { key: '3aba3b3160c0ab202782d54fbdb5c8fba8575319', slot: "list-top", value: this.inputSearchVal, selected: false, label: this.inputSearchVal, onNanoSelect: () => this.inputCtrl.focus() }, h("span", { key: 'fee57aeb5bcce9ad2c30d4e208c11cf7aaebabc6', slot: "check-icon" }), "Add '", this.inputSearchVal, "'")), h("slot", { key: '922baf9809f37affb5c956f74b85bf727c4e40f4' })), h("select", { key: '9cdfe75682e7c7f4e9cd56123f07f8c195d2d47c', id: this.selectId + '-hidden', class: "select__native-ctrl", ref: (select) => (this.nativeSelect = select), "aria-labelledby": labelId + ' ' + moreId + ' ' + helperEndId, disabled: this.disabled, form: this.form, multiple: this.multiple, name: this.name, required: this.required, onInvalid: this.handleInvalid }, this.allowCustomValues &&
+            }, onNanoOptionsUpdated: this.setOptions, onNanoSelect: this.setValue,
+            // @ts-expect-error - this bubbles from the nano-dropdown
+            onNanoShow: () => (this.hasOpened = true), onNanoHide: () => (this.hasOpened = false) }, this.allowCustomValues &&
+            this.multiple &&
+            !!this.inputSearchVal && (h("nano-option", { key: '93149856e07a8b0be5b2ba6d7145c1ed37b7c876', slot: "list-top", value: this.inputSearchVal, selected: false, label: this.inputSearchVal, onNanoSelect: () => this.inputCtrl.focus() }, h("span", { key: '9214159801d2b7f2a8bc2251a964d60980766dd6', slot: "check-icon" }), "Add '", this.inputSearchVal, "'")), h("slot", { key: '742e550ebb274935ea61f0ae01d34e696058b146' }))), h("select", { key: 'e56355bad1e009cb1a46ef727e8e16894c38d325', id: this.selectId + '-hidden', class: "select__native-ctrl", ref: (select) => (this.nativeSelect = select), "aria-labelledby": labelId + ' ' + moreId + ' ' + helperEndId, disabled: this.disabled, form: this.form, multiple: this.multiple, name: this.name, required: this.required, onInvalid: this.handleInvalid }, this.allowCustomValues &&
             this.valArray.map((val) => {
                 return (h("option", { value: val, selected: true }, val));
             }), !this.allowCustomValues &&
@@ -735,7 +733,7 @@ export class Select {
             }))));
     }
     multipleValues(labelId, moreId, helperEndId) {
-        const input = (h("input", { class: "select__multi-input", id: this.selectId, ref: (input) => (this.inputCtrl = input), readonly: this.readonly, disabled: this.disabled, autoFocus: this.autofocus, autocomplete: "off", onKeyDown: this.handleDocumentKeyDown, onInput: this.onMultiInput, value: this.inputSearchVal, onTouchStart: this.onClick, onMouseDown: this.onClick, onFocus: this.onFocus, placeholder: this.placeholder && !this.value.length ? this.placeholder : '', "aria-labelledby": labelId + ' ' + moreId + ' ' + helperEndId }));
+        const input = (h("input", { class: "select__multi-input", id: this.selectId, ref: (input) => (this.inputCtrl = input), readOnly: this.readonly, disabled: this.disabled, autoFocus: this.autofocus, autocomplete: "off", onKeyDown: this.handleDocumentKeyDown, onInput: this.onMultiInput, value: this.inputSearchVal, onTouchStart: this.onClick, onMouseDown: this.onClick, onFocus: this.onFocus, placeholder: this.placeholder && !this.value.length ? this.placeholder : '', "aria-labelledby": labelId + ' ' + moreId + ' ' + helperEndId }));
         if (!this.value.length)
             return input;
         const toReturn = [];
@@ -744,16 +742,12 @@ export class Select {
                 return;
             let valueTag;
             if (i === this._maxValuesVisible) {
-                valueTag = (h("span", { "data-value": val, class: "select__multi-value" }, h("span", null, "+", this.value.length - this._maxValuesVisible)));
+                valueTag = (h("nano-tag", { "data-value": val, key: val }, "+", this.value.length - this._maxValuesVisible));
             }
             else {
-                valueTag = (h("span", { onDragStart: this.onDragStart, onDragLeave: this.onDragLeave, onDragEnd: this.onDragEnd, onDragOver: (e) => e.preventDefault(), draggable: true, "data-value": val, ref: (span) => this.valueItems.push(span), class: "select__multi-value select__multi-value--closable" }, this.valueTagTemplate ? (h("span", { innerHTML: this.valueTagTemplate
+                valueTag = (h("nano-tag", { key: val, ref: (span) => this.valueItems.push(span), onDragStart: this.onDragStart, onDragLeave: this.onDragLeave, onDragEnd: this.onDragEnd, onDragOver: (e) => e.preventDefault(), onNanoClose: () => this.removeValue(val), draggable: true, tabIndex: -1, "data-value": val, closable: true }, this.valueTagTemplate ? (h("span", { innerHTML: this.valueTagTemplate
                         ? this.valueTagTemplate(...this.getOptionWithValue(val))
-                        : undefined })) : (h("span", null, this.getLabel(val))), h("button", { class: "select__multi-value-remove", type: "button", tabindex: "-1", onTouchEnd: () => {
-                        this.removeValue(val);
-                    }, onMouseUp: () => {
-                        this.removeValue(val);
-                    } }, h("nano-icon", { name: "light/xmark" }))));
+                        : undefined })) : (h("span", null, this.getLabel(val)))));
             }
             if (i === 0 && this.currInsertIndex < 0) {
                 toReturn.push(input, valueTag);
@@ -782,11 +776,12 @@ export class Select {
     static get properties() {
         return {
             "invalid": {
-                "type": "boolean",
+                "type": "any",
+                "attribute": "invalid",
                 "mutable": false,
                 "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
+                    "original": "any",
+                    "resolved": "any",
                     "references": {}
                 },
                 "required": false,
@@ -797,12 +792,12 @@ export class Select {
                 },
                 "getter": true,
                 "setter": false,
-                "attribute": "invalid",
                 "reflect": true,
-                "defaultValue": "false"
+                "defaultValue": "null"
             },
             "validityMessage": {
                 "type": "string",
+                "attribute": "validity-message",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -820,36 +815,11 @@ export class Select {
                 },
                 "getter": true,
                 "setter": false,
-                "attribute": "validity-message",
-                "reflect": false
-            },
-            "color": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "Color",
-                    "resolved": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\"",
-                    "references": {
-                        "Color": {
-                            "location": "import",
-                            "path": "../../types/shared",
-                            "id": "src/types/shared.ts::Color"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`."
-                },
-                "getter": false,
-                "setter": false,
-                "attribute": "color",
                 "reflect": false
             },
             "autofocus": {
                 "type": "boolean",
+                "attribute": "autofocus",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -864,12 +834,12 @@ export class Select {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "autofocus",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "disabled": {
                 "type": "boolean",
+                "attribute": "disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -884,12 +854,12 @@ export class Select {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "disabled",
                 "reflect": true,
                 "defaultValue": "false"
             },
             "validateOn": {
                 "type": "string",
+                "attribute": "validate-on",
                 "mutable": true,
                 "complexType": {
                     "original": "'dirty' | 'submit' | 'submitThenDirty'",
@@ -907,12 +877,12 @@ export class Select {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "validate-on",
                 "reflect": false,
                 "defaultValue": "'submitThenDirty'"
             },
             "showInlineError": {
                 "type": "boolean",
+                "attribute": "show-inline-error",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -927,31 +897,31 @@ export class Select {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "show-inline-error",
                 "reflect": true,
                 "defaultValue": "true"
             },
             "label": {
                 "type": "string",
-                "mutable": false,
+                "attribute": "label",
+                "mutable": true,
                 "complexType": {
                     "original": "string",
                     "resolved": "string",
                     "references": {}
                 },
-                "required": true,
+                "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "String to place within a label element. Alternatively use the 'label' slot"
+                    "text": "String to place within a label element. Alternatively you may use a label slot."
                 },
-                "getter": false,
-                "setter": false,
-                "attribute": "label",
+                "getter": true,
+                "setter": true,
                 "reflect": false
             },
             "hideLabel": {
                 "type": "boolean",
+                "attribute": "hide-label",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -966,12 +936,12 @@ export class Select {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "hide-label",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "floatLabel": {
                 "type": "boolean",
+                "attribute": "float-label",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -986,12 +956,12 @@ export class Select {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "float-label",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "multiple": {
                 "type": "boolean",
+                "attribute": "multiple",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -1006,12 +976,12 @@ export class Select {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "multiple",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "maxValuesVisible": {
                 "type": "any",
+                "attribute": "max-values-visible",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean | number",
@@ -1026,12 +996,12 @@ export class Select {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "max-values-visible",
                 "reflect": false,
                 "defaultValue": "3"
             },
             "name": {
                 "type": "string",
+                "attribute": "name",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -1046,12 +1016,12 @@ export class Select {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "name",
                 "reflect": false,
                 "defaultValue": "this.selectId + '-name'"
             },
             "placeholder": {
                 "type": "string",
+                "attribute": "placeholder",
                 "mutable": false,
                 "complexType": {
                     "original": "string | null",
@@ -1066,11 +1036,11 @@ export class Select {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "placeholder",
                 "reflect": false
             },
             "readonly": {
                 "type": "boolean",
+                "attribute": "readonly",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -1085,12 +1055,12 @@ export class Select {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "readonly",
                 "reflect": true,
                 "defaultValue": "false"
             },
             "required": {
                 "type": "boolean",
+                "attribute": "required",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -1101,16 +1071,16 @@ export class Select {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "If `true`, the user must fill in a value before submitting a form."
+                    "text": "If `true`, the user must fill in a value before submitting a form.\nBy default, setting this will also add an asterisk to the label.\nYou can disable this by using the `label` slot instead."
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "required",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "size": {
                 "type": "number",
+                "attribute": "size",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -1125,11 +1095,11 @@ export class Select {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "size",
                 "reflect": false
             },
             "max": {
                 "type": "number",
+                "attribute": "max",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -1144,11 +1114,11 @@ export class Select {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "max",
                 "reflect": false
             },
             "min": {
                 "type": "number",
+                "attribute": "min",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -1163,11 +1133,11 @@ export class Select {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "min",
                 "reflect": false
             },
             "form": {
                 "type": "string",
+                "attribute": "form",
                 "mutable": false,
                 "complexType": {
                     "original": "string | null",
@@ -1182,11 +1152,11 @@ export class Select {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "form",
                 "reflect": false
             },
             "allowCustomValues": {
                 "type": "boolean",
+                "attribute": "allow-custom-values",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -1201,12 +1171,12 @@ export class Select {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "allow-custom-values",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "value": {
                 "type": "string",
+                "attribute": "value",
                 "mutable": false,
                 "complexType": {
                     "original": "string | string[]",
@@ -1221,11 +1191,11 @@ export class Select {
                 },
                 "getter": true,
                 "setter": true,
-                "attribute": "value",
                 "reflect": false
             },
             "options": {
                 "type": "unknown",
+                "attribute": "options",
                 "mutable": false,
                 "complexType": {
                     "original": "Array<OptionInterface | string>",
@@ -1251,8 +1221,9 @@ export class Select {
                 "getter": true,
                 "setter": true
             },
-            "clearSelect": {
+            "clearable": {
                 "type": "boolean",
+                "attribute": "clearable",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -1267,12 +1238,12 @@ export class Select {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "clear-select",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "mask": {
                 "type": "boolean",
+                "attribute": "mask",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -1287,12 +1258,12 @@ export class Select {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "mask",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "debounce": {
                 "type": "number",
+                "attribute": "debounce",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -1307,12 +1278,12 @@ export class Select {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "debounce",
                 "reflect": false,
                 "defaultValue": "0"
             },
             "dropDownConfig": {
                 "type": "unknown",
+                "attribute": "drop-down-config",
                 "mutable": false,
                 "complexType": {
                     "original": "Partial<DropdownInterface>",
@@ -1341,6 +1312,7 @@ export class Select {
             },
             "valueTagTemplate": {
                 "type": "unknown",
+                "attribute": "value-tag-template",
                 "mutable": false,
                 "complexType": {
                     "original": "(option: OptionInterface, index: number) => string",
@@ -1379,6 +1351,7 @@ export class Select {
             "showErrorMsg": {},
             "errorMessage": {},
             "hasFocus": {},
+            "hasOpened": {},
             "hasLabelSlot": {},
             "hasHelperSlot": {},
             "hasHelperEndSlot": {},
@@ -1625,6 +1598,9 @@ export class Select {
         return [{
                 "propName": "maxValuesVisible",
                 "methodName": "watchMaxValuesVisible"
+            }, {
+                "propName": "value",
+                "methodName": "valueChanged"
             }, {
                 "propName": "debounce",
                 "methodName": "debounceChanged"
@@ -1643,9 +1619,6 @@ export class Select {
             }, {
                 "propName": "readonly",
                 "methodName": "shouldValidate"
-            }, {
-                "propName": "value",
-                "methodName": "valueChanged"
             }, {
                 "propName": "dropDownConfig",
                 "methodName": "setDataListOpts"
@@ -1673,4 +1646,3 @@ export class Select {
             }];
     }
 }
-//# sourceMappingURL=select.js.map