master-control 0.2.96 → 0.2.97

package/fesm2022/master-control.mjs

@@ -36,11 +36,12 @@ import { MatPaginatorModule } from '@angular/material/paginator';
 import * as i1$2 from '@angular/platform-browser';
 import * as i1$3 from '@angular/material/button-toggle';
 import { MatButtonToggleModule } from '@angular/material/button-toggle';
-import * as i3$1 from '@angular/google-maps';
+import * as i4$4 from '@angular/google-maps';
 import { GoogleMapsModule } from '@angular/google-maps';
-import * as i1$4 from '@angular/material/progress-bar';
+import * as i1$4 from '@angular/common/http';
+import * as i1$5 from '@angular/material/progress-bar';
 import { MatProgressBarModule } from '@angular/material/progress-bar';
-import * as i1$5 from '@angular/material/expansion';
+import * as i1$6 from '@angular/material/expansion';
 import { MatExpansionModule } from '@angular/material/expansion';
 
 class MasterControlService {
@@ -682,7 +683,7 @@ class UploadComponent {
                 useExisting: UploadComponent,
                 multi: true
             }
-        ], viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }], ngImport: i0, template: "<label class=\"field-lable upload-label\" *ngIf=\"field() && field()?.isVisible && field()?.isShowLabel\">{{field()?.label}}</label>\r\n  @if(reactiveFormControlobject()) {\r\n  <input\r\n    hidden\r\n    [type]=\"field()?.controlType\"\r\n    [name]=\"field()?.fieldName\"\r\n    [id]=\"field()?.fieldName\"\r\n    [multiple]=\"field()?.configData?.multiple\"\r\n    [accept]=\"field()?.configData?.accept\"\r\n    #fileInput\r\n    (change)=\"onFileSelected($event)\"\r\n    (click)=\"fileInput.value = ''\"\r\n    [required]=\"field()?.validators?.isRequired\"\r\n    [disabled]=\"disabled\"\r\n    [formControl]=\"reactiveFormControlobject()\"\r\n  />\r\n  }@else {\r\n  <input\r\n    hidden\r\n    [type]=\"field()?.controlType\"\r\n    [name]=\"field()?.fieldName\"\r\n    [id]=\"field()?.fieldName\"\r\n    [multiple]=\"field()?.configData?.multiple\"\r\n    [accept]=\"field()?.configData?.accept\"\r\n    #fileInput\r\n    (change)=\"onFileSelected($event)\"\r\n    (click)=\"fileInput.value = ''\"\r\n    [required]=\"field()?.validators?.isRequired\"\r\n    [disabled]=\"disabled\"\r\n  />\r\n  }\r\n  <button\r\n    type=\"button\"\r\n    class=\"upload-btn\"\r\n    (click)=\"triggerFileInput()\"\r\n    [ngClass]=\"field()?.label ? 'lightbackground' : 'successBackground'\"\r\n    *ngIf=\"field() && field()?.isVisible\"\r\n    [disabled]=\"disabled\"\r\n     [ngStyle]=\"{\r\n'--upload-width': field()?.controlStyle?.width ,\r\n'--upload-border-radius': field()?.controlStyle?.borderRadius ,\r\n'--upload-border-color': field()?.controlStyle?.borderColor ,\r\n'--upload-border-width': field()?.controlStyle?.borderWidth ,\r\n'--upload-border-style': field()?.controlStyle?.borderStyle ,\r\n'--upload-background-color': field()?.controlStyle?.background ,\r\n'--upload-focus-border-color': field()?.controlStyle?.focusBorderColor ,\r\n'--upload-focus-background-color': field()?.controlStyle?.focusBackground ,\r\n}\"\r\n  >\r\n    <ng-container *ngIf=\"field()?.label && !hasFiles(); else fileUploadedTemplate\">\r\n      <span class=\"upload-icon\">\r\n        <span\r\n          ><img\r\n            src=\"https://cdn.godigit.com/retail-life/Upload_documents.svg\"\r\n            alt=\"\"\r\n        /></span>\r\n        <span class=\"upload-text\" [ngStyle]=\"{\r\n'--upload-font-color': field()?.controlStyle?.color ,\r\n'--upload-font-size': field()?.controlStyle?.fontSize ,\r\n'--upload-font-weight': field()?.controlStyle?.fontWeight,\r\n'--upload-focus-font-color': field()?.controlStyle?.focusColor ,\r\n}\">{{ field()?.placeHolder }}</span>\r\n      </span>\r\n    </ng-container>\r\n    <ng-template #fileUploadedTemplate>\r\n      <div *ngFor=\"let file of uploadedFiles; let i = index\" class=\"uploaded-file d-flex gap-4\">\r\n        <span class=\"mt-2 right-icon\">\r\n          <span><img [src]=\"field()?.imageUrl || 'https://cdn.godigit.com/retail-life/Upload_documents.svg'\" alt=\"\"/></span>\r\n          <span [title]=\"file.name\">{{ file.name }}</span>\r\n        </span>\r\n        <div class=\"mt-2 left-icon\">\r\n          <span><img src=\"https://cdn.godigit.com/retail-life/visibility-oui.svg\" alt=\"\"/></span>\r\n          <span (click)=\"removeFile(i)\" style=\"cursor: pointer;\">\r\n            <img src=\"https://cdn.godigit.com/retail-life/delete-oui.svg\" alt=\"\"/>\r\n          </span>\r\n        </div>\r\n      </div>\r\n    </ng-template>\r\n  </button>\r\n  <div class=\"upload-info\" *ngIf=\"field() && field()?.isVisible && field()?.configData?.subText\">{{field()?.configData?.subText}}</div>\r\n", styles: ["*{font-family:mulish!important}.field-lable{font-size:12px!important;font-weight:700!important;color:#444!important;margin-bottom:0!important}.upload-label{opacity:1}.upload-btn{width:100%!important;height:48px!important;padding:10px;border-radius:.5rem}.upload-btn{width:var(--upload-width , 100%)!important;border-radius:var(--upload-border-radius , 8px)!important}.lightbackground{border-color:#999;border-width:1px;border-style:dashed;background:#fff;color:#444;font-size:14px;font-weight:700}.lightbackground{border-color:var(--upload-border-color , #999)!important;border-width:var(--upload-border-width , 1px)!important;border-style:var(--upload-border-style , dashed)!important;background:var(--upload-background-color , #ffffff)!important}.successBackground{border-color:var(--upload-focus-border-color , #ddd)!important;background:var(--upload-focus-background-color , #fafafa)!important;color:var(--upload-focus-font-color , #444)!important}.successBackground{border:1px dashed #ddd;background:#fafafa;color:#444;display:flex;justify-content:space-between}.upload-icon{display:flex;justify-content:center;gap:7px}.upload-text{color:#444!important;font-weight:700!important;font-size:14px!important}.upload-text{color:var(--upload-font-color , #444)!important;font-size:var( --upload-font-size , 14px)!important;font-weight:var(--upload-font-weight , 700)!important}.right-icon{display:flex;gap:10px;margin-left:.5em}.left-icon{display:flex;gap:15px;margin-right:1em}.upload-info{font-size:10px;font-weight:500;font-family:Mulish!important;letter-spacing:0px;color:#444}\n"], dependencies: [{ 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: 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: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
+        ], viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }], ngImport: i0, template: "<label class=\"field-lable upload-label\" *ngIf=\"field() && field()?.isVisible && field()?.isShowLabel\">{{field()?.label}}</label>\r\n  @if(reactiveFormControlobject()) {\r\n  <input\r\n    hidden\r\n    [type]=\"field()?.controlType\"\r\n    [name]=\"field()?.fieldName\"\r\n    [id]=\"field()?.fieldName\"\r\n    [multiple]=\"field()?.configData?.multiple\"\r\n    [accept]=\"field()?.configData?.accept\"\r\n    #fileInput\r\n    (change)=\"onFileSelected($event)\"\r\n    (click)=\"fileInput.value = ''\"\r\n    [required]=\"field()?.validators?.isRequired\"\r\n    [disabled]=\"disabled\"\r\n    [formControl]=\"reactiveFormControlobject()\"\r\n  />\r\n  }@else {\r\n  <input\r\n    hidden\r\n    [type]=\"field()?.controlType\"\r\n    [name]=\"field()?.fieldName\"\r\n    [id]=\"field()?.fieldName\"\r\n    [multiple]=\"field()?.configData?.multiple\"\r\n    [accept]=\"field()?.configData?.accept\"\r\n    #fileInput\r\n    (change)=\"onFileSelected($event)\"\r\n    (click)=\"fileInput.value = ''\"\r\n    [required]=\"field()?.validators?.isRequired\"\r\n    [disabled]=\"disabled\"\r\n  />\r\n  }\r\n  <button\r\n    type=\"button\"\r\n    class=\"upload-btn\"\r\n    (click)=\"triggerFileInput()\"\r\n    [ngClass]=\"field()?.label ? 'lightbackground' : 'successBackground'\"\r\n    *ngIf=\"field() && field()?.isVisible\"\r\n    [disabled]=\"disabled\"\r\n     [ngStyle]=\"{\r\n'--upload-width': field()?.controlStyle?.width ,\r\n'--upload-border-radius': field()?.controlStyle?.borderRadius ,\r\n'--upload-border-color': field()?.controlStyle?.borderColor ,\r\n'--upload-border-width': field()?.controlStyle?.borderWidth ,\r\n'--upload-border-style': field()?.controlStyle?.borderStyle ,\r\n'--upload-background-color': field()?.controlStyle?.background ,\r\n'--upload-focus-border-color': field()?.controlStyle?.focusBorderColor ,\r\n'--upload-focus-background-color': field()?.controlStyle?.focusBackground ,\r\n}\"\r\n  >\r\n    <ng-container *ngIf=\"field()?.label && !hasFiles(); else fileUploadedTemplate\">\r\n      <span class=\"upload-icon\">\r\n        <span\r\n          ><img\r\n            src=\"https://cdn.godigit.com/retail-life/Upload_documents.svg\"\r\n            alt=\"\"\r\n        /></span>\r\n        <span class=\"upload-text\" [ngStyle]=\"{\r\n'--upload-font-color': field()?.controlStyle?.color ,\r\n'--upload-font-size': field()?.controlStyle?.fontSize ,\r\n'--upload-font-weight': field()?.controlStyle?.fontWeight,\r\n'--upload-focus-font-color': field()?.controlStyle?.focusColor ,\r\n}\">{{ field()?.placeHolder }}</span>\r\n      </span>\r\n    </ng-container>\r\n    <ng-template #fileUploadedTemplate>\r\n      <div *ngFor=\"let file of uploadedFiles; let i = index\" class=\"uploaded-file d-flex gap-4\">\r\n        <span class=\"mt-2 right-icon\" style=\" white-space: nowrap !important;\r\n    overflow: hidden !important;\r\n    text-overflow: ellipsis !important;\">\r\n          <span><img [src]=\"field()?.imageUrl || 'https://cdn.godigit.com/retail-life/Upload_documents.svg'\" alt=\"\"/></span>\r\n          <span [title]=\"file.name\">{{ file.name }}</span>\r\n        </span>\r\n        <div class=\"mt-2 left-icon\">\r\n          <span><img src=\"https://cdn.godigit.com/retail-life/visibility-oui.svg\" alt=\"\"/></span>\r\n          <span (click)=\"removeFile(i)\" style=\"cursor: pointer;\">\r\n            <img src=\"https://cdn.godigit.com/retail-life/delete-oui.svg\" alt=\"\"/>\r\n          </span>\r\n        </div>\r\n      </div>\r\n    </ng-template>\r\n  </button>\r\n  <div class=\"upload-info\" *ngIf=\"field() && field()?.isVisible && field()?.configData?.subText\">{{field()?.configData?.subText}}</div>\r\n", styles: ["*{font-family:mulish!important}.field-lable{font-size:12px!important;font-weight:700!important;color:#444!important;margin-bottom:0!important}.upload-label{opacity:1}.upload-btn{width:100%!important;height:48px!important;padding:10px;border-radius:.5rem}.upload-btn{width:var(--upload-width , 100%)!important;border-radius:var(--upload-border-radius , 8px)!important}.lightbackground{border-color:#999;border-width:1px;border-style:dashed;background:#fff;color:#444;font-size:14px;font-weight:700}.lightbackground{border-color:var(--upload-border-color , #999)!important;border-width:var(--upload-border-width , 1px)!important;border-style:var(--upload-border-style , dashed)!important;background:var(--upload-background-color , #ffffff)!important}.successBackground{border-color:var(--upload-focus-border-color , #ddd)!important;background:var(--upload-focus-background-color , #fafafa)!important;color:var(--upload-focus-font-color , #444)!important}.successBackground{border:1px dashed #ddd;background:#fafafa;color:#444;display:flex;justify-content:space-between}.upload-icon{display:flex;justify-content:center;gap:7px}.upload-text{color:#444!important;font-weight:700!important;font-size:14px!important}.upload-text{color:var(--upload-font-color , #444)!important;font-size:var( --upload-font-size , 14px)!important;font-weight:var(--upload-font-weight , 700)!important}.right-icon{display:flex;gap:10px;margin-left:.5em}.left-icon{display:flex;gap:15px;margin-right:1em}.upload-info{font-size:10px;font-weight:500;font-family:Mulish!important;letter-spacing:0px;color:#444}\n"], dependencies: [{ 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: 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: "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: UploadComponent, decorators: [{
             type: Component,
@@ -696,7 +697,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                             useExisting: UploadComponent,
                             multi: true
                         }
-                    ], template: "<label class=\"field-lable upload-label\" *ngIf=\"field() && field()?.isVisible && field()?.isShowLabel\">{{field()?.label}}</label>\r\n  @if(reactiveFormControlobject()) {\r\n  <input\r\n    hidden\r\n    [type]=\"field()?.controlType\"\r\n    [name]=\"field()?.fieldName\"\r\n    [id]=\"field()?.fieldName\"\r\n    [multiple]=\"field()?.configData?.multiple\"\r\n    [accept]=\"field()?.configData?.accept\"\r\n    #fileInput\r\n    (change)=\"onFileSelected($event)\"\r\n    (click)=\"fileInput.value = ''\"\r\n    [required]=\"field()?.validators?.isRequired\"\r\n    [disabled]=\"disabled\"\r\n    [formControl]=\"reactiveFormControlobject()\"\r\n  />\r\n  }@else {\r\n  <input\r\n    hidden\r\n    [type]=\"field()?.controlType\"\r\n    [name]=\"field()?.fieldName\"\r\n    [id]=\"field()?.fieldName\"\r\n    [multiple]=\"field()?.configData?.multiple\"\r\n    [accept]=\"field()?.configData?.accept\"\r\n    #fileInput\r\n    (change)=\"onFileSelected($event)\"\r\n    (click)=\"fileInput.value = ''\"\r\n    [required]=\"field()?.validators?.isRequired\"\r\n    [disabled]=\"disabled\"\r\n  />\r\n  }\r\n  <button\r\n    type=\"button\"\r\n    class=\"upload-btn\"\r\n    (click)=\"triggerFileInput()\"\r\n    [ngClass]=\"field()?.label ? 'lightbackground' : 'successBackground'\"\r\n    *ngIf=\"field() && field()?.isVisible\"\r\n    [disabled]=\"disabled\"\r\n     [ngStyle]=\"{\r\n'--upload-width': field()?.controlStyle?.width ,\r\n'--upload-border-radius': field()?.controlStyle?.borderRadius ,\r\n'--upload-border-color': field()?.controlStyle?.borderColor ,\r\n'--upload-border-width': field()?.controlStyle?.borderWidth ,\r\n'--upload-border-style': field()?.controlStyle?.borderStyle ,\r\n'--upload-background-color': field()?.controlStyle?.background ,\r\n'--upload-focus-border-color': field()?.controlStyle?.focusBorderColor ,\r\n'--upload-focus-background-color': field()?.controlStyle?.focusBackground ,\r\n}\"\r\n  >\r\n    <ng-container *ngIf=\"field()?.label && !hasFiles(); else fileUploadedTemplate\">\r\n      <span class=\"upload-icon\">\r\n        <span\r\n          ><img\r\n            src=\"https://cdn.godigit.com/retail-life/Upload_documents.svg\"\r\n            alt=\"\"\r\n        /></span>\r\n        <span class=\"upload-text\" [ngStyle]=\"{\r\n'--upload-font-color': field()?.controlStyle?.color ,\r\n'--upload-font-size': field()?.controlStyle?.fontSize ,\r\n'--upload-font-weight': field()?.controlStyle?.fontWeight,\r\n'--upload-focus-font-color': field()?.controlStyle?.focusColor ,\r\n}\">{{ field()?.placeHolder }}</span>\r\n      </span>\r\n    </ng-container>\r\n    <ng-template #fileUploadedTemplate>\r\n      <div *ngFor=\"let file of uploadedFiles; let i = index\" class=\"uploaded-file d-flex gap-4\">\r\n        <span class=\"mt-2 right-icon\">\r\n          <span><img [src]=\"field()?.imageUrl || 'https://cdn.godigit.com/retail-life/Upload_documents.svg'\" alt=\"\"/></span>\r\n          <span [title]=\"file.name\">{{ file.name }}</span>\r\n        </span>\r\n        <div class=\"mt-2 left-icon\">\r\n          <span><img src=\"https://cdn.godigit.com/retail-life/visibility-oui.svg\" alt=\"\"/></span>\r\n          <span (click)=\"removeFile(i)\" style=\"cursor: pointer;\">\r\n            <img src=\"https://cdn.godigit.com/retail-life/delete-oui.svg\" alt=\"\"/>\r\n          </span>\r\n        </div>\r\n      </div>\r\n    </ng-template>\r\n  </button>\r\n  <div class=\"upload-info\" *ngIf=\"field() && field()?.isVisible && field()?.configData?.subText\">{{field()?.configData?.subText}}</div>\r\n", styles: ["*{font-family:mulish!important}.field-lable{font-size:12px!important;font-weight:700!important;color:#444!important;margin-bottom:0!important}.upload-label{opacity:1}.upload-btn{width:100%!important;height:48px!important;padding:10px;border-radius:.5rem}.upload-btn{width:var(--upload-width , 100%)!important;border-radius:var(--upload-border-radius , 8px)!important}.lightbackground{border-color:#999;border-width:1px;border-style:dashed;background:#fff;color:#444;font-size:14px;font-weight:700}.lightbackground{border-color:var(--upload-border-color , #999)!important;border-width:var(--upload-border-width , 1px)!important;border-style:var(--upload-border-style , dashed)!important;background:var(--upload-background-color , #ffffff)!important}.successBackground{border-color:var(--upload-focus-border-color , #ddd)!important;background:var(--upload-focus-background-color , #fafafa)!important;color:var(--upload-focus-font-color , #444)!important}.successBackground{border:1px dashed #ddd;background:#fafafa;color:#444;display:flex;justify-content:space-between}.upload-icon{display:flex;justify-content:center;gap:7px}.upload-text{color:#444!important;font-weight:700!important;font-size:14px!important}.upload-text{color:var(--upload-font-color , #444)!important;font-size:var( --upload-font-size , 14px)!important;font-weight:var(--upload-font-weight , 700)!important}.right-icon{display:flex;gap:10px;margin-left:.5em}.left-icon{display:flex;gap:15px;margin-right:1em}.upload-info{font-size:10px;font-weight:500;font-family:Mulish!important;letter-spacing:0px;color:#444}\n"] }]
+                    ], template: "<label class=\"field-lable upload-label\" *ngIf=\"field() && field()?.isVisible && field()?.isShowLabel\">{{field()?.label}}</label>\r\n  @if(reactiveFormControlobject()) {\r\n  <input\r\n    hidden\r\n    [type]=\"field()?.controlType\"\r\n    [name]=\"field()?.fieldName\"\r\n    [id]=\"field()?.fieldName\"\r\n    [multiple]=\"field()?.configData?.multiple\"\r\n    [accept]=\"field()?.configData?.accept\"\r\n    #fileInput\r\n    (change)=\"onFileSelected($event)\"\r\n    (click)=\"fileInput.value = ''\"\r\n    [required]=\"field()?.validators?.isRequired\"\r\n    [disabled]=\"disabled\"\r\n    [formControl]=\"reactiveFormControlobject()\"\r\n  />\r\n  }@else {\r\n  <input\r\n    hidden\r\n    [type]=\"field()?.controlType\"\r\n    [name]=\"field()?.fieldName\"\r\n    [id]=\"field()?.fieldName\"\r\n    [multiple]=\"field()?.configData?.multiple\"\r\n    [accept]=\"field()?.configData?.accept\"\r\n    #fileInput\r\n    (change)=\"onFileSelected($event)\"\r\n    (click)=\"fileInput.value = ''\"\r\n    [required]=\"field()?.validators?.isRequired\"\r\n    [disabled]=\"disabled\"\r\n  />\r\n  }\r\n  <button\r\n    type=\"button\"\r\n    class=\"upload-btn\"\r\n    (click)=\"triggerFileInput()\"\r\n    [ngClass]=\"field()?.label ? 'lightbackground' : 'successBackground'\"\r\n    *ngIf=\"field() && field()?.isVisible\"\r\n    [disabled]=\"disabled\"\r\n     [ngStyle]=\"{\r\n'--upload-width': field()?.controlStyle?.width ,\r\n'--upload-border-radius': field()?.controlStyle?.borderRadius ,\r\n'--upload-border-color': field()?.controlStyle?.borderColor ,\r\n'--upload-border-width': field()?.controlStyle?.borderWidth ,\r\n'--upload-border-style': field()?.controlStyle?.borderStyle ,\r\n'--upload-background-color': field()?.controlStyle?.background ,\r\n'--upload-focus-border-color': field()?.controlStyle?.focusBorderColor ,\r\n'--upload-focus-background-color': field()?.controlStyle?.focusBackground ,\r\n}\"\r\n  >\r\n    <ng-container *ngIf=\"field()?.label && !hasFiles(); else fileUploadedTemplate\">\r\n      <span class=\"upload-icon\">\r\n        <span\r\n          ><img\r\n            src=\"https://cdn.godigit.com/retail-life/Upload_documents.svg\"\r\n            alt=\"\"\r\n        /></span>\r\n        <span class=\"upload-text\" [ngStyle]=\"{\r\n'--upload-font-color': field()?.controlStyle?.color ,\r\n'--upload-font-size': field()?.controlStyle?.fontSize ,\r\n'--upload-font-weight': field()?.controlStyle?.fontWeight,\r\n'--upload-focus-font-color': field()?.controlStyle?.focusColor ,\r\n}\">{{ field()?.placeHolder }}</span>\r\n      </span>\r\n    </ng-container>\r\n    <ng-template #fileUploadedTemplate>\r\n      <div *ngFor=\"let file of uploadedFiles; let i = index\" class=\"uploaded-file d-flex gap-4\">\r\n        <span class=\"mt-2 right-icon\" style=\" white-space: nowrap !important;\r\n    overflow: hidden !important;\r\n    text-overflow: ellipsis !important;\">\r\n          <span><img [src]=\"field()?.imageUrl || 'https://cdn.godigit.com/retail-life/Upload_documents.svg'\" alt=\"\"/></span>\r\n          <span [title]=\"file.name\">{{ file.name }}</span>\r\n        </span>\r\n        <div class=\"mt-2 left-icon\">\r\n          <span><img src=\"https://cdn.godigit.com/retail-life/visibility-oui.svg\" alt=\"\"/></span>\r\n          <span (click)=\"removeFile(i)\" style=\"cursor: pointer;\">\r\n            <img src=\"https://cdn.godigit.com/retail-life/delete-oui.svg\" alt=\"\"/>\r\n          </span>\r\n        </div>\r\n      </div>\r\n    </ng-template>\r\n  </button>\r\n  <div class=\"upload-info\" *ngIf=\"field() && field()?.isVisible && field()?.configData?.subText\">{{field()?.configData?.subText}}</div>\r\n", styles: ["*{font-family:mulish!important}.field-lable{font-size:12px!important;font-weight:700!important;color:#444!important;margin-bottom:0!important}.upload-label{opacity:1}.upload-btn{width:100%!important;height:48px!important;padding:10px;border-radius:.5rem}.upload-btn{width:var(--upload-width , 100%)!important;border-radius:var(--upload-border-radius , 8px)!important}.lightbackground{border-color:#999;border-width:1px;border-style:dashed;background:#fff;color:#444;font-size:14px;font-weight:700}.lightbackground{border-color:var(--upload-border-color , #999)!important;border-width:var(--upload-border-width , 1px)!important;border-style:var(--upload-border-style , dashed)!important;background:var(--upload-background-color , #ffffff)!important}.successBackground{border-color:var(--upload-focus-border-color , #ddd)!important;background:var(--upload-focus-background-color , #fafafa)!important;color:var(--upload-focus-font-color , #444)!important}.successBackground{border:1px dashed #ddd;background:#fafafa;color:#444;display:flex;justify-content:space-between}.upload-icon{display:flex;justify-content:center;gap:7px}.upload-text{color:#444!important;font-weight:700!important;font-size:14px!important}.upload-text{color:var(--upload-font-color , #444)!important;font-size:var( --upload-font-size , 14px)!important;font-weight:var(--upload-font-weight , 700)!important}.right-icon{display:flex;gap:10px;margin-left:.5em}.left-icon{display:flex;gap:15px;margin-right:1em}.upload-info{font-size:10px;font-weight:500;font-family:Mulish!important;letter-spacing:0px;color:#444}\n"] }]
         }], ctorParameters: () => [{ type: MasterControlService }], propDecorators: { fileInput: [{
                 type: ViewChild,
                 args: ['fileInput']
@@ -728,7 +729,11 @@ class DobComponent {
     field = input.required();
     inputValue = null;
     reactiveFormControlobject = input();
+    // Output events for parent component communication
     blur = new EventEmitter();
+    valueChange = new EventEmitter();
+    dateSelected = new EventEmitter();
+    invalidDate = new EventEmitter();
     constructor(service) {
         this.service = service;
     }
@@ -767,6 +772,45 @@ class DobComponent {
     onInputChange(event) {
         this.inputValue = event.target.value;
         this._onChange(this.inputValue);
+        // Emit value change event for parent component
+        this.valueChange.emit(this.inputValue);
+    }
+    onInputBlurForReactiveForms(event) {
+        let isValid = true;
+        let parsedDate = null;
+        if (!this.service.checkIfValueIsEmpty(event.target.value)) {
+            if (isNaN(Date.parse(event.target.value))) {
+                event.target.value = '';
+                this.inputValue = '';
+                this._onChange(this.inputValue);
+                isValid = false;
+                // Emit invalid date event
+                this.invalidDate.emit({
+                    originalValue: event.target.value,
+                    isValid: false,
+                    error: 'Invalid date format'
+                });
+            }
+            else {
+                parsedDate = new Date(Date.parse(event.target.value));
+                this.inputValue = event.target.value;
+                this._onChange(this.inputValue);
+                // Emit valid date selection
+                this.dateSelected.emit({
+                    formattedValue: this.inputValue,
+                    dateObject: parsedDate,
+                    isValid: true
+                });
+            }
+        }
+        this._unTouched();
+        // Enhanced blur event with validation info
+        this.blur.emit({
+            originalEvent: event,
+            value: this.inputValue,
+            isValid: isValid,
+            parsedDate: parsedDate
+        });
     }
     onInputBlur(event) {
         if (!this.service.checkIfValueIsEmpty(event.target.value)) {
@@ -777,8 +821,24 @@ class DobComponent {
         this._unTouched();
         this.blur.emit(event);
     }
+    // Handle datepicker selection
+    onDateChange(event) {
+        if (event.value) {
+            const selectedDate = event.value;
+            this.inputValue = selectedDate;
+            this._onChange(this.inputValue);
+            // Emit date selection event
+            this.dateSelected.emit({
+                formattedValue: this.inputValue,
+                dateObject: selectedDate,
+                isValid: true,
+                source: 'datepicker'
+            });
+            this.valueChange.emit(this.inputValue);
+        }
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DobComponent, deps: [{ token: MasterControlService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: DobComponent, isStandalone: true, selector: "lib-dob", 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: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: DobComponent, isStandalone: true, selector: "lib-dob", 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", valueChange: "valueChange", dateSelected: "dateSelected", invalidDate: "invalidDate" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: DobComponent,
@@ -790,7 +850,7 @@ class DobComponent {
                 deps: []
             },
             { provide: MAT_DATE_FORMATS, useValue: MY_DATE_FORMAT }
-        ], ngImport: i0, template: "<label\r\n  *ngIf=\"field() && field()?.isVisible && field().isShowLabel\"\r\n  class=\"field-lable\"\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-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    '--custom-bg-color': field()?.controlStyle?.background ,\r\n     '--custom-bg-color-focus': field()?.controlStyle?.focusBackground ,\r\n    }\"\r\n>\r\n  @if(reactiveFormControlobject()) {\r\n  <input\r\n    matInput\r\n    autocomplete=\"none\"\r\n    type=\"text\"\r\n    [name]=\"field()?.fieldName\"\r\n    [id]=\"field()?.fieldName\"\r\n    [placeholder]=\"field()?.placeHolder\"\r\n    [required]=\"field()?.validators?.isRequired\"\r\n    [pattern]=\"field()?.validators?.pattern\"\r\n    [matDatepicker]=\"picker\"\r\n    (keyup)=\"dateDivisionFormat($event)\"\r\n    [min]=\"field()?.configData?.min\"\r\n    [max]=\"field()?.configData?.max\"\r\n    [disabled]=\"field()?.isDisable\"\r\n    (dateChange)=\"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=\"text\"\r\n    [name]=\"field()?.fieldName\"\r\n    [id]=\"field()?.fieldName\"\r\n    [placeholder]=\"field()?.placeHolder\"\r\n    [required]=\"field()?.validators?.isRequired\"\r\n    [pattern]=\"field()?.validators?.pattern\"\r\n    [matDatepicker]=\"picker\"\r\n    (keyup)=\"dateDivisionFormat($event)\"\r\n    [min]=\"field()?.configData?.min\"\r\n    [max]=\"field()?.configData?.max\"\r\n    [disabled]=\"field()?.isDisable\"\r\n    (dateChange)=\"onInputChange($event)\"\r\n    (blur)=\"onInputBlur($event)\"\r\n    [value]=\"inputValue\"\r\n  />\r\n  }\r\n\r\n  <mat-datepicker-toggle matSuffix [for]=\"picker\">\r\n    <img\r\n      src=\"https://cdn.godigit.com/digitPlusAssets/retail-life-icon/svgicon/date_picker_icon.svg\"\r\n      style=\"width: 16px\"\r\n      matDatepickerToggleIcon\r\n    />\r\n  </mat-datepicker-toggle>\r\n  <mat-datepicker #picker></mat-datepicker>\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=\"field()?.configData?.isInvalid\">\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:0!important}.error-message{color:red}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mat-mdc-notch-piece{border-color:var(--custom-border-color-focus, #ffbb00)!important;border-width:var(--custom-border-width-focus, 1.5px)!important}::ng-deep .mat-mdc-form-field{background-color:var(--custom-bg-color, #ffffff)!important;border-radius:var(--custom-border-radius , 4px)!important}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__leading{border-color:var(--custom-border-color-hover, #ffbb00)!important;border-width:var(--custom-border-width-hover, 1.5px)!important}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__notch{border-color:var(--custom-border-color-hover, #ffbb00)!important;border-width:var(--custom-border-width-hover, 1.5px)!important}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__trailing{border-color:var(--custom-border-color-hover, #ffbb00)!important;border-width:var(--custom-border-width-hover, 1.5px)!important}::ng-deep .mdc-text-field--outlined .mat-mdc-notch-piece{border-color:var(--custom-border-color, #dddddd)!important;border-width:var(--custom-border-width, 1.5px)!important}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-text-field__input{caret-color:var(--custom-caret-color, #ffbb00)!important;font-size:12px!important;font-weight:var(--custom-font-weight, 400)!important;font-family:var(--custom-font-family, \"Mulish\")!important;color:var(--custom-font-color, #444444)!important}::ng-deep .mat-form-field-invalid .mdc-text-field--outlined .mat-mdc-notch-piece{border-color:var(--custom-border-color-error, red)!important;border-width:var(--custom-border-width-error, 1.5px)!important}::ng-deep .mat-mdc-form-field.mat-form-field-disabled{background:var(--custom-bg-color-disabled, #ECECEC)!important}::ng-deep .mdc-text-field--outlined.mdc-text-field--disabled .mdc-text-field__input{color:var(--custom-font-color-disabled, #999999)!important}::ng-deep .mdc-label{color:var(--custom-font-color, #444)!important;font-size:var(--custom-font-size, 16px)!important;font-weight:var(--custom-font-weight, 400)!important;font-family:var(--custom-font-family, \"Mulish\")!important}::placeholder{color:#8f8f8f!important;font-size:12px!important}::ng-deep .mat-mdc-form-field-hint-wrapper{padding:0!important}::ng-deep .mat-mdc-form-field-error-wrapper{padding:0!important}::ng-deep .mat-mdc-form-field-error{color:#e00!important;font-size:12px;font-weight:500;font-family:Mulish!important;letter-spacing:0}::ng-deep .mdc-text-field--outlined{--mdc-outlined-text-field-container-shape: var(--custom-border-radius , 4px) !important}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--invalid .mat-mdc-notch-piece{border-color:var(--custom-border-color-error, red)!important;border-width:var(--custom-border-width-error, 1.5px)!important}::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none!important}*{font-family:mulish!important}\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: MatDatepickerModule }, { kind: "component", type: i5.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i5.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i5.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "directive", type: i5.MatDatepickerToggleIcon, selector: "[matDatepickerToggleIcon]" }, { kind: "ngmodule", type: MomentDateModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
+        ], ngImport: i0, template: "<label\r\n  *ngIf=\"field() && field()?.isVisible && field().isShowLabel\"\r\n  class=\"field-lable\"\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-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    '--custom-bg-color': field()?.controlStyle?.background ,\r\n     '--custom-bg-color-focus': field()?.controlStyle?.focusBackground ,\r\n    }\"\r\n>\r\n  @if(reactiveFormControlobject()) {\r\n  <input\r\n    matInput\r\n    autocomplete=\"none\"\r\n    type=\"text\"\r\n    [name]=\"field()?.fieldName\"\r\n    [id]=\"field()?.fieldName\"\r\n    [placeholder]=\"field()?.placeHolder\"\r\n    [required]=\"field()?.validators?.isRequired\"\r\n    [pattern]=\"field()?.validators?.pattern\"\r\n    [matDatepicker]=\"picker\"\r\n    (keyup)=\"dateDivisionFormat($event)\"\r\n    [min]=\"field()?.configData?.min\"\r\n    [max]=\"field()?.configData?.max\"\r\n    [disabled]=\"field()?.isDisable\"\r\n    (input)=\"onInputChange($event)\"\r\n    (dateChange)=\"onDateChange($event)\"\r\n    (blur)=\"onInputBlurForReactiveForms($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=\"text\"\r\n    [name]=\"field()?.fieldName\"\r\n    [id]=\"field()?.fieldName\"\r\n    [placeholder]=\"field()?.placeHolder\"\r\n    [required]=\"field()?.validators?.isRequired\"\r\n    [pattern]=\"field()?.validators?.pattern\"\r\n    [matDatepicker]=\"picker\"\r\n    (keyup)=\"dateDivisionFormat($event)\"\r\n    [min]=\"field()?.configData?.min\"\r\n    [max]=\"field()?.configData?.max\"\r\n    [disabled]=\"field()?.isDisable\"\r\n    (dateChange)=\"onInputChange($event)\"\r\n    (blur)=\"onInputBlur($event)\"\r\n    [value]=\"inputValue\"\r\n  />\r\n  }\r\n\r\n  <mat-datepicker-toggle matSuffix [for]=\"picker\">\r\n    <img\r\n      src=\"https://cdn.godigit.com/digitPlusAssets/retail-life-icon/svgicon/date_picker_icon.svg\"\r\n      style=\"width: 16px\"\r\n      matDatepickerToggleIcon\r\n    />\r\n  </mat-datepicker-toggle>\r\n  <mat-datepicker #picker></mat-datepicker>\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=\"field()?.configData?.isInvalid\">\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:0!important}.error-message{color:red}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mat-mdc-notch-piece{border-color:var(--custom-border-color-focus, #ffbb00)!important;border-width:var(--custom-border-width-focus, 1.5px)!important}::ng-deep .mat-mdc-form-field{background-color:var(--custom-bg-color, #ffffff)!important;border-radius:var(--custom-border-radius , 4px)!important}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__leading{border-color:var(--custom-border-color-hover, #ffbb00)!important;border-width:var(--custom-border-width-hover, 1.5px)!important}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__notch{border-color:var(--custom-border-color-hover, #ffbb00)!important;border-width:var(--custom-border-width-hover, 1.5px)!important}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__trailing{border-color:var(--custom-border-color-hover, #ffbb00)!important;border-width:var(--custom-border-width-hover, 1.5px)!important}::ng-deep .mdc-text-field--outlined .mat-mdc-notch-piece{border-color:var(--custom-border-color, #dddddd)!important;border-width:var(--custom-border-width, 1.5px)!important}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-text-field__input{caret-color:var(--custom-caret-color, #ffbb00)!important;font-size:12px!important;font-weight:var(--custom-font-weight, 400)!important;font-family:var(--custom-font-family, \"Mulish\")!important;color:var(--custom-font-color, #444444)!important}::ng-deep .mat-form-field-invalid .mdc-text-field--outlined .mat-mdc-notch-piece{border-color:var(--custom-border-color-error, red)!important;border-width:var(--custom-border-width-error, 1.5px)!important}::ng-deep .mat-mdc-form-field.mat-form-field-disabled{background:var(--custom-bg-color-disabled, #ECECEC)!important}::ng-deep .mdc-text-field--outlined.mdc-text-field--disabled .mdc-text-field__input{color:var(--custom-font-color-disabled, #999999)!important}::ng-deep .mdc-label{color:var(--custom-font-color, #444)!important;font-size:var(--custom-font-size, 16px)!important;font-weight:var(--custom-font-weight, 400)!important;font-family:var(--custom-font-family, \"Mulish\")!important}::placeholder{color:#8f8f8f!important;font-size:12px!important}::ng-deep .mat-mdc-form-field-hint-wrapper{padding:0!important}::ng-deep .mat-mdc-form-field-error-wrapper{padding:0!important}::ng-deep .mat-mdc-form-field-error{color:#e00!important;font-size:12px;font-weight:500;font-family:Mulish!important;letter-spacing:0}::ng-deep .mdc-text-field--outlined{--mdc-outlined-text-field-container-shape: var(--custom-border-radius , 4px) !important}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--invalid .mat-mdc-notch-piece{border-color:var(--custom-border-color-error, red)!important;border-width:var(--custom-border-width-error, 1.5px)!important}::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none!important}*{font-family:mulish!important}\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: MatDatepickerModule }, { kind: "component", type: i5.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i5.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i5.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "directive", type: i5.MatDatepickerToggleIcon, selector: "[matDatepickerToggleIcon]" }, { kind: "ngmodule", type: MomentDateModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DobComponent, decorators: [{
             type: Component,
@@ -806,9 +866,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                             deps: []
                         },
                         { provide: MAT_DATE_FORMATS, useValue: MY_DATE_FORMAT }
-                    ], template: "<label\r\n  *ngIf=\"field() && field()?.isVisible && field().isShowLabel\"\r\n  class=\"field-lable\"\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-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    '--custom-bg-color': field()?.controlStyle?.background ,\r\n     '--custom-bg-color-focus': field()?.controlStyle?.focusBackground ,\r\n    }\"\r\n>\r\n  @if(reactiveFormControlobject()) {\r\n  <input\r\n    matInput\r\n    autocomplete=\"none\"\r\n    type=\"text\"\r\n    [name]=\"field()?.fieldName\"\r\n    [id]=\"field()?.fieldName\"\r\n    [placeholder]=\"field()?.placeHolder\"\r\n    [required]=\"field()?.validators?.isRequired\"\r\n    [pattern]=\"field()?.validators?.pattern\"\r\n    [matDatepicker]=\"picker\"\r\n    (keyup)=\"dateDivisionFormat($event)\"\r\n    [min]=\"field()?.configData?.min\"\r\n    [max]=\"field()?.configData?.max\"\r\n    [disabled]=\"field()?.isDisable\"\r\n    (dateChange)=\"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=\"text\"\r\n    [name]=\"field()?.fieldName\"\r\n    [id]=\"field()?.fieldName\"\r\n    [placeholder]=\"field()?.placeHolder\"\r\n    [required]=\"field()?.validators?.isRequired\"\r\n    [pattern]=\"field()?.validators?.pattern\"\r\n    [matDatepicker]=\"picker\"\r\n    (keyup)=\"dateDivisionFormat($event)\"\r\n    [min]=\"field()?.configData?.min\"\r\n    [max]=\"field()?.configData?.max\"\r\n    [disabled]=\"field()?.isDisable\"\r\n    (dateChange)=\"onInputChange($event)\"\r\n    (blur)=\"onInputBlur($event)\"\r\n    [value]=\"inputValue\"\r\n  />\r\n  }\r\n\r\n  <mat-datepicker-toggle matSuffix [for]=\"picker\">\r\n    <img\r\n      src=\"https://cdn.godigit.com/digitPlusAssets/retail-life-icon/svgicon/date_picker_icon.svg\"\r\n      style=\"width: 16px\"\r\n      matDatepickerToggleIcon\r\n    />\r\n  </mat-datepicker-toggle>\r\n  <mat-datepicker #picker></mat-datepicker>\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=\"field()?.configData?.isInvalid\">\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:0!important}.error-message{color:red}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mat-mdc-notch-piece{border-color:var(--custom-border-color-focus, #ffbb00)!important;border-width:var(--custom-border-width-focus, 1.5px)!important}::ng-deep .mat-mdc-form-field{background-color:var(--custom-bg-color, #ffffff)!important;border-radius:var(--custom-border-radius , 4px)!important}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__leading{border-color:var(--custom-border-color-hover, #ffbb00)!important;border-width:var(--custom-border-width-hover, 1.5px)!important}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__notch{border-color:var(--custom-border-color-hover, #ffbb00)!important;border-width:var(--custom-border-width-hover, 1.5px)!important}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__trailing{border-color:var(--custom-border-color-hover, #ffbb00)!important;border-width:var(--custom-border-width-hover, 1.5px)!important}::ng-deep .mdc-text-field--outlined .mat-mdc-notch-piece{border-color:var(--custom-border-color, #dddddd)!important;border-width:var(--custom-border-width, 1.5px)!important}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-text-field__input{caret-color:var(--custom-caret-color, #ffbb00)!important;font-size:12px!important;font-weight:var(--custom-font-weight, 400)!important;font-family:var(--custom-font-family, \"Mulish\")!important;color:var(--custom-font-color, #444444)!important}::ng-deep .mat-form-field-invalid .mdc-text-field--outlined .mat-mdc-notch-piece{border-color:var(--custom-border-color-error, red)!important;border-width:var(--custom-border-width-error, 1.5px)!important}::ng-deep .mat-mdc-form-field.mat-form-field-disabled{background:var(--custom-bg-color-disabled, #ECECEC)!important}::ng-deep .mdc-text-field--outlined.mdc-text-field--disabled .mdc-text-field__input{color:var(--custom-font-color-disabled, #999999)!important}::ng-deep .mdc-label{color:var(--custom-font-color, #444)!important;font-size:var(--custom-font-size, 16px)!important;font-weight:var(--custom-font-weight, 400)!important;font-family:var(--custom-font-family, \"Mulish\")!important}::placeholder{color:#8f8f8f!important;font-size:12px!important}::ng-deep .mat-mdc-form-field-hint-wrapper{padding:0!important}::ng-deep .mat-mdc-form-field-error-wrapper{padding:0!important}::ng-deep .mat-mdc-form-field-error{color:#e00!important;font-size:12px;font-weight:500;font-family:Mulish!important;letter-spacing:0}::ng-deep .mdc-text-field--outlined{--mdc-outlined-text-field-container-shape: var(--custom-border-radius , 4px) !important}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--invalid .mat-mdc-notch-piece{border-color:var(--custom-border-color-error, red)!important;border-width:var(--custom-border-width-error, 1.5px)!important}::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none!important}*{font-family:mulish!important}\n"] }]
+                    ], template: "<label\r\n  *ngIf=\"field() && field()?.isVisible && field().isShowLabel\"\r\n  class=\"field-lable\"\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-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    '--custom-bg-color': field()?.controlStyle?.background ,\r\n     '--custom-bg-color-focus': field()?.controlStyle?.focusBackground ,\r\n    }\"\r\n>\r\n  @if(reactiveFormControlobject()) {\r\n  <input\r\n    matInput\r\n    autocomplete=\"none\"\r\n    type=\"text\"\r\n    [name]=\"field()?.fieldName\"\r\n    [id]=\"field()?.fieldName\"\r\n    [placeholder]=\"field()?.placeHolder\"\r\n    [required]=\"field()?.validators?.isRequired\"\r\n    [pattern]=\"field()?.validators?.pattern\"\r\n    [matDatepicker]=\"picker\"\r\n    (keyup)=\"dateDivisionFormat($event)\"\r\n    [min]=\"field()?.configData?.min\"\r\n    [max]=\"field()?.configData?.max\"\r\n    [disabled]=\"field()?.isDisable\"\r\n    (input)=\"onInputChange($event)\"\r\n    (dateChange)=\"onDateChange($event)\"\r\n    (blur)=\"onInputBlurForReactiveForms($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=\"text\"\r\n    [name]=\"field()?.fieldName\"\r\n    [id]=\"field()?.fieldName\"\r\n    [placeholder]=\"field()?.placeHolder\"\r\n    [required]=\"field()?.validators?.isRequired\"\r\n    [pattern]=\"field()?.validators?.pattern\"\r\n    [matDatepicker]=\"picker\"\r\n    (keyup)=\"dateDivisionFormat($event)\"\r\n    [min]=\"field()?.configData?.min\"\r\n    [max]=\"field()?.configData?.max\"\r\n    [disabled]=\"field()?.isDisable\"\r\n    (dateChange)=\"onInputChange($event)\"\r\n    (blur)=\"onInputBlur($event)\"\r\n    [value]=\"inputValue\"\r\n  />\r\n  }\r\n\r\n  <mat-datepicker-toggle matSuffix [for]=\"picker\">\r\n    <img\r\n      src=\"https://cdn.godigit.com/digitPlusAssets/retail-life-icon/svgicon/date_picker_icon.svg\"\r\n      style=\"width: 16px\"\r\n      matDatepickerToggleIcon\r\n    />\r\n  </mat-datepicker-toggle>\r\n  <mat-datepicker #picker></mat-datepicker>\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=\"field()?.configData?.isInvalid\">\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:0!important}.error-message{color:red}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mat-mdc-notch-piece{border-color:var(--custom-border-color-focus, #ffbb00)!important;border-width:var(--custom-border-width-focus, 1.5px)!important}::ng-deep .mat-mdc-form-field{background-color:var(--custom-bg-color, #ffffff)!important;border-radius:var(--custom-border-radius , 4px)!important}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__leading{border-color:var(--custom-border-color-hover, #ffbb00)!important;border-width:var(--custom-border-width-hover, 1.5px)!important}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__notch{border-color:var(--custom-border-color-hover, #ffbb00)!important;border-width:var(--custom-border-width-hover, 1.5px)!important}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__trailing{border-color:var(--custom-border-color-hover, #ffbb00)!important;border-width:var(--custom-border-width-hover, 1.5px)!important}::ng-deep .mdc-text-field--outlined .mat-mdc-notch-piece{border-color:var(--custom-border-color, #dddddd)!important;border-width:var(--custom-border-width, 1.5px)!important}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-text-field__input{caret-color:var(--custom-caret-color, #ffbb00)!important;font-size:12px!important;font-weight:var(--custom-font-weight, 400)!important;font-family:var(--custom-font-family, \"Mulish\")!important;color:var(--custom-font-color, #444444)!important}::ng-deep .mat-form-field-invalid .mdc-text-field--outlined .mat-mdc-notch-piece{border-color:var(--custom-border-color-error, red)!important;border-width:var(--custom-border-width-error, 1.5px)!important}::ng-deep .mat-mdc-form-field.mat-form-field-disabled{background:var(--custom-bg-color-disabled, #ECECEC)!important}::ng-deep .mdc-text-field--outlined.mdc-text-field--disabled .mdc-text-field__input{color:var(--custom-font-color-disabled, #999999)!important}::ng-deep .mdc-label{color:var(--custom-font-color, #444)!important;font-size:var(--custom-font-size, 16px)!important;font-weight:var(--custom-font-weight, 400)!important;font-family:var(--custom-font-family, \"Mulish\")!important}::placeholder{color:#8f8f8f!important;font-size:12px!important}::ng-deep .mat-mdc-form-field-hint-wrapper{padding:0!important}::ng-deep .mat-mdc-form-field-error-wrapper{padding:0!important}::ng-deep .mat-mdc-form-field-error{color:#e00!important;font-size:12px;font-weight:500;font-family:Mulish!important;letter-spacing:0}::ng-deep .mdc-text-field--outlined{--mdc-outlined-text-field-container-shape: var(--custom-border-radius , 4px) !important}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--invalid .mat-mdc-notch-piece{border-color:var(--custom-border-color-error, red)!important;border-width:var(--custom-border-width-error, 1.5px)!important}::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none!important}*{font-family:mulish!important}\n"] }]
         }], ctorParameters: () => [{ type: MasterControlService }], propDecorators: { blur: [{
                 type: Output
+            }], valueChange: [{
+                type: Output
+            }], dateSelected: [{
+                type: Output
+            }], invalidDate: [{
+                type: Output
             }] } });
 
 class MobNumberComponent {
@@ -2815,7 +2881,7 @@ class ToggleButtonComponent {
                 useExisting: ToggleButtonComponent,
                 multi: true,
             },
-        ], ngImport: i0, template: "<div style=\"position: relative\" [ngClass]=\"field()?.cssClass\">\r\n  @if(reactiveFormControlobject()) {\r\n     <mat-button-toggle-group\r\n  [ngStyle]=\"{\r\n      '--toggle-button-width': field()?.controlStyle?.width ,\r\n    }\"\r\n    name=\"fontStyle\"\r\n    class=\"custom-mat-toggle\"\r\n    aria-label=\"Font Style\"\r\n    *ngIf=\"field() && field()?.isVisible && field()?.configData?.options\"\r\n    [value]=\"selectedValue\"\r\n    (change)=\"onSelectionChange($event.value)\"\r\n    [formControl]=\"reactiveFormControlobject()\"\r\n  >\r\n    @for (data of field()?.configData?.options; track $index) {\r\n    <mat-button-toggle [value]=\"data.value\"\r\n      >{{ data.label }}\r\n      <img\r\n        *ngIf=\"data.imgUrl\"\r\n        [src]=\"data.imgUrl\"\r\n        alt=\"\"\r\n        class=\"toggle-img mx-1\"\r\n      />\r\n    </mat-button-toggle>\r\n    <div class=\"top-green-card\" *ngIf=\"data.toggleTopText\">\r\n      <span class=\"second-box\">\r\n        <img\r\n          class=\"green-card-img\"\r\n          *ngIf=\"data.topImage\"\r\n          [src]=\"data.topImage\"\r\n          alt=\"\"\r\n        />\r\n        <span>{{ data.toggleTopText }}</span>\r\n      </span>\r\n    </div>\r\n    }\r\n  </mat-button-toggle-group>\r\n  }@else {\r\n     <mat-button-toggle-group\r\n  [ngStyle]=\"{\r\n      '--toggle-button-width': field()?.controlStyle?.width ,\r\n    }\"\r\n    name=\"fontStyle\"\r\n    class=\"custom-mat-toggle\"\r\n    aria-label=\"Font Style\"\r\n    *ngIf=\"field() && field()?.isVisible && field()?.configData?.options\"\r\n    [(ngModel)]=\"selectedValue\"\r\n    (change)=\"onSelectionChange($event.value)\"\r\n  >\r\n    @for (data of field()?.configData?.options; track $index) {\r\n    <mat-button-toggle [value]=\"data.value\"\r\n      >{{ data.label }}\r\n      <img\r\n        *ngIf=\"data.imgUrl\"\r\n        [src]=\"data.imgUrl\"\r\n        alt=\"\"\r\n        class=\"toggle-img mx-1\"\r\n      />\r\n    </mat-button-toggle>\r\n    <div class=\"top-green-card\" *ngIf=\"data.toggleTopText\">\r\n      <span class=\"second-box\">\r\n        <img\r\n          class=\"green-card-img\"\r\n          *ngIf=\"data.topImage\"\r\n          [src]=\"data.topImage\"\r\n          alt=\"\"\r\n        />\r\n        <span>{{ data.toggleTopText }}</span>\r\n      </span>\r\n    </div>\r\n    }\r\n  </mat-button-toggle-group>\r\n  }\r\n</div>\r\n", styles: [":host ::ng-deep .mat-button-toggle-group-appearance-standard .mat-button-toggle-appearance-standard+.mat-button-toggle-appearance-standard{border:none}:host ::ng-deep .mat-button-toggle-standalone,.mat-button-toggle-group{border-radius:50px}:host ::ng-deep .mat-button-toggle-appearance-standard .mat-button-toggle-label-content{height:32px!important;transform:translateY(-9px);font-size:12px;font-weight:400;color:#444;letter-spacing:1px}:host ::ng-deep .mat-button-toggle-checked .mat-button-toggle-button{background:#fff!important;border-radius:50px!important;box-shadow:0 0 15px #00000014!important;height:32px;padding:0 24px;border:1px solid #ffbb00}:host ::ng-deep .mat-button-toggle-button{padding:0 24px}:host ::ng-deep .mat-button-toggle-checked .mat-button-toggle-label-content{font-weight:600!important;letter-spacing:1px}:host ::ng-deep .mat-button-toggle .mat-pseudo-checkbox{display:none}:host ::ng-deep .mat-button-toggle-standalone.mat-button-toggle-appearance-standard,.mat-button-toggle-group-appearance-standard{border:1px solid #ddd!important;background:#f5f5f5!important;height:33px}:host ::ng-deep .mat-button-toggle-group-appearance-standard .mat-button-toggle-appearance-standard+.mat-button-toggle-appearance-standard{border:none!important}:host ::ng-deep .mat-button-toggle-appearance-standard.mat-button-toggle-checked{background:#f5f5f5!important;border-radius:50px}.toggle-img{width:12px}:host ::ng-deep .mat-button-toggle-standalone,.mat-button-toggle-group{overflow:unset!important}.second-box{position:relative;top:-4px}.top-green-card{font-size:10px;font-weight:800;color:#fff;background:#169f7d;border-top-left-radius:999px;border-top-right-radius:999px;position:absolute;right:3em;padding:2px 16px 2px 12px;transform:translate(5px,-19px);z-index:99999;height:18px}.green-card-img{width:14.86px;margin-bottom:6px}:host ::ng-deep .mat-button-toggle-button{width:var(--toggle-button-width , 100%)!important}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonToggleModule }, { kind: "directive", type: i1$3.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i1$3.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
+        ], ngImport: i0, template: "<div style=\"position: relative\" [ngClass]=\"field()?.cssClass\">\r\n  @if(reactiveFormControlobject()) {\r\n     <mat-button-toggle-group\r\n  [ngStyle]=\"{\r\n      '--toggle-button-width': field()?.controlStyle?.width ,\r\n    }\"\r\n    name=\"fontStyle\"\r\n    class=\"custom-mat-toggle\"\r\n    aria-label=\"Font Style\"\r\n    *ngIf=\"field() && field()?.isVisible && field()?.configData?.options\"\r\n    [value]=\"selectedValue\"\r\n    (change)=\"onSelectionChange($event.value)\"\r\n    [formControl]=\"reactiveFormControlobject()\"\r\n  >\r\n    @for (data of field()?.configData?.options; track $index) {\r\n    <mat-button-toggle [value]=\"data.value\"\r\n      >{{ data.label }}\r\n      <img\r\n        *ngIf=\"data.imgUrl\"\r\n        [src]=\"data.imgUrl\"\r\n        alt=\"\"\r\n        class=\"toggle-img mx-1\"\r\n      />\r\n    </mat-button-toggle>\r\n    <div class=\"top-green-card\" *ngIf=\"data.toggleTopText\">\r\n      <span class=\"second-box\">\r\n        <img\r\n          class=\"green-card-img\"\r\n          *ngIf=\"data.topImage\"\r\n          [src]=\"data.topImage\"\r\n          alt=\"\"\r\n        />\r\n        <span>{{ data.toggleTopText }}</span>\r\n      </span>\r\n    </div>\r\n    }\r\n  </mat-button-toggle-group>\r\n  }@else {\r\n     <mat-button-toggle-group\r\n  [ngStyle]=\"{\r\n      '--toggle-button-width': field()?.controlStyle?.width ,\r\n    }\"\r\n    name=\"fontStyle\"\r\n    class=\"custom-mat-toggle\"\r\n    aria-label=\"Font Style\"\r\n    *ngIf=\"field() && field()?.isVisible && field()?.configData?.options\"\r\n    [(ngModel)]=\"selectedValue\"\r\n    (change)=\"onSelectionChange($event.value)\"\r\n  >\r\n    @for (data of field()?.configData?.options; track $index) {\r\n    <mat-button-toggle [value]=\"data.value\" [title]=\"data?.tooltipText ? data?.tooltipText : data?.label\"\r\n      >{{ data.label }}\r\n      <img\r\n        *ngIf=\"data.imgUrl\"\r\n        [src]=\"data.imgUrl\"\r\n        alt=\"\"\r\n        class=\"toggle-img mx-1\"\r\n      />\r\n    </mat-button-toggle>\r\n    <div class=\"top-green-card\" *ngIf=\"data.toggleTopText\">\r\n      <span class=\"second-box\">\r\n        <img\r\n          class=\"green-card-img\"\r\n          *ngIf=\"data.topImage\"\r\n          [src]=\"data.topImage\"\r\n          alt=\"\"\r\n        />\r\n        <span>{{ data.toggleTopText }}</span>\r\n      </span>\r\n    </div>\r\n    }\r\n  </mat-button-toggle-group>\r\n  }\r\n</div>\r\n", styles: [":host ::ng-deep .mat-button-toggle-group-appearance-standard .mat-button-toggle-appearance-standard+.mat-button-toggle-appearance-standard{border:none}:host ::ng-deep .mat-button-toggle-standalone,.mat-button-toggle-group{border-radius:50px}:host ::ng-deep .mat-button-toggle-appearance-standard .mat-button-toggle-label-content{height:32px!important;transform:translateY(-9px);font-size:12px;font-weight:400;color:#444;letter-spacing:1px}:host ::ng-deep .mat-button-toggle-checked .mat-button-toggle-button{background:#fff!important;border-radius:50px!important;box-shadow:0 0 15px #00000014!important;height:32px;padding:0 24px;border:1px solid #ffbb00}:host ::ng-deep .mat-button-toggle-button{padding:0 24px}:host ::ng-deep .mat-button-toggle-checked .mat-button-toggle-label-content{font-weight:600!important;letter-spacing:1px}:host ::ng-deep .mat-button-toggle .mat-pseudo-checkbox{display:none}:host ::ng-deep .mat-button-toggle-standalone.mat-button-toggle-appearance-standard,.mat-button-toggle-group-appearance-standard{border:1px solid #ddd!important;background:#f5f5f5!important;height:33px}:host ::ng-deep .mat-button-toggle-group-appearance-standard .mat-button-toggle-appearance-standard+.mat-button-toggle-appearance-standard{border:none!important}:host ::ng-deep .mat-button-toggle-appearance-standard.mat-button-toggle-checked{background:#f5f5f5!important;border-radius:50px}.toggle-img{width:12px}:host ::ng-deep .mat-button-toggle-standalone,.mat-button-toggle-group{overflow:unset!important}.second-box{position:relative;top:-4px}.top-green-card{font-size:10px;font-weight:800;color:#fff;background:#169f7d;border-top-left-radius:999px;border-top-right-radius:999px;position:absolute;right:3em;padding:2px 16px 2px 12px;transform:translate(5px,-19px);z-index:99999;height:18px}.green-card-img{width:14.86px;margin-bottom:6px}:host ::ng-deep .mat-button-toggle-button{width:var(--toggle-button-width , 100%)!important}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonToggleModule }, { kind: "directive", type: i1$3.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i1$3.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ToggleButtonComponent, decorators: [{
             type: Component,
@@ -2825,7 +2891,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                             useExisting: ToggleButtonComponent,
                             multi: true,
                         },
-                    ], template: "<div style=\"position: relative\" [ngClass]=\"field()?.cssClass\">\r\n  @if(reactiveFormControlobject()) {\r\n     <mat-button-toggle-group\r\n  [ngStyle]=\"{\r\n      '--toggle-button-width': field()?.controlStyle?.width ,\r\n    }\"\r\n    name=\"fontStyle\"\r\n    class=\"custom-mat-toggle\"\r\n    aria-label=\"Font Style\"\r\n    *ngIf=\"field() && field()?.isVisible && field()?.configData?.options\"\r\n    [value]=\"selectedValue\"\r\n    (change)=\"onSelectionChange($event.value)\"\r\n    [formControl]=\"reactiveFormControlobject()\"\r\n  >\r\n    @for (data of field()?.configData?.options; track $index) {\r\n    <mat-button-toggle [value]=\"data.value\"\r\n      >{{ data.label }}\r\n      <img\r\n        *ngIf=\"data.imgUrl\"\r\n        [src]=\"data.imgUrl\"\r\n        alt=\"\"\r\n        class=\"toggle-img mx-1\"\r\n      />\r\n    </mat-button-toggle>\r\n    <div class=\"top-green-card\" *ngIf=\"data.toggleTopText\">\r\n      <span class=\"second-box\">\r\n        <img\r\n          class=\"green-card-img\"\r\n          *ngIf=\"data.topImage\"\r\n          [src]=\"data.topImage\"\r\n          alt=\"\"\r\n        />\r\n        <span>{{ data.toggleTopText }}</span>\r\n      </span>\r\n    </div>\r\n    }\r\n  </mat-button-toggle-group>\r\n  }@else {\r\n     <mat-button-toggle-group\r\n  [ngStyle]=\"{\r\n      '--toggle-button-width': field()?.controlStyle?.width ,\r\n    }\"\r\n    name=\"fontStyle\"\r\n    class=\"custom-mat-toggle\"\r\n    aria-label=\"Font Style\"\r\n    *ngIf=\"field() && field()?.isVisible && field()?.configData?.options\"\r\n    [(ngModel)]=\"selectedValue\"\r\n    (change)=\"onSelectionChange($event.value)\"\r\n  >\r\n    @for (data of field()?.configData?.options; track $index) {\r\n    <mat-button-toggle [value]=\"data.value\"\r\n      >{{ data.label }}\r\n      <img\r\n        *ngIf=\"data.imgUrl\"\r\n        [src]=\"data.imgUrl\"\r\n        alt=\"\"\r\n        class=\"toggle-img mx-1\"\r\n      />\r\n    </mat-button-toggle>\r\n    <div class=\"top-green-card\" *ngIf=\"data.toggleTopText\">\r\n      <span class=\"second-box\">\r\n        <img\r\n          class=\"green-card-img\"\r\n          *ngIf=\"data.topImage\"\r\n          [src]=\"data.topImage\"\r\n          alt=\"\"\r\n        />\r\n        <span>{{ data.toggleTopText }}</span>\r\n      </span>\r\n    </div>\r\n    }\r\n  </mat-button-toggle-group>\r\n  }\r\n</div>\r\n", styles: [":host ::ng-deep .mat-button-toggle-group-appearance-standard .mat-button-toggle-appearance-standard+.mat-button-toggle-appearance-standard{border:none}:host ::ng-deep .mat-button-toggle-standalone,.mat-button-toggle-group{border-radius:50px}:host ::ng-deep .mat-button-toggle-appearance-standard .mat-button-toggle-label-content{height:32px!important;transform:translateY(-9px);font-size:12px;font-weight:400;color:#444;letter-spacing:1px}:host ::ng-deep .mat-button-toggle-checked .mat-button-toggle-button{background:#fff!important;border-radius:50px!important;box-shadow:0 0 15px #00000014!important;height:32px;padding:0 24px;border:1px solid #ffbb00}:host ::ng-deep .mat-button-toggle-button{padding:0 24px}:host ::ng-deep .mat-button-toggle-checked .mat-button-toggle-label-content{font-weight:600!important;letter-spacing:1px}:host ::ng-deep .mat-button-toggle .mat-pseudo-checkbox{display:none}:host ::ng-deep .mat-button-toggle-standalone.mat-button-toggle-appearance-standard,.mat-button-toggle-group-appearance-standard{border:1px solid #ddd!important;background:#f5f5f5!important;height:33px}:host ::ng-deep .mat-button-toggle-group-appearance-standard .mat-button-toggle-appearance-standard+.mat-button-toggle-appearance-standard{border:none!important}:host ::ng-deep .mat-button-toggle-appearance-standard.mat-button-toggle-checked{background:#f5f5f5!important;border-radius:50px}.toggle-img{width:12px}:host ::ng-deep .mat-button-toggle-standalone,.mat-button-toggle-group{overflow:unset!important}.second-box{position:relative;top:-4px}.top-green-card{font-size:10px;font-weight:800;color:#fff;background:#169f7d;border-top-left-radius:999px;border-top-right-radius:999px;position:absolute;right:3em;padding:2px 16px 2px 12px;transform:translate(5px,-19px);z-index:99999;height:18px}.green-card-img{width:14.86px;margin-bottom:6px}:host ::ng-deep .mat-button-toggle-button{width:var(--toggle-button-width , 100%)!important}\n"] }]
+                    ], template: "<div style=\"position: relative\" [ngClass]=\"field()?.cssClass\">\r\n  @if(reactiveFormControlobject()) {\r\n     <mat-button-toggle-group\r\n  [ngStyle]=\"{\r\n      '--toggle-button-width': field()?.controlStyle?.width ,\r\n    }\"\r\n    name=\"fontStyle\"\r\n    class=\"custom-mat-toggle\"\r\n    aria-label=\"Font Style\"\r\n    *ngIf=\"field() && field()?.isVisible && field()?.configData?.options\"\r\n    [value]=\"selectedValue\"\r\n    (change)=\"onSelectionChange($event.value)\"\r\n    [formControl]=\"reactiveFormControlobject()\"\r\n  >\r\n    @for (data of field()?.configData?.options; track $index) {\r\n    <mat-button-toggle [value]=\"data.value\"\r\n      >{{ data.label }}\r\n      <img\r\n        *ngIf=\"data.imgUrl\"\r\n        [src]=\"data.imgUrl\"\r\n        alt=\"\"\r\n        class=\"toggle-img mx-1\"\r\n      />\r\n    </mat-button-toggle>\r\n    <div class=\"top-green-card\" *ngIf=\"data.toggleTopText\">\r\n      <span class=\"second-box\">\r\n        <img\r\n          class=\"green-card-img\"\r\n          *ngIf=\"data.topImage\"\r\n          [src]=\"data.topImage\"\r\n          alt=\"\"\r\n        />\r\n        <span>{{ data.toggleTopText }}</span>\r\n      </span>\r\n    </div>\r\n    }\r\n  </mat-button-toggle-group>\r\n  }@else {\r\n     <mat-button-toggle-group\r\n  [ngStyle]=\"{\r\n      '--toggle-button-width': field()?.controlStyle?.width ,\r\n    }\"\r\n    name=\"fontStyle\"\r\n    class=\"custom-mat-toggle\"\r\n    aria-label=\"Font Style\"\r\n    *ngIf=\"field() && field()?.isVisible && field()?.configData?.options\"\r\n    [(ngModel)]=\"selectedValue\"\r\n    (change)=\"onSelectionChange($event.value)\"\r\n  >\r\n    @for (data of field()?.configData?.options; track $index) {\r\n    <mat-button-toggle [value]=\"data.value\" [title]=\"data?.tooltipText ? data?.tooltipText : data?.label\"\r\n      >{{ data.label }}\r\n      <img\r\n        *ngIf=\"data.imgUrl\"\r\n        [src]=\"data.imgUrl\"\r\n        alt=\"\"\r\n        class=\"toggle-img mx-1\"\r\n      />\r\n    </mat-button-toggle>\r\n    <div class=\"top-green-card\" *ngIf=\"data.toggleTopText\">\r\n      <span class=\"second-box\">\r\n        <img\r\n          class=\"green-card-img\"\r\n          *ngIf=\"data.topImage\"\r\n          [src]=\"data.topImage\"\r\n          alt=\"\"\r\n        />\r\n        <span>{{ data.toggleTopText }}</span>\r\n      </span>\r\n    </div>\r\n    }\r\n  </mat-button-toggle-group>\r\n  }\r\n</div>\r\n", styles: [":host ::ng-deep .mat-button-toggle-group-appearance-standard .mat-button-toggle-appearance-standard+.mat-button-toggle-appearance-standard{border:none}:host ::ng-deep .mat-button-toggle-standalone,.mat-button-toggle-group{border-radius:50px}:host ::ng-deep .mat-button-toggle-appearance-standard .mat-button-toggle-label-content{height:32px!important;transform:translateY(-9px);font-size:12px;font-weight:400;color:#444;letter-spacing:1px}:host ::ng-deep .mat-button-toggle-checked .mat-button-toggle-button{background:#fff!important;border-radius:50px!important;box-shadow:0 0 15px #00000014!important;height:32px;padding:0 24px;border:1px solid #ffbb00}:host ::ng-deep .mat-button-toggle-button{padding:0 24px}:host ::ng-deep .mat-button-toggle-checked .mat-button-toggle-label-content{font-weight:600!important;letter-spacing:1px}:host ::ng-deep .mat-button-toggle .mat-pseudo-checkbox{display:none}:host ::ng-deep .mat-button-toggle-standalone.mat-button-toggle-appearance-standard,.mat-button-toggle-group-appearance-standard{border:1px solid #ddd!important;background:#f5f5f5!important;height:33px}:host ::ng-deep .mat-button-toggle-group-appearance-standard .mat-button-toggle-appearance-standard+.mat-button-toggle-appearance-standard{border:none!important}:host ::ng-deep .mat-button-toggle-appearance-standard.mat-button-toggle-checked{background:#f5f5f5!important;border-radius:50px}.toggle-img{width:12px}:host ::ng-deep .mat-button-toggle-standalone,.mat-button-toggle-group{overflow:unset!important}.second-box{position:relative;top:-4px}.top-green-card{font-size:10px;font-weight:800;color:#fff;background:#169f7d;border-top-left-radius:999px;border-top-right-radius:999px;position:absolute;right:3em;padding:2px 16px 2px 12px;transform:translate(5px,-19px);z-index:99999;height:18px}.green-card-img{width:14.86px;margin-bottom:6px}:host ::ng-deep .mat-button-toggle-button{width:var(--toggle-button-width , 100%)!important}\n"] }]
         }], propDecorators: { selectionChanged: [{
                 type: Output
             }], change: [{
@@ -2899,11 +2965,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
 class DiscountV2Component {
     field = input.required();
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DiscountV2Component, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: DiscountV2Component, isStandalone: true, selector: "lib-discount-v2", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"px-3 py-2 discount-card-v2\" *ngIf=\"field() && field()?.isVisible\" [ngStyle]=\"\r\n{\r\n    '--discount-design-border-width': field()?.controlStyle?.borderWidth,\r\n    '--discount-design-border-color': field()?.controlStyle?.borderColor ,\r\n    '--discount-design-border-style': field()?.controlStyle?.borderStyle ,\r\n    '--discount-design-width': field()?.controlStyle?.width ,\r\n    '--discount-design-border-radius': field()?.controlStyle?.borderRadius ,\r\n    '--discount-design-bg': field()?.controlStyle?.background ,\r\n}\">\r\n<div *ngIf=\"field()?.imageUrl\">\r\n    <img [src]='field().imageUrl' alt=\"\">\r\n</div>\r\n    <div class=\"mb-2 discount-heading\" [ngStyle]=\"\r\n{\r\n    '--discount-heading-font-weight': field()?.controlStyle?.fontWeight ,\r\n    '--discount-heading-font-size': field()?.controlStyle?.fontSize ,\r\n    '--discount-heading-font-color': field()?.controlStyle?.color\r\n}\">{{field()?.label}}</div>\r\n    <div>\r\n        <!-- <button class=\"px-2 mt-1 discount-btn-remove\"><div>Remove</div> <mat-icon class=\"pt-1 remove-btn-cross\">close</mat-icon></button> -->\r\n        <button class=\"px-2 mt-1 discount-btn-apply\"><div>Applied</div><img class=\"check-circle\" src=\"https://cdn.godigit.com/retail-life/check-circle-ou.svg\" alt=\"\"></button>\r\n    </div>\r\n</div>\r\n\r\n", styles: [".discount-card-v2{border-width:var(--discount-design-border-width , 1px);border-color:var(--discount-design-border-color , #0BB68B);border-style:var(--discount-design-border-style , solid);width:var(--discount-design-width , 100%);border-radius:var(--discount-design-border-radius , .5rem);box-shadow:0 2px 15px 2px #e3e6ec99;background:var(--discount-design-bg , #fff);height:128px!important}.discount-heading{font-weight:var(--discount-heading-font-weight , 700);font-size:var(--discount-heading-font-size , 12px);color:var(--discount-heading-font-color , #444)}.discount-btn-remove{border-radius:32px;border:1px solid #EE0000;background-color:#fff;font-size:12px;font-weight:700;color:#e00;display:flex;align-items:center;background:#fff}.discount-btn-apply{border-radius:25px;border:1px solid #DEF1E7;background-color:#def1e7;font-size:12px;font-weight:600;color:#169f7d;display:flex;align-items:center}.remove-btn-cross{font-size:12.5px!important;height:auto}.check-circle{width:12px}*{font-family:Mulish!important}.material-icons{font-family:Material Icons!important}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { 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"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: DiscountV2Component, isStandalone: true, selector: "lib-discount-v2", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"px-3 py-2 discount-card-v2\" *ngIf=\"field() && field()?.isVisible\" [ngStyle]=\"\r\n{\r\n    '--discount-design-border-width': field()?.controlStyle?.borderWidth,\r\n    '--discount-design-border-color': field()?.controlStyle?.borderColor ,\r\n    '--discount-design-border-style': field()?.controlStyle?.borderStyle ,\r\n    '--discount-design-width': field()?.controlStyle?.width ,\r\n    '--discount-design-border-radius': field()?.controlStyle?.borderRadius ,\r\n    '--discount-design-bg': field()?.controlStyle?.background ,\r\n}\">\r\n<div *ngIf=\"field()?.imageUrl\">\r\n    <img [src]='field().imageUrl' alt=\"\">\r\n</div>\r\n    <div class=\"mb-2 discount-heading\" [ngStyle]=\"\r\n{\r\n    '--discount-heading-font-weight': field()?.controlStyle?.fontWeight ,\r\n    '--discount-heading-font-size': field()?.controlStyle?.fontSize ,\r\n    '--discount-heading-font-color': field()?.controlStyle?.color\r\n}\">{{field()?.label}}</div>\r\n    <div class=\"sticky-bottom-btn\">\r\n        <!-- <button class=\"px-2 mt-1 discount-btn-remove\"><div>Remove</div> <mat-icon class=\"pt-1 remove-btn-cross\">close</mat-icon></button> -->\r\n        <button class=\"px-2 mt-1 discount-btn-apply\"><div>Applied</div><img class=\"check-circle\" src=\"https://cdn.godigit.com/retail-life/check-circle-ou.svg\" alt=\"\"></button>\r\n    </div>\r\n</div>\r\n\r\n", styles: [".discount-card-v2{border-width:var(--discount-design-border-width , 1px);border-color:var(--discount-design-border-color , #0BB68B);border-style:var(--discount-design-border-style , solid);width:var(--discount-design-width , 100%);border-radius:var(--discount-design-border-radius , .5rem);box-shadow:0 2px 15px 2px #e3e6ec99;background:var(--discount-design-bg , #fff);height:128px!important;display:flex;flex-direction:column;position:relative}.sticky-bottom-btn{margin-top:auto}.discount-heading{font-weight:var(--discount-heading-font-weight , 700);font-size:var(--discount-heading-font-size , 12px);color:var(--discount-heading-font-color , #444)}.discount-btn-remove{border-radius:32px;border:1px solid #EE0000;background-color:#fff;font-size:12px;font-weight:700;color:#e00;display:flex;align-items:center;background:#fff}.discount-btn-apply{border-radius:25px;border:1px solid #DEF1E7;background-color:#def1e7;font-size:12px;font-weight:600;color:#169f7d;display:flex;align-items:center}.remove-btn-cross{font-size:12.5px!important;height:auto}.check-circle{width:12px}*{font-family:Mulish!important}.material-icons{font-family:Material Icons!important}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { 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: DiscountV2Component, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-discount-v2', standalone: true, imports: [MatIconModule, CommonModule], template: "<div class=\"px-3 py-2 discount-card-v2\" *ngIf=\"field() && field()?.isVisible\" [ngStyle]=\"\r\n{\r\n    '--discount-design-border-width': field()?.controlStyle?.borderWidth,\r\n    '--discount-design-border-color': field()?.controlStyle?.borderColor ,\r\n    '--discount-design-border-style': field()?.controlStyle?.borderStyle ,\r\n    '--discount-design-width': field()?.controlStyle?.width ,\r\n    '--discount-design-border-radius': field()?.controlStyle?.borderRadius ,\r\n    '--discount-design-bg': field()?.controlStyle?.background ,\r\n}\">\r\n<div *ngIf=\"field()?.imageUrl\">\r\n    <img [src]='field().imageUrl' alt=\"\">\r\n</div>\r\n    <div class=\"mb-2 discount-heading\" [ngStyle]=\"\r\n{\r\n    '--discount-heading-font-weight': field()?.controlStyle?.fontWeight ,\r\n    '--discount-heading-font-size': field()?.controlStyle?.fontSize ,\r\n    '--discount-heading-font-color': field()?.controlStyle?.color\r\n}\">{{field()?.label}}</div>\r\n    <div>\r\n        <!-- <button class=\"px-2 mt-1 discount-btn-remove\"><div>Remove</div> <mat-icon class=\"pt-1 remove-btn-cross\">close</mat-icon></button> -->\r\n        <button class=\"px-2 mt-1 discount-btn-apply\"><div>Applied</div><img class=\"check-circle\" src=\"https://cdn.godigit.com/retail-life/check-circle-ou.svg\" alt=\"\"></button>\r\n    </div>\r\n</div>\r\n\r\n", styles: [".discount-card-v2{border-width:var(--discount-design-border-width , 1px);border-color:var(--discount-design-border-color , #0BB68B);border-style:var(--discount-design-border-style , solid);width:var(--discount-design-width , 100%);border-radius:var(--discount-design-border-radius , .5rem);box-shadow:0 2px 15px 2px #e3e6ec99;background:var(--discount-design-bg , #fff);height:128px!important}.discount-heading{font-weight:var(--discount-heading-font-weight , 700);font-size:var(--discount-heading-font-size , 12px);color:var(--discount-heading-font-color , #444)}.discount-btn-remove{border-radius:32px;border:1px solid #EE0000;background-color:#fff;font-size:12px;font-weight:700;color:#e00;display:flex;align-items:center;background:#fff}.discount-btn-apply{border-radius:25px;border:1px solid #DEF1E7;background-color:#def1e7;font-size:12px;font-weight:600;color:#169f7d;display:flex;align-items:center}.remove-btn-cross{font-size:12.5px!important;height:auto}.check-circle{width:12px}*{font-family:Mulish!important}.material-icons{font-family:Material Icons!important}\n"] }]
+            args: [{ selector: 'lib-discount-v2', standalone: true, imports: [MatIconModule, CommonModule], template: "<div class=\"px-3 py-2 discount-card-v2\" *ngIf=\"field() && field()?.isVisible\" [ngStyle]=\"\r\n{\r\n    '--discount-design-border-width': field()?.controlStyle?.borderWidth,\r\n    '--discount-design-border-color': field()?.controlStyle?.borderColor ,\r\n    '--discount-design-border-style': field()?.controlStyle?.borderStyle ,\r\n    '--discount-design-width': field()?.controlStyle?.width ,\r\n    '--discount-design-border-radius': field()?.controlStyle?.borderRadius ,\r\n    '--discount-design-bg': field()?.controlStyle?.background ,\r\n}\">\r\n<div *ngIf=\"field()?.imageUrl\">\r\n    <img [src]='field().imageUrl' alt=\"\">\r\n</div>\r\n    <div class=\"mb-2 discount-heading\" [ngStyle]=\"\r\n{\r\n    '--discount-heading-font-weight': field()?.controlStyle?.fontWeight ,\r\n    '--discount-heading-font-size': field()?.controlStyle?.fontSize ,\r\n    '--discount-heading-font-color': field()?.controlStyle?.color\r\n}\">{{field()?.label}}</div>\r\n    <div class=\"sticky-bottom-btn\">\r\n        <!-- <button class=\"px-2 mt-1 discount-btn-remove\"><div>Remove</div> <mat-icon class=\"pt-1 remove-btn-cross\">close</mat-icon></button> -->\r\n        <button class=\"px-2 mt-1 discount-btn-apply\"><div>Applied</div><img class=\"check-circle\" src=\"https://cdn.godigit.com/retail-life/check-circle-ou.svg\" alt=\"\"></button>\r\n    </div>\r\n</div>\r\n\r\n", styles: [".discount-card-v2{border-width:var(--discount-design-border-width , 1px);border-color:var(--discount-design-border-color , #0BB68B);border-style:var(--discount-design-border-style , solid);width:var(--discount-design-width , 100%);border-radius:var(--discount-design-border-radius , .5rem);box-shadow:0 2px 15px 2px #e3e6ec99;background:var(--discount-design-bg , #fff);height:128px!important;display:flex;flex-direction:column;position:relative}.sticky-bottom-btn{margin-top:auto}.discount-heading{font-weight:var(--discount-heading-font-weight , 700);font-size:var(--discount-heading-font-size , 12px);color:var(--discount-heading-font-color , #444)}.discount-btn-remove{border-radius:32px;border:1px solid #EE0000;background-color:#fff;font-size:12px;font-weight:700;color:#e00;display:flex;align-items:center;background:#fff}.discount-btn-apply{border-radius:25px;border:1px solid #DEF1E7;background-color:#def1e7;font-size:12px;font-weight:600;color:#169f7d;display:flex;align-items:center}.remove-btn-cross{font-size:12.5px!important;height:auto}.check-circle{width:12px}*{font-family:Mulish!important}.material-icons{font-family:Material Icons!important}\n"] }]
         }] });
 
 class LabelValueCardComponent {
@@ -2917,9 +2983,61 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
             args: [{ selector: 'lib-label-value-card', standalone: true, imports: [CommonModule], template: "<div class=\"labelValueCard\" *ngIf=\"field() && field()?.isVisible\">\r\n    <div class=\"labelHead\">\r\n        <span class=\"master-labelValue\" [ngStyle]=\"{\r\n        '--master-heading-font-color': field()?.controlStyle?.color,\r\n        '--master-heading-font-size': field()?.controlStyle?.fontSize,\r\n        '--master-heading-font-weight': field()?.controlStyle?.fontWeight\r\n        }\">{{field()?.label}}</span>\r\n    </div>\r\n    <div class=\"labelValue\">\r\n        <span>{{field()?.placeHolder}}</span>\r\n        <span matSuffix class=\"mx-3\">\r\n            <img *ngIf=\"field()?.imageUrl\" [src]='field().imageUrl' alt=\"\" />\r\n        </span>\r\n    </div>\r\n</div>", styles: ["*{font-family:mulish!important}.master-labelValue{font-weight:400;font-size:14px;color:#000}.master-labelValue{color:var(--master-heading-font-color, #000000)!important;font-size:var(--master-heading-font-size, 14px)!important;font-weight:var(--master-heading-font-weight, 400)!important}.labelValueCard{display:flex;flex-direction:column}.labelHead{font-size:14px;font-weight:400;color:#444;line-height:20px}.labelValue{font-size:16px;font-weight:700;color:#444;line-height:20px;position:relative;top:8px}\n"] }]
         }] });
 
+class MasterService {
+    http;
+    constructor(http) {
+        this.http = http;
+    }
+    getCookieValue(name) {
+        const cookie = document.cookie.split(';');
+        let tokenName = '';
+        let tokenValue = '';
+        const index2 = 2;
+        cookie.forEach(data => {
+            if (data.split('=')[0].includes(name) && !!data.split('=')[1]) {
+                tokenName = data.split('=')[0].trim();
+                tokenValue = data.split('=')[1];
+            }
+            if (name === 'link' &&
+                data.split('=')[0].includes(name) &&
+                data.split('=')[index2] !== null &&
+                data.split('=')[index2] !== undefined) {
+                tokenValue = tokenValue + '=' + data.split('=')[index2];
+            }
+        });
+        return tokenValue;
+    }
+    getCommonHeaders(configData) {
+        const headers = {};
+        headers['content-type'] = 'application/json';
+        if (configData['isSendToken']) {
+            headers['Authorization'] = 'Bearer ' + this.getCookieValue(configData['tokenCookieParam']);
+        }
+        return headers;
+    }
+    getSubQuestions(configData, subquestionType, personUWID) {
+        let url = `${configData['apiUrl']}`;
+        url += `?${configData['urlParamForDisease']}=${subquestionType}`;
+        url += `&${configData['urlParamForPersonUwId']}=${personUWID}`;
+        url += `&lang=ENG`;
+        return this.http.get(url, { headers: this.getCommonHeaders(configData) });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MasterService, deps: [{ token: i1$4.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MasterService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MasterService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [{ type: i1$4.HttpClient }] });
+
 class MedialQuestionsComponent {
     ngZone;
+    masterService;
     medialQuestionResponse = input();
+    personUwId = "";
+    medicalSubQuestionsResponse = {};
     addressInput;
     autocomplete;
     saveQuestionRequestLa = [];
@@ -2955,8 +3073,9 @@ class MedialQuestionsComponent {
     addressSuggestions = [];
     hoveredIndex = -1;
     searchTimeout;
-    constructor(ngZone) {
+    constructor(ngZone, masterService) {
         this.ngZone = ngZone;
+        this.masterService = masterService;
         console.log('medialQuestionResponseeeeee', this.medialQuestionResponse());
     }
     ngOnInit() { }
@@ -3148,6 +3267,7 @@ class MedialQuestionsComponent {
                 if (!this.checkIfValueIsEmpty(data['questionsResponse'])) {
                     let distinctSteps = [];
                     data['questionsResponse'].forEach((singlePersonObject) => {
+                        this.personUwId = singlePersonObject['personUWId'].toString();
                         if (!this.checkIfValueIsEmpty(singlePersonObject['questionList'])) {
                             singlePersonObject['questionList'].forEach((singleQuestion) => {
                                 if (singleQuestion['title'] === 'Medical Details') {
@@ -4716,8 +4836,153 @@ class MedialQuestionsComponent {
         });
         sessionStorage.setItem('isMedicalQuestionsValid', isValid);
     }
-    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: true, isRequired: false, transformFunction: null }, field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null } }, viewQueries: [{ propertyName: "addressInput", first: true, predicate: ["addressInput"], descendants: true }], usesOnChanges: 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-1\"\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-12 px-0 my-1\">\r\n            <lib-textbox [(ngModel)]=\"personUwAnswers[questions.questionId]\" [field]=\"questions['field']\" (blur)=\"removeSubQuestionValues()\" />\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 class=\"row col-12 my-1\" *ngIf=\"personUwAnswers['medicalQuestionsHeightUnit'] === 'CM'\">\r\n              <div class=\"col-7 py-0 heightInputs\">\r\n                <lib-textbox [field]=\"medQuestionObj['QHT']['field']\"   />\r\n              </div>\r\n              <div class=\"col-5\">\r\n                <lib-select [(ngModel)]=\"personUwAnswers['medicalQuestionsHeightUnit']\" [field]=\"medQuestionObj['heightObjectTypes']\" />\r\n              </div>\r\n            </div>\r\n            <div\r\n              class=\"row\"\r\n              *ngIf=\"\r\n                personUwAnswers[\r\n                  'medicalQuestionsHeightUnit'\r\n                ] === 'FEET'\r\n              \"\r\n            >\r\n              <div class=\"col-4 py-0 my-1\">\r\n                <lib-select [field]=\"medQuestionObj['QHTF']['field']\" />\r\n              </div>\r\n              <div class=\"col-4 py-0 my-1\">\r\n                <lib-select [field]=\"medQuestionObj['QHTI']['field']\" />\r\n              </div>\r\n              <div\r\n                class=\"col-4 py-0 my-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=\"medicalQues my-1\"\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=\"my-1\"\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=\"my-1\"\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=\"my-1\"\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']\" (ngModelChange)=\"removeSubQuestionValues()\" />\r\n        </div>\r\n\r\n        <div\r\n          class=\"my-1\"\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']\" (ngModelChange)=\"removeSubQuestionValues()\" />\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=\"my-1\"\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}.medicalQues{font-size:12px;font-style:normal;font-weight:400;line-height:normal}.heightinput{border:2px solid #fb0;padding:10px;border-radius:4px;width:fit-content}.heightInputs{display:flex;align-items:center;gap:10px}\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: ["reactiveFormControlobject", "field"], outputs: ["change"] }, { kind: "component", type: CheckboxComponent, selector: "lib-checkbox", inputs: ["field", "reactiveFormControlobject"], outputs: ["change"] }, { kind: "component", type: SelectComponent, selector: "lib-select", inputs: ["field", "reactiveFormControlobject"], outputs: ["selectionChange"] }, { kind: "component", type: DobComponent, selector: "lib-dob", inputs: ["field", "reactiveFormControlobject"], outputs: ["blur"] }, { kind: "component", type: UploadComponent, selector: "lib-upload", inputs: ["field", "reactiveFormControlobject"], outputs: ["filesChanged", "fileRemoved"] }, { kind: "component", type: MultipleSelectComponent, selector: "lib-multiple-select", inputs: ["field", "reactiveFormControlobject"], outputs: ["selectionChange"] }, { 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"] }] });
+    valueChangeForMultiselect(question) {
+        if (question['cammundaQuestionCode'] === 'LifeMediCndtn' || question['cammundaQuestionCode'] === 'MediCndtn') {
+            this.personUwAnswers[question['questionId']].length > 0;
+            // if none is selected then remove all and call API
+            let isNoneSelected = this.personUwAnswers[question['questionId']].findIndex((singleObj) => singleObj['value'] === 'NoMedHistry');
+            if (isNoneSelected !== -1) {
+                this.personUwAnswers[question['questionId']] = this.personUwAnswers[question['questionId']] = this.personUwAnswers[question['questionId']].filter((singleObj) => singleObj['value'] === 'NoMedHistry');
+            }
+            this.medicalSubQuestionsResponse = [];
+            if (!this.checkIfValueIsEmpty(this.questionList)) {
+                this.questionList = this.questionList.filter((singleSection) => ((this.checkIfValueIsEmpty(singleSection['isMedicalSubQuestion']) || (!this.checkIfValueIsEmpty(singleSection['isMedicalSubQuestion']) && !singleSection['isMedicalSubQuestion']))));
+            }
+            // let currentSectionIndex: any = this.sharedService.personUwResponseObj['questionsResponse'].findIndex(
+            //   (singlePersonObj: any) =>
+            //     singlePersonObj['role'] ===
+            //     this.sharedService.personUwMasterObj[singlePersonIndex]['role']
+            // );
+            // remove medical sub questions from questions response list
+            // if (
+            //   currentSectionIndex !== this.numberConstant.numberminus1 &&
+            //   !this.sharedService.checkIfValueIsEmpty(
+            //     this.sharedService.personUwResponseObj['questionsResponse'][
+            //       currentSectionIndex
+            //     ]
+            //   ) &&
+            //   !this.sharedService.checkIfValueIsEmpty(
+            //     this.sharedService.personUwResponseObj['questionsResponse'][
+            //       currentSectionIndex
+            //     ]['questionList']
+            //   )
+            // ) {
+            // this.sharedService.personUwResponseObj['questionsResponse'][
+            //   currentSectionIndex
+            // ]['questionList'] = this.sharedService.personUwResponseObj[
+            //   'questionsResponse'
+            // ][currentSectionIndex]['questionList'].filter(
+            //   (singleListItem: any) =>
+            //     this.sharedService.checkIfValueIsEmpty(
+            //       singleListItem['isMedicalSubQuestion']
+            //     ) ||
+            //     (!this.sharedService.checkIfValueIsEmpty(
+            //       singleListItem['isMedicalSubQuestion']
+            //     ) &&
+            //       !singleListItem['isMedicalSubQuestion'])
+            // );
+            // }
+            // this.sharedService.personUwResponseObj['questionsResponse'][0][
+            //   'questionList'
+            // ].forEach((singleQuestion: any, index: any) => {
+            //   if (singleQuestion['isMedicalSubQuestion']) {
+            //     this.sharedService.personUwResponseObj['questionsResponse'][0][
+            //       'questionList'
+            //     ].splice(index, 1);
+            //   }
+            // });
+            // this.questionList = this.questionList.filter((singleSection : any) => (!singleSection['isMedicalSubQuestion'] || this.checkIfValueIsEmpty(singleSection['isMedicalSubQuestion'])));
+            // this.questionList.forEach((singleMasterObj: any, i: number) => {
+            //   if (singleMasterObj['isMedicalSubQuestion']) {
+            //     this.sharedService.personUwMasterObj[singlePersonIndex][
+            //       'questionList'
+            //     ]['questions'] = [];
+            //   }
+            // });
+            // this.loader.display(true);
+            let selectedDiseases = this.personUwAnswers[question['questionId']].map((singleDiseaseObj) => singleDiseaseObj['value']).toString();
+            // let request: any = JSON.parse(
+            //   JSON.stringify(
+            //     this.fetchSubQuestionsList[
+            //       this.sharedService.personUwMasterObj[singlePersonIndex]['role']
+            //     ].toString()
+            //   )
+            // );
+            this.masterService.getSubQuestions(question['field']['configData'], selectedDiseases, this.personUwId).subscribe((data) => {
+                // this.loader.display(false);
+                let distinctSteps = [];
+                if (!this.checkIfValueIsEmpty(data)) {
+                    data.forEach((subQuestion) => {
+                        subQuestion['isShowQuestionInUI'] = false;
+                        subQuestion['isMedicalSubQuestion'] = true;
+                        if (!this.checkIfValueIsEmpty(subQuestion['questionRelation']) &&
+                            !Array.isArray(subQuestion['questionRelation'])) {
+                            subQuestion['questionRelation'] = [
+                                subQuestion['questionRelation']
+                            ];
+                        }
+                        if (subQuestion['questionType'] === 'CHECKBOX' &&
+                            !this.checkIfValueIsEmpty(subQuestion['questionRelation'])) {
+                            subQuestion['questionRelation'].forEach((singleQuestionRelationObj) => {
+                                let nextQuestionObject = data.filter((object) => object['questionId'] ===
+                                    singleQuestionRelationObj['nextQuestionId']);
+                                if (nextQuestionObject.length > 0) {
+                                    nextQuestionObject[0]['answeredValue'] =
+                                        singleQuestionRelationObj['parentQuestionValue'];
+                                }
+                            });
+                        }
+                        // subQuestion[
+                        //   'domainValues'
+                        // ] = this.sharedService.personUwResponseObj['domainValues'][
+                        //   subQuestion['domainName']
+                        // ];
+                        // if (
+                        //   !this.sharedService.checkIfValueIsEmpty(
+                        //     subQuestion['domainValues']
+                        //   )
+                        // ) {
+                        //   subQuestion['domainValues'].forEach((subDomain: any) => {
+                        //     this.sharedService.subMedicalQuestionsDomainInternalValuesList.push(
+                        //       subDomain['domainInternalValue']
+                        //     );
+                        //   });
+                        // }
+                        if (!distinctSteps.includes(subQuestion['clusterId'])) {
+                            distinctSteps.push(subQuestion['clusterId']);
+                        }
+                    });
+                    data.sort((a, b) => a['step'] - b['step'] || a['displayOrder'] - b['displayOrder']);
+                    distinctSteps.forEach((steps, ind) => {
+                        let filteredObj = data.filter((singleQuestion) => singleQuestion['clusterId'] === steps);
+                        let obj = {
+                            step: 1000 + ind,
+                            questions: !this.checkIfValueIsEmpty(filteredObj)
+                                ? filteredObj
+                                : [],
+                            sectionName: !this.checkIfValueIsEmpty(filteredObj)
+                                ? filteredObj[0]['title']
+                                : '',
+                            personUWId: this.personUwId,
+                            isMedicalSubQuestion: true,
+                            showSection: true
+                        };
+                        this.questionList.push(obj);
+                    });
+                    this.medicalSubQuestionsResponse = data;
+                    // merge medical sub questions into person uw main questions response (required for show question function to work)
+                    // clearing on top before api call
+                    this.personUwResponseObj['questionList'] = this.personUwResponseObj['questionList'].concat(this.medicalSubQuestionsResponse);
+                }
+                this.removeSubQuestionValues();
+            }, (err) => {
+                // this.loader.display(false);
+            });
+        }
+        this.removeSubQuestionValues();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MedialQuestionsComponent, deps: [{ token: i0.NgZone }, { token: MasterService }], 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: true, isRequired: false, transformFunction: null }, field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null } }, viewQueries: [{ propertyName: "addressInput", first: true, predicate: ["addressInput"], descendants: true }], usesOnChanges: 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-1\"\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-12 px-0 my-1\">\r\n            <lib-textbox [(ngModel)]=\"personUwAnswers[questions.questionId]\" [field]=\"questions['field']\" (blur)=\"removeSubQuestionValues()\" />\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 class=\"row col-12 my-1\" *ngIf=\"personUwAnswers['medicalQuestionsHeightUnit'] === 'CM'\">\r\n              <div class=\"col-7 py-0 heightInputs\">\r\n                <lib-textbox [field]=\"medQuestionObj['QHT']['field']\"   />\r\n              </div>\r\n              <div class=\"col-5\">\r\n                <lib-select [(ngModel)]=\"personUwAnswers['medicalQuestionsHeightUnit']\" [field]=\"medQuestionObj['heightObjectTypes']\" />\r\n              </div>\r\n            </div>\r\n            <div\r\n              class=\"row\"\r\n              *ngIf=\"\r\n                personUwAnswers[\r\n                  'medicalQuestionsHeightUnit'\r\n                ] === 'FEET'\r\n              \"\r\n            >\r\n              <div class=\"col-4 py-0 my-1\">\r\n                <lib-select [field]=\"medQuestionObj['QHTF']['field']\" />\r\n              </div>\r\n              <div class=\"col-4 py-0 my-1\">\r\n                <lib-select [field]=\"medQuestionObj['QHTI']['field']\" />\r\n              </div>\r\n              <div\r\n                class=\"col-4 py-0 my-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=\"medicalQues my-1\"\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=\"my-1\"\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)=\"valueChangeForMultiselect(questions)\" [field]=\"questions['field']\" />\r\n        </div>\r\n\r\n        <div\r\n          class=\"my-1\"\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=\"my-1\"\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']\" (ngModelChange)=\"removeSubQuestionValues()\" />\r\n        </div>\r\n\r\n        <div\r\n          class=\"my-1\"\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']\" (ngModelChange)=\"removeSubQuestionValues()\" />\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=\"my-1\"\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}.medicalQues{font-size:12px;font-style:normal;font-weight:400;line-height:normal}.heightinput{border:2px solid #fb0;padding:10px;border-radius:4px;width:fit-content}.heightInputs{display:flex;align-items:center;gap:10px}\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: ["reactiveFormControlobject", "field"], outputs: ["change"] }, { kind: "component", type: CheckboxComponent, selector: "lib-checkbox", inputs: ["field", "reactiveFormControlobject"], outputs: ["change"] }, { kind: "component", type: SelectComponent, selector: "lib-select", inputs: ["field", "reactiveFormControlobject"], outputs: ["selectionChange"] }, { kind: "component", type: DobComponent, selector: "lib-dob", inputs: ["field", "reactiveFormControlobject"], outputs: ["blur", "valueChange", "dateSelected", "invalidDate"] }, { kind: "component", type: UploadComponent, selector: "lib-upload", inputs: ["field", "reactiveFormControlobject"], outputs: ["filesChanged", "fileRemoved"] }, { kind: "component", type: MultipleSelectComponent, selector: "lib-multiple-select", inputs: ["field", "reactiveFormControlobject"], outputs: ["selectionChange"] }, { kind: "ngmodule", type: GoogleMapsModule }, { kind: "component", type: i4$4.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: i4$4.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,
@@ -4733,8 +4998,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         UploadComponent,
                         MultipleSelectComponent,
                         GoogleMapsModule,
-                    ], 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-1\"\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-12 px-0 my-1\">\r\n            <lib-textbox [(ngModel)]=\"personUwAnswers[questions.questionId]\" [field]=\"questions['field']\" (blur)=\"removeSubQuestionValues()\" />\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 class=\"row col-12 my-1\" *ngIf=\"personUwAnswers['medicalQuestionsHeightUnit'] === 'CM'\">\r\n              <div class=\"col-7 py-0 heightInputs\">\r\n                <lib-textbox [field]=\"medQuestionObj['QHT']['field']\"   />\r\n              </div>\r\n              <div class=\"col-5\">\r\n                <lib-select [(ngModel)]=\"personUwAnswers['medicalQuestionsHeightUnit']\" [field]=\"medQuestionObj['heightObjectTypes']\" />\r\n              </div>\r\n            </div>\r\n            <div\r\n              class=\"row\"\r\n              *ngIf=\"\r\n                personUwAnswers[\r\n                  'medicalQuestionsHeightUnit'\r\n                ] === 'FEET'\r\n              \"\r\n            >\r\n              <div class=\"col-4 py-0 my-1\">\r\n                <lib-select [field]=\"medQuestionObj['QHTF']['field']\" />\r\n              </div>\r\n              <div class=\"col-4 py-0 my-1\">\r\n                <lib-select [field]=\"medQuestionObj['QHTI']['field']\" />\r\n              </div>\r\n              <div\r\n                class=\"col-4 py-0 my-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=\"medicalQues my-1\"\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=\"my-1\"\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=\"my-1\"\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=\"my-1\"\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']\" (ngModelChange)=\"removeSubQuestionValues()\" />\r\n        </div>\r\n\r\n        <div\r\n          class=\"my-1\"\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']\" (ngModelChange)=\"removeSubQuestionValues()\" />\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=\"my-1\"\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}.medicalQues{font-size:12px;font-style:normal;font-weight:400;line-height:normal}.heightinput{border:2px solid #fb0;padding:10px;border-radius:4px;width:fit-content}.heightInputs{display:flex;align-items:center;gap:10px}\n"] }]
-        }], ctorParameters: () => [{ type: i0.NgZone }], propDecorators: { addressInput: [{
+                    ], 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-1\"\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-12 px-0 my-1\">\r\n            <lib-textbox [(ngModel)]=\"personUwAnswers[questions.questionId]\" [field]=\"questions['field']\" (blur)=\"removeSubQuestionValues()\" />\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 class=\"row col-12 my-1\" *ngIf=\"personUwAnswers['medicalQuestionsHeightUnit'] === 'CM'\">\r\n              <div class=\"col-7 py-0 heightInputs\">\r\n                <lib-textbox [field]=\"medQuestionObj['QHT']['field']\"   />\r\n              </div>\r\n              <div class=\"col-5\">\r\n                <lib-select [(ngModel)]=\"personUwAnswers['medicalQuestionsHeightUnit']\" [field]=\"medQuestionObj['heightObjectTypes']\" />\r\n              </div>\r\n            </div>\r\n            <div\r\n              class=\"row\"\r\n              *ngIf=\"\r\n                personUwAnswers[\r\n                  'medicalQuestionsHeightUnit'\r\n                ] === 'FEET'\r\n              \"\r\n            >\r\n              <div class=\"col-4 py-0 my-1\">\r\n                <lib-select [field]=\"medQuestionObj['QHTF']['field']\" />\r\n              </div>\r\n              <div class=\"col-4 py-0 my-1\">\r\n                <lib-select [field]=\"medQuestionObj['QHTI']['field']\" />\r\n              </div>\r\n              <div\r\n                class=\"col-4 py-0 my-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=\"medicalQues my-1\"\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=\"my-1\"\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)=\"valueChangeForMultiselect(questions)\" [field]=\"questions['field']\" />\r\n        </div>\r\n\r\n        <div\r\n          class=\"my-1\"\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=\"my-1\"\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']\" (ngModelChange)=\"removeSubQuestionValues()\" />\r\n        </div>\r\n\r\n        <div\r\n          class=\"my-1\"\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']\" (ngModelChange)=\"removeSubQuestionValues()\" />\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=\"my-1\"\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}.medicalQues{font-size:12px;font-style:normal;font-weight:400;line-height:normal}.heightinput{border:2px solid #fb0;padding:10px;border-radius:4px;width:fit-content}.heightInputs{display:flex;align-items:center;gap:10px}\n"] }]
+        }], ctorParameters: () => [{ type: i0.NgZone }, { type: MasterService }], propDecorators: { addressInput: [{
                 type: ViewChild,
                 args: ['addressInput']
             }] } });
@@ -4752,7 +5017,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
 class ProgressBarComponent {
     field = input.required();
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProgressBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: ProgressBarComponent, isStandalone: true, selector: "lib-progress-bar", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<mat-progress-bar mode=\"determinate\" [value]=\"field()?.value\" [ngStyle]=\"{\r\n'--progress-bar-background-color': field()?.controlStyle?.background ,\r\n'--progress-bar-border-radius': field()?.controlStyle?.borderRadius ,\r\n'--progress-bar-border-color': field()?.controlStyle?.color ,\r\n'--progress-bar-width': field()?.controlStyle?.width ,\r\n'--progress-bar-height': field()?.controlStyle?.height ,\r\n}\"></mat-progress-bar>", styles: ["::ng-deep .mdc-linear-progress__buffer-bar{background-color:var(--progress-bar-background-color , #EAEAEA)!important;border-radius:var(--progress-bar-border-radius , 84px)!important}::ng-deep .mdc-linear-progress__bar-inner{border-color:var(--progress-bar-border-color , #ffbb00)!important;border-top-width:var(--progress-bar-height , 4px)!important}::ng-deep .mdc-linear-progress{width:var(--progress-bar-width , 100%)!important;height:var(--progress-bar-height , 4px)!important}::ng-deep .mdc-linear-progress__buffer{height:var(--progress-bar-height , 4px)!important}\n"], dependencies: [{ kind: "ngmodule", type: MatProgressBarModule }, { kind: "component", type: i1$4.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { 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: ProgressBarComponent, isStandalone: true, selector: "lib-progress-bar", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<mat-progress-bar mode=\"determinate\" [value]=\"field()?.value\" [ngStyle]=\"{\r\n'--progress-bar-background-color': field()?.controlStyle?.background ,\r\n'--progress-bar-border-radius': field()?.controlStyle?.borderRadius ,\r\n'--progress-bar-border-color': field()?.controlStyle?.color ,\r\n'--progress-bar-width': field()?.controlStyle?.width ,\r\n'--progress-bar-height': field()?.controlStyle?.height ,\r\n}\"></mat-progress-bar>", styles: ["::ng-deep .mdc-linear-progress__buffer-bar{background-color:var(--progress-bar-background-color , #EAEAEA)!important;border-radius:var(--progress-bar-border-radius , 84px)!important}::ng-deep .mdc-linear-progress__bar-inner{border-color:var(--progress-bar-border-color , #ffbb00)!important;border-top-width:var(--progress-bar-height , 4px)!important}::ng-deep .mdc-linear-progress{width:var(--progress-bar-width , 100%)!important;height:var(--progress-bar-height , 4px)!important}::ng-deep .mdc-linear-progress__buffer{height:var(--progress-bar-height , 4px)!important}\n"], dependencies: [{ kind: "ngmodule", type: MatProgressBarModule }, { kind: "component", type: i1$5.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProgressBarComponent, decorators: [{
             type: Component,
@@ -4777,7 +5042,7 @@ class AccordianComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AccordianComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: AccordianComponent, isStandalone: true, selector: "lib-accordian", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<mat-accordion \r\n  [multi]=\"true\" \r\n  [hideToggle]=\"false\"\r\n  [displayMode]=\"'default'\"\r\n  [togglePosition]=\"'after'\" [ngStyle]=\"{\r\n'--acc-font-color': field()?.controlStyle?.color ,\r\n'--acc-bg-color': field()?.controlStyle?.background ,\r\n'--acc-border-radius': field()?.controlStyle?.borderRadius ,\r\n'--acc-border-width': field()?.controlStyle?.borderWidth ,\r\n'--acc-border-style': field()?.controlStyle?.borderStyle ,\r\n'--acc-border-color': field()?.controlStyle?.borderColor ,\r\n'--acc-font-size': field()?.controlStyle?.fontSize ,\r\n'--acc-font-weight': field()?.controlStyle?.fontWeight \r\n}\">\r\n  \r\n  <mat-expansion-panel \r\n    [expanded]=\"false\"\r\n    [disabled]=\"false\"\r\n    [hideToggle]=\"false\"\r\n    (opened)=\"onPanelOpened()\"\r\n    (closed)=\"onPanelClosed()\"\r\n    (expandedChange)=\"onExpandedChange($event)\">\r\n    \r\n    <mat-expansion-panel-header \r\n      [collapsedHeight]=\"'48px'\"\r\n      [expandedHeight]=\"'64px'\">\r\n      \r\n      <mat-panel-title>\r\n        <span class=\"triangle-icon\" *ngIf=\"field()?.configData?.showLeftArrowIndicator && field()?.configData?.showLeftArrowIndicator === 'true'\"></span>\r\n        {{ field()?.label}}\r\n      </mat-panel-title>\r\n      \r\n      <mat-panel-description>\r\n        <!-- This is a description of the panel -->\r\n      </mat-panel-description>\r\n      \r\n    </mat-expansion-panel-header>\r\n    \r\n    <!-- Panel Content -->\r\n    <div>\r\n      {{ field()?.configData?.accordianContent}}\r\n    </div>\r\n    \r\n    <!-- Action Buttons -->\r\n    <!-- <mat-action-row>\r\n      <button mat-button color=\"primary\">Save</button>\r\n      <button mat-button color=\"warn\">Cancel</button>\r\n    </mat-action-row> -->\r\n    \r\n  </mat-expansion-panel>\r\n</mat-accordion>", styles: ["::ng-deep .mat-expansion-panel{color:var(--acc-font-color , #444)!important;font-size:var(--acc-font-size , 12px)!important;border-radius:var(--acc-border-radius , 8px)!important;border-width:var(--acc-border-width , 0px)!important;border-style:var(--acc-border-style , solid)!important;border-color:var(--acc-border-color , #ffbb00)!important;background:var(--acc-bg-color , #f5f5f5)!important}::ng-deep .mat-expansion-panel-header-title{font-family:Mulish;font-weight:var(--acc-font-weight , 700)!important;font-size:var(--acc-font-size , 12px);color:var(--acc-font-color , #444)!important}::ng-deep .mat-expansion-panel:not([class*=mat-elevation-z]){box-shadow:none!important}::ng-deep .mat-expansion-indicator svg{fill:#1c1b1f!important}::ng-deep .mat-expansion-panel-content{font-size:var(--acc-font-size , 12px)!important}.triangle-icon{display:inline-block;width:0;height:0;border-style:solid;border-width:4px 0 4px 7px;border-color:transparent transparent transparent #ffbb00;margin-right:8px;transition:transform .3s ease}::ng-deep .mat-expansion-panel-header.mat-expanded .triangle-icon{transform:rotate(90deg)}\n"], dependencies: [{ kind: "ngmodule", type: MatExpansionModule }, { kind: "directive", type: i1$5.MatAccordion, selector: "mat-accordion", inputs: ["hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i1$5.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i1$5.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i1$5.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "directive", type: i1$5.MatExpansionPanelDescription, selector: "mat-panel-description" }, { 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"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: AccordianComponent, isStandalone: true, selector: "lib-accordian", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<mat-accordion \r\n  [multi]=\"true\" \r\n  [hideToggle]=\"false\"\r\n  [displayMode]=\"'default'\"\r\n  [togglePosition]=\"'after'\" [ngStyle]=\"{\r\n'--acc-font-color': field()?.controlStyle?.color ,\r\n'--acc-bg-color': field()?.controlStyle?.background ,\r\n'--acc-border-radius': field()?.controlStyle?.borderRadius ,\r\n'--acc-border-width': field()?.controlStyle?.borderWidth ,\r\n'--acc-border-style': field()?.controlStyle?.borderStyle ,\r\n'--acc-border-color': field()?.controlStyle?.borderColor ,\r\n'--acc-font-size': field()?.controlStyle?.fontSize ,\r\n'--acc-font-weight': field()?.controlStyle?.fontWeight \r\n}\">\r\n  \r\n  <mat-expansion-panel \r\n    [expanded]=\"false\"\r\n    [disabled]=\"false\"\r\n    [hideToggle]=\"false\"\r\n    (opened)=\"onPanelOpened()\"\r\n    (closed)=\"onPanelClosed()\"\r\n    (expandedChange)=\"onExpandedChange($event)\">\r\n    \r\n    <mat-expansion-panel-header \r\n      [collapsedHeight]=\"'48px'\"\r\n      [expandedHeight]=\"'64px'\">\r\n      \r\n      <mat-panel-title>\r\n        <span class=\"triangle-icon\" *ngIf=\"field()?.configData?.showLeftArrowIndicator && field()?.configData?.showLeftArrowIndicator === 'true'\"></span>\r\n        {{ field()?.label}}\r\n      </mat-panel-title>\r\n      \r\n      <mat-panel-description>\r\n        <!-- This is a description of the panel -->\r\n      </mat-panel-description>\r\n      \r\n    </mat-expansion-panel-header>\r\n    \r\n    <!-- Panel Content -->\r\n    <div>\r\n      {{ field()?.configData?.accordianContent}}\r\n    </div>\r\n    \r\n    <!-- Action Buttons -->\r\n    <!-- <mat-action-row>\r\n      <button mat-button color=\"primary\">Save</button>\r\n      <button mat-button color=\"warn\">Cancel</button>\r\n    </mat-action-row> -->\r\n    \r\n  </mat-expansion-panel>\r\n</mat-accordion>", styles: ["::ng-deep .mat-expansion-panel{color:var(--acc-font-color , #444)!important;font-size:var(--acc-font-size , 12px)!important;border-radius:var(--acc-border-radius , 8px)!important;border-width:var(--acc-border-width , 0px)!important;border-style:var(--acc-border-style , solid)!important;border-color:var(--acc-border-color , #ffbb00)!important;background:var(--acc-bg-color , #f5f5f5)!important}::ng-deep .mat-expansion-panel-header-title{font-family:Mulish;font-weight:var(--acc-font-weight , 700)!important;font-size:var(--acc-font-size , 12px);color:var(--acc-font-color , #444)!important}::ng-deep .mat-expansion-panel:not([class*=mat-elevation-z]){box-shadow:none!important}::ng-deep .mat-expansion-indicator svg{fill:#1c1b1f!important}::ng-deep .mat-expansion-panel-content{font-size:var(--acc-font-size , 12px)!important}.triangle-icon{display:inline-block;width:0;height:0;border-style:solid;border-width:4px 0 4px 7px;border-color:transparent transparent transparent #ffbb00;margin-right:8px;transition:transform .3s ease}::ng-deep .mat-expansion-panel-header.mat-expanded .triangle-icon{transform:rotate(90deg)}\n"], dependencies: [{ kind: "ngmodule", type: MatExpansionModule }, { kind: "directive", type: i1$6.MatAccordion, selector: "mat-accordion", inputs: ["hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i1$6.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i1$6.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i1$6.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "directive", type: i1$6.MatExpansionPanelDescription, selector: "mat-panel-description" }, { 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: AccordianComponent, decorators: [{
             type: Component,
@@ -4920,7 +5185,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  @case ('labelWithImage') {\r\n    <lib-label-with-image [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"], outputs: ["selectionChange"] }, { kind: "component", type: RadioComponent, selector: "lib-radio", inputs: ["reactiveFormControlobject", "field"], outputs: ["change"] }, { kind: "component", type: ToggleComponent, selector: "lib-toggle", inputs: ["field", "reactiveFormControlobject"], outputs: ["change"] }, { kind: "component", type: UploadComponent, selector: "lib-upload", inputs: ["field", "reactiveFormControlobject"], outputs: ["filesChanged", "fileRemoved"] }, { kind: "component", type: DobComponent, selector: "lib-dob", inputs: ["field", "reactiveFormControlobject"], outputs: ["blur"] }, { 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", "reactiveFormControlobject"], outputs: ["change"] }, { kind: "component", type: TextareaComponent, selector: "lib-textarea", inputs: ["field", "reactiveFormControlobject"], outputs: ["blur"] }, { 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"], outputs: ["blur"] }, { kind: "component", type: MultipleSelectComponent, selector: "lib-multiple-select", inputs: ["field", "reactiveFormControlobject"], outputs: ["selectionChange"] }, { 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", "fields"], outputs: ["infoClick"] }, { 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"], outputs: ["blur"] }, { 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", "tablePaginationClicked"] }, { 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"], outputs: ["selectionChanged", "change"] }, { 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"] }, { kind: "component", type: LabelWithImageComponent, selector: "lib-label-with-image", 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  @case ('labelWithImage') {\r\n    <lib-label-with-image [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"], outputs: ["selectionChange"] }, { kind: "component", type: RadioComponent, selector: "lib-radio", inputs: ["reactiveFormControlobject", "field"], outputs: ["change"] }, { kind: "component", type: ToggleComponent, selector: "lib-toggle", inputs: ["field", "reactiveFormControlobject"], outputs: ["change"] }, { kind: "component", type: UploadComponent, selector: "lib-upload", inputs: ["field", "reactiveFormControlobject"], outputs: ["filesChanged", "fileRemoved"] }, { kind: "component", type: DobComponent, selector: "lib-dob", inputs: ["field", "reactiveFormControlobject"], outputs: ["blur", "valueChange", "dateSelected", "invalidDate"] }, { 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", "reactiveFormControlobject"], outputs: ["change"] }, { kind: "component", type: TextareaComponent, selector: "lib-textarea", inputs: ["field", "reactiveFormControlobject"], outputs: ["blur"] }, { 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"], outputs: ["blur"] }, { kind: "component", type: MultipleSelectComponent, selector: "lib-multiple-select", inputs: ["field", "reactiveFormControlobject"], outputs: ["selectionChange"] }, { 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", "fields"], outputs: ["infoClick"] }, { 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"], outputs: ["blur"] }, { 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", "tablePaginationClicked"] }, { 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"], outputs: ["selectionChanged", "change"] }, { 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"] }, { kind: "component", type: LabelWithImageComponent, selector: "lib-label-with-image", inputs: ["field"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MasterControlComponent, decorators: [{
             type: Component,