master-control 0.2.94 → 0.2.96

package/esm2022/lib/radio/radio.component.mjs

@@ -60,7 +60,7 @@ export class RadioComponent {
                 useExisting: RadioComponent,
                 multi: true
             }
-        ], ngImport: i0, template: "<label class=\"field-lable\"  *ngIf=\"field() && field()?.isVisible && field().isShowLabel\" [ngStyle]=\"{\r\n  }\"> {{field()?.label}} <span class=\"error-message\" *ngIf=\"field()?.validators?.isRequired\">*</span> </label>\r\n  @if(reactiveFormControlobject()) {\r\n     <mat-radio-group class=\"w-100\" *ngIf=\"field() && field()?.isVisible\"\r\n    class=\"radio-btn-group radio-btn-gender\"\r\n    [required]=\"field()?.validators?.isRequired\"\r\n    [value]=\"inputValue\"\r\n    [formControl]=\"reactiveFormControlobject()\"\r\n    (change)=\"onRadioGroupChange($event)\"\r\n    >\r\n    <div\r\n      class=\"card radio-card-gender  py-auto px-1\"\r\n      *ngFor=\"let data of field()?.options\"\r\n      [ngClass]=\"{'disable-radio-btn': field()?.isDisable}\"\r\n      (click)=\"toggleRadio(data.value, $event)\"\r\n       [ngStyle]=\"{\r\n    '--radio-button-border-color': inputValue === data.value ? field()?.controlStyle?.focusBorderColor : field()?.controlStyle?.borderColor,\r\n    '--radio-button-background-color': inputValue === data.value ? field()?.controlStyle?.focusBackground : field()?.controlStyle?.background,\r\n    '--radio-button-border-width': inputValue === data.value ? field()?.controlStyle?.focusBorderWidth : field()?.controlStyle?.borderWidth,\r\n    '--radio-button-border-radius': inputValue === data.value ? field()?.controlStyle?.borderRadius : field()?.controlStyle?.borderRadius,\r\n  }\"\r\n      >\r\n      <mat-radio-button\r\n        style=\"min-width: 72px; text-align: center;\"\r\n        class=\"radioButtonGender\"\r\n        [value]=\"data.value\"\r\n      >\r\n        <span style=\"white-space: pre-line;\" class=\"forRadioLabel\" [ngStyle]=\"{\r\n    '--radio-button-font-weight': field()?.controlStyle?.fontWeight,\r\n    '--radio-button-font-size': field()?.controlStyle?.fontSize,\r\n    '--radio-button-font-color': field()?.controlStyle?.color,\r\n  }\">{{ data.label }}\r\n  <img class=\"radio-btn-icon\" *ngIf=\"field()?.imageUrl\" [src]=\"field()?.imageUrl\" alt=\"\">\r\n  </span>\r\n      </mat-radio-button>\r\n    </div>\r\n  </mat-radio-group>\r\n  }@else {\r\n     <mat-radio-group class=\"w-100\" *ngIf=\"field() && field()?.isVisible\"\r\n    class=\"radio-btn-group radio-btn-gender\"\r\n    [required]=\"field()?.validators?.isRequired\"\r\n    [value]=\"inputValue\"\r\n    (change)=\"onRadioGroupChange($event)\"\r\n    >\r\n    <div\r\n      class=\"card radio-card-gender py-auto px-1\"\r\n      style=\"width: 100% !important; min-width: fit-content !important;\"\r\n      *ngFor=\"let data of field()?.options\"\r\n      [ngClass]=\"{'disable-radio-btn': field()?.isDisable}\"\r\n      (click)=\"toggleRadio(data.value, $event)\"\r\n       [ngStyle]=\"{\r\n    '--radio-button-border-color': inputValue === data.value ? field()?.controlStyle?.focusBorderColor : field()?.controlStyle?.borderColor,\r\n    '--radio-button-background-color': inputValue === data.value ? field()?.controlStyle?.focusBackground : field()?.controlStyle?.background,\r\n    '--radio-button-border-width': inputValue === data.value ? field()?.controlStyle?.focusBorderWidth : field()?.controlStyle?.borderWidth,\r\n    '--radio-button-border-radius': inputValue === data.value ? field()?.controlStyle?.borderRadius : field()?.controlStyle?.borderRadius,\r\n  }\"\r\n      >\r\n      <mat-radio-button\r\n        style=\"min-width: 72px; text-align: center;\"\r\n        class=\"radioButtonGender\"\r\n        [value]=\"data.value\"\r\n      >\r\n        <span style=\"white-space: pre-line;\" class=\"forRadioLabel\" [ngStyle]=\"{\r\n    '--radio-button-font-weight': field()?.controlStyle?.fontWeight,\r\n    '--radio-button-font-size': field()?.controlStyle?.fontSize,\r\n    '--radio-button-font-color': field()?.controlStyle?.color,\r\n  }\">{{ data.label }}\r\n  <img class=\"radio-btn-icon\" *ngIf=\"field()?.imageUrl\" [src]=\"field()?.imageUrl\" alt=\"\">\r\n  </span>\r\n      </mat-radio-button>\r\n    </div>\r\n  </mat-radio-group>\r\n  }\r\n  <div class=\"error-message\" *ngIf=\"false\">\r\n    {{field()?.validators?.patternMessage}}.\r\n</div>\r\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}.radio-btn-group{display:flex;align-items:center;gap:1rem;align-self:stretch}::ng-deep .radio-btn-gender .mdc-form-field .mdc-radio{display:none!important}.radio-card-gender{box-shadow:none;border-color:var(--radio-button-border-color,#DADADA);border-width:var(--radio-button-border-width, 1px solid);background:var(--radio-button-background-color, #FFFFFF);display:flex;align-items:center;cursor:pointer;width:max-content!important;border-radius:var(--radio-button-border-radius, 6px)}::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;border:1px solid var(--Colors-Greys-Border-Grey, rgba(221, 221, 221, 1));pointer-events:none;cursor:none}\n"], dependencies: [{ kind: "ngmodule", type: MatRadioModule }, { kind: "directive", type: i2.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i2.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: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.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 }] });
+        ], ngImport: i0, template: "<label class=\"field-lable\"  *ngIf=\"field() && field()?.isVisible && field().isShowLabel\" [ngStyle]=\"{\r\n  }\">{{field()?.label}}<span class=\"error-message\" *ngIf=\"field()?.validators?.isRequired\">*</span></label>\r\n  @if(reactiveFormControlobject()) {\r\n     <mat-radio-group class=\"w-100\" *ngIf=\"field() && field()?.isVisible\"\r\n    class=\"radio-btn-group radio-btn-gender\"\r\n    [required]=\"field()?.validators?.isRequired\"\r\n    [value]=\"inputValue\"\r\n    [formControl]=\"reactiveFormControlobject()\"\r\n    (change)=\"onRadioGroupChange($event)\"\r\n    >\r\n    <div\r\n      class=\"card radio-card-gender  py-auto px-1\"\r\n      *ngFor=\"let data of field()?.options\"\r\n      [ngClass]=\"{'disable-radio-btn': field()?.isDisable}\"\r\n      (click)=\"toggleRadio(data.value, $event)\"\r\n       [ngStyle]=\"{\r\n    '--radio-button-border-color': inputValue === data.value ? field()?.controlStyle?.focusBorderColor : field()?.controlStyle?.borderColor,\r\n    '--radio-button-background-color': inputValue === data.value ? field()?.controlStyle?.focusBackground : field()?.controlStyle?.background,\r\n    '--radio-button-border-width': inputValue === data.value ? field()?.controlStyle?.focusBorderWidth : field()?.controlStyle?.borderWidth,\r\n    '--radio-button-border-radius': inputValue === data.value ? field()?.controlStyle?.borderRadius : field()?.controlStyle?.borderRadius,\r\n  }\"\r\n      >\r\n      <mat-radio-button\r\n        style=\"min-width: 72px; text-align: center;\"\r\n        class=\"radioButtonGender\"\r\n        [value]=\"data.value\"\r\n      >\r\n        <span style=\"white-space: pre-line;\" class=\"forRadioLabel\" [ngStyle]=\"{\r\n    '--radio-button-font-weight': field()?.controlStyle?.fontWeight,\r\n    '--radio-button-font-size': field()?.controlStyle?.fontSize,\r\n    '--radio-button-font-color': field()?.controlStyle?.color,\r\n  }\">{{ data.label }}\r\n  <img class=\"radio-btn-icon\" *ngIf=\"field()?.imageUrl\" [src]=\"field()?.imageUrl\" alt=\"\">\r\n  </span>\r\n      </mat-radio-button>\r\n    </div>\r\n  </mat-radio-group>\r\n  }@else {\r\n     <mat-radio-group class=\"w-100\" *ngIf=\"field() && field()?.isVisible\"\r\n    class=\"radio-btn-group radio-btn-gender\"\r\n    [required]=\"field()?.validators?.isRequired\"\r\n    [value]=\"inputValue\"\r\n    (change)=\"onRadioGroupChange($event)\"\r\n    >\r\n    <div\r\n      class=\"card radio-card-gender py-auto px-1\"\r\n      style=\"width: 100% !important; min-width: fit-content !important;\"\r\n      *ngFor=\"let data of field()?.options\"\r\n      [ngClass]=\"{'disable-radio-btn': field()?.isDisable}\"\r\n      (click)=\"toggleRadio(data.value, $event)\"\r\n       [ngStyle]=\"{\r\n    '--radio-button-border-color': inputValue === data.value ? field()?.controlStyle?.focusBorderColor : field()?.controlStyle?.borderColor,\r\n    '--radio-button-background-color': inputValue === data.value ? field()?.controlStyle?.focusBackground : field()?.controlStyle?.background,\r\n    '--radio-button-border-width': inputValue === data.value ? field()?.controlStyle?.focusBorderWidth : field()?.controlStyle?.borderWidth,\r\n    '--radio-button-border-radius': inputValue === data.value ? field()?.controlStyle?.borderRadius : field()?.controlStyle?.borderRadius,\r\n  }\"\r\n      >\r\n      <mat-radio-button\r\n        style=\"min-width: 72px; text-align: center;\"\r\n        class=\"radioButtonGender\"\r\n        [value]=\"data.value\"\r\n      >\r\n        <span style=\"white-space: pre-line;\" class=\"forRadioLabel\" [ngStyle]=\"{\r\n    '--radio-button-font-weight': field()?.controlStyle?.fontWeight,\r\n    '--radio-button-font-size': field()?.controlStyle?.fontSize,\r\n    '--radio-button-font-color': field()?.controlStyle?.color,\r\n  }\">{{ data.label }}\r\n  <img class=\"radio-btn-icon\" *ngIf=\"field()?.imageUrl\" [src]=\"field()?.imageUrl\" alt=\"\">\r\n  </span>\r\n      </mat-radio-button>\r\n    </div>\r\n  </mat-radio-group>\r\n  }\r\n  <div class=\"error-message\" *ngIf=\"false\">\r\n    {{field()?.validators?.patternMessage}}.\r\n</div>\r\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}.radio-btn-group{display:flex;align-items:center;gap:1rem;align-self:stretch}::ng-deep .radio-btn-gender .mdc-form-field .mdc-radio{display:none!important}.radio-card-gender{box-shadow:none;border-color:var(--radio-button-border-color,#DADADA);border-width:var(--radio-button-border-width, 1px solid);background:var(--radio-button-background-color, #FFFFFF);display:flex;align-items:center;cursor:pointer;width:max-content!important;border-radius:var(--radio-button-border-radius, 6px)}::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;border:1px solid var(--Colors-Greys-Border-Grey, rgba(221, 221, 221, 1));pointer-events:none;cursor:none}\n"], dependencies: [{ kind: "ngmodule", type: MatRadioModule }, { kind: "directive", type: i2.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i2.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: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.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 }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RadioComponent, decorators: [{
             type: Component,
@@ -75,8 +75,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                             useExisting: RadioComponent,
                             multi: true
                         }
-                    ], template: "<label class=\"field-lable\"  *ngIf=\"field() && field()?.isVisible && field().isShowLabel\" [ngStyle]=\"{\r\n  }\"> {{field()?.label}} <span class=\"error-message\" *ngIf=\"field()?.validators?.isRequired\">*</span> </label>\r\n  @if(reactiveFormControlobject()) {\r\n     <mat-radio-group class=\"w-100\" *ngIf=\"field() && field()?.isVisible\"\r\n    class=\"radio-btn-group radio-btn-gender\"\r\n    [required]=\"field()?.validators?.isRequired\"\r\n    [value]=\"inputValue\"\r\n    [formControl]=\"reactiveFormControlobject()\"\r\n    (change)=\"onRadioGroupChange($event)\"\r\n    >\r\n    <div\r\n      class=\"card radio-card-gender  py-auto px-1\"\r\n      *ngFor=\"let data of field()?.options\"\r\n      [ngClass]=\"{'disable-radio-btn': field()?.isDisable}\"\r\n      (click)=\"toggleRadio(data.value, $event)\"\r\n       [ngStyle]=\"{\r\n    '--radio-button-border-color': inputValue === data.value ? field()?.controlStyle?.focusBorderColor : field()?.controlStyle?.borderColor,\r\n    '--radio-button-background-color': inputValue === data.value ? field()?.controlStyle?.focusBackground : field()?.controlStyle?.background,\r\n    '--radio-button-border-width': inputValue === data.value ? field()?.controlStyle?.focusBorderWidth : field()?.controlStyle?.borderWidth,\r\n    '--radio-button-border-radius': inputValue === data.value ? field()?.controlStyle?.borderRadius : field()?.controlStyle?.borderRadius,\r\n  }\"\r\n      >\r\n      <mat-radio-button\r\n        style=\"min-width: 72px; text-align: center;\"\r\n        class=\"radioButtonGender\"\r\n        [value]=\"data.value\"\r\n      >\r\n        <span style=\"white-space: pre-line;\" class=\"forRadioLabel\" [ngStyle]=\"{\r\n    '--radio-button-font-weight': field()?.controlStyle?.fontWeight,\r\n    '--radio-button-font-size': field()?.controlStyle?.fontSize,\r\n    '--radio-button-font-color': field()?.controlStyle?.color,\r\n  }\">{{ data.label }}\r\n  <img class=\"radio-btn-icon\" *ngIf=\"field()?.imageUrl\" [src]=\"field()?.imageUrl\" alt=\"\">\r\n  </span>\r\n      </mat-radio-button>\r\n    </div>\r\n  </mat-radio-group>\r\n  }@else {\r\n     <mat-radio-group class=\"w-100\" *ngIf=\"field() && field()?.isVisible\"\r\n    class=\"radio-btn-group radio-btn-gender\"\r\n    [required]=\"field()?.validators?.isRequired\"\r\n    [value]=\"inputValue\"\r\n    (change)=\"onRadioGroupChange($event)\"\r\n    >\r\n    <div\r\n      class=\"card radio-card-gender py-auto px-1\"\r\n      style=\"width: 100% !important; min-width: fit-content !important;\"\r\n      *ngFor=\"let data of field()?.options\"\r\n      [ngClass]=\"{'disable-radio-btn': field()?.isDisable}\"\r\n      (click)=\"toggleRadio(data.value, $event)\"\r\n       [ngStyle]=\"{\r\n    '--radio-button-border-color': inputValue === data.value ? field()?.controlStyle?.focusBorderColor : field()?.controlStyle?.borderColor,\r\n    '--radio-button-background-color': inputValue === data.value ? field()?.controlStyle?.focusBackground : field()?.controlStyle?.background,\r\n    '--radio-button-border-width': inputValue === data.value ? field()?.controlStyle?.focusBorderWidth : field()?.controlStyle?.borderWidth,\r\n    '--radio-button-border-radius': inputValue === data.value ? field()?.controlStyle?.borderRadius : field()?.controlStyle?.borderRadius,\r\n  }\"\r\n      >\r\n      <mat-radio-button\r\n        style=\"min-width: 72px; text-align: center;\"\r\n        class=\"radioButtonGender\"\r\n        [value]=\"data.value\"\r\n      >\r\n        <span style=\"white-space: pre-line;\" class=\"forRadioLabel\" [ngStyle]=\"{\r\n    '--radio-button-font-weight': field()?.controlStyle?.fontWeight,\r\n    '--radio-button-font-size': field()?.controlStyle?.fontSize,\r\n    '--radio-button-font-color': field()?.controlStyle?.color,\r\n  }\">{{ data.label }}\r\n  <img class=\"radio-btn-icon\" *ngIf=\"field()?.imageUrl\" [src]=\"field()?.imageUrl\" alt=\"\">\r\n  </span>\r\n      </mat-radio-button>\r\n    </div>\r\n  </mat-radio-group>\r\n  }\r\n  <div class=\"error-message\" *ngIf=\"false\">\r\n    {{field()?.validators?.patternMessage}}.\r\n</div>\r\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}.radio-btn-group{display:flex;align-items:center;gap:1rem;align-self:stretch}::ng-deep .radio-btn-gender .mdc-form-field .mdc-radio{display:none!important}.radio-card-gender{box-shadow:none;border-color:var(--radio-button-border-color,#DADADA);border-width:var(--radio-button-border-width, 1px solid);background:var(--radio-button-background-color, #FFFFFF);display:flex;align-items:center;cursor:pointer;width:max-content!important;border-radius:var(--radio-button-border-radius, 6px)}::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;border:1px solid var(--Colors-Greys-Border-Grey, rgba(221, 221, 221, 1));pointer-events:none;cursor:none}\n"] }]
+                    ], template: "<label class=\"field-lable\"  *ngIf=\"field() && field()?.isVisible && field().isShowLabel\" [ngStyle]=\"{\r\n  }\">{{field()?.label}}<span class=\"error-message\" *ngIf=\"field()?.validators?.isRequired\">*</span></label>\r\n  @if(reactiveFormControlobject()) {\r\n     <mat-radio-group class=\"w-100\" *ngIf=\"field() && field()?.isVisible\"\r\n    class=\"radio-btn-group radio-btn-gender\"\r\n    [required]=\"field()?.validators?.isRequired\"\r\n    [value]=\"inputValue\"\r\n    [formControl]=\"reactiveFormControlobject()\"\r\n    (change)=\"onRadioGroupChange($event)\"\r\n    >\r\n    <div\r\n      class=\"card radio-card-gender  py-auto px-1\"\r\n      *ngFor=\"let data of field()?.options\"\r\n      [ngClass]=\"{'disable-radio-btn': field()?.isDisable}\"\r\n      (click)=\"toggleRadio(data.value, $event)\"\r\n       [ngStyle]=\"{\r\n    '--radio-button-border-color': inputValue === data.value ? field()?.controlStyle?.focusBorderColor : field()?.controlStyle?.borderColor,\r\n    '--radio-button-background-color': inputValue === data.value ? field()?.controlStyle?.focusBackground : field()?.controlStyle?.background,\r\n    '--radio-button-border-width': inputValue === data.value ? field()?.controlStyle?.focusBorderWidth : field()?.controlStyle?.borderWidth,\r\n    '--radio-button-border-radius': inputValue === data.value ? field()?.controlStyle?.borderRadius : field()?.controlStyle?.borderRadius,\r\n  }\"\r\n      >\r\n      <mat-radio-button\r\n        style=\"min-width: 72px; text-align: center;\"\r\n        class=\"radioButtonGender\"\r\n        [value]=\"data.value\"\r\n      >\r\n        <span style=\"white-space: pre-line;\" class=\"forRadioLabel\" [ngStyle]=\"{\r\n    '--radio-button-font-weight': field()?.controlStyle?.fontWeight,\r\n    '--radio-button-font-size': field()?.controlStyle?.fontSize,\r\n    '--radio-button-font-color': field()?.controlStyle?.color,\r\n  }\">{{ data.label }}\r\n  <img class=\"radio-btn-icon\" *ngIf=\"field()?.imageUrl\" [src]=\"field()?.imageUrl\" alt=\"\">\r\n  </span>\r\n      </mat-radio-button>\r\n    </div>\r\n  </mat-radio-group>\r\n  }@else {\r\n     <mat-radio-group class=\"w-100\" *ngIf=\"field() && field()?.isVisible\"\r\n    class=\"radio-btn-group radio-btn-gender\"\r\n    [required]=\"field()?.validators?.isRequired\"\r\n    [value]=\"inputValue\"\r\n    (change)=\"onRadioGroupChange($event)\"\r\n    >\r\n    <div\r\n      class=\"card radio-card-gender py-auto px-1\"\r\n      style=\"width: 100% !important; min-width: fit-content !important;\"\r\n      *ngFor=\"let data of field()?.options\"\r\n      [ngClass]=\"{'disable-radio-btn': field()?.isDisable}\"\r\n      (click)=\"toggleRadio(data.value, $event)\"\r\n       [ngStyle]=\"{\r\n    '--radio-button-border-color': inputValue === data.value ? field()?.controlStyle?.focusBorderColor : field()?.controlStyle?.borderColor,\r\n    '--radio-button-background-color': inputValue === data.value ? field()?.controlStyle?.focusBackground : field()?.controlStyle?.background,\r\n    '--radio-button-border-width': inputValue === data.value ? field()?.controlStyle?.focusBorderWidth : field()?.controlStyle?.borderWidth,\r\n    '--radio-button-border-radius': inputValue === data.value ? field()?.controlStyle?.borderRadius : field()?.controlStyle?.borderRadius,\r\n  }\"\r\n      >\r\n      <mat-radio-button\r\n        style=\"min-width: 72px; text-align: center;\"\r\n        class=\"radioButtonGender\"\r\n        [value]=\"data.value\"\r\n      >\r\n        <span style=\"white-space: pre-line;\" class=\"forRadioLabel\" [ngStyle]=\"{\r\n    '--radio-button-font-weight': field()?.controlStyle?.fontWeight,\r\n    '--radio-button-font-size': field()?.controlStyle?.fontSize,\r\n    '--radio-button-font-color': field()?.controlStyle?.color,\r\n  }\">{{ data.label }}\r\n  <img class=\"radio-btn-icon\" *ngIf=\"field()?.imageUrl\" [src]=\"field()?.imageUrl\" alt=\"\">\r\n  </span>\r\n      </mat-radio-button>\r\n    </div>\r\n  </mat-radio-group>\r\n  }\r\n  <div class=\"error-message\" *ngIf=\"false\">\r\n    {{field()?.validators?.patternMessage}}.\r\n</div>\r\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}.radio-btn-group{display:flex;align-items:center;gap:1rem;align-self:stretch}::ng-deep .radio-btn-gender .mdc-form-field .mdc-radio{display:none!important}.radio-card-gender{box-shadow:none;border-color:var(--radio-button-border-color,#DADADA);border-width:var(--radio-button-border-width, 1px solid);background:var(--radio-button-background-color, #FFFFFF);display:flex;align-items:center;cursor:pointer;width:max-content!important;border-radius:var(--radio-button-border-radius, 6px)}::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;border:1px solid var(--Colors-Greys-Border-Grey, rgba(221, 221, 221, 1));pointer-events:none;cursor:none}\n"] }]
         }], ctorParameters: () => [{ type: i1.MasterControlService }], propDecorators: { change: [{
                 type: Output
             }] } });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicmFkaW8uY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbWFzdGVyLWNvbnRyb2wvc3JjL2xpYi9yYWRpby9yYWRpby5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9tYXN0ZXItY29udHJvbC9zcmMvbGliL3JhZGlvL3JhZGlvLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxZQUFZLEVBQUUsTUFBTSxpQkFBaUIsQ0FBQztBQUMvQyxPQUFPLEVBQUUsU0FBUyxFQUFxQixLQUFLLEVBQUUsTUFBTSxFQUFFLFlBQVksRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUMxRixPQUFPLEVBQXdCLGlCQUFpQixFQUFFLG1CQUFtQixFQUFFLFdBQVcsRUFBRSxNQUFNLGdCQUFnQixDQUFDO0FBQzNHLE9BQU8sRUFBRSxjQUFjLEVBQWtCLE1BQU0seUJBQXlCLENBQUM7Ozs7OztBQXNCekUsTUFBTSxPQUFPLGNBQWM7SUFDTjtJQUFuQixZQUFtQixhQUFvQztRQUFwQyxrQkFBYSxHQUFiLGFBQWEsQ0FBdUI7SUFBRSxDQUFDO0lBQzFELHlCQUF5QixHQUFTLEtBQUssRUFBTyxDQUFDO0lBQy9DLEtBQUssR0FBUyxLQUFLLENBQUMsUUFBUSxFQUFPLENBQUM7SUFDcEMsVUFBVSxHQUFRLElBQUksQ0FBQztJQUV2QixRQUFRLEdBQVEsR0FBRyxFQUFFLEdBQUUsQ0FBQyxDQUFDO0lBQ3pCLFNBQVMsR0FBUSxHQUFHLEVBQUUsR0FBRSxDQUFDLENBQUM7SUFFaEIsTUFBTSxHQUFHLElBQUksWUFBWSxFQUFPLENBQUM7SUFFM0MsUUFBUTtRQUNOLGtFQUFrRTtJQUNwRSxDQUFDO0lBRUQsVUFBVSxDQUFDLEtBQVU7UUFDbkIsSUFBSSxDQUFDLFVBQVUsR0FBRyxLQUFLLENBQUM7SUFDMUIsQ0FBQztJQUVELGdCQUFnQixDQUFDLEVBQU87UUFDdEIsSUFBSSxDQUFDLFFBQVEsR0FBRyxFQUFFLENBQUM7SUFDckIsQ0FBQztJQUVELGlCQUFpQixDQUFDLEVBQU87UUFDdkIsSUFBSSxDQUFDLFNBQVMsR0FBRyxFQUFFLENBQUM7SUFDdEIsQ0FBQztJQUVELGFBQWEsQ0FBQyxRQUFhO1FBQ3pCLElBQUksQ0FBQyxVQUFVLEdBQUcsUUFBUSxDQUFDO1FBQzNCLElBQUksQ0FBQyxRQUFRLENBQUMsUUFBUSxDQUFDLENBQUM7UUFDeEIsSUFBSSxDQUFDLFNBQVMsRUFBRSxDQUFDO1FBQ2pCLElBQUksQ0FBQyxNQUFNLENBQUMsSUFBSSxDQUFDLFFBQVEsQ0FBQyxDQUFDO0lBQzdCLENBQUM7SUFFRCxrQkFBa0IsQ0FBQyxLQUFxQjtRQUN0QyxNQUFNLFFBQVEsR0FBRyxLQUFLLENBQUMsS0FBSyxDQUFDO1FBQzdCLElBQUksQ0FBQyxVQUFVLEdBQUcsUUFBUSxDQUFDO1FBQzNCLElBQUksQ0FBQyxRQUFRLENBQUMsUUFBUSxDQUFDLENBQUM7UUFDeEIsSUFBSSxDQUFDLFNBQVMsRUFBRSxDQUFDO1FBQ2pCLElBQUksQ0FBQyxNQUFNLENBQUMsSUFBSSxDQUFDLFFBQVEsQ0FBQyxDQUFDO1FBQzNCLE9BQU8sQ0FBQyxHQUFHLENBQUMsc0JBQXNCLEVBQUUsUUFBUSxDQUFDLENBQUM7SUFDaEQsQ0FBQztJQUVELFdBQVcsQ0FBQyxLQUFVLEVBQUUsS0FBWTtRQUNsQyxLQUFLLENBQUMsY0FBYyxFQUFFLENBQUM7UUFDdkIsS0FBSyxDQUFDLGVBQWUsRUFBRSxDQUFDO1FBQ3hCLElBQUksQ0FBQyxVQUFVLEdBQUcsS0FBSyxDQUFDO1FBQ3hCLElBQUksSUFBSSxDQUFDLHlCQUF5QixJQUFJLElBQUksQ0FBQyx5QkFBeUIsQ0FBQyxRQUFRLEVBQUUsQ0FBQztZQUM5RSxJQUFJLENBQUMseUJBQXlCLENBQUMsUUFBUSxDQUFDLEtBQUssQ0FBQyxDQUFDO1FBQ2pELENBQUM7UUFDRCxJQUFJLENBQUMsa0JBQWtCLENBQUMsRUFBRSxNQUFNLEVBQUUsRUFBUyxFQUFFLEtBQUssRUFBRSxLQUFLLEVBQUUsQ0FBQyxDQUFDO0lBQy9ELENBQUM7d0dBbkRVLGNBQWM7NEZBQWQsY0FBYyw4WUFSWjtZQUNUO2dCQUNFLE9BQU8sRUFBRSxpQkFBaUI7Z0JBQzFCLFdBQVcsRUFBRSxjQUFjO2dCQUMzQixLQUFLLEVBQUUsSUFBSTthQUNaO1NBQ0YsMEJDdkJMLDJoSUE0RUEseXpDRGxFSSxjQUFjLG9sQkFDZCxZQUFZLGtiQUNaLG1CQUFtQixzaEJBQ25CLFdBQVc7OzRGQVlGLGNBQWM7a0JBbkIxQixTQUFTOytCQUNFLFdBQVcsY0FDVCxJQUFJLFdBQ1A7d0JBQ1AsY0FBYzt3QkFDZCxZQUFZO3dCQUNaLG1CQUFtQjt3QkFDbkIsV0FBVztxQkFDWixhQUdZO3dCQUNUOzRCQUNFLE9BQU8sRUFBRSxpQkFBaUI7NEJBQzFCLFdBQVcsZ0JBQWdCOzRCQUMzQixLQUFLLEVBQUUsSUFBSTt5QkFDWjtxQkFDRjt5RkFXTyxNQUFNO3NCQUFmLE1BQU0iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21tb25Nb2R1bGUgfSBmcm9tICdAYW5ndWxhci9jb21tb24nO1xyXG5pbXBvcnQgeyBDb21wb25lbnQsIGZvcndhcmRSZWYsIElucHV0LCBpbnB1dCwgT3V0cHV0LCBFdmVudEVtaXR0ZXIgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcclxuaW1wb3J0IHsgQ29udHJvbFZhbHVlQWNjZXNzb3IsIE5HX1ZBTFVFX0FDQ0VTU09SLCBSZWFjdGl2ZUZvcm1zTW9kdWxlLCBGb3Jtc01vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2Zvcm1zJztcclxuaW1wb3J0IHsgTWF0UmFkaW9Nb2R1bGUsIE1hdFJhZGlvQ2hhbmdlIH0gZnJvbSAnQGFuZ3VsYXIvbWF0ZXJpYWwvcmFkaW8nO1xyXG5pbXBvcnQgeyBNYXN0ZXJDb250cm9sU2VydmljZSB9IGZyb20gJy4uL21hc3Rlci1jb250cm9sLnNlcnZpY2UnO1xyXG5cclxuQENvbXBvbmVudCh7XHJcbiAgc2VsZWN0b3I6ICdsaWItcmFkaW8nLFxyXG4gIHN0YW5kYWxvbmU6IHRydWUsXHJcbiAgaW1wb3J0czogW1xyXG4gICAgTWF0UmFkaW9Nb2R1bGUsXHJcbiAgICBDb21tb25Nb2R1bGUsXHJcbiAgICBSZWFjdGl2ZUZvcm1zTW9kdWxlLFxyXG4gICAgRm9ybXNNb2R1bGVcclxuICBdLFxyXG4gIHRlbXBsYXRlVXJsOiAnLi9yYWRpby5jb21wb25lbnQuaHRtbCcsXHJcbiAgc3R5bGVVcmw6ICcuL3JhZGlvLmNvbXBvbmVudC5jc3MnLFxyXG4gICAgcHJvdmlkZXJzOiBbXHJcbiAgICAgIHtcclxuICAgICAgICBwcm92aWRlOiBOR19WQUxVRV9BQ0NFU1NPUixcclxuICAgICAgICB1c2VFeGlzdGluZzogUmFkaW9Db21wb25lbnQsXHJcbiAgICAgICAgbXVsdGk6IHRydWVcclxuICAgICAgfVxyXG4gICAgXVxyXG59KVxyXG5leHBvcnQgY2xhc3MgUmFkaW9Db21wb25lbnQgaW1wbGVtZW50cyBDb250cm9sVmFsdWVBY2Nlc3NvciB7XHJcbiAgY29uc3RydWN0b3IocHVibGljIG1hc3RlclNlcnZpY2UgOiBNYXN0ZXJDb250cm9sU2VydmljZSl7fVxyXG4gIHJlYWN0aXZlRm9ybUNvbnRyb2xvYmplY3QgOiBhbnkgPSBpbnB1dDxhbnk+KCk7XHJcbiAgZmllbGQgOiBhbnkgPSBpbnB1dC5yZXF1aXJlZDxhbnk+KCk7XHJcbiAgaW5wdXRWYWx1ZTogYW55ID0gbnVsbDtcclxuXHJcbiAgb25DaGFuZ2U6IGFueSA9ICgpID0+IHt9O1xyXG4gIG9uVG91Y2hlZDogYW55ID0gKCkgPT4ge307XHJcblxyXG4gIEBPdXRwdXQoKSBjaGFuZ2UgPSBuZXcgRXZlbnRFbWl0dGVyPGFueT4oKTtcclxuXHJcbiAgbmdPbkluaXQoKTogdm9pZCB7XHJcbiAgICAvLyBJbml0aWFsaXplIGlucHV0VmFsdWUgd2l0aCBhIGRlZmF1bHQgb3IgaW5pdGlhbCB2YWx1ZSBpZiBuZWVkZWRcclxuICB9XHJcblxyXG4gIHdyaXRlVmFsdWUodmFsdWU6IGFueSk6IHZvaWQge1xyXG4gICAgdGhpcy5pbnB1dFZhbHVlID0gdmFsdWU7XHJcbiAgfVxyXG5cclxuICByZWdpc3Rlck9uQ2hhbmdlKGZuOiBhbnkpOiB2b2lkIHtcclxuICAgIHRoaXMub25DaGFuZ2UgPSBmbjtcclxuICB9XHJcblxyXG4gIHJlZ2lzdGVyT25Ub3VjaGVkKGZuOiBhbnkpOiB2b2lkIHtcclxuICAgIHRoaXMub25Ub3VjaGVkID0gZm47XHJcbiAgfVxyXG5cclxuICBvblZhbHVlQ2hhbmdlKG5ld1ZhbHVlOiBhbnkpOiB2b2lkIHtcclxuICAgIHRoaXMuaW5wdXRWYWx1ZSA9IG5ld1ZhbHVlO1xyXG4gICAgdGhpcy5vbkNoYW5nZShuZXdWYWx1ZSk7XHJcbiAgICB0aGlzLm9uVG91Y2hlZCgpO1xyXG4gICAgdGhpcy5jaGFuZ2UuZW1pdChuZXdWYWx1ZSk7XHJcbiAgfVxyXG5cclxuICBvblJhZGlvR3JvdXBDaGFuZ2UoZXZlbnQ6IE1hdFJhZGlvQ2hhbmdlKTogdm9pZCB7XHJcbiAgICBjb25zdCBuZXdWYWx1ZSA9IGV2ZW50LnZhbHVlO1xyXG4gICAgdGhpcy5pbnB1dFZhbHVlID0gbmV3VmFsdWU7XHJcbiAgICB0aGlzLm9uQ2hhbmdlKG5ld1ZhbHVlKTtcclxuICAgIHRoaXMub25Ub3VjaGVkKCk7XHJcbiAgICB0aGlzLmNoYW5nZS5lbWl0KG5ld1ZhbHVlKTtcclxuICAgIGNvbnNvbGUubG9nKCdSYWRpbyBncm91cCBjaGFuZ2VkOicsIG5ld1ZhbHVlKTtcclxuICB9XHJcblxyXG4gIHRvZ2dsZVJhZGlvKHZhbHVlOiBhbnksIGV2ZW50OiBFdmVudCk6IHZvaWQge1xyXG4gICAgZXZlbnQucHJldmVudERlZmF1bHQoKTtcclxuICAgIGV2ZW50LnN0b3BQcm9wYWdhdGlvbigpO1xyXG4gICAgdGhpcy5pbnB1dFZhbHVlID0gdmFsdWU7XHJcbiAgICBpZiAodGhpcy5yZWFjdGl2ZUZvcm1Db250cm9sb2JqZWN0ICYmIHRoaXMucmVhY3RpdmVGb3JtQ29udHJvbG9iamVjdC5zZXRWYWx1ZSkge1xyXG4gICAgICB0aGlzLnJlYWN0aXZlRm9ybUNvbnRyb2xvYmplY3Quc2V0VmFsdWUodmFsdWUpO1xyXG4gICAgfVxyXG4gICAgdGhpcy5vblJhZGlvR3JvdXBDaGFuZ2UoeyBzb3VyY2U6IHt9IGFzIGFueSwgdmFsdWU6IHZhbHVlIH0pO1xyXG4gIH1cclxuXHJcbn1cclxuIiwiPGxhYmVsIGNsYXNzPVwiZmllbGQtbGFibGVcIiAgKm5nSWY9XCJmaWVsZCgpICYmIGZpZWxkKCk/LmlzVmlzaWJsZSAmJiBmaWVsZCgpLmlzU2hvd0xhYmVsXCIgW25nU3R5bGVdPVwie1xyXG4gIH1cIj4ge3tmaWVsZCgpPy5sYWJlbH19IDxzcGFuIGNsYXNzPVwiZXJyb3ItbWVzc2FnZVwiICpuZ0lmPVwiZmllbGQoKT8udmFsaWRhdG9ycz8uaXNSZXF1aXJlZFwiPio8L3NwYW4+IDwvbGFiZWw+XHJcbiAgQGlmKHJlYWN0aXZlRm9ybUNvbnRyb2xvYmplY3QoKSkge1xyXG4gICAgIDxtYXQtcmFkaW8tZ3JvdXAgY2xhc3M9XCJ3LTEwMFwiICpuZ0lmPVwiZmllbGQoKSAmJiBmaWVsZCgpPy5pc1Zpc2libGVcIlxyXG4gICAgY2xhc3M9XCJyYWRpby1idG4tZ3JvdXAgcmFkaW8tYnRuLWdlbmRlclwiXHJcbiAgICBbcmVxdWlyZWRdPVwiZmllbGQoKT8udmFsaWRhdG9ycz8uaXNSZXF1aXJlZFwiXHJcbiAgICBbdmFsdWVdPVwiaW5wdXRWYWx1ZVwiXHJcbiAgICBbZm9ybUNvbnRyb2xdPVwicmVhY3RpdmVGb3JtQ29udHJvbG9iamVjdCgpXCJcclxuICAgIChjaGFuZ2UpPVwib25SYWRpb0dyb3VwQ2hhbmdlKCRldmVudClcIlxyXG4gICAgPlxyXG4gICAgPGRpdlxyXG4gICAgICBjbGFzcz1cImNhcmQgcmFkaW8tY2FyZC1nZW5kZXIgIHB5LWF1dG8gcHgtMVwiXHJcbiAgICAgICpuZ0Zvcj1cImxldCBkYXRhIG9mIGZpZWxkKCk/Lm9wdGlvbnNcIlxyXG4gICAgICBbbmdDbGFzc109XCJ7J2Rpc2FibGUtcmFkaW8tYnRuJzogZmllbGQoKT8uaXNEaXNhYmxlfVwiXHJcbiAgICAgIChjbGljayk9XCJ0b2dnbGVSYWRpbyhkYXRhLnZhbHVlLCAkZXZlbnQpXCJcclxuICAgICAgIFtuZ1N0eWxlXT1cIntcclxuICAgICctLXJhZGlvLWJ1dHRvbi1ib3JkZXItY29sb3InOiBpbnB1dFZhbHVlID09PSBkYXRhLnZhbHVlID8gZmllbGQoKT8uY29udHJvbFN0eWxlPy5mb2N1c0JvcmRlckNvbG9yIDogZmllbGQoKT8uY29udHJvbFN0eWxlPy5ib3JkZXJDb2xvcixcclxuICAgICctLXJhZGlvLWJ1dHRvbi1iYWNrZ3JvdW5kLWNvbG9yJzogaW5wdXRWYWx1ZSA9PT0gZGF0YS52YWx1ZSA/IGZpZWxkKCk/LmNvbnRyb2xTdHlsZT8uZm9jdXNCYWNrZ3JvdW5kIDogZmllbGQoKT8uY29udHJvbFN0eWxlPy5iYWNrZ3JvdW5kLFxyXG4gICAgJy0tcmFkaW8tYnV0dG9uLWJvcmRlci13aWR0aCc6IGlucHV0VmFsdWUgPT09IGRhdGEudmFsdWUgPyBmaWVsZCgpPy5jb250cm9sU3R5bGU/LmZvY3VzQm9yZGVyV2lkdGggOiBmaWVsZCgpPy5jb250cm9sU3R5bGU/LmJvcmRlcldpZHRoLFxyXG4gICAgJy0tcmFkaW8tYnV0dG9uLWJvcmRlci1yYWRpdXMnOiBpbnB1dFZhbHVlID09PSBkYXRhLnZhbHVlID8gZmllbGQoKT8uY29udHJvbFN0eWxlPy5ib3JkZXJSYWRpdXMgOiBmaWVsZCgpPy5jb250cm9sU3R5bGU/LmJvcmRlclJhZGl1cyxcclxuICB9XCJcclxuICAgICAgPlxyXG4gICAgICA8bWF0LXJhZGlvLWJ1dHRvblxyXG4gICAgICAgIHN0eWxlPVwibWluLXdpZHRoOiA3MnB4OyB0ZXh0LWFsaWduOiBjZW50ZXI7XCJcclxuICAgICAgICBjbGFzcz1cInJhZGlvQnV0dG9uR2VuZGVyXCJcclxuICAgICAgICBbdmFsdWVdPVwiZGF0YS52YWx1ZVwiXHJcbiAgICAgID5cclxuICAgICAgICA8c3BhbiBzdHlsZT1cIndoaXRlLXNwYWNlOiBwcmUtbGluZTtcIiBjbGFzcz1cImZvclJhZGlvTGFiZWxcIiBbbmdTdHlsZV09XCJ7XHJcbiAgICAnLS1yYWRpby1idXR0b24tZm9udC13ZWlnaHQnOiBmaWVsZCgpPy5jb250cm9sU3R5bGU/LmZvbnRXZWlnaHQsXHJcbiAgICAnLS1yYWRpby1idXR0b24tZm9udC1zaXplJzogZmllbGQoKT8uY29udHJvbFN0eWxlPy5mb250U2l6ZSxcclxuICAgICctLXJhZGlvLWJ1dHRvbi1mb250LWNvbG9yJzogZmllbGQoKT8uY29udHJvbFN0eWxlPy5jb2xvcixcclxuICB9XCI+e3sgZGF0YS5sYWJlbCB9fVxyXG4gIDxpbWcgY2xhc3M9XCJyYWRpby1idG4taWNvblwiICpuZ0lmPVwiZmllbGQoKT8uaW1hZ2VVcmxcIiBbc3JjXT1cImZpZWxkKCk/LmltYWdlVXJsXCIgYWx0PVwiXCI+XHJcbiAgPC9zcGFuPlxyXG4gICAgICA8L21hdC1yYWRpby1idXR0b24+XHJcbiAgICA8L2Rpdj5cclxuICA8L21hdC1yYWRpby1ncm91cD5cclxuICB9QGVsc2Uge1xyXG4gICAgIDxtYXQtcmFkaW8tZ3JvdXAgY2xhc3M9XCJ3LTEwMFwiICpuZ0lmPVwiZmllbGQoKSAmJiBmaWVsZCgpPy5pc1Zpc2libGVcIlxyXG4gICAgY2xhc3M9XCJyYWRpby1idG4tZ3JvdXAgcmFkaW8tYnRuLWdlbmRlclwiXHJcbiAgICBbcmVxdWlyZWRdPVwiZmllbGQoKT8udmFsaWRhdG9ycz8uaXNSZXF1aXJlZFwiXHJcbiAgICBbdmFsdWVdPVwiaW5wdXRWYWx1ZVwiXHJcbiAgICAoY2hhbmdlKT1cIm9uUmFkaW9Hcm91cENoYW5nZSgkZXZlbnQpXCJcclxuICAgID5cclxuICAgIDxkaXZcclxuICAgICAgY2xhc3M9XCJjYXJkIHJhZGlvLWNhcmQtZ2VuZGVyIHB5LWF1dG8gcHgtMVwiXHJcbiAgICAgIHN0eWxlPVwid2lkdGg6IDEwMCUgIWltcG9ydGFudDsgbWluLXdpZHRoOiBmaXQtY29udGVudCAhaW1wb3J0YW50O1wiXHJcbiAgICAgICpuZ0Zvcj1cImxldCBkYXRhIG9mIGZpZWxkKCk/Lm9wdGlvbnNcIlxyXG4gICAgICBbbmdDbGFzc109XCJ7J2Rpc2FibGUtcmFkaW8tYnRuJzogZmllbGQoKT8uaXNEaXNhYmxlfVwiXHJcbiAgICAgIChjbGljayk9XCJ0b2dnbGVSYWRpbyhkYXRhLnZhbHVlLCAkZXZlbnQpXCJcclxuICAgICAgIFtuZ1N0eWxlXT1cIntcclxuICAgICctLXJhZGlvLWJ1dHRvbi1ib3JkZXItY29sb3InOiBpbnB1dFZhbHVlID09PSBkYXRhLnZhbHVlID8gZmllbGQoKT8uY29udHJvbFN0eWxlPy5mb2N1c0JvcmRlckNvbG9yIDogZmllbGQoKT8uY29udHJvbFN0eWxlPy5ib3JkZXJDb2xvcixcclxuICAgICctLXJhZGlvLWJ1dHRvbi1iYWNrZ3JvdW5kLWNvbG9yJzogaW5wdXRWYWx1ZSA9PT0gZGF0YS52YWx1ZSA/IGZpZWxkKCk/LmNvbnRyb2xTdHlsZT8uZm9jdXNCYWNrZ3JvdW5kIDogZmllbGQoKT8uY29udHJvbFN0eWxlPy5iYWNrZ3JvdW5kLFxyXG4gICAgJy0tcmFkaW8tYnV0dG9uLWJvcmRlci13aWR0aCc6IGlucHV0VmFsdWUgPT09IGRhdGEudmFsdWUgPyBmaWVsZCgpPy5jb250cm9sU3R5bGU/LmZvY3VzQm9yZGVyV2lkdGggOiBmaWVsZCgpPy5jb250cm9sU3R5bGU/LmJvcmRlcldpZHRoLFxyXG4gICAgJy0tcmFkaW8tYnV0dG9uLWJvcmRlci1yYWRpdXMnOiBpbnB1dFZhbHVlID09PSBkYXRhLnZhbHVlID8gZmllbGQoKT8uY29udHJvbFN0eWxlPy5ib3JkZXJSYWRpdXMgOiBmaWVsZCgpPy5jb250cm9sU3R5bGU/LmJvcmRlclJhZGl1cyxcclxuICB9XCJcclxuICAgICAgPlxyXG4gICAgICA8bWF0LXJhZGlvLWJ1dHRvblxyXG4gICAgICAgIHN0eWxlPVwibWluLXdpZHRoOiA3MnB4OyB0ZXh0LWFsaWduOiBjZW50ZXI7XCJcclxuICAgICAgICBjbGFzcz1cInJhZGlvQnV0dG9uR2VuZGVyXCJcclxuICAgICAgICBbdmFsdWVdPVwiZGF0YS52YWx1ZVwiXHJcbiAgICAgID5cclxuICAgICAgICA8c3BhbiBzdHlsZT1cIndoaXRlLXNwYWNlOiBwcmUtbGluZTtcIiBjbGFzcz1cImZvclJhZGlvTGFiZWxcIiBbbmdTdHlsZV09XCJ7XHJcbiAgICAnLS1yYWRpby1idXR0b24tZm9udC13ZWlnaHQnOiBmaWVsZCgpPy5jb250cm9sU3R5bGU/LmZvbnRXZWlnaHQsXHJcbiAgICAnLS1yYWRpby1idXR0b24tZm9udC1zaXplJzogZmllbGQoKT8uY29udHJvbFN0eWxlPy5mb250U2l6ZSxcclxuICAgICctLXJhZGlvLWJ1dHRvbi1mb250LWNvbG9yJzogZmllbGQoKT8uY29udHJvbFN0eWxlPy5jb2xvcixcclxuICB9XCI+e3sgZGF0YS5sYWJlbCB9fVxyXG4gIDxpbWcgY2xhc3M9XCJyYWRpby1idG4taWNvblwiICpuZ0lmPVwiZmllbGQoKT8uaW1hZ2VVcmxcIiBbc3JjXT1cImZpZWxkKCk/LmltYWdlVXJsXCIgYWx0PVwiXCI+XHJcbiAgPC9zcGFuPlxyXG4gICAgICA8L21hdC1yYWRpby1idXR0b24+XHJcbiAgICA8L2Rpdj5cclxuICA8L21hdC1yYWRpby1ncm91cD5cclxuICB9XHJcbiAgPGRpdiBjbGFzcz1cImVycm9yLW1lc3NhZ2VcIiAqbmdJZj1cImZhbHNlXCI+XHJcbiAgICB7e2ZpZWxkKCk/LnZhbGlkYXRvcnM/LnBhdHRlcm5NZXNzYWdlfX0uXHJcbjwvZGl2PlxyXG4iXX0=
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicmFkaW8uY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbWFzdGVyLWNvbnRyb2wvc3JjL2xpYi9yYWRpby9yYWRpby5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9tYXN0ZXItY29udHJvbC9zcmMvbGliL3JhZGlvL3JhZGlvLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxZQUFZLEVBQUUsTUFBTSxpQkFBaUIsQ0FBQztBQUMvQyxPQUFPLEVBQUUsU0FBUyxFQUFxQixLQUFLLEVBQUUsTUFBTSxFQUFFLFlBQVksRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUMxRixPQUFPLEVBQXdCLGlCQUFpQixFQUFFLG1CQUFtQixFQUFFLFdBQVcsRUFBRSxNQUFNLGdCQUFnQixDQUFDO0FBQzNHLE9BQU8sRUFBRSxjQUFjLEVBQWtCLE1BQU0seUJBQXlCLENBQUM7Ozs7OztBQXNCekUsTUFBTSxPQUFPLGNBQWM7SUFDTjtJQUFuQixZQUFtQixhQUFvQztRQUFwQyxrQkFBYSxHQUFiLGFBQWEsQ0FBdUI7SUFBRSxDQUFDO0lBQzFELHlCQUF5QixHQUFTLEtBQUssRUFBTyxDQUFDO0lBQy9DLEtBQUssR0FBUyxLQUFLLENBQUMsUUFBUSxFQUFPLENBQUM7SUFDcEMsVUFBVSxHQUFRLElBQUksQ0FBQztJQUV2QixRQUFRLEdBQVEsR0FBRyxFQUFFLEdBQUUsQ0FBQyxDQUFDO0lBQ3pCLFNBQVMsR0FBUSxHQUFHLEVBQUUsR0FBRSxDQUFDLENBQUM7SUFFaEIsTUFBTSxHQUFHLElBQUksWUFBWSxFQUFPLENBQUM7SUFFM0MsUUFBUTtRQUNOLGtFQUFrRTtJQUNwRSxDQUFDO0lBRUQsVUFBVSxDQUFDLEtBQVU7UUFDbkIsSUFBSSxDQUFDLFVBQVUsR0FBRyxLQUFLLENBQUM7SUFDMUIsQ0FBQztJQUVELGdCQUFnQixDQUFDLEVBQU87UUFDdEIsSUFBSSxDQUFDLFFBQVEsR0FBRyxFQUFFLENBQUM7SUFDckIsQ0FBQztJQUVELGlCQUFpQixDQUFDLEVBQU87UUFDdkIsSUFBSSxDQUFDLFNBQVMsR0FBRyxFQUFFLENBQUM7SUFDdEIsQ0FBQztJQUVELGFBQWEsQ0FBQyxRQUFhO1FBQ3pCLElBQUksQ0FBQyxVQUFVLEdBQUcsUUFBUSxDQUFDO1FBQzNCLElBQUksQ0FBQyxRQUFRLENBQUMsUUFBUSxDQUFDLENBQUM7UUFDeEIsSUFBSSxDQUFDLFNBQVMsRUFBRSxDQUFDO1FBQ2pCLElBQUksQ0FBQyxNQUFNLENBQUMsSUFBSSxDQUFDLFFBQVEsQ0FBQyxDQUFDO0lBQzdCLENBQUM7SUFFRCxrQkFBa0IsQ0FBQyxLQUFxQjtRQUN0QyxNQUFNLFFBQVEsR0FBRyxLQUFLLENBQUMsS0FBSyxDQUFDO1FBQzdCLElBQUksQ0FBQyxVQUFVLEdBQUcsUUFBUSxDQUFDO1FBQzNCLElBQUksQ0FBQyxRQUFRLENBQUMsUUFBUSxDQUFDLENBQUM7UUFDeEIsSUFBSSxDQUFDLFNBQVMsRUFBRSxDQUFDO1FBQ2pCLElBQUksQ0FBQyxNQUFNLENBQUMsSUFBSSxDQUFDLFFBQVEsQ0FBQyxDQUFDO1FBQzNCLE9BQU8sQ0FBQyxHQUFHLENBQUMsc0JBQXNCLEVBQUUsUUFBUSxDQUFDLENBQUM7SUFDaEQsQ0FBQztJQUVELFdBQVcsQ0FBQyxLQUFVLEVBQUUsS0FBWTtRQUNsQyxLQUFLLENBQUMsY0FBYyxFQUFFLENBQUM7UUFDdkIsS0FBSyxDQUFDLGVBQWUsRUFBRSxDQUFDO1FBQ3hCLElBQUksQ0FBQyxVQUFVLEdBQUcsS0FBSyxDQUFDO1FBQ3hCLElBQUksSUFBSSxDQUFDLHlCQUF5QixJQUFJLElBQUksQ0FBQyx5QkFBeUIsQ0FBQyxRQUFRLEVBQUUsQ0FBQztZQUM5RSxJQUFJLENBQUMseUJBQXlCLENBQUMsUUFBUSxDQUFDLEtBQUssQ0FBQyxDQUFDO1FBQ2pELENBQUM7UUFDRCxJQUFJLENBQUMsa0JBQWtCLENBQUMsRUFBRSxNQUFNLEVBQUUsRUFBUyxFQUFFLEtBQUssRUFBRSxLQUFLLEVBQUUsQ0FBQyxDQUFDO0lBQy9ELENBQUM7d0dBbkRVLGNBQWM7NEZBQWQsY0FBYyw4WUFSWjtZQUNUO2dCQUNFLE9BQU8sRUFBRSxpQkFBaUI7Z0JBQzFCLFdBQVcsRUFBRSxjQUFjO2dCQUMzQixLQUFLLEVBQUUsSUFBSTthQUNaO1NBQ0YsMEJDdkJMLHdoSUE0RUEseXpDRGxFSSxjQUFjLG9sQkFDZCxZQUFZLGtiQUNaLG1CQUFtQixzaEJBQ25CLFdBQVc7OzRGQVlGLGNBQWM7a0JBbkIxQixTQUFTOytCQUNFLFdBQVcsY0FDVCxJQUFJLFdBQ1A7d0JBQ1AsY0FBYzt3QkFDZCxZQUFZO3dCQUNaLG1CQUFtQjt3QkFDbkIsV0FBVztxQkFDWixhQUdZO3dCQUNUOzRCQUNFLE9BQU8sRUFBRSxpQkFBaUI7NEJBQzFCLFdBQVcsZ0JBQWdCOzRCQUMzQixLQUFLLEVBQUUsSUFBSTt5QkFDWjtxQkFDRjt5RkFXTyxNQUFNO3NCQUFmLE1BQU0iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21tb25Nb2R1bGUgfSBmcm9tICdAYW5ndWxhci9jb21tb24nO1xyXG5pbXBvcnQgeyBDb21wb25lbnQsIGZvcndhcmRSZWYsIElucHV0LCBpbnB1dCwgT3V0cHV0LCBFdmVudEVtaXR0ZXIgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcclxuaW1wb3J0IHsgQ29udHJvbFZhbHVlQWNjZXNzb3IsIE5HX1ZBTFVFX0FDQ0VTU09SLCBSZWFjdGl2ZUZvcm1zTW9kdWxlLCBGb3Jtc01vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2Zvcm1zJztcclxuaW1wb3J0IHsgTWF0UmFkaW9Nb2R1bGUsIE1hdFJhZGlvQ2hhbmdlIH0gZnJvbSAnQGFuZ3VsYXIvbWF0ZXJpYWwvcmFkaW8nO1xyXG5pbXBvcnQgeyBNYXN0ZXJDb250cm9sU2VydmljZSB9IGZyb20gJy4uL21hc3Rlci1jb250cm9sLnNlcnZpY2UnO1xyXG5cclxuQENvbXBvbmVudCh7XHJcbiAgc2VsZWN0b3I6ICdsaWItcmFkaW8nLFxyXG4gIHN0YW5kYWxvbmU6IHRydWUsXHJcbiAgaW1wb3J0czogW1xyXG4gICAgTWF0UmFkaW9Nb2R1bGUsXHJcbiAgICBDb21tb25Nb2R1bGUsXHJcbiAgICBSZWFjdGl2ZUZvcm1zTW9kdWxlLFxyXG4gICAgRm9ybXNNb2R1bGVcclxuICBdLFxyXG4gIHRlbXBsYXRlVXJsOiAnLi9yYWRpby5jb21wb25lbnQuaHRtbCcsXHJcbiAgc3R5bGVVcmw6ICcuL3JhZGlvLmNvbXBvbmVudC5jc3MnLFxyXG4gICAgcHJvdmlkZXJzOiBbXHJcbiAgICAgIHtcclxuICAgICAgICBwcm92aWRlOiBOR19WQUxVRV9BQ0NFU1NPUixcclxuICAgICAgICB1c2VFeGlzdGluZzogUmFkaW9Db21wb25lbnQsXHJcbiAgICAgICAgbXVsdGk6IHRydWVcclxuICAgICAgfVxyXG4gICAgXVxyXG59KVxyXG5leHBvcnQgY2xhc3MgUmFkaW9Db21wb25lbnQgaW1wbGVtZW50cyBDb250cm9sVmFsdWVBY2Nlc3NvciB7XHJcbiAgY29uc3RydWN0b3IocHVibGljIG1hc3RlclNlcnZpY2UgOiBNYXN0ZXJDb250cm9sU2VydmljZSl7fVxyXG4gIHJlYWN0aXZlRm9ybUNvbnRyb2xvYmplY3QgOiBhbnkgPSBpbnB1dDxhbnk+KCk7XHJcbiAgZmllbGQgOiBhbnkgPSBpbnB1dC5yZXF1aXJlZDxhbnk+KCk7XHJcbiAgaW5wdXRWYWx1ZTogYW55ID0gbnVsbDtcclxuXHJcbiAgb25DaGFuZ2U6IGFueSA9ICgpID0+IHt9O1xyXG4gIG9uVG91Y2hlZDogYW55ID0gKCkgPT4ge307XHJcblxyXG4gIEBPdXRwdXQoKSBjaGFuZ2UgPSBuZXcgRXZlbnRFbWl0dGVyPGFueT4oKTtcclxuXHJcbiAgbmdPbkluaXQoKTogdm9pZCB7XHJcbiAgICAvLyBJbml0aWFsaXplIGlucHV0VmFsdWUgd2l0aCBhIGRlZmF1bHQgb3IgaW5pdGlhbCB2YWx1ZSBpZiBuZWVkZWRcclxuICB9XHJcblxyXG4gIHdyaXRlVmFsdWUodmFsdWU6IGFueSk6IHZvaWQge1xyXG4gICAgdGhpcy5pbnB1dFZhbHVlID0gdmFsdWU7XHJcbiAgfVxyXG5cclxuICByZWdpc3Rlck9uQ2hhbmdlKGZuOiBhbnkpOiB2b2lkIHtcclxuICAgIHRoaXMub25DaGFuZ2UgPSBmbjtcclxuICB9XHJcblxyXG4gIHJlZ2lzdGVyT25Ub3VjaGVkKGZuOiBhbnkpOiB2b2lkIHtcclxuICAgIHRoaXMub25Ub3VjaGVkID0gZm47XHJcbiAgfVxyXG5cclxuICBvblZhbHVlQ2hhbmdlKG5ld1ZhbHVlOiBhbnkpOiB2b2lkIHtcclxuICAgIHRoaXMuaW5wdXRWYWx1ZSA9IG5ld1ZhbHVlO1xyXG4gICAgdGhpcy5vbkNoYW5nZShuZXdWYWx1ZSk7XHJcbiAgICB0aGlzLm9uVG91Y2hlZCgpO1xyXG4gICAgdGhpcy5jaGFuZ2UuZW1pdChuZXdWYWx1ZSk7XHJcbiAgfVxyXG5cclxuICBvblJhZGlvR3JvdXBDaGFuZ2UoZXZlbnQ6IE1hdFJhZGlvQ2hhbmdlKTogdm9pZCB7XHJcbiAgICBjb25zdCBuZXdWYWx1ZSA9IGV2ZW50LnZhbHVlO1xyXG4gICAgdGhpcy5pbnB1dFZhbHVlID0gbmV3VmFsdWU7XHJcbiAgICB0aGlzLm9uQ2hhbmdlKG5ld1ZhbHVlKTtcclxuICAgIHRoaXMub25Ub3VjaGVkKCk7XHJcbiAgICB0aGlzLmNoYW5nZS5lbWl0KG5ld1ZhbHVlKTtcclxuICAgIGNvbnNvbGUubG9nKCdSYWRpbyBncm91cCBjaGFuZ2VkOicsIG5ld1ZhbHVlKTtcclxuICB9XHJcblxyXG4gIHRvZ2dsZVJhZGlvKHZhbHVlOiBhbnksIGV2ZW50OiBFdmVudCk6IHZvaWQge1xyXG4gICAgZXZlbnQucHJldmVudERlZmF1bHQoKTtcclxuICAgIGV2ZW50LnN0b3BQcm9wYWdhdGlvbigpO1xyXG4gICAgdGhpcy5pbnB1dFZhbHVlID0gdmFsdWU7XHJcbiAgICBpZiAodGhpcy5yZWFjdGl2ZUZvcm1Db250cm9sb2JqZWN0ICYmIHRoaXMucmVhY3RpdmVGb3JtQ29udHJvbG9iamVjdC5zZXRWYWx1ZSkge1xyXG4gICAgICB0aGlzLnJlYWN0aXZlRm9ybUNvbnRyb2xvYmplY3Quc2V0VmFsdWUodmFsdWUpO1xyXG4gICAgfVxyXG4gICAgdGhpcy5vblJhZGlvR3JvdXBDaGFuZ2UoeyBzb3VyY2U6IHt9IGFzIGFueSwgdmFsdWU6IHZhbHVlIH0pO1xyXG4gIH1cclxuXHJcbn1cclxuIiwiPGxhYmVsIGNsYXNzPVwiZmllbGQtbGFibGVcIiAgKm5nSWY9XCJmaWVsZCgpICYmIGZpZWxkKCk/LmlzVmlzaWJsZSAmJiBmaWVsZCgpLmlzU2hvd0xhYmVsXCIgW25nU3R5bGVdPVwie1xyXG4gIH1cIj57e2ZpZWxkKCk/LmxhYmVsfX08c3BhbiBjbGFzcz1cImVycm9yLW1lc3NhZ2VcIiAqbmdJZj1cImZpZWxkKCk/LnZhbGlkYXRvcnM/LmlzUmVxdWlyZWRcIj4qPC9zcGFuPjwvbGFiZWw+XHJcbiAgQGlmKHJlYWN0aXZlRm9ybUNvbnRyb2xvYmplY3QoKSkge1xyXG4gICAgIDxtYXQtcmFkaW8tZ3JvdXAgY2xhc3M9XCJ3LTEwMFwiICpuZ0lmPVwiZmllbGQoKSAmJiBmaWVsZCgpPy5pc1Zpc2libGVcIlxyXG4gICAgY2xhc3M9XCJyYWRpby1idG4tZ3JvdXAgcmFkaW8tYnRuLWdlbmRlclwiXHJcbiAgICBbcmVxdWlyZWRdPVwiZmllbGQoKT8udmFsaWRhdG9ycz8uaXNSZXF1aXJlZFwiXHJcbiAgICBbdmFsdWVdPVwiaW5wdXRWYWx1ZVwiXHJcbiAgICBbZm9ybUNvbnRyb2xdPVwicmVhY3RpdmVGb3JtQ29udHJvbG9iamVjdCgpXCJcclxuICAgIChjaGFuZ2UpPVwib25SYWRpb0dyb3VwQ2hhbmdlKCRldmVudClcIlxyXG4gICAgPlxyXG4gICAgPGRpdlxyXG4gICAgICBjbGFzcz1cImNhcmQgcmFkaW8tY2FyZC1nZW5kZXIgIHB5LWF1dG8gcHgtMVwiXHJcbiAgICAgICpuZ0Zvcj1cImxldCBkYXRhIG9mIGZpZWxkKCk/Lm9wdGlvbnNcIlxyXG4gICAgICBbbmdDbGFzc109XCJ7J2Rpc2FibGUtcmFkaW8tYnRuJzogZmllbGQoKT8uaXNEaXNhYmxlfVwiXHJcbiAgICAgIChjbGljayk9XCJ0b2dnbGVSYWRpbyhkYXRhLnZhbHVlLCAkZXZlbnQpXCJcclxuICAgICAgIFtuZ1N0eWxlXT1cIntcclxuICAgICctLXJhZGlvLWJ1dHRvbi1ib3JkZXItY29sb3InOiBpbnB1dFZhbHVlID09PSBkYXRhLnZhbHVlID8gZmllbGQoKT8uY29udHJvbFN0eWxlPy5mb2N1c0JvcmRlckNvbG9yIDogZmllbGQoKT8uY29udHJvbFN0eWxlPy5ib3JkZXJDb2xvcixcclxuICAgICctLXJhZGlvLWJ1dHRvbi1iYWNrZ3JvdW5kLWNvbG9yJzogaW5wdXRWYWx1ZSA9PT0gZGF0YS52YWx1ZSA/IGZpZWxkKCk/LmNvbnRyb2xTdHlsZT8uZm9jdXNCYWNrZ3JvdW5kIDogZmllbGQoKT8uY29udHJvbFN0eWxlPy5iYWNrZ3JvdW5kLFxyXG4gICAgJy0tcmFkaW8tYnV0dG9uLWJvcmRlci13aWR0aCc6IGlucHV0VmFsdWUgPT09IGRhdGEudmFsdWUgPyBmaWVsZCgpPy5jb250cm9sU3R5bGU/LmZvY3VzQm9yZGVyV2lkdGggOiBmaWVsZCgpPy5jb250cm9sU3R5bGU/LmJvcmRlcldpZHRoLFxyXG4gICAgJy0tcmFkaW8tYnV0dG9uLWJvcmRlci1yYWRpdXMnOiBpbnB1dFZhbHVlID09PSBkYXRhLnZhbHVlID8gZmllbGQoKT8uY29udHJvbFN0eWxlPy5ib3JkZXJSYWRpdXMgOiBmaWVsZCgpPy5jb250cm9sU3R5bGU/LmJvcmRlclJhZGl1cyxcclxuICB9XCJcclxuICAgICAgPlxyXG4gICAgICA8bWF0LXJhZGlvLWJ1dHRvblxyXG4gICAgICAgIHN0eWxlPVwibWluLXdpZHRoOiA3MnB4OyB0ZXh0LWFsaWduOiBjZW50ZXI7XCJcclxuICAgICAgICBjbGFzcz1cInJhZGlvQnV0dG9uR2VuZGVyXCJcclxuICAgICAgICBbdmFsdWVdPVwiZGF0YS52YWx1ZVwiXHJcbiAgICAgID5cclxuICAgICAgICA8c3BhbiBzdHlsZT1cIndoaXRlLXNwYWNlOiBwcmUtbGluZTtcIiBjbGFzcz1cImZvclJhZGlvTGFiZWxcIiBbbmdTdHlsZV09XCJ7XHJcbiAgICAnLS1yYWRpby1idXR0b24tZm9udC13ZWlnaHQnOiBmaWVsZCgpPy5jb250cm9sU3R5bGU/LmZvbnRXZWlnaHQsXHJcbiAgICAnLS1yYWRpby1idXR0b24tZm9udC1zaXplJzogZmllbGQoKT8uY29udHJvbFN0eWxlPy5mb250U2l6ZSxcclxuICAgICctLXJhZGlvLWJ1dHRvbi1mb250LWNvbG9yJzogZmllbGQoKT8uY29udHJvbFN0eWxlPy5jb2xvcixcclxuICB9XCI+e3sgZGF0YS5sYWJlbCB9fVxyXG4gIDxpbWcgY2xhc3M9XCJyYWRpby1idG4taWNvblwiICpuZ0lmPVwiZmllbGQoKT8uaW1hZ2VVcmxcIiBbc3JjXT1cImZpZWxkKCk/LmltYWdlVXJsXCIgYWx0PVwiXCI+XHJcbiAgPC9zcGFuPlxyXG4gICAgICA8L21hdC1yYWRpby1idXR0b24+XHJcbiAgICA8L2Rpdj5cclxuICA8L21hdC1yYWRpby1ncm91cD5cclxuICB9QGVsc2Uge1xyXG4gICAgIDxtYXQtcmFkaW8tZ3JvdXAgY2xhc3M9XCJ3LTEwMFwiICpuZ0lmPVwiZmllbGQoKSAmJiBmaWVsZCgpPy5pc1Zpc2libGVcIlxyXG4gICAgY2xhc3M9XCJyYWRpby1idG4tZ3JvdXAgcmFkaW8tYnRuLWdlbmRlclwiXHJcbiAgICBbcmVxdWlyZWRdPVwiZmllbGQoKT8udmFsaWRhdG9ycz8uaXNSZXF1aXJlZFwiXHJcbiAgICBbdmFsdWVdPVwiaW5wdXRWYWx1ZVwiXHJcbiAgICAoY2hhbmdlKT1cIm9uUmFkaW9Hcm91cENoYW5nZSgkZXZlbnQpXCJcclxuICAgID5cclxuICAgIDxkaXZcclxuICAgICAgY2xhc3M9XCJjYXJkIHJhZGlvLWNhcmQtZ2VuZGVyIHB5LWF1dG8gcHgtMVwiXHJcbiAgICAgIHN0eWxlPVwid2lkdGg6IDEwMCUgIWltcG9ydGFudDsgbWluLXdpZHRoOiBmaXQtY29udGVudCAhaW1wb3J0YW50O1wiXHJcbiAgICAgICpuZ0Zvcj1cImxldCBkYXRhIG9mIGZpZWxkKCk/Lm9wdGlvbnNcIlxyXG4gICAgICBbbmdDbGFzc109XCJ7J2Rpc2FibGUtcmFkaW8tYnRuJzogZmllbGQoKT8uaXNEaXNhYmxlfVwiXHJcbiAgICAgIChjbGljayk9XCJ0b2dnbGVSYWRpbyhkYXRhLnZhbHVlLCAkZXZlbnQpXCJcclxuICAgICAgIFtuZ1N0eWxlXT1cIntcclxuICAgICctLXJhZGlvLWJ1dHRvbi1ib3JkZXItY29sb3InOiBpbnB1dFZhbHVlID09PSBkYXRhLnZhbHVlID8gZmllbGQoKT8uY29udHJvbFN0eWxlPy5mb2N1c0JvcmRlckNvbG9yIDogZmllbGQoKT8uY29udHJvbFN0eWxlPy5ib3JkZXJDb2xvcixcclxuICAgICctLXJhZGlvLWJ1dHRvbi1iYWNrZ3JvdW5kLWNvbG9yJzogaW5wdXRWYWx1ZSA9PT0gZGF0YS52YWx1ZSA/IGZpZWxkKCk/LmNvbnRyb2xTdHlsZT8uZm9jdXNCYWNrZ3JvdW5kIDogZmllbGQoKT8uY29udHJvbFN0eWxlPy5iYWNrZ3JvdW5kLFxyXG4gICAgJy0tcmFkaW8tYnV0dG9uLWJvcmRlci13aWR0aCc6IGlucHV0VmFsdWUgPT09IGRhdGEudmFsdWUgPyBmaWVsZCgpPy5jb250cm9sU3R5bGU/LmZvY3VzQm9yZGVyV2lkdGggOiBmaWVsZCgpPy5jb250cm9sU3R5bGU/LmJvcmRlcldpZHRoLFxyXG4gICAgJy0tcmFkaW8tYnV0dG9uLWJvcmRlci1yYWRpdXMnOiBpbnB1dFZhbHVlID09PSBkYXRhLnZhbHVlID8gZmllbGQoKT8uY29udHJvbFN0eWxlPy5ib3JkZXJSYWRpdXMgOiBmaWVsZCgpPy5jb250cm9sU3R5bGU/LmJvcmRlclJhZGl1cyxcclxuICB9XCJcclxuICAgICAgPlxyXG4gICAgICA8bWF0LXJhZGlvLWJ1dHRvblxyXG4gICAgICAgIHN0eWxlPVwibWluLXdpZHRoOiA3MnB4OyB0ZXh0LWFsaWduOiBjZW50ZXI7XCJcclxuICAgICAgICBjbGFzcz1cInJhZGlvQnV0dG9uR2VuZGVyXCJcclxuICAgICAgICBbdmFsdWVdPVwiZGF0YS52YWx1ZVwiXHJcbiAgICAgID5cclxuICAgICAgICA8c3BhbiBzdHlsZT1cIndoaXRlLXNwYWNlOiBwcmUtbGluZTtcIiBjbGFzcz1cImZvclJhZGlvTGFiZWxcIiBbbmdTdHlsZV09XCJ7XHJcbiAgICAnLS1yYWRpby1idXR0b24tZm9udC13ZWlnaHQnOiBmaWVsZCgpPy5jb250cm9sU3R5bGU/LmZvbnRXZWlnaHQsXHJcbiAgICAnLS1yYWRpby1idXR0b24tZm9udC1zaXplJzogZmllbGQoKT8uY29udHJvbFN0eWxlPy5mb250U2l6ZSxcclxuICAgICctLXJhZGlvLWJ1dHRvbi1mb250LWNvbG9yJzogZmllbGQoKT8uY29udHJvbFN0eWxlPy5jb2xvcixcclxuICB9XCI+e3sgZGF0YS5sYWJlbCB9fVxyXG4gIDxpbWcgY2xhc3M9XCJyYWRpby1idG4taWNvblwiICpuZ0lmPVwiZmllbGQoKT8uaW1hZ2VVcmxcIiBbc3JjXT1cImZpZWxkKCk/LmltYWdlVXJsXCIgYWx0PVwiXCI+XHJcbiAgPC9zcGFuPlxyXG4gICAgICA8L21hdC1yYWRpby1idXR0b24+XHJcbiAgICA8L2Rpdj5cclxuICA8L21hdC1yYWRpby1ncm91cD5cclxuICB9XHJcbiAgPGRpdiBjbGFzcz1cImVycm9yLW1lc3NhZ2VcIiAqbmdJZj1cImZhbHNlXCI+XHJcbiAgICB7e2ZpZWxkKCk/LnZhbGlkYXRvcnM/LnBhdHRlcm5NZXNzYWdlfX0uXHJcbjwvZGl2PlxyXG4iXX0=

package/esm2022/lib/select/select.component.mjs

@@ -78,7 +78,7 @@ export class SelectComponent {
                 useExisting: SelectComponent,
                 multi: true
             }
-        ], ngImport: i0, template: "<label\r\n  class=\"field-lable info-label\"\r\n  *ngIf=\"field() && field()?.isVisible && field().isShowLabel\"\r\n  >\r\n  <span>{{ field()?.label}}<span style=\"color: red\" *ngIf=\"field() && field()?.validators?.isRequired\">*</span></span>\r\n  <span style=\"justify-content: end;\" *ngIf=\"field() && field()?.configData?.infoMessage\">\r\n    <img class=\"mx-1\" src=\"https://cdn.godigit.com/retail-life/question-mark.svg\" alt=\"\">\r\n    <u>{{field()?.configData?.infoMessage}} ></u>\r\n  </span>\r\n    </label>\r\n  \r\n<mat-form-field\r\n  appearance=\"outline\" \r\n  class=\"input-full-width full-width w-100\"\r\n  *ngIf=\"field() && field()?.isVisible\"\r\n  [ngStyle]=\"{\r\n  '--custom-border-color': field()?.controlStyle?.borderColor ,\r\n  '--custom-border-width': field()?.controlStyle?.borderWidth ,\r\n  '--custom-border-radius': field()?.controlStyle?.borderRadius ,\r\n  '--custom-bg-color': field()?.controlStyle?.background ,\r\n  '--custom-border-color-focus': field()?.controlStyle?.focusBorderColor ,\r\n  '--custom-border-width-focus': field()?.controlStyle?.focusBorderWidth ,\r\n  '--custom-bg-color-focus': field()?.controlStyle?.focusBackground ,\r\n  '--custom-border-color-hover': field()?.controlStyle?.hoverBorderColor ,\r\n  '--custom-border-width-hover': field()?.controlStyle?.hoverBorderWidth ,\r\n  '--custom-border-color-error': field()?.controlStyle?.errorBorderColor ,\r\n  '--custom-border-width-error': field()?.controlStyle?.errorBorderWidth ,\r\n'--custom-font-color-disabled' : field()?.controlStyle?.disableColor ,\r\n'--custom-bg-color-disabled' : field()?.controlStyle?.disableBackground ,\r\n  }\"\r\n>\r\n  @if(reactiveFormControlobject()) {\r\n  <mat-select\r\n    [id]=\"field()?.fieldName\"\r\n    [attr.name]=\"field()?.fieldName\"\r\n    [required]=\"field()?.validators?.isRequired\"\r\n    [placeholder]=\"field()?.placeHolder\"\r\n    [disabled]=\"field()?.isDisable\"\r\n    (openedChange)=\"onSelectOpened($event)\"\r\n    [value]=\"inputValue\"\r\n    (selectionChange)=\"selectionChanged($event)\"\r\n    [formControl]=\"reactiveFormControlobject()\"\r\n  >\r\n    <mat-option *ngFor=\"let data of field()?.options\" [value]=\"data.value\">{{\r\n      data.label\r\n    }}</mat-option>\r\n  </mat-select>\r\n  }@else {\r\n  <mat-select\r\n    [id]=\"field()?.fieldName\"\r\n    [attr.name]=\"field()?.fieldName\"\r\n    [required]=\"field()?.validators?.isRequired\"\r\n    [placeholder]=\"field()?.placeHolder\"\r\n    [disabled]=\"field()?.isDisable\"\r\n    (openedChange)=\"onSelectOpened($event)\"\r\n    [value]=\"inputValue\"\r\n    (selectionChange)=\"selectionChanged($event)\"\r\n  >\r\n    <mat-option *ngFor=\"let data of field()?.options\" [value]=\"data.value\">{{\r\n      data.label\r\n    }}</mat-option>\r\n  </mat-select>\r\n  }\r\n\r\n  <!-- selectField.invalid && (selectField.dirty || selectField.touched) -->\r\n  <mat-error *ngIf=\"false\">\r\n    {{ field()?.validators?.isRequiredMessage }}\r\n  </mat-error>\r\n</mat-form-field>\r\n<div class=\"error-message mt-2\" *ngIf=\"false\">\r\n  {{ field()?.validators?.isRequiredMessage }}\r\n</div>\r\n", styles: [".field-lable{font-size:10px!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}*{font-family:mulish!important}.info-label{display:flex;justify-content:space-between}::ng-deep .mat-mdc-select{display:grid!important;width:auto!important}\n"], dependencies: [{ kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: i3.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: 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: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
+        ], ngImport: i0, template: "<label\r\n  class=\"field-lable info-label\"\r\n  *ngIf=\"field() && field()?.isVisible && field().isShowLabel\"\r\n  >\r\n  <span>{{ field()?.label}}<span style=\"color: red\" *ngIf=\"field() && field()?.validators?.isRequired\">*</span></span>\r\n  <span style=\"justify-content: end;\" *ngIf=\"field() && field()?.configData?.infoMessage\">\r\n    <img class=\"mx-1\" src=\"https://cdn.godigit.com/retail-life/question-mark.svg\" alt=\"\">\r\n    <u>{{field()?.configData?.infoMessage}} ></u>\r\n  </span>\r\n    </label>\r\n  \r\n<mat-form-field\r\n  appearance=\"outline\" \r\n  class=\"input-full-width full-width w-100\"\r\n  *ngIf=\"field() && field()?.isVisible\"\r\n  [ngStyle]=\"{\r\n  '--custom-border-color': field()?.controlStyle?.borderColor ,\r\n  '--custom-border-width': field()?.controlStyle?.borderWidth ,\r\n  '--custom-border-radius': field()?.controlStyle?.borderRadius ,\r\n  '--custom-bg-color': field()?.controlStyle?.background ,\r\n  '--custom-border-color-focus': field()?.controlStyle?.focusBorderColor ,\r\n  '--custom-border-width-focus': field()?.controlStyle?.focusBorderWidth ,\r\n  '--custom-bg-color-focus': field()?.controlStyle?.focusBackground ,\r\n  '--custom-border-color-hover': field()?.controlStyle?.hoverBorderColor ,\r\n  '--custom-border-width-hover': field()?.controlStyle?.hoverBorderWidth ,\r\n  '--custom-border-color-error': field()?.controlStyle?.errorBorderColor ,\r\n  '--custom-border-width-error': field()?.controlStyle?.errorBorderWidth ,\r\n'--custom-font-color-disabled' : field()?.controlStyle?.disableColor ,\r\n'--custom-bg-color-disabled' : field()?.controlStyle?.disableBackground ,\r\n  }\"\r\n>\r\n  @if(reactiveFormControlobject()) {\r\n  <mat-select\r\n    [id]=\"field()?.fieldName\"\r\n    [attr.name]=\"field()?.fieldName\"\r\n    [required]=\"field()?.validators?.isRequired\"\r\n    [placeholder]=\"field()?.placeHolder\"\r\n    [disabled]=\"field()?.isDisable\"\r\n    (openedChange)=\"onSelectOpened($event)\"\r\n    [value]=\"inputValue\"\r\n    (selectionChange)=\"selectionChanged($event)\"\r\n    [formControl]=\"reactiveFormControlobject()\"\r\n  >\r\n    <mat-option *ngFor=\"let data of field()?.options\" [value]=\"data.value\">{{\r\n      data.label\r\n    }}</mat-option>\r\n  </mat-select>\r\n  }@else {\r\n  <mat-select\r\n    [id]=\"field()?.fieldName\"\r\n    [attr.name]=\"field()?.fieldName\"\r\n    [required]=\"field()?.validators?.isRequired\"\r\n    [placeholder]=\"field()?.placeHolder\"\r\n    [disabled]=\"field()?.isDisable\"\r\n    (openedChange)=\"onSelectOpened($event)\"\r\n    [value]=\"inputValue\"\r\n    (selectionChange)=\"selectionChanged($event)\"\r\n  >\r\n    <mat-option *ngFor=\"let data of field()?.options\" [value]=\"data.value\">{{\r\n      data.label\r\n    }}</mat-option>\r\n  </mat-select>\r\n  }\r\n\r\n  <!-- selectField.invalid && (selectField.dirty || selectField.touched) -->\r\n  <mat-error *ngIf=\"false\">\r\n    {{ field()?.validators?.isRequiredMessage }}\r\n  </mat-error>\r\n</mat-form-field>\r\n<div class=\"error-message mt-2\" *ngIf=\"false\">\r\n  {{ field()?.validators?.isRequiredMessage }}\r\n</div>\r\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}*{font-family:mulish!important}.info-label{display:flex;justify-content:space-between}::ng-deep .mat-mdc-select{display:grid!important;width:auto!important}\n"], dependencies: [{ kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: i3.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: 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: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SelectComponent, decorators: [{
             type: Component,
@@ -97,7 +97,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                             useExisting: SelectComponent,
                             multi: true
                         }
-                    ], template: "<label\r\n  class=\"field-lable info-label\"\r\n  *ngIf=\"field() && field()?.isVisible && field().isShowLabel\"\r\n  >\r\n  <span>{{ field()?.label}}<span style=\"color: red\" *ngIf=\"field() && field()?.validators?.isRequired\">*</span></span>\r\n  <span style=\"justify-content: end;\" *ngIf=\"field() && field()?.configData?.infoMessage\">\r\n    <img class=\"mx-1\" src=\"https://cdn.godigit.com/retail-life/question-mark.svg\" alt=\"\">\r\n    <u>{{field()?.configData?.infoMessage}} ></u>\r\n  </span>\r\n    </label>\r\n  \r\n<mat-form-field\r\n  appearance=\"outline\" \r\n  class=\"input-full-width full-width w-100\"\r\n  *ngIf=\"field() && field()?.isVisible\"\r\n  [ngStyle]=\"{\r\n  '--custom-border-color': field()?.controlStyle?.borderColor ,\r\n  '--custom-border-width': field()?.controlStyle?.borderWidth ,\r\n  '--custom-border-radius': field()?.controlStyle?.borderRadius ,\r\n  '--custom-bg-color': field()?.controlStyle?.background ,\r\n  '--custom-border-color-focus': field()?.controlStyle?.focusBorderColor ,\r\n  '--custom-border-width-focus': field()?.controlStyle?.focusBorderWidth ,\r\n  '--custom-bg-color-focus': field()?.controlStyle?.focusBackground ,\r\n  '--custom-border-color-hover': field()?.controlStyle?.hoverBorderColor ,\r\n  '--custom-border-width-hover': field()?.controlStyle?.hoverBorderWidth ,\r\n  '--custom-border-color-error': field()?.controlStyle?.errorBorderColor ,\r\n  '--custom-border-width-error': field()?.controlStyle?.errorBorderWidth ,\r\n'--custom-font-color-disabled' : field()?.controlStyle?.disableColor ,\r\n'--custom-bg-color-disabled' : field()?.controlStyle?.disableBackground ,\r\n  }\"\r\n>\r\n  @if(reactiveFormControlobject()) {\r\n  <mat-select\r\n    [id]=\"field()?.fieldName\"\r\n    [attr.name]=\"field()?.fieldName\"\r\n    [required]=\"field()?.validators?.isRequired\"\r\n    [placeholder]=\"field()?.placeHolder\"\r\n    [disabled]=\"field()?.isDisable\"\r\n    (openedChange)=\"onSelectOpened($event)\"\r\n    [value]=\"inputValue\"\r\n    (selectionChange)=\"selectionChanged($event)\"\r\n    [formControl]=\"reactiveFormControlobject()\"\r\n  >\r\n    <mat-option *ngFor=\"let data of field()?.options\" [value]=\"data.value\">{{\r\n      data.label\r\n    }}</mat-option>\r\n  </mat-select>\r\n  }@else {\r\n  <mat-select\r\n    [id]=\"field()?.fieldName\"\r\n    [attr.name]=\"field()?.fieldName\"\r\n    [required]=\"field()?.validators?.isRequired\"\r\n    [placeholder]=\"field()?.placeHolder\"\r\n    [disabled]=\"field()?.isDisable\"\r\n    (openedChange)=\"onSelectOpened($event)\"\r\n    [value]=\"inputValue\"\r\n    (selectionChange)=\"selectionChanged($event)\"\r\n  >\r\n    <mat-option *ngFor=\"let data of field()?.options\" [value]=\"data.value\">{{\r\n      data.label\r\n    }}</mat-option>\r\n  </mat-select>\r\n  }\r\n\r\n  <!-- selectField.invalid && (selectField.dirty || selectField.touched) -->\r\n  <mat-error *ngIf=\"false\">\r\n    {{ field()?.validators?.isRequiredMessage }}\r\n  </mat-error>\r\n</mat-form-field>\r\n<div class=\"error-message mt-2\" *ngIf=\"false\">\r\n  {{ field()?.validators?.isRequiredMessage }}\r\n</div>\r\n", styles: [".field-lable{font-size:10px!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}*{font-family:mulish!important}.info-label{display:flex;justify-content:space-between}::ng-deep .mat-mdc-select{display:grid!important;width:auto!important}\n"] }]
+                    ], template: "<label\r\n  class=\"field-lable info-label\"\r\n  *ngIf=\"field() && field()?.isVisible && field().isShowLabel\"\r\n  >\r\n  <span>{{ field()?.label}}<span style=\"color: red\" *ngIf=\"field() && field()?.validators?.isRequired\">*</span></span>\r\n  <span style=\"justify-content: end;\" *ngIf=\"field() && field()?.configData?.infoMessage\">\r\n    <img class=\"mx-1\" src=\"https://cdn.godigit.com/retail-life/question-mark.svg\" alt=\"\">\r\n    <u>{{field()?.configData?.infoMessage}} ></u>\r\n  </span>\r\n    </label>\r\n  \r\n<mat-form-field\r\n  appearance=\"outline\" \r\n  class=\"input-full-width full-width w-100\"\r\n  *ngIf=\"field() && field()?.isVisible\"\r\n  [ngStyle]=\"{\r\n  '--custom-border-color': field()?.controlStyle?.borderColor ,\r\n  '--custom-border-width': field()?.controlStyle?.borderWidth ,\r\n  '--custom-border-radius': field()?.controlStyle?.borderRadius ,\r\n  '--custom-bg-color': field()?.controlStyle?.background ,\r\n  '--custom-border-color-focus': field()?.controlStyle?.focusBorderColor ,\r\n  '--custom-border-width-focus': field()?.controlStyle?.focusBorderWidth ,\r\n  '--custom-bg-color-focus': field()?.controlStyle?.focusBackground ,\r\n  '--custom-border-color-hover': field()?.controlStyle?.hoverBorderColor ,\r\n  '--custom-border-width-hover': field()?.controlStyle?.hoverBorderWidth ,\r\n  '--custom-border-color-error': field()?.controlStyle?.errorBorderColor ,\r\n  '--custom-border-width-error': field()?.controlStyle?.errorBorderWidth ,\r\n'--custom-font-color-disabled' : field()?.controlStyle?.disableColor ,\r\n'--custom-bg-color-disabled' : field()?.controlStyle?.disableBackground ,\r\n  }\"\r\n>\r\n  @if(reactiveFormControlobject()) {\r\n  <mat-select\r\n    [id]=\"field()?.fieldName\"\r\n    [attr.name]=\"field()?.fieldName\"\r\n    [required]=\"field()?.validators?.isRequired\"\r\n    [placeholder]=\"field()?.placeHolder\"\r\n    [disabled]=\"field()?.isDisable\"\r\n    (openedChange)=\"onSelectOpened($event)\"\r\n    [value]=\"inputValue\"\r\n    (selectionChange)=\"selectionChanged($event)\"\r\n    [formControl]=\"reactiveFormControlobject()\"\r\n  >\r\n    <mat-option *ngFor=\"let data of field()?.options\" [value]=\"data.value\">{{\r\n      data.label\r\n    }}</mat-option>\r\n  </mat-select>\r\n  }@else {\r\n  <mat-select\r\n    [id]=\"field()?.fieldName\"\r\n    [attr.name]=\"field()?.fieldName\"\r\n    [required]=\"field()?.validators?.isRequired\"\r\n    [placeholder]=\"field()?.placeHolder\"\r\n    [disabled]=\"field()?.isDisable\"\r\n    (openedChange)=\"onSelectOpened($event)\"\r\n    [value]=\"inputValue\"\r\n    (selectionChange)=\"selectionChanged($event)\"\r\n  >\r\n    <mat-option *ngFor=\"let data of field()?.options\" [value]=\"data.value\">{{\r\n      data.label\r\n    }}</mat-option>\r\n  </mat-select>\r\n  }\r\n\r\n  <!-- selectField.invalid && (selectField.dirty || selectField.touched) -->\r\n  <mat-error *ngIf=\"false\">\r\n    {{ field()?.validators?.isRequiredMessage }}\r\n  </mat-error>\r\n</mat-form-field>\r\n<div class=\"error-message mt-2\" *ngIf=\"false\">\r\n  {{ field()?.validators?.isRequiredMessage }}\r\n</div>\r\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}*{font-family:mulish!important}.info-label{display:flex;justify-content:space-between}::ng-deep .mat-mdc-select{display:grid!important;width:auto!important}\n"] }]
         }], ctorParameters: () => [{ type: i1.MasterControlService }], propDecorators: { selectionChange: [{
                 type: Output
             }] } });

package/fesm2022/master-control.mjs

@@ -461,7 +461,7 @@ class SelectComponent {
                 useExisting: SelectComponent,
                 multi: true
             }
-        ], ngImport: i0, template: "<label\r\n  class=\"field-lable info-label\"\r\n  *ngIf=\"field() && field()?.isVisible && field().isShowLabel\"\r\n  >\r\n  <span>{{ field()?.label}}<span style=\"color: red\" *ngIf=\"field() && field()?.validators?.isRequired\">*</span></span>\r\n  <span style=\"justify-content: end;\" *ngIf=\"field() && field()?.configData?.infoMessage\">\r\n    <img class=\"mx-1\" src=\"https://cdn.godigit.com/retail-life/question-mark.svg\" alt=\"\">\r\n    <u>{{field()?.configData?.infoMessage}} ></u>\r\n  </span>\r\n    </label>\r\n  \r\n<mat-form-field\r\n  appearance=\"outline\" \r\n  class=\"input-full-width full-width w-100\"\r\n  *ngIf=\"field() && field()?.isVisible\"\r\n  [ngStyle]=\"{\r\n  '--custom-border-color': field()?.controlStyle?.borderColor ,\r\n  '--custom-border-width': field()?.controlStyle?.borderWidth ,\r\n  '--custom-border-radius': field()?.controlStyle?.borderRadius ,\r\n  '--custom-bg-color': field()?.controlStyle?.background ,\r\n  '--custom-border-color-focus': field()?.controlStyle?.focusBorderColor ,\r\n  '--custom-border-width-focus': field()?.controlStyle?.focusBorderWidth ,\r\n  '--custom-bg-color-focus': field()?.controlStyle?.focusBackground ,\r\n  '--custom-border-color-hover': field()?.controlStyle?.hoverBorderColor ,\r\n  '--custom-border-width-hover': field()?.controlStyle?.hoverBorderWidth ,\r\n  '--custom-border-color-error': field()?.controlStyle?.errorBorderColor ,\r\n  '--custom-border-width-error': field()?.controlStyle?.errorBorderWidth ,\r\n'--custom-font-color-disabled' : field()?.controlStyle?.disableColor ,\r\n'--custom-bg-color-disabled' : field()?.controlStyle?.disableBackground ,\r\n  }\"\r\n>\r\n  @if(reactiveFormControlobject()) {\r\n  <mat-select\r\n    [id]=\"field()?.fieldName\"\r\n    [attr.name]=\"field()?.fieldName\"\r\n    [required]=\"field()?.validators?.isRequired\"\r\n    [placeholder]=\"field()?.placeHolder\"\r\n    [disabled]=\"field()?.isDisable\"\r\n    (openedChange)=\"onSelectOpened($event)\"\r\n    [value]=\"inputValue\"\r\n    (selectionChange)=\"selectionChanged($event)\"\r\n    [formControl]=\"reactiveFormControlobject()\"\r\n  >\r\n    <mat-option *ngFor=\"let data of field()?.options\" [value]=\"data.value\">{{\r\n      data.label\r\n    }}</mat-option>\r\n  </mat-select>\r\n  }@else {\r\n  <mat-select\r\n    [id]=\"field()?.fieldName\"\r\n    [attr.name]=\"field()?.fieldName\"\r\n    [required]=\"field()?.validators?.isRequired\"\r\n    [placeholder]=\"field()?.placeHolder\"\r\n    [disabled]=\"field()?.isDisable\"\r\n    (openedChange)=\"onSelectOpened($event)\"\r\n    [value]=\"inputValue\"\r\n    (selectionChange)=\"selectionChanged($event)\"\r\n  >\r\n    <mat-option *ngFor=\"let data of field()?.options\" [value]=\"data.value\">{{\r\n      data.label\r\n    }}</mat-option>\r\n  </mat-select>\r\n  }\r\n\r\n  <!-- selectField.invalid && (selectField.dirty || selectField.touched) -->\r\n  <mat-error *ngIf=\"false\">\r\n    {{ field()?.validators?.isRequiredMessage }}\r\n  </mat-error>\r\n</mat-form-field>\r\n<div class=\"error-message mt-2\" *ngIf=\"false\">\r\n  {{ field()?.validators?.isRequiredMessage }}\r\n</div>\r\n", styles: [".field-lable{font-size:10px!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}*{font-family:mulish!important}.info-label{display:flex;justify-content:space-between}::ng-deep .mat-mdc-select{display:grid!important;width:auto!important}\n"], dependencies: [{ kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: i3.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i4$1.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$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
+        ], ngImport: i0, template: "<label\r\n  class=\"field-lable info-label\"\r\n  *ngIf=\"field() && field()?.isVisible && field().isShowLabel\"\r\n  >\r\n  <span>{{ field()?.label}}<span style=\"color: red\" *ngIf=\"field() && field()?.validators?.isRequired\">*</span></span>\r\n  <span style=\"justify-content: end;\" *ngIf=\"field() && field()?.configData?.infoMessage\">\r\n    <img class=\"mx-1\" src=\"https://cdn.godigit.com/retail-life/question-mark.svg\" alt=\"\">\r\n    <u>{{field()?.configData?.infoMessage}} ></u>\r\n  </span>\r\n    </label>\r\n  \r\n<mat-form-field\r\n  appearance=\"outline\" \r\n  class=\"input-full-width full-width w-100\"\r\n  *ngIf=\"field() && field()?.isVisible\"\r\n  [ngStyle]=\"{\r\n  '--custom-border-color': field()?.controlStyle?.borderColor ,\r\n  '--custom-border-width': field()?.controlStyle?.borderWidth ,\r\n  '--custom-border-radius': field()?.controlStyle?.borderRadius ,\r\n  '--custom-bg-color': field()?.controlStyle?.background ,\r\n  '--custom-border-color-focus': field()?.controlStyle?.focusBorderColor ,\r\n  '--custom-border-width-focus': field()?.controlStyle?.focusBorderWidth ,\r\n  '--custom-bg-color-focus': field()?.controlStyle?.focusBackground ,\r\n  '--custom-border-color-hover': field()?.controlStyle?.hoverBorderColor ,\r\n  '--custom-border-width-hover': field()?.controlStyle?.hoverBorderWidth ,\r\n  '--custom-border-color-error': field()?.controlStyle?.errorBorderColor ,\r\n  '--custom-border-width-error': field()?.controlStyle?.errorBorderWidth ,\r\n'--custom-font-color-disabled' : field()?.controlStyle?.disableColor ,\r\n'--custom-bg-color-disabled' : field()?.controlStyle?.disableBackground ,\r\n  }\"\r\n>\r\n  @if(reactiveFormControlobject()) {\r\n  <mat-select\r\n    [id]=\"field()?.fieldName\"\r\n    [attr.name]=\"field()?.fieldName\"\r\n    [required]=\"field()?.validators?.isRequired\"\r\n    [placeholder]=\"field()?.placeHolder\"\r\n    [disabled]=\"field()?.isDisable\"\r\n    (openedChange)=\"onSelectOpened($event)\"\r\n    [value]=\"inputValue\"\r\n    (selectionChange)=\"selectionChanged($event)\"\r\n    [formControl]=\"reactiveFormControlobject()\"\r\n  >\r\n    <mat-option *ngFor=\"let data of field()?.options\" [value]=\"data.value\">{{\r\n      data.label\r\n    }}</mat-option>\r\n  </mat-select>\r\n  }@else {\r\n  <mat-select\r\n    [id]=\"field()?.fieldName\"\r\n    [attr.name]=\"field()?.fieldName\"\r\n    [required]=\"field()?.validators?.isRequired\"\r\n    [placeholder]=\"field()?.placeHolder\"\r\n    [disabled]=\"field()?.isDisable\"\r\n    (openedChange)=\"onSelectOpened($event)\"\r\n    [value]=\"inputValue\"\r\n    (selectionChange)=\"selectionChanged($event)\"\r\n  >\r\n    <mat-option *ngFor=\"let data of field()?.options\" [value]=\"data.value\">{{\r\n      data.label\r\n    }}</mat-option>\r\n  </mat-select>\r\n  }\r\n\r\n  <!-- selectField.invalid && (selectField.dirty || selectField.touched) -->\r\n  <mat-error *ngIf=\"false\">\r\n    {{ field()?.validators?.isRequiredMessage }}\r\n  </mat-error>\r\n</mat-form-field>\r\n<div class=\"error-message mt-2\" *ngIf=\"false\">\r\n  {{ field()?.validators?.isRequiredMessage }}\r\n</div>\r\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}*{font-family:mulish!important}.info-label{display:flex;justify-content:space-between}::ng-deep .mat-mdc-select{display:grid!important;width:auto!important}\n"], dependencies: [{ kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: i3.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i4$1.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$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SelectComponent, decorators: [{
             type: Component,
@@ -480,7 +480,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                             useExisting: SelectComponent,
                             multi: true
                         }
-                    ], template: "<label\r\n  class=\"field-lable info-label\"\r\n  *ngIf=\"field() && field()?.isVisible && field().isShowLabel\"\r\n  >\r\n  <span>{{ field()?.label}}<span style=\"color: red\" *ngIf=\"field() && field()?.validators?.isRequired\">*</span></span>\r\n  <span style=\"justify-content: end;\" *ngIf=\"field() && field()?.configData?.infoMessage\">\r\n    <img class=\"mx-1\" src=\"https://cdn.godigit.com/retail-life/question-mark.svg\" alt=\"\">\r\n    <u>{{field()?.configData?.infoMessage}} ></u>\r\n  </span>\r\n    </label>\r\n  \r\n<mat-form-field\r\n  appearance=\"outline\" \r\n  class=\"input-full-width full-width w-100\"\r\n  *ngIf=\"field() && field()?.isVisible\"\r\n  [ngStyle]=\"{\r\n  '--custom-border-color': field()?.controlStyle?.borderColor ,\r\n  '--custom-border-width': field()?.controlStyle?.borderWidth ,\r\n  '--custom-border-radius': field()?.controlStyle?.borderRadius ,\r\n  '--custom-bg-color': field()?.controlStyle?.background ,\r\n  '--custom-border-color-focus': field()?.controlStyle?.focusBorderColor ,\r\n  '--custom-border-width-focus': field()?.controlStyle?.focusBorderWidth ,\r\n  '--custom-bg-color-focus': field()?.controlStyle?.focusBackground ,\r\n  '--custom-border-color-hover': field()?.controlStyle?.hoverBorderColor ,\r\n  '--custom-border-width-hover': field()?.controlStyle?.hoverBorderWidth ,\r\n  '--custom-border-color-error': field()?.controlStyle?.errorBorderColor ,\r\n  '--custom-border-width-error': field()?.controlStyle?.errorBorderWidth ,\r\n'--custom-font-color-disabled' : field()?.controlStyle?.disableColor ,\r\n'--custom-bg-color-disabled' : field()?.controlStyle?.disableBackground ,\r\n  }\"\r\n>\r\n  @if(reactiveFormControlobject()) {\r\n  <mat-select\r\n    [id]=\"field()?.fieldName\"\r\n    [attr.name]=\"field()?.fieldName\"\r\n    [required]=\"field()?.validators?.isRequired\"\r\n    [placeholder]=\"field()?.placeHolder\"\r\n    [disabled]=\"field()?.isDisable\"\r\n    (openedChange)=\"onSelectOpened($event)\"\r\n    [value]=\"inputValue\"\r\n    (selectionChange)=\"selectionChanged($event)\"\r\n    [formControl]=\"reactiveFormControlobject()\"\r\n  >\r\n    <mat-option *ngFor=\"let data of field()?.options\" [value]=\"data.value\">{{\r\n      data.label\r\n    }}</mat-option>\r\n  </mat-select>\r\n  }@else {\r\n  <mat-select\r\n    [id]=\"field()?.fieldName\"\r\n    [attr.name]=\"field()?.fieldName\"\r\n    [required]=\"field()?.validators?.isRequired\"\r\n    [placeholder]=\"field()?.placeHolder\"\r\n    [disabled]=\"field()?.isDisable\"\r\n    (openedChange)=\"onSelectOpened($event)\"\r\n    [value]=\"inputValue\"\r\n    (selectionChange)=\"selectionChanged($event)\"\r\n  >\r\n    <mat-option *ngFor=\"let data of field()?.options\" [value]=\"data.value\">{{\r\n      data.label\r\n    }}</mat-option>\r\n  </mat-select>\r\n  }\r\n\r\n  <!-- selectField.invalid && (selectField.dirty || selectField.touched) -->\r\n  <mat-error *ngIf=\"false\">\r\n    {{ field()?.validators?.isRequiredMessage }}\r\n  </mat-error>\r\n</mat-form-field>\r\n<div class=\"error-message mt-2\" *ngIf=\"false\">\r\n  {{ field()?.validators?.isRequiredMessage }}\r\n</div>\r\n", styles: [".field-lable{font-size:10px!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}*{font-family:mulish!important}.info-label{display:flex;justify-content:space-between}::ng-deep .mat-mdc-select{display:grid!important;width:auto!important}\n"] }]
+                    ], template: "<label\r\n  class=\"field-lable info-label\"\r\n  *ngIf=\"field() && field()?.isVisible && field().isShowLabel\"\r\n  >\r\n  <span>{{ field()?.label}}<span style=\"color: red\" *ngIf=\"field() && field()?.validators?.isRequired\">*</span></span>\r\n  <span style=\"justify-content: end;\" *ngIf=\"field() && field()?.configData?.infoMessage\">\r\n    <img class=\"mx-1\" src=\"https://cdn.godigit.com/retail-life/question-mark.svg\" alt=\"\">\r\n    <u>{{field()?.configData?.infoMessage}} ></u>\r\n  </span>\r\n    </label>\r\n  \r\n<mat-form-field\r\n  appearance=\"outline\" \r\n  class=\"input-full-width full-width w-100\"\r\n  *ngIf=\"field() && field()?.isVisible\"\r\n  [ngStyle]=\"{\r\n  '--custom-border-color': field()?.controlStyle?.borderColor ,\r\n  '--custom-border-width': field()?.controlStyle?.borderWidth ,\r\n  '--custom-border-radius': field()?.controlStyle?.borderRadius ,\r\n  '--custom-bg-color': field()?.controlStyle?.background ,\r\n  '--custom-border-color-focus': field()?.controlStyle?.focusBorderColor ,\r\n  '--custom-border-width-focus': field()?.controlStyle?.focusBorderWidth ,\r\n  '--custom-bg-color-focus': field()?.controlStyle?.focusBackground ,\r\n  '--custom-border-color-hover': field()?.controlStyle?.hoverBorderColor ,\r\n  '--custom-border-width-hover': field()?.controlStyle?.hoverBorderWidth ,\r\n  '--custom-border-color-error': field()?.controlStyle?.errorBorderColor ,\r\n  '--custom-border-width-error': field()?.controlStyle?.errorBorderWidth ,\r\n'--custom-font-color-disabled' : field()?.controlStyle?.disableColor ,\r\n'--custom-bg-color-disabled' : field()?.controlStyle?.disableBackground ,\r\n  }\"\r\n>\r\n  @if(reactiveFormControlobject()) {\r\n  <mat-select\r\n    [id]=\"field()?.fieldName\"\r\n    [attr.name]=\"field()?.fieldName\"\r\n    [required]=\"field()?.validators?.isRequired\"\r\n    [placeholder]=\"field()?.placeHolder\"\r\n    [disabled]=\"field()?.isDisable\"\r\n    (openedChange)=\"onSelectOpened($event)\"\r\n    [value]=\"inputValue\"\r\n    (selectionChange)=\"selectionChanged($event)\"\r\n    [formControl]=\"reactiveFormControlobject()\"\r\n  >\r\n    <mat-option *ngFor=\"let data of field()?.options\" [value]=\"data.value\">{{\r\n      data.label\r\n    }}</mat-option>\r\n  </mat-select>\r\n  }@else {\r\n  <mat-select\r\n    [id]=\"field()?.fieldName\"\r\n    [attr.name]=\"field()?.fieldName\"\r\n    [required]=\"field()?.validators?.isRequired\"\r\n    [placeholder]=\"field()?.placeHolder\"\r\n    [disabled]=\"field()?.isDisable\"\r\n    (openedChange)=\"onSelectOpened($event)\"\r\n    [value]=\"inputValue\"\r\n    (selectionChange)=\"selectionChanged($event)\"\r\n  >\r\n    <mat-option *ngFor=\"let data of field()?.options\" [value]=\"data.value\">{{\r\n      data.label\r\n    }}</mat-option>\r\n  </mat-select>\r\n  }\r\n\r\n  <!-- selectField.invalid && (selectField.dirty || selectField.touched) -->\r\n  <mat-error *ngIf=\"false\">\r\n    {{ field()?.validators?.isRequiredMessage }}\r\n  </mat-error>\r\n</mat-form-field>\r\n<div class=\"error-message mt-2\" *ngIf=\"false\">\r\n  {{ field()?.validators?.isRequiredMessage }}\r\n</div>\r\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}*{font-family:mulish!important}.info-label{display:flex;justify-content:space-between}::ng-deep .mat-mdc-select{display:grid!important;width:auto!important}\n"] }]
         }], ctorParameters: () => [{ type: MasterControlService }], propDecorators: { selectionChange: [{
                 type: Output
             }] } });
@@ -538,7 +538,7 @@ class RadioComponent {
                 useExisting: RadioComponent,
                 multi: true
             }
-        ], ngImport: i0, template: "<label class=\"field-lable\"  *ngIf=\"field() && field()?.isVisible && field().isShowLabel\" [ngStyle]=\"{\r\n  }\"> {{field()?.label}} <span class=\"error-message\" *ngIf=\"field()?.validators?.isRequired\">*</span> </label>\r\n  @if(reactiveFormControlobject()) {\r\n     <mat-radio-group class=\"w-100\" *ngIf=\"field() && field()?.isVisible\"\r\n    class=\"radio-btn-group radio-btn-gender\"\r\n    [required]=\"field()?.validators?.isRequired\"\r\n    [value]=\"inputValue\"\r\n    [formControl]=\"reactiveFormControlobject()\"\r\n    (change)=\"onRadioGroupChange($event)\"\r\n    >\r\n    <div\r\n      class=\"card radio-card-gender  py-auto px-1\"\r\n      *ngFor=\"let data of field()?.options\"\r\n      [ngClass]=\"{'disable-radio-btn': field()?.isDisable}\"\r\n      (click)=\"toggleRadio(data.value, $event)\"\r\n       [ngStyle]=\"{\r\n    '--radio-button-border-color': inputValue === data.value ? field()?.controlStyle?.focusBorderColor : field()?.controlStyle?.borderColor,\r\n    '--radio-button-background-color': inputValue === data.value ? field()?.controlStyle?.focusBackground : field()?.controlStyle?.background,\r\n    '--radio-button-border-width': inputValue === data.value ? field()?.controlStyle?.focusBorderWidth : field()?.controlStyle?.borderWidth,\r\n    '--radio-button-border-radius': inputValue === data.value ? field()?.controlStyle?.borderRadius : field()?.controlStyle?.borderRadius,\r\n  }\"\r\n      >\r\n      <mat-radio-button\r\n        style=\"min-width: 72px; text-align: center;\"\r\n        class=\"radioButtonGender\"\r\n        [value]=\"data.value\"\r\n      >\r\n        <span style=\"white-space: pre-line;\" class=\"forRadioLabel\" [ngStyle]=\"{\r\n    '--radio-button-font-weight': field()?.controlStyle?.fontWeight,\r\n    '--radio-button-font-size': field()?.controlStyle?.fontSize,\r\n    '--radio-button-font-color': field()?.controlStyle?.color,\r\n  }\">{{ data.label }}\r\n  <img class=\"radio-btn-icon\" *ngIf=\"field()?.imageUrl\" [src]=\"field()?.imageUrl\" alt=\"\">\r\n  </span>\r\n      </mat-radio-button>\r\n    </div>\r\n  </mat-radio-group>\r\n  }@else {\r\n     <mat-radio-group class=\"w-100\" *ngIf=\"field() && field()?.isVisible\"\r\n    class=\"radio-btn-group radio-btn-gender\"\r\n    [required]=\"field()?.validators?.isRequired\"\r\n    [value]=\"inputValue\"\r\n    (change)=\"onRadioGroupChange($event)\"\r\n    >\r\n    <div\r\n      class=\"card radio-card-gender py-auto px-1\"\r\n      style=\"width: 100% !important; min-width: fit-content !important;\"\r\n      *ngFor=\"let data of field()?.options\"\r\n      [ngClass]=\"{'disable-radio-btn': field()?.isDisable}\"\r\n      (click)=\"toggleRadio(data.value, $event)\"\r\n       [ngStyle]=\"{\r\n    '--radio-button-border-color': inputValue === data.value ? field()?.controlStyle?.focusBorderColor : field()?.controlStyle?.borderColor,\r\n    '--radio-button-background-color': inputValue === data.value ? field()?.controlStyle?.focusBackground : field()?.controlStyle?.background,\r\n    '--radio-button-border-width': inputValue === data.value ? field()?.controlStyle?.focusBorderWidth : field()?.controlStyle?.borderWidth,\r\n    '--radio-button-border-radius': inputValue === data.value ? field()?.controlStyle?.borderRadius : field()?.controlStyle?.borderRadius,\r\n  }\"\r\n      >\r\n      <mat-radio-button\r\n        style=\"min-width: 72px; text-align: center;\"\r\n        class=\"radioButtonGender\"\r\n        [value]=\"data.value\"\r\n      >\r\n        <span style=\"white-space: pre-line;\" class=\"forRadioLabel\" [ngStyle]=\"{\r\n    '--radio-button-font-weight': field()?.controlStyle?.fontWeight,\r\n    '--radio-button-font-size': field()?.controlStyle?.fontSize,\r\n    '--radio-button-font-color': field()?.controlStyle?.color,\r\n  }\">{{ data.label }}\r\n  <img class=\"radio-btn-icon\" *ngIf=\"field()?.imageUrl\" [src]=\"field()?.imageUrl\" alt=\"\">\r\n  </span>\r\n      </mat-radio-button>\r\n    </div>\r\n  </mat-radio-group>\r\n  }\r\n  <div class=\"error-message\" *ngIf=\"false\">\r\n    {{field()?.validators?.patternMessage}}.\r\n</div>\r\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}.radio-btn-group{display:flex;align-items:center;gap:1rem;align-self:stretch}::ng-deep .radio-btn-gender .mdc-form-field .mdc-radio{display:none!important}.radio-card-gender{box-shadow:none;border-color:var(--radio-button-border-color,#DADADA);border-width:var(--radio-button-border-width, 1px solid);background:var(--radio-button-background-color, #FFFFFF);display:flex;align-items:center;cursor:pointer;width:max-content!important;border-radius:var(--radio-button-border-radius, 6px)}::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;border:1px solid var(--Colors-Greys-Border-Grey, rgba(221, 221, 221, 1));pointer-events:none;cursor:none}\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$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.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 }] });
+        ], ngImport: i0, template: "<label class=\"field-lable\"  *ngIf=\"field() && field()?.isVisible && field().isShowLabel\" [ngStyle]=\"{\r\n  }\">{{field()?.label}}<span class=\"error-message\" *ngIf=\"field()?.validators?.isRequired\">*</span></label>\r\n  @if(reactiveFormControlobject()) {\r\n     <mat-radio-group class=\"w-100\" *ngIf=\"field() && field()?.isVisible\"\r\n    class=\"radio-btn-group radio-btn-gender\"\r\n    [required]=\"field()?.validators?.isRequired\"\r\n    [value]=\"inputValue\"\r\n    [formControl]=\"reactiveFormControlobject()\"\r\n    (change)=\"onRadioGroupChange($event)\"\r\n    >\r\n    <div\r\n      class=\"card radio-card-gender  py-auto px-1\"\r\n      *ngFor=\"let data of field()?.options\"\r\n      [ngClass]=\"{'disable-radio-btn': field()?.isDisable}\"\r\n      (click)=\"toggleRadio(data.value, $event)\"\r\n       [ngStyle]=\"{\r\n    '--radio-button-border-color': inputValue === data.value ? field()?.controlStyle?.focusBorderColor : field()?.controlStyle?.borderColor,\r\n    '--radio-button-background-color': inputValue === data.value ? field()?.controlStyle?.focusBackground : field()?.controlStyle?.background,\r\n    '--radio-button-border-width': inputValue === data.value ? field()?.controlStyle?.focusBorderWidth : field()?.controlStyle?.borderWidth,\r\n    '--radio-button-border-radius': inputValue === data.value ? field()?.controlStyle?.borderRadius : field()?.controlStyle?.borderRadius,\r\n  }\"\r\n      >\r\n      <mat-radio-button\r\n        style=\"min-width: 72px; text-align: center;\"\r\n        class=\"radioButtonGender\"\r\n        [value]=\"data.value\"\r\n      >\r\n        <span style=\"white-space: pre-line;\" class=\"forRadioLabel\" [ngStyle]=\"{\r\n    '--radio-button-font-weight': field()?.controlStyle?.fontWeight,\r\n    '--radio-button-font-size': field()?.controlStyle?.fontSize,\r\n    '--radio-button-font-color': field()?.controlStyle?.color,\r\n  }\">{{ data.label }}\r\n  <img class=\"radio-btn-icon\" *ngIf=\"field()?.imageUrl\" [src]=\"field()?.imageUrl\" alt=\"\">\r\n  </span>\r\n      </mat-radio-button>\r\n    </div>\r\n  </mat-radio-group>\r\n  }@else {\r\n     <mat-radio-group class=\"w-100\" *ngIf=\"field() && field()?.isVisible\"\r\n    class=\"radio-btn-group radio-btn-gender\"\r\n    [required]=\"field()?.validators?.isRequired\"\r\n    [value]=\"inputValue\"\r\n    (change)=\"onRadioGroupChange($event)\"\r\n    >\r\n    <div\r\n      class=\"card radio-card-gender py-auto px-1\"\r\n      style=\"width: 100% !important; min-width: fit-content !important;\"\r\n      *ngFor=\"let data of field()?.options\"\r\n      [ngClass]=\"{'disable-radio-btn': field()?.isDisable}\"\r\n      (click)=\"toggleRadio(data.value, $event)\"\r\n       [ngStyle]=\"{\r\n    '--radio-button-border-color': inputValue === data.value ? field()?.controlStyle?.focusBorderColor : field()?.controlStyle?.borderColor,\r\n    '--radio-button-background-color': inputValue === data.value ? field()?.controlStyle?.focusBackground : field()?.controlStyle?.background,\r\n    '--radio-button-border-width': inputValue === data.value ? field()?.controlStyle?.focusBorderWidth : field()?.controlStyle?.borderWidth,\r\n    '--radio-button-border-radius': inputValue === data.value ? field()?.controlStyle?.borderRadius : field()?.controlStyle?.borderRadius,\r\n  }\"\r\n      >\r\n      <mat-radio-button\r\n        style=\"min-width: 72px; text-align: center;\"\r\n        class=\"radioButtonGender\"\r\n        [value]=\"data.value\"\r\n      >\r\n        <span style=\"white-space: pre-line;\" class=\"forRadioLabel\" [ngStyle]=\"{\r\n    '--radio-button-font-weight': field()?.controlStyle?.fontWeight,\r\n    '--radio-button-font-size': field()?.controlStyle?.fontSize,\r\n    '--radio-button-font-color': field()?.controlStyle?.color,\r\n  }\">{{ data.label }}\r\n  <img class=\"radio-btn-icon\" *ngIf=\"field()?.imageUrl\" [src]=\"field()?.imageUrl\" alt=\"\">\r\n  </span>\r\n      </mat-radio-button>\r\n    </div>\r\n  </mat-radio-group>\r\n  }\r\n  <div class=\"error-message\" *ngIf=\"false\">\r\n    {{field()?.validators?.patternMessage}}.\r\n</div>\r\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}.radio-btn-group{display:flex;align-items:center;gap:1rem;align-self:stretch}::ng-deep .radio-btn-gender .mdc-form-field .mdc-radio{display:none!important}.radio-card-gender{box-shadow:none;border-color:var(--radio-button-border-color,#DADADA);border-width:var(--radio-button-border-width, 1px solid);background:var(--radio-button-background-color, #FFFFFF);display:flex;align-items:center;cursor:pointer;width:max-content!important;border-radius:var(--radio-button-border-radius, 6px)}::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;border:1px solid var(--Colors-Greys-Border-Grey, rgba(221, 221, 221, 1));pointer-events:none;cursor:none}\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$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.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 }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RadioComponent, decorators: [{
             type: Component,
@@ -553,7 +553,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                             useExisting: RadioComponent,
                             multi: true
                         }
-                    ], template: "<label class=\"field-lable\"  *ngIf=\"field() && field()?.isVisible && field().isShowLabel\" [ngStyle]=\"{\r\n  }\"> {{field()?.label}} <span class=\"error-message\" *ngIf=\"field()?.validators?.isRequired\">*</span> </label>\r\n  @if(reactiveFormControlobject()) {\r\n     <mat-radio-group class=\"w-100\" *ngIf=\"field() && field()?.isVisible\"\r\n    class=\"radio-btn-group radio-btn-gender\"\r\n    [required]=\"field()?.validators?.isRequired\"\r\n    [value]=\"inputValue\"\r\n    [formControl]=\"reactiveFormControlobject()\"\r\n    (change)=\"onRadioGroupChange($event)\"\r\n    >\r\n    <div\r\n      class=\"card radio-card-gender  py-auto px-1\"\r\n      *ngFor=\"let data of field()?.options\"\r\n      [ngClass]=\"{'disable-radio-btn': field()?.isDisable}\"\r\n      (click)=\"toggleRadio(data.value, $event)\"\r\n       [ngStyle]=\"{\r\n    '--radio-button-border-color': inputValue === data.value ? field()?.controlStyle?.focusBorderColor : field()?.controlStyle?.borderColor,\r\n    '--radio-button-background-color': inputValue === data.value ? field()?.controlStyle?.focusBackground : field()?.controlStyle?.background,\r\n    '--radio-button-border-width': inputValue === data.value ? field()?.controlStyle?.focusBorderWidth : field()?.controlStyle?.borderWidth,\r\n    '--radio-button-border-radius': inputValue === data.value ? field()?.controlStyle?.borderRadius : field()?.controlStyle?.borderRadius,\r\n  }\"\r\n      >\r\n      <mat-radio-button\r\n        style=\"min-width: 72px; text-align: center;\"\r\n        class=\"radioButtonGender\"\r\n        [value]=\"data.value\"\r\n      >\r\n        <span style=\"white-space: pre-line;\" class=\"forRadioLabel\" [ngStyle]=\"{\r\n    '--radio-button-font-weight': field()?.controlStyle?.fontWeight,\r\n    '--radio-button-font-size': field()?.controlStyle?.fontSize,\r\n    '--radio-button-font-color': field()?.controlStyle?.color,\r\n  }\">{{ data.label }}\r\n  <img class=\"radio-btn-icon\" *ngIf=\"field()?.imageUrl\" [src]=\"field()?.imageUrl\" alt=\"\">\r\n  </span>\r\n      </mat-radio-button>\r\n    </div>\r\n  </mat-radio-group>\r\n  }@else {\r\n     <mat-radio-group class=\"w-100\" *ngIf=\"field() && field()?.isVisible\"\r\n    class=\"radio-btn-group radio-btn-gender\"\r\n    [required]=\"field()?.validators?.isRequired\"\r\n    [value]=\"inputValue\"\r\n    (change)=\"onRadioGroupChange($event)\"\r\n    >\r\n    <div\r\n      class=\"card radio-card-gender py-auto px-1\"\r\n      style=\"width: 100% !important; min-width: fit-content !important;\"\r\n      *ngFor=\"let data of field()?.options\"\r\n      [ngClass]=\"{'disable-radio-btn': field()?.isDisable}\"\r\n      (click)=\"toggleRadio(data.value, $event)\"\r\n       [ngStyle]=\"{\r\n    '--radio-button-border-color': inputValue === data.value ? field()?.controlStyle?.focusBorderColor : field()?.controlStyle?.borderColor,\r\n    '--radio-button-background-color': inputValue === data.value ? field()?.controlStyle?.focusBackground : field()?.controlStyle?.background,\r\n    '--radio-button-border-width': inputValue === data.value ? field()?.controlStyle?.focusBorderWidth : field()?.controlStyle?.borderWidth,\r\n    '--radio-button-border-radius': inputValue === data.value ? field()?.controlStyle?.borderRadius : field()?.controlStyle?.borderRadius,\r\n  }\"\r\n      >\r\n      <mat-radio-button\r\n        style=\"min-width: 72px; text-align: center;\"\r\n        class=\"radioButtonGender\"\r\n        [value]=\"data.value\"\r\n      >\r\n        <span style=\"white-space: pre-line;\" class=\"forRadioLabel\" [ngStyle]=\"{\r\n    '--radio-button-font-weight': field()?.controlStyle?.fontWeight,\r\n    '--radio-button-font-size': field()?.controlStyle?.fontSize,\r\n    '--radio-button-font-color': field()?.controlStyle?.color,\r\n  }\">{{ data.label }}\r\n  <img class=\"radio-btn-icon\" *ngIf=\"field()?.imageUrl\" [src]=\"field()?.imageUrl\" alt=\"\">\r\n  </span>\r\n      </mat-radio-button>\r\n    </div>\r\n  </mat-radio-group>\r\n  }\r\n  <div class=\"error-message\" *ngIf=\"false\">\r\n    {{field()?.validators?.patternMessage}}.\r\n</div>\r\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}.radio-btn-group{display:flex;align-items:center;gap:1rem;align-self:stretch}::ng-deep .radio-btn-gender .mdc-form-field .mdc-radio{display:none!important}.radio-card-gender{box-shadow:none;border-color:var(--radio-button-border-color,#DADADA);border-width:var(--radio-button-border-width, 1px solid);background:var(--radio-button-background-color, #FFFFFF);display:flex;align-items:center;cursor:pointer;width:max-content!important;border-radius:var(--radio-button-border-radius, 6px)}::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;border:1px solid var(--Colors-Greys-Border-Grey, rgba(221, 221, 221, 1));pointer-events:none;cursor:none}\n"] }]
+                    ], template: "<label class=\"field-lable\"  *ngIf=\"field() && field()?.isVisible && field().isShowLabel\" [ngStyle]=\"{\r\n  }\">{{field()?.label}}<span class=\"error-message\" *ngIf=\"field()?.validators?.isRequired\">*</span></label>\r\n  @if(reactiveFormControlobject()) {\r\n     <mat-radio-group class=\"w-100\" *ngIf=\"field() && field()?.isVisible\"\r\n    class=\"radio-btn-group radio-btn-gender\"\r\n    [required]=\"field()?.validators?.isRequired\"\r\n    [value]=\"inputValue\"\r\n    [formControl]=\"reactiveFormControlobject()\"\r\n    (change)=\"onRadioGroupChange($event)\"\r\n    >\r\n    <div\r\n      class=\"card radio-card-gender  py-auto px-1\"\r\n      *ngFor=\"let data of field()?.options\"\r\n      [ngClass]=\"{'disable-radio-btn': field()?.isDisable}\"\r\n      (click)=\"toggleRadio(data.value, $event)\"\r\n       [ngStyle]=\"{\r\n    '--radio-button-border-color': inputValue === data.value ? field()?.controlStyle?.focusBorderColor : field()?.controlStyle?.borderColor,\r\n    '--radio-button-background-color': inputValue === data.value ? field()?.controlStyle?.focusBackground : field()?.controlStyle?.background,\r\n    '--radio-button-border-width': inputValue === data.value ? field()?.controlStyle?.focusBorderWidth : field()?.controlStyle?.borderWidth,\r\n    '--radio-button-border-radius': inputValue === data.value ? field()?.controlStyle?.borderRadius : field()?.controlStyle?.borderRadius,\r\n  }\"\r\n      >\r\n      <mat-radio-button\r\n        style=\"min-width: 72px; text-align: center;\"\r\n        class=\"radioButtonGender\"\r\n        [value]=\"data.value\"\r\n      >\r\n        <span style=\"white-space: pre-line;\" class=\"forRadioLabel\" [ngStyle]=\"{\r\n    '--radio-button-font-weight': field()?.controlStyle?.fontWeight,\r\n    '--radio-button-font-size': field()?.controlStyle?.fontSize,\r\n    '--radio-button-font-color': field()?.controlStyle?.color,\r\n  }\">{{ data.label }}\r\n  <img class=\"radio-btn-icon\" *ngIf=\"field()?.imageUrl\" [src]=\"field()?.imageUrl\" alt=\"\">\r\n  </span>\r\n      </mat-radio-button>\r\n    </div>\r\n  </mat-radio-group>\r\n  }@else {\r\n     <mat-radio-group class=\"w-100\" *ngIf=\"field() && field()?.isVisible\"\r\n    class=\"radio-btn-group radio-btn-gender\"\r\n    [required]=\"field()?.validators?.isRequired\"\r\n    [value]=\"inputValue\"\r\n    (change)=\"onRadioGroupChange($event)\"\r\n    >\r\n    <div\r\n      class=\"card radio-card-gender py-auto px-1\"\r\n      style=\"width: 100% !important; min-width: fit-content !important;\"\r\n      *ngFor=\"let data of field()?.options\"\r\n      [ngClass]=\"{'disable-radio-btn': field()?.isDisable}\"\r\n      (click)=\"toggleRadio(data.value, $event)\"\r\n       [ngStyle]=\"{\r\n    '--radio-button-border-color': inputValue === data.value ? field()?.controlStyle?.focusBorderColor : field()?.controlStyle?.borderColor,\r\n    '--radio-button-background-color': inputValue === data.value ? field()?.controlStyle?.focusBackground : field()?.controlStyle?.background,\r\n    '--radio-button-border-width': inputValue === data.value ? field()?.controlStyle?.focusBorderWidth : field()?.controlStyle?.borderWidth,\r\n    '--radio-button-border-radius': inputValue === data.value ? field()?.controlStyle?.borderRadius : field()?.controlStyle?.borderRadius,\r\n  }\"\r\n      >\r\n      <mat-radio-button\r\n        style=\"min-width: 72px; text-align: center;\"\r\n        class=\"radioButtonGender\"\r\n        [value]=\"data.value\"\r\n      >\r\n        <span style=\"white-space: pre-line;\" class=\"forRadioLabel\" [ngStyle]=\"{\r\n    '--radio-button-font-weight': field()?.controlStyle?.fontWeight,\r\n    '--radio-button-font-size': field()?.controlStyle?.fontSize,\r\n    '--radio-button-font-color': field()?.controlStyle?.color,\r\n  }\">{{ data.label }}\r\n  <img class=\"radio-btn-icon\" *ngIf=\"field()?.imageUrl\" [src]=\"field()?.imageUrl\" alt=\"\">\r\n  </span>\r\n      </mat-radio-button>\r\n    </div>\r\n  </mat-radio-group>\r\n  }\r\n  <div class=\"error-message\" *ngIf=\"false\">\r\n    {{field()?.validators?.patternMessage}}.\r\n</div>\r\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}.radio-btn-group{display:flex;align-items:center;gap:1rem;align-self:stretch}::ng-deep .radio-btn-gender .mdc-form-field .mdc-radio{display:none!important}.radio-card-gender{box-shadow:none;border-color:var(--radio-button-border-color,#DADADA);border-width:var(--radio-button-border-width, 1px solid);background:var(--radio-button-background-color, #FFFFFF);display:flex;align-items:center;cursor:pointer;width:max-content!important;border-radius:var(--radio-button-border-radius, 6px)}::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;border:1px solid var(--Colors-Greys-Border-Grey, rgba(221, 221, 221, 1));pointer-events:none;cursor:none}\n"] }]
         }], ctorParameters: () => [{ type: MasterControlService }], propDecorators: { change: [{
                 type: Output
             }] } });