master-control 0.4.99 → 0.5.2
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/age-date/age-date.component.mjs +7 -3
- package/esm2022/lib/amount-textbox/amount-textbox.component.mjs +7 -3
- package/esm2022/lib/annuity-calculator-radio/annuity-calculator-radio.component.mjs +8 -4
- package/esm2022/lib/autocomplete/autocomplete.component.mjs +5 -3
- package/esm2022/lib/button/button.component.mjs +7 -3
- package/esm2022/lib/checkbox/checkbox.component.mjs +7 -3
- package/esm2022/lib/dob/dob.component.mjs +7 -3
- package/esm2022/lib/email-with-domain/email-with-domain.component.mjs +7 -3
- package/esm2022/lib/field-name-attribute.util.mjs +11 -0
- package/esm2022/lib/info-textbox/info-textbox.component.mjs +7 -3
- package/esm2022/lib/master-control.component.mjs +8 -3
- package/esm2022/lib/medial-questions/medial-questions.component.mjs +3 -3
- package/esm2022/lib/mob-number/mob-number.component.mjs +5 -3
- package/esm2022/lib/multiple-select/multiple-select.component.mjs +5 -3
- package/esm2022/lib/otp-mob-number/otp-mob-number.component.mjs +7 -3
- package/esm2022/lib/otp-textbox/otp-textbox.component.mjs +7 -3
- package/esm2022/lib/radio/radio.component.mjs +5 -3
- package/esm2022/lib/search-multi-select/search-multi-select.component.mjs +5 -3
- package/esm2022/lib/select/select.component.mjs +7 -6
- package/esm2022/lib/select-textbox/select-textbox.component.mjs +7 -3
- package/esm2022/lib/subscript-textbox/subscript-textbox.component.mjs +7 -3
- package/esm2022/lib/suffix-textbox/suffix-textbox.component.mjs +7 -3
- package/esm2022/lib/tag-mob-number/tag-mob-number.component.mjs +7 -3
- package/esm2022/lib/textarea/textarea.component.mjs +7 -3
- package/esm2022/lib/textbox/textbox.component.mjs +5 -3
- package/esm2022/lib/textbox-with-image/textbox-with-image.component.mjs +7 -3
- package/esm2022/lib/textbox-with-text/textbox-with-text.component.mjs +7 -3
- package/esm2022/lib/textbox-with-underscore/textbox-with-underscore.component.mjs +7 -3
- package/esm2022/lib/toggle/toggle.component.mjs +7 -3
- package/esm2022/lib/toggle-button/toggle-button.component.mjs +7 -3
- package/esm2022/lib/upload/upload.component.mjs +7 -3
- package/fesm2022/master-control.mjs +146 -62
- package/fesm2022/master-control.mjs.map +1 -1
- package/lib/age-date/age-date.component.d.ts +1 -0
- package/lib/amount-textbox/amount-textbox.component.d.ts +1 -0
- package/lib/button/button.component.d.ts +3 -1
- package/lib/checkbox/checkbox.component.d.ts +1 -0
- package/lib/dob/dob.component.d.ts +1 -0
- package/lib/email-with-domain/email-with-domain.component.d.ts +1 -0
- package/lib/field-name-attribute.util.d.ts +1 -0
- package/lib/info-textbox/info-textbox.component.d.ts +1 -0
- package/lib/otp-mob-number/otp-mob-number.component.d.ts +1 -0
- package/lib/otp-textbox/otp-textbox.component.d.ts +1 -0
- package/lib/select/select.component.d.ts +1 -0
- package/lib/select-textbox/select-textbox.component.d.ts +1 -0
- package/lib/subscript-textbox/subscript-textbox.component.d.ts +1 -0
- package/lib/suffix-textbox/suffix-textbox.component.d.ts +1 -0
- package/lib/tag-mob-number/tag-mob-number.component.d.ts +1 -0
- package/lib/textarea/textarea.component.d.ts +1 -0
- package/lib/textbox-with-image/textbox-with-image.component.d.ts +1 -0
- package/lib/textbox-with-text/textbox-with-text.component.d.ts +1 -0
- package/lib/textbox-with-underscore/textbox-with-underscore.component.d.ts +1 -0
- package/lib/toggle/toggle.component.d.ts +1 -0
- package/lib/toggle-button/toggle-button.component.d.ts +3 -2
- package/lib/upload/upload.component.d.ts +1 -0
- package/master-control-0.5.02.tgz +0 -0
- package/package.json +1 -1
- package/master-control-0.4.99.tgz +0 -0
|
@@ -318,6 +318,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
318
318
|
}]
|
|
319
319
|
}], ctorParameters: () => [] });
|
|
320
320
|
|
|
321
|
+
function initializeFieldNameAttribute(field) {
|
|
322
|
+
if (!field || typeof field !== 'object') {
|
|
323
|
+
return field;
|
|
324
|
+
}
|
|
325
|
+
const label = typeof field.label === 'string' ? field.label.trim() : '';
|
|
326
|
+
field.fieldNameAttribute = label
|
|
327
|
+
? label.replace(/\s+/g, '_')
|
|
328
|
+
: field.fieldName;
|
|
329
|
+
return field;
|
|
330
|
+
}
|
|
331
|
+
|
|
321
332
|
class TextboxComponent {
|
|
322
333
|
masterService;
|
|
323
334
|
constructor(masterService) {
|
|
@@ -333,6 +344,7 @@ class TextboxComponent {
|
|
|
333
344
|
// Declare Output event emitter here (class level)
|
|
334
345
|
blur = new EventEmitter();
|
|
335
346
|
ngOnInit() {
|
|
347
|
+
initializeFieldNameAttribute(this.field());
|
|
336
348
|
if (!this.field().isInputMasked) {
|
|
337
349
|
this.field().isInputMasked = false;
|
|
338
350
|
}
|
|
@@ -401,7 +413,7 @@ class TextboxComponent {
|
|
|
401
413
|
useExisting: TextboxComponent,
|
|
402
414
|
multi: true
|
|
403
415
|
}
|
|
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<div [class]=\"field()?.configData?.isInlineLabel ? 'select-inline-control' : ''\">\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()?.
|
|
416
|
+
], 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<div [class]=\"field()?.configData?.isInlineLabel ? 'select-inline-control' : ''\">\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()?.fieldNameAttribute\"\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()?.fieldNameAttribute\"\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</div>\n", styles: ["@media (min-width: 769px){.select-inline-control{width:33.3333%}}.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
417
|
}
|
|
406
418
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TextboxComponent, decorators: [{
|
|
407
419
|
type: Component,
|
|
@@ -416,7 +428,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
416
428
|
useExisting: TextboxComponent,
|
|
417
429
|
multi: true
|
|
418
430
|
}
|
|
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<div [class]=\"field()?.configData?.isInlineLabel ? 'select-inline-control' : ''\">\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()?.
|
|
431
|
+
], 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<div [class]=\"field()?.configData?.isInlineLabel ? 'select-inline-control' : ''\">\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()?.fieldNameAttribute\"\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()?.fieldNameAttribute\"\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</div>\n", styles: ["@media (min-width: 769px){.select-inline-control{width:33.3333%}}.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
432
|
}], ctorParameters: () => [{ type: MasterControlService }], propDecorators: { blur: [{
|
|
421
433
|
type: Output
|
|
422
434
|
}] } });
|
|
@@ -426,13 +438,16 @@ class ButtonComponent {
|
|
|
426
438
|
constructor(masterService) {
|
|
427
439
|
this.masterService = masterService;
|
|
428
440
|
}
|
|
441
|
+
ngOnInit() {
|
|
442
|
+
initializeFieldNameAttribute(this.field());
|
|
443
|
+
}
|
|
429
444
|
field = input.required();
|
|
430
445
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ButtonComponent, deps: [{ token: MasterControlService }], target: i0.ɵɵFactoryTarget.Component });
|
|
431
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: ButtonComponent, isStandalone: true, selector: "lib-button", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<Button\n class=\"button\"\n *ngIf=\"field() && field()?.isVisible\"\n [disabled]=\"field()?.isDisable\"\n [ngStyle]=\"\n {\n '--button-border-width': field()?.controlStyle?.borderWidth ,\n '--button-border-color': field()?.controlStyle?.borderColor ,\n '--button-border-style': field()?.controlStyle?.borderStyle ,\n '--button-width': field()?.controlStyle?.width ,\n '--button-font-size': field()?.controlStyle?.fontSize ,\n '--button-font-weight': field()?.controlStyle?.fontWeight ,\n '--button-background': field()?.controlStyle?.background ,\n '--button-border-radius': field()?.controlStyle?.borderRadius ,\n '--button-text-color': field()?.controlStyle?.color ,\n '--button-margin': field()?.controlStyle?.margin ,\n }\"\n [ngClass]=\"field()?.isDisable ? 'button-disable' : 'button'\"\n>\n<span class=\"button-text\">\n<img *ngIf=\"field()?.imageUrl\" [src]='field().imageUrl'>\n<span>{{field()?.label}}</span>\n</span>\n</Button>\n", styles: [".button{height:var(--button-height, 32px)!important;min-width:var(--button-width, 164px)!important;background:var(--button-background, #ffbb00)!important;border-width:var(--button-border-width, 0px)!important;border-color:var(--button-border-color, #fb0)!important;border-style:var(--button-border-style, solid)!important;border-radius:var(--button-border-radius, 8px)!important;font-size:var(--button-font-size, 12px)!important;font-weight:var(--button-font-weight, 800)!important;color:var(--button-text-color, #444)!important;max-width:fit-content}.button-text{display:flex;justify-content:center;gap:4px}.button-text img{margin-top:3px}*{font-family:Mulish!important}.button-disable{background:#ececec!important}@media screen and (max-width: 768px){.button{height:40px!important}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
|
|
446
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: ButtonComponent, isStandalone: true, selector: "lib-button", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<Button\n class=\"button\"\n *ngIf=\"field() && field()?.isVisible\"\n [disabled]=\"field()?.isDisable\"\n [name]=\"field()?.fieldNameAttribute\"\n [ngStyle]=\"\n {\n '--button-border-width': field()?.controlStyle?.borderWidth ,\n '--button-border-color': field()?.controlStyle?.borderColor ,\n '--button-border-style': field()?.controlStyle?.borderStyle ,\n '--button-width': field()?.controlStyle?.width ,\n '--button-font-size': field()?.controlStyle?.fontSize ,\n '--button-font-weight': field()?.controlStyle?.fontWeight ,\n '--button-background': field()?.controlStyle?.background ,\n '--button-border-radius': field()?.controlStyle?.borderRadius ,\n '--button-text-color': field()?.controlStyle?.color ,\n '--button-margin': field()?.controlStyle?.margin ,\n }\"\n [ngClass]=\"field()?.isDisable ? 'button-disable' : 'button'\"\n>\n<span class=\"button-text\">\n<img *ngIf=\"field()?.imageUrl\" [src]='field().imageUrl'>\n<span>{{field()?.label}}</span>\n</span>\n</Button>\n", styles: [".button{height:var(--button-height, 32px)!important;min-width:var(--button-width, 164px)!important;background:var(--button-background, #ffbb00)!important;border-width:var(--button-border-width, 0px)!important;border-color:var(--button-border-color, #fb0)!important;border-style:var(--button-border-style, solid)!important;border-radius:var(--button-border-radius, 8px)!important;font-size:var(--button-font-size, 12px)!important;font-weight:var(--button-font-weight, 800)!important;color:var(--button-text-color, #444)!important;max-width:fit-content}.button-text{display:flex;justify-content:center;gap:4px}.button-text img{margin-top:3px}*{font-family:Mulish!important}.button-disable{background:#ececec!important}@media screen and (max-width: 768px){.button{height:40px!important}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
|
|
432
447
|
}
|
|
433
448
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ButtonComponent, decorators: [{
|
|
434
449
|
type: Component,
|
|
435
|
-
args: [{ selector: 'lib-button', standalone: true, imports: [CommonModule], template: "<Button\n class=\"button\"\n *ngIf=\"field() && field()?.isVisible\"\n [disabled]=\"field()?.isDisable\"\n [ngStyle]=\"\n {\n '--button-border-width': field()?.controlStyle?.borderWidth ,\n '--button-border-color': field()?.controlStyle?.borderColor ,\n '--button-border-style': field()?.controlStyle?.borderStyle ,\n '--button-width': field()?.controlStyle?.width ,\n '--button-font-size': field()?.controlStyle?.fontSize ,\n '--button-font-weight': field()?.controlStyle?.fontWeight ,\n '--button-background': field()?.controlStyle?.background ,\n '--button-border-radius': field()?.controlStyle?.borderRadius ,\n '--button-text-color': field()?.controlStyle?.color ,\n '--button-margin': field()?.controlStyle?.margin ,\n }\"\n [ngClass]=\"field()?.isDisable ? 'button-disable' : 'button'\"\n>\n<span class=\"button-text\">\n<img *ngIf=\"field()?.imageUrl\" [src]='field().imageUrl'>\n<span>{{field()?.label}}</span>\n</span>\n</Button>\n", styles: [".button{height:var(--button-height, 32px)!important;min-width:var(--button-width, 164px)!important;background:var(--button-background, #ffbb00)!important;border-width:var(--button-border-width, 0px)!important;border-color:var(--button-border-color, #fb0)!important;border-style:var(--button-border-style, solid)!important;border-radius:var(--button-border-radius, 8px)!important;font-size:var(--button-font-size, 12px)!important;font-weight:var(--button-font-weight, 800)!important;color:var(--button-text-color, #444)!important;max-width:fit-content}.button-text{display:flex;justify-content:center;gap:4px}.button-text img{margin-top:3px}*{font-family:Mulish!important}.button-disable{background:#ececec!important}@media screen and (max-width: 768px){.button{height:40px!important}}\n"] }]
|
|
450
|
+
args: [{ selector: 'lib-button', standalone: true, imports: [CommonModule], template: "<Button\n class=\"button\"\n *ngIf=\"field() && field()?.isVisible\"\n [disabled]=\"field()?.isDisable\"\n [name]=\"field()?.fieldNameAttribute\"\n [ngStyle]=\"\n {\n '--button-border-width': field()?.controlStyle?.borderWidth ,\n '--button-border-color': field()?.controlStyle?.borderColor ,\n '--button-border-style': field()?.controlStyle?.borderStyle ,\n '--button-width': field()?.controlStyle?.width ,\n '--button-font-size': field()?.controlStyle?.fontSize ,\n '--button-font-weight': field()?.controlStyle?.fontWeight ,\n '--button-background': field()?.controlStyle?.background ,\n '--button-border-radius': field()?.controlStyle?.borderRadius ,\n '--button-text-color': field()?.controlStyle?.color ,\n '--button-margin': field()?.controlStyle?.margin ,\n }\"\n [ngClass]=\"field()?.isDisable ? 'button-disable' : 'button'\"\n>\n<span class=\"button-text\">\n<img *ngIf=\"field()?.imageUrl\" [src]='field().imageUrl'>\n<span>{{field()?.label}}</span>\n</span>\n</Button>\n", styles: [".button{height:var(--button-height, 32px)!important;min-width:var(--button-width, 164px)!important;background:var(--button-background, #ffbb00)!important;border-width:var(--button-border-width, 0px)!important;border-color:var(--button-border-color, #fb0)!important;border-style:var(--button-border-style, solid)!important;border-radius:var(--button-border-radius, 8px)!important;font-size:var(--button-font-size, 12px)!important;font-weight:var(--button-font-weight, 800)!important;color:var(--button-text-color, #444)!important;max-width:fit-content}.button-text{display:flex;justify-content:center;gap:4px}.button-text img{margin-top:3px}*{font-family:Mulish!important}.button-disable{background:#ececec!important}@media screen and (max-width: 768px){.button{height:40px!important}}\n"] }]
|
|
436
451
|
}], ctorParameters: () => [{ type: MasterControlService }] });
|
|
437
452
|
|
|
438
453
|
class CustomizedTooltipDirective {
|
|
@@ -643,9 +658,9 @@ class SelectComponent {
|
|
|
643
658
|
infoClick = new EventEmitter();
|
|
644
659
|
isDropdownOpen = false;
|
|
645
660
|
// @Output() change = new EventEmitter<any>();
|
|
646
|
-
|
|
647
|
-
|
|
648
|
-
|
|
661
|
+
ngOnInit() {
|
|
662
|
+
initializeFieldNameAttribute(this.field());
|
|
663
|
+
}
|
|
649
664
|
writeValue(value) {
|
|
650
665
|
this.inputValue = value;
|
|
651
666
|
}
|
|
@@ -700,7 +715,7 @@ class SelectComponent {
|
|
|
700
715
|
useExisting: SelectComponent,
|
|
701
716
|
multi: true
|
|
702
717
|
}
|
|
703
|
-
], ngImport: i0, template: "<div [class]=\"field()?.configData?.isInlineLabel ? 'select-inline-wrapper' : ''\">\n<label class=\"field-lable info-label\" *ngIf=\"field() && field()?.isVisible && field().isShowLabel\" [class.select-inline-label]=\"field()?.configData?.isInlineLabel\">\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<div [class]=\"field()?.configData?.isInlineLabel ? 'select-inline-control' : ''\">\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-select-trigger>\n <ng-container *ngFor=\"let data of field()?.options\">\n <ng-container *ngIf=\"data.value === inputValue\">\n {{ data.label }}\n <span *ngIf=\"data.displayText && data.displayStyle\" [ngStyle]=\"{'color': data.displayStyle?.fontColor, 'font-size': data.displayStyle?.fontSize, 'font-weight': data.displayStyle?.fontWeight}\">{{data.displayText}}</span>\n </ng-container>\n </ng-container>\n </mat-select-trigger>\n <mat-option *ngFor=\"let data of field()?.options\" [id]=\"data.value\" [value]=\"data.value\">{{\n data.label\n }}\n <span *ngIf=\"data.displayText && data.displayStyle\" [ngStyle]=\"{'color': data.displayStyle?.fontColor, 'font-size': data.displayStyle?.fontSize, 'font-weight': data.displayStyle?.fontWeight}\">{{data.displayText}}</span>\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-select-trigger>\n <ng-container *ngFor=\"let data of field()?.options\">\n <ng-container *ngIf=\"data.value === inputValue\">\n {{ data.label }}\n <span *ngIf=\"data.displayText && data.displayStyle\" [ngStyle]=\"{'color': data.displayStyle?.fontColor, 'font-size': data.displayStyle?.fontSize, 'font-weight': data.displayStyle?.fontWeight}\">{{data.displayText}}</span>\n </ng-container>\n </ng-container>\n </mat-select-trigger>\n <mat-option *ngFor=\"let data of field()?.options\" [id]=\"data.value\" [value]=\"data.value\">{{\n data.label\n }}\n <span *ngIf=\"data.displayText && data.displayStyle\" [ngStyle]=\"{'color': data.displayStyle?.fontColor, 'font-size': data.displayStyle?.fontSize, 'font-weight': data.displayStyle?.fontWeight}\">{{data.displayText}}</span>\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</div>\n</div>\n", styles: ["@media (min-width: 769px){.select-inline-control{width:33.3333%}}.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: "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: 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"] }] });
|
|
718
|
+
], ngImport: i0, template: "<div [class]=\"field()?.configData?.isInlineLabel ? 'select-inline-wrapper' : ''\">\n<label class=\"field-lable info-label\" *ngIf=\"field() && field()?.isVisible && field().isShowLabel\" [class.select-inline-label]=\"field()?.configData?.isInlineLabel\">\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<div [class]=\"field()?.configData?.isInlineLabel ? 'select-inline-control' : ''\">\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()?.fieldNameAttribute\" [required]=\"field()?.validators?.isRequired\"\n [placeholder]=\"field()?.placeHolder\" [disabled]=\"field()?.isDisable\" (openedChange)=\"onSelectOpened($event)\"\n [value]=\"inputValue\" (selectionChange)=\"selectionChanged($event)\" [formControl]=\"reactiveFormControlobject()\">\n <mat-select-trigger>\n <ng-container *ngFor=\"let data of field()?.options\">\n <ng-container *ngIf=\"data.value === inputValue\">\n {{ data.label }}\n <span *ngIf=\"data.displayText && data.displayStyle\" [ngStyle]=\"{'color': data.displayStyle?.fontColor, 'font-size': data.displayStyle?.fontSize, 'font-weight': data.displayStyle?.fontWeight}\">{{data.displayText}}</span>\n </ng-container>\n </ng-container>\n </mat-select-trigger>\n <mat-option *ngFor=\"let data of field()?.options\" [id]=\"data.value\" [value]=\"data.value\">{{\n data.label\n }}\n <span *ngIf=\"data.displayText && data.displayStyle\" [ngStyle]=\"{'color': data.displayStyle?.fontColor, 'font-size': data.displayStyle?.fontSize, 'font-weight': data.displayStyle?.fontWeight}\">{{data.displayText}}</span>\n </mat-option>\n </mat-select>\n }@else {\n <mat-select [id]=\"field()?.fieldName\" [attr.name]=\"field()?.fieldNameAttribute\" [required]=\"field()?.validators?.isRequired\"\n [placeholder]=\"field()?.placeHolder\" [disabled]=\"field()?.isDisable\" (openedChange)=\"onSelectOpened($event)\"\n [value]=\"inputValue\" (selectionChange)=\"selectionChanged($event)\">\n <mat-select-trigger>\n <ng-container *ngFor=\"let data of field()?.options\">\n <ng-container *ngIf=\"data.value === inputValue\">\n {{ data.label }}\n <span *ngIf=\"data.displayText && data.displayStyle\" [ngStyle]=\"{'color': data.displayStyle?.fontColor, 'font-size': data.displayStyle?.fontSize, 'font-weight': data.displayStyle?.fontWeight}\">{{data.displayText}}</span>\n </ng-container>\n </ng-container>\n </mat-select-trigger>\n <mat-option *ngFor=\"let data of field()?.options\" [id]=\"data.value\" [value]=\"data.value\">{{\n data.label\n }}\n <span *ngIf=\"data.displayText && data.displayStyle\" [ngStyle]=\"{'color': data.displayStyle?.fontColor, 'font-size': data.displayStyle?.fontSize, 'font-weight': data.displayStyle?.fontWeight}\">{{data.displayText}}</span>\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</div>\n</div>\n", styles: ["@media (min-width: 769px){.select-inline-control{width:33.3333%}}.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: "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: 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
719
|
}
|
|
705
720
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SelectComponent, decorators: [{
|
|
706
721
|
type: Component,
|
|
@@ -720,7 +735,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
720
735
|
useExisting: SelectComponent,
|
|
721
736
|
multi: true
|
|
722
737
|
}
|
|
723
|
-
], template: "<div [class]=\"field()?.configData?.isInlineLabel ? 'select-inline-wrapper' : ''\">\n<label class=\"field-lable info-label\" *ngIf=\"field() && field()?.isVisible && field().isShowLabel\" [class.select-inline-label]=\"field()?.configData?.isInlineLabel\">\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<div [class]=\"field()?.configData?.isInlineLabel ? 'select-inline-control' : ''\">\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-select-trigger>\n <ng-container *ngFor=\"let data of field()?.options\">\n <ng-container *ngIf=\"data.value === inputValue\">\n {{ data.label }}\n <span *ngIf=\"data.displayText && data.displayStyle\" [ngStyle]=\"{'color': data.displayStyle?.fontColor, 'font-size': data.displayStyle?.fontSize, 'font-weight': data.displayStyle?.fontWeight}\">{{data.displayText}}</span>\n </ng-container>\n </ng-container>\n </mat-select-trigger>\n <mat-option *ngFor=\"let data of field()?.options\" [id]=\"data.value\" [value]=\"data.value\">{{\n data.label\n }}\n <span *ngIf=\"data.displayText && data.displayStyle\" [ngStyle]=\"{'color': data.displayStyle?.fontColor, 'font-size': data.displayStyle?.fontSize, 'font-weight': data.displayStyle?.fontWeight}\">{{data.displayText}}</span>\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-select-trigger>\n <ng-container *ngFor=\"let data of field()?.options\">\n <ng-container *ngIf=\"data.value === inputValue\">\n {{ data.label }}\n <span *ngIf=\"data.displayText && data.displayStyle\" [ngStyle]=\"{'color': data.displayStyle?.fontColor, 'font-size': data.displayStyle?.fontSize, 'font-weight': data.displayStyle?.fontWeight}\">{{data.displayText}}</span>\n </ng-container>\n </ng-container>\n </mat-select-trigger>\n <mat-option *ngFor=\"let data of field()?.options\" [id]=\"data.value\" [value]=\"data.value\">{{\n data.label\n }}\n <span *ngIf=\"data.displayText && data.displayStyle\" [ngStyle]=\"{'color': data.displayStyle?.fontColor, 'font-size': data.displayStyle?.fontSize, 'font-weight': data.displayStyle?.fontWeight}\">{{data.displayText}}</span>\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</div>\n</div>\n", styles: ["@media (min-width: 769px){.select-inline-control{width:33.3333%}}.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"] }]
|
|
738
|
+
], template: "<div [class]=\"field()?.configData?.isInlineLabel ? 'select-inline-wrapper' : ''\">\n<label class=\"field-lable info-label\" *ngIf=\"field() && field()?.isVisible && field().isShowLabel\" [class.select-inline-label]=\"field()?.configData?.isInlineLabel\">\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<div [class]=\"field()?.configData?.isInlineLabel ? 'select-inline-control' : ''\">\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()?.fieldNameAttribute\" [required]=\"field()?.validators?.isRequired\"\n [placeholder]=\"field()?.placeHolder\" [disabled]=\"field()?.isDisable\" (openedChange)=\"onSelectOpened($event)\"\n [value]=\"inputValue\" (selectionChange)=\"selectionChanged($event)\" [formControl]=\"reactiveFormControlobject()\">\n <mat-select-trigger>\n <ng-container *ngFor=\"let data of field()?.options\">\n <ng-container *ngIf=\"data.value === inputValue\">\n {{ data.label }}\n <span *ngIf=\"data.displayText && data.displayStyle\" [ngStyle]=\"{'color': data.displayStyle?.fontColor, 'font-size': data.displayStyle?.fontSize, 'font-weight': data.displayStyle?.fontWeight}\">{{data.displayText}}</span>\n </ng-container>\n </ng-container>\n </mat-select-trigger>\n <mat-option *ngFor=\"let data of field()?.options\" [id]=\"data.value\" [value]=\"data.value\">{{\n data.label\n }}\n <span *ngIf=\"data.displayText && data.displayStyle\" [ngStyle]=\"{'color': data.displayStyle?.fontColor, 'font-size': data.displayStyle?.fontSize, 'font-weight': data.displayStyle?.fontWeight}\">{{data.displayText}}</span>\n </mat-option>\n </mat-select>\n }@else {\n <mat-select [id]=\"field()?.fieldName\" [attr.name]=\"field()?.fieldNameAttribute\" [required]=\"field()?.validators?.isRequired\"\n [placeholder]=\"field()?.placeHolder\" [disabled]=\"field()?.isDisable\" (openedChange)=\"onSelectOpened($event)\"\n [value]=\"inputValue\" (selectionChange)=\"selectionChanged($event)\">\n <mat-select-trigger>\n <ng-container *ngFor=\"let data of field()?.options\">\n <ng-container *ngIf=\"data.value === inputValue\">\n {{ data.label }}\n <span *ngIf=\"data.displayText && data.displayStyle\" [ngStyle]=\"{'color': data.displayStyle?.fontColor, 'font-size': data.displayStyle?.fontSize, 'font-weight': data.displayStyle?.fontWeight}\">{{data.displayText}}</span>\n </ng-container>\n </ng-container>\n </mat-select-trigger>\n <mat-option *ngFor=\"let data of field()?.options\" [id]=\"data.value\" [value]=\"data.value\">{{\n data.label\n }}\n <span *ngIf=\"data.displayText && data.displayStyle\" [ngStyle]=\"{'color': data.displayStyle?.fontColor, 'font-size': data.displayStyle?.fontSize, 'font-weight': data.displayStyle?.fontWeight}\">{{data.displayText}}</span>\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</div>\n</div>\n", styles: ["@media (min-width: 769px){.select-inline-control{width:33.3333%}}.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
739
|
}], ctorParameters: () => [{ type: MasterControlService }], propDecorators: { selectionChange: [{
|
|
725
740
|
type: Output
|
|
726
741
|
}], infoClick: [{
|
|
@@ -739,6 +754,7 @@ class RadioComponent {
|
|
|
739
754
|
onTouched = () => { };
|
|
740
755
|
change = new EventEmitter();
|
|
741
756
|
ngOnInit() {
|
|
757
|
+
initializeFieldNameAttribute(this.field());
|
|
742
758
|
// Initialize inputValue with a default or initial value if needed
|
|
743
759
|
}
|
|
744
760
|
writeValue(value) {
|
|
@@ -780,7 +796,7 @@ class RadioComponent {
|
|
|
780
796
|
useExisting: RadioComponent,
|
|
781
797
|
multi: true
|
|
782
798
|
}
|
|
783
|
-
], ngImport: i0, template: "<div [class]=\"field()?.configData?.isInlineLabel ? 'radio-inline-wrapper' : ''\">\n <label class=\"field-lable\" *ngIf=\"field() && field()?.isVisible && field().isShowLabel\" [class.radio-inline-label]=\"field()?.configData?.isInlineLabel\" [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]=\"'radio-btn-group radio-btn-gender ' + field()?.fieldName + (field()?.configData?.isInlineLabel ? ' radio-inline-group' : ' w-100')\" *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()?.
|
|
799
|
+
], ngImport: i0, template: "<div [class]=\"field()?.configData?.isInlineLabel ? 'radio-inline-wrapper' : ''\">\n <label class=\"field-lable\" *ngIf=\"field() && field()?.isVisible && field().isShowLabel\" [class.radio-inline-label]=\"field()?.configData?.isInlineLabel\" [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]=\"'radio-btn-group radio-btn-gender ' + field()?.fieldName + (field()?.configData?.isInlineLabel ? ' radio-inline-group' : ' w-100')\" *ngIf=\"field() && field()?.isVisible\"\n [required]=\"field()?.validators?.isRequired\"\n [value]=\"inputValue\"\n [formControl]=\"reactiveFormControlobject()\"\n (change)=\"onRadioGroupChange($event)\"\n [id]=\"field()?.fieldName\"\n [attr.name]=\"field()?.fieldNameAttribute\"\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 || data.disabled === true || data.disabled === 'true', 'two-options': field()?.options?.length === 2}\"\n (click)=\"(data.disabled === true || data.disabled === 'true') ? null : 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 [disabled]=\"data.disabled === true || data.disabled === 'true'\"\n [id]=\"field()?.fieldName + '_' + data.value\"\n [name]=\"field()?.fieldNameAttribute + '_' + 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]=\"'radio-btn-group radio-btn-gender ' + field()?.fieldName + (field()?.configData?.isInlineLabel ? ' radio-inline-group' : ' w-100')\" *ngIf=\"field() && field()?.isVisible\"\n [required]=\"field()?.validators?.isRequired\"\n [value]=\"inputValue\"\n (change)=\"onRadioGroupChange($event)\"\n [id]=\"field()?.fieldName\"\n [attr.name]=\"field()?.fieldNameAttribute\"\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 || data.disabled === true || data.disabled === 'true', 'two-options': field()?.options?.length === 2}\"\n (click)=\"(data.disabled === true || data.disabled === 'true') ? null : 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 [disabled]=\"data.disabled === true || data.disabled === 'true'\"\n [id]=\"field()?.fieldName + '_' + data.value\"\n [name]=\"field()?.fieldNameAttribute + '_' + 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</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;height:100%;border-radius:var(--radio-button-border-radius, 6px)}.radio-card-gender.two-options{min-width:144px!important}@media (max-width: 400px){.radio-btn-group .radio-card-gender.two-options{min-width:0!important;width:50%!important;max-width:50%!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}@media (min-width: 769px){.radio-inline-wrapper{display:flex;align-items:center;justify-content:space-between;width:100%;gap:1rem}.radio-inline-label{flex:1;margin-bottom:0!important;white-space:normal!important}.radio-inline-group{flex-shrink:0}}\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
800
|
}
|
|
785
801
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RadioComponent, decorators: [{
|
|
786
802
|
type: Component,
|
|
@@ -796,7 +812,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
796
812
|
useExisting: RadioComponent,
|
|
797
813
|
multi: true
|
|
798
814
|
}
|
|
799
|
-
], template: "<div [class]=\"field()?.configData?.isInlineLabel ? 'radio-inline-wrapper' : ''\">\n <label class=\"field-lable\" *ngIf=\"field() && field()?.isVisible && field().isShowLabel\" [class.radio-inline-label]=\"field()?.configData?.isInlineLabel\" [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]=\"'radio-btn-group radio-btn-gender ' + field()?.fieldName + (field()?.configData?.isInlineLabel ? ' radio-inline-group' : ' w-100')\" *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()?.
|
|
815
|
+
], template: "<div [class]=\"field()?.configData?.isInlineLabel ? 'radio-inline-wrapper' : ''\">\n <label class=\"field-lable\" *ngIf=\"field() && field()?.isVisible && field().isShowLabel\" [class.radio-inline-label]=\"field()?.configData?.isInlineLabel\" [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]=\"'radio-btn-group radio-btn-gender ' + field()?.fieldName + (field()?.configData?.isInlineLabel ? ' radio-inline-group' : ' w-100')\" *ngIf=\"field() && field()?.isVisible\"\n [required]=\"field()?.validators?.isRequired\"\n [value]=\"inputValue\"\n [formControl]=\"reactiveFormControlobject()\"\n (change)=\"onRadioGroupChange($event)\"\n [id]=\"field()?.fieldName\"\n [attr.name]=\"field()?.fieldNameAttribute\"\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 || data.disabled === true || data.disabled === 'true', 'two-options': field()?.options?.length === 2}\"\n (click)=\"(data.disabled === true || data.disabled === 'true') ? null : 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 [disabled]=\"data.disabled === true || data.disabled === 'true'\"\n [id]=\"field()?.fieldName + '_' + data.value\"\n [name]=\"field()?.fieldNameAttribute + '_' + 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]=\"'radio-btn-group radio-btn-gender ' + field()?.fieldName + (field()?.configData?.isInlineLabel ? ' radio-inline-group' : ' w-100')\" *ngIf=\"field() && field()?.isVisible\"\n [required]=\"field()?.validators?.isRequired\"\n [value]=\"inputValue\"\n (change)=\"onRadioGroupChange($event)\"\n [id]=\"field()?.fieldName\"\n [attr.name]=\"field()?.fieldNameAttribute\"\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 || data.disabled === true || data.disabled === 'true', 'two-options': field()?.options?.length === 2}\"\n (click)=\"(data.disabled === true || data.disabled === 'true') ? null : 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 [disabled]=\"data.disabled === true || data.disabled === 'true'\"\n [id]=\"field()?.fieldName + '_' + data.value\"\n [name]=\"field()?.fieldNameAttribute + '_' + 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</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;height:100%;border-radius:var(--radio-button-border-radius, 6px)}.radio-card-gender.two-options{min-width:144px!important}@media (max-width: 400px){.radio-btn-group .radio-card-gender.two-options{min-width:0!important;width:50%!important;max-width:50%!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}@media (min-width: 769px){.radio-inline-wrapper{display:flex;align-items:center;justify-content:space-between;width:100%;gap:1rem}.radio-inline-label{flex:1;margin-bottom:0!important;white-space:normal!important}.radio-inline-group{flex-shrink:0}}\n"] }]
|
|
800
816
|
}], ctorParameters: () => [{ type: MasterControlService }], propDecorators: { change: [{
|
|
801
817
|
type: Output
|
|
802
818
|
}] } });
|
|
@@ -813,6 +829,9 @@ class ToggleComponent {
|
|
|
813
829
|
_onTouched = () => { };
|
|
814
830
|
// Declare Output event emitters here (class level)
|
|
815
831
|
change = new EventEmitter();
|
|
832
|
+
ngOnInit() {
|
|
833
|
+
initializeFieldNameAttribute(this.field());
|
|
834
|
+
}
|
|
816
835
|
writeValue(obj) {
|
|
817
836
|
this.inputValue = obj;
|
|
818
837
|
}
|
|
@@ -839,7 +858,7 @@ class ToggleComponent {
|
|
|
839
858
|
useExisting: forwardRef(() => ToggleComponent),
|
|
840
859
|
multi: true,
|
|
841
860
|
},
|
|
842
|
-
], ngImport: i0, template: "<div class=\"\" *ngIf=\"field() && field()?.isVisible && field().isShowLabel\" [ngStyle]=\"{\n '--custom-toggle-bg-color': field()?.controlStyle?.background,\n '--custom-toggle-border-color': field()?.controlStyle?.borderColor ,\n '--custom-toggle-border-width': field()?.controlStyle?.borderWidth ,\n '--custom-toggle-border-radius': field()?.controlStyle?.borderRadius,\n '--custom-toggle-width': field()?.controlStyle?.width,\n }\"\n class=\"card toggle-background mt-2\"\n >\n <div class=\"toggle_switch mt-2\">\n <div *ngIf=\"field().configData?.leftLabel\" [ngStyle]=\"{\n '--custom-toggle-font-size': field()?.controlStyle?.fontSize ,\n '--custom-toggle-font-weight': field()?.controlStyle?.fontWeight ,\n '--custom-toggle-font-family': field()?.controlStyle?.fontFamily ,\n '--custom-toggle-font-color': field()?.controlStyle?.color ,\n }\" class=\"toggle-text\">\n <div>{{field().configData?.leftLabel}}</div>\n </div>\n <div class=\"mt-1\">\n <label class=\"switch\">\n @if(reactiveFormControlobject()) {\n <input\n type=\"checkbox\"\n [name]=\"field()?.
|
|
861
|
+
], ngImport: i0, template: "<div class=\"\" *ngIf=\"field() && field()?.isVisible && field().isShowLabel\" [ngStyle]=\"{\n '--custom-toggle-bg-color': field()?.controlStyle?.background,\n '--custom-toggle-border-color': field()?.controlStyle?.borderColor ,\n '--custom-toggle-border-width': field()?.controlStyle?.borderWidth ,\n '--custom-toggle-border-radius': field()?.controlStyle?.borderRadius,\n '--custom-toggle-width': field()?.controlStyle?.width,\n }\"\n class=\"card toggle-background mt-2\"\n >\n <div class=\"toggle_switch mt-2\">\n <div *ngIf=\"field().configData?.leftLabel\" [ngStyle]=\"{\n '--custom-toggle-font-size': field()?.controlStyle?.fontSize ,\n '--custom-toggle-font-weight': field()?.controlStyle?.fontWeight ,\n '--custom-toggle-font-family': field()?.controlStyle?.fontFamily ,\n '--custom-toggle-font-color': field()?.controlStyle?.color ,\n }\" class=\"toggle-text\">\n <div>{{field().configData?.leftLabel}}</div>\n </div>\n <div class=\"mt-1\">\n <label class=\"switch\">\n @if(reactiveFormControlobject()) {\n <input\n type=\"checkbox\"\n [name]=\"field()?.fieldNameAttribute\"\n [id]=\"field()?.fieldName\"\n [checked]=\"inputValue\"\n [disabled]=\"field()?.isDisable\"\n [required]=\"field()?.validators?.isRequired\"\n [formControl]=\"reactiveFormControlobject()\"\n (change)=\"onToggleChange($event)\"\n />\n }@else {\n <input\n type=\"checkbox\"\n [name]=\"field()?.fieldNameAttribute\"\n [id]=\"field()?.fieldName\"\n [checked]=\"inputValue\"\n [disabled]=\"field()?.isDisable\"\n [required]=\"field()?.validators?.isRequired\"\n (change)=\"onToggleChange($event)\"\n />\n }\n <span class=\"slider round\"></span>\n </label>\n </div>\n <div [ngStyle]=\"{\n '--custom-toggle-font-size': field()?.controlStyle?.fontSize ,\n '--custom-toggle-font-weight': field()?.controlStyle?.fontWeight ,\n '--custom-toggle-font-family': field()?.controlStyle?.fontFamily ,\n '--custom-toggle-font-color': field()?.controlStyle?.color ,\n }\" class=\"toggle-text mb-2\">\n <div>{{field()?.label}}</div>\n <div style=\"font-size: 10px; font-weight: 400;\" *ngIf=\"field().configData?.subLabel\">{{field()?.configData?.subLabel}} <img alt=\"\" [src]=\"field()?.imageUrl\" *ngIf=\"field()?.imageUrl\" /> </div>\n </div>\n </div>\n </div>\n", styles: ["*{font-family:mulish!important}::ng-deep .toggle-background{background-color:var(--custom-toggle-bg-color , #f5f5f5)!important;padding:2px 8px;width:var(--custom-toggle-width , 100%)!important;box-shadow:none}::ng-deep .toggle-background{border-color:var(--custom-toggle-border-color , transparent)!important;border-radius:var(--custom-toggle-border-radius , 4px)!important;border-width:var(--custom-toggle-border-width , 1px)!important}::ng-deep .toggle_switch{display:flex;align-items:center;gap:10px;font-size:17px;font-weight:400;font-family:Mulish;color:#444}::ng-deep .switch{position:relative;display:inline-block;width:34px;height:18px}::ng-deep .switch input{opacity:0;width:0;height:0}::ng-deep .slider{position:absolute;cursor:pointer;inset:0;background-color:#ddd;-webkit-transition:.4s;transition:.4s}::ng-deep .slider:before{position:absolute;content:\"\";height:11px;width:11px;left:4px;bottom:4px;background-color:#fff;-webkit-transition:.4s;transition:.4s}::ng-deep .slider.round{border-radius:34px}::ng-deep input:checked+.slider{background-color:#fb0}::ng-deep input:checked+.slider:before{-webkit-transform:translateX(16px);-ms-transform:translateX(16px);transform:translate(16px)}::ng-deep .slider.round:before{border-radius:50%}::ng-deep .remove-border{border:none!important;outline:none!important;box-shadow:none!important}::ng-deep .remove-border:focus-visible{border:none!important;outline:none!important;box-shadow:none!important}::ng-deep .mdc-checkbox__native-control:enabled:checked~.mdc-checkbox__background,.mdc-checkbox__native-control:enabled:indeterminate~.mdc-checkbox__background{border-color:#fb0!important;background-color:#fb0!important;border-radius:4px!important}::ng-deep .mdc-checkbox__checkmark{color:#fff!important}::ng-deep .mdc-checkbox__background{border:1px solid #dadada!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i4.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.CheckboxRequiredValidator, selector: "input[type=checkbox][required][formControlName],input[type=checkbox][required][formControl],input[type=checkbox][required][ngModel]" }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
|
|
843
862
|
}
|
|
844
863
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ToggleComponent, decorators: [{
|
|
845
864
|
type: Component,
|
|
@@ -849,7 +868,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
849
868
|
useExisting: forwardRef(() => ToggleComponent),
|
|
850
869
|
multi: true,
|
|
851
870
|
},
|
|
852
|
-
], template: "<div class=\"\" *ngIf=\"field() && field()?.isVisible && field().isShowLabel\" [ngStyle]=\"{\n '--custom-toggle-bg-color': field()?.controlStyle?.background,\n '--custom-toggle-border-color': field()?.controlStyle?.borderColor ,\n '--custom-toggle-border-width': field()?.controlStyle?.borderWidth ,\n '--custom-toggle-border-radius': field()?.controlStyle?.borderRadius,\n '--custom-toggle-width': field()?.controlStyle?.width,\n }\"\n class=\"card toggle-background mt-2\"\n >\n <div class=\"toggle_switch mt-2\">\n <div *ngIf=\"field().configData?.leftLabel\" [ngStyle]=\"{\n '--custom-toggle-font-size': field()?.controlStyle?.fontSize ,\n '--custom-toggle-font-weight': field()?.controlStyle?.fontWeight ,\n '--custom-toggle-font-family': field()?.controlStyle?.fontFamily ,\n '--custom-toggle-font-color': field()?.controlStyle?.color ,\n }\" class=\"toggle-text\">\n <div>{{field().configData?.leftLabel}}</div>\n </div>\n <div class=\"mt-1\">\n <label class=\"switch\">\n @if(reactiveFormControlobject()) {\n <input\n type=\"checkbox\"\n [name]=\"field()?.
|
|
871
|
+
], template: "<div class=\"\" *ngIf=\"field() && field()?.isVisible && field().isShowLabel\" [ngStyle]=\"{\n '--custom-toggle-bg-color': field()?.controlStyle?.background,\n '--custom-toggle-border-color': field()?.controlStyle?.borderColor ,\n '--custom-toggle-border-width': field()?.controlStyle?.borderWidth ,\n '--custom-toggle-border-radius': field()?.controlStyle?.borderRadius,\n '--custom-toggle-width': field()?.controlStyle?.width,\n }\"\n class=\"card toggle-background mt-2\"\n >\n <div class=\"toggle_switch mt-2\">\n <div *ngIf=\"field().configData?.leftLabel\" [ngStyle]=\"{\n '--custom-toggle-font-size': field()?.controlStyle?.fontSize ,\n '--custom-toggle-font-weight': field()?.controlStyle?.fontWeight ,\n '--custom-toggle-font-family': field()?.controlStyle?.fontFamily ,\n '--custom-toggle-font-color': field()?.controlStyle?.color ,\n }\" class=\"toggle-text\">\n <div>{{field().configData?.leftLabel}}</div>\n </div>\n <div class=\"mt-1\">\n <label class=\"switch\">\n @if(reactiveFormControlobject()) {\n <input\n type=\"checkbox\"\n [name]=\"field()?.fieldNameAttribute\"\n [id]=\"field()?.fieldName\"\n [checked]=\"inputValue\"\n [disabled]=\"field()?.isDisable\"\n [required]=\"field()?.validators?.isRequired\"\n [formControl]=\"reactiveFormControlobject()\"\n (change)=\"onToggleChange($event)\"\n />\n }@else {\n <input\n type=\"checkbox\"\n [name]=\"field()?.fieldNameAttribute\"\n [id]=\"field()?.fieldName\"\n [checked]=\"inputValue\"\n [disabled]=\"field()?.isDisable\"\n [required]=\"field()?.validators?.isRequired\"\n (change)=\"onToggleChange($event)\"\n />\n }\n <span class=\"slider round\"></span>\n </label>\n </div>\n <div [ngStyle]=\"{\n '--custom-toggle-font-size': field()?.controlStyle?.fontSize ,\n '--custom-toggle-font-weight': field()?.controlStyle?.fontWeight ,\n '--custom-toggle-font-family': field()?.controlStyle?.fontFamily ,\n '--custom-toggle-font-color': field()?.controlStyle?.color ,\n }\" class=\"toggle-text mb-2\">\n <div>{{field()?.label}}</div>\n <div style=\"font-size: 10px; font-weight: 400;\" *ngIf=\"field().configData?.subLabel\">{{field()?.configData?.subLabel}} <img alt=\"\" [src]=\"field()?.imageUrl\" *ngIf=\"field()?.imageUrl\" /> </div>\n </div>\n </div>\n </div>\n", styles: ["*{font-family:mulish!important}::ng-deep .toggle-background{background-color:var(--custom-toggle-bg-color , #f5f5f5)!important;padding:2px 8px;width:var(--custom-toggle-width , 100%)!important;box-shadow:none}::ng-deep .toggle-background{border-color:var(--custom-toggle-border-color , transparent)!important;border-radius:var(--custom-toggle-border-radius , 4px)!important;border-width:var(--custom-toggle-border-width , 1px)!important}::ng-deep .toggle_switch{display:flex;align-items:center;gap:10px;font-size:17px;font-weight:400;font-family:Mulish;color:#444}::ng-deep .switch{position:relative;display:inline-block;width:34px;height:18px}::ng-deep .switch input{opacity:0;width:0;height:0}::ng-deep .slider{position:absolute;cursor:pointer;inset:0;background-color:#ddd;-webkit-transition:.4s;transition:.4s}::ng-deep .slider:before{position:absolute;content:\"\";height:11px;width:11px;left:4px;bottom:4px;background-color:#fff;-webkit-transition:.4s;transition:.4s}::ng-deep .slider.round{border-radius:34px}::ng-deep input:checked+.slider{background-color:#fb0}::ng-deep input:checked+.slider:before{-webkit-transform:translateX(16px);-ms-transform:translateX(16px);transform:translate(16px)}::ng-deep .slider.round:before{border-radius:50%}::ng-deep .remove-border{border:none!important;outline:none!important;box-shadow:none!important}::ng-deep .remove-border:focus-visible{border:none!important;outline:none!important;box-shadow:none!important}::ng-deep .mdc-checkbox__native-control:enabled:checked~.mdc-checkbox__background,.mdc-checkbox__native-control:enabled:indeterminate~.mdc-checkbox__background{border-color:#fb0!important;background-color:#fb0!important;border-radius:4px!important}::ng-deep .mdc-checkbox__checkmark{color:#fff!important}::ng-deep .mdc-checkbox__background{border:1px solid #dadada!important}\n"] }]
|
|
853
872
|
}], ctorParameters: () => [{ type: MasterControlService }], propDecorators: { change: [{
|
|
854
873
|
type: Output
|
|
855
874
|
}] } });
|
|
@@ -1026,6 +1045,9 @@ class UploadComponent {
|
|
|
1026
1045
|
this.injector = injector;
|
|
1027
1046
|
this.masterservice = masterservice;
|
|
1028
1047
|
}
|
|
1048
|
+
ngOnInit() {
|
|
1049
|
+
initializeFieldNameAttribute(this.field());
|
|
1050
|
+
}
|
|
1029
1051
|
ngOnChanges(changes) {
|
|
1030
1052
|
if ((changes['openQuoteImageObj']) && !this.masterService.checkIfValueIsEmpty(changes['openQuoteImageObj'].currentValue)) {
|
|
1031
1053
|
if (!this.masterService.checkIfValueIsEmpty(this.openQuoteImageObj()) &&
|
|
@@ -1183,7 +1205,7 @@ class UploadComponent {
|
|
|
1183
1205
|
useExisting: UploadComponent,
|
|
1184
1206
|
multi: true
|
|
1185
1207
|
}
|
|
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()?.
|
|
1208
|
+
], 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()?.fieldNameAttribute\"\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()?.fieldNameAttribute\"\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
1209
|
}
|
|
1188
1210
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UploadComponent, decorators: [{
|
|
1189
1211
|
type: Component,
|
|
@@ -1197,7 +1219,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
1197
1219
|
useExisting: UploadComponent,
|
|
1198
1220
|
multi: true
|
|
1199
1221
|
}
|
|
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()?.
|
|
1222
|
+
], 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()?.fieldNameAttribute\"\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()?.fieldNameAttribute\"\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
1223
|
}], ctorParameters: () => [{ type: MasterControlService }, { type: i0.ApplicationRef }, { type: i0.EnvironmentInjector }, { type: MasterService }], propDecorators: { fileInput: [{
|
|
1202
1224
|
type: ViewChild,
|
|
1203
1225
|
args: ['fileInput']
|
|
@@ -1240,6 +1262,9 @@ class DobComponent {
|
|
|
1240
1262
|
constructor(service) {
|
|
1241
1263
|
this.service = service;
|
|
1242
1264
|
}
|
|
1265
|
+
ngOnInit() {
|
|
1266
|
+
initializeFieldNameAttribute(this.field());
|
|
1267
|
+
}
|
|
1243
1268
|
dateDivisionFormat(event) {
|
|
1244
1269
|
let evt = event.target;
|
|
1245
1270
|
// Check if user is deleting (backspace/delete)
|
|
@@ -1378,7 +1403,7 @@ class DobComponent {
|
|
|
1378
1403
|
deps: []
|
|
1379
1404
|
},
|
|
1380
1405
|
{ 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 ' + 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()?.
|
|
1406
|
+
], 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()?.fieldNameAttribute\" [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()?.fieldNameAttribute\" [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
1407
|
}
|
|
1383
1408
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DobComponent, decorators: [{
|
|
1384
1409
|
type: Component,
|
|
@@ -1394,7 +1419,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
1394
1419
|
deps: []
|
|
1395
1420
|
},
|
|
1396
1421
|
{ 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 ' + 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()?.
|
|
1422
|
+
], 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()?.fieldNameAttribute\" [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()?.fieldNameAttribute\" [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
1423
|
}], ctorParameters: () => [{ type: MasterControlService }], propDecorators: { blur: [{
|
|
1399
1424
|
type: Output
|
|
1400
1425
|
}], valueChange: [{
|
|
@@ -1422,6 +1447,7 @@ class MobNumberComponent {
|
|
|
1422
1447
|
// Declare Output event emitters here (class level)
|
|
1423
1448
|
blur = new EventEmitter();
|
|
1424
1449
|
ngOnInit() {
|
|
1450
|
+
initializeFieldNameAttribute(this.field());
|
|
1425
1451
|
this.CountryCode = '+91';
|
|
1426
1452
|
this.filteredOptions = this.field().options || [];
|
|
1427
1453
|
}
|
|
@@ -1473,7 +1499,7 @@ class MobNumberComponent {
|
|
|
1473
1499
|
useExisting: MobNumberComponent,
|
|
1474
1500
|
multi: true
|
|
1475
1501
|
}
|
|
1476
|
-
], 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 class=\"w-100 mobile-field\"\n appearance=\"outline\"\n *ngIf=\"field() && field()?.isVisible\"\n [ngStyle]=\"{\n '--custom-border-color': field()?.controlStyle?.borderColor ,\n '--custom-border-width': field()?.controlStyle?.borderWidth ,\n '--custom-border-radius': field()?.controlStyle?.borderRadius ,\n '--custom-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 }\"\n>\n <div matTextPrefix class=\"prefix_alternate_mobile primary\" (click)=\"$event.stopPropagation()\">\n <div class=\"d-flex countryCode\">\n <mat-select class=\"country_code_input\" [(value)]=\"CountryCode\" (click)=\"$event.stopPropagation()\">\n <mat-select-trigger>\n {{ CountryCode }}\n </mat-select-trigger>\n <mat-option (click)=\"$event.stopPropagation()\" (keydown)=\"$event.stopPropagation()\">\n <div class=\"search-input-wrapper\">\n <img src=\"https://cdn.godigit.com/retail-life/search.svg\" alt=\"search\" class=\"search-icon\" />\n <input\n type=\"text\"\n placeholder=\"Search...\"\n autocomplete=\"off\"\n [(ngModel)]=\"searchInputValue\"\n (click)=\"$event.stopPropagation()\"\n (input)=\"searchInputChange($event)\"\n (blur)=\"clearSearch()\"\n class=\"country-code-search-input\"\n />\n </div>\n </mat-option>\n @for (option of filteredOptions; track option.value) {\n <mat-option [value]=\"option.value\">{{ option.label }}</mat-option>\n }\n </mat-select>\n </div>\n <!-- <span class=\"seperation_line\" *ngIf=\"true\"></span> -->\n </div>\n\n <div (click)=\"$event.stopPropagation()\">\n @if(reactiveFormControlobject()) {\n <input\n matInput\n autocomplete=\"off\"\n [type]=\"field()?.controlType\"\n [name]=\"field()?.fieldName\"\n [id]=\"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 (click)=\"$event.stopPropagation()\"\n />\n }@else {\n <input\n matInput\n autocomplete=\"off\"\n [type]=\"field()?.controlType\"\n [name]=\"field()?.fieldName\"\n [id]=\"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 </div>\n\n\n <span matSuffix class=\"p-3\" *ngIf=\"false\">\n <img src=\"https://cdn.godigit.com/retail-life/edit-icon.svg\" alt=\"\" />\n </span>\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=\"false\">\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}.mobile-field .mat-mdc-form-field:not(.mat-form-field-disabled) .mat-mdc-floating-label.mdc-floating-label{transform:var(--mat-mdc-form-field-label-transform, translateY(-50%) translateX(calc(1 * (61.625px + var(--mat-mdc-form-field-label-offset-x, 0px)))))!important}*{font-family:mulish!important}.prefix_alternate_mobile{font-size:12px;font-weight:400;height:32px;display:flex;justify-content:center;align-items:center;position:relative;cursor:pointer}.countryCode{gap:4px}.error-message{color:red}::ng-deep .mat-mdc-select-arrow{border-style:solid!important;border-width:0 1.5px 1.5px 0!important;border-right:1.5px solid!important;content:\"\"!important;display:inline-block!important;padding:2px!important;transform:rotate(45deg)!important;vertical-align:middle!important;color:#8f8f8f!important;margin-top:3px;margin-left:2px}::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-form-field-text-prefix{min-width:72px;position:relative;right:9px;bottom:2px;align-items:center}::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--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}.search-input-wrapper{position:relative;right:9px;width:290px}.search-icon{position:absolute;left:10px;top:50%;transform:translateY(-50%);width:16px;height:16px;opacity:.6;pointer-events:none;z-index:1}.country-code-search-input{width:100%;padding:8px 8px 8px 35px;border:none!important;outline:none!important}.country-code-search-input:focus{border:none!important}.seperation_line{width:1.3px;height:18px;background:#dadada;transform:translate(15px)}.country_code_input{color:var(--Colour-Text-headings, #444);font-size:14px;font-style:normal;font-weight:400}\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: 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.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatSelectModule }, { 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: MatOptionModule }, { 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"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
|
|
1502
|
+
], 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 class=\"w-100 mobile-field\"\n appearance=\"outline\"\n *ngIf=\"field() && field()?.isVisible\"\n [ngStyle]=\"{\n '--custom-border-color': field()?.controlStyle?.borderColor ,\n '--custom-border-width': field()?.controlStyle?.borderWidth ,\n '--custom-border-radius': field()?.controlStyle?.borderRadius ,\n '--custom-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 }\"\n>\n <div matTextPrefix class=\"prefix_alternate_mobile primary\" (click)=\"$event.stopPropagation()\">\n <div class=\"d-flex countryCode\">\n <mat-select class=\"country_code_input\" [(value)]=\"CountryCode\" (click)=\"$event.stopPropagation()\">\n <mat-select-trigger>\n {{ CountryCode }}\n </mat-select-trigger>\n <mat-option (click)=\"$event.stopPropagation()\" (keydown)=\"$event.stopPropagation()\">\n <div class=\"search-input-wrapper\">\n <img src=\"https://cdn.godigit.com/retail-life/search.svg\" alt=\"search\" class=\"search-icon\" />\n <input\n type=\"text\"\n placeholder=\"Search...\"\n autocomplete=\"off\"\n [(ngModel)]=\"searchInputValue\"\n (click)=\"$event.stopPropagation()\"\n (input)=\"searchInputChange($event)\"\n (blur)=\"clearSearch()\"\n class=\"country-code-search-input\"\n />\n </div>\n </mat-option>\n @for (option of filteredOptions; track option.value) {\n <mat-option [value]=\"option.value\">{{ option.label }}</mat-option>\n }\n </mat-select>\n </div>\n <!-- <span class=\"seperation_line\" *ngIf=\"true\"></span> -->\n </div>\n\n <div (click)=\"$event.stopPropagation()\">\n @if(reactiveFormControlobject()) {\n <input\n matInput\n autocomplete=\"off\"\n [type]=\"field()?.controlType\"\n [name]=\"field()?.fieldNameAttribute\"\n [id]=\"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 (click)=\"$event.stopPropagation()\"\n />\n }@else {\n <input\n matInput\n autocomplete=\"off\"\n [type]=\"field()?.controlType\"\n [name]=\"field()?.fieldNameAttribute\"\n [id]=\"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 </div>\n\n\n <span matSuffix class=\"p-3\" *ngIf=\"false\">\n <img src=\"https://cdn.godigit.com/retail-life/edit-icon.svg\" alt=\"\" />\n </span>\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=\"false\">\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}.mobile-field .mat-mdc-form-field:not(.mat-form-field-disabled) .mat-mdc-floating-label.mdc-floating-label{transform:var(--mat-mdc-form-field-label-transform, translateY(-50%) translateX(calc(1 * (61.625px + var(--mat-mdc-form-field-label-offset-x, 0px)))))!important}*{font-family:mulish!important}.prefix_alternate_mobile{font-size:12px;font-weight:400;height:32px;display:flex;justify-content:center;align-items:center;position:relative;cursor:pointer}.countryCode{gap:4px}.error-message{color:red}::ng-deep .mat-mdc-select-arrow{border-style:solid!important;border-width:0 1.5px 1.5px 0!important;border-right:1.5px solid!important;content:\"\"!important;display:inline-block!important;padding:2px!important;transform:rotate(45deg)!important;vertical-align:middle!important;color:#8f8f8f!important;margin-top:3px;margin-left:2px}::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-form-field-text-prefix{min-width:72px;position:relative;right:9px;bottom:2px;align-items:center}::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--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}.search-input-wrapper{position:relative;right:9px;width:290px}.search-icon{position:absolute;left:10px;top:50%;transform:translateY(-50%);width:16px;height:16px;opacity:.6;pointer-events:none;z-index:1}.country-code-search-input{width:100%;padding:8px 8px 8px 35px;border:none!important;outline:none!important}.country-code-search-input:focus{border:none!important}.seperation_line{width:1.3px;height:18px;background:#dadada;transform:translate(15px)}.country_code_input{color:var(--Colour-Text-headings, #444);font-size:14px;font-style:normal;font-weight:400}\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: 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.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatSelectModule }, { 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: MatOptionModule }, { 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"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
|
|
1477
1503
|
}
|
|
1478
1504
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MobNumberComponent, decorators: [{
|
|
1479
1505
|
type: Component,
|
|
@@ -1483,7 +1509,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
1483
1509
|
useExisting: MobNumberComponent,
|
|
1484
1510
|
multi: true
|
|
1485
1511
|
}
|
|
1486
|
-
], 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 class=\"w-100 mobile-field\"\n appearance=\"outline\"\n *ngIf=\"field() && field()?.isVisible\"\n [ngStyle]=\"{\n '--custom-border-color': field()?.controlStyle?.borderColor ,\n '--custom-border-width': field()?.controlStyle?.borderWidth ,\n '--custom-border-radius': field()?.controlStyle?.borderRadius ,\n '--custom-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 }\"\n>\n <div matTextPrefix class=\"prefix_alternate_mobile primary\" (click)=\"$event.stopPropagation()\">\n <div class=\"d-flex countryCode\">\n <mat-select class=\"country_code_input\" [(value)]=\"CountryCode\" (click)=\"$event.stopPropagation()\">\n <mat-select-trigger>\n {{ CountryCode }}\n </mat-select-trigger>\n <mat-option (click)=\"$event.stopPropagation()\" (keydown)=\"$event.stopPropagation()\">\n <div class=\"search-input-wrapper\">\n <img src=\"https://cdn.godigit.com/retail-life/search.svg\" alt=\"search\" class=\"search-icon\" />\n <input\n type=\"text\"\n placeholder=\"Search...\"\n autocomplete=\"off\"\n [(ngModel)]=\"searchInputValue\"\n (click)=\"$event.stopPropagation()\"\n (input)=\"searchInputChange($event)\"\n (blur)=\"clearSearch()\"\n class=\"country-code-search-input\"\n />\n </div>\n </mat-option>\n @for (option of filteredOptions; track option.value) {\n <mat-option [value]=\"option.value\">{{ option.label }}</mat-option>\n }\n </mat-select>\n </div>\n <!-- <span class=\"seperation_line\" *ngIf=\"true\"></span> -->\n </div>\n\n <div (click)=\"$event.stopPropagation()\">\n @if(reactiveFormControlobject()) {\n <input\n matInput\n autocomplete=\"off\"\n [type]=\"field()?.controlType\"\n [name]=\"field()?.fieldName\"\n [id]=\"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 (click)=\"$event.stopPropagation()\"\n />\n }@else {\n <input\n matInput\n autocomplete=\"off\"\n [type]=\"field()?.controlType\"\n [name]=\"field()?.fieldName\"\n [id]=\"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 </div>\n\n\n <span matSuffix class=\"p-3\" *ngIf=\"false\">\n <img src=\"https://cdn.godigit.com/retail-life/edit-icon.svg\" alt=\"\" />\n </span>\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=\"false\">\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}.mobile-field .mat-mdc-form-field:not(.mat-form-field-disabled) .mat-mdc-floating-label.mdc-floating-label{transform:var(--mat-mdc-form-field-label-transform, translateY(-50%) translateX(calc(1 * (61.625px + var(--mat-mdc-form-field-label-offset-x, 0px)))))!important}*{font-family:mulish!important}.prefix_alternate_mobile{font-size:12px;font-weight:400;height:32px;display:flex;justify-content:center;align-items:center;position:relative;cursor:pointer}.countryCode{gap:4px}.error-message{color:red}::ng-deep .mat-mdc-select-arrow{border-style:solid!important;border-width:0 1.5px 1.5px 0!important;border-right:1.5px solid!important;content:\"\"!important;display:inline-block!important;padding:2px!important;transform:rotate(45deg)!important;vertical-align:middle!important;color:#8f8f8f!important;margin-top:3px;margin-left:2px}::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-form-field-text-prefix{min-width:72px;position:relative;right:9px;bottom:2px;align-items:center}::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--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}.search-input-wrapper{position:relative;right:9px;width:290px}.search-icon{position:absolute;left:10px;top:50%;transform:translateY(-50%);width:16px;height:16px;opacity:.6;pointer-events:none;z-index:1}.country-code-search-input{width:100%;padding:8px 8px 8px 35px;border:none!important;outline:none!important}.country-code-search-input:focus{border:none!important}.seperation_line{width:1.3px;height:18px;background:#dadada;transform:translate(15px)}.country_code_input{color:var(--Colour-Text-headings, #444);font-size:14px;font-style:normal;font-weight:400}\n"] }]
|
|
1512
|
+
], 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 class=\"w-100 mobile-field\"\n appearance=\"outline\"\n *ngIf=\"field() && field()?.isVisible\"\n [ngStyle]=\"{\n '--custom-border-color': field()?.controlStyle?.borderColor ,\n '--custom-border-width': field()?.controlStyle?.borderWidth ,\n '--custom-border-radius': field()?.controlStyle?.borderRadius ,\n '--custom-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 }\"\n>\n <div matTextPrefix class=\"prefix_alternate_mobile primary\" (click)=\"$event.stopPropagation()\">\n <div class=\"d-flex countryCode\">\n <mat-select class=\"country_code_input\" [(value)]=\"CountryCode\" (click)=\"$event.stopPropagation()\">\n <mat-select-trigger>\n {{ CountryCode }}\n </mat-select-trigger>\n <mat-option (click)=\"$event.stopPropagation()\" (keydown)=\"$event.stopPropagation()\">\n <div class=\"search-input-wrapper\">\n <img src=\"https://cdn.godigit.com/retail-life/search.svg\" alt=\"search\" class=\"search-icon\" />\n <input\n type=\"text\"\n placeholder=\"Search...\"\n autocomplete=\"off\"\n [(ngModel)]=\"searchInputValue\"\n (click)=\"$event.stopPropagation()\"\n (input)=\"searchInputChange($event)\"\n (blur)=\"clearSearch()\"\n class=\"country-code-search-input\"\n />\n </div>\n </mat-option>\n @for (option of filteredOptions; track option.value) {\n <mat-option [value]=\"option.value\">{{ option.label }}</mat-option>\n }\n </mat-select>\n </div>\n <!-- <span class=\"seperation_line\" *ngIf=\"true\"></span> -->\n </div>\n\n <div (click)=\"$event.stopPropagation()\">\n @if(reactiveFormControlobject()) {\n <input\n matInput\n autocomplete=\"off\"\n [type]=\"field()?.controlType\"\n [name]=\"field()?.fieldNameAttribute\"\n [id]=\"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 (click)=\"$event.stopPropagation()\"\n />\n }@else {\n <input\n matInput\n autocomplete=\"off\"\n [type]=\"field()?.controlType\"\n [name]=\"field()?.fieldNameAttribute\"\n [id]=\"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 </div>\n\n\n <span matSuffix class=\"p-3\" *ngIf=\"false\">\n <img src=\"https://cdn.godigit.com/retail-life/edit-icon.svg\" alt=\"\" />\n </span>\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=\"false\">\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}.mobile-field .mat-mdc-form-field:not(.mat-form-field-disabled) .mat-mdc-floating-label.mdc-floating-label{transform:var(--mat-mdc-form-field-label-transform, translateY(-50%) translateX(calc(1 * (61.625px + var(--mat-mdc-form-field-label-offset-x, 0px)))))!important}*{font-family:mulish!important}.prefix_alternate_mobile{font-size:12px;font-weight:400;height:32px;display:flex;justify-content:center;align-items:center;position:relative;cursor:pointer}.countryCode{gap:4px}.error-message{color:red}::ng-deep .mat-mdc-select-arrow{border-style:solid!important;border-width:0 1.5px 1.5px 0!important;border-right:1.5px solid!important;content:\"\"!important;display:inline-block!important;padding:2px!important;transform:rotate(45deg)!important;vertical-align:middle!important;color:#8f8f8f!important;margin-top:3px;margin-left:2px}::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-form-field-text-prefix{min-width:72px;position:relative;right:9px;bottom:2px;align-items:center}::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--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}.search-input-wrapper{position:relative;right:9px;width:290px}.search-icon{position:absolute;left:10px;top:50%;transform:translateY(-50%);width:16px;height:16px;opacity:.6;pointer-events:none;z-index:1}.country-code-search-input{width:100%;padding:8px 8px 8px 35px;border:none!important;outline:none!important}.country-code-search-input:focus{border:none!important}.seperation_line{width:1.3px;height:18px;background:#dadada;transform:translate(15px)}.country_code_input{color:var(--Colour-Text-headings, #444);font-size:14px;font-style:normal;font-weight:400}\n"] }]
|
|
1487
1513
|
}], ctorParameters: () => [{ type: MasterControlService }], propDecorators: { blur: [{
|
|
1488
1514
|
type: Output
|
|
1489
1515
|
}] } });
|
|
@@ -1513,6 +1539,9 @@ class CheckboxComponent {
|
|
|
1513
1539
|
change = new EventEmitter();
|
|
1514
1540
|
_onChange = (inputValue) => { };
|
|
1515
1541
|
_unTouched = () => { };
|
|
1542
|
+
ngOnInit() {
|
|
1543
|
+
initializeFieldNameAttribute(this.field());
|
|
1544
|
+
}
|
|
1516
1545
|
writeValue(obj) {
|
|
1517
1546
|
this.inputValue = obj;
|
|
1518
1547
|
}
|
|
@@ -1564,7 +1593,7 @@ class CheckboxComponent {
|
|
|
1564
1593
|
useExisting: CheckboxComponent,
|
|
1565
1594
|
multi: true
|
|
1566
1595
|
}
|
|
1567
|
-
], ngImport: i0, template: "@if(reactiveFormControlobject()) {\n<mat-checkbox *ngIf=\"field() && field()?.isVisible\" [class]=\"field()?.fieldName\" [name]=\"field()?.
|
|
1596
|
+
], ngImport: i0, template: "@if(reactiveFormControlobject()) {\n<mat-checkbox *ngIf=\"field() && field()?.isVisible\" [class]=\"field()?.fieldName\" [name]=\"field()?.fieldNameAttribute\" [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()?.fieldNameAttribute\" [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
1597
|
}
|
|
1569
1598
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CheckboxComponent, decorators: [{
|
|
1570
1599
|
type: Component,
|
|
@@ -1574,7 +1603,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
1574
1603
|
useExisting: CheckboxComponent,
|
|
1575
1604
|
multi: true
|
|
1576
1605
|
}
|
|
1577
|
-
], template: "@if(reactiveFormControlobject()) {\n<mat-checkbox *ngIf=\"field() && field()?.isVisible\" [class]=\"field()?.fieldName\" [name]=\"field()?.
|
|
1606
|
+
], template: "@if(reactiveFormControlobject()) {\n<mat-checkbox *ngIf=\"field() && field()?.isVisible\" [class]=\"field()?.fieldName\" [name]=\"field()?.fieldNameAttribute\" [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()?.fieldNameAttribute\" [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
1607
|
}], ctorParameters: () => [{ type: MasterControlService }], propDecorators: { change: [{
|
|
1579
1608
|
type: Output
|
|
1580
1609
|
}] } });
|
|
@@ -1592,6 +1621,9 @@ class TextareaComponent {
|
|
|
1592
1621
|
_onTouched = () => { };
|
|
1593
1622
|
// Declare Output event emitter here (class level)
|
|
1594
1623
|
blur = new EventEmitter();
|
|
1624
|
+
ngOnInit() {
|
|
1625
|
+
initializeFieldNameAttribute(this.field());
|
|
1626
|
+
}
|
|
1595
1627
|
// ControlValueAccessor implementation
|
|
1596
1628
|
writeValue(obj) {
|
|
1597
1629
|
this.textareaValue = obj;
|
|
@@ -1627,7 +1659,7 @@ class TextareaComponent {
|
|
|
1627
1659
|
useExisting: TextareaComponent,
|
|
1628
1660
|
multi: true
|
|
1629
1661
|
}
|
|
1630
|
-
], ngImport: i0, template: "\n<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<div class=\"textarea-wrapper\">\n@if(reactiveFormControlobject()) {\n<textarea\n[ngStyle]=\"{\n '--custom-textarea-width': field()?.controlStyle?.width ,\n '--custom-textarea-border-color': field()?.controlStyle?.borderColor ,\n '--custom-textarea-border-width': field()?.controlStyle?.borderWidth ,\n '--custom-textarea-border-color-focus': field()?.controlStyle?.focusBorderColor ,\n '--custom-textarea-border-width-focus': field()?.controlStyle?.focusBorderColor ,\n '--custom-textarea-radius': field()?.controlStyle?.borderRadius ,\n '--custom-textarea-caret-color': field()?.controlStyle?.caretColor ,\n '--custom-textarea-font-color': field()?.controlStyle?.color ,\n }\"\n*ngIf=\"field() && field()?.isVisible\"\n cols=\"40\"\n rows=\"3\"\n autocomplete=\"off\"\n [name]=\"field()?.
|
|
1662
|
+
], ngImport: i0, template: "\n<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<div class=\"textarea-wrapper\">\n@if(reactiveFormControlobject()) {\n<textarea\n[ngStyle]=\"{\n '--custom-textarea-width': field()?.controlStyle?.width ,\n '--custom-textarea-border-color': field()?.controlStyle?.borderColor ,\n '--custom-textarea-border-width': field()?.controlStyle?.borderWidth ,\n '--custom-textarea-border-color-focus': field()?.controlStyle?.focusBorderColor ,\n '--custom-textarea-border-width-focus': field()?.controlStyle?.focusBorderColor ,\n '--custom-textarea-radius': field()?.controlStyle?.borderRadius ,\n '--custom-textarea-caret-color': field()?.controlStyle?.caretColor ,\n '--custom-textarea-font-color': field()?.controlStyle?.color ,\n }\"\n*ngIf=\"field() && field()?.isVisible\"\n cols=\"40\"\n rows=\"3\"\n autocomplete=\"off\"\n [name]=\"field()?.fieldNameAttribute\"\n [id]=\"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 (input)=\"onTextareaChange($event)\"\n (blur)=\"onTextareaBlur($event)\"\n [value]=\"textareaValue\"\n [formControl]=\"reactiveFormControlobject()\"\n></textarea>\n}@else {\n<textarea\n[ngStyle]=\"{\n '--custom-textarea-width': field()?.controlStyle?.width ,\n '--custom-textarea-border-color': field()?.controlStyle?.borderColor ,\n '--custom-textarea-border-width': field()?.controlStyle?.borderWidth ,\n '--custom-textarea-border-color-focus': field()?.controlStyle?.focusBorderColor ,\n '--custom-textarea-border-width-focus': field()?.controlStyle?.focusBorderColor ,\n '--custom-textarea-radius': field()?.controlStyle?.borderRadius ,\n '--custom-textarea-caret-color': field()?.controlStyle?.caretColor ,\n '--custom-textarea-font-color': field()?.controlStyle?.color ,\n }\"\n*ngIf=\"field() && field()?.isVisible\"\n cols=\"40\"\n rows=\"3\"\n autocomplete=\"off\"\n [name]=\"field()?.fieldNameAttribute\"\n [id]=\"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 (input)=\"onTextareaChange($event)\"\n (blur)=\"onTextareaBlur($event)\"\n [value]=\"textareaValue\"\n></textarea>\n}\n\n <span class=\"mx-3 textarea-suffix\">\n @if(field()?.configData?.isDisabledInputEdit) {\n @if(field()?.isDisable) {\n <img *ngIf=\"field()?.imageUrl\" [src]='field().imageUrl' alt=\"\" (click)=\"enableField()\" class=\"edit-icon\" />\n }\n }\n </span>\n</div>\n", styles: [".field-lable{font-size:12px!important;font-weight:700!important;color:#444!important;margin-bottom:5px}*{font-family:mulish!important}::ng-deep textarea{width:-webkit-fill-available!important;border:1.5px solid #dddddd!important;border-radius:4px!important;caret-color:#fb0!important;color:#444!important}::ng-deep textarea:focus{outline:none!important;border:1.5px solid #ffbb00!important}::ng-deep textarea:focus-visible{outline:none!important;border:1.5px solid #ffbb00!important}::ng-deep textarea{width:var(--custom-textarea-width, -webkit-fill-available)!important;border-radius:var(--custom-textarea-radius, 4px)!important;caret-color:var(--custom-textarea-caret-color, #ffbb00)!important;color:var(--custom-textarea-font-color, #444444)!important;border-color:var(--custom-textarea-border-color,#dddddd)!important;border-width:var(--custom-textarea-border-width, 1.5px solid)!important}::ng-deep textarea:focus{border-color:var(--custom-textarea-border-color-focus,#dddddd)!important;border-width:var(--custom-textarea-border-width-focus, 1.5px solid)!important}::ng-deep textarea:focus-visible{border-color:var(--custom-textarea-border-color-focus,#dddddd)!important;border-width:var(--custom-textarea-border-width-focus, 1.5px solid)!important}.textarea-wrapper{position:relative;display:inline-block;width:100%}.textarea-suffix{position:absolute;right:12px;top:12px;display:flex;align-items:center;pointer-events:auto}.edit-icon{cursor:pointer;width:20px;height:20px;opacity:.6;transition:opacity .2s ease}.edit-icon:hover{opacity:1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i4.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.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormsModule }] });
|
|
1631
1663
|
}
|
|
1632
1664
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TextareaComponent, decorators: [{
|
|
1633
1665
|
type: Component,
|
|
@@ -1641,7 +1673,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
1641
1673
|
useExisting: TextareaComponent,
|
|
1642
1674
|
multi: true
|
|
1643
1675
|
}
|
|
1644
|
-
], template: "\n<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<div class=\"textarea-wrapper\">\n@if(reactiveFormControlobject()) {\n<textarea\n[ngStyle]=\"{\n '--custom-textarea-width': field()?.controlStyle?.width ,\n '--custom-textarea-border-color': field()?.controlStyle?.borderColor ,\n '--custom-textarea-border-width': field()?.controlStyle?.borderWidth ,\n '--custom-textarea-border-color-focus': field()?.controlStyle?.focusBorderColor ,\n '--custom-textarea-border-width-focus': field()?.controlStyle?.focusBorderColor ,\n '--custom-textarea-radius': field()?.controlStyle?.borderRadius ,\n '--custom-textarea-caret-color': field()?.controlStyle?.caretColor ,\n '--custom-textarea-font-color': field()?.controlStyle?.color ,\n }\"\n*ngIf=\"field() && field()?.isVisible\"\n cols=\"40\"\n rows=\"3\"\n autocomplete=\"off\"\n [name]=\"field()?.
|
|
1676
|
+
], template: "\n<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<div class=\"textarea-wrapper\">\n@if(reactiveFormControlobject()) {\n<textarea\n[ngStyle]=\"{\n '--custom-textarea-width': field()?.controlStyle?.width ,\n '--custom-textarea-border-color': field()?.controlStyle?.borderColor ,\n '--custom-textarea-border-width': field()?.controlStyle?.borderWidth ,\n '--custom-textarea-border-color-focus': field()?.controlStyle?.focusBorderColor ,\n '--custom-textarea-border-width-focus': field()?.controlStyle?.focusBorderColor ,\n '--custom-textarea-radius': field()?.controlStyle?.borderRadius ,\n '--custom-textarea-caret-color': field()?.controlStyle?.caretColor ,\n '--custom-textarea-font-color': field()?.controlStyle?.color ,\n }\"\n*ngIf=\"field() && field()?.isVisible\"\n cols=\"40\"\n rows=\"3\"\n autocomplete=\"off\"\n [name]=\"field()?.fieldNameAttribute\"\n [id]=\"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 (input)=\"onTextareaChange($event)\"\n (blur)=\"onTextareaBlur($event)\"\n [value]=\"textareaValue\"\n [formControl]=\"reactiveFormControlobject()\"\n></textarea>\n}@else {\n<textarea\n[ngStyle]=\"{\n '--custom-textarea-width': field()?.controlStyle?.width ,\n '--custom-textarea-border-color': field()?.controlStyle?.borderColor ,\n '--custom-textarea-border-width': field()?.controlStyle?.borderWidth ,\n '--custom-textarea-border-color-focus': field()?.controlStyle?.focusBorderColor ,\n '--custom-textarea-border-width-focus': field()?.controlStyle?.focusBorderColor ,\n '--custom-textarea-radius': field()?.controlStyle?.borderRadius ,\n '--custom-textarea-caret-color': field()?.controlStyle?.caretColor ,\n '--custom-textarea-font-color': field()?.controlStyle?.color ,\n }\"\n*ngIf=\"field() && field()?.isVisible\"\n cols=\"40\"\n rows=\"3\"\n autocomplete=\"off\"\n [name]=\"field()?.fieldNameAttribute\"\n [id]=\"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 (input)=\"onTextareaChange($event)\"\n (blur)=\"onTextareaBlur($event)\"\n [value]=\"textareaValue\"\n></textarea>\n}\n\n <span class=\"mx-3 textarea-suffix\">\n @if(field()?.configData?.isDisabledInputEdit) {\n @if(field()?.isDisable) {\n <img *ngIf=\"field()?.imageUrl\" [src]='field().imageUrl' alt=\"\" (click)=\"enableField()\" class=\"edit-icon\" />\n }\n }\n </span>\n</div>\n", styles: [".field-lable{font-size:12px!important;font-weight:700!important;color:#444!important;margin-bottom:5px}*{font-family:mulish!important}::ng-deep textarea{width:-webkit-fill-available!important;border:1.5px solid #dddddd!important;border-radius:4px!important;caret-color:#fb0!important;color:#444!important}::ng-deep textarea:focus{outline:none!important;border:1.5px solid #ffbb00!important}::ng-deep textarea:focus-visible{outline:none!important;border:1.5px solid #ffbb00!important}::ng-deep textarea{width:var(--custom-textarea-width, -webkit-fill-available)!important;border-radius:var(--custom-textarea-radius, 4px)!important;caret-color:var(--custom-textarea-caret-color, #ffbb00)!important;color:var(--custom-textarea-font-color, #444444)!important;border-color:var(--custom-textarea-border-color,#dddddd)!important;border-width:var(--custom-textarea-border-width, 1.5px solid)!important}::ng-deep textarea:focus{border-color:var(--custom-textarea-border-color-focus,#dddddd)!important;border-width:var(--custom-textarea-border-width-focus, 1.5px solid)!important}::ng-deep textarea:focus-visible{border-color:var(--custom-textarea-border-color-focus,#dddddd)!important;border-width:var(--custom-textarea-border-width-focus, 1.5px solid)!important}.textarea-wrapper{position:relative;display:inline-block;width:100%}.textarea-suffix{position:absolute;right:12px;top:12px;display:flex;align-items:center;pointer-events:auto}.edit-icon{cursor:pointer;width:20px;height:20px;opacity:.6;transition:opacity .2s ease}.edit-icon:hover{opacity:1}\n"] }]
|
|
1645
1677
|
}], ctorParameters: () => [{ type: MasterControlService }], propDecorators: { blur: [{
|
|
1646
1678
|
type: Output
|
|
1647
1679
|
}] } });
|
|
@@ -1687,6 +1719,7 @@ class AutocompleteComponent {
|
|
|
1687
1719
|
valueChanged = new EventEmitter();
|
|
1688
1720
|
optionSelected = new EventEmitter();
|
|
1689
1721
|
ngOnInit() {
|
|
1722
|
+
initializeFieldNameAttribute(this.field());
|
|
1690
1723
|
this.filteredOptions = this.field().options || [];
|
|
1691
1724
|
// Subscribe to valueChanges if using reactive forms
|
|
1692
1725
|
if (this.reactiveFormControlobject && this.reactiveFormControlobject.valueChanges) {
|
|
@@ -1830,7 +1863,7 @@ class AutocompleteComponent {
|
|
|
1830
1863
|
useExisting: AutocompleteComponent,
|
|
1831
1864
|
multi: true
|
|
1832
1865
|
}
|
|
1833
|
-
], ngImport: i0, template: " <label *ngIf=\"field() && field()?.isVisible && field().isShowLabel\" class=\"field-lable\">{{field()?.label}}<span style=\"color: red;\" *ngIf=\"field() && field()?.validators?.isRequired\">*</span></label>\n <mat-form-field class=\"w-100 show-arrow\" 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-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 <input\n matInput\n type=\"text\"\n [name]=\"field()?.fieldName\"\n [id]=\"field()?.fieldName\"\n [matAutocomplete]=\"auto\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n [disabled]=\"field()?.isDisable\"\n [required]=\"field()?.validators?.isRequired\"\n [placeholder]=\"field()?.placeHolder\"\n (input)=\"onInputChangeForReactiveForms($event)\"\n [formControl]=\"reactiveFormControlobject()\"\n />\n }@else {\n <input\n matInput\n type=\"text\"\n [name]=\"field()?.fieldName\"\n [id]=\"field()?.fieldName\"\n [matAutocomplete]=\"auto\"\n [ngModel]=\"inputValue\"\n (ngModelChange)=\"onInputChange($event)\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur($event)\"\n [disabled]=\"field()?.isDisable\"\n [required]=\"field()?.validators?.isRequired\"\n [placeholder]=\"field()?.placeHolder\"\n />\n }\n <mat-autocomplete autoActiveFirstOption #auto=\"matAutocomplete\" [displayWith]=\"displayFn\" (optionSelected)=\"onOptionSelected($event.option.value)\">\n <mat-option *ngFor=\"let option of filteredOptions\" [value]=\"option\">\n {{ option.label }}\n </mat-option>\n </mat-autocomplete>\n <mat-error>\n {{ field().validators.requiredMessage }}\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: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}::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;vertical-align:sub}*{font-family:mulish!important}.custom-dropdown-arrow{color:#666;font-size:18px;cursor:pointer;margin-right:4px;padding:0!important;margin-top:12px!important}.show-arrow{background-image:url(https://d2h44aw7l5xdvz.cloudfront.net/digitPlusAssets/Dropdown_arrow.svg)!important;background-position:calc(100% - 12px) calc(1em - 4px),calc(100% - 15px) calc(1em + 8px),calc(100% - 2.5em) .5em;background-size:10px 10px,5px 5px,1px 1.5em;background-repeat:no-repeat}@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: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: MatFormFieldModule }, { 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: "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: 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: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i5$1.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i6.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i5$1.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: MatOptionModule }, { 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: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
|
|
1866
|
+
], ngImport: i0, template: " <label *ngIf=\"field() && field()?.isVisible && field().isShowLabel\" class=\"field-lable\">{{field()?.label}}<span style=\"color: red;\" *ngIf=\"field() && field()?.validators?.isRequired\">*</span></label>\n <mat-form-field class=\"w-100 show-arrow\" 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-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 <input\n matInput\n type=\"text\"\n [name]=\"field()?.fieldNameAttribute\"\n [id]=\"field()?.fieldName\"\n [matAutocomplete]=\"auto\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n [disabled]=\"field()?.isDisable\"\n [required]=\"field()?.validators?.isRequired\"\n [placeholder]=\"field()?.placeHolder\"\n (input)=\"onInputChangeForReactiveForms($event)\"\n [formControl]=\"reactiveFormControlobject()\"\n />\n }@else {\n <input\n matInput\n type=\"text\"\n [name]=\"field()?.fieldNameAttribute\"\n [id]=\"field()?.fieldName\"\n [matAutocomplete]=\"auto\"\n [ngModel]=\"inputValue\"\n (ngModelChange)=\"onInputChange($event)\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur($event)\"\n [disabled]=\"field()?.isDisable\"\n [required]=\"field()?.validators?.isRequired\"\n [placeholder]=\"field()?.placeHolder\"\n />\n }\n <mat-autocomplete autoActiveFirstOption #auto=\"matAutocomplete\" [displayWith]=\"displayFn\" (optionSelected)=\"onOptionSelected($event.option.value)\">\n <mat-option *ngFor=\"let option of filteredOptions\" [value]=\"option\">\n {{ option.label }}\n </mat-option>\n </mat-autocomplete>\n <mat-error>\n {{ field().validators.requiredMessage }}\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: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}::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;vertical-align:sub}*{font-family:mulish!important}.custom-dropdown-arrow{color:#666;font-size:18px;cursor:pointer;margin-right:4px;padding:0!important;margin-top:12px!important}.show-arrow{background-image:url(https://d2h44aw7l5xdvz.cloudfront.net/digitPlusAssets/Dropdown_arrow.svg)!important;background-position:calc(100% - 12px) calc(1em - 4px),calc(100% - 15px) calc(1em + 8px),calc(100% - 2.5em) .5em;background-size:10px 10px,5px 5px,1px 1.5em;background-repeat:no-repeat}@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: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: MatFormFieldModule }, { 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: "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: 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: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i5$1.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i6.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i5$1.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: MatOptionModule }, { 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: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
|
|
1834
1867
|
}
|
|
1835
1868
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AutocompleteComponent, decorators: [{
|
|
1836
1869
|
type: Component,
|
|
@@ -1848,7 +1881,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
1848
1881
|
useExisting: AutocompleteComponent,
|
|
1849
1882
|
multi: true
|
|
1850
1883
|
}
|
|
1851
|
-
], template: " <label *ngIf=\"field() && field()?.isVisible && field().isShowLabel\" class=\"field-lable\">{{field()?.label}}<span style=\"color: red;\" *ngIf=\"field() && field()?.validators?.isRequired\">*</span></label>\n <mat-form-field class=\"w-100 show-arrow\" 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-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 <input\n matInput\n type=\"text\"\n [name]=\"field()?.fieldName\"\n [id]=\"field()?.fieldName\"\n [matAutocomplete]=\"auto\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n [disabled]=\"field()?.isDisable\"\n [required]=\"field()?.validators?.isRequired\"\n [placeholder]=\"field()?.placeHolder\"\n (input)=\"onInputChangeForReactiveForms($event)\"\n [formControl]=\"reactiveFormControlobject()\"\n />\n }@else {\n <input\n matInput\n type=\"text\"\n [name]=\"field()?.fieldName\"\n [id]=\"field()?.fieldName\"\n [matAutocomplete]=\"auto\"\n [ngModel]=\"inputValue\"\n (ngModelChange)=\"onInputChange($event)\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur($event)\"\n [disabled]=\"field()?.isDisable\"\n [required]=\"field()?.validators?.isRequired\"\n [placeholder]=\"field()?.placeHolder\"\n />\n }\n <mat-autocomplete autoActiveFirstOption #auto=\"matAutocomplete\" [displayWith]=\"displayFn\" (optionSelected)=\"onOptionSelected($event.option.value)\">\n <mat-option *ngFor=\"let option of filteredOptions\" [value]=\"option\">\n {{ option.label }}\n </mat-option>\n </mat-autocomplete>\n <mat-error>\n {{ field().validators.requiredMessage }}\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: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}::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;vertical-align:sub}*{font-family:mulish!important}.custom-dropdown-arrow{color:#666;font-size:18px;cursor:pointer;margin-right:4px;padding:0!important;margin-top:12px!important}.show-arrow{background-image:url(https://d2h44aw7l5xdvz.cloudfront.net/digitPlusAssets/Dropdown_arrow.svg)!important;background-position:calc(100% - 12px) calc(1em - 4px),calc(100% - 15px) calc(1em + 8px),calc(100% - 2.5em) .5em;background-size:10px 10px,5px 5px,1px 1.5em;background-repeat:no-repeat}@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:14px!important}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-text-field__input{font-size:14px!important}}\n"] }]
|
|
1884
|
+
], template: " <label *ngIf=\"field() && field()?.isVisible && field().isShowLabel\" class=\"field-lable\">{{field()?.label}}<span style=\"color: red;\" *ngIf=\"field() && field()?.validators?.isRequired\">*</span></label>\n <mat-form-field class=\"w-100 show-arrow\" 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-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 <input\n matInput\n type=\"text\"\n [name]=\"field()?.fieldNameAttribute\"\n [id]=\"field()?.fieldName\"\n [matAutocomplete]=\"auto\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n [disabled]=\"field()?.isDisable\"\n [required]=\"field()?.validators?.isRequired\"\n [placeholder]=\"field()?.placeHolder\"\n (input)=\"onInputChangeForReactiveForms($event)\"\n [formControl]=\"reactiveFormControlobject()\"\n />\n }@else {\n <input\n matInput\n type=\"text\"\n [name]=\"field()?.fieldNameAttribute\"\n [id]=\"field()?.fieldName\"\n [matAutocomplete]=\"auto\"\n [ngModel]=\"inputValue\"\n (ngModelChange)=\"onInputChange($event)\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur($event)\"\n [disabled]=\"field()?.isDisable\"\n [required]=\"field()?.validators?.isRequired\"\n [placeholder]=\"field()?.placeHolder\"\n />\n }\n <mat-autocomplete autoActiveFirstOption #auto=\"matAutocomplete\" [displayWith]=\"displayFn\" (optionSelected)=\"onOptionSelected($event.option.value)\">\n <mat-option *ngFor=\"let option of filteredOptions\" [value]=\"option\">\n {{ option.label }}\n </mat-option>\n </mat-autocomplete>\n <mat-error>\n {{ field().validators.requiredMessage }}\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: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}::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;vertical-align:sub}*{font-family:mulish!important}.custom-dropdown-arrow{color:#666;font-size:18px;cursor:pointer;margin-right:4px;padding:0!important;margin-top:12px!important}.show-arrow{background-image:url(https://d2h44aw7l5xdvz.cloudfront.net/digitPlusAssets/Dropdown_arrow.svg)!important;background-position:calc(100% - 12px) calc(1em - 4px),calc(100% - 15px) calc(1em + 8px),calc(100% - 2.5em) .5em;background-size:10px 10px,5px 5px,1px 1.5em;background-repeat:no-repeat}@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:14px!important}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-text-field__input{font-size:14px!important}}\n"] }]
|
|
1852
1885
|
}], ctorParameters: () => [{ type: MasterControlService }], propDecorators: { blur: [{
|
|
1853
1886
|
type: Output
|
|
1854
1887
|
}], selectionChanged: [{
|
|
@@ -1875,6 +1908,7 @@ class MultipleSelectComponent {
|
|
|
1875
1908
|
onChange = () => { };
|
|
1876
1909
|
onTouched = () => { };
|
|
1877
1910
|
ngOnInit() {
|
|
1911
|
+
initializeFieldNameAttribute(this.field());
|
|
1878
1912
|
// Initialize inputValue with a default or initial value if needed
|
|
1879
1913
|
}
|
|
1880
1914
|
writeValue(value) {
|
|
@@ -1958,7 +1992,7 @@ class MultipleSelectComponent {
|
|
|
1958
1992
|
useExisting: MultipleSelectComponent,
|
|
1959
1993
|
multi: true
|
|
1960
1994
|
}
|
|
1961
|
-
], 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"] }] });
|
|
1995
|
+
], 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()?.fieldNameAttribute\"\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()?.fieldNameAttribute + '_' + 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()?.fieldNameAttribute\"\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()?.fieldNameAttribute + '_' + 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"] }] });
|
|
1962
1996
|
}
|
|
1963
1997
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MultipleSelectComponent, decorators: [{
|
|
1964
1998
|
type: Component,
|
|
@@ -1975,7 +2009,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
1975
2009
|
useExisting: MultipleSelectComponent,
|
|
1976
2010
|
multi: true
|
|
1977
2011
|
}
|
|
1978
|
-
], 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"] }]
|
|
2012
|
+
], 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()?.fieldNameAttribute\"\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()?.fieldNameAttribute + '_' + 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()?.fieldNameAttribute\"\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()?.fieldNameAttribute + '_' + 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"] }]
|
|
1979
2013
|
}], ctorParameters: () => [{ type: MasterControlService }], propDecorators: { selectionChange: [{
|
|
1980
2014
|
type: Output
|
|
1981
2015
|
}] } });
|
|
@@ -1992,6 +2026,9 @@ class SelectTextboxComponent {
|
|
|
1992
2026
|
constructor(masterControlService) {
|
|
1993
2027
|
this.masterControlService = masterControlService;
|
|
1994
2028
|
}
|
|
2029
|
+
ngOnInit() {
|
|
2030
|
+
initializeFieldNameAttribute(this.field());
|
|
2031
|
+
}
|
|
1995
2032
|
writeValue(obj) {
|
|
1996
2033
|
if (obj && typeof obj === 'object') {
|
|
1997
2034
|
this.inputValue = this.field()?.configData?.isComaSeperated ? this.masterControlService.addComasToNumberValues(obj.textValue, true) : (obj.textValue || null);
|
|
@@ -2068,7 +2105,7 @@ class SelectTextboxComponent {
|
|
|
2068
2105
|
useExisting: SelectTextboxComponent,
|
|
2069
2106
|
multi: true
|
|
2070
2107
|
}
|
|
2071
|
-
], ngImport: i0, template: "<label class=\"field-lable\" *ngIf=\"field() && field()?.isVisible && field().isShowLabel\"\n >{{ field()?.label\n }}<span style=\"color: red\" *ngIf=\"field() && field()?.validators?.isRequired\"\n >*</span\n >\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>\n<mat-form-field\n class=\"w-100 auto-width\"\n appearance=\"outline\"\n *ngIf=\"field() && field()?.isVisible\"\n [ngStyle]=\"{\n'--custom-border-color': field()?.controlStyle?.borderColor ,\n'--custom-border-width': field()?.controlStyle?.borderWidth ,\n'--custom-border-radius': field()?.controlStyle?.borderRadius ,\n'--custom-bg-color': field()?.controlStyle?.background ,\n'--custom-border-color-focus': field()?.controlStyle?.focusBorderColor ,\n'--custom-border-width-focus': field()?.controlStyle?.focusBorderWidth ,\n'--custom-bg-color-focus': field()?.controlStyle?.focusBackground ,\n'--custom-border-color-hover': field()?.controlStyle?.hoverBorderColor ,\n'--custom-border-width-hover': field()?.controlStyle?.hoverBorderWidth ,\n'--custom-border-color-error': field()?.controlStyle?.errorBorderColor ,\n'--custom-border-width-error': field()?.controlStyle?.errorBorderWidth ,\n'--custom-font-size': field()?.controlStyle?.fontSize ,\n'--custom-font-weight': field()?.controlStyle?.fontWeight ,\n'--custom-font-family': field()?.controlStyle?.fontFamily ,\n'--custom-font-color': field()?.controlStyle?.color ,\n'--custom-caret-color': field()?.controlStyle?.caretColor ,\n'--custom-font-color-disabled' : field()?.controlStyle?.disableColor ,\n'--custom-bg-color-disabled' : field()?.controlStyle?.disableBackground ,\n}\"\n>\n@if(reactiveFormControlobject()) {\n <input\n matInput\n autocomplete=\"off\"\n class=\"vertically-align-middle\"\n [name]=\"field()?.fieldName\"\n [id]=\"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()\"\n [value]=\"inputValue\"\n [formControl]=\"reactiveFormControlobject()\"\n />\n}@else {\n <input\n matInput\n autocomplete=\"off\"\n [name]=\"field()?.fieldName\"\n [id]=\"field()?.fieldName\"\n class=\"vertically-align-middle\"\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()\"\n [value]=\"inputValue\"\n />\n}\n <span matPrefix class=\"rupee-symbol\" [hidden]=\"this.field()?.configData?.isHideRupeeSymbol\">\u20B9</span>\n <div matSuffix class=\"input-select\">\n <!-- <mat-form-field> -->\n <mat-select\n [value]=\"selectValue\"\n [disabled]=\"field()?.configData?.isDisableDropdown\"\n (selectionChange)=\"onSelectChange($event)\"\n (openedChange)=\"onSelectOpened($event)\">\n <mat-option *ngFor=\"let options of field()?.options\" [id]=\"options.value\" [value]=\"options.value\">\n {{ options.label }}\n </mat-option>\n </mat-select>\n <!-- </mat-form-field> -->\n </div>\n <div class=\"my-mat-hint\" *ngIf=\"field()?.configData?.helperText\">{{field()?.configData?.helperText}}</div>\n <!-- <span matSuffix class=\"mx-3 right-amount-text\"> \u20B9 3.50 L </span> -->\n</mat-form-field>", styles: [".field-lable{font-size:12px!important;font-weight:700!important;color:#444!important;margin-bottom:0!important}.error-message{color:red}.my-mat-hint{font-size:12px;text-align:start;font-weight:500;color:#444;letter-spacing:0px}::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;vertical-align:sub}*{font-family:mulish!important}.input-select{height:30px;background:#f5f5f5;padding:4px 8px;border-radius:0 6px 6px 0;transform:translate(-1px);border-left:1.5px solid #dadada}.input-select,.mat-mdc-select-trigger{bottom:3px;gap:4px}:host ::ng-deep .input-select .mat-mdc-select-arrow{color:#8f8f8f!important}.vertically-align-middle{vertical-align:middle}::ng-deep .auto-width .mat-mdc-form-field-infix{width:auto!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}}\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.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatSelectModule }, { 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: 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.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"] }, { kind: "directive", type: CustomizedTooltipDirective, selector: "[appTooltipTemplate]", inputs: ["appTooltipTemplate"] }] });
|
|
2108
|
+
], ngImport: i0, template: "<label class=\"field-lable\" *ngIf=\"field() && field()?.isVisible && field().isShowLabel\"\n >{{ field()?.label\n }}<span style=\"color: red\" *ngIf=\"field() && field()?.validators?.isRequired\"\n >*</span\n >\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>\n<mat-form-field\n class=\"w-100 auto-width\"\n appearance=\"outline\"\n *ngIf=\"field() && field()?.isVisible\"\n [ngStyle]=\"{\n'--custom-border-color': field()?.controlStyle?.borderColor ,\n'--custom-border-width': field()?.controlStyle?.borderWidth ,\n'--custom-border-radius': field()?.controlStyle?.borderRadius ,\n'--custom-bg-color': field()?.controlStyle?.background ,\n'--custom-border-color-focus': field()?.controlStyle?.focusBorderColor ,\n'--custom-border-width-focus': field()?.controlStyle?.focusBorderWidth ,\n'--custom-bg-color-focus': field()?.controlStyle?.focusBackground ,\n'--custom-border-color-hover': field()?.controlStyle?.hoverBorderColor ,\n'--custom-border-width-hover': field()?.controlStyle?.hoverBorderWidth ,\n'--custom-border-color-error': field()?.controlStyle?.errorBorderColor ,\n'--custom-border-width-error': field()?.controlStyle?.errorBorderWidth ,\n'--custom-font-size': field()?.controlStyle?.fontSize ,\n'--custom-font-weight': field()?.controlStyle?.fontWeight ,\n'--custom-font-family': field()?.controlStyle?.fontFamily ,\n'--custom-font-color': field()?.controlStyle?.color ,\n'--custom-caret-color': field()?.controlStyle?.caretColor ,\n'--custom-font-color-disabled' : field()?.controlStyle?.disableColor ,\n'--custom-bg-color-disabled' : field()?.controlStyle?.disableBackground ,\n}\"\n>\n@if(reactiveFormControlobject()) {\n <input\n matInput\n autocomplete=\"off\"\n class=\"vertically-align-middle\"\n [name]=\"field()?.fieldNameAttribute\"\n [id]=\"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()\"\n [value]=\"inputValue\"\n [formControl]=\"reactiveFormControlobject()\"\n />\n}@else {\n <input\n matInput\n autocomplete=\"off\"\n [name]=\"field()?.fieldNameAttribute\"\n [id]=\"field()?.fieldName\"\n class=\"vertically-align-middle\"\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()\"\n [value]=\"inputValue\"\n />\n}\n <span matPrefix class=\"rupee-symbol\" [hidden]=\"this.field()?.configData?.isHideRupeeSymbol\">\u20B9</span>\n <div matSuffix class=\"input-select\">\n <!-- <mat-form-field> -->\n <mat-select\n [value]=\"selectValue\"\n [disabled]=\"field()?.configData?.isDisableDropdown\"\n (selectionChange)=\"onSelectChange($event)\"\n (openedChange)=\"onSelectOpened($event)\">\n <mat-option *ngFor=\"let options of field()?.options\" [id]=\"options.value\" [value]=\"options.value\">\n {{ options.label }}\n </mat-option>\n </mat-select>\n <!-- </mat-form-field> -->\n </div>\n <div class=\"my-mat-hint\" *ngIf=\"field()?.configData?.helperText\">{{field()?.configData?.helperText}}</div>\n <!-- <span matSuffix class=\"mx-3 right-amount-text\"> \u20B9 3.50 L </span> -->\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}.my-mat-hint{font-size:12px;text-align:start;font-weight:500;color:#444;letter-spacing:0px}::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;vertical-align:sub}*{font-family:mulish!important}.input-select{height:30px;background:#f5f5f5;padding:4px 8px;border-radius:0 6px 6px 0;transform:translate(-1px);border-left:1.5px solid #dadada}.input-select,.mat-mdc-select-trigger{bottom:3px;gap:4px}:host ::ng-deep .input-select .mat-mdc-select-arrow{color:#8f8f8f!important}.vertically-align-middle{vertical-align:middle}::ng-deep .auto-width .mat-mdc-form-field-infix{width:auto!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}}\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.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatSelectModule }, { 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: 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.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"] }, { kind: "directive", type: CustomizedTooltipDirective, selector: "[appTooltipTemplate]", inputs: ["appTooltipTemplate"] }] });
|
|
2072
2109
|
}
|
|
2073
2110
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SelectTextboxComponent, decorators: [{
|
|
2074
2111
|
type: Component,
|
|
@@ -2078,7 +2115,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
2078
2115
|
useExisting: SelectTextboxComponent,
|
|
2079
2116
|
multi: true
|
|
2080
2117
|
}
|
|
2081
|
-
], template: "<label class=\"field-lable\" *ngIf=\"field() && field()?.isVisible && field().isShowLabel\"\n >{{ field()?.label\n }}<span style=\"color: red\" *ngIf=\"field() && field()?.validators?.isRequired\"\n >*</span\n >\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>\n<mat-form-field\n class=\"w-100 auto-width\"\n appearance=\"outline\"\n *ngIf=\"field() && field()?.isVisible\"\n [ngStyle]=\"{\n'--custom-border-color': field()?.controlStyle?.borderColor ,\n'--custom-border-width': field()?.controlStyle?.borderWidth ,\n'--custom-border-radius': field()?.controlStyle?.borderRadius ,\n'--custom-bg-color': field()?.controlStyle?.background ,\n'--custom-border-color-focus': field()?.controlStyle?.focusBorderColor ,\n'--custom-border-width-focus': field()?.controlStyle?.focusBorderWidth ,\n'--custom-bg-color-focus': field()?.controlStyle?.focusBackground ,\n'--custom-border-color-hover': field()?.controlStyle?.hoverBorderColor ,\n'--custom-border-width-hover': field()?.controlStyle?.hoverBorderWidth ,\n'--custom-border-color-error': field()?.controlStyle?.errorBorderColor ,\n'--custom-border-width-error': field()?.controlStyle?.errorBorderWidth ,\n'--custom-font-size': field()?.controlStyle?.fontSize ,\n'--custom-font-weight': field()?.controlStyle?.fontWeight ,\n'--custom-font-family': field()?.controlStyle?.fontFamily ,\n'--custom-font-color': field()?.controlStyle?.color ,\n'--custom-caret-color': field()?.controlStyle?.caretColor ,\n'--custom-font-color-disabled' : field()?.controlStyle?.disableColor ,\n'--custom-bg-color-disabled' : field()?.controlStyle?.disableBackground ,\n}\"\n>\n@if(reactiveFormControlobject()) {\n <input\n matInput\n autocomplete=\"off\"\n class=\"vertically-align-middle\"\n [name]=\"field()?.fieldName\"\n [id]=\"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()\"\n [value]=\"inputValue\"\n [formControl]=\"reactiveFormControlobject()\"\n />\n}@else {\n <input\n matInput\n autocomplete=\"off\"\n [name]=\"field()?.fieldName\"\n [id]=\"field()?.fieldName\"\n class=\"vertically-align-middle\"\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()\"\n [value]=\"inputValue\"\n />\n}\n <span matPrefix class=\"rupee-symbol\" [hidden]=\"this.field()?.configData?.isHideRupeeSymbol\">\u20B9</span>\n <div matSuffix class=\"input-select\">\n <!-- <mat-form-field> -->\n <mat-select\n [value]=\"selectValue\"\n [disabled]=\"field()?.configData?.isDisableDropdown\"\n (selectionChange)=\"onSelectChange($event)\"\n (openedChange)=\"onSelectOpened($event)\">\n <mat-option *ngFor=\"let options of field()?.options\" [id]=\"options.value\" [value]=\"options.value\">\n {{ options.label }}\n </mat-option>\n </mat-select>\n <!-- </mat-form-field> -->\n </div>\n <div class=\"my-mat-hint\" *ngIf=\"field()?.configData?.helperText\">{{field()?.configData?.helperText}}</div>\n <!-- <span matSuffix class=\"mx-3 right-amount-text\"> \u20B9 3.50 L </span> -->\n</mat-form-field>", styles: [".field-lable{font-size:12px!important;font-weight:700!important;color:#444!important;margin-bottom:0!important}.error-message{color:red}.my-mat-hint{font-size:12px;text-align:start;font-weight:500;color:#444;letter-spacing:0px}::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;vertical-align:sub}*{font-family:mulish!important}.input-select{height:30px;background:#f5f5f5;padding:4px 8px;border-radius:0 6px 6px 0;transform:translate(-1px);border-left:1.5px solid #dadada}.input-select,.mat-mdc-select-trigger{bottom:3px;gap:4px}:host ::ng-deep .input-select .mat-mdc-select-arrow{color:#8f8f8f!important}.vertically-align-middle{vertical-align:middle}::ng-deep .auto-width .mat-mdc-form-field-infix{width:auto!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}}\n"] }]
|
|
2118
|
+
], template: "<label class=\"field-lable\" *ngIf=\"field() && field()?.isVisible && field().isShowLabel\"\n >{{ field()?.label\n }}<span style=\"color: red\" *ngIf=\"field() && field()?.validators?.isRequired\"\n >*</span\n >\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>\n<mat-form-field\n class=\"w-100 auto-width\"\n appearance=\"outline\"\n *ngIf=\"field() && field()?.isVisible\"\n [ngStyle]=\"{\n'--custom-border-color': field()?.controlStyle?.borderColor ,\n'--custom-border-width': field()?.controlStyle?.borderWidth ,\n'--custom-border-radius': field()?.controlStyle?.borderRadius ,\n'--custom-bg-color': field()?.controlStyle?.background ,\n'--custom-border-color-focus': field()?.controlStyle?.focusBorderColor ,\n'--custom-border-width-focus': field()?.controlStyle?.focusBorderWidth ,\n'--custom-bg-color-focus': field()?.controlStyle?.focusBackground ,\n'--custom-border-color-hover': field()?.controlStyle?.hoverBorderColor ,\n'--custom-border-width-hover': field()?.controlStyle?.hoverBorderWidth ,\n'--custom-border-color-error': field()?.controlStyle?.errorBorderColor ,\n'--custom-border-width-error': field()?.controlStyle?.errorBorderWidth ,\n'--custom-font-size': field()?.controlStyle?.fontSize ,\n'--custom-font-weight': field()?.controlStyle?.fontWeight ,\n'--custom-font-family': field()?.controlStyle?.fontFamily ,\n'--custom-font-color': field()?.controlStyle?.color ,\n'--custom-caret-color': field()?.controlStyle?.caretColor ,\n'--custom-font-color-disabled' : field()?.controlStyle?.disableColor ,\n'--custom-bg-color-disabled' : field()?.controlStyle?.disableBackground ,\n}\"\n>\n@if(reactiveFormControlobject()) {\n <input\n matInput\n autocomplete=\"off\"\n class=\"vertically-align-middle\"\n [name]=\"field()?.fieldNameAttribute\"\n [id]=\"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()\"\n [value]=\"inputValue\"\n [formControl]=\"reactiveFormControlobject()\"\n />\n}@else {\n <input\n matInput\n autocomplete=\"off\"\n [name]=\"field()?.fieldNameAttribute\"\n [id]=\"field()?.fieldName\"\n class=\"vertically-align-middle\"\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()\"\n [value]=\"inputValue\"\n />\n}\n <span matPrefix class=\"rupee-symbol\" [hidden]=\"this.field()?.configData?.isHideRupeeSymbol\">\u20B9</span>\n <div matSuffix class=\"input-select\">\n <!-- <mat-form-field> -->\n <mat-select\n [value]=\"selectValue\"\n [disabled]=\"field()?.configData?.isDisableDropdown\"\n (selectionChange)=\"onSelectChange($event)\"\n (openedChange)=\"onSelectOpened($event)\">\n <mat-option *ngFor=\"let options of field()?.options\" [id]=\"options.value\" [value]=\"options.value\">\n {{ options.label }}\n </mat-option>\n </mat-select>\n <!-- </mat-form-field> -->\n </div>\n <div class=\"my-mat-hint\" *ngIf=\"field()?.configData?.helperText\">{{field()?.configData?.helperText}}</div>\n <!-- <span matSuffix class=\"mx-3 right-amount-text\"> \u20B9 3.50 L </span> -->\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}.my-mat-hint{font-size:12px;text-align:start;font-weight:500;color:#444;letter-spacing:0px}::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;vertical-align:sub}*{font-family:mulish!important}.input-select{height:30px;background:#f5f5f5;padding:4px 8px;border-radius:0 6px 6px 0;transform:translate(-1px);border-left:1.5px solid #dadada}.input-select,.mat-mdc-select-trigger{bottom:3px;gap:4px}:host ::ng-deep .input-select .mat-mdc-select-arrow{color:#8f8f8f!important}.vertically-align-middle{vertical-align:middle}::ng-deep .auto-width .mat-mdc-form-field-infix{width:auto!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}}\n"] }]
|
|
2082
2119
|
}], ctorParameters: () => [{ type: MasterControlService }] });
|
|
2083
2120
|
|
|
2084
2121
|
class OtpTextboxComponent {
|
|
@@ -2088,6 +2125,9 @@ class OtpTextboxComponent {
|
|
|
2088
2125
|
reactiveFormControlobject = input();
|
|
2089
2126
|
_onChange = (inputValue) => { };
|
|
2090
2127
|
_unTouched = () => { };
|
|
2128
|
+
ngOnInit() {
|
|
2129
|
+
initializeFieldNameAttribute(this.field());
|
|
2130
|
+
}
|
|
2091
2131
|
writeValue(obj) {
|
|
2092
2132
|
this.inputValue = obj;
|
|
2093
2133
|
}
|
|
@@ -2116,7 +2156,7 @@ class OtpTextboxComponent {
|
|
|
2116
2156
|
useExisting: OtpTextboxComponent,
|
|
2117
2157
|
multi: true
|
|
2118
2158
|
}
|
|
2119
|
-
], ngImport: i0, template: "<label class=\"field-lable\" *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 class=\"w-100\" appearance=\"outline\" [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 @if(reactiveFormControlobject()) {\n <input\n matInput\n autocomplete=\"off\"\n [type]=\"field()?.controlType\"\n [name]=\"field()?.fieldName\"\n [id]=\"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()\"\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 [id]=\"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()\"\n [value]=\"inputValue\"\n />\n }\n <mat-error *ngIf=\"false\">\n {{ field()?.validators?.requiredMessage }}\n </mat-error>\n <div matSuffix class=\"get-otp mx-2\">\n <span class=\"mt-2\">Get OTP</span>\n </div>\n <div matSuffix class=\"verity-otp mx-2\" *ngIf=\"false\">\n <span class=\"mx-1\">Verify</span>\n </div>\n <span matSuffix class=\"mx-3\" *ngIf=\"false\">\n <img src=\"https://cdn.godigit.com/retail-life/check-circle-ou.svg\" alt=\"\" />\n </span>\n</mat-form-field>\n<div >\n <span class=\"checkbox-tag\">Tag as:</span>\n <span *ngFor=\"let options of field()?.options\" class=\"checkbox\">\n <mat-checkbox class=\"optional-checkbox\">\n {{options.label}}\n </mat-checkbox>\n </span>\n</div>\n\n", styles: [".field-lable{font-size:.625rem;font-weight:700!important;color:#444!important;margin-bottom:0!important}.get-otp{padding:4px 8px 6px 12px;background:#fb0;color:#444;font-weight:600;font-size:12px;border-radius:24px;height:24px;width:71px;display:inline-flex}.error-message{color:red}.verity-otp{border-radius:24px;border:1px solid #444;background:#fff;padding:13px 8px 8px;width:58px;height:28px;font-size:12px;letter-spacing:0;font-weight:700;color:#444}.checkbox-tag{font-size:10px;font-weight:700;color:#444;margin-right:5px}*{font-family:mulish!important}.checkbox{padding:4px 8px 3px 0;background:#f5f5f5;border-radius:4px;margin-right:8px}.optional-checkbox.mat-mdc-checkbox label{font-size:10px!important;font-weight:700!important;color:#444!important;padding:0!important;margin-bottom:2px}.optional-checkbox .mdc-checkbox{flex:0 0 12px!important}.optional-checkbox,.mdc-checkbox__background{transform:translate(-2px,-1px)}::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}\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.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: 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: MatSelectModule }, { 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"] }] });
|
|
2159
|
+
], ngImport: i0, template: "<label class=\"field-lable\" *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 class=\"w-100\" appearance=\"outline\" [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 @if(reactiveFormControlobject()) {\n <input\n matInput\n autocomplete=\"off\"\n [type]=\"field()?.controlType\"\n [name]=\"field()?.fieldNameAttribute\"\n [id]=\"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()\"\n [value]=\"inputValue\"\n [formControl]=\"reactiveFormControlobject()\"\n />\n }@else {\n <input\n matInput\n autocomplete=\"off\"\n [type]=\"field()?.controlType\"\n [name]=\"field()?.fieldNameAttribute\"\n [id]=\"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()\"\n [value]=\"inputValue\"\n />\n }\n <mat-error *ngIf=\"false\">\n {{ field()?.validators?.requiredMessage }}\n </mat-error>\n <div matSuffix class=\"get-otp mx-2\">\n <span class=\"mt-2\">Get OTP</span>\n </div>\n <div matSuffix class=\"verity-otp mx-2\" *ngIf=\"false\">\n <span class=\"mx-1\">Verify</span>\n </div>\n <span matSuffix class=\"mx-3\" *ngIf=\"false\">\n <img src=\"https://cdn.godigit.com/retail-life/check-circle-ou.svg\" alt=\"\" />\n </span>\n</mat-form-field>\n<div >\n <span class=\"checkbox-tag\">Tag as:</span>\n <span *ngFor=\"let options of field()?.options\" class=\"checkbox\">\n <mat-checkbox class=\"optional-checkbox\">\n {{options.label}}\n </mat-checkbox>\n </span>\n</div>\n\n", styles: [".field-lable{font-size:.625rem;font-weight:700!important;color:#444!important;margin-bottom:0!important}.get-otp{padding:4px 8px 6px 12px;background:#fb0;color:#444;font-weight:600;font-size:12px;border-radius:24px;height:24px;width:71px;display:inline-flex}.error-message{color:red}.verity-otp{border-radius:24px;border:1px solid #444;background:#fff;padding:13px 8px 8px;width:58px;height:28px;font-size:12px;letter-spacing:0;font-weight:700;color:#444}.checkbox-tag{font-size:10px;font-weight:700;color:#444;margin-right:5px}*{font-family:mulish!important}.checkbox{padding:4px 8px 3px 0;background:#f5f5f5;border-radius:4px;margin-right:8px}.optional-checkbox.mat-mdc-checkbox label{font-size:10px!important;font-weight:700!important;color:#444!important;padding:0!important;margin-bottom:2px}.optional-checkbox .mdc-checkbox{flex:0 0 12px!important}.optional-checkbox,.mdc-checkbox__background{transform:translate(-2px,-1px)}::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}\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.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: 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: MatSelectModule }, { 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"] }] });
|
|
2120
2160
|
}
|
|
2121
2161
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: OtpTextboxComponent, decorators: [{
|
|
2122
2162
|
type: Component,
|
|
@@ -2133,7 +2173,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
2133
2173
|
useExisting: OtpTextboxComponent,
|
|
2134
2174
|
multi: true
|
|
2135
2175
|
}
|
|
2136
|
-
], template: "<label class=\"field-lable\" *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 class=\"w-100\" appearance=\"outline\" [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 @if(reactiveFormControlobject()) {\n <input\n matInput\n autocomplete=\"off\"\n [type]=\"field()?.controlType\"\n [name]=\"field()?.
|
|
2176
|
+
], template: "<label class=\"field-lable\" *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 class=\"w-100\" appearance=\"outline\" [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 @if(reactiveFormControlobject()) {\n <input\n matInput\n autocomplete=\"off\"\n [type]=\"field()?.controlType\"\n [name]=\"field()?.fieldNameAttribute\"\n [id]=\"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()\"\n [value]=\"inputValue\"\n [formControl]=\"reactiveFormControlobject()\"\n />\n }@else {\n <input\n matInput\n autocomplete=\"off\"\n [type]=\"field()?.controlType\"\n [name]=\"field()?.fieldNameAttribute\"\n [id]=\"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()\"\n [value]=\"inputValue\"\n />\n }\n <mat-error *ngIf=\"false\">\n {{ field()?.validators?.requiredMessage }}\n </mat-error>\n <div matSuffix class=\"get-otp mx-2\">\n <span class=\"mt-2\">Get OTP</span>\n </div>\n <div matSuffix class=\"verity-otp mx-2\" *ngIf=\"false\">\n <span class=\"mx-1\">Verify</span>\n </div>\n <span matSuffix class=\"mx-3\" *ngIf=\"false\">\n <img src=\"https://cdn.godigit.com/retail-life/check-circle-ou.svg\" alt=\"\" />\n </span>\n</mat-form-field>\n<div >\n <span class=\"checkbox-tag\">Tag as:</span>\n <span *ngFor=\"let options of field()?.options\" class=\"checkbox\">\n <mat-checkbox class=\"optional-checkbox\">\n {{options.label}}\n </mat-checkbox>\n </span>\n</div>\n\n", styles: [".field-lable{font-size:.625rem;font-weight:700!important;color:#444!important;margin-bottom:0!important}.get-otp{padding:4px 8px 6px 12px;background:#fb0;color:#444;font-weight:600;font-size:12px;border-radius:24px;height:24px;width:71px;display:inline-flex}.error-message{color:red}.verity-otp{border-radius:24px;border:1px solid #444;background:#fff;padding:13px 8px 8px;width:58px;height:28px;font-size:12px;letter-spacing:0;font-weight:700;color:#444}.checkbox-tag{font-size:10px;font-weight:700;color:#444;margin-right:5px}*{font-family:mulish!important}.checkbox{padding:4px 8px 3px 0;background:#f5f5f5;border-radius:4px;margin-right:8px}.optional-checkbox.mat-mdc-checkbox label{font-size:10px!important;font-weight:700!important;color:#444!important;padding:0!important;margin-bottom:2px}.optional-checkbox .mdc-checkbox{flex:0 0 12px!important}.optional-checkbox,.mdc-checkbox__background{transform:translate(-2px,-1px)}::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}\n"] }]
|
|
2137
2177
|
}], ctorParameters: () => [] });
|
|
2138
2178
|
|
|
2139
2179
|
class AmountTextboxComponent {
|
|
@@ -2152,6 +2192,9 @@ class AmountTextboxComponent {
|
|
|
2152
2192
|
}
|
|
2153
2193
|
// Declare Output event emitter here (class level)
|
|
2154
2194
|
blur = new EventEmitter();
|
|
2195
|
+
ngOnInit() {
|
|
2196
|
+
initializeFieldNameAttribute(this.field());
|
|
2197
|
+
}
|
|
2155
2198
|
// ControlValueAccessor implementation
|
|
2156
2199
|
writeValue(obj) {
|
|
2157
2200
|
if (obj !== null && obj !== undefined) {
|
|
@@ -2331,7 +2374,7 @@ class AmountTextboxComponent {
|
|
|
2331
2374
|
useExisting: AmountTextboxComponent,
|
|
2332
2375
|
multi: true
|
|
2333
2376
|
}
|
|
2334
|
-
], ngImport: i0, template: "<label class=\"field-lable\" *ngIf=\"field() && field()?.isVisible && field()?.isShowLabel\"\n >{{ field().label\n }}<span style=\"color: red\" *ngIf=\"field() && field()?.validators.isRequired\"\n >*</span\n ></label\n>\n <mat-form-field\n class=\"w-100\"\n appearance=\"outline\"\n *ngIf=\"field() && field()?.isVisible\"\n [ngStyle]=\"{\n'--custom-border-color': field()?.controlStyle?.borderColor ,\n'--custom-border-width': field()?.controlStyle?.borderWidth ,\n'--custom-border-radius': field()?.controlStyle?.borderRadius ,\n'--custom-bg-color': field()?.controlStyle?.background ,\n'--custom-border-color-focus': field()?.controlStyle?.focusBorderColor ,\n'--custom-border-width-focus': field()?.controlStyle?.focusBorderWidth ,\n'--custom-bg-color-focus': field()?.controlStyle?.focusBackground ,\n'--custom-border-color-hover': field()?.controlStyle?.hoverBorderColor ,\n'--custom-border-width-hover': field()?.controlStyle?.hoverBorderWidth ,\n'--custom-border-color-error': field()?.controlStyle?.errorBorderColor ,\n'--custom-border-width-error': field()?.controlStyle?.errorBorderWidth ,\n'--custom-font-size': field()?.controlStyle?.fontSize ,\n'--custom-font-weight': field()?.controlStyle?.fontWeight ,\n'--custom-font-family': field()?.controlStyle?.fontFamily ,\n'--custom-font-color': field()?.controlStyle?.color ,\n'--custom-caret-color': field()?.controlStyle?.caretColor ,\n'--custom-font-color-disabled' : field()?.controlStyle?.disableColor ,\n'--custom-bg-color-disabled' : field()?.controlStyle?.disableBackground ,\n}\">\n @if(reactiveFormControlobject()) {\n<input\n matInput\n [type]=\"field()?.controlType\"\n [name]=\"field()?.
|
|
2377
|
+
], ngImport: i0, template: "<label class=\"field-lable\" *ngIf=\"field() && field()?.isVisible && field()?.isShowLabel\"\n >{{ field().label\n }}<span style=\"color: red\" *ngIf=\"field() && field()?.validators.isRequired\"\n >*</span\n ></label\n>\n <mat-form-field\n class=\"w-100\"\n appearance=\"outline\"\n *ngIf=\"field() && field()?.isVisible\"\n [ngStyle]=\"{\n'--custom-border-color': field()?.controlStyle?.borderColor ,\n'--custom-border-width': field()?.controlStyle?.borderWidth ,\n'--custom-border-radius': field()?.controlStyle?.borderRadius ,\n'--custom-bg-color': field()?.controlStyle?.background ,\n'--custom-border-color-focus': field()?.controlStyle?.focusBorderColor ,\n'--custom-border-width-focus': field()?.controlStyle?.focusBorderWidth ,\n'--custom-bg-color-focus': field()?.controlStyle?.focusBackground ,\n'--custom-border-color-hover': field()?.controlStyle?.hoverBorderColor ,\n'--custom-border-width-hover': field()?.controlStyle?.hoverBorderWidth ,\n'--custom-border-color-error': field()?.controlStyle?.errorBorderColor ,\n'--custom-border-width-error': field()?.controlStyle?.errorBorderWidth ,\n'--custom-font-size': field()?.controlStyle?.fontSize ,\n'--custom-font-weight': field()?.controlStyle?.fontWeight ,\n'--custom-font-family': field()?.controlStyle?.fontFamily ,\n'--custom-font-color': field()?.controlStyle?.color ,\n'--custom-caret-color': field()?.controlStyle?.caretColor ,\n'--custom-font-color-disabled' : field()?.controlStyle?.disableColor ,\n'--custom-bg-color-disabled' : field()?.controlStyle?.disableBackground ,\n}\">\n @if(reactiveFormControlobject()) {\n<input\n matInput\n [type]=\"field()?.controlType\"\n [name]=\"field()?.fieldNameAttribute\"\n [id]=\"field()?.fieldName\"\n autocomplete=\"off\"\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 (keydown)=\"onKeyDown($event)\"\n (blur)=\"onInputBlur($event)\"\n [value]=\"getDisplayValue()\"\n [formControl]=\"reactiveFormControlobject()\"\n />\n }@else {\n <input\n matInput\n [type]=\"field()?.controlType\"\n [name]=\"field()?.fieldNameAttribute\"\n [id]=\"field()?.fieldName\"\n autocomplete=\"off\"\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 (keydown)=\"onKeyDown($event)\"\n (blur)=\"onInputBlur($event)\"\n [value]=\"getDisplayValue()\"\n />\n }\n\n <mat-error *ngIf=\"false\">\n {{ field()?.validators?.requiredMessage }}\n </mat-error>\n <span matPrefix class=\"rupee-symbol px-2\">\u20B9</span>\n <span matSuffix class=\"me-2 right-amount-text\" *ngIf=\"inputValue\">{{ getFormattedAmount() }}</span>\n </mat-form-field>\n", styles: [".field-lable{font-size:12px!important;font-weight:700!important;color:#444!important;margin-bottom:0!important}*{font-family:mulish!important}.right-amount-text{font-weight:600;font-size:10px;color:#444;background:#f5f5f5;border-radius:2px;padding:5.5px 6px 4px}.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:.75rem!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}.rupee-symbol{color:#444;font-size:12px;font-weight:400}\n"], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { 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.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { 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: 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: "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"] }] });
|
|
2335
2378
|
}
|
|
2336
2379
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AmountTextboxComponent, decorators: [{
|
|
2337
2380
|
type: Component,
|
|
@@ -2346,7 +2389,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
2346
2389
|
useExisting: AmountTextboxComponent,
|
|
2347
2390
|
multi: true
|
|
2348
2391
|
}
|
|
2349
|
-
], template: "<label class=\"field-lable\" *ngIf=\"field() && field()?.isVisible && field()?.isShowLabel\"\n >{{ field().label\n }}<span style=\"color: red\" *ngIf=\"field() && field()?.validators.isRequired\"\n >*</span\n ></label\n>\n <mat-form-field\n class=\"w-100\"\n appearance=\"outline\"\n *ngIf=\"field() && field()?.isVisible\"\n [ngStyle]=\"{\n'--custom-border-color': field()?.controlStyle?.borderColor ,\n'--custom-border-width': field()?.controlStyle?.borderWidth ,\n'--custom-border-radius': field()?.controlStyle?.borderRadius ,\n'--custom-bg-color': field()?.controlStyle?.background ,\n'--custom-border-color-focus': field()?.controlStyle?.focusBorderColor ,\n'--custom-border-width-focus': field()?.controlStyle?.focusBorderWidth ,\n'--custom-bg-color-focus': field()?.controlStyle?.focusBackground ,\n'--custom-border-color-hover': field()?.controlStyle?.hoverBorderColor ,\n'--custom-border-width-hover': field()?.controlStyle?.hoverBorderWidth ,\n'--custom-border-color-error': field()?.controlStyle?.errorBorderColor ,\n'--custom-border-width-error': field()?.controlStyle?.errorBorderWidth ,\n'--custom-font-size': field()?.controlStyle?.fontSize ,\n'--custom-font-weight': field()?.controlStyle?.fontWeight ,\n'--custom-font-family': field()?.controlStyle?.fontFamily ,\n'--custom-font-color': field()?.controlStyle?.color ,\n'--custom-caret-color': field()?.controlStyle?.caretColor ,\n'--custom-font-color-disabled' : field()?.controlStyle?.disableColor ,\n'--custom-bg-color-disabled' : field()?.controlStyle?.disableBackground ,\n}\">\n @if(reactiveFormControlobject()) {\n<input\n matInput\n [type]=\"field()?.controlType\"\n [name]=\"field()?.
|
|
2392
|
+
], template: "<label class=\"field-lable\" *ngIf=\"field() && field()?.isVisible && field()?.isShowLabel\"\n >{{ field().label\n }}<span style=\"color: red\" *ngIf=\"field() && field()?.validators.isRequired\"\n >*</span\n ></label\n>\n <mat-form-field\n class=\"w-100\"\n appearance=\"outline\"\n *ngIf=\"field() && field()?.isVisible\"\n [ngStyle]=\"{\n'--custom-border-color': field()?.controlStyle?.borderColor ,\n'--custom-border-width': field()?.controlStyle?.borderWidth ,\n'--custom-border-radius': field()?.controlStyle?.borderRadius ,\n'--custom-bg-color': field()?.controlStyle?.background ,\n'--custom-border-color-focus': field()?.controlStyle?.focusBorderColor ,\n'--custom-border-width-focus': field()?.controlStyle?.focusBorderWidth ,\n'--custom-bg-color-focus': field()?.controlStyle?.focusBackground ,\n'--custom-border-color-hover': field()?.controlStyle?.hoverBorderColor ,\n'--custom-border-width-hover': field()?.controlStyle?.hoverBorderWidth ,\n'--custom-border-color-error': field()?.controlStyle?.errorBorderColor ,\n'--custom-border-width-error': field()?.controlStyle?.errorBorderWidth ,\n'--custom-font-size': field()?.controlStyle?.fontSize ,\n'--custom-font-weight': field()?.controlStyle?.fontWeight ,\n'--custom-font-family': field()?.controlStyle?.fontFamily ,\n'--custom-font-color': field()?.controlStyle?.color ,\n'--custom-caret-color': field()?.controlStyle?.caretColor ,\n'--custom-font-color-disabled' : field()?.controlStyle?.disableColor ,\n'--custom-bg-color-disabled' : field()?.controlStyle?.disableBackground ,\n}\">\n @if(reactiveFormControlobject()) {\n<input\n matInput\n [type]=\"field()?.controlType\"\n [name]=\"field()?.fieldNameAttribute\"\n [id]=\"field()?.fieldName\"\n autocomplete=\"off\"\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 (keydown)=\"onKeyDown($event)\"\n (blur)=\"onInputBlur($event)\"\n [value]=\"getDisplayValue()\"\n [formControl]=\"reactiveFormControlobject()\"\n />\n }@else {\n <input\n matInput\n [type]=\"field()?.controlType\"\n [name]=\"field()?.fieldNameAttribute\"\n [id]=\"field()?.fieldName\"\n autocomplete=\"off\"\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 (keydown)=\"onKeyDown($event)\"\n (blur)=\"onInputBlur($event)\"\n [value]=\"getDisplayValue()\"\n />\n }\n\n <mat-error *ngIf=\"false\">\n {{ field()?.validators?.requiredMessage }}\n </mat-error>\n <span matPrefix class=\"rupee-symbol px-2\">\u20B9</span>\n <span matSuffix class=\"me-2 right-amount-text\" *ngIf=\"inputValue\">{{ getFormattedAmount() }}</span>\n </mat-form-field>\n", styles: [".field-lable{font-size:12px!important;font-weight:700!important;color:#444!important;margin-bottom:0!important}*{font-family:mulish!important}.right-amount-text{font-weight:600;font-size:10px;color:#444;background:#f5f5f5;border-radius:2px;padding:5.5px 6px 4px}.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:.75rem!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}.rupee-symbol{color:#444;font-size:12px;font-weight:400}\n"] }]
|
|
2350
2393
|
}], ctorParameters: () => [{ type: MasterControlService }], propDecorators: { blur: [{
|
|
2351
2394
|
type: Output
|
|
2352
2395
|
}] } });
|
|
@@ -2359,6 +2402,9 @@ class SuffixTextboxComponent {
|
|
|
2359
2402
|
_unTouched = () => { };
|
|
2360
2403
|
// Declare Output event emitter here (class level)
|
|
2361
2404
|
blur = new EventEmitter();
|
|
2405
|
+
ngOnInit() {
|
|
2406
|
+
initializeFieldNameAttribute(this.field());
|
|
2407
|
+
}
|
|
2362
2408
|
writeValue(obj) {
|
|
2363
2409
|
this.inputValue = obj;
|
|
2364
2410
|
}
|
|
@@ -2388,7 +2434,7 @@ class SuffixTextboxComponent {
|
|
|
2388
2434
|
useExisting: SuffixTextboxComponent,
|
|
2389
2435
|
multi: true
|
|
2390
2436
|
}
|
|
2391
|
-
], ngImport: i0, template: "<label class=\"field-lable\" *ngIf=\"field() && field()?.isVisible && field().isShowLabel\">{{ field()?.label\n }}<span style=\"color: red\" *ngIf=\"field() && 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<mat-form-field class=\"w-100\" appearance=\"outline\" [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 @if(reactiveFormControlobject()) {\n <input matInput autocomplete=\"off\" [type]=\"field()?.controlType\" [name]=\"field()?.fieldName\"\n [id]=\"field()?.fieldName\" [placeholder]=\"field()?.placeHolder\" [maxLength]=\"field()?.validators?.maxLength\"\n [minLength]=\"field()?.validators?.minLength\" [disabled]=\"field()?.isDisable\"\n [required]=\"field()?.validators?.isRequired\" [pattern]=\"field()?.validators?.pattern\"\n (input)=\"onInputChange($event)\" (blur)=\"onInputBlur()\" [value]=\"inputValue\"\n [formControl]=\"reactiveFormControlobject()\" />\n }@else {\n <input matInput autocomplete=\"off\" [type]=\"field()?.controlType\" [name]=\"field()?.fieldName\"\n [id]=\"field()?.fieldName\" [placeholder]=\"field()?.placeHolder\" [maxLength]=\"field()?.validators?.maxLength\"\n [minLength]=\"field()?.validators?.minLength\" [disabled]=\"field()?.isDisable\"\n [required]=\"field()?.validators?.isRequired\" [pattern]=\"field()?.validators?.pattern\"\n (input)=\"onInputChange($event)\" (blur)=\"onInputBlur()\" [value]=\"inputValue\" />\n }\n\n <mat-error *ngIf=\"false\">\n {{ field()?.validators?.requiredMessage }}\n </mat-error>\n <span matSuffix class=\"mx-3\" *ngIf=\"false\">\n <img src=\"https://cdn.godigit.com/retail-life/check-circle-ou.svg\" alt=\"\" />\n </span>\n <span matSuffix class=\"mx-3 right-input-text\" *ngIf=\"field().configData?.suffix\"> {{field().configData?.suffix}}\n </span>\n</mat-form-field>\n<div *ngIf=\"field().configData?.isShowTagAs\">\n <span class=\"checkbox-tag\">Tag as:</span>\n <span *ngFor=\"let option of field()?.options\" class=\"checkbox\">\n <mat-checkbox class=\"optional-checkbox\">\n {{ option.label }}\n </mat-checkbox>\n </span>\n</div>\n<div *ngIf=\"field().configData?.infoMessage\">\n <span class=\"below-input-text\">{{field().configData?.infoMessage}}</span>\n</div>\n", styles: [".field-lable{font-size:12px!important;font-weight:700!important;color:#444!important;margin-bottom:0!important}.right-input-text{font-weight:400;font-size:12px;color:#696969}.error-message{color:red}.checkbox-tag{font-size:10px;font-weight:700;color:#444;margin-right:5px}.checkbox{padding:4px 8px 3px 0;background:#f5f5f5;border-radius:4px;margin-right:8px}*{font-family:mulish!important}.optional-checkbox.mat-mdc-checkbox label{font-size:10px!important;font-weight:700!important;color:#444!important;padding:0!important;margin-bottom:2px}.toggle-img{width:12px;margin-left:8px!important}.optional-checkbox .mdc-checkbox{flex:0 0 12px!important}.optional-checkbox,.mdc-checkbox__background{transform:translate(-2px,-1px)}.below-input-text{font-weight:400;font-size:12px;color:#444;font-family:Mulish}@media screen and (max-width: 768px){.toggle-img{width:16px}}::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;font-size:12px!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}.ms-1{width:12px!important;height:12px!important}\n"], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { 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: 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: 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: "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.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"] }, { kind: "directive", type: CustomizedTooltipDirective, selector: "[appTooltipTemplate]", inputs: ["appTooltipTemplate"] }] });
|
|
2437
|
+
], ngImport: i0, template: "<label class=\"field-lable\" *ngIf=\"field() && field()?.isVisible && field().isShowLabel\">{{ field()?.label\n }}<span style=\"color: red\" *ngIf=\"field() && 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<mat-form-field class=\"w-100\" appearance=\"outline\" [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 @if(reactiveFormControlobject()) {\n <input matInput autocomplete=\"off\" [type]=\"field()?.controlType\" [name]=\"field()?.fieldNameAttribute\"\n [id]=\"field()?.fieldName\" [placeholder]=\"field()?.placeHolder\" [maxLength]=\"field()?.validators?.maxLength\"\n [minLength]=\"field()?.validators?.minLength\" [disabled]=\"field()?.isDisable\"\n [required]=\"field()?.validators?.isRequired\" [pattern]=\"field()?.validators?.pattern\"\n (input)=\"onInputChange($event)\" (blur)=\"onInputBlur()\" [value]=\"inputValue\"\n [formControl]=\"reactiveFormControlobject()\" />\n }@else {\n <input matInput autocomplete=\"off\" [type]=\"field()?.controlType\" [name]=\"field()?.fieldNameAttribute\"\n [id]=\"field()?.fieldName\" [placeholder]=\"field()?.placeHolder\" [maxLength]=\"field()?.validators?.maxLength\"\n [minLength]=\"field()?.validators?.minLength\" [disabled]=\"field()?.isDisable\"\n [required]=\"field()?.validators?.isRequired\" [pattern]=\"field()?.validators?.pattern\"\n (input)=\"onInputChange($event)\" (blur)=\"onInputBlur()\" [value]=\"inputValue\" />\n }\n\n <mat-error *ngIf=\"false\">\n {{ field()?.validators?.requiredMessage }}\n </mat-error>\n <span matSuffix class=\"mx-3\" *ngIf=\"false\">\n <img src=\"https://cdn.godigit.com/retail-life/check-circle-ou.svg\" alt=\"\" />\n </span>\n <span matSuffix class=\"mx-3 right-input-text\" *ngIf=\"field().configData?.suffix\"> {{field().configData?.suffix}}\n </span>\n</mat-form-field>\n<div *ngIf=\"field().configData?.isShowTagAs\">\n <span class=\"checkbox-tag\">Tag as:</span>\n <span *ngFor=\"let option of field()?.options\" class=\"checkbox\">\n <mat-checkbox class=\"optional-checkbox\">\n {{ option.label }}\n </mat-checkbox>\n </span>\n</div>\n<div *ngIf=\"field().configData?.infoMessage\">\n <span class=\"below-input-text\">{{field().configData?.infoMessage}}</span>\n</div>\n", styles: [".field-lable{font-size:12px!important;font-weight:700!important;color:#444!important;margin-bottom:0!important}.right-input-text{font-weight:400;font-size:12px;color:#696969}.error-message{color:red}.checkbox-tag{font-size:10px;font-weight:700;color:#444;margin-right:5px}.checkbox{padding:4px 8px 3px 0;background:#f5f5f5;border-radius:4px;margin-right:8px}*{font-family:mulish!important}.optional-checkbox.mat-mdc-checkbox label{font-size:10px!important;font-weight:700!important;color:#444!important;padding:0!important;margin-bottom:2px}.toggle-img{width:12px;margin-left:8px!important}.optional-checkbox .mdc-checkbox{flex:0 0 12px!important}.optional-checkbox,.mdc-checkbox__background{transform:translate(-2px,-1px)}.below-input-text{font-weight:400;font-size:12px;color:#444;font-family:Mulish}@media screen and (max-width: 768px){.toggle-img{width:16px}}::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;font-size:12px!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}.ms-1{width:12px!important;height:12px!important}\n"], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { 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: 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: 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: "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.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"] }, { kind: "directive", type: CustomizedTooltipDirective, selector: "[appTooltipTemplate]", inputs: ["appTooltipTemplate"] }] });
|
|
2392
2438
|
}
|
|
2393
2439
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SuffixTextboxComponent, decorators: [{
|
|
2394
2440
|
type: Component,
|
|
@@ -2405,7 +2451,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
2405
2451
|
useExisting: SuffixTextboxComponent,
|
|
2406
2452
|
multi: true
|
|
2407
2453
|
}
|
|
2408
|
-
], template: "<label class=\"field-lable\" *ngIf=\"field() && field()?.isVisible && field().isShowLabel\">{{ field()?.label\n }}<span style=\"color: red\" *ngIf=\"field() && 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<mat-form-field class=\"w-100\" appearance=\"outline\" [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 @if(reactiveFormControlobject()) {\n <input matInput autocomplete=\"off\" [type]=\"field()?.controlType\" [name]=\"field()?.
|
|
2454
|
+
], template: "<label class=\"field-lable\" *ngIf=\"field() && field()?.isVisible && field().isShowLabel\">{{ field()?.label\n }}<span style=\"color: red\" *ngIf=\"field() && 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<mat-form-field class=\"w-100\" appearance=\"outline\" [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 @if(reactiveFormControlobject()) {\n <input matInput autocomplete=\"off\" [type]=\"field()?.controlType\" [name]=\"field()?.fieldNameAttribute\"\n [id]=\"field()?.fieldName\" [placeholder]=\"field()?.placeHolder\" [maxLength]=\"field()?.validators?.maxLength\"\n [minLength]=\"field()?.validators?.minLength\" [disabled]=\"field()?.isDisable\"\n [required]=\"field()?.validators?.isRequired\" [pattern]=\"field()?.validators?.pattern\"\n (input)=\"onInputChange($event)\" (blur)=\"onInputBlur()\" [value]=\"inputValue\"\n [formControl]=\"reactiveFormControlobject()\" />\n }@else {\n <input matInput autocomplete=\"off\" [type]=\"field()?.controlType\" [name]=\"field()?.fieldNameAttribute\"\n [id]=\"field()?.fieldName\" [placeholder]=\"field()?.placeHolder\" [maxLength]=\"field()?.validators?.maxLength\"\n [minLength]=\"field()?.validators?.minLength\" [disabled]=\"field()?.isDisable\"\n [required]=\"field()?.validators?.isRequired\" [pattern]=\"field()?.validators?.pattern\"\n (input)=\"onInputChange($event)\" (blur)=\"onInputBlur()\" [value]=\"inputValue\" />\n }\n\n <mat-error *ngIf=\"false\">\n {{ field()?.validators?.requiredMessage }}\n </mat-error>\n <span matSuffix class=\"mx-3\" *ngIf=\"false\">\n <img src=\"https://cdn.godigit.com/retail-life/check-circle-ou.svg\" alt=\"\" />\n </span>\n <span matSuffix class=\"mx-3 right-input-text\" *ngIf=\"field().configData?.suffix\"> {{field().configData?.suffix}}\n </span>\n</mat-form-field>\n<div *ngIf=\"field().configData?.isShowTagAs\">\n <span class=\"checkbox-tag\">Tag as:</span>\n <span *ngFor=\"let option of field()?.options\" class=\"checkbox\">\n <mat-checkbox class=\"optional-checkbox\">\n {{ option.label }}\n </mat-checkbox>\n </span>\n</div>\n<div *ngIf=\"field().configData?.infoMessage\">\n <span class=\"below-input-text\">{{field().configData?.infoMessage}}</span>\n</div>\n", styles: [".field-lable{font-size:12px!important;font-weight:700!important;color:#444!important;margin-bottom:0!important}.right-input-text{font-weight:400;font-size:12px;color:#696969}.error-message{color:red}.checkbox-tag{font-size:10px;font-weight:700;color:#444;margin-right:5px}.checkbox{padding:4px 8px 3px 0;background:#f5f5f5;border-radius:4px;margin-right:8px}*{font-family:mulish!important}.optional-checkbox.mat-mdc-checkbox label{font-size:10px!important;font-weight:700!important;color:#444!important;padding:0!important;margin-bottom:2px}.toggle-img{width:12px;margin-left:8px!important}.optional-checkbox .mdc-checkbox{flex:0 0 12px!important}.optional-checkbox,.mdc-checkbox__background{transform:translate(-2px,-1px)}.below-input-text{font-weight:400;font-size:12px;color:#444;font-family:Mulish}@media screen and (max-width: 768px){.toggle-img{width:16px}}::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;font-size:12px!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}.ms-1{width:12px!important;height:12px!important}\n"] }]
|
|
2409
2455
|
}], propDecorators: { blur: [{
|
|
2410
2456
|
type: Output
|
|
2411
2457
|
}] } });
|
|
@@ -2417,6 +2463,9 @@ class OtpMobNumberComponent {
|
|
|
2417
2463
|
reactiveFormControlobject = input();
|
|
2418
2464
|
_onChange = (inputValue) => { };
|
|
2419
2465
|
_unTouched = () => { };
|
|
2466
|
+
ngOnInit() {
|
|
2467
|
+
initializeFieldNameAttribute(this.field());
|
|
2468
|
+
}
|
|
2420
2469
|
writeValue(obj) {
|
|
2421
2470
|
this.inputValue = obj;
|
|
2422
2471
|
}
|
|
@@ -2445,7 +2494,7 @@ class OtpMobNumberComponent {
|
|
|
2445
2494
|
useExisting: OtpMobNumberComponent,
|
|
2446
2495
|
multi: true
|
|
2447
2496
|
}
|
|
2448
|
-
], ngImport: i0, template: "<label class=\"field-lable\" *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 mobile-field\"\n appearance=\"outline\"\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 <div matTextPrefix class=\"prefix_alternate_mobile primary\">\n <div class=\"d-flex countryCode\">\n <span class=\"country_code_input\"> {{ CountryCode }} </span>\n <span\n ><img src=\"https://cdn.godigit.com/retail-life/down-arrow.svg\" alt=\"\"\n /></span>\n </div>\n </div>\n @if(reactiveFormControlobject()) {\n <input\n matInput\n autocomplete=\"off\"\n [type]=\"field()?.controlType\"\n [name]=\"field()?.fieldName\"\n [id]=\"field()?.fieldName\"\n autocomplete=\"off\"\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()\"\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 [id]=\"field()?.fieldName\"\n autocomplete=\"off\"\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()\"\n [value]=\"inputValue\"\n />\n}\n\n <div matSuffix class=\"get-otp mx-2\">\n <span class=\"mt-2\">Get OTP</span>\n </div>\n <div matSuffix class=\"verity-otp mx-2\" *ngIf=\"false\">\n <span class=\"mx-1\">Verify</span>\n </div>\n <span matSuffix class=\"mx-3\" *ngIf=\"false\">\n <img src=\"https://cdn.godigit.com/retail-life/check-circle-ou.svg\" alt=\"\" />\n </span>\n <mat-error *ngIf=\"false\">\n {{ field()?.validators?.requiredMessage }}\n </mat-error>\n</mat-form-field>\n<span class=\"success-text\" *ngIf=\"false\">Phone Number Verified</span>\n<span class=\"success-text\">\n <img src=\"https://cdn.godigit.com/retail-life/otp-circle-oui.svg\" alt=\"\" />\n OTP Sent\n</span>\n<div class=\"error-message\" *ngIf=\"false\">\n {{ field()?.validators?.requiredMessage }}.\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:0!important}.mobile-field .mat-mdc-form-field:not(.mat-form-field-disabled) .mat-mdc-floating-label.mdc-floating-label{transform:var(--mat-mdc-form-field-label-transform, translateY(-50%) translateX(calc(1 * (61.625px + var(--mat-mdc-form-field-label-offset-x, 0px)))))!important}.prefix_alternate_mobile{font-size:12px;font-weight:400;color:#8f8f8f;padding:10px 6px 10px 0;border-right:1px solid #dddddd;height:20px;width:auto;display:flex;justify-content:center;align-items:center;position:relative;cursor:pointer;transform:translate(-6px)}.countryCode{gap:4px}.get-otp{padding:4px 8px 6px 12px;background:#fb0;color:#444;font-weight:600;font-size:12px;border-radius:24px;height:24px;width:71px;display:inline-flex}*{font-family:mulish!important}.verity-otp{border-radius:24px;border:1px solid #444;background:#fff;padding:13px 8px 8px;width:58px;height:28px;font-size:12px;letter-spacing:0;font-weight:700;color:#444}.success-text{font-weight:500;color:#169f7d}.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}\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.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { 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: 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"] }] });
|
|
2497
|
+
], ngImport: i0, template: "<label class=\"field-lable\" *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 mobile-field\"\n appearance=\"outline\"\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 <div matTextPrefix class=\"prefix_alternate_mobile primary\">\n <div class=\"d-flex countryCode\">\n <span class=\"country_code_input\"> {{ CountryCode }} </span>\n <span\n ><img src=\"https://cdn.godigit.com/retail-life/down-arrow.svg\" alt=\"\"\n /></span>\n </div>\n </div>\n @if(reactiveFormControlobject()) {\n <input\n matInput\n autocomplete=\"off\"\n [type]=\"field()?.controlType\"\n [name]=\"field()?.fieldNameAttribute\"\n [id]=\"field()?.fieldName\"\n autocomplete=\"off\"\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()\"\n [value]=\"inputValue\"\n [formControl]=\"reactiveFormControlobject()\"\n />\n }@else {\n <input\n matInput\n autocomplete=\"off\"\n [type]=\"field()?.controlType\"\n [name]=\"field()?.fieldNameAttribute\"\n [id]=\"field()?.fieldName\"\n autocomplete=\"off\"\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()\"\n [value]=\"inputValue\"\n />\n}\n\n <div matSuffix class=\"get-otp mx-2\">\n <span class=\"mt-2\">Get OTP</span>\n </div>\n <div matSuffix class=\"verity-otp mx-2\" *ngIf=\"false\">\n <span class=\"mx-1\">Verify</span>\n </div>\n <span matSuffix class=\"mx-3\" *ngIf=\"false\">\n <img src=\"https://cdn.godigit.com/retail-life/check-circle-ou.svg\" alt=\"\" />\n </span>\n <mat-error *ngIf=\"false\">\n {{ field()?.validators?.requiredMessage }}\n </mat-error>\n</mat-form-field>\n<span class=\"success-text\" *ngIf=\"false\">Phone Number Verified</span>\n<span class=\"success-text\">\n <img src=\"https://cdn.godigit.com/retail-life/otp-circle-oui.svg\" alt=\"\" />\n OTP Sent\n</span>\n<div class=\"error-message\" *ngIf=\"false\">\n {{ field()?.validators?.requiredMessage }}.\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:0!important}.mobile-field .mat-mdc-form-field:not(.mat-form-field-disabled) .mat-mdc-floating-label.mdc-floating-label{transform:var(--mat-mdc-form-field-label-transform, translateY(-50%) translateX(calc(1 * (61.625px + var(--mat-mdc-form-field-label-offset-x, 0px)))))!important}.prefix_alternate_mobile{font-size:12px;font-weight:400;color:#8f8f8f;padding:10px 6px 10px 0;border-right:1px solid #dddddd;height:20px;width:auto;display:flex;justify-content:center;align-items:center;position:relative;cursor:pointer;transform:translate(-6px)}.countryCode{gap:4px}.get-otp{padding:4px 8px 6px 12px;background:#fb0;color:#444;font-weight:600;font-size:12px;border-radius:24px;height:24px;width:71px;display:inline-flex}*{font-family:mulish!important}.verity-otp{border-radius:24px;border:1px solid #444;background:#fff;padding:13px 8px 8px;width:58px;height:28px;font-size:12px;letter-spacing:0;font-weight:700;color:#444}.success-text{font-weight:500;color:#169f7d}.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}\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.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { 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: 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"] }] });
|
|
2449
2498
|
}
|
|
2450
2499
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: OtpMobNumberComponent, decorators: [{
|
|
2451
2500
|
type: Component,
|
|
@@ -2460,7 +2509,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
2460
2509
|
useExisting: OtpMobNumberComponent,
|
|
2461
2510
|
multi: true
|
|
2462
2511
|
}
|
|
2463
|
-
], template: "<label class=\"field-lable\" *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 mobile-field\"\n appearance=\"outline\"\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 <div matTextPrefix class=\"prefix_alternate_mobile primary\">\n <div class=\"d-flex countryCode\">\n <span class=\"country_code_input\"> {{ CountryCode }} </span>\n <span\n ><img src=\"https://cdn.godigit.com/retail-life/down-arrow.svg\" alt=\"\"\n /></span>\n </div>\n </div>\n @if(reactiveFormControlobject()) {\n <input\n matInput\n autocomplete=\"off\"\n [type]=\"field()?.controlType\"\n [name]=\"field()?.
|
|
2512
|
+
], template: "<label class=\"field-lable\" *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 mobile-field\"\n appearance=\"outline\"\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 <div matTextPrefix class=\"prefix_alternate_mobile primary\">\n <div class=\"d-flex countryCode\">\n <span class=\"country_code_input\"> {{ CountryCode }} </span>\n <span\n ><img src=\"https://cdn.godigit.com/retail-life/down-arrow.svg\" alt=\"\"\n /></span>\n </div>\n </div>\n @if(reactiveFormControlobject()) {\n <input\n matInput\n autocomplete=\"off\"\n [type]=\"field()?.controlType\"\n [name]=\"field()?.fieldNameAttribute\"\n [id]=\"field()?.fieldName\"\n autocomplete=\"off\"\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()\"\n [value]=\"inputValue\"\n [formControl]=\"reactiveFormControlobject()\"\n />\n }@else {\n <input\n matInput\n autocomplete=\"off\"\n [type]=\"field()?.controlType\"\n [name]=\"field()?.fieldNameAttribute\"\n [id]=\"field()?.fieldName\"\n autocomplete=\"off\"\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()\"\n [value]=\"inputValue\"\n />\n}\n\n <div matSuffix class=\"get-otp mx-2\">\n <span class=\"mt-2\">Get OTP</span>\n </div>\n <div matSuffix class=\"verity-otp mx-2\" *ngIf=\"false\">\n <span class=\"mx-1\">Verify</span>\n </div>\n <span matSuffix class=\"mx-3\" *ngIf=\"false\">\n <img src=\"https://cdn.godigit.com/retail-life/check-circle-ou.svg\" alt=\"\" />\n </span>\n <mat-error *ngIf=\"false\">\n {{ field()?.validators?.requiredMessage }}\n </mat-error>\n</mat-form-field>\n<span class=\"success-text\" *ngIf=\"false\">Phone Number Verified</span>\n<span class=\"success-text\">\n <img src=\"https://cdn.godigit.com/retail-life/otp-circle-oui.svg\" alt=\"\" />\n OTP Sent\n</span>\n<div class=\"error-message\" *ngIf=\"false\">\n {{ field()?.validators?.requiredMessage }}.\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:0!important}.mobile-field .mat-mdc-form-field:not(.mat-form-field-disabled) .mat-mdc-floating-label.mdc-floating-label{transform:var(--mat-mdc-form-field-label-transform, translateY(-50%) translateX(calc(1 * (61.625px + var(--mat-mdc-form-field-label-offset-x, 0px)))))!important}.prefix_alternate_mobile{font-size:12px;font-weight:400;color:#8f8f8f;padding:10px 6px 10px 0;border-right:1px solid #dddddd;height:20px;width:auto;display:flex;justify-content:center;align-items:center;position:relative;cursor:pointer;transform:translate(-6px)}.countryCode{gap:4px}.get-otp{padding:4px 8px 6px 12px;background:#fb0;color:#444;font-weight:600;font-size:12px;border-radius:24px;height:24px;width:71px;display:inline-flex}*{font-family:mulish!important}.verity-otp{border-radius:24px;border:1px solid #444;background:#fff;padding:13px 8px 8px;width:58px;height:28px;font-size:12px;letter-spacing:0;font-weight:700;color:#444}.success-text{font-weight:500;color:#169f7d}.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}\n"] }]
|
|
2464
2513
|
}] });
|
|
2465
2514
|
|
|
2466
2515
|
class TagMobNumberComponent {
|
|
@@ -2470,6 +2519,9 @@ class TagMobNumberComponent {
|
|
|
2470
2519
|
reactiveFormControlobject = input();
|
|
2471
2520
|
_onChange = (inputValue) => { };
|
|
2472
2521
|
_unTouched = () => { };
|
|
2522
|
+
ngOnInit() {
|
|
2523
|
+
initializeFieldNameAttribute(this.field());
|
|
2524
|
+
}
|
|
2473
2525
|
writeValue(obj) {
|
|
2474
2526
|
this.inputValue = obj;
|
|
2475
2527
|
}
|
|
@@ -2498,7 +2550,7 @@ class TagMobNumberComponent {
|
|
|
2498
2550
|
useExisting: TagMobNumberComponent,
|
|
2499
2551
|
multi: true
|
|
2500
2552
|
}
|
|
2501
|
-
], ngImport: i0, template: "<label class=\"field-lable\" *ngIf=\"field() && field()?.isVisible && field().isShowLabel\"\n >{{ field()?.label\n }}<span style=\"color: red\" *ngIf=\"field() && field()?.validators?.isRequired\"\n\n >*</span\n ></label\n>\n<mat-form-field\n class=\"w-100 mobile-field\"\n appearance=\"outline\"\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 <div matTextPrefix class=\"prefix_alternate_mobile primary\">\n <div class=\"d-flex countryCode\">\n <span class=\"country_code_input\"> {{ CountryCode }} </span>\n <span\n ><img src=\"https://cdn.godigit.com/retail-life/down-arrow.svg\" alt=\"\"\n /></span>\n </div>\n </div>\n @if(reactiveFormControlobject()) {\n <input\n matInput\n autocomplete=\"off\"\n [type]=\"field()?.controlType\"\n [name]=\"field()?.fieldName\"\n [id]=\"field()?.fieldName\"\n autocomplete=\"off\"\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()\"\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 [id]=\"field()?.fieldName\"\n autocomplete=\"off\"\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()\"\n [value]=\"inputValue\"\n />\n}\n <mat-error *ngIf=\"false\">\n {{ field()?.validators?.requiredMessage }}\n </mat-error>\n</mat-form-field>\n<div>\n <span class=\"checkbox-tag\">Tag as:</span>\n <span *ngFor=\"let option of field()?.options\" class=\"checkbox\">\n <mat-checkbox class=\"optional-checkbox\">\n {{ option.label }}\n </mat-checkbox>\n </span>\n</div>\n<div class=\"error-message\" *ngIf=\"false\">\n {{ field()?.validators?.requiredMessage }}.\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:0!important}.mobile-field .mat-mdc-form-field:not(.mat-form-field-disabled) .mat-mdc-floating-label.mdc-floating-label{transform:var(--mat-mdc-form-field-label-transform, translateY(-50%) translateX(calc(1 * (61.625px + var(--mat-mdc-form-field-label-offset-x, 0px)))))!important}.error-message{color:red}.prefix_alternate_mobile{font-size:12px;font-weight:400;color:#8f8f8f;padding:10px 6px 10px 0;border-right:1px solid #dddddd;height:20px;width:auto;display:flex;justify-content:center;align-items:center;position:relative;cursor:pointer;transform:translate(-6px)}.countryCode{gap:4px}*{font-family:mulish!important}.checkbox-tag{font-size:10px;font-weight:700;color:#444;margin-right:5px}.checkbox{padding:4px 8px 3px 0;background:#f5f5f5;border-radius:4px;margin-right:8px}.optional-checkbox.mat-mdc-checkbox label{font-size:10px!important;font-weight:700!important;color:#444!important;padding:0!important;margin-bottom:2px}.optional-checkbox .mdc-checkbox{flex:0 0 12px!important}.optional-checkbox,.mdc-checkbox__background{transform:translate(-2px,-1px)}::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}\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.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "ngmodule", type: MatFormFieldModule }, { 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: 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.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"] }] });
|
|
2553
|
+
], ngImport: i0, template: "<label class=\"field-lable\" *ngIf=\"field() && field()?.isVisible && field().isShowLabel\"\n >{{ field()?.label\n }}<span style=\"color: red\" *ngIf=\"field() && field()?.validators?.isRequired\"\n\n >*</span\n ></label\n>\n<mat-form-field\n class=\"w-100 mobile-field\"\n appearance=\"outline\"\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 <div matTextPrefix class=\"prefix_alternate_mobile primary\">\n <div class=\"d-flex countryCode\">\n <span class=\"country_code_input\"> {{ CountryCode }} </span>\n <span\n ><img src=\"https://cdn.godigit.com/retail-life/down-arrow.svg\" alt=\"\"\n /></span>\n </div>\n </div>\n @if(reactiveFormControlobject()) {\n <input\n matInput\n autocomplete=\"off\"\n [type]=\"field()?.controlType\"\n [name]=\"field()?.fieldNameAttribute\"\n [id]=\"field()?.fieldName\"\n autocomplete=\"off\"\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()\"\n [value]=\"inputValue\"\n [formControl]=\"reactiveFormControlobject()\"\n />\n }@else {\n <input\n matInput\n autocomplete=\"off\"\n [type]=\"field()?.controlType\"\n [name]=\"field()?.fieldNameAttribute\"\n [id]=\"field()?.fieldName\"\n autocomplete=\"off\"\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()\"\n [value]=\"inputValue\"\n />\n}\n <mat-error *ngIf=\"false\">\n {{ field()?.validators?.requiredMessage }}\n </mat-error>\n</mat-form-field>\n<div>\n <span class=\"checkbox-tag\">Tag as:</span>\n <span *ngFor=\"let option of field()?.options\" class=\"checkbox\">\n <mat-checkbox class=\"optional-checkbox\">\n {{ option.label }}\n </mat-checkbox>\n </span>\n</div>\n<div class=\"error-message\" *ngIf=\"false\">\n {{ field()?.validators?.requiredMessage }}.\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:0!important}.mobile-field .mat-mdc-form-field:not(.mat-form-field-disabled) .mat-mdc-floating-label.mdc-floating-label{transform:var(--mat-mdc-form-field-label-transform, translateY(-50%) translateX(calc(1 * (61.625px + var(--mat-mdc-form-field-label-offset-x, 0px)))))!important}.error-message{color:red}.prefix_alternate_mobile{font-size:12px;font-weight:400;color:#8f8f8f;padding:10px 6px 10px 0;border-right:1px solid #dddddd;height:20px;width:auto;display:flex;justify-content:center;align-items:center;position:relative;cursor:pointer;transform:translate(-6px)}.countryCode{gap:4px}*{font-family:mulish!important}.checkbox-tag{font-size:10px;font-weight:700;color:#444;margin-right:5px}.checkbox{padding:4px 8px 3px 0;background:#f5f5f5;border-radius:4px;margin-right:8px}.optional-checkbox.mat-mdc-checkbox label{font-size:10px!important;font-weight:700!important;color:#444!important;padding:0!important;margin-bottom:2px}.optional-checkbox .mdc-checkbox{flex:0 0 12px!important}.optional-checkbox,.mdc-checkbox__background{transform:translate(-2px,-1px)}::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}\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.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "ngmodule", type: MatFormFieldModule }, { 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: 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.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"] }] });
|
|
2502
2554
|
}
|
|
2503
2555
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TagMobNumberComponent, decorators: [{
|
|
2504
2556
|
type: Component,
|
|
@@ -2514,7 +2566,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
2514
2566
|
useExisting: TagMobNumberComponent,
|
|
2515
2567
|
multi: true
|
|
2516
2568
|
}
|
|
2517
|
-
], template: "<label class=\"field-lable\" *ngIf=\"field() && field()?.isVisible && field().isShowLabel\"\n >{{ field()?.label\n }}<span style=\"color: red\" *ngIf=\"field() && field()?.validators?.isRequired\"\n\n >*</span\n ></label\n>\n<mat-form-field\n class=\"w-100 mobile-field\"\n appearance=\"outline\"\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 <div matTextPrefix class=\"prefix_alternate_mobile primary\">\n <div class=\"d-flex countryCode\">\n <span class=\"country_code_input\"> {{ CountryCode }} </span>\n <span\n ><img src=\"https://cdn.godigit.com/retail-life/down-arrow.svg\" alt=\"\"\n /></span>\n </div>\n </div>\n @if(reactiveFormControlobject()) {\n <input\n matInput\n autocomplete=\"off\"\n [type]=\"field()?.controlType\"\n [name]=\"field()?.
|
|
2569
|
+
], template: "<label class=\"field-lable\" *ngIf=\"field() && field()?.isVisible && field().isShowLabel\"\n >{{ field()?.label\n }}<span style=\"color: red\" *ngIf=\"field() && field()?.validators?.isRequired\"\n\n >*</span\n ></label\n>\n<mat-form-field\n class=\"w-100 mobile-field\"\n appearance=\"outline\"\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 <div matTextPrefix class=\"prefix_alternate_mobile primary\">\n <div class=\"d-flex countryCode\">\n <span class=\"country_code_input\"> {{ CountryCode }} </span>\n <span\n ><img src=\"https://cdn.godigit.com/retail-life/down-arrow.svg\" alt=\"\"\n /></span>\n </div>\n </div>\n @if(reactiveFormControlobject()) {\n <input\n matInput\n autocomplete=\"off\"\n [type]=\"field()?.controlType\"\n [name]=\"field()?.fieldNameAttribute\"\n [id]=\"field()?.fieldName\"\n autocomplete=\"off\"\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()\"\n [value]=\"inputValue\"\n [formControl]=\"reactiveFormControlobject()\"\n />\n }@else {\n <input\n matInput\n autocomplete=\"off\"\n [type]=\"field()?.controlType\"\n [name]=\"field()?.fieldNameAttribute\"\n [id]=\"field()?.fieldName\"\n autocomplete=\"off\"\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()\"\n [value]=\"inputValue\"\n />\n}\n <mat-error *ngIf=\"false\">\n {{ field()?.validators?.requiredMessage }}\n </mat-error>\n</mat-form-field>\n<div>\n <span class=\"checkbox-tag\">Tag as:</span>\n <span *ngFor=\"let option of field()?.options\" class=\"checkbox\">\n <mat-checkbox class=\"optional-checkbox\">\n {{ option.label }}\n </mat-checkbox>\n </span>\n</div>\n<div class=\"error-message\" *ngIf=\"false\">\n {{ field()?.validators?.requiredMessage }}.\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:0!important}.mobile-field .mat-mdc-form-field:not(.mat-form-field-disabled) .mat-mdc-floating-label.mdc-floating-label{transform:var(--mat-mdc-form-field-label-transform, translateY(-50%) translateX(calc(1 * (61.625px + var(--mat-mdc-form-field-label-offset-x, 0px)))))!important}.error-message{color:red}.prefix_alternate_mobile{font-size:12px;font-weight:400;color:#8f8f8f;padding:10px 6px 10px 0;border-right:1px solid #dddddd;height:20px;width:auto;display:flex;justify-content:center;align-items:center;position:relative;cursor:pointer;transform:translate(-6px)}.countryCode{gap:4px}*{font-family:mulish!important}.checkbox-tag{font-size:10px;font-weight:700;color:#444;margin-right:5px}.checkbox{padding:4px 8px 3px 0;background:#f5f5f5;border-radius:4px;margin-right:8px}.optional-checkbox.mat-mdc-checkbox label{font-size:10px!important;font-weight:700!important;color:#444!important;padding:0!important;margin-bottom:2px}.optional-checkbox .mdc-checkbox{flex:0 0 12px!important}.optional-checkbox,.mdc-checkbox__background{transform:translate(-2px,-1px)}::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}\n"] }]
|
|
2518
2570
|
}] });
|
|
2519
2571
|
|
|
2520
2572
|
class AgeDateComponent {
|
|
@@ -2530,6 +2582,9 @@ class AgeDateComponent {
|
|
|
2530
2582
|
constructor(service) {
|
|
2531
2583
|
this.service = service;
|
|
2532
2584
|
}
|
|
2585
|
+
ngOnInit() {
|
|
2586
|
+
initializeFieldNameAttribute(this.field());
|
|
2587
|
+
}
|
|
2533
2588
|
ngAfterViewChecked() {
|
|
2534
2589
|
if (this.inputValue) {
|
|
2535
2590
|
this.calculateAge(this.inputValue);
|
|
@@ -2698,7 +2753,7 @@ class AgeDateComponent {
|
|
|
2698
2753
|
useExisting: AgeDateComponent,
|
|
2699
2754
|
multi: true
|
|
2700
2755
|
},
|
|
2701
|
-
], ngImport: i0, template: "<label *ngIf=\"field() && field()?.isVisible && field()?.isShowLabel\" class=\"field-lable\">{{field()?.label}}<span style=\"color: red;\" *ngIf=\"field() && field()?.validators?.isRequired\">*</span></label>\n<mat-form-field\n class=\"w-100\"\n appearance=\"outline\"\n *ngIf=\"field() && field()?.isVisible\"\n [ngStyle]=\"{\n'--custom-border-color': field()?.controlStyle?.borderColor ,\n'--custom-border-width': field()?.controlStyle?.borderWidth ,\n'--custom-border-radius': field()?.controlStyle?.borderRadius ,\n'--custom-bg-color': field()?.controlStyle?.background ,\n'--custom-border-color-focus': field()?.controlStyle?.focusBorderColor ,\n'--custom-border-width-focus': field()?.controlStyle?.focusBorderWidth ,\n'--custom-bg-color-focus': field()?.controlStyle?.focusBackground ,\n'--custom-border-color-hover': field()?.controlStyle?.hoverBorderColor ,\n'--custom-border-width-hover': field()?.controlStyle?.hoverBorderWidth ,\n'--custom-border-color-error': field()?.controlStyle?.errorBorderColor ,\n'--custom-border-width-error': field()?.controlStyle?.errorBorderWidth ,\n'--custom-font-size': field()?.controlStyle?.fontSize ,\n'--custom-font-weight': field()?.controlStyle?.fontWeight ,\n'--custom-font-family': field()?.controlStyle?.fontFamily ,\n'--custom-font-color': field()?.controlStyle?.color ,\n'--custom-caret-color': field()?.controlStyle?.caretColor ,\n'--custom-font-color-disabled' : field()?.controlStyle?.disableColor ,\n'--custom-bg-color-disabled' : field()?.controlStyle?.disableBackground ,\n}\">\n @if(reactiveFormControlobject()) {\n <input\n matInput\n autocomplete=\"off\"\n [type]=\"field()?.controlType\"\n [name]=\"field()?.fieldName\"\n [id]=\"field()?.fieldName\"\n [placeholder]=\"field()?.placeHolder\"\n [required]=\"field()?.validators?.isRequired\"\n [pattern]=\"field()?.validators?.pattern\"\n [matDatepicker]=\"picker\"\n (input)=\"dateDivisionFormat($event)\"\n [disabled]=\"field()?.isDisable\"\n [min]=\"field()?.configData?.min\"\n [max]=\"field()?.configData?.max\"\n (dateChange)=\"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 [id]=\"field()?.fieldName\"\n [placeholder]=\"field()?.placeHolder\"\n [required]=\"field()?.validators?.isRequired\"\n [pattern]=\"field()?.validators?.pattern\"\n [matDatepicker]=\"picker\"\n [min]=\"field()?.configData?.min\"\n [max]=\"field()?.configData?.max\"\n (input)=\"dateDivisionFormat($event)\"\n [disabled]=\"field()?.isDisable\"\n (dateChange)=\"onInputChange($event)\"\n (blur)=\"onInputBlur($event)\"\n [value]=\"inputValue\"\n />\n }\n <span matSuffix class=\"right-date-text\" *ngIf=\"!this.service.checkIfValueIsEmpty(age) && !this.service.checkIfValueIsEmpty(inputValue) && age >= 0\">\n ({{ age }}) yrs\n </span>\n <mat-datepicker-toggle matSuffix [for]=\"picker\" *ngIf=\"!field()?.isDisable\">\n <img\n src=\"https://cdn.godigit.com/digitPlusAssets/retail-life-icon/svgicon/date_picker_icon.svg\"\n style=\"width: 16px\"\n matDatepickerToggleIcon\n />\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=\"false\">\n {{ field()?.validators?.patternMessage }}.\n</div>\n", styles: [".field-lable{font-size:12px!important;font-weight:700!important;color:#444!important;margin-bottom:0}.right-date-text{padding:4px 8px;border-radius:4px;font-weight:600;font-size:12px;color:#444;background:#f5f5f5;margin-right:8px;display:inline-flex;align-items:center;vertical-align:middle;height:20px;white-space:nowrap!important}::ng-deep .mat-mdc-form-field-icon-suffix{display:inline-flex!important;align-items:center!important;gap:0px!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-weight:var(--custom-font-weight, 400)!important;font-family:var(--custom-font-family, \"Mulish\")!important;color:var(--custom-font-color, #444444)!important;font-size:12px!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}\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"] }] });
|
|
2756
|
+
], ngImport: i0, template: "<label *ngIf=\"field() && field()?.isVisible && field()?.isShowLabel\" class=\"field-lable\">{{field()?.label}}<span style=\"color: red;\" *ngIf=\"field() && field()?.validators?.isRequired\">*</span></label>\n<mat-form-field\n class=\"w-100\"\n appearance=\"outline\"\n *ngIf=\"field() && field()?.isVisible\"\n [ngStyle]=\"{\n'--custom-border-color': field()?.controlStyle?.borderColor ,\n'--custom-border-width': field()?.controlStyle?.borderWidth ,\n'--custom-border-radius': field()?.controlStyle?.borderRadius ,\n'--custom-bg-color': field()?.controlStyle?.background ,\n'--custom-border-color-focus': field()?.controlStyle?.focusBorderColor ,\n'--custom-border-width-focus': field()?.controlStyle?.focusBorderWidth ,\n'--custom-bg-color-focus': field()?.controlStyle?.focusBackground ,\n'--custom-border-color-hover': field()?.controlStyle?.hoverBorderColor ,\n'--custom-border-width-hover': field()?.controlStyle?.hoverBorderWidth ,\n'--custom-border-color-error': field()?.controlStyle?.errorBorderColor ,\n'--custom-border-width-error': field()?.controlStyle?.errorBorderWidth ,\n'--custom-font-size': field()?.controlStyle?.fontSize ,\n'--custom-font-weight': field()?.controlStyle?.fontWeight ,\n'--custom-font-family': field()?.controlStyle?.fontFamily ,\n'--custom-font-color': field()?.controlStyle?.color ,\n'--custom-caret-color': field()?.controlStyle?.caretColor ,\n'--custom-font-color-disabled' : field()?.controlStyle?.disableColor ,\n'--custom-bg-color-disabled' : field()?.controlStyle?.disableBackground ,\n}\">\n @if(reactiveFormControlobject()) {\n <input\n matInput\n autocomplete=\"off\"\n [type]=\"field()?.controlType\"\n [name]=\"field()?.fieldNameAttribute\"\n [id]=\"field()?.fieldName\"\n [placeholder]=\"field()?.placeHolder\"\n [required]=\"field()?.validators?.isRequired\"\n [pattern]=\"field()?.validators?.pattern\"\n [matDatepicker]=\"picker\"\n (input)=\"dateDivisionFormat($event)\"\n [disabled]=\"field()?.isDisable\"\n [min]=\"field()?.configData?.min\"\n [max]=\"field()?.configData?.max\"\n (dateChange)=\"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()?.fieldNameAttribute\"\n [id]=\"field()?.fieldName\"\n [placeholder]=\"field()?.placeHolder\"\n [required]=\"field()?.validators?.isRequired\"\n [pattern]=\"field()?.validators?.pattern\"\n [matDatepicker]=\"picker\"\n [min]=\"field()?.configData?.min\"\n [max]=\"field()?.configData?.max\"\n (input)=\"dateDivisionFormat($event)\"\n [disabled]=\"field()?.isDisable\"\n (dateChange)=\"onInputChange($event)\"\n (blur)=\"onInputBlur($event)\"\n [value]=\"inputValue\"\n />\n }\n <span matSuffix class=\"right-date-text\" *ngIf=\"!this.service.checkIfValueIsEmpty(age) && !this.service.checkIfValueIsEmpty(inputValue) && age >= 0\">\n ({{ age }}) yrs\n </span>\n <mat-datepicker-toggle matSuffix [for]=\"picker\" *ngIf=\"!field()?.isDisable\">\n <img\n src=\"https://cdn.godigit.com/digitPlusAssets/retail-life-icon/svgicon/date_picker_icon.svg\"\n style=\"width: 16px\"\n matDatepickerToggleIcon\n />\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=\"false\">\n {{ field()?.validators?.patternMessage }}.\n</div>\n", styles: [".field-lable{font-size:12px!important;font-weight:700!important;color:#444!important;margin-bottom:0}.right-date-text{padding:4px 8px;border-radius:4px;font-weight:600;font-size:12px;color:#444;background:#f5f5f5;margin-right:8px;display:inline-flex;align-items:center;vertical-align:middle;height:20px;white-space:nowrap!important}::ng-deep .mat-mdc-form-field-icon-suffix{display:inline-flex!important;align-items:center!important;gap:0px!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-weight:var(--custom-font-weight, 400)!important;font-family:var(--custom-font-family, \"Mulish\")!important;color:var(--custom-font-color, #444444)!important;font-size:12px!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}\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"] }] });
|
|
2702
2757
|
}
|
|
2703
2758
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AgeDateComponent, decorators: [{
|
|
2704
2759
|
type: Component,
|
|
@@ -2734,7 +2789,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
2734
2789
|
useExisting: AgeDateComponent,
|
|
2735
2790
|
multi: true
|
|
2736
2791
|
},
|
|
2737
|
-
], template: "<label *ngIf=\"field() && field()?.isVisible && field()?.isShowLabel\" class=\"field-lable\">{{field()?.label}}<span style=\"color: red;\" *ngIf=\"field() && field()?.validators?.isRequired\">*</span></label>\n<mat-form-field\n class=\"w-100\"\n appearance=\"outline\"\n *ngIf=\"field() && field()?.isVisible\"\n [ngStyle]=\"{\n'--custom-border-color': field()?.controlStyle?.borderColor ,\n'--custom-border-width': field()?.controlStyle?.borderWidth ,\n'--custom-border-radius': field()?.controlStyle?.borderRadius ,\n'--custom-bg-color': field()?.controlStyle?.background ,\n'--custom-border-color-focus': field()?.controlStyle?.focusBorderColor ,\n'--custom-border-width-focus': field()?.controlStyle?.focusBorderWidth ,\n'--custom-bg-color-focus': field()?.controlStyle?.focusBackground ,\n'--custom-border-color-hover': field()?.controlStyle?.hoverBorderColor ,\n'--custom-border-width-hover': field()?.controlStyle?.hoverBorderWidth ,\n'--custom-border-color-error': field()?.controlStyle?.errorBorderColor ,\n'--custom-border-width-error': field()?.controlStyle?.errorBorderWidth ,\n'--custom-font-size': field()?.controlStyle?.fontSize ,\n'--custom-font-weight': field()?.controlStyle?.fontWeight ,\n'--custom-font-family': field()?.controlStyle?.fontFamily ,\n'--custom-font-color': field()?.controlStyle?.color ,\n'--custom-caret-color': field()?.controlStyle?.caretColor ,\n'--custom-font-color-disabled' : field()?.controlStyle?.disableColor ,\n'--custom-bg-color-disabled' : field()?.controlStyle?.disableBackground ,\n}\">\n @if(reactiveFormControlobject()) {\n <input\n matInput\n autocomplete=\"off\"\n [type]=\"field()?.controlType\"\n [name]=\"field()?.
|
|
2792
|
+
], template: "<label *ngIf=\"field() && field()?.isVisible && field()?.isShowLabel\" class=\"field-lable\">{{field()?.label}}<span style=\"color: red;\" *ngIf=\"field() && field()?.validators?.isRequired\">*</span></label>\n<mat-form-field\n class=\"w-100\"\n appearance=\"outline\"\n *ngIf=\"field() && field()?.isVisible\"\n [ngStyle]=\"{\n'--custom-border-color': field()?.controlStyle?.borderColor ,\n'--custom-border-width': field()?.controlStyle?.borderWidth ,\n'--custom-border-radius': field()?.controlStyle?.borderRadius ,\n'--custom-bg-color': field()?.controlStyle?.background ,\n'--custom-border-color-focus': field()?.controlStyle?.focusBorderColor ,\n'--custom-border-width-focus': field()?.controlStyle?.focusBorderWidth ,\n'--custom-bg-color-focus': field()?.controlStyle?.focusBackground ,\n'--custom-border-color-hover': field()?.controlStyle?.hoverBorderColor ,\n'--custom-border-width-hover': field()?.controlStyle?.hoverBorderWidth ,\n'--custom-border-color-error': field()?.controlStyle?.errorBorderColor ,\n'--custom-border-width-error': field()?.controlStyle?.errorBorderWidth ,\n'--custom-font-size': field()?.controlStyle?.fontSize ,\n'--custom-font-weight': field()?.controlStyle?.fontWeight ,\n'--custom-font-family': field()?.controlStyle?.fontFamily ,\n'--custom-font-color': field()?.controlStyle?.color ,\n'--custom-caret-color': field()?.controlStyle?.caretColor ,\n'--custom-font-color-disabled' : field()?.controlStyle?.disableColor ,\n'--custom-bg-color-disabled' : field()?.controlStyle?.disableBackground ,\n}\">\n @if(reactiveFormControlobject()) {\n <input\n matInput\n autocomplete=\"off\"\n [type]=\"field()?.controlType\"\n [name]=\"field()?.fieldNameAttribute\"\n [id]=\"field()?.fieldName\"\n [placeholder]=\"field()?.placeHolder\"\n [required]=\"field()?.validators?.isRequired\"\n [pattern]=\"field()?.validators?.pattern\"\n [matDatepicker]=\"picker\"\n (input)=\"dateDivisionFormat($event)\"\n [disabled]=\"field()?.isDisable\"\n [min]=\"field()?.configData?.min\"\n [max]=\"field()?.configData?.max\"\n (dateChange)=\"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()?.fieldNameAttribute\"\n [id]=\"field()?.fieldName\"\n [placeholder]=\"field()?.placeHolder\"\n [required]=\"field()?.validators?.isRequired\"\n [pattern]=\"field()?.validators?.pattern\"\n [matDatepicker]=\"picker\"\n [min]=\"field()?.configData?.min\"\n [max]=\"field()?.configData?.max\"\n (input)=\"dateDivisionFormat($event)\"\n [disabled]=\"field()?.isDisable\"\n (dateChange)=\"onInputChange($event)\"\n (blur)=\"onInputBlur($event)\"\n [value]=\"inputValue\"\n />\n }\n <span matSuffix class=\"right-date-text\" *ngIf=\"!this.service.checkIfValueIsEmpty(age) && !this.service.checkIfValueIsEmpty(inputValue) && age >= 0\">\n ({{ age }}) yrs\n </span>\n <mat-datepicker-toggle matSuffix [for]=\"picker\" *ngIf=\"!field()?.isDisable\">\n <img\n src=\"https://cdn.godigit.com/digitPlusAssets/retail-life-icon/svgicon/date_picker_icon.svg\"\n style=\"width: 16px\"\n matDatepickerToggleIcon\n />\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=\"false\">\n {{ field()?.validators?.patternMessage }}.\n</div>\n", styles: [".field-lable{font-size:12px!important;font-weight:700!important;color:#444!important;margin-bottom:0}.right-date-text{padding:4px 8px;border-radius:4px;font-weight:600;font-size:12px;color:#444;background:#f5f5f5;margin-right:8px;display:inline-flex;align-items:center;vertical-align:middle;height:20px;white-space:nowrap!important}::ng-deep .mat-mdc-form-field-icon-suffix{display:inline-flex!important;align-items:center!important;gap:0px!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-weight:var(--custom-font-weight, 400)!important;font-family:var(--custom-font-family, \"Mulish\")!important;color:var(--custom-font-color, #444444)!important;font-size:12px!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}\n"] }]
|
|
2738
2793
|
}], ctorParameters: () => [{ type: MasterControlService }], propDecorators: { blur: [{
|
|
2739
2794
|
type: Output
|
|
2740
2795
|
}], valueChange: [{
|
|
@@ -2763,6 +2818,9 @@ class InfoTextboxComponent {
|
|
|
2763
2818
|
infoClick = new EventEmitter();
|
|
2764
2819
|
_onChange = (inputValue) => { };
|
|
2765
2820
|
_unTouched = () => { };
|
|
2821
|
+
ngOnInit() {
|
|
2822
|
+
initializeFieldNameAttribute(this.field());
|
|
2823
|
+
}
|
|
2766
2824
|
writeValue(obj) {
|
|
2767
2825
|
this.inputValue = obj;
|
|
2768
2826
|
}
|
|
@@ -2794,7 +2852,7 @@ class InfoTextboxComponent {
|
|
|
2794
2852
|
useExisting: InfoTextboxComponent,
|
|
2795
2853
|
multi: true
|
|
2796
2854
|
}
|
|
2797
|
-
], ngImport: i0, template: "<label class=\"field-lable info-label\" *ngIf=\"field() && field()?.isVisible && field().isShowLabel\"\n >{{ field()?.label\n }}\n <!-- <span style=\"color: red\" *ngIf=\"field() && field()?.validators?.isRequired\"\n >*</span\n > -->\n <span style=\"justify-content: end;\">\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></span>\n </label\n>\n<mat-form-field\n class=\"w-100\"\n appearance=\"outline\"\n *ngIf=\"field() && field()?.isVisible\"\n [ngStyle]=\"{\n'--custom-border-color': field()?.controlStyle?.borderColor ,\n'--custom-border-width': field()?.controlStyle?.borderWidth ,\n'--custom-border-radius': field()?.controlStyle?.borderRadius ,\n'--custom-bg-color': field()?.controlStyle?.background ,\n'--custom-border-color-focus': field()?.controlStyle?.focusBorderColor ,\n'--custom-border-width-focus': field()?.controlStyle?.focusBorderWidth ,\n'--custom-bg-color-focus': field()?.controlStyle?.focusBackground ,\n'--custom-border-color-hover': field()?.controlStyle?.hoverBorderColor ,\n'--custom-border-width-hover': field()?.controlStyle?.hoverBorderWidth ,\n'--custom-border-color-error': field()?.controlStyle?.errorBorderColor ,\n'--custom-border-width-error': field()?.controlStyle?.errorBorderWidth ,\n'--custom-font-size': field()?.controlStyle?.fontSize ,\n'--custom-font-weight': field()?.controlStyle?.fontWeight ,\n'--custom-font-family': field()?.controlStyle?.fontFamily ,\n'--custom-font-color': field()?.controlStyle?.color ,\n'--custom-caret-color': field()?.controlStyle?.caretColor ,\n'--custom-font-color-disabled' : field()?.controlStyle?.disableColor ,\n'--custom-bg-color-disabled' : field()?.controlStyle?.disableBackground ,\n}\"\n>\n @if(reactiveFormControlobject()) {\n<input\n matInput\n autocomplete=\"off\"\n [type]=\"field()?.controlType\"\n [name]=\"field()?.
|
|
2855
|
+
], ngImport: i0, template: "<label class=\"field-lable info-label\" *ngIf=\"field() && field()?.isVisible && field().isShowLabel\"\n >{{ field()?.label\n }}\n <!-- <span style=\"color: red\" *ngIf=\"field() && field()?.validators?.isRequired\"\n >*</span\n > -->\n <span style=\"justify-content: end;\">\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></span>\n </label\n>\n<mat-form-field\n class=\"w-100\"\n appearance=\"outline\"\n *ngIf=\"field() && field()?.isVisible\"\n [ngStyle]=\"{\n'--custom-border-color': field()?.controlStyle?.borderColor ,\n'--custom-border-width': field()?.controlStyle?.borderWidth ,\n'--custom-border-radius': field()?.controlStyle?.borderRadius ,\n'--custom-bg-color': field()?.controlStyle?.background ,\n'--custom-border-color-focus': field()?.controlStyle?.focusBorderColor ,\n'--custom-border-width-focus': field()?.controlStyle?.focusBorderWidth ,\n'--custom-bg-color-focus': field()?.controlStyle?.focusBackground ,\n'--custom-border-color-hover': field()?.controlStyle?.hoverBorderColor ,\n'--custom-border-width-hover': field()?.controlStyle?.hoverBorderWidth ,\n'--custom-border-color-error': field()?.controlStyle?.errorBorderColor ,\n'--custom-border-width-error': field()?.controlStyle?.errorBorderWidth ,\n'--custom-font-size': field()?.controlStyle?.fontSize ,\n'--custom-font-weight': field()?.controlStyle?.fontWeight ,\n'--custom-font-family': field()?.controlStyle?.fontFamily ,\n'--custom-font-color': field()?.controlStyle?.color ,\n'--custom-caret-color': field()?.controlStyle?.caretColor ,\n'--custom-font-color-disabled' : field()?.controlStyle?.disableColor ,\n'--custom-bg-color-disabled' : field()?.controlStyle?.disableBackground ,\n}\"\n>\n @if(reactiveFormControlobject()) {\n<input\n matInput\n autocomplete=\"off\"\n [type]=\"field()?.controlType\"\n [name]=\"field()?.fieldNameAttribute\"\n [id]=\"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()\"\n [value]=\"inputValue\"\n [formControl]=\"reactiveFormControlobject()\"\n />\n }@else {\n <input\n matInput\n autocomplete=\"off\"\n [type]=\"field()?.controlType\"\n [name]=\"field()?.fieldNameAttribute\"\n [id]=\"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()\"\n [value]=\"inputValue\"\n />\n }\n\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=\"false\">\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}.info-label{display:flex;justify-content:space-between}.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}\n"], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { 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: "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: 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: "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"] }] });
|
|
2798
2856
|
}
|
|
2799
2857
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: InfoTextboxComponent, decorators: [{
|
|
2800
2858
|
type: Component,
|
|
@@ -2809,7 +2867,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
2809
2867
|
useExisting: InfoTextboxComponent,
|
|
2810
2868
|
multi: true
|
|
2811
2869
|
}
|
|
2812
|
-
], template: "<label class=\"field-lable info-label\" *ngIf=\"field() && field()?.isVisible && field().isShowLabel\"\n >{{ field()?.label\n }}\n <!-- <span style=\"color: red\" *ngIf=\"field() && field()?.validators?.isRequired\"\n >*</span\n > -->\n <span style=\"justify-content: end;\">\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></span>\n </label\n>\n<mat-form-field\n class=\"w-100\"\n appearance=\"outline\"\n *ngIf=\"field() && field()?.isVisible\"\n [ngStyle]=\"{\n'--custom-border-color': field()?.controlStyle?.borderColor ,\n'--custom-border-width': field()?.controlStyle?.borderWidth ,\n'--custom-border-radius': field()?.controlStyle?.borderRadius ,\n'--custom-bg-color': field()?.controlStyle?.background ,\n'--custom-border-color-focus': field()?.controlStyle?.focusBorderColor ,\n'--custom-border-width-focus': field()?.controlStyle?.focusBorderWidth ,\n'--custom-bg-color-focus': field()?.controlStyle?.focusBackground ,\n'--custom-border-color-hover': field()?.controlStyle?.hoverBorderColor ,\n'--custom-border-width-hover': field()?.controlStyle?.hoverBorderWidth ,\n'--custom-border-color-error': field()?.controlStyle?.errorBorderColor ,\n'--custom-border-width-error': field()?.controlStyle?.errorBorderWidth ,\n'--custom-font-size': field()?.controlStyle?.fontSize ,\n'--custom-font-weight': field()?.controlStyle?.fontWeight ,\n'--custom-font-family': field()?.controlStyle?.fontFamily ,\n'--custom-font-color': field()?.controlStyle?.color ,\n'--custom-caret-color': field()?.controlStyle?.caretColor ,\n'--custom-font-color-disabled' : field()?.controlStyle?.disableColor ,\n'--custom-bg-color-disabled' : field()?.controlStyle?.disableBackground ,\n}\"\n>\n @if(reactiveFormControlobject()) {\n<input\n matInput\n autocomplete=\"off\"\n [type]=\"field()?.controlType\"\n [name]=\"field()?.
|
|
2870
|
+
], template: "<label class=\"field-lable info-label\" *ngIf=\"field() && field()?.isVisible && field().isShowLabel\"\n >{{ field()?.label\n }}\n <!-- <span style=\"color: red\" *ngIf=\"field() && field()?.validators?.isRequired\"\n >*</span\n > -->\n <span style=\"justify-content: end;\">\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></span>\n </label\n>\n<mat-form-field\n class=\"w-100\"\n appearance=\"outline\"\n *ngIf=\"field() && field()?.isVisible\"\n [ngStyle]=\"{\n'--custom-border-color': field()?.controlStyle?.borderColor ,\n'--custom-border-width': field()?.controlStyle?.borderWidth ,\n'--custom-border-radius': field()?.controlStyle?.borderRadius ,\n'--custom-bg-color': field()?.controlStyle?.background ,\n'--custom-border-color-focus': field()?.controlStyle?.focusBorderColor ,\n'--custom-border-width-focus': field()?.controlStyle?.focusBorderWidth ,\n'--custom-bg-color-focus': field()?.controlStyle?.focusBackground ,\n'--custom-border-color-hover': field()?.controlStyle?.hoverBorderColor ,\n'--custom-border-width-hover': field()?.controlStyle?.hoverBorderWidth ,\n'--custom-border-color-error': field()?.controlStyle?.errorBorderColor ,\n'--custom-border-width-error': field()?.controlStyle?.errorBorderWidth ,\n'--custom-font-size': field()?.controlStyle?.fontSize ,\n'--custom-font-weight': field()?.controlStyle?.fontWeight ,\n'--custom-font-family': field()?.controlStyle?.fontFamily ,\n'--custom-font-color': field()?.controlStyle?.color ,\n'--custom-caret-color': field()?.controlStyle?.caretColor ,\n'--custom-font-color-disabled' : field()?.controlStyle?.disableColor ,\n'--custom-bg-color-disabled' : field()?.controlStyle?.disableBackground ,\n}\"\n>\n @if(reactiveFormControlobject()) {\n<input\n matInput\n autocomplete=\"off\"\n [type]=\"field()?.controlType\"\n [name]=\"field()?.fieldNameAttribute\"\n [id]=\"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()\"\n [value]=\"inputValue\"\n [formControl]=\"reactiveFormControlobject()\"\n />\n }@else {\n <input\n matInput\n autocomplete=\"off\"\n [type]=\"field()?.controlType\"\n [name]=\"field()?.fieldNameAttribute\"\n [id]=\"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()\"\n [value]=\"inputValue\"\n />\n }\n\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=\"false\">\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}.info-label{display:flex;justify-content:space-between}.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}\n"] }]
|
|
2813
2871
|
}], propDecorators: { fields: [{
|
|
2814
2872
|
type: Input
|
|
2815
2873
|
}], infoClick: [{
|
|
@@ -2824,6 +2882,9 @@ class TextboxWithImageComponent {
|
|
|
2824
2882
|
_unTouched = () => { };
|
|
2825
2883
|
// Declare Output event emitter here (class level)
|
|
2826
2884
|
blur = new EventEmitter();
|
|
2885
|
+
ngOnInit() {
|
|
2886
|
+
initializeFieldNameAttribute(this.field());
|
|
2887
|
+
}
|
|
2827
2888
|
writeValue(obj) {
|
|
2828
2889
|
this.inputValue = obj;
|
|
2829
2890
|
}
|
|
@@ -2857,7 +2918,7 @@ class TextboxWithImageComponent {
|
|
|
2857
2918
|
useExisting: TextboxWithImageComponent,
|
|
2858
2919
|
multi: true
|
|
2859
2920
|
}
|
|
2860
|
-
], ngImport: i0, template: "<label class=\"field-lable\" *ngIf=\"field() && field()?.isVisible && field().isShowLabel\"\n >{{ field()?.label\n }}<span style=\"color: red\" *ngIf=\"field() && field()?.validators?.isRequired\"\n >*</span\n ></label\n>\n<mat-form-field\n class=\"w-100\"\n appearance=\"outline\"\n *ngIf=\"field() && field()?.isVisible\"\n [ngStyle]=\"{\n'--custom-border-color': field()?.controlStyle?.borderColor ,\n'--custom-border-width': field()?.controlStyle?.borderWidth ,\n'--custom-border-radius': field()?.controlStyle?.borderRadius ,\n'--custom-bg-color': field()?.controlStyle?.background ,\n'--custom-border-color-focus': field()?.controlStyle?.focusBorderColor ,\n'--custom-border-width-focus': field()?.controlStyle?.focusBorderWidth ,\n'--custom-bg-color-focus': field()?.controlStyle?.focusBackground ,\n'--custom-border-color-hover': field()?.controlStyle?.hoverBorderColor ,\n'--custom-border-width-hover': field()?.controlStyle?.hoverBorderWidth ,\n'--custom-border-color-error': field()?.controlStyle?.errorBorderColor ,\n'--custom-border-width-error': field()?.controlStyle?.errorBorderWidth ,\n'--custom-font-size': field()?.controlStyle?.fontSize ,\n'--custom-font-weight': field()?.controlStyle?.fontWeight ,\n'--custom-font-family': field()?.controlStyle?.fontFamily ,\n'--custom-font-color': field()?.controlStyle?.color ,\n'--custom-caret-color': field()?.controlStyle?.caretColor ,\n'--custom-font-color-disabled' : field()?.controlStyle?.disableColor ,\n'--custom-bg-color-disabled' : field()?.controlStyle?.disableBackground ,\n}\"\n>\n@if(reactiveFormControlobject()) {\n<input\n matInput\n autocomplete=\"off\"\n [type]=\"field()?.controlType\"\n [name]=\"field()?.
|
|
2921
|
+
], ngImport: i0, template: "<label class=\"field-lable\" *ngIf=\"field() && field()?.isVisible && field().isShowLabel\"\n >{{ field()?.label\n }}<span style=\"color: red\" *ngIf=\"field() && field()?.validators?.isRequired\"\n >*</span\n ></label\n>\n<mat-form-field\n class=\"w-100\"\n appearance=\"outline\"\n *ngIf=\"field() && field()?.isVisible\"\n [ngStyle]=\"{\n'--custom-border-color': field()?.controlStyle?.borderColor ,\n'--custom-border-width': field()?.controlStyle?.borderWidth ,\n'--custom-border-radius': field()?.controlStyle?.borderRadius ,\n'--custom-bg-color': field()?.controlStyle?.background ,\n'--custom-border-color-focus': field()?.controlStyle?.focusBorderColor ,\n'--custom-border-width-focus': field()?.controlStyle?.focusBorderWidth ,\n'--custom-bg-color-focus': field()?.controlStyle?.focusBackground ,\n'--custom-border-color-hover': field()?.controlStyle?.hoverBorderColor ,\n'--custom-border-width-hover': field()?.controlStyle?.hoverBorderWidth ,\n'--custom-border-color-error': field()?.controlStyle?.errorBorderColor ,\n'--custom-border-width-error': field()?.controlStyle?.errorBorderWidth ,\n'--custom-font-size': field()?.controlStyle?.fontSize ,\n'--custom-font-weight': field()?.controlStyle?.fontWeight ,\n'--custom-font-family': field()?.controlStyle?.fontFamily ,\n'--custom-font-color': field()?.controlStyle?.color ,\n'--custom-caret-color': field()?.controlStyle?.caretColor ,\n'--custom-font-color-disabled' : field()?.controlStyle?.disableColor ,\n'--custom-bg-color-disabled' : field()?.controlStyle?.disableBackground ,\n}\"\n>\n@if(reactiveFormControlobject()) {\n<input\n matInput\n autocomplete=\"off\"\n [type]=\"field()?.controlType\"\n [name]=\"field()?.fieldNameAttribute\"\n [id]=\"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()?.fieldNameAttribute\"\n [id]=\"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\n <span matSuffix class=\"mx-3\">\n @if(field()?.configData?.isDisabledInputEdit) {\n @if(field()?.isDisable) {\n <img style=\"cursor:pointer\" *ngIf=\"field()?.imageUrl\" [src]='field().imageUrl' alt=\"\" (click)=\"enableField()\" />\n }\n } @else {\n <img *ngIf=\"field()?.imageUrl\" [src]='field().imageUrl' alt=\"\" />\n }\n <!-- \"https://cdn.godigit.com/retail-life/location.svg\" -->\n </span>\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=\"false\">\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}*{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}\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: 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: "directive", type: i4.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
|
|
2861
2922
|
}
|
|
2862
2923
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TextboxWithImageComponent, decorators: [{
|
|
2863
2924
|
type: Component,
|
|
@@ -2867,7 +2928,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
2867
2928
|
useExisting: TextboxWithImageComponent,
|
|
2868
2929
|
multi: true
|
|
2869
2930
|
}
|
|
2870
|
-
], template: "<label class=\"field-lable\" *ngIf=\"field() && field()?.isVisible && field().isShowLabel\"\n >{{ field()?.label\n }}<span style=\"color: red\" *ngIf=\"field() && field()?.validators?.isRequired\"\n >*</span\n ></label\n>\n<mat-form-field\n class=\"w-100\"\n appearance=\"outline\"\n *ngIf=\"field() && field()?.isVisible\"\n [ngStyle]=\"{\n'--custom-border-color': field()?.controlStyle?.borderColor ,\n'--custom-border-width': field()?.controlStyle?.borderWidth ,\n'--custom-border-radius': field()?.controlStyle?.borderRadius ,\n'--custom-bg-color': field()?.controlStyle?.background ,\n'--custom-border-color-focus': field()?.controlStyle?.focusBorderColor ,\n'--custom-border-width-focus': field()?.controlStyle?.focusBorderWidth ,\n'--custom-bg-color-focus': field()?.controlStyle?.focusBackground ,\n'--custom-border-color-hover': field()?.controlStyle?.hoverBorderColor ,\n'--custom-border-width-hover': field()?.controlStyle?.hoverBorderWidth ,\n'--custom-border-color-error': field()?.controlStyle?.errorBorderColor ,\n'--custom-border-width-error': field()?.controlStyle?.errorBorderWidth ,\n'--custom-font-size': field()?.controlStyle?.fontSize ,\n'--custom-font-weight': field()?.controlStyle?.fontWeight ,\n'--custom-font-family': field()?.controlStyle?.fontFamily ,\n'--custom-font-color': field()?.controlStyle?.color ,\n'--custom-caret-color': field()?.controlStyle?.caretColor ,\n'--custom-font-color-disabled' : field()?.controlStyle?.disableColor ,\n'--custom-bg-color-disabled' : field()?.controlStyle?.disableBackground ,\n}\"\n>\n@if(reactiveFormControlobject()) {\n<input\n matInput\n autocomplete=\"off\"\n [type]=\"field()?.controlType\"\n [name]=\"field()?.
|
|
2931
|
+
], template: "<label class=\"field-lable\" *ngIf=\"field() && field()?.isVisible && field().isShowLabel\"\n >{{ field()?.label\n }}<span style=\"color: red\" *ngIf=\"field() && field()?.validators?.isRequired\"\n >*</span\n ></label\n>\n<mat-form-field\n class=\"w-100\"\n appearance=\"outline\"\n *ngIf=\"field() && field()?.isVisible\"\n [ngStyle]=\"{\n'--custom-border-color': field()?.controlStyle?.borderColor ,\n'--custom-border-width': field()?.controlStyle?.borderWidth ,\n'--custom-border-radius': field()?.controlStyle?.borderRadius ,\n'--custom-bg-color': field()?.controlStyle?.background ,\n'--custom-border-color-focus': field()?.controlStyle?.focusBorderColor ,\n'--custom-border-width-focus': field()?.controlStyle?.focusBorderWidth ,\n'--custom-bg-color-focus': field()?.controlStyle?.focusBackground ,\n'--custom-border-color-hover': field()?.controlStyle?.hoverBorderColor ,\n'--custom-border-width-hover': field()?.controlStyle?.hoverBorderWidth ,\n'--custom-border-color-error': field()?.controlStyle?.errorBorderColor ,\n'--custom-border-width-error': field()?.controlStyle?.errorBorderWidth ,\n'--custom-font-size': field()?.controlStyle?.fontSize ,\n'--custom-font-weight': field()?.controlStyle?.fontWeight ,\n'--custom-font-family': field()?.controlStyle?.fontFamily ,\n'--custom-font-color': field()?.controlStyle?.color ,\n'--custom-caret-color': field()?.controlStyle?.caretColor ,\n'--custom-font-color-disabled' : field()?.controlStyle?.disableColor ,\n'--custom-bg-color-disabled' : field()?.controlStyle?.disableBackground ,\n}\"\n>\n@if(reactiveFormControlobject()) {\n<input\n matInput\n autocomplete=\"off\"\n [type]=\"field()?.controlType\"\n [name]=\"field()?.fieldNameAttribute\"\n [id]=\"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()?.fieldNameAttribute\"\n [id]=\"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\n <span matSuffix class=\"mx-3\">\n @if(field()?.configData?.isDisabledInputEdit) {\n @if(field()?.isDisable) {\n <img style=\"cursor:pointer\" *ngIf=\"field()?.imageUrl\" [src]='field().imageUrl' alt=\"\" (click)=\"enableField()\" />\n }\n } @else {\n <img *ngIf=\"field()?.imageUrl\" [src]='field().imageUrl' alt=\"\" />\n }\n <!-- \"https://cdn.godigit.com/retail-life/location.svg\" -->\n </span>\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=\"false\">\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}*{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}\n"] }]
|
|
2871
2932
|
}], propDecorators: { blur: [{
|
|
2872
2933
|
type: Output
|
|
2873
2934
|
}] } });
|
|
@@ -2881,6 +2942,9 @@ class EmailWithDomainComponent {
|
|
|
2881
2942
|
inputValue = null;
|
|
2882
2943
|
_onChange = (inputValue) => { };
|
|
2883
2944
|
_unTouched = () => { };
|
|
2945
|
+
ngOnInit() {
|
|
2946
|
+
initializeFieldNameAttribute(this.field());
|
|
2947
|
+
}
|
|
2884
2948
|
writeValue(obj) {
|
|
2885
2949
|
this.inputValue = obj;
|
|
2886
2950
|
}
|
|
@@ -2909,7 +2973,7 @@ class EmailWithDomainComponent {
|
|
|
2909
2973
|
useExisting: EmailWithDomainComponent,
|
|
2910
2974
|
multi: true
|
|
2911
2975
|
}
|
|
2912
|
-
], ngImport: i0, template: "<label *ngIf=\"field() && field()?.isVisible && field()?.isShowLabel\" class=\"field-lable\">{{field()?.label}}<span style=\"color: red;\" *ngIf=\"field() && field()?.validators?.isRequired\">*</span></label>\n <mat-form-field class=\"w-100\" appearance=\"outline\" [ngStyle]=\"{\n'--custom-border-color': field()?.controlStyle?.borderColor ,\n'--custom-border-width': field()?.controlStyle?.borderWidth ,\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 @if(reactiveFormControlobject()) {\n <input\n matInput\n autocomplete=\"off\"\n class=\"email-left-side\"\n [name]=\"field()?.
|
|
2976
|
+
], ngImport: i0, template: "<label *ngIf=\"field() && field()?.isVisible && field()?.isShowLabel\" class=\"field-lable\">{{field()?.label}}<span style=\"color: red;\" *ngIf=\"field() && field()?.validators?.isRequired\">*</span></label>\n <mat-form-field class=\"w-100\" appearance=\"outline\" [ngStyle]=\"{\n'--custom-border-color': field()?.controlStyle?.borderColor ,\n'--custom-border-width': field()?.controlStyle?.borderWidth ,\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 @if(reactiveFormControlobject()) {\n <input\n matInput\n autocomplete=\"off\"\n class=\"email-left-side\"\n [name]=\"field()?.fieldNameAttribute + '_1'\"\n [id]=\"field()?.fieldName + '_1'\"\n [type]=\"field()?.controlType\"\n [placeholder]=\"field()?.placeHolder\"\n [required]=\"field()?.validators?.isRequired\"\n [disabled]=\"field()?.isDisable\"\n [pattern]=\"field()?.validators?.pattern\"\n (blur)=\"onInputBlur()\"\n [value]=\"inputValue\"\n [formControl]=\"reactiveFormControlobject()\"\n />\n }@else {\n <input\n matInput\n autocomplete=\"off\"\n class=\"email-left-side\"\n [name]=\"field()?.fieldNameAttribute + '_1'\"\n [id]=\"field()?.fieldName + '_1'\"\n [type]=\"field()?.controlType\"\n [placeholder]=\"field()?.placeHolder\"\n [required]=\"field()?.validators?.isRequired\"\n [disabled]=\"field()?.isDisable\"\n [pattern]=\"field()?.validators?.pattern\"\n (blur)=\"onInputBlur()\"\n [value]=\"inputValue\"\n />\n }\n <span class=\"email-between\">@</span>\n <input\n matInput\n autocomplete=\"off\"\n [name]=\"field()?.fieldNameAttribute + '_2'\"\n [id]=\"field()?.fieldName + '_2'\"\n placeholder=\"domain.com\"\n class=\"email-right-side\"\n [required]=\"field()?.validators?.isRequired\"\n [disabled]=\"field()?.isDisable\"\n />\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=\"false\">\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}.email-left-side{width:40%!important;display:inline-block!important}.email-right-side{width:50%!important;display:inline-block!important}.email-between{padding:0 8px}.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}\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: 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: "ngmodule", type: MatFormFieldModule }, { 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: "directive", type: i4.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
|
|
2913
2977
|
}
|
|
2914
2978
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: EmailWithDomainComponent, decorators: [{
|
|
2915
2979
|
type: Component,
|
|
@@ -2919,7 +2983,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
2919
2983
|
useExisting: EmailWithDomainComponent,
|
|
2920
2984
|
multi: true
|
|
2921
2985
|
}
|
|
2922
|
-
], template: "<label *ngIf=\"field() && field()?.isVisible && field()?.isShowLabel\" class=\"field-lable\">{{field()?.label}}<span style=\"color: red;\" *ngIf=\"field() && field()?.validators?.isRequired\">*</span></label>\n <mat-form-field class=\"w-100\" appearance=\"outline\" [ngStyle]=\"{\n'--custom-border-color': field()?.controlStyle?.borderColor ,\n'--custom-border-width': field()?.controlStyle?.borderWidth ,\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 @if(reactiveFormControlobject()) {\n <input\n matInput\n autocomplete=\"off\"\n class=\"email-left-side\"\n [name]=\"field()?.
|
|
2986
|
+
], template: "<label *ngIf=\"field() && field()?.isVisible && field()?.isShowLabel\" class=\"field-lable\">{{field()?.label}}<span style=\"color: red;\" *ngIf=\"field() && field()?.validators?.isRequired\">*</span></label>\n <mat-form-field class=\"w-100\" appearance=\"outline\" [ngStyle]=\"{\n'--custom-border-color': field()?.controlStyle?.borderColor ,\n'--custom-border-width': field()?.controlStyle?.borderWidth ,\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 @if(reactiveFormControlobject()) {\n <input\n matInput\n autocomplete=\"off\"\n class=\"email-left-side\"\n [name]=\"field()?.fieldNameAttribute + '_1'\"\n [id]=\"field()?.fieldName + '_1'\"\n [type]=\"field()?.controlType\"\n [placeholder]=\"field()?.placeHolder\"\n [required]=\"field()?.validators?.isRequired\"\n [disabled]=\"field()?.isDisable\"\n [pattern]=\"field()?.validators?.pattern\"\n (blur)=\"onInputBlur()\"\n [value]=\"inputValue\"\n [formControl]=\"reactiveFormControlobject()\"\n />\n }@else {\n <input\n matInput\n autocomplete=\"off\"\n class=\"email-left-side\"\n [name]=\"field()?.fieldNameAttribute + '_1'\"\n [id]=\"field()?.fieldName + '_1'\"\n [type]=\"field()?.controlType\"\n [placeholder]=\"field()?.placeHolder\"\n [required]=\"field()?.validators?.isRequired\"\n [disabled]=\"field()?.isDisable\"\n [pattern]=\"field()?.validators?.pattern\"\n (blur)=\"onInputBlur()\"\n [value]=\"inputValue\"\n />\n }\n <span class=\"email-between\">@</span>\n <input\n matInput\n autocomplete=\"off\"\n [name]=\"field()?.fieldNameAttribute + '_2'\"\n [id]=\"field()?.fieldName + '_2'\"\n placeholder=\"domain.com\"\n class=\"email-right-side\"\n [required]=\"field()?.validators?.isRequired\"\n [disabled]=\"field()?.isDisable\"\n />\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=\"false\">\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}.email-left-side{width:40%!important;display:inline-block!important}.email-right-side{width:50%!important;display:inline-block!important}.email-between{padding:0 8px}.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}\n"] }]
|
|
2923
2987
|
}] });
|
|
2924
2988
|
|
|
2925
2989
|
class ImageUploadComponent {
|
|
@@ -2977,6 +3041,9 @@ class TextboxWithUnderscoreComponent {
|
|
|
2977
3041
|
reactiveFormControlobject = input();
|
|
2978
3042
|
_onChange = (inputValue) => { };
|
|
2979
3043
|
_unTouched = () => { };
|
|
3044
|
+
ngOnInit() {
|
|
3045
|
+
initializeFieldNameAttribute(this.field());
|
|
3046
|
+
}
|
|
2980
3047
|
writeValue(obj) {
|
|
2981
3048
|
this.inputValue = obj;
|
|
2982
3049
|
}
|
|
@@ -3019,7 +3086,7 @@ class TextboxWithUnderscoreComponent {
|
|
|
3019
3086
|
useExisting: TextboxWithUnderscoreComponent,
|
|
3020
3087
|
multi: true
|
|
3021
3088
|
}
|
|
3022
|
-
], 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 hyphen-input\"\n appearance=\"outline\"\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 <input\n matInput\n autocomplete=\"off\"\n [type]=\"field()?.controlType\"\n [name]=\"field()?.
|
|
3089
|
+
], 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 hyphen-input\"\n appearance=\"outline\"\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 <input\n matInput\n autocomplete=\"off\"\n [type]=\"field()?.controlType\"\n [name]=\"field()?.fieldNameAttribute\"\n [id]=\"field()?.fieldName\"\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()\"\n [value]=\"inputValue\"\n [placeholder]=\"getUnderscorePlaceholder()\"\n (keyup)=\"changeFormat($event)\"\n [formControl]=\"reactiveFormControlobject()\"\n />\n }@else {\n <input\n matInput\n autocomplete=\"off\"\n [type]=\"field()?.controlType\"\n [name]=\"field()?.fieldNameAttribute\"\n [id]=\"field()?.fieldName\"\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()\"\n [value]=\"inputValue\"\n [placeholder]=\"getUnderscorePlaceholder()\"\n (keyup)=\"changeFormat($event)\"\n />\n }\n\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=\"false\">\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}.hyphen-input{letter-spacing:5px!important}.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}\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: 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: "ngmodule", type: MatFormFieldModule }, { 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"] }] });
|
|
3023
3090
|
}
|
|
3024
3091
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TextboxWithUnderscoreComponent, decorators: [{
|
|
3025
3092
|
type: Component,
|
|
@@ -3029,7 +3096,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
3029
3096
|
useExisting: TextboxWithUnderscoreComponent,
|
|
3030
3097
|
multi: true
|
|
3031
3098
|
}
|
|
3032
|
-
], 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 hyphen-input\"\n appearance=\"outline\"\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 <input\n matInput\n autocomplete=\"off\"\n [type]=\"field()?.controlType\"\n [name]=\"field()?.
|
|
3099
|
+
], 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 hyphen-input\"\n appearance=\"outline\"\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 <input\n matInput\n autocomplete=\"off\"\n [type]=\"field()?.controlType\"\n [name]=\"field()?.fieldNameAttribute\"\n [id]=\"field()?.fieldName\"\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()\"\n [value]=\"inputValue\"\n [placeholder]=\"getUnderscorePlaceholder()\"\n (keyup)=\"changeFormat($event)\"\n [formControl]=\"reactiveFormControlobject()\"\n />\n }@else {\n <input\n matInput\n autocomplete=\"off\"\n [type]=\"field()?.controlType\"\n [name]=\"field()?.fieldNameAttribute\"\n [id]=\"field()?.fieldName\"\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()\"\n [value]=\"inputValue\"\n [placeholder]=\"getUnderscorePlaceholder()\"\n (keyup)=\"changeFormat($event)\"\n />\n }\n\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=\"false\">\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}.hyphen-input{letter-spacing:5px!important}.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}\n"] }]
|
|
3033
3100
|
}] });
|
|
3034
3101
|
|
|
3035
3102
|
class UnderscoreMobNumberComponent {
|
|
@@ -3186,6 +3253,7 @@ class SearchMultiSelectComponent {
|
|
|
3186
3253
|
inputValue = null;
|
|
3187
3254
|
reactiveFormControlobject = input();
|
|
3188
3255
|
ngOnInit() {
|
|
3256
|
+
initializeFieldNameAttribute(this.field());
|
|
3189
3257
|
this.filteredOptions = this.field().options;
|
|
3190
3258
|
}
|
|
3191
3259
|
onChange = () => { };
|
|
@@ -3264,7 +3332,7 @@ class SearchMultiSelectComponent {
|
|
|
3264
3332
|
useExisting: SearchMultiSelectComponent,
|
|
3265
3333
|
multi: true
|
|
3266
3334
|
}
|
|
3267
|
-
], ngImport: i0, template: "<label class=\"field-lable\" *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 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-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)]=\"selectedValues\"\n (selectionChange)=\"onSelectionChange()\"\n [required]=\"field()?.validators?.isRequired\"\n [placeholder]=\"field()?.placeHolder\"\n [disabled]=\"field()?.isDisable\"\n (openedChange)=\"onSelectOpened($event)\"\n [value]=\"inputValue\"\n [formControl]=\"reactiveFormControlobject()\"\n >\n <mat-select-trigger>\n <mat-chip-listbox>\n @for (option of visibleChip; track option) {\n <mat-chip [removable]=\"true\" (removed)=\"removeItem(option)\">\n {{ option }}\n <mat-icon matChipRemove>close</mat-icon>\n </mat-chip>\n }\n <mat-chip *ngIf=\"remainingCount > 0\"> +{{ remainingCount }} </mat-chip>\n </mat-chip-listbox>\n </mat-select-trigger>\n <div class=\"select-container\">\n <mat-optgroup>\n <mat-form-field\n class=\"input-full-width full-width w-100 multiselect-search\"\n >\n <input\n matInput\n #search\n autocomplete=\"off\"\n placeholder=\"Search\"\n [(ngModel)]=\"searchText\"\n (ngModelChange)=\"filterOptions()\"\n />\n </mat-form-field>\n </mat-optgroup>\n @for (option of filteredOptions; track option.label) {\n <mat-option [value]=\"option.label\" autoActiveFirstOption>\n {{ option.label }}\n </mat-option>\n }\n </div>\n </mat-select>\n}@else {\n <mat-select\n multiple\n [id]=\"field()?.fieldName\"\n [attr.name]=\"field()?.fieldName\"\n [(value)]=\"selectedValues\"\n (selectionChange)=\"onSelectionChange()\"\n [required]=\"field()?.validators?.isRequired\"\n [placeholder]=\"field()?.placeHolder\"\n [disabled]=\"field()?.isDisable\"\n (openedChange)=\"onSelectOpened($event)\"\n [value]=\"inputValue\"\n >\n <mat-select-trigger>\n <mat-chip-listbox>\n @for (option of visibleChip; track option) {\n <mat-chip [removable]=\"true\" (removed)=\"removeItem(option)\">\n {{ option }}\n <mat-icon matChipRemove>close</mat-icon>\n </mat-chip>\n }\n <mat-chip *ngIf=\"remainingCount > 0\"> +{{ remainingCount }} </mat-chip>\n </mat-chip-listbox>\n </mat-select-trigger>\n <div class=\"select-container\">\n <mat-optgroup>\n <mat-form-field\n class=\"input-full-width full-width w-100 multiselect-search\"\n >\n <input\n matInput\n #search\n autocomplete=\"off\"\n placeholder=\"Search\"\n [(ngModel)]=\"searchText\"\n (ngModelChange)=\"filterOptions()\"\n />\n </mat-form-field>\n </mat-optgroup>\n @for (option of filteredOptions; track option.label) {\n <mat-option [value]=\"option.label\" autoActiveFirstOption>\n {{ option.label }}\n </mat-option>\n }\n </div>\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 .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: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}.select-container{background:#fff}::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}@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: "component", type: i6.MatOptgroup, selector: "mat-optgroup", inputs: ["label", "disabled"], exportAs: ["matOptgroup"] }, { 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.MatChipListbox, selector: "mat-chip-listbox", inputs: ["multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "directive", type: i6$1.MatChipRemove, selector: "[matChipRemove]" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { 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: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { 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: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
|
|
3335
|
+
], ngImport: i0, template: "<label class=\"field-lable\" *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 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-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()?.fieldNameAttribute\"\n [(value)]=\"selectedValues\"\n (selectionChange)=\"onSelectionChange()\"\n [required]=\"field()?.validators?.isRequired\"\n [placeholder]=\"field()?.placeHolder\"\n [disabled]=\"field()?.isDisable\"\n (openedChange)=\"onSelectOpened($event)\"\n [value]=\"inputValue\"\n [formControl]=\"reactiveFormControlobject()\"\n >\n <mat-select-trigger>\n <mat-chip-listbox>\n @for (option of visibleChip; track option) {\n <mat-chip [removable]=\"true\" (removed)=\"removeItem(option)\">\n {{ option }}\n <mat-icon matChipRemove>close</mat-icon>\n </mat-chip>\n }\n <mat-chip *ngIf=\"remainingCount > 0\"> +{{ remainingCount }} </mat-chip>\n </mat-chip-listbox>\n </mat-select-trigger>\n <div class=\"select-container\">\n <mat-optgroup>\n <mat-form-field\n class=\"input-full-width full-width w-100 multiselect-search\"\n >\n <input\n matInput\n #search\n autocomplete=\"off\"\n placeholder=\"Search\"\n [(ngModel)]=\"searchText\"\n (ngModelChange)=\"filterOptions()\"\n />\n </mat-form-field>\n </mat-optgroup>\n @for (option of filteredOptions; track option.label) {\n <mat-option [value]=\"option.label\" autoActiveFirstOption>\n {{ option.label }}\n </mat-option>\n }\n </div>\n </mat-select>\n}@else {\n <mat-select\n multiple\n [id]=\"field()?.fieldName\"\n [attr.name]=\"field()?.fieldNameAttribute\"\n [(value)]=\"selectedValues\"\n (selectionChange)=\"onSelectionChange()\"\n [required]=\"field()?.validators?.isRequired\"\n [placeholder]=\"field()?.placeHolder\"\n [disabled]=\"field()?.isDisable\"\n (openedChange)=\"onSelectOpened($event)\"\n [value]=\"inputValue\"\n >\n <mat-select-trigger>\n <mat-chip-listbox>\n @for (option of visibleChip; track option) {\n <mat-chip [removable]=\"true\" (removed)=\"removeItem(option)\">\n {{ option }}\n <mat-icon matChipRemove>close</mat-icon>\n </mat-chip>\n }\n <mat-chip *ngIf=\"remainingCount > 0\"> +{{ remainingCount }} </mat-chip>\n </mat-chip-listbox>\n </mat-select-trigger>\n <div class=\"select-container\">\n <mat-optgroup>\n <mat-form-field\n class=\"input-full-width full-width w-100 multiselect-search\"\n >\n <input\n matInput\n #search\n autocomplete=\"off\"\n placeholder=\"Search\"\n [(ngModel)]=\"searchText\"\n (ngModelChange)=\"filterOptions()\"\n />\n </mat-form-field>\n </mat-optgroup>\n @for (option of filteredOptions; track option.label) {\n <mat-option [value]=\"option.label\" autoActiveFirstOption>\n {{ option.label }}\n </mat-option>\n }\n </div>\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 .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: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}.select-container{background:#fff}::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}@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: "component", type: i6.MatOptgroup, selector: "mat-optgroup", inputs: ["label", "disabled"], exportAs: ["matOptgroup"] }, { 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.MatChipListbox, selector: "mat-chip-listbox", inputs: ["multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "directive", type: i6$1.MatChipRemove, selector: "[matChipRemove]" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { 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: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { 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: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
|
|
3268
3336
|
}
|
|
3269
3337
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SearchMultiSelectComponent, decorators: [{
|
|
3270
3338
|
type: Component,
|
|
@@ -3283,7 +3351,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
3283
3351
|
useExisting: SearchMultiSelectComponent,
|
|
3284
3352
|
multi: true
|
|
3285
3353
|
}
|
|
3286
|
-
], template: "<label class=\"field-lable\" *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 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-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)]=\"selectedValues\"\n (selectionChange)=\"onSelectionChange()\"\n [required]=\"field()?.validators?.isRequired\"\n [placeholder]=\"field()?.placeHolder\"\n [disabled]=\"field()?.isDisable\"\n (openedChange)=\"onSelectOpened($event)\"\n [value]=\"inputValue\"\n [formControl]=\"reactiveFormControlobject()\"\n >\n <mat-select-trigger>\n <mat-chip-listbox>\n @for (option of visibleChip; track option) {\n <mat-chip [removable]=\"true\" (removed)=\"removeItem(option)\">\n {{ option }}\n <mat-icon matChipRemove>close</mat-icon>\n </mat-chip>\n }\n <mat-chip *ngIf=\"remainingCount > 0\"> +{{ remainingCount }} </mat-chip>\n </mat-chip-listbox>\n </mat-select-trigger>\n <div class=\"select-container\">\n <mat-optgroup>\n <mat-form-field\n class=\"input-full-width full-width w-100 multiselect-search\"\n >\n <input\n matInput\n #search\n autocomplete=\"off\"\n placeholder=\"Search\"\n [(ngModel)]=\"searchText\"\n (ngModelChange)=\"filterOptions()\"\n />\n </mat-form-field>\n </mat-optgroup>\n @for (option of filteredOptions; track option.label) {\n <mat-option [value]=\"option.label\" autoActiveFirstOption>\n {{ option.label }}\n </mat-option>\n }\n </div>\n </mat-select>\n}@else {\n <mat-select\n multiple\n [id]=\"field()?.fieldName\"\n [attr.name]=\"field()?.fieldName\"\n [(value)]=\"selectedValues\"\n (selectionChange)=\"onSelectionChange()\"\n [required]=\"field()?.validators?.isRequired\"\n [placeholder]=\"field()?.placeHolder\"\n [disabled]=\"field()?.isDisable\"\n (openedChange)=\"onSelectOpened($event)\"\n [value]=\"inputValue\"\n >\n <mat-select-trigger>\n <mat-chip-listbox>\n @for (option of visibleChip; track option) {\n <mat-chip [removable]=\"true\" (removed)=\"removeItem(option)\">\n {{ option }}\n <mat-icon matChipRemove>close</mat-icon>\n </mat-chip>\n }\n <mat-chip *ngIf=\"remainingCount > 0\"> +{{ remainingCount }} </mat-chip>\n </mat-chip-listbox>\n </mat-select-trigger>\n <div class=\"select-container\">\n <mat-optgroup>\n <mat-form-field\n class=\"input-full-width full-width w-100 multiselect-search\"\n >\n <input\n matInput\n #search\n autocomplete=\"off\"\n placeholder=\"Search\"\n [(ngModel)]=\"searchText\"\n (ngModelChange)=\"filterOptions()\"\n />\n </mat-form-field>\n </mat-optgroup>\n @for (option of filteredOptions; track option.label) {\n <mat-option [value]=\"option.label\" autoActiveFirstOption>\n {{ option.label }}\n </mat-option>\n }\n </div>\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 .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: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}.select-container{background:#fff}::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}@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"] }]
|
|
3354
|
+
], template: "<label class=\"field-lable\" *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 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-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()?.fieldNameAttribute\"\n [(value)]=\"selectedValues\"\n (selectionChange)=\"onSelectionChange()\"\n [required]=\"field()?.validators?.isRequired\"\n [placeholder]=\"field()?.placeHolder\"\n [disabled]=\"field()?.isDisable\"\n (openedChange)=\"onSelectOpened($event)\"\n [value]=\"inputValue\"\n [formControl]=\"reactiveFormControlobject()\"\n >\n <mat-select-trigger>\n <mat-chip-listbox>\n @for (option of visibleChip; track option) {\n <mat-chip [removable]=\"true\" (removed)=\"removeItem(option)\">\n {{ option }}\n <mat-icon matChipRemove>close</mat-icon>\n </mat-chip>\n }\n <mat-chip *ngIf=\"remainingCount > 0\"> +{{ remainingCount }} </mat-chip>\n </mat-chip-listbox>\n </mat-select-trigger>\n <div class=\"select-container\">\n <mat-optgroup>\n <mat-form-field\n class=\"input-full-width full-width w-100 multiselect-search\"\n >\n <input\n matInput\n #search\n autocomplete=\"off\"\n placeholder=\"Search\"\n [(ngModel)]=\"searchText\"\n (ngModelChange)=\"filterOptions()\"\n />\n </mat-form-field>\n </mat-optgroup>\n @for (option of filteredOptions; track option.label) {\n <mat-option [value]=\"option.label\" autoActiveFirstOption>\n {{ option.label }}\n </mat-option>\n }\n </div>\n </mat-select>\n}@else {\n <mat-select\n multiple\n [id]=\"field()?.fieldName\"\n [attr.name]=\"field()?.fieldNameAttribute\"\n [(value)]=\"selectedValues\"\n (selectionChange)=\"onSelectionChange()\"\n [required]=\"field()?.validators?.isRequired\"\n [placeholder]=\"field()?.placeHolder\"\n [disabled]=\"field()?.isDisable\"\n (openedChange)=\"onSelectOpened($event)\"\n [value]=\"inputValue\"\n >\n <mat-select-trigger>\n <mat-chip-listbox>\n @for (option of visibleChip; track option) {\n <mat-chip [removable]=\"true\" (removed)=\"removeItem(option)\">\n {{ option }}\n <mat-icon matChipRemove>close</mat-icon>\n </mat-chip>\n }\n <mat-chip *ngIf=\"remainingCount > 0\"> +{{ remainingCount }} </mat-chip>\n </mat-chip-listbox>\n </mat-select-trigger>\n <div class=\"select-container\">\n <mat-optgroup>\n <mat-form-field\n class=\"input-full-width full-width w-100 multiselect-search\"\n >\n <input\n matInput\n #search\n autocomplete=\"off\"\n placeholder=\"Search\"\n [(ngModel)]=\"searchText\"\n (ngModelChange)=\"filterOptions()\"\n />\n </mat-form-field>\n </mat-optgroup>\n @for (option of filteredOptions; track option.label) {\n <mat-option [value]=\"option.label\" autoActiveFirstOption>\n {{ option.label }}\n </mat-option>\n }\n </div>\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 .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: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}.select-container{background:#fff}::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}@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"] }]
|
|
3287
3355
|
}] });
|
|
3288
3356
|
|
|
3289
3357
|
class SubscriptTextboxComponent {
|
|
@@ -3292,6 +3360,9 @@ class SubscriptTextboxComponent {
|
|
|
3292
3360
|
reactiveFormControlobject = input();
|
|
3293
3361
|
_onChange = (inputValue) => { };
|
|
3294
3362
|
_unTouched = () => { };
|
|
3363
|
+
ngOnInit() {
|
|
3364
|
+
initializeFieldNameAttribute(this.field());
|
|
3365
|
+
}
|
|
3295
3366
|
writeValue(obj) {
|
|
3296
3367
|
this.inputValue = obj;
|
|
3297
3368
|
}
|
|
@@ -3320,7 +3391,7 @@ class SubscriptTextboxComponent {
|
|
|
3320
3391
|
useExisting: SubscriptTextboxComponent,
|
|
3321
3392
|
multi: true
|
|
3322
3393
|
}
|
|
3323
|
-
], ngImport: i0, template: "<label\n class=\"field-lable\"\n *ngIf=\"field() && field()?.isVisible && field().isShowLabel\"\n >{{ field()?.label\n }}<span style=\"color: red\" *ngIf=\"field() && field()?.validators?.isRequired\"\n >*</span\n ></label\n>\n<mat-form-field\n class=\"w-100\"\n appearance=\"outline\"\n *ngIf=\"field() && field()?.isVisible\"\n [ngStyle]=\"{\n'--custom-border-color': field()?.controlStyle?.borderColor ,\n'--custom-border-width': field()?.controlStyle?.borderWidth ,\n'--custom-border-radius': field()?.controlStyle?.borderRadius ,\n'--custom-bg-color': field()?.controlStyle?.background ,\n'--custom-border-color-focus': field()?.controlStyle?.focusBorderColor ,\n'--custom-border-width-focus': field()?.controlStyle?.focusBorderWidth ,\n'--custom-bg-color-focus': field()?.controlStyle?.focusBackground ,\n'--custom-border-color-hover': field()?.controlStyle?.hoverBorderColor ,\n'--custom-border-width-hover': field()?.controlStyle?.hoverBorderWidth ,\n'--custom-border-color-error': field()?.controlStyle?.errorBorderColor ,\n'--custom-border-width-error': field()?.controlStyle?.errorBorderWidth ,\n'--custom-font-size': field()?.controlStyle?.fontSize ,\n'--custom-font-weight': field()?.controlStyle?.fontWeight ,\n'--custom-font-family': field()?.controlStyle?.fontFamily ,\n'--custom-font-color': field()?.controlStyle?.color ,\n'--custom-caret-color': field()?.controlStyle?.caretColor ,\n'--custom-font-color-disabled' : field()?.controlStyle?.disableColor ,\n'--custom-bg-color-disabled' : field()?.controlStyle?.disableBackground ,\n}\"\n>\n @if(reactiveFormControlobject()) {\n <input\n matInput\n autocomplete=\"off\"\n [type]=\"field()?.controlType\"\n [name]=\"field()?.
|
|
3394
|
+
], ngImport: i0, template: "<label\n class=\"field-lable\"\n *ngIf=\"field() && field()?.isVisible && field().isShowLabel\"\n >{{ field()?.label\n }}<span style=\"color: red\" *ngIf=\"field() && field()?.validators?.isRequired\"\n >*</span\n ></label\n>\n<mat-form-field\n class=\"w-100\"\n appearance=\"outline\"\n *ngIf=\"field() && field()?.isVisible\"\n [ngStyle]=\"{\n'--custom-border-color': field()?.controlStyle?.borderColor ,\n'--custom-border-width': field()?.controlStyle?.borderWidth ,\n'--custom-border-radius': field()?.controlStyle?.borderRadius ,\n'--custom-bg-color': field()?.controlStyle?.background ,\n'--custom-border-color-focus': field()?.controlStyle?.focusBorderColor ,\n'--custom-border-width-focus': field()?.controlStyle?.focusBorderWidth ,\n'--custom-bg-color-focus': field()?.controlStyle?.focusBackground ,\n'--custom-border-color-hover': field()?.controlStyle?.hoverBorderColor ,\n'--custom-border-width-hover': field()?.controlStyle?.hoverBorderWidth ,\n'--custom-border-color-error': field()?.controlStyle?.errorBorderColor ,\n'--custom-border-width-error': field()?.controlStyle?.errorBorderWidth ,\n'--custom-font-size': field()?.controlStyle?.fontSize ,\n'--custom-font-weight': field()?.controlStyle?.fontWeight ,\n'--custom-font-family': field()?.controlStyle?.fontFamily ,\n'--custom-font-color': field()?.controlStyle?.color ,\n'--custom-caret-color': field()?.controlStyle?.caretColor ,\n'--custom-font-color-disabled' : field()?.controlStyle?.disableColor ,\n'--custom-bg-color-disabled' : field()?.controlStyle?.disableBackground ,\n}\"\n>\n @if(reactiveFormControlobject()) {\n <input\n matInput\n autocomplete=\"off\"\n [type]=\"field()?.controlType\"\n [name]=\"field()?.fieldNameAttribute\"\n [id]=\"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()\"\n [value]=\"inputValue\"\n [formControl]=\"reactiveFormControlobject()\"\n />\n }@else {\n <input\n matInput\n autocomplete=\"off\"\n [type]=\"field()?.controlType\"\n [name]=\"field()?.fieldNameAttribute\"\n [id]=\"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()\"\n [value]=\"inputValue\"\n />\n }\n\n <p class=\"years-text\" *ngIf=\"inputValue\">Years</p>\n <p class=\"textbox-subscript\">till 2026</p>\n <mat-error *ngIf=\"false\">\n {{ field()?.validators?.isRequiredMessage }}\n </mat-error>\n</mat-form-field>\n<div>\n <span class=\"below-input-text\">{{field()?.configData?.subscriptText}}</span>\n</div>\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:0!important}*{font-family:mulish!important}.years-text{position:absolute;left:5%;bottom:5px;font-size:14px}.error-message{color:red}.below-input-text{font-weight:400;font-size:12px;color:#444;font-family:Mulish}.textbox-subscript{color:#8f8f8f;font-size:14px;font-weight:400;position:absolute;left:15%;bottom:5px}::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}\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: "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"] }] });
|
|
3324
3395
|
}
|
|
3325
3396
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SubscriptTextboxComponent, decorators: [{
|
|
3326
3397
|
type: Component,
|
|
@@ -3335,7 +3406,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
3335
3406
|
useExisting: SubscriptTextboxComponent,
|
|
3336
3407
|
multi: true
|
|
3337
3408
|
}
|
|
3338
|
-
], template: "<label\n class=\"field-lable\"\n *ngIf=\"field() && field()?.isVisible && field().isShowLabel\"\n >{{ field()?.label\n }}<span style=\"color: red\" *ngIf=\"field() && field()?.validators?.isRequired\"\n >*</span\n ></label\n>\n<mat-form-field\n class=\"w-100\"\n appearance=\"outline\"\n *ngIf=\"field() && field()?.isVisible\"\n [ngStyle]=\"{\n'--custom-border-color': field()?.controlStyle?.borderColor ,\n'--custom-border-width': field()?.controlStyle?.borderWidth ,\n'--custom-border-radius': field()?.controlStyle?.borderRadius ,\n'--custom-bg-color': field()?.controlStyle?.background ,\n'--custom-border-color-focus': field()?.controlStyle?.focusBorderColor ,\n'--custom-border-width-focus': field()?.controlStyle?.focusBorderWidth ,\n'--custom-bg-color-focus': field()?.controlStyle?.focusBackground ,\n'--custom-border-color-hover': field()?.controlStyle?.hoverBorderColor ,\n'--custom-border-width-hover': field()?.controlStyle?.hoverBorderWidth ,\n'--custom-border-color-error': field()?.controlStyle?.errorBorderColor ,\n'--custom-border-width-error': field()?.controlStyle?.errorBorderWidth ,\n'--custom-font-size': field()?.controlStyle?.fontSize ,\n'--custom-font-weight': field()?.controlStyle?.fontWeight ,\n'--custom-font-family': field()?.controlStyle?.fontFamily ,\n'--custom-font-color': field()?.controlStyle?.color ,\n'--custom-caret-color': field()?.controlStyle?.caretColor ,\n'--custom-font-color-disabled' : field()?.controlStyle?.disableColor ,\n'--custom-bg-color-disabled' : field()?.controlStyle?.disableBackground ,\n}\"\n>\n @if(reactiveFormControlobject()) {\n <input\n matInput\n autocomplete=\"off\"\n [type]=\"field()?.controlType\"\n [name]=\"field()?.
|
|
3409
|
+
], template: "<label\n class=\"field-lable\"\n *ngIf=\"field() && field()?.isVisible && field().isShowLabel\"\n >{{ field()?.label\n }}<span style=\"color: red\" *ngIf=\"field() && field()?.validators?.isRequired\"\n >*</span\n ></label\n>\n<mat-form-field\n class=\"w-100\"\n appearance=\"outline\"\n *ngIf=\"field() && field()?.isVisible\"\n [ngStyle]=\"{\n'--custom-border-color': field()?.controlStyle?.borderColor ,\n'--custom-border-width': field()?.controlStyle?.borderWidth ,\n'--custom-border-radius': field()?.controlStyle?.borderRadius ,\n'--custom-bg-color': field()?.controlStyle?.background ,\n'--custom-border-color-focus': field()?.controlStyle?.focusBorderColor ,\n'--custom-border-width-focus': field()?.controlStyle?.focusBorderWidth ,\n'--custom-bg-color-focus': field()?.controlStyle?.focusBackground ,\n'--custom-border-color-hover': field()?.controlStyle?.hoverBorderColor ,\n'--custom-border-width-hover': field()?.controlStyle?.hoverBorderWidth ,\n'--custom-border-color-error': field()?.controlStyle?.errorBorderColor ,\n'--custom-border-width-error': field()?.controlStyle?.errorBorderWidth ,\n'--custom-font-size': field()?.controlStyle?.fontSize ,\n'--custom-font-weight': field()?.controlStyle?.fontWeight ,\n'--custom-font-family': field()?.controlStyle?.fontFamily ,\n'--custom-font-color': field()?.controlStyle?.color ,\n'--custom-caret-color': field()?.controlStyle?.caretColor ,\n'--custom-font-color-disabled' : field()?.controlStyle?.disableColor ,\n'--custom-bg-color-disabled' : field()?.controlStyle?.disableBackground ,\n}\"\n>\n @if(reactiveFormControlobject()) {\n <input\n matInput\n autocomplete=\"off\"\n [type]=\"field()?.controlType\"\n [name]=\"field()?.fieldNameAttribute\"\n [id]=\"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()\"\n [value]=\"inputValue\"\n [formControl]=\"reactiveFormControlobject()\"\n />\n }@else {\n <input\n matInput\n autocomplete=\"off\"\n [type]=\"field()?.controlType\"\n [name]=\"field()?.fieldNameAttribute\"\n [id]=\"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()\"\n [value]=\"inputValue\"\n />\n }\n\n <p class=\"years-text\" *ngIf=\"inputValue\">Years</p>\n <p class=\"textbox-subscript\">till 2026</p>\n <mat-error *ngIf=\"false\">\n {{ field()?.validators?.isRequiredMessage }}\n </mat-error>\n</mat-form-field>\n<div>\n <span class=\"below-input-text\">{{field()?.configData?.subscriptText}}</span>\n</div>\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:0!important}*{font-family:mulish!important}.years-text{position:absolute;left:5%;bottom:5px;font-size:14px}.error-message{color:red}.below-input-text{font-weight:400;font-size:12px;color:#444;font-family:Mulish}.textbox-subscript{color:#8f8f8f;font-size:14px;font-weight:400;position:absolute;left:15%;bottom:5px}::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}\n"] }]
|
|
3339
3410
|
}] });
|
|
3340
3411
|
|
|
3341
3412
|
class LabelComponent {
|
|
@@ -3477,6 +3548,9 @@ class TextboxWithTextComponent {
|
|
|
3477
3548
|
blur = new EventEmitter();
|
|
3478
3549
|
_onChange = (inputValue) => { };
|
|
3479
3550
|
_unTouched = () => { };
|
|
3551
|
+
ngOnInit() {
|
|
3552
|
+
initializeFieldNameAttribute(this.field());
|
|
3553
|
+
}
|
|
3480
3554
|
writeValue(obj) {
|
|
3481
3555
|
this.inputValue = obj;
|
|
3482
3556
|
}
|
|
@@ -3502,7 +3576,7 @@ class TextboxWithTextComponent {
|
|
|
3502
3576
|
useExisting: TextboxWithTextComponent,
|
|
3503
3577
|
multi: true,
|
|
3504
3578
|
},
|
|
3505
|
-
], ngImport: i0, template: "<label\n class=\"field-lable\"\n *ngIf=\"field() && field()?.isVisible && field().isShowLabel\"\n >{{ field()?.label\n }}<span style=\"color: red\" *ngIf=\"field() && field()?.validators?.isRequired\"\n >*</span\n ></label\n>\n<mat-form-field\n class=\"w-100\"\n appearance=\"outline\"\n *ngIf=\"field() && field()?.isVisible\"\n [ngStyle]=\"{\n'--custom-border-color': field()?.controlStyle?.borderColor ,\n'--custom-border-width': field()?.controlStyle?.borderWidth ,\n'--custom-border-radius': field()?.controlStyle?.borderRadius ,\n'--custom-bg-color': field()?.controlStyle?.background ,\n'--custom-border-color-focus': field()?.controlStyle?.focusBorderColor ,\n'--custom-border-width-focus': field()?.controlStyle?.focusBorderWidth ,\n'--custom-bg-color-focus': field()?.controlStyle?.focusBackground ,\n'--custom-border-color-hover': field()?.controlStyle?.hoverBorderColor ,\n'--custom-border-width-hover': field()?.controlStyle?.hoverBorderWidth ,\n'--custom-border-color-error': field()?.controlStyle?.errorBorderColor ,\n'--custom-border-width-error': field()?.controlStyle?.errorBorderWidth ,\n'--custom-font-size': field()?.controlStyle?.fontSize ,\n'--custom-font-weight': field()?.controlStyle?.fontWeight ,\n'--custom-font-family': field()?.controlStyle?.fontFamily ,\n'--custom-font-color': field()?.controlStyle?.color ,\n'--custom-caret-color': field()?.controlStyle?.caretColor ,\n'--custom-font-color-disabled' : field()?.controlStyle?.disableColor ,\n'--custom-bg-color-disabled' : field()?.controlStyle?.disableBackground ,\n}\"\n>\n @if(reactiveFormControlobject()) {\n <input\n matInput\n autocomplete=\"off\"\n [type]=\"field()?.controlType\"\n [name]=\"field()?.
|
|
3579
|
+
], ngImport: i0, template: "<label\n class=\"field-lable\"\n *ngIf=\"field() && field()?.isVisible && field().isShowLabel\"\n >{{ field()?.label\n }}<span style=\"color: red\" *ngIf=\"field() && field()?.validators?.isRequired\"\n >*</span\n ></label\n>\n<mat-form-field\n class=\"w-100\"\n appearance=\"outline\"\n *ngIf=\"field() && field()?.isVisible\"\n [ngStyle]=\"{\n'--custom-border-color': field()?.controlStyle?.borderColor ,\n'--custom-border-width': field()?.controlStyle?.borderWidth ,\n'--custom-border-radius': field()?.controlStyle?.borderRadius ,\n'--custom-bg-color': field()?.controlStyle?.background ,\n'--custom-border-color-focus': field()?.controlStyle?.focusBorderColor ,\n'--custom-border-width-focus': field()?.controlStyle?.focusBorderWidth ,\n'--custom-bg-color-focus': field()?.controlStyle?.focusBackground ,\n'--custom-border-color-hover': field()?.controlStyle?.hoverBorderColor ,\n'--custom-border-width-hover': field()?.controlStyle?.hoverBorderWidth ,\n'--custom-border-color-error': field()?.controlStyle?.errorBorderColor ,\n'--custom-border-width-error': field()?.controlStyle?.errorBorderWidth ,\n'--custom-font-size': field()?.controlStyle?.fontSize ,\n'--custom-font-weight': field()?.controlStyle?.fontWeight ,\n'--custom-font-family': field()?.controlStyle?.fontFamily ,\n'--custom-font-color': field()?.controlStyle?.color ,\n'--custom-caret-color': field()?.controlStyle?.caretColor ,\n'--custom-font-color-disabled' : field()?.controlStyle?.disableColor ,\n'--custom-bg-color-disabled' : field()?.controlStyle?.disableBackground ,\n}\"\n>\n @if(reactiveFormControlobject()) {\n <input\n matInput\n autocomplete=\"off\"\n [type]=\"field()?.controlType\"\n [name]=\"field()?.fieldNameAttribute\"\n [id]=\"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()?.fieldNameAttribute\"\n [id]=\"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()\"\n [value]=\"inputValue\"\n />\n }\n\n <mat-error *ngIf=\"false\">\n {{ field()?.validators?.isRequiredMessage }}\n </mat-error>\n</mat-form-field>\n<div>\n <span class=\"below-input-text\">{{field()?.configData?.subscriptText}}</span>\n <span [innerHTML]=\"field()?.configData?.innerHTML\"></span>\n</div>\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:0!important}.below-input-text{font-weight:400;font-size:12px;color:#444;font-family:Mulish}.error-message{color:red}.innerSubscriptText{font-weight:800;font-size:12px;color:#fb0!important;font-family:Mulish}*{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}.hyperlink{font-weight:700;font-size:12px;color:#fb0}\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: "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"] }] });
|
|
3506
3580
|
}
|
|
3507
3581
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TextboxWithTextComponent, decorators: [{
|
|
3508
3582
|
type: Component,
|
|
@@ -3517,7 +3591,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
3517
3591
|
useExisting: TextboxWithTextComponent,
|
|
3518
3592
|
multi: true,
|
|
3519
3593
|
},
|
|
3520
|
-
], template: "<label\n class=\"field-lable\"\n *ngIf=\"field() && field()?.isVisible && field().isShowLabel\"\n >{{ field()?.label\n }}<span style=\"color: red\" *ngIf=\"field() && field()?.validators?.isRequired\"\n >*</span\n ></label\n>\n<mat-form-field\n class=\"w-100\"\n appearance=\"outline\"\n *ngIf=\"field() && field()?.isVisible\"\n [ngStyle]=\"{\n'--custom-border-color': field()?.controlStyle?.borderColor ,\n'--custom-border-width': field()?.controlStyle?.borderWidth ,\n'--custom-border-radius': field()?.controlStyle?.borderRadius ,\n'--custom-bg-color': field()?.controlStyle?.background ,\n'--custom-border-color-focus': field()?.controlStyle?.focusBorderColor ,\n'--custom-border-width-focus': field()?.controlStyle?.focusBorderWidth ,\n'--custom-bg-color-focus': field()?.controlStyle?.focusBackground ,\n'--custom-border-color-hover': field()?.controlStyle?.hoverBorderColor ,\n'--custom-border-width-hover': field()?.controlStyle?.hoverBorderWidth ,\n'--custom-border-color-error': field()?.controlStyle?.errorBorderColor ,\n'--custom-border-width-error': field()?.controlStyle?.errorBorderWidth ,\n'--custom-font-size': field()?.controlStyle?.fontSize ,\n'--custom-font-weight': field()?.controlStyle?.fontWeight ,\n'--custom-font-family': field()?.controlStyle?.fontFamily ,\n'--custom-font-color': field()?.controlStyle?.color ,\n'--custom-caret-color': field()?.controlStyle?.caretColor ,\n'--custom-font-color-disabled' : field()?.controlStyle?.disableColor ,\n'--custom-bg-color-disabled' : field()?.controlStyle?.disableBackground ,\n}\"\n>\n @if(reactiveFormControlobject()) {\n <input\n matInput\n autocomplete=\"off\"\n [type]=\"field()?.controlType\"\n [name]=\"field()?.
|
|
3594
|
+
], template: "<label\n class=\"field-lable\"\n *ngIf=\"field() && field()?.isVisible && field().isShowLabel\"\n >{{ field()?.label\n }}<span style=\"color: red\" *ngIf=\"field() && field()?.validators?.isRequired\"\n >*</span\n ></label\n>\n<mat-form-field\n class=\"w-100\"\n appearance=\"outline\"\n *ngIf=\"field() && field()?.isVisible\"\n [ngStyle]=\"{\n'--custom-border-color': field()?.controlStyle?.borderColor ,\n'--custom-border-width': field()?.controlStyle?.borderWidth ,\n'--custom-border-radius': field()?.controlStyle?.borderRadius ,\n'--custom-bg-color': field()?.controlStyle?.background ,\n'--custom-border-color-focus': field()?.controlStyle?.focusBorderColor ,\n'--custom-border-width-focus': field()?.controlStyle?.focusBorderWidth ,\n'--custom-bg-color-focus': field()?.controlStyle?.focusBackground ,\n'--custom-border-color-hover': field()?.controlStyle?.hoverBorderColor ,\n'--custom-border-width-hover': field()?.controlStyle?.hoverBorderWidth ,\n'--custom-border-color-error': field()?.controlStyle?.errorBorderColor ,\n'--custom-border-width-error': field()?.controlStyle?.errorBorderWidth ,\n'--custom-font-size': field()?.controlStyle?.fontSize ,\n'--custom-font-weight': field()?.controlStyle?.fontWeight ,\n'--custom-font-family': field()?.controlStyle?.fontFamily ,\n'--custom-font-color': field()?.controlStyle?.color ,\n'--custom-caret-color': field()?.controlStyle?.caretColor ,\n'--custom-font-color-disabled' : field()?.controlStyle?.disableColor ,\n'--custom-bg-color-disabled' : field()?.controlStyle?.disableBackground ,\n}\"\n>\n @if(reactiveFormControlobject()) {\n <input\n matInput\n autocomplete=\"off\"\n [type]=\"field()?.controlType\"\n [name]=\"field()?.fieldNameAttribute\"\n [id]=\"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()?.fieldNameAttribute\"\n [id]=\"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()\"\n [value]=\"inputValue\"\n />\n }\n\n <mat-error *ngIf=\"false\">\n {{ field()?.validators?.isRequiredMessage }}\n </mat-error>\n</mat-form-field>\n<div>\n <span class=\"below-input-text\">{{field()?.configData?.subscriptText}}</span>\n <span [innerHTML]=\"field()?.configData?.innerHTML\"></span>\n</div>\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:0!important}.below-input-text{font-weight:400;font-size:12px;color:#444;font-family:Mulish}.error-message{color:red}.innerSubscriptText{font-weight:800;font-size:12px;color:#fb0!important;font-family:Mulish}*{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}.hyperlink{font-weight:700;font-size:12px;color:#fb0}\n"] }]
|
|
3521
3595
|
}], propDecorators: { blur: [{
|
|
3522
3596
|
type: Output
|
|
3523
3597
|
}] } });
|
|
@@ -3654,6 +3728,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
3654
3728
|
}], ctorParameters: () => [{ type: i1$1.DomSanitizer }] });
|
|
3655
3729
|
|
|
3656
3730
|
class ToggleButtonComponent {
|
|
3731
|
+
ngOnInit() {
|
|
3732
|
+
initializeFieldNameAttribute(this.field());
|
|
3733
|
+
}
|
|
3657
3734
|
reactiveFormControlobject = input();
|
|
3658
3735
|
field = input.required();
|
|
3659
3736
|
selectedValue = null;
|
|
@@ -3691,7 +3768,7 @@ class ToggleButtonComponent {
|
|
|
3691
3768
|
useExisting: ToggleButtonComponent,
|
|
3692
3769
|
multi: true,
|
|
3693
3770
|
},
|
|
3694
|
-
], ngImport: i0, template: "<div style=\"position: relative\" [ngClass]=\"field()?.cssClass\">\n @if(reactiveFormControlobject()) {\n <mat-button-toggle-group [ngStyle]=\"{\n '--toggle-button-width': field()?.controlStyle?.width ,\n }\" name=\"
|
|
3771
|
+
], ngImport: i0, template: "<div style=\"position: relative\" [ngClass]=\"field()?.cssClass\">\n @if(reactiveFormControlobject()) {\n <mat-button-toggle-group [ngStyle]=\"{\n '--toggle-button-width': field()?.controlStyle?.width ,\n }\" [attr.name]=\"field()?.fieldNameAttribute\" class=\"custom-mat-toggle\" aria-label=\"Font Style\"\n *ngIf=\"field() && field()?.isVisible && field()?.configData?.options\" [value]=\"selectedValue\"\n (change)=\"onSelectionChange($event.value)\" [formControl]=\"reactiveFormControlobject()\">\n @for (data of field()?.configData?.options; track $index) {\n <mat-button-toggle [value]=\"data.value\">\n <img *ngIf=\"data.imgUrl && !data.tooltipText\" [src]=\"data.imgUrl\" alt=\"\" class=\"toggle-img mx-1\" />\n\n {{ data.label }}\n <span [appTooltipTemplate]=\"currentTooltip\" arrowPosition=\"left\" tooltipPosition=\"bottom\"\n *ngIf=\"data.imgUrl && data.tooltipText\">\n <img [src]=\"data.imgUrl\" class=\"toggle-img mx-1\" />\n </span>\n\n <!-- \u2705 Single template that uses current data -->\n <ng-template #currentTooltip>\n <span [innerHTML]=\"data.tooltipText\"></span>\n </ng-template>\n </mat-button-toggle>\n <div class=\"top-green-card\" *ngIf=\"data.toggleTopText\">\n <span class=\"second-box\">\n <img class=\"green-card-img\" *ngIf=\"data.topImage\" [src]=\"data.topImage\" alt=\"\" />\n <span>{{ data.toggleTopText }}</span>\n </span>\n </div>\n }\n </mat-button-toggle-group>\n }@else {\n <mat-button-toggle-group [ngStyle]=\"{\n '--toggle-button-width': field()?.controlStyle?.width ,\n }\" name=\"fontStyle\" class=\"custom-mat-toggle\" aria-label=\"Font Style\"\n *ngIf=\"field() && field()?.isVisible && field()?.configData?.options\" [(ngModel)]=\"selectedValue\"\n (change)=\"onSelectionChange($event.value)\">\n @for (data of field()?.configData?.options; track $index) {\n <mat-button-toggle [value]=\"data.value\">\n {{ data.label }}\n <!-- <span [appTooltipTemplate]=\"currentTooltip\" arrowPosition=\"left\" tooltipPosition=\"bottom\"\n *ngIf=\"data.imgUrl && data.tooltipText\">\n <img [src]=\"data.imgUrl\" />\n </span> -->\n\n <!-- \u2705 Single template that uses current data -->\n <!-- <ng-template #currentTooltip>\n <span [innerHTML]=\"data.tooltipText\"></span>\n </ng-template> -->\n </mat-button-toggle>\n <div class=\"top-green-card\" *ngIf=\"data.toggleTopText\">\n <span class=\"second-box\">\n <img class=\"green-card-img\" *ngIf=\"data.topImage\" [src]=\"data.topImage\" alt=\"\" />\n <span>{{ data.toggleTopText }}</span>\n </span>\n </div>\n }\n </mat-button-toggle-group>\n }\n</div>\n", styles: [":host ::ng-deep .mat-button-toggle-group-appearance-standard .mat-button-toggle-appearance-standard+.mat-button-toggle-appearance-standard{border:none}:host ::ng-deep .mat-button-toggle-standalone,.mat-button-toggle-group{border-radius:50px}:host ::ng-deep .mat-button-toggle-appearance-standard .mat-button-toggle-label-content{height:32px!important;transform:translateY(-9px);font-size:12px;font-weight:400;color:#444;letter-spacing:1px}:host ::ng-deep .mat-button-toggle-checked .mat-button-toggle-button{background:#fff!important;border-radius:50px!important;box-shadow:0 0 15px #00000014!important;height:32px;padding:0 24px;border:1px solid #ffbb00}:host ::ng-deep .mat-button-toggle-button{padding:0 24px}:host ::ng-deep .mat-button-toggle-checked .mat-button-toggle-label-content{font-weight:600!important;letter-spacing:1px}:host ::ng-deep .mat-button-toggle .mat-pseudo-checkbox{display:none}:host ::ng-deep .mat-button-toggle-standalone.mat-button-toggle-appearance-standard,.mat-button-toggle-group-appearance-standard{border:1px solid #ddd!important;background:#f5f5f5!important;height:33px}:host ::ng-deep .mat-button-toggle-group-appearance-standard .mat-button-toggle-appearance-standard+.mat-button-toggle-appearance-standard{border:none!important}:host ::ng-deep .mat-button-toggle-appearance-standard.mat-button-toggle-checked{background:#f5f5f5!important;border-radius:50px}.toggle-img{width:12px}:host ::ng-deep .mat-button-toggle-standalone,.mat-button-toggle-group{overflow:unset!important}.second-box{position:relative;top:-4px}.top-green-card{font-size:10px;font-weight:800;color:#fff;background:#169f7d;border-top-left-radius:999px;border-top-right-radius:999px;position:absolute;right:3em;padding:2px 16px 2px 12px;transform:translate(5px,-19px);z-index:99999;height:18px}.green-card-img{width:14.86px;margin-bottom:6px}:host ::ng-deep .mat-button-toggle-button{width:var(--toggle-button-width , 100%)!important}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonToggleModule }, { kind: "directive", type: i1$3.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i1$3.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: CustomizedTooltipDirective, selector: "[appTooltipTemplate]", inputs: ["appTooltipTemplate"] }] });
|
|
3695
3772
|
}
|
|
3696
3773
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ToggleButtonComponent, decorators: [{
|
|
3697
3774
|
type: Component,
|
|
@@ -3701,7 +3778,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
3701
3778
|
useExisting: ToggleButtonComponent,
|
|
3702
3779
|
multi: true,
|
|
3703
3780
|
},
|
|
3704
|
-
], template: "<div style=\"position: relative\" [ngClass]=\"field()?.cssClass\">\n @if(reactiveFormControlobject()) {\n <mat-button-toggle-group [ngStyle]=\"{\n '--toggle-button-width': field()?.controlStyle?.width ,\n }\" name=\"
|
|
3781
|
+
], template: "<div style=\"position: relative\" [ngClass]=\"field()?.cssClass\">\n @if(reactiveFormControlobject()) {\n <mat-button-toggle-group [ngStyle]=\"{\n '--toggle-button-width': field()?.controlStyle?.width ,\n }\" [attr.name]=\"field()?.fieldNameAttribute\" class=\"custom-mat-toggle\" aria-label=\"Font Style\"\n *ngIf=\"field() && field()?.isVisible && field()?.configData?.options\" [value]=\"selectedValue\"\n (change)=\"onSelectionChange($event.value)\" [formControl]=\"reactiveFormControlobject()\">\n @for (data of field()?.configData?.options; track $index) {\n <mat-button-toggle [value]=\"data.value\">\n <img *ngIf=\"data.imgUrl && !data.tooltipText\" [src]=\"data.imgUrl\" alt=\"\" class=\"toggle-img mx-1\" />\n\n {{ data.label }}\n <span [appTooltipTemplate]=\"currentTooltip\" arrowPosition=\"left\" tooltipPosition=\"bottom\"\n *ngIf=\"data.imgUrl && data.tooltipText\">\n <img [src]=\"data.imgUrl\" class=\"toggle-img mx-1\" />\n </span>\n\n <!-- \u2705 Single template that uses current data -->\n <ng-template #currentTooltip>\n <span [innerHTML]=\"data.tooltipText\"></span>\n </ng-template>\n </mat-button-toggle>\n <div class=\"top-green-card\" *ngIf=\"data.toggleTopText\">\n <span class=\"second-box\">\n <img class=\"green-card-img\" *ngIf=\"data.topImage\" [src]=\"data.topImage\" alt=\"\" />\n <span>{{ data.toggleTopText }}</span>\n </span>\n </div>\n }\n </mat-button-toggle-group>\n }@else {\n <mat-button-toggle-group [ngStyle]=\"{\n '--toggle-button-width': field()?.controlStyle?.width ,\n }\" name=\"fontStyle\" class=\"custom-mat-toggle\" aria-label=\"Font Style\"\n *ngIf=\"field() && field()?.isVisible && field()?.configData?.options\" [(ngModel)]=\"selectedValue\"\n (change)=\"onSelectionChange($event.value)\">\n @for (data of field()?.configData?.options; track $index) {\n <mat-button-toggle [value]=\"data.value\">\n {{ data.label }}\n <!-- <span [appTooltipTemplate]=\"currentTooltip\" arrowPosition=\"left\" tooltipPosition=\"bottom\"\n *ngIf=\"data.imgUrl && data.tooltipText\">\n <img [src]=\"data.imgUrl\" />\n </span> -->\n\n <!-- \u2705 Single template that uses current data -->\n <!-- <ng-template #currentTooltip>\n <span [innerHTML]=\"data.tooltipText\"></span>\n </ng-template> -->\n </mat-button-toggle>\n <div class=\"top-green-card\" *ngIf=\"data.toggleTopText\">\n <span class=\"second-box\">\n <img class=\"green-card-img\" *ngIf=\"data.topImage\" [src]=\"data.topImage\" alt=\"\" />\n <span>{{ data.toggleTopText }}</span>\n </span>\n </div>\n }\n </mat-button-toggle-group>\n }\n</div>\n", styles: [":host ::ng-deep .mat-button-toggle-group-appearance-standard .mat-button-toggle-appearance-standard+.mat-button-toggle-appearance-standard{border:none}:host ::ng-deep .mat-button-toggle-standalone,.mat-button-toggle-group{border-radius:50px}:host ::ng-deep .mat-button-toggle-appearance-standard .mat-button-toggle-label-content{height:32px!important;transform:translateY(-9px);font-size:12px;font-weight:400;color:#444;letter-spacing:1px}:host ::ng-deep .mat-button-toggle-checked .mat-button-toggle-button{background:#fff!important;border-radius:50px!important;box-shadow:0 0 15px #00000014!important;height:32px;padding:0 24px;border:1px solid #ffbb00}:host ::ng-deep .mat-button-toggle-button{padding:0 24px}:host ::ng-deep .mat-button-toggle-checked .mat-button-toggle-label-content{font-weight:600!important;letter-spacing:1px}:host ::ng-deep .mat-button-toggle .mat-pseudo-checkbox{display:none}:host ::ng-deep .mat-button-toggle-standalone.mat-button-toggle-appearance-standard,.mat-button-toggle-group-appearance-standard{border:1px solid #ddd!important;background:#f5f5f5!important;height:33px}:host ::ng-deep .mat-button-toggle-group-appearance-standard .mat-button-toggle-appearance-standard+.mat-button-toggle-appearance-standard{border:none!important}:host ::ng-deep .mat-button-toggle-appearance-standard.mat-button-toggle-checked{background:#f5f5f5!important;border-radius:50px}.toggle-img{width:12px}:host ::ng-deep .mat-button-toggle-standalone,.mat-button-toggle-group{overflow:unset!important}.second-box{position:relative;top:-4px}.top-green-card{font-size:10px;font-weight:800;color:#fff;background:#169f7d;border-top-left-radius:999px;border-top-right-radius:999px;position:absolute;right:3em;padding:2px 16px 2px 12px;transform:translate(5px,-19px);z-index:99999;height:18px}.green-card-img{width:14.86px;margin-bottom:6px}:host ::ng-deep .mat-button-toggle-button{width:var(--toggle-button-width , 100%)!important}\n"] }]
|
|
3705
3782
|
}], propDecorators: { selectionChanged: [{
|
|
3706
3783
|
type: Output
|
|
3707
3784
|
}], change: [{
|
|
@@ -6505,7 +6582,7 @@ class MedialQuestionsComponent {
|
|
|
6505
6582
|
this.questionsValueChange.emit(this.personUwAnswers);
|
|
6506
6583
|
}
|
|
6507
6584
|
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 });
|
|
6508
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: MedialQuestionsComponent, isStandalone: true, selector: "lib-medial-questions", inputs: { clusterId: { classPropertyName: "clusterId", publicName: "clusterId", isSignal: true, isRequired: false, transformFunction: null }, triggerValidation: { classPropertyName: "triggerValidation", publicName: "triggerValidation", isSignal: false, isRequired: false, transformFunction: null }, medialQuestionResponse: { classPropertyName: "medialQuestionResponse", publicName: "medialQuestionResponse", isSignal: true, isRequired: false, transformFunction: null }, personUWOpenQuoteResponse: { classPropertyName: "personUWOpenQuoteResponse", publicName: "personUWOpenQuoteResponse", isSignal: true, isRequired: false, transformFunction: null }, defaultValues: { classPropertyName: "defaultValues", publicName: "defaultValues", isSignal: true, isRequired: false, transformFunction: null }, personType: { classPropertyName: "personType", publicName: "personType", isSignal: true, isRequired: false, transformFunction: null }, field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { questionsValueChange: "questionsValueChange" }, viewQueries: [{ propertyName: "addressInput", first: true, predicate: ["addressInput"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div *ngFor=\"let section of questionList\">\n <div *ngIf=\"\n !checkIfValueIsEmpty(section['questions']) &&\n section['showSection']\n \" class=\"p-3 mb-4\" id=\"personUwMedicalQuestions\">\n <h6 class=\"page-title bold-label\">\n {{ getTitleCase(section[\"sectionName\"]) }}\n </h6>\n <!--<lib-hr-line [field]=\"horizontalLineObj\" />-->\n <div *ngFor=\"let questions of section['questions']\" class=\"row\">\n <!-- <div *ngIf=\"questions['questionType'] === 'IMAGE TEXT'\">\n <img [src]=\"questions['sampleS3Link']\" class=\"d-block mx-auto\" [alt]=\"questions['title']\">\n <h3 [innerHTML]=\"questions['questionText']\"></h3>\n </div> -->\n\n <div [ngClass]=\"questions?.field?.cssClass\" *ngIf=\"\n questions['questionType'] === 'FREE TEXT' &&\n questions['cammundaQuestionCode'] !== 'QHT' &&\n questions['isShowQuestionInUI']\n \">\n <div class=\"col-12 px-0 my-1\">\n <lib-textbox [(ngModel)]=\"personUwAnswers[questions.questionId]\" [field]=\"questions['field']\"\n (blur)=\"validateField(questions.questionId, questions); removeSubQuestionValues(); handleQuestionChange()\" />\n <div class=\"error-message text-danger mt-1\" *ngIf=\"hasAnyFieldError(questions.questionId)\">\n {{ getFieldErrorMessage(questions.questionId, questions) }}\n </div>\n </div>\n </div>\n\n <div [ngClass]=\"questions?.field?.cssClass\" *ngIf=\"\n questions['questionType'] === 'HEIGHTINPUT' &&\n questions['cammundaQuestionCode'] === 'QHTF' &&\n questions['isShowQuestionInUI']\n \">\n <label class=\"card-topic d-block field-lable\">Height\n <span style=\"color: #ee0000\">*</span>\n </label>\n <div [class]=\" 'col-auto px-0 my-0 py-0 heightinput medicalQuestionsHeightInput'\"\n id=\"medicalQuestionsHeightInput\" (focusout)=\"validateField(questions.questionId, questions)\">\n <div class=\"row col-12 my-1\" *ngIf=\"personUwAnswers['medicalQuestionsHeightUnit'] === 'CM'\">\n <div class=\"col-7 py-0 heightInputs\">\n <lib-textbox [(ngModel)]=\"personUwAnswers['medicalQuestionsHeightInput']\"\n (blur)=\"validateField(questions.questionId, questions)\" (ngModelChange)=\"removeSubQuestionValues(); handleQuestionChange()\"\n [field]=\"medQuestionObj['QHT']['field']\" />\n </div>\n <div class=\"col-5\">\n <lib-select [(ngModel)]=\"personUwAnswers['medicalQuestionsHeightUnit']\"\n [field]=\"medQuestionObj['heightObjectTypes']\" (blur)=\"validateField(questions.questionId, questions)\"\n (ngModelChange)=\"validateField(questions.questionId, questions); checkAndUpdateHeightUnit()\" />\n </div>\n </div>\n <div class=\"row\" *ngIf=\"\n personUwAnswers[\n 'medicalQuestionsHeightUnit'\n ] === 'FEET'\n \">\n <div class=\"col-4 py-0 my-1\">\n <lib-select [(ngModel)]=\"personUwAnswers['medicalQuestionFeetInput']\"\n (blur)=\"validateField(questions.questionId, questions)\" (ngModelChange)=\"removeSubQuestionValues(); handleQuestionChange()\"\n [field]=\"medQuestionObj['QHTF']['field']\" />\n </div>\n <div class=\"col-4 py-0 my-1\">\n <lib-select [(ngModel)]=\"personUwAnswers['medicalQuestionsInchesInput']\"\n (blur)=\"validateField(questions.questionId, questions)\" (ngModelChange)=\"removeSubQuestionValues(); handleQuestionChange()\"\n [field]=\"medQuestionObj['QHTI']['field']\" />\n </div>\n <div class=\"col-4 py-0 my-1\">\n <lib-select [(ngModel)]=\"personUwAnswers['medicalQuestionsHeightUnit']\"\n [field]=\"medQuestionObj['heightObjectTypes']\" (blur)=\"validateField(questions.questionId, questions)\"\n (ngModelChange)=\"checkAndUpdateHeightUnit()\" />\n </div>\n </div>\n\n </div>\n <div class=\"error-message text-danger mt-1\" *ngIf=\"hasAnyFieldError(questions.questionId)\">\n {{ getFieldErrorMessage(questions.questionId, questions) }}\n </div>\n </div>\n <div class=\"row mt-0 pt-0\" *ngIf=\"\n questions['questionType'] === 'MAP' &&\n questions['isShowQuestionInUI']\n \">\n\n\n <div class=\"map-container\">\n <div class=\"address-search-container mb-3\">\n\n <div class=\"row mb-3\">\n <div class=\"col-6\">\n <label class=\"form-label card-topic\">Longitude</label>\n <input type=\"number\" class=\"form-control\" autocomplete=\"off\" [(ngModel)]=\"longitude\"\n placeholder=\"Enter longitude\" step=\"any\" readonly\n (blur)=\"validateField(questions.questionId, questions)\">\n </div>\n <div class=\"col-6\">\n <label class=\"form-label card-topic\">Latitude</label>\n <input type=\"number\" class=\"form-control\" autocomplete=\"off\" [(ngModel)]=\"latitude\"\n placeholder=\"Enter latitude\" step=\"any\" readonly\n (blur)=\"validateField(questions.questionId, questions)\">\n </div>\n </div>\n\n <input #addressInput type=\"text\" class=\"form-control\" placeholder=\"Search for address\"\n (keyup)=\"onAddressInputKeyup($event)\" (focus)=\"showDropdown = true\" (blur)=\"onInputBlur()\"\n autocomplete=\"off\">\n <div *ngIf=\"showDropdown && addressSuggestions.length > 0\"\n class=\"autocomplete-dropdown position-absolute w-100 mt-1\"\n style=\"z-index: 1000; max-height: 200px; overflow-y: auto; background: white; border: 1px solid #ccc; border-radius: 4px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);\">\n <div *ngFor=\"let suggestion of addressSuggestions; let i = index\" class=\"dropdown-item p-2\"\n style=\"cursor: pointer; border-bottom: 1px solid #eee;\" (mousedown)=\"selectAddress(suggestion)\"\n (mouseenter)=\"hoveredIndex = i\" [class.bg-light]=\"hoveredIndex === i\">\n <div class=\"fw-bold\">{{ suggestion.main_text }}</div>\n <small class=\"text-muted\">{{ suggestion.secondary_text }}</small>\n </div>\n </div>\n <small class=\"text-muted\">Start typing to search for addresses</small>\n </div>\n <google-map [center]=\"center\" [zoom]=\"zoom\">\n <map-marker [position]=\"currentCoordinates\"></map-marker>\n </google-map>\n </div>\n </div>\n\n\n <div [ngClass]=\"questions?.field?.cssClass\" *ngIf=\"\n (questions['questionType'] === 'RADIO BUTTON' ||\n questions['questionType'] === 'ADDMORE') &&\n questions['isShowQuestionInUI']\n \">\n <lib-radio [(ngModel)]=\"personUwAnswers[questions.questionId]\"\n (blur)=\"validateField(questions.questionId, questions)\"\n (ngModelChange)=\"validateField(questions.questionId, questions); removeSubQuestionValues(); handleQuestionChange()\"\n [field]=\"questions['field']\" />\n <div class=\"error-message text-danger mt-1\" *ngIf=\"hasAnyFieldError(questions.questionId)\">\n {{ getFieldErrorMessage(questions.questionId, questions) }}\n </div>\n </div>\n\n <div class=\"my-1\" [ngClass]=\"questions?.field?.cssClass\" *ngIf=\"\n questions['questionType'] === 'CHECKBOX' &&\n questions['isShowQuestionInUI']\n \">\n <lib-multiple-select [(ngModel)]=\"personUwAnswers[questions.questionId]\"\n (click)=\"validateField(questions.questionId, questions)\"\n (ngModelChange)=\"\n validateField(questions.questionId, questions);\n valueChangeForMultiselect(questions)\n \"\n [field]=\"questions['field']\"\n />\n <div class=\"error-message text-danger mt-1\" *ngIf=\"hasAnyFieldError(questions.questionId)\">\n {{ getFieldErrorMessage(questions.questionId, questions) }}\n </div>\n </div>\n\n <div class=\"my-1\" [ngClass]=\"questions?.field?.cssClass\" *ngIf=\"\n questions['questionType'] === 'DECLARATION' &&\n questions['isShowQuestionInUI']\n \">\n <lib-checkbox [(ngModel)]=\"personUwAnswers[questions.questionId]\"\n (blur)=\"validateField(questions.questionId, questions)\"\n (ngModelChange)=\"validateField(questions.questionId, questions); removeSubQuestionValues(); handleQuestionChange()\"\n [field]=\"questions['field']\" />\n <div class=\"error-message text-danger mt-1\" *ngIf=\"hasAnyFieldError(questions.questionId)\">\n {{ getFieldErrorMessage(questions.questionId, questions) }}\n </div>\n </div>\n\n <div class=\"my-1\" [ngClass]=\"questions?.field?.cssClass\" *ngIf=\"\n questions['questionType'] === 'DROPDOWN' &&\n questions['isShowQuestionInUI']\n \" (focusout)=\"validateField(questions.questionId, questions)\">\n <lib-select [(ngModel)]=\"personUwAnswers[questions.questionId]\" [field]=\"questions['field']\"\n (blur)=\"validateField(questions.questionId, questions)\"\n (ngModelChange)=\"validateField(questions.questionId, questions); removeSubQuestionValues(); handleQuestionChange()\" />\n <div class=\"error-message text-danger mt-1\" *ngIf=\"hasAnyFieldError(questions.questionId)\">\n {{ getFieldErrorMessage(questions.questionId, questions) }}\n </div>\n </div>\n\n <div class=\"my-1\" [ngClass]=\"questions?.field?.cssClass\" *ngIf=\"\n questions['questionType'] === 'CALENDAR' &&\n questions['isShowQuestionInUI']\n \">\n <lib-dob [(ngModel)]=\"personUwAnswers[questions.questionId]\" [field]=\"questions['field']\"\n (blur)=\"validateField(questions.questionId, questions)\" (ngModelChange)=\"removeSubQuestionValues(); handleQuestionChange()\" />\n <div class=\"error-message text-danger mt-1\" *ngIf=\"hasAnyFieldError(questions.questionId)\">\n {{ getFieldErrorMessage(questions.questionId, questions) }}\n </div>\n </div>\n\n <!-- <div\n class=\"\"\n *ngIf=\"\n questions['questionType'] === 'HEIGHTINPUT' &&\n questions['cammundaQuestionCode'] === 'QHTF' &&\n questions['isShowQuestionInUI']\n \"\n >\n </div> -->\n <div class=\"my-1\" [ngClass]=\"questions?.field?.cssClass\" *ngIf=\"\n questions['questionType'] === 'DOCUPLOAD' &&\n questions['isShowQuestionInUI']\n \">\n <lib-upload [field]=\"questions['field']\" (filePreview)=\"onDocumentFilePreview($event)\"\n (blur)=\"validateField(questions.questionId, questions);\" />\n <lib-file-preview *ngIf=\" previewFile\" [field]=\"questions['field']\" [file]=\"previewFile\"\n (closed)=\"closeFilePreview()\">\n </lib-file-preview>\n </div>\n\n\n <div [ngClass]=\"questions?.field?.cssClass\" *ngIf=\"\n questions['questionType'] === 'PASSPORT_UPLOAD' &&\n questions['isShowQuestionInUI']\n \">\n <!-- pending -->\n </div>\n </div>\n </div>\n</div>\n", styles: [".map-container{width:100%;position:relative}.address-search-container{position:relative}.address-search-container input{width:100%;padding:10px;border:1px solid #ddd;border-radius:4px;box-sizing:border-box}.address-search-container input:focus{outline:none;border-color:#4285f4;box-shadow:0 0 0 2px #4285f433}.pac-container{z-index:10000!important;border-radius:4px;border:1px solid #ddd;box-shadow:0 2px 6px #0000004d}.pac-item{padding:10px;border-bottom:1px solid #eee;cursor:pointer}.pac-item:hover{background-color:#f5f5f5}.selected-address{padding:8px;background-color:#f8f9fa;border-radius:4px;border-left:3px solid #28a745}.map-container ::ng-deep google-map>div{height:400px!important;width:auto!important}.medicalQues{font-size:12px;font-style:normal;font-weight:400;line-height:normal}.heightinput{border:2px solid #fb0;padding:10px;border-radius:4px;width:fit-content}.heightInputs{display:flex;align-items:center;gap:10px}.blink_me{animation:blinker 1s linear infinite}.invalid-field-one-ui{border:2px solid #dc3545!important;box-shadow:0 0 0 3px #dc354526!important}.invalid-field-one-ui:focus{border-color:#dc3545!important;box-shadow:0 0 0 3px #dc354540!important}@keyframes blinker{50%{opacity:0}}.error-message{font-size:12px;color:#dc3545;margin-top:4px;font-weight:400}.text-danger{color:#dc3545!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: TextboxComponent, selector: "lib-textbox", inputs: ["field", "reactiveFormControlobject"], outputs: ["blur"] }, { kind: "component", type: RadioComponent, selector: "lib-radio", inputs: ["reactiveFormControlobject", "field"], outputs: ["change"] }, { kind: "component", type: CheckboxComponent, selector: "lib-checkbox", inputs: ["field", "reactiveFormControlobject"], outputs: ["change"] }, { kind: "component", type: SelectComponent, selector: "lib-select", inputs: ["field", "reactiveFormControlobject"], outputs: ["selectionChange", "infoClick"] }, { kind: "component", type: DobComponent, selector: "lib-dob", inputs: ["field", "reactiveFormControlobject"], outputs: ["blur", "valueChange", "dateSelected", "invalidDate"] }, { kind: "component", type: UploadComponent, selector: "lib-upload", inputs: ["documentUploaderField", "openQuoteImageObj", "field", "reactiveFormControlobject"], outputs: ["filesChanged", "fileRemoved", "filePreview"] }, { kind: "component", type: MultipleSelectComponent, selector: "lib-multiple-select", inputs: ["field", "reactiveFormControlobject"], outputs: ["selectionChange"] }, { kind: "ngmodule", type: GoogleMapsModule }, { kind: "component", type: i4$3.GoogleMap, selector: "google-map", inputs: ["height", "width", "mapId", "mapTypeId", "center", "zoom", "options"], outputs: ["mapInitialized", "authFailure", "boundsChanged", "centerChanged", "mapClick", "mapDblclick", "mapDrag", "mapDragend", "mapDragstart", "headingChanged", "idle", "maptypeidChanged", "mapMousemove", "mapMouseout", "mapMouseover", "projectionChanged", "mapRightclick", "tilesloaded", "tiltChanged", "zoomChanged"], exportAs: ["googleMap"] }, { kind: "directive", type: i4$3.MapMarker, selector: "map-marker", inputs: ["title", "position", "label", "clickable", "options", "icon", "visible"], outputs: ["animationChanged", "mapClick", "clickableChanged", "cursorChanged", "mapDblclick", "mapDrag", "mapDragend", "draggableChanged", "mapDragstart", "flatChanged", "iconChanged", "mapMousedown", "mapMouseout", "mapMouseover", "mapMouseup", "positionChanged", "mapRightclick", "shapeChanged", "titleChanged", "visibleChanged", "zindexChanged", "markerInitialized"], exportAs: ["mapMarker"] }, { kind: "component", type: FilePreviewComponent, selector: "lib-file-preview", inputs: ["field", "file"], outputs: ["closed"] }] });
|
|
6585
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: MedialQuestionsComponent, isStandalone: true, selector: "lib-medial-questions", inputs: { clusterId: { classPropertyName: "clusterId", publicName: "clusterId", isSignal: true, isRequired: false, transformFunction: null }, triggerValidation: { classPropertyName: "triggerValidation", publicName: "triggerValidation", isSignal: false, isRequired: false, transformFunction: null }, medialQuestionResponse: { classPropertyName: "medialQuestionResponse", publicName: "medialQuestionResponse", isSignal: true, isRequired: false, transformFunction: null }, personUWOpenQuoteResponse: { classPropertyName: "personUWOpenQuoteResponse", publicName: "personUWOpenQuoteResponse", isSignal: true, isRequired: false, transformFunction: null }, defaultValues: { classPropertyName: "defaultValues", publicName: "defaultValues", isSignal: true, isRequired: false, transformFunction: null }, personType: { classPropertyName: "personType", publicName: "personType", isSignal: true, isRequired: false, transformFunction: null }, field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { questionsValueChange: "questionsValueChange" }, viewQueries: [{ propertyName: "addressInput", first: true, predicate: ["addressInput"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div *ngFor=\"let section of questionList\">\n <div *ngIf=\"\n !checkIfValueIsEmpty(section['questions']) &&\n section['showSection']\n \" class=\"p-3 mb-4\" id=\"personUwMedicalQuestions\">\n <h6 class=\"page-title bold-label\">\n {{ getTitleCase(section[\"sectionName\"]) }}\n </h6>\n <!--<lib-hr-line [field]=\"horizontalLineObj\" />-->\n <div *ngFor=\"let questions of section['questions']\" class=\"row\">\n <!-- <div *ngIf=\"questions['questionType'] === 'IMAGE TEXT'\">\n <img [src]=\"questions['sampleS3Link']\" class=\"d-block mx-auto\" [alt]=\"questions['title']\">\n <h3 [innerHTML]=\"questions['questionText']\"></h3>\n </div> -->\n\n <div [ngClass]=\"questions?.field?.cssClass\" *ngIf=\"\n questions['questionType'] === 'FREE TEXT' &&\n questions['cammundaQuestionCode'] !== 'QHT' &&\n questions['isShowQuestionInUI']\n \">\n <div class=\"col-12 px-0 my-1\">\n <lib-textbox [(ngModel)]=\"personUwAnswers[questions.questionId]\" [field]=\"questions['field']\"\n (blur)=\"validateField(questions.questionId, questions); removeSubQuestionValues(); handleQuestionChange()\" />\n <div class=\"error-message text-danger mt-1\" *ngIf=\"hasAnyFieldError(questions.questionId)\">\n {{ getFieldErrorMessage(questions.questionId, questions) }}\n </div>\n </div>\n </div>\n\n <div [ngClass]=\"questions?.field?.cssClass\" *ngIf=\"\n questions['questionType'] === 'HEIGHTINPUT' &&\n questions['cammundaQuestionCode'] === 'QHTF' &&\n questions['isShowQuestionInUI']\n \">\n <label class=\"card-topic d-block field-lable\">Height\n <span style=\"color: #ee0000\">*</span>\n </label>\n <div [class]=\" 'col-auto px-0 my-0 py-0 heightinput medicalQuestionsHeightInput'\"\n id=\"medicalQuestionsHeightInput\" (focusout)=\"validateField(questions.questionId, questions)\">\n <div class=\"row col-12 my-1\" *ngIf=\"personUwAnswers['medicalQuestionsHeightUnit'] === 'CM'\">\n <div class=\"col-7 py-0 heightInputs\">\n <lib-textbox [(ngModel)]=\"personUwAnswers['medicalQuestionsHeightInput']\"\n (blur)=\"validateField(questions.questionId, questions)\" (ngModelChange)=\"removeSubQuestionValues(); handleQuestionChange()\"\n [field]=\"medQuestionObj['QHT']['field']\" />\n </div>\n <div class=\"col-5\">\n <lib-select [(ngModel)]=\"personUwAnswers['medicalQuestionsHeightUnit']\"\n [field]=\"medQuestionObj['heightObjectTypes']\" (blur)=\"validateField(questions.questionId, questions)\"\n (ngModelChange)=\"validateField(questions.questionId, questions); checkAndUpdateHeightUnit()\" />\n </div>\n </div>\n <div class=\"row\" *ngIf=\"\n personUwAnswers[\n 'medicalQuestionsHeightUnit'\n ] === 'FEET'\n \">\n <div class=\"col-4 py-0 my-1\">\n <lib-select [(ngModel)]=\"personUwAnswers['medicalQuestionFeetInput']\"\n (blur)=\"validateField(questions.questionId, questions)\" (ngModelChange)=\"removeSubQuestionValues(); handleQuestionChange()\"\n [field]=\"medQuestionObj['QHTF']['field']\" />\n </div>\n <div class=\"col-4 py-0 my-1\">\n <lib-select [(ngModel)]=\"personUwAnswers['medicalQuestionsInchesInput']\"\n (blur)=\"validateField(questions.questionId, questions)\" (ngModelChange)=\"removeSubQuestionValues(); handleQuestionChange()\"\n [field]=\"medQuestionObj['QHTI']['field']\" />\n </div>\n <div class=\"col-4 py-0 my-1\">\n <lib-select [(ngModel)]=\"personUwAnswers['medicalQuestionsHeightUnit']\"\n [field]=\"medQuestionObj['heightObjectTypes']\" (blur)=\"validateField(questions.questionId, questions)\"\n (ngModelChange)=\"checkAndUpdateHeightUnit()\" />\n </div>\n </div>\n\n </div>\n <div class=\"error-message text-danger mt-1\" *ngIf=\"hasAnyFieldError(questions.questionId)\">\n {{ getFieldErrorMessage(questions.questionId, questions) }}\n </div>\n </div>\n <div class=\"row mt-0 pt-0\" *ngIf=\"\n questions['questionType'] === 'MAP' &&\n questions['isShowQuestionInUI']\n \">\n\n\n <div class=\"map-container\">\n <div class=\"address-search-container mb-3\">\n\n <div class=\"row mb-3\">\n <div class=\"col-6\">\n <label class=\"form-label card-topic\">Longitude</label>\n <input type=\"number\" class=\"form-control\" autocomplete=\"off\" [(ngModel)]=\"longitude\"\n placeholder=\"Enter longitude\" step=\"any\" readonly\n (blur)=\"validateField(questions.questionId, questions)\">\n </div>\n <div class=\"col-6\">\n <label class=\"form-label card-topic\">Latitude</label>\n <input type=\"number\" class=\"form-control\" autocomplete=\"off\" [(ngModel)]=\"latitude\"\n placeholder=\"Enter latitude\" step=\"any\" readonly\n (blur)=\"validateField(questions.questionId, questions)\">\n </div>\n </div>\n\n <input #addressInput type=\"text\" class=\"form-control\" placeholder=\"Search for address\"\n (keyup)=\"onAddressInputKeyup($event)\" (focus)=\"showDropdown = true\" (blur)=\"onInputBlur()\"\n autocomplete=\"off\">\n <div *ngIf=\"showDropdown && addressSuggestions.length > 0\"\n class=\"autocomplete-dropdown position-absolute w-100 mt-1\"\n style=\"z-index: 1000; max-height: 200px; overflow-y: auto; background: white; border: 1px solid #ccc; border-radius: 4px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);\">\n <div *ngFor=\"let suggestion of addressSuggestions; let i = index\" class=\"dropdown-item p-2\"\n style=\"cursor: pointer; border-bottom: 1px solid #eee;\" (mousedown)=\"selectAddress(suggestion)\"\n (mouseenter)=\"hoveredIndex = i\" [class.bg-light]=\"hoveredIndex === i\">\n <div class=\"fw-bold\">{{ suggestion.main_text }}</div>\n <small class=\"text-muted\">{{ suggestion.secondary_text }}</small>\n </div>\n </div>\n <small class=\"text-muted\">Start typing to search for addresses</small>\n </div>\n <google-map [center]=\"center\" [zoom]=\"zoom\">\n <map-marker [position]=\"currentCoordinates\"></map-marker>\n </google-map>\n </div>\n </div>\n\n\n <div [ngClass]=\"questions?.field?.cssClass\" *ngIf=\"\n (questions['questionType'] === 'RADIO BUTTON' ||\n questions['questionType'] === 'ADDMORE') &&\n questions['isShowQuestionInUI']\n \">\n <lib-radio [(ngModel)]=\"personUwAnswers[questions.questionId]\"\n (blur)=\"validateField(questions.questionId, questions)\"\n (ngModelChange)=\"validateField(questions.questionId, questions); removeSubQuestionValues(); handleQuestionChange()\"\n [field]=\"questions['field']\" />\n <div class=\"error-message text-danger mt-1\" *ngIf=\"hasAnyFieldError(questions.questionId)\">\n {{ getFieldErrorMessage(questions.questionId, questions) }}\n </div>\n </div>\n\n <div class=\"my-1\" [ngClass]=\"questions?.field?.cssClass\" *ngIf=\"\n questions['questionType'] === 'CHECKBOX' &&\n questions['isShowQuestionInUI']\n \">\n <lib-multiple-select [(ngModel)]=\"personUwAnswers[questions.questionId]\"\n (click)=\"validateField(questions.questionId, questions)\"\n (ngModelChange)=\"\n validateField(questions.questionId, questions);\n valueChangeForMultiselect(questions)\n \"\n [field]=\"questions['field']\"\n />\n <div class=\"error-message text-danger mt-1\" *ngIf=\"hasAnyFieldError(questions.questionId)\">\n {{ getFieldErrorMessage(questions.questionId, questions) }}\n </div>\n </div>\n\n <div class=\"my-1\" [ngClass]=\"questions?.field?.cssClass\" *ngIf=\"\n questions['questionType'] === 'DECLARATION' &&\n questions['isShowQuestionInUI']\n \">\n <lib-checkbox [(ngModel)]=\"personUwAnswers[questions.questionId]\"\n (blur)=\"validateField(questions.questionId, questions)\"\n (ngModelChange)=\"validateField(questions.questionId, questions); removeSubQuestionValues(); handleQuestionChange()\"\n [field]=\"questions['field']\" />\n <div class=\"error-message text-danger mt-1\" *ngIf=\"hasAnyFieldError(questions.questionId)\">\n {{ getFieldErrorMessage(questions.questionId, questions) }}\n </div>\n </div>\n\n <div class=\"my-1\" [ngClass]=\"questions?.field?.cssClass\" *ngIf=\"\n questions['questionType'] === 'DROPDOWN' &&\n questions['isShowQuestionInUI']\n \" (focusout)=\"validateField(questions.questionId, questions)\">\n {{questions['field'].isDisable}}\n <lib-select [(ngModel)]=\"personUwAnswers[questions.questionId]\" [field]=\"questions['field']\"\n (blur)=\"validateField(questions.questionId, questions)\"\n (ngModelChange)=\"validateField(questions.questionId, questions); removeSubQuestionValues(); handleQuestionChange()\" />\n <div class=\"error-message text-danger mt-1\" *ngIf=\"hasAnyFieldError(questions.questionId)\">\n {{ getFieldErrorMessage(questions.questionId, questions) }}\n </div>\n </div>\n\n <div class=\"my-1\" [ngClass]=\"questions?.field?.cssClass\" *ngIf=\"\n questions['questionType'] === 'CALENDAR' &&\n questions['isShowQuestionInUI']\n \">\n <lib-dob [(ngModel)]=\"personUwAnswers[questions.questionId]\" [field]=\"questions['field']\"\n (blur)=\"validateField(questions.questionId, questions)\" (ngModelChange)=\"removeSubQuestionValues(); handleQuestionChange()\" />\n <div class=\"error-message text-danger mt-1\" *ngIf=\"hasAnyFieldError(questions.questionId)\">\n {{ getFieldErrorMessage(questions.questionId, questions) }}\n </div>\n </div>\n\n <!-- <div\n class=\"\"\n *ngIf=\"\n questions['questionType'] === 'HEIGHTINPUT' &&\n questions['cammundaQuestionCode'] === 'QHTF' &&\n questions['isShowQuestionInUI']\n \"\n >\n </div> -->\n <div class=\"my-1\" [ngClass]=\"questions?.field?.cssClass\" *ngIf=\"\n questions['questionType'] === 'DOCUPLOAD' &&\n questions['isShowQuestionInUI']\n \">\n <lib-upload [field]=\"questions['field']\" (filePreview)=\"onDocumentFilePreview($event)\"\n (blur)=\"validateField(questions.questionId, questions);\" />\n <lib-file-preview *ngIf=\" previewFile\" [field]=\"questions['field']\" [file]=\"previewFile\"\n (closed)=\"closeFilePreview()\">\n </lib-file-preview>\n </div>\n\n\n <div [ngClass]=\"questions?.field?.cssClass\" *ngIf=\"\n questions['questionType'] === 'PASSPORT_UPLOAD' &&\n questions['isShowQuestionInUI']\n \">\n <!-- pending -->\n </div>\n </div>\n </div>\n</div>\n", styles: [".map-container{width:100%;position:relative}.address-search-container{position:relative}.address-search-container input{width:100%;padding:10px;border:1px solid #ddd;border-radius:4px;box-sizing:border-box}.address-search-container input:focus{outline:none;border-color:#4285f4;box-shadow:0 0 0 2px #4285f433}.pac-container{z-index:10000!important;border-radius:4px;border:1px solid #ddd;box-shadow:0 2px 6px #0000004d}.pac-item{padding:10px;border-bottom:1px solid #eee;cursor:pointer}.pac-item:hover{background-color:#f5f5f5}.selected-address{padding:8px;background-color:#f8f9fa;border-radius:4px;border-left:3px solid #28a745}.map-container ::ng-deep google-map>div{height:400px!important;width:auto!important}.medicalQues{font-size:12px;font-style:normal;font-weight:400;line-height:normal}.heightinput{border:2px solid #fb0;padding:10px;border-radius:4px;width:fit-content}.heightInputs{display:flex;align-items:center;gap:10px}.blink_me{animation:blinker 1s linear infinite}.invalid-field-one-ui{border:2px solid #dc3545!important;box-shadow:0 0 0 3px #dc354526!important}.invalid-field-one-ui:focus{border-color:#dc3545!important;box-shadow:0 0 0 3px #dc354540!important}@keyframes blinker{50%{opacity:0}}.error-message{font-size:12px;color:#dc3545;margin-top:4px;font-weight:400}.text-danger{color:#dc3545!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: TextboxComponent, selector: "lib-textbox", inputs: ["field", "reactiveFormControlobject"], outputs: ["blur"] }, { kind: "component", type: RadioComponent, selector: "lib-radio", inputs: ["reactiveFormControlobject", "field"], outputs: ["change"] }, { kind: "component", type: CheckboxComponent, selector: "lib-checkbox", inputs: ["field", "reactiveFormControlobject"], outputs: ["change"] }, { kind: "component", type: SelectComponent, selector: "lib-select", inputs: ["field", "reactiveFormControlobject"], outputs: ["selectionChange", "infoClick"] }, { kind: "component", type: DobComponent, selector: "lib-dob", inputs: ["field", "reactiveFormControlobject"], outputs: ["blur", "valueChange", "dateSelected", "invalidDate"] }, { kind: "component", type: UploadComponent, selector: "lib-upload", inputs: ["documentUploaderField", "openQuoteImageObj", "field", "reactiveFormControlobject"], outputs: ["filesChanged", "fileRemoved", "filePreview"] }, { kind: "component", type: MultipleSelectComponent, selector: "lib-multiple-select", inputs: ["field", "reactiveFormControlobject"], outputs: ["selectionChange"] }, { kind: "ngmodule", type: GoogleMapsModule }, { kind: "component", type: i4$3.GoogleMap, selector: "google-map", inputs: ["height", "width", "mapId", "mapTypeId", "center", "zoom", "options"], outputs: ["mapInitialized", "authFailure", "boundsChanged", "centerChanged", "mapClick", "mapDblclick", "mapDrag", "mapDragend", "mapDragstart", "headingChanged", "idle", "maptypeidChanged", "mapMousemove", "mapMouseout", "mapMouseover", "projectionChanged", "mapRightclick", "tilesloaded", "tiltChanged", "zoomChanged"], exportAs: ["googleMap"] }, { kind: "directive", type: i4$3.MapMarker, selector: "map-marker", inputs: ["title", "position", "label", "clickable", "options", "icon", "visible"], outputs: ["animationChanged", "mapClick", "clickableChanged", "cursorChanged", "mapDblclick", "mapDrag", "mapDragend", "draggableChanged", "mapDragstart", "flatChanged", "iconChanged", "mapMousedown", "mapMouseout", "mapMouseover", "mapMouseup", "positionChanged", "mapRightclick", "shapeChanged", "titleChanged", "visibleChanged", "zindexChanged", "markerInitialized"], exportAs: ["mapMarker"] }, { kind: "component", type: FilePreviewComponent, selector: "lib-file-preview", inputs: ["field", "file"], outputs: ["closed"] }] });
|
|
6509
6586
|
}
|
|
6510
6587
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MedialQuestionsComponent, decorators: [{
|
|
6511
6588
|
type: Component,
|
|
@@ -6523,7 +6600,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
6523
6600
|
GoogleMapsModule,
|
|
6524
6601
|
HrLineComponent,
|
|
6525
6602
|
FilePreviewComponent,
|
|
6526
|
-
], template: "<div *ngFor=\"let section of questionList\">\n <div *ngIf=\"\n !checkIfValueIsEmpty(section['questions']) &&\n section['showSection']\n \" class=\"p-3 mb-4\" id=\"personUwMedicalQuestions\">\n <h6 class=\"page-title bold-label\">\n {{ getTitleCase(section[\"sectionName\"]) }}\n </h6>\n <!--<lib-hr-line [field]=\"horizontalLineObj\" />-->\n <div *ngFor=\"let questions of section['questions']\" class=\"row\">\n <!-- <div *ngIf=\"questions['questionType'] === 'IMAGE TEXT'\">\n <img [src]=\"questions['sampleS3Link']\" class=\"d-block mx-auto\" [alt]=\"questions['title']\">\n <h3 [innerHTML]=\"questions['questionText']\"></h3>\n </div> -->\n\n <div [ngClass]=\"questions?.field?.cssClass\" *ngIf=\"\n questions['questionType'] === 'FREE TEXT' &&\n questions['cammundaQuestionCode'] !== 'QHT' &&\n questions['isShowQuestionInUI']\n \">\n <div class=\"col-12 px-0 my-1\">\n <lib-textbox [(ngModel)]=\"personUwAnswers[questions.questionId]\" [field]=\"questions['field']\"\n (blur)=\"validateField(questions.questionId, questions); removeSubQuestionValues(); handleQuestionChange()\" />\n <div class=\"error-message text-danger mt-1\" *ngIf=\"hasAnyFieldError(questions.questionId)\">\n {{ getFieldErrorMessage(questions.questionId, questions) }}\n </div>\n </div>\n </div>\n\n <div [ngClass]=\"questions?.field?.cssClass\" *ngIf=\"\n questions['questionType'] === 'HEIGHTINPUT' &&\n questions['cammundaQuestionCode'] === 'QHTF' &&\n questions['isShowQuestionInUI']\n \">\n <label class=\"card-topic d-block field-lable\">Height\n <span style=\"color: #ee0000\">*</span>\n </label>\n <div [class]=\" 'col-auto px-0 my-0 py-0 heightinput medicalQuestionsHeightInput'\"\n id=\"medicalQuestionsHeightInput\" (focusout)=\"validateField(questions.questionId, questions)\">\n <div class=\"row col-12 my-1\" *ngIf=\"personUwAnswers['medicalQuestionsHeightUnit'] === 'CM'\">\n <div class=\"col-7 py-0 heightInputs\">\n <lib-textbox [(ngModel)]=\"personUwAnswers['medicalQuestionsHeightInput']\"\n (blur)=\"validateField(questions.questionId, questions)\" (ngModelChange)=\"removeSubQuestionValues(); handleQuestionChange()\"\n [field]=\"medQuestionObj['QHT']['field']\" />\n </div>\n <div class=\"col-5\">\n <lib-select [(ngModel)]=\"personUwAnswers['medicalQuestionsHeightUnit']\"\n [field]=\"medQuestionObj['heightObjectTypes']\" (blur)=\"validateField(questions.questionId, questions)\"\n (ngModelChange)=\"validateField(questions.questionId, questions); checkAndUpdateHeightUnit()\" />\n </div>\n </div>\n <div class=\"row\" *ngIf=\"\n personUwAnswers[\n 'medicalQuestionsHeightUnit'\n ] === 'FEET'\n \">\n <div class=\"col-4 py-0 my-1\">\n <lib-select [(ngModel)]=\"personUwAnswers['medicalQuestionFeetInput']\"\n (blur)=\"validateField(questions.questionId, questions)\" (ngModelChange)=\"removeSubQuestionValues(); handleQuestionChange()\"\n [field]=\"medQuestionObj['QHTF']['field']\" />\n </div>\n <div class=\"col-4 py-0 my-1\">\n <lib-select [(ngModel)]=\"personUwAnswers['medicalQuestionsInchesInput']\"\n (blur)=\"validateField(questions.questionId, questions)\" (ngModelChange)=\"removeSubQuestionValues(); handleQuestionChange()\"\n [field]=\"medQuestionObj['QHTI']['field']\" />\n </div>\n <div class=\"col-4 py-0 my-1\">\n <lib-select [(ngModel)]=\"personUwAnswers['medicalQuestionsHeightUnit']\"\n [field]=\"medQuestionObj['heightObjectTypes']\" (blur)=\"validateField(questions.questionId, questions)\"\n (ngModelChange)=\"checkAndUpdateHeightUnit()\" />\n </div>\n </div>\n\n </div>\n <div class=\"error-message text-danger mt-1\" *ngIf=\"hasAnyFieldError(questions.questionId)\">\n {{ getFieldErrorMessage(questions.questionId, questions) }}\n </div>\n </div>\n <div class=\"row mt-0 pt-0\" *ngIf=\"\n questions['questionType'] === 'MAP' &&\n questions['isShowQuestionInUI']\n \">\n\n\n <div class=\"map-container\">\n <div class=\"address-search-container mb-3\">\n\n <div class=\"row mb-3\">\n <div class=\"col-6\">\n <label class=\"form-label card-topic\">Longitude</label>\n <input type=\"number\" class=\"form-control\" autocomplete=\"off\" [(ngModel)]=\"longitude\"\n placeholder=\"Enter longitude\" step=\"any\" readonly\n (blur)=\"validateField(questions.questionId, questions)\">\n </div>\n <div class=\"col-6\">\n <label class=\"form-label card-topic\">Latitude</label>\n <input type=\"number\" class=\"form-control\" autocomplete=\"off\" [(ngModel)]=\"latitude\"\n placeholder=\"Enter latitude\" step=\"any\" readonly\n (blur)=\"validateField(questions.questionId, questions)\">\n </div>\n </div>\n\n <input #addressInput type=\"text\" class=\"form-control\" placeholder=\"Search for address\"\n (keyup)=\"onAddressInputKeyup($event)\" (focus)=\"showDropdown = true\" (blur)=\"onInputBlur()\"\n autocomplete=\"off\">\n <div *ngIf=\"showDropdown && addressSuggestions.length > 0\"\n class=\"autocomplete-dropdown position-absolute w-100 mt-1\"\n style=\"z-index: 1000; max-height: 200px; overflow-y: auto; background: white; border: 1px solid #ccc; border-radius: 4px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);\">\n <div *ngFor=\"let suggestion of addressSuggestions; let i = index\" class=\"dropdown-item p-2\"\n style=\"cursor: pointer; border-bottom: 1px solid #eee;\" (mousedown)=\"selectAddress(suggestion)\"\n (mouseenter)=\"hoveredIndex = i\" [class.bg-light]=\"hoveredIndex === i\">\n <div class=\"fw-bold\">{{ suggestion.main_text }}</div>\n <small class=\"text-muted\">{{ suggestion.secondary_text }}</small>\n </div>\n </div>\n <small class=\"text-muted\">Start typing to search for addresses</small>\n </div>\n <google-map [center]=\"center\" [zoom]=\"zoom\">\n <map-marker [position]=\"currentCoordinates\"></map-marker>\n </google-map>\n </div>\n </div>\n\n\n <div [ngClass]=\"questions?.field?.cssClass\" *ngIf=\"\n (questions['questionType'] === 'RADIO BUTTON' ||\n questions['questionType'] === 'ADDMORE') &&\n questions['isShowQuestionInUI']\n \">\n <lib-radio [(ngModel)]=\"personUwAnswers[questions.questionId]\"\n (blur)=\"validateField(questions.questionId, questions)\"\n (ngModelChange)=\"validateField(questions.questionId, questions); removeSubQuestionValues(); handleQuestionChange()\"\n [field]=\"questions['field']\" />\n <div class=\"error-message text-danger mt-1\" *ngIf=\"hasAnyFieldError(questions.questionId)\">\n {{ getFieldErrorMessage(questions.questionId, questions) }}\n </div>\n </div>\n\n <div class=\"my-1\" [ngClass]=\"questions?.field?.cssClass\" *ngIf=\"\n questions['questionType'] === 'CHECKBOX' &&\n questions['isShowQuestionInUI']\n \">\n <lib-multiple-select [(ngModel)]=\"personUwAnswers[questions.questionId]\"\n (click)=\"validateField(questions.questionId, questions)\"\n (ngModelChange)=\"\n validateField(questions.questionId, questions);\n valueChangeForMultiselect(questions)\n \"\n [field]=\"questions['field']\"\n />\n <div class=\"error-message text-danger mt-1\" *ngIf=\"hasAnyFieldError(questions.questionId)\">\n {{ getFieldErrorMessage(questions.questionId, questions) }}\n </div>\n </div>\n\n <div class=\"my-1\" [ngClass]=\"questions?.field?.cssClass\" *ngIf=\"\n questions['questionType'] === 'DECLARATION' &&\n questions['isShowQuestionInUI']\n \">\n <lib-checkbox [(ngModel)]=\"personUwAnswers[questions.questionId]\"\n (blur)=\"validateField(questions.questionId, questions)\"\n (ngModelChange)=\"validateField(questions.questionId, questions); removeSubQuestionValues(); handleQuestionChange()\"\n [field]=\"questions['field']\" />\n <div class=\"error-message text-danger mt-1\" *ngIf=\"hasAnyFieldError(questions.questionId)\">\n {{ getFieldErrorMessage(questions.questionId, questions) }}\n </div>\n </div>\n\n <div class=\"my-1\" [ngClass]=\"questions?.field?.cssClass\" *ngIf=\"\n questions['questionType'] === 'DROPDOWN' &&\n questions['isShowQuestionInUI']\n \" (focusout)=\"validateField(questions.questionId, questions)\">\n <lib-select [(ngModel)]=\"personUwAnswers[questions.questionId]\" [field]=\"questions['field']\"\n (blur)=\"validateField(questions.questionId, questions)\"\n (ngModelChange)=\"validateField(questions.questionId, questions); removeSubQuestionValues(); handleQuestionChange()\" />\n <div class=\"error-message text-danger mt-1\" *ngIf=\"hasAnyFieldError(questions.questionId)\">\n {{ getFieldErrorMessage(questions.questionId, questions) }}\n </div>\n </div>\n\n <div class=\"my-1\" [ngClass]=\"questions?.field?.cssClass\" *ngIf=\"\n questions['questionType'] === 'CALENDAR' &&\n questions['isShowQuestionInUI']\n \">\n <lib-dob [(ngModel)]=\"personUwAnswers[questions.questionId]\" [field]=\"questions['field']\"\n (blur)=\"validateField(questions.questionId, questions)\" (ngModelChange)=\"removeSubQuestionValues(); handleQuestionChange()\" />\n <div class=\"error-message text-danger mt-1\" *ngIf=\"hasAnyFieldError(questions.questionId)\">\n {{ getFieldErrorMessage(questions.questionId, questions) }}\n </div>\n </div>\n\n <!-- <div\n class=\"\"\n *ngIf=\"\n questions['questionType'] === 'HEIGHTINPUT' &&\n questions['cammundaQuestionCode'] === 'QHTF' &&\n questions['isShowQuestionInUI']\n \"\n >\n </div> -->\n <div class=\"my-1\" [ngClass]=\"questions?.field?.cssClass\" *ngIf=\"\n questions['questionType'] === 'DOCUPLOAD' &&\n questions['isShowQuestionInUI']\n \">\n <lib-upload [field]=\"questions['field']\" (filePreview)=\"onDocumentFilePreview($event)\"\n (blur)=\"validateField(questions.questionId, questions);\" />\n <lib-file-preview *ngIf=\" previewFile\" [field]=\"questions['field']\" [file]=\"previewFile\"\n (closed)=\"closeFilePreview()\">\n </lib-file-preview>\n </div>\n\n\n <div [ngClass]=\"questions?.field?.cssClass\" *ngIf=\"\n questions['questionType'] === 'PASSPORT_UPLOAD' &&\n questions['isShowQuestionInUI']\n \">\n <!-- pending -->\n </div>\n </div>\n </div>\n</div>\n", styles: [".map-container{width:100%;position:relative}.address-search-container{position:relative}.address-search-container input{width:100%;padding:10px;border:1px solid #ddd;border-radius:4px;box-sizing:border-box}.address-search-container input:focus{outline:none;border-color:#4285f4;box-shadow:0 0 0 2px #4285f433}.pac-container{z-index:10000!important;border-radius:4px;border:1px solid #ddd;box-shadow:0 2px 6px #0000004d}.pac-item{padding:10px;border-bottom:1px solid #eee;cursor:pointer}.pac-item:hover{background-color:#f5f5f5}.selected-address{padding:8px;background-color:#f8f9fa;border-radius:4px;border-left:3px solid #28a745}.map-container ::ng-deep google-map>div{height:400px!important;width:auto!important}.medicalQues{font-size:12px;font-style:normal;font-weight:400;line-height:normal}.heightinput{border:2px solid #fb0;padding:10px;border-radius:4px;width:fit-content}.heightInputs{display:flex;align-items:center;gap:10px}.blink_me{animation:blinker 1s linear infinite}.invalid-field-one-ui{border:2px solid #dc3545!important;box-shadow:0 0 0 3px #dc354526!important}.invalid-field-one-ui:focus{border-color:#dc3545!important;box-shadow:0 0 0 3px #dc354540!important}@keyframes blinker{50%{opacity:0}}.error-message{font-size:12px;color:#dc3545;margin-top:4px;font-weight:400}.text-danger{color:#dc3545!important}\n"] }]
|
|
6603
|
+
], template: "<div *ngFor=\"let section of questionList\">\n <div *ngIf=\"\n !checkIfValueIsEmpty(section['questions']) &&\n section['showSection']\n \" class=\"p-3 mb-4\" id=\"personUwMedicalQuestions\">\n <h6 class=\"page-title bold-label\">\n {{ getTitleCase(section[\"sectionName\"]) }}\n </h6>\n <!--<lib-hr-line [field]=\"horizontalLineObj\" />-->\n <div *ngFor=\"let questions of section['questions']\" class=\"row\">\n <!-- <div *ngIf=\"questions['questionType'] === 'IMAGE TEXT'\">\n <img [src]=\"questions['sampleS3Link']\" class=\"d-block mx-auto\" [alt]=\"questions['title']\">\n <h3 [innerHTML]=\"questions['questionText']\"></h3>\n </div> -->\n\n <div [ngClass]=\"questions?.field?.cssClass\" *ngIf=\"\n questions['questionType'] === 'FREE TEXT' &&\n questions['cammundaQuestionCode'] !== 'QHT' &&\n questions['isShowQuestionInUI']\n \">\n <div class=\"col-12 px-0 my-1\">\n <lib-textbox [(ngModel)]=\"personUwAnswers[questions.questionId]\" [field]=\"questions['field']\"\n (blur)=\"validateField(questions.questionId, questions); removeSubQuestionValues(); handleQuestionChange()\" />\n <div class=\"error-message text-danger mt-1\" *ngIf=\"hasAnyFieldError(questions.questionId)\">\n {{ getFieldErrorMessage(questions.questionId, questions) }}\n </div>\n </div>\n </div>\n\n <div [ngClass]=\"questions?.field?.cssClass\" *ngIf=\"\n questions['questionType'] === 'HEIGHTINPUT' &&\n questions['cammundaQuestionCode'] === 'QHTF' &&\n questions['isShowQuestionInUI']\n \">\n <label class=\"card-topic d-block field-lable\">Height\n <span style=\"color: #ee0000\">*</span>\n </label>\n <div [class]=\" 'col-auto px-0 my-0 py-0 heightinput medicalQuestionsHeightInput'\"\n id=\"medicalQuestionsHeightInput\" (focusout)=\"validateField(questions.questionId, questions)\">\n <div class=\"row col-12 my-1\" *ngIf=\"personUwAnswers['medicalQuestionsHeightUnit'] === 'CM'\">\n <div class=\"col-7 py-0 heightInputs\">\n <lib-textbox [(ngModel)]=\"personUwAnswers['medicalQuestionsHeightInput']\"\n (blur)=\"validateField(questions.questionId, questions)\" (ngModelChange)=\"removeSubQuestionValues(); handleQuestionChange()\"\n [field]=\"medQuestionObj['QHT']['field']\" />\n </div>\n <div class=\"col-5\">\n <lib-select [(ngModel)]=\"personUwAnswers['medicalQuestionsHeightUnit']\"\n [field]=\"medQuestionObj['heightObjectTypes']\" (blur)=\"validateField(questions.questionId, questions)\"\n (ngModelChange)=\"validateField(questions.questionId, questions); checkAndUpdateHeightUnit()\" />\n </div>\n </div>\n <div class=\"row\" *ngIf=\"\n personUwAnswers[\n 'medicalQuestionsHeightUnit'\n ] === 'FEET'\n \">\n <div class=\"col-4 py-0 my-1\">\n <lib-select [(ngModel)]=\"personUwAnswers['medicalQuestionFeetInput']\"\n (blur)=\"validateField(questions.questionId, questions)\" (ngModelChange)=\"removeSubQuestionValues(); handleQuestionChange()\"\n [field]=\"medQuestionObj['QHTF']['field']\" />\n </div>\n <div class=\"col-4 py-0 my-1\">\n <lib-select [(ngModel)]=\"personUwAnswers['medicalQuestionsInchesInput']\"\n (blur)=\"validateField(questions.questionId, questions)\" (ngModelChange)=\"removeSubQuestionValues(); handleQuestionChange()\"\n [field]=\"medQuestionObj['QHTI']['field']\" />\n </div>\n <div class=\"col-4 py-0 my-1\">\n <lib-select [(ngModel)]=\"personUwAnswers['medicalQuestionsHeightUnit']\"\n [field]=\"medQuestionObj['heightObjectTypes']\" (blur)=\"validateField(questions.questionId, questions)\"\n (ngModelChange)=\"checkAndUpdateHeightUnit()\" />\n </div>\n </div>\n\n </div>\n <div class=\"error-message text-danger mt-1\" *ngIf=\"hasAnyFieldError(questions.questionId)\">\n {{ getFieldErrorMessage(questions.questionId, questions) }}\n </div>\n </div>\n <div class=\"row mt-0 pt-0\" *ngIf=\"\n questions['questionType'] === 'MAP' &&\n questions['isShowQuestionInUI']\n \">\n\n\n <div class=\"map-container\">\n <div class=\"address-search-container mb-3\">\n\n <div class=\"row mb-3\">\n <div class=\"col-6\">\n <label class=\"form-label card-topic\">Longitude</label>\n <input type=\"number\" class=\"form-control\" autocomplete=\"off\" [(ngModel)]=\"longitude\"\n placeholder=\"Enter longitude\" step=\"any\" readonly\n (blur)=\"validateField(questions.questionId, questions)\">\n </div>\n <div class=\"col-6\">\n <label class=\"form-label card-topic\">Latitude</label>\n <input type=\"number\" class=\"form-control\" autocomplete=\"off\" [(ngModel)]=\"latitude\"\n placeholder=\"Enter latitude\" step=\"any\" readonly\n (blur)=\"validateField(questions.questionId, questions)\">\n </div>\n </div>\n\n <input #addressInput type=\"text\" class=\"form-control\" placeholder=\"Search for address\"\n (keyup)=\"onAddressInputKeyup($event)\" (focus)=\"showDropdown = true\" (blur)=\"onInputBlur()\"\n autocomplete=\"off\">\n <div *ngIf=\"showDropdown && addressSuggestions.length > 0\"\n class=\"autocomplete-dropdown position-absolute w-100 mt-1\"\n style=\"z-index: 1000; max-height: 200px; overflow-y: auto; background: white; border: 1px solid #ccc; border-radius: 4px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);\">\n <div *ngFor=\"let suggestion of addressSuggestions; let i = index\" class=\"dropdown-item p-2\"\n style=\"cursor: pointer; border-bottom: 1px solid #eee;\" (mousedown)=\"selectAddress(suggestion)\"\n (mouseenter)=\"hoveredIndex = i\" [class.bg-light]=\"hoveredIndex === i\">\n <div class=\"fw-bold\">{{ suggestion.main_text }}</div>\n <small class=\"text-muted\">{{ suggestion.secondary_text }}</small>\n </div>\n </div>\n <small class=\"text-muted\">Start typing to search for addresses</small>\n </div>\n <google-map [center]=\"center\" [zoom]=\"zoom\">\n <map-marker [position]=\"currentCoordinates\"></map-marker>\n </google-map>\n </div>\n </div>\n\n\n <div [ngClass]=\"questions?.field?.cssClass\" *ngIf=\"\n (questions['questionType'] === 'RADIO BUTTON' ||\n questions['questionType'] === 'ADDMORE') &&\n questions['isShowQuestionInUI']\n \">\n <lib-radio [(ngModel)]=\"personUwAnswers[questions.questionId]\"\n (blur)=\"validateField(questions.questionId, questions)\"\n (ngModelChange)=\"validateField(questions.questionId, questions); removeSubQuestionValues(); handleQuestionChange()\"\n [field]=\"questions['field']\" />\n <div class=\"error-message text-danger mt-1\" *ngIf=\"hasAnyFieldError(questions.questionId)\">\n {{ getFieldErrorMessage(questions.questionId, questions) }}\n </div>\n </div>\n\n <div class=\"my-1\" [ngClass]=\"questions?.field?.cssClass\" *ngIf=\"\n questions['questionType'] === 'CHECKBOX' &&\n questions['isShowQuestionInUI']\n \">\n <lib-multiple-select [(ngModel)]=\"personUwAnswers[questions.questionId]\"\n (click)=\"validateField(questions.questionId, questions)\"\n (ngModelChange)=\"\n validateField(questions.questionId, questions);\n valueChangeForMultiselect(questions)\n \"\n [field]=\"questions['field']\"\n />\n <div class=\"error-message text-danger mt-1\" *ngIf=\"hasAnyFieldError(questions.questionId)\">\n {{ getFieldErrorMessage(questions.questionId, questions) }}\n </div>\n </div>\n\n <div class=\"my-1\" [ngClass]=\"questions?.field?.cssClass\" *ngIf=\"\n questions['questionType'] === 'DECLARATION' &&\n questions['isShowQuestionInUI']\n \">\n <lib-checkbox [(ngModel)]=\"personUwAnswers[questions.questionId]\"\n (blur)=\"validateField(questions.questionId, questions)\"\n (ngModelChange)=\"validateField(questions.questionId, questions); removeSubQuestionValues(); handleQuestionChange()\"\n [field]=\"questions['field']\" />\n <div class=\"error-message text-danger mt-1\" *ngIf=\"hasAnyFieldError(questions.questionId)\">\n {{ getFieldErrorMessage(questions.questionId, questions) }}\n </div>\n </div>\n\n <div class=\"my-1\" [ngClass]=\"questions?.field?.cssClass\" *ngIf=\"\n questions['questionType'] === 'DROPDOWN' &&\n questions['isShowQuestionInUI']\n \" (focusout)=\"validateField(questions.questionId, questions)\">\n {{questions['field'].isDisable}}\n <lib-select [(ngModel)]=\"personUwAnswers[questions.questionId]\" [field]=\"questions['field']\"\n (blur)=\"validateField(questions.questionId, questions)\"\n (ngModelChange)=\"validateField(questions.questionId, questions); removeSubQuestionValues(); handleQuestionChange()\" />\n <div class=\"error-message text-danger mt-1\" *ngIf=\"hasAnyFieldError(questions.questionId)\">\n {{ getFieldErrorMessage(questions.questionId, questions) }}\n </div>\n </div>\n\n <div class=\"my-1\" [ngClass]=\"questions?.field?.cssClass\" *ngIf=\"\n questions['questionType'] === 'CALENDAR' &&\n questions['isShowQuestionInUI']\n \">\n <lib-dob [(ngModel)]=\"personUwAnswers[questions.questionId]\" [field]=\"questions['field']\"\n (blur)=\"validateField(questions.questionId, questions)\" (ngModelChange)=\"removeSubQuestionValues(); handleQuestionChange()\" />\n <div class=\"error-message text-danger mt-1\" *ngIf=\"hasAnyFieldError(questions.questionId)\">\n {{ getFieldErrorMessage(questions.questionId, questions) }}\n </div>\n </div>\n\n <!-- <div\n class=\"\"\n *ngIf=\"\n questions['questionType'] === 'HEIGHTINPUT' &&\n questions['cammundaQuestionCode'] === 'QHTF' &&\n questions['isShowQuestionInUI']\n \"\n >\n </div> -->\n <div class=\"my-1\" [ngClass]=\"questions?.field?.cssClass\" *ngIf=\"\n questions['questionType'] === 'DOCUPLOAD' &&\n questions['isShowQuestionInUI']\n \">\n <lib-upload [field]=\"questions['field']\" (filePreview)=\"onDocumentFilePreview($event)\"\n (blur)=\"validateField(questions.questionId, questions);\" />\n <lib-file-preview *ngIf=\" previewFile\" [field]=\"questions['field']\" [file]=\"previewFile\"\n (closed)=\"closeFilePreview()\">\n </lib-file-preview>\n </div>\n\n\n <div [ngClass]=\"questions?.field?.cssClass\" *ngIf=\"\n questions['questionType'] === 'PASSPORT_UPLOAD' &&\n questions['isShowQuestionInUI']\n \">\n <!-- pending -->\n </div>\n </div>\n </div>\n</div>\n", styles: [".map-container{width:100%;position:relative}.address-search-container{position:relative}.address-search-container input{width:100%;padding:10px;border:1px solid #ddd;border-radius:4px;box-sizing:border-box}.address-search-container input:focus{outline:none;border-color:#4285f4;box-shadow:0 0 0 2px #4285f433}.pac-container{z-index:10000!important;border-radius:4px;border:1px solid #ddd;box-shadow:0 2px 6px #0000004d}.pac-item{padding:10px;border-bottom:1px solid #eee;cursor:pointer}.pac-item:hover{background-color:#f5f5f5}.selected-address{padding:8px;background-color:#f8f9fa;border-radius:4px;border-left:3px solid #28a745}.map-container ::ng-deep google-map>div{height:400px!important;width:auto!important}.medicalQues{font-size:12px;font-style:normal;font-weight:400;line-height:normal}.heightinput{border:2px solid #fb0;padding:10px;border-radius:4px;width:fit-content}.heightInputs{display:flex;align-items:center;gap:10px}.blink_me{animation:blinker 1s linear infinite}.invalid-field-one-ui{border:2px solid #dc3545!important;box-shadow:0 0 0 3px #dc354526!important}.invalid-field-one-ui:focus{border-color:#dc3545!important;box-shadow:0 0 0 3px #dc354540!important}@keyframes blinker{50%{opacity:0}}.error-message{font-size:12px;color:#dc3545;margin-top:4px;font-weight:400}.text-danger{color:#dc3545!important}\n"] }]
|
|
6527
6604
|
}], ctorParameters: () => [{ type: i0.NgZone }, { type: MasterService }], propDecorators: { questionsValueChange: [{
|
|
6528
6605
|
type: Output
|
|
6529
6606
|
}], triggerValidation: [{
|
|
@@ -7005,6 +7082,9 @@ class AnnuityCalculatorRadioComponent {
|
|
|
7005
7082
|
el;
|
|
7006
7083
|
constructor(el) {
|
|
7007
7084
|
this.el = el;
|
|
7085
|
+
effect(() => {
|
|
7086
|
+
initializeFieldNameAttribute(this.field());
|
|
7087
|
+
});
|
|
7008
7088
|
}
|
|
7009
7089
|
preSelectConfig = null;
|
|
7010
7090
|
// ngOnInit(): void {
|
|
@@ -7115,7 +7195,7 @@ class AnnuityCalculatorRadioComponent {
|
|
|
7115
7195
|
useExisting: forwardRef(() => AnnuityCalculatorRadioComponent),
|
|
7116
7196
|
multi: true
|
|
7117
7197
|
}
|
|
7118
|
-
], usesOnChanges: true, ngImport: i0, template: "\n\n<div class=\"acr-wrapper\">\n\n <!-- Top Header Label -->\n <div class=\"acr-sub-label\" *ngIf=\"field() && field()?.isVisible\">\n {{ field()?.label }}\n <span class=\"error-message\" *ngIf=\"field()?.validators?.isRequired\">*</span>\n </div>\n\n <!-- Radio Option Cards -->\n <div class=\"radio-btn-group1\" *ngIf=\"field()?.configData?.isShowRadioOption\">\n <div\n class=\"annuity-radio-card-gender\"\n *ngFor=\"let data of field()?.options\"\n [class.selected]=\"inputValue === data.value\"\n [class.disable-radio-btn]=\"field()?.isDisable || data.disabled === true || data.disabled === 'true'\"\n (click)=\"(data.disabled === true || data.disabled === 'true') ? null : toggleRadio(data.value, $event)\"\n >\n <!-- Hidden native radio input \u2014 enables proper [id]/[name] binding for form semantics.\n Parent projects can bind (change)=\"myHandler($event)\" on the host component. -->\n <input\n type=\"radio\"\n style=\"position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none;\"\n [id]=\"field()?.fieldName\"\n [name]=\"field()?.fieldName\"\n [value]=\"data.value\"\n [checked]=\"inputValue === data.value\"\n (growthRateChange)=\"toggleRadio(data.value, $event)\"\n />\n <span\n class=\"forRadioLabelAnnuityRadio\"\n [ngStyle]=\"{\n '--radio-button-font-weight': field()?.controlStyle?.fontWeight,\n '--radio-button-font-size': field()?.controlStyle?.fontSize,\n '--radio-button-font-color': field()?.controlStyle?.color\n }\"\n >{{ data.label }}</span>\n </div>\n </div>\n\n <!-- Card Container -->\n <div class=\"acr-card-container\" *ngIf=\"field()?.configData?.cardsValue?.length > 0\">\n <div class=\"acr-card-wrap\">\n <div class=\"acr-sub-label\" *ngIf=\"field()?.configData?.subLabel\">\n {{ field()?.configData?.subLabel }}\n </div>\n <div class=\"acr-new-cards-list\">\n <ng-container *ngFor=\"let card of field()?.configData?.cardsValue; let i = index\">\n <div\n class=\"acr-new-card\"\n [class.acr-new-card--selected]=\"selectedCard.value === card.value\"\n [class.acr-new-card--disabled]=\"card.disabled\"\n >\n selectedCard.value => {{selectedCard.value}} HHHHH card.value => {{card.value}} HHHH {{selectedCard.value === card.value}}\n <!-- Card Header: Radio + Label -->\n <div class=\"acr-new-card-header\" (click)=\"selectCard(card)\">\n selectedCard.value => {{selectedCard.value}} HHHHH card.value => {{card.value}}\n <span class=\"acr-new-radio\" [class.acr-new-radio--checked]=\"selectedCard.value === card.value\">\n <span class=\"acr-new-radio-inner\" *ngIf=\"selectedCard.value === card.value\"></span>\n </span>\n <span class=\"acr-new-card-label\">{{ card.label }}</span>\n </div>\n\n <!-- Three-column content row -->\n <div class=\"acr-new-content-row\">\n <!-- Left: amount -->\n <div class=\"acr-new-col-amount\">\n <div class=\"acr-new-main-value\">{{ card.mainValue }} / <span class=\"acr-new-main-frequency\">{{ card.mainFrequencyValue }}</span></div>\n <div class=\"acr-new-sub-value\">{{ card.subValue }} / <span class=\"acr-new-sub-frequency\">{{ card.subFrequencyValue }}</span></div>\n </div>\n <!-- Center: rate -->\n <div class=\"acr-new-col-rate\">\n <div class=\"acr-new-rate-percent\">{{ card.growthRate }}</div>\n <div class=\"acr-new-rate-percent\">Annuity Rate</div>\n </div>\n <!-- Right: guaranteed / variable -->\n <div class=\"acr-new-col-details\">\n <div class=\"acr-new-detail-row\">\n <span class=\"acr-new-detail-key\">Guaranteed :</span>\n <span class=\"acr-new-detail-val\">{{ card.guaranteed }}</span>\n </div>\n <div class=\"acr-new-detail-row\">\n <span class=\"acr-new-detail-key\">Variable :</span>\n <span class=\"acr-new-detail-val\">{{ card.variable }}</span>\n </div>\n </div>\n </div>\n\n <!-- Note outside card border, shown only when selected -->\n </div><!-- /acr-new-card -->\n <div class=\"acr-new-note\" *ngIf=\"selectedCard?.value === card.value && field()?.configData?.infoMessage\">\n <strong>Note:</strong> {{ field()?.configData?.infoMessage }}\n </div>\n </ng-container>\n </div><!-- /acr-new-cards-list -->\n </div><!-- /acr-card-wrap -->\n </div><!-- /acr-card-container -->\n\n</div>\n", styles: [".acr-wrapper{font-family:mulish!important;width:100%;display:flex;flex-direction:column}.forRadioLabelAnnuityRadio{font-size:12px!important;font-weight:400!important;cursor:pointer;color:#444!important;min-width:25%!important;height:fit-content}.required-star{color:red;margin-left:2px}.radio-btn-group1{display:flex;gap:4px;flex-wrap:wrap;padding-right:10px;padding-left:10px;height:42px;max-height:100px!important;line-height:15px}.annuity-radio-card-gender{border:1px solid rgba(218,218,218,1);border-radius:4px;padding:6px 20px;cursor:pointer;display:flex;align-items:center;justify-content:center;flex:1;-webkit-user-select:none;user-select:none;position:relative;overflow:visible}.annuity-radio-card-gender.selected{border-color:#fb0;border-width:1.6px}.annuity-radio-card-gender.selected:after{content:\"\";position:absolute;bottom:-16px;left:50%;transform:translate(-50%);width:0;height:0;z-index:3}.annuity-radio-card-gender.selected:before{content:\"\";position:absolute;bottom:-12px;left:50%;transform:translate(-50%);width:0;height:0;border-left:11px solid transparent;border-right:11px solid transparent;border-top:11px solid #fff;z-index:4}.annuity-radio-card-gender:hover:not(.disable-radio-btn){border-color:#ffd600}.disable-radio-btn{opacity:.55;pointer-events:none;background:#f5f5f5}.acr-card-container{position:relative;width:100%;padding-top:22px;box-sizing:border-box;padding-right:10px;padding-left:10px}.acr-card{background:#fff;border:1px solid rgba(218,218,218,1);border-radius:14px;padding:20px 18px 16px;width:100%;position:relative;overflow:visible;box-sizing:border-box}.acr-card:after{content:\"\";position:absolute;bottom:100%;left:var(--arrow-left, 40px);transform:translate(-50%);transition:left .2s ease;border-width:14px;border-style:solid;border-color:transparent transparent rgba(218,218,218,1) transparent;z-index:2}.acr-card:before{content:\"\";position:absolute;bottom:100%;left:var(--arrow-left, 40px);transform:translate(-50%);transition:left .2s ease;border-width:12px;border-style:solid;border-color:transparent transparent rgba(255,255,255,1) transparent;z-index:3}.acr-sub-label{font-size:10px;font-weight:700;color:#444;padding-right:10px;padding-left:10px;margin-top:10px}.acr-cards-row{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:30px}.acr-card-option{background:#fff;border:2px solid #E0E0E0;border-radius:12px;flex:1 1 0;max-width:none;cursor:pointer;display:flex;flex-direction:column;align-items:flex-start;-webkit-user-select:none;user-select:none;position:relative;overflow:visible;flex:0 0 calc((100% - 28px) / 3);max-width:calc((100% - 28px) / 3);padding:18px 16px;min-width:0}.acr-card-option.selected{border-color:#ffd600;box-shadow:0 0 0 1px #ffd600}.acr-card-option:hover:not(.disabled){border-color:#ffd600}.acr-card-option.disabled{opacity:.5;pointer-events:none}.acr-card-main-value{font-size:16px;font-weight:700;color:#444;margin-bottom:3px;line-height:20px}.acr-card-main-sub-value{font-size:16px;font-weight:400;color:#444;margin-bottom:3px;line-height:20px}.acr-card-sub-value{font-size:10px;font-weight:700;color:#444;line-height:14px}.acr-card-sub-sub-value{font-size:10px;font-weight:400;color:#444;line-height:14px}.acr-card-rate{background:linear-gradient(to right,#fb0,#fff7df,#fb0);color:#444;font-weight:700;font-size:10px;line-height:14px;padding:4px;margin-bottom:10px;margin-top:6px;width:100%;height:22px;text-align:center;box-sizing:border-box}.acr-card-details{width:100%;margin-bottom:14px;background-color:#f5f5f5;padding-left:10px;padding-right:10px;display:grid;grid-template-columns:max-content auto 1fr;column-gap:4px}.acr-card-detail-row{display:contents;font-size:10px;color:#444}.acr-card-detail-row span{font-weight:400;font-size:8px;line-height:14px;color:#444}.acr-card-detail-row strong{font-weight:600;color:#444;font-size:8px;line-height:14px;text-align:right}.acr-card-type{position:absolute;bottom:-14px;left:0;right:0;display:flex;justify-content:center}.acr-card-type-btn{border:none;border-radius:20px;padding:5px 22px;font-size:13px;font-weight:600;cursor:pointer;outline:none}.btn-high{background:#00946f;color:#fff;font-weight:700;font-size:10px;line-height:14px}.btn-medium{background:#66ccb2;color:#444;font-weight:700;font-size:10px;line-height:14px}.btn-low{background:#cef0e8;color:#444;font-weight:700;font-size:10px;line-height:14px}.acr-note{background:#ececec;color:#222;font-size:12px;border-radius:4px;padding:4px 8px;line-height:16px;width:100%;box-sizing:border-box;margin-top:8px;font-weight:400}.acr-note strong{font-weight:700;font-size:12px;line-height:16px;color:#222}.acr-card-wrap{background:#fff;border:1px solid rgba(218,218,218,1);border-radius:14px;width:100%;position:relative;overflow:visible;box-sizing:border-box}.acr-card-wrap:after{content:\"\";position:absolute;bottom:100%;left:var(--arrow-left, 40px);transform:translate(-50%);transition:left .2s ease;border-width:14px;border-style:solid;border-color:transparent transparent rgba(218,218,218,1) transparent;z-index:2}.acr-card-wrap:before{content:\"\";position:absolute;bottom:100%;left:var(--arrow-left, 40px);transform:translate(-50%);transition:left .2s ease;border-width:12px;border-style:solid;border-color:transparent transparent rgba(255,255,255,1) transparent;z-index:3}.acr-new-cards-list{display:flex;flex-direction:column;gap:0;padding:10px}.acr-new-card{border:1.6px solid #DADADA;border-radius:4px;cursor:pointer;-webkit-user-select:none;user-select:none;position:relative;background:#fff;overflow:hidden;box-sizing:border-box;padding:12px 14px 0;margin-bottom:14px}.acr-new-card--selected{border-color:#fb0;border-width:2px}.acr-new-card--disabled{opacity:.5;pointer-events:none}.acr-new-card:hover:not(.acr-new-card--disabled){border-color:#fb0}.acr-new-card-header{display:flex;align-items:center;gap:8px;margin-bottom:10px;cursor:pointer;width:fit-content}.acr-new-radio{width:16px;height:16px;border-radius:50%;border:1.5px solid #B4B4B4;background:#fff;flex-shrink:0;position:relative;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;cursor:pointer}.acr-new-radio--checked{border-color:#f0a000;border-width:2px;background:#fff}.acr-new-radio-inner{width:8px;height:8px;border-radius:50%;background:#f0a000;display:block}.acr-new-card-label{font-size:12px;font-weight:700;color:#222}.acr-new-content-row{display:flex;overflow:hidden;margin:0 8px 8px;gap:4px}.acr-new-col-amount{background:#e6f7f3;padding:8px;display:flex;flex-direction:column;justify-content:center}.acr-new-main-frequency{font-size:16px;font-weight:400}.acr-new-sub-frequency{font-size:10px;font-weight:400}.acr-new-main-value{font-size:16px;font-weight:700;color:#444;line-height:20px}.acr-new-sub-value{font-size:10px;font-weight:400;color:#444;line-height:14px}.acr-new-col-rate{background:#fff1cc;padding:4px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center}.acr-new-rate-percent{font-size:10px;font-weight:700;color:#444;line-height:14px}.acr-new-col-details{border:.5px solid rgba(218,218,218,1);background:#fff;padding:10px 14px 12px;flex:1.3;display:flex;flex-direction:column;justify-content:center;gap:5px}.acr-new-detail-row{display:flex;justify-content:space-between;gap:6px;align-items:baseline}.acr-new-detail-key{font-size:9px;font-weight:400;color:#444;white-space:nowrap}.acr-new-detail-val{font-size:9px;font-weight:700;color:#444;white-space:nowrap}.acr-new-note{background:#ececec;padding:4px 8px;font-size:12px;color:#444;line-height:16px;font-weight:400;margin-top:-14px;margin-bottom:14px}.acr-new-note strong{font-weight:700;font-size:12px;line-height:16px;color:#444}::ng-deep .relationship-radio-group .mat-mdc-radio-button .mat-mdc-radio-touch-target{width:12px!important;height:12px!important}::ng-deep .relationship-radio-group .mat-mdc-radio-button .mdc-form-field{gap:8px;align-items:center;display:flex}::ng-deep .relationship-radio-group .mat-mdc-radio-button .mdc-radio{flex-shrink:0;display:flex;align-items:center;justify-content:center}::ng-deep .relationship-radio-group .mat-mdc-radio-button .mat-ripple,::ng-deep .relationship-radio-group .mat-mdc-radio-button .mdc-radio__ripple{display:none!important}::ng-deep .relationship-radio-group .mdc-form-field>label{padding-left:0!important;cursor:pointer;line-height:12px;display:flex;align-items:center}.relationship-option-text{font-size:12px;font-weight:400;font-family:var(--custom-font-family, \"Mulish\");color:var(--custom-font-color, #444);line-height:14px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: MatRadioModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: FormsModule }] });
|
|
7198
|
+
], usesOnChanges: true, ngImport: i0, template: "\n\n<div class=\"acr-wrapper\">\n\n <!-- Top Header Label -->\n <div class=\"acr-sub-label\" *ngIf=\"field() && field()?.isVisible\">\n {{ field()?.label }}\n <span class=\"error-message\" *ngIf=\"field()?.validators?.isRequired\">*</span>\n </div>\n\n <!-- Radio Option Cards -->\n <div class=\"radio-btn-group1\" *ngIf=\"field()?.configData?.isShowRadioOption\">\n <div\n class=\"annuity-radio-card-gender\"\n *ngFor=\"let data of field()?.options\"\n [class.selected]=\"inputValue === data.value\"\n [class.disable-radio-btn]=\"field()?.isDisable || data.disabled === true || data.disabled === 'true'\"\n (click)=\"(data.disabled === true || data.disabled === 'true') ? null : toggleRadio(data.value, $event)\"\n >\n <!-- Hidden native radio input \u2014 enables proper [id]/[name] binding for form semantics.\n Parent projects can bind (change)=\"myHandler($event)\" on the host component. -->\n <input\n type=\"radio\"\n style=\"position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none;\"\n [id]=\"field()?.fieldName\"\n [name]=\"field()?.fieldNameAttribute\"\n [value]=\"data.value\"\n [checked]=\"inputValue === data.value\"\n (growthRateChange)=\"toggleRadio(data.value, $event)\"\n />\n <span\n class=\"forRadioLabelAnnuityRadio\"\n [ngStyle]=\"{\n '--radio-button-font-weight': field()?.controlStyle?.fontWeight,\n '--radio-button-font-size': field()?.controlStyle?.fontSize,\n '--radio-button-font-color': field()?.controlStyle?.color\n }\"\n >{{ data.label }}</span>\n </div>\n </div>\n\n <!-- Card Container -->\n <div class=\"acr-card-container\" *ngIf=\"field()?.configData?.cardsValue?.length > 0\">\n <div class=\"acr-card-wrap\">\n <div class=\"acr-sub-label\" *ngIf=\"field()?.configData?.subLabel\">\n {{ field()?.configData?.subLabel }}\n </div>\n <div class=\"acr-new-cards-list\">\n <ng-container *ngFor=\"let card of field()?.configData?.cardsValue; let i = index\">\n <div\n class=\"acr-new-card\"\n [class.acr-new-card--selected]=\"selectedCard.value === card.value\"\n [class.acr-new-card--disabled]=\"card.disabled\"\n >\n <!-- Card Header: Radio + Label -->\n <div class=\"acr-new-card-header\" (click)=\"selectCard(card)\">\n <span class=\"acr-new-radio\" [class.acr-new-radio--checked]=\"selectedCard.value === card.value\">\n <span class=\"acr-new-radio-inner\" *ngIf=\"selectedCard.value === card.value\"></span>\n </span>\n <span class=\"acr-new-card-label\">{{ card.label }}</span>\n </div>\n\n <!-- Three-column content row -->\n <div class=\"acr-new-content-row\">\n <!-- Left: amount -->\n <div class=\"acr-new-col-amount\">\n <div class=\"acr-new-main-value\">{{ card.mainValue }} / <span class=\"acr-new-main-frequency\">{{ card.mainFrequencyValue }}</span></div>\n <div class=\"acr-new-sub-value\">{{ card.subValue }} / <span class=\"acr-new-sub-frequency\">{{ card.subFrequencyValue }}</span></div>\n </div>\n <!-- Center: rate -->\n <div class=\"acr-new-col-rate\">\n <div class=\"acr-new-rate-percent\">{{ card.growthRate }}</div>\n <div class=\"acr-new-rate-percent\">Annuity Rate</div>\n </div>\n <!-- Right: guaranteed / variable -->\n <div class=\"acr-new-col-details\">\n <div class=\"acr-new-detail-row\">\n <span class=\"acr-new-detail-key\">Guaranteed :</span>\n <span class=\"acr-new-detail-val\">{{ card.guaranteed }}</span>\n </div>\n <div class=\"acr-new-detail-row\">\n <span class=\"acr-new-detail-key\">Variable :</span>\n <span class=\"acr-new-detail-val\">{{ card.variable }}</span>\n </div>\n </div>\n </div>\n\n <!-- Note outside card border, shown only when selected -->\n </div><!-- /acr-new-card -->\n <div class=\"acr-new-note\" *ngIf=\"selectedCard?.value === card.value && field()?.configData?.infoMessage\">\n <strong>Note:</strong> {{ field()?.configData?.infoMessage }}\n </div>\n </ng-container>\n </div><!-- /acr-new-cards-list -->\n </div><!-- /acr-card-wrap -->\n </div><!-- /acr-card-container -->\n\n</div>\n", styles: [".acr-wrapper{font-family:mulish!important;width:100%;display:flex;flex-direction:column}.forRadioLabelAnnuityRadio{font-size:12px!important;font-weight:400!important;cursor:pointer;color:#444!important;min-width:25%!important;height:fit-content}.required-star{color:red;margin-left:2px}.radio-btn-group1{display:flex;gap:4px;flex-wrap:wrap;padding-right:10px;padding-left:10px;height:42px;max-height:100px!important;line-height:15px}.annuity-radio-card-gender{border:1px solid rgba(218,218,218,1);border-radius:4px;padding:6px 20px;cursor:pointer;display:flex;align-items:center;justify-content:center;flex:1;-webkit-user-select:none;user-select:none;position:relative;overflow:visible}.annuity-radio-card-gender.selected{border-color:#fb0;border-width:1.6px}.annuity-radio-card-gender.selected:after{content:\"\";position:absolute;bottom:-16px;left:50%;transform:translate(-50%);width:0;height:0;z-index:3}.annuity-radio-card-gender.selected:before{content:\"\";position:absolute;bottom:-12px;left:50%;transform:translate(-50%);width:0;height:0;border-left:11px solid transparent;border-right:11px solid transparent;border-top:11px solid #fff;z-index:4}.annuity-radio-card-gender:hover:not(.disable-radio-btn){border-color:#ffd600}.disable-radio-btn{opacity:.55;pointer-events:none;background:#f5f5f5}.acr-card-container{position:relative;width:100%;padding-top:22px;box-sizing:border-box;padding-right:10px;padding-left:10px}.acr-card{background:#fff;border:1px solid rgba(218,218,218,1);border-radius:14px;padding:20px 18px 16px;width:100%;position:relative;overflow:visible;box-sizing:border-box}.acr-card:after{content:\"\";position:absolute;bottom:100%;left:var(--arrow-left, 40px);transform:translate(-50%);transition:left .2s ease;border-width:14px;border-style:solid;border-color:transparent transparent rgba(218,218,218,1) transparent;z-index:2}.acr-card:before{content:\"\";position:absolute;bottom:100%;left:var(--arrow-left, 40px);transform:translate(-50%);transition:left .2s ease;border-width:12px;border-style:solid;border-color:transparent transparent rgba(255,255,255,1) transparent;z-index:3}.acr-sub-label{font-size:10px;font-weight:700;color:#444;padding-right:10px;padding-left:10px;margin-top:10px}.acr-cards-row{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:30px}.acr-card-option{background:#fff;border:2px solid #E0E0E0;border-radius:12px;flex:1 1 0;max-width:none;cursor:pointer;display:flex;flex-direction:column;align-items:flex-start;-webkit-user-select:none;user-select:none;position:relative;overflow:visible;flex:0 0 calc((100% - 28px) / 3);max-width:calc((100% - 28px) / 3);padding:18px 16px;min-width:0}.acr-card-option.selected{border-color:#ffd600;box-shadow:0 0 0 1px #ffd600}.acr-card-option:hover:not(.disabled){border-color:#ffd600}.acr-card-option.disabled{opacity:.5;pointer-events:none}.acr-card-main-value{font-size:16px;font-weight:700;color:#444;margin-bottom:3px;line-height:20px}.acr-card-main-sub-value{font-size:16px;font-weight:400;color:#444;margin-bottom:3px;line-height:20px}.acr-card-sub-value{font-size:10px;font-weight:700;color:#444;line-height:14px}.acr-card-sub-sub-value{font-size:10px;font-weight:400;color:#444;line-height:14px}.acr-card-rate{background:linear-gradient(to right,#fb0,#fff7df,#fb0);color:#444;font-weight:700;font-size:10px;line-height:14px;padding:4px;margin-bottom:10px;margin-top:6px;width:100%;height:22px;text-align:center;box-sizing:border-box}.acr-card-details{width:100%;margin-bottom:14px;background-color:#f5f5f5;padding-left:10px;padding-right:10px;display:grid;grid-template-columns:max-content auto 1fr;column-gap:4px}.acr-card-detail-row{display:contents;font-size:10px;color:#444}.acr-card-detail-row span{font-weight:400;font-size:8px;line-height:14px;color:#444}.acr-card-detail-row strong{font-weight:600;color:#444;font-size:8px;line-height:14px;text-align:right}.acr-card-type{position:absolute;bottom:-14px;left:0;right:0;display:flex;justify-content:center}.acr-card-type-btn{border:none;border-radius:20px;padding:5px 22px;font-size:13px;font-weight:600;cursor:pointer;outline:none}.btn-high{background:#00946f;color:#fff;font-weight:700;font-size:10px;line-height:14px}.btn-medium{background:#66ccb2;color:#444;font-weight:700;font-size:10px;line-height:14px}.btn-low{background:#cef0e8;color:#444;font-weight:700;font-size:10px;line-height:14px}.acr-note{background:#ececec;color:#222;font-size:12px;border-radius:4px;padding:4px 8px;line-height:16px;width:100%;box-sizing:border-box;margin-top:8px;font-weight:400}.acr-note strong{font-weight:700;font-size:12px;line-height:16px;color:#222}.acr-card-wrap{background:#fff;border:1px solid rgba(218,218,218,1);border-radius:14px;width:100%;position:relative;overflow:visible;box-sizing:border-box}.acr-card-wrap:after{content:\"\";position:absolute;bottom:100%;left:var(--arrow-left, 40px);transform:translate(-50%);transition:left .2s ease;border-width:14px;border-style:solid;border-color:transparent transparent rgba(218,218,218,1) transparent;z-index:2}.acr-card-wrap:before{content:\"\";position:absolute;bottom:100%;left:var(--arrow-left, 40px);transform:translate(-50%);transition:left .2s ease;border-width:12px;border-style:solid;border-color:transparent transparent rgba(255,255,255,1) transparent;z-index:3}.acr-new-cards-list{display:flex;flex-direction:column;gap:0;padding:10px}.acr-new-card{border:1.6px solid #DADADA;border-radius:4px;cursor:pointer;-webkit-user-select:none;user-select:none;position:relative;background:#fff;overflow:hidden;box-sizing:border-box;padding:12px 14px 0;margin-bottom:14px}.acr-new-card--selected{border-color:#fb0;border-width:2px}.acr-new-card--disabled{opacity:.5;pointer-events:none}.acr-new-card:hover:not(.acr-new-card--disabled){border-color:#fb0}.acr-new-card-header{display:flex;align-items:center;gap:8px;margin-bottom:10px;cursor:pointer;width:fit-content}.acr-new-radio{width:16px;height:16px;border-radius:50%;border:1.5px solid #B4B4B4;background:#fff;flex-shrink:0;position:relative;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;cursor:pointer}.acr-new-radio--checked{border-color:#f0a000;border-width:2px;background:#fff}.acr-new-radio-inner{width:8px;height:8px;border-radius:50%;background:#f0a000;display:block}.acr-new-card-label{font-size:12px;font-weight:700;color:#222}.acr-new-content-row{display:flex;overflow:hidden;margin:0 8px 8px;gap:4px}.acr-new-col-amount{background:#e6f7f3;padding:8px;display:flex;flex-direction:column;justify-content:center}.acr-new-main-frequency{font-size:16px;font-weight:400}.acr-new-sub-frequency{font-size:10px;font-weight:400}.acr-new-main-value{font-size:16px;font-weight:700;color:#444;line-height:20px}.acr-new-sub-value{font-size:10px;font-weight:400;color:#444;line-height:14px}.acr-new-col-rate{background:#fff1cc;padding:4px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center}.acr-new-rate-percent{font-size:10px;font-weight:700;color:#444;line-height:14px}.acr-new-col-details{border:.5px solid rgba(218,218,218,1);background:#fff;padding:10px 14px 12px;flex:1.3;display:flex;flex-direction:column;justify-content:center;gap:5px}.acr-new-detail-row{display:flex;justify-content:space-between;gap:6px;align-items:baseline}.acr-new-detail-key{font-size:9px;font-weight:400;color:#444;white-space:nowrap}.acr-new-detail-val{font-size:9px;font-weight:700;color:#444;white-space:nowrap}.acr-new-note{background:#ececec;padding:4px 8px;font-size:12px;color:#444;line-height:16px;font-weight:400;margin-top:-14px;margin-bottom:14px}.acr-new-note strong{font-weight:700;font-size:12px;line-height:16px;color:#444}::ng-deep .relationship-radio-group .mat-mdc-radio-button .mat-mdc-radio-touch-target{width:12px!important;height:12px!important}::ng-deep .relationship-radio-group .mat-mdc-radio-button .mdc-form-field{gap:8px;align-items:center;display:flex}::ng-deep .relationship-radio-group .mat-mdc-radio-button .mdc-radio{flex-shrink:0;display:flex;align-items:center;justify-content:center}::ng-deep .relationship-radio-group .mat-mdc-radio-button .mat-ripple,::ng-deep .relationship-radio-group .mat-mdc-radio-button .mdc-radio__ripple{display:none!important}::ng-deep .relationship-radio-group .mdc-form-field>label{padding-left:0!important;cursor:pointer;line-height:12px;display:flex;align-items:center}.relationship-option-text{font-size:12px;font-weight:400;font-family:var(--custom-font-family, \"Mulish\");color:var(--custom-font-color, #444);line-height:14px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: MatRadioModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: FormsModule }] });
|
|
7119
7199
|
}
|
|
7120
7200
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AnnuityCalculatorRadioComponent, decorators: [{
|
|
7121
7201
|
type: Component,
|
|
@@ -7126,7 +7206,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
7126
7206
|
useExisting: forwardRef(() => AnnuityCalculatorRadioComponent),
|
|
7127
7207
|
multi: true
|
|
7128
7208
|
}
|
|
7129
|
-
], template: "\n\n<div class=\"acr-wrapper\">\n\n <!-- Top Header Label -->\n <div class=\"acr-sub-label\" *ngIf=\"field() && field()?.isVisible\">\n {{ field()?.label }}\n <span class=\"error-message\" *ngIf=\"field()?.validators?.isRequired\">*</span>\n </div>\n\n <!-- Radio Option Cards -->\n <div class=\"radio-btn-group1\" *ngIf=\"field()?.configData?.isShowRadioOption\">\n <div\n class=\"annuity-radio-card-gender\"\n *ngFor=\"let data of field()?.options\"\n [class.selected]=\"inputValue === data.value\"\n [class.disable-radio-btn]=\"field()?.isDisable || data.disabled === true || data.disabled === 'true'\"\n (click)=\"(data.disabled === true || data.disabled === 'true') ? null : toggleRadio(data.value, $event)\"\n >\n <!-- Hidden native radio input \u2014 enables proper [id]/[name] binding for form semantics.\n Parent projects can bind (change)=\"myHandler($event)\" on the host component. -->\n <input\n type=\"radio\"\n style=\"position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none;\"\n [id]=\"field()?.fieldName\"\n [name]=\"field()?.fieldName\"\n [value]=\"data.value\"\n [checked]=\"inputValue === data.value\"\n (growthRateChange)=\"toggleRadio(data.value, $event)\"\n />\n <span\n class=\"forRadioLabelAnnuityRadio\"\n [ngStyle]=\"{\n '--radio-button-font-weight': field()?.controlStyle?.fontWeight,\n '--radio-button-font-size': field()?.controlStyle?.fontSize,\n '--radio-button-font-color': field()?.controlStyle?.color\n }\"\n >{{ data.label }}</span>\n </div>\n </div>\n\n <!-- Card Container -->\n <div class=\"acr-card-container\" *ngIf=\"field()?.configData?.cardsValue?.length > 0\">\n <div class=\"acr-card-wrap\">\n <div class=\"acr-sub-label\" *ngIf=\"field()?.configData?.subLabel\">\n {{ field()?.configData?.subLabel }}\n </div>\n <div class=\"acr-new-cards-list\">\n <ng-container *ngFor=\"let card of field()?.configData?.cardsValue; let i = index\">\n <div\n class=\"acr-new-card\"\n [class.acr-new-card--selected]=\"selectedCard.value === card.value\"\n [class.acr-new-card--disabled]=\"card.disabled\"\n >\n selectedCard.value => {{selectedCard.value}} HHHHH card.value => {{card.value}} HHHH {{selectedCard.value === card.value}}\n <!-- Card Header: Radio + Label -->\n <div class=\"acr-new-card-header\" (click)=\"selectCard(card)\">\n selectedCard.value => {{selectedCard.value}} HHHHH card.value => {{card.value}}\n <span class=\"acr-new-radio\" [class.acr-new-radio--checked]=\"selectedCard.value === card.value\">\n <span class=\"acr-new-radio-inner\" *ngIf=\"selectedCard.value === card.value\"></span>\n </span>\n <span class=\"acr-new-card-label\">{{ card.label }}</span>\n </div>\n\n <!-- Three-column content row -->\n <div class=\"acr-new-content-row\">\n <!-- Left: amount -->\n <div class=\"acr-new-col-amount\">\n <div class=\"acr-new-main-value\">{{ card.mainValue }} / <span class=\"acr-new-main-frequency\">{{ card.mainFrequencyValue }}</span></div>\n <div class=\"acr-new-sub-value\">{{ card.subValue }} / <span class=\"acr-new-sub-frequency\">{{ card.subFrequencyValue }}</span></div>\n </div>\n <!-- Center: rate -->\n <div class=\"acr-new-col-rate\">\n <div class=\"acr-new-rate-percent\">{{ card.growthRate }}</div>\n <div class=\"acr-new-rate-percent\">Annuity Rate</div>\n </div>\n <!-- Right: guaranteed / variable -->\n <div class=\"acr-new-col-details\">\n <div class=\"acr-new-detail-row\">\n <span class=\"acr-new-detail-key\">Guaranteed :</span>\n <span class=\"acr-new-detail-val\">{{ card.guaranteed }}</span>\n </div>\n <div class=\"acr-new-detail-row\">\n <span class=\"acr-new-detail-key\">Variable :</span>\n <span class=\"acr-new-detail-val\">{{ card.variable }}</span>\n </div>\n </div>\n </div>\n\n <!-- Note outside card border, shown only when selected -->\n </div><!-- /acr-new-card -->\n <div class=\"acr-new-note\" *ngIf=\"selectedCard?.value === card.value && field()?.configData?.infoMessage\">\n <strong>Note:</strong> {{ field()?.configData?.infoMessage }}\n </div>\n </ng-container>\n </div><!-- /acr-new-cards-list -->\n </div><!-- /acr-card-wrap -->\n </div><!-- /acr-card-container -->\n\n</div>\n", styles: [".acr-wrapper{font-family:mulish!important;width:100%;display:flex;flex-direction:column}.forRadioLabelAnnuityRadio{font-size:12px!important;font-weight:400!important;cursor:pointer;color:#444!important;min-width:25%!important;height:fit-content}.required-star{color:red;margin-left:2px}.radio-btn-group1{display:flex;gap:4px;flex-wrap:wrap;padding-right:10px;padding-left:10px;height:42px;max-height:100px!important;line-height:15px}.annuity-radio-card-gender{border:1px solid rgba(218,218,218,1);border-radius:4px;padding:6px 20px;cursor:pointer;display:flex;align-items:center;justify-content:center;flex:1;-webkit-user-select:none;user-select:none;position:relative;overflow:visible}.annuity-radio-card-gender.selected{border-color:#fb0;border-width:1.6px}.annuity-radio-card-gender.selected:after{content:\"\";position:absolute;bottom:-16px;left:50%;transform:translate(-50%);width:0;height:0;z-index:3}.annuity-radio-card-gender.selected:before{content:\"\";position:absolute;bottom:-12px;left:50%;transform:translate(-50%);width:0;height:0;border-left:11px solid transparent;border-right:11px solid transparent;border-top:11px solid #fff;z-index:4}.annuity-radio-card-gender:hover:not(.disable-radio-btn){border-color:#ffd600}.disable-radio-btn{opacity:.55;pointer-events:none;background:#f5f5f5}.acr-card-container{position:relative;width:100%;padding-top:22px;box-sizing:border-box;padding-right:10px;padding-left:10px}.acr-card{background:#fff;border:1px solid rgba(218,218,218,1);border-radius:14px;padding:20px 18px 16px;width:100%;position:relative;overflow:visible;box-sizing:border-box}.acr-card:after{content:\"\";position:absolute;bottom:100%;left:var(--arrow-left, 40px);transform:translate(-50%);transition:left .2s ease;border-width:14px;border-style:solid;border-color:transparent transparent rgba(218,218,218,1) transparent;z-index:2}.acr-card:before{content:\"\";position:absolute;bottom:100%;left:var(--arrow-left, 40px);transform:translate(-50%);transition:left .2s ease;border-width:12px;border-style:solid;border-color:transparent transparent rgba(255,255,255,1) transparent;z-index:3}.acr-sub-label{font-size:10px;font-weight:700;color:#444;padding-right:10px;padding-left:10px;margin-top:10px}.acr-cards-row{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:30px}.acr-card-option{background:#fff;border:2px solid #E0E0E0;border-radius:12px;flex:1 1 0;max-width:none;cursor:pointer;display:flex;flex-direction:column;align-items:flex-start;-webkit-user-select:none;user-select:none;position:relative;overflow:visible;flex:0 0 calc((100% - 28px) / 3);max-width:calc((100% - 28px) / 3);padding:18px 16px;min-width:0}.acr-card-option.selected{border-color:#ffd600;box-shadow:0 0 0 1px #ffd600}.acr-card-option:hover:not(.disabled){border-color:#ffd600}.acr-card-option.disabled{opacity:.5;pointer-events:none}.acr-card-main-value{font-size:16px;font-weight:700;color:#444;margin-bottom:3px;line-height:20px}.acr-card-main-sub-value{font-size:16px;font-weight:400;color:#444;margin-bottom:3px;line-height:20px}.acr-card-sub-value{font-size:10px;font-weight:700;color:#444;line-height:14px}.acr-card-sub-sub-value{font-size:10px;font-weight:400;color:#444;line-height:14px}.acr-card-rate{background:linear-gradient(to right,#fb0,#fff7df,#fb0);color:#444;font-weight:700;font-size:10px;line-height:14px;padding:4px;margin-bottom:10px;margin-top:6px;width:100%;height:22px;text-align:center;box-sizing:border-box}.acr-card-details{width:100%;margin-bottom:14px;background-color:#f5f5f5;padding-left:10px;padding-right:10px;display:grid;grid-template-columns:max-content auto 1fr;column-gap:4px}.acr-card-detail-row{display:contents;font-size:10px;color:#444}.acr-card-detail-row span{font-weight:400;font-size:8px;line-height:14px;color:#444}.acr-card-detail-row strong{font-weight:600;color:#444;font-size:8px;line-height:14px;text-align:right}.acr-card-type{position:absolute;bottom:-14px;left:0;right:0;display:flex;justify-content:center}.acr-card-type-btn{border:none;border-radius:20px;padding:5px 22px;font-size:13px;font-weight:600;cursor:pointer;outline:none}.btn-high{background:#00946f;color:#fff;font-weight:700;font-size:10px;line-height:14px}.btn-medium{background:#66ccb2;color:#444;font-weight:700;font-size:10px;line-height:14px}.btn-low{background:#cef0e8;color:#444;font-weight:700;font-size:10px;line-height:14px}.acr-note{background:#ececec;color:#222;font-size:12px;border-radius:4px;padding:4px 8px;line-height:16px;width:100%;box-sizing:border-box;margin-top:8px;font-weight:400}.acr-note strong{font-weight:700;font-size:12px;line-height:16px;color:#222}.acr-card-wrap{background:#fff;border:1px solid rgba(218,218,218,1);border-radius:14px;width:100%;position:relative;overflow:visible;box-sizing:border-box}.acr-card-wrap:after{content:\"\";position:absolute;bottom:100%;left:var(--arrow-left, 40px);transform:translate(-50%);transition:left .2s ease;border-width:14px;border-style:solid;border-color:transparent transparent rgba(218,218,218,1) transparent;z-index:2}.acr-card-wrap:before{content:\"\";position:absolute;bottom:100%;left:var(--arrow-left, 40px);transform:translate(-50%);transition:left .2s ease;border-width:12px;border-style:solid;border-color:transparent transparent rgba(255,255,255,1) transparent;z-index:3}.acr-new-cards-list{display:flex;flex-direction:column;gap:0;padding:10px}.acr-new-card{border:1.6px solid #DADADA;border-radius:4px;cursor:pointer;-webkit-user-select:none;user-select:none;position:relative;background:#fff;overflow:hidden;box-sizing:border-box;padding:12px 14px 0;margin-bottom:14px}.acr-new-card--selected{border-color:#fb0;border-width:2px}.acr-new-card--disabled{opacity:.5;pointer-events:none}.acr-new-card:hover:not(.acr-new-card--disabled){border-color:#fb0}.acr-new-card-header{display:flex;align-items:center;gap:8px;margin-bottom:10px;cursor:pointer;width:fit-content}.acr-new-radio{width:16px;height:16px;border-radius:50%;border:1.5px solid #B4B4B4;background:#fff;flex-shrink:0;position:relative;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;cursor:pointer}.acr-new-radio--checked{border-color:#f0a000;border-width:2px;background:#fff}.acr-new-radio-inner{width:8px;height:8px;border-radius:50%;background:#f0a000;display:block}.acr-new-card-label{font-size:12px;font-weight:700;color:#222}.acr-new-content-row{display:flex;overflow:hidden;margin:0 8px 8px;gap:4px}.acr-new-col-amount{background:#e6f7f3;padding:8px;display:flex;flex-direction:column;justify-content:center}.acr-new-main-frequency{font-size:16px;font-weight:400}.acr-new-sub-frequency{font-size:10px;font-weight:400}.acr-new-main-value{font-size:16px;font-weight:700;color:#444;line-height:20px}.acr-new-sub-value{font-size:10px;font-weight:400;color:#444;line-height:14px}.acr-new-col-rate{background:#fff1cc;padding:4px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center}.acr-new-rate-percent{font-size:10px;font-weight:700;color:#444;line-height:14px}.acr-new-col-details{border:.5px solid rgba(218,218,218,1);background:#fff;padding:10px 14px 12px;flex:1.3;display:flex;flex-direction:column;justify-content:center;gap:5px}.acr-new-detail-row{display:flex;justify-content:space-between;gap:6px;align-items:baseline}.acr-new-detail-key{font-size:9px;font-weight:400;color:#444;white-space:nowrap}.acr-new-detail-val{font-size:9px;font-weight:700;color:#444;white-space:nowrap}.acr-new-note{background:#ececec;padding:4px 8px;font-size:12px;color:#444;line-height:16px;font-weight:400;margin-top:-14px;margin-bottom:14px}.acr-new-note strong{font-weight:700;font-size:12px;line-height:16px;color:#444}::ng-deep .relationship-radio-group .mat-mdc-radio-button .mat-mdc-radio-touch-target{width:12px!important;height:12px!important}::ng-deep .relationship-radio-group .mat-mdc-radio-button .mdc-form-field{gap:8px;align-items:center;display:flex}::ng-deep .relationship-radio-group .mat-mdc-radio-button .mdc-radio{flex-shrink:0;display:flex;align-items:center;justify-content:center}::ng-deep .relationship-radio-group .mat-mdc-radio-button .mat-ripple,::ng-deep .relationship-radio-group .mat-mdc-radio-button .mdc-radio__ripple{display:none!important}::ng-deep .relationship-radio-group .mdc-form-field>label{padding-left:0!important;cursor:pointer;line-height:12px;display:flex;align-items:center}.relationship-option-text{font-size:12px;font-weight:400;font-family:var(--custom-font-family, \"Mulish\");color:var(--custom-font-color, #444);line-height:14px}\n"] }]
|
|
7209
|
+
], template: "\n\n<div class=\"acr-wrapper\">\n\n <!-- Top Header Label -->\n <div class=\"acr-sub-label\" *ngIf=\"field() && field()?.isVisible\">\n {{ field()?.label }}\n <span class=\"error-message\" *ngIf=\"field()?.validators?.isRequired\">*</span>\n </div>\n\n <!-- Radio Option Cards -->\n <div class=\"radio-btn-group1\" *ngIf=\"field()?.configData?.isShowRadioOption\">\n <div\n class=\"annuity-radio-card-gender\"\n *ngFor=\"let data of field()?.options\"\n [class.selected]=\"inputValue === data.value\"\n [class.disable-radio-btn]=\"field()?.isDisable || data.disabled === true || data.disabled === 'true'\"\n (click)=\"(data.disabled === true || data.disabled === 'true') ? null : toggleRadio(data.value, $event)\"\n >\n <!-- Hidden native radio input \u2014 enables proper [id]/[name] binding for form semantics.\n Parent projects can bind (change)=\"myHandler($event)\" on the host component. -->\n <input\n type=\"radio\"\n style=\"position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none;\"\n [id]=\"field()?.fieldName\"\n [name]=\"field()?.fieldNameAttribute\"\n [value]=\"data.value\"\n [checked]=\"inputValue === data.value\"\n (growthRateChange)=\"toggleRadio(data.value, $event)\"\n />\n <span\n class=\"forRadioLabelAnnuityRadio\"\n [ngStyle]=\"{\n '--radio-button-font-weight': field()?.controlStyle?.fontWeight,\n '--radio-button-font-size': field()?.controlStyle?.fontSize,\n '--radio-button-font-color': field()?.controlStyle?.color\n }\"\n >{{ data.label }}</span>\n </div>\n </div>\n\n <!-- Card Container -->\n <div class=\"acr-card-container\" *ngIf=\"field()?.configData?.cardsValue?.length > 0\">\n <div class=\"acr-card-wrap\">\n <div class=\"acr-sub-label\" *ngIf=\"field()?.configData?.subLabel\">\n {{ field()?.configData?.subLabel }}\n </div>\n <div class=\"acr-new-cards-list\">\n <ng-container *ngFor=\"let card of field()?.configData?.cardsValue; let i = index\">\n <div\n class=\"acr-new-card\"\n [class.acr-new-card--selected]=\"selectedCard.value === card.value\"\n [class.acr-new-card--disabled]=\"card.disabled\"\n >\n <!-- Card Header: Radio + Label -->\n <div class=\"acr-new-card-header\" (click)=\"selectCard(card)\">\n <span class=\"acr-new-radio\" [class.acr-new-radio--checked]=\"selectedCard.value === card.value\">\n <span class=\"acr-new-radio-inner\" *ngIf=\"selectedCard.value === card.value\"></span>\n </span>\n <span class=\"acr-new-card-label\">{{ card.label }}</span>\n </div>\n\n <!-- Three-column content row -->\n <div class=\"acr-new-content-row\">\n <!-- Left: amount -->\n <div class=\"acr-new-col-amount\">\n <div class=\"acr-new-main-value\">{{ card.mainValue }} / <span class=\"acr-new-main-frequency\">{{ card.mainFrequencyValue }}</span></div>\n <div class=\"acr-new-sub-value\">{{ card.subValue }} / <span class=\"acr-new-sub-frequency\">{{ card.subFrequencyValue }}</span></div>\n </div>\n <!-- Center: rate -->\n <div class=\"acr-new-col-rate\">\n <div class=\"acr-new-rate-percent\">{{ card.growthRate }}</div>\n <div class=\"acr-new-rate-percent\">Annuity Rate</div>\n </div>\n <!-- Right: guaranteed / variable -->\n <div class=\"acr-new-col-details\">\n <div class=\"acr-new-detail-row\">\n <span class=\"acr-new-detail-key\">Guaranteed :</span>\n <span class=\"acr-new-detail-val\">{{ card.guaranteed }}</span>\n </div>\n <div class=\"acr-new-detail-row\">\n <span class=\"acr-new-detail-key\">Variable :</span>\n <span class=\"acr-new-detail-val\">{{ card.variable }}</span>\n </div>\n </div>\n </div>\n\n <!-- Note outside card border, shown only when selected -->\n </div><!-- /acr-new-card -->\n <div class=\"acr-new-note\" *ngIf=\"selectedCard?.value === card.value && field()?.configData?.infoMessage\">\n <strong>Note:</strong> {{ field()?.configData?.infoMessage }}\n </div>\n </ng-container>\n </div><!-- /acr-new-cards-list -->\n </div><!-- /acr-card-wrap -->\n </div><!-- /acr-card-container -->\n\n</div>\n", styles: [".acr-wrapper{font-family:mulish!important;width:100%;display:flex;flex-direction:column}.forRadioLabelAnnuityRadio{font-size:12px!important;font-weight:400!important;cursor:pointer;color:#444!important;min-width:25%!important;height:fit-content}.required-star{color:red;margin-left:2px}.radio-btn-group1{display:flex;gap:4px;flex-wrap:wrap;padding-right:10px;padding-left:10px;height:42px;max-height:100px!important;line-height:15px}.annuity-radio-card-gender{border:1px solid rgba(218,218,218,1);border-radius:4px;padding:6px 20px;cursor:pointer;display:flex;align-items:center;justify-content:center;flex:1;-webkit-user-select:none;user-select:none;position:relative;overflow:visible}.annuity-radio-card-gender.selected{border-color:#fb0;border-width:1.6px}.annuity-radio-card-gender.selected:after{content:\"\";position:absolute;bottom:-16px;left:50%;transform:translate(-50%);width:0;height:0;z-index:3}.annuity-radio-card-gender.selected:before{content:\"\";position:absolute;bottom:-12px;left:50%;transform:translate(-50%);width:0;height:0;border-left:11px solid transparent;border-right:11px solid transparent;border-top:11px solid #fff;z-index:4}.annuity-radio-card-gender:hover:not(.disable-radio-btn){border-color:#ffd600}.disable-radio-btn{opacity:.55;pointer-events:none;background:#f5f5f5}.acr-card-container{position:relative;width:100%;padding-top:22px;box-sizing:border-box;padding-right:10px;padding-left:10px}.acr-card{background:#fff;border:1px solid rgba(218,218,218,1);border-radius:14px;padding:20px 18px 16px;width:100%;position:relative;overflow:visible;box-sizing:border-box}.acr-card:after{content:\"\";position:absolute;bottom:100%;left:var(--arrow-left, 40px);transform:translate(-50%);transition:left .2s ease;border-width:14px;border-style:solid;border-color:transparent transparent rgba(218,218,218,1) transparent;z-index:2}.acr-card:before{content:\"\";position:absolute;bottom:100%;left:var(--arrow-left, 40px);transform:translate(-50%);transition:left .2s ease;border-width:12px;border-style:solid;border-color:transparent transparent rgba(255,255,255,1) transparent;z-index:3}.acr-sub-label{font-size:10px;font-weight:700;color:#444;padding-right:10px;padding-left:10px;margin-top:10px}.acr-cards-row{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:30px}.acr-card-option{background:#fff;border:2px solid #E0E0E0;border-radius:12px;flex:1 1 0;max-width:none;cursor:pointer;display:flex;flex-direction:column;align-items:flex-start;-webkit-user-select:none;user-select:none;position:relative;overflow:visible;flex:0 0 calc((100% - 28px) / 3);max-width:calc((100% - 28px) / 3);padding:18px 16px;min-width:0}.acr-card-option.selected{border-color:#ffd600;box-shadow:0 0 0 1px #ffd600}.acr-card-option:hover:not(.disabled){border-color:#ffd600}.acr-card-option.disabled{opacity:.5;pointer-events:none}.acr-card-main-value{font-size:16px;font-weight:700;color:#444;margin-bottom:3px;line-height:20px}.acr-card-main-sub-value{font-size:16px;font-weight:400;color:#444;margin-bottom:3px;line-height:20px}.acr-card-sub-value{font-size:10px;font-weight:700;color:#444;line-height:14px}.acr-card-sub-sub-value{font-size:10px;font-weight:400;color:#444;line-height:14px}.acr-card-rate{background:linear-gradient(to right,#fb0,#fff7df,#fb0);color:#444;font-weight:700;font-size:10px;line-height:14px;padding:4px;margin-bottom:10px;margin-top:6px;width:100%;height:22px;text-align:center;box-sizing:border-box}.acr-card-details{width:100%;margin-bottom:14px;background-color:#f5f5f5;padding-left:10px;padding-right:10px;display:grid;grid-template-columns:max-content auto 1fr;column-gap:4px}.acr-card-detail-row{display:contents;font-size:10px;color:#444}.acr-card-detail-row span{font-weight:400;font-size:8px;line-height:14px;color:#444}.acr-card-detail-row strong{font-weight:600;color:#444;font-size:8px;line-height:14px;text-align:right}.acr-card-type{position:absolute;bottom:-14px;left:0;right:0;display:flex;justify-content:center}.acr-card-type-btn{border:none;border-radius:20px;padding:5px 22px;font-size:13px;font-weight:600;cursor:pointer;outline:none}.btn-high{background:#00946f;color:#fff;font-weight:700;font-size:10px;line-height:14px}.btn-medium{background:#66ccb2;color:#444;font-weight:700;font-size:10px;line-height:14px}.btn-low{background:#cef0e8;color:#444;font-weight:700;font-size:10px;line-height:14px}.acr-note{background:#ececec;color:#222;font-size:12px;border-radius:4px;padding:4px 8px;line-height:16px;width:100%;box-sizing:border-box;margin-top:8px;font-weight:400}.acr-note strong{font-weight:700;font-size:12px;line-height:16px;color:#222}.acr-card-wrap{background:#fff;border:1px solid rgba(218,218,218,1);border-radius:14px;width:100%;position:relative;overflow:visible;box-sizing:border-box}.acr-card-wrap:after{content:\"\";position:absolute;bottom:100%;left:var(--arrow-left, 40px);transform:translate(-50%);transition:left .2s ease;border-width:14px;border-style:solid;border-color:transparent transparent rgba(218,218,218,1) transparent;z-index:2}.acr-card-wrap:before{content:\"\";position:absolute;bottom:100%;left:var(--arrow-left, 40px);transform:translate(-50%);transition:left .2s ease;border-width:12px;border-style:solid;border-color:transparent transparent rgba(255,255,255,1) transparent;z-index:3}.acr-new-cards-list{display:flex;flex-direction:column;gap:0;padding:10px}.acr-new-card{border:1.6px solid #DADADA;border-radius:4px;cursor:pointer;-webkit-user-select:none;user-select:none;position:relative;background:#fff;overflow:hidden;box-sizing:border-box;padding:12px 14px 0;margin-bottom:14px}.acr-new-card--selected{border-color:#fb0;border-width:2px}.acr-new-card--disabled{opacity:.5;pointer-events:none}.acr-new-card:hover:not(.acr-new-card--disabled){border-color:#fb0}.acr-new-card-header{display:flex;align-items:center;gap:8px;margin-bottom:10px;cursor:pointer;width:fit-content}.acr-new-radio{width:16px;height:16px;border-radius:50%;border:1.5px solid #B4B4B4;background:#fff;flex-shrink:0;position:relative;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;cursor:pointer}.acr-new-radio--checked{border-color:#f0a000;border-width:2px;background:#fff}.acr-new-radio-inner{width:8px;height:8px;border-radius:50%;background:#f0a000;display:block}.acr-new-card-label{font-size:12px;font-weight:700;color:#222}.acr-new-content-row{display:flex;overflow:hidden;margin:0 8px 8px;gap:4px}.acr-new-col-amount{background:#e6f7f3;padding:8px;display:flex;flex-direction:column;justify-content:center}.acr-new-main-frequency{font-size:16px;font-weight:400}.acr-new-sub-frequency{font-size:10px;font-weight:400}.acr-new-main-value{font-size:16px;font-weight:700;color:#444;line-height:20px}.acr-new-sub-value{font-size:10px;font-weight:400;color:#444;line-height:14px}.acr-new-col-rate{background:#fff1cc;padding:4px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center}.acr-new-rate-percent{font-size:10px;font-weight:700;color:#444;line-height:14px}.acr-new-col-details{border:.5px solid rgba(218,218,218,1);background:#fff;padding:10px 14px 12px;flex:1.3;display:flex;flex-direction:column;justify-content:center;gap:5px}.acr-new-detail-row{display:flex;justify-content:space-between;gap:6px;align-items:baseline}.acr-new-detail-key{font-size:9px;font-weight:400;color:#444;white-space:nowrap}.acr-new-detail-val{font-size:9px;font-weight:700;color:#444;white-space:nowrap}.acr-new-note{background:#ececec;padding:4px 8px;font-size:12px;color:#444;line-height:16px;font-weight:400;margin-top:-14px;margin-bottom:14px}.acr-new-note strong{font-weight:700;font-size:12px;line-height:16px;color:#444}::ng-deep .relationship-radio-group .mat-mdc-radio-button .mat-mdc-radio-touch-target{width:12px!important;height:12px!important}::ng-deep .relationship-radio-group .mat-mdc-radio-button .mdc-form-field{gap:8px;align-items:center;display:flex}::ng-deep .relationship-radio-group .mat-mdc-radio-button .mdc-radio{flex-shrink:0;display:flex;align-items:center;justify-content:center}::ng-deep .relationship-radio-group .mat-mdc-radio-button .mat-ripple,::ng-deep .relationship-radio-group .mat-mdc-radio-button .mdc-radio__ripple{display:none!important}::ng-deep .relationship-radio-group .mdc-form-field>label{padding-left:0!important;cursor:pointer;line-height:12px;display:flex;align-items:center}.relationship-option-text{font-size:12px;font-weight:400;font-family:var(--custom-font-family, \"Mulish\");color:var(--custom-font-color, #444);line-height:14px}\n"] }]
|
|
7130
7210
|
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { preSelectConfig: [{
|
|
7131
7211
|
type: Input
|
|
7132
7212
|
}], change: [{
|
|
@@ -8595,7 +8675,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
8595
8675
|
class MasterControlComponent {
|
|
8596
8676
|
field = input.required();
|
|
8597
8677
|
formGroup = new FormGroup({});
|
|
8598
|
-
constructor() {
|
|
8678
|
+
constructor() {
|
|
8679
|
+
effect(() => {
|
|
8680
|
+
initializeFieldNameAttribute(this.field());
|
|
8681
|
+
});
|
|
8682
|
+
}
|
|
8599
8683
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MasterControlComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
8600
8684
|
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: MasterControlComponent, isStandalone: true, selector: "lib-master-control", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, formGroup: { classPropertyName: "formGroup", publicName: "formGroup", isSignal: false, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@switch (field()?.controlType) {\n @case ('top-header') {\n <lib-top-header [field]=\"field()\" />\n }\n @case ('footer') {\n <lib-footer [field]=\"field()\" />\n }\n @case('footer-buttons')\n {\n <lib-footer-with-buttons [field]=\"field()\"></lib-footer-with-buttons>\n }\n @case('text') {\n <lib-textbox [field]=\"field()\"></lib-textbox>\n }\n @case('select') {\n <lib-select [field]=\"field()\"/>\n }\n\n @case('radio') {\n <lib-radio [field]=\"field()\" />\n }\n\n @case('toggle') {\n <lib-toggle [field]=\"field()\" />\n }\n\n @case('file') {\n <lib-upload [field]=\"field()\" />\n }\n\n @case('date') {\n <lib-dob [field]=\"field()\" />\n }\n\n @case('mobileNumber') {\n <lib-mob-number [field]=\"field()\" />\n }\n\n @case('info') {\n <lib-info [field]=\"field()\" />\n }\n\n @case('checkbox') {\n <lib-checkbox [field]=\"field()\" />\n }\n\n @case('textarea') {\n <lib-textarea [field]=\"field()\" />\n }\n\n @case ('button') {\n <lib-button [field]=\"field()\" />\n }\n\n @case ('tab') {\n <lib-tab [field]=\"field()\" />\n }\n\n @case ('autocomplete') {\n <lib-autocomplete [field]=\"field()\" />\n }\n\n @case ('multipleSelect') {\n <lib-multiple-select [field]=\"field()\" />\n }\n\n @case ('textboxWithSelect') {\n <lib-select-textbox [field]=\"field()\" />\n }\n\n @case ('otpTextbox') {\n <lib-otp-textbox [field]=\"field()\" />\n }\n\n @case ('amountTextbox') {\n <lib-amount-textbox [field]=\"field()\" />\n }\n\n @case ('suffixTextbox') {\n <lib-suffix-textbox [field]=\"field()\" />\n }\n\n @case ('otpMobNumber') {\n <lib-otp-mob-number [field]=\"field()\" />\n }\n\n @case ('tagMobNumber') {\n <lib-tag-mob-number [field]=\"field()\" />\n }\n\n @case ('dateWithAge') {\n <lib-age-date [field]=\"field()\" />\n }\n\n @case ('additionButton') {\n <lib-addition-button [field]=\"field()\" />\n }\n\n @case ('infoTextbox') {\n <lib-info-textbox [field]=\"field()\" />\n }\n\n @case ('textboxWithImage') {\n <lib-textbox-with-image [field]=\"field()\" />\n }\n\n @case ('emailWithDomain') {\n <lib-email-with-domain [field]=\"field()\" />\n }\n\n @case ('imageUpload') {\n <lib-image-upload [field]=\"field()\" />\n }\n\n @case ('downloadDocument') {\n <lib-download-document [field]=\"field()\" />\n }\n\n @case ('addDocument') {\n <lib-add-document [field]=\"field()\" />\n }\n\n @case ('hyperlink') {\n <lib-hyperlink [field]=\"field()\" />\n }\n\n @case ('textboxWithUnderscore') {\n <lib-textbox-with-underscore [field]=\"field()\" />\n }\n\n @case ('underscoreMobNumber') {\n <lib-underscore-mob-number [field]=\"field()\" />\n }\n\n @case ('downloadIconButton') {\n <lib-icon-button [field]=\"field()\" />\n }\n\n @case ('image') {\n <lib-image [field]=\"field()\" />\n }\n @case ('stepper') {\n <lib-stepper [field]=\"field()\" />\n }\n @case ('card') {\n <lib-card [field]=\"field()\" />\n }\n @case ('hrLine') {\n <lib-hr-line [field]=\"field()\" />\n }\n @case ('searchMultiSelect') {\n <lib-search-multi-select [field]=\"field()\" />\n }\n @case ('subscriptTextbox') {\n <lib-subscript-textbox [field]=\"field()\" />\n }\n @case ('label') {\n <lib-label [field]=\"field()\" />\n }\n @case ('subHeading') {\n <lib-sub-header [field]=\"field()\" />\n }\n @case ('heading') {\n <lib-header [field]=\"field()\" />\n }\n @case ('table') {\n <lib-table [field]=\"field()\" />\n }\n @case ('textboxWithText') {\n <lib-textbox-with-text [field]=\"field()\" />\n }\n @case ('loader') {\n <lib-loader [field]=\"field()\" />\n }\n @case ('discount') {\n <lib-discount [field]=\"field()\" />\n }\n @case ('optionalBenefitCard') {\n <lib-benefit-card [field]=\"field()\" />\n }\n @case ('errorSnackbar') {\n <lib-error-snackbar [field]=\"field()\" />\n }\n @case ('warningSnackbar') {\n <lib-warning-snackbar [field]=\"field()\" />\n }\n @case ('successSnackbar') {\n <lib-success-snackbar [field]=\"field()\" />\n }\n @case ('neutralSnackbar') {\n <lib-neutral-snackbar [field]=\"field()\" />\n }\n @case ('boldLabel') {\n <lib-grey-label [field]=\"field()\" />\n }\n @case ('iframe') {\n <lib-iframe [field]=\"field()\" />\n }\n @case ('toggleButton') {\n <lib-toggle-button [field]=\"field()\" />\n }\n @case ('payGetCard') {\n <lib-pay-get-card [field]=\"field()\" />\n }\n @case ('inBuiltBenefit') {\n <lib-in-built-benefit [field]=\"field()\" />\n }\n @case ('otherBenefit') {\n <lib-other-benefits [field]=\"field()\" />\n }\n @case ('annuityRateLogo') {\n <lib-annuity-rate-logo [field]=\"field()\" />\n }\n @case ('discountAnnuity') {\n <lib-discount-v2 [field]=\"field()\" />\n }\n @case ('labelValue'){\n <lib-label-value-card [field]=\"field()\" />\n }\n @case ('medicalQuestions'){\n <lib-medial-questions [field]=\"field()\" />\n }\n @case ('nudge'){\n <lib-page-nudge [field]=\"field()\"/>\n }\n @case ('progressBar'){\n <lib-progress-bar [field]=\"field()\"/>\n }\n @case ('accordian'){\n <lib-accordian [field]=\"field()\"/>\n }\n @case ('miscInfo'){\n <lib-miscellaneous-info-bar [field]=\"field()\"/>\n }\n @case ('plainText'){\n <lib-plain-text [field]=\"field()\"/>\n }\n @case ('menu'){\n <lib-menu [field]=\"field()\" />\n }\n @case ('stepperWithArrow') {\n <lib-stepper-with-arrow [field]=\"field()\" />\n }\n @case ('labelWithImage') {\n <lib-label-with-image [field]=\"field()\" />\n }\n @case ('motorGlowPlanDetails') {\n <lib-motor-glow-plan-details [field]=\"field()\" />\n }\n @case ('premiumToAnnuityCalculator') {\n <lib-annuity-premium-calculator [field]=\"field()\" />\n } @case ('footerProgressBar') {\n <lib-footer-design [field]=\"field()\" />\n }\n @case ('annuityGrowthRateOption') {\n <lib-annuity-calculator-radio [field]=\"field()\" />\n }\n @case ('textboxWithRadio') {\n <lib-textbox-with-radio [field]=\"field()\" />\n }\n}\n", styles: [""], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "component", type: TextboxComponent, selector: "lib-textbox", inputs: ["field", "reactiveFormControlobject"], outputs: ["blur"] }, { kind: "component", type: SelectComponent, selector: "lib-select", inputs: ["field", "reactiveFormControlobject"], outputs: ["selectionChange", "infoClick"] }, { kind: "component", type: RadioComponent, selector: "lib-radio", inputs: ["reactiveFormControlobject", "field"], outputs: ["change"] }, { kind: "component", type: ToggleComponent, selector: "lib-toggle", inputs: ["field", "reactiveFormControlobject"], outputs: ["change"] }, { kind: "component", type: UploadComponent, selector: "lib-upload", inputs: ["documentUploaderField", "openQuoteImageObj", "field", "reactiveFormControlobject"], outputs: ["filesChanged", "fileRemoved", "filePreview"] }, { kind: "component", type: DobComponent, selector: "lib-dob", inputs: ["field", "reactiveFormControlobject"], outputs: ["blur", "valueChange", "dateSelected", "invalidDate"] }, { kind: "component", type: MobNumberComponent, selector: "lib-mob-number", inputs: ["field", "reactiveFormControlobject"], outputs: ["blur"] }, { kind: "component", type: InfoComponent, selector: "lib-info", inputs: ["field"] }, { kind: "component", type: CheckboxComponent, selector: "lib-checkbox", inputs: ["field", "reactiveFormControlobject"], outputs: ["change"] }, { kind: "component", type: TextareaComponent, selector: "lib-textarea", inputs: ["field", "reactiveFormControlobject"], outputs: ["blur"] }, { kind: "component", type: ButtonComponent, selector: "lib-button", inputs: ["field"] }, { kind: "component", type: TabComponent, selector: "lib-tab", inputs: ["field"], outputs: ["selectedIndexChange"] }, { kind: "component", type: AutocompleteComponent, selector: "lib-autocomplete", inputs: ["field", "reactiveFormControlobject"], outputs: ["blur", "selectionChanged", "valueChanged", "optionSelected"] }, { kind: "component", type: MultipleSelectComponent, selector: "lib-multiple-select", inputs: ["field", "reactiveFormControlobject"], outputs: ["selectionChange"] }, { kind: "component", type: SelectTextboxComponent, selector: "lib-select-textbox", inputs: ["field", "reactiveFormControlobject"], outputs: ["selectionChange"] }, { kind: "component", type: OtpTextboxComponent, selector: "lib-otp-textbox", inputs: ["field", "reactiveFormControlobject"] }, { kind: "component", type: AmountTextboxComponent, selector: "lib-amount-textbox", inputs: ["field", "reactiveFormControlobject"], outputs: ["blur"] }, { kind: "component", type: SuffixTextboxComponent, selector: "lib-suffix-textbox", inputs: ["field", "reactiveFormControlobject"], outputs: ["blur"] }, { kind: "component", type: OtpMobNumberComponent, selector: "lib-otp-mob-number", inputs: ["field", "reactiveFormControlobject"] }, { kind: "component", type: TagMobNumberComponent, selector: "lib-tag-mob-number", inputs: ["field", "reactiveFormControlobject"] }, { kind: "component", type: AgeDateComponent, selector: "lib-age-date", inputs: ["field", "reactiveFormControlobject"], outputs: ["blur", "valueChange", "dateSelected", "invalidDate"] }, { kind: "component", type: AdditionButtonComponent, selector: "lib-addition-button", inputs: ["field"] }, { kind: "component", type: InfoTextboxComponent, selector: "lib-info-textbox", inputs: ["field", "reactiveFormControlobject", "fields"], outputs: ["infoClick"] }, { kind: "component", type: TextboxWithImageComponent, selector: "lib-textbox-with-image", inputs: ["field", "reactiveFormControlobject"], outputs: ["blur"] }, { kind: "component", type: EmailWithDomainComponent, selector: "lib-email-with-domain", inputs: ["field", "reactiveFormControlobject"] }, { kind: "component", type: ImageUploadComponent, selector: "lib-image-upload", inputs: ["field"] }, { kind: "component", type: DownloadDocumentComponent, selector: "lib-download-document", inputs: ["field"] }, { kind: "component", type: AddDocumentComponent, selector: "lib-add-document", inputs: ["field"] }, { kind: "component", type: HyperlinkComponent, selector: "lib-hyperlink", inputs: ["field"] }, { kind: "component", type: TextboxWithUnderscoreComponent, selector: "lib-textbox-with-underscore", inputs: ["field", "reactiveFormControlobject"] }, { kind: "component", type: UnderscoreMobNumberComponent, selector: "lib-underscore-mob-number", inputs: ["field", "reactiveFormControlobject"] }, { kind: "component", type: IconButtonComponent, selector: "lib-icon-button", inputs: ["field"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: ImageComponent, selector: "lib-image", inputs: ["field"] }, { kind: "component", type: StepperComponent, selector: "lib-stepper", inputs: ["field"] }, { kind: "component", type: CardComponent, selector: "lib-card", inputs: ["field"], outputs: ["cardDetailsClicked"] }, { kind: "component", type: HrLineComponent, selector: "lib-hr-line", inputs: ["field"] }, { kind: "component", type: SearchMultiSelectComponent, selector: "lib-search-multi-select", inputs: ["field", "reactiveFormControlobject"] }, { kind: "component", type: SubscriptTextboxComponent, selector: "lib-subscript-textbox", inputs: ["field", "reactiveFormControlobject"] }, { kind: "component", type: LabelComponent, selector: "lib-label", inputs: ["field"] }, { kind: "component", type: SubHeaderComponent, selector: "lib-sub-header", inputs: ["field"] }, { kind: "component", type: HeaderComponent, selector: "lib-header", inputs: ["field"] }, { kind: "component", type: TextboxWithTextComponent, selector: "lib-textbox-with-text", inputs: ["reactiveFormControlobject", "field"], outputs: ["blur"] }, { kind: "component", type: DiscountComponent, selector: "lib-discount", inputs: ["field"] }, { kind: "component", type: BenefitCardComponent, selector: "lib-benefit-card", inputs: ["field"] }, { kind: "component", type: TableComponent, selector: "lib-table", inputs: ["field", "readonly"], outputs: ["actionItemClicked", "tablePaginationClicked"] }, { kind: "component", type: LoaderComponent, selector: "lib-loader", inputs: ["field"] }, { kind: "component", type: WarningSnackbarComponent, selector: "lib-warning-snackbar", inputs: ["field"] }, { kind: "component", type: SuccessSnackbarComponent, selector: "lib-success-snackbar", inputs: ["field"] }, { kind: "component", type: NeutralSnackbarComponent, selector: "lib-neutral-snackbar", inputs: ["field"] }, { kind: "component", type: ErrorSnackbarComponent, selector: "lib-error-snackbar", inputs: ["field"] }, { kind: "component", type: GreyLabelComponent, selector: "lib-grey-label", inputs: ["field"] }, { kind: "component", type: IframeComponent, selector: "lib-iframe", inputs: ["field"] }, { kind: "component", type: ToggleButtonComponent, selector: "lib-toggle-button", inputs: ["reactiveFormControlobject", "field"], outputs: ["selectionChanged", "change"] }, { kind: "component", type: PayGetCardComponent, selector: "lib-pay-get-card", inputs: ["field", "payAmount", "premiumAmount", "ptValue", "years", "frequency", "payamountOptions"] }, { kind: "component", type: InBuiltBenefitComponent, selector: "lib-in-built-benefit", inputs: ["field", "premiumAmount", "premiumAmountShort"] }, { kind: "component", type: OtherBenefitsComponent, selector: "lib-other-benefits", inputs: ["field"] }, { kind: "component", type: AnnuityRateLogoComponent, selector: "lib-annuity-rate-logo", inputs: ["field", "ratePercent"] }, { kind: "component", type: DiscountV2Component, selector: "lib-discount-v2", inputs: ["field"] }, { kind: "component", type: LabelValueCardComponent, selector: "lib-label-value-card", inputs: ["field"] }, { kind: "component", type: MedialQuestionsComponent, selector: "lib-medial-questions", inputs: ["clusterId", "triggerValidation", "medialQuestionResponse", "personUWOpenQuoteResponse", "defaultValues", "personType", "field"], outputs: ["questionsValueChange"] }, { kind: "component", type: PageNudgeComponent, selector: "lib-page-nudge", inputs: ["field"] }, { kind: "component", type: ProgressBarComponent, selector: "lib-progress-bar", inputs: ["field"] }, { kind: "component", type: AccordianComponent, selector: "lib-accordian", inputs: ["field"] }, { kind: "component", type: MiscellaneousInfoBarComponent, selector: "lib-miscellaneous-info-bar", inputs: ["field", "details"] }, { kind: "component", type: PlainTextComponent, selector: "lib-plain-text", inputs: ["field"] }, { kind: "component", type: MenuComponent, selector: "lib-menu", inputs: ["field"] }, { kind: "component", type: StepperWIthArrowComponent, selector: "lib-stepper-with-arrow", inputs: ["field", "currentStepValue", "autoProgress", "autoProgressDelay"], outputs: ["selectedStep"] }, { kind: "component", type: LabelWithImageComponent, selector: "lib-label-with-image", inputs: ["field"] }, { kind: "component", type: TopHeaderComponent, selector: "lib-top-header", inputs: ["field"] }, { kind: "component", type: FooterComponent, selector: "lib-footer", inputs: ["field"] }, { kind: "component", type: FooterWithButtonsComponent, selector: "lib-footer-with-buttons", inputs: ["field"] }, { kind: "component", type: MotorGlowPlanDetailsComponent, selector: "lib-motor-glow-plan-details", inputs: ["field"], outputs: ["editPlanClick"] }, { kind: "component", type: AnnuityPremiumCalculatorComponent, selector: "lib-annuity-premium-calculator", inputs: ["field", "triggerValidation", "premiumDetails"], outputs: ["onCalcualteButtonClick", "onGenerateSummaryClick", "onAnnuityPremiumChange", "onMinimumPremiumValueChange", "onAutioDebitValueChange", "onGuranteedAnnuityValueChange", "onDigitBossSwitchToggle", "onGrowthRateOptionSelected"] }, { kind: "component", type: FooterDesignComponent, selector: "lib-footer-design", inputs: ["field"] }, { kind: "component", type: AnnuityCalculatorRadioComponent, selector: "lib-annuity-calculator-radio", inputs: ["preSelectConfig", "reactiveFormControlobject", "field"], outputs: ["change", "growthRateChange"] }, { kind: "component", type: TextboxWithRadioComponent, selector: "lib-textbox-with-radio", inputs: ["field", "reactiveFormControlobject"], outputs: ["blur", "change", "input"] }] });
|
|
8601
8685
|
}
|