master-control 0.5.8 → 0.5.9
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.
- package/esm2022/lib/annuity-calculator-radio/annuity-calculator-radio.component.mjs +3 -3
- package/esm2022/lib/annuity-premium-calculator/annuity-premium-calculator.component.mjs +3 -3
- package/esm2022/lib/pay-get-card/pay-get-card.component.mjs +3 -3
- package/fesm2022/master-control.mjs +6 -6
- package/fesm2022/master-control.mjs.map +1 -1
- package/master-control-0.5.09.tgz +0 -0
- package/package.json +1 -1
- package/master-control-0.5.08.tgz +0 -0
|
@@ -16,11 +16,11 @@ export class PayGetCardComponent {
|
|
|
16
16
|
{ amount: '₹72,000', percentage: 'Total @', frequency: '', variable: '' }
|
|
17
17
|
];
|
|
18
18
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PayGetCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
19
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: PayGetCardComponent, isStandalone: true, selector: "lib-pay-get-card", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, payAmount: { classPropertyName: "payAmount", publicName: "payAmount", isSignal: false, isRequired: false, transformFunction: null }, premiumAmount: { classPropertyName: "premiumAmount", publicName: "premiumAmount", isSignal: false, isRequired: false, transformFunction: null }, ptValue: { classPropertyName: "ptValue", publicName: "ptValue", isSignal: false, isRequired: false, transformFunction: null }, years: { classPropertyName: "years", publicName: "years", isSignal: false, isRequired: false, transformFunction: null }, frequency: { classPropertyName: "frequency", publicName: "frequency", isSignal: false, isRequired: false, transformFunction: null }, payamountOptions: { classPropertyName: "payamountOptions", publicName: "payamountOptions", isSignal: false, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n class=\"d-flex justify-content-between pay-card\"\n [ngStyle]=\"{\n'--pay-card-border-color': field()?.controlStyle?.borderColor ,\n'--pay-card-border-width': field()?.controlStyle?.borderWidth ,\n'--pay-card-border-radius': field()?.controlStyle?.borderRadius ,\n'--pay-card-bg-color': field()?.controlStyle?.background ,\n'--pay-card-width': field()?.controlStyle?.width ,\n }\"\n *ngIf=\"field() && field()?.isVisible\"\n>\n <div class=\"pay-left text-center mx-2 d-flex flex-column align-items-center justify-content-center\">\n <span class=\"bold-label\">{{ field()?.placeHolder || 'Pay' }}</span>\n <div class=\"d-flex align-items-center justify-content-center\">\n <span class=\"grey-label\">{{payAmount}}</span>\n <span [appTooltipTemplate]=\"currentTooltip\" arrowPosition=\"left\" tooltipPosition=\"bottom\"\n *ngIf=\"field().configData?.infoimageUrl && field().configData?.tooltipText\">\n <img [src]=\"field().configData?.infoimageUrl\" class=\"toggle-benefit-img mx-1\" />\n </span>\n <ng-template #currentTooltip>\n <span [innerHTML]=\"field().configData?.tooltipText\"></span>\n </ng-template>\n </div>\n <span class=\"left-right-label\" *ngIf=\"field()?.configData?.leftSubText\">{{field()?.configData?.leftSubText}}</span>\n </div>\n <div class=\"premium-card d-flex align-items-center justify-content-around\">\n <ng-container *ngFor=\"let option of payamountOptions; let i = index; let isLast = last\">\n <div class=\"value-card text-center\" *ngIf=\"field()?.configData?.isShowContent\">\n <span class=\"showcontent-amount\">{{option.amount}}/ <span class=\"showcontent-frequency\">{{option.frequency}}</span></span>\n <div class=\"grey-button\">{{option.percentage}} {{option.variable}}</div>\n </div>\n\n <ng-container *ngIf=\"field()?.configData?.isShowContent && !isLast\">\n <span *ngIf=\"i !== payamountOptions.length - 2\" class=\"separator-icon\">+</span>\n <span *ngIf=\"i === payamountOptions.length - 2\" class=\"separator-icon\">=</span>\n </ng-container>\n </ng-container>\n\n <div class=\"d-flex flex-column text-center\" *ngIf=\"field()?.configData?.isShowLastPart\">\n <span class=\"light-label\"><b class=\"bold-label\">{{premiumAmount}}</b>/ {{frequency}}</span>\n <span class=\"grey-label\" *ngIf=\"field()?.configData?.isShowpayout\">for {{ptValue}} years (till {{years}})</span>\n <span class=\"right-left-label\" *ngIf=\"field()?.configData?.isShowRightTextValue\">{{field()?.configData?.isShowRightTextValue}}</span>\n <span class=\"left-right-label\" *ngIf=\"field()?.configData?.rightSubText\">{{field()?.configData?.rightSubText}}</span>\n </div>\n </div>\n</div>\n<div class=\"pay-get-card-digit-boss-banner\" *ngIf=\"field() && field()?.isVisible && field()?.configData?.digitBossText\">\n <span class=\"pay-get-card-digit-boss-text\">{{field()?.configData?.digitBossText}}</span>\n</div>\n", styles: [".pay-card{max-width:var(--pay-card-width, 100%)!important;width:100%;min-height:65px;border:1px solid #f5f5f5;border-radius:var(--pay-card-border-radius, 8px)!important;background-color:var(--pay-card-bg-color, #f5f5f5)!important;padding:6px 8px;border-color:var(--pay-card-border-color, #f5f5f5)!important;border-width:var(--pay-card-border-width, none)!important;box-sizing:border-box;gap:8px;align-items:stretch}.pay-left{flex:0 0 30%;max-width:30%;min-width:0
|
|
19
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: PayGetCardComponent, isStandalone: true, selector: "lib-pay-get-card", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, payAmount: { classPropertyName: "payAmount", publicName: "payAmount", isSignal: false, isRequired: false, transformFunction: null }, premiumAmount: { classPropertyName: "premiumAmount", publicName: "premiumAmount", isSignal: false, isRequired: false, transformFunction: null }, ptValue: { classPropertyName: "ptValue", publicName: "ptValue", isSignal: false, isRequired: false, transformFunction: null }, years: { classPropertyName: "years", publicName: "years", isSignal: false, isRequired: false, transformFunction: null }, frequency: { classPropertyName: "frequency", publicName: "frequency", isSignal: false, isRequired: false, transformFunction: null }, payamountOptions: { classPropertyName: "payamountOptions", publicName: "payamountOptions", isSignal: false, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n class=\"d-flex justify-content-between pay-card\"\n [ngStyle]=\"{\n'--pay-card-border-color': field()?.controlStyle?.borderColor ,\n'--pay-card-border-width': field()?.controlStyle?.borderWidth ,\n'--pay-card-border-radius': field()?.controlStyle?.borderRadius ,\n'--pay-card-bg-color': field()?.controlStyle?.background ,\n'--pay-card-width': field()?.controlStyle?.width ,\n }\"\n *ngIf=\"field() && field()?.isVisible\"\n>\n <div class=\"pay-left text-center mx-2 d-flex flex-column align-items-center justify-content-center\">\n <span class=\"bold-label\">{{ field()?.placeHolder || 'Pay' }}</span>\n <div class=\"d-flex align-items-center justify-content-center\">\n <span class=\"grey-label\">{{payAmount}}</span>\n <span [appTooltipTemplate]=\"currentTooltip\" arrowPosition=\"left\" tooltipPosition=\"bottom\"\n *ngIf=\"field().configData?.infoimageUrl && field().configData?.tooltipText\">\n <img [src]=\"field().configData?.infoimageUrl\" class=\"toggle-benefit-img mx-1\" />\n </span>\n <ng-template #currentTooltip>\n <span [innerHTML]=\"field().configData?.tooltipText\"></span>\n </ng-template>\n </div>\n <span class=\"left-right-label\" *ngIf=\"field()?.configData?.leftSubText\">{{field()?.configData?.leftSubText}}</span>\n </div>\n <div class=\"premium-card d-flex align-items-center justify-content-around\">\n <ng-container *ngFor=\"let option of payamountOptions; let i = index; let isLast = last\">\n <div class=\"value-card text-center\" *ngIf=\"field()?.configData?.isShowContent\">\n <span class=\"showcontent-amount\">{{option.amount}}/ <span class=\"showcontent-frequency\">{{option.frequency}}</span></span>\n <div class=\"grey-button\">{{option.percentage}} {{option.variable}}</div>\n </div>\n\n <ng-container *ngIf=\"field()?.configData?.isShowContent && !isLast\">\n <span *ngIf=\"i !== payamountOptions.length - 2\" class=\"separator-icon\">+</span>\n <span *ngIf=\"i === payamountOptions.length - 2\" class=\"separator-icon\">=</span>\n </ng-container>\n </ng-container>\n\n <div class=\"d-flex flex-column text-center\" *ngIf=\"field()?.configData?.isShowLastPart\">\n <span class=\"light-label\"><b class=\"bold-label\">{{premiumAmount}}</b>/ {{frequency}}</span>\n <span class=\"grey-label\" *ngIf=\"field()?.configData?.isShowpayout\">for {{ptValue}} years (till {{years}})</span>\n <span class=\"right-left-label\" *ngIf=\"field()?.configData?.isShowRightTextValue\">{{field()?.configData?.isShowRightTextValue}}</span>\n <span class=\"left-right-label\" *ngIf=\"field()?.configData?.rightSubText\">{{field()?.configData?.rightSubText}}</span>\n </div>\n </div>\n</div>\n<div class=\"pay-get-card-digit-boss-banner\" *ngIf=\"field() && field()?.isVisible && field()?.configData?.digitBossText\">\n <span class=\"pay-get-card-digit-boss-text\">{{field()?.configData?.digitBossText}}</span>\n</div>\n", styles: [".pay-card{max-width:var(--pay-card-width, 100%)!important;width:100%;min-height:65px;border:1px solid #f5f5f5;border-radius:var(--pay-card-border-radius, 8px)!important;background-color:var(--pay-card-bg-color, #f5f5f5)!important;padding:6px 8px;border-color:var(--pay-card-border-color, #f5f5f5)!important;border-width:var(--pay-card-border-width, none)!important;box-sizing:border-box;gap:8px;align-items:stretch}.pay-left{flex:0 0 30%;max-width:30%;min-width:0}.grey-label{font-size:12px;font-weight:700;color:#696969;display:block}.left-right-label{font-size:8px;font-weight:600;color:#696969;display:block}.bold-label{font-size:.875rem;font-weight:700;line-height:20px;color:#444}.light-label{font-size:12px;font-weight:400;line-height:16px;color:#000}.toggle-benefit-img{width:10px;height:10px}.premium-card{background:#fff;padding:6px 10px;min-height:54px;flex:1 1 70%;max-width:70%;min-width:0;border-radius:4px;text-align:center;display:flex;flex-direction:row;align-items:center;justify-content:center;gap:8px;box-sizing:border-box;overflow:hidden}.premium-card .value-card span,.premium-card .light-label,.premium-card .grey-label{white-space:normal;overflow-wrap:anywhere}.showcontent-amount{font-weight:800;font-size:14px;color:#444;line-height:20px}.vertical-line{width:1px;height:20px;background-color:#ddd}.or-text{font-size:10px;font-weight:400;color:#8f8f8f;text-align:center;line-height:14px}.separator-container{display:flex;flex-direction:column;align-items:center}.separator-icon{font-size:12px;margin:0 8px;font-weight:700;color:#444}.grey-button{color:#696969;font-size:10px;font-weight:600;height:18px;min-width:50px;display:flex;align-items:center;line-height:14px}.pay-get-card-digit-boss-banner{background-color:#f5f5f5;margin-top:0;padding:6px 10px;max-width:var(--pay-card-width, 100%);border-radius:0 0 var(--pay-card-border-radius, 8px) var(--pay-card-border-radius, 8px)}.pay-get-card-digit-boss-text{font-size:12px;font-weight:600;color:#444;display:block;text-align:center}.value-card{display:flex;flex-direction:column;align-items:center;gap:4px}.value-card span{white-space:normal;overflow-wrap:anywhere}.right-left-label{font-size:8px;font-weight:600;color:#696969;display:block}.showcontent-frequency{font-weight:400;font-size:6px;color:#444}@media (max-width: 480px){.pay-card{padding:6px;gap:4px}.pay-left{flex:0 0 30%;max-width:30%}.premium-card{flex:1 1 70%;max-width:70%;padding:4px 6px;gap:4px}.bold-label{font-size:.75rem}.grey-label{font-size:11px}.showcontent-amount{font-size:12px}.separator-icon{margin:0 4px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: CustomizedTooltipDirective, selector: "[appTooltipTemplate]", inputs: ["appTooltipTemplate"] }] });
|
|
20
20
|
}
|
|
21
21
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PayGetCardComponent, decorators: [{
|
|
22
22
|
type: Component,
|
|
23
|
-
args: [{ selector: 'lib-pay-get-card', standalone: true, imports: [CommonModule, CustomizedTooltipDirective], template: "<div\n class=\"d-flex justify-content-between pay-card\"\n [ngStyle]=\"{\n'--pay-card-border-color': field()?.controlStyle?.borderColor ,\n'--pay-card-border-width': field()?.controlStyle?.borderWidth ,\n'--pay-card-border-radius': field()?.controlStyle?.borderRadius ,\n'--pay-card-bg-color': field()?.controlStyle?.background ,\n'--pay-card-width': field()?.controlStyle?.width ,\n }\"\n *ngIf=\"field() && field()?.isVisible\"\n>\n <div class=\"pay-left text-center mx-2 d-flex flex-column align-items-center justify-content-center\">\n <span class=\"bold-label\">{{ field()?.placeHolder || 'Pay' }}</span>\n <div class=\"d-flex align-items-center justify-content-center\">\n <span class=\"grey-label\">{{payAmount}}</span>\n <span [appTooltipTemplate]=\"currentTooltip\" arrowPosition=\"left\" tooltipPosition=\"bottom\"\n *ngIf=\"field().configData?.infoimageUrl && field().configData?.tooltipText\">\n <img [src]=\"field().configData?.infoimageUrl\" class=\"toggle-benefit-img mx-1\" />\n </span>\n <ng-template #currentTooltip>\n <span [innerHTML]=\"field().configData?.tooltipText\"></span>\n </ng-template>\n </div>\n <span class=\"left-right-label\" *ngIf=\"field()?.configData?.leftSubText\">{{field()?.configData?.leftSubText}}</span>\n </div>\n <div class=\"premium-card d-flex align-items-center justify-content-around\">\n <ng-container *ngFor=\"let option of payamountOptions; let i = index; let isLast = last\">\n <div class=\"value-card text-center\" *ngIf=\"field()?.configData?.isShowContent\">\n <span class=\"showcontent-amount\">{{option.amount}}/ <span class=\"showcontent-frequency\">{{option.frequency}}</span></span>\n <div class=\"grey-button\">{{option.percentage}} {{option.variable}}</div>\n </div>\n\n <ng-container *ngIf=\"field()?.configData?.isShowContent && !isLast\">\n <span *ngIf=\"i !== payamountOptions.length - 2\" class=\"separator-icon\">+</span>\n <span *ngIf=\"i === payamountOptions.length - 2\" class=\"separator-icon\">=</span>\n </ng-container>\n </ng-container>\n\n <div class=\"d-flex flex-column text-center\" *ngIf=\"field()?.configData?.isShowLastPart\">\n <span class=\"light-label\"><b class=\"bold-label\">{{premiumAmount}}</b>/ {{frequency}}</span>\n <span class=\"grey-label\" *ngIf=\"field()?.configData?.isShowpayout\">for {{ptValue}} years (till {{years}})</span>\n <span class=\"right-left-label\" *ngIf=\"field()?.configData?.isShowRightTextValue\">{{field()?.configData?.isShowRightTextValue}}</span>\n <span class=\"left-right-label\" *ngIf=\"field()?.configData?.rightSubText\">{{field()?.configData?.rightSubText}}</span>\n </div>\n </div>\n</div>\n<div class=\"pay-get-card-digit-boss-banner\" *ngIf=\"field() && field()?.isVisible && field()?.configData?.digitBossText\">\n <span class=\"pay-get-card-digit-boss-text\">{{field()?.configData?.digitBossText}}</span>\n</div>\n", styles: [".pay-card{max-width:var(--pay-card-width, 100%)!important;width:100%;min-height:65px;border:1px solid #f5f5f5;border-radius:var(--pay-card-border-radius, 8px)!important;background-color:var(--pay-card-bg-color, #f5f5f5)!important;padding:6px 8px;border-color:var(--pay-card-border-color, #f5f5f5)!important;border-width:var(--pay-card-border-width, none)!important;box-sizing:border-box;gap:8px;align-items:stretch}.pay-left{flex:0 0 30%;max-width:30%;min-width:0
|
|
23
|
+
args: [{ selector: 'lib-pay-get-card', standalone: true, imports: [CommonModule, CustomizedTooltipDirective], template: "<div\n class=\"d-flex justify-content-between pay-card\"\n [ngStyle]=\"{\n'--pay-card-border-color': field()?.controlStyle?.borderColor ,\n'--pay-card-border-width': field()?.controlStyle?.borderWidth ,\n'--pay-card-border-radius': field()?.controlStyle?.borderRadius ,\n'--pay-card-bg-color': field()?.controlStyle?.background ,\n'--pay-card-width': field()?.controlStyle?.width ,\n }\"\n *ngIf=\"field() && field()?.isVisible\"\n>\n <div class=\"pay-left text-center mx-2 d-flex flex-column align-items-center justify-content-center\">\n <span class=\"bold-label\">{{ field()?.placeHolder || 'Pay' }}</span>\n <div class=\"d-flex align-items-center justify-content-center\">\n <span class=\"grey-label\">{{payAmount}}</span>\n <span [appTooltipTemplate]=\"currentTooltip\" arrowPosition=\"left\" tooltipPosition=\"bottom\"\n *ngIf=\"field().configData?.infoimageUrl && field().configData?.tooltipText\">\n <img [src]=\"field().configData?.infoimageUrl\" class=\"toggle-benefit-img mx-1\" />\n </span>\n <ng-template #currentTooltip>\n <span [innerHTML]=\"field().configData?.tooltipText\"></span>\n </ng-template>\n </div>\n <span class=\"left-right-label\" *ngIf=\"field()?.configData?.leftSubText\">{{field()?.configData?.leftSubText}}</span>\n </div>\n <div class=\"premium-card d-flex align-items-center justify-content-around\">\n <ng-container *ngFor=\"let option of payamountOptions; let i = index; let isLast = last\">\n <div class=\"value-card text-center\" *ngIf=\"field()?.configData?.isShowContent\">\n <span class=\"showcontent-amount\">{{option.amount}}/ <span class=\"showcontent-frequency\">{{option.frequency}}</span></span>\n <div class=\"grey-button\">{{option.percentage}} {{option.variable}}</div>\n </div>\n\n <ng-container *ngIf=\"field()?.configData?.isShowContent && !isLast\">\n <span *ngIf=\"i !== payamountOptions.length - 2\" class=\"separator-icon\">+</span>\n <span *ngIf=\"i === payamountOptions.length - 2\" class=\"separator-icon\">=</span>\n </ng-container>\n </ng-container>\n\n <div class=\"d-flex flex-column text-center\" *ngIf=\"field()?.configData?.isShowLastPart\">\n <span class=\"light-label\"><b class=\"bold-label\">{{premiumAmount}}</b>/ {{frequency}}</span>\n <span class=\"grey-label\" *ngIf=\"field()?.configData?.isShowpayout\">for {{ptValue}} years (till {{years}})</span>\n <span class=\"right-left-label\" *ngIf=\"field()?.configData?.isShowRightTextValue\">{{field()?.configData?.isShowRightTextValue}}</span>\n <span class=\"left-right-label\" *ngIf=\"field()?.configData?.rightSubText\">{{field()?.configData?.rightSubText}}</span>\n </div>\n </div>\n</div>\n<div class=\"pay-get-card-digit-boss-banner\" *ngIf=\"field() && field()?.isVisible && field()?.configData?.digitBossText\">\n <span class=\"pay-get-card-digit-boss-text\">{{field()?.configData?.digitBossText}}</span>\n</div>\n", styles: [".pay-card{max-width:var(--pay-card-width, 100%)!important;width:100%;min-height:65px;border:1px solid #f5f5f5;border-radius:var(--pay-card-border-radius, 8px)!important;background-color:var(--pay-card-bg-color, #f5f5f5)!important;padding:6px 8px;border-color:var(--pay-card-border-color, #f5f5f5)!important;border-width:var(--pay-card-border-width, none)!important;box-sizing:border-box;gap:8px;align-items:stretch}.pay-left{flex:0 0 30%;max-width:30%;min-width:0}.grey-label{font-size:12px;font-weight:700;color:#696969;display:block}.left-right-label{font-size:8px;font-weight:600;color:#696969;display:block}.bold-label{font-size:.875rem;font-weight:700;line-height:20px;color:#444}.light-label{font-size:12px;font-weight:400;line-height:16px;color:#000}.toggle-benefit-img{width:10px;height:10px}.premium-card{background:#fff;padding:6px 10px;min-height:54px;flex:1 1 70%;max-width:70%;min-width:0;border-radius:4px;text-align:center;display:flex;flex-direction:row;align-items:center;justify-content:center;gap:8px;box-sizing:border-box;overflow:hidden}.premium-card .value-card span,.premium-card .light-label,.premium-card .grey-label{white-space:normal;overflow-wrap:anywhere}.showcontent-amount{font-weight:800;font-size:14px;color:#444;line-height:20px}.vertical-line{width:1px;height:20px;background-color:#ddd}.or-text{font-size:10px;font-weight:400;color:#8f8f8f;text-align:center;line-height:14px}.separator-container{display:flex;flex-direction:column;align-items:center}.separator-icon{font-size:12px;margin:0 8px;font-weight:700;color:#444}.grey-button{color:#696969;font-size:10px;font-weight:600;height:18px;min-width:50px;display:flex;align-items:center;line-height:14px}.pay-get-card-digit-boss-banner{background-color:#f5f5f5;margin-top:0;padding:6px 10px;max-width:var(--pay-card-width, 100%);border-radius:0 0 var(--pay-card-border-radius, 8px) var(--pay-card-border-radius, 8px)}.pay-get-card-digit-boss-text{font-size:12px;font-weight:600;color:#444;display:block;text-align:center}.value-card{display:flex;flex-direction:column;align-items:center;gap:4px}.value-card span{white-space:normal;overflow-wrap:anywhere}.right-left-label{font-size:8px;font-weight:600;color:#696969;display:block}.showcontent-frequency{font-weight:400;font-size:6px;color:#444}@media (max-width: 480px){.pay-card{padding:6px;gap:4px}.pay-left{flex:0 0 30%;max-width:30%}.premium-card{flex:1 1 70%;max-width:70%;padding:4px 6px;gap:4px}.bold-label{font-size:.75rem}.grey-label{font-size:11px}.showcontent-amount{font-size:12px}.separator-icon{margin:0 4px}}\n"] }]
|
|
24
24
|
}], propDecorators: { payAmount: [{
|
|
25
25
|
type: Input
|
|
26
26
|
}], premiumAmount: [{
|
|
@@ -34,4 +34,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
34
34
|
}], payamountOptions: [{
|
|
35
35
|
type: Input
|
|
36
36
|
}] } });
|
|
37
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
37
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicGF5LWdldC1jYXJkLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL21hc3Rlci1jb250cm9sL3NyYy9saWIvcGF5LWdldC1jYXJkL3BheS1nZXQtY2FyZC5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9tYXN0ZXItY29udHJvbC9zcmMvbGliL3BheS1nZXQtY2FyZC9wYXktZ2V0LWNhcmQuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLGlCQUFpQixDQUFDO0FBQy9DLE9BQU8sRUFBRSxTQUFTLEVBQUUsS0FBSyxFQUFFLEtBQUssRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUN4RCxPQUFPLEVBQUUsMEJBQTBCLEVBQUUsTUFBTSw0Q0FBNEMsQ0FBQzs7O0FBU3hGLE1BQU0sT0FBTyxtQkFBbUI7SUFDaEMsS0FBSyxHQUFRLEtBQUssQ0FBQyxRQUFRLEVBQU8sQ0FBQztJQUN6QixTQUFTLEdBQVEsV0FBVyxDQUFDO0lBQzdCLGFBQWEsR0FBTyxTQUFTLENBQUM7SUFDOUIsT0FBTyxHQUFPLENBQUMsQ0FBQztJQUNoQixLQUFLLEdBQU8sTUFBTSxDQUFDO0lBQ25CLFNBQVMsR0FBTyxPQUFPLENBQUM7SUFFeEIsZ0JBQWdCLEdBQVU7UUFDbEMsRUFBRSxNQUFNLEVBQUUsU0FBUyxFQUFFLFVBQVUsRUFBRSxZQUFZLEVBQUMsU0FBUyxFQUFFLEVBQUUsRUFBRSxRQUFRLEVBQUUsRUFBRSxFQUFFO1FBQzFFLEVBQUUsTUFBTSxFQUFFLFNBQVMsRUFBRSxVQUFVLEVBQUUsWUFBWSxFQUFFLFNBQVMsRUFBRSxFQUFFLEVBQUUsUUFBUSxFQUFFLEVBQUUsRUFBRTtRQUM1RSxFQUFFLE1BQU0sRUFBRSxTQUFTLEVBQUUsVUFBVSxFQUFFLFNBQVMsRUFBRSxTQUFTLEVBQUUsRUFBRSxFQUFFLFFBQVEsRUFBRSxFQUFFLEVBQUM7S0FDekUsQ0FBQzt3R0FaVSxtQkFBbUI7NEZBQW5CLG1CQUFtQiw0L0JDWGhDLHM2RkFpREEsMmpGRDFDWSxZQUFZLHFWQUFFLDBCQUEwQjs7NEZBSXZDLG1CQUFtQjtrQkFQL0IsU0FBUzsrQkFDRSxrQkFBa0IsY0FDaEIsSUFBSSxXQUNQLENBQUMsWUFBWSxFQUFFLDBCQUEwQixDQUFDOzhCQU0zQyxTQUFTO3NCQUFqQixLQUFLO2dCQUNHLGFBQWE7c0JBQXJCLEtBQUs7Z0JBQ0csT0FBTztzQkFBZixLQUFLO2dCQUNHLEtBQUs7c0JBQWIsS0FBSztnQkFDRyxTQUFTO3NCQUFqQixLQUFLO2dCQUVHLGdCQUFnQjtzQkFBeEIsS0FBSyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbW1vbk1vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbic7XG5pbXBvcnQgeyBDb21wb25lbnQsIElucHV0LCBpbnB1dCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgQ3VzdG9taXplZFRvb2x0aXBEaXJlY3RpdmUgfSBmcm9tICcuLi9kaXJlY3RpdmVzL2N1c3RvbWl6ZWQudG9vbHRpcC5kaXJlY3RpdmUnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdsaWItcGF5LWdldC1jYXJkJyxcbiAgc3RhbmRhbG9uZTogdHJ1ZSxcbiAgaW1wb3J0czogW0NvbW1vbk1vZHVsZSwgQ3VzdG9taXplZFRvb2x0aXBEaXJlY3RpdmVdLFxuICB0ZW1wbGF0ZVVybDogJy4vcGF5LWdldC1jYXJkLmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmw6ICcuL3BheS1nZXQtY2FyZC5jb21wb25lbnQuY3NzJ1xufSlcbmV4cG9ydCBjbGFzcyBQYXlHZXRDYXJkQ29tcG9uZW50IHtcbmZpZWxkOiBhbnkgPSBpbnB1dC5yZXF1aXJlZDxhbnk+KCk7XG4gQElucHV0KCkgcGF5QW1vdW50OiBhbnkgPSAn4oK5NiwwMCwwMDAnO1xuIEBJbnB1dCgpIHByZW1pdW1BbW91bnQ6IGFueT0gJ+KCuTEwLDAwMCc7XG4gQElucHV0KCkgcHRWYWx1ZTogYW55PSA1O1xuIEBJbnB1dCgpIHllYXJzOiBhbnk9ICcyMDMwJztcbiBASW5wdXQoKSBmcmVxdWVuY3k6IGFueT0gJ21vbnRoJztcblxuIEBJbnB1dCgpIHBheWFtb3VudE9wdGlvbnM6IGFueVtdID0gW1xuICB7IGFtb3VudDogJ+KCuTYyLDAwMCcsIHBlcmNlbnRhZ2U6ICdHdWFyYW50ZWVkJyxmcmVxdWVuY3k6ICcnLCB2YXJpYWJsZTogJycgfSxcbiAgIHsgYW1vdW50OiAn4oK5NjYsMDAwJywgcGVyY2VudGFnZTogJ1ZhcmlhYmxlIEAnLCBmcmVxdWVuY3k6ICcnLCB2YXJpYWJsZTogJycgfSxcbiAgIHsgYW1vdW50OiAn4oK5NzIsMDAwJywgcGVyY2VudGFnZTogJ1RvdGFsIEAnLCBmcmVxdWVuY3k6ICcnLCB2YXJpYWJsZTogJyd9XG4gXTtcbn1cbiIsIjxkaXZcbiAgY2xhc3M9XCJkLWZsZXgganVzdGlmeS1jb250ZW50LWJldHdlZW4gcGF5LWNhcmRcIlxuICBbbmdTdHlsZV09XCJ7XG4nLS1wYXktY2FyZC1ib3JkZXItY29sb3InOiBmaWVsZCgpPy5jb250cm9sU3R5bGU/LmJvcmRlckNvbG9yICxcbictLXBheS1jYXJkLWJvcmRlci13aWR0aCc6IGZpZWxkKCk/LmNvbnRyb2xTdHlsZT8uYm9yZGVyV2lkdGggLFxuJy0tcGF5LWNhcmQtYm9yZGVyLXJhZGl1cyc6IGZpZWxkKCk/LmNvbnRyb2xTdHlsZT8uYm9yZGVyUmFkaXVzICxcbictLXBheS1jYXJkLWJnLWNvbG9yJzogZmllbGQoKT8uY29udHJvbFN0eWxlPy5iYWNrZ3JvdW5kICxcbictLXBheS1jYXJkLXdpZHRoJzogZmllbGQoKT8uY29udHJvbFN0eWxlPy53aWR0aCAsXG4gfVwiXG4gKm5nSWY9XCJmaWVsZCgpICYmIGZpZWxkKCk/LmlzVmlzaWJsZVwiXG4+XG4gIDxkaXYgY2xhc3M9XCJwYXktbGVmdCB0ZXh0LWNlbnRlciBteC0yIGQtZmxleCBmbGV4LWNvbHVtbiBhbGlnbi1pdGVtcy1jZW50ZXIganVzdGlmeS1jb250ZW50LWNlbnRlclwiPlxuICAgIDxzcGFuIGNsYXNzPVwiYm9sZC1sYWJlbFwiPnt7IGZpZWxkKCk/LnBsYWNlSG9sZGVyIHx8ICdQYXknIH19PC9zcGFuPlxuICAgIDxkaXYgY2xhc3M9XCJkLWZsZXggYWxpZ24taXRlbXMtY2VudGVyIGp1c3RpZnktY29udGVudC1jZW50ZXJcIj5cbiAgICA8c3BhbiBjbGFzcz1cImdyZXktbGFiZWxcIj57e3BheUFtb3VudH19PC9zcGFuPlxuICAgIDxzcGFuIFthcHBUb29sdGlwVGVtcGxhdGVdPVwiY3VycmVudFRvb2x0aXBcIiBhcnJvd1Bvc2l0aW9uPVwibGVmdFwiIHRvb2x0aXBQb3NpdGlvbj1cImJvdHRvbVwiXG4gICAgICAgICpuZ0lmPVwiZmllbGQoKS5jb25maWdEYXRhPy5pbmZvaW1hZ2VVcmwgJiYgZmllbGQoKS5jb25maWdEYXRhPy50b29sdGlwVGV4dFwiPlxuICAgICAgICA8aW1nIFtzcmNdPVwiZmllbGQoKS5jb25maWdEYXRhPy5pbmZvaW1hZ2VVcmxcIiBjbGFzcz1cInRvZ2dsZS1iZW5lZml0LWltZyBteC0xXCIgLz5cbiAgICAgIDwvc3Bhbj5cbiAgICAgIDxuZy10ZW1wbGF0ZSAjY3VycmVudFRvb2x0aXA+XG4gICAgICAgIDxzcGFuIFtpbm5lckhUTUxdPVwiZmllbGQoKS5jb25maWdEYXRhPy50b29sdGlwVGV4dFwiPjwvc3Bhbj5cbiAgICAgIDwvbmctdGVtcGxhdGU+XG4gICAgPC9kaXY+XG4gICAgPHNwYW4gY2xhc3M9XCJsZWZ0LXJpZ2h0LWxhYmVsXCIgKm5nSWY9XCJmaWVsZCgpPy5jb25maWdEYXRhPy5sZWZ0U3ViVGV4dFwiPnt7ZmllbGQoKT8uY29uZmlnRGF0YT8ubGVmdFN1YlRleHR9fTwvc3Bhbj5cbiAgPC9kaXY+XG4gIDxkaXYgY2xhc3M9XCJwcmVtaXVtLWNhcmQgZC1mbGV4IGFsaWduLWl0ZW1zLWNlbnRlciBqdXN0aWZ5LWNvbnRlbnQtYXJvdW5kXCI+XG4gICAgPG5nLWNvbnRhaW5lciAqbmdGb3I9XCJsZXQgb3B0aW9uIG9mIHBheWFtb3VudE9wdGlvbnM7IGxldCBpID0gaW5kZXg7IGxldCBpc0xhc3QgPSBsYXN0XCI+XG4gICAgICA8ZGl2IGNsYXNzPVwidmFsdWUtY2FyZCB0ZXh0LWNlbnRlclwiICpuZ0lmPVwiZmllbGQoKT8uY29uZmlnRGF0YT8uaXNTaG93Q29udGVudFwiPlxuICAgICAgICA8c3BhbiBjbGFzcz1cInNob3djb250ZW50LWFtb3VudFwiPnt7b3B0aW9uLmFtb3VudH19LyA8c3BhbiBjbGFzcz1cInNob3djb250ZW50LWZyZXF1ZW5jeVwiPnt7b3B0aW9uLmZyZXF1ZW5jeX19PC9zcGFuPjwvc3Bhbj5cbiAgICAgICAgPGRpdiBjbGFzcz1cImdyZXktYnV0dG9uXCI+e3tvcHRpb24ucGVyY2VudGFnZX19IHt7b3B0aW9uLnZhcmlhYmxlfX08L2Rpdj5cbiAgICAgIDwvZGl2PlxuXG4gICAgICA8bmctY29udGFpbmVyICpuZ0lmPVwiZmllbGQoKT8uY29uZmlnRGF0YT8uaXNTaG93Q29udGVudCAmJiAhaXNMYXN0XCI+XG4gICAgICA8c3BhbiAqbmdJZj1cImkgIT09IHBheWFtb3VudE9wdGlvbnMubGVuZ3RoIC0gMlwiIGNsYXNzPVwic2VwYXJhdG9yLWljb25cIj4rPC9zcGFuPlxuICAgICAgPHNwYW4gKm5nSWY9XCJpID09PSBwYXlhbW91bnRPcHRpb25zLmxlbmd0aCAtIDJcIiBjbGFzcz1cInNlcGFyYXRvci1pY29uXCI+PTwvc3Bhbj5cbiAgICA8L25nLWNvbnRhaW5lcj5cbiAgICA8L25nLWNvbnRhaW5lcj5cblxuICAgIDxkaXYgY2xhc3M9XCJkLWZsZXggZmxleC1jb2x1bW4gdGV4dC1jZW50ZXJcIiAqbmdJZj1cImZpZWxkKCk/LmNvbmZpZ0RhdGE/LmlzU2hvd0xhc3RQYXJ0XCI+XG4gICAgICA8c3BhbiBjbGFzcz1cImxpZ2h0LWxhYmVsXCI+PGIgY2xhc3M9XCJib2xkLWxhYmVsXCI+e3twcmVtaXVtQW1vdW50fX08L2I+LyB7e2ZyZXF1ZW5jeX19PC9zcGFuPlxuICAgICAgPHNwYW4gY2xhc3M9XCJncmV5LWxhYmVsXCIgKm5nSWY9XCJmaWVsZCgpPy5jb25maWdEYXRhPy5pc1Nob3dwYXlvdXRcIj5mb3Ige3twdFZhbHVlfX0geWVhcnMgKHRpbGwge3t5ZWFyc319KTwvc3Bhbj5cbiAgICAgIDxzcGFuIGNsYXNzPVwicmlnaHQtbGVmdC1sYWJlbFwiICpuZ0lmPVwiZmllbGQoKT8uY29uZmlnRGF0YT8uaXNTaG93UmlnaHRUZXh0VmFsdWVcIj57e2ZpZWxkKCk/LmNvbmZpZ0RhdGE/LmlzU2hvd1JpZ2h0VGV4dFZhbHVlfX08L3NwYW4+XG4gICAgICA8c3BhbiBjbGFzcz1cImxlZnQtcmlnaHQtbGFiZWxcIiAqbmdJZj1cImZpZWxkKCk/LmNvbmZpZ0RhdGE/LnJpZ2h0U3ViVGV4dFwiPnt7ZmllbGQoKT8uY29uZmlnRGF0YT8ucmlnaHRTdWJUZXh0fX08L3NwYW4+XG4gICAgPC9kaXY+XG4gIDwvZGl2PlxuPC9kaXY+XG48ZGl2IGNsYXNzPVwicGF5LWdldC1jYXJkLWRpZ2l0LWJvc3MtYmFubmVyXCIgKm5nSWY9XCJmaWVsZCgpICYmIGZpZWxkKCk/LmlzVmlzaWJsZSAmJiBmaWVsZCgpPy5jb25maWdEYXRhPy5kaWdpdEJvc3NUZXh0XCI+XG4gIDxzcGFuIGNsYXNzPVwicGF5LWdldC1jYXJkLWRpZ2l0LWJvc3MtdGV4dFwiPnt7ZmllbGQoKT8uY29uZmlnRGF0YT8uZGlnaXRCb3NzVGV4dH19PC9zcGFuPlxuPC9kaXY+XG4iXX0=
|
|
@@ -3805,11 +3805,11 @@ class PayGetCardComponent {
|
|
|
3805
3805
|
{ amount: '₹72,000', percentage: 'Total @', frequency: '', variable: '' }
|
|
3806
3806
|
];
|
|
3807
3807
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PayGetCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3808
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: PayGetCardComponent, isStandalone: true, selector: "lib-pay-get-card", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, payAmount: { classPropertyName: "payAmount", publicName: "payAmount", isSignal: false, isRequired: false, transformFunction: null }, premiumAmount: { classPropertyName: "premiumAmount", publicName: "premiumAmount", isSignal: false, isRequired: false, transformFunction: null }, ptValue: { classPropertyName: "ptValue", publicName: "ptValue", isSignal: false, isRequired: false, transformFunction: null }, years: { classPropertyName: "years", publicName: "years", isSignal: false, isRequired: false, transformFunction: null }, frequency: { classPropertyName: "frequency", publicName: "frequency", isSignal: false, isRequired: false, transformFunction: null }, payamountOptions: { classPropertyName: "payamountOptions", publicName: "payamountOptions", isSignal: false, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n class=\"d-flex justify-content-between pay-card\"\n [ngStyle]=\"{\n'--pay-card-border-color': field()?.controlStyle?.borderColor ,\n'--pay-card-border-width': field()?.controlStyle?.borderWidth ,\n'--pay-card-border-radius': field()?.controlStyle?.borderRadius ,\n'--pay-card-bg-color': field()?.controlStyle?.background ,\n'--pay-card-width': field()?.controlStyle?.width ,\n }\"\n *ngIf=\"field() && field()?.isVisible\"\n>\n <div class=\"pay-left text-center mx-2 d-flex flex-column align-items-center justify-content-center\">\n <span class=\"bold-label\">{{ field()?.placeHolder || 'Pay' }}</span>\n <div class=\"d-flex align-items-center justify-content-center\">\n <span class=\"grey-label\">{{payAmount}}</span>\n <span [appTooltipTemplate]=\"currentTooltip\" arrowPosition=\"left\" tooltipPosition=\"bottom\"\n *ngIf=\"field().configData?.infoimageUrl && field().configData?.tooltipText\">\n <img [src]=\"field().configData?.infoimageUrl\" class=\"toggle-benefit-img mx-1\" />\n </span>\n <ng-template #currentTooltip>\n <span [innerHTML]=\"field().configData?.tooltipText\"></span>\n </ng-template>\n </div>\n <span class=\"left-right-label\" *ngIf=\"field()?.configData?.leftSubText\">{{field()?.configData?.leftSubText}}</span>\n </div>\n <div class=\"premium-card d-flex align-items-center justify-content-around\">\n <ng-container *ngFor=\"let option of payamountOptions; let i = index; let isLast = last\">\n <div class=\"value-card text-center\" *ngIf=\"field()?.configData?.isShowContent\">\n <span class=\"showcontent-amount\">{{option.amount}}/ <span class=\"showcontent-frequency\">{{option.frequency}}</span></span>\n <div class=\"grey-button\">{{option.percentage}} {{option.variable}}</div>\n </div>\n\n <ng-container *ngIf=\"field()?.configData?.isShowContent && !isLast\">\n <span *ngIf=\"i !== payamountOptions.length - 2\" class=\"separator-icon\">+</span>\n <span *ngIf=\"i === payamountOptions.length - 2\" class=\"separator-icon\">=</span>\n </ng-container>\n </ng-container>\n\n <div class=\"d-flex flex-column text-center\" *ngIf=\"field()?.configData?.isShowLastPart\">\n <span class=\"light-label\"><b class=\"bold-label\">{{premiumAmount}}</b>/ {{frequency}}</span>\n <span class=\"grey-label\" *ngIf=\"field()?.configData?.isShowpayout\">for {{ptValue}} years (till {{years}})</span>\n <span class=\"right-left-label\" *ngIf=\"field()?.configData?.isShowRightTextValue\">{{field()?.configData?.isShowRightTextValue}}</span>\n <span class=\"left-right-label\" *ngIf=\"field()?.configData?.rightSubText\">{{field()?.configData?.rightSubText}}</span>\n </div>\n </div>\n</div>\n<div class=\"pay-get-card-digit-boss-banner\" *ngIf=\"field() && field()?.isVisible && field()?.configData?.digitBossText\">\n <span class=\"pay-get-card-digit-boss-text\">{{field()?.configData?.digitBossText}}</span>\n</div>\n", styles: [".pay-card{max-width:var(--pay-card-width, 100%)!important;width:100%;min-height:65px;border:1px solid #f5f5f5;border-radius:var(--pay-card-border-radius, 8px)!important;background-color:var(--pay-card-bg-color, #f5f5f5)!important;padding:6px 8px;border-color:var(--pay-card-border-color, #f5f5f5)!important;border-width:var(--pay-card-border-width, none)!important;box-sizing:border-box;gap:8px;align-items:stretch}.pay-left{flex:0 0 30%;max-width:30%;min-width:0
|
|
3808
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: PayGetCardComponent, isStandalone: true, selector: "lib-pay-get-card", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, payAmount: { classPropertyName: "payAmount", publicName: "payAmount", isSignal: false, isRequired: false, transformFunction: null }, premiumAmount: { classPropertyName: "premiumAmount", publicName: "premiumAmount", isSignal: false, isRequired: false, transformFunction: null }, ptValue: { classPropertyName: "ptValue", publicName: "ptValue", isSignal: false, isRequired: false, transformFunction: null }, years: { classPropertyName: "years", publicName: "years", isSignal: false, isRequired: false, transformFunction: null }, frequency: { classPropertyName: "frequency", publicName: "frequency", isSignal: false, isRequired: false, transformFunction: null }, payamountOptions: { classPropertyName: "payamountOptions", publicName: "payamountOptions", isSignal: false, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n class=\"d-flex justify-content-between pay-card\"\n [ngStyle]=\"{\n'--pay-card-border-color': field()?.controlStyle?.borderColor ,\n'--pay-card-border-width': field()?.controlStyle?.borderWidth ,\n'--pay-card-border-radius': field()?.controlStyle?.borderRadius ,\n'--pay-card-bg-color': field()?.controlStyle?.background ,\n'--pay-card-width': field()?.controlStyle?.width ,\n }\"\n *ngIf=\"field() && field()?.isVisible\"\n>\n <div class=\"pay-left text-center mx-2 d-flex flex-column align-items-center justify-content-center\">\n <span class=\"bold-label\">{{ field()?.placeHolder || 'Pay' }}</span>\n <div class=\"d-flex align-items-center justify-content-center\">\n <span class=\"grey-label\">{{payAmount}}</span>\n <span [appTooltipTemplate]=\"currentTooltip\" arrowPosition=\"left\" tooltipPosition=\"bottom\"\n *ngIf=\"field().configData?.infoimageUrl && field().configData?.tooltipText\">\n <img [src]=\"field().configData?.infoimageUrl\" class=\"toggle-benefit-img mx-1\" />\n </span>\n <ng-template #currentTooltip>\n <span [innerHTML]=\"field().configData?.tooltipText\"></span>\n </ng-template>\n </div>\n <span class=\"left-right-label\" *ngIf=\"field()?.configData?.leftSubText\">{{field()?.configData?.leftSubText}}</span>\n </div>\n <div class=\"premium-card d-flex align-items-center justify-content-around\">\n <ng-container *ngFor=\"let option of payamountOptions; let i = index; let isLast = last\">\n <div class=\"value-card text-center\" *ngIf=\"field()?.configData?.isShowContent\">\n <span class=\"showcontent-amount\">{{option.amount}}/ <span class=\"showcontent-frequency\">{{option.frequency}}</span></span>\n <div class=\"grey-button\">{{option.percentage}} {{option.variable}}</div>\n </div>\n\n <ng-container *ngIf=\"field()?.configData?.isShowContent && !isLast\">\n <span *ngIf=\"i !== payamountOptions.length - 2\" class=\"separator-icon\">+</span>\n <span *ngIf=\"i === payamountOptions.length - 2\" class=\"separator-icon\">=</span>\n </ng-container>\n </ng-container>\n\n <div class=\"d-flex flex-column text-center\" *ngIf=\"field()?.configData?.isShowLastPart\">\n <span class=\"light-label\"><b class=\"bold-label\">{{premiumAmount}}</b>/ {{frequency}}</span>\n <span class=\"grey-label\" *ngIf=\"field()?.configData?.isShowpayout\">for {{ptValue}} years (till {{years}})</span>\n <span class=\"right-left-label\" *ngIf=\"field()?.configData?.isShowRightTextValue\">{{field()?.configData?.isShowRightTextValue}}</span>\n <span class=\"left-right-label\" *ngIf=\"field()?.configData?.rightSubText\">{{field()?.configData?.rightSubText}}</span>\n </div>\n </div>\n</div>\n<div class=\"pay-get-card-digit-boss-banner\" *ngIf=\"field() && field()?.isVisible && field()?.configData?.digitBossText\">\n <span class=\"pay-get-card-digit-boss-text\">{{field()?.configData?.digitBossText}}</span>\n</div>\n", styles: [".pay-card{max-width:var(--pay-card-width, 100%)!important;width:100%;min-height:65px;border:1px solid #f5f5f5;border-radius:var(--pay-card-border-radius, 8px)!important;background-color:var(--pay-card-bg-color, #f5f5f5)!important;padding:6px 8px;border-color:var(--pay-card-border-color, #f5f5f5)!important;border-width:var(--pay-card-border-width, none)!important;box-sizing:border-box;gap:8px;align-items:stretch}.pay-left{flex:0 0 30%;max-width:30%;min-width:0}.grey-label{font-size:12px;font-weight:700;color:#696969;display:block}.left-right-label{font-size:8px;font-weight:600;color:#696969;display:block}.bold-label{font-size:.875rem;font-weight:700;line-height:20px;color:#444}.light-label{font-size:12px;font-weight:400;line-height:16px;color:#000}.toggle-benefit-img{width:10px;height:10px}.premium-card{background:#fff;padding:6px 10px;min-height:54px;flex:1 1 70%;max-width:70%;min-width:0;border-radius:4px;text-align:center;display:flex;flex-direction:row;align-items:center;justify-content:center;gap:8px;box-sizing:border-box;overflow:hidden}.premium-card .value-card span,.premium-card .light-label,.premium-card .grey-label{white-space:normal;overflow-wrap:anywhere}.showcontent-amount{font-weight:800;font-size:14px;color:#444;line-height:20px}.vertical-line{width:1px;height:20px;background-color:#ddd}.or-text{font-size:10px;font-weight:400;color:#8f8f8f;text-align:center;line-height:14px}.separator-container{display:flex;flex-direction:column;align-items:center}.separator-icon{font-size:12px;margin:0 8px;font-weight:700;color:#444}.grey-button{color:#696969;font-size:10px;font-weight:600;height:18px;min-width:50px;display:flex;align-items:center;line-height:14px}.pay-get-card-digit-boss-banner{background-color:#f5f5f5;margin-top:0;padding:6px 10px;max-width:var(--pay-card-width, 100%);border-radius:0 0 var(--pay-card-border-radius, 8px) var(--pay-card-border-radius, 8px)}.pay-get-card-digit-boss-text{font-size:12px;font-weight:600;color:#444;display:block;text-align:center}.value-card{display:flex;flex-direction:column;align-items:center;gap:4px}.value-card span{white-space:normal;overflow-wrap:anywhere}.right-left-label{font-size:8px;font-weight:600;color:#696969;display:block}.showcontent-frequency{font-weight:400;font-size:6px;color:#444}@media (max-width: 480px){.pay-card{padding:6px;gap:4px}.pay-left{flex:0 0 30%;max-width:30%}.premium-card{flex:1 1 70%;max-width:70%;padding:4px 6px;gap:4px}.bold-label{font-size:.75rem}.grey-label{font-size:11px}.showcontent-amount{font-size:12px}.separator-icon{margin:0 4px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: CustomizedTooltipDirective, selector: "[appTooltipTemplate]", inputs: ["appTooltipTemplate"] }] });
|
|
3809
3809
|
}
|
|
3810
3810
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PayGetCardComponent, decorators: [{
|
|
3811
3811
|
type: Component,
|
|
3812
|
-
args: [{ selector: 'lib-pay-get-card', standalone: true, imports: [CommonModule, CustomizedTooltipDirective], template: "<div\n class=\"d-flex justify-content-between pay-card\"\n [ngStyle]=\"{\n'--pay-card-border-color': field()?.controlStyle?.borderColor ,\n'--pay-card-border-width': field()?.controlStyle?.borderWidth ,\n'--pay-card-border-radius': field()?.controlStyle?.borderRadius ,\n'--pay-card-bg-color': field()?.controlStyle?.background ,\n'--pay-card-width': field()?.controlStyle?.width ,\n }\"\n *ngIf=\"field() && field()?.isVisible\"\n>\n <div class=\"pay-left text-center mx-2 d-flex flex-column align-items-center justify-content-center\">\n <span class=\"bold-label\">{{ field()?.placeHolder || 'Pay' }}</span>\n <div class=\"d-flex align-items-center justify-content-center\">\n <span class=\"grey-label\">{{payAmount}}</span>\n <span [appTooltipTemplate]=\"currentTooltip\" arrowPosition=\"left\" tooltipPosition=\"bottom\"\n *ngIf=\"field().configData?.infoimageUrl && field().configData?.tooltipText\">\n <img [src]=\"field().configData?.infoimageUrl\" class=\"toggle-benefit-img mx-1\" />\n </span>\n <ng-template #currentTooltip>\n <span [innerHTML]=\"field().configData?.tooltipText\"></span>\n </ng-template>\n </div>\n <span class=\"left-right-label\" *ngIf=\"field()?.configData?.leftSubText\">{{field()?.configData?.leftSubText}}</span>\n </div>\n <div class=\"premium-card d-flex align-items-center justify-content-around\">\n <ng-container *ngFor=\"let option of payamountOptions; let i = index; let isLast = last\">\n <div class=\"value-card text-center\" *ngIf=\"field()?.configData?.isShowContent\">\n <span class=\"showcontent-amount\">{{option.amount}}/ <span class=\"showcontent-frequency\">{{option.frequency}}</span></span>\n <div class=\"grey-button\">{{option.percentage}} {{option.variable}}</div>\n </div>\n\n <ng-container *ngIf=\"field()?.configData?.isShowContent && !isLast\">\n <span *ngIf=\"i !== payamountOptions.length - 2\" class=\"separator-icon\">+</span>\n <span *ngIf=\"i === payamountOptions.length - 2\" class=\"separator-icon\">=</span>\n </ng-container>\n </ng-container>\n\n <div class=\"d-flex flex-column text-center\" *ngIf=\"field()?.configData?.isShowLastPart\">\n <span class=\"light-label\"><b class=\"bold-label\">{{premiumAmount}}</b>/ {{frequency}}</span>\n <span class=\"grey-label\" *ngIf=\"field()?.configData?.isShowpayout\">for {{ptValue}} years (till {{years}})</span>\n <span class=\"right-left-label\" *ngIf=\"field()?.configData?.isShowRightTextValue\">{{field()?.configData?.isShowRightTextValue}}</span>\n <span class=\"left-right-label\" *ngIf=\"field()?.configData?.rightSubText\">{{field()?.configData?.rightSubText}}</span>\n </div>\n </div>\n</div>\n<div class=\"pay-get-card-digit-boss-banner\" *ngIf=\"field() && field()?.isVisible && field()?.configData?.digitBossText\">\n <span class=\"pay-get-card-digit-boss-text\">{{field()?.configData?.digitBossText}}</span>\n</div>\n", styles: [".pay-card{max-width:var(--pay-card-width, 100%)!important;width:100%;min-height:65px;border:1px solid #f5f5f5;border-radius:var(--pay-card-border-radius, 8px)!important;background-color:var(--pay-card-bg-color, #f5f5f5)!important;padding:6px 8px;border-color:var(--pay-card-border-color, #f5f5f5)!important;border-width:var(--pay-card-border-width, none)!important;box-sizing:border-box;gap:8px;align-items:stretch}.pay-left{flex:0 0 30%;max-width:30%;min-width:0
|
|
3812
|
+
args: [{ selector: 'lib-pay-get-card', standalone: true, imports: [CommonModule, CustomizedTooltipDirective], template: "<div\n class=\"d-flex justify-content-between pay-card\"\n [ngStyle]=\"{\n'--pay-card-border-color': field()?.controlStyle?.borderColor ,\n'--pay-card-border-width': field()?.controlStyle?.borderWidth ,\n'--pay-card-border-radius': field()?.controlStyle?.borderRadius ,\n'--pay-card-bg-color': field()?.controlStyle?.background ,\n'--pay-card-width': field()?.controlStyle?.width ,\n }\"\n *ngIf=\"field() && field()?.isVisible\"\n>\n <div class=\"pay-left text-center mx-2 d-flex flex-column align-items-center justify-content-center\">\n <span class=\"bold-label\">{{ field()?.placeHolder || 'Pay' }}</span>\n <div class=\"d-flex align-items-center justify-content-center\">\n <span class=\"grey-label\">{{payAmount}}</span>\n <span [appTooltipTemplate]=\"currentTooltip\" arrowPosition=\"left\" tooltipPosition=\"bottom\"\n *ngIf=\"field().configData?.infoimageUrl && field().configData?.tooltipText\">\n <img [src]=\"field().configData?.infoimageUrl\" class=\"toggle-benefit-img mx-1\" />\n </span>\n <ng-template #currentTooltip>\n <span [innerHTML]=\"field().configData?.tooltipText\"></span>\n </ng-template>\n </div>\n <span class=\"left-right-label\" *ngIf=\"field()?.configData?.leftSubText\">{{field()?.configData?.leftSubText}}</span>\n </div>\n <div class=\"premium-card d-flex align-items-center justify-content-around\">\n <ng-container *ngFor=\"let option of payamountOptions; let i = index; let isLast = last\">\n <div class=\"value-card text-center\" *ngIf=\"field()?.configData?.isShowContent\">\n <span class=\"showcontent-amount\">{{option.amount}}/ <span class=\"showcontent-frequency\">{{option.frequency}}</span></span>\n <div class=\"grey-button\">{{option.percentage}} {{option.variable}}</div>\n </div>\n\n <ng-container *ngIf=\"field()?.configData?.isShowContent && !isLast\">\n <span *ngIf=\"i !== payamountOptions.length - 2\" class=\"separator-icon\">+</span>\n <span *ngIf=\"i === payamountOptions.length - 2\" class=\"separator-icon\">=</span>\n </ng-container>\n </ng-container>\n\n <div class=\"d-flex flex-column text-center\" *ngIf=\"field()?.configData?.isShowLastPart\">\n <span class=\"light-label\"><b class=\"bold-label\">{{premiumAmount}}</b>/ {{frequency}}</span>\n <span class=\"grey-label\" *ngIf=\"field()?.configData?.isShowpayout\">for {{ptValue}} years (till {{years}})</span>\n <span class=\"right-left-label\" *ngIf=\"field()?.configData?.isShowRightTextValue\">{{field()?.configData?.isShowRightTextValue}}</span>\n <span class=\"left-right-label\" *ngIf=\"field()?.configData?.rightSubText\">{{field()?.configData?.rightSubText}}</span>\n </div>\n </div>\n</div>\n<div class=\"pay-get-card-digit-boss-banner\" *ngIf=\"field() && field()?.isVisible && field()?.configData?.digitBossText\">\n <span class=\"pay-get-card-digit-boss-text\">{{field()?.configData?.digitBossText}}</span>\n</div>\n", styles: [".pay-card{max-width:var(--pay-card-width, 100%)!important;width:100%;min-height:65px;border:1px solid #f5f5f5;border-radius:var(--pay-card-border-radius, 8px)!important;background-color:var(--pay-card-bg-color, #f5f5f5)!important;padding:6px 8px;border-color:var(--pay-card-border-color, #f5f5f5)!important;border-width:var(--pay-card-border-width, none)!important;box-sizing:border-box;gap:8px;align-items:stretch}.pay-left{flex:0 0 30%;max-width:30%;min-width:0}.grey-label{font-size:12px;font-weight:700;color:#696969;display:block}.left-right-label{font-size:8px;font-weight:600;color:#696969;display:block}.bold-label{font-size:.875rem;font-weight:700;line-height:20px;color:#444}.light-label{font-size:12px;font-weight:400;line-height:16px;color:#000}.toggle-benefit-img{width:10px;height:10px}.premium-card{background:#fff;padding:6px 10px;min-height:54px;flex:1 1 70%;max-width:70%;min-width:0;border-radius:4px;text-align:center;display:flex;flex-direction:row;align-items:center;justify-content:center;gap:8px;box-sizing:border-box;overflow:hidden}.premium-card .value-card span,.premium-card .light-label,.premium-card .grey-label{white-space:normal;overflow-wrap:anywhere}.showcontent-amount{font-weight:800;font-size:14px;color:#444;line-height:20px}.vertical-line{width:1px;height:20px;background-color:#ddd}.or-text{font-size:10px;font-weight:400;color:#8f8f8f;text-align:center;line-height:14px}.separator-container{display:flex;flex-direction:column;align-items:center}.separator-icon{font-size:12px;margin:0 8px;font-weight:700;color:#444}.grey-button{color:#696969;font-size:10px;font-weight:600;height:18px;min-width:50px;display:flex;align-items:center;line-height:14px}.pay-get-card-digit-boss-banner{background-color:#f5f5f5;margin-top:0;padding:6px 10px;max-width:var(--pay-card-width, 100%);border-radius:0 0 var(--pay-card-border-radius, 8px) var(--pay-card-border-radius, 8px)}.pay-get-card-digit-boss-text{font-size:12px;font-weight:600;color:#444;display:block;text-align:center}.value-card{display:flex;flex-direction:column;align-items:center;gap:4px}.value-card span{white-space:normal;overflow-wrap:anywhere}.right-left-label{font-size:8px;font-weight:600;color:#696969;display:block}.showcontent-frequency{font-weight:400;font-size:6px;color:#444}@media (max-width: 480px){.pay-card{padding:6px;gap:4px}.pay-left{flex:0 0 30%;max-width:30%}.premium-card{flex:1 1 70%;max-width:70%;padding:4px 6px;gap:4px}.bold-label{font-size:.75rem}.grey-label{font-size:11px}.showcontent-amount{font-size:12px}.separator-icon{margin:0 4px}}\n"] }]
|
|
3813
3813
|
}], propDecorators: { payAmount: [{
|
|
3814
3814
|
type: Input
|
|
3815
3815
|
}], premiumAmount: [{
|
|
@@ -7205,7 +7205,7 @@ class AnnuityCalculatorRadioComponent {
|
|
|
7205
7205
|
useExisting: forwardRef(() => AnnuityCalculatorRadioComponent),
|
|
7206
7206
|
multi: true
|
|
7207
7207
|
}
|
|
7208
|
-
], usesOnChanges: true, ngImport: i0, template: "\n\n<div class=\"acr-wrapper\">\n\n <!-- Top Header Label -->\n <div class=\"acr-sub-label\" *ngIf=\"field() && field()?.isVisible\">\n {{ field()?.label }}\n <span class=\"error-message\" *ngIf=\"field()?.validators?.isRequired\">*</span>\n </div>\n\n <!-- Radio Option Cards -->\n <div class=\"radio-btn-group1\" *ngIf=\"field()?.configData?.isShowRadioOption\">\n <div\n class=\"annuity-radio-card-gender\"\n *ngFor=\"let data of field()?.options\"\n [class.selected]=\"inputValue === data.value\"\n [class.disable-radio-btn]=\"field()?.isDisable || data.disabled === true || data.disabled === 'true'\"\n (click)=\"(data.disabled === true || data.disabled === 'true') ? null : toggleRadio(data.value, $event)\"\n >\n <!-- Hidden native radio input \u2014 enables proper [id]/[name] binding for form semantics.\n Parent projects can bind (change)=\"myHandler($event)\" on the host component. -->\n <input\n type=\"radio\"\n style=\"position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none;\"\n [id]=\"field()?.fieldName\"\n [name]=\"field()?.fieldNameAttribute\"\n [value]=\"data.value\"\n [checked]=\"inputValue === data.value\"\n (growthRateChange)=\"toggleRadio(data.value, $event)\"\n />\n <span\n class=\"forRadioLabelAnnuityRadio\"\n [ngStyle]=\"{\n '--radio-button-font-weight': field()?.controlStyle?.fontWeight,\n '--radio-button-font-size': field()?.controlStyle?.fontSize,\n '--radio-button-font-color': field()?.controlStyle?.color\n }\"\n >{{ data.label }}</span>\n </div>\n </div>\n\n <!-- Card Container -->\n <div class=\"acr-card-container\" *ngIf=\"field()?.configData?.cardsValue?.length > 0\">\n <div class=\"acr-card-wrap\">\n <div class=\"acr-sub-label\" *ngIf=\"field()?.configData?.subLabel\">\n {{ field()?.configData?.subLabel }}\n </div>\n <div class=\"acr-new-cards-list\">\n <ng-container *ngFor=\"let card of field()?.configData?.cardsValue; let i = index\">\n <div\n class=\"acr-new-card\"\n [class.acr-new-card--selected]=\"selectedCard.value === card.value\"\n [class.acr-new-card--disabled]=\"card.disabled\"\n >\n <!-- Card Header: Radio + Label -->\n <div class=\"acr-new-card-header\" (click)=\"selectCard(card)\">\n <span class=\"acr-new-radio\" [class.acr-new-radio--checked]=\"selectedCard.value === card.value\">\n <span class=\"acr-new-radio-inner\" *ngIf=\"selectedCard.value === card.value\"></span>\n </span>\n <span class=\"acr-new-card-label\">{{ card.label }}</span>\n </div>\n\n <!-- Three-column content row -->\n <div class=\"acr-new-content-row\">\n <!-- Left: amount -->\n <div class=\"acr-new-col-amount\">\n <div class=\"acr-new-main-value\">{{ card.mainValue }} / <span class=\"acr-new-main-frequency\">{{ card.mainFrequencyValue }}</span></div>\n <div class=\"acr-new-sub-value\">{{ card.subValue }} / <span class=\"acr-new-sub-frequency\">{{ card.subFrequencyValue }}</span></div>\n </div>\n <!-- Center: rate -->\n <div class=\"acr-new-col-rate\">\n <div class=\"acr-new-rate-percent\">{{ card.growthRate }}</div>\n <div class=\"acr-new-rate-percent\">Annuity Rate</div>\n </div>\n <!-- Right: guaranteed / variable -->\n <div class=\"acr-new-col-details\">\n <div class=\"acr-new-detail-row\">\n <span class=\"acr-new-detail-key\">Guaranteed :</span>\n <span class=\"acr-new-detail-val\">{{ card.guaranteed }}</span>\n </div>\n <div class=\"acr-new-detail-row\">\n <span class=\"acr-new-detail-key\">Variable :</span>\n <span class=\"acr-new-detail-val\">{{ card.variable }}</span>\n </div>\n </div>\n </div>\n\n <!-- Note outside card border, shown only when selected -->\n </div><!-- /acr-new-card -->\n <div class=\"acr-new-note\" *ngIf=\"selectedCard?.value === card.value && field()?.configData?.infoMessage\">\n <strong>Note:</strong> {{ field()?.configData?.infoMessage }}\n </div>\n </ng-container>\n </div><!-- /acr-new-cards-list -->\n </div><!-- /acr-card-wrap -->\n </div><!-- /acr-card-container -->\n\n</div>\n", styles: [".acr-wrapper{font-family:mulish!important;width:100%;display:flex;flex-direction:column}.forRadioLabelAnnuityRadio{font-size:12px!important;font-weight:400!important;cursor:pointer;color:#444!important;min-width:25%!important;height:fit-content}.required-star{color:red;margin-left:2px}.radio-btn-group1{display:flex;gap:4px;flex-wrap:wrap;padding-right:10px;padding-left:10px;height:42px;max-height:100px!important;line-height:15px}.annuity-radio-card-gender{border:1px solid rgba(218,218,218,1);border-radius:4px;padding:6px 20px;cursor:pointer;display:flex;align-items:center;justify-content:center;flex:1;-webkit-user-select:none;user-select:none;position:relative;overflow:visible}.annuity-radio-card-gender.selected{border-color:#fb0;border-width:1.6px}.annuity-radio-card-gender.selected:after{content:\"\";position:absolute;bottom:-16px;left:50%;transform:translate(-50%);width:0;height:0;z-index:3}.annuity-radio-card-gender.selected:before{content:\"\";position:absolute;bottom:-12px;left:50%;transform:translate(-50%);width:0;height:0;border-left:11px solid transparent;border-right:11px solid transparent;border-top:11px solid #fff;z-index:4}.annuity-radio-card-gender:hover:not(.disable-radio-btn){border-color:#ffd600}.disable-radio-btn{opacity:.55;pointer-events:none;background:#f5f5f5}.acr-card-container{position:relative;width:100%;padding-top:22px;box-sizing:border-box;padding-right:10px;padding-left:10px}.acr-card{background:#fff;border:1px solid rgba(218,218,218,1);border-radius:14px;padding:20px 18px 16px;width:100%;position:relative;overflow:visible;box-sizing:border-box}.acr-card:after{content:\"\";position:absolute;bottom:100%;left:var(--arrow-left, 40px);transform:translate(-50%);transition:left .2s ease;border-width:14px;border-style:solid;border-color:transparent transparent rgba(218,218,218,1) transparent;z-index:2}.acr-card:before{content:\"\";position:absolute;bottom:100%;left:var(--arrow-left, 40px);transform:translate(-50%);transition:left .2s ease;border-width:12px;border-style:solid;border-color:transparent transparent rgba(255,255,255,1) transparent;z-index:3}.acr-sub-label{font-size:10px;font-weight:700;color:#444;padding-right:10px;padding-left:10px;margin-top:10px}.acr-cards-row{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:30px}.acr-card-option{background:#fff;border:2px solid #E0E0E0;border-radius:12px;flex:1 1 0;max-width:none;cursor:pointer;display:flex;flex-direction:column;align-items:flex-start;-webkit-user-select:none;user-select:none;position:relative;overflow:visible;flex:0 0 calc((100% - 28px) / 3);max-width:calc((100% - 28px) / 3);padding:18px 16px;min-width:0}.acr-card-option.selected{border-color:#ffd600;box-shadow:0 0 0 1px #ffd600}.acr-card-option:hover:not(.disabled){border-color:#ffd600}.acr-card-option.disabled{opacity:.5;pointer-events:none}.acr-card-main-value{font-size:16px;font-weight:700;color:#444;margin-bottom:3px;line-height:20px}.acr-card-main-sub-value{font-size:16px;font-weight:400;color:#444;margin-bottom:3px;line-height:20px}.acr-card-sub-value{font-size:10px;font-weight:700;color:#444;line-height:14px}.acr-card-sub-sub-value{font-size:10px;font-weight:400;color:#444;line-height:14px}.acr-card-rate{background:linear-gradient(to right,#fb0,#fff7df,#fb0);color:#444;font-weight:700;font-size:10px;line-height:14px;padding:4px;margin-bottom:10px;margin-top:6px;width:100%;height:22px;text-align:center;box-sizing:border-box}.acr-card-details{width:100%;margin-bottom:14px;background-color:#f5f5f5;padding-left:10px;padding-right:10px;display:grid;grid-template-columns:max-content auto 1fr;column-gap:4px}.acr-card-detail-row{display:contents;font-size:10px;color:#444}.acr-card-detail-row span{font-weight:400;font-size:8px;line-height:14px;color:#444}.acr-card-detail-row strong{font-weight:600;color:#444;font-size:8px;line-height:14px;text-align:right}.acr-card-type{position:absolute;bottom:-14px;left:0;right:0;display:flex;justify-content:center}.acr-card-type-btn{border:none;border-radius:20px;padding:5px 22px;font-size:13px;font-weight:600;cursor:pointer;outline:none}.btn-high{background:#00946f;color:#fff;font-weight:700;font-size:10px;line-height:14px}.btn-medium{background:#66ccb2;color:#444;font-weight:700;font-size:10px;line-height:14px}.btn-low{background:#cef0e8;color:#444;font-weight:700;font-size:10px;line-height:14px}.acr-note{background:#ececec;color:#222;font-size:12px;border-radius:4px;padding:4px 8px;line-height:16px;width:100%;box-sizing:border-box;margin-top:8px;font-weight:400}.acr-note strong{font-weight:700;font-size:12px;line-height:16px;color:#222}.acr-card-wrap{background:#fff;border:1px solid rgba(218,218,218,1);border-radius:14px;width:100%;position:relative;overflow:visible;box-sizing:border-box}.acr-card-wrap:after{content:\"\";position:absolute;bottom:100%;left:var(--arrow-left, 40px);transform:translate(-50%);transition:left .2s ease;border-width:14px;border-style:solid;border-color:transparent transparent rgba(218,218,218,1) transparent;z-index:2}.acr-card-wrap:before{content:\"\";position:absolute;bottom:100%;left:var(--arrow-left, 40px);transform:translate(-50%);transition:left .2s ease;border-width:12px;border-style:solid;border-color:transparent transparent rgba(255,255,255,1) transparent;z-index:3}.acr-new-cards-list{display:flex;flex-direction:column;gap:0;padding:10px}.acr-new-card{border:1.6px solid #DADADA;border-radius:4px;cursor:pointer;-webkit-user-select:none;user-select:none;position:relative;background:#fff;overflow:hidden;box-sizing:border-box;padding:12px 14px 0;margin-bottom:14px}.acr-new-card--selected{border-color:#fb0;border-width:2px}.acr-new-card--disabled{opacity:.5;pointer-events:none}.acr-new-card:hover:not(.acr-new-card--disabled){border-color:#fb0}.acr-new-card-header{display:flex;align-items:center;gap:8px;margin-bottom:10px;cursor:pointer;width:fit-content}.acr-new-radio{width:16px;height:16px;border-radius:50%;border:1.5px solid #B4B4B4;background:#fff;flex-shrink:0;position:relative;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;cursor:pointer}.acr-new-radio--checked{border-color:#f0a000;border-width:2px;background:#fff}.acr-new-radio-inner{width:8px;height:8px;border-radius:50%;background:#f0a000;display:block}.acr-new-card-label{font-size:12px;font-weight:700;color:#222}.acr-new-content-row{display:flex;overflow:hidden;margin:0 8px 8px;gap:4px}.acr-new-col-amount{background:#e6f7f3;padding:8px;display:flex;flex-direction:column;justify-content:center}.acr-new-main-frequency{font-size:16px;font-weight:400}.acr-new-sub-frequency{font-size:10px;font-weight:400}.acr-new-main-value{font-size:16px;font-weight:700;color:#444;line-height:20px}.acr-new-sub-value{font-size:10px;font-weight:400;color:#444;line-height:14px}.acr-new-col-rate{background:#fff1cc;padding:4px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center}.acr-new-rate-percent{font-size:10px;font-weight:700;color:#444;line-height:14px}.acr-new-col-details{border:.5px solid rgba(218,218,218,1);background:#fff;padding:10px 14px 12px;flex:1.3;display:flex;flex-direction:column;justify-content:center;gap:5px}.acr-new-detail-row{display:flex;justify-content:space-between;gap:6px;align-items:baseline}.acr-new-detail-key{font-size:9px;font-weight:400;color:#444;white-space:nowrap}.acr-new-detail-val{font-size:9px;font-weight:700;color:#444;white-space:nowrap}.acr-new-note{background:#ececec;padding:4px 8px;font-size:12px;color:#444;line-height:16px;font-weight:400;margin-top:-14px;margin-bottom:14px}.acr-new-note strong{font-weight:700;font-size:12px;line-height:16px;color:#444}::ng-deep .relationship-radio-group .mat-mdc-radio-button .mat-mdc-radio-touch-target{width:12px!important;height:12px!important}::ng-deep .relationship-radio-group .mat-mdc-radio-button .mdc-form-field{gap:8px;align-items:center;display:flex}::ng-deep .relationship-radio-group .mat-mdc-radio-button .mdc-radio{flex-shrink:0;display:flex;align-items:center;justify-content:center}::ng-deep .relationship-radio-group .mat-mdc-radio-button .mat-ripple,::ng-deep .relationship-radio-group .mat-mdc-radio-button .mdc-radio__ripple{display:none!important}::ng-deep .relationship-radio-group .mdc-form-field>label{padding-left:0!important;cursor:pointer;line-height:12px;display:flex;align-items:center}.relationship-option-text{font-size:12px;font-weight:400;font-family:var(--custom-font-family, \"Mulish\");color:var(--custom-font-color, #444);line-height:14px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: MatRadioModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: FormsModule }] });
|
|
7208
|
+
], usesOnChanges: true, ngImport: i0, template: "\n\n<div class=\"acr-wrapper\">\n\n <!-- Top Header Label -->\n <div class=\"acr-sub-label\" *ngIf=\"field() && field()?.isVisible\">\n {{ field()?.label }}\n <span class=\"error-message\" *ngIf=\"field()?.validators?.isRequired\">*</span>\n </div>\n\n <!-- Radio Option Cards -->\n <div class=\"radio-btn-group1\" *ngIf=\"field()?.configData?.isShowRadioOption\">\n <div\n class=\"annuity-radio-card-gender\"\n *ngFor=\"let data of field()?.options\"\n [class.selected]=\"inputValue === data.value\"\n [class.disable-radio-btn]=\"field()?.isDisable || data.disabled === true || data.disabled === 'true'\"\n (click)=\"(data.disabled === true || data.disabled === 'true') ? null : toggleRadio(data.value, $event)\"\n >\n <!-- Hidden native radio input \u2014 enables proper [id]/[name] binding for form semantics.\n Parent projects can bind (change)=\"myHandler($event)\" on the host component. -->\n <input\n type=\"radio\"\n style=\"position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none;\"\n [id]=\"field()?.fieldName\"\n [name]=\"field()?.fieldNameAttribute\"\n [value]=\"data.value\"\n [checked]=\"inputValue === data.value\"\n (growthRateChange)=\"toggleRadio(data.value, $event)\"\n />\n <span\n class=\"forRadioLabelAnnuityRadio\"\n [ngStyle]=\"{\n '--radio-button-font-weight': field()?.controlStyle?.fontWeight,\n '--radio-button-font-size': field()?.controlStyle?.fontSize,\n '--radio-button-font-color': field()?.controlStyle?.color\n }\"\n >{{ data.label }}</span>\n </div>\n </div>\n\n <!-- Card Container -->\n <div class=\"acr-card-container\" *ngIf=\"field()?.configData?.cardsValue?.length > 0\">\n <div class=\"acr-card-wrap\">\n <div class=\"acr-sub-label\" *ngIf=\"field()?.configData?.subLabel\">\n {{ field()?.configData?.subLabel }}\n </div>\n <div class=\"acr-new-cards-list\">\n <ng-container *ngFor=\"let card of field()?.configData?.cardsValue; let i = index\">\n <div\n class=\"acr-new-card\"\n [class.acr-new-card--selected]=\"selectedCard.value === card.value\"\n [class.acr-new-card--disabled]=\"card.disabled\"\n >\n <!-- Card Header: Radio + Label -->\n <div class=\"acr-new-card-header\" (click)=\"selectCard(card)\">\n <span class=\"acr-new-radio\" [class.acr-new-radio--checked]=\"selectedCard.value === card.value\">\n <span class=\"acr-new-radio-inner\" *ngIf=\"selectedCard.value === card.value\"></span>\n </span>\n <span class=\"acr-new-card-label\">{{ card.label }}</span>\n </div>\n\n <!-- Three-column content row -->\n <div class=\"acr-new-content-row\">\n <!-- Left: amount -->\n <div class=\"acr-new-col-amount\">\n <div class=\"acr-new-main-value\">{{ card.mainValue }} / <span class=\"acr-new-main-frequency\">{{ card.mainFrequencyValue }}</span></div>\n <div class=\"acr-new-sub-value\">{{ card.subValue }} <span class=\"acr-new-sub-frequency\">{{ card.subFrequencyValue }}</span></div>\n </div>\n <!-- Center: rate -->\n <div class=\"acr-new-col-rate\">\n <div class=\"acr-new-rate-percent\">{{ card.growthRate }}</div>\n <div class=\"acr-new-rate-percent\">Annuity Rate</div>\n </div>\n <!-- Right: guaranteed / variable -->\n <div class=\"acr-new-col-details\">\n <div class=\"acr-new-detail-row\">\n <span class=\"acr-new-detail-key\">Guaranteed :</span>\n <span class=\"acr-new-detail-val\">{{ card.guaranteed }}</span>\n </div>\n <div class=\"acr-new-detail-row\">\n <span class=\"acr-new-detail-key\">Variable :</span>\n <span class=\"acr-new-detail-val\">{{ card.variable }}</span>\n </div>\n </div>\n </div>\n\n <!-- Note outside card border, shown only when selected -->\n </div><!-- /acr-new-card -->\n <div class=\"acr-new-note\" *ngIf=\"selectedCard?.value === card.value && field()?.configData?.infoMessage\">\n <strong>Note:</strong> {{ field()?.configData?.infoMessage }}\n </div>\n </ng-container>\n </div><!-- /acr-new-cards-list -->\n </div><!-- /acr-card-wrap -->\n </div><!-- /acr-card-container -->\n\n</div>\n", styles: [".acr-wrapper{font-family:mulish!important;width:100%;display:flex;flex-direction:column}.forRadioLabelAnnuityRadio{font-size:12px!important;font-weight:400!important;cursor:pointer;color:#444!important;min-width:25%!important;height:fit-content}.required-star{color:red;margin-left:2px}.radio-btn-group1{display:flex;gap:4px;flex-wrap:wrap;padding-right:10px;padding-left:10px;height:42px;max-height:100px!important;line-height:15px}.annuity-radio-card-gender{border:1px solid rgba(218,218,218,1);border-radius:4px;padding:6px 20px;cursor:pointer;display:flex;align-items:center;justify-content:center;flex:1;-webkit-user-select:none;user-select:none;position:relative;overflow:visible}.annuity-radio-card-gender.selected{border-color:#fb0;border-width:1.6px}.annuity-radio-card-gender.selected:after{content:\"\";position:absolute;bottom:-16px;left:50%;transform:translate(-50%);width:0;height:0;z-index:3}.annuity-radio-card-gender.selected:before{content:\"\";position:absolute;bottom:-12px;left:50%;transform:translate(-50%);width:0;height:0;border-left:11px solid transparent;border-right:11px solid transparent;border-top:11px solid #fff;z-index:4}.annuity-radio-card-gender:hover:not(.disable-radio-btn){border-color:#ffd600}.disable-radio-btn{opacity:.55;pointer-events:none;background:#f5f5f5}.acr-card-container{position:relative;width:100%;padding-top:22px;box-sizing:border-box;padding-right:10px;padding-left:10px}.acr-card{background:#fff;border:1px solid rgba(218,218,218,1);border-radius:14px;padding:20px 18px 16px;width:100%;position:relative;overflow:visible;box-sizing:border-box}.acr-card:after{content:\"\";position:absolute;bottom:100%;left:var(--arrow-left, 40px);transform:translate(-50%);transition:left .2s ease;border-width:14px;border-style:solid;border-color:transparent transparent rgba(218,218,218,1) transparent;z-index:2}.acr-card:before{content:\"\";position:absolute;bottom:100%;left:var(--arrow-left, 40px);transform:translate(-50%);transition:left .2s ease;border-width:12px;border-style:solid;border-color:transparent transparent rgba(255,255,255,1) transparent;z-index:3}.acr-sub-label{font-size:10px;font-weight:700;color:#444;padding-right:10px;padding-left:10px;margin-top:10px}.acr-cards-row{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:30px}.acr-card-option{background:#fff;border:2px solid #E0E0E0;border-radius:12px;flex:1 1 0;max-width:none;cursor:pointer;display:flex;flex-direction:column;align-items:flex-start;-webkit-user-select:none;user-select:none;position:relative;overflow:visible;flex:0 0 calc((100% - 28px) / 3);max-width:calc((100% - 28px) / 3);padding:18px 16px;min-width:0}.acr-card-option.selected{border-color:#ffd600;box-shadow:0 0 0 1px #ffd600}.acr-card-option:hover:not(.disabled){border-color:#ffd600}.acr-card-option.disabled{opacity:.5;pointer-events:none}.acr-card-main-value{font-size:16px;font-weight:700;color:#444;margin-bottom:3px;line-height:20px}.acr-card-main-sub-value{font-size:16px;font-weight:400;color:#444;margin-bottom:3px;line-height:20px}.acr-card-sub-value{font-size:10px;font-weight:700;color:#444;line-height:14px}.acr-card-sub-sub-value{font-size:10px;font-weight:400;color:#444;line-height:14px}.acr-card-rate{background:linear-gradient(to right,#fb0,#fff7df,#fb0);color:#444;font-weight:700;font-size:10px;line-height:14px;padding:4px;margin-bottom:10px;margin-top:6px;width:100%;height:22px;text-align:center;box-sizing:border-box}.acr-card-details{width:100%;margin-bottom:14px;background-color:#f5f5f5;padding-left:10px;padding-right:10px;display:grid;grid-template-columns:max-content auto 1fr;column-gap:4px}.acr-card-detail-row{display:contents;font-size:10px;color:#444}.acr-card-detail-row span{font-weight:400;font-size:8px;line-height:14px;color:#444}.acr-card-detail-row strong{font-weight:600;color:#444;font-size:8px;line-height:14px;text-align:right}.acr-card-type{position:absolute;bottom:-14px;left:0;right:0;display:flex;justify-content:center}.acr-card-type-btn{border:none;border-radius:20px;padding:5px 22px;font-size:13px;font-weight:600;cursor:pointer;outline:none}.btn-high{background:#00946f;color:#fff;font-weight:700;font-size:10px;line-height:14px}.btn-medium{background:#66ccb2;color:#444;font-weight:700;font-size:10px;line-height:14px}.btn-low{background:#cef0e8;color:#444;font-weight:700;font-size:10px;line-height:14px}.acr-note{background:#ececec;color:#222;font-size:12px;border-radius:4px;padding:4px 8px;line-height:16px;width:100%;box-sizing:border-box;margin-top:8px;font-weight:400}.acr-note strong{font-weight:700;font-size:12px;line-height:16px;color:#222}.acr-card-wrap{background:#fff;border:1px solid rgba(218,218,218,1);border-radius:14px;width:100%;position:relative;overflow:visible;box-sizing:border-box}.acr-card-wrap:after{content:\"\";position:absolute;bottom:100%;left:var(--arrow-left, 40px);transform:translate(-50%);transition:left .2s ease;border-width:14px;border-style:solid;border-color:transparent transparent rgba(218,218,218,1) transparent;z-index:2}.acr-card-wrap:before{content:\"\";position:absolute;bottom:100%;left:var(--arrow-left, 40px);transform:translate(-50%);transition:left .2s ease;border-width:12px;border-style:solid;border-color:transparent transparent rgba(255,255,255,1) transparent;z-index:3}.acr-new-cards-list{display:flex;flex-direction:column;gap:0;padding:10px}.acr-new-card{border:1.6px solid #DADADA;border-radius:4px;cursor:pointer;-webkit-user-select:none;user-select:none;position:relative;background:#fff;overflow:hidden;box-sizing:border-box;padding:12px 14px 0;margin-bottom:14px}.acr-new-card--selected{border-color:#fb0;border-width:2px}.acr-new-card--disabled{opacity:.5;pointer-events:none}.acr-new-card:hover:not(.acr-new-card--disabled){border-color:#fb0}.acr-new-card-header{display:flex;align-items:center;gap:8px;margin-bottom:10px;cursor:pointer;width:fit-content}.acr-new-radio{width:16px;height:16px;border-radius:50%;border:1.5px solid #B4B4B4;background:#fff;flex-shrink:0;position:relative;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;cursor:pointer}.acr-new-radio--checked{border-color:#f0a000;border-width:2px;background:#fff}.acr-new-radio-inner{width:8px;height:8px;border-radius:50%;background:#f0a000;display:block}.acr-new-card-label{font-size:12px;font-weight:700;color:#222}.acr-new-content-row{display:flex;overflow:hidden;margin:0 8px 8px;gap:4px}.acr-new-col-amount{background:#e6f7f3;padding:8px;display:flex;flex-direction:column;justify-content:center}.acr-new-main-frequency{font-size:16px;font-weight:400}.acr-new-sub-frequency{font-size:10px;font-weight:400}.acr-new-main-value{font-size:16px;font-weight:700;color:#444;line-height:20px}.acr-new-sub-value{font-size:10px;font-weight:400;color:#444;line-height:14px}.acr-new-col-rate{background:#fff1cc;padding:4px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center}.acr-new-rate-percent{font-size:10px;font-weight:700;color:#444;line-height:14px}.acr-new-col-details{border:.5px solid rgba(218,218,218,1);background:#fff;padding:10px 14px 12px;flex:1.3;display:flex;flex-direction:column;justify-content:center;gap:5px}.acr-new-detail-row{display:flex;justify-content:space-between;gap:6px;align-items:baseline}.acr-new-detail-key{font-size:9px;font-weight:400;color:#444;white-space:nowrap}.acr-new-detail-val{font-size:9px;font-weight:700;color:#444;white-space:nowrap}.acr-new-note{background:#ececec;padding:4px 8px;font-size:12px;color:#444;line-height:16px;font-weight:400;margin-top:-14px;margin-bottom:14px}.acr-new-note strong{font-weight:700;font-size:12px;line-height:16px;color:#444}::ng-deep .relationship-radio-group .mat-mdc-radio-button .mat-mdc-radio-touch-target{width:12px!important;height:12px!important}::ng-deep .relationship-radio-group .mat-mdc-radio-button .mdc-form-field{gap:8px;align-items:center;display:flex}::ng-deep .relationship-radio-group .mat-mdc-radio-button .mdc-radio{flex-shrink:0;display:flex;align-items:center;justify-content:center}::ng-deep .relationship-radio-group .mat-mdc-radio-button .mat-ripple,::ng-deep .relationship-radio-group .mat-mdc-radio-button .mdc-radio__ripple{display:none!important}::ng-deep .relationship-radio-group .mdc-form-field>label{padding-left:0!important;cursor:pointer;line-height:12px;display:flex;align-items:center}.relationship-option-text{font-size:12px;font-weight:400;font-family:var(--custom-font-family, \"Mulish\");color:var(--custom-font-color, #444);line-height:14px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: MatRadioModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: FormsModule }] });
|
|
7209
7209
|
}
|
|
7210
7210
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AnnuityCalculatorRadioComponent, decorators: [{
|
|
7211
7211
|
type: Component,
|
|
@@ -7216,7 +7216,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
7216
7216
|
useExisting: forwardRef(() => AnnuityCalculatorRadioComponent),
|
|
7217
7217
|
multi: true
|
|
7218
7218
|
}
|
|
7219
|
-
], template: "\n\n<div class=\"acr-wrapper\">\n\n <!-- Top Header Label -->\n <div class=\"acr-sub-label\" *ngIf=\"field() && field()?.isVisible\">\n {{ field()?.label }}\n <span class=\"error-message\" *ngIf=\"field()?.validators?.isRequired\">*</span>\n </div>\n\n <!-- Radio Option Cards -->\n <div class=\"radio-btn-group1\" *ngIf=\"field()?.configData?.isShowRadioOption\">\n <div\n class=\"annuity-radio-card-gender\"\n *ngFor=\"let data of field()?.options\"\n [class.selected]=\"inputValue === data.value\"\n [class.disable-radio-btn]=\"field()?.isDisable || data.disabled === true || data.disabled === 'true'\"\n (click)=\"(data.disabled === true || data.disabled === 'true') ? null : toggleRadio(data.value, $event)\"\n >\n <!-- Hidden native radio input \u2014 enables proper [id]/[name] binding for form semantics.\n Parent projects can bind (change)=\"myHandler($event)\" on the host component. -->\n <input\n type=\"radio\"\n style=\"position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none;\"\n [id]=\"field()?.fieldName\"\n [name]=\"field()?.fieldNameAttribute\"\n [value]=\"data.value\"\n [checked]=\"inputValue === data.value\"\n (growthRateChange)=\"toggleRadio(data.value, $event)\"\n />\n <span\n class=\"forRadioLabelAnnuityRadio\"\n [ngStyle]=\"{\n '--radio-button-font-weight': field()?.controlStyle?.fontWeight,\n '--radio-button-font-size': field()?.controlStyle?.fontSize,\n '--radio-button-font-color': field()?.controlStyle?.color\n }\"\n >{{ data.label }}</span>\n </div>\n </div>\n\n <!-- Card Container -->\n <div class=\"acr-card-container\" *ngIf=\"field()?.configData?.cardsValue?.length > 0\">\n <div class=\"acr-card-wrap\">\n <div class=\"acr-sub-label\" *ngIf=\"field()?.configData?.subLabel\">\n {{ field()?.configData?.subLabel }}\n </div>\n <div class=\"acr-new-cards-list\">\n <ng-container *ngFor=\"let card of field()?.configData?.cardsValue; let i = index\">\n <div\n class=\"acr-new-card\"\n [class.acr-new-card--selected]=\"selectedCard.value === card.value\"\n [class.acr-new-card--disabled]=\"card.disabled\"\n >\n <!-- Card Header: Radio + Label -->\n <div class=\"acr-new-card-header\" (click)=\"selectCard(card)\">\n <span class=\"acr-new-radio\" [class.acr-new-radio--checked]=\"selectedCard.value === card.value\">\n <span class=\"acr-new-radio-inner\" *ngIf=\"selectedCard.value === card.value\"></span>\n </span>\n <span class=\"acr-new-card-label\">{{ card.label }}</span>\n </div>\n\n <!-- Three-column content row -->\n <div class=\"acr-new-content-row\">\n <!-- Left: amount -->\n <div class=\"acr-new-col-amount\">\n <div class=\"acr-new-main-value\">{{ card.mainValue }} / <span class=\"acr-new-main-frequency\">{{ card.mainFrequencyValue }}</span></div>\n <div class=\"acr-new-sub-value\">{{ card.subValue }} / <span class=\"acr-new-sub-frequency\">{{ card.subFrequencyValue }}</span></div>\n </div>\n <!-- Center: rate -->\n <div class=\"acr-new-col-rate\">\n <div class=\"acr-new-rate-percent\">{{ card.growthRate }}</div>\n <div class=\"acr-new-rate-percent\">Annuity Rate</div>\n </div>\n <!-- Right: guaranteed / variable -->\n <div class=\"acr-new-col-details\">\n <div class=\"acr-new-detail-row\">\n <span class=\"acr-new-detail-key\">Guaranteed :</span>\n <span class=\"acr-new-detail-val\">{{ card.guaranteed }}</span>\n </div>\n <div class=\"acr-new-detail-row\">\n <span class=\"acr-new-detail-key\">Variable :</span>\n <span class=\"acr-new-detail-val\">{{ card.variable }}</span>\n </div>\n </div>\n </div>\n\n <!-- Note outside card border, shown only when selected -->\n </div><!-- /acr-new-card -->\n <div class=\"acr-new-note\" *ngIf=\"selectedCard?.value === card.value && field()?.configData?.infoMessage\">\n <strong>Note:</strong> {{ field()?.configData?.infoMessage }}\n </div>\n </ng-container>\n </div><!-- /acr-new-cards-list -->\n </div><!-- /acr-card-wrap -->\n </div><!-- /acr-card-container -->\n\n</div>\n", styles: [".acr-wrapper{font-family:mulish!important;width:100%;display:flex;flex-direction:column}.forRadioLabelAnnuityRadio{font-size:12px!important;font-weight:400!important;cursor:pointer;color:#444!important;min-width:25%!important;height:fit-content}.required-star{color:red;margin-left:2px}.radio-btn-group1{display:flex;gap:4px;flex-wrap:wrap;padding-right:10px;padding-left:10px;height:42px;max-height:100px!important;line-height:15px}.annuity-radio-card-gender{border:1px solid rgba(218,218,218,1);border-radius:4px;padding:6px 20px;cursor:pointer;display:flex;align-items:center;justify-content:center;flex:1;-webkit-user-select:none;user-select:none;position:relative;overflow:visible}.annuity-radio-card-gender.selected{border-color:#fb0;border-width:1.6px}.annuity-radio-card-gender.selected:after{content:\"\";position:absolute;bottom:-16px;left:50%;transform:translate(-50%);width:0;height:0;z-index:3}.annuity-radio-card-gender.selected:before{content:\"\";position:absolute;bottom:-12px;left:50%;transform:translate(-50%);width:0;height:0;border-left:11px solid transparent;border-right:11px solid transparent;border-top:11px solid #fff;z-index:4}.annuity-radio-card-gender:hover:not(.disable-radio-btn){border-color:#ffd600}.disable-radio-btn{opacity:.55;pointer-events:none;background:#f5f5f5}.acr-card-container{position:relative;width:100%;padding-top:22px;box-sizing:border-box;padding-right:10px;padding-left:10px}.acr-card{background:#fff;border:1px solid rgba(218,218,218,1);border-radius:14px;padding:20px 18px 16px;width:100%;position:relative;overflow:visible;box-sizing:border-box}.acr-card:after{content:\"\";position:absolute;bottom:100%;left:var(--arrow-left, 40px);transform:translate(-50%);transition:left .2s ease;border-width:14px;border-style:solid;border-color:transparent transparent rgba(218,218,218,1) transparent;z-index:2}.acr-card:before{content:\"\";position:absolute;bottom:100%;left:var(--arrow-left, 40px);transform:translate(-50%);transition:left .2s ease;border-width:12px;border-style:solid;border-color:transparent transparent rgba(255,255,255,1) transparent;z-index:3}.acr-sub-label{font-size:10px;font-weight:700;color:#444;padding-right:10px;padding-left:10px;margin-top:10px}.acr-cards-row{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:30px}.acr-card-option{background:#fff;border:2px solid #E0E0E0;border-radius:12px;flex:1 1 0;max-width:none;cursor:pointer;display:flex;flex-direction:column;align-items:flex-start;-webkit-user-select:none;user-select:none;position:relative;overflow:visible;flex:0 0 calc((100% - 28px) / 3);max-width:calc((100% - 28px) / 3);padding:18px 16px;min-width:0}.acr-card-option.selected{border-color:#ffd600;box-shadow:0 0 0 1px #ffd600}.acr-card-option:hover:not(.disabled){border-color:#ffd600}.acr-card-option.disabled{opacity:.5;pointer-events:none}.acr-card-main-value{font-size:16px;font-weight:700;color:#444;margin-bottom:3px;line-height:20px}.acr-card-main-sub-value{font-size:16px;font-weight:400;color:#444;margin-bottom:3px;line-height:20px}.acr-card-sub-value{font-size:10px;font-weight:700;color:#444;line-height:14px}.acr-card-sub-sub-value{font-size:10px;font-weight:400;color:#444;line-height:14px}.acr-card-rate{background:linear-gradient(to right,#fb0,#fff7df,#fb0);color:#444;font-weight:700;font-size:10px;line-height:14px;padding:4px;margin-bottom:10px;margin-top:6px;width:100%;height:22px;text-align:center;box-sizing:border-box}.acr-card-details{width:100%;margin-bottom:14px;background-color:#f5f5f5;padding-left:10px;padding-right:10px;display:grid;grid-template-columns:max-content auto 1fr;column-gap:4px}.acr-card-detail-row{display:contents;font-size:10px;color:#444}.acr-card-detail-row span{font-weight:400;font-size:8px;line-height:14px;color:#444}.acr-card-detail-row strong{font-weight:600;color:#444;font-size:8px;line-height:14px;text-align:right}.acr-card-type{position:absolute;bottom:-14px;left:0;right:0;display:flex;justify-content:center}.acr-card-type-btn{border:none;border-radius:20px;padding:5px 22px;font-size:13px;font-weight:600;cursor:pointer;outline:none}.btn-high{background:#00946f;color:#fff;font-weight:700;font-size:10px;line-height:14px}.btn-medium{background:#66ccb2;color:#444;font-weight:700;font-size:10px;line-height:14px}.btn-low{background:#cef0e8;color:#444;font-weight:700;font-size:10px;line-height:14px}.acr-note{background:#ececec;color:#222;font-size:12px;border-radius:4px;padding:4px 8px;line-height:16px;width:100%;box-sizing:border-box;margin-top:8px;font-weight:400}.acr-note strong{font-weight:700;font-size:12px;line-height:16px;color:#222}.acr-card-wrap{background:#fff;border:1px solid rgba(218,218,218,1);border-radius:14px;width:100%;position:relative;overflow:visible;box-sizing:border-box}.acr-card-wrap:after{content:\"\";position:absolute;bottom:100%;left:var(--arrow-left, 40px);transform:translate(-50%);transition:left .2s ease;border-width:14px;border-style:solid;border-color:transparent transparent rgba(218,218,218,1) transparent;z-index:2}.acr-card-wrap:before{content:\"\";position:absolute;bottom:100%;left:var(--arrow-left, 40px);transform:translate(-50%);transition:left .2s ease;border-width:12px;border-style:solid;border-color:transparent transparent rgba(255,255,255,1) transparent;z-index:3}.acr-new-cards-list{display:flex;flex-direction:column;gap:0;padding:10px}.acr-new-card{border:1.6px solid #DADADA;border-radius:4px;cursor:pointer;-webkit-user-select:none;user-select:none;position:relative;background:#fff;overflow:hidden;box-sizing:border-box;padding:12px 14px 0;margin-bottom:14px}.acr-new-card--selected{border-color:#fb0;border-width:2px}.acr-new-card--disabled{opacity:.5;pointer-events:none}.acr-new-card:hover:not(.acr-new-card--disabled){border-color:#fb0}.acr-new-card-header{display:flex;align-items:center;gap:8px;margin-bottom:10px;cursor:pointer;width:fit-content}.acr-new-radio{width:16px;height:16px;border-radius:50%;border:1.5px solid #B4B4B4;background:#fff;flex-shrink:0;position:relative;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;cursor:pointer}.acr-new-radio--checked{border-color:#f0a000;border-width:2px;background:#fff}.acr-new-radio-inner{width:8px;height:8px;border-radius:50%;background:#f0a000;display:block}.acr-new-card-label{font-size:12px;font-weight:700;color:#222}.acr-new-content-row{display:flex;overflow:hidden;margin:0 8px 8px;gap:4px}.acr-new-col-amount{background:#e6f7f3;padding:8px;display:flex;flex-direction:column;justify-content:center}.acr-new-main-frequency{font-size:16px;font-weight:400}.acr-new-sub-frequency{font-size:10px;font-weight:400}.acr-new-main-value{font-size:16px;font-weight:700;color:#444;line-height:20px}.acr-new-sub-value{font-size:10px;font-weight:400;color:#444;line-height:14px}.acr-new-col-rate{background:#fff1cc;padding:4px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center}.acr-new-rate-percent{font-size:10px;font-weight:700;color:#444;line-height:14px}.acr-new-col-details{border:.5px solid rgba(218,218,218,1);background:#fff;padding:10px 14px 12px;flex:1.3;display:flex;flex-direction:column;justify-content:center;gap:5px}.acr-new-detail-row{display:flex;justify-content:space-between;gap:6px;align-items:baseline}.acr-new-detail-key{font-size:9px;font-weight:400;color:#444;white-space:nowrap}.acr-new-detail-val{font-size:9px;font-weight:700;color:#444;white-space:nowrap}.acr-new-note{background:#ececec;padding:4px 8px;font-size:12px;color:#444;line-height:16px;font-weight:400;margin-top:-14px;margin-bottom:14px}.acr-new-note strong{font-weight:700;font-size:12px;line-height:16px;color:#444}::ng-deep .relationship-radio-group .mat-mdc-radio-button .mat-mdc-radio-touch-target{width:12px!important;height:12px!important}::ng-deep .relationship-radio-group .mat-mdc-radio-button .mdc-form-field{gap:8px;align-items:center;display:flex}::ng-deep .relationship-radio-group .mat-mdc-radio-button .mdc-radio{flex-shrink:0;display:flex;align-items:center;justify-content:center}::ng-deep .relationship-radio-group .mat-mdc-radio-button .mat-ripple,::ng-deep .relationship-radio-group .mat-mdc-radio-button .mdc-radio__ripple{display:none!important}::ng-deep .relationship-radio-group .mdc-form-field>label{padding-left:0!important;cursor:pointer;line-height:12px;display:flex;align-items:center}.relationship-option-text{font-size:12px;font-weight:400;font-family:var(--custom-font-family, \"Mulish\");color:var(--custom-font-color, #444);line-height:14px}\n"] }]
|
|
7219
|
+
], template: "\n\n<div class=\"acr-wrapper\">\n\n <!-- Top Header Label -->\n <div class=\"acr-sub-label\" *ngIf=\"field() && field()?.isVisible\">\n {{ field()?.label }}\n <span class=\"error-message\" *ngIf=\"field()?.validators?.isRequired\">*</span>\n </div>\n\n <!-- Radio Option Cards -->\n <div class=\"radio-btn-group1\" *ngIf=\"field()?.configData?.isShowRadioOption\">\n <div\n class=\"annuity-radio-card-gender\"\n *ngFor=\"let data of field()?.options\"\n [class.selected]=\"inputValue === data.value\"\n [class.disable-radio-btn]=\"field()?.isDisable || data.disabled === true || data.disabled === 'true'\"\n (click)=\"(data.disabled === true || data.disabled === 'true') ? null : toggleRadio(data.value, $event)\"\n >\n <!-- Hidden native radio input \u2014 enables proper [id]/[name] binding for form semantics.\n Parent projects can bind (change)=\"myHandler($event)\" on the host component. -->\n <input\n type=\"radio\"\n style=\"position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none;\"\n [id]=\"field()?.fieldName\"\n [name]=\"field()?.fieldNameAttribute\"\n [value]=\"data.value\"\n [checked]=\"inputValue === data.value\"\n (growthRateChange)=\"toggleRadio(data.value, $event)\"\n />\n <span\n class=\"forRadioLabelAnnuityRadio\"\n [ngStyle]=\"{\n '--radio-button-font-weight': field()?.controlStyle?.fontWeight,\n '--radio-button-font-size': field()?.controlStyle?.fontSize,\n '--radio-button-font-color': field()?.controlStyle?.color\n }\"\n >{{ data.label }}</span>\n </div>\n </div>\n\n <!-- Card Container -->\n <div class=\"acr-card-container\" *ngIf=\"field()?.configData?.cardsValue?.length > 0\">\n <div class=\"acr-card-wrap\">\n <div class=\"acr-sub-label\" *ngIf=\"field()?.configData?.subLabel\">\n {{ field()?.configData?.subLabel }}\n </div>\n <div class=\"acr-new-cards-list\">\n <ng-container *ngFor=\"let card of field()?.configData?.cardsValue; let i = index\">\n <div\n class=\"acr-new-card\"\n [class.acr-new-card--selected]=\"selectedCard.value === card.value\"\n [class.acr-new-card--disabled]=\"card.disabled\"\n >\n <!-- Card Header: Radio + Label -->\n <div class=\"acr-new-card-header\" (click)=\"selectCard(card)\">\n <span class=\"acr-new-radio\" [class.acr-new-radio--checked]=\"selectedCard.value === card.value\">\n <span class=\"acr-new-radio-inner\" *ngIf=\"selectedCard.value === card.value\"></span>\n </span>\n <span class=\"acr-new-card-label\">{{ card.label }}</span>\n </div>\n\n <!-- Three-column content row -->\n <div class=\"acr-new-content-row\">\n <!-- Left: amount -->\n <div class=\"acr-new-col-amount\">\n <div class=\"acr-new-main-value\">{{ card.mainValue }} / <span class=\"acr-new-main-frequency\">{{ card.mainFrequencyValue }}</span></div>\n <div class=\"acr-new-sub-value\">{{ card.subValue }} <span class=\"acr-new-sub-frequency\">{{ card.subFrequencyValue }}</span></div>\n </div>\n <!-- Center: rate -->\n <div class=\"acr-new-col-rate\">\n <div class=\"acr-new-rate-percent\">{{ card.growthRate }}</div>\n <div class=\"acr-new-rate-percent\">Annuity Rate</div>\n </div>\n <!-- Right: guaranteed / variable -->\n <div class=\"acr-new-col-details\">\n <div class=\"acr-new-detail-row\">\n <span class=\"acr-new-detail-key\">Guaranteed :</span>\n <span class=\"acr-new-detail-val\">{{ card.guaranteed }}</span>\n </div>\n <div class=\"acr-new-detail-row\">\n <span class=\"acr-new-detail-key\">Variable :</span>\n <span class=\"acr-new-detail-val\">{{ card.variable }}</span>\n </div>\n </div>\n </div>\n\n <!-- Note outside card border, shown only when selected -->\n </div><!-- /acr-new-card -->\n <div class=\"acr-new-note\" *ngIf=\"selectedCard?.value === card.value && field()?.configData?.infoMessage\">\n <strong>Note:</strong> {{ field()?.configData?.infoMessage }}\n </div>\n </ng-container>\n </div><!-- /acr-new-cards-list -->\n </div><!-- /acr-card-wrap -->\n </div><!-- /acr-card-container -->\n\n</div>\n", styles: [".acr-wrapper{font-family:mulish!important;width:100%;display:flex;flex-direction:column}.forRadioLabelAnnuityRadio{font-size:12px!important;font-weight:400!important;cursor:pointer;color:#444!important;min-width:25%!important;height:fit-content}.required-star{color:red;margin-left:2px}.radio-btn-group1{display:flex;gap:4px;flex-wrap:wrap;padding-right:10px;padding-left:10px;height:42px;max-height:100px!important;line-height:15px}.annuity-radio-card-gender{border:1px solid rgba(218,218,218,1);border-radius:4px;padding:6px 20px;cursor:pointer;display:flex;align-items:center;justify-content:center;flex:1;-webkit-user-select:none;user-select:none;position:relative;overflow:visible}.annuity-radio-card-gender.selected{border-color:#fb0;border-width:1.6px}.annuity-radio-card-gender.selected:after{content:\"\";position:absolute;bottom:-16px;left:50%;transform:translate(-50%);width:0;height:0;z-index:3}.annuity-radio-card-gender.selected:before{content:\"\";position:absolute;bottom:-12px;left:50%;transform:translate(-50%);width:0;height:0;border-left:11px solid transparent;border-right:11px solid transparent;border-top:11px solid #fff;z-index:4}.annuity-radio-card-gender:hover:not(.disable-radio-btn){border-color:#ffd600}.disable-radio-btn{opacity:.55;pointer-events:none;background:#f5f5f5}.acr-card-container{position:relative;width:100%;padding-top:22px;box-sizing:border-box;padding-right:10px;padding-left:10px}.acr-card{background:#fff;border:1px solid rgba(218,218,218,1);border-radius:14px;padding:20px 18px 16px;width:100%;position:relative;overflow:visible;box-sizing:border-box}.acr-card:after{content:\"\";position:absolute;bottom:100%;left:var(--arrow-left, 40px);transform:translate(-50%);transition:left .2s ease;border-width:14px;border-style:solid;border-color:transparent transparent rgba(218,218,218,1) transparent;z-index:2}.acr-card:before{content:\"\";position:absolute;bottom:100%;left:var(--arrow-left, 40px);transform:translate(-50%);transition:left .2s ease;border-width:12px;border-style:solid;border-color:transparent transparent rgba(255,255,255,1) transparent;z-index:3}.acr-sub-label{font-size:10px;font-weight:700;color:#444;padding-right:10px;padding-left:10px;margin-top:10px}.acr-cards-row{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:30px}.acr-card-option{background:#fff;border:2px solid #E0E0E0;border-radius:12px;flex:1 1 0;max-width:none;cursor:pointer;display:flex;flex-direction:column;align-items:flex-start;-webkit-user-select:none;user-select:none;position:relative;overflow:visible;flex:0 0 calc((100% - 28px) / 3);max-width:calc((100% - 28px) / 3);padding:18px 16px;min-width:0}.acr-card-option.selected{border-color:#ffd600;box-shadow:0 0 0 1px #ffd600}.acr-card-option:hover:not(.disabled){border-color:#ffd600}.acr-card-option.disabled{opacity:.5;pointer-events:none}.acr-card-main-value{font-size:16px;font-weight:700;color:#444;margin-bottom:3px;line-height:20px}.acr-card-main-sub-value{font-size:16px;font-weight:400;color:#444;margin-bottom:3px;line-height:20px}.acr-card-sub-value{font-size:10px;font-weight:700;color:#444;line-height:14px}.acr-card-sub-sub-value{font-size:10px;font-weight:400;color:#444;line-height:14px}.acr-card-rate{background:linear-gradient(to right,#fb0,#fff7df,#fb0);color:#444;font-weight:700;font-size:10px;line-height:14px;padding:4px;margin-bottom:10px;margin-top:6px;width:100%;height:22px;text-align:center;box-sizing:border-box}.acr-card-details{width:100%;margin-bottom:14px;background-color:#f5f5f5;padding-left:10px;padding-right:10px;display:grid;grid-template-columns:max-content auto 1fr;column-gap:4px}.acr-card-detail-row{display:contents;font-size:10px;color:#444}.acr-card-detail-row span{font-weight:400;font-size:8px;line-height:14px;color:#444}.acr-card-detail-row strong{font-weight:600;color:#444;font-size:8px;line-height:14px;text-align:right}.acr-card-type{position:absolute;bottom:-14px;left:0;right:0;display:flex;justify-content:center}.acr-card-type-btn{border:none;border-radius:20px;padding:5px 22px;font-size:13px;font-weight:600;cursor:pointer;outline:none}.btn-high{background:#00946f;color:#fff;font-weight:700;font-size:10px;line-height:14px}.btn-medium{background:#66ccb2;color:#444;font-weight:700;font-size:10px;line-height:14px}.btn-low{background:#cef0e8;color:#444;font-weight:700;font-size:10px;line-height:14px}.acr-note{background:#ececec;color:#222;font-size:12px;border-radius:4px;padding:4px 8px;line-height:16px;width:100%;box-sizing:border-box;margin-top:8px;font-weight:400}.acr-note strong{font-weight:700;font-size:12px;line-height:16px;color:#222}.acr-card-wrap{background:#fff;border:1px solid rgba(218,218,218,1);border-radius:14px;width:100%;position:relative;overflow:visible;box-sizing:border-box}.acr-card-wrap:after{content:\"\";position:absolute;bottom:100%;left:var(--arrow-left, 40px);transform:translate(-50%);transition:left .2s ease;border-width:14px;border-style:solid;border-color:transparent transparent rgba(218,218,218,1) transparent;z-index:2}.acr-card-wrap:before{content:\"\";position:absolute;bottom:100%;left:var(--arrow-left, 40px);transform:translate(-50%);transition:left .2s ease;border-width:12px;border-style:solid;border-color:transparent transparent rgba(255,255,255,1) transparent;z-index:3}.acr-new-cards-list{display:flex;flex-direction:column;gap:0;padding:10px}.acr-new-card{border:1.6px solid #DADADA;border-radius:4px;cursor:pointer;-webkit-user-select:none;user-select:none;position:relative;background:#fff;overflow:hidden;box-sizing:border-box;padding:12px 14px 0;margin-bottom:14px}.acr-new-card--selected{border-color:#fb0;border-width:2px}.acr-new-card--disabled{opacity:.5;pointer-events:none}.acr-new-card:hover:not(.acr-new-card--disabled){border-color:#fb0}.acr-new-card-header{display:flex;align-items:center;gap:8px;margin-bottom:10px;cursor:pointer;width:fit-content}.acr-new-radio{width:16px;height:16px;border-radius:50%;border:1.5px solid #B4B4B4;background:#fff;flex-shrink:0;position:relative;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;cursor:pointer}.acr-new-radio--checked{border-color:#f0a000;border-width:2px;background:#fff}.acr-new-radio-inner{width:8px;height:8px;border-radius:50%;background:#f0a000;display:block}.acr-new-card-label{font-size:12px;font-weight:700;color:#222}.acr-new-content-row{display:flex;overflow:hidden;margin:0 8px 8px;gap:4px}.acr-new-col-amount{background:#e6f7f3;padding:8px;display:flex;flex-direction:column;justify-content:center}.acr-new-main-frequency{font-size:16px;font-weight:400}.acr-new-sub-frequency{font-size:10px;font-weight:400}.acr-new-main-value{font-size:16px;font-weight:700;color:#444;line-height:20px}.acr-new-sub-value{font-size:10px;font-weight:400;color:#444;line-height:14px}.acr-new-col-rate{background:#fff1cc;padding:4px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center}.acr-new-rate-percent{font-size:10px;font-weight:700;color:#444;line-height:14px}.acr-new-col-details{border:.5px solid rgba(218,218,218,1);background:#fff;padding:10px 14px 12px;flex:1.3;display:flex;flex-direction:column;justify-content:center;gap:5px}.acr-new-detail-row{display:flex;justify-content:space-between;gap:6px;align-items:baseline}.acr-new-detail-key{font-size:9px;font-weight:400;color:#444;white-space:nowrap}.acr-new-detail-val{font-size:9px;font-weight:700;color:#444;white-space:nowrap}.acr-new-note{background:#ececec;padding:4px 8px;font-size:12px;color:#444;line-height:16px;font-weight:400;margin-top:-14px;margin-bottom:14px}.acr-new-note strong{font-weight:700;font-size:12px;line-height:16px;color:#444}::ng-deep .relationship-radio-group .mat-mdc-radio-button .mat-mdc-radio-touch-target{width:12px!important;height:12px!important}::ng-deep .relationship-radio-group .mat-mdc-radio-button .mdc-form-field{gap:8px;align-items:center;display:flex}::ng-deep .relationship-radio-group .mat-mdc-radio-button .mdc-radio{flex-shrink:0;display:flex;align-items:center;justify-content:center}::ng-deep .relationship-radio-group .mat-mdc-radio-button .mat-ripple,::ng-deep .relationship-radio-group .mat-mdc-radio-button .mdc-radio__ripple{display:none!important}::ng-deep .relationship-radio-group .mdc-form-field>label{padding-left:0!important;cursor:pointer;line-height:12px;display:flex;align-items:center}.relationship-option-text{font-size:12px;font-weight:400;font-family:var(--custom-font-family, \"Mulish\");color:var(--custom-font-color, #444);line-height:14px}\n"] }]
|
|
7220
7220
|
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { preSelectConfig: [{
|
|
7221
7221
|
type: Input
|
|
7222
7222
|
}], change: [{
|
|
@@ -8539,7 +8539,7 @@ class AnnuityPremiumCalculatorComponent {
|
|
|
8539
8539
|
return str ? str + ' Only' : '';
|
|
8540
8540
|
}
|
|
8541
8541
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AnnuityPremiumCalculatorComponent, deps: [{ token: MasterControlService }], target: i0.ɵɵFactoryTarget.Component });
|
|
8542
|
-
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 }, triggerValidation: { classPropertyName: "triggerValidation", publicName: "triggerValidation", isSignal: false, isRequired: false, 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", onGrowthRateOptionSelected: "onGrowthRateOptionSelected" }, viewQueries: [{ propertyName: "annuityRadioRef", first: true, predicate: AnnuityCalculatorRadioComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"card px-3\" style=\"padding: 16px;border: none !important;box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.12) !important;\">\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 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=\"d-flex flex-column p-0 gap-2\" style=\"width: 45%;\">\n <lib-amount-textbox [field]=\"annuityPremiumObj\" [(ngModel)]=\"annuityPremium['textValue']\"\n (ngModelChange)=\"onAnnuityPremiumValueChange($event)\" />\n <div class=\"error-message\" *ngIf=\"validations.ispremiumEntry\">\n Please enter Premium amount\n </div>\n <div class=\"annuity-mat-hint\" *ngIf=\"annuityPremiumObj?.configData?.numbertoword\">{{annuityPremiumObj?.configData?.numbertoword}}</div>\n\n <lib-select [field]=\"annuitypayoutObj\" [(ngModel)]=\"annuityPremium['selectValue']\"\n (ngModelChange)=\"onAnnuityPremiumValueChange($event)\" />\n <div>\n <lib-toggle [field]=\"enableAutoDebitObj\" [(ngModel)]=\"isEnableAutoDebit\"\n (ngModelChange)=\"onEnableAutoDebitValueChange($event)\" />\n </div>\n </div>\n <div class=\"d-flex justify-content-center align-items-center\"\n style=\"width: 10%; display: flex; align-items: flex-end; transform: translate(0px, 6px); position: relative; height: auto; min-height: 100%;\">\n <!-- Top line -->\n <div style=\"position: absolute; left: 50%; transform: translateX(-50%); width: 1px; height: calc(50% + 19px); top: -30px; background: rgba(221, 221, 221, 1); pointer-events: none;\"></div>\n <!-- Bottom line -->\n <div style=\"position: absolute; left: 50%; transform: translateX(-50%); width: 1px; height: calc(50% + 24px); bottom: -37px; background: rgba(221, 221, 221, 1); pointer-events: none;\"></div>\n <lib-icon-button [field]=\"interchangeButtonObj\" />\n </div>\n <div class=\"d-flex flex-column p-0 gap-2\" style=\"width: 45%;\">\n <lib-amount-textbox [field]=\"minimumAnnuityPayoutObj\" [(ngModel)]=\"minumumAnnuityPayout['textValue']\"\n (ngModelChange)=\"onMinPremiumValueChange($event)\" *ngIf=\"minimumAnnuityPayoutObj.isVisible;\"/>\n <div class=\"annuity-mat-hint\" *ngIf=\"minimumAnnuityPayoutObj.isVisible && minimumAnnuityPayoutObj?.configData?.numbertoword\">{{minimumAnnuityPayoutObj?.configData?.numbertoword}}</div>\n <lib-select [field]=\"minimumAnnuityPayoutfrequencyObj\" [(ngModel)]=\"minumumAnnuityPayout['selectValue']\"\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 <!-- <ng-template #emptyRightCol>\n <div class=\"col-5 col-lg-5 p-0\"></div>\n </ng-template> -->\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\"><img src=\"https://cdn.godigit.com/digitPlusAssets/streamline_graph-arrow-increase-remix.svg\"/></span>\n </div>\n </div>\n <lib-button [field]=\"recalculateButton\" (click)=\"calculateButtonClicked()\" />\n\n <!-- //digit boss updated design -->\n <div class=\"col-12 mt-3\" style=\"\n justify-content: center;\n flex-direction: row;\n display: flex;\" *ngIf=\"!minimumAnnuityPayoutObj.isVisible\">\n <div class=\"col-12 col-lg-12 d-flex flex-column justify-content-center padding-left-0 padding-right-0\">\n <div class=\"realistic-picture-card\">\n <div class=\"realistic-picture-header\">\n <img *ngIf=\"digitBossSwitch?.icon\" [src]=\"digitBossSwitch?.icon\" style=\"width:12px;height:12px;object-fit:contain;flex-shrink:0;\" />\n <span class=\"realistic-picture-label\">Realistic Picture:</span>\n </div>\n <span class=\"realistic-picture-text\">{{digitBossSwitch?.digitBossText}} <span class=\"realistic-picture-highlight\">{{digitBossSwitch?.digitBossValue}}</span></span>\n </div>\n </div>\n</div>\n\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 >\n <div class=\"mx-4\" *ngIf=\"recalculateSubTextObj?.isVisible\"><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=\"growthRateObj.isVisible\">\n <lib-annuity-calculator-radio\n [field]=\"growthRateObj\"\n [preSelectConfig]=\"growthRatePreSelectConfig\"\n [(ngModel)]=\"growthRateOption\"\n (change)=\"onGrowthRateRadioChange($event)\"\n (growthRateChange)=\"onGrowthRateCardChange($event)\" />\n </div>\n\n <div *ngIf=\"hrLineObj.isVisible\" class=\"generateSummary\">\n <lib-hr-line [field]=\"hrLineObj\" />\n </div>\n\n <div *ngIf=\"generateSummaryObj.isVisible\" class=\"generateSummary\">\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}.annuity-mat-hint{font-size:8px;text-align:start;font-weight:400;color:#444;letter-spacing:0px}.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:linear-gradient(to right,#222,#444);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}.generateSummary{margin-right:.4rem;margin-left:.4rem}.realistic-picture-card{display:flex;flex-direction:row;align-items:center;flex-wrap:wrap;gap:4px;background-color:#cce0f5;border-radius:4px;padding:4px 6px;font-size:8px;color:#06c;line-height:1.5;box-sizing:border-box}.realistic-picture-header{display:flex;align-items:center;gap:4px}.realistic-picture-content{display:flex;flex-direction:column;gap:2px}.realistic-picture-label{font-weight:700;font-size:8px;line-height:8px;color:#06c}.realistic-picture-text{font-weight:600;font-size:10px;line-height:14px;color:#222}.realistic-picture-highlight{font-weight:800;font-size:10px;line-height:14px;color:#0048ad}.toggle-text{margin-top:-5px!important}\n"], dependencies: [{ kind: "component", type: SelectComponent, selector: "lib-select", inputs: ["field", "reactiveFormControlobject"], outputs: ["selectionChange", "infoClick"] }, { kind: "component", type: AmountTextboxComponent, selector: "lib-amount-textbox", inputs: ["field", "reactiveFormControlobject"], outputs: ["blur"] }, { kind: "component", type: AnnuityCalculatorRadioComponent, selector: "lib-annuity-calculator-radio", inputs: ["preSelectConfig", "reactiveFormControlobject", "field"], outputs: ["change", "growthRateChange"] }, { kind: "component", type: HrLineComponent, selector: "lib-hr-line", inputs: ["field"] }, { kind: "component", type: ToggleComponent, selector: "lib-toggle", inputs: ["field", "reactiveFormControlobject"], outputs: ["change"] }, { 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"] }] });
|
|
8542
|
+
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 }, triggerValidation: { classPropertyName: "triggerValidation", publicName: "triggerValidation", isSignal: false, isRequired: false, 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", onGrowthRateOptionSelected: "onGrowthRateOptionSelected" }, viewQueries: [{ propertyName: "annuityRadioRef", first: true, predicate: AnnuityCalculatorRadioComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"card px-3\" style=\"padding: 16px;border: none !important;box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.12) !important;\">\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 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=\"d-flex flex-column p-0 gap-2\" style=\"width: 45%;\">\n <lib-amount-textbox [field]=\"annuityPremiumObj\" [(ngModel)]=\"annuityPremium['textValue']\"\n (ngModelChange)=\"onAnnuityPremiumValueChange($event)\" />\n <div class=\"error-message\" *ngIf=\"validations.ispremiumEntry\">\n Please enter Premium amount\n </div>\n <div class=\"annuity-mat-hint\" *ngIf=\"annuityPremiumObj?.configData?.numbertoword\">{{annuityPremiumObj?.configData?.numbertoword}}</div>\n\n <lib-select [field]=\"annuitypayoutObj\" [(ngModel)]=\"annuityPremium['selectValue']\"\n (ngModelChange)=\"onAnnuityPremiumValueChange($event)\" />\n <div>\n <lib-toggle [field]=\"enableAutoDebitObj\" [(ngModel)]=\"isEnableAutoDebit\"\n (ngModelChange)=\"onEnableAutoDebitValueChange($event)\" />\n </div>\n </div>\n <div class=\"d-flex justify-content-center align-items-center\"\n style=\"width: 10%; display: flex; align-items: flex-end; transform: translate(0px, 6px); position: relative; height: auto; min-height: 100%;\">\n <!-- Top line -->\n <div style=\"position: absolute; left: 50%; transform: translateX(-50%); width: 1px; height: calc(50% + 19px); top: -30px; background: rgba(221, 221, 221, 1); pointer-events: none;\"></div>\n <!-- Bottom line -->\n <div style=\"position: absolute; left: 50%; transform: translateX(-50%); width: 1px; height: calc(50% + 24px); bottom: -37px; background: rgba(221, 221, 221, 1); pointer-events: none;\"></div>\n <lib-icon-button [field]=\"interchangeButtonObj\" />\n </div>\n <div class=\"d-flex flex-column p-0 gap-2\" style=\"width: 45%;\">\n <lib-amount-textbox [field]=\"minimumAnnuityPayoutObj\" [(ngModel)]=\"minumumAnnuityPayout['textValue']\"\n (ngModelChange)=\"onMinPremiumValueChange($event)\" *ngIf=\"minimumAnnuityPayoutObj.isVisible;\"/>\n <div class=\"annuity-mat-hint\" *ngIf=\"minimumAnnuityPayoutObj.isVisible && minimumAnnuityPayoutObj?.configData?.numbertoword\">{{minimumAnnuityPayoutObj?.configData?.numbertoword}}</div>\n <lib-select [field]=\"minimumAnnuityPayoutfrequencyObj\" [(ngModel)]=\"minumumAnnuityPayout['selectValue']\"\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 <!-- <ng-template #emptyRightCol>\n <div class=\"col-5 col-lg-5 p-0\"></div>\n </ng-template> -->\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\"><img src=\"https://cdn.godigit.com/digitPlusAssets/streamline_graph-arrow-increase-remix.svg\"/></span>\n </div>\n </div>\n <lib-button [field]=\"recalculateButton\" (click)=\"calculateButtonClicked()\" />\n\n <!-- //digit boss updated design -->\n <!-- <div class=\"col-12 mt-3\" style=\"\n justify-content: center;\n flex-direction: row;\n display: flex;\" *ngIf=\"!minimumAnnuityPayoutObj.isVisible\">\n <div class=\"col-12 col-lg-12 d-flex flex-column justify-content-center padding-left-0 padding-right-0\">\n <div class=\"realistic-picture-card\">\n <div class=\"realistic-picture-header\">\n <img *ngIf=\"digitBossSwitch?.icon\" [src]=\"digitBossSwitch?.icon\" style=\"width:12px;height:12px;object-fit:contain;flex-shrink:0;\" />\n <span class=\"realistic-picture-label\">Realistic Picture:</span>\n </div>\n <span class=\"realistic-picture-text\">{{digitBossSwitch?.digitBossText}} <span class=\"realistic-picture-highlight\">{{digitBossSwitch?.digitBossValue}}</span></span>\n </div>\n </div>\n</div> -->\n\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 >\n <div class=\"mx-4\" *ngIf=\"recalculateSubTextObj?.isVisible\"><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=\"growthRateObj.isVisible\">\n <lib-annuity-calculator-radio\n [field]=\"growthRateObj\"\n [preSelectConfig]=\"growthRatePreSelectConfig\"\n [(ngModel)]=\"growthRateOption\"\n (change)=\"onGrowthRateRadioChange($event)\"\n (growthRateChange)=\"onGrowthRateCardChange($event)\" />\n </div>\n\n <div *ngIf=\"hrLineObj.isVisible\" class=\"generateSummary\">\n <lib-hr-line [field]=\"hrLineObj\" />\n </div>\n\n <div *ngIf=\"generateSummaryObj.isVisible\" class=\"generateSummary\">\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}.annuity-mat-hint{font-size:8px;text-align:start;font-weight:400;color:#444;letter-spacing:0px}.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:linear-gradient(to right,#222,#444);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}.generateSummary{margin-right:.4rem;margin-left:.4rem}.realistic-picture-card{display:flex;flex-direction:row;align-items:center;flex-wrap:wrap;gap:4px;background-color:#cce0f5;border-radius:4px;padding:4px 6px;font-size:8px;color:#06c;line-height:1.5;box-sizing:border-box}.realistic-picture-header{display:flex;align-items:center;gap:4px}.realistic-picture-content{display:flex;flex-direction:column;gap:2px}.realistic-picture-label{font-weight:700;font-size:8px;line-height:8px;color:#06c}.realistic-picture-text{font-weight:600;font-size:10px;line-height:14px;color:#222}.realistic-picture-highlight{font-weight:800;font-size:10px;line-height:14px;color:#0048ad}.toggle-text{margin-top:-5px!important}\n"], dependencies: [{ kind: "component", type: SelectComponent, selector: "lib-select", inputs: ["field", "reactiveFormControlobject"], outputs: ["selectionChange", "infoClick"] }, { kind: "component", type: AmountTextboxComponent, selector: "lib-amount-textbox", inputs: ["field", "reactiveFormControlobject"], outputs: ["blur"] }, { kind: "component", type: AnnuityCalculatorRadioComponent, selector: "lib-annuity-calculator-radio", inputs: ["preSelectConfig", "reactiveFormControlobject", "field"], outputs: ["change", "growthRateChange"] }, { kind: "component", type: HrLineComponent, selector: "lib-hr-line", inputs: ["field"] }, { kind: "component", type: ToggleComponent, selector: "lib-toggle", inputs: ["field", "reactiveFormControlobject"], outputs: ["change"] }, { 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"] }] });
|
|
8543
8543
|
}
|
|
8544
8544
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AnnuityPremiumCalculatorComponent, decorators: [{
|
|
8545
8545
|
type: Component,
|
|
@@ -8556,7 +8556,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
8556
8556
|
RadioComponent,
|
|
8557
8557
|
CommonModule,
|
|
8558
8558
|
FormsModule
|
|
8559
|
-
], template: "<div class=\"card px-3\" style=\"padding: 16px;border: none !important;box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.12) !important;\">\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 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=\"d-flex flex-column p-0 gap-2\" style=\"width: 45%;\">\n <lib-amount-textbox [field]=\"annuityPremiumObj\" [(ngModel)]=\"annuityPremium['textValue']\"\n (ngModelChange)=\"onAnnuityPremiumValueChange($event)\" />\n <div class=\"error-message\" *ngIf=\"validations.ispremiumEntry\">\n Please enter Premium amount\n </div>\n <div class=\"annuity-mat-hint\" *ngIf=\"annuityPremiumObj?.configData?.numbertoword\">{{annuityPremiumObj?.configData?.numbertoword}}</div>\n\n <lib-select [field]=\"annuitypayoutObj\" [(ngModel)]=\"annuityPremium['selectValue']\"\n (ngModelChange)=\"onAnnuityPremiumValueChange($event)\" />\n <div>\n <lib-toggle [field]=\"enableAutoDebitObj\" [(ngModel)]=\"isEnableAutoDebit\"\n (ngModelChange)=\"onEnableAutoDebitValueChange($event)\" />\n </div>\n </div>\n <div class=\"d-flex justify-content-center align-items-center\"\n style=\"width: 10%; display: flex; align-items: flex-end; transform: translate(0px, 6px); position: relative; height: auto; min-height: 100%;\">\n <!-- Top line -->\n <div style=\"position: absolute; left: 50%; transform: translateX(-50%); width: 1px; height: calc(50% + 19px); top: -30px; background: rgba(221, 221, 221, 1); pointer-events: none;\"></div>\n <!-- Bottom line -->\n <div style=\"position: absolute; left: 50%; transform: translateX(-50%); width: 1px; height: calc(50% + 24px); bottom: -37px; background: rgba(221, 221, 221, 1); pointer-events: none;\"></div>\n <lib-icon-button [field]=\"interchangeButtonObj\" />\n </div>\n <div class=\"d-flex flex-column p-0 gap-2\" style=\"width: 45%;\">\n <lib-amount-textbox [field]=\"minimumAnnuityPayoutObj\" [(ngModel)]=\"minumumAnnuityPayout['textValue']\"\n (ngModelChange)=\"onMinPremiumValueChange($event)\" *ngIf=\"minimumAnnuityPayoutObj.isVisible;\"/>\n <div class=\"annuity-mat-hint\" *ngIf=\"minimumAnnuityPayoutObj.isVisible && minimumAnnuityPayoutObj?.configData?.numbertoword\">{{minimumAnnuityPayoutObj?.configData?.numbertoword}}</div>\n <lib-select [field]=\"minimumAnnuityPayoutfrequencyObj\" [(ngModel)]=\"minumumAnnuityPayout['selectValue']\"\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 <!-- <ng-template #emptyRightCol>\n <div class=\"col-5 col-lg-5 p-0\"></div>\n </ng-template> -->\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\"><img src=\"https://cdn.godigit.com/digitPlusAssets/streamline_graph-arrow-increase-remix.svg\"/></span>\n </div>\n </div>\n <lib-button [field]=\"recalculateButton\" (click)=\"calculateButtonClicked()\" />\n\n <!-- //digit boss updated design -->\n <div class=\"col-12 mt-3\" style=\"\n justify-content: center;\n flex-direction: row;\n display: flex;\" *ngIf=\"!minimumAnnuityPayoutObj.isVisible\">\n <div class=\"col-12 col-lg-12 d-flex flex-column justify-content-center padding-left-0 padding-right-0\">\n <div class=\"realistic-picture-card\">\n <div class=\"realistic-picture-header\">\n <img *ngIf=\"digitBossSwitch?.icon\" [src]=\"digitBossSwitch?.icon\" style=\"width:12px;height:12px;object-fit:contain;flex-shrink:0;\" />\n <span class=\"realistic-picture-label\">Realistic Picture:</span>\n </div>\n <span class=\"realistic-picture-text\">{{digitBossSwitch?.digitBossText}} <span class=\"realistic-picture-highlight\">{{digitBossSwitch?.digitBossValue}}</span></span>\n </div>\n </div>\n</div>\n\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 >\n <div class=\"mx-4\" *ngIf=\"recalculateSubTextObj?.isVisible\"><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=\"growthRateObj.isVisible\">\n <lib-annuity-calculator-radio\n [field]=\"growthRateObj\"\n [preSelectConfig]=\"growthRatePreSelectConfig\"\n [(ngModel)]=\"growthRateOption\"\n (change)=\"onGrowthRateRadioChange($event)\"\n (growthRateChange)=\"onGrowthRateCardChange($event)\" />\n </div>\n\n <div *ngIf=\"hrLineObj.isVisible\" class=\"generateSummary\">\n <lib-hr-line [field]=\"hrLineObj\" />\n </div>\n\n <div *ngIf=\"generateSummaryObj.isVisible\" class=\"generateSummary\">\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}.annuity-mat-hint{font-size:8px;text-align:start;font-weight:400;color:#444;letter-spacing:0px}.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:linear-gradient(to right,#222,#444);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}.generateSummary{margin-right:.4rem;margin-left:.4rem}.realistic-picture-card{display:flex;flex-direction:row;align-items:center;flex-wrap:wrap;gap:4px;background-color:#cce0f5;border-radius:4px;padding:4px 6px;font-size:8px;color:#06c;line-height:1.5;box-sizing:border-box}.realistic-picture-header{display:flex;align-items:center;gap:4px}.realistic-picture-content{display:flex;flex-direction:column;gap:2px}.realistic-picture-label{font-weight:700;font-size:8px;line-height:8px;color:#06c}.realistic-picture-text{font-weight:600;font-size:10px;line-height:14px;color:#222}.realistic-picture-highlight{font-weight:800;font-size:10px;line-height:14px;color:#0048ad}.toggle-text{margin-top:-5px!important}\n"] }]
|
|
8559
|
+
], template: "<div class=\"card px-3\" style=\"padding: 16px;border: none !important;box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.12) !important;\">\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 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=\"d-flex flex-column p-0 gap-2\" style=\"width: 45%;\">\n <lib-amount-textbox [field]=\"annuityPremiumObj\" [(ngModel)]=\"annuityPremium['textValue']\"\n (ngModelChange)=\"onAnnuityPremiumValueChange($event)\" />\n <div class=\"error-message\" *ngIf=\"validations.ispremiumEntry\">\n Please enter Premium amount\n </div>\n <div class=\"annuity-mat-hint\" *ngIf=\"annuityPremiumObj?.configData?.numbertoword\">{{annuityPremiumObj?.configData?.numbertoword}}</div>\n\n <lib-select [field]=\"annuitypayoutObj\" [(ngModel)]=\"annuityPremium['selectValue']\"\n (ngModelChange)=\"onAnnuityPremiumValueChange($event)\" />\n <div>\n <lib-toggle [field]=\"enableAutoDebitObj\" [(ngModel)]=\"isEnableAutoDebit\"\n (ngModelChange)=\"onEnableAutoDebitValueChange($event)\" />\n </div>\n </div>\n <div class=\"d-flex justify-content-center align-items-center\"\n style=\"width: 10%; display: flex; align-items: flex-end; transform: translate(0px, 6px); position: relative; height: auto; min-height: 100%;\">\n <!-- Top line -->\n <div style=\"position: absolute; left: 50%; transform: translateX(-50%); width: 1px; height: calc(50% + 19px); top: -30px; background: rgba(221, 221, 221, 1); pointer-events: none;\"></div>\n <!-- Bottom line -->\n <div style=\"position: absolute; left: 50%; transform: translateX(-50%); width: 1px; height: calc(50% + 24px); bottom: -37px; background: rgba(221, 221, 221, 1); pointer-events: none;\"></div>\n <lib-icon-button [field]=\"interchangeButtonObj\" />\n </div>\n <div class=\"d-flex flex-column p-0 gap-2\" style=\"width: 45%;\">\n <lib-amount-textbox [field]=\"minimumAnnuityPayoutObj\" [(ngModel)]=\"minumumAnnuityPayout['textValue']\"\n (ngModelChange)=\"onMinPremiumValueChange($event)\" *ngIf=\"minimumAnnuityPayoutObj.isVisible;\"/>\n <div class=\"annuity-mat-hint\" *ngIf=\"minimumAnnuityPayoutObj.isVisible && minimumAnnuityPayoutObj?.configData?.numbertoword\">{{minimumAnnuityPayoutObj?.configData?.numbertoword}}</div>\n <lib-select [field]=\"minimumAnnuityPayoutfrequencyObj\" [(ngModel)]=\"minumumAnnuityPayout['selectValue']\"\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 <!-- <ng-template #emptyRightCol>\n <div class=\"col-5 col-lg-5 p-0\"></div>\n </ng-template> -->\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\"><img src=\"https://cdn.godigit.com/digitPlusAssets/streamline_graph-arrow-increase-remix.svg\"/></span>\n </div>\n </div>\n <lib-button [field]=\"recalculateButton\" (click)=\"calculateButtonClicked()\" />\n\n <!-- //digit boss updated design -->\n <!-- <div class=\"col-12 mt-3\" style=\"\n justify-content: center;\n flex-direction: row;\n display: flex;\" *ngIf=\"!minimumAnnuityPayoutObj.isVisible\">\n <div class=\"col-12 col-lg-12 d-flex flex-column justify-content-center padding-left-0 padding-right-0\">\n <div class=\"realistic-picture-card\">\n <div class=\"realistic-picture-header\">\n <img *ngIf=\"digitBossSwitch?.icon\" [src]=\"digitBossSwitch?.icon\" style=\"width:12px;height:12px;object-fit:contain;flex-shrink:0;\" />\n <span class=\"realistic-picture-label\">Realistic Picture:</span>\n </div>\n <span class=\"realistic-picture-text\">{{digitBossSwitch?.digitBossText}} <span class=\"realistic-picture-highlight\">{{digitBossSwitch?.digitBossValue}}</span></span>\n </div>\n </div>\n</div> -->\n\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 >\n <div class=\"mx-4\" *ngIf=\"recalculateSubTextObj?.isVisible\"><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=\"growthRateObj.isVisible\">\n <lib-annuity-calculator-radio\n [field]=\"growthRateObj\"\n [preSelectConfig]=\"growthRatePreSelectConfig\"\n [(ngModel)]=\"growthRateOption\"\n (change)=\"onGrowthRateRadioChange($event)\"\n (growthRateChange)=\"onGrowthRateCardChange($event)\" />\n </div>\n\n <div *ngIf=\"hrLineObj.isVisible\" class=\"generateSummary\">\n <lib-hr-line [field]=\"hrLineObj\" />\n </div>\n\n <div *ngIf=\"generateSummaryObj.isVisible\" class=\"generateSummary\">\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}.annuity-mat-hint{font-size:8px;text-align:start;font-weight:400;color:#444;letter-spacing:0px}.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:linear-gradient(to right,#222,#444);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}.generateSummary{margin-right:.4rem;margin-left:.4rem}.realistic-picture-card{display:flex;flex-direction:row;align-items:center;flex-wrap:wrap;gap:4px;background-color:#cce0f5;border-radius:4px;padding:4px 6px;font-size:8px;color:#06c;line-height:1.5;box-sizing:border-box}.realistic-picture-header{display:flex;align-items:center;gap:4px}.realistic-picture-content{display:flex;flex-direction:column;gap:2px}.realistic-picture-label{font-weight:700;font-size:8px;line-height:8px;color:#06c}.realistic-picture-text{font-weight:600;font-size:10px;line-height:14px;color:#222}.realistic-picture-highlight{font-weight:800;font-size:10px;line-height:14px;color:#0048ad}.toggle-text{margin-top:-5px!important}\n"] }]
|
|
8560
8560
|
}], ctorParameters: () => [{ type: MasterControlService }], propDecorators: { triggerValidation: [{
|
|
8561
8561
|
type: Input
|
|
8562
8562
|
}], annuityRadioRef: [{
|