npm - master-control - Versions diffs - 0.4.48 → 0.4.49 - Mend

master-control 0.4.48 → 0.4.49

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (7) hide show

package/fesm2022/master-control.mjs CHANGED Viewed

@@ -6807,6 +6807,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
 class AnnuityPremiumCalculatorComponent {
     masterService;
+    recalculateSubTextObj = { isVisible: true };
     field = input.required();
     premiumDetails = input({});
     annuityPremium = {
@@ -7523,6 +7524,11 @@ class AnnuityPremiumCalculatorComponent {
     }
     ngOnChanges(changes) {
         if ((changes['premiumDetails']) && !this.masterService.checkIfValueIsEmpty(changes['premiumDetails'].currentValue)) {
+            if (!this.masterService.checkIfValueIsEmpty(this.premiumDetails()?.recalculateSubText)) {
+                if (!this.masterService.checkIfValueIsEmpty(this.premiumDetails()?.recalculateSubText['isVisible'])) {
+                    this.recalculateSubTextObj['isVisible'] = this.premiumDetails().recalculateSubText['isVisible'];
+                }
+            }
             if (!this.masterService.checkIfValueIsEmpty(this.premiumDetails()?.Premium)) {
                 // Create new object to trigger change detection
                 this.annuityPremium = {
@@ -7666,7 +7672,7 @@ 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 }, 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" }, 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\u2019s Your Investment to Returns 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          Enter Premium\n        </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=\"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        <div class=\"mx-4\"><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=\"generateSummaryObj.isVisible\">\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}.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}\n"], dependencies: [{ 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 }, 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" }, 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\u2019s Your Investment to Returns 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          Enter Premium\n        </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=\"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        *ngIf=\"recalculateSubTextObj?.isVisible\">\n        <div class=\"mx-4\"><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=\"generateSummaryObj.isVisible\">\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}.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}\n"], dependencies: [{ 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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AnnuityPremiumCalculatorComponent, decorators: [{
             type: Component,
@@ -7678,7 +7684,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\u2019s Your Investment to Returns 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          Enter Premium\n        </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=\"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        <div class=\"mx-4\"><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=\"generateSummaryObj.isVisible\">\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}.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}\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\u2019s Your Investment to Returns 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          Enter Premium\n        </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=\"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        *ngIf=\"recalculateSubTextObj?.isVisible\">\n        <div class=\"mx-4\"><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=\"generateSummaryObj.isVisible\">\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}.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}\n"] }]
         }], ctorParameters: () => [{ type: MasterControlService }], propDecorators: { onCalcualteButtonClick: [{
                 type: Output
             }], onGenerateSummaryClick: [{