next-ucap-messenger/projects/ucap-webmessenger-ui-chat/src/lib/components/search.component.html

<div fxFlex fxLayout="row" class="chatroom-search">
  <div fxLayout="row" fxLayoutAlign="start center" class="input input-lineless search-form">
    <form [formGroup]="fgSearch">
      <span class="icon-img">
        <i class="mid mdi-magnify"></i>
      </span>
      <mat-form-field floatLabel="never">
        <input
          matInput
          #inputSearch
          type="text"
          placeholder="{{ 'chat.searchEventByText' | translate }}"
          value=""
          formControlName="searchInput"
          (keydown.enter)="onKeyDownEnter($event, inputSearch.value)"
        />
        <button
          mat-button
          matSuffix
          mat-icon-button
          aria-label="Clear"
          *ngIf="inputSearch.value"
          (click)="inputSearch.value = ''"
        >
          <mat-icon>close</mat-icon>
        </button>
      </mat-form-field>
      <span class="text-amount">{{ curIndex }} / {{ totalCount }}</span>
    </form>
  </div>
  <span class="stroke-bar"></span>
  <div class="btns">
    <button
      *ngIf="false"
      mat-stroked-button
      (click)="onClickSearchAndPrev()"
      class="btn-toggle"
    >
      <i class="mid mdi-arrow-up"></i>
    </button>
    <button class="icon-button btn-search" (click)="onClickPrevSearch()">
      <i class="mid mdi-arrow-up"></i>
    </button>
    <button class="icon-button btn-search" (click)="onClickNextSearch()">
      <i class="mid mdi-arrow-down"></i>
    </button>

    <!--<mat-button-toggle-group>
      <mat-button-toggle></mat-button-toggle>
      <mat-button-toggle >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="24"
          height="24"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
          class="feather feather-arrow-up"
        >
          <line x1="12" y1="19" x2="12" y2="5"></line>
          <polyline points="5 12 12 5 19 12"></polyline>
        </svg>
      </mat-button-toggle>
      <mat-button-toggle ></mat-button-toggle>
    </mat-button-toggle-group>-->
    <button
      class="icon-button btn-close-searchbox bg-accent-dark"
      (click)="inputSearch.value = ''; onClickSearchCancel()"
    >
      <i class="mid mdi-window-close"></i>
    </button>
  </div>
</div>