master-control 0.4.23 → 0.4.25

package/fesm2022/master-control.mjs

@@ -778,7 +778,7 @@ class RadioComponent {
                 useExisting: RadioComponent,
                 multi: true
             }
-        ], ngImport: i0, template: "<label class=\"field-lable\"  *ngIf=\"field() && field()?.isVisible && field().isShowLabel\" [ngStyle]=\"{\n  }\">{{field()?.label}}<span class=\"error-message\" *ngIf=\"field()?.validators?.isRequired\">*</span></label>\n  @if(reactiveFormControlobject()) {\n     <mat-radio-group class=\"w-100\" *ngIf=\"field() && field()?.isVisible\"\n    class=\"radio-btn-group radio-btn-gender\"\n    [required]=\"field()?.validators?.isRequired\"\n    [value]=\"inputValue\"\n    [formControl]=\"reactiveFormControlobject()\"\n    (change)=\"onRadioGroupChange($event)\"\n    >\n    <div\n      class=\"card radio-card-gender py-auto px-1\"\n      *ngFor=\"let data of field()?.options\"\n      [ngClass]=\"{'disable-radio-btn': field()?.isDisable || reactiveFormControlobject?.disabled, 'two-options': field()?.options?.length === 2}\"\n      (click)=\"toggleRadio(data.value, $event)\"\n       [ngStyle]=\"{\n    '--radio-button-border-color': inputValue === data.value ? field()?.controlStyle?.focusBorderColor : field()?.controlStyle?.borderColor,\n    '--radio-button-background-color': inputValue === data.value ? field()?.controlStyle?.focusBackground : field()?.controlStyle?.background,\n    '--radio-button-border-width': inputValue === data.value ? field()?.controlStyle?.focusBorderWidth : field()?.controlStyle?.borderWidth,\n    '--radio-button-border-radius': inputValue === data.value ? field()?.controlStyle?.borderRadius : field()?.controlStyle?.borderRadius,\n  }\"\n      >\n      <mat-radio-button\n        style=\"min-width: 72px; text-align: center;\"\n        class=\"radioButtonGender\"\n        [value]=\"data.value\"\n      >\n        <span style=\"white-space: pre-line;\" class=\"forRadioLabel\" [ngStyle]=\"{\n    '--radio-button-font-weight': field()?.controlStyle?.fontWeight,\n    '--radio-button-font-size': field()?.controlStyle?.fontSize,\n    '--radio-button-font-color': field()?.controlStyle?.color,\n  }\">{{ data.label }}\n  <img class=\"radio-btn-icon\" *ngIf=\"field()?.imageUrl\" [src]=\"field()?.imageUrl\" alt=\"\">\n  </span>\n      </mat-radio-button>\n    </div>\n  </mat-radio-group>\n  }@else {\n     <mat-radio-group class=\"w-100\" *ngIf=\"field() && field()?.isVisible\"\n    class=\"radio-btn-group radio-btn-gender\"\n    [required]=\"field()?.validators?.isRequired\"\n    [value]=\"inputValue\"\n    (change)=\"onRadioGroupChange($event)\"\n    >\n    <div\n      class=\"card radio-card-gender py-auto px-1\"\n      *ngFor=\"let data of field()?.options\"\n      [ngClass]=\"{'disable-radio-btn': field()?.isDisable, 'two-options': field()?.options?.length === 2}\"\n      (click)=\"toggleRadio(data.value, $event)\"\n       [ngStyle]=\"{\n    '--radio-button-border-color': inputValue === data.value ? field()?.controlStyle?.focusBorderColor : field()?.controlStyle?.borderColor,\n    '--radio-button-background-color': inputValue === data.value ? field()?.controlStyle?.focusBackground : field()?.controlStyle?.background,\n    '--radio-button-border-width': inputValue === data.value ? field()?.controlStyle?.focusBorderWidth : field()?.controlStyle?.borderWidth,\n    '--radio-button-border-radius': inputValue === data.value ? field()?.controlStyle?.borderRadius : field()?.controlStyle?.borderRadius,\n  }\"\n      >\n      <mat-radio-button\n        style=\"min-width: 72px; text-align: center;\"\n        class=\"radioButtonGender\"\n        [value]=\"data.value\"\n      >\n        <span style=\"white-space: pre-line;\" class=\"forRadioLabel\" [ngStyle]=\"{\n    '--radio-button-font-weight': field()?.controlStyle?.fontWeight,\n    '--radio-button-font-size': field()?.controlStyle?.fontSize,\n    '--radio-button-font-color': field()?.controlStyle?.color,\n  }\">{{ data.label }}\n  <img class=\"radio-btn-icon\" *ngIf=\"field()?.imageUrl\" [src]=\"field()?.imageUrl\" alt=\"\">\n  </span>\n      </mat-radio-button>\n    </div>\n  </mat-radio-group>\n  }\n  <div class=\"error-message\" *ngIf=\"false\">\n    {{field()?.validators?.patternMessage}}.\n</div>\n", styles: [".radio-selection-border{border:1px solid #ffbb00!important;background:#fffaeb!important}*{font-family:mulish!important}.field-lable{font-size:12px!important;font-weight:700!important;color:#444!important;margin-bottom:0!important;white-space:pre-wrap!important}.error-message{color:red}.radio-btn-group{display:flex;align-items:center;gap:1rem;align-self:stretch}::ng-deep .radio-btn-gender .mdc-form-field .mdc-radio{display:none!important}.radio-card-gender{box-shadow:none;border-color:var(--radio-button-border-color,#DADADA);border-width:var(--radio-button-border-width, 1px solid);background:var(--radio-button-background-color, #FFFFFF);display:flex;align-items:center;cursor:pointer;width:max-content!important;border-radius:var(--radio-button-border-radius, 6px)}.radio-card-gender.two-options{min-width:144px!important}::ng-deep .radioButtonGender .mdc-form-field .mdc-radio{display:none!important}.forRadioLabel{font-size:var(--radio-button-font-size, 12px)!important;font-weight:var(--radio-button-font-weight, 400);cursor:pointer;color:var(--radio-button-font-color, #444444)}.radio-btn-icon{margin-top:-2px;margin-left:4px}.selected-radio-btn{border:1px solid #ffbb00!important}.disable-radio-btn{background:#f5f5f5;pointer-events:none;cursor:none}\n"], dependencies: [{ kind: "ngmodule", type: MatRadioModule }, { kind: "directive", type: i2$2.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i2$2.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormsModule }] });
+        ], ngImport: i0, template: "<label class=\"field-lable\"  *ngIf=\"field() && field()?.isVisible && field().isShowLabel\" [ngStyle]=\"{\n  }\">{{field()?.label}}<span class=\"error-message\" *ngIf=\"field()?.validators?.isRequired\">*</span>\n  <span [appTooltipTemplate]=\"HtmlContent\" arrowPosition=\"left\" tooltipPosition=\"bottom\">\n    <img [src]=\"field().configData?.labelIconUrl\" class=\"toggle-img mx-1\" />\n  </span>\n  <ng-template #HtmlContent>\n    <span [innerHTML]=\"field().configData?.tooltipMessage\"></span>\n  </ng-template>\n  </label>\n  @if(reactiveFormControlobject()) {\n     <mat-radio-group class=\"w-100\" *ngIf=\"field() && field()?.isVisible\"\n    class=\"radio-btn-group radio-btn-gender\"\n    [required]=\"field()?.validators?.isRequired\"\n    [value]=\"inputValue\"\n    [formControl]=\"reactiveFormControlobject()\"\n    (change)=\"onRadioGroupChange($event)\"\n    >\n    <div\n      class=\"card radio-card-gender py-auto px-1\"\n      *ngFor=\"let data of field()?.options\"\n      [ngClass]=\"{'disable-radio-btn': field()?.isDisable || reactiveFormControlobject?.disabled, 'two-options': field()?.options?.length === 2}\"\n      (click)=\"toggleRadio(data.value, $event)\"\n       [ngStyle]=\"{\n    '--radio-button-border-color': inputValue === data.value ? field()?.controlStyle?.focusBorderColor : field()?.controlStyle?.borderColor,\n    '--radio-button-background-color': inputValue === data.value ? field()?.controlStyle?.focusBackground : field()?.controlStyle?.background,\n    '--radio-button-border-width': inputValue === data.value ? field()?.controlStyle?.focusBorderWidth : field()?.controlStyle?.borderWidth,\n    '--radio-button-border-radius': inputValue === data.value ? field()?.controlStyle?.borderRadius : field()?.controlStyle?.borderRadius,\n  }\"\n      >\n      <mat-radio-button\n        style=\"min-width: 72px; text-align: center;\"\n        class=\"radioButtonGender\"\n        [value]=\"data.value\"\n      >\n        <span style=\"white-space: pre-line;\" class=\"forRadioLabel\" [ngStyle]=\"{\n    '--radio-button-font-weight': field()?.controlStyle?.fontWeight,\n    '--radio-button-font-size': field()?.controlStyle?.fontSize,\n    '--radio-button-font-color': field()?.controlStyle?.color,\n  }\">{{ data.label }}\n  <img class=\"radio-btn-icon\" *ngIf=\"field()?.imageUrl\" [src]=\"field()?.imageUrl\" alt=\"\">\n  </span>\n      </mat-radio-button>\n    </div>\n  </mat-radio-group>\n  }@else {\n     <mat-radio-group class=\"w-100\" *ngIf=\"field() && field()?.isVisible\"\n    class=\"radio-btn-group radio-btn-gender\"\n    [required]=\"field()?.validators?.isRequired\"\n    [value]=\"inputValue\"\n    (change)=\"onRadioGroupChange($event)\"\n    >\n    <div\n      class=\"card radio-card-gender py-auto px-1\"\n      *ngFor=\"let data of field()?.options\"\n      [ngClass]=\"{'disable-radio-btn': field()?.isDisable, 'two-options': field()?.options?.length === 2}\"\n      (click)=\"toggleRadio(data.value, $event)\"\n       [ngStyle]=\"{\n    '--radio-button-border-color': inputValue === data.value ? field()?.controlStyle?.focusBorderColor : field()?.controlStyle?.borderColor,\n    '--radio-button-background-color': inputValue === data.value ? field()?.controlStyle?.focusBackground : field()?.controlStyle?.background,\n    '--radio-button-border-width': inputValue === data.value ? field()?.controlStyle?.focusBorderWidth : field()?.controlStyle?.borderWidth,\n    '--radio-button-border-radius': inputValue === data.value ? field()?.controlStyle?.borderRadius : field()?.controlStyle?.borderRadius,\n  }\"\n      >\n      <mat-radio-button\n        style=\"min-width: 72px; text-align: center;\"\n        class=\"radioButtonGender\"\n        [value]=\"data.value\"\n      >\n        <span style=\"white-space: pre-line;\" class=\"forRadioLabel\" [ngStyle]=\"{\n    '--radio-button-font-weight': field()?.controlStyle?.fontWeight,\n    '--radio-button-font-size': field()?.controlStyle?.fontSize,\n    '--radio-button-font-color': field()?.controlStyle?.color,\n  }\">{{ data.label }}\n  <img class=\"radio-btn-icon\" *ngIf=\"field()?.imageUrl\" [src]=\"field()?.imageUrl\" alt=\"\">\n  </span>\n      </mat-radio-button>\n    </div>\n  </mat-radio-group>\n  }\n  <div class=\"error-message\" *ngIf=\"false\">\n    {{field()?.validators?.patternMessage}}.\n</div>\n", styles: [".radio-selection-border{border:1px solid #ffbb00!important;background:#fffaeb!important}*{font-family:mulish!important}.field-lable{font-size:12px!important;font-weight:700!important;color:#444!important;margin-bottom:0!important;white-space:pre-wrap!important}.error-message{color:red}.radio-btn-group{display:flex;align-items:center;gap:1rem;align-self:stretch}::ng-deep .radio-btn-gender .mdc-form-field .mdc-radio{display:none!important}.radio-card-gender{box-shadow:none;border-color:var(--radio-button-border-color,#DADADA);border-width:var(--radio-button-border-width, 1px solid);background:var(--radio-button-background-color, #FFFFFF);display:flex;align-items:center;cursor:pointer;width:max-content!important;border-radius:var(--radio-button-border-radius, 6px)}.radio-card-gender.two-options{min-width:144px!important}::ng-deep .radioButtonGender .mdc-form-field .mdc-radio{display:none!important}.forRadioLabel{font-size:var(--radio-button-font-size, 12px)!important;font-weight:var(--radio-button-font-weight, 400);cursor:pointer;color:var(--radio-button-font-color, #444444)}.radio-btn-icon{margin-top:-2px;margin-left:4px}.selected-radio-btn{border:1px solid #ffbb00!important}.disable-radio-btn{background:#f5f5f5;pointer-events:none;cursor:none}\n"], dependencies: [{ kind: "ngmodule", type: MatRadioModule }, { kind: "directive", type: i2$2.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i2$2.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: CustomizedTooltipDirective, selector: "[appTooltipTemplate]", inputs: ["appTooltipTemplate"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RadioComponent, decorators: [{
             type: Component,
@@ -786,14 +786,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         MatRadioModule,
                         CommonModule,
                         ReactiveFormsModule,
-                        FormsModule
+                        FormsModule,
+                        CustomizedTooltipDirective
                     ], providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: RadioComponent,
                             multi: true
                         }
-                    ], template: "<label class=\"field-lable\"  *ngIf=\"field() && field()?.isVisible && field().isShowLabel\" [ngStyle]=\"{\n  }\">{{field()?.label}}<span class=\"error-message\" *ngIf=\"field()?.validators?.isRequired\">*</span></label>\n  @if(reactiveFormControlobject()) {\n     <mat-radio-group class=\"w-100\" *ngIf=\"field() && field()?.isVisible\"\n    class=\"radio-btn-group radio-btn-gender\"\n    [required]=\"field()?.validators?.isRequired\"\n    [value]=\"inputValue\"\n    [formControl]=\"reactiveFormControlobject()\"\n    (change)=\"onRadioGroupChange($event)\"\n    >\n    <div\n      class=\"card radio-card-gender py-auto px-1\"\n      *ngFor=\"let data of field()?.options\"\n      [ngClass]=\"{'disable-radio-btn': field()?.isDisable || reactiveFormControlobject?.disabled, 'two-options': field()?.options?.length === 2}\"\n      (click)=\"toggleRadio(data.value, $event)\"\n       [ngStyle]=\"{\n    '--radio-button-border-color': inputValue === data.value ? field()?.controlStyle?.focusBorderColor : field()?.controlStyle?.borderColor,\n    '--radio-button-background-color': inputValue === data.value ? field()?.controlStyle?.focusBackground : field()?.controlStyle?.background,\n    '--radio-button-border-width': inputValue === data.value ? field()?.controlStyle?.focusBorderWidth : field()?.controlStyle?.borderWidth,\n    '--radio-button-border-radius': inputValue === data.value ? field()?.controlStyle?.borderRadius : field()?.controlStyle?.borderRadius,\n  }\"\n      >\n      <mat-radio-button\n        style=\"min-width: 72px; text-align: center;\"\n        class=\"radioButtonGender\"\n        [value]=\"data.value\"\n      >\n        <span style=\"white-space: pre-line;\" class=\"forRadioLabel\" [ngStyle]=\"{\n    '--radio-button-font-weight': field()?.controlStyle?.fontWeight,\n    '--radio-button-font-size': field()?.controlStyle?.fontSize,\n    '--radio-button-font-color': field()?.controlStyle?.color,\n  }\">{{ data.label }}\n  <img class=\"radio-btn-icon\" *ngIf=\"field()?.imageUrl\" [src]=\"field()?.imageUrl\" alt=\"\">\n  </span>\n      </mat-radio-button>\n    </div>\n  </mat-radio-group>\n  }@else {\n     <mat-radio-group class=\"w-100\" *ngIf=\"field() && field()?.isVisible\"\n    class=\"radio-btn-group radio-btn-gender\"\n    [required]=\"field()?.validators?.isRequired\"\n    [value]=\"inputValue\"\n    (change)=\"onRadioGroupChange($event)\"\n    >\n    <div\n      class=\"card radio-card-gender py-auto px-1\"\n      *ngFor=\"let data of field()?.options\"\n      [ngClass]=\"{'disable-radio-btn': field()?.isDisable, 'two-options': field()?.options?.length === 2}\"\n      (click)=\"toggleRadio(data.value, $event)\"\n       [ngStyle]=\"{\n    '--radio-button-border-color': inputValue === data.value ? field()?.controlStyle?.focusBorderColor : field()?.controlStyle?.borderColor,\n    '--radio-button-background-color': inputValue === data.value ? field()?.controlStyle?.focusBackground : field()?.controlStyle?.background,\n    '--radio-button-border-width': inputValue === data.value ? field()?.controlStyle?.focusBorderWidth : field()?.controlStyle?.borderWidth,\n    '--radio-button-border-radius': inputValue === data.value ? field()?.controlStyle?.borderRadius : field()?.controlStyle?.borderRadius,\n  }\"\n      >\n      <mat-radio-button\n        style=\"min-width: 72px; text-align: center;\"\n        class=\"radioButtonGender\"\n        [value]=\"data.value\"\n      >\n        <span style=\"white-space: pre-line;\" class=\"forRadioLabel\" [ngStyle]=\"{\n    '--radio-button-font-weight': field()?.controlStyle?.fontWeight,\n    '--radio-button-font-size': field()?.controlStyle?.fontSize,\n    '--radio-button-font-color': field()?.controlStyle?.color,\n  }\">{{ data.label }}\n  <img class=\"radio-btn-icon\" *ngIf=\"field()?.imageUrl\" [src]=\"field()?.imageUrl\" alt=\"\">\n  </span>\n      </mat-radio-button>\n    </div>\n  </mat-radio-group>\n  }\n  <div class=\"error-message\" *ngIf=\"false\">\n    {{field()?.validators?.patternMessage}}.\n</div>\n", styles: [".radio-selection-border{border:1px solid #ffbb00!important;background:#fffaeb!important}*{font-family:mulish!important}.field-lable{font-size:12px!important;font-weight:700!important;color:#444!important;margin-bottom:0!important;white-space:pre-wrap!important}.error-message{color:red}.radio-btn-group{display:flex;align-items:center;gap:1rem;align-self:stretch}::ng-deep .radio-btn-gender .mdc-form-field .mdc-radio{display:none!important}.radio-card-gender{box-shadow:none;border-color:var(--radio-button-border-color,#DADADA);border-width:var(--radio-button-border-width, 1px solid);background:var(--radio-button-background-color, #FFFFFF);display:flex;align-items:center;cursor:pointer;width:max-content!important;border-radius:var(--radio-button-border-radius, 6px)}.radio-card-gender.two-options{min-width:144px!important}::ng-deep .radioButtonGender .mdc-form-field .mdc-radio{display:none!important}.forRadioLabel{font-size:var(--radio-button-font-size, 12px)!important;font-weight:var(--radio-button-font-weight, 400);cursor:pointer;color:var(--radio-button-font-color, #444444)}.radio-btn-icon{margin-top:-2px;margin-left:4px}.selected-radio-btn{border:1px solid #ffbb00!important}.disable-radio-btn{background:#f5f5f5;pointer-events:none;cursor:none}\n"] }]
+                    ], template: "<label class=\"field-lable\"  *ngIf=\"field() && field()?.isVisible && field().isShowLabel\" [ngStyle]=\"{\n  }\">{{field()?.label}}<span class=\"error-message\" *ngIf=\"field()?.validators?.isRequired\">*</span>\n  <span [appTooltipTemplate]=\"HtmlContent\" arrowPosition=\"left\" tooltipPosition=\"bottom\">\n    <img [src]=\"field().configData?.labelIconUrl\" class=\"toggle-img mx-1\" />\n  </span>\n  <ng-template #HtmlContent>\n    <span [innerHTML]=\"field().configData?.tooltipMessage\"></span>\n  </ng-template>\n  </label>\n  @if(reactiveFormControlobject()) {\n     <mat-radio-group class=\"w-100\" *ngIf=\"field() && field()?.isVisible\"\n    class=\"radio-btn-group radio-btn-gender\"\n    [required]=\"field()?.validators?.isRequired\"\n    [value]=\"inputValue\"\n    [formControl]=\"reactiveFormControlobject()\"\n    (change)=\"onRadioGroupChange($event)\"\n    >\n    <div\n      class=\"card radio-card-gender py-auto px-1\"\n      *ngFor=\"let data of field()?.options\"\n      [ngClass]=\"{'disable-radio-btn': field()?.isDisable || reactiveFormControlobject?.disabled, 'two-options': field()?.options?.length === 2}\"\n      (click)=\"toggleRadio(data.value, $event)\"\n       [ngStyle]=\"{\n    '--radio-button-border-color': inputValue === data.value ? field()?.controlStyle?.focusBorderColor : field()?.controlStyle?.borderColor,\n    '--radio-button-background-color': inputValue === data.value ? field()?.controlStyle?.focusBackground : field()?.controlStyle?.background,\n    '--radio-button-border-width': inputValue === data.value ? field()?.controlStyle?.focusBorderWidth : field()?.controlStyle?.borderWidth,\n    '--radio-button-border-radius': inputValue === data.value ? field()?.controlStyle?.borderRadius : field()?.controlStyle?.borderRadius,\n  }\"\n      >\n      <mat-radio-button\n        style=\"min-width: 72px; text-align: center;\"\n        class=\"radioButtonGender\"\n        [value]=\"data.value\"\n      >\n        <span style=\"white-space: pre-line;\" class=\"forRadioLabel\" [ngStyle]=\"{\n    '--radio-button-font-weight': field()?.controlStyle?.fontWeight,\n    '--radio-button-font-size': field()?.controlStyle?.fontSize,\n    '--radio-button-font-color': field()?.controlStyle?.color,\n  }\">{{ data.label }}\n  <img class=\"radio-btn-icon\" *ngIf=\"field()?.imageUrl\" [src]=\"field()?.imageUrl\" alt=\"\">\n  </span>\n      </mat-radio-button>\n    </div>\n  </mat-radio-group>\n  }@else {\n     <mat-radio-group class=\"w-100\" *ngIf=\"field() && field()?.isVisible\"\n    class=\"radio-btn-group radio-btn-gender\"\n    [required]=\"field()?.validators?.isRequired\"\n    [value]=\"inputValue\"\n    (change)=\"onRadioGroupChange($event)\"\n    >\n    <div\n      class=\"card radio-card-gender py-auto px-1\"\n      *ngFor=\"let data of field()?.options\"\n      [ngClass]=\"{'disable-radio-btn': field()?.isDisable, 'two-options': field()?.options?.length === 2}\"\n      (click)=\"toggleRadio(data.value, $event)\"\n       [ngStyle]=\"{\n    '--radio-button-border-color': inputValue === data.value ? field()?.controlStyle?.focusBorderColor : field()?.controlStyle?.borderColor,\n    '--radio-button-background-color': inputValue === data.value ? field()?.controlStyle?.focusBackground : field()?.controlStyle?.background,\n    '--radio-button-border-width': inputValue === data.value ? field()?.controlStyle?.focusBorderWidth : field()?.controlStyle?.borderWidth,\n    '--radio-button-border-radius': inputValue === data.value ? field()?.controlStyle?.borderRadius : field()?.controlStyle?.borderRadius,\n  }\"\n      >\n      <mat-radio-button\n        style=\"min-width: 72px; text-align: center;\"\n        class=\"radioButtonGender\"\n        [value]=\"data.value\"\n      >\n        <span style=\"white-space: pre-line;\" class=\"forRadioLabel\" [ngStyle]=\"{\n    '--radio-button-font-weight': field()?.controlStyle?.fontWeight,\n    '--radio-button-font-size': field()?.controlStyle?.fontSize,\n    '--radio-button-font-color': field()?.controlStyle?.color,\n  }\">{{ data.label }}\n  <img class=\"radio-btn-icon\" *ngIf=\"field()?.imageUrl\" [src]=\"field()?.imageUrl\" alt=\"\">\n  </span>\n      </mat-radio-button>\n    </div>\n  </mat-radio-group>\n  }\n  <div class=\"error-message\" *ngIf=\"false\">\n    {{field()?.validators?.patternMessage}}.\n</div>\n", styles: [".radio-selection-border{border:1px solid #ffbb00!important;background:#fffaeb!important}*{font-family:mulish!important}.field-lable{font-size:12px!important;font-weight:700!important;color:#444!important;margin-bottom:0!important;white-space:pre-wrap!important}.error-message{color:red}.radio-btn-group{display:flex;align-items:center;gap:1rem;align-self:stretch}::ng-deep .radio-btn-gender .mdc-form-field .mdc-radio{display:none!important}.radio-card-gender{box-shadow:none;border-color:var(--radio-button-border-color,#DADADA);border-width:var(--radio-button-border-width, 1px solid);background:var(--radio-button-background-color, #FFFFFF);display:flex;align-items:center;cursor:pointer;width:max-content!important;border-radius:var(--radio-button-border-radius, 6px)}.radio-card-gender.two-options{min-width:144px!important}::ng-deep .radioButtonGender .mdc-form-field .mdc-radio{display:none!important}.forRadioLabel{font-size:var(--radio-button-font-size, 12px)!important;font-weight:var(--radio-button-font-weight, 400);cursor:pointer;color:var(--radio-button-font-color, #444444)}.radio-btn-icon{margin-top:-2px;margin-left:4px}.selected-radio-btn{border:1px solid #ffbb00!important}.disable-radio-btn{background:#f5f5f5;pointer-events:none;cursor:none}\n"] }]
         }], ctorParameters: () => [{ type: MasterControlService }], propDecorators: { change: [{
                 type: Output
             }] } });
@@ -1864,17 +1865,17 @@ class SelectTextboxComponent {
                 useExisting: SelectTextboxComponent,
                 multi: true
             }
-        ], ngImport: i0, template: "<label class=\"field-lable\" *ngIf=\"field() && field()?.isVisible && field().isShowLabel\"\n  >{{ field()?.label\n  }}<span style=\"color: red\" *ngIf=\"field() && field()?.validators?.isRequired\"\n    >*</span\n  ></label\n>\n<mat-form-field\n  class=\"w-100 auto-width\"\n  appearance=\"outline\"\n  *ngIf=\"field() && field()?.isVisible\"\n  [ngStyle]=\"{\n'--custom-border-color': field()?.controlStyle?.borderColor ,\n'--custom-border-width': field()?.controlStyle?.borderWidth ,\n'--custom-border-radius': field()?.controlStyle?.borderRadius ,\n'--custom-bg-color': field()?.controlStyle?.background ,\n'--custom-border-color-focus': field()?.controlStyle?.focusBorderColor ,\n'--custom-border-width-focus': field()?.controlStyle?.focusBorderWidth ,\n'--custom-bg-color-focus': field()?.controlStyle?.focusBackground ,\n'--custom-border-color-hover': field()?.controlStyle?.hoverBorderColor ,\n'--custom-border-width-hover': field()?.controlStyle?.hoverBorderWidth ,\n'--custom-border-color-error': field()?.controlStyle?.errorBorderColor ,\n'--custom-border-width-error': field()?.controlStyle?.errorBorderWidth ,\n'--custom-font-size': field()?.controlStyle?.fontSize ,\n'--custom-font-weight': field()?.controlStyle?.fontWeight ,\n'--custom-font-family': field()?.controlStyle?.fontFamily ,\n'--custom-font-color': field()?.controlStyle?.color ,\n'--custom-caret-color': field()?.controlStyle?.caretColor ,\n'--custom-font-color-disabled' : field()?.controlStyle?.disableColor ,\n'--custom-bg-color-disabled' : field()?.controlStyle?.disableBackground ,\n}\"\n>\n@if(reactiveFormControlobject()) {\n  <input\n    matInput\n    autocomplete=\"off\"\n    class=\"vertically-align-middle\"\n    [name]=\"field()?.fieldName\"\n    [id]=\"field()?.fieldName\"\n    [placeholder]=\"field()?.placeHolder\"\n    [maxLength]=\"field()?.validators?.maxLength\"\n    [minLength]=\"field()?.validators?.minLength\"\n    [disabled]=\"field()?.isDisable\"\n    [required]=\"field()?.validators?.isRequired\"\n    [pattern]=\"field()?.validators?.pattern\"\n    (input)=\"onInputChange($event)\"\n    (blur)=\"onInputBlur()\"\n    [value]=\"inputValue\"\n    [formControl]=\"reactiveFormControlobject()\"\n   />\n}@else {\n  <input\n    matInput\n    autocomplete=\"off\"\n    [name]=\"field()?.fieldName\"\n    [id]=\"field()?.fieldName\"\n    class=\"vertically-align-middle\"\n    [placeholder]=\"field()?.placeHolder\"\n    [maxLength]=\"field()?.validators?.maxLength\"\n    [minLength]=\"field()?.validators?.minLength\"\n    [disabled]=\"field()?.isDisable\"\n    [required]=\"field()?.validators?.isRequired\"\n    [pattern]=\"field()?.validators?.pattern\"\n    (input)=\"onInputChange($event)\"\n    (blur)=\"onInputBlur()\"\n    [value]=\"inputValue\"\n   />\n}\n  <span matPrefix class=\"rupee-symbol\" [hidden]=\"this.field()?.configData?.isHideRupeeSymbol\">\u20B9</span>\n  <div matSuffix class=\"input-select\">\n    <!-- <mat-form-field> -->\n      <mat-select\n        [value]=\"selectValue\"\n        [disabled]=\"field()?.configData?.isDisableDropdown\"\n        (selectionChange)=\"onSelectChange($event)\"\n        (openedChange)=\"onSelectOpened($event)\">\n        <mat-option *ngFor=\"let options of field()?.options\" [value]=\"options.value\">\n          {{ options.label }}\n        </mat-option>\n      </mat-select>\n    <!-- </mat-form-field> -->\n  </div>\n  <!-- <span matSuffix class=\"mx-3 right-amount-text\"> \u20B9 3.50 L </span> -->\n</mat-form-field>\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}::ng-deep .mat-mdc-select-arrow{border-style:solid!important;border-width:0 2px 2px 0!important;border-right:2px solid!important;content:\"\"!important;display:inline-block!important;padding:3px!important;transform:rotate(45deg)!important;vertical-align:middle!important;width:unset!important;height:unset!important;color:#444!important}::ng-deep .mat-mdc-form-field.mat-focused.mat-primary .mat-mdc-select-arrow{color:#fb0}::ng-deep .mat-mdc-select-arrow svg{display:none!important}::ng-deep .cdk-overlay-pane:not(.mat-mdc-select-panel-above) div.mat-mdc-select-panel{background:#fff!important}::ng-deep div.mat-mdc-select-panel{background:#fff!important}::ng-deep .mat-mdc-option.mdc-list-item{background:#fff!important;color:#444!important;font-weight:400}::ng-deep .mat-mdc-form-field.mat-focused .mat-mdc-select-arrow{color:#fb0!important}::ng-deep .mat-mdc-option:focus.mdc-list-item{background:#fffaeb!important;border-left:4px solid #fb0;font-weight:600;color:#444!important;border-radius:3px}::ng-deep .mat-mdc-option.mat-mdc-option-active.mdc-list-item{background:#fffaeb!important;border-left:4px solid #fb0;font-weight:600;color:#444!important;border-radius:3px}::ng-deep .mat-mdc-option.mdc-list-item{background:var(--custom-select-option-background-color, #fff)!important;color:var(--custom-select-option-font-color, #444)!important;font-weight:var(--custom-select-option-font-weight, 400)!important}::ng-deep .mat-mdc-option:focus.mdc-list-item{background:var(--custom-select-option-background-color-focus, #fffaeb)!important;color:var(--custom-select-option-font-color-focus, #444)!important;font-weight:var(--custom-select-option-font-weight-focus, 600)!important;border-left:var(--custom-select-option-border-left-focus, 4px solid #fb0)!important;border-radius:var(--custom-select-option-border-radius-focus, 3px)!important}::ng-deep .mat-mdc-option.mat-mdc-option-active.mdc-list-item{background:var(--custom-select-option-background-color-focus, #fffaeb)!important;color:var(--custom-select-option-font-color-focus, #444)!important;font-weight:var(--custom-select-option-font-weight-focus, 600)!important;border-left:var(--custom-select-option-border-left-focus, 4px solid #fb0)!important;border-radius:var(--custom-select-option-border-radius-focus, 3px)!important}::ng-deep .mat-mdc-option .mdc-list-item__primary-text{font-size:var(--custom-font-size, 12px)!important}::ng-deep .cdk-overlay-pane:not(.mat-mdc-select-panel-above) div.mat-mdc-select-panel{padding:0!important;background:#fafafa!important}::ng-deep .mat-mdc-option .mdc-list-item__primary-text{font-size:12px!important}::ng-deep .mat-mdc-form-field.mat-focused.mat-primary .mat-select-arrow{color:#fb0}::ng-deep .mat-mdc-select-panel-above div.mat-mdc-select-panel{padding:0!important}::ng-deep .mat-mdc-optgroup-label{background:#f5f5f5;color:#444;font-weight:800}::ng-deep .mat-mdc-autocomplete-panel.mat-mdc-autocomplete-visible{padding:0!important;background:#fff!important}::ng-deep .mat-mdc-option.mdc-list-item--selected:not(.mdc-list-item--disabled):not(.mat-mdc-option-multiple){background:#fffaeb!important;border-left:4px solid #fb0;font-weight:600!important;color:#444!important;border-radius:3px}::ng-deep .mat-mdc-option.mdc-list-item--selected:not(.mdc-list-item--disabled) .mdc-list-item__primary-text{color:unset!important}::ng-deep .mat-mdc-option .mat-pseudo-checkbox-minimal{display:none!important}::ng-deep .mat-mdc-form-field .mat-mdc-select-placeholder{color:#8f8f8f!important;font-size:12px!important;vertical-align:sub}*{font-family:mulish!important}.input-select{height:30px;background:#f5f5f5;padding:4px 8px;border-radius:0 6px 6px 0;transform:translate(-1px);border-left:1.5px solid #dadada}.input-select,.mat-mdc-select-trigger{bottom:3px;gap:4px}:host ::ng-deep .input-select .mat-mdc-select-arrow{color:#8f8f8f!important}.vertically-align-middle{vertical-align:middle}::ng-deep .auto-width .mat-mdc-form-field-infix{width:auto!important}@media screen and (max-width: 768px){::ng-deep .mat-mdc-form-field .mat-mdc-select-placeholder{font-size:14px!important}::ng-deep .mat-mdc-option .mdc-list-item__primary-text{font-size:var(--custom-font-size, 14px)!important}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-text-field__input{font-size:14px!important}}\n"], dependencies: [{ kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i3.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i6.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
+        ], ngImport: i0, template: "<label class=\"field-lable\" *ngIf=\"field() && field()?.isVisible && field().isShowLabel\"\n  >{{ field()?.label\n  }}<span style=\"color: red\" *ngIf=\"field() && field()?.validators?.isRequired\"\n    >*</span\n  >\n  <span [appTooltipTemplate]=\"HtmlContent\" arrowPosition=\"left\" tooltipPosition=\"bottom\">\n    <img [src]=\"field().configData?.labelIconUrl\" class=\"toggle-img mx-1\" />\n  </span>\n  <ng-template #HtmlContent>\n    <span [innerHTML]=\"field().configData?.tooltipMessage\"></span>\n  </ng-template>\n  </label\n>\n<mat-form-field\n  class=\"w-100 auto-width\"\n  appearance=\"outline\"\n  *ngIf=\"field() && field()?.isVisible\"\n  [ngStyle]=\"{\n'--custom-border-color': field()?.controlStyle?.borderColor ,\n'--custom-border-width': field()?.controlStyle?.borderWidth ,\n'--custom-border-radius': field()?.controlStyle?.borderRadius ,\n'--custom-bg-color': field()?.controlStyle?.background ,\n'--custom-border-color-focus': field()?.controlStyle?.focusBorderColor ,\n'--custom-border-width-focus': field()?.controlStyle?.focusBorderWidth ,\n'--custom-bg-color-focus': field()?.controlStyle?.focusBackground ,\n'--custom-border-color-hover': field()?.controlStyle?.hoverBorderColor ,\n'--custom-border-width-hover': field()?.controlStyle?.hoverBorderWidth ,\n'--custom-border-color-error': field()?.controlStyle?.errorBorderColor ,\n'--custom-border-width-error': field()?.controlStyle?.errorBorderWidth ,\n'--custom-font-size': field()?.controlStyle?.fontSize ,\n'--custom-font-weight': field()?.controlStyle?.fontWeight ,\n'--custom-font-family': field()?.controlStyle?.fontFamily ,\n'--custom-font-color': field()?.controlStyle?.color ,\n'--custom-caret-color': field()?.controlStyle?.caretColor ,\n'--custom-font-color-disabled' : field()?.controlStyle?.disableColor ,\n'--custom-bg-color-disabled' : field()?.controlStyle?.disableBackground ,\n}\"\n>\n@if(reactiveFormControlobject()) {\n  <input\n    matInput\n    autocomplete=\"off\"\n    class=\"vertically-align-middle\"\n    [name]=\"field()?.fieldName\"\n    [id]=\"field()?.fieldName\"\n    [placeholder]=\"field()?.placeHolder\"\n    [maxLength]=\"field()?.validators?.maxLength\"\n    [minLength]=\"field()?.validators?.minLength\"\n    [disabled]=\"field()?.isDisable\"\n    [required]=\"field()?.validators?.isRequired\"\n    [pattern]=\"field()?.validators?.pattern\"\n    (input)=\"onInputChange($event)\"\n    (blur)=\"onInputBlur()\"\n    [value]=\"inputValue\"\n    [formControl]=\"reactiveFormControlobject()\"\n   />\n}@else {\n  <input\n    matInput\n    autocomplete=\"off\"\n    [name]=\"field()?.fieldName\"\n    [id]=\"field()?.fieldName\"\n    class=\"vertically-align-middle\"\n    [placeholder]=\"field()?.placeHolder\"\n    [maxLength]=\"field()?.validators?.maxLength\"\n    [minLength]=\"field()?.validators?.minLength\"\n    [disabled]=\"field()?.isDisable\"\n    [required]=\"field()?.validators?.isRequired\"\n    [pattern]=\"field()?.validators?.pattern\"\n    (input)=\"onInputChange($event)\"\n    (blur)=\"onInputBlur()\"\n    [value]=\"inputValue\"\n   />\n}\n  <span matPrefix class=\"rupee-symbol\" [hidden]=\"this.field()?.configData?.isHideRupeeSymbol\">\u20B9</span>\n  <div matSuffix class=\"input-select\">\n    <!-- <mat-form-field> -->\n      <mat-select\n        [value]=\"selectValue\"\n        [disabled]=\"field()?.configData?.isDisableDropdown\"\n        (selectionChange)=\"onSelectChange($event)\"\n        (openedChange)=\"onSelectOpened($event)\">\n        <mat-option *ngFor=\"let options of field()?.options\" [value]=\"options.value\">\n          {{ options.label }}\n        </mat-option>\n      </mat-select>\n    <!-- </mat-form-field> -->\n  </div>\n  <!-- <span matSuffix class=\"mx-3 right-amount-text\"> \u20B9 3.50 L </span> -->\n</mat-form-field>\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}::ng-deep .mat-mdc-select-arrow{border-style:solid!important;border-width:0 2px 2px 0!important;border-right:2px solid!important;content:\"\"!important;display:inline-block!important;padding:3px!important;transform:rotate(45deg)!important;vertical-align:middle!important;width:unset!important;height:unset!important;color:#444!important}::ng-deep .mat-mdc-form-field.mat-focused.mat-primary .mat-mdc-select-arrow{color:#fb0}::ng-deep .mat-mdc-select-arrow svg{display:none!important}::ng-deep .cdk-overlay-pane:not(.mat-mdc-select-panel-above) div.mat-mdc-select-panel{background:#fff!important}::ng-deep div.mat-mdc-select-panel{background:#fff!important}::ng-deep .mat-mdc-option.mdc-list-item{background:#fff!important;color:#444!important;font-weight:400}::ng-deep .mat-mdc-form-field.mat-focused .mat-mdc-select-arrow{color:#fb0!important}::ng-deep .mat-mdc-option:focus.mdc-list-item{background:#fffaeb!important;border-left:4px solid #fb0;font-weight:600;color:#444!important;border-radius:3px}::ng-deep .mat-mdc-option.mat-mdc-option-active.mdc-list-item{background:#fffaeb!important;border-left:4px solid #fb0;font-weight:600;color:#444!important;border-radius:3px}::ng-deep .mat-mdc-option.mdc-list-item{background:var(--custom-select-option-background-color, #fff)!important;color:var(--custom-select-option-font-color, #444)!important;font-weight:var(--custom-select-option-font-weight, 400)!important}::ng-deep .mat-mdc-option:focus.mdc-list-item{background:var(--custom-select-option-background-color-focus, #fffaeb)!important;color:var(--custom-select-option-font-color-focus, #444)!important;font-weight:var(--custom-select-option-font-weight-focus, 600)!important;border-left:var(--custom-select-option-border-left-focus, 4px solid #fb0)!important;border-radius:var(--custom-select-option-border-radius-focus, 3px)!important}::ng-deep .mat-mdc-option.mat-mdc-option-active.mdc-list-item{background:var(--custom-select-option-background-color-focus, #fffaeb)!important;color:var(--custom-select-option-font-color-focus, #444)!important;font-weight:var(--custom-select-option-font-weight-focus, 600)!important;border-left:var(--custom-select-option-border-left-focus, 4px solid #fb0)!important;border-radius:var(--custom-select-option-border-radius-focus, 3px)!important}::ng-deep .mat-mdc-option .mdc-list-item__primary-text{font-size:var(--custom-font-size, 12px)!important}::ng-deep .cdk-overlay-pane:not(.mat-mdc-select-panel-above) div.mat-mdc-select-panel{padding:0!important;background:#fafafa!important}::ng-deep .mat-mdc-option .mdc-list-item__primary-text{font-size:12px!important}::ng-deep .mat-mdc-form-field.mat-focused.mat-primary .mat-select-arrow{color:#fb0}::ng-deep .mat-mdc-select-panel-above div.mat-mdc-select-panel{padding:0!important}::ng-deep .mat-mdc-optgroup-label{background:#f5f5f5;color:#444;font-weight:800}::ng-deep .mat-mdc-autocomplete-panel.mat-mdc-autocomplete-visible{padding:0!important;background:#fff!important}::ng-deep .mat-mdc-option.mdc-list-item--selected:not(.mdc-list-item--disabled):not(.mat-mdc-option-multiple){background:#fffaeb!important;border-left:4px solid #fb0;font-weight:600!important;color:#444!important;border-radius:3px}::ng-deep .mat-mdc-option.mdc-list-item--selected:not(.mdc-list-item--disabled) .mdc-list-item__primary-text{color:unset!important}::ng-deep .mat-mdc-option .mat-pseudo-checkbox-minimal{display:none!important}::ng-deep .mat-mdc-form-field .mat-mdc-select-placeholder{color:#8f8f8f!important;font-size:12px!important;vertical-align:sub}*{font-family:mulish!important}.input-select{height:30px;background:#f5f5f5;padding:4px 8px;border-radius:0 6px 6px 0;transform:translate(-1px);border-left:1.5px solid #dadada}.input-select,.mat-mdc-select-trigger{bottom:3px;gap:4px}:host ::ng-deep .input-select .mat-mdc-select-arrow{color:#8f8f8f!important}.vertically-align-middle{vertical-align:middle}::ng-deep .auto-width .mat-mdc-form-field-infix{width:auto!important}@media screen and (max-width: 768px){::ng-deep .mat-mdc-form-field .mat-mdc-select-placeholder{font-size:14px!important}::ng-deep .mat-mdc-option .mdc-list-item__primary-text{font-size:var(--custom-font-size, 14px)!important}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-text-field__input{font-size:14px!important}}\n"], dependencies: [{ kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i3.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i6.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4.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"] }, { kind: "directive", type: CustomizedTooltipDirective, selector: "[appTooltipTemplate]", inputs: ["appTooltipTemplate"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SelectTextboxComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-select-textbox', standalone: true, imports: [MatInputModule, MatSelectModule, MatFormFieldModule, CommonModule, MatInputModule, ReactiveFormsModule], providers: [
+            args: [{ selector: 'lib-select-textbox', standalone: true, imports: [MatInputModule, MatSelectModule, MatFormFieldModule, CommonModule, MatInputModule, ReactiveFormsModule, CustomizedTooltipDirective], providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: SelectTextboxComponent,
                             multi: true
                         }
-                    ], template: "<label class=\"field-lable\" *ngIf=\"field() && field()?.isVisible && field().isShowLabel\"\n  >{{ field()?.label\n  }}<span style=\"color: red\" *ngIf=\"field() && field()?.validators?.isRequired\"\n    >*</span\n  ></label\n>\n<mat-form-field\n  class=\"w-100 auto-width\"\n  appearance=\"outline\"\n  *ngIf=\"field() && field()?.isVisible\"\n  [ngStyle]=\"{\n'--custom-border-color': field()?.controlStyle?.borderColor ,\n'--custom-border-width': field()?.controlStyle?.borderWidth ,\n'--custom-border-radius': field()?.controlStyle?.borderRadius ,\n'--custom-bg-color': field()?.controlStyle?.background ,\n'--custom-border-color-focus': field()?.controlStyle?.focusBorderColor ,\n'--custom-border-width-focus': field()?.controlStyle?.focusBorderWidth ,\n'--custom-bg-color-focus': field()?.controlStyle?.focusBackground ,\n'--custom-border-color-hover': field()?.controlStyle?.hoverBorderColor ,\n'--custom-border-width-hover': field()?.controlStyle?.hoverBorderWidth ,\n'--custom-border-color-error': field()?.controlStyle?.errorBorderColor ,\n'--custom-border-width-error': field()?.controlStyle?.errorBorderWidth ,\n'--custom-font-size': field()?.controlStyle?.fontSize ,\n'--custom-font-weight': field()?.controlStyle?.fontWeight ,\n'--custom-font-family': field()?.controlStyle?.fontFamily ,\n'--custom-font-color': field()?.controlStyle?.color ,\n'--custom-caret-color': field()?.controlStyle?.caretColor ,\n'--custom-font-color-disabled' : field()?.controlStyle?.disableColor ,\n'--custom-bg-color-disabled' : field()?.controlStyle?.disableBackground ,\n}\"\n>\n@if(reactiveFormControlobject()) {\n  <input\n    matInput\n    autocomplete=\"off\"\n    class=\"vertically-align-middle\"\n    [name]=\"field()?.fieldName\"\n    [id]=\"field()?.fieldName\"\n    [placeholder]=\"field()?.placeHolder\"\n    [maxLength]=\"field()?.validators?.maxLength\"\n    [minLength]=\"field()?.validators?.minLength\"\n    [disabled]=\"field()?.isDisable\"\n    [required]=\"field()?.validators?.isRequired\"\n    [pattern]=\"field()?.validators?.pattern\"\n    (input)=\"onInputChange($event)\"\n    (blur)=\"onInputBlur()\"\n    [value]=\"inputValue\"\n    [formControl]=\"reactiveFormControlobject()\"\n   />\n}@else {\n  <input\n    matInput\n    autocomplete=\"off\"\n    [name]=\"field()?.fieldName\"\n    [id]=\"field()?.fieldName\"\n    class=\"vertically-align-middle\"\n    [placeholder]=\"field()?.placeHolder\"\n    [maxLength]=\"field()?.validators?.maxLength\"\n    [minLength]=\"field()?.validators?.minLength\"\n    [disabled]=\"field()?.isDisable\"\n    [required]=\"field()?.validators?.isRequired\"\n    [pattern]=\"field()?.validators?.pattern\"\n    (input)=\"onInputChange($event)\"\n    (blur)=\"onInputBlur()\"\n    [value]=\"inputValue\"\n   />\n}\n  <span matPrefix class=\"rupee-symbol\" [hidden]=\"this.field()?.configData?.isHideRupeeSymbol\">\u20B9</span>\n  <div matSuffix class=\"input-select\">\n    <!-- <mat-form-field> -->\n      <mat-select\n        [value]=\"selectValue\"\n        [disabled]=\"field()?.configData?.isDisableDropdown\"\n        (selectionChange)=\"onSelectChange($event)\"\n        (openedChange)=\"onSelectOpened($event)\">\n        <mat-option *ngFor=\"let options of field()?.options\" [value]=\"options.value\">\n          {{ options.label }}\n        </mat-option>\n      </mat-select>\n    <!-- </mat-form-field> -->\n  </div>\n  <!-- <span matSuffix class=\"mx-3 right-amount-text\"> \u20B9 3.50 L </span> -->\n</mat-form-field>\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}::ng-deep .mat-mdc-select-arrow{border-style:solid!important;border-width:0 2px 2px 0!important;border-right:2px solid!important;content:\"\"!important;display:inline-block!important;padding:3px!important;transform:rotate(45deg)!important;vertical-align:middle!important;width:unset!important;height:unset!important;color:#444!important}::ng-deep .mat-mdc-form-field.mat-focused.mat-primary .mat-mdc-select-arrow{color:#fb0}::ng-deep .mat-mdc-select-arrow svg{display:none!important}::ng-deep .cdk-overlay-pane:not(.mat-mdc-select-panel-above) div.mat-mdc-select-panel{background:#fff!important}::ng-deep div.mat-mdc-select-panel{background:#fff!important}::ng-deep .mat-mdc-option.mdc-list-item{background:#fff!important;color:#444!important;font-weight:400}::ng-deep .mat-mdc-form-field.mat-focused .mat-mdc-select-arrow{color:#fb0!important}::ng-deep .mat-mdc-option:focus.mdc-list-item{background:#fffaeb!important;border-left:4px solid #fb0;font-weight:600;color:#444!important;border-radius:3px}::ng-deep .mat-mdc-option.mat-mdc-option-active.mdc-list-item{background:#fffaeb!important;border-left:4px solid #fb0;font-weight:600;color:#444!important;border-radius:3px}::ng-deep .mat-mdc-option.mdc-list-item{background:var(--custom-select-option-background-color, #fff)!important;color:var(--custom-select-option-font-color, #444)!important;font-weight:var(--custom-select-option-font-weight, 400)!important}::ng-deep .mat-mdc-option:focus.mdc-list-item{background:var(--custom-select-option-background-color-focus, #fffaeb)!important;color:var(--custom-select-option-font-color-focus, #444)!important;font-weight:var(--custom-select-option-font-weight-focus, 600)!important;border-left:var(--custom-select-option-border-left-focus, 4px solid #fb0)!important;border-radius:var(--custom-select-option-border-radius-focus, 3px)!important}::ng-deep .mat-mdc-option.mat-mdc-option-active.mdc-list-item{background:var(--custom-select-option-background-color-focus, #fffaeb)!important;color:var(--custom-select-option-font-color-focus, #444)!important;font-weight:var(--custom-select-option-font-weight-focus, 600)!important;border-left:var(--custom-select-option-border-left-focus, 4px solid #fb0)!important;border-radius:var(--custom-select-option-border-radius-focus, 3px)!important}::ng-deep .mat-mdc-option .mdc-list-item__primary-text{font-size:var(--custom-font-size, 12px)!important}::ng-deep .cdk-overlay-pane:not(.mat-mdc-select-panel-above) div.mat-mdc-select-panel{padding:0!important;background:#fafafa!important}::ng-deep .mat-mdc-option .mdc-list-item__primary-text{font-size:12px!important}::ng-deep .mat-mdc-form-field.mat-focused.mat-primary .mat-select-arrow{color:#fb0}::ng-deep .mat-mdc-select-panel-above div.mat-mdc-select-panel{padding:0!important}::ng-deep .mat-mdc-optgroup-label{background:#f5f5f5;color:#444;font-weight:800}::ng-deep .mat-mdc-autocomplete-panel.mat-mdc-autocomplete-visible{padding:0!important;background:#fff!important}::ng-deep .mat-mdc-option.mdc-list-item--selected:not(.mdc-list-item--disabled):not(.mat-mdc-option-multiple){background:#fffaeb!important;border-left:4px solid #fb0;font-weight:600!important;color:#444!important;border-radius:3px}::ng-deep .mat-mdc-option.mdc-list-item--selected:not(.mdc-list-item--disabled) .mdc-list-item__primary-text{color:unset!important}::ng-deep .mat-mdc-option .mat-pseudo-checkbox-minimal{display:none!important}::ng-deep .mat-mdc-form-field .mat-mdc-select-placeholder{color:#8f8f8f!important;font-size:12px!important;vertical-align:sub}*{font-family:mulish!important}.input-select{height:30px;background:#f5f5f5;padding:4px 8px;border-radius:0 6px 6px 0;transform:translate(-1px);border-left:1.5px solid #dadada}.input-select,.mat-mdc-select-trigger{bottom:3px;gap:4px}:host ::ng-deep .input-select .mat-mdc-select-arrow{color:#8f8f8f!important}.vertically-align-middle{vertical-align:middle}::ng-deep .auto-width .mat-mdc-form-field-infix{width:auto!important}@media screen and (max-width: 768px){::ng-deep .mat-mdc-form-field .mat-mdc-select-placeholder{font-size:14px!important}::ng-deep .mat-mdc-option .mdc-list-item__primary-text{font-size:var(--custom-font-size, 14px)!important}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-text-field__input{font-size:14px!important}}\n"] }]
+                    ], template: "<label class=\"field-lable\" *ngIf=\"field() && field()?.isVisible && field().isShowLabel\"\n  >{{ field()?.label\n  }}<span style=\"color: red\" *ngIf=\"field() && field()?.validators?.isRequired\"\n    >*</span\n  >\n  <span [appTooltipTemplate]=\"HtmlContent\" arrowPosition=\"left\" tooltipPosition=\"bottom\">\n    <img [src]=\"field().configData?.labelIconUrl\" class=\"toggle-img mx-1\" />\n  </span>\n  <ng-template #HtmlContent>\n    <span [innerHTML]=\"field().configData?.tooltipMessage\"></span>\n  </ng-template>\n  </label\n>\n<mat-form-field\n  class=\"w-100 auto-width\"\n  appearance=\"outline\"\n  *ngIf=\"field() && field()?.isVisible\"\n  [ngStyle]=\"{\n'--custom-border-color': field()?.controlStyle?.borderColor ,\n'--custom-border-width': field()?.controlStyle?.borderWidth ,\n'--custom-border-radius': field()?.controlStyle?.borderRadius ,\n'--custom-bg-color': field()?.controlStyle?.background ,\n'--custom-border-color-focus': field()?.controlStyle?.focusBorderColor ,\n'--custom-border-width-focus': field()?.controlStyle?.focusBorderWidth ,\n'--custom-bg-color-focus': field()?.controlStyle?.focusBackground ,\n'--custom-border-color-hover': field()?.controlStyle?.hoverBorderColor ,\n'--custom-border-width-hover': field()?.controlStyle?.hoverBorderWidth ,\n'--custom-border-color-error': field()?.controlStyle?.errorBorderColor ,\n'--custom-border-width-error': field()?.controlStyle?.errorBorderWidth ,\n'--custom-font-size': field()?.controlStyle?.fontSize ,\n'--custom-font-weight': field()?.controlStyle?.fontWeight ,\n'--custom-font-family': field()?.controlStyle?.fontFamily ,\n'--custom-font-color': field()?.controlStyle?.color ,\n'--custom-caret-color': field()?.controlStyle?.caretColor ,\n'--custom-font-color-disabled' : field()?.controlStyle?.disableColor ,\n'--custom-bg-color-disabled' : field()?.controlStyle?.disableBackground ,\n}\"\n>\n@if(reactiveFormControlobject()) {\n  <input\n    matInput\n    autocomplete=\"off\"\n    class=\"vertically-align-middle\"\n    [name]=\"field()?.fieldName\"\n    [id]=\"field()?.fieldName\"\n    [placeholder]=\"field()?.placeHolder\"\n    [maxLength]=\"field()?.validators?.maxLength\"\n    [minLength]=\"field()?.validators?.minLength\"\n    [disabled]=\"field()?.isDisable\"\n    [required]=\"field()?.validators?.isRequired\"\n    [pattern]=\"field()?.validators?.pattern\"\n    (input)=\"onInputChange($event)\"\n    (blur)=\"onInputBlur()\"\n    [value]=\"inputValue\"\n    [formControl]=\"reactiveFormControlobject()\"\n   />\n}@else {\n  <input\n    matInput\n    autocomplete=\"off\"\n    [name]=\"field()?.fieldName\"\n    [id]=\"field()?.fieldName\"\n    class=\"vertically-align-middle\"\n    [placeholder]=\"field()?.placeHolder\"\n    [maxLength]=\"field()?.validators?.maxLength\"\n    [minLength]=\"field()?.validators?.minLength\"\n    [disabled]=\"field()?.isDisable\"\n    [required]=\"field()?.validators?.isRequired\"\n    [pattern]=\"field()?.validators?.pattern\"\n    (input)=\"onInputChange($event)\"\n    (blur)=\"onInputBlur()\"\n    [value]=\"inputValue\"\n   />\n}\n  <span matPrefix class=\"rupee-symbol\" [hidden]=\"this.field()?.configData?.isHideRupeeSymbol\">\u20B9</span>\n  <div matSuffix class=\"input-select\">\n    <!-- <mat-form-field> -->\n      <mat-select\n        [value]=\"selectValue\"\n        [disabled]=\"field()?.configData?.isDisableDropdown\"\n        (selectionChange)=\"onSelectChange($event)\"\n        (openedChange)=\"onSelectOpened($event)\">\n        <mat-option *ngFor=\"let options of field()?.options\" [value]=\"options.value\">\n          {{ options.label }}\n        </mat-option>\n      </mat-select>\n    <!-- </mat-form-field> -->\n  </div>\n  <!-- <span matSuffix class=\"mx-3 right-amount-text\"> \u20B9 3.50 L </span> -->\n</mat-form-field>\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}::ng-deep .mat-mdc-select-arrow{border-style:solid!important;border-width:0 2px 2px 0!important;border-right:2px solid!important;content:\"\"!important;display:inline-block!important;padding:3px!important;transform:rotate(45deg)!important;vertical-align:middle!important;width:unset!important;height:unset!important;color:#444!important}::ng-deep .mat-mdc-form-field.mat-focused.mat-primary .mat-mdc-select-arrow{color:#fb0}::ng-deep .mat-mdc-select-arrow svg{display:none!important}::ng-deep .cdk-overlay-pane:not(.mat-mdc-select-panel-above) div.mat-mdc-select-panel{background:#fff!important}::ng-deep div.mat-mdc-select-panel{background:#fff!important}::ng-deep .mat-mdc-option.mdc-list-item{background:#fff!important;color:#444!important;font-weight:400}::ng-deep .mat-mdc-form-field.mat-focused .mat-mdc-select-arrow{color:#fb0!important}::ng-deep .mat-mdc-option:focus.mdc-list-item{background:#fffaeb!important;border-left:4px solid #fb0;font-weight:600;color:#444!important;border-radius:3px}::ng-deep .mat-mdc-option.mat-mdc-option-active.mdc-list-item{background:#fffaeb!important;border-left:4px solid #fb0;font-weight:600;color:#444!important;border-radius:3px}::ng-deep .mat-mdc-option.mdc-list-item{background:var(--custom-select-option-background-color, #fff)!important;color:var(--custom-select-option-font-color, #444)!important;font-weight:var(--custom-select-option-font-weight, 400)!important}::ng-deep .mat-mdc-option:focus.mdc-list-item{background:var(--custom-select-option-background-color-focus, #fffaeb)!important;color:var(--custom-select-option-font-color-focus, #444)!important;font-weight:var(--custom-select-option-font-weight-focus, 600)!important;border-left:var(--custom-select-option-border-left-focus, 4px solid #fb0)!important;border-radius:var(--custom-select-option-border-radius-focus, 3px)!important}::ng-deep .mat-mdc-option.mat-mdc-option-active.mdc-list-item{background:var(--custom-select-option-background-color-focus, #fffaeb)!important;color:var(--custom-select-option-font-color-focus, #444)!important;font-weight:var(--custom-select-option-font-weight-focus, 600)!important;border-left:var(--custom-select-option-border-left-focus, 4px solid #fb0)!important;border-radius:var(--custom-select-option-border-radius-focus, 3px)!important}::ng-deep .mat-mdc-option .mdc-list-item__primary-text{font-size:var(--custom-font-size, 12px)!important}::ng-deep .cdk-overlay-pane:not(.mat-mdc-select-panel-above) div.mat-mdc-select-panel{padding:0!important;background:#fafafa!important}::ng-deep .mat-mdc-option .mdc-list-item__primary-text{font-size:12px!important}::ng-deep .mat-mdc-form-field.mat-focused.mat-primary .mat-select-arrow{color:#fb0}::ng-deep .mat-mdc-select-panel-above div.mat-mdc-select-panel{padding:0!important}::ng-deep .mat-mdc-optgroup-label{background:#f5f5f5;color:#444;font-weight:800}::ng-deep .mat-mdc-autocomplete-panel.mat-mdc-autocomplete-visible{padding:0!important;background:#fff!important}::ng-deep .mat-mdc-option.mdc-list-item--selected:not(.mdc-list-item--disabled):not(.mat-mdc-option-multiple){background:#fffaeb!important;border-left:4px solid #fb0;font-weight:600!important;color:#444!important;border-radius:3px}::ng-deep .mat-mdc-option.mdc-list-item--selected:not(.mdc-list-item--disabled) .mdc-list-item__primary-text{color:unset!important}::ng-deep .mat-mdc-option .mat-pseudo-checkbox-minimal{display:none!important}::ng-deep .mat-mdc-form-field .mat-mdc-select-placeholder{color:#8f8f8f!important;font-size:12px!important;vertical-align:sub}*{font-family:mulish!important}.input-select{height:30px;background:#f5f5f5;padding:4px 8px;border-radius:0 6px 6px 0;transform:translate(-1px);border-left:1.5px solid #dadada}.input-select,.mat-mdc-select-trigger{bottom:3px;gap:4px}:host ::ng-deep .input-select .mat-mdc-select-arrow{color:#8f8f8f!important}.vertically-align-middle{vertical-align:middle}::ng-deep .auto-width .mat-mdc-form-field-infix{width:auto!important}@media screen and (max-width: 768px){::ng-deep .mat-mdc-form-field .mat-mdc-select-placeholder{font-size:14px!important}::ng-deep .mat-mdc-option .mdc-list-item__primary-text{font-size:var(--custom-font-size, 14px)!important}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-text-field__input{font-size:14px!important}}\n"] }]
         }], ctorParameters: () => [{ type: MasterControlService }] });
 
 class OtpTextboxComponent {
@@ -3453,12 +3454,17 @@ class PayGetCardComponent {
     ptValue = 5;
     years = '2030';
     frequency = 'month';
+    payamountOptions = [
+        { amount: '₹62,000', percentage: '@6%' },
+        { amount: '₹66,000', percentage: '@8%' },
+        { amount: '₹72,000', percentage: '@10%' }
+    ];
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PayGetCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: PayGetCardComponent, isStandalone: true, selector: "lib-pay-get-card", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, payAmount: { classPropertyName: "payAmount", publicName: "payAmount", isSignal: false, isRequired: false, transformFunction: null }, premiumAmount: { classPropertyName: "premiumAmount", publicName: "premiumAmount", isSignal: false, isRequired: false, transformFunction: null }, ptValue: { classPropertyName: "ptValue", publicName: "ptValue", isSignal: false, isRequired: false, transformFunction: null }, years: { classPropertyName: "years", publicName: "years", isSignal: false, isRequired: false, transformFunction: null }, frequency: { classPropertyName: "frequency", publicName: "frequency", isSignal: false, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n  class=\"d-flex justify-content-between pay-card\"\n  [ngStyle]=\"{\n'--pay-card-border-color': field()?.controlStyle?.borderColor ,\n'--pay-card-border-width': field()?.controlStyle?.borderWidth ,\n'--pay-card-border-radius': field()?.controlStyle?.borderRadius ,\n'--pay-card-bg-color': field()?.controlStyle?.background ,\n'--pay-card-width': field()?.controlStyle?.width ,\n }\"\n *ngIf=\"field() && field()?.isVisible\"\n>\n  <div class=\"text-center mx-2\">\n    <span class=\"bold-label\">{{ field()?.placeHolder || 'Pay' }}</span> <br />\n    <span class=\"grey-label\">{{payAmount}}</span>\n  </div>\n  <div class=\"premium-card\">\n    <span class=\"light-label\"><b class=\"bold-label\">{{premiumAmount}}</b>/ {{frequency}}</span>\n    <br />\n    <span class=\"grey-label\">for {{ptValue}} years (till {{years}})</span>\n  </div>\n</div>\n", styles: [".pay-card{max-width:var(--pay-card-width , 100%)!important;max-height:62px;border:1px solid #f5f5f5;border-radius:var(--pay-card-border-radius , 8px)!important;background-color:var(--pay-card-bg-color , #f5f5f5)!important;padding:2px 4px 10px 10px;border-color:var(--pay-card-border-color , #f5f5f5)!important;border-width:var(--pay-card-border-width , none)!important}.grey-label{font-size:12px;font-weight:700;color:#696969;line-height:16px}.bold-label{font-size:.875rem;font-weight:700;line-height:20px;color:#444}.light-label{font-size:12px;font-weight:400;line-height:16px;color:#000}.premium-card{background:#fff;padding:0 6px 6px;height:54px;width:187px;border-radius:4px;text-align:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: PayGetCardComponent, isStandalone: true, selector: "lib-pay-get-card", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, payAmount: { classPropertyName: "payAmount", publicName: "payAmount", isSignal: false, isRequired: false, transformFunction: null }, premiumAmount: { classPropertyName: "premiumAmount", publicName: "premiumAmount", isSignal: false, isRequired: false, transformFunction: null }, ptValue: { classPropertyName: "ptValue", publicName: "ptValue", isSignal: false, isRequired: false, transformFunction: null }, years: { classPropertyName: "years", publicName: "years", isSignal: false, isRequired: false, transformFunction: null }, frequency: { classPropertyName: "frequency", publicName: "frequency", isSignal: false, isRequired: false, transformFunction: null }, payamountOptions: { classPropertyName: "payamountOptions", publicName: "payamountOptions", isSignal: false, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n  class=\"d-flex justify-content-between pay-card\"\n  [ngStyle]=\"{\n'--pay-card-border-color': field()?.controlStyle?.borderColor ,\n'--pay-card-border-width': field()?.controlStyle?.borderWidth ,\n'--pay-card-border-radius': field()?.controlStyle?.borderRadius ,\n'--pay-card-bg-color': field()?.controlStyle?.background ,\n'--pay-card-width': field()?.controlStyle?.width ,\n }\"\n *ngIf=\"field() && field()?.isVisible\"\n>\n  <div class=\"text-center mx-2\">\n    <span class=\"bold-label\">{{ field()?.placeHolder || 'Pay' }}</span> <br />\n    <span class=\"grey-label\">{{payAmount}}</span>\n  </div>\n  <div class=\"premium-card d-flex align-items-center justify-content-around\">\n    <ng-container *ngFor=\"let option of payamountOptions; let i = index; let isLast = last\">\n      <div class=\"value-card text-center\" *ngIf=\"field()?.configData?.isShowContent\">\n        <span class=\"showcontent-amount\">{{option.amount}}</span>\n        <button class=\"grey-button\">{{option.percentage}}</button>\n      </div>\n\n      <div class=\"separator-container\" *ngIf=\"field()?.configData?.isShowContent && !isLast\">\n        <span class=\"vertical-line\"></span>\n        <span class=\"or-text\">or</span>\n        <span class=\"vertical-line\"></span>\n      </div>\n    </ng-container>\n\n    <div class=\"d-flex flex-column text-center\">\n      <span class=\"light-label\"><b class=\"bold-label\">{{premiumAmount}}</b>/ {{frequency}}</span>\n      <span class=\"grey-label\">for {{ptValue}} years (till {{years}})</span>\n    </div>\n  </div>\n</div>\n", styles: [".pay-card{max-width:var(--pay-card-width , 100%)!important;max-height:62px;border:1px solid #f5f5f5;border-radius:var(--pay-card-border-radius , 8px)!important;background-color:var(--pay-card-bg-color , #f5f5f5)!important;padding:2px 4px 10px 10px;border-color:var(--pay-card-border-color , #f5f5f5)!important;border-width:var(--pay-card-border-width , none)!important}.grey-label{font-size:12px;font-weight:700;color:#696969;line-height:16px}.bold-label{font-size:.875rem;font-weight:700;line-height:20px;color:#444}.light-label{font-size:12px;font-weight:400;line-height:16px;color:#000}.premium-card{background:#fff;padding:6px 10px;height:54px;width:fit-content;border-radius:4px;text-align:center;display:flex;flex-direction:row;align-items:center;gap:8px}.showcontent-amount{font-weight:800;font-size:14px;color:#444;line-height:20px}.vertical-line{width:1px;height:20px;background-color:#ddd}.or-text{font-size:10px;font-weight:400;color:#8f8f8f;text-align:center;line-height:14px}.separator-container{display:flex;flex-direction:column;align-items:center}.grey-button{background-color:#ececec;border:none;border-radius:25px;padding:2px 12px;font-size:10px;font-weight:700;color:#696969;height:18px;min-width:50px;display:flex;align-items:center;line-height:14px}.value-card{display:flex;flex-direction:column;align-items:center;gap:4px}.value-card span{white-space:nowrap}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PayGetCardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-pay-get-card', standalone: true, imports: [CommonModule], template: "<div\n  class=\"d-flex justify-content-between pay-card\"\n  [ngStyle]=\"{\n'--pay-card-border-color': field()?.controlStyle?.borderColor ,\n'--pay-card-border-width': field()?.controlStyle?.borderWidth ,\n'--pay-card-border-radius': field()?.controlStyle?.borderRadius ,\n'--pay-card-bg-color': field()?.controlStyle?.background ,\n'--pay-card-width': field()?.controlStyle?.width ,\n }\"\n *ngIf=\"field() && field()?.isVisible\"\n>\n  <div class=\"text-center mx-2\">\n    <span class=\"bold-label\">{{ field()?.placeHolder || 'Pay' }}</span> <br />\n    <span class=\"grey-label\">{{payAmount}}</span>\n  </div>\n  <div class=\"premium-card\">\n    <span class=\"light-label\"><b class=\"bold-label\">{{premiumAmount}}</b>/ {{frequency}}</span>\n    <br />\n    <span class=\"grey-label\">for {{ptValue}} years (till {{years}})</span>\n  </div>\n</div>\n", styles: [".pay-card{max-width:var(--pay-card-width , 100%)!important;max-height:62px;border:1px solid #f5f5f5;border-radius:var(--pay-card-border-radius , 8px)!important;background-color:var(--pay-card-bg-color , #f5f5f5)!important;padding:2px 4px 10px 10px;border-color:var(--pay-card-border-color , #f5f5f5)!important;border-width:var(--pay-card-border-width , none)!important}.grey-label{font-size:12px;font-weight:700;color:#696969;line-height:16px}.bold-label{font-size:.875rem;font-weight:700;line-height:20px;color:#444}.light-label{font-size:12px;font-weight:400;line-height:16px;color:#000}.premium-card{background:#fff;padding:0 6px 6px;height:54px;width:187px;border-radius:4px;text-align:center}\n"] }]
+            args: [{ selector: 'lib-pay-get-card', standalone: true, imports: [CommonModule], template: "<div\n  class=\"d-flex justify-content-between pay-card\"\n  [ngStyle]=\"{\n'--pay-card-border-color': field()?.controlStyle?.borderColor ,\n'--pay-card-border-width': field()?.controlStyle?.borderWidth ,\n'--pay-card-border-radius': field()?.controlStyle?.borderRadius ,\n'--pay-card-bg-color': field()?.controlStyle?.background ,\n'--pay-card-width': field()?.controlStyle?.width ,\n }\"\n *ngIf=\"field() && field()?.isVisible\"\n>\n  <div class=\"text-center mx-2\">\n    <span class=\"bold-label\">{{ field()?.placeHolder || 'Pay' }}</span> <br />\n    <span class=\"grey-label\">{{payAmount}}</span>\n  </div>\n  <div class=\"premium-card d-flex align-items-center justify-content-around\">\n    <ng-container *ngFor=\"let option of payamountOptions; let i = index; let isLast = last\">\n      <div class=\"value-card text-center\" *ngIf=\"field()?.configData?.isShowContent\">\n        <span class=\"showcontent-amount\">{{option.amount}}</span>\n        <button class=\"grey-button\">{{option.percentage}}</button>\n      </div>\n\n      <div class=\"separator-container\" *ngIf=\"field()?.configData?.isShowContent && !isLast\">\n        <span class=\"vertical-line\"></span>\n        <span class=\"or-text\">or</span>\n        <span class=\"vertical-line\"></span>\n      </div>\n    </ng-container>\n\n    <div class=\"d-flex flex-column text-center\">\n      <span class=\"light-label\"><b class=\"bold-label\">{{premiumAmount}}</b>/ {{frequency}}</span>\n      <span class=\"grey-label\">for {{ptValue}} years (till {{years}})</span>\n    </div>\n  </div>\n</div>\n", styles: [".pay-card{max-width:var(--pay-card-width , 100%)!important;max-height:62px;border:1px solid #f5f5f5;border-radius:var(--pay-card-border-radius , 8px)!important;background-color:var(--pay-card-bg-color , #f5f5f5)!important;padding:2px 4px 10px 10px;border-color:var(--pay-card-border-color , #f5f5f5)!important;border-width:var(--pay-card-border-width , none)!important}.grey-label{font-size:12px;font-weight:700;color:#696969;line-height:16px}.bold-label{font-size:.875rem;font-weight:700;line-height:20px;color:#444}.light-label{font-size:12px;font-weight:400;line-height:16px;color:#000}.premium-card{background:#fff;padding:6px 10px;height:54px;width:fit-content;border-radius:4px;text-align:center;display:flex;flex-direction:row;align-items:center;gap:8px}.showcontent-amount{font-weight:800;font-size:14px;color:#444;line-height:20px}.vertical-line{width:1px;height:20px;background-color:#ddd}.or-text{font-size:10px;font-weight:400;color:#8f8f8f;text-align:center;line-height:14px}.separator-container{display:flex;flex-direction:column;align-items:center}.grey-button{background-color:#ececec;border:none;border-radius:25px;padding:2px 12px;font-size:10px;font-weight:700;color:#696969;height:18px;min-width:50px;display:flex;align-items:center;line-height:14px}.value-card{display:flex;flex-direction:column;align-items:center;gap:4px}.value-card span{white-space:nowrap}\n"] }]
         }], propDecorators: { payAmount: [{
                 type: Input
             }], premiumAmount: [{
@@ -3469,6 +3475,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 type: Input
             }], frequency: [{
                 type: Input
+            }], payamountOptions: [{
+                type: Input
             }] } });
 
 class InBuiltBenefitComponent {
@@ -7327,7 +7335,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) {\n  @case ('top-header') {\n    <lib-top-header [field]=\"field()\" />\n  }\n  @case ('footer') {\n    <lib-footer [field]=\"field()\" />\n  }\n  @case('footer-buttons')\n  {\n    <lib-footer-with-buttons [field]=\"field()\"></lib-footer-with-buttons>\n  }\n  @case('text') {\n   <lib-textbox [field]=\"field()\"></lib-textbox>\n  }\n  @case('select') {\n    <lib-select [field]=\"field()\"/>\n  }\n\n  @case('radio') {\n    <lib-radio [field]=\"field()\" />\n  }\n\n  @case('toggle') {\n    <lib-toggle [field]=\"field()\" />\n  }\n\n  @case('file') {\n    <lib-upload [field]=\"field()\" />\n  }\n\n  @case('date') {\n    <lib-dob [field]=\"field()\" />\n  }\n\n  @case('mobileNumber') {\n    <lib-mob-number [field]=\"field()\" />\n  }\n\n  @case('info') {\n    <lib-info [field]=\"field()\" />\n  }\n\n  @case('checkbox') {\n    <lib-checkbox [field]=\"field()\" />\n  }\n\n  @case('textarea') {\n    <lib-textarea [field]=\"field()\" />\n  }\n\n  @case ('button') {\n    <lib-button [field]=\"field()\" />\n  }\n\n  @case ('tab') {\n    <lib-tab [field]=\"field()\" />\n  }\n\n  @case ('autocomplete') {\n    <lib-autocomplete [field]=\"field()\" />\n  }\n\n  @case ('multipleSelect') {\n    <lib-multiple-select [field]=\"field()\" />\n  }\n\n  @case ('textboxWithSelect') {\n    <lib-select-textbox [field]=\"field()\" />\n  }\n\n  @case ('otpTextbox') {\n    <lib-otp-textbox [field]=\"field()\" />\n  }\n\n  @case ('amountTextbox') {\n    <lib-amount-textbox [field]=\"field()\" />\n  }\n\n  @case ('suffixTextbox') {\n    <lib-suffix-textbox [field]=\"field()\" />\n  }\n\n  @case ('otpMobNumber') {\n    <lib-otp-mob-number [field]=\"field()\" />\n  }\n\n  @case ('tagMobNumber') {\n    <lib-tag-mob-number [field]=\"field()\" />\n  }\n\n  @case ('dateWithAge') {\n     <lib-age-date [field]=\"field()\" />\n  }\n\n  @case ('additionButton') {\n    <lib-addition-button [field]=\"field()\" />\n  }\n\n  @case ('infoTextbox') {\n    <lib-info-textbox [field]=\"field()\" />\n  }\n\n  @case ('textboxWithImage') {\n    <lib-textbox-with-image [field]=\"field()\" />\n  }\n\n  @case ('emailWithDomain') {\n    <lib-email-with-domain [field]=\"field()\" />\n  }\n\n  @case ('imageUpload') {\n     <lib-image-upload [field]=\"field()\" />\n  }\n\n  @case ('downloadDocument') {\n     <lib-download-document [field]=\"field()\" />\n  }\n\n  @case ('addDocument') {\n    <lib-add-document [field]=\"field()\" />\n  }\n\n  @case ('hyperlink') {\n    <lib-hyperlink [field]=\"field()\" />\n  }\n\n  @case ('textboxWithUnderscore') {\n    <lib-textbox-with-underscore [field]=\"field()\" />\n  }\n\n  @case ('underscoreMobNumber') {\n    <lib-underscore-mob-number [field]=\"field()\" />\n  }\n\n  @case ('downloadIconButton') {\n    <lib-icon-button [field]=\"field()\" />\n  }\n\n  @case ('image') {\n    <lib-image [field]=\"field()\" />\n  }\n  @case ('stepper') {\n    <lib-stepper [field]=\"field()\" />\n  }\n   @case ('card') {\n    <lib-card [field]=\"field()\" />\n  }\n  @case ('hrLine') {\n    <lib-hr-line [field]=\"field()\" />\n  }\n  @case ('searchMultiSelect') {\n    <lib-search-multi-select [field]=\"field()\" />\n  }\n  @case ('subscriptTextbox') {\n    <lib-subscript-textbox [field]=\"field()\" />\n  }\n  @case ('label') {\n    <lib-label [field]=\"field()\" />\n  }\n  @case ('subHeading') {\n    <lib-sub-header [field]=\"field()\" />\n  }\n  @case ('heading') {\n    <lib-header [field]=\"field()\" />\n  }\n  @case ('table') {\n  <lib-table [field]=\"field()\" />\n  }\n  @case ('textboxWithText') {\n    <lib-textbox-with-text [field]=\"field()\" />\n  }\n    @case ('loader') {\n    <lib-loader [field]=\"field()\" />\n    }\n  @case ('discount') {\n    <lib-discount [field]=\"field()\" />\n  }\n  @case ('optionalBenefitCard') {\n    <lib-benefit-card [field]=\"field()\" />\n  }\n  @case ('errorSnackbar') {\n    <lib-error-snackbar [field]=\"field()\" />\n  }\n   @case ('warningSnackbar') {\n    <lib-warning-snackbar [field]=\"field()\" />\n  }\n   @case ('successSnackbar') {\n    <lib-success-snackbar [field]=\"field()\" />\n  }\n   @case ('neutralSnackbar') {\n    <lib-neutral-snackbar [field]=\"field()\" />\n  }\n  @case ('boldLabel') {\n    <lib-grey-label [field]=\"field()\" />\n  }\n  @case ('iframe') {\n    <lib-iframe [field]=\"field()\" />\n  }\n  @case ('toggleButton') {\n    <lib-toggle-button [field]=\"field()\" />\n  }\n  @case ('payGetCard') {\n    <lib-pay-get-card [field]=\"field()\"  />\n  }\n  @case ('inBuiltBenefit') {\n    <lib-in-built-benefit [field]=\"field()\" />\n  }\n  @case ('otherBenefit') {\n    <lib-other-benefits [field]=\"field()\" />\n  }\n  @case ('annuityRateLogo') {\n    <lib-annuity-rate-logo [field]=\"field()\" />\n  }\n  @case ('discountAnnuity') {\n    <lib-discount-v2 [field]=\"field()\" />\n  }\n  @case ('labelValue'){\n    <lib-label-value-card [field]=\"field()\" />\n  }\n  @case ('medicalQuestions'){\n    <lib-medial-questions [field]=\"field()\" />\n  }\n  @case ('nudge'){\n    <lib-page-nudge  [field]=\"field()\"/>\n  }\n  @case ('progressBar'){\n    <lib-progress-bar  [field]=\"field()\"/>\n  }\n  @case ('accordian'){\n    <lib-accordian  [field]=\"field()\"/>\n  }\n  @case ('miscInfo'){\n    <lib-miscellaneous-info-bar  [field]=\"field()\"/>\n  }\n  @case ('plainText'){\n    <lib-plain-text [field]=\"field()\"/>\n  }\n  @case ('menu'){\n    <lib-menu [field]=\"field()\" />\n  }\n  @case ('stepperWithArrow') {\n    <lib-stepper-with-arrow [field]=\"field()\" />\n  }\n  @case ('labelWithImage') {\n    <lib-label-with-image [field]=\"field()\" />\n  }\n  @case ('motorGlowPlanDetails') {\n    <lib-motor-glow-plan-details [field]=\"field()\" />\n  }\n  @case ('premiumToAnnuityCalculator') {\n    <lib-annuity-premium-calculator [field]=\"field()\" />\n  } @case ('footerProgressBar') {\n    <lib-footer-design [field]=\"field()\" />\n  }\n}\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", "infoClick"] }, { 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: ["documentUploaderField", "field", "reactiveFormControlobject"], outputs: ["filesChanged", "fileRemoved", "filePreview"] }, { 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", "selectionChanged", "valueChanged", "optionSelected"] }, { kind: "component", type: MultipleSelectComponent, selector: "lib-multiple-select", inputs: ["field", "reactiveFormControlobject"], outputs: ["selectionChange"] }, { kind: "component", type: SelectTextboxComponent, selector: "lib-select-textbox", inputs: ["field", "reactiveFormControlobject"], outputs: ["selectionChange"] }, { 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"], outputs: ["blur"] }, { 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"], outputs: ["blur", "valueChange", "dateSelected", "invalidDate"] }, { 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"], outputs: ["cardDetailsClicked"] }, { 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", "personUWOpenQuoteResponse", "defaultValues", "field"], outputs: ["questionsValueChange"] }, { 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", "currentStepValue", "autoProgress", "autoProgressDelay"], outputs: ["selectedStep"] }, { kind: "component", type: LabelWithImageComponent, selector: "lib-label-with-image", inputs: ["field"] }, { kind: "component", type: TopHeaderComponent, selector: "lib-top-header", inputs: ["field"] }, { kind: "component", type: FooterComponent, selector: "lib-footer", inputs: ["field"] }, { kind: "component", type: FooterWithButtonsComponent, selector: "lib-footer-with-buttons", inputs: ["field"] }, { kind: "component", type: MotorGlowPlanDetailsComponent, selector: "lib-motor-glow-plan-details", inputs: ["field"], outputs: ["editPlanClick"] }, { kind: "component", type: AnnuityPremiumCalculatorComponent, selector: "lib-annuity-premium-calculator", inputs: ["field", "premiumDetails"], outputs: ["onCalcualteButtonClick", "onGenerateSummaryClick", "onAnnuityPremiumChange", "onMinimumPremiumValueChange", "onAutioDebitValueChange", "onGuranteedAnnuityValueChange"] }, { kind: "component", type: FooterDesignComponent, selector: "lib-footer-design", 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) {\n  @case ('top-header') {\n    <lib-top-header [field]=\"field()\" />\n  }\n  @case ('footer') {\n    <lib-footer [field]=\"field()\" />\n  }\n  @case('footer-buttons')\n  {\n    <lib-footer-with-buttons [field]=\"field()\"></lib-footer-with-buttons>\n  }\n  @case('text') {\n   <lib-textbox [field]=\"field()\"></lib-textbox>\n  }\n  @case('select') {\n    <lib-select [field]=\"field()\"/>\n  }\n\n  @case('radio') {\n    <lib-radio [field]=\"field()\" />\n  }\n\n  @case('toggle') {\n    <lib-toggle [field]=\"field()\" />\n  }\n\n  @case('file') {\n    <lib-upload [field]=\"field()\" />\n  }\n\n  @case('date') {\n    <lib-dob [field]=\"field()\" />\n  }\n\n  @case('mobileNumber') {\n    <lib-mob-number [field]=\"field()\" />\n  }\n\n  @case('info') {\n    <lib-info [field]=\"field()\" />\n  }\n\n  @case('checkbox') {\n    <lib-checkbox [field]=\"field()\" />\n  }\n\n  @case('textarea') {\n    <lib-textarea [field]=\"field()\" />\n  }\n\n  @case ('button') {\n    <lib-button [field]=\"field()\" />\n  }\n\n  @case ('tab') {\n    <lib-tab [field]=\"field()\" />\n  }\n\n  @case ('autocomplete') {\n    <lib-autocomplete [field]=\"field()\" />\n  }\n\n  @case ('multipleSelect') {\n    <lib-multiple-select [field]=\"field()\" />\n  }\n\n  @case ('textboxWithSelect') {\n    <lib-select-textbox [field]=\"field()\" />\n  }\n\n  @case ('otpTextbox') {\n    <lib-otp-textbox [field]=\"field()\" />\n  }\n\n  @case ('amountTextbox') {\n    <lib-amount-textbox [field]=\"field()\" />\n  }\n\n  @case ('suffixTextbox') {\n    <lib-suffix-textbox [field]=\"field()\" />\n  }\n\n  @case ('otpMobNumber') {\n    <lib-otp-mob-number [field]=\"field()\" />\n  }\n\n  @case ('tagMobNumber') {\n    <lib-tag-mob-number [field]=\"field()\" />\n  }\n\n  @case ('dateWithAge') {\n     <lib-age-date [field]=\"field()\" />\n  }\n\n  @case ('additionButton') {\n    <lib-addition-button [field]=\"field()\" />\n  }\n\n  @case ('infoTextbox') {\n    <lib-info-textbox [field]=\"field()\" />\n  }\n\n  @case ('textboxWithImage') {\n    <lib-textbox-with-image [field]=\"field()\" />\n  }\n\n  @case ('emailWithDomain') {\n    <lib-email-with-domain [field]=\"field()\" />\n  }\n\n  @case ('imageUpload') {\n     <lib-image-upload [field]=\"field()\" />\n  }\n\n  @case ('downloadDocument') {\n     <lib-download-document [field]=\"field()\" />\n  }\n\n  @case ('addDocument') {\n    <lib-add-document [field]=\"field()\" />\n  }\n\n  @case ('hyperlink') {\n    <lib-hyperlink [field]=\"field()\" />\n  }\n\n  @case ('textboxWithUnderscore') {\n    <lib-textbox-with-underscore [field]=\"field()\" />\n  }\n\n  @case ('underscoreMobNumber') {\n    <lib-underscore-mob-number [field]=\"field()\" />\n  }\n\n  @case ('downloadIconButton') {\n    <lib-icon-button [field]=\"field()\" />\n  }\n\n  @case ('image') {\n    <lib-image [field]=\"field()\" />\n  }\n  @case ('stepper') {\n    <lib-stepper [field]=\"field()\" />\n  }\n   @case ('card') {\n    <lib-card [field]=\"field()\" />\n  }\n  @case ('hrLine') {\n    <lib-hr-line [field]=\"field()\" />\n  }\n  @case ('searchMultiSelect') {\n    <lib-search-multi-select [field]=\"field()\" />\n  }\n  @case ('subscriptTextbox') {\n    <lib-subscript-textbox [field]=\"field()\" />\n  }\n  @case ('label') {\n    <lib-label [field]=\"field()\" />\n  }\n  @case ('subHeading') {\n    <lib-sub-header [field]=\"field()\" />\n  }\n  @case ('heading') {\n    <lib-header [field]=\"field()\" />\n  }\n  @case ('table') {\n  <lib-table [field]=\"field()\" />\n  }\n  @case ('textboxWithText') {\n    <lib-textbox-with-text [field]=\"field()\" />\n  }\n    @case ('loader') {\n    <lib-loader [field]=\"field()\" />\n    }\n  @case ('discount') {\n    <lib-discount [field]=\"field()\" />\n  }\n  @case ('optionalBenefitCard') {\n    <lib-benefit-card [field]=\"field()\" />\n  }\n  @case ('errorSnackbar') {\n    <lib-error-snackbar [field]=\"field()\" />\n  }\n   @case ('warningSnackbar') {\n    <lib-warning-snackbar [field]=\"field()\" />\n  }\n   @case ('successSnackbar') {\n    <lib-success-snackbar [field]=\"field()\" />\n  }\n   @case ('neutralSnackbar') {\n    <lib-neutral-snackbar [field]=\"field()\" />\n  }\n  @case ('boldLabel') {\n    <lib-grey-label [field]=\"field()\" />\n  }\n  @case ('iframe') {\n    <lib-iframe [field]=\"field()\" />\n  }\n  @case ('toggleButton') {\n    <lib-toggle-button [field]=\"field()\" />\n  }\n  @case ('payGetCard') {\n    <lib-pay-get-card [field]=\"field()\"  />\n  }\n  @case ('inBuiltBenefit') {\n    <lib-in-built-benefit [field]=\"field()\" />\n  }\n  @case ('otherBenefit') {\n    <lib-other-benefits [field]=\"field()\" />\n  }\n  @case ('annuityRateLogo') {\n    <lib-annuity-rate-logo [field]=\"field()\" />\n  }\n  @case ('discountAnnuity') {\n    <lib-discount-v2 [field]=\"field()\" />\n  }\n  @case ('labelValue'){\n    <lib-label-value-card [field]=\"field()\" />\n  }\n  @case ('medicalQuestions'){\n    <lib-medial-questions [field]=\"field()\" />\n  }\n  @case ('nudge'){\n    <lib-page-nudge  [field]=\"field()\"/>\n  }\n  @case ('progressBar'){\n    <lib-progress-bar  [field]=\"field()\"/>\n  }\n  @case ('accordian'){\n    <lib-accordian  [field]=\"field()\"/>\n  }\n  @case ('miscInfo'){\n    <lib-miscellaneous-info-bar  [field]=\"field()\"/>\n  }\n  @case ('plainText'){\n    <lib-plain-text [field]=\"field()\"/>\n  }\n  @case ('menu'){\n    <lib-menu [field]=\"field()\" />\n  }\n  @case ('stepperWithArrow') {\n    <lib-stepper-with-arrow [field]=\"field()\" />\n  }\n  @case ('labelWithImage') {\n    <lib-label-with-image [field]=\"field()\" />\n  }\n  @case ('motorGlowPlanDetails') {\n    <lib-motor-glow-plan-details [field]=\"field()\" />\n  }\n  @case ('premiumToAnnuityCalculator') {\n    <lib-annuity-premium-calculator [field]=\"field()\" />\n  } @case ('footerProgressBar') {\n    <lib-footer-design [field]=\"field()\" />\n  }\n}\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", "infoClick"] }, { 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: ["documentUploaderField", "field", "reactiveFormControlobject"], outputs: ["filesChanged", "fileRemoved", "filePreview"] }, { 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", "selectionChanged", "valueChanged", "optionSelected"] }, { kind: "component", type: MultipleSelectComponent, selector: "lib-multiple-select", inputs: ["field", "reactiveFormControlobject"], outputs: ["selectionChange"] }, { kind: "component", type: SelectTextboxComponent, selector: "lib-select-textbox", inputs: ["field", "reactiveFormControlobject"], outputs: ["selectionChange"] }, { 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"], outputs: ["blur"] }, { 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"], outputs: ["blur", "valueChange", "dateSelected", "invalidDate"] }, { 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"], outputs: ["cardDetailsClicked"] }, { 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", "payamountOptions"] }, { 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", "personUWOpenQuoteResponse", "defaultValues", "field"], outputs: ["questionsValueChange"] }, { 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", "currentStepValue", "autoProgress", "autoProgressDelay"], outputs: ["selectedStep"] }, { kind: "component", type: LabelWithImageComponent, selector: "lib-label-with-image", inputs: ["field"] }, { kind: "component", type: TopHeaderComponent, selector: "lib-top-header", inputs: ["field"] }, { kind: "component", type: FooterComponent, selector: "lib-footer", inputs: ["field"] }, { kind: "component", type: FooterWithButtonsComponent, selector: "lib-footer-with-buttons", inputs: ["field"] }, { kind: "component", type: MotorGlowPlanDetailsComponent, selector: "lib-motor-glow-plan-details", inputs: ["field"], outputs: ["editPlanClick"] }, { kind: "component", type: AnnuityPremiumCalculatorComponent, selector: "lib-annuity-premium-calculator", inputs: ["field", "premiumDetails"], outputs: ["onCalcualteButtonClick", "onGenerateSummaryClick", "onAnnuityPremiumChange", "onMinimumPremiumValueChange", "onAutioDebitValueChange", "onGuranteedAnnuityValueChange"] }, { kind: "component", type: FooterDesignComponent, selector: "lib-footer-design", inputs: ["field"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MasterControlComponent, decorators: [{
             type: Component,