103 lines
3.5 KiB
HTML
103 lines
3.5 KiB
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="filter-button"
|
|
(click)="clearFilter()"
|
|
[attr.aria-pressed]="!hasActiveFilter"
|
|
>
|
|
<h2> {{ 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)"
|
|
[attr.aria-pressed]="activeFilter.myVaultOnly"
|
|
>
|
|
<i class="bwi bwi-fw bwi-business" aria-hidden="true"></i>
|
|
{{ organization.name }}
|
|
</button>
|
|
</span>
|
|
</li>
|
|
</ul>
|
|
</ng-container>
|
|
<ng-container *ngSwitchDefault>
|
|
<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="filter-button" (click)="clearFilter()">
|
|
<h2> {{ 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()"
|
|
[attr.aria-pressed]="activeFilter.myVaultOnly"
|
|
>
|
|
<i class="bwi bwi-fw bwi-user" aria-hidden="true"></i>
|
|
{{ "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)"
|
|
[attr.aria-pressed]="activeFilter.selectedOrganizationId === organization.id"
|
|
>
|
|
<i class="bwi bwi-fw bwi-business" aria-hidden="true"></i>
|
|
{{ organization.name }}
|
|
</button>
|
|
</span>
|
|
</li>
|
|
</ul>
|
|
</ng-container>
|
|
</ng-container>
|
|
<hr />
|
|
</ng-container>
|