master-control 0.2.32 → 0.2.34

package/fesm2022/master-control.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Injectable, input, Component, EventEmitter, Output, HostListener, Input, ViewChild } from '@angular/core';
+import { Injectable, input, EventEmitter, Component, Output, HostListener, Input, ViewChild } from '@angular/core';
 import * as i1 from '@angular/material/input';
 import { MatInputModule } from '@angular/material/input';
 import * as i2 from '@angular/material/form-field';
@@ -279,6 +279,8 @@ class TextboxComponent {
     reactiveFormControlobject = input();
     _onChange = (inputValue) => { };
     _unTouched = () => { };
+    // Declare Output event emitter here (class level)
+    blur = new EventEmitter();
     writeValue(obj) {
         this.inputValue = obj;
     }
@@ -297,17 +299,18 @@ class TextboxComponent {
         this.inputValue = event.target.value;
         this._onChange(this.inputValue);
     }
-    onInputBlur() {
+    onInputBlur(event) {
         this._unTouched();
+        this.blur.emit(event);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TextboxComponent, deps: [{ token: MasterControlService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: TextboxComponent, isStandalone: true, selector: "lib-textbox", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, reactiveFormControlobject: { classPropertyName: "reactiveFormControlobject", publicName: "reactiveFormControlobject", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: TextboxComponent, isStandalone: true, selector: "lib-textbox", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, reactiveFormControlobject: { classPropertyName: "reactiveFormControlobject", publicName: "reactiveFormControlobject", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { blur: "blur" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: TextboxComponent,
                 multi: true
             }
-        ], ngImport: i0, template: "<label\r\n  class=\"field-lable\"\r\n  *ngIf=\"field() && field()?.isVisible && field().isShowLabel\"\r\n  >{{ field()?.label\r\n  }}<span style=\"color: red\" *ngIf=\"field() && field()?.validators?.isRequired\"\r\n    >*</span\r\n  ></label\r\n>\r\n<mat-form-field\r\n  class=\"w-100\"\r\n  appearance=\"outline\"\r\n  *ngIf=\"field() && field()?.isVisible\"\r\n  [ngStyle]=\"{\r\n'--custom-border-color': field()?.controlStyle?.borderColor ,\r\n'--custom-border-width': field()?.controlStyle?.borderWidth ,\r\n'--custom-border-radius': field()?.controlStyle?.borderRadius ,\r\n'--custom-bg-color': field()?.controlStyle?.background ,\r\n'--custom-border-color-focus': field()?.controlStyle?.focusBorderColor ,\r\n'--custom-border-width-focus': field()?.controlStyle?.focusBorderWidth ,\r\n'--custom-bg-color-focus': field()?.controlStyle?.focusBackground ,\r\n'--custom-border-color-hover': field()?.controlStyle?.hoverBorderColor ,\r\n'--custom-border-width-hover': field()?.controlStyle?.hoverBorderWidth ,\r\n'--custom-border-color-error': field()?.controlStyle?.errorBorderColor ,\r\n'--custom-border-width-error': field()?.controlStyle?.errorBorderWidth ,\r\n'--custom-font-size': field()?.controlStyle?.fontSize ,\r\n'--custom-font-weight': field()?.controlStyle?.fontWeight ,\r\n'--custom-font-family': field()?.controlStyle?.fontFamily ,\r\n'--custom-font-color': field()?.controlStyle?.color ,\r\n'--custom-caret-color': field()?.controlStyle?.caretColor ,\r\n'--custom-font-color-disabled' : field()?.controlStyle?.disableColor ,\r\n'--custom-bg-color-disabled' : field()?.controlStyle?.disableBackground ,\r\n'--custom-width': field()?.controlStyle?.width ,\r\n}\"\r\n>\r\n  @if(reactiveFormControlobject()) {\r\n  <input\r\n    matInput\r\n    autocomplete=\"none\"\r\n    [type]=\"field()?.controlType\"\r\n    [name]=\"field()?.fieldName\"\r\n    [id]=\"field()?.fieldName\"\r\n    [placeholder]=\"field()?.placeHolder\"\r\n    [maxLength]=\"field()?.validators?.maxLength\"\r\n    [minLength]=\"field()?.validators?.minLength\"\r\n    [disabled]=\"field()?.isDisable\"\r\n    [required]=\"field()?.validators?.isRequired\"\r\n    [pattern]=\"field()?.validators?.pattern\"\r\n    (input)=\"onInputChange($event)\"\r\n    (blur)=\"onInputBlur()\"\r\n    [value]=\"inputValue\"\r\n    [formControl]=\"reactiveFormControlobject()\"\r\n  />\r\n  }@else {\r\n  <input\r\n    matInput\r\n    autocomplete=\"none\"\r\n    [type]=\"field()?.controlType\"\r\n    [name]=\"field()?.fieldName\"\r\n    [id]=\"field()?.fieldName\"\r\n    [placeholder]=\"field()?.placeHolder\"\r\n    [maxLength]=\"field()?.validators?.maxLength\"\r\n    [minLength]=\"field()?.validators?.minLength\"\r\n    [disabled]=\"field()?.isDisable\"\r\n    [required]=\"field()?.validators?.isRequired\"\r\n    [pattern]=\"field()?.validators?.pattern\"\r\n    (input)=\"onInputChange($event)\"\r\n    (blur)=\"onInputBlur()\"\r\n    [value]=\"inputValue\"\r\n  />\r\n  }\r\n\r\n  <mat-error *ngIf=\"false\">\r\n    {{ field()?.validators?.isRequiredMessage }}\r\n  </mat-error>\r\n</mat-form-field>\r\n<div class=\"error-message\" *ngIf=\"false\">\r\n  {{ field()?.validators?.isRequiredMessage }}.\r\n</div>\r\n<div class=\"error-message\" *ngIf=\"false\">\r\n  {{ field()?.validators?.patternMessage }}.\r\n</div>\r\n", styles: [".field-lable{font-size:12px!important;font-weight:700!important;color:#444!important;margin-bottom:5px}.error-message{color:red}*{font-family:mulish!important}::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 , 7px)!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 , 7px) !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}\n"], dependencies: [{ kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i1.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.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.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.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\r\n  class=\"field-lable\"\r\n  *ngIf=\"field() && field()?.isVisible && field().isShowLabel\"\r\n  >{{ field()?.label\r\n  }}<span style=\"color: red\" *ngIf=\"field() && field()?.validators?.isRequired\"\r\n    >*</span\r\n  ></label\r\n>\r\n<mat-form-field\r\n  class=\"w-100\"\r\n  appearance=\"outline\"\r\n  *ngIf=\"field() && field()?.isVisible\"\r\n  [ngStyle]=\"{\r\n'--custom-border-color': field()?.controlStyle?.borderColor ,\r\n'--custom-border-width': field()?.controlStyle?.borderWidth ,\r\n'--custom-border-radius': field()?.controlStyle?.borderRadius ,\r\n'--custom-bg-color': field()?.controlStyle?.background ,\r\n'--custom-border-color-focus': field()?.controlStyle?.focusBorderColor ,\r\n'--custom-border-width-focus': field()?.controlStyle?.focusBorderWidth ,\r\n'--custom-bg-color-focus': field()?.controlStyle?.focusBackground ,\r\n'--custom-border-color-hover': field()?.controlStyle?.hoverBorderColor ,\r\n'--custom-border-width-hover': field()?.controlStyle?.hoverBorderWidth ,\r\n'--custom-border-color-error': field()?.controlStyle?.errorBorderColor ,\r\n'--custom-border-width-error': field()?.controlStyle?.errorBorderWidth ,\r\n'--custom-font-size': field()?.controlStyle?.fontSize ,\r\n'--custom-font-weight': field()?.controlStyle?.fontWeight ,\r\n'--custom-font-family': field()?.controlStyle?.fontFamily ,\r\n'--custom-font-color': field()?.controlStyle?.color ,\r\n'--custom-caret-color': field()?.controlStyle?.caretColor ,\r\n'--custom-font-color-disabled' : field()?.controlStyle?.disableColor ,\r\n'--custom-bg-color-disabled' : field()?.controlStyle?.disableBackground ,\r\n'--custom-width': field()?.controlStyle?.width ,\r\n}\"\r\n>\r\n  @if(reactiveFormControlobject()) {\r\n  <input\r\n    matInput\r\n    autocomplete=\"none\"\r\n    [type]=\"field()?.controlType\"\r\n    [name]=\"field()?.fieldName\"\r\n    [id]=\"field()?.fieldName\"\r\n    [placeholder]=\"field()?.placeHolder\"\r\n    [maxLength]=\"field()?.validators?.maxLength\"\r\n    [minLength]=\"field()?.validators?.minLength\"\r\n    [disabled]=\"field()?.isDisable\"\r\n    [required]=\"field()?.validators?.isRequired\"\r\n    [pattern]=\"field()?.validators?.pattern\"\r\n    (input)=\"onInputChange($event)\"\r\n    (blur)=\"onInputBlur($event)\"\r\n    [value]=\"inputValue\"\r\n    [formControl]=\"reactiveFormControlobject()\"\r\n  />\r\n  }@else {\r\n  <input\r\n    matInput\r\n    autocomplete=\"none\"\r\n    [type]=\"field()?.controlType\"\r\n    [name]=\"field()?.fieldName\"\r\n    [id]=\"field()?.fieldName\"\r\n    [placeholder]=\"field()?.placeHolder\"\r\n    [maxLength]=\"field()?.validators?.maxLength\"\r\n    [minLength]=\"field()?.validators?.minLength\"\r\n    [disabled]=\"field()?.isDisable\"\r\n    [required]=\"field()?.validators?.isRequired\"\r\n    [pattern]=\"field()?.validators?.pattern\"\r\n    (input)=\"onInputChange($event)\"\r\n    (blur)=\"onInputBlur($event)\"\r\n    [value]=\"inputValue\"\r\n  />\r\n  }\r\n\r\n  <mat-error *ngIf=\"false\">\r\n    {{ field()?.validators?.isRequiredMessage }}\r\n  </mat-error>\r\n</mat-form-field>\r\n<div class=\"error-message\" *ngIf=\"false\">\r\n  {{ field()?.validators?.isRequiredMessage }}.\r\n</div>\r\n<div class=\"error-message\" *ngIf=\"false\">\r\n  {{ field()?.validators?.patternMessage }}.\r\n</div>\r\n", styles: [".field-lable{font-size:12px!important;font-weight:700!important;color:#444!important;margin-bottom:5px}.error-message{color:red}*{font-family:mulish!important}::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 , 7px)!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 , 7px) !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}\n"], dependencies: [{ kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i1.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.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.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.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: TextboxComponent, decorators: [{
             type: Component,
@@ -322,8 +325,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                             useExisting: TextboxComponent,
                             multi: true
                         }
-                    ], template: "<label\r\n  class=\"field-lable\"\r\n  *ngIf=\"field() && field()?.isVisible && field().isShowLabel\"\r\n  >{{ field()?.label\r\n  }}<span style=\"color: red\" *ngIf=\"field() && field()?.validators?.isRequired\"\r\n    >*</span\r\n  ></label\r\n>\r\n<mat-form-field\r\n  class=\"w-100\"\r\n  appearance=\"outline\"\r\n  *ngIf=\"field() && field()?.isVisible\"\r\n  [ngStyle]=\"{\r\n'--custom-border-color': field()?.controlStyle?.borderColor ,\r\n'--custom-border-width': field()?.controlStyle?.borderWidth ,\r\n'--custom-border-radius': field()?.controlStyle?.borderRadius ,\r\n'--custom-bg-color': field()?.controlStyle?.background ,\r\n'--custom-border-color-focus': field()?.controlStyle?.focusBorderColor ,\r\n'--custom-border-width-focus': field()?.controlStyle?.focusBorderWidth ,\r\n'--custom-bg-color-focus': field()?.controlStyle?.focusBackground ,\r\n'--custom-border-color-hover': field()?.controlStyle?.hoverBorderColor ,\r\n'--custom-border-width-hover': field()?.controlStyle?.hoverBorderWidth ,\r\n'--custom-border-color-error': field()?.controlStyle?.errorBorderColor ,\r\n'--custom-border-width-error': field()?.controlStyle?.errorBorderWidth ,\r\n'--custom-font-size': field()?.controlStyle?.fontSize ,\r\n'--custom-font-weight': field()?.controlStyle?.fontWeight ,\r\n'--custom-font-family': field()?.controlStyle?.fontFamily ,\r\n'--custom-font-color': field()?.controlStyle?.color ,\r\n'--custom-caret-color': field()?.controlStyle?.caretColor ,\r\n'--custom-font-color-disabled' : field()?.controlStyle?.disableColor ,\r\n'--custom-bg-color-disabled' : field()?.controlStyle?.disableBackground ,\r\n'--custom-width': field()?.controlStyle?.width ,\r\n}\"\r\n>\r\n  @if(reactiveFormControlobject()) {\r\n  <input\r\n    matInput\r\n    autocomplete=\"none\"\r\n    [type]=\"field()?.controlType\"\r\n    [name]=\"field()?.fieldName\"\r\n    [id]=\"field()?.fieldName\"\r\n    [placeholder]=\"field()?.placeHolder\"\r\n    [maxLength]=\"field()?.validators?.maxLength\"\r\n    [minLength]=\"field()?.validators?.minLength\"\r\n    [disabled]=\"field()?.isDisable\"\r\n    [required]=\"field()?.validators?.isRequired\"\r\n    [pattern]=\"field()?.validators?.pattern\"\r\n    (input)=\"onInputChange($event)\"\r\n    (blur)=\"onInputBlur()\"\r\n    [value]=\"inputValue\"\r\n    [formControl]=\"reactiveFormControlobject()\"\r\n  />\r\n  }@else {\r\n  <input\r\n    matInput\r\n    autocomplete=\"none\"\r\n    [type]=\"field()?.controlType\"\r\n    [name]=\"field()?.fieldName\"\r\n    [id]=\"field()?.fieldName\"\r\n    [placeholder]=\"field()?.placeHolder\"\r\n    [maxLength]=\"field()?.validators?.maxLength\"\r\n    [minLength]=\"field()?.validators?.minLength\"\r\n    [disabled]=\"field()?.isDisable\"\r\n    [required]=\"field()?.validators?.isRequired\"\r\n    [pattern]=\"field()?.validators?.pattern\"\r\n    (input)=\"onInputChange($event)\"\r\n    (blur)=\"onInputBlur()\"\r\n    [value]=\"inputValue\"\r\n  />\r\n  }\r\n\r\n  <mat-error *ngIf=\"false\">\r\n    {{ field()?.validators?.isRequiredMessage }}\r\n  </mat-error>\r\n</mat-form-field>\r\n<div class=\"error-message\" *ngIf=\"false\">\r\n  {{ field()?.validators?.isRequiredMessage }}.\r\n</div>\r\n<div class=\"error-message\" *ngIf=\"false\">\r\n  {{ field()?.validators?.patternMessage }}.\r\n</div>\r\n", styles: [".field-lable{font-size:12px!important;font-weight:700!important;color:#444!important;margin-bottom:5px}.error-message{color:red}*{font-family:mulish!important}::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 , 7px)!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 , 7px) !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}\n"] }]
-        }], ctorParameters: () => [{ type: MasterControlService }] });
+                    ], template: "<label\r\n  class=\"field-lable\"\r\n  *ngIf=\"field() && field()?.isVisible && field().isShowLabel\"\r\n  >{{ field()?.label\r\n  }}<span style=\"color: red\" *ngIf=\"field() && field()?.validators?.isRequired\"\r\n    >*</span\r\n  ></label\r\n>\r\n<mat-form-field\r\n  class=\"w-100\"\r\n  appearance=\"outline\"\r\n  *ngIf=\"field() && field()?.isVisible\"\r\n  [ngStyle]=\"{\r\n'--custom-border-color': field()?.controlStyle?.borderColor ,\r\n'--custom-border-width': field()?.controlStyle?.borderWidth ,\r\n'--custom-border-radius': field()?.controlStyle?.borderRadius ,\r\n'--custom-bg-color': field()?.controlStyle?.background ,\r\n'--custom-border-color-focus': field()?.controlStyle?.focusBorderColor ,\r\n'--custom-border-width-focus': field()?.controlStyle?.focusBorderWidth ,\r\n'--custom-bg-color-focus': field()?.controlStyle?.focusBackground ,\r\n'--custom-border-color-hover': field()?.controlStyle?.hoverBorderColor ,\r\n'--custom-border-width-hover': field()?.controlStyle?.hoverBorderWidth ,\r\n'--custom-border-color-error': field()?.controlStyle?.errorBorderColor ,\r\n'--custom-border-width-error': field()?.controlStyle?.errorBorderWidth ,\r\n'--custom-font-size': field()?.controlStyle?.fontSize ,\r\n'--custom-font-weight': field()?.controlStyle?.fontWeight ,\r\n'--custom-font-family': field()?.controlStyle?.fontFamily ,\r\n'--custom-font-color': field()?.controlStyle?.color ,\r\n'--custom-caret-color': field()?.controlStyle?.caretColor ,\r\n'--custom-font-color-disabled' : field()?.controlStyle?.disableColor ,\r\n'--custom-bg-color-disabled' : field()?.controlStyle?.disableBackground ,\r\n'--custom-width': field()?.controlStyle?.width ,\r\n}\"\r\n>\r\n  @if(reactiveFormControlobject()) {\r\n  <input\r\n    matInput\r\n    autocomplete=\"none\"\r\n    [type]=\"field()?.controlType\"\r\n    [name]=\"field()?.fieldName\"\r\n    [id]=\"field()?.fieldName\"\r\n    [placeholder]=\"field()?.placeHolder\"\r\n    [maxLength]=\"field()?.validators?.maxLength\"\r\n    [minLength]=\"field()?.validators?.minLength\"\r\n    [disabled]=\"field()?.isDisable\"\r\n    [required]=\"field()?.validators?.isRequired\"\r\n    [pattern]=\"field()?.validators?.pattern\"\r\n    (input)=\"onInputChange($event)\"\r\n    (blur)=\"onInputBlur($event)\"\r\n    [value]=\"inputValue\"\r\n    [formControl]=\"reactiveFormControlobject()\"\r\n  />\r\n  }@else {\r\n  <input\r\n    matInput\r\n    autocomplete=\"none\"\r\n    [type]=\"field()?.controlType\"\r\n    [name]=\"field()?.fieldName\"\r\n    [id]=\"field()?.fieldName\"\r\n    [placeholder]=\"field()?.placeHolder\"\r\n    [maxLength]=\"field()?.validators?.maxLength\"\r\n    [minLength]=\"field()?.validators?.minLength\"\r\n    [disabled]=\"field()?.isDisable\"\r\n    [required]=\"field()?.validators?.isRequired\"\r\n    [pattern]=\"field()?.validators?.pattern\"\r\n    (input)=\"onInputChange($event)\"\r\n    (blur)=\"onInputBlur($event)\"\r\n    [value]=\"inputValue\"\r\n  />\r\n  }\r\n\r\n  <mat-error *ngIf=\"false\">\r\n    {{ field()?.validators?.isRequiredMessage }}\r\n  </mat-error>\r\n</mat-form-field>\r\n<div class=\"error-message\" *ngIf=\"false\">\r\n  {{ field()?.validators?.isRequiredMessage }}.\r\n</div>\r\n<div class=\"error-message\" *ngIf=\"false\">\r\n  {{ field()?.validators?.patternMessage }}.\r\n</div>\r\n", styles: [".field-lable{font-size:12px!important;font-weight:700!important;color:#444!important;margin-bottom:5px}.error-message{color:red}*{font-family:mulish!important}::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 , 7px)!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 , 7px) !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}\n"] }]
+        }], ctorParameters: () => [{ type: MasterControlService }], propDecorators: { blur: [{
+                type: Output
+            }] } });
 
 class ButtonComponent {
     masterService;
@@ -456,7 +461,7 @@ class RadioComponent {
                 useExisting: RadioComponent,
                 multi: true
             }
-        ], ngImport: i0, template: "<label class=\"field-lable\"  *ngIf=\"field() && field()?.isVisible && field().isShowLabel\" [ngStyle]=\"{\r\n  }\"> {{field()?.label}} <span class=\"error-message\" *ngIf=\"field()?.validators?.isRequired\">*</span> </label>\r\n  <mat-radio-group class=\"w-100\" *ngIf=\"field() && field()?.isVisible\"\r\n    class=\"radio-btn-group radio-btn-gender\"\r\n    [required]=\"field()?.validators?.isRequired\"\r\n    [value]=\"inputValue\"\r\n    >\r\n    <div\r\n      class=\"card radio-card-gender  py-auto px-1\"\r\n      *ngFor=\"let data of field()?.options\"\r\n      [ngClass]=\"{'disable-radio-btn': field()?.isDisable}\"\r\n       [ngStyle]=\"{\r\n    '--radio-button-border-color': inputValue === data.value ? field()?.controlStyle?.focusBorderColor : field()?.controlStyle?.borderColor,\r\n    '--radio-button-background-color': inputValue === data.value ? field()?.controlStyle?.focusBackground : field()?.controlStyle?.background,\r\n    '--radio-button-border-width': inputValue === data.value ? field()?.controlStyle?.focusBorderWidth : field()?.controlStyle?.borderWidth,\r\n    '--radio-button-border-radius': inputValue === data.value ? field()?.controlStyle?.borderRadius : field()?.controlStyle?.borderRadius,\r\n  }\"\r\n      >\r\n      <mat-radio-button\r\n        style=\"min-width: 72px; text-align: center;\"\r\n        class=\"radioButtonGender\"\r\n        (click)=\"onValueChange(data.value)\"\r\n        [value]=\"data.value\"\r\n      >\r\n        <span style=\"white-space: pre-line;\" class=\"forRadioLabel\" [ngStyle]=\"{\r\n    '--radio-button-font-weight': field()?.controlStyle?.fontWeight,\r\n    '--radio-button-font-size': field()?.controlStyle?.fontSize,\r\n    '--radio-button-font-color': field()?.controlStyle?.color,\r\n  }\">{{ data.label }}\r\n  <img class=\"radio-btn-icon\" *ngIf=\"field()?.imageUrl\" [src]=\"field()?.imageUrl\" alt=\"\">\r\n  </span>\r\n      </mat-radio-button>\r\n    </div>\r\n  </mat-radio-group>\r\n  <div class=\"error-message\" *ngIf=\"false\">\r\n    {{field()?.validators?.patternMessage}}.\r\n</div>\r\n", styles: [".radio-selection-border{border:1px solid #ffbb00!important;background:#fffaeb!important}*{font-family:mulish!important}.field-lable{font-size:10px!important;font-weight:700!important;color:#444!important;margin-bottom:0!important}.error-message{color:red}.radio-btn-group{display:flex;gap:6px;height:32px}::ng-deep .radio-btn-gender .mdc-form-field .mdc-radio{display:none!important}.radio-card-gender{box-shadow:none;border-color:var(--radio-button-border-color,#DADADA);border-width:var(--radio-button-border-width, 1px solid);background:var(--radio-button-background-color, #FFFFFF);display:flex;align-items:center;cursor:pointer;width:max-content!important;border-radius:var(--radio-button-border-radius, 6px)}::ng-deep .radioButtonGender .mdc-form-field .mdc-radio{display:none!important}.forRadioLabel{font-size:var(--radio-button-font-size, 12px)!important;font-weight:var(--radio-button-font-weight, 400);cursor:pointer;color:var(--radio-button-font-color, #444444)}.radio-btn-icon{margin-top:-2px;margin-left:4px}.selected-radio-btn{border:1px solid #ffbb00!important}.disable-radio-btn{background:#f5f5f5;border:1px solid var(--Colors-Greys-Border-Grey, rgba(221, 221, 221, 1));pointer-events:none;cursor:none}\n"], dependencies: [{ kind: "ngmodule", type: MatRadioModule }, { kind: "directive", type: i2$1.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i2$1.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: ReactiveFormsModule }] });
+        ], ngImport: i0, template: "<label class=\"field-lable\"  *ngIf=\"field() && field()?.isVisible && field().isShowLabel\" [ngStyle]=\"{\r\n  }\"> {{field()?.label}} <span class=\"error-message\" *ngIf=\"field()?.validators?.isRequired\">*</span> </label>\r\n  <mat-radio-group class=\"w-100\" *ngIf=\"field() && field()?.isVisible\"\r\n    class=\"radio-btn-group radio-btn-gender\"\r\n    [required]=\"field()?.validators?.isRequired\"\r\n    [value]=\"inputValue\"\r\n    >\r\n    <div\r\n      class=\"card radio-card-gender py-auto px-1\"\r\n      style=\"width: 100% !important;\"\r\n      *ngFor=\"let data of field()?.options\"\r\n      [ngClass]=\"{'disable-radio-btn': field()?.isDisable}\"\r\n       [ngStyle]=\"{\r\n    '--radio-button-border-color': inputValue === data.value ? field()?.controlStyle?.focusBorderColor : field()?.controlStyle?.borderColor,\r\n    '--radio-button-background-color': inputValue === data.value ? field()?.controlStyle?.focusBackground : field()?.controlStyle?.background,\r\n    '--radio-button-border-width': inputValue === data.value ? field()?.controlStyle?.focusBorderWidth : field()?.controlStyle?.borderWidth,\r\n    '--radio-button-border-radius': inputValue === data.value ? field()?.controlStyle?.borderRadius : field()?.controlStyle?.borderRadius,\r\n  }\"\r\n      >\r\n      <mat-radio-button\r\n        style=\"min-width: 72px; text-align: center;\"\r\n        class=\"radioButtonGender\"\r\n        (click)=\"onValueChange(data.value)\"\r\n        [value]=\"data.value\"\r\n      >\r\n        <span style=\"white-space: pre-line;\" class=\"forRadioLabel\" [ngStyle]=\"{\r\n    '--radio-button-font-weight': field()?.controlStyle?.fontWeight,\r\n    '--radio-button-font-size': field()?.controlStyle?.fontSize,\r\n    '--radio-button-font-color': field()?.controlStyle?.color,\r\n  }\">{{ data.label }}\r\n  <img class=\"radio-btn-icon\" *ngIf=\"field()?.imageUrl\" [src]=\"field()?.imageUrl\" alt=\"\">\r\n  </span>\r\n      </mat-radio-button>\r\n    </div>\r\n  </mat-radio-group>\r\n  <div class=\"error-message\" *ngIf=\"false\">\r\n    {{field()?.validators?.patternMessage}}.\r\n</div>\r\n", styles: [".radio-selection-border{border:1px solid #ffbb00!important;background:#fffaeb!important}*{font-family:mulish!important}.field-lable{font-size:10px!important;font-weight:700!important;color:#444!important;margin-bottom:0!important}.error-message{color:red}.radio-btn-group{display:flex;gap:6px;height:32px}::ng-deep .radio-btn-gender .mdc-form-field .mdc-radio{display:none!important}.radio-card-gender{box-shadow:none;border-color:var(--radio-button-border-color,#DADADA);border-width:var(--radio-button-border-width, 1px solid);background:var(--radio-button-background-color, #FFFFFF);display:flex;align-items:center;cursor:pointer;width:max-content!important;border-radius:var(--radio-button-border-radius, 6px)}::ng-deep .radioButtonGender .mdc-form-field .mdc-radio{display:none!important}.forRadioLabel{font-size:var(--radio-button-font-size, 12px)!important;font-weight:var(--radio-button-font-weight, 400);cursor:pointer;color:var(--radio-button-font-color, #444444)}.radio-btn-icon{margin-top:-2px;margin-left:4px}.selected-radio-btn{border:1px solid #ffbb00!important}.disable-radio-btn{background:#f5f5f5;border:1px solid var(--Colors-Greys-Border-Grey, rgba(221, 221, 221, 1));pointer-events:none;cursor:none}\n"], dependencies: [{ kind: "ngmodule", type: MatRadioModule }, { kind: "directive", type: i2$1.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i2$1.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: ReactiveFormsModule }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RadioComponent, decorators: [{
             type: Component,
@@ -470,7 +475,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                             useExisting: RadioComponent,
                             multi: true
                         }
-                    ], template: "<label class=\"field-lable\"  *ngIf=\"field() && field()?.isVisible && field().isShowLabel\" [ngStyle]=\"{\r\n  }\"> {{field()?.label}} <span class=\"error-message\" *ngIf=\"field()?.validators?.isRequired\">*</span> </label>\r\n  <mat-radio-group class=\"w-100\" *ngIf=\"field() && field()?.isVisible\"\r\n    class=\"radio-btn-group radio-btn-gender\"\r\n    [required]=\"field()?.validators?.isRequired\"\r\n    [value]=\"inputValue\"\r\n    >\r\n    <div\r\n      class=\"card radio-card-gender  py-auto px-1\"\r\n      *ngFor=\"let data of field()?.options\"\r\n      [ngClass]=\"{'disable-radio-btn': field()?.isDisable}\"\r\n       [ngStyle]=\"{\r\n    '--radio-button-border-color': inputValue === data.value ? field()?.controlStyle?.focusBorderColor : field()?.controlStyle?.borderColor,\r\n    '--radio-button-background-color': inputValue === data.value ? field()?.controlStyle?.focusBackground : field()?.controlStyle?.background,\r\n    '--radio-button-border-width': inputValue === data.value ? field()?.controlStyle?.focusBorderWidth : field()?.controlStyle?.borderWidth,\r\n    '--radio-button-border-radius': inputValue === data.value ? field()?.controlStyle?.borderRadius : field()?.controlStyle?.borderRadius,\r\n  }\"\r\n      >\r\n      <mat-radio-button\r\n        style=\"min-width: 72px; text-align: center;\"\r\n        class=\"radioButtonGender\"\r\n        (click)=\"onValueChange(data.value)\"\r\n        [value]=\"data.value\"\r\n      >\r\n        <span style=\"white-space: pre-line;\" class=\"forRadioLabel\" [ngStyle]=\"{\r\n    '--radio-button-font-weight': field()?.controlStyle?.fontWeight,\r\n    '--radio-button-font-size': field()?.controlStyle?.fontSize,\r\n    '--radio-button-font-color': field()?.controlStyle?.color,\r\n  }\">{{ data.label }}\r\n  <img class=\"radio-btn-icon\" *ngIf=\"field()?.imageUrl\" [src]=\"field()?.imageUrl\" alt=\"\">\r\n  </span>\r\n      </mat-radio-button>\r\n    </div>\r\n  </mat-radio-group>\r\n  <div class=\"error-message\" *ngIf=\"false\">\r\n    {{field()?.validators?.patternMessage}}.\r\n</div>\r\n", styles: [".radio-selection-border{border:1px solid #ffbb00!important;background:#fffaeb!important}*{font-family:mulish!important}.field-lable{font-size:10px!important;font-weight:700!important;color:#444!important;margin-bottom:0!important}.error-message{color:red}.radio-btn-group{display:flex;gap:6px;height:32px}::ng-deep .radio-btn-gender .mdc-form-field .mdc-radio{display:none!important}.radio-card-gender{box-shadow:none;border-color:var(--radio-button-border-color,#DADADA);border-width:var(--radio-button-border-width, 1px solid);background:var(--radio-button-background-color, #FFFFFF);display:flex;align-items:center;cursor:pointer;width:max-content!important;border-radius:var(--radio-button-border-radius, 6px)}::ng-deep .radioButtonGender .mdc-form-field .mdc-radio{display:none!important}.forRadioLabel{font-size:var(--radio-button-font-size, 12px)!important;font-weight:var(--radio-button-font-weight, 400);cursor:pointer;color:var(--radio-button-font-color, #444444)}.radio-btn-icon{margin-top:-2px;margin-left:4px}.selected-radio-btn{border:1px solid #ffbb00!important}.disable-radio-btn{background:#f5f5f5;border:1px solid var(--Colors-Greys-Border-Grey, rgba(221, 221, 221, 1));pointer-events:none;cursor:none}\n"] }]
+                    ], template: "<label class=\"field-lable\"  *ngIf=\"field() && field()?.isVisible && field().isShowLabel\" [ngStyle]=\"{\r\n  }\"> {{field()?.label}} <span class=\"error-message\" *ngIf=\"field()?.validators?.isRequired\">*</span> </label>\r\n  <mat-radio-group class=\"w-100\" *ngIf=\"field() && field()?.isVisible\"\r\n    class=\"radio-btn-group radio-btn-gender\"\r\n    [required]=\"field()?.validators?.isRequired\"\r\n    [value]=\"inputValue\"\r\n    >\r\n    <div\r\n      class=\"card radio-card-gender py-auto px-1\"\r\n      style=\"width: 100% !important;\"\r\n      *ngFor=\"let data of field()?.options\"\r\n      [ngClass]=\"{'disable-radio-btn': field()?.isDisable}\"\r\n       [ngStyle]=\"{\r\n    '--radio-button-border-color': inputValue === data.value ? field()?.controlStyle?.focusBorderColor : field()?.controlStyle?.borderColor,\r\n    '--radio-button-background-color': inputValue === data.value ? field()?.controlStyle?.focusBackground : field()?.controlStyle?.background,\r\n    '--radio-button-border-width': inputValue === data.value ? field()?.controlStyle?.focusBorderWidth : field()?.controlStyle?.borderWidth,\r\n    '--radio-button-border-radius': inputValue === data.value ? field()?.controlStyle?.borderRadius : field()?.controlStyle?.borderRadius,\r\n  }\"\r\n      >\r\n      <mat-radio-button\r\n        style=\"min-width: 72px; text-align: center;\"\r\n        class=\"radioButtonGender\"\r\n        (click)=\"onValueChange(data.value)\"\r\n        [value]=\"data.value\"\r\n      >\r\n        <span style=\"white-space: pre-line;\" class=\"forRadioLabel\" [ngStyle]=\"{\r\n    '--radio-button-font-weight': field()?.controlStyle?.fontWeight,\r\n    '--radio-button-font-size': field()?.controlStyle?.fontSize,\r\n    '--radio-button-font-color': field()?.controlStyle?.color,\r\n  }\">{{ data.label }}\r\n  <img class=\"radio-btn-icon\" *ngIf=\"field()?.imageUrl\" [src]=\"field()?.imageUrl\" alt=\"\">\r\n  </span>\r\n      </mat-radio-button>\r\n    </div>\r\n  </mat-radio-group>\r\n  <div class=\"error-message\" *ngIf=\"false\">\r\n    {{field()?.validators?.patternMessage}}.\r\n</div>\r\n", styles: [".radio-selection-border{border:1px solid #ffbb00!important;background:#fffaeb!important}*{font-family:mulish!important}.field-lable{font-size:10px!important;font-weight:700!important;color:#444!important;margin-bottom:0!important}.error-message{color:red}.radio-btn-group{display:flex;gap:6px;height:32px}::ng-deep .radio-btn-gender .mdc-form-field .mdc-radio{display:none!important}.radio-card-gender{box-shadow:none;border-color:var(--radio-button-border-color,#DADADA);border-width:var(--radio-button-border-width, 1px solid);background:var(--radio-button-background-color, #FFFFFF);display:flex;align-items:center;cursor:pointer;width:max-content!important;border-radius:var(--radio-button-border-radius, 6px)}::ng-deep .radioButtonGender .mdc-form-field .mdc-radio{display:none!important}.forRadioLabel{font-size:var(--radio-button-font-size, 12px)!important;font-weight:var(--radio-button-font-weight, 400);cursor:pointer;color:var(--radio-button-font-color, #444444)}.radio-btn-icon{margin-top:-2px;margin-left:4px}.selected-radio-btn{border:1px solid #ffbb00!important}.disable-radio-btn{background:#f5f5f5;border:1px solid var(--Colors-Greys-Border-Grey, rgba(221, 221, 221, 1));pointer-events:none;cursor:none}\n"] }]
         }], ctorParameters: () => [{ type: MasterControlService }] });
 
 class ToggleComponent {
@@ -619,6 +624,8 @@ class MobNumberComponent {
     reactiveFormControlobject = input();
     _onChange = (inputValue) => { };
     _unTouched = () => { };
+    // Declare Output event emitter here (class level)
+    blur = new EventEmitter();
     writeValue(obj) {
         this.inputValue = obj;
     }
@@ -637,17 +644,18 @@ class MobNumberComponent {
         this.inputValue = event.target.value;
         this._onChange(this.inputValue);
     }
-    onInputBlur() {
+    onInputBlur(event) {
         this._unTouched();
+        this.blur.emit(event);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MobNumberComponent, deps: [{ token: MasterControlService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: MobNumberComponent, isStandalone: true, selector: "lib-mob-number", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, reactiveFormControlobject: { classPropertyName: "reactiveFormControlobject", publicName: "reactiveFormControlobject", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: MobNumberComponent, isStandalone: true, selector: "lib-mob-number", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, reactiveFormControlobject: { classPropertyName: "reactiveFormControlobject", publicName: "reactiveFormControlobject", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { blur: "blur" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: MobNumberComponent,
                 multi: true
             }
-        ], ngImport: i0, template: "<label class=\"field-lable\" *ngIf=\"field() && field()?.isVisible && field().isShowLabel\">{{field()?.label}}<span style=\"color: red;\" *ngIf=\"field() && field()?.validators?.isRequired\">*</span></label>\r\n<mat-form-field\r\n  class=\"w-100 mobile-field\"\r\n  appearance=\"outline\"\r\n  *ngIf=\"field() && field()?.isVisible\"\r\n  [ngStyle]=\"{\r\n    '--custom-border-color': field()?.controlStyle?.borderColor ,\r\n    '--custom-border-width': field()?.controlStyle?.borderWidth ,\r\n    '--custom-border-radius': field()?.controlStyle?.borderRadius ,\r\n    '--custom-border-color-focus': field()?.controlStyle?.focusBorderColor ,\r\n    '--custom-border-width-focus': field()?.controlStyle?.focusBorderWidth ,\r\n    '--custom-border-color-hover': field()?.controlStyle?.hoverBorderColor ,\r\n    '--custom-border-width-hover': field()?.controlStyle?.hoverBorderWidth ,\r\n    '--custom-border-color-error': field()?.controlStyle?.errorBorderColor ,\r\n    '--custom-border-width-error': field()?.controlStyle?.errorBorderWidth ,\r\n    '--custom-font-size': field()?.controlStyle?.fontSize ,\r\n    '--custom-font-weight': field()?.controlStyle?.fontWeight ,\r\n    '--custom-font-family': field()?.controlStyle?.fontFamily ,\r\n    '--custom-font-color': field()?.controlStyle?.color ,\r\n    '--custom-caret-color': field()?.controlStyle?.caretColor ,\r\n'--custom-font-color-disabled' : field()?.controlStyle?.disableColor ,\r\n'--custom-bg-color-disabled' : field()?.controlStyle?.disableBackground ,\r\n    }\"\r\n>\r\n  <div matTextPrefix class=\"prefix_alternate_mobile primary\">\r\n    <div class=\"d-flex countryCode\">\r\n      <span class=\"country_code_input\"> {{ CountryCode }} </span>\r\n      <span *ngIf=\"false\"\r\n        ><img src=\"https://cdn.godigit.com/retail-life/down-arrow.svg\" alt=\"\"\r\n      /></span>\r\n    </div>\r\n  </div>\r\n   @if(reactiveFormControlobject()) {\r\n    <input\r\n    matInput\r\n    autocomplete=\"none\"\r\n    [type]=\"field()?.controlType\"\r\n    [name]=\"field()?.fieldName\"\r\n    [id]=\"field()?.fieldName\"\r\n    [placeholder]=\"field()?.placeHolder\"\r\n    [maxLength]=\"field()?.validators?.maxLength\"\r\n    [minLength]=\"field()?.validators?.minLength\"\r\n    [disabled]=\"field()?.isDisable\"\r\n    [required]=\"field()?.validators?.isRequired\"\r\n    [pattern]=\"field()?.validators?.pattern\"\r\n    (input)=\"onInputChange($event)\"\r\n    (blur)=\"onInputBlur()\"\r\n    [value]=\"inputValue\"\r\n    [formControl]=\"reactiveFormControlobject()\"\r\n  />\r\n   }@else {\r\n    <input\r\n    matInput\r\n    autocomplete=\"none\"\r\n    [type]=\"field()?.controlType\"\r\n    [name]=\"field()?.fieldName\"\r\n    [id]=\"field()?.fieldName\"\r\n    [placeholder]=\"field()?.placeHolder\"\r\n    [maxLength]=\"field()?.validators?.maxLength\"\r\n    [minLength]=\"field()?.validators?.minLength\"\r\n    [disabled]=\"field()?.isDisable\"\r\n    [required]=\"field()?.validators?.isRequired\"\r\n    [pattern]=\"field()?.validators?.pattern\"\r\n    (input)=\"onInputChange($event)\"\r\n    (blur)=\"onInputBlur()\"\r\n    [value]=\"inputValue\"\r\n  />\r\n   }\r\n  \r\n  <span matSuffix class=\"p-3\" *ngIf=\"false\">\r\n    <img src=\"https://cdn.godigit.com/retail-life/edit-icon.svg\" alt=\"\" />\r\n  </span>\r\n  <mat-error *ngIf=\"false\">\r\n    {{ field()?.validators?.isRequiredMessage }}\r\n  </mat-error>\r\n</mat-form-field>\r\n<div class=\"error-message\" *ngIf=\"false\">\r\n  {{ field()?.validators?.isRequiredMessage }}.\r\n</div>\r\n<div class=\"error-message\" *ngIf=\"false\">\r\n  {{ field()?.validators?.patternMessage }}.\r\n</div>\r\n", styles: [".field-lable{font-size:10px!important;font-weight:700!important;color:#444!important;margin-bottom:0!important}.mobile-field .mat-mdc-form-field:not(.mat-form-field-disabled) .mat-mdc-floating-label.mdc-floating-label{transform:var(--mat-mdc-form-field-label-transform, translateY(-50%) translateX(calc(1 * (61.625px + var(--mat-mdc-form-field-label-offset-x, 0px)))))!important}*{font-family:mulish!important}.prefix_alternate_mobile{font-size:12px;font-weight:400;color:#8f8f8f;padding:10px 6px 10px 0;border-right:1px solid #dddddd;height:20px;width:auto;display:flex;justify-content:center;align-items:center;position:relative;cursor:pointer;transform:translate(-6px)}.countryCode{gap:4px}.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 , 7px)!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 , 7px) !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}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i1.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.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatSelectModule }, { kind: "ngmodule", type: MatOptionModule }, { 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 class=\"field-lable\" *ngIf=\"field() && field()?.isVisible && field().isShowLabel\">{{field()?.label}}<span style=\"color: red;\" *ngIf=\"field() && field()?.validators?.isRequired\">*</span></label>\r\n<mat-form-field\r\n  class=\"w-100 mobile-field\"\r\n  appearance=\"outline\"\r\n  *ngIf=\"field() && field()?.isVisible\"\r\n  [ngStyle]=\"{\r\n    '--custom-border-color': field()?.controlStyle?.borderColor ,\r\n    '--custom-border-width': field()?.controlStyle?.borderWidth ,\r\n    '--custom-border-radius': field()?.controlStyle?.borderRadius ,\r\n    '--custom-border-color-focus': field()?.controlStyle?.focusBorderColor ,\r\n    '--custom-border-width-focus': field()?.controlStyle?.focusBorderWidth ,\r\n    '--custom-border-color-hover': field()?.controlStyle?.hoverBorderColor ,\r\n    '--custom-border-width-hover': field()?.controlStyle?.hoverBorderWidth ,\r\n    '--custom-border-color-error': field()?.controlStyle?.errorBorderColor ,\r\n    '--custom-border-width-error': field()?.controlStyle?.errorBorderWidth ,\r\n    '--custom-font-size': field()?.controlStyle?.fontSize ,\r\n    '--custom-font-weight': field()?.controlStyle?.fontWeight ,\r\n    '--custom-font-family': field()?.controlStyle?.fontFamily ,\r\n    '--custom-font-color': field()?.controlStyle?.color ,\r\n    '--custom-caret-color': field()?.controlStyle?.caretColor ,\r\n'--custom-font-color-disabled' : field()?.controlStyle?.disableColor ,\r\n'--custom-bg-color-disabled' : field()?.controlStyle?.disableBackground ,\r\n    }\"\r\n>\r\n  <div matTextPrefix class=\"prefix_alternate_mobile primary\">\r\n    <div class=\"d-flex countryCode\">\r\n      <span class=\"country_code_input\"> {{ CountryCode }} </span>\r\n      <span *ngIf=\"false\"\r\n        ><img src=\"https://cdn.godigit.com/retail-life/down-arrow.svg\" alt=\"\"\r\n      /></span>\r\n    </div>\r\n  </div>\r\n   @if(reactiveFormControlobject()) {\r\n    <input\r\n    matInput\r\n    autocomplete=\"none\"\r\n    [type]=\"field()?.controlType\"\r\n    [name]=\"field()?.fieldName\"\r\n    [id]=\"field()?.fieldName\"\r\n    [placeholder]=\"field()?.placeHolder\"\r\n    [maxLength]=\"field()?.validators?.maxLength\"\r\n    [minLength]=\"field()?.validators?.minLength\"\r\n    [disabled]=\"field()?.isDisable\"\r\n    [required]=\"field()?.validators?.isRequired\"\r\n    [pattern]=\"field()?.validators?.pattern\"\r\n    (input)=\"onInputChange($event)\"\r\n    (blur)=\"onInputBlur($event)\"\r\n    [value]=\"inputValue\"\r\n    [formControl]=\"reactiveFormControlobject()\"\r\n  />\r\n   }@else {\r\n    <input\r\n    matInput\r\n    autocomplete=\"none\"\r\n    [type]=\"field()?.controlType\"\r\n    [name]=\"field()?.fieldName\"\r\n    [id]=\"field()?.fieldName\"\r\n    [placeholder]=\"field()?.placeHolder\"\r\n    [maxLength]=\"field()?.validators?.maxLength\"\r\n    [minLength]=\"field()?.validators?.minLength\"\r\n    [disabled]=\"field()?.isDisable\"\r\n    [required]=\"field()?.validators?.isRequired\"\r\n    [pattern]=\"field()?.validators?.pattern\"\r\n    (input)=\"onInputChange($event)\"\r\n    (blur)=\"onInputBlur($event)\"\r\n    [value]=\"inputValue\"\r\n  />\r\n   }\r\n  \r\n  <span matSuffix class=\"p-3\" *ngIf=\"false\">\r\n    <img src=\"https://cdn.godigit.com/retail-life/edit-icon.svg\" alt=\"\" />\r\n  </span>\r\n  <mat-error *ngIf=\"false\">\r\n    {{ field()?.validators?.isRequiredMessage }}\r\n  </mat-error>\r\n</mat-form-field>\r\n<div class=\"error-message\" *ngIf=\"false\">\r\n  {{ field()?.validators?.isRequiredMessage }}.\r\n</div>\r\n<div class=\"error-message\" *ngIf=\"false\">\r\n  {{ field()?.validators?.patternMessage }}.\r\n</div>\r\n", styles: [".field-lable{font-size:10px!important;font-weight:700!important;color:#444!important;margin-bottom:0!important}.mobile-field .mat-mdc-form-field:not(.mat-form-field-disabled) .mat-mdc-floating-label.mdc-floating-label{transform:var(--mat-mdc-form-field-label-transform, translateY(-50%) translateX(calc(1 * (61.625px + var(--mat-mdc-form-field-label-offset-x, 0px)))))!important}*{font-family:mulish!important}.prefix_alternate_mobile{font-size:12px;font-weight:400;color:#8f8f8f;padding:10px 6px 10px 0;border-right:1px solid #dddddd;height:20px;width:auto;display:flex;justify-content:center;align-items:center;position:relative;cursor:pointer;transform:translate(-6px)}.countryCode{gap:4px}.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 , 7px)!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 , 7px) !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}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i1.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.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatSelectModule }, { kind: "ngmodule", type: MatOptionModule }, { 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: MobNumberComponent, decorators: [{
             type: Component,
@@ -657,8 +665,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                             useExisting: MobNumberComponent,
                             multi: true
                         }
-                    ], template: "<label class=\"field-lable\" *ngIf=\"field() && field()?.isVisible && field().isShowLabel\">{{field()?.label}}<span style=\"color: red;\" *ngIf=\"field() && field()?.validators?.isRequired\">*</span></label>\r\n<mat-form-field\r\n  class=\"w-100 mobile-field\"\r\n  appearance=\"outline\"\r\n  *ngIf=\"field() && field()?.isVisible\"\r\n  [ngStyle]=\"{\r\n    '--custom-border-color': field()?.controlStyle?.borderColor ,\r\n    '--custom-border-width': field()?.controlStyle?.borderWidth ,\r\n    '--custom-border-radius': field()?.controlStyle?.borderRadius ,\r\n    '--custom-border-color-focus': field()?.controlStyle?.focusBorderColor ,\r\n    '--custom-border-width-focus': field()?.controlStyle?.focusBorderWidth ,\r\n    '--custom-border-color-hover': field()?.controlStyle?.hoverBorderColor ,\r\n    '--custom-border-width-hover': field()?.controlStyle?.hoverBorderWidth ,\r\n    '--custom-border-color-error': field()?.controlStyle?.errorBorderColor ,\r\n    '--custom-border-width-error': field()?.controlStyle?.errorBorderWidth ,\r\n    '--custom-font-size': field()?.controlStyle?.fontSize ,\r\n    '--custom-font-weight': field()?.controlStyle?.fontWeight ,\r\n    '--custom-font-family': field()?.controlStyle?.fontFamily ,\r\n    '--custom-font-color': field()?.controlStyle?.color ,\r\n    '--custom-caret-color': field()?.controlStyle?.caretColor ,\r\n'--custom-font-color-disabled' : field()?.controlStyle?.disableColor ,\r\n'--custom-bg-color-disabled' : field()?.controlStyle?.disableBackground ,\r\n    }\"\r\n>\r\n  <div matTextPrefix class=\"prefix_alternate_mobile primary\">\r\n    <div class=\"d-flex countryCode\">\r\n      <span class=\"country_code_input\"> {{ CountryCode }} </span>\r\n      <span *ngIf=\"false\"\r\n        ><img src=\"https://cdn.godigit.com/retail-life/down-arrow.svg\" alt=\"\"\r\n      /></span>\r\n    </div>\r\n  </div>\r\n   @if(reactiveFormControlobject()) {\r\n    <input\r\n    matInput\r\n    autocomplete=\"none\"\r\n    [type]=\"field()?.controlType\"\r\n    [name]=\"field()?.fieldName\"\r\n    [id]=\"field()?.fieldName\"\r\n    [placeholder]=\"field()?.placeHolder\"\r\n    [maxLength]=\"field()?.validators?.maxLength\"\r\n    [minLength]=\"field()?.validators?.minLength\"\r\n    [disabled]=\"field()?.isDisable\"\r\n    [required]=\"field()?.validators?.isRequired\"\r\n    [pattern]=\"field()?.validators?.pattern\"\r\n    (input)=\"onInputChange($event)\"\r\n    (blur)=\"onInputBlur()\"\r\n    [value]=\"inputValue\"\r\n    [formControl]=\"reactiveFormControlobject()\"\r\n  />\r\n   }@else {\r\n    <input\r\n    matInput\r\n    autocomplete=\"none\"\r\n    [type]=\"field()?.controlType\"\r\n    [name]=\"field()?.fieldName\"\r\n    [id]=\"field()?.fieldName\"\r\n    [placeholder]=\"field()?.placeHolder\"\r\n    [maxLength]=\"field()?.validators?.maxLength\"\r\n    [minLength]=\"field()?.validators?.minLength\"\r\n    [disabled]=\"field()?.isDisable\"\r\n    [required]=\"field()?.validators?.isRequired\"\r\n    [pattern]=\"field()?.validators?.pattern\"\r\n    (input)=\"onInputChange($event)\"\r\n    (blur)=\"onInputBlur()\"\r\n    [value]=\"inputValue\"\r\n  />\r\n   }\r\n  \r\n  <span matSuffix class=\"p-3\" *ngIf=\"false\">\r\n    <img src=\"https://cdn.godigit.com/retail-life/edit-icon.svg\" alt=\"\" />\r\n  </span>\r\n  <mat-error *ngIf=\"false\">\r\n    {{ field()?.validators?.isRequiredMessage }}\r\n  </mat-error>\r\n</mat-form-field>\r\n<div class=\"error-message\" *ngIf=\"false\">\r\n  {{ field()?.validators?.isRequiredMessage }}.\r\n</div>\r\n<div class=\"error-message\" *ngIf=\"false\">\r\n  {{ field()?.validators?.patternMessage }}.\r\n</div>\r\n", styles: [".field-lable{font-size:10px!important;font-weight:700!important;color:#444!important;margin-bottom:0!important}.mobile-field .mat-mdc-form-field:not(.mat-form-field-disabled) .mat-mdc-floating-label.mdc-floating-label{transform:var(--mat-mdc-form-field-label-transform, translateY(-50%) translateX(calc(1 * (61.625px + var(--mat-mdc-form-field-label-offset-x, 0px)))))!important}*{font-family:mulish!important}.prefix_alternate_mobile{font-size:12px;font-weight:400;color:#8f8f8f;padding:10px 6px 10px 0;border-right:1px solid #dddddd;height:20px;width:auto;display:flex;justify-content:center;align-items:center;position:relative;cursor:pointer;transform:translate(-6px)}.countryCode{gap:4px}.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 , 7px)!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 , 7px) !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}\n"] }]
-        }], ctorParameters: () => [{ type: MasterControlService }] });
+                    ], template: "<label class=\"field-lable\" *ngIf=\"field() && field()?.isVisible && field().isShowLabel\">{{field()?.label}}<span style=\"color: red;\" *ngIf=\"field() && field()?.validators?.isRequired\">*</span></label>\r\n<mat-form-field\r\n  class=\"w-100 mobile-field\"\r\n  appearance=\"outline\"\r\n  *ngIf=\"field() && field()?.isVisible\"\r\n  [ngStyle]=\"{\r\n    '--custom-border-color': field()?.controlStyle?.borderColor ,\r\n    '--custom-border-width': field()?.controlStyle?.borderWidth ,\r\n    '--custom-border-radius': field()?.controlStyle?.borderRadius ,\r\n    '--custom-border-color-focus': field()?.controlStyle?.focusBorderColor ,\r\n    '--custom-border-width-focus': field()?.controlStyle?.focusBorderWidth ,\r\n    '--custom-border-color-hover': field()?.controlStyle?.hoverBorderColor ,\r\n    '--custom-border-width-hover': field()?.controlStyle?.hoverBorderWidth ,\r\n    '--custom-border-color-error': field()?.controlStyle?.errorBorderColor ,\r\n    '--custom-border-width-error': field()?.controlStyle?.errorBorderWidth ,\r\n    '--custom-font-size': field()?.controlStyle?.fontSize ,\r\n    '--custom-font-weight': field()?.controlStyle?.fontWeight ,\r\n    '--custom-font-family': field()?.controlStyle?.fontFamily ,\r\n    '--custom-font-color': field()?.controlStyle?.color ,\r\n    '--custom-caret-color': field()?.controlStyle?.caretColor ,\r\n'--custom-font-color-disabled' : field()?.controlStyle?.disableColor ,\r\n'--custom-bg-color-disabled' : field()?.controlStyle?.disableBackground ,\r\n    }\"\r\n>\r\n  <div matTextPrefix class=\"prefix_alternate_mobile primary\">\r\n    <div class=\"d-flex countryCode\">\r\n      <span class=\"country_code_input\"> {{ CountryCode }} </span>\r\n      <span *ngIf=\"false\"\r\n        ><img src=\"https://cdn.godigit.com/retail-life/down-arrow.svg\" alt=\"\"\r\n      /></span>\r\n    </div>\r\n  </div>\r\n   @if(reactiveFormControlobject()) {\r\n    <input\r\n    matInput\r\n    autocomplete=\"none\"\r\n    [type]=\"field()?.controlType\"\r\n    [name]=\"field()?.fieldName\"\r\n    [id]=\"field()?.fieldName\"\r\n    [placeholder]=\"field()?.placeHolder\"\r\n    [maxLength]=\"field()?.validators?.maxLength\"\r\n    [minLength]=\"field()?.validators?.minLength\"\r\n    [disabled]=\"field()?.isDisable\"\r\n    [required]=\"field()?.validators?.isRequired\"\r\n    [pattern]=\"field()?.validators?.pattern\"\r\n    (input)=\"onInputChange($event)\"\r\n    (blur)=\"onInputBlur($event)\"\r\n    [value]=\"inputValue\"\r\n    [formControl]=\"reactiveFormControlobject()\"\r\n  />\r\n   }@else {\r\n    <input\r\n    matInput\r\n    autocomplete=\"none\"\r\n    [type]=\"field()?.controlType\"\r\n    [name]=\"field()?.fieldName\"\r\n    [id]=\"field()?.fieldName\"\r\n    [placeholder]=\"field()?.placeHolder\"\r\n    [maxLength]=\"field()?.validators?.maxLength\"\r\n    [minLength]=\"field()?.validators?.minLength\"\r\n    [disabled]=\"field()?.isDisable\"\r\n    [required]=\"field()?.validators?.isRequired\"\r\n    [pattern]=\"field()?.validators?.pattern\"\r\n    (input)=\"onInputChange($event)\"\r\n    (blur)=\"onInputBlur($event)\"\r\n    [value]=\"inputValue\"\r\n  />\r\n   }\r\n  \r\n  <span matSuffix class=\"p-3\" *ngIf=\"false\">\r\n    <img src=\"https://cdn.godigit.com/retail-life/edit-icon.svg\" alt=\"\" />\r\n  </span>\r\n  <mat-error *ngIf=\"false\">\r\n    {{ field()?.validators?.isRequiredMessage }}\r\n  </mat-error>\r\n</mat-form-field>\r\n<div class=\"error-message\" *ngIf=\"false\">\r\n  {{ field()?.validators?.isRequiredMessage }}.\r\n</div>\r\n<div class=\"error-message\" *ngIf=\"false\">\r\n  {{ field()?.validators?.patternMessage }}.\r\n</div>\r\n", styles: [".field-lable{font-size:10px!important;font-weight:700!important;color:#444!important;margin-bottom:0!important}.mobile-field .mat-mdc-form-field:not(.mat-form-field-disabled) .mat-mdc-floating-label.mdc-floating-label{transform:var(--mat-mdc-form-field-label-transform, translateY(-50%) translateX(calc(1 * (61.625px + var(--mat-mdc-form-field-label-offset-x, 0px)))))!important}*{font-family:mulish!important}.prefix_alternate_mobile{font-size:12px;font-weight:400;color:#8f8f8f;padding:10px 6px 10px 0;border-right:1px solid #dddddd;height:20px;width:auto;display:flex;justify-content:center;align-items:center;position:relative;cursor:pointer;transform:translate(-6px)}.countryCode{gap:4px}.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 , 7px)!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 , 7px) !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}\n"] }]
+        }], ctorParameters: () => [{ type: MasterControlService }], propDecorators: { blur: [{
+                type: Output
+            }] } });
 
 class InfoComponent {
     masterService;
@@ -681,6 +691,7 @@ class CheckboxComponent {
     }
     field = input.required();
     inputValue = null;
+    change = new EventEmitter();
     _onChange = (inputValue) => { };
     _unTouched = () => { };
     writeValue(obj) {
@@ -706,6 +717,7 @@ class CheckboxComponent {
         this.inputValue = event.checked;
         this._onChange(this.inputValue);
         this._unTouched();
+        this.change.emit({ event, field: this.field() });
         const css = this.field()?.controlStyle;
         if (event.checked) {
             document.body.style.setProperty('--custom-checkbox-border-focus', css?.focusBorderColor || '#ffbb00');
@@ -726,7 +738,7 @@ class CheckboxComponent {
         this._unTouched();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CheckboxComponent, deps: [{ token: MasterControlService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: CheckboxComponent, isStandalone: true, selector: "lib-checkbox", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: CheckboxComponent, isStandalone: true, selector: "lib-checkbox", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { change: "change" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: CheckboxComponent,
@@ -743,7 +755,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                             multi: true
                         }
                     ], template: "<mat-checkbox *ngIf=\"field() && field()?.isVisible\"\r\n  [name]=\"field()?.fieldName\"\r\n  [id]=\"field()?.fieldName\"\r\n  [disabled]=\"field()?.isDisable\"\r\n  [required]=\"field()?.validators?.isRequired\"\r\n  [checked]=\"inputValue\"\r\n  (change)=\"onCheckboxChange($event)\"\r\n   [ngStyle]=\"\r\n{\r\n    '--checkbox-border-radius': field()?.controlStyle?.borderRadius,\r\n    '--checkbox-bg-color': field()?.controlStyle?.background ,\r\n    '--checkbox-border-color-focus': field()?.controlStyle?.focusBorderColor ,\r\n    '--checkbox-bg-color-focus': field()?.controlStyle?.focusBackground ,\r\n    '--checkbox-font-size': field()?.controlStyle?.fontSize ,\r\n    '--checkbox-font-weight': field()?.controlStyle?.fontWeight ,\r\n    '--checkbox-font-color': field()?.controlStyle?.color ,\r\n}\"\r\n>\r\n{{ field()?.label }}\r\n<span [innerHTML]=\"field()?.configData?.innerHTML\"></span>\r\n</mat-checkbox>\r\n<div class=\"error-message\" *ngIf=\"false\">\r\n    {{field()?.validators?.isRequiredMessage}}.\r\n</div>\r\n", styles: ["*{font-family:mulish!important}.error-message{color:red}::ng-deep .mdc-checkbox__background{border-radius:var(--checkbox-border-radius, 4px)!important}::ng-deep .mdc-checkbox__native-control:disabled:checked~.mdc-checkbox__background{background-color:var(--checkbox-bg-color , #ffffff)!important;border-color:#0000}::ng-deep .mdc-checkbox__native-control:disabled:indeterminate~.mdc-checkbox__background{background-color:var(--checkbox-bg-color , #ffffff)!important;border-color:#0000}::ng-deep .mdc-checkbox__native-control:enabled:checked~.mdc-checkbox__background{border-color:var(--checkbox-border-color-focus, #ffbb00)!important;background-color:var(--checkbox-bg-color-focus, #ffbb00)!important;border-radius:var(--checkbox-border-radius, 4px)!important}::ng-deep .mdc-checkbox__native-control:enabled:indeterminate~.mdc-checkbox__background{border-color:var(--checkbox-border-color-focus, #ffbb00)!important;background-color:var(--checkbox-bg-color-focus, #ffbb00)!important;border-radius:var(--checkbox-border-radius, 4px)!important}::ng-deep .mat-pseudo-checkbox-full.mat-pseudo-checkbox-checked:after{color:#fff!important}::ng-deep .mat-pseudo-checkbox-full.mat-pseudo-checkbox-checked{background-color:var(--checkbox-bg-color-focus, #ffbb00)!important;border-radius:var(--checkbox-border-radius, 4px)!important}::ng-deep .mat-pseudo-checkbox-full.mat-pseudo-checkbox-indeterminate{background-color:var(--checkbox-bg-color-focus, #ffbb00)!important;border-radius:var(--checkbox-border-radius, 4px)!important}::ng-deep .mat-pseudo-checkbox{border:1px solid #DADADA}::ng-deep .checkbox{padding:4px 8px 3px 0;background:#f5f5f5;border-radius:4px;margin-right:8px}::ng-deep .mat-mdc-checkbox label{font-size:var(--checkbox-font-size , 16px)!important;font-weight:var(--checkbox-font-weight , 700)!important;color:var(--checkbox-font-color , #444)!important;padding:0!important;margin-bottom:2px;font-family:Mulish!important}::ng-deep .mat-mdc-checkbox .mdc-checkbox__ripple{display:none}::ng-deep .mdc-checkbox__native-control:checked~.mdc-checkbox__background .mdc-checkbox__checkmark{color:#fff!important}\n"] }]
-        }], ctorParameters: () => [{ type: MasterControlService }] });
+        }], ctorParameters: () => [{ type: MasterControlService }], propDecorators: { change: [{
+                type: Output
+            }] } });
 
 class TextareaComponent {
     masterService;
@@ -1112,6 +1126,8 @@ class AmountTextboxComponent {
     reactiveFormControlobject = input();
     _onChange = (inputValue) => { };
     _unTouched = () => { };
+    // Declare Output event emitter here (class level)
+    blur = new EventEmitter();
     writeValue(obj) {
         this.inputValue = obj;
     }
@@ -1130,17 +1146,18 @@ class AmountTextboxComponent {
         this.inputValue = event.target.value;
         this._onChange(this.inputValue);
     }
-    onInputBlur() {
+    onInputBlur(event) {
         this._unTouched();
+        this.blur.emit(event);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AmountTextboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: AmountTextboxComponent, isStandalone: true, selector: "lib-amount-textbox", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, reactiveFormControlobject: { classPropertyName: "reactiveFormControlobject", publicName: "reactiveFormControlobject", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: AmountTextboxComponent, isStandalone: true, selector: "lib-amount-textbox", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, reactiveFormControlobject: { classPropertyName: "reactiveFormControlobject", publicName: "reactiveFormControlobject", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { blur: "blur" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: AmountTextboxComponent,
                 multi: true
             }
-        ], ngImport: i0, template: "<label class=\"field-lable\" *ngIf=\"field() && field()?.isVisible && field()?.isShowLabel\"\r\n  >{{ field().label\r\n  }}<span style=\"color: red\" *ngIf=\"field() && field()?.validators.isRequired\"\r\n    >*</span\r\n  ></label\r\n>\r\n  <mat-form-field class=\"w-100\" appearance=\"outline\" [ngStyle]=\"{\r\n'--custom-border-color': field()?.controlStyle?.borderColor ,\r\n'--custom-border-width': field()?.controlStyle?.borderWidth ,\r\n'--custom-border-radius': field()?.controlStyle?.borderRadius ,\r\n'--custom-bg-color': field()?.controlStyle?.background ,\r\n'--custom-border-color-focus': field()?.controlStyle?.focusBorderColor ,\r\n'--custom-border-width-focus': field()?.controlStyle?.focusBorderWidth ,\r\n'--custom-bg-color-focus': field()?.controlStyle?.focusBackground ,\r\n'--custom-border-color-hover': field()?.controlStyle?.hoverBorderColor ,\r\n'--custom-border-width-hover': field()?.controlStyle?.hoverBorderWidth ,\r\n'--custom-border-color-error': field()?.controlStyle?.errorBorderColor ,\r\n'--custom-border-width-error': field()?.controlStyle?.errorBorderWidth ,\r\n'--custom-font-size': field()?.controlStyle?.fontSize ,\r\n'--custom-font-weight': field()?.controlStyle?.fontWeight ,\r\n'--custom-font-family': field()?.controlStyle?.fontFamily ,\r\n'--custom-font-color': field()?.controlStyle?.color ,\r\n'--custom-caret-color': field()?.controlStyle?.caretColor ,\r\n'--custom-font-color-disabled' : field()?.controlStyle?.disableColor ,\r\n'--custom-bg-color-disabled' : field()?.controlStyle?.disableBackground ,\r\n}\">\r\n @if(reactiveFormControlobject()) {\r\n<input\r\n      matInput\r\n      [type]=\"field()?.controlType\"\r\n      [name]=\"field()?.fieldName\"\r\n      [id]=\"field()?.fieldName\"\r\n      autocomplete=\"none\"\r\n      [placeholder]=\"field()?.placeHolder\"\r\n      [maxLength]=\"field()?.validators?.maxLength\"\r\n      [minLength]=\"field()?.validators?.minLength\"\r\n      [disabled]=\"field()?.isDisable\"\r\n      [required]=\"field()?.validators?.isRequired\"\r\n      [pattern]=\"field()?.validators?.pattern\"\r\n      (input)=\"onInputChange($event)\"\r\n      (blur)=\"onInputBlur()\"\r\n      [value]=\"inputValue\"\r\n      [formControl]=\"reactiveFormControlobject()\"\r\n    />\r\n }@else {\r\n  <input\r\n      matInput\r\n      [type]=\"field()?.controlType\"\r\n      [name]=\"field()?.fieldName\"\r\n      [id]=\"field()?.fieldName\"\r\n      autocomplete=\"none\"\r\n      [placeholder]=\"field()?.placeHolder\"\r\n      [maxLength]=\"field()?.validators?.maxLength\"\r\n      [minLength]=\"field()?.validators?.minLength\"\r\n      [disabled]=\"field()?.isDisable\"\r\n      [required]=\"field()?.validators?.isRequired\"\r\n      [pattern]=\"field()?.validators?.pattern\"\r\n      (input)=\"onInputChange($event)\"\r\n      (blur)=\"onInputBlur()\"\r\n      [value]=\"inputValue\"\r\n    />\r\n }\r\n\r\n    <mat-error *ngIf=\"false\">\r\n      {{ field()?.validators?.requiredMessage }}\r\n    </mat-error>\r\n    <span matPrefix class=\"rupee-symbol px-2\">\u20B9</span>\r\n    <span matSuffix class=\"me-2 right-amount-text\"> \u20B9 3.50 L </span>\r\n  </mat-form-field>\r\n", styles: [".field-lable{font-size:10px!important;font-weight:700!important;color:#444!important;margin-bottom:0!important}*{font-family:mulish!important}.right-amount-text{font-weight:600;font-size:10px;color:#444;background:#f5f5f5;border-radius:2px;padding:5.5px 6px 4px}.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 , 7px)!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 , 7px) !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}.rupee-symbol{color:#444;font-size:12px;font-weight:400}\n"], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i1.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: "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 class=\"field-lable\" *ngIf=\"field() && field()?.isVisible && field()?.isShowLabel\"\r\n  >{{ field().label\r\n  }}<span style=\"color: red\" *ngIf=\"field() && field()?.validators.isRequired\"\r\n    >*</span\r\n  ></label\r\n>\r\n  <mat-form-field \r\n  class=\"w-100\" \r\n  appearance=\"outline\" \r\n  *ngIf=\"field() && field()?.isVisible\"\r\n  [ngStyle]=\"{\r\n'--custom-border-color': field()?.controlStyle?.borderColor ,\r\n'--custom-border-width': field()?.controlStyle?.borderWidth ,\r\n'--custom-border-radius': field()?.controlStyle?.borderRadius ,\r\n'--custom-bg-color': field()?.controlStyle?.background ,\r\n'--custom-border-color-focus': field()?.controlStyle?.focusBorderColor ,\r\n'--custom-border-width-focus': field()?.controlStyle?.focusBorderWidth ,\r\n'--custom-bg-color-focus': field()?.controlStyle?.focusBackground ,\r\n'--custom-border-color-hover': field()?.controlStyle?.hoverBorderColor ,\r\n'--custom-border-width-hover': field()?.controlStyle?.hoverBorderWidth ,\r\n'--custom-border-color-error': field()?.controlStyle?.errorBorderColor ,\r\n'--custom-border-width-error': field()?.controlStyle?.errorBorderWidth ,\r\n'--custom-font-size': field()?.controlStyle?.fontSize ,\r\n'--custom-font-weight': field()?.controlStyle?.fontWeight ,\r\n'--custom-font-family': field()?.controlStyle?.fontFamily ,\r\n'--custom-font-color': field()?.controlStyle?.color ,\r\n'--custom-caret-color': field()?.controlStyle?.caretColor ,\r\n'--custom-font-color-disabled' : field()?.controlStyle?.disableColor ,\r\n'--custom-bg-color-disabled' : field()?.controlStyle?.disableBackground ,\r\n}\">\r\n @if(reactiveFormControlobject()) {\r\n<input\r\n      matInput\r\n      [type]=\"field()?.controlType\"\r\n      [name]=\"field()?.fieldName\"\r\n      [id]=\"field()?.fieldName\"\r\n      autocomplete=\"none\"\r\n      [placeholder]=\"field()?.placeHolder\"\r\n      [maxLength]=\"field()?.validators?.maxLength\"\r\n      [minLength]=\"field()?.validators?.minLength\"\r\n      [disabled]=\"field()?.isDisable\"\r\n      [required]=\"field()?.validators?.isRequired\"\r\n      [pattern]=\"field()?.validators?.pattern\"\r\n      (input)=\"onInputChange($event)\"\r\n      (blur)=\"onInputBlur($event)\"\r\n      [value]=\"inputValue\"\r\n      [formControl]=\"reactiveFormControlobject()\"\r\n    />\r\n }@else {\r\n  <input\r\n      matInput\r\n      [type]=\"field()?.controlType\"\r\n      [name]=\"field()?.fieldName\"\r\n      [id]=\"field()?.fieldName\"\r\n      autocomplete=\"none\"\r\n      [placeholder]=\"field()?.placeHolder\"\r\n      [maxLength]=\"field()?.validators?.maxLength\"\r\n      [minLength]=\"field()?.validators?.minLength\"\r\n      [disabled]=\"field()?.isDisable\"\r\n      [required]=\"field()?.validators?.isRequired\"\r\n      [pattern]=\"field()?.validators?.pattern\"\r\n      (input)=\"onInputChange($event)\"\r\n      (blur)=\"onInputBlur($event)\"\r\n      [value]=\"inputValue\"\r\n    />\r\n }\r\n\r\n    <mat-error *ngIf=\"false\">\r\n      {{ field()?.validators?.requiredMessage }}\r\n    </mat-error>\r\n    <span matPrefix class=\"rupee-symbol px-2\">\u20B9</span>\r\n    <span matSuffix class=\"me-2 right-amount-text\"> \u20B9 3.50 L </span>\r\n  </mat-form-field>\r\n", styles: [".field-lable{font-size:10px!important;font-weight:700!important;color:#444!important;margin-bottom:0!important}*{font-family:mulish!important}.right-amount-text{font-weight:600;font-size:10px;color:#444;background:#f5f5f5;border-radius:2px;padding:5.5px 6px 4px}.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 , 7px)!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 , 7px) !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}.rupee-symbol{color:#444;font-size:12px;font-weight:400}\n"], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i1.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: "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: AmountTextboxComponent, decorators: [{
             type: Component,
@@ -1155,8 +1172,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                             useExisting: AmountTextboxComponent,
                             multi: true
                         }
-                    ], template: "<label class=\"field-lable\" *ngIf=\"field() && field()?.isVisible && field()?.isShowLabel\"\r\n  >{{ field().label\r\n  }}<span style=\"color: red\" *ngIf=\"field() && field()?.validators.isRequired\"\r\n    >*</span\r\n  ></label\r\n>\r\n  <mat-form-field class=\"w-100\" appearance=\"outline\" [ngStyle]=\"{\r\n'--custom-border-color': field()?.controlStyle?.borderColor ,\r\n'--custom-border-width': field()?.controlStyle?.borderWidth ,\r\n'--custom-border-radius': field()?.controlStyle?.borderRadius ,\r\n'--custom-bg-color': field()?.controlStyle?.background ,\r\n'--custom-border-color-focus': field()?.controlStyle?.focusBorderColor ,\r\n'--custom-border-width-focus': field()?.controlStyle?.focusBorderWidth ,\r\n'--custom-bg-color-focus': field()?.controlStyle?.focusBackground ,\r\n'--custom-border-color-hover': field()?.controlStyle?.hoverBorderColor ,\r\n'--custom-border-width-hover': field()?.controlStyle?.hoverBorderWidth ,\r\n'--custom-border-color-error': field()?.controlStyle?.errorBorderColor ,\r\n'--custom-border-width-error': field()?.controlStyle?.errorBorderWidth ,\r\n'--custom-font-size': field()?.controlStyle?.fontSize ,\r\n'--custom-font-weight': field()?.controlStyle?.fontWeight ,\r\n'--custom-font-family': field()?.controlStyle?.fontFamily ,\r\n'--custom-font-color': field()?.controlStyle?.color ,\r\n'--custom-caret-color': field()?.controlStyle?.caretColor ,\r\n'--custom-font-color-disabled' : field()?.controlStyle?.disableColor ,\r\n'--custom-bg-color-disabled' : field()?.controlStyle?.disableBackground ,\r\n}\">\r\n @if(reactiveFormControlobject()) {\r\n<input\r\n      matInput\r\n      [type]=\"field()?.controlType\"\r\n      [name]=\"field()?.fieldName\"\r\n      [id]=\"field()?.fieldName\"\r\n      autocomplete=\"none\"\r\n      [placeholder]=\"field()?.placeHolder\"\r\n      [maxLength]=\"field()?.validators?.maxLength\"\r\n      [minLength]=\"field()?.validators?.minLength\"\r\n      [disabled]=\"field()?.isDisable\"\r\n      [required]=\"field()?.validators?.isRequired\"\r\n      [pattern]=\"field()?.validators?.pattern\"\r\n      (input)=\"onInputChange($event)\"\r\n      (blur)=\"onInputBlur()\"\r\n      [value]=\"inputValue\"\r\n      [formControl]=\"reactiveFormControlobject()\"\r\n    />\r\n }@else {\r\n  <input\r\n      matInput\r\n      [type]=\"field()?.controlType\"\r\n      [name]=\"field()?.fieldName\"\r\n      [id]=\"field()?.fieldName\"\r\n      autocomplete=\"none\"\r\n      [placeholder]=\"field()?.placeHolder\"\r\n      [maxLength]=\"field()?.validators?.maxLength\"\r\n      [minLength]=\"field()?.validators?.minLength\"\r\n      [disabled]=\"field()?.isDisable\"\r\n      [required]=\"field()?.validators?.isRequired\"\r\n      [pattern]=\"field()?.validators?.pattern\"\r\n      (input)=\"onInputChange($event)\"\r\n      (blur)=\"onInputBlur()\"\r\n      [value]=\"inputValue\"\r\n    />\r\n }\r\n\r\n    <mat-error *ngIf=\"false\">\r\n      {{ field()?.validators?.requiredMessage }}\r\n    </mat-error>\r\n    <span matPrefix class=\"rupee-symbol px-2\">\u20B9</span>\r\n    <span matSuffix class=\"me-2 right-amount-text\"> \u20B9 3.50 L </span>\r\n  </mat-form-field>\r\n", styles: [".field-lable{font-size:10px!important;font-weight:700!important;color:#444!important;margin-bottom:0!important}*{font-family:mulish!important}.right-amount-text{font-weight:600;font-size:10px;color:#444;background:#f5f5f5;border-radius:2px;padding:5.5px 6px 4px}.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 , 7px)!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 , 7px) !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}.rupee-symbol{color:#444;font-size:12px;font-weight:400}\n"] }]
-        }], ctorParameters: () => [] });
+                    ], template: "<label class=\"field-lable\" *ngIf=\"field() && field()?.isVisible && field()?.isShowLabel\"\r\n  >{{ field().label\r\n  }}<span style=\"color: red\" *ngIf=\"field() && field()?.validators.isRequired\"\r\n    >*</span\r\n  ></label\r\n>\r\n  <mat-form-field \r\n  class=\"w-100\" \r\n  appearance=\"outline\" \r\n  *ngIf=\"field() && field()?.isVisible\"\r\n  [ngStyle]=\"{\r\n'--custom-border-color': field()?.controlStyle?.borderColor ,\r\n'--custom-border-width': field()?.controlStyle?.borderWidth ,\r\n'--custom-border-radius': field()?.controlStyle?.borderRadius ,\r\n'--custom-bg-color': field()?.controlStyle?.background ,\r\n'--custom-border-color-focus': field()?.controlStyle?.focusBorderColor ,\r\n'--custom-border-width-focus': field()?.controlStyle?.focusBorderWidth ,\r\n'--custom-bg-color-focus': field()?.controlStyle?.focusBackground ,\r\n'--custom-border-color-hover': field()?.controlStyle?.hoverBorderColor ,\r\n'--custom-border-width-hover': field()?.controlStyle?.hoverBorderWidth ,\r\n'--custom-border-color-error': field()?.controlStyle?.errorBorderColor ,\r\n'--custom-border-width-error': field()?.controlStyle?.errorBorderWidth ,\r\n'--custom-font-size': field()?.controlStyle?.fontSize ,\r\n'--custom-font-weight': field()?.controlStyle?.fontWeight ,\r\n'--custom-font-family': field()?.controlStyle?.fontFamily ,\r\n'--custom-font-color': field()?.controlStyle?.color ,\r\n'--custom-caret-color': field()?.controlStyle?.caretColor ,\r\n'--custom-font-color-disabled' : field()?.controlStyle?.disableColor ,\r\n'--custom-bg-color-disabled' : field()?.controlStyle?.disableBackground ,\r\n}\">\r\n @if(reactiveFormControlobject()) {\r\n<input\r\n      matInput\r\n      [type]=\"field()?.controlType\"\r\n      [name]=\"field()?.fieldName\"\r\n      [id]=\"field()?.fieldName\"\r\n      autocomplete=\"none\"\r\n      [placeholder]=\"field()?.placeHolder\"\r\n      [maxLength]=\"field()?.validators?.maxLength\"\r\n      [minLength]=\"field()?.validators?.minLength\"\r\n      [disabled]=\"field()?.isDisable\"\r\n      [required]=\"field()?.validators?.isRequired\"\r\n      [pattern]=\"field()?.validators?.pattern\"\r\n      (input)=\"onInputChange($event)\"\r\n      (blur)=\"onInputBlur($event)\"\r\n      [value]=\"inputValue\"\r\n      [formControl]=\"reactiveFormControlobject()\"\r\n    />\r\n }@else {\r\n  <input\r\n      matInput\r\n      [type]=\"field()?.controlType\"\r\n      [name]=\"field()?.fieldName\"\r\n      [id]=\"field()?.fieldName\"\r\n      autocomplete=\"none\"\r\n      [placeholder]=\"field()?.placeHolder\"\r\n      [maxLength]=\"field()?.validators?.maxLength\"\r\n      [minLength]=\"field()?.validators?.minLength\"\r\n      [disabled]=\"field()?.isDisable\"\r\n      [required]=\"field()?.validators?.isRequired\"\r\n      [pattern]=\"field()?.validators?.pattern\"\r\n      (input)=\"onInputChange($event)\"\r\n      (blur)=\"onInputBlur($event)\"\r\n      [value]=\"inputValue\"\r\n    />\r\n }\r\n\r\n    <mat-error *ngIf=\"false\">\r\n      {{ field()?.validators?.requiredMessage }}\r\n    </mat-error>\r\n    <span matPrefix class=\"rupee-symbol px-2\">\u20B9</span>\r\n    <span matSuffix class=\"me-2 right-amount-text\"> \u20B9 3.50 L </span>\r\n  </mat-form-field>\r\n", styles: [".field-lable{font-size:10px!important;font-weight:700!important;color:#444!important;margin-bottom:0!important}*{font-family:mulish!important}.right-amount-text{font-weight:600;font-size:10px;color:#444;background:#f5f5f5;border-radius:2px;padding:5.5px 6px 4px}.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 , 7px)!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 , 7px) !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}.rupee-symbol{color:#444;font-size:12px;font-weight:400}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { blur: [{
+                type: Output
+            }] } });
 
 class SuffixTextboxComponent {
     field = input.required();
@@ -1479,7 +1498,7 @@ class InfoTextboxComponent {
                 useExisting: InfoTextboxComponent,
                 multi: true
             }
-        ], ngImport: i0, template: "<label class=\"field-lable info-label\" *ngIf=\"field() && field()?.isVisible && field().isShowLabel\"\r\n  >{{ field()?.label\r\n  }}\r\n  <!-- <span style=\"color: red\" *ngIf=\"field() && field()?.validators?.isRequired\"\r\n    >*</span\r\n  > -->\r\n  <span style=\"justify-content: end;\">\r\n    <img class=\"mx-1\" src=\"https://cdn.godigit.com/retail-life/question-mark.svg\" alt=\"\">\r\n    <u>Where to find this? ></u></span>\r\n  </label\r\n>\r\n<mat-form-field\r\n  class=\"w-100\"\r\n  appearance=\"outline\"\r\n  *ngIf=\"field() && field()?.isVisible\"\r\n  [ngStyle]=\"{\r\n'--custom-border-color': field()?.controlStyle?.borderColor ,\r\n'--custom-border-width': field()?.controlStyle?.borderWidth ,\r\n'--custom-border-radius': field()?.controlStyle?.borderRadius ,\r\n'--custom-bg-color': field()?.controlStyle?.background ,\r\n'--custom-border-color-focus': field()?.controlStyle?.focusBorderColor ,\r\n'--custom-border-width-focus': field()?.controlStyle?.focusBorderWidth ,\r\n'--custom-bg-color-focus': field()?.controlStyle?.focusBackground ,\r\n'--custom-border-color-hover': field()?.controlStyle?.hoverBorderColor ,\r\n'--custom-border-width-hover': field()?.controlStyle?.hoverBorderWidth ,\r\n'--custom-border-color-error': field()?.controlStyle?.errorBorderColor ,\r\n'--custom-border-width-error': field()?.controlStyle?.errorBorderWidth ,\r\n'--custom-font-size': field()?.controlStyle?.fontSize ,\r\n'--custom-font-weight': field()?.controlStyle?.fontWeight ,\r\n'--custom-font-family': field()?.controlStyle?.fontFamily ,\r\n'--custom-font-color': field()?.controlStyle?.color ,\r\n'--custom-caret-color': field()?.controlStyle?.caretColor ,\r\n'--custom-font-color-disabled' : field()?.controlStyle?.disableColor ,\r\n'--custom-bg-color-disabled' : field()?.controlStyle?.disableBackground ,\r\n}\"\r\n>\r\n @if(reactiveFormControlobject()) {\r\n<input\r\n    matInput\r\n    autocomplete=\"none\"\r\n    [type]=\"field()?.controlType\"\r\n    [name]=\"field()?.fieldName\"\r\n    [id]=\"field()?.fieldName\"\r\n    [placeholder]=\"field()?.placeHolder\"\r\n    [maxLength]=\"field()?.validators?.maxLength\"\r\n    [minLength]=\"field()?.validators?.minLength\"\r\n    [disabled]=\"field()?.isDisable\"\r\n    [required]=\"field()?.validators?.isRequired\"\r\n    [pattern]=\"field()?.validators?.pattern\"\r\n    (input)=\"onInputChange($event)\"\r\n    (blur)=\"onInputBlur()\"\r\n    [value]=\"inputValue\"\r\n    [formControl]=\"reactiveFormControlobject()\"\r\n  />\r\n }@else {\r\n  <input\r\n    matInput\r\n    autocomplete=\"none\"\r\n    [type]=\"field()?.controlType\"\r\n    [name]=\"field()?.fieldName\"\r\n    [id]=\"field()?.fieldName\"\r\n    [placeholder]=\"field()?.placeHolder\"\r\n    [maxLength]=\"field()?.validators?.maxLength\"\r\n    [minLength]=\"field()?.validators?.minLength\"\r\n    [disabled]=\"field()?.isDisable\"\r\n    [required]=\"field()?.validators?.isRequired\"\r\n    [pattern]=\"field()?.validators?.pattern\"\r\n    (input)=\"onInputChange($event)\"\r\n    (blur)=\"onInputBlur()\"\r\n    [value]=\"inputValue\"\r\n  />\r\n }\r\n  \r\n  <mat-error *ngIf=\"false\">\r\n    {{ field()?.validators?.isRequiredMessage }}\r\n  </mat-error>\r\n</mat-form-field>\r\n<div class=\"error-message\" *ngIf=\"false\">\r\n  {{ field()?.validators?.isRequiredMessage }}.\r\n</div>\r\n<div class=\"error-message\" *ngIf=\"false\">\r\n  {{ field()?.validators?.patternMessage }}.\r\n</div>\r\n", styles: [".field-lable{font-size:10px!important;font-weight:700!important;color:#444!important;margin-bottom:0!important}.info-label{display:flex;justify-content:space-between}.error-message{color:red}*{font-family:mulish!important}::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 , 7px)!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 , 7px) !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}\n"], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i1.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: "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 class=\"field-lable info-label\" *ngIf=\"field() && field()?.isVisible && field().isShowLabel\"\r\n  >{{ field()?.label\r\n  }}\r\n  <!-- <span style=\"color: red\" *ngIf=\"field() && field()?.validators?.isRequired\"\r\n    >*</span\r\n  > -->\r\n  <span style=\"justify-content: end;\">\r\n    <img class=\"mx-1\" *ngIf=\"field()?.configData?.infoMsg\" [src]=\"field()?.configData?.infoMsg\" alt=\"\">\r\n    <u>{{field()?.configData?.infoMsg}}</u></span>\r\n  </label\r\n>\r\n<mat-form-field\r\n  class=\"w-100\"\r\n  appearance=\"outline\"\r\n  *ngIf=\"field() && field()?.isVisible\"\r\n  [ngStyle]=\"{\r\n'--custom-border-color': field()?.controlStyle?.borderColor ,\r\n'--custom-border-width': field()?.controlStyle?.borderWidth ,\r\n'--custom-border-radius': field()?.controlStyle?.borderRadius ,\r\n'--custom-bg-color': field()?.controlStyle?.background ,\r\n'--custom-border-color-focus': field()?.controlStyle?.focusBorderColor ,\r\n'--custom-border-width-focus': field()?.controlStyle?.focusBorderWidth ,\r\n'--custom-bg-color-focus': field()?.controlStyle?.focusBackground ,\r\n'--custom-border-color-hover': field()?.controlStyle?.hoverBorderColor ,\r\n'--custom-border-width-hover': field()?.controlStyle?.hoverBorderWidth ,\r\n'--custom-border-color-error': field()?.controlStyle?.errorBorderColor ,\r\n'--custom-border-width-error': field()?.controlStyle?.errorBorderWidth ,\r\n'--custom-font-size': field()?.controlStyle?.fontSize ,\r\n'--custom-font-weight': field()?.controlStyle?.fontWeight ,\r\n'--custom-font-family': field()?.controlStyle?.fontFamily ,\r\n'--custom-font-color': field()?.controlStyle?.color ,\r\n'--custom-caret-color': field()?.controlStyle?.caretColor ,\r\n'--custom-font-color-disabled' : field()?.controlStyle?.disableColor ,\r\n'--custom-bg-color-disabled' : field()?.controlStyle?.disableBackground ,\r\n}\"\r\n>\r\n @if(reactiveFormControlobject()) {\r\n<input\r\n    matInput\r\n    autocomplete=\"none\"\r\n    [type]=\"field()?.controlType\"\r\n    [name]=\"field()?.fieldName\"\r\n    [id]=\"field()?.fieldName\"\r\n    [placeholder]=\"field()?.placeHolder\"\r\n    [maxLength]=\"field()?.validators?.maxLength\"\r\n    [minLength]=\"field()?.validators?.minLength\"\r\n    [disabled]=\"field()?.isDisable\"\r\n    [required]=\"field()?.validators?.isRequired\"\r\n    [pattern]=\"field()?.validators?.pattern\"\r\n    (input)=\"onInputChange($event)\"\r\n    (blur)=\"onInputBlur()\"\r\n    [value]=\"inputValue\"\r\n    [formControl]=\"reactiveFormControlobject()\"\r\n  />\r\n }@else {\r\n  <input\r\n    matInput\r\n    autocomplete=\"none\"\r\n    [type]=\"field()?.controlType\"\r\n    [name]=\"field()?.fieldName\"\r\n    [id]=\"field()?.fieldName\"\r\n    [placeholder]=\"field()?.placeHolder\"\r\n    [maxLength]=\"field()?.validators?.maxLength\"\r\n    [minLength]=\"field()?.validators?.minLength\"\r\n    [disabled]=\"field()?.isDisable\"\r\n    [required]=\"field()?.validators?.isRequired\"\r\n    [pattern]=\"field()?.validators?.pattern\"\r\n    (input)=\"onInputChange($event)\"\r\n    (blur)=\"onInputBlur()\"\r\n    [value]=\"inputValue\"\r\n  />\r\n }\r\n  \r\n  <mat-error *ngIf=\"false\">\r\n    {{ field()?.validators?.isRequiredMessage }}\r\n  </mat-error>\r\n</mat-form-field>\r\n<div class=\"error-message\" *ngIf=\"false\">\r\n  {{ field()?.validators?.isRequiredMessage }}.\r\n</div>\r\n<div class=\"error-message\" *ngIf=\"false\">\r\n  {{ field()?.validators?.patternMessage }}.\r\n</div>\r\n", styles: [".field-lable{font-size:10px!important;font-weight:700!important;color:#444!important;margin-bottom:0!important}.info-label{display:flex;justify-content:space-between}.error-message{color:red}*{font-family:mulish!important}::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 , 7px)!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 , 7px) !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}\n"], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i1.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: "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: InfoTextboxComponent, decorators: [{
             type: Component,
@@ -1494,7 +1513,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                             useExisting: InfoTextboxComponent,
                             multi: true
                         }
-                    ], template: "<label class=\"field-lable info-label\" *ngIf=\"field() && field()?.isVisible && field().isShowLabel\"\r\n  >{{ field()?.label\r\n  }}\r\n  <!-- <span style=\"color: red\" *ngIf=\"field() && field()?.validators?.isRequired\"\r\n    >*</span\r\n  > -->\r\n  <span style=\"justify-content: end;\">\r\n    <img class=\"mx-1\" src=\"https://cdn.godigit.com/retail-life/question-mark.svg\" alt=\"\">\r\n    <u>Where to find this? ></u></span>\r\n  </label\r\n>\r\n<mat-form-field\r\n  class=\"w-100\"\r\n  appearance=\"outline\"\r\n  *ngIf=\"field() && field()?.isVisible\"\r\n  [ngStyle]=\"{\r\n'--custom-border-color': field()?.controlStyle?.borderColor ,\r\n'--custom-border-width': field()?.controlStyle?.borderWidth ,\r\n'--custom-border-radius': field()?.controlStyle?.borderRadius ,\r\n'--custom-bg-color': field()?.controlStyle?.background ,\r\n'--custom-border-color-focus': field()?.controlStyle?.focusBorderColor ,\r\n'--custom-border-width-focus': field()?.controlStyle?.focusBorderWidth ,\r\n'--custom-bg-color-focus': field()?.controlStyle?.focusBackground ,\r\n'--custom-border-color-hover': field()?.controlStyle?.hoverBorderColor ,\r\n'--custom-border-width-hover': field()?.controlStyle?.hoverBorderWidth ,\r\n'--custom-border-color-error': field()?.controlStyle?.errorBorderColor ,\r\n'--custom-border-width-error': field()?.controlStyle?.errorBorderWidth ,\r\n'--custom-font-size': field()?.controlStyle?.fontSize ,\r\n'--custom-font-weight': field()?.controlStyle?.fontWeight ,\r\n'--custom-font-family': field()?.controlStyle?.fontFamily ,\r\n'--custom-font-color': field()?.controlStyle?.color ,\r\n'--custom-caret-color': field()?.controlStyle?.caretColor ,\r\n'--custom-font-color-disabled' : field()?.controlStyle?.disableColor ,\r\n'--custom-bg-color-disabled' : field()?.controlStyle?.disableBackground ,\r\n}\"\r\n>\r\n @if(reactiveFormControlobject()) {\r\n<input\r\n    matInput\r\n    autocomplete=\"none\"\r\n    [type]=\"field()?.controlType\"\r\n    [name]=\"field()?.fieldName\"\r\n    [id]=\"field()?.fieldName\"\r\n    [placeholder]=\"field()?.placeHolder\"\r\n    [maxLength]=\"field()?.validators?.maxLength\"\r\n    [minLength]=\"field()?.validators?.minLength\"\r\n    [disabled]=\"field()?.isDisable\"\r\n    [required]=\"field()?.validators?.isRequired\"\r\n    [pattern]=\"field()?.validators?.pattern\"\r\n    (input)=\"onInputChange($event)\"\r\n    (blur)=\"onInputBlur()\"\r\n    [value]=\"inputValue\"\r\n    [formControl]=\"reactiveFormControlobject()\"\r\n  />\r\n }@else {\r\n  <input\r\n    matInput\r\n    autocomplete=\"none\"\r\n    [type]=\"field()?.controlType\"\r\n    [name]=\"field()?.fieldName\"\r\n    [id]=\"field()?.fieldName\"\r\n    [placeholder]=\"field()?.placeHolder\"\r\n    [maxLength]=\"field()?.validators?.maxLength\"\r\n    [minLength]=\"field()?.validators?.minLength\"\r\n    [disabled]=\"field()?.isDisable\"\r\n    [required]=\"field()?.validators?.isRequired\"\r\n    [pattern]=\"field()?.validators?.pattern\"\r\n    (input)=\"onInputChange($event)\"\r\n    (blur)=\"onInputBlur()\"\r\n    [value]=\"inputValue\"\r\n  />\r\n }\r\n  \r\n  <mat-error *ngIf=\"false\">\r\n    {{ field()?.validators?.isRequiredMessage }}\r\n  </mat-error>\r\n</mat-form-field>\r\n<div class=\"error-message\" *ngIf=\"false\">\r\n  {{ field()?.validators?.isRequiredMessage }}.\r\n</div>\r\n<div class=\"error-message\" *ngIf=\"false\">\r\n  {{ field()?.validators?.patternMessage }}.\r\n</div>\r\n", styles: [".field-lable{font-size:10px!important;font-weight:700!important;color:#444!important;margin-bottom:0!important}.info-label{display:flex;justify-content:space-between}.error-message{color:red}*{font-family:mulish!important}::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 , 7px)!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 , 7px) !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}\n"] }]
+                    ], template: "<label class=\"field-lable info-label\" *ngIf=\"field() && field()?.isVisible && field().isShowLabel\"\r\n  >{{ field()?.label\r\n  }}\r\n  <!-- <span style=\"color: red\" *ngIf=\"field() && field()?.validators?.isRequired\"\r\n    >*</span\r\n  > -->\r\n  <span style=\"justify-content: end;\">\r\n    <img class=\"mx-1\" *ngIf=\"field()?.configData?.infoMsg\" [src]=\"field()?.configData?.infoMsg\" alt=\"\">\r\n    <u>{{field()?.configData?.infoMsg}}</u></span>\r\n  </label\r\n>\r\n<mat-form-field\r\n  class=\"w-100\"\r\n  appearance=\"outline\"\r\n  *ngIf=\"field() && field()?.isVisible\"\r\n  [ngStyle]=\"{\r\n'--custom-border-color': field()?.controlStyle?.borderColor ,\r\n'--custom-border-width': field()?.controlStyle?.borderWidth ,\r\n'--custom-border-radius': field()?.controlStyle?.borderRadius ,\r\n'--custom-bg-color': field()?.controlStyle?.background ,\r\n'--custom-border-color-focus': field()?.controlStyle?.focusBorderColor ,\r\n'--custom-border-width-focus': field()?.controlStyle?.focusBorderWidth ,\r\n'--custom-bg-color-focus': field()?.controlStyle?.focusBackground ,\r\n'--custom-border-color-hover': field()?.controlStyle?.hoverBorderColor ,\r\n'--custom-border-width-hover': field()?.controlStyle?.hoverBorderWidth ,\r\n'--custom-border-color-error': field()?.controlStyle?.errorBorderColor ,\r\n'--custom-border-width-error': field()?.controlStyle?.errorBorderWidth ,\r\n'--custom-font-size': field()?.controlStyle?.fontSize ,\r\n'--custom-font-weight': field()?.controlStyle?.fontWeight ,\r\n'--custom-font-family': field()?.controlStyle?.fontFamily ,\r\n'--custom-font-color': field()?.controlStyle?.color ,\r\n'--custom-caret-color': field()?.controlStyle?.caretColor ,\r\n'--custom-font-color-disabled' : field()?.controlStyle?.disableColor ,\r\n'--custom-bg-color-disabled' : field()?.controlStyle?.disableBackground ,\r\n}\"\r\n>\r\n @if(reactiveFormControlobject()) {\r\n<input\r\n    matInput\r\n    autocomplete=\"none\"\r\n    [type]=\"field()?.controlType\"\r\n    [name]=\"field()?.fieldName\"\r\n    [id]=\"field()?.fieldName\"\r\n    [placeholder]=\"field()?.placeHolder\"\r\n    [maxLength]=\"field()?.validators?.maxLength\"\r\n    [minLength]=\"field()?.validators?.minLength\"\r\n    [disabled]=\"field()?.isDisable\"\r\n    [required]=\"field()?.validators?.isRequired\"\r\n    [pattern]=\"field()?.validators?.pattern\"\r\n    (input)=\"onInputChange($event)\"\r\n    (blur)=\"onInputBlur()\"\r\n    [value]=\"inputValue\"\r\n    [formControl]=\"reactiveFormControlobject()\"\r\n  />\r\n }@else {\r\n  <input\r\n    matInput\r\n    autocomplete=\"none\"\r\n    [type]=\"field()?.controlType\"\r\n    [name]=\"field()?.fieldName\"\r\n    [id]=\"field()?.fieldName\"\r\n    [placeholder]=\"field()?.placeHolder\"\r\n    [maxLength]=\"field()?.validators?.maxLength\"\r\n    [minLength]=\"field()?.validators?.minLength\"\r\n    [disabled]=\"field()?.isDisable\"\r\n    [required]=\"field()?.validators?.isRequired\"\r\n    [pattern]=\"field()?.validators?.pattern\"\r\n    (input)=\"onInputChange($event)\"\r\n    (blur)=\"onInputBlur()\"\r\n    [value]=\"inputValue\"\r\n  />\r\n }\r\n  \r\n  <mat-error *ngIf=\"false\">\r\n    {{ field()?.validators?.isRequiredMessage }}\r\n  </mat-error>\r\n</mat-form-field>\r\n<div class=\"error-message\" *ngIf=\"false\">\r\n  {{ field()?.validators?.isRequiredMessage }}.\r\n</div>\r\n<div class=\"error-message\" *ngIf=\"false\">\r\n  {{ field()?.validators?.patternMessage }}.\r\n</div>\r\n", styles: [".field-lable{font-size:10px!important;font-weight:700!important;color:#444!important;margin-bottom:0!important}.info-label{display:flex;justify-content:space-between}.error-message{color:red}*{font-family:mulish!important}::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 , 7px)!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 , 7px) !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}\n"] }]
         }] });
 
 class TextboxWithImageComponent {
@@ -1503,6 +1522,8 @@ class TextboxWithImageComponent {
     reactiveFormControlobject = input();
     _onChange = (inputValue) => { };
     _unTouched = () => { };
+    // Declare Output event emitter here (class level)
+    blur = new EventEmitter();
     writeValue(obj) {
         this.inputValue = obj;
     }
@@ -1521,17 +1542,19 @@ class TextboxWithImageComponent {
         this.inputValue = event.target.value;
         this._onChange(this.inputValue);
     }
-    onInputBlur() {
+    onInputBlur(event) {
         this._unTouched();
+        // Emit the blur event to parent component
+        this.blur.emit(event);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TextboxWithImageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: TextboxWithImageComponent, isStandalone: true, selector: "lib-textbox-with-image", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, reactiveFormControlobject: { classPropertyName: "reactiveFormControlobject", publicName: "reactiveFormControlobject", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: TextboxWithImageComponent, isStandalone: true, selector: "lib-textbox-with-image", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, reactiveFormControlobject: { classPropertyName: "reactiveFormControlobject", publicName: "reactiveFormControlobject", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { blur: "blur" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: TextboxWithImageComponent,
                 multi: true
             }
-        ], ngImport: i0, template: "<label class=\"field-lable\" *ngIf=\"field() && field()?.isVisible && field().isShowLabel\"\r\n  >{{ field()?.label\r\n  }}<span style=\"color: red\" *ngIf=\"field() && field()?.validators?.isRequired\"\r\n    >*</span\r\n  ></label\r\n>\r\n<mat-form-field\r\n  class=\"w-100\"\r\n  appearance=\"outline\"\r\n  *ngIf=\"field() && field()?.isVisible\"\r\n  [ngStyle]=\"{\r\n'--custom-border-color': field()?.controlStyle?.borderColor ,\r\n'--custom-border-width': field()?.controlStyle?.borderWidth ,\r\n'--custom-border-radius': field()?.controlStyle?.borderRadius ,\r\n'--custom-bg-color': field()?.controlStyle?.background ,\r\n'--custom-border-color-focus': field()?.controlStyle?.focusBorderColor ,\r\n'--custom-border-width-focus': field()?.controlStyle?.focusBorderWidth ,\r\n'--custom-bg-color-focus': field()?.controlStyle?.focusBackground ,\r\n'--custom-border-color-hover': field()?.controlStyle?.hoverBorderColor ,\r\n'--custom-border-width-hover': field()?.controlStyle?.hoverBorderWidth ,\r\n'--custom-border-color-error': field()?.controlStyle?.errorBorderColor ,\r\n'--custom-border-width-error': field()?.controlStyle?.errorBorderWidth ,\r\n'--custom-font-size': field()?.controlStyle?.fontSize ,\r\n'--custom-font-weight': field()?.controlStyle?.fontWeight ,\r\n'--custom-font-family': field()?.controlStyle?.fontFamily ,\r\n'--custom-font-color': field()?.controlStyle?.color ,\r\n'--custom-caret-color': field()?.controlStyle?.caretColor ,\r\n'--custom-font-color-disabled' : field()?.controlStyle?.disableColor ,\r\n'--custom-bg-color-disabled' : field()?.controlStyle?.disableBackground ,\r\n}\"\r\n>\r\n@if(reactiveFormControlobject()) {\r\n<input\r\n    matInput\r\n    autocomplete=\"none\"\r\n    [type]=\"field()?.controlType\"\r\n    [name]=\"field()?.fieldName\"\r\n    [id]=\"field()?.fieldName\"\r\n    [placeholder]=\"field()?.placeHolder\"\r\n    [maxLength]=\"field()?.validators?.maxLength\"\r\n    [minLength]=\"field()?.validators?.minLength\"\r\n    [disabled]=\"field()?.isDisable\"\r\n    [required]=\"field()?.validators?.isRequired\"\r\n    [pattern]=\"field()?.validators?.pattern\"\r\n    (input)=\"onInputChange($event)\"\r\n    (blur)=\"onInputBlur()\"\r\n    [value]=\"inputValue\"\r\n    [formControl]=\"reactiveFormControlobject()\"\r\n  />\r\n}@else {\r\n  <input\r\n    matInput\r\n    autocomplete=\"none\"\r\n    [type]=\"field()?.controlType\"\r\n    [name]=\"field()?.fieldName\"\r\n    [id]=\"field()?.fieldName\"\r\n    [placeholder]=\"field()?.placeHolder\"\r\n    [maxLength]=\"field()?.validators?.maxLength\"\r\n    [minLength]=\"field()?.validators?.minLength\"\r\n    [disabled]=\"field()?.isDisable\"\r\n    [required]=\"field()?.validators?.isRequired\"\r\n    [pattern]=\"field()?.validators?.pattern\"\r\n    (input)=\"onInputChange($event)\"\r\n    (blur)=\"onInputBlur()\"\r\n    [value]=\"inputValue\"\r\n  />\r\n}\r\n  \r\n   <span matSuffix class=\"mx-3\">\r\n    <img *ngIf=\"field()?.imageUrl\" [src]='field().imageUrl' alt=\"\" />\r\n    <!-- \"https://cdn.godigit.com/retail-life/location.svg\" -->\r\n  </span>\r\n  <mat-error *ngIf=\"false\">\r\n    {{ field()?.validators?.isRequiredMessage }}\r\n  </mat-error>\r\n</mat-form-field>\r\n<div class=\"error-message\" *ngIf=\"false\">\r\n  {{ field()?.validators?.isRequiredMessage }}.\r\n</div>\r\n<div class=\"error-message\" *ngIf=\"false\">\r\n  {{ field()?.validators?.patternMessage }}.\r\n</div>\r\n", styles: [".field-lable{font-size:10px!important;font-weight:700!important;color:#444!important;margin-bottom:0!important}.error-message{color:red}*{font-family:mulish!important}::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 , 7px)!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 , 7px) !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}\n"], dependencies: [{ kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i1.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.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { 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: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
+        ], ngImport: i0, template: "<label class=\"field-lable\" *ngIf=\"field() && field()?.isVisible && field().isShowLabel\"\r\n  >{{ field()?.label\r\n  }}<span style=\"color: red\" *ngIf=\"field() && field()?.validators?.isRequired\"\r\n    >*</span\r\n  ></label\r\n>\r\n<mat-form-field\r\n  class=\"w-100\"\r\n  appearance=\"outline\"\r\n  *ngIf=\"field() && field()?.isVisible\"\r\n  [ngStyle]=\"{\r\n'--custom-border-color': field()?.controlStyle?.borderColor ,\r\n'--custom-border-width': field()?.controlStyle?.borderWidth ,\r\n'--custom-border-radius': field()?.controlStyle?.borderRadius ,\r\n'--custom-bg-color': field()?.controlStyle?.background ,\r\n'--custom-border-color-focus': field()?.controlStyle?.focusBorderColor ,\r\n'--custom-border-width-focus': field()?.controlStyle?.focusBorderWidth ,\r\n'--custom-bg-color-focus': field()?.controlStyle?.focusBackground ,\r\n'--custom-border-color-hover': field()?.controlStyle?.hoverBorderColor ,\r\n'--custom-border-width-hover': field()?.controlStyle?.hoverBorderWidth ,\r\n'--custom-border-color-error': field()?.controlStyle?.errorBorderColor ,\r\n'--custom-border-width-error': field()?.controlStyle?.errorBorderWidth ,\r\n'--custom-font-size': field()?.controlStyle?.fontSize ,\r\n'--custom-font-weight': field()?.controlStyle?.fontWeight ,\r\n'--custom-font-family': field()?.controlStyle?.fontFamily ,\r\n'--custom-font-color': field()?.controlStyle?.color ,\r\n'--custom-caret-color': field()?.controlStyle?.caretColor ,\r\n'--custom-font-color-disabled' : field()?.controlStyle?.disableColor ,\r\n'--custom-bg-color-disabled' : field()?.controlStyle?.disableBackground ,\r\n}\"\r\n>\r\n@if(reactiveFormControlobject()) {\r\n<input\r\n    matInput\r\n    autocomplete=\"none\"\r\n    [type]=\"field()?.controlType\"\r\n    [name]=\"field()?.fieldName\"\r\n    [id]=\"field()?.fieldName\"\r\n    [placeholder]=\"field()?.placeHolder\"\r\n    [maxLength]=\"field()?.validators?.maxLength\"\r\n    [minLength]=\"field()?.validators?.minLength\"\r\n    [disabled]=\"field()?.isDisable\"\r\n    [required]=\"field()?.validators?.isRequired\"\r\n    [pattern]=\"field()?.validators?.pattern\"\r\n    (input)=\"onInputChange($event)\"\r\n    (blur)=\"onInputBlur($event)\"\r\n    [value]=\"inputValue\"\r\n    [formControl]=\"reactiveFormControlobject()\"\r\n  />\r\n}@else {\r\n  <input\r\n    matInput\r\n    autocomplete=\"none\"\r\n    [type]=\"field()?.controlType\"\r\n    [name]=\"field()?.fieldName\"\r\n    [id]=\"field()?.fieldName\"\r\n    [placeholder]=\"field()?.placeHolder\"\r\n    [maxLength]=\"field()?.validators?.maxLength\"\r\n    [minLength]=\"field()?.validators?.minLength\"\r\n    [disabled]=\"field()?.isDisable\"\r\n    [required]=\"field()?.validators?.isRequired\"\r\n    [pattern]=\"field()?.validators?.pattern\"\r\n    (input)=\"onInputChange($event)\"\r\n    (blur)=\"onInputBlur($event)\"\r\n    [value]=\"inputValue\"\r\n  />\r\n}\r\n  \r\n   <span matSuffix class=\"mx-3\">\r\n    <img *ngIf=\"field()?.imageUrl\" [src]='field().imageUrl' alt=\"\" />\r\n    <!-- \"https://cdn.godigit.com/retail-life/location.svg\" -->\r\n  </span>\r\n  <mat-error *ngIf=\"false\">\r\n    {{ field()?.validators?.isRequiredMessage }}\r\n  </mat-error>\r\n</mat-form-field>\r\n<div class=\"error-message\" *ngIf=\"false\">\r\n  {{ field()?.validators?.isRequiredMessage }}.\r\n</div>\r\n<div class=\"error-message\" *ngIf=\"false\">\r\n  {{ field()?.validators?.patternMessage }}.\r\n</div>\r\n", styles: [".field-lable{font-size:10px!important;font-weight:700!important;color:#444!important;margin-bottom:0!important}.error-message{color:red}*{font-family:mulish!important}::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 , 7px)!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 , 7px) !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}\n"], dependencies: [{ kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i1.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.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { 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: "ngmodule", type: ReactiveFormsModule }, { 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: TextboxWithImageComponent, decorators: [{
             type: Component,
@@ -1541,8 +1564,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                             useExisting: TextboxWithImageComponent,
                             multi: true
                         }
-                    ], template: "<label class=\"field-lable\" *ngIf=\"field() && field()?.isVisible && field().isShowLabel\"\r\n  >{{ field()?.label\r\n  }}<span style=\"color: red\" *ngIf=\"field() && field()?.validators?.isRequired\"\r\n    >*</span\r\n  ></label\r\n>\r\n<mat-form-field\r\n  class=\"w-100\"\r\n  appearance=\"outline\"\r\n  *ngIf=\"field() && field()?.isVisible\"\r\n  [ngStyle]=\"{\r\n'--custom-border-color': field()?.controlStyle?.borderColor ,\r\n'--custom-border-width': field()?.controlStyle?.borderWidth ,\r\n'--custom-border-radius': field()?.controlStyle?.borderRadius ,\r\n'--custom-bg-color': field()?.controlStyle?.background ,\r\n'--custom-border-color-focus': field()?.controlStyle?.focusBorderColor ,\r\n'--custom-border-width-focus': field()?.controlStyle?.focusBorderWidth ,\r\n'--custom-bg-color-focus': field()?.controlStyle?.focusBackground ,\r\n'--custom-border-color-hover': field()?.controlStyle?.hoverBorderColor ,\r\n'--custom-border-width-hover': field()?.controlStyle?.hoverBorderWidth ,\r\n'--custom-border-color-error': field()?.controlStyle?.errorBorderColor ,\r\n'--custom-border-width-error': field()?.controlStyle?.errorBorderWidth ,\r\n'--custom-font-size': field()?.controlStyle?.fontSize ,\r\n'--custom-font-weight': field()?.controlStyle?.fontWeight ,\r\n'--custom-font-family': field()?.controlStyle?.fontFamily ,\r\n'--custom-font-color': field()?.controlStyle?.color ,\r\n'--custom-caret-color': field()?.controlStyle?.caretColor ,\r\n'--custom-font-color-disabled' : field()?.controlStyle?.disableColor ,\r\n'--custom-bg-color-disabled' : field()?.controlStyle?.disableBackground ,\r\n}\"\r\n>\r\n@if(reactiveFormControlobject()) {\r\n<input\r\n    matInput\r\n    autocomplete=\"none\"\r\n    [type]=\"field()?.controlType\"\r\n    [name]=\"field()?.fieldName\"\r\n    [id]=\"field()?.fieldName\"\r\n    [placeholder]=\"field()?.placeHolder\"\r\n    [maxLength]=\"field()?.validators?.maxLength\"\r\n    [minLength]=\"field()?.validators?.minLength\"\r\n    [disabled]=\"field()?.isDisable\"\r\n    [required]=\"field()?.validators?.isRequired\"\r\n    [pattern]=\"field()?.validators?.pattern\"\r\n    (input)=\"onInputChange($event)\"\r\n    (blur)=\"onInputBlur()\"\r\n    [value]=\"inputValue\"\r\n    [formControl]=\"reactiveFormControlobject()\"\r\n  />\r\n}@else {\r\n  <input\r\n    matInput\r\n    autocomplete=\"none\"\r\n    [type]=\"field()?.controlType\"\r\n    [name]=\"field()?.fieldName\"\r\n    [id]=\"field()?.fieldName\"\r\n    [placeholder]=\"field()?.placeHolder\"\r\n    [maxLength]=\"field()?.validators?.maxLength\"\r\n    [minLength]=\"field()?.validators?.minLength\"\r\n    [disabled]=\"field()?.isDisable\"\r\n    [required]=\"field()?.validators?.isRequired\"\r\n    [pattern]=\"field()?.validators?.pattern\"\r\n    (input)=\"onInputChange($event)\"\r\n    (blur)=\"onInputBlur()\"\r\n    [value]=\"inputValue\"\r\n  />\r\n}\r\n  \r\n   <span matSuffix class=\"mx-3\">\r\n    <img *ngIf=\"field()?.imageUrl\" [src]='field().imageUrl' alt=\"\" />\r\n    <!-- \"https://cdn.godigit.com/retail-life/location.svg\" -->\r\n  </span>\r\n  <mat-error *ngIf=\"false\">\r\n    {{ field()?.validators?.isRequiredMessage }}\r\n  </mat-error>\r\n</mat-form-field>\r\n<div class=\"error-message\" *ngIf=\"false\">\r\n  {{ field()?.validators?.isRequiredMessage }}.\r\n</div>\r\n<div class=\"error-message\" *ngIf=\"false\">\r\n  {{ field()?.validators?.patternMessage }}.\r\n</div>\r\n", styles: [".field-lable{font-size:10px!important;font-weight:700!important;color:#444!important;margin-bottom:0!important}.error-message{color:red}*{font-family:mulish!important}::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 , 7px)!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 , 7px) !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}\n"] }]
-        }] });
+                    ], template: "<label class=\"field-lable\" *ngIf=\"field() && field()?.isVisible && field().isShowLabel\"\r\n  >{{ field()?.label\r\n  }}<span style=\"color: red\" *ngIf=\"field() && field()?.validators?.isRequired\"\r\n    >*</span\r\n  ></label\r\n>\r\n<mat-form-field\r\n  class=\"w-100\"\r\n  appearance=\"outline\"\r\n  *ngIf=\"field() && field()?.isVisible\"\r\n  [ngStyle]=\"{\r\n'--custom-border-color': field()?.controlStyle?.borderColor ,\r\n'--custom-border-width': field()?.controlStyle?.borderWidth ,\r\n'--custom-border-radius': field()?.controlStyle?.borderRadius ,\r\n'--custom-bg-color': field()?.controlStyle?.background ,\r\n'--custom-border-color-focus': field()?.controlStyle?.focusBorderColor ,\r\n'--custom-border-width-focus': field()?.controlStyle?.focusBorderWidth ,\r\n'--custom-bg-color-focus': field()?.controlStyle?.focusBackground ,\r\n'--custom-border-color-hover': field()?.controlStyle?.hoverBorderColor ,\r\n'--custom-border-width-hover': field()?.controlStyle?.hoverBorderWidth ,\r\n'--custom-border-color-error': field()?.controlStyle?.errorBorderColor ,\r\n'--custom-border-width-error': field()?.controlStyle?.errorBorderWidth ,\r\n'--custom-font-size': field()?.controlStyle?.fontSize ,\r\n'--custom-font-weight': field()?.controlStyle?.fontWeight ,\r\n'--custom-font-family': field()?.controlStyle?.fontFamily ,\r\n'--custom-font-color': field()?.controlStyle?.color ,\r\n'--custom-caret-color': field()?.controlStyle?.caretColor ,\r\n'--custom-font-color-disabled' : field()?.controlStyle?.disableColor ,\r\n'--custom-bg-color-disabled' : field()?.controlStyle?.disableBackground ,\r\n}\"\r\n>\r\n@if(reactiveFormControlobject()) {\r\n<input\r\n    matInput\r\n    autocomplete=\"none\"\r\n    [type]=\"field()?.controlType\"\r\n    [name]=\"field()?.fieldName\"\r\n    [id]=\"field()?.fieldName\"\r\n    [placeholder]=\"field()?.placeHolder\"\r\n    [maxLength]=\"field()?.validators?.maxLength\"\r\n    [minLength]=\"field()?.validators?.minLength\"\r\n    [disabled]=\"field()?.isDisable\"\r\n    [required]=\"field()?.validators?.isRequired\"\r\n    [pattern]=\"field()?.validators?.pattern\"\r\n    (input)=\"onInputChange($event)\"\r\n    (blur)=\"onInputBlur($event)\"\r\n    [value]=\"inputValue\"\r\n    [formControl]=\"reactiveFormControlobject()\"\r\n  />\r\n}@else {\r\n  <input\r\n    matInput\r\n    autocomplete=\"none\"\r\n    [type]=\"field()?.controlType\"\r\n    [name]=\"field()?.fieldName\"\r\n    [id]=\"field()?.fieldName\"\r\n    [placeholder]=\"field()?.placeHolder\"\r\n    [maxLength]=\"field()?.validators?.maxLength\"\r\n    [minLength]=\"field()?.validators?.minLength\"\r\n    [disabled]=\"field()?.isDisable\"\r\n    [required]=\"field()?.validators?.isRequired\"\r\n    [pattern]=\"field()?.validators?.pattern\"\r\n    (input)=\"onInputChange($event)\"\r\n    (blur)=\"onInputBlur($event)\"\r\n    [value]=\"inputValue\"\r\n  />\r\n}\r\n  \r\n   <span matSuffix class=\"mx-3\">\r\n    <img *ngIf=\"field()?.imageUrl\" [src]='field().imageUrl' alt=\"\" />\r\n    <!-- \"https://cdn.godigit.com/retail-life/location.svg\" -->\r\n  </span>\r\n  <mat-error *ngIf=\"false\">\r\n    {{ field()?.validators?.isRequiredMessage }}\r\n  </mat-error>\r\n</mat-form-field>\r\n<div class=\"error-message\" *ngIf=\"false\">\r\n  {{ field()?.validators?.isRequiredMessage }}.\r\n</div>\r\n<div class=\"error-message\" *ngIf=\"false\">\r\n  {{ field()?.validators?.patternMessage }}.\r\n</div>\r\n", styles: [".field-lable{font-size:10px!important;font-weight:700!important;color:#444!important;margin-bottom:0!important}.error-message{color:red}*{font-family:mulish!important}::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 , 7px)!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 , 7px) !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}\n"] }]
+        }], propDecorators: { blur: [{
+                type: Output
+            }] } });
 
 class EmailWithDomainComponent {
     pincode = '';
@@ -2260,11 +2285,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
 class GreyLabelComponent {
     field = input.required();
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GreyLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: GreyLabelComponent, isStandalone: true, selector: "lib-grey-label", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div field()?.isVisible>\r\n    <span class=\"bold-label\" [ngStyle]=\"{\r\n'--master-bold-label-font-color': field()?.controlStyle?.color,\r\n'--master-bold-label-font-size': field()?.controlStyle?.fontSize,\r\n'--master-bold-label-font-weight': field()?.controlStyle?.fontWeight\r\n}\">{{field()?.label}}</span>\r\n</div>", styles: ["*{font-family:mulish!important}.bold-label{color:var(--master-bold-label-font-color, #000000)!important;font-size:var(--master-bold-label-font-size, 12px)!important;font-weight:var(--master-bold-label-font-weight, 600)!important}.bold-label{color:#000;font-size:12px;font-weight:600}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: GreyLabelComponent, isStandalone: true, selector: "lib-grey-label", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div *ngIf=\"field()?.isVisible\">\r\n    <span class=\"bold-label\" [ngStyle]=\"{\r\n'--master-bold-label-font-color': field()?.controlStyle?.color,\r\n'--master-bold-label-font-size': field()?.controlStyle?.fontSize,\r\n'--master-bold-label-font-weight': field()?.controlStyle?.fontWeight\r\n}\">{{field()?.label}}</span>\r\n</div>", styles: ["*{font-family:mulish!important}.bold-label{color:var(--master-bold-label-font-color, #000000)!important;font-size:var(--master-bold-label-font-size, 12px)!important;font-weight:var(--master-bold-label-font-weight, 600)!important}.bold-label{color:#000;font-size:12px;font-weight:600}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GreyLabelComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-grey-label', standalone: true, imports: [CommonModule], template: "<div field()?.isVisible>\r\n    <span class=\"bold-label\" [ngStyle]=\"{\r\n'--master-bold-label-font-color': field()?.controlStyle?.color,\r\n'--master-bold-label-font-size': field()?.controlStyle?.fontSize,\r\n'--master-bold-label-font-weight': field()?.controlStyle?.fontWeight\r\n}\">{{field()?.label}}</span>\r\n</div>", styles: ["*{font-family:mulish!important}.bold-label{color:var(--master-bold-label-font-color, #000000)!important;font-size:var(--master-bold-label-font-size, 12px)!important;font-weight:var(--master-bold-label-font-weight, 600)!important}.bold-label{color:#000;font-size:12px;font-weight:600}\n"] }]
+            args: [{ selector: 'lib-grey-label', standalone: true, imports: [CommonModule], template: "<div *ngIf=\"field()?.isVisible\">\r\n    <span class=\"bold-label\" [ngStyle]=\"{\r\n'--master-bold-label-font-color': field()?.controlStyle?.color,\r\n'--master-bold-label-font-size': field()?.controlStyle?.fontSize,\r\n'--master-bold-label-font-weight': field()?.controlStyle?.fontWeight\r\n}\">{{field()?.label}}</span>\r\n</div>", styles: ["*{font-family:mulish!important}.bold-label{color:var(--master-bold-label-font-color, #000000)!important;font-size:var(--master-bold-label-font-size, 12px)!important;font-weight:var(--master-bold-label-font-weight, 600)!important}.bold-label{color:#000;font-size:12px;font-weight:600}\n"] }]
         }] });
 
 class IframeComponent {
@@ -42753,7 +42778,7 @@ class MedialQuestionsComponent {
         return showQuestion;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MedialQuestionsComponent, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: MedialQuestionsComponent, isStandalone: true, selector: "lib-medial-questions", inputs: { medialQuestionResponse: { classPropertyName: "medialQuestionResponse", publicName: "medialQuestionResponse", isSignal: false, isRequired: false, transformFunction: null }, field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null } }, viewQueries: [{ propertyName: "addressInput", first: true, predicate: ["addressInput"], descendants: true }], ngImport: i0, template: "\r\n<div *ngFor=\"let section of questionList\">\r\n    <div\r\n      *ngIf=\"\r\n        !checkIfValueIsEmpty(section['questions']) &&\r\n        section['showSection']\r\n      \"\r\n      class=\"card p-3 my-2\"\r\n      id=\"personUwMedicalQuestions\"\r\n    >\r\n      <h6 class=\"page-title bold-label\">\r\n        {{ getTitleCase(section[\"sectionName\"]) }}\r\n      </h6>\r\n      <div *ngFor=\"let questions of section['questions']\">\r\n        <!-- <div *ngIf=\"questions['questionType'] === 'IMAGE TEXT'\">\r\n          <img [src]=\"questions['sampleS3Link']\" class=\"d-block mx-auto\" [alt]=\"questions['title']\">\r\n          <h3 [innerHTML]=\"questions['questionText']\"></h3>\r\n        </div> -->\r\n\r\n        <div\r\n          class=\"\"\r\n          *ngIf=\"\r\n            questions['questionType'] === 'FREE TEXT' &&\r\n            questions['cammundaQuestionCode'] !== 'QHT' &&\r\n            questions['isShowQuestionInUI']\r\n          \"\r\n        >\r\n          <label class=\"field-lable d-block\"\r\n            >{{ questions[\"questionText\"] }}\r\n            <span\r\n              *ngIf=\"\r\n                questions.optionalQuestion === 'N'\r\n              \"\r\n              style=\"color: #ee0000\"\r\n              >&#42;</span\r\n            >\r\n          </label>\r\n          <div class=\"col-5 px-0\">\r\n            <lib-textbox [(ngModel)]=\"personUwAnswers[questions.questionId]\" [field]=\"questions['field']\" />\r\n          </div>\r\n        </div>\r\n\r\n        <div\r\n          class=\"\"\r\n          *ngIf=\"\r\n            questions['questionType'] === 'HEIGHTINPUT' &&\r\n            questions['cammundaQuestionCode'] === 'QHTF' &&\r\n            questions['isShowQuestionInUI']\r\n          \"\r\n        >\r\n          <label class=\"card-topic d-block field-lable\"\r\n            >Height\r\n            <span\r\n              style=\"color: #ee0000\"\r\n              >&#42;</span\r\n            >\r\n          </label>\r\n          <div\r\n            class=\"col-auto px-0 my-0 py-0 heightinput\"\r\n\r\n          >\r\n            <div\r\n              class=\"col-7 py-0 heightInputs\"\r\n              style=\"transform: translate(6px, 3px);\"\r\n              *ngIf=\"\r\n                personUwAnswers['medicalQuestionsHeightUnit'] === 'CM'\r\n              \"\r\n            >\r\n              <lib-textbox [field]=\"questions['field']\"   />\r\n              <lib-select [(ngModel)]=\"personUwAnswers['medicalQuestionsHeightUnit']\" [field]=\"medQuestionObj['heightObjectTypes']\" />\r\n            </div>\r\n            <div\r\n              class=\"py-0\"\r\n              style=\"display: flex;\"\r\n              *ngIf=\"\r\n                personUwAnswers[\r\n                  'medicalQuestionsHeightUnit'\r\n                ] === 'FEET'\r\n              \"\r\n            >\r\n              <div class=\"col-auto py-0 heightInputs px-1\">\r\n                <lib-select [field]=\"medQuestionObj['QHTF']['field']\" />\r\n              </div>\r\n              <div class=\"col-auto py-0 heightInputs px-1\">\r\n                <lib-select [field]=\"medQuestionObj['QHTI']['field']\" />\r\n              </div>\r\n              <div\r\n                class=\"col-auto py-0 heightInputs px-1\"\r\n              >\r\n                <lib-select [(ngModel)]=\"personUwAnswers['medicalQuestionsHeightUnit']\" [field]=\"medQuestionObj['heightObjectTypes']\" />\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div\r\n          class=\"row mt-0 pt-0\"\r\n          *ngIf=\"\r\n            questions['questionType'] === 'MAP' &&\r\n            questions['isShowQuestionInUI']\r\n          \"\r\n        >\r\n\r\n\r\n          <div class=\"map-container\">\r\n            <div class=\"address-search-container mb-3\">\r\n\r\n    <div class=\"row mb-3\">\r\n      <div class=\"col-6\">\r\n        <label class=\"form-label card-topic\">Longitude</label>\r\n        <input\r\n          type=\"number\"\r\n          class=\"form-control\"\r\n          [(ngModel)]=\"longitude\"\r\n          placeholder=\"Enter longitude\"\r\n          step=\"any\"\r\n          readonly\r\n        >\r\n      </div>\r\n      <div class=\"col-6\">\r\n        <label class=\"form-label card-topic\">Latitude</label>\r\n        <input\r\n          type=\"number\"\r\n          class=\"form-control\"\r\n          [(ngModel)]=\"latitude\"\r\n          placeholder=\"Enter latitude\"\r\n          step=\"any\"\r\n          readonly\r\n        >\r\n      </div>\r\n    </div>\r\n\r\n      <input\r\n        #addressInput\r\n        type=\"text\"\r\n        class=\"form-control\"\r\n        placeholder=\"Search for address\"\r\n        (keyup)=\"onAddressInputKeyup($event)\"\r\n        (focus)=\"showDropdown = true\"\r\n        (blur)=\"onInputBlur()\"\r\n        autocomplete=\"off\"\r\n      >\r\n      <div\r\n    *ngIf=\"showDropdown && addressSuggestions.length > 0\"\r\n    class=\"autocomplete-dropdown position-absolute w-100 mt-1\"\r\n    style=\"z-index: 1000; max-height: 200px; overflow-y: auto; background: white; border: 1px solid #ccc; border-radius: 4px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);\"\r\n  >\r\n    <div\r\n      *ngFor=\"let suggestion of addressSuggestions; let i = index\"\r\n      class=\"dropdown-item p-2\"\r\n      style=\"cursor: pointer; border-bottom: 1px solid #eee;\"\r\n      (mousedown)=\"selectAddress(suggestion)\"\r\n      (mouseenter)=\"hoveredIndex = i\"\r\n      [class.bg-light]=\"hoveredIndex === i\"\r\n    >\r\n      <div class=\"fw-bold\">{{ suggestion.main_text }}</div>\r\n      <small class=\"text-muted\">{{ suggestion.secondary_text }}</small>\r\n    </div>\r\n  </div>\r\n      <small class=\"text-muted\">Start typing to search for addresses</small>\r\n    </div>\r\n            <google-map [center]=\"center\" [zoom]=\"zoom\">\r\n              <map-marker [position]=\"currentCoordinates\"></map-marker>\r\n            </google-map>\r\n          </div>\r\n        </div>\r\n\r\n\r\n        <div\r\n          class=\"\"\r\n          *ngIf=\"\r\n            (questions['questionType'] === 'RADIO BUTTON' ||\r\n              questions['questionType'] === 'ADDMORE') &&\r\n              questions['isShowQuestionInUI']\r\n          \"\r\n        >\r\n          <lib-radio [(ngModel)]=\"personUwAnswers[questions.questionId]\" (ngModelChange)=\"removeSubQuestionValues()\" [field]=\"questions['field']\" />\r\n        </div>\r\n\r\n        <div\r\n          class=\"\"\r\n          *ngIf=\"\r\n            questions['questionType'] === 'CHECKBOX' &&\r\n            questions['isShowQuestionInUI']\r\n          \"\r\n        >\r\n          <lib-multiple-select [(ngModel)]=\"personUwAnswers[questions.questionId]\" (ngModelChange)=\"removeSubQuestionValues()\" [field]=\"questions['field']\" />\r\n        </div>\r\n\r\n        <div\r\n          class=\"\"\r\n          *ngIf=\"\r\n            questions['questionType'] === 'DECLARATION' &&\r\n            questions['isShowQuestionInUI']\r\n          \"\r\n        >\r\n          <lib-checkbox [(ngModel)]=\"personUwAnswers[questions.questionId]\" (ngModelChange)=\"removeSubQuestionValues()\" [field]=\"questions['field']\" />\r\n        </div>\r\n\r\n        <div\r\n          class=\"\"\r\n          *ngIf=\"\r\n            questions['questionType'] === 'DROPDOWN' &&\r\n            questions['isShowQuestionInUI']\r\n          \"\r\n        >\r\n          <lib-select [(ngModel)]=\"personUwAnswers[questions.questionId]\" [field]=\"questions['field']\" />\r\n        </div>\r\n\r\n        <div\r\n          class=\"\"\r\n          *ngIf=\"\r\n            questions['questionType'] === 'CALENDAR' &&\r\n            questions['isShowQuestionInUI']\r\n          \"\r\n        >\r\n          <lib-dob [(ngModel)]=\"personUwAnswers[questions.questionId]\" [field]=\"questions['field']\" />\r\n        </div>\r\n\r\n        <!-- <div\r\n          class=\"\"\r\n          *ngIf=\"\r\n            questions['questionType'] === 'HEIGHTINPUT' &&\r\n            questions['cammundaQuestionCode'] === 'QHTF' &&\r\n            questions['isShowQuestionInUI']\r\n          \"\r\n        >\r\n        </div> -->\r\n        <div\r\n          class=\"\"\r\n          *ngIf=\"\r\n            questions['questionType'] === 'DOCUPLOAD' &&\r\n            questions['isShowQuestionInUI']\r\n          \"\r\n        >\r\n          <lib-upload [field]=\"questions['field']\" />\r\n        </div>\r\n\r\n\r\n        <div\r\n          class=\"\"\r\n          *ngIf=\"\r\n            questions['questionType'] === 'PASSPORT_UPLOAD' &&\r\n            questions['isShowQuestionInUI']\r\n          \"\r\n        >\r\n        <!-- pending -->\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n", styles: [".map-container{width:100%;position:relative}.address-search-container{position:relative}.address-search-container input{width:100%;padding:10px;border:1px solid #ddd;border-radius:4px;box-sizing:border-box}.address-search-container input:focus{outline:none;border-color:#4285f4;box-shadow:0 0 0 2px #4285f433}.pac-container{z-index:10000!important;border-radius:4px;border:1px solid #ddd;box-shadow:0 2px 6px #0000004d}.pac-item{padding:10px;border-bottom:1px solid #eee;cursor:pointer}.pac-item:hover{background-color:#f5f5f5}.selected-address{padding:8px;background-color:#f8f9fa;border-radius:4px;border-left:3px solid #28a745}.map-container ::ng-deep google-map>div{height:400px!important;width:auto!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { 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.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: TextboxComponent, selector: "lib-textbox", inputs: ["field", "reactiveFormControlobject"] }, { kind: "component", type: RadioComponent, selector: "lib-radio", inputs: ["field"] }, { kind: "component", type: CheckboxComponent, selector: "lib-checkbox", inputs: ["field"] }, { kind: "component", type: SelectComponent, selector: "lib-select", inputs: ["field", "reactiveFormControlobject"] }, { kind: "component", type: DobComponent, selector: "lib-dob", inputs: ["field", "reactiveFormControlobject"] }, { kind: "component", type: UploadComponent, selector: "lib-upload", inputs: ["field"] }, { kind: "component", type: MultipleSelectComponent, selector: "lib-multiple-select", inputs: ["field", "reactiveFormControlobject"] }, { kind: "ngmodule", type: GoogleMapsModule }, { kind: "component", type: i3$1.GoogleMap, selector: "google-map", inputs: ["height", "width", "mapId", "mapTypeId", "center", "zoom", "options"], outputs: ["mapInitialized", "authFailure", "boundsChanged", "centerChanged", "mapClick", "mapDblclick", "mapDrag", "mapDragend", "mapDragstart", "headingChanged", "idle", "maptypeidChanged", "mapMousemove", "mapMouseout", "mapMouseover", "projectionChanged", "mapRightclick", "tilesloaded", "tiltChanged", "zoomChanged"], exportAs: ["googleMap"] }, { kind: "directive", type: i3$1.MapMarker, selector: "map-marker", inputs: ["title", "position", "label", "clickable", "options", "icon", "visible"], outputs: ["animationChanged", "mapClick", "clickableChanged", "cursorChanged", "mapDblclick", "mapDrag", "mapDragend", "draggableChanged", "mapDragstart", "flatChanged", "iconChanged", "mapMousedown", "mapMouseout", "mapMouseover", "mapMouseup", "positionChanged", "mapRightclick", "shapeChanged", "titleChanged", "visibleChanged", "zindexChanged", "markerInitialized"], exportAs: ["mapMarker"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: MedialQuestionsComponent, isStandalone: true, selector: "lib-medial-questions", inputs: { medialQuestionResponse: { classPropertyName: "medialQuestionResponse", publicName: "medialQuestionResponse", isSignal: false, isRequired: false, transformFunction: null }, field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null } }, viewQueries: [{ propertyName: "addressInput", first: true, predicate: ["addressInput"], descendants: true }], ngImport: i0, template: "\r\n<div *ngFor=\"let section of questionList\">\r\n    <div\r\n      *ngIf=\"\r\n        !checkIfValueIsEmpty(section['questions']) &&\r\n        section['showSection']\r\n      \"\r\n      class=\"card p-3 my-2\"\r\n      id=\"personUwMedicalQuestions\"\r\n    >\r\n      <h6 class=\"page-title bold-label\">\r\n        {{ getTitleCase(section[\"sectionName\"]) }}\r\n      </h6>\r\n      <div *ngFor=\"let questions of section['questions']\">\r\n        <!-- <div *ngIf=\"questions['questionType'] === 'IMAGE TEXT'\">\r\n          <img [src]=\"questions['sampleS3Link']\" class=\"d-block mx-auto\" [alt]=\"questions['title']\">\r\n          <h3 [innerHTML]=\"questions['questionText']\"></h3>\r\n        </div> -->\r\n\r\n        <div\r\n          class=\"\"\r\n          *ngIf=\"\r\n            questions['questionType'] === 'FREE TEXT' &&\r\n            questions['cammundaQuestionCode'] !== 'QHT' &&\r\n            questions['isShowQuestionInUI']\r\n          \"\r\n        >\r\n          <label class=\"field-lable d-block\"\r\n            >{{ questions[\"questionText\"] }}\r\n            <span\r\n              *ngIf=\"\r\n                questions.optionalQuestion === 'N'\r\n              \"\r\n              style=\"color: #ee0000\"\r\n              >&#42;</span\r\n            >\r\n          </label>\r\n          <div class=\"col-5 px-0\">\r\n            <lib-textbox [(ngModel)]=\"personUwAnswers[questions.questionId]\" [field]=\"questions['field']\" />\r\n          </div>\r\n        </div>\r\n\r\n        <div\r\n          class=\"\"\r\n          *ngIf=\"\r\n            questions['questionType'] === 'HEIGHTINPUT' &&\r\n            questions['cammundaQuestionCode'] === 'QHTF' &&\r\n            questions['isShowQuestionInUI']\r\n          \"\r\n        >\r\n          <label class=\"card-topic d-block field-lable\"\r\n            >Height\r\n            <span\r\n              style=\"color: #ee0000\"\r\n              >&#42;</span\r\n            >\r\n          </label>\r\n          <div\r\n            class=\"col-auto px-0 my-0 py-0 heightinput\"\r\n\r\n          >\r\n            <div\r\n              class=\"col-7 py-0 heightInputs\"\r\n              style=\"transform: translate(6px, 3px);\"\r\n              *ngIf=\"\r\n                personUwAnswers['medicalQuestionsHeightUnit'] === 'CM'\r\n              \"\r\n            >\r\n              <lib-textbox [field]=\"questions['field']\"   />\r\n              <lib-select [(ngModel)]=\"personUwAnswers['medicalQuestionsHeightUnit']\" [field]=\"medQuestionObj['heightObjectTypes']\" />\r\n            </div>\r\n            <div\r\n              class=\"py-0\"\r\n              style=\"display: flex;\"\r\n              *ngIf=\"\r\n                personUwAnswers[\r\n                  'medicalQuestionsHeightUnit'\r\n                ] === 'FEET'\r\n              \"\r\n            >\r\n              <div class=\"col-auto py-0 heightInputs px-1\">\r\n                <lib-select [field]=\"medQuestionObj['QHTF']['field']\" />\r\n              </div>\r\n              <div class=\"col-auto py-0 heightInputs px-1\">\r\n                <lib-select [field]=\"medQuestionObj['QHTI']['field']\" />\r\n              </div>\r\n              <div\r\n                class=\"col-auto py-0 heightInputs px-1\"\r\n              >\r\n                <lib-select [(ngModel)]=\"personUwAnswers['medicalQuestionsHeightUnit']\" [field]=\"medQuestionObj['heightObjectTypes']\" />\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div\r\n          class=\"row mt-0 pt-0\"\r\n          *ngIf=\"\r\n            questions['questionType'] === 'MAP' &&\r\n            questions['isShowQuestionInUI']\r\n          \"\r\n        >\r\n\r\n\r\n          <div class=\"map-container\">\r\n            <div class=\"address-search-container mb-3\">\r\n\r\n    <div class=\"row mb-3\">\r\n      <div class=\"col-6\">\r\n        <label class=\"form-label card-topic\">Longitude</label>\r\n        <input\r\n          type=\"number\"\r\n          class=\"form-control\"\r\n          [(ngModel)]=\"longitude\"\r\n          placeholder=\"Enter longitude\"\r\n          step=\"any\"\r\n          readonly\r\n        >\r\n      </div>\r\n      <div class=\"col-6\">\r\n        <label class=\"form-label card-topic\">Latitude</label>\r\n        <input\r\n          type=\"number\"\r\n          class=\"form-control\"\r\n          [(ngModel)]=\"latitude\"\r\n          placeholder=\"Enter latitude\"\r\n          step=\"any\"\r\n          readonly\r\n        >\r\n      </div>\r\n    </div>\r\n\r\n      <input\r\n        #addressInput\r\n        type=\"text\"\r\n        class=\"form-control\"\r\n        placeholder=\"Search for address\"\r\n        (keyup)=\"onAddressInputKeyup($event)\"\r\n        (focus)=\"showDropdown = true\"\r\n        (blur)=\"onInputBlur()\"\r\n        autocomplete=\"off\"\r\n      >\r\n      <div\r\n    *ngIf=\"showDropdown && addressSuggestions.length > 0\"\r\n    class=\"autocomplete-dropdown position-absolute w-100 mt-1\"\r\n    style=\"z-index: 1000; max-height: 200px; overflow-y: auto; background: white; border: 1px solid #ccc; border-radius: 4px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);\"\r\n  >\r\n    <div\r\n      *ngFor=\"let suggestion of addressSuggestions; let i = index\"\r\n      class=\"dropdown-item p-2\"\r\n      style=\"cursor: pointer; border-bottom: 1px solid #eee;\"\r\n      (mousedown)=\"selectAddress(suggestion)\"\r\n      (mouseenter)=\"hoveredIndex = i\"\r\n      [class.bg-light]=\"hoveredIndex === i\"\r\n    >\r\n      <div class=\"fw-bold\">{{ suggestion.main_text }}</div>\r\n      <small class=\"text-muted\">{{ suggestion.secondary_text }}</small>\r\n    </div>\r\n  </div>\r\n      <small class=\"text-muted\">Start typing to search for addresses</small>\r\n    </div>\r\n            <google-map [center]=\"center\" [zoom]=\"zoom\">\r\n              <map-marker [position]=\"currentCoordinates\"></map-marker>\r\n            </google-map>\r\n          </div>\r\n        </div>\r\n\r\n\r\n        <div\r\n          class=\"\"\r\n          *ngIf=\"\r\n            (questions['questionType'] === 'RADIO BUTTON' ||\r\n              questions['questionType'] === 'ADDMORE') &&\r\n              questions['isShowQuestionInUI']\r\n          \"\r\n        >\r\n          <lib-radio [(ngModel)]=\"personUwAnswers[questions.questionId]\" (ngModelChange)=\"removeSubQuestionValues()\" [field]=\"questions['field']\" />\r\n        </div>\r\n\r\n        <div\r\n          class=\"\"\r\n          *ngIf=\"\r\n            questions['questionType'] === 'CHECKBOX' &&\r\n            questions['isShowQuestionInUI']\r\n          \"\r\n        >\r\n          <lib-multiple-select [(ngModel)]=\"personUwAnswers[questions.questionId]\" (ngModelChange)=\"removeSubQuestionValues()\" [field]=\"questions['field']\" />\r\n        </div>\r\n\r\n        <div\r\n          class=\"\"\r\n          *ngIf=\"\r\n            questions['questionType'] === 'DECLARATION' &&\r\n            questions['isShowQuestionInUI']\r\n          \"\r\n        >\r\n          <lib-checkbox [(ngModel)]=\"personUwAnswers[questions.questionId]\" (ngModelChange)=\"removeSubQuestionValues()\" [field]=\"questions['field']\" />\r\n        </div>\r\n\r\n        <div\r\n          class=\"\"\r\n          *ngIf=\"\r\n            questions['questionType'] === 'DROPDOWN' &&\r\n            questions['isShowQuestionInUI']\r\n          \"\r\n        >\r\n          <lib-select [(ngModel)]=\"personUwAnswers[questions.questionId]\" [field]=\"questions['field']\" />\r\n        </div>\r\n\r\n        <div\r\n          class=\"\"\r\n          *ngIf=\"\r\n            questions['questionType'] === 'CALENDAR' &&\r\n            questions['isShowQuestionInUI']\r\n          \"\r\n        >\r\n          <lib-dob [(ngModel)]=\"personUwAnswers[questions.questionId]\" [field]=\"questions['field']\" />\r\n        </div>\r\n\r\n        <!-- <div\r\n          class=\"\"\r\n          *ngIf=\"\r\n            questions['questionType'] === 'HEIGHTINPUT' &&\r\n            questions['cammundaQuestionCode'] === 'QHTF' &&\r\n            questions['isShowQuestionInUI']\r\n          \"\r\n        >\r\n        </div> -->\r\n        <div\r\n          class=\"\"\r\n          *ngIf=\"\r\n            questions['questionType'] === 'DOCUPLOAD' &&\r\n            questions['isShowQuestionInUI']\r\n          \"\r\n        >\r\n          <lib-upload [field]=\"questions['field']\" />\r\n        </div>\r\n\r\n\r\n        <div\r\n          class=\"\"\r\n          *ngIf=\"\r\n            questions['questionType'] === 'PASSPORT_UPLOAD' &&\r\n            questions['isShowQuestionInUI']\r\n          \"\r\n        >\r\n        <!-- pending -->\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n", styles: [".map-container{width:100%;position:relative}.address-search-container{position:relative}.address-search-container input{width:100%;padding:10px;border:1px solid #ddd;border-radius:4px;box-sizing:border-box}.address-search-container input:focus{outline:none;border-color:#4285f4;box-shadow:0 0 0 2px #4285f433}.pac-container{z-index:10000!important;border-radius:4px;border:1px solid #ddd;box-shadow:0 2px 6px #0000004d}.pac-item{padding:10px;border-bottom:1px solid #eee;cursor:pointer}.pac-item:hover{background-color:#f5f5f5}.selected-address{padding:8px;background-color:#f8f9fa;border-radius:4px;border-left:3px solid #28a745}.map-container ::ng-deep google-map>div{height:400px!important;width:auto!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { 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.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: TextboxComponent, selector: "lib-textbox", inputs: ["field", "reactiveFormControlobject"], outputs: ["blur"] }, { kind: "component", type: RadioComponent, selector: "lib-radio", inputs: ["field"] }, { kind: "component", type: CheckboxComponent, selector: "lib-checkbox", inputs: ["field"], outputs: ["change"] }, { kind: "component", type: SelectComponent, selector: "lib-select", inputs: ["field", "reactiveFormControlobject"] }, { kind: "component", type: DobComponent, selector: "lib-dob", inputs: ["field", "reactiveFormControlobject"] }, { kind: "component", type: UploadComponent, selector: "lib-upload", inputs: ["field"] }, { kind: "component", type: MultipleSelectComponent, selector: "lib-multiple-select", inputs: ["field", "reactiveFormControlobject"] }, { kind: "ngmodule", type: GoogleMapsModule }, { kind: "component", type: i3$1.GoogleMap, selector: "google-map", inputs: ["height", "width", "mapId", "mapTypeId", "center", "zoom", "options"], outputs: ["mapInitialized", "authFailure", "boundsChanged", "centerChanged", "mapClick", "mapDblclick", "mapDrag", "mapDragend", "mapDragstart", "headingChanged", "idle", "maptypeidChanged", "mapMousemove", "mapMouseout", "mapMouseover", "projectionChanged", "mapRightclick", "tilesloaded", "tiltChanged", "zoomChanged"], exportAs: ["googleMap"] }, { kind: "directive", type: i3$1.MapMarker, selector: "map-marker", inputs: ["title", "position", "label", "clickable", "options", "icon", "visible"], outputs: ["animationChanged", "mapClick", "clickableChanged", "cursorChanged", "mapDblclick", "mapDrag", "mapDragend", "draggableChanged", "mapDragstart", "flatChanged", "iconChanged", "mapMousedown", "mapMouseout", "mapMouseover", "mapMouseup", "positionChanged", "mapRightclick", "shapeChanged", "titleChanged", "visibleChanged", "zindexChanged", "markerInitialized"], exportAs: ["mapMarker"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MedialQuestionsComponent, decorators: [{
             type: Component,
@@ -42944,7 +42969,7 @@ class MasterControlComponent {
     formGroup = new FormGroup({});
     constructor() { }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MasterControlComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: MasterControlComponent, isStandalone: true, selector: "lib-master-control", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, formGroup: { classPropertyName: "formGroup", publicName: "formGroup", isSignal: false, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@switch (field()?.controlType) {\r\n  @case('text') {\r\n   <lib-textbox [field]=\"field()\"></lib-textbox>\r\n  }\r\n  @case('select') {\r\n    <lib-select [field]=\"field()\"/>\r\n  }\r\n\r\n  @case('radio') {\r\n    <lib-radio [field]=\"field()\" />\r\n  }\r\n\r\n  @case('toggle') {\r\n    <lib-toggle [field]=\"field()\" />\r\n  }\r\n\r\n  @case('file') {\r\n    <lib-upload [field]=\"field()\" />\r\n  }\r\n\r\n  @case('date') {\r\n    <lib-dob [field]=\"field()\" />\r\n  }\r\n\r\n  @case('mobileNumber') {\r\n    <lib-mob-number [field]=\"field()\" />\r\n  }\r\n\r\n  @case('info') {\r\n    <lib-info [field]=\"field()\" />\r\n  }\r\n\r\n  @case('checkbox') {\r\n    <lib-checkbox [field]=\"field()\" />\r\n  }\r\n\r\n  @case('textarea') {\r\n    <lib-textarea [field]=\"field()\" />\r\n  }\r\n\r\n  @case ('button') {\r\n    <lib-button [field]=\"field()\" />\r\n  }\r\n\r\n  @case ('tab') {\r\n    <lib-tab [field]=\"field()\" />\r\n  }\r\n\r\n  @case ('autocomplete') {\r\n    <lib-autocomplete [field]=\"field()\" />\r\n  }\r\n\r\n  @case ('multipleSelect') {\r\n    <lib-multiple-select [field]=\"field()\" />\r\n  }\r\n\r\n  @case ('textboxWithSelect') {\r\n    <lib-select-textbox [field]=\"field()\" />\r\n  }\r\n\r\n  @case ('otpTextbox') {\r\n    <lib-otp-textbox [field]=\"field()\" />\r\n  }\r\n\r\n  @case ('amountTextbox') {\r\n    <lib-amount-textbox [field]=\"field()\" />\r\n  }\r\n\r\n  @case ('suffixTextbox') {\r\n    <lib-suffix-textbox [field]=\"field()\" />\r\n  }\r\n\r\n  @case ('otpMobNumber') {\r\n    <lib-otp-mob-number [field]=\"field()\" />\r\n  }\r\n\r\n  @case ('tagMobNumber') {\r\n    <lib-tag-mob-number [field]=\"field()\" />\r\n  }\r\n\r\n  @case ('dateWithAge') {\r\n     <lib-age-date [field]=\"field()\" />\r\n  }\r\n\r\n  @case ('additionButton') {\r\n    <lib-addition-button [field]=\"field()\" />\r\n  }\r\n\r\n  @case ('infoTextbox') {\r\n    <lib-info-textbox [field]=\"field()\" />\r\n  }\r\n\r\n  @case ('textboxWithImage') {\r\n    <lib-textbox-with-image [field]=\"field()\" />\r\n  }\r\n\r\n  @case ('emailWithDomain') {\r\n    <lib-email-with-domain [field]=\"field()\" />\r\n  }\r\n\r\n  @case ('imageUpload') {\r\n     <lib-image-upload [field]=\"field()\" />\r\n  }\r\n\r\n  @case ('downloadDocument') {\r\n     <lib-download-document [field]=\"field()\" />\r\n  }\r\n\r\n  @case ('addDocument') {\r\n    <lib-add-document [field]=\"field()\" />\r\n  }\r\n\r\n  @case ('hyperlink') {\r\n    <lib-hyperlink [field]=\"field()\" />\r\n  }\r\n\r\n  @case ('textboxWithUnderscore') {\r\n    <lib-textbox-with-underscore [field]=\"field()\" />\r\n  }\r\n\r\n  @case ('underscoreMobNumber') {\r\n    <lib-underscore-mob-number [field]=\"field()\" />\r\n  }\r\n\r\n  @case ('downloadIconButton') {\r\n    <lib-icon-button [field]=\"field()\" />\r\n  }\r\n\r\n  @case ('image') {\r\n    <lib-image [field]=\"field()\" />\r\n  }\r\n  @case ('stepper') {\r\n    <lib-stepper [field]=\"field()\" />\r\n  }\r\n   @case ('card') {\r\n    <lib-card [field]=\"field()\" />\r\n  }\r\n  @case ('hrLine') {\r\n    <lib-hr-line [field]=\"field()\" />\r\n  }\r\n  @case ('searchMultiSelect') {\r\n    <lib-search-multi-select [field]=\"field()\" />\r\n  }\r\n  @case ('subscriptTextbox') {\r\n    <lib-subscript-textbox [field]=\"field()\" />\r\n  }\r\n  @case ('label') {\r\n    <lib-label [field]=\"field()\" />\r\n  }\r\n  @case ('subHeading') {\r\n    <lib-sub-header [field]=\"field()\" />\r\n  }\r\n  @case ('heading') {\r\n    <lib-header [field]=\"field()\" />\r\n  }\r\n  @case ('table') {\r\n  <lib-table [field]=\"field()\" />\r\n  }\r\n  @case ('textboxWithText') {\r\n    <lib-textbox-with-text [field]=\"field()\" />\r\n  }\r\n    @case ('loader') {\r\n    <lib-loader [field]=\"field()\" />\r\n    }\r\n  @case ('discount') {\r\n    <lib-discount [field]=\"field()\" />\r\n  }\r\n  @case ('optionalBenefitCard') {\r\n    <lib-benefit-card [field]=\"field()\" />\r\n  }\r\n  @case ('errorSnackbar') {\r\n    <lib-error-snackbar [field]=\"field()\" />\r\n  }\r\n   @case ('warningSnackbar') {\r\n    <lib-warning-snackbar [field]=\"field()\" />\r\n  }\r\n   @case ('successSnackbar') {\r\n    <lib-success-snackbar [field]=\"field()\" />\r\n  }\r\n   @case ('neutralSnackbar') {\r\n    <lib-neutral-snackbar [field]=\"field()\" />\r\n  }\r\n  @case ('boldLabel') {\r\n    <lib-grey-label [field]=\"field()\" />\r\n  }\r\n  @case ('iframe') {\r\n    <lib-iframe [field]=\"field()\" />\r\n  }\r\n  @case ('toggleButton') {\r\n    <lib-toggle-button [field]=\"field()\" />\r\n  }\r\n  @case ('payGetCard') {\r\n    <lib-pay-get-card [field]=\"field()\"  />\r\n  }\r\n  @case ('inBuiltBenefit') {\r\n    <lib-in-built-benefit [field]=\"field()\" />\r\n  }\r\n  @case ('otherBenefit') {\r\n    <lib-other-benefits [field]=\"field()\" />\r\n  }\r\n  @case ('annuityRateLogo') {\r\n    <lib-annuity-rate-logo [field]=\"field()\" />\r\n  }\r\n  @case ('discountAnnuity') {\r\n    <lib-discount-v2 [field]=\"field()\" />\r\n  }\r\n  @case ('labelValue'){\r\n    <lib-label-value-card [field]=\"field()\" />\r\n  }\r\n  @case ('medicalQuestions'){\r\n    <lib-medial-questions [field]=\"field()\" />\r\n  }\r\n  @case ('nudge'){\r\n    <lib-page-nudge  [field]=\"field()\"/>\r\n  }\r\n  @case ('progressBar'){\r\n    <lib-progress-bar  [field]=\"field()\"/>\r\n  }\r\n  @case ('accordian'){\r\n    <lib-accordian  [field]=\"field()\"/>\r\n  }\r\n  @case ('miscInfo'){\r\n    <lib-miscellaneous-info-bar  [field]=\"field()\"/>\r\n  }\r\n  @case ('plainText'){\r\n    <lib-plain-text [field]=\"field()\"/>\r\n  }\r\n  @case ('menu'){\r\n    <lib-menu [field]=\"field()\" />\r\n  }\r\n  @case ('stepperWithArrow') {\r\n    <lib-stepper-with-arrow [field]=\"field()\" />\r\n  }\r\n}\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "component", type: TextboxComponent, selector: "lib-textbox", inputs: ["field", "reactiveFormControlobject"] }, { kind: "component", type: SelectComponent, selector: "lib-select", inputs: ["field", "reactiveFormControlobject"] }, { kind: "component", type: RadioComponent, selector: "lib-radio", inputs: ["field"] }, { kind: "component", type: ToggleComponent, selector: "lib-toggle", inputs: ["field"] }, { kind: "component", type: UploadComponent, selector: "lib-upload", inputs: ["field"] }, { kind: "component", type: DobComponent, selector: "lib-dob", inputs: ["field", "reactiveFormControlobject"] }, { kind: "component", type: MobNumberComponent, selector: "lib-mob-number", inputs: ["field", "reactiveFormControlobject"] }, { kind: "component", type: InfoComponent, selector: "lib-info", inputs: ["field"] }, { kind: "component", type: CheckboxComponent, selector: "lib-checkbox", inputs: ["field"] }, { kind: "component", type: TextareaComponent, selector: "lib-textarea", inputs: ["field"] }, { kind: "component", type: ButtonComponent, selector: "lib-button", inputs: ["field"] }, { kind: "component", type: TabComponent, selector: "lib-tab", inputs: ["field"], outputs: ["selectedIndexChange"] }, { kind: "component", type: AutocompleteComponent, selector: "lib-autocomplete", inputs: ["field", "reactiveFormControlobject"] }, { kind: "component", type: MultipleSelectComponent, selector: "lib-multiple-select", inputs: ["field", "reactiveFormControlobject"] }, { kind: "component", type: SelectTextboxComponent, selector: "lib-select-textbox", inputs: ["field", "reactiveFormControlobject"] }, { kind: "component", type: OtpTextboxComponent, selector: "lib-otp-textbox", inputs: ["field", "reactiveFormControlobject"] }, { kind: "component", type: AmountTextboxComponent, selector: "lib-amount-textbox", inputs: ["field", "reactiveFormControlobject"] }, { kind: "component", type: SuffixTextboxComponent, selector: "lib-suffix-textbox", inputs: ["field", "reactiveFormControlobject"] }, { kind: "component", type: OtpMobNumberComponent, selector: "lib-otp-mob-number", inputs: ["field", "reactiveFormControlobject"] }, { kind: "component", type: TagMobNumberComponent, selector: "lib-tag-mob-number", inputs: ["field", "reactiveFormControlobject"] }, { kind: "component", type: AgeDateComponent, selector: "lib-age-date", inputs: ["field", "reactiveFormControlobject"] }, { kind: "component", type: AdditionButtonComponent, selector: "lib-addition-button", inputs: ["field"] }, { kind: "component", type: InfoTextboxComponent, selector: "lib-info-textbox", inputs: ["field", "reactiveFormControlobject"] }, { kind: "component", type: TextboxWithImageComponent, selector: "lib-textbox-with-image", inputs: ["field", "reactiveFormControlobject"] }, { kind: "component", type: EmailWithDomainComponent, selector: "lib-email-with-domain", inputs: ["field", "reactiveFormControlobject"] }, { kind: "component", type: ImageUploadComponent, selector: "lib-image-upload", inputs: ["field"] }, { kind: "component", type: DownloadDocumentComponent, selector: "lib-download-document", inputs: ["field"] }, { kind: "component", type: AddDocumentComponent, selector: "lib-add-document", inputs: ["field"] }, { kind: "component", type: HyperlinkComponent, selector: "lib-hyperlink", inputs: ["field"] }, { kind: "component", type: TextboxWithUnderscoreComponent, selector: "lib-textbox-with-underscore", inputs: ["field", "reactiveFormControlobject"] }, { kind: "component", type: UnderscoreMobNumberComponent, selector: "lib-underscore-mob-number", inputs: ["field", "reactiveFormControlobject"] }, { kind: "component", type: IconButtonComponent, selector: "lib-icon-button", inputs: ["field"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: ImageComponent, selector: "lib-image", inputs: ["field"] }, { kind: "component", type: StepperComponent, selector: "lib-stepper", inputs: ["field"] }, { kind: "component", type: CardComponent, selector: "lib-card", inputs: ["field"] }, { kind: "component", type: HrLineComponent, selector: "lib-hr-line", inputs: ["field"] }, { kind: "component", type: SearchMultiSelectComponent, selector: "lib-search-multi-select", inputs: ["field", "reactiveFormControlobject"] }, { kind: "component", type: SubscriptTextboxComponent, selector: "lib-subscript-textbox", inputs: ["field", "reactiveFormControlobject"] }, { kind: "component", type: LabelComponent, selector: "lib-label", inputs: ["field"] }, { kind: "component", type: SubHeaderComponent, selector: "lib-sub-header", inputs: ["field"] }, { kind: "component", type: HeaderComponent, selector: "lib-header", inputs: ["field"] }, { kind: "component", type: TextboxWithTextComponent, selector: "lib-textbox-with-text", inputs: ["reactiveFormControlobject", "field"] }, { kind: "component", type: DiscountComponent, selector: "lib-discount", inputs: ["field"] }, { kind: "component", type: BenefitCardComponent, selector: "lib-benefit-card", inputs: ["field"] }, { kind: "component", type: TableComponent, selector: "lib-table", inputs: ["field", "readonly"], outputs: ["actionItemClicked"] }, { kind: "component", type: LoaderComponent, selector: "lib-loader", inputs: ["field"] }, { kind: "component", type: WarningSnackbarComponent, selector: "lib-warning-snackbar", inputs: ["field"] }, { kind: "component", type: SuccessSnackbarComponent, selector: "lib-success-snackbar", inputs: ["field"] }, { kind: "component", type: NeutralSnackbarComponent, selector: "lib-neutral-snackbar", inputs: ["field"] }, { kind: "component", type: ErrorSnackbarComponent, selector: "lib-error-snackbar", inputs: ["field"] }, { kind: "component", type: GreyLabelComponent, selector: "lib-grey-label", inputs: ["field"] }, { kind: "component", type: IframeComponent, selector: "lib-iframe", inputs: ["field"] }, { kind: "component", type: ToggleButtonComponent, selector: "lib-toggle-button", inputs: ["reactiveFormControlobject", "field"] }, { kind: "component", type: PayGetCardComponent, selector: "lib-pay-get-card", inputs: ["field", "payAmount", "premiumAmount", "ptValue", "years", "frequency"] }, { kind: "component", type: InBuiltBenefitComponent, selector: "lib-in-built-benefit", inputs: ["field", "premiumAmount", "premiumAmountShort"] }, { kind: "component", type: OtherBenefitsComponent, selector: "lib-other-benefits", inputs: ["field"] }, { kind: "component", type: AnnuityRateLogoComponent, selector: "lib-annuity-rate-logo", inputs: ["field", "ratePercent"] }, { kind: "component", type: DiscountV2Component, selector: "lib-discount-v2", inputs: ["field"] }, { kind: "component", type: LabelValueCardComponent, selector: "lib-label-value-card", inputs: ["field"] }, { kind: "component", type: MedialQuestionsComponent, selector: "lib-medial-questions", inputs: ["medialQuestionResponse", "field"] }, { kind: "component", type: PageNudgeComponent, selector: "lib-page-nudge", inputs: ["field"] }, { kind: "component", type: ProgressBarComponent, selector: "lib-progress-bar", inputs: ["field"] }, { kind: "component", type: AccordianComponent, selector: "lib-accordian", inputs: ["field"] }, { kind: "component", type: MiscellaneousInfoBarComponent, selector: "lib-miscellaneous-info-bar", inputs: ["field", "details"] }, { kind: "component", type: PlainTextComponent, selector: "lib-plain-text", inputs: ["field"] }, { kind: "component", type: MenuComponent, selector: "lib-menu", inputs: ["field"] }, { kind: "component", type: StepperWIthArrowComponent, selector: "lib-stepper-with-arrow", inputs: ["field"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: MasterControlComponent, isStandalone: true, selector: "lib-master-control", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, formGroup: { classPropertyName: "formGroup", publicName: "formGroup", isSignal: false, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@switch (field()?.controlType) {\r\n  @case('text') {\r\n   <lib-textbox [field]=\"field()\"></lib-textbox>\r\n  }\r\n  @case('select') {\r\n    <lib-select [field]=\"field()\"/>\r\n  }\r\n\r\n  @case('radio') {\r\n    <lib-radio [field]=\"field()\" />\r\n  }\r\n\r\n  @case('toggle') {\r\n    <lib-toggle [field]=\"field()\" />\r\n  }\r\n\r\n  @case('file') {\r\n    <lib-upload [field]=\"field()\" />\r\n  }\r\n\r\n  @case('date') {\r\n    <lib-dob [field]=\"field()\" />\r\n  }\r\n\r\n  @case('mobileNumber') {\r\n    <lib-mob-number [field]=\"field()\" />\r\n  }\r\n\r\n  @case('info') {\r\n    <lib-info [field]=\"field()\" />\r\n  }\r\n\r\n  @case('checkbox') {\r\n    <lib-checkbox [field]=\"field()\" />\r\n  }\r\n\r\n  @case('textarea') {\r\n    <lib-textarea [field]=\"field()\" />\r\n  }\r\n\r\n  @case ('button') {\r\n    <lib-button [field]=\"field()\" />\r\n  }\r\n\r\n  @case ('tab') {\r\n    <lib-tab [field]=\"field()\" />\r\n  }\r\n\r\n  @case ('autocomplete') {\r\n    <lib-autocomplete [field]=\"field()\" />\r\n  }\r\n\r\n  @case ('multipleSelect') {\r\n    <lib-multiple-select [field]=\"field()\" />\r\n  }\r\n\r\n  @case ('textboxWithSelect') {\r\n    <lib-select-textbox [field]=\"field()\" />\r\n  }\r\n\r\n  @case ('otpTextbox') {\r\n    <lib-otp-textbox [field]=\"field()\" />\r\n  }\r\n\r\n  @case ('amountTextbox') {\r\n    <lib-amount-textbox [field]=\"field()\" />\r\n  }\r\n\r\n  @case ('suffixTextbox') {\r\n    <lib-suffix-textbox [field]=\"field()\" />\r\n  }\r\n\r\n  @case ('otpMobNumber') {\r\n    <lib-otp-mob-number [field]=\"field()\" />\r\n  }\r\n\r\n  @case ('tagMobNumber') {\r\n    <lib-tag-mob-number [field]=\"field()\" />\r\n  }\r\n\r\n  @case ('dateWithAge') {\r\n     <lib-age-date [field]=\"field()\" />\r\n  }\r\n\r\n  @case ('additionButton') {\r\n    <lib-addition-button [field]=\"field()\" />\r\n  }\r\n\r\n  @case ('infoTextbox') {\r\n    <lib-info-textbox [field]=\"field()\" />\r\n  }\r\n\r\n  @case ('textboxWithImage') {\r\n    <lib-textbox-with-image [field]=\"field()\" />\r\n  }\r\n\r\n  @case ('emailWithDomain') {\r\n    <lib-email-with-domain [field]=\"field()\" />\r\n  }\r\n\r\n  @case ('imageUpload') {\r\n     <lib-image-upload [field]=\"field()\" />\r\n  }\r\n\r\n  @case ('downloadDocument') {\r\n     <lib-download-document [field]=\"field()\" />\r\n  }\r\n\r\n  @case ('addDocument') {\r\n    <lib-add-document [field]=\"field()\" />\r\n  }\r\n\r\n  @case ('hyperlink') {\r\n    <lib-hyperlink [field]=\"field()\" />\r\n  }\r\n\r\n  @case ('textboxWithUnderscore') {\r\n    <lib-textbox-with-underscore [field]=\"field()\" />\r\n  }\r\n\r\n  @case ('underscoreMobNumber') {\r\n    <lib-underscore-mob-number [field]=\"field()\" />\r\n  }\r\n\r\n  @case ('downloadIconButton') {\r\n    <lib-icon-button [field]=\"field()\" />\r\n  }\r\n\r\n  @case ('image') {\r\n    <lib-image [field]=\"field()\" />\r\n  }\r\n  @case ('stepper') {\r\n    <lib-stepper [field]=\"field()\" />\r\n  }\r\n   @case ('card') {\r\n    <lib-card [field]=\"field()\" />\r\n  }\r\n  @case ('hrLine') {\r\n    <lib-hr-line [field]=\"field()\" />\r\n  }\r\n  @case ('searchMultiSelect') {\r\n    <lib-search-multi-select [field]=\"field()\" />\r\n  }\r\n  @case ('subscriptTextbox') {\r\n    <lib-subscript-textbox [field]=\"field()\" />\r\n  }\r\n  @case ('label') {\r\n    <lib-label [field]=\"field()\" />\r\n  }\r\n  @case ('subHeading') {\r\n    <lib-sub-header [field]=\"field()\" />\r\n  }\r\n  @case ('heading') {\r\n    <lib-header [field]=\"field()\" />\r\n  }\r\n  @case ('table') {\r\n  <lib-table [field]=\"field()\" />\r\n  }\r\n  @case ('textboxWithText') {\r\n    <lib-textbox-with-text [field]=\"field()\" />\r\n  }\r\n    @case ('loader') {\r\n    <lib-loader [field]=\"field()\" />\r\n    }\r\n  @case ('discount') {\r\n    <lib-discount [field]=\"field()\" />\r\n  }\r\n  @case ('optionalBenefitCard') {\r\n    <lib-benefit-card [field]=\"field()\" />\r\n  }\r\n  @case ('errorSnackbar') {\r\n    <lib-error-snackbar [field]=\"field()\" />\r\n  }\r\n   @case ('warningSnackbar') {\r\n    <lib-warning-snackbar [field]=\"field()\" />\r\n  }\r\n   @case ('successSnackbar') {\r\n    <lib-success-snackbar [field]=\"field()\" />\r\n  }\r\n   @case ('neutralSnackbar') {\r\n    <lib-neutral-snackbar [field]=\"field()\" />\r\n  }\r\n  @case ('boldLabel') {\r\n    <lib-grey-label [field]=\"field()\" />\r\n  }\r\n  @case ('iframe') {\r\n    <lib-iframe [field]=\"field()\" />\r\n  }\r\n  @case ('toggleButton') {\r\n    <lib-toggle-button [field]=\"field()\" />\r\n  }\r\n  @case ('payGetCard') {\r\n    <lib-pay-get-card [field]=\"field()\"  />\r\n  }\r\n  @case ('inBuiltBenefit') {\r\n    <lib-in-built-benefit [field]=\"field()\" />\r\n  }\r\n  @case ('otherBenefit') {\r\n    <lib-other-benefits [field]=\"field()\" />\r\n  }\r\n  @case ('annuityRateLogo') {\r\n    <lib-annuity-rate-logo [field]=\"field()\" />\r\n  }\r\n  @case ('discountAnnuity') {\r\n    <lib-discount-v2 [field]=\"field()\" />\r\n  }\r\n  @case ('labelValue'){\r\n    <lib-label-value-card [field]=\"field()\" />\r\n  }\r\n  @case ('medicalQuestions'){\r\n    <lib-medial-questions [field]=\"field()\" />\r\n  }\r\n  @case ('nudge'){\r\n    <lib-page-nudge  [field]=\"field()\"/>\r\n  }\r\n  @case ('progressBar'){\r\n    <lib-progress-bar  [field]=\"field()\"/>\r\n  }\r\n  @case ('accordian'){\r\n    <lib-accordian  [field]=\"field()\"/>\r\n  }\r\n  @case ('miscInfo'){\r\n    <lib-miscellaneous-info-bar  [field]=\"field()\"/>\r\n  }\r\n  @case ('plainText'){\r\n    <lib-plain-text [field]=\"field()\"/>\r\n  }\r\n  @case ('menu'){\r\n    <lib-menu [field]=\"field()\" />\r\n  }\r\n  @case ('stepperWithArrow') {\r\n    <lib-stepper-with-arrow [field]=\"field()\" />\r\n  }\r\n}\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "component", type: TextboxComponent, selector: "lib-textbox", inputs: ["field", "reactiveFormControlobject"], outputs: ["blur"] }, { kind: "component", type: SelectComponent, selector: "lib-select", inputs: ["field", "reactiveFormControlobject"] }, { kind: "component", type: RadioComponent, selector: "lib-radio", inputs: ["field"] }, { kind: "component", type: ToggleComponent, selector: "lib-toggle", inputs: ["field"] }, { kind: "component", type: UploadComponent, selector: "lib-upload", inputs: ["field"] }, { kind: "component", type: DobComponent, selector: "lib-dob", inputs: ["field", "reactiveFormControlobject"] }, { kind: "component", type: MobNumberComponent, selector: "lib-mob-number", inputs: ["field", "reactiveFormControlobject"], outputs: ["blur"] }, { kind: "component", type: InfoComponent, selector: "lib-info", inputs: ["field"] }, { kind: "component", type: CheckboxComponent, selector: "lib-checkbox", inputs: ["field"], outputs: ["change"] }, { kind: "component", type: TextareaComponent, selector: "lib-textarea", inputs: ["field"] }, { kind: "component", type: ButtonComponent, selector: "lib-button", inputs: ["field"] }, { kind: "component", type: TabComponent, selector: "lib-tab", inputs: ["field"], outputs: ["selectedIndexChange"] }, { kind: "component", type: AutocompleteComponent, selector: "lib-autocomplete", inputs: ["field", "reactiveFormControlobject"] }, { kind: "component", type: MultipleSelectComponent, selector: "lib-multiple-select", inputs: ["field", "reactiveFormControlobject"] }, { kind: "component", type: SelectTextboxComponent, selector: "lib-select-textbox", inputs: ["field", "reactiveFormControlobject"] }, { kind: "component", type: OtpTextboxComponent, selector: "lib-otp-textbox", inputs: ["field", "reactiveFormControlobject"] }, { kind: "component", type: AmountTextboxComponent, selector: "lib-amount-textbox", inputs: ["field", "reactiveFormControlobject"], outputs: ["blur"] }, { kind: "component", type: SuffixTextboxComponent, selector: "lib-suffix-textbox", inputs: ["field", "reactiveFormControlobject"] }, { kind: "component", type: OtpMobNumberComponent, selector: "lib-otp-mob-number", inputs: ["field", "reactiveFormControlobject"] }, { kind: "component", type: TagMobNumberComponent, selector: "lib-tag-mob-number", inputs: ["field", "reactiveFormControlobject"] }, { kind: "component", type: AgeDateComponent, selector: "lib-age-date", inputs: ["field", "reactiveFormControlobject"] }, { kind: "component", type: AdditionButtonComponent, selector: "lib-addition-button", inputs: ["field"] }, { kind: "component", type: InfoTextboxComponent, selector: "lib-info-textbox", inputs: ["field", "reactiveFormControlobject"] }, { kind: "component", type: TextboxWithImageComponent, selector: "lib-textbox-with-image", inputs: ["field", "reactiveFormControlobject"], outputs: ["blur"] }, { kind: "component", type: EmailWithDomainComponent, selector: "lib-email-with-domain", inputs: ["field", "reactiveFormControlobject"] }, { kind: "component", type: ImageUploadComponent, selector: "lib-image-upload", inputs: ["field"] }, { kind: "component", type: DownloadDocumentComponent, selector: "lib-download-document", inputs: ["field"] }, { kind: "component", type: AddDocumentComponent, selector: "lib-add-document", inputs: ["field"] }, { kind: "component", type: HyperlinkComponent, selector: "lib-hyperlink", inputs: ["field"] }, { kind: "component", type: TextboxWithUnderscoreComponent, selector: "lib-textbox-with-underscore", inputs: ["field", "reactiveFormControlobject"] }, { kind: "component", type: UnderscoreMobNumberComponent, selector: "lib-underscore-mob-number", inputs: ["field", "reactiveFormControlobject"] }, { kind: "component", type: IconButtonComponent, selector: "lib-icon-button", inputs: ["field"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: ImageComponent, selector: "lib-image", inputs: ["field"] }, { kind: "component", type: StepperComponent, selector: "lib-stepper", inputs: ["field"] }, { kind: "component", type: CardComponent, selector: "lib-card", inputs: ["field"] }, { kind: "component", type: HrLineComponent, selector: "lib-hr-line", inputs: ["field"] }, { kind: "component", type: SearchMultiSelectComponent, selector: "lib-search-multi-select", inputs: ["field", "reactiveFormControlobject"] }, { kind: "component", type: SubscriptTextboxComponent, selector: "lib-subscript-textbox", inputs: ["field", "reactiveFormControlobject"] }, { kind: "component", type: LabelComponent, selector: "lib-label", inputs: ["field"] }, { kind: "component", type: SubHeaderComponent, selector: "lib-sub-header", inputs: ["field"] }, { kind: "component", type: HeaderComponent, selector: "lib-header", inputs: ["field"] }, { kind: "component", type: TextboxWithTextComponent, selector: "lib-textbox-with-text", inputs: ["reactiveFormControlobject", "field"] }, { kind: "component", type: DiscountComponent, selector: "lib-discount", inputs: ["field"] }, { kind: "component", type: BenefitCardComponent, selector: "lib-benefit-card", inputs: ["field"] }, { kind: "component", type: TableComponent, selector: "lib-table", inputs: ["field", "readonly"], outputs: ["actionItemClicked"] }, { kind: "component", type: LoaderComponent, selector: "lib-loader", inputs: ["field"] }, { kind: "component", type: WarningSnackbarComponent, selector: "lib-warning-snackbar", inputs: ["field"] }, { kind: "component", type: SuccessSnackbarComponent, selector: "lib-success-snackbar", inputs: ["field"] }, { kind: "component", type: NeutralSnackbarComponent, selector: "lib-neutral-snackbar", inputs: ["field"] }, { kind: "component", type: ErrorSnackbarComponent, selector: "lib-error-snackbar", inputs: ["field"] }, { kind: "component", type: GreyLabelComponent, selector: "lib-grey-label", inputs: ["field"] }, { kind: "component", type: IframeComponent, selector: "lib-iframe", inputs: ["field"] }, { kind: "component", type: ToggleButtonComponent, selector: "lib-toggle-button", inputs: ["reactiveFormControlobject", "field"] }, { kind: "component", type: PayGetCardComponent, selector: "lib-pay-get-card", inputs: ["field", "payAmount", "premiumAmount", "ptValue", "years", "frequency"] }, { kind: "component", type: InBuiltBenefitComponent, selector: "lib-in-built-benefit", inputs: ["field", "premiumAmount", "premiumAmountShort"] }, { kind: "component", type: OtherBenefitsComponent, selector: "lib-other-benefits", inputs: ["field"] }, { kind: "component", type: AnnuityRateLogoComponent, selector: "lib-annuity-rate-logo", inputs: ["field", "ratePercent"] }, { kind: "component", type: DiscountV2Component, selector: "lib-discount-v2", inputs: ["field"] }, { kind: "component", type: LabelValueCardComponent, selector: "lib-label-value-card", inputs: ["field"] }, { kind: "component", type: MedialQuestionsComponent, selector: "lib-medial-questions", inputs: ["medialQuestionResponse", "field"] }, { kind: "component", type: PageNudgeComponent, selector: "lib-page-nudge", inputs: ["field"] }, { kind: "component", type: ProgressBarComponent, selector: "lib-progress-bar", inputs: ["field"] }, { kind: "component", type: AccordianComponent, selector: "lib-accordian", inputs: ["field"] }, { kind: "component", type: MiscellaneousInfoBarComponent, selector: "lib-miscellaneous-info-bar", inputs: ["field", "details"] }, { kind: "component", type: PlainTextComponent, selector: "lib-plain-text", inputs: ["field"] }, { kind: "component", type: MenuComponent, selector: "lib-menu", inputs: ["field"] }, { kind: "component", type: StepperWIthArrowComponent, selector: "lib-stepper-with-arrow", inputs: ["field"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MasterControlComponent, decorators: [{
             type: Component,