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 mdi-chevron-up"></i>
    </button>
    <button class="icon-button btn-search" (click)="onClickNextSearch()">
      <i class="mid mdi-arrow-down mdi-chevron-down"></i>
    </button>
    <button
      class="icon-button btn-close-searchbox bg-accent-dark"
      (click)="inputSearch.value = ''; onClickSearchCancel()"
    >
      <i class="mid mdi-window-close"></i>
    </button>
  </div>
</div>-->
<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-chevron-up"></i>
    </button>
    <button class="icon-button btn-search" (click)="onClickNextSearch()">
      <i class="mid mdi-chevron-down"></i>
    </button>
    <button
      class="icon-button btn-close-searchbox bg-accent-dark"
      (click)="inputSearch.value = ''; onClickSearchCancel()"
    >
      <i class="mid mdi-window-close"></i>
    </button>
  </div>
</div>