master-control 0.4.88 → 0.4.89

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.
Files changed (49) hide show
  1. package/esm2022/lib/age-date/age-date.component.mjs +3 -3
  2. package/esm2022/lib/amount-textbox/amount-textbox.component.mjs +3 -3
  3. package/esm2022/lib/annuity-calculator-radio/annuity-calculator-radio.component.mjs +10 -7
  4. package/esm2022/lib/autocomplete/autocomplete.component.mjs +3 -3
  5. package/esm2022/lib/checkbox/checkbox.component.mjs +3 -3
  6. package/esm2022/lib/dob/dob.component.mjs +3 -3
  7. package/esm2022/lib/email-with-domain/email-with-domain.component.mjs +14 -9
  8. package/esm2022/lib/file-preview/file-preview.component.mjs +10 -7
  9. package/esm2022/lib/iframe/iframe.component.mjs +10 -7
  10. package/esm2022/lib/info-textbox/info-textbox.component.mjs +14 -9
  11. package/esm2022/lib/master-control.service.mjs +4 -1
  12. package/esm2022/lib/mob-number/mob-number.component.mjs +3 -3
  13. package/esm2022/lib/multiple-select/multiple-select.component.mjs +3 -3
  14. package/esm2022/lib/otp-mob-number/otp-mob-number.component.mjs +14 -9
  15. package/esm2022/lib/otp-textbox/otp-textbox.component.mjs +15 -11
  16. package/esm2022/lib/radio/radio.component.mjs +3 -3
  17. package/esm2022/lib/search-multi-select/search-multi-select.component.mjs +18 -13
  18. package/esm2022/lib/select/select.component.mjs +3 -3
  19. package/esm2022/lib/select-textbox/select-textbox.component.mjs +3 -3
  20. package/esm2022/lib/subscript-textbox/subscript-textbox.component.mjs +14 -9
  21. package/esm2022/lib/suffix-textbox/suffix-textbox.component.mjs +15 -10
  22. package/esm2022/lib/tag-mob-number/tag-mob-number.component.mjs +15 -10
  23. package/esm2022/lib/textarea/textarea.component.mjs +3 -3
  24. package/esm2022/lib/textbox/textbox.component.mjs +3 -3
  25. package/esm2022/lib/textbox-with-image/textbox-with-image.component.mjs +14 -9
  26. package/esm2022/lib/textbox-with-text/textbox-with-text.component.mjs +14 -9
  27. package/esm2022/lib/textbox-with-underscore/textbox-with-underscore.component.mjs +14 -9
  28. package/esm2022/lib/toggle/toggle.component.mjs +3 -3
  29. package/esm2022/lib/upload/upload.component.mjs +3 -3
  30. package/fesm2022/master-control.mjs +162 -110
  31. package/fesm2022/master-control.mjs.map +1 -1
  32. package/lib/annuity-calculator-radio/annuity-calculator-radio.component.d.ts +3 -1
  33. package/lib/email-with-domain/email-with-domain.component.d.ts +3 -0
  34. package/lib/file-preview/file-preview.component.d.ts +3 -1
  35. package/lib/iframe/iframe.component.d.ts +3 -1
  36. package/lib/info-textbox/info-textbox.component.d.ts +3 -0
  37. package/lib/master-control.service.d.ts +1 -0
  38. package/lib/otp-mob-number/otp-mob-number.component.d.ts +3 -0
  39. package/lib/otp-textbox/otp-textbox.component.d.ts +3 -1
  40. package/lib/search-multi-select/search-multi-select.component.d.ts +3 -0
  41. package/lib/subscript-textbox/subscript-textbox.component.d.ts +3 -0
  42. package/lib/suffix-textbox/suffix-textbox.component.d.ts +3 -0
  43. package/lib/tag-mob-number/tag-mob-number.component.d.ts +3 -0
  44. package/lib/textbox-with-image/textbox-with-image.component.d.ts +3 -0
  45. package/lib/textbox-with-text/textbox-with-text.component.d.ts +3 -0
  46. package/lib/textbox-with-underscore/textbox-with-underscore.component.d.ts +3 -0
  47. package/master-control-0.4.89.tgz +0 -0
  48. package/package.json +1 -1
  49. package/master-control-0.4.88.tgz +0 -0
package/fesm2022/master-control.mjs CHANGED
@@ -2,42 +2,42 @@ import * as i0 from '@angular/core';
2
2
  import { Injectable, input, EventEmitter, Component, Output, Directive, Inject, Input, HostListener, forwardRef, createComponent, ViewChild, output, effect } from '@angular/core';
3
3
  import * as i2 from '@angular/material/input';
4
4
  import { MatInputModule } from '@angular/material/input';
5
- import * as i2$1 from '@angular/material/form-field';
5
+ import * as i3 from '@angular/material/form-field';
6
6
  import { MatFormFieldModule } from '@angular/material/form-field';
7
7
  import * as i1 from '@angular/common';
8
8
  import { CommonModule, DOCUMENT, NgIf, NgFor } from '@angular/common';
9
- import * as i4 from '@angular/forms';
9
+ import * as i5 from '@angular/forms';
10
10
  import { NG_VALUE_ACCESSOR, ReactiveFormsModule, FormsModule, FormGroup } from '@angular/forms';
11
- import * as i5$1 from '@angular/material/autocomplete';
11
+ import * as i5$3 from '@angular/material/autocomplete';
12
12
  import { MatAutocompleteModule } from '@angular/material/autocomplete';
13
- import * as i6 from '@angular/material/core';
13
+ import * as i4 from '@angular/material/core';
14
14
  import { MatOptionModule, DateAdapter, MAT_DATE_FORMATS } from '@angular/material/core';
15
- import * as i3 from '@angular/material/select';
15
+ import * as i3$1 from '@angular/material/select';
16
16
  import { MatSelectModule } from '@angular/material/select';
17
- import * as i2$2 from '@angular/material/radio';
17
+ import * as i2$1 from '@angular/material/radio';
18
18
  import { MatRadioModule } from '@angular/material/radio';
19
19
  import * as i1$1 from '@angular/platform-browser';
20
20
  import * as i1$2 from '@angular/common/http';
21
21
  import { MomentDateAdapter, MomentDateModule } from '@angular/material-moment-adapter';
22
- import * as i5 from '@angular/material/datepicker';
22
+ import * as i5$1 from '@angular/material/datepicker';
23
23
  import { MatDatepickerModule } from '@angular/material/datepicker';
24
- import * as i4$1 from '@angular/material/checkbox';
24
+ import * as i5$2 from '@angular/material/checkbox';
25
25
  import { MatCheckboxModule } from '@angular/material/checkbox';
26
- import * as i2$3 from '@angular/material/tabs';
26
+ import * as i2$2 from '@angular/material/tabs';
27
27
  import { MatTabsModule } from '@angular/material/tabs';
28
- import * as i6$1 from '@angular/material/chips';
28
+ import * as i6 from '@angular/material/chips';
29
29
  import { MatChipsModule } from '@angular/material/chips';
30
30
  import * as i7 from '@angular/material/icon';
31
31
  import { MatIconModule } from '@angular/material/icon';
32
- import * as i2$4 from '@angular/material/stepper';
32
+ import * as i2$3 from '@angular/material/stepper';
33
33
  import { MatStepperModule } from '@angular/material/stepper';
34
- import * as i4$2 from '@angular/material/tooltip';
34
+ import * as i4$1 from '@angular/material/tooltip';
35
35
  import { MatTooltipModule } from '@angular/material/tooltip';
36
- import * as i5$2 from '@angular/material/paginator';
36
+ import * as i5$4 from '@angular/material/paginator';
37
37
  import { MatPaginatorModule } from '@angular/material/paginator';
38
38
  import * as i1$3 from '@angular/material/button-toggle';
39
39
  import { MatButtonToggleModule } from '@angular/material/button-toggle';
40
- import * as i4$3 from '@angular/google-maps';
40
+ import * as i4$2 from '@angular/google-maps';
41
41
  import { GoogleMapsModule } from '@angular/google-maps';
42
42
  import * as i1$4 from '@angular/material/progress-bar';
43
43
  import { MatProgressBarModule } from '@angular/material/progress-bar';
@@ -308,6 +308,9 @@ class MasterControlService {
308
308
  return value;
309
309
  }
310
310
  }
311
+ replaceSpacesWithUnderscores(value) {
312
+ return value.replace(/ /g, '_');
313
+ }
311
314
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MasterControlService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
312
315
  static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MasterControlService, providedIn: 'root' });
313
316
  }
@@ -401,7 +404,7 @@ class TextboxComponent {
401
404
  useExisting: TextboxComponent,
402
405
  multi: true
403
406
  }
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()?.fieldName\"\n [placeholder]=\"field()?.placeHolder\"\n [maxLength]=\"field()?.validators?.maxLength\"\n [minLength]=\"field()?.validators?.minLength\"\n [disabled]=\"field()?.isDisable\"\n [required]=\"field()?.validators?.isRequired\"\n [pattern]=\"field()?.validators?.pattern\"\n (input)=\"onInputChange($event)\"\n (blur)=\"onInputBlur($event)\"\n [value]=\"inputValue\"\n [formControl]=\"reactiveFormControlobject()\"\n />\n }@else {\n <input\n matInput\n autocomplete=\"off\"\n [type]=\"field()?.controlType\"\n [name]=\"field()?.fieldName\"\n [placeholder]=\"field()?.placeHolder\"\n [maxLength]=\"field()?.validators?.maxLength\"\n [minLength]=\"field()?.validators?.minLength\"\n [disabled]=\"field()?.isDisable\"\n [required]=\"field()?.validators?.isRequired\"\n [pattern]=\"field()?.validators?.pattern\"\n (input)=\"onInputChange($event)\"\n (blur)=\"onInputBlur($event)\"\n [value]=\"inputValue\"\n />\n }\n <mat-hint *ngIf=\"field()?.configData?.helperText\">{{field()?.configData?.helperText}}</mat-hint>\n\n <mat-error *ngIf=\"false\">\n {{ field()?.validators?.isRequiredMessage }}\n </mat-error>\n <!-- <mat-error *ngIf=\"field()?.configData?.isInvalidPattern && !masterService.checkIfValueIsEmpty(field()?.validators?.patternMessage)\">\n {{ field()?.validators?.patternMessage }}\n </mat-error> -->\n</mat-form-field>\n<div class=\"error-message\" *ngIf=\"false\">\n {{ field()?.validators?.isRequiredMessage }}.\n</div>\n<div class=\"error-message\" *ngIf=\"false\">\n {{ field()?.validators?.patternMessage }}.\n</div>\n</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"] }] });
407
+ ], 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]=\"this.masterService.replaceSpacesWithUnderscores(field()?.label)\"\n *ngIf=\"field() && field()?.isVisible\"\n [ngStyle]=\"{\n'--custom-border-color': field()?.controlStyle?.borderColor ,\n'--custom-border-width': field()?.controlStyle?.borderWidth ,\n'--custom-border-radius': field()?.controlStyle?.borderRadius ,\n'--custom-bg-color': field()?.controlStyle?.background ,\n'--custom-border-color-focus': field()?.controlStyle?.focusBorderColor ,\n'--custom-border-width-focus': field()?.controlStyle?.focusBorderWidth ,\n'--custom-bg-color-focus': field()?.controlStyle?.focusBackground ,\n'--custom-border-color-hover': field()?.controlStyle?.hoverBorderColor ,\n'--custom-border-width-hover': field()?.controlStyle?.hoverBorderWidth ,\n'--custom-border-color-error': field()?.controlStyle?.errorBorderColor ,\n'--custom-border-width-error': field()?.controlStyle?.errorBorderWidth ,\n'--custom-font-size': field()?.controlStyle?.fontSize ,\n'--custom-font-weight': field()?.controlStyle?.fontWeight ,\n'--custom-font-family': field()?.controlStyle?.fontFamily ,\n'--custom-font-color': field()?.controlStyle?.color ,\n'--custom-caret-color': field()?.controlStyle?.caretColor ,\n'--custom-font-color-disabled' : field()?.controlStyle?.disableColor ,\n'--custom-bg-color-disabled' : field()?.controlStyle?.disableBackground ,\n'--custom-width': field()?.controlStyle?.width ,\n}\"\n>\n @if(reactiveFormControlobject()) {\n <input\n matInput\n autocomplete=\"off\"\n [type]=\"field()?.controlType\"\n [name]=\"field()?.fieldName\"\n [placeholder]=\"field()?.placeHolder\"\n [maxLength]=\"field()?.validators?.maxLength\"\n [minLength]=\"field()?.validators?.minLength\"\n [disabled]=\"field()?.isDisable\"\n [required]=\"field()?.validators?.isRequired\"\n [pattern]=\"field()?.validators?.pattern\"\n (input)=\"onInputChange($event)\"\n (blur)=\"onInputBlur($event)\"\n [value]=\"inputValue\"\n [formControl]=\"reactiveFormControlobject()\"\n />\n }@else {\n <input\n matInput\n autocomplete=\"off\"\n [type]=\"field()?.controlType\"\n [name]=\"field()?.fieldName\"\n [placeholder]=\"field()?.placeHolder\"\n [maxLength]=\"field()?.validators?.maxLength\"\n [minLength]=\"field()?.validators?.minLength\"\n [disabled]=\"field()?.isDisable\"\n [required]=\"field()?.validators?.isRequired\"\n [pattern]=\"field()?.validators?.pattern\"\n (input)=\"onInputChange($event)\"\n (blur)=\"onInputBlur($event)\"\n [value]=\"inputValue\"\n />\n }\n <mat-hint *ngIf=\"field()?.configData?.helperText\">{{field()?.configData?.helperText}}</mat-hint>\n\n <mat-error *ngIf=\"false\">\n {{ field()?.validators?.isRequiredMessage }}\n </mat-error>\n <!-- <mat-error *ngIf=\"field()?.configData?.isInvalidPattern && !masterService.checkIfValueIsEmpty(field()?.validators?.patternMessage)\">\n {{ field()?.validators?.patternMessage }}\n </mat-error> -->\n</mat-form-field>\n<div class=\"error-message\" *ngIf=\"false\">\n {{ field()?.validators?.isRequiredMessage }}.\n</div>\n<div class=\"error-message\" *ngIf=\"false\">\n {{ field()?.validators?.patternMessage }}.\n</div>\n</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: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3.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: i5.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: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i5.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
405
408
  }
406
409
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TextboxComponent, decorators: [{
407
410
  type: Component,
@@ -416,7 +419,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
416
419
  useExisting: TextboxComponent,
417
420
  multi: true
418
421
  }
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()?.fieldName\"\n [placeholder]=\"field()?.placeHolder\"\n [maxLength]=\"field()?.validators?.maxLength\"\n [minLength]=\"field()?.validators?.minLength\"\n [disabled]=\"field()?.isDisable\"\n [required]=\"field()?.validators?.isRequired\"\n [pattern]=\"field()?.validators?.pattern\"\n (input)=\"onInputChange($event)\"\n (blur)=\"onInputBlur($event)\"\n [value]=\"inputValue\"\n [formControl]=\"reactiveFormControlobject()\"\n />\n }@else {\n <input\n matInput\n autocomplete=\"off\"\n [type]=\"field()?.controlType\"\n [name]=\"field()?.fieldName\"\n [placeholder]=\"field()?.placeHolder\"\n [maxLength]=\"field()?.validators?.maxLength\"\n [minLength]=\"field()?.validators?.minLength\"\n [disabled]=\"field()?.isDisable\"\n [required]=\"field()?.validators?.isRequired\"\n [pattern]=\"field()?.validators?.pattern\"\n (input)=\"onInputChange($event)\"\n (blur)=\"onInputBlur($event)\"\n [value]=\"inputValue\"\n />\n }\n <mat-hint *ngIf=\"field()?.configData?.helperText\">{{field()?.configData?.helperText}}</mat-hint>\n\n <mat-error *ngIf=\"false\">\n {{ field()?.validators?.isRequiredMessage }}\n </mat-error>\n <!-- <mat-error *ngIf=\"field()?.configData?.isInvalidPattern && !masterService.checkIfValueIsEmpty(field()?.validators?.patternMessage)\">\n {{ field()?.validators?.patternMessage }}\n </mat-error> -->\n</mat-form-field>\n<div class=\"error-message\" *ngIf=\"false\">\n {{ field()?.validators?.isRequiredMessage }}.\n</div>\n<div class=\"error-message\" *ngIf=\"false\">\n {{ field()?.validators?.patternMessage }}.\n</div>\n</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"] }]
422
+ ], 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]=\"this.masterService.replaceSpacesWithUnderscores(field()?.label)\"\n *ngIf=\"field() && field()?.isVisible\"\n [ngStyle]=\"{\n'--custom-border-color': field()?.controlStyle?.borderColor ,\n'--custom-border-width': field()?.controlStyle?.borderWidth ,\n'--custom-border-radius': field()?.controlStyle?.borderRadius ,\n'--custom-bg-color': field()?.controlStyle?.background ,\n'--custom-border-color-focus': field()?.controlStyle?.focusBorderColor ,\n'--custom-border-width-focus': field()?.controlStyle?.focusBorderWidth ,\n'--custom-bg-color-focus': field()?.controlStyle?.focusBackground ,\n'--custom-border-color-hover': field()?.controlStyle?.hoverBorderColor ,\n'--custom-border-width-hover': field()?.controlStyle?.hoverBorderWidth ,\n'--custom-border-color-error': field()?.controlStyle?.errorBorderColor ,\n'--custom-border-width-error': field()?.controlStyle?.errorBorderWidth ,\n'--custom-font-size': field()?.controlStyle?.fontSize ,\n'--custom-font-weight': field()?.controlStyle?.fontWeight ,\n'--custom-font-family': field()?.controlStyle?.fontFamily ,\n'--custom-font-color': field()?.controlStyle?.color ,\n'--custom-caret-color': field()?.controlStyle?.caretColor ,\n'--custom-font-color-disabled' : field()?.controlStyle?.disableColor ,\n'--custom-bg-color-disabled' : field()?.controlStyle?.disableBackground ,\n'--custom-width': field()?.controlStyle?.width ,\n}\"\n>\n @if(reactiveFormControlobject()) {\n <input\n matInput\n autocomplete=\"off\"\n [type]=\"field()?.controlType\"\n [name]=\"field()?.fieldName\"\n [placeholder]=\"field()?.placeHolder\"\n [maxLength]=\"field()?.validators?.maxLength\"\n [minLength]=\"field()?.validators?.minLength\"\n [disabled]=\"field()?.isDisable\"\n [required]=\"field()?.validators?.isRequired\"\n [pattern]=\"field()?.validators?.pattern\"\n (input)=\"onInputChange($event)\"\n (blur)=\"onInputBlur($event)\"\n [value]=\"inputValue\"\n [formControl]=\"reactiveFormControlobject()\"\n />\n }@else {\n <input\n matInput\n autocomplete=\"off\"\n [type]=\"field()?.controlType\"\n [name]=\"field()?.fieldName\"\n [placeholder]=\"field()?.placeHolder\"\n [maxLength]=\"field()?.validators?.maxLength\"\n [minLength]=\"field()?.validators?.minLength\"\n [disabled]=\"field()?.isDisable\"\n [required]=\"field()?.validators?.isRequired\"\n [pattern]=\"field()?.validators?.pattern\"\n (input)=\"onInputChange($event)\"\n (blur)=\"onInputBlur($event)\"\n [value]=\"inputValue\"\n />\n }\n <mat-hint *ngIf=\"field()?.configData?.helperText\">{{field()?.configData?.helperText}}</mat-hint>\n\n <mat-error *ngIf=\"false\">\n {{ field()?.validators?.isRequiredMessage }}\n </mat-error>\n <!-- <mat-error *ngIf=\"field()?.configData?.isInvalidPattern && !masterService.checkIfValueIsEmpty(field()?.validators?.patternMessage)\">\n {{ field()?.validators?.patternMessage }}\n </mat-error> -->\n</mat-form-field>\n<div class=\"error-message\" *ngIf=\"false\">\n {{ field()?.validators?.isRequiredMessage }}.\n</div>\n<div class=\"error-message\" *ngIf=\"false\">\n {{ field()?.validators?.patternMessage }}.\n</div>\n</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
423
  }], ctorParameters: () => [{ type: MasterControlService }], propDecorators: { blur: [{
421
424
  type: Output
422
425
  }] } });
@@ -700,7 +703,7 @@ class SelectComponent {
700
703
  useExisting: SelectComponent,
701
704
  multi: true
702
705
  }
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"] }] });
706
+ ], 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]=\"this.masterService.replaceSpacesWithUnderscores(field()?.label)\" [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]=\"this.masterService.replaceSpacesWithUnderscores(field()?.label)\" [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: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: i3$1.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$1.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i4.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: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.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: i5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: CustomizedTooltipDirective, selector: "[appTooltipTemplate]", inputs: ["appTooltipTemplate"] }] });
704
707
  }
705
708
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SelectComponent, decorators: [{
706
709
  type: Component,
@@ -720,7 +723,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
720
723
  useExisting: SelectComponent,
721
724
  multi: true
722
725
  }
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"] }]
726
+ ], 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]=\"this.masterService.replaceSpacesWithUnderscores(field()?.label)\" [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]=\"this.masterService.replaceSpacesWithUnderscores(field()?.label)\" [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"] }]
724
727
  }], ctorParameters: () => [{ type: MasterControlService }], propDecorators: { selectionChange: [{
725
728
  type: Output
726
729
  }], infoClick: [{
@@ -780,7 +783,7 @@ class RadioComponent {
780
783
  useExisting: RadioComponent,
781
784
  multi: true
782
785
  }
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()?.fieldName\"\n >\n <div\n class=\"card radio-card-gender py-auto px-1\"\n *ngFor=\"let data of field()?.options\"\n [ngClass]=\"{'disable-radio-btn': field()?.isDisable || reactiveFormControlobject?.disabled || 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()?.fieldName + '_' + data.value\"\n >\n <span style=\"white-space: pre-line;\" class=\"forRadioLabel\" [ngStyle]=\"{\n '--radio-button-font-weight': field()?.controlStyle?.fontWeight,\n '--radio-button-font-size': field()?.controlStyle?.fontSize,\n '--radio-button-font-color': field()?.controlStyle?.color,\n }\">{{ data.label }}\n <img class=\"radio-btn-icon\" *ngIf=\"field()?.imageUrl\" [src]=\"field()?.imageUrl\" alt=\"\">\n </span>\n </mat-radio-button>\n </div>\n </mat-radio-group>\n }@else {\n <mat-radio-group [class]=\"'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 [name]=\"field()?.fieldName\"\n >\n <div\n class=\"card radio-card-gender py-auto px-1\"\n *ngFor=\"let data of field()?.options\"\n [ngClass]=\"{'disable-radio-btn': field()?.isDisable || 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()?.fieldName + '_' + data.value\"\n >\n <span style=\"white-space: pre-line;\" class=\"forRadioLabel\" [ngStyle]=\"{\n '--radio-button-font-weight': field()?.controlStyle?.fontWeight,\n '--radio-button-font-size': field()?.controlStyle?.fontSize,\n '--radio-button-font-color': field()?.controlStyle?.color,\n }\">{{ data.label }}\n <img class=\"radio-btn-icon\" *ngIf=\"field()?.imageUrl\" [src]=\"field()?.imageUrl\" alt=\"\">\n </span>\n </mat-radio-button>\n </div>\n </mat-radio-group>\n }\n <div class=\"error-message\" *ngIf=\"false\">\n {{field()?.validators?.patternMessage}}.\n </div>\n</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"] }] });
786
+ ], 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]=\"this.masterService.replaceSpacesWithUnderscores(field()?.label)\"\n [name]=\"field()?.fieldName\"\n >\n <div\n class=\"card radio-card-gender py-auto px-1\"\n *ngFor=\"let data of field()?.options\"\n [ngClass]=\"{'disable-radio-btn': field()?.isDisable || reactiveFormControlobject?.disabled || 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]=\"this.masterService.replaceSpacesWithUnderscores(field()?.label) + '_' + data.value\"\n [name]=\"field()?.fieldName + '_' + data.value\"\n >\n <span style=\"white-space: pre-line;\" class=\"forRadioLabel\" [ngStyle]=\"{\n '--radio-button-font-weight': field()?.controlStyle?.fontWeight,\n '--radio-button-font-size': field()?.controlStyle?.fontSize,\n '--radio-button-font-color': field()?.controlStyle?.color,\n }\">{{ data.label }}\n <img class=\"radio-btn-icon\" *ngIf=\"field()?.imageUrl\" [src]=\"field()?.imageUrl\" alt=\"\">\n </span>\n </mat-radio-button>\n </div>\n </mat-radio-group>\n }@else {\n <mat-radio-group [class]=\"'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]=\"this.masterService.replaceSpacesWithUnderscores(field()?.label)\"\n [name]=\"field()?.fieldName\"\n >\n <div\n class=\"card radio-card-gender py-auto px-1\"\n *ngFor=\"let data of field()?.options\"\n [ngClass]=\"{'disable-radio-btn': field()?.isDisable || 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]=\"this.masterService.replaceSpacesWithUnderscores(field()?.label) + '_' + data.value\"\n [name]=\"field()?.fieldName + '_' + data.value\"\n >\n <span style=\"white-space: pre-line;\" class=\"forRadioLabel\" [ngStyle]=\"{\n '--radio-button-font-weight': field()?.controlStyle?.fontWeight,\n '--radio-button-font-size': field()?.controlStyle?.fontSize,\n '--radio-button-font-color': field()?.controlStyle?.color,\n }\">{{ data.label }}\n <img class=\"radio-btn-icon\" *ngIf=\"field()?.imageUrl\" [src]=\"field()?.imageUrl\" alt=\"\">\n </span>\n </mat-radio-button>\n </div>\n </mat-radio-group>\n }\n <div class=\"error-message\" *ngIf=\"false\">\n {{field()?.validators?.patternMessage}}.\n </div>\n</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$1.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i2$1.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: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: CustomizedTooltipDirective, selector: "[appTooltipTemplate]", inputs: ["appTooltipTemplate"] }] });
784
787
  }
785
788
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RadioComponent, decorators: [{
786
789
  type: Component,
@@ -796,7 +799,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
796
799
  useExisting: RadioComponent,
797
800
  multi: true
798
801
  }
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()?.fieldName\"\n >\n <div\n class=\"card radio-card-gender py-auto px-1\"\n *ngFor=\"let data of field()?.options\"\n [ngClass]=\"{'disable-radio-btn': field()?.isDisable || reactiveFormControlobject?.disabled || 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()?.fieldName + '_' + data.value\"\n >\n <span style=\"white-space: pre-line;\" class=\"forRadioLabel\" [ngStyle]=\"{\n '--radio-button-font-weight': field()?.controlStyle?.fontWeight,\n '--radio-button-font-size': field()?.controlStyle?.fontSize,\n '--radio-button-font-color': field()?.controlStyle?.color,\n }\">{{ data.label }}\n <img class=\"radio-btn-icon\" *ngIf=\"field()?.imageUrl\" [src]=\"field()?.imageUrl\" alt=\"\">\n </span>\n </mat-radio-button>\n </div>\n </mat-radio-group>\n }@else {\n <mat-radio-group [class]=\"'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 [name]=\"field()?.fieldName\"\n >\n <div\n class=\"card radio-card-gender py-auto px-1\"\n *ngFor=\"let data of field()?.options\"\n [ngClass]=\"{'disable-radio-btn': field()?.isDisable || 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()?.fieldName + '_' + data.value\"\n >\n <span style=\"white-space: pre-line;\" class=\"forRadioLabel\" [ngStyle]=\"{\n '--radio-button-font-weight': field()?.controlStyle?.fontWeight,\n '--radio-button-font-size': field()?.controlStyle?.fontSize,\n '--radio-button-font-color': field()?.controlStyle?.color,\n }\">{{ data.label }}\n <img class=\"radio-btn-icon\" *ngIf=\"field()?.imageUrl\" [src]=\"field()?.imageUrl\" alt=\"\">\n </span>\n </mat-radio-button>\n </div>\n </mat-radio-group>\n }\n <div class=\"error-message\" *ngIf=\"false\">\n {{field()?.validators?.patternMessage}}.\n </div>\n</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"] }]
802
+ ], 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]=\"this.masterService.replaceSpacesWithUnderscores(field()?.label)\"\n [name]=\"field()?.fieldName\"\n >\n <div\n class=\"card radio-card-gender py-auto px-1\"\n *ngFor=\"let data of field()?.options\"\n [ngClass]=\"{'disable-radio-btn': field()?.isDisable || reactiveFormControlobject?.disabled || 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]=\"this.masterService.replaceSpacesWithUnderscores(field()?.label) + '_' + data.value\"\n [name]=\"field()?.fieldName + '_' + data.value\"\n >\n <span style=\"white-space: pre-line;\" class=\"forRadioLabel\" [ngStyle]=\"{\n '--radio-button-font-weight': field()?.controlStyle?.fontWeight,\n '--radio-button-font-size': field()?.controlStyle?.fontSize,\n '--radio-button-font-color': field()?.controlStyle?.color,\n }\">{{ data.label }}\n <img class=\"radio-btn-icon\" *ngIf=\"field()?.imageUrl\" [src]=\"field()?.imageUrl\" alt=\"\">\n </span>\n </mat-radio-button>\n </div>\n </mat-radio-group>\n }@else {\n <mat-radio-group [class]=\"'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]=\"this.masterService.replaceSpacesWithUnderscores(field()?.label)\"\n [name]=\"field()?.fieldName\"\n >\n <div\n class=\"card radio-card-gender py-auto px-1\"\n *ngFor=\"let data of field()?.options\"\n [ngClass]=\"{'disable-radio-btn': field()?.isDisable || 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]=\"this.masterService.replaceSpacesWithUnderscores(field()?.label) + '_' + data.value\"\n [name]=\"field()?.fieldName + '_' + data.value\"\n >\n <span style=\"white-space: pre-line;\" class=\"forRadioLabel\" [ngStyle]=\"{\n '--radio-button-font-weight': field()?.controlStyle?.fontWeight,\n '--radio-button-font-size': field()?.controlStyle?.fontSize,\n '--radio-button-font-color': field()?.controlStyle?.color,\n }\">{{ data.label }}\n <img class=\"radio-btn-icon\" *ngIf=\"field()?.imageUrl\" [src]=\"field()?.imageUrl\" alt=\"\">\n </span>\n </mat-radio-button>\n </div>\n </mat-radio-group>\n }\n <div class=\"error-message\" *ngIf=\"false\">\n {{field()?.validators?.patternMessage}}.\n </div>\n</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
803
  }], ctorParameters: () => [{ type: MasterControlService }], propDecorators: { change: [{
801
804
  type: Output
802
805
  }] } });
@@ -839,7 +842,7 @@ class ToggleComponent {
839
842
  useExisting: forwardRef(() => ToggleComponent),
840
843
  multi: true,
841
844
  },
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()?.fieldName\"\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()?.fieldName\"\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"] }] });
845
+ ], 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()?.fieldName\"\n [id]=\"this.masterService.replaceSpacesWithUnderscores(field()?.label)\"\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()?.fieldName\"\n [id]=\"this.masterService.replaceSpacesWithUnderscores(field()?.label)\"\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: i5.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.CheckboxRequiredValidator, selector: "input[type=checkbox][required][formControlName],input[type=checkbox][required][formControl],input[type=checkbox][required][ngModel]" }, { kind: "directive", type: i5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
843
846
  }
844
847
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ToggleComponent, decorators: [{
845
848
  type: Component,
@@ -849,13 +852,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
849
852
  useExisting: forwardRef(() => ToggleComponent),
850
853
  multi: true,
851
854
  },
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()?.fieldName\"\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()?.fieldName\"\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"] }]
855
+ ], 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()?.fieldName\"\n [id]=\"this.masterService.replaceSpacesWithUnderscores(field()?.label)\"\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()?.fieldName\"\n [id]=\"this.masterService.replaceSpacesWithUnderscores(field()?.label)\"\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
856
  }], ctorParameters: () => [{ type: MasterControlService }], propDecorators: { change: [{
854
857
  type: Output
855
858
  }] } });
856
859
 
857
860
  class FilePreviewComponent {
858
861
  sanitizer;
862
+ masterService;
859
863
  field = input.required();
860
864
  file = input(null);
861
865
  closed = new EventEmitter();
@@ -863,8 +867,9 @@ class FilePreviewComponent {
863
867
  fileObjectUrl = '';
864
868
  textContent = '';
865
869
  safeFileUrl = null;
866
- constructor(sanitizer) {
870
+ constructor(sanitizer, masterService) {
867
871
  this.sanitizer = sanitizer;
872
+ this.masterService = masterService;
868
873
  }
869
874
  isImage() {
870
875
  return this.file()?.type.startsWith('image/') || false;
@@ -933,13 +938,13 @@ class FilePreviewComponent {
933
938
  document.body.removeChild(link);
934
939
  setTimeout(() => URL.revokeObjectURL(url), 100);
935
940
  }
936
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FilePreviewComponent, deps: [{ token: i1$1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
937
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: FilePreviewComponent, isStandalone: true, selector: "lib-file-preview", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, file: { classPropertyName: "file", publicName: "file", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed" }, ngImport: i0, template: "<div class=\"file-preview-modal\" \n *ngIf=\"field() && field()?.isVisible\"\n [id]=\"field()?.fieldName + '_preview'\"\n (click)=\"onBackdropClick($event)\"\n (keydown.escape)=\"closePreview()\"\n [ngStyle]=\"{\n '--modal-background': field()?.previewStyle?.modalBackground || 'rgba(0, 0, 0, 0.9)',\n '--modal-z-index': field()?.previewStyle?.zIndex || '10000',\n '--modal-width': field()?.previewStyle?.width || '100%',\n '--modal-height': field()?.previewStyle?.height || '100%'\n }\">\n \n <!-- Image Preview -->\n <div *ngIf=\"isImage()\" \n class=\"preview-container image-container\"\n [id]=\"field()?.fieldName + '_image_container'\"\n [ngStyle]=\"{\n '--image-container-background': field()?.previewStyle?.imageContainerBackground || 'transparent',\n '--image-container-border-radius': field()?.previewStyle?.imageContainerBorderRadius || '8px',\n '--image-container-padding': field()?.previewStyle?.imageContainerPadding || '20px',\n '--image-container-margin': field()?.previewStyle?.imageContainerMargin || '0'\n }\">\n \n <button class=\"close-btn\" \n type=\"button\"\n [id]=\"field()?.fieldName + '_close_btn'\"\n (click)=\"closePreview()\" \n [title]=\"field()?.previewStyle?.closeBtnTitle || 'Close'\"\n [ngStyle]=\"{\n '--close-btn-background': field()?.previewStyle?.closeBtnBackground || 'rgba(255, 255, 255, 0.9)',\n '--close-btn-color': field()?.previewStyle?.closeBtnColor || '#000',\n '--close-btn-border-radius': field()?.previewStyle?.closeBtnBorderRadius || '50%',\n '--close-btn-font-size': field()?.previewStyle?.closeBtnFontSize || '20px',\n '--close-btn-font-weight': field()?.previewStyle?.closeBtnFontWeight || 'bold',\n '--close-btn-hover-background': field()?.previewStyle?.closeBtnHoverBackground || 'rgba(255, 255, 255, 1)'\n }\">&times;</button>\n \n <h3 class=\"file-title\"\n [ngStyle]=\"{\n '--title-color': field()?.previewStyle?.titleColor || '#fff',\n '--title-font-family': field()?.previewStyle?.titleFontFamily || 'Mulish',\n '--title-font-size': field()?.previewStyle?.titleFontSize || '18px',\n '--title-font-weight': field()?.previewStyle?.titleFontWeight || '600',\n '--title-margin': field()?.previewStyle?.titleMargin || '0 0 10px 0',\n '--title-padding': field()?.previewStyle?.titlePadding || '0 10px'\n }\">{{ file()?.name }}</h3>\n \n <img [src]=\"fileDataUrl\" \n [alt]=\"file()?.name\" \n [id]=\"field()?.fieldName + '_preview_image'\"\n class=\"preview-image\"\n [ngStyle]=\"{\n '--image-max-width': field()?.previewStyle?.imageMaxWidth || '100%',\n '--image-max-height': field()?.previewStyle?.imageMaxHeight || '80vh',\n '--image-border-radius': field()?.previewStyle?.imageBorderRadius || '8px',\n '--image-box-shadow': field()?.previewStyle?.imageBoxShadow || '0 4px 20px rgba(0,0,0,0.5)',\n '--image-object-fit': field()?.previewStyle?.imageObjectFit || 'contain'\n }\" />\n </div>\n\n <!-- PDF Preview -->\n <div *ngIf=\"isPdf()\" \n class=\"preview-container pdf-container\"\n [id]=\"field()?.fieldName + '_pdf_container'\"\n [ngStyle]=\"{\n '--pdf-container-background': field()?.previewStyle?.pdfContainerBackground || '#fff',\n '--pdf-container-border-radius': field()?.previewStyle?.pdfContainerBorderRadius || '8px',\n '--pdf-container-width': field()?.previewStyle?.pdfContainerWidth || '95vw',\n '--pdf-container-height': field()?.previewStyle?.pdfContainerHeight || '95vh'\n }\">\n \n <!-- Top-right action buttons -->\n <div class=\"pdf-actions-top-right\"\n [ngStyle]=\"{\n '--actions-top': field()?.previewStyle?.actionsTop || '15px',\n '--actions-right': field()?.previewStyle?.actionsRight || '15px',\n '--actions-gap': field()?.previewStyle?.actionsGap || '10px'\n }\">\n \n <button (click)=\"closePreview()\" \n type=\"button\"\n class=\"action-icon-btn close-btn\"\n [id]=\"field()?.fieldName + '_close_pdf'\"\n [title]=\"field()?.previewStyle?.closeBtnTitle || 'Close'\"\n [ngStyle]=\"{\n '--close-btn-background': field()?.previewStyle?.closeBtnBackground || 'rgba(255, 255, 255, 0.9)',\n '--close-btn-color': field()?.previewStyle?.closeBtnColor || '#000',\n '--close-btn-border-radius': field()?.previewStyle?.closeBtnBorderRadius || '50%',\n '--close-btn-font-size': field()?.previewStyle?.closeBtnFontSize || '20px',\n '--close-btn-font-weight': field()?.previewStyle?.closeBtnFontWeight || 'bold',\n '--close-btn-hover-background': field()?.previewStyle?.closeBtnHoverBackground || 'rgba(255, 255, 255, 1)'\n }\">&times;</button>\n </div>\n \n <!-- File title -->\n <h3 class=\"file-title pdf-title\"\n [ngStyle]=\"{\n '--pdf-title-color': field()?.previewStyle?.pdfTitleColor || '#333',\n '--pdf-title-font-family': field()?.previewStyle?.pdfTitleFontFamily || 'Mulish',\n '--pdf-title-font-size': field()?.previewStyle?.pdfTitleFontSize || '16px',\n '--pdf-title-font-weight': field()?.previewStyle?.pdfTitleFontWeight || '600',\n '--pdf-title-margin': field()?.previewStyle?.pdfTitleMargin || '0px 20px 10px 20px',\n '--pdf-title-padding': field()?.previewStyle?.pdfTitlePadding || '0'\n }\">{{ file()?.name }}</h3>\n \n <iframe [src]=\"safeFileUrl\" \n [title]=\"file()?.name\" \n [id]=\"field()?.fieldName + '_pdf_iframe'\"\n class=\"pdf-iframe\"\n [ngStyle]=\"{\n '--iframe-border': field()?.previewStyle?.iframeBorder || 'none',\n '--iframe-border-radius': field()?.previewStyle?.iframeBorderRadius || '0',\n '--iframe-width': field()?.previewStyle?.iframeWidth || '100%',\n '--iframe-height': field()?.previewStyle?.iframeHeight || 'calc(100% - 80px)',\n '--iframe-min-height': field()?.previewStyle?.iframeMinHeight || '600px'\n }\"></iframe>\n </div>\n\n <!-- Text Preview -->\n <div *ngIf=\"isText()\" \n class=\"preview-container text-container\"\n [id]=\"field()?.fieldName + '_text_container'\"\n [ngStyle]=\"{\n '--text-container-background': field()?.previewStyle?.textContainerBackground || '#fff',\n '--text-container-border-radius': field()?.previewStyle?.textContainerBorderRadius || '8px',\n '--text-container-width': field()?.previewStyle?.textContainerWidth || '95vw',\n '--text-container-height': field()?.previewStyle?.textContainerHeight || '95vh'\n }\">\n \n <div class=\"text-header\"\n [id]=\"field()?.fieldName + '_text_header'\"\n [ngStyle]=\"{\n '--text-header-background': field()?.previewStyle?.textHeaderBackground || '#f8f9fa',\n '--text-header-border-color': field()?.previewStyle?.textHeaderBorderColor || '#dee2e6',\n '--text-header-padding': field()?.previewStyle?.textHeaderPadding || '15px 20px'\n }\">\n \n <h3 class=\"file-title\"\n [ngStyle]=\"{\n '--text-title-color': field()?.previewStyle?.textTitleColor || '#333',\n '--text-title-font-family': field()?.previewStyle?.textTitleFontFamily || 'Mulish',\n '--text-title-font-size': field()?.previewStyle?.textTitleFontSize || '16px',\n '--text-title-font-weight': field()?.previewStyle?.textTitleFontWeight || '600',\n '--text-title-margin': field()?.previewStyle?.textTitleMargin || '0'\n }\">{{ file()?.name }}</h3>\n \n <button (click)=\"closePreview()\" \n type=\"button\"\n class=\"btn btn-danger\"\n [id]=\"field()?.fieldName + '_close_text'\"\n [ngStyle]=\"{\n '--btn-danger-background': field()?.previewStyle?.btnDangerBackground || '#dc3545',\n '--btn-danger-color': field()?.previewStyle?.btnDangerColor || '#fff',\n '--btn-border-radius': field()?.previewStyle?.btnBorderRadius || '4px',\n '--btn-padding': field()?.previewStyle?.btnPadding || '8px 16px',\n '--btn-font-size': field()?.previewStyle?.btnFontSize || '14px'\n }\">{{ field()?.previewStyle?.closeText || 'Close' }}</button>\n </div>\n \n <pre class=\"text-content\"\n [id]=\"field()?.fieldName + '_text_content'\"\n [ngStyle]=\"{\n '--text-content-background': field()?.previewStyle?.textContentBackground || '#fff',\n '--text-content-color': field()?.previewStyle?.textContentColor || '#333',\n '--text-content-font-family': field()?.previewStyle?.textContentFontFamily || 'Consolas, Monaco, Courier New, monospace',\n '--text-content-font-size': field()?.previewStyle?.textContentFontSize || '14px',\n '--text-content-line-height': field()?.previewStyle?.textContentLineHeight || '1.5',\n '--text-content-padding': field()?.previewStyle?.textContentPadding || '20px',\n '--text-content-margin': field()?.previewStyle?.textContentMargin || '0'\n }\">{{ textContent }}</pre>\n </div>\n\n <!-- Unsupported File -->\n <div *ngIf=\"isUnsupported()\" \n class=\"preview-container unsupported-container\"\n [id]=\"field()?.fieldName + '_unsupported_container'\"\n [ngStyle]=\"{\n '--unsupported-background': field()?.previewStyle?.unsupportedBackground || '#fff',\n '--unsupported-border-radius': field()?.previewStyle?.unsupportedBorderRadius || '8px',\n '--unsupported-padding': field()?.previewStyle?.unsupportedPadding || '40px',\n '--unsupported-min-width': field()?.previewStyle?.unsupportedMinWidth || '300px'\n }\">\n \n <div class=\"unsupported-content\">\n <h3 [ngStyle]=\"{\n '--unsupported-title-color': field()?.previewStyle?.unsupportedTitleColor || '#333',\n '--unsupported-title-font-family': field()?.previewStyle?.unsupportedTitleFontFamily || 'Mulish',\n '--unsupported-title-font-size': field()?.previewStyle?.unsupportedTitleFontSize || '18px',\n '--unsupported-title-font-weight': field()?.previewStyle?.unsupportedTitleFontWeight || '600',\n '--unsupported-title-margin': field()?.previewStyle?.unsupportedTitleMargin || '0 0 20px 0'\n }\">{{ file()?.name }}</h3>\n \n <p [ngStyle]=\"{\n '--unsupported-text-color': field()?.previewStyle?.unsupportedTextColor || '#666',\n '--unsupported-text-font-size': field()?.previewStyle?.unsupportedTextFontSize || '14px',\n '--unsupported-text-margin': field()?.previewStyle?.unsupportedTextMargin || '0 0 30px 0'\n }\">{{ field()?.previewStyle?.unsupportedMessage || 'Preview not available for this file type' }}</p>\n \n <div class=\"unsupported-actions\"\n [ngStyle]=\"{\n '--actions-gap': field()?.previewStyle?.actionsGap || '15px',\n '--actions-justify': field()?.previewStyle?.actionsJustify || 'center'\n }\">\n \n <button (click)=\"downloadFile()\" \n type=\"button\"\n class=\"btn btn-primary\"\n [id]=\"field()?.fieldName + '_download'\"\n [ngStyle]=\"{\n '--btn-primary-background': field()?.previewStyle?.btnPrimaryBackground || '#007bff',\n '--btn-primary-color': field()?.previewStyle?.btnPrimaryColor || '#fff',\n '--btn-border-radius': field()?.previewStyle?.btnBorderRadius || '4px',\n '--btn-padding': field()?.previewStyle?.btnPadding || '8px 16px',\n '--btn-font-size': field()?.previewStyle?.btnFontSize || '14px'\n }\">{{ field()?.previewStyle?.downloadText || 'Download' }}</button>\n \n <button (click)=\"closePreview()\" \n type=\"button\"\n class=\"btn btn-secondary\"\n [id]=\"field()?.fieldName + '_close_unsupported'\"\n [ngStyle]=\"{\n '--btn-secondary-background': field()?.previewStyle?.btnSecondaryBackground || '#6c757d',\n '--btn-secondary-color': field()?.previewStyle?.btnSecondaryColor || '#fff',\n '--btn-border-radius': field()?.previewStyle?.btnBorderRadius || '4px',\n '--btn-padding': field()?.previewStyle?.btnPadding || '8px 16px',\n '--btn-font-size': field()?.previewStyle?.btnFontSize || '14px'\n }\">{{ field()?.previewStyle?.closeText || 'Close' }}</button>\n </div>\n </div>\n </div>\n</div>", styles: [".file-preview-modal{position:fixed;top:0;left:0;width:var(--modal-width, 100%);height:var(--modal-height, 100%);background:var(--modal-background, rgba(0, 0, 0, .9));z-index:var(--modal-z-index, 10000);display:flex;align-items:center;justify-content:center;overflow:auto}.preview-container{position:relative;max-width:90%;max-height:90%;display:flex;flex-direction:column;align-items:center;background:var(--image-container-background, transparent);border-radius:var(--image-container-border-radius, 8px);padding:var(--image-container-padding, 10px);margin:var(--image-container-margin, 0)}.close-btn{position:absolute;top:0;right:10px;width:40px!important;height:40px!important;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;background:var(--close-btn-background, rgba(255, 255, 255, .9));color:var(--close-btn-color, #000);border-radius:var(--close-btn-border-radius, 50%);font-size:var(--close-btn-font-size, 20px);font-weight:var(--close-btn-font-weight, bold);z-index:1001;box-shadow:1px 0 4px 1px #c7c7c7}.close-btn:hover{background:var(--close-btn-hover-background, rgba(255, 255, 255, 1))}.file-title{color:var(--title-color, #000000);font-family:var(--title-font-family, \"Mulish\");font-size:var(--title-font-size, 18px);font-weight:var(--title-font-weight, 600);margin:var(--title-margin, 0 0 10px 0);padding:var(--title-padding, 0 10px);text-align:center;word-break:break-all}.preview-image{max-width:var(--image-max-width, 100%);max-height:var(--image-max-height, 80vh);object-fit:var(--image-object-fit, contain);border-radius:var(--image-border-radius, 4px);box-shadow:var(--image-box-shadow, 0 4px 20px rgba(0, 0, 0, .3))}.preview-content{width:100%;height:80vh;border:none;border-radius:var(--content-border-radius, 4px)}.text-content{background:var(--text-background, #fff);color:var(--text-color, #000);padding:var(--text-padding, 20px);border-radius:var(--text-border-radius, 4px);max-width:var(--text-max-width, 800px);max-height:var(--text-max-height, 70vh);overflow:auto;white-space:pre-wrap;font-family:var(--text-font-family, \"Courier New, monospace\")}.action-buttons{margin-top:20px;display:flex;gap:10px}.action-btn{padding:var(--btn-padding, 8px 16px);background:var(--btn-background, #007bff);color:var(--btn-color, #fff);border:none;border-radius:var(--btn-border-radius, 4px);cursor:pointer;font-size:var(--btn-font-size, 14px)}.action-btn:hover{background:var(--btn-hover-background, #0056b3)}.unsupported-content{text-align:center;color:var(--unsupported-color, #fff);padding:var(--unsupported-padding, 40px)}.pdf-iframe{width:var(--iframe-width, 100%);height:var(--iframe-height, 80vh);min-height:var(--iframe-min-height, 600px);border:var(--iframe-border, none);border-radius:var(--iframe-border-radius, 0)}.pdf-container{width:var(--pdf-container-width, 95vw);height:var(--pdf-container-height, 95vh);background:var(--pdf-container-background, #fff);border-radius:var(--pdf-container-border-radius, 8px);display:flex;flex-direction:column;overflow:hidden}.pdf-header{background:var(--pdf-header-background, #f8f9fa);border-bottom:1px solid var(--pdf-header-border-color, #dee2e6);padding:var(--pdf-header-padding, 15px 20px);flex-shrink:0}.pdf-actions{display:flex;gap:10px;margin-top:10px}.btn{padding:var(--btn-padding, 8px 16px);border:none;border-radius:var(--btn-border-radius, 4px);cursor:pointer;font-size:var(--btn-font-size, 14px);font-weight:var(--btn-font-weight, 400);text-decoration:none;display:inline-block}.btn-primary{background:var(--btn-primary-background, #007bff);color:var(--btn-primary-color, #fff)}.btn-primary:hover{background:var(--btn-primary-hover-background, #0056b3)}.btn-danger{background:var(--btn-danger-background, #dc3545);color:var(--btn-danger-color, #fff)}.btn-danger:hover{background:var(--btn-danger-hover-background, #c82333)}.pdf-actions-top-right{position:absolute;top:var(--actions-top, 15px);right:var(--actions-right, 15px);display:flex;gap:var(--actions-gap, 10px);z-index:1001}.action-icon-btn{width:40px;height:40px;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:var(--icon-btn-border-radius, 50%);font-size:var(--icon-btn-font-size, 16px);transition:background-color .2s ease}.open-new-tab-btn{background:var(--icon-btn-background, rgba(255, 255, 255, .9));color:var(--icon-btn-color, #007bff)}.open-new-tab-btn:hover{background:var(--icon-btn-hover-background, rgba(255, 255, 255, 1))}.pdf-title{color:var(--pdf-title-color, #333);font-family:var(--pdf-title-font-family, \"Mulish\");font-size:var(--pdf-title-font-size, 16px);font-weight:var(--pdf-title-font-weight, 600);margin:var(--pdf-title-margin, 0 20px 10px 20px);padding:var(--pdf-title-padding, 0);text-align:center}.pdf-iframe{width:var(--iframe-width, 100%);height:var(--iframe-height, calc(100% - 80px) );min-height:var(--iframe-min-height, 600px);border:var(--iframe-border, none);border-radius:var(--iframe-border-radius, 0);margin:0 20px 20px}\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"] }] });
941
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FilePreviewComponent, deps: [{ token: i1$1.DomSanitizer }, { token: MasterControlService }], target: i0.ɵɵFactoryTarget.Component });
942
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: FilePreviewComponent, isStandalone: true, selector: "lib-file-preview", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, file: { classPropertyName: "file", publicName: "file", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed" }, ngImport: i0, template: "<div class=\"file-preview-modal\"\n *ngIf=\"field() && field()?.isVisible\"\n [id]=\"this.masterService.replaceSpacesWithUnderscores(field()?.label) + '_preview'\"\n (click)=\"onBackdropClick($event)\"\n (keydown.escape)=\"closePreview()\"\n [ngStyle]=\"{\n '--modal-background': field()?.previewStyle?.modalBackground || 'rgba(0, 0, 0, 0.9)',\n '--modal-z-index': field()?.previewStyle?.zIndex || '10000',\n '--modal-width': field()?.previewStyle?.width || '100%',\n '--modal-height': field()?.previewStyle?.height || '100%'\n }\">\n\n <!-- Image Preview -->\n <div *ngIf=\"isImage()\"\n class=\"preview-container image-container\"\n [id]=\"this.masterService.replaceSpacesWithUnderscores(field()?.label) + '_image_container'\"\n [ngStyle]=\"{\n '--image-container-background': field()?.previewStyle?.imageContainerBackground || 'transparent',\n '--image-container-border-radius': field()?.previewStyle?.imageContainerBorderRadius || '8px',\n '--image-container-padding': field()?.previewStyle?.imageContainerPadding || '20px',\n '--image-container-margin': field()?.previewStyle?.imageContainerMargin || '0'\n }\">\n\n <button class=\"close-btn\"\n type=\"button\"\n [id]=\"this.masterService.replaceSpacesWithUnderscores(field()?.label) + '_close_btn'\"\n (click)=\"closePreview()\"\n [title]=\"field()?.previewStyle?.closeBtnTitle || 'Close'\"\n [ngStyle]=\"{\n '--close-btn-background': field()?.previewStyle?.closeBtnBackground || 'rgba(255, 255, 255, 0.9)',\n '--close-btn-color': field()?.previewStyle?.closeBtnColor || '#000',\n '--close-btn-border-radius': field()?.previewStyle?.closeBtnBorderRadius || '50%',\n '--close-btn-font-size': field()?.previewStyle?.closeBtnFontSize || '20px',\n '--close-btn-font-weight': field()?.previewStyle?.closeBtnFontWeight || 'bold',\n '--close-btn-hover-background': field()?.previewStyle?.closeBtnHoverBackground || 'rgba(255, 255, 255, 1)'\n }\">&times;</button>\n\n <h3 class=\"file-title\"\n [ngStyle]=\"{\n '--title-color': field()?.previewStyle?.titleColor || '#fff',\n '--title-font-family': field()?.previewStyle?.titleFontFamily || 'Mulish',\n '--title-font-size': field()?.previewStyle?.titleFontSize || '18px',\n '--title-font-weight': field()?.previewStyle?.titleFontWeight || '600',\n '--title-margin': field()?.previewStyle?.titleMargin || '0 0 10px 0',\n '--title-padding': field()?.previewStyle?.titlePadding || '0 10px'\n }\">{{ file()?.name }}</h3>\n\n <img [src]=\"fileDataUrl\"\n [alt]=\"file()?.name\"\n [id]=\"this.masterService.replaceSpacesWithUnderscores(field()?.label) + '_preview_image'\"\n class=\"preview-image\"\n [ngStyle]=\"{\n '--image-max-width': field()?.previewStyle?.imageMaxWidth || '100%',\n '--image-max-height': field()?.previewStyle?.imageMaxHeight || '80vh',\n '--image-border-radius': field()?.previewStyle?.imageBorderRadius || '8px',\n '--image-box-shadow': field()?.previewStyle?.imageBoxShadow || '0 4px 20px rgba(0,0,0,0.5)',\n '--image-object-fit': field()?.previewStyle?.imageObjectFit || 'contain'\n }\" />\n </div>\n\n <!-- PDF Preview -->\n <div *ngIf=\"isPdf()\"\n class=\"preview-container pdf-container\"\n [id]=\"this.masterService.replaceSpacesWithUnderscores(field()?.label) + '_pdf_container'\"\n [ngStyle]=\"{\n '--pdf-container-background': field()?.previewStyle?.pdfContainerBackground || '#fff',\n '--pdf-container-border-radius': field()?.previewStyle?.pdfContainerBorderRadius || '8px',\n '--pdf-container-width': field()?.previewStyle?.pdfContainerWidth || '95vw',\n '--pdf-container-height': field()?.previewStyle?.pdfContainerHeight || '95vh'\n }\">\n\n <!-- Top-right action buttons -->\n <div class=\"pdf-actions-top-right\"\n [ngStyle]=\"{\n '--actions-top': field()?.previewStyle?.actionsTop || '15px',\n '--actions-right': field()?.previewStyle?.actionsRight || '15px',\n '--actions-gap': field()?.previewStyle?.actionsGap || '10px'\n }\">\n\n <button (click)=\"closePreview()\"\n type=\"button\"\n class=\"action-icon-btn close-btn\"\n [id]=\"this.masterService.replaceSpacesWithUnderscores(field()?.label) + '_close_pdf'\"\n [title]=\"field()?.previewStyle?.closeBtnTitle || 'Close'\"\n [ngStyle]=\"{\n '--close-btn-background': field()?.previewStyle?.closeBtnBackground || 'rgba(255, 255, 255, 0.9)',\n '--close-btn-color': field()?.previewStyle?.closeBtnColor || '#000',\n '--close-btn-border-radius': field()?.previewStyle?.closeBtnBorderRadius || '50%',\n '--close-btn-font-size': field()?.previewStyle?.closeBtnFontSize || '20px',\n '--close-btn-font-weight': field()?.previewStyle?.closeBtnFontWeight || 'bold',\n '--close-btn-hover-background': field()?.previewStyle?.closeBtnHoverBackground || 'rgba(255, 255, 255, 1)'\n }\">&times;</button>\n </div>\n\n <!-- File title -->\n <h3 class=\"file-title pdf-title\"\n [ngStyle]=\"{\n '--pdf-title-color': field()?.previewStyle?.pdfTitleColor || '#333',\n '--pdf-title-font-family': field()?.previewStyle?.pdfTitleFontFamily || 'Mulish',\n '--pdf-title-font-size': field()?.previewStyle?.pdfTitleFontSize || '16px',\n '--pdf-title-font-weight': field()?.previewStyle?.pdfTitleFontWeight || '600',\n '--pdf-title-margin': field()?.previewStyle?.pdfTitleMargin || '0px 20px 10px 20px',\n '--pdf-title-padding': field()?.previewStyle?.pdfTitlePadding || '0'\n }\">{{ file()?.name }}</h3>\n\n <iframe [src]=\"safeFileUrl\"\n [title]=\"file()?.name\"\n [id]=\"this.masterService.replaceSpacesWithUnderscores(field()?.label) + '_pdf_iframe'\"\n class=\"pdf-iframe\"\n [ngStyle]=\"{\n '--iframe-border': field()?.previewStyle?.iframeBorder || 'none',\n '--iframe-border-radius': field()?.previewStyle?.iframeBorderRadius || '0',\n '--iframe-width': field()?.previewStyle?.iframeWidth || '100%',\n '--iframe-height': field()?.previewStyle?.iframeHeight || 'calc(100% - 80px)',\n '--iframe-min-height': field()?.previewStyle?.iframeMinHeight || '600px'\n }\"></iframe>\n </div>\n\n <!-- Text Preview -->\n <div *ngIf=\"isText()\"\n class=\"preview-container text-container\"\n [id]=\"this.masterService.replaceSpacesWithUnderscores(field()?.label) + '_text_container'\"\n [ngStyle]=\"{\n '--text-container-background': field()?.previewStyle?.textContainerBackground || '#fff',\n '--text-container-border-radius': field()?.previewStyle?.textContainerBorderRadius || '8px',\n '--text-container-width': field()?.previewStyle?.textContainerWidth || '95vw',\n '--text-container-height': field()?.previewStyle?.textContainerHeight || '95vh'\n }\">\n\n <div class=\"text-header\"\n [id]=\"this.masterService.replaceSpacesWithUnderscores(field()?.label) + '_text_header'\"\n [ngStyle]=\"{\n '--text-header-background': field()?.previewStyle?.textHeaderBackground || '#f8f9fa',\n '--text-header-border-color': field()?.previewStyle?.textHeaderBorderColor || '#dee2e6',\n '--text-header-padding': field()?.previewStyle?.textHeaderPadding || '15px 20px'\n }\">\n\n <h3 class=\"file-title\"\n [ngStyle]=\"{\n '--text-title-color': field()?.previewStyle?.textTitleColor || '#333',\n '--text-title-font-family': field()?.previewStyle?.textTitleFontFamily || 'Mulish',\n '--text-title-font-size': field()?.previewStyle?.textTitleFontSize || '16px',\n '--text-title-font-weight': field()?.previewStyle?.textTitleFontWeight || '600',\n '--text-title-margin': field()?.previewStyle?.textTitleMargin || '0'\n }\">{{ file()?.name }}</h3>\n\n <button (click)=\"closePreview()\"\n type=\"button\"\n class=\"btn btn-danger\"\n [id]=\"this.masterService.replaceSpacesWithUnderscores(field()?.label) + '_close_text'\"\n [ngStyle]=\"{\n '--btn-danger-background': field()?.previewStyle?.btnDangerBackground || '#dc3545',\n '--btn-danger-color': field()?.previewStyle?.btnDangerColor || '#fff',\n '--btn-border-radius': field()?.previewStyle?.btnBorderRadius || '4px',\n '--btn-padding': field()?.previewStyle?.btnPadding || '8px 16px',\n '--btn-font-size': field()?.previewStyle?.btnFontSize || '14px'\n }\">{{ field()?.previewStyle?.closeText || 'Close' }}</button>\n </div>\n\n <pre class=\"text-content\"\n [id]=\"this.masterService.replaceSpacesWithUnderscores(field()?.label) + '_text_content'\"\n [ngStyle]=\"{\n '--text-content-background': field()?.previewStyle?.textContentBackground || '#fff',\n '--text-content-color': field()?.previewStyle?.textContentColor || '#333',\n '--text-content-font-family': field()?.previewStyle?.textContentFontFamily || 'Consolas, Monaco, Courier New, monospace',\n '--text-content-font-size': field()?.previewStyle?.textContentFontSize || '14px',\n '--text-content-line-height': field()?.previewStyle?.textContentLineHeight || '1.5',\n '--text-content-padding': field()?.previewStyle?.textContentPadding || '20px',\n '--text-content-margin': field()?.previewStyle?.textContentMargin || '0'\n }\">{{ textContent }}</pre>\n </div>\n\n <!-- Unsupported File -->\n <div *ngIf=\"isUnsupported()\"\n class=\"preview-container unsupported-container\"\n [id]=\"this.masterService.replaceSpacesWithUnderscores(field()?.label) + '_unsupported_container'\"\n [ngStyle]=\"{\n '--unsupported-background': field()?.previewStyle?.unsupportedBackground || '#fff',\n '--unsupported-border-radius': field()?.previewStyle?.unsupportedBorderRadius || '8px',\n '--unsupported-padding': field()?.previewStyle?.unsupportedPadding || '40px',\n '--unsupported-min-width': field()?.previewStyle?.unsupportedMinWidth || '300px'\n }\">\n\n <div class=\"unsupported-content\">\n <h3 [ngStyle]=\"{\n '--unsupported-title-color': field()?.previewStyle?.unsupportedTitleColor || '#333',\n '--unsupported-title-font-family': field()?.previewStyle?.unsupportedTitleFontFamily || 'Mulish',\n '--unsupported-title-font-size': field()?.previewStyle?.unsupportedTitleFontSize || '18px',\n '--unsupported-title-font-weight': field()?.previewStyle?.unsupportedTitleFontWeight || '600',\n '--unsupported-title-margin': field()?.previewStyle?.unsupportedTitleMargin || '0 0 20px 0'\n }\">{{ file()?.name }}</h3>\n\n <p [ngStyle]=\"{\n '--unsupported-text-color': field()?.previewStyle?.unsupportedTextColor || '#666',\n '--unsupported-text-font-size': field()?.previewStyle?.unsupportedTextFontSize || '14px',\n '--unsupported-text-margin': field()?.previewStyle?.unsupportedTextMargin || '0 0 30px 0'\n }\">{{ field()?.previewStyle?.unsupportedMessage || 'Preview not available for this file type' }}</p>\n\n <div class=\"unsupported-actions\"\n [ngStyle]=\"{\n '--actions-gap': field()?.previewStyle?.actionsGap || '15px',\n '--actions-justify': field()?.previewStyle?.actionsJustify || 'center'\n }\">\n\n <button (click)=\"downloadFile()\"\n type=\"button\"\n class=\"btn btn-primary\"\n [id]=\"this.masterService.replaceSpacesWithUnderscores(field()?.label) + '_download'\"\n [ngStyle]=\"{\n '--btn-primary-background': field()?.previewStyle?.btnPrimaryBackground || '#007bff',\n '--btn-primary-color': field()?.previewStyle?.btnPrimaryColor || '#fff',\n '--btn-border-radius': field()?.previewStyle?.btnBorderRadius || '4px',\n '--btn-padding': field()?.previewStyle?.btnPadding || '8px 16px',\n '--btn-font-size': field()?.previewStyle?.btnFontSize || '14px'\n }\">{{ field()?.previewStyle?.downloadText || 'Download' }}</button>\n\n <button (click)=\"closePreview()\"\n type=\"button\"\n class=\"btn btn-secondary\"\n [id]=\"this.masterService.replaceSpacesWithUnderscores(field()?.label) + '_close_unsupported'\"\n [ngStyle]=\"{\n '--btn-secondary-background': field()?.previewStyle?.btnSecondaryBackground || '#6c757d',\n '--btn-secondary-color': field()?.previewStyle?.btnSecondaryColor || '#fff',\n '--btn-border-radius': field()?.previewStyle?.btnBorderRadius || '4px',\n '--btn-padding': field()?.previewStyle?.btnPadding || '8px 16px',\n '--btn-font-size': field()?.previewStyle?.btnFontSize || '14px'\n }\">{{ field()?.previewStyle?.closeText || 'Close' }}</button>\n </div>\n </div>\n </div>\n</div>\n", styles: [".file-preview-modal{position:fixed;top:0;left:0;width:var(--modal-width, 100%);height:var(--modal-height, 100%);background:var(--modal-background, rgba(0, 0, 0, .9));z-index:var(--modal-z-index, 10000);display:flex;align-items:center;justify-content:center;overflow:auto}.preview-container{position:relative;max-width:90%;max-height:90%;display:flex;flex-direction:column;align-items:center;background:var(--image-container-background, transparent);border-radius:var(--image-container-border-radius, 8px);padding:var(--image-container-padding, 10px);margin:var(--image-container-margin, 0)}.close-btn{position:absolute;top:0;right:10px;width:40px!important;height:40px!important;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;background:var(--close-btn-background, rgba(255, 255, 255, .9));color:var(--close-btn-color, #000);border-radius:var(--close-btn-border-radius, 50%);font-size:var(--close-btn-font-size, 20px);font-weight:var(--close-btn-font-weight, bold);z-index:1001;box-shadow:1px 0 4px 1px #c7c7c7}.close-btn:hover{background:var(--close-btn-hover-background, rgba(255, 255, 255, 1))}.file-title{color:var(--title-color, #000000);font-family:var(--title-font-family, \"Mulish\");font-size:var(--title-font-size, 18px);font-weight:var(--title-font-weight, 600);margin:var(--title-margin, 0 0 10px 0);padding:var(--title-padding, 0 10px);text-align:center;word-break:break-all}.preview-image{max-width:var(--image-max-width, 100%);max-height:var(--image-max-height, 80vh);object-fit:var(--image-object-fit, contain);border-radius:var(--image-border-radius, 4px);box-shadow:var(--image-box-shadow, 0 4px 20px rgba(0, 0, 0, .3))}.preview-content{width:100%;height:80vh;border:none;border-radius:var(--content-border-radius, 4px)}.text-content{background:var(--text-background, #fff);color:var(--text-color, #000);padding:var(--text-padding, 20px);border-radius:var(--text-border-radius, 4px);max-width:var(--text-max-width, 800px);max-height:var(--text-max-height, 70vh);overflow:auto;white-space:pre-wrap;font-family:var(--text-font-family, \"Courier New, monospace\")}.action-buttons{margin-top:20px;display:flex;gap:10px}.action-btn{padding:var(--btn-padding, 8px 16px);background:var(--btn-background, #007bff);color:var(--btn-color, #fff);border:none;border-radius:var(--btn-border-radius, 4px);cursor:pointer;font-size:var(--btn-font-size, 14px)}.action-btn:hover{background:var(--btn-hover-background, #0056b3)}.unsupported-content{text-align:center;color:var(--unsupported-color, #fff);padding:var(--unsupported-padding, 40px)}.pdf-iframe{width:var(--iframe-width, 100%);height:var(--iframe-height, 80vh);min-height:var(--iframe-min-height, 600px);border:var(--iframe-border, none);border-radius:var(--iframe-border-radius, 0)}.pdf-container{width:var(--pdf-container-width, 95vw);height:var(--pdf-container-height, 95vh);background:var(--pdf-container-background, #fff);border-radius:var(--pdf-container-border-radius, 8px);display:flex;flex-direction:column;overflow:hidden}.pdf-header{background:var(--pdf-header-background, #f8f9fa);border-bottom:1px solid var(--pdf-header-border-color, #dee2e6);padding:var(--pdf-header-padding, 15px 20px);flex-shrink:0}.pdf-actions{display:flex;gap:10px;margin-top:10px}.btn{padding:var(--btn-padding, 8px 16px);border:none;border-radius:var(--btn-border-radius, 4px);cursor:pointer;font-size:var(--btn-font-size, 14px);font-weight:var(--btn-font-weight, 400);text-decoration:none;display:inline-block}.btn-primary{background:var(--btn-primary-background, #007bff);color:var(--btn-primary-color, #fff)}.btn-primary:hover{background:var(--btn-primary-hover-background, #0056b3)}.btn-danger{background:var(--btn-danger-background, #dc3545);color:var(--btn-danger-color, #fff)}.btn-danger:hover{background:var(--btn-danger-hover-background, #c82333)}.pdf-actions-top-right{position:absolute;top:var(--actions-top, 15px);right:var(--actions-right, 15px);display:flex;gap:var(--actions-gap, 10px);z-index:1001}.action-icon-btn{width:40px;height:40px;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:var(--icon-btn-border-radius, 50%);font-size:var(--icon-btn-font-size, 16px);transition:background-color .2s ease}.open-new-tab-btn{background:var(--icon-btn-background, rgba(255, 255, 255, .9));color:var(--icon-btn-color, #007bff)}.open-new-tab-btn:hover{background:var(--icon-btn-hover-background, rgba(255, 255, 255, 1))}.pdf-title{color:var(--pdf-title-color, #333);font-family:var(--pdf-title-font-family, \"Mulish\");font-size:var(--pdf-title-font-size, 16px);font-weight:var(--pdf-title-font-weight, 600);margin:var(--pdf-title-margin, 0 20px 10px 20px);padding:var(--pdf-title-padding, 0);text-align:center}.pdf-iframe{width:var(--iframe-width, 100%);height:var(--iframe-height, calc(100% - 80px) );min-height:var(--iframe-min-height, 600px);border:var(--iframe-border, none);border-radius:var(--iframe-border-radius, 0);margin:0 20px 20px}\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"] }] });
938
943
  }
939
944
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FilePreviewComponent, decorators: [{
940
945
  type: Component,
941
- args: [{ selector: 'lib-file-preview', standalone: true, imports: [CommonModule], template: "<div class=\"file-preview-modal\" \n *ngIf=\"field() && field()?.isVisible\"\n [id]=\"field()?.fieldName + '_preview'\"\n (click)=\"onBackdropClick($event)\"\n (keydown.escape)=\"closePreview()\"\n [ngStyle]=\"{\n '--modal-background': field()?.previewStyle?.modalBackground || 'rgba(0, 0, 0, 0.9)',\n '--modal-z-index': field()?.previewStyle?.zIndex || '10000',\n '--modal-width': field()?.previewStyle?.width || '100%',\n '--modal-height': field()?.previewStyle?.height || '100%'\n }\">\n \n <!-- Image Preview -->\n <div *ngIf=\"isImage()\" \n class=\"preview-container image-container\"\n [id]=\"field()?.fieldName + '_image_container'\"\n [ngStyle]=\"{\n '--image-container-background': field()?.previewStyle?.imageContainerBackground || 'transparent',\n '--image-container-border-radius': field()?.previewStyle?.imageContainerBorderRadius || '8px',\n '--image-container-padding': field()?.previewStyle?.imageContainerPadding || '20px',\n '--image-container-margin': field()?.previewStyle?.imageContainerMargin || '0'\n }\">\n \n <button class=\"close-btn\" \n type=\"button\"\n [id]=\"field()?.fieldName + '_close_btn'\"\n (click)=\"closePreview()\" \n [title]=\"field()?.previewStyle?.closeBtnTitle || 'Close'\"\n [ngStyle]=\"{\n '--close-btn-background': field()?.previewStyle?.closeBtnBackground || 'rgba(255, 255, 255, 0.9)',\n '--close-btn-color': field()?.previewStyle?.closeBtnColor || '#000',\n '--close-btn-border-radius': field()?.previewStyle?.closeBtnBorderRadius || '50%',\n '--close-btn-font-size': field()?.previewStyle?.closeBtnFontSize || '20px',\n '--close-btn-font-weight': field()?.previewStyle?.closeBtnFontWeight || 'bold',\n '--close-btn-hover-background': field()?.previewStyle?.closeBtnHoverBackground || 'rgba(255, 255, 255, 1)'\n }\">&times;</button>\n \n <h3 class=\"file-title\"\n [ngStyle]=\"{\n '--title-color': field()?.previewStyle?.titleColor || '#fff',\n '--title-font-family': field()?.previewStyle?.titleFontFamily || 'Mulish',\n '--title-font-size': field()?.previewStyle?.titleFontSize || '18px',\n '--title-font-weight': field()?.previewStyle?.titleFontWeight || '600',\n '--title-margin': field()?.previewStyle?.titleMargin || '0 0 10px 0',\n '--title-padding': field()?.previewStyle?.titlePadding || '0 10px'\n }\">{{ file()?.name }}</h3>\n \n <img [src]=\"fileDataUrl\" \n [alt]=\"file()?.name\" \n [id]=\"field()?.fieldName + '_preview_image'\"\n class=\"preview-image\"\n [ngStyle]=\"{\n '--image-max-width': field()?.previewStyle?.imageMaxWidth || '100%',\n '--image-max-height': field()?.previewStyle?.imageMaxHeight || '80vh',\n '--image-border-radius': field()?.previewStyle?.imageBorderRadius || '8px',\n '--image-box-shadow': field()?.previewStyle?.imageBoxShadow || '0 4px 20px rgba(0,0,0,0.5)',\n '--image-object-fit': field()?.previewStyle?.imageObjectFit || 'contain'\n }\" />\n </div>\n\n <!-- PDF Preview -->\n <div *ngIf=\"isPdf()\" \n class=\"preview-container pdf-container\"\n [id]=\"field()?.fieldName + '_pdf_container'\"\n [ngStyle]=\"{\n '--pdf-container-background': field()?.previewStyle?.pdfContainerBackground || '#fff',\n '--pdf-container-border-radius': field()?.previewStyle?.pdfContainerBorderRadius || '8px',\n '--pdf-container-width': field()?.previewStyle?.pdfContainerWidth || '95vw',\n '--pdf-container-height': field()?.previewStyle?.pdfContainerHeight || '95vh'\n }\">\n \n <!-- Top-right action buttons -->\n <div class=\"pdf-actions-top-right\"\n [ngStyle]=\"{\n '--actions-top': field()?.previewStyle?.actionsTop || '15px',\n '--actions-right': field()?.previewStyle?.actionsRight || '15px',\n '--actions-gap': field()?.previewStyle?.actionsGap || '10px'\n }\">\n \n <button (click)=\"closePreview()\" \n type=\"button\"\n class=\"action-icon-btn close-btn\"\n [id]=\"field()?.fieldName + '_close_pdf'\"\n [title]=\"field()?.previewStyle?.closeBtnTitle || 'Close'\"\n [ngStyle]=\"{\n '--close-btn-background': field()?.previewStyle?.closeBtnBackground || 'rgba(255, 255, 255, 0.9)',\n '--close-btn-color': field()?.previewStyle?.closeBtnColor || '#000',\n '--close-btn-border-radius': field()?.previewStyle?.closeBtnBorderRadius || '50%',\n '--close-btn-font-size': field()?.previewStyle?.closeBtnFontSize || '20px',\n '--close-btn-font-weight': field()?.previewStyle?.closeBtnFontWeight || 'bold',\n '--close-btn-hover-background': field()?.previewStyle?.closeBtnHoverBackground || 'rgba(255, 255, 255, 1)'\n }\">&times;</button>\n </div>\n \n <!-- File title -->\n <h3 class=\"file-title pdf-title\"\n [ngStyle]=\"{\n '--pdf-title-color': field()?.previewStyle?.pdfTitleColor || '#333',\n '--pdf-title-font-family': field()?.previewStyle?.pdfTitleFontFamily || 'Mulish',\n '--pdf-title-font-size': field()?.previewStyle?.pdfTitleFontSize || '16px',\n '--pdf-title-font-weight': field()?.previewStyle?.pdfTitleFontWeight || '600',\n '--pdf-title-margin': field()?.previewStyle?.pdfTitleMargin || '0px 20px 10px 20px',\n '--pdf-title-padding': field()?.previewStyle?.pdfTitlePadding || '0'\n }\">{{ file()?.name }}</h3>\n \n <iframe [src]=\"safeFileUrl\" \n [title]=\"file()?.name\" \n [id]=\"field()?.fieldName + '_pdf_iframe'\"\n class=\"pdf-iframe\"\n [ngStyle]=\"{\n '--iframe-border': field()?.previewStyle?.iframeBorder || 'none',\n '--iframe-border-radius': field()?.previewStyle?.iframeBorderRadius || '0',\n '--iframe-width': field()?.previewStyle?.iframeWidth || '100%',\n '--iframe-height': field()?.previewStyle?.iframeHeight || 'calc(100% - 80px)',\n '--iframe-min-height': field()?.previewStyle?.iframeMinHeight || '600px'\n }\"></iframe>\n </div>\n\n <!-- Text Preview -->\n <div *ngIf=\"isText()\" \n class=\"preview-container text-container\"\n [id]=\"field()?.fieldName + '_text_container'\"\n [ngStyle]=\"{\n '--text-container-background': field()?.previewStyle?.textContainerBackground || '#fff',\n '--text-container-border-radius': field()?.previewStyle?.textContainerBorderRadius || '8px',\n '--text-container-width': field()?.previewStyle?.textContainerWidth || '95vw',\n '--text-container-height': field()?.previewStyle?.textContainerHeight || '95vh'\n }\">\n \n <div class=\"text-header\"\n [id]=\"field()?.fieldName + '_text_header'\"\n [ngStyle]=\"{\n '--text-header-background': field()?.previewStyle?.textHeaderBackground || '#f8f9fa',\n '--text-header-border-color': field()?.previewStyle?.textHeaderBorderColor || '#dee2e6',\n '--text-header-padding': field()?.previewStyle?.textHeaderPadding || '15px 20px'\n }\">\n \n <h3 class=\"file-title\"\n [ngStyle]=\"{\n '--text-title-color': field()?.previewStyle?.textTitleColor || '#333',\n '--text-title-font-family': field()?.previewStyle?.textTitleFontFamily || 'Mulish',\n '--text-title-font-size': field()?.previewStyle?.textTitleFontSize || '16px',\n '--text-title-font-weight': field()?.previewStyle?.textTitleFontWeight || '600',\n '--text-title-margin': field()?.previewStyle?.textTitleMargin || '0'\n }\">{{ file()?.name }}</h3>\n \n <button (click)=\"closePreview()\" \n type=\"button\"\n class=\"btn btn-danger\"\n [id]=\"field()?.fieldName + '_close_text'\"\n [ngStyle]=\"{\n '--btn-danger-background': field()?.previewStyle?.btnDangerBackground || '#dc3545',\n '--btn-danger-color': field()?.previewStyle?.btnDangerColor || '#fff',\n '--btn-border-radius': field()?.previewStyle?.btnBorderRadius || '4px',\n '--btn-padding': field()?.previewStyle?.btnPadding || '8px 16px',\n '--btn-font-size': field()?.previewStyle?.btnFontSize || '14px'\n }\">{{ field()?.previewStyle?.closeText || 'Close' }}</button>\n </div>\n \n <pre class=\"text-content\"\n [id]=\"field()?.fieldName + '_text_content'\"\n [ngStyle]=\"{\n '--text-content-background': field()?.previewStyle?.textContentBackground || '#fff',\n '--text-content-color': field()?.previewStyle?.textContentColor || '#333',\n '--text-content-font-family': field()?.previewStyle?.textContentFontFamily || 'Consolas, Monaco, Courier New, monospace',\n '--text-content-font-size': field()?.previewStyle?.textContentFontSize || '14px',\n '--text-content-line-height': field()?.previewStyle?.textContentLineHeight || '1.5',\n '--text-content-padding': field()?.previewStyle?.textContentPadding || '20px',\n '--text-content-margin': field()?.previewStyle?.textContentMargin || '0'\n }\">{{ textContent }}</pre>\n </div>\n\n <!-- Unsupported File -->\n <div *ngIf=\"isUnsupported()\" \n class=\"preview-container unsupported-container\"\n [id]=\"field()?.fieldName + '_unsupported_container'\"\n [ngStyle]=\"{\n '--unsupported-background': field()?.previewStyle?.unsupportedBackground || '#fff',\n '--unsupported-border-radius': field()?.previewStyle?.unsupportedBorderRadius || '8px',\n '--unsupported-padding': field()?.previewStyle?.unsupportedPadding || '40px',\n '--unsupported-min-width': field()?.previewStyle?.unsupportedMinWidth || '300px'\n }\">\n \n <div class=\"unsupported-content\">\n <h3 [ngStyle]=\"{\n '--unsupported-title-color': field()?.previewStyle?.unsupportedTitleColor || '#333',\n '--unsupported-title-font-family': field()?.previewStyle?.unsupportedTitleFontFamily || 'Mulish',\n '--unsupported-title-font-size': field()?.previewStyle?.unsupportedTitleFontSize || '18px',\n '--unsupported-title-font-weight': field()?.previewStyle?.unsupportedTitleFontWeight || '600',\n '--unsupported-title-margin': field()?.previewStyle?.unsupportedTitleMargin || '0 0 20px 0'\n }\">{{ file()?.name }}</h3>\n \n <p [ngStyle]=\"{\n '--unsupported-text-color': field()?.previewStyle?.unsupportedTextColor || '#666',\n '--unsupported-text-font-size': field()?.previewStyle?.unsupportedTextFontSize || '14px',\n '--unsupported-text-margin': field()?.previewStyle?.unsupportedTextMargin || '0 0 30px 0'\n }\">{{ field()?.previewStyle?.unsupportedMessage || 'Preview not available for this file type' }}</p>\n \n <div class=\"unsupported-actions\"\n [ngStyle]=\"{\n '--actions-gap': field()?.previewStyle?.actionsGap || '15px',\n '--actions-justify': field()?.previewStyle?.actionsJustify || 'center'\n }\">\n \n <button (click)=\"downloadFile()\" \n type=\"button\"\n class=\"btn btn-primary\"\n [id]=\"field()?.fieldName + '_download'\"\n [ngStyle]=\"{\n '--btn-primary-background': field()?.previewStyle?.btnPrimaryBackground || '#007bff',\n '--btn-primary-color': field()?.previewStyle?.btnPrimaryColor || '#fff',\n '--btn-border-radius': field()?.previewStyle?.btnBorderRadius || '4px',\n '--btn-padding': field()?.previewStyle?.btnPadding || '8px 16px',\n '--btn-font-size': field()?.previewStyle?.btnFontSize || '14px'\n }\">{{ field()?.previewStyle?.downloadText || 'Download' }}</button>\n \n <button (click)=\"closePreview()\" \n type=\"button\"\n class=\"btn btn-secondary\"\n [id]=\"field()?.fieldName + '_close_unsupported'\"\n [ngStyle]=\"{\n '--btn-secondary-background': field()?.previewStyle?.btnSecondaryBackground || '#6c757d',\n '--btn-secondary-color': field()?.previewStyle?.btnSecondaryColor || '#fff',\n '--btn-border-radius': field()?.previewStyle?.btnBorderRadius || '4px',\n '--btn-padding': field()?.previewStyle?.btnPadding || '8px 16px',\n '--btn-font-size': field()?.previewStyle?.btnFontSize || '14px'\n }\">{{ field()?.previewStyle?.closeText || 'Close' }}</button>\n </div>\n </div>\n </div>\n</div>", styles: [".file-preview-modal{position:fixed;top:0;left:0;width:var(--modal-width, 100%);height:var(--modal-height, 100%);background:var(--modal-background, rgba(0, 0, 0, .9));z-index:var(--modal-z-index, 10000);display:flex;align-items:center;justify-content:center;overflow:auto}.preview-container{position:relative;max-width:90%;max-height:90%;display:flex;flex-direction:column;align-items:center;background:var(--image-container-background, transparent);border-radius:var(--image-container-border-radius, 8px);padding:var(--image-container-padding, 10px);margin:var(--image-container-margin, 0)}.close-btn{position:absolute;top:0;right:10px;width:40px!important;height:40px!important;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;background:var(--close-btn-background, rgba(255, 255, 255, .9));color:var(--close-btn-color, #000);border-radius:var(--close-btn-border-radius, 50%);font-size:var(--close-btn-font-size, 20px);font-weight:var(--close-btn-font-weight, bold);z-index:1001;box-shadow:1px 0 4px 1px #c7c7c7}.close-btn:hover{background:var(--close-btn-hover-background, rgba(255, 255, 255, 1))}.file-title{color:var(--title-color, #000000);font-family:var(--title-font-family, \"Mulish\");font-size:var(--title-font-size, 18px);font-weight:var(--title-font-weight, 600);margin:var(--title-margin, 0 0 10px 0);padding:var(--title-padding, 0 10px);text-align:center;word-break:break-all}.preview-image{max-width:var(--image-max-width, 100%);max-height:var(--image-max-height, 80vh);object-fit:var(--image-object-fit, contain);border-radius:var(--image-border-radius, 4px);box-shadow:var(--image-box-shadow, 0 4px 20px rgba(0, 0, 0, .3))}.preview-content{width:100%;height:80vh;border:none;border-radius:var(--content-border-radius, 4px)}.text-content{background:var(--text-background, #fff);color:var(--text-color, #000);padding:var(--text-padding, 20px);border-radius:var(--text-border-radius, 4px);max-width:var(--text-max-width, 800px);max-height:var(--text-max-height, 70vh);overflow:auto;white-space:pre-wrap;font-family:var(--text-font-family, \"Courier New, monospace\")}.action-buttons{margin-top:20px;display:flex;gap:10px}.action-btn{padding:var(--btn-padding, 8px 16px);background:var(--btn-background, #007bff);color:var(--btn-color, #fff);border:none;border-radius:var(--btn-border-radius, 4px);cursor:pointer;font-size:var(--btn-font-size, 14px)}.action-btn:hover{background:var(--btn-hover-background, #0056b3)}.unsupported-content{text-align:center;color:var(--unsupported-color, #fff);padding:var(--unsupported-padding, 40px)}.pdf-iframe{width:var(--iframe-width, 100%);height:var(--iframe-height, 80vh);min-height:var(--iframe-min-height, 600px);border:var(--iframe-border, none);border-radius:var(--iframe-border-radius, 0)}.pdf-container{width:var(--pdf-container-width, 95vw);height:var(--pdf-container-height, 95vh);background:var(--pdf-container-background, #fff);border-radius:var(--pdf-container-border-radius, 8px);display:flex;flex-direction:column;overflow:hidden}.pdf-header{background:var(--pdf-header-background, #f8f9fa);border-bottom:1px solid var(--pdf-header-border-color, #dee2e6);padding:var(--pdf-header-padding, 15px 20px);flex-shrink:0}.pdf-actions{display:flex;gap:10px;margin-top:10px}.btn{padding:var(--btn-padding, 8px 16px);border:none;border-radius:var(--btn-border-radius, 4px);cursor:pointer;font-size:var(--btn-font-size, 14px);font-weight:var(--btn-font-weight, 400);text-decoration:none;display:inline-block}.btn-primary{background:var(--btn-primary-background, #007bff);color:var(--btn-primary-color, #fff)}.btn-primary:hover{background:var(--btn-primary-hover-background, #0056b3)}.btn-danger{background:var(--btn-danger-background, #dc3545);color:var(--btn-danger-color, #fff)}.btn-danger:hover{background:var(--btn-danger-hover-background, #c82333)}.pdf-actions-top-right{position:absolute;top:var(--actions-top, 15px);right:var(--actions-right, 15px);display:flex;gap:var(--actions-gap, 10px);z-index:1001}.action-icon-btn{width:40px;height:40px;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:var(--icon-btn-border-radius, 50%);font-size:var(--icon-btn-font-size, 16px);transition:background-color .2s ease}.open-new-tab-btn{background:var(--icon-btn-background, rgba(255, 255, 255, .9));color:var(--icon-btn-color, #007bff)}.open-new-tab-btn:hover{background:var(--icon-btn-hover-background, rgba(255, 255, 255, 1))}.pdf-title{color:var(--pdf-title-color, #333);font-family:var(--pdf-title-font-family, \"Mulish\");font-size:var(--pdf-title-font-size, 16px);font-weight:var(--pdf-title-font-weight, 600);margin:var(--pdf-title-margin, 0 20px 10px 20px);padding:var(--pdf-title-padding, 0);text-align:center}.pdf-iframe{width:var(--iframe-width, 100%);height:var(--iframe-height, calc(100% - 80px) );min-height:var(--iframe-min-height, 600px);border:var(--iframe-border, none);border-radius:var(--iframe-border-radius, 0);margin:0 20px 20px}\n"] }]
942
- }], ctorParameters: () => [{ type: i1$1.DomSanitizer }], propDecorators: { closed: [{
946
+ args: [{ selector: 'lib-file-preview', standalone: true, imports: [CommonModule], template: "<div class=\"file-preview-modal\"\n *ngIf=\"field() && field()?.isVisible\"\n [id]=\"this.masterService.replaceSpacesWithUnderscores(field()?.label) + '_preview'\"\n (click)=\"onBackdropClick($event)\"\n (keydown.escape)=\"closePreview()\"\n [ngStyle]=\"{\n '--modal-background': field()?.previewStyle?.modalBackground || 'rgba(0, 0, 0, 0.9)',\n '--modal-z-index': field()?.previewStyle?.zIndex || '10000',\n '--modal-width': field()?.previewStyle?.width || '100%',\n '--modal-height': field()?.previewStyle?.height || '100%'\n }\">\n\n <!-- Image Preview -->\n <div *ngIf=\"isImage()\"\n class=\"preview-container image-container\"\n [id]=\"this.masterService.replaceSpacesWithUnderscores(field()?.label) + '_image_container'\"\n [ngStyle]=\"{\n '--image-container-background': field()?.previewStyle?.imageContainerBackground || 'transparent',\n '--image-container-border-radius': field()?.previewStyle?.imageContainerBorderRadius || '8px',\n '--image-container-padding': field()?.previewStyle?.imageContainerPadding || '20px',\n '--image-container-margin': field()?.previewStyle?.imageContainerMargin || '0'\n }\">\n\n <button class=\"close-btn\"\n type=\"button\"\n [id]=\"this.masterService.replaceSpacesWithUnderscores(field()?.label) + '_close_btn'\"\n (click)=\"closePreview()\"\n [title]=\"field()?.previewStyle?.closeBtnTitle || 'Close'\"\n [ngStyle]=\"{\n '--close-btn-background': field()?.previewStyle?.closeBtnBackground || 'rgba(255, 255, 255, 0.9)',\n '--close-btn-color': field()?.previewStyle?.closeBtnColor || '#000',\n '--close-btn-border-radius': field()?.previewStyle?.closeBtnBorderRadius || '50%',\n '--close-btn-font-size': field()?.previewStyle?.closeBtnFontSize || '20px',\n '--close-btn-font-weight': field()?.previewStyle?.closeBtnFontWeight || 'bold',\n '--close-btn-hover-background': field()?.previewStyle?.closeBtnHoverBackground || 'rgba(255, 255, 255, 1)'\n }\">&times;</button>\n\n <h3 class=\"file-title\"\n [ngStyle]=\"{\n '--title-color': field()?.previewStyle?.titleColor || '#fff',\n '--title-font-family': field()?.previewStyle?.titleFontFamily || 'Mulish',\n '--title-font-size': field()?.previewStyle?.titleFontSize || '18px',\n '--title-font-weight': field()?.previewStyle?.titleFontWeight || '600',\n '--title-margin': field()?.previewStyle?.titleMargin || '0 0 10px 0',\n '--title-padding': field()?.previewStyle?.titlePadding || '0 10px'\n }\">{{ file()?.name }}</h3>\n\n <img [src]=\"fileDataUrl\"\n [alt]=\"file()?.name\"\n [id]=\"this.masterService.replaceSpacesWithUnderscores(field()?.label) + '_preview_image'\"\n class=\"preview-image\"\n [ngStyle]=\"{\n '--image-max-width': field()?.previewStyle?.imageMaxWidth || '100%',\n '--image-max-height': field()?.previewStyle?.imageMaxHeight || '80vh',\n '--image-border-radius': field()?.previewStyle?.imageBorderRadius || '8px',\n '--image-box-shadow': field()?.previewStyle?.imageBoxShadow || '0 4px 20px rgba(0,0,0,0.5)',\n '--image-object-fit': field()?.previewStyle?.imageObjectFit || 'contain'\n }\" />\n </div>\n\n <!-- PDF Preview -->\n <div *ngIf=\"isPdf()\"\n class=\"preview-container pdf-container\"\n [id]=\"this.masterService.replaceSpacesWithUnderscores(field()?.label) + '_pdf_container'\"\n [ngStyle]=\"{\n '--pdf-container-background': field()?.previewStyle?.pdfContainerBackground || '#fff',\n '--pdf-container-border-radius': field()?.previewStyle?.pdfContainerBorderRadius || '8px',\n '--pdf-container-width': field()?.previewStyle?.pdfContainerWidth || '95vw',\n '--pdf-container-height': field()?.previewStyle?.pdfContainerHeight || '95vh'\n }\">\n\n <!-- Top-right action buttons -->\n <div class=\"pdf-actions-top-right\"\n [ngStyle]=\"{\n '--actions-top': field()?.previewStyle?.actionsTop || '15px',\n '--actions-right': field()?.previewStyle?.actionsRight || '15px',\n '--actions-gap': field()?.previewStyle?.actionsGap || '10px'\n }\">\n\n <button (click)=\"closePreview()\"\n type=\"button\"\n class=\"action-icon-btn close-btn\"\n [id]=\"this.masterService.replaceSpacesWithUnderscores(field()?.label) + '_close_pdf'\"\n [title]=\"field()?.previewStyle?.closeBtnTitle || 'Close'\"\n [ngStyle]=\"{\n '--close-btn-background': field()?.previewStyle?.closeBtnBackground || 'rgba(255, 255, 255, 0.9)',\n '--close-btn-color': field()?.previewStyle?.closeBtnColor || '#000',\n '--close-btn-border-radius': field()?.previewStyle?.closeBtnBorderRadius || '50%',\n '--close-btn-font-size': field()?.previewStyle?.closeBtnFontSize || '20px',\n '--close-btn-font-weight': field()?.previewStyle?.closeBtnFontWeight || 'bold',\n '--close-btn-hover-background': field()?.previewStyle?.closeBtnHoverBackground || 'rgba(255, 255, 255, 1)'\n }\">&times;</button>\n </div>\n\n <!-- File title -->\n <h3 class=\"file-title pdf-title\"\n [ngStyle]=\"{\n '--pdf-title-color': field()?.previewStyle?.pdfTitleColor || '#333',\n '--pdf-title-font-family': field()?.previewStyle?.pdfTitleFontFamily || 'Mulish',\n '--pdf-title-font-size': field()?.previewStyle?.pdfTitleFontSize || '16px',\n '--pdf-title-font-weight': field()?.previewStyle?.pdfTitleFontWeight || '600',\n '--pdf-title-margin': field()?.previewStyle?.pdfTitleMargin || '0px 20px 10px 20px',\n '--pdf-title-padding': field()?.previewStyle?.pdfTitlePadding || '0'\n }\">{{ file()?.name }}</h3>\n\n <iframe [src]=\"safeFileUrl\"\n [title]=\"file()?.name\"\n [id]=\"this.masterService.replaceSpacesWithUnderscores(field()?.label) + '_pdf_iframe'\"\n class=\"pdf-iframe\"\n [ngStyle]=\"{\n '--iframe-border': field()?.previewStyle?.iframeBorder || 'none',\n '--iframe-border-radius': field()?.previewStyle?.iframeBorderRadius || '0',\n '--iframe-width': field()?.previewStyle?.iframeWidth || '100%',\n '--iframe-height': field()?.previewStyle?.iframeHeight || 'calc(100% - 80px)',\n '--iframe-min-height': field()?.previewStyle?.iframeMinHeight || '600px'\n }\"></iframe>\n </div>\n\n <!-- Text Preview -->\n <div *ngIf=\"isText()\"\n class=\"preview-container text-container\"\n [id]=\"this.masterService.replaceSpacesWithUnderscores(field()?.label) + '_text_container'\"\n [ngStyle]=\"{\n '--text-container-background': field()?.previewStyle?.textContainerBackground || '#fff',\n '--text-container-border-radius': field()?.previewStyle?.textContainerBorderRadius || '8px',\n '--text-container-width': field()?.previewStyle?.textContainerWidth || '95vw',\n '--text-container-height': field()?.previewStyle?.textContainerHeight || '95vh'\n }\">\n\n <div class=\"text-header\"\n [id]=\"this.masterService.replaceSpacesWithUnderscores(field()?.label) + '_text_header'\"\n [ngStyle]=\"{\n '--text-header-background': field()?.previewStyle?.textHeaderBackground || '#f8f9fa',\n '--text-header-border-color': field()?.previewStyle?.textHeaderBorderColor || '#dee2e6',\n '--text-header-padding': field()?.previewStyle?.textHeaderPadding || '15px 20px'\n }\">\n\n <h3 class=\"file-title\"\n [ngStyle]=\"{\n '--text-title-color': field()?.previewStyle?.textTitleColor || '#333',\n '--text-title-font-family': field()?.previewStyle?.textTitleFontFamily || 'Mulish',\n '--text-title-font-size': field()?.previewStyle?.textTitleFontSize || '16px',\n '--text-title-font-weight': field()?.previewStyle?.textTitleFontWeight || '600',\n '--text-title-margin': field()?.previewStyle?.textTitleMargin || '0'\n }\">{{ file()?.name }}</h3>\n\n <button (click)=\"closePreview()\"\n type=\"button\"\n class=\"btn btn-danger\"\n [id]=\"this.masterService.replaceSpacesWithUnderscores(field()?.label) + '_close_text'\"\n [ngStyle]=\"{\n '--btn-danger-background': field()?.previewStyle?.btnDangerBackground || '#dc3545',\n '--btn-danger-color': field()?.previewStyle?.btnDangerColor || '#fff',\n '--btn-border-radius': field()?.previewStyle?.btnBorderRadius || '4px',\n '--btn-padding': field()?.previewStyle?.btnPadding || '8px 16px',\n '--btn-font-size': field()?.previewStyle?.btnFontSize || '14px'\n }\">{{ field()?.previewStyle?.closeText || 'Close' }}</button>\n </div>\n\n <pre class=\"text-content\"\n [id]=\"this.masterService.replaceSpacesWithUnderscores(field()?.label) + '_text_content'\"\n [ngStyle]=\"{\n '--text-content-background': field()?.previewStyle?.textContentBackground || '#fff',\n '--text-content-color': field()?.previewStyle?.textContentColor || '#333',\n '--text-content-font-family': field()?.previewStyle?.textContentFontFamily || 'Consolas, Monaco, Courier New, monospace',\n '--text-content-font-size': field()?.previewStyle?.textContentFontSize || '14px',\n '--text-content-line-height': field()?.previewStyle?.textContentLineHeight || '1.5',\n '--text-content-padding': field()?.previewStyle?.textContentPadding || '20px',\n '--text-content-margin': field()?.previewStyle?.textContentMargin || '0'\n }\">{{ textContent }}</pre>\n </div>\n\n <!-- Unsupported File -->\n <div *ngIf=\"isUnsupported()\"\n class=\"preview-container unsupported-container\"\n [id]=\"this.masterService.replaceSpacesWithUnderscores(field()?.label) + '_unsupported_container'\"\n [ngStyle]=\"{\n '--unsupported-background': field()?.previewStyle?.unsupportedBackground || '#fff',\n '--unsupported-border-radius': field()?.previewStyle?.unsupportedBorderRadius || '8px',\n '--unsupported-padding': field()?.previewStyle?.unsupportedPadding || '40px',\n '--unsupported-min-width': field()?.previewStyle?.unsupportedMinWidth || '300px'\n }\">\n\n <div class=\"unsupported-content\">\n <h3 [ngStyle]=\"{\n '--unsupported-title-color': field()?.previewStyle?.unsupportedTitleColor || '#333',\n '--unsupported-title-font-family': field()?.previewStyle?.unsupportedTitleFontFamily || 'Mulish',\n '--unsupported-title-font-size': field()?.previewStyle?.unsupportedTitleFontSize || '18px',\n '--unsupported-title-font-weight': field()?.previewStyle?.unsupportedTitleFontWeight || '600',\n '--unsupported-title-margin': field()?.previewStyle?.unsupportedTitleMargin || '0 0 20px 0'\n }\">{{ file()?.name }}</h3>\n\n <p [ngStyle]=\"{\n '--unsupported-text-color': field()?.previewStyle?.unsupportedTextColor || '#666',\n '--unsupported-text-font-size': field()?.previewStyle?.unsupportedTextFontSize || '14px',\n '--unsupported-text-margin': field()?.previewStyle?.unsupportedTextMargin || '0 0 30px 0'\n }\">{{ field()?.previewStyle?.unsupportedMessage || 'Preview not available for this file type' }}</p>\n\n <div class=\"unsupported-actions\"\n [ngStyle]=\"{\n '--actions-gap': field()?.previewStyle?.actionsGap || '15px',\n '--actions-justify': field()?.previewStyle?.actionsJustify || 'center'\n }\">\n\n <button (click)=\"downloadFile()\"\n type=\"button\"\n class=\"btn btn-primary\"\n [id]=\"this.masterService.replaceSpacesWithUnderscores(field()?.label) + '_download'\"\n [ngStyle]=\"{\n '--btn-primary-background': field()?.previewStyle?.btnPrimaryBackground || '#007bff',\n '--btn-primary-color': field()?.previewStyle?.btnPrimaryColor || '#fff',\n '--btn-border-radius': field()?.previewStyle?.btnBorderRadius || '4px',\n '--btn-padding': field()?.previewStyle?.btnPadding || '8px 16px',\n '--btn-font-size': field()?.previewStyle?.btnFontSize || '14px'\n }\">{{ field()?.previewStyle?.downloadText || 'Download' }}</button>\n\n <button (click)=\"closePreview()\"\n type=\"button\"\n class=\"btn btn-secondary\"\n [id]=\"this.masterService.replaceSpacesWithUnderscores(field()?.label) + '_close_unsupported'\"\n [ngStyle]=\"{\n '--btn-secondary-background': field()?.previewStyle?.btnSecondaryBackground || '#6c757d',\n '--btn-secondary-color': field()?.previewStyle?.btnSecondaryColor || '#fff',\n '--btn-border-radius': field()?.previewStyle?.btnBorderRadius || '4px',\n '--btn-padding': field()?.previewStyle?.btnPadding || '8px 16px',\n '--btn-font-size': field()?.previewStyle?.btnFontSize || '14px'\n }\">{{ field()?.previewStyle?.closeText || 'Close' }}</button>\n </div>\n </div>\n </div>\n</div>\n", styles: [".file-preview-modal{position:fixed;top:0;left:0;width:var(--modal-width, 100%);height:var(--modal-height, 100%);background:var(--modal-background, rgba(0, 0, 0, .9));z-index:var(--modal-z-index, 10000);display:flex;align-items:center;justify-content:center;overflow:auto}.preview-container{position:relative;max-width:90%;max-height:90%;display:flex;flex-direction:column;align-items:center;background:var(--image-container-background, transparent);border-radius:var(--image-container-border-radius, 8px);padding:var(--image-container-padding, 10px);margin:var(--image-container-margin, 0)}.close-btn{position:absolute;top:0;right:10px;width:40px!important;height:40px!important;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;background:var(--close-btn-background, rgba(255, 255, 255, .9));color:var(--close-btn-color, #000);border-radius:var(--close-btn-border-radius, 50%);font-size:var(--close-btn-font-size, 20px);font-weight:var(--close-btn-font-weight, bold);z-index:1001;box-shadow:1px 0 4px 1px #c7c7c7}.close-btn:hover{background:var(--close-btn-hover-background, rgba(255, 255, 255, 1))}.file-title{color:var(--title-color, #000000);font-family:var(--title-font-family, \"Mulish\");font-size:var(--title-font-size, 18px);font-weight:var(--title-font-weight, 600);margin:var(--title-margin, 0 0 10px 0);padding:var(--title-padding, 0 10px);text-align:center;word-break:break-all}.preview-image{max-width:var(--image-max-width, 100%);max-height:var(--image-max-height, 80vh);object-fit:var(--image-object-fit, contain);border-radius:var(--image-border-radius, 4px);box-shadow:var(--image-box-shadow, 0 4px 20px rgba(0, 0, 0, .3))}.preview-content{width:100%;height:80vh;border:none;border-radius:var(--content-border-radius, 4px)}.text-content{background:var(--text-background, #fff);color:var(--text-color, #000);padding:var(--text-padding, 20px);border-radius:var(--text-border-radius, 4px);max-width:var(--text-max-width, 800px);max-height:var(--text-max-height, 70vh);overflow:auto;white-space:pre-wrap;font-family:var(--text-font-family, \"Courier New, monospace\")}.action-buttons{margin-top:20px;display:flex;gap:10px}.action-btn{padding:var(--btn-padding, 8px 16px);background:var(--btn-background, #007bff);color:var(--btn-color, #fff);border:none;border-radius:var(--btn-border-radius, 4px);cursor:pointer;font-size:var(--btn-font-size, 14px)}.action-btn:hover{background:var(--btn-hover-background, #0056b3)}.unsupported-content{text-align:center;color:var(--unsupported-color, #fff);padding:var(--unsupported-padding, 40px)}.pdf-iframe{width:var(--iframe-width, 100%);height:var(--iframe-height, 80vh);min-height:var(--iframe-min-height, 600px);border:var(--iframe-border, none);border-radius:var(--iframe-border-radius, 0)}.pdf-container{width:var(--pdf-container-width, 95vw);height:var(--pdf-container-height, 95vh);background:var(--pdf-container-background, #fff);border-radius:var(--pdf-container-border-radius, 8px);display:flex;flex-direction:column;overflow:hidden}.pdf-header{background:var(--pdf-header-background, #f8f9fa);border-bottom:1px solid var(--pdf-header-border-color, #dee2e6);padding:var(--pdf-header-padding, 15px 20px);flex-shrink:0}.pdf-actions{display:flex;gap:10px;margin-top:10px}.btn{padding:var(--btn-padding, 8px 16px);border:none;border-radius:var(--btn-border-radius, 4px);cursor:pointer;font-size:var(--btn-font-size, 14px);font-weight:var(--btn-font-weight, 400);text-decoration:none;display:inline-block}.btn-primary{background:var(--btn-primary-background, #007bff);color:var(--btn-primary-color, #fff)}.btn-primary:hover{background:var(--btn-primary-hover-background, #0056b3)}.btn-danger{background:var(--btn-danger-background, #dc3545);color:var(--btn-danger-color, #fff)}.btn-danger:hover{background:var(--btn-danger-hover-background, #c82333)}.pdf-actions-top-right{position:absolute;top:var(--actions-top, 15px);right:var(--actions-right, 15px);display:flex;gap:var(--actions-gap, 10px);z-index:1001}.action-icon-btn{width:40px;height:40px;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:var(--icon-btn-border-radius, 50%);font-size:var(--icon-btn-font-size, 16px);transition:background-color .2s ease}.open-new-tab-btn{background:var(--icon-btn-background, rgba(255, 255, 255, .9));color:var(--icon-btn-color, #007bff)}.open-new-tab-btn:hover{background:var(--icon-btn-hover-background, rgba(255, 255, 255, 1))}.pdf-title{color:var(--pdf-title-color, #333);font-family:var(--pdf-title-font-family, \"Mulish\");font-size:var(--pdf-title-font-size, 16px);font-weight:var(--pdf-title-font-weight, 600);margin:var(--pdf-title-margin, 0 20px 10px 20px);padding:var(--pdf-title-padding, 0);text-align:center}.pdf-iframe{width:var(--iframe-width, 100%);height:var(--iframe-height, calc(100% - 80px) );min-height:var(--iframe-min-height, 600px);border:var(--iframe-border, none);border-radius:var(--iframe-border-radius, 0);margin:0 20px 20px}\n"] }]
947
+ }], ctorParameters: () => [{ type: i1$1.DomSanitizer }, { type: MasterControlService }], propDecorators: { closed: [{
943
948
  type: Output
944
949
  }] } });
945
950
 
@@ -1183,7 +1188,7 @@ class UploadComponent {
1183
1188
  useExisting: UploadComponent,
1184
1189
  multi: true
1185
1190
  }
1186
- ], viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<label class=\"field-lable upload-label\" *ngIf=\"field() && field()?.isVisible && field()?.isShowLabel\">{{field()?.label}}<span style=\"color: red\" *ngIf=\"field() && field()?.validators?.isRequired\">*</span></label>\n @if(reactiveFormControlobject()) {\n <input\n hidden\n [type]=\"field()?.controlType\"\n [name]=\"field()?.fieldName\"\n [id]=\"field()?.fieldName\"\n [multiple]=\"field()?.configData?.multiple\"\n [accept]=\"field()?.configData?.accept\"\n #fileInput\n (change)=\"onFileSelected($event)\"\n (click)=\"fileInput.value = ''\"\n [required]=\"field()?.validators?.isRequired\"\n [disabled]=\"field()?.isDisable\"\n [formControl]=\"reactiveFormControlobject()\"\n [class]=\"field()?.fieldName\"\n />\n }@else {\n <input\n hidden\n [type]=\"field()?.controlType\"\n [name]=\"field()?.fieldName\"\n [id]=\"field()?.fieldName\"\n [multiple]=\"field()?.configData?.multiple\"\n [accept]=\"field()?.configData?.accept\"\n #fileInput\n (change)=\"onFileSelected($event)\"\n (click)=\"fileInput.value = ''\"\n [required]=\"field()?.validators?.isRequired\"\n [disabled]=\"field()?.isDisable\"\n [class]=\"field()?.fieldName\"\n />\n }\n <button\n type=\"button\"\n class=\"upload-btn\"\n (click)=\"triggerFileInput()\"\n [ngClass]=\"field()?.label ? 'lightbackground' : 'successBackground'\"\n *ngIf=\"field() && field()?.isVisible\"\n [disabled]=\"field()?.isDisable\"\n [ngStyle]=\"{\n'--upload-width': field()?.controlStyle?.width ,\n'--upload-height': field()?.controlStyle?.height ,\n'--upload-border-radius': field()?.controlStyle?.borderRadius ,\n'--upload-border-color': field()?.controlStyle?.borderColor ,\n'--upload-border-width': field()?.controlStyle?.borderWidth ,\n'--upload-border-style': field()?.controlStyle?.borderStyle ,\n'--upload-background-color': field()?.controlStyle?.background ,\n'--upload-focus-border-color': field()?.controlStyle?.focusBorderColor ,\n'--upload-focus-background-color': field()?.controlStyle?.focusBackground ,\n}\"\n >\n <ng-container *ngIf=\"field()?.label && !hasFiles(); else fileUploadedTemplate\">\n <span class=\"upload-icon\">\n <span\n ><img [src]=\"field()?.imageUrl\" alt=\"\" [style.height]=\"field()?.controlStyle?.imageHeight\"/></span>\n <span class=\"upload-text\" [ngStyle]=\"{\n'--upload-font-color': field()?.controlStyle?.color ,\n'--upload-font-size': field()?.controlStyle?.fontSize ,\n'--upload-font-weight': field()?.controlStyle?.fontWeight,\n'--upload-focus-font-color': field()?.controlStyle?.focusColor ,\n}\">{{ field()?.placeHolder }} <span style=\"color: red\" *ngIf=\"field() && field()?.validators?.isRequired\">*</span></span>\n </span>\n </ng-container>\n <ng-template #fileUploadedTemplate>\n <div *ngFor=\"let file of uploadedFiles; let i = index\" class=\"uploaded-file d-flex gap-4\" style=\"transform: translate(0px, -3px);\">\n <span class=\"mt-2 right-icon\" style=\" white-space: nowrap !important;\n overflow: hidden !important;\n text-overflow: ellipsis !important;\">\n <span><img [src]=\"field()?.imageUrl\" alt=\"\" [style.height]=\"field()?.controlStyle?.imageHeight\"/></span>\n <span [title]=\"file.name\" class=\"upload-text\" [ngStyle]=\"{\n'--upload-font-color': field()?.controlStyle?.color ,\n'--upload-font-size': field()?.controlStyle?.fontSize ,\n'--upload-font-weight': field()?.controlStyle?.fontWeight,\n'--upload-focus-font-color': field()?.controlStyle?.focusColor ,\n}\">{{ file.name }}</span>\n </span>\n <div class=\"mt-2 left-icon\">\n <span (click)=\"previewFile(file, i, $event)\" style=\"cursor: pointer;\"><img src=\"https://cdn.godigit.com/retail-life/visibility-oui.svg\" alt=\"\"/></span>\n <span (click)=\"removeFile(i, $event)\" style=\"cursor: pointer;\" *ngIf=\"!field()?.isDisable\">\n <img src=\"https://cdn.godigit.com/retail-life/delete-oui.svg\" alt=\"\"/>\n </span>\n </div>\n </div>\n </ng-template>\n </button>\n <div class=\"upload-info\" *ngIf=\"field() && field()?.isVisible && field()?.configData?.subText\">{{field()?.configData?.subText}}</div>\n", styles: ["*{font-family:mulish!important}.field-lable{font-size:12px!important;font-weight:700!important;color:#444!important;margin-bottom:0!important}.upload-label{opacity:1}.upload-btn{width:100%!important;height:var(--upload-height, 48px)!important;border-radius:.5rem;display:flex;align-items:center;justify-content:center}.upload-btn{width:var(--upload-width , 100%)!important;border-radius:var(--upload-border-radius , 8px)!important}.lightbackground{border-color:#999;border-width:1px;border-style:dashed;background:#fff;color:#444;font-size:14px;font-weight:700}.lightbackground{border-color:var(--upload-border-color , #999)!important;border-width:var(--upload-border-width , 1px)!important;border-style:var(--upload-border-style , dashed)!important;background:var(--upload-background-color , #ffffff)!important}.successBackground{border-color:var(--upload-focus-border-color , #ddd)!important;background:var(--upload-focus-background-color , #fafafa)!important;color:var(--upload-focus-font-color , #444)!important}.successBackground{border:1px dashed #ddd;background:#fafafa;color:#444;display:flex;justify-content:space-between}.upload-icon{display:flex;justify-content:center;gap:7px}.upload-text{color:#444!important;font-weight:700!important;font-size:14px!important}.upload-text{color:var(--upload-font-color , #444)!important;font-size:var( --upload-font-size , 14px)!important;font-weight:var(--upload-font-weight , 700)!important}.right-icon{display:flex;gap:10px;margin-left:.5em}.left-icon{display:flex;gap:15px;margin-right:1em}.upload-info{font-size:10px;font-weight:500;font-family:Mulish!important;letter-spacing:0px;color:#444}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
1191
+ ], viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<label class=\"field-lable upload-label\" *ngIf=\"field() && field()?.isVisible && field()?.isShowLabel\">{{field()?.label}}<span style=\"color: red\" *ngIf=\"field() && field()?.validators?.isRequired\">*</span></label>\n @if(reactiveFormControlobject()) {\n <input\n hidden\n [type]=\"field()?.controlType\"\n [name]=\"field()?.fieldName\"\n [id]=\"this.masterService.replaceSpacesWithUnderscores(field()?.label)\"\n [multiple]=\"field()?.configData?.multiple\"\n [accept]=\"field()?.configData?.accept\"\n #fileInput\n (change)=\"onFileSelected($event)\"\n (click)=\"fileInput.value = ''\"\n [required]=\"field()?.validators?.isRequired\"\n [disabled]=\"field()?.isDisable\"\n [formControl]=\"reactiveFormControlobject()\"\n [class]=\"field()?.fieldName\"\n />\n }@else {\n <input\n hidden\n [type]=\"field()?.controlType\"\n [name]=\"field()?.fieldName\"\n [id]=\"this.masterService.replaceSpacesWithUnderscores(field()?.label)\"\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: i5.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: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.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: i5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
1187
1192
  }
1188
1193
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UploadComponent, decorators: [{
1189
1194
  type: Component,
@@ -1197,7 +1202,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
1197
1202
  useExisting: UploadComponent,
1198
1203
  multi: true
1199
1204
  }
1200
- ], template: "<label class=\"field-lable upload-label\" *ngIf=\"field() && field()?.isVisible && field()?.isShowLabel\">{{field()?.label}}<span style=\"color: red\" *ngIf=\"field() && field()?.validators?.isRequired\">*</span></label>\n @if(reactiveFormControlobject()) {\n <input\n hidden\n [type]=\"field()?.controlType\"\n [name]=\"field()?.fieldName\"\n [id]=\"field()?.fieldName\"\n [multiple]=\"field()?.configData?.multiple\"\n [accept]=\"field()?.configData?.accept\"\n #fileInput\n (change)=\"onFileSelected($event)\"\n (click)=\"fileInput.value = ''\"\n [required]=\"field()?.validators?.isRequired\"\n [disabled]=\"field()?.isDisable\"\n [formControl]=\"reactiveFormControlobject()\"\n [class]=\"field()?.fieldName\"\n />\n }@else {\n <input\n hidden\n [type]=\"field()?.controlType\"\n [name]=\"field()?.fieldName\"\n [id]=\"field()?.fieldName\"\n [multiple]=\"field()?.configData?.multiple\"\n [accept]=\"field()?.configData?.accept\"\n #fileInput\n (change)=\"onFileSelected($event)\"\n (click)=\"fileInput.value = ''\"\n [required]=\"field()?.validators?.isRequired\"\n [disabled]=\"field()?.isDisable\"\n [class]=\"field()?.fieldName\"\n />\n }\n <button\n type=\"button\"\n class=\"upload-btn\"\n (click)=\"triggerFileInput()\"\n [ngClass]=\"field()?.label ? 'lightbackground' : 'successBackground'\"\n *ngIf=\"field() && field()?.isVisible\"\n [disabled]=\"field()?.isDisable\"\n [ngStyle]=\"{\n'--upload-width': field()?.controlStyle?.width ,\n'--upload-height': field()?.controlStyle?.height ,\n'--upload-border-radius': field()?.controlStyle?.borderRadius ,\n'--upload-border-color': field()?.controlStyle?.borderColor ,\n'--upload-border-width': field()?.controlStyle?.borderWidth ,\n'--upload-border-style': field()?.controlStyle?.borderStyle ,\n'--upload-background-color': field()?.controlStyle?.background ,\n'--upload-focus-border-color': field()?.controlStyle?.focusBorderColor ,\n'--upload-focus-background-color': field()?.controlStyle?.focusBackground ,\n}\"\n >\n <ng-container *ngIf=\"field()?.label && !hasFiles(); else fileUploadedTemplate\">\n <span class=\"upload-icon\">\n <span\n ><img [src]=\"field()?.imageUrl\" alt=\"\" [style.height]=\"field()?.controlStyle?.imageHeight\"/></span>\n <span class=\"upload-text\" [ngStyle]=\"{\n'--upload-font-color': field()?.controlStyle?.color ,\n'--upload-font-size': field()?.controlStyle?.fontSize ,\n'--upload-font-weight': field()?.controlStyle?.fontWeight,\n'--upload-focus-font-color': field()?.controlStyle?.focusColor ,\n}\">{{ field()?.placeHolder }} <span style=\"color: red\" *ngIf=\"field() && field()?.validators?.isRequired\">*</span></span>\n </span>\n </ng-container>\n <ng-template #fileUploadedTemplate>\n <div *ngFor=\"let file of uploadedFiles; let i = index\" class=\"uploaded-file d-flex gap-4\" style=\"transform: translate(0px, -3px);\">\n <span class=\"mt-2 right-icon\" style=\" white-space: nowrap !important;\n overflow: hidden !important;\n text-overflow: ellipsis !important;\">\n <span><img [src]=\"field()?.imageUrl\" alt=\"\" [style.height]=\"field()?.controlStyle?.imageHeight\"/></span>\n <span [title]=\"file.name\" class=\"upload-text\" [ngStyle]=\"{\n'--upload-font-color': field()?.controlStyle?.color ,\n'--upload-font-size': field()?.controlStyle?.fontSize ,\n'--upload-font-weight': field()?.controlStyle?.fontWeight,\n'--upload-focus-font-color': field()?.controlStyle?.focusColor ,\n}\">{{ file.name }}</span>\n </span>\n <div class=\"mt-2 left-icon\">\n <span (click)=\"previewFile(file, i, $event)\" style=\"cursor: pointer;\"><img src=\"https://cdn.godigit.com/retail-life/visibility-oui.svg\" alt=\"\"/></span>\n <span (click)=\"removeFile(i, $event)\" style=\"cursor: pointer;\" *ngIf=\"!field()?.isDisable\">\n <img src=\"https://cdn.godigit.com/retail-life/delete-oui.svg\" alt=\"\"/>\n </span>\n </div>\n </div>\n </ng-template>\n </button>\n <div class=\"upload-info\" *ngIf=\"field() && field()?.isVisible && field()?.configData?.subText\">{{field()?.configData?.subText}}</div>\n", styles: ["*{font-family:mulish!important}.field-lable{font-size:12px!important;font-weight:700!important;color:#444!important;margin-bottom:0!important}.upload-label{opacity:1}.upload-btn{width:100%!important;height:var(--upload-height, 48px)!important;border-radius:.5rem;display:flex;align-items:center;justify-content:center}.upload-btn{width:var(--upload-width , 100%)!important;border-radius:var(--upload-border-radius , 8px)!important}.lightbackground{border-color:#999;border-width:1px;border-style:dashed;background:#fff;color:#444;font-size:14px;font-weight:700}.lightbackground{border-color:var(--upload-border-color , #999)!important;border-width:var(--upload-border-width , 1px)!important;border-style:var(--upload-border-style , dashed)!important;background:var(--upload-background-color , #ffffff)!important}.successBackground{border-color:var(--upload-focus-border-color , #ddd)!important;background:var(--upload-focus-background-color , #fafafa)!important;color:var(--upload-focus-font-color , #444)!important}.successBackground{border:1px dashed #ddd;background:#fafafa;color:#444;display:flex;justify-content:space-between}.upload-icon{display:flex;justify-content:center;gap:7px}.upload-text{color:#444!important;font-weight:700!important;font-size:14px!important}.upload-text{color:var(--upload-font-color , #444)!important;font-size:var( --upload-font-size , 14px)!important;font-weight:var(--upload-font-weight , 700)!important}.right-icon{display:flex;gap:10px;margin-left:.5em}.left-icon{display:flex;gap:15px;margin-right:1em}.upload-info{font-size:10px;font-weight:500;font-family:Mulish!important;letter-spacing:0px;color:#444}\n"] }]
1205
+ ], template: "<label class=\"field-lable upload-label\" *ngIf=\"field() && field()?.isVisible && field()?.isShowLabel\">{{field()?.label}}<span style=\"color: red\" *ngIf=\"field() && field()?.validators?.isRequired\">*</span></label>\n @if(reactiveFormControlobject()) {\n <input\n hidden\n [type]=\"field()?.controlType\"\n [name]=\"field()?.fieldName\"\n [id]=\"this.masterService.replaceSpacesWithUnderscores(field()?.label)\"\n [multiple]=\"field()?.configData?.multiple\"\n [accept]=\"field()?.configData?.accept\"\n #fileInput\n (change)=\"onFileSelected($event)\"\n (click)=\"fileInput.value = ''\"\n [required]=\"field()?.validators?.isRequired\"\n [disabled]=\"field()?.isDisable\"\n [formControl]=\"reactiveFormControlobject()\"\n [class]=\"field()?.fieldName\"\n />\n }@else {\n <input\n hidden\n [type]=\"field()?.controlType\"\n [name]=\"field()?.fieldName\"\n [id]=\"this.masterService.replaceSpacesWithUnderscores(field()?.label)\"\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
1206
  }], ctorParameters: () => [{ type: MasterControlService }, { type: i0.ApplicationRef }, { type: i0.EnvironmentInjector }, { type: MasterService }], propDecorators: { fileInput: [{
1202
1207
  type: ViewChild,
1203
1208
  args: ['fileInput']
@@ -1378,7 +1383,7 @@ class DobComponent {
1378
1383
  deps: []
1379
1384
  },
1380
1385
  { 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()?.fieldName\" [id]=\"field()?.fieldName\"\n [placeholder]=\"field()?.placeHolder || 'DD-MM-YYYY'\" [required]=\"field()?.validators?.isRequired\"\n [pattern]=\"field()?.validators?.pattern\" [matDatepicker]=\"picker\" (input)=\"dateDivisionFormat($event)\"\n [min]=\"field()?.configData?.min\" [max]=\"field()?.configData?.max\" [disabled]=\"field()?.isDisable\"\n (dateChange)=\"onDateChange($event)\" (blur)=\"onInputBlur($event)\" [value]=\"inputValue\"\n [formControl]=\"reactiveFormControlobject()\" />\n }@else {\n <input matInput autocomplete=\"off\" type=\"text\" [name]=\"field()?.fieldName\" [id]=\"field()?.fieldName\"\n [placeholder]=\"field()?.placeHolder\" [required]=\"field()?.validators?.isRequired\"\n [pattern]=\"field()?.validators?.pattern\" [matDatepicker]=\"picker\" (input)=\"dateDivisionFormat($event)\"\n [min]=\"field()?.configData?.min\" [max]=\"field()?.configData?.max\" [disabled]=\"field()?.isDisable\"\n (dateChange)=\"onDateChange($event)\" (blur)=\"onInputBlur($event)\" [value]=\"inputValue\" />\n }\n\n <mat-datepicker-toggle matSuffix [for]=\"picker\">\n <img src=\"https://cdn.godigit.com/digitPlusAssets/retail-life-icon/svgicon/date_picker_icon.svg\" style=\"width: 16px\"\n matDatepickerToggleIcon />\n </mat-datepicker-toggle>\n <mat-datepicker #picker></mat-datepicker>\n <mat-error *ngIf=\"false\">\n {{ field()?.validators?.isRequiredMessage }}\n </mat-error>\n</mat-form-field>\n<div class=\"error-message\" *ngIf=\"false\">\n {{ field()?.validators?.isRequiredMessage }}.\n</div>\n<div class=\"error-message\" *ngIf=\"field()?.configData?.isInvalid\">\n {{ field()?.validators?.patternMessage }}.\n</div>\n", styles: [".field-lable{font-size:12px!important;font-weight:700!important;color:#444!important;margin-bottom:0!important}.error-message{color:red}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mat-mdc-notch-piece{border-color:var(--custom-border-color-focus, #ffbb00)!important;border-width:var(--custom-border-width-focus, 1.5px)!important}::ng-deep .mat-mdc-form-field{background-color:var(--custom-bg-color, #ffffff)!important;border-radius:var(--custom-border-radius , 4px)!important}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__leading{border-color:var(--custom-border-color-hover, #ffbb00)!important;border-width:var(--custom-border-width-hover, 1.5px)!important}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__notch{border-color:var(--custom-border-color-hover, #ffbb00)!important;border-width:var(--custom-border-width-hover, 1.5px)!important}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__trailing{border-color:var(--custom-border-color-hover, #ffbb00)!important;border-width:var(--custom-border-width-hover, 1.5px)!important}::ng-deep .mdc-text-field--outlined .mat-mdc-notch-piece{border-color:var(--custom-border-color, #dddddd)!important;border-width:var(--custom-border-width, 1.5px)!important}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-text-field__input{caret-color:var(--custom-caret-color, #ffbb00)!important;font-size:12px!important;font-weight:var(--custom-font-weight, 400)!important;font-family:var(--custom-font-family, \"Mulish\")!important;color:var(--custom-font-color, #444444)!important}::ng-deep .mat-form-field-invalid .mdc-text-field--outlined .mat-mdc-notch-piece{border-color:var(--custom-border-color-error, red)!important;border-width:var(--custom-border-width-error, 1.5px)!important}::ng-deep .mat-mdc-form-field.mat-form-field-disabled{background:var(--custom-bg-color-disabled, #ECECEC)!important}::ng-deep .mdc-text-field--outlined.mdc-text-field--disabled .mdc-text-field__input{color:var(--custom-font-color-disabled, #999999)!important}::ng-deep .mdc-label{color:var(--custom-font-color, #444)!important;font-size:var(--custom-font-size, 16px)!important;font-weight:var(--custom-font-weight, 400)!important;font-family:var(--custom-font-family, \"Mulish\")!important}::placeholder{color:#8f8f8f!important;font-size:12px!important}::ng-deep .mat-mdc-form-field-hint-wrapper{padding:0!important}::ng-deep .mat-mdc-form-field-error-wrapper{padding:0!important}::ng-deep .mat-mdc-form-field-error{color:#e00!important;font-size:12px;font-weight:500;font-family:Mulish!important;letter-spacing:0}::ng-deep .mdc-text-field--outlined{--mdc-outlined-text-field-container-shape: var(--custom-border-radius , 4px) !important}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--invalid .mat-mdc-notch-piece{border-color:var(--custom-border-color-error, red)!important;border-width:var(--custom-border-width-error, 1.5px)!important}::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none!important}*{font-family:mulish!important}::ng-deep .mat-calendar-period-button .mdc-button__label{display:flex;flex-direction:row-reverse;align-items:center;gap:10px}\n"], dependencies: [{ kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i5.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i5.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i5.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "directive", type: i5.MatDatepickerToggleIcon, selector: "[matDatepickerToggleIcon]" }, { kind: "ngmodule", type: MomentDateModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
1386
+ ], ngImport: i0, template: "<label *ngIf=\"field() && field()?.isVisible && field().isShowLabel\" class=\"field-lable\">{{ field()?.label\n }}<span style=\"color: red\" *ngIf=\"field() && field()?.validators?.isRequired\">*</span></label>\n<mat-form-field [class]=\"'w-100 ' + field()?.fieldName\" appearance=\"outline\" *ngIf=\"field() && field()?.isVisible\" [ngStyle]=\"{\n '--custom-border-color': field()?.controlStyle?.borderColor ,\n '--custom-border-width': field()?.controlStyle?.borderWidth ,\n '--custom-border-radius': field()?.controlStyle?.borderRadius ,\n '--custom-border-color-focus': field()?.controlStyle?.focusBorderColor ,\n '--custom-border-width-focus': field()?.controlStyle?.focusBorderWidth ,\n '--custom-border-color-hover': field()?.controlStyle?.hoverBorderColor ,\n '--custom-border-width-hover': field()?.controlStyle?.hoverBorderWidth ,\n '--custom-border-color-error': field()?.controlStyle?.errorBorderColor ,\n '--custom-border-width-error': field()?.controlStyle?.errorBorderWidth ,\n '--custom-font-size': field()?.controlStyle?.fontSize ,\n '--custom-font-weight': field()?.controlStyle?.fontWeight ,\n '--custom-font-family': field()?.controlStyle?.fontFamily ,\n '--custom-font-color': field()?.controlStyle?.color ,\n '--custom-caret-color': field()?.controlStyle?.caretColor ,\n '--custom-font-color-disabled' : field()?.controlStyle?.disableColor ,\n '--custom-bg-color-disabled' : field()?.controlStyle?.disableBackground ,\n '--custom-bg-color': field()?.controlStyle?.background ,\n '--custom-bg-color-focus': field()?.controlStyle?.focusBackground ,\n }\">\n @if(reactiveFormControlobject()) {\n <input matInput autocomplete=\"off\" type=\"text\" [name]=\"field()?.fieldName\" [id]=\"this.service.replaceSpacesWithUnderscores(field()?.label)\"\n [placeholder]=\"field()?.placeHolder || 'DD-MM-YYYY'\" [required]=\"field()?.validators?.isRequired\"\n [pattern]=\"field()?.validators?.pattern\" [matDatepicker]=\"picker\" (input)=\"dateDivisionFormat($event)\"\n [min]=\"field()?.configData?.min\" [max]=\"field()?.configData?.max\" [disabled]=\"field()?.isDisable\"\n (dateChange)=\"onDateChange($event)\" (blur)=\"onInputBlur($event)\" [value]=\"inputValue\"\n [formControl]=\"reactiveFormControlobject()\" />\n }@else {\n <input matInput autocomplete=\"off\" type=\"text\" [name]=\"field()?.fieldName\" [id]=\"this.service.replaceSpacesWithUnderscores(field()?.label)\"\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: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.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$1.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i5$1.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i5$1.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "directive", type: i5$1.MatDatepickerToggleIcon, selector: "[matDatepickerToggleIcon]" }, { kind: "ngmodule", type: MomentDateModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i5.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: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i5.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
1382
1387
  }
1383
1388
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DobComponent, decorators: [{
1384
1389
  type: Component,
@@ -1394,7 +1399,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
1394
1399
  deps: []
1395
1400
  },
1396
1401
  { 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()?.fieldName\" [id]=\"field()?.fieldName\"\n [placeholder]=\"field()?.placeHolder || 'DD-MM-YYYY'\" [required]=\"field()?.validators?.isRequired\"\n [pattern]=\"field()?.validators?.pattern\" [matDatepicker]=\"picker\" (input)=\"dateDivisionFormat($event)\"\n [min]=\"field()?.configData?.min\" [max]=\"field()?.configData?.max\" [disabled]=\"field()?.isDisable\"\n (dateChange)=\"onDateChange($event)\" (blur)=\"onInputBlur($event)\" [value]=\"inputValue\"\n [formControl]=\"reactiveFormControlobject()\" />\n }@else {\n <input matInput autocomplete=\"off\" type=\"text\" [name]=\"field()?.fieldName\" [id]=\"field()?.fieldName\"\n [placeholder]=\"field()?.placeHolder\" [required]=\"field()?.validators?.isRequired\"\n [pattern]=\"field()?.validators?.pattern\" [matDatepicker]=\"picker\" (input)=\"dateDivisionFormat($event)\"\n [min]=\"field()?.configData?.min\" [max]=\"field()?.configData?.max\" [disabled]=\"field()?.isDisable\"\n (dateChange)=\"onDateChange($event)\" (blur)=\"onInputBlur($event)\" [value]=\"inputValue\" />\n }\n\n <mat-datepicker-toggle matSuffix [for]=\"picker\">\n <img src=\"https://cdn.godigit.com/digitPlusAssets/retail-life-icon/svgicon/date_picker_icon.svg\" style=\"width: 16px\"\n matDatepickerToggleIcon />\n </mat-datepicker-toggle>\n <mat-datepicker #picker></mat-datepicker>\n <mat-error *ngIf=\"false\">\n {{ field()?.validators?.isRequiredMessage }}\n </mat-error>\n</mat-form-field>\n<div class=\"error-message\" *ngIf=\"false\">\n {{ field()?.validators?.isRequiredMessage }}.\n</div>\n<div class=\"error-message\" *ngIf=\"field()?.configData?.isInvalid\">\n {{ field()?.validators?.patternMessage }}.\n</div>\n", styles: [".field-lable{font-size:12px!important;font-weight:700!important;color:#444!important;margin-bottom:0!important}.error-message{color:red}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mat-mdc-notch-piece{border-color:var(--custom-border-color-focus, #ffbb00)!important;border-width:var(--custom-border-width-focus, 1.5px)!important}::ng-deep .mat-mdc-form-field{background-color:var(--custom-bg-color, #ffffff)!important;border-radius:var(--custom-border-radius , 4px)!important}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__leading{border-color:var(--custom-border-color-hover, #ffbb00)!important;border-width:var(--custom-border-width-hover, 1.5px)!important}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__notch{border-color:var(--custom-border-color-hover, #ffbb00)!important;border-width:var(--custom-border-width-hover, 1.5px)!important}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__trailing{border-color:var(--custom-border-color-hover, #ffbb00)!important;border-width:var(--custom-border-width-hover, 1.5px)!important}::ng-deep .mdc-text-field--outlined .mat-mdc-notch-piece{border-color:var(--custom-border-color, #dddddd)!important;border-width:var(--custom-border-width, 1.5px)!important}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-text-field__input{caret-color:var(--custom-caret-color, #ffbb00)!important;font-size:12px!important;font-weight:var(--custom-font-weight, 400)!important;font-family:var(--custom-font-family, \"Mulish\")!important;color:var(--custom-font-color, #444444)!important}::ng-deep .mat-form-field-invalid .mdc-text-field--outlined .mat-mdc-notch-piece{border-color:var(--custom-border-color-error, red)!important;border-width:var(--custom-border-width-error, 1.5px)!important}::ng-deep .mat-mdc-form-field.mat-form-field-disabled{background:var(--custom-bg-color-disabled, #ECECEC)!important}::ng-deep .mdc-text-field--outlined.mdc-text-field--disabled .mdc-text-field__input{color:var(--custom-font-color-disabled, #999999)!important}::ng-deep .mdc-label{color:var(--custom-font-color, #444)!important;font-size:var(--custom-font-size, 16px)!important;font-weight:var(--custom-font-weight, 400)!important;font-family:var(--custom-font-family, \"Mulish\")!important}::placeholder{color:#8f8f8f!important;font-size:12px!important}::ng-deep .mat-mdc-form-field-hint-wrapper{padding:0!important}::ng-deep .mat-mdc-form-field-error-wrapper{padding:0!important}::ng-deep .mat-mdc-form-field-error{color:#e00!important;font-size:12px;font-weight:500;font-family:Mulish!important;letter-spacing:0}::ng-deep .mdc-text-field--outlined{--mdc-outlined-text-field-container-shape: var(--custom-border-radius , 4px) !important}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--invalid .mat-mdc-notch-piece{border-color:var(--custom-border-color-error, red)!important;border-width:var(--custom-border-width-error, 1.5px)!important}::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none!important}*{font-family:mulish!important}::ng-deep .mat-calendar-period-button .mdc-button__label{display:flex;flex-direction:row-reverse;align-items:center;gap:10px}\n"] }]
1402
+ ], template: "<label *ngIf=\"field() && field()?.isVisible && field().isShowLabel\" class=\"field-lable\">{{ field()?.label\n }}<span style=\"color: red\" *ngIf=\"field() && field()?.validators?.isRequired\">*</span></label>\n<mat-form-field [class]=\"'w-100 ' + field()?.fieldName\" appearance=\"outline\" *ngIf=\"field() && field()?.isVisible\" [ngStyle]=\"{\n '--custom-border-color': field()?.controlStyle?.borderColor ,\n '--custom-border-width': field()?.controlStyle?.borderWidth ,\n '--custom-border-radius': field()?.controlStyle?.borderRadius ,\n '--custom-border-color-focus': field()?.controlStyle?.focusBorderColor ,\n '--custom-border-width-focus': field()?.controlStyle?.focusBorderWidth ,\n '--custom-border-color-hover': field()?.controlStyle?.hoverBorderColor ,\n '--custom-border-width-hover': field()?.controlStyle?.hoverBorderWidth ,\n '--custom-border-color-error': field()?.controlStyle?.errorBorderColor ,\n '--custom-border-width-error': field()?.controlStyle?.errorBorderWidth ,\n '--custom-font-size': field()?.controlStyle?.fontSize ,\n '--custom-font-weight': field()?.controlStyle?.fontWeight ,\n '--custom-font-family': field()?.controlStyle?.fontFamily ,\n '--custom-font-color': field()?.controlStyle?.color ,\n '--custom-caret-color': field()?.controlStyle?.caretColor ,\n '--custom-font-color-disabled' : field()?.controlStyle?.disableColor ,\n '--custom-bg-color-disabled' : field()?.controlStyle?.disableBackground ,\n '--custom-bg-color': field()?.controlStyle?.background ,\n '--custom-bg-color-focus': field()?.controlStyle?.focusBackground ,\n }\">\n @if(reactiveFormControlobject()) {\n <input matInput autocomplete=\"off\" type=\"text\" [name]=\"field()?.fieldName\" [id]=\"this.service.replaceSpacesWithUnderscores(field()?.label)\"\n [placeholder]=\"field()?.placeHolder || 'DD-MM-YYYY'\" [required]=\"field()?.validators?.isRequired\"\n [pattern]=\"field()?.validators?.pattern\" [matDatepicker]=\"picker\" (input)=\"dateDivisionFormat($event)\"\n [min]=\"field()?.configData?.min\" [max]=\"field()?.configData?.max\" [disabled]=\"field()?.isDisable\"\n (dateChange)=\"onDateChange($event)\" (blur)=\"onInputBlur($event)\" [value]=\"inputValue\"\n [formControl]=\"reactiveFormControlobject()\" />\n }@else {\n <input matInput autocomplete=\"off\" type=\"text\" [name]=\"field()?.fieldName\" [id]=\"this.service.replaceSpacesWithUnderscores(field()?.label)\"\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
1403
  }], ctorParameters: () => [{ type: MasterControlService }], propDecorators: { blur: [{
1399
1404
  type: Output
1400
1405
  }], valueChange: [{
@@ -1473,7 +1478,7 @@ class MobNumberComponent {
1473
1478
  useExisting: MobNumberComponent,
1474
1479
  multi: true
1475
1480
  }
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"] }] });
1481
+ ], 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]=\"this.masterService.replaceSpacesWithUnderscores(field()?.label)\"\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]=\"this.masterService.replaceSpacesWithUnderscores(field()?.label)\"\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: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i3$1.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$1.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i4.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatOptionModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i5.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: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i5.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
1477
1482
  }
1478
1483
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MobNumberComponent, decorators: [{
1479
1484
  type: Component,
@@ -1483,7 +1488,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
1483
1488
  useExisting: MobNumberComponent,
1484
1489
  multi: true
1485
1490
  }
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"] }]
1491
+ ], 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]=\"this.masterService.replaceSpacesWithUnderscores(field()?.label)\"\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]=\"this.masterService.replaceSpacesWithUnderscores(field()?.label)\"\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
1492
  }], ctorParameters: () => [{ type: MasterControlService }], propDecorators: { blur: [{
1488
1493
  type: Output
1489
1494
  }] } });
@@ -1564,7 +1569,7 @@ class CheckboxComponent {
1564
1569
  useExisting: CheckboxComponent,
1565
1570
  multi: true
1566
1571
  }
1567
- ], ngImport: i0, template: "@if(reactiveFormControlobject()) {\n<mat-checkbox *ngIf=\"field() && field()?.isVisible\" [class]=\"field()?.fieldName\" [name]=\"field()?.fieldName\" [id]=\"field()?.fieldName\"\n [disabled]=\"field()?.isDisable\" [required]=\"field()?.validators?.isRequired\" [checked]=\"inputValue\" (keydown.enter)=\"$event.preventDefault()\"\n [formControl]=\"reactiveFormControlobject()\" (change)=\"onCheckboxChange($event)\" [ngStyle]=\"{\n '--checkbox-border-radius': field()?.controlStyle?.borderRadius,\n '--checkbox-bg-color': field()?.controlStyle?.background,\n '--checkbox-border-color': field()?.controlStyle?.borderColor,\n '--checkbox-border-color-focus': field()?.controlStyle?.focusBorderColor,\n '--checkbox-bg-color-focus': field()?.controlStyle?.focusBackground,\n '--checkbox-font-size': field()?.controlStyle?.fontSize,\n '--checkbox-font-weight': field()?.controlStyle?.fontWeight,\n '--checkbox-font-color': field()?.controlStyle?.color,\n '--checkbox-font-family': field()?.controlStyle?.fontFamily,\n '--checkbox-border-width': field()?.controlStyle?.borderWidth,\n '--checkbox-border-color-hover': field()?.controlStyle?.hoverBorderColor,\n '--checkbox-border-color-error': field()?.controlStyle?.errorBorderColor,\n '--checkbox-font-color-disabled': field()?.controlStyle?.disableColor,\n '--checkbox-bg-color-disabled': field()?.controlStyle?.disableBackground\n }\">\n {{ field()?.label }}\n <span [innerHTML]=\"field()?.configData?.innerHTML\"></span>\n <span [appTooltipTemplate]=\"HtmlContent\" arrowPosition=\"left\" tooltipPosition=\"bottom\">\n <img [src]=\"field().imageUrl\" class=\"toggle-img mx-1\" />\n </span>\n <ng-template #HtmlContent>\n <span [innerHTML]=\"field().configData?.tooltipMessage\"></span>\n </ng-template>\n</mat-checkbox>\n}@else {\n<mat-checkbox *ngIf=\"field() && field()?.isVisible\" [class]=\"field()?.fieldName\" [name]=\"field()?.fieldName\" [id]=\"field()?.fieldName\"\n [disabled]=\"field()?.isDisable\" [required]=\"field()?.validators?.isRequired\" [checked]=\"inputValue\"\n (change)=\"onCheckboxChange($event)\" [ngStyle]=\"{\n '--checkbox-border-radius': field()?.controlStyle?.borderRadius,\n '--checkbox-bg-color': field()?.controlStyle?.background,\n '--checkbox-border-color': field()?.controlStyle?.borderColor,\n '--checkbox-border-color-focus': field()?.controlStyle?.focusBorderColor,\n '--checkbox-bg-color-focus': field()?.controlStyle?.focusBackground,\n '--checkbox-font-size': field()?.controlStyle?.fontSize,\n '--checkbox-font-weight': field()?.controlStyle?.fontWeight,\n '--checkbox-font-color': field()?.controlStyle?.color,\n '--checkbox-font-family': field()?.controlStyle?.fontFamily,\n '--checkbox-border-width': field()?.controlStyle?.borderWidth,\n '--checkbox-border-color-hover': field()?.controlStyle?.hoverBorderColor,\n '--checkbox-border-color-error': field()?.controlStyle?.errorBorderColor,\n '--checkbox-font-color-disabled': field()?.controlStyle?.disableColor,\n '--checkbox-bg-color-disabled': field()?.controlStyle?.disableBackground\n }\">\n {{ field()?.label }}\n <span [innerHTML]=\"field()?.configData?.innerHTML\"></span>\n</mat-checkbox>\n}\n<div class=\"error-message\" *ngIf=\"false\">\n {{field()?.validators?.isRequiredMessage}}.\n</div>\n", styles: ["*{font-family:mulish!important}.error-message{color:red}.toggle-img{width:12px;margin-left:8px!important}@media screen and (max-width: 768px){.toggle-img{width:16px}}::ng-deep .mdc-checkbox__background{border-radius:var(--checkbox-border-radius, 4px)!important}::ng-deep .mdc-checkbox__native-control:disabled:checked~.mdc-checkbox__background{background-color:var(--checkbox-bg-color , #ffffff)!important;border-color:#0000}::ng-deep .mdc-checkbox__native-control:disabled:indeterminate~.mdc-checkbox__background{background-color:var(--checkbox-bg-color , #ffffff)!important;border-color:#0000}::ng-deep .mdc-checkbox__native-control:enabled:checked~.mdc-checkbox__background{border-color:var(--checkbox-border-color-focus, #ffbb00)!important;background-color:var(--checkbox-bg-color-focus, #ffbb00)!important;border-radius:var(--checkbox-border-radius, 4px)!important}::ng-deep .mdc-checkbox__native-control:enabled:indeterminate~.mdc-checkbox__background{border-color:var(--checkbox-border-color-focus, #ffbb00)!important;background-color:var(--checkbox-bg-color-focus, #ffbb00)!important;border-radius:var(--checkbox-border-radius, 4px)!important}::ng-deep .mat-pseudo-checkbox-full.mat-pseudo-checkbox-checked:after{color:#fff!important}::ng-deep .mat-pseudo-checkbox-full.mat-pseudo-checkbox-checked{background-color:var(--checkbox-bg-color-focus, #ffbb00)!important;border-radius:var(--checkbox-border-radius, 4px)!important}::ng-deep .mat-pseudo-checkbox-full.mat-pseudo-checkbox-indeterminate{background-color:var(--checkbox-bg-color-focus, #ffbb00)!important;border-radius:var(--checkbox-border-radius, 4px)!important}::ng-deep .mat-pseudo-checkbox{border:1px solid #DADADA}::ng-deep .checkbox{padding:4px 8px 3px 0;background:#f5f5f5;border-radius:4px;margin-right:8px}::ng-deep .mat-mdc-checkbox label{font-size:var(--checkbox-font-size , 16px)!important;font-weight:var(--checkbox-font-weight , 700)!important;color:var(--checkbox-font-color , #444)!important;padding:0!important;margin-bottom:2px;font-family:Mulish!important;margin-top:8px}::ng-deep .mat-mdc-checkbox .mdc-checkbox__ripple{display:none}::ng-deep .mdc-checkbox__native-control:checked~.mdc-checkbox__background .mdc-checkbox__checkmark{color:#fff!important}::ng-deep .mat-internal-form-field{align-items:flex-start!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i4$1.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: CustomizedTooltipDirective, selector: "[appTooltipTemplate]", inputs: ["appTooltipTemplate"] }] });
1572
+ ], ngImport: i0, template: "@if(reactiveFormControlobject()) {\n<mat-checkbox *ngIf=\"field() && field()?.isVisible\" [class]=\"field()?.fieldName\" [name]=\"field()?.fieldName\" [id]=\"this.masterService.replaceSpacesWithUnderscores(field()?.label)\"\n [disabled]=\"field()?.isDisable\" [required]=\"field()?.validators?.isRequired\" [checked]=\"inputValue\" (keydown.enter)=\"$event.preventDefault()\"\n [formControl]=\"reactiveFormControlobject()\" (change)=\"onCheckboxChange($event)\" [ngStyle]=\"{\n '--checkbox-border-radius': field()?.controlStyle?.borderRadius,\n '--checkbox-bg-color': field()?.controlStyle?.background,\n '--checkbox-border-color': field()?.controlStyle?.borderColor,\n '--checkbox-border-color-focus': field()?.controlStyle?.focusBorderColor,\n '--checkbox-bg-color-focus': field()?.controlStyle?.focusBackground,\n '--checkbox-font-size': field()?.controlStyle?.fontSize,\n '--checkbox-font-weight': field()?.controlStyle?.fontWeight,\n '--checkbox-font-color': field()?.controlStyle?.color,\n '--checkbox-font-family': field()?.controlStyle?.fontFamily,\n '--checkbox-border-width': field()?.controlStyle?.borderWidth,\n '--checkbox-border-color-hover': field()?.controlStyle?.hoverBorderColor,\n '--checkbox-border-color-error': field()?.controlStyle?.errorBorderColor,\n '--checkbox-font-color-disabled': field()?.controlStyle?.disableColor,\n '--checkbox-bg-color-disabled': field()?.controlStyle?.disableBackground\n }\">\n {{ field()?.label }}\n <span [innerHTML]=\"field()?.configData?.innerHTML\"></span>\n <span [appTooltipTemplate]=\"HtmlContent\" arrowPosition=\"left\" tooltipPosition=\"bottom\">\n <img [src]=\"field().imageUrl\" class=\"toggle-img mx-1\" />\n </span>\n <ng-template #HtmlContent>\n <span [innerHTML]=\"field().configData?.tooltipMessage\"></span>\n </ng-template>\n</mat-checkbox>\n}@else {\n<mat-checkbox *ngIf=\"field() && field()?.isVisible\" [class]=\"field()?.fieldName\" [name]=\"field()?.fieldName\" [id]=\"this.masterService.replaceSpacesWithUnderscores(field()?.label)\"\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: i5$2.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: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: CustomizedTooltipDirective, selector: "[appTooltipTemplate]", inputs: ["appTooltipTemplate"] }] });
1568
1573
  }
1569
1574
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CheckboxComponent, decorators: [{
1570
1575
  type: Component,
@@ -1574,7 +1579,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
1574
1579
  useExisting: CheckboxComponent,
1575
1580
  multi: true
1576
1581
  }
1577
- ], template: "@if(reactiveFormControlobject()) {\n<mat-checkbox *ngIf=\"field() && field()?.isVisible\" [class]=\"field()?.fieldName\" [name]=\"field()?.fieldName\" [id]=\"field()?.fieldName\"\n [disabled]=\"field()?.isDisable\" [required]=\"field()?.validators?.isRequired\" [checked]=\"inputValue\" (keydown.enter)=\"$event.preventDefault()\"\n [formControl]=\"reactiveFormControlobject()\" (change)=\"onCheckboxChange($event)\" [ngStyle]=\"{\n '--checkbox-border-radius': field()?.controlStyle?.borderRadius,\n '--checkbox-bg-color': field()?.controlStyle?.background,\n '--checkbox-border-color': field()?.controlStyle?.borderColor,\n '--checkbox-border-color-focus': field()?.controlStyle?.focusBorderColor,\n '--checkbox-bg-color-focus': field()?.controlStyle?.focusBackground,\n '--checkbox-font-size': field()?.controlStyle?.fontSize,\n '--checkbox-font-weight': field()?.controlStyle?.fontWeight,\n '--checkbox-font-color': field()?.controlStyle?.color,\n '--checkbox-font-family': field()?.controlStyle?.fontFamily,\n '--checkbox-border-width': field()?.controlStyle?.borderWidth,\n '--checkbox-border-color-hover': field()?.controlStyle?.hoverBorderColor,\n '--checkbox-border-color-error': field()?.controlStyle?.errorBorderColor,\n '--checkbox-font-color-disabled': field()?.controlStyle?.disableColor,\n '--checkbox-bg-color-disabled': field()?.controlStyle?.disableBackground\n }\">\n {{ field()?.label }}\n <span [innerHTML]=\"field()?.configData?.innerHTML\"></span>\n <span [appTooltipTemplate]=\"HtmlContent\" arrowPosition=\"left\" tooltipPosition=\"bottom\">\n <img [src]=\"field().imageUrl\" class=\"toggle-img mx-1\" />\n </span>\n <ng-template #HtmlContent>\n <span [innerHTML]=\"field().configData?.tooltipMessage\"></span>\n </ng-template>\n</mat-checkbox>\n}@else {\n<mat-checkbox *ngIf=\"field() && field()?.isVisible\" [class]=\"field()?.fieldName\" [name]=\"field()?.fieldName\" [id]=\"field()?.fieldName\"\n [disabled]=\"field()?.isDisable\" [required]=\"field()?.validators?.isRequired\" [checked]=\"inputValue\"\n (change)=\"onCheckboxChange($event)\" [ngStyle]=\"{\n '--checkbox-border-radius': field()?.controlStyle?.borderRadius,\n '--checkbox-bg-color': field()?.controlStyle?.background,\n '--checkbox-border-color': field()?.controlStyle?.borderColor,\n '--checkbox-border-color-focus': field()?.controlStyle?.focusBorderColor,\n '--checkbox-bg-color-focus': field()?.controlStyle?.focusBackground,\n '--checkbox-font-size': field()?.controlStyle?.fontSize,\n '--checkbox-font-weight': field()?.controlStyle?.fontWeight,\n '--checkbox-font-color': field()?.controlStyle?.color,\n '--checkbox-font-family': field()?.controlStyle?.fontFamily,\n '--checkbox-border-width': field()?.controlStyle?.borderWidth,\n '--checkbox-border-color-hover': field()?.controlStyle?.hoverBorderColor,\n '--checkbox-border-color-error': field()?.controlStyle?.errorBorderColor,\n '--checkbox-font-color-disabled': field()?.controlStyle?.disableColor,\n '--checkbox-bg-color-disabled': field()?.controlStyle?.disableBackground\n }\">\n {{ field()?.label }}\n <span [innerHTML]=\"field()?.configData?.innerHTML\"></span>\n</mat-checkbox>\n}\n<div class=\"error-message\" *ngIf=\"false\">\n {{field()?.validators?.isRequiredMessage}}.\n</div>\n", styles: ["*{font-family:mulish!important}.error-message{color:red}.toggle-img{width:12px;margin-left:8px!important}@media screen and (max-width: 768px){.toggle-img{width:16px}}::ng-deep .mdc-checkbox__background{border-radius:var(--checkbox-border-radius, 4px)!important}::ng-deep .mdc-checkbox__native-control:disabled:checked~.mdc-checkbox__background{background-color:var(--checkbox-bg-color , #ffffff)!important;border-color:#0000}::ng-deep .mdc-checkbox__native-control:disabled:indeterminate~.mdc-checkbox__background{background-color:var(--checkbox-bg-color , #ffffff)!important;border-color:#0000}::ng-deep .mdc-checkbox__native-control:enabled:checked~.mdc-checkbox__background{border-color:var(--checkbox-border-color-focus, #ffbb00)!important;background-color:var(--checkbox-bg-color-focus, #ffbb00)!important;border-radius:var(--checkbox-border-radius, 4px)!important}::ng-deep .mdc-checkbox__native-control:enabled:indeterminate~.mdc-checkbox__background{border-color:var(--checkbox-border-color-focus, #ffbb00)!important;background-color:var(--checkbox-bg-color-focus, #ffbb00)!important;border-radius:var(--checkbox-border-radius, 4px)!important}::ng-deep .mat-pseudo-checkbox-full.mat-pseudo-checkbox-checked:after{color:#fff!important}::ng-deep .mat-pseudo-checkbox-full.mat-pseudo-checkbox-checked{background-color:var(--checkbox-bg-color-focus, #ffbb00)!important;border-radius:var(--checkbox-border-radius, 4px)!important}::ng-deep .mat-pseudo-checkbox-full.mat-pseudo-checkbox-indeterminate{background-color:var(--checkbox-bg-color-focus, #ffbb00)!important;border-radius:var(--checkbox-border-radius, 4px)!important}::ng-deep .mat-pseudo-checkbox{border:1px solid #DADADA}::ng-deep .checkbox{padding:4px 8px 3px 0;background:#f5f5f5;border-radius:4px;margin-right:8px}::ng-deep .mat-mdc-checkbox label{font-size:var(--checkbox-font-size , 16px)!important;font-weight:var(--checkbox-font-weight , 700)!important;color:var(--checkbox-font-color , #444)!important;padding:0!important;margin-bottom:2px;font-family:Mulish!important;margin-top:8px}::ng-deep .mat-mdc-checkbox .mdc-checkbox__ripple{display:none}::ng-deep .mdc-checkbox__native-control:checked~.mdc-checkbox__background .mdc-checkbox__checkmark{color:#fff!important}::ng-deep .mat-internal-form-field{align-items:flex-start!important}\n"] }]
1582
+ ], template: "@if(reactiveFormControlobject()) {\n<mat-checkbox *ngIf=\"field() && field()?.isVisible\" [class]=\"field()?.fieldName\" [name]=\"field()?.fieldName\" [id]=\"this.masterService.replaceSpacesWithUnderscores(field()?.label)\"\n [disabled]=\"field()?.isDisable\" [required]=\"field()?.validators?.isRequired\" [checked]=\"inputValue\" (keydown.enter)=\"$event.preventDefault()\"\n [formControl]=\"reactiveFormControlobject()\" (change)=\"onCheckboxChange($event)\" [ngStyle]=\"{\n '--checkbox-border-radius': field()?.controlStyle?.borderRadius,\n '--checkbox-bg-color': field()?.controlStyle?.background,\n '--checkbox-border-color': field()?.controlStyle?.borderColor,\n '--checkbox-border-color-focus': field()?.controlStyle?.focusBorderColor,\n '--checkbox-bg-color-focus': field()?.controlStyle?.focusBackground,\n '--checkbox-font-size': field()?.controlStyle?.fontSize,\n '--checkbox-font-weight': field()?.controlStyle?.fontWeight,\n '--checkbox-font-color': field()?.controlStyle?.color,\n '--checkbox-font-family': field()?.controlStyle?.fontFamily,\n '--checkbox-border-width': field()?.controlStyle?.borderWidth,\n '--checkbox-border-color-hover': field()?.controlStyle?.hoverBorderColor,\n '--checkbox-border-color-error': field()?.controlStyle?.errorBorderColor,\n '--checkbox-font-color-disabled': field()?.controlStyle?.disableColor,\n '--checkbox-bg-color-disabled': field()?.controlStyle?.disableBackground\n }\">\n {{ field()?.label }}\n <span [innerHTML]=\"field()?.configData?.innerHTML\"></span>\n <span [appTooltipTemplate]=\"HtmlContent\" arrowPosition=\"left\" tooltipPosition=\"bottom\">\n <img [src]=\"field().imageUrl\" class=\"toggle-img mx-1\" />\n </span>\n <ng-template #HtmlContent>\n <span [innerHTML]=\"field().configData?.tooltipMessage\"></span>\n </ng-template>\n</mat-checkbox>\n}@else {\n<mat-checkbox *ngIf=\"field() && field()?.isVisible\" [class]=\"field()?.fieldName\" [name]=\"field()?.fieldName\" [id]=\"this.masterService.replaceSpacesWithUnderscores(field()?.label)\"\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
1583
  }], ctorParameters: () => [{ type: MasterControlService }], propDecorators: { change: [{
1579
1584
  type: Output
1580
1585
  }] } });
@@ -1627,7 +1632,7 @@ class TextareaComponent {
1627
1632
  useExisting: TextareaComponent,
1628
1633
  multi: true
1629
1634
  }
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()?.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 (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()?.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 (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 }] });
1635
+ ], 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()?.fieldName\"\n [id]=\"this.masterService.replaceSpacesWithUnderscores(field()?.label)\"\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()?.fieldName\"\n [id]=\"this.masterService.replaceSpacesWithUnderscores(field()?.label)\"\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: i5.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: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormsModule }] });
1631
1636
  }
1632
1637
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TextareaComponent, decorators: [{
1633
1638
  type: Component,
@@ -1641,7 +1646,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
1641
1646
  useExisting: TextareaComponent,
1642
1647
  multi: true
1643
1648
  }
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()?.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 (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()?.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 (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"] }]
1649
+ ], 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()?.fieldName\"\n [id]=\"this.masterService.replaceSpacesWithUnderscores(field()?.label)\"\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()?.fieldName\"\n [id]=\"this.masterService.replaceSpacesWithUnderscores(field()?.label)\"\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
1650
  }], ctorParameters: () => [{ type: MasterControlService }], propDecorators: { blur: [{
1646
1651
  type: Output
1647
1652
  }] } });
@@ -1662,7 +1667,7 @@ class TabComponent {
1662
1667
  this.field().selectedIndex = this.selectedIndex;
1663
1668
  }
1664
1669
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TabComponent, deps: [{ token: MasterControlService }], target: i0.ɵɵFactoryTarget.Component });
1665
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: TabComponent, isStandalone: true, selector: "lib-tab", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { selectedIndexChange: "selectedIndexChange" }, ngImport: i0, template: "<mat-tab-group *ngIf=\"field() && field()?.isVisible\" class=\"vertical-tab-indicator\"\n[ngClass]=\"{'vertical-class': field()?.configData?.isVerticalTab && field()?.configData?.isVerticalTab === 'true'}\"\n[ngStyle]=\"{\n '--tab-border-color': field()?.controlStyle?.borderColor ,\n '--tab-border-width': field()?.controlStyle?.borderWidth,\n '--tab-font-size': field()?.controlStyle?.fontSize,\n '--tab-font-weight': field()?.controlStyle?.fontWeight,\n '--tab-font-color': field()?.controlStyle?.color,\n }\"\n[(selectedIndex)]=\"selectedIndex\" (selectedIndexChange)=\"onTabChange($event)\">\n <mat-tab *ngFor=\"let data of field()?.options; let i = index\">\n <ng-template mat-tab-label>\n <img [src]=\"data.value\" alt=\"\" class=\"mx-2\">\n {{ data.label }}\n </ng-template>\n <ng-content select=\"tab[i]\"></ng-content>\n </mat-tab>\n</mat-tab-group>\n", styles: ["*{font-family:mulish!important}::ng-deep .mat-mdc-tab.mdc-tab--active .mdc-tab__text-label{font-weight:var(--tab-font-weight, 800)!important}::ng-deep .mdc-tab__text-label{font-size:var(--tab-font-size, 16px)!important;color:var(--tab-font-color, #444)!important}::ng-deep .mat-mdc-tab-group .mdc-tab-indicator__content--underline{border-color:var(--tab-border-color, #FFBB00)!important;border-width:var(--tab-border-width, 3px)!important;border-top-left-radius:6px!important;border-top-right-radius:6px!important}::ng-deep .mat-mdc-tab-label-container{border-bottom:1px solid #dadada!important}::ng-deep .vertical-class .mdc-tab-indicator .mdc-tab-indicator__content{border:none!important}::ng-deep .vertical-class .mat-mdc-tab.mdc-tab--active .mat-mdc-tab-ripple{border-right:var(--tab-border-width, 4px) solid var(--tab-border-color, #ffbb00)!important;box-shadow:0 2px 4px #00000015;border-left:1px solid #DDDDDD;border-top:1px solid #DDDDDD;border-bottom:1px solid #DDDDDD;background:#fff!important}::ng-deep .vertical-class .mdc-tab-indicator__content .mdc-tab-indicator__content--underline{border:none!important}::ng-deep .vertical-class .mat-mdc-tab-labels{display:table-row!important;background:#fafafa!important}\n"], dependencies: [{ kind: "ngmodule", type: MatTabsModule }, { kind: "directive", type: i2$3.MatTabLabel, selector: "[mat-tab-label], [matTabLabel]" }, { kind: "component", type: i2$3.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "component", type: i2$3.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { 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"] }] });
1670
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: TabComponent, isStandalone: true, selector: "lib-tab", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { selectedIndexChange: "selectedIndexChange" }, ngImport: i0, template: "<mat-tab-group *ngIf=\"field() && field()?.isVisible\" class=\"vertical-tab-indicator\"\n[ngClass]=\"{'vertical-class': field()?.configData?.isVerticalTab && field()?.configData?.isVerticalTab === 'true'}\"\n[ngStyle]=\"{\n '--tab-border-color': field()?.controlStyle?.borderColor ,\n '--tab-border-width': field()?.controlStyle?.borderWidth,\n '--tab-font-size': field()?.controlStyle?.fontSize,\n '--tab-font-weight': field()?.controlStyle?.fontWeight,\n '--tab-font-color': field()?.controlStyle?.color,\n }\"\n[(selectedIndex)]=\"selectedIndex\" (selectedIndexChange)=\"onTabChange($event)\">\n <mat-tab *ngFor=\"let data of field()?.options; let i = index\">\n <ng-template mat-tab-label>\n <img [src]=\"data.value\" alt=\"\" class=\"mx-2\">\n {{ data.label }}\n </ng-template>\n <ng-content select=\"tab[i]\"></ng-content>\n </mat-tab>\n</mat-tab-group>\n", styles: ["*{font-family:mulish!important}::ng-deep .mat-mdc-tab.mdc-tab--active .mdc-tab__text-label{font-weight:var(--tab-font-weight, 800)!important}::ng-deep .mdc-tab__text-label{font-size:var(--tab-font-size, 16px)!important;color:var(--tab-font-color, #444)!important}::ng-deep .mat-mdc-tab-group .mdc-tab-indicator__content--underline{border-color:var(--tab-border-color, #FFBB00)!important;border-width:var(--tab-border-width, 3px)!important;border-top-left-radius:6px!important;border-top-right-radius:6px!important}::ng-deep .mat-mdc-tab-label-container{border-bottom:1px solid #dadada!important}::ng-deep .vertical-class .mdc-tab-indicator .mdc-tab-indicator__content{border:none!important}::ng-deep .vertical-class .mat-mdc-tab.mdc-tab--active .mat-mdc-tab-ripple{border-right:var(--tab-border-width, 4px) solid var(--tab-border-color, #ffbb00)!important;box-shadow:0 2px 4px #00000015;border-left:1px solid #DDDDDD;border-top:1px solid #DDDDDD;border-bottom:1px solid #DDDDDD;background:#fff!important}::ng-deep .vertical-class .mdc-tab-indicator__content .mdc-tab-indicator__content--underline{border:none!important}::ng-deep .vertical-class .mat-mdc-tab-labels{display:table-row!important;background:#fafafa!important}\n"], dependencies: [{ kind: "ngmodule", type: MatTabsModule }, { kind: "directive", type: i2$2.MatTabLabel, selector: "[mat-tab-label], [matTabLabel]" }, { kind: "component", type: i2$2.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "component", type: i2$2.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { 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"] }] });
1666
1671
  }
1667
1672
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TabComponent, decorators: [{
1668
1673
  type: Component,
@@ -1830,7 +1835,7 @@ class AutocompleteComponent {
1830
1835
  useExisting: AutocompleteComponent,
1831
1836
  multi: true
1832
1837
  }
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"] }] });
1838
+ ], 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]=\"this.masterService.replaceSpacesWithUnderscores(field()?.label)\"\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]=\"this.masterService.replaceSpacesWithUnderscores(field()?.label)\"\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: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.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$3.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: i4.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i5$3.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: i5.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: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
1834
1839
  }
1835
1840
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AutocompleteComponent, decorators: [{
1836
1841
  type: Component,
@@ -1848,7 +1853,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
1848
1853
  useExisting: AutocompleteComponent,
1849
1854
  multi: true
1850
1855
  }
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"] }]
1856
+ ], 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]=\"this.masterService.replaceSpacesWithUnderscores(field()?.label)\"\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]=\"this.masterService.replaceSpacesWithUnderscores(field()?.label)\"\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
1857
  }], ctorParameters: () => [{ type: MasterControlService }], propDecorators: { blur: [{
1853
1858
  type: Output
1854
1859
  }], selectionChanged: [{
@@ -1958,7 +1963,7 @@ class MultipleSelectComponent {
1958
1963
  useExisting: MultipleSelectComponent,
1959
1964
  multi: true
1960
1965
  }
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"] }] });
1966
+ ], 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]=\"this.masterService.replaceSpacesWithUnderscores(field()?.label)\"\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]=\"this.masterService.replaceSpacesWithUnderscores(field()?.label) + '_' + 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]=\"this.masterService.replaceSpacesWithUnderscores(field()?.label)\"\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]=\"this.masterService.replaceSpacesWithUnderscores(field()?.label) + '_' + 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: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: i3$1.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$1.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i4.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.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.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i6.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i6.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: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
1962
1967
  }
1963
1968
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MultipleSelectComponent, decorators: [{
1964
1969
  type: Component,
@@ -1975,7 +1980,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
1975
1980
  useExisting: MultipleSelectComponent,
1976
1981
  multi: true
1977
1982
  }
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"] }]
1983
+ ], 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]=\"this.masterService.replaceSpacesWithUnderscores(field()?.label)\"\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]=\"this.masterService.replaceSpacesWithUnderscores(field()?.label) + '_' + 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]=\"this.masterService.replaceSpacesWithUnderscores(field()?.label)\"\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]=\"this.masterService.replaceSpacesWithUnderscores(field()?.label) + '_' + 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"] }]
1979
1984
  }], ctorParameters: () => [{ type: MasterControlService }], propDecorators: { selectionChange: [{
1980
1985
  type: Output
1981
1986
  }] } });
@@ -2068,7 +2073,7 @@ class SelectTextboxComponent {
2068
2073
  useExisting: SelectTextboxComponent,
2069
2074
  multi: true
2070
2075
  }
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"] }] });
2076
+ ], 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]=\"this.masterControlService.replaceSpacesWithUnderscores(field()?.label)\"\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]=\"this.masterControlService.replaceSpacesWithUnderscores(field()?.label)\"\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: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i3$1.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: i4.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: i5.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: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i5.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: CustomizedTooltipDirective, selector: "[appTooltipTemplate]", inputs: ["appTooltipTemplate"] }] });
2072
2077
  }
2073
2078
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SelectTextboxComponent, decorators: [{
2074
2079
  type: Component,
@@ -2078,11 +2083,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
2078
2083
  useExisting: SelectTextboxComponent,
2079
2084
  multi: true
2080
2085
  }
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"] }]
2086
+ ], 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]=\"this.masterControlService.replaceSpacesWithUnderscores(field()?.label)\"\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]=\"this.masterControlService.replaceSpacesWithUnderscores(field()?.label)\"\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
2087
  }], ctorParameters: () => [{ type: MasterControlService }] });
2083
2088
 
2084
2089
  class OtpTextboxComponent {
2085
- constructor() { }
2090
+ service;
2091
+ constructor(service) {
2092
+ this.service = service;
2093
+ }
2086
2094
  field = input.required();
2087
2095
  inputValue = null;
2088
2096
  reactiveFormControlobject = input();
@@ -2109,14 +2117,14 @@ class OtpTextboxComponent {
2109
2117
  onInputBlur() {
2110
2118
  this._unTouched();
2111
2119
  }
2112
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: OtpTextboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
2120
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: OtpTextboxComponent, deps: [{ token: MasterControlService }], target: i0.ɵɵFactoryTarget.Component });
2113
2121
  static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: OtpTextboxComponent, isStandalone: true, selector: "lib-otp-textbox", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, reactiveFormControlobject: { classPropertyName: "reactiveFormControlobject", publicName: "reactiveFormControlobject", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
2114
2122
  {
2115
2123
  provide: NG_VALUE_ACCESSOR,
2116
2124
  useExisting: OtpTextboxComponent,
2117
2125
  multi: true
2118
2126
  }
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"] }] });
2127
+ ], 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]=\"this.service.replaceSpacesWithUnderscores(field()?.label)\"\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]=\"this.service.replaceSpacesWithUnderscores(field()?.label)\"\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: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.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: i5$2.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: i5.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: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i5.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
2120
2128
  }
2121
2129
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: OtpTextboxComponent, decorators: [{
2122
2130
  type: Component,
@@ -2133,8 +2141,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
2133
2141
  useExisting: OtpTextboxComponent,
2134
2142
  multi: true
2135
2143
  }
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()?.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"] }]
2137
- }], ctorParameters: () => [] });
2144
+ ], 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]=\"this.service.replaceSpacesWithUnderscores(field()?.label)\"\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]=\"this.service.replaceSpacesWithUnderscores(field()?.label)\"\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"] }]
2145
+ }], ctorParameters: () => [{ type: MasterControlService }] });
2138
2146
 
2139
2147
  class AmountTextboxComponent {
2140
2148
  sharedService;
@@ -2331,7 +2339,7 @@ class AmountTextboxComponent {
2331
2339
  useExisting: AmountTextboxComponent,
2332
2340
  multi: true
2333
2341
  }
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()?.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 (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()?.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 (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"] }] });
2342
+ ], 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()?.fieldName\"\n [id]=\"this.sharedService.replaceSpacesWithUnderscores(field()?.label)\"\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()?.fieldName\"\n [id]=\"this.sharedService.replaceSpacesWithUnderscores(field()?.label)\"\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: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i3.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: i5.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: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i5.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
2335
2343
  }
2336
2344
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AmountTextboxComponent, decorators: [{
2337
2345
  type: Component,
@@ -2346,12 +2354,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
2346
2354
  useExisting: AmountTextboxComponent,
2347
2355
  multi: true
2348
2356
  }
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()?.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 (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()?.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 (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"] }]
2357
+ ], 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()?.fieldName\"\n [id]=\"this.sharedService.replaceSpacesWithUnderscores(field()?.label)\"\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()?.fieldName\"\n [id]=\"this.sharedService.replaceSpacesWithUnderscores(field()?.label)\"\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
2358
  }], ctorParameters: () => [{ type: MasterControlService }], propDecorators: { blur: [{
2351
2359
  type: Output
2352
2360
  }] } });
2353
2361
 
2354
2362
  class SuffixTextboxComponent {
2363
+ service;
2364
+ constructor(service) {
2365
+ this.service = service;
2366
+ }
2355
2367
  field = input.required();
2356
2368
  inputValue = null;
2357
2369
  reactiveFormControlobject = input();
@@ -2381,14 +2393,14 @@ class SuffixTextboxComponent {
2381
2393
  this._unTouched();
2382
2394
  this.blur.emit(event);
2383
2395
  }
2384
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SuffixTextboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
2396
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SuffixTextboxComponent, deps: [{ token: MasterControlService }], target: i0.ɵɵFactoryTarget.Component });
2385
2397
  static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: SuffixTextboxComponent, isStandalone: true, selector: "lib-suffix-textbox", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, reactiveFormControlobject: { classPropertyName: "reactiveFormControlobject", publicName: "reactiveFormControlobject", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { blur: "blur" }, providers: [
2386
2398
  {
2387
2399
  provide: NG_VALUE_ACCESSOR,
2388
2400
  useExisting: SuffixTextboxComponent,
2389
2401
  multi: true
2390
2402
  }
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"] }] });
2403
+ ], 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]=\"this.service.replaceSpacesWithUnderscores(field()?.label)\" [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]=\"this.service.replaceSpacesWithUnderscores(field()?.label)\" [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: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.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: i5$2.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: i5.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: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i5.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: CustomizedTooltipDirective, selector: "[appTooltipTemplate]", inputs: ["appTooltipTemplate"] }] });
2392
2404
  }
2393
2405
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SuffixTextboxComponent, decorators: [{
2394
2406
  type: Component,
@@ -2405,12 +2417,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
2405
2417
  useExisting: SuffixTextboxComponent,
2406
2418
  multi: true
2407
2419
  }
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()?.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"] }]
2409
- }], propDecorators: { blur: [{
2420
+ ], 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]=\"this.service.replaceSpacesWithUnderscores(field()?.label)\" [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]=\"this.service.replaceSpacesWithUnderscores(field()?.label)\" [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"] }]
2421
+ }], ctorParameters: () => [{ type: MasterControlService }], propDecorators: { blur: [{
2410
2422
  type: Output
2411
2423
  }] } });
2412
2424
 
2413
2425
  class OtpMobNumberComponent {
2426
+ service;
2427
+ constructor(service) {
2428
+ this.service = service;
2429
+ }
2414
2430
  CountryCode = '+91';
2415
2431
  field = input.required();
2416
2432
  inputValue = null;
@@ -2438,14 +2454,14 @@ class OtpMobNumberComponent {
2438
2454
  onInputBlur() {
2439
2455
  this._unTouched();
2440
2456
  }
2441
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: OtpMobNumberComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
2457
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: OtpMobNumberComponent, deps: [{ token: MasterControlService }], target: i0.ɵɵFactoryTarget.Component });
2442
2458
  static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: OtpMobNumberComponent, isStandalone: true, selector: "lib-otp-mob-number", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, reactiveFormControlobject: { classPropertyName: "reactiveFormControlobject", publicName: "reactiveFormControlobject", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
2443
2459
  {
2444
2460
  provide: NG_VALUE_ACCESSOR,
2445
2461
  useExisting: OtpMobNumberComponent,
2446
2462
  multi: true
2447
2463
  }
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"] }] });
2464
+ ], 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]=\"this.service.replaceSpacesWithUnderscores(field()?.label)\"\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]=\"this.service.replaceSpacesWithUnderscores(field()?.label)\"\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: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i3.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: i5.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: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i5.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
2449
2465
  }
2450
2466
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: OtpMobNumberComponent, decorators: [{
2451
2467
  type: Component,
@@ -2460,10 +2476,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
2460
2476
  useExisting: OtpMobNumberComponent,
2461
2477
  multi: true
2462
2478
  }
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()?.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"] }]
2464
- }] });
2479
+ ], 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]=\"this.service.replaceSpacesWithUnderscores(field()?.label)\"\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]=\"this.service.replaceSpacesWithUnderscores(field()?.label)\"\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"] }]
2480
+ }], ctorParameters: () => [{ type: MasterControlService }] });
2465
2481
 
2466
2482
  class TagMobNumberComponent {
2483
+ service;
2484
+ constructor(service) {
2485
+ this.service = service;
2486
+ }
2467
2487
  CountryCode = '+91';
2468
2488
  field = input.required();
2469
2489
  inputValue = null;
@@ -2491,14 +2511,14 @@ class TagMobNumberComponent {
2491
2511
  onInputBlur() {
2492
2512
  this._unTouched();
2493
2513
  }
2494
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TagMobNumberComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
2514
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TagMobNumberComponent, deps: [{ token: MasterControlService }], target: i0.ɵɵFactoryTarget.Component });
2495
2515
  static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: TagMobNumberComponent, isStandalone: true, selector: "lib-tag-mob-number", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, reactiveFormControlobject: { classPropertyName: "reactiveFormControlobject", publicName: "reactiveFormControlobject", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
2496
2516
  {
2497
2517
  provide: NG_VALUE_ACCESSOR,
2498
2518
  useExisting: TagMobNumberComponent,
2499
2519
  multi: true
2500
2520
  }
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"] }] });
2521
+ ], 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]=\"this.service.replaceSpacesWithUnderscores(field()?.label)\"\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]=\"this.service.replaceSpacesWithUnderscores(field()?.label)\"\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: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.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: i5$2.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: i5.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: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i5.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
2502
2522
  }
2503
2523
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TagMobNumberComponent, decorators: [{
2504
2524
  type: Component,
@@ -2514,8 +2534,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
2514
2534
  useExisting: TagMobNumberComponent,
2515
2535
  multi: true
2516
2536
  }
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()?.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"] }]
2518
- }] });
2537
+ ], 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]=\"this.service.replaceSpacesWithUnderscores(field()?.label)\"\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]=\"this.service.replaceSpacesWithUnderscores(field()?.label)\"\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"] }]
2538
+ }], ctorParameters: () => [{ type: MasterControlService }] });
2519
2539
 
2520
2540
  class AgeDateComponent {
2521
2541
  service;
@@ -2698,7 +2718,7 @@ class AgeDateComponent {
2698
2718
  useExisting: AgeDateComponent,
2699
2719
  multi: true
2700
2720
  },
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"] }] });
2721
+ ], 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]=\"this.service.replaceSpacesWithUnderscores(field()?.label)\"\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]=\"this.service.replaceSpacesWithUnderscores(field()?.label)\"\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: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.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$1.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i5$1.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i5$1.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "directive", type: i5$1.MatDatepickerToggleIcon, selector: "[matDatepickerToggleIcon]" }, { kind: "ngmodule", type: MomentDateModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i5.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: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i5.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
2702
2722
  }
2703
2723
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AgeDateComponent, decorators: [{
2704
2724
  type: Component,
@@ -2734,7 +2754,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
2734
2754
  useExisting: AgeDateComponent,
2735
2755
  multi: true
2736
2756
  },
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()?.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"] }]
2757
+ ], 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]=\"this.service.replaceSpacesWithUnderscores(field()?.label)\"\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]=\"this.service.replaceSpacesWithUnderscores(field()?.label)\"\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
2758
  }], ctorParameters: () => [{ type: MasterControlService }], propDecorators: { blur: [{
2739
2759
  type: Output
2740
2760
  }], valueChange: [{
@@ -2756,6 +2776,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
2756
2776
  }] });
2757
2777
 
2758
2778
  class InfoTextboxComponent {
2779
+ service;
2780
+ constructor(service) {
2781
+ this.service = service;
2782
+ }
2759
2783
  field = input.required();
2760
2784
  inputValue = null;
2761
2785
  reactiveFormControlobject = input();
@@ -2787,14 +2811,14 @@ class InfoTextboxComponent {
2787
2811
  handleWhereToFindClick() {
2788
2812
  this.infoClick.emit({ field: this.field });
2789
2813
  }
2790
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: InfoTextboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
2814
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: InfoTextboxComponent, deps: [{ token: MasterControlService }], target: i0.ɵɵFactoryTarget.Component });
2791
2815
  static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: InfoTextboxComponent, isStandalone: true, selector: "lib-info-textbox", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, reactiveFormControlobject: { classPropertyName: "reactiveFormControlobject", publicName: "reactiveFormControlobject", isSignal: true, isRequired: false, transformFunction: null }, fields: { classPropertyName: "fields", publicName: "fields", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { infoClick: "infoClick" }, providers: [
2792
2816
  {
2793
2817
  provide: NG_VALUE_ACCESSOR,
2794
2818
  useExisting: InfoTextboxComponent,
2795
2819
  multi: true
2796
2820
  }
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()?.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\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"] }] });
2821
+ ], 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()?.fieldName\"\n [id]=\"this.service.replaceSpacesWithUnderscores(field()?.label)\"\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]=\"this.service.replaceSpacesWithUnderscores(field()?.label)\"\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: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.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: i5.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: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i5.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
2798
2822
  }
2799
2823
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: InfoTextboxComponent, decorators: [{
2800
2824
  type: Component,
@@ -2809,14 +2833,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
2809
2833
  useExisting: InfoTextboxComponent,
2810
2834
  multi: true
2811
2835
  }
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()?.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\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
- }], propDecorators: { fields: [{
2836
+ ], 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()?.fieldName\"\n [id]=\"this.service.replaceSpacesWithUnderscores(field()?.label)\"\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]=\"this.service.replaceSpacesWithUnderscores(field()?.label)\"\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"] }]
2837
+ }], ctorParameters: () => [{ type: MasterControlService }], propDecorators: { fields: [{
2814
2838
  type: Input
2815
2839
  }], infoClick: [{
2816
2840
  type: Output
2817
2841
  }] } });
2818
2842
 
2819
2843
  class TextboxWithImageComponent {
2844
+ service;
2845
+ constructor(service) {
2846
+ this.service = service;
2847
+ }
2820
2848
  field = input.required();
2821
2849
  inputValue = null;
2822
2850
  reactiveFormControlobject = input();
@@ -2850,14 +2878,14 @@ class TextboxWithImageComponent {
2850
2878
  enableField() {
2851
2879
  this.field().isDisable = false;
2852
2880
  }
2853
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TextboxWithImageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
2881
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TextboxWithImageComponent, deps: [{ token: MasterControlService }], target: i0.ɵɵFactoryTarget.Component });
2854
2882
  static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: TextboxWithImageComponent, isStandalone: true, selector: "lib-textbox-with-image", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, reactiveFormControlobject: { classPropertyName: "reactiveFormControlobject", publicName: "reactiveFormControlobject", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { blur: "blur" }, providers: [
2855
2883
  {
2856
2884
  provide: NG_VALUE_ACCESSOR,
2857
2885
  useExisting: TextboxWithImageComponent,
2858
2886
  multi: true
2859
2887
  }
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()?.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 />\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\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"] }] });
2888
+ ], 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()?.fieldName\"\n [id]=\"this.service.replaceSpacesWithUnderscores(field()?.label)\"\n [placeholder]=\"field()?.placeHolder\"\n [maxLength]=\"field()?.validators?.maxLength\"\n [minLength]=\"field()?.validators?.minLength\"\n [disabled]=\"field()?.isDisable\"\n [required]=\"field()?.validators?.isRequired\"\n [pattern]=\"field()?.validators?.pattern\"\n (input)=\"onInputChange($event)\"\n (blur)=\"onInputBlur($event)\"\n [value]=\"inputValue\"\n [formControl]=\"reactiveFormControlobject()\"\n />\n}@else {\n <input\n matInput\n autocomplete=\"off\"\n [type]=\"field()?.controlType\"\n [name]=\"field()?.fieldName\"\n [id]=\"this.service.replaceSpacesWithUnderscores(field()?.label)\"\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: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.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: i5.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: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i5.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
2861
2889
  }
2862
2890
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TextboxWithImageComponent, decorators: [{
2863
2891
  type: Component,
@@ -2867,12 +2895,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
2867
2895
  useExisting: TextboxWithImageComponent,
2868
2896
  multi: true
2869
2897
  }
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()?.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 />\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\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
- }], propDecorators: { blur: [{
2898
+ ], 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()?.fieldName\"\n [id]=\"this.service.replaceSpacesWithUnderscores(field()?.label)\"\n [placeholder]=\"field()?.placeHolder\"\n [maxLength]=\"field()?.validators?.maxLength\"\n [minLength]=\"field()?.validators?.minLength\"\n [disabled]=\"field()?.isDisable\"\n [required]=\"field()?.validators?.isRequired\"\n [pattern]=\"field()?.validators?.pattern\"\n (input)=\"onInputChange($event)\"\n (blur)=\"onInputBlur($event)\"\n [value]=\"inputValue\"\n [formControl]=\"reactiveFormControlobject()\"\n />\n}@else {\n <input\n matInput\n autocomplete=\"off\"\n [type]=\"field()?.controlType\"\n [name]=\"field()?.fieldName\"\n [id]=\"this.service.replaceSpacesWithUnderscores(field()?.label)\"\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"] }]
2899
+ }], ctorParameters: () => [{ type: MasterControlService }], propDecorators: { blur: [{
2872
2900
  type: Output
2873
2901
  }] } });
2874
2902
 
2875
2903
  class EmailWithDomainComponent {
2904
+ masterService;
2905
+ constructor(masterService) {
2906
+ this.masterService = masterService;
2907
+ }
2876
2908
  pincode = '';
2877
2909
  emailUser = '';
2878
2910
  emailDomain = '';
@@ -2902,14 +2934,14 @@ class EmailWithDomainComponent {
2902
2934
  onInputBlur() {
2903
2935
  this._unTouched();
2904
2936
  }
2905
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: EmailWithDomainComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
2937
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: EmailWithDomainComponent, deps: [{ token: MasterControlService }], target: i0.ɵɵFactoryTarget.Component });
2906
2938
  static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: EmailWithDomainComponent, isStandalone: true, selector: "lib-email-with-domain", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, reactiveFormControlobject: { classPropertyName: "reactiveFormControlobject", publicName: "reactiveFormControlobject", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
2907
2939
  {
2908
2940
  provide: NG_VALUE_ACCESSOR,
2909
2941
  useExisting: EmailWithDomainComponent,
2910
2942
  multi: true
2911
2943
  }
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()?.fieldName + '_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()?.fieldName + '_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\">&#64;</span>\n <input\n matInput\n autocomplete=\"off\"\n [name]=\"field()?.fieldName + '_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"] }] });
2944
+ ], 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()?.fieldName + '_1'\"\n [id]=\"this.masterService.replaceSpacesWithUnderscores(field()?.label) + '_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()?.fieldName + '_1'\"\n [id]=\"this.masterService.replaceSpacesWithUnderscores(field()?.label) + '_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\">&#64;</span>\n <input\n matInput\n autocomplete=\"off\"\n [name]=\"field()?.fieldName + '_2'\"\n [id]=\"this.masterService.replaceSpacesWithUnderscores(field()?.label) + '_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: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i5.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: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i5.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
2913
2945
  }
2914
2946
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: EmailWithDomainComponent, decorators: [{
2915
2947
  type: Component,
@@ -2919,8 +2951,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
2919
2951
  useExisting: EmailWithDomainComponent,
2920
2952
  multi: true
2921
2953
  }
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()?.fieldName + '_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()?.fieldName + '_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\">&#64;</span>\n <input\n matInput\n autocomplete=\"off\"\n [name]=\"field()?.fieldName + '_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
- }] });
2954
+ ], 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()?.fieldName + '_1'\"\n [id]=\"this.masterService.replaceSpacesWithUnderscores(field()?.label) + '_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()?.fieldName + '_1'\"\n [id]=\"this.masterService.replaceSpacesWithUnderscores(field()?.label) + '_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\">&#64;</span>\n <input\n matInput\n autocomplete=\"off\"\n [name]=\"field()?.fieldName + '_2'\"\n [id]=\"this.masterService.replaceSpacesWithUnderscores(field()?.label) + '_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"] }]
2955
+ }], ctorParameters: () => [{ type: MasterControlService }] });
2924
2956
 
2925
2957
  class ImageUploadComponent {
2926
2958
  field = input.required();
@@ -2972,6 +3004,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
2972
3004
  }] });
2973
3005
 
2974
3006
  class TextboxWithUnderscoreComponent {
3007
+ service;
3008
+ constructor(service) {
3009
+ this.service = service;
3010
+ }
2975
3011
  field = input.required();
2976
3012
  inputValue = null;
2977
3013
  reactiveFormControlobject = input();
@@ -3012,14 +3048,14 @@ class TextboxWithUnderscoreComponent {
3012
3048
  getUnderscorePlaceholder() {
3013
3049
  return '_'.repeat(this.field().validators.maxLength);
3014
3050
  }
3015
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TextboxWithUnderscoreComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
3051
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TextboxWithUnderscoreComponent, deps: [{ token: MasterControlService }], target: i0.ɵɵFactoryTarget.Component });
3016
3052
  static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: TextboxWithUnderscoreComponent, isStandalone: true, selector: "lib-textbox-with-underscore", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, reactiveFormControlobject: { classPropertyName: "reactiveFormControlobject", publicName: "reactiveFormControlobject", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
3017
3053
  {
3018
3054
  provide: NG_VALUE_ACCESSOR,
3019
3055
  useExisting: TextboxWithUnderscoreComponent,
3020
3056
  multi: true
3021
3057
  }
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()?.fieldName\"\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()?.fieldName\"\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"] }] });
3058
+ ], 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()?.fieldName\"\n [id]=\"this.service.replaceSpacesWithUnderscores(field()?.label)\"\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()?.fieldName\"\n [id]=\"this.service.replaceSpacesWithUnderscores(field()?.label)\"\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: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i5.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: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i5.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
3023
3059
  }
3024
3060
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TextboxWithUnderscoreComponent, decorators: [{
3025
3061
  type: Component,
@@ -3029,8 +3065,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
3029
3065
  useExisting: TextboxWithUnderscoreComponent,
3030
3066
  multi: true
3031
3067
  }
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()?.fieldName\"\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()?.fieldName\"\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
- }] });
3068
+ ], 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()?.fieldName\"\n [id]=\"this.service.replaceSpacesWithUnderscores(field()?.label)\"\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()?.fieldName\"\n [id]=\"this.service.replaceSpacesWithUnderscores(field()?.label)\"\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"] }]
3069
+ }], ctorParameters: () => [{ type: MasterControlService }] });
3034
3070
 
3035
3071
  class UnderscoreMobNumberComponent {
3036
3072
  CountryCode = '+91';
@@ -3081,7 +3117,7 @@ class UnderscoreMobNumberComponent {
3081
3117
  useExisting: UnderscoreMobNumberComponent,
3082
3118
  multi: true
3083
3119
  }
3084
- ], 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 mobile-field hyphen-input\"\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 <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 [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 [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 <span matSuffix class=\"p-3\">\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}.error-message{color:red}.hyphen-input{letter-spacing:5px!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}::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: "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: "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"] }] });
3120
+ ], 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 mobile-field hyphen-input\"\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 <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 [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 [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 <span matSuffix class=\"p-3\">\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}.error-message{color:red}.hyphen-input{letter-spacing:5px!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}::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: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatSelectModule }, { kind: "ngmodule", type: MatOptionModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i5.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: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i5.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
3085
3121
  }
3086
3122
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UnderscoreMobNumberComponent, decorators: [{
3087
3123
  type: Component,
@@ -3125,7 +3161,7 @@ class StepperComponent {
3125
3161
  this.field().editStepper = this.field().configData.stepperData ? this.field().configData.stepperData : this.masterSharedService?.configData?.stepper?.stepperData;
3126
3162
  }
3127
3163
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: StepperComponent, deps: [{ token: MasterControlService }], target: i0.ɵɵFactoryTarget.Component });
3128
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: StepperComponent, isStandalone: true, selector: "lib-stepper", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div *ngIf=\"field() && field()?.isVisible\">\n <mat-stepper #stepperHeader>\n <ng-container *ngFor=\"let steps of field().editStepper; let i = index\">\n <mat-step>\n <ng-template matStepLabel>\n <img\n class=\"step-img\"\n [src]=\"steps.imgIconUrl\"\n alt=\"\"\n />\n <span class=\"step-label mx-2\">{{steps?.displayLabel}}</span>\n </ng-template>\n </mat-step>\n </ng-container>\n </mat-stepper>\n</div>\n", styles: ["*{font-family:mulish!important}.step-img{width:24px;position:relative;bottom:1px}.step-label{color:#444;font-size:14px;font-weight:600}::ng-deep .mat-step-icon{display:none}::ng-deep .mat-horizontal-stepper-header-container{background:#fff!important}::ng-deep .mat-stepper-horizontal-line{border-top:1px dashed!important}::ng-deep .mat-horizontal-content-container{display:none}\n"], dependencies: [{ kind: "ngmodule", type: MatStepperModule }, { kind: "component", type: i2$4.MatStep, selector: "mat-step", inputs: ["color"], exportAs: ["matStep"] }, { kind: "directive", type: i2$4.MatStepLabel, selector: "[matStepLabel]" }, { kind: "component", type: i2$4.MatStepper, selector: "mat-stepper, mat-vertical-stepper, mat-horizontal-stepper, [matStepper]", inputs: ["disableRipple", "color", "labelPosition", "headerPosition", "animationDuration"], outputs: ["animationDone"], exportAs: ["matStepper", "matVerticalStepper", "matHorizontalStepper"] }, { 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"] }] });
3164
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: StepperComponent, isStandalone: true, selector: "lib-stepper", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div *ngIf=\"field() && field()?.isVisible\">\n <mat-stepper #stepperHeader>\n <ng-container *ngFor=\"let steps of field().editStepper; let i = index\">\n <mat-step>\n <ng-template matStepLabel>\n <img\n class=\"step-img\"\n [src]=\"steps.imgIconUrl\"\n alt=\"\"\n />\n <span class=\"step-label mx-2\">{{steps?.displayLabel}}</span>\n </ng-template>\n </mat-step>\n </ng-container>\n </mat-stepper>\n</div>\n", styles: ["*{font-family:mulish!important}.step-img{width:24px;position:relative;bottom:1px}.step-label{color:#444;font-size:14px;font-weight:600}::ng-deep .mat-step-icon{display:none}::ng-deep .mat-horizontal-stepper-header-container{background:#fff!important}::ng-deep .mat-stepper-horizontal-line{border-top:1px dashed!important}::ng-deep .mat-horizontal-content-container{display:none}\n"], dependencies: [{ kind: "ngmodule", type: MatStepperModule }, { kind: "component", type: i2$3.MatStep, selector: "mat-step", inputs: ["color"], exportAs: ["matStep"] }, { kind: "directive", type: i2$3.MatStepLabel, selector: "[matStepLabel]" }, { kind: "component", type: i2$3.MatStepper, selector: "mat-stepper, mat-vertical-stepper, mat-horizontal-stepper, [matStepper]", inputs: ["disableRipple", "color", "labelPosition", "headerPosition", "animationDuration"], outputs: ["animationDone"], exportAs: ["matStepper", "matVerticalStepper", "matHorizontalStepper"] }, { 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"] }] });
3129
3165
  }
3130
3166
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: StepperComponent, decorators: [{
3131
3167
  type: Component,
@@ -3177,6 +3213,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
3177
3213
  }] });
3178
3214
 
3179
3215
  class SearchMultiSelectComponent {
3216
+ service;
3217
+ constructor(service) {
3218
+ this.service = service;
3219
+ }
3180
3220
  field = input.required();
3181
3221
  selectedValues = [];
3182
3222
  visibleChip = [];
@@ -3257,14 +3297,14 @@ class SearchMultiSelectComponent {
3257
3297
  document.body.style.removeProperty('--custom-select-option-border-radius-focus');
3258
3298
  }
3259
3299
  }
3260
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SearchMultiSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
3300
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SearchMultiSelectComponent, deps: [{ token: MasterControlService }], target: i0.ɵɵFactoryTarget.Component });
3261
3301
  static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: SearchMultiSelectComponent, isStandalone: true, selector: "lib-search-multi-select", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, reactiveFormControlobject: { classPropertyName: "reactiveFormControlobject", publicName: "reactiveFormControlobject", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
3262
3302
  {
3263
3303
  provide: NG_VALUE_ACCESSOR,
3264
3304
  useExisting: SearchMultiSelectComponent,
3265
3305
  multi: true
3266
3306
  }
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"] }] });
3307
+ ], 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]=\"this.service.replaceSpacesWithUnderscores(field()?.label)\"\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]=\"this.service.replaceSpacesWithUnderscores(field()?.label)\"\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: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: i3$1.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$1.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i4.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i4.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.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.MatChipListbox, selector: "mat-chip-listbox", inputs: ["multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "directive", type: i6.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: i5.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: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i5.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: i5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
3268
3308
  }
3269
3309
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SearchMultiSelectComponent, decorators: [{
3270
3310
  type: Component,
@@ -3283,10 +3323,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
3283
3323
  useExisting: SearchMultiSelectComponent,
3284
3324
  multi: true
3285
3325
  }
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"] }]
3287
- }] });
3326
+ ], 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]=\"this.service.replaceSpacesWithUnderscores(field()?.label)\"\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]=\"this.service.replaceSpacesWithUnderscores(field()?.label)\"\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"] }]
3327
+ }], ctorParameters: () => [{ type: MasterControlService }] });
3288
3328
 
3289
3329
  class SubscriptTextboxComponent {
3330
+ service;
3331
+ constructor(service) {
3332
+ this.service = service;
3333
+ }
3290
3334
  inputValue = null;
3291
3335
  field = input.required();
3292
3336
  reactiveFormControlobject = input();
@@ -3313,14 +3357,14 @@ class SubscriptTextboxComponent {
3313
3357
  onInputBlur() {
3314
3358
  this._unTouched();
3315
3359
  }
3316
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SubscriptTextboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
3360
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SubscriptTextboxComponent, deps: [{ token: MasterControlService }], target: i0.ɵɵFactoryTarget.Component });
3317
3361
  static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: SubscriptTextboxComponent, isStandalone: true, selector: "lib-subscript-textbox", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, reactiveFormControlobject: { classPropertyName: "reactiveFormControlobject", publicName: "reactiveFormControlobject", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
3318
3362
  {
3319
3363
  provide: NG_VALUE_ACCESSOR,
3320
3364
  useExisting: SubscriptTextboxComponent,
3321
3365
  multi: true
3322
3366
  }
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()?.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\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"] }] });
3367
+ ], 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()?.fieldName\"\n [id]=\"this.service.replaceSpacesWithUnderscores(field()?.label)\"\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]=\"this.service.replaceSpacesWithUnderscores(field()?.label)\"\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: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.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: i5.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: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i5.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
3324
3368
  }
3325
3369
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SubscriptTextboxComponent, decorators: [{
3326
3370
  type: Component,
@@ -3335,8 +3379,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
3335
3379
  useExisting: SubscriptTextboxComponent,
3336
3380
  multi: true
3337
3381
  }
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()?.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\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
- }] });
3382
+ ], 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()?.fieldName\"\n [id]=\"this.service.replaceSpacesWithUnderscores(field()?.label)\"\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]=\"this.service.replaceSpacesWithUnderscores(field()?.label)\"\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"] }]
3383
+ }], ctorParameters: () => [{ type: MasterControlService }] });
3340
3384
 
3341
3385
  class LabelComponent {
3342
3386
  field = input.required();
@@ -3456,7 +3500,7 @@ class TableComponent {
3456
3500
  this.actionItemClicked.emit(emitOBJ);
3457
3501
  }
3458
3502
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TableComponent, deps: [{ token: MasterControlService }], target: i0.ɵɵFactoryTarget.Component });
3459
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: TableComponent, isStandalone: true, selector: "lib-table", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { actionItemClicked: "actionItemClicked", tablePaginationClicked: "tablePaginationClicked" }, host: { listeners: { "document:keydown.escape": "onEscKey($event)" } }, ngImport: i0, template: "<div class=\"styled-table-container\">\n <ng-container *ngIf=\"field()?.tableData?.tdData && field()?.tableData?.tdData.length > 0\">\n <table *ngIf=\"field()?.tableData?.columnlength && field()?.tableData?.rowlength\" class=\"styled-table\">\n <thead>\n <tr>\n <th *ngIf=\"field()?.tableData?.showCheckBox\"></th>\n <th *ngFor=\"let header of field().tableData?.tableHeaders; let i = index; trackBy: trackByIndex\">\n <ng-container>{{ header?.columnName }}</ng-container>\n </th>\n <th *ngIf=\"field()?.tableData?.showActions\">Action</th>\n </tr>\n </thead>\n <tbody>\n <tr *ngFor=\"let row of field()?.tableData?.tdData;let rowIndex = index\">\n <td *ngIf=\"field()?.tableData?.showCheckBox\"><input type=\"checkbox\"></td>\n <td *ngFor=\"let cell of row\">{{ cell }}</td>\n <td *ngIf=\"field()?.tableData?.showActions\">\n <button class=\"action-btn\" (click)=\"openActionsPopup($event, rowIndex)\" [disabled]=\"readonly()\">\n <mat-icon>more_vert</mat-icon>\n </button>\n </td>\n </tr>\n </tbody>\n </table>\n <ng-container *ngIf=\"field()?.tableData?.showPagination\">\n <mat-paginator class=\"custom-paginator\" [length]=\"field()?.tableData?.totalItems\"\n [pageSize]=\"field()?.tableData?.paginationSize\" [pageSizeOptions]=\"[5, 10, 25, 100]\"\n (page)=\"pageChanged($event)\" aria-label=\"Select page\">\n </mat-paginator>\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"field()?.tableData?.tdData && field()?.tableData?.tdData.length === 0\">\n <div class=\"tableEmptyData\">\n <p class=\"tableemptyDataMessage\">No matching records found for the given search input.</p>\n </div>\n </ng-container>\n</div>\n\n<div *ngIf=\"showActionsPopup\" class=\"actions-popup-backdrop\" (click)=\"closeActionsPopup()\">\n <div class=\"actions-popup-menu\" [ngStyle]=\"{'top.px': popupPosition.top, 'left.px': popupPosition.left}\"\n (click)=\"$event.stopPropagation()\">\n <div class=\"makeArrow\" [ngStyle]=\"{'left.px': popupPosition.left+25}\"></div>\n <ul>\n <li *ngFor=\"let actionData of field().tableData?.userSelectedOptions[selectedRow];let actionIndex = index\"\n [matTooltip]=\"actionData?.displayTitle\" matTooltipPosition=\"above\"\n (click)=\"actionClicked(actionData,actionIndex)\">\n <mat-icon>{{actionData?.matIconName}}</mat-icon>\n {{actionData?.displayTitle}}\n </li>\n </ul>\n </div>\n</div>", styles: [".styled-table{width:100%;margin:16px 0;font-size:1em;box-shadow:0 0 8px #0000001a}*{font-family:mulish!important}.styled-table th,.styled-table td{border:none;padding:8px 12px;text-align:left}.styled-table thead tr{background-color:#444;color:#fff}.styled-table tbody tr:nth-child(2n){background-color:#f3f3f3}.styled-table tbody tr:hover{background-color:#e0f7fa}.custom_input{width:100%;border:none;background:transparent;font-weight:700;color:#fff}.styled-table th:first-child{border-top-left-radius:8px}.styled-table th:last-child{border-top-right-radius:8px}.popup-backdrop{position:fixed;top:0;left:0;width:100vw;height:100vh;background:#0000004d;display:flex;align-items:center;justify-content:center;z-index:1000}.action-btn{background:none;border:none;cursor:pointer;padding:0}.actions-popup-backdrop{position:fixed;inset:0;background:transparent;z-index:1000}.actions-popup-menu{position:absolute;min-width:260px;background:#fff;border-radius:12px;box-shadow:0 4px 24px #0000002e;padding:0;z-index:1001;color:#333;font-family:inherit;border:1px solid #DDDDDD}.actions-popup-menu ul{list-style:none;margin:0;padding:0 0 8px}.actions-popup-menu li{display:flex;align-items:center;padding:10px 20px;cursor:pointer;font-size:15px;transition:background .2s;border-bottom:1px dashed #DADADA}.actions-popup-menu li mat-icon{margin-right:12px;font-size:20px}.actions-popup-menu li.selected,.actions-popup-menu li:hover{background:#fff6d1;color:#222}.styled-table-container{max-width:100%;overflow-x:auto;max-height:400px;overflow-y:auto}.makeArrow{width:0;height:0;border-top:12px solid transparent;border-bottom:12px solid transparent;border-left:16px solid #fff;border-right:none;position:absolute;top:10px}:host ::ng-deep .custom-paginator .mdc-text-field--outlined .mdc-notched-outline{display:none!important}.material-icons{font-family:Material Icons!important}.tableEmptyData{width:100%;height:50px;text-align:center;background:#faebd7}.tableemptyDataMessage{position:relative;top:14px;font-size:16px;font-weight:600;color:olive}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i5$2.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }] });
3503
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: TableComponent, isStandalone: true, selector: "lib-table", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { actionItemClicked: "actionItemClicked", tablePaginationClicked: "tablePaginationClicked" }, host: { listeners: { "document:keydown.escape": "onEscKey($event)" } }, ngImport: i0, template: "<div class=\"styled-table-container\">\n <ng-container *ngIf=\"field()?.tableData?.tdData && field()?.tableData?.tdData.length > 0\">\n <table *ngIf=\"field()?.tableData?.columnlength && field()?.tableData?.rowlength\" class=\"styled-table\">\n <thead>\n <tr>\n <th *ngIf=\"field()?.tableData?.showCheckBox\"></th>\n <th *ngFor=\"let header of field().tableData?.tableHeaders; let i = index; trackBy: trackByIndex\">\n <ng-container>{{ header?.columnName }}</ng-container>\n </th>\n <th *ngIf=\"field()?.tableData?.showActions\">Action</th>\n </tr>\n </thead>\n <tbody>\n <tr *ngFor=\"let row of field()?.tableData?.tdData;let rowIndex = index\">\n <td *ngIf=\"field()?.tableData?.showCheckBox\"><input type=\"checkbox\"></td>\n <td *ngFor=\"let cell of row\">{{ cell }}</td>\n <td *ngIf=\"field()?.tableData?.showActions\">\n <button class=\"action-btn\" (click)=\"openActionsPopup($event, rowIndex)\" [disabled]=\"readonly()\">\n <mat-icon>more_vert</mat-icon>\n </button>\n </td>\n </tr>\n </tbody>\n </table>\n <ng-container *ngIf=\"field()?.tableData?.showPagination\">\n <mat-paginator class=\"custom-paginator\" [length]=\"field()?.tableData?.totalItems\"\n [pageSize]=\"field()?.tableData?.paginationSize\" [pageSizeOptions]=\"[5, 10, 25, 100]\"\n (page)=\"pageChanged($event)\" aria-label=\"Select page\">\n </mat-paginator>\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"field()?.tableData?.tdData && field()?.tableData?.tdData.length === 0\">\n <div class=\"tableEmptyData\">\n <p class=\"tableemptyDataMessage\">No matching records found for the given search input.</p>\n </div>\n </ng-container>\n</div>\n\n<div *ngIf=\"showActionsPopup\" class=\"actions-popup-backdrop\" (click)=\"closeActionsPopup()\">\n <div class=\"actions-popup-menu\" [ngStyle]=\"{'top.px': popupPosition.top, 'left.px': popupPosition.left}\"\n (click)=\"$event.stopPropagation()\">\n <div class=\"makeArrow\" [ngStyle]=\"{'left.px': popupPosition.left+25}\"></div>\n <ul>\n <li *ngFor=\"let actionData of field().tableData?.userSelectedOptions[selectedRow];let actionIndex = index\"\n [matTooltip]=\"actionData?.displayTitle\" matTooltipPosition=\"above\"\n (click)=\"actionClicked(actionData,actionIndex)\">\n <mat-icon>{{actionData?.matIconName}}</mat-icon>\n {{actionData?.displayTitle}}\n </li>\n </ul>\n </div>\n</div>", styles: [".styled-table{width:100%;margin:16px 0;font-size:1em;box-shadow:0 0 8px #0000001a}*{font-family:mulish!important}.styled-table th,.styled-table td{border:none;padding:8px 12px;text-align:left}.styled-table thead tr{background-color:#444;color:#fff}.styled-table tbody tr:nth-child(2n){background-color:#f3f3f3}.styled-table tbody tr:hover{background-color:#e0f7fa}.custom_input{width:100%;border:none;background:transparent;font-weight:700;color:#fff}.styled-table th:first-child{border-top-left-radius:8px}.styled-table th:last-child{border-top-right-radius:8px}.popup-backdrop{position:fixed;top:0;left:0;width:100vw;height:100vh;background:#0000004d;display:flex;align-items:center;justify-content:center;z-index:1000}.action-btn{background:none;border:none;cursor:pointer;padding:0}.actions-popup-backdrop{position:fixed;inset:0;background:transparent;z-index:1000}.actions-popup-menu{position:absolute;min-width:260px;background:#fff;border-radius:12px;box-shadow:0 4px 24px #0000002e;padding:0;z-index:1001;color:#333;font-family:inherit;border:1px solid #DDDDDD}.actions-popup-menu ul{list-style:none;margin:0;padding:0 0 8px}.actions-popup-menu li{display:flex;align-items:center;padding:10px 20px;cursor:pointer;font-size:15px;transition:background .2s;border-bottom:1px dashed #DADADA}.actions-popup-menu li mat-icon{margin-right:12px;font-size:20px}.actions-popup-menu li.selected,.actions-popup-menu li:hover{background:#fff6d1;color:#222}.styled-table-container{max-width:100%;overflow-x:auto;max-height:400px;overflow-y:auto}.makeArrow{width:0;height:0;border-top:12px solid transparent;border-bottom:12px solid transparent;border-left:16px solid #fff;border-right:none;position:absolute;top:10px}:host ::ng-deep .custom-paginator .mdc-text-field--outlined .mdc-notched-outline{display:none!important}.material-icons{font-family:Material Icons!important}.tableEmptyData{width:100%;height:50px;text-align:center;background:#faebd7}.tableemptyDataMessage{position:relative;top:14px;font-size:16px;font-weight:600;color:olive}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i5$4.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }] });
3460
3504
  }
3461
3505
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TableComponent, decorators: [{
3462
3506
  type: Component,
@@ -3471,6 +3515,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
3471
3515
  }] } });
3472
3516
 
3473
3517
  class TextboxWithTextComponent {
3518
+ service;
3519
+ constructor(service) {
3520
+ this.service = service;
3521
+ }
3474
3522
  inputValue = null;
3475
3523
  reactiveFormControlobject = input();
3476
3524
  field = input.required();
@@ -3495,14 +3543,14 @@ class TextboxWithTextComponent {
3495
3543
  this._unTouched();
3496
3544
  this.blur.emit(event);
3497
3545
  }
3498
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TextboxWithTextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
3546
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TextboxWithTextComponent, deps: [{ token: MasterControlService }], target: i0.ɵɵFactoryTarget.Component });
3499
3547
  static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: TextboxWithTextComponent, isStandalone: true, selector: "lib-textbox-with-text", inputs: { reactiveFormControlobject: { classPropertyName: "reactiveFormControlobject", publicName: "reactiveFormControlobject", isSignal: true, isRequired: false, transformFunction: null }, field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { blur: "blur" }, providers: [
3500
3548
  {
3501
3549
  provide: NG_VALUE_ACCESSOR,
3502
3550
  useExisting: TextboxWithTextComponent,
3503
3551
  multi: true,
3504
3552
  },
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()?.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 />\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\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"] }] });
3553
+ ], 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()?.fieldName\"\n [id]=\"this.service.replaceSpacesWithUnderscores(field()?.label)\"\n [placeholder]=\"field()?.placeHolder\"\n [maxLength]=\"field()?.validators?.maxLength\"\n [minLength]=\"field()?.validators?.minLength\"\n [disabled]=\"field()?.isDisable\"\n [required]=\"field()?.validators?.isRequired\"\n [pattern]=\"field()?.validators?.pattern\"\n (input)=\"onInputChange($event)\"\n (blur)=\"onInputBlur($event)\"\n [value]=\"inputValue\"\n [formControl]=\"reactiveFormControlobject()\"\n />\n }@else {\n <input\n matInput\n autocomplete=\"off\"\n [type]=\"field()?.controlType\"\n [name]=\"field()?.fieldName\"\n [id]=\"this.service.replaceSpacesWithUnderscores(field()?.label)\"\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: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.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: i5.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: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i5.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
3506
3554
  }
3507
3555
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TextboxWithTextComponent, decorators: [{
3508
3556
  type: Component,
@@ -3517,8 +3565,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
3517
3565
  useExisting: TextboxWithTextComponent,
3518
3566
  multi: true,
3519
3567
  },
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()?.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 />\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\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
- }], propDecorators: { blur: [{
3568
+ ], 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()?.fieldName\"\n [id]=\"this.service.replaceSpacesWithUnderscores(field()?.label)\"\n [placeholder]=\"field()?.placeHolder\"\n [maxLength]=\"field()?.validators?.maxLength\"\n [minLength]=\"field()?.validators?.minLength\"\n [disabled]=\"field()?.isDisable\"\n [required]=\"field()?.validators?.isRequired\"\n [pattern]=\"field()?.validators?.pattern\"\n (input)=\"onInputChange($event)\"\n (blur)=\"onInputBlur($event)\"\n [value]=\"inputValue\"\n [formControl]=\"reactiveFormControlobject()\"\n />\n }@else {\n <input\n matInput\n autocomplete=\"off\"\n [type]=\"field()?.controlType\"\n [name]=\"field()?.fieldName\"\n [id]=\"this.service.replaceSpacesWithUnderscores(field()?.label)\"\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"] }]
3569
+ }], ctorParameters: () => [{ type: MasterControlService }], propDecorators: { blur: [{
3522
3570
  type: Output
3523
3571
  }] } });
3524
3572
 
@@ -3628,10 +3676,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
3628
3676
 
3629
3677
  class IframeComponent {
3630
3678
  sanitizer;
3679
+ masterService;
3631
3680
  field = input.required();
3632
3681
  safeUrl = null;
3633
- constructor(sanitizer) {
3682
+ constructor(sanitizer, masterService) {
3634
3683
  this.sanitizer = sanitizer;
3684
+ this.masterService = masterService;
3635
3685
  }
3636
3686
  ngOnInit() {
3637
3687
  if (this.field() && this.field().imageUrl) {
@@ -3645,13 +3695,13 @@ class IframeComponent {
3645
3695
  }
3646
3696
  return iframeUrl;
3647
3697
  }
3648
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: IframeComponent, deps: [{ token: i1$1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
3649
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: IframeComponent, isStandalone: true, selector: "lib-iframe", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div *ngIf=\"field().imageUrl\">\n <iframe [id]=\"field().fieldName\" width=\"100%\" height=\"500px\" style=\"border: none\"></iframe>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
3698
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: IframeComponent, deps: [{ token: i1$1.DomSanitizer }, { token: MasterControlService }], target: i0.ɵɵFactoryTarget.Component });
3699
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: IframeComponent, isStandalone: true, selector: "lib-iframe", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div *ngIf=\"field().imageUrl\">\n <iframe [id]=\"this.masterService.replaceSpacesWithUnderscores(field()?.label)\" width=\"100%\" height=\"500px\" style=\"border: none\"></iframe>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
3650
3700
  }
3651
3701
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: IframeComponent, decorators: [{
3652
3702
  type: Component,
3653
- args: [{ selector: 'lib-iframe', standalone: true, imports: [CommonModule], template: "<div *ngIf=\"field().imageUrl\">\n <iframe [id]=\"field().fieldName\" width=\"100%\" height=\"500px\" style=\"border: none\"></iframe>\n</div>\n" }]
3654
- }], ctorParameters: () => [{ type: i1$1.DomSanitizer }] });
3703
+ args: [{ selector: 'lib-iframe', standalone: true, imports: [CommonModule], template: "<div *ngIf=\"field().imageUrl\">\n <iframe [id]=\"this.masterService.replaceSpacesWithUnderscores(field()?.label)\" width=\"100%\" height=\"500px\" style=\"border: none\"></iframe>\n</div>\n" }]
3704
+ }], ctorParameters: () => [{ type: i1$1.DomSanitizer }, { type: MasterControlService }] });
3655
3705
 
3656
3706
  class ToggleButtonComponent {
3657
3707
  reactiveFormControlobject = input();
@@ -3691,7 +3741,7 @@ class ToggleButtonComponent {
3691
3741
  useExisting: ToggleButtonComponent,
3692
3742
  multi: true,
3693
3743
  },
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=\"fontStyle\" 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>", 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"] }] });
3744
+ ], 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=\"fontStyle\" 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>", 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: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i5.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
3745
  }
3696
3746
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ToggleButtonComponent, decorators: [{
3697
3747
  type: Component,
@@ -6505,7 +6555,7 @@ class MedialQuestionsComponent {
6505
6555
  this.questionsValueChange.emit(this.personUwAnswers);
6506
6556
  }
6507
6557
  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\">&#42;</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"] }] });
6558
+ 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\">&#42;</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: i5.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: i5.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.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$2.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$2.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
6559
  }
6510
6560
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MedialQuestionsComponent, decorators: [{
6511
6561
  type: Component,
@@ -6906,7 +6956,7 @@ class StepperWIthArrowComponent {
6906
6956
  }
6907
6957
  }
6908
6958
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: StepperWIthArrowComponent, deps: [{ token: MasterControlService }], target: i0.ɵɵFactoryTarget.Component });
6909
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: StepperWIthArrowComponent, isStandalone: true, selector: "lib-stepper-with-arrow", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, currentStepValue: { classPropertyName: "currentStepValue", publicName: "currentStepValue", isSignal: true, isRequired: false, transformFunction: null }, autoProgress: { classPropertyName: "autoProgress", publicName: "autoProgress", isSignal: true, isRequired: false, transformFunction: null }, autoProgressDelay: { classPropertyName: "autoProgressDelay", publicName: "autoProgressDelay", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedStep: "selectedStep" }, ngImport: i0, template: "<div *ngIf=\"field() && field()?.isVisible\" style=\"zoom: 0.85;\">\n <mat-stepper #stepperHeader>\n <ng-container *ngFor=\"let steps of field().editStepper; let i = index\">\n <mat-step \n *ngIf=\"steps.isDisplay !== false\"\n [completed]=\"false\"\n [optional]=\"false\">\n <ng-template matStepLabel>\n <div \n class=\"step-container\"\n [class.step-disabled]=\"shouldShowAsDisabled(steps, i)\"\n [class.step-active]=\"isStepActive(i)\"\n [class.step-completed]=\"isStepCompleted(i)\"\n [class.step-collapsed]=\"!shouldShowLabel(i)\"\n (click)=\"onStepClick(steps, i)\">\n <span \n class=\"step-circle\"\n [class.circle-disabled]=\"shouldShowAsDisabled(steps, i)\"\n [class.circle-active]=\"isStepActive(i)\"\n [class.circle-completed]=\"isStepCompleted(i)\">\n {{i + 1}}\n </span>\n <span \n class=\"step-label mx-2\"\n [class.label-disabled]=\"shouldShowAsDisabled(steps, i)\"\n [class.label-active]=\"isStepActive(i)\"\n [class.label-completed]=\"isStepCompleted(i)\"\n [class.label-hidden]=\"!shouldShowLabel(i)\">\n {{steps?.displayLabel}}\n </span>\n <span \n class=\"arrow\" \n [class.arrow-disabled]=\"shouldShowAsDisabled(steps, i)\"\n [class.arrow-active]=\"isStepActive(i)\"\n [class.arrow-completed]=\"isStepCompleted(i)\"\n *ngIf=\"i < field().editStepper.length - 1\">\n </span>\n </div>\n </ng-template>\n </mat-step>\n </ng-container>\n </mat-stepper>\n</div>", styles: ["*{font-family:mulish!important}.step-container{display:flex;align-items:center;cursor:pointer;padding:4px 8px;border-radius:6px;border:none;transition:all .3s ease}.step-container:hover:not(.step-disabled){background-color:#f5f5f5}.step-container.step-selected{border:none}.step-container.step-disabled{cursor:not-allowed;opacity:.6}.step-container.step-collapsed{padding:4px;justify-content:center}.step-circle{width:24px;height:24px;min-width:24px;min-height:24px;border-radius:50%;background:#0bb68b;color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;margin-right:8px;transition:all .3s ease;flex-shrink:0;box-sizing:border-box}.step-circle.circle-disabled{background:#ececec;border:.5px solid #DADADA;color:#8f8f8f}.step-circle.circle-selected{background:#0a9c75}.step-circle.circle-completed{background:#0a9c75;color:#fff}.step-label{color:#444!important;font-size:13px!important;font-weight:700!important;transition:color .3s ease!important}.step-label.label-disabled{color:#999}.step-label.label-selected{color:#444;font-weight:700}.step-label.label-hidden{display:none}.step-label.label-active{color:#0bb68b;font-weight:700}.step-label.label-completed{color:#0a9c75;font-weight:600}.arrow{border:solid #8F8F8F;border-width:0 2px 2px 0;display:inline-block;padding:3px;transform:rotate(315deg);margin-left:12px;transition:border-color .3s ease}.arrow.arrow-disabled{border-color:#8f8f8f}.arrow.arrow-hidden{display:none}.arrow.arrow-active,.arrow.arrow-completed{border-color:#8f8f8f}::ng-deep .mat-step-icon{display:none}::ng-deep .mat-horizontal-stepper-header-container{background:#fff!important}::ng-deep .mat-stepper-horizontal-line{border-top:1px dashed!important;display:none}::ng-deep .mat-horizontal-content-container{display:none}::ng-deep .mat-horizontal-stepper-header{padding:0 8px!important}::ng-deep .mat-step-header.step-disabled .mat-step-label{pointer-events:none}::ng-deep .mat-step-header{max-height:fit-content!important}\n"], dependencies: [{ kind: "ngmodule", type: MatStepperModule }, { kind: "component", type: i2$4.MatStep, selector: "mat-step", inputs: ["color"], exportAs: ["matStep"] }, { kind: "directive", type: i2$4.MatStepLabel, selector: "[matStepLabel]" }, { kind: "component", type: i2$4.MatStepper, selector: "mat-stepper, mat-vertical-stepper, mat-horizontal-stepper, [matStepper]", inputs: ["disableRipple", "color", "labelPosition", "headerPosition", "animationDuration"], outputs: ["animationDone"], exportAs: ["matStepper", "matVerticalStepper", "matHorizontalStepper"] }, { 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"] }] });
6959
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: StepperWIthArrowComponent, isStandalone: true, selector: "lib-stepper-with-arrow", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, currentStepValue: { classPropertyName: "currentStepValue", publicName: "currentStepValue", isSignal: true, isRequired: false, transformFunction: null }, autoProgress: { classPropertyName: "autoProgress", publicName: "autoProgress", isSignal: true, isRequired: false, transformFunction: null }, autoProgressDelay: { classPropertyName: "autoProgressDelay", publicName: "autoProgressDelay", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedStep: "selectedStep" }, ngImport: i0, template: "<div *ngIf=\"field() && field()?.isVisible\" style=\"zoom: 0.85;\">\n <mat-stepper #stepperHeader>\n <ng-container *ngFor=\"let steps of field().editStepper; let i = index\">\n <mat-step \n *ngIf=\"steps.isDisplay !== false\"\n [completed]=\"false\"\n [optional]=\"false\">\n <ng-template matStepLabel>\n <div \n class=\"step-container\"\n [class.step-disabled]=\"shouldShowAsDisabled(steps, i)\"\n [class.step-active]=\"isStepActive(i)\"\n [class.step-completed]=\"isStepCompleted(i)\"\n [class.step-collapsed]=\"!shouldShowLabel(i)\"\n (click)=\"onStepClick(steps, i)\">\n <span \n class=\"step-circle\"\n [class.circle-disabled]=\"shouldShowAsDisabled(steps, i)\"\n [class.circle-active]=\"isStepActive(i)\"\n [class.circle-completed]=\"isStepCompleted(i)\">\n {{i + 1}}\n </span>\n <span \n class=\"step-label mx-2\"\n [class.label-disabled]=\"shouldShowAsDisabled(steps, i)\"\n [class.label-active]=\"isStepActive(i)\"\n [class.label-completed]=\"isStepCompleted(i)\"\n [class.label-hidden]=\"!shouldShowLabel(i)\">\n {{steps?.displayLabel}}\n </span>\n <span \n class=\"arrow\" \n [class.arrow-disabled]=\"shouldShowAsDisabled(steps, i)\"\n [class.arrow-active]=\"isStepActive(i)\"\n [class.arrow-completed]=\"isStepCompleted(i)\"\n *ngIf=\"i < field().editStepper.length - 1\">\n </span>\n </div>\n </ng-template>\n </mat-step>\n </ng-container>\n </mat-stepper>\n</div>", styles: ["*{font-family:mulish!important}.step-container{display:flex;align-items:center;cursor:pointer;padding:4px 8px;border-radius:6px;border:none;transition:all .3s ease}.step-container:hover:not(.step-disabled){background-color:#f5f5f5}.step-container.step-selected{border:none}.step-container.step-disabled{cursor:not-allowed;opacity:.6}.step-container.step-collapsed{padding:4px;justify-content:center}.step-circle{width:24px;height:24px;min-width:24px;min-height:24px;border-radius:50%;background:#0bb68b;color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;margin-right:8px;transition:all .3s ease;flex-shrink:0;box-sizing:border-box}.step-circle.circle-disabled{background:#ececec;border:.5px solid #DADADA;color:#8f8f8f}.step-circle.circle-selected{background:#0a9c75}.step-circle.circle-completed{background:#0a9c75;color:#fff}.step-label{color:#444!important;font-size:13px!important;font-weight:700!important;transition:color .3s ease!important}.step-label.label-disabled{color:#999}.step-label.label-selected{color:#444;font-weight:700}.step-label.label-hidden{display:none}.step-label.label-active{color:#0bb68b;font-weight:700}.step-label.label-completed{color:#0a9c75;font-weight:600}.arrow{border:solid #8F8F8F;border-width:0 2px 2px 0;display:inline-block;padding:3px;transform:rotate(315deg);margin-left:12px;transition:border-color .3s ease}.arrow.arrow-disabled{border-color:#8f8f8f}.arrow.arrow-hidden{display:none}.arrow.arrow-active,.arrow.arrow-completed{border-color:#8f8f8f}::ng-deep .mat-step-icon{display:none}::ng-deep .mat-horizontal-stepper-header-container{background:#fff!important}::ng-deep .mat-stepper-horizontal-line{border-top:1px dashed!important;display:none}::ng-deep .mat-horizontal-content-container{display:none}::ng-deep .mat-horizontal-stepper-header{padding:0 8px!important}::ng-deep .mat-step-header.step-disabled .mat-step-label{pointer-events:none}::ng-deep .mat-step-header{max-height:fit-content!important}\n"], dependencies: [{ kind: "ngmodule", type: MatStepperModule }, { kind: "component", type: i2$3.MatStep, selector: "mat-step", inputs: ["color"], exportAs: ["matStep"] }, { kind: "directive", type: i2$3.MatStepLabel, selector: "[matStepLabel]" }, { kind: "component", type: i2$3.MatStepper, selector: "mat-stepper, mat-vertical-stepper, mat-horizontal-stepper, [matStepper]", inputs: ["disableRipple", "color", "labelPosition", "headerPosition", "animationDuration"], outputs: ["animationDone"], exportAs: ["matStepper", "matVerticalStepper", "matHorizontalStepper"] }, { 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"] }] });
6910
6960
  }
6911
6961
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: StepperWIthArrowComponent, decorators: [{
6912
6962
  type: Component,
@@ -7003,8 +7053,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
7003
7053
 
7004
7054
  class AnnuityCalculatorRadioComponent {
7005
7055
  el;
7006
- constructor(el) {
7056
+ service;
7057
+ constructor(el, service) {
7007
7058
  this.el = el;
7059
+ this.service = service;
7008
7060
  }
7009
7061
  ngOnInit() {
7010
7062
  const f = this.field();
@@ -7070,14 +7122,14 @@ class AnnuityCalculatorRadioComponent {
7070
7122
  card.style.setProperty('--arrow-left', `${centerX}px`);
7071
7123
  }
7072
7124
  }
7073
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AnnuityCalculatorRadioComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
7125
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AnnuityCalculatorRadioComponent, deps: [{ token: i0.ElementRef }, { token: MasterControlService }], target: i0.ɵɵFactoryTarget.Component });
7074
7126
  static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: AnnuityCalculatorRadioComponent, isStandalone: true, selector: "lib-annuity-calculator-radio", inputs: { reactiveFormControlobject: { classPropertyName: "reactiveFormControlobject", publicName: "reactiveFormControlobject", isSignal: true, isRequired: false, transformFunction: null }, field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { change: "change", growthRateChange: "growthRateChange" }, providers: [
7075
7127
  {
7076
7128
  provide: NG_VALUE_ACCESSOR,
7077
7129
  useExisting: forwardRef(() => AnnuityCalculatorRadioComponent),
7078
7130
  multi: true
7079
7131
  }
7080
- ], 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?.isShowCard\">\n\n <div class=\"acr-card\">\n <div class=\"acr-sub-label\" *ngIf=\"field()?.configData?.subLabel\">\n {{ field()?.configData?.subLabel }}\n </div>\n\n <div class=\"acr-cards-row\">\n <div\n class=\"acr-card-option\"\n *ngFor=\"let card of field()?.configData?.cardsValue\"\n [class.selected]=\"value === card.value\"\n [class.disabled]=\"card.disabled\"\n (click)=\"selectCard(card)\"\n >\n <!-- Hidden native radio input \u2014 enables proper [id]/[name] binding for form semantics. -->\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]=\"card.value\"\n [checked]=\"value === card.value\"\n (change)=\"selectCard(card)\"\n />\n <div class=\"acr-card-main-value\">\n <span class=\"acr-card-main-value\">{{ card.mainValue }}</span><span class=\"acr-card-main-value\"></span>\n </div>\n <div class=\"acr-card-sub-value\">\n <span class=\"acr-card-sub-value\">{{ card.subValue }}</span><span class=\"acr-card-sub-value\"></span>\n </div>\n <div class=\"acr-card-rate\">{{ card.growthRate }} Annuity Rate</div>\n <div class=\"acr-card-details\">\n <div class=\"acr-card-detail-row\">\n <span>Guaranteed </span>\n <span>:</span>\n <strong>{{ card.guaranteed }}</strong>\n </div>\n <div class=\"acr-card-detail-row\">\n <span>Variable </span>\n <span>:</span>\n <strong>{{ card.variable }}</strong>\n </div>\n </div>\n <div class=\"acr-card-type\">\n <button class=\"acr-card-type-btn\" [ngClass]=\"{\n 'btn-high': card.value === 'High',\n 'btn-medium': card.value === 'Medium',\n 'btn-low': card.value !== 'High' && card.value !== 'Medium'\n }\">{{ card.value }} variable</button>\n </div>\n </div>\n </div>\n <!-- Note \u2014 full width, vertically aligned with radio group and card container -->\n <div class=\"acr-note\" *ngIf=\"field()?.configData?.infoMessage\">\n <strong>Note:</strong> {{ field()?.configData?.infoMessage }}\n </div>\n </div>\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;max-width:max-content;height:90px;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;margin-bottom:10px;padding-right:10px;padding-left:10px}.acr-cards-row{display:flex;gap:14px;flex-wrap:nowrap;margin-bottom:30px}.acr-card-option{background:#fff;border:2px solid #E0E0E0;border-radius:12px;padding:18px 16px 28px;flex:1 1 0;min-width: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}.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}\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: MatRadioModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: FormsModule }] });
7132
+ ], 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]=\"this.service.replaceSpacesWithUnderscores(field()?.label)\"\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?.isShowCard\">\n\n <div class=\"acr-card\">\n <div class=\"acr-sub-label\" *ngIf=\"field()?.configData?.subLabel\">\n {{ field()?.configData?.subLabel }}\n </div>\n\n <div class=\"acr-cards-row\">\n <div\n class=\"acr-card-option\"\n *ngFor=\"let card of field()?.configData?.cardsValue\"\n [class.selected]=\"value === card.value\"\n [class.disabled]=\"card.disabled\"\n (click)=\"selectCard(card)\"\n >\n <!-- Hidden native radio input \u2014 enables proper [id]/[name] binding for form semantics. -->\n <input\n type=\"radio\"\n style=\"position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none;\"\n [id]=\"this.service.replaceSpacesWithUnderscores(field()?.label)\"\n [name]=\"field()?.fieldName\"\n [value]=\"card.value\"\n [checked]=\"value === card.value\"\n (change)=\"selectCard(card)\"\n />\n <div class=\"acr-card-main-value\">\n <span class=\"acr-card-main-value\">{{ card.mainValue }}</span><span class=\"acr-card-main-value\"></span>\n </div>\n <div class=\"acr-card-sub-value\">\n <span class=\"acr-card-sub-value\">{{ card.subValue }}</span><span class=\"acr-card-sub-value\"></span>\n </div>\n <div class=\"acr-card-rate\">{{ card.growthRate }} Annuity Rate</div>\n <div class=\"acr-card-details\">\n <div class=\"acr-card-detail-row\">\n <span>Guaranteed </span>\n <span>:</span>\n <strong>{{ card.guaranteed }}</strong>\n </div>\n <div class=\"acr-card-detail-row\">\n <span>Variable </span>\n <span>:</span>\n <strong>{{ card.variable }}</strong>\n </div>\n </div>\n <div class=\"acr-card-type\">\n <button class=\"acr-card-type-btn\" [ngClass]=\"{\n 'btn-high': card.value === 'High',\n 'btn-medium': card.value === 'Medium',\n 'btn-low': card.value !== 'High' && card.value !== 'Medium'\n }\">{{ card.value }} variable</button>\n </div>\n </div>\n </div>\n <!-- Note \u2014 full width, vertically aligned with radio group and card container -->\n <div class=\"acr-note\" *ngIf=\"field()?.configData?.infoMessage\">\n <strong>Note:</strong> {{ field()?.configData?.infoMessage }}\n </div>\n </div>\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;max-width:max-content;height:90px;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;margin-bottom:10px;padding-right:10px;padding-left:10px}.acr-cards-row{display:flex;gap:14px;flex-wrap:nowrap;margin-bottom:30px}.acr-card-option{background:#fff;border:2px solid #E0E0E0;border-radius:12px;padding:18px 16px 28px;flex:1 1 0;min-width: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}.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}\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: MatRadioModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: FormsModule }] });
7081
7133
  }
7082
7134
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AnnuityCalculatorRadioComponent, decorators: [{
7083
7135
  type: Component,
@@ -7088,8 +7140,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
7088
7140
  useExisting: forwardRef(() => AnnuityCalculatorRadioComponent),
7089
7141
  multi: true
7090
7142
  }
7091
- ], 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?.isShowCard\">\n\n <div class=\"acr-card\">\n <div class=\"acr-sub-label\" *ngIf=\"field()?.configData?.subLabel\">\n {{ field()?.configData?.subLabel }}\n </div>\n\n <div class=\"acr-cards-row\">\n <div\n class=\"acr-card-option\"\n *ngFor=\"let card of field()?.configData?.cardsValue\"\n [class.selected]=\"value === card.value\"\n [class.disabled]=\"card.disabled\"\n (click)=\"selectCard(card)\"\n >\n <!-- Hidden native radio input \u2014 enables proper [id]/[name] binding for form semantics. -->\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]=\"card.value\"\n [checked]=\"value === card.value\"\n (change)=\"selectCard(card)\"\n />\n <div class=\"acr-card-main-value\">\n <span class=\"acr-card-main-value\">{{ card.mainValue }}</span><span class=\"acr-card-main-value\"></span>\n </div>\n <div class=\"acr-card-sub-value\">\n <span class=\"acr-card-sub-value\">{{ card.subValue }}</span><span class=\"acr-card-sub-value\"></span>\n </div>\n <div class=\"acr-card-rate\">{{ card.growthRate }} Annuity Rate</div>\n <div class=\"acr-card-details\">\n <div class=\"acr-card-detail-row\">\n <span>Guaranteed </span>\n <span>:</span>\n <strong>{{ card.guaranteed }}</strong>\n </div>\n <div class=\"acr-card-detail-row\">\n <span>Variable </span>\n <span>:</span>\n <strong>{{ card.variable }}</strong>\n </div>\n </div>\n <div class=\"acr-card-type\">\n <button class=\"acr-card-type-btn\" [ngClass]=\"{\n 'btn-high': card.value === 'High',\n 'btn-medium': card.value === 'Medium',\n 'btn-low': card.value !== 'High' && card.value !== 'Medium'\n }\">{{ card.value }} variable</button>\n </div>\n </div>\n </div>\n <!-- Note \u2014 full width, vertically aligned with radio group and card container -->\n <div class=\"acr-note\" *ngIf=\"field()?.configData?.infoMessage\">\n <strong>Note:</strong> {{ field()?.configData?.infoMessage }}\n </div>\n </div>\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;max-width:max-content;height:90px;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;margin-bottom:10px;padding-right:10px;padding-left:10px}.acr-cards-row{display:flex;gap:14px;flex-wrap:nowrap;margin-bottom:30px}.acr-card-option{background:#fff;border:2px solid #E0E0E0;border-radius:12px;padding:18px 16px 28px;flex:1 1 0;min-width: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}.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}\n"] }]
7092
- }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { change: [{
7143
+ ], 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]=\"this.service.replaceSpacesWithUnderscores(field()?.label)\"\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?.isShowCard\">\n\n <div class=\"acr-card\">\n <div class=\"acr-sub-label\" *ngIf=\"field()?.configData?.subLabel\">\n {{ field()?.configData?.subLabel }}\n </div>\n\n <div class=\"acr-cards-row\">\n <div\n class=\"acr-card-option\"\n *ngFor=\"let card of field()?.configData?.cardsValue\"\n [class.selected]=\"value === card.value\"\n [class.disabled]=\"card.disabled\"\n (click)=\"selectCard(card)\"\n >\n <!-- Hidden native radio input \u2014 enables proper [id]/[name] binding for form semantics. -->\n <input\n type=\"radio\"\n style=\"position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none;\"\n [id]=\"this.service.replaceSpacesWithUnderscores(field()?.label)\"\n [name]=\"field()?.fieldName\"\n [value]=\"card.value\"\n [checked]=\"value === card.value\"\n (change)=\"selectCard(card)\"\n />\n <div class=\"acr-card-main-value\">\n <span class=\"acr-card-main-value\">{{ card.mainValue }}</span><span class=\"acr-card-main-value\"></span>\n </div>\n <div class=\"acr-card-sub-value\">\n <span class=\"acr-card-sub-value\">{{ card.subValue }}</span><span class=\"acr-card-sub-value\"></span>\n </div>\n <div class=\"acr-card-rate\">{{ card.growthRate }} Annuity Rate</div>\n <div class=\"acr-card-details\">\n <div class=\"acr-card-detail-row\">\n <span>Guaranteed </span>\n <span>:</span>\n <strong>{{ card.guaranteed }}</strong>\n </div>\n <div class=\"acr-card-detail-row\">\n <span>Variable </span>\n <span>:</span>\n <strong>{{ card.variable }}</strong>\n </div>\n </div>\n <div class=\"acr-card-type\">\n <button class=\"acr-card-type-btn\" [ngClass]=\"{\n 'btn-high': card.value === 'High',\n 'btn-medium': card.value === 'Medium',\n 'btn-low': card.value !== 'High' && card.value !== 'Medium'\n }\">{{ card.value }} variable</button>\n </div>\n </div>\n </div>\n <!-- Note \u2014 full width, vertically aligned with radio group and card container -->\n <div class=\"acr-note\" *ngIf=\"field()?.configData?.infoMessage\">\n <strong>Note:</strong> {{ field()?.configData?.infoMessage }}\n </div>\n </div>\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;max-width:max-content;height:90px;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;margin-bottom:10px;padding-right:10px;padding-left:10px}.acr-cards-row{display:flex;gap:14px;flex-wrap:nowrap;margin-bottom:30px}.acr-card-option{background:#fff;border:2px solid #E0E0E0;border-radius:12px;padding:18px 16px 28px;flex:1 1 0;min-width: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}.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}\n"] }]
7144
+ }], ctorParameters: () => [{ type: i0.ElementRef }, { type: MasterControlService }], propDecorators: { change: [{
7093
7145
  type: Output
7094
7146
  }], growthRateChange: [{
7095
7147
  type: Output
@@ -8229,7 +8281,7 @@ class AnnuityPremiumCalculatorComponent {
8229
8281
  return str ? str + ' Only' : '';
8230
8282
  }
8231
8283
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AnnuityPremiumCalculatorComponent, deps: [{ token: MasterControlService }], target: i0.ɵɵFactoryTarget.Component });
8232
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: AnnuityPremiumCalculatorComponent, isStandalone: true, selector: "lib-annuity-premium-calculator", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, triggerValidation: { classPropertyName: "triggerValidation", publicName: "triggerValidation", isSignal: false, isRequired: false, transformFunction: null }, premiumDetails: { classPropertyName: "premiumDetails", publicName: "premiumDetails", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onCalcualteButtonClick: "onCalcualteButtonClick", onGenerateSummaryClick: "onGenerateSummaryClick", onAnnuityPremiumChange: "onAnnuityPremiumChange", onMinimumPremiumValueChange: "onMinimumPremiumValueChange", onAutioDebitValueChange: "onAutioDebitValueChange", onGuranteedAnnuityValueChange: "onGuranteedAnnuityValueChange", onDigitBossSwitchToggle: "onDigitBossSwitchToggle", onGrowthRateOptionSelected: "onGrowthRateOptionSelected" }, viewQueries: [{ propertyName: "annuityRadioRef", first: true, predicate: AnnuityCalculatorRadioComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"card px-3\" style=\"padding: 16px;\">\n <div class=\"row\">\n <h4 class=\"card-main-title\"><span style=\"margin-right: 12px;\"><img\n src=\"https://cdn.godigit.com/retail-life/calculator.svg\" alt=\"annuity calculator\"></span>Here's Your Premium to Annuity Calculator</h4>\n </div>\n <!-- <div class=\"row\"> -->\n <div class=\"card pb-4 px-4\" style=\"border-bottom-left-radius: 0px; border-bottom-right-radius: 0px;\">\n <!-- <div class=\"custom-grid-template\">\n\n </div> -->\n\n <div class=\"row mx-auto\" style=\"transform: translate(0px, -58%);\">\n <lib-toggle class=\"col-auto\" [field]=\"annuityPremiumToggleObj\" />\n </div>\n <!-- </div> -->\n <div class=\" col-12\" style=\"\n justify-content: center;\n flex-direction: row;\n display: flex;\n\">\n <div class=\"col-5 col-lg-5 d-flex flex-column p-0\">\n <lib-select-textbox [field]=\"annuityPremiumObj\" [(ngModel)]=\"annuityPremium\"\n (ngModelChange)=\"onAnnuityPremiumValueChange($event)\" />\n <div class=\"error-message\" *ngIf=\"validations.ispremiumEntry\">\n Please enter Premium amount\n </div>\n <div class=\"annuity-mat-hint\" *ngIf=\"annuityPremiumObj?.configData?.numbertoword\">{{annuityPremiumObj?.configData?.numbertoword}}</div>\n <div>\n <lib-toggle [field]=\"enableAutoDebitObj\" [(ngModel)]=\"isEnableAutoDebit\"\n (ngModelChange)=\"onEnableAutoDebitValueChange($event)\" />\n </div>\n </div>\n <div class=\"col-2 col-lg-2 d-flex justify-content-center align-items-center\"\n style=\"display: flex; align-items: flex-end; transform: translate(0px, 6px); position: relative; height: auto; min-height: 100%;\">\n <!-- Top line -->\n <div style=\"position: absolute; left: 50%; transform: translateX(-50%); width: 1px; height: calc(50% + 24px); top: -37px; background: rgba(221, 221, 221, 1); pointer-events: none;\"></div>\n <!-- Bottom line -->\n <div style=\"position: absolute; left: 50%; transform: translateX(-50%); width: 1px; height: calc(50% + 24px); bottom: -37px; background: rgba(221, 221, 221, 1); pointer-events: none;\"></div>\n <lib-icon-button [field]=\"interchangeButtonObj\" />\n </div>\n <div class=\"col-5 col-lg-5 d-flex flex-column p-0\">\n <lib-select-textbox [field]=\"minimumAnnuityPayoutObj\" [(ngModel)]=\"minumumAnnuityPayout\"\n (ngModelChange)=\"onMinPremiumValueChange($event)\" />\n <div class=\"annuity-mat-hint\" *ngIf=\"minimumAnnuityPayoutObj?.configData?.numbertoword\">{{minimumAnnuityPayoutObj?.configData?.numbertoword}}</div>\n <div class=\"minium-annuity mt-3\" *ngIf=\"guranteedannuityObj['isVisible']\">\n <div class=\"annuity-msg w-100 px-2 py-1\">\n Value based on assumed 10% annual growth of Nifty 50 index.\n </div>\n <div class=\"w-100 px-2 py-1\">\n <lib-radio [field]=\"guranteedannuityObj\" [(ngModel)]=\"selectedGuranteedAnnuity\"\n (ngModelChange)=\"onGuranteedAnnuityChange($event)\" />\n </div>\n <div class=\"annuity-msg-1 d-flex align-items-center flex-nowrap w-100 px-2 py-1\">\n <img src=\"https://cdn.godigit.com/digitPlusAssets/streamline_graph-arrow-increase-remix.png\"\n style=\"max-width: 24px;\" />\n <span>Potential for higher returns by lowering the minimum guaranteed annuity rate.</span>\n </div>\n </div>\n\n </div>\n </div>\n <!-- <div class=\"vertical-line\"></div> -->\n <!-- <div class=\"custom-grid-template\">\n <div>\n <lib-toggle [field]=\"enableAutoDebitObj\" [(ngModel)]=\"isEnableAutoDebit\"\n (ngModelChange)=\"onEnableAutoDebitValueChange($event)\" />\n </div>\n </div> -->\n\n </div>\n\n\n <div class=\"card py-3 mb-4 border-top-0\" style=\"border-top-left-radius: 0px; border-top-right-radius: 0px;\">\n <div class=\"mx-4\">\n <div class=\"digit-boss-banner\" *ngIf=\"digitBossSwitch?.isVisible\">\n <lib-toggle [field]=\"digitBossToggleConfig\" [(ngModel)]=\"this.digitBossSwitch.isSwitchOn\" (ngModelChange)=\"onDigitBossSwitchChange($event)\"></lib-toggle>\n <div class=\"digit-boss-text\">\n {{this.digitBossSwitch?.prefixText}}\n <span class=\"highlight\">{{this.digitBossSwitch?.highlightText}}</span>\n {{this.digitBossSwitch?.subText}}\n <span class=\"arrow-icon\">\u2197</span>\n </div>\n </div>\n <lib-button [field]=\"recalculateButton\" (click)=\"calculateButtonClicked()\" />\n <div class=\"card mb-0 mt-2\"\n style=\"align-items: center;border:none;font-size: 8px;font-weight: 400;color:rgba(68, 68, 68, 1) \"\n >\n <div class=\"mx-4\" *ngIf=\"recalculateSubTextObj?.isVisible\"><img src=\"https://cdn.godigit.com/digitPlusAssets/Group+1010106336.png\"\n style=\"margin-left: 3px;\" />\n <span style=\"margin-left: 6px;\">Every time you make a change above, please click recalculate.</span>\n </div>\n </div>\n </div>\n <div\n style=\"display: flex;align-items: center;justify-content: center;border:none;font-size: 10px;font-weight: 700;height:32px;background-color: rgba(255, 250, 235, 1);gap: 8px;margin: 4px;\"\n *ngIf=\"annuityTableCalculator?.isVisible\">\n <img src=\"https://cdn.godigit.com/retail-life/calculator.svg\" />\n Minimum Guaranteed Payout(A) + Variable Payout(B) = Total Payout(C)\n </div>\n <!-- annuity calculator table -->\n <div class=\"annuity-tables-main-container\" *ngIf=\"annuityTableCalculator?.isVisible\">\n <div class=\"d-flex flex-row annuity-tables-container\">\n <!-- Table 1 -->\n <div class=\"annuity-calculator-table1\">\n <div class=\"table-header annuitytable1-header\">Minimum Guaranteed Annuity Payout(A)</div>\n <div class=\"table-body\">\n <div class=\"table-cell\"><span class=\"rupee-icon\">\u20B9</span><span\n style=\"font-size:12px; color: rgba(68, 68, 68, 1);\">\n <{{annuityTableCalculator.annuitycalculatorTable1val1}}>\n </span></div>\n <button class=\"annuitytable-button\">{{annuityTableCalculator.annuitycalculatorTable1val2}}</button>\n </div>\n </div>\n\n <div class=\"operator-symbol\">+</div>\n\n <!-- Table 2 -->\n <div class=\"annuity-calculator-table2\">\n <div class=\"table-header annuitytable1-header\">Assume growth of BenchMark index</div>\n <div class=\"table-body\">\n <div class=\"table-row\">&#64;{{annuityTableCalculator.annuitycalculatorTable2val1}}</div>\n <div class=\"table-row\">&#64;{{annuityTableCalculator.annuitycalculatorTable2val2}}</div>\n <div class=\"table-row\">&#64;{{annuityTableCalculator.annuitycalculatorTable2val3}}</div>\n </div>\n </div>\n\n <!-- Table 3 -->\n <div class=\"annuity-calculator-table3\">\n <div class=\"table-header annuitytable1-header\">1st Variable Annuity Payout(B)</div>\n <div class=\"table-body\">\n <div class=\"table-row\"><span\n class=\"rupee-icon\">\u20B9</span>{{annuityTableCalculator.annuitycalculatorTable3val1}}</div>\n <div class=\"table-row\"><span\n class=\"rupee-icon\">\u20B9</span>{{annuityTableCalculator.annuitycalculatorTable3val2}}</div>\n <div class=\"table-row\"><span\n class=\"rupee-icon\">\u20B9</span>{{annuityTableCalculator.annuitycalculatorTable3val3}}</div>\n </div>\n </div>\n\n <div class=\"operator-symbol\">=</div>\n\n <!-- Table 4 -->\n <div class=\"annuity-calculator-table4\">\n <div class=\"table-header annuitytable4-header\">1st TotalPayout/Frequency(C)</div>\n <div class=\"table-body\">\n <div class=\"table-row annuitytable4-bg\"><span\n class=\"rupee-icon\">\u20B9</span>{{annuityTableCalculator.annuitycalculatorTable4val1}}</div>\n <div class=\"table-row annuitytable4-bg\"><span\n class=\"rupee-icon\">\u20B9</span>{{annuityTableCalculator.annuitycalculatorTable4val2}}</div>\n <div class=\"table-row annuitytable4-bg\"><span\n class=\"rupee-icon\">\u20B9</span>{{annuityTableCalculator.annuitycalculatorTable4val3}}</div>\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"annuity-calculator-paragraph\" *ngIf=\"annuityTableCalculator?.isVisible\">\n <span class=\"annuity-calculator-paragraph1\">This is an assumed growth percentage for the index basis which the\n values in columns B and C are calculated.</span> Actual growth will depend on index performance and may affect\n your variable annuity payout and total annuity payout.\n </div>\n\n <div *ngIf=\"growthRateObj.isVisible\">\n <lib-annuity-calculator-radio\n [field]=\"growthRateObj\"\n [(ngModel)]=\"growthRateOption\"\n (change)=\"onGrowthRateRadioChange($event)\"\n (growthRateChange)=\"onGrowthRateCardChange($event)\" />\n </div>\n\n <div *ngIf=\"hrLineObj.isVisible\" class=\"generateSummary\">\n <lib-hr-line [field]=\"hrLineObj\" />\n </div>\n\n <div *ngIf=\"generateSummaryObj.isVisible\" class=\"generateSummary\">\n <lib-button [field]=\"generateSummaryObj\" (click)=\"generateSummaryClicked()\" />\n </div>\n </div>\n", styles: [".card-main-title{font-size:16px;font-family:Mulish!important;letter-spacing:0px!important;font-weight:800;line-height:24px;padding-bottom:16px}.col-5-5{flex:0 0 auto;max-width:44.16666667%}.custom-grid-template{display:grid;grid-template-columns:4fr .5fr 4fr;align-items:end}.vertical-line{border-left:2px solid #ccc;height:100px;margin:0 10px}.error-message{font-size:12px;font-weight:500;color:#e00;letter-spacing:0px}.annuity-msg{padding:4px 6px;margin-top:8px;font-size:10px;font-weight:400;color:#444;background-color:#e5f0fa;height:fit-content}.annuity-msg-1{padding:4px 6px;margin-top:8px;font-size:10px;font-weight:400;color:#444;background-color:#e6f7f3;height:fit-content;flex-wrap:nowrap!important}.annuity-tables-main-container{border:2px solid rgba(221,221,221,1);border-radius:8px;display:flex}.annuity-tables-container{display:flex;align-items:stretch;gap:0;width:100%}.annuity-calculator-table1,.annuity-calculator-table2,.annuity-calculator-table3,.annuity-calculator-table4{display:flex;flex-direction:column;height:100%;flex:1;color:#444;font-weight:400;font-size:10px}.annuity-calculator-table1{border-right:1px solid rgba(221,221,221,1)}.annuity-calculator-table2{border-left:1px solid rgba(221,221,221,1);border-right:1px solid rgba(221,221,221,1)}.annuity-calculator-table3{border-right:1px solid rgba(221,221,221,1)}.annuity-calculator-table4{border-left:1px solid rgba(221,221,221,1)}.table-header{padding:12px;font-size:10px;font-weight:700;text-align:center;border-bottom:1px solid rgba(221,221,221,1);height:60px;display:flex;align-items:center;justify-content:center;word-wrap:break-word;word-break:break-word;hyphens:auto}.annuitytable1-header{background-color:#ececec;color:#444}.annuitytable4-header{background-color:#fb03;color:#444}.table-body{display:flex;flex-direction:column;flex:1}.table-cell{padding:12px;text-align:center;font-size:16px;font-weight:600;flex:1;display:flex;flex-direction:row;justify-content:center;align-items:center;gap:4px}.annuity-mat-hint{font-size:8px;text-align:start;font-weight:400;color:#444;letter-spacing:0px}.table-row{padding:12px;text-align:center;font-size:14px;font-weight:500;background-color:#fff;border-bottom:1px solid #999;flex:1;display:flex;align-items:center;justify-content:center}.table-row:last-child{border-bottom:none}.annuitytable4-bg{background-color:#e6f7f3!important;color:#444}.annuitytable-button{background-color:#ececec;border:none;border-radius:4px;padding:2px 8px;font-size:10px;font-weight:700;cursor:pointer;margin-top:0;width:auto;min-width:30%;max-width:90%;height:24px;display:block;margin-left:auto;margin-right:auto;position:relative;bottom:40px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.rupee-icon{font-weight:700;margin-right:2px;font-size:12px;color:#444}.operator-symbol{display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:700;padding:0 16px;color:#f90}.annuity-calculator-paragraph{padding:16px 8px 4px;font-size:10px;margin:0 0 20px auto;width:73%;font-weight:400;color:#444;background-color:#ebf1ff}.annuity-calculator-paragraph1{font-weight:700;font-size:10px}.minium-annuity{display:flex;flex-direction:column}@media (max-width: 991px) and (min-width: 768px){.table-header{padding:8px 4px;font-size:9px;line-height:1.1}}@media (max-width: 767px) and (min-width: 576px){.table-header{padding:10px 6px;font-size:9px}}@media (max-width: 575px){.table-header{padding:8px 4px;font-size:8px}}@media (max-width: 575px){.annuity-msg{font-size:10px;line-height:1;height:fit-content}}@media (max-width: 575px){.annuity-msg-1{font-size:10px;line-height:1;flex-wrap:nowrap!important;height:fit-content}.annuity-msg-1 .img{width:4px;height:4px}}@media (max-width: 991px) and (min-width: 768px){.annuity-msg,.annuity-msg-1{font-size:9px;line-height:1.1;height:fit-content}}@media (max-width: 767px) and (min-width: 576px){.annuity-msg,.annuity-msg-1{font-size:10px;line-height:1.1;height:fit-content}}.digit-boss-banner{background-color:#333;color:#fff;display:flex;align-items:center;padding:8px 16px;border-radius:4px;margin-bottom:16px;gap:8px;font-size:12px;min-height:16px;opacity:1;transform:rotate(0)}.digit-boss-banner ::ng-deep .toggle-background{margin-top:0!important;padding:0!important;background-color:transparent!important;border:none!important}.digit-boss-banner ::ng-deep .toggle_switch{margin-top:0!important;gap:0!important}.digit-boss-text{display:flex;align-items:center;gap:4px;white-space:nowrap}.highlight{color:#fb0;font-weight:700}.arrow-icon{color:#fb0;margin-left:4px;font-size:14px}.generateSummary{margin-right:.4rem;margin-left:.4rem}\n"], dependencies: [{ kind: "component", type: AnnuityCalculatorRadioComponent, selector: "lib-annuity-calculator-radio", inputs: ["reactiveFormControlobject", "field"], outputs: ["change", "growthRateChange"] }, { kind: "component", type: HrLineComponent, selector: "lib-hr-line", inputs: ["field"] }, { kind: "component", type: ToggleComponent, selector: "lib-toggle", inputs: ["field", "reactiveFormControlobject"], outputs: ["change"] }, { kind: "component", type: SelectTextboxComponent, selector: "lib-select-textbox", inputs: ["field", "reactiveFormControlobject"], outputs: ["selectionChange"] }, { kind: "component", type: ButtonComponent, selector: "lib-button", inputs: ["field"] }, { kind: "component", type: IconButtonComponent, selector: "lib-icon-button", inputs: ["field"] }, { kind: "component", type: RadioComponent, selector: "lib-radio", inputs: ["reactiveFormControlobject", "field"], outputs: ["change"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
8284
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: AnnuityPremiumCalculatorComponent, isStandalone: true, selector: "lib-annuity-premium-calculator", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, triggerValidation: { classPropertyName: "triggerValidation", publicName: "triggerValidation", isSignal: false, isRequired: false, transformFunction: null }, premiumDetails: { classPropertyName: "premiumDetails", publicName: "premiumDetails", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onCalcualteButtonClick: "onCalcualteButtonClick", onGenerateSummaryClick: "onGenerateSummaryClick", onAnnuityPremiumChange: "onAnnuityPremiumChange", onMinimumPremiumValueChange: "onMinimumPremiumValueChange", onAutioDebitValueChange: "onAutioDebitValueChange", onGuranteedAnnuityValueChange: "onGuranteedAnnuityValueChange", onDigitBossSwitchToggle: "onDigitBossSwitchToggle", onGrowthRateOptionSelected: "onGrowthRateOptionSelected" }, viewQueries: [{ propertyName: "annuityRadioRef", first: true, predicate: AnnuityCalculatorRadioComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"card px-3\" style=\"padding: 16px;\">\n <div class=\"row\">\n <h4 class=\"card-main-title\"><span style=\"margin-right: 12px;\"><img\n src=\"https://cdn.godigit.com/retail-life/calculator.svg\" alt=\"annuity calculator\"></span>Here's Your Premium to Annuity Calculator</h4>\n </div>\n <!-- <div class=\"row\"> -->\n <div class=\"card pb-4 px-4\" style=\"border-bottom-left-radius: 0px; border-bottom-right-radius: 0px;\">\n <!-- <div class=\"custom-grid-template\">\n\n </div> -->\n\n <div class=\"row mx-auto\" style=\"transform: translate(0px, -58%);\">\n <lib-toggle class=\"col-auto\" [field]=\"annuityPremiumToggleObj\" />\n </div>\n <!-- </div> -->\n <div class=\" col-12\" style=\"\n justify-content: center;\n flex-direction: row;\n display: flex;\n\">\n <div class=\"col-5 col-lg-5 d-flex flex-column p-0\">\n <lib-select-textbox [field]=\"annuityPremiumObj\" [(ngModel)]=\"annuityPremium\"\n (ngModelChange)=\"onAnnuityPremiumValueChange($event)\" />\n <div class=\"error-message\" *ngIf=\"validations.ispremiumEntry\">\n Please enter Premium amount\n </div>\n <div class=\"annuity-mat-hint\" *ngIf=\"annuityPremiumObj?.configData?.numbertoword\">{{annuityPremiumObj?.configData?.numbertoword}}</div>\n <div>\n <lib-toggle [field]=\"enableAutoDebitObj\" [(ngModel)]=\"isEnableAutoDebit\"\n (ngModelChange)=\"onEnableAutoDebitValueChange($event)\" />\n </div>\n </div>\n <div class=\"col-2 col-lg-2 d-flex justify-content-center align-items-center\"\n style=\"display: flex; align-items: flex-end; transform: translate(0px, 6px); position: relative; height: auto; min-height: 100%;\">\n <!-- Top line -->\n <div style=\"position: absolute; left: 50%; transform: translateX(-50%); width: 1px; height: calc(50% + 24px); top: -37px; background: rgba(221, 221, 221, 1); pointer-events: none;\"></div>\n <!-- Bottom line -->\n <div style=\"position: absolute; left: 50%; transform: translateX(-50%); width: 1px; height: calc(50% + 24px); bottom: -37px; background: rgba(221, 221, 221, 1); pointer-events: none;\"></div>\n <lib-icon-button [field]=\"interchangeButtonObj\" />\n </div>\n <div class=\"col-5 col-lg-5 d-flex flex-column p-0\">\n <lib-select-textbox [field]=\"minimumAnnuityPayoutObj\" [(ngModel)]=\"minumumAnnuityPayout\"\n (ngModelChange)=\"onMinPremiumValueChange($event)\" />\n <div class=\"annuity-mat-hint\" *ngIf=\"minimumAnnuityPayoutObj?.configData?.numbertoword\">{{minimumAnnuityPayoutObj?.configData?.numbertoword}}</div>\n <div class=\"minium-annuity mt-3\" *ngIf=\"guranteedannuityObj['isVisible']\">\n <div class=\"annuity-msg w-100 px-2 py-1\">\n Value based on assumed 10% annual growth of Nifty 50 index.\n </div>\n <div class=\"w-100 px-2 py-1\">\n <lib-radio [field]=\"guranteedannuityObj\" [(ngModel)]=\"selectedGuranteedAnnuity\"\n (ngModelChange)=\"onGuranteedAnnuityChange($event)\" />\n </div>\n <div class=\"annuity-msg-1 d-flex align-items-center flex-nowrap w-100 px-2 py-1\">\n <img src=\"https://cdn.godigit.com/digitPlusAssets/streamline_graph-arrow-increase-remix.png\"\n style=\"max-width: 24px;\" />\n <span>Potential for higher returns by lowering the minimum guaranteed annuity rate.</span>\n </div>\n </div>\n\n </div>\n </div>\n <!-- <div class=\"vertical-line\"></div> -->\n <!-- <div class=\"custom-grid-template\">\n <div>\n <lib-toggle [field]=\"enableAutoDebitObj\" [(ngModel)]=\"isEnableAutoDebit\"\n (ngModelChange)=\"onEnableAutoDebitValueChange($event)\" />\n </div>\n </div> -->\n\n </div>\n\n\n <div class=\"card py-3 mb-4 border-top-0\" style=\"border-top-left-radius: 0px; border-top-right-radius: 0px;\">\n <div class=\"mx-4\">\n <div class=\"digit-boss-banner\" *ngIf=\"digitBossSwitch?.isVisible\">\n <lib-toggle [field]=\"digitBossToggleConfig\" [(ngModel)]=\"this.digitBossSwitch.isSwitchOn\" (ngModelChange)=\"onDigitBossSwitchChange($event)\"></lib-toggle>\n <div class=\"digit-boss-text\">\n {{this.digitBossSwitch?.prefixText}}\n <span class=\"highlight\">{{this.digitBossSwitch?.highlightText}}</span>\n {{this.digitBossSwitch?.subText}}\n <span class=\"arrow-icon\">\u2197</span>\n </div>\n </div>\n <lib-button [field]=\"recalculateButton\" (click)=\"calculateButtonClicked()\" />\n <div class=\"card mb-0 mt-2\"\n style=\"align-items: center;border:none;font-size: 8px;font-weight: 400;color:rgba(68, 68, 68, 1) \"\n >\n <div class=\"mx-4\" *ngIf=\"recalculateSubTextObj?.isVisible\"><img src=\"https://cdn.godigit.com/digitPlusAssets/Group+1010106336.png\"\n style=\"margin-left: 3px;\" />\n <span style=\"margin-left: 6px;\">Every time you make a change above, please click recalculate.</span>\n </div>\n </div>\n </div>\n <div\n style=\"display: flex;align-items: center;justify-content: center;border:none;font-size: 10px;font-weight: 700;height:32px;background-color: rgba(255, 250, 235, 1);gap: 8px;margin: 4px;\"\n *ngIf=\"annuityTableCalculator?.isVisible\">\n <img src=\"https://cdn.godigit.com/retail-life/calculator.svg\" />\n Minimum Guaranteed Payout(A) + Variable Payout(B) = Total Payout(C)\n </div>\n <!-- annuity calculator table -->\n <div class=\"annuity-tables-main-container\" *ngIf=\"annuityTableCalculator?.isVisible\">\n <div class=\"d-flex flex-row annuity-tables-container\">\n <!-- Table 1 -->\n <div class=\"annuity-calculator-table1\">\n <div class=\"table-header annuitytable1-header\">Minimum Guaranteed Annuity Payout(A)</div>\n <div class=\"table-body\">\n <div class=\"table-cell\"><span class=\"rupee-icon\">\u20B9</span><span\n style=\"font-size:12px; color: rgba(68, 68, 68, 1);\">\n <{{annuityTableCalculator.annuitycalculatorTable1val1}}>\n </span></div>\n <button class=\"annuitytable-button\">{{annuityTableCalculator.annuitycalculatorTable1val2}}</button>\n </div>\n </div>\n\n <div class=\"operator-symbol\">+</div>\n\n <!-- Table 2 -->\n <div class=\"annuity-calculator-table2\">\n <div class=\"table-header annuitytable1-header\">Assume growth of BenchMark index</div>\n <div class=\"table-body\">\n <div class=\"table-row\">&#64;{{annuityTableCalculator.annuitycalculatorTable2val1}}</div>\n <div class=\"table-row\">&#64;{{annuityTableCalculator.annuitycalculatorTable2val2}}</div>\n <div class=\"table-row\">&#64;{{annuityTableCalculator.annuitycalculatorTable2val3}}</div>\n </div>\n </div>\n\n <!-- Table 3 -->\n <div class=\"annuity-calculator-table3\">\n <div class=\"table-header annuitytable1-header\">1st Variable Annuity Payout(B)</div>\n <div class=\"table-body\">\n <div class=\"table-row\"><span\n class=\"rupee-icon\">\u20B9</span>{{annuityTableCalculator.annuitycalculatorTable3val1}}</div>\n <div class=\"table-row\"><span\n class=\"rupee-icon\">\u20B9</span>{{annuityTableCalculator.annuitycalculatorTable3val2}}</div>\n <div class=\"table-row\"><span\n class=\"rupee-icon\">\u20B9</span>{{annuityTableCalculator.annuitycalculatorTable3val3}}</div>\n </div>\n </div>\n\n <div class=\"operator-symbol\">=</div>\n\n <!-- Table 4 -->\n <div class=\"annuity-calculator-table4\">\n <div class=\"table-header annuitytable4-header\">1st TotalPayout/Frequency(C)</div>\n <div class=\"table-body\">\n <div class=\"table-row annuitytable4-bg\"><span\n class=\"rupee-icon\">\u20B9</span>{{annuityTableCalculator.annuitycalculatorTable4val1}}</div>\n <div class=\"table-row annuitytable4-bg\"><span\n class=\"rupee-icon\">\u20B9</span>{{annuityTableCalculator.annuitycalculatorTable4val2}}</div>\n <div class=\"table-row annuitytable4-bg\"><span\n class=\"rupee-icon\">\u20B9</span>{{annuityTableCalculator.annuitycalculatorTable4val3}}</div>\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"annuity-calculator-paragraph\" *ngIf=\"annuityTableCalculator?.isVisible\">\n <span class=\"annuity-calculator-paragraph1\">This is an assumed growth percentage for the index basis which the\n values in columns B and C are calculated.</span> Actual growth will depend on index performance and may affect\n your variable annuity payout and total annuity payout.\n </div>\n\n <div *ngIf=\"growthRateObj.isVisible\">\n <lib-annuity-calculator-radio\n [field]=\"growthRateObj\"\n [(ngModel)]=\"growthRateOption\"\n (change)=\"onGrowthRateRadioChange($event)\"\n (growthRateChange)=\"onGrowthRateCardChange($event)\" />\n </div>\n\n <div *ngIf=\"hrLineObj.isVisible\" class=\"generateSummary\">\n <lib-hr-line [field]=\"hrLineObj\" />\n </div>\n\n <div *ngIf=\"generateSummaryObj.isVisible\" class=\"generateSummary\">\n <lib-button [field]=\"generateSummaryObj\" (click)=\"generateSummaryClicked()\" />\n </div>\n </div>\n", styles: [".card-main-title{font-size:16px;font-family:Mulish!important;letter-spacing:0px!important;font-weight:800;line-height:24px;padding-bottom:16px}.col-5-5{flex:0 0 auto;max-width:44.16666667%}.custom-grid-template{display:grid;grid-template-columns:4fr .5fr 4fr;align-items:end}.vertical-line{border-left:2px solid #ccc;height:100px;margin:0 10px}.error-message{font-size:12px;font-weight:500;color:#e00;letter-spacing:0px}.annuity-msg{padding:4px 6px;margin-top:8px;font-size:10px;font-weight:400;color:#444;background-color:#e5f0fa;height:fit-content}.annuity-msg-1{padding:4px 6px;margin-top:8px;font-size:10px;font-weight:400;color:#444;background-color:#e6f7f3;height:fit-content;flex-wrap:nowrap!important}.annuity-tables-main-container{border:2px solid rgba(221,221,221,1);border-radius:8px;display:flex}.annuity-tables-container{display:flex;align-items:stretch;gap:0;width:100%}.annuity-calculator-table1,.annuity-calculator-table2,.annuity-calculator-table3,.annuity-calculator-table4{display:flex;flex-direction:column;height:100%;flex:1;color:#444;font-weight:400;font-size:10px}.annuity-calculator-table1{border-right:1px solid rgba(221,221,221,1)}.annuity-calculator-table2{border-left:1px solid rgba(221,221,221,1);border-right:1px solid rgba(221,221,221,1)}.annuity-calculator-table3{border-right:1px solid rgba(221,221,221,1)}.annuity-calculator-table4{border-left:1px solid rgba(221,221,221,1)}.table-header{padding:12px;font-size:10px;font-weight:700;text-align:center;border-bottom:1px solid rgba(221,221,221,1);height:60px;display:flex;align-items:center;justify-content:center;word-wrap:break-word;word-break:break-word;hyphens:auto}.annuitytable1-header{background-color:#ececec;color:#444}.annuitytable4-header{background-color:#fb03;color:#444}.table-body{display:flex;flex-direction:column;flex:1}.table-cell{padding:12px;text-align:center;font-size:16px;font-weight:600;flex:1;display:flex;flex-direction:row;justify-content:center;align-items:center;gap:4px}.annuity-mat-hint{font-size:8px;text-align:start;font-weight:400;color:#444;letter-spacing:0px}.table-row{padding:12px;text-align:center;font-size:14px;font-weight:500;background-color:#fff;border-bottom:1px solid #999;flex:1;display:flex;align-items:center;justify-content:center}.table-row:last-child{border-bottom:none}.annuitytable4-bg{background-color:#e6f7f3!important;color:#444}.annuitytable-button{background-color:#ececec;border:none;border-radius:4px;padding:2px 8px;font-size:10px;font-weight:700;cursor:pointer;margin-top:0;width:auto;min-width:30%;max-width:90%;height:24px;display:block;margin-left:auto;margin-right:auto;position:relative;bottom:40px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.rupee-icon{font-weight:700;margin-right:2px;font-size:12px;color:#444}.operator-symbol{display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:700;padding:0 16px;color:#f90}.annuity-calculator-paragraph{padding:16px 8px 4px;font-size:10px;margin:0 0 20px auto;width:73%;font-weight:400;color:#444;background-color:#ebf1ff}.annuity-calculator-paragraph1{font-weight:700;font-size:10px}.minium-annuity{display:flex;flex-direction:column}@media (max-width: 991px) and (min-width: 768px){.table-header{padding:8px 4px;font-size:9px;line-height:1.1}}@media (max-width: 767px) and (min-width: 576px){.table-header{padding:10px 6px;font-size:9px}}@media (max-width: 575px){.table-header{padding:8px 4px;font-size:8px}}@media (max-width: 575px){.annuity-msg{font-size:10px;line-height:1;height:fit-content}}@media (max-width: 575px){.annuity-msg-1{font-size:10px;line-height:1;flex-wrap:nowrap!important;height:fit-content}.annuity-msg-1 .img{width:4px;height:4px}}@media (max-width: 991px) and (min-width: 768px){.annuity-msg,.annuity-msg-1{font-size:9px;line-height:1.1;height:fit-content}}@media (max-width: 767px) and (min-width: 576px){.annuity-msg,.annuity-msg-1{font-size:10px;line-height:1.1;height:fit-content}}.digit-boss-banner{background-color:#333;color:#fff;display:flex;align-items:center;padding:8px 16px;border-radius:4px;margin-bottom:16px;gap:8px;font-size:12px;min-height:16px;opacity:1;transform:rotate(0)}.digit-boss-banner ::ng-deep .toggle-background{margin-top:0!important;padding:0!important;background-color:transparent!important;border:none!important}.digit-boss-banner ::ng-deep .toggle_switch{margin-top:0!important;gap:0!important}.digit-boss-text{display:flex;align-items:center;gap:4px;white-space:nowrap}.highlight{color:#fb0;font-weight:700}.arrow-icon{color:#fb0;margin-left:4px;font-size:14px}.generateSummary{margin-right:.4rem;margin-left:.4rem}\n"], dependencies: [{ kind: "component", type: AnnuityCalculatorRadioComponent, selector: "lib-annuity-calculator-radio", inputs: ["reactiveFormControlobject", "field"], outputs: ["change", "growthRateChange"] }, { kind: "component", type: HrLineComponent, selector: "lib-hr-line", inputs: ["field"] }, { kind: "component", type: ToggleComponent, selector: "lib-toggle", inputs: ["field", "reactiveFormControlobject"], outputs: ["change"] }, { kind: "component", type: SelectTextboxComponent, selector: "lib-select-textbox", inputs: ["field", "reactiveFormControlobject"], outputs: ["selectionChange"] }, { kind: "component", type: ButtonComponent, selector: "lib-button", inputs: ["field"] }, { kind: "component", type: IconButtonComponent, selector: "lib-icon-button", inputs: ["field"] }, { kind: "component", type: RadioComponent, selector: "lib-radio", inputs: ["reactiveFormControlobject", "field"], outputs: ["change"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
8233
8285
  }
8234
8286
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AnnuityPremiumCalculatorComponent, decorators: [{
8235
8287
  type: Component,