@if (dropdownButton()) {
    <iqser-circle-button
        (click)="$event.stopImmediatePropagation()"
        [matMenuTriggerFor]="downloadMenu"
        [tooltipClass]="tooltipClass()"
        [tooltipPosition]="tooltipPosition()"
        [tooltip]="tooltip | translate: { count: files().length }"
        [type]="type()"
        [disabled]="disabled() || !canDownloadFiles || invalidDownload"
        [buttonId]="buttonId()"
        icon="iqser:download"
        dropdownButton
    ></iqser-circle-button>
} @else {
    <iqser-circle-button
        (action)="downloadFiles()"
        [buttonId]="buttonId()"
        [disabled]="disabled() || !canDownloadFiles || invalidDownload"
        [tooltipClass]="tooltipClass()"
        [tooltipPosition]="tooltipPosition()"
        [tooltip]="tooltip | translate: { count: files().length }"
        [type]="type()"
        icon="iqser:download"
    ></iqser-circle-button>
}

<mat-menu #downloadMenu="matMenu">
    <button (click)="downloadComponentAsJSON($event)" [innerHTML]="'component-download.json' | translate" mat-menu-item></button>
    <button (click)="downloadComponentAsXML($event)" [innerHTML]="'component-download.xml' | translate" mat-menu-item></button>
    <button (click)="downloadFiles($event)" [innerHTML]="'component-download.report' | translate" mat-menu-item></button>
</mat-menu>