@six-group/ui-library 0.0.0-insider.b26fdef → 0.0.0-insider.b2db78f

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

@@ -3,7 +3,8 @@ import { 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 { isValueEmpty } from "./util";
+import { getLanguage } from "../../utils/error-messages";
+import { convertToValidArrayValue, convertToValidValue, valueEquals } from "./util";
 let id = 0;
 /**
  * @since 1.0
@@ -32,8 +33,71 @@ export class SixSelect {
         this.labelId = `select-label-${id}`;
         this.helpTextId = `select-help-text-${id}`;
         this.errorTextId = `select-error-text-${id}`;
-        this.touched = false;
         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();
@@ -42,37 +106,27 @@ export class SixSelect {
             this.hasFocus = true;
             this.sixFocus.emit();
         };
-        this.handleClearClick = (event) => {
+        this.handleClearClick = async (event) => {
+            var _a;
             event.stopPropagation();
-            this.clearValues();
+            await this.clearValues();
+            await ((_a = this.dropdown) === null || _a === void 0 ? void 0 : _a.show());
+            await this.setFocus();
             this.sixChange.emit({ value: this.value, isSelected: true });
         };
-        this.handleSelectAll = (event) => {
-            const nonFilteredItems = this.getItems().filter((item) => item.style.display !== 'none');
-            const keyName = event.key;
-            const keyCode = event.code;
-            if (keyName === 'Control') {
+        this.handleKeyDown = (event) => {
+            var _a, _b, _c, _d;
+            if (this.virtualScroll || this.autocomplete) {
                 return;
             }
-            if (this.isOpen && this.multiple && keyCode === 'KeyA' && event.ctrlKey) {
-                event.preventDefault();
-                const hasDeselectedOptions = nonFilteredItems.some((opt) => !opt.disabled && !opt.checked);
-                nonFilteredItems
-                    .filter((option) => !option.disabled)
-                    .forEach((option) => (option.checked = hasDeselectedOptions));
-                const checkedItems = nonFilteredItems.filter((option) => option.checked).map((option) => option.value);
-                this.value = hasDeselectedOptions ? checkedItems : [];
-                this.sixChange.emit({ value: this.value, isSelected: true });
+            if (['Control', 'Escape'].includes(event.key)) {
+                return;
             }
-        };
-        this.handleKeyDown = (event) => {
-            var _a, _b, _c, _d;
-            const target = event.target;
-            const items = this.getItems();
-            const firstItem = items[0];
-            const lastItem = items[items.length - 1];
-            // Ignore key presses on tags
-            if (target.tagName.toLowerCase() === 'six-tag') {
+            const items = this.getVisibleItems();
+            // Ctrl-A selects all items
+            if (this.isOpen && this.multiple && event.code === 'KeyA' && event.ctrlKey) {
+                event.preventDefault();
+                this.selectAll();
                 return;
             }
             // Tabbing out of the control closes it
@@ -82,29 +136,48 @@ export class SixSelect {
                 }
                 return;
             }
-            // Up/down opens the menu
-            if (['ArrowDown', 'ArrowUp'].includes(event.key)) {
+            if (event.key === ' ' && !this.multiple) {
+                return;
+            }
+            // Enter and Space selects the active item
+            if (this.activeItemIndex >= 0 && ['Enter', ' '].includes(event.key)) {
+                const activeItem = items.at(this.activeItemIndex);
                 event.preventDefault();
+                activeItem === null || activeItem === void 0 ? void 0 : activeItem.click();
+                return;
+            }
+            // Move the selection when pressing up or down
+            if (['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(event.key)) {
                 // Show the menu if it's not already open
                 if (!this.isOpen) {
                     (_b = this.dropdown) === null || _b === void 0 ? void 0 : _b.show();
                 }
-                // Focus on a menu item
-                if (event.key === 'ArrowDown' && firstItem) {
-                    firstItem.setFocus();
-                    return;
-                }
-                if (event.key === 'ArrowUp' && lastItem) {
-                    lastItem.setFocus();
-                    return;
+                if (items.length > 0) {
+                    event.preventDefault();
+                    if (event.key === 'ArrowDown') {
+                        this.activeItemIndex++;
+                    }
+                    else if (event.key === 'ArrowUp') {
+                        this.activeItemIndex--;
+                    }
+                    else if (event.key === 'Home') {
+                        this.activeItemIndex = 0;
+                    }
+                    else if (event.key === 'End') {
+                        this.activeItemIndex = items.length - 1;
+                    }
+                    if (this.activeItemIndex < 0)
+                        this.activeItemIndex = 0;
+                    if (this.activeItemIndex > items.length - 1)
+                        this.activeItemIndex = items.length - 1;
+                    (_c = items.at(this.activeItemIndex)) === null || _c === void 0 ? void 0 : _c.setFocus();
                 }
             }
-            // All other keys open the menu and initiate type to select
+            // All other keys open the menu
             if (!this.isOpen) {
                 event.stopPropagation();
                 event.preventDefault();
-                (_c = this.dropdown) === null || _c === void 0 ? void 0 : _c.show();
-                (_d = this.menu) === null || _d === void 0 ? void 0 : _d.typeToSelect(event.key);
+                (_d = this.dropdown) === null || _d === void 0 ? void 0 : _d.show();
             }
         };
         this.handleLabelClick = () => {
@@ -112,35 +185,51 @@ export class SixSelect {
             (_a = this.box) === null || _a === void 0 ? void 0 : _a.focus();
         };
         this.handleMenuSelect = (event) => {
-            const item = event.detail.item;
-            const getValue = () => {
-                if (this.multiple) {
-                    return this.value.includes(item.value)
-                        ? this.value.filter((v) => v !== item.value)
-                        : [...this.value, item.value];
-                }
-                else {
-                    return item.value;
-                }
-            };
-            this.value = getValue();
-            this.syncItemsFromValue();
+            const currentItem = event.detail.item;
+            if (this.multiple) {
+                currentItem.checked = !currentItem.checked;
+            }
+            else {
+                this.getItems().forEach((i) => (i.checked = false));
+                currentItem.checked = true;
+            }
+            this.syncValueFromItems();
             this.sixChange.emit({ value: this.value, isSelected: true });
         };
         this.handleMenuShow = (event) => {
-            var _a;
             if (this.disabled) {
                 event.preventDefault();
                 return;
             }
-            this.resizeMenu();
-            (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.observe(this.host);
+            this.activeItemIndex = -1;
+            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) => {
+                            event.stopPropagation();
+                            if (!this.disabled) {
+                                const menuItem = event.target;
+                                const isChecked = menuItem.checked;
+                                menuItem.checked = !isChecked;
+                                item.checked = !isChecked;
+                                this.syncValueFromItems();
+                                this.sixChange.emit({ value: this.value, isSelected: true });
+                            }
+                        } }, this.getItemLabel(item)));
+                });
+            }
             this.isOpen = true;
         };
         this.handleMenuHide = () => {
-            var _a;
-            (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.unobserve(this.host);
             this.isOpen = false;
+            if (this.multiple) {
+                this.handleBlur();
+            }
         };
         this.handleSlotChange = () => {
             this.hasHelpTextSlot = hasSlot(this.host, 'help-text');
@@ -148,52 +237,6 @@ export class SixSelect {
             this.hasErrorTextSlot = hasSlot(this.host, 'error-text');
             this.syncItemsFromValue();
         };
-        this.handleTagInteraction = (event) => {
-            // Don't toggle the menu when a tag's clear button is activated
-            const path = event.composedPath();
-            const clearButton = path.find((el) => {
-                if (el instanceof HTMLElement) {
-                    const element = el;
-                    return element.classList.contains('tag__clear');
-                }
-            });
-            if (clearButton) {
-                event.stopPropagation();
-                this.sixChange.emit({ value: this.value, isSelected: true });
-            }
-        };
-        this.hasFocus = false;
-        this.hasHelpTextSlot = false;
-        this.hasLabelSlot = false;
-        this.hasErrorTextSlot = false;
-        this.isOpen = false;
-        this.displayLabel = '';
-        this.displayTags = [];
-        this.multiple = false;
-        this.maxTagsVisible = 3;
-        this.disabled = false;
-        this.name = '';
-        this.placeholder = '';
-        this.filterPlaceholder = undefined;
-        this.filterDebounce = DEFAULT_DEBOUNCE_FAST;
-        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;
@@ -205,17 +248,13 @@ 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();
     }
@@ -228,30 +267,38 @@ export class SixSelect {
         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() {
-        if (this.input == null)
-            return;
-        const input = this.input;
-        this.resizeObserver = new ResizeObserver(() => this.resizeMenu());
+        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());
-        this.eventListeners.add(input, 'six-input-input', debounce((event) => {
-            const enteredValue = input.value;
-            this.clearValues();
-            this.sixChange.emit({ value: enteredValue, isSelected: false });
-            event.stopPropagation();
-        }, this.inputDebounce));
-        input.value = this.hasSelection() ? this.displayLabel : '';
+        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));
+            const selectedLabel = this.displayedValues.join(', ');
+            autocompleteInput.value = selectedLabel;
+        }
     }
     disconnectedCallback() {
         var _a;
+        this.resizeObserver.disconnect();
         (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.removeEventListener('slotchange', this.handleSlotChange);
         this.eventListeners.removeAll();
     }
@@ -273,92 +320,129 @@ export class SixSelect {
         }
     }
     getItems() {
-        if (this.options !== null) {
-            return this.options.map((option) => h("six-menu-item", { value: option.value }, option.label));
+        if (this.options !== null && this.menu != null && this.menu.shadowRoot != null) {
+            return [...this.menu.shadowRoot.querySelectorAll('six-menu-item')];
         }
         return [...this.host.querySelectorAll('six-menu-item')];
     }
-    hasMenuItems() {
-        return this.getItems().length > 0;
+    getVisibleItems() {
+        const selectionContainerItems = this.getSelectionContainerItems();
+        const mainItems = this.getItems();
+        return [...selectionContainerItems, ...mainItems].filter((i) => i.style.display !== 'none');
     }
-    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);
+    getSelectionContainerItems() {
+        var _a;
+        return [...(((_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('six-menu-item')) || [])];
     }
-    clearValues() {
+    async clearValues() {
         this.value = this.multiple ? [] : '';
-        this.syncItemsFromValue();
+        this.selectionContainerItems = [];
+        await this.syncItemsFromValue();
     }
-    resizeMenu() {
-        if (this.menu == null || this.box == null)
-            return;
-        this.menu.style.minWidth = `${this.box.clientWidth}px`;
-        if (this.dropdown) {
-            this.dropdown.reposition();
-        }
+    selectAll() {
+        const visibleItems = this.getVisibleItems();
+        const hasDeselectedOptions = this.hasDeselectedOptions();
+        visibleItems.filter((option) => !option.disabled).forEach((option) => (option.checked = hasDeselectedOptions));
+        const checkedItems = visibleItems.filter((option) => option.checked).map((option) => option.value);
+        this.value = hasDeselectedOptions ? checkedItems : [];
+        this.sixChange.emit({ value: this.value, isSelected: true });
     }
+    /**
+     * Sets the checked state of menu items and renders the displayed values.
+     */
     async syncItemsFromValue() {
+        const selectionContainerItems = this.getSelectionContainerItems();
+        const mainItems = this.getItems();
+        const value = convertToValidValue(this.value, this.multiple);
+        selectionContainerItems.forEach((item) => {
+            item.checkType = this.multiple ? 'checkbox' : 'check';
+            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';
+            if (Array.isArray(value)) {
+                item.checked = value.some((val) => val === item.value);
+            }
+            else {
+                item.checked = value === item.value;
+            }
+        });
+        const checkedItems = getCheckedItems(convertToValidArrayValue(this.value), mainItems);
+        this.displayedValues = checkedItems.map((i) => this.getItemLabel(i));
+        if (this.autocomplete && this.autocompleteInput != null && !this.hasFocus) {
+            const selectedLabel = this.displayedValues.join(', ');
+            this.autocompleteInput.value = selectedLabel;
+        }
+        requestAnimationFrame(() => {
+            this.updateDisplayedValues();
+        });
+    }
+    syncValueFromItems() {
         const items = this.getItems();
-        const value = this.getValueAsArray();
-        // Sync checked states
-        items.forEach((item) => (item.checked = value.includes(item.value)));
-        // Sync display label
+        const checkedValues = items.filter((item) => item.checked).map((item) => item.value);
         if (this.multiple) {
-            const checkedItems = [];
-            value.forEach((val) => items.map((item) => (item.value === val ? checkedItems.push(item) : null)));
-            this.displayTags = checkedItems.map((item) => {
-                return (h("six-tag", { exportparts: "base:tag", type: "primary", size: this.size, pill: this.pill, clearable: true, onClick: this.handleTagInteraction, onKeyDown: this.handleTagInteraction, "onSix-tag-clear": (event) => {
-                        event.stopPropagation();
-                        if (!this.disabled) {
-                            item.checked = false;
-                            this.syncValueFromItems();
-                        }
-                    } }, this.getItemLabel(item)));
-            });
-            if (this.maxTagsVisible > 0 && this.displayTags.length > this.maxTagsVisible) {
-                const total = this.displayTags.length;
-                this.displayLabel = '';
-                this.displayTags = this.displayTags.slice(0, this.maxTagsVisible);
-                this.displayTags.push(h("six-tag", { exportparts: "base:tag", type: "info", size: this.size }, "+", total - this.maxTagsVisible));
-            }
+            this.value = checkedValues;
         }
         else {
-            this.displayLabel = this.extractLabelForSelectedItem(value, items);
-            this.displayTags = [];
-        }
-        if (!isValueEmpty(this.value)) {
-            this.touched = true;
-        }
-        if (this.touched && this.input != null) {
-            this.input.value = Array.isArray(this.value) ? this.value.join(',') : this.value;
+            this.value = checkedValues.length > 0 ? checkedValues[0] : '';
         }
     }
-    extractLabelForSelectedItem(value, items) {
-        if (value.length === 0 || (value.length === 1 && value[0] === '')) {
-            return '';
+    updateDisplayedValues() {
+        var _a, _b;
+        const displayValueOptions = [...((_b = (_a = this.displayValuesContainer) === null || _a === void 0 ? void 0 : _a.querySelectorAll('.display-value')) !== null && _b !== void 0 ? _b : [])];
+        if (this.displayValuesContainer == null || displayValueOptions.length === 0 || this.overflowCount == null) {
+            return;
         }
-        if (this.options !== null) {
-            const selectedOption = this.options.find((item) => item.value === value[0]);
-            return (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.value) || '';
+        // Show all options and separators to properly measure all widths.
+        displayValueOptions.forEach((d) => {
+            showDisplayValue(d);
+            showSeparator(d);
+        });
+        // Measure available width. The last separator is added to the available width, because it will be hidden later on.
+        const separator = displayValueOptions[displayValueOptions.length - 1].querySelector('.separator');
+        if (separator == null)
+            return;
+        let availableWidth = getWidth(this.displayValuesContainer) + getWidth(separator);
+        // Compute how many display value elements fit in the available width
+        let { fitCount, overflowCount } = computeFitCount(displayValueOptions, availableWidth);
+        if (overflowCount === 0) {
+            // All items fit, hide overflow count and show all values.
+            hideOverflowCount(this.overflowCount);
+            showFittingValues(displayValueOptions, fitCount);
+        }
+        else {
+            // Not all items fit in the available width. Recompute the available width with the overflow-count visible.
+            // Increment overflow count by one to make sure the elements fit, even if the overflow count increases to the
+            // next higher power of ten, e.g. from 9 to 10 or 99 to 100.
+            setOverflowCount(this.overflowCount, overflowCount + 1);
+            showOverflowCount(this.overflowCount);
+            // Subtract the overflow count from the available width
+            availableWidth = availableWidth - getWidth(this.overflowCount);
+            // Compute how many display value elements fit in the new available width
+            ({ fitCount, overflowCount } = computeFitCount(displayValueOptions, availableWidth));
+            // Show overflow count and items that fit.
+            setOverflowCount(this.overflowCount, overflowCount);
+            showFittingValues(displayValueOptions, fitCount);
         }
-        const checkedItem = items.find((item) => item.value === value[0]);
-        return checkedItem ? this.getItemLabel(checkedItem) : '';
-    }
-    syncValueFromItems() {
-        const items = this.getItems();
-        const checkedItems = items.filter((item) => item.checked);
-        const checkedValues = checkedItems.map((item) => item.value);
-        this.value = this.multiple
-            ? this.getValueAsArray().filter((val) => checkedValues.includes(val))
-            : checkedValues.length > 0
-                ? checkedValues[0]
-                : '';
     }
     render() {
         var _a;
         const hasSelection = this.hasSelection();
-        return (h(FormControl, { inputId: this.inputId, label: this.label, labelId: this.labelId, hasLabelSlot: this.hasLabelSlot, helpTextId: this.helpTextId, helpText: this.helpText, hasHelpTextSlot: this.hasHelpTextSlot, errorTextId: this.errorTextId, errorText: this.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, closeOnSelect: !this.multiple, containingElement: this.host, disableHideOnEnterAndSpace: this.autocomplete, class: {
+        const items = this.getItems();
+        const hasMenuItems = items.length > 0;
+        const hasDeselectedOptions = this.hasDeselectedOptions();
+        let showClear = false;
+        let showExpand = hasMenuItems;
+        if (this.clearable && hasSelection) {
+            showClear = true;
+            showExpand = false;
+        }
+        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,
@@ -367,28 +451,33 @@ export class SixSelect {
                 'select--disabled': this.disabled,
                 'select--multiple': this.multiple,
                 'select--has-tags': this.multiple && hasSelection,
-                'select--placeholder-visible': this.displayLabel === '',
+                'select--placeholder-visible': this.displayedValues.length === 0,
                 'select--small': this.size === 'small',
                 'select--medium': this.size === 'medium',
                 'select--large': this.size === 'large',
                 'select--pill': this.pill,
                 'select--invalid': this.invalid,
-            }, onKeyDown: this.handleSelectAll, "onSix-dropdown-show": this.handleMenuShow, "onSix-dropdown-hide": this.handleMenuHide, filterPlaceholder: this.filterPlaceholder, filterDebounce: this.filterDebounce, filter: this.filter, asyncFilter: this.asyncFilter }, h("div", { slot: "trigger", ref: (el) => (this.box = el), id: this.inputId, class: {
+            }, 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, onKeyDown: this.handleKeyDown }, h("span", { class: { select__label: true, 'select__label--single': !this.displayTags.length } }, this.displayTags.length > 0 ? (h("span", { part: "tags", class: "select__tags" }, this.displayTags)) : (this.displayLabel || this.placeholder)), this.clearable && hasSelection && (h("six-icon-button", { exportparts: "base:clear-button", class: "select__clear", name: "clear", size: "small", onClick: this.handleClearClick, tabindex: "-1" })), this.hasMenuItems() && (h("span", { part: "icon", class: "select__icon" }, h("six-icon", { size: "medium" }, "expand_more"))), h("six-input", { ref: (el) => (this.input = el), class: {
+            }, 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: '021f19d93247a0cadf811a24580dc8f46ed5004f', 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("six-menu", { ref: (el) => (this.menu = el), part: "menu", 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: '24abda79d4b024a062c604ca7a02f3e1f51159cb', class: {
+                'selection-container': true,
+                'selection-container--border': this.selectionContainerItems.length > 0 && items.length !== this.selectionContainerItems.length,
+            } }, this.selectionContainerItems), h("six-menu", { key: 'ffd8ebfed22f01708bbb08d81c15341341e7727a', ref: (el) => (this.menu = el), part: "menu", class: {
                 select__menu: true,
-                'select__menu--filtered': this.filter || this.asyncFilter,
-                'select__menu--hidden': !this.hasMenuItems(),
-            }, "onSix-menu-item-selected": this.handleMenuSelect, items: this.options, virtualScroll: this.virtualScroll, "remove-box-shadow": true }, h("slot", { onSlotchange: this.handleSlotChange })))));
+                '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: 'fb614513d6f9477cdfa7e4a13ac503fea2d76a82', onSlotchange: this.handleSlotChange })), this.multiple && this.selectAllButton && (h("div", { key: '14a20b465530efeb97e140d26d73698d00ac55ce', class: "select-all", slot: "dropdown-footer" }, h("six-button", { key: '8ece78f471f1d5fb8efa5a16b084987c86dac13c', type: "link", onClick: () => this.selectAll() }, this.selectAllText == null ? selectAllDefaultText(hasDeselectedOptions) : this.selectAllText))))));
     }
     hasSelection() {
         return this.multiple ? this.value.length > 0 : this.value !== '';
     }
+    hasDeselectedOptions() {
+        return this.getVisibleItems().some((opt) => !opt.disabled && !opt.checked);
+    }
     static get is() { return "six-select"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
@@ -417,27 +506,50 @@ export class SixSelect {
                     "tags": [],
                     "text": "Set to true to enable multiselect."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "multiple",
                 "reflect": false,
                 "defaultValue": "false"
             },
-            "maxTagsVisible": {
-                "type": "number",
+            "selectAllButton": {
+                "type": "boolean",
                 "mutable": false,
                 "complexType": {
-                    "original": "number",
-                    "resolved": "number",
+                    "original": "boolean",
+                    "resolved": "boolean",
                     "references": {}
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "The maximum number of tags to show when `multiple` is true. After the maximum, \"+n\" will be shown to indicate the\nnumber of additional items that are selected. Set to -1 to remove the limit."
+                    "text": "Enables the select all button."
                 },
-                "attribute": "max-tags-visible",
+                "getter": false,
+                "setter": false,
+                "attribute": "select-all-button",
                 "reflect": false,
-                "defaultValue": "3"
+                "defaultValue": "false"
+            },
+            "selectAllText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Custom text for the \"select all\" button. Defaults to \"Select all\" and equivalents in supported languages."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "select-all-text",
+                "reflect": false
             },
             "disabled": {
                 "type": "boolean",
@@ -453,6 +565,8 @@ export class SixSelect {
                     "tags": [],
                     "text": "Set to true to disable the select control."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "disabled",
                 "reflect": false,
                 "defaultValue": "false"
@@ -471,6 +585,8 @@ export class SixSelect {
                     "tags": [],
                     "text": "The select's name."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "name",
                 "reflect": false,
                 "defaultValue": "''"
@@ -489,6 +605,8 @@ export class SixSelect {
                     "tags": [],
                     "text": "The select's placeholder text."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "placeholder",
                 "reflect": false,
                 "defaultValue": "''"
@@ -507,6 +625,8 @@ export class SixSelect {
                     "tags": [],
                     "text": "The filter's placeholder text."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "filter-placeholder",
                 "reflect": false
             },
@@ -515,18 +635,19 @@ export class SixSelect {
                 "mutable": false,
                 "complexType": {
                     "original": "number",
-                    "resolved": "number",
+                    "resolved": "number | undefined",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "The debounce for the filter callbacks."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "filter-debounce",
-                "reflect": false,
-                "defaultValue": "DEFAULT_DEBOUNCE_FAST"
+                "reflect": false
             },
             "size": {
                 "type": "string",
@@ -542,6 +663,8 @@ export class SixSelect {
                     "tags": [],
                     "text": "The select's size."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "size",
                 "reflect": false,
                 "defaultValue": "'medium'"
@@ -560,6 +683,8 @@ 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`."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "hoist",
                 "reflect": false,
                 "defaultValue": "false"
@@ -578,6 +703,8 @@ export class SixSelect {
                     "tags": [],
                     "text": "The value of the control. This will be a string or an array depending on `multiple`."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "value",
                 "reflect": false,
                 "defaultValue": "''"
@@ -596,6 +723,8 @@ export class SixSelect {
                     "tags": [],
                     "text": "Set to true to draw a pill-style select with rounded edges."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "pill",
                 "reflect": false,
                 "defaultValue": "false"
@@ -614,6 +743,8 @@ export class SixSelect {
                     "tags": [],
                     "text": "The select's help text. Alternatively, you can use the help-text slot."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "help-text",
                 "reflect": false,
                 "defaultValue": "''"
@@ -632,6 +763,8 @@ export class SixSelect {
                     "tags": [],
                     "text": "Set to true to show an asterisk beneath the label."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "required",
                 "reflect": false,
                 "defaultValue": "false"
@@ -650,6 +783,8 @@ export class SixSelect {
                     "tags": [],
                     "text": "Set to true to add a clear button when the select is populated."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "clearable",
                 "reflect": false,
                 "defaultValue": "false"
@@ -668,6 +803,8 @@ export class SixSelect {
                     "tags": [],
                     "text": "The label text."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "label",
                 "reflect": false,
                 "defaultValue": "''"
@@ -686,6 +823,8 @@ export class SixSelect {
                     "tags": [],
                     "text": "The error message shown, if `invalid` is set to true."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "error-text",
                 "reflect": false,
                 "defaultValue": "''"
@@ -704,6 +843,8 @@ export class SixSelect {
                     "tags": [],
                     "text": "The number of error texts to be shown (if the error-text slot isn't used). Defaults to 1"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "error-text-count",
                 "reflect": false
             },
@@ -721,6 +862,8 @@ 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."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "invalid",
                 "reflect": true,
                 "defaultValue": "false"
@@ -739,6 +882,8 @@ export class SixSelect {
                     "tags": [],
                     "text": "Set to render as line"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "line",
                 "reflect": false,
                 "defaultValue": "false"
@@ -757,6 +902,8 @@ export class SixSelect {
                     "tags": [],
                     "text": "Set to true to allow filtering for entries in the dropdown"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "filter",
                 "reflect": false,
                 "defaultValue": "false"
@@ -775,6 +922,8 @@ 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"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "async-filter",
                 "reflect": false,
                 "defaultValue": "false"
@@ -793,6 +942,8 @@ export class SixSelect {
                     "tags": [],
                     "text": "Set to true to turn the six-select into an autocomplete."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "autocomplete",
                 "reflect": false,
                 "defaultValue": "false"
@@ -811,6 +962,8 @@ export class SixSelect {
                     "tags": [],
                     "text": "The debounce for when the input changes for autocompletes should be emitted"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "input-debounce",
                 "reflect": false,
                 "defaultValue": "DEFAULT_DEBOUNCE_FAST"
@@ -835,6 +988,8 @@ 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": {
@@ -851,6 +1006,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."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "virtual-scroll",
                 "reflect": false,
                 "defaultValue": "false"
@@ -864,8 +1021,8 @@ export class SixSelect {
             "hasLabelSlot": {},
             "hasErrorTextSlot": {},
             "isOpen": {},
-            "displayLabel": {},
-            "displayTags": {}
+            "displayedValues": {},
+            "selectionContainerItems": {}
         };
     }
     static get events() {
@@ -940,8 +1097,9 @@ export class SixSelect {
                 "complexType": {
                     "signature": "(options?: FocusOptions) => Promise<void>",
                     "parameters": [{
-                            "tags": [],
-                            "text": ""
+                            "name": "options",
+                            "type": "FocusOptions | undefined",
+                            "docs": ""
                         }],
                     "references": {
                         "Promise": {
@@ -985,4 +1143,89 @@ export class SixSelect {
             }];
     }
 }
+function getCheckedItems(value, items) {
+    return items.filter((item) => value.includes(item.value));
+}
+function getWidth(element) {
+    return element.getBoundingClientRect().width;
+}
+function computeFitCount(options, availableWidth) {
+    let accumulatedWidth = 0;
+    let fitCount = 0;
+    for (let i = 0; i < options.length; i++) {
+        const displayOption = options[i];
+        const width = getWidth(displayOption);
+        if (i === 0 && width > availableWidth) {
+            fitCount = 1;
+            break;
+        }
+        accumulatedWidth += width;
+        if (accumulatedWidth > availableWidth) {
+            break;
+        }
+        else {
+            fitCount += 1;
+        }
+    }
+    const overflowCount = options.length - fitCount;
+    return { fitCount, overflowCount };
+}
+function showFittingValues(displayValueOptions, fitCount) {
+    if (displayValueOptions.length > 0) {
+        // show items that fit
+        displayValueOptions.slice(0, fitCount).forEach((displayValue, index, list) => {
+            showDisplayValue(displayValue);
+            const isLast = index === list.length - 1;
+            if (isLast) {
+                hideSeparator(displayValue);
+            }
+            else {
+                showSeparator(displayValue);
+            }
+        });
+        // hide the rest
+        displayValueOptions.slice(fitCount).forEach((displayValue) => {
+            hideDisplayValue(displayValue);
+            showSeparator(displayValue);
+        });
+    }
+}
+function hideSeparator(displayValueOption) {
+    var _a;
+    (_a = displayValueOption.querySelector('.separator')) === null || _a === void 0 ? void 0 : _a.classList.add('separator--hidden');
+}
+function showSeparator(displayValueOption) {
+    var _a;
+    (_a = displayValueOption.querySelector('.separator')) === null || _a === void 0 ? void 0 : _a.classList.remove('separator--hidden');
+}
+function showDisplayValue(displayValueOption) {
+    displayValueOption.classList.remove('display-value--hidden');
+}
+function hideDisplayValue(displayValueOption) {
+    displayValueOption.classList.add('display-value--hidden');
+}
+function setOverflowCount(overflowCount, count) {
+    overflowCount.textContent = `+${count}`;
+}
+function showOverflowCount(overflowCount) {
+    overflowCount.classList.remove('overflow-count-hidden');
+}
+function hideOverflowCount(overflowCount) {
+    overflowCount.classList.add('overflow-count-hidden');
+}
+function selectAllDefaultText(hasDeselectedOptions) {
+    const lang = getLanguage();
+    switch (lang) {
+        case 'de':
+            return hasDeselectedOptions ? 'Alle auswählen' : 'Alle abwählen';
+        case 'fr':
+            return hasDeselectedOptions ? 'Tout sélectionner' : 'Tout désélectionner';
+        case 'it':
+            return hasDeselectedOptions ? 'Seleziona tutto' : 'Deseleziona tutto';
+        case 'en':
+            return hasDeselectedOptions ? 'Select all' : 'Deselect all';
+        case 'es':
+            return hasDeselectedOptions ? 'Seleccionar todo' : 'Deseleccionar todo';
+    }
+}
 //# sourceMappingURL=six-select.js.map