master-control 0.5.3 → 0.5.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2022/lib/annuity-premium-calculator/annuity-premium-calculator.component.mjs +9 -9
- package/esm2022/lib/medial-questions/medial-questions.component.mjs +3 -3
- package/esm2022/lib/toggle/toggle.component.mjs +3 -3
- package/fesm2022/master-control.mjs +12 -12
- package/fesm2022/master-control.mjs.map +1 -1
- package/master-control-0.5.5.tgz +0 -0
- package/package.json +1 -1
- package/master-control-0.5.03.tgz +0 -0
|
@@ -865,7 +865,7 @@ class ToggleComponent {
|
|
|
865
865
|
useExisting: forwardRef(() => ToggleComponent),
|
|
866
866
|
multi: true,
|
|
867
867
|
},
|
|
868
|
-
], 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
|
|
868
|
+
], 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"] }] });
|
|
869
869
|
}
|
|
870
870
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ToggleComponent, decorators: [{
|
|
871
871
|
type: Component,
|
|
@@ -875,7 +875,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
875
875
|
useExisting: forwardRef(() => ToggleComponent),
|
|
876
876
|
multi: true,
|
|
877
877
|
},
|
|
878
|
-
], 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
|
|
878
|
+
], 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"] }]
|
|
879
879
|
}], ctorParameters: () => [{ type: MasterControlService }], propDecorators: { change: [{
|
|
880
880
|
type: Output
|
|
881
881
|
}] } });
|
|
@@ -6589,7 +6589,7 @@ class MedialQuestionsComponent {
|
|
|
6589
6589
|
this.questionsValueChange.emit(this.personUwAnswers);
|
|
6590
6590
|
}
|
|
6591
6591
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MedialQuestionsComponent, deps: [{ token: i0.NgZone }, { token: MasterService }], target: i0.ɵɵFactoryTarget.Component });
|
|
6592
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: MedialQuestionsComponent, isStandalone: true, selector: "lib-medial-questions", inputs: { clusterId: { classPropertyName: "clusterId", publicName: "clusterId", isSignal: true, isRequired: false, transformFunction: null }, triggerValidation: { classPropertyName: "triggerValidation", publicName: "triggerValidation", isSignal: false, isRequired: false, transformFunction: null }, medialQuestionResponse: { classPropertyName: "medialQuestionResponse", publicName: "medialQuestionResponse", isSignal: true, isRequired: false, transformFunction: null }, personUWOpenQuoteResponse: { classPropertyName: "personUWOpenQuoteResponse", publicName: "personUWOpenQuoteResponse", isSignal: true, isRequired: false, transformFunction: null }, defaultValues: { classPropertyName: "defaultValues", publicName: "defaultValues", isSignal: true, isRequired: false, transformFunction: null }, personType: { classPropertyName: "personType", publicName: "personType", isSignal: true, isRequired: false, transformFunction: null }, field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { questionsValueChange: "questionsValueChange" }, viewQueries: [{ propertyName: "addressInput", first: true, predicate: ["addressInput"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div *ngFor=\"let section of questionList\">\n <div *ngIf=\"\n !checkIfValueIsEmpty(section['questions']) &&\n section['showSection']\n \" class=\"p-3 mb-4\" id=\"personUwMedicalQuestions\">\n <h6 class=\"page-title bold-label\">\n {{ getTitleCase(section[\"sectionName\"]) }}\n </h6>\n <!--<lib-hr-line [field]=\"horizontalLineObj\" />-->\n <div *ngFor=\"let questions of section['questions']\" class=\"row\">\n <!-- <div *ngIf=\"questions['questionType'] === 'IMAGE TEXT'\">\n <img [src]=\"questions['sampleS3Link']\" class=\"d-block mx-auto\" [alt]=\"questions['title']\">\n <h3 [innerHTML]=\"questions['questionText']\"></h3>\n </div> -->\n\n <div [ngClass]=\"questions?.field?.cssClass\" *ngIf=\"\n questions['questionType'] === 'FREE TEXT' &&\n questions['cammundaQuestionCode'] !== 'QHT' &&\n questions['isShowQuestionInUI']\n \">\n <div class=\"col-12 px-0 my-1\">\n <lib-textbox [(ngModel)]=\"personUwAnswers[questions.questionId]\" [field]=\"questions['field']\"\n (blur)=\"validateField(questions.questionId, questions); removeSubQuestionValues(); handleQuestionChange()\" />\n <div class=\"error-message text-danger mt-1\" *ngIf=\"hasAnyFieldError(questions.questionId)\">\n {{ getFieldErrorMessage(questions.questionId, questions) }}\n </div>\n </div>\n </div>\n\n <div [ngClass]=\"questions?.field?.cssClass\" *ngIf=\"\n questions['questionType'] === 'HEIGHTINPUT' &&\n questions['cammundaQuestionCode'] === 'QHTF' &&\n questions['isShowQuestionInUI']\n \">\n <label class=\"card-topic d-block field-lable\">Height\n <span style=\"color: #ee0000\">*</span>\n </label>\n <div [class]=\" 'col-auto px-0 my-0 py-0 heightinput medicalQuestionsHeightInput'\"\n id=\"medicalQuestionsHeightInput\" (focusout)=\"validateField(questions.questionId, questions)\">\n <div class=\"row col-12 my-1\" *ngIf=\"personUwAnswers['medicalQuestionsHeightUnit'] === 'CM'\">\n <div class=\"col-7 py-0 heightInputs\">\n <lib-textbox [(ngModel)]=\"personUwAnswers['medicalQuestionsHeightInput']\"\n (blur)=\"validateField(questions.questionId, questions)\" (ngModelChange)=\"removeSubQuestionValues(); handleQuestionChange()\"\n [field]=\"medQuestionObj['QHT']['field']\" />\n </div>\n <div class=\"col-5\">\n <lib-select [(ngModel)]=\"personUwAnswers['medicalQuestionsHeightUnit']\"\n [field]=\"medQuestionObj['heightObjectTypes']\" (blur)=\"validateField(questions.questionId, questions)\"\n (ngModelChange)=\"validateField(questions.questionId, questions); checkAndUpdateHeightUnit()\" />\n </div>\n </div>\n <div class=\"row\" *ngIf=\"\n personUwAnswers[\n 'medicalQuestionsHeightUnit'\n ] === 'FEET'\n \">\n <div class=\"col-4 py-0 my-1\">\n <lib-select [(ngModel)]=\"personUwAnswers['medicalQuestionFeetInput']\"\n (blur)=\"validateField(questions.questionId, questions)\" (ngModelChange)=\"removeSubQuestionValues(); handleQuestionChange()\"\n [field]=\"medQuestionObj['QHTF']['field']\" />\n </div>\n <div class=\"col-4 py-0 my-1\">\n <lib-select [(ngModel)]=\"personUwAnswers['medicalQuestionsInchesInput']\"\n (blur)=\"validateField(questions.questionId, questions)\" (ngModelChange)=\"removeSubQuestionValues(); handleQuestionChange()\"\n [field]=\"medQuestionObj['QHTI']['field']\" />\n </div>\n <div class=\"col-4 py-0 my-1\">\n <lib-select [(ngModel)]=\"personUwAnswers['medicalQuestionsHeightUnit']\"\n [field]=\"medQuestionObj['heightObjectTypes']\" (blur)=\"validateField(questions.questionId, questions)\"\n (ngModelChange)=\"checkAndUpdateHeightUnit()\" />\n </div>\n </div>\n\n </div>\n <div class=\"error-message text-danger mt-1\" *ngIf=\"hasAnyFieldError(questions.questionId)\">\n {{ getFieldErrorMessage(questions.questionId, questions) }}\n </div>\n </div>\n <div class=\"row mt-0 pt-0\" *ngIf=\"\n questions['questionType'] === 'MAP' &&\n questions['isShowQuestionInUI']\n \">\n\n\n <div class=\"map-container\">\n <div class=\"address-search-container mb-3\">\n\n <div class=\"row mb-3\">\n <div class=\"col-6\">\n <label class=\"form-label card-topic\">Longitude</label>\n <input type=\"number\" class=\"form-control\" autocomplete=\"off\" [(ngModel)]=\"longitude\"\n placeholder=\"Enter longitude\" step=\"any\" readonly\n (blur)=\"validateField(questions.questionId, questions)\">\n </div>\n <div class=\"col-6\">\n <label class=\"form-label card-topic\">Latitude</label>\n <input type=\"number\" class=\"form-control\" autocomplete=\"off\" [(ngModel)]=\"latitude\"\n placeholder=\"Enter latitude\" step=\"any\" readonly\n (blur)=\"validateField(questions.questionId, questions)\">\n </div>\n </div>\n\n <input #addressInput type=\"text\" class=\"form-control\" placeholder=\"Search for address\"\n (keyup)=\"onAddressInputKeyup($event)\" (focus)=\"showDropdown = true\" (blur)=\"onInputBlur()\"\n autocomplete=\"off\">\n <div *ngIf=\"showDropdown && addressSuggestions.length > 0\"\n class=\"autocomplete-dropdown position-absolute w-100 mt-1\"\n style=\"z-index: 1000; max-height: 200px; overflow-y: auto; background: white; border: 1px solid #ccc; border-radius: 4px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);\">\n <div *ngFor=\"let suggestion of addressSuggestions; let i = index\" class=\"dropdown-item p-2\"\n style=\"cursor: pointer; border-bottom: 1px solid #eee;\" (mousedown)=\"selectAddress(suggestion)\"\n (mouseenter)=\"hoveredIndex = i\" [class.bg-light]=\"hoveredIndex === i\">\n <div class=\"fw-bold\">{{ suggestion.main_text }}</div>\n <small class=\"text-muted\">{{ suggestion.secondary_text }}</small>\n </div>\n </div>\n <small class=\"text-muted\">Start typing to search for addresses</small>\n </div>\n <google-map [center]=\"center\" [zoom]=\"zoom\">\n <map-marker [position]=\"currentCoordinates\"></map-marker>\n </google-map>\n </div>\n </div>\n\n\n <div [ngClass]=\"questions?.field?.cssClass\" *ngIf=\"\n (questions['questionType'] === 'RADIO BUTTON' ||\n questions['questionType'] === 'ADDMORE') &&\n questions['isShowQuestionInUI']\n \">\n <lib-radio [(ngModel)]=\"personUwAnswers[questions.questionId]\"\n (blur)=\"validateField(questions.questionId, questions)\"\n (ngModelChange)=\"validateField(questions.questionId, questions); removeSubQuestionValues(); handleQuestionChange()\"\n [field]=\"questions['field']\" />\n <div class=\"error-message text-danger mt-1\" *ngIf=\"hasAnyFieldError(questions.questionId)\">\n {{ getFieldErrorMessage(questions.questionId, questions) }}\n </div>\n </div>\n\n <div class=\"my-1\" [ngClass]=\"questions?.field?.cssClass\" *ngIf=\"\n questions['questionType'] === 'CHECKBOX' &&\n questions['isShowQuestionInUI']\n \">\n <lib-multiple-select [(ngModel)]=\"personUwAnswers[questions.questionId]\"\n (click)=\"validateField(questions.questionId, questions)\"\n (ngModelChange)=\"\n validateField(questions.questionId, questions);\n valueChangeForMultiselect(questions)\n \"\n [field]=\"questions['field']\"\n />\n <div class=\"error-message text-danger mt-1\" *ngIf=\"hasAnyFieldError(questions.questionId)\">\n {{ getFieldErrorMessage(questions.questionId, questions) }}\n </div>\n </div>\n\n <div class=\"my-1\" [ngClass]=\"questions?.field?.cssClass\" *ngIf=\"\n questions['questionType'] === 'DECLARATION' &&\n questions['isShowQuestionInUI']\n \">\n <lib-checkbox [(ngModel)]=\"personUwAnswers[questions.questionId]\"\n (blur)=\"validateField(questions.questionId, questions)\"\n (ngModelChange)=\"validateField(questions.questionId, questions); removeSubQuestionValues(); handleQuestionChange()\"\n [field]=\"questions['field']\" />\n <div class=\"error-message text-danger mt-1\" *ngIf=\"hasAnyFieldError(questions.questionId)\">\n {{ getFieldErrorMessage(questions.questionId, questions) }}\n </div>\n </div>\n\n <div class=\"my-1\" [ngClass]=\"questions?.field?.cssClass\" *ngIf=\"\n questions['questionType'] === 'DROPDOWN' &&\n questions['isShowQuestionInUI']\n \" (focusout)=\"validateField(questions.questionId, questions)\">\n {{questions['field'].isDisable}}\n <lib-select [(ngModel)]=\"personUwAnswers[questions.questionId]\" [field]=\"questions['field']\"\n (blur)=\"validateField(questions.questionId, questions)\"\n (ngModelChange)=\"validateField(questions.questionId, questions); removeSubQuestionValues(); handleQuestionChange()\" />\n <div class=\"error-message text-danger mt-1\" *ngIf=\"hasAnyFieldError(questions.questionId)\">\n {{ getFieldErrorMessage(questions.questionId, questions) }}\n </div>\n </div>\n\n <div class=\"my-1\" [ngClass]=\"questions?.field?.cssClass\" *ngIf=\"\n questions['questionType'] === 'CALENDAR' &&\n questions['isShowQuestionInUI']\n \">\n <lib-dob [(ngModel)]=\"personUwAnswers[questions.questionId]\" [field]=\"questions['field']\"\n (blur)=\"validateField(questions.questionId, questions)\" (ngModelChange)=\"removeSubQuestionValues(); handleQuestionChange()\" />\n <div class=\"error-message text-danger mt-1\" *ngIf=\"hasAnyFieldError(questions.questionId)\">\n {{ getFieldErrorMessage(questions.questionId, questions) }}\n </div>\n </div>\n\n <!-- <div\n class=\"\"\n *ngIf=\"\n questions['questionType'] === 'HEIGHTINPUT' &&\n questions['cammundaQuestionCode'] === 'QHTF' &&\n questions['isShowQuestionInUI']\n \"\n >\n </div> -->\n <div class=\"my-1\" [ngClass]=\"questions?.field?.cssClass\" *ngIf=\"\n questions['questionType'] === 'DOCUPLOAD' &&\n questions['isShowQuestionInUI']\n \">\n <lib-upload [field]=\"questions['field']\" (filePreview)=\"onDocumentFilePreview($event)\"\n (blur)=\"validateField(questions.questionId, questions);\" />\n <lib-file-preview *ngIf=\" previewFile\" [field]=\"questions['field']\" [file]=\"previewFile\"\n (closed)=\"closeFilePreview()\">\n </lib-file-preview>\n </div>\n\n\n <div [ngClass]=\"questions?.field?.cssClass\" *ngIf=\"\n questions['questionType'] === 'PASSPORT_UPLOAD' &&\n questions['isShowQuestionInUI']\n \">\n <!-- pending -->\n </div>\n </div>\n </div>\n</div>\n", styles: [".map-container{width:100%;position:relative}.address-search-container{position:relative}.address-search-container input{width:100%;padding:10px;border:1px solid #ddd;border-radius:4px;box-sizing:border-box}.address-search-container input:focus{outline:none;border-color:#4285f4;box-shadow:0 0 0 2px #4285f433}.pac-container{z-index:10000!important;border-radius:4px;border:1px solid #ddd;box-shadow:0 2px 6px #0000004d}.pac-item{padding:10px;border-bottom:1px solid #eee;cursor:pointer}.pac-item:hover{background-color:#f5f5f5}.selected-address{padding:8px;background-color:#f8f9fa;border-radius:4px;border-left:3px solid #28a745}.map-container ::ng-deep google-map>div{height:400px!important;width:auto!important}.medicalQues{font-size:12px;font-style:normal;font-weight:400;line-height:normal}.heightinput{border:2px solid #fb0;padding:10px;border-radius:4px;width:fit-content}.heightInputs{display:flex;align-items:center;gap:10px}.blink_me{animation:blinker 1s linear infinite}.invalid-field-one-ui{border:2px solid #dc3545!important;box-shadow:0 0 0 3px #dc354526!important}.invalid-field-one-ui:focus{border-color:#dc3545!important;box-shadow:0 0 0 3px #dc354540!important}@keyframes blinker{50%{opacity:0}}.error-message{font-size:12px;color:#dc3545;margin-top:4px;font-weight:400}.text-danger{color:#dc3545!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { 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"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: TextboxComponent, selector: "lib-textbox", inputs: ["field", "reactiveFormControlobject"], outputs: ["blur"] }, { kind: "component", type: RadioComponent, selector: "lib-radio", inputs: ["reactiveFormControlobject", "field"], outputs: ["change"] }, { kind: "component", type: CheckboxComponent, selector: "lib-checkbox", inputs: ["field", "reactiveFormControlobject"], outputs: ["change"] }, { kind: "component", type: SelectComponent, selector: "lib-select", inputs: ["field", "reactiveFormControlobject"], outputs: ["selectionChange", "infoClick"] }, { kind: "component", type: DobComponent, selector: "lib-dob", inputs: ["field", "reactiveFormControlobject"], outputs: ["blur", "valueChange", "dateSelected", "invalidDate"] }, { kind: "component", type: UploadComponent, selector: "lib-upload", inputs: ["documentUploaderField", "openQuoteImageObj", "field", "reactiveFormControlobject"], outputs: ["filesChanged", "fileRemoved", "filePreview"] }, { kind: "component", type: MultipleSelectComponent, selector: "lib-multiple-select", inputs: ["field", "reactiveFormControlobject"], outputs: ["selectionChange"] }, { kind: "ngmodule", type: GoogleMapsModule }, { kind: "component", type: i4$3.GoogleMap, selector: "google-map", inputs: ["height", "width", "mapId", "mapTypeId", "center", "zoom", "options"], outputs: ["mapInitialized", "authFailure", "boundsChanged", "centerChanged", "mapClick", "mapDblclick", "mapDrag", "mapDragend", "mapDragstart", "headingChanged", "idle", "maptypeidChanged", "mapMousemove", "mapMouseout", "mapMouseover", "projectionChanged", "mapRightclick", "tilesloaded", "tiltChanged", "zoomChanged"], exportAs: ["googleMap"] }, { kind: "directive", type: i4$3.MapMarker, selector: "map-marker", inputs: ["title", "position", "label", "clickable", "options", "icon", "visible"], outputs: ["animationChanged", "mapClick", "clickableChanged", "cursorChanged", "mapDblclick", "mapDrag", "mapDragend", "draggableChanged", "mapDragstart", "flatChanged", "iconChanged", "mapMousedown", "mapMouseout", "mapMouseover", "mapMouseup", "positionChanged", "mapRightclick", "shapeChanged", "titleChanged", "visibleChanged", "zindexChanged", "markerInitialized"], exportAs: ["mapMarker"] }, { kind: "component", type: FilePreviewComponent, selector: "lib-file-preview", inputs: ["field", "file"], outputs: ["closed"] }] });
|
|
6592
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: MedialQuestionsComponent, isStandalone: true, selector: "lib-medial-questions", inputs: { clusterId: { classPropertyName: "clusterId", publicName: "clusterId", isSignal: true, isRequired: false, transformFunction: null }, triggerValidation: { classPropertyName: "triggerValidation", publicName: "triggerValidation", isSignal: false, isRequired: false, transformFunction: null }, medialQuestionResponse: { classPropertyName: "medialQuestionResponse", publicName: "medialQuestionResponse", isSignal: true, isRequired: false, transformFunction: null }, personUWOpenQuoteResponse: { classPropertyName: "personUWOpenQuoteResponse", publicName: "personUWOpenQuoteResponse", isSignal: true, isRequired: false, transformFunction: null }, defaultValues: { classPropertyName: "defaultValues", publicName: "defaultValues", isSignal: true, isRequired: false, transformFunction: null }, personType: { classPropertyName: "personType", publicName: "personType", isSignal: true, isRequired: false, transformFunction: null }, field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { questionsValueChange: "questionsValueChange" }, viewQueries: [{ propertyName: "addressInput", first: true, predicate: ["addressInput"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div *ngFor=\"let section of questionList\">\n <div *ngIf=\"\n !checkIfValueIsEmpty(section['questions']) &&\n section['showSection']\n \" class=\"p-3 mb-4\" id=\"personUwMedicalQuestions\">\n <h6 class=\"page-title bold-label\">\n {{ getTitleCase(section[\"sectionName\"]) }}\n </h6>\n <!--<lib-hr-line [field]=\"horizontalLineObj\" />-->\n <div *ngFor=\"let questions of section['questions']\" class=\"row\">\n <!-- <div *ngIf=\"questions['questionType'] === 'IMAGE TEXT'\">\n <img [src]=\"questions['sampleS3Link']\" class=\"d-block mx-auto\" [alt]=\"questions['title']\">\n <h3 [innerHTML]=\"questions['questionText']\"></h3>\n </div> -->\n\n <div [ngClass]=\"questions?.field?.cssClass\" *ngIf=\"\n questions['questionType'] === 'FREE TEXT' &&\n questions['cammundaQuestionCode'] !== 'QHT' &&\n questions['isShowQuestionInUI']\n \">\n <div class=\"col-12 px-0 my-1\">\n <lib-textbox [(ngModel)]=\"personUwAnswers[questions.questionId]\" [field]=\"questions['field']\"\n (blur)=\"validateField(questions.questionId, questions); removeSubQuestionValues(); handleQuestionChange()\" />\n <div class=\"error-message text-danger mt-1\" *ngIf=\"hasAnyFieldError(questions.questionId)\">\n {{ getFieldErrorMessage(questions.questionId, questions) }}\n </div>\n </div>\n </div>\n\n <div [ngClass]=\"questions?.field?.cssClass\" *ngIf=\"\n questions['questionType'] === 'HEIGHTINPUT' &&\n questions['cammundaQuestionCode'] === 'QHTF' &&\n questions['isShowQuestionInUI']\n \">\n <label class=\"card-topic d-block field-lable\">Height\n <span style=\"color: #ee0000\">*</span>\n </label>\n <div [class]=\" 'col-auto px-0 my-0 py-0 heightinput medicalQuestionsHeightInput'\"\n id=\"medicalQuestionsHeightInput\" (focusout)=\"validateField(questions.questionId, questions)\">\n <div class=\"row col-12 my-1\" *ngIf=\"personUwAnswers['medicalQuestionsHeightUnit'] === 'CM'\">\n <div class=\"col-7 py-0 heightInputs\">\n <lib-textbox [(ngModel)]=\"personUwAnswers['medicalQuestionsHeightInput']\"\n (blur)=\"validateField(questions.questionId, questions)\" (ngModelChange)=\"removeSubQuestionValues(); handleQuestionChange()\"\n [field]=\"medQuestionObj['QHT']['field']\" />\n </div>\n <div class=\"col-5\">\n <lib-select [(ngModel)]=\"personUwAnswers['medicalQuestionsHeightUnit']\"\n [field]=\"medQuestionObj['heightObjectTypes']\" (blur)=\"validateField(questions.questionId, questions)\"\n (ngModelChange)=\"validateField(questions.questionId, questions); checkAndUpdateHeightUnit()\" />\n </div>\n </div>\n <div class=\"row\" *ngIf=\"\n personUwAnswers[\n 'medicalQuestionsHeightUnit'\n ] === 'FEET'\n \">\n <div class=\"col-4 py-0 my-1\">\n <lib-select [(ngModel)]=\"personUwAnswers['medicalQuestionFeetInput']\"\n (blur)=\"validateField(questions.questionId, questions)\" (ngModelChange)=\"removeSubQuestionValues(); handleQuestionChange()\"\n [field]=\"medQuestionObj['QHTF']['field']\" />\n </div>\n <div class=\"col-4 py-0 my-1\">\n <lib-select [(ngModel)]=\"personUwAnswers['medicalQuestionsInchesInput']\"\n (blur)=\"validateField(questions.questionId, questions)\" (ngModelChange)=\"removeSubQuestionValues(); handleQuestionChange()\"\n [field]=\"medQuestionObj['QHTI']['field']\" />\n </div>\n <div class=\"col-4 py-0 my-1\">\n <lib-select [(ngModel)]=\"personUwAnswers['medicalQuestionsHeightUnit']\"\n [field]=\"medQuestionObj['heightObjectTypes']\" (blur)=\"validateField(questions.questionId, questions)\"\n (ngModelChange)=\"checkAndUpdateHeightUnit()\" />\n </div>\n </div>\n\n </div>\n <div class=\"error-message text-danger mt-1\" *ngIf=\"hasAnyFieldError(questions.questionId)\">\n {{ getFieldErrorMessage(questions.questionId, questions) }}\n </div>\n </div>\n <div class=\"row mt-0 pt-0\" *ngIf=\"\n questions['questionType'] === 'MAP' &&\n questions['isShowQuestionInUI']\n \">\n\n\n <div class=\"map-container\">\n <div class=\"address-search-container mb-3\">\n\n <div class=\"row mb-3\">\n <div class=\"col-6\">\n <label class=\"form-label card-topic\">Longitude</label>\n <input type=\"number\" class=\"form-control\" autocomplete=\"off\" [(ngModel)]=\"longitude\"\n placeholder=\"Enter longitude\" step=\"any\" readonly\n (blur)=\"validateField(questions.questionId, questions)\">\n </div>\n <div class=\"col-6\">\n <label class=\"form-label card-topic\">Latitude</label>\n <input type=\"number\" class=\"form-control\" autocomplete=\"off\" [(ngModel)]=\"latitude\"\n placeholder=\"Enter latitude\" step=\"any\" readonly\n (blur)=\"validateField(questions.questionId, questions)\">\n </div>\n </div>\n\n <input #addressInput type=\"text\" class=\"form-control\" placeholder=\"Search for address\"\n (keyup)=\"onAddressInputKeyup($event)\" (focus)=\"showDropdown = true\" (blur)=\"onInputBlur()\"\n autocomplete=\"off\">\n <div *ngIf=\"showDropdown && addressSuggestions.length > 0\"\n class=\"autocomplete-dropdown position-absolute w-100 mt-1\"\n style=\"z-index: 1000; max-height: 200px; overflow-y: auto; background: white; border: 1px solid #ccc; border-radius: 4px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);\">\n <div *ngFor=\"let suggestion of addressSuggestions; let i = index\" class=\"dropdown-item p-2\"\n style=\"cursor: pointer; border-bottom: 1px solid #eee;\" (mousedown)=\"selectAddress(suggestion)\"\n (mouseenter)=\"hoveredIndex = i\" [class.bg-light]=\"hoveredIndex === i\">\n <div class=\"fw-bold\">{{ suggestion.main_text }}</div>\n <small class=\"text-muted\">{{ suggestion.secondary_text }}</small>\n </div>\n </div>\n <small class=\"text-muted\">Start typing to search for addresses</small>\n </div>\n <google-map [center]=\"center\" [zoom]=\"zoom\">\n <map-marker [position]=\"currentCoordinates\"></map-marker>\n </google-map>\n </div>\n </div>\n\n\n <div [ngClass]=\"questions?.field?.cssClass\" *ngIf=\"\n (questions['questionType'] === 'RADIO BUTTON' ||\n questions['questionType'] === 'ADDMORE') &&\n questions['isShowQuestionInUI']\n \">\n <lib-radio [(ngModel)]=\"personUwAnswers[questions.questionId]\"\n (blur)=\"validateField(questions.questionId, questions)\"\n (ngModelChange)=\"validateField(questions.questionId, questions); removeSubQuestionValues(); handleQuestionChange()\"\n [field]=\"questions['field']\" />\n <div class=\"error-message text-danger mt-1\" *ngIf=\"hasAnyFieldError(questions.questionId)\">\n {{ getFieldErrorMessage(questions.questionId, questions) }}\n </div>\n </div>\n\n <div class=\"my-1\" [ngClass]=\"questions?.field?.cssClass\" *ngIf=\"\n questions['questionType'] === 'CHECKBOX' &&\n questions['isShowQuestionInUI']\n \">\n <lib-multiple-select [(ngModel)]=\"personUwAnswers[questions.questionId]\"\n (click)=\"validateField(questions.questionId, questions)\"\n (ngModelChange)=\"\n validateField(questions.questionId, questions);\n valueChangeForMultiselect(questions)\n \"\n [field]=\"questions['field']\"\n />\n <div class=\"error-message text-danger mt-1\" *ngIf=\"hasAnyFieldError(questions.questionId)\">\n {{ getFieldErrorMessage(questions.questionId, questions) }}\n </div>\n </div>\n\n <div class=\"my-1\" [ngClass]=\"questions?.field?.cssClass\" *ngIf=\"\n questions['questionType'] === 'DECLARATION' &&\n questions['isShowQuestionInUI']\n \">\n <lib-checkbox [(ngModel)]=\"personUwAnswers[questions.questionId]\"\n (blur)=\"validateField(questions.questionId, questions)\"\n (ngModelChange)=\"validateField(questions.questionId, questions); removeSubQuestionValues(); handleQuestionChange()\"\n [field]=\"questions['field']\" />\n <div class=\"error-message text-danger mt-1\" *ngIf=\"hasAnyFieldError(questions.questionId)\">\n {{ getFieldErrorMessage(questions.questionId, questions) }}\n </div>\n </div>\n\n <div class=\"my-1\" [ngClass]=\"questions?.field?.cssClass\" *ngIf=\"\n questions['questionType'] === 'DROPDOWN' &&\n questions['isShowQuestionInUI']\n \" (focusout)=\"validateField(questions.questionId, questions)\">\n {{questions['field'].isDisable}}\n <lib-select [(ngModel)]=\"personUwAnswers[questions.questionId]\" [field]=\"questions['field']\"\n (blur)=\"validateField(questions.questionId, questions)\"\n (ngModelChange)=\"validateField(questions.questionId, questions); removeSubQuestionValues(); handleQuestionChange()\" />\n <div class=\"error-message text-danger mt-1\" *ngIf=\"hasAnyFieldError(questions.questionId)\">\n {{ getFieldErrorMessage(questions.questionId, questions) }}\n </div>\n </div>\n\n <div class=\"my-1\" [ngClass]=\"questions?.field?.cssClass\" *ngIf=\"\n questions['questionType'] === 'CALENDAR' &&\n questions['isShowQuestionInUI']\n \">\n <lib-dob [(ngModel)]=\"personUwAnswers[questions.questionId]\" [field]=\"questions['field']\"\n (blur)=\"validateField(questions.questionId, questions)\" (ngModelChange)=\"removeSubQuestionValues(); handleQuestionChange()\" />\n <div class=\"error-message text-danger mt-1\" *ngIf=\"hasAnyFieldError(questions.questionId)\">\n {{ getFieldErrorMessage(questions.questionId, questions) }}\n </div>\n </div>\n\n <!-- <div\n class=\"\"\n *ngIf=\"\n questions['questionType'] === 'HEIGHTINPUT' &&\n questions['cammundaQuestionCode'] === 'QHTF' &&\n questions['isShowQuestionInUI']\n \"\n >\n </div> -->\n <div class=\"my-1\" [ngClass]=\"questions?.field?.cssClass\" *ngIf=\"\n questions['questionType'] === 'DOCUPLOAD' &&\n questions['isShowQuestionInUI']\n \">\n <lib-upload [field]=\"questions['field']\" (filePreview)=\"onDocumentFilePreview($event)\"\n (blur)=\"validateField(questions.questionId, questions);\" />\n <lib-file-preview *ngIf=\" previewFile\" [field]=\"questions['field']\" [file]=\"previewFile\"\n (closed)=\"closeFilePreview()\">\n </lib-file-preview>\n </div>\n\n\n <div [ngClass]=\"questions?.field?.cssClass\" *ngIf=\"\n questions['questionType'] === 'PASSPORT_UPLOAD' &&\n questions['isShowQuestionInUI']\n \">\n <!-- pending -->\n </div>\n </div>\n </div>\n</div>\n", styles: [".map-container{width:100%;position:relative}.address-search-container{position:relative}.address-search-container input{width:100%;padding:10px;border:1px solid #ddd;border-radius:4px;box-sizing:border-box}.address-search-container input:focus{outline:none;border-color:#4285f4;box-shadow:0 0 0 2px #4285f433}.pac-container{z-index:10000!important;border-radius:4px;border:1px solid #ddd;box-shadow:0 2px 6px #0000004d}.pac-item{padding:10px;border-bottom:1px solid #eee;cursor:pointer}.pac-item:hover{background-color:#f5f5f5}.selected-address{padding:8px;background-color:#f8f9fa;border-radius:4px;border-left:3px solid #28a745}.map-container ::ng-deep google-map>div{height:400px!important;width:auto!important}.medicalQues{font-size:12px;font-style:normal;font-weight:400;line-height:normal}.heightinput{border:2px solid #fb0;padding:10px;border-radius:4px;width:fit-content}.heightInputs{display:flex;align-items:center;gap:10px}.blink_me{animation:blinker 1s linear infinite}.invalid-field-one-ui{border:2px solid #dc3545!important;box-shadow:0 0 0 3px #dc354526!important}.invalid-field-one-ui:focus{border-color:#dc3545!important;box-shadow:0 0 0 3px #dc354540!important}@keyframes blinker{50%{opacity:0}}.error-message{font-size:12px;color:#dc3545;margin-top:4px;font-weight:400}.text-danger{color:#dc3545!important}.error-message:first-letter{text-transform:uppercase}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { 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"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: TextboxComponent, selector: "lib-textbox", inputs: ["field", "reactiveFormControlobject"], outputs: ["blur"] }, { kind: "component", type: RadioComponent, selector: "lib-radio", inputs: ["reactiveFormControlobject", "field"], outputs: ["change"] }, { kind: "component", type: CheckboxComponent, selector: "lib-checkbox", inputs: ["field", "reactiveFormControlobject"], outputs: ["change"] }, { kind: "component", type: SelectComponent, selector: "lib-select", inputs: ["field", "reactiveFormControlobject"], outputs: ["selectionChange", "infoClick"] }, { kind: "component", type: DobComponent, selector: "lib-dob", inputs: ["field", "reactiveFormControlobject"], outputs: ["blur", "valueChange", "dateSelected", "invalidDate"] }, { kind: "component", type: UploadComponent, selector: "lib-upload", inputs: ["documentUploaderField", "openQuoteImageObj", "field", "reactiveFormControlobject"], outputs: ["filesChanged", "fileRemoved", "filePreview"] }, { kind: "component", type: MultipleSelectComponent, selector: "lib-multiple-select", inputs: ["field", "reactiveFormControlobject"], outputs: ["selectionChange"] }, { kind: "ngmodule", type: GoogleMapsModule }, { kind: "component", type: i4$3.GoogleMap, selector: "google-map", inputs: ["height", "width", "mapId", "mapTypeId", "center", "zoom", "options"], outputs: ["mapInitialized", "authFailure", "boundsChanged", "centerChanged", "mapClick", "mapDblclick", "mapDrag", "mapDragend", "mapDragstart", "headingChanged", "idle", "maptypeidChanged", "mapMousemove", "mapMouseout", "mapMouseover", "projectionChanged", "mapRightclick", "tilesloaded", "tiltChanged", "zoomChanged"], exportAs: ["googleMap"] }, { kind: "directive", type: i4$3.MapMarker, selector: "map-marker", inputs: ["title", "position", "label", "clickable", "options", "icon", "visible"], outputs: ["animationChanged", "mapClick", "clickableChanged", "cursorChanged", "mapDblclick", "mapDrag", "mapDragend", "draggableChanged", "mapDragstart", "flatChanged", "iconChanged", "mapMousedown", "mapMouseout", "mapMouseover", "mapMouseup", "positionChanged", "mapRightclick", "shapeChanged", "titleChanged", "visibleChanged", "zindexChanged", "markerInitialized"], exportAs: ["mapMarker"] }, { kind: "component", type: FilePreviewComponent, selector: "lib-file-preview", inputs: ["field", "file"], outputs: ["closed"] }] });
|
|
6593
6593
|
}
|
|
6594
6594
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MedialQuestionsComponent, decorators: [{
|
|
6595
6595
|
type: Component,
|
|
@@ -6607,7 +6607,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
6607
6607
|
GoogleMapsModule,
|
|
6608
6608
|
HrLineComponent,
|
|
6609
6609
|
FilePreviewComponent,
|
|
6610
|
-
], template: "<div *ngFor=\"let section of questionList\">\n <div *ngIf=\"\n !checkIfValueIsEmpty(section['questions']) &&\n section['showSection']\n \" class=\"p-3 mb-4\" id=\"personUwMedicalQuestions\">\n <h6 class=\"page-title bold-label\">\n {{ getTitleCase(section[\"sectionName\"]) }}\n </h6>\n <!--<lib-hr-line [field]=\"horizontalLineObj\" />-->\n <div *ngFor=\"let questions of section['questions']\" class=\"row\">\n <!-- <div *ngIf=\"questions['questionType'] === 'IMAGE TEXT'\">\n <img [src]=\"questions['sampleS3Link']\" class=\"d-block mx-auto\" [alt]=\"questions['title']\">\n <h3 [innerHTML]=\"questions['questionText']\"></h3>\n </div> -->\n\n <div [ngClass]=\"questions?.field?.cssClass\" *ngIf=\"\n questions['questionType'] === 'FREE TEXT' &&\n questions['cammundaQuestionCode'] !== 'QHT' &&\n questions['isShowQuestionInUI']\n \">\n <div class=\"col-12 px-0 my-1\">\n <lib-textbox [(ngModel)]=\"personUwAnswers[questions.questionId]\" [field]=\"questions['field']\"\n (blur)=\"validateField(questions.questionId, questions); removeSubQuestionValues(); handleQuestionChange()\" />\n <div class=\"error-message text-danger mt-1\" *ngIf=\"hasAnyFieldError(questions.questionId)\">\n {{ getFieldErrorMessage(questions.questionId, questions) }}\n </div>\n </div>\n </div>\n\n <div [ngClass]=\"questions?.field?.cssClass\" *ngIf=\"\n questions['questionType'] === 'HEIGHTINPUT' &&\n questions['cammundaQuestionCode'] === 'QHTF' &&\n questions['isShowQuestionInUI']\n \">\n <label class=\"card-topic d-block field-lable\">Height\n <span style=\"color: #ee0000\">*</span>\n </label>\n <div [class]=\" 'col-auto px-0 my-0 py-0 heightinput medicalQuestionsHeightInput'\"\n id=\"medicalQuestionsHeightInput\" (focusout)=\"validateField(questions.questionId, questions)\">\n <div class=\"row col-12 my-1\" *ngIf=\"personUwAnswers['medicalQuestionsHeightUnit'] === 'CM'\">\n <div class=\"col-7 py-0 heightInputs\">\n <lib-textbox [(ngModel)]=\"personUwAnswers['medicalQuestionsHeightInput']\"\n (blur)=\"validateField(questions.questionId, questions)\" (ngModelChange)=\"removeSubQuestionValues(); handleQuestionChange()\"\n [field]=\"medQuestionObj['QHT']['field']\" />\n </div>\n <div class=\"col-5\">\n <lib-select [(ngModel)]=\"personUwAnswers['medicalQuestionsHeightUnit']\"\n [field]=\"medQuestionObj['heightObjectTypes']\" (blur)=\"validateField(questions.questionId, questions)\"\n (ngModelChange)=\"validateField(questions.questionId, questions); checkAndUpdateHeightUnit()\" />\n </div>\n </div>\n <div class=\"row\" *ngIf=\"\n personUwAnswers[\n 'medicalQuestionsHeightUnit'\n ] === 'FEET'\n \">\n <div class=\"col-4 py-0 my-1\">\n <lib-select [(ngModel)]=\"personUwAnswers['medicalQuestionFeetInput']\"\n (blur)=\"validateField(questions.questionId, questions)\" (ngModelChange)=\"removeSubQuestionValues(); handleQuestionChange()\"\n [field]=\"medQuestionObj['QHTF']['field']\" />\n </div>\n <div class=\"col-4 py-0 my-1\">\n <lib-select [(ngModel)]=\"personUwAnswers['medicalQuestionsInchesInput']\"\n (blur)=\"validateField(questions.questionId, questions)\" (ngModelChange)=\"removeSubQuestionValues(); handleQuestionChange()\"\n [field]=\"medQuestionObj['QHTI']['field']\" />\n </div>\n <div class=\"col-4 py-0 my-1\">\n <lib-select [(ngModel)]=\"personUwAnswers['medicalQuestionsHeightUnit']\"\n [field]=\"medQuestionObj['heightObjectTypes']\" (blur)=\"validateField(questions.questionId, questions)\"\n (ngModelChange)=\"checkAndUpdateHeightUnit()\" />\n </div>\n </div>\n\n </div>\n <div class=\"error-message text-danger mt-1\" *ngIf=\"hasAnyFieldError(questions.questionId)\">\n {{ getFieldErrorMessage(questions.questionId, questions) }}\n </div>\n </div>\n <div class=\"row mt-0 pt-0\" *ngIf=\"\n questions['questionType'] === 'MAP' &&\n questions['isShowQuestionInUI']\n \">\n\n\n <div class=\"map-container\">\n <div class=\"address-search-container mb-3\">\n\n <div class=\"row mb-3\">\n <div class=\"col-6\">\n <label class=\"form-label card-topic\">Longitude</label>\n <input type=\"number\" class=\"form-control\" autocomplete=\"off\" [(ngModel)]=\"longitude\"\n placeholder=\"Enter longitude\" step=\"any\" readonly\n (blur)=\"validateField(questions.questionId, questions)\">\n </div>\n <div class=\"col-6\">\n <label class=\"form-label card-topic\">Latitude</label>\n <input type=\"number\" class=\"form-control\" autocomplete=\"off\" [(ngModel)]=\"latitude\"\n placeholder=\"Enter latitude\" step=\"any\" readonly\n (blur)=\"validateField(questions.questionId, questions)\">\n </div>\n </div>\n\n <input #addressInput type=\"text\" class=\"form-control\" placeholder=\"Search for address\"\n (keyup)=\"onAddressInputKeyup($event)\" (focus)=\"showDropdown = true\" (blur)=\"onInputBlur()\"\n autocomplete=\"off\">\n <div *ngIf=\"showDropdown && addressSuggestions.length > 0\"\n class=\"autocomplete-dropdown position-absolute w-100 mt-1\"\n style=\"z-index: 1000; max-height: 200px; overflow-y: auto; background: white; border: 1px solid #ccc; border-radius: 4px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);\">\n <div *ngFor=\"let suggestion of addressSuggestions; let i = index\" class=\"dropdown-item p-2\"\n style=\"cursor: pointer; border-bottom: 1px solid #eee;\" (mousedown)=\"selectAddress(suggestion)\"\n (mouseenter)=\"hoveredIndex = i\" [class.bg-light]=\"hoveredIndex === i\">\n <div class=\"fw-bold\">{{ suggestion.main_text }}</div>\n <small class=\"text-muted\">{{ suggestion.secondary_text }}</small>\n </div>\n </div>\n <small class=\"text-muted\">Start typing to search for addresses</small>\n </div>\n <google-map [center]=\"center\" [zoom]=\"zoom\">\n <map-marker [position]=\"currentCoordinates\"></map-marker>\n </google-map>\n </div>\n </div>\n\n\n <div [ngClass]=\"questions?.field?.cssClass\" *ngIf=\"\n (questions['questionType'] === 'RADIO BUTTON' ||\n questions['questionType'] === 'ADDMORE') &&\n questions['isShowQuestionInUI']\n \">\n <lib-radio [(ngModel)]=\"personUwAnswers[questions.questionId]\"\n (blur)=\"validateField(questions.questionId, questions)\"\n (ngModelChange)=\"validateField(questions.questionId, questions); removeSubQuestionValues(); handleQuestionChange()\"\n [field]=\"questions['field']\" />\n <div class=\"error-message text-danger mt-1\" *ngIf=\"hasAnyFieldError(questions.questionId)\">\n {{ getFieldErrorMessage(questions.questionId, questions) }}\n </div>\n </div>\n\n <div class=\"my-1\" [ngClass]=\"questions?.field?.cssClass\" *ngIf=\"\n questions['questionType'] === 'CHECKBOX' &&\n questions['isShowQuestionInUI']\n \">\n <lib-multiple-select [(ngModel)]=\"personUwAnswers[questions.questionId]\"\n (click)=\"validateField(questions.questionId, questions)\"\n (ngModelChange)=\"\n validateField(questions.questionId, questions);\n valueChangeForMultiselect(questions)\n \"\n [field]=\"questions['field']\"\n />\n <div class=\"error-message text-danger mt-1\" *ngIf=\"hasAnyFieldError(questions.questionId)\">\n {{ getFieldErrorMessage(questions.questionId, questions) }}\n </div>\n </div>\n\n <div class=\"my-1\" [ngClass]=\"questions?.field?.cssClass\" *ngIf=\"\n questions['questionType'] === 'DECLARATION' &&\n questions['isShowQuestionInUI']\n \">\n <lib-checkbox [(ngModel)]=\"personUwAnswers[questions.questionId]\"\n (blur)=\"validateField(questions.questionId, questions)\"\n (ngModelChange)=\"validateField(questions.questionId, questions); removeSubQuestionValues(); handleQuestionChange()\"\n [field]=\"questions['field']\" />\n <div class=\"error-message text-danger mt-1\" *ngIf=\"hasAnyFieldError(questions.questionId)\">\n {{ getFieldErrorMessage(questions.questionId, questions) }}\n </div>\n </div>\n\n <div class=\"my-1\" [ngClass]=\"questions?.field?.cssClass\" *ngIf=\"\n questions['questionType'] === 'DROPDOWN' &&\n questions['isShowQuestionInUI']\n \" (focusout)=\"validateField(questions.questionId, questions)\">\n {{questions['field'].isDisable}}\n <lib-select [(ngModel)]=\"personUwAnswers[questions.questionId]\" [field]=\"questions['field']\"\n (blur)=\"validateField(questions.questionId, questions)\"\n (ngModelChange)=\"validateField(questions.questionId, questions); removeSubQuestionValues(); handleQuestionChange()\" />\n <div class=\"error-message text-danger mt-1\" *ngIf=\"hasAnyFieldError(questions.questionId)\">\n {{ getFieldErrorMessage(questions.questionId, questions) }}\n </div>\n </div>\n\n <div class=\"my-1\" [ngClass]=\"questions?.field?.cssClass\" *ngIf=\"\n questions['questionType'] === 'CALENDAR' &&\n questions['isShowQuestionInUI']\n \">\n <lib-dob [(ngModel)]=\"personUwAnswers[questions.questionId]\" [field]=\"questions['field']\"\n (blur)=\"validateField(questions.questionId, questions)\" (ngModelChange)=\"removeSubQuestionValues(); handleQuestionChange()\" />\n <div class=\"error-message text-danger mt-1\" *ngIf=\"hasAnyFieldError(questions.questionId)\">\n {{ getFieldErrorMessage(questions.questionId, questions) }}\n </div>\n </div>\n\n <!-- <div\n class=\"\"\n *ngIf=\"\n questions['questionType'] === 'HEIGHTINPUT' &&\n questions['cammundaQuestionCode'] === 'QHTF' &&\n questions['isShowQuestionInUI']\n \"\n >\n </div> -->\n <div class=\"my-1\" [ngClass]=\"questions?.field?.cssClass\" *ngIf=\"\n questions['questionType'] === 'DOCUPLOAD' &&\n questions['isShowQuestionInUI']\n \">\n <lib-upload [field]=\"questions['field']\" (filePreview)=\"onDocumentFilePreview($event)\"\n (blur)=\"validateField(questions.questionId, questions);\" />\n <lib-file-preview *ngIf=\" previewFile\" [field]=\"questions['field']\" [file]=\"previewFile\"\n (closed)=\"closeFilePreview()\">\n </lib-file-preview>\n </div>\n\n\n <div [ngClass]=\"questions?.field?.cssClass\" *ngIf=\"\n questions['questionType'] === 'PASSPORT_UPLOAD' &&\n questions['isShowQuestionInUI']\n \">\n <!-- pending -->\n </div>\n </div>\n </div>\n</div>\n", styles: [".map-container{width:100%;position:relative}.address-search-container{position:relative}.address-search-container input{width:100%;padding:10px;border:1px solid #ddd;border-radius:4px;box-sizing:border-box}.address-search-container input:focus{outline:none;border-color:#4285f4;box-shadow:0 0 0 2px #4285f433}.pac-container{z-index:10000!important;border-radius:4px;border:1px solid #ddd;box-shadow:0 2px 6px #0000004d}.pac-item{padding:10px;border-bottom:1px solid #eee;cursor:pointer}.pac-item:hover{background-color:#f5f5f5}.selected-address{padding:8px;background-color:#f8f9fa;border-radius:4px;border-left:3px solid #28a745}.map-container ::ng-deep google-map>div{height:400px!important;width:auto!important}.medicalQues{font-size:12px;font-style:normal;font-weight:400;line-height:normal}.heightinput{border:2px solid #fb0;padding:10px;border-radius:4px;width:fit-content}.heightInputs{display:flex;align-items:center;gap:10px}.blink_me{animation:blinker 1s linear infinite}.invalid-field-one-ui{border:2px solid #dc3545!important;box-shadow:0 0 0 3px #dc354526!important}.invalid-field-one-ui:focus{border-color:#dc3545!important;box-shadow:0 0 0 3px #dc354540!important}@keyframes blinker{50%{opacity:0}}.error-message{font-size:12px;color:#dc3545;margin-top:4px;font-weight:400}.text-danger{color:#dc3545!important}\n"] }]
|
|
6610
|
+
], template: "<div *ngFor=\"let section of questionList\">\n <div *ngIf=\"\n !checkIfValueIsEmpty(section['questions']) &&\n section['showSection']\n \" class=\"p-3 mb-4\" id=\"personUwMedicalQuestions\">\n <h6 class=\"page-title bold-label\">\n {{ getTitleCase(section[\"sectionName\"]) }}\n </h6>\n <!--<lib-hr-line [field]=\"horizontalLineObj\" />-->\n <div *ngFor=\"let questions of section['questions']\" class=\"row\">\n <!-- <div *ngIf=\"questions['questionType'] === 'IMAGE TEXT'\">\n <img [src]=\"questions['sampleS3Link']\" class=\"d-block mx-auto\" [alt]=\"questions['title']\">\n <h3 [innerHTML]=\"questions['questionText']\"></h3>\n </div> -->\n\n <div [ngClass]=\"questions?.field?.cssClass\" *ngIf=\"\n questions['questionType'] === 'FREE TEXT' &&\n questions['cammundaQuestionCode'] !== 'QHT' &&\n questions['isShowQuestionInUI']\n \">\n <div class=\"col-12 px-0 my-1\">\n <lib-textbox [(ngModel)]=\"personUwAnswers[questions.questionId]\" [field]=\"questions['field']\"\n (blur)=\"validateField(questions.questionId, questions); removeSubQuestionValues(); handleQuestionChange()\" />\n <div class=\"error-message text-danger mt-1\" *ngIf=\"hasAnyFieldError(questions.questionId)\">\n {{ getFieldErrorMessage(questions.questionId, questions) }}\n </div>\n </div>\n </div>\n\n <div [ngClass]=\"questions?.field?.cssClass\" *ngIf=\"\n questions['questionType'] === 'HEIGHTINPUT' &&\n questions['cammundaQuestionCode'] === 'QHTF' &&\n questions['isShowQuestionInUI']\n \">\n <label class=\"card-topic d-block field-lable\">Height\n <span style=\"color: #ee0000\">*</span>\n </label>\n <div [class]=\" 'col-auto px-0 my-0 py-0 heightinput medicalQuestionsHeightInput'\"\n id=\"medicalQuestionsHeightInput\" (focusout)=\"validateField(questions.questionId, questions)\">\n <div class=\"row col-12 my-1\" *ngIf=\"personUwAnswers['medicalQuestionsHeightUnit'] === 'CM'\">\n <div class=\"col-7 py-0 heightInputs\">\n <lib-textbox [(ngModel)]=\"personUwAnswers['medicalQuestionsHeightInput']\"\n (blur)=\"validateField(questions.questionId, questions)\" (ngModelChange)=\"removeSubQuestionValues(); handleQuestionChange()\"\n [field]=\"medQuestionObj['QHT']['field']\" />\n </div>\n <div class=\"col-5\">\n <lib-select [(ngModel)]=\"personUwAnswers['medicalQuestionsHeightUnit']\"\n [field]=\"medQuestionObj['heightObjectTypes']\" (blur)=\"validateField(questions.questionId, questions)\"\n (ngModelChange)=\"validateField(questions.questionId, questions); checkAndUpdateHeightUnit()\" />\n </div>\n </div>\n <div class=\"row\" *ngIf=\"\n personUwAnswers[\n 'medicalQuestionsHeightUnit'\n ] === 'FEET'\n \">\n <div class=\"col-4 py-0 my-1\">\n <lib-select [(ngModel)]=\"personUwAnswers['medicalQuestionFeetInput']\"\n (blur)=\"validateField(questions.questionId, questions)\" (ngModelChange)=\"removeSubQuestionValues(); handleQuestionChange()\"\n [field]=\"medQuestionObj['QHTF']['field']\" />\n </div>\n <div class=\"col-4 py-0 my-1\">\n <lib-select [(ngModel)]=\"personUwAnswers['medicalQuestionsInchesInput']\"\n (blur)=\"validateField(questions.questionId, questions)\" (ngModelChange)=\"removeSubQuestionValues(); handleQuestionChange()\"\n [field]=\"medQuestionObj['QHTI']['field']\" />\n </div>\n <div class=\"col-4 py-0 my-1\">\n <lib-select [(ngModel)]=\"personUwAnswers['medicalQuestionsHeightUnit']\"\n [field]=\"medQuestionObj['heightObjectTypes']\" (blur)=\"validateField(questions.questionId, questions)\"\n (ngModelChange)=\"checkAndUpdateHeightUnit()\" />\n </div>\n </div>\n\n </div>\n <div class=\"error-message text-danger mt-1\" *ngIf=\"hasAnyFieldError(questions.questionId)\">\n {{ getFieldErrorMessage(questions.questionId, questions) }}\n </div>\n </div>\n <div class=\"row mt-0 pt-0\" *ngIf=\"\n questions['questionType'] === 'MAP' &&\n questions['isShowQuestionInUI']\n \">\n\n\n <div class=\"map-container\">\n <div class=\"address-search-container mb-3\">\n\n <div class=\"row mb-3\">\n <div class=\"col-6\">\n <label class=\"form-label card-topic\">Longitude</label>\n <input type=\"number\" class=\"form-control\" autocomplete=\"off\" [(ngModel)]=\"longitude\"\n placeholder=\"Enter longitude\" step=\"any\" readonly\n (blur)=\"validateField(questions.questionId, questions)\">\n </div>\n <div class=\"col-6\">\n <label class=\"form-label card-topic\">Latitude</label>\n <input type=\"number\" class=\"form-control\" autocomplete=\"off\" [(ngModel)]=\"latitude\"\n placeholder=\"Enter latitude\" step=\"any\" readonly\n (blur)=\"validateField(questions.questionId, questions)\">\n </div>\n </div>\n\n <input #addressInput type=\"text\" class=\"form-control\" placeholder=\"Search for address\"\n (keyup)=\"onAddressInputKeyup($event)\" (focus)=\"showDropdown = true\" (blur)=\"onInputBlur()\"\n autocomplete=\"off\">\n <div *ngIf=\"showDropdown && addressSuggestions.length > 0\"\n class=\"autocomplete-dropdown position-absolute w-100 mt-1\"\n style=\"z-index: 1000; max-height: 200px; overflow-y: auto; background: white; border: 1px solid #ccc; border-radius: 4px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);\">\n <div *ngFor=\"let suggestion of addressSuggestions; let i = index\" class=\"dropdown-item p-2\"\n style=\"cursor: pointer; border-bottom: 1px solid #eee;\" (mousedown)=\"selectAddress(suggestion)\"\n (mouseenter)=\"hoveredIndex = i\" [class.bg-light]=\"hoveredIndex === i\">\n <div class=\"fw-bold\">{{ suggestion.main_text }}</div>\n <small class=\"text-muted\">{{ suggestion.secondary_text }}</small>\n </div>\n </div>\n <small class=\"text-muted\">Start typing to search for addresses</small>\n </div>\n <google-map [center]=\"center\" [zoom]=\"zoom\">\n <map-marker [position]=\"currentCoordinates\"></map-marker>\n </google-map>\n </div>\n </div>\n\n\n <div [ngClass]=\"questions?.field?.cssClass\" *ngIf=\"\n (questions['questionType'] === 'RADIO BUTTON' ||\n questions['questionType'] === 'ADDMORE') &&\n questions['isShowQuestionInUI']\n \">\n <lib-radio [(ngModel)]=\"personUwAnswers[questions.questionId]\"\n (blur)=\"validateField(questions.questionId, questions)\"\n (ngModelChange)=\"validateField(questions.questionId, questions); removeSubQuestionValues(); handleQuestionChange()\"\n [field]=\"questions['field']\" />\n <div class=\"error-message text-danger mt-1\" *ngIf=\"hasAnyFieldError(questions.questionId)\">\n {{ getFieldErrorMessage(questions.questionId, questions) }}\n </div>\n </div>\n\n <div class=\"my-1\" [ngClass]=\"questions?.field?.cssClass\" *ngIf=\"\n questions['questionType'] === 'CHECKBOX' &&\n questions['isShowQuestionInUI']\n \">\n <lib-multiple-select [(ngModel)]=\"personUwAnswers[questions.questionId]\"\n (click)=\"validateField(questions.questionId, questions)\"\n (ngModelChange)=\"\n validateField(questions.questionId, questions);\n valueChangeForMultiselect(questions)\n \"\n [field]=\"questions['field']\"\n />\n <div class=\"error-message text-danger mt-1\" *ngIf=\"hasAnyFieldError(questions.questionId)\">\n {{ getFieldErrorMessage(questions.questionId, questions) }}\n </div>\n </div>\n\n <div class=\"my-1\" [ngClass]=\"questions?.field?.cssClass\" *ngIf=\"\n questions['questionType'] === 'DECLARATION' &&\n questions['isShowQuestionInUI']\n \">\n <lib-checkbox [(ngModel)]=\"personUwAnswers[questions.questionId]\"\n (blur)=\"validateField(questions.questionId, questions)\"\n (ngModelChange)=\"validateField(questions.questionId, questions); removeSubQuestionValues(); handleQuestionChange()\"\n [field]=\"questions['field']\" />\n <div class=\"error-message text-danger mt-1\" *ngIf=\"hasAnyFieldError(questions.questionId)\">\n {{ getFieldErrorMessage(questions.questionId, questions) }}\n </div>\n </div>\n\n <div class=\"my-1\" [ngClass]=\"questions?.field?.cssClass\" *ngIf=\"\n questions['questionType'] === 'DROPDOWN' &&\n questions['isShowQuestionInUI']\n \" (focusout)=\"validateField(questions.questionId, questions)\">\n {{questions['field'].isDisable}}\n <lib-select [(ngModel)]=\"personUwAnswers[questions.questionId]\" [field]=\"questions['field']\"\n (blur)=\"validateField(questions.questionId, questions)\"\n (ngModelChange)=\"validateField(questions.questionId, questions); removeSubQuestionValues(); handleQuestionChange()\" />\n <div class=\"error-message text-danger mt-1\" *ngIf=\"hasAnyFieldError(questions.questionId)\">\n {{ getFieldErrorMessage(questions.questionId, questions) }}\n </div>\n </div>\n\n <div class=\"my-1\" [ngClass]=\"questions?.field?.cssClass\" *ngIf=\"\n questions['questionType'] === 'CALENDAR' &&\n questions['isShowQuestionInUI']\n \">\n <lib-dob [(ngModel)]=\"personUwAnswers[questions.questionId]\" [field]=\"questions['field']\"\n (blur)=\"validateField(questions.questionId, questions)\" (ngModelChange)=\"removeSubQuestionValues(); handleQuestionChange()\" />\n <div class=\"error-message text-danger mt-1\" *ngIf=\"hasAnyFieldError(questions.questionId)\">\n {{ getFieldErrorMessage(questions.questionId, questions) }}\n </div>\n </div>\n\n <!-- <div\n class=\"\"\n *ngIf=\"\n questions['questionType'] === 'HEIGHTINPUT' &&\n questions['cammundaQuestionCode'] === 'QHTF' &&\n questions['isShowQuestionInUI']\n \"\n >\n </div> -->\n <div class=\"my-1\" [ngClass]=\"questions?.field?.cssClass\" *ngIf=\"\n questions['questionType'] === 'DOCUPLOAD' &&\n questions['isShowQuestionInUI']\n \">\n <lib-upload [field]=\"questions['field']\" (filePreview)=\"onDocumentFilePreview($event)\"\n (blur)=\"validateField(questions.questionId, questions);\" />\n <lib-file-preview *ngIf=\" previewFile\" [field]=\"questions['field']\" [file]=\"previewFile\"\n (closed)=\"closeFilePreview()\">\n </lib-file-preview>\n </div>\n\n\n <div [ngClass]=\"questions?.field?.cssClass\" *ngIf=\"\n questions['questionType'] === 'PASSPORT_UPLOAD' &&\n questions['isShowQuestionInUI']\n \">\n <!-- pending -->\n </div>\n </div>\n </div>\n</div>\n", styles: [".map-container{width:100%;position:relative}.address-search-container{position:relative}.address-search-container input{width:100%;padding:10px;border:1px solid #ddd;border-radius:4px;box-sizing:border-box}.address-search-container input:focus{outline:none;border-color:#4285f4;box-shadow:0 0 0 2px #4285f433}.pac-container{z-index:10000!important;border-radius:4px;border:1px solid #ddd;box-shadow:0 2px 6px #0000004d}.pac-item{padding:10px;border-bottom:1px solid #eee;cursor:pointer}.pac-item:hover{background-color:#f5f5f5}.selected-address{padding:8px;background-color:#f8f9fa;border-radius:4px;border-left:3px solid #28a745}.map-container ::ng-deep google-map>div{height:400px!important;width:auto!important}.medicalQues{font-size:12px;font-style:normal;font-weight:400;line-height:normal}.heightinput{border:2px solid #fb0;padding:10px;border-radius:4px;width:fit-content}.heightInputs{display:flex;align-items:center;gap:10px}.blink_me{animation:blinker 1s linear infinite}.invalid-field-one-ui{border:2px solid #dc3545!important;box-shadow:0 0 0 3px #dc354526!important}.invalid-field-one-ui:focus{border-color:#dc3545!important;box-shadow:0 0 0 3px #dc354540!important}@keyframes blinker{50%{opacity:0}}.error-message{font-size:12px;color:#dc3545;margin-top:4px;font-weight:400}.text-danger{color:#dc3545!important}.error-message:first-letter{text-transform:uppercase}\n"] }]
|
|
6611
6611
|
}], ctorParameters: () => [{ type: i0.NgZone }, { type: MasterService }], propDecorators: { questionsValueChange: [{
|
|
6612
6612
|
type: Output
|
|
6613
6613
|
}], triggerValidation: [{
|
|
@@ -8028,7 +8028,7 @@ class AnnuityPremiumCalculatorComponent {
|
|
|
8028
8028
|
"isShowCard": true,
|
|
8029
8029
|
"isShowRadioOption": true,
|
|
8030
8030
|
"subLabel": "Illustrative Returns if Nifty 50 grows at:",
|
|
8031
|
-
"infoMessage": "
|
|
8031
|
+
"infoMessage": ""
|
|
8032
8032
|
},
|
|
8033
8033
|
"metaDataObj": null,
|
|
8034
8034
|
"isShowLabel": true,
|
|
@@ -8086,7 +8086,7 @@ class AnnuityPremiumCalculatorComponent {
|
|
|
8086
8086
|
"label": "Horizontal Line",
|
|
8087
8087
|
"placeHolder": null,
|
|
8088
8088
|
"metaId": "ALL_COM_GEN_MCTRL_hrLine_hrLine_V1",
|
|
8089
|
-
"isVisible":
|
|
8089
|
+
"isVisible": false,
|
|
8090
8090
|
"isDisable": false,
|
|
8091
8091
|
"defaultValue": null,
|
|
8092
8092
|
"validators": {
|
|
@@ -8326,7 +8326,7 @@ class AnnuityPremiumCalculatorComponent {
|
|
|
8326
8326
|
};
|
|
8327
8327
|
if (!this.masterService.checkIfValueIsEmpty(this.annuityPremium['textValue']) && !this.masterService.checkIfValueIsEmpty(this.annuityPremium['selectValue'])) {
|
|
8328
8328
|
const freq = ` per ${this.annuityPremium['selectValue']}`;
|
|
8329
|
-
this.annuityPremiumObj.configData.numbertoword = this.transform(this.annuityPremium['textValue'])
|
|
8329
|
+
this.annuityPremiumObj.configData.numbertoword = this.transform(this.annuityPremium['textValue']);
|
|
8330
8330
|
}
|
|
8331
8331
|
if (Object.hasOwn(this.premiumDetails()?.Premium, 'isDisable')) {
|
|
8332
8332
|
this.annuityPremiumObj['isDisable'] = this.premiumDetails()?.Premium['isDisable'];
|
|
@@ -8346,7 +8346,7 @@ class AnnuityPremiumCalculatorComponent {
|
|
|
8346
8346
|
};
|
|
8347
8347
|
if (!this.masterService.checkIfValueIsEmpty(this.minumumAnnuityPayout['textValue']) && !this.masterService.checkIfValueIsEmpty(this.minumumAnnuityPayout['selectValue'])) {
|
|
8348
8348
|
const freq = ` per ${this.minumumAnnuityPayout['selectValue']}`;
|
|
8349
|
-
this.minimumAnnuityPayoutObj.configData.numbertoword = this.transform(this.minumumAnnuityPayout['textValue'])
|
|
8349
|
+
this.minimumAnnuityPayoutObj.configData.numbertoword = this.transform(this.minumumAnnuityPayout['textValue']);
|
|
8350
8350
|
}
|
|
8351
8351
|
if (Object.hasOwn(this.premiumDetails()?.annuity, 'isDisable')) {
|
|
8352
8352
|
this.minimumAnnuityPayoutObj['isDisable'] = this.premiumDetails()?.annuity['isDisable'];
|
|
@@ -8481,7 +8481,7 @@ class AnnuityPremiumCalculatorComponent {
|
|
|
8481
8481
|
//convert to words
|
|
8482
8482
|
if (!this.masterService.checkIfValueIsEmpty(this.annuityPremium['textValue']) && !this.masterService.checkIfValueIsEmpty(this.annuityPremium['selectValue'])) {
|
|
8483
8483
|
const freq = ` per ${this.annuityPremium['selectValue']}`;
|
|
8484
|
-
this.annuityPremiumObj.configData.numbertoword = this.transform(this.annuityPremium['textValue'])
|
|
8484
|
+
this.annuityPremiumObj.configData.numbertoword = this.transform(this.annuityPremium['textValue']);
|
|
8485
8485
|
}
|
|
8486
8486
|
else {
|
|
8487
8487
|
this.annuityPremiumObj.configData.numbertoword = '';
|
|
@@ -8492,7 +8492,7 @@ class AnnuityPremiumCalculatorComponent {
|
|
|
8492
8492
|
//convert to words
|
|
8493
8493
|
if (!this.masterService.checkIfValueIsEmpty(this.minumumAnnuityPayout['textValue']) && !this.masterService.checkIfValueIsEmpty(this.minumumAnnuityPayout['selectValue'])) {
|
|
8494
8494
|
const freq = ` per ${this.minumumAnnuityPayout['selectValue']}`;
|
|
8495
|
-
this.minimumAnnuityPayoutObj.configData.numbertoword = this.transform(this.minumumAnnuityPayout['textValue'])
|
|
8495
|
+
this.minimumAnnuityPayoutObj.configData.numbertoword = this.transform(this.minumumAnnuityPayout['textValue']);
|
|
8496
8496
|
}
|
|
8497
8497
|
else {
|
|
8498
8498
|
this.minimumAnnuityPayoutObj.configData.numbertoword = '';
|
|
@@ -8536,7 +8536,7 @@ class AnnuityPremiumCalculatorComponent {
|
|
|
8536
8536
|
return str ? str + ' Only' : '';
|
|
8537
8537
|
}
|
|
8538
8538
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AnnuityPremiumCalculatorComponent, deps: [{ token: MasterControlService }], target: i0.ɵɵFactoryTarget.Component });
|
|
8539
|
-
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\">@{{annuityTableCalculator.annuitycalculatorTable2val1}}</div>\n <div class=\"table-row\">@{{annuityTableCalculator.annuitycalculatorTable2val2}}</div>\n <div class=\"table-row\">@{{annuityTableCalculator.annuitycalculatorTable2val3}}</div>\n </div>\n </div>\n\n <!-- Table 3 -->\n <div class=\"annuity-calculator-table3\">\n <div class=\"table-header annuitytable1-header\">1st Variable Annuity Payout(B)</div>\n <div class=\"table-body\">\n <div class=\"table-row\"><span\n class=\"rupee-icon\">\u20B9</span>{{annuityTableCalculator.annuitycalculatorTable3val1}}</div>\n <div class=\"table-row\"><span\n class=\"rupee-icon\">\u20B9</span>{{annuityTableCalculator.annuitycalculatorTable3val2}}</div>\n <div class=\"table-row\"><span\n class=\"rupee-icon\">\u20B9</span>{{annuityTableCalculator.annuitycalculatorTable3val3}}</div>\n </div>\n </div>\n\n <div class=\"operator-symbol\">=</div>\n\n <!-- Table 4 -->\n <div class=\"annuity-calculator-table4\">\n <div class=\"table-header annuitytable4-header\">1st TotalPayout/Frequency(C)</div>\n <div class=\"table-body\">\n <div class=\"table-row annuitytable4-bg\"><span\n class=\"rupee-icon\">\u20B9</span>{{annuityTableCalculator.annuitycalculatorTable4val1}}</div>\n <div class=\"table-row annuitytable4-bg\"><span\n class=\"rupee-icon\">\u20B9</span>{{annuityTableCalculator.annuitycalculatorTable4val2}}</div>\n <div class=\"table-row annuitytable4-bg\"><span\n class=\"rupee-icon\">\u20B9</span>{{annuityTableCalculator.annuitycalculatorTable4val3}}</div>\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"annuity-calculator-paragraph\" *ngIf=\"annuityTableCalculator?.isVisible\">\n <span class=\"annuity-calculator-paragraph1\">This is an assumed growth percentage for the index basis which the\n values in columns B and C are calculated.</span> Actual growth will depend on index performance and may affect\n your variable annuity payout and total annuity payout.\n </div>\n\n <div *ngIf=\"growthRateObj.isVisible\">\n <lib-annuity-calculator-radio\n [field]=\"growthRateObj\"\n [preSelectConfig]=\"growthRatePreSelectConfig\"\n [(ngModel)]=\"growthRateOption\"\n (change)=\"onGrowthRateRadioChange($event)\"\n (growthRateChange)=\"onGrowthRateCardChange($event)\" />\n </div>\n\n <div *ngIf=\"hrLineObj.isVisible\" class=\"generateSummary\">\n <lib-hr-line [field]=\"hrLineObj\" />\n </div>\n\n <div *ngIf=\"generateSummaryObj.isVisible\" class=\"generateSummary\">\n <lib-button [field]=\"generateSummaryObj\" (click)=\"generateSummaryClicked()\" />\n </div>\n </div>\n", styles: [".card-main-title{font-size:16px;font-family:Mulish!important;letter-spacing:0px!important;font-weight:800;line-height:24px;padding-bottom:16px}.col-5-5{flex:0 0 auto;max-width:44.16666667%}.custom-grid-template{display:grid;grid-template-columns:4fr .5fr 4fr;align-items:end}.vertical-line{border-left:2px solid #ccc;height:100px;margin:0 10px}.error-message{font-size:12px;font-weight:500;color:#e00;letter-spacing:0px}.annuity-msg{padding:4px 6px;margin-top:8px;font-size:10px;font-weight:400;color:#444;background-color:#e5f0fa;height:fit-content}.annuity-msg-1{padding:4px 6px;margin-top:8px;font-size:10px;font-weight:400;color:#444;background-color:#e6f7f3;height:fit-content;flex-wrap:nowrap!important}.annuity-tables-main-container{border:2px solid rgba(221,221,221,1);border-radius:8px;display:flex}.annuity-tables-container{display:flex;align-items:stretch;gap:0;width:100%}.annuity-calculator-table1,.annuity-calculator-table2,.annuity-calculator-table3,.annuity-calculator-table4{display:flex;flex-direction:column;height:100%;flex:1;color:#444;font-weight:400;font-size:10px}.annuity-calculator-table1{border-right:1px solid rgba(221,221,221,1)}.annuity-calculator-table2{border-left:1px solid rgba(221,221,221,1);border-right:1px solid rgba(221,221,221,1)}.annuity-calculator-table3{border-right:1px solid rgba(221,221,221,1)}.annuity-calculator-table4{border-left:1px solid rgba(221,221,221,1)}.table-header{padding:12px;font-size:10px;font-weight:700;text-align:center;border-bottom:1px solid rgba(221,221,221,1);height:60px;display:flex;align-items:center;justify-content:center;word-wrap:break-word;word-break:break-word;hyphens:auto}.annuitytable1-header{background-color:#ececec;color:#444}.annuitytable4-header{background-color:#fb03;color:#444}.table-body{display:flex;flex-direction:column;flex:1}.table-cell{padding:12px;text-align:center;font-size:16px;font-weight:600;flex:1;display:flex;flex-direction:row;justify-content:center;align-items:center;gap:4px}.annuity-mat-hint{font-size:8px;text-align:start;font-weight:400;color:#444;letter-spacing:0px}.table-row{padding:12px;text-align:center;font-size:14px;font-weight:500;background-color:#fff;border-bottom:1px solid #999;flex:1;display:flex;align-items:center;justify-content:center}.table-row:last-child{border-bottom:none}.annuitytable4-bg{background-color:#e6f7f3!important;color:#444}.annuitytable-button{background-color:#ececec;border:none;border-radius:4px;padding:2px 8px;font-size:10px;font-weight:700;cursor:pointer;margin-top:0;width:auto;min-width:30%;max-width:90%;height:24px;display:block;margin-left:auto;margin-right:auto;position:relative;bottom:40px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.rupee-icon{font-weight:700;margin-right:2px;font-size:12px;color:#444}.operator-symbol{display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:700;padding:0 16px;color:#f90}.annuity-calculator-paragraph{padding:16px 8px 4px;font-size:10px;margin:0 0 20px auto;width:73%;font-weight:400;color:#444;background-color:#ebf1ff}.annuity-calculator-paragraph1{font-weight:700;font-size:10px}.minium-annuity{display:flex;flex-direction:column}@media (max-width: 991px) and (min-width: 768px){.table-header{padding:8px 4px;font-size:9px;line-height:1.1}}@media (max-width: 767px) and (min-width: 576px){.table-header{padding:10px 6px;font-size:9px}}@media (max-width: 575px){.table-header{padding:8px 4px;font-size:8px}}@media (max-width: 575px){.annuity-msg{font-size:10px;line-height:1;height:fit-content}}@media (max-width: 575px){.annuity-msg-1{font-size:10px;line-height:1;flex-wrap:nowrap!important;height:fit-content}.annuity-msg-1 .img{width:4px;height:4px}}@media (max-width: 991px) and (min-width: 768px){.annuity-msg,.annuity-msg-1{font-size:9px;line-height:1.1;height:fit-content}}@media (max-width: 767px) and (min-width: 576px){.annuity-msg,.annuity-msg-1{font-size:10px;line-height:1.1;height:fit-content}}.digit-boss-banner{background-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"] }] });
|
|
8539
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: AnnuityPremiumCalculatorComponent, isStandalone: true, selector: "lib-annuity-premium-calculator", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, triggerValidation: { classPropertyName: "triggerValidation", publicName: "triggerValidation", isSignal: false, isRequired: false, transformFunction: null }, premiumDetails: { classPropertyName: "premiumDetails", publicName: "premiumDetails", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onCalcualteButtonClick: "onCalcualteButtonClick", onGenerateSummaryClick: "onGenerateSummaryClick", onAnnuityPremiumChange: "onAnnuityPremiumChange", onMinimumPremiumValueChange: "onMinimumPremiumValueChange", onAutioDebitValueChange: "onAutioDebitValueChange", onGuranteedAnnuityValueChange: "onGuranteedAnnuityValueChange", onDigitBossSwitchToggle: "onDigitBossSwitchToggle", onGrowthRateOptionSelected: "onGrowthRateOptionSelected" }, viewQueries: [{ propertyName: "annuityRadioRef", first: true, predicate: AnnuityCalculatorRadioComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"card px-3\" style=\"padding: 16px;border: none !important;box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.12) !important;\">\n <div class=\"row\">\n <h4 class=\"card-main-title\"><span style=\"margin-right: 12px;\"><img\n src=\"https://cdn.godigit.com/retail-life/calculator.svg\" alt=\"annuity calculator\"></span>Here's Your Premium to Annuity Calculator</h4>\n </div>\n <!-- <div class=\"row\"> -->\n <div class=\"card pb-4 px-4\" style=\"border-bottom-left-radius: 0px; border-bottom-right-radius: 0px;\">\n <!-- <div class=\"custom-grid-template\">\n\n </div> -->\n\n <div class=\"row mx-auto\" style=\"transform: translate(0px, -58%);\">\n <lib-toggle class=\"col-auto\" [field]=\"annuityPremiumToggleObj\" />\n </div>\n <!-- </div> -->\n <div class=\" col-12\" style=\"\n justify-content: center;\n flex-direction: row;\n display: flex;\n\">\n <div class=\"d-flex flex-column p-0 gap-2\" style=\"width: 45%;\">\n <lib-amount-textbox [field]=\"annuityPremiumObj\" [(ngModel)]=\"annuityPremium['textValue']\"\n (ngModelChange)=\"onAnnuityPremiumValueChange($event)\" />\n <div class=\"error-message\" *ngIf=\"validations.ispremiumEntry\">\n Please enter Premium amount\n </div>\n <div class=\"annuity-mat-hint\" *ngIf=\"annuityPremiumObj?.configData?.numbertoword\">{{annuityPremiumObj?.configData?.numbertoword}}</div>\n\n <lib-select [field]=\"annuitypayoutObj\" [(ngModel)]=\"annuityPremium['selectValue']\"\n (ngModelChange)=\"onAnnuityPremiumValueChange($event)\" />\n <div>\n <lib-toggle [field]=\"enableAutoDebitObj\" [(ngModel)]=\"isEnableAutoDebit\"\n (ngModelChange)=\"onEnableAutoDebitValueChange($event)\" />\n </div>\n </div>\n <div class=\"d-flex justify-content-center align-items-center\"\n style=\"width: 10%; display: flex; align-items: flex-end; transform: translate(0px, 6px); position: relative; height: auto; min-height: 100%;\">\n <!-- Top line -->\n <div style=\"position: absolute; left: 50%; transform: translateX(-50%); width: 1px; height: calc(50% + 19px); top: -30px; background: rgba(221, 221, 221, 1); pointer-events: none;\"></div>\n <!-- Bottom line -->\n <div style=\"position: absolute; left: 50%; transform: translateX(-50%); width: 1px; height: calc(50% + 24px); bottom: -37px; background: rgba(221, 221, 221, 1); pointer-events: none;\"></div>\n <lib-icon-button [field]=\"interchangeButtonObj\" />\n </div>\n <div class=\"d-flex flex-column p-0 gap-2\" style=\"width: 45%;\">\n <lib-amount-textbox [field]=\"minimumAnnuityPayoutObj\" [(ngModel)]=\"minumumAnnuityPayout['textValue']\"\n (ngModelChange)=\"onMinPremiumValueChange($event)\" *ngIf=\"minimumAnnuityPayoutObj.isVisible;\"/>\n <div class=\"annuity-mat-hint\" *ngIf=\"minimumAnnuityPayoutObj.isVisible && minimumAnnuityPayoutObj?.configData?.numbertoword\">{{minimumAnnuityPayoutObj?.configData?.numbertoword}}</div>\n <lib-select [field]=\"minimumAnnuityPayoutfrequencyObj\" [(ngModel)]=\"minumumAnnuityPayout['selectValue']\"\n (ngModelChange)=\"onMinPremiumValueChange($event)\" />\n <div class=\"minium-annuity mt-3\" *ngIf=\"guranteedannuityObj['isVisible']\">\n <div class=\"annuity-msg w-100 px-2 py-1\">\n Value based on assumed 10% annual growth of Nifty 50 index.\n </div>\n <div class=\"w-100 px-2 py-1\">\n <lib-radio [field]=\"guranteedannuityObj\" [(ngModel)]=\"selectedGuranteedAnnuity\"\n (ngModelChange)=\"onGuranteedAnnuityChange($event)\" />\n </div>\n <div class=\"annuity-msg-1 d-flex align-items-center flex-nowrap w-100 px-2 py-1\">\n <img src=\"https://cdn.godigit.com/digitPlusAssets/streamline_graph-arrow-increase-remix.png\"\n style=\"max-width: 24px;\" />\n <span>Potential for higher returns by lowering the minimum guaranteed annuity rate.</span>\n </div>\n </div>\n\n </div>\n <!-- <ng-template #emptyRightCol>\n <div class=\"col-5 col-lg-5 p-0\"></div>\n </ng-template> -->\n </div>\n <!-- <div class=\"vertical-line\"></div> -->\n <!-- <div class=\"custom-grid-template\">\n <div>\n <lib-toggle [field]=\"enableAutoDebitObj\" [(ngModel)]=\"isEnableAutoDebit\"\n (ngModelChange)=\"onEnableAutoDebitValueChange($event)\" />\n </div>\n </div> -->\n\n </div>\n\n\n <div class=\"card py-3 mb-4 border-top-0\" style=\"border-top-left-radius: 0px; border-top-right-radius: 0px;\">\n <div class=\"mx-4\">\n <div class=\"digit-boss-banner\" *ngIf=\"digitBossSwitch?.isVisible\">\n <lib-toggle [field]=\"digitBossToggleConfig\" [(ngModel)]=\"this.digitBossSwitch.isSwitchOn\" (ngModelChange)=\"onDigitBossSwitchChange($event)\"></lib-toggle>\n <div class=\"digit-boss-text\">\n {{this.digitBossSwitch?.prefixText}}\n <span class=\"highlight\">{{this.digitBossSwitch?.highlightText}}</span>\n {{this.digitBossSwitch?.subText}}\n <span class=\"arrow-icon\"><img src=\"https://cdn.godigit.com/digitPlusAssets/streamline_graph-arrow-increase-remix.svg\"/></span>\n </div>\n </div>\n <lib-button [field]=\"recalculateButton\" (click)=\"calculateButtonClicked()\" />\n\n <!-- //digit boss updated design -->\n <div class=\"col-12 mt-3\" style=\"\n justify-content: center;\n flex-direction: row;\n display: flex;\" *ngIf=\"!minimumAnnuityPayoutObj.isVisible\">\n <div class=\"col-12 col-lg-12 d-flex flex-column justify-content-center padding-left-0 padding-right-0\">\n <div class=\"realistic-picture-card\">\n <div class=\"realistic-picture-header\">\n <img *ngIf=\"digitBossSwitch?.icon\" [src]=\"digitBossSwitch?.icon\" style=\"width:12px;height:12px;object-fit:contain;flex-shrink:0;\" />\n <span class=\"realistic-picture-label\">Realistic Picture:</span>\n </div>\n <span class=\"realistic-picture-text\">{{digitBossSwitch?.digitBossText}} <span class=\"realistic-picture-highlight\">{{digitBossSwitch?.digitBossValue}}</span></span>\n </div>\n </div>\n</div>\n\n <div class=\"card mb-0 mt-2\"\n style=\"align-items: center;border:none;font-size: 8px;font-weight: 400;color:rgba(68, 68, 68, 1) \"\n >\n <div class=\"mx-4\" *ngIf=\"recalculateSubTextObj?.isVisible\"><img src=\"https://cdn.godigit.com/digitPlusAssets/Group+1010106336.png\"\n style=\"margin-left: 3px;\" />\n <span style=\"margin-left: 6px;\">Every time you make a change above, please click recalculate.</span>\n </div>\n </div>\n </div>\n <div\n style=\"display: flex;align-items: center;justify-content: center;border:none;font-size: 10px;font-weight: 700;height:32px;background-color: rgba(255, 250, 235, 1);gap: 8px;margin: 4px;\"\n *ngIf=\"annuityTableCalculator?.isVisible\">\n <img src=\"https://cdn.godigit.com/retail-life/calculator.svg\" />\n Minimum Guaranteed Payout(A) + Variable Payout(B) = Total Payout(C)\n </div>\n <!-- annuity calculator table -->\n <div class=\"annuity-tables-main-container\" *ngIf=\"annuityTableCalculator?.isVisible\">\n <div class=\"d-flex flex-row annuity-tables-container\">\n <!-- Table 1 -->\n <div class=\"annuity-calculator-table1\">\n <div class=\"table-header annuitytable1-header\">Minimum Guaranteed Annuity Payout(A)</div>\n <div class=\"table-body\">\n <div class=\"table-cell\"><span class=\"rupee-icon\">\u20B9</span><span\n style=\"font-size:12px; color: rgba(68, 68, 68, 1);\">\n <{{annuityTableCalculator.annuitycalculatorTable1val1}}>\n </span></div>\n <button class=\"annuitytable-button\">{{annuityTableCalculator.annuitycalculatorTable1val2}}</button>\n </div>\n </div>\n\n <div class=\"operator-symbol\">+</div>\n\n <!-- Table 2 -->\n <div class=\"annuity-calculator-table2\">\n <div class=\"table-header annuitytable1-header\">Assume growth of BenchMark index</div>\n <div class=\"table-body\">\n <div class=\"table-row\">@{{annuityTableCalculator.annuitycalculatorTable2val1}}</div>\n <div class=\"table-row\">@{{annuityTableCalculator.annuitycalculatorTable2val2}}</div>\n <div class=\"table-row\">@{{annuityTableCalculator.annuitycalculatorTable2val3}}</div>\n </div>\n </div>\n\n <!-- Table 3 -->\n <div class=\"annuity-calculator-table3\">\n <div class=\"table-header annuitytable1-header\">1st Variable Annuity Payout(B)</div>\n <div class=\"table-body\">\n <div class=\"table-row\"><span\n class=\"rupee-icon\">\u20B9</span>{{annuityTableCalculator.annuitycalculatorTable3val1}}</div>\n <div class=\"table-row\"><span\n class=\"rupee-icon\">\u20B9</span>{{annuityTableCalculator.annuitycalculatorTable3val2}}</div>\n <div class=\"table-row\"><span\n class=\"rupee-icon\">\u20B9</span>{{annuityTableCalculator.annuitycalculatorTable3val3}}</div>\n </div>\n </div>\n\n <div class=\"operator-symbol\">=</div>\n\n <!-- Table 4 -->\n <div class=\"annuity-calculator-table4\">\n <div class=\"table-header annuitytable4-header\">1st TotalPayout/Frequency(C)</div>\n <div class=\"table-body\">\n <div class=\"table-row annuitytable4-bg\"><span\n class=\"rupee-icon\">\u20B9</span>{{annuityTableCalculator.annuitycalculatorTable4val1}}</div>\n <div class=\"table-row annuitytable4-bg\"><span\n class=\"rupee-icon\">\u20B9</span>{{annuityTableCalculator.annuitycalculatorTable4val2}}</div>\n <div class=\"table-row annuitytable4-bg\"><span\n class=\"rupee-icon\">\u20B9</span>{{annuityTableCalculator.annuitycalculatorTable4val3}}</div>\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"annuity-calculator-paragraph\" *ngIf=\"annuityTableCalculator?.isVisible\">\n <span class=\"annuity-calculator-paragraph1\">This is an assumed growth percentage for the index basis which the\n values in columns B and C are calculated.</span> Actual growth will depend on index performance and may affect\n your variable annuity payout and total annuity payout.\n </div>\n\n <div *ngIf=\"growthRateObj.isVisible\">\n <lib-annuity-calculator-radio\n [field]=\"growthRateObj\"\n [preSelectConfig]=\"growthRatePreSelectConfig\"\n [(ngModel)]=\"growthRateOption\"\n (change)=\"onGrowthRateRadioChange($event)\"\n (growthRateChange)=\"onGrowthRateCardChange($event)\" />\n </div>\n\n <div *ngIf=\"hrLineObj.isVisible\" class=\"generateSummary\">\n <lib-hr-line [field]=\"hrLineObj\" />\n </div>\n\n <div *ngIf=\"generateSummaryObj.isVisible\" class=\"generateSummary\">\n <lib-button [field]=\"generateSummaryObj\" (click)=\"generateSummaryClicked()\" />\n </div>\n </div>\n", styles: [".card-main-title{font-size:16px;font-family:Mulish!important;letter-spacing:0px!important;font-weight:800;line-height:24px;padding-bottom:16px}.col-5-5{flex:0 0 auto;max-width:44.16666667%}.custom-grid-template{display:grid;grid-template-columns:4fr .5fr 4fr;align-items:end}.vertical-line{border-left:2px solid #ccc;height:100px;margin:0 10px}.error-message{font-size:12px;font-weight:500;color:#e00;letter-spacing:0px}.annuity-msg{padding:4px 6px;margin-top:8px;font-size:10px;font-weight:400;color:#444;background-color:#e5f0fa;height:fit-content}.annuity-msg-1{padding:4px 6px;margin-top:8px;font-size:10px;font-weight:400;color:#444;background-color:#e6f7f3;height:fit-content;flex-wrap:nowrap!important}.annuity-tables-main-container{border:2px solid rgba(221,221,221,1);border-radius:8px;display:flex}.annuity-tables-container{display:flex;align-items:stretch;gap:0;width:100%}.annuity-calculator-table1,.annuity-calculator-table2,.annuity-calculator-table3,.annuity-calculator-table4{display:flex;flex-direction:column;height:100%;flex:1;color:#444;font-weight:400;font-size:10px}.annuity-calculator-table1{border-right:1px solid rgba(221,221,221,1)}.annuity-calculator-table2{border-left:1px solid rgba(221,221,221,1);border-right:1px solid rgba(221,221,221,1)}.annuity-calculator-table3{border-right:1px solid rgba(221,221,221,1)}.annuity-calculator-table4{border-left:1px solid rgba(221,221,221,1)}.table-header{padding:12px;font-size:10px;font-weight:700;text-align:center;border-bottom:1px solid rgba(221,221,221,1);height:60px;display:flex;align-items:center;justify-content:center;word-wrap:break-word;word-break:break-word;hyphens:auto}.annuitytable1-header{background-color:#ececec;color:#444}.annuitytable4-header{background-color:#fb03;color:#444}.table-body{display:flex;flex-direction:column;flex:1}.table-cell{padding:12px;text-align:center;font-size:16px;font-weight:600;flex:1;display:flex;flex-direction:row;justify-content:center;align-items:center;gap:4px}.annuity-mat-hint{font-size:8px;text-align:start;font-weight:400;color:#444;letter-spacing:0px}.table-row{padding:12px;text-align:center;font-size:14px;font-weight:500;background-color:#fff;border-bottom:1px solid #999;flex:1;display:flex;align-items:center;justify-content:center}.table-row:last-child{border-bottom:none}.annuitytable4-bg{background-color:#e6f7f3!important;color:#444}.annuitytable-button{background-color:#ececec;border:none;border-radius:4px;padding:2px 8px;font-size:10px;font-weight:700;cursor:pointer;margin-top:0;width:auto;min-width:30%;max-width:90%;height:24px;display:block;margin-left:auto;margin-right:auto;position:relative;bottom:40px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.rupee-icon{font-weight:700;margin-right:2px;font-size:12px;color:#444}.operator-symbol{display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:700;padding:0 16px;color:#f90}.annuity-calculator-paragraph{padding:16px 8px 4px;font-size:10px;margin:0 0 20px auto;width:73%;font-weight:400;color:#444;background-color:#ebf1ff}.annuity-calculator-paragraph1{font-weight:700;font-size:10px}.minium-annuity{display:flex;flex-direction:column}@media (max-width: 991px) and (min-width: 768px){.table-header{padding:8px 4px;font-size:9px;line-height:1.1}}@media (max-width: 767px) and (min-width: 576px){.table-header{padding:10px 6px;font-size:9px}}@media (max-width: 575px){.table-header{padding:8px 4px;font-size:8px}}@media (max-width: 575px){.annuity-msg{font-size:10px;line-height:1;height:fit-content}}@media (max-width: 575px){.annuity-msg-1{font-size:10px;line-height:1;flex-wrap:nowrap!important;height:fit-content}.annuity-msg-1 .img{width:4px;height:4px}}@media (max-width: 991px) and (min-width: 768px){.annuity-msg,.annuity-msg-1{font-size:9px;line-height:1.1;height:fit-content}}@media (max-width: 767px) and (min-width: 576px){.annuity-msg,.annuity-msg-1{font-size:10px;line-height:1.1;height:fit-content}}.digit-boss-banner{background:linear-gradient(to right,#222,#444);color:#fff;display:flex;align-items:center;padding:8px 16px;border-radius:4px;margin-bottom:16px;gap:8px;font-size:12px;min-height:16px;opacity:1;transform:rotate(0)}.digit-boss-banner ::ng-deep .toggle-background{margin-top:0!important;padding:0!important;background-color:transparent!important;border:none!important}.digit-boss-banner ::ng-deep .toggle_switch{margin-top:0!important;gap:0!important}.digit-boss-text{display:flex;align-items:center;gap:4px;white-space:nowrap}.highlight{color:#fb0;font-weight:700}.arrow-icon{color:#fb0;margin-left:4px;font-size:14px}.generateSummary{margin-right:.4rem;margin-left:.4rem}.realistic-picture-card{display:flex;flex-direction:row;align-items:center;flex-wrap:wrap;gap:4px;background-color:#cce0f5;border-radius:4px;padding:4px 6px;font-size:8px;color:#06c;line-height:1.5;box-sizing:border-box}.realistic-picture-header{display:flex;align-items:center;gap:4px}.realistic-picture-content{display:flex;flex-direction:column;gap:2px}.realistic-picture-label{font-weight:700;font-size:8px;line-height:8px;color:#06c}.realistic-picture-text{font-weight:600;font-size:10px;line-height:14px;color:#222}.realistic-picture-highlight{font-weight:800;font-size:10px;line-height:14px;color:#0048ad}.toggle-text{margin-top:-5px!important}\n"], dependencies: [{ kind: "component", type: SelectComponent, selector: "lib-select", inputs: ["field", "reactiveFormControlobject"], outputs: ["selectionChange", "infoClick"] }, { kind: "component", type: AmountTextboxComponent, selector: "lib-amount-textbox", inputs: ["field", "reactiveFormControlobject"], outputs: ["blur"] }, { kind: "component", type: AnnuityCalculatorRadioComponent, selector: "lib-annuity-calculator-radio", inputs: ["preSelectConfig", "reactiveFormControlobject", "field"], outputs: ["change", "growthRateChange"] }, { kind: "component", type: HrLineComponent, selector: "lib-hr-line", inputs: ["field"] }, { kind: "component", type: ToggleComponent, selector: "lib-toggle", inputs: ["field", "reactiveFormControlobject"], outputs: ["change"] }, { kind: "component", type: ButtonComponent, selector: "lib-button", inputs: ["field"] }, { kind: "component", type: IconButtonComponent, selector: "lib-icon-button", inputs: ["field"] }, { kind: "component", type: RadioComponent, selector: "lib-radio", inputs: ["reactiveFormControlobject", "field"], outputs: ["change"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
|
|
8540
8540
|
}
|
|
8541
8541
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AnnuityPremiumCalculatorComponent, decorators: [{
|
|
8542
8542
|
type: Component,
|
|
@@ -8553,7 +8553,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
8553
8553
|
RadioComponent,
|
|
8554
8554
|
CommonModule,
|
|
8555
8555
|
FormsModule
|
|
8556
|
-
], 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\">@{{annuityTableCalculator.annuitycalculatorTable2val1}}</div>\n <div class=\"table-row\">@{{annuityTableCalculator.annuitycalculatorTable2val2}}</div>\n <div class=\"table-row\">@{{annuityTableCalculator.annuitycalculatorTable2val3}}</div>\n </div>\n </div>\n\n <!-- Table 3 -->\n <div class=\"annuity-calculator-table3\">\n <div class=\"table-header annuitytable1-header\">1st Variable Annuity Payout(B)</div>\n <div class=\"table-body\">\n <div class=\"table-row\"><span\n class=\"rupee-icon\">\u20B9</span>{{annuityTableCalculator.annuitycalculatorTable3val1}}</div>\n <div class=\"table-row\"><span\n class=\"rupee-icon\">\u20B9</span>{{annuityTableCalculator.annuitycalculatorTable3val2}}</div>\n <div class=\"table-row\"><span\n class=\"rupee-icon\">\u20B9</span>{{annuityTableCalculator.annuitycalculatorTable3val3}}</div>\n </div>\n </div>\n\n <div class=\"operator-symbol\">=</div>\n\n <!-- Table 4 -->\n <div class=\"annuity-calculator-table4\">\n <div class=\"table-header annuitytable4-header\">1st TotalPayout/Frequency(C)</div>\n <div class=\"table-body\">\n <div class=\"table-row annuitytable4-bg\"><span\n class=\"rupee-icon\">\u20B9</span>{{annuityTableCalculator.annuitycalculatorTable4val1}}</div>\n <div class=\"table-row annuitytable4-bg\"><span\n class=\"rupee-icon\">\u20B9</span>{{annuityTableCalculator.annuitycalculatorTable4val2}}</div>\n <div class=\"table-row annuitytable4-bg\"><span\n class=\"rupee-icon\">\u20B9</span>{{annuityTableCalculator.annuitycalculatorTable4val3}}</div>\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"annuity-calculator-paragraph\" *ngIf=\"annuityTableCalculator?.isVisible\">\n <span class=\"annuity-calculator-paragraph1\">This is an assumed growth percentage for the index basis which the\n values in columns B and C are calculated.</span> Actual growth will depend on index performance and may affect\n your variable annuity payout and total annuity payout.\n </div>\n\n <div *ngIf=\"growthRateObj.isVisible\">\n <lib-annuity-calculator-radio\n [field]=\"growthRateObj\"\n [preSelectConfig]=\"growthRatePreSelectConfig\"\n [(ngModel)]=\"growthRateOption\"\n (change)=\"onGrowthRateRadioChange($event)\"\n (growthRateChange)=\"onGrowthRateCardChange($event)\" />\n </div>\n\n <div *ngIf=\"hrLineObj.isVisible\" class=\"generateSummary\">\n <lib-hr-line [field]=\"hrLineObj\" />\n </div>\n\n <div *ngIf=\"generateSummaryObj.isVisible\" class=\"generateSummary\">\n <lib-button [field]=\"generateSummaryObj\" (click)=\"generateSummaryClicked()\" />\n </div>\n </div>\n", styles: [".card-main-title{font-size:16px;font-family:Mulish!important;letter-spacing:0px!important;font-weight:800;line-height:24px;padding-bottom:16px}.col-5-5{flex:0 0 auto;max-width:44.16666667%}.custom-grid-template{display:grid;grid-template-columns:4fr .5fr 4fr;align-items:end}.vertical-line{border-left:2px solid #ccc;height:100px;margin:0 10px}.error-message{font-size:12px;font-weight:500;color:#e00;letter-spacing:0px}.annuity-msg{padding:4px 6px;margin-top:8px;font-size:10px;font-weight:400;color:#444;background-color:#e5f0fa;height:fit-content}.annuity-msg-1{padding:4px 6px;margin-top:8px;font-size:10px;font-weight:400;color:#444;background-color:#e6f7f3;height:fit-content;flex-wrap:nowrap!important}.annuity-tables-main-container{border:2px solid rgba(221,221,221,1);border-radius:8px;display:flex}.annuity-tables-container{display:flex;align-items:stretch;gap:0;width:100%}.annuity-calculator-table1,.annuity-calculator-table2,.annuity-calculator-table3,.annuity-calculator-table4{display:flex;flex-direction:column;height:100%;flex:1;color:#444;font-weight:400;font-size:10px}.annuity-calculator-table1{border-right:1px solid rgba(221,221,221,1)}.annuity-calculator-table2{border-left:1px solid rgba(221,221,221,1);border-right:1px solid rgba(221,221,221,1)}.annuity-calculator-table3{border-right:1px solid rgba(221,221,221,1)}.annuity-calculator-table4{border-left:1px solid rgba(221,221,221,1)}.table-header{padding:12px;font-size:10px;font-weight:700;text-align:center;border-bottom:1px solid rgba(221,221,221,1);height:60px;display:flex;align-items:center;justify-content:center;word-wrap:break-word;word-break:break-word;hyphens:auto}.annuitytable1-header{background-color:#ececec;color:#444}.annuitytable4-header{background-color:#fb03;color:#444}.table-body{display:flex;flex-direction:column;flex:1}.table-cell{padding:12px;text-align:center;font-size:16px;font-weight:600;flex:1;display:flex;flex-direction:row;justify-content:center;align-items:center;gap:4px}.annuity-mat-hint{font-size:8px;text-align:start;font-weight:400;color:#444;letter-spacing:0px}.table-row{padding:12px;text-align:center;font-size:14px;font-weight:500;background-color:#fff;border-bottom:1px solid #999;flex:1;display:flex;align-items:center;justify-content:center}.table-row:last-child{border-bottom:none}.annuitytable4-bg{background-color:#e6f7f3!important;color:#444}.annuitytable-button{background-color:#ececec;border:none;border-radius:4px;padding:2px 8px;font-size:10px;font-weight:700;cursor:pointer;margin-top:0;width:auto;min-width:30%;max-width:90%;height:24px;display:block;margin-left:auto;margin-right:auto;position:relative;bottom:40px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.rupee-icon{font-weight:700;margin-right:2px;font-size:12px;color:#444}.operator-symbol{display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:700;padding:0 16px;color:#f90}.annuity-calculator-paragraph{padding:16px 8px 4px;font-size:10px;margin:0 0 20px auto;width:73%;font-weight:400;color:#444;background-color:#ebf1ff}.annuity-calculator-paragraph1{font-weight:700;font-size:10px}.minium-annuity{display:flex;flex-direction:column}@media (max-width: 991px) and (min-width: 768px){.table-header{padding:8px 4px;font-size:9px;line-height:1.1}}@media (max-width: 767px) and (min-width: 576px){.table-header{padding:10px 6px;font-size:9px}}@media (max-width: 575px){.table-header{padding:8px 4px;font-size:8px}}@media (max-width: 575px){.annuity-msg{font-size:10px;line-height:1;height:fit-content}}@media (max-width: 575px){.annuity-msg-1{font-size:10px;line-height:1;flex-wrap:nowrap!important;height:fit-content}.annuity-msg-1 .img{width:4px;height:4px}}@media (max-width: 991px) and (min-width: 768px){.annuity-msg,.annuity-msg-1{font-size:9px;line-height:1.1;height:fit-content}}@media (max-width: 767px) and (min-width: 576px){.annuity-msg,.annuity-msg-1{font-size:10px;line-height:1.1;height:fit-content}}.digit-boss-banner{background-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"] }]
|
|
8556
|
+
], template: "<div class=\"card px-3\" style=\"padding: 16px;border: none !important;box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.12) !important;\">\n <div class=\"row\">\n <h4 class=\"card-main-title\"><span style=\"margin-right: 12px;\"><img\n src=\"https://cdn.godigit.com/retail-life/calculator.svg\" alt=\"annuity calculator\"></span>Here's Your Premium to Annuity Calculator</h4>\n </div>\n <!-- <div class=\"row\"> -->\n <div class=\"card pb-4 px-4\" style=\"border-bottom-left-radius: 0px; border-bottom-right-radius: 0px;\">\n <!-- <div class=\"custom-grid-template\">\n\n </div> -->\n\n <div class=\"row mx-auto\" style=\"transform: translate(0px, -58%);\">\n <lib-toggle class=\"col-auto\" [field]=\"annuityPremiumToggleObj\" />\n </div>\n <!-- </div> -->\n <div class=\" col-12\" style=\"\n justify-content: center;\n flex-direction: row;\n display: flex;\n\">\n <div class=\"d-flex flex-column p-0 gap-2\" style=\"width: 45%;\">\n <lib-amount-textbox [field]=\"annuityPremiumObj\" [(ngModel)]=\"annuityPremium['textValue']\"\n (ngModelChange)=\"onAnnuityPremiumValueChange($event)\" />\n <div class=\"error-message\" *ngIf=\"validations.ispremiumEntry\">\n Please enter Premium amount\n </div>\n <div class=\"annuity-mat-hint\" *ngIf=\"annuityPremiumObj?.configData?.numbertoword\">{{annuityPremiumObj?.configData?.numbertoword}}</div>\n\n <lib-select [field]=\"annuitypayoutObj\" [(ngModel)]=\"annuityPremium['selectValue']\"\n (ngModelChange)=\"onAnnuityPremiumValueChange($event)\" />\n <div>\n <lib-toggle [field]=\"enableAutoDebitObj\" [(ngModel)]=\"isEnableAutoDebit\"\n (ngModelChange)=\"onEnableAutoDebitValueChange($event)\" />\n </div>\n </div>\n <div class=\"d-flex justify-content-center align-items-center\"\n style=\"width: 10%; display: flex; align-items: flex-end; transform: translate(0px, 6px); position: relative; height: auto; min-height: 100%;\">\n <!-- Top line -->\n <div style=\"position: absolute; left: 50%; transform: translateX(-50%); width: 1px; height: calc(50% + 19px); top: -30px; background: rgba(221, 221, 221, 1); pointer-events: none;\"></div>\n <!-- Bottom line -->\n <div style=\"position: absolute; left: 50%; transform: translateX(-50%); width: 1px; height: calc(50% + 24px); bottom: -37px; background: rgba(221, 221, 221, 1); pointer-events: none;\"></div>\n <lib-icon-button [field]=\"interchangeButtonObj\" />\n </div>\n <div class=\"d-flex flex-column p-0 gap-2\" style=\"width: 45%;\">\n <lib-amount-textbox [field]=\"minimumAnnuityPayoutObj\" [(ngModel)]=\"minumumAnnuityPayout['textValue']\"\n (ngModelChange)=\"onMinPremiumValueChange($event)\" *ngIf=\"minimumAnnuityPayoutObj.isVisible;\"/>\n <div class=\"annuity-mat-hint\" *ngIf=\"minimumAnnuityPayoutObj.isVisible && minimumAnnuityPayoutObj?.configData?.numbertoword\">{{minimumAnnuityPayoutObj?.configData?.numbertoword}}</div>\n <lib-select [field]=\"minimumAnnuityPayoutfrequencyObj\" [(ngModel)]=\"minumumAnnuityPayout['selectValue']\"\n (ngModelChange)=\"onMinPremiumValueChange($event)\" />\n <div class=\"minium-annuity mt-3\" *ngIf=\"guranteedannuityObj['isVisible']\">\n <div class=\"annuity-msg w-100 px-2 py-1\">\n Value based on assumed 10% annual growth of Nifty 50 index.\n </div>\n <div class=\"w-100 px-2 py-1\">\n <lib-radio [field]=\"guranteedannuityObj\" [(ngModel)]=\"selectedGuranteedAnnuity\"\n (ngModelChange)=\"onGuranteedAnnuityChange($event)\" />\n </div>\n <div class=\"annuity-msg-1 d-flex align-items-center flex-nowrap w-100 px-2 py-1\">\n <img src=\"https://cdn.godigit.com/digitPlusAssets/streamline_graph-arrow-increase-remix.png\"\n style=\"max-width: 24px;\" />\n <span>Potential for higher returns by lowering the minimum guaranteed annuity rate.</span>\n </div>\n </div>\n\n </div>\n <!-- <ng-template #emptyRightCol>\n <div class=\"col-5 col-lg-5 p-0\"></div>\n </ng-template> -->\n </div>\n <!-- <div class=\"vertical-line\"></div> -->\n <!-- <div class=\"custom-grid-template\">\n <div>\n <lib-toggle [field]=\"enableAutoDebitObj\" [(ngModel)]=\"isEnableAutoDebit\"\n (ngModelChange)=\"onEnableAutoDebitValueChange($event)\" />\n </div>\n </div> -->\n\n </div>\n\n\n <div class=\"card py-3 mb-4 border-top-0\" style=\"border-top-left-radius: 0px; border-top-right-radius: 0px;\">\n <div class=\"mx-4\">\n <div class=\"digit-boss-banner\" *ngIf=\"digitBossSwitch?.isVisible\">\n <lib-toggle [field]=\"digitBossToggleConfig\" [(ngModel)]=\"this.digitBossSwitch.isSwitchOn\" (ngModelChange)=\"onDigitBossSwitchChange($event)\"></lib-toggle>\n <div class=\"digit-boss-text\">\n {{this.digitBossSwitch?.prefixText}}\n <span class=\"highlight\">{{this.digitBossSwitch?.highlightText}}</span>\n {{this.digitBossSwitch?.subText}}\n <span class=\"arrow-icon\"><img src=\"https://cdn.godigit.com/digitPlusAssets/streamline_graph-arrow-increase-remix.svg\"/></span>\n </div>\n </div>\n <lib-button [field]=\"recalculateButton\" (click)=\"calculateButtonClicked()\" />\n\n <!-- //digit boss updated design -->\n <div class=\"col-12 mt-3\" style=\"\n justify-content: center;\n flex-direction: row;\n display: flex;\" *ngIf=\"!minimumAnnuityPayoutObj.isVisible\">\n <div class=\"col-12 col-lg-12 d-flex flex-column justify-content-center padding-left-0 padding-right-0\">\n <div class=\"realistic-picture-card\">\n <div class=\"realistic-picture-header\">\n <img *ngIf=\"digitBossSwitch?.icon\" [src]=\"digitBossSwitch?.icon\" style=\"width:12px;height:12px;object-fit:contain;flex-shrink:0;\" />\n <span class=\"realistic-picture-label\">Realistic Picture:</span>\n </div>\n <span class=\"realistic-picture-text\">{{digitBossSwitch?.digitBossText}} <span class=\"realistic-picture-highlight\">{{digitBossSwitch?.digitBossValue}}</span></span>\n </div>\n </div>\n</div>\n\n <div class=\"card mb-0 mt-2\"\n style=\"align-items: center;border:none;font-size: 8px;font-weight: 400;color:rgba(68, 68, 68, 1) \"\n >\n <div class=\"mx-4\" *ngIf=\"recalculateSubTextObj?.isVisible\"><img src=\"https://cdn.godigit.com/digitPlusAssets/Group+1010106336.png\"\n style=\"margin-left: 3px;\" />\n <span style=\"margin-left: 6px;\">Every time you make a change above, please click recalculate.</span>\n </div>\n </div>\n </div>\n <div\n style=\"display: flex;align-items: center;justify-content: center;border:none;font-size: 10px;font-weight: 700;height:32px;background-color: rgba(255, 250, 235, 1);gap: 8px;margin: 4px;\"\n *ngIf=\"annuityTableCalculator?.isVisible\">\n <img src=\"https://cdn.godigit.com/retail-life/calculator.svg\" />\n Minimum Guaranteed Payout(A) + Variable Payout(B) = Total Payout(C)\n </div>\n <!-- annuity calculator table -->\n <div class=\"annuity-tables-main-container\" *ngIf=\"annuityTableCalculator?.isVisible\">\n <div class=\"d-flex flex-row annuity-tables-container\">\n <!-- Table 1 -->\n <div class=\"annuity-calculator-table1\">\n <div class=\"table-header annuitytable1-header\">Minimum Guaranteed Annuity Payout(A)</div>\n <div class=\"table-body\">\n <div class=\"table-cell\"><span class=\"rupee-icon\">\u20B9</span><span\n style=\"font-size:12px; color: rgba(68, 68, 68, 1);\">\n <{{annuityTableCalculator.annuitycalculatorTable1val1}}>\n </span></div>\n <button class=\"annuitytable-button\">{{annuityTableCalculator.annuitycalculatorTable1val2}}</button>\n </div>\n </div>\n\n <div class=\"operator-symbol\">+</div>\n\n <!-- Table 2 -->\n <div class=\"annuity-calculator-table2\">\n <div class=\"table-header annuitytable1-header\">Assume growth of BenchMark index</div>\n <div class=\"table-body\">\n <div class=\"table-row\">@{{annuityTableCalculator.annuitycalculatorTable2val1}}</div>\n <div class=\"table-row\">@{{annuityTableCalculator.annuitycalculatorTable2val2}}</div>\n <div class=\"table-row\">@{{annuityTableCalculator.annuitycalculatorTable2val3}}</div>\n </div>\n </div>\n\n <!-- Table 3 -->\n <div class=\"annuity-calculator-table3\">\n <div class=\"table-header annuitytable1-header\">1st Variable Annuity Payout(B)</div>\n <div class=\"table-body\">\n <div class=\"table-row\"><span\n class=\"rupee-icon\">\u20B9</span>{{annuityTableCalculator.annuitycalculatorTable3val1}}</div>\n <div class=\"table-row\"><span\n class=\"rupee-icon\">\u20B9</span>{{annuityTableCalculator.annuitycalculatorTable3val2}}</div>\n <div class=\"table-row\"><span\n class=\"rupee-icon\">\u20B9</span>{{annuityTableCalculator.annuitycalculatorTable3val3}}</div>\n </div>\n </div>\n\n <div class=\"operator-symbol\">=</div>\n\n <!-- Table 4 -->\n <div class=\"annuity-calculator-table4\">\n <div class=\"table-header annuitytable4-header\">1st TotalPayout/Frequency(C)</div>\n <div class=\"table-body\">\n <div class=\"table-row annuitytable4-bg\"><span\n class=\"rupee-icon\">\u20B9</span>{{annuityTableCalculator.annuitycalculatorTable4val1}}</div>\n <div class=\"table-row annuitytable4-bg\"><span\n class=\"rupee-icon\">\u20B9</span>{{annuityTableCalculator.annuitycalculatorTable4val2}}</div>\n <div class=\"table-row annuitytable4-bg\"><span\n class=\"rupee-icon\">\u20B9</span>{{annuityTableCalculator.annuitycalculatorTable4val3}}</div>\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"annuity-calculator-paragraph\" *ngIf=\"annuityTableCalculator?.isVisible\">\n <span class=\"annuity-calculator-paragraph1\">This is an assumed growth percentage for the index basis which the\n values in columns B and C are calculated.</span> Actual growth will depend on index performance and may affect\n your variable annuity payout and total annuity payout.\n </div>\n\n <div *ngIf=\"growthRateObj.isVisible\">\n <lib-annuity-calculator-radio\n [field]=\"growthRateObj\"\n [preSelectConfig]=\"growthRatePreSelectConfig\"\n [(ngModel)]=\"growthRateOption\"\n (change)=\"onGrowthRateRadioChange($event)\"\n (growthRateChange)=\"onGrowthRateCardChange($event)\" />\n </div>\n\n <div *ngIf=\"hrLineObj.isVisible\" class=\"generateSummary\">\n <lib-hr-line [field]=\"hrLineObj\" />\n </div>\n\n <div *ngIf=\"generateSummaryObj.isVisible\" class=\"generateSummary\">\n <lib-button [field]=\"generateSummaryObj\" (click)=\"generateSummaryClicked()\" />\n </div>\n </div>\n", styles: [".card-main-title{font-size:16px;font-family:Mulish!important;letter-spacing:0px!important;font-weight:800;line-height:24px;padding-bottom:16px}.col-5-5{flex:0 0 auto;max-width:44.16666667%}.custom-grid-template{display:grid;grid-template-columns:4fr .5fr 4fr;align-items:end}.vertical-line{border-left:2px solid #ccc;height:100px;margin:0 10px}.error-message{font-size:12px;font-weight:500;color:#e00;letter-spacing:0px}.annuity-msg{padding:4px 6px;margin-top:8px;font-size:10px;font-weight:400;color:#444;background-color:#e5f0fa;height:fit-content}.annuity-msg-1{padding:4px 6px;margin-top:8px;font-size:10px;font-weight:400;color:#444;background-color:#e6f7f3;height:fit-content;flex-wrap:nowrap!important}.annuity-tables-main-container{border:2px solid rgba(221,221,221,1);border-radius:8px;display:flex}.annuity-tables-container{display:flex;align-items:stretch;gap:0;width:100%}.annuity-calculator-table1,.annuity-calculator-table2,.annuity-calculator-table3,.annuity-calculator-table4{display:flex;flex-direction:column;height:100%;flex:1;color:#444;font-weight:400;font-size:10px}.annuity-calculator-table1{border-right:1px solid rgba(221,221,221,1)}.annuity-calculator-table2{border-left:1px solid rgba(221,221,221,1);border-right:1px solid rgba(221,221,221,1)}.annuity-calculator-table3{border-right:1px solid rgba(221,221,221,1)}.annuity-calculator-table4{border-left:1px solid rgba(221,221,221,1)}.table-header{padding:12px;font-size:10px;font-weight:700;text-align:center;border-bottom:1px solid rgba(221,221,221,1);height:60px;display:flex;align-items:center;justify-content:center;word-wrap:break-word;word-break:break-word;hyphens:auto}.annuitytable1-header{background-color:#ececec;color:#444}.annuitytable4-header{background-color:#fb03;color:#444}.table-body{display:flex;flex-direction:column;flex:1}.table-cell{padding:12px;text-align:center;font-size:16px;font-weight:600;flex:1;display:flex;flex-direction:row;justify-content:center;align-items:center;gap:4px}.annuity-mat-hint{font-size:8px;text-align:start;font-weight:400;color:#444;letter-spacing:0px}.table-row{padding:12px;text-align:center;font-size:14px;font-weight:500;background-color:#fff;border-bottom:1px solid #999;flex:1;display:flex;align-items:center;justify-content:center}.table-row:last-child{border-bottom:none}.annuitytable4-bg{background-color:#e6f7f3!important;color:#444}.annuitytable-button{background-color:#ececec;border:none;border-radius:4px;padding:2px 8px;font-size:10px;font-weight:700;cursor:pointer;margin-top:0;width:auto;min-width:30%;max-width:90%;height:24px;display:block;margin-left:auto;margin-right:auto;position:relative;bottom:40px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.rupee-icon{font-weight:700;margin-right:2px;font-size:12px;color:#444}.operator-symbol{display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:700;padding:0 16px;color:#f90}.annuity-calculator-paragraph{padding:16px 8px 4px;font-size:10px;margin:0 0 20px auto;width:73%;font-weight:400;color:#444;background-color:#ebf1ff}.annuity-calculator-paragraph1{font-weight:700;font-size:10px}.minium-annuity{display:flex;flex-direction:column}@media (max-width: 991px) and (min-width: 768px){.table-header{padding:8px 4px;font-size:9px;line-height:1.1}}@media (max-width: 767px) and (min-width: 576px){.table-header{padding:10px 6px;font-size:9px}}@media (max-width: 575px){.table-header{padding:8px 4px;font-size:8px}}@media (max-width: 575px){.annuity-msg{font-size:10px;line-height:1;height:fit-content}}@media (max-width: 575px){.annuity-msg-1{font-size:10px;line-height:1;flex-wrap:nowrap!important;height:fit-content}.annuity-msg-1 .img{width:4px;height:4px}}@media (max-width: 991px) and (min-width: 768px){.annuity-msg,.annuity-msg-1{font-size:9px;line-height:1.1;height:fit-content}}@media (max-width: 767px) and (min-width: 576px){.annuity-msg,.annuity-msg-1{font-size:10px;line-height:1.1;height:fit-content}}.digit-boss-banner{background:linear-gradient(to right,#222,#444);color:#fff;display:flex;align-items:center;padding:8px 16px;border-radius:4px;margin-bottom:16px;gap:8px;font-size:12px;min-height:16px;opacity:1;transform:rotate(0)}.digit-boss-banner ::ng-deep .toggle-background{margin-top:0!important;padding:0!important;background-color:transparent!important;border:none!important}.digit-boss-banner ::ng-deep .toggle_switch{margin-top:0!important;gap:0!important}.digit-boss-text{display:flex;align-items:center;gap:4px;white-space:nowrap}.highlight{color:#fb0;font-weight:700}.arrow-icon{color:#fb0;margin-left:4px;font-size:14px}.generateSummary{margin-right:.4rem;margin-left:.4rem}.realistic-picture-card{display:flex;flex-direction:row;align-items:center;flex-wrap:wrap;gap:4px;background-color:#cce0f5;border-radius:4px;padding:4px 6px;font-size:8px;color:#06c;line-height:1.5;box-sizing:border-box}.realistic-picture-header{display:flex;align-items:center;gap:4px}.realistic-picture-content{display:flex;flex-direction:column;gap:2px}.realistic-picture-label{font-weight:700;font-size:8px;line-height:8px;color:#06c}.realistic-picture-text{font-weight:600;font-size:10px;line-height:14px;color:#222}.realistic-picture-highlight{font-weight:800;font-size:10px;line-height:14px;color:#0048ad}.toggle-text{margin-top:-5px!important}\n"] }]
|
|
8557
8557
|
}], ctorParameters: () => [{ type: MasterControlService }], propDecorators: { triggerValidation: [{
|
|
8558
8558
|
type: Input
|
|
8559
8559
|
}], annuityRadioRef: [{
|