master-control 0.4.67 → 0.4.69

package/fesm2022/master-control.mjs

@@ -780,7 +780,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>\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 radio-btn-group radio-btn-gender ' + field()?.fieldName\" *ngIf=\"field() && field()?.isVisible\"\n    [required]=\"field()?.validators?.isRequired\"\n    [value]=\"inputValue\"\n    [formControl]=\"reactiveFormControlobject()\"\n    (change)=\"onRadioGroupChange($event)\"\n    [id]=\"field()?.fieldName\"\n    [name]=\"field()?.fieldName\"\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        [id]=\"field()?.fieldName + '_' + data.value\"\n        [name]=\"field()?.fieldName + '_' + 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 radio-btn-group radio-btn-gender ' + field()?.fieldName\" *ngIf=\"field() && field()?.isVisible\"\n    [required]=\"field()?.validators?.isRequired\"\n    [value]=\"inputValue\"\n    (change)=\"onRadioGroupChange($event)\"\n    [id]=\"field()?.fieldName\"\n    [name]=\"field()?.fieldName\"\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        [id]=\"field()?.fieldName + '_' + data.value\"\n        [name]=\"field()?.fieldName + '_' + 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}.toggle-img{width:12px;margin-left:8px!important}@media screen and (max-width: 768px){.toggle-img{width:16px}}.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}@media (max-width: 400px){.radio-card-gender.two-options{min-width:0!important;width:50%!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"] }] });
+        ], 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 radio-btn-group radio-btn-gender ' + field()?.fieldName\" *ngIf=\"field() && field()?.isVisible\"\n    [required]=\"field()?.validators?.isRequired\"\n    [value]=\"inputValue\"\n    [formControl]=\"reactiveFormControlobject()\"\n    (change)=\"onRadioGroupChange($event)\"\n    [id]=\"field()?.fieldName\"\n    [name]=\"field()?.fieldName\"\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 || data.disabled === true || data.disabled === 'true', 'two-options': field()?.options?.length === 2}\"\n      (click)=\"(data.disabled === true || data.disabled === 'true') ? null : 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        [disabled]=\"data.disabled === true || data.disabled === 'true'\"\n        [id]=\"field()?.fieldName + '_' + data.value\"\n        [name]=\"field()?.fieldName + '_' + 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 radio-btn-group radio-btn-gender ' + field()?.fieldName\" *ngIf=\"field() && field()?.isVisible\"\n    [required]=\"field()?.validators?.isRequired\"\n    [value]=\"inputValue\"\n    (change)=\"onRadioGroupChange($event)\"\n    [id]=\"field()?.fieldName\"\n    [name]=\"field()?.fieldName\"\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 || data.disabled === true || data.disabled === 'true', 'two-options': field()?.options?.length === 2}\"\n      (click)=\"(data.disabled === true || data.disabled === 'true') ? null : 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        [disabled]=\"data.disabled === true || data.disabled === 'true'\"\n        [id]=\"field()?.fieldName + '_' + data.value\"\n        [name]=\"field()?.fieldName + '_' + 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}.toggle-img{width:12px;margin-left:8px!important}@media screen and (max-width: 768px){.toggle-img{width:16px}}.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}@media (max-width: 400px){.radio-card-gender.two-options{min-width:0!important;width:50%!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,
@@ -796,7 +796,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                             useExisting: RadioComponent,
                             multi: true
                         }
-                    ], template: "<label class=\"field-lable\"  *ngIf=\"field() && field()?.isVisible && field().isShowLabel\" [ngStyle]=\"{\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 radio-btn-group radio-btn-gender ' + field()?.fieldName\" *ngIf=\"field() && field()?.isVisible\"\n    [required]=\"field()?.validators?.isRequired\"\n    [value]=\"inputValue\"\n    [formControl]=\"reactiveFormControlobject()\"\n    (change)=\"onRadioGroupChange($event)\"\n    [id]=\"field()?.fieldName\"\n    [name]=\"field()?.fieldName\"\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        [id]=\"field()?.fieldName + '_' + data.value\"\n        [name]=\"field()?.fieldName + '_' + 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 radio-btn-group radio-btn-gender ' + field()?.fieldName\" *ngIf=\"field() && field()?.isVisible\"\n    [required]=\"field()?.validators?.isRequired\"\n    [value]=\"inputValue\"\n    (change)=\"onRadioGroupChange($event)\"\n    [id]=\"field()?.fieldName\"\n    [name]=\"field()?.fieldName\"\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        [id]=\"field()?.fieldName + '_' + data.value\"\n        [name]=\"field()?.fieldName + '_' + 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}.toggle-img{width:12px;margin-left:8px!important}@media screen and (max-width: 768px){.toggle-img{width:16px}}.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}@media (max-width: 400px){.radio-card-gender.two-options{min-width:0!important;width:50%!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 radio-btn-group radio-btn-gender ' + field()?.fieldName\" *ngIf=\"field() && field()?.isVisible\"\n    [required]=\"field()?.validators?.isRequired\"\n    [value]=\"inputValue\"\n    [formControl]=\"reactiveFormControlobject()\"\n    (change)=\"onRadioGroupChange($event)\"\n    [id]=\"field()?.fieldName\"\n    [name]=\"field()?.fieldName\"\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 || data.disabled === true || data.disabled === 'true', 'two-options': field()?.options?.length === 2}\"\n      (click)=\"(data.disabled === true || data.disabled === 'true') ? null : 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        [disabled]=\"data.disabled === true || data.disabled === 'true'\"\n        [id]=\"field()?.fieldName + '_' + data.value\"\n        [name]=\"field()?.fieldName + '_' + 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 radio-btn-group radio-btn-gender ' + field()?.fieldName\" *ngIf=\"field() && field()?.isVisible\"\n    [required]=\"field()?.validators?.isRequired\"\n    [value]=\"inputValue\"\n    (change)=\"onRadioGroupChange($event)\"\n    [id]=\"field()?.fieldName\"\n    [name]=\"field()?.fieldName\"\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 || data.disabled === true || data.disabled === 'true', 'two-options': field()?.options?.length === 2}\"\n      (click)=\"(data.disabled === true || data.disabled === 'true') ? null : 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        [disabled]=\"data.disabled === true || data.disabled === 'true'\"\n        [id]=\"field()?.fieldName + '_' + data.value\"\n        [name]=\"field()?.fieldName + '_' + 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}.toggle-img{width:12px;margin-left:8px!important}@media screen and (max-width: 768px){.toggle-img{width:16px}}.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}@media (max-width: 400px){.radio-card-gender.two-options{min-width:0!important;width:50%!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
             }] } });
@@ -3716,16 +3716,16 @@ class PayGetCardComponent {
     years = '2030';
     frequency = 'month';
     payamountOptions = [
-        { amount: '₹62,000', percentage: '@6%' },
-        { amount: '₹66,000', percentage: '@8%' },
-        { amount: '₹72,000', percentage: '@10%' }
+        { amount: '₹62,000', percentage: 'Guaranteed' },
+        { amount: '₹66,000', percentage: 'Variable @<10%>' },
+        { amount: '₹72,000', percentage: 'Total @<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 }, 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</span>\n    </div>\n  </div>\n</div>\n", styles: [".pay-card{max-width:var(--pay-card-width, 100%)!important;max-height:65px;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;display:block}.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"] }] });
+    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    <div class=\"d-flex align-items-center justify-content-center\">\n    <span class=\"grey-label\"><{{payAmount}}></span>\n    <span [appTooltipTemplate]=\"currentTooltip\" arrowPosition=\"left\" tooltipPosition=\"bottom\"\n        *ngIf=\"field().configData?.infoimageUrl && field().configData?.tooltipText\">\n        <img [src]=\"field().configData?.infoimageUrl\" class=\"toggle-benefit-img mx-1\" />\n      </span>\n      <ng-template #currentTooltip>\n        <span [innerHTML]=\"field().configData?.tooltipText\"></span>\n      </ng-template>\n    </div>\n    <span class=\"left-right-label\" *ngIf=\"field()?.configData?.leftSubText\">{{field()?.configData?.leftSubText}}</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        <div class=\"grey-button\">{{option.percentage}}</div>\n      </div>\n\n      <ng-container *ngIf=\"field()?.configData?.isShowContent && !isLast\">\n      <span *ngIf=\"i !== payamountOptions.length - 2\" class=\"separator-icon\">+</span>\n      <span *ngIf=\"i === payamountOptions.length - 2\" class=\"separator-icon\">=</span>\n    </ng-container>\n    </ng-container>\n\n    <div class=\"d-flex flex-column text-center\" *ngIf=\"field()?.configData?.isShowLastPart\">\n      <span class=\"light-label\"><b class=\"bold-label\"><{{premiumAmount}}></b>/ <{{frequency}}></span>\n      <span class=\"grey-label\">for the payout{{ptValue}} years</span>\n      <span class=\"left-right-label\" *ngIf=\"field()?.configData?.rightSubText\">{{field()?.configData?.rightSubText}}</span>\n    </div>\n  </div>\n</div>\n", styles: [".pay-card{max-width:var(--pay-card-width, 100%)!important;max-height:65px;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;display:block}.left-right-label{font-size:10px;font-weight:700;color:#696969;display:block}.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}.toggle-benefit-img{width:10px;height:10px}.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}.separator-icon{font-size:12px;margin:0 8px;font-weight:700;color:#444}.grey-button{color:#696969;font-size:10px;font-weight:600;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"] }, { kind: "directive", type: CustomizedTooltipDirective, selector: "[appTooltipTemplate]", inputs: ["appTooltipTemplate"] }] });
 }
 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 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</span>\n    </div>\n  </div>\n</div>\n", styles: [".pay-card{max-width:var(--pay-card-width, 100%)!important;max-height:65px;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;display:block}.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"] }]
+            args: [{ selector: 'lib-pay-get-card', standalone: true, imports: [CommonModule, CustomizedTooltipDirective], 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    <div class=\"d-flex align-items-center justify-content-center\">\n    <span class=\"grey-label\"><{{payAmount}}></span>\n    <span [appTooltipTemplate]=\"currentTooltip\" arrowPosition=\"left\" tooltipPosition=\"bottom\"\n        *ngIf=\"field().configData?.infoimageUrl && field().configData?.tooltipText\">\n        <img [src]=\"field().configData?.infoimageUrl\" class=\"toggle-benefit-img mx-1\" />\n      </span>\n      <ng-template #currentTooltip>\n        <span [innerHTML]=\"field().configData?.tooltipText\"></span>\n      </ng-template>\n    </div>\n    <span class=\"left-right-label\" *ngIf=\"field()?.configData?.leftSubText\">{{field()?.configData?.leftSubText}}</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        <div class=\"grey-button\">{{option.percentage}}</div>\n      </div>\n\n      <ng-container *ngIf=\"field()?.configData?.isShowContent && !isLast\">\n      <span *ngIf=\"i !== payamountOptions.length - 2\" class=\"separator-icon\">+</span>\n      <span *ngIf=\"i === payamountOptions.length - 2\" class=\"separator-icon\">=</span>\n    </ng-container>\n    </ng-container>\n\n    <div class=\"d-flex flex-column text-center\" *ngIf=\"field()?.configData?.isShowLastPart\">\n      <span class=\"light-label\"><b class=\"bold-label\"><{{premiumAmount}}></b>/ <{{frequency}}></span>\n      <span class=\"grey-label\">for the payout{{ptValue}} years</span>\n      <span class=\"left-right-label\" *ngIf=\"field()?.configData?.rightSubText\">{{field()?.configData?.rightSubText}}</span>\n    </div>\n  </div>\n</div>\n", styles: [".pay-card{max-width:var(--pay-card-width, 100%)!important;max-height:65px;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;display:block}.left-right-label{font-size:10px;font-weight:700;color:#696969;display:block}.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}.toggle-benefit-img{width:10px;height:10px}.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}.separator-icon{font-size:12px;margin:0 8px;font-weight:700;color:#444}.grey-button{color:#696969;font-size:10px;font-weight:600;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: [{
@@ -3749,11 +3749,11 @@ class InBuiltBenefitComponent {
         this.service = service;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: InBuiltBenefitComponent, deps: [{ token: MasterControlService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: InBuiltBenefitComponent, isStandalone: true, selector: "lib-in-built-benefit", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, premiumAmount: { classPropertyName: "premiumAmount", publicName: "premiumAmount", isSignal: false, isRequired: false, transformFunction: null }, premiumAmountShort: { classPropertyName: "premiumAmountShort", publicName: "premiumAmountShort", isSignal: false, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"d-flex in-built-card\"\n [ngStyle]=\"{\n'--inbuilt-card-border-color': field()?.controlStyle?.borderColor ,\n'--inbuilt-card-border-width': field()?.controlStyle?.borderWidth ,\n'--inbuilt-card-border-radius': field()?.controlStyle?.borderRadius ,\n'--inbuilt-card-bg-color': field()?.controlStyle?.background ,\n'--inbuilt-card-width': field()?.controlStyle?.width ,\n }\"\n *ngIf=\"field() && field()?.isVisible\"\n>\n  <p class=\"w-100 top-box\">\n    <span class=\"top-benefit-card\">Benefits in Brief</span>\n  </p>\n  <div class=\"d-flex align-items-start gap-3\">\n    <img *ngIf=\"field()?.configData?.imageUrl\" [src]=\"field()?.configData?.imageUrl\" alt=\"Benefit Image\" class=\"benefit-img\" />\n    <div>\n      <span class=\"premium-header\" *ngIf=\"field()?.configData?.label\">{{ field()?.configData?.label }}</span> <br />\n      <span class=\"benefit-text normal-text\" *ngIf=\"field()?.configData?.subText\">\n        {{ field()?.configData?.subText }}\n      </span>\n      <div class=\"buit-in-benefit-text\">\n        <span class=\"benefit-text normal-text\" *ngIf=\"field()?.configData?.benefitprefixtext\"> {{ field()?.configData?.benefitprefixtext }} </span>\n        <span class=\"highlight\" *ngIf=\"field()?.configData?.benefitHighlighttext\">{{field()?.configData?.benefitHighlighttext}}\n          <span [appTooltipTemplate]=\"currentTooltip\" arrowPosition=\"left\" tooltipPosition=\"bottom\"\n        *ngIf=\"field().configData?.infoimageUrl && field().configData?.tooltipText\">\n        <img [src]=\"field().configData?.infoimageUrl\" class=\"toggle-img mx-1\" />\n      </span>\n      <ng-template #currentTooltip>\n        <span [innerHTML]=\"field().configData?.tooltipText\"></span>\n      </ng-template>\n        </span>\n      </div>\n      <br />\n      <span class=\"premium\" *ngIf=\"!this.service.checkIfValueIsEmpty(premiumAmount)\">\n        <b>{{ premiumAmount }}</b> ({{ premiumAmountShort }})\n      </span>\n    </div>\n  </div>\n  <div class=\"m-auto\">\n    <img *ngIf=\"field()?.imageUrl\" [src]=\"field().imageUrl\" alt=\"\" />\n  </div>\n</div>\n", styles: [".in-built-card{max-width:var(--inbuilt-card-width, 100%)!important;min-height:114px;border-radius:var(--inbuilt-card-border-radius, 12px)!important;border:1px solid #0bb68b;border-color:var(--inbuilt-card-border-color, #0bb68b)!important;border-width:var(--inbuilt-card-border-width, 1px)!important;background:var(--inbuilt-card-bg-color, #e6f7f3)!important;padding:12px 16px;position:relative}.premium-header{font-size:14px;font-weight:700;letter-spacing:0px;line-height:18px;color:#444}.benefit-text{font-size:12px;color:#696969;font-weight:700;letter-spacing:0%;line-height:16px}.premium{font-size:12px;padding:4px 16px;border-radius:4px;height:24px;width:113px;background:#fff;color:#444}.normal-text{font-weight:400}.bold-text{font-weight:700}.top-benefit-card{border-radius:25px;background:#fff;border:1px solid #ececec;height:26px;width:114px;padding:0 6px 5px 12px;font-size:12px;font-weight:400;color:#444;letter-spacing:0%;position:absolute;transform:translate(-6em,-2.2em)}.top-box{position:absolute;text-align:center}.buit-in-benefit-text{display:flex;align-items:center;gap:4px;white-space:nowrap}.highlight{color:#444;font-weight:700;font-size:12px;letter-spacing:0px;line-height:18px}.toggle-img{width:12px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: CustomizedTooltipDirective, selector: "[appTooltipTemplate]", inputs: ["appTooltipTemplate"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: InBuiltBenefitComponent, isStandalone: true, selector: "lib-in-built-benefit", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, premiumAmount: { classPropertyName: "premiumAmount", publicName: "premiumAmount", isSignal: false, isRequired: false, transformFunction: null }, premiumAmountShort: { classPropertyName: "premiumAmountShort", publicName: "premiumAmountShort", isSignal: false, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"d-flex in-built-card\"\n [ngStyle]=\"{\n'--inbuilt-card-border-color': field()?.controlStyle?.borderColor ,\n'--inbuilt-card-border-width': field()?.controlStyle?.borderWidth ,\n'--inbuilt-card-border-radius': field()?.controlStyle?.borderRadius ,\n'--inbuilt-card-bg-color': field()?.controlStyle?.background ,\n'--inbuilt-card-width': field()?.controlStyle?.width ,\n }\"\n *ngIf=\"field() && field()?.isVisible\"\n>\n  <p class=\"w-100 top-box\">\n    <span class=\"top-benefit-card\">Benefits in Brief</span>\n  </p>\n  <div class=\"d-flex align-items-start gap-3\">\n    <img *ngIf=\"field()?.configData?.imageUrl\" [src]=\"field()?.configData?.imageUrl\" alt=\"Benefit Image\" class=\"benefit-img\" />\n    <div>\n      <span class=\"premium-header\" *ngIf=\"field()?.configData?.label\">{{ field()?.configData?.label }}</span> <br />\n      <span class=\"benefit-text normal-text\" *ngIf=\"field()?.configData?.subText\">\n        {{ field()?.configData?.subText }}\n      </span>\n      <div class=\"buit-in-benefit-text\">\n        <span class=\"benefit-text normal-text\" *ngIf=\"field()?.configData?.benefitprefixtext\"> {{ field()?.configData?.benefitprefixtext }} </span>\n        <span class=\"highlight\" *ngIf=\"field()?.configData?.benefitHighlighttext\">{{field()?.configData?.benefitHighlighttext}}\n          <span [appTooltipTemplate]=\"currentTooltip\" arrowPosition=\"left\" tooltipPosition=\"bottom\"\n        *ngIf=\"field().configData?.infoimageUrl && field().configData?.tooltipText\">\n        <img [src]=\"field().configData?.infoimageUrl\" class=\"toggle-img mx-1\" />\n      </span>\n      <ng-template #currentTooltip>\n        <span [innerHTML]=\"field().configData?.tooltipText\"></span>\n      </ng-template>\n        </span>\n      </div>\n      <br />\n      <span class=\"premium\" *ngIf=\"!this.service.checkIfValueIsEmpty(premiumAmount)\">\n        <b>{{ premiumAmount }}</b> ({{ premiumAmountShort }})\n      </span>\n    </div>\n  </div>\n  <div class=\"m-auto\">\n    <img *ngIf=\"field()?.imageUrl\" [src]=\"field().imageUrl\" alt=\"\" />\n  </div>\n</div>\n", styles: [".in-built-card{max-width:var(--inbuilt-card-width, 100%)!important;min-height:114px;border-radius:var(--inbuilt-card-border-radius, 12px)!important;border:1px solid #0bb68b;border-color:var(--inbuilt-card-border-color, #0bb68b)!important;border-width:var(--inbuilt-card-border-width, 1px)!important;background:var(--inbuilt-card-bg-color, #e6f7f3)!important;padding:12px 16px;position:relative}.premium-header{font-size:14px;font-weight:700;letter-spacing:0px;line-height:18px;color:#444}.benefit-text{font-size:12px;color:#696969;font-weight:700;letter-spacing:0%;line-height:16px}.premium{font-size:12px;padding:4px 16px;border-radius:4px;height:24px;width:113px;background:#fff;color:#444}.normal-text{font-weight:400}.bold-text{font-weight:700}.top-benefit-card{border-radius:25px;background:#fff;border:1px solid #ececec;height:26px;width:114px;padding:0 6px 5px 12px;font-size:12px;font-weight:400;color:#444;letter-spacing:0%;position:absolute;transform:translate(-6em,-2.2em)}.top-box{position:absolute;text-align:center}.buit-in-benefit-text{display:flex;align-items:center;gap:4px;white-space:nowrap}.highlight{color:#444;font-weight:700;font-size:12px;letter-spacing:0px;line-height:18px}.toggle-benefit-img{width:10px;height:10px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: CustomizedTooltipDirective, selector: "[appTooltipTemplate]", inputs: ["appTooltipTemplate"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: InBuiltBenefitComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-in-built-benefit', standalone: true, imports: [CommonModule, CustomizedTooltipDirective], template: "<div class=\"d-flex in-built-card\"\n [ngStyle]=\"{\n'--inbuilt-card-border-color': field()?.controlStyle?.borderColor ,\n'--inbuilt-card-border-width': field()?.controlStyle?.borderWidth ,\n'--inbuilt-card-border-radius': field()?.controlStyle?.borderRadius ,\n'--inbuilt-card-bg-color': field()?.controlStyle?.background ,\n'--inbuilt-card-width': field()?.controlStyle?.width ,\n }\"\n *ngIf=\"field() && field()?.isVisible\"\n>\n  <p class=\"w-100 top-box\">\n    <span class=\"top-benefit-card\">Benefits in Brief</span>\n  </p>\n  <div class=\"d-flex align-items-start gap-3\">\n    <img *ngIf=\"field()?.configData?.imageUrl\" [src]=\"field()?.configData?.imageUrl\" alt=\"Benefit Image\" class=\"benefit-img\" />\n    <div>\n      <span class=\"premium-header\" *ngIf=\"field()?.configData?.label\">{{ field()?.configData?.label }}</span> <br />\n      <span class=\"benefit-text normal-text\" *ngIf=\"field()?.configData?.subText\">\n        {{ field()?.configData?.subText }}\n      </span>\n      <div class=\"buit-in-benefit-text\">\n        <span class=\"benefit-text normal-text\" *ngIf=\"field()?.configData?.benefitprefixtext\"> {{ field()?.configData?.benefitprefixtext }} </span>\n        <span class=\"highlight\" *ngIf=\"field()?.configData?.benefitHighlighttext\">{{field()?.configData?.benefitHighlighttext}}\n          <span [appTooltipTemplate]=\"currentTooltip\" arrowPosition=\"left\" tooltipPosition=\"bottom\"\n        *ngIf=\"field().configData?.infoimageUrl && field().configData?.tooltipText\">\n        <img [src]=\"field().configData?.infoimageUrl\" class=\"toggle-img mx-1\" />\n      </span>\n      <ng-template #currentTooltip>\n        <span [innerHTML]=\"field().configData?.tooltipText\"></span>\n      </ng-template>\n        </span>\n      </div>\n      <br />\n      <span class=\"premium\" *ngIf=\"!this.service.checkIfValueIsEmpty(premiumAmount)\">\n        <b>{{ premiumAmount }}</b> ({{ premiumAmountShort }})\n      </span>\n    </div>\n  </div>\n  <div class=\"m-auto\">\n    <img *ngIf=\"field()?.imageUrl\" [src]=\"field().imageUrl\" alt=\"\" />\n  </div>\n</div>\n", styles: [".in-built-card{max-width:var(--inbuilt-card-width, 100%)!important;min-height:114px;border-radius:var(--inbuilt-card-border-radius, 12px)!important;border:1px solid #0bb68b;border-color:var(--inbuilt-card-border-color, #0bb68b)!important;border-width:var(--inbuilt-card-border-width, 1px)!important;background:var(--inbuilt-card-bg-color, #e6f7f3)!important;padding:12px 16px;position:relative}.premium-header{font-size:14px;font-weight:700;letter-spacing:0px;line-height:18px;color:#444}.benefit-text{font-size:12px;color:#696969;font-weight:700;letter-spacing:0%;line-height:16px}.premium{font-size:12px;padding:4px 16px;border-radius:4px;height:24px;width:113px;background:#fff;color:#444}.normal-text{font-weight:400}.bold-text{font-weight:700}.top-benefit-card{border-radius:25px;background:#fff;border:1px solid #ececec;height:26px;width:114px;padding:0 6px 5px 12px;font-size:12px;font-weight:400;color:#444;letter-spacing:0%;position:absolute;transform:translate(-6em,-2.2em)}.top-box{position:absolute;text-align:center}.buit-in-benefit-text{display:flex;align-items:center;gap:4px;white-space:nowrap}.highlight{color:#444;font-weight:700;font-size:12px;letter-spacing:0px;line-height:18px}.toggle-img{width:12px}\n"] }]
+            args: [{ selector: 'lib-in-built-benefit', standalone: true, imports: [CommonModule, CustomizedTooltipDirective], template: "<div class=\"d-flex in-built-card\"\n [ngStyle]=\"{\n'--inbuilt-card-border-color': field()?.controlStyle?.borderColor ,\n'--inbuilt-card-border-width': field()?.controlStyle?.borderWidth ,\n'--inbuilt-card-border-radius': field()?.controlStyle?.borderRadius ,\n'--inbuilt-card-bg-color': field()?.controlStyle?.background ,\n'--inbuilt-card-width': field()?.controlStyle?.width ,\n }\"\n *ngIf=\"field() && field()?.isVisible\"\n>\n  <p class=\"w-100 top-box\">\n    <span class=\"top-benefit-card\">Benefits in Brief</span>\n  </p>\n  <div class=\"d-flex align-items-start gap-3\">\n    <img *ngIf=\"field()?.configData?.imageUrl\" [src]=\"field()?.configData?.imageUrl\" alt=\"Benefit Image\" class=\"benefit-img\" />\n    <div>\n      <span class=\"premium-header\" *ngIf=\"field()?.configData?.label\">{{ field()?.configData?.label }}</span> <br />\n      <span class=\"benefit-text normal-text\" *ngIf=\"field()?.configData?.subText\">\n        {{ field()?.configData?.subText }}\n      </span>\n      <div class=\"buit-in-benefit-text\">\n        <span class=\"benefit-text normal-text\" *ngIf=\"field()?.configData?.benefitprefixtext\"> {{ field()?.configData?.benefitprefixtext }} </span>\n        <span class=\"highlight\" *ngIf=\"field()?.configData?.benefitHighlighttext\">{{field()?.configData?.benefitHighlighttext}}\n          <span [appTooltipTemplate]=\"currentTooltip\" arrowPosition=\"left\" tooltipPosition=\"bottom\"\n        *ngIf=\"field().configData?.infoimageUrl && field().configData?.tooltipText\">\n        <img [src]=\"field().configData?.infoimageUrl\" class=\"toggle-img mx-1\" />\n      </span>\n      <ng-template #currentTooltip>\n        <span [innerHTML]=\"field().configData?.tooltipText\"></span>\n      </ng-template>\n        </span>\n      </div>\n      <br />\n      <span class=\"premium\" *ngIf=\"!this.service.checkIfValueIsEmpty(premiumAmount)\">\n        <b>{{ premiumAmount }}</b> ({{ premiumAmountShort }})\n      </span>\n    </div>\n  </div>\n  <div class=\"m-auto\">\n    <img *ngIf=\"field()?.imageUrl\" [src]=\"field().imageUrl\" alt=\"\" />\n  </div>\n</div>\n", styles: [".in-built-card{max-width:var(--inbuilt-card-width, 100%)!important;min-height:114px;border-radius:var(--inbuilt-card-border-radius, 12px)!important;border:1px solid #0bb68b;border-color:var(--inbuilt-card-border-color, #0bb68b)!important;border-width:var(--inbuilt-card-border-width, 1px)!important;background:var(--inbuilt-card-bg-color, #e6f7f3)!important;padding:12px 16px;position:relative}.premium-header{font-size:14px;font-weight:700;letter-spacing:0px;line-height:18px;color:#444}.benefit-text{font-size:12px;color:#696969;font-weight:700;letter-spacing:0%;line-height:16px}.premium{font-size:12px;padding:4px 16px;border-radius:4px;height:24px;width:113px;background:#fff;color:#444}.normal-text{font-weight:400}.bold-text{font-weight:700}.top-benefit-card{border-radius:25px;background:#fff;border:1px solid #ececec;height:26px;width:114px;padding:0 6px 5px 12px;font-size:12px;font-weight:400;color:#444;letter-spacing:0%;position:absolute;transform:translate(-6em,-2.2em)}.top-box{position:absolute;text-align:center}.buit-in-benefit-text{display:flex;align-items:center;gap:4px;white-space:nowrap}.highlight{color:#444;font-weight:700;font-size:12px;letter-spacing:0px;line-height:18px}.toggle-benefit-img{width:10px;height:10px}\n"] }]
         }], ctorParameters: () => [{ type: MasterControlService }], propDecorators: { premiumAmount: [{
                 type: Input
             }], premiumAmountShort: [{
@@ -3763,11 +3763,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
 class OtherBenefitsComponent {
     field = input.required();
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: OtherBenefitsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: OtherBenefitsComponent, isStandalone: true, selector: "lib-other-benefits", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"other-benefit-card d-flex gap-2\"\n [ngStyle]=\"{\n'--other-benefit-color-border-color': field()?.controlStyle?.borderColor ,\n'--other-benefit-color-border-width': field()?.controlStyle?.borderWidth ,\n'--other-benefit-color-border-radius': field()?.controlStyle?.borderRadius ,\n'--other-benefit-color-bg-color': field()?.controlStyle?.background\n }\"\n *ngIf=\"field() && field()?.isVisible\"\n>\n  <div class=\"w-100 top-box\">\n    <span class=\"top-benefit-card\">Additional Benefits</span>\n  </div>\n  @for (data of field()?.configData?.otherBenefits; track $index) {\n  <div class=\"sub-benefit-card\">\n    <div class=\"d-flex gap-2 align-items-start\">\n      <img [src]=\"data.imageUrl\" alt=\"\" class=\"benefit-icon\" />\n      <span class=\"header-txt\">{{ data.headerText }}</span>\n    </div>\n    <div class=\"highlight-box\" *ngIf=\"data.highlightText\">\n      {{data.highlightText}}\n    </div>\n    <div class=\"description-txt\" [innerHTML]=\"data.htmlInnerText\"></div>\n  </div>\n  }\n</div>\n", styles: [".other-benefit-card{min-height:142px;border:1px solid #DADADA;padding:24px 16px 20px;position:relative;border-color:var(--other-benefit-border-color, #DADADA)!important;border-width:var(--other-benefit-border-width, 1px)!important;background:var(--other-benefit-bg-color, #fff)!important;border-radius:.75rem;margin-top:20px}.top-benefit-card{border-radius:25px;background:#444;border:1px solid #444444;height:26px;padding:0 16px;font-size:12px;font-weight:400;color:#fff;letter-spacing:0%;display:inline-block}.top-box{position:absolute;top:-13px;left:0;text-align:center;width:100%}.sub-benefit-card{flex:1;padding:0 16px;display:flex;flex-direction:column;gap:8px}.sub-benefit-card:not(:last-child){border-right:1px solid #dddddd}.highlight-box{background-color:#e6f7f3;color:#444;padding:4px 8px;border-radius:4px;font-size:12px;font-weight:700;width:fit-content}.description-txt{font-size:12px;color:#696969;line-height:16px}.benefit-icon{width:20px;height:20px}::ng-deep .premium{font-size:12px;background:#fff;color:#696969}::ng-deep .tax-benefit-txt{font-size:12px;font-weight:400;line-height:16px;color:#696969;letter-spacing:0px}.header-txt{font-size:14px;font-weight:700;color:#444;line-height:18px;letter-spacing:0px}::ng-deep .annuity-rate-txt{font-size:12px!important;font-weight:700!important;line-height:16px!important;color:#696969!important;letter-spacing:0px!important}::ng-deep .normal-txt{font-size:12px!important;font-weight:400!important;line-height:16px!important;letter-spacing:0px!important}::ng-deep .db-txt{font-size:12px!important;letter-spacing:0px!important;line-height:16px!important;color:#696969!important}::ng-deep .bold-txt{font-weight:700!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: OtherBenefitsComponent, isStandalone: true, selector: "lib-other-benefits", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"other-benefit-card d-flex gap-2\"\n [ngStyle]=\"{\n'--other-benefit-color-border-color': field()?.controlStyle?.borderColor ,\n'--other-benefit-color-border-width': field()?.controlStyle?.borderWidth ,\n'--other-benefit-color-border-radius': field()?.controlStyle?.borderRadius ,\n'--other-benefit-color-bg-color': field()?.controlStyle?.background\n }\"\n *ngIf=\"field() && field()?.isVisible\"\n>\n  <div class=\"w-100 top-box\">\n    <span class=\"top-benefit-card\">Additional Benefits</span>\n  </div>\n  @for (data of field()?.configData?.otherBenefits; track $index) {\n  <div class=\"sub-benefit-card\" *ngIf=\"data.shouldShow\">\n    <div class=\"d-flex gap-2 align-items-start\">\n      <img [src]=\"data.imageUrl\" alt=\"\" class=\"benefit-icon\" />\n      <span class=\"header-txt\">{{ data.headerText }}</span>\n    </div>\n    <div class=\"highlight-box\" *ngIf=\"data.highlightText\">\n      {{data.highlightText}}\n    </div>\n    <div class=\"description-txt\" [innerHTML]=\"data.htmlInnerText\"></div>\n  </div>\n  }\n</div>\n", styles: [".other-benefit-card{min-height:142px;border:1px solid #DADADA;padding:24px 16px 20px;position:relative;border-color:var(--other-benefit-border-color, #DADADA)!important;border-width:var(--other-benefit-border-width, 1px)!important;background:var(--other-benefit-bg-color, #fff)!important;border-radius:.75rem;margin-top:20px}.top-benefit-card{border-radius:25px;background:#444;border:1px solid #444444;height:26px;padding:0 16px;font-size:12px;font-weight:400;color:#fff;letter-spacing:0%;display:inline-block}.top-box{position:absolute;top:-13px;left:0;text-align:center;width:100%}.sub-benefit-card{flex:1;padding:0 16px;display:flex;flex-direction:column;gap:8px}.sub-benefit-card:not(:last-child){border-right:1px solid #dddddd}.highlight-box{background-color:#e6f7f3;color:#444;padding:4px 8px;border-radius:4px;font-size:12px;font-weight:700;width:fit-content}.description-txt{font-size:12px;color:#696969;line-height:16px}.benefit-icon{width:20px;height:20px}::ng-deep .premium{font-size:12px;background:#fff;color:#696969}::ng-deep .tax-benefit-txt{font-size:12px;font-weight:400;line-height:16px;color:#696969;letter-spacing:0px}.header-txt{font-size:14px;font-weight:700;color:#444;line-height:18px;letter-spacing:0px}::ng-deep .annuity-rate-txt{font-size:12px!important;font-weight:700!important;line-height:16px!important;color:#696969!important;letter-spacing:0px!important}::ng-deep .normal-txt{font-size:12px!important;font-weight:400!important;line-height:16px!important;letter-spacing:0px!important}::ng-deep .db-txt{font-size:12px!important;letter-spacing:0px!important;line-height:16px!important;color:#696969!important}::ng-deep .bold-txt{font-weight:700!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: OtherBenefitsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-other-benefits', standalone: true, imports: [CommonModule], template: "<div class=\"other-benefit-card d-flex gap-2\"\n [ngStyle]=\"{\n'--other-benefit-color-border-color': field()?.controlStyle?.borderColor ,\n'--other-benefit-color-border-width': field()?.controlStyle?.borderWidth ,\n'--other-benefit-color-border-radius': field()?.controlStyle?.borderRadius ,\n'--other-benefit-color-bg-color': field()?.controlStyle?.background\n }\"\n *ngIf=\"field() && field()?.isVisible\"\n>\n  <div class=\"w-100 top-box\">\n    <span class=\"top-benefit-card\">Additional Benefits</span>\n  </div>\n  @for (data of field()?.configData?.otherBenefits; track $index) {\n  <div class=\"sub-benefit-card\">\n    <div class=\"d-flex gap-2 align-items-start\">\n      <img [src]=\"data.imageUrl\" alt=\"\" class=\"benefit-icon\" />\n      <span class=\"header-txt\">{{ data.headerText }}</span>\n    </div>\n    <div class=\"highlight-box\" *ngIf=\"data.highlightText\">\n      {{data.highlightText}}\n    </div>\n    <div class=\"description-txt\" [innerHTML]=\"data.htmlInnerText\"></div>\n  </div>\n  }\n</div>\n", styles: [".other-benefit-card{min-height:142px;border:1px solid #DADADA;padding:24px 16px 20px;position:relative;border-color:var(--other-benefit-border-color, #DADADA)!important;border-width:var(--other-benefit-border-width, 1px)!important;background:var(--other-benefit-bg-color, #fff)!important;border-radius:.75rem;margin-top:20px}.top-benefit-card{border-radius:25px;background:#444;border:1px solid #444444;height:26px;padding:0 16px;font-size:12px;font-weight:400;color:#fff;letter-spacing:0%;display:inline-block}.top-box{position:absolute;top:-13px;left:0;text-align:center;width:100%}.sub-benefit-card{flex:1;padding:0 16px;display:flex;flex-direction:column;gap:8px}.sub-benefit-card:not(:last-child){border-right:1px solid #dddddd}.highlight-box{background-color:#e6f7f3;color:#444;padding:4px 8px;border-radius:4px;font-size:12px;font-weight:700;width:fit-content}.description-txt{font-size:12px;color:#696969;line-height:16px}.benefit-icon{width:20px;height:20px}::ng-deep .premium{font-size:12px;background:#fff;color:#696969}::ng-deep .tax-benefit-txt{font-size:12px;font-weight:400;line-height:16px;color:#696969;letter-spacing:0px}.header-txt{font-size:14px;font-weight:700;color:#444;line-height:18px;letter-spacing:0px}::ng-deep .annuity-rate-txt{font-size:12px!important;font-weight:700!important;line-height:16px!important;color:#696969!important;letter-spacing:0px!important}::ng-deep .normal-txt{font-size:12px!important;font-weight:400!important;line-height:16px!important;letter-spacing:0px!important}::ng-deep .db-txt{font-size:12px!important;letter-spacing:0px!important;line-height:16px!important;color:#696969!important}::ng-deep .bold-txt{font-weight:700!important}\n"] }]
+            args: [{ selector: 'lib-other-benefits', standalone: true, imports: [CommonModule], template: "<div class=\"other-benefit-card d-flex gap-2\"\n [ngStyle]=\"{\n'--other-benefit-color-border-color': field()?.controlStyle?.borderColor ,\n'--other-benefit-color-border-width': field()?.controlStyle?.borderWidth ,\n'--other-benefit-color-border-radius': field()?.controlStyle?.borderRadius ,\n'--other-benefit-color-bg-color': field()?.controlStyle?.background\n }\"\n *ngIf=\"field() && field()?.isVisible\"\n>\n  <div class=\"w-100 top-box\">\n    <span class=\"top-benefit-card\">Additional Benefits</span>\n  </div>\n  @for (data of field()?.configData?.otherBenefits; track $index) {\n  <div class=\"sub-benefit-card\" *ngIf=\"data.shouldShow\">\n    <div class=\"d-flex gap-2 align-items-start\">\n      <img [src]=\"data.imageUrl\" alt=\"\" class=\"benefit-icon\" />\n      <span class=\"header-txt\">{{ data.headerText }}</span>\n    </div>\n    <div class=\"highlight-box\" *ngIf=\"data.highlightText\">\n      {{data.highlightText}}\n    </div>\n    <div class=\"description-txt\" [innerHTML]=\"data.htmlInnerText\"></div>\n  </div>\n  }\n</div>\n", styles: [".other-benefit-card{min-height:142px;border:1px solid #DADADA;padding:24px 16px 20px;position:relative;border-color:var(--other-benefit-border-color, #DADADA)!important;border-width:var(--other-benefit-border-width, 1px)!important;background:var(--other-benefit-bg-color, #fff)!important;border-radius:.75rem;margin-top:20px}.top-benefit-card{border-radius:25px;background:#444;border:1px solid #444444;height:26px;padding:0 16px;font-size:12px;font-weight:400;color:#fff;letter-spacing:0%;display:inline-block}.top-box{position:absolute;top:-13px;left:0;text-align:center;width:100%}.sub-benefit-card{flex:1;padding:0 16px;display:flex;flex-direction:column;gap:8px}.sub-benefit-card:not(:last-child){border-right:1px solid #dddddd}.highlight-box{background-color:#e6f7f3;color:#444;padding:4px 8px;border-radius:4px;font-size:12px;font-weight:700;width:fit-content}.description-txt{font-size:12px;color:#696969;line-height:16px}.benefit-icon{width:20px;height:20px}::ng-deep .premium{font-size:12px;background:#fff;color:#696969}::ng-deep .tax-benefit-txt{font-size:12px;font-weight:400;line-height:16px;color:#696969;letter-spacing:0px}.header-txt{font-size:14px;font-weight:700;color:#444;line-height:18px;letter-spacing:0px}::ng-deep .annuity-rate-txt{font-size:12px!important;font-weight:700!important;line-height:16px!important;color:#696969!important;letter-spacing:0px!important}::ng-deep .normal-txt{font-size:12px!important;font-weight:400!important;line-height:16px!important;letter-spacing:0px!important}::ng-deep .db-txt{font-size:12px!important;letter-spacing:0px!important;line-height:16px!important;color:#696969!important}::ng-deep .bold-txt{font-weight:700!important}\n"] }]
         }] });
 
 class AnnuityRateLogoComponent {