master-control 0.4.11 → 0.4.13

package/fesm2022/master-control.mjs

@@ -7065,7 +7065,7 @@ class AnnuityPremiumCalculatorComponent {
     guranteedannuityObj = {
         "controlType": "radio",
         "fieldName": "guranteedAnnuityage",
-        "label": "Guaranteed Annuity %age",
+        "label": "Minimum Guaranteed Annuity Payout %",
         "placeHolder": "",
         "metaId": "LI_DP_DP_CTRL_radio_annuityType_V1",
         "isVisible": true,
@@ -7249,7 +7249,7 @@ class AnnuityPremiumCalculatorComponent {
         }
     }
     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" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"card px-3\" style=\"padding: 16px;\">\r\n  <div class=\"row\">\r\n    <h4 class=\"card-main-title\"><span style=\"margin-right: 12px;\"><img src=\"https://cdn.godigit.com/retail-life/calculator.svg\" alt=\"annuity calculator\"></span>Here's your Premium to Annuity Calculator</h4>\r\n  </div>\r\n  <!-- <div class=\"row\"> -->\r\n  <div class=\"card pb-4 px-4\" style=\"border-bottom-left-radius: 0px; border-bottom-right-radius: 0px;\">\r\n    <!-- <div class=\"custom-grid-template\">\r\n\r\n    </div> -->\r\n\r\n    <div class=\"row mx-auto\" style=\"transform: translate(0px, -58%);\">\r\n      <lib-toggle class=\"col-auto\" [field]=\"annuityPremiumToggleObj\" />\r\n    </div>\r\n    <!-- </div> -->\r\n    <div class=\" col-12\" style=\"\r\n    justify-content: center;\r\n    flex-direction: row;\r\n    display: flex;\r\n\">\r\n      <div class=\"col-5 col-lg-5 d-flex flex-column p-0\">\r\n        <lib-select-textbox [field]=\"annuityPremiumObj\" [(ngModel)]=\"annuityPremium\" (ngModelChange)=\"onAnnuityPremiumValueChange($event)\" />\r\n        <div class=\"error-message\" *ngIf=\"validations.ispremiumEntry\">\r\n          Enter Premium\r\n        </div>\r\n        <div>\r\n        <lib-toggle [field]=\"enableAutoDebitObj\" [(ngModel)]=\"isEnableAutoDebit\" (ngModelChange)=\"onEnableAutoDebitValueChange($event)\" />\r\n      </div>\r\n      </div>\r\n      <div class=\"col-2 col-lg-2 d-flex justify-content-center align-items-center\" style=\"display: flex; align-items: flex-end; transform: translate(0px, 6px); position: relative;\">\r\n        <!-- Vertical center line split around icon -->\r\n        <div style=\"position: absolute; left: 50%; transform: translateX(-50%); width: 1px;height: calc(50% - 16px); top: 0; background: rgba(221, 221, 221, 1)\"></div>\r\n        <lib-icon-button [field]=\"interchangeButtonObj\" />\r\n        <div style=\"position: absolute; left: 50%; transform: translateX(-50%); width: 1px; height: calc(50% - 16px); bottom: 0; background: rgba(221, 221, 221, 1)\"></div>\r\n      </div>\r\n      <div class=\"col-5 col-lg-5 d-flex flex-column p-0\">\r\n        <lib-select-textbox [field]=\"minimumAnnuityPayoutObj\" [(ngModel)]=\"minumumAnnuityPayout\"  (ngModelChange)=\"onMinPremiumValueChange($event)\" />\r\n       <div class=\"minium-annuity mt-3\">\r\n  <div class=\"annuity-msg w-100 px-2 py-1\">\r\n    Value based on assumed 10% annual growth of Nifty 50 index.\r\n  </div>\r\n  <div class=\"w-100 px-2 py-1\">\r\n    <lib-radio [field]=\"guranteedannuityObj\" [(ngModel)]=\"selectedGuranteedAnnuity\" (ngModelChange)=\"onGuranteedAnnuityChange($event)\" />\r\n  </div>\r\n <div class=\"annuity-msg-1 d-flex align-items-center flex-nowrap w-100 px-2 py-1\">\r\n  <img src=\"https://cdn.godigit.com/digitPlusAssets/streamline_graph-arrow-increase-remix.png\" style=\"max-width: 24px;\" />\r\n  <span>Potential for higher returns by lowering the minimum guaranteed annuity rate.</span>\r\n</div>\r\n</div>\r\n\r\n      </div>\r\n    </div>\r\n    <div class=\"vertical-line\"></div>\r\n    <div class=\"custom-grid-template\">\r\n      <div>\r\n        <lib-toggle [field]=\"enableAutoDebitObj\" [(ngModel)]=\"isEnableAutoDebit\" (ngModelChange)=\"onEnableAutoDebitValueChange($event)\" />\r\n      </div>\r\n    </div>\r\n\r\n  </div>\r\n\r\n\r\n  <div class=\"card py-3 mb-4 border-top-0\" style=\"border-top-left-radius: 0px; border-top-right-radius: 0px;\">\r\n    <div class=\"mx-4\">\r\n      <lib-button [field]=\"recalculateButton\" (click)=\"calculateButtonClicked()\" />\r\n     <div class=\"card  mb-0 mt-2\" style=\"align-items: center;border:none;font-size: 8px;font-weight: 400;color:rgba(68, 68, 68, 1) \">\r\n    <div class=\"mx-4\"><img src=\"https://cdn.godigit.com/digitPlusAssets/Group+1010106336.png\" style=\"margin-left: 3px;\"/>\r\n      <span style=\"margin-left: 6px;\">Every time you make a change above, please click recalculate.</span>\r\n    </div>\r\n    </div>\r\n  </div>\r\n    <div 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;\" *ngIf=\"annuityTableCalculator?.isVisible\">\r\n    <img src=\"https://cdn.godigit.com/retail-life/calculator.svg\"/>\r\n      Minimum Guaranteed Payout(A) + Variable Payout(B) = Total Payout(C)\r\n  </div>\r\n  <!-- annuity calculator table -->\r\n    <div class=\"annuity-tables-main-container\" *ngIf=\"annuityTableCalculator?.isVisible\">\r\n    <div class=\"d-flex flex-row annuity-tables-container\">\r\n      <!-- Table 1 -->\r\n      <div class=\"annuity-calculator-table1\">\r\n        <div class=\"table-header annuitytable1-header\">Minimum Guaranteed Annuity Payout(A)</div>\r\n        <div class=\"table-body\">\r\n          <div class=\"table-cell\"><span class=\"rupee-icon\">\u20B9</span><span style=\"font-size:12px; color: rgba(68, 68, 68, 1);\"><{{annuityTableCalculator.annuitycalculatorTable1val1}}></span></div>\r\n          <button class=\"annuitytable-button\">{{annuityTableCalculator.annuitycalculatorTable1val2}}</button>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"operator-symbol\">+</div>\r\n\r\n      <!-- Table 2 -->\r\n      <div class=\"annuity-calculator-table2\">\r\n        <div class=\"table-header annuitytable1-header\">Assume growth of BenchMark index</div>\r\n        <div class=\"table-body\">\r\n          <div class=\"table-row\">&#64;{{annuityTableCalculator.annuitycalculatorTable2val1}}</div>\r\n          <div class=\"table-row\">&#64;{{annuityTableCalculator.annuitycalculatorTable2val2}}</div>\r\n          <div class=\"table-row\">&#64;{{annuityTableCalculator.annuitycalculatorTable2val3}}</div>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- Table 3 -->\r\n      <div class=\"annuity-calculator-table3\">\r\n        <div class=\"table-header annuitytable1-header\">1st Variable Annuity Payout(B)</div>\r\n        <div class=\"table-body\">\r\n          <div class=\"table-row\"><span class=\"rupee-icon\">\u20B9</span>{{annuityTableCalculator.annuitycalculatorTable3val1}}</div>\r\n          <div class=\"table-row\"><span class=\"rupee-icon\">\u20B9</span>{{annuityTableCalculator.annuitycalculatorTable3val2}}</div>\r\n          <div class=\"table-row\"><span class=\"rupee-icon\">\u20B9</span>{{annuityTableCalculator.annuitycalculatorTable3val3}}</div>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"operator-symbol\">=</div>\r\n\r\n      <!-- Table 4 -->\r\n      <div class=\"annuity-calculator-table4\">\r\n        <div class=\"table-header annuitytable4-header\">1st TotalPayout/Frequency(C)</div>\r\n        <div class=\"table-body\">\r\n          <div class=\"table-row annuitytable4-bg\"><span class=\"rupee-icon\">\u20B9</span>{{annuityTableCalculator.annuitycalculatorTable4val1}}</div>\r\n          <div class=\"table-row annuitytable4-bg\"><span class=\"rupee-icon\">\u20B9</span>{{annuityTableCalculator.annuitycalculatorTable4val2}}</div>\r\n          <div class=\"table-row annuitytable4-bg\"><span class=\"rupee-icon\">\u20B9</span>{{annuityTableCalculator.annuitycalculatorTable4val3}}</div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n   </div>\r\n\r\n   <div class=\"annuity-calculator-paragraph\" *ngIf=\"annuityTableCalculator?.isVisible\">\r\n    <span class=\"annuity-calculator-paragraph1\">This is an assumed growth percentage for the index basis which the values in columns B and C are calculated.</span> Actual growth will depend on index performance and may affect your variable annuity payout and total annuity payout.\r\n   </div>\r\n\r\n  <div>\r\n    <lib-button [field]=\"generateSummaryObj\" (click)=\"generateSummaryClicked()\" />\r\n  </div>\r\n</div>\r\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}}\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"] }, { 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" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"card px-3\" style=\"padding: 16px;\">\r\n  <div class=\"row\">\r\n    <h4 class=\"card-main-title\"><span style=\"margin-right: 12px;\"><img\r\n          src=\"https://cdn.godigit.com/retail-life/calculator.svg\" alt=\"annuity calculator\"></span>Here's your Premium\r\n      to Annuity Calculator</h4>\r\n  </div>\r\n  <!-- <div class=\"row\"> -->\r\n  <div class=\"card pb-4 px-4\" style=\"border-bottom-left-radius: 0px; border-bottom-right-radius: 0px;\">\r\n    <!-- <div class=\"custom-grid-template\">\r\n\r\n    </div> -->\r\n\r\n    <div class=\"row mx-auto\" style=\"transform: translate(0px, -58%);\">\r\n      <lib-toggle class=\"col-auto\" [field]=\"annuityPremiumToggleObj\" />\r\n    </div>\r\n    <!-- </div> -->\r\n    <div class=\" col-12\" style=\"\r\n    justify-content: center;\r\n    flex-direction: row;\r\n    display: flex;\r\n\">\r\n      <div class=\"col-5 col-lg-5 d-flex flex-column p-0\">\r\n        <lib-select-textbox [field]=\"annuityPremiumObj\" [(ngModel)]=\"annuityPremium\"\r\n          (ngModelChange)=\"onAnnuityPremiumValueChange($event)\" />\r\n        <div class=\"error-message\" *ngIf=\"validations.ispremiumEntry\">\r\n          Enter Premium\r\n        </div>\r\n        <div>\r\n          <lib-toggle [field]=\"enableAutoDebitObj\" [(ngModel)]=\"isEnableAutoDebit\"\r\n            (ngModelChange)=\"onEnableAutoDebitValueChange($event)\" />\r\n        </div>\r\n      </div>\r\n      <div class=\"col-2 col-lg-2 d-flex justify-content-center align-items-center\"\r\n        style=\"display: flex; align-items: flex-end; transform: translate(0px, 6px); position: relative;\">\r\n        <!-- Vertical center line split around icon -->\r\n        <div\r\n          style=\"position: absolute; left: 50%; transform: translateX(-50%); width: 1px;height: calc(50% - 16px); top: 0; background: rgba(221, 221, 221, 1)\">\r\n        </div>\r\n        <lib-icon-button [field]=\"interchangeButtonObj\" />\r\n        <div\r\n          style=\"position: absolute; left: 50%; transform: translateX(-50%); width: 1px; height: calc(50% - 16px); bottom: 0; background: rgba(221, 221, 221, 1)\">\r\n        </div>\r\n      </div>\r\n      <div class=\"col-5 col-lg-5 d-flex flex-column p-0\">\r\n        <lib-select-textbox [field]=\"minimumAnnuityPayoutObj\" [(ngModel)]=\"minumumAnnuityPayout\"\r\n          (ngModelChange)=\"onMinPremiumValueChange($event)\" />\r\n        <div class=\"minium-annuity mt-3\">\r\n          <div class=\"annuity-msg w-100 px-2 py-1\">\r\n            Value based on assumed 10% annual growth of Nifty 50 index.\r\n          </div>\r\n          <div class=\"w-100 px-2 py-1\">\r\n            <lib-radio [field]=\"guranteedannuityObj\" [(ngModel)]=\"selectedGuranteedAnnuity\"\r\n              (ngModelChange)=\"onGuranteedAnnuityChange($event)\" />\r\n          </div>\r\n          <div class=\"annuity-msg-1 d-flex align-items-center flex-nowrap w-100 px-2 py-1\">\r\n            <img src=\"https://cdn.godigit.com/digitPlusAssets/streamline_graph-arrow-increase-remix.png\"\r\n              style=\"max-width: 24px;\" />\r\n            <span>Potential for higher returns by lowering the minimum guaranteed annuity rate.</span>\r\n          </div>\r\n        </div>\r\n\r\n      </div>\r\n    </div>\r\n    <!-- <div class=\"vertical-line\"></div> -->\r\n    <!-- <div class=\"custom-grid-template\">\r\n      <div>\r\n        <lib-toggle [field]=\"enableAutoDebitObj\" [(ngModel)]=\"isEnableAutoDebit\"\r\n          (ngModelChange)=\"onEnableAutoDebitValueChange($event)\" />\r\n      </div>\r\n    </div> -->\r\n\r\n  </div>\r\n\r\n\r\n  <div class=\"card py-3 mb-4 border-top-0\" style=\"border-top-left-radius: 0px; border-top-right-radius: 0px;\">\r\n    <div class=\"mx-4\">\r\n      <lib-button [field]=\"recalculateButton\" (click)=\"calculateButtonClicked()\" />\r\n      <div class=\"card  mb-0 mt-2\"\r\n        style=\"align-items: center;border:none;font-size: 8px;font-weight: 400;color:rgba(68, 68, 68, 1) \">\r\n        <div class=\"mx-4\"><img src=\"https://cdn.godigit.com/digitPlusAssets/Group+1010106336.png\"\r\n            style=\"margin-left: 3px;\" />\r\n          <span style=\"margin-left: 6px;\">Every time you make a change above, please click recalculate.</span>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div\r\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;\"\r\n      *ngIf=\"annuityTableCalculator?.isVisible\">\r\n      <img src=\"https://cdn.godigit.com/retail-life/calculator.svg\" />\r\n      Minimum Guaranteed Payout(A) + Variable Payout(B) = Total Payout(C)\r\n    </div>\r\n    <!-- annuity calculator table -->\r\n    <div class=\"annuity-tables-main-container\" *ngIf=\"annuityTableCalculator?.isVisible\">\r\n      <div class=\"d-flex flex-row annuity-tables-container\">\r\n        <!-- Table 1 -->\r\n        <div class=\"annuity-calculator-table1\">\r\n          <div class=\"table-header annuitytable1-header\">Minimum Guaranteed Annuity Payout(A)</div>\r\n          <div class=\"table-body\">\r\n            <div class=\"table-cell\"><span class=\"rupee-icon\">\u20B9</span><span\r\n                style=\"font-size:12px; color: rgba(68, 68, 68, 1);\">\r\n                <{{annuityTableCalculator.annuitycalculatorTable1val1}}>\r\n              </span></div>\r\n            <button class=\"annuitytable-button\">{{annuityTableCalculator.annuitycalculatorTable1val2}}</button>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"operator-symbol\">+</div>\r\n\r\n        <!-- Table 2 -->\r\n        <div class=\"annuity-calculator-table2\">\r\n          <div class=\"table-header annuitytable1-header\">Assume growth of BenchMark index</div>\r\n          <div class=\"table-body\">\r\n            <div class=\"table-row\">&#64;{{annuityTableCalculator.annuitycalculatorTable2val1}}</div>\r\n            <div class=\"table-row\">&#64;{{annuityTableCalculator.annuitycalculatorTable2val2}}</div>\r\n            <div class=\"table-row\">&#64;{{annuityTableCalculator.annuitycalculatorTable2val3}}</div>\r\n          </div>\r\n        </div>\r\n\r\n        <!-- Table 3 -->\r\n        <div class=\"annuity-calculator-table3\">\r\n          <div class=\"table-header annuitytable1-header\">1st Variable Annuity Payout(B)</div>\r\n          <div class=\"table-body\">\r\n            <div class=\"table-row\"><span\r\n                class=\"rupee-icon\">\u20B9</span>{{annuityTableCalculator.annuitycalculatorTable3val1}}</div>\r\n            <div class=\"table-row\"><span\r\n                class=\"rupee-icon\">\u20B9</span>{{annuityTableCalculator.annuitycalculatorTable3val2}}</div>\r\n            <div class=\"table-row\"><span\r\n                class=\"rupee-icon\">\u20B9</span>{{annuityTableCalculator.annuitycalculatorTable3val3}}</div>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"operator-symbol\">=</div>\r\n\r\n        <!-- Table 4 -->\r\n        <div class=\"annuity-calculator-table4\">\r\n          <div class=\"table-header annuitytable4-header\">1st TotalPayout/Frequency(C)</div>\r\n          <div class=\"table-body\">\r\n            <div class=\"table-row annuitytable4-bg\"><span\r\n                class=\"rupee-icon\">\u20B9</span>{{annuityTableCalculator.annuitycalculatorTable4val1}}</div>\r\n            <div class=\"table-row annuitytable4-bg\"><span\r\n                class=\"rupee-icon\">\u20B9</span>{{annuityTableCalculator.annuitycalculatorTable4val2}}</div>\r\n            <div class=\"table-row annuitytable4-bg\"><span\r\n                class=\"rupee-icon\">\u20B9</span>{{annuityTableCalculator.annuitycalculatorTable4val3}}</div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"annuity-calculator-paragraph\" *ngIf=\"annuityTableCalculator?.isVisible\">\r\n      <span class=\"annuity-calculator-paragraph1\">This is an assumed growth percentage for the index basis which the\r\n        values in columns B and C are calculated.</span> Actual growth will depend on index performance and may affect\r\n      your variable annuity payout and total annuity payout.\r\n    </div>\r\n\r\n    <div>\r\n      <lib-button [field]=\"generateSummaryObj\" (click)=\"generateSummaryClicked()\" />\r\n    </div>\r\n  </div>\r\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}}\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"] }, { 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,
@@ -7261,7 +7261,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         RadioComponent,
                         CommonModule,
                         FormsModule
-                    ], template: "<div class=\"card px-3\" style=\"padding: 16px;\">\r\n  <div class=\"row\">\r\n    <h4 class=\"card-main-title\"><span style=\"margin-right: 12px;\"><img src=\"https://cdn.godigit.com/retail-life/calculator.svg\" alt=\"annuity calculator\"></span>Here's your Premium to Annuity Calculator</h4>\r\n  </div>\r\n  <!-- <div class=\"row\"> -->\r\n  <div class=\"card pb-4 px-4\" style=\"border-bottom-left-radius: 0px; border-bottom-right-radius: 0px;\">\r\n    <!-- <div class=\"custom-grid-template\">\r\n\r\n    </div> -->\r\n\r\n    <div class=\"row mx-auto\" style=\"transform: translate(0px, -58%);\">\r\n      <lib-toggle class=\"col-auto\" [field]=\"annuityPremiumToggleObj\" />\r\n    </div>\r\n    <!-- </div> -->\r\n    <div class=\" col-12\" style=\"\r\n    justify-content: center;\r\n    flex-direction: row;\r\n    display: flex;\r\n\">\r\n      <div class=\"col-5 col-lg-5 d-flex flex-column p-0\">\r\n        <lib-select-textbox [field]=\"annuityPremiumObj\" [(ngModel)]=\"annuityPremium\" (ngModelChange)=\"onAnnuityPremiumValueChange($event)\" />\r\n        <div class=\"error-message\" *ngIf=\"validations.ispremiumEntry\">\r\n          Enter Premium\r\n        </div>\r\n        <div>\r\n        <lib-toggle [field]=\"enableAutoDebitObj\" [(ngModel)]=\"isEnableAutoDebit\" (ngModelChange)=\"onEnableAutoDebitValueChange($event)\" />\r\n      </div>\r\n      </div>\r\n      <div class=\"col-2 col-lg-2 d-flex justify-content-center align-items-center\" style=\"display: flex; align-items: flex-end; transform: translate(0px, 6px); position: relative;\">\r\n        <!-- Vertical center line split around icon -->\r\n        <div style=\"position: absolute; left: 50%; transform: translateX(-50%); width: 1px;height: calc(50% - 16px); top: 0; background: rgba(221, 221, 221, 1)\"></div>\r\n        <lib-icon-button [field]=\"interchangeButtonObj\" />\r\n        <div style=\"position: absolute; left: 50%; transform: translateX(-50%); width: 1px; height: calc(50% - 16px); bottom: 0; background: rgba(221, 221, 221, 1)\"></div>\r\n      </div>\r\n      <div class=\"col-5 col-lg-5 d-flex flex-column p-0\">\r\n        <lib-select-textbox [field]=\"minimumAnnuityPayoutObj\" [(ngModel)]=\"minumumAnnuityPayout\"  (ngModelChange)=\"onMinPremiumValueChange($event)\" />\r\n       <div class=\"minium-annuity mt-3\">\r\n  <div class=\"annuity-msg w-100 px-2 py-1\">\r\n    Value based on assumed 10% annual growth of Nifty 50 index.\r\n  </div>\r\n  <div class=\"w-100 px-2 py-1\">\r\n    <lib-radio [field]=\"guranteedannuityObj\" [(ngModel)]=\"selectedGuranteedAnnuity\" (ngModelChange)=\"onGuranteedAnnuityChange($event)\" />\r\n  </div>\r\n <div class=\"annuity-msg-1 d-flex align-items-center flex-nowrap w-100 px-2 py-1\">\r\n  <img src=\"https://cdn.godigit.com/digitPlusAssets/streamline_graph-arrow-increase-remix.png\" style=\"max-width: 24px;\" />\r\n  <span>Potential for higher returns by lowering the minimum guaranteed annuity rate.</span>\r\n</div>\r\n</div>\r\n\r\n      </div>\r\n    </div>\r\n    <div class=\"vertical-line\"></div>\r\n    <div class=\"custom-grid-template\">\r\n      <div>\r\n        <lib-toggle [field]=\"enableAutoDebitObj\" [(ngModel)]=\"isEnableAutoDebit\" (ngModelChange)=\"onEnableAutoDebitValueChange($event)\" />\r\n      </div>\r\n    </div>\r\n\r\n  </div>\r\n\r\n\r\n  <div class=\"card py-3 mb-4 border-top-0\" style=\"border-top-left-radius: 0px; border-top-right-radius: 0px;\">\r\n    <div class=\"mx-4\">\r\n      <lib-button [field]=\"recalculateButton\" (click)=\"calculateButtonClicked()\" />\r\n     <div class=\"card  mb-0 mt-2\" style=\"align-items: center;border:none;font-size: 8px;font-weight: 400;color:rgba(68, 68, 68, 1) \">\r\n    <div class=\"mx-4\"><img src=\"https://cdn.godigit.com/digitPlusAssets/Group+1010106336.png\" style=\"margin-left: 3px;\"/>\r\n      <span style=\"margin-left: 6px;\">Every time you make a change above, please click recalculate.</span>\r\n    </div>\r\n    </div>\r\n  </div>\r\n    <div 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;\" *ngIf=\"annuityTableCalculator?.isVisible\">\r\n    <img src=\"https://cdn.godigit.com/retail-life/calculator.svg\"/>\r\n      Minimum Guaranteed Payout(A) + Variable Payout(B) = Total Payout(C)\r\n  </div>\r\n  <!-- annuity calculator table -->\r\n    <div class=\"annuity-tables-main-container\" *ngIf=\"annuityTableCalculator?.isVisible\">\r\n    <div class=\"d-flex flex-row annuity-tables-container\">\r\n      <!-- Table 1 -->\r\n      <div class=\"annuity-calculator-table1\">\r\n        <div class=\"table-header annuitytable1-header\">Minimum Guaranteed Annuity Payout(A)</div>\r\n        <div class=\"table-body\">\r\n          <div class=\"table-cell\"><span class=\"rupee-icon\">\u20B9</span><span style=\"font-size:12px; color: rgba(68, 68, 68, 1);\"><{{annuityTableCalculator.annuitycalculatorTable1val1}}></span></div>\r\n          <button class=\"annuitytable-button\">{{annuityTableCalculator.annuitycalculatorTable1val2}}</button>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"operator-symbol\">+</div>\r\n\r\n      <!-- Table 2 -->\r\n      <div class=\"annuity-calculator-table2\">\r\n        <div class=\"table-header annuitytable1-header\">Assume growth of BenchMark index</div>\r\n        <div class=\"table-body\">\r\n          <div class=\"table-row\">&#64;{{annuityTableCalculator.annuitycalculatorTable2val1}}</div>\r\n          <div class=\"table-row\">&#64;{{annuityTableCalculator.annuitycalculatorTable2val2}}</div>\r\n          <div class=\"table-row\">&#64;{{annuityTableCalculator.annuitycalculatorTable2val3}}</div>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- Table 3 -->\r\n      <div class=\"annuity-calculator-table3\">\r\n        <div class=\"table-header annuitytable1-header\">1st Variable Annuity Payout(B)</div>\r\n        <div class=\"table-body\">\r\n          <div class=\"table-row\"><span class=\"rupee-icon\">\u20B9</span>{{annuityTableCalculator.annuitycalculatorTable3val1}}</div>\r\n          <div class=\"table-row\"><span class=\"rupee-icon\">\u20B9</span>{{annuityTableCalculator.annuitycalculatorTable3val2}}</div>\r\n          <div class=\"table-row\"><span class=\"rupee-icon\">\u20B9</span>{{annuityTableCalculator.annuitycalculatorTable3val3}}</div>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"operator-symbol\">=</div>\r\n\r\n      <!-- Table 4 -->\r\n      <div class=\"annuity-calculator-table4\">\r\n        <div class=\"table-header annuitytable4-header\">1st TotalPayout/Frequency(C)</div>\r\n        <div class=\"table-body\">\r\n          <div class=\"table-row annuitytable4-bg\"><span class=\"rupee-icon\">\u20B9</span>{{annuityTableCalculator.annuitycalculatorTable4val1}}</div>\r\n          <div class=\"table-row annuitytable4-bg\"><span class=\"rupee-icon\">\u20B9</span>{{annuityTableCalculator.annuitycalculatorTable4val2}}</div>\r\n          <div class=\"table-row annuitytable4-bg\"><span class=\"rupee-icon\">\u20B9</span>{{annuityTableCalculator.annuitycalculatorTable4val3}}</div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n   </div>\r\n\r\n   <div class=\"annuity-calculator-paragraph\" *ngIf=\"annuityTableCalculator?.isVisible\">\r\n    <span class=\"annuity-calculator-paragraph1\">This is an assumed growth percentage for the index basis which the values in columns B and C are calculated.</span> Actual growth will depend on index performance and may affect your variable annuity payout and total annuity payout.\r\n   </div>\r\n\r\n  <div>\r\n    <lib-button [field]=\"generateSummaryObj\" (click)=\"generateSummaryClicked()\" />\r\n  </div>\r\n</div>\r\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}}\n"] }]
+                    ], template: "<div class=\"card px-3\" style=\"padding: 16px;\">\r\n  <div class=\"row\">\r\n    <h4 class=\"card-main-title\"><span style=\"margin-right: 12px;\"><img\r\n          src=\"https://cdn.godigit.com/retail-life/calculator.svg\" alt=\"annuity calculator\"></span>Here's your Premium\r\n      to Annuity Calculator</h4>\r\n  </div>\r\n  <!-- <div class=\"row\"> -->\r\n  <div class=\"card pb-4 px-4\" style=\"border-bottom-left-radius: 0px; border-bottom-right-radius: 0px;\">\r\n    <!-- <div class=\"custom-grid-template\">\r\n\r\n    </div> -->\r\n\r\n    <div class=\"row mx-auto\" style=\"transform: translate(0px, -58%);\">\r\n      <lib-toggle class=\"col-auto\" [field]=\"annuityPremiumToggleObj\" />\r\n    </div>\r\n    <!-- </div> -->\r\n    <div class=\" col-12\" style=\"\r\n    justify-content: center;\r\n    flex-direction: row;\r\n    display: flex;\r\n\">\r\n      <div class=\"col-5 col-lg-5 d-flex flex-column p-0\">\r\n        <lib-select-textbox [field]=\"annuityPremiumObj\" [(ngModel)]=\"annuityPremium\"\r\n          (ngModelChange)=\"onAnnuityPremiumValueChange($event)\" />\r\n        <div class=\"error-message\" *ngIf=\"validations.ispremiumEntry\">\r\n          Enter Premium\r\n        </div>\r\n        <div>\r\n          <lib-toggle [field]=\"enableAutoDebitObj\" [(ngModel)]=\"isEnableAutoDebit\"\r\n            (ngModelChange)=\"onEnableAutoDebitValueChange($event)\" />\r\n        </div>\r\n      </div>\r\n      <div class=\"col-2 col-lg-2 d-flex justify-content-center align-items-center\"\r\n        style=\"display: flex; align-items: flex-end; transform: translate(0px, 6px); position: relative;\">\r\n        <!-- Vertical center line split around icon -->\r\n        <div\r\n          style=\"position: absolute; left: 50%; transform: translateX(-50%); width: 1px;height: calc(50% - 16px); top: 0; background: rgba(221, 221, 221, 1)\">\r\n        </div>\r\n        <lib-icon-button [field]=\"interchangeButtonObj\" />\r\n        <div\r\n          style=\"position: absolute; left: 50%; transform: translateX(-50%); width: 1px; height: calc(50% - 16px); bottom: 0; background: rgba(221, 221, 221, 1)\">\r\n        </div>\r\n      </div>\r\n      <div class=\"col-5 col-lg-5 d-flex flex-column p-0\">\r\n        <lib-select-textbox [field]=\"minimumAnnuityPayoutObj\" [(ngModel)]=\"minumumAnnuityPayout\"\r\n          (ngModelChange)=\"onMinPremiumValueChange($event)\" />\r\n        <div class=\"minium-annuity mt-3\">\r\n          <div class=\"annuity-msg w-100 px-2 py-1\">\r\n            Value based on assumed 10% annual growth of Nifty 50 index.\r\n          </div>\r\n          <div class=\"w-100 px-2 py-1\">\r\n            <lib-radio [field]=\"guranteedannuityObj\" [(ngModel)]=\"selectedGuranteedAnnuity\"\r\n              (ngModelChange)=\"onGuranteedAnnuityChange($event)\" />\r\n          </div>\r\n          <div class=\"annuity-msg-1 d-flex align-items-center flex-nowrap w-100 px-2 py-1\">\r\n            <img src=\"https://cdn.godigit.com/digitPlusAssets/streamline_graph-arrow-increase-remix.png\"\r\n              style=\"max-width: 24px;\" />\r\n            <span>Potential for higher returns by lowering the minimum guaranteed annuity rate.</span>\r\n          </div>\r\n        </div>\r\n\r\n      </div>\r\n    </div>\r\n    <!-- <div class=\"vertical-line\"></div> -->\r\n    <!-- <div class=\"custom-grid-template\">\r\n      <div>\r\n        <lib-toggle [field]=\"enableAutoDebitObj\" [(ngModel)]=\"isEnableAutoDebit\"\r\n          (ngModelChange)=\"onEnableAutoDebitValueChange($event)\" />\r\n      </div>\r\n    </div> -->\r\n\r\n  </div>\r\n\r\n\r\n  <div class=\"card py-3 mb-4 border-top-0\" style=\"border-top-left-radius: 0px; border-top-right-radius: 0px;\">\r\n    <div class=\"mx-4\">\r\n      <lib-button [field]=\"recalculateButton\" (click)=\"calculateButtonClicked()\" />\r\n      <div class=\"card  mb-0 mt-2\"\r\n        style=\"align-items: center;border:none;font-size: 8px;font-weight: 400;color:rgba(68, 68, 68, 1) \">\r\n        <div class=\"mx-4\"><img src=\"https://cdn.godigit.com/digitPlusAssets/Group+1010106336.png\"\r\n            style=\"margin-left: 3px;\" />\r\n          <span style=\"margin-left: 6px;\">Every time you make a change above, please click recalculate.</span>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div\r\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;\"\r\n      *ngIf=\"annuityTableCalculator?.isVisible\">\r\n      <img src=\"https://cdn.godigit.com/retail-life/calculator.svg\" />\r\n      Minimum Guaranteed Payout(A) + Variable Payout(B) = Total Payout(C)\r\n    </div>\r\n    <!-- annuity calculator table -->\r\n    <div class=\"annuity-tables-main-container\" *ngIf=\"annuityTableCalculator?.isVisible\">\r\n      <div class=\"d-flex flex-row annuity-tables-container\">\r\n        <!-- Table 1 -->\r\n        <div class=\"annuity-calculator-table1\">\r\n          <div class=\"table-header annuitytable1-header\">Minimum Guaranteed Annuity Payout(A)</div>\r\n          <div class=\"table-body\">\r\n            <div class=\"table-cell\"><span class=\"rupee-icon\">\u20B9</span><span\r\n                style=\"font-size:12px; color: rgba(68, 68, 68, 1);\">\r\n                <{{annuityTableCalculator.annuitycalculatorTable1val1}}>\r\n              </span></div>\r\n            <button class=\"annuitytable-button\">{{annuityTableCalculator.annuitycalculatorTable1val2}}</button>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"operator-symbol\">+</div>\r\n\r\n        <!-- Table 2 -->\r\n        <div class=\"annuity-calculator-table2\">\r\n          <div class=\"table-header annuitytable1-header\">Assume growth of BenchMark index</div>\r\n          <div class=\"table-body\">\r\n            <div class=\"table-row\">&#64;{{annuityTableCalculator.annuitycalculatorTable2val1}}</div>\r\n            <div class=\"table-row\">&#64;{{annuityTableCalculator.annuitycalculatorTable2val2}}</div>\r\n            <div class=\"table-row\">&#64;{{annuityTableCalculator.annuitycalculatorTable2val3}}</div>\r\n          </div>\r\n        </div>\r\n\r\n        <!-- Table 3 -->\r\n        <div class=\"annuity-calculator-table3\">\r\n          <div class=\"table-header annuitytable1-header\">1st Variable Annuity Payout(B)</div>\r\n          <div class=\"table-body\">\r\n            <div class=\"table-row\"><span\r\n                class=\"rupee-icon\">\u20B9</span>{{annuityTableCalculator.annuitycalculatorTable3val1}}</div>\r\n            <div class=\"table-row\"><span\r\n                class=\"rupee-icon\">\u20B9</span>{{annuityTableCalculator.annuitycalculatorTable3val2}}</div>\r\n            <div class=\"table-row\"><span\r\n                class=\"rupee-icon\">\u20B9</span>{{annuityTableCalculator.annuitycalculatorTable3val3}}</div>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"operator-symbol\">=</div>\r\n\r\n        <!-- Table 4 -->\r\n        <div class=\"annuity-calculator-table4\">\r\n          <div class=\"table-header annuitytable4-header\">1st TotalPayout/Frequency(C)</div>\r\n          <div class=\"table-body\">\r\n            <div class=\"table-row annuitytable4-bg\"><span\r\n                class=\"rupee-icon\">\u20B9</span>{{annuityTableCalculator.annuitycalculatorTable4val1}}</div>\r\n            <div class=\"table-row annuitytable4-bg\"><span\r\n                class=\"rupee-icon\">\u20B9</span>{{annuityTableCalculator.annuitycalculatorTable4val2}}</div>\r\n            <div class=\"table-row annuitytable4-bg\"><span\r\n                class=\"rupee-icon\">\u20B9</span>{{annuityTableCalculator.annuitycalculatorTable4val3}}</div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"annuity-calculator-paragraph\" *ngIf=\"annuityTableCalculator?.isVisible\">\r\n      <span class=\"annuity-calculator-paragraph1\">This is an assumed growth percentage for the index basis which the\r\n        values in columns B and C are calculated.</span> Actual growth will depend on index performance and may affect\r\n      your variable annuity payout and total annuity payout.\r\n    </div>\r\n\r\n    <div>\r\n      <lib-button [field]=\"generateSummaryObj\" (click)=\"generateSummaryClicked()\" />\r\n    </div>\r\n  </div>\r\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}}\n"] }]
         }], ctorParameters: () => [{ type: MasterControlService }], propDecorators: { onCalcualteButtonClick: [{
                 type: Output
             }], onGenerateSummaryClick: [{