master-control 0.4.45 → 0.4.47
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/master-control.component.mjs +2 -2
- package/esm2022/lib/medial-questions/medial-questions.component.mjs +117 -7
- package/esm2022/lib/multiple-select/multiple-select.component.mjs +3 -3
- package/esm2022/lib/radio/radio.component.mjs +3 -3
- package/esm2022/lib/textbox/textbox.component.mjs +3 -3
- package/fesm2022/master-control.mjs +122 -12
- package/fesm2022/master-control.mjs.map +1 -1
- package/lib/medial-questions/medial-questions.component.d.ts +6 -2
- package/master-control-0.4.47.tgz +0 -0
- package/package.json +1 -1
- package/master-control-0.4.45.tgz +0 -0
|
@@ -401,7 +401,7 @@ class TextboxComponent {
|
|
|
401
401
|
useExisting: TextboxComponent,
|
|
402
402
|
multi: true
|
|
403
403
|
}
|
|
404
|
-
], ngImport: i0, template: "<label\n class=\"field-lable\"\n *ngIf=\"field() && field()?.isVisible && field().isShowLabel\"\n >{{ field()?.label\n }}<span style=\"color: red\" *ngIf=\"field() && field()?.validators?.isRequired\"\n >*</span\n ></label\n>\n<mat-form-field\n class=\"w-100\"\n appearance=\"outline\"\n *ngIf=\"field() && field()?.isVisible\"\n [ngStyle]=\"{\n'--custom-border-color': field()?.controlStyle?.borderColor ,\n'--custom-border-width': field()?.controlStyle?.borderWidth ,\n'--custom-border-radius': field()?.controlStyle?.borderRadius ,\n'--custom-bg-color': field()?.controlStyle?.background ,\n'--custom-border-color-focus': field()?.controlStyle?.focusBorderColor ,\n'--custom-border-width-focus': field()?.controlStyle?.focusBorderWidth ,\n'--custom-bg-color-focus': field()?.controlStyle?.focusBackground ,\n'--custom-border-color-hover': field()?.controlStyle?.hoverBorderColor ,\n'--custom-border-width-hover': field()?.controlStyle?.hoverBorderWidth ,\n'--custom-border-color-error': field()?.controlStyle?.errorBorderColor ,\n'--custom-border-width-error': field()?.controlStyle?.errorBorderWidth ,\n'--custom-font-size': field()?.controlStyle?.fontSize ,\n'--custom-font-weight': field()?.controlStyle?.fontWeight ,\n'--custom-font-family': field()?.controlStyle?.fontFamily ,\n'--custom-font-color': field()?.controlStyle?.color ,\n'--custom-caret-color': field()?.controlStyle?.caretColor ,\n'--custom-font-color-disabled' : field()?.controlStyle?.disableColor ,\n'--custom-bg-color-disabled' : field()?.controlStyle?.disableBackground ,\n'--custom-width': field()?.controlStyle?.width ,\n}\"\n>\n @if(reactiveFormControlobject()) {\n <input\n matInput\n autocomplete=\"off\"\n [type]=\"field()?.controlType\"\n [name]=\"field()?.fieldName\"\n [
|
|
404
|
+
], ngImport: i0, template: "<label\n class=\"field-lable\"\n *ngIf=\"field() && field()?.isVisible && field().isShowLabel\"\n >{{ field()?.label\n }}<span style=\"color: red\" *ngIf=\"field() && field()?.validators?.isRequired\"\n >*</span\n ></label\n>\n<mat-form-field\n class=\"w-100\"\n appearance=\"outline\"\n [id]=\"field()?.fieldName\"\n *ngIf=\"field() && field()?.isVisible\"\n [ngStyle]=\"{\n'--custom-border-color': field()?.controlStyle?.borderColor ,\n'--custom-border-width': field()?.controlStyle?.borderWidth ,\n'--custom-border-radius': field()?.controlStyle?.borderRadius ,\n'--custom-bg-color': field()?.controlStyle?.background ,\n'--custom-border-color-focus': field()?.controlStyle?.focusBorderColor ,\n'--custom-border-width-focus': field()?.controlStyle?.focusBorderWidth ,\n'--custom-bg-color-focus': field()?.controlStyle?.focusBackground ,\n'--custom-border-color-hover': field()?.controlStyle?.hoverBorderColor ,\n'--custom-border-width-hover': field()?.controlStyle?.hoverBorderWidth ,\n'--custom-border-color-error': field()?.controlStyle?.errorBorderColor ,\n'--custom-border-width-error': field()?.controlStyle?.errorBorderWidth ,\n'--custom-font-size': field()?.controlStyle?.fontSize ,\n'--custom-font-weight': field()?.controlStyle?.fontWeight ,\n'--custom-font-family': field()?.controlStyle?.fontFamily ,\n'--custom-font-color': field()?.controlStyle?.color ,\n'--custom-caret-color': field()?.controlStyle?.caretColor ,\n'--custom-font-color-disabled' : field()?.controlStyle?.disableColor ,\n'--custom-bg-color-disabled' : field()?.controlStyle?.disableBackground ,\n'--custom-width': field()?.controlStyle?.width ,\n}\"\n>\n @if(reactiveFormControlobject()) {\n <input\n matInput\n autocomplete=\"off\"\n [type]=\"field()?.controlType\"\n [name]=\"field()?.fieldName\"\n [placeholder]=\"field()?.placeHolder\"\n [maxLength]=\"field()?.validators?.maxLength\"\n [minLength]=\"field()?.validators?.minLength\"\n [disabled]=\"field()?.isDisable\"\n [required]=\"field()?.validators?.isRequired\"\n [pattern]=\"field()?.validators?.pattern\"\n (input)=\"onInputChange($event)\"\n (blur)=\"onInputBlur($event)\"\n [value]=\"inputValue\"\n [formControl]=\"reactiveFormControlobject()\"\n />\n }@else {\n <input\n matInput\n autocomplete=\"off\"\n [type]=\"field()?.controlType\"\n [name]=\"field()?.fieldName\"\n [placeholder]=\"field()?.placeHolder\"\n [maxLength]=\"field()?.validators?.maxLength\"\n [minLength]=\"field()?.validators?.minLength\"\n [disabled]=\"field()?.isDisable\"\n [required]=\"field()?.validators?.isRequired\"\n [pattern]=\"field()?.validators?.pattern\"\n (input)=\"onInputChange($event)\"\n (blur)=\"onInputBlur($event)\"\n [value]=\"inputValue\"\n />\n }\n <mat-hint *ngIf=\"field()?.configData?.helperText\">{{field()?.configData?.helperText}}</mat-hint>\n\n <mat-error *ngIf=\"false\">\n {{ field()?.validators?.isRequiredMessage }}\n </mat-error>\n <!-- <mat-error *ngIf=\"field()?.configData?.isInvalidPattern && !masterService.checkIfValueIsEmpty(field()?.validators?.patternMessage)\">\n {{ field()?.validators?.patternMessage }}\n </mat-error> -->\n</mat-form-field>\n<div class=\"error-message\" *ngIf=\"false\">\n {{ field()?.validators?.isRequiredMessage }}.\n</div>\n<div class=\"error-message\" *ngIf=\"false\">\n {{ field()?.validators?.patternMessage }}.\n</div>\n", styles: [".field-lable{font-size:12px!important;font-weight:700!important;color:#444!important;margin-bottom:5px}.error-message{color:red}*{font-family:mulish!important}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mat-mdc-notch-piece{border-color:var(--custom-border-color-focus, #ffbb00)!important;border-width:var(--custom-border-width-focus, 1.5px)!important}::ng-deep .mat-mdc-form-field{background-color:var(--custom-bg-color, #ffffff)!important;border-radius:var(--custom-border-radius , 4px)!important}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__leading{border-color:var(--custom-border-color-hover, #ffbb00)!important;border-width:var(--custom-border-width-hover, 1.5px)!important}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__notch{border-color:var(--custom-border-color-hover, #ffbb00)!important;border-width:var(--custom-border-width-hover, 1.5px)!important}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__trailing{border-color:var(--custom-border-color-hover, #ffbb00)!important;border-width:var(--custom-border-width-hover, 1.5px)!important}::ng-deep .mdc-text-field--outlined .mat-mdc-notch-piece{border-color:var(--custom-border-color, #dddddd)!important;border-width:var(--custom-border-width, 1.5px)!important}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-text-field__input{caret-color:var(--custom-caret-color, #ffbb00)!important;font-size:12px!important;font-weight:var(--custom-font-weight, 400)!important;font-family:var(--custom-font-family, \"Mulish\")!important;color:var(--custom-font-color, #444444)!important}::ng-deep .mat-form-field-invalid .mdc-text-field--outlined .mat-mdc-notch-piece{border-color:var(--custom-border-color-error, red)!important;border-width:var(--custom-border-width-error, 1.5px)!important}::ng-deep .mat-mdc-form-field.mat-form-field-disabled{background:var(--custom-bg-color-disabled, #ECECEC)!important}::ng-deep .mdc-text-field--outlined.mdc-text-field--disabled .mdc-text-field__input{color:var(--custom-font-color-disabled, #999999)!important}::ng-deep .mdc-label{color:var(--custom-font-color, #444)!important;font-size:var(--custom-font-size, 16px)!important;font-weight:var(--custom-font-weight, 400)!important;font-family:var(--custom-font-family, \"Mulish\")!important}::placeholder{color:#8f8f8f!important;font-size:12px!important}::ng-deep .mat-mdc-form-field-hint-wrapper{padding:0!important}::ng-deep .mat-mdc-form-field-error-wrapper{padding:0!important}::ng-deep .mat-mdc-form-field-error{color:#e00!important;font-size:12px;font-weight:500;font-family:Mulish!important;letter-spacing:0}::ng-deep .mdc-text-field--outlined{--mdc-outlined-text-field-container-shape: var(--custom-border-radius , 4px) !important}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--invalid .mat-mdc-notch-piece{border-color:var(--custom-border-color-error, red)!important;border-width:var(--custom-border-width-error, 1.5px)!important}::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none!important}::ng-deep .mdc-text-field--outlined.mdc-text-field--disabled .mdc-text-field__input{font-size:14px!important}\n"], dependencies: [{ kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatFormFieldModule }, { 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.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
|
|
405
405
|
}
|
|
406
406
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TextboxComponent, decorators: [{
|
|
407
407
|
type: Component,
|
|
@@ -416,7 +416,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
416
416
|
useExisting: TextboxComponent,
|
|
417
417
|
multi: true
|
|
418
418
|
}
|
|
419
|
-
], template: "<label\n class=\"field-lable\"\n *ngIf=\"field() && field()?.isVisible && field().isShowLabel\"\n >{{ field()?.label\n }}<span style=\"color: red\" *ngIf=\"field() && field()?.validators?.isRequired\"\n >*</span\n ></label\n>\n<mat-form-field\n class=\"w-100\"\n appearance=\"outline\"\n *ngIf=\"field() && field()?.isVisible\"\n [ngStyle]=\"{\n'--custom-border-color': field()?.controlStyle?.borderColor ,\n'--custom-border-width': field()?.controlStyle?.borderWidth ,\n'--custom-border-radius': field()?.controlStyle?.borderRadius ,\n'--custom-bg-color': field()?.controlStyle?.background ,\n'--custom-border-color-focus': field()?.controlStyle?.focusBorderColor ,\n'--custom-border-width-focus': field()?.controlStyle?.focusBorderWidth ,\n'--custom-bg-color-focus': field()?.controlStyle?.focusBackground ,\n'--custom-border-color-hover': field()?.controlStyle?.hoverBorderColor ,\n'--custom-border-width-hover': field()?.controlStyle?.hoverBorderWidth ,\n'--custom-border-color-error': field()?.controlStyle?.errorBorderColor ,\n'--custom-border-width-error': field()?.controlStyle?.errorBorderWidth ,\n'--custom-font-size': field()?.controlStyle?.fontSize ,\n'--custom-font-weight': field()?.controlStyle?.fontWeight ,\n'--custom-font-family': field()?.controlStyle?.fontFamily ,\n'--custom-font-color': field()?.controlStyle?.color ,\n'--custom-caret-color': field()?.controlStyle?.caretColor ,\n'--custom-font-color-disabled' : field()?.controlStyle?.disableColor ,\n'--custom-bg-color-disabled' : field()?.controlStyle?.disableBackground ,\n'--custom-width': field()?.controlStyle?.width ,\n}\"\n>\n @if(reactiveFormControlobject()) {\n <input\n matInput\n autocomplete=\"off\"\n [type]=\"field()?.controlType\"\n [name]=\"field()?.fieldName\"\n [
|
|
419
|
+
], template: "<label\n class=\"field-lable\"\n *ngIf=\"field() && field()?.isVisible && field().isShowLabel\"\n >{{ field()?.label\n }}<span style=\"color: red\" *ngIf=\"field() && field()?.validators?.isRequired\"\n >*</span\n ></label\n>\n<mat-form-field\n class=\"w-100\"\n appearance=\"outline\"\n [id]=\"field()?.fieldName\"\n *ngIf=\"field() && field()?.isVisible\"\n [ngStyle]=\"{\n'--custom-border-color': field()?.controlStyle?.borderColor ,\n'--custom-border-width': field()?.controlStyle?.borderWidth ,\n'--custom-border-radius': field()?.controlStyle?.borderRadius ,\n'--custom-bg-color': field()?.controlStyle?.background ,\n'--custom-border-color-focus': field()?.controlStyle?.focusBorderColor ,\n'--custom-border-width-focus': field()?.controlStyle?.focusBorderWidth ,\n'--custom-bg-color-focus': field()?.controlStyle?.focusBackground ,\n'--custom-border-color-hover': field()?.controlStyle?.hoverBorderColor ,\n'--custom-border-width-hover': field()?.controlStyle?.hoverBorderWidth ,\n'--custom-border-color-error': field()?.controlStyle?.errorBorderColor ,\n'--custom-border-width-error': field()?.controlStyle?.errorBorderWidth ,\n'--custom-font-size': field()?.controlStyle?.fontSize ,\n'--custom-font-weight': field()?.controlStyle?.fontWeight ,\n'--custom-font-family': field()?.controlStyle?.fontFamily ,\n'--custom-font-color': field()?.controlStyle?.color ,\n'--custom-caret-color': field()?.controlStyle?.caretColor ,\n'--custom-font-color-disabled' : field()?.controlStyle?.disableColor ,\n'--custom-bg-color-disabled' : field()?.controlStyle?.disableBackground ,\n'--custom-width': field()?.controlStyle?.width ,\n}\"\n>\n @if(reactiveFormControlobject()) {\n <input\n matInput\n autocomplete=\"off\"\n [type]=\"field()?.controlType\"\n [name]=\"field()?.fieldName\"\n [placeholder]=\"field()?.placeHolder\"\n [maxLength]=\"field()?.validators?.maxLength\"\n [minLength]=\"field()?.validators?.minLength\"\n [disabled]=\"field()?.isDisable\"\n [required]=\"field()?.validators?.isRequired\"\n [pattern]=\"field()?.validators?.pattern\"\n (input)=\"onInputChange($event)\"\n (blur)=\"onInputBlur($event)\"\n [value]=\"inputValue\"\n [formControl]=\"reactiveFormControlobject()\"\n />\n }@else {\n <input\n matInput\n autocomplete=\"off\"\n [type]=\"field()?.controlType\"\n [name]=\"field()?.fieldName\"\n [placeholder]=\"field()?.placeHolder\"\n [maxLength]=\"field()?.validators?.maxLength\"\n [minLength]=\"field()?.validators?.minLength\"\n [disabled]=\"field()?.isDisable\"\n [required]=\"field()?.validators?.isRequired\"\n [pattern]=\"field()?.validators?.pattern\"\n (input)=\"onInputChange($event)\"\n (blur)=\"onInputBlur($event)\"\n [value]=\"inputValue\"\n />\n }\n <mat-hint *ngIf=\"field()?.configData?.helperText\">{{field()?.configData?.helperText}}</mat-hint>\n\n <mat-error *ngIf=\"false\">\n {{ field()?.validators?.isRequiredMessage }}\n </mat-error>\n <!-- <mat-error *ngIf=\"field()?.configData?.isInvalidPattern && !masterService.checkIfValueIsEmpty(field()?.validators?.patternMessage)\">\n {{ field()?.validators?.patternMessage }}\n </mat-error> -->\n</mat-form-field>\n<div class=\"error-message\" *ngIf=\"false\">\n {{ field()?.validators?.isRequiredMessage }}.\n</div>\n<div class=\"error-message\" *ngIf=\"false\">\n {{ field()?.validators?.patternMessage }}.\n</div>\n", styles: [".field-lable{font-size:12px!important;font-weight:700!important;color:#444!important;margin-bottom:5px}.error-message{color:red}*{font-family:mulish!important}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mat-mdc-notch-piece{border-color:var(--custom-border-color-focus, #ffbb00)!important;border-width:var(--custom-border-width-focus, 1.5px)!important}::ng-deep .mat-mdc-form-field{background-color:var(--custom-bg-color, #ffffff)!important;border-radius:var(--custom-border-radius , 4px)!important}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__leading{border-color:var(--custom-border-color-hover, #ffbb00)!important;border-width:var(--custom-border-width-hover, 1.5px)!important}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__notch{border-color:var(--custom-border-color-hover, #ffbb00)!important;border-width:var(--custom-border-width-hover, 1.5px)!important}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__trailing{border-color:var(--custom-border-color-hover, #ffbb00)!important;border-width:var(--custom-border-width-hover, 1.5px)!important}::ng-deep .mdc-text-field--outlined .mat-mdc-notch-piece{border-color:var(--custom-border-color, #dddddd)!important;border-width:var(--custom-border-width, 1.5px)!important}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-text-field__input{caret-color:var(--custom-caret-color, #ffbb00)!important;font-size:12px!important;font-weight:var(--custom-font-weight, 400)!important;font-family:var(--custom-font-family, \"Mulish\")!important;color:var(--custom-font-color, #444444)!important}::ng-deep .mat-form-field-invalid .mdc-text-field--outlined .mat-mdc-notch-piece{border-color:var(--custom-border-color-error, red)!important;border-width:var(--custom-border-width-error, 1.5px)!important}::ng-deep .mat-mdc-form-field.mat-form-field-disabled{background:var(--custom-bg-color-disabled, #ECECEC)!important}::ng-deep .mdc-text-field--outlined.mdc-text-field--disabled .mdc-text-field__input{color:var(--custom-font-color-disabled, #999999)!important}::ng-deep .mdc-label{color:var(--custom-font-color, #444)!important;font-size:var(--custom-font-size, 16px)!important;font-weight:var(--custom-font-weight, 400)!important;font-family:var(--custom-font-family, \"Mulish\")!important}::placeholder{color:#8f8f8f!important;font-size:12px!important}::ng-deep .mat-mdc-form-field-hint-wrapper{padding:0!important}::ng-deep .mat-mdc-form-field-error-wrapper{padding:0!important}::ng-deep .mat-mdc-form-field-error{color:#e00!important;font-size:12px;font-weight:500;font-family:Mulish!important;letter-spacing:0}::ng-deep .mdc-text-field--outlined{--mdc-outlined-text-field-container-shape: var(--custom-border-radius , 4px) !important}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--invalid .mat-mdc-notch-piece{border-color:var(--custom-border-color-error, red)!important;border-width:var(--custom-border-width-error, 1.5px)!important}::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none!important}::ng-deep .mdc-text-field--outlined.mdc-text-field--disabled .mdc-text-field__input{font-size:14px!important}\n"] }]
|
|
420
420
|
}], ctorParameters: () => [{ type: MasterControlService }], propDecorators: { blur: [{
|
|
421
421
|
type: Output
|
|
422
422
|
}] } });
|
|
@@ -780,7 +780,7 @@ class RadioComponent {
|
|
|
780
780
|
useExisting: RadioComponent,
|
|
781
781
|
multi: true
|
|
782
782
|
}
|
|
783
|
-
], ngImport: i0, template: "<label class=\"field-lable\" *ngIf=\"field() && field()?.isVisible && field().isShowLabel\" [ngStyle]=\"{\n }\">{{field()?.label}}<span class=\"error-message\" *ngIf=\"field()?.validators?.isRequired\">*</span>\n <span [appTooltipTemplate]=\"HtmlContent\" arrowPosition=\"left\" tooltipPosition=\"bottom\">\n <img [src]=\"field().configData?.labelIconUrl\" class=\"toggle-img mx-1\" />\n </span>\n <ng-template #HtmlContent>\n <span [innerHTML]=\"field().configData?.tooltipMessage\"></span>\n </ng-template>\n </label>\n @if(reactiveFormControlobject()) {\n <mat-radio-group class=\"w-100\" *ngIf=\"field() && field()?.isVisible\"\n class=\"radio-btn-group radio-btn-gender\"\n [required]=\"field()?.validators?.isRequired\"\n [value]=\"inputValue\"\n [formControl]=\"reactiveFormControlobject()\"\n (change)=\"onRadioGroupChange($event)\"\n [id]=\"field()?.fieldName\"\n [name]=\"field()?.fieldName\"\n >\n <div\n class=\"card radio-card-gender py-auto px-1\"\n *ngFor=\"let data of field()?.options\"\n [ngClass]=\"{'disable-radio-btn': field()?.isDisable || reactiveFormControlobject?.disabled, 'two-options': field()?.options?.length === 2}\"\n (click)=\"toggleRadio(data.value, $event)\"\n [ngStyle]=\"{\n '--radio-button-border-color': inputValue === data.value ? field()?.controlStyle?.focusBorderColor : field()?.controlStyle?.borderColor,\n '--radio-button-background-color': inputValue === data.value ? field()?.controlStyle?.focusBackground : field()?.controlStyle?.background,\n '--radio-button-border-width': inputValue === data.value ? field()?.controlStyle?.focusBorderWidth : field()?.controlStyle?.borderWidth,\n '--radio-button-border-radius': inputValue === data.value ? field()?.controlStyle?.borderRadius : field()?.controlStyle?.borderRadius,\n }\"\n >\n <mat-radio-button\n style=\"min-width: 72px; text-align: center;\"\n class=\"radioButtonGender\"\n [value]=\"data.value\"\n [id]=\"field()?.fieldName + '_' + data.value\"\n [name]=\"field()?.fieldName + '_' + data.value\"\n >\n <span style=\"white-space: pre-line;\" class=\"forRadioLabel\" [ngStyle]=\"{\n '--radio-button-font-weight': field()?.controlStyle?.fontWeight,\n '--radio-button-font-size': field()?.controlStyle?.fontSize,\n '--radio-button-font-color': field()?.controlStyle?.color,\n }\">{{ data.label }}\n <img class=\"radio-btn-icon\" *ngIf=\"field()?.imageUrl\" [src]=\"field()?.imageUrl\" alt=\"\">\n </span>\n </mat-radio-button>\n </div>\n </mat-radio-group>\n }@else {\n <mat-radio-group class=\"w-100\" *ngIf=\"field() && field()?.isVisible\"\n class=\"radio-btn-group radio-btn-gender\"\n [required]=\"field()?.validators?.isRequired\"\n [value]=\"inputValue\"\n (change)=\"onRadioGroupChange($event)\"\n >\n <div\n class=\"card radio-card-gender py-auto px-1\"\n *ngFor=\"let data of field()?.options\"\n [ngClass]=\"{'disable-radio-btn': field()?.isDisable, 'two-options': field()?.options?.length === 2}\"\n (click)=\"toggleRadio(data.value, $event)\"\n [ngStyle]=\"{\n '--radio-button-border-color': inputValue === data.value ? field()?.controlStyle?.focusBorderColor : field()?.controlStyle?.borderColor,\n '--radio-button-background-color': inputValue === data.value ? field()?.controlStyle?.focusBackground : field()?.controlStyle?.background,\n '--radio-button-border-width': inputValue === data.value ? field()?.controlStyle?.focusBorderWidth : field()?.controlStyle?.borderWidth,\n '--radio-button-border-radius': inputValue === data.value ? field()?.controlStyle?.borderRadius : field()?.controlStyle?.borderRadius,\n }\"\n >\n <mat-radio-button\n style=\"min-width: 72px; text-align: center;\"\n class=\"radioButtonGender\"\n [value]=\"data.value\"\n [id]=\"field()?.fieldName + '_' + data.value\"\n [name]=\"field()?.fieldName + '_' + data.value\"\n >\n <span style=\"white-space: pre-line;\" class=\"forRadioLabel\" [ngStyle]=\"{\n '--radio-button-font-weight': field()?.controlStyle?.fontWeight,\n '--radio-button-font-size': field()?.controlStyle?.fontSize,\n '--radio-button-font-color': field()?.controlStyle?.color,\n }\">{{ data.label }}\n <img class=\"radio-btn-icon\" *ngIf=\"field()?.imageUrl\" [src]=\"field()?.imageUrl\" alt=\"\">\n </span>\n </mat-radio-button>\n </div>\n </mat-radio-group>\n }\n <div class=\"error-message\" *ngIf=\"false\">\n {{field()?.validators?.patternMessage}}.\n</div>\n", styles: [".radio-selection-border{border:1px solid #ffbb00!important;background:#fffaeb!important}*{font-family:mulish!important}.field-lable{font-size:12px!important;font-weight:700!important;color:#444!important;margin-bottom:0!important;white-space:pre-wrap!important}.error-message{color:red}.toggle-img{width:12px;margin-left:8px!important}@media screen and (max-width: 768px){.toggle-img{width:16px}}.radio-btn-group{display:flex;align-items:center;gap:1rem;align-self:stretch}::ng-deep .radio-btn-gender .mdc-form-field .mdc-radio{display:none!important}.radio-card-gender{box-shadow:none;border-color:var(--radio-button-border-color,#DADADA);border-width:var(--radio-button-border-width, 1px solid);background:var(--radio-button-background-color, #FFFFFF);display:flex;align-items:center;cursor:pointer;width:max-content!important;border-radius:var(--radio-button-border-radius, 6px)}.radio-card-gender.two-options{min-width:144px!important}::ng-deep .radioButtonGender .mdc-form-field .mdc-radio{display:none!important}.forRadioLabel{font-size:var(--radio-button-font-size, 12px)!important;font-weight:var(--radio-button-font-weight, 400);cursor:pointer;color:var(--radio-button-font-color, #444444)}.radio-btn-icon{margin-top:-2px;margin-left:4px}.selected-radio-btn{border:1px solid #ffbb00!important}.disable-radio-btn{background:#f5f5f5;pointer-events:none;cursor:none}\n"], dependencies: [{ kind: "ngmodule", type: MatRadioModule }, { kind: "directive", type: i2$2.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i2$2.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { 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: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: CustomizedTooltipDirective, selector: "[appTooltipTemplate]", inputs: ["appTooltipTemplate"] }] });
|
|
783
|
+
], ngImport: i0, template: "<label class=\"field-lable\" *ngIf=\"field() && field()?.isVisible && field().isShowLabel\" [ngStyle]=\"{\n }\">{{field()?.label}}<span class=\"error-message\" *ngIf=\"field()?.validators?.isRequired\">*</span>\n <span [appTooltipTemplate]=\"HtmlContent\" arrowPosition=\"left\" tooltipPosition=\"bottom\">\n <img [src]=\"field().configData?.labelIconUrl\" class=\"toggle-img mx-1\" />\n </span>\n <ng-template #HtmlContent>\n <span [innerHTML]=\"field().configData?.tooltipMessage\"></span>\n </ng-template>\n </label>\n @if(reactiveFormControlobject()) {\n <mat-radio-group class=\"w-100\" *ngIf=\"field() && field()?.isVisible\"\n class=\"radio-btn-group radio-btn-gender\"\n [required]=\"field()?.validators?.isRequired\"\n [value]=\"inputValue\"\n [formControl]=\"reactiveFormControlobject()\"\n (change)=\"onRadioGroupChange($event)\"\n [id]=\"field()?.fieldName\"\n [name]=\"field()?.fieldName\"\n >\n <div\n class=\"card radio-card-gender py-auto px-1\"\n *ngFor=\"let data of field()?.options\"\n [ngClass]=\"{'disable-radio-btn': field()?.isDisable || reactiveFormControlobject?.disabled, 'two-options': field()?.options?.length === 2}\"\n (click)=\"toggleRadio(data.value, $event)\"\n [ngStyle]=\"{\n '--radio-button-border-color': inputValue === data.value ? field()?.controlStyle?.focusBorderColor : field()?.controlStyle?.borderColor,\n '--radio-button-background-color': inputValue === data.value ? field()?.controlStyle?.focusBackground : field()?.controlStyle?.background,\n '--radio-button-border-width': inputValue === data.value ? field()?.controlStyle?.focusBorderWidth : field()?.controlStyle?.borderWidth,\n '--radio-button-border-radius': inputValue === data.value ? field()?.controlStyle?.borderRadius : field()?.controlStyle?.borderRadius,\n }\"\n >\n <mat-radio-button\n style=\"min-width: 72px; text-align: center;\"\n class=\"radioButtonGender\"\n [value]=\"data.value\"\n [id]=\"field()?.fieldName + '_' + data.value\"\n [name]=\"field()?.fieldName + '_' + data.value\"\n >\n <span style=\"white-space: pre-line;\" class=\"forRadioLabel\" [ngStyle]=\"{\n '--radio-button-font-weight': field()?.controlStyle?.fontWeight,\n '--radio-button-font-size': field()?.controlStyle?.fontSize,\n '--radio-button-font-color': field()?.controlStyle?.color,\n }\">{{ data.label }}\n <img class=\"radio-btn-icon\" *ngIf=\"field()?.imageUrl\" [src]=\"field()?.imageUrl\" alt=\"\">\n </span>\n </mat-radio-button>\n </div>\n </mat-radio-group>\n }@else {\n <mat-radio-group class=\"w-100\" *ngIf=\"field() && field()?.isVisible\"\n class=\"radio-btn-group radio-btn-gender\"\n [required]=\"field()?.validators?.isRequired\"\n [value]=\"inputValue\"\n (change)=\"onRadioGroupChange($event)\"\n [id]=\"field()?.fieldName\"\n [name]=\"field()?.fieldName\"\n >\n <div\n class=\"card radio-card-gender py-auto px-1\"\n *ngFor=\"let data of field()?.options\"\n [ngClass]=\"{'disable-radio-btn': field()?.isDisable, 'two-options': field()?.options?.length === 2}\"\n (click)=\"toggleRadio(data.value, $event)\"\n [ngStyle]=\"{\n '--radio-button-border-color': inputValue === data.value ? field()?.controlStyle?.focusBorderColor : field()?.controlStyle?.borderColor,\n '--radio-button-background-color': inputValue === data.value ? field()?.controlStyle?.focusBackground : field()?.controlStyle?.background,\n '--radio-button-border-width': inputValue === data.value ? field()?.controlStyle?.focusBorderWidth : field()?.controlStyle?.borderWidth,\n '--radio-button-border-radius': inputValue === data.value ? field()?.controlStyle?.borderRadius : field()?.controlStyle?.borderRadius,\n }\"\n >\n <mat-radio-button\n style=\"min-width: 72px; text-align: center;\"\n class=\"radioButtonGender\"\n [value]=\"data.value\"\n [id]=\"field()?.fieldName + '_' + data.value\"\n [name]=\"field()?.fieldName + '_' + data.value\"\n >\n <span style=\"white-space: pre-line;\" class=\"forRadioLabel\" [ngStyle]=\"{\n '--radio-button-font-weight': field()?.controlStyle?.fontWeight,\n '--radio-button-font-size': field()?.controlStyle?.fontSize,\n '--radio-button-font-color': field()?.controlStyle?.color,\n }\">{{ data.label }}\n <img class=\"radio-btn-icon\" *ngIf=\"field()?.imageUrl\" [src]=\"field()?.imageUrl\" alt=\"\">\n </span>\n </mat-radio-button>\n </div>\n </mat-radio-group>\n }\n <div class=\"error-message\" *ngIf=\"false\">\n {{field()?.validators?.patternMessage}}.\n</div>\n", styles: [".radio-selection-border{border:1px solid #ffbb00!important;background:#fffaeb!important}*{font-family:mulish!important}.field-lable{font-size:12px!important;font-weight:700!important;color:#444!important;margin-bottom:0!important;white-space:pre-wrap!important}.error-message{color:red}.toggle-img{width:12px;margin-left:8px!important}@media screen and (max-width: 768px){.toggle-img{width:16px}}.radio-btn-group{display:flex;align-items:center;gap:1rem;align-self:stretch}::ng-deep .radio-btn-gender .mdc-form-field .mdc-radio{display:none!important}.radio-card-gender{box-shadow:none;border-color:var(--radio-button-border-color,#DADADA);border-width:var(--radio-button-border-width, 1px solid);background:var(--radio-button-background-color, #FFFFFF);display:flex;align-items:center;cursor:pointer;width:max-content!important;border-radius:var(--radio-button-border-radius, 6px)}.radio-card-gender.two-options{min-width:144px!important}::ng-deep .radioButtonGender .mdc-form-field .mdc-radio{display:none!important}.forRadioLabel{font-size:var(--radio-button-font-size, 12px)!important;font-weight:var(--radio-button-font-weight, 400);cursor:pointer;color:var(--radio-button-font-color, #444444)}.radio-btn-icon{margin-top:-2px;margin-left:4px}.selected-radio-btn{border:1px solid #ffbb00!important}.disable-radio-btn{background:#f5f5f5;pointer-events:none;cursor:none}\n"], dependencies: [{ kind: "ngmodule", type: MatRadioModule }, { kind: "directive", type: i2$2.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i2$2.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { 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: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: CustomizedTooltipDirective, selector: "[appTooltipTemplate]", inputs: ["appTooltipTemplate"] }] });
|
|
784
784
|
}
|
|
785
785
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RadioComponent, decorators: [{
|
|
786
786
|
type: Component,
|
|
@@ -796,7 +796,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
796
796
|
useExisting: RadioComponent,
|
|
797
797
|
multi: true
|
|
798
798
|
}
|
|
799
|
-
], template: "<label class=\"field-lable\" *ngIf=\"field() && field()?.isVisible && field().isShowLabel\" [ngStyle]=\"{\n }\">{{field()?.label}}<span class=\"error-message\" *ngIf=\"field()?.validators?.isRequired\">*</span>\n <span [appTooltipTemplate]=\"HtmlContent\" arrowPosition=\"left\" tooltipPosition=\"bottom\">\n <img [src]=\"field().configData?.labelIconUrl\" class=\"toggle-img mx-1\" />\n </span>\n <ng-template #HtmlContent>\n <span [innerHTML]=\"field().configData?.tooltipMessage\"></span>\n </ng-template>\n </label>\n @if(reactiveFormControlobject()) {\n <mat-radio-group class=\"w-100\" *ngIf=\"field() && field()?.isVisible\"\n class=\"radio-btn-group radio-btn-gender\"\n [required]=\"field()?.validators?.isRequired\"\n [value]=\"inputValue\"\n [formControl]=\"reactiveFormControlobject()\"\n (change)=\"onRadioGroupChange($event)\"\n [id]=\"field()?.fieldName\"\n [name]=\"field()?.fieldName\"\n >\n <div\n class=\"card radio-card-gender py-auto px-1\"\n *ngFor=\"let data of field()?.options\"\n [ngClass]=\"{'disable-radio-btn': field()?.isDisable || reactiveFormControlobject?.disabled, 'two-options': field()?.options?.length === 2}\"\n (click)=\"toggleRadio(data.value, $event)\"\n [ngStyle]=\"{\n '--radio-button-border-color': inputValue === data.value ? field()?.controlStyle?.focusBorderColor : field()?.controlStyle?.borderColor,\n '--radio-button-background-color': inputValue === data.value ? field()?.controlStyle?.focusBackground : field()?.controlStyle?.background,\n '--radio-button-border-width': inputValue === data.value ? field()?.controlStyle?.focusBorderWidth : field()?.controlStyle?.borderWidth,\n '--radio-button-border-radius': inputValue === data.value ? field()?.controlStyle?.borderRadius : field()?.controlStyle?.borderRadius,\n }\"\n >\n <mat-radio-button\n style=\"min-width: 72px; text-align: center;\"\n class=\"radioButtonGender\"\n [value]=\"data.value\"\n [id]=\"field()?.fieldName + '_' + data.value\"\n [name]=\"field()?.fieldName + '_' + data.value\"\n >\n <span style=\"white-space: pre-line;\" class=\"forRadioLabel\" [ngStyle]=\"{\n '--radio-button-font-weight': field()?.controlStyle?.fontWeight,\n '--radio-button-font-size': field()?.controlStyle?.fontSize,\n '--radio-button-font-color': field()?.controlStyle?.color,\n }\">{{ data.label }}\n <img class=\"radio-btn-icon\" *ngIf=\"field()?.imageUrl\" [src]=\"field()?.imageUrl\" alt=\"\">\n </span>\n </mat-radio-button>\n </div>\n </mat-radio-group>\n }@else {\n <mat-radio-group class=\"w-100\" *ngIf=\"field() && field()?.isVisible\"\n class=\"radio-btn-group radio-btn-gender\"\n [required]=\"field()?.validators?.isRequired\"\n [value]=\"inputValue\"\n (change)=\"onRadioGroupChange($event)\"\n >\n <div\n class=\"card radio-card-gender py-auto px-1\"\n *ngFor=\"let data of field()?.options\"\n [ngClass]=\"{'disable-radio-btn': field()?.isDisable, 'two-options': field()?.options?.length === 2}\"\n (click)=\"toggleRadio(data.value, $event)\"\n [ngStyle]=\"{\n '--radio-button-border-color': inputValue === data.value ? field()?.controlStyle?.focusBorderColor : field()?.controlStyle?.borderColor,\n '--radio-button-background-color': inputValue === data.value ? field()?.controlStyle?.focusBackground : field()?.controlStyle?.background,\n '--radio-button-border-width': inputValue === data.value ? field()?.controlStyle?.focusBorderWidth : field()?.controlStyle?.borderWidth,\n '--radio-button-border-radius': inputValue === data.value ? field()?.controlStyle?.borderRadius : field()?.controlStyle?.borderRadius,\n }\"\n >\n <mat-radio-button\n style=\"min-width: 72px; text-align: center;\"\n class=\"radioButtonGender\"\n [value]=\"data.value\"\n [id]=\"field()?.fieldName + '_' + data.value\"\n [name]=\"field()?.fieldName + '_' + data.value\"\n >\n <span style=\"white-space: pre-line;\" class=\"forRadioLabel\" [ngStyle]=\"{\n '--radio-button-font-weight': field()?.controlStyle?.fontWeight,\n '--radio-button-font-size': field()?.controlStyle?.fontSize,\n '--radio-button-font-color': field()?.controlStyle?.color,\n }\">{{ data.label }}\n <img class=\"radio-btn-icon\" *ngIf=\"field()?.imageUrl\" [src]=\"field()?.imageUrl\" alt=\"\">\n </span>\n </mat-radio-button>\n </div>\n </mat-radio-group>\n }\n <div class=\"error-message\" *ngIf=\"false\">\n {{field()?.validators?.patternMessage}}.\n</div>\n", styles: [".radio-selection-border{border:1px solid #ffbb00!important;background:#fffaeb!important}*{font-family:mulish!important}.field-lable{font-size:12px!important;font-weight:700!important;color:#444!important;margin-bottom:0!important;white-space:pre-wrap!important}.error-message{color:red}.toggle-img{width:12px;margin-left:8px!important}@media screen and (max-width: 768px){.toggle-img{width:16px}}.radio-btn-group{display:flex;align-items:center;gap:1rem;align-self:stretch}::ng-deep .radio-btn-gender .mdc-form-field .mdc-radio{display:none!important}.radio-card-gender{box-shadow:none;border-color:var(--radio-button-border-color,#DADADA);border-width:var(--radio-button-border-width, 1px solid);background:var(--radio-button-background-color, #FFFFFF);display:flex;align-items:center;cursor:pointer;width:max-content!important;border-radius:var(--radio-button-border-radius, 6px)}.radio-card-gender.two-options{min-width:144px!important}::ng-deep .radioButtonGender .mdc-form-field .mdc-radio{display:none!important}.forRadioLabel{font-size:var(--radio-button-font-size, 12px)!important;font-weight:var(--radio-button-font-weight, 400);cursor:pointer;color:var(--radio-button-font-color, #444444)}.radio-btn-icon{margin-top:-2px;margin-left:4px}.selected-radio-btn{border:1px solid #ffbb00!important}.disable-radio-btn{background:#f5f5f5;pointer-events:none;cursor:none}\n"] }]
|
|
799
|
+
], template: "<label class=\"field-lable\" *ngIf=\"field() && field()?.isVisible && field().isShowLabel\" [ngStyle]=\"{\n }\">{{field()?.label}}<span class=\"error-message\" *ngIf=\"field()?.validators?.isRequired\">*</span>\n <span [appTooltipTemplate]=\"HtmlContent\" arrowPosition=\"left\" tooltipPosition=\"bottom\">\n <img [src]=\"field().configData?.labelIconUrl\" class=\"toggle-img mx-1\" />\n </span>\n <ng-template #HtmlContent>\n <span [innerHTML]=\"field().configData?.tooltipMessage\"></span>\n </ng-template>\n </label>\n @if(reactiveFormControlobject()) {\n <mat-radio-group class=\"w-100\" *ngIf=\"field() && field()?.isVisible\"\n class=\"radio-btn-group radio-btn-gender\"\n [required]=\"field()?.validators?.isRequired\"\n [value]=\"inputValue\"\n [formControl]=\"reactiveFormControlobject()\"\n (change)=\"onRadioGroupChange($event)\"\n [id]=\"field()?.fieldName\"\n [name]=\"field()?.fieldName\"\n >\n <div\n class=\"card radio-card-gender py-auto px-1\"\n *ngFor=\"let data of field()?.options\"\n [ngClass]=\"{'disable-radio-btn': field()?.isDisable || reactiveFormControlobject?.disabled, 'two-options': field()?.options?.length === 2}\"\n (click)=\"toggleRadio(data.value, $event)\"\n [ngStyle]=\"{\n '--radio-button-border-color': inputValue === data.value ? field()?.controlStyle?.focusBorderColor : field()?.controlStyle?.borderColor,\n '--radio-button-background-color': inputValue === data.value ? field()?.controlStyle?.focusBackground : field()?.controlStyle?.background,\n '--radio-button-border-width': inputValue === data.value ? field()?.controlStyle?.focusBorderWidth : field()?.controlStyle?.borderWidth,\n '--radio-button-border-radius': inputValue === data.value ? field()?.controlStyle?.borderRadius : field()?.controlStyle?.borderRadius,\n }\"\n >\n <mat-radio-button\n style=\"min-width: 72px; text-align: center;\"\n class=\"radioButtonGender\"\n [value]=\"data.value\"\n [id]=\"field()?.fieldName + '_' + data.value\"\n [name]=\"field()?.fieldName + '_' + data.value\"\n >\n <span style=\"white-space: pre-line;\" class=\"forRadioLabel\" [ngStyle]=\"{\n '--radio-button-font-weight': field()?.controlStyle?.fontWeight,\n '--radio-button-font-size': field()?.controlStyle?.fontSize,\n '--radio-button-font-color': field()?.controlStyle?.color,\n }\">{{ data.label }}\n <img class=\"radio-btn-icon\" *ngIf=\"field()?.imageUrl\" [src]=\"field()?.imageUrl\" alt=\"\">\n </span>\n </mat-radio-button>\n </div>\n </mat-radio-group>\n }@else {\n <mat-radio-group class=\"w-100\" *ngIf=\"field() && field()?.isVisible\"\n class=\"radio-btn-group radio-btn-gender\"\n [required]=\"field()?.validators?.isRequired\"\n [value]=\"inputValue\"\n (change)=\"onRadioGroupChange($event)\"\n [id]=\"field()?.fieldName\"\n [name]=\"field()?.fieldName\"\n >\n <div\n class=\"card radio-card-gender py-auto px-1\"\n *ngFor=\"let data of field()?.options\"\n [ngClass]=\"{'disable-radio-btn': field()?.isDisable, 'two-options': field()?.options?.length === 2}\"\n (click)=\"toggleRadio(data.value, $event)\"\n [ngStyle]=\"{\n '--radio-button-border-color': inputValue === data.value ? field()?.controlStyle?.focusBorderColor : field()?.controlStyle?.borderColor,\n '--radio-button-background-color': inputValue === data.value ? field()?.controlStyle?.focusBackground : field()?.controlStyle?.background,\n '--radio-button-border-width': inputValue === data.value ? field()?.controlStyle?.focusBorderWidth : field()?.controlStyle?.borderWidth,\n '--radio-button-border-radius': inputValue === data.value ? field()?.controlStyle?.borderRadius : field()?.controlStyle?.borderRadius,\n }\"\n >\n <mat-radio-button\n style=\"min-width: 72px; text-align: center;\"\n class=\"radioButtonGender\"\n [value]=\"data.value\"\n [id]=\"field()?.fieldName + '_' + data.value\"\n [name]=\"field()?.fieldName + '_' + data.value\"\n >\n <span style=\"white-space: pre-line;\" class=\"forRadioLabel\" [ngStyle]=\"{\n '--radio-button-font-weight': field()?.controlStyle?.fontWeight,\n '--radio-button-font-size': field()?.controlStyle?.fontSize,\n '--radio-button-font-color': field()?.controlStyle?.color,\n }\">{{ data.label }}\n <img class=\"radio-btn-icon\" *ngIf=\"field()?.imageUrl\" [src]=\"field()?.imageUrl\" alt=\"\">\n </span>\n </mat-radio-button>\n </div>\n </mat-radio-group>\n }\n <div class=\"error-message\" *ngIf=\"false\">\n {{field()?.validators?.patternMessage}}.\n</div>\n", styles: [".radio-selection-border{border:1px solid #ffbb00!important;background:#fffaeb!important}*{font-family:mulish!important}.field-lable{font-size:12px!important;font-weight:700!important;color:#444!important;margin-bottom:0!important;white-space:pre-wrap!important}.error-message{color:red}.toggle-img{width:12px;margin-left:8px!important}@media screen and (max-width: 768px){.toggle-img{width:16px}}.radio-btn-group{display:flex;align-items:center;gap:1rem;align-self:stretch}::ng-deep .radio-btn-gender .mdc-form-field .mdc-radio{display:none!important}.radio-card-gender{box-shadow:none;border-color:var(--radio-button-border-color,#DADADA);border-width:var(--radio-button-border-width, 1px solid);background:var(--radio-button-background-color, #FFFFFF);display:flex;align-items:center;cursor:pointer;width:max-content!important;border-radius:var(--radio-button-border-radius, 6px)}.radio-card-gender.two-options{min-width:144px!important}::ng-deep .radioButtonGender .mdc-form-field .mdc-radio{display:none!important}.forRadioLabel{font-size:var(--radio-button-font-size, 12px)!important;font-weight:var(--radio-button-font-weight, 400);cursor:pointer;color:var(--radio-button-font-color, #444444)}.radio-btn-icon{margin-top:-2px;margin-left:4px}.selected-radio-btn{border:1px solid #ffbb00!important}.disable-radio-btn{background:#f5f5f5;pointer-events:none;cursor:none}\n"] }]
|
|
800
800
|
}], ctorParameters: () => [{ type: MasterControlService }], propDecorators: { change: [{
|
|
801
801
|
type: Output
|
|
802
802
|
}] } });
|
|
@@ -1950,7 +1950,7 @@ class MultipleSelectComponent {
|
|
|
1950
1950
|
useExisting: MultipleSelectComponent,
|
|
1951
1951
|
multi: true
|
|
1952
1952
|
}
|
|
1953
|
-
], ngImport: i0, template: "<label class=\"field-lable\" *ngIf=\"field() && field()?.isVisible && field().isShowLabel\">{{field()?.label}}<span style=\"color: red;\" *ngIf=\"field() && field()?.validators?.isRequired\">*</span></label>\n<mat-form-field\n appearance=\"outline\"\n class=\"input-full-width full-width w-100 multi-select\"\n *ngIf=\"field() && field()?.isVisible\"\n [ngStyle]=\"{\n'--custom-border-color': field()?.controlStyle?.borderColor ,\n'--custom-border-width': field()?.controlStyle?.borderWidth ,\n'--custom-border-radius': field()?.controlStyle?.borderRadius ,\n'--custom-bg-color': field()?.controlStyle?.background ,\n'--custom-border-color-focus': field()?.controlStyle?.focusBorderColor ,\n'--custom-border-width-focus': field()?.controlStyle?.focusBorderWidth ,\n'--custom-bg-color-focus': field()?.controlStyle?.focusBackground ,\n'--custom-border-color-hover': field()?.controlStyle?.hoverBorderColor ,\n'--custom-border-width-hover': field()?.controlStyle?.hoverBorderWidth ,\n'--custom-border-color-error': field()?.controlStyle?.errorBorderColor ,\n'--custom-border-width-error': field()?.controlStyle?.errorBorderWidth ,\n'--custom-font-size': field()?.controlStyle?.fontSize ,\n'--custom-font-weight': field()?.controlStyle?.fontWeight ,\n'--custom-font-family': field()?.controlStyle?.fontFamily ,\n'--custom-font-color': field()?.controlStyle?.color ,\n'--custom-caret-color': field()?.controlStyle?.caretColor ,\n'--custom-font-color-disabled' : field()?.controlStyle?.disableColor ,\n'--custom-bg-color-disabled' : field()?.controlStyle?.disableBackground ,\n}\"\n>\n @if(reactiveFormControlobject()) {\n <mat-select\n multiple\n [id]=\"field()?.fieldName\"\n [attr.name]=\"field()?.fieldName\"\n [value]=\"inputValue\"\n [required]=\"field()?.validators?.isRequired\"\n [placeholder]=\"field()?.placeHolder\"\n [disabled]=\"field()?.isDisable\"\n (openedChange)=\"onSelectOpened($event)\"\n (selectionChange)=\"selectionChanged($event)\"\n [formControl]=\"reactiveFormControlobject()\"\n >\n <mat-select-trigger>\n <mat-chip-grid>\n @for (option of inputValue; track option) {\n <mat-chip-row [removable]=\"true\" (removed)=\"removeItem(option)\">\n {{ showLabel(option) }}\n <mat-icon matChipRemove>close</mat-icon>\n </mat-chip-row>\n }\n <mat-chip *ngIf=\"remainingCount > 0\"> +{{ remainingCount }} </mat-chip>\n </mat-chip-grid>\n </mat-select-trigger>\n @for (option of field()?.options; track option.label) {\n <mat-option [value]=\"option.value\">\n {{ option.label }} <img *ngIf=\"option.image\" [src]=\"option.image\" alt=\"\" style=\"width:20px; height:20px; float: inline-end;\" />\n </mat-option>\n }\n </mat-select>\n }@else {\n <mat-select\n multiple\n [id]=\"field()?.fieldName\"\n [attr.name]=\"field()?.fieldName\"\n [value]=\"inputValue\"\n [required]=\"field()?.validators?.isRequired\"\n [placeholder]=\"field()?.placeHolder\"\n [disabled]=\"field()?.isDisable\"\n (openedChange)=\"onSelectOpened($event)\"\n (selectionChange)=\"selectionChanged($event)\"\n >\n <mat-select-trigger>\n <mat-chip-grid>\n @for (option of inputValue; track option) {\n <mat-chip-row [removable]=\"true\" (removed)=\"removeItem(option)\">\n {{ showLabel(option) }}\n <mat-icon matChipRemove>close</mat-icon>\n </mat-chip-row>\n }\n <mat-chip *ngIf=\"remainingCount > 0\"> +{{ remainingCount }} </mat-chip>\n </mat-chip-grid>\n </mat-select-trigger>\n @for (option of field()?.options; track option.label) {\n <mat-option [value]=\"option.value\">\n {{ option.label }} <img *ngIf=\"option.image\" [src]=\"option.image\" alt=\"\" style=\"width:20px; height:20px; float: inline-end;\" />\n </mat-option>\n }\n </mat-select>\n }\n\n <mat-error *ngIf=\"false\">\n {{ field()?.validators?.requiredMessage }}\n </mat-error>\n</mat-form-field>\n", styles: [".field-lable{font-size:12px!important;font-weight:700!important;color:#444!important;margin-bottom:0!important}.error-message{color:red}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mat-mdc-notch-piece{border-color:var(--custom-border-color-focus, #ffbb00)!important;border-width:var(--custom-border-width-focus, 1.5px)!important}::ng-deep .mat-mdc-form-field{background-color:var(--custom-bg-color, #ffffff)!important;border-radius:var(--custom-border-radius , 4px)!important}::ng-deep .mat-mdc-option .mdc-list-item__primary-text{width:100%!important}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__leading{border-color:var(--custom-border-color-hover, #ffbb00)!important;border-width:var(--custom-border-width-hover, 1.5px)!important}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__notch{border-color:var(--custom-border-color-hover, #ffbb00)!important;border-width:var(--custom-border-width-hover, 1.5px)!important}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__trailing{border-color:var(--custom-border-color-hover, #ffbb00)!important;border-width:var(--custom-border-width-hover, 1.5px)!important}::ng-deep .mdc-text-field--outlined .mat-mdc-notch-piece{border-color:var(--custom-border-color, #dddddd)!important;border-width:var(--custom-border-width, 1.5px)!important}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-text-field__input{caret-color:var(--custom-caret-color, #ffbb00)!important;font-size:12px!important;font-weight:var(--custom-font-weight, 400)!important;font-family:var(--custom-font-family, \"Mulish\")!important;color:var(--custom-font-color, #444444)!important}::ng-deep .mat-form-field-invalid .mdc-text-field--outlined .mat-mdc-notch-piece{border-color:var(--custom-border-color-error, red)!important;border-width:var(--custom-border-width-error, 1.5px)!important}::ng-deep .mat-mdc-form-field.mat-form-field-disabled{background:var(--custom-bg-color-disabled, #ECECEC)!important}::ng-deep .mdc-text-field--outlined.mdc-text-field--disabled .mdc-text-field__input{color:var(--custom-font-color-disabled, #999999)!important}::ng-deep .mdc-label{color:var(--custom-font-color, #444)!important;font-size:var(--custom-font-size, 16px)!important;font-weight:var(--custom-font-weight, 400)!important;font-family:var(--custom-font-family, \"Mulish\")!important}::placeholder{color:#8f8f8f!important;font-size:12px!important}::ng-deep .mat-mdc-form-field-hint-wrapper{padding:0!important}::ng-deep .mat-mdc-form-field-error-wrapper{padding:0!important}::ng-deep .mat-mdc-form-field-error{color:#e00!important;font-size:12px;font-weight:500;font-family:Mulish!important;letter-spacing:0}::ng-deep .mdc-text-field--outlined{--mdc-outlined-text-field-container-shape: var(--custom-border-radius , 4px) !important}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--invalid .mat-mdc-notch-piece{border-color:var(--custom-border-color-error, red)!important;border-width:var(--custom-border-width-error, 1.5px)!important}::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none!important}::ng-deep .mat-mdc-select-arrow{border-style:solid!important;border-width:0 2px 2px 0!important;border-right:2px solid!important;content:\"\"!important;display:inline-block!important;padding:3px!important;transform:rotate(45deg)!important;vertical-align:middle!important;width:unset!important;height:unset!important;color:#444!important}::ng-deep .mat-mdc-form-field.mat-focused.mat-primary .mat-mdc-select-arrow{color:#fb0}::ng-deep .mat-mdc-select-arrow svg{display:none!important}::ng-deep .cdk-overlay-pane:not(.mat-mdc-select-panel-above) div.mat-mdc-select-panel{background:#fff!important}::ng-deep div.mat-mdc-select-panel{background:#fff!important}::ng-deep .mat-mdc-option.mdc-list-item{background:#fff!important;color:#444!important;font-weight:400}::ng-deep .mat-mdc-form-field.mat-focused .mat-mdc-select-arrow{color:#fb0!important}::ng-deep .mat-mdc-option:focus.mdc-list-item{background:#fffaeb!important;border-left:4px solid #fb0;font-weight:600;color:#444!important;border-radius:3px}::ng-deep .mat-mdc-option.mat-mdc-option-active.mdc-list-item{background:#fffaeb!important;border-left:4px solid #fb0;font-weight:600;color:#444!important;border-radius:3px}::ng-deep .mat-mdc-option.mdc-list-item{background:var(--custom-select-option-background-color, #fff)!important;color:var(--custom-select-option-font-color, #444)!important;font-weight:var(--custom-select-option-font-weight, 400)!important}::ng-deep .mat-mdc-option:focus.mdc-list-item{background:var(--custom-select-option-background-color-focus, #fffaeb)!important;color:var(--custom-select-option-font-color-focus, #444)!important;font-weight:var(--custom-select-option-font-weight-focus, 600)!important;border-left:var(--custom-select-option-border-left-focus, 4px solid #fb0)!important;border-radius:var(--custom-select-option-border-radius-focus, 3px)!important}::ng-deep .mat-mdc-option.mat-mdc-option-active.mdc-list-item{background:var(--custom-select-option-background-color-focus, #fffaeb)!important;color:var(--custom-select-option-font-color-focus, #444)!important;font-weight:var(--custom-select-option-font-weight-focus, 600)!important;border-left:var(--custom-select-option-border-left-focus, 4px solid #fb0)!important;border-radius:var(--custom-select-option-border-radius-focus, 3px)!important}::ng-deep .mat-mdc-option .mdc-list-item__primary-text{font-size:var(--custom-font-size, 12px)!important}::ng-deep .cdk-overlay-pane:not(.mat-mdc-select-panel-above) div.mat-mdc-select-panel{padding:0!important;background:#fafafa!important}::ng-deep .mat-mdc-option .mdc-list-item__primary-text{font-size:12px!important}::ng-deep .mat-mdc-form-field.mat-focused.mat-primary .mat-select-arrow{color:#fb0}::ng-deep .mat-mdc-select-panel-above div.mat-mdc-select-panel{padding:0!important}::ng-deep .mat-mdc-optgroup-label{background:#f5f5f5;color:#444;font-weight:800}::ng-deep .mat-mdc-autocomplete-panel.mat-mdc-autocomplete-visible{padding:0!important;background:#fff!important}::ng-deep .mat-mdc-option.mdc-list-item--selected:not(.mdc-list-item--disabled):not(.mat-mdc-option-multiple){background:#fffaeb!important;border-left:4px solid #fb0;font-weight:600!important;color:#444!important;border-radius:3px}::ng-deep .mat-mdc-option.mdc-list-item--selected:not(.mdc-list-item--disabled) .mdc-list-item__primary-text{color:unset!important}::ng-deep .mat-mdc-option .mat-pseudo-checkbox-minimal{display:none!important}::ng-deep .mat-mdc-chip-set .mdc-evolution-chip{background-color:#fff9e5!important}::ng-deep .mat-mdc-standard-chip.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--trailing{color:#444!important}::ng-deep .mat-mdc-standard-chip .mdc-evolution-chip__text-label{font-size:12px!important;font-weight:400!important;color:#444!important}::ng-deep .mat-mdc-standard-chip .mdc-evolution-chip__icon--trailing{height:12px!important;width:12px!important;font-size:12px!important}::ng-deep .multi-select .mat-mdc-form-field-type-mat-select:not(.mat-form-field-disabled) .mat-mdc-text-field-wrapper{padding-right:0!important}::ng-deep .mat-mdc-standard-chip{--mdc-chip-outline-width: 1px !important;border-radius:18px!important;--mdc-chip-container-shape-radius: 19px !important;--mdc-chip-outline-color: #ffbb00 !important}::ng-deep .multi-select .mdc-text-field--outlined .mat-mdc-form-field-infix,.mdc-text-field--no-label .mat-mdc-form-field-infix{padding:9px 0 7px}::ng-deep .multi-select .mat-mdc-select-arrow-wrapper{height:37px}::ng-deep .mat-mdc-chip{height:24px!important}::ng-deep .mat-mdc-optgroup-label{display:contents!important}::ng-deep .multiselect-search .mat-mdc-text-field-wrapper{background:#fff!important}::ng-deep .multiselect-search .mdc-text-field__input{color:#444!important}::ng-deep .multiselect-search .mdc-line-ripple--active{opacity:0!important;transform:none!important}::ng-deep .mdc-line-ripple{opacity:0!important;transform:none!important}::ng-deep .mdc-evolution-chip-set__chips{flex-flow:unset!important;overflow-x:scroll!important;scrollbar-width:none!important}::ng-deep .mat-pseudo-checkbox-full.mat-pseudo-checkbox-checked:after{color:#fff!important}::ng-deep .mat-pseudo-checkbox-full.mat-pseudo-checkbox-checked{background-color:#fb0!important;border-radius:4px!important}::ng-deep .mat-pseudo-checkbox-full.mat-pseudo-checkbox-indeterminate{background-color:#fb0!important;border-radius:4px!important}::ng-deep .mat-mdc-option .mat-pseudo-checkbox{border:1px solid #DADADA}::ng-deep .mat-mdc-option.mdc-list-item.mat-mdc-option-multiple.mdc-list-item--selected{background:#fffaeb!important;border-left:4px solid #fb0;font-weight:600;color:#444!important;border-radius:3px}::ng-deep .mat-mdc-form-field .mat-mdc-select-placeholder{color:#8f8f8f!important;font-size:12px!important;vertical-align:sub}*{font-family:mulish!important}.material-icons{font-family:Material Icons!important}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip{margin:2px 0 7px 8px}@media screen and (max-width: 768px){::ng-deep .mat-mdc-form-field .mat-mdc-select-placeholder{font-size:14px!important}::ng-deep .mat-mdc-option .mdc-list-item__primary-text{font-size:var(--custom-font-size, 14px)!important}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-text-field__input{font-size:14px!important}}\n"], dependencies: [{ kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: i3.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: i3.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i6.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatFormFieldModule }, { 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: MatChipsModule }, { kind: "component", type: i6$1.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "component", type: i6$1.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i6$1.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i6$1.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
|
|
1953
|
+
], ngImport: i0, template: "<label class=\"field-lable\" *ngIf=\"field() && field()?.isVisible && field().isShowLabel\">{{field()?.label}}<span style=\"color: red;\" *ngIf=\"field() && field()?.validators?.isRequired\">*</span></label>\n<mat-form-field\n appearance=\"outline\"\n class=\"input-full-width full-width w-100 multi-select\"\n *ngIf=\"field() && field()?.isVisible\"\n [ngStyle]=\"{\n'--custom-border-color': field()?.controlStyle?.borderColor ,\n'--custom-border-width': field()?.controlStyle?.borderWidth ,\n'--custom-border-radius': field()?.controlStyle?.borderRadius ,\n'--custom-bg-color': field()?.controlStyle?.background ,\n'--custom-border-color-focus': field()?.controlStyle?.focusBorderColor ,\n'--custom-border-width-focus': field()?.controlStyle?.focusBorderWidth ,\n'--custom-bg-color-focus': field()?.controlStyle?.focusBackground ,\n'--custom-border-color-hover': field()?.controlStyle?.hoverBorderColor ,\n'--custom-border-width-hover': field()?.controlStyle?.hoverBorderWidth ,\n'--custom-border-color-error': field()?.controlStyle?.errorBorderColor ,\n'--custom-border-width-error': field()?.controlStyle?.errorBorderWidth ,\n'--custom-font-size': field()?.controlStyle?.fontSize ,\n'--custom-font-weight': field()?.controlStyle?.fontWeight ,\n'--custom-font-family': field()?.controlStyle?.fontFamily ,\n'--custom-font-color': field()?.controlStyle?.color ,\n'--custom-caret-color': field()?.controlStyle?.caretColor ,\n'--custom-font-color-disabled' : field()?.controlStyle?.disableColor ,\n'--custom-bg-color-disabled' : field()?.controlStyle?.disableBackground ,\n}\"\n>\n @if(reactiveFormControlobject()) {\n <mat-select\n multiple\n [id]=\"field()?.fieldName\"\n [attr.name]=\"field()?.fieldName\"\n [value]=\"inputValue\"\n [required]=\"field()?.validators?.isRequired\"\n [placeholder]=\"field()?.placeHolder\"\n [disabled]=\"field()?.isDisable\"\n (openedChange)=\"onSelectOpened($event)\"\n (selectionChange)=\"selectionChanged($event)\"\n [formControl]=\"reactiveFormControlobject()\"\n >\n <mat-select-trigger>\n <mat-chip-grid>\n @for (option of inputValue; track option) {\n <mat-chip-row [removable]=\"true\" (removed)=\"removeItem(option)\">\n {{ showLabel(option) }}\n <mat-icon matChipRemove>close</mat-icon>\n </mat-chip-row>\n }\n <mat-chip *ngIf=\"remainingCount > 0\"> +{{ remainingCount }} </mat-chip>\n </mat-chip-grid>\n </mat-select-trigger>\n @for (option of field()?.options; track option.label) {\n <mat-option [value]=\"option.value\" [id]=\"field()?.fieldName + '_' + option.value\" [attr.name]=\"field()?.fieldName + '_' + option.value\">\n {{ option.label }} <img *ngIf=\"option.image\" [src]=\"option.image\" alt=\"\" style=\"width:20px; height:20px; float: inline-end;\" />\n </mat-option>\n }\n </mat-select>\n }@else {\n <mat-select\n multiple\n [id]=\"field()?.fieldName\"\n [attr.name]=\"field()?.fieldName\"\n [value]=\"inputValue\"\n [required]=\"field()?.validators?.isRequired\"\n [placeholder]=\"field()?.placeHolder\"\n [disabled]=\"field()?.isDisable\"\n (openedChange)=\"onSelectOpened($event)\"\n (selectionChange)=\"selectionChanged($event)\"\n >\n <mat-select-trigger>\n <mat-chip-grid>\n @for (option of inputValue; track option) {\n <mat-chip-row [removable]=\"true\" (removed)=\"removeItem(option)\">\n {{ showLabel(option) }}\n <mat-icon matChipRemove>close</mat-icon>\n </mat-chip-row>\n }\n <mat-chip *ngIf=\"remainingCount > 0\"> +{{ remainingCount }} </mat-chip>\n </mat-chip-grid>\n </mat-select-trigger>\n @for (option of field()?.options; track option.label) {\n <mat-option [value]=\"option.value\" [id]=\"field()?.fieldName + '_' + option.value\" [attr.name]=\"field()?.fieldName + '_' + option.value\">\n {{ option.label }} <img *ngIf=\"option.image\" [src]=\"option.image\" alt=\"\" style=\"width:20px; height:20px; float: inline-end;\" />\n </mat-option>\n }\n </mat-select>\n }\n\n <mat-error *ngIf=\"false\">\n {{ field()?.validators?.requiredMessage }}\n </mat-error>\n</mat-form-field>\n", styles: [".field-lable{font-size:12px!important;font-weight:700!important;color:#444!important;margin-bottom:0!important}.error-message{color:red}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mat-mdc-notch-piece{border-color:var(--custom-border-color-focus, #ffbb00)!important;border-width:var(--custom-border-width-focus, 1.5px)!important}::ng-deep .mat-mdc-form-field{background-color:var(--custom-bg-color, #ffffff)!important;border-radius:var(--custom-border-radius , 4px)!important}::ng-deep .mat-mdc-option .mdc-list-item__primary-text{width:100%!important}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__leading{border-color:var(--custom-border-color-hover, #ffbb00)!important;border-width:var(--custom-border-width-hover, 1.5px)!important}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__notch{border-color:var(--custom-border-color-hover, #ffbb00)!important;border-width:var(--custom-border-width-hover, 1.5px)!important}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__trailing{border-color:var(--custom-border-color-hover, #ffbb00)!important;border-width:var(--custom-border-width-hover, 1.5px)!important}::ng-deep .mdc-text-field--outlined .mat-mdc-notch-piece{border-color:var(--custom-border-color, #dddddd)!important;border-width:var(--custom-border-width, 1.5px)!important}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-text-field__input{caret-color:var(--custom-caret-color, #ffbb00)!important;font-size:12px!important;font-weight:var(--custom-font-weight, 400)!important;font-family:var(--custom-font-family, \"Mulish\")!important;color:var(--custom-font-color, #444444)!important}::ng-deep .mat-form-field-invalid .mdc-text-field--outlined .mat-mdc-notch-piece{border-color:var(--custom-border-color-error, red)!important;border-width:var(--custom-border-width-error, 1.5px)!important}::ng-deep .mat-mdc-form-field.mat-form-field-disabled{background:var(--custom-bg-color-disabled, #ECECEC)!important}::ng-deep .mdc-text-field--outlined.mdc-text-field--disabled .mdc-text-field__input{color:var(--custom-font-color-disabled, #999999)!important}::ng-deep .mdc-label{color:var(--custom-font-color, #444)!important;font-size:var(--custom-font-size, 16px)!important;font-weight:var(--custom-font-weight, 400)!important;font-family:var(--custom-font-family, \"Mulish\")!important}::placeholder{color:#8f8f8f!important;font-size:12px!important}::ng-deep .mat-mdc-form-field-hint-wrapper{padding:0!important}::ng-deep .mat-mdc-form-field-error-wrapper{padding:0!important}::ng-deep .mat-mdc-form-field-error{color:#e00!important;font-size:12px;font-weight:500;font-family:Mulish!important;letter-spacing:0}::ng-deep .mdc-text-field--outlined{--mdc-outlined-text-field-container-shape: var(--custom-border-radius , 4px) !important}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--invalid .mat-mdc-notch-piece{border-color:var(--custom-border-color-error, red)!important;border-width:var(--custom-border-width-error, 1.5px)!important}::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none!important}::ng-deep .mat-mdc-select-arrow{border-style:solid!important;border-width:0 2px 2px 0!important;border-right:2px solid!important;content:\"\"!important;display:inline-block!important;padding:3px!important;transform:rotate(45deg)!important;vertical-align:middle!important;width:unset!important;height:unset!important;color:#444!important}::ng-deep .mat-mdc-form-field.mat-focused.mat-primary .mat-mdc-select-arrow{color:#fb0}::ng-deep .mat-mdc-select-arrow svg{display:none!important}::ng-deep .cdk-overlay-pane:not(.mat-mdc-select-panel-above) div.mat-mdc-select-panel{background:#fff!important}::ng-deep div.mat-mdc-select-panel{background:#fff!important}::ng-deep .mat-mdc-option.mdc-list-item{background:#fff!important;color:#444!important;font-weight:400}::ng-deep .mat-mdc-form-field.mat-focused .mat-mdc-select-arrow{color:#fb0!important}::ng-deep .mat-mdc-option:focus.mdc-list-item{background:#fffaeb!important;border-left:4px solid #fb0;font-weight:600;color:#444!important;border-radius:3px}::ng-deep .mat-mdc-option.mat-mdc-option-active.mdc-list-item{background:#fffaeb!important;border-left:4px solid #fb0;font-weight:600;color:#444!important;border-radius:3px}::ng-deep .mat-mdc-option.mdc-list-item{background:var(--custom-select-option-background-color, #fff)!important;color:var(--custom-select-option-font-color, #444)!important;font-weight:var(--custom-select-option-font-weight, 400)!important}::ng-deep .mat-mdc-option:focus.mdc-list-item{background:var(--custom-select-option-background-color-focus, #fffaeb)!important;color:var(--custom-select-option-font-color-focus, #444)!important;font-weight:var(--custom-select-option-font-weight-focus, 600)!important;border-left:var(--custom-select-option-border-left-focus, 4px solid #fb0)!important;border-radius:var(--custom-select-option-border-radius-focus, 3px)!important}::ng-deep .mat-mdc-option.mat-mdc-option-active.mdc-list-item{background:var(--custom-select-option-background-color-focus, #fffaeb)!important;color:var(--custom-select-option-font-color-focus, #444)!important;font-weight:var(--custom-select-option-font-weight-focus, 600)!important;border-left:var(--custom-select-option-border-left-focus, 4px solid #fb0)!important;border-radius:var(--custom-select-option-border-radius-focus, 3px)!important}::ng-deep .mat-mdc-option .mdc-list-item__primary-text{font-size:var(--custom-font-size, 12px)!important}::ng-deep .cdk-overlay-pane:not(.mat-mdc-select-panel-above) div.mat-mdc-select-panel{padding:0!important;background:#fafafa!important}::ng-deep .mat-mdc-option .mdc-list-item__primary-text{font-size:12px!important}::ng-deep .mat-mdc-form-field.mat-focused.mat-primary .mat-select-arrow{color:#fb0}::ng-deep .mat-mdc-select-panel-above div.mat-mdc-select-panel{padding:0!important}::ng-deep .mat-mdc-optgroup-label{background:#f5f5f5;color:#444;font-weight:800}::ng-deep .mat-mdc-autocomplete-panel.mat-mdc-autocomplete-visible{padding:0!important;background:#fff!important}::ng-deep .mat-mdc-option.mdc-list-item--selected:not(.mdc-list-item--disabled):not(.mat-mdc-option-multiple){background:#fffaeb!important;border-left:4px solid #fb0;font-weight:600!important;color:#444!important;border-radius:3px}::ng-deep .mat-mdc-option.mdc-list-item--selected:not(.mdc-list-item--disabled) .mdc-list-item__primary-text{color:unset!important}::ng-deep .mat-mdc-option .mat-pseudo-checkbox-minimal{display:none!important}::ng-deep .mat-mdc-chip-set .mdc-evolution-chip{background-color:#fff9e5!important}::ng-deep .mat-mdc-standard-chip.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--trailing{color:#444!important}::ng-deep .mat-mdc-standard-chip .mdc-evolution-chip__text-label{font-size:12px!important;font-weight:400!important;color:#444!important}::ng-deep .mat-mdc-standard-chip .mdc-evolution-chip__icon--trailing{height:12px!important;width:12px!important;font-size:12px!important}::ng-deep .multi-select .mat-mdc-form-field-type-mat-select:not(.mat-form-field-disabled) .mat-mdc-text-field-wrapper{padding-right:0!important}::ng-deep .mat-mdc-standard-chip{--mdc-chip-outline-width: 1px !important;border-radius:18px!important;--mdc-chip-container-shape-radius: 19px !important;--mdc-chip-outline-color: #ffbb00 !important}::ng-deep .multi-select .mdc-text-field--outlined .mat-mdc-form-field-infix,.mdc-text-field--no-label .mat-mdc-form-field-infix{padding:9px 0 7px}::ng-deep .multi-select .mat-mdc-select-arrow-wrapper{height:37px}::ng-deep .mat-mdc-chip{height:24px!important}::ng-deep .mat-mdc-optgroup-label{display:contents!important}::ng-deep .multiselect-search .mat-mdc-text-field-wrapper{background:#fff!important}::ng-deep .multiselect-search .mdc-text-field__input{color:#444!important}::ng-deep .multiselect-search .mdc-line-ripple--active{opacity:0!important;transform:none!important}::ng-deep .mdc-line-ripple{opacity:0!important;transform:none!important}::ng-deep .mdc-evolution-chip-set__chips{flex-flow:unset!important;overflow-x:scroll!important;scrollbar-width:none!important}::ng-deep .mat-pseudo-checkbox-full.mat-pseudo-checkbox-checked:after{color:#fff!important}::ng-deep .mat-pseudo-checkbox-full.mat-pseudo-checkbox-checked{background-color:#fb0!important;border-radius:4px!important}::ng-deep .mat-pseudo-checkbox-full.mat-pseudo-checkbox-indeterminate{background-color:#fb0!important;border-radius:4px!important}::ng-deep .mat-mdc-option .mat-pseudo-checkbox{border:1px solid #DADADA}::ng-deep .mat-mdc-option.mdc-list-item.mat-mdc-option-multiple.mdc-list-item--selected{background:#fffaeb!important;border-left:4px solid #fb0;font-weight:600;color:#444!important;border-radius:3px}::ng-deep .mat-mdc-form-field .mat-mdc-select-placeholder{color:#8f8f8f!important;font-size:12px!important;vertical-align:sub}*{font-family:mulish!important}.material-icons{font-family:Material Icons!important}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip{margin:2px 0 7px 8px}@media screen and (max-width: 768px){::ng-deep .mat-mdc-form-field .mat-mdc-select-placeholder{font-size:14px!important}::ng-deep .mat-mdc-option .mdc-list-item__primary-text{font-size:var(--custom-font-size, 14px)!important}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-text-field__input{font-size:14px!important}}\n"], dependencies: [{ kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: i3.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: i3.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i6.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatFormFieldModule }, { 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: MatChipsModule }, { kind: "component", type: i6$1.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "component", type: i6$1.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i6$1.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i6$1.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
|
|
1954
1954
|
}
|
|
1955
1955
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MultipleSelectComponent, decorators: [{
|
|
1956
1956
|
type: Component,
|
|
@@ -1967,7 +1967,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
1967
1967
|
useExisting: MultipleSelectComponent,
|
|
1968
1968
|
multi: true
|
|
1969
1969
|
}
|
|
1970
|
-
], template: "<label class=\"field-lable\" *ngIf=\"field() && field()?.isVisible && field().isShowLabel\">{{field()?.label}}<span style=\"color: red;\" *ngIf=\"field() && field()?.validators?.isRequired\">*</span></label>\n<mat-form-field\n appearance=\"outline\"\n class=\"input-full-width full-width w-100 multi-select\"\n *ngIf=\"field() && field()?.isVisible\"\n [ngStyle]=\"{\n'--custom-border-color': field()?.controlStyle?.borderColor ,\n'--custom-border-width': field()?.controlStyle?.borderWidth ,\n'--custom-border-radius': field()?.controlStyle?.borderRadius ,\n'--custom-bg-color': field()?.controlStyle?.background ,\n'--custom-border-color-focus': field()?.controlStyle?.focusBorderColor ,\n'--custom-border-width-focus': field()?.controlStyle?.focusBorderWidth ,\n'--custom-bg-color-focus': field()?.controlStyle?.focusBackground ,\n'--custom-border-color-hover': field()?.controlStyle?.hoverBorderColor ,\n'--custom-border-width-hover': field()?.controlStyle?.hoverBorderWidth ,\n'--custom-border-color-error': field()?.controlStyle?.errorBorderColor ,\n'--custom-border-width-error': field()?.controlStyle?.errorBorderWidth ,\n'--custom-font-size': field()?.controlStyle?.fontSize ,\n'--custom-font-weight': field()?.controlStyle?.fontWeight ,\n'--custom-font-family': field()?.controlStyle?.fontFamily ,\n'--custom-font-color': field()?.controlStyle?.color ,\n'--custom-caret-color': field()?.controlStyle?.caretColor ,\n'--custom-font-color-disabled' : field()?.controlStyle?.disableColor ,\n'--custom-bg-color-disabled' : field()?.controlStyle?.disableBackground ,\n}\"\n>\n @if(reactiveFormControlobject()) {\n <mat-select\n multiple\n [id]=\"field()?.fieldName\"\n [attr.name]=\"field()?.fieldName\"\n [value]=\"inputValue\"\n [required]=\"field()?.validators?.isRequired\"\n [placeholder]=\"field()?.placeHolder\"\n [disabled]=\"field()?.isDisable\"\n (openedChange)=\"onSelectOpened($event)\"\n (selectionChange)=\"selectionChanged($event)\"\n [formControl]=\"reactiveFormControlobject()\"\n >\n <mat-select-trigger>\n <mat-chip-grid>\n @for (option of inputValue; track option) {\n <mat-chip-row [removable]=\"true\" (removed)=\"removeItem(option)\">\n {{ showLabel(option) }}\n <mat-icon matChipRemove>close</mat-icon>\n </mat-chip-row>\n }\n <mat-chip *ngIf=\"remainingCount > 0\"> +{{ remainingCount }} </mat-chip>\n </mat-chip-grid>\n </mat-select-trigger>\n @for (option of field()?.options; track option.label) {\n <mat-option [value]=\"option.value\">\n {{ option.label }} <img *ngIf=\"option.image\" [src]=\"option.image\" alt=\"\" style=\"width:20px; height:20px; float: inline-end;\" />\n </mat-option>\n }\n </mat-select>\n }@else {\n <mat-select\n multiple\n [id]=\"field()?.fieldName\"\n [attr.name]=\"field()?.fieldName\"\n [value]=\"inputValue\"\n [required]=\"field()?.validators?.isRequired\"\n [placeholder]=\"field()?.placeHolder\"\n [disabled]=\"field()?.isDisable\"\n (openedChange)=\"onSelectOpened($event)\"\n (selectionChange)=\"selectionChanged($event)\"\n >\n <mat-select-trigger>\n <mat-chip-grid>\n @for (option of inputValue; track option) {\n <mat-chip-row [removable]=\"true\" (removed)=\"removeItem(option)\">\n {{ showLabel(option) }}\n <mat-icon matChipRemove>close</mat-icon>\n </mat-chip-row>\n }\n <mat-chip *ngIf=\"remainingCount > 0\"> +{{ remainingCount }} </mat-chip>\n </mat-chip-grid>\n </mat-select-trigger>\n @for (option of field()?.options; track option.label) {\n <mat-option [value]=\"option.value\">\n {{ option.label }} <img *ngIf=\"option.image\" [src]=\"option.image\" alt=\"\" style=\"width:20px; height:20px; float: inline-end;\" />\n </mat-option>\n }\n </mat-select>\n }\n\n <mat-error *ngIf=\"false\">\n {{ field()?.validators?.requiredMessage }}\n </mat-error>\n</mat-form-field>\n", styles: [".field-lable{font-size:12px!important;font-weight:700!important;color:#444!important;margin-bottom:0!important}.error-message{color:red}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mat-mdc-notch-piece{border-color:var(--custom-border-color-focus, #ffbb00)!important;border-width:var(--custom-border-width-focus, 1.5px)!important}::ng-deep .mat-mdc-form-field{background-color:var(--custom-bg-color, #ffffff)!important;border-radius:var(--custom-border-radius , 4px)!important}::ng-deep .mat-mdc-option .mdc-list-item__primary-text{width:100%!important}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__leading{border-color:var(--custom-border-color-hover, #ffbb00)!important;border-width:var(--custom-border-width-hover, 1.5px)!important}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__notch{border-color:var(--custom-border-color-hover, #ffbb00)!important;border-width:var(--custom-border-width-hover, 1.5px)!important}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__trailing{border-color:var(--custom-border-color-hover, #ffbb00)!important;border-width:var(--custom-border-width-hover, 1.5px)!important}::ng-deep .mdc-text-field--outlined .mat-mdc-notch-piece{border-color:var(--custom-border-color, #dddddd)!important;border-width:var(--custom-border-width, 1.5px)!important}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-text-field__input{caret-color:var(--custom-caret-color, #ffbb00)!important;font-size:12px!important;font-weight:var(--custom-font-weight, 400)!important;font-family:var(--custom-font-family, \"Mulish\")!important;color:var(--custom-font-color, #444444)!important}::ng-deep .mat-form-field-invalid .mdc-text-field--outlined .mat-mdc-notch-piece{border-color:var(--custom-border-color-error, red)!important;border-width:var(--custom-border-width-error, 1.5px)!important}::ng-deep .mat-mdc-form-field.mat-form-field-disabled{background:var(--custom-bg-color-disabled, #ECECEC)!important}::ng-deep .mdc-text-field--outlined.mdc-text-field--disabled .mdc-text-field__input{color:var(--custom-font-color-disabled, #999999)!important}::ng-deep .mdc-label{color:var(--custom-font-color, #444)!important;font-size:var(--custom-font-size, 16px)!important;font-weight:var(--custom-font-weight, 400)!important;font-family:var(--custom-font-family, \"Mulish\")!important}::placeholder{color:#8f8f8f!important;font-size:12px!important}::ng-deep .mat-mdc-form-field-hint-wrapper{padding:0!important}::ng-deep .mat-mdc-form-field-error-wrapper{padding:0!important}::ng-deep .mat-mdc-form-field-error{color:#e00!important;font-size:12px;font-weight:500;font-family:Mulish!important;letter-spacing:0}::ng-deep .mdc-text-field--outlined{--mdc-outlined-text-field-container-shape: var(--custom-border-radius , 4px) !important}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--invalid .mat-mdc-notch-piece{border-color:var(--custom-border-color-error, red)!important;border-width:var(--custom-border-width-error, 1.5px)!important}::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none!important}::ng-deep .mat-mdc-select-arrow{border-style:solid!important;border-width:0 2px 2px 0!important;border-right:2px solid!important;content:\"\"!important;display:inline-block!important;padding:3px!important;transform:rotate(45deg)!important;vertical-align:middle!important;width:unset!important;height:unset!important;color:#444!important}::ng-deep .mat-mdc-form-field.mat-focused.mat-primary .mat-mdc-select-arrow{color:#fb0}::ng-deep .mat-mdc-select-arrow svg{display:none!important}::ng-deep .cdk-overlay-pane:not(.mat-mdc-select-panel-above) div.mat-mdc-select-panel{background:#fff!important}::ng-deep div.mat-mdc-select-panel{background:#fff!important}::ng-deep .mat-mdc-option.mdc-list-item{background:#fff!important;color:#444!important;font-weight:400}::ng-deep .mat-mdc-form-field.mat-focused .mat-mdc-select-arrow{color:#fb0!important}::ng-deep .mat-mdc-option:focus.mdc-list-item{background:#fffaeb!important;border-left:4px solid #fb0;font-weight:600;color:#444!important;border-radius:3px}::ng-deep .mat-mdc-option.mat-mdc-option-active.mdc-list-item{background:#fffaeb!important;border-left:4px solid #fb0;font-weight:600;color:#444!important;border-radius:3px}::ng-deep .mat-mdc-option.mdc-list-item{background:var(--custom-select-option-background-color, #fff)!important;color:var(--custom-select-option-font-color, #444)!important;font-weight:var(--custom-select-option-font-weight, 400)!important}::ng-deep .mat-mdc-option:focus.mdc-list-item{background:var(--custom-select-option-background-color-focus, #fffaeb)!important;color:var(--custom-select-option-font-color-focus, #444)!important;font-weight:var(--custom-select-option-font-weight-focus, 600)!important;border-left:var(--custom-select-option-border-left-focus, 4px solid #fb0)!important;border-radius:var(--custom-select-option-border-radius-focus, 3px)!important}::ng-deep .mat-mdc-option.mat-mdc-option-active.mdc-list-item{background:var(--custom-select-option-background-color-focus, #fffaeb)!important;color:var(--custom-select-option-font-color-focus, #444)!important;font-weight:var(--custom-select-option-font-weight-focus, 600)!important;border-left:var(--custom-select-option-border-left-focus, 4px solid #fb0)!important;border-radius:var(--custom-select-option-border-radius-focus, 3px)!important}::ng-deep .mat-mdc-option .mdc-list-item__primary-text{font-size:var(--custom-font-size, 12px)!important}::ng-deep .cdk-overlay-pane:not(.mat-mdc-select-panel-above) div.mat-mdc-select-panel{padding:0!important;background:#fafafa!important}::ng-deep .mat-mdc-option .mdc-list-item__primary-text{font-size:12px!important}::ng-deep .mat-mdc-form-field.mat-focused.mat-primary .mat-select-arrow{color:#fb0}::ng-deep .mat-mdc-select-panel-above div.mat-mdc-select-panel{padding:0!important}::ng-deep .mat-mdc-optgroup-label{background:#f5f5f5;color:#444;font-weight:800}::ng-deep .mat-mdc-autocomplete-panel.mat-mdc-autocomplete-visible{padding:0!important;background:#fff!important}::ng-deep .mat-mdc-option.mdc-list-item--selected:not(.mdc-list-item--disabled):not(.mat-mdc-option-multiple){background:#fffaeb!important;border-left:4px solid #fb0;font-weight:600!important;color:#444!important;border-radius:3px}::ng-deep .mat-mdc-option.mdc-list-item--selected:not(.mdc-list-item--disabled) .mdc-list-item__primary-text{color:unset!important}::ng-deep .mat-mdc-option .mat-pseudo-checkbox-minimal{display:none!important}::ng-deep .mat-mdc-chip-set .mdc-evolution-chip{background-color:#fff9e5!important}::ng-deep .mat-mdc-standard-chip.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--trailing{color:#444!important}::ng-deep .mat-mdc-standard-chip .mdc-evolution-chip__text-label{font-size:12px!important;font-weight:400!important;color:#444!important}::ng-deep .mat-mdc-standard-chip .mdc-evolution-chip__icon--trailing{height:12px!important;width:12px!important;font-size:12px!important}::ng-deep .multi-select .mat-mdc-form-field-type-mat-select:not(.mat-form-field-disabled) .mat-mdc-text-field-wrapper{padding-right:0!important}::ng-deep .mat-mdc-standard-chip{--mdc-chip-outline-width: 1px !important;border-radius:18px!important;--mdc-chip-container-shape-radius: 19px !important;--mdc-chip-outline-color: #ffbb00 !important}::ng-deep .multi-select .mdc-text-field--outlined .mat-mdc-form-field-infix,.mdc-text-field--no-label .mat-mdc-form-field-infix{padding:9px 0 7px}::ng-deep .multi-select .mat-mdc-select-arrow-wrapper{height:37px}::ng-deep .mat-mdc-chip{height:24px!important}::ng-deep .mat-mdc-optgroup-label{display:contents!important}::ng-deep .multiselect-search .mat-mdc-text-field-wrapper{background:#fff!important}::ng-deep .multiselect-search .mdc-text-field__input{color:#444!important}::ng-deep .multiselect-search .mdc-line-ripple--active{opacity:0!important;transform:none!important}::ng-deep .mdc-line-ripple{opacity:0!important;transform:none!important}::ng-deep .mdc-evolution-chip-set__chips{flex-flow:unset!important;overflow-x:scroll!important;scrollbar-width:none!important}::ng-deep .mat-pseudo-checkbox-full.mat-pseudo-checkbox-checked:after{color:#fff!important}::ng-deep .mat-pseudo-checkbox-full.mat-pseudo-checkbox-checked{background-color:#fb0!important;border-radius:4px!important}::ng-deep .mat-pseudo-checkbox-full.mat-pseudo-checkbox-indeterminate{background-color:#fb0!important;border-radius:4px!important}::ng-deep .mat-mdc-option .mat-pseudo-checkbox{border:1px solid #DADADA}::ng-deep .mat-mdc-option.mdc-list-item.mat-mdc-option-multiple.mdc-list-item--selected{background:#fffaeb!important;border-left:4px solid #fb0;font-weight:600;color:#444!important;border-radius:3px}::ng-deep .mat-mdc-form-field .mat-mdc-select-placeholder{color:#8f8f8f!important;font-size:12px!important;vertical-align:sub}*{font-family:mulish!important}.material-icons{font-family:Material Icons!important}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip{margin:2px 0 7px 8px}@media screen and (max-width: 768px){::ng-deep .mat-mdc-form-field .mat-mdc-select-placeholder{font-size:14px!important}::ng-deep .mat-mdc-option .mdc-list-item__primary-text{font-size:var(--custom-font-size, 14px)!important}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-text-field__input{font-size:14px!important}}\n"] }]
|
|
1970
|
+
], template: "<label class=\"field-lable\" *ngIf=\"field() && field()?.isVisible && field().isShowLabel\">{{field()?.label}}<span style=\"color: red;\" *ngIf=\"field() && field()?.validators?.isRequired\">*</span></label>\n<mat-form-field\n appearance=\"outline\"\n class=\"input-full-width full-width w-100 multi-select\"\n *ngIf=\"field() && field()?.isVisible\"\n [ngStyle]=\"{\n'--custom-border-color': field()?.controlStyle?.borderColor ,\n'--custom-border-width': field()?.controlStyle?.borderWidth ,\n'--custom-border-radius': field()?.controlStyle?.borderRadius ,\n'--custom-bg-color': field()?.controlStyle?.background ,\n'--custom-border-color-focus': field()?.controlStyle?.focusBorderColor ,\n'--custom-border-width-focus': field()?.controlStyle?.focusBorderWidth ,\n'--custom-bg-color-focus': field()?.controlStyle?.focusBackground ,\n'--custom-border-color-hover': field()?.controlStyle?.hoverBorderColor ,\n'--custom-border-width-hover': field()?.controlStyle?.hoverBorderWidth ,\n'--custom-border-color-error': field()?.controlStyle?.errorBorderColor ,\n'--custom-border-width-error': field()?.controlStyle?.errorBorderWidth ,\n'--custom-font-size': field()?.controlStyle?.fontSize ,\n'--custom-font-weight': field()?.controlStyle?.fontWeight ,\n'--custom-font-family': field()?.controlStyle?.fontFamily ,\n'--custom-font-color': field()?.controlStyle?.color ,\n'--custom-caret-color': field()?.controlStyle?.caretColor ,\n'--custom-font-color-disabled' : field()?.controlStyle?.disableColor ,\n'--custom-bg-color-disabled' : field()?.controlStyle?.disableBackground ,\n}\"\n>\n @if(reactiveFormControlobject()) {\n <mat-select\n multiple\n [id]=\"field()?.fieldName\"\n [attr.name]=\"field()?.fieldName\"\n [value]=\"inputValue\"\n [required]=\"field()?.validators?.isRequired\"\n [placeholder]=\"field()?.placeHolder\"\n [disabled]=\"field()?.isDisable\"\n (openedChange)=\"onSelectOpened($event)\"\n (selectionChange)=\"selectionChanged($event)\"\n [formControl]=\"reactiveFormControlobject()\"\n >\n <mat-select-trigger>\n <mat-chip-grid>\n @for (option of inputValue; track option) {\n <mat-chip-row [removable]=\"true\" (removed)=\"removeItem(option)\">\n {{ showLabel(option) }}\n <mat-icon matChipRemove>close</mat-icon>\n </mat-chip-row>\n }\n <mat-chip *ngIf=\"remainingCount > 0\"> +{{ remainingCount }} </mat-chip>\n </mat-chip-grid>\n </mat-select-trigger>\n @for (option of field()?.options; track option.label) {\n <mat-option [value]=\"option.value\" [id]=\"field()?.fieldName + '_' + option.value\" [attr.name]=\"field()?.fieldName + '_' + option.value\">\n {{ option.label }} <img *ngIf=\"option.image\" [src]=\"option.image\" alt=\"\" style=\"width:20px; height:20px; float: inline-end;\" />\n </mat-option>\n }\n </mat-select>\n }@else {\n <mat-select\n multiple\n [id]=\"field()?.fieldName\"\n [attr.name]=\"field()?.fieldName\"\n [value]=\"inputValue\"\n [required]=\"field()?.validators?.isRequired\"\n [placeholder]=\"field()?.placeHolder\"\n [disabled]=\"field()?.isDisable\"\n (openedChange)=\"onSelectOpened($event)\"\n (selectionChange)=\"selectionChanged($event)\"\n >\n <mat-select-trigger>\n <mat-chip-grid>\n @for (option of inputValue; track option) {\n <mat-chip-row [removable]=\"true\" (removed)=\"removeItem(option)\">\n {{ showLabel(option) }}\n <mat-icon matChipRemove>close</mat-icon>\n </mat-chip-row>\n }\n <mat-chip *ngIf=\"remainingCount > 0\"> +{{ remainingCount }} </mat-chip>\n </mat-chip-grid>\n </mat-select-trigger>\n @for (option of field()?.options; track option.label) {\n <mat-option [value]=\"option.value\" [id]=\"field()?.fieldName + '_' + option.value\" [attr.name]=\"field()?.fieldName + '_' + option.value\">\n {{ option.label }} <img *ngIf=\"option.image\" [src]=\"option.image\" alt=\"\" style=\"width:20px; height:20px; float: inline-end;\" />\n </mat-option>\n }\n </mat-select>\n }\n\n <mat-error *ngIf=\"false\">\n {{ field()?.validators?.requiredMessage }}\n </mat-error>\n</mat-form-field>\n", styles: [".field-lable{font-size:12px!important;font-weight:700!important;color:#444!important;margin-bottom:0!important}.error-message{color:red}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mat-mdc-notch-piece{border-color:var(--custom-border-color-focus, #ffbb00)!important;border-width:var(--custom-border-width-focus, 1.5px)!important}::ng-deep .mat-mdc-form-field{background-color:var(--custom-bg-color, #ffffff)!important;border-radius:var(--custom-border-radius , 4px)!important}::ng-deep .mat-mdc-option .mdc-list-item__primary-text{width:100%!important}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__leading{border-color:var(--custom-border-color-hover, #ffbb00)!important;border-width:var(--custom-border-width-hover, 1.5px)!important}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__notch{border-color:var(--custom-border-color-hover, #ffbb00)!important;border-width:var(--custom-border-width-hover, 1.5px)!important}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__trailing{border-color:var(--custom-border-color-hover, #ffbb00)!important;border-width:var(--custom-border-width-hover, 1.5px)!important}::ng-deep .mdc-text-field--outlined .mat-mdc-notch-piece{border-color:var(--custom-border-color, #dddddd)!important;border-width:var(--custom-border-width, 1.5px)!important}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-text-field__input{caret-color:var(--custom-caret-color, #ffbb00)!important;font-size:12px!important;font-weight:var(--custom-font-weight, 400)!important;font-family:var(--custom-font-family, \"Mulish\")!important;color:var(--custom-font-color, #444444)!important}::ng-deep .mat-form-field-invalid .mdc-text-field--outlined .mat-mdc-notch-piece{border-color:var(--custom-border-color-error, red)!important;border-width:var(--custom-border-width-error, 1.5px)!important}::ng-deep .mat-mdc-form-field.mat-form-field-disabled{background:var(--custom-bg-color-disabled, #ECECEC)!important}::ng-deep .mdc-text-field--outlined.mdc-text-field--disabled .mdc-text-field__input{color:var(--custom-font-color-disabled, #999999)!important}::ng-deep .mdc-label{color:var(--custom-font-color, #444)!important;font-size:var(--custom-font-size, 16px)!important;font-weight:var(--custom-font-weight, 400)!important;font-family:var(--custom-font-family, \"Mulish\")!important}::placeholder{color:#8f8f8f!important;font-size:12px!important}::ng-deep .mat-mdc-form-field-hint-wrapper{padding:0!important}::ng-deep .mat-mdc-form-field-error-wrapper{padding:0!important}::ng-deep .mat-mdc-form-field-error{color:#e00!important;font-size:12px;font-weight:500;font-family:Mulish!important;letter-spacing:0}::ng-deep .mdc-text-field--outlined{--mdc-outlined-text-field-container-shape: var(--custom-border-radius , 4px) !important}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--invalid .mat-mdc-notch-piece{border-color:var(--custom-border-color-error, red)!important;border-width:var(--custom-border-width-error, 1.5px)!important}::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none!important}::ng-deep .mat-mdc-select-arrow{border-style:solid!important;border-width:0 2px 2px 0!important;border-right:2px solid!important;content:\"\"!important;display:inline-block!important;padding:3px!important;transform:rotate(45deg)!important;vertical-align:middle!important;width:unset!important;height:unset!important;color:#444!important}::ng-deep .mat-mdc-form-field.mat-focused.mat-primary .mat-mdc-select-arrow{color:#fb0}::ng-deep .mat-mdc-select-arrow svg{display:none!important}::ng-deep .cdk-overlay-pane:not(.mat-mdc-select-panel-above) div.mat-mdc-select-panel{background:#fff!important}::ng-deep div.mat-mdc-select-panel{background:#fff!important}::ng-deep .mat-mdc-option.mdc-list-item{background:#fff!important;color:#444!important;font-weight:400}::ng-deep .mat-mdc-form-field.mat-focused .mat-mdc-select-arrow{color:#fb0!important}::ng-deep .mat-mdc-option:focus.mdc-list-item{background:#fffaeb!important;border-left:4px solid #fb0;font-weight:600;color:#444!important;border-radius:3px}::ng-deep .mat-mdc-option.mat-mdc-option-active.mdc-list-item{background:#fffaeb!important;border-left:4px solid #fb0;font-weight:600;color:#444!important;border-radius:3px}::ng-deep .mat-mdc-option.mdc-list-item{background:var(--custom-select-option-background-color, #fff)!important;color:var(--custom-select-option-font-color, #444)!important;font-weight:var(--custom-select-option-font-weight, 400)!important}::ng-deep .mat-mdc-option:focus.mdc-list-item{background:var(--custom-select-option-background-color-focus, #fffaeb)!important;color:var(--custom-select-option-font-color-focus, #444)!important;font-weight:var(--custom-select-option-font-weight-focus, 600)!important;border-left:var(--custom-select-option-border-left-focus, 4px solid #fb0)!important;border-radius:var(--custom-select-option-border-radius-focus, 3px)!important}::ng-deep .mat-mdc-option.mat-mdc-option-active.mdc-list-item{background:var(--custom-select-option-background-color-focus, #fffaeb)!important;color:var(--custom-select-option-font-color-focus, #444)!important;font-weight:var(--custom-select-option-font-weight-focus, 600)!important;border-left:var(--custom-select-option-border-left-focus, 4px solid #fb0)!important;border-radius:var(--custom-select-option-border-radius-focus, 3px)!important}::ng-deep .mat-mdc-option .mdc-list-item__primary-text{font-size:var(--custom-font-size, 12px)!important}::ng-deep .cdk-overlay-pane:not(.mat-mdc-select-panel-above) div.mat-mdc-select-panel{padding:0!important;background:#fafafa!important}::ng-deep .mat-mdc-option .mdc-list-item__primary-text{font-size:12px!important}::ng-deep .mat-mdc-form-field.mat-focused.mat-primary .mat-select-arrow{color:#fb0}::ng-deep .mat-mdc-select-panel-above div.mat-mdc-select-panel{padding:0!important}::ng-deep .mat-mdc-optgroup-label{background:#f5f5f5;color:#444;font-weight:800}::ng-deep .mat-mdc-autocomplete-panel.mat-mdc-autocomplete-visible{padding:0!important;background:#fff!important}::ng-deep .mat-mdc-option.mdc-list-item--selected:not(.mdc-list-item--disabled):not(.mat-mdc-option-multiple){background:#fffaeb!important;border-left:4px solid #fb0;font-weight:600!important;color:#444!important;border-radius:3px}::ng-deep .mat-mdc-option.mdc-list-item--selected:not(.mdc-list-item--disabled) .mdc-list-item__primary-text{color:unset!important}::ng-deep .mat-mdc-option .mat-pseudo-checkbox-minimal{display:none!important}::ng-deep .mat-mdc-chip-set .mdc-evolution-chip{background-color:#fff9e5!important}::ng-deep .mat-mdc-standard-chip.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--trailing{color:#444!important}::ng-deep .mat-mdc-standard-chip .mdc-evolution-chip__text-label{font-size:12px!important;font-weight:400!important;color:#444!important}::ng-deep .mat-mdc-standard-chip .mdc-evolution-chip__icon--trailing{height:12px!important;width:12px!important;font-size:12px!important}::ng-deep .multi-select .mat-mdc-form-field-type-mat-select:not(.mat-form-field-disabled) .mat-mdc-text-field-wrapper{padding-right:0!important}::ng-deep .mat-mdc-standard-chip{--mdc-chip-outline-width: 1px !important;border-radius:18px!important;--mdc-chip-container-shape-radius: 19px !important;--mdc-chip-outline-color: #ffbb00 !important}::ng-deep .multi-select .mdc-text-field--outlined .mat-mdc-form-field-infix,.mdc-text-field--no-label .mat-mdc-form-field-infix{padding:9px 0 7px}::ng-deep .multi-select .mat-mdc-select-arrow-wrapper{height:37px}::ng-deep .mat-mdc-chip{height:24px!important}::ng-deep .mat-mdc-optgroup-label{display:contents!important}::ng-deep .multiselect-search .mat-mdc-text-field-wrapper{background:#fff!important}::ng-deep .multiselect-search .mdc-text-field__input{color:#444!important}::ng-deep .multiselect-search .mdc-line-ripple--active{opacity:0!important;transform:none!important}::ng-deep .mdc-line-ripple{opacity:0!important;transform:none!important}::ng-deep .mdc-evolution-chip-set__chips{flex-flow:unset!important;overflow-x:scroll!important;scrollbar-width:none!important}::ng-deep .mat-pseudo-checkbox-full.mat-pseudo-checkbox-checked:after{color:#fff!important}::ng-deep .mat-pseudo-checkbox-full.mat-pseudo-checkbox-checked{background-color:#fb0!important;border-radius:4px!important}::ng-deep .mat-pseudo-checkbox-full.mat-pseudo-checkbox-indeterminate{background-color:#fb0!important;border-radius:4px!important}::ng-deep .mat-mdc-option .mat-pseudo-checkbox{border:1px solid #DADADA}::ng-deep .mat-mdc-option.mdc-list-item.mat-mdc-option-multiple.mdc-list-item--selected{background:#fffaeb!important;border-left:4px solid #fb0;font-weight:600;color:#444!important;border-radius:3px}::ng-deep .mat-mdc-form-field .mat-mdc-select-placeholder{color:#8f8f8f!important;font-size:12px!important;vertical-align:sub}*{font-family:mulish!important}.material-icons{font-family:Material Icons!important}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip{margin:2px 0 7px 8px}@media screen and (max-width: 768px){::ng-deep .mat-mdc-form-field .mat-mdc-select-placeholder{font-size:14px!important}::ng-deep .mat-mdc-option .mdc-list-item__primary-text{font-size:var(--custom-font-size, 14px)!important}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-text-field__input{font-size:14px!important}}\n"] }]
|
|
1971
1971
|
}], ctorParameters: () => [{ type: MasterControlService }], propDecorators: { selectionChange: [{
|
|
1972
1972
|
type: Output
|
|
1973
1973
|
}] } });
|
|
@@ -3800,6 +3800,7 @@ class MedialQuestionsComponent {
|
|
|
3800
3800
|
ngZone;
|
|
3801
3801
|
masterService;
|
|
3802
3802
|
questionsValueChange = new EventEmitter();
|
|
3803
|
+
triggerValidation;
|
|
3803
3804
|
medialQuestionResponse = input();
|
|
3804
3805
|
personUWOpenQuoteResponse = input();
|
|
3805
3806
|
defaultValues = input();
|
|
@@ -3929,7 +3930,13 @@ class MedialQuestionsComponent {
|
|
|
3929
3930
|
console.log('medialQuestionResponseeeeee', this.medialQuestionResponse());
|
|
3930
3931
|
console.log('persontype', this.personType());
|
|
3931
3932
|
}
|
|
3932
|
-
ngOnInit() {
|
|
3933
|
+
ngOnInit() {
|
|
3934
|
+
if (this.triggerValidation) {
|
|
3935
|
+
this.triggerValidation.subscribe(() => {
|
|
3936
|
+
this.validateMedicalQuestions(true);
|
|
3937
|
+
});
|
|
3938
|
+
}
|
|
3939
|
+
}
|
|
3933
3940
|
ngOnChanges(changes) {
|
|
3934
3941
|
if (((changes['medialQuestionResponse']) && !this.checkIfValueIsEmpty(changes['medialQuestionResponse'].currentValue)) ||
|
|
3935
3942
|
((changes['preparePersonUwQuestionsObj']) && !this.checkIfValueIsEmpty(changes['preparePersonUwQuestionsObj'].currentValue))) {
|
|
@@ -4936,7 +4943,7 @@ class MedialQuestionsComponent {
|
|
|
4936
4943
|
: questionObj['questionType'] === 'DOCUPLOAD'
|
|
4937
4944
|
? 'file'
|
|
4938
4945
|
: '',
|
|
4939
|
-
fieldName: questionObj['
|
|
4946
|
+
fieldName: questionObj['questionId'],
|
|
4940
4947
|
isDisable,
|
|
4941
4948
|
label: questionObj['questionText'],
|
|
4942
4949
|
placeHolder: questionObj['questionText'],
|
|
@@ -5820,7 +5827,7 @@ class MedialQuestionsComponent {
|
|
|
5820
5827
|
});
|
|
5821
5828
|
return tokenValue;
|
|
5822
5829
|
}
|
|
5823
|
-
validateMedicalQuestions() {
|
|
5830
|
+
validateMedicalQuestions(focusOnInValid = false) {
|
|
5824
5831
|
let isValid = true;
|
|
5825
5832
|
let validationMessage = '';
|
|
5826
5833
|
this.questionList.forEach((singleSection) => {
|
|
@@ -5841,6 +5848,10 @@ class MedialQuestionsComponent {
|
|
|
5841
5848
|
this.checkIfValueIsEmpty(this.personUwAnswers['medicalQuestionsInchesInput']))) {
|
|
5842
5849
|
isValid = false;
|
|
5843
5850
|
validationMessage = `Please enter Height in Feet and Inches`;
|
|
5851
|
+
if (focusOnInValid) {
|
|
5852
|
+
let questionId = 'medicalQuestionsHeightInput';
|
|
5853
|
+
this.focusToElement(questionId);
|
|
5854
|
+
}
|
|
5844
5855
|
// if (this.sharedService.isMandatoryField && !savedraft && redirect) {
|
|
5845
5856
|
// if (this.sharedService.selectedQuestionTab !== singlePersonObj['role']) {
|
|
5846
5857
|
// this.sharedService.selectedQuestionTab = singlePersonObj['role'];
|
|
@@ -5869,6 +5880,10 @@ class MedialQuestionsComponent {
|
|
|
5869
5880
|
isValid) {
|
|
5870
5881
|
isValid = false;
|
|
5871
5882
|
validationMessage = `Please enter Height in centimeter`;
|
|
5883
|
+
if (focusOnInValid) {
|
|
5884
|
+
let questionId = 'medicalQuestionsHeightInput';
|
|
5885
|
+
this.focusToElement(questionId);
|
|
5886
|
+
}
|
|
5872
5887
|
}
|
|
5873
5888
|
}
|
|
5874
5889
|
singleSection['questions'].forEach((singleQuestionObj) => {
|
|
@@ -5892,6 +5907,10 @@ class MedialQuestionsComponent {
|
|
|
5892
5907
|
isValid) {
|
|
5893
5908
|
validationMessage = `Please enter all the details in ${singleSection['sectionName']}`;
|
|
5894
5909
|
isValid = false;
|
|
5910
|
+
if (focusOnInValid) {
|
|
5911
|
+
let questionId = singleQuestionObj['questionId'];
|
|
5912
|
+
this.focusToElement(questionId);
|
|
5913
|
+
}
|
|
5895
5914
|
}
|
|
5896
5915
|
// if (
|
|
5897
5916
|
// singleQuestionObj['questionType'] === 'PASSPORT_UPLOAD' &&
|
|
@@ -5951,6 +5970,10 @@ class MedialQuestionsComponent {
|
|
|
5951
5970
|
) {
|
|
5952
5971
|
isValid = false;
|
|
5953
5972
|
validationMessage = `Please enter all the details in ${singleSection['sectionName']}`;
|
|
5973
|
+
if (focusOnInValid) {
|
|
5974
|
+
let questionId = singleQuestionObj['questionId'];
|
|
5975
|
+
this.focusToElement(questionId);
|
|
5976
|
+
}
|
|
5954
5977
|
}
|
|
5955
5978
|
}
|
|
5956
5979
|
// validation for medical sub questions
|
|
@@ -6200,8 +6223,93 @@ class MedialQuestionsComponent {
|
|
|
6200
6223
|
}
|
|
6201
6224
|
this.removeSubQuestionValues();
|
|
6202
6225
|
}
|
|
6226
|
+
focusToElement(elementId) {
|
|
6227
|
+
const element = document.getElementById(elementId);
|
|
6228
|
+
const headerOffset = 120;
|
|
6229
|
+
if (!element) {
|
|
6230
|
+
return;
|
|
6231
|
+
}
|
|
6232
|
+
const scrollContainer = this.getScrollableParent(element);
|
|
6233
|
+
// Wait for the next frame so layout is settled before scrolling.
|
|
6234
|
+
requestAnimationFrame(() => {
|
|
6235
|
+
const elementRect = element.getBoundingClientRect();
|
|
6236
|
+
const containerRect = scrollContainer === window
|
|
6237
|
+
? { top: 0 }
|
|
6238
|
+
: scrollContainer.getBoundingClientRect();
|
|
6239
|
+
const currentScroll = scrollContainer === window
|
|
6240
|
+
? window.pageYOffset || document.documentElement.scrollTop || 0
|
|
6241
|
+
: scrollContainer.scrollTop;
|
|
6242
|
+
const targetPosition = elementRect.top - containerRect.top + currentScroll - headerOffset;
|
|
6243
|
+
if (scrollContainer === window) {
|
|
6244
|
+
window.scrollTo({ top: targetPosition, behavior: 'smooth' });
|
|
6245
|
+
}
|
|
6246
|
+
else {
|
|
6247
|
+
scrollContainer.scrollTo({
|
|
6248
|
+
top: targetPosition,
|
|
6249
|
+
behavior: 'smooth',
|
|
6250
|
+
});
|
|
6251
|
+
}
|
|
6252
|
+
element.focus({ preventScroll: true });
|
|
6253
|
+
element.classList.add('blink_me', 'invalid-field-one-ui');
|
|
6254
|
+
// Remove blink animation after duration
|
|
6255
|
+
setTimeout(() => {
|
|
6256
|
+
element.classList.remove('blink_me');
|
|
6257
|
+
}, 3500);
|
|
6258
|
+
// Remove invalid-field-one-ui class when user interacts with the field
|
|
6259
|
+
const removeInvalidClass = (event) => {
|
|
6260
|
+
element.classList.remove('invalid-field-one-ui');
|
|
6261
|
+
// Clean up all event listeners from main element
|
|
6262
|
+
element.removeEventListener('input', removeInvalidClass);
|
|
6263
|
+
element.removeEventListener('change', removeInvalidClass);
|
|
6264
|
+
element.removeEventListener('click', removeInvalidClass, true);
|
|
6265
|
+
element.removeEventListener('ngModelChange', removeInvalidClass);
|
|
6266
|
+
// Clean up event listeners from child radio/checkbox inputs
|
|
6267
|
+
const radioInputs = element.querySelectorAll('input[type="radio"]');
|
|
6268
|
+
const checkboxInputs = element.querySelectorAll('input[type="checkbox"]');
|
|
6269
|
+
radioInputs.forEach((radio) => {
|
|
6270
|
+
radio.removeEventListener('change', removeInvalidClass);
|
|
6271
|
+
radio.removeEventListener('click', removeInvalidClass);
|
|
6272
|
+
});
|
|
6273
|
+
checkboxInputs.forEach((checkbox) => {
|
|
6274
|
+
checkbox.removeEventListener('change', removeInvalidClass);
|
|
6275
|
+
checkbox.removeEventListener('click', removeInvalidClass);
|
|
6276
|
+
});
|
|
6277
|
+
};
|
|
6278
|
+
// For textbox - triggers on typing
|
|
6279
|
+
element.addEventListener('input', removeInvalidClass);
|
|
6280
|
+
// For select dropdown - triggers on value change
|
|
6281
|
+
element.addEventListener('change', removeInvalidClass);
|
|
6282
|
+
// For direct click on the element - use capture phase to catch child events
|
|
6283
|
+
element.addEventListener('click', removeInvalidClass, true);
|
|
6284
|
+
// For Angular ngModel changes
|
|
6285
|
+
element.addEventListener('ngModelChange', removeInvalidClass);
|
|
6286
|
+
// Handle radio buttons within the element (common in Angular forms)
|
|
6287
|
+
const radioInputs = element.querySelectorAll('input[type="radio"]');
|
|
6288
|
+
radioInputs.forEach((radio) => {
|
|
6289
|
+
radio.addEventListener('change', removeInvalidClass);
|
|
6290
|
+
radio.addEventListener('click', removeInvalidClass);
|
|
6291
|
+
});
|
|
6292
|
+
// Handle checkboxes within the element (for multi-select)
|
|
6293
|
+
const checkboxInputs = element.querySelectorAll('input[type="checkbox"]');
|
|
6294
|
+
checkboxInputs.forEach((checkbox) => {
|
|
6295
|
+
checkbox.addEventListener('change', removeInvalidClass);
|
|
6296
|
+
checkbox.addEventListener('click', removeInvalidClass);
|
|
6297
|
+
});
|
|
6298
|
+
});
|
|
6299
|
+
}
|
|
6300
|
+
getScrollableParent(node) {
|
|
6301
|
+
let parent = node?.parentElement;
|
|
6302
|
+
while (parent) {
|
|
6303
|
+
const overflowY = window.getComputedStyle(parent).overflowY;
|
|
6304
|
+
if (overflowY === 'auto' || overflowY === 'scroll') {
|
|
6305
|
+
return parent;
|
|
6306
|
+
}
|
|
6307
|
+
parent = parent.parentElement;
|
|
6308
|
+
}
|
|
6309
|
+
return window;
|
|
6310
|
+
}
|
|
6203
6311
|
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 });
|
|
6204
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: MedialQuestionsComponent, isStandalone: true, selector: "lib-medial-questions", inputs: { 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: "\n<div *ngFor=\"let section of questionList\">\n <div\n *ngIf=\"\n !checkIfValueIsEmpty(section['questions']) &&\n section['showSection']\n \"\n class=\"card p-3 mb-4\"\n id=\"personUwMedicalQuestions\"\n >\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\n [ngClass]=\"questions?.field?.cssClass\"\n *ngIf=\"\n questions['questionType'] === 'FREE TEXT' &&\n questions['cammundaQuestionCode'] !== 'QHT' &&\n questions['isShowQuestionInUI']\n \"\n >\n <!-- <label class=\"field-lable d-block\"\n >{{ questions[\"questionText\"] }}\n <span\n *ngIf=\"\n questions.optionalQuestion === 'N'\n \"\n style=\"color: #ee0000\"\n >*</span\n >\n </label> -->\n <div class=\"col-12 px-0 my-1\">\n <lib-textbox [(ngModel)]=\"personUwAnswers[questions.questionId]\" [field]=\"questions['field']\" (blur)=\"removeSubQuestionValues()\" />\n </div>\n </div>\n\n <div\n [ngClass]=\"questions?.field?.cssClass\"\n *ngIf=\"\n questions['questionType'] === 'HEIGHTINPUT' &&\n questions['cammundaQuestionCode'] === 'QHTF' &&\n questions['isShowQuestionInUI']\n \"\n >\n <label class=\"card-topic d-block field-lable\"\n >Height\n <span\n style=\"color: #ee0000\"\n >*</span\n >\n </label>\n <div\n class=\"col-auto px-0 my-0 py-0 heightinput\"\n\n >\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']\" (ngModelChange)=\"removeSubQuestionValues()\" [field]=\"medQuestionObj['QHT']['field']\" />\n </div>\n <div class=\"col-5\">\n <lib-select [(ngModel)]=\"personUwAnswers['medicalQuestionsHeightUnit']\" [field]=\"medQuestionObj['heightObjectTypes']\" (ngModelChange)=\"checkAndUpdateHeightUnit()\" />\n </div>\n </div>\n <div\n class=\"row\"\n *ngIf=\"\n personUwAnswers[\n 'medicalQuestionsHeightUnit'\n ] === 'FEET'\n \"\n >\n <div class=\"col-4 py-0 my-1\">\n <lib-select [(ngModel)]=\"personUwAnswers['medicalQuestionFeetInput']\" (ngModelChange)=\"removeSubQuestionValues()\" [field]=\"medQuestionObj['QHTF']['field']\" />\n </div>\n <div class=\"col-4 py-0 my-1\">\n <lib-select [(ngModel)]=\"personUwAnswers['medicalQuestionsInchesInput']\" (ngModelChange)=\"removeSubQuestionValues()\" [field]=\"medQuestionObj['QHTI']['field']\" />\n </div>\n <div\n class=\"col-4 py-0 my-1\"\n >\n <lib-select [(ngModel)]=\"personUwAnswers['medicalQuestionsHeightUnit']\" [field]=\"medQuestionObj['heightObjectTypes']\" (ngModelChange)=\"checkAndUpdateHeightUnit()\" />\n </div>\n </div>\n </div>\n </div>\n <div\n class=\"row mt-0 pt-0\"\n *ngIf=\"\n questions['questionType'] === 'MAP' &&\n questions['isShowQuestionInUI']\n \"\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\n type=\"number\"\n class=\"form-control\"\n autocomplete=\"off\"\n [(ngModel)]=\"longitude\"\n placeholder=\"Enter longitude\"\n step=\"any\"\n readonly\n >\n </div>\n <div class=\"col-6\">\n <label class=\"form-label card-topic\">Latitude</label>\n <input\n type=\"number\"\n class=\"form-control\"\n autocomplete=\"off\"\n [(ngModel)]=\"latitude\"\n placeholder=\"Enter latitude\"\n step=\"any\"\n readonly\n >\n </div>\n </div>\n\n <input\n #addressInput\n type=\"text\"\n class=\"form-control\"\n placeholder=\"Search for address\"\n (keyup)=\"onAddressInputKeyup($event)\"\n (focus)=\"showDropdown = true\"\n (blur)=\"onInputBlur()\"\n autocomplete=\"off\"\n >\n <div\n *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 >\n <div\n *ngFor=\"let suggestion of addressSuggestions; let i = index\"\n class=\"dropdown-item p-2\"\n style=\"cursor: pointer; border-bottom: 1px solid #eee;\"\n (mousedown)=\"selectAddress(suggestion)\"\n (mouseenter)=\"hoveredIndex = i\"\n [class.bg-light]=\"hoveredIndex === i\"\n >\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\n [ngClass]=\"questions?.field?.cssClass\"\n *ngIf=\"\n (questions['questionType'] === 'RADIO BUTTON' ||\n questions['questionType'] === 'ADDMORE') &&\n questions['isShowQuestionInUI']\n \"\n >\n <lib-radio [(ngModel)]=\"personUwAnswers[questions.questionId]\" (ngModelChange)=\"removeSubQuestionValues()\" [field]=\"questions['field']\" />\n </div>\n\n <div\n class=\"my-1\"\n [ngClass]=\"questions?.field?.cssClass\"\n *ngIf=\"\n questions['questionType'] === 'CHECKBOX' &&\n questions['isShowQuestionInUI']\n \"\n >\n <lib-multiple-select [(ngModel)]=\"personUwAnswers[questions.questionId]\" (ngModelChange)=\"valueChangeForMultiselect(questions)\" [field]=\"questions['field']\" />\n </div>\n\n <div\n class=\"my-1\"\n [ngClass]=\"questions?.field?.cssClass\"\n *ngIf=\"\n questions['questionType'] === 'DECLARATION' &&\n questions['isShowQuestionInUI']\n \"\n >\n <lib-checkbox [(ngModel)]=\"personUwAnswers[questions.questionId]\" (ngModelChange)=\"removeSubQuestionValues()\" [field]=\"questions['field']\" />\n </div>\n\n <div\n class=\"my-1\"\n [ngClass]=\"questions?.field?.cssClass\"\n *ngIf=\"\n questions['questionType'] === 'DROPDOWN' &&\n questions['isShowQuestionInUI']\n \"\n >\n <lib-select [(ngModel)]=\"personUwAnswers[questions.questionId]\" [field]=\"questions['field']\" (ngModelChange)=\"removeSubQuestionValues()\" />\n </div>\n\n <div\n class=\"my-1\"\n [ngClass]=\"questions?.field?.cssClass\"\n *ngIf=\"\n questions['questionType'] === 'CALENDAR' &&\n questions['isShowQuestionInUI']\n \"\n >\n <lib-dob [(ngModel)]=\"personUwAnswers[questions.questionId]\" [field]=\"questions['field']\" (ngModelChange)=\"removeSubQuestionValues()\" />\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\n class=\"my-1\"\n [ngClass]=\"questions?.field?.cssClass\"\n *ngIf=\"\n questions['questionType'] === 'DOCUPLOAD' &&\n questions['isShowQuestionInUI']\n \"\n >\n <lib-upload [field]=\"questions['field']\" (filePreview)=\"onDocumentFilePreview($event)\" />\n <lib-file-preview\n *ngIf=\"previewFile\"\n [field]=\"questions['field']\"\n [file]=\"previewFile\"\n (closed)=\"closeFilePreview()\">\n </lib-file-preview>\n </div>\n\n\n <div\n [ngClass]=\"questions?.field?.cssClass\"\n *ngIf=\"\n questions['questionType'] === 'PASSPORT_UPLOAD' &&\n questions['isShowQuestionInUI']\n \"\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}\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: HrLineComponent, selector: "lib-hr-line", inputs: ["field"] }, { kind: "component", type: FilePreviewComponent, selector: "lib-file-preview", inputs: ["field", "file"], outputs: ["closed"] }] });
|
|
6312
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: MedialQuestionsComponent, isStandalone: true, selector: "lib-medial-questions", inputs: { 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: "\n<div *ngFor=\"let section of questionList\">\n <div\n *ngIf=\"\n !checkIfValueIsEmpty(section['questions']) &&\n section['showSection']\n \"\n class=\"card p-3 mb-4\"\n id=\"personUwMedicalQuestions\"\n >\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\n [ngClass]=\"questions?.field?.cssClass\"\n *ngIf=\"\n questions['questionType'] === 'FREE TEXT' &&\n questions['cammundaQuestionCode'] !== 'QHT' &&\n questions['isShowQuestionInUI']\n \"\n >\n <!-- <label class=\"field-lable d-block\"\n >{{ questions[\"questionText\"] }}\n <span\n *ngIf=\"\n questions.optionalQuestion === 'N'\n \"\n style=\"color: #ee0000\"\n >*</span\n >\n </label> -->\n <div class=\"col-12 px-0 my-1\">\n <lib-textbox [(ngModel)]=\"personUwAnswers[questions.questionId]\" [field]=\"questions['field']\" (blur)=\"removeSubQuestionValues()\" />\n </div>\n </div>\n\n <div\n [ngClass]=\"questions?.field?.cssClass\"\n *ngIf=\"\n questions['questionType'] === 'HEIGHTINPUT' &&\n questions['cammundaQuestionCode'] === 'QHTF' &&\n questions['isShowQuestionInUI']\n \"\n >\n <label class=\"card-topic d-block field-lable\"\n >Height\n <span\n style=\"color: #ee0000\"\n >*</span\n >\n </label>\n <div\n class=\"col-auto px-0 my-0 py-0 heightinput\"\n id=\"medicalQuestionsHeightInput\"\n >\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']\" (ngModelChange)=\"removeSubQuestionValues()\" [field]=\"medQuestionObj['QHT']['field']\" />\n </div>\n <div class=\"col-5\">\n <lib-select [(ngModel)]=\"personUwAnswers['medicalQuestionsHeightUnit']\" [field]=\"medQuestionObj['heightObjectTypes']\" (ngModelChange)=\"checkAndUpdateHeightUnit()\" />\n </div>\n </div>\n <div\n class=\"row\"\n *ngIf=\"\n personUwAnswers[\n 'medicalQuestionsHeightUnit'\n ] === 'FEET'\n \"\n >\n <div class=\"col-4 py-0 my-1\">\n <lib-select [(ngModel)]=\"personUwAnswers['medicalQuestionFeetInput']\" (ngModelChange)=\"removeSubQuestionValues()\" [field]=\"medQuestionObj['QHTF']['field']\" />\n </div>\n <div class=\"col-4 py-0 my-1\">\n <lib-select [(ngModel)]=\"personUwAnswers['medicalQuestionsInchesInput']\" (ngModelChange)=\"removeSubQuestionValues()\" [field]=\"medQuestionObj['QHTI']['field']\" />\n </div>\n <div\n class=\"col-4 py-0 my-1\"\n >\n <lib-select [(ngModel)]=\"personUwAnswers['medicalQuestionsHeightUnit']\" [field]=\"medQuestionObj['heightObjectTypes']\" (ngModelChange)=\"checkAndUpdateHeightUnit()\" />\n </div>\n </div>\n </div>\n </div>\n <div\n class=\"row mt-0 pt-0\"\n *ngIf=\"\n questions['questionType'] === 'MAP' &&\n questions['isShowQuestionInUI']\n \"\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\n type=\"number\"\n class=\"form-control\"\n autocomplete=\"off\"\n [(ngModel)]=\"longitude\"\n placeholder=\"Enter longitude\"\n step=\"any\"\n readonly\n >\n </div>\n <div class=\"col-6\">\n <label class=\"form-label card-topic\">Latitude</label>\n <input\n type=\"number\"\n class=\"form-control\"\n autocomplete=\"off\"\n [(ngModel)]=\"latitude\"\n placeholder=\"Enter latitude\"\n step=\"any\"\n readonly\n >\n </div>\n </div>\n\n <input\n #addressInput\n type=\"text\"\n class=\"form-control\"\n placeholder=\"Search for address\"\n (keyup)=\"onAddressInputKeyup($event)\"\n (focus)=\"showDropdown = true\"\n (blur)=\"onInputBlur()\"\n autocomplete=\"off\"\n >\n <div\n *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 >\n <div\n *ngFor=\"let suggestion of addressSuggestions; let i = index\"\n class=\"dropdown-item p-2\"\n style=\"cursor: pointer; border-bottom: 1px solid #eee;\"\n (mousedown)=\"selectAddress(suggestion)\"\n (mouseenter)=\"hoveredIndex = i\"\n [class.bg-light]=\"hoveredIndex === i\"\n >\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\n [ngClass]=\"questions?.field?.cssClass\"\n *ngIf=\"\n (questions['questionType'] === 'RADIO BUTTON' ||\n questions['questionType'] === 'ADDMORE') &&\n questions['isShowQuestionInUI']\n \"\n >\n <lib-radio [(ngModel)]=\"personUwAnswers[questions.questionId]\" (ngModelChange)=\"removeSubQuestionValues()\" [field]=\"questions['field']\" />\n </div>\n\n <div\n class=\"my-1\"\n [ngClass]=\"questions?.field?.cssClass\"\n *ngIf=\"\n questions['questionType'] === 'CHECKBOX' &&\n questions['isShowQuestionInUI']\n \"\n >\n <lib-multiple-select [(ngModel)]=\"personUwAnswers[questions.questionId]\" (ngModelChange)=\"valueChangeForMultiselect(questions)\" [field]=\"questions['field']\" />\n </div>\n\n <div\n class=\"my-1\"\n [ngClass]=\"questions?.field?.cssClass\"\n *ngIf=\"\n questions['questionType'] === 'DECLARATION' &&\n questions['isShowQuestionInUI']\n \"\n >\n <lib-checkbox [(ngModel)]=\"personUwAnswers[questions.questionId]\" (ngModelChange)=\"removeSubQuestionValues()\" [field]=\"questions['field']\" />\n </div>\n\n <div\n class=\"my-1\"\n [ngClass]=\"questions?.field?.cssClass\"\n *ngIf=\"\n questions['questionType'] === 'DROPDOWN' &&\n questions['isShowQuestionInUI']\n \"\n >\n <lib-select [(ngModel)]=\"personUwAnswers[questions.questionId]\" [field]=\"questions['field']\" (ngModelChange)=\"removeSubQuestionValues()\" />\n </div>\n\n <div\n class=\"my-1\"\n [ngClass]=\"questions?.field?.cssClass\"\n *ngIf=\"\n questions['questionType'] === 'CALENDAR' &&\n questions['isShowQuestionInUI']\n \"\n >\n <lib-dob [(ngModel)]=\"personUwAnswers[questions.questionId]\" [field]=\"questions['field']\" (ngModelChange)=\"removeSubQuestionValues()\" />\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\n class=\"my-1\"\n [ngClass]=\"questions?.field?.cssClass\"\n *ngIf=\"\n questions['questionType'] === 'DOCUPLOAD' &&\n questions['isShowQuestionInUI']\n \"\n >\n <lib-upload [field]=\"questions['field']\" (filePreview)=\"onDocumentFilePreview($event)\" />\n <lib-file-preview\n *ngIf=\"previewFile\"\n [field]=\"questions['field']\"\n [file]=\"previewFile\"\n (closed)=\"closeFilePreview()\">\n </lib-file-preview>\n </div>\n\n\n <div\n [ngClass]=\"questions?.field?.cssClass\"\n *ngIf=\"\n questions['questionType'] === 'PASSPORT_UPLOAD' &&\n questions['isShowQuestionInUI']\n \"\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}}\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: HrLineComponent, selector: "lib-hr-line", inputs: ["field"] }, { kind: "component", type: FilePreviewComponent, selector: "lib-file-preview", inputs: ["field", "file"], outputs: ["closed"] }] });
|
|
6205
6313
|
}
|
|
6206
6314
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MedialQuestionsComponent, decorators: [{
|
|
6207
6315
|
type: Component,
|
|
@@ -6219,9 +6327,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
6219
6327
|
GoogleMapsModule,
|
|
6220
6328
|
HrLineComponent,
|
|
6221
6329
|
FilePreviewComponent
|
|
6222
|
-
], template: "\n<div *ngFor=\"let section of questionList\">\n <div\n *ngIf=\"\n !checkIfValueIsEmpty(section['questions']) &&\n section['showSection']\n \"\n class=\"card p-3 mb-4\"\n id=\"personUwMedicalQuestions\"\n >\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\n [ngClass]=\"questions?.field?.cssClass\"\n *ngIf=\"\n questions['questionType'] === 'FREE TEXT' &&\n questions['cammundaQuestionCode'] !== 'QHT' &&\n questions['isShowQuestionInUI']\n \"\n >\n <!-- <label class=\"field-lable d-block\"\n >{{ questions[\"questionText\"] }}\n <span\n *ngIf=\"\n questions.optionalQuestion === 'N'\n \"\n style=\"color: #ee0000\"\n >*</span\n >\n </label> -->\n <div class=\"col-12 px-0 my-1\">\n <lib-textbox [(ngModel)]=\"personUwAnswers[questions.questionId]\" [field]=\"questions['field']\" (blur)=\"removeSubQuestionValues()\" />\n </div>\n </div>\n\n <div\n [ngClass]=\"questions?.field?.cssClass\"\n *ngIf=\"\n questions['questionType'] === 'HEIGHTINPUT' &&\n questions['cammundaQuestionCode'] === 'QHTF' &&\n questions['isShowQuestionInUI']\n \"\n >\n <label class=\"card-topic d-block field-lable\"\n >Height\n <span\n style=\"color: #ee0000\"\n >*</span\n >\n </label>\n <div\n class=\"col-auto px-0 my-0 py-0 heightinput\"\n\n >\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']\" (ngModelChange)=\"removeSubQuestionValues()\" [field]=\"medQuestionObj['QHT']['field']\" />\n </div>\n <div class=\"col-5\">\n <lib-select [(ngModel)]=\"personUwAnswers['medicalQuestionsHeightUnit']\" [field]=\"medQuestionObj['heightObjectTypes']\" (ngModelChange)=\"checkAndUpdateHeightUnit()\" />\n </div>\n </div>\n <div\n class=\"row\"\n *ngIf=\"\n personUwAnswers[\n 'medicalQuestionsHeightUnit'\n ] === 'FEET'\n \"\n >\n <div class=\"col-4 py-0 my-1\">\n <lib-select [(ngModel)]=\"personUwAnswers['medicalQuestionFeetInput']\" (ngModelChange)=\"removeSubQuestionValues()\" [field]=\"medQuestionObj['QHTF']['field']\" />\n </div>\n <div class=\"col-4 py-0 my-1\">\n <lib-select [(ngModel)]=\"personUwAnswers['medicalQuestionsInchesInput']\" (ngModelChange)=\"removeSubQuestionValues()\" [field]=\"medQuestionObj['QHTI']['field']\" />\n </div>\n <div\n class=\"col-4 py-0 my-1\"\n >\n <lib-select [(ngModel)]=\"personUwAnswers['medicalQuestionsHeightUnit']\" [field]=\"medQuestionObj['heightObjectTypes']\" (ngModelChange)=\"checkAndUpdateHeightUnit()\" />\n </div>\n </div>\n </div>\n </div>\n <div\n class=\"row mt-0 pt-0\"\n *ngIf=\"\n questions['questionType'] === 'MAP' &&\n questions['isShowQuestionInUI']\n \"\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\n type=\"number\"\n class=\"form-control\"\n autocomplete=\"off\"\n [(ngModel)]=\"longitude\"\n placeholder=\"Enter longitude\"\n step=\"any\"\n readonly\n >\n </div>\n <div class=\"col-6\">\n <label class=\"form-label card-topic\">Latitude</label>\n <input\n type=\"number\"\n class=\"form-control\"\n autocomplete=\"off\"\n [(ngModel)]=\"latitude\"\n placeholder=\"Enter latitude\"\n step=\"any\"\n readonly\n >\n </div>\n </div>\n\n <input\n #addressInput\n type=\"text\"\n class=\"form-control\"\n placeholder=\"Search for address\"\n (keyup)=\"onAddressInputKeyup($event)\"\n (focus)=\"showDropdown = true\"\n (blur)=\"onInputBlur()\"\n autocomplete=\"off\"\n >\n <div\n *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 >\n <div\n *ngFor=\"let suggestion of addressSuggestions; let i = index\"\n class=\"dropdown-item p-2\"\n style=\"cursor: pointer; border-bottom: 1px solid #eee;\"\n (mousedown)=\"selectAddress(suggestion)\"\n (mouseenter)=\"hoveredIndex = i\"\n [class.bg-light]=\"hoveredIndex === i\"\n >\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\n [ngClass]=\"questions?.field?.cssClass\"\n *ngIf=\"\n (questions['questionType'] === 'RADIO BUTTON' ||\n questions['questionType'] === 'ADDMORE') &&\n questions['isShowQuestionInUI']\n \"\n >\n <lib-radio [(ngModel)]=\"personUwAnswers[questions.questionId]\" (ngModelChange)=\"removeSubQuestionValues()\" [field]=\"questions['field']\" />\n </div>\n\n <div\n class=\"my-1\"\n [ngClass]=\"questions?.field?.cssClass\"\n *ngIf=\"\n questions['questionType'] === 'CHECKBOX' &&\n questions['isShowQuestionInUI']\n \"\n >\n <lib-multiple-select [(ngModel)]=\"personUwAnswers[questions.questionId]\" (ngModelChange)=\"valueChangeForMultiselect(questions)\" [field]=\"questions['field']\" />\n </div>\n\n <div\n class=\"my-1\"\n [ngClass]=\"questions?.field?.cssClass\"\n *ngIf=\"\n questions['questionType'] === 'DECLARATION' &&\n questions['isShowQuestionInUI']\n \"\n >\n <lib-checkbox [(ngModel)]=\"personUwAnswers[questions.questionId]\" (ngModelChange)=\"removeSubQuestionValues()\" [field]=\"questions['field']\" />\n </div>\n\n <div\n class=\"my-1\"\n [ngClass]=\"questions?.field?.cssClass\"\n *ngIf=\"\n questions['questionType'] === 'DROPDOWN' &&\n questions['isShowQuestionInUI']\n \"\n >\n <lib-select [(ngModel)]=\"personUwAnswers[questions.questionId]\" [field]=\"questions['field']\" (ngModelChange)=\"removeSubQuestionValues()\" />\n </div>\n\n <div\n class=\"my-1\"\n [ngClass]=\"questions?.field?.cssClass\"\n *ngIf=\"\n questions['questionType'] === 'CALENDAR' &&\n questions['isShowQuestionInUI']\n \"\n >\n <lib-dob [(ngModel)]=\"personUwAnswers[questions.questionId]\" [field]=\"questions['field']\" (ngModelChange)=\"removeSubQuestionValues()\" />\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\n class=\"my-1\"\n [ngClass]=\"questions?.field?.cssClass\"\n *ngIf=\"\n questions['questionType'] === 'DOCUPLOAD' &&\n questions['isShowQuestionInUI']\n \"\n >\n <lib-upload [field]=\"questions['field']\" (filePreview)=\"onDocumentFilePreview($event)\" />\n <lib-file-preview\n *ngIf=\"previewFile\"\n [field]=\"questions['field']\"\n [file]=\"previewFile\"\n (closed)=\"closeFilePreview()\">\n </lib-file-preview>\n </div>\n\n\n <div\n [ngClass]=\"questions?.field?.cssClass\"\n *ngIf=\"\n questions['questionType'] === 'PASSPORT_UPLOAD' &&\n questions['isShowQuestionInUI']\n \"\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}\n"] }]
|
|
6330
|
+
], template: "\n<div *ngFor=\"let section of questionList\">\n <div\n *ngIf=\"\n !checkIfValueIsEmpty(section['questions']) &&\n section['showSection']\n \"\n class=\"card p-3 mb-4\"\n id=\"personUwMedicalQuestions\"\n >\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\n [ngClass]=\"questions?.field?.cssClass\"\n *ngIf=\"\n questions['questionType'] === 'FREE TEXT' &&\n questions['cammundaQuestionCode'] !== 'QHT' &&\n questions['isShowQuestionInUI']\n \"\n >\n <!-- <label class=\"field-lable d-block\"\n >{{ questions[\"questionText\"] }}\n <span\n *ngIf=\"\n questions.optionalQuestion === 'N'\n \"\n style=\"color: #ee0000\"\n >*</span\n >\n </label> -->\n <div class=\"col-12 px-0 my-1\">\n <lib-textbox [(ngModel)]=\"personUwAnswers[questions.questionId]\" [field]=\"questions['field']\" (blur)=\"removeSubQuestionValues()\" />\n </div>\n </div>\n\n <div\n [ngClass]=\"questions?.field?.cssClass\"\n *ngIf=\"\n questions['questionType'] === 'HEIGHTINPUT' &&\n questions['cammundaQuestionCode'] === 'QHTF' &&\n questions['isShowQuestionInUI']\n \"\n >\n <label class=\"card-topic d-block field-lable\"\n >Height\n <span\n style=\"color: #ee0000\"\n >*</span\n >\n </label>\n <div\n class=\"col-auto px-0 my-0 py-0 heightinput\"\n id=\"medicalQuestionsHeightInput\"\n >\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']\" (ngModelChange)=\"removeSubQuestionValues()\" [field]=\"medQuestionObj['QHT']['field']\" />\n </div>\n <div class=\"col-5\">\n <lib-select [(ngModel)]=\"personUwAnswers['medicalQuestionsHeightUnit']\" [field]=\"medQuestionObj['heightObjectTypes']\" (ngModelChange)=\"checkAndUpdateHeightUnit()\" />\n </div>\n </div>\n <div\n class=\"row\"\n *ngIf=\"\n personUwAnswers[\n 'medicalQuestionsHeightUnit'\n ] === 'FEET'\n \"\n >\n <div class=\"col-4 py-0 my-1\">\n <lib-select [(ngModel)]=\"personUwAnswers['medicalQuestionFeetInput']\" (ngModelChange)=\"removeSubQuestionValues()\" [field]=\"medQuestionObj['QHTF']['field']\" />\n </div>\n <div class=\"col-4 py-0 my-1\">\n <lib-select [(ngModel)]=\"personUwAnswers['medicalQuestionsInchesInput']\" (ngModelChange)=\"removeSubQuestionValues()\" [field]=\"medQuestionObj['QHTI']['field']\" />\n </div>\n <div\n class=\"col-4 py-0 my-1\"\n >\n <lib-select [(ngModel)]=\"personUwAnswers['medicalQuestionsHeightUnit']\" [field]=\"medQuestionObj['heightObjectTypes']\" (ngModelChange)=\"checkAndUpdateHeightUnit()\" />\n </div>\n </div>\n </div>\n </div>\n <div\n class=\"row mt-0 pt-0\"\n *ngIf=\"\n questions['questionType'] === 'MAP' &&\n questions['isShowQuestionInUI']\n \"\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\n type=\"number\"\n class=\"form-control\"\n autocomplete=\"off\"\n [(ngModel)]=\"longitude\"\n placeholder=\"Enter longitude\"\n step=\"any\"\n readonly\n >\n </div>\n <div class=\"col-6\">\n <label class=\"form-label card-topic\">Latitude</label>\n <input\n type=\"number\"\n class=\"form-control\"\n autocomplete=\"off\"\n [(ngModel)]=\"latitude\"\n placeholder=\"Enter latitude\"\n step=\"any\"\n readonly\n >\n </div>\n </div>\n\n <input\n #addressInput\n type=\"text\"\n class=\"form-control\"\n placeholder=\"Search for address\"\n (keyup)=\"onAddressInputKeyup($event)\"\n (focus)=\"showDropdown = true\"\n (blur)=\"onInputBlur()\"\n autocomplete=\"off\"\n >\n <div\n *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 >\n <div\n *ngFor=\"let suggestion of addressSuggestions; let i = index\"\n class=\"dropdown-item p-2\"\n style=\"cursor: pointer; border-bottom: 1px solid #eee;\"\n (mousedown)=\"selectAddress(suggestion)\"\n (mouseenter)=\"hoveredIndex = i\"\n [class.bg-light]=\"hoveredIndex === i\"\n >\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\n [ngClass]=\"questions?.field?.cssClass\"\n *ngIf=\"\n (questions['questionType'] === 'RADIO BUTTON' ||\n questions['questionType'] === 'ADDMORE') &&\n questions['isShowQuestionInUI']\n \"\n >\n <lib-radio [(ngModel)]=\"personUwAnswers[questions.questionId]\" (ngModelChange)=\"removeSubQuestionValues()\" [field]=\"questions['field']\" />\n </div>\n\n <div\n class=\"my-1\"\n [ngClass]=\"questions?.field?.cssClass\"\n *ngIf=\"\n questions['questionType'] === 'CHECKBOX' &&\n questions['isShowQuestionInUI']\n \"\n >\n <lib-multiple-select [(ngModel)]=\"personUwAnswers[questions.questionId]\" (ngModelChange)=\"valueChangeForMultiselect(questions)\" [field]=\"questions['field']\" />\n </div>\n\n <div\n class=\"my-1\"\n [ngClass]=\"questions?.field?.cssClass\"\n *ngIf=\"\n questions['questionType'] === 'DECLARATION' &&\n questions['isShowQuestionInUI']\n \"\n >\n <lib-checkbox [(ngModel)]=\"personUwAnswers[questions.questionId]\" (ngModelChange)=\"removeSubQuestionValues()\" [field]=\"questions['field']\" />\n </div>\n\n <div\n class=\"my-1\"\n [ngClass]=\"questions?.field?.cssClass\"\n *ngIf=\"\n questions['questionType'] === 'DROPDOWN' &&\n questions['isShowQuestionInUI']\n \"\n >\n <lib-select [(ngModel)]=\"personUwAnswers[questions.questionId]\" [field]=\"questions['field']\" (ngModelChange)=\"removeSubQuestionValues()\" />\n </div>\n\n <div\n class=\"my-1\"\n [ngClass]=\"questions?.field?.cssClass\"\n *ngIf=\"\n questions['questionType'] === 'CALENDAR' &&\n questions['isShowQuestionInUI']\n \"\n >\n <lib-dob [(ngModel)]=\"personUwAnswers[questions.questionId]\" [field]=\"questions['field']\" (ngModelChange)=\"removeSubQuestionValues()\" />\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\n class=\"my-1\"\n [ngClass]=\"questions?.field?.cssClass\"\n *ngIf=\"\n questions['questionType'] === 'DOCUPLOAD' &&\n questions['isShowQuestionInUI']\n \"\n >\n <lib-upload [field]=\"questions['field']\" (filePreview)=\"onDocumentFilePreview($event)\" />\n <lib-file-preview\n *ngIf=\"previewFile\"\n [field]=\"questions['field']\"\n [file]=\"previewFile\"\n (closed)=\"closeFilePreview()\">\n </lib-file-preview>\n </div>\n\n\n <div\n [ngClass]=\"questions?.field?.cssClass\"\n *ngIf=\"\n questions['questionType'] === 'PASSPORT_UPLOAD' &&\n questions['isShowQuestionInUI']\n \"\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}}\n"] }]
|
|
6223
6331
|
}], ctorParameters: () => [{ type: i0.NgZone }, { type: MasterService }], propDecorators: { questionsValueChange: [{
|
|
6224
6332
|
type: Output
|
|
6333
|
+
}], triggerValidation: [{
|
|
6334
|
+
type: Input
|
|
6225
6335
|
}], addressInput: [{
|
|
6226
6336
|
type: ViewChild,
|
|
6227
6337
|
args: ['addressInput']
|
|
@@ -7577,7 +7687,7 @@ class MasterControlComponent {
|
|
|
7577
7687
|
formGroup = new FormGroup({});
|
|
7578
7688
|
constructor() { }
|
|
7579
7689
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MasterControlComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
7580
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: MasterControlComponent, isStandalone: true, selector: "lib-master-control", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, formGroup: { classPropertyName: "formGroup", publicName: "formGroup", isSignal: false, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@switch (field()?.controlType) {\n @case ('top-header') {\n <lib-top-header [field]=\"field()\" />\n }\n @case ('footer') {\n <lib-footer [field]=\"field()\" />\n }\n @case('footer-buttons')\n {\n <lib-footer-with-buttons [field]=\"field()\"></lib-footer-with-buttons>\n }\n @case('text') {\n <lib-textbox [field]=\"field()\"></lib-textbox>\n }\n @case('select') {\n <lib-select [field]=\"field()\"/>\n }\n\n @case('radio') {\n <lib-radio [field]=\"field()\" />\n }\n\n @case('toggle') {\n <lib-toggle [field]=\"field()\" />\n }\n\n @case('file') {\n <lib-upload [field]=\"field()\" />\n }\n\n @case('date') {\n <lib-dob [field]=\"field()\" />\n }\n\n @case('mobileNumber') {\n <lib-mob-number [field]=\"field()\" />\n }\n\n @case('info') {\n <lib-info [field]=\"field()\" />\n }\n\n @case('checkbox') {\n <lib-checkbox [field]=\"field()\" />\n }\n\n @case('textarea') {\n <lib-textarea [field]=\"field()\" />\n }\n\n @case ('button') {\n <lib-button [field]=\"field()\" />\n }\n\n @case ('tab') {\n <lib-tab [field]=\"field()\" />\n }\n\n @case ('autocomplete') {\n <lib-autocomplete [field]=\"field()\" />\n }\n\n @case ('multipleSelect') {\n <lib-multiple-select [field]=\"field()\" />\n }\n\n @case ('textboxWithSelect') {\n <lib-select-textbox [field]=\"field()\" />\n }\n\n @case ('otpTextbox') {\n <lib-otp-textbox [field]=\"field()\" />\n }\n\n @case ('amountTextbox') {\n <lib-amount-textbox [field]=\"field()\" />\n }\n\n @case ('suffixTextbox') {\n <lib-suffix-textbox [field]=\"field()\" />\n }\n\n @case ('otpMobNumber') {\n <lib-otp-mob-number [field]=\"field()\" />\n }\n\n @case ('tagMobNumber') {\n <lib-tag-mob-number [field]=\"field()\" />\n }\n\n @case ('dateWithAge') {\n <lib-age-date [field]=\"field()\" />\n }\n\n @case ('additionButton') {\n <lib-addition-button [field]=\"field()\" />\n }\n\n @case ('infoTextbox') {\n <lib-info-textbox [field]=\"field()\" />\n }\n\n @case ('textboxWithImage') {\n <lib-textbox-with-image [field]=\"field()\" />\n }\n\n @case ('emailWithDomain') {\n <lib-email-with-domain [field]=\"field()\" />\n }\n\n @case ('imageUpload') {\n <lib-image-upload [field]=\"field()\" />\n }\n\n @case ('downloadDocument') {\n <lib-download-document [field]=\"field()\" />\n }\n\n @case ('addDocument') {\n <lib-add-document [field]=\"field()\" />\n }\n\n @case ('hyperlink') {\n <lib-hyperlink [field]=\"field()\" />\n }\n\n @case ('textboxWithUnderscore') {\n <lib-textbox-with-underscore [field]=\"field()\" />\n }\n\n @case ('underscoreMobNumber') {\n <lib-underscore-mob-number [field]=\"field()\" />\n }\n\n @case ('downloadIconButton') {\n <lib-icon-button [field]=\"field()\" />\n }\n\n @case ('image') {\n <lib-image [field]=\"field()\" />\n }\n @case ('stepper') {\n <lib-stepper [field]=\"field()\" />\n }\n @case ('card') {\n <lib-card [field]=\"field()\" />\n }\n @case ('hrLine') {\n <lib-hr-line [field]=\"field()\" />\n }\n @case ('searchMultiSelect') {\n <lib-search-multi-select [field]=\"field()\" />\n }\n @case ('subscriptTextbox') {\n <lib-subscript-textbox [field]=\"field()\" />\n }\n @case ('label') {\n <lib-label [field]=\"field()\" />\n }\n @case ('subHeading') {\n <lib-sub-header [field]=\"field()\" />\n }\n @case ('heading') {\n <lib-header [field]=\"field()\" />\n }\n @case ('table') {\n <lib-table [field]=\"field()\" />\n }\n @case ('textboxWithText') {\n <lib-textbox-with-text [field]=\"field()\" />\n }\n @case ('loader') {\n <lib-loader [field]=\"field()\" />\n }\n @case ('discount') {\n <lib-discount [field]=\"field()\" />\n }\n @case ('optionalBenefitCard') {\n <lib-benefit-card [field]=\"field()\" />\n }\n @case ('errorSnackbar') {\n <lib-error-snackbar [field]=\"field()\" />\n }\n @case ('warningSnackbar') {\n <lib-warning-snackbar [field]=\"field()\" />\n }\n @case ('successSnackbar') {\n <lib-success-snackbar [field]=\"field()\" />\n }\n @case ('neutralSnackbar') {\n <lib-neutral-snackbar [field]=\"field()\" />\n }\n @case ('boldLabel') {\n <lib-grey-label [field]=\"field()\" />\n }\n @case ('iframe') {\n <lib-iframe [field]=\"field()\" />\n }\n @case ('toggleButton') {\n <lib-toggle-button [field]=\"field()\" />\n }\n @case ('payGetCard') {\n <lib-pay-get-card [field]=\"field()\" />\n }\n @case ('inBuiltBenefit') {\n <lib-in-built-benefit [field]=\"field()\" />\n }\n @case ('otherBenefit') {\n <lib-other-benefits [field]=\"field()\" />\n }\n @case ('annuityRateLogo') {\n <lib-annuity-rate-logo [field]=\"field()\" />\n }\n @case ('discountAnnuity') {\n <lib-discount-v2 [field]=\"field()\" />\n }\n @case ('labelValue'){\n <lib-label-value-card [field]=\"field()\" />\n }\n @case ('medicalQuestions'){\n <lib-medial-questions [field]=\"field()\" />\n }\n @case ('nudge'){\n <lib-page-nudge [field]=\"field()\"/>\n }\n @case ('progressBar'){\n <lib-progress-bar [field]=\"field()\"/>\n }\n @case ('accordian'){\n <lib-accordian [field]=\"field()\"/>\n }\n @case ('miscInfo'){\n <lib-miscellaneous-info-bar [field]=\"field()\"/>\n }\n @case ('plainText'){\n <lib-plain-text [field]=\"field()\"/>\n }\n @case ('menu'){\n <lib-menu [field]=\"field()\" />\n }\n @case ('stepperWithArrow') {\n <lib-stepper-with-arrow [field]=\"field()\" />\n }\n @case ('labelWithImage') {\n <lib-label-with-image [field]=\"field()\" />\n }\n @case ('motorGlowPlanDetails') {\n <lib-motor-glow-plan-details [field]=\"field()\" />\n }\n @case ('premiumToAnnuityCalculator') {\n <lib-annuity-premium-calculator [field]=\"field()\" />\n } @case ('footerProgressBar') {\n <lib-footer-design [field]=\"field()\" />\n }\n}\n", styles: [""], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "component", type: TextboxComponent, selector: "lib-textbox", inputs: ["field", "reactiveFormControlobject"], outputs: ["blur"] }, { kind: "component", type: SelectComponent, selector: "lib-select", inputs: ["field", "reactiveFormControlobject"], outputs: ["selectionChange", "infoClick"] }, { kind: "component", type: RadioComponent, selector: "lib-radio", inputs: ["reactiveFormControlobject", "field"], outputs: ["change"] }, { kind: "component", type: ToggleComponent, selector: "lib-toggle", inputs: ["field", "reactiveFormControlobject"], outputs: ["change"] }, { kind: "component", type: UploadComponent, selector: "lib-upload", inputs: ["documentUploaderField", "openQuoteImageObj", "field", "reactiveFormControlobject"], outputs: ["filesChanged", "fileRemoved", "filePreview"] }, { kind: "component", type: DobComponent, selector: "lib-dob", inputs: ["field", "reactiveFormControlobject"], outputs: ["blur", "valueChange", "dateSelected", "invalidDate"] }, { kind: "component", type: MobNumberComponent, selector: "lib-mob-number", inputs: ["field", "reactiveFormControlobject"], outputs: ["blur"] }, { kind: "component", type: InfoComponent, selector: "lib-info", inputs: ["field"] }, { kind: "component", type: CheckboxComponent, selector: "lib-checkbox", inputs: ["field", "reactiveFormControlobject"], outputs: ["change"] }, { kind: "component", type: TextareaComponent, selector: "lib-textarea", inputs: ["field", "reactiveFormControlobject"], outputs: ["blur"] }, { kind: "component", type: ButtonComponent, selector: "lib-button", inputs: ["field"] }, { kind: "component", type: TabComponent, selector: "lib-tab", inputs: ["field"], outputs: ["selectedIndexChange"] }, { kind: "component", type: AutocompleteComponent, selector: "lib-autocomplete", inputs: ["field", "reactiveFormControlobject"], outputs: ["blur", "selectionChanged", "valueChanged", "optionSelected"] }, { kind: "component", type: MultipleSelectComponent, selector: "lib-multiple-select", inputs: ["field", "reactiveFormControlobject"], outputs: ["selectionChange"] }, { kind: "component", type: SelectTextboxComponent, selector: "lib-select-textbox", inputs: ["field", "reactiveFormControlobject"], outputs: ["selectionChange"] }, { kind: "component", type: OtpTextboxComponent, selector: "lib-otp-textbox", inputs: ["field", "reactiveFormControlobject"] }, { kind: "component", type: AmountTextboxComponent, selector: "lib-amount-textbox", inputs: ["field", "reactiveFormControlobject"], outputs: ["blur"] }, { kind: "component", type: SuffixTextboxComponent, selector: "lib-suffix-textbox", inputs: ["field", "reactiveFormControlobject"], outputs: ["blur"] }, { kind: "component", type: OtpMobNumberComponent, selector: "lib-otp-mob-number", inputs: ["field", "reactiveFormControlobject"] }, { kind: "component", type: TagMobNumberComponent, selector: "lib-tag-mob-number", inputs: ["field", "reactiveFormControlobject"] }, { kind: "component", type: AgeDateComponent, selector: "lib-age-date", inputs: ["field", "reactiveFormControlobject"], outputs: ["blur", "valueChange", "dateSelected", "invalidDate"] }, { kind: "component", type: AdditionButtonComponent, selector: "lib-addition-button", inputs: ["field"] }, { kind: "component", type: InfoTextboxComponent, selector: "lib-info-textbox", inputs: ["field", "reactiveFormControlobject", "fields"], outputs: ["infoClick"] }, { kind: "component", type: TextboxWithImageComponent, selector: "lib-textbox-with-image", inputs: ["field", "reactiveFormControlobject"], outputs: ["blur"] }, { kind: "component", type: EmailWithDomainComponent, selector: "lib-email-with-domain", inputs: ["field", "reactiveFormControlobject"] }, { kind: "component", type: ImageUploadComponent, selector: "lib-image-upload", inputs: ["field"] }, { kind: "component", type: DownloadDocumentComponent, selector: "lib-download-document", inputs: ["field"] }, { kind: "component", type: AddDocumentComponent, selector: "lib-add-document", inputs: ["field"] }, { kind: "component", type: HyperlinkComponent, selector: "lib-hyperlink", inputs: ["field"] }, { kind: "component", type: TextboxWithUnderscoreComponent, selector: "lib-textbox-with-underscore", inputs: ["field", "reactiveFormControlobject"] }, { kind: "component", type: UnderscoreMobNumberComponent, selector: "lib-underscore-mob-number", inputs: ["field", "reactiveFormControlobject"] }, { kind: "component", type: IconButtonComponent, selector: "lib-icon-button", inputs: ["field"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: ImageComponent, selector: "lib-image", inputs: ["field"] }, { kind: "component", type: StepperComponent, selector: "lib-stepper", inputs: ["field"] }, { kind: "component", type: CardComponent, selector: "lib-card", inputs: ["field"], outputs: ["cardDetailsClicked"] }, { kind: "component", type: HrLineComponent, selector: "lib-hr-line", inputs: ["field"] }, { kind: "component", type: SearchMultiSelectComponent, selector: "lib-search-multi-select", inputs: ["field", "reactiveFormControlobject"] }, { kind: "component", type: SubscriptTextboxComponent, selector: "lib-subscript-textbox", inputs: ["field", "reactiveFormControlobject"] }, { kind: "component", type: LabelComponent, selector: "lib-label", inputs: ["field"] }, { kind: "component", type: SubHeaderComponent, selector: "lib-sub-header", inputs: ["field"] }, { kind: "component", type: HeaderComponent, selector: "lib-header", inputs: ["field"] }, { kind: "component", type: TextboxWithTextComponent, selector: "lib-textbox-with-text", inputs: ["reactiveFormControlobject", "field"], outputs: ["blur"] }, { kind: "component", type: DiscountComponent, selector: "lib-discount", inputs: ["field"] }, { kind: "component", type: BenefitCardComponent, selector: "lib-benefit-card", inputs: ["field"] }, { kind: "component", type: TableComponent, selector: "lib-table", inputs: ["field", "readonly"], outputs: ["actionItemClicked", "tablePaginationClicked"] }, { kind: "component", type: LoaderComponent, selector: "lib-loader", inputs: ["field"] }, { kind: "component", type: WarningSnackbarComponent, selector: "lib-warning-snackbar", inputs: ["field"] }, { kind: "component", type: SuccessSnackbarComponent, selector: "lib-success-snackbar", inputs: ["field"] }, { kind: "component", type: NeutralSnackbarComponent, selector: "lib-neutral-snackbar", inputs: ["field"] }, { kind: "component", type: ErrorSnackbarComponent, selector: "lib-error-snackbar", inputs: ["field"] }, { kind: "component", type: GreyLabelComponent, selector: "lib-grey-label", inputs: ["field"] }, { kind: "component", type: IframeComponent, selector: "lib-iframe", inputs: ["field"] }, { kind: "component", type: ToggleButtonComponent, selector: "lib-toggle-button", inputs: ["reactiveFormControlobject", "field"], outputs: ["selectionChanged", "change"] }, { kind: "component", type: PayGetCardComponent, selector: "lib-pay-get-card", inputs: ["field", "payAmount", "premiumAmount", "ptValue", "years", "frequency", "payamountOptions"] }, { kind: "component", type: InBuiltBenefitComponent, selector: "lib-in-built-benefit", inputs: ["field", "premiumAmount", "premiumAmountShort"] }, { kind: "component", type: OtherBenefitsComponent, selector: "lib-other-benefits", inputs: ["field"] }, { kind: "component", type: AnnuityRateLogoComponent, selector: "lib-annuity-rate-logo", inputs: ["field", "ratePercent"] }, { kind: "component", type: DiscountV2Component, selector: "lib-discount-v2", inputs: ["field"] }, { kind: "component", type: LabelValueCardComponent, selector: "lib-label-value-card", inputs: ["field"] }, { kind: "component", type: MedialQuestionsComponent, selector: "lib-medial-questions", inputs: ["medialQuestionResponse", "personUWOpenQuoteResponse", "defaultValues", "personType", "field"], outputs: ["questionsValueChange"] }, { kind: "component", type: PageNudgeComponent, selector: "lib-page-nudge", inputs: ["field"] }, { kind: "component", type: ProgressBarComponent, selector: "lib-progress-bar", inputs: ["field"] }, { kind: "component", type: AccordianComponent, selector: "lib-accordian", inputs: ["field"] }, { kind: "component", type: MiscellaneousInfoBarComponent, selector: "lib-miscellaneous-info-bar", inputs: ["field", "details"] }, { kind: "component", type: PlainTextComponent, selector: "lib-plain-text", inputs: ["field"] }, { kind: "component", type: MenuComponent, selector: "lib-menu", inputs: ["field"] }, { kind: "component", type: StepperWIthArrowComponent, selector: "lib-stepper-with-arrow", inputs: ["field", "currentStepValue", "autoProgress", "autoProgressDelay"], outputs: ["selectedStep"] }, { kind: "component", type: LabelWithImageComponent, selector: "lib-label-with-image", inputs: ["field"] }, { kind: "component", type: TopHeaderComponent, selector: "lib-top-header", inputs: ["field"] }, { kind: "component", type: FooterComponent, selector: "lib-footer", inputs: ["field"] }, { kind: "component", type: FooterWithButtonsComponent, selector: "lib-footer-with-buttons", inputs: ["field"] }, { kind: "component", type: MotorGlowPlanDetailsComponent, selector: "lib-motor-glow-plan-details", inputs: ["field"], outputs: ["editPlanClick"] }, { kind: "component", type: AnnuityPremiumCalculatorComponent, selector: "lib-annuity-premium-calculator", inputs: ["field", "premiumDetails"], outputs: ["onCalcualteButtonClick", "onGenerateSummaryClick", "onAnnuityPremiumChange", "onMinimumPremiumValueChange", "onAutioDebitValueChange", "onGuranteedAnnuityValueChange", "onDigitBossSwitchToggle"] }, { kind: "component", type: FooterDesignComponent, selector: "lib-footer-design", inputs: ["field"] }] });
|
|
7690
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: MasterControlComponent, isStandalone: true, selector: "lib-master-control", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, formGroup: { classPropertyName: "formGroup", publicName: "formGroup", isSignal: false, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@switch (field()?.controlType) {\n @case ('top-header') {\n <lib-top-header [field]=\"field()\" />\n }\n @case ('footer') {\n <lib-footer [field]=\"field()\" />\n }\n @case('footer-buttons')\n {\n <lib-footer-with-buttons [field]=\"field()\"></lib-footer-with-buttons>\n }\n @case('text') {\n <lib-textbox [field]=\"field()\"></lib-textbox>\n }\n @case('select') {\n <lib-select [field]=\"field()\"/>\n }\n\n @case('radio') {\n <lib-radio [field]=\"field()\" />\n }\n\n @case('toggle') {\n <lib-toggle [field]=\"field()\" />\n }\n\n @case('file') {\n <lib-upload [field]=\"field()\" />\n }\n\n @case('date') {\n <lib-dob [field]=\"field()\" />\n }\n\n @case('mobileNumber') {\n <lib-mob-number [field]=\"field()\" />\n }\n\n @case('info') {\n <lib-info [field]=\"field()\" />\n }\n\n @case('checkbox') {\n <lib-checkbox [field]=\"field()\" />\n }\n\n @case('textarea') {\n <lib-textarea [field]=\"field()\" />\n }\n\n @case ('button') {\n <lib-button [field]=\"field()\" />\n }\n\n @case ('tab') {\n <lib-tab [field]=\"field()\" />\n }\n\n @case ('autocomplete') {\n <lib-autocomplete [field]=\"field()\" />\n }\n\n @case ('multipleSelect') {\n <lib-multiple-select [field]=\"field()\" />\n }\n\n @case ('textboxWithSelect') {\n <lib-select-textbox [field]=\"field()\" />\n }\n\n @case ('otpTextbox') {\n <lib-otp-textbox [field]=\"field()\" />\n }\n\n @case ('amountTextbox') {\n <lib-amount-textbox [field]=\"field()\" />\n }\n\n @case ('suffixTextbox') {\n <lib-suffix-textbox [field]=\"field()\" />\n }\n\n @case ('otpMobNumber') {\n <lib-otp-mob-number [field]=\"field()\" />\n }\n\n @case ('tagMobNumber') {\n <lib-tag-mob-number [field]=\"field()\" />\n }\n\n @case ('dateWithAge') {\n <lib-age-date [field]=\"field()\" />\n }\n\n @case ('additionButton') {\n <lib-addition-button [field]=\"field()\" />\n }\n\n @case ('infoTextbox') {\n <lib-info-textbox [field]=\"field()\" />\n }\n\n @case ('textboxWithImage') {\n <lib-textbox-with-image [field]=\"field()\" />\n }\n\n @case ('emailWithDomain') {\n <lib-email-with-domain [field]=\"field()\" />\n }\n\n @case ('imageUpload') {\n <lib-image-upload [field]=\"field()\" />\n }\n\n @case ('downloadDocument') {\n <lib-download-document [field]=\"field()\" />\n }\n\n @case ('addDocument') {\n <lib-add-document [field]=\"field()\" />\n }\n\n @case ('hyperlink') {\n <lib-hyperlink [field]=\"field()\" />\n }\n\n @case ('textboxWithUnderscore') {\n <lib-textbox-with-underscore [field]=\"field()\" />\n }\n\n @case ('underscoreMobNumber') {\n <lib-underscore-mob-number [field]=\"field()\" />\n }\n\n @case ('downloadIconButton') {\n <lib-icon-button [field]=\"field()\" />\n }\n\n @case ('image') {\n <lib-image [field]=\"field()\" />\n }\n @case ('stepper') {\n <lib-stepper [field]=\"field()\" />\n }\n @case ('card') {\n <lib-card [field]=\"field()\" />\n }\n @case ('hrLine') {\n <lib-hr-line [field]=\"field()\" />\n }\n @case ('searchMultiSelect') {\n <lib-search-multi-select [field]=\"field()\" />\n }\n @case ('subscriptTextbox') {\n <lib-subscript-textbox [field]=\"field()\" />\n }\n @case ('label') {\n <lib-label [field]=\"field()\" />\n }\n @case ('subHeading') {\n <lib-sub-header [field]=\"field()\" />\n }\n @case ('heading') {\n <lib-header [field]=\"field()\" />\n }\n @case ('table') {\n <lib-table [field]=\"field()\" />\n }\n @case ('textboxWithText') {\n <lib-textbox-with-text [field]=\"field()\" />\n }\n @case ('loader') {\n <lib-loader [field]=\"field()\" />\n }\n @case ('discount') {\n <lib-discount [field]=\"field()\" />\n }\n @case ('optionalBenefitCard') {\n <lib-benefit-card [field]=\"field()\" />\n }\n @case ('errorSnackbar') {\n <lib-error-snackbar [field]=\"field()\" />\n }\n @case ('warningSnackbar') {\n <lib-warning-snackbar [field]=\"field()\" />\n }\n @case ('successSnackbar') {\n <lib-success-snackbar [field]=\"field()\" />\n }\n @case ('neutralSnackbar') {\n <lib-neutral-snackbar [field]=\"field()\" />\n }\n @case ('boldLabel') {\n <lib-grey-label [field]=\"field()\" />\n }\n @case ('iframe') {\n <lib-iframe [field]=\"field()\" />\n }\n @case ('toggleButton') {\n <lib-toggle-button [field]=\"field()\" />\n }\n @case ('payGetCard') {\n <lib-pay-get-card [field]=\"field()\" />\n }\n @case ('inBuiltBenefit') {\n <lib-in-built-benefit [field]=\"field()\" />\n }\n @case ('otherBenefit') {\n <lib-other-benefits [field]=\"field()\" />\n }\n @case ('annuityRateLogo') {\n <lib-annuity-rate-logo [field]=\"field()\" />\n }\n @case ('discountAnnuity') {\n <lib-discount-v2 [field]=\"field()\" />\n }\n @case ('labelValue'){\n <lib-label-value-card [field]=\"field()\" />\n }\n @case ('medicalQuestions'){\n <lib-medial-questions [field]=\"field()\" />\n }\n @case ('nudge'){\n <lib-page-nudge [field]=\"field()\"/>\n }\n @case ('progressBar'){\n <lib-progress-bar [field]=\"field()\"/>\n }\n @case ('accordian'){\n <lib-accordian [field]=\"field()\"/>\n }\n @case ('miscInfo'){\n <lib-miscellaneous-info-bar [field]=\"field()\"/>\n }\n @case ('plainText'){\n <lib-plain-text [field]=\"field()\"/>\n }\n @case ('menu'){\n <lib-menu [field]=\"field()\" />\n }\n @case ('stepperWithArrow') {\n <lib-stepper-with-arrow [field]=\"field()\" />\n }\n @case ('labelWithImage') {\n <lib-label-with-image [field]=\"field()\" />\n }\n @case ('motorGlowPlanDetails') {\n <lib-motor-glow-plan-details [field]=\"field()\" />\n }\n @case ('premiumToAnnuityCalculator') {\n <lib-annuity-premium-calculator [field]=\"field()\" />\n } @case ('footerProgressBar') {\n <lib-footer-design [field]=\"field()\" />\n }\n}\n", styles: [""], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "component", type: TextboxComponent, selector: "lib-textbox", inputs: ["field", "reactiveFormControlobject"], outputs: ["blur"] }, { kind: "component", type: SelectComponent, selector: "lib-select", inputs: ["field", "reactiveFormControlobject"], outputs: ["selectionChange", "infoClick"] }, { kind: "component", type: RadioComponent, selector: "lib-radio", inputs: ["reactiveFormControlobject", "field"], outputs: ["change"] }, { kind: "component", type: ToggleComponent, selector: "lib-toggle", inputs: ["field", "reactiveFormControlobject"], outputs: ["change"] }, { kind: "component", type: UploadComponent, selector: "lib-upload", inputs: ["documentUploaderField", "openQuoteImageObj", "field", "reactiveFormControlobject"], outputs: ["filesChanged", "fileRemoved", "filePreview"] }, { kind: "component", type: DobComponent, selector: "lib-dob", inputs: ["field", "reactiveFormControlobject"], outputs: ["blur", "valueChange", "dateSelected", "invalidDate"] }, { kind: "component", type: MobNumberComponent, selector: "lib-mob-number", inputs: ["field", "reactiveFormControlobject"], outputs: ["blur"] }, { kind: "component", type: InfoComponent, selector: "lib-info", inputs: ["field"] }, { kind: "component", type: CheckboxComponent, selector: "lib-checkbox", inputs: ["field", "reactiveFormControlobject"], outputs: ["change"] }, { kind: "component", type: TextareaComponent, selector: "lib-textarea", inputs: ["field", "reactiveFormControlobject"], outputs: ["blur"] }, { kind: "component", type: ButtonComponent, selector: "lib-button", inputs: ["field"] }, { kind: "component", type: TabComponent, selector: "lib-tab", inputs: ["field"], outputs: ["selectedIndexChange"] }, { kind: "component", type: AutocompleteComponent, selector: "lib-autocomplete", inputs: ["field", "reactiveFormControlobject"], outputs: ["blur", "selectionChanged", "valueChanged", "optionSelected"] }, { kind: "component", type: MultipleSelectComponent, selector: "lib-multiple-select", inputs: ["field", "reactiveFormControlobject"], outputs: ["selectionChange"] }, { kind: "component", type: SelectTextboxComponent, selector: "lib-select-textbox", inputs: ["field", "reactiveFormControlobject"], outputs: ["selectionChange"] }, { kind: "component", type: OtpTextboxComponent, selector: "lib-otp-textbox", inputs: ["field", "reactiveFormControlobject"] }, { kind: "component", type: AmountTextboxComponent, selector: "lib-amount-textbox", inputs: ["field", "reactiveFormControlobject"], outputs: ["blur"] }, { kind: "component", type: SuffixTextboxComponent, selector: "lib-suffix-textbox", inputs: ["field", "reactiveFormControlobject"], outputs: ["blur"] }, { kind: "component", type: OtpMobNumberComponent, selector: "lib-otp-mob-number", inputs: ["field", "reactiveFormControlobject"] }, { kind: "component", type: TagMobNumberComponent, selector: "lib-tag-mob-number", inputs: ["field", "reactiveFormControlobject"] }, { kind: "component", type: AgeDateComponent, selector: "lib-age-date", inputs: ["field", "reactiveFormControlobject"], outputs: ["blur", "valueChange", "dateSelected", "invalidDate"] }, { kind: "component", type: AdditionButtonComponent, selector: "lib-addition-button", inputs: ["field"] }, { kind: "component", type: InfoTextboxComponent, selector: "lib-info-textbox", inputs: ["field", "reactiveFormControlobject", "fields"], outputs: ["infoClick"] }, { kind: "component", type: TextboxWithImageComponent, selector: "lib-textbox-with-image", inputs: ["field", "reactiveFormControlobject"], outputs: ["blur"] }, { kind: "component", type: EmailWithDomainComponent, selector: "lib-email-with-domain", inputs: ["field", "reactiveFormControlobject"] }, { kind: "component", type: ImageUploadComponent, selector: "lib-image-upload", inputs: ["field"] }, { kind: "component", type: DownloadDocumentComponent, selector: "lib-download-document", inputs: ["field"] }, { kind: "component", type: AddDocumentComponent, selector: "lib-add-document", inputs: ["field"] }, { kind: "component", type: HyperlinkComponent, selector: "lib-hyperlink", inputs: ["field"] }, { kind: "component", type: TextboxWithUnderscoreComponent, selector: "lib-textbox-with-underscore", inputs: ["field", "reactiveFormControlobject"] }, { kind: "component", type: UnderscoreMobNumberComponent, selector: "lib-underscore-mob-number", inputs: ["field", "reactiveFormControlobject"] }, { kind: "component", type: IconButtonComponent, selector: "lib-icon-button", inputs: ["field"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: ImageComponent, selector: "lib-image", inputs: ["field"] }, { kind: "component", type: StepperComponent, selector: "lib-stepper", inputs: ["field"] }, { kind: "component", type: CardComponent, selector: "lib-card", inputs: ["field"], outputs: ["cardDetailsClicked"] }, { kind: "component", type: HrLineComponent, selector: "lib-hr-line", inputs: ["field"] }, { kind: "component", type: SearchMultiSelectComponent, selector: "lib-search-multi-select", inputs: ["field", "reactiveFormControlobject"] }, { kind: "component", type: SubscriptTextboxComponent, selector: "lib-subscript-textbox", inputs: ["field", "reactiveFormControlobject"] }, { kind: "component", type: LabelComponent, selector: "lib-label", inputs: ["field"] }, { kind: "component", type: SubHeaderComponent, selector: "lib-sub-header", inputs: ["field"] }, { kind: "component", type: HeaderComponent, selector: "lib-header", inputs: ["field"] }, { kind: "component", type: TextboxWithTextComponent, selector: "lib-textbox-with-text", inputs: ["reactiveFormControlobject", "field"], outputs: ["blur"] }, { kind: "component", type: DiscountComponent, selector: "lib-discount", inputs: ["field"] }, { kind: "component", type: BenefitCardComponent, selector: "lib-benefit-card", inputs: ["field"] }, { kind: "component", type: TableComponent, selector: "lib-table", inputs: ["field", "readonly"], outputs: ["actionItemClicked", "tablePaginationClicked"] }, { kind: "component", type: LoaderComponent, selector: "lib-loader", inputs: ["field"] }, { kind: "component", type: WarningSnackbarComponent, selector: "lib-warning-snackbar", inputs: ["field"] }, { kind: "component", type: SuccessSnackbarComponent, selector: "lib-success-snackbar", inputs: ["field"] }, { kind: "component", type: NeutralSnackbarComponent, selector: "lib-neutral-snackbar", inputs: ["field"] }, { kind: "component", type: ErrorSnackbarComponent, selector: "lib-error-snackbar", inputs: ["field"] }, { kind: "component", type: GreyLabelComponent, selector: "lib-grey-label", inputs: ["field"] }, { kind: "component", type: IframeComponent, selector: "lib-iframe", inputs: ["field"] }, { kind: "component", type: ToggleButtonComponent, selector: "lib-toggle-button", inputs: ["reactiveFormControlobject", "field"], outputs: ["selectionChanged", "change"] }, { kind: "component", type: PayGetCardComponent, selector: "lib-pay-get-card", inputs: ["field", "payAmount", "premiumAmount", "ptValue", "years", "frequency", "payamountOptions"] }, { kind: "component", type: InBuiltBenefitComponent, selector: "lib-in-built-benefit", inputs: ["field", "premiumAmount", "premiumAmountShort"] }, { kind: "component", type: OtherBenefitsComponent, selector: "lib-other-benefits", inputs: ["field"] }, { kind: "component", type: AnnuityRateLogoComponent, selector: "lib-annuity-rate-logo", inputs: ["field", "ratePercent"] }, { kind: "component", type: DiscountV2Component, selector: "lib-discount-v2", inputs: ["field"] }, { kind: "component", type: LabelValueCardComponent, selector: "lib-label-value-card", inputs: ["field"] }, { kind: "component", type: MedialQuestionsComponent, selector: "lib-medial-questions", inputs: ["triggerValidation", "medialQuestionResponse", "personUWOpenQuoteResponse", "defaultValues", "personType", "field"], outputs: ["questionsValueChange"] }, { kind: "component", type: PageNudgeComponent, selector: "lib-page-nudge", inputs: ["field"] }, { kind: "component", type: ProgressBarComponent, selector: "lib-progress-bar", inputs: ["field"] }, { kind: "component", type: AccordianComponent, selector: "lib-accordian", inputs: ["field"] }, { kind: "component", type: MiscellaneousInfoBarComponent, selector: "lib-miscellaneous-info-bar", inputs: ["field", "details"] }, { kind: "component", type: PlainTextComponent, selector: "lib-plain-text", inputs: ["field"] }, { kind: "component", type: MenuComponent, selector: "lib-menu", inputs: ["field"] }, { kind: "component", type: StepperWIthArrowComponent, selector: "lib-stepper-with-arrow", inputs: ["field", "currentStepValue", "autoProgress", "autoProgressDelay"], outputs: ["selectedStep"] }, { kind: "component", type: LabelWithImageComponent, selector: "lib-label-with-image", inputs: ["field"] }, { kind: "component", type: TopHeaderComponent, selector: "lib-top-header", inputs: ["field"] }, { kind: "component", type: FooterComponent, selector: "lib-footer", inputs: ["field"] }, { kind: "component", type: FooterWithButtonsComponent, selector: "lib-footer-with-buttons", inputs: ["field"] }, { kind: "component", type: MotorGlowPlanDetailsComponent, selector: "lib-motor-glow-plan-details", inputs: ["field"], outputs: ["editPlanClick"] }, { kind: "component", type: AnnuityPremiumCalculatorComponent, selector: "lib-annuity-premium-calculator", inputs: ["field", "premiumDetails"], outputs: ["onCalcualteButtonClick", "onGenerateSummaryClick", "onAnnuityPremiumChange", "onMinimumPremiumValueChange", "onAutioDebitValueChange", "onGuranteedAnnuityValueChange", "onDigitBossSwitchToggle"] }, { kind: "component", type: FooterDesignComponent, selector: "lib-footer-design", inputs: ["field"] }] });
|
|
7581
7691
|
}
|
|
7582
7692
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MasterControlComponent, decorators: [{
|
|
7583
7693
|
type: Component,
|