@if (!searchVisible) {
  <button mat-icon-button class="search-toggle" (click)="open()" aria-label="Open search">
    <mat-icon>search</mat-icon>
  </button>
}
<div class="search-container" [class.search-container--visible]="searchVisible">
  <mat-icon class="search-leading-icon">search</mat-icon>
  <input #input type="text" [(ngModel)]="value" [placeholder]="placeholder()"
      (ngModelChange)="updateChanges()"
      (blur)="onBlurring(input.value)" (keyup.enter)="onEnterring(input.value)" (focus)="onFocussing(input.value)"
      autocapitalize="none" [tabindex]="searchVisible ? 0 : -1" />
  <button mat-icon-button class="search-close" (click)="close()" aria-label="Close search"
      [tabindex]="searchVisible ? 0 : -1">
    <mat-icon>close</mat-icon>
  </button>
</div>