Cloud-CV/EvalAI

<div class="input-group">
  <div *ngIf="type != 'file' && type != 'textarea' && type != 'datetime' && type != 'textattribute'">
    <input
      class="input-field"
      (input)="validateInput($event.target.value)"
      [class.isValid]="isValid"
      [class.theme-dark]="theme == 'dark'"
      name="{{ name }}"
      type="{{ type }}"
      [value]="value"
      [readonly]="isReadonly"
    />
    <span class="input-bar"></span>
    <label [class.is-not-empty]="!isEmpty" [class.theme-dark]="theme == 'dark'">{{ placeholder }}</label>
    <i class="input-icon {{ icon }}" *ngIf="isIconPresent"></i>
    <div class="input-message" #textValue [class.hidden]="toggleErrorMessage()">{{ message }}</div>
  </div>

  <div *ngIf="type == 'textarea'">
    <textarea
      autosize
      class="input-field"
      (input)="validateInput($event.target.value)"
      [class.isValid]="isValid"
      [class.theme-dark]="theme == 'dark'"
      [value]="value"
      [readonly]="isReadonly"
    ></textarea>
    <span class="input-bar"></span>
    <label [class.is-not-empty]="!isEmpty" [class.theme-dark]="theme == 'dark'">{{ placeholder }}</label>
    <i class="input-icon {{ icon }}" *ngIf="isIconPresent"></i>
    <div class="input-message" [class.hidden]="toggleErrorMessage()">{{ message }}</div>
  </div>

  <div *ngIf="type == 'datetime'">
    <input
      class="input-field"
      [(ngModel)]="value"
      [min]="mindatetime"
      [owlDateTime]="datetime"
      [owlDateTimeTrigger]="datetime"
      (input)="validateInput($event.target.value)"
      [class.isValid]="isValid"
      [class.theme-dark]="theme == 'dark'"
      type="{{ type }}"
      [readonly]="isReadonly"
    />
    <owl-date-time [hour12Timer]="true" #datetime></owl-date-time>
    <span class="input-bar"></span>
    <label [class.is-not-empty]="!isEmpty" [class.theme-dark]="theme == 'dark'">{{ placeholder }}</label>
    <i class="input-icon {{ icon }}" *ngIf="isIconPresent"></i>
    <div class="input-message" #textValue [class.hidden]="toggleErrorMessage()">{{ message }}</div>
  </div>

  <div *ngIf="type == 'textattribute'">
    <input
      class="input-field"
      name="{{ name }}"
      type="{{ type }}"
      [(ngModel)]="value"
      [value]="value"
      [readonly]="isReadonly"
    />
    <span class="input-bar"></span>
    <label [class.is-not-empty]="!isEmpty" [class.theme-dark]="theme == 'dark'">{{ attributeName }} - ({{ attributeDescription }}) <span *ngIf="attributeRequired === true" class="color-orange">*</span></label>
    <i class="input-icon {{ icon }}" *ngIf="isIconPresent"></i>
    <div class="input-message" #textValue [class.hidden]="toggleErrorMessage()">{{ message }}</div>
  </div>

  <div *ngIf="type == 'checkbox'">
      <label for="{{name}}" class="mat-label-radio" for="{{name}}">{{name}} </label>
      <br>
      <br>
      <div *ngFor="let option of attributeOptions">
        <mat-checkbox
          (change)="toggleSelection(option)"
          id="{{ option }}"
          [value]="option"
          [checked]="isChecked(option)"
        >
          <label class="fs-16" for="{{ option }}" class="zero-padding">{{ option }}</label>
        </mat-checkbox>
        <br/>
      </div>
      <br/>
  </div>

  <div class="file-field file-upload" *ngIf="type == 'file'">
    <div class="btn btn-waves-effect ev-file-btn-dark waves-dark grad-btn grad-btn-transparent fs-14">
      <span> Upload File </span>
      <input
        name="fileUpload"
        id="file-upload-custom"
        [(ngModel)]="fileValue"
        accept="{{ accept }}"
        (change)="handleFileInput($event.target.files)"
        type="file"
        [readonly]="isReadonly"
        class="btn btn-waves-effect ev-file-btn-dark waves-dark grad-btn grad-btn-transparent fs-14"
      />
    </div>
    <div class="file-path-wrapper">
      <input type="text" value="{{ placeholder }}" disabled />
    </div>
    <div class="input-message" #textValue [class.hidden]="toggleErrorMessage()">{{ message }}</div>
  </div>
</div>