@six-group/ui-library 0.0.0-insider.a9875a1 → 0.0.0-insider.ad9373a

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

@@ -3,7 +3,7 @@ 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";
 let id = 0;
 /**
  * @since 1.0
@@ -32,8 +32,9 @@ 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.handleBlur = () => {
             this.hasFocus = false;
             this.sixBlur.emit();
@@ -42,37 +43,26 @@ 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.hide());
             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 +72,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,34 +121,47 @@ 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;
+            // 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) {
+                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;
         };
         this.handleSlotChange = () => {
@@ -148,34 +170,22 @@ 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.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 = DEFAULT_DEBOUNCE_FAST;
+        this.filterDebounce = undefined;
         this.size = 'medium';
         this.hoist = false;
         this.value = '';
@@ -220,14 +230,10 @@ export class SixSelect {
         await this.syncItemsFromValue();
     }
     connectedCallback() {
-        var _a;
         if (this.virtualScroll && this.options === null) {
             console.error('Options must be defined when using virtual scrolling');
         }
-        (_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);
+        this.init();
     }
     componentWillLoad() {
         this.handleSlotChange();
@@ -236,22 +242,22 @@ export class SixSelect {
         }
     }
     componentDidLoad() {
-        if (this.input == null)
-            return;
-        const input = this.input;
-        this.resizeObserver = new ResizeObserver(() => this.resizeMenu());
+        this.init();
         // 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) => {
+                this.value = autocompleteInput.value;
+                this.sixChange.emit({ value: this.value, isSelected: false });
+                event.stopPropagation();
+            }, this.inputDebounce));
+            autocompleteInput.value = Array.isArray(this.value) ? this.value.join(',') : this.value;
+        }
     }
     disconnectedCallback() {
         var _a;
+        this.resizeObserver.disconnect();
         (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.removeEventListener('slotchange', this.handleSlotChange);
         this.eventListeners.removeAll();
     }
@@ -261,6 +267,16 @@ export class SixSelect {
         this.hasFocus = true;
         (_a = this.box) === null || _a === void 0 ? void 0 : _a.focus(options);
     }
+    init() {
+        var _a;
+        (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.addEventListener('slotchange', this.handleSlotChange);
+        this.eventListeners.forward('six-select-change', 'change', this.host);
+        this.eventListeners.forward('six-select-blur', 'blur', this.host);
+        this.eventListeners.forward('six-select-focus', 'focus', this.host);
+        if (this.displayValuesContainer) {
+            this.resizeObserver.observe(this.displayValuesContainer);
+        }
+    }
     getItemLabel(item) {
         var _a, _b;
         const slot = (_a = item.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('slot:not([name])');
@@ -273,92 +289,123 @@ 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');
+    }
+    getSelectionContainerItems() {
+        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);
     }
-    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 items = this.getItems();
+        const selectionContainerItems = this.getSelectionContainerItems();
+        const mainItems = this.getItems();
         const value = this.getValueAsArray();
-        // Sync checked states
-        items.forEach((item) => (item.checked = value.includes(item.value)));
-        // Sync display label
+        selectionContainerItems.forEach((item) => {
+            item.checkType = this.multiple ? 'checkbox' : 'check';
+            item.checked = value.includes(item.value);
+        });
+        mainItems.forEach((item) => {
+            item.checkType = this.multiple ? 'checkbox' : 'check';
+            item.checked = value.includes(item.value);
+        });
+        const checkedItems = getCheckedItems(this.getValueAsArray(), 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;
+        }
+        requestAnimationFrame(() => {
+            this.updateDisplayedValues();
+        });
+    }
+    syncValueFromItems() {
+        const items = this.getItems();
+        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, { 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: {
                 select: true,
                 'select--open': this.isOpen,
                 'select--empty': ((_a = this.value) === null || _a === void 0 ? void 0 : _a.length) === 0,
@@ -367,28 +414,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", { 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", { 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: {
                 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: {
+            }, "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: {
+                '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: {
                 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", { onSlotchange: this.handleSlotChange })), this.multiple && this.selectAllButton && (h("div", { class: "select-all", slot: "dropdown-footer" }, h("six-button", { type: "link", onClick: () => this.selectAll() }, this.selectAllText == null ? selectAllDefaultText(hasDeselectedOptions) : this.selectAllText))))));
     }
     hasSelection() {
         return this.multiple ? this.value.length > 0 : this.value !== '';
     }
+    hasDeselectedOptions() {
+        return this.getVisibleItems().some((opt) => !opt.disabled && !opt.checked);
+    }
     static get is() { return "six-select"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
@@ -421,6 +473,41 @@ export class SixSelect {
                 "reflect": false,
                 "defaultValue": "false"
             },
+            "selectAllButton": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Enables the select all button."
+                },
+                "attribute": "select-all-button",
+                "reflect": false,
+                "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."
+                },
+                "attribute": "select-all-text",
+                "reflect": false
+            },
             "maxTagsVisible": {
                 "type": "number",
                 "mutable": false,
@@ -432,7 +519,10 @@ export class SixSelect {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "deprecated",
+                            "text": ": This property is ignored. The component now displays as many items as possible and computes the \"+n\" dynamically."
+                        }],
                     "text": "The maximum number of tags to show when `multiple` is true. After the maximum, \"+n\" will be shown to indicate the\nnumber of additional items that are selected. Set to -1 to remove the limit."
                 },
                 "attribute": "max-tags-visible",
@@ -515,18 +605,17 @@ 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."
                 },
                 "attribute": "filter-debounce",
-                "reflect": false,
-                "defaultValue": "DEFAULT_DEBOUNCE_FAST"
+                "reflect": false
             },
             "size": {
                 "type": "string",
@@ -864,8 +953,8 @@ export class SixSelect {
             "hasLabelSlot": {},
             "hasErrorTextSlot": {},
             "isOpen": {},
-            "displayLabel": {},
-            "displayTags": {}
+            "displayedValues": {},
+            "selectionContainerItems": {}
         };
     }
     static get events() {
@@ -940,8 +1029,9 @@ export class SixSelect {
                 "complexType": {
                     "signature": "(options?: FocusOptions) => Promise<void>",
                     "parameters": [{
-                            "tags": [],
-                            "text": ""
+                            "name": "options",
+                            "type": "FocusOptions | undefined",
+                            "docs": ""
                         }],
                     "references": {
                         "Promise": {
@@ -985,4 +1075,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