master-control 0.4.35 → 0.4.36
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.
|
@@ -7383,7 +7383,7 @@ class AnnuityPremiumCalculatorComponent {
|
|
|
7383
7383
|
}
|
|
7384
7384
|
}
|
|
7385
7385
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AnnuityPremiumCalculatorComponent, deps: [{ token: MasterControlService }], target: i0.ɵɵFactoryTarget.Component });
|
|
7386
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: AnnuityPremiumCalculatorComponent, isStandalone: true, selector: "lib-annuity-premium-calculator", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, premiumDetails: { classPropertyName: "premiumDetails", publicName: "premiumDetails", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onCalcualteButtonClick: "onCalcualteButtonClick", onGenerateSummaryClick: "onGenerateSummaryClick", onAnnuityPremiumChange: "onAnnuityPremiumChange", onMinimumPremiumValueChange: "onMinimumPremiumValueChange", onAutioDebitValueChange: "onAutioDebitValueChange", onGuranteedAnnuityValueChange: "onGuranteedAnnuityValueChange", onDigitBossSwitchToggle: "onDigitBossSwitchToggle" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"card px-3\" style=\"padding: 16px;\">\n <div class=\"row\">\n <h4 class=\"card-main-title\"><span style=\"margin-right: 12px;\"><img\n src=\"https://cdn.godigit.com/retail-life/calculator.svg\" alt=\"annuity calculator\"></span>Here's your Premium\n to Annuity Calculator</h4>\n </div>\n <!-- <div class=\"row\"> -->\n <div class=\"card pb-4 px-4\" style=\"border-bottom-left-radius: 0px; border-bottom-right-radius: 0px;\">\n <!-- <div class=\"custom-grid-template\">\n\n </div> -->\n\n <div class=\"row mx-auto\" style=\"transform: translate(0px, -58%);\">\n <lib-toggle class=\"col-auto\" [field]=\"annuityPremiumToggleObj\" />\n </div>\n <!-- </div> -->\n <div class=\" col-12\" style=\"\n justify-content: center;\n flex-direction: row;\n display: flex;\n\">\n <div class=\"col-5 col-lg-5 d-flex flex-column p-0\">\n <lib-select-textbox [field]=\"annuityPremiumObj\" [(ngModel)]=\"annuityPremium\"\n (ngModelChange)=\"onAnnuityPremiumValueChange($event)\" />\n <div class=\"error-message\" *ngIf=\"validations.ispremiumEntry\">\n Enter Premium\n </div>\n <div>\n <lib-toggle [field]=\"enableAutoDebitObj\" [(ngModel)]=\"isEnableAutoDebit\"\n (ngModelChange)=\"onEnableAutoDebitValueChange($event)\" />\n </div>\n </div>\n <div class=\"col-2 col-lg-2 d-flex justify-content-center align-items-center\"\n style=\"display: flex; align-items: flex-end; transform: translate(0px, 6px); position: relative;\">\n <!-- Vertical center line split around icon -->\n <div\n style=\"position: absolute; left: 50%; transform: translateX(-50%); width: 1px;height: calc(50% - 16px); top: 0; background: rgba(221, 221, 221, 1)\">\n </div>\n <lib-icon-button [field]=\"interchangeButtonObj\" />\n <div\n style=\"position: absolute; left: 50%; transform: translateX(-50%); width: 1px; height: calc(50% - 16px); bottom: 0; background: rgba(221, 221, 221, 1)\">\n </div>\n </div>\n <div class=\"col-5 col-lg-5 d-flex flex-column p-0\">\n <lib-select-textbox [field]=\"minimumAnnuityPayoutObj\" [(ngModel)]=\"minumumAnnuityPayout\"\n (ngModelChange)=\"onMinPremiumValueChange($event)\" />\n <div class=\"minium-annuity mt-3\" *ngIf=\"guranteedannuityObj['isVisible']\">\n <div class=\"annuity-msg w-100 px-2 py-1\">\n Value based on assumed 10% annual growth of Nifty 50 index.\n </div>\n <div class=\"w-100 px-2 py-1\">\n <lib-radio [field]=\"guranteedannuityObj\" [(ngModel)]=\"selectedGuranteedAnnuity\"\n (ngModelChange)=\"onGuranteedAnnuityChange($event)\" />\n </div>\n <div class=\"annuity-msg-1 d-flex align-items-center flex-nowrap w-100 px-2 py-1\">\n <img src=\"https://cdn.godigit.com/digitPlusAssets/streamline_graph-arrow-increase-remix.png\"\n style=\"max-width: 24px;\" />\n <span>Potential for higher returns by lowering the minimum guaranteed annuity rate.</span>\n </div>\n </div>\n\n </div>\n </div>\n <!-- <div class=\"vertical-line\"></div> -->\n <!-- <div class=\"custom-grid-template\">\n <div>\n <lib-toggle [field]=\"enableAutoDebitObj\" [(ngModel)]=\"isEnableAutoDebit\"\n (ngModelChange)=\"onEnableAutoDebitValueChange($event)\" />\n </div>\n </div> -->\n\n </div>\n\n\n <div class=\"card py-3 mb-4 border-top-0\" style=\"border-top-left-radius: 0px; border-top-right-radius: 0px;\">\n <div class=\"mx-4\">\n <div class=\"digit-boss-banner\" *ngIf=\"digitBossSwitch?.isVisible\">\n <lib-toggle [field]=\"digitBossToggleConfig\" [ngModel]=\"this.digitBossSwitch?.isSwitchOn\" (ngModelChange)=\"onDigitBossSwitchChange($event)\" (change)=\"onDigitBossSwitchChange($event)\"></lib-toggle>\n <div class=\"digit-boss-text\">\n {{this.digitBossSwitch?.prefixText}}\n <span class=\"highlight\">{{this.digitBossSwitch?.highlightText}}</span>\n {{this.digitBossSwitch?.subText}}\n <span class=\"arrow-icon\">\u2197</span>\n </div>\n </div>\n <lib-button [field]=\"recalculateButton\" (click)=\"calculateButtonClicked()\" />\n <div class=\"card mb-0 mt-2\"\n style=\"align-items: center;border:none;font-size: 8px;font-weight: 400;color:rgba(68, 68, 68, 1) \">\n <div class=\"mx-4\"><img src=\"https://cdn.godigit.com/digitPlusAssets/Group+1010106336.png\"\n style=\"margin-left: 3px;\" />\n <span style=\"margin-left: 6px;\">Every time you make a change above, please click recalculate.</span>\n </div>\n </div>\n </div>\n <div\n style=\"display: flex;align-items: center;justify-content: center;border:none;font-size: 10px;font-weight: 700;height:32px;background-color: rgba(255, 250, 235, 1);gap: 8px;margin: 4px;\"\n *ngIf=\"annuityTableCalculator?.isVisible\">\n <img src=\"https://cdn.godigit.com/retail-life/calculator.svg\" />\n Minimum Guaranteed Payout(A) + Variable Payout(B) = Total Payout(C)\n </div>\n <!-- annuity calculator table -->\n <div class=\"annuity-tables-main-container\" *ngIf=\"annuityTableCalculator?.isVisible\">\n <div class=\"d-flex flex-row annuity-tables-container\">\n <!-- Table 1 -->\n <div class=\"annuity-calculator-table1\">\n <div class=\"table-header annuitytable1-header\">Minimum Guaranteed Annuity Payout(A)</div>\n <div class=\"table-body\">\n <div class=\"table-cell\"><span class=\"rupee-icon\">\u20B9</span><span\n style=\"font-size:12px; color: rgba(68, 68, 68, 1);\">\n <{{annuityTableCalculator.annuitycalculatorTable1val1}}>\n </span></div>\n <button class=\"annuitytable-button\">{{annuityTableCalculator.annuitycalculatorTable1val2}}</button>\n </div>\n </div>\n\n <div class=\"operator-symbol\">+</div>\n\n <!-- Table 2 -->\n <div class=\"annuity-calculator-table2\">\n <div class=\"table-header annuitytable1-header\">Assume growth of BenchMark index</div>\n <div class=\"table-body\">\n <div class=\"table-row\">@{{annuityTableCalculator.annuitycalculatorTable2val1}}</div>\n <div class=\"table-row\">@{{annuityTableCalculator.annuitycalculatorTable2val2}}</div>\n <div class=\"table-row\">@{{annuityTableCalculator.annuitycalculatorTable2val3}}</div>\n </div>\n </div>\n\n <!-- Table 3 -->\n <div class=\"annuity-calculator-table3\">\n <div class=\"table-header annuitytable1-header\">1st Variable Annuity Payout(B)</div>\n <div class=\"table-body\">\n <div class=\"table-row\"><span\n class=\"rupee-icon\">\u20B9</span>{{annuityTableCalculator.annuitycalculatorTable3val1}}</div>\n <div class=\"table-row\"><span\n class=\"rupee-icon\">\u20B9</span>{{annuityTableCalculator.annuitycalculatorTable3val2}}</div>\n <div class=\"table-row\"><span\n class=\"rupee-icon\">\u20B9</span>{{annuityTableCalculator.annuitycalculatorTable3val3}}</div>\n </div>\n </div>\n\n <div class=\"operator-symbol\">=</div>\n\n <!-- Table 4 -->\n <div class=\"annuity-calculator-table4\">\n <div class=\"table-header annuitytable4-header\">1st TotalPayout/Frequency(C)</div>\n <div class=\"table-body\">\n <div class=\"table-row annuitytable4-bg\"><span\n class=\"rupee-icon\">\u20B9</span>{{annuityTableCalculator.annuitycalculatorTable4val1}}</div>\n <div class=\"table-row annuitytable4-bg\"><span\n class=\"rupee-icon\">\u20B9</span>{{annuityTableCalculator.annuitycalculatorTable4val2}}</div>\n <div class=\"table-row annuitytable4-bg\"><span\n class=\"rupee-icon\">\u20B9</span>{{annuityTableCalculator.annuitycalculatorTable4val3}}</div>\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"annuity-calculator-paragraph\" *ngIf=\"annuityTableCalculator?.isVisible\">\n <span class=\"annuity-calculator-paragraph1\">This is an assumed growth percentage for the index basis which the\n values in columns B and C are calculated.</span> Actual growth will depend on index performance and may affect\n your variable annuity payout and total annuity payout.\n </div>\n\n <div *ngIf=\"generateSummaryObj.isVisible\">\n <lib-button [field]=\"generateSummaryObj\" (click)=\"generateSummaryClicked()\" />\n </div>\n </div>\n", styles: [".card-main-title{font-size:16px;font-family:Mulish!important;letter-spacing:0px!important;font-weight:800;line-height:24px;padding-bottom:16px}.col-5-5{flex:0 0 auto;max-width:44.16666667%}.custom-grid-template{display:grid;grid-template-columns:4fr .5fr 4fr;align-items:end}.vertical-line{border-left:2px solid #ccc;height:100px;margin:0 10px}.error-message{font-size:12px;font-weight:500;color:#e00;letter-spacing:0px}.annuity-msg{padding:4px 6px;margin-top:8px;font-size:10px;font-weight:400;color:#444;background-color:#e5f0fa;height:fit-content}.annuity-msg-1{padding:4px 6px;margin-top:8px;font-size:10px;font-weight:400;color:#444;background-color:#e6f7f3;height:fit-content;flex-wrap:nowrap!important}.annuity-tables-main-container{border:2px solid rgba(221,221,221,1);border-radius:8px;display:flex}.annuity-tables-container{display:flex;align-items:stretch;gap:0;width:100%}.annuity-calculator-table1,.annuity-calculator-table2,.annuity-calculator-table3,.annuity-calculator-table4{display:flex;flex-direction:column;height:100%;flex:1;color:#444;font-weight:400;font-size:10px}.annuity-calculator-table1{border-right:1px solid rgba(221,221,221,1)}.annuity-calculator-table2{border-left:1px solid rgba(221,221,221,1);border-right:1px solid rgba(221,221,221,1)}.annuity-calculator-table3{border-right:1px solid rgba(221,221,221,1)}.annuity-calculator-table4{border-left:1px solid rgba(221,221,221,1)}.table-header{padding:12px;font-size:10px;font-weight:700;text-align:center;border-bottom:1px solid rgba(221,221,221,1);height:60px;display:flex;align-items:center;justify-content:center;word-wrap:break-word;word-break:break-word;hyphens:auto}.annuitytable1-header{background-color:#ececec;color:#444}.annuitytable4-header{background-color:#fb03;color:#444}.table-body{display:flex;flex-direction:column;flex:1}.table-cell{padding:12px;text-align:center;font-size:16px;font-weight:600;flex:1;display:flex;flex-direction:row;justify-content:center;align-items:center;gap:4px}.table-row{padding:12px;text-align:center;font-size:14px;font-weight:500;background-color:#fff;border-bottom:1px solid #999;flex:1;display:flex;align-items:center;justify-content:center}.table-row:last-child{border-bottom:none}.annuitytable4-bg{background-color:#e6f7f3!important;color:#444}.annuitytable-button{background-color:#ececec;border:none;border-radius:4px;padding:2px 8px;font-size:10px;font-weight:700;cursor:pointer;margin-top:0;width:auto;min-width:30%;max-width:90%;height:24px;display:block;margin-left:auto;margin-right:auto;position:relative;bottom:40px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.rupee-icon{font-weight:700;margin-right:2px;font-size:12px;color:#444}.operator-symbol{display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:700;padding:0 16px;color:#f90}.annuity-calculator-paragraph{padding:16px 8px 4px;font-size:10px;margin:0 0 20px auto;width:73%;font-weight:400;color:#444;background-color:#ebf1ff}.annuity-calculator-paragraph1{font-weight:700;font-size:10px}.minium-annuity{display:flex;flex-direction:column}@media (max-width: 991px) and (min-width: 768px){.table-header{padding:8px 4px;font-size:9px;line-height:1.1}}@media (max-width: 767px) and (min-width: 576px){.table-header{padding:10px 6px;font-size:9px}}@media (max-width: 575px){.table-header{padding:8px 4px;font-size:8px}}@media (max-width: 575px){.annuity-msg{font-size:10px;line-height:1;height:fit-content}}@media (max-width: 575px){.annuity-msg-1{font-size:10px;line-height:1;flex-wrap:nowrap!important;height:fit-content}.annuity-msg-1 .img{width:4px;height:4px}}@media (max-width: 991px) and (min-width: 768px){.annuity-msg,.annuity-msg-1{font-size:9px;line-height:1.1;height:fit-content}}@media (max-width: 767px) and (min-width: 576px){.annuity-msg,.annuity-msg-1{font-size:10px;line-height:1.1;height:fit-content}}.digit-boss-banner{background-color:#333;color:#fff;display:flex;align-items:center;padding:8px 16px;border-radius:4px;margin-bottom:16px;gap:8px;font-size:12px;min-height:16px;opacity:1;transform:rotate(0)}.digit-boss-banner ::ng-deep .toggle-background{margin-top:0!important;padding:0!important;background-color:transparent!important;border:none!important}.digit-boss-banner ::ng-deep .toggle_switch{margin-top:0!important;gap:0!important}.digit-boss-text{display:flex;align-items:center;gap:4px;white-space:nowrap}.highlight{color:#fb0;font-weight:700}.arrow-icon{color:#fb0;margin-left:4px;font-size:14px}\n"], dependencies: [{ kind: "component", type: ToggleComponent, selector: "lib-toggle", inputs: ["field", "reactiveFormControlobject"], outputs: ["change"] }, { kind: "component", type: SelectTextboxComponent, selector: "lib-select-textbox", inputs: ["field", "reactiveFormControlobject"], outputs: ["selectionChange"] }, { kind: "component", type: ButtonComponent, selector: "lib-button", inputs: ["field"] }, { kind: "component", type: IconButtonComponent, selector: "lib-icon-button", inputs: ["field"] }, { kind: "component", type: RadioComponent, selector: "lib-radio", inputs: ["reactiveFormControlobject", "field"], outputs: ["change"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
|
|
7386
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: AnnuityPremiumCalculatorComponent, isStandalone: true, selector: "lib-annuity-premium-calculator", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, premiumDetails: { classPropertyName: "premiumDetails", publicName: "premiumDetails", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onCalcualteButtonClick: "onCalcualteButtonClick", onGenerateSummaryClick: "onGenerateSummaryClick", onAnnuityPremiumChange: "onAnnuityPremiumChange", onMinimumPremiumValueChange: "onMinimumPremiumValueChange", onAutioDebitValueChange: "onAutioDebitValueChange", onGuranteedAnnuityValueChange: "onGuranteedAnnuityValueChange", onDigitBossSwitchToggle: "onDigitBossSwitchToggle" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"card px-3\" style=\"padding: 16px;\">\n <div class=\"row\">\n <h4 class=\"card-main-title\"><span style=\"margin-right: 12px;\"><img\n src=\"https://cdn.godigit.com/retail-life/calculator.svg\" alt=\"annuity calculator\"></span>Here's your Premium\n to Annuity Calculator</h4>\n </div>\n <!-- <div class=\"row\"> -->\n <div class=\"card pb-4 px-4\" style=\"border-bottom-left-radius: 0px; border-bottom-right-radius: 0px;\">\n <!-- <div class=\"custom-grid-template\">\n\n </div> -->\n\n <div class=\"row mx-auto\" style=\"transform: translate(0px, -58%);\">\n <lib-toggle class=\"col-auto\" [field]=\"annuityPremiumToggleObj\" />\n </div>\n <!-- </div> -->\n <div class=\" col-12\" style=\"\n justify-content: center;\n flex-direction: row;\n display: flex;\n\">\n <div class=\"col-5 col-lg-5 d-flex flex-column p-0\">\n <lib-select-textbox [field]=\"annuityPremiumObj\" [(ngModel)]=\"annuityPremium\"\n (ngModelChange)=\"onAnnuityPremiumValueChange($event)\" />\n <div class=\"error-message\" *ngIf=\"validations.ispremiumEntry\">\n Enter Premium\n </div>\n <div>\n <lib-toggle [field]=\"enableAutoDebitObj\" [(ngModel)]=\"isEnableAutoDebit\"\n (ngModelChange)=\"onEnableAutoDebitValueChange($event)\" />\n </div>\n </div>\n <div class=\"col-2 col-lg-2 d-flex justify-content-center align-items-center\"\n style=\"display: flex; align-items: flex-end; transform: translate(0px, 6px); position: relative;\">\n <!-- Vertical center line split around icon -->\n <div\n style=\"position: absolute; left: 50%; transform: translateX(-50%); width: 1px;height: calc(50% - 16px); top: 0; background: rgba(221, 221, 221, 1)\">\n </div>\n <lib-icon-button [field]=\"interchangeButtonObj\" />\n <div\n style=\"position: absolute; left: 50%; transform: translateX(-50%); width: 1px; height: calc(50% - 16px); bottom: 0; background: rgba(221, 221, 221, 1)\">\n </div>\n </div>\n <div class=\"col-5 col-lg-5 d-flex flex-column p-0\">\n <lib-select-textbox [field]=\"minimumAnnuityPayoutObj\" [(ngModel)]=\"minumumAnnuityPayout\"\n (ngModelChange)=\"onMinPremiumValueChange($event)\" />\n <div class=\"minium-annuity mt-3\" *ngIf=\"guranteedannuityObj['isVisible']\">\n <div class=\"annuity-msg w-100 px-2 py-1\">\n Value based on assumed 10% annual growth of Nifty 50 index.\n </div>\n <div class=\"w-100 px-2 py-1\">\n <lib-radio [field]=\"guranteedannuityObj\" [(ngModel)]=\"selectedGuranteedAnnuity\"\n (ngModelChange)=\"onGuranteedAnnuityChange($event)\" />\n </div>\n <div class=\"annuity-msg-1 d-flex align-items-center flex-nowrap w-100 px-2 py-1\">\n <img src=\"https://cdn.godigit.com/digitPlusAssets/streamline_graph-arrow-increase-remix.png\"\n style=\"max-width: 24px;\" />\n <span>Potential for higher returns by lowering the minimum guaranteed annuity rate.</span>\n </div>\n </div>\n\n </div>\n </div>\n <!-- <div class=\"vertical-line\"></div> -->\n <!-- <div class=\"custom-grid-template\">\n <div>\n <lib-toggle [field]=\"enableAutoDebitObj\" [(ngModel)]=\"isEnableAutoDebit\"\n (ngModelChange)=\"onEnableAutoDebitValueChange($event)\" />\n </div>\n </div> -->\n\n </div>\n\n\n <div class=\"card py-3 mb-4 border-top-0\" style=\"border-top-left-radius: 0px; border-top-right-radius: 0px;\">\n <div class=\"mx-4\">\n <div class=\"digit-boss-banner\" *ngIf=\"digitBossSwitch?.isVisible\">\n <lib-toggle [field]=\"digitBossToggleConfig\" [(ngModel)]=\"this.digitBossSwitch.isSwitchOn\" (ngModelChange)=\"onDigitBossSwitchChange($event)\"></lib-toggle>\n <div class=\"digit-boss-text\">\n {{this.digitBossSwitch?.prefixText}}\n <span class=\"highlight\">{{this.digitBossSwitch?.highlightText}}</span>\n {{this.digitBossSwitch?.subText}}\n <span class=\"arrow-icon\">\u2197</span>\n </div>\n </div>\n <lib-button [field]=\"recalculateButton\" (click)=\"calculateButtonClicked()\" />\n <div class=\"card mb-0 mt-2\"\n style=\"align-items: center;border:none;font-size: 8px;font-weight: 400;color:rgba(68, 68, 68, 1) \">\n <div class=\"mx-4\"><img src=\"https://cdn.godigit.com/digitPlusAssets/Group+1010106336.png\"\n style=\"margin-left: 3px;\" />\n <span style=\"margin-left: 6px;\">Every time you make a change above, please click recalculate.</span>\n </div>\n </div>\n </div>\n <div\n style=\"display: flex;align-items: center;justify-content: center;border:none;font-size: 10px;font-weight: 700;height:32px;background-color: rgba(255, 250, 235, 1);gap: 8px;margin: 4px;\"\n *ngIf=\"annuityTableCalculator?.isVisible\">\n <img src=\"https://cdn.godigit.com/retail-life/calculator.svg\" />\n Minimum Guaranteed Payout(A) + Variable Payout(B) = Total Payout(C)\n </div>\n <!-- annuity calculator table -->\n <div class=\"annuity-tables-main-container\" *ngIf=\"annuityTableCalculator?.isVisible\">\n <div class=\"d-flex flex-row annuity-tables-container\">\n <!-- Table 1 -->\n <div class=\"annuity-calculator-table1\">\n <div class=\"table-header annuitytable1-header\">Minimum Guaranteed Annuity Payout(A)</div>\n <div class=\"table-body\">\n <div class=\"table-cell\"><span class=\"rupee-icon\">\u20B9</span><span\n style=\"font-size:12px; color: rgba(68, 68, 68, 1);\">\n <{{annuityTableCalculator.annuitycalculatorTable1val1}}>\n </span></div>\n <button class=\"annuitytable-button\">{{annuityTableCalculator.annuitycalculatorTable1val2}}</button>\n </div>\n </div>\n\n <div class=\"operator-symbol\">+</div>\n\n <!-- Table 2 -->\n <div class=\"annuity-calculator-table2\">\n <div class=\"table-header annuitytable1-header\">Assume growth of BenchMark index</div>\n <div class=\"table-body\">\n <div class=\"table-row\">@{{annuityTableCalculator.annuitycalculatorTable2val1}}</div>\n <div class=\"table-row\">@{{annuityTableCalculator.annuitycalculatorTable2val2}}</div>\n <div class=\"table-row\">@{{annuityTableCalculator.annuitycalculatorTable2val3}}</div>\n </div>\n </div>\n\n <!-- Table 3 -->\n <div class=\"annuity-calculator-table3\">\n <div class=\"table-header annuitytable1-header\">1st Variable Annuity Payout(B)</div>\n <div class=\"table-body\">\n <div class=\"table-row\"><span\n class=\"rupee-icon\">\u20B9</span>{{annuityTableCalculator.annuitycalculatorTable3val1}}</div>\n <div class=\"table-row\"><span\n class=\"rupee-icon\">\u20B9</span>{{annuityTableCalculator.annuitycalculatorTable3val2}}</div>\n <div class=\"table-row\"><span\n class=\"rupee-icon\">\u20B9</span>{{annuityTableCalculator.annuitycalculatorTable3val3}}</div>\n </div>\n </div>\n\n <div class=\"operator-symbol\">=</div>\n\n <!-- Table 4 -->\n <div class=\"annuity-calculator-table4\">\n <div class=\"table-header annuitytable4-header\">1st TotalPayout/Frequency(C)</div>\n <div class=\"table-body\">\n <div class=\"table-row annuitytable4-bg\"><span\n class=\"rupee-icon\">\u20B9</span>{{annuityTableCalculator.annuitycalculatorTable4val1}}</div>\n <div class=\"table-row annuitytable4-bg\"><span\n class=\"rupee-icon\">\u20B9</span>{{annuityTableCalculator.annuitycalculatorTable4val2}}</div>\n <div class=\"table-row annuitytable4-bg\"><span\n class=\"rupee-icon\">\u20B9</span>{{annuityTableCalculator.annuitycalculatorTable4val3}}</div>\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"annuity-calculator-paragraph\" *ngIf=\"annuityTableCalculator?.isVisible\">\n <span class=\"annuity-calculator-paragraph1\">This is an assumed growth percentage for the index basis which the\n values in columns B and C are calculated.</span> Actual growth will depend on index performance and may affect\n your variable annuity payout and total annuity payout.\n </div>\n\n <div *ngIf=\"generateSummaryObj.isVisible\">\n <lib-button [field]=\"generateSummaryObj\" (click)=\"generateSummaryClicked()\" />\n </div>\n </div>\n", styles: [".card-main-title{font-size:16px;font-family:Mulish!important;letter-spacing:0px!important;font-weight:800;line-height:24px;padding-bottom:16px}.col-5-5{flex:0 0 auto;max-width:44.16666667%}.custom-grid-template{display:grid;grid-template-columns:4fr .5fr 4fr;align-items:end}.vertical-line{border-left:2px solid #ccc;height:100px;margin:0 10px}.error-message{font-size:12px;font-weight:500;color:#e00;letter-spacing:0px}.annuity-msg{padding:4px 6px;margin-top:8px;font-size:10px;font-weight:400;color:#444;background-color:#e5f0fa;height:fit-content}.annuity-msg-1{padding:4px 6px;margin-top:8px;font-size:10px;font-weight:400;color:#444;background-color:#e6f7f3;height:fit-content;flex-wrap:nowrap!important}.annuity-tables-main-container{border:2px solid rgba(221,221,221,1);border-radius:8px;display:flex}.annuity-tables-container{display:flex;align-items:stretch;gap:0;width:100%}.annuity-calculator-table1,.annuity-calculator-table2,.annuity-calculator-table3,.annuity-calculator-table4{display:flex;flex-direction:column;height:100%;flex:1;color:#444;font-weight:400;font-size:10px}.annuity-calculator-table1{border-right:1px solid rgba(221,221,221,1)}.annuity-calculator-table2{border-left:1px solid rgba(221,221,221,1);border-right:1px solid rgba(221,221,221,1)}.annuity-calculator-table3{border-right:1px solid rgba(221,221,221,1)}.annuity-calculator-table4{border-left:1px solid rgba(221,221,221,1)}.table-header{padding:12px;font-size:10px;font-weight:700;text-align:center;border-bottom:1px solid rgba(221,221,221,1);height:60px;display:flex;align-items:center;justify-content:center;word-wrap:break-word;word-break:break-word;hyphens:auto}.annuitytable1-header{background-color:#ececec;color:#444}.annuitytable4-header{background-color:#fb03;color:#444}.table-body{display:flex;flex-direction:column;flex:1}.table-cell{padding:12px;text-align:center;font-size:16px;font-weight:600;flex:1;display:flex;flex-direction:row;justify-content:center;align-items:center;gap:4px}.table-row{padding:12px;text-align:center;font-size:14px;font-weight:500;background-color:#fff;border-bottom:1px solid #999;flex:1;display:flex;align-items:center;justify-content:center}.table-row:last-child{border-bottom:none}.annuitytable4-bg{background-color:#e6f7f3!important;color:#444}.annuitytable-button{background-color:#ececec;border:none;border-radius:4px;padding:2px 8px;font-size:10px;font-weight:700;cursor:pointer;margin-top:0;width:auto;min-width:30%;max-width:90%;height:24px;display:block;margin-left:auto;margin-right:auto;position:relative;bottom:40px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.rupee-icon{font-weight:700;margin-right:2px;font-size:12px;color:#444}.operator-symbol{display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:700;padding:0 16px;color:#f90}.annuity-calculator-paragraph{padding:16px 8px 4px;font-size:10px;margin:0 0 20px auto;width:73%;font-weight:400;color:#444;background-color:#ebf1ff}.annuity-calculator-paragraph1{font-weight:700;font-size:10px}.minium-annuity{display:flex;flex-direction:column}@media (max-width: 991px) and (min-width: 768px){.table-header{padding:8px 4px;font-size:9px;line-height:1.1}}@media (max-width: 767px) and (min-width: 576px){.table-header{padding:10px 6px;font-size:9px}}@media (max-width: 575px){.table-header{padding:8px 4px;font-size:8px}}@media (max-width: 575px){.annuity-msg{font-size:10px;line-height:1;height:fit-content}}@media (max-width: 575px){.annuity-msg-1{font-size:10px;line-height:1;flex-wrap:nowrap!important;height:fit-content}.annuity-msg-1 .img{width:4px;height:4px}}@media (max-width: 991px) and (min-width: 768px){.annuity-msg,.annuity-msg-1{font-size:9px;line-height:1.1;height:fit-content}}@media (max-width: 767px) and (min-width: 576px){.annuity-msg,.annuity-msg-1{font-size:10px;line-height:1.1;height:fit-content}}.digit-boss-banner{background-color:#333;color:#fff;display:flex;align-items:center;padding:8px 16px;border-radius:4px;margin-bottom:16px;gap:8px;font-size:12px;min-height:16px;opacity:1;transform:rotate(0)}.digit-boss-banner ::ng-deep .toggle-background{margin-top:0!important;padding:0!important;background-color:transparent!important;border:none!important}.digit-boss-banner ::ng-deep .toggle_switch{margin-top:0!important;gap:0!important}.digit-boss-text{display:flex;align-items:center;gap:4px;white-space:nowrap}.highlight{color:#fb0;font-weight:700}.arrow-icon{color:#fb0;margin-left:4px;font-size:14px}\n"], dependencies: [{ kind: "component", type: ToggleComponent, selector: "lib-toggle", inputs: ["field", "reactiveFormControlobject"], outputs: ["change"] }, { kind: "component", type: SelectTextboxComponent, selector: "lib-select-textbox", inputs: ["field", "reactiveFormControlobject"], outputs: ["selectionChange"] }, { kind: "component", type: ButtonComponent, selector: "lib-button", inputs: ["field"] }, { kind: "component", type: IconButtonComponent, selector: "lib-icon-button", inputs: ["field"] }, { kind: "component", type: RadioComponent, selector: "lib-radio", inputs: ["reactiveFormControlobject", "field"], outputs: ["change"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
|
|
7387
7387
|
}
|
|
7388
7388
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AnnuityPremiumCalculatorComponent, decorators: [{
|
|
7389
7389
|
type: Component,
|
|
@@ -7395,7 +7395,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
7395
7395
|
RadioComponent,
|
|
7396
7396
|
CommonModule,
|
|
7397
7397
|
FormsModule
|
|
7398
|
-
], template: "<div class=\"card px-3\" style=\"padding: 16px;\">\n <div class=\"row\">\n <h4 class=\"card-main-title\"><span style=\"margin-right: 12px;\"><img\n src=\"https://cdn.godigit.com/retail-life/calculator.svg\" alt=\"annuity calculator\"></span>Here's your Premium\n to Annuity Calculator</h4>\n </div>\n <!-- <div class=\"row\"> -->\n <div class=\"card pb-4 px-4\" style=\"border-bottom-left-radius: 0px; border-bottom-right-radius: 0px;\">\n <!-- <div class=\"custom-grid-template\">\n\n </div> -->\n\n <div class=\"row mx-auto\" style=\"transform: translate(0px, -58%);\">\n <lib-toggle class=\"col-auto\" [field]=\"annuityPremiumToggleObj\" />\n </div>\n <!-- </div> -->\n <div class=\" col-12\" style=\"\n justify-content: center;\n flex-direction: row;\n display: flex;\n\">\n <div class=\"col-5 col-lg-5 d-flex flex-column p-0\">\n <lib-select-textbox [field]=\"annuityPremiumObj\" [(ngModel)]=\"annuityPremium\"\n (ngModelChange)=\"onAnnuityPremiumValueChange($event)\" />\n <div class=\"error-message\" *ngIf=\"validations.ispremiumEntry\">\n Enter Premium\n </div>\n <div>\n <lib-toggle [field]=\"enableAutoDebitObj\" [(ngModel)]=\"isEnableAutoDebit\"\n (ngModelChange)=\"onEnableAutoDebitValueChange($event)\" />\n </div>\n </div>\n <div class=\"col-2 col-lg-2 d-flex justify-content-center align-items-center\"\n style=\"display: flex; align-items: flex-end; transform: translate(0px, 6px); position: relative;\">\n <!-- Vertical center line split around icon -->\n <div\n style=\"position: absolute; left: 50%; transform: translateX(-50%); width: 1px;height: calc(50% - 16px); top: 0; background: rgba(221, 221, 221, 1)\">\n </div>\n <lib-icon-button [field]=\"interchangeButtonObj\" />\n <div\n style=\"position: absolute; left: 50%; transform: translateX(-50%); width: 1px; height: calc(50% - 16px); bottom: 0; background: rgba(221, 221, 221, 1)\">\n </div>\n </div>\n <div class=\"col-5 col-lg-5 d-flex flex-column p-0\">\n <lib-select-textbox [field]=\"minimumAnnuityPayoutObj\" [(ngModel)]=\"minumumAnnuityPayout\"\n (ngModelChange)=\"onMinPremiumValueChange($event)\" />\n <div class=\"minium-annuity mt-3\" *ngIf=\"guranteedannuityObj['isVisible']\">\n <div class=\"annuity-msg w-100 px-2 py-1\">\n Value based on assumed 10% annual growth of Nifty 50 index.\n </div>\n <div class=\"w-100 px-2 py-1\">\n <lib-radio [field]=\"guranteedannuityObj\" [(ngModel)]=\"selectedGuranteedAnnuity\"\n (ngModelChange)=\"onGuranteedAnnuityChange($event)\" />\n </div>\n <div class=\"annuity-msg-1 d-flex align-items-center flex-nowrap w-100 px-2 py-1\">\n <img src=\"https://cdn.godigit.com/digitPlusAssets/streamline_graph-arrow-increase-remix.png\"\n style=\"max-width: 24px;\" />\n <span>Potential for higher returns by lowering the minimum guaranteed annuity rate.</span>\n </div>\n </div>\n\n </div>\n </div>\n <!-- <div class=\"vertical-line\"></div> -->\n <!-- <div class=\"custom-grid-template\">\n <div>\n <lib-toggle [field]=\"enableAutoDebitObj\" [(ngModel)]=\"isEnableAutoDebit\"\n (ngModelChange)=\"onEnableAutoDebitValueChange($event)\" />\n </div>\n </div> -->\n\n </div>\n\n\n <div class=\"card py-3 mb-4 border-top-0\" style=\"border-top-left-radius: 0px; border-top-right-radius: 0px;\">\n <div class=\"mx-4\">\n <div class=\"digit-boss-banner\" *ngIf=\"digitBossSwitch?.isVisible\">\n <lib-toggle [field]=\"digitBossToggleConfig\" [ngModel]=\"this.digitBossSwitch?.isSwitchOn\" (ngModelChange)=\"onDigitBossSwitchChange($event)\" (change)=\"onDigitBossSwitchChange($event)\"></lib-toggle>\n <div class=\"digit-boss-text\">\n {{this.digitBossSwitch?.prefixText}}\n <span class=\"highlight\">{{this.digitBossSwitch?.highlightText}}</span>\n {{this.digitBossSwitch?.subText}}\n <span class=\"arrow-icon\">\u2197</span>\n </div>\n </div>\n <lib-button [field]=\"recalculateButton\" (click)=\"calculateButtonClicked()\" />\n <div class=\"card mb-0 mt-2\"\n style=\"align-items: center;border:none;font-size: 8px;font-weight: 400;color:rgba(68, 68, 68, 1) \">\n <div class=\"mx-4\"><img src=\"https://cdn.godigit.com/digitPlusAssets/Group+1010106336.png\"\n style=\"margin-left: 3px;\" />\n <span style=\"margin-left: 6px;\">Every time you make a change above, please click recalculate.</span>\n </div>\n </div>\n </div>\n <div\n style=\"display: flex;align-items: center;justify-content: center;border:none;font-size: 10px;font-weight: 700;height:32px;background-color: rgba(255, 250, 235, 1);gap: 8px;margin: 4px;\"\n *ngIf=\"annuityTableCalculator?.isVisible\">\n <img src=\"https://cdn.godigit.com/retail-life/calculator.svg\" />\n Minimum Guaranteed Payout(A) + Variable Payout(B) = Total Payout(C)\n </div>\n <!-- annuity calculator table -->\n <div class=\"annuity-tables-main-container\" *ngIf=\"annuityTableCalculator?.isVisible\">\n <div class=\"d-flex flex-row annuity-tables-container\">\n <!-- Table 1 -->\n <div class=\"annuity-calculator-table1\">\n <div class=\"table-header annuitytable1-header\">Minimum Guaranteed Annuity Payout(A)</div>\n <div class=\"table-body\">\n <div class=\"table-cell\"><span class=\"rupee-icon\">\u20B9</span><span\n style=\"font-size:12px; color: rgba(68, 68, 68, 1);\">\n <{{annuityTableCalculator.annuitycalculatorTable1val1}}>\n </span></div>\n <button class=\"annuitytable-button\">{{annuityTableCalculator.annuitycalculatorTable1val2}}</button>\n </div>\n </div>\n\n <div class=\"operator-symbol\">+</div>\n\n <!-- Table 2 -->\n <div class=\"annuity-calculator-table2\">\n <div class=\"table-header annuitytable1-header\">Assume growth of BenchMark index</div>\n <div class=\"table-body\">\n <div class=\"table-row\">@{{annuityTableCalculator.annuitycalculatorTable2val1}}</div>\n <div class=\"table-row\">@{{annuityTableCalculator.annuitycalculatorTable2val2}}</div>\n <div class=\"table-row\">@{{annuityTableCalculator.annuitycalculatorTable2val3}}</div>\n </div>\n </div>\n\n <!-- Table 3 -->\n <div class=\"annuity-calculator-table3\">\n <div class=\"table-header annuitytable1-header\">1st Variable Annuity Payout(B)</div>\n <div class=\"table-body\">\n <div class=\"table-row\"><span\n class=\"rupee-icon\">\u20B9</span>{{annuityTableCalculator.annuitycalculatorTable3val1}}</div>\n <div class=\"table-row\"><span\n class=\"rupee-icon\">\u20B9</span>{{annuityTableCalculator.annuitycalculatorTable3val2}}</div>\n <div class=\"table-row\"><span\n class=\"rupee-icon\">\u20B9</span>{{annuityTableCalculator.annuitycalculatorTable3val3}}</div>\n </div>\n </div>\n\n <div class=\"operator-symbol\">=</div>\n\n <!-- Table 4 -->\n <div class=\"annuity-calculator-table4\">\n <div class=\"table-header annuitytable4-header\">1st TotalPayout/Frequency(C)</div>\n <div class=\"table-body\">\n <div class=\"table-row annuitytable4-bg\"><span\n class=\"rupee-icon\">\u20B9</span>{{annuityTableCalculator.annuitycalculatorTable4val1}}</div>\n <div class=\"table-row annuitytable4-bg\"><span\n class=\"rupee-icon\">\u20B9</span>{{annuityTableCalculator.annuitycalculatorTable4val2}}</div>\n <div class=\"table-row annuitytable4-bg\"><span\n class=\"rupee-icon\">\u20B9</span>{{annuityTableCalculator.annuitycalculatorTable4val3}}</div>\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"annuity-calculator-paragraph\" *ngIf=\"annuityTableCalculator?.isVisible\">\n <span class=\"annuity-calculator-paragraph1\">This is an assumed growth percentage for the index basis which the\n values in columns B and C are calculated.</span> Actual growth will depend on index performance and may affect\n your variable annuity payout and total annuity payout.\n </div>\n\n <div *ngIf=\"generateSummaryObj.isVisible\">\n <lib-button [field]=\"generateSummaryObj\" (click)=\"generateSummaryClicked()\" />\n </div>\n </div>\n", styles: [".card-main-title{font-size:16px;font-family:Mulish!important;letter-spacing:0px!important;font-weight:800;line-height:24px;padding-bottom:16px}.col-5-5{flex:0 0 auto;max-width:44.16666667%}.custom-grid-template{display:grid;grid-template-columns:4fr .5fr 4fr;align-items:end}.vertical-line{border-left:2px solid #ccc;height:100px;margin:0 10px}.error-message{font-size:12px;font-weight:500;color:#e00;letter-spacing:0px}.annuity-msg{padding:4px 6px;margin-top:8px;font-size:10px;font-weight:400;color:#444;background-color:#e5f0fa;height:fit-content}.annuity-msg-1{padding:4px 6px;margin-top:8px;font-size:10px;font-weight:400;color:#444;background-color:#e6f7f3;height:fit-content;flex-wrap:nowrap!important}.annuity-tables-main-container{border:2px solid rgba(221,221,221,1);border-radius:8px;display:flex}.annuity-tables-container{display:flex;align-items:stretch;gap:0;width:100%}.annuity-calculator-table1,.annuity-calculator-table2,.annuity-calculator-table3,.annuity-calculator-table4{display:flex;flex-direction:column;height:100%;flex:1;color:#444;font-weight:400;font-size:10px}.annuity-calculator-table1{border-right:1px solid rgba(221,221,221,1)}.annuity-calculator-table2{border-left:1px solid rgba(221,221,221,1);border-right:1px solid rgba(221,221,221,1)}.annuity-calculator-table3{border-right:1px solid rgba(221,221,221,1)}.annuity-calculator-table4{border-left:1px solid rgba(221,221,221,1)}.table-header{padding:12px;font-size:10px;font-weight:700;text-align:center;border-bottom:1px solid rgba(221,221,221,1);height:60px;display:flex;align-items:center;justify-content:center;word-wrap:break-word;word-break:break-word;hyphens:auto}.annuitytable1-header{background-color:#ececec;color:#444}.annuitytable4-header{background-color:#fb03;color:#444}.table-body{display:flex;flex-direction:column;flex:1}.table-cell{padding:12px;text-align:center;font-size:16px;font-weight:600;flex:1;display:flex;flex-direction:row;justify-content:center;align-items:center;gap:4px}.table-row{padding:12px;text-align:center;font-size:14px;font-weight:500;background-color:#fff;border-bottom:1px solid #999;flex:1;display:flex;align-items:center;justify-content:center}.table-row:last-child{border-bottom:none}.annuitytable4-bg{background-color:#e6f7f3!important;color:#444}.annuitytable-button{background-color:#ececec;border:none;border-radius:4px;padding:2px 8px;font-size:10px;font-weight:700;cursor:pointer;margin-top:0;width:auto;min-width:30%;max-width:90%;height:24px;display:block;margin-left:auto;margin-right:auto;position:relative;bottom:40px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.rupee-icon{font-weight:700;margin-right:2px;font-size:12px;color:#444}.operator-symbol{display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:700;padding:0 16px;color:#f90}.annuity-calculator-paragraph{padding:16px 8px 4px;font-size:10px;margin:0 0 20px auto;width:73%;font-weight:400;color:#444;background-color:#ebf1ff}.annuity-calculator-paragraph1{font-weight:700;font-size:10px}.minium-annuity{display:flex;flex-direction:column}@media (max-width: 991px) and (min-width: 768px){.table-header{padding:8px 4px;font-size:9px;line-height:1.1}}@media (max-width: 767px) and (min-width: 576px){.table-header{padding:10px 6px;font-size:9px}}@media (max-width: 575px){.table-header{padding:8px 4px;font-size:8px}}@media (max-width: 575px){.annuity-msg{font-size:10px;line-height:1;height:fit-content}}@media (max-width: 575px){.annuity-msg-1{font-size:10px;line-height:1;flex-wrap:nowrap!important;height:fit-content}.annuity-msg-1 .img{width:4px;height:4px}}@media (max-width: 991px) and (min-width: 768px){.annuity-msg,.annuity-msg-1{font-size:9px;line-height:1.1;height:fit-content}}@media (max-width: 767px) and (min-width: 576px){.annuity-msg,.annuity-msg-1{font-size:10px;line-height:1.1;height:fit-content}}.digit-boss-banner{background-color:#333;color:#fff;display:flex;align-items:center;padding:8px 16px;border-radius:4px;margin-bottom:16px;gap:8px;font-size:12px;min-height:16px;opacity:1;transform:rotate(0)}.digit-boss-banner ::ng-deep .toggle-background{margin-top:0!important;padding:0!important;background-color:transparent!important;border:none!important}.digit-boss-banner ::ng-deep .toggle_switch{margin-top:0!important;gap:0!important}.digit-boss-text{display:flex;align-items:center;gap:4px;white-space:nowrap}.highlight{color:#fb0;font-weight:700}.arrow-icon{color:#fb0;margin-left:4px;font-size:14px}\n"] }]
|
|
7398
|
+
], template: "<div class=\"card px-3\" style=\"padding: 16px;\">\n <div class=\"row\">\n <h4 class=\"card-main-title\"><span style=\"margin-right: 12px;\"><img\n src=\"https://cdn.godigit.com/retail-life/calculator.svg\" alt=\"annuity calculator\"></span>Here's your Premium\n to Annuity Calculator</h4>\n </div>\n <!-- <div class=\"row\"> -->\n <div class=\"card pb-4 px-4\" style=\"border-bottom-left-radius: 0px; border-bottom-right-radius: 0px;\">\n <!-- <div class=\"custom-grid-template\">\n\n </div> -->\n\n <div class=\"row mx-auto\" style=\"transform: translate(0px, -58%);\">\n <lib-toggle class=\"col-auto\" [field]=\"annuityPremiumToggleObj\" />\n </div>\n <!-- </div> -->\n <div class=\" col-12\" style=\"\n justify-content: center;\n flex-direction: row;\n display: flex;\n\">\n <div class=\"col-5 col-lg-5 d-flex flex-column p-0\">\n <lib-select-textbox [field]=\"annuityPremiumObj\" [(ngModel)]=\"annuityPremium\"\n (ngModelChange)=\"onAnnuityPremiumValueChange($event)\" />\n <div class=\"error-message\" *ngIf=\"validations.ispremiumEntry\">\n Enter Premium\n </div>\n <div>\n <lib-toggle [field]=\"enableAutoDebitObj\" [(ngModel)]=\"isEnableAutoDebit\"\n (ngModelChange)=\"onEnableAutoDebitValueChange($event)\" />\n </div>\n </div>\n <div class=\"col-2 col-lg-2 d-flex justify-content-center align-items-center\"\n style=\"display: flex; align-items: flex-end; transform: translate(0px, 6px); position: relative;\">\n <!-- Vertical center line split around icon -->\n <div\n style=\"position: absolute; left: 50%; transform: translateX(-50%); width: 1px;height: calc(50% - 16px); top: 0; background: rgba(221, 221, 221, 1)\">\n </div>\n <lib-icon-button [field]=\"interchangeButtonObj\" />\n <div\n style=\"position: absolute; left: 50%; transform: translateX(-50%); width: 1px; height: calc(50% - 16px); bottom: 0; background: rgba(221, 221, 221, 1)\">\n </div>\n </div>\n <div class=\"col-5 col-lg-5 d-flex flex-column p-0\">\n <lib-select-textbox [field]=\"minimumAnnuityPayoutObj\" [(ngModel)]=\"minumumAnnuityPayout\"\n (ngModelChange)=\"onMinPremiumValueChange($event)\" />\n <div class=\"minium-annuity mt-3\" *ngIf=\"guranteedannuityObj['isVisible']\">\n <div class=\"annuity-msg w-100 px-2 py-1\">\n Value based on assumed 10% annual growth of Nifty 50 index.\n </div>\n <div class=\"w-100 px-2 py-1\">\n <lib-radio [field]=\"guranteedannuityObj\" [(ngModel)]=\"selectedGuranteedAnnuity\"\n (ngModelChange)=\"onGuranteedAnnuityChange($event)\" />\n </div>\n <div class=\"annuity-msg-1 d-flex align-items-center flex-nowrap w-100 px-2 py-1\">\n <img src=\"https://cdn.godigit.com/digitPlusAssets/streamline_graph-arrow-increase-remix.png\"\n style=\"max-width: 24px;\" />\n <span>Potential for higher returns by lowering the minimum guaranteed annuity rate.</span>\n </div>\n </div>\n\n </div>\n </div>\n <!-- <div class=\"vertical-line\"></div> -->\n <!-- <div class=\"custom-grid-template\">\n <div>\n <lib-toggle [field]=\"enableAutoDebitObj\" [(ngModel)]=\"isEnableAutoDebit\"\n (ngModelChange)=\"onEnableAutoDebitValueChange($event)\" />\n </div>\n </div> -->\n\n </div>\n\n\n <div class=\"card py-3 mb-4 border-top-0\" style=\"border-top-left-radius: 0px; border-top-right-radius: 0px;\">\n <div class=\"mx-4\">\n <div class=\"digit-boss-banner\" *ngIf=\"digitBossSwitch?.isVisible\">\n <lib-toggle [field]=\"digitBossToggleConfig\" [(ngModel)]=\"this.digitBossSwitch.isSwitchOn\" (ngModelChange)=\"onDigitBossSwitchChange($event)\"></lib-toggle>\n <div class=\"digit-boss-text\">\n {{this.digitBossSwitch?.prefixText}}\n <span class=\"highlight\">{{this.digitBossSwitch?.highlightText}}</span>\n {{this.digitBossSwitch?.subText}}\n <span class=\"arrow-icon\">\u2197</span>\n </div>\n </div>\n <lib-button [field]=\"recalculateButton\" (click)=\"calculateButtonClicked()\" />\n <div class=\"card mb-0 mt-2\"\n style=\"align-items: center;border:none;font-size: 8px;font-weight: 400;color:rgba(68, 68, 68, 1) \">\n <div class=\"mx-4\"><img src=\"https://cdn.godigit.com/digitPlusAssets/Group+1010106336.png\"\n style=\"margin-left: 3px;\" />\n <span style=\"margin-left: 6px;\">Every time you make a change above, please click recalculate.</span>\n </div>\n </div>\n </div>\n <div\n style=\"display: flex;align-items: center;justify-content: center;border:none;font-size: 10px;font-weight: 700;height:32px;background-color: rgba(255, 250, 235, 1);gap: 8px;margin: 4px;\"\n *ngIf=\"annuityTableCalculator?.isVisible\">\n <img src=\"https://cdn.godigit.com/retail-life/calculator.svg\" />\n Minimum Guaranteed Payout(A) + Variable Payout(B) = Total Payout(C)\n </div>\n <!-- annuity calculator table -->\n <div class=\"annuity-tables-main-container\" *ngIf=\"annuityTableCalculator?.isVisible\">\n <div class=\"d-flex flex-row annuity-tables-container\">\n <!-- Table 1 -->\n <div class=\"annuity-calculator-table1\">\n <div class=\"table-header annuitytable1-header\">Minimum Guaranteed Annuity Payout(A)</div>\n <div class=\"table-body\">\n <div class=\"table-cell\"><span class=\"rupee-icon\">\u20B9</span><span\n style=\"font-size:12px; color: rgba(68, 68, 68, 1);\">\n <{{annuityTableCalculator.annuitycalculatorTable1val1}}>\n </span></div>\n <button class=\"annuitytable-button\">{{annuityTableCalculator.annuitycalculatorTable1val2}}</button>\n </div>\n </div>\n\n <div class=\"operator-symbol\">+</div>\n\n <!-- Table 2 -->\n <div class=\"annuity-calculator-table2\">\n <div class=\"table-header annuitytable1-header\">Assume growth of BenchMark index</div>\n <div class=\"table-body\">\n <div class=\"table-row\">@{{annuityTableCalculator.annuitycalculatorTable2val1}}</div>\n <div class=\"table-row\">@{{annuityTableCalculator.annuitycalculatorTable2val2}}</div>\n <div class=\"table-row\">@{{annuityTableCalculator.annuitycalculatorTable2val3}}</div>\n </div>\n </div>\n\n <!-- Table 3 -->\n <div class=\"annuity-calculator-table3\">\n <div class=\"table-header annuitytable1-header\">1st Variable Annuity Payout(B)</div>\n <div class=\"table-body\">\n <div class=\"table-row\"><span\n class=\"rupee-icon\">\u20B9</span>{{annuityTableCalculator.annuitycalculatorTable3val1}}</div>\n <div class=\"table-row\"><span\n class=\"rupee-icon\">\u20B9</span>{{annuityTableCalculator.annuitycalculatorTable3val2}}</div>\n <div class=\"table-row\"><span\n class=\"rupee-icon\">\u20B9</span>{{annuityTableCalculator.annuitycalculatorTable3val3}}</div>\n </div>\n </div>\n\n <div class=\"operator-symbol\">=</div>\n\n <!-- Table 4 -->\n <div class=\"annuity-calculator-table4\">\n <div class=\"table-header annuitytable4-header\">1st TotalPayout/Frequency(C)</div>\n <div class=\"table-body\">\n <div class=\"table-row annuitytable4-bg\"><span\n class=\"rupee-icon\">\u20B9</span>{{annuityTableCalculator.annuitycalculatorTable4val1}}</div>\n <div class=\"table-row annuitytable4-bg\"><span\n class=\"rupee-icon\">\u20B9</span>{{annuityTableCalculator.annuitycalculatorTable4val2}}</div>\n <div class=\"table-row annuitytable4-bg\"><span\n class=\"rupee-icon\">\u20B9</span>{{annuityTableCalculator.annuitycalculatorTable4val3}}</div>\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"annuity-calculator-paragraph\" *ngIf=\"annuityTableCalculator?.isVisible\">\n <span class=\"annuity-calculator-paragraph1\">This is an assumed growth percentage for the index basis which the\n values in columns B and C are calculated.</span> Actual growth will depend on index performance and may affect\n your variable annuity payout and total annuity payout.\n </div>\n\n <div *ngIf=\"generateSummaryObj.isVisible\">\n <lib-button [field]=\"generateSummaryObj\" (click)=\"generateSummaryClicked()\" />\n </div>\n </div>\n", styles: [".card-main-title{font-size:16px;font-family:Mulish!important;letter-spacing:0px!important;font-weight:800;line-height:24px;padding-bottom:16px}.col-5-5{flex:0 0 auto;max-width:44.16666667%}.custom-grid-template{display:grid;grid-template-columns:4fr .5fr 4fr;align-items:end}.vertical-line{border-left:2px solid #ccc;height:100px;margin:0 10px}.error-message{font-size:12px;font-weight:500;color:#e00;letter-spacing:0px}.annuity-msg{padding:4px 6px;margin-top:8px;font-size:10px;font-weight:400;color:#444;background-color:#e5f0fa;height:fit-content}.annuity-msg-1{padding:4px 6px;margin-top:8px;font-size:10px;font-weight:400;color:#444;background-color:#e6f7f3;height:fit-content;flex-wrap:nowrap!important}.annuity-tables-main-container{border:2px solid rgba(221,221,221,1);border-radius:8px;display:flex}.annuity-tables-container{display:flex;align-items:stretch;gap:0;width:100%}.annuity-calculator-table1,.annuity-calculator-table2,.annuity-calculator-table3,.annuity-calculator-table4{display:flex;flex-direction:column;height:100%;flex:1;color:#444;font-weight:400;font-size:10px}.annuity-calculator-table1{border-right:1px solid rgba(221,221,221,1)}.annuity-calculator-table2{border-left:1px solid rgba(221,221,221,1);border-right:1px solid rgba(221,221,221,1)}.annuity-calculator-table3{border-right:1px solid rgba(221,221,221,1)}.annuity-calculator-table4{border-left:1px solid rgba(221,221,221,1)}.table-header{padding:12px;font-size:10px;font-weight:700;text-align:center;border-bottom:1px solid rgba(221,221,221,1);height:60px;display:flex;align-items:center;justify-content:center;word-wrap:break-word;word-break:break-word;hyphens:auto}.annuitytable1-header{background-color:#ececec;color:#444}.annuitytable4-header{background-color:#fb03;color:#444}.table-body{display:flex;flex-direction:column;flex:1}.table-cell{padding:12px;text-align:center;font-size:16px;font-weight:600;flex:1;display:flex;flex-direction:row;justify-content:center;align-items:center;gap:4px}.table-row{padding:12px;text-align:center;font-size:14px;font-weight:500;background-color:#fff;border-bottom:1px solid #999;flex:1;display:flex;align-items:center;justify-content:center}.table-row:last-child{border-bottom:none}.annuitytable4-bg{background-color:#e6f7f3!important;color:#444}.annuitytable-button{background-color:#ececec;border:none;border-radius:4px;padding:2px 8px;font-size:10px;font-weight:700;cursor:pointer;margin-top:0;width:auto;min-width:30%;max-width:90%;height:24px;display:block;margin-left:auto;margin-right:auto;position:relative;bottom:40px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.rupee-icon{font-weight:700;margin-right:2px;font-size:12px;color:#444}.operator-symbol{display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:700;padding:0 16px;color:#f90}.annuity-calculator-paragraph{padding:16px 8px 4px;font-size:10px;margin:0 0 20px auto;width:73%;font-weight:400;color:#444;background-color:#ebf1ff}.annuity-calculator-paragraph1{font-weight:700;font-size:10px}.minium-annuity{display:flex;flex-direction:column}@media (max-width: 991px) and (min-width: 768px){.table-header{padding:8px 4px;font-size:9px;line-height:1.1}}@media (max-width: 767px) and (min-width: 576px){.table-header{padding:10px 6px;font-size:9px}}@media (max-width: 575px){.table-header{padding:8px 4px;font-size:8px}}@media (max-width: 575px){.annuity-msg{font-size:10px;line-height:1;height:fit-content}}@media (max-width: 575px){.annuity-msg-1{font-size:10px;line-height:1;flex-wrap:nowrap!important;height:fit-content}.annuity-msg-1 .img{width:4px;height:4px}}@media (max-width: 991px) and (min-width: 768px){.annuity-msg,.annuity-msg-1{font-size:9px;line-height:1.1;height:fit-content}}@media (max-width: 767px) and (min-width: 576px){.annuity-msg,.annuity-msg-1{font-size:10px;line-height:1.1;height:fit-content}}.digit-boss-banner{background-color:#333;color:#fff;display:flex;align-items:center;padding:8px 16px;border-radius:4px;margin-bottom:16px;gap:8px;font-size:12px;min-height:16px;opacity:1;transform:rotate(0)}.digit-boss-banner ::ng-deep .toggle-background{margin-top:0!important;padding:0!important;background-color:transparent!important;border:none!important}.digit-boss-banner ::ng-deep .toggle_switch{margin-top:0!important;gap:0!important}.digit-boss-text{display:flex;align-items:center;gap:4px;white-space:nowrap}.highlight{color:#fb0;font-weight:700}.arrow-icon{color:#fb0;margin-left:4px;font-size:14px}\n"] }]
|
|
7399
7399
|
}], ctorParameters: () => [{ type: MasterControlService }], propDecorators: { onCalcualteButtonClick: [{
|
|
7400
7400
|
type: Output
|
|
7401
7401
|
}], onGenerateSummaryClick: [{
|