master-control 0.4.89 → 0.4.90

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 +7 -10
  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 +9 -14
  8. package/esm2022/lib/file-preview/file-preview.component.mjs +7 -10
  9. package/esm2022/lib/iframe/iframe.component.mjs +7 -10
  10. package/esm2022/lib/info-textbox/info-textbox.component.mjs +9 -14
  11. package/esm2022/lib/master-control.service.mjs +1 -4
  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 +9 -14
  15. package/esm2022/lib/otp-textbox/otp-textbox.component.mjs +11 -15
  16. package/esm2022/lib/radio/radio.component.mjs +3 -3
  17. package/esm2022/lib/search-multi-select/search-multi-select.component.mjs +13 -18
  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 +9 -14
  21. package/esm2022/lib/suffix-textbox/suffix-textbox.component.mjs +10 -15
  22. package/esm2022/lib/tag-mob-number/tag-mob-number.component.mjs +10 -15
  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 +9 -14
  26. package/esm2022/lib/textbox-with-text/textbox-with-text.component.mjs +9 -14
  27. package/esm2022/lib/textbox-with-underscore/textbox-with-underscore.component.mjs +9 -14
  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 +110 -162
  31. package/fesm2022/master-control.mjs.map +1 -1
  32. package/lib/annuity-calculator-radio/annuity-calculator-radio.component.d.ts +1 -3
  33. package/lib/email-with-domain/email-with-domain.component.d.ts +0 -3
  34. package/lib/file-preview/file-preview.component.d.ts +1 -3
  35. package/lib/iframe/iframe.component.d.ts +1 -3
  36. package/lib/info-textbox/info-textbox.component.d.ts +0 -3
  37. package/lib/master-control.service.d.ts +0 -1
  38. package/lib/otp-mob-number/otp-mob-number.component.d.ts +0 -3
  39. package/lib/otp-textbox/otp-textbox.component.d.ts +1 -3
  40. package/lib/search-multi-select/search-multi-select.component.d.ts +0 -3
  41. package/lib/subscript-textbox/subscript-textbox.component.d.ts +0 -3
  42. package/lib/suffix-textbox/suffix-textbox.component.d.ts +0 -3
  43. package/lib/tag-mob-number/tag-mob-number.component.d.ts +0 -3
  44. package/lib/textbox-with-image/textbox-with-image.component.d.ts +0 -3
  45. package/lib/textbox-with-text/textbox-with-text.component.d.ts +0 -3
  46. package/lib/textbox-with-underscore/textbox-with-underscore.component.d.ts +0 -3
  47. package/master-control-0.4.90.tgz +0 -0
  48. package/package.json +1 -1
  49. package/master-control-0.4.89.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 i3 from '@angular/material/form-field';
5
+ import * as i2$1 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 i5 from '@angular/forms';
9
+ import * as i4 from '@angular/forms';
10
10
  import { NG_VALUE_ACCESSOR, ReactiveFormsModule, FormsModule, FormGroup } from '@angular/forms';
11
- import * as i5$3 from '@angular/material/autocomplete';
11
+ import * as i5$1 from '@angular/material/autocomplete';
12
12
  import { MatAutocompleteModule } from '@angular/material/autocomplete';
13
- import * as i4 from '@angular/material/core';
13
+ import * as i6 from '@angular/material/core';
14
14
  import { MatOptionModule, DateAdapter, MAT_DATE_FORMATS } from '@angular/material/core';
15
- import * as i3$1 from '@angular/material/select';
15
+ import * as i3 from '@angular/material/select';
16
16
  import { MatSelectModule } from '@angular/material/select';
17
- import * as i2$1 from '@angular/material/radio';
17
+ import * as i2$2 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$1 from '@angular/material/datepicker';
22
+ import * as i5 from '@angular/material/datepicker';
23
23
  import { MatDatepickerModule } from '@angular/material/datepicker';
24
- import * as i5$2 from '@angular/material/checkbox';
24
+ import * as i4$1 from '@angular/material/checkbox';
25
25
  import { MatCheckboxModule } from '@angular/material/checkbox';
26
- import * as i2$2 from '@angular/material/tabs';
26
+ import * as i2$3 from '@angular/material/tabs';
27
27
  import { MatTabsModule } from '@angular/material/tabs';
28
- import * as i6 from '@angular/material/chips';
28
+ import * as i6$1 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$3 from '@angular/material/stepper';
32
+ import * as i2$4 from '@angular/material/stepper';
33
33
  import { MatStepperModule } from '@angular/material/stepper';
34
- import * as i4$1 from '@angular/material/tooltip';
34
+ import * as i4$2 from '@angular/material/tooltip';
35
35
  import { MatTooltipModule } from '@angular/material/tooltip';
36
- import * as i5$4 from '@angular/material/paginator';
36
+ import * as i5$2 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$2 from '@angular/google-maps';
40
+ import * as i4$3 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,9 +308,6 @@ class MasterControlService {
308
308
  return value;
309
309
  }
310
310
  }
311
- replaceSpacesWithUnderscores(value) {
312
- return value.replace(/ /g, '_');
313
- }
314
311
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MasterControlService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
315
312
  static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MasterControlService, providedIn: 'root' });
316
313
  }
@@ -404,7 +401,7 @@ class TextboxComponent {
404
401
  useExisting: TextboxComponent,
405
402
  multi: true
406
403
  }
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"] }] });
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"] }] });
408
405
  }
409
406
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TextboxComponent, decorators: [{
410
407
  type: Component,
@@ -419,7 +416,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
419
416
  useExisting: TextboxComponent,
420
417
  multi: true
421
418
  }
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"] }]
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"] }]
423
420
  }], ctorParameters: () => [{ type: MasterControlService }], propDecorators: { blur: [{
424
421
  type: Output
425
422
  }] } });
@@ -703,7 +700,7 @@ class SelectComponent {
703
700
  useExisting: SelectComponent,
704
701
  multi: true
705
702
  }
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"] }] });
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"] }] });
707
704
  }
708
705
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SelectComponent, decorators: [{
709
706
  type: Component,
@@ -723,7 +720,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
723
720
  useExisting: SelectComponent,
724
721
  multi: true
725
722
  }
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"] }]
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"] }]
727
724
  }], ctorParameters: () => [{ type: MasterControlService }], propDecorators: { selectionChange: [{
728
725
  type: Output
729
726
  }], infoClick: [{
@@ -783,7 +780,7 @@ class RadioComponent {
783
780
  useExisting: RadioComponent,
784
781
  multi: true
785
782
  }
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"] }] });
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"] }] });
787
784
  }
788
785
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RadioComponent, decorators: [{
789
786
  type: Component,
@@ -799,7 +796,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
799
796
  useExisting: RadioComponent,
800
797
  multi: true
801
798
  }
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"] }]
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"] }]
803
800
  }], ctorParameters: () => [{ type: MasterControlService }], propDecorators: { change: [{
804
801
  type: Output
805
802
  }] } });
@@ -842,7 +839,7 @@ class ToggleComponent {
842
839
  useExisting: forwardRef(() => ToggleComponent),
843
840
  multi: true,
844
841
  },
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"] }] });
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"] }] });
846
843
  }
847
844
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ToggleComponent, decorators: [{
848
845
  type: Component,
@@ -852,14 +849,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
852
849
  useExisting: forwardRef(() => ToggleComponent),
853
850
  multi: true,
854
851
  },
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"] }]
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"] }]
856
853
  }], ctorParameters: () => [{ type: MasterControlService }], propDecorators: { change: [{
857
854
  type: Output
858
855
  }] } });
859
856
 
860
857
  class FilePreviewComponent {
861
858
  sanitizer;
862
- masterService;
863
859
  field = input.required();
864
860
  file = input(null);
865
861
  closed = new EventEmitter();
@@ -867,9 +863,8 @@ class FilePreviewComponent {
867
863
  fileObjectUrl = '';
868
864
  textContent = '';
869
865
  safeFileUrl = null;
870
- constructor(sanitizer, masterService) {
866
+ constructor(sanitizer) {
871
867
  this.sanitizer = sanitizer;
872
- this.masterService = masterService;
873
868
  }
874
869
  isImage() {
875
870
  return this.file()?.type.startsWith('image/') || false;
@@ -938,13 +933,13 @@ class FilePreviewComponent {
938
933
  document.body.removeChild(link);
939
934
  setTimeout(() => URL.revokeObjectURL(url), 100);
940
935
  }
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"] }] });
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"] }] });
943
938
  }
944
939
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FilePreviewComponent, decorators: [{
945
940
  type: Component,
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: [{
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: [{
948
943
  type: Output
949
944
  }] } });
950
945
 
@@ -1188,7 +1183,7 @@ class UploadComponent {
1188
1183
  useExisting: UploadComponent,
1189
1184
  multi: true
1190
1185
  }
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"] }] });
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"] }] });
1192
1187
  }
1193
1188
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UploadComponent, decorators: [{
1194
1189
  type: Component,
@@ -1202,7 +1197,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
1202
1197
  useExisting: UploadComponent,
1203
1198
  multi: true
1204
1199
  }
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"] }]
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"] }]
1206
1201
  }], ctorParameters: () => [{ type: MasterControlService }, { type: i0.ApplicationRef }, { type: i0.EnvironmentInjector }, { type: MasterService }], propDecorators: { fileInput: [{
1207
1202
  type: ViewChild,
1208
1203
  args: ['fileInput']
@@ -1383,7 +1378,7 @@ class DobComponent {
1383
1378
  deps: []
1384
1379
  },
1385
1380
  { provide: MAT_DATE_FORMATS, useValue: MY_DATE_FORMAT }
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"] }] });
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"] }] });
1387
1382
  }
1388
1383
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DobComponent, decorators: [{
1389
1384
  type: Component,
@@ -1399,7 +1394,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
1399
1394
  deps: []
1400
1395
  },
1401
1396
  { provide: MAT_DATE_FORMATS, useValue: MY_DATE_FORMAT }
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"] }]
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"] }]
1403
1398
  }], ctorParameters: () => [{ type: MasterControlService }], propDecorators: { blur: [{
1404
1399
  type: Output
1405
1400
  }], valueChange: [{
@@ -1478,7 +1473,7 @@ class MobNumberComponent {
1478
1473
  useExisting: MobNumberComponent,
1479
1474
  multi: true
1480
1475
  }
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"] }] });
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"] }] });
1482
1477
  }
1483
1478
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MobNumberComponent, decorators: [{
1484
1479
  type: Component,
@@ -1488,7 +1483,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
1488
1483
  useExisting: MobNumberComponent,
1489
1484
  multi: true
1490
1485
  }
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"] }]
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"] }]
1492
1487
  }], ctorParameters: () => [{ type: MasterControlService }], propDecorators: { blur: [{
1493
1488
  type: Output
1494
1489
  }] } });
@@ -1569,7 +1564,7 @@ class CheckboxComponent {
1569
1564
  useExisting: CheckboxComponent,
1570
1565
  multi: true
1571
1566
  }
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"] }] });
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"] }] });
1573
1568
  }
1574
1569
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CheckboxComponent, decorators: [{
1575
1570
  type: Component,
@@ -1579,7 +1574,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
1579
1574
  useExisting: CheckboxComponent,
1580
1575
  multi: true
1581
1576
  }
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"] }]
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"] }]
1583
1578
  }], ctorParameters: () => [{ type: MasterControlService }], propDecorators: { change: [{
1584
1579
  type: Output
1585
1580
  }] } });
@@ -1632,7 +1627,7 @@ class TextareaComponent {
1632
1627
  useExisting: TextareaComponent,
1633
1628
  multi: true
1634
1629
  }
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 }] });
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 }] });
1636
1631
  }
1637
1632
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TextareaComponent, decorators: [{
1638
1633
  type: Component,
@@ -1646,7 +1641,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
1646
1641
  useExisting: TextareaComponent,
1647
1642
  multi: true
1648
1643
  }
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"] }]
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"] }]
1650
1645
  }], ctorParameters: () => [{ type: MasterControlService }], propDecorators: { blur: [{
1651
1646
  type: Output
1652
1647
  }] } });
@@ -1667,7 +1662,7 @@ class TabComponent {
1667
1662
  this.field().selectedIndex = this.selectedIndex;
1668
1663
  }
1669
1664
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TabComponent, deps: [{ token: MasterControlService }], target: i0.ɵɵFactoryTarget.Component });
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"] }] });
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"] }] });
1671
1666
  }
1672
1667
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TabComponent, decorators: [{
1673
1668
  type: Component,
@@ -1835,7 +1830,7 @@ class AutocompleteComponent {
1835
1830
  useExisting: AutocompleteComponent,
1836
1831
  multi: true
1837
1832
  }
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"] }] });
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"] }] });
1839
1834
  }
1840
1835
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AutocompleteComponent, decorators: [{
1841
1836
  type: Component,
@@ -1853,7 +1848,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
1853
1848
  useExisting: AutocompleteComponent,
1854
1849
  multi: true
1855
1850
  }
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"] }]
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"] }]
1857
1852
  }], ctorParameters: () => [{ type: MasterControlService }], propDecorators: { blur: [{
1858
1853
  type: Output
1859
1854
  }], selectionChanged: [{
@@ -1963,7 +1958,7 @@ class MultipleSelectComponent {
1963
1958
  useExisting: MultipleSelectComponent,
1964
1959
  multi: true
1965
1960
  }
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"] }] });
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"] }] });
1967
1962
  }
1968
1963
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MultipleSelectComponent, decorators: [{
1969
1964
  type: Component,
@@ -1980,7 +1975,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
1980
1975
  useExisting: MultipleSelectComponent,
1981
1976
  multi: true
1982
1977
  }
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"] }]
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"] }]
1984
1979
  }], ctorParameters: () => [{ type: MasterControlService }], propDecorators: { selectionChange: [{
1985
1980
  type: Output
1986
1981
  }] } });
@@ -2073,7 +2068,7 @@ class SelectTextboxComponent {
2073
2068
  useExisting: SelectTextboxComponent,
2074
2069
  multi: true
2075
2070
  }
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"] }] });
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"] }] });
2077
2072
  }
2078
2073
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SelectTextboxComponent, decorators: [{
2079
2074
  type: Component,
@@ -2083,14 +2078,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
2083
2078
  useExisting: SelectTextboxComponent,
2084
2079
  multi: true
2085
2080
  }
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"] }]
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"] }]
2087
2082
  }], ctorParameters: () => [{ type: MasterControlService }] });
2088
2083
 
2089
2084
  class OtpTextboxComponent {
2090
- service;
2091
- constructor(service) {
2092
- this.service = service;
2093
- }
2085
+ constructor() { }
2094
2086
  field = input.required();
2095
2087
  inputValue = null;
2096
2088
  reactiveFormControlobject = input();
@@ -2117,14 +2109,14 @@ class OtpTextboxComponent {
2117
2109
  onInputBlur() {
2118
2110
  this._unTouched();
2119
2111
  }
2120
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: OtpTextboxComponent, deps: [{ token: MasterControlService }], target: i0.ɵɵFactoryTarget.Component });
2112
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: OtpTextboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
2121
2113
  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: [
2122
2114
  {
2123
2115
  provide: NG_VALUE_ACCESSOR,
2124
2116
  useExisting: OtpTextboxComponent,
2125
2117
  multi: true
2126
2118
  }
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"] }] });
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"] }] });
2128
2120
  }
2129
2121
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: OtpTextboxComponent, decorators: [{
2130
2122
  type: Component,
@@ -2141,8 +2133,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
2141
2133
  useExisting: OtpTextboxComponent,
2142
2134
  multi: true
2143
2135
  }
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 }] });
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: () => [] });
2146
2138
 
2147
2139
  class AmountTextboxComponent {
2148
2140
  sharedService;
@@ -2339,7 +2331,7 @@ class AmountTextboxComponent {
2339
2331
  useExisting: AmountTextboxComponent,
2340
2332
  multi: true
2341
2333
  }
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"] }] });
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"] }] });
2343
2335
  }
2344
2336
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AmountTextboxComponent, decorators: [{
2345
2337
  type: Component,
@@ -2354,16 +2346,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
2354
2346
  useExisting: AmountTextboxComponent,
2355
2347
  multi: true
2356
2348
  }
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"] }]
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"] }]
2358
2350
  }], ctorParameters: () => [{ type: MasterControlService }], propDecorators: { blur: [{
2359
2351
  type: Output
2360
2352
  }] } });
2361
2353
 
2362
2354
  class SuffixTextboxComponent {
2363
- service;
2364
- constructor(service) {
2365
- this.service = service;
2366
- }
2367
2355
  field = input.required();
2368
2356
  inputValue = null;
2369
2357
  reactiveFormControlobject = input();
@@ -2393,14 +2381,14 @@ class SuffixTextboxComponent {
2393
2381
  this._unTouched();
2394
2382
  this.blur.emit(event);
2395
2383
  }
2396
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SuffixTextboxComponent, deps: [{ token: MasterControlService }], target: i0.ɵɵFactoryTarget.Component });
2384
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SuffixTextboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
2397
2385
  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: [
2398
2386
  {
2399
2387
  provide: NG_VALUE_ACCESSOR,
2400
2388
  useExisting: SuffixTextboxComponent,
2401
2389
  multi: true
2402
2390
  }
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"] }] });
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"] }] });
2404
2392
  }
2405
2393
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SuffixTextboxComponent, decorators: [{
2406
2394
  type: Component,
@@ -2417,16 +2405,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
2417
2405
  useExisting: SuffixTextboxComponent,
2418
2406
  multi: true
2419
2407
  }
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: [{
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: [{
2422
2410
  type: Output
2423
2411
  }] } });
2424
2412
 
2425
2413
  class OtpMobNumberComponent {
2426
- service;
2427
- constructor(service) {
2428
- this.service = service;
2429
- }
2430
2414
  CountryCode = '+91';
2431
2415
  field = input.required();
2432
2416
  inputValue = null;
@@ -2454,14 +2438,14 @@ class OtpMobNumberComponent {
2454
2438
  onInputBlur() {
2455
2439
  this._unTouched();
2456
2440
  }
2457
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: OtpMobNumberComponent, deps: [{ token: MasterControlService }], target: i0.ɵɵFactoryTarget.Component });
2441
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: OtpMobNumberComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
2458
2442
  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: [
2459
2443
  {
2460
2444
  provide: NG_VALUE_ACCESSOR,
2461
2445
  useExisting: OtpMobNumberComponent,
2462
2446
  multi: true
2463
2447
  }
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"] }] });
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"] }] });
2465
2449
  }
2466
2450
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: OtpMobNumberComponent, decorators: [{
2467
2451
  type: Component,
@@ -2476,14 +2460,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
2476
2460
  useExisting: OtpMobNumberComponent,
2477
2461
  multi: true
2478
2462
  }
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 }] });
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
+ }] });
2481
2465
 
2482
2466
  class TagMobNumberComponent {
2483
- service;
2484
- constructor(service) {
2485
- this.service = service;
2486
- }
2487
2467
  CountryCode = '+91';
2488
2468
  field = input.required();
2489
2469
  inputValue = null;
@@ -2511,14 +2491,14 @@ class TagMobNumberComponent {
2511
2491
  onInputBlur() {
2512
2492
  this._unTouched();
2513
2493
  }
2514
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TagMobNumberComponent, deps: [{ token: MasterControlService }], target: i0.ɵɵFactoryTarget.Component });
2494
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TagMobNumberComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
2515
2495
  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: [
2516
2496
  {
2517
2497
  provide: NG_VALUE_ACCESSOR,
2518
2498
  useExisting: TagMobNumberComponent,
2519
2499
  multi: true
2520
2500
  }
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"] }] });
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"] }] });
2522
2502
  }
2523
2503
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TagMobNumberComponent, decorators: [{
2524
2504
  type: Component,
@@ -2534,8 +2514,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
2534
2514
  useExisting: TagMobNumberComponent,
2535
2515
  multi: true
2536
2516
  }
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 }] });
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
+ }] });
2539
2519
 
2540
2520
  class AgeDateComponent {
2541
2521
  service;
@@ -2718,7 +2698,7 @@ class AgeDateComponent {
2718
2698
  useExisting: AgeDateComponent,
2719
2699
  multi: true
2720
2700
  },
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"] }] });
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"] }] });
2722
2702
  }
2723
2703
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AgeDateComponent, decorators: [{
2724
2704
  type: Component,
@@ -2754,7 +2734,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
2754
2734
  useExisting: AgeDateComponent,
2755
2735
  multi: true
2756
2736
  },
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"] }]
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"] }]
2758
2738
  }], ctorParameters: () => [{ type: MasterControlService }], propDecorators: { blur: [{
2759
2739
  type: Output
2760
2740
  }], valueChange: [{
@@ -2776,10 +2756,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
2776
2756
  }] });
2777
2757
 
2778
2758
  class InfoTextboxComponent {
2779
- service;
2780
- constructor(service) {
2781
- this.service = service;
2782
- }
2783
2759
  field = input.required();
2784
2760
  inputValue = null;
2785
2761
  reactiveFormControlobject = input();
@@ -2811,14 +2787,14 @@ class InfoTextboxComponent {
2811
2787
  handleWhereToFindClick() {
2812
2788
  this.infoClick.emit({ field: this.field });
2813
2789
  }
2814
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: InfoTextboxComponent, deps: [{ token: MasterControlService }], target: i0.ɵɵFactoryTarget.Component });
2790
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: InfoTextboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
2815
2791
  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: [
2816
2792
  {
2817
2793
  provide: NG_VALUE_ACCESSOR,
2818
2794
  useExisting: InfoTextboxComponent,
2819
2795
  multi: true
2820
2796
  }
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"] }] });
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"] }] });
2822
2798
  }
2823
2799
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: InfoTextboxComponent, decorators: [{
2824
2800
  type: Component,
@@ -2833,18 +2809,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
2833
2809
  useExisting: InfoTextboxComponent,
2834
2810
  multi: true
2835
2811
  }
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: [{
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: [{
2838
2814
  type: Input
2839
2815
  }], infoClick: [{
2840
2816
  type: Output
2841
2817
  }] } });
2842
2818
 
2843
2819
  class TextboxWithImageComponent {
2844
- service;
2845
- constructor(service) {
2846
- this.service = service;
2847
- }
2848
2820
  field = input.required();
2849
2821
  inputValue = null;
2850
2822
  reactiveFormControlobject = input();
@@ -2878,14 +2850,14 @@ class TextboxWithImageComponent {
2878
2850
  enableField() {
2879
2851
  this.field().isDisable = false;
2880
2852
  }
2881
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TextboxWithImageComponent, deps: [{ token: MasterControlService }], target: i0.ɵɵFactoryTarget.Component });
2853
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TextboxWithImageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
2882
2854
  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: [
2883
2855
  {
2884
2856
  provide: NG_VALUE_ACCESSOR,
2885
2857
  useExisting: TextboxWithImageComponent,
2886
2858
  multi: true
2887
2859
  }
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"] }] });
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"] }] });
2889
2861
  }
2890
2862
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TextboxWithImageComponent, decorators: [{
2891
2863
  type: Component,
@@ -2895,16 +2867,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
2895
2867
  useExisting: TextboxWithImageComponent,
2896
2868
  multi: true
2897
2869
  }
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: [{
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: [{
2900
2872
  type: Output
2901
2873
  }] } });
2902
2874
 
2903
2875
  class EmailWithDomainComponent {
2904
- masterService;
2905
- constructor(masterService) {
2906
- this.masterService = masterService;
2907
- }
2908
2876
  pincode = '';
2909
2877
  emailUser = '';
2910
2878
  emailDomain = '';
@@ -2934,14 +2902,14 @@ class EmailWithDomainComponent {
2934
2902
  onInputBlur() {
2935
2903
  this._unTouched();
2936
2904
  }
2937
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: EmailWithDomainComponent, deps: [{ token: MasterControlService }], target: i0.ɵɵFactoryTarget.Component });
2905
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: EmailWithDomainComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
2938
2906
  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: [
2939
2907
  {
2940
2908
  provide: NG_VALUE_ACCESSOR,
2941
2909
  useExisting: EmailWithDomainComponent,
2942
2910
  multi: true
2943
2911
  }
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"] }] });
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"] }] });
2945
2913
  }
2946
2914
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: EmailWithDomainComponent, decorators: [{
2947
2915
  type: Component,
@@ -2951,8 +2919,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
2951
2919
  useExisting: EmailWithDomainComponent,
2952
2920
  multi: true
2953
2921
  }
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 }] });
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
+ }] });
2956
2924
 
2957
2925
  class ImageUploadComponent {
2958
2926
  field = input.required();
@@ -3004,10 +2972,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
3004
2972
  }] });
3005
2973
 
3006
2974
  class TextboxWithUnderscoreComponent {
3007
- service;
3008
- constructor(service) {
3009
- this.service = service;
3010
- }
3011
2975
  field = input.required();
3012
2976
  inputValue = null;
3013
2977
  reactiveFormControlobject = input();
@@ -3048,14 +3012,14 @@ class TextboxWithUnderscoreComponent {
3048
3012
  getUnderscorePlaceholder() {
3049
3013
  return '_'.repeat(this.field().validators.maxLength);
3050
3014
  }
3051
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TextboxWithUnderscoreComponent, deps: [{ token: MasterControlService }], target: i0.ɵɵFactoryTarget.Component });
3015
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TextboxWithUnderscoreComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
3052
3016
  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: [
3053
3017
  {
3054
3018
  provide: NG_VALUE_ACCESSOR,
3055
3019
  useExisting: TextboxWithUnderscoreComponent,
3056
3020
  multi: true
3057
3021
  }
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"] }] });
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"] }] });
3059
3023
  }
3060
3024
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TextboxWithUnderscoreComponent, decorators: [{
3061
3025
  type: Component,
@@ -3065,8 +3029,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
3065
3029
  useExisting: TextboxWithUnderscoreComponent,
3066
3030
  multi: true
3067
3031
  }
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 }] });
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
+ }] });
3070
3034
 
3071
3035
  class UnderscoreMobNumberComponent {
3072
3036
  CountryCode = '+91';
@@ -3117,7 +3081,7 @@ class UnderscoreMobNumberComponent {
3117
3081
  useExisting: UnderscoreMobNumberComponent,
3118
3082
  multi: true
3119
3083
  }
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"] }] });
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"] }] });
3121
3085
  }
3122
3086
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UnderscoreMobNumberComponent, decorators: [{
3123
3087
  type: Component,
@@ -3161,7 +3125,7 @@ class StepperComponent {
3161
3125
  this.field().editStepper = this.field().configData.stepperData ? this.field().configData.stepperData : this.masterSharedService?.configData?.stepper?.stepperData;
3162
3126
  }
3163
3127
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: StepperComponent, deps: [{ token: MasterControlService }], target: i0.ɵɵFactoryTarget.Component });
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"] }] });
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"] }] });
3165
3129
  }
3166
3130
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: StepperComponent, decorators: [{
3167
3131
  type: Component,
@@ -3213,10 +3177,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
3213
3177
  }] });
3214
3178
 
3215
3179
  class SearchMultiSelectComponent {
3216
- service;
3217
- constructor(service) {
3218
- this.service = service;
3219
- }
3220
3180
  field = input.required();
3221
3181
  selectedValues = [];
3222
3182
  visibleChip = [];
@@ -3297,14 +3257,14 @@ class SearchMultiSelectComponent {
3297
3257
  document.body.style.removeProperty('--custom-select-option-border-radius-focus');
3298
3258
  }
3299
3259
  }
3300
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SearchMultiSelectComponent, deps: [{ token: MasterControlService }], target: i0.ɵɵFactoryTarget.Component });
3260
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SearchMultiSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
3301
3261
  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: [
3302
3262
  {
3303
3263
  provide: NG_VALUE_ACCESSOR,
3304
3264
  useExisting: SearchMultiSelectComponent,
3305
3265
  multi: true
3306
3266
  }
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"] }] });
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"] }] });
3308
3268
  }
3309
3269
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SearchMultiSelectComponent, decorators: [{
3310
3270
  type: Component,
@@ -3323,14 +3283,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
3323
3283
  useExisting: SearchMultiSelectComponent,
3324
3284
  multi: true
3325
3285
  }
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 }] });
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
+ }] });
3328
3288
 
3329
3289
  class SubscriptTextboxComponent {
3330
- service;
3331
- constructor(service) {
3332
- this.service = service;
3333
- }
3334
3290
  inputValue = null;
3335
3291
  field = input.required();
3336
3292
  reactiveFormControlobject = input();
@@ -3357,14 +3313,14 @@ class SubscriptTextboxComponent {
3357
3313
  onInputBlur() {
3358
3314
  this._unTouched();
3359
3315
  }
3360
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SubscriptTextboxComponent, deps: [{ token: MasterControlService }], target: i0.ɵɵFactoryTarget.Component });
3316
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SubscriptTextboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
3361
3317
  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: [
3362
3318
  {
3363
3319
  provide: NG_VALUE_ACCESSOR,
3364
3320
  useExisting: SubscriptTextboxComponent,
3365
3321
  multi: true
3366
3322
  }
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"] }] });
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"] }] });
3368
3324
  }
3369
3325
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SubscriptTextboxComponent, decorators: [{
3370
3326
  type: Component,
@@ -3379,8 +3335,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
3379
3335
  useExisting: SubscriptTextboxComponent,
3380
3336
  multi: true
3381
3337
  }
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 }] });
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
+ }] });
3384
3340
 
3385
3341
  class LabelComponent {
3386
3342
  field = input.required();
@@ -3500,7 +3456,7 @@ class TableComponent {
3500
3456
  this.actionItemClicked.emit(emitOBJ);
3501
3457
  }
3502
3458
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TableComponent, deps: [{ token: MasterControlService }], target: i0.ɵɵFactoryTarget.Component });
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"] }] });
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"] }] });
3504
3460
  }
3505
3461
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TableComponent, decorators: [{
3506
3462
  type: Component,
@@ -3515,10 +3471,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
3515
3471
  }] } });
3516
3472
 
3517
3473
  class TextboxWithTextComponent {
3518
- service;
3519
- constructor(service) {
3520
- this.service = service;
3521
- }
3522
3474
  inputValue = null;
3523
3475
  reactiveFormControlobject = input();
3524
3476
  field = input.required();
@@ -3543,14 +3495,14 @@ class TextboxWithTextComponent {
3543
3495
  this._unTouched();
3544
3496
  this.blur.emit(event);
3545
3497
  }
3546
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TextboxWithTextComponent, deps: [{ token: MasterControlService }], target: i0.ɵɵFactoryTarget.Component });
3498
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TextboxWithTextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
3547
3499
  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: [
3548
3500
  {
3549
3501
  provide: NG_VALUE_ACCESSOR,
3550
3502
  useExisting: TextboxWithTextComponent,
3551
3503
  multi: true,
3552
3504
  },
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"] }] });
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"] }] });
3554
3506
  }
3555
3507
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TextboxWithTextComponent, decorators: [{
3556
3508
  type: Component,
@@ -3565,8 +3517,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
3565
3517
  useExisting: TextboxWithTextComponent,
3566
3518
  multi: true,
3567
3519
  },
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: [{
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: [{
3570
3522
  type: Output
3571
3523
  }] } });
3572
3524
 
@@ -3676,12 +3628,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
3676
3628
 
3677
3629
  class IframeComponent {
3678
3630
  sanitizer;
3679
- masterService;
3680
3631
  field = input.required();
3681
3632
  safeUrl = null;
3682
- constructor(sanitizer, masterService) {
3633
+ constructor(sanitizer) {
3683
3634
  this.sanitizer = sanitizer;
3684
- this.masterService = masterService;
3685
3635
  }
3686
3636
  ngOnInit() {
3687
3637
  if (this.field() && this.field().imageUrl) {
@@ -3695,13 +3645,13 @@ class IframeComponent {
3695
3645
  }
3696
3646
  return iframeUrl;
3697
3647
  }
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"] }] });
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"] }] });
3700
3650
  }
3701
3651
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: IframeComponent, decorators: [{
3702
3652
  type: Component,
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 }] });
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 }] });
3705
3655
 
3706
3656
  class ToggleButtonComponent {
3707
3657
  reactiveFormControlobject = input();
@@ -3741,7 +3691,7 @@ class ToggleButtonComponent {
3741
3691
  useExisting: ToggleButtonComponent,
3742
3692
  multi: true,
3743
3693
  },
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"] }] });
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"] }] });
3745
3695
  }
3746
3696
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ToggleButtonComponent, decorators: [{
3747
3697
  type: Component,
@@ -6555,7 +6505,7 @@ class MedialQuestionsComponent {
6555
6505
  this.questionsValueChange.emit(this.personUwAnswers);
6556
6506
  }
6557
6507
  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 });
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"] }] });
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"] }] });
6559
6509
  }
6560
6510
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MedialQuestionsComponent, decorators: [{
6561
6511
  type: Component,
@@ -6956,7 +6906,7 @@ class StepperWIthArrowComponent {
6956
6906
  }
6957
6907
  }
6958
6908
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: StepperWIthArrowComponent, deps: [{ token: MasterControlService }], target: i0.ɵɵFactoryTarget.Component });
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"] }] });
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"] }] });
6960
6910
  }
6961
6911
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: StepperWIthArrowComponent, decorators: [{
6962
6912
  type: Component,
@@ -7053,10 +7003,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
7053
7003
 
7054
7004
  class AnnuityCalculatorRadioComponent {
7055
7005
  el;
7056
- service;
7057
- constructor(el, service) {
7006
+ constructor(el) {
7058
7007
  this.el = el;
7059
- this.service = service;
7060
7008
  }
7061
7009
  ngOnInit() {
7062
7010
  const f = this.field();
@@ -7122,14 +7070,14 @@ class AnnuityCalculatorRadioComponent {
7122
7070
  card.style.setProperty('--arrow-left', `${centerX}px`);
7123
7071
  }
7124
7072
  }
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 });
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 });
7126
7074
  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: [
7127
7075
  {
7128
7076
  provide: NG_VALUE_ACCESSOR,
7129
7077
  useExisting: forwardRef(() => AnnuityCalculatorRadioComponent),
7130
7078
  multi: true
7131
7079
  }
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 }] });
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 }] });
7133
7081
  }
7134
7082
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AnnuityCalculatorRadioComponent, decorators: [{
7135
7083
  type: Component,
@@ -7140,8 +7088,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
7140
7088
  useExisting: forwardRef(() => AnnuityCalculatorRadioComponent),
7141
7089
  multi: true
7142
7090
  }
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: [{
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: [{
7145
7093
  type: Output
7146
7094
  }], growthRateChange: [{
7147
7095
  type: Output
@@ -8281,7 +8229,7 @@ class AnnuityPremiumCalculatorComponent {
8281
8229
  return str ? str + ' Only' : '';
8282
8230
  }
8283
8231
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AnnuityPremiumCalculatorComponent, deps: [{ token: MasterControlService }], target: i0.ɵɵFactoryTarget.Component });
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"] }] });
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"] }] });
8285
8233
  }
8286
8234
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AnnuityPremiumCalculatorComponent, decorators: [{
8287
8235
  type: Component,