master-control 0.2.14 → 0.2.15

package/src/lib/multiple-select/multiple-select.component.html

@@ -1,100 +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
-  appearance="outline"
-  class="input-full-width full-width w-100 multi-select"
-  *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 ,
-}"
->
- @if(reactiveFormControlobject()) {
-   <mat-select
-    multiple
-    [id]="field()?.fieldName"
-    [attr.name]="field()?.fieldName"
-    [value]="inputValue"
-    [required]="field()?.validators?.isRequired"
-    [placeholder]="field()?.placeHolder"
-    [disabled]="field()?.isDisable"
-    (openedChange)="onSelectOpened($event)"
-    (selectionChange)="selectionChanged($event)"
-    [formControl]="reactiveFormControlobject()"
-  >
-    <mat-select-trigger>
-      <!-- <mat-chip-listbox>
-        @for (option of visibleChip; track option) {
-        <mat-chip [removable]="true" (removed)="removeItem(option)">
-          {{ option }}
-          <mat-icon matChipRemove>close</mat-icon>
-        </mat-chip>
-        }
-        <mat-chip *ngIf="remainingCount > 0"> +{{ remainingCount }} </mat-chip>
-      </mat-chip-listbox> -->
-      <mat-chip-grid>
-        @for (option of inputValue; track option) {
-        <mat-chip-row [removable]="true" (removed)="removeItem(option)">
-          {{ option }}
-          <mat-icon matChipRemove>close</mat-icon>
-        </mat-chip-row>
-        }
-        <mat-chip *ngIf="remainingCount > 0"> +{{ remainingCount }} </mat-chip>
-      </mat-chip-grid>
-    </mat-select-trigger>
-    @for (option of field()?.options; track option.label) {
-    <mat-option [value]="option.value">
-      {{ option.label }}
-    </mat-option>
-    }
-  </mat-select>
- }@else {
-   <mat-select
-    multiple
-    [id]="field()?.fieldName"
-    [attr.name]="field()?.fieldName"
-    [value]="inputValue"
-    [required]="field()?.validators?.isRequired"
-    [placeholder]="field()?.placeHolder"
-    [disabled]="field()?.isDisable"
-    (openedChange)="onSelectOpened($event)"
-    (selectionChange)="selectionChanged($event)"
-  >
-    <mat-select-trigger>
-      <mat-chip-grid>
-        @for (option of inputValue; track option) {
-        <mat-chip-row [removable]="true" (removed)="removeItem(option)">
-          {{ option.label }}
-          <mat-icon matChipRemove>close</mat-icon>
-        </mat-chip-row>
-        }
-        <mat-chip *ngIf="remainingCount > 0"> +{{ remainingCount }} </mat-chip>
-      </mat-chip-grid>
-    </mat-select-trigger>
-    @for (option of field()?.options; track option.label) {
-    <mat-option [value]="option">
-      {{ option.label }}
-    </mat-option>
-    }
-  </mat-select>
- }
-
-  <mat-error *ngIf="false">
-    {{ field()?.validators?.requiredMessage }}
-  </mat-error>
-</mat-form-field>

package/src/lib/multiple-select/multiple-select.component.ts

@@ -1,115 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { Component, input } from '@angular/core';
-import { MatChipsModule } from '@angular/material/chips';
-import { MatFormFieldModule } from '@angular/material/form-field';
-import { MatIconModule } from '@angular/material/icon';
-import { MatSelectChange, MatSelectModule } from '@angular/material/select';
-import { MasterControlService } from '../master-control.service';
-import { ControlValueAccessor, NG_VALUE_ACCESSOR, ReactiveFormsModule } from '@angular/forms';
-
-@Component({
-  selector: 'lib-multiple-select',
-  standalone: true,
-  imports: [
-    MatSelectModule,
-    MatFormFieldModule,
-    CommonModule,
-    MatChipsModule,
-    MatIconModule,
-    ReactiveFormsModule
-  ],
-  templateUrl: './multiple-select.component.html',
-  styleUrl: './multiple-select.component.css',
-  providers: [
-        {
-          provide: NG_VALUE_ACCESSOR,
-          useExisting: MultipleSelectComponent,
-          multi: true
-        }
-      ]
-})
-export class MultipleSelectComponent implements ControlValueAccessor {
-  constructor(public masterService : MasterControlService) {}
-  field: any = input.required<any>();
-  selectedValues: any = [];
-  visibleChip: any = [];
-  remainingCount: any = 0;
-  inputValue: any = null;
-  reactiveFormControlobject : any = input<any>();
-  onChange: any = () => {};
-    onTouched: any = () => {};
-
-    ngOnInit(): void {
-      // Initialize inputValue with a default or initial value if needed
-    }
-
-    writeValue(value: any): void {
-      this.inputValue = value;
-    }
-
-    registerOnChange(fn: any): void {
-      this.onChange = fn;
-    }
-
-    registerOnTouched(fn: any): void {
-      this.onTouched = fn;
-    }
-
-    onValueChange(newValue: any): void {
-      this.inputValue = newValue;
-      this.onChange(newValue);
-      this.onTouched();
-    }
-
-    selectionChanged(event: MatSelectChange) {
-      this.inputValue = event.value;
-      this.visibleChip = event.value;
-      this.onChange(event.value);
-      this.onTouched();
-      this.onSelectionChange();
-    }
-
-  removeItem(item: any) {
-     const maxVisible = 2;
-    this.visibleChip = this.visibleChip.filter(
-      (element: any) => element !== item
-    );
-     this.selectedValues = this.selectedValues.filter(
-      (element: any) => element !== item
-    );
-    const found = this.field().options.find((i:any) => i.label === item);
-    if (found) {
-      found.value = false;
-    }
-    this.visibleChip = this.selectedValues.slice(0, maxVisible);
-    this.remainingCount = this.selectedValues.length - maxVisible;
-  }
-   onSelectionChange() {
-    const maxVisible = 2;
-    this.visibleChip = this.selectedValues.slice(0, maxVisible);
-    this.remainingCount = this.selectedValues.length - maxVisible;
-  }
-     onSelectOpened(opened: boolean) {
-  const css = this.field()?.controlStyle;
-  if (opened) {
-    document.body.style.setProperty('--custom-select-option-background-color', css?.dropdownOptionBgColor || '#fff');
-    document.body.style.setProperty('--custom-select-option-font-color', css?.dropdownOptionColor || '#444');
-    document.body.style.setProperty('--custom-select-option-font-weight', css?.dropdownOptionFontWeight || '400');
-    document.body.style.setProperty('--custom-select-option-background-color-focus', css?.focusDropdownOptionBgColor || '#fff');
-    document.body.style.setProperty('--custom-select-option-font-color-focus', css?.focusDropdownOptionColor || '#444');
-    document.body.style.setProperty('--custom-select-option-font-weight-focus', css?.focusDropdownOptionFontWeight || '400');
-    document.body.style.setProperty('--custom-select-option-border-left-focus', css?.focusDropdownOptionBorderLeft || '#ffbb00');
-    document.body.style.setProperty('--custom-select-option-border-radius-focus', css?.focusDropdownOptionBorderRadius || '#ffbb00');
-  } else {
-    document.body.style.removeProperty('--custom-select-option-background-color');
-    document.body.style.removeProperty('--custom-select-option-font-color');
-    document.body.style.removeProperty('--custom-select-option-font-weight');
-    document.body.style.removeProperty('--custom-select-option-background-color-focus');
-    document.body.style.removeProperty('--custom-select-option-font-color-focus');
-    document.body.style.removeProperty('--custom-select-option-font-weight-focus');
-    document.body.style.removeProperty('--custom-select-option-border-left-focus');
-    document.body.style.removeProperty('--custom-select-option-border-radius-focus');
-  }
-}
-
-}

package/src/lib/neutral-snackbar/neutral-snackbar.component.css

@@ -1,31 +0,0 @@
-* {
-  font-family: "mulish" !important;
-}
-.neutral-snackbar-card{
-  max-height: 58px;
-  max-width: 400px;
-  border-radius: 8px;
-  background: #444;
-  box-shadow: 0px 2px 15px 2px #E3E6EC99;
-  padding: 10px 16px 10px 16px;
-  color: #fff !important;
-}
-.neutral-image{
-  height: 14.67px;
-}
-.neutral-toaster-label{
-font-size: 14px;
-font-weight: 700;
-color: #fff;
-}
-.neutral-toaster-msg{
-  font-weight: 400;
-  font-size: 12px;
-  color: #fff;
-  line-height: 0px;
-}
-.cross{
-  width: 9.86px;
-  height: 9.86px;
-  cursor: pointer;
-}

package/src/lib/neutral-snackbar/neutral-snackbar.component.html

@@ -1,21 +0,0 @@
-<div [ngClass]="neutralObj.toasterCSS">
-  <div class="d-flex justify-content-between">
-    <div class="d-flex gap-3">
-      <span>
-        <img
-          [src]="neutralObj.imageURL"
-          alt=""
-          class="mt-1"
-          [ngClass]="neutralObj.imageCSS"
-        />
-      </span>
-      <span class="mb-2">
-        <p class="mb-2" [ngClass]="neutralObj.labelCSS">{{neutralObj.labelText}}</p>
-        <p class="m-0" [ngClass]="neutralObj.messageCSS">{{neutralObj.messageText}}</p>
-      </span>
-    </div>
-    <div >
-        <img class="cross" [ngClass]="neutralObj.closeIconCSS" [src]="neutralObj.closeIconImageURL" alt="">
-    </div>
-  </div>
-</div>

package/src/lib/neutral-snackbar/neutral-snackbar.component.ts

@@ -1,19 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { Component, input } from '@angular/core';
-import { MasterControlService } from '../master-control.service';
-
-@Component({
-  selector: 'lib-neutral-snackbar',
-  standalone: true,
-  imports: [CommonModule],
-  templateUrl: './neutral-snackbar.component.html',
-  styleUrl: './neutral-snackbar.component.css'
-})
-export class NeutralSnackbarComponent {
-field : any = input.required<any>();
-neutralObj:any;
-
-constructor(public masterService : MasterControlService) {
-  this.neutralObj = this.masterService.snackbars.find((item: any) => item.type === 'Neutral');
-}
-}

package/src/lib/other-benefits/other-benefits.component.css

@@ -1,78 +0,0 @@
-.other-benefit-card {
-  min-height: 142px;
-  border: 1px solid #dadada;
-  padding: 20px 16px 20px 16px;
-  position: relative;
-  border-color: var(--other-benefit-border-color, #dadada) !important;
-  border-width: var(--other-benefit-border-width, 1px) !important;
-  background: var(--other-benefit-bg-color, #fff) !important;
-  border-radius: var(--other-benefit-color-border-radius, 12px) !important;
-}
-.top-benefit-card {
-  border-radius: 25px;
-  background: #fff;
-  border: 1px solid #ececec;
-  height: 26px;
-  width: 114px;
-  padding: 0px 6px 5px 12px;
-  font-size: 12px;
-  font-weight: 400;
-  color: #444444;
-  letter-spacing: 0%;
-  position: absolute;
-  transform: translate(-6em, -2.7em);
-}
-.top-box {
-  position: absolute;
-  text-align: center;
-}
-.sub-benefit-card {
-  /* border-right: 1px solid #dddddd; */
-  min-height: 110px;
-  min-width: 194px;
-  padding: 12px;
-}
-.sub-benefit-card:not(:last-child) {
-  border-right: 1px solid #dddddd;
-}
-::ng-deep .premium {
-  font-size: 12px;
-  background: #ffffff;
-  color: #696969;
-}
-::ng-deep .tax-benefit-txt {
-  font-size: 12px;
-  font-weight: 400;
-  line-height: 16px;
-  color: #696969;
-  letter-spacing: 0px;
-}
-.header-txt {
-  font-size: 14px;
-  font-weight: 700;
-  color: #444;
-  line-height: 18px;
-  letter-spacing: 0px;
-}
-::ng-deep .annuity-rate-txt {
-  font-size: 12px !important;
-  font-weight: 700 !important;
-  line-height: 16px !important;
-  color: #696969 !important;
-  letter-spacing: 0px !important;
-}
-::ng-deep .normal-txt {
-  font-size: 12px !important;
-  font-weight: 400 !important;
-  line-height: 16px !important;
-  letter-spacing: 0px !important;
-}
-::ng-deep .db-txt{
-    font-size: 12px !important;
-    letter-spacing: 0px !important;
-    line-height: 16px !important;
-    color: #696969 !important;
-}
-::ng-deep .bold-txt{
-    font-weight: 700 !important;
-}

package/src/lib/other-benefits/other-benefits.component.html

@@ -1,21 +0,0 @@
-<div class="other-benefit-card d-flex gap-2"
- [ngStyle]="{
-'--other-benefit-color-border-color': field()?.controlStyle?.borderColor ,
-'--other-benefit-color-border-width': field()?.controlStyle?.borderWidth ,
-'--other-benefit-color-border-radius': field()?.controlStyle?.borderRadius ,
-'--other-benefit-color-bg-color': field()?.controlStyle?.background
- }"
->
-     <p class="w-100 top-box">
-    <span class="top-benefit-card">Other Benefit</span>
-  </p>
-  @for (data of field()?.configData.otherBenefits; track $index) {
-  <div class="sub-benefit-card">
-    <div class="d-flex gap-2">
-      <img [src]="data.imageUrl" alt="" />
-      <span class="header-txt">{{ data.headerText }}</span>
-    </div>
-    <span [innerHTML]="data.htmlInnerText"></span>
-  </div>
-  }
-</div>

package/src/lib/other-benefits/other-benefits.component.ts

@@ -1,13 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { Component, Input, input } from '@angular/core';
-
-@Component({
-  selector: 'lib-other-benefits',
-  standalone: true,
-  imports: [CommonModule],
-  templateUrl: './other-benefits.component.html',
-  styleUrl: './other-benefits.component.css'
-})
-export class OtherBenefitsComponent {
-  field: any = input.required<any>();
-}

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

@@ -1,171 +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;
-}
-
-.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;
-}
-
-.get-otp{
-  padding: 4px 8px 6px 12px;
-  background: #ffbb00;
-  color: #444;
-  font-weight: 600;
-  font-size: 12px;
-  border-radius: 24px;
-  height: 24px;
-  width: 71px;
-  display: inline-flex;
-}
-* {
-  font-family: "mulish" !important;
-}
-
-.verity-otp{
-  border-radius: 24px;
-  border: 1px solid #444;
-  background: #fff;
-  padding: 13px 8px 8px 8px;
-  width: 58px;
-  height: 28px;
-  font-size: 12px;
-  letter-spacing: 0;
-  font-weight: 700;
-  color: #444;
-}
-
-.success-text{
-  font-weight: 500;
-  color: #169F7D;
-}
-
-.error-message{
-  color: red;
-}
-
-/* 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;
-}

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

@@ -1,101 +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"
-  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 ,
-}"
->
-  <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"
-    [name]="field()?.fieldName"
-    [id]="field()?.fieldName"
-    autocomplete="none"
-    [placeholder]="field()?.placeHolder"
-    [maxLength]="field()?.validators?.maxLength"
-    [minLength]="field()?.validators?.minLength"
-    [disabled]="field()?.isDisable"
-    [required]="field()?.validators?.isRequired"
-    [pattern]="field()?.validators?.pattern"
-    (input)="onInputChange($event)"
-    (blur)="onInputBlur()"
-    [value]="inputValue"
-    [formControl]="reactiveFormControlobject()"
-  />
-   }@else {
-    <input
-    matInput
-    autocomplete="none"
-    [type]="field()?.controlType"
-    [name]="field()?.fieldName"
-    [id]="field()?.fieldName"
-    autocomplete="none"
-    [placeholder]="field()?.placeHolder"
-    [maxLength]="field()?.validators?.maxLength"
-    [minLength]="field()?.validators?.minLength"
-    [disabled]="field()?.isDisable"
-    [required]="field()?.validators?.isRequired"
-    [pattern]="field()?.validators?.pattern"
-    (input)="onInputChange($event)"
-    (blur)="onInputBlur()"
-    [value]="inputValue"
-  />
-}
-  
-  <div matSuffix class="get-otp mx-2">
-    <span class="mt-2">Get OTP</span>
-  </div>
-  <div matSuffix class="verity-otp mx-2" *ngIf="false">
-    <span class="mx-1">Verify</span>
-  </div>
-  <span matSuffix class="mx-3" *ngIf="false">
-    <img src="https://cdn.godigit.com/retail-life/check-circle-ou.svg" alt="" />
-  </span>
-  <mat-error *ngIf="false">
-    {{ field()?.validators?.requiredMessage }}
-  </mat-error>
-</mat-form-field>
-<span class="success-text" *ngIf="false">Phone Number Verified</span>
-<span class="success-text">
-  <img src="https://cdn.godigit.com/retail-life/otp-circle-oui.svg" alt="" />
-  OTP Sent
-</span>
-<div class="error-message" *ngIf="false">
-  {{ field()?.validators?.requiredMessage }}.
-</div>
-<div class="error-message" *ngIf="false">
-  {{ field()?.validators?.patternMessage }}.
-</div>