bitwarden-desktop/src/app/modules/vault-filter/components/type-filter.component.html

<div class="filter-heading">
  <button
    class="no-btn"
    (click)="toggleCollapse()"
    aria-expanded="!isCollapsed"
    aria-controls="type-filters"
    appA11yTitle="{{ 'toggleCollapse' | i18n }}"
  >
    <i
      class="bwi bwi-fw"
      aria-hidden="true"
      [ngClass]="{
        'bwi-angle-right': isCollapsed,
        'bwi-angle-down': !isCollapsed
      }"
    ></i>
  </button>
  <h2>&nbsp;{{ typesNode.name | i18n }}</h2>
</div>
<ul id="type-filters" *ngIf="!isCollapsed" class="filter-options">
  <li
    class="filter-option"
    [ngClass]="{ active: activeFilter.cipherType === cipherTypeEnum.Login }"
  >
    <span class="filter-buttons">
      <button
        class="filter-button"
        (click)="applyFilter(cipherTypeEnum.Login)"
        [attr.aria-pressed]="activeFilter.selectedType === cipherTypeEnum.Login"
      >
        <i class="bwi bwi-fw bwi-globe" aria-hidden="true"></i>&nbsp;{{ "typeLogin" | i18n }}
      </button>
    </span>
  </li>
  <li class="filter-option" [ngClass]="{ active: activeFilter.cipherType === cipherTypeEnum.Card }">
    <span class="filter-buttons">
      <button
        class="filter-button"
        (click)="applyFilter(cipherTypeEnum.Card)"
        [attr.aria-pressed]="activeFilter.selectedType === cipherTypeEnum.Card"
      >
        <i class="bwi bwi-fw bwi-credit-card" aria-hidden="true"></i>&nbsp;{{ "typeCard" | i18n }}
      </button>
    </span>
  </li>
  <li
    class="filter-option"
    [ngClass]="{ active: activeFilter.cipherType === cipherTypeEnum.Identity }"
  >
    <span class="filter-buttons">
      <button
        class="filter-button"
        (click)="applyFilter(cipherTypeEnum.Identity)"
        [attr.aria-pressed]="activeFilter.selectedType === cipherTypeEnum.Identity"
      >
        <i class="bwi bwi-fw bwi-id-card" aria-hidden="true"></i>&nbsp;{{ "typeIdentity" | i18n }}
      </button>
    </span>
  </li>
  <li
    class="filter-option"
    [ngClass]="{ active: activeFilter.cipherType === cipherTypeEnum.SecureNote }"
  >
    <span class="filter-buttons">
      <button
        class="filter-button"
        (click)="applyFilter(cipherTypeEnum.SecureNote)"
        [attr.aria-pressed]="activeFilter.selectedType === cipherTypeEnum.SecureNote"
      >
        <i class="bwi bwi-fw bwi-sticky-note" aria-hidden="true"></i>&nbsp;{{
          "typeSecureNote" | i18n
        }}
      </button>
    </span>
  </li>
</ul>