npm - master-control - Versions diffs - 0.4.92 → 0.4.94 - Mend

master-control 0.4.92 → 0.4.94

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.

Files changed (9) hide show

package/esm2022/lib/pay-get-card/pay-get-card.component.mjs CHANGED Viewed

@@ -34,4 +34,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
             }], payamountOptions: [{
                 type: Input
             }] } });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicGF5LWdldC1jYXJkLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL21hc3Rlci1jb250cm9sL3NyYy9saWIvcGF5LWdldC1jYXJkL3BheS1nZXQtY2FyZC5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9tYXN0ZXItY29udHJvbC9zcmMvbGliL3BheS1nZXQtY2FyZC9wYXktZ2V0LWNhcmQuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLGlCQUFpQixDQUFDO0FBQy9DLE9BQU8sRUFBRSxTQUFTLEVBQUUsS0FBSyxFQUFFLEtBQUssRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUN4RCxPQUFPLEVBQUUsMEJBQTBCLEVBQUUsTUFBTSw0Q0FBNEMsQ0FBQzs7O0FBVXhGLE1BQU0sT0FBTyxtQkFBbUI7SUFDaEMsS0FBSyxHQUFRLEtBQUssQ0FBQyxRQUFRLEVBQU8sQ0FBQztJQUN6QixTQUFTLEdBQVEsV0FBVyxDQUFDO0lBQzdCLGFBQWEsR0FBTyxTQUFTLENBQUM7SUFDOUIsT0FBTyxHQUFPLENBQUMsQ0FBQztJQUNoQixLQUFLLEdBQU8sTUFBTSxDQUFDO0lBQ25CLFNBQVMsR0FBTyxPQUFPLENBQUM7SUFFeEIsZ0JBQWdCLEdBQVU7UUFDakMsRUFBRSxNQUFNLEVBQUUsU0FBUyxFQUFFLFVBQVUsRUFBRSxZQUFZLEVBQUMsU0FBUyxFQUFFLEVBQUUsRUFBRSxRQUFRLEVBQUUsRUFBRSxFQUFFO1FBQzNFLEVBQUUsTUFBTSxFQUFFLFNBQVMsRUFBRSxVQUFVLEVBQUUsWUFBWSxFQUFFLFNBQVMsRUFBRSxFQUFFLEVBQUUsUUFBUSxFQUFFLEVBQUUsRUFBRTtRQUM1RSxFQUFFLE1BQU0sRUFBRSxTQUFTLEVBQUUsVUFBVSxFQUFFLFNBQVMsRUFBRSxTQUFTLEVBQUUsRUFBRSxFQUFFLFFBQVEsRUFBRSxFQUFFLEVBQUU7S0FDMUUsQ0FBQzt3R0FaVSxtQkFBbUI7NEZBQW5CLG1CQUFtQiw0L0JDWmhDLHMxRkFpREEscTlERHpDWSxZQUFZLHFWQUFFLDBCQUEwQjs7NEZBSXZDLG1CQUFtQjtrQkFQL0IsU0FBUzsrQkFDRSxrQkFBa0IsY0FDaEIsSUFBSSxXQUNQLENBQUMsWUFBWSxFQUFFLDBCQUEwQixDQUFDOzhCQU0zQyxTQUFTO3NCQUFqQixLQUFLO2dCQUNHLGFBQWE7c0JBQXJCLEtBQUs7Z0JBQ0csT0FBTztzQkFBZixLQUFLO2dCQUNHLEtBQUs7c0JBQWIsS0FBSztnQkFDRyxTQUFTO3NCQUFqQixLQUFLO2dCQUVHLGdCQUFnQjtzQkFBeEIsS0FBSyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbW1vbk1vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbic7XG5pbXBvcnQgeyBDb21wb25lbnQsIElucHV0LCBpbnB1dCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgQ3VzdG9taXplZFRvb2x0aXBEaXJlY3RpdmUgfSBmcm9tICcuLi9kaXJlY3RpdmVzL2N1c3RvbWl6ZWQudG9vbHRpcC5kaXJlY3RpdmUnO1xuaW1wb3J0IHsgdmFsaWRhdGVIb3Jpem9udGFsUG9zaXRpb24gfSBmcm9tICdAYW5ndWxhci9jZGsvb3ZlcmxheSc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ2xpYi1wYXktZ2V0LWNhcmQnLFxuICBzdGFuZGFsb25lOiB0cnVlLFxuICBpbXBvcnRzOiBbQ29tbW9uTW9kdWxlLCBDdXN0b21pemVkVG9vbHRpcERpcmVjdGl2ZV0sXG4gIHRlbXBsYXRlVXJsOiAnLi9wYXktZ2V0LWNhcmQuY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybDogJy4vcGF5LWdldC1jYXJkLmNvbXBvbmVudC5jc3MnXG59KVxuZXhwb3J0IGNsYXNzIFBheUdldENhcmRDb21wb25lbnQge1xuZmllbGQ6IGFueSA9IGlucHV0LnJlcXVpcmVkPGFueT4oKTtcbiBASW5wdXQoKSBwYXlBbW91bnQ6IGFueSA9ICfigrk2LDAwLDAwMCc7XG4gQElucHV0KCkgcHJlbWl1bUFtb3VudDogYW55PSAn4oK5MTAsMDAwJztcbiBASW5wdXQoKSBwdFZhbHVlOiBhbnk9IDU7XG4gQElucHV0KCkgeWVhcnM6IGFueT0gJzIwMzAnO1xuIEBJbnB1dCgpIGZyZXF1ZW5jeTogYW55PSAnbW9udGgnO1xuXG4gQElucHV0KCkgcGF5YW1vdW50T3B0aW9uczogYW55W10gPSBbXG4gICB7IGFtb3VudDogJ+KCuTYyLDAwMCcsIHBlcmNlbnRhZ2U6ICdHdWFyYW50ZWVkJyxmcmVxdWVuY3k6ICcnLCB2YXJpYWJsZTogJycgfSxcbiAgIHsgYW1vdW50OiAn4oK5NjYsMDAwJywgcGVyY2VudGFnZTogJ1ZhcmlhYmxlIEAnLCBmcmVxdWVuY3k6ICcnLCB2YXJpYWJsZTogJycgfSxcbiAgIHsgYW1vdW50OiAn4oK5NzIsMDAwJywgcGVyY2VudGFnZTogJ1RvdGFsIEAnLCBmcmVxdWVuY3k6ICcnLCB2YXJpYWJsZTogJycgfVxuIF07XG59XG4iLCI8ZGl2XG4gIGNsYXNzPVwiZC1mbGV4IGp1c3RpZnktY29udGVudC1iZXR3ZWVuIHBheS1jYXJkXCJcbiAgW25nU3R5bGVdPVwie1xuJy0tcGF5LWNhcmQtYm9yZGVyLWNvbG9yJzogZmllbGQoKT8uY29udHJvbFN0eWxlPy5ib3JkZXJDb2xvciAsXG4nLS1wYXktY2FyZC1ib3JkZXItd2lkdGgnOiBmaWVsZCgpPy5jb250cm9sU3R5bGU/LmJvcmRlcldpZHRoICxcbictLXBheS1jYXJkLWJvcmRlci1yYWRpdXMnOiBmaWVsZCgpPy5jb250cm9sU3R5bGU/LmJvcmRlclJhZGl1cyAsXG4nLS1wYXktY2FyZC1iZy1jb2xvcic6IGZpZWxkKCk/LmNvbnRyb2xTdHlsZT8uYmFja2dyb3VuZCAsXG4nLS1wYXktY2FyZC13aWR0aCc6IGZpZWxkKCk/LmNvbnRyb2xTdHlsZT8ud2lkdGggLFxuIH1cIlxuICpuZ0lmPVwiZmllbGQoKSAmJiBmaWVsZCgpPy5pc1Zpc2libGVcIlxuPlxuICA8ZGl2IGNsYXNzPVwidGV4dC1jZW50ZXIgbXgtMlwiPlxuICAgIDxzcGFuIGNsYXNzPVwiYm9sZC1sYWJlbFwiPnt7IGZpZWxkKCk/LnBsYWNlSG9sZGVyIHx8ICdQYXknIH19PC9zcGFuPiA8YnIgLz5cbiAgICA8ZGl2IGNsYXNzPVwiZC1mbGV4IGFsaWduLWl0ZW1zLWNlbnRlciBqdXN0aWZ5LWNvbnRlbnQtY2VudGVyXCI+XG4gICAgPHNwYW4gY2xhc3M9XCJncmV5LWxhYmVsXCI+e3twYXlBbW91bnR9fTwvc3Bhbj5cbiAgICA8c3BhbiBbYXBwVG9vbHRpcFRlbXBsYXRlXT1cImN1cnJlbnRUb29sdGlwXCIgYXJyb3dQb3NpdGlvbj1cImxlZnRcIiB0b29sdGlwUG9zaXRpb249XCJib3R0b21cIlxuICAgICAgICAqbmdJZj1cImZpZWxkKCkuY29uZmlnRGF0YT8uaW5mb2ltYWdlVXJsICYmIGZpZWxkKCkuY29uZmlnRGF0YT8udG9vbHRpcFRleHRcIj5cbiAgICAgICAgPGltZyBbc3JjXT1cImZpZWxkKCkuY29uZmlnRGF0YT8uaW5mb2ltYWdlVXJsXCIgY2xhc3M9XCJ0b2dnbGUtYmVuZWZpdC1pbWcgbXgtMVwiIC8+XG4gICAgICA8L3NwYW4+XG4gICAgICA8bmctdGVtcGxhdGUgI2N1cnJlbnRUb29sdGlwPlxuICAgICAgICA8c3BhbiBbaW5uZXJIVE1MXT1cImZpZWxkKCkuY29uZmlnRGF0YT8udG9vbHRpcFRleHRcIj48L3NwYW4+XG4gICAgICA8L25nLXRlbXBsYXRlPlxuICAgIDwvZGl2PlxuICAgIDxzcGFuIGNsYXNzPVwibGVmdC1yaWdodC1sYWJlbFwiICpuZ0lmPVwiZmllbGQoKT8uY29uZmlnRGF0YT8ubGVmdFN1YlRleHRcIj57e2ZpZWxkKCk/LmNvbmZpZ0RhdGE/LmxlZnRTdWJUZXh0fX08L3NwYW4+XG4gIDwvZGl2PlxuICA8ZGl2IGNsYXNzPVwicHJlbWl1bS1jYXJkIGQtZmxleCBhbGlnbi1pdGVtcy1jZW50ZXIganVzdGlmeS1jb250ZW50LWFyb3VuZFwiPlxuICAgIDxuZy1jb250YWluZXIgKm5nRm9yPVwibGV0IG9wdGlvbiBvZiBwYXlhbW91bnRPcHRpb25zOyBsZXQgaSA9IGluZGV4OyBsZXQgaXNMYXN0ID0gbGFzdFwiPlxuICAgICAgPGRpdiBjbGFzcz1cInZhbHVlLWNhcmQgdGV4dC1jZW50ZXJcIiAqbmdJZj1cImZpZWxkKCk/LmNvbmZpZ0RhdGE/LmlzU2hvd0NvbnRlbnRcIj5cbiAgICAgICAgPHNwYW4gY2xhc3M9XCJzaG93Y29udGVudC1hbW91bnRcIj57e29wdGlvbi5hbW91bnR9fS8gPHNwYW4gY2xhc3M9XCJzaG93Y29udGVudC1mcmVxdWVuY3lcIj57e29wdGlvbi5mcmVxdWVuY3l9fTwvc3Bhbj48L3NwYW4+XG4gICAgICAgIDxkaXYgY2xhc3M9XCJncmV5LWJ1dHRvblwiPnt7b3B0aW9uLnBlcmNlbnRhZ2V9fSB7e29wdGlvbi52YXJpYWJsZX19PC9kaXY+XG4gICAgICA8L2Rpdj5cblxuICAgICAgPG5nLWNvbnRhaW5lciAqbmdJZj1cImZpZWxkKCk/LmNvbmZpZ0RhdGE/LmlzU2hvd0NvbnRlbnQgJiYgIWlzTGFzdFwiPlxuICAgICAgPHNwYW4gKm5nSWY9XCJpICE9PSBwYXlhbW91bnRPcHRpb25zLmxlbmd0aCAtIDJcIiBjbGFzcz1cInNlcGFyYXRvci1pY29uXCI+Kzwvc3Bhbj5cbiAgICAgIDxzcGFuICpuZ0lmPVwiaSA9PT0gcGF5YW1vdW50T3B0aW9ucy5sZW5ndGggLSAyXCIgY2xhc3M9XCJzZXBhcmF0b3ItaWNvblwiPj08L3NwYW4+XG4gICAgPC9uZy1jb250YWluZXI+XG4gICAgPC9uZy1jb250YWluZXI+XG5cbiAgICA8ZGl2IGNsYXNzPVwiZC1mbGV4IGZsZXgtY29sdW1uIHRleHQtY2VudGVyXCIgKm5nSWY9XCJmaWVsZCgpPy5jb25maWdEYXRhPy5pc1Nob3dMYXN0UGFydFwiPlxuICAgICAgPHNwYW4gY2xhc3M9XCJsaWdodC1sYWJlbFwiPjxiIGNsYXNzPVwiYm9sZC1sYWJlbFwiPnt7cHJlbWl1bUFtb3VudH19PC9iPi8ge3tmcmVxdWVuY3l9fTwvc3Bhbj5cbiAgICAgIDxzcGFuIGNsYXNzPVwiZ3JleS1sYWJlbFwiICpuZ0lmPVwiZmllbGQoKT8uY29uZmlnRGF0YT8uaXNTaG93cGF5b3V0XCI+Zm9yIHt7cHRWYWx1ZX19IHllYXJzPC9zcGFuPlxuICAgICAgPHNwYW4gY2xhc3M9XCJyaWdodC1sZWZ0LWxhYmVsXCIgKm5nSWY9XCJmaWVsZCgpPy5jb25maWdEYXRhPy5pc1Nob3dSaWdodFRleHRWYWx1ZVwiPnt7ZmllbGQoKT8uY29uZmlnRGF0YT8uaXNTaG93UmlnaHRUZXh0VmFsdWV9fTwvc3Bhbj5cbiAgICAgIDxzcGFuIGNsYXNzPVwibGVmdC1yaWdodC1sYWJlbFwiICpuZ0lmPVwiZmllbGQoKT8uY29uZmlnRGF0YT8ucmlnaHRTdWJUZXh0XCI+e3tmaWVsZCgpPy5jb25maWdEYXRhPy5yaWdodFN1YlRleHR9fTwvc3Bhbj5cbiAgICA8L2Rpdj5cbiAgPC9kaXY+XG48L2Rpdj5cbjxkaXYgY2xhc3M9XCJwYXktZ2V0LWNhcmQtZGlnaXQtYm9zcy1iYW5uZXJcIiAqbmdJZj1cImZpZWxkKCkgJiYgZmllbGQoKT8uaXNWaXNpYmxlICYmIGZpZWxkKCk/LmNvbmZpZ0RhdGE/LmRpZ2l0Qm9zc1RleHRcIj5cbiAgPHNwYW4gY2xhc3M9XCJwYXktZ2V0LWNhcmQtZGlnaXQtYm9zcy10ZXh0XCI+e3tmaWVsZCgpPy5jb25maWdEYXRhPy5kaWdpdEJvc3NUZXh0fX08L3NwYW4+XG48L2Rpdj5cbiJdfQ==
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicGF5LWdldC1jYXJkLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL21hc3Rlci1jb250cm9sL3NyYy9saWIvcGF5LWdldC1jYXJkL3BheS1nZXQtY2FyZC5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9tYXN0ZXItY29udHJvbC9zcmMvbGliL3BheS1nZXQtY2FyZC9wYXktZ2V0LWNhcmQuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLGlCQUFpQixDQUFDO0FBQy9DLE9BQU8sRUFBRSxTQUFTLEVBQUUsS0FBSyxFQUFFLEtBQUssRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUN4RCxPQUFPLEVBQUUsMEJBQTBCLEVBQUUsTUFBTSw0Q0FBNEMsQ0FBQzs7O0FBU3hGLE1BQU0sT0FBTyxtQkFBbUI7SUFDaEMsS0FBSyxHQUFRLEtBQUssQ0FBQyxRQUFRLEVBQU8sQ0FBQztJQUN6QixTQUFTLEdBQVEsV0FBVyxDQUFDO0lBQzdCLGFBQWEsR0FBTyxTQUFTLENBQUM7SUFDOUIsT0FBTyxHQUFPLENBQUMsQ0FBQztJQUNoQixLQUFLLEdBQU8sTUFBTSxDQUFDO0lBQ25CLFNBQVMsR0FBTyxPQUFPLENBQUM7SUFFeEIsZ0JBQWdCLEdBQVU7UUFDbEMsRUFBRSxNQUFNLEVBQUUsU0FBUyxFQUFFLFVBQVUsRUFBRSxZQUFZLEVBQUMsU0FBUyxFQUFFLEVBQUUsRUFBRSxRQUFRLEVBQUUsRUFBRSxFQUFFO1FBQzFFLEVBQUUsTUFBTSxFQUFFLFNBQVMsRUFBRSxVQUFVLEVBQUUsWUFBWSxFQUFFLFNBQVMsRUFBRSxFQUFFLEVBQUUsUUFBUSxFQUFFLEVBQUUsRUFBRTtRQUM1RSxFQUFFLE1BQU0sRUFBRSxTQUFTLEVBQUUsVUFBVSxFQUFFLFNBQVMsRUFBRSxTQUFTLEVBQUUsRUFBRSxFQUFFLFFBQVEsRUFBRSxFQUFFLEVBQUM7S0FDekUsQ0FBQzt3R0FaVSxtQkFBbUI7NEZBQW5CLG1CQUFtQiw0L0JDWGhDLHMxRkFpREEscTlERDFDWSxZQUFZLHFWQUFFLDBCQUEwQjs7NEZBSXZDLG1CQUFtQjtrQkFQL0IsU0FBUzsrQkFDRSxrQkFBa0IsY0FDaEIsSUFBSSxXQUNQLENBQUMsWUFBWSxFQUFFLDBCQUEwQixDQUFDOzhCQU0zQyxTQUFTO3NCQUFqQixLQUFLO2dCQUNHLGFBQWE7c0JBQXJCLEtBQUs7Z0JBQ0csT0FBTztzQkFBZixLQUFLO2dCQUNHLEtBQUs7c0JBQWIsS0FBSztnQkFDRyxTQUFTO3NCQUFqQixLQUFLO2dCQUVHLGdCQUFnQjtzQkFBeEIsS0FBSyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbW1vbk1vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbic7XG5pbXBvcnQgeyBDb21wb25lbnQsIElucHV0LCBpbnB1dCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgQ3VzdG9taXplZFRvb2x0aXBEaXJlY3RpdmUgfSBmcm9tICcuLi9kaXJlY3RpdmVzL2N1c3RvbWl6ZWQudG9vbHRpcC5kaXJlY3RpdmUnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdsaWItcGF5LWdldC1jYXJkJyxcbiAgc3RhbmRhbG9uZTogdHJ1ZSxcbiAgaW1wb3J0czogW0NvbW1vbk1vZHVsZSwgQ3VzdG9taXplZFRvb2x0aXBEaXJlY3RpdmVdLFxuICB0ZW1wbGF0ZVVybDogJy4vcGF5LWdldC1jYXJkLmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmw6ICcuL3BheS1nZXQtY2FyZC5jb21wb25lbnQuY3NzJ1xufSlcbmV4cG9ydCBjbGFzcyBQYXlHZXRDYXJkQ29tcG9uZW50IHtcbmZpZWxkOiBhbnkgPSBpbnB1dC5yZXF1aXJlZDxhbnk+KCk7XG4gQElucHV0KCkgcGF5QW1vdW50OiBhbnkgPSAn4oK5NiwwMCwwMDAnO1xuIEBJbnB1dCgpIHByZW1pdW1BbW91bnQ6IGFueT0gJ+KCuTEwLDAwMCc7XG4gQElucHV0KCkgcHRWYWx1ZTogYW55PSA1O1xuIEBJbnB1dCgpIHllYXJzOiBhbnk9ICcyMDMwJztcbiBASW5wdXQoKSBmcmVxdWVuY3k6IGFueT0gJ21vbnRoJztcblxuIEBJbnB1dCgpIHBheWFtb3VudE9wdGlvbnM6IGFueVtdID0gW1xuICB7IGFtb3VudDogJ+KCuTYyLDAwMCcsIHBlcmNlbnRhZ2U6ICdHdWFyYW50ZWVkJyxmcmVxdWVuY3k6ICcnLCB2YXJpYWJsZTogJycgfSxcbiAgIHsgYW1vdW50OiAn4oK5NjYsMDAwJywgcGVyY2VudGFnZTogJ1ZhcmlhYmxlIEAnLCBmcmVxdWVuY3k6ICcnLCB2YXJpYWJsZTogJycgfSxcbiAgIHsgYW1vdW50OiAn4oK5NzIsMDAwJywgcGVyY2VudGFnZTogJ1RvdGFsIEAnLCBmcmVxdWVuY3k6ICcnLCB2YXJpYWJsZTogJyd9XG4gXTtcbn1cbiIsIjxkaXZcbiAgY2xhc3M9XCJkLWZsZXgganVzdGlmeS1jb250ZW50LWJldHdlZW4gcGF5LWNhcmRcIlxuICBbbmdTdHlsZV09XCJ7XG4nLS1wYXktY2FyZC1ib3JkZXItY29sb3InOiBmaWVsZCgpPy5jb250cm9sU3R5bGU/LmJvcmRlckNvbG9yICxcbictLXBheS1jYXJkLWJvcmRlci13aWR0aCc6IGZpZWxkKCk/LmNvbnRyb2xTdHlsZT8uYm9yZGVyV2lkdGggLFxuJy0tcGF5LWNhcmQtYm9yZGVyLXJhZGl1cyc6IGZpZWxkKCk/LmNvbnRyb2xTdHlsZT8uYm9yZGVyUmFkaXVzICxcbictLXBheS1jYXJkLWJnLWNvbG9yJzogZmllbGQoKT8uY29udHJvbFN0eWxlPy5iYWNrZ3JvdW5kICxcbictLXBheS1jYXJkLXdpZHRoJzogZmllbGQoKT8uY29udHJvbFN0eWxlPy53aWR0aCAsXG4gfVwiXG4gKm5nSWY9XCJmaWVsZCgpICYmIGZpZWxkKCk/LmlzVmlzaWJsZVwiXG4+XG4gIDxkaXYgY2xhc3M9XCJ0ZXh0LWNlbnRlciBteC0yXCI+XG4gICAgPHNwYW4gY2xhc3M9XCJib2xkLWxhYmVsXCI+e3sgZmllbGQoKT8ucGxhY2VIb2xkZXIgfHwgJ1BheScgfX08L3NwYW4+IDxiciAvPlxuICAgIDxkaXYgY2xhc3M9XCJkLWZsZXggYWxpZ24taXRlbXMtY2VudGVyIGp1c3RpZnktY29udGVudC1jZW50ZXJcIj5cbiAgICA8c3BhbiBjbGFzcz1cImdyZXktbGFiZWxcIj57e3BheUFtb3VudH19PC9zcGFuPlxuICAgIDxzcGFuIFthcHBUb29sdGlwVGVtcGxhdGVdPVwiY3VycmVudFRvb2x0aXBcIiBhcnJvd1Bvc2l0aW9uPVwibGVmdFwiIHRvb2x0aXBQb3NpdGlvbj1cImJvdHRvbVwiXG4gICAgICAgICpuZ0lmPVwiZmllbGQoKS5jb25maWdEYXRhPy5pbmZvaW1hZ2VVcmwgJiYgZmllbGQoKS5jb25maWdEYXRhPy50b29sdGlwVGV4dFwiPlxuICAgICAgICA8aW1nIFtzcmNdPVwiZmllbGQoKS5jb25maWdEYXRhPy5pbmZvaW1hZ2VVcmxcIiBjbGFzcz1cInRvZ2dsZS1iZW5lZml0LWltZyBteC0xXCIgLz5cbiAgICAgIDwvc3Bhbj5cbiAgICAgIDxuZy10ZW1wbGF0ZSAjY3VycmVudFRvb2x0aXA+XG4gICAgICAgIDxzcGFuIFtpbm5lckhUTUxdPVwiZmllbGQoKS5jb25maWdEYXRhPy50b29sdGlwVGV4dFwiPjwvc3Bhbj5cbiAgICAgIDwvbmctdGVtcGxhdGU+XG4gICAgPC9kaXY+XG4gICAgPHNwYW4gY2xhc3M9XCJsZWZ0LXJpZ2h0LWxhYmVsXCIgKm5nSWY9XCJmaWVsZCgpPy5jb25maWdEYXRhPy5sZWZ0U3ViVGV4dFwiPnt7ZmllbGQoKT8uY29uZmlnRGF0YT8ubGVmdFN1YlRleHR9fTwvc3Bhbj5cbiAgPC9kaXY+XG4gIDxkaXYgY2xhc3M9XCJwcmVtaXVtLWNhcmQgZC1mbGV4IGFsaWduLWl0ZW1zLWNlbnRlciBqdXN0aWZ5LWNvbnRlbnQtYXJvdW5kXCI+XG4gICAgPG5nLWNvbnRhaW5lciAqbmdGb3I9XCJsZXQgb3B0aW9uIG9mIHBheWFtb3VudE9wdGlvbnM7IGxldCBpID0gaW5kZXg7IGxldCBpc0xhc3QgPSBsYXN0XCI+XG4gICAgICA8ZGl2IGNsYXNzPVwidmFsdWUtY2FyZCB0ZXh0LWNlbnRlclwiICpuZ0lmPVwiZmllbGQoKT8uY29uZmlnRGF0YT8uaXNTaG93Q29udGVudFwiPlxuICAgICAgICA8c3BhbiBjbGFzcz1cInNob3djb250ZW50LWFtb3VudFwiPnt7b3B0aW9uLmFtb3VudH19LyA8c3BhbiBjbGFzcz1cInNob3djb250ZW50LWZyZXF1ZW5jeVwiPnt7b3B0aW9uLmZyZXF1ZW5jeX19PC9zcGFuPjwvc3Bhbj5cbiAgICAgICAgPGRpdiBjbGFzcz1cImdyZXktYnV0dG9uXCI+e3tvcHRpb24ucGVyY2VudGFnZX19IHt7b3B0aW9uLnZhcmlhYmxlfX08L2Rpdj5cbiAgICAgIDwvZGl2PlxuXG4gICAgICA8bmctY29udGFpbmVyICpuZ0lmPVwiZmllbGQoKT8uY29uZmlnRGF0YT8uaXNTaG93Q29udGVudCAmJiAhaXNMYXN0XCI+XG4gICAgICA8c3BhbiAqbmdJZj1cImkgIT09IHBheWFtb3VudE9wdGlvbnMubGVuZ3RoIC0gMlwiIGNsYXNzPVwic2VwYXJhdG9yLWljb25cIj4rPC9zcGFuPlxuICAgICAgPHNwYW4gKm5nSWY9XCJpID09PSBwYXlhbW91bnRPcHRpb25zLmxlbmd0aCAtIDJcIiBjbGFzcz1cInNlcGFyYXRvci1pY29uXCI+PTwvc3Bhbj5cbiAgICA8L25nLWNvbnRhaW5lcj5cbiAgICA8L25nLWNvbnRhaW5lcj5cblxuICAgIDxkaXYgY2xhc3M9XCJkLWZsZXggZmxleC1jb2x1bW4gdGV4dC1jZW50ZXJcIiAqbmdJZj1cImZpZWxkKCk/LmNvbmZpZ0RhdGE/LmlzU2hvd0xhc3RQYXJ0XCI+XG4gICAgICA8c3BhbiBjbGFzcz1cImxpZ2h0LWxhYmVsXCI+PGIgY2xhc3M9XCJib2xkLWxhYmVsXCI+e3twcmVtaXVtQW1vdW50fX08L2I+LyB7e2ZyZXF1ZW5jeX19PC9zcGFuPlxuICAgICAgPHNwYW4gY2xhc3M9XCJncmV5LWxhYmVsXCIgKm5nSWY9XCJmaWVsZCgpPy5jb25maWdEYXRhPy5pc1Nob3dwYXlvdXRcIj5mb3Ige3twdFZhbHVlfX0geWVhcnM8L3NwYW4+XG4gICAgICA8c3BhbiBjbGFzcz1cInJpZ2h0LWxlZnQtbGFiZWxcIiAqbmdJZj1cImZpZWxkKCk/LmNvbmZpZ0RhdGE/LmlzU2hvd1JpZ2h0VGV4dFZhbHVlXCI+e3tmaWVsZCgpPy5jb25maWdEYXRhPy5pc1Nob3dSaWdodFRleHRWYWx1ZX19PC9zcGFuPlxuICAgICAgPHNwYW4gY2xhc3M9XCJsZWZ0LXJpZ2h0LWxhYmVsXCIgKm5nSWY9XCJmaWVsZCgpPy5jb25maWdEYXRhPy5yaWdodFN1YlRleHRcIj57e2ZpZWxkKCk/LmNvbmZpZ0RhdGE/LnJpZ2h0U3ViVGV4dH19PC9zcGFuPlxuICAgIDwvZGl2PlxuICA8L2Rpdj5cbjwvZGl2PlxuPGRpdiBjbGFzcz1cInBheS1nZXQtY2FyZC1kaWdpdC1ib3NzLWJhbm5lclwiICpuZ0lmPVwiZmllbGQoKSAmJiBmaWVsZCgpPy5pc1Zpc2libGUgJiYgZmllbGQoKT8uY29uZmlnRGF0YT8uZGlnaXRCb3NzVGV4dFwiPlxuICA8c3BhbiBjbGFzcz1cInBheS1nZXQtY2FyZC1kaWdpdC1ib3NzLXRleHRcIj57e2ZpZWxkKCk/LmNvbmZpZ0RhdGE/LmRpZ2l0Qm9zc1RleHR9fTwvc3Bhbj5cbjwvZGl2PlxuIl19

package/fesm2022/master-control.mjs CHANGED Viewed

@@ -7023,7 +7023,16 @@ class AnnuityCalculatorRadioComponent {
         });
     }
     ngAfterViewInit() {
-        if (this.inputValue !== null && this.inputValue !== undefined) {
+        const f = this.field();
+        const selectVal = f?.configData?.selectValue;
+        if (selectVal !== null && selectVal !== undefined && selectVal !== '') {
+            const matchedOption = f?.options?.find((opt) => opt.value === selectVal);
+            if (matchedOption) {
+                this.inputValue = selectVal;
+                setTimeout(() => this.updateArrowPosition(), 0);
+            }
+        }
+        else if (this.inputValue !== null && this.inputValue !== undefined) {
             setTimeout(() => this.updateArrowPosition(), 0);
         }
     }
@@ -7089,7 +7098,7 @@ class AnnuityCalculatorRadioComponent {
                 useExisting: forwardRef(() => AnnuityCalculatorRadioComponent),
                 multi: 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()?.fieldName\"\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?.isShowCard\">\n\n    <div class=\"acr-card\">\n    <div class=\"acr-sub-label\" *ngIf=\"field()?.configData?.subLabel\">\n      {{ field()?.configData?.subLabel }}\n    </div>\n\n    <div class=\"acr-cards-row col-md-3 col-sm-6 col-xs-12 col-lg-3\">\n      <div\n        class=\"acr-card-option\"\n        *ngFor=\"let card of field()?.configData?.cardsValue\"\n        [class.selected]=\"value === card.value\"\n        [class.disabled]=\"card.disabled\"\n        (click)=\"selectCard(card)\"\n      >\n        <!-- Hidden native radio input \u2014 enables proper [id]/[name] binding for form semantics. -->\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()?.fieldName\"\n          [value]=\"card.value\"\n          [checked]=\"value === card.value\"\n          (change)=\"selectCard(card)\"\n        />\n        <div class=\"acr-card-main-value\">\n          <span class=\"acr-card-main-value\">{{ card.mainValue }}</span><span class=\"acr-card-main-value\"></span>\n        </div>\n        <div class=\"acr-card-sub-value\">\n          <span class=\"acr-card-sub-value\">{{ card.subValue }}</span><span class=\"acr-card-sub-value\"></span>\n        </div>\n        <div class=\"acr-card-rate\">{{ card.growthRate }} Annuity Rate</div>\n        <div class=\"acr-card-details\">\n          <div class=\"acr-card-detail-row\">\n            <span>Guaranteed </span>\n            <span>:</span>\n            <strong>{{ card.guaranteed }}</strong>\n          </div>\n          <div class=\"acr-card-detail-row\">\n            <span>Variable </span>\n            <span>:</span>\n            <strong>{{ card.variable }}</strong>\n          </div>\n        </div>\n        <!-- <div class=\"acr-card-type\">\n          <button class=\"acr-card-type-btn\" [ngClass]=\"{\n      'btn-high': card.value === 'High',\n      'btn-medium': card.value === 'Medium',\n      'btn-low': card.value !== 'High' && card.value !== 'Medium'\n    }\">{{ card.value }} variable</button>\n        </div> -->\n      </div>\n    </div>\n     <!-- Note \u2014 full width, vertically aligned with radio group and card container -->\n  <div class=\"acr-note\" *ngIf=\"field()?.configData?.infoMessage\">\n    <strong>Note:</strong> {{ field()?.configData?.infoMessage }}\n  </div>\n  </div>\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;max-width:max-content;height:90px;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;margin-bottom:10px;padding-right:10px;padding-left: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;padding:18px 16px 28px;flex:0 0 calc((100% - 28px) / 3);max-width:calc((100% - 28px) / 3);min-width:0;box-sizing:border-box;cursor:pointer;display:flex;flex-direction:column;align-items:flex-start;-webkit-user-select:none;user-select:none;position:relative;overflow:visible}.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}\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 }] });
+        ], 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()?.fieldName\"\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?.isShowCard\">\n\n    <div class=\"acr-card\">\n    <div class=\"acr-sub-label\" *ngIf=\"field()?.configData?.subLabel\">\n      {{ field()?.configData?.subLabel }}\n    </div>\n\n    <div class=\"acr-cards-row  col-md-3 col-sm-6 col-xs-12 col-lg-3\">\n      <div\n        class=\"acr-card-option\"\n        *ngFor=\"let card of field()?.configData?.cardsValue\"\n        [class.selected]=\"value === card.value\"\n        [class.disabled]=\"card.disabled\"\n        (click)=\"selectCard(card)\"\n      >\n        <!-- Hidden native radio input \u2014 enables proper [id]/[name] binding for form semantics. -->\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()?.fieldName\"\n          [value]=\"card.value\"\n          [checked]=\"value === card.value\"\n          (change)=\"selectCard(card)\"\n        />\n        <div class=\"acr-card-main-value\">\n          <span class=\"acr-card-main-value\">{{ card.mainValue }}</span><span class=\"acr-card-main-value\"></span>\n        </div>\n        <div class=\"acr-card-sub-value\">\n          <span class=\"acr-card-sub-value\">{{ card.subValue }}</span><span class=\"acr-card-sub-value\"></span>\n        </div>\n        <div class=\"acr-card-rate\">{{ card.growthRate }} Annuity Rate</div>\n        <div class=\"acr-card-details\">\n          <div class=\"acr-card-detail-row\">\n            <span>Guaranteed </span>\n            <span>:</span>\n            <strong>{{ card.guaranteed }}</strong>\n          </div>\n          <div class=\"acr-card-detail-row\">\n            <span>Variable </span>\n            <span>:</span>\n            <strong>{{ card.variable }}</strong>\n          </div>\n        </div>\n        <!-- <div class=\"acr-card-type\">\n          <button class=\"acr-card-type-btn\" [ngClass]=\"{\n      'btn-high': card.value === 'High',\n      'btn-medium': card.value === 'Medium',\n      'btn-low': card.value !== 'High' && card.value !== 'Medium'\n    }\">{{ card.value }} variable</button>\n        </div> -->\n      </div>\n    </div>\n     <!-- Note \u2014 full width, vertically aligned with radio group and card container -->\n  <div class=\"acr-note\" *ngIf=\"field()?.configData?.infoMessage\">\n    <strong>Note:</strong> {{ field()?.configData?.infoMessage }}\n  </div>\n  </div>\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;max-width:max-content;height:90px;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;margin-bottom:10px;padding-right:10px;padding-left: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}\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 }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AnnuityCalculatorRadioComponent, decorators: [{
             type: Component,
@@ -7100,7 +7109,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                             useExisting: forwardRef(() => AnnuityCalculatorRadioComponent),
                             multi: true
                         }
-                    ], 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()?.fieldName\"\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?.isShowCard\">\n\n    <div class=\"acr-card\">\n    <div class=\"acr-sub-label\" *ngIf=\"field()?.configData?.subLabel\">\n      {{ field()?.configData?.subLabel }}\n    </div>\n\n    <div class=\"acr-cards-row col-md-3 col-sm-6 col-xs-12 col-lg-3\">\n      <div\n        class=\"acr-card-option\"\n        *ngFor=\"let card of field()?.configData?.cardsValue\"\n        [class.selected]=\"value === card.value\"\n        [class.disabled]=\"card.disabled\"\n        (click)=\"selectCard(card)\"\n      >\n        <!-- Hidden native radio input \u2014 enables proper [id]/[name] binding for form semantics. -->\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()?.fieldName\"\n          [value]=\"card.value\"\n          [checked]=\"value === card.value\"\n          (change)=\"selectCard(card)\"\n        />\n        <div class=\"acr-card-main-value\">\n          <span class=\"acr-card-main-value\">{{ card.mainValue }}</span><span class=\"acr-card-main-value\"></span>\n        </div>\n        <div class=\"acr-card-sub-value\">\n          <span class=\"acr-card-sub-value\">{{ card.subValue }}</span><span class=\"acr-card-sub-value\"></span>\n        </div>\n        <div class=\"acr-card-rate\">{{ card.growthRate }} Annuity Rate</div>\n        <div class=\"acr-card-details\">\n          <div class=\"acr-card-detail-row\">\n            <span>Guaranteed </span>\n            <span>:</span>\n            <strong>{{ card.guaranteed }}</strong>\n          </div>\n          <div class=\"acr-card-detail-row\">\n            <span>Variable </span>\n            <span>:</span>\n            <strong>{{ card.variable }}</strong>\n          </div>\n        </div>\n        <!-- <div class=\"acr-card-type\">\n          <button class=\"acr-card-type-btn\" [ngClass]=\"{\n      'btn-high': card.value === 'High',\n      'btn-medium': card.value === 'Medium',\n      'btn-low': card.value !== 'High' && card.value !== 'Medium'\n    }\">{{ card.value }} variable</button>\n        </div> -->\n      </div>\n    </div>\n     <!-- Note \u2014 full width, vertically aligned with radio group and card container -->\n  <div class=\"acr-note\" *ngIf=\"field()?.configData?.infoMessage\">\n    <strong>Note:</strong> {{ field()?.configData?.infoMessage }}\n  </div>\n  </div>\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;max-width:max-content;height:90px;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;margin-bottom:10px;padding-right:10px;padding-left: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;padding:18px 16px 28px;flex:0 0 calc((100% - 28px) / 3);max-width:calc((100% - 28px) / 3);min-width:0;box-sizing:border-box;cursor:pointer;display:flex;flex-direction:column;align-items:flex-start;-webkit-user-select:none;user-select:none;position:relative;overflow:visible}.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}\n"] }]
+                    ], 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()?.fieldName\"\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?.isShowCard\">\n\n    <div class=\"acr-card\">\n    <div class=\"acr-sub-label\" *ngIf=\"field()?.configData?.subLabel\">\n      {{ field()?.configData?.subLabel }}\n    </div>\n\n    <div class=\"acr-cards-row  col-md-3 col-sm-6 col-xs-12 col-lg-3\">\n      <div\n        class=\"acr-card-option\"\n        *ngFor=\"let card of field()?.configData?.cardsValue\"\n        [class.selected]=\"value === card.value\"\n        [class.disabled]=\"card.disabled\"\n        (click)=\"selectCard(card)\"\n      >\n        <!-- Hidden native radio input \u2014 enables proper [id]/[name] binding for form semantics. -->\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()?.fieldName\"\n          [value]=\"card.value\"\n          [checked]=\"value === card.value\"\n          (change)=\"selectCard(card)\"\n        />\n        <div class=\"acr-card-main-value\">\n          <span class=\"acr-card-main-value\">{{ card.mainValue }}</span><span class=\"acr-card-main-value\"></span>\n        </div>\n        <div class=\"acr-card-sub-value\">\n          <span class=\"acr-card-sub-value\">{{ card.subValue }}</span><span class=\"acr-card-sub-value\"></span>\n        </div>\n        <div class=\"acr-card-rate\">{{ card.growthRate }} Annuity Rate</div>\n        <div class=\"acr-card-details\">\n          <div class=\"acr-card-detail-row\">\n            <span>Guaranteed </span>\n            <span>:</span>\n            <strong>{{ card.guaranteed }}</strong>\n          </div>\n          <div class=\"acr-card-detail-row\">\n            <span>Variable </span>\n            <span>:</span>\n            <strong>{{ card.variable }}</strong>\n          </div>\n        </div>\n        <!-- <div class=\"acr-card-type\">\n          <button class=\"acr-card-type-btn\" [ngClass]=\"{\n      'btn-high': card.value === 'High',\n      'btn-medium': card.value === 'Medium',\n      'btn-low': card.value !== 'High' && card.value !== 'Medium'\n    }\">{{ card.value }} variable</button>\n        </div> -->\n      </div>\n    </div>\n     <!-- Note \u2014 full width, vertically aligned with radio group and card container -->\n  <div class=\"acr-note\" *ngIf=\"field()?.configData?.infoMessage\">\n    <strong>Note:</strong> {{ field()?.configData?.infoMessage }}\n  </div>\n  </div>\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;max-width:max-content;height:90px;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;margin-bottom:10px;padding-right:10px;padding-left: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}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { change: [{
                 type: Output
             }], growthRateChange: [{
@@ -7438,7 +7447,7 @@ class AnnuityPremiumCalculatorComponent {
             cssClass: null,
         },
         fieldName: 'minimumGuaranteedAnnuityPayout',
-        label: 'Annuity Payout',
+        label: 'Annuity',
         placeHolder: '',
         metaId: 'ALL_DP_DP_CTRL_amountTextbox_minimumGuaranteedAnnuityPayout_V1',
         isVisible: true,
@@ -8022,7 +8031,7 @@ class AnnuityPremiumCalculatorComponent {
     annuitypayoutObj = {
         "controlType": "select",
         "fieldName": "annuityPayoutOption",
-        "label": "Minimum Guaranteed Annuity Payout",
+        "label": "Premium Payment Frequency",
         "placeHolder": "Select",
         "metaId": "ALL_COM_GEN_CTRL_select_annuityPayoutOption_V1",
         "isVisible": true,
@@ -8117,7 +8126,7 @@ class AnnuityPremiumCalculatorComponent {
     minimumAnnuityPayoutfrequencyObj = {
         "controlType": "select",
         "fieldName": "annuityPayoutFrequencyOption",
-        "label": "Minimum Guaranteed Annuity Payout",
+        "label": "Annuity Payout Frequency",
         "placeHolder": "Select",
         "metaId": "ALL_COM_GEN_CTRL_select_annuityPayoutFrequencyOption_V1",
         "isVisible": true,
@@ -8371,7 +8380,7 @@ class AnnuityPremiumCalculatorComponent {
         this.onGrowthRateOptionSelected.emit();
     }
     onAnnuityPremiumValueChange(value) {
-        this.annuityPremium = value;
+        this.annuityPremium['textValue'] = value;
         this.validations.ispremiumEntry = false;
         if (this.masterService.checkIfValueIsEmpty(this.annuityPremium['textValue'])) {
             this.validations.ispremiumEntry = true;
@@ -8387,7 +8396,7 @@ class AnnuityPremiumCalculatorComponent {
         }
     }
     onMinPremiumValueChange(value) {
-        this.minumumAnnuityPayout = value;
+        this.minumumAnnuityPayout['textValue'] = value;
         this.onMinimumPremiumValueChange.emit(value);
         //convert to words
         if (!this.masterService.checkIfValueIsEmpty(this.minumumAnnuityPayout['textValue']) && !this.masterService.checkIfValueIsEmpty(this.minumumAnnuityPayout['selectValue'])) {
@@ -8436,7 +8445,7 @@ class AnnuityPremiumCalculatorComponent {
         return str ? str + ' Only' : '';
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AnnuityPremiumCalculatorComponent, deps: [{ token: MasterControlService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: AnnuityPremiumCalculatorComponent, isStandalone: true, selector: "lib-annuity-premium-calculator", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, 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;\">\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=\"col-5 col-lg-5 d-flex flex-column p-0\">\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=\"col-2 col-lg-2 d-flex justify-content-center align-items-center\"\n        style=\"display: flex; align-items: flex-end; transform: translate(0px, 6px); position: relative; height: auto; min-height: 100%;\">\n        <!-- Top line -->\n        <div style=\"position: absolute; left: 50%; transform: translateX(-50%); width: 1px; height: calc(50% + 24px); top: -37px; 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=\"col-5 col-lg-5 d-flex flex-column p-0\" *ngIf=\"minimumAnnuityPayoutObj.isVisible; else emptyRightCol\">\n        <lib-amount-textbox [field]=\"minimumAnnuityPayoutObj\" [(ngModel)]=\"minumumAnnuityPayout['textValue']\"\n          (ngModelChange)=\"onMinPremiumValueChange($event)\" />\n        <div class=\"annuity-mat-hint\" *ngIf=\"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\">\u2197</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-5 col-lg-5 d-flex flex-column p-0\">\n        <lib-select [field]=\"minimumAnnuityPayoutfrequencyObj\" [(ngModel)]=\"minumumAnnuityPayout['selectValue']\"\n          (ngModelChange)=\"onMinPremiumValueChange($event)\" />\n      </div>\n\n      <div class=\"col-2 col-lg-2\"></div>\n\n      <div class=\"col-5 col-lg-5 d-flex flex-column justify-content-center p-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\">\n            {{digitBossSwitch?.digitBossText}} <span class=\"realistic-picture-highlight\">{{digitBossSwitch?.digitBossValue}}</span>\n          </span>\n        </div>\n      </div>\n\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\">&#64;{{annuityTableCalculator.annuitycalculatorTable2val1}}</div>\n            <div class=\"table-row\">&#64;{{annuityTableCalculator.annuitycalculatorTable2val2}}</div>\n            <div class=\"table-row\">&#64;{{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        [(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-color:#333;color:#fff;display:flex;align-items:center;padding:8px 16px;border-radius:4px;margin-bottom:16px;gap:8px;font-size:12px;min-height:16px;opacity:1;transform:rotate(0)}.digit-boss-banner ::ng-deep .toggle-background{margin-top:0!important;padding:0!important;background-color:transparent!important;border:none!important}.digit-boss-banner ::ng-deep .toggle_switch{margin-top:0!important;gap:0!important}.digit-boss-text{display:flex;align-items:center;gap:4px;white-space:nowrap}.highlight{color:#fb0;font-weight:700}.arrow-icon{color:#fb0;margin-left:4px;font-size:14px}.generateSummary{margin-right:.4rem;margin-left:.4rem}.realistic-picture-card{display:flex;flex-direction:column;gap:4px;background-color:#cce0f5;border-radius:4px;padding:4px 6px;font-size:8px;color:#06c;line-height:1.5;box-sizing:border-box;justify-content:center}.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}\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: ["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"] }] });
+    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;\">\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=\"col-5 col-lg-5 d-flex flex-column p-0\">\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=\"col-2 col-lg-2 d-flex justify-content-center align-items-center\"\n        style=\"display: flex; align-items: flex-end; transform: translate(0px, 6px); position: relative; height: auto; min-height: 100%;\">\n        <!-- Top line -->\n        <div style=\"position: absolute; left: 50%; transform: translateX(-50%); width: 1px; height: calc(50% + 24px); top: -37px; 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=\"col-5 col-lg-5 d-flex flex-column p-0\">\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\">\u2197</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 p-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\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\">&#64;{{annuityTableCalculator.annuitycalculatorTable2val1}}</div>\n            <div class=\"table-row\">&#64;{{annuityTableCalculator.annuitycalculatorTable2val2}}</div>\n            <div class=\"table-row\">&#64;{{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        [(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-color:#333;color:#fff;display:flex;align-items:center;padding:8px 16px;border-radius:4px;margin-bottom:16px;gap:8px;font-size:12px;min-height:16px;opacity:1;transform:rotate(0)}.digit-boss-banner ::ng-deep .toggle-background{margin-top:0!important;padding:0!important;background-color:transparent!important;border:none!important}.digit-boss-banner ::ng-deep .toggle_switch{margin-top:0!important;gap:0!important}.digit-boss-text{display:flex;align-items:center;gap:4px;white-space:nowrap}.highlight{color:#fb0;font-weight:700}.arrow-icon{color:#fb0;margin-left:4px;font-size:14px}.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}\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: ["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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AnnuityPremiumCalculatorComponent, decorators: [{
             type: Component,
@@ -8453,7 +8462,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         RadioComponent,
                         CommonModule,
                         FormsModule
-                    ], template: "<div class=\"card px-3\" style=\"padding: 16px;\">\n  <div class=\"row\">\n    <h4 class=\"card-main-title\"><span style=\"margin-right: 12px;\"><img\n          src=\"https://cdn.godigit.com/retail-life/calculator.svg\" alt=\"annuity calculator\"></span>Here's Your Premium to Annuity Calculator</h4>\n  </div>\n  <!-- <div class=\"row\"> -->\n  <div class=\"card pb-4 px-4\" style=\"border-bottom-left-radius: 0px; border-bottom-right-radius: 0px;\">\n    <!-- <div class=\"custom-grid-template\">\n\n    </div> -->\n\n    <div class=\"row mx-auto\" style=\"transform: translate(0px, -58%);\">\n      <lib-toggle class=\"col-auto\" [field]=\"annuityPremiumToggleObj\" />\n    </div>\n    <!-- </div> -->\n    <div class=\" col-12\" style=\"\n    justify-content: center;\n    flex-direction: row;\n    display: flex;\n\">\n      <div class=\"col-5 col-lg-5 d-flex flex-column p-0\">\n        <lib-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=\"col-2 col-lg-2 d-flex justify-content-center align-items-center\"\n        style=\"display: flex; align-items: flex-end; transform: translate(0px, 6px); position: relative; height: auto; min-height: 100%;\">\n        <!-- Top line -->\n        <div style=\"position: absolute; left: 50%; transform: translateX(-50%); width: 1px; height: calc(50% + 24px); top: -37px; 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=\"col-5 col-lg-5 d-flex flex-column p-0\" *ngIf=\"minimumAnnuityPayoutObj.isVisible; else emptyRightCol\">\n        <lib-amount-textbox [field]=\"minimumAnnuityPayoutObj\" [(ngModel)]=\"minumumAnnuityPayout['textValue']\"\n          (ngModelChange)=\"onMinPremiumValueChange($event)\" />\n        <div class=\"annuity-mat-hint\" *ngIf=\"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\">\u2197</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-5 col-lg-5 d-flex flex-column p-0\">\n        <lib-select [field]=\"minimumAnnuityPayoutfrequencyObj\" [(ngModel)]=\"minumumAnnuityPayout['selectValue']\"\n          (ngModelChange)=\"onMinPremiumValueChange($event)\" />\n      </div>\n\n      <div class=\"col-2 col-lg-2\"></div>\n\n      <div class=\"col-5 col-lg-5 d-flex flex-column justify-content-center p-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\">\n            {{digitBossSwitch?.digitBossText}} <span class=\"realistic-picture-highlight\">{{digitBossSwitch?.digitBossValue}}</span>\n          </span>\n        </div>\n      </div>\n\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\">&#64;{{annuityTableCalculator.annuitycalculatorTable2val1}}</div>\n            <div class=\"table-row\">&#64;{{annuityTableCalculator.annuitycalculatorTable2val2}}</div>\n            <div class=\"table-row\">&#64;{{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        [(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-color:#333;color:#fff;display:flex;align-items:center;padding:8px 16px;border-radius:4px;margin-bottom:16px;gap:8px;font-size:12px;min-height:16px;opacity:1;transform:rotate(0)}.digit-boss-banner ::ng-deep .toggle-background{margin-top:0!important;padding:0!important;background-color:transparent!important;border:none!important}.digit-boss-banner ::ng-deep .toggle_switch{margin-top:0!important;gap:0!important}.digit-boss-text{display:flex;align-items:center;gap:4px;white-space:nowrap}.highlight{color:#fb0;font-weight:700}.arrow-icon{color:#fb0;margin-left:4px;font-size:14px}.generateSummary{margin-right:.4rem;margin-left:.4rem}.realistic-picture-card{display:flex;flex-direction:column;gap:4px;background-color:#cce0f5;border-radius:4px;padding:4px 6px;font-size:8px;color:#06c;line-height:1.5;box-sizing:border-box;justify-content:center}.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}\n"] }]
+                    ], template: "<div class=\"card px-3\" style=\"padding: 16px;\">\n  <div class=\"row\">\n    <h4 class=\"card-main-title\"><span style=\"margin-right: 12px;\"><img\n          src=\"https://cdn.godigit.com/retail-life/calculator.svg\" alt=\"annuity calculator\"></span>Here's Your Premium to Annuity Calculator</h4>\n  </div>\n  <!-- <div class=\"row\"> -->\n  <div class=\"card pb-4 px-4\" style=\"border-bottom-left-radius: 0px; border-bottom-right-radius: 0px;\">\n    <!-- <div class=\"custom-grid-template\">\n\n    </div> -->\n\n    <div class=\"row mx-auto\" style=\"transform: translate(0px, -58%);\">\n      <lib-toggle class=\"col-auto\" [field]=\"annuityPremiumToggleObj\" />\n    </div>\n    <!-- </div> -->\n    <div class=\" col-12\" style=\"\n    justify-content: center;\n    flex-direction: row;\n    display: flex;\n\">\n      <div class=\"col-5 col-lg-5 d-flex flex-column p-0\">\n        <lib-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=\"col-2 col-lg-2 d-flex justify-content-center align-items-center\"\n        style=\"display: flex; align-items: flex-end; transform: translate(0px, 6px); position: relative; height: auto; min-height: 100%;\">\n        <!-- Top line -->\n        <div style=\"position: absolute; left: 50%; transform: translateX(-50%); width: 1px; height: calc(50% + 24px); top: -37px; 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=\"col-5 col-lg-5 d-flex flex-column p-0\">\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\">\u2197</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 p-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\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\">&#64;{{annuityTableCalculator.annuitycalculatorTable2val1}}</div>\n            <div class=\"table-row\">&#64;{{annuityTableCalculator.annuitycalculatorTable2val2}}</div>\n            <div class=\"table-row\">&#64;{{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        [(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-color:#333;color:#fff;display:flex;align-items:center;padding:8px 16px;border-radius:4px;margin-bottom:16px;gap:8px;font-size:12px;min-height:16px;opacity:1;transform:rotate(0)}.digit-boss-banner ::ng-deep .toggle-background{margin-top:0!important;padding:0!important;background-color:transparent!important;border:none!important}.digit-boss-banner ::ng-deep .toggle_switch{margin-top:0!important;gap:0!important}.digit-boss-text{display:flex;align-items:center;gap:4px;white-space:nowrap}.highlight{color:#fb0;font-weight:700}.arrow-icon{color:#fb0;margin-left:4px;font-size:14px}.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}\n"] }]
         }], ctorParameters: () => [{ type: MasterControlService }], propDecorators: { triggerValidation: [{
                 type: Input
             }], annuityRadioRef: [{