@six-group/ui-library 0.0.0-insider.e433304 → 0.0.0-insider.e8b5a11

package/dist/esm/six-search-field.entry.js

@@ -1,24 +1,27 @@
-import { r as registerInstance, c as createEvent, h } from './index-79d4ef67.js';
-import { D as DEFAULT_DEBOUNCE_FAST, a as debounce } from './execution-control-2ebaf4ef.js';
-import { E as EventListeners } from './event-listeners-706d4309.js';
+import { r as registerInstance, c as createEvent, h } from './index-BF09Gr5y.js';
+import { D as DEFAULT_DEBOUNCE_FAST, a as debounce } from './execution-control-CKhg9ibv.js';
+import { E as EventListeners } from './event-listeners-C4h4qpGl.js';
 
 const sixSearchFieldCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}:host{display:block}.search-box{z-index:var(--six-z-index-search-field)}.search-box__icon{cursor:pointer}";
 
 const SixSearchField = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.searchFieldChange = createEvent(this, "six-search-field-change", 7);
+        this.searchFieldChange = createEvent(this, "six-search-field-change");
+        /** Debounce time in milliseconds, default is 300 ms */
+        this.debounce = DEFAULT_DEBOUNCE_FAST;
+        /** Set to true to disable the input. */
+        this.disabled = false;
+        /** The input's value attribute. */
+        this.value = '';
+        /** Set to true to add a clear button when the input is populated. */
+        this.clearable = false;
         this.eventListeners = new EventListeners();
         this.handleInputChange = () => {
             if (this.inputElement != null) {
                 this.searchFieldChange.emit({ value: this.inputElement.value });
             }
         };
-        this.placeholder = undefined;
-        this.debounce = DEFAULT_DEBOUNCE_FAST;
-        this.disabled = false;
-        this.value = '';
-        this.clearable = false;
     }
     handleValueChange() {
         if (this.inputElement != null) {
@@ -41,7 +44,7 @@ const SixSearchField = class {
         this.eventListeners.removeAll();
     }
     render() {
-        return (h("div", { class: "search-box" }, h("six-input", { ref: (el) => (this.inputElement = el), placeholder: this.placeholder, value: this.value, disabled: this.disabled, clearable: this.clearable }, h("six-icon", { class: "search-box__icon", slot: "prefix", size: "small", onClick: this.handleInputChange }, "search")), h("slot", null)));
+        return (h("div", { key: '424505c56697ecef9eff6e897ec823d2a80149e3', class: "search-box" }, h("six-input", { key: '040876412a76d0128c9749518f3c075d505aef9c', ref: (el) => (this.inputElement = el), placeholder: this.placeholder, value: this.value, disabled: this.disabled, clearable: this.clearable }, h("six-icon", { key: 'e87d00186875991272cbfdb17a18c31574ed14c4', class: "search-box__icon", slot: "prefix", size: "small", onClick: this.handleInputChange }, "search")), h("slot", { key: 'f01f14307dcbf95a8401ab3ed7c59ecd3abc0cef' })));
     }
     static get watchers() { return {
         "value": ["handleValueChange"]
@@ -50,5 +53,6 @@ const SixSearchField = class {
 SixSearchField.style = sixSearchFieldCss;
 
 export { SixSearchField as six_search_field };
+//# sourceMappingURL=six-search-field.entry.js.map
 
 //# sourceMappingURL=six-search-field.entry.js.map

package/dist/esm/six-search-field.entry.js.map

@@ -1 +1 @@
-{"file":"six-search-field.entry.js","mappings":";;;;AAAA,MAAM,iBAAiB,GAAG,oNAAoN;;MCoBjO,cAAc;;;;QAqBjB,mBAAc,GAAG,IAAI,cAAc,EAAE,CAAC;QAEtC,sBAAiB,GAAG;YAC1B,IAAI,IAAI,CAAC,YAAY,IAAI,IAAI,EAAE;gBAC7B,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,CAAC,CAAC;aACjE;SACF,CAAC;;wBAtBkC,qBAAqB;wBAGrB,KAAK;qBAGR,EAAE;yBAGf,KAAK;;IAgBzB,iBAAiB;QACf,IAAI,IAAI,CAAC,YAAY,IAAI,IAAI,EAAE;YAC7B,IAAI,CAAC,YAAY,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC;SACtC;KACF;IAED,gBAAgB;QACd,IAAI,IAAI,CAAC,YAAY,IAAI,IAAI;YAAE,OAAO;QAEtC,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,IAAI,CAAC,YAAY,EAAE,iBAAiB,EAAE,QAAQ,CAAC,IAAI,CAAC,iBAAiB,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC;QAC/G,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,IAAI,CAAC,YAAY,EAAE,SAAS,EAAE,CAAC,KAAY;YACjE,MAAM,aAAa,GAAG,KAAsB,CAAC;YAC7C,IAAI,aAAa,CAAC,GAAG,KAAK,OAAO,EAAE;;gBAEjC,IAAI,CAAC,iBAAiB,EAAE,CAAC;aAC1B;SACF,CAAC,CAAC;KACJ;IAED,oBAAoB;QAClB,IAAI,CAAC,cAAc,CAAC,SAAS,EAAE,CAAC;KACjC;IAED,MAAM;QACJ,QACE,WAAK,KAAK,EAAC,YAAY,IACrB,iBACE,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,YAAY,GAAG,EAAE,CAAC,EACrC,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,SAAS,EAAE,IAAI,CAAC,SAAS,IAEzB,gBAAU,KAAK,EAAC,kBAAkB,EAAC,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,OAAO,EAAC,OAAO,EAAE,IAAI,CAAC,iBAAiB,aAElF,CACD,EACZ,eAAQ,CACJ,EACN;KACH;;;;;;;;;","names":[],"sources":["src/components/six-search-field/six-search-field.scss?tag=six-search-field&encapsulation=shadow","src/components/six-search-field/six-search-field.tsx"],"sourcesContent":["@import 'src/global/component';\n\n:host {\n  display: block;\n}\n\n.search-box {\n  z-index: var(--six-z-index-search-field);\n\n  &__icon {\n    cursor: pointer;\n  }\n}\n","import { Component, Event, EventEmitter, h, Prop, Watch } from '@stencil/core';\nimport { debounce, DEFAULT_DEBOUNCE_FAST } from '../../utils/execution-control';\nimport { EventListeners } from '../../utils/event-listeners';\n\nexport interface SixSearchFieldChangePayload {\n  value: string;\n}\n\n/**\n * @since 1.0\n * @status stable\n *\n * @slot - Used to define the results below the search component.\n */\n\n@Component({\n  tag: 'six-search-field',\n  styleUrl: 'six-search-field.scss',\n  shadow: true,\n})\nexport class SixSearchField {\n  /** The input's placeholder text. */\n  @Prop() placeholder?: string;\n\n  /** Debounce time in milliseconds, default is 300 ms */\n  @Prop({ reflect: true }) debounce = DEFAULT_DEBOUNCE_FAST;\n\n  /** Set to true to disable the input. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** The input's value attribute. */\n  @Prop({ reflect: true }) value = '';\n\n  /** Set to true to add a clear button when the input is populated. */\n  @Prop() clearable = false;\n\n  /** Emitted when a search is triggered */\n  @Event({ eventName: 'six-search-field-change' }) searchFieldChange!: EventEmitter<SixSearchFieldChangePayload>;\n\n  private inputElement?: HTMLSixInputElement;\n\n  private eventListeners = new EventListeners();\n\n  private handleInputChange = () => {\n    if (this.inputElement != null) {\n      this.searchFieldChange.emit({ value: this.inputElement.value });\n    }\n  };\n\n  @Watch('value')\n  handleValueChange() {\n    if (this.inputElement != null) {\n      this.inputElement.value = this.value;\n    }\n  }\n\n  componentDidLoad() {\n    if (this.inputElement == null) return;\n\n    this.eventListeners.add(this.inputElement, 'six-input-input', debounce(this.handleInputChange, this.debounce));\n    this.eventListeners.add(this.inputElement, 'keydown', (event: Event) => {\n      const keyboardEvent = event as KeyboardEvent;\n      if (keyboardEvent.key === 'Enter') {\n        // emit immediately\n        this.handleInputChange();\n      }\n    });\n  }\n\n  disconnectedCallback() {\n    this.eventListeners.removeAll();\n  }\n\n  render() {\n    return (\n      <div class=\"search-box\">\n        <six-input\n          ref={(el) => (this.inputElement = el)}\n          placeholder={this.placeholder}\n          value={this.value}\n          disabled={this.disabled}\n          clearable={this.clearable}\n        >\n          <six-icon class=\"search-box__icon\" slot=\"prefix\" size=\"small\" onClick={this.handleInputChange}>\n            search\n          </six-icon>\n        </six-input>\n        <slot />\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"version":3,"file":"six-search-field.entry.js","sources":["src/components/six-search-field/six-search-field.scss?tag=six-search-field&encapsulation=shadow","src/components/six-search-field/six-search-field.tsx"],"sourcesContent":["@import 'src/global/component';\n\n:host {\n  display: block;\n}\n\n.search-box {\n  z-index: var(--six-z-index-search-field);\n\n  &__icon {\n    cursor: pointer;\n  }\n}\n","import { Component, Event, EventEmitter, h, Prop, Watch } from '@stencil/core';\nimport { debounce, DEFAULT_DEBOUNCE_FAST } from '../../utils/execution-control';\nimport { EventListeners } from '../../utils/event-listeners';\n\nexport interface SixSearchFieldChangePayload {\n  value: string;\n}\n\n/**\n * @since 1.0\n * @status stable\n *\n * @slot - Used to define the results below the search component.\n */\n\n@Component({\n  tag: 'six-search-field',\n  styleUrl: 'six-search-field.scss',\n  shadow: true,\n})\nexport class SixSearchField {\n  /** The input's placeholder text. */\n  @Prop() placeholder?: string;\n\n  /** Debounce time in milliseconds, default is 300 ms */\n  @Prop({ reflect: true }) debounce = DEFAULT_DEBOUNCE_FAST;\n\n  /** Set to true to disable the input. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** The input's value attribute. */\n  @Prop({ reflect: true }) value = '';\n\n  /** Set to true to add a clear button when the input is populated. */\n  @Prop() clearable = false;\n\n  /** Emitted when a search is triggered */\n  @Event({ eventName: 'six-search-field-change' }) searchFieldChange!: EventEmitter<SixSearchFieldChangePayload>;\n\n  private inputElement?: HTMLSixInputElement;\n\n  private eventListeners = new EventListeners();\n\n  private handleInputChange = () => {\n    if (this.inputElement != null) {\n      this.searchFieldChange.emit({ value: this.inputElement.value });\n    }\n  };\n\n  @Watch('value')\n  handleValueChange() {\n    if (this.inputElement != null) {\n      this.inputElement.value = this.value;\n    }\n  }\n\n  componentDidLoad() {\n    if (this.inputElement == null) return;\n\n    this.eventListeners.add(this.inputElement, 'six-input-input', debounce(this.handleInputChange, this.debounce));\n    this.eventListeners.add(this.inputElement, 'keydown', (event: Event) => {\n      const keyboardEvent = event as KeyboardEvent;\n      if (keyboardEvent.key === 'Enter') {\n        // emit immediately\n        this.handleInputChange();\n      }\n    });\n  }\n\n  disconnectedCallback() {\n    this.eventListeners.removeAll();\n  }\n\n  render() {\n    return (\n      <div class=\"search-box\">\n        <six-input\n          ref={(el) => (this.inputElement = el)}\n          placeholder={this.placeholder}\n          value={this.value}\n          disabled={this.disabled}\n          clearable={this.clearable}\n        >\n          <six-icon class=\"search-box__icon\" slot=\"prefix\" size=\"small\" onClick={this.handleInputChange}>\n            search\n          </six-icon>\n        </six-input>\n        <slot />\n      </div>\n    );\n  }\n}\n"],"names":[],"mappings":";;;;AAAA,MAAM,iBAAiB,GAAG,oNAAoN;;MCoBjO,cAAc,GAAA,MAAA;AAL3B,IAAA,WAAA,CAAA,OAAA,EAAA;;;;AAU2B,QAAA,IAAQ,CAAA,QAAA,GAAG,qBAAqB;;AAGhC,QAAA,IAAQ,CAAA,QAAA,GAAG,KAAK;;AAGhB,QAAA,IAAK,CAAA,KAAA,GAAG,EAAE;;AAG3B,QAAA,IAAS,CAAA,SAAA,GAAG,KAAK;AAOjB,QAAA,IAAA,CAAA,cAAc,GAAG,IAAI,cAAc,EAAE;AAErC,QAAA,IAAiB,CAAA,iBAAA,GAAG,MAAK;AAC/B,YAAA,IAAI,IAAI,CAAC,YAAY,IAAI,IAAI,EAAE;AAC7B,gBAAA,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,CAAC;;AAEnE,SAAC;AA4CF;IAzCC,iBAAiB,GAAA;AACf,QAAA,IAAI,IAAI,CAAC,YAAY,IAAI,IAAI,EAAE;YAC7B,IAAI,CAAC,YAAY,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK;;;IAIxC,gBAAgB,GAAA;AACd,QAAA,IAAI,IAAI,CAAC,YAAY,IAAI,IAAI;YAAE;QAE/B,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,IAAI,CAAC,YAAY,EAAE,iBAAiB,EAAE,QAAQ,CAAC,IAAI,CAAC,iBAAiB,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;AAC9G,QAAA,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,IAAI,CAAC,YAAY,EAAE,SAAS,EAAE,CAAC,KAAY,KAAI;YACrE,MAAM,aAAa,GAAG,KAAsB;AAC5C,YAAA,IAAI,aAAa,CAAC,GAAG,KAAK,OAAO,EAAE;;gBAEjC,IAAI,CAAC,iBAAiB,EAAE;;AAE5B,SAAC,CAAC;;IAGJ,oBAAoB,GAAA;AAClB,QAAA,IAAI,CAAC,cAAc,CAAC,SAAS,EAAE;;IAGjC,MAAM,GAAA;QACJ,QACE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,YAAY,EAAA,EACrB,CAAA,CAAA,WAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,YAAY,GAAG,EAAE,CAAC,EACrC,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,SAAS,EAAE,IAAI,CAAC,SAAS,EAAA,EAEzB,CAAA,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAU,KAAK,EAAC,kBAAkB,EAAC,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,OAAO,EAAC,OAAO,EAAE,IAAI,CAAC,iBAAiB,aAElF,CACD,EACZ,CAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACJ;;;;;;;;;;"}

package/dist/esm/six-select.entry.js

@@ -1,9 +1,43 @@
-import { r as registerInstance, c as createEvent, h, g as getElement } from './index-79d4ef67.js';
-import { h as hasSlot, a as getTextContent } from './slot-56531341.js';
-import { F as FormControl } from './form-control-d403a9cf.js';
-import { E as EventListeners } from './event-listeners-706d4309.js';
-import { D as DEFAULT_DEBOUNCE_FAST, a as debounce } from './execution-control-2ebaf4ef.js';
-import { a as getLanguage } from './error-messages-1eaaad23.js';
+import { r as registerInstance, c as createEvent, h, g as getElement } from './index-BF09Gr5y.js';
+import { h as hasSlot, a as getTextContent } from './slot-j3oIB5oT.js';
+import { F as FormControl } from './form-control-_dvMXnmg.js';
+import { E as EventListeners } from './event-listeners-C4h4qpGl.js';
+import { D as DEFAULT_DEBOUNCE_FAST, a as debounce } from './execution-control-CKhg9ibv.js';
+import { a as getLanguage } from './error-messages-HZugF7pW.js';
+
+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}";
 
@@ -11,9 +45,9 @@ let id = 0;
 const SixSelect = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.sixChange = createEvent(this, "six-select-change", 7);
-        this.sixFocus = createEvent(this, "six-select-focus", 7);
-        this.sixBlur = createEvent(this, "six-select-blur", 7);
+        this.sixChange = createEvent(this, "six-select-change");
+        this.sixFocus = createEvent(this, "six-select-focus");
+        this.sixBlur = createEvent(this, "six-select-blur");
         this.inputId = `select-${++id}`;
         this.labelId = `select-label-${id}`;
         this.helpTextId = `select-help-text-${id}`;
@@ -21,6 +55,68 @@ const SixSelect = class {
         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();
@@ -33,7 +129,8 @@ const SixSelect = class {
             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) => {
@@ -124,12 +221,12 @@ const SixSelect = class {
                 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) => {
@@ -149,6 +246,9 @@ const SixSelect = class {
         };
         this.handleMenuHide = () => {
             this.isOpen = false;
+            if (this.multiple) {
+                this.handleBlur();
+            }
         };
         this.handleSlotChange = () => {
             this.hasHelpTextSlot = hasSlot(this.host, 'help-text');
@@ -156,40 +256,6 @@ const SixSelect = class {
             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;
@@ -201,44 +267,52 @@ const SixSelect = class {
         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() {
@@ -253,16 +327,6 @@ const SixSelect = class {
         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])');
@@ -289,11 +353,6 @@ const SixSelect = class {
         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 = [];
@@ -313,19 +372,30 @@ const SixSelect = class {
     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();
@@ -391,7 +461,7 @@ const SixSelect = class {
             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: 'f9827d54da20b0c36de14650fb04d3a3a97f2918', 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: 'e53e3d25e2c9244625522f94d5b36105e5d987f3', 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,
@@ -406,20 +476,20 @@ const SixSelect = class {
                 '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: '553accc8bd6c4be66593b5f8ac96f485d3e2a8cb', 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: 'f2201e36050a8127d7a173b0c9b39a92b2eb8563', 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: '3f2d238e44f27d9790b316256717f6f673d31a69', exportparts: "base:clear-button", class: "select__clear", name: "clear", size: "small", onClick: this.handleClearClick, tabindex: "-1" })), showExpand && (h("span", { key: '3f7dfa9c4a8f598e91869665c2249b990ac44351', part: "icon", class: "select__icon" }, h("six-icon", { key: '3fa185567fdf0974f630951667c3af1981122064', size: "medium" }, "expand_more"))), h("six-input", { key: '1f4eb55bf27e7bfbfe3b0705af87a156babab038', 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: {
+            }, "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: '5cdcb37a734d566933d283aa966e174ad03cea7a', 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: '7da7f70ca9b2bec1c6c5624bd48d9c4890f67986', 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: 'cb986b3c4abedb7d62a6c172f18033a2c3403c75', onSlotchange: this.handleSlotChange })), this.multiple && this.selectAllButton && (h("div", { key: 'd9839720d77aa9eacf1f45d33eb7d59c9a4ef8f4', class: "select-all", slot: "dropdown-footer" }, h("six-button", { key: 'c684c903473527c3e934a7815fa7bbb5449ea116', type: "link", onClick: () => this.selectAll() }, this.selectAllText == null ? selectAllDefaultText(hasDeselectedOptions) : this.selectAllText))))));
     }
     hasSelection() {
         return this.multiple ? this.value.length > 0 : this.value !== '';
@@ -525,5 +595,6 @@ function selectAllDefaultText(hasDeselectedOptions) {
 SixSelect.style = sixSelectCss;
 
 export { SixSelect as six_select };
+//# sourceMappingURL=six-select.entry.js.map
 
 //# sourceMappingURL=six-select.entry.js.map