@clr/angular 18.0.0-beta.3 → 18.0.0-beta.5

package/fesm2022/clr-angular-forms-combobox.mjs

@@ -1,21 +1,21 @@
-import * as i3 from '@angular/common';
+import * as i8 from '@angular/common';
 import { isPlatformBrowser, NgForOf, CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Injectable, ViewChild, Optional, Component, Input, Directive, PLATFORM_ID, Inject, HostListener, HostBinding, DOCUMENT, ContentChildren, EventEmitter, ContentChild, Output, Self, NgModule } from '@angular/core';
+import { Injectable, ViewChild, Optional, Component, Input, Directive, PLATFORM_ID, Inject, HostListener, HostBinding, DOCUMENT, ContentChildren, EventEmitter, booleanAttribute, ContentChild, ViewChildren, Output, Self, Host, NgModule } from '@angular/core';
 import * as i1$1 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 import * as i1 from '@clr/angular/forms/common';
 import { ClrAbstractContainer, NgControlService, ControlIdService, ControlClassService, WrappedFormControl, ClrCommonFormsModule } from '@clr/angular/forms/common';
-import * as i8 from '@clr/angular/icon';
+import * as i9 from '@clr/angular/icon';
 import { ClarityIcons, successStandardIcon, errorStandardIcon, angleIcon, windowCloseIcon, ClrIcon } from '@clr/angular/icon';
 import * as i4 from '@clr/angular/popover/common';
 import { POPOVER_HOST_ORIGIN, ClrPopoverPosition, ClrPopoverType, ClrPopoverHostDirective, ClrPopoverModuleNext } from '@clr/angular/popover/common';
 import * as i5 from '@clr/angular/progress/spinner';
 import { ClrSpinnerModule } from '@clr/angular/progress/spinner';
-import * as i3$1 from '@clr/angular/utils';
+import * as i3 from '@clr/angular/utils';
 import { ArrowKeyDirection, Keys, customFocusableItemProvider, uniqueIdFactory, ClrLoadingState, IF_ACTIVE_ID, LoadingListener, IF_ACTIVE_ID_PROVIDER, FOCUS_SERVICE_PROVIDER, ClrConditionalModule, ClrKeyFocusModule } from '@clr/angular/utils';
+import { BehaviorSubject, ReplaySubject, Subject, debounceTime } from 'rxjs';
 import { take } from 'rxjs/operators';
-import { BehaviorSubject, ReplaySubject } from 'rxjs';
 
 /*
  * Copyright (c) 2016-2026 Broadcom. All Rights Reserved.
@@ -73,7 +73,7 @@ class ClrComboboxContainer extends ClrAbstractContainer {
         <ng-content select="clr-control-success"></ng-content>
       }
     </div>
-  `, isInline: true, dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.ClrControlLabel, selector: "label", inputs: ["id", "for"] }] }); }
+  `, isInline: true, dependencies: [{ kind: "directive", type: i8.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.ClrControlLabel, selector: "label", inputs: ["id", "for"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ClrComboboxContainer, decorators: [{
             type: Component,
@@ -133,7 +133,7 @@ class ComboboxModel {
  */
 class MultiSelectComboboxModel extends ComboboxModel {
     containsItem(item) {
-        if (!this.model) {
+        if (this.model === null || this.model === undefined) {
             return false;
         }
         return this.model.some(m => this.identityFn(m) === this.identityFn(item));
@@ -218,7 +218,10 @@ class MultiSelectComboboxModel extends ComboboxModel {
  */
 class SingleSelectComboboxModel extends ComboboxModel {
     containsItem(item) {
-        return this.model !== null && this.identityFn(this.model) === this.identityFn(item);
+        if (this.model === null || this.model === undefined) {
+            return false;
+        }
+        return this.identityFn(this.model) === this.identityFn(item);
     }
     select(item) {
         this.model = item;
@@ -305,13 +308,15 @@ class OptionSelectionService {
     constructor() {
         this.loading = false;
         this.editable = false;
-        this.filtering = true;
+        this.showSelectAll = false;
         // Display all options on first open, even if filter text exists.
         // https://github.com/vmware-clarity/ng-clarity/issues/386
         this.showAllOptions = true;
         this._currentInput = '';
         this._inputChanged = new BehaviorSubject('');
         this._selectionChanged = new ReplaySubject(1);
+        this._selectAllRequested = new Subject();
+        this.editableResolver = (input) => input;
         this._identityFn = (item) => item;
         this.inputChanged = this._inputChanged.asObservable();
     }
@@ -352,6 +357,12 @@ class OptionSelectionService {
             this.selectionModel.identityFn = this._identityFn;
         }
     }
+    get selectAllRequested() {
+        return this._selectAllRequested.asObservable();
+    }
+    requestSelectAll() {
+        this._selectAllRequested.next();
+    }
     select(item) {
         if (item === null || item === undefined || this.selectionModel.containsItem(item)) {
             return;
@@ -371,6 +382,33 @@ class OptionSelectionService {
         }
         this._selectionChanged.next(this.selectionModel);
     }
+    selectMany(items) {
+        let changed = false;
+        for (const item of items) {
+            if (!this.selectionModel.containsItem(item)) {
+                this.selectionModel.select(item);
+                changed = true;
+            }
+        }
+        if (changed) {
+            this._selectionChanged.next(this.selectionModel);
+        }
+    }
+    unselectMany(items) {
+        if (!this.selectionModel || this.selectionModel.isEmpty()) {
+            return;
+        }
+        let changed = false;
+        for (const item of items) {
+            if (this.selectionModel.containsItem(item)) {
+                this.selectionModel.unselect(item);
+                changed = true;
+            }
+        }
+        if (changed) {
+            this._selectionChanged.next(this.selectionModel);
+        }
+    }
     unselect(item) {
         if (item === null || item === undefined || !this.selectionModel.containsItem(item)) {
             return;
@@ -378,6 +416,15 @@ class OptionSelectionService {
         this.selectionModel.unselect(item);
         this._selectionChanged.next(this.selectionModel);
     }
+    /**
+     * Checks whether all given items are currently selected, using identityFn for comparison.
+     */
+    containsAll(items) {
+        if (!items.length || this.selectionModel.isEmpty()) {
+            return false;
+        }
+        return items.every(item => this.selectionModel.containsItem(item));
+    }
     setSelectionValue(value) {
         if (!this.selectionModel) {
             return;
@@ -389,14 +436,6 @@ class OptionSelectionService {
         this.selectionModel.model = value;
         this._selectionChanged.next(this.selectionModel);
     }
-    parseStringToModel(value) {
-        if (this.displayField) {
-            return {
-                [this.displayField]: value,
-            };
-        }
-        return value;
-    }
     valuesEqualByIdentity(current, value) {
         if (current === value) {
             return true;
@@ -510,6 +549,9 @@ class ComboboxFocusHandler {
     addOptionValues(options) {
         this.optionData = options;
     }
+    focusOption(option) {
+        this.pseudoFocus.select(option);
+    }
     handleFocusSubscription() {
         this.popoverService.openChange.subscribe(open => {
             if (!open) {
@@ -560,7 +602,12 @@ class ComboboxFocusHandler {
                 case Keys.Enter:
                     if (this.popoverService.open && this.pseudoFocus.model) {
                         if (this.selectionService.multiselectable) {
-                            this.selectionService.toggle(this.pseudoFocus.model.value);
+                            if (this.pseudoFocus.model.id === SELECT_ALL_ID) {
+                                this.selectionService.requestSelectAll();
+                            }
+                            else {
+                                this.selectionService.toggle(this.pseudoFocus.model.value);
+                            }
                         }
                         else {
                             this.selectionService.select(this.pseudoFocus.model.value);
@@ -696,9 +743,10 @@ class ClrOption {
         // This way we achieve two things:
         // - do not lose focus
         // - we're still able to use onBlur for "outside-click" handling
+        this.focusHandler.focusOption(this.optionProxy);
         this.focusHandler.focusInput();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ClrOption, deps: [{ token: i0.ElementRef }, { token: i3$1.ClrCommonStringsService }, { token: ComboboxFocusHandler }, { token: OptionSelectionService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ClrOption, deps: [{ token: i0.ElementRef }, { token: i3.ClrCommonStringsService }, { token: ComboboxFocusHandler }, { token: OptionSelectionService }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: ClrOption, isStandalone: false, selector: "clr-option", inputs: { optionId: ["id", "optionId"], value: ["clrValue", "value"] }, host: { listeners: { "click": "onClick($event)" }, properties: { "class.clr-combobox-option": "true", "attr.role": "\"option\"", "attr.tabindex": "-1", "attr.id": "optionId", "class.active": "this.selected", "class.clr-focus": "this.focusClass" } }, ngImport: i0, template: `
     <ng-content></ng-content>
     @if (selected) {
@@ -725,7 +773,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
                     },
                     standalone: false,
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i3$1.ClrCommonStringsService }, { type: ComboboxFocusHandler }, { type: OptionSelectionService }], propDecorators: { optionId: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i3.ClrCommonStringsService }, { type: ComboboxFocusHandler }, { type: OptionSelectionService }], propDecorators: { optionId: [{
                 type: Input,
                 args: ['id']
             }], value: [{
@@ -749,6 +797,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
  * The full license information can be found in LICENSE in the root directory of this project.
  */
 let nbOptionsComponents = 0;
+const SELECT_ALL_ID = 'select-all-id';
 class ClrOptions {
     constructor(optionSelectionService, id, el, commonStrings, focusHandler, popoverService, parentHost, document) {
         this.optionSelectionService = optionSelectionService;
@@ -767,12 +816,22 @@ class ClrOptions {
             this.optionsId = 'clr-options-' + nbOptionsComponents++;
         }
     }
+    set selectAllBtn(value) {
+        if (value) {
+            this._selectAllOption = new OptionData(SELECT_ALL_ID, null);
+            this._selectAllOption.el = value.nativeElement;
+        }
+        else {
+            this._selectAllOption = null;
+        }
+        this.updateFocusableItems();
+    }
     get items() {
         return this._items;
     }
     set items(items) {
         this._items = items;
-        this.focusHandler.addOptionValues(this._items.map(option => option.optionProxy));
+        this.updateFocusableItems();
     }
     /**
      * Tests if the list of options is empty, meaning it doesn't contain any items
@@ -786,6 +845,34 @@ class ClrOptions {
     get noResultsElementId() {
         return `${this.optionsId}-no-results`;
     }
+    get showSelectAll() {
+        return (this.optionSelectionService.showSelectAll &&
+            this.optionSelectionService.multiselectable &&
+            !this.optionSelectionService.loading &&
+            this.items.length > 0);
+    }
+    get allVisibleSelected() {
+        if (!this.items || this.items.length === 0) {
+            return false;
+        }
+        return this.optionSelectionService.containsAll(this.items.map(option => option.value));
+    }
+    get isSelectAllFocused() {
+        return this.focusHandler.pseudoFocus.model?.id === SELECT_ALL_ID;
+    }
+    toggleSelectAll(event = null) {
+        if (event) {
+            event.stopPropagation();
+            this.focusHandler.focusInput();
+        }
+        const visibleValues = this.items.map(option => option.value);
+        if (this.allVisibleSelected) {
+            this.optionSelectionService.unselectMany(visibleValues);
+        }
+        else {
+            this.optionSelectionService.selectMany(visibleValues);
+        }
+    }
     ngAfterViewInit() {
         this.focusHandler.listbox = this.el.nativeElement;
         this.subscriptions.push(this.items.changes.subscribe(items => {
@@ -797,6 +884,8 @@ class ClrOptions {
             else {
                 this.focusHandler.pseudoFocus.pop();
             }
+        }), this.optionSelectionService.selectAllRequested.subscribe(() => {
+            this.toggleSelectAll();
         }));
     }
     ngOnDestroy() {
@@ -808,8 +897,19 @@ class ClrOptions {
     loadingStateChange(state) {
         this.loading = state === ClrLoadingState.LOADING;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ClrOptions, deps: [{ token: OptionSelectionService }, { token: IF_ACTIVE_ID }, { token: i0.ElementRef }, { token: i3$1.ClrCommonStringsService }, { token: ComboboxFocusHandler }, { token: i4.ClrPopoverService }, { token: POPOVER_HOST_ORIGIN, optional: true }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: ClrOptions, isStandalone: false, selector: "clr-options", inputs: { optionsId: ["id", "optionsId"] }, host: { properties: { "class.clr-combobox-options": "true", "class.clr-combobox-options-hidden": "emptyOptions && editable", "attr.role": "\"listbox\"", "id": "optionsId" } }, providers: [{ provide: LoadingListener, useExisting: ClrOptions }], queries: [{ propertyName: "items", predicate: ClrOption, descendants: true }], ngImport: i0, template: `
+    updateFocusableItems() {
+        const focusList = [];
+        if (this._selectAllOption) {
+            focusList.push(this._selectAllOption);
+        }
+        if (this._items) {
+            const itemOptions = this._items.map(option => option.optionProxy);
+            focusList.push(...itemOptions);
+        }
+        this.focusHandler.addOptionValues(focusList);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ClrOptions, deps: [{ token: OptionSelectionService }, { token: IF_ACTIVE_ID }, { token: i0.ElementRef }, { token: i3.ClrCommonStringsService }, { token: ComboboxFocusHandler }, { token: i4.ClrPopoverService }, { token: POPOVER_HOST_ORIGIN, optional: true }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: ClrOptions, isStandalone: false, selector: "clr-options", inputs: { optionsId: ["id", "optionsId"] }, host: { properties: { "class.clr-combobox-options": "true", "class.clr-combobox-options-multi": "optionSelectionService.multiselectable", "class.clr-combobox-options-hidden": "emptyOptions && editable", "attr.role": "\"listbox\"", "id": "optionsId" } }, providers: [{ provide: LoadingListener, useExisting: ClrOptions }], queries: [{ propertyName: "items", predicate: ClrOption, descendants: true }], viewQueries: [{ propertyName: "selectAllBtn", first: true, predicate: ["selectAllBtn"], descendants: true }], ngImport: i0, template: `
     @if (optionSelectionService.loading) {
       <div class="clr-combobox-options-loading">
         <clr-spinner clrInline>
@@ -821,6 +921,21 @@ class ClrOptions {
       </div>
     }
 
+    @if (showSelectAll) {
+      <div class="clr-combobox-select-all">
+        <button
+          #selectAllBtn
+          type="button"
+          tabindex="-1"
+          class="btn btn-link clr-combobox-select-all-btn clr-combobox-option"
+          [class.clr-focus]="isSelectAllFocused"
+          (click)="toggleSelectAll($event)"
+        >
+          {{ allVisibleSelected ? commonStrings.keys.comboboxUnselectAll : commonStrings.keys.comboboxSelectAll }}
+        </button>
+      </div>
+    }
+
     <!-- Rendered if data set is empty -->
     @if (emptyOptions) {
       <div [id]="noResultsElementId" role="option">
@@ -850,6 +965,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
       </div>
     }
 
+    @if (showSelectAll) {
+      <div class="clr-combobox-select-all">
+        <button
+          #selectAllBtn
+          type="button"
+          tabindex="-1"
+          class="btn btn-link clr-combobox-select-all-btn clr-combobox-option"
+          [class.clr-focus]="isSelectAllFocused"
+          (click)="toggleSelectAll($event)"
+        >
+          {{ allVisibleSelected ? commonStrings.keys.comboboxUnselectAll : commonStrings.keys.comboboxSelectAll }}
+        </button>
+      </div>
+    }
+
     <!-- Rendered if data set is empty -->
     @if (emptyOptions) {
       <div [id]="noResultsElementId" role="option">
@@ -865,6 +995,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
                     providers: [{ provide: LoadingListener, useExisting: ClrOptions }],
                     host: {
                         '[class.clr-combobox-options]': 'true',
+                        '[class.clr-combobox-options-multi]': 'optionSelectionService.multiselectable',
                         '[class.clr-combobox-options-hidden]': 'emptyOptions && editable',
                         '[attr.role]': '"listbox"',
                         '[id]': 'optionsId',
@@ -874,7 +1005,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
         }], ctorParameters: () => [{ type: OptionSelectionService }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [IF_ACTIVE_ID]
-                }] }, { type: i0.ElementRef }, { type: i3$1.ClrCommonStringsService }, { type: ComboboxFocusHandler }, { type: i4.ClrPopoverService }, { type: i0.ElementRef, decorators: [{
+                }] }, { type: i0.ElementRef }, { type: i3.ClrCommonStringsService }, { type: ComboboxFocusHandler }, { type: i4.ClrPopoverService }, { type: i0.ElementRef, decorators: [{
                     type: Optional
                 }, {
                     type: Inject,
@@ -885,6 +1016,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
                 }] }], propDecorators: { optionsId: [{
                 type: Input,
                 args: ['id']
+            }], selectAllBtn: [{
+                type: ViewChild,
+                args: ['selectAllBtn']
             }], items: [{
                 type: ContentChildren,
                 args: [ClrOption, { descendants: true }]
@@ -897,7 +1031,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
  * The full license information can be found in LICENSE in the root directory of this project.
  */
 class ClrCombobox extends WrappedFormControl {
-    constructor(vcr, injector, control, renderer, el, optionSelectionService, commonStrings, popoverService, containerService, platformId, focusHandler, cdr) {
+    constructor(vcr, injector, control, renderer, el, optionSelectionService, commonStrings, popoverService, containerService, platformId, focusHandler, cdr, zone, container) {
         super(vcr, ClrComboboxContainer, injector, control, renderer, el);
         this.control = control;
         this.renderer = renderer;
@@ -909,6 +1043,8 @@ class ClrCombobox extends WrappedFormControl {
         this.platformId = platformId;
         this.focusHandler = focusHandler;
         this.cdr = cdr;
+        this.zone = zone;
+        this.container = container;
         this.placeholder = '';
         this.clrInputChange = new EventEmitter(false);
         this.clrOpenChange = this.popoverService.openChange;
@@ -920,6 +1056,11 @@ class ClrCombobox extends WrappedFormControl {
         this.popoverPosition = ClrPopoverPosition.BOTTOM_LEFT;
         this.index = 1;
         this.popoverType = ClrPopoverType.DROPDOWN;
+        this.containerWidth = null;
+        this.selectionExpanded = false;
+        this.shouldCalculate = true;
+        this.isTotalSelection = false;
+        this.containerWidthChange = new Subject();
         this._searchText = '';
         if (control) {
             control.valueAccessor = this;
@@ -927,12 +1068,21 @@ class ClrCombobox extends WrappedFormControl {
         // default to SingleSelectComboboxModel, in case the optional input [ClrMulti] isn't used
         this.multiSelect = false;
     }
+    get showSelectAll() {
+        return this.optionSelectionService.showSelectAll;
+    }
+    set showSelectAll(value) {
+        this.optionSelectionService.showSelectAll = value;
+    }
     get editable() {
         return this.optionSelectionService.editable;
     }
     set editable(value) {
         this.optionSelectionService.editable = value;
     }
+    set editableResolver(value) {
+        this.optionSelectionService.editableResolver = value;
+    }
     set identityFn(value) {
         this.optionSelectionService.identityFn = value;
     }
@@ -997,6 +1147,24 @@ class ClrCombobox extends WrappedFormControl {
     get displayField() {
         return this.optionSelectionService.displayField;
     }
+    get showAllText() {
+        return this.commonStrings.parse(this.commonStrings.keys.comboboxShowAll, {
+            ITEMS: this.multiSelectModel?.length.toString(),
+        });
+    }
+    get allSelectedText() {
+        return this.commonStrings.parse(this.commonStrings.keys.comboboxAllSelected, {
+            ITEMS: this.multiSelectModel?.length.toString(),
+        });
+    }
+    get showIndividualPills() {
+        return !this.isTotalSelection || this.selectionExpanded;
+    }
+    get showTruncationToggle() {
+        return (this.selectionExpanded ||
+            this.isTotalSelection ||
+            (this.calculatedLimit !== null && this.calculatedLimit < this.multiSelectModel.length));
+    }
     get disabled() {
         return this.control?.disabled;
     }
@@ -1013,7 +1181,21 @@ class ClrCombobox extends WrappedFormControl {
         // The text input is the actual element we are wrapping
         // This assignment is needed by the wrapper, so it can set
         // the aria properties on the input element, not on the component.
+        // We calculate on the initial load to prevent flickering
         this.el = this.textbox;
+        if (this.multiSelect && this.multiSelectModel?.length > 0) {
+            this.calculateLimit();
+        }
+        this.initialiseObserver();
+    }
+    ngOnDestroy() {
+        super.ngOnDestroy();
+        this.resizeObserver.disconnect();
+    }
+    clearSelection() {
+        this.focusHandler.focusInput();
+        // Clear the array model directly
+        this.optionSelectionService.setSelectionValue([]);
     }
     onKeyUp(event) {
         // if BACKSPACE in multiselect mode, delete the last pill if text is empty
@@ -1031,7 +1213,7 @@ class ClrCombobox extends WrappedFormControl {
                     break;
                 case Keys.Enter:
                     if (this.editable && this._searchText.length > 0 && this.options.emptyOptions) {
-                        const parsedInput = this.optionSelectionService.parseStringToModel(this._searchText);
+                        const parsedInput = this.optionSelectionService.editableResolver(this._searchText);
                         this.control?.control.markAsTouched();
                         this.optionSelectionService.select(parsedInput);
                         this.searchText = '';
@@ -1072,7 +1254,7 @@ class ClrCombobox extends WrappedFormControl {
     }
     onChange() {
         if (this.editable && !this.multiSelect && this.options.emptyOptions) {
-            const parsedInput = this.optionSelectionService.parseStringToModel(this._searchText);
+            const parsedInput = this.optionSelectionService.editableResolver(this._searchText);
             this.optionSelectionService.setSelectionValue(parsedInput);
         }
     }
@@ -1113,13 +1295,103 @@ class ClrCombobox extends WrappedFormControl {
             this.popoverService.toggleWithEvent(event);
         }
     }
+    toggleSelectionExpand() {
+        this.selectionExpanded = !this.selectionExpanded;
+        if (this.selectionExpanded) {
+            this.applyLimit(this.multiSelectModel.length);
+        }
+        else {
+            this.containerWidthChange.next(this.containerWidth);
+        }
+    }
+    initialiseObserver() {
+        const container = this.container ? this.container.el.nativeElement : this.el.nativeElement.parentElement;
+        this.containerWidth = container.offsetWidth;
+        this.resizeObserver = new ResizeObserver(entries => {
+            this.zone.runOutsideAngular(() => {
+                entries.forEach(entry => {
+                    const entryWidth = entry.contentRect.width;
+                    switch (entry.target) {
+                        case container:
+                            if (this.containerWidth !== entryWidth) {
+                                this.containerWidth = entryWidth;
+                                this.containerWidthChange.next(entryWidth);
+                            }
+                            break;
+                        case this.wrapper.nativeElement:
+                            this.containerWidthChange.next(null);
+                            break;
+                    }
+                });
+            });
+        });
+        this.resizeObserver.observe(container);
+        this.resizeObserver.observe(this.wrapper.nativeElement);
+    }
+    calculateLimit() {
+        this.shouldCalculate = true;
+        this.cdr.detectChanges();
+        if (!this.calculationPills || this.calculationPills.length === 0) {
+            this.applyLimit();
+            return;
+        }
+        const pillDimensions = this.calculationPills.map(p => ({
+            top: p.nativeElement.offsetTop,
+            width: p.nativeElement.offsetWidth,
+            left: p.nativeElement.offsetLeft,
+        }));
+        const firstPill = pillDimensions[0];
+        const buttonWidth = this.truncationButton?.nativeElement?.offsetWidth || 100;
+        const textboxWidth = this.textbox.nativeElement.offsetWidth;
+        const expectedWidth = this.containerWidth - textboxWidth - buttonWidth;
+        let fitCount = 0;
+        for (const pill of pillDimensions) {
+            if (pill.top > firstPill.top || pill.left + pill.width > expectedWidth) {
+                break;
+            }
+            fitCount++;
+        }
+        this.applyLimit(fitCount);
+    }
+    applyLimit(limit = undefined) {
+        this.zone.run(() => {
+            this.calculatedLimit = limit === 0 ? 1 : limit;
+            this.shouldCalculate = false;
+            this.cdr.markForCheck();
+        });
+    }
+    updateTotalSelection() {
+        if (!this.multiSelect || !this.multiSelectModel?.length) {
+            this.isTotalSelection = false;
+            return;
+        }
+        // Skip recalculation when items are filtered to zero (e.g. "no results")
+        // to prevent pills from flashing while typing in the search input.
+        if (!this.options?.items?.length) {
+            return;
+        }
+        this.isTotalSelection = this.optionSelectionService.containsAll(this.options.items.map(option => option.value));
+    }
     initializeSubscriptions() {
         this.subscriptions.push(this.optionSelectionService.selectionChanged.subscribe((newSelection) => {
             this.updateInputValue(newSelection);
-            if (!this.multiSelect && newSelection && !newSelection.isEmpty()) {
-                this.popoverService.open = false;
+            if (newSelection.isEmpty()) {
+                this.selectionExpanded = false;
+                this.isTotalSelection = false;
+            }
+            else {
+                if (!this.multiSelect) {
+                    this.popoverService.open = false;
+                }
+                this.updateTotalSelection();
             }
             this.updateControlValue();
+            if (this.selectionExpanded) {
+                this.applyLimit(this.multiSelectModel.length);
+            }
+            else {
+                this.calculateLimit();
+            }
             if (this.multiSelect) {
                 setTimeout(() => {
                     this.popoverService?.updatePosition();
@@ -1146,6 +1418,10 @@ class ClrCombobox extends WrappedFormControl {
             else {
                 this.searchText = this.getDisplayNames(this.optionSelectionService.selectionModel.model)[0] || '';
             }
+        }), this.containerWidthChange.pipe(debounceTime(0)).subscribe(() => {
+            if (!this.selectionExpanded && !this.isTotalSelection) {
+                this.calculateLimit();
+            }
         }));
     }
     updateInputValue(model) {
@@ -1170,14 +1446,14 @@ class ClrCombobox extends WrappedFormControl {
         }
         return [this.optionSelectionService.selectionModel.model];
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ClrCombobox, deps: [{ token: i0.ViewContainerRef }, { token: i0.Injector }, { token: i1$1.NgControl, optional: true, self: true }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: OptionSelectionService }, { token: i3$1.ClrCommonStringsService }, { token: i4.ClrPopoverService }, { token: ComboboxContainerService, optional: true }, { token: PLATFORM_ID }, { token: ComboboxFocusHandler }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: ClrCombobox, isStandalone: false, selector: "clr-combobox", inputs: { placeholder: "placeholder", editable: ["clrEditable", "editable"], identityFn: ["clrComboboxIdentityFn", "identityFn"], multiSelect: ["clrMulti", "multiSelect"] }, outputs: { clrInputChange: "clrInputChange", clrOpenChange: "clrOpenChange", clrSelectionChange: "clrSelectionChange" }, host: { listeners: { "keydown": "onKeyUp($event)" }, properties: { "class.aria-required": "true", "class.clr-combobox": "true", "class.clr-combobox-disabled": "control?.disabled" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ClrCombobox, deps: [{ token: i0.ViewContainerRef }, { token: i0.Injector }, { token: i1$1.NgControl, optional: true, self: true }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: OptionSelectionService }, { token: i3.ClrCommonStringsService }, { token: i4.ClrPopoverService }, { token: ComboboxContainerService, optional: true }, { token: PLATFORM_ID }, { token: ComboboxFocusHandler }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: ClrComboboxContainer, host: true, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: ClrCombobox, isStandalone: false, selector: "clr-combobox", inputs: { placeholder: "placeholder", showSelectAll: ["showSelectAll", "showSelectAll", booleanAttribute], editable: ["clrEditable", "editable"], editableResolver: ["clrEditableResolverFn", "editableResolver"], identityFn: ["clrComboboxIdentityFn", "identityFn"], multiSelect: ["clrMulti", "multiSelect"] }, outputs: { clrInputChange: "clrInputChange", clrOpenChange: "clrOpenChange", clrSelectionChange: "clrSelectionChange" }, host: { listeners: { "keydown": "onKeyUp($event)" }, properties: { "class.aria-required": "true", "class.clr-combobox": "true", "class.clr-combobox-disabled": "control?.disabled" } }, providers: [
             OptionSelectionService,
             { provide: LoadingListener, useExisting: ClrCombobox },
             IF_ACTIVE_ID_PROVIDER,
             FOCUS_SERVICE_PROVIDER,
             COMBOBOX_FOCUS_HANDLER_PROVIDER,
-        ], queries: [{ propertyName: "optionSelected", first: true, predicate: ClrOptionSelected, descendants: true }, { propertyName: "options", first: true, predicate: ClrOptions, descendants: true }], viewQueries: [{ propertyName: "textbox", first: true, predicate: ["textboxInput"], descendants: true }, { propertyName: "trigger", first: true, predicate: ["trigger"], descendants: true }], usesInheritance: true, hostDirectives: [{ directive: i4.ClrPopoverHostDirective }], ngImport: i0, template: "<!--\n  ~ Copyright (c) 2016-2026 Broadcom. All Rights Reserved.\n  ~ The term \"Broadcom\" refers to Broadcom Inc. and/or its subsidiaries.\n  ~ This software is released under MIT license.\n  ~ The full license information can be found in LICENSE in the root directory of this project.\n  -->\n\n<!-- The (click) handler is needed to auto-focus on input field which can not currently occupy the whole\nwidth of the component, after being wrapped to a new line -->\n<div\n  class=\"clr-combobox-wrapper\"\n  clrPopoverOrigin\n  (click)=\"onWrapperClick($event)\"\n  [class.multi]=\"multiSelect\"\n  [class.invalid]=\"(control?.control.touched && control?.invalid)\"\n  [class.disabled]=\"control?.disabled\"\n>\n  @if (multiSelect && optionSelectionService.selectionModel.model && multiSelectModel.length > 0) {\n  <span\n    role=\"grid\"\n    clrRovingTabindex\n    [clrRovingTabindexDisabled]=\"control?.disabled\"\n    clrDirection=\"both\"\n    [attr.aria-label]=\"getSelectionAriaLabel()\"\n    [attr.aria-disabled]=\"control?.disabled? true: null\"\n    class=\"clr-combobox-pills\"\n  >\n    @for (item of multiSelectModel; track item; let i = $index) {\n    <span class=\"label label-combobox-pill\" role=\"row\">\n      <span role=\"gridcell\">\n        <span class=\"clr-combobox-pill-content\" clrKeyFocusItem>\n          @if (optionSelected) {\n          <ng-container\n            [ngTemplateOutlet]=\"optionSelected.template\"\n            [ngTemplateOutletContext]=\"{$implicit: optionSelectionService.selectionModel.model[i]}\"\n          ></ng-container>\n          }\n        </span>\n      </span>\n      <span role=\"gridcell\">\n        <button\n          clrKeyFocusItem\n          type=\"button\"\n          class=\"clr-combobox-remove-btn\"\n          [disabled]=\"control?.disabled? true: null\"\n          [attr.aria-label]=\"commonStrings.keys.comboboxDelete + ' ' + optionSelectionService.selectionModel.toString(displayField, i)\"\n          (click)=\"unselect(item)\"\n        >\n          <cds-icon shape=\"window-close\" size=\"12\"></cds-icon>\n        </button>\n      </span>\n    </span>\n    }\n  </span>\n  }\n\n  <input\n    #textboxInput\n    type=\"text\"\n    role=\"combobox\"\n    [id]=\"inputId()\"\n    class=\"clr-input clr-combobox-input\"\n    [(ngModel)]=\"searchText\"\n    (blur)=\"onBlur($event)\"\n    (focus)=\"onFocus()\"\n    (change)=\"onChange()\"\n    [attr.aria-expanded]=\"openState\"\n    [attr.aria-owns]=\"ariaOwns\"\n    aria-haspopup=\"listbox\"\n    aria-autocomplete=\"list\"\n    autocomplete=\"off\"\n    [attr.aria-invalid]=\"control?.invalid? true: null\"\n    [disabled]=\"control?.disabled? true: null\"\n    [attr.aria-activedescendant]=\"getActiveDescendant()\"\n    [attr.placeholder]=\"placeholder\"\n  />\n\n  <!-- No click handler, as it uses the handler on the .clr-combobox-wrapper -->\n  <button\n    #trigger\n    type=\"button\"\n    class=\"clr-combobox-trigger\"\n    tabindex=\"-1\"\n    [disabled]=\"control?.disabled || null\"\n    [attr.aria-label]=\"commonStrings.keys.comboboxOpen\"\n  >\n    <cds-icon shape=\"angle\" direction=\"down\"></cds-icon>\n  </button>\n\n  <div class=\"clr-focus-indicator\" [class.clr-focus]=\"focused\"></div>\n</div>\n\n<!-- Both close handlers are handled manually.\n'outsideClickToClose' has complex handling that's necessary\nto be manual due to the component architecture -->\n<div role=\"dialog\" *clrPopoverContent=\"openState; at popoverPosition; type: popoverType;\">\n  <ng-content></ng-content>\n</div>\n", dependencies: [{ kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i8.ClrIcon, selector: "clr-icon, cds-icon", inputs: ["shape", "size", "direction", "flip", "solid", "status", "inverse", "badge"] }, { kind: "component", type: i3$1.ClrRovingTabindex, selector: "[clrRovingTabindex]", inputs: ["clrRovingTabindex", "clrRovingTabindexDisabled"] }, { kind: "directive", type: i3$1.ClrKeyFocusItem, selector: "[clrKeyFocusItem]" }, { kind: "directive", type: i4.ClrPopoverOrigin, selector: "[clrPopoverOrigin]" }, { kind: "directive", type: i4.ClrPopoverContent, selector: "[clrPopoverContent]", inputs: ["clrPopoverContent", "clrPopoverContentAt", "clrPopoverContentAvailablePositions", "clrPopoverContentType", "clrPopoverContentOutsideClickToClose", "clrPopoverContentScrollToClose", "clrPopoverContentOrigin"] }] }); }
+        ], queries: [{ propertyName: "optionSelected", first: true, predicate: ClrOptionSelected, descendants: true }, { propertyName: "options", first: true, predicate: ClrOptions, descendants: true }], viewQueries: [{ propertyName: "textbox", first: true, predicate: ["textboxInput"], descendants: true }, { propertyName: "trigger", first: true, predicate: ["trigger"], descendants: true }, { propertyName: "truncationButton", first: true, predicate: ["truncationButton"], descendants: true }, { propertyName: "wrapper", first: true, predicate: ["wrapper"], descendants: true, static: true }, { propertyName: "calculationPills", predicate: ["pill"], descendants: true }], usesInheritance: true, hostDirectives: [{ directive: i4.ClrPopoverHostDirective }], ngImport: i0, template: "<!--\n  ~ Copyright (c) 2016-2026 Broadcom. All Rights Reserved.\n  ~ The term \"Broadcom\" refers to Broadcom Inc. and/or its subsidiaries.\n  ~ This software is released under MIT license.\n  ~ The full license information can be found in LICENSE in the root directory of this project.\n  -->\n\n<!-- The (click) handler is needed to auto-focus on input field which can not currently occupy the whole\nwidth of the component, after being wrapped to a new line -->\n<div\n  #wrapper\n  class=\"clr-combobox-wrapper\"\n  clrPopoverOrigin\n  (click)=\"onWrapperClick($event)\"\n  [class.multi]=\"multiSelect\"\n  [class.invalid]=\"(control?.control.touched && control?.invalid)\"\n  [class.disabled]=\"control?.disabled\"\n>\n  @if (multiSelect && multiSelectModel && multiSelectModel.length > 0) {\n  <span\n    role=\"grid\"\n    clrRovingTabindex\n    [clrRovingTabindexDisabled]=\"control?.disabled\"\n    clrDirection=\"both\"\n    [attr.aria-label]=\"getSelectionAriaLabel()\"\n    [attr.aria-disabled]=\"control?.disabled? true: null\"\n    class=\"clr-combobox-pills\"\n  >\n    <ng-template #pillTemplate let-item let-i=\"index\">\n      <span class=\"label label-combobox-pill\" role=\"row\">\n        <span role=\"gridcell\">\n          <span class=\"clr-combobox-pill-content\" clrKeyFocusItem>\n            @if (optionSelected) {\n            <ng-container\n              [ngTemplateOutlet]=\"optionSelected.template\"\n              [ngTemplateOutletContext]=\"{$implicit: item}\"\n            ></ng-container>\n            }\n          </span>\n        </span>\n        <span role=\"gridcell\">\n          <button\n            clrKeyFocusItem\n            type=\"button\"\n            class=\"clr-combobox-remove-btn\"\n            [disabled]=\"control?.disabled ? true : null\"\n            [attr.aria-label]=\"commonStrings.keys.comboboxDelete + ' ' + optionSelectionService.selectionModel.toString(displayField, i)\"\n            (click)=\"unselect(item)\"\n          >\n            <cds-icon shape=\"window-close\" size=\"12\"></cds-icon>\n          </button>\n        </span>\n      </span>\n    </ng-template>\n\n    @if (showSelectAll) { @if (isTotalSelection && !selectionExpanded) {\n    <span class=\"label label-combobox-pill\" role=\"row\">\n      <span role=\"gridcell\">\n        <span class=\"clr-combobox-pill-content\" clrKeyFocusItem>{{ allSelectedText }}</span>\n      </span>\n      <span role=\"gridcell\">\n        <button\n          clrKeyFocusItem\n          type=\"button\"\n          class=\"clr-combobox-remove-btn\"\n          (click)=\"clearSelection()\"\n          [attr.aria-label]=\"commonStrings.keys.comboboxUnselectAll\"\n        >\n          <cds-icon shape=\"window-close\" size=\"12\"></cds-icon>\n        </button>\n      </span>\n    </span>\n    } @if (showIndividualPills) { @for (item of multiSelectModel | slice:0:calculatedLimit; track item; let i = $index)\n    {\n    <ng-container\n      [ngTemplateOutlet]=\"pillTemplate\"\n      [ngTemplateOutletContext]=\"{$implicit: item, index: i}\"\n    ></ng-container>\n    } } @if (showTruncationToggle) {\n    <span role=\"row\" class=\"label label-combobox-pill clr-combobox-truncation-row\">\n      <span role=\"gridcell\" class=\"clr-combobox-truncation-cell\">\n        <span class=\"clr-combobox-pill-content\">\n          <button\n            #truncationButton\n            clrKeyFocusItem\n            type=\"button\"\n            class=\"btn btn-link clr-combobox-show-more-btn\"\n            (click)=\"toggleSelectionExpand()\"\n            [attr.aria-expanded]=\"selectionExpanded\"\n            [attr.aria-controls]=\"'expanded-selection-' + id\"\n          >\n            @if (!selectionExpanded) { {{ showAllText }} } @else { {{ commonStrings.keys.comboboxShowLess }} }\n          </button>\n        </span>\n      </span>\n    </span>\n    } } @else { @for (item of multiSelectModel; track item; let i = $index) {\n    <ng-container\n      [ngTemplateOutlet]=\"pillTemplate\"\n      [ngTemplateOutletContext]=\"{$implicit: item, index: i}\"\n    ></ng-container>\n    } }\n  </span>\n\n  @if (showSelectAll && shouldCalculate) {\n  <span class=\"clr-combobox-pills-calculation\" aria-hidden=\"true\">\n    @for (item of multiSelectModel; track item) {\n    <span class=\"label label-combobox-pill\" #pill>\n      <span class=\"clr-combobox-pill-content\">\n        @if (optionSelected) {\n        <ng-container\n          [ngTemplateOutlet]=\"optionSelected.template\"\n          [ngTemplateOutletContext]=\"{$implicit: item}\"\n        ></ng-container>\n        }\n      </span>\n      <button type=\"button\" class=\"clr-combobox-remove-btn\" tabindex=\"-1\">\n        <cds-icon shape=\"window-close\" size=\"12\"></cds-icon>\n      </button>\n    </span>\n    }\n  </span>\n  } }\n\n  <input\n    #textboxInput\n    type=\"text\"\n    role=\"combobox\"\n    [id]=\"inputId()\"\n    class=\"clr-input clr-combobox-input\"\n    [(ngModel)]=\"searchText\"\n    (blur)=\"onBlur($event)\"\n    (focus)=\"onFocus()\"\n    (change)=\"onChange()\"\n    [attr.aria-expanded]=\"openState\"\n    [attr.aria-owns]=\"ariaOwns\"\n    aria-haspopup=\"listbox\"\n    aria-autocomplete=\"list\"\n    autocomplete=\"off\"\n    [attr.aria-invalid]=\"control?.invalid? true: null\"\n    [disabled]=\"control?.disabled? true: null\"\n    [attr.aria-activedescendant]=\"getActiveDescendant()\"\n    [attr.placeholder]=\"placeholder\"\n  />\n\n  <!-- No click handler, as it uses the handler on the .clr-combobox-wrapper -->\n  <button\n    #trigger\n    type=\"button\"\n    class=\"clr-combobox-trigger\"\n    tabindex=\"-1\"\n    [disabled]=\"control?.disabled || null\"\n    [attr.aria-label]=\"commonStrings.keys.comboboxOpen\"\n  >\n    <cds-icon shape=\"angle\" direction=\"down\"></cds-icon>\n  </button>\n\n  <div class=\"clr-focus-indicator\" [class.clr-focus]=\"focused\"></div>\n</div>\n\n<!-- Both close handlers are handled manually.\n'outsideClickToClose' has complex handling that's necessary\nto be manual due to the component architecture -->\n<div role=\"dialog\" *clrPopoverContent=\"openState; at popoverPosition; type: popoverType;\">\n  <ng-content></ng-content>\n</div>\n", dependencies: [{ kind: "directive", type: i8.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i9.ClrIcon, selector: "clr-icon, cds-icon", inputs: ["shape", "size", "direction", "flip", "solid", "status", "inverse", "badge"] }, { kind: "component", type: i3.ClrRovingTabindex, selector: "[clrRovingTabindex]", inputs: ["clrRovingTabindex", "clrRovingTabindexDisabled"] }, { kind: "directive", type: i3.ClrKeyFocusItem, selector: "[clrKeyFocusItem]" }, { kind: "directive", type: i4.ClrPopoverOrigin, selector: "[clrPopoverOrigin]" }, { kind: "directive", type: i4.ClrPopoverContent, selector: "[clrPopoverContent]", inputs: ["clrPopoverContent", "clrPopoverContentAt", "clrPopoverContentAvailablePositions", "clrPopoverContentType", "clrPopoverContentOutsideClickToClose", "clrPopoverContentScrollToClose", "clrPopoverContentOrigin"] }, { kind: "pipe", type: i8.SlicePipe, name: "slice" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ClrCombobox, decorators: [{
             type: Component,
@@ -1191,17 +1467,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
                         '[class.aria-required]': 'true',
                         '[class.clr-combobox]': 'true',
                         '[class.clr-combobox-disabled]': 'control?.disabled',
-                    }, standalone: false, template: "<!--\n  ~ Copyright (c) 2016-2026 Broadcom. All Rights Reserved.\n  ~ The term \"Broadcom\" refers to Broadcom Inc. and/or its subsidiaries.\n  ~ This software is released under MIT license.\n  ~ The full license information can be found in LICENSE in the root directory of this project.\n  -->\n\n<!-- The (click) handler is needed to auto-focus on input field which can not currently occupy the whole\nwidth of the component, after being wrapped to a new line -->\n<div\n  class=\"clr-combobox-wrapper\"\n  clrPopoverOrigin\n  (click)=\"onWrapperClick($event)\"\n  [class.multi]=\"multiSelect\"\n  [class.invalid]=\"(control?.control.touched && control?.invalid)\"\n  [class.disabled]=\"control?.disabled\"\n>\n  @if (multiSelect && optionSelectionService.selectionModel.model && multiSelectModel.length > 0) {\n  <span\n    role=\"grid\"\n    clrRovingTabindex\n    [clrRovingTabindexDisabled]=\"control?.disabled\"\n    clrDirection=\"both\"\n    [attr.aria-label]=\"getSelectionAriaLabel()\"\n    [attr.aria-disabled]=\"control?.disabled? true: null\"\n    class=\"clr-combobox-pills\"\n  >\n    @for (item of multiSelectModel; track item; let i = $index) {\n    <span class=\"label label-combobox-pill\" role=\"row\">\n      <span role=\"gridcell\">\n        <span class=\"clr-combobox-pill-content\" clrKeyFocusItem>\n          @if (optionSelected) {\n          <ng-container\n            [ngTemplateOutlet]=\"optionSelected.template\"\n            [ngTemplateOutletContext]=\"{$implicit: optionSelectionService.selectionModel.model[i]}\"\n          ></ng-container>\n          }\n        </span>\n      </span>\n      <span role=\"gridcell\">\n        <button\n          clrKeyFocusItem\n          type=\"button\"\n          class=\"clr-combobox-remove-btn\"\n          [disabled]=\"control?.disabled? true: null\"\n          [attr.aria-label]=\"commonStrings.keys.comboboxDelete + ' ' + optionSelectionService.selectionModel.toString(displayField, i)\"\n          (click)=\"unselect(item)\"\n        >\n          <cds-icon shape=\"window-close\" size=\"12\"></cds-icon>\n        </button>\n      </span>\n    </span>\n    }\n  </span>\n  }\n\n  <input\n    #textboxInput\n    type=\"text\"\n    role=\"combobox\"\n    [id]=\"inputId()\"\n    class=\"clr-input clr-combobox-input\"\n    [(ngModel)]=\"searchText\"\n    (blur)=\"onBlur($event)\"\n    (focus)=\"onFocus()\"\n    (change)=\"onChange()\"\n    [attr.aria-expanded]=\"openState\"\n    [attr.aria-owns]=\"ariaOwns\"\n    aria-haspopup=\"listbox\"\n    aria-autocomplete=\"list\"\n    autocomplete=\"off\"\n    [attr.aria-invalid]=\"control?.invalid? true: null\"\n    [disabled]=\"control?.disabled? true: null\"\n    [attr.aria-activedescendant]=\"getActiveDescendant()\"\n    [attr.placeholder]=\"placeholder\"\n  />\n\n  <!-- No click handler, as it uses the handler on the .clr-combobox-wrapper -->\n  <button\n    #trigger\n    type=\"button\"\n    class=\"clr-combobox-trigger\"\n    tabindex=\"-1\"\n    [disabled]=\"control?.disabled || null\"\n    [attr.aria-label]=\"commonStrings.keys.comboboxOpen\"\n  >\n    <cds-icon shape=\"angle\" direction=\"down\"></cds-icon>\n  </button>\n\n  <div class=\"clr-focus-indicator\" [class.clr-focus]=\"focused\"></div>\n</div>\n\n<!-- Both close handlers are handled manually.\n'outsideClickToClose' has complex handling that's necessary\nto be manual due to the component architecture -->\n<div role=\"dialog\" *clrPopoverContent=\"openState; at popoverPosition; type: popoverType;\">\n  <ng-content></ng-content>\n</div>\n" }]
+                    }, standalone: false, template: "<!--\n  ~ Copyright (c) 2016-2026 Broadcom. All Rights Reserved.\n  ~ The term \"Broadcom\" refers to Broadcom Inc. and/or its subsidiaries.\n  ~ This software is released under MIT license.\n  ~ The full license information can be found in LICENSE in the root directory of this project.\n  -->\n\n<!-- The (click) handler is needed to auto-focus on input field which can not currently occupy the whole\nwidth of the component, after being wrapped to a new line -->\n<div\n  #wrapper\n  class=\"clr-combobox-wrapper\"\n  clrPopoverOrigin\n  (click)=\"onWrapperClick($event)\"\n  [class.multi]=\"multiSelect\"\n  [class.invalid]=\"(control?.control.touched && control?.invalid)\"\n  [class.disabled]=\"control?.disabled\"\n>\n  @if (multiSelect && multiSelectModel && multiSelectModel.length > 0) {\n  <span\n    role=\"grid\"\n    clrRovingTabindex\n    [clrRovingTabindexDisabled]=\"control?.disabled\"\n    clrDirection=\"both\"\n    [attr.aria-label]=\"getSelectionAriaLabel()\"\n    [attr.aria-disabled]=\"control?.disabled? true: null\"\n    class=\"clr-combobox-pills\"\n  >\n    <ng-template #pillTemplate let-item let-i=\"index\">\n      <span class=\"label label-combobox-pill\" role=\"row\">\n        <span role=\"gridcell\">\n          <span class=\"clr-combobox-pill-content\" clrKeyFocusItem>\n            @if (optionSelected) {\n            <ng-container\n              [ngTemplateOutlet]=\"optionSelected.template\"\n              [ngTemplateOutletContext]=\"{$implicit: item}\"\n            ></ng-container>\n            }\n          </span>\n        </span>\n        <span role=\"gridcell\">\n          <button\n            clrKeyFocusItem\n            type=\"button\"\n            class=\"clr-combobox-remove-btn\"\n            [disabled]=\"control?.disabled ? true : null\"\n            [attr.aria-label]=\"commonStrings.keys.comboboxDelete + ' ' + optionSelectionService.selectionModel.toString(displayField, i)\"\n            (click)=\"unselect(item)\"\n          >\n            <cds-icon shape=\"window-close\" size=\"12\"></cds-icon>\n          </button>\n        </span>\n      </span>\n    </ng-template>\n\n    @if (showSelectAll) { @if (isTotalSelection && !selectionExpanded) {\n    <span class=\"label label-combobox-pill\" role=\"row\">\n      <span role=\"gridcell\">\n        <span class=\"clr-combobox-pill-content\" clrKeyFocusItem>{{ allSelectedText }}</span>\n      </span>\n      <span role=\"gridcell\">\n        <button\n          clrKeyFocusItem\n          type=\"button\"\n          class=\"clr-combobox-remove-btn\"\n          (click)=\"clearSelection()\"\n          [attr.aria-label]=\"commonStrings.keys.comboboxUnselectAll\"\n        >\n          <cds-icon shape=\"window-close\" size=\"12\"></cds-icon>\n        </button>\n      </span>\n    </span>\n    } @if (showIndividualPills) { @for (item of multiSelectModel | slice:0:calculatedLimit; track item; let i = $index)\n    {\n    <ng-container\n      [ngTemplateOutlet]=\"pillTemplate\"\n      [ngTemplateOutletContext]=\"{$implicit: item, index: i}\"\n    ></ng-container>\n    } } @if (showTruncationToggle) {\n    <span role=\"row\" class=\"label label-combobox-pill clr-combobox-truncation-row\">\n      <span role=\"gridcell\" class=\"clr-combobox-truncation-cell\">\n        <span class=\"clr-combobox-pill-content\">\n          <button\n            #truncationButton\n            clrKeyFocusItem\n            type=\"button\"\n            class=\"btn btn-link clr-combobox-show-more-btn\"\n            (click)=\"toggleSelectionExpand()\"\n            [attr.aria-expanded]=\"selectionExpanded\"\n            [attr.aria-controls]=\"'expanded-selection-' + id\"\n          >\n            @if (!selectionExpanded) { {{ showAllText }} } @else { {{ commonStrings.keys.comboboxShowLess }} }\n          </button>\n        </span>\n      </span>\n    </span>\n    } } @else { @for (item of multiSelectModel; track item; let i = $index) {\n    <ng-container\n      [ngTemplateOutlet]=\"pillTemplate\"\n      [ngTemplateOutletContext]=\"{$implicit: item, index: i}\"\n    ></ng-container>\n    } }\n  </span>\n\n  @if (showSelectAll && shouldCalculate) {\n  <span class=\"clr-combobox-pills-calculation\" aria-hidden=\"true\">\n    @for (item of multiSelectModel; track item) {\n    <span class=\"label label-combobox-pill\" #pill>\n      <span class=\"clr-combobox-pill-content\">\n        @if (optionSelected) {\n        <ng-container\n          [ngTemplateOutlet]=\"optionSelected.template\"\n          [ngTemplateOutletContext]=\"{$implicit: item}\"\n        ></ng-container>\n        }\n      </span>\n      <button type=\"button\" class=\"clr-combobox-remove-btn\" tabindex=\"-1\">\n        <cds-icon shape=\"window-close\" size=\"12\"></cds-icon>\n      </button>\n    </span>\n    }\n  </span>\n  } }\n\n  <input\n    #textboxInput\n    type=\"text\"\n    role=\"combobox\"\n    [id]=\"inputId()\"\n    class=\"clr-input clr-combobox-input\"\n    [(ngModel)]=\"searchText\"\n    (blur)=\"onBlur($event)\"\n    (focus)=\"onFocus()\"\n    (change)=\"onChange()\"\n    [attr.aria-expanded]=\"openState\"\n    [attr.aria-owns]=\"ariaOwns\"\n    aria-haspopup=\"listbox\"\n    aria-autocomplete=\"list\"\n    autocomplete=\"off\"\n    [attr.aria-invalid]=\"control?.invalid? true: null\"\n    [disabled]=\"control?.disabled? true: null\"\n    [attr.aria-activedescendant]=\"getActiveDescendant()\"\n    [attr.placeholder]=\"placeholder\"\n  />\n\n  <!-- No click handler, as it uses the handler on the .clr-combobox-wrapper -->\n  <button\n    #trigger\n    type=\"button\"\n    class=\"clr-combobox-trigger\"\n    tabindex=\"-1\"\n    [disabled]=\"control?.disabled || null\"\n    [attr.aria-label]=\"commonStrings.keys.comboboxOpen\"\n  >\n    <cds-icon shape=\"angle\" direction=\"down\"></cds-icon>\n  </button>\n\n  <div class=\"clr-focus-indicator\" [class.clr-focus]=\"focused\"></div>\n</div>\n\n<!-- Both close handlers are handled manually.\n'outsideClickToClose' has complex handling that's necessary\nto be manual due to the component architecture -->\n<div role=\"dialog\" *clrPopoverContent=\"openState; at popoverPosition; type: popoverType;\">\n  <ng-content></ng-content>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i0.ViewContainerRef }, { type: i0.Injector }, { type: i1$1.NgControl, decorators: [{
                     type: Self
                 }, {
                     type: Optional
-                }] }, { type: i0.Renderer2 }, { type: i0.ElementRef }, { type: OptionSelectionService }, { type: i3$1.ClrCommonStringsService }, { type: i4.ClrPopoverService }, { type: ComboboxContainerService, decorators: [{
+                }] }, { type: i0.Renderer2 }, { type: i0.ElementRef }, { type: OptionSelectionService }, { type: i3.ClrCommonStringsService }, { type: i4.ClrPopoverService }, { type: ComboboxContainerService, decorators: [{
                     type: Optional
                 }] }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [PLATFORM_ID]
-                }] }, { type: ComboboxFocusHandler }, { type: i0.ChangeDetectorRef }], propDecorators: { placeholder: [{
+                }] }, { type: ComboboxFocusHandler }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: ClrComboboxContainer, decorators: [{
+                    type: Optional
+                }, {
+                    type: Host
+                }] }], propDecorators: { placeholder: [{
                 type: Input,
                 args: ['placeholder']
             }], clrInputChange: [{
@@ -1222,12 +1502,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
             }], optionSelected: [{
                 type: ContentChild,
                 args: [ClrOptionSelected]
+            }], truncationButton: [{
+                type: ViewChild,
+                args: ['truncationButton']
+            }], wrapper: [{
+                type: ViewChild,
+                args: ['wrapper', { static: true }]
+            }], calculationPills: [{
+                type: ViewChildren,
+                args: ['pill']
             }], options: [{
                 type: ContentChild,
                 args: [ClrOptions]
+            }], showSelectAll: [{
+                type: Input,
+                args: [{ alias: 'showSelectAll', transform: booleanAttribute }]
             }], editable: [{
                 type: Input,
                 args: ['clrEditable']
+            }], editableResolver: [{
+                type: Input,
+                args: ['clrEditableResolverFn']
             }], identityFn: [{
                 type: Input,
                 args: ['clrComboboxIdentityFn']
@@ -1256,9 +1551,7 @@ class ClrOptionItems {
         this.iterableProxy = new NgForOf(vcr, template, differs);
         this.subscriptions.push(optionService.inputChanged.subscribe(filter => {
             this.filter = filter;
-            if (optionService.filtering) {
-                this.updateItems();
-            }
+            this.updateItems();
         }));
     }
     set rawItems(items) {
@@ -1474,5 +1767,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { ClrCombobox, ClrComboboxContainer, ClrComboboxModule, ClrOption, ClrOptionGroup, ClrOptionItems, ClrOptionSelected, ClrOptions };
+export { ClrCombobox, ClrComboboxContainer, ClrComboboxModule, ClrOption, ClrOptionGroup, ClrOptionItems, ClrOptionSelected, ClrOptions, SELECT_ALL_ID };
 //# sourceMappingURL=clr-angular-forms-combobox.mjs.map