<div *ngIf="dataSource" class="custom-form-control" [ngStyle]="{'width': width ? width : auto }">
  <ng-template class="wrapper-text" #customItemTemplate let-model="item" let-index="indexTemplate" let-query="query">
    <div (mousedown)="typeaheadOnSelect({'item':model})">
      <div>
        <span [innerHTML]="join(model.accessId, query)">
        </span>
      </div>
      <div>
        <span [innerHTML]="join(model.name, query)">
        </span>
      </div>
    </div>
  </ng-template>
  <div [ngClass]="{'hidden': !dataSource.selected || typing,
                   'disable': disable}" class="wrapper-text" (click)="setTyping(true)">
    <span>
      <label>
        {{dataSource.selected?.name}}
      </label>
    </span>
    <div class="input-group">
      <div>{{dataSource.selected?.accessId}}</div>
    </div>
  </div>
  <div [ngClass]="{'hidden': dataSource.selected && !typing}">
    <span class="field-label-wrapper">
      <label>
        {{dataSource.selected?.name}}
      </label>
    </span>
    <div class="input-group">
      <input #inputTypeAhead class=" form-control input-text" [ngClass]="{'invalid': dataSource.length == null}" (blur)="typeaheadOnSelect({'item':dataSource.selected})" name="accessItem-{{index}}"
        required #accessItemName="ngModel" [(ngModel)]="value" [typeahead]="dataSource" typeaheadOptionField="name" [typeaheadItemTemplate]="customItemTemplate"
        (typeaheadOnSelect)="typeaheadOnSelect($event, index)" [typeaheadScrollable]="true" [typeaheadOptionsInScrollableView]="typeaheadOptionsInScrollableView"
        [typeaheadMinLength]="typeaheadMinLength" [typeaheadWaitMs]="typeaheadWaitMs" (typeaheadLoading)="changeTypeaheadLoading($event)"
        placeholder="{{displayError? placeHolderMessage: ''}}" [@validation]="validationValue" >
      <button *ngIf="!typeaheadLoading" type="button" title="search" class="btn rounded blue">
        <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
      </button>
      <div *ngIf="typeaheadLoading" class="loading">
        <taskana-spinner [isRunning]="typeaheadLoading" positionClass="type-ahead-spinner"></taskana-spinner>
      </div>
    </div>
  </div>
</div>
