ecabs-components 1.1.80 → 1.1.81

package/esm2022/lib/ecabs-input/ecabs-input.component.mjs

@@ -1,7 +1,8 @@
-import { Component, EventEmitter, Input, Output, ViewChild, } from '@angular/core';
+import { Component, EventEmitter, HostBinding, Input, Output, ViewChild, } from '@angular/core';
 import { NG_VALUE_ACCESSOR, NgControl, } from '@angular/forms';
 import EcabsElementBaseComponent from '../base/element-base';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { AUTO_RESIZE_SYMBOL_BUFFER_PX } from "../base/consts/input.consts";
 import * as i0 from "@angular/core";
 import * as i1 from "@angular/common";
 import * as i2 from "../base/element-wrapper/element-wrapper.component";
@@ -11,17 +12,24 @@ import * as i5 from "../base/directives/min-max.directive";
 export class EcabsInputComponent extends EcabsElementBaseComponent {
     injector;
     destroyRef;
+    renderer;
     matCustomInput;
+    // Hidden mirror span used to measure the value's rendered width
+    autoSizer;
     digitsOnly;
     allowDecimal;
     allowHyphen;
     allowRange;
+    autoResize = false;
     max;
     mini;
     maxi;
     step;
     onblur = new EventEmitter();
     val;
+    get fluidHost() {
+        return this.autoResize;
+    }
     get value() {
         return this.val;
     }
@@ -34,10 +42,11 @@ export class EcabsInputComponent extends EcabsElementBaseComponent {
             }
         }
     }
-    constructor(injector, destroyRef) {
+    constructor(injector, destroyRef, renderer) {
         super();
         this.injector = injector;
         this.destroyRef = destroyRef;
+        this.renderer = renderer;
     }
     ngOnInit() {
         if (this.type === 'number') {
@@ -55,11 +64,15 @@ export class EcabsInputComponent extends EcabsElementBaseComponent {
             });
         }
         this.updateDisabledState();
+        this.trackAutoResize();
     }
-    onChange = () => { };
-    onTouch = () => { };
+    onChange = () => {
+    };
+    onTouch = () => {
+    };
     writeValue(value) {
         this.value = value;
+        this.trackAutoResize();
     }
     registerOnChange(fn) {
         this.onChange = fn;
@@ -70,14 +83,38 @@ export class EcabsInputComponent extends EcabsElementBaseComponent {
     blurChange(e) {
         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", allowRange: "allowRange", max: "max", mini: "mini", maxi: "maxi", step: "step" }, outputs: { onblur: "onblur" }, providers: [
+    onInput() {
+        this.measureAutoResizeWidth();
+    }
+    trackAutoResize() {
+        if (!this.autoResize) {
+            return;
+        }
+        setTimeout(() => this.measureAutoResizeWidth());
+    }
+    measureAutoResizeWidth() {
+        const input = this.matCustomInput?.nativeElement;
+        const sizer = this.autoSizer?.nativeElement;
+        if (!input) {
+            return;
+        }
+        if (!this.autoResize || !sizer) {
+            this.renderer.removeStyle(input, 'width');
+            return;
+        }
+        sizer.textContent = input.value?.length ? input.value : this.placeholder;
+        const sizerWidth = Math.ceil(sizer.getBoundingClientRect().width);
+        const width = sizerWidth + AUTO_RESIZE_SYMBOL_BUFFER_PX;
+        this.renderer.setStyle(input, 'width', `${width}px`);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsInputComponent, deps: [{ token: i0.Injector }, { token: i0.DestroyRef }, { token: i0.Renderer2 }], 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", allowRange: "allowRange", autoResize: "autoResize", max: "max", mini: "mini", maxi: "maxi", step: "step" }, outputs: { onblur: "onblur" }, host: { properties: { "class.ecabs-input--fluid": "this.fluidHost" } }, 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           [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: i2.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: i4.EcabsDigitsOnlyDirective, selector: "[ecabsDigitsOnly]", inputs: ["digitsOnly", "allowHyphen", "allowRange", "decimal", "decimalSeparator", "unit"] }, { kind: "directive", type: i5.EcabsMinDirective, selector: "[mini][formControlName],[mini][formControl],[mini][ngModel]", inputs: ["mini"] }, { kind: "directive", type: i5.EcabsMaxDirective, selector: "[maxi][formControlName],[maxi][formControl],[maxi][ngModel]", inputs: ["maxi"] }] });
+        ], viewQueries: [{ propertyName: "matCustomInput", first: true, predicate: ["matCustomInput"], descendants: true }, { propertyName: "autoSizer", first: true, predicate: ["autoSizer"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ecabs-element-wrapper [data]=\"getData()\">\n  <div class=\"form-field__input--wrapper\"\n       [class.form-field__input--wrapper--fluid]=\"autoResize\">\n    <input #matCustomInput\n           ecabsDigitsOnly\n           [ngClass]=\"disabled ? 'form-field__input--disabled' : null\"\n           [digitsOnly]=\"digitsOnly\"\n           [decimal]=\"allowDecimal\"\n           [allowHyphen]=\"allowHyphen\"\n           [allowRange]=\"allowRange\"\n           class=\"form-field__input\"\n           [type]=\"type\"\n           [id]=\"name\"\n           [(ngModel)]=\"value\"\n           [placeholder]=\"placeholder\"\n           (blur)=\"onTouch()\"\n           [mini]=\"mini\"\n           [maxi]=\"maxi\"\n           [disabled]=\"disabled\"\n           [maxlength]=\"maxLength\"\n           [max]=\"max\"\n           [step]=\"step\"\n           (input)=\"onInput()\"\n           (blur)=\"blurChange($event)\"\n    />\n\n    <span *ngIf=\"autoResize\"\n          #autoSizer\n          class=\"form-field__input--sizer\"\n          aria-hidden=\"true\">\n    </span>\n\n    <div *ngIf=\"type !== 'number' || autoResize\"\n         class=\"form-field__input--suffix\">\n      <ng-content select=\"mat-icon\"></ng-content>\n      <ng-content select=\".suffix\"></ng-content>\n    </div>\n  </div>\n</ecabs-element-wrapper>\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: i2.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: i4.EcabsDigitsOnlyDirective, selector: "[ecabsDigitsOnly]", inputs: ["digitsOnly", "allowHyphen", "allowRange", "decimal", "decimalSeparator", "unit"] }, { kind: "directive", type: i5.EcabsMinDirective, selector: "[mini][formControlName],[mini][formControl],[mini][ngModel]", inputs: ["mini"] }, { kind: "directive", type: i5.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,
@@ -87,10 +124,13 @@ 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           [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: [{
+                    ], template: "<ecabs-element-wrapper [data]=\"getData()\">\n  <div class=\"form-field__input--wrapper\"\n       [class.form-field__input--wrapper--fluid]=\"autoResize\">\n    <input #matCustomInput\n           ecabsDigitsOnly\n           [ngClass]=\"disabled ? 'form-field__input--disabled' : null\"\n           [digitsOnly]=\"digitsOnly\"\n           [decimal]=\"allowDecimal\"\n           [allowHyphen]=\"allowHyphen\"\n           [allowRange]=\"allowRange\"\n           class=\"form-field__input\"\n           [type]=\"type\"\n           [id]=\"name\"\n           [(ngModel)]=\"value\"\n           [placeholder]=\"placeholder\"\n           (blur)=\"onTouch()\"\n           [mini]=\"mini\"\n           [maxi]=\"maxi\"\n           [disabled]=\"disabled\"\n           [maxlength]=\"maxLength\"\n           [max]=\"max\"\n           [step]=\"step\"\n           (input)=\"onInput()\"\n           (blur)=\"blurChange($event)\"\n    />\n\n    <span *ngIf=\"autoResize\"\n          #autoSizer\n          class=\"form-field__input--sizer\"\n          aria-hidden=\"true\">\n    </span>\n\n    <div *ngIf=\"type !== 'number' || autoResize\"\n         class=\"form-field__input--suffix\">\n      <ng-content select=\"mat-icon\"></ng-content>\n      <ng-content select=\".suffix\"></ng-content>\n    </div>\n  </div>\n</ecabs-element-wrapper>\n" }]
+        }], ctorParameters: function () { return [{ type: i0.Injector }, { type: i0.DestroyRef }, { type: i0.Renderer2 }]; }, propDecorators: { matCustomInput: [{
                 type: ViewChild,
                 args: ['matCustomInput', { static: false }]
+            }], autoSizer: [{
+                type: ViewChild,
+                args: ['autoSizer', { static: false }]
             }], digitsOnly: [{
                 type: Input
             }], allowDecimal: [{
@@ -99,6 +139,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], allowRange: [{
                 type: Input
+            }], autoResize: [{
+                type: Input
             }], max: [{
                 type: Input
             }], mini: [{
@@ -109,5 +151,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], onblur: [{
                 type: Output
+            }], fluidHost: [{
+                type: HostBinding,
+                args: ['class.ecabs-input--fluid']
             }] } });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZWNhYnMtaW5wdXQuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvZWNhYnMtY29tcG9uZW50cy9zcmMvbGliL2VjYWJzLWlucHV0L2VjYWJzLWlucHV0LmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2VjYWJzLWNvbXBvbmVudHMvc3JjL2xpYi9lY2Ficy1pbnB1dC9lY2Ficy1pbnB1dC5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBRUwsU0FBUyxFQUdULFlBQVksRUFFWixLQUFLLEVBRUwsTUFBTSxFQUNOLFNBQVMsR0FDVixNQUFNLGVBQWUsQ0FBQztBQUN2QixPQUFPLEVBRUwsaUJBQWlCLEVBQ2pCLFNBQVMsR0FFVixNQUFNLGdCQUFnQixDQUFDO0FBQ3hCLE9BQU8seUJBQXlCLE1BQU0sc0JBQXNCLENBQUM7QUFDN0QsT0FBTyxFQUFFLGtCQUFrQixFQUFFLE1BQU0sNEJBQTRCLENBQUM7Ozs7Ozs7QUFhaEUsTUFBTSxPQUFPLG1CQUNYLFNBQVEseUJBQXlCO0lBMEN2QjtJQUNTO0lBdkNuQixjQUFjLENBQWE7SUFHM0IsVUFBVSxDQUFXO0lBR3JCLFlBQVksQ0FBVztJQUd2QixXQUFXLENBQVc7SUFHdEIsVUFBVSxDQUFXO0lBRVosR0FBRyxDQUFVO0lBQ2IsSUFBSSxDQUFVO0lBQ2QsSUFBSSxDQUFVO0lBQ2QsSUFBSSxDQUFVO0lBRWIsTUFBTSxHQUFHLElBQUksWUFBWSxFQUFPLENBQUM7SUFDM0MsR0FBRyxDQUFtQjtJQUV0QixJQUFJLEtBQUs7UUFDUCxPQUFPLElBQUksQ0FBQyxHQUFHLENBQUM7SUFDbEIsQ0FBQztJQUVELElBQUksS0FBSyxDQUFDLEdBQUc7UUFDWCxJQUFJLEdBQUcsS0FBSyxTQUFTLElBQUksSUFBSSxDQUFDLEdBQUcsS0FBSyxHQUFHLEVBQUU7WUFDekMsSUFBSSxDQUFDLEdBQUcsR0FBRyxHQUFHLENBQUM7WUFDZixJQUFJLENBQUMsUUFBUSxDQUFDLEdBQUcsQ0FBQyxDQUFDO1lBRW5CLElBQUksSUFBSSxDQUFDLE9BQU8sRUFBRSxFQUFFLE9BQU8sRUFBRSxRQUFRLEtBQUssTUFBTSxFQUFFO2dCQUNoRCxJQUFJLENBQUMsT0FBTyxDQUFDLEdBQUcsQ0FBQyxDQUFDO2FBQ25CO1NBQ0Y7SUFDSCxDQUFDO0lBRUQsWUFDVSxRQUFrQixFQUNULFVBQXNCO1FBRXZDLEtBQUssRUFBRSxDQUFDO1FBSEEsYUFBUSxHQUFSLFFBQVEsQ0FBVTtRQUNULGVBQVUsR0FBVixVQUFVLENBQVk7SUFHekMsQ0FBQztJQUVELFFBQVE7UUFDTixJQUFJLElBQUksQ0FBQyxJQUFJLEtBQUssUUFBUSxFQUFFO1lBQzFCLElBQUksQ0FBQyxVQUFVLEdBQUcsSUFBSSxDQUFDO1NBQ3hCO0lBQ0gsQ0FBQztJQUVELGVBQWU7UUFDYixNQUFNLFNBQVMsR0FBYyxJQUFJLENBQUMsUUFBUSxDQUFDLEdBQUcsQ0FBQyxTQUFTLEVBQUUsSUFBSSxDQUFDLENBQUM7UUFDaEUsSUFBSSxTQUFTLEVBQUU7WUFDYixJQUFJLENBQUMsT0FBTyxHQUFHLFNBQVMsQ0FBQyxPQUE2QixDQUFDO1lBQ3ZELElBQUksQ0FBQyxPQUFPLENBQUMsYUFBYTtpQkFDdkIsSUFBSSxDQUFDLGtCQUFrQixDQUFDLElBQUksQ0FBQyxVQUFVLENBQUMsQ0FBQztpQkFDekMsU0FBUyxDQUFDLEdBQUcsRUFBRTtnQkFDZCxJQUFJLENBQUMsbUJBQW1CLEVBQUUsQ0FBQztZQUM3QixDQUFDLENBQUMsQ0FBQztTQUNOO1FBRUQsSUFBSSxDQUFDLG1CQUFtQixFQUFFLENBQUM7SUFDN0IsQ0FBQztJQUVELFFBQVEsR0FBUSxHQUFHLEVBQUUsR0FBRSxDQUFDLENBQUM7SUFFekIsT0FBTyxHQUFRLEdBQUcsRUFBRSxHQUFFLENBQUMsQ0FBQztJQUV4QixVQUFVLENBQUMsS0FBVTtRQUNuQixJQUFJLENBQUMsS0FBSyxHQUFHLEtBQUssQ0FBQztJQUNyQixDQUFDO0lBRUQsZ0JBQWdCLENBQUMsRUFBTztRQUN0QixJQUFJLENBQUMsUUFBUSxHQUFHLEVBQUUsQ0FBQztJQUNyQixDQUFDO0lBRUQsaUJBQWlCLENBQUMsRUFBTztRQUN2QixJQUFJLENBQUMsT0FBTyxHQUFHLEVBQUUsQ0FBQztJQUNwQixDQUFDO0lBRUQsVUFBVSxDQUFDLENBQU07UUFDZixJQUFJLENBQUMsTUFBTSxDQUFDLElBQUksQ0FBQyxDQUFDLENBQUMsQ0FBQztJQUN0QixDQUFDO3dHQXZGVSxtQkFBbUI7NEZBQW5CLG1CQUFtQixxUEFSbkI7WUFDVDtnQkFDRSxPQUFPLEVBQUUsaUJBQWlCO2dCQUMxQixXQUFXLEVBQUUsbUJBQW1CO2dCQUNoQyxLQUFLLEVBQUUsSUFBSTthQUNaO1NBQ0YsbUtDOUJILHdsQ0E4QkE7OzRGREVhLG1CQUFtQjtrQkFYL0IsU0FBUzsrQkFDRSxhQUFhLGFBRVo7d0JBQ1Q7NEJBQ0UsT0FBTyxFQUFFLGlCQUFpQjs0QkFDMUIsV0FBVyxxQkFBcUI7NEJBQ2hDLEtBQUssRUFBRSxJQUFJO3lCQUNaO3FCQUNGO3dIQU9ELGNBQWM7c0JBRGIsU0FBUzt1QkFBQyxnQkFBZ0IsRUFBRSxFQUFFLE1BQU0sRUFBRSxLQUFLLEVBQUU7Z0JBSTlDLFVBQVU7c0JBRFQsS0FBSztnQkFJTixZQUFZO3NCQURYLEtBQUs7Z0JBSU4sV0FBVztzQkFEVixLQUFLO2dCQUlOLFVBQVU7c0JBRFQsS0FBSztnQkFHRyxHQUFHO3NCQUFYLEtBQUs7Z0JBQ0csSUFBSTtzQkFBWixLQUFLO2dCQUNHLElBQUk7c0JBQVosS0FBSztnQkFDRyxJQUFJO3NCQUFaLEtBQUs7Z0JBRUksTUFBTTtzQkFBZixNQUFNIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcclxuICBBZnRlclZpZXdJbml0LFxyXG4gIENvbXBvbmVudCxcclxuICBEZXN0cm95UmVmLFxyXG4gIEVsZW1lbnRSZWYsXHJcbiAgRXZlbnRFbWl0dGVyLFxyXG4gIEluamVjdG9yLFxyXG4gIElucHV0LFxyXG4gIE9uSW5pdCxcclxuICBPdXRwdXQsXHJcbiAgVmlld0NoaWxkLFxyXG59IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5pbXBvcnQge1xyXG4gIENvbnRyb2xWYWx1ZUFjY2Vzc29yLFxyXG4gIE5HX1ZBTFVFX0FDQ0VTU09SLFxyXG4gIE5nQ29udHJvbCxcclxuICBVbnR5cGVkRm9ybUNvbnRyb2wsXHJcbn0gZnJvbSAnQGFuZ3VsYXIvZm9ybXMnO1xyXG5pbXBvcnQgRWNhYnNFbGVtZW50QmFzZUNvbXBvbmVudCBmcm9tICcuLi9iYXNlL2VsZW1lbnQtYmFzZSc7XHJcbmltcG9ydCB7IHRha2VVbnRpbERlc3Ryb3llZCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUvcnhqcy1pbnRlcm9wJztcclxuXHJcbkBDb21wb25lbnQoe1xyXG4gIHNlbGVjdG9yOiAnZWNhYnMtaW5wdXQnLFxyXG4gIHRlbXBsYXRlVXJsOiAnLi9lY2Ficy1pbnB1dC5jb21wb25lbnQuaHRtbCcsXHJcbiAgcHJvdmlkZXJzOiBbXHJcbiAgICB7XHJcbiAgICAgIHByb3ZpZGU6IE5HX1ZBTFVFX0FDQ0VTU09SLFxyXG4gICAgICB1c2VFeGlzdGluZzogRWNhYnNJbnB1dENvbXBvbmVudCxcclxuICAgICAgbXVsdGk6IHRydWUsXHJcbiAgICB9LFxyXG4gIF0sXHJcbn0pXHJcbmV4cG9ydCBjbGFzcyBFY2Fic0lucHV0Q29tcG9uZW50XHJcbiAgZXh0ZW5kcyBFY2Fic0VsZW1lbnRCYXNlQ29tcG9uZW50XHJcbiAgaW1wbGVtZW50cyBDb250cm9sVmFsdWVBY2Nlc3NvciwgQWZ0ZXJWaWV3SW5pdCwgT25Jbml0XHJcbntcclxuICBAVmlld0NoaWxkKCdtYXRDdXN0b21JbnB1dCcsIHsgc3RhdGljOiBmYWxzZSB9KVxyXG4gIG1hdEN1c3RvbUlucHV0OiBFbGVtZW50UmVmO1xyXG5cclxuICBASW5wdXQoKVxyXG4gIGRpZ2l0c09ubHkhOiBib29sZWFuO1xyXG5cclxuICBASW5wdXQoKVxyXG4gIGFsbG93RGVjaW1hbCE6IGJvb2xlYW47XHJcblxyXG4gIEBJbnB1dCgpXHJcbiAgYWxsb3dIeXBoZW4hOiBib29sZWFuO1xyXG5cclxuICBASW5wdXQoKVxyXG4gIGFsbG93UmFuZ2UhOiBib29sZWFuO1xyXG5cclxuICBASW5wdXQoKSBtYXghOiBudW1iZXI7XHJcbiAgQElucHV0KCkgbWluaSE6IG51bWJlcjtcclxuICBASW5wdXQoKSBtYXhpITogbnVtYmVyO1xyXG4gIEBJbnB1dCgpIHN0ZXAhOiBudW1iZXI7XHJcblxyXG4gIEBPdXRwdXQoKSBvbmJsdXIgPSBuZXcgRXZlbnRFbWl0dGVyPGFueT4oKTtcclxuICB2YWwhOiBzdHJpbmcgfCBudW1iZXI7XHJcblxyXG4gIGdldCB2YWx1ZSgpOiBzdHJpbmcgfCBudW1iZXIge1xyXG4gICAgcmV0dXJuIHRoaXMudmFsO1xyXG4gIH1cclxuXHJcbiAgc2V0IHZhbHVlKHZhbCkge1xyXG4gICAgaWYgKHZhbCAhPT0gdW5kZWZpbmVkICYmIHRoaXMudmFsICE9PSB2YWwpIHtcclxuICAgICAgdGhpcy52YWwgPSB2YWw7XHJcbiAgICAgIHRoaXMub25DaGFuZ2UodmFsKTtcclxuXHJcbiAgICAgIGlmICh0aGlzLmdldERhdGEoKT8uY29udHJvbD8udXBkYXRlT24gIT09ICdibHVyJykge1xyXG4gICAgICAgIHRoaXMub25Ub3VjaCh2YWwpO1xyXG4gICAgICB9XHJcbiAgICB9XHJcbiAgfVxyXG5cclxuICBjb25zdHJ1Y3RvcihcclxuICAgIHByaXZhdGUgaW5qZWN0b3I6IEluamVjdG9yLFxyXG4gICAgcHJpdmF0ZSByZWFkb25seSBkZXN0cm95UmVmOiBEZXN0cm95UmVmLFxyXG4gICkge1xyXG4gICAgc3VwZXIoKTtcclxuICB9XHJcblxyXG4gIG5nT25Jbml0KCk6IHZvaWQge1xyXG4gICAgaWYgKHRoaXMudHlwZSA9PT0gJ251bWJlcicpIHtcclxuICAgICAgdGhpcy5kaWdpdHNPbmx5ID0gdHJ1ZTtcclxuICAgIH1cclxuICB9XHJcblxyXG4gIG5nQWZ0ZXJWaWV3SW5pdCgpOiB2b2lkIHtcclxuICAgIGNvbnN0IG5nQ29udHJvbDogTmdDb250cm9sID0gdGhpcy5pbmplY3Rvci5nZXQoTmdDb250cm9sLCBudWxsKTtcclxuICAgIGlmIChuZ0NvbnRyb2wpIHtcclxuICAgICAgdGhpcy5jb250cm9sID0gbmdDb250cm9sLmNvbnRyb2wgYXMgVW50eXBlZEZvcm1Db250cm9sO1xyXG4gICAgICB0aGlzLmNvbnRyb2wuc3RhdHVzQ2hhbmdlc1xyXG4gICAgICAgIC5waXBlKHRha2VVbnRpbERlc3Ryb3llZCh0aGlzLmRlc3Ryb3lSZWYpKVxyXG4gICAgICAgIC5zdWJzY3JpYmUoKCkgPT4ge1xyXG4gICAgICAgICAgdGhpcy51cGRhdGVEaXNhYmxlZFN0YXRlKCk7XHJcbiAgICAgICAgfSk7XHJcbiAgICB9XHJcblxyXG4gICAgdGhpcy51cGRhdGVEaXNhYmxlZFN0YXRlKCk7XHJcbiAgfVxyXG5cclxuICBvbkNoYW5nZTogYW55ID0gKCkgPT4ge307XHJcblxyXG4gIG9uVG91Y2g6IGFueSA9ICgpID0+IHt9O1xyXG5cclxuICB3cml0ZVZhbHVlKHZhbHVlOiBhbnkpOiB2b2lkIHtcclxuICAgIHRoaXMudmFsdWUgPSB2YWx1ZTtcclxuICB9XHJcblxyXG4gIHJlZ2lzdGVyT25DaGFuZ2UoZm46IGFueSk6IHZvaWQge1xyXG4gICAgdGhpcy5vbkNoYW5nZSA9IGZuO1xyXG4gIH1cclxuXHJcbiAgcmVnaXN0ZXJPblRvdWNoZWQoZm46IGFueSk6IHZvaWQge1xyXG4gICAgdGhpcy5vblRvdWNoID0gZm47XHJcbiAgfVxyXG5cclxuICBibHVyQ2hhbmdlKGU6IGFueSk6IHZvaWQge1xyXG4gICAgdGhpcy5vbmJsdXIuZW1pdChlKTtcclxuICB9XHJcbn1cclxuIiwiPGVjYWJzLWVsZW1lbnQtd3JhcHBlciBbZGF0YV09XCJnZXREYXRhKClcIj5cclxuICA8ZGl2IGNsYXNzPVwiZm9ybS1maWVsZF9faW5wdXQtLXdyYXBwZXJcIj5cclxuICAgIDxpbnB1dCAjbWF0Q3VzdG9tSW5wdXRcclxuICAgICAgICAgICBlY2Fic0RpZ2l0c09ubHlcclxuICAgICAgICAgICBbbmdDbGFzc109XCJkaXNhYmxlZCA/ICdmb3JtLWZpZWxkX19pbnB1dC0tZGlzYWJsZWQnIDogbnVsbFwiXHJcbiAgICAgICAgICAgW2RpZ2l0c09ubHldPVwiZGlnaXRzT25seVwiXHJcbiAgICAgICAgICAgW2RlY2ltYWxdPVwiYWxsb3dEZWNpbWFsXCJcclxuICAgICAgICAgICBbYWxsb3dIeXBoZW5dPVwiYWxsb3dIeXBoZW5cIlxyXG4gICAgICAgICAgIFthbGxvd1JhbmdlXT1cImFsbG93UmFuZ2VcIlxyXG4gICAgICAgICAgIGNsYXNzPVwiZm9ybS1maWVsZF9faW5wdXRcIlxyXG4gICAgICAgICAgIFt0eXBlXT1cInR5cGVcIlxyXG4gICAgICAgICAgIFtpZF09XCJuYW1lXCJcclxuICAgICAgICAgICBbKG5nTW9kZWwpXT1cInZhbHVlXCJcclxuICAgICAgICAgICBbcGxhY2Vob2xkZXJdPVwicGxhY2Vob2xkZXJcIlxyXG4gICAgICAgICAgIChibHVyKT1cIm9uVG91Y2goKVwiXHJcbiAgICAgICAgICAgW21pbmldPVwibWluaVwiXHJcbiAgICAgICAgICAgW21heGldPVwibWF4aVwiXHJcbiAgICAgICAgICAgW2Rpc2FibGVkXT1cImRpc2FibGVkXCJcclxuICAgICAgICAgICBbbWF4bGVuZ3RoXT1cIm1heExlbmd0aFwiXHJcbiAgICAgICAgICAgW21heF09XCJtYXhcIlxyXG4gICAgICAgICAgIFtzdGVwXT1cInN0ZXBcIlxyXG4gICAgICAgICAgIChibHVyKT1cImJsdXJDaGFuZ2UoJGV2ZW50KVwiXHJcbiAgICAvPlxyXG5cclxuICAgIDxkaXYgY2xhc3M9XCJmb3JtLWZpZWxkX19pbnB1dC0tc3VmZml4XCIgKm5nSWY9XCJ0eXBlICE9PSAnbnVtYmVyJ1wiPlxyXG4gICAgICA8bmctY29udGVudCBzZWxlY3Q9XCJtYXQtaWNvblwiPjwvbmctY29udGVudD5cclxuICAgICAgPG5nLWNvbnRlbnQgc2VsZWN0PVwiLnN1ZmZpeFwiPjwvbmctY29udGVudD5cclxuICAgIDwvZGl2PlxyXG4gIDwvZGl2PlxyXG48L2VjYWJzLWVsZW1lbnQtd3JhcHBlcj5cclxuIl19
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZWNhYnMtaW5wdXQuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvZWNhYnMtY29tcG9uZW50cy9zcmMvbGliL2VjYWJzLWlucHV0L2VjYWJzLWlucHV0LmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2VjYWJzLWNvbXBvbmVudHMvc3JjL2xpYi9lY2Ficy1pbnB1dC9lY2Ficy1pbnB1dC5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBRUwsU0FBUyxFQUdULFlBQVksRUFDWixXQUFXLEVBRVgsS0FBSyxFQUVMLE1BQU0sRUFFTixTQUFTLEdBQ1YsTUFBTSxlQUFlLENBQUM7QUFDdkIsT0FBTyxFQUF1QixpQkFBaUIsRUFBRSxTQUFTLEdBQXNCLE1BQU0sZ0JBQWdCLENBQUM7QUFDdkcsT0FBTyx5QkFBeUIsTUFBTSxzQkFBc0IsQ0FBQztBQUM3RCxPQUFPLEVBQUMsa0JBQWtCLEVBQUMsTUFBTSw0QkFBNEIsQ0FBQztBQUM5RCxPQUFPLEVBQUMsNEJBQTRCLEVBQUMsTUFBTSw2QkFBNkIsQ0FBQzs7Ozs7OztBQWF6RSxNQUFNLE9BQU8sbUJBQ1gsU0FBUSx5QkFBeUI7SUFxRGQ7SUFDQTtJQUNBO0lBcERuQixjQUFjLENBQWE7SUFFM0IsZ0VBQWdFO0lBRWhFLFNBQVMsQ0FBMEI7SUFHbkMsVUFBVSxDQUFXO0lBR3JCLFlBQVksQ0FBVztJQUd2QixXQUFXLENBQVc7SUFHdEIsVUFBVSxDQUFXO0lBR3JCLFVBQVUsR0FBRyxLQUFLLENBQUM7SUFFVixHQUFHLENBQVU7SUFDYixJQUFJLENBQVU7SUFDZCxJQUFJLENBQVU7SUFDZCxJQUFJLENBQVU7SUFFYixNQUFNLEdBQUcsSUFBSSxZQUFZLEVBQU8sQ0FBQztJQUMzQyxHQUFHLENBQW1CO0lBRXRCLElBQ0ksU0FBUztRQUNYLE9BQU8sSUFBSSxDQUFDLFVBQVUsQ0FBQztJQUN6QixDQUFDO0lBRUQsSUFBSSxLQUFLO1FBQ1AsT0FBTyxJQUFJLENBQUMsR0FBRyxDQUFDO0lBQ2xCLENBQUM7SUFFRCxJQUFJLEtBQUssQ0FBQyxHQUFHO1FBQ1gsSUFBSSxHQUFHLEtBQUssU0FBUyxJQUFJLElBQUksQ0FBQyxHQUFHLEtBQUssR0FBRyxFQUFFO1lBQ3pDLElBQUksQ0FBQyxHQUFHLEdBQUcsR0FBRyxDQUFDO1lBQ2YsSUFBSSxDQUFDLFFBQVEsQ0FBQyxHQUFHLENBQUMsQ0FBQztZQUVuQixJQUFJLElBQUksQ0FBQyxPQUFPLEVBQUUsRUFBRSxPQUFPLEVBQUUsUUFBUSxLQUFLLE1BQU0sRUFBRTtnQkFDaEQsSUFBSSxDQUFDLE9BQU8sQ0FBQyxHQUFHLENBQUMsQ0FBQzthQUNuQjtTQUNGO0lBQ0gsQ0FBQztJQUVELFlBQ21CLFFBQWtCLEVBQ2xCLFVBQXNCLEVBQ3RCLFFBQW1CO1FBRXBDLEtBQUssRUFBRSxDQUFDO1FBSlMsYUFBUSxHQUFSLFFBQVEsQ0FBVTtRQUNsQixlQUFVLEdBQVYsVUFBVSxDQUFZO1FBQ3RCLGFBQVEsR0FBUixRQUFRLENBQVc7SUFHdEMsQ0FBQztJQUVELFFBQVE7UUFDTixJQUFJLElBQUksQ0FBQyxJQUFJLEtBQUssUUFBUSxFQUFFO1lBQzFCLElBQUksQ0FBQyxVQUFVLEdBQUcsSUFBSSxDQUFDO1NBQ3hCO0lBQ0gsQ0FBQztJQUVELGVBQWU7UUFDYixNQUFNLFNBQVMsR0FBYyxJQUFJLENBQUMsUUFBUSxDQUFDLEdBQUcsQ0FBQyxTQUFTLEVBQUUsSUFBSSxDQUFDLENBQUM7UUFDaEUsSUFBSSxTQUFTLEVBQUU7WUFDYixJQUFJLENBQUMsT0FBTyxHQUFHLFNBQVMsQ0FBQyxPQUE2QixDQUFDO1lBQ3ZELElBQUksQ0FBQyxPQUFPLENBQUMsYUFBYTtpQkFDdkIsSUFBSSxDQUFDLGtCQUFrQixDQUFDLElBQUksQ0FBQyxVQUFVLENBQUMsQ0FBQztpQkFDekMsU0FBUyxDQUFDLEdBQUcsRUFBRTtnQkFDZCxJQUFJLENBQUMsbUJBQW1CLEVBQUUsQ0FBQztZQUM3QixDQUFDLENBQUMsQ0FBQztTQUNOO1FBRUQsSUFBSSxDQUFDLG1CQUFtQixFQUFFLENBQUM7UUFDM0IsSUFBSSxDQUFDLGVBQWUsRUFBRSxDQUFDO0lBQ3pCLENBQUM7SUFFRCxRQUFRLEdBQVEsR0FBRyxFQUFFO0lBQ3JCLENBQUMsQ0FBQztJQUVGLE9BQU8sR0FBUSxHQUFHLEVBQUU7SUFDcEIsQ0FBQyxDQUFDO0lBRUYsVUFBVSxDQUFDLEtBQVU7UUFDbkIsSUFBSSxDQUFDLEtBQUssR0FBRyxLQUFLLENBQUM7UUFDbkIsSUFBSSxDQUFDLGVBQWUsRUFBRSxDQUFDO0lBQ3pCLENBQUM7SUFFRCxnQkFBZ0IsQ0FBQyxFQUFPO1FBQ3RCLElBQUksQ0FBQyxRQUFRLEdBQUcsRUFBRSxDQUFDO0lBQ3JCLENBQUM7SUFFRCxpQkFBaUIsQ0FBQyxFQUFPO1FBQ3ZCLElBQUksQ0FBQyxPQUFPLEdBQUcsRUFBRSxDQUFDO0lBQ3BCLENBQUM7SUFFRCxVQUFVLENBQUMsQ0FBTTtRQUNmLElBQUksQ0FBQyxNQUFNLENBQUMsSUFBSSxDQUFDLENBQUMsQ0FBQyxDQUFDO0lBQ3RCLENBQUM7SUFFRCxPQUFPO1FBQ0wsSUFBSSxDQUFDLHNCQUFzQixFQUFFLENBQUM7SUFDaEMsQ0FBQztJQUVPLGVBQWU7UUFDckIsSUFBSSxDQUFDLElBQUksQ0FBQyxVQUFVLEVBQUU7WUFDcEIsT0FBTztTQUNSO1FBRUQsVUFBVSxDQUFDLEdBQUcsRUFBRSxDQUFDLElBQUksQ0FBQyxzQkFBc0IsRUFBRSxDQUFDLENBQUM7SUFDbEQsQ0FBQztJQUVPLHNCQUFzQjtRQUM1QixNQUFNLEtBQUssR0FBRyxJQUFJLENBQUMsY0FBYyxFQUFFLGFBQWlDLENBQUM7UUFDckUsTUFBTSxLQUFLLEdBQUcsSUFBSSxDQUFDLFNBQVMsRUFBRSxhQUFhLENBQUM7UUFFNUMsSUFBSSxDQUFDLEtBQUssRUFBRTtZQUNWLE9BQU87U0FDUjtRQUVELElBQUksQ0FBQyxJQUFJLENBQUMsVUFBVSxJQUFJLENBQUMsS0FBSyxFQUFFO1lBQzlCLElBQUksQ0FBQyxRQUFRLENBQUMsV0FBVyxDQUFDLEtBQUssRUFBRSxPQUFPLENBQUMsQ0FBQztZQUUxQyxPQUFPO1NBQ1I7UUFFRCxLQUFLLENBQUMsV0FBVyxHQUFHLEtBQUssQ0FBQyxLQUFLLEVBQUUsTUFBTSxDQUFDLENBQUMsQ0FBQyxLQUFLLENBQUMsS0FBSyxDQUFDLENBQUMsQ0FBQyxJQUFJLENBQUMsV0FBVyxDQUFDO1FBRXpFLE1BQU0sVUFBVSxHQUFHLElBQUksQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLHFCQUFxQixFQUFFLENBQUMsS0FBSyxDQUFDLENBQUE7UUFDakUsTUFBTSxLQUFLLEdBQUcsVUFBVSxHQUFHLDRCQUE0QixDQUFDO1FBRXhELElBQUksQ0FBQyxRQUFRLENBQUMsUUFBUSxDQUFDLEtBQUssRUFBRSxPQUFPLEVBQUUsR0FBRyxLQUFLLElBQUksQ0FBQyxDQUFDO0lBQ3ZELENBQUM7d0dBeklVLG1CQUFtQjs0RkFBbkIsbUJBQW1CLHVWQVJuQjtZQUNUO2dCQUNFLE9BQU8sRUFBRSxpQkFBaUI7Z0JBQzFCLFdBQVcsRUFBRSxtQkFBbUI7Z0JBQ2hDLEtBQUssRUFBRSxJQUFJO2FBQ1o7U0FDRiw0UEM1QkgsMnlDQXVDQTs7NEZEVGEsbUJBQW1CO2tCQVgvQixTQUFTOytCQUNFLGFBQWEsYUFFWjt3QkFDVDs0QkFDRSxPQUFPLEVBQUUsaUJBQWlCOzRCQUMxQixXQUFXLHFCQUFxQjs0QkFDaEMsS0FBSyxFQUFFLElBQUk7eUJBQ1o7cUJBQ0Y7Z0pBTUQsY0FBYztzQkFEYixTQUFTO3VCQUFDLGdCQUFnQixFQUFFLEVBQUMsTUFBTSxFQUFFLEtBQUssRUFBQztnQkFLNUMsU0FBUztzQkFEUixTQUFTO3VCQUFDLFdBQVcsRUFBRSxFQUFDLE1BQU0sRUFBRSxLQUFLLEVBQUM7Z0JBSXZDLFVBQVU7c0JBRFQsS0FBSztnQkFJTixZQUFZO3NCQURYLEtBQUs7Z0JBSU4sV0FBVztzQkFEVixLQUFLO2dCQUlOLFVBQVU7c0JBRFQsS0FBSztnQkFJTixVQUFVO3NCQURULEtBQUs7Z0JBR0csR0FBRztzQkFBWCxLQUFLO2dCQUNHLElBQUk7c0JBQVosS0FBSztnQkFDRyxJQUFJO3NCQUFaLEtBQUs7Z0JBQ0csSUFBSTtzQkFBWixLQUFLO2dCQUVJLE1BQU07c0JBQWYsTUFBTTtnQkFJSCxTQUFTO3NCQURaLFdBQVc7dUJBQUMsMEJBQTBCIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcbiAgQWZ0ZXJWaWV3SW5pdCxcbiAgQ29tcG9uZW50LFxuICBEZXN0cm95UmVmLFxuICBFbGVtZW50UmVmLFxuICBFdmVudEVtaXR0ZXIsXG4gIEhvc3RCaW5kaW5nLFxuICBJbmplY3RvcixcbiAgSW5wdXQsXG4gIE9uSW5pdCxcbiAgT3V0cHV0LFxuICBSZW5kZXJlcjIsXG4gIFZpZXdDaGlsZCxcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQge0NvbnRyb2xWYWx1ZUFjY2Vzc29yLCBOR19WQUxVRV9BQ0NFU1NPUiwgTmdDb250cm9sLCBVbnR5cGVkRm9ybUNvbnRyb2wsfSBmcm9tICdAYW5ndWxhci9mb3Jtcyc7XG5pbXBvcnQgRWNhYnNFbGVtZW50QmFzZUNvbXBvbmVudCBmcm9tICcuLi9iYXNlL2VsZW1lbnQtYmFzZSc7XG5pbXBvcnQge3Rha2VVbnRpbERlc3Ryb3llZH0gZnJvbSAnQGFuZ3VsYXIvY29yZS9yeGpzLWludGVyb3AnO1xuaW1wb3J0IHtBVVRPX1JFU0laRV9TWU1CT0xfQlVGRkVSX1BYfSBmcm9tIFwiLi4vYmFzZS9jb25zdHMvaW5wdXQuY29uc3RzXCI7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ2VjYWJzLWlucHV0JyxcbiAgdGVtcGxhdGVVcmw6ICcuL2VjYWJzLWlucHV0LmNvbXBvbmVudC5odG1sJyxcbiAgcHJvdmlkZXJzOiBbXG4gICAge1xuICAgICAgcHJvdmlkZTogTkdfVkFMVUVfQUNDRVNTT1IsXG4gICAgICB1c2VFeGlzdGluZzogRWNhYnNJbnB1dENvbXBvbmVudCxcbiAgICAgIG11bHRpOiB0cnVlLFxuICAgIH0sXG4gIF0sXG59KVxuZXhwb3J0IGNsYXNzIEVjYWJzSW5wdXRDb21wb25lbnRcbiAgZXh0ZW5kcyBFY2Fic0VsZW1lbnRCYXNlQ29tcG9uZW50XG4gIGltcGxlbWVudHMgQ29udHJvbFZhbHVlQWNjZXNzb3IsIEFmdGVyVmlld0luaXQsIE9uSW5pdCB7XG4gIEBWaWV3Q2hpbGQoJ21hdEN1c3RvbUlucHV0Jywge3N0YXRpYzogZmFsc2V9KVxuICBtYXRDdXN0b21JbnB1dDogRWxlbWVudFJlZjtcblxuICAvLyBIaWRkZW4gbWlycm9yIHNwYW4gdXNlZCB0byBtZWFzdXJlIHRoZSB2YWx1ZSdzIHJlbmRlcmVkIHdpZHRoXG4gIEBWaWV3Q2hpbGQoJ2F1dG9TaXplcicsIHtzdGF0aWM6IGZhbHNlfSlcbiAgYXV0b1NpemVyOiBFbGVtZW50UmVmPEhUTUxFbGVtZW50PjtcblxuICBASW5wdXQoKVxuICBkaWdpdHNPbmx5ITogYm9vbGVhbjtcblxuICBASW5wdXQoKVxuICBhbGxvd0RlY2ltYWwhOiBib29sZWFuO1xuXG4gIEBJbnB1dCgpXG4gIGFsbG93SHlwaGVuITogYm9vbGVhbjtcblxuICBASW5wdXQoKVxuICBhbGxvd1JhbmdlITogYm9vbGVhbjtcblxuICBASW5wdXQoKVxuICBhdXRvUmVzaXplID0gZmFsc2U7XG5cbiAgQElucHV0KCkgbWF4ITogbnVtYmVyO1xuICBASW5wdXQoKSBtaW5pITogbnVtYmVyO1xuICBASW5wdXQoKSBtYXhpITogbnVtYmVyO1xuICBASW5wdXQoKSBzdGVwITogbnVtYmVyO1xuXG4gIEBPdXRwdXQoKSBvbmJsdXIgPSBuZXcgRXZlbnRFbWl0dGVyPGFueT4oKTtcbiAgdmFsITogc3RyaW5nIHwgbnVtYmVyO1xuXG4gIEBIb3N0QmluZGluZygnY2xhc3MuZWNhYnMtaW5wdXQtLWZsdWlkJylcbiAgZ2V0IGZsdWlkSG9zdCgpOiBib29sZWFuIHtcbiAgICByZXR1cm4gdGhpcy5hdXRvUmVzaXplO1xuICB9XG5cbiAgZ2V0IHZhbHVlKCk6IHN0cmluZyB8IG51bWJlciB7XG4gICAgcmV0dXJuIHRoaXMudmFsO1xuICB9XG5cbiAgc2V0IHZhbHVlKHZhbCkge1xuICAgIGlmICh2YWwgIT09IHVuZGVmaW5lZCAmJiB0aGlzLnZhbCAhPT0gdmFsKSB7XG4gICAgICB0aGlzLnZhbCA9IHZhbDtcbiAgICAgIHRoaXMub25DaGFuZ2UodmFsKTtcblxuICAgICAgaWYgKHRoaXMuZ2V0RGF0YSgpPy5jb250cm9sPy51cGRhdGVPbiAhPT0gJ2JsdXInKSB7XG4gICAgICAgIHRoaXMub25Ub3VjaCh2YWwpO1xuICAgICAgfVxuICAgIH1cbiAgfVxuXG4gIGNvbnN0cnVjdG9yKFxuICAgIHByaXZhdGUgcmVhZG9ubHkgaW5qZWN0b3I6IEluamVjdG9yLFxuICAgIHByaXZhdGUgcmVhZG9ubHkgZGVzdHJveVJlZjogRGVzdHJveVJlZixcbiAgICBwcml2YXRlIHJlYWRvbmx5IHJlbmRlcmVyOiBSZW5kZXJlcjIsXG4gICkge1xuICAgIHN1cGVyKCk7XG4gIH1cblxuICBuZ09uSW5pdCgpOiB2b2lkIHtcbiAgICBpZiAodGhpcy50eXBlID09PSAnbnVtYmVyJykge1xuICAgICAgdGhpcy5kaWdpdHNPbmx5ID0gdHJ1ZTtcbiAgICB9XG4gIH1cblxuICBuZ0FmdGVyVmlld0luaXQoKTogdm9pZCB7XG4gICAgY29uc3QgbmdDb250cm9sOiBOZ0NvbnRyb2wgPSB0aGlzLmluamVjdG9yLmdldChOZ0NvbnRyb2wsIG51bGwpO1xuICAgIGlmIChuZ0NvbnRyb2wpIHtcbiAgICAgIHRoaXMuY29udHJvbCA9IG5nQ29udHJvbC5jb250cm9sIGFzIFVudHlwZWRGb3JtQ29udHJvbDtcbiAgICAgIHRoaXMuY29udHJvbC5zdGF0dXNDaGFuZ2VzXG4gICAgICAgIC5waXBlKHRha2VVbnRpbERlc3Ryb3llZCh0aGlzLmRlc3Ryb3lSZWYpKVxuICAgICAgICAuc3Vic2NyaWJlKCgpID0+IHtcbiAgICAgICAgICB0aGlzLnVwZGF0ZURpc2FibGVkU3RhdGUoKTtcbiAgICAgICAgfSk7XG4gICAgfVxuXG4gICAgdGhpcy51cGRhdGVEaXNhYmxlZFN0YXRlKCk7XG4gICAgdGhpcy50cmFja0F1dG9SZXNpemUoKTtcbiAgfVxuXG4gIG9uQ2hhbmdlOiBhbnkgPSAoKSA9PiB7XG4gIH07XG5cbiAgb25Ub3VjaDogYW55ID0gKCkgPT4ge1xuICB9O1xuXG4gIHdyaXRlVmFsdWUodmFsdWU6IGFueSk6IHZvaWQge1xuICAgIHRoaXMudmFsdWUgPSB2YWx1ZTtcbiAgICB0aGlzLnRyYWNrQXV0b1Jlc2l6ZSgpO1xuICB9XG5cbiAgcmVnaXN0ZXJPbkNoYW5nZShmbjogYW55KTogdm9pZCB7XG4gICAgdGhpcy5vbkNoYW5nZSA9IGZuO1xuICB9XG5cbiAgcmVnaXN0ZXJPblRvdWNoZWQoZm46IGFueSk6IHZvaWQge1xuICAgIHRoaXMub25Ub3VjaCA9IGZuO1xuICB9XG5cbiAgYmx1ckNoYW5nZShlOiBhbnkpOiB2b2lkIHtcbiAgICB0aGlzLm9uYmx1ci5lbWl0KGUpO1xuICB9XG5cbiAgb25JbnB1dCgpOiB2b2lkIHtcbiAgICB0aGlzLm1lYXN1cmVBdXRvUmVzaXplV2lkdGgoKTtcbiAgfVxuXG4gIHByaXZhdGUgdHJhY2tBdXRvUmVzaXplKCk6IHZvaWQge1xuICAgIGlmICghdGhpcy5hdXRvUmVzaXplKSB7XG4gICAgICByZXR1cm47XG4gICAgfVxuXG4gICAgc2V0VGltZW91dCgoKSA9PiB0aGlzLm1lYXN1cmVBdXRvUmVzaXplV2lkdGgoKSk7XG4gIH1cblxuICBwcml2YXRlIG1lYXN1cmVBdXRvUmVzaXplV2lkdGgoKTogdm9pZCB7XG4gICAgY29uc3QgaW5wdXQgPSB0aGlzLm1hdEN1c3RvbUlucHV0Py5uYXRpdmVFbGVtZW50IGFzIEhUTUxJbnB1dEVsZW1lbnQ7XG4gICAgY29uc3Qgc2l6ZXIgPSB0aGlzLmF1dG9TaXplcj8ubmF0aXZlRWxlbWVudDtcblxuICAgIGlmICghaW5wdXQpIHtcbiAgICAgIHJldHVybjtcbiAgICB9XG5cbiAgICBpZiAoIXRoaXMuYXV0b1Jlc2l6ZSB8fCAhc2l6ZXIpIHtcbiAgICAgIHRoaXMucmVuZGVyZXIucmVtb3ZlU3R5bGUoaW5wdXQsICd3aWR0aCcpO1xuXG4gICAgICByZXR1cm47XG4gICAgfVxuXG4gICAgc2l6ZXIudGV4dENvbnRlbnQgPSBpbnB1dC52YWx1ZT8ubGVuZ3RoID8gaW5wdXQudmFsdWUgOiB0aGlzLnBsYWNlaG9sZGVyO1xuXG4gICAgY29uc3Qgc2l6ZXJXaWR0aCA9IE1hdGguY2VpbChzaXplci5nZXRCb3VuZGluZ0NsaWVudFJlY3QoKS53aWR0aClcbiAgICBjb25zdCB3aWR0aCA9IHNpemVyV2lkdGggKyBBVVRPX1JFU0laRV9TWU1CT0xfQlVGRkVSX1BYO1xuXG4gICAgdGhpcy5yZW5kZXJlci5zZXRTdHlsZShpbnB1dCwgJ3dpZHRoJywgYCR7d2lkdGh9cHhgKTtcbiAgfVxufVxuIiwiPGVjYWJzLWVsZW1lbnQtd3JhcHBlciBbZGF0YV09XCJnZXREYXRhKClcIj5cbiAgPGRpdiBjbGFzcz1cImZvcm0tZmllbGRfX2lucHV0LS13cmFwcGVyXCJcbiAgICAgICBbY2xhc3MuZm9ybS1maWVsZF9faW5wdXQtLXdyYXBwZXItLWZsdWlkXT1cImF1dG9SZXNpemVcIj5cbiAgICA8aW5wdXQgI21hdEN1c3RvbUlucHV0XG4gICAgICAgICAgIGVjYWJzRGlnaXRzT25seVxuICAgICAgICAgICBbbmdDbGFzc109XCJkaXNhYmxlZCA/ICdmb3JtLWZpZWxkX19pbnB1dC0tZGlzYWJsZWQnIDogbnVsbFwiXG4gICAgICAgICAgIFtkaWdpdHNPbmx5XT1cImRpZ2l0c09ubHlcIlxuICAgICAgICAgICBbZGVjaW1hbF09XCJhbGxvd0RlY2ltYWxcIlxuICAgICAgICAgICBbYWxsb3dIeXBoZW5dPVwiYWxsb3dIeXBoZW5cIlxuICAgICAgICAgICBbYWxsb3dSYW5nZV09XCJhbGxvd1JhbmdlXCJcbiAgICAgICAgICAgY2xhc3M9XCJmb3JtLWZpZWxkX19pbnB1dFwiXG4gICAgICAgICAgIFt0eXBlXT1cInR5cGVcIlxuICAgICAgICAgICBbaWRdPVwibmFtZVwiXG4gICAgICAgICAgIFsobmdNb2RlbCldPVwidmFsdWVcIlxuICAgICAgICAgICBbcGxhY2Vob2xkZXJdPVwicGxhY2Vob2xkZXJcIlxuICAgICAgICAgICAoYmx1cik9XCJvblRvdWNoKClcIlxuICAgICAgICAgICBbbWluaV09XCJtaW5pXCJcbiAgICAgICAgICAgW21heGldPVwibWF4aVwiXG4gICAgICAgICAgIFtkaXNhYmxlZF09XCJkaXNhYmxlZFwiXG4gICAgICAgICAgIFttYXhsZW5ndGhdPVwibWF4TGVuZ3RoXCJcbiAgICAgICAgICAgW21heF09XCJtYXhcIlxuICAgICAgICAgICBbc3RlcF09XCJzdGVwXCJcbiAgICAgICAgICAgKGlucHV0KT1cIm9uSW5wdXQoKVwiXG4gICAgICAgICAgIChibHVyKT1cImJsdXJDaGFuZ2UoJGV2ZW50KVwiXG4gICAgLz5cblxuICAgIDxzcGFuICpuZ0lmPVwiYXV0b1Jlc2l6ZVwiXG4gICAgICAgICAgI2F1dG9TaXplclxuICAgICAgICAgIGNsYXNzPVwiZm9ybS1maWVsZF9faW5wdXQtLXNpemVyXCJcbiAgICAgICAgICBhcmlhLWhpZGRlbj1cInRydWVcIj5cbiAgICA8L3NwYW4+XG5cbiAgICA8ZGl2ICpuZ0lmPVwidHlwZSAhPT0gJ251bWJlcicgfHwgYXV0b1Jlc2l6ZVwiXG4gICAgICAgICBjbGFzcz1cImZvcm0tZmllbGRfX2lucHV0LS1zdWZmaXhcIj5cbiAgICAgIDxuZy1jb250ZW50IHNlbGVjdD1cIm1hdC1pY29uXCI+PC9uZy1jb250ZW50PlxuICAgICAgPG5nLWNvbnRlbnQgc2VsZWN0PVwiLnN1ZmZpeFwiPjwvbmctY29udGVudD5cbiAgICA8L2Rpdj5cbiAgPC9kaXY+XG48L2VjYWJzLWVsZW1lbnQtd3JhcHBlcj5cbiJdfQ==

package/fesm2022/ecabs-components.mjs

@@ -491,6 +491,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Output
             }] } });
 
+const AUTO_RESIZE_SYMBOL_BUFFER_PX = 2;
+
 const errorMessages = [
     {
         type: 'required',
@@ -1154,17 +1156,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
 class EcabsInputComponent extends EcabsElementBaseComponent {
     injector;
     destroyRef;
+    renderer;
     matCustomInput;
+    // Hidden mirror span used to measure the value's rendered width
+    autoSizer;
     digitsOnly;
     allowDecimal;
     allowHyphen;
     allowRange;
+    autoResize = false;
     max;
     mini;
     maxi;
     step;
     onblur = new EventEmitter();
     val;
+    get fluidHost() {
+        return this.autoResize;
+    }
     get value() {
         return this.val;
     }
@@ -1177,10 +1186,11 @@ class EcabsInputComponent extends EcabsElementBaseComponent {
             }
         }
     }
-    constructor(injector, destroyRef) {
+    constructor(injector, destroyRef, renderer) {
         super();
         this.injector = injector;
         this.destroyRef = destroyRef;
+        this.renderer = renderer;
     }
     ngOnInit() {
         if (this.type === 'number') {
@@ -1198,11 +1208,15 @@ class EcabsInputComponent extends EcabsElementBaseComponent {
             });
         }
         this.updateDisabledState();
+        this.trackAutoResize();
     }
-    onChange = () => { };
-    onTouch = () => { };
+    onChange = () => {
+    };
+    onTouch = () => {
+    };
     writeValue(value) {
         this.value = value;
+        this.trackAutoResize();
     }
     registerOnChange(fn) {
         this.onChange = fn;
@@ -1213,14 +1227,38 @@ class EcabsInputComponent extends EcabsElementBaseComponent {
     blurChange(e) {
         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", allowRange: "allowRange", max: "max", mini: "mini", maxi: "maxi", step: "step" }, outputs: { onblur: "onblur" }, providers: [
+    onInput() {
+        this.measureAutoResizeWidth();
+    }
+    trackAutoResize() {
+        if (!this.autoResize) {
+            return;
+        }
+        setTimeout(() => this.measureAutoResizeWidth());
+    }
+    measureAutoResizeWidth() {
+        const input = this.matCustomInput?.nativeElement;
+        const sizer = this.autoSizer?.nativeElement;
+        if (!input) {
+            return;
+        }
+        if (!this.autoResize || !sizer) {
+            this.renderer.removeStyle(input, 'width');
+            return;
+        }
+        sizer.textContent = input.value?.length ? input.value : this.placeholder;
+        const sizerWidth = Math.ceil(sizer.getBoundingClientRect().width);
+        const width = sizerWidth + AUTO_RESIZE_SYMBOL_BUFFER_PX;
+        this.renderer.setStyle(input, 'width', `${width}px`);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsInputComponent, deps: [{ token: i0.Injector }, { token: i0.DestroyRef }, { token: i0.Renderer2 }], 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", allowRange: "allowRange", autoResize: "autoResize", max: "max", mini: "mini", maxi: "maxi", step: "step" }, outputs: { onblur: "onblur" }, host: { properties: { "class.ecabs-input--fluid": "this.fluidHost" } }, 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           [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"] }] });
+        ], viewQueries: [{ propertyName: "matCustomInput", first: true, predicate: ["matCustomInput"], descendants: true }, { propertyName: "autoSizer", first: true, predicate: ["autoSizer"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ecabs-element-wrapper [data]=\"getData()\">\n  <div class=\"form-field__input--wrapper\"\n       [class.form-field__input--wrapper--fluid]=\"autoResize\">\n    <input #matCustomInput\n           ecabsDigitsOnly\n           [ngClass]=\"disabled ? 'form-field__input--disabled' : null\"\n           [digitsOnly]=\"digitsOnly\"\n           [decimal]=\"allowDecimal\"\n           [allowHyphen]=\"allowHyphen\"\n           [allowRange]=\"allowRange\"\n           class=\"form-field__input\"\n           [type]=\"type\"\n           [id]=\"name\"\n           [(ngModel)]=\"value\"\n           [placeholder]=\"placeholder\"\n           (blur)=\"onTouch()\"\n           [mini]=\"mini\"\n           [maxi]=\"maxi\"\n           [disabled]=\"disabled\"\n           [maxlength]=\"maxLength\"\n           [max]=\"max\"\n           [step]=\"step\"\n           (input)=\"onInput()\"\n           (blur)=\"blurChange($event)\"\n    />\n\n    <span *ngIf=\"autoResize\"\n          #autoSizer\n          class=\"form-field__input--sizer\"\n          aria-hidden=\"true\">\n    </span>\n\n    <div *ngIf=\"type !== 'number' || autoResize\"\n         class=\"form-field__input--suffix\">\n      <ng-content select=\"mat-icon\"></ng-content>\n      <ng-content select=\".suffix\"></ng-content>\n    </div>\n  </div>\n</ecabs-element-wrapper>\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,
@@ -1230,10 +1268,13 @@ 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           [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: [{
+                    ], template: "<ecabs-element-wrapper [data]=\"getData()\">\n  <div class=\"form-field__input--wrapper\"\n       [class.form-field__input--wrapper--fluid]=\"autoResize\">\n    <input #matCustomInput\n           ecabsDigitsOnly\n           [ngClass]=\"disabled ? 'form-field__input--disabled' : null\"\n           [digitsOnly]=\"digitsOnly\"\n           [decimal]=\"allowDecimal\"\n           [allowHyphen]=\"allowHyphen\"\n           [allowRange]=\"allowRange\"\n           class=\"form-field__input\"\n           [type]=\"type\"\n           [id]=\"name\"\n           [(ngModel)]=\"value\"\n           [placeholder]=\"placeholder\"\n           (blur)=\"onTouch()\"\n           [mini]=\"mini\"\n           [maxi]=\"maxi\"\n           [disabled]=\"disabled\"\n           [maxlength]=\"maxLength\"\n           [max]=\"max\"\n           [step]=\"step\"\n           (input)=\"onInput()\"\n           (blur)=\"blurChange($event)\"\n    />\n\n    <span *ngIf=\"autoResize\"\n          #autoSizer\n          class=\"form-field__input--sizer\"\n          aria-hidden=\"true\">\n    </span>\n\n    <div *ngIf=\"type !== 'number' || autoResize\"\n         class=\"form-field__input--suffix\">\n      <ng-content select=\"mat-icon\"></ng-content>\n      <ng-content select=\".suffix\"></ng-content>\n    </div>\n  </div>\n</ecabs-element-wrapper>\n" }]
+        }], ctorParameters: function () { return [{ type: i0.Injector }, { type: i0.DestroyRef }, { type: i0.Renderer2 }]; }, propDecorators: { matCustomInput: [{
                 type: ViewChild,
                 args: ['matCustomInput', { static: false }]
+            }], autoSizer: [{
+                type: ViewChild,
+                args: ['autoSizer', { static: false }]
             }], digitsOnly: [{
                 type: Input
             }], allowDecimal: [{
@@ -1242,6 +1283,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], allowRange: [{
                 type: Input
+            }], autoResize: [{
+                type: Input
             }], max: [{
                 type: Input
             }], mini: [{
@@ -1252,6 +1295,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], onblur: [{
                 type: Output
+            }], fluidHost: [{
+                type: HostBinding,
+                args: ['class.ecabs-input--fluid']
             }] } });
 
 class EcabsHintModule {
@@ -2131,7 +2177,7 @@ class EcabsCheckboxToggleComponent extends EcabsElementBaseComponent {
                 useExisting: EcabsCheckboxToggleComponent,
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "matCheckbox", first: true, predicate: MatCheckbox, descendants: true }, { propertyName: "matSlideToggle", first: true, predicate: MatSlideToggle, descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ecabs-element-wrapper [data]=\"getData()\">\n  <ng-container [ngSwitch]=\"type\">\n    <mat-checkbox\n      (change)=\"change($event)\"\n      (click)=\"onClick($event)\"\n      (blur)=\"onBlur()\"\n      [checked]=\"checked\"\n      [indeterminate]=\"indeterminate\"\n      [disabled]=\"disabled\"\n      [(ngModel)]=\"value\"\n      [id]=\"name\"\n      [labelPosition]=\"labelPosition\"\n      [ngClass]=\"{ 'indeterminate': indeterminate }\"\n      *ngSwitchCase=\"'checkbox'\"\n    >\n      {{ text }}\n    </mat-checkbox>\n\n    <mat-slide-toggle\n      (change)=\"change($event)\"\n      [disabled]=\"disabled\"\n      [(ngModel)]=\"value\"\n      [labelPosition]=\"labelPosition\"\n      *ngSwitchCase=\"'toggle'\"\n      >{{ text }}</mat-slide-toggle\n    >\n  </ng-container>\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}.form-field__subscript--wrapper,form-field__subscript--wrapper,.form-field--required .form-field__label:after,form-field--required .form-field__label:after{position:absolute;content:\"\"}.form-field--required .form-field__label:after,form-field--required .form-field__label:after{content:\"*\"!important;margin-left:.2rem;margin-top:2px;color:var(--color-error)}.form-field,form-field{margin-bottom:1rem;position:relative}.form-field__label,form-field__label{font-size:12px;font-size:.75rem;display:inline-block;margin-bottom:.25rem;color:var(--color-gray-500);cursor:pointer}.form-field__label .icon,form-field__label .icon{font-size:16px;font-size:1rem;display:inline;vertical-align:middle;margin-left:.375rem}.form-field__label-note,form-field__label-note{font-size:14px;font-size:.875rem;display:inline-block;margin-bottom:.25rem;color:var(--color-gray-400);cursor:pointer}.form-field__input,form-field__input{font-size:16px;font-size:1rem;display:block;width:100%;padding:.5rem 1rem;border-radius:6px;border:1px solid var(--color-gray-300);color:var(--color-black);line-height:1.5}.form-field__input:focus,form-field__input:focus{border-color:var(--color-brand-dark)}.form-field__input:focus-visible,form-field__input:focus-visible{outline:none}.form-field__input--wrapper,form-field__input--wrapper{display:flex;position:relative;line-height:1}.form-field__input--suffix,.form-field__textarea--prefix,form-field__textarea--prefix,.form-field__input--prefix,form-field__input--prefix,form-field__input--suffix{position:absolute!important;top:50%;right:1rem;color:var(--color-gray-300);transform:translateY(-50%)}.form-field__input--suffix,.form-field__textarea--prefix,form-field__textarea--prefix,.form-field__input--prefix,form-field__input--prefix,.form-field__input--suffix i,.form-field__textarea--prefix i,form-field__textarea--prefix i,.form-field__input--prefix i,form-field__input--prefix i,.form-field__input--suffix .mat-icon,.form-field__textarea--prefix .mat-icon,form-field__textarea--prefix .mat-icon,.form-field__input--prefix .mat-icon,form-field__input--prefix .mat-icon,form-field__input--suffix,form-field__input--suffix i,form-field__input--suffix .mat-icon{font-size:18px;font-size:1.125rem;width:1.125rem;height:1.125rem}.form-field__input--prefix,form-field__input--prefix{right:unset;left:1rem}.form-field__input--disabled,form-field__input--disabled{background-color:var(--color-gray-100);opacity:.5;pointer-events:none}.form-field__input--invalid,form-field__input--invalid{border-color:var(--color-error);color:var(--color-error)}.form-field__textarea,form-field__textarea{font-size:16px;font-size:1rem;display:block;width:100%;padding:1rem;border-radius:6px;border:1px solid var(--color-gray-300);color:var(--color-black);line-height:1.5}.form-field__textarea:focus,form-field__textarea:focus{border-color:var(--color-brand-dark)}.form-field__textarea--wrapper,form-field__textarea--wrapper{display:flex;position:relative;line-height:1}.form-field__textarea--suffix,form-field__textarea--suffix{position:absolute!important;top:50%;right:1rem;color:var(--color-gray-100);transform:translateY(-50%)}.form-field__textarea--suffix,.form-field__textarea--suffix i,.form-field__textarea--suffix .mat-icon,form-field__textarea--suffix,form-field__textarea--suffix i,form-field__textarea--suffix .mat-icon{font-size:18px;font-size:1.125rem;width:1.125rem;height:1.125rem}.form-field__textarea--prefix,form-field__textarea--prefix{right:unset;left:1rem}.form-field__textarea--disabled,form-field__textarea--disabled{background-color:var(--color-gray-100);opacity:.5;pointer-events:none}.form-field__range,form-field__range{font-size:16px;font-size:1rem;display:block;width:100%;padding:.5rem 1rem;color:var(--color-black);line-height:1.5;border:none}.form-field__range:focus-visible,form-field__range:focus-visible{outline:none}.form-field__range--wrapper,form-field__range--wrapper{display:grid;grid-template-columns:1fr auto 1fr;border-radius:.5rem;border:1px solid var(--color-gray-300);align-items:center;line-height:1;background-color:var(--color-white)}.form-field__range--wrapper:focus-within,form-field__range--wrapper:focus-within{border-color:var(--color-brand-dark)}.form-field__range--suffix,.form-field__range--prefix,form-field__range--prefix,form-field__range--suffix{position:absolute!important;top:50%;right:1rem;color:var(--color-gray-100);transform:translateY(-50%)}.form-field__range--suffix,.form-field__range--prefix,form-field__range--prefix,.form-field__range--suffix i,.form-field__range--prefix i,form-field__range--prefix i,.form-field__range--suffix .mat-icon,.form-field__range--prefix .mat-icon,form-field__range--prefix .mat-icon,form-field__range--suffix,form-field__range--suffix i,form-field__range--suffix .mat-icon{font-size:18px;font-size:1.125rem;width:1.125rem;height:1.125rem}.form-field__range--prefix,form-field__range--prefix{right:unset;left:1rem}.form-field__range--disabled,form-field__range--disabled{background-color:var(--color-gray-100);opacity:.5;pointer-events:none}.form-field__range--invalid,form-field__range--invalid{border-color:var(--color-error)!important;color:var(--color-error)!important}.form-field--invalid,.form-field--invalid .form-field__input,.form-field--invalid .form-field__textarea,.form-field--invalid .form-field__range,form-field--invalid,form-field--invalid .form-field__input,form-field--invalid .form-field__textarea,form-field--invalid .form-field__range{color:var(--color-error);border-color:var(--color-error)}.form-field--invalid,.form-field--invalid .form-field__range--wrapper,form-field--invalid,form-field--invalid .form-field__range--wrapper{border-color:var(--color-error)}.form-field__validation,form-field__validation{font-size:12px;font-size:.75rem;padding-top:.5rem;color:var(--color-error)}.form-field__validation--item,form-field__validation--item{padding-bottom:.6rem}.form-field__validation--item:last-of-type,form-field__validation--item:last-of-type{padding-bottom:0}.form-field__subscript--wrapper,form-field__subscript--wrapper{margin-top:1.2rem}.form-field .spinner,form-field .spinner{position:absolute;right:.25rem;top:1.85rem}.form-field .hint,form-field .hint{font-size:10px;text-align:right;margin-right:1.0625rem;transform:translateY(-1rem);margin-bottom:-1rem}.form .mat-mdc-form-field-appearance-standard .mat-mdc-form-field-flex,form .mat-mdc-form-field-appearance-standard .mat-mdc-form-field-flex{padding-top:0}.form .mat-mdc-form-field-infix,form .mat-mdc-form-field-infix{border-top:0}.form .mat-mdc-form-field .mat-mdc-form-field-flex,form .mat-mdc-form-field .mat-mdc-form-field-flex{padding-top:0}.mat-mdc-form-field-type-mat-date-range-input .mat-mdc-form-field-infix{width:auto}.mat-mdc-text-field-wrapper{padding-bottom:0}:host::ng-deep .form-field{display:flex;margin:0}:host::ng-deep .mat-mdc-slide-toggle{margin-right:.96rem}:host::ng-deep .mat-mdc-slide-toggle .mdc-label{font-size:14px;font-size:.875rem}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: EcabsElementWrapperComponent, selector: "ecabs-element-wrapper", inputs: ["data", "showCloseIcon", "focusedFlag", "showPassword", "control"], outputs: ["showHidePassword", "clear", "increase", "decrease"] }, { kind: "component", type: i3$1.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: i4$3.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matSlideToggle"] }, { 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"] }] });
+        ], viewQueries: [{ propertyName: "matCheckbox", first: true, predicate: MatCheckbox, descendants: true }, { propertyName: "matSlideToggle", first: true, predicate: MatSlideToggle, descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ecabs-element-wrapper [data]=\"getData()\">\n  <ng-container [ngSwitch]=\"type\">\n    <mat-checkbox\n      (change)=\"change($event)\"\n      (click)=\"onClick($event)\"\n      (blur)=\"onBlur()\"\n      [checked]=\"checked\"\n      [indeterminate]=\"indeterminate\"\n      [disabled]=\"disabled\"\n      [(ngModel)]=\"value\"\n      [id]=\"name\"\n      [labelPosition]=\"labelPosition\"\n      [ngClass]=\"{ 'indeterminate': indeterminate }\"\n      *ngSwitchCase=\"'checkbox'\"\n    >\n      {{ text }}\n    </mat-checkbox>\n\n    <mat-slide-toggle\n      (change)=\"change($event)\"\n      [disabled]=\"disabled\"\n      [(ngModel)]=\"value\"\n      [labelPosition]=\"labelPosition\"\n      *ngSwitchCase=\"'toggle'\"\n      >{{ text }}</mat-slide-toggle\n    >\n  </ng-container>\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}.form-field__subscript--wrapper,form-field__subscript--wrapper,.form-field--required .form-field__label:after,form-field--required .form-field__label:after{position:absolute;content:\"\"}.form-field--required .form-field__label:after,form-field--required .form-field__label:after{content:\"*\"!important;margin-left:.2rem;margin-top:2px;color:var(--color-error)}.form-field,form-field{margin-bottom:1rem;position:relative}.form-field__label,form-field__label{font-size:12px;font-size:.75rem;display:inline-block;margin-bottom:.25rem;color:var(--color-gray-500);cursor:pointer}.form-field__label .icon,form-field__label .icon{font-size:16px;font-size:1rem;display:inline;vertical-align:middle;margin-left:.375rem}.form-field__label-note,form-field__label-note{font-size:14px;font-size:.875rem;display:inline-block;margin-bottom:.25rem;color:var(--color-gray-400);cursor:pointer}.form-field__input,form-field__input{font-size:16px;font-size:1rem;display:block;width:100%;padding:.5rem 1rem;border-radius:6px;border:1px solid var(--color-gray-300);color:var(--color-black);line-height:1.5}.form-field__input:focus,form-field__input:focus{border-color:var(--color-brand-dark)}.form-field__input:focus-visible,form-field__input:focus-visible{outline:none}.form-field__input--wrapper,form-field__input--wrapper{display:flex;position:relative;line-height:1}.form-field__input--wrapper--fluid,form-field__input--wrapper--fluid{width:-moz-fit-content;width:fit-content;max-width:100%;margin-left:auto;align-items:stretch;overflow:hidden;border:1px solid var(--color-gray-300);border-radius:6px;background-color:var(--color-white, #fff)}.form-field__input--wrapper--fluid:focus-within,form-field__input--wrapper--fluid:focus-within{border-color:var(--color-brand-dark)}.form-field__input--wrapper--fluid .form-field__input,form-field__input--wrapper--fluid .form-field__input{width:auto;min-width:0;flex:0 0 auto;box-sizing:border-box;border:0;border-radius:0;padding-right:0;text-align:right;background-color:transparent}.form-field__input--wrapper--fluid .form-field__input:focus,form-field__input--wrapper--fluid .form-field__input:focus{border-color:transparent}.form-field__input--wrapper--fluid .form-field__input--suffix,.form-field__input--wrapper--fluid .form-field__textarea--prefix,.form-field__input--wrapper--fluid form-field__textarea--prefix,.form-field__input--wrapper--fluid .form-field__input--prefix,.form-field__input--wrapper--fluid form-field__input--prefix,form-field__input--wrapper--fluid .form-field__input--suffix,form-field__input--wrapper--fluid .form-field__textarea--prefix,form-field__input--wrapper--fluid form-field__textarea--prefix,form-field__input--wrapper--fluid .form-field__input--prefix,form-field__input--wrapper--fluid form-field__input--prefix{position:static!important;top:auto;right:auto;flex:0 0 auto;display:inline-flex;align-items:center;transform:none;margin-left:.25rem;padding-right:1rem;white-space:nowrap;pointer-events:none}.form-field__input--wrapper--fluid .form-field__input--suffix,.form-field__input--wrapper--fluid .form-field__textarea--prefix,.form-field__input--wrapper--fluid form-field__textarea--prefix,.form-field__input--wrapper--fluid .form-field__input--prefix,.form-field__input--wrapper--fluid form-field__input--prefix,.form-field__input--wrapper--fluid .form-field__input--suffix i,.form-field__input--wrapper--fluid .form-field__textarea--prefix i,.form-field__input--wrapper--fluid form-field__textarea--prefix i,.form-field__input--wrapper--fluid .form-field__input--prefix i,.form-field__input--wrapper--fluid form-field__input--prefix i,.form-field__input--wrapper--fluid .form-field__input--suffix .mat-icon,.form-field__input--wrapper--fluid .form-field__textarea--prefix .mat-icon,.form-field__input--wrapper--fluid form-field__textarea--prefix .mat-icon,.form-field__input--wrapper--fluid .form-field__input--prefix .mat-icon,.form-field__input--wrapper--fluid form-field__input--prefix .mat-icon,form-field__input--wrapper--fluid .form-field__input--suffix,form-field__input--wrapper--fluid .form-field__textarea--prefix,form-field__input--wrapper--fluid form-field__textarea--prefix,form-field__input--wrapper--fluid .form-field__input--prefix,form-field__input--wrapper--fluid form-field__input--prefix,form-field__input--wrapper--fluid .form-field__input--suffix i,form-field__input--wrapper--fluid .form-field__textarea--prefix i,form-field__input--wrapper--fluid form-field__textarea--prefix i,form-field__input--wrapper--fluid .form-field__input--prefix i,form-field__input--wrapper--fluid form-field__input--prefix i,form-field__input--wrapper--fluid .form-field__input--suffix .mat-icon,form-field__input--wrapper--fluid .form-field__textarea--prefix .mat-icon,form-field__input--wrapper--fluid form-field__textarea--prefix .mat-icon,form-field__input--wrapper--fluid .form-field__input--prefix .mat-icon,form-field__input--wrapper--fluid form-field__input--prefix .mat-icon{font-size:16px;font-size:1rem;width:auto;height:auto}.form-field__input--sizer,form-field__input--sizer{font-size:16px;font-size:1rem;position:absolute;top:0;left:0;height:0;padding:0 0 0 1rem;border:0;box-sizing:border-box;overflow:hidden;visibility:hidden;pointer-events:none;white-space:pre;line-height:1.5}.form-field__input--suffix,.form-field__textarea--prefix,form-field__textarea--prefix,.form-field__input--prefix,form-field__input--prefix,form-field__input--suffix{position:absolute!important;top:50%;right:1rem;color:var(--color-gray-300);transform:translateY(-50%)}.form-field__input--suffix,.form-field__textarea--prefix,form-field__textarea--prefix,.form-field__input--prefix,form-field__input--prefix,.form-field__input--suffix i,.form-field__textarea--prefix i,form-field__textarea--prefix i,.form-field__input--prefix i,form-field__input--prefix i,.form-field__input--suffix .mat-icon,.form-field__textarea--prefix .mat-icon,form-field__textarea--prefix .mat-icon,.form-field__input--prefix .mat-icon,form-field__input--prefix .mat-icon,form-field__input--suffix,form-field__input--suffix i,form-field__input--suffix .mat-icon{font-size:18px;font-size:1.125rem;width:1.125rem;height:1.125rem}.form-field__input--prefix,form-field__input--prefix{right:unset;left:1rem}.form-field__input--disabled,form-field__input--disabled{background-color:var(--color-gray-100);opacity:.5;pointer-events:none}.form-field__input--invalid,form-field__input--invalid{border-color:var(--color-error);color:var(--color-error)}.form-field__textarea,form-field__textarea{font-size:16px;font-size:1rem;display:block;width:100%;padding:1rem;border-radius:6px;border:1px solid var(--color-gray-300);color:var(--color-black);line-height:1.5}.form-field__textarea:focus,form-field__textarea:focus{border-color:var(--color-brand-dark)}.form-field__textarea--wrapper,form-field__textarea--wrapper{display:flex;position:relative;line-height:1}.form-field__textarea--suffix,form-field__textarea--suffix{position:absolute!important;top:50%;right:1rem;color:var(--color-gray-100);transform:translateY(-50%)}.form-field__textarea--suffix,.form-field__textarea--suffix i,.form-field__textarea--suffix .mat-icon,form-field__textarea--suffix,form-field__textarea--suffix i,form-field__textarea--suffix .mat-icon{font-size:18px;font-size:1.125rem;width:1.125rem;height:1.125rem}.form-field__textarea--prefix,form-field__textarea--prefix{right:unset;left:1rem}.form-field__textarea--disabled,form-field__textarea--disabled{background-color:var(--color-gray-100);opacity:.5;pointer-events:none}.form-field__range,form-field__range{font-size:16px;font-size:1rem;display:block;width:100%;padding:.5rem 1rem;color:var(--color-black);line-height:1.5;border:none}.form-field__range:focus-visible,form-field__range:focus-visible{outline:none}.form-field__range--wrapper,form-field__range--wrapper{display:grid;grid-template-columns:1fr auto 1fr;border-radius:.5rem;border:1px solid var(--color-gray-300);align-items:center;line-height:1;background-color:var(--color-white)}.form-field__range--wrapper:focus-within,form-field__range--wrapper:focus-within{border-color:var(--color-brand-dark)}.form-field__range--suffix,.form-field__range--prefix,form-field__range--prefix,form-field__range--suffix{position:absolute!important;top:50%;right:1rem;color:var(--color-gray-100);transform:translateY(-50%)}.form-field__range--suffix,.form-field__range--prefix,form-field__range--prefix,.form-field__range--suffix i,.form-field__range--prefix i,form-field__range--prefix i,.form-field__range--suffix .mat-icon,.form-field__range--prefix .mat-icon,form-field__range--prefix .mat-icon,form-field__range--suffix,form-field__range--suffix i,form-field__range--suffix .mat-icon{font-size:18px;font-size:1.125rem;width:1.125rem;height:1.125rem}.form-field__range--prefix,form-field__range--prefix{right:unset;left:1rem}.form-field__range--disabled,form-field__range--disabled{background-color:var(--color-gray-100);opacity:.5;pointer-events:none}.form-field__range--invalid,form-field__range--invalid{border-color:var(--color-error)!important;color:var(--color-error)!important}.form-field--invalid,.form-field--invalid .form-field__input,.form-field--invalid .form-field__textarea,.form-field--invalid .form-field__range,form-field--invalid,form-field--invalid .form-field__input,form-field--invalid .form-field__textarea,form-field--invalid .form-field__range{color:var(--color-error);border-color:var(--color-error)}.form-field--invalid,.form-field--invalid .form-field__range--wrapper,form-field--invalid,form-field--invalid .form-field__range--wrapper{border-color:var(--color-error)}.form-field__validation,form-field__validation{font-size:12px;font-size:.75rem;padding-top:.5rem;color:var(--color-error)}.form-field__validation--item,form-field__validation--item{padding-bottom:.6rem}.form-field__validation--item:last-of-type,form-field__validation--item:last-of-type{padding-bottom:0}.form-field__subscript--wrapper,form-field__subscript--wrapper{margin-top:1.2rem}.form-field .spinner,form-field .spinner{position:absolute;right:.25rem;top:1.85rem}.form-field .hint,form-field .hint{font-size:10px;text-align:right;margin-right:1.0625rem;transform:translateY(-1rem);margin-bottom:-1rem}.form .mat-mdc-form-field-appearance-standard .mat-mdc-form-field-flex,form .mat-mdc-form-field-appearance-standard .mat-mdc-form-field-flex{padding-top:0}.form .mat-mdc-form-field-infix,form .mat-mdc-form-field-infix{border-top:0}.form .mat-mdc-form-field .mat-mdc-form-field-flex,form .mat-mdc-form-field .mat-mdc-form-field-flex{padding-top:0}.mat-mdc-form-field-type-mat-date-range-input .mat-mdc-form-field-infix{width:auto}.mat-mdc-text-field-wrapper{padding-bottom:0}:host::ng-deep .form-field{display:flex;margin:0}:host::ng-deep .mat-mdc-slide-toggle{margin-right:.96rem}:host::ng-deep .mat-mdc-slide-toggle .mdc-label{font-size:14px;font-size:.875rem}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: EcabsElementWrapperComponent, selector: "ecabs-element-wrapper", inputs: ["data", "showCloseIcon", "focusedFlag", "showPassword", "control"], outputs: ["showHidePassword", "clear", "increase", "decrease"] }, { kind: "component", type: i3$1.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: i4$3.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matSlideToggle"] }, { 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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsCheckboxToggleComponent, decorators: [{
             type: Component,
@@ -2141,7 +2187,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                             useExisting: EcabsCheckboxToggleComponent,
                             multi: true,
                         },
-                    ], template: "<ecabs-element-wrapper [data]=\"getData()\">\n  <ng-container [ngSwitch]=\"type\">\n    <mat-checkbox\n      (change)=\"change($event)\"\n      (click)=\"onClick($event)\"\n      (blur)=\"onBlur()\"\n      [checked]=\"checked\"\n      [indeterminate]=\"indeterminate\"\n      [disabled]=\"disabled\"\n      [(ngModel)]=\"value\"\n      [id]=\"name\"\n      [labelPosition]=\"labelPosition\"\n      [ngClass]=\"{ 'indeterminate': indeterminate }\"\n      *ngSwitchCase=\"'checkbox'\"\n    >\n      {{ text }}\n    </mat-checkbox>\n\n    <mat-slide-toggle\n      (change)=\"change($event)\"\n      [disabled]=\"disabled\"\n      [(ngModel)]=\"value\"\n      [labelPosition]=\"labelPosition\"\n      *ngSwitchCase=\"'toggle'\"\n      >{{ text }}</mat-slide-toggle\n    >\n  </ng-container>\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}.form-field__subscript--wrapper,form-field__subscript--wrapper,.form-field--required .form-field__label:after,form-field--required .form-field__label:after{position:absolute;content:\"\"}.form-field--required .form-field__label:after,form-field--required .form-field__label:after{content:\"*\"!important;margin-left:.2rem;margin-top:2px;color:var(--color-error)}.form-field,form-field{margin-bottom:1rem;position:relative}.form-field__label,form-field__label{font-size:12px;font-size:.75rem;display:inline-block;margin-bottom:.25rem;color:var(--color-gray-500);cursor:pointer}.form-field__label .icon,form-field__label .icon{font-size:16px;font-size:1rem;display:inline;vertical-align:middle;margin-left:.375rem}.form-field__label-note,form-field__label-note{font-size:14px;font-size:.875rem;display:inline-block;margin-bottom:.25rem;color:var(--color-gray-400);cursor:pointer}.form-field__input,form-field__input{font-size:16px;font-size:1rem;display:block;width:100%;padding:.5rem 1rem;border-radius:6px;border:1px solid var(--color-gray-300);color:var(--color-black);line-height:1.5}.form-field__input:focus,form-field__input:focus{border-color:var(--color-brand-dark)}.form-field__input:focus-visible,form-field__input:focus-visible{outline:none}.form-field__input--wrapper,form-field__input--wrapper{display:flex;position:relative;line-height:1}.form-field__input--suffix,.form-field__textarea--prefix,form-field__textarea--prefix,.form-field__input--prefix,form-field__input--prefix,form-field__input--suffix{position:absolute!important;top:50%;right:1rem;color:var(--color-gray-300);transform:translateY(-50%)}.form-field__input--suffix,.form-field__textarea--prefix,form-field__textarea--prefix,.form-field__input--prefix,form-field__input--prefix,.form-field__input--suffix i,.form-field__textarea--prefix i,form-field__textarea--prefix i,.form-field__input--prefix i,form-field__input--prefix i,.form-field__input--suffix .mat-icon,.form-field__textarea--prefix .mat-icon,form-field__textarea--prefix .mat-icon,.form-field__input--prefix .mat-icon,form-field__input--prefix .mat-icon,form-field__input--suffix,form-field__input--suffix i,form-field__input--suffix .mat-icon{font-size:18px;font-size:1.125rem;width:1.125rem;height:1.125rem}.form-field__input--prefix,form-field__input--prefix{right:unset;left:1rem}.form-field__input--disabled,form-field__input--disabled{background-color:var(--color-gray-100);opacity:.5;pointer-events:none}.form-field__input--invalid,form-field__input--invalid{border-color:var(--color-error);color:var(--color-error)}.form-field__textarea,form-field__textarea{font-size:16px;font-size:1rem;display:block;width:100%;padding:1rem;border-radius:6px;border:1px solid var(--color-gray-300);color:var(--color-black);line-height:1.5}.form-field__textarea:focus,form-field__textarea:focus{border-color:var(--color-brand-dark)}.form-field__textarea--wrapper,form-field__textarea--wrapper{display:flex;position:relative;line-height:1}.form-field__textarea--suffix,form-field__textarea--suffix{position:absolute!important;top:50%;right:1rem;color:var(--color-gray-100);transform:translateY(-50%)}.form-field__textarea--suffix,.form-field__textarea--suffix i,.form-field__textarea--suffix .mat-icon,form-field__textarea--suffix,form-field__textarea--suffix i,form-field__textarea--suffix .mat-icon{font-size:18px;font-size:1.125rem;width:1.125rem;height:1.125rem}.form-field__textarea--prefix,form-field__textarea--prefix{right:unset;left:1rem}.form-field__textarea--disabled,form-field__textarea--disabled{background-color:var(--color-gray-100);opacity:.5;pointer-events:none}.form-field__range,form-field__range{font-size:16px;font-size:1rem;display:block;width:100%;padding:.5rem 1rem;color:var(--color-black);line-height:1.5;border:none}.form-field__range:focus-visible,form-field__range:focus-visible{outline:none}.form-field__range--wrapper,form-field__range--wrapper{display:grid;grid-template-columns:1fr auto 1fr;border-radius:.5rem;border:1px solid var(--color-gray-300);align-items:center;line-height:1;background-color:var(--color-white)}.form-field__range--wrapper:focus-within,form-field__range--wrapper:focus-within{border-color:var(--color-brand-dark)}.form-field__range--suffix,.form-field__range--prefix,form-field__range--prefix,form-field__range--suffix{position:absolute!important;top:50%;right:1rem;color:var(--color-gray-100);transform:translateY(-50%)}.form-field__range--suffix,.form-field__range--prefix,form-field__range--prefix,.form-field__range--suffix i,.form-field__range--prefix i,form-field__range--prefix i,.form-field__range--suffix .mat-icon,.form-field__range--prefix .mat-icon,form-field__range--prefix .mat-icon,form-field__range--suffix,form-field__range--suffix i,form-field__range--suffix .mat-icon{font-size:18px;font-size:1.125rem;width:1.125rem;height:1.125rem}.form-field__range--prefix,form-field__range--prefix{right:unset;left:1rem}.form-field__range--disabled,form-field__range--disabled{background-color:var(--color-gray-100);opacity:.5;pointer-events:none}.form-field__range--invalid,form-field__range--invalid{border-color:var(--color-error)!important;color:var(--color-error)!important}.form-field--invalid,.form-field--invalid .form-field__input,.form-field--invalid .form-field__textarea,.form-field--invalid .form-field__range,form-field--invalid,form-field--invalid .form-field__input,form-field--invalid .form-field__textarea,form-field--invalid .form-field__range{color:var(--color-error);border-color:var(--color-error)}.form-field--invalid,.form-field--invalid .form-field__range--wrapper,form-field--invalid,form-field--invalid .form-field__range--wrapper{border-color:var(--color-error)}.form-field__validation,form-field__validation{font-size:12px;font-size:.75rem;padding-top:.5rem;color:var(--color-error)}.form-field__validation--item,form-field__validation--item{padding-bottom:.6rem}.form-field__validation--item:last-of-type,form-field__validation--item:last-of-type{padding-bottom:0}.form-field__subscript--wrapper,form-field__subscript--wrapper{margin-top:1.2rem}.form-field .spinner,form-field .spinner{position:absolute;right:.25rem;top:1.85rem}.form-field .hint,form-field .hint{font-size:10px;text-align:right;margin-right:1.0625rem;transform:translateY(-1rem);margin-bottom:-1rem}.form .mat-mdc-form-field-appearance-standard .mat-mdc-form-field-flex,form .mat-mdc-form-field-appearance-standard .mat-mdc-form-field-flex{padding-top:0}.form .mat-mdc-form-field-infix,form .mat-mdc-form-field-infix{border-top:0}.form .mat-mdc-form-field .mat-mdc-form-field-flex,form .mat-mdc-form-field .mat-mdc-form-field-flex{padding-top:0}.mat-mdc-form-field-type-mat-date-range-input .mat-mdc-form-field-infix{width:auto}.mat-mdc-text-field-wrapper{padding-bottom:0}:host::ng-deep .form-field{display:flex;margin:0}:host::ng-deep .mat-mdc-slide-toggle{margin-right:.96rem}:host::ng-deep .mat-mdc-slide-toggle .mdc-label{font-size:14px;font-size:.875rem}\n"] }]
+                    ], template: "<ecabs-element-wrapper [data]=\"getData()\">\n  <ng-container [ngSwitch]=\"type\">\n    <mat-checkbox\n      (change)=\"change($event)\"\n      (click)=\"onClick($event)\"\n      (blur)=\"onBlur()\"\n      [checked]=\"checked\"\n      [indeterminate]=\"indeterminate\"\n      [disabled]=\"disabled\"\n      [(ngModel)]=\"value\"\n      [id]=\"name\"\n      [labelPosition]=\"labelPosition\"\n      [ngClass]=\"{ 'indeterminate': indeterminate }\"\n      *ngSwitchCase=\"'checkbox'\"\n    >\n      {{ text }}\n    </mat-checkbox>\n\n    <mat-slide-toggle\n      (change)=\"change($event)\"\n      [disabled]=\"disabled\"\n      [(ngModel)]=\"value\"\n      [labelPosition]=\"labelPosition\"\n      *ngSwitchCase=\"'toggle'\"\n      >{{ text }}</mat-slide-toggle\n    >\n  </ng-container>\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}.form-field__subscript--wrapper,form-field__subscript--wrapper,.form-field--required .form-field__label:after,form-field--required .form-field__label:after{position:absolute;content:\"\"}.form-field--required .form-field__label:after,form-field--required .form-field__label:after{content:\"*\"!important;margin-left:.2rem;margin-top:2px;color:var(--color-error)}.form-field,form-field{margin-bottom:1rem;position:relative}.form-field__label,form-field__label{font-size:12px;font-size:.75rem;display:inline-block;margin-bottom:.25rem;color:var(--color-gray-500);cursor:pointer}.form-field__label .icon,form-field__label .icon{font-size:16px;font-size:1rem;display:inline;vertical-align:middle;margin-left:.375rem}.form-field__label-note,form-field__label-note{font-size:14px;font-size:.875rem;display:inline-block;margin-bottom:.25rem;color:var(--color-gray-400);cursor:pointer}.form-field__input,form-field__input{font-size:16px;font-size:1rem;display:block;width:100%;padding:.5rem 1rem;border-radius:6px;border:1px solid var(--color-gray-300);color:var(--color-black);line-height:1.5}.form-field__input:focus,form-field__input:focus{border-color:var(--color-brand-dark)}.form-field__input:focus-visible,form-field__input:focus-visible{outline:none}.form-field__input--wrapper,form-field__input--wrapper{display:flex;position:relative;line-height:1}.form-field__input--wrapper--fluid,form-field__input--wrapper--fluid{width:-moz-fit-content;width:fit-content;max-width:100%;margin-left:auto;align-items:stretch;overflow:hidden;border:1px solid var(--color-gray-300);border-radius:6px;background-color:var(--color-white, #fff)}.form-field__input--wrapper--fluid:focus-within,form-field__input--wrapper--fluid:focus-within{border-color:var(--color-brand-dark)}.form-field__input--wrapper--fluid .form-field__input,form-field__input--wrapper--fluid .form-field__input{width:auto;min-width:0;flex:0 0 auto;box-sizing:border-box;border:0;border-radius:0;padding-right:0;text-align:right;background-color:transparent}.form-field__input--wrapper--fluid .form-field__input:focus,form-field__input--wrapper--fluid .form-field__input:focus{border-color:transparent}.form-field__input--wrapper--fluid .form-field__input--suffix,.form-field__input--wrapper--fluid .form-field__textarea--prefix,.form-field__input--wrapper--fluid form-field__textarea--prefix,.form-field__input--wrapper--fluid .form-field__input--prefix,.form-field__input--wrapper--fluid form-field__input--prefix,form-field__input--wrapper--fluid .form-field__input--suffix,form-field__input--wrapper--fluid .form-field__textarea--prefix,form-field__input--wrapper--fluid form-field__textarea--prefix,form-field__input--wrapper--fluid .form-field__input--prefix,form-field__input--wrapper--fluid form-field__input--prefix{position:static!important;top:auto;right:auto;flex:0 0 auto;display:inline-flex;align-items:center;transform:none;margin-left:.25rem;padding-right:1rem;white-space:nowrap;pointer-events:none}.form-field__input--wrapper--fluid .form-field__input--suffix,.form-field__input--wrapper--fluid .form-field__textarea--prefix,.form-field__input--wrapper--fluid form-field__textarea--prefix,.form-field__input--wrapper--fluid .form-field__input--prefix,.form-field__input--wrapper--fluid form-field__input--prefix,.form-field__input--wrapper--fluid .form-field__input--suffix i,.form-field__input--wrapper--fluid .form-field__textarea--prefix i,.form-field__input--wrapper--fluid form-field__textarea--prefix i,.form-field__input--wrapper--fluid .form-field__input--prefix i,.form-field__input--wrapper--fluid form-field__input--prefix i,.form-field__input--wrapper--fluid .form-field__input--suffix .mat-icon,.form-field__input--wrapper--fluid .form-field__textarea--prefix .mat-icon,.form-field__input--wrapper--fluid form-field__textarea--prefix .mat-icon,.form-field__input--wrapper--fluid .form-field__input--prefix .mat-icon,.form-field__input--wrapper--fluid form-field__input--prefix .mat-icon,form-field__input--wrapper--fluid .form-field__input--suffix,form-field__input--wrapper--fluid .form-field__textarea--prefix,form-field__input--wrapper--fluid form-field__textarea--prefix,form-field__input--wrapper--fluid .form-field__input--prefix,form-field__input--wrapper--fluid form-field__input--prefix,form-field__input--wrapper--fluid .form-field__input--suffix i,form-field__input--wrapper--fluid .form-field__textarea--prefix i,form-field__input--wrapper--fluid form-field__textarea--prefix i,form-field__input--wrapper--fluid .form-field__input--prefix i,form-field__input--wrapper--fluid form-field__input--prefix i,form-field__input--wrapper--fluid .form-field__input--suffix .mat-icon,form-field__input--wrapper--fluid .form-field__textarea--prefix .mat-icon,form-field__input--wrapper--fluid form-field__textarea--prefix .mat-icon,form-field__input--wrapper--fluid .form-field__input--prefix .mat-icon,form-field__input--wrapper--fluid form-field__input--prefix .mat-icon{font-size:16px;font-size:1rem;width:auto;height:auto}.form-field__input--sizer,form-field__input--sizer{font-size:16px;font-size:1rem;position:absolute;top:0;left:0;height:0;padding:0 0 0 1rem;border:0;box-sizing:border-box;overflow:hidden;visibility:hidden;pointer-events:none;white-space:pre;line-height:1.5}.form-field__input--suffix,.form-field__textarea--prefix,form-field__textarea--prefix,.form-field__input--prefix,form-field__input--prefix,form-field__input--suffix{position:absolute!important;top:50%;right:1rem;color:var(--color-gray-300);transform:translateY(-50%)}.form-field__input--suffix,.form-field__textarea--prefix,form-field__textarea--prefix,.form-field__input--prefix,form-field__input--prefix,.form-field__input--suffix i,.form-field__textarea--prefix i,form-field__textarea--prefix i,.form-field__input--prefix i,form-field__input--prefix i,.form-field__input--suffix .mat-icon,.form-field__textarea--prefix .mat-icon,form-field__textarea--prefix .mat-icon,.form-field__input--prefix .mat-icon,form-field__input--prefix .mat-icon,form-field__input--suffix,form-field__input--suffix i,form-field__input--suffix .mat-icon{font-size:18px;font-size:1.125rem;width:1.125rem;height:1.125rem}.form-field__input--prefix,form-field__input--prefix{right:unset;left:1rem}.form-field__input--disabled,form-field__input--disabled{background-color:var(--color-gray-100);opacity:.5;pointer-events:none}.form-field__input--invalid,form-field__input--invalid{border-color:var(--color-error);color:var(--color-error)}.form-field__textarea,form-field__textarea{font-size:16px;font-size:1rem;display:block;width:100%;padding:1rem;border-radius:6px;border:1px solid var(--color-gray-300);color:var(--color-black);line-height:1.5}.form-field__textarea:focus,form-field__textarea:focus{border-color:var(--color-brand-dark)}.form-field__textarea--wrapper,form-field__textarea--wrapper{display:flex;position:relative;line-height:1}.form-field__textarea--suffix,form-field__textarea--suffix{position:absolute!important;top:50%;right:1rem;color:var(--color-gray-100);transform:translateY(-50%)}.form-field__textarea--suffix,.form-field__textarea--suffix i,.form-field__textarea--suffix .mat-icon,form-field__textarea--suffix,form-field__textarea--suffix i,form-field__textarea--suffix .mat-icon{font-size:18px;font-size:1.125rem;width:1.125rem;height:1.125rem}.form-field__textarea--prefix,form-field__textarea--prefix{right:unset;left:1rem}.form-field__textarea--disabled,form-field__textarea--disabled{background-color:var(--color-gray-100);opacity:.5;pointer-events:none}.form-field__range,form-field__range{font-size:16px;font-size:1rem;display:block;width:100%;padding:.5rem 1rem;color:var(--color-black);line-height:1.5;border:none}.form-field__range:focus-visible,form-field__range:focus-visible{outline:none}.form-field__range--wrapper,form-field__range--wrapper{display:grid;grid-template-columns:1fr auto 1fr;border-radius:.5rem;border:1px solid var(--color-gray-300);align-items:center;line-height:1;background-color:var(--color-white)}.form-field__range--wrapper:focus-within,form-field__range--wrapper:focus-within{border-color:var(--color-brand-dark)}.form-field__range--suffix,.form-field__range--prefix,form-field__range--prefix,form-field__range--suffix{position:absolute!important;top:50%;right:1rem;color:var(--color-gray-100);transform:translateY(-50%)}.form-field__range--suffix,.form-field__range--prefix,form-field__range--prefix,.form-field__range--suffix i,.form-field__range--prefix i,form-field__range--prefix i,.form-field__range--suffix .mat-icon,.form-field__range--prefix .mat-icon,form-field__range--prefix .mat-icon,form-field__range--suffix,form-field__range--suffix i,form-field__range--suffix .mat-icon{font-size:18px;font-size:1.125rem;width:1.125rem;height:1.125rem}.form-field__range--prefix,form-field__range--prefix{right:unset;left:1rem}.form-field__range--disabled,form-field__range--disabled{background-color:var(--color-gray-100);opacity:.5;pointer-events:none}.form-field__range--invalid,form-field__range--invalid{border-color:var(--color-error)!important;color:var(--color-error)!important}.form-field--invalid,.form-field--invalid .form-field__input,.form-field--invalid .form-field__textarea,.form-field--invalid .form-field__range,form-field--invalid,form-field--invalid .form-field__input,form-field--invalid .form-field__textarea,form-field--invalid .form-field__range{color:var(--color-error);border-color:var(--color-error)}.form-field--invalid,.form-field--invalid .form-field__range--wrapper,form-field--invalid,form-field--invalid .form-field__range--wrapper{border-color:var(--color-error)}.form-field__validation,form-field__validation{font-size:12px;font-size:.75rem;padding-top:.5rem;color:var(--color-error)}.form-field__validation--item,form-field__validation--item{padding-bottom:.6rem}.form-field__validation--item:last-of-type,form-field__validation--item:last-of-type{padding-bottom:0}.form-field__subscript--wrapper,form-field__subscript--wrapper{margin-top:1.2rem}.form-field .spinner,form-field .spinner{position:absolute;right:.25rem;top:1.85rem}.form-field .hint,form-field .hint{font-size:10px;text-align:right;margin-right:1.0625rem;transform:translateY(-1rem);margin-bottom:-1rem}.form .mat-mdc-form-field-appearance-standard .mat-mdc-form-field-flex,form .mat-mdc-form-field-appearance-standard .mat-mdc-form-field-flex{padding-top:0}.form .mat-mdc-form-field-infix,form .mat-mdc-form-field-infix{border-top:0}.form .mat-mdc-form-field .mat-mdc-form-field-flex,form .mat-mdc-form-field .mat-mdc-form-field-flex{padding-top:0}.mat-mdc-form-field-type-mat-date-range-input .mat-mdc-form-field-infix{width:auto}.mat-mdc-text-field-wrapper{padding-bottom:0}:host::ng-deep .form-field{display:flex;margin:0}:host::ng-deep .mat-mdc-slide-toggle{margin-right:.96rem}:host::ng-deep .mat-mdc-slide-toggle .mdc-label{font-size:14px;font-size:.875rem}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.Injector }, { type: i0.DestroyRef }]; }, propDecorators: { matCheckbox: [{
                 type: ViewChild,
                 args: [MatCheckbox, { static: false }]
@@ -8798,7 +8844,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", "allowRange", "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", "autoResize", "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,