master-control 0.4.40 → 0.4.42

package/fesm2022/master-control.mjs

@@ -1132,7 +1132,7 @@ class UploadComponent {
                 let req = {
                     documentId: this.openQuoteImageObj().documentId,
                     documentCode: this.openQuoteImageObj().documentCode,
-                    companycode: this.openQuoteImageObj().companyCode,
+                    companyCode: this.openQuoteImageObj().companyCode,
                 };
                 this.masterservice.getImage(this.field().configData, req).subscribe((response) => {
                     if (response) {
@@ -1609,6 +1609,15 @@ class TextareaComponent {
         this._onTouched();
         this.blur.emit(event);
     }
+    enableField() {
+        if (this.field()?.isDisable && this.reactiveFormControlobject()) {
+            this.reactiveFormControlobject().enable();
+        }
+        // Update the field's isDisable property
+        if (this.field()) {
+            this.field().isDisable = false;
+        }
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TextareaComponent, deps: [{ token: MasterControlService }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: TextareaComponent, isStandalone: true, selector: "lib-textarea", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, reactiveFormControlobject: { classPropertyName: "reactiveFormControlobject", publicName: "reactiveFormControlobject", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { blur: "blur" }, providers: [
             {
@@ -1616,7 +1625,7 @@ class TextareaComponent {
                 useExisting: TextareaComponent,
                 multi: true
             }
-        ], ngImport: i0, template: "@if(reactiveFormControlobject()) {\n<textarea\n[ngStyle]=\"{\n    '--custom-textarea-width': field()?.controlStyle?.width ,\n    '--custom-textarea-border-color': field()?.controlStyle?.borderColor ,\n    '--custom-textarea-border-width': field()?.controlStyle?.borderWidth ,\n    '--custom-textarea-border-color-focus': field()?.controlStyle?.focusBorderColor ,\n    '--custom-textarea-border-width-focus': field()?.controlStyle?.focusBorderColor ,\n    '--custom-textarea-radius': field()?.controlStyle?.borderRadius ,\n    '--custom-textarea-caret-color': field()?.controlStyle?.caretColor ,\n    '--custom-textarea-font-color': field()?.controlStyle?.color ,\n    }\"\n*ngIf=\"field() && field()?.isVisible\"\n  cols=\"40\"\n  rows=\"3\"\n  autocomplete=\"off\"\n  [name]=\"field()?.fieldName\"\n  [id]=\"field()?.fieldName\"\n  [placeholder]=\"field()?.placeHolder\"\n  [maxLength]=\"field()?.validators?.maxLength\"\n  [minLength]=\"field()?.validators?.minLength\"\n  [disabled]=\"field()?.isDisable\"\n  [required]=\"field()?.validators?.isRequired\"\n  (input)=\"onTextareaChange($event)\"\n  (blur)=\"onTextareaBlur($event)\"\n  [value]=\"textareaValue\"\n  [formControl]=\"reactiveFormControlobject()\"\n></textarea>\n}@else {\n<textarea\n[ngStyle]=\"{\n    '--custom-textarea-width': field()?.controlStyle?.width ,\n    '--custom-textarea-border-color': field()?.controlStyle?.borderColor ,\n    '--custom-textarea-border-width': field()?.controlStyle?.borderWidth ,\n    '--custom-textarea-border-color-focus': field()?.controlStyle?.focusBorderColor ,\n    '--custom-textarea-border-width-focus': field()?.controlStyle?.focusBorderColor ,\n    '--custom-textarea-radius': field()?.controlStyle?.borderRadius ,\n    '--custom-textarea-caret-color': field()?.controlStyle?.caretColor ,\n    '--custom-textarea-font-color': field()?.controlStyle?.color ,\n    }\"\n*ngIf=\"field() && field()?.isVisible\"\n  cols=\"40\"\n  rows=\"3\"\n  autocomplete=\"off\"\n  [name]=\"field()?.fieldName\"\n  [id]=\"field()?.fieldName\"\n  [placeholder]=\"field()?.placeHolder\"\n  [maxLength]=\"field()?.validators?.maxLength\"\n  [minLength]=\"field()?.validators?.minLength\"\n  [disabled]=\"field()?.isDisable\"\n  [required]=\"field()?.validators?.isRequired\"\n  (input)=\"onTextareaChange($event)\"\n  (blur)=\"onTextareaBlur($event)\"\n  [value]=\"textareaValue\"\n></textarea>\n}\n", styles: ["*{font-family:mulish!important}::ng-deep textarea{width:-webkit-fill-available!important;border:1.5px solid #dddddd!important;border-radius:4px!important;caret-color:#fb0!important;color:#444!important}::ng-deep textarea:focus{outline:none!important;border:1.5px solid #ffbb00!important}::ng-deep textarea:focus-visible{outline:none!important;border:1.5px solid #ffbb00!important}::ng-deep textarea{width:var(--custom-textarea-width, -webkit-fill-available)!important;border-radius:var(--custom-textarea-radius, 4px)!important;caret-color:var(--custom-textarea-caret-color, #ffbb00)!important;color:var(--custom-textarea-font-color, #444444)!important;border-color:var(--custom-textarea-border-color,#dddddd)!important;border-width:var(--custom-textarea-border-width, 1.5px solid)!important}::ng-deep textarea:focus{border-color:var(--custom-textarea-border-color-focus,#dddddd)!important;border-width:var(--custom-textarea-border-width-focus, 1.5px solid)!important}::ng-deep textarea:focus-visible{border-color:var(--custom-textarea-border-color-focus,#dddddd)!important;border-width:var(--custom-textarea-border-width-focus, 1.5px solid)!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormsModule }] });
+        ], ngImport: i0, template: "\n<label\n  class=\"field-lable\"\n  *ngIf=\"field() && field()?.isVisible && field().isShowLabel\"\n  >{{ field()?.label\n  }}<span style=\"color: red\" *ngIf=\"field() && field()?.validators?.isRequired\"\n    >*</span\n  ></label\n>\n<div class=\"textarea-wrapper\">\n@if(reactiveFormControlobject()) {\n<textarea\n[ngStyle]=\"{\n    '--custom-textarea-width': field()?.controlStyle?.width ,\n    '--custom-textarea-border-color': field()?.controlStyle?.borderColor ,\n    '--custom-textarea-border-width': field()?.controlStyle?.borderWidth ,\n    '--custom-textarea-border-color-focus': field()?.controlStyle?.focusBorderColor ,\n    '--custom-textarea-border-width-focus': field()?.controlStyle?.focusBorderColor ,\n    '--custom-textarea-radius': field()?.controlStyle?.borderRadius ,\n    '--custom-textarea-caret-color': field()?.controlStyle?.caretColor ,\n    '--custom-textarea-font-color': field()?.controlStyle?.color ,\n    }\"\n*ngIf=\"field() && field()?.isVisible\"\n  cols=\"40\"\n  rows=\"3\"\n  autocomplete=\"off\"\n  [name]=\"field()?.fieldName\"\n  [id]=\"field()?.fieldName\"\n  [placeholder]=\"field()?.placeHolder\"\n  [maxLength]=\"field()?.validators?.maxLength\"\n  [minLength]=\"field()?.validators?.minLength\"\n  [disabled]=\"field()?.isDisable\"\n  [required]=\"field()?.validators?.isRequired\"\n  (input)=\"onTextareaChange($event)\"\n  (blur)=\"onTextareaBlur($event)\"\n  [value]=\"textareaValue\"\n  [formControl]=\"reactiveFormControlobject()\"\n></textarea>\n}@else {\n<textarea\n[ngStyle]=\"{\n    '--custom-textarea-width': field()?.controlStyle?.width ,\n    '--custom-textarea-border-color': field()?.controlStyle?.borderColor ,\n    '--custom-textarea-border-width': field()?.controlStyle?.borderWidth ,\n    '--custom-textarea-border-color-focus': field()?.controlStyle?.focusBorderColor ,\n    '--custom-textarea-border-width-focus': field()?.controlStyle?.focusBorderColor ,\n    '--custom-textarea-radius': field()?.controlStyle?.borderRadius ,\n    '--custom-textarea-caret-color': field()?.controlStyle?.caretColor ,\n    '--custom-textarea-font-color': field()?.controlStyle?.color ,\n    }\"\n*ngIf=\"field() && field()?.isVisible\"\n  cols=\"40\"\n  rows=\"3\"\n  autocomplete=\"off\"\n  [name]=\"field()?.fieldName\"\n  [id]=\"field()?.fieldName\"\n  [placeholder]=\"field()?.placeHolder\"\n  [maxLength]=\"field()?.validators?.maxLength\"\n  [minLength]=\"field()?.validators?.minLength\"\n  [disabled]=\"field()?.isDisable\"\n  [required]=\"field()?.validators?.isRequired\"\n  (input)=\"onTextareaChange($event)\"\n  (blur)=\"onTextareaBlur($event)\"\n  [value]=\"textareaValue\"\n></textarea>\n}\n\n  <span class=\"mx-3 textarea-suffix\">\n    @if(field()?.configData?.isDisabledInputEdit) {\n      @if(field()?.isDisable) {\n        <img *ngIf=\"field()?.imageUrl\" [src]='field().imageUrl' alt=\"\" (click)=\"enableField()\" class=\"edit-icon\" />\n      }\n    }\n  </span>\n</div>\n", styles: [".field-lable{font-size:12px!important;font-weight:700!important;color:#444!important;margin-bottom:5px}*{font-family:mulish!important}::ng-deep textarea{width:-webkit-fill-available!important;border:1.5px solid #dddddd!important;border-radius:4px!important;caret-color:#fb0!important;color:#444!important}::ng-deep textarea:focus{outline:none!important;border:1.5px solid #ffbb00!important}::ng-deep textarea:focus-visible{outline:none!important;border:1.5px solid #ffbb00!important}::ng-deep textarea{width:var(--custom-textarea-width, -webkit-fill-available)!important;border-radius:var(--custom-textarea-radius, 4px)!important;caret-color:var(--custom-textarea-caret-color, #ffbb00)!important;color:var(--custom-textarea-font-color, #444444)!important;border-color:var(--custom-textarea-border-color,#dddddd)!important;border-width:var(--custom-textarea-border-width, 1.5px solid)!important}::ng-deep textarea:focus{border-color:var(--custom-textarea-border-color-focus,#dddddd)!important;border-width:var(--custom-textarea-border-width-focus, 1.5px solid)!important}::ng-deep textarea:focus-visible{border-color:var(--custom-textarea-border-color-focus,#dddddd)!important;border-width:var(--custom-textarea-border-width-focus, 1.5px solid)!important}.textarea-wrapper{position:relative;display:inline-block;width:100%}.textarea-suffix{position:absolute;right:12px;top:12px;display:flex;align-items:center;pointer-events:auto}.edit-icon{cursor:pointer;width:20px;height:20px;opacity:.6;transition:opacity .2s ease}.edit-icon:hover{opacity:1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormsModule }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TextareaComponent, decorators: [{
             type: Component,
@@ -1630,7 +1639,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                             useExisting: TextareaComponent,
                             multi: true
                         }
-                    ], template: "@if(reactiveFormControlobject()) {\n<textarea\n[ngStyle]=\"{\n    '--custom-textarea-width': field()?.controlStyle?.width ,\n    '--custom-textarea-border-color': field()?.controlStyle?.borderColor ,\n    '--custom-textarea-border-width': field()?.controlStyle?.borderWidth ,\n    '--custom-textarea-border-color-focus': field()?.controlStyle?.focusBorderColor ,\n    '--custom-textarea-border-width-focus': field()?.controlStyle?.focusBorderColor ,\n    '--custom-textarea-radius': field()?.controlStyle?.borderRadius ,\n    '--custom-textarea-caret-color': field()?.controlStyle?.caretColor ,\n    '--custom-textarea-font-color': field()?.controlStyle?.color ,\n    }\"\n*ngIf=\"field() && field()?.isVisible\"\n  cols=\"40\"\n  rows=\"3\"\n  autocomplete=\"off\"\n  [name]=\"field()?.fieldName\"\n  [id]=\"field()?.fieldName\"\n  [placeholder]=\"field()?.placeHolder\"\n  [maxLength]=\"field()?.validators?.maxLength\"\n  [minLength]=\"field()?.validators?.minLength\"\n  [disabled]=\"field()?.isDisable\"\n  [required]=\"field()?.validators?.isRequired\"\n  (input)=\"onTextareaChange($event)\"\n  (blur)=\"onTextareaBlur($event)\"\n  [value]=\"textareaValue\"\n  [formControl]=\"reactiveFormControlobject()\"\n></textarea>\n}@else {\n<textarea\n[ngStyle]=\"{\n    '--custom-textarea-width': field()?.controlStyle?.width ,\n    '--custom-textarea-border-color': field()?.controlStyle?.borderColor ,\n    '--custom-textarea-border-width': field()?.controlStyle?.borderWidth ,\n    '--custom-textarea-border-color-focus': field()?.controlStyle?.focusBorderColor ,\n    '--custom-textarea-border-width-focus': field()?.controlStyle?.focusBorderColor ,\n    '--custom-textarea-radius': field()?.controlStyle?.borderRadius ,\n    '--custom-textarea-caret-color': field()?.controlStyle?.caretColor ,\n    '--custom-textarea-font-color': field()?.controlStyle?.color ,\n    }\"\n*ngIf=\"field() && field()?.isVisible\"\n  cols=\"40\"\n  rows=\"3\"\n  autocomplete=\"off\"\n  [name]=\"field()?.fieldName\"\n  [id]=\"field()?.fieldName\"\n  [placeholder]=\"field()?.placeHolder\"\n  [maxLength]=\"field()?.validators?.maxLength\"\n  [minLength]=\"field()?.validators?.minLength\"\n  [disabled]=\"field()?.isDisable\"\n  [required]=\"field()?.validators?.isRequired\"\n  (input)=\"onTextareaChange($event)\"\n  (blur)=\"onTextareaBlur($event)\"\n  [value]=\"textareaValue\"\n></textarea>\n}\n", styles: ["*{font-family:mulish!important}::ng-deep textarea{width:-webkit-fill-available!important;border:1.5px solid #dddddd!important;border-radius:4px!important;caret-color:#fb0!important;color:#444!important}::ng-deep textarea:focus{outline:none!important;border:1.5px solid #ffbb00!important}::ng-deep textarea:focus-visible{outline:none!important;border:1.5px solid #ffbb00!important}::ng-deep textarea{width:var(--custom-textarea-width, -webkit-fill-available)!important;border-radius:var(--custom-textarea-radius, 4px)!important;caret-color:var(--custom-textarea-caret-color, #ffbb00)!important;color:var(--custom-textarea-font-color, #444444)!important;border-color:var(--custom-textarea-border-color,#dddddd)!important;border-width:var(--custom-textarea-border-width, 1.5px solid)!important}::ng-deep textarea:focus{border-color:var(--custom-textarea-border-color-focus,#dddddd)!important;border-width:var(--custom-textarea-border-width-focus, 1.5px solid)!important}::ng-deep textarea:focus-visible{border-color:var(--custom-textarea-border-color-focus,#dddddd)!important;border-width:var(--custom-textarea-border-width-focus, 1.5px solid)!important}\n"] }]
+                    ], template: "\n<label\n  class=\"field-lable\"\n  *ngIf=\"field() && field()?.isVisible && field().isShowLabel\"\n  >{{ field()?.label\n  }}<span style=\"color: red\" *ngIf=\"field() && field()?.validators?.isRequired\"\n    >*</span\n  ></label\n>\n<div class=\"textarea-wrapper\">\n@if(reactiveFormControlobject()) {\n<textarea\n[ngStyle]=\"{\n    '--custom-textarea-width': field()?.controlStyle?.width ,\n    '--custom-textarea-border-color': field()?.controlStyle?.borderColor ,\n    '--custom-textarea-border-width': field()?.controlStyle?.borderWidth ,\n    '--custom-textarea-border-color-focus': field()?.controlStyle?.focusBorderColor ,\n    '--custom-textarea-border-width-focus': field()?.controlStyle?.focusBorderColor ,\n    '--custom-textarea-radius': field()?.controlStyle?.borderRadius ,\n    '--custom-textarea-caret-color': field()?.controlStyle?.caretColor ,\n    '--custom-textarea-font-color': field()?.controlStyle?.color ,\n    }\"\n*ngIf=\"field() && field()?.isVisible\"\n  cols=\"40\"\n  rows=\"3\"\n  autocomplete=\"off\"\n  [name]=\"field()?.fieldName\"\n  [id]=\"field()?.fieldName\"\n  [placeholder]=\"field()?.placeHolder\"\n  [maxLength]=\"field()?.validators?.maxLength\"\n  [minLength]=\"field()?.validators?.minLength\"\n  [disabled]=\"field()?.isDisable\"\n  [required]=\"field()?.validators?.isRequired\"\n  (input)=\"onTextareaChange($event)\"\n  (blur)=\"onTextareaBlur($event)\"\n  [value]=\"textareaValue\"\n  [formControl]=\"reactiveFormControlobject()\"\n></textarea>\n}@else {\n<textarea\n[ngStyle]=\"{\n    '--custom-textarea-width': field()?.controlStyle?.width ,\n    '--custom-textarea-border-color': field()?.controlStyle?.borderColor ,\n    '--custom-textarea-border-width': field()?.controlStyle?.borderWidth ,\n    '--custom-textarea-border-color-focus': field()?.controlStyle?.focusBorderColor ,\n    '--custom-textarea-border-width-focus': field()?.controlStyle?.focusBorderColor ,\n    '--custom-textarea-radius': field()?.controlStyle?.borderRadius ,\n    '--custom-textarea-caret-color': field()?.controlStyle?.caretColor ,\n    '--custom-textarea-font-color': field()?.controlStyle?.color ,\n    }\"\n*ngIf=\"field() && field()?.isVisible\"\n  cols=\"40\"\n  rows=\"3\"\n  autocomplete=\"off\"\n  [name]=\"field()?.fieldName\"\n  [id]=\"field()?.fieldName\"\n  [placeholder]=\"field()?.placeHolder\"\n  [maxLength]=\"field()?.validators?.maxLength\"\n  [minLength]=\"field()?.validators?.minLength\"\n  [disabled]=\"field()?.isDisable\"\n  [required]=\"field()?.validators?.isRequired\"\n  (input)=\"onTextareaChange($event)\"\n  (blur)=\"onTextareaBlur($event)\"\n  [value]=\"textareaValue\"\n></textarea>\n}\n\n  <span class=\"mx-3 textarea-suffix\">\n    @if(field()?.configData?.isDisabledInputEdit) {\n      @if(field()?.isDisable) {\n        <img *ngIf=\"field()?.imageUrl\" [src]='field().imageUrl' alt=\"\" (click)=\"enableField()\" class=\"edit-icon\" />\n      }\n    }\n  </span>\n</div>\n", styles: [".field-lable{font-size:12px!important;font-weight:700!important;color:#444!important;margin-bottom:5px}*{font-family:mulish!important}::ng-deep textarea{width:-webkit-fill-available!important;border:1.5px solid #dddddd!important;border-radius:4px!important;caret-color:#fb0!important;color:#444!important}::ng-deep textarea:focus{outline:none!important;border:1.5px solid #ffbb00!important}::ng-deep textarea:focus-visible{outline:none!important;border:1.5px solid #ffbb00!important}::ng-deep textarea{width:var(--custom-textarea-width, -webkit-fill-available)!important;border-radius:var(--custom-textarea-radius, 4px)!important;caret-color:var(--custom-textarea-caret-color, #ffbb00)!important;color:var(--custom-textarea-font-color, #444444)!important;border-color:var(--custom-textarea-border-color,#dddddd)!important;border-width:var(--custom-textarea-border-width, 1.5px solid)!important}::ng-deep textarea:focus{border-color:var(--custom-textarea-border-color-focus,#dddddd)!important;border-width:var(--custom-textarea-border-width-focus, 1.5px solid)!important}::ng-deep textarea:focus-visible{border-color:var(--custom-textarea-border-color-focus,#dddddd)!important;border-width:var(--custom-textarea-border-width-focus, 1.5px solid)!important}.textarea-wrapper{position:relative;display:inline-block;width:100%}.textarea-suffix{position:absolute;right:12px;top:12px;display:flex;align-items:center;pointer-events:auto}.edit-icon{cursor:pointer;width:20px;height:20px;opacity:.6;transition:opacity .2s ease}.edit-icon:hover{opacity:1}\n"] }]
         }], ctorParameters: () => [{ type: MasterControlService }], propDecorators: { blur: [{
                 type: Output
             }] } });
@@ -2828,6 +2837,9 @@ class TextboxWithImageComponent {
         // Emit the blur event to parent component
         this.blur.emit(event);
     }
+    enableField() {
+        this.field().isDisable = false;
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TextboxWithImageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: TextboxWithImageComponent, isStandalone: true, selector: "lib-textbox-with-image", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, reactiveFormControlobject: { classPropertyName: "reactiveFormControlobject", publicName: "reactiveFormControlobject", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { blur: "blur" }, providers: [
             {
@@ -2835,7 +2847,7 @@ class TextboxWithImageComponent {
                 useExisting: TextboxWithImageComponent,
                 multi: true
             }
-        ], ngImport: i0, template: "<label class=\"field-lable\" *ngIf=\"field() && field()?.isVisible && field().isShowLabel\"\n  >{{ field()?.label\n  }}<span style=\"color: red\" *ngIf=\"field() && field()?.validators?.isRequired\"\n    >*</span\n  ></label\n>\n<mat-form-field\n  class=\"w-100\"\n  appearance=\"outline\"\n  *ngIf=\"field() && field()?.isVisible\"\n  [ngStyle]=\"{\n'--custom-border-color': field()?.controlStyle?.borderColor ,\n'--custom-border-width': field()?.controlStyle?.borderWidth ,\n'--custom-border-radius': field()?.controlStyle?.borderRadius ,\n'--custom-bg-color': field()?.controlStyle?.background ,\n'--custom-border-color-focus': field()?.controlStyle?.focusBorderColor ,\n'--custom-border-width-focus': field()?.controlStyle?.focusBorderWidth ,\n'--custom-bg-color-focus': field()?.controlStyle?.focusBackground ,\n'--custom-border-color-hover': field()?.controlStyle?.hoverBorderColor ,\n'--custom-border-width-hover': field()?.controlStyle?.hoverBorderWidth ,\n'--custom-border-color-error': field()?.controlStyle?.errorBorderColor ,\n'--custom-border-width-error': field()?.controlStyle?.errorBorderWidth ,\n'--custom-font-size': field()?.controlStyle?.fontSize ,\n'--custom-font-weight': field()?.controlStyle?.fontWeight ,\n'--custom-font-family': field()?.controlStyle?.fontFamily ,\n'--custom-font-color': field()?.controlStyle?.color ,\n'--custom-caret-color': field()?.controlStyle?.caretColor ,\n'--custom-font-color-disabled' : field()?.controlStyle?.disableColor ,\n'--custom-bg-color-disabled' : field()?.controlStyle?.disableBackground ,\n}\"\n>\n@if(reactiveFormControlobject()) {\n<input\n    matInput\n    autocomplete=\"off\"\n    [type]=\"field()?.controlType\"\n    [name]=\"field()?.fieldName\"\n    [id]=\"field()?.fieldName\"\n    [placeholder]=\"field()?.placeHolder\"\n    [maxLength]=\"field()?.validators?.maxLength\"\n    [minLength]=\"field()?.validators?.minLength\"\n    [disabled]=\"field()?.isDisable\"\n    [required]=\"field()?.validators?.isRequired\"\n    [pattern]=\"field()?.validators?.pattern\"\n    (input)=\"onInputChange($event)\"\n    (blur)=\"onInputBlur($event)\"\n    [value]=\"inputValue\"\n    [formControl]=\"reactiveFormControlobject()\"\n  />\n}@else {\n  <input\n    matInput\n    autocomplete=\"off\"\n    [type]=\"field()?.controlType\"\n    [name]=\"field()?.fieldName\"\n    [id]=\"field()?.fieldName\"\n    [placeholder]=\"field()?.placeHolder\"\n    [maxLength]=\"field()?.validators?.maxLength\"\n    [minLength]=\"field()?.validators?.minLength\"\n    [disabled]=\"field()?.isDisable\"\n    [required]=\"field()?.validators?.isRequired\"\n    [pattern]=\"field()?.validators?.pattern\"\n    (input)=\"onInputChange($event)\"\n    (blur)=\"onInputBlur($event)\"\n    [value]=\"inputValue\"\n  />\n}\n\n   <span matSuffix class=\"mx-3\">\n    <img *ngIf=\"field()?.imageUrl\" [src]='field().imageUrl' alt=\"\" />\n    <!-- \"https://cdn.godigit.com/retail-life/location.svg\" -->\n  </span>\n  <mat-error *ngIf=\"false\">\n    {{ field()?.validators?.isRequiredMessage }}\n  </mat-error>\n</mat-form-field>\n<div class=\"error-message\" *ngIf=\"false\">\n  {{ field()?.validators?.isRequiredMessage }}.\n</div>\n<div class=\"error-message\" *ngIf=\"false\">\n  {{ field()?.validators?.patternMessage }}.\n</div>\n", styles: [".field-lable{font-size:12px!important;font-weight:700!important;color:#444!important;margin-bottom:0!important}.error-message{color:red}*{font-family:mulish!important}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mat-mdc-notch-piece{border-color:var(--custom-border-color-focus, #ffbb00)!important;border-width:var(--custom-border-width-focus, 1.5px)!important}::ng-deep .mat-mdc-form-field{background-color:var(--custom-bg-color, #ffffff)!important;border-radius:var(--custom-border-radius , 4px)!important}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__leading{border-color:var(--custom-border-color-hover, #ffbb00)!important;border-width:var(--custom-border-width-hover, 1.5px)!important}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__notch{border-color:var(--custom-border-color-hover, #ffbb00)!important;border-width:var(--custom-border-width-hover, 1.5px)!important}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__trailing{border-color:var(--custom-border-color-hover, #ffbb00)!important;border-width:var(--custom-border-width-hover, 1.5px)!important}::ng-deep .mdc-text-field--outlined .mat-mdc-notch-piece{border-color:var(--custom-border-color, #dddddd)!important;border-width:var(--custom-border-width, 1.5px)!important}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-text-field__input{caret-color:var(--custom-caret-color, #ffbb00)!important;font-size:12px!important;font-weight:var(--custom-font-weight, 400)!important;font-family:var(--custom-font-family, \"Mulish\")!important;color:var(--custom-font-color, #444444)!important}::ng-deep .mat-form-field-invalid .mdc-text-field--outlined .mat-mdc-notch-piece{border-color:var(--custom-border-color-error, red)!important;border-width:var(--custom-border-width-error, 1.5px)!important}::ng-deep .mat-mdc-form-field.mat-form-field-disabled{background:var(--custom-bg-color-disabled, #ECECEC)!important}::ng-deep .mdc-text-field--outlined.mdc-text-field--disabled .mdc-text-field__input{color:var(--custom-font-color-disabled, #999999)!important}::ng-deep .mdc-label{color:var(--custom-font-color, #444)!important;font-size:var(--custom-font-size, 16px)!important;font-weight:var(--custom-font-weight, 400)!important;font-family:var(--custom-font-family, \"Mulish\")!important}::placeholder{color:#8f8f8f!important;font-size:12px!important}::ng-deep .mat-mdc-form-field-hint-wrapper{padding:0!important}::ng-deep .mat-mdc-form-field-error-wrapper{padding:0!important}::ng-deep .mat-mdc-form-field-error{color:#e00!important;font-size:12px;font-weight:500;font-family:Mulish!important;letter-spacing:0}::ng-deep .mdc-text-field--outlined{--mdc-outlined-text-field-container-shape: var(--custom-border-radius , 4px) !important}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--invalid .mat-mdc-notch-piece{border-color:var(--custom-border-color-error, red)!important;border-width:var(--custom-border-width-error, 1.5px)!important}::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none!important}\n"], dependencies: [{ kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
+        ], ngImport: i0, template: "<label class=\"field-lable\" *ngIf=\"field() && field()?.isVisible && field().isShowLabel\"\n  >{{ field()?.label\n  }}<span style=\"color: red\" *ngIf=\"field() && field()?.validators?.isRequired\"\n    >*</span\n  ></label\n>\n<mat-form-field\n  class=\"w-100\"\n  appearance=\"outline\"\n  *ngIf=\"field() && field()?.isVisible\"\n  [ngStyle]=\"{\n'--custom-border-color': field()?.controlStyle?.borderColor ,\n'--custom-border-width': field()?.controlStyle?.borderWidth ,\n'--custom-border-radius': field()?.controlStyle?.borderRadius ,\n'--custom-bg-color': field()?.controlStyle?.background ,\n'--custom-border-color-focus': field()?.controlStyle?.focusBorderColor ,\n'--custom-border-width-focus': field()?.controlStyle?.focusBorderWidth ,\n'--custom-bg-color-focus': field()?.controlStyle?.focusBackground ,\n'--custom-border-color-hover': field()?.controlStyle?.hoverBorderColor ,\n'--custom-border-width-hover': field()?.controlStyle?.hoverBorderWidth ,\n'--custom-border-color-error': field()?.controlStyle?.errorBorderColor ,\n'--custom-border-width-error': field()?.controlStyle?.errorBorderWidth ,\n'--custom-font-size': field()?.controlStyle?.fontSize ,\n'--custom-font-weight': field()?.controlStyle?.fontWeight ,\n'--custom-font-family': field()?.controlStyle?.fontFamily ,\n'--custom-font-color': field()?.controlStyle?.color ,\n'--custom-caret-color': field()?.controlStyle?.caretColor ,\n'--custom-font-color-disabled' : field()?.controlStyle?.disableColor ,\n'--custom-bg-color-disabled' : field()?.controlStyle?.disableBackground ,\n}\"\n>\n@if(reactiveFormControlobject()) {\n<input\n    matInput\n    autocomplete=\"off\"\n    [type]=\"field()?.controlType\"\n    [name]=\"field()?.fieldName\"\n    [id]=\"field()?.fieldName\"\n    [placeholder]=\"field()?.placeHolder\"\n    [maxLength]=\"field()?.validators?.maxLength\"\n    [minLength]=\"field()?.validators?.minLength\"\n    [disabled]=\"field()?.isDisable\"\n    [required]=\"field()?.validators?.isRequired\"\n    [pattern]=\"field()?.validators?.pattern\"\n    (input)=\"onInputChange($event)\"\n    (blur)=\"onInputBlur($event)\"\n    [value]=\"inputValue\"\n    [formControl]=\"reactiveFormControlobject()\"\n  />\n}@else {\n  <input\n    matInput\n    autocomplete=\"off\"\n    [type]=\"field()?.controlType\"\n    [name]=\"field()?.fieldName\"\n    [id]=\"field()?.fieldName\"\n    [placeholder]=\"field()?.placeHolder\"\n    [maxLength]=\"field()?.validators?.maxLength\"\n    [minLength]=\"field()?.validators?.minLength\"\n    [disabled]=\"field()?.isDisable\"\n    [required]=\"field()?.validators?.isRequired\"\n    [pattern]=\"field()?.validators?.pattern\"\n    (input)=\"onInputChange($event)\"\n    (blur)=\"onInputBlur($event)\"\n    [value]=\"inputValue\"\n  />\n}\n\n   <span matSuffix class=\"mx-3\">\n    @if(field()?.configData?.isDisabledInputEdit) {\n      @if(field()?.isDisable) {\n        <img style=\"cursor:pointer\" *ngIf=\"field()?.imageUrl\" [src]='field().imageUrl' alt=\"\" (click)=\"enableField()\" />\n      }\n    } @else {\n      <img *ngIf=\"field()?.imageUrl\" [src]='field().imageUrl' alt=\"\" />\n    }\n    <!-- \"https://cdn.godigit.com/retail-life/location.svg\" -->\n  </span>\n  <mat-error *ngIf=\"false\">\n    {{ field()?.validators?.isRequiredMessage }}\n  </mat-error>\n</mat-form-field>\n<div class=\"error-message\" *ngIf=\"false\">\n  {{ field()?.validators?.isRequiredMessage }}.\n</div>\n<div class=\"error-message\" *ngIf=\"false\">\n  {{ field()?.validators?.patternMessage }}.\n</div>\n", styles: [".field-lable{font-size:12px!important;font-weight:700!important;color:#444!important;margin-bottom:0!important}.error-message{color:red}*{font-family:mulish!important}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mat-mdc-notch-piece{border-color:var(--custom-border-color-focus, #ffbb00)!important;border-width:var(--custom-border-width-focus, 1.5px)!important}::ng-deep .mat-mdc-form-field{background-color:var(--custom-bg-color, #ffffff)!important;border-radius:var(--custom-border-radius , 4px)!important}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__leading{border-color:var(--custom-border-color-hover, #ffbb00)!important;border-width:var(--custom-border-width-hover, 1.5px)!important}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__notch{border-color:var(--custom-border-color-hover, #ffbb00)!important;border-width:var(--custom-border-width-hover, 1.5px)!important}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__trailing{border-color:var(--custom-border-color-hover, #ffbb00)!important;border-width:var(--custom-border-width-hover, 1.5px)!important}::ng-deep .mdc-text-field--outlined .mat-mdc-notch-piece{border-color:var(--custom-border-color, #dddddd)!important;border-width:var(--custom-border-width, 1.5px)!important}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-text-field__input{caret-color:var(--custom-caret-color, #ffbb00)!important;font-size:12px!important;font-weight:var(--custom-font-weight, 400)!important;font-family:var(--custom-font-family, \"Mulish\")!important;color:var(--custom-font-color, #444444)!important}::ng-deep .mat-form-field-invalid .mdc-text-field--outlined .mat-mdc-notch-piece{border-color:var(--custom-border-color-error, red)!important;border-width:var(--custom-border-width-error, 1.5px)!important}::ng-deep .mat-mdc-form-field.mat-form-field-disabled{background:var(--custom-bg-color-disabled, #ECECEC)!important}::ng-deep .mdc-text-field--outlined.mdc-text-field--disabled .mdc-text-field__input{color:var(--custom-font-color-disabled, #999999)!important}::ng-deep .mdc-label{color:var(--custom-font-color, #444)!important;font-size:var(--custom-font-size, 16px)!important;font-weight:var(--custom-font-weight, 400)!important;font-family:var(--custom-font-family, \"Mulish\")!important}::placeholder{color:#8f8f8f!important;font-size:12px!important}::ng-deep .mat-mdc-form-field-hint-wrapper{padding:0!important}::ng-deep .mat-mdc-form-field-error-wrapper{padding:0!important}::ng-deep .mat-mdc-form-field-error{color:#e00!important;font-size:12px;font-weight:500;font-family:Mulish!important;letter-spacing:0}::ng-deep .mdc-text-field--outlined{--mdc-outlined-text-field-container-shape: var(--custom-border-radius , 4px) !important}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--invalid .mat-mdc-notch-piece{border-color:var(--custom-border-color-error, red)!important;border-width:var(--custom-border-width-error, 1.5px)!important}::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none!important}\n"], dependencies: [{ kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TextboxWithImageComponent, decorators: [{
             type: Component,
@@ -2845,7 +2857,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                             useExisting: TextboxWithImageComponent,
                             multi: true
                         }
-                    ], template: "<label class=\"field-lable\" *ngIf=\"field() && field()?.isVisible && field().isShowLabel\"\n  >{{ field()?.label\n  }}<span style=\"color: red\" *ngIf=\"field() && field()?.validators?.isRequired\"\n    >*</span\n  ></label\n>\n<mat-form-field\n  class=\"w-100\"\n  appearance=\"outline\"\n  *ngIf=\"field() && field()?.isVisible\"\n  [ngStyle]=\"{\n'--custom-border-color': field()?.controlStyle?.borderColor ,\n'--custom-border-width': field()?.controlStyle?.borderWidth ,\n'--custom-border-radius': field()?.controlStyle?.borderRadius ,\n'--custom-bg-color': field()?.controlStyle?.background ,\n'--custom-border-color-focus': field()?.controlStyle?.focusBorderColor ,\n'--custom-border-width-focus': field()?.controlStyle?.focusBorderWidth ,\n'--custom-bg-color-focus': field()?.controlStyle?.focusBackground ,\n'--custom-border-color-hover': field()?.controlStyle?.hoverBorderColor ,\n'--custom-border-width-hover': field()?.controlStyle?.hoverBorderWidth ,\n'--custom-border-color-error': field()?.controlStyle?.errorBorderColor ,\n'--custom-border-width-error': field()?.controlStyle?.errorBorderWidth ,\n'--custom-font-size': field()?.controlStyle?.fontSize ,\n'--custom-font-weight': field()?.controlStyle?.fontWeight ,\n'--custom-font-family': field()?.controlStyle?.fontFamily ,\n'--custom-font-color': field()?.controlStyle?.color ,\n'--custom-caret-color': field()?.controlStyle?.caretColor ,\n'--custom-font-color-disabled' : field()?.controlStyle?.disableColor ,\n'--custom-bg-color-disabled' : field()?.controlStyle?.disableBackground ,\n}\"\n>\n@if(reactiveFormControlobject()) {\n<input\n    matInput\n    autocomplete=\"off\"\n    [type]=\"field()?.controlType\"\n    [name]=\"field()?.fieldName\"\n    [id]=\"field()?.fieldName\"\n    [placeholder]=\"field()?.placeHolder\"\n    [maxLength]=\"field()?.validators?.maxLength\"\n    [minLength]=\"field()?.validators?.minLength\"\n    [disabled]=\"field()?.isDisable\"\n    [required]=\"field()?.validators?.isRequired\"\n    [pattern]=\"field()?.validators?.pattern\"\n    (input)=\"onInputChange($event)\"\n    (blur)=\"onInputBlur($event)\"\n    [value]=\"inputValue\"\n    [formControl]=\"reactiveFormControlobject()\"\n  />\n}@else {\n  <input\n    matInput\n    autocomplete=\"off\"\n    [type]=\"field()?.controlType\"\n    [name]=\"field()?.fieldName\"\n    [id]=\"field()?.fieldName\"\n    [placeholder]=\"field()?.placeHolder\"\n    [maxLength]=\"field()?.validators?.maxLength\"\n    [minLength]=\"field()?.validators?.minLength\"\n    [disabled]=\"field()?.isDisable\"\n    [required]=\"field()?.validators?.isRequired\"\n    [pattern]=\"field()?.validators?.pattern\"\n    (input)=\"onInputChange($event)\"\n    (blur)=\"onInputBlur($event)\"\n    [value]=\"inputValue\"\n  />\n}\n\n   <span matSuffix class=\"mx-3\">\n    <img *ngIf=\"field()?.imageUrl\" [src]='field().imageUrl' alt=\"\" />\n    <!-- \"https://cdn.godigit.com/retail-life/location.svg\" -->\n  </span>\n  <mat-error *ngIf=\"false\">\n    {{ field()?.validators?.isRequiredMessage }}\n  </mat-error>\n</mat-form-field>\n<div class=\"error-message\" *ngIf=\"false\">\n  {{ field()?.validators?.isRequiredMessage }}.\n</div>\n<div class=\"error-message\" *ngIf=\"false\">\n  {{ field()?.validators?.patternMessage }}.\n</div>\n", styles: [".field-lable{font-size:12px!important;font-weight:700!important;color:#444!important;margin-bottom:0!important}.error-message{color:red}*{font-family:mulish!important}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mat-mdc-notch-piece{border-color:var(--custom-border-color-focus, #ffbb00)!important;border-width:var(--custom-border-width-focus, 1.5px)!important}::ng-deep .mat-mdc-form-field{background-color:var(--custom-bg-color, #ffffff)!important;border-radius:var(--custom-border-radius , 4px)!important}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__leading{border-color:var(--custom-border-color-hover, #ffbb00)!important;border-width:var(--custom-border-width-hover, 1.5px)!important}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__notch{border-color:var(--custom-border-color-hover, #ffbb00)!important;border-width:var(--custom-border-width-hover, 1.5px)!important}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__trailing{border-color:var(--custom-border-color-hover, #ffbb00)!important;border-width:var(--custom-border-width-hover, 1.5px)!important}::ng-deep .mdc-text-field--outlined .mat-mdc-notch-piece{border-color:var(--custom-border-color, #dddddd)!important;border-width:var(--custom-border-width, 1.5px)!important}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-text-field__input{caret-color:var(--custom-caret-color, #ffbb00)!important;font-size:12px!important;font-weight:var(--custom-font-weight, 400)!important;font-family:var(--custom-font-family, \"Mulish\")!important;color:var(--custom-font-color, #444444)!important}::ng-deep .mat-form-field-invalid .mdc-text-field--outlined .mat-mdc-notch-piece{border-color:var(--custom-border-color-error, red)!important;border-width:var(--custom-border-width-error, 1.5px)!important}::ng-deep .mat-mdc-form-field.mat-form-field-disabled{background:var(--custom-bg-color-disabled, #ECECEC)!important}::ng-deep .mdc-text-field--outlined.mdc-text-field--disabled .mdc-text-field__input{color:var(--custom-font-color-disabled, #999999)!important}::ng-deep .mdc-label{color:var(--custom-font-color, #444)!important;font-size:var(--custom-font-size, 16px)!important;font-weight:var(--custom-font-weight, 400)!important;font-family:var(--custom-font-family, \"Mulish\")!important}::placeholder{color:#8f8f8f!important;font-size:12px!important}::ng-deep .mat-mdc-form-field-hint-wrapper{padding:0!important}::ng-deep .mat-mdc-form-field-error-wrapper{padding:0!important}::ng-deep .mat-mdc-form-field-error{color:#e00!important;font-size:12px;font-weight:500;font-family:Mulish!important;letter-spacing:0}::ng-deep .mdc-text-field--outlined{--mdc-outlined-text-field-container-shape: var(--custom-border-radius , 4px) !important}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--invalid .mat-mdc-notch-piece{border-color:var(--custom-border-color-error, red)!important;border-width:var(--custom-border-width-error, 1.5px)!important}::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none!important}\n"] }]
+                    ], template: "<label class=\"field-lable\" *ngIf=\"field() && field()?.isVisible && field().isShowLabel\"\n  >{{ field()?.label\n  }}<span style=\"color: red\" *ngIf=\"field() && field()?.validators?.isRequired\"\n    >*</span\n  ></label\n>\n<mat-form-field\n  class=\"w-100\"\n  appearance=\"outline\"\n  *ngIf=\"field() && field()?.isVisible\"\n  [ngStyle]=\"{\n'--custom-border-color': field()?.controlStyle?.borderColor ,\n'--custom-border-width': field()?.controlStyle?.borderWidth ,\n'--custom-border-radius': field()?.controlStyle?.borderRadius ,\n'--custom-bg-color': field()?.controlStyle?.background ,\n'--custom-border-color-focus': field()?.controlStyle?.focusBorderColor ,\n'--custom-border-width-focus': field()?.controlStyle?.focusBorderWidth ,\n'--custom-bg-color-focus': field()?.controlStyle?.focusBackground ,\n'--custom-border-color-hover': field()?.controlStyle?.hoverBorderColor ,\n'--custom-border-width-hover': field()?.controlStyle?.hoverBorderWidth ,\n'--custom-border-color-error': field()?.controlStyle?.errorBorderColor ,\n'--custom-border-width-error': field()?.controlStyle?.errorBorderWidth ,\n'--custom-font-size': field()?.controlStyle?.fontSize ,\n'--custom-font-weight': field()?.controlStyle?.fontWeight ,\n'--custom-font-family': field()?.controlStyle?.fontFamily ,\n'--custom-font-color': field()?.controlStyle?.color ,\n'--custom-caret-color': field()?.controlStyle?.caretColor ,\n'--custom-font-color-disabled' : field()?.controlStyle?.disableColor ,\n'--custom-bg-color-disabled' : field()?.controlStyle?.disableBackground ,\n}\"\n>\n@if(reactiveFormControlobject()) {\n<input\n    matInput\n    autocomplete=\"off\"\n    [type]=\"field()?.controlType\"\n    [name]=\"field()?.fieldName\"\n    [id]=\"field()?.fieldName\"\n    [placeholder]=\"field()?.placeHolder\"\n    [maxLength]=\"field()?.validators?.maxLength\"\n    [minLength]=\"field()?.validators?.minLength\"\n    [disabled]=\"field()?.isDisable\"\n    [required]=\"field()?.validators?.isRequired\"\n    [pattern]=\"field()?.validators?.pattern\"\n    (input)=\"onInputChange($event)\"\n    (blur)=\"onInputBlur($event)\"\n    [value]=\"inputValue\"\n    [formControl]=\"reactiveFormControlobject()\"\n  />\n}@else {\n  <input\n    matInput\n    autocomplete=\"off\"\n    [type]=\"field()?.controlType\"\n    [name]=\"field()?.fieldName\"\n    [id]=\"field()?.fieldName\"\n    [placeholder]=\"field()?.placeHolder\"\n    [maxLength]=\"field()?.validators?.maxLength\"\n    [minLength]=\"field()?.validators?.minLength\"\n    [disabled]=\"field()?.isDisable\"\n    [required]=\"field()?.validators?.isRequired\"\n    [pattern]=\"field()?.validators?.pattern\"\n    (input)=\"onInputChange($event)\"\n    (blur)=\"onInputBlur($event)\"\n    [value]=\"inputValue\"\n  />\n}\n\n   <span matSuffix class=\"mx-3\">\n    @if(field()?.configData?.isDisabledInputEdit) {\n      @if(field()?.isDisable) {\n        <img style=\"cursor:pointer\" *ngIf=\"field()?.imageUrl\" [src]='field().imageUrl' alt=\"\" (click)=\"enableField()\" />\n      }\n    } @else {\n      <img *ngIf=\"field()?.imageUrl\" [src]='field().imageUrl' alt=\"\" />\n    }\n    <!-- \"https://cdn.godigit.com/retail-life/location.svg\" -->\n  </span>\n  <mat-error *ngIf=\"false\">\n    {{ field()?.validators?.isRequiredMessage }}\n  </mat-error>\n</mat-form-field>\n<div class=\"error-message\" *ngIf=\"false\">\n  {{ field()?.validators?.isRequiredMessage }}.\n</div>\n<div class=\"error-message\" *ngIf=\"false\">\n  {{ field()?.validators?.patternMessage }}.\n</div>\n", styles: [".field-lable{font-size:12px!important;font-weight:700!important;color:#444!important;margin-bottom:0!important}.error-message{color:red}*{font-family:mulish!important}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mat-mdc-notch-piece{border-color:var(--custom-border-color-focus, #ffbb00)!important;border-width:var(--custom-border-width-focus, 1.5px)!important}::ng-deep .mat-mdc-form-field{background-color:var(--custom-bg-color, #ffffff)!important;border-radius:var(--custom-border-radius , 4px)!important}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__leading{border-color:var(--custom-border-color-hover, #ffbb00)!important;border-width:var(--custom-border-width-hover, 1.5px)!important}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__notch{border-color:var(--custom-border-color-hover, #ffbb00)!important;border-width:var(--custom-border-width-hover, 1.5px)!important}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__trailing{border-color:var(--custom-border-color-hover, #ffbb00)!important;border-width:var(--custom-border-width-hover, 1.5px)!important}::ng-deep .mdc-text-field--outlined .mat-mdc-notch-piece{border-color:var(--custom-border-color, #dddddd)!important;border-width:var(--custom-border-width, 1.5px)!important}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-text-field__input{caret-color:var(--custom-caret-color, #ffbb00)!important;font-size:12px!important;font-weight:var(--custom-font-weight, 400)!important;font-family:var(--custom-font-family, \"Mulish\")!important;color:var(--custom-font-color, #444444)!important}::ng-deep .mat-form-field-invalid .mdc-text-field--outlined .mat-mdc-notch-piece{border-color:var(--custom-border-color-error, red)!important;border-width:var(--custom-border-width-error, 1.5px)!important}::ng-deep .mat-mdc-form-field.mat-form-field-disabled{background:var(--custom-bg-color-disabled, #ECECEC)!important}::ng-deep .mdc-text-field--outlined.mdc-text-field--disabled .mdc-text-field__input{color:var(--custom-font-color-disabled, #999999)!important}::ng-deep .mdc-label{color:var(--custom-font-color, #444)!important;font-size:var(--custom-font-size, 16px)!important;font-weight:var(--custom-font-weight, 400)!important;font-family:var(--custom-font-family, \"Mulish\")!important}::placeholder{color:#8f8f8f!important;font-size:12px!important}::ng-deep .mat-mdc-form-field-hint-wrapper{padding:0!important}::ng-deep .mat-mdc-form-field-error-wrapper{padding:0!important}::ng-deep .mat-mdc-form-field-error{color:#e00!important;font-size:12px;font-weight:500;font-family:Mulish!important;letter-spacing:0}::ng-deep .mdc-text-field--outlined{--mdc-outlined-text-field-container-shape: var(--custom-border-radius , 4px) !important}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--invalid .mat-mdc-notch-piece{border-color:var(--custom-border-color-error, red)!important;border-width:var(--custom-border-width-error, 1.5px)!important}::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none!important}\n"] }]
         }], propDecorators: { blur: [{
                 type: Output
             }] } });