master-control 0.4.3 → 0.4.5
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.
|
@@ -6471,7 +6471,7 @@ class AnnuityPremiumCalculatorComponent {
|
|
|
6471
6471
|
placeHolder: null,
|
|
6472
6472
|
metaId: 'LI_DP_GEN_CTRL_toggle_annuityPremiumToggle_V1',
|
|
6473
6473
|
isVisible: true,
|
|
6474
|
-
isDisable:
|
|
6474
|
+
isDisable: true,
|
|
6475
6475
|
validators: {
|
|
6476
6476
|
isRequired: false,
|
|
6477
6477
|
requiredMessage: 'This field cannot be empty',
|
|
@@ -7067,24 +7067,7 @@ class AnnuityPremiumCalculatorComponent {
|
|
|
7067
7067
|
"pattern": null,
|
|
7068
7068
|
"patternMessage": ""
|
|
7069
7069
|
},
|
|
7070
|
-
"options": [
|
|
7071
|
-
{
|
|
7072
|
-
"value": "AP",
|
|
7073
|
-
"label": "100%"
|
|
7074
|
-
},
|
|
7075
|
-
{
|
|
7076
|
-
"value": "AT",
|
|
7077
|
-
"label": "80%"
|
|
7078
|
-
},
|
|
7079
|
-
{
|
|
7080
|
-
"value": "AT",
|
|
7081
|
-
"label": "70%"
|
|
7082
|
-
},
|
|
7083
|
-
{
|
|
7084
|
-
"value": "AT",
|
|
7085
|
-
"label": "60%"
|
|
7086
|
-
}
|
|
7087
|
-
],
|
|
7070
|
+
"options": [],
|
|
7088
7071
|
"cssClass": " col-sm-12 col-md-3 col-lg-3 col-xl-3 annuityType",
|
|
7089
7072
|
"value": null,
|
|
7090
7073
|
"style": null,
|
|
@@ -7192,6 +7175,12 @@ class AnnuityPremiumCalculatorComponent {
|
|
|
7192
7175
|
this.recalculateButton['isDisable'] = this.premiumDetails()?.calculateAnnuity['isDisable'];
|
|
7193
7176
|
}
|
|
7194
7177
|
}
|
|
7178
|
+
//guranteed Annuity options
|
|
7179
|
+
if (!this.masterService.checkIfValueIsEmpty(this.premiumDetails()?.guranteedAnnuity)) {
|
|
7180
|
+
if (!this.masterService.checkIfValueIsEmpty(this.premiumDetails()?.guranteedAnnuity['options'])) {
|
|
7181
|
+
this.guranteedannuityObj['options'] = this.premiumDetails()?.guranteedAnnuity['options'];
|
|
7182
|
+
}
|
|
7183
|
+
}
|
|
7195
7184
|
if (!this.masterService.checkIfValueIsEmpty(this.premiumDetails()?.generateSummary)) {
|
|
7196
7185
|
if (!this.masterService.checkIfValueIsEmpty(this.premiumDetails()?.generateSummary['controlStyle'])) {
|
|
7197
7186
|
this.generateSummaryObj['controlStyle'] = this.premiumDetails()?.generateSummary['controlStyle'];
|
|
@@ -7247,7 +7236,7 @@ class AnnuityPremiumCalculatorComponent {
|
|
|
7247
7236
|
}
|
|
7248
7237
|
}
|
|
7249
7238
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AnnuityPremiumCalculatorComponent, deps: [{ token: MasterControlService }], target: i0.ɵɵFactoryTarget.Component });
|
|
7250
|
-
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\">\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\">\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\">@{{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 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:36px}.annuity-msg-1{padding:4px 6px;margin-top:8px;font-size:10px;font-weight:400;color:#444;background-color:#e6f7f3;height:28px;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:auto}}@media (max-width: 575px){.annuity-msg-1{font-size:10px;line-height:1;flex-wrap:nowrap!important;height:auto}.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:auto}}@media (max-width: 767px) and (min-width: 576px){.annuity-msg,.annuity-msg-1{font-size:10px;line-height:1.1;height:auto}}\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"] }] });
|
|
7239
|
+
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\">@{{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 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"] }] });
|
|
7251
7240
|
}
|
|
7252
7241
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AnnuityPremiumCalculatorComponent, decorators: [{
|
|
7253
7242
|
type: Component,
|
|
@@ -7259,7 +7248,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
7259
7248
|
RadioComponent,
|
|
7260
7249
|
CommonModule,
|
|
7261
7250
|
FormsModule
|
|
7262
|
-
], 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\">\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\">\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\">@{{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 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:36px}.annuity-msg-1{padding:4px 6px;margin-top:8px;font-size:10px;font-weight:400;color:#444;background-color:#e6f7f3;height:28px;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:auto}}@media (max-width: 575px){.annuity-msg-1{font-size:10px;line-height:1;flex-wrap:nowrap!important;height:auto}.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:auto}}@media (max-width: 767px) and (min-width: 576px){.annuity-msg,.annuity-msg-1{font-size:10px;line-height:1.1;height:auto}}\n"] }]
|
|
7251
|
+
], 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\">@{{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 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"] }]
|
|
7263
7252
|
}], ctorParameters: () => [{ type: MasterControlService }], propDecorators: { onCalcualteButtonClick: [{
|
|
7264
7253
|
type: Output
|
|
7265
7254
|
}], onGenerateSummaryClick: [{
|