@six-group/ui-library 0.0.0-insider.c4e8588 → 0.0.0-insider.c8fa9a3

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

@@ -1,9 +1,10 @@
 import { h } from "@stencil/core";
-import { getTextContent, hasSlot } from "../../utils/slot";
+import { getSlot, 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";
 import { getLanguage } from "../../utils/error-messages";
+import { convertToValidArrayValue, convertToValidValue, valueEquals } from "./util";
 let id = 0;
 /**
  * @since 1.0
@@ -35,6 +36,68 @@ export class SixSelect {
         this.eventListeners = new EventListeners();
         this.activeItemIndex = -1;
         this.resizeObserver = new ResizeObserver(() => this.updateDisplayedValues());
+        this.hasFocus = false;
+        this.hasHelpTextSlot = false;
+        this.hasLabelSlot = false;
+        this.hasErrorTextSlot = false;
+        this.isOpen = false;
+        this.displayedValues = [];
+        /** Menu items shown in the selection container.  */
+        this.selectionContainerItems = [];
+        /** Set to true to enable multiselect. */
+        this.multiple = false;
+        /** Enables the select all button. */
+        this.selectAllButton = false;
+        /** 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 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 help text. Alternatively, you can use the help-text slot. */
+        this.helpText = '';
+        /** Set to true to show an asterisk beneath the label. */
+        this.required = false;
+        /** Set to true to add a clear button when the select is populated. */
+        this.clearable = false;
+        /** The label text. */
+        this.label = '';
+        /** The error message shown, if `invalid` is set to true.  */
+        this.errorText = '';
+        /** If this property is set to true and an error message is provided by `errorText`, the error message is displayed.  */
+        this.invalid = false;
+        /** Set to render as line */
+        this.line = 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;
         this.handleBlur = () => {
             this.hasFocus = false;
             this.sixBlur.emit();
@@ -47,7 +110,8 @@ export class SixSelect {
             var _a;
             event.stopPropagation();
             await this.clearValues();
-            await ((_a = this.dropdown) === null || _a === void 0 ? void 0 : _a.hide());
+            await ((_a = this.dropdown) === null || _a === void 0 ? void 0 : _a.show());
+            await this.setFocus();
             this.sixChange.emit({ value: this.value, isSelected: true });
         };
         this.handleKeyDown = (event) => {
@@ -138,12 +202,12 @@ export class SixSelect {
                 return;
             }
             this.activeItemIndex = -1;
-            // reset display style of main items
-            const mainItems = this.getItems();
-            mainItems.forEach((item) => (item.style.display = 'unset'));
-            // show selected menu items in the selection container and hide them in the main container
-            const checkedItems = getCheckedItems(this.getValueAsArray(), mainItems);
             if (!this.virtualScroll && this.multiple) {
+                // reset display style of main items
+                const mainItems = this.getItems();
+                mainItems.forEach((item) => (item.style.display = 'unset'));
+                // show selected menu items in the selection container and hide them in the main container
+                const checkedItems = getCheckedItems(convertToValidArrayValue(this.value), mainItems);
                 checkedItems.forEach((i) => (i.style.display = 'none'));
                 this.selectionContainerItems = checkedItems.map((item) => {
                     return (h("six-menu-item", { key: item.value, checked: true, value: item.value, checkType: this.multiple ? 'checkbox' : 'check', onClick: (event) => {
@@ -156,13 +220,16 @@ export class SixSelect {
                                 this.syncValueFromItems();
                                 this.sixChange.emit({ value: this.value, isSelected: true });
                             }
-                        } }, this.getItemLabel(item)));
+                        } }, this.getSlottedItem(item, 'prefix'), this.getItemLabel(item), this.getSlottedItem(item, 'suffix')));
                 });
             }
             this.isOpen = true;
         };
         this.handleMenuHide = () => {
             this.isOpen = false;
+            if (this.multiple) {
+                this.handleBlur();
+            }
         };
         this.handleSlotChange = () => {
             this.hasHelpTextSlot = hasSlot(this.host, 'help-text');
@@ -170,40 +237,6 @@ export class SixSelect {
             this.hasErrorTextSlot = hasSlot(this.host, 'error-text');
             this.syncItemsFromValue();
         };
-        this.hasFocus = false;
-        this.hasHelpTextSlot = false;
-        this.hasLabelSlot = false;
-        this.hasErrorTextSlot = false;
-        this.isOpen = false;
-        this.displayedValues = [];
-        this.selectionContainerItems = [];
-        this.multiple = false;
-        this.selectAllButton = false;
-        this.selectAllText = undefined;
-        this.maxTagsVisible = 3;
-        this.disabled = false;
-        this.name = '';
-        this.placeholder = '';
-        this.filterPlaceholder = undefined;
-        this.filterDebounce = undefined;
-        this.size = 'medium';
-        this.hoist = false;
-        this.value = '';
-        this.pill = false;
-        this.helpText = '';
-        this.required = false;
-        this.clearable = false;
-        this.label = '';
-        this.errorText = '';
-        this.errorTextCount = undefined;
-        this.invalid = false;
-        this.line = false;
-        this.filter = false;
-        this.asyncFilter = false;
-        this.autocomplete = false;
-        this.inputDebounce = DEFAULT_DEBOUNCE_FAST;
-        this.options = null;
-        this.virtualScroll = false;
     }
     handleDisabledChange() {
         var _a;
@@ -215,44 +248,52 @@ export class SixSelect {
         this.handleSlotChange();
     }
     handleMultipleChange() {
-        // Cast to array | string based on `this.multiple`
-        const value = this.getValueAsArray();
-        this.value = this.multiple ? value : value[0] || '';
+        this.value = convertToValidValue(this.value, this.multiple);
         this.syncItemsFromValue();
     }
     async handleValueChange() {
-        if (this.multiple && !Array.isArray(this.value)) {
-            this.value = [];
-        }
-        if (!this.multiple && typeof this.value !== 'string') {
-            this.value = '';
+        const newValue = convertToValidValue(this.value, this.multiple);
+        if (!valueEquals(this.value, newValue)) {
+            this.value = newValue;
         }
         await this.syncItemsFromValue();
     }
     connectedCallback() {
+        var _a;
         if (this.virtualScroll && this.options === null) {
             console.error('Options must be defined when using virtual scrolling');
         }
-        this.init();
+        (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.addEventListener('slotchange', this.handleSlotChange);
+        this.eventListeners.forward('six-select-change', 'change', this.host);
+        this.eventListeners.forward('six-select-blur', 'blur', this.host);
+        this.eventListeners.forward('six-select-focus', 'focus', this.host);
+        if (this.displayValuesContainer) {
+            this.resizeObserver.observe(this.displayValuesContainer);
+        }
     }
     componentWillLoad() {
+        this.value = convertToValidValue(this.value, this.multiple);
         this.handleSlotChange();
-        if (this.multiple && this.value != null) {
-            this.value = this.getValueAsArray();
-        }
     }
     componentDidLoad() {
-        this.init();
+        if (this.displayValuesContainer) {
+            this.resizeObserver.observe(this.displayValuesContainer);
+        }
         // We need to do an initial sync after the component has rendered, so this will suppress the re-render warning
         requestAnimationFrame(() => this.syncItemsFromValue());
         if (this.autocomplete && this.autocompleteInput != null) {
             const autocompleteInput = this.autocompleteInput;
             this.eventListeners.add(autocompleteInput, 'six-input-input', debounce((event) => {
+                var _a;
                 this.value = autocompleteInput.value;
                 this.sixChange.emit({ value: this.value, isSelected: false });
                 event.stopPropagation();
+                if (this.virtualScroll || this.value.length > 0) {
+                    (_a = this.dropdown) === null || _a === void 0 ? void 0 : _a.show();
+                }
             }, this.inputDebounce));
-            autocompleteInput.value = Array.isArray(this.value) ? this.value.join(',') : this.value;
+            const selectedLabel = this.displayedValues.join(', ');
+            autocompleteInput.value = selectedLabel;
         }
     }
     disconnectedCallback() {
@@ -267,16 +308,6 @@ export class SixSelect {
         this.hasFocus = true;
         (_a = this.box) === null || _a === void 0 ? void 0 : _a.focus(options);
     }
-    init() {
-        var _a;
-        (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.addEventListener('slotchange', this.handleSlotChange);
-        this.eventListeners.forward('six-select-change', 'change', this.host);
-        this.eventListeners.forward('six-select-blur', 'blur', this.host);
-        this.eventListeners.forward('six-select-focus', 'focus', this.host);
-        if (this.displayValuesContainer) {
-            this.resizeObserver.observe(this.displayValuesContainer);
-        }
-    }
     getItemLabel(item) {
         var _a, _b;
         const slot = (_a = item.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('slot:not([name])');
@@ -288,6 +319,14 @@ export class SixSelect {
             return (_b = item.textContent) !== null && _b !== void 0 ? _b : '';
         }
     }
+    getSlottedItem(item, slotName) {
+        const slottedElement = getSlot(item, slotName);
+        if (slottedElement == null) {
+            return null;
+        }
+        const attributes = Object.fromEntries([...slottedElement.attributes].map((attr) => [attr.name, attr.value]));
+        return h(slottedElement.tagName.toLowerCase(), Object.assign(Object.assign({}, attributes), { innerHTML: slottedElement.innerHTML }));
+    }
     getItems() {
         if (this.options !== null && this.menu != null && this.menu.shadowRoot != null) {
             return [...this.menu.shadowRoot.querySelectorAll('six-menu-item')];
@@ -303,11 +342,6 @@ export class SixSelect {
         var _a;
         return [...(((_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('six-menu-item')) || [])];
     }
-    getValueAsArray() {
-        const values = Array.isArray(this.value) ? this.value : this.value === '' ? [] : [this.value];
-        // enforce that the values are converted to 'string' before the value is compared
-        return values.map(String);
-    }
     async clearValues() {
         this.value = this.multiple ? [] : '';
         this.selectionContainerItems = [];
@@ -327,19 +361,30 @@ export class SixSelect {
     async syncItemsFromValue() {
         const selectionContainerItems = this.getSelectionContainerItems();
         const mainItems = this.getItems();
-        const value = this.getValueAsArray();
+        const value = convertToValidValue(this.value, this.multiple);
         selectionContainerItems.forEach((item) => {
             item.checkType = this.multiple ? 'checkbox' : 'check';
-            item.checked = value.includes(item.value);
+            if (Array.isArray(value)) {
+                item.checked = value.some((val) => val === item.value);
+            }
+            else {
+                item.checked = value === item.value;
+            }
         });
         mainItems.forEach((item) => {
             item.checkType = this.multiple ? 'checkbox' : 'check';
-            item.checked = value.includes(item.value);
+            if (Array.isArray(value)) {
+                item.checked = value.some((val) => val === item.value);
+            }
+            else {
+                item.checked = value === item.value;
+            }
         });
-        const checkedItems = getCheckedItems(this.getValueAsArray(), mainItems);
+        const checkedItems = getCheckedItems(convertToValidArrayValue(this.value), mainItems);
         this.displayedValues = checkedItems.map((i) => this.getItemLabel(i));
-        if (this.autocomplete && this.autocompleteInput != null) {
-            this.autocompleteInput.value = Array.isArray(this.value) ? this.value.join(',') : this.value;
+        if (this.autocomplete && this.autocompleteInput != null && !this.hasFocus) {
+            const selectedLabel = this.displayedValues.join(', ');
+            this.autocompleteInput.value = selectedLabel;
         }
         requestAnimationFrame(() => {
             this.updateDisplayedValues();
@@ -405,7 +450,7 @@ export class SixSelect {
             showClear = true;
             showExpand = false;
         }
-        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.errorText, errorTextCount: this.errorTextCount, hasErrorTextSlot: this.hasErrorTextSlot, size: this.size, onLabelClick: this.handleLabelClick, disabled: this.disabled, required: this.required, displayError: this.invalid }, h("six-dropdown", { part: "base", ref: (el) => (this.dropdown = el), hoist: this.hoist, matchTriggerWidth: true, closeOnSelect: !this.multiple, containingElement: this.host, disableHideOnEnterAndSpace: this.autocomplete, class: {
+        return (h(FormControl, { key: 'e73d53ca359c50322538fe2950527ee8e65839bd', 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.errorText, errorTextCount: this.errorTextCount, hasErrorTextSlot: this.hasErrorTextSlot, size: this.size, onLabelClick: this.handleLabelClick, disabled: this.disabled, required: this.required, displayError: this.invalid }, h("six-dropdown", { key: '62552fb8b1f349b21770553c2de7da6b5ab2a4b6', part: "base", ref: (el) => (this.dropdown = el), hoist: this.hoist, matchTriggerWidth: true, 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,
@@ -420,20 +465,20 @@ export class SixSelect {
                 'select--large': this.size === 'large',
                 'select--pill': this.pill,
                 'select--invalid': this.invalid,
-            }, onKeyDown: this.handleKeyDown, "onSix-dropdown-show": this.handleMenuShow, "onSix-dropdown-hide": this.handleMenuHide, filterPlaceholder: this.filterPlaceholder, filterDebounce: this.filterDebounce, filter: this.filter, asyncFilter: this.asyncFilter, virtualScroll: this.virtualScroll }, h("div", { slot: "trigger", ref: (el) => (this.box = el), id: this.inputId, class: {
+            }, onKeyDown: this.handleKeyDown, "onSix-dropdown-show": this.handleMenuShow, "onSix-dropdown-hide": this.handleMenuHide, filterPlaceholder: this.filterPlaceholder, filterDebounce: this.filterDebounce, filter: this.filter, asyncFilter: this.asyncFilter, virtualScroll: this.virtualScroll }, h("div", { key: '5206dc7c61d43783a4f28a02edf0ac542876a8ed', 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 }, h("div", { class: "display__values", ref: (el) => (this.displayValuesContainer = el) }, this.displayedValues.length > 0 ? (h("span", { class: "display__values-and-counter" }, h("span", { class: "display__values-values" }, this.displayedValues.map((value) => (h("span", { key: value, class: "display-value" }, value, h("span", { class: { separator: true } }, ", "))))), h("span", { ref: (el) => (this.overflowCount = el), class: "overflow-count" }, "+10"))) : (h("span", { class: "placeholder" }, this.placeholder))), showClear && (h("six-icon-button", { exportparts: "base:clear-button", class: "select__clear", name: "clear", size: "small", onClick: this.handleClearClick, tabindex: "-1" })), showExpand && (h("span", { part: "icon", class: "select__icon" }, h("six-icon", { size: "medium" }, "expand_more"))), h("six-input", { ref: (el) => (this.autocompleteInput = el), class: {
+            }, 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 }, h("div", { key: '35cd3650cfa756b85b8b685e762ced353b476404', class: "display__values", ref: (el) => (this.displayValuesContainer = el) }, this.displayedValues.length > 0 ? (h("span", { class: "display__values-and-counter" }, h("span", { class: "display__values-values" }, this.displayedValues.map((value) => (h("span", { key: value, class: "display-value" }, value, h("span", { class: { separator: true } }, ", "))))), h("span", { ref: (el) => (this.overflowCount = el), class: "overflow-count" }, "+10"))) : (h("span", { class: "placeholder" }, this.placeholder))), showClear && (h("six-icon-button", { key: '9625fad5cf7e7355bcb282ebe87ba2fb528a6996', exportparts: "base:clear-button", class: "select__clear", name: "clear", size: "small", onClick: this.handleClearClick, tabindex: "-1" })), showExpand && (h("span", { key: '29c3280a6b0cfcfc706b4a74fc166b60747957cc', part: "icon", class: "select__icon" }, h("six-icon", { key: '1ae7ffd913829472745cb65e703da30b2c7d6050', size: "medium" }, "expand_more"))), h("six-input", { key: '55a6eede0286f7a78881a563e82c60d628177e1c', ref: (el) => (this.autocompleteInput = el), class: {
                 select__input: true,
-                'select__hidden-select': !this.autocomplete,
-            }, "aria-hidden": "true", required: this.required, onFocus: this.handleFocus, clearable: this.clearable, placeholder: this.placeholder, pill: this.pill, disabled: this.disabled, size: this.size, tabIndex: -1 })), h("div", { class: {
+                'sr-only': !this.autocomplete,
+            }, "aria-hidden": "true", required: this.required, onFocus: this.handleFocus, clearable: this.clearable, placeholder: this.placeholder, pill: this.pill, disabled: this.disabled, size: this.size, tabIndex: -1 })), h("div", { key: 'd0f86369184cbe505bb10097cc829389d406a8fd', class: {
                 'selection-container': true,
                 'selection-container--border': this.selectionContainerItems.length > 0 && items.length !== this.selectionContainerItems.length,
-            } }, this.selectionContainerItems), h("six-menu", { ref: (el) => (this.menu = el), part: "menu", class: {
+            } }, this.selectionContainerItems), h("six-menu", { key: 'fdbb314f7f52324fdbc41a56752de6e85cb9a20c', ref: (el) => (this.menu = el), part: "menu", class: {
                 select__menu: true,
                 'select__menu--hidden': !hasMenuItems,
-            }, "onSix-menu-item-selected": this.handleMenuSelect, items: this.options, virtualScroll: this.virtualScroll, "remove-box-shadow": true, "disable-keyboard-handling": true }, h("slot", { onSlotchange: this.handleSlotChange })), this.multiple && this.selectAllButton && (h("div", { class: "select-all", slot: "dropdown-footer" }, h("six-button", { type: "link", onClick: () => this.selectAll() }, this.selectAllText == null ? selectAllDefaultText(hasDeselectedOptions) : this.selectAllText))))));
+            }, "onSix-menu-item-selected": this.handleMenuSelect, items: this.options, virtualScroll: this.virtualScroll, "remove-box-shadow": true, "disable-keyboard-handling": true }, h("slot", { key: '8aa7f50f534891194237610a271841e59af67da3', onSlotchange: this.handleSlotChange })), this.multiple && this.selectAllButton && (h("div", { key: '1003591fd15046d3fc436da79a3e47984f993056', class: "select-all", slot: "dropdown-footer" }, h("six-button", { key: 'dc90cc6d56ffa5456bfbbf10ef7392f68541096d', type: "link", onClick: () => this.selectAll() }, this.selectAllText == null ? selectAllDefaultText(hasDeselectedOptions) : this.selectAllText))))));
     }
     hasSelection() {
         return this.multiple ? this.value.length > 0 : this.value !== '';
@@ -457,6 +502,7 @@ export class SixSelect {
         return {
             "multiple": {
                 "type": "boolean",
+                "attribute": "multiple",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -469,12 +515,14 @@ export class SixSelect {
                     "tags": [],
                     "text": "Set to true to enable multiselect."
                 },
-                "attribute": "multiple",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "false"
             },
             "selectAllButton": {
                 "type": "boolean",
+                "attribute": "select-all-button",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -487,12 +535,14 @@ export class SixSelect {
                     "tags": [],
                     "text": "Enables the select all button."
                 },
-                "attribute": "select-all-button",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "false"
             },
             "selectAllText": {
                 "type": "string",
+                "attribute": "select-all-text",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -505,32 +555,13 @@ export class SixSelect {
                     "tags": [],
                     "text": "Custom text for the \"select all\" button. Defaults to \"Select all\" and equivalents in supported languages."
                 },
-                "attribute": "select-all-text",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
-            "maxTagsVisible": {
-                "type": "number",
-                "mutable": false,
-                "complexType": {
-                    "original": "number",
-                    "resolved": "number",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [{
-                            "name": "deprecated",
-                            "text": ": This property is ignored. The component now displays as many items as possible and computes the \"+n\" dynamically."
-                        }],
-                    "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",
+                "attribute": "disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -543,12 +574,14 @@ export class SixSelect {
                     "tags": [],
                     "text": "Set to true to disable the select control."
                 },
-                "attribute": "disabled",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "false"
             },
             "name": {
                 "type": "string",
+                "attribute": "name",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -561,12 +594,14 @@ export class SixSelect {
                     "tags": [],
                     "text": "The select's name."
                 },
-                "attribute": "name",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "''"
             },
             "placeholder": {
                 "type": "string",
+                "attribute": "placeholder",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -579,12 +614,14 @@ export class SixSelect {
                     "tags": [],
                     "text": "The select's placeholder text."
                 },
-                "attribute": "placeholder",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "''"
             },
             "filterPlaceholder": {
                 "type": "string",
+                "attribute": "filter-placeholder",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -597,11 +634,13 @@ export class SixSelect {
                     "tags": [],
                     "text": "The filter's placeholder text."
                 },
-                "attribute": "filter-placeholder",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "filterDebounce": {
                 "type": "number",
+                "attribute": "filter-debounce",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -614,11 +653,13 @@ export class SixSelect {
                     "tags": [],
                     "text": "The debounce for the filter callbacks."
                 },
-                "attribute": "filter-debounce",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "size": {
                 "type": "string",
+                "attribute": "size",
                 "mutable": false,
                 "complexType": {
                     "original": "'small' | 'medium' | 'large'",
@@ -631,12 +672,14 @@ export class SixSelect {
                     "tags": [],
                     "text": "The select's size."
                 },
-                "attribute": "size",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "'medium'"
             },
             "hoist": {
                 "type": "boolean",
+                "attribute": "hoist",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -649,12 +692,14 @@ export class SixSelect {
                     "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",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "false"
             },
             "value": {
                 "type": "string",
+                "attribute": "value",
                 "mutable": true,
                 "complexType": {
                     "original": "string | string[]",
@@ -667,12 +712,14 @@ export class SixSelect {
                     "tags": [],
                     "text": "The value of the control. This will be a string or an array depending on `multiple`."
                 },
-                "attribute": "value",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "''"
             },
             "pill": {
                 "type": "boolean",
+                "attribute": "pill",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -685,12 +732,14 @@ export class SixSelect {
                     "tags": [],
                     "text": "Set to true to draw a pill-style select with rounded edges."
                 },
-                "attribute": "pill",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "false"
             },
             "helpText": {
                 "type": "string",
+                "attribute": "help-text",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -703,12 +752,14 @@ export class SixSelect {
                     "tags": [],
                     "text": "The select's help text. Alternatively, you can use the help-text slot."
                 },
-                "attribute": "help-text",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "''"
             },
             "required": {
                 "type": "boolean",
+                "attribute": "required",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -721,12 +772,14 @@ export class SixSelect {
                     "tags": [],
                     "text": "Set to true to show an asterisk beneath the label."
                 },
-                "attribute": "required",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "false"
             },
             "clearable": {
                 "type": "boolean",
+                "attribute": "clearable",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -739,12 +792,14 @@ export class SixSelect {
                     "tags": [],
                     "text": "Set to true to add a clear button when the select is populated."
                 },
-                "attribute": "clearable",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "false"
             },
             "label": {
                 "type": "string",
+                "attribute": "label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -757,12 +812,14 @@ export class SixSelect {
                     "tags": [],
                     "text": "The label text."
                 },
-                "attribute": "label",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "''"
             },
             "errorText": {
                 "type": "string",
+                "attribute": "error-text",
                 "mutable": false,
                 "complexType": {
                     "original": "string | string[]",
@@ -775,12 +832,14 @@ export class SixSelect {
                     "tags": [],
                     "text": "The error message shown, if `invalid` is set to true."
                 },
-                "attribute": "error-text",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "''"
             },
             "errorTextCount": {
                 "type": "number",
+                "attribute": "error-text-count",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -793,11 +852,13 @@ export class SixSelect {
                     "tags": [],
                     "text": "The number of error texts to be shown (if the error-text slot isn't used). Defaults to 1"
                 },
-                "attribute": "error-text-count",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "invalid": {
                 "type": "boolean",
+                "attribute": "invalid",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -810,12 +871,14 @@ export class SixSelect {
                     "tags": [],
                     "text": "If this property is set to true and an error message is provided by `errorText`, the error message is displayed."
                 },
-                "attribute": "invalid",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
                 "defaultValue": "false"
             },
             "line": {
                 "type": "boolean",
+                "attribute": "line",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -828,12 +891,14 @@ export class SixSelect {
                     "tags": [],
                     "text": "Set to render as line"
                 },
-                "attribute": "line",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "false"
             },
             "filter": {
                 "type": "boolean",
+                "attribute": "filter",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -846,12 +911,14 @@ export class SixSelect {
                     "tags": [],
                     "text": "Set to true to allow filtering for entries in the dropdown"
                 },
-                "attribute": "filter",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "false"
             },
             "asyncFilter": {
                 "type": "boolean",
+                "attribute": "async-filter",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -864,12 +931,14 @@ export class SixSelect {
                     "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",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "false"
             },
             "autocomplete": {
                 "type": "boolean",
+                "attribute": "autocomplete",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -882,12 +951,14 @@ export class SixSelect {
                     "tags": [],
                     "text": "Set to true to turn the six-select into an autocomplete."
                 },
-                "attribute": "autocomplete",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "false"
             },
             "inputDebounce": {
                 "type": "number",
+                "attribute": "input-debounce",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -900,12 +971,14 @@ export class SixSelect {
                     "tags": [],
                     "text": "The debounce for when the input changes for autocompletes should be emitted"
                 },
-                "attribute": "input-debounce",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "DEFAULT_DEBOUNCE_FAST"
             },
             "options": {
                 "type": "unknown",
+                "attribute": "options",
                 "mutable": false,
                 "complexType": {
                     "original": "SixMenuItemData[] | null",
@@ -924,10 +997,13 @@ export class SixSelect {
                     "tags": [],
                     "text": "Set the options to be shown in the dropdown (alternative to setting the elements via html)"
                 },
+                "getter": false,
+                "setter": false,
                 "defaultValue": "null"
             },
             "virtualScroll": {
                 "type": "boolean",
+                "attribute": "virtual-scroll",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -940,7 +1016,8 @@ export class SixSelect {
                     "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",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "false"
             }