@if (label) {
  <label
    [class.secondLabelActive]="secondLabel && secondLabel.length > 0"
    class="clr-control-label"
  >
    <span
      (click)="onChangeLabel('first')"
      [class.value-type-selected]="labelSelected === 'first'"
      >{{ label }}</span
    >
    @if (secondLabel) {
      /
      <span
        (click)="onChangeLabel('second')"
        [class.value-type-selected]="labelSelected === 'second'"
        >{{ secondLabel }}</span
      >
    }
  </label>
}
@switch (type) {
  @case ('date') {
    <clr-date-container>
      <input
        type="date"
        clrDate
        [id]="inputId"
        [attr.list]="'datalist_' + inputId"
        [placeholder]="this.temp! | dateTimeFormatter: 'date'"
        [clrDate]="value!"
        (clrDateChange)="onDateInputFired($event)"
        (focus)="this.inputFocused = true"
        (focusout)="this.inputFocused = false"
        (focusin)="onFocusinInput($event)"
        (mouseover)="onInputMouseOver()"
        (mouseout)="onInputMouseOut()"
        [disabled]="this.disabled"
      />
    </clr-date-container>
  }
  @case ('time') {
    <input
      type="time"
      step="1"
      class="input-val"
      [value]="value"
      (input)="onInputFired($event)"
      [id]="inputId"
      [attr.list]="'datalist_' + inputId"
      (focus)="this.inputFocused = true"
      (focusout)="this.inputFocused = false"
      (focusin)="onFocusinInput($event)"
      (mouseover)="onInputMouseOver()"
      (mouseout)="onInputMouseOut()"
      [disabled]="this.disabled"
    />
  }
  @case ('text') {
    <app-autocomplete
      #input
      class="input-val"
      type="text"
      autocomplete="off"
      [inputId]="inputId"
      autofocus
      [value]="value?.toString() || ''"
      (onInputChange)="onInputFired($event)"
      (onLoadingMore)="autocompleteLoadingMore($event)"
      [enableLoadMore]="enableLoadMore"
      [emitOnlySelected]="emitOnlySelected"
      [disabled]="this.disabled"
    >
      <ng-content></ng-content>
    </app-autocomplete>
  }
}