master-control 0.4.16 → 0.4.17
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.
|
@@ -7069,7 +7069,7 @@ class AnnuityPremiumCalculatorComponent {
|
|
|
7069
7069
|
"label": "Minimum Guaranteed Annuity Payout %",
|
|
7070
7070
|
"placeHolder": "",
|
|
7071
7071
|
"metaId": "LI_DP_DP_CTRL_radio_annuityType_V1",
|
|
7072
|
-
"isVisible":
|
|
7072
|
+
"isVisible": false,
|
|
7073
7073
|
"isDisable": false,
|
|
7074
7074
|
"validators": {
|
|
7075
7075
|
"isRequired": true,
|
|
@@ -7254,7 +7254,7 @@ class AnnuityPremiumCalculatorComponent {
|
|
|
7254
7254
|
}
|
|
7255
7255
|
}
|
|
7256
7256
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AnnuityPremiumCalculatorComponent, deps: [{ token: MasterControlService }], target: i0.ɵɵFactoryTarget.Component });
|
|
7257
|
-
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" }, 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\" *ngIf=\"guranteedannuityObj['isVisible']\">\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\">@{{annuityTableCalculator.annuitycalculatorTable2val1}}</div>\r\n <div class=\"table-row\">@{{annuityTableCalculator.annuitycalculatorTable2val2}}</div>\r\n <div class=\"table-row\">@{{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"] }] });
|
|
7257
|
+
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" }, 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\" *ngIf=\"guranteedannuityObj['isVisible']\">\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\">@{{annuityTableCalculator.annuitycalculatorTable2val1}}</div>\r\n <div class=\"table-row\">@{{annuityTableCalculator.annuitycalculatorTable2val2}}</div>\r\n <div class=\"table-row\">@{{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"] }] });
|
|
7258
7258
|
}
|
|
7259
7259
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AnnuityPremiumCalculatorComponent, decorators: [{
|
|
7260
7260
|
type: Component,
|
|
@@ -7266,7 +7266,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
7266
7266
|
RadioComponent,
|
|
7267
7267
|
CommonModule,
|
|
7268
7268
|
FormsModule
|
|
7269
|
-
], 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\" *ngIf=\"guranteedannuityObj['isVisible']\">\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\">@{{annuityTableCalculator.annuitycalculatorTable2val1}}</div>\r\n <div class=\"table-row\">@{{annuityTableCalculator.annuitycalculatorTable2val2}}</div>\r\n <div class=\"table-row\">@{{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"] }]
|
|
7269
|
+
], 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\" *ngIf=\"guranteedannuityObj['isVisible']\">\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\">@{{annuityTableCalculator.annuitycalculatorTable2val1}}</div>\r\n <div class=\"table-row\">@{{annuityTableCalculator.annuitycalculatorTable2val2}}</div>\r\n <div class=\"table-row\">@{{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"] }]
|
|
7270
7270
|
}], ctorParameters: () => [{ type: MasterControlService }], propDecorators: { onCalcualteButtonClick: [{
|
|
7271
7271
|
type: Output
|
|
7272
7272
|
}], onGenerateSummaryClick: [{
|