master-control 0.2.14 → 0.2.15

package/src/lib/textbox-with-underscore/textbox-with-underscore.component.html

@@ -1,79 +0,0 @@
-<label
-  class="field-lable"
-  *ngIf="field() && field()?.isVisible && field().isShowLabel"
-  >{{ field()?.label
-  }}<span style="color: red" *ngIf="field() && field()?.validators?.isRequired"
-    >*</span
-  ></label
->
-<mat-form-field
-  class="w-100 hyphen-input"
-  appearance="outline"
-  [ngStyle]="{
-'--custom-border-color': field()?.controlStyle?.borderColor ,
-'--custom-border-width': field()?.controlStyle?.borderWidth ,
-'--custom-border-radius': field()?.controlStyle?.borderRadius ,
-'--custom-bg-color': field()?.controlStyle?.background ,
-'--custom-border-color-focus': field()?.controlStyle?.focusBorderColor ,
-'--custom-border-width-focus': field()?.controlStyle?.focusBorderWidth ,
-'--custom-bg-color-focus': field()?.controlStyle?.focusBackground ,
-'--custom-border-color-hover': field()?.controlStyle?.hoverBorderColor ,
-'--custom-border-width-hover': field()?.controlStyle?.hoverBorderWidth ,
-'--custom-border-color-error': field()?.controlStyle?.errorBorderColor ,
-'--custom-border-width-error': field()?.controlStyle?.errorBorderWidth ,
-'--custom-font-size': field()?.controlStyle?.fontSize ,
-'--custom-font-weight': field()?.controlStyle?.fontWeight ,
-'--custom-font-family': field()?.controlStyle?.fontFamily ,
-'--custom-font-color': field()?.controlStyle?.color ,
-'--custom-caret-color': field()?.controlStyle?.caretColor ,
-'--custom-font-color-disabled' : field()?.controlStyle?.disableColor ,
-'--custom-bg-color-disabled' : field()?.controlStyle?.disableBackground ,
-}"
->
-  @if(reactiveFormControlobject()) {
-  <input
-    matInput
-    autocomplete="none"
-    [type]="field()?.controlType"
-    [name]="field()?.fieldName"
-    [id]="field()?.fieldName"
-    [minLength]="field()?.validators?.minLength"
-    [disabled]="field()?.isDisable"
-    [required]="field()?.validators?.isRequired"
-    [pattern]="field()?.validators?.pattern"
-    (input)="onInputChange($event)"
-    (blur)="onInputBlur()"
-    [value]="inputValue"
-    [placeholder]="getUnderscorePlaceholder()"
-    (keyup)="changeFormat($event)"
-    [formControl]="reactiveFormControlobject()"
-  />
-  }@else {
-  <input
-    matInput
-    autocomplete="none"
-    [type]="field()?.controlType"
-    [name]="field()?.fieldName"
-    [id]="field()?.fieldName"
-    [minLength]="field()?.validators?.minLength"
-    [disabled]="field()?.isDisable"
-    [required]="field()?.validators?.isRequired"
-    [pattern]="field()?.validators?.pattern"
-    (input)="onInputChange($event)"
-    (blur)="onInputBlur()"
-    [value]="inputValue"
-    [placeholder]="getUnderscorePlaceholder()"
-    (keyup)="changeFormat($event)"
-  />
-  }
-
-  <mat-error *ngIf="false">
-    {{ field()?.validators?.isRequiredMessage }}
-  </mat-error>
-</mat-form-field>
-<div class="error-message" *ngIf="false">
-  {{ field()?.validators?.isRequiredMessage }}.
-</div>
-<div class="error-message" *ngIf="false">
-  {{ field()?.validators?.patternMessage }}.
-</div>

package/src/lib/textbox-with-underscore/textbox-with-underscore.component.ts

@@ -1,62 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { Component, input } from '@angular/core';
-import { NG_VALUE_ACCESSOR, ReactiveFormsModule } from '@angular/forms';
-import { MatFormFieldModule } from '@angular/material/form-field';
-import { MatInputModule } from '@angular/material/input';
-
-@Component({
-  selector: 'lib-textbox-with-underscore',
-  standalone: true,
-  imports: [CommonModule, MatInputModule, MatFormFieldModule, ReactiveFormsModule],
-  templateUrl: './textbox-with-underscore.component.html',
-  styleUrl: './textbox-with-underscore.component.css',
-  providers: [
-      {
-        provide: NG_VALUE_ACCESSOR,
-        useExisting: TextboxWithUnderscoreComponent,
-        multi: true
-      }
-    ]
-})
-export class TextboxWithUnderscoreComponent {
-  field: any = input.required<any>();
-   inputValue: any = null;
-   reactiveFormControlobject : any = input<any>();
-  _onChange: any = (inputValue:any) => {};
-  _unTouched: any = () => {};
-
-  writeValue(obj: any): void{
-    this.inputValue=obj;
-  };
-  registerOnChange(fn: any): void{
-    this._onChange = fn;
-  };
-  registerOnTouched(fn: any): void{
-    this._unTouched = fn;
-  };
-  setDisabledState?(isDisabled: boolean): void{};
-
-  onInputChange(event: any): void {
-    this.inputValue = event.target.value;
-    this._onChange(this.inputValue);
-  }
-
-  onInputBlur(): void {
-    this._unTouched();
-  }
-
-  changeFormat(event: any) {
-    let digits = event.target.value.replace(/[^0-9]/g, '').slice(0, this.field().validators.maxLength);
-    let padded = digits.padEnd(this.field().validators.maxLength, '_');
-    event.target.value = padded;
-
-    setTimeout(() => {
-      let pos = digits.length;
-      if (pos > this.field().validators.maxLength) pos = this.field().validators.maxLength;
-      event.target.setSelectionRange(pos, pos);
-    });
-  }
-  getUnderscorePlaceholder() {
-    return '_'.repeat(this.field().validators.maxLength);
-  }
-}

package/src/lib/toggle/toggle.component.css

@@ -1,101 +0,0 @@
-* {
-  font-family: "mulish" !important;
-}
-::ng-deep .toggle-background {
-  background-color: var(--custom-toggle-bg-color , #f5f5f5) !important;
-  padding: 2px 8px;
-  /* border-radius: 8px;
-  border-color: transparent !important; */
-  width: var(--custom-toggle-width , 100%) !important;;
-  box-shadow: none;
-}
-
-::ng-deep .toggle-background {
-  border-color: var(--custom-toggle-border-color , transparent) !important;
-  border-radius: var(--custom-toggle-border-radius , 4px) !important;
-  border-width:  var(--custom-toggle-border-width , 1px) !important;
-}
-::ng-deep .toggle_switch {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  font-size: 17px;
-  font-weight: 400;
-  font-family: "Mulish";
-  color: #444444;
-}
-
-::ng-deep .switch {
-  position: relative;
-  display: inline-block;
-  width: 34px;
-  height: 18px;
-}
-::ng-deep .switch input {
-  opacity: 0;
-  width: 0;
-  height: 0;
-}
-::ng-deep .slider {
-  position: absolute;
-  cursor: pointer;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-color: #dddddd;
-  -webkit-transition: 0.4s;
-  transition: 0.4s;
-}
-
-::ng-deep .slider:before {
-  position: absolute;
-  content: "";
-  height: 11px;
-  width: 11px;
-  left: 4px;
-  bottom: 4px;
-  background-color: #ffffff;
-  -webkit-transition: 0.4s;
-  transition: 0.4s;
-}
-
-::ng-deep .slider.round {
-  border-radius: 34px;
-}
-
-::ng-deep input:checked + .slider {
-  background-color: #ffbb00;
-}
-
-::ng-deep input:checked + .slider:before {
-  -webkit-transform: translateX(16px);
-  -ms-transform: translateX(16px);
-  transform: translateX(16px);
-}
-::ng-deep .slider.round:before {
-  border-radius: 50%;
-}
-::ng-deep .remove-border {
-  border: none !important;
-  outline: none !important;
-  box-shadow: none !important;
-}
-::ng-deep .remove-border:focus-visible {
-  border: none !important;
-  outline: none !important;
-  box-shadow: none !important;
-}
-::ng-deep .mdc-checkbox__native-control:enabled:checked~.mdc-checkbox__background, .mdc-checkbox__native-control:enabled:indeterminate~.mdc-checkbox__background {
-  border-color: #ffbb00 !important;
-  background-color: #ffbb00 !important;
-  border-radius: 4px !important;
-}
-
-::ng-deep .mdc-checkbox__checkmark {
-  color: #ffffff !important;
-}
-
-::ng-deep .mdc-checkbox__background {
-  border: 1px solid #dadada !important;
-}

package/src/lib/toggle/toggle.component.html

@@ -1,39 +0,0 @@
-<div class="" *ngIf="field() && field()?.isVisible && field().isShowLabel" [ngStyle]="{
-  '--custom-toggle-bg-color': field()?.controlStyle?.background,
-  '--custom-toggle-border-color': field()?.controlStyle?.borderColor ,
-  '--custom-toggle-border-width': field()?.controlStyle?.borderWidth ,
-  '--custom-toggle-border-radius': field()?.controlStyle?.borderRadius,
-  '--custom-toggle-width': field()?.controlStyle?.width,
-  }"
-  [ngClass]="field()?.cssClass ? 'card toggle-background mt-2' + field()?.cssClass : 'card toggle-background mt-2'"
-  >
-    <div class="toggle_switch mt-2">
-      <div *ngIf="field().configData?.leftLabel" [ngStyle]="{
-        '--custom-toggle-font-size': field()?.controlStyle?.fontSize ,
-        '--custom-toggle-font-weight': field()?.controlStyle?.fontWeight ,
-        '--custom-toggle-font-family': field()?.controlStyle?.fontFamily ,
-        '--custom-toggle-font-color': field()?.controlStyle?.color ,
-        }" class="toggle-text">
-        <p>{{field().configData?.leftLabel}}</p>
-      </div>
-      <div class="mb-1">
-        <label class="switch">
-          <input
-            type="checkbox"
-            [name]="field()?.fieldName"
-            [id]="field()?.fieldName"
-            [disabled]="field()?.isDisable"
-          />
-          <span class="slider round"></span>
-        </label>
-      </div>
-      <div [ngStyle]="{
-        '--custom-toggle-font-size': field()?.controlStyle?.fontSize ,
-        '--custom-toggle-font-weight': field()?.controlStyle?.fontWeight ,
-        '--custom-toggle-font-family': field()?.controlStyle?.fontFamily ,
-        '--custom-toggle-font-color': field()?.controlStyle?.color ,
-        }" class="toggle-text">
-        <p>{{field()?.label}}</p>
-      </div>
-    </div>
-  </div>

package/src/lib/toggle/toggle.component.ts

@@ -1,16 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { Component, input } from '@angular/core';
-import { MasterControlService } from '../master-control.service';
-import { ReactiveFormsModule } from '@angular/forms';
-
-@Component({
-  selector: 'lib-toggle',
-  standalone: true,
-  imports: [CommonModule, ReactiveFormsModule],
-  templateUrl: './toggle.component.html',
-  styleUrl: './toggle.component.css'
-})
-export class ToggleComponent {
-  constructor(public masterService : MasterControlService){}
-  field : any = input.required<any>();
-}

package/src/lib/toggle-button/toggle-button.component.css

@@ -1,87 +0,0 @@
-:host ::ng-deep
-  .mat-button-toggle-group-appearance-standard
-  .mat-button-toggle-appearance-standard
-  + .mat-button-toggle-appearance-standard {
-  border: none;
-}
-:host ::ng-deep .mat-button-toggle-standalone,
-.mat-button-toggle-group {
-  border-radius: 50px;
-}
-:host ::ng-deep
-  .mat-button-toggle-appearance-standard
-  .mat-button-toggle-label-content {
-  height: 32px !important;
-  transform: translate(0px, -5px);
-  font-size: 12px;
-  font-weight: 400;
-  color: #444;
-  letter-spacing: 1px;
-}
-:host ::ng-deep .mat-button-toggle-checked .mat-button-toggle-button {
-  background: #fff !important;
-  border-radius: 50px !important;
-  box-shadow: 0px 0px 15px 0px #00000014 !important;
-  height: 32px;
-  padding: 0px 24px;
-  border: 1px solid #ffbb00;
-}
-:host ::ng-deep .mat-button-toggle-button {
-  padding: 0px 24px;
-}
-
-:host ::ng-deep .mat-button-toggle-checked .mat-button-toggle-label-content {
-  font-weight: 600 !important;
-  letter-spacing: 1px;
-}
-:host ::ng-deep .mat-button-toggle .mat-pseudo-checkbox {
-  display: none;
-}
-:host ::ng-deep .mat-button-toggle-standalone.mat-button-toggle-appearance-standard,
-.mat-button-toggle-group-appearance-standard {
-  border: 1px solid #ddd !important;
-  background: #f5f5f5 !important;
-  height: 33px;
-}
-:host ::ng-deep
-  .mat-button-toggle-group-appearance-standard
-  .mat-button-toggle-appearance-standard
-  + .mat-button-toggle-appearance-standard {
-  border: none !important;
-}
-:host ::ng-deep .mat-button-toggle-appearance-standard.mat-button-toggle-checked {
-  background: #f5f5f5 !important;
-  border-radius: 50px;
-}
-.toggle-img {
-  width: 12px;
-}
-:host ::ng-deep .mat-button-toggle-standalone,
-.mat-button-toggle-group {
-  overflow: unset !important;
-}
-.second-box {
-  position: relative;
-  top: -4px;
-}
-.top-green-card {
-  font-size: 10px;
-  font-weight: 800;
-  color: #fff;
-  background: #169f7d;
-  border-top-left-radius: 999px;
-  border-top-right-radius: 999px;
-  position: absolute;
-  right: 3em;
-  padding: 2px 16px 2px 12px;
-  transform: translate(5px, -19px);
-  z-index: 99999;
-  height: 18px;
-}
-.green-card-img {
-  width: 14.86px;
-  margin-bottom: 6px;
-}
-:host ::ng-deep .mat-button-toggle-button{
-  width: var(--toggle-button-width , 100%) !important;
-}

package/src/lib/toggle-button/toggle-button.component.html

@@ -1,34 +0,0 @@
-<div style="position: relative" [ngClass]="field()?.cssClass">
-  <mat-button-toggle-group
-  [ngStyle]="{
-      '--toggle-button-width': field()?.controlStyle?.width ,
-    }"
-    name="fontStyle"
-    class="custom-mat-toggle"
-    aria-label="Font Style"
-    *ngIf="field() && field()?.isVisible && field()?.configData.options"
-  >
-    @for (data of field()?.configData.options; track $index) {
-    <mat-button-toggle [value]="data.value"
-      >{{ data.label }}
-      <img
-        *ngIf="data.imgUrl"
-        [src]="data.imgUrl"
-        alt=""
-        class="toggle-img mx-1"
-      />
-    </mat-button-toggle>
-    <div class="top-green-card" *ngIf="data.toggleTopText">
-      <span class="second-box">
-        <img
-          class="green-card-img"
-          *ngIf="data.topImage"
-          [src]="data.topImage"
-          alt=""
-        />
-        <span>{{ data.toggleTopText }}</span>
-      </span>
-    </div>
-    }
-  </mat-button-toggle-group>
-</div>

package/src/lib/toggle-button/toggle-button.component.ts

@@ -1,14 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { Component, input } from '@angular/core';
-import { MatButtonToggleModule } from '@angular/material/button-toggle';
-
-@Component({
-  selector: 'lib-toggle-button',
-  standalone: true,
-  imports: [MatButtonToggleModule, CommonModule],
-  templateUrl: './toggle-button.component.html',
-  styleUrl: './toggle-button.component.css'
-})
-export class ToggleButtonComponent {
-  field : any = input.required<any>();
-}

package/src/lib/underscore-mob-number/underscore-mob-number.component.css

@@ -1,147 +0,0 @@
-.field-lable{
-  font-size: 10px !important;
-  font-weight: 700 !important;
-  color: #444 !important;
-  margin-bottom: 0px !important;
-}
-
-.mobile-field .mat-mdc-form-field:not(.mat-form-field-disabled) .mat-mdc-floating-label.mdc-floating-label{
-  transform: var(--mat-mdc-form-field-label-transform, translateY(-50%) translateX(calc(1 * (61.625px + var(--mat-mdc-form-field-label-offset-x, 0px))))) !important;
-}
-
-.error-message{
-  color: red;
-}
-
-.hyphen-input{
-  letter-spacing: 5px !important;
-}
-
-.prefix_alternate_mobile {
-  font-size: 12px;
-  font-weight: 400;
-  color: #8F8F8F;
-  padding: 10px 6px 10px 0px;
-  border-right: 1px solid #dddddd;
-  height: 20px;
-  width: auto;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  position: relative;
-  cursor: pointer;
-  transform: translate(-6px, 0px);
-}
-
-.countryCode {
-  gap: 4px;
-}
-
-/* focus css for mat-form-field */
-  ::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 ,  7px) !important;
-}
-
-/* hover css for mat-form-field */
-
-::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;
-  }
-
-/* regular css for mat-form-field */
- ::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;
-}
-
-/* field css for mat-form-input-field */
-::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: var(--custom-font-size, 16px) !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;
-}
-/* Error state for mat-form-field */
-::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: 0px !important;
- }
-::ng-deep .mat-mdc-form-field-error-wrapper{
-  padding: 0px !important;
- }
- ::ng-deep .mat-mdc-form-field-error{
-  color: #EE0000 !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 ,  7px) !important;
-}
-::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--invalid .mat-mdc-notch-piece {
-    border-color:  var(--custom-border-color-error, red) !important;
-    border-width: var(--custom-border-width-error, 1.5px) !important;
-}
-
-::ng-deep .mat-mdc-form-field-subscript-wrapper {
-  display: none !important;
-}
-
-* {
-  font-family: "mulish" !important;
-}

package/src/lib/underscore-mob-number/underscore-mob-number.component.html

@@ -1,87 +0,0 @@
-<label
-  class="field-lable"
-  *ngIf="field() && field()?.isVisible && field().isShowLabel"
-  >{{ field()?.label
-  }}<span style="color: red" *ngIf="field() && field()?.validators?.isRequired"
-    >*</span
-  ></label
->
-<mat-form-field
-  class="w-100 mobile-field hyphen-input"
-  appearance="outline"
-  *ngIf="field() && field()?.isVisible"
-  [ngStyle]="{
-'--custom-border-color': field()?.controlStyle?.borderColor ,
-'--custom-border-width': field()?.controlStyle?.borderWidth ,
-'--custom-border-radius': field()?.controlStyle?.borderRadius ,
-'--custom-bg-color': field()?.controlStyle?.background ,
-'--custom-border-color-focus': field()?.controlStyle?.focusBorderColor ,
-'--custom-border-width-focus': field()?.controlStyle?.focusBorderWidth ,
-'--custom-bg-color-focus': field()?.controlStyle?.focusBackground ,
-'--custom-border-color-hover': field()?.controlStyle?.hoverBorderColor ,
-'--custom-border-width-hover': field()?.controlStyle?.hoverBorderWidth ,
-'--custom-border-color-error': field()?.controlStyle?.errorBorderColor ,
-'--custom-border-width-error': field()?.controlStyle?.errorBorderWidth ,
-'--custom-font-size': field()?.controlStyle?.fontSize ,
-'--custom-font-weight': field()?.controlStyle?.fontWeight ,
-'--custom-font-family': field()?.controlStyle?.fontFamily ,
-'--custom-font-color': field()?.controlStyle?.color ,
-'--custom-caret-color': field()?.controlStyle?.caretColor ,
-'--custom-font-color-disabled' : field()?.controlStyle?.disableColor ,
-'--custom-bg-color-disabled' : field()?.controlStyle?.disableBackground ,
-}"
->
-  <div matTextPrefix class="prefix_alternate_mobile primary">
-    <div class="d-flex countryCode">
-      <span class="country_code_input"> {{ CountryCode }} </span>
-      <span
-        ><img src="https://cdn.godigit.com/retail-life/down-arrow.svg" alt=""
-      /></span>
-    </div>
-  </div>
-  @if(reactiveFormControlobject()) {
-  <input
-    matInput
-    autocomplete="none"
-    [type]="field()?.controlType"
-    [minLength]="field()?.validators?.minLength"
-    [disabled]="field()?.isDisable"
-    [required]="field()?.validators?.isRequired"
-    [pattern]="field()?.validators?.pattern"
-    (input)="onInputChange($event)"
-    (blur)="onInputBlur()"
-    [value]="inputValue"
-    [placeholder]="getUnderscorePlaceholder()"
-    (keyup)="changeFormat($event)"
-    [formControl]="reactiveFormControlobject()"
-  />
-  }@else {
-  <input
-    matInput
-    autocomplete="none"
-    [type]="field()?.controlType"
-    [minLength]="field()?.validators?.minLength"
-    [disabled]="field()?.isDisable"
-    [required]="field()?.validators?.isRequired"
-    [pattern]="field()?.validators?.pattern"
-    (input)="onInputChange($event)"
-    (blur)="onInputBlur()"
-    [value]="inputValue"
-    [placeholder]="getUnderscorePlaceholder()"
-    (keyup)="changeFormat($event)"
-  />
-  }
-
-  <span matSuffix class="p-3">
-    <img src="https://cdn.godigit.com/retail-life/edit-icon.svg" alt="" />
-  </span>
-  <mat-error *ngIf="false">
-    {{ field()?.validators?.isRequiredMessage }}
-  </mat-error>
-</mat-form-field>
-<div class="error-message" *ngIf="false">
-  {{ field()?.validators?.isRequiredMessage }}.
-</div>
-<div class="error-message" *ngIf="false">
-  {{ field()?.validators?.patternMessage }}.
-</div>