master-control 0.4.39 → 0.4.41

package/esm2022/lib/textarea/textarea.component.mjs

@@ -44,7 +44,7 @@ export class TextareaComponent {
                 useExisting: TextareaComponent,
                 multi: true
             }
-        ], ngImport: i0, template: "@if(reactiveFormControlobject()) {\n<textarea\n[ngStyle]=\"{\n    '--custom-textarea-width': field()?.controlStyle?.width ,\n    '--custom-textarea-border-color': field()?.controlStyle?.borderColor ,\n    '--custom-textarea-border-width': field()?.controlStyle?.borderWidth ,\n    '--custom-textarea-border-color-focus': field()?.controlStyle?.focusBorderColor ,\n    '--custom-textarea-border-width-focus': field()?.controlStyle?.focusBorderColor ,\n    '--custom-textarea-radius': field()?.controlStyle?.borderRadius ,\n    '--custom-textarea-caret-color': field()?.controlStyle?.caretColor ,\n    '--custom-textarea-font-color': field()?.controlStyle?.color ,\n    }\"\n*ngIf=\"field() && field()?.isVisible\"\n  cols=\"40\"\n  rows=\"3\"\n  autocomplete=\"off\"\n  [name]=\"field()?.fieldName\"\n  [id]=\"field()?.fieldName\"\n  [placeholder]=\"field()?.placeHolder\"\n  [maxLength]=\"field()?.validators?.maxLength\"\n  [minLength]=\"field()?.validators?.minLength\"\n  [disabled]=\"field()?.isDisable\"\n  [required]=\"field()?.validators?.isRequired\"\n  (input)=\"onTextareaChange($event)\"\n  (blur)=\"onTextareaBlur($event)\"\n  [value]=\"textareaValue\"\n  [formControl]=\"reactiveFormControlobject()\"\n></textarea>\n}@else {\n<textarea\n[ngStyle]=\"{\n    '--custom-textarea-width': field()?.controlStyle?.width ,\n    '--custom-textarea-border-color': field()?.controlStyle?.borderColor ,\n    '--custom-textarea-border-width': field()?.controlStyle?.borderWidth ,\n    '--custom-textarea-border-color-focus': field()?.controlStyle?.focusBorderColor ,\n    '--custom-textarea-border-width-focus': field()?.controlStyle?.focusBorderColor ,\n    '--custom-textarea-radius': field()?.controlStyle?.borderRadius ,\n    '--custom-textarea-caret-color': field()?.controlStyle?.caretColor ,\n    '--custom-textarea-font-color': field()?.controlStyle?.color ,\n    }\"\n*ngIf=\"field() && field()?.isVisible\"\n  cols=\"40\"\n  rows=\"3\"\n  autocomplete=\"off\"\n  [name]=\"field()?.fieldName\"\n  [id]=\"field()?.fieldName\"\n  [placeholder]=\"field()?.placeHolder\"\n  [maxLength]=\"field()?.validators?.maxLength\"\n  [minLength]=\"field()?.validators?.minLength\"\n  [disabled]=\"field()?.isDisable\"\n  [required]=\"field()?.validators?.isRequired\"\n  (input)=\"onTextareaChange($event)\"\n  (blur)=\"onTextareaBlur($event)\"\n  [value]=\"textareaValue\"\n></textarea>\n}\n", styles: ["*{font-family:mulish!important}::ng-deep textarea{width:-webkit-fill-available!important;border:1.5px solid #dddddd!important;border-radius:4px!important;caret-color:#fb0!important;color:#444!important}::ng-deep textarea:focus{outline:none!important;border:1.5px solid #ffbb00!important}::ng-deep textarea:focus-visible{outline:none!important;border:1.5px solid #ffbb00!important}::ng-deep textarea{width:var(--custom-textarea-width, -webkit-fill-available)!important;border-radius:var(--custom-textarea-radius, 4px)!important;caret-color:var(--custom-textarea-caret-color, #ffbb00)!important;color:var(--custom-textarea-font-color, #444444)!important;border-color:var(--custom-textarea-border-color,#dddddd)!important;border-width:var(--custom-textarea-border-width, 1.5px solid)!important}::ng-deep textarea:focus{border-color:var(--custom-textarea-border-color-focus,#dddddd)!important;border-width:var(--custom-textarea-border-width-focus, 1.5px solid)!important}::ng-deep textarea:focus-visible{border-color:var(--custom-textarea-border-color-focus,#dddddd)!important;border-width:var(--custom-textarea-border-width-focus, 1.5px solid)!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { 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.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormsModule }] });
+        ], ngImport: i0, template: "\n<label\n  class=\"field-lable\"\n  *ngIf=\"field() && field()?.isVisible && field().isShowLabel\"\n  >{{ field()?.label\n  }}<span style=\"color: red\" *ngIf=\"field() && field()?.validators?.isRequired\"\n    >*</span\n  ></label\n>\n@if(reactiveFormControlobject()) {\n<textarea\n[ngStyle]=\"{\n    '--custom-textarea-width': field()?.controlStyle?.width ,\n    '--custom-textarea-border-color': field()?.controlStyle?.borderColor ,\n    '--custom-textarea-border-width': field()?.controlStyle?.borderWidth ,\n    '--custom-textarea-border-color-focus': field()?.controlStyle?.focusBorderColor ,\n    '--custom-textarea-border-width-focus': field()?.controlStyle?.focusBorderColor ,\n    '--custom-textarea-radius': field()?.controlStyle?.borderRadius ,\n    '--custom-textarea-caret-color': field()?.controlStyle?.caretColor ,\n    '--custom-textarea-font-color': field()?.controlStyle?.color ,\n    }\"\n*ngIf=\"field() && field()?.isVisible\"\n  cols=\"40\"\n  rows=\"3\"\n  autocomplete=\"off\"\n  [name]=\"field()?.fieldName\"\n  [id]=\"field()?.fieldName\"\n  [placeholder]=\"field()?.placeHolder\"\n  [maxLength]=\"field()?.validators?.maxLength\"\n  [minLength]=\"field()?.validators?.minLength\"\n  [disabled]=\"field()?.isDisable\"\n  [required]=\"field()?.validators?.isRequired\"\n  (input)=\"onTextareaChange($event)\"\n  (blur)=\"onTextareaBlur($event)\"\n  [value]=\"textareaValue\"\n  [formControl]=\"reactiveFormControlobject()\"\n></textarea>\n}@else {\n<textarea\n[ngStyle]=\"{\n    '--custom-textarea-width': field()?.controlStyle?.width ,\n    '--custom-textarea-border-color': field()?.controlStyle?.borderColor ,\n    '--custom-textarea-border-width': field()?.controlStyle?.borderWidth ,\n    '--custom-textarea-border-color-focus': field()?.controlStyle?.focusBorderColor ,\n    '--custom-textarea-border-width-focus': field()?.controlStyle?.focusBorderColor ,\n    '--custom-textarea-radius': field()?.controlStyle?.borderRadius ,\n    '--custom-textarea-caret-color': field()?.controlStyle?.caretColor ,\n    '--custom-textarea-font-color': field()?.controlStyle?.color ,\n    }\"\n*ngIf=\"field() && field()?.isVisible\"\n  cols=\"40\"\n  rows=\"3\"\n  autocomplete=\"off\"\n  [name]=\"field()?.fieldName\"\n  [id]=\"field()?.fieldName\"\n  [placeholder]=\"field()?.placeHolder\"\n  [maxLength]=\"field()?.validators?.maxLength\"\n  [minLength]=\"field()?.validators?.minLength\"\n  [disabled]=\"field()?.isDisable\"\n  [required]=\"field()?.validators?.isRequired\"\n  (input)=\"onTextareaChange($event)\"\n  (blur)=\"onTextareaBlur($event)\"\n  [value]=\"textareaValue\"\n></textarea>\n}\n", styles: [".field-lable{font-size:12px!important;font-weight:700!important;color:#444!important;margin-bottom:5px}*{font-family:mulish!important}::ng-deep textarea{width:-webkit-fill-available!important;border:1.5px solid #dddddd!important;border-radius:4px!important;caret-color:#fb0!important;color:#444!important}::ng-deep textarea:focus{outline:none!important;border:1.5px solid #ffbb00!important}::ng-deep textarea:focus-visible{outline:none!important;border:1.5px solid #ffbb00!important}::ng-deep textarea{width:var(--custom-textarea-width, -webkit-fill-available)!important;border-radius:var(--custom-textarea-radius, 4px)!important;caret-color:var(--custom-textarea-caret-color, #ffbb00)!important;color:var(--custom-textarea-font-color, #444444)!important;border-color:var(--custom-textarea-border-color,#dddddd)!important;border-width:var(--custom-textarea-border-width, 1.5px solid)!important}::ng-deep textarea:focus{border-color:var(--custom-textarea-border-color-focus,#dddddd)!important;border-width:var(--custom-textarea-border-width-focus, 1.5px solid)!important}::ng-deep textarea:focus-visible{border-color:var(--custom-textarea-border-color-focus,#dddddd)!important;border-width:var(--custom-textarea-border-width-focus, 1.5px solid)!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { 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.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormsModule }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TextareaComponent, decorators: [{
             type: Component,
@@ -58,8 +58,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                             useExisting: TextareaComponent,
                             multi: true
                         }
-                    ], template: "@if(reactiveFormControlobject()) {\n<textarea\n[ngStyle]=\"{\n    '--custom-textarea-width': field()?.controlStyle?.width ,\n    '--custom-textarea-border-color': field()?.controlStyle?.borderColor ,\n    '--custom-textarea-border-width': field()?.controlStyle?.borderWidth ,\n    '--custom-textarea-border-color-focus': field()?.controlStyle?.focusBorderColor ,\n    '--custom-textarea-border-width-focus': field()?.controlStyle?.focusBorderColor ,\n    '--custom-textarea-radius': field()?.controlStyle?.borderRadius ,\n    '--custom-textarea-caret-color': field()?.controlStyle?.caretColor ,\n    '--custom-textarea-font-color': field()?.controlStyle?.color ,\n    }\"\n*ngIf=\"field() && field()?.isVisible\"\n  cols=\"40\"\n  rows=\"3\"\n  autocomplete=\"off\"\n  [name]=\"field()?.fieldName\"\n  [id]=\"field()?.fieldName\"\n  [placeholder]=\"field()?.placeHolder\"\n  [maxLength]=\"field()?.validators?.maxLength\"\n  [minLength]=\"field()?.validators?.minLength\"\n  [disabled]=\"field()?.isDisable\"\n  [required]=\"field()?.validators?.isRequired\"\n  (input)=\"onTextareaChange($event)\"\n  (blur)=\"onTextareaBlur($event)\"\n  [value]=\"textareaValue\"\n  [formControl]=\"reactiveFormControlobject()\"\n></textarea>\n}@else {\n<textarea\n[ngStyle]=\"{\n    '--custom-textarea-width': field()?.controlStyle?.width ,\n    '--custom-textarea-border-color': field()?.controlStyle?.borderColor ,\n    '--custom-textarea-border-width': field()?.controlStyle?.borderWidth ,\n    '--custom-textarea-border-color-focus': field()?.controlStyle?.focusBorderColor ,\n    '--custom-textarea-border-width-focus': field()?.controlStyle?.focusBorderColor ,\n    '--custom-textarea-radius': field()?.controlStyle?.borderRadius ,\n    '--custom-textarea-caret-color': field()?.controlStyle?.caretColor ,\n    '--custom-textarea-font-color': field()?.controlStyle?.color ,\n    }\"\n*ngIf=\"field() && field()?.isVisible\"\n  cols=\"40\"\n  rows=\"3\"\n  autocomplete=\"off\"\n  [name]=\"field()?.fieldName\"\n  [id]=\"field()?.fieldName\"\n  [placeholder]=\"field()?.placeHolder\"\n  [maxLength]=\"field()?.validators?.maxLength\"\n  [minLength]=\"field()?.validators?.minLength\"\n  [disabled]=\"field()?.isDisable\"\n  [required]=\"field()?.validators?.isRequired\"\n  (input)=\"onTextareaChange($event)\"\n  (blur)=\"onTextareaBlur($event)\"\n  [value]=\"textareaValue\"\n></textarea>\n}\n", styles: ["*{font-family:mulish!important}::ng-deep textarea{width:-webkit-fill-available!important;border:1.5px solid #dddddd!important;border-radius:4px!important;caret-color:#fb0!important;color:#444!important}::ng-deep textarea:focus{outline:none!important;border:1.5px solid #ffbb00!important}::ng-deep textarea:focus-visible{outline:none!important;border:1.5px solid #ffbb00!important}::ng-deep textarea{width:var(--custom-textarea-width, -webkit-fill-available)!important;border-radius:var(--custom-textarea-radius, 4px)!important;caret-color:var(--custom-textarea-caret-color, #ffbb00)!important;color:var(--custom-textarea-font-color, #444444)!important;border-color:var(--custom-textarea-border-color,#dddddd)!important;border-width:var(--custom-textarea-border-width, 1.5px solid)!important}::ng-deep textarea:focus{border-color:var(--custom-textarea-border-color-focus,#dddddd)!important;border-width:var(--custom-textarea-border-width-focus, 1.5px solid)!important}::ng-deep textarea:focus-visible{border-color:var(--custom-textarea-border-color-focus,#dddddd)!important;border-width:var(--custom-textarea-border-width-focus, 1.5px solid)!important}\n"] }]
+                    ], template: "\n<label\n  class=\"field-lable\"\n  *ngIf=\"field() && field()?.isVisible && field().isShowLabel\"\n  >{{ field()?.label\n  }}<span style=\"color: red\" *ngIf=\"field() && field()?.validators?.isRequired\"\n    >*</span\n  ></label\n>\n@if(reactiveFormControlobject()) {\n<textarea\n[ngStyle]=\"{\n    '--custom-textarea-width': field()?.controlStyle?.width ,\n    '--custom-textarea-border-color': field()?.controlStyle?.borderColor ,\n    '--custom-textarea-border-width': field()?.controlStyle?.borderWidth ,\n    '--custom-textarea-border-color-focus': field()?.controlStyle?.focusBorderColor ,\n    '--custom-textarea-border-width-focus': field()?.controlStyle?.focusBorderColor ,\n    '--custom-textarea-radius': field()?.controlStyle?.borderRadius ,\n    '--custom-textarea-caret-color': field()?.controlStyle?.caretColor ,\n    '--custom-textarea-font-color': field()?.controlStyle?.color ,\n    }\"\n*ngIf=\"field() && field()?.isVisible\"\n  cols=\"40\"\n  rows=\"3\"\n  autocomplete=\"off\"\n  [name]=\"field()?.fieldName\"\n  [id]=\"field()?.fieldName\"\n  [placeholder]=\"field()?.placeHolder\"\n  [maxLength]=\"field()?.validators?.maxLength\"\n  [minLength]=\"field()?.validators?.minLength\"\n  [disabled]=\"field()?.isDisable\"\n  [required]=\"field()?.validators?.isRequired\"\n  (input)=\"onTextareaChange($event)\"\n  (blur)=\"onTextareaBlur($event)\"\n  [value]=\"textareaValue\"\n  [formControl]=\"reactiveFormControlobject()\"\n></textarea>\n}@else {\n<textarea\n[ngStyle]=\"{\n    '--custom-textarea-width': field()?.controlStyle?.width ,\n    '--custom-textarea-border-color': field()?.controlStyle?.borderColor ,\n    '--custom-textarea-border-width': field()?.controlStyle?.borderWidth ,\n    '--custom-textarea-border-color-focus': field()?.controlStyle?.focusBorderColor ,\n    '--custom-textarea-border-width-focus': field()?.controlStyle?.focusBorderColor ,\n    '--custom-textarea-radius': field()?.controlStyle?.borderRadius ,\n    '--custom-textarea-caret-color': field()?.controlStyle?.caretColor ,\n    '--custom-textarea-font-color': field()?.controlStyle?.color ,\n    }\"\n*ngIf=\"field() && field()?.isVisible\"\n  cols=\"40\"\n  rows=\"3\"\n  autocomplete=\"off\"\n  [name]=\"field()?.fieldName\"\n  [id]=\"field()?.fieldName\"\n  [placeholder]=\"field()?.placeHolder\"\n  [maxLength]=\"field()?.validators?.maxLength\"\n  [minLength]=\"field()?.validators?.minLength\"\n  [disabled]=\"field()?.isDisable\"\n  [required]=\"field()?.validators?.isRequired\"\n  (input)=\"onTextareaChange($event)\"\n  (blur)=\"onTextareaBlur($event)\"\n  [value]=\"textareaValue\"\n></textarea>\n}\n", styles: [".field-lable{font-size:12px!important;font-weight:700!important;color:#444!important;margin-bottom:5px}*{font-family:mulish!important}::ng-deep textarea{width:-webkit-fill-available!important;border:1.5px solid #dddddd!important;border-radius:4px!important;caret-color:#fb0!important;color:#444!important}::ng-deep textarea:focus{outline:none!important;border:1.5px solid #ffbb00!important}::ng-deep textarea:focus-visible{outline:none!important;border:1.5px solid #ffbb00!important}::ng-deep textarea{width:var(--custom-textarea-width, -webkit-fill-available)!important;border-radius:var(--custom-textarea-radius, 4px)!important;caret-color:var(--custom-textarea-caret-color, #ffbb00)!important;color:var(--custom-textarea-font-color, #444444)!important;border-color:var(--custom-textarea-border-color,#dddddd)!important;border-width:var(--custom-textarea-border-width, 1.5px solid)!important}::ng-deep textarea:focus{border-color:var(--custom-textarea-border-color-focus,#dddddd)!important;border-width:var(--custom-textarea-border-width-focus, 1.5px solid)!important}::ng-deep textarea:focus-visible{border-color:var(--custom-textarea-border-color-focus,#dddddd)!important;border-width:var(--custom-textarea-border-width-focus, 1.5px solid)!important}\n"] }]
         }], ctorParameters: () => [{ type: i1.MasterControlService }], propDecorators: { blur: [{
                 type: Output
             }] } });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGV4dGFyZWEuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbWFzdGVyLWNvbnRyb2wvc3JjL2xpYi90ZXh0YXJlYS90ZXh0YXJlYS5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9tYXN0ZXItY29udHJvbC9zcmMvbGliL3RleHRhcmVhL3RleHRhcmVhLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxZQUFZLEVBQUUsTUFBTSxpQkFBaUIsQ0FBQztBQUMvQyxPQUFPLEVBQUUsU0FBUyxFQUFFLEtBQUssRUFBRSxNQUFNLEVBQUUsWUFBWSxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBRXZFLE9BQU8sRUFBd0IsV0FBVyxFQUFFLGlCQUFpQixFQUFFLG1CQUFtQixFQUFFLE1BQU0sZ0JBQWdCLENBQUM7Ozs7O0FBb0IzRyxNQUFNLE9BQU8saUJBQWlCO0lBQ1Q7SUFBbkIsWUFBbUIsYUFBb0M7UUFBcEMsa0JBQWEsR0FBYixhQUFhLENBQXVCO0lBQUUsQ0FBQztJQUMxRCxLQUFLLEdBQVMsS0FBSyxDQUFDLFFBQVEsRUFBTyxDQUFDO0lBQ3BDLHlCQUF5QixHQUFTLEtBQUssRUFBTyxDQUFDO0lBRS9DLGtDQUFrQztJQUNsQyxhQUFhLEdBQVEsSUFBSSxDQUFDO0lBQzFCLFNBQVMsR0FBUSxDQUFDLGFBQWtCLEVBQUUsRUFBRSxHQUFFLENBQUMsQ0FBQztJQUM1QyxVQUFVLEdBQVEsR0FBRyxFQUFFLEdBQUUsQ0FBQyxDQUFDO0lBRTNCLGtEQUFrRDtJQUN4QyxJQUFJLEdBQUcsSUFBSSxZQUFZLEVBQU8sQ0FBQztJQUV6QyxzQ0FBc0M7SUFDdEMsVUFBVSxDQUFDLEdBQVE7UUFDakIsSUFBSSxDQUFDLGFBQWEsR0FBRyxHQUFHLENBQUM7SUFDM0IsQ0FBQztJQUVELGdCQUFnQixDQUFDLEVBQU87UUFDdEIsSUFBSSxDQUFDLFNBQVMsR0FBRyxFQUFFLENBQUM7SUFDdEIsQ0FBQztJQUVELGlCQUFpQixDQUFDLEVBQU87UUFDdkIsSUFBSSxDQUFDLFVBQVUsR0FBRyxFQUFFLENBQUM7SUFDdkIsQ0FBQztJQUVELGdCQUFnQixDQUFFLFVBQW1CLElBQVMsQ0FBQztJQUUvQyxnQkFBZ0IsQ0FBQyxLQUFVO1FBQ3pCLElBQUksQ0FBQyxhQUFhLEdBQUcsS0FBSyxDQUFDLE1BQU0sQ0FBQyxLQUFLLENBQUM7UUFDeEMsSUFBSSxDQUFDLFNBQVMsQ0FBQyxJQUFJLENBQUMsYUFBYSxDQUFDLENBQUM7SUFDckMsQ0FBQztJQUVELGNBQWMsQ0FBQyxLQUFXO1FBQ3hCLElBQUksQ0FBQyxVQUFVLEVBQUUsQ0FBQztRQUNsQixJQUFJLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsQ0FBQztJQUN4QixDQUFDO3dHQXBDVSxpQkFBaUI7NEZBQWpCLGlCQUFpQiw2WUFSakI7WUFDVDtnQkFDRSxPQUFPLEVBQUUsaUJBQWlCO2dCQUMxQixXQUFXLEVBQUUsaUJBQWlCO2dCQUM5QixLQUFLLEVBQUUsSUFBSTthQUNaO1NBQ0YsMEJDckJILG8xRUF3REEsMHJDRC9DSSxZQUFZLHVOQUNaLG1CQUFtQixzeUJBQ25CLFdBQVc7OzRGQVlGLGlCQUFpQjtrQkFsQjdCLFNBQVM7K0JBQ0UsY0FBYyxjQUNaLElBQUksV0FDUDt3QkFDUCxZQUFZO3dCQUNaLG1CQUFtQjt3QkFDbkIsV0FBVztxQkFDWixhQUdVO3dCQUNUOzRCQUNFLE9BQU8sRUFBRSxpQkFBaUI7NEJBQzFCLFdBQVcsbUJBQW1COzRCQUM5QixLQUFLLEVBQUUsSUFBSTt5QkFDWjtxQkFDRjt5RkFhUyxJQUFJO3NCQUFiLE1BQU0iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21tb25Nb2R1bGUgfSBmcm9tICdAYW5ndWxhci9jb21tb24nO1xuaW1wb3J0IHsgQ29tcG9uZW50LCBpbnB1dCwgT3V0cHV0LCBFdmVudEVtaXR0ZXIgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IE1hc3RlckNvbnRyb2xTZXJ2aWNlIH0gZnJvbSAnLi4vbWFzdGVyLWNvbnRyb2wuc2VydmljZSc7XG5pbXBvcnQgeyBDb250cm9sVmFsdWVBY2Nlc3NvciwgRm9ybXNNb2R1bGUsIE5HX1ZBTFVFX0FDQ0VTU09SLCBSZWFjdGl2ZUZvcm1zTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvZm9ybXMnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdsaWItdGV4dGFyZWEnLFxuICBzdGFuZGFsb25lOiB0cnVlLFxuICBpbXBvcnRzOiBbXG4gICAgQ29tbW9uTW9kdWxlLCBcbiAgICBSZWFjdGl2ZUZvcm1zTW9kdWxlLFxuICAgIEZvcm1zTW9kdWxlXG4gIF0sXG4gIHRlbXBsYXRlVXJsOiAnLi90ZXh0YXJlYS5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsOiAnLi90ZXh0YXJlYS5jb21wb25lbnQuY3NzJyxcbiAgcHJvdmlkZXJzOiBbXG4gICAge1xuICAgICAgcHJvdmlkZTogTkdfVkFMVUVfQUNDRVNTT1IsXG4gICAgICB1c2VFeGlzdGluZzogVGV4dGFyZWFDb21wb25lbnQsXG4gICAgICBtdWx0aTogdHJ1ZVxuICAgIH1cbiAgXVxufSlcbmV4cG9ydCBjbGFzcyBUZXh0YXJlYUNvbXBvbmVudCBpbXBsZW1lbnRzIENvbnRyb2xWYWx1ZUFjY2Vzc29yIHtcbiAgY29uc3RydWN0b3IocHVibGljIG1hc3RlclNlcnZpY2UgOiBNYXN0ZXJDb250cm9sU2VydmljZSl7fVxuICBmaWVsZCA6IGFueSA9IGlucHV0LnJlcXVpcmVkPGFueT4oKTtcbiAgcmVhY3RpdmVGb3JtQ29udHJvbG9iamVjdCA6IGFueSA9IGlucHV0PGFueT4oKTtcblxuICAvLyBDb250cm9sVmFsdWVBY2Nlc3NvciBwcm9wZXJ0aWVzXG4gIHRleHRhcmVhVmFsdWU6IGFueSA9IG51bGw7XG4gIF9vbkNoYW5nZTogYW55ID0gKHRleHRhcmVhVmFsdWU6IGFueSkgPT4ge307XG4gIF9vblRvdWNoZWQ6IGFueSA9ICgpID0+IHt9O1xuXG4gIC8vIERlY2xhcmUgT3V0cHV0IGV2ZW50IGVtaXR0ZXIgaGVyZSAoY2xhc3MgbGV2ZWwpXG4gIEBPdXRwdXQoKSBibHVyID0gbmV3IEV2ZW50RW1pdHRlcjxhbnk+KCk7XG5cbiAgLy8gQ29udHJvbFZhbHVlQWNjZXNzb3IgaW1wbGVtZW50YXRpb25cbiAgd3JpdGVWYWx1ZShvYmo6IGFueSk6IHZvaWQge1xuICAgIHRoaXMudGV4dGFyZWFWYWx1ZSA9IG9iajtcbiAgfVxuXG4gIHJlZ2lzdGVyT25DaGFuZ2UoZm46IGFueSk6IHZvaWQge1xuICAgIHRoaXMuX29uQ2hhbmdlID0gZm47XG4gIH1cblxuICByZWdpc3Rlck9uVG91Y2hlZChmbjogYW55KTogdm9pZCB7XG4gICAgdGhpcy5fb25Ub3VjaGVkID0gZm47XG4gIH1cblxuICBzZXREaXNhYmxlZFN0YXRlPyhpc0Rpc2FibGVkOiBib29sZWFuKTogdm9pZCB7fVxuXG4gIG9uVGV4dGFyZWFDaGFuZ2UoZXZlbnQ6IGFueSk6IHZvaWQge1xuICAgIHRoaXMudGV4dGFyZWFWYWx1ZSA9IGV2ZW50LnRhcmdldC52YWx1ZTtcbiAgICB0aGlzLl9vbkNoYW5nZSh0aGlzLnRleHRhcmVhVmFsdWUpO1xuICB9XG5cbiAgb25UZXh0YXJlYUJsdXIoZXZlbnQ/OiBhbnkpOiB2b2lkIHtcbiAgICB0aGlzLl9vblRvdWNoZWQoKTtcbiAgICB0aGlzLmJsdXIuZW1pdChldmVudCk7XG4gIH1cbn1cbiIsIkBpZihyZWFjdGl2ZUZvcm1Db250cm9sb2JqZWN0KCkpIHtcbjx0ZXh0YXJlYVxuW25nU3R5bGVdPVwie1xuICAgICctLWN1c3RvbS10ZXh0YXJlYS13aWR0aCc6IGZpZWxkKCk/LmNvbnRyb2xTdHlsZT8ud2lkdGggLFxuICAgICctLWN1c3RvbS10ZXh0YXJlYS1ib3JkZXItY29sb3InOiBmaWVsZCgpPy5jb250cm9sU3R5bGU/LmJvcmRlckNvbG9yICxcbiAgICAnLS1jdXN0b20tdGV4dGFyZWEtYm9yZGVyLXdpZHRoJzogZmllbGQoKT8uY29udHJvbFN0eWxlPy5ib3JkZXJXaWR0aCAsXG4gICAgJy0tY3VzdG9tLXRleHRhcmVhLWJvcmRlci1jb2xvci1mb2N1cyc6IGZpZWxkKCk/LmNvbnRyb2xTdHlsZT8uZm9jdXNCb3JkZXJDb2xvciAsXG4gICAgJy0tY3VzdG9tLXRleHRhcmVhLWJvcmRlci13aWR0aC1mb2N1cyc6IGZpZWxkKCk/LmNvbnRyb2xTdHlsZT8uZm9jdXNCb3JkZXJDb2xvciAsXG4gICAgJy0tY3VzdG9tLXRleHRhcmVhLXJhZGl1cyc6IGZpZWxkKCk/LmNvbnRyb2xTdHlsZT8uYm9yZGVyUmFkaXVzICxcbiAgICAnLS1jdXN0b20tdGV4dGFyZWEtY2FyZXQtY29sb3InOiBmaWVsZCgpPy5jb250cm9sU3R5bGU/LmNhcmV0Q29sb3IgLFxuICAgICctLWN1c3RvbS10ZXh0YXJlYS1mb250LWNvbG9yJzogZmllbGQoKT8uY29udHJvbFN0eWxlPy5jb2xvciAsXG4gICAgfVwiXG4qbmdJZj1cImZpZWxkKCkgJiYgZmllbGQoKT8uaXNWaXNpYmxlXCJcbiAgY29scz1cIjQwXCJcbiAgcm93cz1cIjNcIlxuICBhdXRvY29tcGxldGU9XCJvZmZcIlxuICBbbmFtZV09XCJmaWVsZCgpPy5maWVsZE5hbWVcIlxuICBbaWRdPVwiZmllbGQoKT8uZmllbGROYW1lXCJcbiAgW3BsYWNlaG9sZGVyXT1cImZpZWxkKCk/LnBsYWNlSG9sZGVyXCJcbiAgW21heExlbmd0aF09XCJmaWVsZCgpPy52YWxpZGF0b3JzPy5tYXhMZW5ndGhcIlxuICBbbWluTGVuZ3RoXT1cImZpZWxkKCk/LnZhbGlkYXRvcnM/Lm1pbkxlbmd0aFwiXG4gIFtkaXNhYmxlZF09XCJmaWVsZCgpPy5pc0Rpc2FibGVcIlxuICBbcmVxdWlyZWRdPVwiZmllbGQoKT8udmFsaWRhdG9ycz8uaXNSZXF1aXJlZFwiXG4gIChpbnB1dCk9XCJvblRleHRhcmVhQ2hhbmdlKCRldmVudClcIlxuICAoYmx1cik9XCJvblRleHRhcmVhQmx1cigkZXZlbnQpXCJcbiAgW3ZhbHVlXT1cInRleHRhcmVhVmFsdWVcIlxuICBbZm9ybUNvbnRyb2xdPVwicmVhY3RpdmVGb3JtQ29udHJvbG9iamVjdCgpXCJcbj48L3RleHRhcmVhPlxufUBlbHNlIHtcbjx0ZXh0YXJlYVxuW25nU3R5bGVdPVwie1xuICAgICctLWN1c3RvbS10ZXh0YXJlYS13aWR0aCc6IGZpZWxkKCk/LmNvbnRyb2xTdHlsZT8ud2lkdGggLFxuICAgICctLWN1c3RvbS10ZXh0YXJlYS1ib3JkZXItY29sb3InOiBmaWVsZCgpPy5jb250cm9sU3R5bGU/LmJvcmRlckNvbG9yICxcbiAgICAnLS1jdXN0b20tdGV4dGFyZWEtYm9yZGVyLXdpZHRoJzogZmllbGQoKT8uY29udHJvbFN0eWxlPy5ib3JkZXJXaWR0aCAsXG4gICAgJy0tY3VzdG9tLXRleHRhcmVhLWJvcmRlci1jb2xvci1mb2N1cyc6IGZpZWxkKCk/LmNvbnRyb2xTdHlsZT8uZm9jdXNCb3JkZXJDb2xvciAsXG4gICAgJy0tY3VzdG9tLXRleHRhcmVhLWJvcmRlci13aWR0aC1mb2N1cyc6IGZpZWxkKCk/LmNvbnRyb2xTdHlsZT8uZm9jdXNCb3JkZXJDb2xvciAsXG4gICAgJy0tY3VzdG9tLXRleHRhcmVhLXJhZGl1cyc6IGZpZWxkKCk/LmNvbnRyb2xTdHlsZT8uYm9yZGVyUmFkaXVzICxcbiAgICAnLS1jdXN0b20tdGV4dGFyZWEtY2FyZXQtY29sb3InOiBmaWVsZCgpPy5jb250cm9sU3R5bGU/LmNhcmV0Q29sb3IgLFxuICAgICctLWN1c3RvbS10ZXh0YXJlYS1mb250LWNvbG9yJzogZmllbGQoKT8uY29udHJvbFN0eWxlPy5jb2xvciAsXG4gICAgfVwiXG4qbmdJZj1cImZpZWxkKCkgJiYgZmllbGQoKT8uaXNWaXNpYmxlXCJcbiAgY29scz1cIjQwXCJcbiAgcm93cz1cIjNcIlxuICBhdXRvY29tcGxldGU9XCJvZmZcIlxuICBbbmFtZV09XCJmaWVsZCgpPy5maWVsZE5hbWVcIlxuICBbaWRdPVwiZmllbGQoKT8uZmllbGROYW1lXCJcbiAgW3BsYWNlaG9sZGVyXT1cImZpZWxkKCk/LnBsYWNlSG9sZGVyXCJcbiAgW21heExlbmd0aF09XCJmaWVsZCgpPy52YWxpZGF0b3JzPy5tYXhMZW5ndGhcIlxuICBbbWluTGVuZ3RoXT1cImZpZWxkKCk/LnZhbGlkYXRvcnM/Lm1pbkxlbmd0aFwiXG4gIFtkaXNhYmxlZF09XCJmaWVsZCgpPy5pc0Rpc2FibGVcIlxuICBbcmVxdWlyZWRdPVwiZmllbGQoKT8udmFsaWRhdG9ycz8uaXNSZXF1aXJlZFwiXG4gIChpbnB1dCk9XCJvblRleHRhcmVhQ2hhbmdlKCRldmVudClcIlxuICAoYmx1cik9XCJvblRleHRhcmVhQmx1cigkZXZlbnQpXCJcbiAgW3ZhbHVlXT1cInRleHRhcmVhVmFsdWVcIlxuPjwvdGV4dGFyZWE+XG59XG4iXX0=
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGV4dGFyZWEuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbWFzdGVyLWNvbnRyb2wvc3JjL2xpYi90ZXh0YXJlYS90ZXh0YXJlYS5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9tYXN0ZXItY29udHJvbC9zcmMvbGliL3RleHRhcmVhL3RleHRhcmVhLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxZQUFZLEVBQUUsTUFBTSxpQkFBaUIsQ0FBQztBQUMvQyxPQUFPLEVBQUUsU0FBUyxFQUFFLEtBQUssRUFBRSxNQUFNLEVBQUUsWUFBWSxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBRXZFLE9BQU8sRUFBd0IsV0FBVyxFQUFFLGlCQUFpQixFQUFFLG1CQUFtQixFQUFFLE1BQU0sZ0JBQWdCLENBQUM7Ozs7O0FBb0IzRyxNQUFNLE9BQU8saUJBQWlCO0lBQ1Q7SUFBbkIsWUFBbUIsYUFBb0M7UUFBcEMsa0JBQWEsR0FBYixhQUFhLENBQXVCO0lBQUUsQ0FBQztJQUMxRCxLQUFLLEdBQVMsS0FBSyxDQUFDLFFBQVEsRUFBTyxDQUFDO0lBQ3BDLHlCQUF5QixHQUFTLEtBQUssRUFBTyxDQUFDO0lBRS9DLGtDQUFrQztJQUNsQyxhQUFhLEdBQVEsSUFBSSxDQUFDO0lBQzFCLFNBQVMsR0FBUSxDQUFDLGFBQWtCLEVBQUUsRUFBRSxHQUFFLENBQUMsQ0FBQztJQUM1QyxVQUFVLEdBQVEsR0FBRyxFQUFFLEdBQUUsQ0FBQyxDQUFDO0lBRTNCLGtEQUFrRDtJQUN4QyxJQUFJLEdBQUcsSUFBSSxZQUFZLEVBQU8sQ0FBQztJQUV6QyxzQ0FBc0M7SUFDdEMsVUFBVSxDQUFDLEdBQVE7UUFDakIsSUFBSSxDQUFDLGFBQWEsR0FBRyxHQUFHLENBQUM7SUFDM0IsQ0FBQztJQUVELGdCQUFnQixDQUFDLEVBQU87UUFDdEIsSUFBSSxDQUFDLFNBQVMsR0FBRyxFQUFFLENBQUM7SUFDdEIsQ0FBQztJQUVELGlCQUFpQixDQUFDLEVBQU87UUFDdkIsSUFBSSxDQUFDLFVBQVUsR0FBRyxFQUFFLENBQUM7SUFDdkIsQ0FBQztJQUVELGdCQUFnQixDQUFFLFVBQW1CLElBQVMsQ0FBQztJQUUvQyxnQkFBZ0IsQ0FBQyxLQUFVO1FBQ3pCLElBQUksQ0FBQyxhQUFhLEdBQUcsS0FBSyxDQUFDLE1BQU0sQ0FBQyxLQUFLLENBQUM7UUFDeEMsSUFBSSxDQUFDLFNBQVMsQ0FBQyxJQUFJLENBQUMsYUFBYSxDQUFDLENBQUM7SUFDckMsQ0FBQztJQUVELGNBQWMsQ0FBQyxLQUFXO1FBQ3hCLElBQUksQ0FBQyxVQUFVLEVBQUUsQ0FBQztRQUNsQixJQUFJLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsQ0FBQztJQUN4QixDQUFDO3dHQXBDVSxpQkFBaUI7NEZBQWpCLGlCQUFpQiw2WUFSakI7WUFDVDtnQkFDRSxPQUFPLEVBQUUsaUJBQWlCO2dCQUMxQixXQUFXLEVBQUUsaUJBQWlCO2dCQUM5QixLQUFLLEVBQUUsSUFBSTthQUNaO1NBQ0YsMEJDckJILGlrRkFpRUEsaXlDRHhESSxZQUFZLHVOQUNaLG1CQUFtQixzeUJBQ25CLFdBQVc7OzRGQVlGLGlCQUFpQjtrQkFsQjdCLFNBQVM7K0JBQ0UsY0FBYyxjQUNaLElBQUksV0FDUDt3QkFDUCxZQUFZO3dCQUNaLG1CQUFtQjt3QkFDbkIsV0FBVztxQkFDWixhQUdVO3dCQUNUOzRCQUNFLE9BQU8sRUFBRSxpQkFBaUI7NEJBQzFCLFdBQVcsbUJBQW1COzRCQUM5QixLQUFLLEVBQUUsSUFBSTt5QkFDWjtxQkFDRjt5RkFhUyxJQUFJO3NCQUFiLE1BQU0iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21tb25Nb2R1bGUgfSBmcm9tICdAYW5ndWxhci9jb21tb24nO1xuaW1wb3J0IHsgQ29tcG9uZW50LCBpbnB1dCwgT3V0cHV0LCBFdmVudEVtaXR0ZXIgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IE1hc3RlckNvbnRyb2xTZXJ2aWNlIH0gZnJvbSAnLi4vbWFzdGVyLWNvbnRyb2wuc2VydmljZSc7XG5pbXBvcnQgeyBDb250cm9sVmFsdWVBY2Nlc3NvciwgRm9ybXNNb2R1bGUsIE5HX1ZBTFVFX0FDQ0VTU09SLCBSZWFjdGl2ZUZvcm1zTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvZm9ybXMnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdsaWItdGV4dGFyZWEnLFxuICBzdGFuZGFsb25lOiB0cnVlLFxuICBpbXBvcnRzOiBbXG4gICAgQ29tbW9uTW9kdWxlLCBcbiAgICBSZWFjdGl2ZUZvcm1zTW9kdWxlLFxuICAgIEZvcm1zTW9kdWxlXG4gIF0sXG4gIHRlbXBsYXRlVXJsOiAnLi90ZXh0YXJlYS5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsOiAnLi90ZXh0YXJlYS5jb21wb25lbnQuY3NzJyxcbiAgcHJvdmlkZXJzOiBbXG4gICAge1xuICAgICAgcHJvdmlkZTogTkdfVkFMVUVfQUNDRVNTT1IsXG4gICAgICB1c2VFeGlzdGluZzogVGV4dGFyZWFDb21wb25lbnQsXG4gICAgICBtdWx0aTogdHJ1ZVxuICAgIH1cbiAgXVxufSlcbmV4cG9ydCBjbGFzcyBUZXh0YXJlYUNvbXBvbmVudCBpbXBsZW1lbnRzIENvbnRyb2xWYWx1ZUFjY2Vzc29yIHtcbiAgY29uc3RydWN0b3IocHVibGljIG1hc3RlclNlcnZpY2UgOiBNYXN0ZXJDb250cm9sU2VydmljZSl7fVxuICBmaWVsZCA6IGFueSA9IGlucHV0LnJlcXVpcmVkPGFueT4oKTtcbiAgcmVhY3RpdmVGb3JtQ29udHJvbG9iamVjdCA6IGFueSA9IGlucHV0PGFueT4oKTtcblxuICAvLyBDb250cm9sVmFsdWVBY2Nlc3NvciBwcm9wZXJ0aWVzXG4gIHRleHRhcmVhVmFsdWU6IGFueSA9IG51bGw7XG4gIF9vbkNoYW5nZTogYW55ID0gKHRleHRhcmVhVmFsdWU6IGFueSkgPT4ge307XG4gIF9vblRvdWNoZWQ6IGFueSA9ICgpID0+IHt9O1xuXG4gIC8vIERlY2xhcmUgT3V0cHV0IGV2ZW50IGVtaXR0ZXIgaGVyZSAoY2xhc3MgbGV2ZWwpXG4gIEBPdXRwdXQoKSBibHVyID0gbmV3IEV2ZW50RW1pdHRlcjxhbnk+KCk7XG5cbiAgLy8gQ29udHJvbFZhbHVlQWNjZXNzb3IgaW1wbGVtZW50YXRpb25cbiAgd3JpdGVWYWx1ZShvYmo6IGFueSk6IHZvaWQge1xuICAgIHRoaXMudGV4dGFyZWFWYWx1ZSA9IG9iajtcbiAgfVxuXG4gIHJlZ2lzdGVyT25DaGFuZ2UoZm46IGFueSk6IHZvaWQge1xuICAgIHRoaXMuX29uQ2hhbmdlID0gZm47XG4gIH1cblxuICByZWdpc3Rlck9uVG91Y2hlZChmbjogYW55KTogdm9pZCB7XG4gICAgdGhpcy5fb25Ub3VjaGVkID0gZm47XG4gIH1cblxuICBzZXREaXNhYmxlZFN0YXRlPyhpc0Rpc2FibGVkOiBib29sZWFuKTogdm9pZCB7fVxuXG4gIG9uVGV4dGFyZWFDaGFuZ2UoZXZlbnQ6IGFueSk6IHZvaWQge1xuICAgIHRoaXMudGV4dGFyZWFWYWx1ZSA9IGV2ZW50LnRhcmdldC52YWx1ZTtcbiAgICB0aGlzLl9vbkNoYW5nZSh0aGlzLnRleHRhcmVhVmFsdWUpO1xuICB9XG5cbiAgb25UZXh0YXJlYUJsdXIoZXZlbnQ/OiBhbnkpOiB2b2lkIHtcbiAgICB0aGlzLl9vblRvdWNoZWQoKTtcbiAgICB0aGlzLmJsdXIuZW1pdChldmVudCk7XG4gIH1cbn1cbiIsIlxuPGxhYmVsXG4gIGNsYXNzPVwiZmllbGQtbGFibGVcIlxuICAqbmdJZj1cImZpZWxkKCkgJiYgZmllbGQoKT8uaXNWaXNpYmxlICYmIGZpZWxkKCkuaXNTaG93TGFiZWxcIlxuICA+e3sgZmllbGQoKT8ubGFiZWxcbiAgfX08c3BhbiBzdHlsZT1cImNvbG9yOiByZWRcIiAqbmdJZj1cImZpZWxkKCkgJiYgZmllbGQoKT8udmFsaWRhdG9ycz8uaXNSZXF1aXJlZFwiXG4gICAgPio8L3NwYW5cbiAgPjwvbGFiZWxcbj5cbkBpZihyZWFjdGl2ZUZvcm1Db250cm9sb2JqZWN0KCkpIHtcbjx0ZXh0YXJlYVxuW25nU3R5bGVdPVwie1xuICAgICctLWN1c3RvbS10ZXh0YXJlYS13aWR0aCc6IGZpZWxkKCk/LmNvbnRyb2xTdHlsZT8ud2lkdGggLFxuICAgICctLWN1c3RvbS10ZXh0YXJlYS1ib3JkZXItY29sb3InOiBmaWVsZCgpPy5jb250cm9sU3R5bGU/LmJvcmRlckNvbG9yICxcbiAgICAnLS1jdXN0b20tdGV4dGFyZWEtYm9yZGVyLXdpZHRoJzogZmllbGQoKT8uY29udHJvbFN0eWxlPy5ib3JkZXJXaWR0aCAsXG4gICAgJy0tY3VzdG9tLXRleHRhcmVhLWJvcmRlci1jb2xvci1mb2N1cyc6IGZpZWxkKCk/LmNvbnRyb2xTdHlsZT8uZm9jdXNCb3JkZXJDb2xvciAsXG4gICAgJy0tY3VzdG9tLXRleHRhcmVhLWJvcmRlci13aWR0aC1mb2N1cyc6IGZpZWxkKCk/LmNvbnRyb2xTdHlsZT8uZm9jdXNCb3JkZXJDb2xvciAsXG4gICAgJy0tY3VzdG9tLXRleHRhcmVhLXJhZGl1cyc6IGZpZWxkKCk/LmNvbnRyb2xTdHlsZT8uYm9yZGVyUmFkaXVzICxcbiAgICAnLS1jdXN0b20tdGV4dGFyZWEtY2FyZXQtY29sb3InOiBmaWVsZCgpPy5jb250cm9sU3R5bGU/LmNhcmV0Q29sb3IgLFxuICAgICctLWN1c3RvbS10ZXh0YXJlYS1mb250LWNvbG9yJzogZmllbGQoKT8uY29udHJvbFN0eWxlPy5jb2xvciAsXG4gICAgfVwiXG4qbmdJZj1cImZpZWxkKCkgJiYgZmllbGQoKT8uaXNWaXNpYmxlXCJcbiAgY29scz1cIjQwXCJcbiAgcm93cz1cIjNcIlxuICBhdXRvY29tcGxldGU9XCJvZmZcIlxuICBbbmFtZV09XCJmaWVsZCgpPy5maWVsZE5hbWVcIlxuICBbaWRdPVwiZmllbGQoKT8uZmllbGROYW1lXCJcbiAgW3BsYWNlaG9sZGVyXT1cImZpZWxkKCk/LnBsYWNlSG9sZGVyXCJcbiAgW21heExlbmd0aF09XCJmaWVsZCgpPy52YWxpZGF0b3JzPy5tYXhMZW5ndGhcIlxuICBbbWluTGVuZ3RoXT1cImZpZWxkKCk/LnZhbGlkYXRvcnM/Lm1pbkxlbmd0aFwiXG4gIFtkaXNhYmxlZF09XCJmaWVsZCgpPy5pc0Rpc2FibGVcIlxuICBbcmVxdWlyZWRdPVwiZmllbGQoKT8udmFsaWRhdG9ycz8uaXNSZXF1aXJlZFwiXG4gIChpbnB1dCk9XCJvblRleHRhcmVhQ2hhbmdlKCRldmVudClcIlxuICAoYmx1cik9XCJvblRleHRhcmVhQmx1cigkZXZlbnQpXCJcbiAgW3ZhbHVlXT1cInRleHRhcmVhVmFsdWVcIlxuICBbZm9ybUNvbnRyb2xdPVwicmVhY3RpdmVGb3JtQ29udHJvbG9iamVjdCgpXCJcbj48L3RleHRhcmVhPlxufUBlbHNlIHtcbjx0ZXh0YXJlYVxuW25nU3R5bGVdPVwie1xuICAgICctLWN1c3RvbS10ZXh0YXJlYS13aWR0aCc6IGZpZWxkKCk/LmNvbnRyb2xTdHlsZT8ud2lkdGggLFxuICAgICctLWN1c3RvbS10ZXh0YXJlYS1ib3JkZXItY29sb3InOiBmaWVsZCgpPy5jb250cm9sU3R5bGU/LmJvcmRlckNvbG9yICxcbiAgICAnLS1jdXN0b20tdGV4dGFyZWEtYm9yZGVyLXdpZHRoJzogZmllbGQoKT8uY29udHJvbFN0eWxlPy5ib3JkZXJXaWR0aCAsXG4gICAgJy0tY3VzdG9tLXRleHRhcmVhLWJvcmRlci1jb2xvci1mb2N1cyc6IGZpZWxkKCk/LmNvbnRyb2xTdHlsZT8uZm9jdXNCb3JkZXJDb2xvciAsXG4gICAgJy0tY3VzdG9tLXRleHRhcmVhLWJvcmRlci13aWR0aC1mb2N1cyc6IGZpZWxkKCk/LmNvbnRyb2xTdHlsZT8uZm9jdXNCb3JkZXJDb2xvciAsXG4gICAgJy0tY3VzdG9tLXRleHRhcmVhLXJhZGl1cyc6IGZpZWxkKCk/LmNvbnRyb2xTdHlsZT8uYm9yZGVyUmFkaXVzICxcbiAgICAnLS1jdXN0b20tdGV4dGFyZWEtY2FyZXQtY29sb3InOiBmaWVsZCgpPy5jb250cm9sU3R5bGU/LmNhcmV0Q29sb3IgLFxuICAgICctLWN1c3RvbS10ZXh0YXJlYS1mb250LWNvbG9yJzogZmllbGQoKT8uY29udHJvbFN0eWxlPy5jb2xvciAsXG4gICAgfVwiXG4qbmdJZj1cImZpZWxkKCkgJiYgZmllbGQoKT8uaXNWaXNpYmxlXCJcbiAgY29scz1cIjQwXCJcbiAgcm93cz1cIjNcIlxuICBhdXRvY29tcGxldGU9XCJvZmZcIlxuICBbbmFtZV09XCJmaWVsZCgpPy5maWVsZE5hbWVcIlxuICBbaWRdPVwiZmllbGQoKT8uZmllbGROYW1lXCJcbiAgW3BsYWNlaG9sZGVyXT1cImZpZWxkKCk/LnBsYWNlSG9sZGVyXCJcbiAgW21heExlbmd0aF09XCJmaWVsZCgpPy52YWxpZGF0b3JzPy5tYXhMZW5ndGhcIlxuICBbbWluTGVuZ3RoXT1cImZpZWxkKCk/LnZhbGlkYXRvcnM/Lm1pbkxlbmd0aFwiXG4gIFtkaXNhYmxlZF09XCJmaWVsZCgpPy5pc0Rpc2FibGVcIlxuICBbcmVxdWlyZWRdPVwiZmllbGQoKT8udmFsaWRhdG9ycz8uaXNSZXF1aXJlZFwiXG4gIChpbnB1dCk9XCJvblRleHRhcmVhQ2hhbmdlKCRldmVudClcIlxuICAoYmx1cik9XCJvblRleHRhcmVhQmx1cigkZXZlbnQpXCJcbiAgW3ZhbHVlXT1cInRleHRhcmVhVmFsdWVcIlxuPjwvdGV4dGFyZWE+XG59XG4iXX0=

package/fesm2022/master-control.mjs

@@ -1240,18 +1240,82 @@ class DobComponent {
     }
     dateDivisionFormat(event) {
         let evt = event.target;
-        if (evt.value.length > 2 && !evt.value.substr(2, 1).includes('-')) {
-            evt.value = [evt.value.slice(0, 2), '-', evt.value.slice(2)].join('');
+        // Check if user is deleting (backspace/delete)
+        const isDeleting = event.inputType === 'deleteContentBackward' ||
+            event.inputType === 'deleteContentForward' ||
+            !event.data;
+        // If deleting, allow normal deletion without auto-adding dashes
+        if (isDeleting) {
+            return;
         }
-        else if (evt.value.length > 5 &&
-            Number(evt.value.substr(3, 2)) &&
-            !evt.value.substr(5, 1).includes('-')) {
-            evt.value = [evt.value.slice(0, 5), '-', evt.value.slice(5)].join('');
+        let value = evt.value;
+        // Handle case where we have existing dashes but need to reformat
+        // Split by dash to understand current structure
+        const parts = value.split('-');
+        // If we have exactly 3 parts (date-month-year), don't add more dashes
+        if (parts.length < 3) {
+            // For first dash after date (2 digits)
+            if (value.length > 2 && !value.includes('-')) {
+                evt.value = [value.slice(0, 2), '-', value.slice(2)].join('');
+            }
+            // For second dash after month
+            else if (parts.length === 2) {
+                const datePart = parts[0];
+                const monthPart = parts[1];
+                // Add dash after numeric month (exactly 2 digits) or alphabetic month (exactly 3 letters)
+                if ((monthPart.length === 2 && /^\d{2}$/.test(monthPart)) ||
+                    (monthPart.length === 3 && /^[a-zA-Z]{3}$/.test(monthPart))) {
+                    evt.value = datePart + '-' + monthPart + '-';
+                }
+            }
         }
-        else if (evt.value.length > 6 &&
-            !Number(evt.value.substr(3, 2)) &&
-            !evt.value.substr(6, 1).includes('-')) {
-            evt.value = [evt.value.slice(0, 6), '-', evt.value.slice(6)].join('');
+        const datePart = parts[0] || '';
+        const monthPart = parts[1] || '';
+        const yearPart = parts[2] || '';
+        // Prevent further input if limits are reached and restore previous value
+        if ((datePart.length >= 2) ||
+            (monthPart.length >= 2 && /^\d+$/.test(monthPart)) ||
+            (monthPart.length >= 3 && /^[a-zA-Z]+$/.test(monthPart)) ||
+            (yearPart.length >= 4)) {
+            // Get cursor position to determine which part is being edited
+            const cursorPos = evt.selectionStart;
+            const isEditingDate = cursorPos <= 3;
+            const isEditingMonth = cursorPos > 3 && cursorPos <= (3 + monthPart.length);
+            const isEditingYear = cursorPos > (3 + monthPart.length + 1);
+            // Reconstruct the previous valid value by trimming excess characters
+            let previousValidValue = '';
+            if (isEditingDate && datePart.length >= 2) {
+                // Trim date part to 2 characters max
+                const validDatePart = datePart.substring(0, 2);
+                previousValidValue = validDatePart + (parts[1] ? '-' + parts[1] : '') + (parts[2] ? '-' + parts[2] : '');
+            }
+            else if (isEditingMonth && monthPart.length >= 2 && /^\d+$/.test(monthPart)) {
+                // Trim numeric month to 2 characters max
+                const validMonthPart = monthPart.substring(0, 2);
+                previousValidValue = parts[0] + '-' + validMonthPart + (parts[2] ? '-' + parts[2] : '');
+            }
+            else if (isEditingMonth && monthPart.length >= 3) {
+                // Trim alphabetic month to 3 characters max
+                const validMonthPart = monthPart.substring(0, 3);
+                previousValidValue = parts[0] + '-' + validMonthPart + (parts[2] ? '-' + parts[2] : '');
+            }
+            else if (isEditingYear && yearPart.length >= 4) {
+                // Trim year part to 4 characters max
+                const validYearPart = yearPart.substring(0, 4);
+                previousValidValue = parts[0] + '-' + parts[1] + '-' + validYearPart;
+            }
+            // Prevent input if trying to exceed limits by restoring previous value
+            if ((isEditingDate && datePart.length >= 2) ||
+                (isEditingMonth && monthPart.length >= 2 && /^\d+$/.test(monthPart)) ||
+                (isEditingMonth && monthPart.length >= 3) ||
+                (isEditingYear && yearPart.length >= 4)) {
+                // Restore the previous valid value
+                setTimeout(() => {
+                    evt.value = previousValidValue;
+                }, 0);
+                event.preventDefault();
+                return;
+            }
         }
     }
     _onChange = (inputValue) => { };
@@ -1312,7 +1376,7 @@ class DobComponent {
                 deps: []
             },
             { provide: MAT_DATE_FORMATS, useValue: MY_DATE_FORMAT }
-        ], ngImport: i0, template: "<label\n  *ngIf=\"field() && field()?.isVisible && field().isShowLabel\"\n  class=\"field-lable\"\n  >{{ field()?.label\n  }}<span style=\"color: red\" *ngIf=\"field() && field()?.validators?.isRequired\"\n    >*</span\n  ></label\n>\n<mat-form-field\n  class=\"w-100\"\n  appearance=\"outline\"\n  *ngIf=\"field() && field()?.isVisible\"\n  [ngStyle]=\"{\n    '--custom-border-color': field()?.controlStyle?.borderColor ,\n    '--custom-border-width': field()?.controlStyle?.borderWidth ,\n    '--custom-border-radius': field()?.controlStyle?.borderRadius ,\n    '--custom-border-color-focus': field()?.controlStyle?.focusBorderColor ,\n    '--custom-border-width-focus': field()?.controlStyle?.focusBorderWidth ,\n    '--custom-border-color-hover': field()?.controlStyle?.hoverBorderColor ,\n    '--custom-border-width-hover': field()?.controlStyle?.hoverBorderWidth ,\n    '--custom-border-color-error': field()?.controlStyle?.errorBorderColor ,\n    '--custom-border-width-error': field()?.controlStyle?.errorBorderWidth ,\n    '--custom-font-size': field()?.controlStyle?.fontSize ,\n    '--custom-font-weight': field()?.controlStyle?.fontWeight ,\n    '--custom-font-family': field()?.controlStyle?.fontFamily ,\n    '--custom-font-color': field()?.controlStyle?.color ,\n    '--custom-caret-color': field()?.controlStyle?.caretColor ,\n    '--custom-font-color-disabled' : field()?.controlStyle?.disableColor ,\n    '--custom-bg-color-disabled' : field()?.controlStyle?.disableBackground ,\n    '--custom-bg-color': field()?.controlStyle?.background ,\n     '--custom-bg-color-focus': field()?.controlStyle?.focusBackground ,\n    }\"\n>\n  @if(reactiveFormControlobject()) {\n  <input\n    matInput\n    autocomplete=\"off\"\n    type=\"text\"\n    [name]=\"field()?.fieldName\"\n    [id]=\"field()?.fieldName\"\n    [placeholder]=\"field()?.placeHolder || 'DD-MM-YYYY'\"\n    [required]=\"field()?.validators?.isRequired\"\n    [pattern]=\"field()?.validators?.pattern\"\n    [matDatepicker]=\"picker\"\n    (keyup)=\"dateDivisionFormat($event)\"\n    [min]=\"field()?.configData?.min\"\n    [max]=\"field()?.configData?.max\"\n    [disabled]=\"field()?.isDisable\"\n    (dateChange)=\"onDateChange($event)\"\n    (blur)=\"onInputBlur($event)\"\n    [value]=\"inputValue\"\n    [formControl]=\"reactiveFormControlobject()\"\n  />\n  }@else {\n  <input\n    matInput\n    autocomplete=\"off\"\n    type=\"text\"\n    [name]=\"field()?.fieldName\"\n    [id]=\"field()?.fieldName\"\n    [placeholder]=\"field()?.placeHolder\"\n    [required]=\"field()?.validators?.isRequired\"\n    [pattern]=\"field()?.validators?.pattern\"\n    [matDatepicker]=\"picker\"\n    (keyup)=\"dateDivisionFormat($event)\"\n    [min]=\"field()?.configData?.min\"\n    [max]=\"field()?.configData?.max\"\n    [disabled]=\"field()?.isDisable\"\n    (dateChange)=\"onDateChange($event)\"\n    (blur)=\"onInputBlur($event)\"\n    [value]=\"inputValue\"\n  />\n  }\n\n  <mat-datepicker-toggle matSuffix [for]=\"picker\">\n    <img\n      src=\"https://cdn.godigit.com/digitPlusAssets/retail-life-icon/svgicon/date_picker_icon.svg\"\n      style=\"width: 16px\"\n      matDatepickerToggleIcon\n    />\n  </mat-datepicker-toggle>\n  <mat-datepicker #picker></mat-datepicker>\n  <mat-error *ngIf=\"false\">\n    {{ field()?.validators?.isRequiredMessage }}\n  </mat-error>\n</mat-form-field>\n<div class=\"error-message\" *ngIf=\"false\">\n  {{ field()?.validators?.isRequiredMessage }}.\n</div>\n<div class=\"error-message\" *ngIf=\"field()?.configData?.isInvalid\">\n  {{ field()?.validators?.patternMessage }}.\n</div>\n", styles: [".field-lable{font-size:12px!important;font-weight:700!important;color:#444!important;margin-bottom:0!important}.error-message{color:red}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mat-mdc-notch-piece{border-color:var(--custom-border-color-focus, #ffbb00)!important;border-width:var(--custom-border-width-focus, 1.5px)!important}::ng-deep .mat-mdc-form-field{background-color:var(--custom-bg-color, #ffffff)!important;border-radius:var(--custom-border-radius , 4px)!important}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__leading{border-color:var(--custom-border-color-hover, #ffbb00)!important;border-width:var(--custom-border-width-hover, 1.5px)!important}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__notch{border-color:var(--custom-border-color-hover, #ffbb00)!important;border-width:var(--custom-border-width-hover, 1.5px)!important}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__trailing{border-color:var(--custom-border-color-hover, #ffbb00)!important;border-width:var(--custom-border-width-hover, 1.5px)!important}::ng-deep .mdc-text-field--outlined .mat-mdc-notch-piece{border-color:var(--custom-border-color, #dddddd)!important;border-width:var(--custom-border-width, 1.5px)!important}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-text-field__input{caret-color:var(--custom-caret-color, #ffbb00)!important;font-size:12px!important;font-weight:var(--custom-font-weight, 400)!important;font-family:var(--custom-font-family, \"Mulish\")!important;color:var(--custom-font-color, #444444)!important}::ng-deep .mat-form-field-invalid .mdc-text-field--outlined .mat-mdc-notch-piece{border-color:var(--custom-border-color-error, red)!important;border-width:var(--custom-border-width-error, 1.5px)!important}::ng-deep .mat-mdc-form-field.mat-form-field-disabled{background:var(--custom-bg-color-disabled, #ECECEC)!important}::ng-deep .mdc-text-field--outlined.mdc-text-field--disabled .mdc-text-field__input{color:var(--custom-font-color-disabled, #999999)!important}::ng-deep .mdc-label{color:var(--custom-font-color, #444)!important;font-size:var(--custom-font-size, 16px)!important;font-weight:var(--custom-font-weight, 400)!important;font-family:var(--custom-font-family, \"Mulish\")!important}::placeholder{color:#8f8f8f!important;font-size:12px!important}::ng-deep .mat-mdc-form-field-hint-wrapper{padding:0!important}::ng-deep .mat-mdc-form-field-error-wrapper{padding:0!important}::ng-deep .mat-mdc-form-field-error{color:#e00!important;font-size:12px;font-weight:500;font-family:Mulish!important;letter-spacing:0}::ng-deep .mdc-text-field--outlined{--mdc-outlined-text-field-container-shape: var(--custom-border-radius , 4px) !important}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--invalid .mat-mdc-notch-piece{border-color:var(--custom-border-color-error, red)!important;border-width:var(--custom-border-width-error, 1.5px)!important}::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none!important}*{font-family:mulish!important}::ng-deep .mat-calendar-period-button .mdc-button__label{display:flex;flex-direction:row-reverse;align-items:center;gap:10px}\n"], dependencies: [{ kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i5.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i5.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i5.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "directive", type: i5.MatDatepickerToggleIcon, selector: "[matDatepickerToggleIcon]" }, { kind: "ngmodule", type: MomentDateModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i4.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: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
+        ], ngImport: i0, template: "<label *ngIf=\"field() && field()?.isVisible && field().isShowLabel\" class=\"field-lable\">{{ field()?.label\n  }}<span style=\"color: red\" *ngIf=\"field() && field()?.validators?.isRequired\">*</span></label>\n<mat-form-field class=\"w-100\" appearance=\"outline\" *ngIf=\"field() && field()?.isVisible\" [ngStyle]=\"{\n    '--custom-border-color': field()?.controlStyle?.borderColor ,\n    '--custom-border-width': field()?.controlStyle?.borderWidth ,\n    '--custom-border-radius': field()?.controlStyle?.borderRadius ,\n    '--custom-border-color-focus': field()?.controlStyle?.focusBorderColor ,\n    '--custom-border-width-focus': field()?.controlStyle?.focusBorderWidth ,\n    '--custom-border-color-hover': field()?.controlStyle?.hoverBorderColor ,\n    '--custom-border-width-hover': field()?.controlStyle?.hoverBorderWidth ,\n    '--custom-border-color-error': field()?.controlStyle?.errorBorderColor ,\n    '--custom-border-width-error': field()?.controlStyle?.errorBorderWidth ,\n    '--custom-font-size': field()?.controlStyle?.fontSize ,\n    '--custom-font-weight': field()?.controlStyle?.fontWeight ,\n    '--custom-font-family': field()?.controlStyle?.fontFamily ,\n    '--custom-font-color': field()?.controlStyle?.color ,\n    '--custom-caret-color': field()?.controlStyle?.caretColor ,\n    '--custom-font-color-disabled' : field()?.controlStyle?.disableColor ,\n    '--custom-bg-color-disabled' : field()?.controlStyle?.disableBackground ,\n    '--custom-bg-color': field()?.controlStyle?.background ,\n     '--custom-bg-color-focus': field()?.controlStyle?.focusBackground ,\n    }\">\n  @if(reactiveFormControlobject()) {\n  <input matInput autocomplete=\"off\" type=\"text\" [name]=\"field()?.fieldName\" [id]=\"field()?.fieldName\"\n    [placeholder]=\"field()?.placeHolder || 'DD-MM-YYYY'\" [required]=\"field()?.validators?.isRequired\"\n    [pattern]=\"field()?.validators?.pattern\" [matDatepicker]=\"picker\" (input)=\"dateDivisionFormat($event)\"\n    [min]=\"field()?.configData?.min\" [max]=\"field()?.configData?.max\" [disabled]=\"field()?.isDisable\"\n    (dateChange)=\"onDateChange($event)\" (blur)=\"onInputBlur($event)\" [value]=\"inputValue\"\n    [formControl]=\"reactiveFormControlobject()\" />\n  }@else {\n  <input matInput autocomplete=\"off\" type=\"text\" [name]=\"field()?.fieldName\" [id]=\"field()?.fieldName\"\n    [placeholder]=\"field()?.placeHolder\" [required]=\"field()?.validators?.isRequired\"\n    [pattern]=\"field()?.validators?.pattern\" [matDatepicker]=\"picker\" (input)=\"dateDivisionFormat($event)\"\n    [min]=\"field()?.configData?.min\" [max]=\"field()?.configData?.max\" [disabled]=\"field()?.isDisable\"\n    (dateChange)=\"onDateChange($event)\" (blur)=\"onInputBlur($event)\" [value]=\"inputValue\" />\n  }\n\n  <mat-datepicker-toggle matSuffix [for]=\"picker\">\n    <img src=\"https://cdn.godigit.com/digitPlusAssets/retail-life-icon/svgicon/date_picker_icon.svg\" style=\"width: 16px\"\n      matDatepickerToggleIcon />\n  </mat-datepicker-toggle>\n  <mat-datepicker #picker></mat-datepicker>\n  <mat-error *ngIf=\"false\">\n    {{ field()?.validators?.isRequiredMessage }}\n  </mat-error>\n</mat-form-field>\n<div class=\"error-message\" *ngIf=\"false\">\n  {{ field()?.validators?.isRequiredMessage }}.\n</div>\n<div class=\"error-message\" *ngIf=\"field()?.configData?.isInvalid\">\n  {{ field()?.validators?.patternMessage }}.\n</div>", styles: [".field-lable{font-size:12px!important;font-weight:700!important;color:#444!important;margin-bottom:0!important}.error-message{color:red}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mat-mdc-notch-piece{border-color:var(--custom-border-color-focus, #ffbb00)!important;border-width:var(--custom-border-width-focus, 1.5px)!important}::ng-deep .mat-mdc-form-field{background-color:var(--custom-bg-color, #ffffff)!important;border-radius:var(--custom-border-radius , 4px)!important}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__leading{border-color:var(--custom-border-color-hover, #ffbb00)!important;border-width:var(--custom-border-width-hover, 1.5px)!important}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__notch{border-color:var(--custom-border-color-hover, #ffbb00)!important;border-width:var(--custom-border-width-hover, 1.5px)!important}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__trailing{border-color:var(--custom-border-color-hover, #ffbb00)!important;border-width:var(--custom-border-width-hover, 1.5px)!important}::ng-deep .mdc-text-field--outlined .mat-mdc-notch-piece{border-color:var(--custom-border-color, #dddddd)!important;border-width:var(--custom-border-width, 1.5px)!important}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-text-field__input{caret-color:var(--custom-caret-color, #ffbb00)!important;font-size:12px!important;font-weight:var(--custom-font-weight, 400)!important;font-family:var(--custom-font-family, \"Mulish\")!important;color:var(--custom-font-color, #444444)!important}::ng-deep .mat-form-field-invalid .mdc-text-field--outlined .mat-mdc-notch-piece{border-color:var(--custom-border-color-error, red)!important;border-width:var(--custom-border-width-error, 1.5px)!important}::ng-deep .mat-mdc-form-field.mat-form-field-disabled{background:var(--custom-bg-color-disabled, #ECECEC)!important}::ng-deep .mdc-text-field--outlined.mdc-text-field--disabled .mdc-text-field__input{color:var(--custom-font-color-disabled, #999999)!important}::ng-deep .mdc-label{color:var(--custom-font-color, #444)!important;font-size:var(--custom-font-size, 16px)!important;font-weight:var(--custom-font-weight, 400)!important;font-family:var(--custom-font-family, \"Mulish\")!important}::placeholder{color:#8f8f8f!important;font-size:12px!important}::ng-deep .mat-mdc-form-field-hint-wrapper{padding:0!important}::ng-deep .mat-mdc-form-field-error-wrapper{padding:0!important}::ng-deep .mat-mdc-form-field-error{color:#e00!important;font-size:12px;font-weight:500;font-family:Mulish!important;letter-spacing:0}::ng-deep .mdc-text-field--outlined{--mdc-outlined-text-field-container-shape: var(--custom-border-radius , 4px) !important}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--invalid .mat-mdc-notch-piece{border-color:var(--custom-border-color-error, red)!important;border-width:var(--custom-border-width-error, 1.5px)!important}::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none!important}*{font-family:mulish!important}::ng-deep .mat-calendar-period-button .mdc-button__label{display:flex;flex-direction:row-reverse;align-items:center;gap:10px}\n"], dependencies: [{ kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i5.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i5.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i5.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "directive", type: i5.MatDatepickerToggleIcon, selector: "[matDatepickerToggleIcon]" }, { kind: "ngmodule", type: MomentDateModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i4.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: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DobComponent, decorators: [{
             type: Component,
@@ -1328,7 +1392,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                             deps: []
                         },
                         { provide: MAT_DATE_FORMATS, useValue: MY_DATE_FORMAT }
-                    ], template: "<label\n  *ngIf=\"field() && field()?.isVisible && field().isShowLabel\"\n  class=\"field-lable\"\n  >{{ field()?.label\n  }}<span style=\"color: red\" *ngIf=\"field() && field()?.validators?.isRequired\"\n    >*</span\n  ></label\n>\n<mat-form-field\n  class=\"w-100\"\n  appearance=\"outline\"\n  *ngIf=\"field() && field()?.isVisible\"\n  [ngStyle]=\"{\n    '--custom-border-color': field()?.controlStyle?.borderColor ,\n    '--custom-border-width': field()?.controlStyle?.borderWidth ,\n    '--custom-border-radius': field()?.controlStyle?.borderRadius ,\n    '--custom-border-color-focus': field()?.controlStyle?.focusBorderColor ,\n    '--custom-border-width-focus': field()?.controlStyle?.focusBorderWidth ,\n    '--custom-border-color-hover': field()?.controlStyle?.hoverBorderColor ,\n    '--custom-border-width-hover': field()?.controlStyle?.hoverBorderWidth ,\n    '--custom-border-color-error': field()?.controlStyle?.errorBorderColor ,\n    '--custom-border-width-error': field()?.controlStyle?.errorBorderWidth ,\n    '--custom-font-size': field()?.controlStyle?.fontSize ,\n    '--custom-font-weight': field()?.controlStyle?.fontWeight ,\n    '--custom-font-family': field()?.controlStyle?.fontFamily ,\n    '--custom-font-color': field()?.controlStyle?.color ,\n    '--custom-caret-color': field()?.controlStyle?.caretColor ,\n    '--custom-font-color-disabled' : field()?.controlStyle?.disableColor ,\n    '--custom-bg-color-disabled' : field()?.controlStyle?.disableBackground ,\n    '--custom-bg-color': field()?.controlStyle?.background ,\n     '--custom-bg-color-focus': field()?.controlStyle?.focusBackground ,\n    }\"\n>\n  @if(reactiveFormControlobject()) {\n  <input\n    matInput\n    autocomplete=\"off\"\n    type=\"text\"\n    [name]=\"field()?.fieldName\"\n    [id]=\"field()?.fieldName\"\n    [placeholder]=\"field()?.placeHolder || 'DD-MM-YYYY'\"\n    [required]=\"field()?.validators?.isRequired\"\n    [pattern]=\"field()?.validators?.pattern\"\n    [matDatepicker]=\"picker\"\n    (keyup)=\"dateDivisionFormat($event)\"\n    [min]=\"field()?.configData?.min\"\n    [max]=\"field()?.configData?.max\"\n    [disabled]=\"field()?.isDisable\"\n    (dateChange)=\"onDateChange($event)\"\n    (blur)=\"onInputBlur($event)\"\n    [value]=\"inputValue\"\n    [formControl]=\"reactiveFormControlobject()\"\n  />\n  }@else {\n  <input\n    matInput\n    autocomplete=\"off\"\n    type=\"text\"\n    [name]=\"field()?.fieldName\"\n    [id]=\"field()?.fieldName\"\n    [placeholder]=\"field()?.placeHolder\"\n    [required]=\"field()?.validators?.isRequired\"\n    [pattern]=\"field()?.validators?.pattern\"\n    [matDatepicker]=\"picker\"\n    (keyup)=\"dateDivisionFormat($event)\"\n    [min]=\"field()?.configData?.min\"\n    [max]=\"field()?.configData?.max\"\n    [disabled]=\"field()?.isDisable\"\n    (dateChange)=\"onDateChange($event)\"\n    (blur)=\"onInputBlur($event)\"\n    [value]=\"inputValue\"\n  />\n  }\n\n  <mat-datepicker-toggle matSuffix [for]=\"picker\">\n    <img\n      src=\"https://cdn.godigit.com/digitPlusAssets/retail-life-icon/svgicon/date_picker_icon.svg\"\n      style=\"width: 16px\"\n      matDatepickerToggleIcon\n    />\n  </mat-datepicker-toggle>\n  <mat-datepicker #picker></mat-datepicker>\n  <mat-error *ngIf=\"false\">\n    {{ field()?.validators?.isRequiredMessage }}\n  </mat-error>\n</mat-form-field>\n<div class=\"error-message\" *ngIf=\"false\">\n  {{ field()?.validators?.isRequiredMessage }}.\n</div>\n<div class=\"error-message\" *ngIf=\"field()?.configData?.isInvalid\">\n  {{ field()?.validators?.patternMessage }}.\n</div>\n", styles: [".field-lable{font-size:12px!important;font-weight:700!important;color:#444!important;margin-bottom:0!important}.error-message{color:red}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mat-mdc-notch-piece{border-color:var(--custom-border-color-focus, #ffbb00)!important;border-width:var(--custom-border-width-focus, 1.5px)!important}::ng-deep .mat-mdc-form-field{background-color:var(--custom-bg-color, #ffffff)!important;border-radius:var(--custom-border-radius , 4px)!important}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__leading{border-color:var(--custom-border-color-hover, #ffbb00)!important;border-width:var(--custom-border-width-hover, 1.5px)!important}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__notch{border-color:var(--custom-border-color-hover, #ffbb00)!important;border-width:var(--custom-border-width-hover, 1.5px)!important}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__trailing{border-color:var(--custom-border-color-hover, #ffbb00)!important;border-width:var(--custom-border-width-hover, 1.5px)!important}::ng-deep .mdc-text-field--outlined .mat-mdc-notch-piece{border-color:var(--custom-border-color, #dddddd)!important;border-width:var(--custom-border-width, 1.5px)!important}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-text-field__input{caret-color:var(--custom-caret-color, #ffbb00)!important;font-size:12px!important;font-weight:var(--custom-font-weight, 400)!important;font-family:var(--custom-font-family, \"Mulish\")!important;color:var(--custom-font-color, #444444)!important}::ng-deep .mat-form-field-invalid .mdc-text-field--outlined .mat-mdc-notch-piece{border-color:var(--custom-border-color-error, red)!important;border-width:var(--custom-border-width-error, 1.5px)!important}::ng-deep .mat-mdc-form-field.mat-form-field-disabled{background:var(--custom-bg-color-disabled, #ECECEC)!important}::ng-deep .mdc-text-field--outlined.mdc-text-field--disabled .mdc-text-field__input{color:var(--custom-font-color-disabled, #999999)!important}::ng-deep .mdc-label{color:var(--custom-font-color, #444)!important;font-size:var(--custom-font-size, 16px)!important;font-weight:var(--custom-font-weight, 400)!important;font-family:var(--custom-font-family, \"Mulish\")!important}::placeholder{color:#8f8f8f!important;font-size:12px!important}::ng-deep .mat-mdc-form-field-hint-wrapper{padding:0!important}::ng-deep .mat-mdc-form-field-error-wrapper{padding:0!important}::ng-deep .mat-mdc-form-field-error{color:#e00!important;font-size:12px;font-weight:500;font-family:Mulish!important;letter-spacing:0}::ng-deep .mdc-text-field--outlined{--mdc-outlined-text-field-container-shape: var(--custom-border-radius , 4px) !important}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--invalid .mat-mdc-notch-piece{border-color:var(--custom-border-color-error, red)!important;border-width:var(--custom-border-width-error, 1.5px)!important}::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none!important}*{font-family:mulish!important}::ng-deep .mat-calendar-period-button .mdc-button__label{display:flex;flex-direction:row-reverse;align-items:center;gap:10px}\n"] }]
+                    ], template: "<label *ngIf=\"field() && field()?.isVisible && field().isShowLabel\" class=\"field-lable\">{{ field()?.label\n  }}<span style=\"color: red\" *ngIf=\"field() && field()?.validators?.isRequired\">*</span></label>\n<mat-form-field class=\"w-100\" appearance=\"outline\" *ngIf=\"field() && field()?.isVisible\" [ngStyle]=\"{\n    '--custom-border-color': field()?.controlStyle?.borderColor ,\n    '--custom-border-width': field()?.controlStyle?.borderWidth ,\n    '--custom-border-radius': field()?.controlStyle?.borderRadius ,\n    '--custom-border-color-focus': field()?.controlStyle?.focusBorderColor ,\n    '--custom-border-width-focus': field()?.controlStyle?.focusBorderWidth ,\n    '--custom-border-color-hover': field()?.controlStyle?.hoverBorderColor ,\n    '--custom-border-width-hover': field()?.controlStyle?.hoverBorderWidth ,\n    '--custom-border-color-error': field()?.controlStyle?.errorBorderColor ,\n    '--custom-border-width-error': field()?.controlStyle?.errorBorderWidth ,\n    '--custom-font-size': field()?.controlStyle?.fontSize ,\n    '--custom-font-weight': field()?.controlStyle?.fontWeight ,\n    '--custom-font-family': field()?.controlStyle?.fontFamily ,\n    '--custom-font-color': field()?.controlStyle?.color ,\n    '--custom-caret-color': field()?.controlStyle?.caretColor ,\n    '--custom-font-color-disabled' : field()?.controlStyle?.disableColor ,\n    '--custom-bg-color-disabled' : field()?.controlStyle?.disableBackground ,\n    '--custom-bg-color': field()?.controlStyle?.background ,\n     '--custom-bg-color-focus': field()?.controlStyle?.focusBackground ,\n    }\">\n  @if(reactiveFormControlobject()) {\n  <input matInput autocomplete=\"off\" type=\"text\" [name]=\"field()?.fieldName\" [id]=\"field()?.fieldName\"\n    [placeholder]=\"field()?.placeHolder || 'DD-MM-YYYY'\" [required]=\"field()?.validators?.isRequired\"\n    [pattern]=\"field()?.validators?.pattern\" [matDatepicker]=\"picker\" (input)=\"dateDivisionFormat($event)\"\n    [min]=\"field()?.configData?.min\" [max]=\"field()?.configData?.max\" [disabled]=\"field()?.isDisable\"\n    (dateChange)=\"onDateChange($event)\" (blur)=\"onInputBlur($event)\" [value]=\"inputValue\"\n    [formControl]=\"reactiveFormControlobject()\" />\n  }@else {\n  <input matInput autocomplete=\"off\" type=\"text\" [name]=\"field()?.fieldName\" [id]=\"field()?.fieldName\"\n    [placeholder]=\"field()?.placeHolder\" [required]=\"field()?.validators?.isRequired\"\n    [pattern]=\"field()?.validators?.pattern\" [matDatepicker]=\"picker\" (input)=\"dateDivisionFormat($event)\"\n    [min]=\"field()?.configData?.min\" [max]=\"field()?.configData?.max\" [disabled]=\"field()?.isDisable\"\n    (dateChange)=\"onDateChange($event)\" (blur)=\"onInputBlur($event)\" [value]=\"inputValue\" />\n  }\n\n  <mat-datepicker-toggle matSuffix [for]=\"picker\">\n    <img src=\"https://cdn.godigit.com/digitPlusAssets/retail-life-icon/svgicon/date_picker_icon.svg\" style=\"width: 16px\"\n      matDatepickerToggleIcon />\n  </mat-datepicker-toggle>\n  <mat-datepicker #picker></mat-datepicker>\n  <mat-error *ngIf=\"false\">\n    {{ field()?.validators?.isRequiredMessage }}\n  </mat-error>\n</mat-form-field>\n<div class=\"error-message\" *ngIf=\"false\">\n  {{ field()?.validators?.isRequiredMessage }}.\n</div>\n<div class=\"error-message\" *ngIf=\"field()?.configData?.isInvalid\">\n  {{ field()?.validators?.patternMessage }}.\n</div>", styles: [".field-lable{font-size:12px!important;font-weight:700!important;color:#444!important;margin-bottom:0!important}.error-message{color:red}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mat-mdc-notch-piece{border-color:var(--custom-border-color-focus, #ffbb00)!important;border-width:var(--custom-border-width-focus, 1.5px)!important}::ng-deep .mat-mdc-form-field{background-color:var(--custom-bg-color, #ffffff)!important;border-radius:var(--custom-border-radius , 4px)!important}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__leading{border-color:var(--custom-border-color-hover, #ffbb00)!important;border-width:var(--custom-border-width-hover, 1.5px)!important}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__notch{border-color:var(--custom-border-color-hover, #ffbb00)!important;border-width:var(--custom-border-width-hover, 1.5px)!important}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__trailing{border-color:var(--custom-border-color-hover, #ffbb00)!important;border-width:var(--custom-border-width-hover, 1.5px)!important}::ng-deep .mdc-text-field--outlined .mat-mdc-notch-piece{border-color:var(--custom-border-color, #dddddd)!important;border-width:var(--custom-border-width, 1.5px)!important}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-text-field__input{caret-color:var(--custom-caret-color, #ffbb00)!important;font-size:12px!important;font-weight:var(--custom-font-weight, 400)!important;font-family:var(--custom-font-family, \"Mulish\")!important;color:var(--custom-font-color, #444444)!important}::ng-deep .mat-form-field-invalid .mdc-text-field--outlined .mat-mdc-notch-piece{border-color:var(--custom-border-color-error, red)!important;border-width:var(--custom-border-width-error, 1.5px)!important}::ng-deep .mat-mdc-form-field.mat-form-field-disabled{background:var(--custom-bg-color-disabled, #ECECEC)!important}::ng-deep .mdc-text-field--outlined.mdc-text-field--disabled .mdc-text-field__input{color:var(--custom-font-color-disabled, #999999)!important}::ng-deep .mdc-label{color:var(--custom-font-color, #444)!important;font-size:var(--custom-font-size, 16px)!important;font-weight:var(--custom-font-weight, 400)!important;font-family:var(--custom-font-family, \"Mulish\")!important}::placeholder{color:#8f8f8f!important;font-size:12px!important}::ng-deep .mat-mdc-form-field-hint-wrapper{padding:0!important}::ng-deep .mat-mdc-form-field-error-wrapper{padding:0!important}::ng-deep .mat-mdc-form-field-error{color:#e00!important;font-size:12px;font-weight:500;font-family:Mulish!important;letter-spacing:0}::ng-deep .mdc-text-field--outlined{--mdc-outlined-text-field-container-shape: var(--custom-border-radius , 4px) !important}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--invalid .mat-mdc-notch-piece{border-color:var(--custom-border-color-error, red)!important;border-width:var(--custom-border-width-error, 1.5px)!important}::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none!important}*{font-family:mulish!important}::ng-deep .mat-calendar-period-button .mdc-button__label{display:flex;flex-direction:row-reverse;align-items:center;gap:10px}\n"] }]
         }], ctorParameters: () => [{ type: MasterControlService }], propDecorators: { blur: [{
                 type: Output
             }], valueChange: [{
@@ -1552,7 +1616,7 @@ class TextareaComponent {
                 useExisting: TextareaComponent,
                 multi: true
             }
-        ], ngImport: i0, template: "@if(reactiveFormControlobject()) {\n<textarea\n[ngStyle]=\"{\n    '--custom-textarea-width': field()?.controlStyle?.width ,\n    '--custom-textarea-border-color': field()?.controlStyle?.borderColor ,\n    '--custom-textarea-border-width': field()?.controlStyle?.borderWidth ,\n    '--custom-textarea-border-color-focus': field()?.controlStyle?.focusBorderColor ,\n    '--custom-textarea-border-width-focus': field()?.controlStyle?.focusBorderColor ,\n    '--custom-textarea-radius': field()?.controlStyle?.borderRadius ,\n    '--custom-textarea-caret-color': field()?.controlStyle?.caretColor ,\n    '--custom-textarea-font-color': field()?.controlStyle?.color ,\n    }\"\n*ngIf=\"field() && field()?.isVisible\"\n  cols=\"40\"\n  rows=\"3\"\n  autocomplete=\"off\"\n  [name]=\"field()?.fieldName\"\n  [id]=\"field()?.fieldName\"\n  [placeholder]=\"field()?.placeHolder\"\n  [maxLength]=\"field()?.validators?.maxLength\"\n  [minLength]=\"field()?.validators?.minLength\"\n  [disabled]=\"field()?.isDisable\"\n  [required]=\"field()?.validators?.isRequired\"\n  (input)=\"onTextareaChange($event)\"\n  (blur)=\"onTextareaBlur($event)\"\n  [value]=\"textareaValue\"\n  [formControl]=\"reactiveFormControlobject()\"\n></textarea>\n}@else {\n<textarea\n[ngStyle]=\"{\n    '--custom-textarea-width': field()?.controlStyle?.width ,\n    '--custom-textarea-border-color': field()?.controlStyle?.borderColor ,\n    '--custom-textarea-border-width': field()?.controlStyle?.borderWidth ,\n    '--custom-textarea-border-color-focus': field()?.controlStyle?.focusBorderColor ,\n    '--custom-textarea-border-width-focus': field()?.controlStyle?.focusBorderColor ,\n    '--custom-textarea-radius': field()?.controlStyle?.borderRadius ,\n    '--custom-textarea-caret-color': field()?.controlStyle?.caretColor ,\n    '--custom-textarea-font-color': field()?.controlStyle?.color ,\n    }\"\n*ngIf=\"field() && field()?.isVisible\"\n  cols=\"40\"\n  rows=\"3\"\n  autocomplete=\"off\"\n  [name]=\"field()?.fieldName\"\n  [id]=\"field()?.fieldName\"\n  [placeholder]=\"field()?.placeHolder\"\n  [maxLength]=\"field()?.validators?.maxLength\"\n  [minLength]=\"field()?.validators?.minLength\"\n  [disabled]=\"field()?.isDisable\"\n  [required]=\"field()?.validators?.isRequired\"\n  (input)=\"onTextareaChange($event)\"\n  (blur)=\"onTextareaBlur($event)\"\n  [value]=\"textareaValue\"\n></textarea>\n}\n", styles: ["*{font-family:mulish!important}::ng-deep textarea{width:-webkit-fill-available!important;border:1.5px solid #dddddd!important;border-radius:4px!important;caret-color:#fb0!important;color:#444!important}::ng-deep textarea:focus{outline:none!important;border:1.5px solid #ffbb00!important}::ng-deep textarea:focus-visible{outline:none!important;border:1.5px solid #ffbb00!important}::ng-deep textarea{width:var(--custom-textarea-width, -webkit-fill-available)!important;border-radius:var(--custom-textarea-radius, 4px)!important;caret-color:var(--custom-textarea-caret-color, #ffbb00)!important;color:var(--custom-textarea-font-color, #444444)!important;border-color:var(--custom-textarea-border-color,#dddddd)!important;border-width:var(--custom-textarea-border-width, 1.5px solid)!important}::ng-deep textarea:focus{border-color:var(--custom-textarea-border-color-focus,#dddddd)!important;border-width:var(--custom-textarea-border-width-focus, 1.5px solid)!important}::ng-deep textarea:focus-visible{border-color:var(--custom-textarea-border-color-focus,#dddddd)!important;border-width:var(--custom-textarea-border-width-focus, 1.5px solid)!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i4.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: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormsModule }] });
+        ], ngImport: i0, template: "\n<label\n  class=\"field-lable\"\n  *ngIf=\"field() && field()?.isVisible && field().isShowLabel\"\n  >{{ field()?.label\n  }}<span style=\"color: red\" *ngIf=\"field() && field()?.validators?.isRequired\"\n    >*</span\n  ></label\n>\n@if(reactiveFormControlobject()) {\n<textarea\n[ngStyle]=\"{\n    '--custom-textarea-width': field()?.controlStyle?.width ,\n    '--custom-textarea-border-color': field()?.controlStyle?.borderColor ,\n    '--custom-textarea-border-width': field()?.controlStyle?.borderWidth ,\n    '--custom-textarea-border-color-focus': field()?.controlStyle?.focusBorderColor ,\n    '--custom-textarea-border-width-focus': field()?.controlStyle?.focusBorderColor ,\n    '--custom-textarea-radius': field()?.controlStyle?.borderRadius ,\n    '--custom-textarea-caret-color': field()?.controlStyle?.caretColor ,\n    '--custom-textarea-font-color': field()?.controlStyle?.color ,\n    }\"\n*ngIf=\"field() && field()?.isVisible\"\n  cols=\"40\"\n  rows=\"3\"\n  autocomplete=\"off\"\n  [name]=\"field()?.fieldName\"\n  [id]=\"field()?.fieldName\"\n  [placeholder]=\"field()?.placeHolder\"\n  [maxLength]=\"field()?.validators?.maxLength\"\n  [minLength]=\"field()?.validators?.minLength\"\n  [disabled]=\"field()?.isDisable\"\n  [required]=\"field()?.validators?.isRequired\"\n  (input)=\"onTextareaChange($event)\"\n  (blur)=\"onTextareaBlur($event)\"\n  [value]=\"textareaValue\"\n  [formControl]=\"reactiveFormControlobject()\"\n></textarea>\n}@else {\n<textarea\n[ngStyle]=\"{\n    '--custom-textarea-width': field()?.controlStyle?.width ,\n    '--custom-textarea-border-color': field()?.controlStyle?.borderColor ,\n    '--custom-textarea-border-width': field()?.controlStyle?.borderWidth ,\n    '--custom-textarea-border-color-focus': field()?.controlStyle?.focusBorderColor ,\n    '--custom-textarea-border-width-focus': field()?.controlStyle?.focusBorderColor ,\n    '--custom-textarea-radius': field()?.controlStyle?.borderRadius ,\n    '--custom-textarea-caret-color': field()?.controlStyle?.caretColor ,\n    '--custom-textarea-font-color': field()?.controlStyle?.color ,\n    }\"\n*ngIf=\"field() && field()?.isVisible\"\n  cols=\"40\"\n  rows=\"3\"\n  autocomplete=\"off\"\n  [name]=\"field()?.fieldName\"\n  [id]=\"field()?.fieldName\"\n  [placeholder]=\"field()?.placeHolder\"\n  [maxLength]=\"field()?.validators?.maxLength\"\n  [minLength]=\"field()?.validators?.minLength\"\n  [disabled]=\"field()?.isDisable\"\n  [required]=\"field()?.validators?.isRequired\"\n  (input)=\"onTextareaChange($event)\"\n  (blur)=\"onTextareaBlur($event)\"\n  [value]=\"textareaValue\"\n></textarea>\n}\n", styles: [".field-lable{font-size:12px!important;font-weight:700!important;color:#444!important;margin-bottom:5px}*{font-family:mulish!important}::ng-deep textarea{width:-webkit-fill-available!important;border:1.5px solid #dddddd!important;border-radius:4px!important;caret-color:#fb0!important;color:#444!important}::ng-deep textarea:focus{outline:none!important;border:1.5px solid #ffbb00!important}::ng-deep textarea:focus-visible{outline:none!important;border:1.5px solid #ffbb00!important}::ng-deep textarea{width:var(--custom-textarea-width, -webkit-fill-available)!important;border-radius:var(--custom-textarea-radius, 4px)!important;caret-color:var(--custom-textarea-caret-color, #ffbb00)!important;color:var(--custom-textarea-font-color, #444444)!important;border-color:var(--custom-textarea-border-color,#dddddd)!important;border-width:var(--custom-textarea-border-width, 1.5px solid)!important}::ng-deep textarea:focus{border-color:var(--custom-textarea-border-color-focus,#dddddd)!important;border-width:var(--custom-textarea-border-width-focus, 1.5px solid)!important}::ng-deep textarea:focus-visible{border-color:var(--custom-textarea-border-color-focus,#dddddd)!important;border-width:var(--custom-textarea-border-width-focus, 1.5px solid)!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i4.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: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormsModule }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TextareaComponent, decorators: [{
             type: Component,
@@ -1566,7 +1630,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                             useExisting: TextareaComponent,
                             multi: true
                         }
-                    ], template: "@if(reactiveFormControlobject()) {\n<textarea\n[ngStyle]=\"{\n    '--custom-textarea-width': field()?.controlStyle?.width ,\n    '--custom-textarea-border-color': field()?.controlStyle?.borderColor ,\n    '--custom-textarea-border-width': field()?.controlStyle?.borderWidth ,\n    '--custom-textarea-border-color-focus': field()?.controlStyle?.focusBorderColor ,\n    '--custom-textarea-border-width-focus': field()?.controlStyle?.focusBorderColor ,\n    '--custom-textarea-radius': field()?.controlStyle?.borderRadius ,\n    '--custom-textarea-caret-color': field()?.controlStyle?.caretColor ,\n    '--custom-textarea-font-color': field()?.controlStyle?.color ,\n    }\"\n*ngIf=\"field() && field()?.isVisible\"\n  cols=\"40\"\n  rows=\"3\"\n  autocomplete=\"off\"\n  [name]=\"field()?.fieldName\"\n  [id]=\"field()?.fieldName\"\n  [placeholder]=\"field()?.placeHolder\"\n  [maxLength]=\"field()?.validators?.maxLength\"\n  [minLength]=\"field()?.validators?.minLength\"\n  [disabled]=\"field()?.isDisable\"\n  [required]=\"field()?.validators?.isRequired\"\n  (input)=\"onTextareaChange($event)\"\n  (blur)=\"onTextareaBlur($event)\"\n  [value]=\"textareaValue\"\n  [formControl]=\"reactiveFormControlobject()\"\n></textarea>\n}@else {\n<textarea\n[ngStyle]=\"{\n    '--custom-textarea-width': field()?.controlStyle?.width ,\n    '--custom-textarea-border-color': field()?.controlStyle?.borderColor ,\n    '--custom-textarea-border-width': field()?.controlStyle?.borderWidth ,\n    '--custom-textarea-border-color-focus': field()?.controlStyle?.focusBorderColor ,\n    '--custom-textarea-border-width-focus': field()?.controlStyle?.focusBorderColor ,\n    '--custom-textarea-radius': field()?.controlStyle?.borderRadius ,\n    '--custom-textarea-caret-color': field()?.controlStyle?.caretColor ,\n    '--custom-textarea-font-color': field()?.controlStyle?.color ,\n    }\"\n*ngIf=\"field() && field()?.isVisible\"\n  cols=\"40\"\n  rows=\"3\"\n  autocomplete=\"off\"\n  [name]=\"field()?.fieldName\"\n  [id]=\"field()?.fieldName\"\n  [placeholder]=\"field()?.placeHolder\"\n  [maxLength]=\"field()?.validators?.maxLength\"\n  [minLength]=\"field()?.validators?.minLength\"\n  [disabled]=\"field()?.isDisable\"\n  [required]=\"field()?.validators?.isRequired\"\n  (input)=\"onTextareaChange($event)\"\n  (blur)=\"onTextareaBlur($event)\"\n  [value]=\"textareaValue\"\n></textarea>\n}\n", styles: ["*{font-family:mulish!important}::ng-deep textarea{width:-webkit-fill-available!important;border:1.5px solid #dddddd!important;border-radius:4px!important;caret-color:#fb0!important;color:#444!important}::ng-deep textarea:focus{outline:none!important;border:1.5px solid #ffbb00!important}::ng-deep textarea:focus-visible{outline:none!important;border:1.5px solid #ffbb00!important}::ng-deep textarea{width:var(--custom-textarea-width, -webkit-fill-available)!important;border-radius:var(--custom-textarea-radius, 4px)!important;caret-color:var(--custom-textarea-caret-color, #ffbb00)!important;color:var(--custom-textarea-font-color, #444444)!important;border-color:var(--custom-textarea-border-color,#dddddd)!important;border-width:var(--custom-textarea-border-width, 1.5px solid)!important}::ng-deep textarea:focus{border-color:var(--custom-textarea-border-color-focus,#dddddd)!important;border-width:var(--custom-textarea-border-width-focus, 1.5px solid)!important}::ng-deep textarea:focus-visible{border-color:var(--custom-textarea-border-color-focus,#dddddd)!important;border-width:var(--custom-textarea-border-width-focus, 1.5px solid)!important}\n"] }]
+                    ], template: "\n<label\n  class=\"field-lable\"\n  *ngIf=\"field() && field()?.isVisible && field().isShowLabel\"\n  >{{ field()?.label\n  }}<span style=\"color: red\" *ngIf=\"field() && field()?.validators?.isRequired\"\n    >*</span\n  ></label\n>\n@if(reactiveFormControlobject()) {\n<textarea\n[ngStyle]=\"{\n    '--custom-textarea-width': field()?.controlStyle?.width ,\n    '--custom-textarea-border-color': field()?.controlStyle?.borderColor ,\n    '--custom-textarea-border-width': field()?.controlStyle?.borderWidth ,\n    '--custom-textarea-border-color-focus': field()?.controlStyle?.focusBorderColor ,\n    '--custom-textarea-border-width-focus': field()?.controlStyle?.focusBorderColor ,\n    '--custom-textarea-radius': field()?.controlStyle?.borderRadius ,\n    '--custom-textarea-caret-color': field()?.controlStyle?.caretColor ,\n    '--custom-textarea-font-color': field()?.controlStyle?.color ,\n    }\"\n*ngIf=\"field() && field()?.isVisible\"\n  cols=\"40\"\n  rows=\"3\"\n  autocomplete=\"off\"\n  [name]=\"field()?.fieldName\"\n  [id]=\"field()?.fieldName\"\n  [placeholder]=\"field()?.placeHolder\"\n  [maxLength]=\"field()?.validators?.maxLength\"\n  [minLength]=\"field()?.validators?.minLength\"\n  [disabled]=\"field()?.isDisable\"\n  [required]=\"field()?.validators?.isRequired\"\n  (input)=\"onTextareaChange($event)\"\n  (blur)=\"onTextareaBlur($event)\"\n  [value]=\"textareaValue\"\n  [formControl]=\"reactiveFormControlobject()\"\n></textarea>\n}@else {\n<textarea\n[ngStyle]=\"{\n    '--custom-textarea-width': field()?.controlStyle?.width ,\n    '--custom-textarea-border-color': field()?.controlStyle?.borderColor ,\n    '--custom-textarea-border-width': field()?.controlStyle?.borderWidth ,\n    '--custom-textarea-border-color-focus': field()?.controlStyle?.focusBorderColor ,\n    '--custom-textarea-border-width-focus': field()?.controlStyle?.focusBorderColor ,\n    '--custom-textarea-radius': field()?.controlStyle?.borderRadius ,\n    '--custom-textarea-caret-color': field()?.controlStyle?.caretColor ,\n    '--custom-textarea-font-color': field()?.controlStyle?.color ,\n    }\"\n*ngIf=\"field() && field()?.isVisible\"\n  cols=\"40\"\n  rows=\"3\"\n  autocomplete=\"off\"\n  [name]=\"field()?.fieldName\"\n  [id]=\"field()?.fieldName\"\n  [placeholder]=\"field()?.placeHolder\"\n  [maxLength]=\"field()?.validators?.maxLength\"\n  [minLength]=\"field()?.validators?.minLength\"\n  [disabled]=\"field()?.isDisable\"\n  [required]=\"field()?.validators?.isRequired\"\n  (input)=\"onTextareaChange($event)\"\n  (blur)=\"onTextareaBlur($event)\"\n  [value]=\"textareaValue\"\n></textarea>\n}\n", styles: [".field-lable{font-size:12px!important;font-weight:700!important;color:#444!important;margin-bottom:5px}*{font-family:mulish!important}::ng-deep textarea{width:-webkit-fill-available!important;border:1.5px solid #dddddd!important;border-radius:4px!important;caret-color:#fb0!important;color:#444!important}::ng-deep textarea:focus{outline:none!important;border:1.5px solid #ffbb00!important}::ng-deep textarea:focus-visible{outline:none!important;border:1.5px solid #ffbb00!important}::ng-deep textarea{width:var(--custom-textarea-width, -webkit-fill-available)!important;border-radius:var(--custom-textarea-radius, 4px)!important;caret-color:var(--custom-textarea-caret-color, #ffbb00)!important;color:var(--custom-textarea-font-color, #444444)!important;border-color:var(--custom-textarea-border-color,#dddddd)!important;border-width:var(--custom-textarea-border-width, 1.5px solid)!important}::ng-deep textarea:focus{border-color:var(--custom-textarea-border-color-focus,#dddddd)!important;border-width:var(--custom-textarea-border-width-focus, 1.5px solid)!important}::ng-deep textarea:focus-visible{border-color:var(--custom-textarea-border-color-focus,#dddddd)!important;border-width:var(--custom-textarea-border-width-focus, 1.5px solid)!important}\n"] }]
         }], ctorParameters: () => [{ type: MasterControlService }], propDecorators: { blur: [{
                 type: Output
             }] } });
@@ -2615,7 +2679,7 @@ class AgeDateComponent {
                 useExisting: AgeDateComponent,
                 multi: true
             },
-        ], ngImport: i0, template: "<label *ngIf=\"field() && field()?.isVisible && field()?.isShowLabel\" class=\"field-lable\">{{field()?.label}}<span style=\"color: red;\" *ngIf=\"field() && field()?.validators?.isRequired\">*</span></label>\n<mat-form-field\n  class=\"w-100\"\n  appearance=\"outline\"\n  *ngIf=\"field() && field()?.isVisible\"\n  [ngStyle]=\"{\n'--custom-border-color': field()?.controlStyle?.borderColor ,\n'--custom-border-width': field()?.controlStyle?.borderWidth ,\n'--custom-border-radius': field()?.controlStyle?.borderRadius ,\n'--custom-bg-color': field()?.controlStyle?.background ,\n'--custom-border-color-focus': field()?.controlStyle?.focusBorderColor ,\n'--custom-border-width-focus': field()?.controlStyle?.focusBorderWidth ,\n'--custom-bg-color-focus': field()?.controlStyle?.focusBackground ,\n'--custom-border-color-hover': field()?.controlStyle?.hoverBorderColor ,\n'--custom-border-width-hover': field()?.controlStyle?.hoverBorderWidth ,\n'--custom-border-color-error': field()?.controlStyle?.errorBorderColor ,\n'--custom-border-width-error': field()?.controlStyle?.errorBorderWidth ,\n'--custom-font-size': field()?.controlStyle?.fontSize ,\n'--custom-font-weight': field()?.controlStyle?.fontWeight ,\n'--custom-font-family': field()?.controlStyle?.fontFamily ,\n'--custom-font-color': field()?.controlStyle?.color ,\n'--custom-caret-color': field()?.controlStyle?.caretColor ,\n'--custom-font-color-disabled' : field()?.controlStyle?.disableColor ,\n'--custom-bg-color-disabled' : field()?.controlStyle?.disableBackground ,\n}\">\n @if(reactiveFormControlobject()) {\n <input\n    matInput\n    autocomplete=\"off\"\n    [type]=\"field()?.controlType\"\n    [name]=\"field()?.fieldName\"\n    [id]=\"field()?.fieldName\"\n    [placeholder]=\"field()?.placeHolder\"\n    [required]=\"field()?.validators?.isRequired\"\n    [pattern]=\"field()?.validators?.pattern\"\n    [matDatepicker]=\"picker\"\n    (keyup)=\"dateDivisionFormat($event)\"\n    [disabled]=\"field()?.isDisable\"\n    [min]=\"field()?.configData?.min\"\n    [max]=\"field()?.configData?.max\"\n    (dateChange)=\"onInputChange($event)\"\n    (blur)=\"onInputBlur($event)\"\n    [value]=\"inputValue\"\n    [formControl]=\"reactiveFormControlobject()\"\n  />\n }@else{\n    <input\n    matInput\n    autocomplete=\"off\"\n    [type]=\"field()?.controlType\"\n    [name]=\"field()?.fieldName\"\n    [id]=\"field()?.fieldName\"\n    [placeholder]=\"field()?.placeHolder\"\n    [required]=\"field()?.validators?.isRequired\"\n    [pattern]=\"field()?.validators?.pattern\"\n    [matDatepicker]=\"picker\"\n    [min]=\"field()?.configData?.min\"\n    [max]=\"field()?.configData?.max\"\n    (keyup)=\"dateDivisionFormat($event)\"\n    [disabled]=\"field()?.isDisable\"\n    (dateChange)=\"onInputChange($event)\"\n    (blur)=\"onInputBlur($event)\"\n    [value]=\"inputValue\"\n  />\n }\n  <span matSuffix class=\"right-date-text\" *ngIf=\"!this.service.checkIfValueIsEmpty(age) && !this.service.checkIfValueIsEmpty(inputValue) && age >= 0\">\n    ({{ age }}) yrs\n  </span>\n  <mat-datepicker-toggle matSuffix [for]=\"picker\" *ngIf=\"true\">\n    <img\n      src=\"https://cdn.godigit.com/digitPlusAssets/retail-life-icon/svgicon/date_picker_icon.svg\"\n      style=\"width: 16px\"\n      matDatepickerToggleIcon\n    />\n  </mat-datepicker-toggle>\n  <mat-datepicker #picker></mat-datepicker>\n   <mat-error *ngIf=\"false\">\n    {{ field()?.validators?.isRequiredMessage }}\n  </mat-error>\n</mat-form-field>\n<div class=\"error-message\" *ngIf=\"false\">\n  {{ field()?.validators?.isRequiredMessage }}.\n</div>\n<div class=\"error-message\" *ngIf=\"false\">\n  {{ field()?.validators?.patternMessage }}.\n</div>\n", styles: [".field-lable{font-size:12px!important;font-weight:700!important;color:#444!important;margin-bottom:0}.right-date-text{padding:4px 8px;border-radius:4px;font-weight:600;font-size:12px;color:#444;background:#f5f5f5;margin-right:8px;display:inline-flex;align-items:center;vertical-align:middle;height:20px}::ng-deep .mat-mdc-form-field-icon-suffix{display:inline-flex!important;align-items:center!important;gap:0px!important}.error-message{color:red}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mat-mdc-notch-piece{border-color:var(--custom-border-color-focus, #ffbb00)!important;border-width:var(--custom-border-width-focus, 1.5px)!important}::ng-deep .mat-mdc-form-field{background-color:var(--custom-bg-color, #ffffff)!important;border-radius:var(--custom-border-radius , 4px)!important}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__leading{border-color:var(--custom-border-color-hover, #ffbb00)!important;border-width:var(--custom-border-width-hover, 1.5px)!important}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__notch{border-color:var(--custom-border-color-hover, #ffbb00)!important;border-width:var(--custom-border-width-hover, 1.5px)!important}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__trailing{border-color:var(--custom-border-color-hover, #ffbb00)!important;border-width:var(--custom-border-width-hover, 1.5px)!important}::ng-deep .mdc-text-field--outlined .mat-mdc-notch-piece{border-color:var(--custom-border-color, #dddddd)!important;border-width:var(--custom-border-width, 1.5px)!important}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-text-field__input{caret-color:var(--custom-caret-color, #ffbb00)!important;font-weight:var(--custom-font-weight, 400)!important;font-family:var(--custom-font-family, \"Mulish\")!important;color:var(--custom-font-color, #444444)!important;font-size:12px!important}::ng-deep .mat-form-field-invalid .mdc-text-field--outlined .mat-mdc-notch-piece{border-color:var(--custom-border-color-error, red)!important;border-width:var(--custom-border-width-error, 1.5px)!important}::ng-deep .mat-mdc-form-field.mat-form-field-disabled{background:var(--custom-bg-color-disabled, #ECECEC)!important}::ng-deep .mdc-text-field--outlined.mdc-text-field--disabled .mdc-text-field__input{color:var(--custom-font-color-disabled, #999999)!important}::ng-deep .mdc-label{color:var(--custom-font-color, #444)!important;font-size:var(--custom-font-size, 16px)!important;font-weight:var(--custom-font-weight, 400)!important;font-family:var(--custom-font-family, \"Mulish\")!important}::placeholder{color:#8f8f8f!important;font-size:12px!important}::ng-deep .mat-mdc-form-field-hint-wrapper{padding:0!important}::ng-deep .mat-mdc-form-field-error-wrapper{padding:0!important}::ng-deep .mat-mdc-form-field-error{color:#e00!important;font-size:12px;font-weight:500;font-family:Mulish!important;letter-spacing:0}::ng-deep .mdc-text-field--outlined{--mdc-outlined-text-field-container-shape: var(--custom-border-radius , 4px) !important}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--invalid .mat-mdc-notch-piece{border-color:var(--custom-border-color-error, red)!important;border-width:var(--custom-border-width-error, 1.5px)!important}::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none!important}*{font-family:mulish!important}\n"], dependencies: [{ kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i5.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i5.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i5.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "directive", type: i5.MatDatepickerToggleIcon, selector: "[matDatepickerToggleIcon]" }, { kind: "ngmodule", type: MomentDateModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i4.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: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
+        ], ngImport: i0, template: "<label *ngIf=\"field() && field()?.isVisible && field()?.isShowLabel\" class=\"field-lable\">{{field()?.label}}<span style=\"color: red;\" *ngIf=\"field() && field()?.validators?.isRequired\">*</span></label>\n<mat-form-field\n  class=\"w-100\"\n  appearance=\"outline\"\n  *ngIf=\"field() && field()?.isVisible\"\n  [ngStyle]=\"{\n'--custom-border-color': field()?.controlStyle?.borderColor ,\n'--custom-border-width': field()?.controlStyle?.borderWidth ,\n'--custom-border-radius': field()?.controlStyle?.borderRadius ,\n'--custom-bg-color': field()?.controlStyle?.background ,\n'--custom-border-color-focus': field()?.controlStyle?.focusBorderColor ,\n'--custom-border-width-focus': field()?.controlStyle?.focusBorderWidth ,\n'--custom-bg-color-focus': field()?.controlStyle?.focusBackground ,\n'--custom-border-color-hover': field()?.controlStyle?.hoverBorderColor ,\n'--custom-border-width-hover': field()?.controlStyle?.hoverBorderWidth ,\n'--custom-border-color-error': field()?.controlStyle?.errorBorderColor ,\n'--custom-border-width-error': field()?.controlStyle?.errorBorderWidth ,\n'--custom-font-size': field()?.controlStyle?.fontSize ,\n'--custom-font-weight': field()?.controlStyle?.fontWeight ,\n'--custom-font-family': field()?.controlStyle?.fontFamily ,\n'--custom-font-color': field()?.controlStyle?.color ,\n'--custom-caret-color': field()?.controlStyle?.caretColor ,\n'--custom-font-color-disabled' : field()?.controlStyle?.disableColor ,\n'--custom-bg-color-disabled' : field()?.controlStyle?.disableBackground ,\n}\">\n @if(reactiveFormControlobject()) {\n <input\n    matInput\n    autocomplete=\"off\"\n    [type]=\"field()?.controlType\"\n    [name]=\"field()?.fieldName\"\n    [id]=\"field()?.fieldName\"\n    [placeholder]=\"field()?.placeHolder\"\n    [required]=\"field()?.validators?.isRequired\"\n    [pattern]=\"field()?.validators?.pattern\"\n    [matDatepicker]=\"picker\"\n    (input)=\"dateDivisionFormat($event)\"\n    [disabled]=\"field()?.isDisable\"\n    [min]=\"field()?.configData?.min\"\n    [max]=\"field()?.configData?.max\"\n    (dateChange)=\"onInputChange($event)\"\n    (blur)=\"onInputBlur($event)\"\n    [value]=\"inputValue\"\n    [formControl]=\"reactiveFormControlobject()\"\n  />\n }@else{\n    <input\n    matInput\n    autocomplete=\"off\"\n    [type]=\"field()?.controlType\"\n    [name]=\"field()?.fieldName\"\n    [id]=\"field()?.fieldName\"\n    [placeholder]=\"field()?.placeHolder\"\n    [required]=\"field()?.validators?.isRequired\"\n    [pattern]=\"field()?.validators?.pattern\"\n    [matDatepicker]=\"picker\"\n    [min]=\"field()?.configData?.min\"\n    [max]=\"field()?.configData?.max\"\n    (input)=\"dateDivisionFormat($event)\"\n    [disabled]=\"field()?.isDisable\"\n    (dateChange)=\"onInputChange($event)\"\n    (blur)=\"onInputBlur($event)\"\n    [value]=\"inputValue\"\n  />\n }\n  <span matSuffix class=\"right-date-text\" *ngIf=\"!this.service.checkIfValueIsEmpty(age) && !this.service.checkIfValueIsEmpty(inputValue) && age >= 0\">\n    ({{ age }}) yrs\n  </span>\n  <mat-datepicker-toggle matSuffix [for]=\"picker\" *ngIf=\"true\">\n    <img\n      src=\"https://cdn.godigit.com/digitPlusAssets/retail-life-icon/svgicon/date_picker_icon.svg\"\n      style=\"width: 16px\"\n      matDatepickerToggleIcon\n    />\n  </mat-datepicker-toggle>\n  <mat-datepicker #picker></mat-datepicker>\n   <mat-error *ngIf=\"false\">\n    {{ field()?.validators?.isRequiredMessage }}\n  </mat-error>\n</mat-form-field>\n<div class=\"error-message\" *ngIf=\"false\">\n  {{ field()?.validators?.isRequiredMessage }}.\n</div>\n<div class=\"error-message\" *ngIf=\"false\">\n  {{ field()?.validators?.patternMessage }}.\n</div>\n", styles: [".field-lable{font-size:12px!important;font-weight:700!important;color:#444!important;margin-bottom:0}.right-date-text{padding:4px 8px;border-radius:4px;font-weight:600;font-size:12px;color:#444;background:#f5f5f5;margin-right:8px;display:inline-flex;align-items:center;vertical-align:middle;height:20px}::ng-deep .mat-mdc-form-field-icon-suffix{display:inline-flex!important;align-items:center!important;gap:0px!important}.error-message{color:red}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mat-mdc-notch-piece{border-color:var(--custom-border-color-focus, #ffbb00)!important;border-width:var(--custom-border-width-focus, 1.5px)!important}::ng-deep .mat-mdc-form-field{background-color:var(--custom-bg-color, #ffffff)!important;border-radius:var(--custom-border-radius , 4px)!important}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__leading{border-color:var(--custom-border-color-hover, #ffbb00)!important;border-width:var(--custom-border-width-hover, 1.5px)!important}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__notch{border-color:var(--custom-border-color-hover, #ffbb00)!important;border-width:var(--custom-border-width-hover, 1.5px)!important}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__trailing{border-color:var(--custom-border-color-hover, #ffbb00)!important;border-width:var(--custom-border-width-hover, 1.5px)!important}::ng-deep .mdc-text-field--outlined .mat-mdc-notch-piece{border-color:var(--custom-border-color, #dddddd)!important;border-width:var(--custom-border-width, 1.5px)!important}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-text-field__input{caret-color:var(--custom-caret-color, #ffbb00)!important;font-weight:var(--custom-font-weight, 400)!important;font-family:var(--custom-font-family, \"Mulish\")!important;color:var(--custom-font-color, #444444)!important;font-size:12px!important}::ng-deep .mat-form-field-invalid .mdc-text-field--outlined .mat-mdc-notch-piece{border-color:var(--custom-border-color-error, red)!important;border-width:var(--custom-border-width-error, 1.5px)!important}::ng-deep .mat-mdc-form-field.mat-form-field-disabled{background:var(--custom-bg-color-disabled, #ECECEC)!important}::ng-deep .mdc-text-field--outlined.mdc-text-field--disabled .mdc-text-field__input{color:var(--custom-font-color-disabled, #999999)!important}::ng-deep .mdc-label{color:var(--custom-font-color, #444)!important;font-size:var(--custom-font-size, 16px)!important;font-weight:var(--custom-font-weight, 400)!important;font-family:var(--custom-font-family, \"Mulish\")!important}::placeholder{color:#8f8f8f!important;font-size:12px!important}::ng-deep .mat-mdc-form-field-hint-wrapper{padding:0!important}::ng-deep .mat-mdc-form-field-error-wrapper{padding:0!important}::ng-deep .mat-mdc-form-field-error{color:#e00!important;font-size:12px;font-weight:500;font-family:Mulish!important;letter-spacing:0}::ng-deep .mdc-text-field--outlined{--mdc-outlined-text-field-container-shape: var(--custom-border-radius , 4px) !important}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--invalid .mat-mdc-notch-piece{border-color:var(--custom-border-color-error, red)!important;border-width:var(--custom-border-width-error, 1.5px)!important}::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none!important}*{font-family:mulish!important}\n"], dependencies: [{ kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i5.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i5.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i5.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "directive", type: i5.MatDatepickerToggleIcon, selector: "[matDatepickerToggleIcon]" }, { kind: "ngmodule", type: MomentDateModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i4.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: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AgeDateComponent, decorators: [{
             type: Component,
@@ -2651,7 +2715,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                             useExisting: AgeDateComponent,
                             multi: true
                         },
-                    ], template: "<label *ngIf=\"field() && field()?.isVisible && field()?.isShowLabel\" class=\"field-lable\">{{field()?.label}}<span style=\"color: red;\" *ngIf=\"field() && field()?.validators?.isRequired\">*</span></label>\n<mat-form-field\n  class=\"w-100\"\n  appearance=\"outline\"\n  *ngIf=\"field() && field()?.isVisible\"\n  [ngStyle]=\"{\n'--custom-border-color': field()?.controlStyle?.borderColor ,\n'--custom-border-width': field()?.controlStyle?.borderWidth ,\n'--custom-border-radius': field()?.controlStyle?.borderRadius ,\n'--custom-bg-color': field()?.controlStyle?.background ,\n'--custom-border-color-focus': field()?.controlStyle?.focusBorderColor ,\n'--custom-border-width-focus': field()?.controlStyle?.focusBorderWidth ,\n'--custom-bg-color-focus': field()?.controlStyle?.focusBackground ,\n'--custom-border-color-hover': field()?.controlStyle?.hoverBorderColor ,\n'--custom-border-width-hover': field()?.controlStyle?.hoverBorderWidth ,\n'--custom-border-color-error': field()?.controlStyle?.errorBorderColor ,\n'--custom-border-width-error': field()?.controlStyle?.errorBorderWidth ,\n'--custom-font-size': field()?.controlStyle?.fontSize ,\n'--custom-font-weight': field()?.controlStyle?.fontWeight ,\n'--custom-font-family': field()?.controlStyle?.fontFamily ,\n'--custom-font-color': field()?.controlStyle?.color ,\n'--custom-caret-color': field()?.controlStyle?.caretColor ,\n'--custom-font-color-disabled' : field()?.controlStyle?.disableColor ,\n'--custom-bg-color-disabled' : field()?.controlStyle?.disableBackground ,\n}\">\n @if(reactiveFormControlobject()) {\n <input\n    matInput\n    autocomplete=\"off\"\n    [type]=\"field()?.controlType\"\n    [name]=\"field()?.fieldName\"\n    [id]=\"field()?.fieldName\"\n    [placeholder]=\"field()?.placeHolder\"\n    [required]=\"field()?.validators?.isRequired\"\n    [pattern]=\"field()?.validators?.pattern\"\n    [matDatepicker]=\"picker\"\n    (keyup)=\"dateDivisionFormat($event)\"\n    [disabled]=\"field()?.isDisable\"\n    [min]=\"field()?.configData?.min\"\n    [max]=\"field()?.configData?.max\"\n    (dateChange)=\"onInputChange($event)\"\n    (blur)=\"onInputBlur($event)\"\n    [value]=\"inputValue\"\n    [formControl]=\"reactiveFormControlobject()\"\n  />\n }@else{\n    <input\n    matInput\n    autocomplete=\"off\"\n    [type]=\"field()?.controlType\"\n    [name]=\"field()?.fieldName\"\n    [id]=\"field()?.fieldName\"\n    [placeholder]=\"field()?.placeHolder\"\n    [required]=\"field()?.validators?.isRequired\"\n    [pattern]=\"field()?.validators?.pattern\"\n    [matDatepicker]=\"picker\"\n    [min]=\"field()?.configData?.min\"\n    [max]=\"field()?.configData?.max\"\n    (keyup)=\"dateDivisionFormat($event)\"\n    [disabled]=\"field()?.isDisable\"\n    (dateChange)=\"onInputChange($event)\"\n    (blur)=\"onInputBlur($event)\"\n    [value]=\"inputValue\"\n  />\n }\n  <span matSuffix class=\"right-date-text\" *ngIf=\"!this.service.checkIfValueIsEmpty(age) && !this.service.checkIfValueIsEmpty(inputValue) && age >= 0\">\n    ({{ age }}) yrs\n  </span>\n  <mat-datepicker-toggle matSuffix [for]=\"picker\" *ngIf=\"true\">\n    <img\n      src=\"https://cdn.godigit.com/digitPlusAssets/retail-life-icon/svgicon/date_picker_icon.svg\"\n      style=\"width: 16px\"\n      matDatepickerToggleIcon\n    />\n  </mat-datepicker-toggle>\n  <mat-datepicker #picker></mat-datepicker>\n   <mat-error *ngIf=\"false\">\n    {{ field()?.validators?.isRequiredMessage }}\n  </mat-error>\n</mat-form-field>\n<div class=\"error-message\" *ngIf=\"false\">\n  {{ field()?.validators?.isRequiredMessage }}.\n</div>\n<div class=\"error-message\" *ngIf=\"false\">\n  {{ field()?.validators?.patternMessage }}.\n</div>\n", styles: [".field-lable{font-size:12px!important;font-weight:700!important;color:#444!important;margin-bottom:0}.right-date-text{padding:4px 8px;border-radius:4px;font-weight:600;font-size:12px;color:#444;background:#f5f5f5;margin-right:8px;display:inline-flex;align-items:center;vertical-align:middle;height:20px}::ng-deep .mat-mdc-form-field-icon-suffix{display:inline-flex!important;align-items:center!important;gap:0px!important}.error-message{color:red}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mat-mdc-notch-piece{border-color:var(--custom-border-color-focus, #ffbb00)!important;border-width:var(--custom-border-width-focus, 1.5px)!important}::ng-deep .mat-mdc-form-field{background-color:var(--custom-bg-color, #ffffff)!important;border-radius:var(--custom-border-radius , 4px)!important}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__leading{border-color:var(--custom-border-color-hover, #ffbb00)!important;border-width:var(--custom-border-width-hover, 1.5px)!important}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__notch{border-color:var(--custom-border-color-hover, #ffbb00)!important;border-width:var(--custom-border-width-hover, 1.5px)!important}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__trailing{border-color:var(--custom-border-color-hover, #ffbb00)!important;border-width:var(--custom-border-width-hover, 1.5px)!important}::ng-deep .mdc-text-field--outlined .mat-mdc-notch-piece{border-color:var(--custom-border-color, #dddddd)!important;border-width:var(--custom-border-width, 1.5px)!important}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-text-field__input{caret-color:var(--custom-caret-color, #ffbb00)!important;font-weight:var(--custom-font-weight, 400)!important;font-family:var(--custom-font-family, \"Mulish\")!important;color:var(--custom-font-color, #444444)!important;font-size:12px!important}::ng-deep .mat-form-field-invalid .mdc-text-field--outlined .mat-mdc-notch-piece{border-color:var(--custom-border-color-error, red)!important;border-width:var(--custom-border-width-error, 1.5px)!important}::ng-deep .mat-mdc-form-field.mat-form-field-disabled{background:var(--custom-bg-color-disabled, #ECECEC)!important}::ng-deep .mdc-text-field--outlined.mdc-text-field--disabled .mdc-text-field__input{color:var(--custom-font-color-disabled, #999999)!important}::ng-deep .mdc-label{color:var(--custom-font-color, #444)!important;font-size:var(--custom-font-size, 16px)!important;font-weight:var(--custom-font-weight, 400)!important;font-family:var(--custom-font-family, \"Mulish\")!important}::placeholder{color:#8f8f8f!important;font-size:12px!important}::ng-deep .mat-mdc-form-field-hint-wrapper{padding:0!important}::ng-deep .mat-mdc-form-field-error-wrapper{padding:0!important}::ng-deep .mat-mdc-form-field-error{color:#e00!important;font-size:12px;font-weight:500;font-family:Mulish!important;letter-spacing:0}::ng-deep .mdc-text-field--outlined{--mdc-outlined-text-field-container-shape: var(--custom-border-radius , 4px) !important}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--invalid .mat-mdc-notch-piece{border-color:var(--custom-border-color-error, red)!important;border-width:var(--custom-border-width-error, 1.5px)!important}::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none!important}*{font-family:mulish!important}\n"] }]
+                    ], template: "<label *ngIf=\"field() && field()?.isVisible && field()?.isShowLabel\" class=\"field-lable\">{{field()?.label}}<span style=\"color: red;\" *ngIf=\"field() && field()?.validators?.isRequired\">*</span></label>\n<mat-form-field\n  class=\"w-100\"\n  appearance=\"outline\"\n  *ngIf=\"field() && field()?.isVisible\"\n  [ngStyle]=\"{\n'--custom-border-color': field()?.controlStyle?.borderColor ,\n'--custom-border-width': field()?.controlStyle?.borderWidth ,\n'--custom-border-radius': field()?.controlStyle?.borderRadius ,\n'--custom-bg-color': field()?.controlStyle?.background ,\n'--custom-border-color-focus': field()?.controlStyle?.focusBorderColor ,\n'--custom-border-width-focus': field()?.controlStyle?.focusBorderWidth ,\n'--custom-bg-color-focus': field()?.controlStyle?.focusBackground ,\n'--custom-border-color-hover': field()?.controlStyle?.hoverBorderColor ,\n'--custom-border-width-hover': field()?.controlStyle?.hoverBorderWidth ,\n'--custom-border-color-error': field()?.controlStyle?.errorBorderColor ,\n'--custom-border-width-error': field()?.controlStyle?.errorBorderWidth ,\n'--custom-font-size': field()?.controlStyle?.fontSize ,\n'--custom-font-weight': field()?.controlStyle?.fontWeight ,\n'--custom-font-family': field()?.controlStyle?.fontFamily ,\n'--custom-font-color': field()?.controlStyle?.color ,\n'--custom-caret-color': field()?.controlStyle?.caretColor ,\n'--custom-font-color-disabled' : field()?.controlStyle?.disableColor ,\n'--custom-bg-color-disabled' : field()?.controlStyle?.disableBackground ,\n}\">\n @if(reactiveFormControlobject()) {\n <input\n    matInput\n    autocomplete=\"off\"\n    [type]=\"field()?.controlType\"\n    [name]=\"field()?.fieldName\"\n    [id]=\"field()?.fieldName\"\n    [placeholder]=\"field()?.placeHolder\"\n    [required]=\"field()?.validators?.isRequired\"\n    [pattern]=\"field()?.validators?.pattern\"\n    [matDatepicker]=\"picker\"\n    (input)=\"dateDivisionFormat($event)\"\n    [disabled]=\"field()?.isDisable\"\n    [min]=\"field()?.configData?.min\"\n    [max]=\"field()?.configData?.max\"\n    (dateChange)=\"onInputChange($event)\"\n    (blur)=\"onInputBlur($event)\"\n    [value]=\"inputValue\"\n    [formControl]=\"reactiveFormControlobject()\"\n  />\n }@else{\n    <input\n    matInput\n    autocomplete=\"off\"\n    [type]=\"field()?.controlType\"\n    [name]=\"field()?.fieldName\"\n    [id]=\"field()?.fieldName\"\n    [placeholder]=\"field()?.placeHolder\"\n    [required]=\"field()?.validators?.isRequired\"\n    [pattern]=\"field()?.validators?.pattern\"\n    [matDatepicker]=\"picker\"\n    [min]=\"field()?.configData?.min\"\n    [max]=\"field()?.configData?.max\"\n    (input)=\"dateDivisionFormat($event)\"\n    [disabled]=\"field()?.isDisable\"\n    (dateChange)=\"onInputChange($event)\"\n    (blur)=\"onInputBlur($event)\"\n    [value]=\"inputValue\"\n  />\n }\n  <span matSuffix class=\"right-date-text\" *ngIf=\"!this.service.checkIfValueIsEmpty(age) && !this.service.checkIfValueIsEmpty(inputValue) && age >= 0\">\n    ({{ age }}) yrs\n  </span>\n  <mat-datepicker-toggle matSuffix [for]=\"picker\" *ngIf=\"true\">\n    <img\n      src=\"https://cdn.godigit.com/digitPlusAssets/retail-life-icon/svgicon/date_picker_icon.svg\"\n      style=\"width: 16px\"\n      matDatepickerToggleIcon\n    />\n  </mat-datepicker-toggle>\n  <mat-datepicker #picker></mat-datepicker>\n   <mat-error *ngIf=\"false\">\n    {{ field()?.validators?.isRequiredMessage }}\n  </mat-error>\n</mat-form-field>\n<div class=\"error-message\" *ngIf=\"false\">\n  {{ field()?.validators?.isRequiredMessage }}.\n</div>\n<div class=\"error-message\" *ngIf=\"false\">\n  {{ field()?.validators?.patternMessage }}.\n</div>\n", styles: [".field-lable{font-size:12px!important;font-weight:700!important;color:#444!important;margin-bottom:0}.right-date-text{padding:4px 8px;border-radius:4px;font-weight:600;font-size:12px;color:#444;background:#f5f5f5;margin-right:8px;display:inline-flex;align-items:center;vertical-align:middle;height:20px}::ng-deep .mat-mdc-form-field-icon-suffix{display:inline-flex!important;align-items:center!important;gap:0px!important}.error-message{color:red}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mat-mdc-notch-piece{border-color:var(--custom-border-color-focus, #ffbb00)!important;border-width:var(--custom-border-width-focus, 1.5px)!important}::ng-deep .mat-mdc-form-field{background-color:var(--custom-bg-color, #ffffff)!important;border-radius:var(--custom-border-radius , 4px)!important}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__leading{border-color:var(--custom-border-color-hover, #ffbb00)!important;border-width:var(--custom-border-width-hover, 1.5px)!important}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__notch{border-color:var(--custom-border-color-hover, #ffbb00)!important;border-width:var(--custom-border-width-hover, 1.5px)!important}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__trailing{border-color:var(--custom-border-color-hover, #ffbb00)!important;border-width:var(--custom-border-width-hover, 1.5px)!important}::ng-deep .mdc-text-field--outlined .mat-mdc-notch-piece{border-color:var(--custom-border-color, #dddddd)!important;border-width:var(--custom-border-width, 1.5px)!important}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-text-field__input{caret-color:var(--custom-caret-color, #ffbb00)!important;font-weight:var(--custom-font-weight, 400)!important;font-family:var(--custom-font-family, \"Mulish\")!important;color:var(--custom-font-color, #444444)!important;font-size:12px!important}::ng-deep .mat-form-field-invalid .mdc-text-field--outlined .mat-mdc-notch-piece{border-color:var(--custom-border-color-error, red)!important;border-width:var(--custom-border-width-error, 1.5px)!important}::ng-deep .mat-mdc-form-field.mat-form-field-disabled{background:var(--custom-bg-color-disabled, #ECECEC)!important}::ng-deep .mdc-text-field--outlined.mdc-text-field--disabled .mdc-text-field__input{color:var(--custom-font-color-disabled, #999999)!important}::ng-deep .mdc-label{color:var(--custom-font-color, #444)!important;font-size:var(--custom-font-size, 16px)!important;font-weight:var(--custom-font-weight, 400)!important;font-family:var(--custom-font-family, \"Mulish\")!important}::placeholder{color:#8f8f8f!important;font-size:12px!important}::ng-deep .mat-mdc-form-field-hint-wrapper{padding:0!important}::ng-deep .mat-mdc-form-field-error-wrapper{padding:0!important}::ng-deep .mat-mdc-form-field-error{color:#e00!important;font-size:12px;font-weight:500;font-family:Mulish!important;letter-spacing:0}::ng-deep .mdc-text-field--outlined{--mdc-outlined-text-field-container-shape: var(--custom-border-radius , 4px) !important}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--invalid .mat-mdc-notch-piece{border-color:var(--custom-border-color-error, red)!important;border-width:var(--custom-border-width-error, 1.5px)!important}::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none!important}*{font-family:mulish!important}\n"] }]
         }], ctorParameters: () => [{ type: MasterControlService }], propDecorators: { blur: [{
                 type: Output
             }], valueChange: [{