@siemens/ix 4.0.0 → 4.1.0

package/dist/collection/components/pane/pane.js

@@ -455,7 +455,7 @@ export class Pane {
     }
     render() {
         const rotate = !this.expanded && !this.isMobile && this.isLeftRightPane;
-        return (h(Host, { key: 'd90ef7a63b141b3af9c9f04aba41cf8ef13c448a', class: {
+        return (h(Host, { key: 'd4dcd94494a7a1a20cb9ce1613f60b07708a1a6a', class: {
                 'floating-pane': this.floating,
                 'inline-pane': !this.floating,
                 'mobile-overlay': this.expanded && this.isMobile,
@@ -479,28 +479,28 @@ export class Pane {
                     !this.expanded &&
                     !this.floating,
                 'not-visible': this.hideOnCollapse && !this.expanded,
-            }, "aria-expanded": a11yBoolean(this.expanded) }, h("aside", { key: '02cb43bcca7a7d6acf5d341f9a4e7ee5739f72c1', id: `pane-${this.composition}`, class: {
+            }, "aria-expanded": a11yBoolean(this.expanded) }, h("aside", { key: '16c38b4a2706ee2cc82975e7cc8f48434997d668', id: `pane-${this.composition}`, class: {
                 'top-bottom-pane': this.isBottomTopPane && !this.isMobile,
                 'left-right-pane': this.isLeftRightPane && !this.isMobile,
                 'mobile-pane': this.isMobile,
                 expanded: this.expanded,
-            } }, h("div", { key: 'be05dfaf0f1080ad0bcdbd41ea01ac151b2aeb86', id: "title-div", class: {
+            } }, h("div", { key: 'e4f68f0ab4d1c720bd2bbd2c8a3362e8c1166216', id: "title-div", class: {
                 title: !this.isMobile && !this.hideOnCollapse && !this.showContent,
                 'title-finished': !this.isMobile && !this.hideOnCollapse && this.showContent,
                 'title-expanded': !this.isMobile && !this.hideOnCollapse && this.expanded,
                 'title-hide-on-collapse': !this.isMobile && this.hideOnCollapse,
                 'title-mobile': this.isMobile,
                 'header-gap': !this.isMobile && !this.hideOnCollapse,
-            } }, h("ix-icon-button", { key: '767886aea1428fdc4c10875de8eb0dd3750b5cdf', class: "title-icon", size: "24", icon: this.expanded
+            } }, h("ix-icon-button", { key: '3d6a8b606b790e4a0401de198dd7f96536cff5a9', class: "title-icon", size: "24", icon: this.expanded
                 ? this.isMobile || this.hideOnCollapse
                     ? iconClose
                     : this.expandIcon
                 : this.minimizeIcon, iconColor: this.expanded && (this.isMobile || this.hideOnCollapse)
                 ? 'color-soft-text'
-                : undefined, variant: "subtle-tertiary", onClick: () => this.dispatchExpandedChangedEvent(), "aria-controls": `pane-${this.composition}`, "aria-label": this.ariaLabelCollapseCloseButton }), h("div", { key: '5fd6b9619ce193b891fd98a9bee39aad31f3747d', class: {
+                : undefined, variant: "subtle-tertiary", onClick: () => this.dispatchExpandedChangedEvent(), "aria-controls": `pane-${this.composition}`, "aria-label": this.ariaLabelCollapseCloseButton }), h("div", { key: 'e7410bc38e5c387ac6b92d7805cd4b82a4e5517e', class: {
                 'title-text': true,
                 rotate: rotate,
-            } }, this.icon && (h("ix-icon", { key: '38d9ad10b7d61868aa94b9b02ca3f74063e1f6e8', class: "pane-icon", size: "24", name: this.icon, "aria-label": this.ariaLabelIcon })), h("div", { key: '4b69e18d0297c51b814531353192a2199477ca29', class: "title-text-overflow" }, h("ix-typography", { key: 'fe5a51d0b8189484c85c7e373e4144aacdda2605', format: "h4" }, this.heading)), this.expanded && (h("div", { key: '39edc85909cabbbc8103d6a322c0385ae9d495b5', class: "slot-header" }, h("slot", { key: '886bd5bc2aad66c103698cf38259072ca524563a', name: "header" }))))), h("div", { key: 'e4bdfa446878efd622c8d1c10ad53f94caf0da9d', class: "side-pane-content", hidden: !this.showContent }, h("slot", { key: '967fed090b6ab347a2140815dd93a29dee023b54' })))));
+            } }, this.icon && (h("ix-icon", { key: '0429aadaabf1c6ff85d2858530d134884dde885a', class: "pane-icon", size: "24", name: this.icon, "aria-label": this.ariaLabelIcon })), h("div", { key: 'a1f91e5bfc947a90423df8706bc97c13c5fe8f5b', class: "title-text-overflow" }, h("ix-typography", { key: 'c7e45df0f33e0ca37fe1ca02ed552c7602e241f4', format: "h4" }, this.heading)), this.expanded && (h("div", { key: '1780fd1205121d168c240ef7f2990318f42cef52', class: "slot-header" }, h("slot", { key: 'ff9c90ed6e1c9fd23850168a0cb6457aeb27663f', name: "header" }))))), h("div", { key: '67ce0be6d20ecbaf426f6d11acf9bdfab14d9945', class: "side-pane-content", hidden: !this.showContent }, h("slot", { key: 'd5ee452fe64264f93ba57300a099abbaa89cfbd5' })))));
     }
     static get is() { return "ix-pane"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/pane-layout/pane-layout.js

@@ -238,7 +238,7 @@ export class Panes {
         return pane ? pane.floating : false;
     }
     render() {
-        return (h(Host, { key: '8750c0c2d53cce0c8996dc28e8ed328d0036142e' }, !this.isMobile ? (this.layout == 'full-vertical' ? (h("div", { class: "side-panes-wrapper" }, h("div", { class: {
+        return (h(Host, { key: 'f5825e5fd84ca1f96e9eb6d19c528107167b4e16' }, !this.isMobile ? (this.layout == 'full-vertical' ? (h("div", { class: "side-panes-wrapper" }, h("div", { class: {
                 row: true,
                 'padding-left': this.hasPadding('left'),
                 'padding-right': this.hasPadding('right'),

package/dist/collection/components/pill/pill.js

@@ -57,13 +57,13 @@ export class Pill {
                 [this.outline ? 'borderColor' : 'backgroundColor']: this.background,
             };
         }
-        return (h(Host, { key: '95aefc19a906deedb01249939024ad937f82f212', style: this.variant === 'custom'
+        return (h(Host, { key: 'aa669a2d03f9fc237cc40003d5a28718a403b764', style: this.variant === 'custom'
                 ? {
                     '--ix-icon-button-color': this.pillColor,
                 }
                 : {}, class: {
                 'align-left': this.alignLeft,
-            } }, h("div", { key: '2e056a3b7a048b087ea1cd7cfbfed90a899cb5b1', ref: this.containerElementRef, style: Object.assign({}, customStyle), class: {
+            } }, h("div", { key: '0e15da18791505629957df85918d7752cfa62662', ref: this.containerElementRef, style: Object.assign({}, customStyle), class: {
                 container: true,
                 outline: this.outline,
                 inactive: false,
@@ -78,9 +78,9 @@ export class Pill {
                 closable: false,
                 icon: !!this.icon,
                 'with-gap': !this.iconOnly,
-            } }, this.icon && (h("ix-icon", { key: '7ad101403100e938791c5f6c8c1ea5df7bc9097f', class: {
+            } }, this.icon && (h("ix-icon", { key: '49abe1808017f85a25fb2d8abd24db421f43f762', class: {
                 'with-icon': true,
-            }, name: this.icon, size: '16', "aria-label": this.ariaLabelIcon })), h("span", { key: '5a7fafab5c670fb778febc21477eefe42475aea3', class: "slot-container" }, h("slot", { key: '595de03aae3978e6b40674adf16ffb3b47db1e6d', onSlotchange: () => this.checkIfContentAvailable() }))), this.getTooltip()));
+            }, name: this.icon, size: '16', "aria-label": this.ariaLabelIcon })), h("span", { key: '582ec1baae99962550035f613a8f74d9d8d9f56e', class: "slot-container" }, h("slot", { key: '46c0481383cfbc55dcb60981cb10dd2b460930eb', onSlotchange: () => this.checkIfContentAvailable() }))), this.getTooltip()));
     }
     static get is() { return "ix-pill"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/progress-indicator/progress-indicator.js

@@ -87,17 +87,17 @@ export class ProgressIndicator {
     render() {
         const normalizedValue = ((this.value - this.min) / (this.max - this.min)) * 100;
         const clampedValue = Math.max(0, Math.min(normalizedValue, 100));
-        return (h(Host, { key: '640d68ad2e2fd3f61c60c91ea2b18725334a939f', class: {
+        return (h(Host, { key: '55cecc574b40c14bd8a4ba7a4d1f0e1d8d73f07b', class: {
                 linear: this.type === 'linear',
                 circular: this.type === 'circular',
-            }, tabIndex: -1 }, h("div", { key: 'c9cbf3913838d5ea0d9f89dc46680d86690a3382', class: {
+            }, tabIndex: -1 }, h("div", { key: '3db1f913e4c4793106d7865b52ef4dcb07889188', class: {
                 'progress-indicator': true,
                 [this.size]: true,
                 [this.status]: true,
                 ['text-center']: this.textAlignment === 'center',
                 ['text-left']: this.textAlignment === 'left',
                 ['text-right']: this.textAlignment === 'right',
-            } }, this.label && (h("ix-typography", { key: '25682b4008e976cb4a02d2bb957baed33e0250d7', format: "label", textColor: this.status === 'error' ? 'alarm' : 'soft', class: 'label' }, this.label)), h("div", { key: '74a13977a442268c72278f005965d5263e741e12', class: "progress-container" }, this.type === 'linear' ? (h(Fragment, null, h(LinearBar, { value: clampedValue, status: this.status }), h("div", { class: "linear-slot" }, h("slot", null)))) : (h(CircularProgress, { status: this.status, alignment: this.textAlignment, value: clampedValue, size: this.size }, h("slot", null)))), this.showTextAsTooltip === true && this.helperText ? (h("ix-tooltip", { for: this.hostElement, showDelay: 500, placement: "bottom" }, this.getHelperText())) : (this.getHelperText()))));
+            } }, this.label && (h("ix-typography", { key: 'd8cd960dcfee8bfc20102d2b071661a186dcc854', format: "label", textColor: this.status === 'error' ? 'alarm' : 'soft', class: 'label' }, this.label)), h("div", { key: 'd149e99776e95f8051cc02e70d16d3c5103d98ba', class: "progress-container" }, this.type === 'linear' ? (h(Fragment, null, h(LinearBar, { value: clampedValue, status: this.status }), h("div", { class: "linear-slot" }, h("slot", null)))) : (h(CircularProgress, { status: this.status, alignment: this.textAlignment, value: clampedValue, size: this.size }, h("slot", null)))), this.showTextAsTooltip === true && this.helperText ? (h("ix-tooltip", { for: this.hostElement, showDelay: 500, placement: "bottom" }, this.getHelperText())) : (this.getHelperText()))));
     }
     static get is() { return "ix-progress-indicator"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/push-card/push-card.js

@@ -20,7 +20,7 @@ export class PushCard {
     }
     render() {
         var _a;
-        return (h(Host, { key: '32d1c2383ba5f21901eacfd3048af7435100b2b7', class: `card-${this.variant}` }, h("ix-card", { key: 'b1d03d963e570c329056cf3eb70c09ef6abc13a9', variant: this.variant }, h("ix-card-content", { key: '9c46d2744676c929137f8bd9dd9ac1058d6c6a53' }, h("ix-card-title", { key: '76c052d9be63151295802b58d42e269dc0149c68' }, this.icon ? (h("ix-icon", { class: 'icon', name: this.icon, size: "32", "aria-label": this.ariaLabelIcon })) : null, h("ix-typography", { key: 'be3a399500fa1dc58c10c8d01eb1691fb662940f', format: "display-xxl" }, (_a = this.notification) !== null && _a !== void 0 ? _a : 0), h("slot", { key: 'eadeb7a0b034113e2e0a5d8557a8bf9000027306', name: "title-action" })), h("ix-typography", { key: '93dd2faeba0563a3e7c195941dc1424975e032fb', format: "h4" }, this.heading), h("ix-typography", { key: '3279cd3e6b24c0029e8d83a66a5f3344eee496b4' }, this.subheading)), h("ix-card-accordion", { key: 'c36c63dac6e2ccf61745143a0fa5bf82bebac085', collapse: !this.expanded, variant: this.variant }, h("slot", { key: '7567ec4ff104a9933a632004aea3b3e607660471' })))));
+        return (h(Host, { key: 'ce5e4eb49ffe548ae912dfb9df2ff02e570aef15', class: `card-${this.variant}` }, h("ix-card", { key: '09ee07b5244171d3cd2a2eaf99180a71364326e6', variant: this.variant }, h("ix-card-content", { key: '4ca37f7946dfaf600c21fa516a6a79c95c3369f3' }, h("ix-card-title", { key: '14508386f9ad32b641b7404b8d1845f8f215a12f' }, this.icon ? (h("ix-icon", { class: 'icon', name: this.icon, size: "32", "aria-label": this.ariaLabelIcon })) : null, h("ix-typography", { key: '004e0f78e304e16b085cba401d4fe6067c579819', format: "display-xxl" }, (_a = this.notification) !== null && _a !== void 0 ? _a : 0), h("slot", { key: 'b5207aabd014e0e180eb1248795bccc23c09b850', name: "title-action" })), h("ix-typography", { key: 'e39c0d3762869afd918cf9f8bb75bcbad35798d2', format: "h4" }, this.heading), h("ix-typography", { key: '52c82e776f50a1e848cb163cf974402fc58a5011' }, this.subheading)), h("ix-card-accordion", { key: '28ba4043b6494617eb0a4ea03eca56c198e10766', collapse: !this.expanded, variant: this.variant }, h("slot", { key: 'f2be8b7cd43af05c3af1be4a5642871e3413d6f8' })))));
     }
     static get is() { return "ix-push-card"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/radio/radio.js

@@ -113,17 +113,17 @@ export class Radio {
         if (this.disabled) {
             tabIndex = -1;
         }
-        return (h(Host, { key: 'f2af88d1133c45be1101d9148f8e00f5428be7a6', "aria-checked": a11yBoolean(this.checked), "aria-disabled": a11yBoolean(this.disabled), role: "radio", tabindex: tabIndex, class: {
+        return (h(Host, { key: '0a08dcbeaaf21bb9063ff44dbb9b7fec0bd18b85', "aria-checked": a11yBoolean(this.checked), "aria-disabled": a11yBoolean(this.disabled), role: "radio", tabindex: tabIndex, class: {
                 disabled: this.disabled,
                 checked: this.checked,
             }, onClick: () => {
                 if (this.disabled)
                     return;
                 this.setCheckedState(true);
-            }, onKeyDown: (event) => this.onKeyDown(event), onBlur: () => this.ixBlur.emit() }, h("label", { key: '93f6a862ac81885b247dc499d34e966d56973970' }, h("div", { key: '253b7ae5544c8d8ee3449ea0be187246cbe314d5', class: "radio-button" }, h("div", { key: '2e0d99a793f5ddd3b3d5a5d32732e8cd88d8b1f5', "aria-hidden": "true", class: {
+            }, onKeyDown: (event) => this.onKeyDown(event), onBlur: () => this.ixBlur.emit() }, h("label", { key: 'ba82e05023a706e366cede669060ec11d2848754' }, h("div", { key: 'c3b75eea221618adc27dec099089dac0f84a91ac', class: "radio-button" }, h("div", { key: 'd5d10cfce1442f641f939aa16a6feb79fc38caf0', "aria-hidden": "true", class: {
                 ['radio-checkmark']: true,
                 checked: this.checked,
-            } }, h("div", { key: '7ad24225a37a30e1f002bc07f450a85eb42b7383', class: "checkmark", style: { visibility: this.checked ? 'visible' : 'hidden' } }))), this.label && (h("ix-typography", { key: '7790a763f1a329cc3e0595aeddbe7e5a66c8339e', format: "label", textColor: this.disabled ? 'weak' : 'std' }, this.label, h("slot", { key: 'ff24cb9646a2a1c4b18236af291d13cd044f3235' }))))));
+            } }, h("div", { key: 'fe7c6830a7fb254291fe95d4310b59bd32ed9492', class: "checkmark", style: { visibility: this.checked ? 'visible' : 'hidden' } }))), this.label && (h("ix-typography", { key: 'bc5fe1821b5686760eb7fa3959cf30b54cca40ee', format: "label", textColor: this.disabled ? 'weak' : 'std' }, this.label, h("slot", { key: 'a72b3d10cdcbaa398a6f59b9ce1d036f12e4819c' }))))));
     }
     static get is() { return "ix-radio"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/radio-group/radio-group.js

@@ -147,10 +147,10 @@ export class RadiobuttonGroup {
         nextRadio.focus();
     }
     render() {
-        return (h(Host, { key: '25eec92511036bb23386e7ccd58ed9529a8d6723', onIxBlur: () => (this.touched = true), ref: this.groupRef, role: "radiogroup" }, h("ix-field-wrapper", { key: '6651bfac925b36a90036e41dc5c0040a8730a8da', label: this.label, helperText: this.helperText, invalidText: this.invalidText, infoText: this.infoText, warningText: this.warningText, validText: this.validText, showTextAsTooltip: this.showTextAsTooltip, isValid: this.isValid, isInfo: this.isInfo, isWarning: this.isWarning, isInvalid: this.isInvalid, controlRef: this.groupRef }, h("div", { key: '76d7c9f366118f8d056e94cc079fc23a0b21eea5', class: {
+        return (h(Host, { key: 'db3158ccabcd99d1b5185607b848c424a4c4c970', onIxBlur: () => (this.touched = true), ref: this.groupRef, role: "radiogroup" }, h("ix-field-wrapper", { key: '5668fbc12f4d264869dfe03dc2bbd3d380da6ae1', label: this.label, helperText: this.helperText, invalidText: this.invalidText, infoText: this.infoText, warningText: this.warningText, validText: this.validText, showTextAsTooltip: this.showTextAsTooltip, isValid: this.isValid, isInfo: this.isInfo, isWarning: this.isWarning, isInvalid: this.isInvalid, controlRef: this.groupRef }, h("div", { key: 'a5ec59c15eb8353d66bc6f0668dd7148dbd447a6', class: {
                 'checkbox-container': true,
                 'row-layout': this.direction === 'row',
-            } }, h("slot", { key: '231e640d7a46d5428b0c8a852c41fe08bbfdbe09' })))));
+            } }, h("slot", { key: '325b19034d55cc20cd556a24585d05ce32f22bb6' })))));
     }
     static get is() { return "ix-radio-group"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/row/row.js

@@ -9,7 +9,7 @@
 import { h, Host } from "@stencil/core";
 export class Row {
     render() {
-        return (h(Host, { key: 'e52017d7fe80956a0d68089decc17c4f8f5de360' }, h("slot", { key: '21a9f020f3afa15594ae029dd50643126303697c' })));
+        return (h(Host, { key: 'ff07b78a26aaca76105d0cf296807512620aa6e6' }, h("slot", { key: '46cf7e7f85f4a44831b6482df9a9b667519082f0' })));
     }
     static get is() { return "ix-row"; }
     static get encapsulation() { return "shadow"; }

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

@@ -33,6 +33,13 @@ export class Select {
          * A Boolean attribute indicating that an option with a non-empty string value must be selected
          */
         this.required = false;
+        /**
+         * ARIA label for the chevron down icon button
+         * Will be set as aria-label on the nested HTML button element
+         *
+         * @since 3.2.0
+         */
+        this.ariaLabelChevronDownIconButton = 'Open select dropdown';
         /**
          * Current selected value.
          * This corresponds to the value property of ix-select-items
@@ -74,10 +81,18 @@ export class Select {
          * Information inside of dropdown if no items where found with current filter text
          */
         this.i18nNoMatches = 'No matches';
+        /**
+         * Chip label for all selected items in multiple mode.
+         */
+        this.i18nAllSelected = 'All';
         /**
          * Hide list header
          */
         this.hideListHeader = false;
+        /**
+         * Show "all" chip when all items are selected in multiple mode
+         */
+        this.collapseMultipleSelection = false;
         this.dropdownShow = false;
         this.selectedLabels = [];
         this.isDropdownEmpty = false;
@@ -199,6 +214,14 @@ export class Select {
             return;
         }
         this.updateSelection();
+        if (this.isMultipleMode && this.inputFilterText) {
+            this.clearInput();
+            this.removeHiddenFromItems();
+            if (this.arrowFocusController) {
+                this.arrowFocusController.items = this.visibleNonShadowItems;
+            }
+            this.navigationItem = undefined;
+        }
     }
     emitAddItem(value) {
         var _a;
@@ -517,6 +540,24 @@ export class Select {
             this.editable &&
             this.inputFilterText);
     }
+    shouldDisplayAllChip() {
+        return (this.selectedItems.length === this.items.length &&
+            this.collapseMultipleSelection);
+    }
+    renderAllChip() {
+        return (h("ix-filter-chip", { disabled: this.disabled || this.readonly, ariaLabelCloseIconButton: this.i18nAllSelected, onCloseClick: (e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                this.clear();
+            } }, `${this.i18nAllSelected} (${this.selectedItems.length})`));
+    }
+    renderChip(item) {
+        return (h("ix-filter-chip", { disabled: this.disabled || this.readonly, key: item.value, onCloseClick: (e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                this.itemClick(item.value);
+            } }, item.label));
+    }
     onValidationChange({ isInvalid, isInvalidByRequired, isValid, isInfo, isWarning, }) {
         this.isInvalid = isInvalid || isInvalidByRequired;
         this.isValid = isValid;
@@ -556,9 +597,9 @@ export class Select {
     }
     render() {
         var _a, _b, _c, _d;
-        return (h(Host, { key: '2113db5b5d04704c2bc60f2bb04c8886d9bc5f4c', "aria-disabled": a11yBoolean(this.disabled), class: {
+        return (h(Host, { key: '1610cc7dd06025b8dc05cd905eb1fad5574a64f8', "aria-disabled": a11yBoolean(this.disabled), class: {
                 disabled: this.disabled,
-            } }, h("ix-field-wrapper", { key: 'd48ae99ecb04db8ffa4a22af08ccf89ce7c080be', required: this.required, label: this.label, helperText: this.helperText, invalidText: this.invalidText, infoText: this.infoText, warningText: this.warningText, validText: this.validText, showTextAsTooltip: this.showTextAsTooltip, isInvalid: this.isInvalid, isValid: this.isValid, isInfo: this.isInfo, isWarning: this.isWarning, controlRef: this.inputRef }, h("div", { key: 'de5fd6ec7e718893bf763d48032a8ee084cd59a3', class: {
+            } }, h("ix-field-wrapper", { key: '912ca0f6e59259ea7de5fbb4857357fcf1db8370', required: this.required, label: this.label, helperText: this.helperText, invalidText: this.invalidText, infoText: this.infoText, warningText: this.warningText, validText: this.validText, showTextAsTooltip: this.showTextAsTooltip, isInvalid: this.isInvalid, isValid: this.isValid, isInfo: this.isInfo, isWarning: this.isWarning, controlRef: this.inputRef }, h("div", { key: '217ad54b9ca7a3e7aa9e60d89482b5fbc5389fc1', class: {
                 select: true,
                 disabled: this.disabled,
                 readonly: this.readonly,
@@ -566,13 +607,11 @@ export class Select {
                 this.dropdownAnchorRef(ref);
                 if (!this.editable)
                     this.dropdownWrapperRef(ref);
-            } }, h("div", { key: '4128e9c3bae2b348948606783b2d07d427e1e173', class: "input-container" }, h("div", { key: 'b36ef6be27a9b23f11517e44551d902389fcba08', class: "chips" }, this.isMultipleMode
-            ? (_a = this.selectedItems) === null || _a === void 0 ? void 0 : _a.map((item) => (h("ix-filter-chip", { disabled: this.disabled || this.readonly, key: item.value, onCloseClick: (e) => {
-                    e.preventDefault();
-                    e.stopPropagation();
-                    this.itemClick(item.value);
-                } }, item.label)))
-            : '', h("div", { key: 'f86b26dab24944a087f1977bc5fbc898002944d4', class: "trigger" }, h("input", { key: 'c8237e81cf58258ad73a125e082513bc55da5160', autocomplete: "off", "data-testid": "input", disabled: this.disabled, readOnly: this.readonly, required: this.required, type: "text", class: {
+            } }, h("div", { key: '58d7051c6e884dc714643dcf974f7424b4581dfb', class: "input-container" }, h("div", { key: 'be6fec6f27345d8033b9b56ca3760c953951b801', class: "chips" }, this.isMultipleMode &&
+            this.items.length !== 0 &&
+            (this.shouldDisplayAllChip()
+                ? this.renderAllChip()
+                : (_a = this.selectedItems) === null || _a === void 0 ? void 0 : _a.map((item) => this.renderChip(item))), h("div", { key: 'a9b0c66c623856ab4b2c34f136bbef89a4b3377f', class: "trigger" }, h("input", { key: '1920a23f38ce924fae991be2b5c4a760031aae1f', autocomplete: "off", "data-testid": "input", disabled: this.disabled, readOnly: this.readonly, required: this.required, type: "text", class: {
                 'allow-clear': this.allowClear && !!((_b = this.selectedLabels) === null || _b === void 0 ? void 0 : _b.length),
             }, placeholder: this.placeholderValue(), value: (_c = this.inputValue) !== null && _c !== void 0 ? _c : '', ref: (ref) => {
                 this.inputElement = ref;
@@ -591,7 +630,7 @@ export class Select {
                 : iconChevronDownSmall, variant: "subtle-tertiary", ref: (ref) => {
                 if (this.editable)
                     this.dropdownWrapperRef(ref);
-            }, "aria-label": this.ariaLabelChevronDownIconButton }))))))), h("ix-dropdown", { key: '1c304ed548a2b2d30e39a53757fff6291417e680', ref: (ref) => (this.dropdownElement = ref), show: this.dropdownShow, closeBehavior: this.isMultipleMode ? 'outside' : 'both', class: {
+            }, "aria-label": this.ariaLabelChevronDownIconButton }))))))), h("ix-dropdown", { key: '4fcf2193ed3cc0faea0e5de7acab2835751c5583', ref: (ref) => (this.dropdownElement = ref), show: this.dropdownShow, closeBehavior: this.isMultipleMode ? 'outside' : 'both', class: {
                 'display-none': this.disabled || this.readonly,
             }, anchor: this.dropdownAnchorRef.waitForCurrent(), trigger: this.dropdownWrapperRef.waitForCurrent(), onShowChanged: (e) => this.dropdownVisibilityChanged(e), placement: "bottom-start", overwriteDropdownStyle: async () => {
                 var _a, _b;
@@ -607,12 +646,12 @@ export class Select {
                     styleOverwrites.maxWidth = `min(${this.dropdownMaxWidth}, 100%)`;
                 }
                 return styleOverwrites;
-            } }, h("div", { key: 'f338a319e31998b5920812726cf92bbca06c85e1', class: {
+            } }, h("div", { key: '428a499947d6f345a83d075d1749831d6b1ab348', class: {
                 'select-list-header': true,
                 hidden: this.hideListHeader || this.isDropdownEmpty,
-            }, title: this.i18nSelectListHeader, onClick: (e) => e.preventDefault() }, this.i18nSelectListHeader), h("slot", { key: 'd873c28ecd6dbb3343d7473e8318742d36ea3626', onSlotchange: () => {
+            }, title: this.i18nSelectListHeader, onClick: (e) => e.preventDefault() }, this.i18nSelectListHeader), h("slot", { key: '9bffa4284f53b45116dfff2f142fd2f4aea2032c', onSlotchange: () => {
                 this.updateSelection();
-            } }), h("div", { key: '91119d208ae834e7c6be27190472258db2d0aebb', ref: (ref) => (this.customItemsContainerElement = ref) }), this.isAddItemVisible() ? (h("ix-dropdown-item", { "data-testid": "add-item", icon: iconPlus, class: {
+            } }), h("div", { key: 'a039c9fda5d61358d39ae9cdc08df2fc82b55fa7', ref: (ref) => (this.customItemsContainerElement = ref) }), this.isAddItemVisible() ? (h("ix-dropdown-item", { "data-testid": "add-item", icon: iconPlus, class: {
                 'add-item': true,
             }, label: this.inputFilterText, onItemClick: (e) => {
                 e.preventDefault();
@@ -715,7 +754,8 @@ export class Select {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "defaultValue": "'Open select dropdown'"
             },
             "ariaLabelClearIconButton": {
                 "type": "string",
@@ -1053,6 +1093,26 @@ export class Select {
                 "reflect": false,
                 "defaultValue": "'No matches'"
             },
+            "i18nAllSelected": {
+                "type": "string",
+                "attribute": "i18n-all-selected",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Chip label for all selected items in multiple mode."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'All'"
+            },
             "hideListHeader": {
                 "type": "boolean",
                 "attribute": "hide-list-header",
@@ -1110,6 +1170,26 @@ export class Select {
                 "getter": false,
                 "setter": false,
                 "reflect": false
+            },
+            "collapseMultipleSelection": {
+                "type": "boolean",
+                "attribute": "collapse-multiple-selection",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show \"all\" chip when all items are selected in multiple mode"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
             }
         };
     }