master-control 0.2.14 → 0.2.15

package/src/lib/checkbox/checkbox.component.html

@@ -1,23 +0,0 @@
-<mat-checkbox *ngIf="field() && field()?.isVisible"
-  [name]="field()?.fieldName"
-  [id]="field()?.fieldName"
-  [disabled]="field()?.isDisable"
-  [required]="field()?.validators?.isRequired"
-  [checked]="inputValue"
-  (change)="onCheckboxChange($event)"
-   [ngStyle]="
-{
-    '--checkbox-border-radius': field()?.controlStyle?.borderRadius,
-    '--checkbox-bg-color': field()?.controlStyle?.background ,
-    '--checkbox-border-color-focus': field()?.controlStyle?.focusBorderColor ,
-    '--checkbox-bg-color-focus': field()?.controlStyle?.focusBackground ,
-    '--checkbox-font-size': field()?.controlStyle?.fontSize ,
-    '--checkbox-font-weight': field()?.controlStyle?.fontWeight ,
-    '--checkbox-font-color': field()?.controlStyle?.color ,
-}"
->
-{{ field()?.label }}
-</mat-checkbox>
-<div class="error-message" *ngIf="false">
-    {{field()?.validators?.isRequiredMessage}}.
-</div>

package/src/lib/checkbox/checkbox.component.ts

@@ -1,70 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { Component, input } from '@angular/core';
-import { ControlValueAccessor, NG_VALUE_ACCESSOR, ReactiveFormsModule } from '@angular/forms';
-import { MatCheckboxModule } from '@angular/material/checkbox';
-import { MasterControlService } from '../master-control.service';
-
-
-@Component({
-  selector: 'lib-checkbox',
-  standalone: true,
-  imports: [CommonModule , MatCheckboxModule, ReactiveFormsModule],
-  templateUrl: './checkbox.component.html',
-  styleUrl: './checkbox.component.css',
-    providers: [
-      {
-        provide: NG_VALUE_ACCESSOR,
-        useExisting: CheckboxComponent,
-        multi: true
-      }
-    ]
-})
-export class CheckboxComponent implements ControlValueAccessor {
-  constructor(public masterService : MasterControlService){}
-  field: any = input.required<any>();
-
-  inputValue: any = null;
-  _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);
-  }
-
-  onCheckboxChange(event: any): void {
-    // const target = event.target as HTMLInputElement;
-    this.inputValue = event.checked;
-    this._onChange(this.inputValue);
-    this._unTouched();
-    const css = this.field()?.controlStyle;
-  if (event.checked) {
-    document.body.style.setProperty('--custom-checkbox-border-focus', css?.focusBorderColor || '#ffbb00');
-    document.body.style.setProperty('--custom-checkbox-bg-color-focus', css?.focusBackground || '#ffbb00');
-    document.body.style.setProperty('--custom-checkbox-border-radius-checkbox', css?.borderRadius || '4px');
-    document.body.style.setProperty('--custom-font-size', css?.fontSize || '16px');
-    document.body.style.setProperty('--custom-font-weight', css?.fontWeight || '400');
-    document.body.style.setProperty('--custom-font-family', css?.fontFamily || 'Mulish');
-    document.body.style.setProperty('--custom-font-color', css?.color || '#444');
-  } else {
-    document.body.style.setProperty('--custom-border-color-focus', css?.focusBorderColor || '#ddd');
-    document.body.style.setProperty('--custom-bg-color-focus', css?.focusBackground || '#999');
-    document.body.style.setProperty('--custom-border-radius-checkbox', css?.borderRadius || '4px');
-  }
-  }
-
-  onInputBlur(): void {
-    this._unTouched();
-  }
-}

package/src/lib/discount/discount.component.css

@@ -1,45 +0,0 @@
-* {
-  font-family: "mulish" !important;
-}
-
-.discount-label{
-  color: #ECAF07;
-  background: #FFFBE5;
-}
-.discount-card{
-  max-height: 100px;
-  max-width: 346px;
-  border: 1px solid #ECECEC;
-  box-shadow: 0px 2px 15px 2px #E3E6EC99;
-  border-radius: 8px;
-  padding: 12px 16px 12px 16px;
-  letter-spacing: 0px;
-}
-.discount-card{
-  max-width: var(--discount-card-width, 346px) !important;
-  border-radius: var(--discount-border-radius, 8px) !important;
-  border-color: var(--discount-border-color, #ECECEC) !important;
-  border-width: var(--discount-border-width, 1px) !important;
-}
-
-.h2-extrabold{
-  font-size: 20px;
-  font-weight: 800;
-  color: #444;
-}
-.b3-regular{
-  font-weight: 400;
-  font-size: 12px;
-  color: #444;
-}
-.apply-btn{
-  background: #ffbb00;
-  max-width: 78px;
-  max-height: 24px;
-  border-radius: 32px;
-  padding: 0px 12px 4px 12px;
-  border: 1px solid #ffbb00;
-  font-size: 12px;
-  font-weight: 700;
-  color: #000;
-}

package/src/lib/discount/discount.component.html

@@ -1,51 +0,0 @@
-<p
-  class="discount-label b2-bold px-1"
-  *ngIf="field() && field()?.isVisible && field()?.isShowLabel"
->
-  {{ field()?.label }}
-</p>
-<div 
-class="discount-card" 
-*ngIf="field() && field()?.isVisible"
-[ngStyle]="
-{
-    '--discount-border-width': field()?.controlStyle?.borderWidth,
-    '--discount-card-width': field()?.controlStyle?.width ,
-    '--discount-border-radius': field()?.controlStyle?.borderRadius ,
-    '--discount-border-color': field()?.controlStyle?.borderColor ,
-}"
->
-  <div class="d-flex justify-content-between">
-    <div>
-      <img
-        src="https://cdn.godigit.com/retail-life/discount-img-lib.svg"
-        alt=""
-        class="mx-1"
-      />
-      <span class="h2-extrabold">5% </span>
-      <span class="b3-regular">off</span>
-    </div>
-    <div>
-      <button class="apply-btn">
-        <span class="my-1">
-          Apply
-          <img
-            src="https://cdn.godigit.com/retail-life/arrow_forward_lib.svg"
-            alt=""
-          />
-        </span>
-      </button>
-    </div>
-    <div *ngIf="false">
-      <button class="remove-btn">
-        <span> Remove x </span>
-      </button>
-    </div>
-  </div>
-  <div>
-    <p class="b2-bold m-0">Good Health Discount</p>
-    <p class="b3-regular">
-      Get extra 5% discount for keeping a healthy lifestyle!
-    </p>
-  </div>
-</div>

package/src/lib/discount/discount.component.ts

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

package/src/lib/discount-v2/discount-v2.component.css

@@ -1,34 +0,0 @@
-.discount-card-v2{
- border-width: var(--discount-design-border-width , 1px);
- border-color: var(--discount-design-border-color , #0BB68B);
- border-style: var(--discount-design-border-style , solid) ;
- width: var(--discount-design-width , fit-content);
- border-radius: var(--discount-design-border-radius , 8px);
- box-shadow: 0px 2px 15px 2px rgba(227, 230, 236, 0.6);
- background: var(--discount-design-bg , #fff);
-}
-.discount-heading{
- font-weight: var(--discount-heading-font-weight , 700);
- font-size: var(--discount-heading-font-size , 12px);
- color: var(--discount-heading-font-color , #444);
-}
-.discount-btn-remove{
- border-radius: 32px;
- border: 1px solid #EE0000;
- background-color: white;
- font-size: 12px;
- font-weight: 700;
- color: #EE0000;
- display: flex;
- background: #fff;
-}
-.remove-btn-cross{
- font-size: 12.5px !important;
- transform: translate(0px, 2px);
-}
-*{
-    font-family: 'Mulish' !important;
-}
-.material-icons{
-  font-family: 'Material Icons' !important;
-}

package/src/lib/discount-v2/discount-v2.component.html

@@ -1,20 +0,0 @@
-<div class="px-3 py-2 discount-card-v2" *ngIf="field() && field()?.isVisible" [ngStyle]="
-{
-    '--discount-design-border-width': field()?.controlStyle?.borderWidth,
-    '--discount-design-border-color': field()?.controlStyle?.borderColor ,
-    '--discount-design-border-style': field()?.controlStyle?.borderStyle ,
-    '--discount-design-width': field()?.controlStyle?.width ,
-    '--discount-design-border-radius': field()?.controlStyle?.borderRadius ,
-    '--discount-design-bg': field()?.controlStyle?.background ,
-}">
-    <div class="mb-2 discount-heading" [ngStyle]="
-{
-    '--discount-heading-font-weight': field()?.controlStyle?.fontWeight ,
-    '--discount-heading-font-size': field()?.controlStyle?.fontSize ,
-    '--discount-heading-font-color': field()?.controlStyle?.color
-}">{{field()?.label}}</div>
-    <div>
-        <button class="px-2 mt-1 discount-btn-remove"><div>Remove</div> <mat-icon class="pt-1 remove-btn-cross">close</mat-icon></button>
-    </div>
-</div>
-

package/src/lib/discount-v2/discount-v2.component.ts

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

package/src/lib/dob/dob.component.css

@@ -1,117 +0,0 @@
-.field-lable{
-  font-size: 10px !important;
-  font-weight: 700 !important;
-  color: #444 !important;
-  margin-bottom: 0px !important;
-}
-.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;
-}
-* {
-  font-family: "mulish" !important;
-}

package/src/lib/dob/dob.component.html

@@ -1,88 +0,0 @@
-<label
-  *ngIf="field() && field()?.isVisible && field().isShowLabel"
-  class="field-lable"
-  >{{ field()?.label
-  }}<span style="color: red" *ngIf="field() && field()?.validators?.isRequired"
-    >*</span
-  ></label
->
-<mat-form-field
-  class="w-100"
-  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-border-color-focus': field()?.controlStyle?.focusBorderColor ,
-    '--custom-border-width-focus': field()?.controlStyle?.focusBorderWidth ,
-    '--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 ,
-    '--custom-bg-color': field()?.controlStyle?.background ,
-     '--custom-bg-color-focus': field()?.controlStyle?.focusBackground ,
-    }"
->
-  @if(reactiveFormControlobject()) {
-  <input
-    matInput
-    autocomplete="none"
-    type="text"
-    [name]="field()?.fieldName"
-    [id]="field()?.fieldName"
-    [placeholder]="field()?.placeHolder"
-    [required]="field()?.validators?.isRequired"
-    [pattern]="field()?.validators?.pattern"
-    [matDatepicker]="picker"
-    (keyup)="dateDivisionFormat($event)"
-    [disabled]="field()?.isDisable"
-    (dateChange)="onInputChange($event)"
-    (blur)="onInputBlur($event)"
-    [value]="inputValue"
-    [formControl]="reactiveFormControlobject()"
-  />
-  }@else {
-  <input
-    matInput
-    autocomplete="none"
-    type="text"
-    [name]="field()?.fieldName"
-    [id]="field()?.fieldName"
-    [placeholder]="field()?.placeHolder"
-    [required]="field()?.validators?.isRequired"
-    [pattern]="field()?.validators?.pattern"
-    [matDatepicker]="picker"
-    (keyup)="dateDivisionFormat($event)"
-    [disabled]="field()?.isDisable"
-    (dateChange)="onInputChange($event)"
-    (blur)="onInputBlur($event)"
-    [value]="inputValue"
-  />
-  }
-
-  <mat-datepicker-toggle matSuffix [for]="picker" *ngIf="false">
-    <img
-      src="https://cdn.godigit.com/digitPlusAssets/retail-life-icon/svgicon/date_picker_icon.svg"
-      style="width: 16px"
-      matDatepickerToggleIcon
-    />
-  </mat-datepicker-toggle>
-  <mat-datepicker #picker></mat-datepicker>
-  <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/dob/dob.component.ts

@@ -1,107 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { Component, input } from '@angular/core';
-import { ControlValueAccessor, NG_VALUE_ACCESSOR, ReactiveFormsModule } from '@angular/forms';
-import { MomentDateAdapter, MomentDateModule } from '@angular/material-moment-adapter';
-import { DateAdapter, MAT_DATE_FORMATS } from '@angular/material/core';
-import { MatDatepickerModule } from '@angular/material/datepicker';
-import { MatFormFieldModule } from '@angular/material/form-field';
-import { MatInputModule } from '@angular/material/input';
-import { MasterControlService } from '../master-control.service';
-
-
-export const MY_DATE_FORMAT = {
-  parse: {
-    dateInput: [
-      'DD-MM-YYYY',
-      'MM/DD/YYYY',
-      'YYYY/MM/DD',
-      'DD/MM/YYYY',
-      'DD MMM YYYY',
-      'DD MMMM YYYY',
-      'DD-MMM-YYYY'
-    ]
-  },
-  display: {
-    dateInput: 'DD-MMM-YYYY',
-    monthYearLabel: 'MMM YYYY',
-    dateA11yLabel: 'DD-MMM-YYYY',
-    monthYearA11yLabel: 'MMMM YYYY'
-  }
-};
-
-@Component({
-  selector: 'lib-dob',
-  standalone: true,
-  imports: [MatInputModule, MatFormFieldModule, CommonModule, MatDatepickerModule, MomentDateModule, ReactiveFormsModule],
-    providers: [
-      {
-        provide: NG_VALUE_ACCESSOR,
-        useExisting: DobComponent,
-        multi: true
-      },
-    {
-      provide: DateAdapter,
-      useClass: MomentDateAdapter,
-      deps: []
-    },
-    { provide: MAT_DATE_FORMATS, useValue: MY_DATE_FORMAT }
-  ],
-  templateUrl: './dob.component.html',
-  styleUrl: './dob.component.css',
-})
-export class DobComponent implements ControlValueAccessor {
-  field: any = input.required<any>();
-  inputValue: any = null;
-  reactiveFormControlobject : any = input<any>();
-
-  constructor(public service : MasterControlService) {}
-
-  dateDivisionFormat(event: any) {
-    let evt = event.target;
-    if (evt.value.length > 2 && !evt.value.substr(2, 1).includes('-')) {
-      evt.value = [evt.value.slice(0, 2), '-', evt.value.slice(2)].join('');
-    } else if (
-      evt.value.length > 5 &&
-      Number(evt.value.substr(3, 2)) &&
-      !evt.value.substr(5, 1).includes('-')
-    ) {
-      evt.value = [evt.value.slice(0, 5), '-', evt.value.slice(5)].join('');
-    } else if (
-      evt.value.length > 6 &&
-      !Number(evt.value.substr(3, 2)) &&
-      !evt.value.substr(6, 1).includes('-')
-    ) {
-      evt.value = [evt.value.slice(0, 6), '-', evt.value.slice(6)].join('');
-    }
-  }
-
-  _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(event : any): void {
-    if (!this.service.checkIfValueIsEmpty(event.target.value)) {
-      if (isNaN(Date.parse(event.target.value))) {
-        event.target.value = '';
-      }
-
-    }
-    this._unTouched();
-  }
-
-}

package/src/lib/download-document/download-document.component.css

@@ -1,53 +0,0 @@
-* {
-  font-family: "mulish" !important;
-}
-
-.upload-label{
-  opacity: 0;
-}
-.upload-btn {
-  width: 100% !important;
-  height: 48px !important;
-  padding: 10px;
-  border-radius: 8px;
-}
-.upload-btn {
-  width: var(--upload-width , 100%) !important;
-  border-radius: var(--upload-border-radius , 8px) !important;
-}
-.lightbackground {
-  border-color:  #999;
-  border-width: 1px;
-  border-style: dashed;
-  background: #ffffff;
-  color: #444;
-  font-size: 14px;
-  font-weight: 700;
-}
-.lightbackground {
-  border-color:  var(--upload-border-color , #999) !important;
-  border-width: var(--upload-border-width , 1px) !important;
-  border-style: var(--upload-border-style , dashed) !important;
-  background: var(--upload-background-color , #ffffff) !important;
-}
-.upload-icon {
-  display: flex;
-  justify-content: center;
-  gap: 7px;
-}
-.upload-text{
-  color: #444 !important;
-  font-weight: 700 !important;
-  font-size: 14px !important;
-}
-.upload-text{
-  color: var(--upload-font-color , #444) !important;
-  font-size: var( --upload-font-size , 14px) !important;
-  font-weight: var(--upload-font-weight , 700) !important;
-}
-.field-lable{
-  font-size: 10px !important;
-  font-weight: 700 !important;
-  color: #444 !important;
-  margin-bottom: 0px !important;
-}

package/src/lib/download-document/download-document.component.html

@@ -1,38 +0,0 @@
-<label class="field-lable upload-label" *ngIf="field() && field()?.isVisible && field()?.isShowLabel">{{field()?.label}}</label>
-  <input
-    hidden
-    [type]="field()?.controlType"
-    #fileInput
-    (click)="(fileInput.value)"
-    [required]="field()?.validators?.isRequired"
-  />
-  <button
-    type="button"
-    class="upload-btn lightbackground"
-    *ngIf="field() && field()?.isVisible"
-    [ngStyle]="{
-'--upload-width': field()?.controlStyle?.width ,
-'--upload-border-radius': field()?.controlStyle?.borderRadius ,
-'--upload-border-color': field()?.controlStyle?.borderColor ,
-'--upload-border-width': field()?.controlStyle?.borderWidth ,
-'--upload-border-style': field()?.controlStyle?.borderStyle ,
-'--upload-background-color': field()?.controlStyle?.background ,
-'--upload-focus-border-color': field()?.controlStyle?.focusBorderColor ,
-'--upload-focus-background-color': field()?.controlStyle?.focusBackground ,
-}"
-  >
-      <span class="upload-icon">
-        <span
-          ><img
-            src="https://cdn.godigit.com/retail-life/Download_Icon.svg"
-            alt=""
-            class="mb-1"
-        /></span>
-        <span class="upload-text"   [ngStyle]="{
-'--upload-font-color': field()?.controlStyle?.color ,
-'--upload-font-size': field()?.controlStyle?.fontSize ,
-'--upload-font-weight': field()?.controlStyle?.fontWeight,
-'--upload-focus-font-color': field()?.controlStyle?.focusColor ,
-}">{{ field()?.label }}</span>
-      </span>
-  </button>