@colijnit/corecomponents_v12 300.1.0 → 300.1.2

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 };
     };
@@ -1107,6 +1133,7 @@ var CoreComponentsIcon;
     CoreComponentsIcon["Linechart"] = "linechart";
     CoreComponentsIcon["LinkedProducts"] = "linked_products";
     CoreComponentsIcon["LinkCircle"] = "link_circle";
+    CoreComponentsIcon["ListRegular"] = "list_regular";
     CoreComponentsIcon["ListView"] = "list_view";
     CoreComponentsIcon["Location"] = "location";
     CoreComponentsIcon["Lock"] = "lock";
@@ -1413,6 +1440,7 @@ const CoreComponentsIconSvg = {
     "linechart": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 50 50\"><path d=\"M11,12.17v25H40v1H10v-26Z\" fill=\"#4c5050\" opacity=\"0.75\"/><polygon points=\"11.76 33.18 11 32.53 15.16 26.48 19.66 24.3 24.26 27.19 28.07 22.25 35.3 19.53 37.01 21.7 38.92 17.28 39.84 17.68 37.26 23.64 34.97 20.72 28.69 23.09 24.5 28.52 19.6 25.44 15.7 27.34 11.76 33.18\" fill=\"#4c5050\"/><polygon points=\"39.84 17.68 37.26 23.64 34.97 20.72 28.69 23.09 24.5 28.52 19.6 25.44 15.7 27.34 11.76 33.18 11 32.53 11 37.17 40 37.17 39.84 17.68\" fill=\"#4c5050\" opacity=\"0.25\"/></svg>",
     "linked_products": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 50 50\"><g opacity=\"0.5\"><path d=\"M20.2,14.71h2.15V26.2l.76-.77V14.71H24.4v9.43l.77-.77V14.71h1.29V22.1l.08-.09,1.29-1.3v-6h1.29v4.71l1.68-1.67a6.28,6.28,0,0,1,.54-.49V14.71h1.29v1.77a7.15,7.15,0,0,1,.77-.29V14.71H36V16a6.71,6.71,0,0,1,1,.21V14.71h1.29v2a6,6,0,0,1,1.31,1l.09.08c.11.11.21.23.31.35v-3a2.57,2.57,0,0,0-2.57-2.57H12.57A2.57,2.57,0,0,0,10,15.14V29.72a2.57,2.57,0,0,0,2.57,2.57h5.95a6.13,6.13,0,0,1,1.68-3.93ZM14.29,30.14H12.15V14.71h2.14Zm2,0H15V14.71h1.29Zm1.28,0V14.71h1.29V30.14Z\" fill=\"#484f60\"/><path d=\"M39.68,26.63,38.29,28v2.11H37v-.83l-2.92,2.92v-.1s-.09.1-.13.16h3.48A2.57,2.57,0,0,0,40,29.72V26.28A3.49,3.49,0,0,1,39.68,26.63Z\" fill=\"#484f60\"/></g><path d=\"M38.62,18.89l-.08-.08a4.73,4.73,0,0,0-6.68,0L27.6,23.07a4.73,4.73,0,0,0,0,6.68l.08.08a3.8,3.8,0,0,0,.48.42l1.56-1.56a2.38,2.38,0,0,1-.51-.39l-.08-.08a2.56,2.56,0,0,1,0-3.62l4.26-4.26a2.56,2.56,0,0,1,3.62,0l.08.08a2.56,2.56,0,0,1,0,3.62L35.16,26a6.53,6.53,0,0,1,.48,2.58l3-3A4.73,4.73,0,0,0,38.62,18.89ZM32.33,25a3.77,3.77,0,0,0-.49-.42l-1.56,1.56a2.1,2.1,0,0,1,.51.39l.08.08a2.56,2.56,0,0,1,0,3.62l-4.26,4.26a2.56,2.56,0,0,1-3.62,0l-.08-.08a2.56,2.56,0,0,1,0-3.62l1.93-1.93a6.6,6.6,0,0,1-.48-2.58l-3,3a4.73,4.73,0,0,0,0,6.68l.08.08a4.73,4.73,0,0,0,6.68,0l4.26-4.26a4.74,4.74,0,0,0,0-6.69Z\" fill=\"#484f60\"/></svg>",
     "link_circle": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 50 50\"><path d=\"M25,45A20,20,0,1,1,45,25,20,20,0,0,1,25,45ZM25,6.29A18.71,18.71,0,1,0,43.71,25,18.73,18.73,0,0,0,25,6.29Z\" fill=\"#484f60\"/><path d=\"M34.48,15.6l-.08-.08a5.21,5.21,0,0,0-7.36,0L22.36,20.2a5.21,5.21,0,0,0,0,7.36l.08.08c.17.17.35.32.53.47l1.72-1.72a2.88,2.88,0,0,1-.56-.43L24,25.87a2.81,2.81,0,0,1,0-4l4.69-4.69a2.81,2.81,0,0,1,4,0l.09.09a2.81,2.81,0,0,1,0,4l-2.12,2.12a7.17,7.17,0,0,1,.52,2.85L34.48,23A5.21,5.21,0,0,0,34.48,15.6Zm-6.92,6.76A5.62,5.62,0,0,0,27,21.9l-1.72,1.71a2.88,2.88,0,0,1,.56.43l.09.09a2.81,2.81,0,0,1,0,4L21.27,32.8a2.81,2.81,0,0,1-4,0l-.09-.09a2.81,2.81,0,0,1,0-4l2.12-2.12a7.17,7.17,0,0,1-.52-2.85L15.52,27a5.21,5.21,0,0,0,0,7.36l.08.08a5.21,5.21,0,0,0,7.36,0l4.68-4.68a5.21,5.21,0,0,0,0-7.36Z\" fill=\"#484f60\"/></svg>",
+    "list_regular": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\"><path d=\"M88 48C101.3 48 112 58.75 112 72V120C112 133.3 101.3 144 88 144H40C26.75 144 16 133.3 16 120V72C16 58.75 26.75 48 40 48H88zM488 72C501.3 72 512 82.75 512 96C512 109.3 501.3 120 488 120H184C170.7 120 160 109.3 160 96C160 82.75 170.7 72 184 72H488zM488 232C501.3 232 512 242.7 512 256C512 269.3 501.3 280 488 280H184C170.7 280 160 269.3 160 256C160 242.7 170.7 232 184 232H488zM488 392C501.3 392 512 402.7 512 416C512 429.3 501.3 440 488 440H184C170.7 440 160 429.3 160 416C160 402.7 170.7 392 184 392H488zM16 232C16 218.7 26.75 208 40 208H88C101.3 208 112 218.7 112 232V280C112 293.3 101.3 304 88 304H40C26.75 304 16 293.3 16 280V232zM88 368C101.3 368 112 378.7 112 392V440C112 453.3 101.3 464 88 464H40C26.75 464 16 453.3 16 440V392C16 378.7 26.75 368 40 368H88z\"/></svg>",
     "list_view": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 51 51\"><rect x=\"26.5\" y=\"13\" width=\"14\" height=\"7\" fill=\"#4d5050\"/><rect x=\"10.5\" y=\"13\" width=\"14\" height=\"7\" fill=\"#4d5050\"/><rect x=\"10.5\" y=\"22\" width=\"14\" height=\"7\" fill=\"#4d5050\"/><rect x=\"26.5\" y=\"22\" width=\"14\" height=\"7\" fill=\"#4d5050\"/><rect x=\"10.5\" y=\"31\" width=\"14\" height=\"7\" fill=\"#4d5050\"/><rect x=\"26.5\" y=\"31\" width=\"14\" height=\"7\" fill=\"#4d5050\"/></svg>",
     "location": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 50 50\"><path d=\"M25,12.67A8.33,8.33,0,0,0,16.67,21c0,4.6,8.33,16.67,8.33,16.67S33.33,25.6,33.33,21A8.33,8.33,0,0,0,25,12.67Zm0,10.41A2.08,2.08,0,1,1,27.08,21,2.08,2.08,0,0,1,25,23.08Z\" fill=\"#484f60\"/></svg>",
     "lock": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 50 50\"><path d=\"M32.65,21.67H17.35c-2.81,0-3.06,2.29-3.06,5.12v8.09c0,2.83.25,5.12,3.06,5.12h15.3c2.81,0,3.06-2.29,3.06-5.12V26.79C35.71,24,35.46,21.67,32.65,21.67ZM20.22,37.49l2.61-6.32a3.82,3.82,0,1,1,4.35,0l2.6,6.32Z\" fill=\"#484f60\"/><path d=\"M29.51,16.64c0-3.6-2-4.07-4.51-4.07h0c-2.49,0-4.51.47-4.51,4.07v3h-2.7v-3C17.79,11.62,21,10,25,10h0c4,0,7.21,1.62,7.21,6.64v3h-2.7Z\" fill=\"#484f60\"/></svg>",
@@ -2031,27 +2059,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 +2093,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 +2297,7 @@ class BaseInputComponent {
     get model() {
         return this._model;
     }
-    label;
+    label = '';
     noValidation = false;
     initFocus;
     noClickFocus;
@@ -2517,7 +2547,6 @@ class BaseInputComponent {
     // @implements ConfigurationAdapterComponent
     objectConfigName;
     validationError = '';
-    shouldCommit = true;
     _markedAsUserTouched = false;
     _destroyed = false;
     _hasOnPushCdStrategy = false;
@@ -2543,6 +2572,7 @@ class BaseInputComponent {
     _formReadonlyChangeSub;
     _clearMarkedAsUserTouchedSub;
     _canSaveOrCancel = false;
+    _committing = false;
     _commitButtonsComponentRef;
     _validationComponentRef;
     constructor(changeDetector, overlayService, formUserChangeListener, ngZoneWrapper, elementRef) {
@@ -2614,7 +2644,6 @@ class BaseInputComponent {
         return Promise.resolve(true);
     };
     cancelClick(event) {
-        this.shouldCommit = false;
         this.keepFocus = true;
         if (this._initialModelSet) {
             this.model = this._initialModel;
@@ -2669,7 +2698,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 +2828,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 +2891,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 +5847,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 +7201,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 +7341,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 +7372,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 +7468,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,14 +7479,21 @@ 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) {
-        const key = event.key.toLowerCase();
+        const key = event.key ? event.key.toLowerCase() : '';
         if (this.type === 'date') {
             if (key === 'w') {
                 event.preventDefault();
@@ -7389,16 +7525,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 (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 (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 +7607,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 +7642,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 +7719,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 +7779,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 +9215,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 +9254,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 +9281,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 +9297,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 +9353,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 +9488,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 +9514,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 +9536,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 +9563,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 +9603,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 +14316,7 @@ class ListOfValuesComponent extends BaseInputComponent {
     collectionLoadFn;
     collectionLoadFnProp;
     leftIconData;
-    searchPlaceholder;
+    searchPlaceholder = '';
     searchDisabled = false;
     showChips = true;
     showClass() {
@@ -19483,8 +19689,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
 class HourSchedulingExpandableComponent {
     cdRef;
     eRef;
+    iconCacheService;
+    icons = CoreComponentsIcon;
     hourLabels = [];
     scheduledObjects = [];
+    selectedHour;
     resizing = false;
     resizeDirection;
     initialY;
@@ -19513,6 +19722,7 @@ class HourSchedulingExpandableComponent {
     idProp; // Input for unique identifier property
     timeChangeEvent = new EventEmitter();
     newObjectPlanEvent = new EventEmitter();
+    taskCreationEvent = new EventEmitter();
     moveBetweenCalendarsEvent = new EventEmitter();
     showClass = true;
     onResize(event) {
@@ -19523,9 +19733,10 @@ class HourSchedulingExpandableComponent {
             this.handleDeselectAll();
         }
     }
-    constructor(cdRef, eRef) {
+    constructor(cdRef, eRef, iconCacheService) {
         this.cdRef = cdRef;
         this.eRef = eRef;
+        this.iconCacheService = iconCacheService;
     }
     ngOnInit() {
         this.generateTimeBlocks();
@@ -19756,22 +19967,44 @@ class HourSchedulingExpandableComponent {
             }
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: HourSchedulingExpandableComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: HourSchedulingExpandableComponent, isStandalone: false, selector: "co-hour-scheduling-expandable", inputs: { schedule: "schedule", startTimeProp: "startTimeProp", endTimeProp: "endTimeProp", objectsProp: "objectsProp", childProp: "childProp", customTemplate: "customTemplate", idProp: "idProp" }, outputs: { timeChangeEvent: "timeChangeEvent", newObjectPlanEvent: "newObjectPlanEvent", moveBetweenCalendarsEvent: "moveBetweenCalendarsEvent" }, host: { listeners: { "window:resize": "onResize($event)", "document:click": "clickOut($event)" }, properties: { "class.co-hour-scheduling-expandable": "this.showClass" } }, ngImport: i0, template: `
+    selectHalfHourBlock(mouseEvent, hour, first = true) {
+        mouseEvent.stopPropagation();
+        if (!first) {
+            hour = this.addHalfHour(hour);
+        }
+        this.selectedHour = hour;
+    }
+    handleHourTaskCreate(mouseEvent, hour, first = true) {
+        mouseEvent.stopPropagation();
+        if (!first) {
+            hour = this.addHalfHour(hour);
+        }
+        this.taskCreationEvent.emit(hour);
+        this.selectedHour = "";
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: HourSchedulingExpandableComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: IconCacheService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: HourSchedulingExpandableComponent, isStandalone: false, selector: "co-hour-scheduling-expandable", inputs: { schedule: "schedule", startTimeProp: "startTimeProp", endTimeProp: "endTimeProp", objectsProp: "objectsProp", childProp: "childProp", customTemplate: "customTemplate", idProp: "idProp" }, outputs: { timeChangeEvent: "timeChangeEvent", newObjectPlanEvent: "newObjectPlanEvent", taskCreationEvent: "taskCreationEvent", moveBetweenCalendarsEvent: "moveBetweenCalendarsEvent" }, host: { listeners: { "window:resize": "onResize($event)", "document:click": "clickOut($event)" }, properties: { "class.co-hour-scheduling-expandable": "this.showClass" } }, ngImport: i0, template: `
     <div class="wrapper">
       @for (hour of hourLabels; track hour) {
         <div class="time-block">
           <div class="hour-label"><span [textContent]="hour"></span></div>
           <div class="object-display">
             <div class="first-half-hour object-half"
+                 [class.selected]="selectedHour === hour"
+                 (click)="selectHalfHourBlock($event, hour)"
               (dragover)="allowDrop($event, hour)"
               (dragleave)="handleDragLeave($event)"
               (drop)="handleDrop($event, hour)">
+                <co-icon class="toggle-icon" [class.visible]="selectedHour === hour"  [icon]="icons.ListRegular" (click)="handleHourTaskCreate($event, hour)"></co-icon>
             </div>
             <div class="second-half-hour object-half"
+                 [class.selected]="selectedHour === this.addHalfHour(hour)"
               (dragover)="allowDrop($event, addHalfHour(hour))"
               (dragleave)="handleDragLeave($event)"
+                 (click)="selectHalfHourBlock($event, hour, false)"
               (drop)="handleDrop($event, addHalfHour(hour))">
+                <co-icon class="toggle-icon" [class.visible]="selectedHour === this.addHalfHour(hour)" [icon]="icons.ListRegular" (click)="handleHourTaskCreate($event, hour, false)"></co-icon>
+                
             </div>
           </div>
         </div>
@@ -19797,7 +20030,7 @@ class HourSchedulingExpandableComponent {
     
     </div>
     
-    `, isInline: true, dependencies: [{ kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    `, isInline: true, dependencies: [{ kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconComponent, selector: "co-icon", inputs: ["icon", "iconData"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: HourSchedulingExpandableComponent, decorators: [{
             type: Component,
@@ -19810,14 +20043,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
           <div class="hour-label"><span [textContent]="hour"></span></div>
           <div class="object-display">
             <div class="first-half-hour object-half"
+                 [class.selected]="selectedHour === hour"
+                 (click)="selectHalfHourBlock($event, hour)"
               (dragover)="allowDrop($event, hour)"
               (dragleave)="handleDragLeave($event)"
               (drop)="handleDrop($event, hour)">
+                <co-icon class="toggle-icon" [class.visible]="selectedHour === hour"  [icon]="icons.ListRegular" (click)="handleHourTaskCreate($event, hour)"></co-icon>
             </div>
             <div class="second-half-hour object-half"
+                 [class.selected]="selectedHour === this.addHalfHour(hour)"
               (dragover)="allowDrop($event, addHalfHour(hour))"
               (dragleave)="handleDragLeave($event)"
+                 (click)="selectHalfHourBlock($event, hour, false)"
               (drop)="handleDrop($event, addHalfHour(hour))">
+                <co-icon class="toggle-icon" [class.visible]="selectedHour === this.addHalfHour(hour)" [icon]="icons.ListRegular" (click)="handleHourTaskCreate($event, hour, false)"></co-icon>
+                
             </div>
           </div>
         </div>
@@ -19848,7 +20088,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                     encapsulation: ViewEncapsulation.None,
                     standalone: false
                 }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }], propDecorators: { schedule: [{
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: IconCacheService }], propDecorators: { schedule: [{
                 type: Input
             }], startTimeProp: [{
                 type: Input
@@ -19866,6 +20106,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                 type: Output
             }], newObjectPlanEvent: [{
                 type: Output
+            }], taskCreationEvent: [{
+                type: Output
             }], moveBetweenCalendarsEvent: [{
                 type: Output
             }], showClass: [{
@@ -20053,10 +20295,12 @@ class HourSchedulingExpandableComponentModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: HourSchedulingExpandableComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
     static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.16", ngImport: i0, type: HourSchedulingExpandableComponentModule, declarations: [HourSchedulingExpandableComponent], imports: [CommonModule,
             HourSchedulingComponentModule,
-            HourSchedulingExpandableTemplateModule], exports: [HourSchedulingExpandableComponent] });
+            HourSchedulingExpandableTemplateModule,
+            IconModule], exports: [HourSchedulingExpandableComponent] });
     static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: HourSchedulingExpandableComponentModule, providers: [DatePipe], imports: [CommonModule,
             HourSchedulingComponentModule,
-            HourSchedulingExpandableTemplateModule] });
+            HourSchedulingExpandableTemplateModule,
+            IconModule] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: HourSchedulingExpandableComponentModule, decorators: [{
             type: NgModule,
@@ -20064,7 +20308,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                     imports: [
                         CommonModule,
                         HourSchedulingComponentModule,
-                        HourSchedulingExpandableTemplateModule
+                        HourSchedulingExpandableTemplateModule,
+                        IconModule
                     ],
                     declarations: [
                         HourSchedulingExpandableComponent,