<span #hensel_input class="hs_div"
  [style.pointer-events]="disabled ? 'none' : undefined"
  tabindex="-1"
  [style.width]=width
  [title]=title>

  <mat-form-field
    #hs_matformfield
    [class]="'hs_form'+(!placeholder?' no-placeholder':'')+' '+hsClass"
    [style.background-color]="backgroundColor"
    [style.width]="width"
    [style.visibility]="showInputField?'visible':'hidden'">

    <mat-label *ngIf="label">{{label}}</mat-label>

    <mat-hint *ngIf="hint">
      <div [style]="'color: red; background-color:'+computedBackgroundColor+';'">
        {{hint | translate}}
      </div>
    </mat-hint>
    <span *ngIf="displayIconFn" class="material-icons">{{getIcon()}}</span>
    <input
      matInput
      #cbInput
      [type]="type"
      [maxlength]="maxlength"
      [placeholder]="placeholder"
      [formControl]="itemsControl"
      class="mat-select-value-text"
      (blur)="leaveFocus()"
      (focus)="takeFocus()"
      (input)="onChange($event.target.value)"
      [required]="required"
      [readonly]="readonly"
      [name]=name
      [autocomplete]=autocomplete
      [id]=id
      [tabindex]="showInputField?tabindex:-1"
      [autofocus]="(autofocus || autofocus==='')"

      [mask]="mask"
      [decimalMarker]=decimalMarker
      [thousandSeparator]=thousandSeparator
      [prefix]=prefix
      [suffix]=suffix
      [leadZero]=leadZero
      [separatorLimit]=separatorLimit

      hensel-validator
      [greater]=greater
      [notless]=notless
      [notgreater]=notgreater
      [less]=less

      [henselDecimal]=henselDecimal
      [henselDecimalAllowEmpty]=henselDecimalAllowEmpty
    >
    <span matTextSuffix>
      <ng-content select="[hensel-input-textSuffix]"></ng-content>
    </span>
    <span matSuffix>
      <ng-content select="[hensel-input-suffix]"></ng-content>
    </span>
    <mat-error>
      <ng-content select="[hensel-input-error]"></ng-content>
    </mat-error>
    <mat-error *ngIf="errorMessageFn">
      {{errorMessageFn(value)}}
    </mat-error>
  </mat-form-field>
  <!-- <mat-error *ngIf="validate && !validate">
    <span class="mat-caption">
      <strong>VALIDATION.REQUIRED</strong>
    </span>
  </mat-error> -->

</span>
