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 search-form">
    <form [formGroup]="fgSearch">
      <i class="material-icons icon-search"> </i>
      <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"
          (click)="inputSearch.value = ''; onClickSearchCancel()"
        >
        -->
        <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"
    >
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="20"
        height="20"
        viewBox="0 0 20 20"
        fill="none"
        stroke="currentColor"
        stroke-width="1.5"
        stroke-linecap="round"
        stroke-linejoin="round"
        class="feather feather-arrow-up"
      >
        <path d="M3.3,9v6.7c0,0.9,0.7,1.7,1.7,1.7h10c0.9,0,1.7-0.7,1.7-1.7V9" />
        <polyline class="st0" points="13.3,6 10,2.7 6.7,6 " />
        <line class="st0" x1="10" y1="2.7" x2="10" y2="12.5" />
      </svg>
    </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>