<span #hensel_selection class="hs_div"
  [style.pointer-events]="disabled && !useResultGrid ? 'none' : undefined"
  [style.height]="useResultGrid?height:'unset'" tabindex="-1"
  [style.width]=width
  [title]=title>
  <!-- *ngIf="this.initialised" -->

  <dx-data-grid *ngIf="useResultGrid"
    #grid_hensel
    id="hs_grid"
    [class]="'hs_grid withexport'+ (requiredError()?' hs_required':'')"
    [width]=width
    [height]=height
    [title]=title
    [dataSource]=selectedItemsGrid
    [keyExpr]=keyExpr
    [focusedRowEnabled]=false
    [autoNavigateToFocusedRow]=true
    [showBorders]="true"
    [showRowLines]="false"
    [allowColumnResizing]="false"
    columnResizingMode="widget"
    [columnAutoWidth]="false"
    [columnMinWidth]="30"
    noDataText="{{'core.grid.nodata' | translate}}"
    (onKeyDown)="$event.handled = $event.event.key==='Escape'"
    (onExporting)="clickArrow($event)">
    <!-- (onInitialized)="onInitialized($event)" -->
    <dxo-export [enabled]="!disabled" [texts]="{exportAll: translate.instant('core.hensel-selection.processlist')}"></dxo-export>

    <dxo-header-filter [visible]="false"></dxo-header-filter>
    <dxo-filter-row [visible]="false" [applyFilter]="true"></dxo-filter-row>
    <dxo-paging [enabled]="false"></dxo-paging>
    <dxo-scrolling mode="virtual"></dxo-scrolling>
    <dxo-load-panel [enabled]="true"></dxo-load-panel>
    <dxo-sorting mode="none"></dxo-sorting>
    <dxo-selection mode="single"></dxo-selection>

    <dxi-column [caption]="placeholder+(this._selectedItemIds.length===this._dataSource.length?' ('+translate.instant('core.caption.all')+')':'')+(requiredError()?' *':'')"
      [dataField]="displayExpr" width="100%" (click)="clickArrow()"
      headerCellTemplate="headerWithArrow">
    </dxi-column>
    <div *dxTemplate="let cell of 'headerWithArrow'">
      <div [class]="'hs_grid_header' + (!disabled?' hs_pointer':'')" (click)="clickArrow();">
        {{ cell.column.caption | translate}}
      </div>
    </div>
    <mat-spinner class="hrd-mat-spinner" *ngIf="showSpinner"></mat-spinner>
  </dx-data-grid>

  <!-- [style.width]="useResultGrid?'calc(100% - 2px)':'100%'" -->
  <mat-form-field
    #hs_matformfield
    [class]="'hs_form'+(!placeholder?' no-placeholder':'')+' '+hsClass"
    [style.background-color]="useResultGrid?backgroundColor4Grid:backgroundColor"
    [style.width]="useResultGrid?'calc('+width+' - 2px)':width"
    [style.top]="useResultGrid?'calc(-100% + 1px)':0"
    [style.left.px]="useResultGrid?1:0"
    [style.visibility]="showInputField?'visible':'hidden'">
    <!-- type search for clear button-->
    <mat-hint *ngIf="!(items2filter | async)?.length && lastFilter && lastFilter.length>=minFilterLength4Search; else nomatch">
      <div [style]="'color: red; background-color:'+backgroundColor4Grid+';'">{{'core.hensel-selection.nohits' | translate}}</div>
    </mat-hint>
    <mat-hint *ngIf="this.dropDownState === 2 && !(items2filter | async)?.length && (lastFilter.length<minFilterLength4Search); else nomatch">
      <div [style]="'color: red; background-color:'+backgroundColor4Grid+';'">
        {{'core.hensel-selection.inputminsybols' | translate: {value: minFilterLength4Search} }}
      </div>
    </mat-hint>
    <ng-template #nomatch>
      <!-- Filter {{placeholder}} mit {{displayExpr[0].toUpperCase() +  displayExpr.slice(1)}} -->
    </ng-template>

    <span *ngIf="!multiSelect && displayIconFn && selectedItems?.length>0 && dropDownState===EN_DropDownStateClosed" class="material-icons">{{getIcon4Selected()}}</span>
    <input matInput
      #cbInput
      type="search"
      [placeholder]="placeholder"
      [matAutocomplete]="auto"
      [formControl]="itemsControl"
      class="mat-select-value-text"
      (blur)="leaveFocus()"
      (focus)="takeFocus()"
      [required]="required"
      [name]=name
      [id]=id
      [tabindex]="showInputField?tabindex:-1"
      [autofocus]="(autofocus || autofocus==='')">
    <mat-spinner class="hrd-mat-spinner zoom" *ngIf="showSpinner"></mat-spinner>

    <div *ngIf="!useResultGrid" class="mat-select-arrow-wrapper" style="cursor: pointer;">
      <div class="mat-select-arrow hs_arrow" [style]="disabled?'color: rgba(0, 0, 0, 0.26)':''"></div>
    </div>

    <button *ngIf="canClear" mat-button matSuffix mat-icon-button aria-label="Clear" tabindex="-1"
      (click)="clickClear($event)" (blur)="leaveFocus()" (focus)="startLeaveFocus = false" [disabled]=disabled>
      <mat-icon>close</mat-icon>
    </button>

    <mat-autocomplete id="dropdown" #auto="matAutocomplete" tabindex="-1"
      [displayWith]="displayFn"
      (opened)="openDropDown()"
      (closed)="closeDropDown(); showInputField=!this.useResultGrid"
      class="hs_autocomplete">
      <div #hs_toolbar id="hs_toolbar" *ngIf="multiSelect" style="display: flex; background-color: rgba(0, 0, 0, .12); height: 40px">
        <mat-checkbox #chkBx style="padding-left: 5px; margin-top: 5px;"
          class="mat-option"
          [checked]="selectedAllNonePart===1"
          [indeterminate]="selectedAllNonePart===0"
          (change)="setAll($event.checked)">
          <div>{{'core.caption.all' | translate}}</div>
          <!-- <div *ngIf="chkBx.checked; else all">Keine</div><ng-template #all>Alle</ng-template> -->
        </mat-checkbox>
        <mat-checkbox *ngIf=useSelFirstButton class="cbCheckedFirst" id="cbCheckedFirst" [(ngModel)]="selectedFirst"></mat-checkbox>
        <dx-tooltip #hintCB [target]="'#cbCheckedFirst'" showEvent="dxhoverstart" hideEvent="dxhoverend">
          <div *dxTemplate="let data of 'content'">{{'core.hensel-selection.selectedfirst' | translate}}</div>
        </dx-tooltip>
        <dx-button class="buttonLayoutOk" [style]="!useSelFirstButton?'margin-left: auto':''" id="buttonLayoutOk"
          [disabled]="this.lastSelection===this.getSelection(this.selectedItems) || !canClear && isEmpty()" icon="check"
          (click)="this.selectionDone(); hintOk.instance.hide()"></dx-button>
        <dx-tooltip #hintOk [target]="'#buttonLayoutOk'" showEvent="dxhoverstart" hideEvent="click dxhoverend" tabindex="-1">
          <div *dxTemplate="let data of 'content'">{{'core.btn.apply' | translate}}</div>
        </dx-tooltip>
        <dx-button *ngIf=useCloseButton class="buttonLayoutCancel" id="buttonLayoutCancel" icon="clear" (click)="autocompleteTrigger.closePanel()" tabindex="-1"></dx-button>
        <dx-tooltip #hintCancel [target]="'#buttonLayoutCancel'" showEvent="dxhoverstart" hideEvent="click dxhoverend">
          <div *dxTemplate="let data of 'content'">{{'core.btn.cancel' | translate}}</div>
        </dx-tooltip>
      </div>

      <div #hs_panel [style]="'overflow: auto;'+(multiSelect?'height: calc(100% - 40px);':'')">
        <mat-option *ngFor="let item of items2filter | async"
          [class]="(useCBChangedColor?'changedCBColor':'')+' '+( useLabelChangedColor?'changedLabelColor':'')+' '+(checkInSelected(item)?(!multiSelect?'selected':'multi_selected'):'not_selected')+' '+(multiSelect&&checkChanged(item)?'changed':'')"
          (onSelectionChange)=itemSelectedByKeyboard($event) [disabled]=item.disabled>
          <div (click)="itemClicked($event, item)">
            <mat-checkbox *ngIf="multiSelect" [checked]="checkInSelected(item)" (change)="toggleSelection(item)" (click)="$event.stopPropagation()"
              [disabled]=item.disabled>
              <mat-icon *ngIf=displayIconFn> {{displayIconFn(item.link)}}</mat-icon>
              <span class="item">{{ item[displayExpr] }}</span>
            </mat-checkbox>
            <div *ngIf="!multiSelect" class="item">
              <mat-icon *ngIf=displayIconFn> {{displayIconFn(item.link)}}</mat-icon>
              {{ item[displayExpr] }}
            </div>
          </div>
        </mat-option>
      </div>
    </mat-autocomplete>

  </mat-form-field>
</span>
