mediarepo/mediarepo-ui/src/app/components/shared/sidebar/file-search/file-search.component.html

<div class="tag-input-list-and-actions">
    <div #tagInputList class="tag-input-list">
        <div class="tag-input-list-inner">
            <div (click)="removeFilterExpression(filter)" *ngFor="let filter of filters" class="tag-input-item"
                 mat-ripple>{{filter.getDisplayName()}}</div>
        </div>
    </div>
    <button (click)="removeAllSearchTags()" id="delete-all-tags-button" mat-icon-button>
        <ng-icon name="mat-delete-sweep"></ng-icon>
    </button>
</div>
<app-tag-input (tagAdded)="addSearchTag($event); searchForFiles()" [allowNegation]="true"
               [availableTags]="getValidSearchTags()"
               class="full-width">
    <button (click)="openFilterDialog()" class="filter-dialog-button" mat-button>
        <ng-icon name="mat-filter-alt"></ng-icon>
    </button>
</app-tag-input>
<button (click)="openSortDialog()" id="sort-button" mat-flat-button>Sort: {{sortExpression.join(", ")}}</button>