@colijnit/corecomponents_v12 300.1.0 → 300.1.1

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;
@@ -7243,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 {
@@ -7254,16 +7370,23 @@ 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;
@@ -7343,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) {
@@ -7350,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) {
@@ -7389,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();
         }
     }
@@ -7448,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,
@@ -7483,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))"
+          [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)"
@@ -7559,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))"
+          [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)"
@@ -7618,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
@@ -9054,16 +9213,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;
@@ -9084,8 +9252,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();
@@ -9105,6 +9279,8 @@ class InputNumberPickerComponent extends BaseInputComponent {
     plusSelected = false;
     _numberInputHasFocus = false;
     _changeFromButton = false;
+    _userTyping = false;
+    _displayValue = '';
     _numberLogicValueChangeSub;
     _delayBeforeStartAutoCountMs = 666;
     // the 'speed gears' for auto counting
@@ -9119,12 +9295,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) => {
@@ -9174,13 +9351,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() {
@@ -9282,7 +9486,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)
@@ -9308,15 +9512,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()"/>
@@ -9330,7 +9534,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()
@@ -9357,15 +9561,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()"/>
@@ -9397,7 +9601,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
@@ -14110,7 +14314,7 @@ class ListOfValuesComponent extends BaseInputComponent {
     collectionLoadFn;
     collectionLoadFnProp;
     leftIconData;
-    searchPlaceholder;
+    searchPlaceholder = '';
     searchDisabled = false;
     showChips = true;
     showClass() {