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

<ng-container *ngIf="show">
  <ng-container [ngSwitch]="displayMode">
    <ng-container *ngSwitchCase="'personalOwnershipPolicy'">
      <div class="filter-heading" [ngClass]="{ active: !hasActiveFilter }">
        <button
          class="toggle-button"
          appA11yTitle="{{ 'toggleCollapse' | i18n }}"
          (click)="toggleCollapse()"
          [attr.aria-expanded]="!isCollapsed"
          aria-controls="organization-filters"
        >
          <i
            class="bwi bwi-fw"
            aria-hidden="true"
            [ngClass]="{
              'bwi-angle-right': isCollapsed,
              'bwi-angle-down': !isCollapsed
            }"
          ></i>
        </button>
        <button
          class="no-btn"
          (click)="clearFilter()"
          appA11yTitle="{{ 'filterAllVaults' | i18n }}"
        >
          <h2>&nbsp;{{ organizationGrouping.name | i18n }}</h2>
        </button>
      </div>
      <ul id="organization-filters" *ngIf="!isCollapsed" class="filter-options no-margin">
        <li
          class="filter-option"
          *ngFor="let organization of organizations"
          [ngClass]="{ active: organization.id === activeFilter.selectedOrganizationId }"
        >
          <span class="filter-buttons">
            <button
              class="filter-button"
              (click)="applyOrganizationFilter(organization)"
              appA11yTitle="{{ 'applyFilter' | i18n }}"
            >
              <i class="bwi bwi-fw bwi-business" aria-hidden="true"></i>
              &nbsp;{{ organization.name }}
            </button>
          </span>
        </li>
      </ul>
    </ng-container>
    <ng-container *ngSwitchCase="'organizationMember'">
      <div class="filter-heading" [ngClass]="{ active: !hasActiveFilter }">
        <button
          appA11yTitle="{{ 'toggleCollapse' | i18n }}"
          (click)="toggleCollapse()"
          [attr.aria-expanded]="!isCollapsed"
          aria-controls="organization-filters"
        >
          <i
            class="bwi bwi-fw"
            aria-hidden="true"
            [ngClass]="{
              'bwi-angle-right': isCollapsed,
              'bwi-angle-down': !isCollapsed
            }"
          ></i>
        </button>
        <button
          class="no-btn"
          (click)="clearFilter()"
          appA11yTitle="{{ 'filterAllVaults' | i18n }}"
        >
          <h2>&nbsp;{{ organizationGrouping.name | i18n }}</h2>
        </button>
      </div>
      <ul id="organization-filters" *ngIf="!isCollapsed" class="filter-options no-margin">
        <li class="filter-option" [ngClass]="{ active: activeFilter.myVaultOnly }">
          <span class="filter-buttons">
            <button
              class="filter-button"
              (click)="applyMyVaultFilter()"
              appA11yTitle="{{ 'applyFilter' | i18n }}"
            >
              <i class="bwi bwi-fw bwi-user" aria-hidden="true"></i>
              &nbsp;{{ "myVault" | i18n }}
            </button>
          </span>
        </li>
        <li
          class="filter-option"
          *ngFor="let organization of organizations"
          [ngClass]="{ active: organization.id === activeFilter.selectedOrganizationId }"
        >
          <span class="filter-buttons">
            <button
              class="filter-button"
              (click)="applyOrganizationFilter(organization)"
              appA11yTitle="{{ 'applyFilter' | i18n }}"
            >
              <i class="bwi bwi-fw bwi-business" aria-hidden="true"></i>
              &nbsp;{{ organization.name }}
            </button>
          </span>
        </li>
      </ul>
    </ng-container>
  </ng-container>
  <hr />
</ng-container>