ecabs-components 1.1.77 → 1.1.79

package/fesm2022/ecabs-components.mjs

@@ -832,6 +832,7 @@ class EcabsDigitsOnlyDirective {
     el;
     digitsOnly = false;
     allowHyphen = false;
+    allowRange = false;
     decimal = false;
     decimalSeparator = '.';
     unit = 0;
@@ -839,6 +840,7 @@ class EcabsDigitsOnlyDirective {
     minus = '-';
     minusCounter = 0;
     regex;
+    rangeRegex;
     decimalCounter = 0;
     navigationKeys = [
         'Backspace',
@@ -872,18 +874,19 @@ class EcabsDigitsOnlyDirective {
                 (this.decimal &&
                     e.key === this.decimalSeparator &&
                     this.decimalCounter <= 1) || // Allow: only one decimal point
-                (this.decimal && e.key === this.minus && this.minusCounter < 1) // Allow: only one minus
+                (e.key === this.minus && this.isMinusAllowed()) // Allow: leading minus and/or range separator
             ) {
                 return;
             }
-            // Ensure that it is a number and stop the keypress
-            if (e.key === ' ' || !this.regex.test(e.key)) {
+            if (e.key === ' ' || e.key === this.minus || !this.regex.test(e.key)) {
                 e.preventDefault();
             }
         }
     }
     onKeyUp() {
         if (this.digitsOnly) {
+            this.minusCounter =
+                this.el.nativeElement.value.split(this.minus).length - 1;
             if (!this.decimal) {
                 const regex = /[.,]/g;
                 this.inputElement.value = this.inputElement.value.replace(regex, '');
@@ -891,9 +894,9 @@ class EcabsDigitsOnlyDirective {
             }
             this.decimalCounter =
                 this.el.nativeElement.value.split(this.decimalSeparator).length - 1;
-            this.minusCounter =
-                this.el.nativeElement.value.split(this.minus).length - 1;
-            if (isNaN(+this.inputElement.value)) {
+            if (isNaN(+this.inputElement.value) &&
+                !this.isPartialNegative(this.inputElement.value) &&
+                !this.isPartialRange(this.inputElement.value)) {
                 this.inputElement.value = this.sanitizeInput(this.inputElement.value);
             }
         }
@@ -909,7 +912,16 @@ class EcabsDigitsOnlyDirective {
         event.preventDefault();
     }
     ngOnInit() {
-        this.regex = new RegExp(this.allowHyphen ? '^[\\d -]+$' : '\\d');
+        this.regex = new RegExp(this.allowHyphen || this.allowRange ? '^[\\d -]+$' : '\\d');
+        if (this.allowRange) {
+            const sep = this.escapeRegExp(this.decimalSeparator);
+            const head = this.decimal ? `\\d+(${sep}\\d*)?` : '\\d+';
+            const tail = this.decimal ? `\\d*(${sep}\\d*)?` : '\\d*';
+            // When combined with `allowHyphen`, a leading minus (negative lower
+            // bound) is allowed, e.g. "-5-20".
+            const lead = this.allowHyphen ? `${this.minus}?` : '';
+            this.rangeRegex = new RegExp(`^${lead}${head}(${this.minus}${tail})?$`);
+        }
     }
     pasteData(pastedContent) {
         const sanitizedContent = isNaN(+pastedContent)
@@ -922,28 +934,126 @@ class EcabsDigitsOnlyDirective {
         }
     }
     sanitizeInput(input) {
-        let result = '';
-        if (this.decimal && this.isValidDecimal(input)) {
-            //eslint-disable-next-line
-            const regex = new RegExp(`^[\d -${this.decimalSeparator}]+$`, 'g');
-            result = input.replace(regex, '');
-        }
-        else {
-            result = input.replace(`/${this.regex}/g`, '');
+        if (this.allowRange) {
+            return this.sanitizeRange(input);
+        }
+        const separator = this.decimalSeparator;
+        // Drop every character that isn't allowed, then keep only a single leading
+        // hyphen and a single decimal separator.
+        const allowed = ['\\d'];
+        if (this.allowHyphen) {
+            allowed.push('\\-');
+        }
+        if (this.decimal) {
+            allowed.push(this.escapeRegExp(separator));
+        }
+        let result = input.replace(new RegExp(`[^${allowed.join('')}]`, 'g'), '');
+        if (this.allowHyphen) {
+            const isNegative = result.startsWith(this.minus);
+            result = (isNegative ? this.minus : '') + result.split(this.minus).join('');
+        }
+        if (this.decimal) {
+            result = this.keepFirstSeparator(result, separator);
+        }
+        return this.applyMaxLength(result);
+    }
+    sanitizeRange(input) {
+        const separator = this.decimalSeparator;
+        const allowed = ['\\d', '\\-'];
+        if (this.decimal) {
+            allowed.push(this.escapeRegExp(separator));
+        }
+        let result = input.replace(new RegExp(`[^${allowed.join('')}]`, 'g'), '');
+        const hasLeadingMinus = this.allowHyphen && result.startsWith(this.minus);
+        let body = hasLeadingMinus ? result.slice(1) : result;
+        body = body.replace(/^-+/, '');
+        const firstHyphen = body.indexOf(this.minus);
+        if (firstHyphen !== -1) {
+            body =
+                body.slice(0, firstHyphen + 1) +
+                    body.slice(firstHyphen + 1).split(this.minus).join('');
+        }
+        if (this.decimal) {
+            body = body
+                .split(this.minus)
+                .map((segment) => this.keepFirstSeparator(segment, separator))
+                .join(this.minus);
+        }
+        result = (hasLeadingMinus ? this.minus : '') + body;
+        return this.applyMaxLength(result);
+    }
+    keepFirstSeparator(value, separator) {
+        const firstSeparator = value.indexOf(separator);
+        if (firstSeparator === -1) {
+            return value;
         }
+        return (value.slice(0, firstSeparator + 1) +
+            value.slice(firstSeparator + 1).split(separator).join(''));
+    }
+    applyMaxLength(result) {
         const maxLength = this.inputElement.maxLength;
         if (maxLength > 0) {
             // the input element has maxLength limit
             const allowedLength = maxLength - this.inputElement.value.length;
-            result = allowedLength > 0 ? result.substring(0, allowedLength) : '';
+            return allowedLength > 0 ? result.substring(0, allowedLength) : '';
         }
         return result;
     }
-    isValidDecimal(inputString) {
-        return inputString.split(this.decimalSeparator).length <= 2;
+    escapeRegExp(value) {
+        return value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+    }
+    isMinusAllowed() {
+        const value = this.inputElement.value;
+        // Combined mode: a single leading minus (negative lower bound) plus one
+        // range separator, e.g. "-5-20".
+        if (this.allowHyphen && this.allowRange) {
+            if (this.isCaretAtStart()) {
+                return !value.startsWith(this.minus);
+            }
+            return this.hasDigitBeforeCaret() && !this.hasRangeSeparator();
+        }
+        // Hyphen only: a single leading minus.
+        if (this.allowHyphen) {
+            return this.minusCounter < 1 && this.isCaretAtStart();
+        }
+        // Range only: a single separator, never leading.
+        if (this.allowRange) {
+            return this.minusCounter < 1 && this.hasDigitBeforeCaret();
+        }
+        return false;
+    }
+    hasRangeSeparator() {
+        const value = this.inputElement.value;
+        const body = value.startsWith(this.minus) ? value.slice(1) : value;
+        return body.includes(this.minus);
+    }
+    isCaretAtStart() {
+        const caret = this.inputElement.selectionStart;
+        return caret === null || caret === 0;
+    }
+    hasDigitBeforeCaret() {
+        const caret = this.inputElement.selectionStart;
+        const value = this.inputElement.value;
+        const before = caret === null ? value : value.slice(0, caret);
+        return /\d/.test(before);
+    }
+    isPartialRange(value) {
+        return !!this.allowRange && !!this.rangeRegex && this.rangeRegex.test(value);
+    }
+    isPartialNegative(value) {
+        if (!this.allowHyphen || !value.startsWith(this.minus)) {
+            return false;
+        }
+        const remainder = value.slice(1);
+        if (remainder.includes(this.minus)) {
+            return false;
+        }
+        return (remainder === '' ||
+            remainder === this.decimalSeparator ||
+            !isNaN(+remainder));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsDigitsOnlyDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: EcabsDigitsOnlyDirective, selector: "[ecabsDigitsOnly]", inputs: { digitsOnly: "digitsOnly", allowHyphen: "allowHyphen", decimal: "decimal", decimalSeparator: "decimalSeparator", unit: "unit" }, host: { listeners: { "keydown": "onKeyDown($event)", "keyup": "onKeyUp($event)", "paste": "onPaste($event)", "wheel": "onWheel($event)" } }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: EcabsDigitsOnlyDirective, selector: "[ecabsDigitsOnly]", inputs: { digitsOnly: "digitsOnly", allowHyphen: "allowHyphen", allowRange: "allowRange", decimal: "decimal", decimalSeparator: "decimalSeparator", unit: "unit" }, host: { listeners: { "keydown": "onKeyDown($event)", "keyup": "onKeyUp($event)", "paste": "onPaste($event)", "wheel": "onWheel($event)" } }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsDigitsOnlyDirective, decorators: [{
             type: Directive,
@@ -954,6 +1064,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], allowHyphen: [{
                 type: Input
+            }], allowRange: [{
+                type: Input
             }], decimal: [{
                 type: Input
             }], decimalSeparator: [{
@@ -1046,6 +1158,7 @@ class EcabsInputComponent extends EcabsElementBaseComponent {
     digitsOnly;
     allowDecimal;
     allowHyphen;
+    allowRange;
     max;
     mini;
     maxi;
@@ -1101,13 +1214,13 @@ class EcabsInputComponent extends EcabsElementBaseComponent {
         this.onblur.emit(e);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsInputComponent, deps: [{ token: i0.Injector }, { token: i0.DestroyRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EcabsInputComponent, selector: "ecabs-input", inputs: { digitsOnly: "digitsOnly", allowDecimal: "allowDecimal", allowHyphen: "allowHyphen", max: "max", mini: "mini", maxi: "maxi", step: "step" }, outputs: { onblur: "onblur" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EcabsInputComponent, selector: "ecabs-input", inputs: { digitsOnly: "digitsOnly", allowDecimal: "allowDecimal", allowHyphen: "allowHyphen", allowRange: "allowRange", max: "max", mini: "mini", maxi: "maxi", step: "step" }, outputs: { onblur: "onblur" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: EcabsInputComponent,
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "matCustomInput", first: true, predicate: ["matCustomInput"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ecabs-element-wrapper [data]=\"getData()\">\r\n  <div class=\"form-field__input--wrapper\">\r\n    <input #matCustomInput\r\n           ecabsDigitsOnly\r\n           [ngClass]=\"disabled ? 'form-field__input--disabled' : null\"\r\n           [digitsOnly]=\"digitsOnly\"\r\n           [decimal]=\"allowDecimal\"\r\n           [allowHyphen]=\"allowHyphen\"\r\n           class=\"form-field__input\"\r\n           [type]=\"type\"\r\n           [id]=\"name\"\r\n           [(ngModel)]=\"value\"\r\n           [placeholder]=\"placeholder\"\r\n           (blur)=\"onTouch()\"\r\n           [mini]=\"mini\"\r\n           [maxi]=\"maxi\"\r\n           [disabled]=\"disabled\"\r\n           [maxlength]=\"maxLength\"\r\n           [max]=\"max\"\r\n           [step]=\"step\"\r\n           (blur)=\"blurChange($event)\"\r\n    />\r\n\r\n    <div class=\"form-field__input--suffix\" *ngIf=\"type !== 'number'\">\r\n      <ng-content select=\"mat-icon\"></ng-content>\r\n      <ng-content select=\".suffix\"></ng-content>\r\n    </div>\r\n  </div>\r\n</ecabs-element-wrapper>\r\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: EcabsElementWrapperComponent, selector: "ecabs-element-wrapper", inputs: ["data", "showCloseIcon", "focusedFlag", "showPassword", "control"], outputs: ["showHidePassword", "clear", "increase", "decrease"] }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: EcabsDigitsOnlyDirective, selector: "[ecabsDigitsOnly]", inputs: ["digitsOnly", "allowHyphen", "decimal", "decimalSeparator", "unit"] }, { kind: "directive", type: EcabsMinDirective, selector: "[mini][formControlName],[mini][formControl],[mini][ngModel]", inputs: ["mini"] }, { kind: "directive", type: EcabsMaxDirective, selector: "[maxi][formControlName],[maxi][formControl],[maxi][ngModel]", inputs: ["maxi"] }] });
+        ], viewQueries: [{ propertyName: "matCustomInput", first: true, predicate: ["matCustomInput"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ecabs-element-wrapper [data]=\"getData()\">\r\n  <div class=\"form-field__input--wrapper\">\r\n    <input #matCustomInput\r\n           ecabsDigitsOnly\r\n           [ngClass]=\"disabled ? 'form-field__input--disabled' : null\"\r\n           [digitsOnly]=\"digitsOnly\"\r\n           [decimal]=\"allowDecimal\"\r\n           [allowHyphen]=\"allowHyphen\"\r\n           [allowRange]=\"allowRange\"\r\n           class=\"form-field__input\"\r\n           [type]=\"type\"\r\n           [id]=\"name\"\r\n           [(ngModel)]=\"value\"\r\n           [placeholder]=\"placeholder\"\r\n           (blur)=\"onTouch()\"\r\n           [mini]=\"mini\"\r\n           [maxi]=\"maxi\"\r\n           [disabled]=\"disabled\"\r\n           [maxlength]=\"maxLength\"\r\n           [max]=\"max\"\r\n           [step]=\"step\"\r\n           (blur)=\"blurChange($event)\"\r\n    />\r\n\r\n    <div class=\"form-field__input--suffix\" *ngIf=\"type !== 'number'\">\r\n      <ng-content select=\"mat-icon\"></ng-content>\r\n      <ng-content select=\".suffix\"></ng-content>\r\n    </div>\r\n  </div>\r\n</ecabs-element-wrapper>\r\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: EcabsElementWrapperComponent, selector: "ecabs-element-wrapper", inputs: ["data", "showCloseIcon", "focusedFlag", "showPassword", "control"], outputs: ["showHidePassword", "clear", "increase", "decrease"] }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: EcabsDigitsOnlyDirective, selector: "[ecabsDigitsOnly]", inputs: ["digitsOnly", "allowHyphen", "allowRange", "decimal", "decimalSeparator", "unit"] }, { kind: "directive", type: EcabsMinDirective, selector: "[mini][formControlName],[mini][formControl],[mini][ngModel]", inputs: ["mini"] }, { kind: "directive", type: EcabsMaxDirective, selector: "[maxi][formControlName],[maxi][formControl],[maxi][ngModel]", inputs: ["maxi"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsInputComponent, decorators: [{
             type: Component,
@@ -1117,7 +1230,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                             useExisting: EcabsInputComponent,
                             multi: true,
                         },
-                    ], template: "<ecabs-element-wrapper [data]=\"getData()\">\r\n  <div class=\"form-field__input--wrapper\">\r\n    <input #matCustomInput\r\n           ecabsDigitsOnly\r\n           [ngClass]=\"disabled ? 'form-field__input--disabled' : null\"\r\n           [digitsOnly]=\"digitsOnly\"\r\n           [decimal]=\"allowDecimal\"\r\n           [allowHyphen]=\"allowHyphen\"\r\n           class=\"form-field__input\"\r\n           [type]=\"type\"\r\n           [id]=\"name\"\r\n           [(ngModel)]=\"value\"\r\n           [placeholder]=\"placeholder\"\r\n           (blur)=\"onTouch()\"\r\n           [mini]=\"mini\"\r\n           [maxi]=\"maxi\"\r\n           [disabled]=\"disabled\"\r\n           [maxlength]=\"maxLength\"\r\n           [max]=\"max\"\r\n           [step]=\"step\"\r\n           (blur)=\"blurChange($event)\"\r\n    />\r\n\r\n    <div class=\"form-field__input--suffix\" *ngIf=\"type !== 'number'\">\r\n      <ng-content select=\"mat-icon\"></ng-content>\r\n      <ng-content select=\".suffix\"></ng-content>\r\n    </div>\r\n  </div>\r\n</ecabs-element-wrapper>\r\n" }]
+                    ], template: "<ecabs-element-wrapper [data]=\"getData()\">\r\n  <div class=\"form-field__input--wrapper\">\r\n    <input #matCustomInput\r\n           ecabsDigitsOnly\r\n           [ngClass]=\"disabled ? 'form-field__input--disabled' : null\"\r\n           [digitsOnly]=\"digitsOnly\"\r\n           [decimal]=\"allowDecimal\"\r\n           [allowHyphen]=\"allowHyphen\"\r\n           [allowRange]=\"allowRange\"\r\n           class=\"form-field__input\"\r\n           [type]=\"type\"\r\n           [id]=\"name\"\r\n           [(ngModel)]=\"value\"\r\n           [placeholder]=\"placeholder\"\r\n           (blur)=\"onTouch()\"\r\n           [mini]=\"mini\"\r\n           [maxi]=\"maxi\"\r\n           [disabled]=\"disabled\"\r\n           [maxlength]=\"maxLength\"\r\n           [max]=\"max\"\r\n           [step]=\"step\"\r\n           (blur)=\"blurChange($event)\"\r\n    />\r\n\r\n    <div class=\"form-field__input--suffix\" *ngIf=\"type !== 'number'\">\r\n      <ng-content select=\"mat-icon\"></ng-content>\r\n      <ng-content select=\".suffix\"></ng-content>\r\n    </div>\r\n  </div>\r\n</ecabs-element-wrapper>\r\n" }]
         }], ctorParameters: function () { return [{ type: i0.Injector }, { type: i0.DestroyRef }]; }, propDecorators: { matCustomInput: [{
                 type: ViewChild,
                 args: ['matCustomInput', { static: false }]
@@ -1127,6 +1240,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], allowHyphen: [{
                 type: Input
+            }], allowRange: [{
+                type: Input
             }], max: [{
                 type: Input
             }], mini: [{
@@ -1431,7 +1546,7 @@ class EcabsInputRangeComponent extends EcabsElementBaseComponent {
                 useExisting: EcabsInputRangeComponent,
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "toInput", first: true, predicate: ["toInput"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ecabs-element-wrapper [data]=\"getData()\">\n  <div class=\"rounded-xl flex flex-col gap-4\">\n    <div\n      class=\"form-field__range--wrapper\"\n      [class.form-field--invalid]=\"hasAnyError\"\n    >\n      <input\n        #fromInput\n        ecabsDigitsOnly\n        [digitsOnly]=\"digitsOnly\"\n        [decimal]=\"allowDecimal\"\n        [allowHyphen]=\"allowHyphen\"\n        class=\"form-field__input text-center border-0 outline-none bg-transparent\"\n        type=\"number\"\n        [id]=\"name + '-from'\"\n        [mini]=\"min\"\n        [maxi]=\"max\"\n        [step]=\"step\"\n        [disabled]=\"disabled\"\n        [placeholder]=\"fromPlaceholder\"\n        [ngModel]=\"value.from\"\n        (ngModelChange)=\"updateValue('from', $event)\"\n        (focus)=\"setFocus(true)\"\n        (blur)=\"setFocus(false)\"\n        (keydown.enter)=\"focusToInput()\"\n      />\n      <span class=\"text-gray-500 text-base mx-4\">{{separatorText}}</span>\n      <input\n        #toInput\n        ecabsDigitsOnly\n        [digitsOnly]=\"digitsOnly\"\n        [decimal]=\"allowDecimal\"\n        [allowHyphen]=\"allowHyphen\"\n        class=\"form-field__input text-center border-0 outline-none bg-transparent\"\n        type=\"number\"\n        [id]=\"name + '-to'\"\n        [mini]=\"value.from !== null ? value.from : min\"\n        [maxi]=\"max\"\n        [step]=\"step\"\n        [disabled]=\"disabled\"\n        [placeholder]=\"toPlaceholder\"\n        [ngModel]=\"value.to\"\n        (ngModelChange)=\"updateValue('to', $event)\"\n        (focus)=\"setFocus(true)\"\n        (blur)=\"setFocus(false)\"\n      />\n    </div>\n  </div>\n</ecabs-element-wrapper>", styles: [""], dependencies: [{ kind: "directive", type: i3.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: i3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: EcabsElementWrapperComponent, selector: "ecabs-element-wrapper", inputs: ["data", "showCloseIcon", "focusedFlag", "showPassword", "control"], outputs: ["showHidePassword", "clear", "increase", "decrease"] }, { kind: "directive", type: EcabsDigitsOnlyDirective, selector: "[ecabsDigitsOnly]", inputs: ["digitsOnly", "allowHyphen", "decimal", "decimalSeparator", "unit"] }, { kind: "directive", type: EcabsMinDirective, selector: "[mini][formControlName],[mini][formControl],[mini][ngModel]", inputs: ["mini"] }, { kind: "directive", type: EcabsMaxDirective, selector: "[maxi][formControlName],[maxi][formControl],[maxi][ngModel]", inputs: ["maxi"] }] });
+        ], viewQueries: [{ propertyName: "toInput", first: true, predicate: ["toInput"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ecabs-element-wrapper [data]=\"getData()\">\n  <div class=\"rounded-xl flex flex-col gap-4\">\n    <div\n      class=\"form-field__range--wrapper\"\n      [class.form-field--invalid]=\"hasAnyError\"\n    >\n      <input\n        #fromInput\n        ecabsDigitsOnly\n        [digitsOnly]=\"digitsOnly\"\n        [decimal]=\"allowDecimal\"\n        [allowHyphen]=\"allowHyphen\"\n        class=\"form-field__input text-center border-0 outline-none bg-transparent\"\n        type=\"number\"\n        [id]=\"name + '-from'\"\n        [mini]=\"min\"\n        [maxi]=\"max\"\n        [step]=\"step\"\n        [disabled]=\"disabled\"\n        [placeholder]=\"fromPlaceholder\"\n        [ngModel]=\"value.from\"\n        (ngModelChange)=\"updateValue('from', $event)\"\n        (focus)=\"setFocus(true)\"\n        (blur)=\"setFocus(false)\"\n        (keydown.enter)=\"focusToInput()\"\n      />\n      <span class=\"text-gray-500 text-base mx-4\">{{separatorText}}</span>\n      <input\n        #toInput\n        ecabsDigitsOnly\n        [digitsOnly]=\"digitsOnly\"\n        [decimal]=\"allowDecimal\"\n        [allowHyphen]=\"allowHyphen\"\n        class=\"form-field__input text-center border-0 outline-none bg-transparent\"\n        type=\"number\"\n        [id]=\"name + '-to'\"\n        [mini]=\"value.from !== null ? value.from : min\"\n        [maxi]=\"max\"\n        [step]=\"step\"\n        [disabled]=\"disabled\"\n        [placeholder]=\"toPlaceholder\"\n        [ngModel]=\"value.to\"\n        (ngModelChange)=\"updateValue('to', $event)\"\n        (focus)=\"setFocus(true)\"\n        (blur)=\"setFocus(false)\"\n      />\n    </div>\n  </div>\n</ecabs-element-wrapper>", styles: [""], dependencies: [{ kind: "directive", type: i3.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: i3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: EcabsElementWrapperComponent, selector: "ecabs-element-wrapper", inputs: ["data", "showCloseIcon", "focusedFlag", "showPassword", "control"], outputs: ["showHidePassword", "clear", "increase", "decrease"] }, { kind: "directive", type: EcabsDigitsOnlyDirective, selector: "[ecabsDigitsOnly]", inputs: ["digitsOnly", "allowHyphen", "allowRange", "decimal", "decimalSeparator", "unit"] }, { kind: "directive", type: EcabsMinDirective, selector: "[mini][formControlName],[mini][formControl],[mini][ngModel]", inputs: ["mini"] }, { kind: "directive", type: EcabsMaxDirective, selector: "[maxi][formControlName],[maxi][formControl],[maxi][ngModel]", inputs: ["maxi"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsInputRangeComponent, decorators: [{
             type: Component,
@@ -3316,7 +3431,7 @@ class EcabsDateTimePickerComponent extends EcabsElementBaseComponent {
             },
             DecimalPipe,
             UnsubscribeService,
-        ], viewQueries: [{ propertyName: "matCustomInput", first: true, predicate: ["matCustomInput"], descendants: true }, { propertyName: "matCustomPicker", first: true, predicate: ["picker"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ecabs-element-wrapper [data]=\"getData()\">\n  <div class=\"form-field__input--wrapper w-full\">\n    <input\n      class=\"fake-input\"\n      [id]=\"_date\"\n      [(ngModel)]=\"_date\"\n      [placeholder]=\"placeholder\"\n      [disabled]=\"disabled\"\n      [matDatepicker]=\"picker\"\n      [min]=\"minDate\"\n      [max]=\"maxDate\"\n      (blur)=\"onTouch()\"\n    />\n    <mat-datepicker #picker [calendarHeaderComponent]=\"header\" [touchUi]=\"touchUi\" class=\"datepicker-ui\">\n      <mat-datepicker-actions>\n        <div class=\"actions\">\n          <div class=\"time--inputs\">\n            <input\n              class=\"form-field__input time\"\n              ecabsDigitsOnly\n              ecabsNumberBorder\n              [digitsOnly]=\"true\"\n              [id]=\"hours\"\n              [value]=\"_hours\"\n              [maxValue]=\"maxValueHours\"\n              [(ngModel)]=\"hours\"\n            />\n            <span class=\"font-bold\">:</span>\n            <input\n              class=\"form-field__input time\"\n              [id]=\"minutes\"\n              [(ngModel)]=\"minutes\"\n              ecabsDigitsOnly\n              ecabsNumberBorder\n              [digitsOnly]=\"true\"\n              [maxValue]=\"maxValueMinutesSeconds\"\n            />\n\n            <ng-container *ngIf=\"!hideSeconds\">\n              <span class=\"font-bold\">:</span>\n              <input\n                class=\"form-field__input time\"\n                [id]=\"seconds\"\n                [(ngModel)]=\"seconds\"\n                ecabsDigitsOnly\n                ecabsNumberBorder\n                [digitsOnly]=\"true\"\n                [maxValue]=\"maxValueMinutesSeconds\"\n              />\n            </ng-container>\n          </div>\n\n          <ecabs-date-picker-actions [applyLabel]=\"applyLabel ?? translationConfig?.applyLabel\"\n                                     [cancelLabel]=\"cancelLabel ?? translationConfig?.cancelLabel\"\n                                     (apply)=\"onApply()\">\n          </ecabs-date-picker-actions>\n        </div>\n      </mat-datepicker-actions>\n    </mat-datepicker>\n    <input #matCustomInput\n           class=\"form-field__input w-full date-input\"\n           [id]=\"name\"\n           [(ngModel)]=\"pickerValue\"\n           placeholder=\"dd/MM/yyyy, HH:mm\"\n           [disabled]=\"disabled\"\n           ecabsMaskDate\n           [isDateTimeMask]=\"true\"\n           [considerSeconds]=\"!hideSeconds\"\n           (blur)=\"onTouch()\"\n    />\n\n    <mat-datepicker-toggle matSuffix [for]=\"picker\">\n      <mat-icon matDatepickerToggleIcon\n                class=\"text-gray-500\">\n        calendar_today\n      </mat-icon>\n    </mat-datepicker-toggle>\n  </div>\n</ecabs-element-wrapper>\n", styles: [".time--inputs:before,.time--inputs:after{position:absolute;content:\"\"}.time{width:3.375rem}.fake-input{visibility:hidden;width:0;padding:0;margin:0}.time--inputs{position:relative;display:flex;gap:.5rem;justify-content:center;align-items:center;margin-top:2.4rem;margin-bottom:2.4rem}.time--inputs:before,.time--inputs:after{height:1px;right:0;left:0;background-color:var(--color-gray-300)}.time--inputs:before{top:-1.6rem}.time--inputs:after{bottom:-1.6rem}.font-bold{font-weight:700}.actions{display:flex;flex-direction:column;width:100%!important;row-gap:1rem}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: EcabsElementWrapperComponent, selector: "ecabs-element-wrapper", inputs: ["data", "showCloseIcon", "focusedFlag", "showPassword", "control"], outputs: ["showHidePassword", "clear", "increase", "decrease"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i6.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i6.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i6.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "directive", type: i6.MatDatepickerToggleIcon, selector: "[matDatepickerToggleIcon]" }, { kind: "component", type: i6.MatDatepickerActions, selector: "mat-datepicker-actions, mat-date-range-picker-actions" }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: EcabsDigitsOnlyDirective, selector: "[ecabsDigitsOnly]", inputs: ["digitsOnly", "allowHyphen", "decimal", "decimalSeparator", "unit"] }, { kind: "directive", type: EcabsNumberBorderDirective, selector: "[ecabsNumberBorder]", inputs: ["maxValue", "minValue"] }, { kind: "directive", type: EcabsMaskDateDirective, selector: "[ecabsMaskDate]", inputs: ["isDateTimeMask", "considerSeconds"] }, { kind: "component", type: EcabsDatePickerActionsComponent, selector: "ecabs-date-picker-actions", inputs: ["cancelLabel", "applyLabel", "isDateRange", "disabledApplyButton"], outputs: ["apply"] }, { kind: "directive", type: i7.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }] });
+        ], viewQueries: [{ propertyName: "matCustomInput", first: true, predicate: ["matCustomInput"], descendants: true }, { propertyName: "matCustomPicker", first: true, predicate: ["picker"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ecabs-element-wrapper [data]=\"getData()\">\n  <div class=\"form-field__input--wrapper w-full\">\n    <input\n      class=\"fake-input\"\n      [id]=\"_date\"\n      [(ngModel)]=\"_date\"\n      [placeholder]=\"placeholder\"\n      [disabled]=\"disabled\"\n      [matDatepicker]=\"picker\"\n      [min]=\"minDate\"\n      [max]=\"maxDate\"\n      (blur)=\"onTouch()\"\n    />\n    <mat-datepicker #picker [calendarHeaderComponent]=\"header\" [touchUi]=\"touchUi\" class=\"datepicker-ui\">\n      <mat-datepicker-actions>\n        <div class=\"actions\">\n          <div class=\"time--inputs\">\n            <input\n              class=\"form-field__input time\"\n              ecabsDigitsOnly\n              ecabsNumberBorder\n              [digitsOnly]=\"true\"\n              [id]=\"hours\"\n              [value]=\"_hours\"\n              [maxValue]=\"maxValueHours\"\n              [(ngModel)]=\"hours\"\n            />\n            <span class=\"font-bold\">:</span>\n            <input\n              class=\"form-field__input time\"\n              [id]=\"minutes\"\n              [(ngModel)]=\"minutes\"\n              ecabsDigitsOnly\n              ecabsNumberBorder\n              [digitsOnly]=\"true\"\n              [maxValue]=\"maxValueMinutesSeconds\"\n            />\n\n            <ng-container *ngIf=\"!hideSeconds\">\n              <span class=\"font-bold\">:</span>\n              <input\n                class=\"form-field__input time\"\n                [id]=\"seconds\"\n                [(ngModel)]=\"seconds\"\n                ecabsDigitsOnly\n                ecabsNumberBorder\n                [digitsOnly]=\"true\"\n                [maxValue]=\"maxValueMinutesSeconds\"\n              />\n            </ng-container>\n          </div>\n\n          <ecabs-date-picker-actions [applyLabel]=\"applyLabel ?? translationConfig?.applyLabel\"\n                                     [cancelLabel]=\"cancelLabel ?? translationConfig?.cancelLabel\"\n                                     (apply)=\"onApply()\">\n          </ecabs-date-picker-actions>\n        </div>\n      </mat-datepicker-actions>\n    </mat-datepicker>\n    <input #matCustomInput\n           class=\"form-field__input w-full date-input\"\n           [id]=\"name\"\n           [(ngModel)]=\"pickerValue\"\n           placeholder=\"dd/MM/yyyy, HH:mm\"\n           [disabled]=\"disabled\"\n           ecabsMaskDate\n           [isDateTimeMask]=\"true\"\n           [considerSeconds]=\"!hideSeconds\"\n           (blur)=\"onTouch()\"\n    />\n\n    <mat-datepicker-toggle matSuffix [for]=\"picker\">\n      <mat-icon matDatepickerToggleIcon\n                class=\"text-gray-500\">\n        calendar_today\n      </mat-icon>\n    </mat-datepicker-toggle>\n  </div>\n</ecabs-element-wrapper>\n", styles: [".time--inputs:before,.time--inputs:after{position:absolute;content:\"\"}.time{width:3.375rem}.fake-input{visibility:hidden;width:0;padding:0;margin:0}.time--inputs{position:relative;display:flex;gap:.5rem;justify-content:center;align-items:center;margin-top:2.4rem;margin-bottom:2.4rem}.time--inputs:before,.time--inputs:after{height:1px;right:0;left:0;background-color:var(--color-gray-300)}.time--inputs:before{top:-1.6rem}.time--inputs:after{bottom:-1.6rem}.font-bold{font-weight:700}.actions{display:flex;flex-direction:column;width:100%!important;row-gap:1rem}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: EcabsElementWrapperComponent, selector: "ecabs-element-wrapper", inputs: ["data", "showCloseIcon", "focusedFlag", "showPassword", "control"], outputs: ["showHidePassword", "clear", "increase", "decrease"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i6.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i6.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i6.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "directive", type: i6.MatDatepickerToggleIcon, selector: "[matDatepickerToggleIcon]" }, { kind: "component", type: i6.MatDatepickerActions, selector: "mat-datepicker-actions, mat-date-range-picker-actions" }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: EcabsDigitsOnlyDirective, selector: "[ecabsDigitsOnly]", inputs: ["digitsOnly", "allowHyphen", "allowRange", "decimal", "decimalSeparator", "unit"] }, { kind: "directive", type: EcabsNumberBorderDirective, selector: "[ecabsNumberBorder]", inputs: ["maxValue", "minValue"] }, { kind: "directive", type: EcabsMaskDateDirective, selector: "[ecabsMaskDate]", inputs: ["isDateTimeMask", "considerSeconds"] }, { kind: "component", type: EcabsDatePickerActionsComponent, selector: "ecabs-date-picker-actions", inputs: ["cancelLabel", "applyLabel", "isDateRange", "disabledApplyButton"], outputs: ["apply"] }, { kind: "directive", type: i7.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsDateTimePickerComponent, decorators: [{
             type: Component,
@@ -4055,7 +4170,7 @@ class EcabsDateTimeRangePickerComponent extends EcabsElementBaseComponent {
             },
             DecimalPipe,
             UnsubscribeService,
-        ], usesInheritance: true, ngImport: i0, template: "<ecabs-element-wrapper [data]=\"getData()\">\n  <div class=\"form-field__input--wrapper w-full\">\n    <input\n      class=\"fake-input\"\n      [id]=\"_date\"\n      [(ngModel)]=\"_date\"\n      [placeholder]=\"placeholder\"\n      [disabled]=\"disabled || controlDate?.disabled\"\n      [matDatepicker]=\"picker\"\n      (blur)=\"onTouch()\"\n    />\n    <mat-datepicker\n      (opened)=\"opened()\"\n      #picker\n      [calendarHeaderComponent]=\"header\"\n      [touchUi]=\"touchUi\"\n    >\n      <mat-datepicker-actions>\n        <div class=\"flex flex-col w-full gap-y-4\">\n          <div class=\"flex gap-2 justify-center items-center\">\n            <div class=\"flex flex-col justify-center\">\n              <div class=\"text-center\">{{ from ?? translationConfig?.from }}</div>\n              <div class=\"flex gap-2 justify-center items-center\">\n                <input\n                  class=\"block form-field__input time\"\n                  ecabsDigitsOnly\n                  ecabsNumberBorder\n                  [digitsOnly]=\"true\"\n                  [id]=\"hoursFrom\"\n                  [maxValue]=\"maxValueHours\"\n                  [(ngModel)]=\"hoursFrom\"\n                />\n\n                <span class=\"font-bold\">:</span>\n                <input\n                  class=\"form-field__input time\"\n                  [id]=\"minutesFrom\"\n                  [(ngModel)]=\"minutesFrom\"\n                  ecabsDigitsOnly\n                  ecabsNumberBorder\n                  [digitsOnly]=\"true\"\n                  [maxValue]=\"maxValueMinutesSeconds\"\n                />\n              </div>\n            </div>\n          </div>\n          <div class=\"time--inputs\"></div>\n          <div class=\"flex gap-2 justify-center items-center mb-5\">\n            <div class=\"flex flex-col justify-center\">\n              <div class=\"text-center\">{{ to ?? translationConfig?.to }}</div>\n              <div class=\"flex gap-2 justify-center items-center\">\n                <input\n                  class=\"form-field__input time\"\n                  ecabsDigitsOnly\n                  ecabsNumberBorder\n                  [digitsOnly]=\"true\"\n                  [id]=\"hoursTo\"\n                  [maxValue]=\"maxValueHours\"\n                  [(ngModel)]=\"hoursTo\"\n                />\n                <span class=\"font-bold\">:</span>\n                <input\n                  class=\"form-field__input time\"\n                  [id]=\"minutesTo\"\n                  [(ngModel)]=\"minutesTo\"\n                  ecabsDigitsOnly\n                  ecabsNumberBorder\n                  [digitsOnly]=\"true\"\n                  [maxValue]=\"maxValueMinutesSeconds\"\n                />\n              </div>\n            </div>\n          </div>\n          <ecabs-date-picker-actions [applyLabel]=\"applyLabel ?? translationConfig?.applyLabel\"\n                                     [cancelLabel]=\"cancelLabel ?? translationConfig?.cancelLabel\"\n                                     (apply)=\"onApply()\">\n          </ecabs-date-picker-actions>\n        </div>\n      </mat-datepicker-actions>\n    </mat-datepicker>\n    <input\n      class=\"form-field__input w-full date-input\"\n      [id]=\"name\"\n      [(ngModel)]=\"pickerValue\"\n      placeholder=\"00:00 - 00:00\"\n      [disabled]=\"disabled || controlDate?.disabled\"\n      ecabsTime\n      [all]=\"allLabel\"\n      [timeRange]=\"true\"\n      (blur)=\"onTouch()\"\n      (blur)=\"blurChange($event)\"\n      (keyup)=\"blurChange($event)\"\n      (keydown)=\"keydownChange($event)\"\n    />\n    <button type=\"button\" class=\"text-gray-500 -translate-x-9\" (click)=\"picker.open()\">\n      <mat-icon>access_time</mat-icon>\n    </button>\n  </div>\n</ecabs-element-wrapper>\n", styles: [".time--inputs:after{position:absolute;content:\"\"}.time{width:3.375rem}.fake-input{visibility:hidden;width:0;padding:0}.time--inputs{position:relative;margin-bottom:2.4rem}.time--inputs:after{height:1px;right:0;left:0;background-color:var(--color-gray-300);bottom:-1.6rem}:host ::ng-deep .form-field{margin-right:-1.25rem;margin-left:-.125rem}\n"], dependencies: [{ kind: "component", type: EcabsElementWrapperComponent, selector: "ecabs-element-wrapper", inputs: ["data", "showCloseIcon", "focusedFlag", "showPassword", "control"], outputs: ["showHidePassword", "clear", "increase", "decrease"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i6.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i6.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i6.MatDatepickerActions, selector: "mat-datepicker-actions, mat-date-range-picker-actions" }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: EcabsDigitsOnlyDirective, selector: "[ecabsDigitsOnly]", inputs: ["digitsOnly", "allowHyphen", "decimal", "decimalSeparator", "unit"] }, { kind: "directive", type: EcabsNumberBorderDirective, selector: "[ecabsNumberBorder]", inputs: ["maxValue", "minValue"] }, { kind: "component", type: EcabsDatePickerActionsComponent, selector: "ecabs-date-picker-actions", inputs: ["cancelLabel", "applyLabel", "isDateRange", "disabledApplyButton"], outputs: ["apply"] }, { kind: "directive", type: EcabsMaskTimeDirective, selector: "[ecabsTime]", inputs: ["timeRange", "all"] }] });
+        ], usesInheritance: true, ngImport: i0, template: "<ecabs-element-wrapper [data]=\"getData()\">\n  <div class=\"form-field__input--wrapper w-full\">\n    <input\n      class=\"fake-input\"\n      [id]=\"_date\"\n      [(ngModel)]=\"_date\"\n      [placeholder]=\"placeholder\"\n      [disabled]=\"disabled || controlDate?.disabled\"\n      [matDatepicker]=\"picker\"\n      (blur)=\"onTouch()\"\n    />\n    <mat-datepicker\n      (opened)=\"opened()\"\n      #picker\n      [calendarHeaderComponent]=\"header\"\n      [touchUi]=\"touchUi\"\n    >\n      <mat-datepicker-actions>\n        <div class=\"flex flex-col w-full gap-y-4\">\n          <div class=\"flex gap-2 justify-center items-center\">\n            <div class=\"flex flex-col justify-center\">\n              <div class=\"text-center\">{{ from ?? translationConfig?.from }}</div>\n              <div class=\"flex gap-2 justify-center items-center\">\n                <input\n                  class=\"block form-field__input time\"\n                  ecabsDigitsOnly\n                  ecabsNumberBorder\n                  [digitsOnly]=\"true\"\n                  [id]=\"hoursFrom\"\n                  [maxValue]=\"maxValueHours\"\n                  [(ngModel)]=\"hoursFrom\"\n                />\n\n                <span class=\"font-bold\">:</span>\n                <input\n                  class=\"form-field__input time\"\n                  [id]=\"minutesFrom\"\n                  [(ngModel)]=\"minutesFrom\"\n                  ecabsDigitsOnly\n                  ecabsNumberBorder\n                  [digitsOnly]=\"true\"\n                  [maxValue]=\"maxValueMinutesSeconds\"\n                />\n              </div>\n            </div>\n          </div>\n          <div class=\"time--inputs\"></div>\n          <div class=\"flex gap-2 justify-center items-center mb-5\">\n            <div class=\"flex flex-col justify-center\">\n              <div class=\"text-center\">{{ to ?? translationConfig?.to }}</div>\n              <div class=\"flex gap-2 justify-center items-center\">\n                <input\n                  class=\"form-field__input time\"\n                  ecabsDigitsOnly\n                  ecabsNumberBorder\n                  [digitsOnly]=\"true\"\n                  [id]=\"hoursTo\"\n                  [maxValue]=\"maxValueHours\"\n                  [(ngModel)]=\"hoursTo\"\n                />\n                <span class=\"font-bold\">:</span>\n                <input\n                  class=\"form-field__input time\"\n                  [id]=\"minutesTo\"\n                  [(ngModel)]=\"minutesTo\"\n                  ecabsDigitsOnly\n                  ecabsNumberBorder\n                  [digitsOnly]=\"true\"\n                  [maxValue]=\"maxValueMinutesSeconds\"\n                />\n              </div>\n            </div>\n          </div>\n          <ecabs-date-picker-actions [applyLabel]=\"applyLabel ?? translationConfig?.applyLabel\"\n                                     [cancelLabel]=\"cancelLabel ?? translationConfig?.cancelLabel\"\n                                     (apply)=\"onApply()\">\n          </ecabs-date-picker-actions>\n        </div>\n      </mat-datepicker-actions>\n    </mat-datepicker>\n    <input\n      class=\"form-field__input w-full date-input\"\n      [id]=\"name\"\n      [(ngModel)]=\"pickerValue\"\n      placeholder=\"00:00 - 00:00\"\n      [disabled]=\"disabled || controlDate?.disabled\"\n      ecabsTime\n      [all]=\"allLabel\"\n      [timeRange]=\"true\"\n      (blur)=\"onTouch()\"\n      (blur)=\"blurChange($event)\"\n      (keyup)=\"blurChange($event)\"\n      (keydown)=\"keydownChange($event)\"\n    />\n    <button type=\"button\" class=\"text-gray-500 -translate-x-9\" (click)=\"picker.open()\">\n      <mat-icon>access_time</mat-icon>\n    </button>\n  </div>\n</ecabs-element-wrapper>\n", styles: [".time--inputs:after{position:absolute;content:\"\"}.time{width:3.375rem}.fake-input{visibility:hidden;width:0;padding:0}.time--inputs{position:relative;margin-bottom:2.4rem}.time--inputs:after{height:1px;right:0;left:0;background-color:var(--color-gray-300);bottom:-1.6rem}:host ::ng-deep .form-field{margin-right:-1.25rem;margin-left:-.125rem}\n"], dependencies: [{ kind: "component", type: EcabsElementWrapperComponent, selector: "ecabs-element-wrapper", inputs: ["data", "showCloseIcon", "focusedFlag", "showPassword", "control"], outputs: ["showHidePassword", "clear", "increase", "decrease"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i6.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i6.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i6.MatDatepickerActions, selector: "mat-datepicker-actions, mat-date-range-picker-actions" }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: EcabsDigitsOnlyDirective, selector: "[ecabsDigitsOnly]", inputs: ["digitsOnly", "allowHyphen", "allowRange", "decimal", "decimalSeparator", "unit"] }, { kind: "directive", type: EcabsNumberBorderDirective, selector: "[ecabsNumberBorder]", inputs: ["maxValue", "minValue"] }, { kind: "component", type: EcabsDatePickerActionsComponent, selector: "ecabs-date-picker-actions", inputs: ["cancelLabel", "applyLabel", "isDateRange", "disabledApplyButton"], outputs: ["apply"] }, { kind: "directive", type: EcabsMaskTimeDirective, selector: "[ecabsTime]", inputs: ["timeRange", "all"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsDateTimeRangePickerComponent, decorators: [{
             type: Component,
@@ -4215,7 +4330,7 @@ class EcabsIncrementComponent extends EcabsElementBaseComponent {
                 useExisting: EcabsIncrementComponent,
                 multi: true,
             },
-        ], usesInheritance: true, ngImport: i0, template: "<ecabs-element-wrapper [data]=\"getData()\">\n  <div class=\"form-field__input--wrapper\">\n    <input ecabsDigitsOnly [digitsOnly]=\"digitsOnly\" [decimal]=\"allowDecimal\" [allowHyphen]=\"allowHyphen\"\n           class=\"form-field__input\"\n           [type]=\"type\"\n           [id]=\"name\"\n           [(ngModel)]=\"value\"\n           [placeholder]=\"placeholder\"\n           (blur)=\"onTouch()\"\n           [disabled]=\"disabled\"\n           [maxlength]=\"maxLength\"/>\n\n    <div class=\"incrementor\">\n      <mat-icon (click)=\"increment()\">add</mat-icon>\n      <mat-icon (click)=\"decrement()\">remove</mat-icon>\n    </div>\n  </div>\n</ecabs-element-wrapper>\n", styles: [":root{--mat-standard-button-toggle-shape: calc-rem(8px);--mat-option-label-text-color: var(--color-gray-900);--mat-option-focus-state-layer-color: var(--color-gray-100);--mat-option-hover-state-layer-color: var(--color-gray-50);--mat-divider-color: var(--color-gray-100);--mat-select-placeholder-text-color: var(--color-gray-400);--color-black: #020618;--color-white: #ffffff;--color-white-opacity-05: rgba(0, 0, 0, .05);--color-gray-50: #F8FAFC;--color-gray-100: #F1F5F9;--color-gray-200: #E2E8F0;--color-gray-300: #CAD5E2;--color-gray-400: #90A1B9;--color-gray-500: #62748E;--color-gray-600: #45556C;--color-gray-700: #314158;--color-gray-800: #1D293D;--color-gray-900: #0F172B;--color-gray-950: #020618;--color-brand-dark: #193273;--color-brand-dark-rgb: 25, 50, 115;--color-brand-light: #325FDA;--color-brand-light2: #e7efff;--color-brand-light-rgb: 50, 95, 218;--color-brand-300: #e7efff;--color-brand-300-rgb: 231, 239, 255;--color-error: #bb032a;--color-error-opacity: #FFF0EE;--color-error-rgb: 223, 56, 56;--color-notification: #f4d04f;--color-notification-rgb: 244, 208, 79;--color-info: #325fda;--color-info-rgb: 50, 95, 218;--color-info-messages: #e3e9f3;--color-warning: #845201;--color-warning-opacity: #FDF2DC;--color-success: #166C3B;--color-success--opacity: #EAF6ED;--color-success-rgb: 7, 81, 69;--color-allocation-started: #E8F8E5;--color-allocation-scheduled: #FDF0E4;--color-allocation-ended: #FBE4E4;--color-allocation-sick: #E7EFFF;--color-allocation-no-show: #EAE5FF;--color-allocation-unavailable: #F2F2F2;--cropper-outline-color: rgba(0, 0, 0, .5);--mat-option-label-text-size: 13px}:host::ng-deep .incrementor{border-left:1px solid var(--color-gray-300);position:absolute;display:flex;flex-direction:column;top:1px;bottom:1px;right:1px}:host::ng-deep .incrementor .mat-icon{font-size:20px;font-size:1.25rem;margin-right:0;line-height:20px;cursor:pointer;text-align:center;flex:1}:host::ng-deep .incrementor .mat-icon:first-of-type{border-bottom:1px solid var(--color-gray-300)}:host::ng-deep .incrementor .mat-icon:hover{color:var(--color-brand-dark)}:host::ng-deep .form-field>div{line-height:1}\n"], dependencies: [{ kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: EcabsElementWrapperComponent, selector: "ecabs-element-wrapper", inputs: ["data", "showCloseIcon", "focusedFlag", "showPassword", "control"], outputs: ["showHidePassword", "clear", "increase", "decrease"] }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: EcabsDigitsOnlyDirective, selector: "[ecabsDigitsOnly]", inputs: ["digitsOnly", "allowHyphen", "decimal", "decimalSeparator", "unit"] }] });
+        ], usesInheritance: true, ngImport: i0, template: "<ecabs-element-wrapper [data]=\"getData()\">\n  <div class=\"form-field__input--wrapper\">\n    <input ecabsDigitsOnly [digitsOnly]=\"digitsOnly\" [decimal]=\"allowDecimal\" [allowHyphen]=\"allowHyphen\"\n           class=\"form-field__input\"\n           [type]=\"type\"\n           [id]=\"name\"\n           [(ngModel)]=\"value\"\n           [placeholder]=\"placeholder\"\n           (blur)=\"onTouch()\"\n           [disabled]=\"disabled\"\n           [maxlength]=\"maxLength\"/>\n\n    <div class=\"incrementor\">\n      <mat-icon (click)=\"increment()\">add</mat-icon>\n      <mat-icon (click)=\"decrement()\">remove</mat-icon>\n    </div>\n  </div>\n</ecabs-element-wrapper>\n", styles: [":root{--mat-standard-button-toggle-shape: calc-rem(8px);--mat-option-label-text-color: var(--color-gray-900);--mat-option-focus-state-layer-color: var(--color-gray-100);--mat-option-hover-state-layer-color: var(--color-gray-50);--mat-divider-color: var(--color-gray-100);--mat-select-placeholder-text-color: var(--color-gray-400);--color-black: #020618;--color-white: #ffffff;--color-white-opacity-05: rgba(0, 0, 0, .05);--color-gray-50: #F8FAFC;--color-gray-100: #F1F5F9;--color-gray-200: #E2E8F0;--color-gray-300: #CAD5E2;--color-gray-400: #90A1B9;--color-gray-500: #62748E;--color-gray-600: #45556C;--color-gray-700: #314158;--color-gray-800: #1D293D;--color-gray-900: #0F172B;--color-gray-950: #020618;--color-brand-dark: #193273;--color-brand-dark-rgb: 25, 50, 115;--color-brand-light: #325FDA;--color-brand-light2: #e7efff;--color-brand-light-rgb: 50, 95, 218;--color-brand-300: #e7efff;--color-brand-300-rgb: 231, 239, 255;--color-error: #bb032a;--color-error-opacity: #FFF0EE;--color-error-rgb: 223, 56, 56;--color-notification: #f4d04f;--color-notification-rgb: 244, 208, 79;--color-info: #325fda;--color-info-rgb: 50, 95, 218;--color-info-messages: #e3e9f3;--color-warning: #845201;--color-warning-opacity: #FDF2DC;--color-success: #166C3B;--color-success--opacity: #EAF6ED;--color-success-rgb: 7, 81, 69;--color-allocation-started: #E8F8E5;--color-allocation-scheduled: #FDF0E4;--color-allocation-ended: #FBE4E4;--color-allocation-sick: #E7EFFF;--color-allocation-no-show: #EAE5FF;--color-allocation-unavailable: #F2F2F2;--cropper-outline-color: rgba(0, 0, 0, .5);--mat-option-label-text-size: 13px}:host::ng-deep .incrementor{border-left:1px solid var(--color-gray-300);position:absolute;display:flex;flex-direction:column;top:1px;bottom:1px;right:1px}:host::ng-deep .incrementor .mat-icon{font-size:20px;font-size:1.25rem;margin-right:0;line-height:20px;cursor:pointer;text-align:center;flex:1}:host::ng-deep .incrementor .mat-icon:first-of-type{border-bottom:1px solid var(--color-gray-300)}:host::ng-deep .incrementor .mat-icon:hover{color:var(--color-brand-dark)}:host::ng-deep .form-field>div{line-height:1}\n"], dependencies: [{ kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: EcabsElementWrapperComponent, selector: "ecabs-element-wrapper", inputs: ["data", "showCloseIcon", "focusedFlag", "showPassword", "control"], outputs: ["showHidePassword", "clear", "increase", "decrease"] }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: EcabsDigitsOnlyDirective, selector: "[ecabsDigitsOnly]", inputs: ["digitsOnly", "allowHyphen", "allowRange", "decimal", "decimalSeparator", "unit"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsIncrementComponent, decorators: [{
             type: Component,
@@ -8681,7 +8796,7 @@ class EcabsDialogConfirmationDeletionComponent {
         this.dialogRef.close(false);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsDialogConfirmationDeletionComponent, deps: [{ token: i1$2.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: i3.UntypedFormBuilder }, { token: EcabsComponentsService }, { token: i0.DestroyRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EcabsDialogConfirmationDeletionComponent, selector: "ecabs-dialog-confirm-deletion", ngImport: i0, template: "<div class=\"p-6\">\n  <h3 class=\"modal-title font-semibold\" [ngClass]=\"(data?.color || color) === 'primary' ? 'primary' : 'warn'\">\n    {{ data.actionName }} {{ data.showEntityNameInHeader ? (data.entityName | lowercase) : '' }}\n  </h3>\n  <div class=\"mt-1\">\n    <div class=\"alert-item\" *ngIf=\"data.alertText && data.alertText.length > 0\">\n      <span class=\"alert-text\">\n        {{ data.alertText }}\n      </span>\n    </div>\n\n    <form [formGroup]=\"form\" class=\"mt-1\">\n      <ecabs-input\n        [placeholder]=\"data.entityNamePlaceholder\"\n        [label]=\"data.entityNameLabel\"\n        name=\"name\"\n        formControlName=\"name\"\n      ></ecabs-input>\n    </form>\n  </div>\n\n  <div class=\"btn__group flex flex-row gap-x-4 justify-end\">\n    <ecabs-buttons class=\"grow\" [style]=\"'stroked'\" (click)=\"onCancel()\">\n      {{ data?.cancelLabel }}\n    </ecabs-buttons>\n\n    <ecabs-buttons\n      class=\"grow\"\n      [color]=\"data?.color || color\"\n      (click)=\"onConfirm()\"\n      [disabled]=\"form.value.name !== data.comparisonText\"\n    >\n      {{ data?.confirmLabel }}\n    </ecabs-buttons>\n  </div>\n</div>\n", styles: [".modal-title{font-size:22px}:host ::ng-deep button{width:100%!important}.primary{color:var(--color-brand-dark)}.warn{color:var(--color-error)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: ButtonsComponent, selector: "ecabs-buttons", inputs: ["disabled", "loading", "size", "type", "style", "full", "color"] }, { kind: "component", type: EcabsInputComponent, selector: "ecabs-input", inputs: ["digitsOnly", "allowDecimal", "allowHyphen", "max", "mini", "maxi", "step"], outputs: ["onblur"] }, { kind: "pipe", type: i1.LowerCasePipe, name: "lowercase" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EcabsDialogConfirmationDeletionComponent, selector: "ecabs-dialog-confirm-deletion", ngImport: i0, template: "<div class=\"p-6\">\n  <h3 class=\"modal-title font-semibold\" [ngClass]=\"(data?.color || color) === 'primary' ? 'primary' : 'warn'\">\n    {{ data.actionName }} {{ data.showEntityNameInHeader ? (data.entityName | lowercase) : '' }}\n  </h3>\n  <div class=\"mt-1\">\n    <div class=\"alert-item\" *ngIf=\"data.alertText && data.alertText.length > 0\">\n      <span class=\"alert-text\">\n        {{ data.alertText }}\n      </span>\n    </div>\n\n    <form [formGroup]=\"form\" class=\"mt-1\">\n      <ecabs-input\n        [placeholder]=\"data.entityNamePlaceholder\"\n        [label]=\"data.entityNameLabel\"\n        name=\"name\"\n        formControlName=\"name\"\n      ></ecabs-input>\n    </form>\n  </div>\n\n  <div class=\"btn__group flex flex-row gap-x-4 justify-end\">\n    <ecabs-buttons class=\"grow\" [style]=\"'stroked'\" (click)=\"onCancel()\">\n      {{ data?.cancelLabel }}\n    </ecabs-buttons>\n\n    <ecabs-buttons\n      class=\"grow\"\n      [color]=\"data?.color || color\"\n      (click)=\"onConfirm()\"\n      [disabled]=\"form.value.name !== data.comparisonText\"\n    >\n      {{ data?.confirmLabel }}\n    </ecabs-buttons>\n  </div>\n</div>\n", styles: [".modal-title{font-size:22px}:host ::ng-deep button{width:100%!important}.primary{color:var(--color-brand-dark)}.warn{color:var(--color-error)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: ButtonsComponent, selector: "ecabs-buttons", inputs: ["disabled", "loading", "size", "type", "style", "full", "color"] }, { kind: "component", type: EcabsInputComponent, selector: "ecabs-input", inputs: ["digitsOnly", "allowDecimal", "allowHyphen", "allowRange", "max", "mini", "maxi", "step"], outputs: ["onblur"] }, { kind: "pipe", type: i1.LowerCasePipe, name: "lowercase" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsDialogConfirmationDeletionComponent, decorators: [{
             type: Component,
@@ -8947,6 +9062,8 @@ class EcabsChipGroupComponent {
     multiple = true;
     disableRipple = true;
     truncateAt = 18;
+    compareFn = Object.is;
+    trackByFn = (_, option) => option;
     selectedChange = new EventEmitter();
     _value = signal(null);
     isDisabled = signal(false);
@@ -8971,13 +9088,13 @@ class EcabsChipGroupComponent {
     onChange = () => { };
     onTouched = () => { };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsChipGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EcabsChipGroupComponent, selector: "ecabs-chip-group", inputs: { options: "options", multiple: "multiple", disableRipple: "disableRipple", truncateAt: "truncateAt" }, outputs: { selectedChange: "selectedChange" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EcabsChipGroupComponent, selector: "ecabs-chip-group", inputs: { options: "options", multiple: "multiple", disableRipple: "disableRipple", truncateAt: "truncateAt", compareFn: "compareFn", trackByFn: "trackByFn" }, outputs: { selectedChange: "selectedChange" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => EcabsChipGroupComponent),
                 multi: true,
             },
-        ], ngImport: i0, template: "<mat-chip-listbox [multiple]=\"multiple\"\n                  [disabled]=\"isDisabled()\"\n                  [ngModel]=\"_value()\"\n                  (ngModelChange)=\"chipValueChange($event)\">\n  <mat-chip-option *ngFor=\"let option of options\"\n                   [value]=\"option.value\"\n                   [disabled]=\"option.disabled\"\n                   [disableRipple]=\"disableRipple\">\n    <ng-container *ngIf=\"option?.label as label\">\n      <span [matTooltip]=\"label\"\n            [matTooltipDisabled]=\"label.length <= truncateAt\">\n        {{ label | truncate: truncateAt }}\n      </span>\n    </ng-container>\n  </mat-chip-option>\n</mat-chip-listbox>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$3.MatChipListbox, selector: "mat-chip-listbox", inputs: ["tabIndex", "multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "component", type: i2$3.MatChipOption, selector: "mat-basic-chip-option, [mat-basic-chip-option], mat-chip-option, [mat-chip-option]", inputs: ["color", "disabled", "disableRipple", "tabIndex", "selectable", "selected"], outputs: ["selectionChange"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "pipe", type: EcabsTruncatePipe, name: "truncate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], ngImport: i0, template: "<mat-chip-listbox [multiple]=\"multiple\"\n                  [compareWith]=\"compareFn\"\n                  [disabled]=\"isDisabled()\"\n                  [ngModel]=\"_value()\"\n                  (ngModelChange)=\"chipValueChange($event)\">\n  <mat-chip-option *ngFor=\"let option of options; trackBy: trackByFn\"\n                   [value]=\"option.value\"\n                   [disabled]=\"option.disabled\"\n                   [disableRipple]=\"disableRipple\">\n    <ng-container *ngIf=\"option?.label as label\">\n      <span [matTooltip]=\"label\"\n            [matTooltipDisabled]=\"label.length <= truncateAt\">\n        {{ label | truncate: truncateAt }}\n      </span>\n    </ng-container>\n  </mat-chip-option>\n</mat-chip-listbox>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$3.MatChipListbox, selector: "mat-chip-listbox", inputs: ["tabIndex", "multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "component", type: i2$3.MatChipOption, selector: "mat-basic-chip-option, [mat-basic-chip-option], mat-chip-option, [mat-chip-option]", inputs: ["color", "disabled", "disableRipple", "tabIndex", "selectable", "selected"], outputs: ["selectionChange"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "pipe", type: EcabsTruncatePipe, name: "truncate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsChipGroupComponent, decorators: [{
             type: Component,
@@ -8987,7 +9104,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                             useExisting: forwardRef(() => EcabsChipGroupComponent),
                             multi: true,
                         },
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-chip-listbox [multiple]=\"multiple\"\n                  [disabled]=\"isDisabled()\"\n                  [ngModel]=\"_value()\"\n                  (ngModelChange)=\"chipValueChange($event)\">\n  <mat-chip-option *ngFor=\"let option of options\"\n                   [value]=\"option.value\"\n                   [disabled]=\"option.disabled\"\n                   [disableRipple]=\"disableRipple\">\n    <ng-container *ngIf=\"option?.label as label\">\n      <span [matTooltip]=\"label\"\n            [matTooltipDisabled]=\"label.length <= truncateAt\">\n        {{ label | truncate: truncateAt }}\n      </span>\n    </ng-container>\n  </mat-chip-option>\n</mat-chip-listbox>\n" }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-chip-listbox [multiple]=\"multiple\"\n                  [compareWith]=\"compareFn\"\n                  [disabled]=\"isDisabled()\"\n                  [ngModel]=\"_value()\"\n                  (ngModelChange)=\"chipValueChange($event)\">\n  <mat-chip-option *ngFor=\"let option of options; trackBy: trackByFn\"\n                   [value]=\"option.value\"\n                   [disabled]=\"option.disabled\"\n                   [disableRipple]=\"disableRipple\">\n    <ng-container *ngIf=\"option?.label as label\">\n      <span [matTooltip]=\"label\"\n            [matTooltipDisabled]=\"label.length <= truncateAt\">\n        {{ label | truncate: truncateAt }}\n      </span>\n    </ng-container>\n  </mat-chip-option>\n</mat-chip-listbox>\n" }]
         }], propDecorators: { options: [{
                 type: Input
             }], multiple: [{
@@ -8996,6 +9113,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], truncateAt: [{
                 type: Input
+            }], compareFn: [{
+                type: Input
+            }], trackByFn: [{
+                type: Input
             }], selectedChange: [{
                 type: Output
             }] } });