@colijnit/corecomponents_v12 262.1.11 → 262.1.13

package/fesm2022/colijnit-corecomponents_v12.mjs

@@ -7196,6 +7196,9 @@ class InputTextComponent extends BaseInputComponent {
     get isDate() {
         return this.type === "date";
     }
+    get hasValue() {
+        return super.hasValue || (this.placeholder !== '' && this.placeholder !== null && this.placeholder !== undefined);
+    }
     leftIconClick = new EventEmitter();
     leftIconMouseDown = new EventEmitter();
     leftIconMouseUp = new EventEmitter();
@@ -7266,6 +7269,15 @@ class InputTextComponent extends BaseInputComponent {
         this.elementRef = elementRef;
         super._markAsOnPush();
     }
+    ngAfterViewInit() {
+        // label was not correctly being used, so this is a legacy issue fix
+        // if you want to use a placeholder (as a placeholder is meant to be used) then you need to set the label as well
+        if (!this.label) {
+            this.label = this.placeholder;
+            this.placeholder = '';
+        }
+        super.ngAfterViewInit();
+    }
     handleLeftIconClick(event) {
         event.preventDefault();
         event.stopPropagation();
@@ -7458,7 +7470,7 @@ class InputTextComponent extends BaseInputComponent {
       <div class="input-wrapper">
         @if (showPlaceholderOnFocus || (!showPlaceholderOnFocus && !hasValue && !focused)) {
           <label
-          [textContent]="placeholder"></label>
+          [textContent]="label"></label>
         }
         @if (!focused && !useContent && formatPipe) {
           <span class="input-text-formatted"
@@ -7472,7 +7484,7 @@ class InputTextComponent extends BaseInputComponent {
           [class.input-input-hidden]="useContent"
           [ngClass]="align"
           [type]="isWeekInputMode ? 'text' : (isFocusedOnDate || (hasValue && emptyPlace)) ? 'date' : (digitsOnly ? 'number' : (type === 'date' ? 'text' : type))"
-          [placeholder]="type === 'date' && !isFocusedOnDate ? '' : ''"
+          [placeholder]="type === 'date' && !isFocusedOnDate ? '' : placeholder"
           [pattern]="type === 'date' ? pattern : undefined"
           [ngModel]="model"
           [min]="(type === 'number' || type === 'date') && this.min ? this.min : undefined"
@@ -7534,7 +7546,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
       <div class="input-wrapper">
         @if (showPlaceholderOnFocus || (!showPlaceholderOnFocus && !hasValue && !focused)) {
           <label
-          [textContent]="placeholder"></label>
+          [textContent]="label"></label>
         }
         @if (!focused && !useContent && formatPipe) {
           <span class="input-text-formatted"
@@ -7548,7 +7560,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
           [class.input-input-hidden]="useContent"
           [ngClass]="align"
           [type]="isWeekInputMode ? 'text' : (isFocusedOnDate || (hasValue && emptyPlace)) ? 'date' : (digitsOnly ? 'number' : (type === 'date' ? 'text' : type))"
-          [placeholder]="type === 'date' && !isFocusedOnDate ? '' : ''"
+          [placeholder]="type === 'date' && !isFocusedOnDate ? '' : placeholder"
           [pattern]="type === 'date' ? pattern : undefined"
           [ngModel]="model"
           [min]="(type === 'number' || type === 'date') && this.min ? this.min : undefined"
@@ -13602,12 +13614,38 @@ class LovUtils {
             .filter(val => val != null && val !== '')
             .join(' - ');
     }
+    static getHighlightParts(value, term) {
+        const text = value ?? '';
+        if (!text || !term) {
+            return [{ text: text, match: false }];
+        }
+        const regex = new RegExp(LovUtils._escapeRegExp(term), 'gi');
+        const parts = [];
+        let lastIndex = 0;
+        let match;
+        while ((match = regex.exec(text)) !== null) {
+            if (match.index > lastIndex) {
+                parts.push({ text: text.slice(lastIndex, match.index), match: false });
+            }
+            parts.push({ text: match[0], match: true });
+            lastIndex = match.index + match[0].length;
+            if (match.index === regex.lastIndex) {
+                regex.lastIndex++;
+            }
+        }
+        if (lastIndex < text.length) {
+            parts.push({ text: text.slice(lastIndex), match: false });
+        }
+        return parts;
+    }
+    static _escapeRegExp(value) {
+        return value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+    }
 }
 
 class ListOfValuesPopupComponent {
     iconCacheService;
     _elementRef;
-    lovUtils = LovUtils;
     set lovItems(children) {
         this._lovItems = children.toArray();
         this._scrollIntoView();
@@ -13725,7 +13763,11 @@ class ListOfValuesPopupComponent {
         }
     }
     selectModelByViewModel(viewModel, closePopup = true) {
-        this.model = this.viewModelsMain.find(vm => vm === viewModel).model;
+        const found = this.viewModelsMain.find(vm => vm === viewModel);
+        if (!found) {
+            return;
+        }
+        this.model = found.model;
         this.modelChange.emit(this.model);
         this._scrollIntoView();
         if (closePopup) {
@@ -13758,6 +13800,9 @@ class ListOfValuesPopupComponent {
         this.modelChange.emit(this.model);
     }
     selectNextOption(back = false) {
+        if (this.viewModels.length === 0) {
+            return;
+        }
         let nextModel;
         if (!this.highLightModel) {
             nextModel = this.viewModels[back ? this.viewModels.length - 1 : 0];
@@ -13833,6 +13878,9 @@ class ListOfValuesPopupComponent {
                 }
             });
         });
+        this.viewModels.forEach((vm) => {
+            vm.highlightParts = LovUtils.getHighlightParts(LovUtils.getDisplayValue(vm.model, this.displayField), this.searchTerm);
+        });
     }
     _scrollIntoView() {
         const activeIndex = this.viewModels.findIndex(vmm => vmm === this.highLightModel);
@@ -13894,18 +13942,30 @@ class ListOfValuesPopupComponent {
                                 <co-icon class="input-text-left-icon" [iconData]="iconCacheService.getIcon(viewModel.model[optionIcon])">
                                 </co-icon>
                             }
-                            <span class="lov-options-text" [textContent]="lovUtils.getDisplayValue(viewModel.model, displayField)"></span>
+                            <ng-container [ngTemplateOutlet]="optionText" [ngTemplateOutletContext]="{parts: viewModel.highlightParts}"></ng-container>
                         }
                         @if (multiselect) {
                             <co-input-checkbox [model]="viewModel.checked"
                                                (modelChange)="selectViewModel(viewModel, false)"></co-input-checkbox>
-                            <span class="lov-options-text" [textContent]="lovUtils.getDisplayValue(viewModel.model, displayField)"></span>
+                            <ng-container [ngTemplateOutlet]="optionText" [ngTemplateOutletContext]="{parts: viewModel.highlightParts}"></ng-container>
                         }
                     </li>
                 }
             </ul>
         </div>
-    `, isInline: true, dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: InputCheckboxComponent, selector: "co-input-checkbox", inputs: ["cssClass", "clickableLabel"], outputs: ["modelChange"] }, { kind: "directive", type: OverlayDirective, selector: "[overlay]", inputs: ["overlay", "view", "inline", "keepInView", "inheritWidth", "rightAlign", "fullSize"] }, { kind: "directive", type: ClickOutsideDirective, selector: "[clickOutside]", inputs: ["clickOutside", "alwaysTrigger"], outputs: ["clickOutside"], exportAs: ["clickOutside"] }, { kind: "component", type: IconComponent, selector: "co-icon", inputs: ["icon", "iconData"] }, { kind: "component", type: InputSearchComponent, selector: "co-input-search", inputs: ["placeholder", "handleKeydown", "useLeftIcon", "useRightIcon", "leftIconData", "rightIconData", "centerLabel"], outputs: ["search", "isFocused", "leftIconClick", "rightIconClick"] }, { kind: "pipe", type: CoreLocalizePipe, name: "coreLocalize" }], encapsulation: i0.ViewEncapsulation.None });
+
+        <ng-template #optionText let-parts="parts">
+            <span class="lov-options-text">
+                @for (part of parts; track $index) {
+                    @if (part.match) {
+                        <mark class="lov-highlight" [textContent]="part.text"></mark>
+                    } @else {
+                        <span [textContent]="part.text"></span>
+                    }
+                }
+            </span>
+        </ng-template>
+    `, isInline: true, dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: InputCheckboxComponent, selector: "co-input-checkbox", inputs: ["cssClass", "clickableLabel"], outputs: ["modelChange"] }, { kind: "directive", type: OverlayDirective, selector: "[overlay]", inputs: ["overlay", "view", "inline", "keepInView", "inheritWidth", "rightAlign", "fullSize"] }, { kind: "directive", type: ClickOutsideDirective, selector: "[clickOutside]", inputs: ["clickOutside", "alwaysTrigger"], outputs: ["clickOutside"], exportAs: ["clickOutside"] }, { kind: "component", type: IconComponent, selector: "co-icon", inputs: ["icon", "iconData"] }, { kind: "component", type: InputSearchComponent, selector: "co-input-search", inputs: ["placeholder", "handleKeydown", "useLeftIcon", "useRightIcon", "leftIconData", "rightIconData", "centerLabel"], outputs: ["search", "isFocused", "leftIconClick", "rightIconClick"] }, { kind: "pipe", type: CoreLocalizePipe, name: "coreLocalize" }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ListOfValuesPopupComponent, decorators: [{
             type: Component,
@@ -13945,17 +14005,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                                 <co-icon class="input-text-left-icon" [iconData]="iconCacheService.getIcon(viewModel.model[optionIcon])">
                                 </co-icon>
                             }
-                            <span class="lov-options-text" [textContent]="lovUtils.getDisplayValue(viewModel.model, displayField)"></span>
+                            <ng-container [ngTemplateOutlet]="optionText" [ngTemplateOutletContext]="{parts: viewModel.highlightParts}"></ng-container>
                         }
                         @if (multiselect) {
                             <co-input-checkbox [model]="viewModel.checked"
                                                (modelChange)="selectViewModel(viewModel, false)"></co-input-checkbox>
-                            <span class="lov-options-text" [textContent]="lovUtils.getDisplayValue(viewModel.model, displayField)"></span>
+                            <ng-container [ngTemplateOutlet]="optionText" [ngTemplateOutletContext]="{parts: viewModel.highlightParts}"></ng-container>
                         }
                     </li>
                 }
             </ul>
         </div>
+
+        <ng-template #optionText let-parts="parts">
+            <span class="lov-options-text">
+                @for (part of parts; track $index) {
+                    @if (part.match) {
+                        <mark class="lov-highlight" [textContent]="part.text"></mark>
+                    } @else {
+                        <span [textContent]="part.text"></span>
+                    }
+                }
+            </span>
+        </ng-template>
     `,
                     encapsulation: ViewEncapsulation.None,
                     standalone: false
@@ -14053,6 +14125,7 @@ class ListOfValuesComponent extends BaseInputComponent {
     isLoading = false;
     _collection = [];
     debounceTimeout;
+    _filterRequestId = 0;
     _lovPopupComponentRef;
     constructor(formComponent, iconCacheService, changeDetector, overlayService, formUserChangeListener, ngZoneWrapper, elementRef) {
         super(changeDetector, overlayService, formUserChangeListener, ngZoneWrapper, elementRef);
@@ -14069,6 +14142,25 @@ class ListOfValuesComponent extends BaseInputComponent {
         super.ngOnInit();
         this._setSelectedModel();
     }
+    // Value shown in the input: the search text while fetching (largeCollection), otherwise the
+    // selected model(s). Lets a single <co-input-text> serve both modes without a template split.
+    get inputModel() {
+        if (this.largeCollection) {
+            return this.filterText;
+        }
+        if (this.multiselect) {
+            return (!this.selectedModels || this.selectedModels.length === 0) ? null : this.selectedModels;
+        }
+        return this.selectedModel;
+    }
+    handleModelChange(model) {
+        if (this.largeCollection) {
+            this.onModelChange(model);
+        }
+        else {
+            this.handleInputModelChange(model);
+        }
+    }
     handleInputModelChange(model) {
         if (this._lovPopupComponentRef) {
             this._lovPopupComponentRef.instance.searchTerm = model;
@@ -14083,26 +14175,33 @@ class ListOfValuesComponent extends BaseInputComponent {
     }
     onModelChange(model) {
         this.isLoading = true;
+        // Mark this keystroke as the latest request immediately, so an older in-flight
+        // request that resolves within the debounce window is still discarded.
+        const requestId = ++this._filterRequestId;
         clearTimeout(this.debounceTimeout);
         this.debounceTimeout = setTimeout(() => {
-            this.applyFilter(model);
+            this.applyFilter(model, requestId);
         }, 300);
     }
-    async applyFilter(text) {
+    async applyFilter(text, requestId = ++this._filterRequestId) {
+        await new Promise(resolve => setTimeout(resolve, 300));
+        if (requestId !== this._filterRequestId) {
+            return;
+        }
         if (text?.length < 3) {
-            await new Promise(resolve => setTimeout(resolve, 300));
             this.collection = undefined;
+            this.filterText = text;
+            this.closePopup();
+            this.isLoading = false;
+            this.changeDetector.detectChanges();
+            return;
         }
-        else {
-            await new Promise(resolve => setTimeout(resolve, 300));
-            this.collection = await this.collectionLoadFn(text);
+        const loaded = await this.collectionLoadFn(text);
+        if (requestId !== this._filterRequestId) {
+            return;
         }
+        this.collection = loaded;
         this.filterText = text;
-        if (!this.collection) {
-            this.changeDetector.detectChanges();
-            this.isLoading = false;
-            return [];
-        }
         this.filteredCollection = this.collection?.filter((item) => {
             if (this.collectionLoadFnProp && this.collectionLoadFnProp.length > 0) {
                 return item[this.collectionLoadFnProp] && item[this.collectionLoadFnProp].toLowerCase().includes(text.toLowerCase());
@@ -14111,12 +14210,19 @@ class ListOfValuesComponent extends BaseInputComponent {
                 return true;
             }
         });
-        (this.filteredCollection?.length > 0 && this.filterText?.length > 2) ? this.openPopup() : this.closePopup();
+        if (this.filteredCollection?.length > 0 && this.filterText?.length > 2) {
+            this.openPopup(); // no-op when already open
+            if (this._lovPopupComponentRef) {
+                // Refresh the open popup in place; no re-create, so no flicker.
+                this._lovPopupComponentRef.instance.collection = this.collection;
+                this._lovPopupComponentRef.instance.searchTerm = text;
+            }
+        }
+        else {
+            this.closePopup();
+        }
         this.isLoading = false;
         this.changeDetector.detectChanges();
-        if (this._lovPopupComponentRef) {
-            this._lovPopupComponentRef.instance.searchTerm = text;
-        }
     }
     handleInputKeyDown(event) {
         if (event) {
@@ -14161,6 +14267,11 @@ class ListOfValuesComponent extends BaseInputComponent {
         if (this.readonly) {
             return;
         }
+        // Idempotent: keep the existing popup so continued typing refreshes it in place
+        // instead of re-creating it (which would replay the open animation / flicker).
+        if (this._lovPopupComponentRef) {
+            return;
+        }
         this.isSelectOpen = true;
         this._lovPopupComponentRef = this.overlayService.createComponent(ListOfValuesPopupComponent, {
             parentForOverlay: this.elementRef,
@@ -14219,6 +14330,11 @@ class ListOfValuesComponent extends BaseInputComponent {
         this.focused = false;
     }
     checkModel() {
+        if (this.largeCollection) {
+            // The input holds the search text (not a to-be-resolved value) and selection happens via the
+            // popup, so blur must not try to match/clear the model here.
+            return;
+        }
         if (!this.multiselect && this.selectedModel && this.collection) {
             const model = this.collection.find(c => LovUtils.getDisplayValue(c, this.displayField) === this.selectedModel);
             if (model) {
@@ -14251,6 +14367,7 @@ class ListOfValuesComponent extends BaseInputComponent {
             }
             else {
                 this.selectedModel = '';
+                this.filterText = '';
             }
         }
     }
@@ -14262,59 +14379,47 @@ class ListOfValuesComponent extends BaseInputComponent {
                 useExisting: forwardRef(() => ListOfValuesComponent)
             }
         ], viewQueries: [{ propertyName: "parentForOverlay", first: true, predicate: ["parentForOverlay"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: `
-      @if (!largeCollection) {
-        <co-input-text
-          aria-haspopup="listbox"
-          [attr.aria-expanded]="isSelectOpen"
-          aria-controls="lov-popup"
-          role="combobox"
-          class="no-focus-line"
-          overlayParent
-          #parentForOverlay="overlayParent"
-          type="text"
-          [id]="label"
-          [model]="multiselect ? ((!selectedModels || selectedModels.length === 0) ? null : selectedModels ) : selectedModel"
-          [placeholder]="label"
-          [myFormInputInstance]="this"
-          [readonly]="readonly"
-          [disabled]="disabled"
-          [required]="required"
-          [noClickFocus]="false"
-          [leftIconData]=" model && model[optionIcon] ? iconCacheService.getIcon(model[optionIcon]) : leftIconData"
-          [rightIcon]="isSelectOpen ? icons.ChevronUpRegular : icons.ChevronDownRegular"
-          [showClearButton]="true"
-          [useContent]="multiselect"
-          [customHeight]="multiselect"
-          [keepFocussed]="keepFocussed"
-          (modelChange)="handleInputModelChange($event)"
-          (click)="openPopup()"
-          (rightIconClick)="toggleSelect()"
-          (keydown)="handleInputKeyDown($event)"
-          (clearIconClick)="clearModel($event)"
-          (blur)="checkModel()">
-          @if (multiselect && showChips) {
-            <div class="multiselect-chips-wrapper">
-              @for (chip of model; track chip) {
-                <div class="chips">
-                    <span class="chips-description" [textContent]="lovUtils.getDisplayValue(chip, displayField)"></span>
-                    <co-icon class="remove-chip-icon" [icon]="icons.CrossSkinny" (click)="removeOptionFromModel(chip)"></co-icon>
-                </div>
-              }
-            </div>
-          }
-        </co-input-text>
-      }
-      
-      @if (largeCollection) {
-        <co-input-text
-          [model]="filterText"
-          [placeholder]="label"
-          [required]="required"
-          [disabled]="disabled"
-          [readonly]="readonly"
-          (modelChange)="onModelChange($event)">
-        </co-input-text>
-      }
+      <co-input-text
+        aria-haspopup="listbox"
+        [attr.aria-expanded]="isSelectOpen"
+        aria-controls="lov-popup"
+        role="combobox"
+        class="no-focus-line"
+        overlayParent
+        #parentForOverlay="overlayParent"
+        type="text"
+        [id]="label"
+        [model]="inputModel"
+        [label]="label"
+        [placeholder]="searchPlaceholder"
+        [myFormInputInstance]="this"
+        [readonly]="readonly"
+        [disabled]="disabled"
+        [required]="required"
+        [noClickFocus]="false"
+        [leftIconData]=" model && model[optionIcon] ? iconCacheService.getIcon(model[optionIcon]) : leftIconData"
+        [rightIcon]="isSelectOpen ? icons.ChevronUpRegular : icons.ChevronDownRegular"
+        [showClearButton]="true"
+        [useContent]="multiselect"
+        [customHeight]="multiselect"
+        [keepFocussed]="keepFocussed"
+        (modelChange)="handleModelChange($event)"
+        (click)="openPopup()"
+        (rightIconClick)="toggleSelect()"
+        (keydown)="handleInputKeyDown($event)"
+        (clearIconClick)="clearModel($event)"
+        (blur)="checkModel()">
+        @if (multiselect && showChips) {
+          <div class="multiselect-chips-wrapper">
+            @for (chip of model; track chip) {
+              <div class="chips">
+                  <span class="chips-description" [textContent]="lovUtils.getDisplayValue(chip, displayField)"></span>
+                  <co-icon class="remove-chip-icon" [icon]="icons.CrossSkinny" (click)="removeOptionFromModel(chip)"></co-icon>
+              </div>
+            }
+          </div>
+        }
+      </co-input-text>
       @if (isLoading) {
         <div class="filter-loader"><span></span></div>
       }
@@ -14326,59 +14431,47 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
             args: [{
                     selector: 'co-list-of-values',
                     template: `
-      @if (!largeCollection) {
-        <co-input-text
-          aria-haspopup="listbox"
-          [attr.aria-expanded]="isSelectOpen"
-          aria-controls="lov-popup"
-          role="combobox"
-          class="no-focus-line"
-          overlayParent
-          #parentForOverlay="overlayParent"
-          type="text"
-          [id]="label"
-          [model]="multiselect ? ((!selectedModels || selectedModels.length === 0) ? null : selectedModels ) : selectedModel"
-          [placeholder]="label"
-          [myFormInputInstance]="this"
-          [readonly]="readonly"
-          [disabled]="disabled"
-          [required]="required"
-          [noClickFocus]="false"
-          [leftIconData]=" model && model[optionIcon] ? iconCacheService.getIcon(model[optionIcon]) : leftIconData"
-          [rightIcon]="isSelectOpen ? icons.ChevronUpRegular : icons.ChevronDownRegular"
-          [showClearButton]="true"
-          [useContent]="multiselect"
-          [customHeight]="multiselect"
-          [keepFocussed]="keepFocussed"
-          (modelChange)="handleInputModelChange($event)"
-          (click)="openPopup()"
-          (rightIconClick)="toggleSelect()"
-          (keydown)="handleInputKeyDown($event)"
-          (clearIconClick)="clearModel($event)"
-          (blur)="checkModel()">
-          @if (multiselect && showChips) {
-            <div class="multiselect-chips-wrapper">
-              @for (chip of model; track chip) {
-                <div class="chips">
-                    <span class="chips-description" [textContent]="lovUtils.getDisplayValue(chip, displayField)"></span>
-                    <co-icon class="remove-chip-icon" [icon]="icons.CrossSkinny" (click)="removeOptionFromModel(chip)"></co-icon>
-                </div>
-              }
-            </div>
-          }
-        </co-input-text>
-      }
-      
-      @if (largeCollection) {
-        <co-input-text
-          [model]="filterText"
-          [placeholder]="label"
-          [required]="required"
-          [disabled]="disabled"
-          [readonly]="readonly"
-          (modelChange)="onModelChange($event)">
-        </co-input-text>
-      }
+      <co-input-text
+        aria-haspopup="listbox"
+        [attr.aria-expanded]="isSelectOpen"
+        aria-controls="lov-popup"
+        role="combobox"
+        class="no-focus-line"
+        overlayParent
+        #parentForOverlay="overlayParent"
+        type="text"
+        [id]="label"
+        [model]="inputModel"
+        [label]="label"
+        [placeholder]="searchPlaceholder"
+        [myFormInputInstance]="this"
+        [readonly]="readonly"
+        [disabled]="disabled"
+        [required]="required"
+        [noClickFocus]="false"
+        [leftIconData]=" model && model[optionIcon] ? iconCacheService.getIcon(model[optionIcon]) : leftIconData"
+        [rightIcon]="isSelectOpen ? icons.ChevronUpRegular : icons.ChevronDownRegular"
+        [showClearButton]="true"
+        [useContent]="multiselect"
+        [customHeight]="multiselect"
+        [keepFocussed]="keepFocussed"
+        (modelChange)="handleModelChange($event)"
+        (click)="openPopup()"
+        (rightIconClick)="toggleSelect()"
+        (keydown)="handleInputKeyDown($event)"
+        (clearIconClick)="clearModel($event)"
+        (blur)="checkModel()">
+        @if (multiselect && showChips) {
+          <div class="multiselect-chips-wrapper">
+            @for (chip of model; track chip) {
+              <div class="chips">
+                  <span class="chips-description" [textContent]="lovUtils.getDisplayValue(chip, displayField)"></span>
+                  <co-icon class="remove-chip-icon" [icon]="icons.CrossSkinny" (click)="removeOptionFromModel(chip)"></co-icon>
+              </div>
+            }
+          </div>
+        }
+      </co-input-text>
       @if (isLoading) {
         <div class="filter-loader"><span></span></div>
       }