Yrkki/cv-generator-fe

<div role="search" class="mx-auto py-1">
  <div class="input-hint" id="Search{{ position }}-hint">{{ searchHistoryService.hintSearchString }}</div>
  <div class="form-horizontal d-flex">

    <input #searchTextElement class="form-control mr-sm-2 flex-grow-1 bd-highlight" type="search"
      id="Search{{ position }}" [ngModel]="SearchToken" (ngModelChange)="onFieldChange($event)"
      (keydown)="keydown($event)" [attr.aria-label]="ui['Search']?.text"
      [attr.aria-describedby]="'Search'+this.position+'-hint'" placeholder="{{ ui['Search']?.text }}"
      [attr.aria-labelledby]="uiService.label('searchTextElement' + position)" />
    <label [id]="uiService.label('searchTextElement' + position)" for="Search{{ position }}"></label>

    <header>
      <h1>
        <form class="form-inline toolbar">
          <button type="button" class="btn btn-square p-0 bd-highlight" [attr.aria-label]="ui['Search']?.text"
            #clickableSearch (keypress)="keypress($event)" (click)="search()" title="{{ ui['Search']?.text }}"
            [ngStyle]="InstantSearch ? {visibility: 'collapse', width: '0px'} : {visibility: 'visible', width: 'var(--button-size)'}">
            <ng-container aria-hidden="true"><em class="fas fa-search"></em></ng-container>
          </button>
          <button type="button" class="btn btn-square close p-0 bd-highlight"
            [attr.aria-label]="ui['Clear Search']?.text" #clickableClearSearch (keypress)="keypress($event)"
            (click)="clearSearch()" title="{{ ui['Clear Search']?.text }}">
            <ng-container aria-hidden="true">{{ ui['Delete']?.text }}</ng-container>
          </button>
          <button type="button" class="btn btn-square close p-0 bd-highlight text-danger"
            [attr.aria-label]="ui['Start All Over']?.text" #clickableStartAllOver (keypress)="keypress($event)"
            (click)="startAllOver()" title="{{ ui['Start All Over']?.text }}">
            <ng-container aria-hidden="true">{{ ui['Delete']?.text }}</ng-container>
          </button>

          <app-toolbar #toolbar [key]="position" [toggles]="[ToggleKind.InstantSearch,
            ToggleKind.Context, ToggleKind.Pagination, ToggleKind.Tinted,
            ToggleKind.Microprinted, ToggleKind.Captions, ToggleKind.Decorations, ToggleKind.EditMode,
            ToggleKind.ToolbarCollapsed]" (instantSearchModelChanged)="onInstantSearchToggled($event)"
            (tintedModelChanged)="uiService.tintedToggled$.emit($event)">
          </app-toolbar>
        </form>
      </h1>
    </header>
  </div>
</div>