<div class="hensel-dnd" name="hensel-dnd" [title]="title">
  <div *ngIf="!!caption" [class]="'dnd-title '+captionClass+(disabled?' font-disabled':' font-enabled')">
    {{caption}}
  </div>
  <div #henseldnd [class]="'dnd-upload-container '+(disabled?'dnd-upload-container-disabled':'dnd-upload-container-enabled')+(buttonText?'-btn':'')"
    (click)="buttonText?null:selectFiles()"
    henselDnD
    [disabled]=disabled

    (onFileDropped)="startUpload($event)">
    <input hidden type="file"
      #fileInput
      id="fileInput"
      (change)="startUpload($event.target.files); $event.target.value=''"
      [multiple]=multiple
      [accept]=accept
      [disabled]=disabled>
    <!-- [style.font-size]="calcFontSize(henseldnd.offsetWidth, henseldnd.offsetHeight)" -->
    <button name="hensel-dnd-button" *ngIf="buttonText" [class]="'dnd-upload-icon'+(disabled?'':' dnd-upload-button')"
      mat-button title="title" (click)="selectFiles()" [disabled]="disabled">
      <mat-icon *ngIf="!!icon">{{icon}}</mat-icon>
      {{buttonText}}
    </button>
    <mat-icon #dndicon id="dndicon" *ngIf="!!icon&&!buttonText" class="dnd-upload-icon"
      [style.font-size]="(((henseldnd.offsetWidth<henseldnd.offsetHeight?henseldnd.offsetWidth:henseldnd.offsetHeight)-10)/12*100*iconSizePrc).toFixed()+'%'">
      {{icon}}
    </mat-icon>
  </div>
</div>
