master-control 0.4.53 → 0.4.54
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/checkbox/checkbox.component.mjs +3 -3
- package/esm2022/lib/dob/dob.component.mjs +3 -3
- package/esm2022/lib/medial-questions/medial-questions.component.mjs +9 -6
- package/esm2022/lib/multiple-select/multiple-select.component.mjs +3 -3
- package/esm2022/lib/radio/radio.component.mjs +3 -3
- package/esm2022/lib/select/select.component.mjs +3 -3
- package/esm2022/lib/textbox/textbox.component.mjs +3 -3
- package/esm2022/lib/upload/upload.component.mjs +3 -3
- package/fesm2022/master-control.mjs +22 -19
- package/fesm2022/master-control.mjs.map +1 -1
- package/master-control-0.4.54.tgz +0 -0
- package/package.json +1 -1
- package/master-control-0.4.53.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 [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"] }] });
|
|
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 ' + field()?.fieldName\"\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 [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"] }]
|
|
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 ' + field()?.fieldName\"\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
|
}] } });
|
|
@@ -700,7 +700,7 @@ class SelectComponent {
|
|
|
700
700
|
useExisting: SelectComponent,
|
|
701
701
|
multi: true
|
|
702
702
|
}
|
|
703
|
-
], ngImport: i0, template: "<label class=\"field-lable info-label\" *ngIf=\"field() && field()?.isVisible && field().isShowLabel\">\n <span>{{ field()?.label}}<span style=\"color: red\" *ngIf=\"field() && field()?.validators?.isRequired\">*</span></span>\n <!-- <span style=\"justify-content: end;\" *ngIf=\"field() && field()?.configData?.infoMessage\">\n <img class=\"mx-1\" src=\"https://cdn.godigit.com/retail-life/question-mark.svg\" alt=\"\">\n <u>{{field()?.configData?.infoMessage}} ></u>\n </span>\\ -->\n <span class=\"info-content\" *ngIf=\"configData.isInfoMsgVisible\">\n <img class=\"mx-1\" *ngIf=\"field()?.configData?.imageURL\" [src]=\"field()?.configData?.imageURL\" alt=\"\">\n <u style=\"cursor: pointer;\" (click)=\"handleWhereToFindClick()\">{{field()?.configData?.infoMsg}}</u>\n <span [appTooltipTemplate]=\"HtmlContent\" arrowPosition=\"left\" tooltipPosition=\"bottom\">\n <img [src]=\"field().imageUrl\" class=\"toggle-img mx-1\" />\n </span>\n </span>\n <ng-template #HtmlContent>\n <span [innerHTML]=\"field().configData?.infoMessage\"></span>\n </ng-template>\n\n</label>\n\n<mat-form-field appearance=\"outline\" class=\"input-full-width full-width w-100\" [class.dropdown-open]=\"isDropdownOpen\" *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-color-disabled' : field()?.controlStyle?.disableColor ,\n'--custom-bg-color-disabled' : field()?.controlStyle?.disableBackground ,\n }\">\n @if(reactiveFormControlobject()) {\n <mat-select [id]=\"field()?.fieldName\" [attr.name]=\"field()?.fieldName\" [required]=\"field()?.validators?.isRequired\"\n [placeholder]=\"field()?.placeHolder\" [disabled]=\"field()?.isDisable\" (openedChange)=\"onSelectOpened($event)\"\n [value]=\"inputValue\" (selectionChange)=\"selectionChanged($event)\" [formControl]=\"reactiveFormControlobject()\">\n <mat-option *ngFor=\"let data of field()?.options\" [id]=\"data.value\" [value]=\"data.value\">{{\n data.label\n }}</mat-option>\n </mat-select>\n }@else {\n <mat-select [id]=\"field()?.fieldName\" [attr.name]=\"field()?.fieldName\" [required]=\"field()?.validators?.isRequired\"\n [placeholder]=\"field()?.placeHolder\" [disabled]=\"field()?.isDisable\" (openedChange)=\"onSelectOpened($event)\"\n [value]=\"inputValue\" (selectionChange)=\"selectionChanged($event)\">\n <mat-option *ngFor=\"let data of field()?.options\" [id]=\"data.value\" [value]=\"data.value\">{{\n data.label\n }}</mat-option>\n </mat-select>\n }\n\n <!-- selectField.invalid && (selectField.dirty || selectField.touched) -->\n <mat-error *ngIf=\"false\">\n {{ field()?.validators?.isRequiredMessage }}\n </mat-error>\n</mat-form-field>\n<div class=\"error-message mt-2\" *ngIf=\"false\">\n {{ field()?.validators?.isRequiredMessage }}\n</div>\n", styles: [".field-lable{font-size:12px!important;font-weight:700!important;color:#444!important;margin-bottom:0!important;display:flex;justify-content:space-between;align-items:center}.error-message{color:red}.info-content{display:flex;align-items:center;margin-left:auto}::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 .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-form-field .mat-mdc-select-placeholder{color:#8f8f8f!important;font-size:12px!important}*{font-family:mulish!important}.info-label{display:flex;justify-content:start}.toggle-img{width:12px}@media screen and (max-width: 768px){.toggle-img{width:16px}}::ng-deep .mat-mdc-select{display:grid!important;width:auto!important}:host ::ng-deep .mat-mdc-select-value-text{caret-color:var(--custom-caret-color, #ffbb00)!important;font-size:14px!important;font-weight:var(--custom-font-weight, 400)!important;font-family:var(--custom-font-family, \"Mulish\")!important;color:var(--custom-font-color, #444444)!important}@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}}::ng-deep .mat-mdc-form-field.dropdown-open .mat-mdc-select-arrow{transform:rotate(225deg)!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: "component", type: i6.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: FormsModule }, { 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: "ngmodule", type: MatOptionModule }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: CustomizedTooltipDirective, selector: "[appTooltipTemplate]", inputs: ["appTooltipTemplate"] }] });
|
|
703
|
+
], ngImport: i0, template: "<label class=\"field-lable info-label\" *ngIf=\"field() && field()?.isVisible && field().isShowLabel\">\n <span>{{ field()?.label}}<span style=\"color: red\" *ngIf=\"field() && field()?.validators?.isRequired\">*</span></span>\n <!-- <span style=\"justify-content: end;\" *ngIf=\"field() && field()?.configData?.infoMessage\">\n <img class=\"mx-1\" src=\"https://cdn.godigit.com/retail-life/question-mark.svg\" alt=\"\">\n <u>{{field()?.configData?.infoMessage}} ></u>\n </span>\\ -->\n <span class=\"info-content\" *ngIf=\"configData.isInfoMsgVisible\">\n <img class=\"mx-1\" *ngIf=\"field()?.configData?.imageURL\" [src]=\"field()?.configData?.imageURL\" alt=\"\">\n <u style=\"cursor: pointer;\" (click)=\"handleWhereToFindClick()\">{{field()?.configData?.infoMsg}}</u>\n <span [appTooltipTemplate]=\"HtmlContent\" arrowPosition=\"left\" tooltipPosition=\"bottom\">\n <img [src]=\"field().imageUrl\" class=\"toggle-img mx-1\" />\n </span>\n </span>\n <ng-template #HtmlContent>\n <span [innerHTML]=\"field().configData?.infoMessage\"></span>\n </ng-template>\n\n</label>\n\n<mat-form-field appearance=\"outline\" [class]=\"'input-full-width full-width w-100 ' + field()?.fieldName\" [class.dropdown-open]=\"isDropdownOpen\" *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-color-disabled' : field()?.controlStyle?.disableColor ,\n'--custom-bg-color-disabled' : field()?.controlStyle?.disableBackground ,\n }\">\n @if(reactiveFormControlobject()) {\n <mat-select [id]=\"field()?.fieldName\" [attr.name]=\"field()?.fieldName\" [required]=\"field()?.validators?.isRequired\"\n [placeholder]=\"field()?.placeHolder\" [disabled]=\"field()?.isDisable\" (openedChange)=\"onSelectOpened($event)\"\n [value]=\"inputValue\" (selectionChange)=\"selectionChanged($event)\" [formControl]=\"reactiveFormControlobject()\">\n <mat-option *ngFor=\"let data of field()?.options\" [id]=\"data.value\" [value]=\"data.value\">{{\n data.label\n }}</mat-option>\n </mat-select>\n }@else {\n <mat-select [id]=\"field()?.fieldName\" [attr.name]=\"field()?.fieldName\" [required]=\"field()?.validators?.isRequired\"\n [placeholder]=\"field()?.placeHolder\" [disabled]=\"field()?.isDisable\" (openedChange)=\"onSelectOpened($event)\"\n [value]=\"inputValue\" (selectionChange)=\"selectionChanged($event)\">\n <mat-option *ngFor=\"let data of field()?.options\" [id]=\"data.value\" [value]=\"data.value\">{{\n data.label\n }}</mat-option>\n </mat-select>\n }\n\n <!-- selectField.invalid && (selectField.dirty || selectField.touched) -->\n <mat-error *ngIf=\"false\">\n {{ field()?.validators?.isRequiredMessage }}\n </mat-error>\n</mat-form-field>\n<div class=\"error-message mt-2\" *ngIf=\"false\">\n {{ field()?.validators?.isRequiredMessage }}\n</div>\n", styles: [".field-lable{font-size:12px!important;font-weight:700!important;color:#444!important;margin-bottom:0!important;display:flex;justify-content:space-between;align-items:center}.error-message{color:red}.info-content{display:flex;align-items:center;margin-left:auto}::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 .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-form-field .mat-mdc-select-placeholder{color:#8f8f8f!important;font-size:12px!important}*{font-family:mulish!important}.info-label{display:flex;justify-content:start}.toggle-img{width:12px}@media screen and (max-width: 768px){.toggle-img{width:16px}}::ng-deep .mat-mdc-select{display:grid!important;width:auto!important}:host ::ng-deep .mat-mdc-select-value-text{caret-color:var(--custom-caret-color, #ffbb00)!important;font-size:14px!important;font-weight:var(--custom-font-weight, 400)!important;font-family:var(--custom-font-family, \"Mulish\")!important;color:var(--custom-font-color, #444444)!important}@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}}::ng-deep .mat-mdc-form-field.dropdown-open .mat-mdc-select-arrow{transform:rotate(225deg)!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: "component", type: i6.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: FormsModule }, { 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: "ngmodule", type: MatOptionModule }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: CustomizedTooltipDirective, selector: "[appTooltipTemplate]", inputs: ["appTooltipTemplate"] }] });
|
|
704
704
|
}
|
|
705
705
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SelectComponent, decorators: [{
|
|
706
706
|
type: Component,
|
|
@@ -720,7 +720,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
720
720
|
useExisting: SelectComponent,
|
|
721
721
|
multi: true
|
|
722
722
|
}
|
|
723
|
-
], template: "<label class=\"field-lable info-label\" *ngIf=\"field() && field()?.isVisible && field().isShowLabel\">\n <span>{{ field()?.label}}<span style=\"color: red\" *ngIf=\"field() && field()?.validators?.isRequired\">*</span></span>\n <!-- <span style=\"justify-content: end;\" *ngIf=\"field() && field()?.configData?.infoMessage\">\n <img class=\"mx-1\" src=\"https://cdn.godigit.com/retail-life/question-mark.svg\" alt=\"\">\n <u>{{field()?.configData?.infoMessage}} ></u>\n </span>\\ -->\n <span class=\"info-content\" *ngIf=\"configData.isInfoMsgVisible\">\n <img class=\"mx-1\" *ngIf=\"field()?.configData?.imageURL\" [src]=\"field()?.configData?.imageURL\" alt=\"\">\n <u style=\"cursor: pointer;\" (click)=\"handleWhereToFindClick()\">{{field()?.configData?.infoMsg}}</u>\n <span [appTooltipTemplate]=\"HtmlContent\" arrowPosition=\"left\" tooltipPosition=\"bottom\">\n <img [src]=\"field().imageUrl\" class=\"toggle-img mx-1\" />\n </span>\n </span>\n <ng-template #HtmlContent>\n <span [innerHTML]=\"field().configData?.infoMessage\"></span>\n </ng-template>\n\n</label>\n\n<mat-form-field appearance=\"outline\" class=\"input-full-width full-width w-100\" [class.dropdown-open]=\"isDropdownOpen\" *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-color-disabled' : field()?.controlStyle?.disableColor ,\n'--custom-bg-color-disabled' : field()?.controlStyle?.disableBackground ,\n }\">\n @if(reactiveFormControlobject()) {\n <mat-select [id]=\"field()?.fieldName\" [attr.name]=\"field()?.fieldName\" [required]=\"field()?.validators?.isRequired\"\n [placeholder]=\"field()?.placeHolder\" [disabled]=\"field()?.isDisable\" (openedChange)=\"onSelectOpened($event)\"\n [value]=\"inputValue\" (selectionChange)=\"selectionChanged($event)\" [formControl]=\"reactiveFormControlobject()\">\n <mat-option *ngFor=\"let data of field()?.options\" [id]=\"data.value\" [value]=\"data.value\">{{\n data.label\n }}</mat-option>\n </mat-select>\n }@else {\n <mat-select [id]=\"field()?.fieldName\" [attr.name]=\"field()?.fieldName\" [required]=\"field()?.validators?.isRequired\"\n [placeholder]=\"field()?.placeHolder\" [disabled]=\"field()?.isDisable\" (openedChange)=\"onSelectOpened($event)\"\n [value]=\"inputValue\" (selectionChange)=\"selectionChanged($event)\">\n <mat-option *ngFor=\"let data of field()?.options\" [id]=\"data.value\" [value]=\"data.value\">{{\n data.label\n }}</mat-option>\n </mat-select>\n }\n\n <!-- selectField.invalid && (selectField.dirty || selectField.touched) -->\n <mat-error *ngIf=\"false\">\n {{ field()?.validators?.isRequiredMessage }}\n </mat-error>\n</mat-form-field>\n<div class=\"error-message mt-2\" *ngIf=\"false\">\n {{ field()?.validators?.isRequiredMessage }}\n</div>\n", styles: [".field-lable{font-size:12px!important;font-weight:700!important;color:#444!important;margin-bottom:0!important;display:flex;justify-content:space-between;align-items:center}.error-message{color:red}.info-content{display:flex;align-items:center;margin-left:auto}::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 .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-form-field .mat-mdc-select-placeholder{color:#8f8f8f!important;font-size:12px!important}*{font-family:mulish!important}.info-label{display:flex;justify-content:start}.toggle-img{width:12px}@media screen and (max-width: 768px){.toggle-img{width:16px}}::ng-deep .mat-mdc-select{display:grid!important;width:auto!important}:host ::ng-deep .mat-mdc-select-value-text{caret-color:var(--custom-caret-color, #ffbb00)!important;font-size:14px!important;font-weight:var(--custom-font-weight, 400)!important;font-family:var(--custom-font-family, \"Mulish\")!important;color:var(--custom-font-color, #444444)!important}@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}}::ng-deep .mat-mdc-form-field.dropdown-open .mat-mdc-select-arrow{transform:rotate(225deg)!important}\n"] }]
|
|
723
|
+
], template: "<label class=\"field-lable info-label\" *ngIf=\"field() && field()?.isVisible && field().isShowLabel\">\n <span>{{ field()?.label}}<span style=\"color: red\" *ngIf=\"field() && field()?.validators?.isRequired\">*</span></span>\n <!-- <span style=\"justify-content: end;\" *ngIf=\"field() && field()?.configData?.infoMessage\">\n <img class=\"mx-1\" src=\"https://cdn.godigit.com/retail-life/question-mark.svg\" alt=\"\">\n <u>{{field()?.configData?.infoMessage}} ></u>\n </span>\\ -->\n <span class=\"info-content\" *ngIf=\"configData.isInfoMsgVisible\">\n <img class=\"mx-1\" *ngIf=\"field()?.configData?.imageURL\" [src]=\"field()?.configData?.imageURL\" alt=\"\">\n <u style=\"cursor: pointer;\" (click)=\"handleWhereToFindClick()\">{{field()?.configData?.infoMsg}}</u>\n <span [appTooltipTemplate]=\"HtmlContent\" arrowPosition=\"left\" tooltipPosition=\"bottom\">\n <img [src]=\"field().imageUrl\" class=\"toggle-img mx-1\" />\n </span>\n </span>\n <ng-template #HtmlContent>\n <span [innerHTML]=\"field().configData?.infoMessage\"></span>\n </ng-template>\n\n</label>\n\n<mat-form-field appearance=\"outline\" [class]=\"'input-full-width full-width w-100 ' + field()?.fieldName\" [class.dropdown-open]=\"isDropdownOpen\" *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-color-disabled' : field()?.controlStyle?.disableColor ,\n'--custom-bg-color-disabled' : field()?.controlStyle?.disableBackground ,\n }\">\n @if(reactiveFormControlobject()) {\n <mat-select [id]=\"field()?.fieldName\" [attr.name]=\"field()?.fieldName\" [required]=\"field()?.validators?.isRequired\"\n [placeholder]=\"field()?.placeHolder\" [disabled]=\"field()?.isDisable\" (openedChange)=\"onSelectOpened($event)\"\n [value]=\"inputValue\" (selectionChange)=\"selectionChanged($event)\" [formControl]=\"reactiveFormControlobject()\">\n <mat-option *ngFor=\"let data of field()?.options\" [id]=\"data.value\" [value]=\"data.value\">{{\n data.label\n }}</mat-option>\n </mat-select>\n }@else {\n <mat-select [id]=\"field()?.fieldName\" [attr.name]=\"field()?.fieldName\" [required]=\"field()?.validators?.isRequired\"\n [placeholder]=\"field()?.placeHolder\" [disabled]=\"field()?.isDisable\" (openedChange)=\"onSelectOpened($event)\"\n [value]=\"inputValue\" (selectionChange)=\"selectionChanged($event)\">\n <mat-option *ngFor=\"let data of field()?.options\" [id]=\"data.value\" [value]=\"data.value\">{{\n data.label\n }}</mat-option>\n </mat-select>\n }\n\n <!-- selectField.invalid && (selectField.dirty || selectField.touched) -->\n <mat-error *ngIf=\"false\">\n {{ field()?.validators?.isRequiredMessage }}\n </mat-error>\n</mat-form-field>\n<div class=\"error-message mt-2\" *ngIf=\"false\">\n {{ field()?.validators?.isRequiredMessage }}\n</div>\n", styles: [".field-lable{font-size:12px!important;font-weight:700!important;color:#444!important;margin-bottom:0!important;display:flex;justify-content:space-between;align-items:center}.error-message{color:red}.info-content{display:flex;align-items:center;margin-left:auto}::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 .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-form-field .mat-mdc-select-placeholder{color:#8f8f8f!important;font-size:12px!important}*{font-family:mulish!important}.info-label{display:flex;justify-content:start}.toggle-img{width:12px}@media screen and (max-width: 768px){.toggle-img{width:16px}}::ng-deep .mat-mdc-select{display:grid!important;width:auto!important}:host ::ng-deep .mat-mdc-select-value-text{caret-color:var(--custom-caret-color, #ffbb00)!important;font-size:14px!important;font-weight:var(--custom-font-weight, 400)!important;font-family:var(--custom-font-family, \"Mulish\")!important;color:var(--custom-font-color, #444444)!important}@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}}::ng-deep .mat-mdc-form-field.dropdown-open .mat-mdc-select-arrow{transform:rotate(225deg)!important}\n"] }]
|
|
724
724
|
}], ctorParameters: () => [{ type: MasterControlService }], propDecorators: { selectionChange: [{
|
|
725
725
|
type: Output
|
|
726
726
|
}], infoClick: [{
|
|
@@ -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
|
|
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 radio-btn-group radio-btn-gender ' + field()?.fieldName\" *ngIf=\"field() && field()?.isVisible\"\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 radio-btn-group radio-btn-gender ' + field()?.fieldName\" *ngIf=\"field() && field()?.isVisible\"\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
|
|
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 radio-btn-group radio-btn-gender ' + field()?.fieldName\" *ngIf=\"field() && field()?.isVisible\"\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 radio-btn-group radio-btn-gender ' + field()?.fieldName\" *ngIf=\"field() && field()?.isVisible\"\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
|
}] } });
|
|
@@ -1183,7 +1183,7 @@ class UploadComponent {
|
|
|
1183
1183
|
useExisting: UploadComponent,
|
|
1184
1184
|
multi: true
|
|
1185
1185
|
}
|
|
1186
|
-
], viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<label class=\"field-lable upload-label\" *ngIf=\"field() && field()?.isVisible && field()?.isShowLabel\">{{field()?.label}}<span style=\"color: red\" *ngIf=\"field() && field()?.validators?.isRequired\">*</span></label>\n @if(reactiveFormControlobject()) {\n <input\n hidden\n [type]=\"field()?.controlType\"\n [name]=\"field()?.fieldName\"\n [id]=\"field()?.fieldName\"\n [multiple]=\"field()?.configData?.multiple\"\n [accept]=\"field()?.configData?.accept\"\n #fileInput\n (change)=\"onFileSelected($event)\"\n (click)=\"fileInput.value = ''\"\n [required]=\"field()?.validators?.isRequired\"\n [disabled]=\"field()?.isDisable\"\n [formControl]=\"reactiveFormControlobject()\"\n />\n }@else {\n <input\n hidden\n [type]=\"field()?.controlType\"\n [name]=\"field()?.fieldName\"\n [id]=\"field()?.fieldName\"\n [multiple]=\"field()?.configData?.multiple\"\n [accept]=\"field()?.configData?.accept\"\n #fileInput\n (change)=\"onFileSelected($event)\"\n (click)=\"fileInput.value = ''\"\n [required]=\"field()?.validators?.isRequired\"\n [disabled]=\"field()?.isDisable\"\n />\n }\n <button\n type=\"button\"\n class=\"upload-btn\"\n (click)=\"triggerFileInput()\"\n [ngClass]=\"field()?.label ? 'lightbackground' : 'successBackground'\"\n *ngIf=\"field() && field()?.isVisible\"\n [disabled]=\"field()?.isDisable\"\n [ngStyle]=\"{\n'--upload-width': field()?.controlStyle?.width ,\n'--upload-height': field()?.controlStyle?.height ,\n'--upload-border-radius': field()?.controlStyle?.borderRadius ,\n'--upload-border-color': field()?.controlStyle?.borderColor ,\n'--upload-border-width': field()?.controlStyle?.borderWidth ,\n'--upload-border-style': field()?.controlStyle?.borderStyle ,\n'--upload-background-color': field()?.controlStyle?.background ,\n'--upload-focus-border-color': field()?.controlStyle?.focusBorderColor ,\n'--upload-focus-background-color': field()?.controlStyle?.focusBackground ,\n}\"\n >\n <ng-container *ngIf=\"field()?.label && !hasFiles(); else fileUploadedTemplate\">\n <span class=\"upload-icon\">\n <span\n ><img [src]=\"field()?.imageUrl\" alt=\"\" [style.height]=\"field()?.controlStyle?.imageHeight\"/></span>\n <span class=\"upload-text\" [ngStyle]=\"{\n'--upload-font-color': field()?.controlStyle?.color ,\n'--upload-font-size': field()?.controlStyle?.fontSize ,\n'--upload-font-weight': field()?.controlStyle?.fontWeight,\n'--upload-focus-font-color': field()?.controlStyle?.focusColor ,\n}\">{{ field()?.placeHolder }} <span style=\"color: red\" *ngIf=\"field() && field()?.validators?.isRequired\">*</span></span>\n </span>\n </ng-container>\n <ng-template #fileUploadedTemplate>\n <div *ngFor=\"let file of uploadedFiles; let i = index\" class=\"uploaded-file d-flex gap-4\" style=\"transform: translate(0px, -3px);\">\n <span class=\"mt-2 right-icon\" style=\" white-space: nowrap !important;\n overflow: hidden !important;\n text-overflow: ellipsis !important;\">\n <span><img [src]=\"field()?.imageUrl\" alt=\"\" [style.height]=\"field()?.controlStyle?.imageHeight\"/></span>\n <span [title]=\"file.name\" class=\"upload-text\" [ngStyle]=\"{\n'--upload-font-color': field()?.controlStyle?.color ,\n'--upload-font-size': field()?.controlStyle?.fontSize ,\n'--upload-font-weight': field()?.controlStyle?.fontWeight,\n'--upload-focus-font-color': field()?.controlStyle?.focusColor ,\n}\">{{ file.name }}</span>\n </span>\n <div class=\"mt-2 left-icon\">\n <span (click)=\"previewFile(file, i, $event)\" style=\"cursor: pointer;\"><img src=\"https://cdn.godigit.com/retail-life/visibility-oui.svg\" alt=\"\"/></span>\n <span (click)=\"removeFile(i, $event)\" style=\"cursor: pointer;\" *ngIf=\"!field()?.isDisable\">\n <img src=\"https://cdn.godigit.com/retail-life/delete-oui.svg\" alt=\"\"/>\n </span>\n </div>\n </div>\n </ng-template>\n </button>\n <div class=\"upload-info\" *ngIf=\"field() && field()?.isVisible && field()?.configData?.subText\">{{field()?.configData?.subText}}</div>\n", styles: ["*{font-family:mulish!important}.field-lable{font-size:12px!important;font-weight:700!important;color:#444!important;margin-bottom:0!important}.upload-label{opacity:1}.upload-btn{width:100%!important;height:var(--upload-height, 48px)!important;border-radius:.5rem;display:flex;align-items:center;justify-content:center}.upload-btn{width:var(--upload-width , 100%)!important;border-radius:var(--upload-border-radius , 8px)!important}.lightbackground{border-color:#999;border-width:1px;border-style:dashed;background:#fff;color:#444;font-size:14px;font-weight:700}.lightbackground{border-color:var(--upload-border-color , #999)!important;border-width:var(--upload-border-width , 1px)!important;border-style:var(--upload-border-style , dashed)!important;background:var(--upload-background-color , #ffffff)!important}.successBackground{border-color:var(--upload-focus-border-color , #ddd)!important;background:var(--upload-focus-background-color , #fafafa)!important;color:var(--upload-focus-font-color , #444)!important}.successBackground{border:1px dashed #ddd;background:#fafafa;color:#444;display:flex;justify-content:space-between}.upload-icon{display:flex;justify-content:center;gap:7px}.upload-text{color:#444!important;font-weight:700!important;font-size:14px!important}.upload-text{color:var(--upload-font-color , #444)!important;font-size:var( --upload-font-size , 14px)!important;font-weight:var(--upload-font-weight , 700)!important}.right-icon{display:flex;gap:10px;margin-left:.5em}.left-icon{display:flex;gap:15px;margin-right:1em}.upload-info{font-size:10px;font-weight:500;font-family:Mulish!important;letter-spacing:0px;color:#444}\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: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { 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.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: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
|
|
1186
|
+
], viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<label class=\"field-lable upload-label\" *ngIf=\"field() && field()?.isVisible && field()?.isShowLabel\">{{field()?.label}}<span style=\"color: red\" *ngIf=\"field() && field()?.validators?.isRequired\">*</span></label>\n @if(reactiveFormControlobject()) {\n <input\n hidden\n [type]=\"field()?.controlType\"\n [name]=\"field()?.fieldName\"\n [id]=\"field()?.fieldName\"\n [multiple]=\"field()?.configData?.multiple\"\n [accept]=\"field()?.configData?.accept\"\n #fileInput\n (change)=\"onFileSelected($event)\"\n (click)=\"fileInput.value = ''\"\n [required]=\"field()?.validators?.isRequired\"\n [disabled]=\"field()?.isDisable\"\n [formControl]=\"reactiveFormControlobject()\"\n [class]=\"field()?.fieldName\"\n />\n }@else {\n <input\n hidden\n [type]=\"field()?.controlType\"\n [name]=\"field()?.fieldName\"\n [id]=\"field()?.fieldName\"\n [multiple]=\"field()?.configData?.multiple\"\n [accept]=\"field()?.configData?.accept\"\n #fileInput\n (change)=\"onFileSelected($event)\"\n (click)=\"fileInput.value = ''\"\n [required]=\"field()?.validators?.isRequired\"\n [disabled]=\"field()?.isDisable\"\n [class]=\"field()?.fieldName\"\n />\n }\n <button\n type=\"button\"\n class=\"upload-btn\"\n (click)=\"triggerFileInput()\"\n [ngClass]=\"field()?.label ? 'lightbackground' : 'successBackground'\"\n *ngIf=\"field() && field()?.isVisible\"\n [disabled]=\"field()?.isDisable\"\n [ngStyle]=\"{\n'--upload-width': field()?.controlStyle?.width ,\n'--upload-height': field()?.controlStyle?.height ,\n'--upload-border-radius': field()?.controlStyle?.borderRadius ,\n'--upload-border-color': field()?.controlStyle?.borderColor ,\n'--upload-border-width': field()?.controlStyle?.borderWidth ,\n'--upload-border-style': field()?.controlStyle?.borderStyle ,\n'--upload-background-color': field()?.controlStyle?.background ,\n'--upload-focus-border-color': field()?.controlStyle?.focusBorderColor ,\n'--upload-focus-background-color': field()?.controlStyle?.focusBackground ,\n}\"\n >\n <ng-container *ngIf=\"field()?.label && !hasFiles(); else fileUploadedTemplate\">\n <span class=\"upload-icon\">\n <span\n ><img [src]=\"field()?.imageUrl\" alt=\"\" [style.height]=\"field()?.controlStyle?.imageHeight\"/></span>\n <span class=\"upload-text\" [ngStyle]=\"{\n'--upload-font-color': field()?.controlStyle?.color ,\n'--upload-font-size': field()?.controlStyle?.fontSize ,\n'--upload-font-weight': field()?.controlStyle?.fontWeight,\n'--upload-focus-font-color': field()?.controlStyle?.focusColor ,\n}\">{{ field()?.placeHolder }} <span style=\"color: red\" *ngIf=\"field() && field()?.validators?.isRequired\">*</span></span>\n </span>\n </ng-container>\n <ng-template #fileUploadedTemplate>\n <div *ngFor=\"let file of uploadedFiles; let i = index\" class=\"uploaded-file d-flex gap-4\" style=\"transform: translate(0px, -3px);\">\n <span class=\"mt-2 right-icon\" style=\" white-space: nowrap !important;\n overflow: hidden !important;\n text-overflow: ellipsis !important;\">\n <span><img [src]=\"field()?.imageUrl\" alt=\"\" [style.height]=\"field()?.controlStyle?.imageHeight\"/></span>\n <span [title]=\"file.name\" class=\"upload-text\" [ngStyle]=\"{\n'--upload-font-color': field()?.controlStyle?.color ,\n'--upload-font-size': field()?.controlStyle?.fontSize ,\n'--upload-font-weight': field()?.controlStyle?.fontWeight,\n'--upload-focus-font-color': field()?.controlStyle?.focusColor ,\n}\">{{ file.name }}</span>\n </span>\n <div class=\"mt-2 left-icon\">\n <span (click)=\"previewFile(file, i, $event)\" style=\"cursor: pointer;\"><img src=\"https://cdn.godigit.com/retail-life/visibility-oui.svg\" alt=\"\"/></span>\n <span (click)=\"removeFile(i, $event)\" style=\"cursor: pointer;\" *ngIf=\"!field()?.isDisable\">\n <img src=\"https://cdn.godigit.com/retail-life/delete-oui.svg\" alt=\"\"/>\n </span>\n </div>\n </div>\n </ng-template>\n </button>\n <div class=\"upload-info\" *ngIf=\"field() && field()?.isVisible && field()?.configData?.subText\">{{field()?.configData?.subText}}</div>\n", styles: ["*{font-family:mulish!important}.field-lable{font-size:12px!important;font-weight:700!important;color:#444!important;margin-bottom:0!important}.upload-label{opacity:1}.upload-btn{width:100%!important;height:var(--upload-height, 48px)!important;border-radius:.5rem;display:flex;align-items:center;justify-content:center}.upload-btn{width:var(--upload-width , 100%)!important;border-radius:var(--upload-border-radius , 8px)!important}.lightbackground{border-color:#999;border-width:1px;border-style:dashed;background:#fff;color:#444;font-size:14px;font-weight:700}.lightbackground{border-color:var(--upload-border-color , #999)!important;border-width:var(--upload-border-width , 1px)!important;border-style:var(--upload-border-style , dashed)!important;background:var(--upload-background-color , #ffffff)!important}.successBackground{border-color:var(--upload-focus-border-color , #ddd)!important;background:var(--upload-focus-background-color , #fafafa)!important;color:var(--upload-focus-font-color , #444)!important}.successBackground{border:1px dashed #ddd;background:#fafafa;color:#444;display:flex;justify-content:space-between}.upload-icon{display:flex;justify-content:center;gap:7px}.upload-text{color:#444!important;font-weight:700!important;font-size:14px!important}.upload-text{color:var(--upload-font-color , #444)!important;font-size:var( --upload-font-size , 14px)!important;font-weight:var(--upload-font-weight , 700)!important}.right-icon{display:flex;gap:10px;margin-left:.5em}.left-icon{display:flex;gap:15px;margin-right:1em}.upload-info{font-size:10px;font-weight:500;font-family:Mulish!important;letter-spacing:0px;color:#444}\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: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { 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.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: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
|
|
1187
1187
|
}
|
|
1188
1188
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UploadComponent, decorators: [{
|
|
1189
1189
|
type: Component,
|
|
@@ -1197,7 +1197,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
1197
1197
|
useExisting: UploadComponent,
|
|
1198
1198
|
multi: true
|
|
1199
1199
|
}
|
|
1200
|
-
], template: "<label class=\"field-lable upload-label\" *ngIf=\"field() && field()?.isVisible && field()?.isShowLabel\">{{field()?.label}}<span style=\"color: red\" *ngIf=\"field() && field()?.validators?.isRequired\">*</span></label>\n @if(reactiveFormControlobject()) {\n <input\n hidden\n [type]=\"field()?.controlType\"\n [name]=\"field()?.fieldName\"\n [id]=\"field()?.fieldName\"\n [multiple]=\"field()?.configData?.multiple\"\n [accept]=\"field()?.configData?.accept\"\n #fileInput\n (change)=\"onFileSelected($event)\"\n (click)=\"fileInput.value = ''\"\n [required]=\"field()?.validators?.isRequired\"\n [disabled]=\"field()?.isDisable\"\n [formControl]=\"reactiveFormControlobject()\"\n />\n }@else {\n <input\n hidden\n [type]=\"field()?.controlType\"\n [name]=\"field()?.fieldName\"\n [id]=\"field()?.fieldName\"\n [multiple]=\"field()?.configData?.multiple\"\n [accept]=\"field()?.configData?.accept\"\n #fileInput\n (change)=\"onFileSelected($event)\"\n (click)=\"fileInput.value = ''\"\n [required]=\"field()?.validators?.isRequired\"\n [disabled]=\"field()?.isDisable\"\n />\n }\n <button\n type=\"button\"\n class=\"upload-btn\"\n (click)=\"triggerFileInput()\"\n [ngClass]=\"field()?.label ? 'lightbackground' : 'successBackground'\"\n *ngIf=\"field() && field()?.isVisible\"\n [disabled]=\"field()?.isDisable\"\n [ngStyle]=\"{\n'--upload-width': field()?.controlStyle?.width ,\n'--upload-height': field()?.controlStyle?.height ,\n'--upload-border-radius': field()?.controlStyle?.borderRadius ,\n'--upload-border-color': field()?.controlStyle?.borderColor ,\n'--upload-border-width': field()?.controlStyle?.borderWidth ,\n'--upload-border-style': field()?.controlStyle?.borderStyle ,\n'--upload-background-color': field()?.controlStyle?.background ,\n'--upload-focus-border-color': field()?.controlStyle?.focusBorderColor ,\n'--upload-focus-background-color': field()?.controlStyle?.focusBackground ,\n}\"\n >\n <ng-container *ngIf=\"field()?.label && !hasFiles(); else fileUploadedTemplate\">\n <span class=\"upload-icon\">\n <span\n ><img [src]=\"field()?.imageUrl\" alt=\"\" [style.height]=\"field()?.controlStyle?.imageHeight\"/></span>\n <span class=\"upload-text\" [ngStyle]=\"{\n'--upload-font-color': field()?.controlStyle?.color ,\n'--upload-font-size': field()?.controlStyle?.fontSize ,\n'--upload-font-weight': field()?.controlStyle?.fontWeight,\n'--upload-focus-font-color': field()?.controlStyle?.focusColor ,\n}\">{{ field()?.placeHolder }} <span style=\"color: red\" *ngIf=\"field() && field()?.validators?.isRequired\">*</span></span>\n </span>\n </ng-container>\n <ng-template #fileUploadedTemplate>\n <div *ngFor=\"let file of uploadedFiles; let i = index\" class=\"uploaded-file d-flex gap-4\" style=\"transform: translate(0px, -3px);\">\n <span class=\"mt-2 right-icon\" style=\" white-space: nowrap !important;\n overflow: hidden !important;\n text-overflow: ellipsis !important;\">\n <span><img [src]=\"field()?.imageUrl\" alt=\"\" [style.height]=\"field()?.controlStyle?.imageHeight\"/></span>\n <span [title]=\"file.name\" class=\"upload-text\" [ngStyle]=\"{\n'--upload-font-color': field()?.controlStyle?.color ,\n'--upload-font-size': field()?.controlStyle?.fontSize ,\n'--upload-font-weight': field()?.controlStyle?.fontWeight,\n'--upload-focus-font-color': field()?.controlStyle?.focusColor ,\n}\">{{ file.name }}</span>\n </span>\n <div class=\"mt-2 left-icon\">\n <span (click)=\"previewFile(file, i, $event)\" style=\"cursor: pointer;\"><img src=\"https://cdn.godigit.com/retail-life/visibility-oui.svg\" alt=\"\"/></span>\n <span (click)=\"removeFile(i, $event)\" style=\"cursor: pointer;\" *ngIf=\"!field()?.isDisable\">\n <img src=\"https://cdn.godigit.com/retail-life/delete-oui.svg\" alt=\"\"/>\n </span>\n </div>\n </div>\n </ng-template>\n </button>\n <div class=\"upload-info\" *ngIf=\"field() && field()?.isVisible && field()?.configData?.subText\">{{field()?.configData?.subText}}</div>\n", styles: ["*{font-family:mulish!important}.field-lable{font-size:12px!important;font-weight:700!important;color:#444!important;margin-bottom:0!important}.upload-label{opacity:1}.upload-btn{width:100%!important;height:var(--upload-height, 48px)!important;border-radius:.5rem;display:flex;align-items:center;justify-content:center}.upload-btn{width:var(--upload-width , 100%)!important;border-radius:var(--upload-border-radius , 8px)!important}.lightbackground{border-color:#999;border-width:1px;border-style:dashed;background:#fff;color:#444;font-size:14px;font-weight:700}.lightbackground{border-color:var(--upload-border-color , #999)!important;border-width:var(--upload-border-width , 1px)!important;border-style:var(--upload-border-style , dashed)!important;background:var(--upload-background-color , #ffffff)!important}.successBackground{border-color:var(--upload-focus-border-color , #ddd)!important;background:var(--upload-focus-background-color , #fafafa)!important;color:var(--upload-focus-font-color , #444)!important}.successBackground{border:1px dashed #ddd;background:#fafafa;color:#444;display:flex;justify-content:space-between}.upload-icon{display:flex;justify-content:center;gap:7px}.upload-text{color:#444!important;font-weight:700!important;font-size:14px!important}.upload-text{color:var(--upload-font-color , #444)!important;font-size:var( --upload-font-size , 14px)!important;font-weight:var(--upload-font-weight , 700)!important}.right-icon{display:flex;gap:10px;margin-left:.5em}.left-icon{display:flex;gap:15px;margin-right:1em}.upload-info{font-size:10px;font-weight:500;font-family:Mulish!important;letter-spacing:0px;color:#444}\n"] }]
|
|
1200
|
+
], template: "<label class=\"field-lable upload-label\" *ngIf=\"field() && field()?.isVisible && field()?.isShowLabel\">{{field()?.label}}<span style=\"color: red\" *ngIf=\"field() && field()?.validators?.isRequired\">*</span></label>\n @if(reactiveFormControlobject()) {\n <input\n hidden\n [type]=\"field()?.controlType\"\n [name]=\"field()?.fieldName\"\n [id]=\"field()?.fieldName\"\n [multiple]=\"field()?.configData?.multiple\"\n [accept]=\"field()?.configData?.accept\"\n #fileInput\n (change)=\"onFileSelected($event)\"\n (click)=\"fileInput.value = ''\"\n [required]=\"field()?.validators?.isRequired\"\n [disabled]=\"field()?.isDisable\"\n [formControl]=\"reactiveFormControlobject()\"\n [class]=\"field()?.fieldName\"\n />\n }@else {\n <input\n hidden\n [type]=\"field()?.controlType\"\n [name]=\"field()?.fieldName\"\n [id]=\"field()?.fieldName\"\n [multiple]=\"field()?.configData?.multiple\"\n [accept]=\"field()?.configData?.accept\"\n #fileInput\n (change)=\"onFileSelected($event)\"\n (click)=\"fileInput.value = ''\"\n [required]=\"field()?.validators?.isRequired\"\n [disabled]=\"field()?.isDisable\"\n [class]=\"field()?.fieldName\"\n />\n }\n <button\n type=\"button\"\n class=\"upload-btn\"\n (click)=\"triggerFileInput()\"\n [ngClass]=\"field()?.label ? 'lightbackground' : 'successBackground'\"\n *ngIf=\"field() && field()?.isVisible\"\n [disabled]=\"field()?.isDisable\"\n [ngStyle]=\"{\n'--upload-width': field()?.controlStyle?.width ,\n'--upload-height': field()?.controlStyle?.height ,\n'--upload-border-radius': field()?.controlStyle?.borderRadius ,\n'--upload-border-color': field()?.controlStyle?.borderColor ,\n'--upload-border-width': field()?.controlStyle?.borderWidth ,\n'--upload-border-style': field()?.controlStyle?.borderStyle ,\n'--upload-background-color': field()?.controlStyle?.background ,\n'--upload-focus-border-color': field()?.controlStyle?.focusBorderColor ,\n'--upload-focus-background-color': field()?.controlStyle?.focusBackground ,\n}\"\n >\n <ng-container *ngIf=\"field()?.label && !hasFiles(); else fileUploadedTemplate\">\n <span class=\"upload-icon\">\n <span\n ><img [src]=\"field()?.imageUrl\" alt=\"\" [style.height]=\"field()?.controlStyle?.imageHeight\"/></span>\n <span class=\"upload-text\" [ngStyle]=\"{\n'--upload-font-color': field()?.controlStyle?.color ,\n'--upload-font-size': field()?.controlStyle?.fontSize ,\n'--upload-font-weight': field()?.controlStyle?.fontWeight,\n'--upload-focus-font-color': field()?.controlStyle?.focusColor ,\n}\">{{ field()?.placeHolder }} <span style=\"color: red\" *ngIf=\"field() && field()?.validators?.isRequired\">*</span></span>\n </span>\n </ng-container>\n <ng-template #fileUploadedTemplate>\n <div *ngFor=\"let file of uploadedFiles; let i = index\" class=\"uploaded-file d-flex gap-4\" style=\"transform: translate(0px, -3px);\">\n <span class=\"mt-2 right-icon\" style=\" white-space: nowrap !important;\n overflow: hidden !important;\n text-overflow: ellipsis !important;\">\n <span><img [src]=\"field()?.imageUrl\" alt=\"\" [style.height]=\"field()?.controlStyle?.imageHeight\"/></span>\n <span [title]=\"file.name\" class=\"upload-text\" [ngStyle]=\"{\n'--upload-font-color': field()?.controlStyle?.color ,\n'--upload-font-size': field()?.controlStyle?.fontSize ,\n'--upload-font-weight': field()?.controlStyle?.fontWeight,\n'--upload-focus-font-color': field()?.controlStyle?.focusColor ,\n}\">{{ file.name }}</span>\n </span>\n <div class=\"mt-2 left-icon\">\n <span (click)=\"previewFile(file, i, $event)\" style=\"cursor: pointer;\"><img src=\"https://cdn.godigit.com/retail-life/visibility-oui.svg\" alt=\"\"/></span>\n <span (click)=\"removeFile(i, $event)\" style=\"cursor: pointer;\" *ngIf=\"!field()?.isDisable\">\n <img src=\"https://cdn.godigit.com/retail-life/delete-oui.svg\" alt=\"\"/>\n </span>\n </div>\n </div>\n </ng-template>\n </button>\n <div class=\"upload-info\" *ngIf=\"field() && field()?.isVisible && field()?.configData?.subText\">{{field()?.configData?.subText}}</div>\n", styles: ["*{font-family:mulish!important}.field-lable{font-size:12px!important;font-weight:700!important;color:#444!important;margin-bottom:0!important}.upload-label{opacity:1}.upload-btn{width:100%!important;height:var(--upload-height, 48px)!important;border-radius:.5rem;display:flex;align-items:center;justify-content:center}.upload-btn{width:var(--upload-width , 100%)!important;border-radius:var(--upload-border-radius , 8px)!important}.lightbackground{border-color:#999;border-width:1px;border-style:dashed;background:#fff;color:#444;font-size:14px;font-weight:700}.lightbackground{border-color:var(--upload-border-color , #999)!important;border-width:var(--upload-border-width , 1px)!important;border-style:var(--upload-border-style , dashed)!important;background:var(--upload-background-color , #ffffff)!important}.successBackground{border-color:var(--upload-focus-border-color , #ddd)!important;background:var(--upload-focus-background-color , #fafafa)!important;color:var(--upload-focus-font-color , #444)!important}.successBackground{border:1px dashed #ddd;background:#fafafa;color:#444;display:flex;justify-content:space-between}.upload-icon{display:flex;justify-content:center;gap:7px}.upload-text{color:#444!important;font-weight:700!important;font-size:14px!important}.upload-text{color:var(--upload-font-color , #444)!important;font-size:var( --upload-font-size , 14px)!important;font-weight:var(--upload-font-weight , 700)!important}.right-icon{display:flex;gap:10px;margin-left:.5em}.left-icon{display:flex;gap:15px;margin-right:1em}.upload-info{font-size:10px;font-weight:500;font-family:Mulish!important;letter-spacing:0px;color:#444}\n"] }]
|
|
1201
1201
|
}], ctorParameters: () => [{ type: MasterControlService }, { type: i0.ApplicationRef }, { type: i0.EnvironmentInjector }, { type: MasterService }], propDecorators: { fileInput: [{
|
|
1202
1202
|
type: ViewChild,
|
|
1203
1203
|
args: ['fileInput']
|
|
@@ -1378,7 +1378,7 @@ class DobComponent {
|
|
|
1378
1378
|
deps: []
|
|
1379
1379
|
},
|
|
1380
1380
|
{ provide: MAT_DATE_FORMATS, useValue: MY_DATE_FORMAT }
|
|
1381
|
-
], ngImport: i0, template: "<label *ngIf=\"field() && field()?.isVisible && field().isShowLabel\" class=\"field-lable\">{{ field()?.label\n }}<span style=\"color: red\" *ngIf=\"field() && field()?.validators?.isRequired\">*</span></label>\n<mat-form-field class=\"w-100\" appearance=\"outline\" *ngIf=\"field() && field()?.isVisible\" [ngStyle]=\"{\n '--custom-border-color': field()?.controlStyle?.borderColor ,\n '--custom-border-width': field()?.controlStyle?.borderWidth ,\n '--custom-border-radius': field()?.controlStyle?.borderRadius ,\n '--custom-border-color-focus': field()?.controlStyle?.focusBorderColor ,\n '--custom-border-width-focus': field()?.controlStyle?.focusBorderWidth ,\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-bg-color': field()?.controlStyle?.background ,\n '--custom-bg-color-focus': field()?.controlStyle?.focusBackground ,\n }\">\n @if(reactiveFormControlobject()) {\n <input matInput autocomplete=\"off\" type=\"text\" [name]=\"field()?.fieldName\" [id]=\"field()?.fieldName\"\n [placeholder]=\"field()?.placeHolder || 'DD-MM-YYYY'\" [required]=\"field()?.validators?.isRequired\"\n [pattern]=\"field()?.validators?.pattern\" [matDatepicker]=\"picker\" (input)=\"dateDivisionFormat($event)\"\n [min]=\"field()?.configData?.min\" [max]=\"field()?.configData?.max\" [disabled]=\"field()?.isDisable\"\n (dateChange)=\"onDateChange($event)\" (blur)=\"onInputBlur($event)\" [value]=\"inputValue\"\n [formControl]=\"reactiveFormControlobject()\" />\n }@else {\n <input matInput autocomplete=\"off\" type=\"text\" [name]=\"field()?.fieldName\" [id]=\"field()?.fieldName\"\n [placeholder]=\"field()?.placeHolder\" [required]=\"field()?.validators?.isRequired\"\n [pattern]=\"field()?.validators?.pattern\" [matDatepicker]=\"picker\" (input)=\"dateDivisionFormat($event)\"\n [min]=\"field()?.configData?.min\" [max]=\"field()?.configData?.max\" [disabled]=\"field()?.isDisable\"\n (dateChange)=\"onDateChange($event)\" (blur)=\"onInputBlur($event)\" [value]=\"inputValue\" />\n }\n\n <mat-datepicker-toggle matSuffix [for]=\"picker\">\n <img src=\"https://cdn.godigit.com/digitPlusAssets/retail-life-icon/svgicon/date_picker_icon.svg\" style=\"width: 16px\"\n matDatepickerToggleIcon />\n </mat-datepicker-toggle>\n <mat-datepicker #picker></mat-datepicker>\n <mat-error *ngIf=\"false\">\n {{ field()?.validators?.isRequiredMessage }}\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=\"field()?.configData?.isInvalid\">\n {{ field()?.validators?.patternMessage }}.\n</div
|
|
1381
|
+
], ngImport: i0, template: "<label *ngIf=\"field() && field()?.isVisible && field().isShowLabel\" class=\"field-lable\">{{ field()?.label\n }}<span style=\"color: red\" *ngIf=\"field() && field()?.validators?.isRequired\">*</span></label>\n<mat-form-field [class]=\"'w-100 ' + field()?.fieldName\" appearance=\"outline\" *ngIf=\"field() && field()?.isVisible\" [ngStyle]=\"{\n '--custom-border-color': field()?.controlStyle?.borderColor ,\n '--custom-border-width': field()?.controlStyle?.borderWidth ,\n '--custom-border-radius': field()?.controlStyle?.borderRadius ,\n '--custom-border-color-focus': field()?.controlStyle?.focusBorderColor ,\n '--custom-border-width-focus': field()?.controlStyle?.focusBorderWidth ,\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-bg-color': field()?.controlStyle?.background ,\n '--custom-bg-color-focus': field()?.controlStyle?.focusBackground ,\n }\">\n @if(reactiveFormControlobject()) {\n <input matInput autocomplete=\"off\" type=\"text\" [name]=\"field()?.fieldName\" [id]=\"field()?.fieldName\"\n [placeholder]=\"field()?.placeHolder || 'DD-MM-YYYY'\" [required]=\"field()?.validators?.isRequired\"\n [pattern]=\"field()?.validators?.pattern\" [matDatepicker]=\"picker\" (input)=\"dateDivisionFormat($event)\"\n [min]=\"field()?.configData?.min\" [max]=\"field()?.configData?.max\" [disabled]=\"field()?.isDisable\"\n (dateChange)=\"onDateChange($event)\" (blur)=\"onInputBlur($event)\" [value]=\"inputValue\"\n [formControl]=\"reactiveFormControlobject()\" />\n }@else {\n <input matInput autocomplete=\"off\" type=\"text\" [name]=\"field()?.fieldName\" [id]=\"field()?.fieldName\"\n [placeholder]=\"field()?.placeHolder\" [required]=\"field()?.validators?.isRequired\"\n [pattern]=\"field()?.validators?.pattern\" [matDatepicker]=\"picker\" (input)=\"dateDivisionFormat($event)\"\n [min]=\"field()?.configData?.min\" [max]=\"field()?.configData?.max\" [disabled]=\"field()?.isDisable\"\n (dateChange)=\"onDateChange($event)\" (blur)=\"onInputBlur($event)\" [value]=\"inputValue\" />\n }\n\n <mat-datepicker-toggle matSuffix [for]=\"picker\">\n <img src=\"https://cdn.godigit.com/digitPlusAssets/retail-life-icon/svgicon/date_picker_icon.svg\" style=\"width: 16px\"\n matDatepickerToggleIcon />\n </mat-datepicker-toggle>\n <mat-datepicker #picker></mat-datepicker>\n <mat-error *ngIf=\"false\">\n {{ field()?.validators?.isRequiredMessage }}\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=\"field()?.configData?.isInvalid\">\n {{ field()?.validators?.patternMessage }}.\n</div>\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 .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}*{font-family:mulish!important}::ng-deep .mat-calendar-period-button .mdc-button__label{display:flex;flex-direction:row-reverse;align-items:center;gap:10px}\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.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { 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: MatDatepickerModule }, { kind: "component", type: i5.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i5.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i5.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "directive", type: i5.MatDatepickerToggleIcon, selector: "[matDatepickerToggleIcon]" }, { kind: "ngmodule", type: MomentDateModule }, { 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"] }] });
|
|
1382
1382
|
}
|
|
1383
1383
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DobComponent, decorators: [{
|
|
1384
1384
|
type: Component,
|
|
@@ -1394,7 +1394,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
1394
1394
|
deps: []
|
|
1395
1395
|
},
|
|
1396
1396
|
{ provide: MAT_DATE_FORMATS, useValue: MY_DATE_FORMAT }
|
|
1397
|
-
], template: "<label *ngIf=\"field() && field()?.isVisible && field().isShowLabel\" class=\"field-lable\">{{ field()?.label\n }}<span style=\"color: red\" *ngIf=\"field() && field()?.validators?.isRequired\">*</span></label>\n<mat-form-field class=\"w-100\" appearance=\"outline\" *ngIf=\"field() && field()?.isVisible\" [ngStyle]=\"{\n '--custom-border-color': field()?.controlStyle?.borderColor ,\n '--custom-border-width': field()?.controlStyle?.borderWidth ,\n '--custom-border-radius': field()?.controlStyle?.borderRadius ,\n '--custom-border-color-focus': field()?.controlStyle?.focusBorderColor ,\n '--custom-border-width-focus': field()?.controlStyle?.focusBorderWidth ,\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-bg-color': field()?.controlStyle?.background ,\n '--custom-bg-color-focus': field()?.controlStyle?.focusBackground ,\n }\">\n @if(reactiveFormControlobject()) {\n <input matInput autocomplete=\"off\" type=\"text\" [name]=\"field()?.fieldName\" [id]=\"field()?.fieldName\"\n [placeholder]=\"field()?.placeHolder || 'DD-MM-YYYY'\" [required]=\"field()?.validators?.isRequired\"\n [pattern]=\"field()?.validators?.pattern\" [matDatepicker]=\"picker\" (input)=\"dateDivisionFormat($event)\"\n [min]=\"field()?.configData?.min\" [max]=\"field()?.configData?.max\" [disabled]=\"field()?.isDisable\"\n (dateChange)=\"onDateChange($event)\" (blur)=\"onInputBlur($event)\" [value]=\"inputValue\"\n [formControl]=\"reactiveFormControlobject()\" />\n }@else {\n <input matInput autocomplete=\"off\" type=\"text\" [name]=\"field()?.fieldName\" [id]=\"field()?.fieldName\"\n [placeholder]=\"field()?.placeHolder\" [required]=\"field()?.validators?.isRequired\"\n [pattern]=\"field()?.validators?.pattern\" [matDatepicker]=\"picker\" (input)=\"dateDivisionFormat($event)\"\n [min]=\"field()?.configData?.min\" [max]=\"field()?.configData?.max\" [disabled]=\"field()?.isDisable\"\n (dateChange)=\"onDateChange($event)\" (blur)=\"onInputBlur($event)\" [value]=\"inputValue\" />\n }\n\n <mat-datepicker-toggle matSuffix [for]=\"picker\">\n <img src=\"https://cdn.godigit.com/digitPlusAssets/retail-life-icon/svgicon/date_picker_icon.svg\" style=\"width: 16px\"\n matDatepickerToggleIcon />\n </mat-datepicker-toggle>\n <mat-datepicker #picker></mat-datepicker>\n <mat-error *ngIf=\"false\">\n {{ field()?.validators?.isRequiredMessage }}\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=\"field()?.configData?.isInvalid\">\n {{ field()?.validators?.patternMessage }}.\n</div
|
|
1397
|
+
], template: "<label *ngIf=\"field() && field()?.isVisible && field().isShowLabel\" class=\"field-lable\">{{ field()?.label\n }}<span style=\"color: red\" *ngIf=\"field() && field()?.validators?.isRequired\">*</span></label>\n<mat-form-field [class]=\"'w-100 ' + field()?.fieldName\" appearance=\"outline\" *ngIf=\"field() && field()?.isVisible\" [ngStyle]=\"{\n '--custom-border-color': field()?.controlStyle?.borderColor ,\n '--custom-border-width': field()?.controlStyle?.borderWidth ,\n '--custom-border-radius': field()?.controlStyle?.borderRadius ,\n '--custom-border-color-focus': field()?.controlStyle?.focusBorderColor ,\n '--custom-border-width-focus': field()?.controlStyle?.focusBorderWidth ,\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-bg-color': field()?.controlStyle?.background ,\n '--custom-bg-color-focus': field()?.controlStyle?.focusBackground ,\n }\">\n @if(reactiveFormControlobject()) {\n <input matInput autocomplete=\"off\" type=\"text\" [name]=\"field()?.fieldName\" [id]=\"field()?.fieldName\"\n [placeholder]=\"field()?.placeHolder || 'DD-MM-YYYY'\" [required]=\"field()?.validators?.isRequired\"\n [pattern]=\"field()?.validators?.pattern\" [matDatepicker]=\"picker\" (input)=\"dateDivisionFormat($event)\"\n [min]=\"field()?.configData?.min\" [max]=\"field()?.configData?.max\" [disabled]=\"field()?.isDisable\"\n (dateChange)=\"onDateChange($event)\" (blur)=\"onInputBlur($event)\" [value]=\"inputValue\"\n [formControl]=\"reactiveFormControlobject()\" />\n }@else {\n <input matInput autocomplete=\"off\" type=\"text\" [name]=\"field()?.fieldName\" [id]=\"field()?.fieldName\"\n [placeholder]=\"field()?.placeHolder\" [required]=\"field()?.validators?.isRequired\"\n [pattern]=\"field()?.validators?.pattern\" [matDatepicker]=\"picker\" (input)=\"dateDivisionFormat($event)\"\n [min]=\"field()?.configData?.min\" [max]=\"field()?.configData?.max\" [disabled]=\"field()?.isDisable\"\n (dateChange)=\"onDateChange($event)\" (blur)=\"onInputBlur($event)\" [value]=\"inputValue\" />\n }\n\n <mat-datepicker-toggle matSuffix [for]=\"picker\">\n <img src=\"https://cdn.godigit.com/digitPlusAssets/retail-life-icon/svgicon/date_picker_icon.svg\" style=\"width: 16px\"\n matDatepickerToggleIcon />\n </mat-datepicker-toggle>\n <mat-datepicker #picker></mat-datepicker>\n <mat-error *ngIf=\"false\">\n {{ field()?.validators?.isRequiredMessage }}\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=\"field()?.configData?.isInvalid\">\n {{ field()?.validators?.patternMessage }}.\n</div>\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 .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}*{font-family:mulish!important}::ng-deep .mat-calendar-period-button .mdc-button__label{display:flex;flex-direction:row-reverse;align-items:center;gap:10px}\n"] }]
|
|
1398
1398
|
}], ctorParameters: () => [{ type: MasterControlService }], propDecorators: { blur: [{
|
|
1399
1399
|
type: Output
|
|
1400
1400
|
}], valueChange: [{
|
|
@@ -1564,7 +1564,7 @@ class CheckboxComponent {
|
|
|
1564
1564
|
useExisting: CheckboxComponent,
|
|
1565
1565
|
multi: true
|
|
1566
1566
|
}
|
|
1567
|
-
], ngImport: i0, template: "@if(reactiveFormControlobject()) {\n<mat-checkbox *ngIf=\"field() && field()?.isVisible\" [name]=\"field()?.fieldName\" [id]=\"field()?.fieldName\"\n [disabled]=\"field()?.isDisable\" [required]=\"field()?.validators?.isRequired\" [checked]=\"inputValue\" (keydown.enter)=\"$event.preventDefault()\"\n [formControl]=\"reactiveFormControlobject()\" (change)=\"onCheckboxChange($event)\" [ngStyle]=\"{\n '--checkbox-border-radius': field()?.controlStyle?.borderRadius,\n '--checkbox-bg-color': field()?.controlStyle?.background,\n '--checkbox-border-color': field()?.controlStyle?.borderColor,\n '--checkbox-border-color-focus': field()?.controlStyle?.focusBorderColor,\n '--checkbox-bg-color-focus': field()?.controlStyle?.focusBackground,\n '--checkbox-font-size': field()?.controlStyle?.fontSize,\n '--checkbox-font-weight': field()?.controlStyle?.fontWeight,\n '--checkbox-font-color': field()?.controlStyle?.color,\n '--checkbox-font-family': field()?.controlStyle?.fontFamily,\n '--checkbox-border-width': field()?.controlStyle?.borderWidth,\n '--checkbox-border-color-hover': field()?.controlStyle?.hoverBorderColor,\n '--checkbox-border-color-error': field()?.controlStyle?.errorBorderColor,\n '--checkbox-font-color-disabled': field()?.controlStyle?.disableColor,\n '--checkbox-bg-color-disabled': field()?.controlStyle?.disableBackground\n }\">\n {{ field()?.label }}\n <span [innerHTML]=\"field()?.configData?.innerHTML\"></span>\n <span [appTooltipTemplate]=\"HtmlContent\" arrowPosition=\"left\" tooltipPosition=\"bottom\">\n <img [src]=\"field().imageUrl\" class=\"toggle-img mx-1\" />\n </span>\n <ng-template #HtmlContent>\n <span [innerHTML]=\"field().configData?.tooltipMessage\"></span>\n </ng-template>\n</mat-checkbox>\n}@else {\n<mat-checkbox *ngIf=\"field() && field()?.isVisible\" [name]=\"field()?.fieldName\" [id]=\"field()?.fieldName\"\n [disabled]=\"field()?.isDisable\" [required]=\"field()?.validators?.isRequired\" [checked]=\"inputValue\"\n (change)=\"onCheckboxChange($event)\" [ngStyle]=\"{\n '--checkbox-border-radius': field()?.controlStyle?.borderRadius,\n '--checkbox-bg-color': field()?.controlStyle?.background,\n '--checkbox-border-color': field()?.controlStyle?.borderColor,\n '--checkbox-border-color-focus': field()?.controlStyle?.focusBorderColor,\n '--checkbox-bg-color-focus': field()?.controlStyle?.focusBackground,\n '--checkbox-font-size': field()?.controlStyle?.fontSize,\n '--checkbox-font-weight': field()?.controlStyle?.fontWeight,\n '--checkbox-font-color': field()?.controlStyle?.color,\n '--checkbox-font-family': field()?.controlStyle?.fontFamily,\n '--checkbox-border-width': field()?.controlStyle?.borderWidth,\n '--checkbox-border-color-hover': field()?.controlStyle?.hoverBorderColor,\n '--checkbox-border-color-error': field()?.controlStyle?.errorBorderColor,\n '--checkbox-font-color-disabled': field()?.controlStyle?.disableColor,\n '--checkbox-bg-color-disabled': field()?.controlStyle?.disableBackground\n }\">\n {{ field()?.label }}\n <span [innerHTML]=\"field()?.configData?.innerHTML\"></span>\n</mat-checkbox>\n}\n<div class=\"error-message\" *ngIf=\"false\">\n {{field()?.validators?.isRequiredMessage}}.\n</div>\n", styles: ["*{font-family:mulish!important}.error-message{color:red}.toggle-img{width:12px;margin-left:8px!important}@media screen and (max-width: 768px){.toggle-img{width:16px}}::ng-deep .mdc-checkbox__background{border-radius:var(--checkbox-border-radius, 4px)!important}::ng-deep .mdc-checkbox__native-control:disabled:checked~.mdc-checkbox__background{background-color:var(--checkbox-bg-color , #ffffff)!important;border-color:#0000}::ng-deep .mdc-checkbox__native-control:disabled:indeterminate~.mdc-checkbox__background{background-color:var(--checkbox-bg-color , #ffffff)!important;border-color:#0000}::ng-deep .mdc-checkbox__native-control:enabled:checked~.mdc-checkbox__background{border-color:var(--checkbox-border-color-focus, #ffbb00)!important;background-color:var(--checkbox-bg-color-focus, #ffbb00)!important;border-radius:var(--checkbox-border-radius, 4px)!important}::ng-deep .mdc-checkbox__native-control:enabled:indeterminate~.mdc-checkbox__background{border-color:var(--checkbox-border-color-focus, #ffbb00)!important;background-color:var(--checkbox-bg-color-focus, #ffbb00)!important;border-radius:var(--checkbox-border-radius, 4px)!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:var(--checkbox-bg-color-focus, #ffbb00)!important;border-radius:var(--checkbox-border-radius, 4px)!important}::ng-deep .mat-pseudo-checkbox-full.mat-pseudo-checkbox-indeterminate{background-color:var(--checkbox-bg-color-focus, #ffbb00)!important;border-radius:var(--checkbox-border-radius, 4px)!important}::ng-deep .mat-pseudo-checkbox{border:1px solid #DADADA}::ng-deep .checkbox{padding:4px 8px 3px 0;background:#f5f5f5;border-radius:4px;margin-right:8px}::ng-deep .mat-mdc-checkbox label{font-size:var(--checkbox-font-size , 16px)!important;font-weight:var(--checkbox-font-weight , 700)!important;color:var(--checkbox-font-color , #444)!important;padding:0!important;margin-bottom:2px;font-family:Mulish!important;margin-top:8px}::ng-deep .mat-mdc-checkbox .mdc-checkbox__ripple{display:none}::ng-deep .mdc-checkbox__native-control:checked~.mdc-checkbox__background .mdc-checkbox__checkmark{color:#fff!important}::ng-deep .mat-internal-form-field{align-items:flex-start!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i4$1.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { 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: "directive", type: CustomizedTooltipDirective, selector: "[appTooltipTemplate]", inputs: ["appTooltipTemplate"] }] });
|
|
1567
|
+
], ngImport: i0, template: "@if(reactiveFormControlobject()) {\n<mat-checkbox *ngIf=\"field() && field()?.isVisible\" [class]=\"field()?.fieldName\" [name]=\"field()?.fieldName\" [id]=\"field()?.fieldName\"\n [disabled]=\"field()?.isDisable\" [required]=\"field()?.validators?.isRequired\" [checked]=\"inputValue\" (keydown.enter)=\"$event.preventDefault()\"\n [formControl]=\"reactiveFormControlobject()\" (change)=\"onCheckboxChange($event)\" [ngStyle]=\"{\n '--checkbox-border-radius': field()?.controlStyle?.borderRadius,\n '--checkbox-bg-color': field()?.controlStyle?.background,\n '--checkbox-border-color': field()?.controlStyle?.borderColor,\n '--checkbox-border-color-focus': field()?.controlStyle?.focusBorderColor,\n '--checkbox-bg-color-focus': field()?.controlStyle?.focusBackground,\n '--checkbox-font-size': field()?.controlStyle?.fontSize,\n '--checkbox-font-weight': field()?.controlStyle?.fontWeight,\n '--checkbox-font-color': field()?.controlStyle?.color,\n '--checkbox-font-family': field()?.controlStyle?.fontFamily,\n '--checkbox-border-width': field()?.controlStyle?.borderWidth,\n '--checkbox-border-color-hover': field()?.controlStyle?.hoverBorderColor,\n '--checkbox-border-color-error': field()?.controlStyle?.errorBorderColor,\n '--checkbox-font-color-disabled': field()?.controlStyle?.disableColor,\n '--checkbox-bg-color-disabled': field()?.controlStyle?.disableBackground\n }\">\n {{ field()?.label }}\n <span [innerHTML]=\"field()?.configData?.innerHTML\"></span>\n <span [appTooltipTemplate]=\"HtmlContent\" arrowPosition=\"left\" tooltipPosition=\"bottom\">\n <img [src]=\"field().imageUrl\" class=\"toggle-img mx-1\" />\n </span>\n <ng-template #HtmlContent>\n <span [innerHTML]=\"field().configData?.tooltipMessage\"></span>\n </ng-template>\n</mat-checkbox>\n}@else {\n<mat-checkbox *ngIf=\"field() && field()?.isVisible\" [class]=\"field()?.fieldName\" [name]=\"field()?.fieldName\" [id]=\"field()?.fieldName\"\n [disabled]=\"field()?.isDisable\" [required]=\"field()?.validators?.isRequired\" [checked]=\"inputValue\"\n (change)=\"onCheckboxChange($event)\" [ngStyle]=\"{\n '--checkbox-border-radius': field()?.controlStyle?.borderRadius,\n '--checkbox-bg-color': field()?.controlStyle?.background,\n '--checkbox-border-color': field()?.controlStyle?.borderColor,\n '--checkbox-border-color-focus': field()?.controlStyle?.focusBorderColor,\n '--checkbox-bg-color-focus': field()?.controlStyle?.focusBackground,\n '--checkbox-font-size': field()?.controlStyle?.fontSize,\n '--checkbox-font-weight': field()?.controlStyle?.fontWeight,\n '--checkbox-font-color': field()?.controlStyle?.color,\n '--checkbox-font-family': field()?.controlStyle?.fontFamily,\n '--checkbox-border-width': field()?.controlStyle?.borderWidth,\n '--checkbox-border-color-hover': field()?.controlStyle?.hoverBorderColor,\n '--checkbox-border-color-error': field()?.controlStyle?.errorBorderColor,\n '--checkbox-font-color-disabled': field()?.controlStyle?.disableColor,\n '--checkbox-bg-color-disabled': field()?.controlStyle?.disableBackground\n }\">\n {{ field()?.label }}\n <span [innerHTML]=\"field()?.configData?.innerHTML\"></span>\n</mat-checkbox>\n}\n<div class=\"error-message\" *ngIf=\"false\">\n {{field()?.validators?.isRequiredMessage}}.\n</div>\n", styles: ["*{font-family:mulish!important}.error-message{color:red}.toggle-img{width:12px;margin-left:8px!important}@media screen and (max-width: 768px){.toggle-img{width:16px}}::ng-deep .mdc-checkbox__background{border-radius:var(--checkbox-border-radius, 4px)!important}::ng-deep .mdc-checkbox__native-control:disabled:checked~.mdc-checkbox__background{background-color:var(--checkbox-bg-color , #ffffff)!important;border-color:#0000}::ng-deep .mdc-checkbox__native-control:disabled:indeterminate~.mdc-checkbox__background{background-color:var(--checkbox-bg-color , #ffffff)!important;border-color:#0000}::ng-deep .mdc-checkbox__native-control:enabled:checked~.mdc-checkbox__background{border-color:var(--checkbox-border-color-focus, #ffbb00)!important;background-color:var(--checkbox-bg-color-focus, #ffbb00)!important;border-radius:var(--checkbox-border-radius, 4px)!important}::ng-deep .mdc-checkbox__native-control:enabled:indeterminate~.mdc-checkbox__background{border-color:var(--checkbox-border-color-focus, #ffbb00)!important;background-color:var(--checkbox-bg-color-focus, #ffbb00)!important;border-radius:var(--checkbox-border-radius, 4px)!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:var(--checkbox-bg-color-focus, #ffbb00)!important;border-radius:var(--checkbox-border-radius, 4px)!important}::ng-deep .mat-pseudo-checkbox-full.mat-pseudo-checkbox-indeterminate{background-color:var(--checkbox-bg-color-focus, #ffbb00)!important;border-radius:var(--checkbox-border-radius, 4px)!important}::ng-deep .mat-pseudo-checkbox{border:1px solid #DADADA}::ng-deep .checkbox{padding:4px 8px 3px 0;background:#f5f5f5;border-radius:4px;margin-right:8px}::ng-deep .mat-mdc-checkbox label{font-size:var(--checkbox-font-size , 16px)!important;font-weight:var(--checkbox-font-weight , 700)!important;color:var(--checkbox-font-color , #444)!important;padding:0!important;margin-bottom:2px;font-family:Mulish!important;margin-top:8px}::ng-deep .mat-mdc-checkbox .mdc-checkbox__ripple{display:none}::ng-deep .mdc-checkbox__native-control:checked~.mdc-checkbox__background .mdc-checkbox__checkmark{color:#fff!important}::ng-deep .mat-internal-form-field{align-items:flex-start!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i4$1.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { 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: "directive", type: CustomizedTooltipDirective, selector: "[appTooltipTemplate]", inputs: ["appTooltipTemplate"] }] });
|
|
1568
1568
|
}
|
|
1569
1569
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CheckboxComponent, decorators: [{
|
|
1570
1570
|
type: Component,
|
|
@@ -1574,7 +1574,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
1574
1574
|
useExisting: CheckboxComponent,
|
|
1575
1575
|
multi: true
|
|
1576
1576
|
}
|
|
1577
|
-
], template: "@if(reactiveFormControlobject()) {\n<mat-checkbox *ngIf=\"field() && field()?.isVisible\" [name]=\"field()?.fieldName\" [id]=\"field()?.fieldName\"\n [disabled]=\"field()?.isDisable\" [required]=\"field()?.validators?.isRequired\" [checked]=\"inputValue\" (keydown.enter)=\"$event.preventDefault()\"\n [formControl]=\"reactiveFormControlobject()\" (change)=\"onCheckboxChange($event)\" [ngStyle]=\"{\n '--checkbox-border-radius': field()?.controlStyle?.borderRadius,\n '--checkbox-bg-color': field()?.controlStyle?.background,\n '--checkbox-border-color': field()?.controlStyle?.borderColor,\n '--checkbox-border-color-focus': field()?.controlStyle?.focusBorderColor,\n '--checkbox-bg-color-focus': field()?.controlStyle?.focusBackground,\n '--checkbox-font-size': field()?.controlStyle?.fontSize,\n '--checkbox-font-weight': field()?.controlStyle?.fontWeight,\n '--checkbox-font-color': field()?.controlStyle?.color,\n '--checkbox-font-family': field()?.controlStyle?.fontFamily,\n '--checkbox-border-width': field()?.controlStyle?.borderWidth,\n '--checkbox-border-color-hover': field()?.controlStyle?.hoverBorderColor,\n '--checkbox-border-color-error': field()?.controlStyle?.errorBorderColor,\n '--checkbox-font-color-disabled': field()?.controlStyle?.disableColor,\n '--checkbox-bg-color-disabled': field()?.controlStyle?.disableBackground\n }\">\n {{ field()?.label }}\n <span [innerHTML]=\"field()?.configData?.innerHTML\"></span>\n <span [appTooltipTemplate]=\"HtmlContent\" arrowPosition=\"left\" tooltipPosition=\"bottom\">\n <img [src]=\"field().imageUrl\" class=\"toggle-img mx-1\" />\n </span>\n <ng-template #HtmlContent>\n <span [innerHTML]=\"field().configData?.tooltipMessage\"></span>\n </ng-template>\n</mat-checkbox>\n}@else {\n<mat-checkbox *ngIf=\"field() && field()?.isVisible\" [name]=\"field()?.fieldName\" [id]=\"field()?.fieldName\"\n [disabled]=\"field()?.isDisable\" [required]=\"field()?.validators?.isRequired\" [checked]=\"inputValue\"\n (change)=\"onCheckboxChange($event)\" [ngStyle]=\"{\n '--checkbox-border-radius': field()?.controlStyle?.borderRadius,\n '--checkbox-bg-color': field()?.controlStyle?.background,\n '--checkbox-border-color': field()?.controlStyle?.borderColor,\n '--checkbox-border-color-focus': field()?.controlStyle?.focusBorderColor,\n '--checkbox-bg-color-focus': field()?.controlStyle?.focusBackground,\n '--checkbox-font-size': field()?.controlStyle?.fontSize,\n '--checkbox-font-weight': field()?.controlStyle?.fontWeight,\n '--checkbox-font-color': field()?.controlStyle?.color,\n '--checkbox-font-family': field()?.controlStyle?.fontFamily,\n '--checkbox-border-width': field()?.controlStyle?.borderWidth,\n '--checkbox-border-color-hover': field()?.controlStyle?.hoverBorderColor,\n '--checkbox-border-color-error': field()?.controlStyle?.errorBorderColor,\n '--checkbox-font-color-disabled': field()?.controlStyle?.disableColor,\n '--checkbox-bg-color-disabled': field()?.controlStyle?.disableBackground\n }\">\n {{ field()?.label }}\n <span [innerHTML]=\"field()?.configData?.innerHTML\"></span>\n</mat-checkbox>\n}\n<div class=\"error-message\" *ngIf=\"false\">\n {{field()?.validators?.isRequiredMessage}}.\n</div>\n", styles: ["*{font-family:mulish!important}.error-message{color:red}.toggle-img{width:12px;margin-left:8px!important}@media screen and (max-width: 768px){.toggle-img{width:16px}}::ng-deep .mdc-checkbox__background{border-radius:var(--checkbox-border-radius, 4px)!important}::ng-deep .mdc-checkbox__native-control:disabled:checked~.mdc-checkbox__background{background-color:var(--checkbox-bg-color , #ffffff)!important;border-color:#0000}::ng-deep .mdc-checkbox__native-control:disabled:indeterminate~.mdc-checkbox__background{background-color:var(--checkbox-bg-color , #ffffff)!important;border-color:#0000}::ng-deep .mdc-checkbox__native-control:enabled:checked~.mdc-checkbox__background{border-color:var(--checkbox-border-color-focus, #ffbb00)!important;background-color:var(--checkbox-bg-color-focus, #ffbb00)!important;border-radius:var(--checkbox-border-radius, 4px)!important}::ng-deep .mdc-checkbox__native-control:enabled:indeterminate~.mdc-checkbox__background{border-color:var(--checkbox-border-color-focus, #ffbb00)!important;background-color:var(--checkbox-bg-color-focus, #ffbb00)!important;border-radius:var(--checkbox-border-radius, 4px)!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:var(--checkbox-bg-color-focus, #ffbb00)!important;border-radius:var(--checkbox-border-radius, 4px)!important}::ng-deep .mat-pseudo-checkbox-full.mat-pseudo-checkbox-indeterminate{background-color:var(--checkbox-bg-color-focus, #ffbb00)!important;border-radius:var(--checkbox-border-radius, 4px)!important}::ng-deep .mat-pseudo-checkbox{border:1px solid #DADADA}::ng-deep .checkbox{padding:4px 8px 3px 0;background:#f5f5f5;border-radius:4px;margin-right:8px}::ng-deep .mat-mdc-checkbox label{font-size:var(--checkbox-font-size , 16px)!important;font-weight:var(--checkbox-font-weight , 700)!important;color:var(--checkbox-font-color , #444)!important;padding:0!important;margin-bottom:2px;font-family:Mulish!important;margin-top:8px}::ng-deep .mat-mdc-checkbox .mdc-checkbox__ripple{display:none}::ng-deep .mdc-checkbox__native-control:checked~.mdc-checkbox__background .mdc-checkbox__checkmark{color:#fff!important}::ng-deep .mat-internal-form-field{align-items:flex-start!important}\n"] }]
|
|
1577
|
+
], template: "@if(reactiveFormControlobject()) {\n<mat-checkbox *ngIf=\"field() && field()?.isVisible\" [class]=\"field()?.fieldName\" [name]=\"field()?.fieldName\" [id]=\"field()?.fieldName\"\n [disabled]=\"field()?.isDisable\" [required]=\"field()?.validators?.isRequired\" [checked]=\"inputValue\" (keydown.enter)=\"$event.preventDefault()\"\n [formControl]=\"reactiveFormControlobject()\" (change)=\"onCheckboxChange($event)\" [ngStyle]=\"{\n '--checkbox-border-radius': field()?.controlStyle?.borderRadius,\n '--checkbox-bg-color': field()?.controlStyle?.background,\n '--checkbox-border-color': field()?.controlStyle?.borderColor,\n '--checkbox-border-color-focus': field()?.controlStyle?.focusBorderColor,\n '--checkbox-bg-color-focus': field()?.controlStyle?.focusBackground,\n '--checkbox-font-size': field()?.controlStyle?.fontSize,\n '--checkbox-font-weight': field()?.controlStyle?.fontWeight,\n '--checkbox-font-color': field()?.controlStyle?.color,\n '--checkbox-font-family': field()?.controlStyle?.fontFamily,\n '--checkbox-border-width': field()?.controlStyle?.borderWidth,\n '--checkbox-border-color-hover': field()?.controlStyle?.hoverBorderColor,\n '--checkbox-border-color-error': field()?.controlStyle?.errorBorderColor,\n '--checkbox-font-color-disabled': field()?.controlStyle?.disableColor,\n '--checkbox-bg-color-disabled': field()?.controlStyle?.disableBackground\n }\">\n {{ field()?.label }}\n <span [innerHTML]=\"field()?.configData?.innerHTML\"></span>\n <span [appTooltipTemplate]=\"HtmlContent\" arrowPosition=\"left\" tooltipPosition=\"bottom\">\n <img [src]=\"field().imageUrl\" class=\"toggle-img mx-1\" />\n </span>\n <ng-template #HtmlContent>\n <span [innerHTML]=\"field().configData?.tooltipMessage\"></span>\n </ng-template>\n</mat-checkbox>\n}@else {\n<mat-checkbox *ngIf=\"field() && field()?.isVisible\" [class]=\"field()?.fieldName\" [name]=\"field()?.fieldName\" [id]=\"field()?.fieldName\"\n [disabled]=\"field()?.isDisable\" [required]=\"field()?.validators?.isRequired\" [checked]=\"inputValue\"\n (change)=\"onCheckboxChange($event)\" [ngStyle]=\"{\n '--checkbox-border-radius': field()?.controlStyle?.borderRadius,\n '--checkbox-bg-color': field()?.controlStyle?.background,\n '--checkbox-border-color': field()?.controlStyle?.borderColor,\n '--checkbox-border-color-focus': field()?.controlStyle?.focusBorderColor,\n '--checkbox-bg-color-focus': field()?.controlStyle?.focusBackground,\n '--checkbox-font-size': field()?.controlStyle?.fontSize,\n '--checkbox-font-weight': field()?.controlStyle?.fontWeight,\n '--checkbox-font-color': field()?.controlStyle?.color,\n '--checkbox-font-family': field()?.controlStyle?.fontFamily,\n '--checkbox-border-width': field()?.controlStyle?.borderWidth,\n '--checkbox-border-color-hover': field()?.controlStyle?.hoverBorderColor,\n '--checkbox-border-color-error': field()?.controlStyle?.errorBorderColor,\n '--checkbox-font-color-disabled': field()?.controlStyle?.disableColor,\n '--checkbox-bg-color-disabled': field()?.controlStyle?.disableBackground\n }\">\n {{ field()?.label }}\n <span [innerHTML]=\"field()?.configData?.innerHTML\"></span>\n</mat-checkbox>\n}\n<div class=\"error-message\" *ngIf=\"false\">\n {{field()?.validators?.isRequiredMessage}}.\n</div>\n", styles: ["*{font-family:mulish!important}.error-message{color:red}.toggle-img{width:12px;margin-left:8px!important}@media screen and (max-width: 768px){.toggle-img{width:16px}}::ng-deep .mdc-checkbox__background{border-radius:var(--checkbox-border-radius, 4px)!important}::ng-deep .mdc-checkbox__native-control:disabled:checked~.mdc-checkbox__background{background-color:var(--checkbox-bg-color , #ffffff)!important;border-color:#0000}::ng-deep .mdc-checkbox__native-control:disabled:indeterminate~.mdc-checkbox__background{background-color:var(--checkbox-bg-color , #ffffff)!important;border-color:#0000}::ng-deep .mdc-checkbox__native-control:enabled:checked~.mdc-checkbox__background{border-color:var(--checkbox-border-color-focus, #ffbb00)!important;background-color:var(--checkbox-bg-color-focus, #ffbb00)!important;border-radius:var(--checkbox-border-radius, 4px)!important}::ng-deep .mdc-checkbox__native-control:enabled:indeterminate~.mdc-checkbox__background{border-color:var(--checkbox-border-color-focus, #ffbb00)!important;background-color:var(--checkbox-bg-color-focus, #ffbb00)!important;border-radius:var(--checkbox-border-radius, 4px)!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:var(--checkbox-bg-color-focus, #ffbb00)!important;border-radius:var(--checkbox-border-radius, 4px)!important}::ng-deep .mat-pseudo-checkbox-full.mat-pseudo-checkbox-indeterminate{background-color:var(--checkbox-bg-color-focus, #ffbb00)!important;border-radius:var(--checkbox-border-radius, 4px)!important}::ng-deep .mat-pseudo-checkbox{border:1px solid #DADADA}::ng-deep .checkbox{padding:4px 8px 3px 0;background:#f5f5f5;border-radius:4px;margin-right:8px}::ng-deep .mat-mdc-checkbox label{font-size:var(--checkbox-font-size , 16px)!important;font-weight:var(--checkbox-font-weight , 700)!important;color:var(--checkbox-font-color , #444)!important;padding:0!important;margin-bottom:2px;font-family:Mulish!important;margin-top:8px}::ng-deep .mat-mdc-checkbox .mdc-checkbox__ripple{display:none}::ng-deep .mdc-checkbox__native-control:checked~.mdc-checkbox__background .mdc-checkbox__checkmark{color:#fff!important}::ng-deep .mat-internal-form-field{align-items:flex-start!important}\n"] }]
|
|
1578
1578
|
}], ctorParameters: () => [{ type: MasterControlService }], propDecorators: { change: [{
|
|
1579
1579
|
type: Output
|
|
1580
1580
|
}] } });
|
|
@@ -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\" [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"] }] });
|
|
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 ' + 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}\"\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\" [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"] }]
|
|
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 ' + 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}\"\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
|
}] } });
|
|
@@ -5843,7 +5843,9 @@ class MedialQuestionsComponent {
|
|
|
5843
5843
|
(singleSection['sectionName'].toUpperCase().replaceAll(' ', '_') ===
|
|
5844
5844
|
'TELL_US_MORE' ||
|
|
5845
5845
|
singleSection['sectionName'].toUpperCase().replaceAll(' ', '_') ===
|
|
5846
|
-
'BASIC_DETAILS'
|
|
5846
|
+
'BASIC_DETAILS' ||
|
|
5847
|
+
singleSection['sectionName'].toUpperCase().replaceAll(' ', '_') ===
|
|
5848
|
+
'MEDICAL_DETAILS') &&
|
|
5847
5849
|
isValid) {
|
|
5848
5850
|
// validation for height entered in feet
|
|
5849
5851
|
if (this.personUwAnswers['medicalQuestionsHeightUnit'] === 'FEET') {
|
|
@@ -6243,11 +6245,12 @@ class MedialQuestionsComponent {
|
|
|
6243
6245
|
this.removeSubQuestionValues();
|
|
6244
6246
|
}
|
|
6245
6247
|
focusToElement(elementId) {
|
|
6246
|
-
const
|
|
6248
|
+
const elementCollection = document.getElementsByClassName(elementId);
|
|
6247
6249
|
const headerOffset = 120;
|
|
6248
|
-
if (!
|
|
6250
|
+
if (!elementCollection || elementCollection.length === 0) {
|
|
6249
6251
|
return;
|
|
6250
6252
|
}
|
|
6253
|
+
const element = elementCollection[0];
|
|
6251
6254
|
const scrollContainer = this.getScrollableParent(element);
|
|
6252
6255
|
// Wait for the next frame so layout is settled before scrolling.
|
|
6253
6256
|
requestAnimationFrame(() => {
|
|
@@ -6328,7 +6331,7 @@ class MedialQuestionsComponent {
|
|
|
6328
6331
|
return window;
|
|
6329
6332
|
}
|
|
6330
6333
|
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 });
|
|
6331
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: MedialQuestionsComponent, isStandalone: true, selector: "lib-medial-questions", inputs: { clusterId: { classPropertyName: "clusterId", publicName: "clusterId", isSignal: true, isRequired: false, transformFunction: null }, triggerValidation: { classPropertyName: "triggerValidation", publicName: "triggerValidation", isSignal: false, isRequired: false, transformFunction: null }, medialQuestionResponse: { classPropertyName: "medialQuestionResponse", publicName: "medialQuestionResponse", isSignal: true, isRequired: false, transformFunction: null }, personUWOpenQuoteResponse: { classPropertyName: "personUWOpenQuoteResponse", publicName: "personUWOpenQuoteResponse", isSignal: true, isRequired: false, transformFunction: null }, defaultValues: { classPropertyName: "defaultValues", publicName: "defaultValues", isSignal: true, isRequired: false, transformFunction: null }, personType: { classPropertyName: "personType", publicName: "personType", isSignal: true, isRequired: false, transformFunction: null }, field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { questionsValueChange: "questionsValueChange" }, viewQueries: [{ propertyName: "addressInput", first: true, predicate: ["addressInput"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "\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"] }] });
|
|
6334
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: MedialQuestionsComponent, isStandalone: true, selector: "lib-medial-questions", inputs: { clusterId: { classPropertyName: "clusterId", publicName: "clusterId", isSignal: true, isRequired: false, transformFunction: null }, triggerValidation: { classPropertyName: "triggerValidation", publicName: "triggerValidation", isSignal: false, isRequired: false, transformFunction: null }, medialQuestionResponse: { classPropertyName: "medialQuestionResponse", publicName: "medialQuestionResponse", isSignal: true, isRequired: false, transformFunction: null }, personUWOpenQuoteResponse: { classPropertyName: "personUWOpenQuoteResponse", publicName: "personUWOpenQuoteResponse", isSignal: true, isRequired: false, transformFunction: null }, defaultValues: { classPropertyName: "defaultValues", publicName: "defaultValues", isSignal: true, isRequired: false, transformFunction: null }, personType: { classPropertyName: "personType", publicName: "personType", isSignal: true, isRequired: false, transformFunction: null }, field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { questionsValueChange: "questionsValueChange" }, viewQueries: [{ propertyName: "addressInput", first: true, predicate: ["addressInput"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "\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 medicalQuestionsHeightInput'\"\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"] }] });
|
|
6332
6335
|
}
|
|
6333
6336
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MedialQuestionsComponent, decorators: [{
|
|
6334
6337
|
type: Component,
|
|
@@ -6346,7 +6349,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
6346
6349
|
GoogleMapsModule,
|
|
6347
6350
|
HrLineComponent,
|
|
6348
6351
|
FilePreviewComponent
|
|
6349
|
-
], 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"] }]
|
|
6352
|
+
], 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 medicalQuestionsHeightInput'\"\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"] }]
|
|
6350
6353
|
}], ctorParameters: () => [{ type: i0.NgZone }, { type: MasterService }], propDecorators: { questionsValueChange: [{
|
|
6351
6354
|
type: Output
|
|
6352
6355
|
}], triggerValidation: [{
|