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" class="w-100-p">
      <mat-form-field floatLabel="never">
        <input
          matInput
          #inputSearch
          type="text"
          placeholder="대화방 내용 검색"
          value=""
          formControlName="searchInput"
          (keydown.enter)="onKeyDownEnter($event, inputSearch.value)"
        />
        <button
          mat-button
          matSuffix
          mat-icon-button
          aria-label="Clear"
          (click)="inputSearch.value = ''; onClickSearchCancel()"
        >
          <mat-icon>close</mat-icon>
        </button>
      </mat-form-field>
      <span class="text-amount">{{ curIndex }} / {{ totalCount }}</span>
    </form>
  </div>
  <div class="btns">
    <button
      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 mat-stroked-button (click)="onClickPrevSearch()" 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="2"
        stroke-linecap="round"
        stroke-linejoin="round"
        class="feather feather-arrow-up"
      >
        <line class="st0" x1="10" y1="15.8" x2="10" y2="4.2" />
        <polyline class="st0" points="4.2,10 10,4.2 15.8,10 " />
      </svg>
    </button>
    <button mat-stroked-button (click)="onClickNextSearch()" 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="2"
        stroke-linecap="round"
        stroke-linejoin="round"
        class="feather feather-arrow-up"
      >
        <line class="st0" x1="10" y1="4.2" x2="10" y2="15.8" />
        <polyline class="st0" points="15.8,10 10,15.8 4.2,10 " />
      </svg>
    </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>-->
  </div>
</div>