master-control 0.5.3 → 0.5.4

package/esm2022/lib/toggle/toggle.component.mjs

@@ -47,7 +47,7 @@ export class ToggleComponent {
                 useExisting: forwardRef(() => ToggleComponent),
                 multi: true,
             },
-        ], ngImport: i0, template: "<div class=\"\" *ngIf=\"field() && field()?.isVisible && field().isShowLabel\" [ngStyle]=\"{\n  '--custom-toggle-bg-color': field()?.controlStyle?.background,\n  '--custom-toggle-border-color': field()?.controlStyle?.borderColor ,\n  '--custom-toggle-border-width': field()?.controlStyle?.borderWidth ,\n  '--custom-toggle-border-radius': field()?.controlStyle?.borderRadius,\n  '--custom-toggle-width': field()?.controlStyle?.width,\n  }\"\n  class=\"card toggle-background mt-2\"\n  >\n    <div class=\"toggle_switch mt-2\">\n      <div *ngIf=\"field().configData?.leftLabel\" [ngStyle]=\"{\n        '--custom-toggle-font-size': field()?.controlStyle?.fontSize ,\n        '--custom-toggle-font-weight': field()?.controlStyle?.fontWeight ,\n        '--custom-toggle-font-family': field()?.controlStyle?.fontFamily ,\n        '--custom-toggle-font-color': field()?.controlStyle?.color ,\n        }\" class=\"toggle-text\">\n        <div>{{field().configData?.leftLabel}}</div>\n      </div>\n      <div class=\"mt-1\">\n        <label class=\"switch\">\n          @if(reactiveFormControlobject()) {\n            <input\n              type=\"checkbox\"\n              [name]=\"field()?.fieldNameAttribute\"\n              [id]=\"field()?.fieldName\"\n              [checked]=\"inputValue\"\n              [disabled]=\"field()?.isDisable\"\n              [required]=\"field()?.validators?.isRequired\"\n              [formControl]=\"reactiveFormControlobject()\"\n              (change)=\"onToggleChange($event)\"\n            />\n          }@else {\n            <input\n              type=\"checkbox\"\n              [name]=\"field()?.fieldNameAttribute\"\n              [id]=\"field()?.fieldName\"\n              [checked]=\"inputValue\"\n              [disabled]=\"field()?.isDisable\"\n              [required]=\"field()?.validators?.isRequired\"\n              (change)=\"onToggleChange($event)\"\n            />\n          }\n          <span class=\"slider round\"></span>\n        </label>\n      </div>\n      <div [ngStyle]=\"{\n        '--custom-toggle-font-size': field()?.controlStyle?.fontSize ,\n        '--custom-toggle-font-weight': field()?.controlStyle?.fontWeight ,\n        '--custom-toggle-font-family': field()?.controlStyle?.fontFamily ,\n        '--custom-toggle-font-color': field()?.controlStyle?.color ,\n        }\" class=\"toggle-text mb-2\">\n        <div>{{field()?.label}}</div>\n        <div style=\"font-size: 10px; font-weight: 400;\" *ngIf=\"field().configData?.subLabel\">{{field()?.configData?.subLabel}} <img alt=\"\" [src]=\"field()?.imageUrl\" *ngIf=\"field()?.imageUrl\" /> </div>\n      </div>\n    </div>\n  </div>\n", styles: ["*{font-family:mulish!important}::ng-deep .toggle-background{background-color:var(--custom-toggle-bg-color , #f5f5f5)!important;padding:2px 8px;width:var(--custom-toggle-width , 100%)!important;box-shadow:none}::ng-deep .toggle-background{border-color:var(--custom-toggle-border-color , transparent)!important;border-radius:var(--custom-toggle-border-radius , 4px)!important;border-width:var(--custom-toggle-border-width , 1px)!important}::ng-deep .toggle_switch{display:flex;align-items:center;gap:10px;font-size:17px;font-weight:400;font-family:Mulish;color:#444}::ng-deep .switch{position:relative;display:inline-block;width:34px;height:18px}::ng-deep .switch input{opacity:0;width:0;height:0}::ng-deep .slider{position:absolute;cursor:pointer;inset:0;background-color:#ddd;-webkit-transition:.4s;transition:.4s}::ng-deep .slider:before{position:absolute;content:\"\";height:11px;width:11px;left:4px;bottom:4px;background-color:#fff;-webkit-transition:.4s;transition:.4s}::ng-deep .slider.round{border-radius:34px}::ng-deep input:checked+.slider{background-color:#fb0}::ng-deep input:checked+.slider:before{-webkit-transform:translateX(16px);-ms-transform:translateX(16px);transform:translate(16px)}::ng-deep .slider.round:before{border-radius:50%}::ng-deep .remove-border{border:none!important;outline:none!important;box-shadow:none!important}::ng-deep .remove-border:focus-visible{border:none!important;outline:none!important;box-shadow:none!important}::ng-deep .mdc-checkbox__native-control:enabled:checked~.mdc-checkbox__background,.mdc-checkbox__native-control:enabled:indeterminate~.mdc-checkbox__background{border-color:#fb0!important;background-color:#fb0!important;border-radius:4px!important}::ng-deep .mdc-checkbox__checkmark{color:#fff!important}::ng-deep .mdc-checkbox__background{border:1px solid #dadada!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.CheckboxRequiredValidator, selector: "input[type=checkbox][required][formControlName],input[type=checkbox][required][formControl],input[type=checkbox][required][ngModel]" }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
+        ], ngImport: i0, template: "<div class=\"\" *ngIf=\"field() && field()?.isVisible && field().isShowLabel\" [ngStyle]=\"{\n  '--custom-toggle-bg-color': field()?.controlStyle?.background,\n  '--custom-toggle-border-color': field()?.controlStyle?.borderColor ,\n  '--custom-toggle-border-width': field()?.controlStyle?.borderWidth ,\n  '--custom-toggle-border-radius': field()?.controlStyle?.borderRadius,\n  '--custom-toggle-width': field()?.controlStyle?.width,\n  }\"\n  class=\"card toggle-background mt-2\"\n  >\n    <div class=\"toggle_switch\">\n      <div *ngIf=\"field().configData?.leftLabel\" [ngStyle]=\"{\n        '--custom-toggle-font-size': field()?.controlStyle?.fontSize ,\n        '--custom-toggle-font-weight': field()?.controlStyle?.fontWeight ,\n        '--custom-toggle-font-family': field()?.controlStyle?.fontFamily ,\n        '--custom-toggle-font-color': field()?.controlStyle?.color ,\n        }\" class=\"toggle-text\">\n        <div>{{field().configData?.leftLabel}}</div>\n      </div>\n      <div class=\"payout-switch\">\n        <label class=\"switch\">\n          @if(reactiveFormControlobject()) {\n            <input\n              type=\"checkbox\"\n              [name]=\"field()?.fieldNameAttribute\"\n              [id]=\"field()?.fieldName\"\n              [checked]=\"inputValue\"\n              [disabled]=\"field()?.isDisable\"\n              [required]=\"field()?.validators?.isRequired\"\n              [formControl]=\"reactiveFormControlobject()\"\n              (change)=\"onToggleChange($event)\"\n            />\n          }@else {\n            <input\n              type=\"checkbox\"\n              [name]=\"field()?.fieldNameAttribute\"\n              [id]=\"field()?.fieldName\"\n              [checked]=\"inputValue\"\n              [disabled]=\"field()?.isDisable\"\n              [required]=\"field()?.validators?.isRequired\"\n              (change)=\"onToggleChange($event)\"\n            />\n          }\n          <span class=\"slider round\"></span>\n        </label>\n      </div>\n      <div [ngStyle]=\"{\n        '--custom-toggle-font-size': field()?.controlStyle?.fontSize ,\n        '--custom-toggle-font-weight': field()?.controlStyle?.fontWeight ,\n        '--custom-toggle-font-family': field()?.controlStyle?.fontFamily ,\n        '--custom-toggle-font-color': field()?.controlStyle?.color ,\n        }\" class=\"toggle-text\">\n        <div>{{field()?.label}}</div>\n        <div style=\"font-size: 10px; font-weight: 400;\" *ngIf=\"field().configData?.subLabel\">{{field()?.configData?.subLabel}} <img alt=\"\" [src]=\"field()?.imageUrl\" *ngIf=\"field()?.imageUrl\" /> </div>\n      </div>\n    </div>\n  </div>\n", styles: ["*{font-family:mulish!important}::ng-deep .toggle-background{background-color:var(--custom-toggle-bg-color , #f5f5f5)!important;padding:6px 9px;width:var(--custom-toggle-width , 100%)!important;box-shadow:none}::ng-deep .toggle-background{border-color:var(--custom-toggle-border-color , transparent)!important;border-radius:var(--custom-toggle-border-radius , 4px)!important;border-width:var(--custom-toggle-border-width , 1px)!important}::ng-deep .toggle_switch{display:flex;align-items:center;gap:8px;font-size:17px;font-weight:400;font-family:Mulish;color:#444}::ng-deep .switch{position:relative;display:inline-block;width:34px;height:18px}::ng-deep .switch input{opacity:0;width:0;height:0}::ng-deep .slider{position:absolute;cursor:pointer;inset:0;background-color:#ddd;-webkit-transition:.4s;transition:.4s}::ng-deep .slider:before{position:absolute;content:\"\";height:11px;width:11px;left:4px;bottom:4px;background-color:#fff;-webkit-transition:.4s;transition:.4s}::ng-deep .slider.round{border-radius:34px}::ng-deep input:checked+.slider{background-color:#fb0}::ng-deep input:checked+.slider:before{-webkit-transform:translateX(16px);-ms-transform:translateX(16px);transform:translate(16px)}::ng-deep .slider.round:before{border-radius:50%}::ng-deep .remove-border{border:none!important;outline:none!important;box-shadow:none!important}::ng-deep .remove-border:focus-visible{border:none!important;outline:none!important;box-shadow:none!important}::ng-deep .mdc-checkbox__native-control:enabled:checked~.mdc-checkbox__background,.mdc-checkbox__native-control:enabled:indeterminate~.mdc-checkbox__background{border-color:#fb0!important;background-color:#fb0!important;border-radius:4px!important}::ng-deep .mdc-checkbox__checkmark{color:#fff!important}::ng-deep .mdc-checkbox__background{border:1px solid #dadada!important}.payout-switch{display:flex;align-items:center;justify-content:center;gap:8px 10px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.CheckboxRequiredValidator, selector: "input[type=checkbox][required][formControlName],input[type=checkbox][required][formControl],input[type=checkbox][required][ngModel]" }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ToggleComponent, decorators: [{
             type: Component,
@@ -57,8 +57,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                             useExisting: forwardRef(() => ToggleComponent),
                             multi: true,
                         },
-                    ], template: "<div class=\"\" *ngIf=\"field() && field()?.isVisible && field().isShowLabel\" [ngStyle]=\"{\n  '--custom-toggle-bg-color': field()?.controlStyle?.background,\n  '--custom-toggle-border-color': field()?.controlStyle?.borderColor ,\n  '--custom-toggle-border-width': field()?.controlStyle?.borderWidth ,\n  '--custom-toggle-border-radius': field()?.controlStyle?.borderRadius,\n  '--custom-toggle-width': field()?.controlStyle?.width,\n  }\"\n  class=\"card toggle-background mt-2\"\n  >\n    <div class=\"toggle_switch mt-2\">\n      <div *ngIf=\"field().configData?.leftLabel\" [ngStyle]=\"{\n        '--custom-toggle-font-size': field()?.controlStyle?.fontSize ,\n        '--custom-toggle-font-weight': field()?.controlStyle?.fontWeight ,\n        '--custom-toggle-font-family': field()?.controlStyle?.fontFamily ,\n        '--custom-toggle-font-color': field()?.controlStyle?.color ,\n        }\" class=\"toggle-text\">\n        <div>{{field().configData?.leftLabel}}</div>\n      </div>\n      <div class=\"mt-1\">\n        <label class=\"switch\">\n          @if(reactiveFormControlobject()) {\n            <input\n              type=\"checkbox\"\n              [name]=\"field()?.fieldNameAttribute\"\n              [id]=\"field()?.fieldName\"\n              [checked]=\"inputValue\"\n              [disabled]=\"field()?.isDisable\"\n              [required]=\"field()?.validators?.isRequired\"\n              [formControl]=\"reactiveFormControlobject()\"\n              (change)=\"onToggleChange($event)\"\n            />\n          }@else {\n            <input\n              type=\"checkbox\"\n              [name]=\"field()?.fieldNameAttribute\"\n              [id]=\"field()?.fieldName\"\n              [checked]=\"inputValue\"\n              [disabled]=\"field()?.isDisable\"\n              [required]=\"field()?.validators?.isRequired\"\n              (change)=\"onToggleChange($event)\"\n            />\n          }\n          <span class=\"slider round\"></span>\n        </label>\n      </div>\n      <div [ngStyle]=\"{\n        '--custom-toggle-font-size': field()?.controlStyle?.fontSize ,\n        '--custom-toggle-font-weight': field()?.controlStyle?.fontWeight ,\n        '--custom-toggle-font-family': field()?.controlStyle?.fontFamily ,\n        '--custom-toggle-font-color': field()?.controlStyle?.color ,\n        }\" class=\"toggle-text mb-2\">\n        <div>{{field()?.label}}</div>\n        <div style=\"font-size: 10px; font-weight: 400;\" *ngIf=\"field().configData?.subLabel\">{{field()?.configData?.subLabel}} <img alt=\"\" [src]=\"field()?.imageUrl\" *ngIf=\"field()?.imageUrl\" /> </div>\n      </div>\n    </div>\n  </div>\n", styles: ["*{font-family:mulish!important}::ng-deep .toggle-background{background-color:var(--custom-toggle-bg-color , #f5f5f5)!important;padding:2px 8px;width:var(--custom-toggle-width , 100%)!important;box-shadow:none}::ng-deep .toggle-background{border-color:var(--custom-toggle-border-color , transparent)!important;border-radius:var(--custom-toggle-border-radius , 4px)!important;border-width:var(--custom-toggle-border-width , 1px)!important}::ng-deep .toggle_switch{display:flex;align-items:center;gap:10px;font-size:17px;font-weight:400;font-family:Mulish;color:#444}::ng-deep .switch{position:relative;display:inline-block;width:34px;height:18px}::ng-deep .switch input{opacity:0;width:0;height:0}::ng-deep .slider{position:absolute;cursor:pointer;inset:0;background-color:#ddd;-webkit-transition:.4s;transition:.4s}::ng-deep .slider:before{position:absolute;content:\"\";height:11px;width:11px;left:4px;bottom:4px;background-color:#fff;-webkit-transition:.4s;transition:.4s}::ng-deep .slider.round{border-radius:34px}::ng-deep input:checked+.slider{background-color:#fb0}::ng-deep input:checked+.slider:before{-webkit-transform:translateX(16px);-ms-transform:translateX(16px);transform:translate(16px)}::ng-deep .slider.round:before{border-radius:50%}::ng-deep .remove-border{border:none!important;outline:none!important;box-shadow:none!important}::ng-deep .remove-border:focus-visible{border:none!important;outline:none!important;box-shadow:none!important}::ng-deep .mdc-checkbox__native-control:enabled:checked~.mdc-checkbox__background,.mdc-checkbox__native-control:enabled:indeterminate~.mdc-checkbox__background{border-color:#fb0!important;background-color:#fb0!important;border-radius:4px!important}::ng-deep .mdc-checkbox__checkmark{color:#fff!important}::ng-deep .mdc-checkbox__background{border:1px solid #dadada!important}\n"] }]
+                    ], template: "<div class=\"\" *ngIf=\"field() && field()?.isVisible && field().isShowLabel\" [ngStyle]=\"{\n  '--custom-toggle-bg-color': field()?.controlStyle?.background,\n  '--custom-toggle-border-color': field()?.controlStyle?.borderColor ,\n  '--custom-toggle-border-width': field()?.controlStyle?.borderWidth ,\n  '--custom-toggle-border-radius': field()?.controlStyle?.borderRadius,\n  '--custom-toggle-width': field()?.controlStyle?.width,\n  }\"\n  class=\"card toggle-background mt-2\"\n  >\n    <div class=\"toggle_switch\">\n      <div *ngIf=\"field().configData?.leftLabel\" [ngStyle]=\"{\n        '--custom-toggle-font-size': field()?.controlStyle?.fontSize ,\n        '--custom-toggle-font-weight': field()?.controlStyle?.fontWeight ,\n        '--custom-toggle-font-family': field()?.controlStyle?.fontFamily ,\n        '--custom-toggle-font-color': field()?.controlStyle?.color ,\n        }\" class=\"toggle-text\">\n        <div>{{field().configData?.leftLabel}}</div>\n      </div>\n      <div class=\"payout-switch\">\n        <label class=\"switch\">\n          @if(reactiveFormControlobject()) {\n            <input\n              type=\"checkbox\"\n              [name]=\"field()?.fieldNameAttribute\"\n              [id]=\"field()?.fieldName\"\n              [checked]=\"inputValue\"\n              [disabled]=\"field()?.isDisable\"\n              [required]=\"field()?.validators?.isRequired\"\n              [formControl]=\"reactiveFormControlobject()\"\n              (change)=\"onToggleChange($event)\"\n            />\n          }@else {\n            <input\n              type=\"checkbox\"\n              [name]=\"field()?.fieldNameAttribute\"\n              [id]=\"field()?.fieldName\"\n              [checked]=\"inputValue\"\n              [disabled]=\"field()?.isDisable\"\n              [required]=\"field()?.validators?.isRequired\"\n              (change)=\"onToggleChange($event)\"\n            />\n          }\n          <span class=\"slider round\"></span>\n        </label>\n      </div>\n      <div [ngStyle]=\"{\n        '--custom-toggle-font-size': field()?.controlStyle?.fontSize ,\n        '--custom-toggle-font-weight': field()?.controlStyle?.fontWeight ,\n        '--custom-toggle-font-family': field()?.controlStyle?.fontFamily ,\n        '--custom-toggle-font-color': field()?.controlStyle?.color ,\n        }\" class=\"toggle-text\">\n        <div>{{field()?.label}}</div>\n        <div style=\"font-size: 10px; font-weight: 400;\" *ngIf=\"field().configData?.subLabel\">{{field()?.configData?.subLabel}} <img alt=\"\" [src]=\"field()?.imageUrl\" *ngIf=\"field()?.imageUrl\" /> </div>\n      </div>\n    </div>\n  </div>\n", styles: ["*{font-family:mulish!important}::ng-deep .toggle-background{background-color:var(--custom-toggle-bg-color , #f5f5f5)!important;padding:6px 9px;width:var(--custom-toggle-width , 100%)!important;box-shadow:none}::ng-deep .toggle-background{border-color:var(--custom-toggle-border-color , transparent)!important;border-radius:var(--custom-toggle-border-radius , 4px)!important;border-width:var(--custom-toggle-border-width , 1px)!important}::ng-deep .toggle_switch{display:flex;align-items:center;gap:8px;font-size:17px;font-weight:400;font-family:Mulish;color:#444}::ng-deep .switch{position:relative;display:inline-block;width:34px;height:18px}::ng-deep .switch input{opacity:0;width:0;height:0}::ng-deep .slider{position:absolute;cursor:pointer;inset:0;background-color:#ddd;-webkit-transition:.4s;transition:.4s}::ng-deep .slider:before{position:absolute;content:\"\";height:11px;width:11px;left:4px;bottom:4px;background-color:#fff;-webkit-transition:.4s;transition:.4s}::ng-deep .slider.round{border-radius:34px}::ng-deep input:checked+.slider{background-color:#fb0}::ng-deep input:checked+.slider:before{-webkit-transform:translateX(16px);-ms-transform:translateX(16px);transform:translate(16px)}::ng-deep .slider.round:before{border-radius:50%}::ng-deep .remove-border{border:none!important;outline:none!important;box-shadow:none!important}::ng-deep .remove-border:focus-visible{border:none!important;outline:none!important;box-shadow:none!important}::ng-deep .mdc-checkbox__native-control:enabled:checked~.mdc-checkbox__background,.mdc-checkbox__native-control:enabled:indeterminate~.mdc-checkbox__background{border-color:#fb0!important;background-color:#fb0!important;border-radius:4px!important}::ng-deep .mdc-checkbox__checkmark{color:#fff!important}::ng-deep .mdc-checkbox__background{border:1px solid #dadada!important}.payout-switch{display:flex;align-items:center;justify-content:center;gap:8px 10px}\n"] }]
         }], ctorParameters: () => [{ type: i1.MasterControlService }], propDecorators: { change: [{
                 type: Output
             }] } });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidG9nZ2xlLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL21hc3Rlci1jb250cm9sL3NyYy9saWIvdG9nZ2xlL3RvZ2dsZS5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9tYXN0ZXItY29udHJvbC9zcmMvbGliL3RvZ2dsZS90b2dnbGUuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLGlCQUFpQixDQUFDO0FBQy9DLE9BQU8sRUFBRSxTQUFTLEVBQUUsS0FBSyxFQUFFLE1BQU0sRUFBQyxZQUFZLEVBQUUsVUFBVSxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBRWxGLE9BQU8sRUFBd0IsaUJBQWlCLEVBQUUsbUJBQW1CLEVBQUUsTUFBTSxnQkFBZ0IsQ0FBQztBQUM5RixPQUFPLEVBQUUsNEJBQTRCLEVBQUUsTUFBTSw4QkFBOEIsQ0FBQzs7Ozs7QUFnQjVFLE1BQU0sT0FBTyxlQUFlO0lBQ1A7SUFBbkIsWUFBbUIsYUFBb0M7UUFBcEMsa0JBQWEsR0FBYixhQUFhLENBQXVCO0lBQUUsQ0FBQztJQUMxRCxLQUFLLEdBQVMsS0FBSyxDQUFDLFFBQVEsRUFBTyxDQUFDO0lBQ25DLFVBQVUsR0FBUSxLQUFLLENBQUM7SUFDeEIseUJBQXlCLEdBQVMsS0FBSyxFQUFPLENBQUM7SUFDaEQsU0FBUyxHQUFRLENBQUMsVUFBZSxFQUFFLEVBQUUsR0FBRSxDQUFDLENBQUM7SUFDekMsVUFBVSxHQUFRLEdBQUcsRUFBRSxHQUFFLENBQUMsQ0FBQztJQUUzQixtREFBbUQ7SUFDekMsTUFBTSxHQUFHLElBQUksWUFBWSxFQUFPLENBQUM7SUFFM0MsUUFBUTtRQUNOLDRCQUE0QixDQUFDLElBQUksQ0FBQyxLQUFLLEVBQUUsQ0FBQyxDQUFDO0lBQzdDLENBQUM7SUFFRCxVQUFVLENBQUMsR0FBUTtRQUNqQixJQUFJLENBQUMsVUFBVSxHQUFHLEdBQUcsQ0FBQztJQUN4QixDQUFDO0lBRUQsZ0JBQWdCLENBQUMsRUFBTztRQUN0QixJQUFJLENBQUMsU0FBUyxHQUFHLEVBQUUsQ0FBQztJQUN0QixDQUFDO0lBRUQsaUJBQWlCLENBQUMsRUFBTztRQUN2QixJQUFJLENBQUMsVUFBVSxHQUFHLEVBQUUsQ0FBQztJQUN2QixDQUFDO0lBRUQsZ0JBQWdCLENBQUUsVUFBbUI7UUFDbkMsa0NBQWtDO0lBQ3BDLENBQUM7SUFFRCxjQUFjLENBQUMsS0FBVTtRQUN2QixJQUFJLENBQUMsVUFBVSxHQUFHLEtBQUssQ0FBQyxNQUFNLENBQUMsT0FBTyxDQUFDO1FBQ3ZDLElBQUksQ0FBQyxTQUFTLENBQUMsSUFBSSxDQUFDLFVBQVUsQ0FBQyxDQUFDO1FBQ2hDLElBQUksQ0FBQyxVQUFVLEVBQUUsQ0FBQztRQUNsQiw0Q0FBNEM7UUFDNUMsSUFBSSxDQUFDLE1BQU0sQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLFVBQVUsQ0FBQyxDQUFDO0lBQ3BDLENBQUM7d0dBckNVLGVBQWU7NEZBQWYsZUFBZSwrWUFSZjtZQUNUO2dCQUNFLE9BQU8sRUFBRSxpQkFBaUI7Z0JBQzFCLFdBQVcsRUFBRSxVQUFVLENBQUMsR0FBRyxFQUFFLENBQUMsZUFBZSxDQUFDO2dCQUM5QyxLQUFLLEVBQUUsSUFBSTthQUNaO1NBQ0YsMEJDbEJILG9tRkF3REEsazJERC9DWSxZQUFZLHVOQUFFLG1CQUFtQjs7NEZBV2hDLGVBQWU7a0JBZDNCLFNBQVM7K0JBQ0UsWUFBWSxjQUNWLElBQUksV0FDUCxDQUFDLFlBQVksRUFBRSxtQkFBbUIsQ0FBQyxhQUdqQzt3QkFDVDs0QkFDRSxPQUFPLEVBQUUsaUJBQWlCOzRCQUMxQixXQUFXLEVBQUUsVUFBVSxDQUFDLEdBQUcsRUFBRSxnQkFBZ0IsQ0FBQzs0QkFDOUMsS0FBSyxFQUFFLElBQUk7eUJBQ1o7cUJBQ0Y7eUZBV1MsTUFBTTtzQkFBZixNQUFNIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tbW9uTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvY29tbW9uJztcbmltcG9ydCB7IENvbXBvbmVudCwgaW5wdXQsIE91dHB1dCxFdmVudEVtaXR0ZXIsIGZvcndhcmRSZWYgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IE1hc3RlckNvbnRyb2xTZXJ2aWNlIH0gZnJvbSAnLi4vbWFzdGVyLWNvbnRyb2wuc2VydmljZSc7XG5pbXBvcnQgeyBDb250cm9sVmFsdWVBY2Nlc3NvciwgTkdfVkFMVUVfQUNDRVNTT1IsIFJlYWN0aXZlRm9ybXNNb2R1bGUgfSBmcm9tICdAYW5ndWxhci9mb3Jtcyc7XG5pbXBvcnQgeyBpbml0aWFsaXplRmllbGROYW1lQXR0cmlidXRlIH0gZnJvbSAnLi4vZmllbGQtbmFtZS1hdHRyaWJ1dGUudXRpbCc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ2xpYi10b2dnbGUnLFxuICBzdGFuZGFsb25lOiB0cnVlLFxuICBpbXBvcnRzOiBbQ29tbW9uTW9kdWxlLCBSZWFjdGl2ZUZvcm1zTW9kdWxlXSxcbiAgdGVtcGxhdGVVcmw6ICcuL3RvZ2dsZS5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsOiAnLi90b2dnbGUuY29tcG9uZW50LmNzcycsXG4gIHByb3ZpZGVyczogW1xuICAgIHtcbiAgICAgIHByb3ZpZGU6IE5HX1ZBTFVFX0FDQ0VTU09SLFxuICAgICAgdXNlRXhpc3Rpbmc6IGZvcndhcmRSZWYoKCkgPT4gVG9nZ2xlQ29tcG9uZW50KSxcbiAgICAgIG11bHRpOiB0cnVlLFxuICAgIH0sXG4gIF0sXG59KVxuZXhwb3J0IGNsYXNzIFRvZ2dsZUNvbXBvbmVudCBpbXBsZW1lbnRzIENvbnRyb2xWYWx1ZUFjY2Vzc29yIHtcbiAgY29uc3RydWN0b3IocHVibGljIG1hc3RlclNlcnZpY2UgOiBNYXN0ZXJDb250cm9sU2VydmljZSl7fVxuICBmaWVsZCA6IGFueSA9IGlucHV0LnJlcXVpcmVkPGFueT4oKTtcbiAgIGlucHV0VmFsdWU6IGFueSA9IGZhbHNlO1xuICAgcmVhY3RpdmVGb3JtQ29udHJvbG9iamVjdCA6IGFueSA9IGlucHV0PGFueT4oKTtcbiAgX29uQ2hhbmdlOiBhbnkgPSAoaW5wdXRWYWx1ZTogYW55KSA9PiB7fTtcbiAgX29uVG91Y2hlZDogYW55ID0gKCkgPT4ge307XG5cbiAgLy8gRGVjbGFyZSBPdXRwdXQgZXZlbnQgZW1pdHRlcnMgaGVyZSAoY2xhc3MgbGV2ZWwpXG4gIEBPdXRwdXQoKSBjaGFuZ2UgPSBuZXcgRXZlbnRFbWl0dGVyPGFueT4oKTtcblxuICBuZ09uSW5pdCgpOiB2b2lkIHtcbiAgICBpbml0aWFsaXplRmllbGROYW1lQXR0cmlidXRlKHRoaXMuZmllbGQoKSk7XG4gIH1cblxuICB3cml0ZVZhbHVlKG9iajogYW55KTogdm9pZCB7XG4gICAgdGhpcy5pbnB1dFZhbHVlID0gb2JqO1xuICB9XG5cbiAgcmVnaXN0ZXJPbkNoYW5nZShmbjogYW55KTogdm9pZCB7XG4gICAgdGhpcy5fb25DaGFuZ2UgPSBmbjtcbiAgfVxuXG4gIHJlZ2lzdGVyT25Ub3VjaGVkKGZuOiBhbnkpOiB2b2lkIHtcbiAgICB0aGlzLl9vblRvdWNoZWQgPSBmbjtcbiAgfVxuXG4gIHNldERpc2FibGVkU3RhdGU/KGlzRGlzYWJsZWQ6IGJvb2xlYW4pOiB2b2lkIHtcbiAgICAvLyBIYW5kbGUgZGlzYWJsZWQgc3RhdGUgaWYgbmVlZGVkXG4gIH1cblxuICBvblRvZ2dsZUNoYW5nZShldmVudDogYW55KTogdm9pZCB7XG4gICAgdGhpcy5pbnB1dFZhbHVlID0gZXZlbnQudGFyZ2V0LmNoZWNrZWQ7XG4gICAgdGhpcy5fb25DaGFuZ2UodGhpcy5pbnB1dFZhbHVlKTtcbiAgICB0aGlzLl9vblRvdWNoZWQoKTtcbiAgICAvLyBFbWl0IHRoZSBjaGFuZ2UgZXZlbnQgdG8gcGFyZW50IGNvbXBvbmVudFxuICAgIHRoaXMuY2hhbmdlLmVtaXQodGhpcy5pbnB1dFZhbHVlKTtcbiAgfVxufVxuIiwiPGRpdiBjbGFzcz1cIlwiICpuZ0lmPVwiZmllbGQoKSAmJiBmaWVsZCgpPy5pc1Zpc2libGUgJiYgZmllbGQoKS5pc1Nob3dMYWJlbFwiIFtuZ1N0eWxlXT1cIntcbiAgJy0tY3VzdG9tLXRvZ2dsZS1iZy1jb2xvcic6IGZpZWxkKCk/LmNvbnRyb2xTdHlsZT8uYmFja2dyb3VuZCxcbiAgJy0tY3VzdG9tLXRvZ2dsZS1ib3JkZXItY29sb3InOiBmaWVsZCgpPy5jb250cm9sU3R5bGU/LmJvcmRlckNvbG9yICxcbiAgJy0tY3VzdG9tLXRvZ2dsZS1ib3JkZXItd2lkdGgnOiBmaWVsZCgpPy5jb250cm9sU3R5bGU/LmJvcmRlcldpZHRoICxcbiAgJy0tY3VzdG9tLXRvZ2dsZS1ib3JkZXItcmFkaXVzJzogZmllbGQoKT8uY29udHJvbFN0eWxlPy5ib3JkZXJSYWRpdXMsXG4gICctLWN1c3RvbS10b2dnbGUtd2lkdGgnOiBmaWVsZCgpPy5jb250cm9sU3R5bGU/LndpZHRoLFxuICB9XCJcbiAgY2xhc3M9XCJjYXJkIHRvZ2dsZS1iYWNrZ3JvdW5kIG10LTJcIlxuICA+XG4gICAgPGRpdiBjbGFzcz1cInRvZ2dsZV9zd2l0Y2ggbXQtMlwiPlxuICAgICAgPGRpdiAqbmdJZj1cImZpZWxkKCkuY29uZmlnRGF0YT8ubGVmdExhYmVsXCIgW25nU3R5bGVdPVwie1xuICAgICAgICAnLS1jdXN0b20tdG9nZ2xlLWZvbnQtc2l6ZSc6IGZpZWxkKCk/LmNvbnRyb2xTdHlsZT8uZm9udFNpemUgLFxuICAgICAgICAnLS1jdXN0b20tdG9nZ2xlLWZvbnQtd2VpZ2h0JzogZmllbGQoKT8uY29udHJvbFN0eWxlPy5mb250V2VpZ2h0ICxcbiAgICAgICAgJy0tY3VzdG9tLXRvZ2dsZS1mb250LWZhbWlseSc6IGZpZWxkKCk/LmNvbnRyb2xTdHlsZT8uZm9udEZhbWlseSAsXG4gICAgICAgICctLWN1c3RvbS10b2dnbGUtZm9udC1jb2xvcic6IGZpZWxkKCk/LmNvbnRyb2xTdHlsZT8uY29sb3IgLFxuICAgICAgICB9XCIgY2xhc3M9XCJ0b2dnbGUtdGV4dFwiPlxuICAgICAgICA8ZGl2Pnt7ZmllbGQoKS5jb25maWdEYXRhPy5sZWZ0TGFiZWx9fTwvZGl2PlxuICAgICAgPC9kaXY+XG4gICAgICA8ZGl2IGNsYXNzPVwibXQtMVwiPlxuICAgICAgICA8bGFiZWwgY2xhc3M9XCJzd2l0Y2hcIj5cbiAgICAgICAgICBAaWYocmVhY3RpdmVGb3JtQ29udHJvbG9iamVjdCgpKSB7XG4gICAgICAgICAgICA8aW5wdXRcbiAgICAgICAgICAgICAgdHlwZT1cImNoZWNrYm94XCJcbiAgICAgICAgICAgICAgW25hbWVdPVwiZmllbGQoKT8uZmllbGROYW1lQXR0cmlidXRlXCJcbiAgICAgICAgICAgICAgW2lkXT1cImZpZWxkKCk/LmZpZWxkTmFtZVwiXG4gICAgICAgICAgICAgIFtjaGVja2VkXT1cImlucHV0VmFsdWVcIlxuICAgICAgICAgICAgICBbZGlzYWJsZWRdPVwiZmllbGQoKT8uaXNEaXNhYmxlXCJcbiAgICAgICAgICAgICAgW3JlcXVpcmVkXT1cImZpZWxkKCk/LnZhbGlkYXRvcnM/LmlzUmVxdWlyZWRcIlxuICAgICAgICAgICAgICBbZm9ybUNvbnRyb2xdPVwicmVhY3RpdmVGb3JtQ29udHJvbG9iamVjdCgpXCJcbiAgICAgICAgICAgICAgKGNoYW5nZSk9XCJvblRvZ2dsZUNoYW5nZSgkZXZlbnQpXCJcbiAgICAgICAgICAgIC8+XG4gICAgICAgICAgfUBlbHNlIHtcbiAgICAgICAgICAgIDxpbnB1dFxuICAgICAgICAgICAgICB0eXBlPVwiY2hlY2tib3hcIlxuICAgICAgICAgICAgICBbbmFtZV09XCJmaWVsZCgpPy5maWVsZE5hbWVBdHRyaWJ1dGVcIlxuICAgICAgICAgICAgICBbaWRdPVwiZmllbGQoKT8uZmllbGROYW1lXCJcbiAgICAgICAgICAgICAgW2NoZWNrZWRdPVwiaW5wdXRWYWx1ZVwiXG4gICAgICAgICAgICAgIFtkaXNhYmxlZF09XCJmaWVsZCgpPy5pc0Rpc2FibGVcIlxuICAgICAgICAgICAgICBbcmVxdWlyZWRdPVwiZmllbGQoKT8udmFsaWRhdG9ycz8uaXNSZXF1aXJlZFwiXG4gICAgICAgICAgICAgIChjaGFuZ2UpPVwib25Ub2dnbGVDaGFuZ2UoJGV2ZW50KVwiXG4gICAgICAgICAgICAvPlxuICAgICAgICAgIH1cbiAgICAgICAgICA8c3BhbiBjbGFzcz1cInNsaWRlciByb3VuZFwiPjwvc3Bhbj5cbiAgICAgICAgPC9sYWJlbD5cbiAgICAgIDwvZGl2PlxuICAgICAgPGRpdiBbbmdTdHlsZV09XCJ7XG4gICAgICAgICctLWN1c3RvbS10b2dnbGUtZm9udC1zaXplJzogZmllbGQoKT8uY29udHJvbFN0eWxlPy5mb250U2l6ZSAsXG4gICAgICAgICctLWN1c3RvbS10b2dnbGUtZm9udC13ZWlnaHQnOiBmaWVsZCgpPy5jb250cm9sU3R5bGU/LmZvbnRXZWlnaHQgLFxuICAgICAgICAnLS1jdXN0b20tdG9nZ2xlLWZvbnQtZmFtaWx5JzogZmllbGQoKT8uY29udHJvbFN0eWxlPy5mb250RmFtaWx5ICxcbiAgICAgICAgJy0tY3VzdG9tLXRvZ2dsZS1mb250LWNvbG9yJzogZmllbGQoKT8uY29udHJvbFN0eWxlPy5jb2xvciAsXG4gICAgICAgIH1cIiBjbGFzcz1cInRvZ2dsZS10ZXh0IG1iLTJcIj5cbiAgICAgICAgPGRpdj57e2ZpZWxkKCk/LmxhYmVsfX08L2Rpdj5cbiAgICAgICAgPGRpdiBzdHlsZT1cImZvbnQtc2l6ZTogMTBweDsgZm9udC13ZWlnaHQ6IDQwMDtcIiAqbmdJZj1cImZpZWxkKCkuY29uZmlnRGF0YT8uc3ViTGFiZWxcIj57e2ZpZWxkKCk/LmNvbmZpZ0RhdGE/LnN1YkxhYmVsfX0gPGltZyBhbHQ9XCJcIiBbc3JjXT1cImZpZWxkKCk/LmltYWdlVXJsXCIgKm5nSWY9XCJmaWVsZCgpPy5pbWFnZVVybFwiIC8+IDwvZGl2PlxuICAgICAgPC9kaXY+XG4gICAgPC9kaXY+XG4gIDwvZGl2PlxuIl19
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidG9nZ2xlLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL21hc3Rlci1jb250cm9sL3NyYy9saWIvdG9nZ2xlL3RvZ2dsZS5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9tYXN0ZXItY29udHJvbC9zcmMvbGliL3RvZ2dsZS90b2dnbGUuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLGlCQUFpQixDQUFDO0FBQy9DLE9BQU8sRUFBRSxTQUFTLEVBQUUsS0FBSyxFQUFFLE1BQU0sRUFBQyxZQUFZLEVBQUUsVUFBVSxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBRWxGLE9BQU8sRUFBd0IsaUJBQWlCLEVBQUUsbUJBQW1CLEVBQUUsTUFBTSxnQkFBZ0IsQ0FBQztBQUM5RixPQUFPLEVBQUUsNEJBQTRCLEVBQUUsTUFBTSw4QkFBOEIsQ0FBQzs7Ozs7QUFnQjVFLE1BQU0sT0FBTyxlQUFlO0lBQ1A7SUFBbkIsWUFBbUIsYUFBb0M7UUFBcEMsa0JBQWEsR0FBYixhQUFhLENBQXVCO0lBQUUsQ0FBQztJQUMxRCxLQUFLLEdBQVMsS0FBSyxDQUFDLFFBQVEsRUFBTyxDQUFDO0lBQ25DLFVBQVUsR0FBUSxLQUFLLENBQUM7SUFDeEIseUJBQXlCLEdBQVMsS0FBSyxFQUFPLENBQUM7SUFDaEQsU0FBUyxHQUFRLENBQUMsVUFBZSxFQUFFLEVBQUUsR0FBRSxDQUFDLENBQUM7SUFDekMsVUFBVSxHQUFRLEdBQUcsRUFBRSxHQUFFLENBQUMsQ0FBQztJQUUzQixtREFBbUQ7SUFDekMsTUFBTSxHQUFHLElBQUksWUFBWSxFQUFPLENBQUM7SUFFM0MsUUFBUTtRQUNOLDRCQUE0QixDQUFDLElBQUksQ0FBQyxLQUFLLEVBQUUsQ0FBQyxDQUFDO0lBQzdDLENBQUM7SUFFRCxVQUFVLENBQUMsR0FBUTtRQUNqQixJQUFJLENBQUMsVUFBVSxHQUFHLEdBQUcsQ0FBQztJQUN4QixDQUFDO0lBRUQsZ0JBQWdCLENBQUMsRUFBTztRQUN0QixJQUFJLENBQUMsU0FBUyxHQUFHLEVBQUUsQ0FBQztJQUN0QixDQUFDO0lBRUQsaUJBQWlCLENBQUMsRUFBTztRQUN2QixJQUFJLENBQUMsVUFBVSxHQUFHLEVBQUUsQ0FBQztJQUN2QixDQUFDO0lBRUQsZ0JBQWdCLENBQUUsVUFBbUI7UUFDbkMsa0NBQWtDO0lBQ3BDLENBQUM7SUFFRCxjQUFjLENBQUMsS0FBVTtRQUN2QixJQUFJLENBQUMsVUFBVSxHQUFHLEtBQUssQ0FBQyxNQUFNLENBQUMsT0FBTyxDQUFDO1FBQ3ZDLElBQUksQ0FBQyxTQUFTLENBQUMsSUFBSSxDQUFDLFVBQVUsQ0FBQyxDQUFDO1FBQ2hDLElBQUksQ0FBQyxVQUFVLEVBQUUsQ0FBQztRQUNsQiw0Q0FBNEM7UUFDNUMsSUFBSSxDQUFDLE1BQU0sQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLFVBQVUsQ0FBQyxDQUFDO0lBQ3BDLENBQUM7d0dBckNVLGVBQWU7NEZBQWYsZUFBZSwrWUFSZjtZQUNUO2dCQUNFLE9BQU8sRUFBRSxpQkFBaUI7Z0JBQzFCLFdBQVcsRUFBRSxVQUFVLENBQUMsR0FBRyxFQUFFLENBQUMsZUFBZSxDQUFDO2dCQUM5QyxLQUFLLEVBQUUsSUFBSTthQUNaO1NBQ0YsMEJDbEJILG1tRkF3REEsbzdERC9DWSxZQUFZLHVOQUFFLG1CQUFtQjs7NEZBV2hDLGVBQWU7a0JBZDNCLFNBQVM7K0JBQ0UsWUFBWSxjQUNWLElBQUksV0FDUCxDQUFDLFlBQVksRUFBRSxtQkFBbUIsQ0FBQyxhQUdqQzt3QkFDVDs0QkFDRSxPQUFPLEVBQUUsaUJBQWlCOzRCQUMxQixXQUFXLEVBQUUsVUFBVSxDQUFDLEdBQUcsRUFBRSxnQkFBZ0IsQ0FBQzs0QkFDOUMsS0FBSyxFQUFFLElBQUk7eUJBQ1o7cUJBQ0Y7eUZBV1MsTUFBTTtzQkFBZixNQUFNIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tbW9uTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvY29tbW9uJztcbmltcG9ydCB7IENvbXBvbmVudCwgaW5wdXQsIE91dHB1dCxFdmVudEVtaXR0ZXIsIGZvcndhcmRSZWYgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IE1hc3RlckNvbnRyb2xTZXJ2aWNlIH0gZnJvbSAnLi4vbWFzdGVyLWNvbnRyb2wuc2VydmljZSc7XG5pbXBvcnQgeyBDb250cm9sVmFsdWVBY2Nlc3NvciwgTkdfVkFMVUVfQUNDRVNTT1IsIFJlYWN0aXZlRm9ybXNNb2R1bGUgfSBmcm9tICdAYW5ndWxhci9mb3Jtcyc7XG5pbXBvcnQgeyBpbml0aWFsaXplRmllbGROYW1lQXR0cmlidXRlIH0gZnJvbSAnLi4vZmllbGQtbmFtZS1hdHRyaWJ1dGUudXRpbCc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ2xpYi10b2dnbGUnLFxuICBzdGFuZGFsb25lOiB0cnVlLFxuICBpbXBvcnRzOiBbQ29tbW9uTW9kdWxlLCBSZWFjdGl2ZUZvcm1zTW9kdWxlXSxcbiAgdGVtcGxhdGVVcmw6ICcuL3RvZ2dsZS5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsOiAnLi90b2dnbGUuY29tcG9uZW50LmNzcycsXG4gIHByb3ZpZGVyczogW1xuICAgIHtcbiAgICAgIHByb3ZpZGU6IE5HX1ZBTFVFX0FDQ0VTU09SLFxuICAgICAgdXNlRXhpc3Rpbmc6IGZvcndhcmRSZWYoKCkgPT4gVG9nZ2xlQ29tcG9uZW50KSxcbiAgICAgIG11bHRpOiB0cnVlLFxuICAgIH0sXG4gIF0sXG59KVxuZXhwb3J0IGNsYXNzIFRvZ2dsZUNvbXBvbmVudCBpbXBsZW1lbnRzIENvbnRyb2xWYWx1ZUFjY2Vzc29yIHtcbiAgY29uc3RydWN0b3IocHVibGljIG1hc3RlclNlcnZpY2UgOiBNYXN0ZXJDb250cm9sU2VydmljZSl7fVxuICBmaWVsZCA6IGFueSA9IGlucHV0LnJlcXVpcmVkPGFueT4oKTtcbiAgIGlucHV0VmFsdWU6IGFueSA9IGZhbHNlO1xuICAgcmVhY3RpdmVGb3JtQ29udHJvbG9iamVjdCA6IGFueSA9IGlucHV0PGFueT4oKTtcbiAgX29uQ2hhbmdlOiBhbnkgPSAoaW5wdXRWYWx1ZTogYW55KSA9PiB7fTtcbiAgX29uVG91Y2hlZDogYW55ID0gKCkgPT4ge307XG5cbiAgLy8gRGVjbGFyZSBPdXRwdXQgZXZlbnQgZW1pdHRlcnMgaGVyZSAoY2xhc3MgbGV2ZWwpXG4gIEBPdXRwdXQoKSBjaGFuZ2UgPSBuZXcgRXZlbnRFbWl0dGVyPGFueT4oKTtcblxuICBuZ09uSW5pdCgpOiB2b2lkIHtcbiAgICBpbml0aWFsaXplRmllbGROYW1lQXR0cmlidXRlKHRoaXMuZmllbGQoKSk7XG4gIH1cblxuICB3cml0ZVZhbHVlKG9iajogYW55KTogdm9pZCB7XG4gICAgdGhpcy5pbnB1dFZhbHVlID0gb2JqO1xuICB9XG5cbiAgcmVnaXN0ZXJPbkNoYW5nZShmbjogYW55KTogdm9pZCB7XG4gICAgdGhpcy5fb25DaGFuZ2UgPSBmbjtcbiAgfVxuXG4gIHJlZ2lzdGVyT25Ub3VjaGVkKGZuOiBhbnkpOiB2b2lkIHtcbiAgICB0aGlzLl9vblRvdWNoZWQgPSBmbjtcbiAgfVxuXG4gIHNldERpc2FibGVkU3RhdGU/KGlzRGlzYWJsZWQ6IGJvb2xlYW4pOiB2b2lkIHtcbiAgICAvLyBIYW5kbGUgZGlzYWJsZWQgc3RhdGUgaWYgbmVlZGVkXG4gIH1cblxuICBvblRvZ2dsZUNoYW5nZShldmVudDogYW55KTogdm9pZCB7XG4gICAgdGhpcy5pbnB1dFZhbHVlID0gZXZlbnQudGFyZ2V0LmNoZWNrZWQ7XG4gICAgdGhpcy5fb25DaGFuZ2UodGhpcy5pbnB1dFZhbHVlKTtcbiAgICB0aGlzLl9vblRvdWNoZWQoKTtcbiAgICAvLyBFbWl0IHRoZSBjaGFuZ2UgZXZlbnQgdG8gcGFyZW50IGNvbXBvbmVudFxuICAgIHRoaXMuY2hhbmdlLmVtaXQodGhpcy5pbnB1dFZhbHVlKTtcbiAgfVxufVxuIiwiPGRpdiBjbGFzcz1cIlwiICpuZ0lmPVwiZmllbGQoKSAmJiBmaWVsZCgpPy5pc1Zpc2libGUgJiYgZmllbGQoKS5pc1Nob3dMYWJlbFwiIFtuZ1N0eWxlXT1cIntcbiAgJy0tY3VzdG9tLXRvZ2dsZS1iZy1jb2xvcic6IGZpZWxkKCk/LmNvbnRyb2xTdHlsZT8uYmFja2dyb3VuZCxcbiAgJy0tY3VzdG9tLXRvZ2dsZS1ib3JkZXItY29sb3InOiBmaWVsZCgpPy5jb250cm9sU3R5bGU/LmJvcmRlckNvbG9yICxcbiAgJy0tY3VzdG9tLXRvZ2dsZS1ib3JkZXItd2lkdGgnOiBmaWVsZCgpPy5jb250cm9sU3R5bGU/LmJvcmRlcldpZHRoICxcbiAgJy0tY3VzdG9tLXRvZ2dsZS1ib3JkZXItcmFkaXVzJzogZmllbGQoKT8uY29udHJvbFN0eWxlPy5ib3JkZXJSYWRpdXMsXG4gICctLWN1c3RvbS10b2dnbGUtd2lkdGgnOiBmaWVsZCgpPy5jb250cm9sU3R5bGU/LndpZHRoLFxuICB9XCJcbiAgY2xhc3M9XCJjYXJkIHRvZ2dsZS1iYWNrZ3JvdW5kIG10LTJcIlxuICA+XG4gICAgPGRpdiBjbGFzcz1cInRvZ2dsZV9zd2l0Y2hcIj5cbiAgICAgIDxkaXYgKm5nSWY9XCJmaWVsZCgpLmNvbmZpZ0RhdGE/LmxlZnRMYWJlbFwiIFtuZ1N0eWxlXT1cIntcbiAgICAgICAgJy0tY3VzdG9tLXRvZ2dsZS1mb250LXNpemUnOiBmaWVsZCgpPy5jb250cm9sU3R5bGU/LmZvbnRTaXplICxcbiAgICAgICAgJy0tY3VzdG9tLXRvZ2dsZS1mb250LXdlaWdodCc6IGZpZWxkKCk/LmNvbnRyb2xTdHlsZT8uZm9udFdlaWdodCAsXG4gICAgICAgICctLWN1c3RvbS10b2dnbGUtZm9udC1mYW1pbHknOiBmaWVsZCgpPy5jb250cm9sU3R5bGU/LmZvbnRGYW1pbHkgLFxuICAgICAgICAnLS1jdXN0b20tdG9nZ2xlLWZvbnQtY29sb3InOiBmaWVsZCgpPy5jb250cm9sU3R5bGU/LmNvbG9yICxcbiAgICAgICAgfVwiIGNsYXNzPVwidG9nZ2xlLXRleHRcIj5cbiAgICAgICAgPGRpdj57e2ZpZWxkKCkuY29uZmlnRGF0YT8ubGVmdExhYmVsfX08L2Rpdj5cbiAgICAgIDwvZGl2PlxuICAgICAgPGRpdiBjbGFzcz1cInBheW91dC1zd2l0Y2hcIj5cbiAgICAgICAgPGxhYmVsIGNsYXNzPVwic3dpdGNoXCI+XG4gICAgICAgICAgQGlmKHJlYWN0aXZlRm9ybUNvbnRyb2xvYmplY3QoKSkge1xuICAgICAgICAgICAgPGlucHV0XG4gICAgICAgICAgICAgIHR5cGU9XCJjaGVja2JveFwiXG4gICAgICAgICAgICAgIFtuYW1lXT1cImZpZWxkKCk/LmZpZWxkTmFtZUF0dHJpYnV0ZVwiXG4gICAgICAgICAgICAgIFtpZF09XCJmaWVsZCgpPy5maWVsZE5hbWVcIlxuICAgICAgICAgICAgICBbY2hlY2tlZF09XCJpbnB1dFZhbHVlXCJcbiAgICAgICAgICAgICAgW2Rpc2FibGVkXT1cImZpZWxkKCk/LmlzRGlzYWJsZVwiXG4gICAgICAgICAgICAgIFtyZXF1aXJlZF09XCJmaWVsZCgpPy52YWxpZGF0b3JzPy5pc1JlcXVpcmVkXCJcbiAgICAgICAgICAgICAgW2Zvcm1Db250cm9sXT1cInJlYWN0aXZlRm9ybUNvbnRyb2xvYmplY3QoKVwiXG4gICAgICAgICAgICAgIChjaGFuZ2UpPVwib25Ub2dnbGVDaGFuZ2UoJGV2ZW50KVwiXG4gICAgICAgICAgICAvPlxuICAgICAgICAgIH1AZWxzZSB7XG4gICAgICAgICAgICA8aW5wdXRcbiAgICAgICAgICAgICAgdHlwZT1cImNoZWNrYm94XCJcbiAgICAgICAgICAgICAgW25hbWVdPVwiZmllbGQoKT8uZmllbGROYW1lQXR0cmlidXRlXCJcbiAgICAgICAgICAgICAgW2lkXT1cImZpZWxkKCk/LmZpZWxkTmFtZVwiXG4gICAgICAgICAgICAgIFtjaGVja2VkXT1cImlucHV0VmFsdWVcIlxuICAgICAgICAgICAgICBbZGlzYWJsZWRdPVwiZmllbGQoKT8uaXNEaXNhYmxlXCJcbiAgICAgICAgICAgICAgW3JlcXVpcmVkXT1cImZpZWxkKCk/LnZhbGlkYXRvcnM/LmlzUmVxdWlyZWRcIlxuICAgICAgICAgICAgICAoY2hhbmdlKT1cIm9uVG9nZ2xlQ2hhbmdlKCRldmVudClcIlxuICAgICAgICAgICAgLz5cbiAgICAgICAgICB9XG4gICAgICAgICAgPHNwYW4gY2xhc3M9XCJzbGlkZXIgcm91bmRcIj48L3NwYW4+XG4gICAgICAgIDwvbGFiZWw+XG4gICAgICA8L2Rpdj5cbiAgICAgIDxkaXYgW25nU3R5bGVdPVwie1xuICAgICAgICAnLS1jdXN0b20tdG9nZ2xlLWZvbnQtc2l6ZSc6IGZpZWxkKCk/LmNvbnRyb2xTdHlsZT8uZm9udFNpemUgLFxuICAgICAgICAnLS1jdXN0b20tdG9nZ2xlLWZvbnQtd2VpZ2h0JzogZmllbGQoKT8uY29udHJvbFN0eWxlPy5mb250V2VpZ2h0ICxcbiAgICAgICAgJy0tY3VzdG9tLXRvZ2dsZS1mb250LWZhbWlseSc6IGZpZWxkKCk/LmNvbnRyb2xTdHlsZT8uZm9udEZhbWlseSAsXG4gICAgICAgICctLWN1c3RvbS10b2dnbGUtZm9udC1jb2xvcic6IGZpZWxkKCk/LmNvbnRyb2xTdHlsZT8uY29sb3IgLFxuICAgICAgICB9XCIgY2xhc3M9XCJ0b2dnbGUtdGV4dFwiPlxuICAgICAgICA8ZGl2Pnt7ZmllbGQoKT8ubGFiZWx9fTwvZGl2PlxuICAgICAgICA8ZGl2IHN0eWxlPVwiZm9udC1zaXplOiAxMHB4OyBmb250LXdlaWdodDogNDAwO1wiICpuZ0lmPVwiZmllbGQoKS5jb25maWdEYXRhPy5zdWJMYWJlbFwiPnt7ZmllbGQoKT8uY29uZmlnRGF0YT8uc3ViTGFiZWx9fSA8aW1nIGFsdD1cIlwiIFtzcmNdPVwiZmllbGQoKT8uaW1hZ2VVcmxcIiAqbmdJZj1cImZpZWxkKCk/LmltYWdlVXJsXCIgLz4gPC9kaXY+XG4gICAgICA8L2Rpdj5cbiAgICA8L2Rpdj5cbiAgPC9kaXY+XG4iXX0=

package/fesm2022/master-control.mjs

@@ -865,7 +865,7 @@ class ToggleComponent {
                 useExisting: forwardRef(() => ToggleComponent),
                 multi: true,
             },
-        ], ngImport: i0, template: "<div class=\"\" *ngIf=\"field() && field()?.isVisible && field().isShowLabel\" [ngStyle]=\"{\n  '--custom-toggle-bg-color': field()?.controlStyle?.background,\n  '--custom-toggle-border-color': field()?.controlStyle?.borderColor ,\n  '--custom-toggle-border-width': field()?.controlStyle?.borderWidth ,\n  '--custom-toggle-border-radius': field()?.controlStyle?.borderRadius,\n  '--custom-toggle-width': field()?.controlStyle?.width,\n  }\"\n  class=\"card toggle-background mt-2\"\n  >\n    <div class=\"toggle_switch mt-2\">\n      <div *ngIf=\"field().configData?.leftLabel\" [ngStyle]=\"{\n        '--custom-toggle-font-size': field()?.controlStyle?.fontSize ,\n        '--custom-toggle-font-weight': field()?.controlStyle?.fontWeight ,\n        '--custom-toggle-font-family': field()?.controlStyle?.fontFamily ,\n        '--custom-toggle-font-color': field()?.controlStyle?.color ,\n        }\" class=\"toggle-text\">\n        <div>{{field().configData?.leftLabel}}</div>\n      </div>\n      <div class=\"mt-1\">\n        <label class=\"switch\">\n          @if(reactiveFormControlobject()) {\n            <input\n              type=\"checkbox\"\n              [name]=\"field()?.fieldNameAttribute\"\n              [id]=\"field()?.fieldName\"\n              [checked]=\"inputValue\"\n              [disabled]=\"field()?.isDisable\"\n              [required]=\"field()?.validators?.isRequired\"\n              [formControl]=\"reactiveFormControlobject()\"\n              (change)=\"onToggleChange($event)\"\n            />\n          }@else {\n            <input\n              type=\"checkbox\"\n              [name]=\"field()?.fieldNameAttribute\"\n              [id]=\"field()?.fieldName\"\n              [checked]=\"inputValue\"\n              [disabled]=\"field()?.isDisable\"\n              [required]=\"field()?.validators?.isRequired\"\n              (change)=\"onToggleChange($event)\"\n            />\n          }\n          <span class=\"slider round\"></span>\n        </label>\n      </div>\n      <div [ngStyle]=\"{\n        '--custom-toggle-font-size': field()?.controlStyle?.fontSize ,\n        '--custom-toggle-font-weight': field()?.controlStyle?.fontWeight ,\n        '--custom-toggle-font-family': field()?.controlStyle?.fontFamily ,\n        '--custom-toggle-font-color': field()?.controlStyle?.color ,\n        }\" class=\"toggle-text mb-2\">\n        <div>{{field()?.label}}</div>\n        <div style=\"font-size: 10px; font-weight: 400;\" *ngIf=\"field().configData?.subLabel\">{{field()?.configData?.subLabel}} <img alt=\"\" [src]=\"field()?.imageUrl\" *ngIf=\"field()?.imageUrl\" /> </div>\n      </div>\n    </div>\n  </div>\n", styles: ["*{font-family:mulish!important}::ng-deep .toggle-background{background-color:var(--custom-toggle-bg-color , #f5f5f5)!important;padding:2px 8px;width:var(--custom-toggle-width , 100%)!important;box-shadow:none}::ng-deep .toggle-background{border-color:var(--custom-toggle-border-color , transparent)!important;border-radius:var(--custom-toggle-border-radius , 4px)!important;border-width:var(--custom-toggle-border-width , 1px)!important}::ng-deep .toggle_switch{display:flex;align-items:center;gap:10px;font-size:17px;font-weight:400;font-family:Mulish;color:#444}::ng-deep .switch{position:relative;display:inline-block;width:34px;height:18px}::ng-deep .switch input{opacity:0;width:0;height:0}::ng-deep .slider{position:absolute;cursor:pointer;inset:0;background-color:#ddd;-webkit-transition:.4s;transition:.4s}::ng-deep .slider:before{position:absolute;content:\"\";height:11px;width:11px;left:4px;bottom:4px;background-color:#fff;-webkit-transition:.4s;transition:.4s}::ng-deep .slider.round{border-radius:34px}::ng-deep input:checked+.slider{background-color:#fb0}::ng-deep input:checked+.slider:before{-webkit-transform:translateX(16px);-ms-transform:translateX(16px);transform:translate(16px)}::ng-deep .slider.round:before{border-radius:50%}::ng-deep .remove-border{border:none!important;outline:none!important;box-shadow:none!important}::ng-deep .remove-border:focus-visible{border:none!important;outline:none!important;box-shadow:none!important}::ng-deep .mdc-checkbox__native-control:enabled:checked~.mdc-checkbox__background,.mdc-checkbox__native-control:enabled:indeterminate~.mdc-checkbox__background{border-color:#fb0!important;background-color:#fb0!important;border-radius:4px!important}::ng-deep .mdc-checkbox__checkmark{color:#fff!important}::ng-deep .mdc-checkbox__background{border:1px solid #dadada!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i4.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.CheckboxRequiredValidator, selector: "input[type=checkbox][required][formControlName],input[type=checkbox][required][formControl],input[type=checkbox][required][ngModel]" }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
+        ], ngImport: i0, template: "<div class=\"\" *ngIf=\"field() && field()?.isVisible && field().isShowLabel\" [ngStyle]=\"{\n  '--custom-toggle-bg-color': field()?.controlStyle?.background,\n  '--custom-toggle-border-color': field()?.controlStyle?.borderColor ,\n  '--custom-toggle-border-width': field()?.controlStyle?.borderWidth ,\n  '--custom-toggle-border-radius': field()?.controlStyle?.borderRadius,\n  '--custom-toggle-width': field()?.controlStyle?.width,\n  }\"\n  class=\"card toggle-background mt-2\"\n  >\n    <div class=\"toggle_switch\">\n      <div *ngIf=\"field().configData?.leftLabel\" [ngStyle]=\"{\n        '--custom-toggle-font-size': field()?.controlStyle?.fontSize ,\n        '--custom-toggle-font-weight': field()?.controlStyle?.fontWeight ,\n        '--custom-toggle-font-family': field()?.controlStyle?.fontFamily ,\n        '--custom-toggle-font-color': field()?.controlStyle?.color ,\n        }\" class=\"toggle-text\">\n        <div>{{field().configData?.leftLabel}}</div>\n      </div>\n      <div class=\"payout-switch\">\n        <label class=\"switch\">\n          @if(reactiveFormControlobject()) {\n            <input\n              type=\"checkbox\"\n              [name]=\"field()?.fieldNameAttribute\"\n              [id]=\"field()?.fieldName\"\n              [checked]=\"inputValue\"\n              [disabled]=\"field()?.isDisable\"\n              [required]=\"field()?.validators?.isRequired\"\n              [formControl]=\"reactiveFormControlobject()\"\n              (change)=\"onToggleChange($event)\"\n            />\n          }@else {\n            <input\n              type=\"checkbox\"\n              [name]=\"field()?.fieldNameAttribute\"\n              [id]=\"field()?.fieldName\"\n              [checked]=\"inputValue\"\n              [disabled]=\"field()?.isDisable\"\n              [required]=\"field()?.validators?.isRequired\"\n              (change)=\"onToggleChange($event)\"\n            />\n          }\n          <span class=\"slider round\"></span>\n        </label>\n      </div>\n      <div [ngStyle]=\"{\n        '--custom-toggle-font-size': field()?.controlStyle?.fontSize ,\n        '--custom-toggle-font-weight': field()?.controlStyle?.fontWeight ,\n        '--custom-toggle-font-family': field()?.controlStyle?.fontFamily ,\n        '--custom-toggle-font-color': field()?.controlStyle?.color ,\n        }\" class=\"toggle-text\">\n        <div>{{field()?.label}}</div>\n        <div style=\"font-size: 10px; font-weight: 400;\" *ngIf=\"field().configData?.subLabel\">{{field()?.configData?.subLabel}} <img alt=\"\" [src]=\"field()?.imageUrl\" *ngIf=\"field()?.imageUrl\" /> </div>\n      </div>\n    </div>\n  </div>\n", styles: ["*{font-family:mulish!important}::ng-deep .toggle-background{background-color:var(--custom-toggle-bg-color , #f5f5f5)!important;padding:6px 9px;width:var(--custom-toggle-width , 100%)!important;box-shadow:none}::ng-deep .toggle-background{border-color:var(--custom-toggle-border-color , transparent)!important;border-radius:var(--custom-toggle-border-radius , 4px)!important;border-width:var(--custom-toggle-border-width , 1px)!important}::ng-deep .toggle_switch{display:flex;align-items:center;gap:8px;font-size:17px;font-weight:400;font-family:Mulish;color:#444}::ng-deep .switch{position:relative;display:inline-block;width:34px;height:18px}::ng-deep .switch input{opacity:0;width:0;height:0}::ng-deep .slider{position:absolute;cursor:pointer;inset:0;background-color:#ddd;-webkit-transition:.4s;transition:.4s}::ng-deep .slider:before{position:absolute;content:\"\";height:11px;width:11px;left:4px;bottom:4px;background-color:#fff;-webkit-transition:.4s;transition:.4s}::ng-deep .slider.round{border-radius:34px}::ng-deep input:checked+.slider{background-color:#fb0}::ng-deep input:checked+.slider:before{-webkit-transform:translateX(16px);-ms-transform:translateX(16px);transform:translate(16px)}::ng-deep .slider.round:before{border-radius:50%}::ng-deep .remove-border{border:none!important;outline:none!important;box-shadow:none!important}::ng-deep .remove-border:focus-visible{border:none!important;outline:none!important;box-shadow:none!important}::ng-deep .mdc-checkbox__native-control:enabled:checked~.mdc-checkbox__background,.mdc-checkbox__native-control:enabled:indeterminate~.mdc-checkbox__background{border-color:#fb0!important;background-color:#fb0!important;border-radius:4px!important}::ng-deep .mdc-checkbox__checkmark{color:#fff!important}::ng-deep .mdc-checkbox__background{border:1px solid #dadada!important}.payout-switch{display:flex;align-items:center;justify-content:center;gap:8px 10px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i4.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.CheckboxRequiredValidator, selector: "input[type=checkbox][required][formControlName],input[type=checkbox][required][formControl],input[type=checkbox][required][ngModel]" }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ToggleComponent, decorators: [{
             type: Component,
@@ -875,7 +875,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                             useExisting: forwardRef(() => ToggleComponent),
                             multi: true,
                         },
-                    ], template: "<div class=\"\" *ngIf=\"field() && field()?.isVisible && field().isShowLabel\" [ngStyle]=\"{\n  '--custom-toggle-bg-color': field()?.controlStyle?.background,\n  '--custom-toggle-border-color': field()?.controlStyle?.borderColor ,\n  '--custom-toggle-border-width': field()?.controlStyle?.borderWidth ,\n  '--custom-toggle-border-radius': field()?.controlStyle?.borderRadius,\n  '--custom-toggle-width': field()?.controlStyle?.width,\n  }\"\n  class=\"card toggle-background mt-2\"\n  >\n    <div class=\"toggle_switch mt-2\">\n      <div *ngIf=\"field().configData?.leftLabel\" [ngStyle]=\"{\n        '--custom-toggle-font-size': field()?.controlStyle?.fontSize ,\n        '--custom-toggle-font-weight': field()?.controlStyle?.fontWeight ,\n        '--custom-toggle-font-family': field()?.controlStyle?.fontFamily ,\n        '--custom-toggle-font-color': field()?.controlStyle?.color ,\n        }\" class=\"toggle-text\">\n        <div>{{field().configData?.leftLabel}}</div>\n      </div>\n      <div class=\"mt-1\">\n        <label class=\"switch\">\n          @if(reactiveFormControlobject()) {\n            <input\n              type=\"checkbox\"\n              [name]=\"field()?.fieldNameAttribute\"\n              [id]=\"field()?.fieldName\"\n              [checked]=\"inputValue\"\n              [disabled]=\"field()?.isDisable\"\n              [required]=\"field()?.validators?.isRequired\"\n              [formControl]=\"reactiveFormControlobject()\"\n              (change)=\"onToggleChange($event)\"\n            />\n          }@else {\n            <input\n              type=\"checkbox\"\n              [name]=\"field()?.fieldNameAttribute\"\n              [id]=\"field()?.fieldName\"\n              [checked]=\"inputValue\"\n              [disabled]=\"field()?.isDisable\"\n              [required]=\"field()?.validators?.isRequired\"\n              (change)=\"onToggleChange($event)\"\n            />\n          }\n          <span class=\"slider round\"></span>\n        </label>\n      </div>\n      <div [ngStyle]=\"{\n        '--custom-toggle-font-size': field()?.controlStyle?.fontSize ,\n        '--custom-toggle-font-weight': field()?.controlStyle?.fontWeight ,\n        '--custom-toggle-font-family': field()?.controlStyle?.fontFamily ,\n        '--custom-toggle-font-color': field()?.controlStyle?.color ,\n        }\" class=\"toggle-text mb-2\">\n        <div>{{field()?.label}}</div>\n        <div style=\"font-size: 10px; font-weight: 400;\" *ngIf=\"field().configData?.subLabel\">{{field()?.configData?.subLabel}} <img alt=\"\" [src]=\"field()?.imageUrl\" *ngIf=\"field()?.imageUrl\" /> </div>\n      </div>\n    </div>\n  </div>\n", styles: ["*{font-family:mulish!important}::ng-deep .toggle-background{background-color:var(--custom-toggle-bg-color , #f5f5f5)!important;padding:2px 8px;width:var(--custom-toggle-width , 100%)!important;box-shadow:none}::ng-deep .toggle-background{border-color:var(--custom-toggle-border-color , transparent)!important;border-radius:var(--custom-toggle-border-radius , 4px)!important;border-width:var(--custom-toggle-border-width , 1px)!important}::ng-deep .toggle_switch{display:flex;align-items:center;gap:10px;font-size:17px;font-weight:400;font-family:Mulish;color:#444}::ng-deep .switch{position:relative;display:inline-block;width:34px;height:18px}::ng-deep .switch input{opacity:0;width:0;height:0}::ng-deep .slider{position:absolute;cursor:pointer;inset:0;background-color:#ddd;-webkit-transition:.4s;transition:.4s}::ng-deep .slider:before{position:absolute;content:\"\";height:11px;width:11px;left:4px;bottom:4px;background-color:#fff;-webkit-transition:.4s;transition:.4s}::ng-deep .slider.round{border-radius:34px}::ng-deep input:checked+.slider{background-color:#fb0}::ng-deep input:checked+.slider:before{-webkit-transform:translateX(16px);-ms-transform:translateX(16px);transform:translate(16px)}::ng-deep .slider.round:before{border-radius:50%}::ng-deep .remove-border{border:none!important;outline:none!important;box-shadow:none!important}::ng-deep .remove-border:focus-visible{border:none!important;outline:none!important;box-shadow:none!important}::ng-deep .mdc-checkbox__native-control:enabled:checked~.mdc-checkbox__background,.mdc-checkbox__native-control:enabled:indeterminate~.mdc-checkbox__background{border-color:#fb0!important;background-color:#fb0!important;border-radius:4px!important}::ng-deep .mdc-checkbox__checkmark{color:#fff!important}::ng-deep .mdc-checkbox__background{border:1px solid #dadada!important}\n"] }]
+                    ], template: "<div class=\"\" *ngIf=\"field() && field()?.isVisible && field().isShowLabel\" [ngStyle]=\"{\n  '--custom-toggle-bg-color': field()?.controlStyle?.background,\n  '--custom-toggle-border-color': field()?.controlStyle?.borderColor ,\n  '--custom-toggle-border-width': field()?.controlStyle?.borderWidth ,\n  '--custom-toggle-border-radius': field()?.controlStyle?.borderRadius,\n  '--custom-toggle-width': field()?.controlStyle?.width,\n  }\"\n  class=\"card toggle-background mt-2\"\n  >\n    <div class=\"toggle_switch\">\n      <div *ngIf=\"field().configData?.leftLabel\" [ngStyle]=\"{\n        '--custom-toggle-font-size': field()?.controlStyle?.fontSize ,\n        '--custom-toggle-font-weight': field()?.controlStyle?.fontWeight ,\n        '--custom-toggle-font-family': field()?.controlStyle?.fontFamily ,\n        '--custom-toggle-font-color': field()?.controlStyle?.color ,\n        }\" class=\"toggle-text\">\n        <div>{{field().configData?.leftLabel}}</div>\n      </div>\n      <div class=\"payout-switch\">\n        <label class=\"switch\">\n          @if(reactiveFormControlobject()) {\n            <input\n              type=\"checkbox\"\n              [name]=\"field()?.fieldNameAttribute\"\n              [id]=\"field()?.fieldName\"\n              [checked]=\"inputValue\"\n              [disabled]=\"field()?.isDisable\"\n              [required]=\"field()?.validators?.isRequired\"\n              [formControl]=\"reactiveFormControlobject()\"\n              (change)=\"onToggleChange($event)\"\n            />\n          }@else {\n            <input\n              type=\"checkbox\"\n              [name]=\"field()?.fieldNameAttribute\"\n              [id]=\"field()?.fieldName\"\n              [checked]=\"inputValue\"\n              [disabled]=\"field()?.isDisable\"\n              [required]=\"field()?.validators?.isRequired\"\n              (change)=\"onToggleChange($event)\"\n            />\n          }\n          <span class=\"slider round\"></span>\n        </label>\n      </div>\n      <div [ngStyle]=\"{\n        '--custom-toggle-font-size': field()?.controlStyle?.fontSize ,\n        '--custom-toggle-font-weight': field()?.controlStyle?.fontWeight ,\n        '--custom-toggle-font-family': field()?.controlStyle?.fontFamily ,\n        '--custom-toggle-font-color': field()?.controlStyle?.color ,\n        }\" class=\"toggle-text\">\n        <div>{{field()?.label}}</div>\n        <div style=\"font-size: 10px; font-weight: 400;\" *ngIf=\"field().configData?.subLabel\">{{field()?.configData?.subLabel}} <img alt=\"\" [src]=\"field()?.imageUrl\" *ngIf=\"field()?.imageUrl\" /> </div>\n      </div>\n    </div>\n  </div>\n", styles: ["*{font-family:mulish!important}::ng-deep .toggle-background{background-color:var(--custom-toggle-bg-color , #f5f5f5)!important;padding:6px 9px;width:var(--custom-toggle-width , 100%)!important;box-shadow:none}::ng-deep .toggle-background{border-color:var(--custom-toggle-border-color , transparent)!important;border-radius:var(--custom-toggle-border-radius , 4px)!important;border-width:var(--custom-toggle-border-width , 1px)!important}::ng-deep .toggle_switch{display:flex;align-items:center;gap:8px;font-size:17px;font-weight:400;font-family:Mulish;color:#444}::ng-deep .switch{position:relative;display:inline-block;width:34px;height:18px}::ng-deep .switch input{opacity:0;width:0;height:0}::ng-deep .slider{position:absolute;cursor:pointer;inset:0;background-color:#ddd;-webkit-transition:.4s;transition:.4s}::ng-deep .slider:before{position:absolute;content:\"\";height:11px;width:11px;left:4px;bottom:4px;background-color:#fff;-webkit-transition:.4s;transition:.4s}::ng-deep .slider.round{border-radius:34px}::ng-deep input:checked+.slider{background-color:#fb0}::ng-deep input:checked+.slider:before{-webkit-transform:translateX(16px);-ms-transform:translateX(16px);transform:translate(16px)}::ng-deep .slider.round:before{border-radius:50%}::ng-deep .remove-border{border:none!important;outline:none!important;box-shadow:none!important}::ng-deep .remove-border:focus-visible{border:none!important;outline:none!important;box-shadow:none!important}::ng-deep .mdc-checkbox__native-control:enabled:checked~.mdc-checkbox__background,.mdc-checkbox__native-control:enabled:indeterminate~.mdc-checkbox__background{border-color:#fb0!important;background-color:#fb0!important;border-radius:4px!important}::ng-deep .mdc-checkbox__checkmark{color:#fff!important}::ng-deep .mdc-checkbox__background{border:1px solid #dadada!important}.payout-switch{display:flex;align-items:center;justify-content:center;gap:8px 10px}\n"] }]
         }], ctorParameters: () => [{ type: MasterControlService }], propDecorators: { change: [{
                 type: Output
             }] } });
@@ -8028,7 +8028,7 @@ class AnnuityPremiumCalculatorComponent {
             "isShowCard": true,
             "isShowRadioOption": true,
             "subLabel": "Illustrative Returns if Nifty 50 grows at:",
-            "infoMessage": "hello"
+            "infoMessage": ""
         },
         "metaDataObj": null,
         "isShowLabel": true,
@@ -8086,7 +8086,7 @@ class AnnuityPremiumCalculatorComponent {
         "label": "Horizontal Line",
         "placeHolder": null,
         "metaId": "ALL_COM_GEN_MCTRL_hrLine_hrLine_V1",
-        "isVisible": true,
+        "isVisible": false,
         "isDisable": false,
         "defaultValue": null,
         "validators": {
@@ -8536,7 +8536,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\">\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 padding-left-0 padding-right-0\">\n        <div class=\"realistic-picture-card\">\n          <div class=\"realistic-picture-header\">\n            <img *ngIf=\"digitBossSwitch?.icon\" [src]=\"digitBossSwitch?.icon\" style=\"width:12px;height:12px;object-fit:contain;flex-shrink:0;\" />\n            <span class=\"realistic-picture-label\">Realistic Picture:</span>\n          </div>\n          <span class=\"realistic-picture-text\">{{digitBossSwitch?.digitBossText}} <span class=\"realistic-picture-highlight\">{{digitBossSwitch?.digitBossValue}}</span></span>\n        </div>\n      </div>\n</div>\n\n      <div class=\"card  mb-0 mt-2\"\n        style=\"align-items: center;border:none;font-size: 8px;font-weight: 400;color:rgba(68, 68, 68, 1) \"\n        >\n        <div class=\"mx-4\" *ngIf=\"recalculateSubTextObj?.isVisible\"><img src=\"https://cdn.godigit.com/digitPlusAssets/Group+1010106336.png\"\n            style=\"margin-left: 3px;\" />\n          <span style=\"margin-left: 6px;\">Every time you make a change above, please click recalculate.</span>\n        </div>\n      </div>\n    </div>\n    <div\n      style=\"display: flex;align-items: center;justify-content: center;border:none;font-size: 10px;font-weight: 700;height:32px;background-color: rgba(255, 250, 235, 1);gap: 8px;margin: 4px;\"\n      *ngIf=\"annuityTableCalculator?.isVisible\">\n      <img src=\"https://cdn.godigit.com/retail-life/calculator.svg\" />\n      Minimum Guaranteed Payout(A) + Variable Payout(B) = Total Payout(C)\n    </div>\n    <!-- annuity calculator table -->\n    <div class=\"annuity-tables-main-container\" *ngIf=\"annuityTableCalculator?.isVisible\">\n      <div class=\"d-flex flex-row annuity-tables-container\">\n        <!-- Table 1 -->\n        <div class=\"annuity-calculator-table1\">\n          <div class=\"table-header annuitytable1-header\">Minimum Guaranteed Annuity Payout(A)</div>\n          <div class=\"table-body\">\n            <div class=\"table-cell\"><span class=\"rupee-icon\">\u20B9</span><span\n                style=\"font-size:12px; color: rgba(68, 68, 68, 1);\">\n                <{{annuityTableCalculator.annuitycalculatorTable1val1}}>\n              </span></div>\n            <button class=\"annuitytable-button\">{{annuityTableCalculator.annuitycalculatorTable1val2}}</button>\n          </div>\n        </div>\n\n        <div class=\"operator-symbol\">+</div>\n\n        <!-- Table 2 -->\n        <div class=\"annuity-calculator-table2\">\n          <div class=\"table-header annuitytable1-header\">Assume growth of BenchMark index</div>\n          <div class=\"table-body\">\n            <div class=\"table-row\">&#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        [preSelectConfig]=\"growthRatePreSelectConfig\"\n        [(ngModel)]=\"growthRateOption\"\n        (change)=\"onGrowthRateRadioChange($event)\"\n        (growthRateChange)=\"onGrowthRateCardChange($event)\" />\n    </div>\n\n    <div *ngIf=\"hrLineObj.isVisible\" class=\"generateSummary\">\n      <lib-hr-line [field]=\"hrLineObj\" />\n    </div>\n\n    <div *ngIf=\"generateSummaryObj.isVisible\" class=\"generateSummary\">\n      <lib-button [field]=\"generateSummaryObj\" (click)=\"generateSummaryClicked()\" />\n    </div>\n  </div>\n", styles: [".card-main-title{font-size:16px;font-family:Mulish!important;letter-spacing:0px!important;font-weight:800;line-height:24px;padding-bottom:16px}.col-5-5{flex:0 0 auto;max-width:44.16666667%}.custom-grid-template{display:grid;grid-template-columns:4fr .5fr 4fr;align-items:end}.vertical-line{border-left:2px solid #ccc;height:100px;margin:0 10px}.error-message{font-size:12px;font-weight:500;color:#e00;letter-spacing:0px}.annuity-msg{padding:4px 6px;margin-top:8px;font-size:10px;font-weight:400;color:#444;background-color:#e5f0fa;height:fit-content}.annuity-msg-1{padding:4px 6px;margin-top:8px;font-size:10px;font-weight:400;color:#444;background-color:#e6f7f3;height:fit-content;flex-wrap:nowrap!important}.annuity-tables-main-container{border:2px solid rgba(221,221,221,1);border-radius:8px;display:flex}.annuity-tables-container{display:flex;align-items:stretch;gap:0;width:100%}.annuity-calculator-table1,.annuity-calculator-table2,.annuity-calculator-table3,.annuity-calculator-table4{display:flex;flex-direction:column;height:100%;flex:1;color:#444;font-weight:400;font-size:10px}.annuity-calculator-table1{border-right:1px solid rgba(221,221,221,1)}.annuity-calculator-table2{border-left:1px solid rgba(221,221,221,1);border-right:1px solid rgba(221,221,221,1)}.annuity-calculator-table3{border-right:1px solid rgba(221,221,221,1)}.annuity-calculator-table4{border-left:1px solid rgba(221,221,221,1)}.table-header{padding:12px;font-size:10px;font-weight:700;text-align:center;border-bottom:1px solid rgba(221,221,221,1);height:60px;display:flex;align-items:center;justify-content:center;word-wrap:break-word;word-break:break-word;hyphens:auto}.annuitytable1-header{background-color:#ececec;color:#444}.annuitytable4-header{background-color:#fb03;color:#444}.table-body{display:flex;flex-direction:column;flex:1}.table-cell{padding:12px;text-align:center;font-size:16px;font-weight:600;flex:1;display:flex;flex-direction:row;justify-content:center;align-items:center;gap:4px}.annuity-mat-hint{font-size:8px;text-align:start;font-weight:400;color:#444;letter-spacing:0px}.table-row{padding:12px;text-align:center;font-size:14px;font-weight:500;background-color:#fff;border-bottom:1px solid #999;flex:1;display:flex;align-items:center;justify-content:center}.table-row:last-child{border-bottom:none}.annuitytable4-bg{background-color:#e6f7f3!important;color:#444}.annuitytable-button{background-color:#ececec;border:none;border-radius:4px;padding:2px 8px;font-size:10px;font-weight:700;cursor:pointer;margin-top:0;width:auto;min-width:30%;max-width:90%;height:24px;display:block;margin-left:auto;margin-right:auto;position:relative;bottom:40px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.rupee-icon{font-weight:700;margin-right:2px;font-size:12px;color:#444}.operator-symbol{display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:700;padding:0 16px;color:#f90}.annuity-calculator-paragraph{padding:16px 8px 4px;font-size:10px;margin:0 0 20px auto;width:73%;font-weight:400;color:#444;background-color:#ebf1ff}.annuity-calculator-paragraph1{font-weight:700;font-size:10px}.minium-annuity{display:flex;flex-direction:column}@media (max-width: 991px) and (min-width: 768px){.table-header{padding:8px 4px;font-size:9px;line-height:1.1}}@media (max-width: 767px) and (min-width: 576px){.table-header{padding:10px 6px;font-size:9px}}@media (max-width: 575px){.table-header{padding:8px 4px;font-size:8px}}@media (max-width: 575px){.annuity-msg{font-size:10px;line-height:1;height:fit-content}}@media (max-width: 575px){.annuity-msg-1{font-size:10px;line-height:1;flex-wrap:nowrap!important;height:fit-content}.annuity-msg-1 .img{width:4px;height:4px}}@media (max-width: 991px) and (min-width: 768px){.annuity-msg,.annuity-msg-1{font-size:9px;line-height:1.1;height:fit-content}}@media (max-width: 767px) and (min-width: 576px){.annuity-msg,.annuity-msg-1{font-size:10px;line-height:1.1;height:fit-content}}.digit-boss-banner{background-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: ["preSelectConfig", "reactiveFormControlobject", "field"], outputs: ["change", "growthRateChange"] }, { kind: "component", type: HrLineComponent, selector: "lib-hr-line", inputs: ["field"] }, { kind: "component", type: ToggleComponent, selector: "lib-toggle", inputs: ["field", "reactiveFormControlobject"], outputs: ["change"] }, { kind: "component", type: ButtonComponent, selector: "lib-button", inputs: ["field"] }, { kind: "component", type: IconButtonComponent, selector: "lib-icon-button", inputs: ["field"] }, { kind: "component", type: RadioComponent, selector: "lib-radio", inputs: ["reactiveFormControlobject", "field"], outputs: ["change"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: AnnuityPremiumCalculatorComponent, isStandalone: true, selector: "lib-annuity-premium-calculator", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, triggerValidation: { classPropertyName: "triggerValidation", publicName: "triggerValidation", isSignal: false, isRequired: false, transformFunction: null }, premiumDetails: { classPropertyName: "premiumDetails", publicName: "premiumDetails", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onCalcualteButtonClick: "onCalcualteButtonClick", onGenerateSummaryClick: "onGenerateSummaryClick", onAnnuityPremiumChange: "onAnnuityPremiumChange", onMinimumPremiumValueChange: "onMinimumPremiumValueChange", onAutioDebitValueChange: "onAutioDebitValueChange", onGuranteedAnnuityValueChange: "onGuranteedAnnuityValueChange", onDigitBossSwitchToggle: "onDigitBossSwitchToggle", onGrowthRateOptionSelected: "onGrowthRateOptionSelected" }, viewQueries: [{ propertyName: "annuityRadioRef", first: true, predicate: AnnuityCalculatorRadioComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"card px-3\" style=\"padding: 16px;border: none !important;box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.12) !important;\">\n  <div class=\"row\">\n    <h4 class=\"card-main-title\"><span style=\"margin-right: 12px;\"><img\n          src=\"https://cdn.godigit.com/retail-life/calculator.svg\" alt=\"annuity calculator\"></span>Here's Your Premium to Annuity Calculator</h4>\n  </div>\n  <!-- <div class=\"row\"> -->\n  <div class=\"card pb-4 px-4\" style=\"border-bottom-left-radius: 0px; border-bottom-right-radius: 0px;\">\n    <!-- <div class=\"custom-grid-template\">\n\n    </div> -->\n\n    <div class=\"row mx-auto\" style=\"transform: translate(0px, -58%);\">\n      <lib-toggle class=\"col-auto\" [field]=\"annuityPremiumToggleObj\" />\n    </div>\n    <!-- </div> -->\n    <div class=\" col-12\" style=\"\n    justify-content: center;\n    flex-direction: row;\n    display: flex;\n\">\n      <div class=\"d-flex flex-column p-0 gap-2\" style=\"width: 45%;\">\n        <lib-amount-textbox [field]=\"annuityPremiumObj\" [(ngModel)]=\"annuityPremium['textValue']\"\n          (ngModelChange)=\"onAnnuityPremiumValueChange($event)\" />\n        <div class=\"error-message\" *ngIf=\"validations.ispremiumEntry\">\n          Please enter Premium amount\n        </div>\n        <div class=\"annuity-mat-hint\" *ngIf=\"annuityPremiumObj?.configData?.numbertoword\">{{annuityPremiumObj?.configData?.numbertoword}}</div>\n\n        <lib-select [field]=\"annuitypayoutObj\" [(ngModel)]=\"annuityPremium['selectValue']\"\n          (ngModelChange)=\"onAnnuityPremiumValueChange($event)\" />\n        <div>\n          <lib-toggle [field]=\"enableAutoDebitObj\" [(ngModel)]=\"isEnableAutoDebit\"\n            (ngModelChange)=\"onEnableAutoDebitValueChange($event)\" />\n        </div>\n      </div>\n      <div class=\"d-flex justify-content-center align-items-center\"\n        style=\"width: 10%; display: flex; align-items: flex-end; transform: translate(0px, 6px); position: relative; height: auto; min-height: 100%;\">\n        <!-- Top line -->\n        <div style=\"position: absolute; left: 50%; transform: translateX(-50%); width: 1px; height: calc(50% + 19px); top: -30px; background: rgba(221, 221, 221, 1); pointer-events: none;\"></div>\n        <!-- Bottom line -->\n        <div style=\"position: absolute; left: 50%; transform: translateX(-50%); width: 1px; height: calc(50% + 24px); bottom: -37px; background: rgba(221, 221, 221, 1); pointer-events: none;\"></div>\n        <lib-icon-button [field]=\"interchangeButtonObj\" />\n      </div>\n      <div class=\"d-flex flex-column p-0 gap-2\" style=\"width: 45%;\">\n        <lib-amount-textbox [field]=\"minimumAnnuityPayoutObj\" [(ngModel)]=\"minumumAnnuityPayout['textValue']\"\n          (ngModelChange)=\"onMinPremiumValueChange($event)\" *ngIf=\"minimumAnnuityPayoutObj.isVisible;\"/>\n        <div class=\"annuity-mat-hint\" *ngIf=\"minimumAnnuityPayoutObj.isVisible && minimumAnnuityPayoutObj?.configData?.numbertoword\">{{minimumAnnuityPayoutObj?.configData?.numbertoword}}</div>\n        <lib-select [field]=\"minimumAnnuityPayoutfrequencyObj\" [(ngModel)]=\"minumumAnnuityPayout['selectValue']\"\n          (ngModelChange)=\"onMinPremiumValueChange($event)\" />\n        <div class=\"minium-annuity mt-3\" *ngIf=\"guranteedannuityObj['isVisible']\">\n          <div class=\"annuity-msg w-100 px-2 py-1\">\n            Value based on assumed 10% annual growth of Nifty 50 index.\n          </div>\n          <div class=\"w-100 px-2 py-1\">\n            <lib-radio [field]=\"guranteedannuityObj\" [(ngModel)]=\"selectedGuranteedAnnuity\"\n              (ngModelChange)=\"onGuranteedAnnuityChange($event)\" />\n          </div>\n          <div class=\"annuity-msg-1 d-flex align-items-center flex-nowrap w-100 px-2 py-1\">\n            <img src=\"https://cdn.godigit.com/digitPlusAssets/streamline_graph-arrow-increase-remix.png\"\n              style=\"max-width: 24px;\" />\n            <span>Potential for higher returns by lowering the minimum guaranteed annuity rate.</span>\n          </div>\n        </div>\n\n      </div>\n      <!-- <ng-template #emptyRightCol>\n        <div class=\"col-5 col-lg-5 p-0\"></div>\n      </ng-template> -->\n    </div>\n    <!-- <div class=\"vertical-line\"></div> -->\n    <!-- <div class=\"custom-grid-template\">\n      <div>\n        <lib-toggle [field]=\"enableAutoDebitObj\" [(ngModel)]=\"isEnableAutoDebit\"\n          (ngModelChange)=\"onEnableAutoDebitValueChange($event)\" />\n      </div>\n    </div> -->\n\n  </div>\n\n\n  <div class=\"card py-3 mb-4 border-top-0\" style=\"border-top-left-radius: 0px; border-top-right-radius: 0px;\">\n    <div class=\"mx-4\">\n      <div class=\"digit-boss-banner\" *ngIf=\"digitBossSwitch?.isVisible\">\n        <lib-toggle [field]=\"digitBossToggleConfig\" [(ngModel)]=\"this.digitBossSwitch.isSwitchOn\" (ngModelChange)=\"onDigitBossSwitchChange($event)\"></lib-toggle>\n        <div class=\"digit-boss-text\">\n          {{this.digitBossSwitch?.prefixText}}\n          <span class=\"highlight\">{{this.digitBossSwitch?.highlightText}}</span>\n          {{this.digitBossSwitch?.subText}}\n          <span class=\"arrow-icon\"><img src=\"https://cdn.godigit.com/digitPlusAssets/streamline_graph-arrow-increase-remix.svg\"/></span>\n        </div>\n      </div>\n      <lib-button [field]=\"recalculateButton\" (click)=\"calculateButtonClicked()\" />\n\n      <!-- //digit boss updated design -->\n        <div class=\"col-12 mt-3\" style=\"\n    justify-content: center;\n    flex-direction: row;\n    display: flex;\" *ngIf=\"!minimumAnnuityPayoutObj.isVisible\">\n      <div class=\"col-12 col-lg-12 d-flex flex-column justify-content-center padding-left-0 padding-right-0\">\n        <div class=\"realistic-picture-card\">\n          <div class=\"realistic-picture-header\">\n            <img *ngIf=\"digitBossSwitch?.icon\" [src]=\"digitBossSwitch?.icon\" style=\"width:12px;height:12px;object-fit:contain;flex-shrink:0;\" />\n            <span class=\"realistic-picture-label\">Realistic Picture:</span>\n          </div>\n          <span class=\"realistic-picture-text\">{{digitBossSwitch?.digitBossText}} <span class=\"realistic-picture-highlight\">{{digitBossSwitch?.digitBossValue}}</span></span>\n        </div>\n      </div>\n</div>\n\n      <div class=\"card  mb-0 mt-2\"\n        style=\"align-items: center;border:none;font-size: 8px;font-weight: 400;color:rgba(68, 68, 68, 1) \"\n        >\n        <div class=\"mx-4\" *ngIf=\"recalculateSubTextObj?.isVisible\"><img src=\"https://cdn.godigit.com/digitPlusAssets/Group+1010106336.png\"\n            style=\"margin-left: 3px;\" />\n          <span style=\"margin-left: 6px;\">Every time you make a change above, please click recalculate.</span>\n        </div>\n      </div>\n    </div>\n    <div\n      style=\"display: flex;align-items: center;justify-content: center;border:none;font-size: 10px;font-weight: 700;height:32px;background-color: rgba(255, 250, 235, 1);gap: 8px;margin: 4px;\"\n      *ngIf=\"annuityTableCalculator?.isVisible\">\n      <img src=\"https://cdn.godigit.com/retail-life/calculator.svg\" />\n      Minimum Guaranteed Payout(A) + Variable Payout(B) = Total Payout(C)\n    </div>\n    <!-- annuity calculator table -->\n    <div class=\"annuity-tables-main-container\" *ngIf=\"annuityTableCalculator?.isVisible\">\n      <div class=\"d-flex flex-row annuity-tables-container\">\n        <!-- Table 1 -->\n        <div class=\"annuity-calculator-table1\">\n          <div class=\"table-header annuitytable1-header\">Minimum Guaranteed Annuity Payout(A)</div>\n          <div class=\"table-body\">\n            <div class=\"table-cell\"><span class=\"rupee-icon\">\u20B9</span><span\n                style=\"font-size:12px; color: rgba(68, 68, 68, 1);\">\n                <{{annuityTableCalculator.annuitycalculatorTable1val1}}>\n              </span></div>\n            <button class=\"annuitytable-button\">{{annuityTableCalculator.annuitycalculatorTable1val2}}</button>\n          </div>\n        </div>\n\n        <div class=\"operator-symbol\">+</div>\n\n        <!-- Table 2 -->\n        <div class=\"annuity-calculator-table2\">\n          <div class=\"table-header annuitytable1-header\">Assume growth of BenchMark index</div>\n          <div class=\"table-body\">\n            <div class=\"table-row\">&#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        [preSelectConfig]=\"growthRatePreSelectConfig\"\n        [(ngModel)]=\"growthRateOption\"\n        (change)=\"onGrowthRateRadioChange($event)\"\n        (growthRateChange)=\"onGrowthRateCardChange($event)\" />\n    </div>\n\n    <div *ngIf=\"hrLineObj.isVisible\" class=\"generateSummary\">\n      <lib-hr-line [field]=\"hrLineObj\" />\n    </div>\n\n    <div *ngIf=\"generateSummaryObj.isVisible\" class=\"generateSummary\">\n      <lib-button [field]=\"generateSummaryObj\" (click)=\"generateSummaryClicked()\" />\n    </div>\n  </div>\n", styles: [".card-main-title{font-size:16px;font-family:Mulish!important;letter-spacing:0px!important;font-weight:800;line-height:24px;padding-bottom:16px}.col-5-5{flex:0 0 auto;max-width:44.16666667%}.custom-grid-template{display:grid;grid-template-columns:4fr .5fr 4fr;align-items:end}.vertical-line{border-left:2px solid #ccc;height:100px;margin:0 10px}.error-message{font-size:12px;font-weight:500;color:#e00;letter-spacing:0px}.annuity-msg{padding:4px 6px;margin-top:8px;font-size:10px;font-weight:400;color:#444;background-color:#e5f0fa;height:fit-content}.annuity-msg-1{padding:4px 6px;margin-top:8px;font-size:10px;font-weight:400;color:#444;background-color:#e6f7f3;height:fit-content;flex-wrap:nowrap!important}.annuity-tables-main-container{border:2px solid rgba(221,221,221,1);border-radius:8px;display:flex}.annuity-tables-container{display:flex;align-items:stretch;gap:0;width:100%}.annuity-calculator-table1,.annuity-calculator-table2,.annuity-calculator-table3,.annuity-calculator-table4{display:flex;flex-direction:column;height:100%;flex:1;color:#444;font-weight:400;font-size:10px}.annuity-calculator-table1{border-right:1px solid rgba(221,221,221,1)}.annuity-calculator-table2{border-left:1px solid rgba(221,221,221,1);border-right:1px solid rgba(221,221,221,1)}.annuity-calculator-table3{border-right:1px solid rgba(221,221,221,1)}.annuity-calculator-table4{border-left:1px solid rgba(221,221,221,1)}.table-header{padding:12px;font-size:10px;font-weight:700;text-align:center;border-bottom:1px solid rgba(221,221,221,1);height:60px;display:flex;align-items:center;justify-content:center;word-wrap:break-word;word-break:break-word;hyphens:auto}.annuitytable1-header{background-color:#ececec;color:#444}.annuitytable4-header{background-color:#fb03;color:#444}.table-body{display:flex;flex-direction:column;flex:1}.table-cell{padding:12px;text-align:center;font-size:16px;font-weight:600;flex:1;display:flex;flex-direction:row;justify-content:center;align-items:center;gap:4px}.annuity-mat-hint{font-size:8px;text-align:start;font-weight:400;color:#444;letter-spacing:0px}.table-row{padding:12px;text-align:center;font-size:14px;font-weight:500;background-color:#fff;border-bottom:1px solid #999;flex:1;display:flex;align-items:center;justify-content:center}.table-row:last-child{border-bottom:none}.annuitytable4-bg{background-color:#e6f7f3!important;color:#444}.annuitytable-button{background-color:#ececec;border:none;border-radius:4px;padding:2px 8px;font-size:10px;font-weight:700;cursor:pointer;margin-top:0;width:auto;min-width:30%;max-width:90%;height:24px;display:block;margin-left:auto;margin-right:auto;position:relative;bottom:40px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.rupee-icon{font-weight:700;margin-right:2px;font-size:12px;color:#444}.operator-symbol{display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:700;padding:0 16px;color:#f90}.annuity-calculator-paragraph{padding:16px 8px 4px;font-size:10px;margin:0 0 20px auto;width:73%;font-weight:400;color:#444;background-color:#ebf1ff}.annuity-calculator-paragraph1{font-weight:700;font-size:10px}.minium-annuity{display:flex;flex-direction:column}@media (max-width: 991px) and (min-width: 768px){.table-header{padding:8px 4px;font-size:9px;line-height:1.1}}@media (max-width: 767px) and (min-width: 576px){.table-header{padding:10px 6px;font-size:9px}}@media (max-width: 575px){.table-header{padding:8px 4px;font-size:8px}}@media (max-width: 575px){.annuity-msg{font-size:10px;line-height:1;height:fit-content}}@media (max-width: 575px){.annuity-msg-1{font-size:10px;line-height:1;flex-wrap:nowrap!important;height:fit-content}.annuity-msg-1 .img{width:4px;height:4px}}@media (max-width: 991px) and (min-width: 768px){.annuity-msg,.annuity-msg-1{font-size:9px;line-height:1.1;height:fit-content}}@media (max-width: 767px) and (min-width: 576px){.annuity-msg,.annuity-msg-1{font-size:10px;line-height:1.1;height:fit-content}}.digit-boss-banner{background:linear-gradient(to right,#222,#444);color:#fff;display:flex;align-items:center;padding:8px 16px;border-radius:4px;margin-bottom:16px;gap:8px;font-size:12px;min-height:16px;opacity:1;transform:rotate(0)}.digit-boss-banner ::ng-deep .toggle-background{margin-top:0!important;padding:0!important;background-color:transparent!important;border:none!important}.digit-boss-banner ::ng-deep .toggle_switch{margin-top:0!important;gap:0!important}.digit-boss-text{display:flex;align-items:center;gap:4px;white-space:nowrap}.highlight{color:#fb0;font-weight:700}.arrow-icon{color:#fb0;margin-left:4px;font-size:14px}.generateSummary{margin-right:.4rem;margin-left:.4rem}.realistic-picture-card{display:flex;flex-direction:row;align-items:center;flex-wrap:wrap;gap:4px;background-color:#cce0f5;border-radius:4px;padding:4px 6px;font-size:8px;color:#06c;line-height:1.5;box-sizing:border-box}.realistic-picture-header{display:flex;align-items:center;gap:4px}.realistic-picture-content{display:flex;flex-direction:column;gap:2px}.realistic-picture-label{font-weight:700;font-size:8px;line-height:8px;color:#06c}.realistic-picture-text{font-weight:600;font-size:10px;line-height:14px;color:#222}.realistic-picture-highlight{font-weight:800;font-size:10px;line-height:14px;color:#0048ad}.toggle-text{margin-top:-5px!important}\n"], dependencies: [{ kind: "component", type: SelectComponent, selector: "lib-select", inputs: ["field", "reactiveFormControlobject"], outputs: ["selectionChange", "infoClick"] }, { kind: "component", type: AmountTextboxComponent, selector: "lib-amount-textbox", inputs: ["field", "reactiveFormControlobject"], outputs: ["blur"] }, { kind: "component", type: AnnuityCalculatorRadioComponent, selector: "lib-annuity-calculator-radio", inputs: ["preSelectConfig", "reactiveFormControlobject", "field"], outputs: ["change", "growthRateChange"] }, { kind: "component", type: HrLineComponent, selector: "lib-hr-line", inputs: ["field"] }, { kind: "component", type: ToggleComponent, selector: "lib-toggle", inputs: ["field", "reactiveFormControlobject"], outputs: ["change"] }, { kind: "component", type: ButtonComponent, selector: "lib-button", inputs: ["field"] }, { kind: "component", type: IconButtonComponent, selector: "lib-icon-button", inputs: ["field"] }, { kind: "component", type: RadioComponent, selector: "lib-radio", inputs: ["reactiveFormControlobject", "field"], outputs: ["change"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AnnuityPremiumCalculatorComponent, decorators: [{
             type: Component,
@@ -8553,7 +8553,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\">\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 padding-left-0 padding-right-0\">\n        <div class=\"realistic-picture-card\">\n          <div class=\"realistic-picture-header\">\n            <img *ngIf=\"digitBossSwitch?.icon\" [src]=\"digitBossSwitch?.icon\" style=\"width:12px;height:12px;object-fit:contain;flex-shrink:0;\" />\n            <span class=\"realistic-picture-label\">Realistic Picture:</span>\n          </div>\n          <span class=\"realistic-picture-text\">{{digitBossSwitch?.digitBossText}} <span class=\"realistic-picture-highlight\">{{digitBossSwitch?.digitBossValue}}</span></span>\n        </div>\n      </div>\n</div>\n\n      <div class=\"card  mb-0 mt-2\"\n        style=\"align-items: center;border:none;font-size: 8px;font-weight: 400;color:rgba(68, 68, 68, 1) \"\n        >\n        <div class=\"mx-4\" *ngIf=\"recalculateSubTextObj?.isVisible\"><img src=\"https://cdn.godigit.com/digitPlusAssets/Group+1010106336.png\"\n            style=\"margin-left: 3px;\" />\n          <span style=\"margin-left: 6px;\">Every time you make a change above, please click recalculate.</span>\n        </div>\n      </div>\n    </div>\n    <div\n      style=\"display: flex;align-items: center;justify-content: center;border:none;font-size: 10px;font-weight: 700;height:32px;background-color: rgba(255, 250, 235, 1);gap: 8px;margin: 4px;\"\n      *ngIf=\"annuityTableCalculator?.isVisible\">\n      <img src=\"https://cdn.godigit.com/retail-life/calculator.svg\" />\n      Minimum Guaranteed Payout(A) + Variable Payout(B) = Total Payout(C)\n    </div>\n    <!-- annuity calculator table -->\n    <div class=\"annuity-tables-main-container\" *ngIf=\"annuityTableCalculator?.isVisible\">\n      <div class=\"d-flex flex-row annuity-tables-container\">\n        <!-- Table 1 -->\n        <div class=\"annuity-calculator-table1\">\n          <div class=\"table-header annuitytable1-header\">Minimum Guaranteed Annuity Payout(A)</div>\n          <div class=\"table-body\">\n            <div class=\"table-cell\"><span class=\"rupee-icon\">\u20B9</span><span\n                style=\"font-size:12px; color: rgba(68, 68, 68, 1);\">\n                <{{annuityTableCalculator.annuitycalculatorTable1val1}}>\n              </span></div>\n            <button class=\"annuitytable-button\">{{annuityTableCalculator.annuitycalculatorTable1val2}}</button>\n          </div>\n        </div>\n\n        <div class=\"operator-symbol\">+</div>\n\n        <!-- Table 2 -->\n        <div class=\"annuity-calculator-table2\">\n          <div class=\"table-header annuitytable1-header\">Assume growth of BenchMark index</div>\n          <div class=\"table-body\">\n            <div class=\"table-row\">&#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        [preSelectConfig]=\"growthRatePreSelectConfig\"\n        [(ngModel)]=\"growthRateOption\"\n        (change)=\"onGrowthRateRadioChange($event)\"\n        (growthRateChange)=\"onGrowthRateCardChange($event)\" />\n    </div>\n\n    <div *ngIf=\"hrLineObj.isVisible\" class=\"generateSummary\">\n      <lib-hr-line [field]=\"hrLineObj\" />\n    </div>\n\n    <div *ngIf=\"generateSummaryObj.isVisible\" class=\"generateSummary\">\n      <lib-button [field]=\"generateSummaryObj\" (click)=\"generateSummaryClicked()\" />\n    </div>\n  </div>\n", styles: [".card-main-title{font-size:16px;font-family:Mulish!important;letter-spacing:0px!important;font-weight:800;line-height:24px;padding-bottom:16px}.col-5-5{flex:0 0 auto;max-width:44.16666667%}.custom-grid-template{display:grid;grid-template-columns:4fr .5fr 4fr;align-items:end}.vertical-line{border-left:2px solid #ccc;height:100px;margin:0 10px}.error-message{font-size:12px;font-weight:500;color:#e00;letter-spacing:0px}.annuity-msg{padding:4px 6px;margin-top:8px;font-size:10px;font-weight:400;color:#444;background-color:#e5f0fa;height:fit-content}.annuity-msg-1{padding:4px 6px;margin-top:8px;font-size:10px;font-weight:400;color:#444;background-color:#e6f7f3;height:fit-content;flex-wrap:nowrap!important}.annuity-tables-main-container{border:2px solid rgba(221,221,221,1);border-radius:8px;display:flex}.annuity-tables-container{display:flex;align-items:stretch;gap:0;width:100%}.annuity-calculator-table1,.annuity-calculator-table2,.annuity-calculator-table3,.annuity-calculator-table4{display:flex;flex-direction:column;height:100%;flex:1;color:#444;font-weight:400;font-size:10px}.annuity-calculator-table1{border-right:1px solid rgba(221,221,221,1)}.annuity-calculator-table2{border-left:1px solid rgba(221,221,221,1);border-right:1px solid rgba(221,221,221,1)}.annuity-calculator-table3{border-right:1px solid rgba(221,221,221,1)}.annuity-calculator-table4{border-left:1px solid rgba(221,221,221,1)}.table-header{padding:12px;font-size:10px;font-weight:700;text-align:center;border-bottom:1px solid rgba(221,221,221,1);height:60px;display:flex;align-items:center;justify-content:center;word-wrap:break-word;word-break:break-word;hyphens:auto}.annuitytable1-header{background-color:#ececec;color:#444}.annuitytable4-header{background-color:#fb03;color:#444}.table-body{display:flex;flex-direction:column;flex:1}.table-cell{padding:12px;text-align:center;font-size:16px;font-weight:600;flex:1;display:flex;flex-direction:row;justify-content:center;align-items:center;gap:4px}.annuity-mat-hint{font-size:8px;text-align:start;font-weight:400;color:#444;letter-spacing:0px}.table-row{padding:12px;text-align:center;font-size:14px;font-weight:500;background-color:#fff;border-bottom:1px solid #999;flex:1;display:flex;align-items:center;justify-content:center}.table-row:last-child{border-bottom:none}.annuitytable4-bg{background-color:#e6f7f3!important;color:#444}.annuitytable-button{background-color:#ececec;border:none;border-radius:4px;padding:2px 8px;font-size:10px;font-weight:700;cursor:pointer;margin-top:0;width:auto;min-width:30%;max-width:90%;height:24px;display:block;margin-left:auto;margin-right:auto;position:relative;bottom:40px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.rupee-icon{font-weight:700;margin-right:2px;font-size:12px;color:#444}.operator-symbol{display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:700;padding:0 16px;color:#f90}.annuity-calculator-paragraph{padding:16px 8px 4px;font-size:10px;margin:0 0 20px auto;width:73%;font-weight:400;color:#444;background-color:#ebf1ff}.annuity-calculator-paragraph1{font-weight:700;font-size:10px}.minium-annuity{display:flex;flex-direction:column}@media (max-width: 991px) and (min-width: 768px){.table-header{padding:8px 4px;font-size:9px;line-height:1.1}}@media (max-width: 767px) and (min-width: 576px){.table-header{padding:10px 6px;font-size:9px}}@media (max-width: 575px){.table-header{padding:8px 4px;font-size:8px}}@media (max-width: 575px){.annuity-msg{font-size:10px;line-height:1;height:fit-content}}@media (max-width: 575px){.annuity-msg-1{font-size:10px;line-height:1;flex-wrap:nowrap!important;height:fit-content}.annuity-msg-1 .img{width:4px;height:4px}}@media (max-width: 991px) and (min-width: 768px){.annuity-msg,.annuity-msg-1{font-size:9px;line-height:1.1;height:fit-content}}@media (max-width: 767px) and (min-width: 576px){.annuity-msg,.annuity-msg-1{font-size:10px;line-height:1.1;height:fit-content}}.digit-boss-banner{background-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"] }]
+                    ], template: "<div class=\"card px-3\" style=\"padding: 16px;border: none !important;box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.12) !important;\">\n  <div class=\"row\">\n    <h4 class=\"card-main-title\"><span style=\"margin-right: 12px;\"><img\n          src=\"https://cdn.godigit.com/retail-life/calculator.svg\" alt=\"annuity calculator\"></span>Here's Your Premium to Annuity Calculator</h4>\n  </div>\n  <!-- <div class=\"row\"> -->\n  <div class=\"card pb-4 px-4\" style=\"border-bottom-left-radius: 0px; border-bottom-right-radius: 0px;\">\n    <!-- <div class=\"custom-grid-template\">\n\n    </div> -->\n\n    <div class=\"row mx-auto\" style=\"transform: translate(0px, -58%);\">\n      <lib-toggle class=\"col-auto\" [field]=\"annuityPremiumToggleObj\" />\n    </div>\n    <!-- </div> -->\n    <div class=\" col-12\" style=\"\n    justify-content: center;\n    flex-direction: row;\n    display: flex;\n\">\n      <div class=\"d-flex flex-column p-0 gap-2\" style=\"width: 45%;\">\n        <lib-amount-textbox [field]=\"annuityPremiumObj\" [(ngModel)]=\"annuityPremium['textValue']\"\n          (ngModelChange)=\"onAnnuityPremiumValueChange($event)\" />\n        <div class=\"error-message\" *ngIf=\"validations.ispremiumEntry\">\n          Please enter Premium amount\n        </div>\n        <div class=\"annuity-mat-hint\" *ngIf=\"annuityPremiumObj?.configData?.numbertoword\">{{annuityPremiumObj?.configData?.numbertoword}}</div>\n\n        <lib-select [field]=\"annuitypayoutObj\" [(ngModel)]=\"annuityPremium['selectValue']\"\n          (ngModelChange)=\"onAnnuityPremiumValueChange($event)\" />\n        <div>\n          <lib-toggle [field]=\"enableAutoDebitObj\" [(ngModel)]=\"isEnableAutoDebit\"\n            (ngModelChange)=\"onEnableAutoDebitValueChange($event)\" />\n        </div>\n      </div>\n      <div class=\"d-flex justify-content-center align-items-center\"\n        style=\"width: 10%; display: flex; align-items: flex-end; transform: translate(0px, 6px); position: relative; height: auto; min-height: 100%;\">\n        <!-- Top line -->\n        <div style=\"position: absolute; left: 50%; transform: translateX(-50%); width: 1px; height: calc(50% + 19px); top: -30px; background: rgba(221, 221, 221, 1); pointer-events: none;\"></div>\n        <!-- Bottom line -->\n        <div style=\"position: absolute; left: 50%; transform: translateX(-50%); width: 1px; height: calc(50% + 24px); bottom: -37px; background: rgba(221, 221, 221, 1); pointer-events: none;\"></div>\n        <lib-icon-button [field]=\"interchangeButtonObj\" />\n      </div>\n      <div class=\"d-flex flex-column p-0 gap-2\" style=\"width: 45%;\">\n        <lib-amount-textbox [field]=\"minimumAnnuityPayoutObj\" [(ngModel)]=\"minumumAnnuityPayout['textValue']\"\n          (ngModelChange)=\"onMinPremiumValueChange($event)\" *ngIf=\"minimumAnnuityPayoutObj.isVisible;\"/>\n        <div class=\"annuity-mat-hint\" *ngIf=\"minimumAnnuityPayoutObj.isVisible && minimumAnnuityPayoutObj?.configData?.numbertoword\">{{minimumAnnuityPayoutObj?.configData?.numbertoword}}</div>\n        <lib-select [field]=\"minimumAnnuityPayoutfrequencyObj\" [(ngModel)]=\"minumumAnnuityPayout['selectValue']\"\n          (ngModelChange)=\"onMinPremiumValueChange($event)\" />\n        <div class=\"minium-annuity mt-3\" *ngIf=\"guranteedannuityObj['isVisible']\">\n          <div class=\"annuity-msg w-100 px-2 py-1\">\n            Value based on assumed 10% annual growth of Nifty 50 index.\n          </div>\n          <div class=\"w-100 px-2 py-1\">\n            <lib-radio [field]=\"guranteedannuityObj\" [(ngModel)]=\"selectedGuranteedAnnuity\"\n              (ngModelChange)=\"onGuranteedAnnuityChange($event)\" />\n          </div>\n          <div class=\"annuity-msg-1 d-flex align-items-center flex-nowrap w-100 px-2 py-1\">\n            <img src=\"https://cdn.godigit.com/digitPlusAssets/streamline_graph-arrow-increase-remix.png\"\n              style=\"max-width: 24px;\" />\n            <span>Potential for higher returns by lowering the minimum guaranteed annuity rate.</span>\n          </div>\n        </div>\n\n      </div>\n      <!-- <ng-template #emptyRightCol>\n        <div class=\"col-5 col-lg-5 p-0\"></div>\n      </ng-template> -->\n    </div>\n    <!-- <div class=\"vertical-line\"></div> -->\n    <!-- <div class=\"custom-grid-template\">\n      <div>\n        <lib-toggle [field]=\"enableAutoDebitObj\" [(ngModel)]=\"isEnableAutoDebit\"\n          (ngModelChange)=\"onEnableAutoDebitValueChange($event)\" />\n      </div>\n    </div> -->\n\n  </div>\n\n\n  <div class=\"card py-3 mb-4 border-top-0\" style=\"border-top-left-radius: 0px; border-top-right-radius: 0px;\">\n    <div class=\"mx-4\">\n      <div class=\"digit-boss-banner\" *ngIf=\"digitBossSwitch?.isVisible\">\n        <lib-toggle [field]=\"digitBossToggleConfig\" [(ngModel)]=\"this.digitBossSwitch.isSwitchOn\" (ngModelChange)=\"onDigitBossSwitchChange($event)\"></lib-toggle>\n        <div class=\"digit-boss-text\">\n          {{this.digitBossSwitch?.prefixText}}\n          <span class=\"highlight\">{{this.digitBossSwitch?.highlightText}}</span>\n          {{this.digitBossSwitch?.subText}}\n          <span class=\"arrow-icon\"><img src=\"https://cdn.godigit.com/digitPlusAssets/streamline_graph-arrow-increase-remix.svg\"/></span>\n        </div>\n      </div>\n      <lib-button [field]=\"recalculateButton\" (click)=\"calculateButtonClicked()\" />\n\n      <!-- //digit boss updated design -->\n        <div class=\"col-12 mt-3\" style=\"\n    justify-content: center;\n    flex-direction: row;\n    display: flex;\" *ngIf=\"!minimumAnnuityPayoutObj.isVisible\">\n      <div class=\"col-12 col-lg-12 d-flex flex-column justify-content-center padding-left-0 padding-right-0\">\n        <div class=\"realistic-picture-card\">\n          <div class=\"realistic-picture-header\">\n            <img *ngIf=\"digitBossSwitch?.icon\" [src]=\"digitBossSwitch?.icon\" style=\"width:12px;height:12px;object-fit:contain;flex-shrink:0;\" />\n            <span class=\"realistic-picture-label\">Realistic Picture:</span>\n          </div>\n          <span class=\"realistic-picture-text\">{{digitBossSwitch?.digitBossText}} <span class=\"realistic-picture-highlight\">{{digitBossSwitch?.digitBossValue}}</span></span>\n        </div>\n      </div>\n</div>\n\n      <div class=\"card  mb-0 mt-2\"\n        style=\"align-items: center;border:none;font-size: 8px;font-weight: 400;color:rgba(68, 68, 68, 1) \"\n        >\n        <div class=\"mx-4\" *ngIf=\"recalculateSubTextObj?.isVisible\"><img src=\"https://cdn.godigit.com/digitPlusAssets/Group+1010106336.png\"\n            style=\"margin-left: 3px;\" />\n          <span style=\"margin-left: 6px;\">Every time you make a change above, please click recalculate.</span>\n        </div>\n      </div>\n    </div>\n    <div\n      style=\"display: flex;align-items: center;justify-content: center;border:none;font-size: 10px;font-weight: 700;height:32px;background-color: rgba(255, 250, 235, 1);gap: 8px;margin: 4px;\"\n      *ngIf=\"annuityTableCalculator?.isVisible\">\n      <img src=\"https://cdn.godigit.com/retail-life/calculator.svg\" />\n      Minimum Guaranteed Payout(A) + Variable Payout(B) = Total Payout(C)\n    </div>\n    <!-- annuity calculator table -->\n    <div class=\"annuity-tables-main-container\" *ngIf=\"annuityTableCalculator?.isVisible\">\n      <div class=\"d-flex flex-row annuity-tables-container\">\n        <!-- Table 1 -->\n        <div class=\"annuity-calculator-table1\">\n          <div class=\"table-header annuitytable1-header\">Minimum Guaranteed Annuity Payout(A)</div>\n          <div class=\"table-body\">\n            <div class=\"table-cell\"><span class=\"rupee-icon\">\u20B9</span><span\n                style=\"font-size:12px; color: rgba(68, 68, 68, 1);\">\n                <{{annuityTableCalculator.annuitycalculatorTable1val1}}>\n              </span></div>\n            <button class=\"annuitytable-button\">{{annuityTableCalculator.annuitycalculatorTable1val2}}</button>\n          </div>\n        </div>\n\n        <div class=\"operator-symbol\">+</div>\n\n        <!-- Table 2 -->\n        <div class=\"annuity-calculator-table2\">\n          <div class=\"table-header annuitytable1-header\">Assume growth of BenchMark index</div>\n          <div class=\"table-body\">\n            <div class=\"table-row\">&#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        [preSelectConfig]=\"growthRatePreSelectConfig\"\n        [(ngModel)]=\"growthRateOption\"\n        (change)=\"onGrowthRateRadioChange($event)\"\n        (growthRateChange)=\"onGrowthRateCardChange($event)\" />\n    </div>\n\n    <div *ngIf=\"hrLineObj.isVisible\" class=\"generateSummary\">\n      <lib-hr-line [field]=\"hrLineObj\" />\n    </div>\n\n    <div *ngIf=\"generateSummaryObj.isVisible\" class=\"generateSummary\">\n      <lib-button [field]=\"generateSummaryObj\" (click)=\"generateSummaryClicked()\" />\n    </div>\n  </div>\n", styles: [".card-main-title{font-size:16px;font-family:Mulish!important;letter-spacing:0px!important;font-weight:800;line-height:24px;padding-bottom:16px}.col-5-5{flex:0 0 auto;max-width:44.16666667%}.custom-grid-template{display:grid;grid-template-columns:4fr .5fr 4fr;align-items:end}.vertical-line{border-left:2px solid #ccc;height:100px;margin:0 10px}.error-message{font-size:12px;font-weight:500;color:#e00;letter-spacing:0px}.annuity-msg{padding:4px 6px;margin-top:8px;font-size:10px;font-weight:400;color:#444;background-color:#e5f0fa;height:fit-content}.annuity-msg-1{padding:4px 6px;margin-top:8px;font-size:10px;font-weight:400;color:#444;background-color:#e6f7f3;height:fit-content;flex-wrap:nowrap!important}.annuity-tables-main-container{border:2px solid rgba(221,221,221,1);border-radius:8px;display:flex}.annuity-tables-container{display:flex;align-items:stretch;gap:0;width:100%}.annuity-calculator-table1,.annuity-calculator-table2,.annuity-calculator-table3,.annuity-calculator-table4{display:flex;flex-direction:column;height:100%;flex:1;color:#444;font-weight:400;font-size:10px}.annuity-calculator-table1{border-right:1px solid rgba(221,221,221,1)}.annuity-calculator-table2{border-left:1px solid rgba(221,221,221,1);border-right:1px solid rgba(221,221,221,1)}.annuity-calculator-table3{border-right:1px solid rgba(221,221,221,1)}.annuity-calculator-table4{border-left:1px solid rgba(221,221,221,1)}.table-header{padding:12px;font-size:10px;font-weight:700;text-align:center;border-bottom:1px solid rgba(221,221,221,1);height:60px;display:flex;align-items:center;justify-content:center;word-wrap:break-word;word-break:break-word;hyphens:auto}.annuitytable1-header{background-color:#ececec;color:#444}.annuitytable4-header{background-color:#fb03;color:#444}.table-body{display:flex;flex-direction:column;flex:1}.table-cell{padding:12px;text-align:center;font-size:16px;font-weight:600;flex:1;display:flex;flex-direction:row;justify-content:center;align-items:center;gap:4px}.annuity-mat-hint{font-size:8px;text-align:start;font-weight:400;color:#444;letter-spacing:0px}.table-row{padding:12px;text-align:center;font-size:14px;font-weight:500;background-color:#fff;border-bottom:1px solid #999;flex:1;display:flex;align-items:center;justify-content:center}.table-row:last-child{border-bottom:none}.annuitytable4-bg{background-color:#e6f7f3!important;color:#444}.annuitytable-button{background-color:#ececec;border:none;border-radius:4px;padding:2px 8px;font-size:10px;font-weight:700;cursor:pointer;margin-top:0;width:auto;min-width:30%;max-width:90%;height:24px;display:block;margin-left:auto;margin-right:auto;position:relative;bottom:40px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.rupee-icon{font-weight:700;margin-right:2px;font-size:12px;color:#444}.operator-symbol{display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:700;padding:0 16px;color:#f90}.annuity-calculator-paragraph{padding:16px 8px 4px;font-size:10px;margin:0 0 20px auto;width:73%;font-weight:400;color:#444;background-color:#ebf1ff}.annuity-calculator-paragraph1{font-weight:700;font-size:10px}.minium-annuity{display:flex;flex-direction:column}@media (max-width: 991px) and (min-width: 768px){.table-header{padding:8px 4px;font-size:9px;line-height:1.1}}@media (max-width: 767px) and (min-width: 576px){.table-header{padding:10px 6px;font-size:9px}}@media (max-width: 575px){.table-header{padding:8px 4px;font-size:8px}}@media (max-width: 575px){.annuity-msg{font-size:10px;line-height:1;height:fit-content}}@media (max-width: 575px){.annuity-msg-1{font-size:10px;line-height:1;flex-wrap:nowrap!important;height:fit-content}.annuity-msg-1 .img{width:4px;height:4px}}@media (max-width: 991px) and (min-width: 768px){.annuity-msg,.annuity-msg-1{font-size:9px;line-height:1.1;height:fit-content}}@media (max-width: 767px) and (min-width: 576px){.annuity-msg,.annuity-msg-1{font-size:10px;line-height:1.1;height:fit-content}}.digit-boss-banner{background:linear-gradient(to right,#222,#444);color:#fff;display:flex;align-items:center;padding:8px 16px;border-radius:4px;margin-bottom:16px;gap:8px;font-size:12px;min-height:16px;opacity:1;transform:rotate(0)}.digit-boss-banner ::ng-deep .toggle-background{margin-top:0!important;padding:0!important;background-color:transparent!important;border:none!important}.digit-boss-banner ::ng-deep .toggle_switch{margin-top:0!important;gap:0!important}.digit-boss-text{display:flex;align-items:center;gap:4px;white-space:nowrap}.highlight{color:#fb0;font-weight:700}.arrow-icon{color:#fb0;margin-left:4px;font-size:14px}.generateSummary{margin-right:.4rem;margin-left:.4rem}.realistic-picture-card{display:flex;flex-direction:row;align-items:center;flex-wrap:wrap;gap:4px;background-color:#cce0f5;border-radius:4px;padding:4px 6px;font-size:8px;color:#06c;line-height:1.5;box-sizing:border-box}.realistic-picture-header{display:flex;align-items:center;gap:4px}.realistic-picture-content{display:flex;flex-direction:column;gap:2px}.realistic-picture-label{font-weight:700;font-size:8px;line-height:8px;color:#06c}.realistic-picture-text{font-weight:600;font-size:10px;line-height:14px;color:#222}.realistic-picture-highlight{font-weight:800;font-size:10px;line-height:14px;color:#0048ad}.toggle-text{margin-top:-5px!important}\n"] }]
         }], ctorParameters: () => [{ type: MasterControlService }], propDecorators: { triggerValidation: [{
                 type: Input
             }], annuityRadioRef: [{