@colijnit/corecomponents_v12 261.20.17 → 261.20.19

package/fesm2022/colijnit-corecomponents_v12.mjs

@@ -1,6 +1,6 @@
 import { __decorate } from 'tslib';
 import * as i0 from '@angular/core';
-import { Input, Injectable, HostBinding, ViewEncapsulation, Component, Directive, ElementRef, Pipe, EventEmitter, Output, ViewChildren, ViewContainerRef, HostListener, ViewChild, Optional, NgModule, SkipSelf, InjectionToken, Inject, forwardRef, ChangeDetectionStrategy, ContentChildren, NO_ERRORS_SCHEMA, Injector, QueryList } from '@angular/core';
+import { Input, Injectable, HostBinding, ViewEncapsulation, Component, Directive, ElementRef, Pipe, EventEmitter, Output, ViewChildren, ViewContainerRef, HostListener, ViewChild, Optional, NgModule, SkipSelf, InjectionToken, Inject, forwardRef, ChangeDetectionStrategy, ContentChildren, LOCALE_ID, NO_ERRORS_SCHEMA, Injector, QueryList } from '@angular/core';
 import * as i5 from '@angular/forms';
 import { NgModel, UntypedFormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import * as i1 from '@angular/platform-browser';
@@ -532,6 +532,28 @@ class NumberUtils {
             return { isOk: false, nearestOkNr: nearestOkNr };
         }
     }
+    /**
+     * Decides whether typing one more digit onto the given numeric text would exceed the configured
+     * digit limits. When `decimals` (scale) is set, `maxLength` is treated as the total precision: the
+     * integer part is capped at (maxLength - decimals) digits and the fractional part at `decimals`
+     * digits. When `decimals` is not set, `maxLength` caps the total number of digits.
+     *
+     * Note: assumes the digit is appended at the end of the value, because native number inputs expose
+     * no caret/selection information to constrain mid-string edits.
+     */
+    static WouldExceedDigitLimits(currentValue, maxLength, decimals) {
+        const digits = ('' + (currentValue ?? '')).replace('-', '');
+        if (decimals > 0) {
+            const separatorIndex = digits.search(/[.,]/);
+            if (separatorIndex === -1) {
+                const maxIntegerDigits = maxLength > 0 ? maxLength - decimals : Number.POSITIVE_INFINITY;
+                return digits.length >= maxIntegerDigits;
+            }
+            const decimalDigits = digits.length - separatorIndex - 1;
+            return decimalDigits >= decimals;
+        }
+        return maxLength > 0 && digits.length >= maxLength;
+    }
     static _GetLargestDecimalPrecisionOf(...args) {
         return ArrayUtils.GetMaxCalculatedValue(args, (arg) => {
             return NumberUtils.GetDecimalPlaces(arg);
@@ -934,8 +956,12 @@ function requiredValidator(control) {
 function precisionScaleValidator(precision, scale) {
     return function (control) {
         let isValid = true;
-        if (control) {
-            isValid = NumberUtils.CheckPrecisionAndScale(control.value, precision, scale).isOk;
+        if (control && control.value !== null && control.value !== undefined && control.value !== '') {
+            // The value may be a locale display string (e.g. "1234567,89"); normalize it to a number so the
+            // decimal separator is not counted as an integer digit by CheckPrecisionAndScale.
+            const raw = control.value;
+            const numeric = typeof raw === 'string' ? Number(raw.replace(',', '.')) : raw;
+            isValid = isNaN(numeric) || NumberUtils.CheckPrecisionAndScale(numeric, precision, scale).isOk;
         }
         return isValid ? null : { 'precision-scale': "MESSAGE_FIELD_PRECISION_OVERRIDDEN||" + precision };
     };
@@ -2031,27 +2057,28 @@ class CommitButtonsComponent {
         event.currentTarget.removeEventListener('animationiteration', this._handleAnimationIteration);
     };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CommitButtonsComponent, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: CommitButtonsComponent, isStandalone: false, selector: "co-commit-buttons", inputs: { committing: "committing", commitFinished: "commitFinished", parentForOverlay: "parentForOverlay" }, outputs: { cancelClick: "cancelClick", commitClick: "commitClick" }, host: { properties: { "class.co-commit-buttons": "this.showClass" } }, viewQueries: [{ propertyName: "content", predicate: ["animatediv"], descendants: true, read: ElementRef }], ngImport: i0, template: `
-        <div class="commit-buttons-wrapper" [overlay]="parentForOverlay" [rightAlign]="true" @showHideSaveCancel>
-          <div class="commit-buttons-button save" [class.finished]="commitFinished"
-            (click)="commitClick.emit($event)">
-            @if (committing) {
-              <div class="save-button-spinner">
-                <div #animatediv></div>
-                <div #animatediv></div>
-                <div #animatediv></div>
-                <div #animatediv></div>
-              </div>
-            }
-            @if (firstShow || commitFinished) {
-              <svg class="checkmark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52">
-              <path class="checkmark-check" [class.first-show]="firstShow" fill="none" d="M14.1 27.2l7.1 7.2 16.7-16.8"/></svg>
-            }
-          </div>
-          <div class="commit-buttons-button cancel" (mousedown)="$event.preventDefault()" (click)="cancelClick.emit($event)">
-            <div class="cancel-button"></div>
-          </div>
-        </div>
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: CommitButtonsComponent, isStandalone: false, selector: "co-commit-buttons", inputs: { committing: "committing", commitFinished: "commitFinished", parentForOverlay: "parentForOverlay" }, outputs: { cancelClick: "cancelClick", commitClick: "commitClick" }, host: { properties: { "class.co-commit-buttons": "this.showClass" } }, viewQueries: [{ propertyName: "content", predicate: ["animatediv"], descendants: true, read: ElementRef }], ngImport: i0, template: `
+        <div class="commit-buttons-wrapper" [overlay]="parentForOverlay" [rightAlign]="true" @showHideSaveCancel>
+          <div class="commit-buttons-button save" [class.finished]="commitFinished"
+            (mousedown)="$event.preventDefault()"
+            (click)="commitClick.emit($event)">
+            @if (committing) {
+              <div class="save-button-spinner">
+                <div #animatediv></div>
+                <div #animatediv></div>
+                <div #animatediv></div>
+                <div #animatediv></div>
+              </div>
+            }
+            @if (firstShow || commitFinished) {
+              <svg class="checkmark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52">
+              <path class="checkmark-check" [class.first-show]="firstShow" fill="none" d="M14.1 27.2l7.1 7.2 16.7-16.8"/></svg>
+            }
+          </div>
+          <div class="commit-buttons-button cancel" (mousedown)="$event.preventDefault()" (click)="cancelClick.emit($event)">
+            <div class="cancel-button"></div>
+          </div>
+        </div>
         `, isInline: true, dependencies: [{ kind: "directive", type: OverlayDirective, selector: "[overlay]", inputs: ["overlay", "view", "inline", "keepInView", "inheritWidth", "rightAlign", "fullSize"] }], animations: [
             trigger('showHideSaveCancel', [
                 state('*', style({ transform: 'scaleY(1)', opacity: 1 })),
@@ -2064,27 +2091,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
             type: Component,
             args: [{
                     selector: 'co-commit-buttons',
-                    template: `
-        <div class="commit-buttons-wrapper" [overlay]="parentForOverlay" [rightAlign]="true" @showHideSaveCancel>
-          <div class="commit-buttons-button save" [class.finished]="commitFinished"
-            (click)="commitClick.emit($event)">
-            @if (committing) {
-              <div class="save-button-spinner">
-                <div #animatediv></div>
-                <div #animatediv></div>
-                <div #animatediv></div>
-                <div #animatediv></div>
-              </div>
-            }
-            @if (firstShow || commitFinished) {
-              <svg class="checkmark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52">
-              <path class="checkmark-check" [class.first-show]="firstShow" fill="none" d="M14.1 27.2l7.1 7.2 16.7-16.8"/></svg>
-            }
-          </div>
-          <div class="commit-buttons-button cancel" (mousedown)="$event.preventDefault()" (click)="cancelClick.emit($event)">
-            <div class="cancel-button"></div>
-          </div>
-        </div>
+                    template: `
+        <div class="commit-buttons-wrapper" [overlay]="parentForOverlay" [rightAlign]="true" @showHideSaveCancel>
+          <div class="commit-buttons-button save" [class.finished]="commitFinished"
+            (mousedown)="$event.preventDefault()"
+            (click)="commitClick.emit($event)">
+            @if (committing) {
+              <div class="save-button-spinner">
+                <div #animatediv></div>
+                <div #animatediv></div>
+                <div #animatediv></div>
+                <div #animatediv></div>
+              </div>
+            }
+            @if (firstShow || commitFinished) {
+              <svg class="checkmark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52">
+              <path class="checkmark-check" [class.first-show]="firstShow" fill="none" d="M14.1 27.2l7.1 7.2 16.7-16.8"/></svg>
+            }
+          </div>
+          <div class="commit-buttons-button cancel" (mousedown)="$event.preventDefault()" (click)="cancelClick.emit($event)">
+            <div class="cancel-button"></div>
+          </div>
+        </div>
         `,
                     animations: [
                         trigger('showHideSaveCancel', [
@@ -2267,7 +2295,7 @@ class BaseInputComponent {
     get model() {
         return this._model;
     }
-    label;
+    label = '';
     noValidation = false;
     initFocus;
     noClickFocus;
@@ -2517,7 +2545,6 @@ class BaseInputComponent {
     // @implements ConfigurationAdapterComponent
     objectConfigName;
     validationError = '';
-    shouldCommit = true;
     _markedAsUserTouched = false;
     _destroyed = false;
     _hasOnPushCdStrategy = false;
@@ -2543,6 +2570,7 @@ class BaseInputComponent {
     _formReadonlyChangeSub;
     _clearMarkedAsUserTouchedSub;
     _canSaveOrCancel = false;
+    _committing = false;
     _commitButtonsComponentRef;
     _validationComponentRef;
     constructor(changeDetector, overlayService, formUserChangeListener, ngZoneWrapper, elementRef) {
@@ -2614,7 +2642,6 @@ class BaseInputComponent {
         return Promise.resolve(true);
     };
     cancelClick(event) {
-        this.shouldCommit = false;
         this.keepFocus = true;
         if (this._initialModelSet) {
             this.model = this._initialModel;
@@ -2669,7 +2696,7 @@ class BaseInputComponent {
         this.focus.next();
     }
     async doBlur(event, handleCommit = true) {
-        if (this.showSaveCancel && handleCommit && this._modelDirtyForCommit && this.shouldCommit) {
+        if (this.showSaveCancel && handleCommit && this._modelDirtyForCommit) {
             await this._handleCommit(event, false);
         }
         setTimeout(() => {
@@ -2799,23 +2826,37 @@ class BaseInputComponent {
         }
     }
     async _handleCommit(event, doBlur = true) {
-        if (!this.showSaveCancel || (!this._modelDirtyForCommit)) {
+        if (!this.showSaveCancel || !this._modelDirtyForCommit || this._committing) {
             return true;
         }
+        this._committing = true;
         this.keepFocus = true;
-        this.shouldCommit = true;
         if (this._commitButtonsComponentRef) {
             this._commitButtonsComponentRef.instance.commitFinished = false;
             this._commitButtonsComponentRef.instance.committing = true;
         }
         this._modelDirtyForCommit = false;
-        const success = await this.commit(this.model);
-        this.keepFocus = false;
-        await this._commitFinished();
-        if (success && doBlur) {
-            this.doBlur(event, false);
+        try {
+            const success = await this.commit(this.model);
+            if (success) {
+                // keep the committed value as the new baseline, otherwise a later model re-emission
+                // would compare against a stale _initialModel and re-open the commit guard.
+                this._initialModel = this._model;
+                this._modelDirtyForCommit = false;
+            }
+            else {
+                this._modelDirtyForCommit = true;
+            }
+            this.keepFocus = false;
+            await this._commitFinished();
+            if (success && doBlur) {
+                this.doBlur(event, false);
+            }
+            return success;
+        }
+        finally {
+            this._committing = false;
         }
-        return success;
     }
     _commitFinished() {
         return new Promise((resolve) => {
@@ -2848,6 +2889,8 @@ class BaseInputComponent {
             this.input.disabled = disabled;
         }
     }
+    // protected so numeric components can suppress the native maxlength (which, on a text input, would
+    // wrongly count the decimal separator/sign as characters); they enforce precision/scale in keydown.
     _setNativeMaxLength(maxlength) {
         if (this.input && !isNaN(maxlength)) {
             this.input.maxLength = maxlength;
@@ -5802,48 +5845,40 @@ class GridToolbarComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: GridToolbarComponent, deps: [{ token: IconCacheService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: GridToolbarComponent, isStandalone: false, selector: "co-grid-toolbar", inputs: { showEdit: "showEdit", showAdd: "showAdd", showDelete: "showDelete", deleteEnabled: "deleteEnabled" }, outputs: { editClick: "editClick", cancelClick: "cancelClick", saveClick: "saveClick", addClick: "addClick", deleteClick: "deleteClick" }, host: { properties: { "class.co-grid-toolbar": "this.showClass" } }, ngImport: i0, template: `
-    <div class="grid-toolbar-wrapper">
-      @if (showEdit) {
-        <co-icon [iconData]="iconsService.getIcon(icons.PenToSquareSolid)" [title]="'edit'" (click)="editClick.emit($event)"></co-icon>
-      }
-      @if (showEdit) {
-        <co-icon [iconData]="iconsService.getIcon(icons.RotateLeftSolid)" [title]="'cancel'" (click)="cancelClick.emit()"></co-icon>
-      }
-      @if (showEdit) {
-        <co-icon [iconData]="iconsService.getIcon(icons.FloppyDiskSolid)" [title]="'save'" (click)="saveClick.emit()"></co-icon>
-      }
-      @if (showAdd || showEdit) {
-        <co-icon [iconData]="iconsService.getIcon(icons.PlusSolid)" [title]="'add'" (click)="addClick.emit()"></co-icon>
-      }
-      @if (showDelete) {
-        <co-icon [iconData]="iconsService.getIcon(icons.TrashCanSolid)" [title]="'delete'" [class.disabled]="!deleteEnabled" (click)="handleDeleteClick()"></co-icon>
-      }
-    </div>
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: GridToolbarComponent, isStandalone: false, selector: "co-grid-toolbar", inputs: { showEdit: "showEdit", showAdd: "showAdd", showDelete: "showDelete", deleteEnabled: "deleteEnabled" }, outputs: { editClick: "editClick", cancelClick: "cancelClick", saveClick: "saveClick", addClick: "addClick", deleteClick: "deleteClick" }, host: { properties: { "class.co-grid-toolbar": "this.showClass" } }, ngImport: i0, template: `
+    <div class="grid-toolbar-wrapper">
+      @if (showEdit) {
+        <co-icon [iconData]="iconsService.getIcon(icons.PenToSquareSolid)" [title]="'edit'" (click)="editClick.emit($event)"></co-icon>
+        <co-icon [iconData]="iconsService.getIcon(icons.RotateLeftSolid)" [title]="'cancel'" (click)="cancelClick.emit()"></co-icon>
+        <co-icon [iconData]="iconsService.getIcon(icons.FloppyDiskSolid)" [title]="'save'" (click)="saveClick.emit()"></co-icon>
+      }
+      @if (showAdd || showEdit) {
+        <co-icon [iconData]="iconsService.getIcon(icons.PlusSolid)" [title]="'add'" (click)="addClick.emit()"></co-icon>
+      }
+      @if (showDelete) {
+        <co-icon [iconData]="iconsService.getIcon(icons.TrashCanSolid)" [title]="'delete'" [class.disabled]="!deleteEnabled" (click)="handleDeleteClick()"></co-icon>
+      }
+    </div>
     `, isInline: true, dependencies: [{ kind: "component", type: IconComponent, selector: "co-icon", inputs: ["icon", "iconData"] }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: GridToolbarComponent, decorators: [{
             type: Component,
             args: [{
                     selector: "co-grid-toolbar",
-                    template: `
-    <div class="grid-toolbar-wrapper">
-      @if (showEdit) {
-        <co-icon [iconData]="iconsService.getIcon(icons.PenToSquareSolid)" [title]="'edit'" (click)="editClick.emit($event)"></co-icon>
-      }
-      @if (showEdit) {
-        <co-icon [iconData]="iconsService.getIcon(icons.RotateLeftSolid)" [title]="'cancel'" (click)="cancelClick.emit()"></co-icon>
-      }
-      @if (showEdit) {
-        <co-icon [iconData]="iconsService.getIcon(icons.FloppyDiskSolid)" [title]="'save'" (click)="saveClick.emit()"></co-icon>
-      }
-      @if (showAdd || showEdit) {
-        <co-icon [iconData]="iconsService.getIcon(icons.PlusSolid)" [title]="'add'" (click)="addClick.emit()"></co-icon>
-      }
-      @if (showDelete) {
-        <co-icon [iconData]="iconsService.getIcon(icons.TrashCanSolid)" [title]="'delete'" [class.disabled]="!deleteEnabled" (click)="handleDeleteClick()"></co-icon>
-      }
-    </div>
+                    template: `
+    <div class="grid-toolbar-wrapper">
+      @if (showEdit) {
+        <co-icon [iconData]="iconsService.getIcon(icons.PenToSquareSolid)" [title]="'edit'" (click)="editClick.emit($event)"></co-icon>
+        <co-icon [iconData]="iconsService.getIcon(icons.RotateLeftSolid)" [title]="'cancel'" (click)="cancelClick.emit()"></co-icon>
+        <co-icon [iconData]="iconsService.getIcon(icons.FloppyDiskSolid)" [title]="'save'" (click)="saveClick.emit()"></co-icon>
+      }
+      @if (showAdd || showEdit) {
+        <co-icon [iconData]="iconsService.getIcon(icons.PlusSolid)" [title]="'add'" (click)="addClick.emit()"></co-icon>
+      }
+      @if (showDelete) {
+        <co-icon [iconData]="iconsService.getIcon(icons.TrashCanSolid)" [title]="'delete'" [class.disabled]="!deleteEnabled" (click)="handleDeleteClick()"></co-icon>
+      }
+    </div>
     `,
                     encapsulation: ViewEncapsulation.None,
                     standalone: false
@@ -7164,10 +7199,71 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                 args: ["class.co-calendar"]
             }] } });
 
+/**
+ * Resolves the locale-specific decimal separator (e.g. ',' for nl-NL) from the app-wide LOCALE_ID and
+ * converts between a numeric model value and its user-facing display string. Injected app-wide, so no
+ * component has to be given a locale explicitly.
+ *
+ * The model always stays a real number (dot-based / JSON-safe); the separator only affects the display
+ * string shown in the input, never the stored value.
+ */
+class NumberLocaleService {
+    _decimalSeparator;
+    constructor(localeId) {
+        // Intl uses the locale string directly, so this works without registerLocaleData().
+        const parts = new Intl.NumberFormat(localeId).formatToParts(1.1);
+        const decimalPart = parts.find((part) => part.type === 'decimal');
+        this._decimalSeparator = decimalPart ? decimalPart.value : '.';
+    }
+    get decimalSeparator() {
+        return this._decimalSeparator;
+    }
+    // Parses a user-typed display string to a number. Accepts both ',' and '.' as decimal separator so the
+    // field is forgiving. Returns NaN when the text is not a parsable number.
+    parse(text) {
+        if (text === null || text === undefined) {
+            return NaN;
+        }
+        const normalized = ('' + text).trim().replace(',', '.');
+        if (normalized === '') {
+            return NaN;
+        }
+        return Number(normalized);
+    }
+    // Formats a numeric model value to a display string using the locale decimal separator. Returns '' for
+    // null/undefined/NaN. No grouping (thousands) separators are added, as this targets an editable field.
+    format(value) {
+        if (value === null || value === undefined || isNaN(value)) {
+            return '';
+        }
+        return ('' + value).replace('.', this._decimalSeparator);
+    }
+    // Inserts the locale decimal separator at the input's caret and notifies Angular via an 'input' event.
+    // Used to normalize a typed '.' to the locale separator (e.g. numpad '.' -> ',' for nl-NL).
+    insertDecimalSeparator(input) {
+        const start = input.selectionStart ?? input.value.length;
+        const end = input.selectionEnd ?? input.value.length;
+        input.value = input.value.slice(0, start) + this._decimalSeparator + input.value.slice(end);
+        const caret = start + this._decimalSeparator.length;
+        input.setSelectionRange(caret, caret);
+        input.dispatchEvent(new Event('input', { bubbles: true }));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: NumberLocaleService, deps: [{ token: LOCALE_ID }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: NumberLocaleService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: NumberLocaleService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [LOCALE_ID]
+                }] }] });
+
 class InputTextComponent extends BaseInputComponent {
     formComponent;
     changeDetector;
     overlayService;
+    _numberLocale;
     formUserChangeListener;
     ngZoneWrapper;
     elementRef;
@@ -7196,6 +7292,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();
@@ -7240,6 +7339,26 @@ class InputTextComponent extends BaseInputComponent {
     get model() {
         return super.model;
     }
+    // keep the display string in sync when the model changes from outside typing (init / programmatic)
+    modelSet() {
+        if (this.digitsOnly && !this._userTyping) {
+            this._displayValue = this._numberLocale.format(this.model);
+        }
+    }
+    // For digitsOnly the input is a text field showing a locale-formatted string; parse it back to a number
+    // before emitting so the model (and thus what is stored) stays numeric. Other types emit the raw value.
+    handleInputModelChange(value) {
+        if (this.digitsOnly) {
+            this._userTyping = true;
+            this._displayValue = value === null || value === undefined ? '' : '' + value;
+            const parsed = this._numberLocale.parse(value);
+            this.modelChange.emit(isNaN(parsed) ? null : parsed);
+            this._userTyping = false;
+        }
+        else {
+            this.modelChange.emit(value);
+        }
+    }
     get pipedModel() {
         if (this.formatPipe) {
             try {
@@ -7251,21 +7370,37 @@ class InputTextComponent extends BaseInputComponent {
         }
         return this.model;
     }
+    // Locale-formatted string bound to the input when digitsOnly (comma for nl-NL); the model stays numeric.
+    get displayValue() {
+        return this._displayValue;
+    }
     isFocusedOnDate = false;
     weekInputBuffer = '';
     isWeekInputMode = false;
     _isLeftIconMouseDown = false;
     _isRightIconMouseDown = false;
-    constructor(formComponent, changeDetector, overlayService, formUserChangeListener, ngZoneWrapper, elementRef) {
+    _userTyping = false;
+    _displayValue = '';
+    constructor(formComponent, changeDetector, overlayService, _numberLocale, formUserChangeListener, ngZoneWrapper, elementRef) {
         super(changeDetector, overlayService, formUserChangeListener, ngZoneWrapper, elementRef);
         this.formComponent = formComponent;
         this.changeDetector = changeDetector;
         this.overlayService = overlayService;
+        this._numberLocale = _numberLocale;
         this.formUserChangeListener = formUserChangeListener;
         this.ngZoneWrapper = ngZoneWrapper;
         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();
@@ -7331,6 +7466,10 @@ class InputTextComponent extends BaseInputComponent {
         if (this.type === 'date') {
             this.isFocusedOnDate = false;
         }
+        if (this.digitsOnly) {
+            // normalize the display once editing stops (e.g. "12," -> "12")
+            this._displayValue = this._numberLocale.format(this.model);
+        }
         this.isFocused.emit(false);
     }
     handleDoFocus(event) {
@@ -7338,10 +7477,17 @@ class InputTextComponent extends BaseInputComponent {
             this.doFocus(event);
         }
     }
+    // For digitsOnly the field is a text input and precision/scale is enforced in keydown; the native
+    // maxlength would wrongly count the decimal separator as a character. Plain text keeps native maxlength.
+    _setNativeMaxLength(maxlength) {
+        if (this.digitsOnly) {
+            return;
+        }
+        super._setNativeMaxLength(maxlength);
+    }
     clearInput(event) {
         this.setModel(null);
         this.keepFocus = true;
-        this.shouldCommit = false;
         this.clearIconClick.emit(event);
     }
     handleKeyDownInput(event) {
@@ -7377,16 +7523,39 @@ class InputTextComponent extends BaseInputComponent {
             }
         }
         if (this.digitsOnly && !this.isWeekInputMode) {
-            const excludedKeys = this.excludePlusMinus ? ['e', '-', '+'] : ['e'];
-            if (excludedKeys.includes(event.key)) {
-                event.preventDefault();
+            // the field is a text input (so a locale comma is allowed), so actively permit only numeric characters
+            if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
+                const isDigit = /\d/.test(event.key);
+                const isSeparator = event.key === '.' || event.key === ',';
+                const isSign = !this.excludePlusMinus && (event.key === '-' || event.key === '+');
+                if (!isDigit && !isSeparator && !isSign) {
+                    event.preventDefault();
+                    return;
+                }
+                if (isSeparator) {
+                    // only one decimal separator, and only the locale one: normalize a foreign '.'/',' to it
+                    if (/[.,]/.test(this.input?.value ?? '')) {
+                        event.preventDefault();
+                        return;
+                    }
+                    if (event.key !== this._numberLocale.decimalSeparator) {
+                        event.preventDefault();
+                        if (this.input) {
+                            this._numberLocale.insertDecimalSeparator(this.input);
+                        }
+                        return;
+                    }
+                }
             }
         }
-        const value = String(this.model ?? "");
-        if (this.type === "number" &&
-            this.maxLength > 0 &&
-            value.length >= this.maxLength &&
-            /^\d$/.test(key)) {
+        // Native <input> ignores maxlength on numeric inputs, so enforce maxLength (as precision) and
+        // decimals (as scale) ourselves for digit keys. Non-numeric text inputs keep the native maxlength.
+        // Read the live element value (not this.model): a numeric input reports "" for an in-progress value
+        // like "1234567.", so this.model would still hold "1234567" and wrongly block the first decimal digit.
+        const currentText = this.input ? this.input.value : String(this.model ?? "");
+        if ((this.digitsOnly || this.type === "number") &&
+            /^\d$/.test(key) &&
+            NumberUtils.WouldExceedDigitLimits(currentText, this.maxLength, this.decimals)) {
             event.preventDefault();
         }
     }
@@ -7436,7 +7605,7 @@ class InputTextComponent extends BaseInputComponent {
         const day = String(date.getDate()).padStart(2, '0');
         return `${year}-${month}-${day}`;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: InputTextComponent, deps: [{ token: FormComponent, optional: true }, { token: i0.ChangeDetectorRef }, { token: OverlayService }, { token: FormInputUserModelChangeListenerService }, { token: NgZoneWrapperService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: InputTextComponent, deps: [{ token: FormComponent, optional: true }, { token: i0.ChangeDetectorRef }, { token: OverlayService }, { token: NumberLocaleService }, { token: FormInputUserModelChangeListenerService }, { token: NgZoneWrapperService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: InputTextComponent, isStandalone: false, selector: "co-input-text", inputs: { useContent: "useContent", placeholder: "placeholder", align: "align", type: "type", formatPipe: "formatPipe", min: "min", max: "max", pattern: "pattern", digitsOnly: "digitsOnly", excludePlusMinus: "excludePlusMinus", showClearButton: "showClearButton", keyDownWhiteList: "keyDownWhiteList", showPlaceholderOnFocus: "showPlaceholderOnFocus", leftIcon: "leftIcon", rightIcon: "rightIcon", leftIconData: "leftIconData", rightIconData: "rightIconData", selectOnFocus: "selectOnFocus", emptyPlace: "emptyPlace", firstDayOfWeek: "firstDayOfWeek", noStyle: "noStyle", hideArrowButtons: "hideArrowButtons", model: "model" }, outputs: { leftIconClick: "leftIconClick", leftIconMouseDown: "leftIconMouseDown", leftIconMouseUp: "leftIconMouseUp", rightIconClick: "rightIconClick", rightIconMouseDown: "rightIconMouseDown", rightIconMouseUp: "rightIconMouseUp", clearIconClick: "clearIconClick", isFocused: "isFocused" }, host: { listeners: { "document:pointerup": "handleDocumentPointerUp($event)", "document:pointercancel": "handleDocumentPointerUp($event)" }, properties: { "class.no-style": "this.noStyle", "class.hide-arrows": "this.hideArrowButtons", "class.isDate": "this.isDate", "class.co-input-text": "this.showClass", "class.has-left-icon": "this.hasLeftIcon", "class.has-right-icon": "this.hasRightIcon", "class.has-own-label": "this.hasOwnLabel" } }, providers: [
             OverlayService, {
                 provide: SCREEN_CONFIG_ADAPTER_COMPONENT_INTERFACE_NAME,
@@ -7458,7 +7627,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"
@@ -7471,15 +7640,16 @@ class InputTextComponent extends BaseInputComponent {
         <input [class.show]="focused || !formatPipe" #input
           [class.input-input-hidden]="useContent"
           [ngClass]="align"
-          [type]="isWeekInputMode ? 'text' : (isFocusedOnDate || (hasValue && emptyPlace)) ? 'date' : (digitsOnly ? 'number' : (type === 'date' ? 'text' : type))"
-          [placeholder]="type === 'date' && !isFocusedOnDate ? '' : ''"
+          [type]="isWeekInputMode ? 'text' : (isFocusedOnDate || (hasValue && emptyPlace)) ? 'date' : (digitsOnly ? 'text' : (type === 'date' ? 'text' : type))"
+          [attr.inputmode]="digitsOnly ? 'decimal' : null"
+          [placeholder]="type === 'date' && !isFocusedOnDate ? '' : placeholder"
           [pattern]="type === 'date' ? pattern : undefined"
-          [ngModel]="model"
+          [ngModel]="digitsOnly ? displayValue : model"
           [min]="(type === 'number' || type === 'date') && this.min ? this.min : undefined"
           [max]="(type === 'number' || type === 'date') && this.max ? this.max : undefined"
           [readonly]="readonly"
           [required]="required"
-          (ngModelChange)="modelChange.emit($event)"
+          (ngModelChange)="handleInputModelChange($event)"
           (keydown)="handleKeyDownInput($event)"
           (keyup)="keyUp.emit($event)"
           (focusin)="handleInputFocus($event)"
@@ -7534,7 +7704,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"
@@ -7547,15 +7717,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
         <input [class.show]="focused || !formatPipe" #input
           [class.input-input-hidden]="useContent"
           [ngClass]="align"
-          [type]="isWeekInputMode ? 'text' : (isFocusedOnDate || (hasValue && emptyPlace)) ? 'date' : (digitsOnly ? 'number' : (type === 'date' ? 'text' : type))"
-          [placeholder]="type === 'date' && !isFocusedOnDate ? '' : ''"
+          [type]="isWeekInputMode ? 'text' : (isFocusedOnDate || (hasValue && emptyPlace)) ? 'date' : (digitsOnly ? 'text' : (type === 'date' ? 'text' : type))"
+          [attr.inputmode]="digitsOnly ? 'decimal' : null"
+          [placeholder]="type === 'date' && !isFocusedOnDate ? '' : placeholder"
           [pattern]="type === 'date' ? pattern : undefined"
-          [ngModel]="model"
+          [ngModel]="digitsOnly ? displayValue : model"
           [min]="(type === 'number' || type === 'date') && this.min ? this.min : undefined"
           [max]="(type === 'number' || type === 'date') && this.max ? this.max : undefined"
           [readonly]="readonly"
           [required]="required"
-          (ngModelChange)="modelChange.emit($event)"
+          (ngModelChange)="handleInputModelChange($event)"
           (keydown)="handleKeyDownInput($event)"
           (keyup)="keyUp.emit($event)"
           (focusin)="handleInputFocus($event)"
@@ -7606,7 +7777,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                 }]
         }], ctorParameters: () => [{ type: FormComponent, decorators: [{
                     type: Optional
-                }] }, { type: i0.ChangeDetectorRef }, { type: OverlayService }, { type: FormInputUserModelChangeListenerService }, { type: NgZoneWrapperService }, { type: i0.ElementRef }], propDecorators: { useContent: [{
+                }] }, { type: i0.ChangeDetectorRef }, { type: OverlayService }, { type: NumberLocaleService }, { type: FormInputUserModelChangeListenerService }, { type: NgZoneWrapperService }, { type: i0.ElementRef }], propDecorators: { useContent: [{
                 type: Input
             }], placeholder: [{
                 type: Input
@@ -9035,16 +9206,25 @@ class InputNumberPickerComponent extends BaseInputComponent {
     iconCacheService;
     overlayService;
     _ngZone;
+    _numberLocale;
     ngZoneWrapper;
     elementRef;
     // @override
     set model(model) {
         this.setValue(model, true);
         super.model = model;
+        // keep the display string in sync, unless the user is mid-typing (then their raw text is preserved)
+        if (!this._userTyping) {
+            this._displayValue = this._numberLocale.format(model);
+        }
     }
     get model() {
         return super.model;
     }
+    // Locale-formatted string bound to the native text input (comma for nl-NL); the model stays numeric.
+    get displayValue() {
+        return this._displayValue;
+    }
     modelChangeOnEnter = true;
     showPermanentLabel = false;
     leftIconData;
@@ -9065,8 +9245,14 @@ class InputNumberPickerComponent extends BaseInputComponent {
     // @override Default true for us.
     noValidation = true;
     set decimals(decimals) {
+        // Also store on the base so its precision/scale validator picks it up; a setter-only override
+        // would otherwise shadow the inherited getter and make this.decimals read as undefined.
+        super.decimals = decimals;
         this.numberLogic.decimals = decimals;
     }
+    get decimals() {
+        return super.decimals;
+    }
     // @override
     modelChange = new EventEmitter();
     iconClick = new EventEmitter();
@@ -9086,6 +9272,8 @@ class InputNumberPickerComponent extends BaseInputComponent {
     plusSelected = false;
     _numberInputHasFocus = false;
     _changeFromButton = false;
+    _userTyping = false;
+    _displayValue = '';
     _numberLogicValueChangeSub;
     _delayBeforeStartAutoCountMs = 666;
     // the 'speed gears' for auto counting
@@ -9100,12 +9288,13 @@ class InputNumberPickerComponent extends BaseInputComponent {
     _autoCountTimeout;
     _stepIncrementTimeout;
     _startAutocountTimeout;
-    constructor(formComponent, iconCacheService, overlayService, _ngZone, changeDetector, formUserChangeListener, ngZoneWrapper, elementRef) {
+    constructor(formComponent, iconCacheService, overlayService, _ngZone, changeDetector, formUserChangeListener, _numberLocale, ngZoneWrapper, elementRef) {
         super(changeDetector, overlayService, formUserChangeListener, ngZoneWrapper, elementRef);
         this.formComponent = formComponent;
         this.iconCacheService = iconCacheService;
         this.overlayService = overlayService;
         this._ngZone = _ngZone;
+        this._numberLocale = _numberLocale;
         this.ngZoneWrapper = ngZoneWrapper;
         this.elementRef = elementRef;
         this._numberLogicValueChangeSub = this.numberLogic.valueChange.subscribe((value) => {
@@ -9148,6 +9337,9 @@ class InputNumberPickerComponent extends BaseInputComponent {
     }
     handleInputKeyDown(event) {
         // event.preventDefault();
+        if (this.readonly) {
+            return false;
+        }
         if (event.code === 'Enter' || event.code === 'NumpadEnter') {
             this.modelChange.next(this.model);
             return false;
@@ -9155,13 +9347,40 @@ class InputNumberPickerComponent extends BaseInputComponent {
         if (this.myKeyDownWhiteList.find((k) => k === event.keyCode) === undefined) {
             return false;
         }
+        const currentText = this.input ? this.input.value : String(this.model ?? '');
+        if (event.key === '.' || event.key === ',') {
+            // only one decimal separator, and only the locale one: normalize a foreign '.'/',' to it
+            if (/[.,]/.test(currentText)) {
+                return false;
+            }
+            if (event.key !== this._numberLocale.decimalSeparator) {
+                if (this.input) {
+                    this._numberLocale.insertDecimalSeparator(this.input);
+                }
+                return false;
+            }
+        }
+        // native text/number inputs ignore maxlength, so enforce maxLength (precision) and decimals (scale) here
+        if (/^\d$/.test(event.key) && NumberUtils.WouldExceedDigitLimits(currentText, this.maxLength, this.decimals)) {
+            return false;
+        }
+    }
+    // precision/scale is enforced in keydown; the native maxlength on this text input would wrongly count
+    // the decimal separator as a character (e.g. blocking "1234567,89" at maxLength 9), so don't set it.
+    _setNativeMaxLength() {
     }
     handleBlur() {
+        // normalize the display once editing stops (e.g. "12," -> "12", trailing zeros dropped)
+        this._displayValue = this._numberLocale.format(this.model);
         this.modelChange.next(this.model);
     }
-    handleChangeModel(value) {
+    handleChangeModel(text) {
         this._changeFromButton = false;
-        this.numberLogic.setValue(value);
+        // preserve exactly what the user typed while they are typing (avoids caret jumps / eating the separator)
+        this._userTyping = true;
+        this._displayValue = text === null || text === undefined ? '' : '' + text;
+        this.numberLogic.setValue(this._numberLocale.parse(text));
+        this._userTyping = false;
     }
     // Note: recursive through setTimeout().
     doDecrementAuto() {
@@ -9263,7 +9482,7 @@ class InputNumberPickerComponent extends BaseInputComponent {
                 break;
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: InputNumberPickerComponent, deps: [{ token: FormComponent, optional: true }, { token: IconCacheService }, { token: OverlayService }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: FormInputUserModelChangeListenerService }, { token: NgZoneWrapperService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: InputNumberPickerComponent, deps: [{ token: FormComponent, optional: true }, { token: IconCacheService }, { token: OverlayService }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: FormInputUserModelChangeListenerService }, { token: NumberLocaleService }, { token: NgZoneWrapperService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: InputNumberPickerComponent, isStandalone: false, selector: "co-input-number-picker", inputs: { model: "model", modelChangeOnEnter: "modelChangeOnEnter", showPermanentLabel: "showPermanentLabel", leftIconData: "leftIconData", min: "min", step: "step", max: "max", ngModelOptions: "ngModelOptions", minusIcon: "minusIcon", plusIcon: "plusIcon", buttonShowMode: "buttonShowMode", noValidation: "noValidation", decimals: "decimals" }, outputs: { modelChange: "modelChange", iconClick: "iconClick" }, host: { properties: { "class.has-icon": "this.leftIconData", "class.show-buttons-on-focus-only": "this.showButtonsOnFocusOnly", "class.has-label": "this.hasLabel", "class.co-input-number-picker": "this.showClass" } }, providers: [
             OverlayService, {
                 provide: SCREEN_CONFIG_ADAPTER_COMPONENT_INTERFACE_NAME, useExisting: forwardRef(() => InputNumberPickerComponent)
@@ -9289,15 +9508,15 @@ class InputNumberPickerComponent extends BaseInputComponent {
         </div>
         <div class="input-wrapper">
           @if (showPermanentLabel) {
-            <span class='permanent-label' [textContent]="label"></span>
+            <span class='permanent-label' [textContent]="label ?? ''"></span>
           }
-          <input type="number"
+          <input type="text" inputmode="decimal"
             [tabIndex]="readonly ? -1 : 0"
-            [ngModel]="model"
+            [ngModel]="displayValue"
             [readonly]="readonly"
             [disabled]="disabled"
             [required]="required"
-            [placeholder]="label"
+            [placeholder]="label ?? ''"
             (ngModelChange)="handleChangeModel($event)"
             (keydown)="handleInputKeyDown($event)"
             (blur)="handleBlur()"/>
@@ -9311,7 +9530,7 @@ class InputNumberPickerComponent extends BaseInputComponent {
               (mouseup)="stopAutoCounting()" (mouseleave)="stopAutoCounting()"></co-button>
             }
           </div>
-        `, isInline: true, dependencies: [{ kind: "directive", type: i5.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: i5.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ButtonComponent, selector: "co-button", inputs: ["label", "iconData", "iconDataRight", "isToggleButton", "isToggled", "hidden", "disabled"], outputs: ["onClick", "clickedWhileDisabled", "isToggledChange"] }, { kind: "component", type: IconComponent, selector: "co-icon", inputs: ["icon", "iconData"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+        `, isInline: true, dependencies: [{ kind: "directive", type: i5.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: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ButtonComponent, selector: "co-button", inputs: ["label", "iconData", "iconDataRight", "isToggleButton", "isToggled", "hidden", "disabled"], outputs: ["onClick", "clickedWhileDisabled", "isToggledChange"] }, { kind: "component", type: IconComponent, selector: "co-icon", inputs: ["icon", "iconData"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 __decorate([
     InputBoolean()
@@ -9338,15 +9557,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
         </div>
         <div class="input-wrapper">
           @if (showPermanentLabel) {
-            <span class='permanent-label' [textContent]="label"></span>
+            <span class='permanent-label' [textContent]="label ?? ''"></span>
           }
-          <input type="number"
+          <input type="text" inputmode="decimal"
             [tabIndex]="readonly ? -1 : 0"
-            [ngModel]="model"
+            [ngModel]="displayValue"
             [readonly]="readonly"
             [disabled]="disabled"
             [required]="required"
-            [placeholder]="label"
+            [placeholder]="label ?? ''"
             (ngModelChange)="handleChangeModel($event)"
             (keydown)="handleInputKeyDown($event)"
             (blur)="handleBlur()"/>
@@ -9378,7 +9597,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                 }] }, { type: IconCacheService, decorators: [{
                     type: Inject,
                     args: [IconCacheService]
-                }] }, { type: OverlayService }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }, { type: FormInputUserModelChangeListenerService }, { type: NgZoneWrapperService }, { type: i0.ElementRef }], propDecorators: { model: [{
+                }] }, { type: OverlayService }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }, { type: FormInputUserModelChangeListenerService }, { type: NumberLocaleService }, { type: NgZoneWrapperService }, { type: i0.ElementRef }], propDecorators: { model: [{
                 type: Input
             }], modelChangeOnEnter: [{
                 type: Input
@@ -13527,6 +13746,46 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                 }]
         }] });
 
+class LovUtils {
+    static getDisplayValue(model, displayField) {
+        if (!model || !displayField) {
+            return '';
+        }
+        return displayField
+            .split('|')
+            .map(field => model[field.trim()])
+            .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;
@@ -13647,7 +13906,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) {
@@ -13660,7 +13923,7 @@ class ListOfValuesPopupComponent {
             this.selectNextOption();
         }
         if (!this.model && this.searchTerm) {
-            const wishModel = this.viewModelsMain.find(vmm => vmm.model[this.displayField] === this.searchTerm);
+            const wishModel = this.viewModelsMain.find(vmm => LovUtils.getDisplayValue(vmm.model, this.displayField) === this.searchTerm);
             if (wishModel) {
                 this.selectViewModel(wishModel);
             }
@@ -13680,6 +13943,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];
@@ -13733,8 +13999,8 @@ class ListOfValuesPopupComponent {
         }
         if (!this.model)
             return false;
-        const selected = this.model?.[this.displayField];
-        const current = vm.model?.[this.displayField];
+        const selected = LovUtils.getDisplayValue(this.model, this.displayField);
+        const current = LovUtils.getDisplayValue(vm.model, this.displayField);
         return selected != null && current != null && selected === current;
     }
     _prepareViewModelsMain() {
@@ -13755,6 +14021,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);
@@ -13783,102 +14052,126 @@ class ListOfValuesPopupComponent {
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ListOfValuesPopupComponent, deps: [{ token: IconCacheService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: ListOfValuesPopupComponent, isStandalone: false, selector: "co-list-of-values-popup", inputs: { model: "model", multiselect: "multiselect", showToggleAll: "showToggleAll", displayField: "displayField", searchPlaceholder: "searchPlaceholder", customCssClass: "customCssClass", searchDisabled: "searchDisabled", parentForOverlay: "parentForOverlay", optionIcon: "optionIcon", collection: "collection" }, outputs: { modelChange: "modelChange", closePopup: "closePopup", keyDown: "keyDown" }, host: { properties: { "class.co-list-of-values-popup": "this.showClass", "class.lov-anim": "this.animBase", "class.lov-anim--open": "this.isOpen" } }, viewQueries: [{ propertyName: "dropDownList", first: true, predicate: ["dropDownList"], descendants: true, read: ElementRef }, { propertyName: "inputSearch", first: true, predicate: InputSearchComponent, descendants: true }, { propertyName: "lovItems", predicate: ["lovItem"], descendants: true, read: ElementRef }], ngImport: i0, template: `
-      <div class="lov-options" [overlay]="parentForOverlay" [inheritWidth]="true" [ngClass]="customCssClass"
-        id="lov-popup"
-        role="listbox" [tabindex]="-1"
-        (clickOutside)="closePopup.emit($event)">
-        @if (multiselect) {
-          <co-input-search
-            tabindex="-1"
-            [(model)]="searchTerm"
-            [placeholder]="searchPlaceholder"
-            (keydown)="handleInputKeyDown($event)"
-          (modelChange)="filterViewModels()"></co-input-search>
-        }
-        @if (showToggleAll && multiselect) {
-          <div class="row gap">
-            <co-input-checkbox [model]="allSelected" (modelChange)="toggleAll()"></co-input-checkbox>
-            <span [textContent]="'DESELECT_ALL' | coreLocalize" (click)="toggleAll()"></span>
-          </div>
-        }
-        <ul class="dropdown-list" #dropDownList>
-          @for (viewModel of viewModels; track viewModel; let index = $index) {
-            <li
-              #lovItem
-              [class.selected]="viewModel === highLightModel || viewModels.length === 1"
-              [class.active]="isActive(viewModel)"
-              [class.highlighted]="viewModel === highLightModel"
-              [attr.aria-selected]="isActive(viewModel)"
-              (click)="selectViewModel(viewModel, !multiselect)"
-              role="option">
-              @if (!multiselect) {
-                @if (viewModel.model[optionIcon]) {
-                  <co-icon class="input-text-left-icon" [iconData]="iconCacheService.getIcon(viewModel.model[optionIcon])">
-                  </co-icon>
+        <div class="lov-options" [overlay]="parentForOverlay" [inheritWidth]="true" [ngClass]="customCssClass"
+             id="lov-popup"
+             role="listbox" [tabindex]="-1"
+             (clickOutside)="closePopup.emit($event)">
+            @if (multiselect) {
+                <co-input-search
+                        tabindex="-1"
+                        [(model)]="searchTerm"
+                        [placeholder]="searchPlaceholder"
+                        (keydown)="handleInputKeyDown($event)"
+                        (modelChange)="filterViewModels()"></co-input-search>
+            }
+            @if (showToggleAll && multiselect) {
+                <div class="row gap">
+                    <co-input-checkbox [model]="allSelected" (modelChange)="toggleAll()"></co-input-checkbox>
+                    <span [textContent]="'DESELECT_ALL' | coreLocalize" (click)="toggleAll()"></span>
+                </div>
+            }
+            <ul class="dropdown-list" #dropDownList>
+                @for (viewModel of viewModels; track viewModel; let index = $index) {
+                    <li
+                            #lovItem
+                            [class.selected]="viewModel === highLightModel || viewModels.length === 1"
+                            [class.active]="isActive(viewModel)"
+                            [class.highlighted]="viewModel === highLightModel"
+                            [attr.aria-selected]="isActive(viewModel)"
+                            (click)="selectViewModel(viewModel, !multiselect)"
+                            role="option">
+                        @if (!multiselect) {
+                            @if (viewModel.model[optionIcon]) {
+                                <co-icon class="input-text-left-icon" [iconData]="iconCacheService.getIcon(viewModel.model[optionIcon])">
+                                </co-icon>
+                            }
+                            <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>
+                            <ng-container [ngTemplateOutlet]="optionText" [ngTemplateOutletContext]="{parts: viewModel.highlightParts}"></ng-container>
+                        }
+                    </li>
                 }
-                <span class="lov-options-text" [textContent]="viewModel.model[displayField]"></span>
-              }
-              @if (multiselect) {
-                <co-input-checkbox [model]="viewModel.checked"
-                (modelChange)="selectViewModel(viewModel, false)"></co-input-checkbox>
-                <span class="lov-options-text" [textContent]="viewModel.model[displayField]"></span>
-              }
-            </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 });
+            </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>
+    `, 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,
             args: [{
                     selector: 'co-list-of-values-popup',
                     template: `
-      <div class="lov-options" [overlay]="parentForOverlay" [inheritWidth]="true" [ngClass]="customCssClass"
-        id="lov-popup"
-        role="listbox" [tabindex]="-1"
-        (clickOutside)="closePopup.emit($event)">
-        @if (multiselect) {
-          <co-input-search
-            tabindex="-1"
-            [(model)]="searchTerm"
-            [placeholder]="searchPlaceholder"
-            (keydown)="handleInputKeyDown($event)"
-          (modelChange)="filterViewModels()"></co-input-search>
-        }
-        @if (showToggleAll && multiselect) {
-          <div class="row gap">
-            <co-input-checkbox [model]="allSelected" (modelChange)="toggleAll()"></co-input-checkbox>
-            <span [textContent]="'DESELECT_ALL' | coreLocalize" (click)="toggleAll()"></span>
-          </div>
-        }
-        <ul class="dropdown-list" #dropDownList>
-          @for (viewModel of viewModels; track viewModel; let index = $index) {
-            <li
-              #lovItem
-              [class.selected]="viewModel === highLightModel || viewModels.length === 1"
-              [class.active]="isActive(viewModel)"
-              [class.highlighted]="viewModel === highLightModel"
-              [attr.aria-selected]="isActive(viewModel)"
-              (click)="selectViewModel(viewModel, !multiselect)"
-              role="option">
-              @if (!multiselect) {
-                @if (viewModel.model[optionIcon]) {
-                  <co-icon class="input-text-left-icon" [iconData]="iconCacheService.getIcon(viewModel.model[optionIcon])">
-                  </co-icon>
+        <div class="lov-options" [overlay]="parentForOverlay" [inheritWidth]="true" [ngClass]="customCssClass"
+             id="lov-popup"
+             role="listbox" [tabindex]="-1"
+             (clickOutside)="closePopup.emit($event)">
+            @if (multiselect) {
+                <co-input-search
+                        tabindex="-1"
+                        [(model)]="searchTerm"
+                        [placeholder]="searchPlaceholder"
+                        (keydown)="handleInputKeyDown($event)"
+                        (modelChange)="filterViewModels()"></co-input-search>
+            }
+            @if (showToggleAll && multiselect) {
+                <div class="row gap">
+                    <co-input-checkbox [model]="allSelected" (modelChange)="toggleAll()"></co-input-checkbox>
+                    <span [textContent]="'DESELECT_ALL' | coreLocalize" (click)="toggleAll()"></span>
+                </div>
+            }
+            <ul class="dropdown-list" #dropDownList>
+                @for (viewModel of viewModels; track viewModel; let index = $index) {
+                    <li
+                            #lovItem
+                            [class.selected]="viewModel === highLightModel || viewModels.length === 1"
+                            [class.active]="isActive(viewModel)"
+                            [class.highlighted]="viewModel === highLightModel"
+                            [attr.aria-selected]="isActive(viewModel)"
+                            (click)="selectViewModel(viewModel, !multiselect)"
+                            role="option">
+                        @if (!multiselect) {
+                            @if (viewModel.model[optionIcon]) {
+                                <co-icon class="input-text-left-icon" [iconData]="iconCacheService.getIcon(viewModel.model[optionIcon])">
+                                </co-icon>
+                            }
+                            <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>
+                            <ng-container [ngTemplateOutlet]="optionText" [ngTemplateOutletContext]="{parts: viewModel.highlightParts}"></ng-container>
+                        }
+                    </li>
                 }
-                <span class="lov-options-text" [textContent]="viewModel.model[displayField]"></span>
-              }
-              @if (multiselect) {
-                <co-input-checkbox [model]="viewModel.checked"
-                (modelChange)="selectViewModel(viewModel, false)"></co-input-checkbox>
-                <span class="lov-options-text" [textContent]="viewModel.model[displayField]"></span>
-              }
-            </li>
-          }
-        </ul>
-      </div>
-      `,
+            </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
                 }]
@@ -13937,6 +14230,7 @@ class ListOfValuesComponent extends BaseInputComponent {
     ngZoneWrapper;
     elementRef;
     icons = CoreComponentsIcon;
+    lovUtils = LovUtils;
     set model(value) {
         super.model = value;
         this._setSelectedModel();
@@ -13959,7 +14253,7 @@ class ListOfValuesComponent extends BaseInputComponent {
     collectionLoadFn;
     collectionLoadFnProp;
     leftIconData;
-    searchPlaceholder;
+    searchPlaceholder = '';
     searchDisabled = false;
     showChips = true;
     showClass() {
@@ -13974,6 +14268,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);
@@ -13990,6 +14285,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;
@@ -14004,26 +14318,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());
@@ -14032,12 +14353,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) {
@@ -14082,6 +14410,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,
@@ -14111,12 +14444,12 @@ class ListOfValuesComponent extends BaseInputComponent {
     optionChosen(option) {
         if (option) {
             if (this.multiselect) {
-                this.selectedModels = option.map(o => o[this.displayField]);
+                this.selectedModels = option.map(o => LovUtils.getDisplayValue(o, this.displayField));
             }
             else {
-                this.selectedModel = option[this.displayField];
+                this.selectedModel = LovUtils.getDisplayValue(option, this.displayField);
                 if (this.largeCollection) {
-                    this.filterText = option[this.displayField];
+                    this.filterText = LovUtils.getDisplayValue(option, this.displayField);
                 }
             }
         }
@@ -14140,8 +14473,13 @@ 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 => c[this.displayField] === this.selectedModel);
+            const model = this.collection.find(c => LovUtils.getDisplayValue(c, this.displayField) === this.selectedModel);
             if (model) {
                 this.model = model;
             }
@@ -14156,7 +14494,7 @@ class ListOfValuesComponent extends BaseInputComponent {
             if (this.model) {
                 this.selectedModels.length = 0;
                 this.model.forEach(m => {
-                    this.selectedModels.push(m[this.displayField]);
+                    this.selectedModels.push(LovUtils.getDisplayValue(m, this.displayField));
                 });
             }
             else {
@@ -14165,13 +14503,14 @@ class ListOfValuesComponent extends BaseInputComponent {
         }
         else {
             if (this.model) {
-                this.selectedModel = this.model[this.displayField];
+                this.selectedModel = LovUtils.getDisplayValue(this.model, this.displayField);
                 if (this.largeCollection) {
-                    this.filterText = this.model[this.displayField];
+                    this.filterText = LovUtils.getDisplayValue(this.model, this.displayField);
                 }
             }
             else {
                 this.selectedModel = '';
+                this.filterText = '';
             }
         }
     }
@@ -14183,59 +14522,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]="chip[displayField]"></span>
+      <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 (largeCollection) {
-        <co-input-text
-          [model]="filterText"
-          [placeholder]="label"
-          [required]="required"
-          [disabled]="disabled"
-          [readonly]="readonly"
-          (modelChange)="onModelChange($event)">
-        </co-input-text>
-      }
+              </div>
+            }
+          </div>
+        }
+      </co-input-text>
       @if (isLoading) {
         <div class="filter-loader"><span></span></div>
       }
@@ -14247,59 +14574,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]="chip[displayField]"></span>
+      <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 (largeCollection) {
-        <co-input-text
-          [model]="filterText"
-          [placeholder]="label"
-          [required]="required"
-          [disabled]="disabled"
-          [readonly]="readonly"
-          (modelChange)="onModelChange($event)">
-        </co-input-text>
-      }
+              </div>
+            }
+          </div>
+        }
+      </co-input-text>
       @if (isLoading) {
         <div class="filter-loader"><span></span></div>
       }
@@ -16556,9 +16871,7 @@ class FilterItemModule {
             ScrollingModule,
             AppendPipeModule,
             PrependPipeModule,
-            InputTextModule,
             InputRadioButtonModule,
-            InputTextModule,
             CoreComponentsTranslationModule,
             InputDatePickerModule,
             InputDateRangePickerModule], exports: [FilterItemComponent] });
@@ -16570,9 +16883,7 @@ class FilterItemModule {
             ScrollingModule,
             AppendPipeModule,
             PrependPipeModule,
-            InputTextModule,
             InputRadioButtonModule,
-            InputTextModule,
             CoreComponentsTranslationModule,
             InputDatePickerModule,
             InputDateRangePickerModule] });
@@ -16589,9 +16900,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                         ScrollingModule,
                         AppendPipeModule,
                         PrependPipeModule,
-                        InputTextModule,
                         InputRadioButtonModule,
-                        InputTextModule,
                         CoreComponentsTranslationModule,
                         InputDatePickerModule,
                         InputDateRangePickerModule