npm - @six-group/ui-library - Versions diffs - 0.0.0-insider.82e5ea2 → 0.0.0-insider.83aa3dc - Mend

@six-group/ui-library 0.0.0-insider.82e5ea2 → 0.0.0-insider.83aa3dc

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (427) hide show

package/dist/components/six-radio.js CHANGED Viewed

@@ -100,12 +100,12 @@ const SixRadio$1 = /*@__PURE__*/ proxyCustomElement(class SixRadio extends HTMLE
         return this.getAllRadios().filter((radio) => radio !== this.host);
     }
     render() {
-        return (h("label", { key: '13c5201fe152b2bc57a679422219af5ae19a46a9', part: "base", class: {
+        return (h("label", { key: '11d5d7c460cf62b2fc73435137998c3b424ab58f', part: "base", class: {
                 radio: true,
                 'radio--checked': this.checked,
                 'radio--disabled': this.disabled,
                 'radio--focused': this.hasFocus,
-            }, htmlFor: this.inputId, onKeyDown: this.handleKeyDown, onMouseDown: this.handleMouseDown }, h("span", { key: 'd32606e4ac318f0de1afb0234d2dfc7dd00546ec', part: "control", class: "radio__control" }, h("span", { key: 'd12e68de71d9e49dc4b68813dc036ffa4e06fc96', part: "checked-icon", class: "radio__icon" }, h("svg", { key: 'b942c5b3f4c817484ce4a615913a4a9c01675562', viewBox: "0 0 16 16" }, h("g", { key: '316ed8598111b40d906c0b44ab7e4bfd2bf5cd1c', stroke: "none", "stroke-width": "1", fill: "none", "fill-rule": "evenodd" }, h("g", { key: '58a1547753ea79b7de3b4b90eeedfeb40ad7b6d6', fill: "currentColor" }, h("circle", { key: 'd225f3a06fdbb23a84eae34a6ba1b9184f55e627', cx: "8", cy: "8", r: "5" }))))), h("input", { key: '8e3adc0aaba86098d423c5a7f484a20fe0b2a0cd', ref: (el) => (this.nativeInput = el), id: this.inputId, type: "radio", name: this.name, value: this.value, checked: this.checked, disabled: this.disabled, role: "radio", "aria-checked": this.checked ? 'true' : 'false', "aria-labelledby": this.labelId, onClick: this.handleClick, onBlur: this.handleBlur, onFocus: this.handleFocus })), h("span", { key: 'b72458bbd8e5ca7a8109a5e85b1b5699a843d097', part: "label", id: this.labelId, class: "radio__label" }, h("slot", { key: '87652971c02c9aa7187a0f266283d9a475946f78' }))));
+            }, htmlFor: this.inputId, onKeyDown: this.handleKeyDown, onMouseDown: this.handleMouseDown }, h("span", { key: 'e6ca5e0308ed109262b995b9831f32f5c5829cbc', part: "control", class: "radio__control" }, h("span", { key: 'c201309a8ef4def676aa48cf9dd66b94da28db10', part: "checked-icon", class: "radio__icon" }, h("svg", { key: '0e003d8db64fb73c54e95fffb9005d434d2b114e', viewBox: "0 0 16 16" }, h("g", { key: '374a33afe42003445cb91630754007f7057ff755', stroke: "none", "stroke-width": "1", fill: "none", "fill-rule": "evenodd" }, h("g", { key: '2b85fcbdf694e18c9234819a0a20ffd793be0102', fill: "currentColor" }, h("circle", { key: '45842bd37b3dcea164b972c9ff6e461fc866536d', cx: "8", cy: "8", r: "5" }))))), h("input", { key: '924cbd7890627bbf79201b68a989f894e26d9579', ref: (el) => (this.nativeInput = el), id: this.inputId, type: "radio", name: this.name, value: this.value, checked: this.checked, disabled: this.disabled, role: "radio", "aria-checked": this.checked ? 'true' : 'false', "aria-labelledby": this.labelId, onClick: this.handleClick, onBlur: this.handleBlur, onFocus: this.handleFocus })), h("span", { key: 'f00e3fbac022d2be55117448df3e8ff908dd4cd5', part: "label", id: this.labelId, class: "radio__label" }, h("slot", { key: '0fa728701561580e0d06f0568a001d1d234ed867' }))));
     }
     get host() { return this; }
     static get watchers() { return {

package/dist/components/six-range.js CHANGED Viewed

@@ -185,7 +185,7 @@ const SixRange$1 = /*@__PURE__*/ proxyCustomElement(class SixRange extends HTMLE
         }
     }
     render() {
-        return (h(FormControl, { key: '4bd9c413aa318930b38a57e8f76906b5c25c0961', inputId: this.inputId, label: this.label, labelId: this.labelId, hasLabelSlot: this.hasLabelSlot, helpTextId: this.helpTextId, helpText: this.helpText, hasHelpTextSlot: this.hasHelpTextSlot, size: "medium", errorTextId: this.errorTextId, errorText: this.errorText, hasErrorTextSlot: this.hasErrorTextSlot, errorTextCount: this.errorTextCount, disabled: this.disabled, required: this.required, displayError: this.invalid }, h("div", { key: '2a5cd3d1b1bcc77813aacc5eb2971a5ef0e27e0f', part: "base", class: {
+        return (h(FormControl, { key: 'cf23b46a8ca2596e962810d3528163ab9add32c3', inputId: this.inputId, label: this.label, labelId: this.labelId, hasLabelSlot: this.hasLabelSlot, helpTextId: this.helpTextId, helpText: this.helpText, hasHelpTextSlot: this.hasHelpTextSlot, size: "medium", errorTextId: this.errorTextId, errorText: this.errorText, hasErrorTextSlot: this.hasErrorTextSlot, errorTextCount: this.errorTextCount, disabled: this.disabled, required: this.required, displayError: this.invalid }, h("div", { key: '370f20143ac3c9325b7cc99ceb3c3a6720a50b1c', part: "base", class: {
                 range: true,
                 // States
                 'range--disabled': this.disabled,
@@ -193,7 +193,7 @@ const SixRange$1 = /*@__PURE__*/ proxyCustomElement(class SixRange extends HTMLE
                 'range--tooltip-visible': this.hasTooltip,
                 'range--tooltip-top': this.tooltip === 'top',
                 'range--tooltip-bottom': this.tooltip === 'bottom',
-            }, onTouchStart: this.handleTouchStart }, h("input", { key: '448a9d9d41e466a09c4e00d9229b2971e99190b5', part: "input", ref: (el) => (this.nativeInput = el), type: "range", class: "range__control", name: this.name, disabled: this.disabled, min: this.min, max: this.max, step: this.step, value: this.value, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur }), this.tooltip !== 'none' && (h("output", { part: "tooltip", ref: (el) => (this.output = el), class: "range__tooltip" }, this.tooltipFormatter(this.value))))));
+            }, onTouchStart: this.handleTouchStart }, h("input", { key: '74380f56888930992b753f905cd6e9256c24d106', part: "input", ref: (el) => (this.nativeInput = el), type: "range", class: "range__control", name: this.name, disabled: this.disabled, min: this.min, max: this.max, step: this.step, value: this.value, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur }), this.tooltip !== 'none' && (h("output", { part: "tooltip", ref: (el) => (this.output = el), class: "range__tooltip" }, this.tooltipFormatter(this.value))))));
     }
     get host() { return this; }
     static get watchers() { return {

package/dist/components/six-root.js CHANGED Viewed

@@ -15,7 +15,7 @@ const SixRoot$1 = /*@__PURE__*/ proxyCustomElement(class SixRoot extends HTMLEle
         this.version = '';
     }
     render() {
-        return (h("host", { key: 'd004ad641b82d656ccbb7b788a04d8befab64b47', class: "six-root" }, h("header", { key: 'cce9488ed3c0778120fb1c0ce040a74b8c3b18d6', part: "header" }, this.stage && h("six-stage-indicator", { stage: this.stage }, this.version), h("slot", { key: 'b5810a66f91e003d83ee9196e0c955b52773794a', name: "header" })), h("nav", { key: '8d7aa97373ddb660d7a6e5ab1b860736726b9ee7', class: "six-root__left-sidebar", part: "left-sidebar" }, h("slot", { key: 'ab612b588dedf3e3098cd6f423078ef2fdc83bed', name: "left-sidebar" })), h("main", { key: '2c6e91c192a5346302d6d0be19a4e43d190cf5d4', part: "main" }, h("div", { key: 'bb52732ddf5462b1d536444f0f584fa48ba5ee55', class: { 'six-root__container': true, 'six-root__container--padded': this.padded }, part: "container" }, h("slot", { key: '23db6d1c2426497e40e91ef7d7898f37e1977465', name: "main" })), h("div", { key: 'f083d6d754ff7a502efe8f20663a423075f85e9f', class: "six-root__footer" }, h("slot", { key: 'd902e6b083181958e12f8f808b2dc98e2bb99dfd', name: "footer" }))), h("nav", { key: '05b158597d15d8536e8eb8ccc66f0ff971ebdc92', class: "six-root__right-sidebar", part: "right-sidebar" }, h("slot", { key: '3a9168dbd5039344e948c22c822ca7f65648cb1f', name: "right-sidebar" }))));
+        return (h("host", { key: 'f4b3cb516ce1b70a834903c00a56ca7edf5364dc', class: "six-root" }, h("header", { key: '88ec66c2af58e55621563f600cb8c1589467218c', part: "header" }, this.stage && h("six-stage-indicator", { stage: this.stage }, this.version), h("slot", { key: '072a0e92b9203149a9823fdf83aa45b39494559f', name: "header" })), h("nav", { key: '58d18ca9b9ebf9db5981b3c82cce657f73ef5f13', class: "six-root__left-sidebar", part: "left-sidebar" }, h("slot", { key: '62643ef967da9d303380b4d4d26ec5e026a86ac3', name: "left-sidebar" })), h("main", { key: '0b059f2814c4485dd03a3a166529d78999baa699', part: "main" }, h("div", { key: '74ce003ff9d45945b9bdc43b170c99300856544b', class: { 'six-root__container': true, 'six-root__container--padded': this.padded }, part: "container" }, h("slot", { key: '5ea05c471c96fd47cf27749accd1c551f16d69d2', name: "main" })), h("div", { key: '5dd7796754df4238f61f1ee8cc3cee9589f1f40f', class: "six-root__footer" }, h("slot", { key: '5c4036b9fb4d36f69b617a2e6ee7fce62c80fa08', name: "footer" }))), h("nav", { key: '36c76008c9dc36b7fef9f8a6a79e6508d1764ede', class: "six-root__right-sidebar", part: "right-sidebar" }, h("slot", { key: '66cdae8a60d251063e4c8a710a36d0be07dedf0e', name: "right-sidebar" }))));
     }
     get host() { return this; }
     static get style() { return SixRootStyle0; }

package/dist/components/six-search-field.js CHANGED Viewed

@@ -47,7 +47,7 @@ const SixSearchField$1 = /*@__PURE__*/ proxyCustomElement(class SixSearchField e
         this.eventListeners.removeAll();
     }
     render() {
-        return (h("div", { key: '3083fe949be687f4540c7ee0115d9befc4faa90d', class: "search-box" }, h("six-input", { key: 'addaf6279a2473b3c44d2284c11a4e822c0883fe', ref: (el) => (this.inputElement = el), placeholder: this.placeholder, value: this.value, disabled: this.disabled, clearable: this.clearable }, h("six-icon", { key: 'd6953c6b87cbf8f6ed1fb1625aa510857ccfb421', class: "search-box__icon", slot: "prefix", size: "small", onClick: this.handleInputChange }, "search")), h("slot", { key: 'd7f0a5e0974d5e0cbe8b0e120999804be0299aef' })));
+        return (h("div", { key: '85db56e598dbf855409cc34f385680472f3ec208', class: "search-box" }, h("six-input", { key: 'caba6d8f93c3d95e18d50de6f01cf87d42c0afc2', ref: (el) => (this.inputElement = el), placeholder: this.placeholder, value: this.value, disabled: this.disabled, clearable: this.clearable }, h("six-icon", { key: '511f56040dcd6b4a4c9033c6f4191c5ae457839e', class: "search-box__icon", slot: "prefix", size: "small", onClick: this.handleInputChange }, "search")), h("slot", { key: '6c067ed8f365be18f5c05ef2b9a7b538bba5c015' })));
     }
     static get watchers() { return {
         "value": ["handleValueChange"]

package/dist/components/six-select.js CHANGED Viewed

@@ -126,6 +126,40 @@ const translation = {
     },
 };
+function convertToValidValue(value, multiple) {
+    if (multiple) {
+        if (Array.isArray(value)) {
+            return value.filter((element) => typeof element === 'string');
+        }
+        else if (typeof value === 'string' && value.length > 0) {
+            return [value];
+        }
+        else {
+            return [];
+        }
+    }
+    else {
+        if (typeof value === 'string') {
+            return value;
+        }
+        else {
+            return '';
+        }
+    }
+}
+function convertToValidArrayValue(value) {
+    return convertToValidValue(value, true);
+}
+function valueEquals(a, b) {
+    if (Array.isArray(a) && Array.isArray(b)) {
+        return a.length === b.length && a.every((element, index) => element === b[index]);
+    }
+    else if (typeof a === 'string' && typeof b === 'string') {
+        return a === b;
+    }
+    return false;
+}
 const sixSelectCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}.form-control .form-control__label{display:none}.form-control .form-control__help-text{display:none}.form-control .form-control__error-text{display:none;text-align:left}.form-control--has-label .form-control__label{display:inline-block;color:var(--six-input-label-color);font-weight:var(--six-font-weight-bold);margin-bottom:var(--six-spacing-x-small)}.form-control--has-label .form-control__label__required::after{color:var(--six-color-danger-800);content:\"*\";transform:scale(1.1);margin-left:var(--six-spacing-xxx-small);position:absolute}.form-control--has-label.form-control--small .form-control__label{font-size:var(--six-input-label-font-size-small)}.form-control--has-label.form-control--medium .form-control__label{font-size:var(--six-input-label-font-size-medium)}.form-control--has-label.form-control--large .form-control_label{font-size:var(--six-input-label-font-size-large)}.form-control--has-help-text .form-control__help-text{display:block;color:var(--six-input-help-text-color);margin-top:var(--six-spacing-x-small)}.form-control--has-help-text .form-control__help-text ::slotted(*){margin-top:var(--six-spacing-xxx-small)}.form-control--has-help-text.form-control--small .form-control__help-text{font-size:var(--six-input-help-text-font-size-small)}.form-control--has-help-text.form-control--medium .form-control__help-text{font-size:var(--six-input-help-text-font-size-medium)}.form-control--has-help-text.form-control--large .form-control__help-text{font-size:var(--six-input-help-text-font-size-large)}.form-control--has-error-text .form-control__error-text{display:block;margin-top:var(--six-spacing-xxx-small)}.form-control--has-error-text .form-control__error-text ::slotted(*){margin-top:var(--six-spacing-xxx-small)}.form-control--has-error-text.form-control--small .form-control__error-text{font-size:var(--six-input-help-text-font-size-small)}.form-control--has-error-text.form-control--medium .form-control__error-text{font-size:var(--six-input-help-text-font-size-medium)}.form-control--has-error-text.form-control--large .form-control__error-text{font-size:var(--six-input-help-text-font-size-large)}.form-control--disabled .form-control__help-text{color:var(--six-input-help-text-color-disabled)}.form-control--disabled .form-control__label{color:var(--six-input-label-color-disabled)}.form-control--invalid:not(.form-control--disabled) .form-control__label{color:var(--six-input-label-color)}:host,.select{display:block}.select__box{display:inline-flex;align-items:center;justify-content:start;position:relative;width:100%;font-family:var(--six-font-family);font-weight:var(--six-input-font-weight);font-size:var(--six-input-font-size-medium);letter-spacing:var(--six-input-letter-spacing);background-color:var(--six-input-background-color);border:solid var(--six-border-width) var(--six-input-border-color);vertical-align:middle;transition:var(--six-transition-fast) color, var(--six-transition-fast) border, var(--six-transition-fast) box-shadow;cursor:pointer}.select__box--line{border:none;border-bottom:solid var(--six-border-width) var(--six-input-border-color)}.select__box--autocomplete{border:none;overflow:initial}.select:not(.select--disabled) .select__box:hover{background-color:var(--six-input-background-color-hover);color:var(--six-input-color-hover);border-bottom-color:var(--six-input-border-color-hover)}.select:not(.select--disabled) .select__box:hover:not(.select__box--line){border-color:var(--six-input-border-color-hover)}.select:not(.select--disabled) .select__box:focus{background-color:var(--six-input-background-color-focus);outline:none;color:var(--six-input-color-focus);border-bottom-color:var(--six-input-border-color-focus);box-shadow:0 1px 0 0 var(--six-input-border-color-focus)}.select:not(.select--disabled) .select__box:focus:not(.select__box--line){border-color:var(--six-input-border-color-focus);box-shadow:var(--six-input-focus-shadow)}.select--disabled .select__box{background-color:var(--six-input-background-color-disabled);color:var(--six-input-color-disabled);cursor:not-allowed;outline:none}.select--disabled .select__box:not(.select__box--line){border-color:var(--six-input-border-color-disabled)}.select--disabled .select__clear{pointer-events:none}.select--invalid:not(.select--disabled):not(.select--focused) .select__box{border-bottom-color:var(--six-input-border-color-danger)}.select--invalid:not(.select--disabled):not(.select--focused) .select__box:not(.input--line){border-color:var(--six-input-border-color-danger)}.display__values{display:flex;flex:1 1 auto;align-items:center;user-select:none;overflow:hidden;scrollbar-width:none;-ms-overflow-style:none}.display__values::-webkit-scrollbar{width:0;height:0}.display__values-values{flex:0 1 auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.display__values-and-counter{display:flex;overflow:hidden}.select__clear{flex-shrink:0;flex-grow:0;display:inline}.select__icon{flex-shrink:0;flex-grow:0;display:inline;transition:var(--six-transition-medium) transform ease}.select--open .select__icon{transform:rotate(-180deg)}.placeholder{color:var(--six-input-placeholder-color)}.select--disabled .placeholder{color:var(--six-input-placeholder-color-disabled)}.select__hidden-select{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}.select__input{position:absolute;top:0;left:0;width:100%;height:100%}.select--small .select__box{border-radius:var(--six-input-border-radius-small);font-size:var(--six-input-font-size-small);min-height:var(--six-height-small)}.select--small .select__box--line{border:none;border-bottom:solid var(--six-border-width) var(--six-input-border-color)}.select--small .display__values{margin:0 0 0 var(--six-input-spacing-small)}.select--small .select__clear{margin-right:var(--six-spacing-xxx-small)}.select--small .select__icon{margin-right:var(--six-spacing-x-small)}.select--medium .select__box{border-radius:var(--six-input-border-radius-medium);font-size:var(--six-input-font-size-medium);min-height:var(--six-height-medium)}.select--medium .select__box--line{border:none;border-bottom:solid var(--six-border-width) var(--six-input-border-color)}.select--medium .display__values{margin:0 0 0 var(--six-input-spacing-medium)}.select--medium .select__clear{margin-right:var(--six-spacing-xxx-small)}.select--medium .select__icon{margin-right:var(--six-spacing-x-small)}.select--large .select__box{border-radius:var(--six-input-border-radius-large);font-size:var(--six-input-font-size-large);min-height:var(--six-height-large)}.select--large .select__box--line{border:none;border-bottom:solid var(--six-border-width) var(--six-input-border-color)}.select--large .display__values{margin:0 0 0 var(--six-input-spacing-large)}.select--large .select__clear{margin-right:var(--six-spacing-xxx-small)}.select--large .select__icon{margin-right:var(--six-spacing-x-small)}.select--pill.select--small .select__box{border-radius:var(--six-height-small)}.select--pill.select--medium .select__box{border-radius:var(--six-height-medium)}.select--pill.select--large .select__box{border-radius:var(--six-height-large)}.select__menu{width:100%}.select__menu--hidden{display:none}six-icon-button::part(base){padding-top:0;padding-bottom:0}.selection-container--border{border-bottom:solid var(--six-border-width) var(--six-menu-divider-color);padding-top:var(--six-spacing-xx-small);padding-bottom:var(--six-spacing-xx-small)}.display-value--hidden{display:none}.overflow-count{color:var(--six-color-web-rock-600);padding-left:var(--six-spacing-x-small)}.overflow-count-hidden{display:none}.separator--hidden{display:none}.select-all{border-top:1px solid var(--six-color-web-rock-300);display:flex;justify-content:end}";
 const SixSelectStyle0 = sixSelectCss;
@@ -248,12 +282,12 @@ const SixSelect$1 = /*@__PURE__*/ proxyCustomElement(class SixSelect extends HTM
                 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) => {
@@ -273,6 +307,9 @@ const SixSelect$1 = /*@__PURE__*/ proxyCustomElement(class SixSelect extends HTM
         };
         this.handleMenuHide = () => {
             this.isOpen = false;
+            if (this.multiple) {
+                this.handleBlur();
+            }
         };
         this.handleSlotChange = () => {
             this.hasHelpTextSlot = hasSlot(this.host, 'help-text');
@@ -325,34 +362,37 @@ const SixSelect$1 = /*@__PURE__*/ proxyCustomElement(class SixSelect extends HTM
         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) {
@@ -377,16 +417,6 @@ const SixSelect$1 = /*@__PURE__*/ proxyCustomElement(class SixSelect extends HTM
         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])');
@@ -413,11 +443,6 @@ const SixSelect$1 = /*@__PURE__*/ proxyCustomElement(class SixSelect extends HTM
         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 = [];
@@ -437,7 +462,7 @@ const SixSelect$1 = /*@__PURE__*/ proxyCustomElement(class SixSelect extends HTM
     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);
@@ -446,7 +471,7 @@ const SixSelect$1 = /*@__PURE__*/ proxyCustomElement(class SixSelect extends HTM
             item.checkType = this.multiple ? 'checkbox' : 'check';
             item.checked = value.includes(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;
@@ -515,7 +540,7 @@ const SixSelect$1 = /*@__PURE__*/ proxyCustomElement(class SixSelect extends HTM
             showClear = true;
             showExpand = false;
         }
-        return (h(FormControl, { key: 'cf4bbc5c8bdb3bd395b3223065ef7175f12fc750', 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: '5de198b2fc9ab517f9e6682394d881328f4da383', 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: '3787965c52269e43fc052d66887ab1bb0c33613f', 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: '783bfb455c2dda4ec867988251f784180f6245c2', 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,
@@ -530,20 +555,20 @@ const SixSelect$1 = /*@__PURE__*/ proxyCustomElement(class SixSelect extends HTM
                 '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", { key: '731e50e52df65db450e852209b091698d024d533', 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: '06b29a0e26e8c08ce50047e71e9bac5ca0852b37', 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", { key: '4623418e42ad9d69891c582b7e88e2686b27eaa1', 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", { key: '1c53a3b59a3f09c6707709c36afdcd62e90de43a', 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: 'd64257f0efecb3816562f99d17511e9368474fc6', 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", { key: '71d28c910c0382187c1c23b01bb17c683883d77a', 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", { key: '65f3a8a73dd645a1098afc2b92104336b16fb80f', class: {
+            }, "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: 'c10395cc232d4af3b0446cb5e8b174bc35f40048', class: {
                 'selection-container': true,
                 'selection-container--border': this.selectionContainerItems.length > 0 && items.length !== this.selectionContainerItems.length,
-            } }, this.selectionContainerItems), h("six-menu", { key: '80ac8179cb1fd6bbccd9525254511dde6908af5f', ref: (el) => (this.menu = el), part: "menu", class: {
+            } }, this.selectionContainerItems), h("six-menu", { key: 'd50b9efc0bb974c03a177925010913dcd22c8245', 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", { key: '72f6447ad3dc14df92cf42b4a7b0984e970759c7', 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: 'bff03fba01c71728e123c46168ff6400b9739590', 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))))));
     }
     hasSelection() {
         return this.multiple ? this.value.length > 0 : this.value !== '';