master-control 0.4.90 → 0.4.92

package/fesm2022/master-control.mjs

@@ -3716,16 +3716,16 @@ class PayGetCardComponent {
     years = '2030';
     frequency = 'month';
     payamountOptions = [
-        { amount: '₹62,000', percentage: 'Guaranteed' },
-        { amount: '₹66,000', percentage: 'Variable @<10%>' },
-        { amount: '₹72,000', percentage: 'Total @<10%>' }
+        { amount: '₹62,000', percentage: 'Guaranteed', frequency: '', variable: '' },
+        { amount: '₹66,000', percentage: 'Variable @', frequency: '', variable: '' },
+        { amount: '₹72,000', percentage: 'Total @', frequency: '', variable: '' }
     ];
     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    <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\" *ngIf=\"field()?.configData?.isShowpayout\">for {{ptValue}} years</span>\n      <span class=\"right-left-label\" *ngIf=\"field()?.configData?.isShowRightTextValue\">{{field()?.configData?.isShowRightTextValue}}</span>\n      <span class=\"left-right-label\" *ngIf=\"field()?.configData?.rightSubText\">{{field()?.configData?.rightSubText}}</span>\n    </div>\n  </div>\n</div>\n<div class=\"pay-get-card-digit-boss-banner\" *ngIf=\"field() && field()?.isVisible && field()?.configData?.digitBossText\">\n  <span class=\"pay-get-card-digit-boss-text\">{{field()?.configData?.digitBossText}}</span>\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:8px;font-weight:600;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}.pay-get-card-digit-boss-banner{background-color:#f5f5f5;margin-top:0;padding:6px 10px;max-width:var(--pay-card-width, 100%);border-radius:0 0 var(--pay-card-border-radius, 8px) var(--pay-card-border-radius, 8px)}.pay-get-card-digit-boss-text{font-size:12px;font-weight:600;color:#444;display:block;text-align:center}.value-card{display:flex;flex-direction:column;align-items:center;gap:4px}.value-card span{white-space:nowrap}.right-left-label{font-size:6px;font-weight:600;color:#696969;display:block}\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"] }] });
+    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 class=\"showcontent-frequency\">{{option.frequency}}</span></span>\n        <div class=\"grey-button\">{{option.percentage}} {{option.variable}}</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\" *ngIf=\"field()?.configData?.isShowpayout\">for {{ptValue}} years</span>\n      <span class=\"right-left-label\" *ngIf=\"field()?.configData?.isShowRightTextValue\">{{field()?.configData?.isShowRightTextValue}}</span>\n      <span class=\"left-right-label\" *ngIf=\"field()?.configData?.rightSubText\">{{field()?.configData?.rightSubText}}</span>\n    </div>\n  </div>\n</div>\n<div class=\"pay-get-card-digit-boss-banner\" *ngIf=\"field() && field()?.isVisible && field()?.configData?.digitBossText\">\n  <span class=\"pay-get-card-digit-boss-text\">{{field()?.configData?.digitBossText}}</span>\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:8px;font-weight:600;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}.pay-get-card-digit-boss-banner{background-color:#f5f5f5;margin-top:0;padding:6px 10px;max-width:var(--pay-card-width, 100%);border-radius:0 0 var(--pay-card-border-radius, 8px) var(--pay-card-border-radius, 8px)}.pay-get-card-digit-boss-text{font-size:12px;font-weight:600;color:#444;display:block;text-align:center}.value-card{display:flex;flex-direction:column;align-items:center;gap:4px}.value-card span{white-space:nowrap}.right-left-label{font-size:6px;font-weight:600;color:#696969;display:block}.showcontent-frequency{font-weight:400;font-size:6px;color:#444}\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, 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\" *ngIf=\"field()?.configData?.isShowpayout\">for {{ptValue}} years</span>\n      <span class=\"right-left-label\" *ngIf=\"field()?.configData?.isShowRightTextValue\">{{field()?.configData?.isShowRightTextValue}}</span>\n      <span class=\"left-right-label\" *ngIf=\"field()?.configData?.rightSubText\">{{field()?.configData?.rightSubText}}</span>\n    </div>\n  </div>\n</div>\n<div class=\"pay-get-card-digit-boss-banner\" *ngIf=\"field() && field()?.isVisible && field()?.configData?.digitBossText\">\n  <span class=\"pay-get-card-digit-boss-text\">{{field()?.configData?.digitBossText}}</span>\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:8px;font-weight:600;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}.pay-get-card-digit-boss-banner{background-color:#f5f5f5;margin-top:0;padding:6px 10px;max-width:var(--pay-card-width, 100%);border-radius:0 0 var(--pay-card-border-radius, 8px) var(--pay-card-border-radius, 8px)}.pay-get-card-digit-boss-text{font-size:12px;font-weight:600;color:#444;display:block;text-align:center}.value-card{display:flex;flex-direction:column;align-items:center;gap:4px}.value-card span{white-space:nowrap}.right-left-label{font-size:6px;font-weight:600;color:#696969;display:block}\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 class=\"showcontent-frequency\">{{option.frequency}}</span></span>\n        <div class=\"grey-button\">{{option.percentage}} {{option.variable}}</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\" *ngIf=\"field()?.configData?.isShowpayout\">for {{ptValue}} years</span>\n      <span class=\"right-left-label\" *ngIf=\"field()?.configData?.isShowRightTextValue\">{{field()?.configData?.isShowRightTextValue}}</span>\n      <span class=\"left-right-label\" *ngIf=\"field()?.configData?.rightSubText\">{{field()?.configData?.rightSubText}}</span>\n    </div>\n  </div>\n</div>\n<div class=\"pay-get-card-digit-boss-banner\" *ngIf=\"field() && field()?.isVisible && field()?.configData?.digitBossText\">\n  <span class=\"pay-get-card-digit-boss-text\">{{field()?.configData?.digitBossText}}</span>\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:8px;font-weight:600;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}.pay-get-card-digit-boss-banner{background-color:#f5f5f5;margin-top:0;padding:6px 10px;max-width:var(--pay-card-width, 100%);border-radius:0 0 var(--pay-card-border-radius, 8px) var(--pay-card-border-radius, 8px)}.pay-get-card-digit-boss-text{font-size:12px;font-weight:600;color:#444;display:block;text-align:center}.value-card{display:flex;flex-direction:column;align-items:center;gap:4px}.value-card span{white-space:nowrap}.right-left-label{font-size:6px;font-weight:600;color:#696969;display:block}.showcontent-frequency{font-weight:400;font-size:6px;color:#444}\n"] }]
         }], propDecorators: { payAmount: [{
                 type: Input
             }], premiumAmount: [{
@@ -7005,14 +7005,26 @@ class AnnuityCalculatorRadioComponent {
     el;
     constructor(el) {
         this.el = el;
-    }
-    ngOnInit() {
-        const f = this.field();
-        if (f && f.configData && f.configData.selectValue) {
-            const matchedOption = f.options?.find((opt) => opt.value === f.configData.selectValue);
-            if (matchedOption) {
-                this.inputValue = matchedOption.value;
+        effect(() => {
+            const f = this.field();
+            const selectVal = f?.configData?.selectValue;
+            if (selectVal !== null && selectVal !== undefined && selectVal !== '') {
+                // Pre-select the matching card
+                const matchedCard = f?.configData?.cardsValue?.find((c) => c.value === selectVal);
+                if (matchedCard) {
+                    this.value = selectVal;
+                }
+                const matchedOption = f?.options?.find((opt) => opt.value === selectVal);
+                if (matchedOption) {
+                    this.inputValue = selectVal;
+                    setTimeout(() => this.updateArrowPosition(), 0);
+                }
             }
+        });
+    }
+    ngAfterViewInit() {
+        if (this.inputValue !== null && this.inputValue !== undefined) {
+            setTimeout(() => this.updateArrowPosition(), 0);
         }
     }
     reactiveFormControlobject = input();
@@ -7077,7 +7089,7 @@ class AnnuityCalculatorRadioComponent {
                 useExisting: forwardRef(() => AnnuityCalculatorRadioComponent),
                 multi: true
             }
-        ], ngImport: i0, template: "\n\n<div class=\"acr-wrapper\">\n\n  <!-- Top Header Label -->\n  <div class=\"acr-sub-label\" *ngIf=\"field() && field()?.isVisible\">\n    {{ field()?.label }}\n    <span class=\"error-message\" *ngIf=\"field()?.validators?.isRequired\">*</span>\n  </div>\n\n  <!-- Radio Option Cards -->\n  <div class=\"radio-btn-group1\" *ngIf=\"field()?.configData?.isShowRadioOption\">\n    <div\n      class=\"annuity-radio-card-gender\"\n      *ngFor=\"let data of field()?.options\"\n      [class.selected]=\"inputValue === data.value\"\n      [class.disable-radio-btn]=\"field()?.isDisable || data.disabled === true || data.disabled === 'true'\"\n      (click)=\"(data.disabled === true || data.disabled === 'true') ? null : toggleRadio(data.value, $event)\"\n    >\n      <!-- Hidden native radio input \u2014 enables proper [id]/[name] binding for form semantics.\n           Parent projects can bind (change)=\"myHandler($event)\" on the host component. -->\n      <input\n        type=\"radio\"\n        style=\"position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none;\"\n        [id]=\"field()?.fieldName\"\n        [name]=\"field()?.fieldName\"\n        [value]=\"data.value\"\n        [checked]=\"inputValue === data.value\"\n        (growthRateChange)=\"toggleRadio(data.value, $event)\"\n      />\n      <span\n        class=\"forRadioLabelAnnuityRadio\"\n        [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        }\"\n      >{{ data.label }}</span>\n    </div>\n  </div>\n\n  <!-- Card Container -->\n  <div class=\"acr-card-container\" *ngIf=\"field()?.configData?.isShowCard\">\n\n    <div class=\"acr-card\">\n    <div class=\"acr-sub-label\" *ngIf=\"field()?.configData?.subLabel\">\n      {{ field()?.configData?.subLabel }}\n    </div>\n\n    <div class=\"acr-cards-row\">\n      <div\n        class=\"acr-card-option\"\n        *ngFor=\"let card of field()?.configData?.cardsValue\"\n        [class.selected]=\"value === card.value\"\n        [class.disabled]=\"card.disabled\"\n        (click)=\"selectCard(card)\"\n      >\n        <!-- Hidden native radio input \u2014 enables proper [id]/[name] binding for form semantics. -->\n        <input\n          type=\"radio\"\n          style=\"position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none;\"\n          [id]=\"field()?.fieldName\"\n          [name]=\"field()?.fieldName\"\n          [value]=\"card.value\"\n          [checked]=\"value === card.value\"\n          (change)=\"selectCard(card)\"\n        />\n        <div class=\"acr-card-main-value\">\n          <span class=\"acr-card-main-value\">{{ card.mainValue }}</span><span class=\"acr-card-main-value\"></span>\n        </div>\n        <div class=\"acr-card-sub-value\">\n          <span class=\"acr-card-sub-value\">{{ card.subValue }}</span><span class=\"acr-card-sub-value\"></span>\n        </div>\n        <div class=\"acr-card-rate\">{{ card.growthRate }} Annuity Rate</div>\n        <div class=\"acr-card-details\">\n          <div class=\"acr-card-detail-row\">\n            <span>Guaranteed </span>\n            <span>:</span>\n            <strong>{{ card.guaranteed }}</strong>\n          </div>\n          <div class=\"acr-card-detail-row\">\n            <span>Variable </span>\n            <span>:</span>\n            <strong>{{ card.variable }}</strong>\n          </div>\n        </div>\n        <div class=\"acr-card-type\">\n          <button class=\"acr-card-type-btn\" [ngClass]=\"{\n      'btn-high': card.value === 'High',\n      'btn-medium': card.value === 'Medium',\n      'btn-low': card.value !== 'High' && card.value !== 'Medium'\n    }\">{{ card.value }} variable</button>\n        </div>\n      </div>\n    </div>\n     <!-- Note \u2014 full width, vertically aligned with radio group and card container -->\n  <div class=\"acr-note\" *ngIf=\"field()?.configData?.infoMessage\">\n    <strong>Note:</strong> {{ field()?.configData?.infoMessage }}\n  </div>\n  </div>\n  </div><!-- /acr-card-container -->\n\n</div>\n", styles: [".acr-wrapper{font-family:mulish!important;width:100%;display:flex;flex-direction:column}.forRadioLabelAnnuityRadio{font-size:12px!important;font-weight:400!important;cursor:pointer;color:#444!important;min-width:25%!important;height:fit-content}.required-star{color:red;margin-left:2px}.radio-btn-group1{display:flex;gap:4px;flex-wrap:wrap;padding-right:10px;padding-left:10px;max-width:max-content;height:90px;max-height:100px!important;line-height:15px}.annuity-radio-card-gender{border:1px solid rgba(218,218,218,1);border-radius:4px;padding:6px 20px;cursor:pointer;display:flex;align-items:center;justify-content:center;flex:1;-webkit-user-select:none;user-select:none;position:relative;overflow:visible}.annuity-radio-card-gender.selected{border-color:#fb0;border-width:1.6px}.annuity-radio-card-gender.selected:after{content:\"\";position:absolute;bottom:-16px;left:50%;transform:translate(-50%);width:0;height:0;z-index:3}.annuity-radio-card-gender.selected:before{content:\"\";position:absolute;bottom:-12px;left:50%;transform:translate(-50%);width:0;height:0;border-left:11px solid transparent;border-right:11px solid transparent;border-top:11px solid #fff;z-index:4}.annuity-radio-card-gender:hover:not(.disable-radio-btn){border-color:#ffd600}.disable-radio-btn{opacity:.55;pointer-events:none;background:#f5f5f5}.acr-card-container{position:relative;width:100%;padding-top:22px;box-sizing:border-box;padding-right:10px;padding-left:10px}.acr-card{background:#fff;border:1px solid rgba(218,218,218,1);border-radius:14px;padding:20px 18px 16px;width:100%;position:relative;overflow:visible;box-sizing:border-box}.acr-card:after{content:\"\";position:absolute;bottom:100%;left:var(--arrow-left, 40px);transform:translate(-50%);transition:left .2s ease;border-width:14px;border-style:solid;border-color:transparent transparent rgba(218,218,218,1) transparent;z-index:2}.acr-card:before{content:\"\";position:absolute;bottom:100%;left:var(--arrow-left, 40px);transform:translate(-50%);transition:left .2s ease;border-width:12px;border-style:solid;border-color:transparent transparent rgba(255,255,255,1) transparent;z-index:3}.acr-sub-label{font-size:10px;font-weight:700;color:#444;margin-bottom:10px;padding-right:10px;padding-left:10px}.acr-cards-row{display:flex;gap:14px;flex-wrap:nowrap;margin-bottom:30px}.acr-card-option{background:#fff;border:2px solid #E0E0E0;border-radius:12px;padding:18px 16px 28px;flex:1 1 0;min-width:0;max-width:none;cursor:pointer;display:flex;flex-direction:column;align-items:flex-start;-webkit-user-select:none;user-select:none;position:relative;overflow:visible}.acr-card-option.selected{border-color:#ffd600;box-shadow:0 0 0 1px #ffd600}.acr-card-option:hover:not(.disabled){border-color:#ffd600}.acr-card-option.disabled{opacity:.5;pointer-events:none}.acr-card-main-value{font-size:16px;font-weight:700;color:#444;margin-bottom:3px;line-height:20px}.acr-card-main-sub-value{font-size:16px;font-weight:400;color:#444;margin-bottom:3px;line-height:20px}.acr-card-sub-value{font-size:10px;font-weight:700;color:#444;line-height:14px}.acr-card-sub-sub-value{font-size:10px;font-weight:400;color:#444;line-height:14px}.acr-card-rate{background:linear-gradient(to right,#fb0,#fff7df,#fb0);color:#444;font-weight:700;font-size:10px;line-height:14px;padding:4px;margin-bottom:10px;margin-top:6px;width:100%;height:22px;text-align:center;box-sizing:border-box}.acr-card-details{width:100%;margin-bottom:14px;background-color:#f5f5f5;padding-left:10px;padding-right:10px;display:grid;grid-template-columns:max-content auto 1fr;column-gap:4px}.acr-card-detail-row{display:contents;font-size:10px;color:#444}.acr-card-detail-row span{font-weight:400;font-size:8px;line-height:14px;color:#444}.acr-card-detail-row strong{font-weight:600;color:#444;font-size:8px;line-height:14px;text-align:right}.acr-card-type{position:absolute;bottom:-14px;left:0;right:0;display:flex;justify-content:center}.acr-card-type-btn{border:none;border-radius:20px;padding:5px 22px;font-size:13px;font-weight:600;cursor:pointer;outline:none}.btn-high{background:#00946f;color:#fff;font-weight:700;font-size:10px;line-height:14px}.btn-medium{background:#66ccb2;color:#444;font-weight:700;font-size:10px;line-height:14px}.btn-low{background:#cef0e8;color:#444;font-weight:700;font-size:10px;line-height:14px}.acr-note{background:#ececec;color:#222;font-size:12px;border-radius:4px;padding:4px 8px;line-height:16px;width:100%;box-sizing:border-box;margin-top:8px;font-weight:400}.acr-note strong{font-weight:700;font-size:12px;line-height:16px;color:#222}\n"], dependencies: [{ 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: MatRadioModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: FormsModule }] });
+        ], ngImport: i0, template: "\n\n<div class=\"acr-wrapper\">\n\n  <!-- Top Header Label -->\n  <div class=\"acr-sub-label\" *ngIf=\"field() && field()?.isVisible\">\n    {{ field()?.label }}\n    <span class=\"error-message\" *ngIf=\"field()?.validators?.isRequired\">*</span>\n  </div>\n\n  <!-- Radio Option Cards -->\n  <div class=\"radio-btn-group1\" *ngIf=\"field()?.configData?.isShowRadioOption\">\n    <div\n      class=\"annuity-radio-card-gender\"\n      *ngFor=\"let data of field()?.options\"\n      [class.selected]=\"inputValue === data.value\"\n      [class.disable-radio-btn]=\"field()?.isDisable || data.disabled === true || data.disabled === 'true'\"\n      (click)=\"(data.disabled === true || data.disabled === 'true') ? null : toggleRadio(data.value, $event)\"\n    >\n      <!-- Hidden native radio input \u2014 enables proper [id]/[name] binding for form semantics.\n           Parent projects can bind (change)=\"myHandler($event)\" on the host component. -->\n      <input\n        type=\"radio\"\n        style=\"position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none;\"\n        [id]=\"field()?.fieldName\"\n        [name]=\"field()?.fieldName\"\n        [value]=\"data.value\"\n        [checked]=\"inputValue === data.value\"\n        (growthRateChange)=\"toggleRadio(data.value, $event)\"\n      />\n      <span\n        class=\"forRadioLabelAnnuityRadio\"\n        [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        }\"\n      >{{ data.label }}</span>\n    </div>\n  </div>\n\n  <!-- Card Container -->\n  <div class=\"acr-card-container\" *ngIf=\"field()?.configData?.isShowCard\">\n\n    <div class=\"acr-card\">\n    <div class=\"acr-sub-label\" *ngIf=\"field()?.configData?.subLabel\">\n      {{ field()?.configData?.subLabel }}\n    </div>\n\n    <div class=\"acr-cards-row col-md-3 col-sm-6 col-xs-12 col-lg-3\">\n      <div\n        class=\"acr-card-option\"\n        *ngFor=\"let card of field()?.configData?.cardsValue\"\n        [class.selected]=\"value === card.value\"\n        [class.disabled]=\"card.disabled\"\n        (click)=\"selectCard(card)\"\n      >\n        <!-- Hidden native radio input \u2014 enables proper [id]/[name] binding for form semantics. -->\n        <input\n          type=\"radio\"\n          style=\"position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none;\"\n          [id]=\"field()?.fieldName\"\n          [name]=\"field()?.fieldName\"\n          [value]=\"card.value\"\n          [checked]=\"value === card.value\"\n          (change)=\"selectCard(card)\"\n        />\n        <div class=\"acr-card-main-value\">\n          <span class=\"acr-card-main-value\">{{ card.mainValue }}</span><span class=\"acr-card-main-value\"></span>\n        </div>\n        <div class=\"acr-card-sub-value\">\n          <span class=\"acr-card-sub-value\">{{ card.subValue }}</span><span class=\"acr-card-sub-value\"></span>\n        </div>\n        <div class=\"acr-card-rate\">{{ card.growthRate }} Annuity Rate</div>\n        <div class=\"acr-card-details\">\n          <div class=\"acr-card-detail-row\">\n            <span>Guaranteed </span>\n            <span>:</span>\n            <strong>{{ card.guaranteed }}</strong>\n          </div>\n          <div class=\"acr-card-detail-row\">\n            <span>Variable </span>\n            <span>:</span>\n            <strong>{{ card.variable }}</strong>\n          </div>\n        </div>\n        <!-- <div class=\"acr-card-type\">\n          <button class=\"acr-card-type-btn\" [ngClass]=\"{\n      'btn-high': card.value === 'High',\n      'btn-medium': card.value === 'Medium',\n      'btn-low': card.value !== 'High' && card.value !== 'Medium'\n    }\">{{ card.value }} variable</button>\n        </div> -->\n      </div>\n    </div>\n     <!-- Note \u2014 full width, vertically aligned with radio group and card container -->\n  <div class=\"acr-note\" *ngIf=\"field()?.configData?.infoMessage\">\n    <strong>Note:</strong> {{ field()?.configData?.infoMessage }}\n  </div>\n  </div>\n  </div><!-- /acr-card-container -->\n\n</div>\n", styles: [".acr-wrapper{font-family:mulish!important;width:100%;display:flex;flex-direction:column}.forRadioLabelAnnuityRadio{font-size:12px!important;font-weight:400!important;cursor:pointer;color:#444!important;min-width:25%!important;height:fit-content}.required-star{color:red;margin-left:2px}.radio-btn-group1{display:flex;gap:4px;flex-wrap:wrap;padding-right:10px;padding-left:10px;max-width:max-content;height:90px;max-height:100px!important;line-height:15px}.annuity-radio-card-gender{border:1px solid rgba(218,218,218,1);border-radius:4px;padding:6px 20px;cursor:pointer;display:flex;align-items:center;justify-content:center;flex:1;-webkit-user-select:none;user-select:none;position:relative;overflow:visible}.annuity-radio-card-gender.selected{border-color:#fb0;border-width:1.6px}.annuity-radio-card-gender.selected:after{content:\"\";position:absolute;bottom:-16px;left:50%;transform:translate(-50%);width:0;height:0;z-index:3}.annuity-radio-card-gender.selected:before{content:\"\";position:absolute;bottom:-12px;left:50%;transform:translate(-50%);width:0;height:0;border-left:11px solid transparent;border-right:11px solid transparent;border-top:11px solid #fff;z-index:4}.annuity-radio-card-gender:hover:not(.disable-radio-btn){border-color:#ffd600}.disable-radio-btn{opacity:.55;pointer-events:none;background:#f5f5f5}.acr-card-container{position:relative;width:100%;padding-top:22px;box-sizing:border-box;padding-right:10px;padding-left:10px}.acr-card{background:#fff;border:1px solid rgba(218,218,218,1);border-radius:14px;padding:20px 18px 16px;width:100%;position:relative;overflow:visible;box-sizing:border-box}.acr-card:after{content:\"\";position:absolute;bottom:100%;left:var(--arrow-left, 40px);transform:translate(-50%);transition:left .2s ease;border-width:14px;border-style:solid;border-color:transparent transparent rgba(218,218,218,1) transparent;z-index:2}.acr-card:before{content:\"\";position:absolute;bottom:100%;left:var(--arrow-left, 40px);transform:translate(-50%);transition:left .2s ease;border-width:12px;border-style:solid;border-color:transparent transparent rgba(255,255,255,1) transparent;z-index:3}.acr-sub-label{font-size:10px;font-weight:700;color:#444;margin-bottom:10px;padding-right:10px;padding-left:10px}.acr-cards-row{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:30px}.acr-card-option{background:#fff;border:2px solid #E0E0E0;border-radius:12px;padding:18px 16px 28px;flex:0 0 calc((100% - 28px) / 3);max-width:calc((100% - 28px) / 3);min-width:0;box-sizing:border-box;cursor:pointer;display:flex;flex-direction:column;align-items:flex-start;-webkit-user-select:none;user-select:none;position:relative;overflow:visible}.acr-card-option.selected{border-color:#ffd600;box-shadow:0 0 0 1px #ffd600}.acr-card-option:hover:not(.disabled){border-color:#ffd600}.acr-card-option.disabled{opacity:.5;pointer-events:none}.acr-card-main-value{font-size:16px;font-weight:700;color:#444;margin-bottom:3px;line-height:20px}.acr-card-main-sub-value{font-size:16px;font-weight:400;color:#444;margin-bottom:3px;line-height:20px}.acr-card-sub-value{font-size:10px;font-weight:700;color:#444;line-height:14px}.acr-card-sub-sub-value{font-size:10px;font-weight:400;color:#444;line-height:14px}.acr-card-rate{background:linear-gradient(to right,#fb0,#fff7df,#fb0);color:#444;font-weight:700;font-size:10px;line-height:14px;padding:4px;margin-bottom:10px;margin-top:6px;width:100%;height:22px;text-align:center;box-sizing:border-box}.acr-card-details{width:100%;margin-bottom:14px;background-color:#f5f5f5;padding-left:10px;padding-right:10px;display:grid;grid-template-columns:max-content auto 1fr;column-gap:4px}.acr-card-detail-row{display:contents;font-size:10px;color:#444}.acr-card-detail-row span{font-weight:400;font-size:8px;line-height:14px;color:#444}.acr-card-detail-row strong{font-weight:600;color:#444;font-size:8px;line-height:14px;text-align:right}.acr-card-type{position:absolute;bottom:-14px;left:0;right:0;display:flex;justify-content:center}.acr-card-type-btn{border:none;border-radius:20px;padding:5px 22px;font-size:13px;font-weight:600;cursor:pointer;outline:none}.btn-high{background:#00946f;color:#fff;font-weight:700;font-size:10px;line-height:14px}.btn-medium{background:#66ccb2;color:#444;font-weight:700;font-size:10px;line-height:14px}.btn-low{background:#cef0e8;color:#444;font-weight:700;font-size:10px;line-height:14px}.acr-note{background:#ececec;color:#222;font-size:12px;border-radius:4px;padding:4px 8px;line-height:16px;width:100%;box-sizing:border-box;margin-top:8px;font-weight:400}.acr-note strong{font-weight:700;font-size:12px;line-height:16px;color:#222}\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: "ngmodule", type: MatRadioModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: FormsModule }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AnnuityCalculatorRadioComponent, decorators: [{
             type: Component,
@@ -7088,7 +7100,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                             useExisting: forwardRef(() => AnnuityCalculatorRadioComponent),
                             multi: true
                         }
-                    ], template: "\n\n<div class=\"acr-wrapper\">\n\n  <!-- Top Header Label -->\n  <div class=\"acr-sub-label\" *ngIf=\"field() && field()?.isVisible\">\n    {{ field()?.label }}\n    <span class=\"error-message\" *ngIf=\"field()?.validators?.isRequired\">*</span>\n  </div>\n\n  <!-- Radio Option Cards -->\n  <div class=\"radio-btn-group1\" *ngIf=\"field()?.configData?.isShowRadioOption\">\n    <div\n      class=\"annuity-radio-card-gender\"\n      *ngFor=\"let data of field()?.options\"\n      [class.selected]=\"inputValue === data.value\"\n      [class.disable-radio-btn]=\"field()?.isDisable || data.disabled === true || data.disabled === 'true'\"\n      (click)=\"(data.disabled === true || data.disabled === 'true') ? null : toggleRadio(data.value, $event)\"\n    >\n      <!-- Hidden native radio input \u2014 enables proper [id]/[name] binding for form semantics.\n           Parent projects can bind (change)=\"myHandler($event)\" on the host component. -->\n      <input\n        type=\"radio\"\n        style=\"position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none;\"\n        [id]=\"field()?.fieldName\"\n        [name]=\"field()?.fieldName\"\n        [value]=\"data.value\"\n        [checked]=\"inputValue === data.value\"\n        (growthRateChange)=\"toggleRadio(data.value, $event)\"\n      />\n      <span\n        class=\"forRadioLabelAnnuityRadio\"\n        [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        }\"\n      >{{ data.label }}</span>\n    </div>\n  </div>\n\n  <!-- Card Container -->\n  <div class=\"acr-card-container\" *ngIf=\"field()?.configData?.isShowCard\">\n\n    <div class=\"acr-card\">\n    <div class=\"acr-sub-label\" *ngIf=\"field()?.configData?.subLabel\">\n      {{ field()?.configData?.subLabel }}\n    </div>\n\n    <div class=\"acr-cards-row\">\n      <div\n        class=\"acr-card-option\"\n        *ngFor=\"let card of field()?.configData?.cardsValue\"\n        [class.selected]=\"value === card.value\"\n        [class.disabled]=\"card.disabled\"\n        (click)=\"selectCard(card)\"\n      >\n        <!-- Hidden native radio input \u2014 enables proper [id]/[name] binding for form semantics. -->\n        <input\n          type=\"radio\"\n          style=\"position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none;\"\n          [id]=\"field()?.fieldName\"\n          [name]=\"field()?.fieldName\"\n          [value]=\"card.value\"\n          [checked]=\"value === card.value\"\n          (change)=\"selectCard(card)\"\n        />\n        <div class=\"acr-card-main-value\">\n          <span class=\"acr-card-main-value\">{{ card.mainValue }}</span><span class=\"acr-card-main-value\"></span>\n        </div>\n        <div class=\"acr-card-sub-value\">\n          <span class=\"acr-card-sub-value\">{{ card.subValue }}</span><span class=\"acr-card-sub-value\"></span>\n        </div>\n        <div class=\"acr-card-rate\">{{ card.growthRate }} Annuity Rate</div>\n        <div class=\"acr-card-details\">\n          <div class=\"acr-card-detail-row\">\n            <span>Guaranteed </span>\n            <span>:</span>\n            <strong>{{ card.guaranteed }}</strong>\n          </div>\n          <div class=\"acr-card-detail-row\">\n            <span>Variable </span>\n            <span>:</span>\n            <strong>{{ card.variable }}</strong>\n          </div>\n        </div>\n        <div class=\"acr-card-type\">\n          <button class=\"acr-card-type-btn\" [ngClass]=\"{\n      'btn-high': card.value === 'High',\n      'btn-medium': card.value === 'Medium',\n      'btn-low': card.value !== 'High' && card.value !== 'Medium'\n    }\">{{ card.value }} variable</button>\n        </div>\n      </div>\n    </div>\n     <!-- Note \u2014 full width, vertically aligned with radio group and card container -->\n  <div class=\"acr-note\" *ngIf=\"field()?.configData?.infoMessage\">\n    <strong>Note:</strong> {{ field()?.configData?.infoMessage }}\n  </div>\n  </div>\n  </div><!-- /acr-card-container -->\n\n</div>\n", styles: [".acr-wrapper{font-family:mulish!important;width:100%;display:flex;flex-direction:column}.forRadioLabelAnnuityRadio{font-size:12px!important;font-weight:400!important;cursor:pointer;color:#444!important;min-width:25%!important;height:fit-content}.required-star{color:red;margin-left:2px}.radio-btn-group1{display:flex;gap:4px;flex-wrap:wrap;padding-right:10px;padding-left:10px;max-width:max-content;height:90px;max-height:100px!important;line-height:15px}.annuity-radio-card-gender{border:1px solid rgba(218,218,218,1);border-radius:4px;padding:6px 20px;cursor:pointer;display:flex;align-items:center;justify-content:center;flex:1;-webkit-user-select:none;user-select:none;position:relative;overflow:visible}.annuity-radio-card-gender.selected{border-color:#fb0;border-width:1.6px}.annuity-radio-card-gender.selected:after{content:\"\";position:absolute;bottom:-16px;left:50%;transform:translate(-50%);width:0;height:0;z-index:3}.annuity-radio-card-gender.selected:before{content:\"\";position:absolute;bottom:-12px;left:50%;transform:translate(-50%);width:0;height:0;border-left:11px solid transparent;border-right:11px solid transparent;border-top:11px solid #fff;z-index:4}.annuity-radio-card-gender:hover:not(.disable-radio-btn){border-color:#ffd600}.disable-radio-btn{opacity:.55;pointer-events:none;background:#f5f5f5}.acr-card-container{position:relative;width:100%;padding-top:22px;box-sizing:border-box;padding-right:10px;padding-left:10px}.acr-card{background:#fff;border:1px solid rgba(218,218,218,1);border-radius:14px;padding:20px 18px 16px;width:100%;position:relative;overflow:visible;box-sizing:border-box}.acr-card:after{content:\"\";position:absolute;bottom:100%;left:var(--arrow-left, 40px);transform:translate(-50%);transition:left .2s ease;border-width:14px;border-style:solid;border-color:transparent transparent rgba(218,218,218,1) transparent;z-index:2}.acr-card:before{content:\"\";position:absolute;bottom:100%;left:var(--arrow-left, 40px);transform:translate(-50%);transition:left .2s ease;border-width:12px;border-style:solid;border-color:transparent transparent rgba(255,255,255,1) transparent;z-index:3}.acr-sub-label{font-size:10px;font-weight:700;color:#444;margin-bottom:10px;padding-right:10px;padding-left:10px}.acr-cards-row{display:flex;gap:14px;flex-wrap:nowrap;margin-bottom:30px}.acr-card-option{background:#fff;border:2px solid #E0E0E0;border-radius:12px;padding:18px 16px 28px;flex:1 1 0;min-width:0;max-width:none;cursor:pointer;display:flex;flex-direction:column;align-items:flex-start;-webkit-user-select:none;user-select:none;position:relative;overflow:visible}.acr-card-option.selected{border-color:#ffd600;box-shadow:0 0 0 1px #ffd600}.acr-card-option:hover:not(.disabled){border-color:#ffd600}.acr-card-option.disabled{opacity:.5;pointer-events:none}.acr-card-main-value{font-size:16px;font-weight:700;color:#444;margin-bottom:3px;line-height:20px}.acr-card-main-sub-value{font-size:16px;font-weight:400;color:#444;margin-bottom:3px;line-height:20px}.acr-card-sub-value{font-size:10px;font-weight:700;color:#444;line-height:14px}.acr-card-sub-sub-value{font-size:10px;font-weight:400;color:#444;line-height:14px}.acr-card-rate{background:linear-gradient(to right,#fb0,#fff7df,#fb0);color:#444;font-weight:700;font-size:10px;line-height:14px;padding:4px;margin-bottom:10px;margin-top:6px;width:100%;height:22px;text-align:center;box-sizing:border-box}.acr-card-details{width:100%;margin-bottom:14px;background-color:#f5f5f5;padding-left:10px;padding-right:10px;display:grid;grid-template-columns:max-content auto 1fr;column-gap:4px}.acr-card-detail-row{display:contents;font-size:10px;color:#444}.acr-card-detail-row span{font-weight:400;font-size:8px;line-height:14px;color:#444}.acr-card-detail-row strong{font-weight:600;color:#444;font-size:8px;line-height:14px;text-align:right}.acr-card-type{position:absolute;bottom:-14px;left:0;right:0;display:flex;justify-content:center}.acr-card-type-btn{border:none;border-radius:20px;padding:5px 22px;font-size:13px;font-weight:600;cursor:pointer;outline:none}.btn-high{background:#00946f;color:#fff;font-weight:700;font-size:10px;line-height:14px}.btn-medium{background:#66ccb2;color:#444;font-weight:700;font-size:10px;line-height:14px}.btn-low{background:#cef0e8;color:#444;font-weight:700;font-size:10px;line-height:14px}.acr-note{background:#ececec;color:#222;font-size:12px;border-radius:4px;padding:4px 8px;line-height:16px;width:100%;box-sizing:border-box;margin-top:8px;font-weight:400}.acr-note strong{font-weight:700;font-size:12px;line-height:16px;color:#222}\n"] }]
+                    ], template: "\n\n<div class=\"acr-wrapper\">\n\n  <!-- Top Header Label -->\n  <div class=\"acr-sub-label\" *ngIf=\"field() && field()?.isVisible\">\n    {{ field()?.label }}\n    <span class=\"error-message\" *ngIf=\"field()?.validators?.isRequired\">*</span>\n  </div>\n\n  <!-- Radio Option Cards -->\n  <div class=\"radio-btn-group1\" *ngIf=\"field()?.configData?.isShowRadioOption\">\n    <div\n      class=\"annuity-radio-card-gender\"\n      *ngFor=\"let data of field()?.options\"\n      [class.selected]=\"inputValue === data.value\"\n      [class.disable-radio-btn]=\"field()?.isDisable || data.disabled === true || data.disabled === 'true'\"\n      (click)=\"(data.disabled === true || data.disabled === 'true') ? null : toggleRadio(data.value, $event)\"\n    >\n      <!-- Hidden native radio input \u2014 enables proper [id]/[name] binding for form semantics.\n           Parent projects can bind (change)=\"myHandler($event)\" on the host component. -->\n      <input\n        type=\"radio\"\n        style=\"position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none;\"\n        [id]=\"field()?.fieldName\"\n        [name]=\"field()?.fieldName\"\n        [value]=\"data.value\"\n        [checked]=\"inputValue === data.value\"\n        (growthRateChange)=\"toggleRadio(data.value, $event)\"\n      />\n      <span\n        class=\"forRadioLabelAnnuityRadio\"\n        [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        }\"\n      >{{ data.label }}</span>\n    </div>\n  </div>\n\n  <!-- Card Container -->\n  <div class=\"acr-card-container\" *ngIf=\"field()?.configData?.isShowCard\">\n\n    <div class=\"acr-card\">\n    <div class=\"acr-sub-label\" *ngIf=\"field()?.configData?.subLabel\">\n      {{ field()?.configData?.subLabel }}\n    </div>\n\n    <div class=\"acr-cards-row col-md-3 col-sm-6 col-xs-12 col-lg-3\">\n      <div\n        class=\"acr-card-option\"\n        *ngFor=\"let card of field()?.configData?.cardsValue\"\n        [class.selected]=\"value === card.value\"\n        [class.disabled]=\"card.disabled\"\n        (click)=\"selectCard(card)\"\n      >\n        <!-- Hidden native radio input \u2014 enables proper [id]/[name] binding for form semantics. -->\n        <input\n          type=\"radio\"\n          style=\"position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none;\"\n          [id]=\"field()?.fieldName\"\n          [name]=\"field()?.fieldName\"\n          [value]=\"card.value\"\n          [checked]=\"value === card.value\"\n          (change)=\"selectCard(card)\"\n        />\n        <div class=\"acr-card-main-value\">\n          <span class=\"acr-card-main-value\">{{ card.mainValue }}</span><span class=\"acr-card-main-value\"></span>\n        </div>\n        <div class=\"acr-card-sub-value\">\n          <span class=\"acr-card-sub-value\">{{ card.subValue }}</span><span class=\"acr-card-sub-value\"></span>\n        </div>\n        <div class=\"acr-card-rate\">{{ card.growthRate }} Annuity Rate</div>\n        <div class=\"acr-card-details\">\n          <div class=\"acr-card-detail-row\">\n            <span>Guaranteed </span>\n            <span>:</span>\n            <strong>{{ card.guaranteed }}</strong>\n          </div>\n          <div class=\"acr-card-detail-row\">\n            <span>Variable </span>\n            <span>:</span>\n            <strong>{{ card.variable }}</strong>\n          </div>\n        </div>\n        <!-- <div class=\"acr-card-type\">\n          <button class=\"acr-card-type-btn\" [ngClass]=\"{\n      'btn-high': card.value === 'High',\n      'btn-medium': card.value === 'Medium',\n      'btn-low': card.value !== 'High' && card.value !== 'Medium'\n    }\">{{ card.value }} variable</button>\n        </div> -->\n      </div>\n    </div>\n     <!-- Note \u2014 full width, vertically aligned with radio group and card container -->\n  <div class=\"acr-note\" *ngIf=\"field()?.configData?.infoMessage\">\n    <strong>Note:</strong> {{ field()?.configData?.infoMessage }}\n  </div>\n  </div>\n  </div><!-- /acr-card-container -->\n\n</div>\n", styles: [".acr-wrapper{font-family:mulish!important;width:100%;display:flex;flex-direction:column}.forRadioLabelAnnuityRadio{font-size:12px!important;font-weight:400!important;cursor:pointer;color:#444!important;min-width:25%!important;height:fit-content}.required-star{color:red;margin-left:2px}.radio-btn-group1{display:flex;gap:4px;flex-wrap:wrap;padding-right:10px;padding-left:10px;max-width:max-content;height:90px;max-height:100px!important;line-height:15px}.annuity-radio-card-gender{border:1px solid rgba(218,218,218,1);border-radius:4px;padding:6px 20px;cursor:pointer;display:flex;align-items:center;justify-content:center;flex:1;-webkit-user-select:none;user-select:none;position:relative;overflow:visible}.annuity-radio-card-gender.selected{border-color:#fb0;border-width:1.6px}.annuity-radio-card-gender.selected:after{content:\"\";position:absolute;bottom:-16px;left:50%;transform:translate(-50%);width:0;height:0;z-index:3}.annuity-radio-card-gender.selected:before{content:\"\";position:absolute;bottom:-12px;left:50%;transform:translate(-50%);width:0;height:0;border-left:11px solid transparent;border-right:11px solid transparent;border-top:11px solid #fff;z-index:4}.annuity-radio-card-gender:hover:not(.disable-radio-btn){border-color:#ffd600}.disable-radio-btn{opacity:.55;pointer-events:none;background:#f5f5f5}.acr-card-container{position:relative;width:100%;padding-top:22px;box-sizing:border-box;padding-right:10px;padding-left:10px}.acr-card{background:#fff;border:1px solid rgba(218,218,218,1);border-radius:14px;padding:20px 18px 16px;width:100%;position:relative;overflow:visible;box-sizing:border-box}.acr-card:after{content:\"\";position:absolute;bottom:100%;left:var(--arrow-left, 40px);transform:translate(-50%);transition:left .2s ease;border-width:14px;border-style:solid;border-color:transparent transparent rgba(218,218,218,1) transparent;z-index:2}.acr-card:before{content:\"\";position:absolute;bottom:100%;left:var(--arrow-left, 40px);transform:translate(-50%);transition:left .2s ease;border-width:12px;border-style:solid;border-color:transparent transparent rgba(255,255,255,1) transparent;z-index:3}.acr-sub-label{font-size:10px;font-weight:700;color:#444;margin-bottom:10px;padding-right:10px;padding-left:10px}.acr-cards-row{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:30px}.acr-card-option{background:#fff;border:2px solid #E0E0E0;border-radius:12px;padding:18px 16px 28px;flex:0 0 calc((100% - 28px) / 3);max-width:calc((100% - 28px) / 3);min-width:0;box-sizing:border-box;cursor:pointer;display:flex;flex-direction:column;align-items:flex-start;-webkit-user-select:none;user-select:none;position:relative;overflow:visible}.acr-card-option.selected{border-color:#ffd600;box-shadow:0 0 0 1px #ffd600}.acr-card-option:hover:not(.disabled){border-color:#ffd600}.acr-card-option.disabled{opacity:.5;pointer-events:none}.acr-card-main-value{font-size:16px;font-weight:700;color:#444;margin-bottom:3px;line-height:20px}.acr-card-main-sub-value{font-size:16px;font-weight:400;color:#444;margin-bottom:3px;line-height:20px}.acr-card-sub-value{font-size:10px;font-weight:700;color:#444;line-height:14px}.acr-card-sub-sub-value{font-size:10px;font-weight:400;color:#444;line-height:14px}.acr-card-rate{background:linear-gradient(to right,#fb0,#fff7df,#fb0);color:#444;font-weight:700;font-size:10px;line-height:14px;padding:4px;margin-bottom:10px;margin-top:6px;width:100%;height:22px;text-align:center;box-sizing:border-box}.acr-card-details{width:100%;margin-bottom:14px;background-color:#f5f5f5;padding-left:10px;padding-right:10px;display:grid;grid-template-columns:max-content auto 1fr;column-gap:4px}.acr-card-detail-row{display:contents;font-size:10px;color:#444}.acr-card-detail-row span{font-weight:400;font-size:8px;line-height:14px;color:#444}.acr-card-detail-row strong{font-weight:600;color:#444;font-size:8px;line-height:14px;text-align:right}.acr-card-type{position:absolute;bottom:-14px;left:0;right:0;display:flex;justify-content:center}.acr-card-type-btn{border:none;border-radius:20px;padding:5px 22px;font-size:13px;font-weight:600;cursor:pointer;outline:none}.btn-high{background:#00946f;color:#fff;font-weight:700;font-size:10px;line-height:14px}.btn-medium{background:#66ccb2;color:#444;font-weight:700;font-size:10px;line-height:14px}.btn-low{background:#cef0e8;color:#444;font-weight:700;font-size:10px;line-height:14px}.acr-note{background:#ececec;color:#222;font-size:12px;border-radius:4px;padding:4px 8px;line-height:16px;width:100%;box-sizing:border-box;margin-top:8px;font-weight:400}.acr-note strong{font-weight:700;font-size:12px;line-height:16px;color:#222}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { change: [{
                 type: Output
             }], growthRateChange: [{
@@ -7251,8 +7263,9 @@ class AnnuityPremiumCalculatorComponent {
     digitBossSwitch = {
         isVisible: false,
         isSwitchOn: false,
-        highlightText: '',
-        subText: ''
+        icon: '',
+        digitBossText: '',
+        digitBossValue: ''
     };
     digitBossToggleConfig = {
         controlType: 'toggle',
@@ -8006,6 +8019,197 @@ class AnnuityPremiumCalculatorComponent {
         "isMasterControl": true,
         "controlType": "hrLine"
     };
+    annuitypayoutObj = {
+        "controlType": "select",
+        "fieldName": "annuityPayoutOption",
+        "label": "Minimum Guaranteed Annuity Payout",
+        "placeHolder": "Select",
+        "metaId": "ALL_COM_GEN_CTRL_select_annuityPayoutOption_V1",
+        "isVisible": true,
+        "isDisable": false,
+        "validators": {
+            "isRequired": true,
+            "requiredMessage": "Please select Minimum Guaranteed Annuity Payout",
+            "minLength": null,
+            "minLengthMessage": null,
+            "maxLength": null,
+            "maxLengthMessage": null,
+            "pattern": null,
+            "patternMessage": ""
+        },
+        "options": [{
+                value: 'Monthly',
+                label: 'Monthly',
+            },
+            {
+                value: 'One Time',
+                label: 'One Time',
+            },
+            {
+                value: 'Quarterly',
+                label: 'Quarterly',
+            },
+            {
+                value: 'Half Yearly',
+                label: 'Half Yearly',
+            },
+            {
+                value: 'Yearly',
+                label: 'Yearly',
+            },],
+        "cssClass": " col-sm-12 col-md-3 col-lg-3 col-xl-3 mt-4 pr-0 pt-2",
+        "value": null,
+        "style": null,
+        "imageUrl": null,
+        "isShowLabel": true,
+        "controlStyle": {
+            "controlType": null,
+            "borderColor": null,
+            "borderWidth": "0.094rem",
+            "borderRadius": null,
+            "fontSize": "12px",
+            "fontWeight": null,
+            "fontFamily": null,
+            "color": null,
+            "background": null,
+            "caretColor": null,
+            "nudgeDisplayImage": null,
+            "dropdownOptionBgColor": null,
+            "dropdownOptionColor": null,
+            "dropdownOptionFontWeight": null,
+            "width": null,
+            "focusBorderWidth": "0.094rem",
+            "focusBorderColor": null,
+            "focusBackground": null,
+            "focusColor": null,
+            "focusDropdownOptionBgColor": null,
+            "focusDropdownOptionColor": null,
+            "focusDropdownOptionFontWeight": null,
+            "focusDropdownOptionBorderLeft": null,
+            "focusDropdownOptionBorderRadius": null,
+            "hoverBorderColor": null,
+            "hoverBorderWidth": "0.094rem",
+            "hoverColor": null,
+            "disableColor": null,
+            "disableBackground": null,
+            "errorBorderColor": null,
+            "errorBorderWidth": "0.094rem",
+            "errorColor": null,
+            "createdDate": null,
+            "padding": null,
+            "margin": null,
+            "isMasterCss": null,
+            "controlMetaId": "ALL_COM_GEN_CTRL_multipleSelect_sourceOfFundForPremium_V1",
+            "borderStyle": null,
+            "height": null,
+            "minHeight": null,
+            "maxHeight": null,
+            "minWidth": null,
+            "maxWidth": null,
+            "cssClass": null
+        },
+        "columnIndex": 2,
+        "configData": {
+            "subText": "Discount  available on some options"
+        },
+        "controlStyles": null
+    };
+    minimumAnnuityPayoutfrequencyObj = {
+        "controlType": "select",
+        "fieldName": "annuityPayoutFrequencyOption",
+        "label": "Minimum Guaranteed Annuity Payout",
+        "placeHolder": "Select",
+        "metaId": "ALL_COM_GEN_CTRL_select_annuityPayoutFrequencyOption_V1",
+        "isVisible": true,
+        "isDisable": false,
+        "validators": {
+            "isRequired": true,
+            "requiredMessage": "Please select Minimum Guaranteed Annuity Payout",
+            "minLength": null,
+            "minLengthMessage": null,
+            "maxLength": null,
+            "maxLengthMessage": null,
+            "pattern": null,
+            "patternMessage": ""
+        },
+        "options": [{
+                value: 'Monthly',
+                label: 'Monthly',
+            },
+            {
+                value: 'One Time',
+                label: 'One Time',
+            },
+            {
+                value: 'Quarterly',
+                label: 'Quarterly',
+            },
+            {
+                value: 'Half Yearly',
+                label: 'Half Yearly',
+            },
+            {
+                value: 'Yearly',
+                label: 'Yearly',
+            },
+        ],
+        "cssClass": " col-sm-12 col-md-3 col-lg-3 col-xl-3 mt-4 pr-0 pt-2",
+        "value": null,
+        "style": null,
+        "imageUrl": null,
+        "isShowLabel": true,
+        "controlStyle": {
+            "controlType": null,
+            "borderColor": null,
+            "borderWidth": "0.094rem",
+            "borderRadius": null,
+            "fontSize": "12px",
+            "fontWeight": null,
+            "fontFamily": null,
+            "color": null,
+            "background": null,
+            "caretColor": null,
+            "nudgeDisplayImage": null,
+            "dropdownOptionBgColor": null,
+            "dropdownOptionColor": null,
+            "dropdownOptionFontWeight": null,
+            "width": null,
+            "focusBorderWidth": "0.094rem",
+            "focusBorderColor": null,
+            "focusBackground": null,
+            "focusColor": null,
+            "focusDropdownOptionBgColor": null,
+            "focusDropdownOptionColor": null,
+            "focusDropdownOptionFontWeight": null,
+            "focusDropdownOptionBorderLeft": null,
+            "focusDropdownOptionBorderRadius": null,
+            "hoverBorderColor": null,
+            "hoverBorderWidth": "0.094rem",
+            "hoverColor": null,
+            "disableColor": null,
+            "disableBackground": null,
+            "errorBorderColor": null,
+            "errorBorderWidth": "0.094rem",
+            "errorColor": null,
+            "createdDate": null,
+            "padding": null,
+            "margin": null,
+            "isMasterCss": null,
+            "controlMetaId": "ALL_COM_GEN_CTRL_multipleSelect_sourceOfFundForPremium_V1",
+            "borderStyle": null,
+            "height": null,
+            "minHeight": null,
+            "maxHeight": null,
+            "minWidth": null,
+            "maxWidth": null,
+            "cssClass": null
+        },
+        "columnIndex": 2,
+        "configData": {
+            "subText": "Discount  available on some options"
+        },
+        "controlStyles": null
+    };
     constructor(masterService) {
         this.masterService = masterService;
     }
@@ -8040,7 +8244,7 @@ class AnnuityPremiumCalculatorComponent {
                     this.annuityPremiumObj['configData']['isDisableDropdown'] = this.premiumDetails()?.Premium['isDisableDropdown'];
                 }
                 if (Object.hasOwn(this.premiumDetails()?.Premium, 'options')) {
-                    this.annuityPremiumObj['options'] = this.premiumDetails()?.Premium['options'];
+                    this.annuitypayoutObj['options'] = this.premiumDetails()?.Premium['options'];
                 }
             }
             if (!this.masterService.checkIfValueIsEmpty(this.premiumDetails()?.annuity)) {
@@ -8060,7 +8264,10 @@ class AnnuityPremiumCalculatorComponent {
                     this.minimumAnnuityPayoutObj['configData']['isDisableDropdown'] = this.premiumDetails()?.annuity['isDisableDropdown'];
                 }
                 if (Object.hasOwn(this.premiumDetails()?.annuity, 'options')) {
-                    this.minimumAnnuityPayoutObj['options'] = this.premiumDetails()?.annuity['options'];
+                    this.minimumAnnuityPayoutfrequencyObj['options'] = this.premiumDetails()?.annuity['options'];
+                }
+                if (Object.hasOwn(this.premiumDetails()?.annuity, 'isVisible')) {
+                    this.minimumAnnuityPayoutObj['isVisible'] = this.premiumDetails()?.annuity['isVisible'];
                 }
             }
             if (!this.masterService.checkIfValueIsEmpty(this.premiumDetails()?.annuityTableCalculator)) {
@@ -8229,11 +8436,14 @@ class AnnuityPremiumCalculatorComponent {
         return str ? str + ' Only' : '';
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AnnuityPremiumCalculatorComponent, deps: [{ token: MasterControlService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: AnnuityPremiumCalculatorComponent, isStandalone: true, selector: "lib-annuity-premium-calculator", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, triggerValidation: { classPropertyName: "triggerValidation", publicName: "triggerValidation", isSignal: false, isRequired: false, transformFunction: null }, premiumDetails: { classPropertyName: "premiumDetails", publicName: "premiumDetails", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onCalcualteButtonClick: "onCalcualteButtonClick", onGenerateSummaryClick: "onGenerateSummaryClick", onAnnuityPremiumChange: "onAnnuityPremiumChange", onMinimumPremiumValueChange: "onMinimumPremiumValueChange", onAutioDebitValueChange: "onAutioDebitValueChange", onGuranteedAnnuityValueChange: "onGuranteedAnnuityValueChange", onDigitBossSwitchToggle: "onDigitBossSwitchToggle", onGrowthRateOptionSelected: "onGrowthRateOptionSelected" }, viewQueries: [{ propertyName: "annuityRadioRef", first: true, predicate: AnnuityCalculatorRadioComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"card px-3\" style=\"padding: 16px;\">\n  <div class=\"row\">\n    <h4 class=\"card-main-title\"><span style=\"margin-right: 12px;\"><img\n          src=\"https://cdn.godigit.com/retail-life/calculator.svg\" alt=\"annuity calculator\"></span>Here's Your Premium to Annuity Calculator</h4>\n  </div>\n  <!-- <div class=\"row\"> -->\n  <div class=\"card pb-4 px-4\" style=\"border-bottom-left-radius: 0px; border-bottom-right-radius: 0px;\">\n    <!-- <div class=\"custom-grid-template\">\n\n    </div> -->\n\n    <div class=\"row mx-auto\" style=\"transform: translate(0px, -58%);\">\n      <lib-toggle class=\"col-auto\" [field]=\"annuityPremiumToggleObj\" />\n    </div>\n    <!-- </div> -->\n    <div class=\" col-12\" style=\"\n    justify-content: center;\n    flex-direction: row;\n    display: flex;\n\">\n      <div class=\"col-5 col-lg-5 d-flex flex-column p-0\">\n        <lib-select-textbox [field]=\"annuityPremiumObj\" [(ngModel)]=\"annuityPremium\"\n          (ngModelChange)=\"onAnnuityPremiumValueChange($event)\" />\n        <div class=\"error-message\" *ngIf=\"validations.ispremiumEntry\">\n          Please enter Premium amount\n        </div>\n        <div class=\"annuity-mat-hint\" *ngIf=\"annuityPremiumObj?.configData?.numbertoword\">{{annuityPremiumObj?.configData?.numbertoword}}</div>\n        <div>\n          <lib-toggle [field]=\"enableAutoDebitObj\" [(ngModel)]=\"isEnableAutoDebit\"\n            (ngModelChange)=\"onEnableAutoDebitValueChange($event)\" />\n        </div>\n      </div>\n      <div class=\"col-2 col-lg-2 d-flex justify-content-center align-items-center\"\n        style=\"display: flex; align-items: flex-end; transform: translate(0px, 6px); position: relative; height: auto; min-height: 100%;\">\n        <!-- Top line -->\n        <div style=\"position: absolute; left: 50%; transform: translateX(-50%); width: 1px; height: calc(50% + 24px); top: -37px; background: rgba(221, 221, 221, 1); pointer-events: none;\"></div>\n        <!-- Bottom line -->\n        <div style=\"position: absolute; left: 50%; transform: translateX(-50%); width: 1px; height: calc(50% + 24px); bottom: -37px; background: rgba(221, 221, 221, 1); pointer-events: none;\"></div>\n        <lib-icon-button [field]=\"interchangeButtonObj\" />\n      </div>\n      <div class=\"col-5 col-lg-5 d-flex flex-column p-0\">\n        <lib-select-textbox [field]=\"minimumAnnuityPayoutObj\" [(ngModel)]=\"minumumAnnuityPayout\"\n          (ngModelChange)=\"onMinPremiumValueChange($event)\" />\n        <div class=\"annuity-mat-hint\" *ngIf=\"minimumAnnuityPayoutObj?.configData?.numbertoword\">{{minimumAnnuityPayoutObj?.configData?.numbertoword}}</div>\n        <div class=\"minium-annuity mt-3\" *ngIf=\"guranteedannuityObj['isVisible']\">\n          <div class=\"annuity-msg w-100 px-2 py-1\">\n            Value based on assumed 10% annual growth of Nifty 50 index.\n          </div>\n          <div class=\"w-100 px-2 py-1\">\n            <lib-radio [field]=\"guranteedannuityObj\" [(ngModel)]=\"selectedGuranteedAnnuity\"\n              (ngModelChange)=\"onGuranteedAnnuityChange($event)\" />\n          </div>\n          <div class=\"annuity-msg-1 d-flex align-items-center flex-nowrap w-100 px-2 py-1\">\n            <img src=\"https://cdn.godigit.com/digitPlusAssets/streamline_graph-arrow-increase-remix.png\"\n              style=\"max-width: 24px;\" />\n            <span>Potential for higher returns by lowering the minimum guaranteed annuity rate.</span>\n          </div>\n        </div>\n\n      </div>\n    </div>\n    <!-- <div class=\"vertical-line\"></div> -->\n    <!-- <div class=\"custom-grid-template\">\n      <div>\n        <lib-toggle [field]=\"enableAutoDebitObj\" [(ngModel)]=\"isEnableAutoDebit\"\n          (ngModelChange)=\"onEnableAutoDebitValueChange($event)\" />\n      </div>\n    </div> -->\n\n  </div>\n\n\n  <div class=\"card py-3 mb-4 border-top-0\" style=\"border-top-left-radius: 0px; border-top-right-radius: 0px;\">\n    <div class=\"mx-4\">\n      <div class=\"digit-boss-banner\" *ngIf=\"digitBossSwitch?.isVisible\">\n        <lib-toggle [field]=\"digitBossToggleConfig\" [(ngModel)]=\"this.digitBossSwitch.isSwitchOn\" (ngModelChange)=\"onDigitBossSwitchChange($event)\"></lib-toggle>\n        <div class=\"digit-boss-text\">\n          {{this.digitBossSwitch?.prefixText}}\n          <span class=\"highlight\">{{this.digitBossSwitch?.highlightText}}</span>\n          {{this.digitBossSwitch?.subText}}\n          <span class=\"arrow-icon\">\u2197</span>\n        </div>\n      </div>\n      <lib-button [field]=\"recalculateButton\" (click)=\"calculateButtonClicked()\" />\n      <div class=\"card  mb-0 mt-2\"\n        style=\"align-items: center;border:none;font-size: 8px;font-weight: 400;color:rgba(68, 68, 68, 1) \"\n        >\n        <div class=\"mx-4\" *ngIf=\"recalculateSubTextObj?.isVisible\"><img src=\"https://cdn.godigit.com/digitPlusAssets/Group+1010106336.png\"\n            style=\"margin-left: 3px;\" />\n          <span style=\"margin-left: 6px;\">Every time you make a change above, please click recalculate.</span>\n        </div>\n      </div>\n    </div>\n    <div\n      style=\"display: flex;align-items: center;justify-content: center;border:none;font-size: 10px;font-weight: 700;height:32px;background-color: rgba(255, 250, 235, 1);gap: 8px;margin: 4px;\"\n      *ngIf=\"annuityTableCalculator?.isVisible\">\n      <img src=\"https://cdn.godigit.com/retail-life/calculator.svg\" />\n      Minimum Guaranteed Payout(A) + Variable Payout(B) = Total Payout(C)\n    </div>\n    <!-- annuity calculator table -->\n    <div class=\"annuity-tables-main-container\" *ngIf=\"annuityTableCalculator?.isVisible\">\n      <div class=\"d-flex flex-row annuity-tables-container\">\n        <!-- Table 1 -->\n        <div class=\"annuity-calculator-table1\">\n          <div class=\"table-header annuitytable1-header\">Minimum Guaranteed Annuity Payout(A)</div>\n          <div class=\"table-body\">\n            <div class=\"table-cell\"><span class=\"rupee-icon\">\u20B9</span><span\n                style=\"font-size:12px; color: rgba(68, 68, 68, 1);\">\n                <{{annuityTableCalculator.annuitycalculatorTable1val1}}>\n              </span></div>\n            <button class=\"annuitytable-button\">{{annuityTableCalculator.annuitycalculatorTable1val2}}</button>\n          </div>\n        </div>\n\n        <div class=\"operator-symbol\">+</div>\n\n        <!-- Table 2 -->\n        <div class=\"annuity-calculator-table2\">\n          <div class=\"table-header annuitytable1-header\">Assume growth of BenchMark index</div>\n          <div class=\"table-body\">\n            <div class=\"table-row\">&#64;{{annuityTableCalculator.annuitycalculatorTable2val1}}</div>\n            <div class=\"table-row\">&#64;{{annuityTableCalculator.annuitycalculatorTable2val2}}</div>\n            <div class=\"table-row\">&#64;{{annuityTableCalculator.annuitycalculatorTable2val3}}</div>\n          </div>\n        </div>\n\n        <!-- Table 3 -->\n        <div class=\"annuity-calculator-table3\">\n          <div class=\"table-header annuitytable1-header\">1st Variable Annuity Payout(B)</div>\n          <div class=\"table-body\">\n            <div class=\"table-row\"><span\n                class=\"rupee-icon\">\u20B9</span>{{annuityTableCalculator.annuitycalculatorTable3val1}}</div>\n            <div class=\"table-row\"><span\n                class=\"rupee-icon\">\u20B9</span>{{annuityTableCalculator.annuitycalculatorTable3val2}}</div>\n            <div class=\"table-row\"><span\n                class=\"rupee-icon\">\u20B9</span>{{annuityTableCalculator.annuitycalculatorTable3val3}}</div>\n          </div>\n        </div>\n\n        <div class=\"operator-symbol\">=</div>\n\n        <!-- Table 4 -->\n        <div class=\"annuity-calculator-table4\">\n          <div class=\"table-header annuitytable4-header\">1st TotalPayout/Frequency(C)</div>\n          <div class=\"table-body\">\n            <div class=\"table-row annuitytable4-bg\"><span\n                class=\"rupee-icon\">\u20B9</span>{{annuityTableCalculator.annuitycalculatorTable4val1}}</div>\n            <div class=\"table-row annuitytable4-bg\"><span\n                class=\"rupee-icon\">\u20B9</span>{{annuityTableCalculator.annuitycalculatorTable4val2}}</div>\n            <div class=\"table-row annuitytable4-bg\"><span\n                class=\"rupee-icon\">\u20B9</span>{{annuityTableCalculator.annuitycalculatorTable4val3}}</div>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"annuity-calculator-paragraph\" *ngIf=\"annuityTableCalculator?.isVisible\">\n      <span class=\"annuity-calculator-paragraph1\">This is an assumed growth percentage for the index basis which the\n        values in columns B and C are calculated.</span> Actual growth will depend on index performance and may affect\n      your variable annuity payout and total annuity payout.\n    </div>\n\n    <div *ngIf=\"growthRateObj.isVisible\">\n      <lib-annuity-calculator-radio\n        [field]=\"growthRateObj\"\n        [(ngModel)]=\"growthRateOption\"\n        (change)=\"onGrowthRateRadioChange($event)\"\n        (growthRateChange)=\"onGrowthRateCardChange($event)\" />\n    </div>\n\n    <div *ngIf=\"hrLineObj.isVisible\" class=\"generateSummary\">\n      <lib-hr-line [field]=\"hrLineObj\" />\n    </div>\n\n    <div *ngIf=\"generateSummaryObj.isVisible\" class=\"generateSummary\">\n      <lib-button [field]=\"generateSummaryObj\" (click)=\"generateSummaryClicked()\" />\n    </div>\n  </div>\n", styles: [".card-main-title{font-size:16px;font-family:Mulish!important;letter-spacing:0px!important;font-weight:800;line-height:24px;padding-bottom:16px}.col-5-5{flex:0 0 auto;max-width:44.16666667%}.custom-grid-template{display:grid;grid-template-columns:4fr .5fr 4fr;align-items:end}.vertical-line{border-left:2px solid #ccc;height:100px;margin:0 10px}.error-message{font-size:12px;font-weight:500;color:#e00;letter-spacing:0px}.annuity-msg{padding:4px 6px;margin-top:8px;font-size:10px;font-weight:400;color:#444;background-color:#e5f0fa;height:fit-content}.annuity-msg-1{padding:4px 6px;margin-top:8px;font-size:10px;font-weight:400;color:#444;background-color:#e6f7f3;height:fit-content;flex-wrap:nowrap!important}.annuity-tables-main-container{border:2px solid rgba(221,221,221,1);border-radius:8px;display:flex}.annuity-tables-container{display:flex;align-items:stretch;gap:0;width:100%}.annuity-calculator-table1,.annuity-calculator-table2,.annuity-calculator-table3,.annuity-calculator-table4{display:flex;flex-direction:column;height:100%;flex:1;color:#444;font-weight:400;font-size:10px}.annuity-calculator-table1{border-right:1px solid rgba(221,221,221,1)}.annuity-calculator-table2{border-left:1px solid rgba(221,221,221,1);border-right:1px solid rgba(221,221,221,1)}.annuity-calculator-table3{border-right:1px solid rgba(221,221,221,1)}.annuity-calculator-table4{border-left:1px solid rgba(221,221,221,1)}.table-header{padding:12px;font-size:10px;font-weight:700;text-align:center;border-bottom:1px solid rgba(221,221,221,1);height:60px;display:flex;align-items:center;justify-content:center;word-wrap:break-word;word-break:break-word;hyphens:auto}.annuitytable1-header{background-color:#ececec;color:#444}.annuitytable4-header{background-color:#fb03;color:#444}.table-body{display:flex;flex-direction:column;flex:1}.table-cell{padding:12px;text-align:center;font-size:16px;font-weight:600;flex:1;display:flex;flex-direction:row;justify-content:center;align-items:center;gap:4px}.annuity-mat-hint{font-size:8px;text-align:start;font-weight:400;color:#444;letter-spacing:0px}.table-row{padding:12px;text-align:center;font-size:14px;font-weight:500;background-color:#fff;border-bottom:1px solid #999;flex:1;display:flex;align-items:center;justify-content:center}.table-row:last-child{border-bottom:none}.annuitytable4-bg{background-color:#e6f7f3!important;color:#444}.annuitytable-button{background-color:#ececec;border:none;border-radius:4px;padding:2px 8px;font-size:10px;font-weight:700;cursor:pointer;margin-top:0;width:auto;min-width:30%;max-width:90%;height:24px;display:block;margin-left:auto;margin-right:auto;position:relative;bottom:40px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.rupee-icon{font-weight:700;margin-right:2px;font-size:12px;color:#444}.operator-symbol{display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:700;padding:0 16px;color:#f90}.annuity-calculator-paragraph{padding:16px 8px 4px;font-size:10px;margin:0 0 20px auto;width:73%;font-weight:400;color:#444;background-color:#ebf1ff}.annuity-calculator-paragraph1{font-weight:700;font-size:10px}.minium-annuity{display:flex;flex-direction:column}@media (max-width: 991px) and (min-width: 768px){.table-header{padding:8px 4px;font-size:9px;line-height:1.1}}@media (max-width: 767px) and (min-width: 576px){.table-header{padding:10px 6px;font-size:9px}}@media (max-width: 575px){.table-header{padding:8px 4px;font-size:8px}}@media (max-width: 575px){.annuity-msg{font-size:10px;line-height:1;height:fit-content}}@media (max-width: 575px){.annuity-msg-1{font-size:10px;line-height:1;flex-wrap:nowrap!important;height:fit-content}.annuity-msg-1 .img{width:4px;height:4px}}@media (max-width: 991px) and (min-width: 768px){.annuity-msg,.annuity-msg-1{font-size:9px;line-height:1.1;height:fit-content}}@media (max-width: 767px) and (min-width: 576px){.annuity-msg,.annuity-msg-1{font-size:10px;line-height:1.1;height:fit-content}}.digit-boss-banner{background-color:#333;color:#fff;display:flex;align-items:center;padding:8px 16px;border-radius:4px;margin-bottom:16px;gap:8px;font-size:12px;min-height:16px;opacity:1;transform:rotate(0)}.digit-boss-banner ::ng-deep .toggle-background{margin-top:0!important;padding:0!important;background-color:transparent!important;border:none!important}.digit-boss-banner ::ng-deep .toggle_switch{margin-top:0!important;gap:0!important}.digit-boss-text{display:flex;align-items:center;gap:4px;white-space:nowrap}.highlight{color:#fb0;font-weight:700}.arrow-icon{color:#fb0;margin-left:4px;font-size:14px}.generateSummary{margin-right:.4rem;margin-left:.4rem}\n"], dependencies: [{ kind: "component", type: AnnuityCalculatorRadioComponent, selector: "lib-annuity-calculator-radio", inputs: ["reactiveFormControlobject", "field"], outputs: ["change", "growthRateChange"] }, { kind: "component", type: HrLineComponent, selector: "lib-hr-line", inputs: ["field"] }, { kind: "component", type: ToggleComponent, selector: "lib-toggle", inputs: ["field", "reactiveFormControlobject"], outputs: ["change"] }, { kind: "component", type: SelectTextboxComponent, selector: "lib-select-textbox", inputs: ["field", "reactiveFormControlobject"], outputs: ["selectionChange"] }, { kind: "component", type: ButtonComponent, selector: "lib-button", inputs: ["field"] }, { kind: "component", type: IconButtonComponent, selector: "lib-icon-button", inputs: ["field"] }, { kind: "component", type: RadioComponent, selector: "lib-radio", inputs: ["reactiveFormControlobject", "field"], outputs: ["change"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: AnnuityPremiumCalculatorComponent, isStandalone: true, selector: "lib-annuity-premium-calculator", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, triggerValidation: { classPropertyName: "triggerValidation", publicName: "triggerValidation", isSignal: false, isRequired: false, transformFunction: null }, premiumDetails: { classPropertyName: "premiumDetails", publicName: "premiumDetails", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onCalcualteButtonClick: "onCalcualteButtonClick", onGenerateSummaryClick: "onGenerateSummaryClick", onAnnuityPremiumChange: "onAnnuityPremiumChange", onMinimumPremiumValueChange: "onMinimumPremiumValueChange", onAutioDebitValueChange: "onAutioDebitValueChange", onGuranteedAnnuityValueChange: "onGuranteedAnnuityValueChange", onDigitBossSwitchToggle: "onDigitBossSwitchToggle", onGrowthRateOptionSelected: "onGrowthRateOptionSelected" }, viewQueries: [{ propertyName: "annuityRadioRef", first: true, predicate: AnnuityCalculatorRadioComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"card px-3\" style=\"padding: 16px;\">\n  <div class=\"row\">\n    <h4 class=\"card-main-title\"><span style=\"margin-right: 12px;\"><img\n          src=\"https://cdn.godigit.com/retail-life/calculator.svg\" alt=\"annuity calculator\"></span>Here's Your Premium to Annuity Calculator</h4>\n  </div>\n  <!-- <div class=\"row\"> -->\n  <div class=\"card pb-4 px-4\" style=\"border-bottom-left-radius: 0px; border-bottom-right-radius: 0px;\">\n    <!-- <div class=\"custom-grid-template\">\n\n    </div> -->\n\n    <div class=\"row mx-auto\" style=\"transform: translate(0px, -58%);\">\n      <lib-toggle class=\"col-auto\" [field]=\"annuityPremiumToggleObj\" />\n    </div>\n    <!-- </div> -->\n    <div class=\" col-12\" style=\"\n    justify-content: center;\n    flex-direction: row;\n    display: flex;\n\">\n      <div class=\"col-5 col-lg-5 d-flex flex-column p-0\">\n        <lib-amount-textbox [field]=\"annuityPremiumObj\" [(ngModel)]=\"annuityPremium['textValue']\"\n          (ngModelChange)=\"onAnnuityPremiumValueChange($event)\" />\n        <div class=\"error-message\" *ngIf=\"validations.ispremiumEntry\">\n          Please enter Premium amount\n        </div>\n        <div class=\"annuity-mat-hint\" *ngIf=\"annuityPremiumObj?.configData?.numbertoword\">{{annuityPremiumObj?.configData?.numbertoword}}</div>\n\n        <lib-select [field]=\"annuitypayoutObj\" [(ngModel)]=\"annuityPremium['selectValue']\"\n          (ngModelChange)=\"onAnnuityPremiumValueChange($event)\" />\n        <div>\n          <lib-toggle [field]=\"enableAutoDebitObj\" [(ngModel)]=\"isEnableAutoDebit\"\n            (ngModelChange)=\"onEnableAutoDebitValueChange($event)\" />\n        </div>\n      </div>\n      <div class=\"col-2 col-lg-2 d-flex justify-content-center align-items-center\"\n        style=\"display: flex; align-items: flex-end; transform: translate(0px, 6px); position: relative; height: auto; min-height: 100%;\">\n        <!-- Top line -->\n        <div style=\"position: absolute; left: 50%; transform: translateX(-50%); width: 1px; height: calc(50% + 24px); top: -37px; background: rgba(221, 221, 221, 1); pointer-events: none;\"></div>\n        <!-- Bottom line -->\n        <div style=\"position: absolute; left: 50%; transform: translateX(-50%); width: 1px; height: calc(50% + 24px); bottom: -37px; background: rgba(221, 221, 221, 1); pointer-events: none;\"></div>\n        <lib-icon-button [field]=\"interchangeButtonObj\" />\n      </div>\n      <div class=\"col-5 col-lg-5 d-flex flex-column p-0\" *ngIf=\"minimumAnnuityPayoutObj.isVisible; else emptyRightCol\">\n        <lib-amount-textbox [field]=\"minimumAnnuityPayoutObj\" [(ngModel)]=\"minumumAnnuityPayout['textValue']\"\n          (ngModelChange)=\"onMinPremiumValueChange($event)\" />\n        <div class=\"annuity-mat-hint\" *ngIf=\"minimumAnnuityPayoutObj?.configData?.numbertoword\">{{minimumAnnuityPayoutObj?.configData?.numbertoword}}</div>\n        <lib-select [field]=\"minimumAnnuityPayoutfrequencyObj\" [(ngModel)]=\"minumumAnnuityPayout['selectValue']\"\n          (ngModelChange)=\"onMinPremiumValueChange($event)\" />\n        <div class=\"minium-annuity mt-3\" *ngIf=\"guranteedannuityObj['isVisible']\">\n          <div class=\"annuity-msg w-100 px-2 py-1\">\n            Value based on assumed 10% annual growth of Nifty 50 index.\n          </div>\n          <div class=\"w-100 px-2 py-1\">\n            <lib-radio [field]=\"guranteedannuityObj\" [(ngModel)]=\"selectedGuranteedAnnuity\"\n              (ngModelChange)=\"onGuranteedAnnuityChange($event)\" />\n          </div>\n          <div class=\"annuity-msg-1 d-flex align-items-center flex-nowrap w-100 px-2 py-1\">\n            <img src=\"https://cdn.godigit.com/digitPlusAssets/streamline_graph-arrow-increase-remix.png\"\n              style=\"max-width: 24px;\" />\n            <span>Potential for higher returns by lowering the minimum guaranteed annuity rate.</span>\n          </div>\n        </div>\n\n      </div>\n      <ng-template #emptyRightCol>\n        <div class=\"col-5 col-lg-5 p-0\"></div>\n      </ng-template>\n    </div>\n    <!-- <div class=\"vertical-line\"></div> -->\n    <!-- <div class=\"custom-grid-template\">\n      <div>\n        <lib-toggle [field]=\"enableAutoDebitObj\" [(ngModel)]=\"isEnableAutoDebit\"\n          (ngModelChange)=\"onEnableAutoDebitValueChange($event)\" />\n      </div>\n    </div> -->\n\n  </div>\n\n\n  <div class=\"card py-3 mb-4 border-top-0\" style=\"border-top-left-radius: 0px; border-top-right-radius: 0px;\">\n    <div class=\"mx-4\">\n      <div class=\"digit-boss-banner\" *ngIf=\"digitBossSwitch?.isVisible\">\n        <lib-toggle [field]=\"digitBossToggleConfig\" [(ngModel)]=\"this.digitBossSwitch.isSwitchOn\" (ngModelChange)=\"onDigitBossSwitchChange($event)\"></lib-toggle>\n        <div class=\"digit-boss-text\">\n          {{this.digitBossSwitch?.prefixText}}\n          <span class=\"highlight\">{{this.digitBossSwitch?.highlightText}}</span>\n          {{this.digitBossSwitch?.subText}}\n          <span class=\"arrow-icon\">\u2197</span>\n        </div>\n      </div>\n      <lib-button [field]=\"recalculateButton\" (click)=\"calculateButtonClicked()\" />\n\n      <!-- //digit boss updated design -->\n        <div class=\"col-12 mt-3\" style=\"\n    justify-content: center;\n    flex-direction: row;\n    display: flex;\" *ngIf=\"!minimumAnnuityPayoutObj.isVisible\">\n      <div class=\"col-5 col-lg-5 d-flex flex-column p-0\">\n        <lib-select [field]=\"minimumAnnuityPayoutfrequencyObj\" [(ngModel)]=\"minumumAnnuityPayout['selectValue']\"\n          (ngModelChange)=\"onMinPremiumValueChange($event)\" />\n      </div>\n\n      <div class=\"col-2 col-lg-2\"></div>\n\n      <div class=\"col-5 col-lg-5 d-flex flex-column justify-content-center p-0\">\n        <div class=\"realistic-picture-card\">\n          <div class=\"realistic-picture-header\">\n            <img *ngIf=\"digitBossSwitch?.icon\" [src]=\"digitBossSwitch?.icon\" style=\"width:12px;height:12px;object-fit:contain;flex-shrink:0;\" />\n            <span class=\"realistic-picture-label\">Realistic Picture:</span>\n          </div>\n          <span class=\"realistic-picture-text\">\n            {{digitBossSwitch?.digitBossText}} <span class=\"realistic-picture-highlight\">{{digitBossSwitch?.digitBossValue}}</span>\n          </span>\n        </div>\n      </div>\n\n</div>\n\n      <div class=\"card  mb-0 mt-2\"\n        style=\"align-items: center;border:none;font-size: 8px;font-weight: 400;color:rgba(68, 68, 68, 1) \"\n        >\n        <div class=\"mx-4\" *ngIf=\"recalculateSubTextObj?.isVisible\"><img src=\"https://cdn.godigit.com/digitPlusAssets/Group+1010106336.png\"\n            style=\"margin-left: 3px;\" />\n          <span style=\"margin-left: 6px;\">Every time you make a change above, please click recalculate.</span>\n        </div>\n      </div>\n    </div>\n    <div\n      style=\"display: flex;align-items: center;justify-content: center;border:none;font-size: 10px;font-weight: 700;height:32px;background-color: rgba(255, 250, 235, 1);gap: 8px;margin: 4px;\"\n      *ngIf=\"annuityTableCalculator?.isVisible\">\n      <img src=\"https://cdn.godigit.com/retail-life/calculator.svg\" />\n      Minimum Guaranteed Payout(A) + Variable Payout(B) = Total Payout(C)\n    </div>\n    <!-- annuity calculator table -->\n    <div class=\"annuity-tables-main-container\" *ngIf=\"annuityTableCalculator?.isVisible\">\n      <div class=\"d-flex flex-row annuity-tables-container\">\n        <!-- Table 1 -->\n        <div class=\"annuity-calculator-table1\">\n          <div class=\"table-header annuitytable1-header\">Minimum Guaranteed Annuity Payout(A)</div>\n          <div class=\"table-body\">\n            <div class=\"table-cell\"><span class=\"rupee-icon\">\u20B9</span><span\n                style=\"font-size:12px; color: rgba(68, 68, 68, 1);\">\n                <{{annuityTableCalculator.annuitycalculatorTable1val1}}>\n              </span></div>\n            <button class=\"annuitytable-button\">{{annuityTableCalculator.annuitycalculatorTable1val2}}</button>\n          </div>\n        </div>\n\n        <div class=\"operator-symbol\">+</div>\n\n        <!-- Table 2 -->\n        <div class=\"annuity-calculator-table2\">\n          <div class=\"table-header annuitytable1-header\">Assume growth of BenchMark index</div>\n          <div class=\"table-body\">\n            <div class=\"table-row\">&#64;{{annuityTableCalculator.annuitycalculatorTable2val1}}</div>\n            <div class=\"table-row\">&#64;{{annuityTableCalculator.annuitycalculatorTable2val2}}</div>\n            <div class=\"table-row\">&#64;{{annuityTableCalculator.annuitycalculatorTable2val3}}</div>\n          </div>\n        </div>\n\n        <!-- Table 3 -->\n        <div class=\"annuity-calculator-table3\">\n          <div class=\"table-header annuitytable1-header\">1st Variable Annuity Payout(B)</div>\n          <div class=\"table-body\">\n            <div class=\"table-row\"><span\n                class=\"rupee-icon\">\u20B9</span>{{annuityTableCalculator.annuitycalculatorTable3val1}}</div>\n            <div class=\"table-row\"><span\n                class=\"rupee-icon\">\u20B9</span>{{annuityTableCalculator.annuitycalculatorTable3val2}}</div>\n            <div class=\"table-row\"><span\n                class=\"rupee-icon\">\u20B9</span>{{annuityTableCalculator.annuitycalculatorTable3val3}}</div>\n          </div>\n        </div>\n\n        <div class=\"operator-symbol\">=</div>\n\n        <!-- Table 4 -->\n        <div class=\"annuity-calculator-table4\">\n          <div class=\"table-header annuitytable4-header\">1st TotalPayout/Frequency(C)</div>\n          <div class=\"table-body\">\n            <div class=\"table-row annuitytable4-bg\"><span\n                class=\"rupee-icon\">\u20B9</span>{{annuityTableCalculator.annuitycalculatorTable4val1}}</div>\n            <div class=\"table-row annuitytable4-bg\"><span\n                class=\"rupee-icon\">\u20B9</span>{{annuityTableCalculator.annuitycalculatorTable4val2}}</div>\n            <div class=\"table-row annuitytable4-bg\"><span\n                class=\"rupee-icon\">\u20B9</span>{{annuityTableCalculator.annuitycalculatorTable4val3}}</div>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"annuity-calculator-paragraph\" *ngIf=\"annuityTableCalculator?.isVisible\">\n      <span class=\"annuity-calculator-paragraph1\">This is an assumed growth percentage for the index basis which the\n        values in columns B and C are calculated.</span> Actual growth will depend on index performance and may affect\n      your variable annuity payout and total annuity payout.\n    </div>\n\n    <div *ngIf=\"growthRateObj.isVisible\">\n      <lib-annuity-calculator-radio\n        [field]=\"growthRateObj\"\n        [(ngModel)]=\"growthRateOption\"\n        (change)=\"onGrowthRateRadioChange($event)\"\n        (growthRateChange)=\"onGrowthRateCardChange($event)\" />\n    </div>\n\n    <div *ngIf=\"hrLineObj.isVisible\" class=\"generateSummary\">\n      <lib-hr-line [field]=\"hrLineObj\" />\n    </div>\n\n    <div *ngIf=\"generateSummaryObj.isVisible\" class=\"generateSummary\">\n      <lib-button [field]=\"generateSummaryObj\" (click)=\"generateSummaryClicked()\" />\n    </div>\n  </div>\n", styles: [".card-main-title{font-size:16px;font-family:Mulish!important;letter-spacing:0px!important;font-weight:800;line-height:24px;padding-bottom:16px}.col-5-5{flex:0 0 auto;max-width:44.16666667%}.custom-grid-template{display:grid;grid-template-columns:4fr .5fr 4fr;align-items:end}.vertical-line{border-left:2px solid #ccc;height:100px;margin:0 10px}.error-message{font-size:12px;font-weight:500;color:#e00;letter-spacing:0px}.annuity-msg{padding:4px 6px;margin-top:8px;font-size:10px;font-weight:400;color:#444;background-color:#e5f0fa;height:fit-content}.annuity-msg-1{padding:4px 6px;margin-top:8px;font-size:10px;font-weight:400;color:#444;background-color:#e6f7f3;height:fit-content;flex-wrap:nowrap!important}.annuity-tables-main-container{border:2px solid rgba(221,221,221,1);border-radius:8px;display:flex}.annuity-tables-container{display:flex;align-items:stretch;gap:0;width:100%}.annuity-calculator-table1,.annuity-calculator-table2,.annuity-calculator-table3,.annuity-calculator-table4{display:flex;flex-direction:column;height:100%;flex:1;color:#444;font-weight:400;font-size:10px}.annuity-calculator-table1{border-right:1px solid rgba(221,221,221,1)}.annuity-calculator-table2{border-left:1px solid rgba(221,221,221,1);border-right:1px solid rgba(221,221,221,1)}.annuity-calculator-table3{border-right:1px solid rgba(221,221,221,1)}.annuity-calculator-table4{border-left:1px solid rgba(221,221,221,1)}.table-header{padding:12px;font-size:10px;font-weight:700;text-align:center;border-bottom:1px solid rgba(221,221,221,1);height:60px;display:flex;align-items:center;justify-content:center;word-wrap:break-word;word-break:break-word;hyphens:auto}.annuitytable1-header{background-color:#ececec;color:#444}.annuitytable4-header{background-color:#fb03;color:#444}.table-body{display:flex;flex-direction:column;flex:1}.table-cell{padding:12px;text-align:center;font-size:16px;font-weight:600;flex:1;display:flex;flex-direction:row;justify-content:center;align-items:center;gap:4px}.annuity-mat-hint{font-size:8px;text-align:start;font-weight:400;color:#444;letter-spacing:0px}.table-row{padding:12px;text-align:center;font-size:14px;font-weight:500;background-color:#fff;border-bottom:1px solid #999;flex:1;display:flex;align-items:center;justify-content:center}.table-row:last-child{border-bottom:none}.annuitytable4-bg{background-color:#e6f7f3!important;color:#444}.annuitytable-button{background-color:#ececec;border:none;border-radius:4px;padding:2px 8px;font-size:10px;font-weight:700;cursor:pointer;margin-top:0;width:auto;min-width:30%;max-width:90%;height:24px;display:block;margin-left:auto;margin-right:auto;position:relative;bottom:40px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.rupee-icon{font-weight:700;margin-right:2px;font-size:12px;color:#444}.operator-symbol{display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:700;padding:0 16px;color:#f90}.annuity-calculator-paragraph{padding:16px 8px 4px;font-size:10px;margin:0 0 20px auto;width:73%;font-weight:400;color:#444;background-color:#ebf1ff}.annuity-calculator-paragraph1{font-weight:700;font-size:10px}.minium-annuity{display:flex;flex-direction:column}@media (max-width: 991px) and (min-width: 768px){.table-header{padding:8px 4px;font-size:9px;line-height:1.1}}@media (max-width: 767px) and (min-width: 576px){.table-header{padding:10px 6px;font-size:9px}}@media (max-width: 575px){.table-header{padding:8px 4px;font-size:8px}}@media (max-width: 575px){.annuity-msg{font-size:10px;line-height:1;height:fit-content}}@media (max-width: 575px){.annuity-msg-1{font-size:10px;line-height:1;flex-wrap:nowrap!important;height:fit-content}.annuity-msg-1 .img{width:4px;height:4px}}@media (max-width: 991px) and (min-width: 768px){.annuity-msg,.annuity-msg-1{font-size:9px;line-height:1.1;height:fit-content}}@media (max-width: 767px) and (min-width: 576px){.annuity-msg,.annuity-msg-1{font-size:10px;line-height:1.1;height:fit-content}}.digit-boss-banner{background-color:#333;color:#fff;display:flex;align-items:center;padding:8px 16px;border-radius:4px;margin-bottom:16px;gap:8px;font-size:12px;min-height:16px;opacity:1;transform:rotate(0)}.digit-boss-banner ::ng-deep .toggle-background{margin-top:0!important;padding:0!important;background-color:transparent!important;border:none!important}.digit-boss-banner ::ng-deep .toggle_switch{margin-top:0!important;gap:0!important}.digit-boss-text{display:flex;align-items:center;gap:4px;white-space:nowrap}.highlight{color:#fb0;font-weight:700}.arrow-icon{color:#fb0;margin-left:4px;font-size:14px}.generateSummary{margin-right:.4rem;margin-left:.4rem}.realistic-picture-card{display:flex;flex-direction:column;gap:4px;background-color:#cce0f5;border-radius:4px;padding:4px 6px;font-size:8px;color:#06c;line-height:1.5;box-sizing:border-box;justify-content:center}.realistic-picture-header{display:flex;align-items:center;gap:4px}.realistic-picture-content{display:flex;flex-direction:column;gap:2px}.realistic-picture-label{font-weight:700;font-size:8px;line-height:8px;color:#06c}.realistic-picture-text{font-weight:600;font-size:10px;line-height:14px;color:#222}.realistic-picture-highlight{font-weight:800;font-size:10px;line-height:14px;color:#0048ad}\n"], dependencies: [{ kind: "component", type: SelectComponent, selector: "lib-select", inputs: ["field", "reactiveFormControlobject"], outputs: ["selectionChange", "infoClick"] }, { kind: "component", type: AmountTextboxComponent, selector: "lib-amount-textbox", inputs: ["field", "reactiveFormControlobject"], outputs: ["blur"] }, { kind: "component", type: AnnuityCalculatorRadioComponent, selector: "lib-annuity-calculator-radio", inputs: ["reactiveFormControlobject", "field"], outputs: ["change", "growthRateChange"] }, { kind: "component", type: HrLineComponent, selector: "lib-hr-line", inputs: ["field"] }, { kind: "component", type: ToggleComponent, selector: "lib-toggle", inputs: ["field", "reactiveFormControlobject"], outputs: ["change"] }, { kind: "component", type: ButtonComponent, selector: "lib-button", inputs: ["field"] }, { kind: "component", type: IconButtonComponent, selector: "lib-icon-button", inputs: ["field"] }, { kind: "component", type: RadioComponent, selector: "lib-radio", inputs: ["reactiveFormControlobject", "field"], outputs: ["change"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AnnuityPremiumCalculatorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lib-annuity-premium-calculator', standalone: true, imports: [
+                        InfoComponent,
+                        SelectComponent,
+                        AmountTextboxComponent,
                         AnnuityCalculatorRadioComponent,
                         HrLineComponent,
                         ToggleComponent,
@@ -8243,7 +8453,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         RadioComponent,
                         CommonModule,
                         FormsModule
-                    ], template: "<div class=\"card px-3\" style=\"padding: 16px;\">\n  <div class=\"row\">\n    <h4 class=\"card-main-title\"><span style=\"margin-right: 12px;\"><img\n          src=\"https://cdn.godigit.com/retail-life/calculator.svg\" alt=\"annuity calculator\"></span>Here's Your Premium to Annuity Calculator</h4>\n  </div>\n  <!-- <div class=\"row\"> -->\n  <div class=\"card pb-4 px-4\" style=\"border-bottom-left-radius: 0px; border-bottom-right-radius: 0px;\">\n    <!-- <div class=\"custom-grid-template\">\n\n    </div> -->\n\n    <div class=\"row mx-auto\" style=\"transform: translate(0px, -58%);\">\n      <lib-toggle class=\"col-auto\" [field]=\"annuityPremiumToggleObj\" />\n    </div>\n    <!-- </div> -->\n    <div class=\" col-12\" style=\"\n    justify-content: center;\n    flex-direction: row;\n    display: flex;\n\">\n      <div class=\"col-5 col-lg-5 d-flex flex-column p-0\">\n        <lib-select-textbox [field]=\"annuityPremiumObj\" [(ngModel)]=\"annuityPremium\"\n          (ngModelChange)=\"onAnnuityPremiumValueChange($event)\" />\n        <div class=\"error-message\" *ngIf=\"validations.ispremiumEntry\">\n          Please enter Premium amount\n        </div>\n        <div class=\"annuity-mat-hint\" *ngIf=\"annuityPremiumObj?.configData?.numbertoword\">{{annuityPremiumObj?.configData?.numbertoword}}</div>\n        <div>\n          <lib-toggle [field]=\"enableAutoDebitObj\" [(ngModel)]=\"isEnableAutoDebit\"\n            (ngModelChange)=\"onEnableAutoDebitValueChange($event)\" />\n        </div>\n      </div>\n      <div class=\"col-2 col-lg-2 d-flex justify-content-center align-items-center\"\n        style=\"display: flex; align-items: flex-end; transform: translate(0px, 6px); position: relative; height: auto; min-height: 100%;\">\n        <!-- Top line -->\n        <div style=\"position: absolute; left: 50%; transform: translateX(-50%); width: 1px; height: calc(50% + 24px); top: -37px; background: rgba(221, 221, 221, 1); pointer-events: none;\"></div>\n        <!-- Bottom line -->\n        <div style=\"position: absolute; left: 50%; transform: translateX(-50%); width: 1px; height: calc(50% + 24px); bottom: -37px; background: rgba(221, 221, 221, 1); pointer-events: none;\"></div>\n        <lib-icon-button [field]=\"interchangeButtonObj\" />\n      </div>\n      <div class=\"col-5 col-lg-5 d-flex flex-column p-0\">\n        <lib-select-textbox [field]=\"minimumAnnuityPayoutObj\" [(ngModel)]=\"minumumAnnuityPayout\"\n          (ngModelChange)=\"onMinPremiumValueChange($event)\" />\n        <div class=\"annuity-mat-hint\" *ngIf=\"minimumAnnuityPayoutObj?.configData?.numbertoword\">{{minimumAnnuityPayoutObj?.configData?.numbertoword}}</div>\n        <div class=\"minium-annuity mt-3\" *ngIf=\"guranteedannuityObj['isVisible']\">\n          <div class=\"annuity-msg w-100 px-2 py-1\">\n            Value based on assumed 10% annual growth of Nifty 50 index.\n          </div>\n          <div class=\"w-100 px-2 py-1\">\n            <lib-radio [field]=\"guranteedannuityObj\" [(ngModel)]=\"selectedGuranteedAnnuity\"\n              (ngModelChange)=\"onGuranteedAnnuityChange($event)\" />\n          </div>\n          <div class=\"annuity-msg-1 d-flex align-items-center flex-nowrap w-100 px-2 py-1\">\n            <img src=\"https://cdn.godigit.com/digitPlusAssets/streamline_graph-arrow-increase-remix.png\"\n              style=\"max-width: 24px;\" />\n            <span>Potential for higher returns by lowering the minimum guaranteed annuity rate.</span>\n          </div>\n        </div>\n\n      </div>\n    </div>\n    <!-- <div class=\"vertical-line\"></div> -->\n    <!-- <div class=\"custom-grid-template\">\n      <div>\n        <lib-toggle [field]=\"enableAutoDebitObj\" [(ngModel)]=\"isEnableAutoDebit\"\n          (ngModelChange)=\"onEnableAutoDebitValueChange($event)\" />\n      </div>\n    </div> -->\n\n  </div>\n\n\n  <div class=\"card py-3 mb-4 border-top-0\" style=\"border-top-left-radius: 0px; border-top-right-radius: 0px;\">\n    <div class=\"mx-4\">\n      <div class=\"digit-boss-banner\" *ngIf=\"digitBossSwitch?.isVisible\">\n        <lib-toggle [field]=\"digitBossToggleConfig\" [(ngModel)]=\"this.digitBossSwitch.isSwitchOn\" (ngModelChange)=\"onDigitBossSwitchChange($event)\"></lib-toggle>\n        <div class=\"digit-boss-text\">\n          {{this.digitBossSwitch?.prefixText}}\n          <span class=\"highlight\">{{this.digitBossSwitch?.highlightText}}</span>\n          {{this.digitBossSwitch?.subText}}\n          <span class=\"arrow-icon\">\u2197</span>\n        </div>\n      </div>\n      <lib-button [field]=\"recalculateButton\" (click)=\"calculateButtonClicked()\" />\n      <div class=\"card  mb-0 mt-2\"\n        style=\"align-items: center;border:none;font-size: 8px;font-weight: 400;color:rgba(68, 68, 68, 1) \"\n        >\n        <div class=\"mx-4\" *ngIf=\"recalculateSubTextObj?.isVisible\"><img src=\"https://cdn.godigit.com/digitPlusAssets/Group+1010106336.png\"\n            style=\"margin-left: 3px;\" />\n          <span style=\"margin-left: 6px;\">Every time you make a change above, please click recalculate.</span>\n        </div>\n      </div>\n    </div>\n    <div\n      style=\"display: flex;align-items: center;justify-content: center;border:none;font-size: 10px;font-weight: 700;height:32px;background-color: rgba(255, 250, 235, 1);gap: 8px;margin: 4px;\"\n      *ngIf=\"annuityTableCalculator?.isVisible\">\n      <img src=\"https://cdn.godigit.com/retail-life/calculator.svg\" />\n      Minimum Guaranteed Payout(A) + Variable Payout(B) = Total Payout(C)\n    </div>\n    <!-- annuity calculator table -->\n    <div class=\"annuity-tables-main-container\" *ngIf=\"annuityTableCalculator?.isVisible\">\n      <div class=\"d-flex flex-row annuity-tables-container\">\n        <!-- Table 1 -->\n        <div class=\"annuity-calculator-table1\">\n          <div class=\"table-header annuitytable1-header\">Minimum Guaranteed Annuity Payout(A)</div>\n          <div class=\"table-body\">\n            <div class=\"table-cell\"><span class=\"rupee-icon\">\u20B9</span><span\n                style=\"font-size:12px; color: rgba(68, 68, 68, 1);\">\n                <{{annuityTableCalculator.annuitycalculatorTable1val1}}>\n              </span></div>\n            <button class=\"annuitytable-button\">{{annuityTableCalculator.annuitycalculatorTable1val2}}</button>\n          </div>\n        </div>\n\n        <div class=\"operator-symbol\">+</div>\n\n        <!-- Table 2 -->\n        <div class=\"annuity-calculator-table2\">\n          <div class=\"table-header annuitytable1-header\">Assume growth of BenchMark index</div>\n          <div class=\"table-body\">\n            <div class=\"table-row\">&#64;{{annuityTableCalculator.annuitycalculatorTable2val1}}</div>\n            <div class=\"table-row\">&#64;{{annuityTableCalculator.annuitycalculatorTable2val2}}</div>\n            <div class=\"table-row\">&#64;{{annuityTableCalculator.annuitycalculatorTable2val3}}</div>\n          </div>\n        </div>\n\n        <!-- Table 3 -->\n        <div class=\"annuity-calculator-table3\">\n          <div class=\"table-header annuitytable1-header\">1st Variable Annuity Payout(B)</div>\n          <div class=\"table-body\">\n            <div class=\"table-row\"><span\n                class=\"rupee-icon\">\u20B9</span>{{annuityTableCalculator.annuitycalculatorTable3val1}}</div>\n            <div class=\"table-row\"><span\n                class=\"rupee-icon\">\u20B9</span>{{annuityTableCalculator.annuitycalculatorTable3val2}}</div>\n            <div class=\"table-row\"><span\n                class=\"rupee-icon\">\u20B9</span>{{annuityTableCalculator.annuitycalculatorTable3val3}}</div>\n          </div>\n        </div>\n\n        <div class=\"operator-symbol\">=</div>\n\n        <!-- Table 4 -->\n        <div class=\"annuity-calculator-table4\">\n          <div class=\"table-header annuitytable4-header\">1st TotalPayout/Frequency(C)</div>\n          <div class=\"table-body\">\n            <div class=\"table-row annuitytable4-bg\"><span\n                class=\"rupee-icon\">\u20B9</span>{{annuityTableCalculator.annuitycalculatorTable4val1}}</div>\n            <div class=\"table-row annuitytable4-bg\"><span\n                class=\"rupee-icon\">\u20B9</span>{{annuityTableCalculator.annuitycalculatorTable4val2}}</div>\n            <div class=\"table-row annuitytable4-bg\"><span\n                class=\"rupee-icon\">\u20B9</span>{{annuityTableCalculator.annuitycalculatorTable4val3}}</div>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"annuity-calculator-paragraph\" *ngIf=\"annuityTableCalculator?.isVisible\">\n      <span class=\"annuity-calculator-paragraph1\">This is an assumed growth percentage for the index basis which the\n        values in columns B and C are calculated.</span> Actual growth will depend on index performance and may affect\n      your variable annuity payout and total annuity payout.\n    </div>\n\n    <div *ngIf=\"growthRateObj.isVisible\">\n      <lib-annuity-calculator-radio\n        [field]=\"growthRateObj\"\n        [(ngModel)]=\"growthRateOption\"\n        (change)=\"onGrowthRateRadioChange($event)\"\n        (growthRateChange)=\"onGrowthRateCardChange($event)\" />\n    </div>\n\n    <div *ngIf=\"hrLineObj.isVisible\" class=\"generateSummary\">\n      <lib-hr-line [field]=\"hrLineObj\" />\n    </div>\n\n    <div *ngIf=\"generateSummaryObj.isVisible\" class=\"generateSummary\">\n      <lib-button [field]=\"generateSummaryObj\" (click)=\"generateSummaryClicked()\" />\n    </div>\n  </div>\n", styles: [".card-main-title{font-size:16px;font-family:Mulish!important;letter-spacing:0px!important;font-weight:800;line-height:24px;padding-bottom:16px}.col-5-5{flex:0 0 auto;max-width:44.16666667%}.custom-grid-template{display:grid;grid-template-columns:4fr .5fr 4fr;align-items:end}.vertical-line{border-left:2px solid #ccc;height:100px;margin:0 10px}.error-message{font-size:12px;font-weight:500;color:#e00;letter-spacing:0px}.annuity-msg{padding:4px 6px;margin-top:8px;font-size:10px;font-weight:400;color:#444;background-color:#e5f0fa;height:fit-content}.annuity-msg-1{padding:4px 6px;margin-top:8px;font-size:10px;font-weight:400;color:#444;background-color:#e6f7f3;height:fit-content;flex-wrap:nowrap!important}.annuity-tables-main-container{border:2px solid rgba(221,221,221,1);border-radius:8px;display:flex}.annuity-tables-container{display:flex;align-items:stretch;gap:0;width:100%}.annuity-calculator-table1,.annuity-calculator-table2,.annuity-calculator-table3,.annuity-calculator-table4{display:flex;flex-direction:column;height:100%;flex:1;color:#444;font-weight:400;font-size:10px}.annuity-calculator-table1{border-right:1px solid rgba(221,221,221,1)}.annuity-calculator-table2{border-left:1px solid rgba(221,221,221,1);border-right:1px solid rgba(221,221,221,1)}.annuity-calculator-table3{border-right:1px solid rgba(221,221,221,1)}.annuity-calculator-table4{border-left:1px solid rgba(221,221,221,1)}.table-header{padding:12px;font-size:10px;font-weight:700;text-align:center;border-bottom:1px solid rgba(221,221,221,1);height:60px;display:flex;align-items:center;justify-content:center;word-wrap:break-word;word-break:break-word;hyphens:auto}.annuitytable1-header{background-color:#ececec;color:#444}.annuitytable4-header{background-color:#fb03;color:#444}.table-body{display:flex;flex-direction:column;flex:1}.table-cell{padding:12px;text-align:center;font-size:16px;font-weight:600;flex:1;display:flex;flex-direction:row;justify-content:center;align-items:center;gap:4px}.annuity-mat-hint{font-size:8px;text-align:start;font-weight:400;color:#444;letter-spacing:0px}.table-row{padding:12px;text-align:center;font-size:14px;font-weight:500;background-color:#fff;border-bottom:1px solid #999;flex:1;display:flex;align-items:center;justify-content:center}.table-row:last-child{border-bottom:none}.annuitytable4-bg{background-color:#e6f7f3!important;color:#444}.annuitytable-button{background-color:#ececec;border:none;border-radius:4px;padding:2px 8px;font-size:10px;font-weight:700;cursor:pointer;margin-top:0;width:auto;min-width:30%;max-width:90%;height:24px;display:block;margin-left:auto;margin-right:auto;position:relative;bottom:40px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.rupee-icon{font-weight:700;margin-right:2px;font-size:12px;color:#444}.operator-symbol{display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:700;padding:0 16px;color:#f90}.annuity-calculator-paragraph{padding:16px 8px 4px;font-size:10px;margin:0 0 20px auto;width:73%;font-weight:400;color:#444;background-color:#ebf1ff}.annuity-calculator-paragraph1{font-weight:700;font-size:10px}.minium-annuity{display:flex;flex-direction:column}@media (max-width: 991px) and (min-width: 768px){.table-header{padding:8px 4px;font-size:9px;line-height:1.1}}@media (max-width: 767px) and (min-width: 576px){.table-header{padding:10px 6px;font-size:9px}}@media (max-width: 575px){.table-header{padding:8px 4px;font-size:8px}}@media (max-width: 575px){.annuity-msg{font-size:10px;line-height:1;height:fit-content}}@media (max-width: 575px){.annuity-msg-1{font-size:10px;line-height:1;flex-wrap:nowrap!important;height:fit-content}.annuity-msg-1 .img{width:4px;height:4px}}@media (max-width: 991px) and (min-width: 768px){.annuity-msg,.annuity-msg-1{font-size:9px;line-height:1.1;height:fit-content}}@media (max-width: 767px) and (min-width: 576px){.annuity-msg,.annuity-msg-1{font-size:10px;line-height:1.1;height:fit-content}}.digit-boss-banner{background-color:#333;color:#fff;display:flex;align-items:center;padding:8px 16px;border-radius:4px;margin-bottom:16px;gap:8px;font-size:12px;min-height:16px;opacity:1;transform:rotate(0)}.digit-boss-banner ::ng-deep .toggle-background{margin-top:0!important;padding:0!important;background-color:transparent!important;border:none!important}.digit-boss-banner ::ng-deep .toggle_switch{margin-top:0!important;gap:0!important}.digit-boss-text{display:flex;align-items:center;gap:4px;white-space:nowrap}.highlight{color:#fb0;font-weight:700}.arrow-icon{color:#fb0;margin-left:4px;font-size:14px}.generateSummary{margin-right:.4rem;margin-left:.4rem}\n"] }]
+                    ], template: "<div class=\"card px-3\" style=\"padding: 16px;\">\n  <div class=\"row\">\n    <h4 class=\"card-main-title\"><span style=\"margin-right: 12px;\"><img\n          src=\"https://cdn.godigit.com/retail-life/calculator.svg\" alt=\"annuity calculator\"></span>Here's Your Premium to Annuity Calculator</h4>\n  </div>\n  <!-- <div class=\"row\"> -->\n  <div class=\"card pb-4 px-4\" style=\"border-bottom-left-radius: 0px; border-bottom-right-radius: 0px;\">\n    <!-- <div class=\"custom-grid-template\">\n\n    </div> -->\n\n    <div class=\"row mx-auto\" style=\"transform: translate(0px, -58%);\">\n      <lib-toggle class=\"col-auto\" [field]=\"annuityPremiumToggleObj\" />\n    </div>\n    <!-- </div> -->\n    <div class=\" col-12\" style=\"\n    justify-content: center;\n    flex-direction: row;\n    display: flex;\n\">\n      <div class=\"col-5 col-lg-5 d-flex flex-column p-0\">\n        <lib-amount-textbox [field]=\"annuityPremiumObj\" [(ngModel)]=\"annuityPremium['textValue']\"\n          (ngModelChange)=\"onAnnuityPremiumValueChange($event)\" />\n        <div class=\"error-message\" *ngIf=\"validations.ispremiumEntry\">\n          Please enter Premium amount\n        </div>\n        <div class=\"annuity-mat-hint\" *ngIf=\"annuityPremiumObj?.configData?.numbertoword\">{{annuityPremiumObj?.configData?.numbertoword}}</div>\n\n        <lib-select [field]=\"annuitypayoutObj\" [(ngModel)]=\"annuityPremium['selectValue']\"\n          (ngModelChange)=\"onAnnuityPremiumValueChange($event)\" />\n        <div>\n          <lib-toggle [field]=\"enableAutoDebitObj\" [(ngModel)]=\"isEnableAutoDebit\"\n            (ngModelChange)=\"onEnableAutoDebitValueChange($event)\" />\n        </div>\n      </div>\n      <div class=\"col-2 col-lg-2 d-flex justify-content-center align-items-center\"\n        style=\"display: flex; align-items: flex-end; transform: translate(0px, 6px); position: relative; height: auto; min-height: 100%;\">\n        <!-- Top line -->\n        <div style=\"position: absolute; left: 50%; transform: translateX(-50%); width: 1px; height: calc(50% + 24px); top: -37px; background: rgba(221, 221, 221, 1); pointer-events: none;\"></div>\n        <!-- Bottom line -->\n        <div style=\"position: absolute; left: 50%; transform: translateX(-50%); width: 1px; height: calc(50% + 24px); bottom: -37px; background: rgba(221, 221, 221, 1); pointer-events: none;\"></div>\n        <lib-icon-button [field]=\"interchangeButtonObj\" />\n      </div>\n      <div class=\"col-5 col-lg-5 d-flex flex-column p-0\" *ngIf=\"minimumAnnuityPayoutObj.isVisible; else emptyRightCol\">\n        <lib-amount-textbox [field]=\"minimumAnnuityPayoutObj\" [(ngModel)]=\"minumumAnnuityPayout['textValue']\"\n          (ngModelChange)=\"onMinPremiumValueChange($event)\" />\n        <div class=\"annuity-mat-hint\" *ngIf=\"minimumAnnuityPayoutObj?.configData?.numbertoword\">{{minimumAnnuityPayoutObj?.configData?.numbertoword}}</div>\n        <lib-select [field]=\"minimumAnnuityPayoutfrequencyObj\" [(ngModel)]=\"minumumAnnuityPayout['selectValue']\"\n          (ngModelChange)=\"onMinPremiumValueChange($event)\" />\n        <div class=\"minium-annuity mt-3\" *ngIf=\"guranteedannuityObj['isVisible']\">\n          <div class=\"annuity-msg w-100 px-2 py-1\">\n            Value based on assumed 10% annual growth of Nifty 50 index.\n          </div>\n          <div class=\"w-100 px-2 py-1\">\n            <lib-radio [field]=\"guranteedannuityObj\" [(ngModel)]=\"selectedGuranteedAnnuity\"\n              (ngModelChange)=\"onGuranteedAnnuityChange($event)\" />\n          </div>\n          <div class=\"annuity-msg-1 d-flex align-items-center flex-nowrap w-100 px-2 py-1\">\n            <img src=\"https://cdn.godigit.com/digitPlusAssets/streamline_graph-arrow-increase-remix.png\"\n              style=\"max-width: 24px;\" />\n            <span>Potential for higher returns by lowering the minimum guaranteed annuity rate.</span>\n          </div>\n        </div>\n\n      </div>\n      <ng-template #emptyRightCol>\n        <div class=\"col-5 col-lg-5 p-0\"></div>\n      </ng-template>\n    </div>\n    <!-- <div class=\"vertical-line\"></div> -->\n    <!-- <div class=\"custom-grid-template\">\n      <div>\n        <lib-toggle [field]=\"enableAutoDebitObj\" [(ngModel)]=\"isEnableAutoDebit\"\n          (ngModelChange)=\"onEnableAutoDebitValueChange($event)\" />\n      </div>\n    </div> -->\n\n  </div>\n\n\n  <div class=\"card py-3 mb-4 border-top-0\" style=\"border-top-left-radius: 0px; border-top-right-radius: 0px;\">\n    <div class=\"mx-4\">\n      <div class=\"digit-boss-banner\" *ngIf=\"digitBossSwitch?.isVisible\">\n        <lib-toggle [field]=\"digitBossToggleConfig\" [(ngModel)]=\"this.digitBossSwitch.isSwitchOn\" (ngModelChange)=\"onDigitBossSwitchChange($event)\"></lib-toggle>\n        <div class=\"digit-boss-text\">\n          {{this.digitBossSwitch?.prefixText}}\n          <span class=\"highlight\">{{this.digitBossSwitch?.highlightText}}</span>\n          {{this.digitBossSwitch?.subText}}\n          <span class=\"arrow-icon\">\u2197</span>\n        </div>\n      </div>\n      <lib-button [field]=\"recalculateButton\" (click)=\"calculateButtonClicked()\" />\n\n      <!-- //digit boss updated design -->\n        <div class=\"col-12 mt-3\" style=\"\n    justify-content: center;\n    flex-direction: row;\n    display: flex;\" *ngIf=\"!minimumAnnuityPayoutObj.isVisible\">\n      <div class=\"col-5 col-lg-5 d-flex flex-column p-0\">\n        <lib-select [field]=\"minimumAnnuityPayoutfrequencyObj\" [(ngModel)]=\"minumumAnnuityPayout['selectValue']\"\n          (ngModelChange)=\"onMinPremiumValueChange($event)\" />\n      </div>\n\n      <div class=\"col-2 col-lg-2\"></div>\n\n      <div class=\"col-5 col-lg-5 d-flex flex-column justify-content-center p-0\">\n        <div class=\"realistic-picture-card\">\n          <div class=\"realistic-picture-header\">\n            <img *ngIf=\"digitBossSwitch?.icon\" [src]=\"digitBossSwitch?.icon\" style=\"width:12px;height:12px;object-fit:contain;flex-shrink:0;\" />\n            <span class=\"realistic-picture-label\">Realistic Picture:</span>\n          </div>\n          <span class=\"realistic-picture-text\">\n            {{digitBossSwitch?.digitBossText}} <span class=\"realistic-picture-highlight\">{{digitBossSwitch?.digitBossValue}}</span>\n          </span>\n        </div>\n      </div>\n\n</div>\n\n      <div class=\"card  mb-0 mt-2\"\n        style=\"align-items: center;border:none;font-size: 8px;font-weight: 400;color:rgba(68, 68, 68, 1) \"\n        >\n        <div class=\"mx-4\" *ngIf=\"recalculateSubTextObj?.isVisible\"><img src=\"https://cdn.godigit.com/digitPlusAssets/Group+1010106336.png\"\n            style=\"margin-left: 3px;\" />\n          <span style=\"margin-left: 6px;\">Every time you make a change above, please click recalculate.</span>\n        </div>\n      </div>\n    </div>\n    <div\n      style=\"display: flex;align-items: center;justify-content: center;border:none;font-size: 10px;font-weight: 700;height:32px;background-color: rgba(255, 250, 235, 1);gap: 8px;margin: 4px;\"\n      *ngIf=\"annuityTableCalculator?.isVisible\">\n      <img src=\"https://cdn.godigit.com/retail-life/calculator.svg\" />\n      Minimum Guaranteed Payout(A) + Variable Payout(B) = Total Payout(C)\n    </div>\n    <!-- annuity calculator table -->\n    <div class=\"annuity-tables-main-container\" *ngIf=\"annuityTableCalculator?.isVisible\">\n      <div class=\"d-flex flex-row annuity-tables-container\">\n        <!-- Table 1 -->\n        <div class=\"annuity-calculator-table1\">\n          <div class=\"table-header annuitytable1-header\">Minimum Guaranteed Annuity Payout(A)</div>\n          <div class=\"table-body\">\n            <div class=\"table-cell\"><span class=\"rupee-icon\">\u20B9</span><span\n                style=\"font-size:12px; color: rgba(68, 68, 68, 1);\">\n                <{{annuityTableCalculator.annuitycalculatorTable1val1}}>\n              </span></div>\n            <button class=\"annuitytable-button\">{{annuityTableCalculator.annuitycalculatorTable1val2}}</button>\n          </div>\n        </div>\n\n        <div class=\"operator-symbol\">+</div>\n\n        <!-- Table 2 -->\n        <div class=\"annuity-calculator-table2\">\n          <div class=\"table-header annuitytable1-header\">Assume growth of BenchMark index</div>\n          <div class=\"table-body\">\n            <div class=\"table-row\">&#64;{{annuityTableCalculator.annuitycalculatorTable2val1}}</div>\n            <div class=\"table-row\">&#64;{{annuityTableCalculator.annuitycalculatorTable2val2}}</div>\n            <div class=\"table-row\">&#64;{{annuityTableCalculator.annuitycalculatorTable2val3}}</div>\n          </div>\n        </div>\n\n        <!-- Table 3 -->\n        <div class=\"annuity-calculator-table3\">\n          <div class=\"table-header annuitytable1-header\">1st Variable Annuity Payout(B)</div>\n          <div class=\"table-body\">\n            <div class=\"table-row\"><span\n                class=\"rupee-icon\">\u20B9</span>{{annuityTableCalculator.annuitycalculatorTable3val1}}</div>\n            <div class=\"table-row\"><span\n                class=\"rupee-icon\">\u20B9</span>{{annuityTableCalculator.annuitycalculatorTable3val2}}</div>\n            <div class=\"table-row\"><span\n                class=\"rupee-icon\">\u20B9</span>{{annuityTableCalculator.annuitycalculatorTable3val3}}</div>\n          </div>\n        </div>\n\n        <div class=\"operator-symbol\">=</div>\n\n        <!-- Table 4 -->\n        <div class=\"annuity-calculator-table4\">\n          <div class=\"table-header annuitytable4-header\">1st TotalPayout/Frequency(C)</div>\n          <div class=\"table-body\">\n            <div class=\"table-row annuitytable4-bg\"><span\n                class=\"rupee-icon\">\u20B9</span>{{annuityTableCalculator.annuitycalculatorTable4val1}}</div>\n            <div class=\"table-row annuitytable4-bg\"><span\n                class=\"rupee-icon\">\u20B9</span>{{annuityTableCalculator.annuitycalculatorTable4val2}}</div>\n            <div class=\"table-row annuitytable4-bg\"><span\n                class=\"rupee-icon\">\u20B9</span>{{annuityTableCalculator.annuitycalculatorTable4val3}}</div>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"annuity-calculator-paragraph\" *ngIf=\"annuityTableCalculator?.isVisible\">\n      <span class=\"annuity-calculator-paragraph1\">This is an assumed growth percentage for the index basis which the\n        values in columns B and C are calculated.</span> Actual growth will depend on index performance and may affect\n      your variable annuity payout and total annuity payout.\n    </div>\n\n    <div *ngIf=\"growthRateObj.isVisible\">\n      <lib-annuity-calculator-radio\n        [field]=\"growthRateObj\"\n        [(ngModel)]=\"growthRateOption\"\n        (change)=\"onGrowthRateRadioChange($event)\"\n        (growthRateChange)=\"onGrowthRateCardChange($event)\" />\n    </div>\n\n    <div *ngIf=\"hrLineObj.isVisible\" class=\"generateSummary\">\n      <lib-hr-line [field]=\"hrLineObj\" />\n    </div>\n\n    <div *ngIf=\"generateSummaryObj.isVisible\" class=\"generateSummary\">\n      <lib-button [field]=\"generateSummaryObj\" (click)=\"generateSummaryClicked()\" />\n    </div>\n  </div>\n", styles: [".card-main-title{font-size:16px;font-family:Mulish!important;letter-spacing:0px!important;font-weight:800;line-height:24px;padding-bottom:16px}.col-5-5{flex:0 0 auto;max-width:44.16666667%}.custom-grid-template{display:grid;grid-template-columns:4fr .5fr 4fr;align-items:end}.vertical-line{border-left:2px solid #ccc;height:100px;margin:0 10px}.error-message{font-size:12px;font-weight:500;color:#e00;letter-spacing:0px}.annuity-msg{padding:4px 6px;margin-top:8px;font-size:10px;font-weight:400;color:#444;background-color:#e5f0fa;height:fit-content}.annuity-msg-1{padding:4px 6px;margin-top:8px;font-size:10px;font-weight:400;color:#444;background-color:#e6f7f3;height:fit-content;flex-wrap:nowrap!important}.annuity-tables-main-container{border:2px solid rgba(221,221,221,1);border-radius:8px;display:flex}.annuity-tables-container{display:flex;align-items:stretch;gap:0;width:100%}.annuity-calculator-table1,.annuity-calculator-table2,.annuity-calculator-table3,.annuity-calculator-table4{display:flex;flex-direction:column;height:100%;flex:1;color:#444;font-weight:400;font-size:10px}.annuity-calculator-table1{border-right:1px solid rgba(221,221,221,1)}.annuity-calculator-table2{border-left:1px solid rgba(221,221,221,1);border-right:1px solid rgba(221,221,221,1)}.annuity-calculator-table3{border-right:1px solid rgba(221,221,221,1)}.annuity-calculator-table4{border-left:1px solid rgba(221,221,221,1)}.table-header{padding:12px;font-size:10px;font-weight:700;text-align:center;border-bottom:1px solid rgba(221,221,221,1);height:60px;display:flex;align-items:center;justify-content:center;word-wrap:break-word;word-break:break-word;hyphens:auto}.annuitytable1-header{background-color:#ececec;color:#444}.annuitytable4-header{background-color:#fb03;color:#444}.table-body{display:flex;flex-direction:column;flex:1}.table-cell{padding:12px;text-align:center;font-size:16px;font-weight:600;flex:1;display:flex;flex-direction:row;justify-content:center;align-items:center;gap:4px}.annuity-mat-hint{font-size:8px;text-align:start;font-weight:400;color:#444;letter-spacing:0px}.table-row{padding:12px;text-align:center;font-size:14px;font-weight:500;background-color:#fff;border-bottom:1px solid #999;flex:1;display:flex;align-items:center;justify-content:center}.table-row:last-child{border-bottom:none}.annuitytable4-bg{background-color:#e6f7f3!important;color:#444}.annuitytable-button{background-color:#ececec;border:none;border-radius:4px;padding:2px 8px;font-size:10px;font-weight:700;cursor:pointer;margin-top:0;width:auto;min-width:30%;max-width:90%;height:24px;display:block;margin-left:auto;margin-right:auto;position:relative;bottom:40px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.rupee-icon{font-weight:700;margin-right:2px;font-size:12px;color:#444}.operator-symbol{display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:700;padding:0 16px;color:#f90}.annuity-calculator-paragraph{padding:16px 8px 4px;font-size:10px;margin:0 0 20px auto;width:73%;font-weight:400;color:#444;background-color:#ebf1ff}.annuity-calculator-paragraph1{font-weight:700;font-size:10px}.minium-annuity{display:flex;flex-direction:column}@media (max-width: 991px) and (min-width: 768px){.table-header{padding:8px 4px;font-size:9px;line-height:1.1}}@media (max-width: 767px) and (min-width: 576px){.table-header{padding:10px 6px;font-size:9px}}@media (max-width: 575px){.table-header{padding:8px 4px;font-size:8px}}@media (max-width: 575px){.annuity-msg{font-size:10px;line-height:1;height:fit-content}}@media (max-width: 575px){.annuity-msg-1{font-size:10px;line-height:1;flex-wrap:nowrap!important;height:fit-content}.annuity-msg-1 .img{width:4px;height:4px}}@media (max-width: 991px) and (min-width: 768px){.annuity-msg,.annuity-msg-1{font-size:9px;line-height:1.1;height:fit-content}}@media (max-width: 767px) and (min-width: 576px){.annuity-msg,.annuity-msg-1{font-size:10px;line-height:1.1;height:fit-content}}.digit-boss-banner{background-color:#333;color:#fff;display:flex;align-items:center;padding:8px 16px;border-radius:4px;margin-bottom:16px;gap:8px;font-size:12px;min-height:16px;opacity:1;transform:rotate(0)}.digit-boss-banner ::ng-deep .toggle-background{margin-top:0!important;padding:0!important;background-color:transparent!important;border:none!important}.digit-boss-banner ::ng-deep .toggle_switch{margin-top:0!important;gap:0!important}.digit-boss-text{display:flex;align-items:center;gap:4px;white-space:nowrap}.highlight{color:#fb0;font-weight:700}.arrow-icon{color:#fb0;margin-left:4px;font-size:14px}.generateSummary{margin-right:.4rem;margin-left:.4rem}.realistic-picture-card{display:flex;flex-direction:column;gap:4px;background-color:#cce0f5;border-radius:4px;padding:4px 6px;font-size:8px;color:#06c;line-height:1.5;box-sizing:border-box;justify-content:center}.realistic-picture-header{display:flex;align-items:center;gap:4px}.realistic-picture-content{display:flex;flex-direction:column;gap:2px}.realistic-picture-label{font-weight:700;font-size:8px;line-height:8px;color:#06c}.realistic-picture-text{font-weight:600;font-size:10px;line-height:14px;color:#222}.realistic-picture-highlight{font-weight:800;font-size:10px;line-height:14px;color:#0048ad}\n"] }]
         }], ctorParameters: () => [{ type: MasterControlService }], propDecorators: { triggerValidation: [{
                 type: Input
             }], annuityRadioRef: [{
@@ -8281,12 +8491,100 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
             args: [{ selector: 'lib-footer-design', standalone: true, imports: [CommonModule], template: "<div class=\"progress-container\" *ngIf=\"field() && field()?.isVisible\">\n  <div class=\"circular-progress-wrapper\">\n    <div class=\"circular-progress\"\n         [style.--progress]=\"field()?.configData?.Progressbar\"\n         [class.medium-progress]=\"field()?.configData?.Progressbar >= 25 && field()?.configData?.Progressbar < 50\"\n         [class.high-progress]=\"field()?.configData?.Progressbar >= 50\">\n      <div class=\"progress-value\">{{ field()?.configData?.Progressbar }}%</div>\n    </div>\n  </div>\n\n  <div class=\"text-content\">\n    <h2 class=\"main-heading\" [innerHTML]=\"field()?.configData?.Progressbarmsg\"></h2>\n    <h2 class=\"main-heading1\">{{ field()?.configData?.GrossPremium }}</h2>\n  </div>\n</div>\n", styles: [".progress-container{display:flex;align-items:center;gap:12px;height:48px;width:auto;box-sizing:border-box}.circular-progress-wrapper{position:relative;width:48px;height:48px;flex-shrink:0}.circular-progress{width:55px;height:55px;border-radius:50%;background:conic-gradient(#ff5252 0% calc(var(--progress) * 1%),#ececec calc(var(--progress) * 1%) 100%);display:flex;align-items:center;justify-content:center;position:relative;box-shadow:0 4px 10px #0000001a}.circular-progress.medium-progress{background:conic-gradient(#fb0 0% calc(var(--progress) * 1%),#e0e0e0 calc(var(--progress) * 1%) 100%)}.circular-progress.high-progress{background:conic-gradient(#4caf50 0% calc(var(--progress) * 1%),#e0e0e0 calc(var(--progress) * 1%) 100%)}.circular-progress:before{content:\"\";position:absolute;width:48px;height:48px;border-radius:50%;background:#ececec}.progress-value{position:relative;z-index:1;font-size:10px;font-weight:700;color:#444}.text-content{display:flex;flex-direction:column;height:48px;justify-content:center;margin-left:7px;row-gap:5px}.main-heading,.main-heading1{margin:0;font-size:10px;color:#222;font-weight:400;line-height:14px}\n"] }]
         }] });
 
+class TextboxWithRadioComponent {
+    masterService;
+    constructor(masterService) {
+        this.masterService = masterService;
+    }
+    field = input.required();
+    reactiveFormControlobject = input();
+    nameValue = '';
+    relationshipValue = '';
+    _onChange = () => { };
+    _onTouched = () => { };
+    blur = new EventEmitter();
+    change = new EventEmitter();
+    input = new EventEmitter();
+    get dynamicLabel() {
+        if (this.relationshipValue) {
+            const suffix = this.field()?.configData?.nameSuffix ?? "'s Name";
+            return this.relationshipValue + suffix;
+        }
+        return this.field()?.label || 'Father / Mother / Spouse\'s Name';
+    }
+    writeValue(obj) {
+        if (obj && typeof obj === 'object') {
+            this.nameValue = obj.nameValue || '';
+            this.relationshipValue = obj.relationshipValue || '';
+        }
+    }
+    registerOnChange(fn) {
+        this._onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this._onTouched = fn;
+    }
+    setDisabledState(isDisabled) { }
+    onNameChange(event) {
+        event.stopPropagation();
+        this.nameValue = event.target.value;
+        this.emitValue();
+        this.input.emit({ nameValue: this.nameValue, relationshipValue: this.relationshipValue });
+    }
+    onNameBlur() {
+        this._onTouched();
+        this.blur.emit({ nameValue: this.nameValue, relationshipValue: this.relationshipValue });
+    }
+    onRelationshipChange(event) {
+        this.relationshipValue = event.value;
+        this.emitValue();
+        this.change.emit({ nameValue: this.nameValue, relationshipValue: this.relationshipValue });
+    }
+    emitValue() {
+        const value = {
+            nameValue: this.nameValue,
+            relationshipValue: this.relationshipValue
+        };
+        this._onChange(value);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TextboxWithRadioComponent, deps: [{ token: MasterControlService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: TextboxWithRadioComponent, isStandalone: true, selector: "lib-textbox-with-radio", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, reactiveFormControlobject: { classPropertyName: "reactiveFormControlobject", publicName: "reactiveFormControlobject", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { blur: "blur", change: "change", input: "input" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: TextboxWithRadioComponent,
+                multi: true
+            }
+        ], ngImport: i0, template: "<label\n  class=\"field-lable\"\n  *ngIf=\"field() && field()?.isVisible && field()?.isShowLabel\"\n>{{ dynamicLabel }}</label>\n\n<mat-form-field\n  class=\"w-100\"\n  appearance=\"outline\"\n  *ngIf=\"field() && field()?.isVisible\"\n  [ngStyle]=\"{\n    '--custom-border-color': field()?.controlStyle?.borderColor,\n    '--custom-border-width': field()?.controlStyle?.borderWidth,\n    '--custom-border-radius': field()?.controlStyle?.borderRadius,\n    '--custom-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      type=\"text\"\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)=\"onNameChange($event)\"\n      (blur)=\"onNameBlur()\"\n      [value]=\"nameValue\"\n      [formControl]=\"reactiveFormControlobject()\"\n    />\n  } @else {\n    <input\n      matInput\n      autocomplete=\"off\"\n      type=\"text\"\n      [name]=\"field()?.fieldName\"\n      [id]=\"field()?.fieldName\"\n      [placeholder]=\"field()?.placeHolder\"\n      [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)=\"onNameChange($event)\"\n      (blur)=\"onNameBlur()\"\n      [value]=\"nameValue\"\n    />\n  }\n  <mat-error *ngIf=\"false\">\n    {{ field()?.validators?.requiredMessage }}\n  </mat-error>\n</mat-form-field>\n\n\n<div class=\"relationship-row\" *ngIf=\"field() && field()?.isVisible\">\n  <span class=\"relationship-label\" [ngStyle]=\"{\n    '--custom-font-color': field()?.controlStyle?.color,\n    '--custom-font-family': field()?.controlStyle?.fontFamily,\n  }\">{{ field()?.configData?.relationshipLabel || 'Relationship:' }}</span>\n  <mat-radio-group\n    class=\"relationship-radio-group\"\n    [value]=\"relationshipValue\"\n    (change)=\"onRelationshipChange($event)\"\n    [name]=\"field()?.fieldName + '_relationship'\"\n  >\n    <mat-radio-button\n      *ngFor=\"let option of field()?.options\"\n      [value]=\"option.value\"\n      [disabled]=\"field()?.isDisable\"\n      class=\"relationship-radio-btn\"\n    >\n      <span class=\"relationship-option-text\" [ngStyle]=\"{\n        '--custom-font-color': field()?.controlStyle?.color,\n        '--custom-font-family': field()?.controlStyle?.fontFamily\n      }\">{{ option.label }}</span>\n    </mat-radio-button>\n  </mat-radio-group>\n</div>\n", styles: ["*{font-family:mulish!important}.field-lable{font-size:12px!important;font-weight:700!important;color:#444!important;margin-bottom:5px}.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}::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 .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}.relationship-row{display:flex;align-items:center;gap:16px;justify-content:space-between;margin-top:4px}.relationship-label{font-size:12px!important;font-weight:700!important;font-family:var(--custom-font-family, \"Mulish\")!important;color:var(--custom-font-color, #444)!important;line-height:14px;white-space:nowrap}.relationship-radio-group{display:flex;align-items:center;gap:16px}.relationship-radio-btn{cursor:pointer}.relationship-option-text{font-size:12px;font-weight:400;font-family:var(--custom-font-family, \"Mulish\");color:var(--custom-font-color, #444);line-height:14px}::ng-deep .relationship-radio-group .mat-mdc-radio-button{--mat-radio-checked-ripple-color: transparent;--mat-radio-ripple-color: transparent}::ng-deep .relationship-radio-group .mat-mdc-radio-button .mdc-radio{padding:0!important;width:12px!important;height:12px!important}::ng-deep .relationship-radio-group .mat-mdc-radio-button .mdc-radio .mdc-radio__background{width:12px!important;height:12px!important;top:0!important;left:0!important}::ng-deep .relationship-radio-group .mat-mdc-radio-button .mdc-radio__background:before{display:none!important}::ng-deep .relationship-radio-group .mat-mdc-radio-button .mdc-radio__outer-circle{border-width:.6px!important;border-color:#b4b4b4!important;border-radius:60px!important;background:#fff!important}::ng-deep .relationship-radio-group .mat-mdc-radio-button.mat-mdc-radio-checked .mdc-radio__outer-circle{border-color:#f0a000!important}::ng-deep .relationship-radio-group .mat-mdc-radio-button .mdc-radio__inner-circle{width:12px!important;height:12px!important;top:0!important;left:0!important;border-width:3px!important;border-color:#f0a000!important;background-color:#f0a000!important;border-radius:60px!important}::ng-deep .relationship-radio-group .mat-mdc-radio-button .mdc-radio__native-control{width:12px!important;height:12px!important;top:0!important;left:0!important}::ng-deep .relationship-radio-group .mat-mdc-radio-button .mat-mdc-radio-touch-target{width:12px!important;height:12px!important}::ng-deep .relationship-radio-group .mat-mdc-radio-button .mdc-form-field{gap:8px;align-items:center;display:flex}::ng-deep .relationship-radio-group .mat-mdc-radio-button .mdc-radio{flex-shrink:0;display:flex;align-items:center;justify-content:center}::ng-deep .relationship-radio-group .mat-mdc-radio-button .mat-ripple,::ng-deep .relationship-radio-group .mat-mdc-radio-button .mdc-radio__ripple{display:none!important}::ng-deep .relationship-radio-group .mdc-form-field>label{padding-left:0!important;cursor:pointer;line-height:12px;display:flex;align-items:center}\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: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatFormFieldModule }, { 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: ReactiveFormsModule }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TextboxWithRadioComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-textbox-with-radio', standalone: true, imports: [
+                        CommonModule,
+                        MatInputModule,
+                        MatFormFieldModule,
+                        MatRadioModule,
+                        ReactiveFormsModule
+                    ], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: TextboxWithRadioComponent,
+                            multi: true
+                        }
+                    ], template: "<label\n  class=\"field-lable\"\n  *ngIf=\"field() && field()?.isVisible && field()?.isShowLabel\"\n>{{ dynamicLabel }}</label>\n\n<mat-form-field\n  class=\"w-100\"\n  appearance=\"outline\"\n  *ngIf=\"field() && field()?.isVisible\"\n  [ngStyle]=\"{\n    '--custom-border-color': field()?.controlStyle?.borderColor,\n    '--custom-border-width': field()?.controlStyle?.borderWidth,\n    '--custom-border-radius': field()?.controlStyle?.borderRadius,\n    '--custom-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      type=\"text\"\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)=\"onNameChange($event)\"\n      (blur)=\"onNameBlur()\"\n      [value]=\"nameValue\"\n      [formControl]=\"reactiveFormControlobject()\"\n    />\n  } @else {\n    <input\n      matInput\n      autocomplete=\"off\"\n      type=\"text\"\n      [name]=\"field()?.fieldName\"\n      [id]=\"field()?.fieldName\"\n      [placeholder]=\"field()?.placeHolder\"\n      [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)=\"onNameChange($event)\"\n      (blur)=\"onNameBlur()\"\n      [value]=\"nameValue\"\n    />\n  }\n  <mat-error *ngIf=\"false\">\n    {{ field()?.validators?.requiredMessage }}\n  </mat-error>\n</mat-form-field>\n\n\n<div class=\"relationship-row\" *ngIf=\"field() && field()?.isVisible\">\n  <span class=\"relationship-label\" [ngStyle]=\"{\n    '--custom-font-color': field()?.controlStyle?.color,\n    '--custom-font-family': field()?.controlStyle?.fontFamily,\n  }\">{{ field()?.configData?.relationshipLabel || 'Relationship:' }}</span>\n  <mat-radio-group\n    class=\"relationship-radio-group\"\n    [value]=\"relationshipValue\"\n    (change)=\"onRelationshipChange($event)\"\n    [name]=\"field()?.fieldName + '_relationship'\"\n  >\n    <mat-radio-button\n      *ngFor=\"let option of field()?.options\"\n      [value]=\"option.value\"\n      [disabled]=\"field()?.isDisable\"\n      class=\"relationship-radio-btn\"\n    >\n      <span class=\"relationship-option-text\" [ngStyle]=\"{\n        '--custom-font-color': field()?.controlStyle?.color,\n        '--custom-font-family': field()?.controlStyle?.fontFamily\n      }\">{{ option.label }}</span>\n    </mat-radio-button>\n  </mat-radio-group>\n</div>\n", styles: ["*{font-family:mulish!important}.field-lable{font-size:12px!important;font-weight:700!important;color:#444!important;margin-bottom:5px}.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}::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 .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}.relationship-row{display:flex;align-items:center;gap:16px;justify-content:space-between;margin-top:4px}.relationship-label{font-size:12px!important;font-weight:700!important;font-family:var(--custom-font-family, \"Mulish\")!important;color:var(--custom-font-color, #444)!important;line-height:14px;white-space:nowrap}.relationship-radio-group{display:flex;align-items:center;gap:16px}.relationship-radio-btn{cursor:pointer}.relationship-option-text{font-size:12px;font-weight:400;font-family:var(--custom-font-family, \"Mulish\");color:var(--custom-font-color, #444);line-height:14px}::ng-deep .relationship-radio-group .mat-mdc-radio-button{--mat-radio-checked-ripple-color: transparent;--mat-radio-ripple-color: transparent}::ng-deep .relationship-radio-group .mat-mdc-radio-button .mdc-radio{padding:0!important;width:12px!important;height:12px!important}::ng-deep .relationship-radio-group .mat-mdc-radio-button .mdc-radio .mdc-radio__background{width:12px!important;height:12px!important;top:0!important;left:0!important}::ng-deep .relationship-radio-group .mat-mdc-radio-button .mdc-radio__background:before{display:none!important}::ng-deep .relationship-radio-group .mat-mdc-radio-button .mdc-radio__outer-circle{border-width:.6px!important;border-color:#b4b4b4!important;border-radius:60px!important;background:#fff!important}::ng-deep .relationship-radio-group .mat-mdc-radio-button.mat-mdc-radio-checked .mdc-radio__outer-circle{border-color:#f0a000!important}::ng-deep .relationship-radio-group .mat-mdc-radio-button .mdc-radio__inner-circle{width:12px!important;height:12px!important;top:0!important;left:0!important;border-width:3px!important;border-color:#f0a000!important;background-color:#f0a000!important;border-radius:60px!important}::ng-deep .relationship-radio-group .mat-mdc-radio-button .mdc-radio__native-control{width:12px!important;height:12px!important;top:0!important;left:0!important}::ng-deep .relationship-radio-group .mat-mdc-radio-button .mat-mdc-radio-touch-target{width:12px!important;height:12px!important}::ng-deep .relationship-radio-group .mat-mdc-radio-button .mdc-form-field{gap:8px;align-items:center;display:flex}::ng-deep .relationship-radio-group .mat-mdc-radio-button .mdc-radio{flex-shrink:0;display:flex;align-items:center;justify-content:center}::ng-deep .relationship-radio-group .mat-mdc-radio-button .mat-ripple,::ng-deep .relationship-radio-group .mat-mdc-radio-button .mdc-radio__ripple{display:none!important}::ng-deep .relationship-radio-group .mdc-form-field>label{padding-left:0!important;cursor:pointer;line-height:12px;display:flex;align-items:center}\n"] }]
+        }], ctorParameters: () => [{ type: MasterControlService }], propDecorators: { blur: [{
+                type: Output
+            }], change: [{
+                type: Output
+            }], input: [{
+                type: Output
+            }] } });
+
 class MasterControlComponent {
     field = input.required();
     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  @case ('annuityGrowthRateOption') {\n    <lib-annuity-calculator-radio [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", "openQuoteImageObj", "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: ["clusterId", "triggerValidation", "medialQuestionResponse", "personUWOpenQuoteResponse", "defaultValues", "personType", "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", "triggerValidation", "premiumDetails"], outputs: ["onCalcualteButtonClick", "onGenerateSummaryClick", "onAnnuityPremiumChange", "onMinimumPremiumValueChange", "onAutioDebitValueChange", "onGuranteedAnnuityValueChange", "onDigitBossSwitchToggle", "onGrowthRateOptionSelected"] }, { kind: "component", type: FooterDesignComponent, selector: "lib-footer-design", inputs: ["field"] }, { kind: "component", type: AnnuityCalculatorRadioComponent, selector: "lib-annuity-calculator-radio", inputs: ["reactiveFormControlobject", "field"], outputs: ["change", "growthRateChange"] }] });
+    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  @case ('annuityGrowthRateOption') {\n    <lib-annuity-calculator-radio [field]=\"field()\" />\n  }\n  @case ('textboxWithRadio') {\n    <lib-textbox-with-radio [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", "openQuoteImageObj", "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: ["clusterId", "triggerValidation", "medialQuestionResponse", "personUWOpenQuoteResponse", "defaultValues", "personType", "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", "triggerValidation", "premiumDetails"], outputs: ["onCalcualteButtonClick", "onGenerateSummaryClick", "onAnnuityPremiumChange", "onMinimumPremiumValueChange", "onAutioDebitValueChange", "onGuranteedAnnuityValueChange", "onDigitBossSwitchToggle", "onGrowthRateOptionSelected"] }, { kind: "component", type: FooterDesignComponent, selector: "lib-footer-design", inputs: ["field"] }, { kind: "component", type: AnnuityCalculatorRadioComponent, selector: "lib-annuity-calculator-radio", inputs: ["reactiveFormControlobject", "field"], outputs: ["change", "growthRateChange"] }, { kind: "component", type: TextboxWithRadioComponent, selector: "lib-textbox-with-radio", inputs: ["field", "reactiveFormControlobject"], outputs: ["blur", "change", "input"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MasterControlComponent, decorators: [{
             type: Component,
@@ -8368,8 +8666,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         AnnuityPremiumCalculatorComponent,
                         FilePreviewComponent,
                         FooterDesignComponent,
-                        AnnuityCalculatorRadioComponent
-                    ], 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  @case ('annuityGrowthRateOption') {\n    <lib-annuity-calculator-radio [field]=\"field()\" />\n  }\n}\n" }]
+                        AnnuityCalculatorRadioComponent,
+                        TextboxWithRadioComponent
+                    ], 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  @case ('annuityGrowthRateOption') {\n    <lib-annuity-calculator-radio [field]=\"field()\" />\n  }\n  @case ('textboxWithRadio') {\n    <lib-textbox-with-radio [field]=\"field()\" />\n  }\n}\n" }]
         }], ctorParameters: () => [], propDecorators: { formGroup: [{
                 type: Input
             }] } });
@@ -8382,5 +8681,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AddDocumentComponent, AdditionButtonComponent, AgeDateComponent, AmountTextboxComponent, AnnuityCalculatorRadioComponent, AnnuityPremiumCalculatorComponent, AnnuityRateLogoComponent, AutocompleteComponent, BenefitCardComponent, ButtonComponent, CardComponent, CheckboxComponent, DiscountComponent, DiscountV2Component, DobComponent, DownloadDocumentComponent, EmailWithDomainComponent, ErrorSnackbarComponent, FilePreviewComponent, FooterDesignComponent, GreyLabelComponent, HeaderComponent, HrLineComponent, HyperlinkComponent, IconButtonComponent, IframeComponent, ImageComponent, ImageUploadComponent, InBuiltBenefitComponent, InfoComponent, InfoTextboxComponent, LabelComponent, LabelValueCardComponent, LabelWithImageComponent, LoaderComponent, MY_DATE_FORMAT, MasterControlComponent, MasterControlService, MedialQuestionsComponent, MenuComponent, MobNumberComponent, MotorGlowPlanDetailsComponent, MultipleSelectComponent, NeutralSnackbarComponent, OtherBenefitsComponent, OtpMobNumberComponent, OtpTextboxComponent, PageNudgeComponent, PayGetCardComponent, RadioComponent, SearchMultiSelectComponent, SelectComponent, SelectTextboxComponent, StepperComponent, StepperWIthArrowComponent, SubHeaderComponent, SubscriptTextboxComponent, SuccessSnackbarComponent, SuffixTextboxComponent, TabComponent, TableComponent, TextareaComponent, TextboxComponent, TextboxWithImageComponent, TextboxWithTextComponent, TextboxWithUnderscoreComponent, ToggleButtonComponent, ToggleComponent, UnderscoreMobNumberComponent, UploadComponent, WarningSnackbarComponent };
+export { AddDocumentComponent, AdditionButtonComponent, AgeDateComponent, AmountTextboxComponent, AnnuityCalculatorRadioComponent, AnnuityPremiumCalculatorComponent, AnnuityRateLogoComponent, AutocompleteComponent, BenefitCardComponent, ButtonComponent, CardComponent, CheckboxComponent, DiscountComponent, DiscountV2Component, DobComponent, DownloadDocumentComponent, EmailWithDomainComponent, ErrorSnackbarComponent, FilePreviewComponent, FooterDesignComponent, GreyLabelComponent, HeaderComponent, HrLineComponent, HyperlinkComponent, IconButtonComponent, IframeComponent, ImageComponent, ImageUploadComponent, InBuiltBenefitComponent, InfoComponent, InfoTextboxComponent, LabelComponent, LabelValueCardComponent, LabelWithImageComponent, LoaderComponent, MY_DATE_FORMAT, MasterControlComponent, MasterControlService, MedialQuestionsComponent, MenuComponent, MobNumberComponent, MotorGlowPlanDetailsComponent, MultipleSelectComponent, NeutralSnackbarComponent, OtherBenefitsComponent, OtpMobNumberComponent, OtpTextboxComponent, PageNudgeComponent, PayGetCardComponent, RadioComponent, SearchMultiSelectComponent, SelectComponent, SelectTextboxComponent, StepperComponent, StepperWIthArrowComponent, SubHeaderComponent, SubscriptTextboxComponent, SuccessSnackbarComponent, SuffixTextboxComponent, TabComponent, TableComponent, TextareaComponent, TextboxComponent, TextboxWithImageComponent, TextboxWithRadioComponent, TextboxWithTextComponent, TextboxWithUnderscoreComponent, ToggleButtonComponent, ToggleComponent, UnderscoreMobNumberComponent, UploadComponent, WarningSnackbarComponent };
 //# sourceMappingURL=master-control.mjs.map