75 lines
2.4 KiB
HTML
75 lines
2.4 KiB
HTML
<ng-container *ngIf="show">
|
|
<div class="filter-heading">
|
|
<button
|
|
(click)="toggleCollapse(collectionsGrouping)"
|
|
[attr.aria-expanded]="!isCollapsed(collectionsGrouping)"
|
|
aria-controls="collection-filters"
|
|
title="{{ 'toggleCollapse' | i18n }}"
|
|
class="toggle-button"
|
|
>
|
|
<i
|
|
class="bwi bwi-fw"
|
|
[ngClass]="{
|
|
'bwi-angle-right': isCollapsed(collectionsGrouping),
|
|
'bwi-angle-down': !isCollapsed(collectionsGrouping)
|
|
}"
|
|
aria-hidden="true"
|
|
></i>
|
|
</button>
|
|
<h3 class="filter-title"> {{ collectionsGrouping.name | i18n }}</h3>
|
|
</div>
|
|
<ul id="collection-filters" *ngIf="!isCollapsed(collectionsGrouping)" class="filter-options">
|
|
<ng-template #recursiveCollections let-collections>
|
|
<li
|
|
*ngFor="let c of collections"
|
|
[ngClass]="{
|
|
active: c.node.id === activeFilter.selectedCollectionId
|
|
}"
|
|
class="filter-option"
|
|
>
|
|
<span class="filter-buttons">
|
|
<button
|
|
class="toggle-button"
|
|
*ngIf="c.children.length"
|
|
(click)="toggleCollapse(c.node)"
|
|
title="{{ 'toggleCollapse' | i18n }}"
|
|
[attr.aria-expanded]="!isCollapsed(c.node)"
|
|
[attr.aria-controls]="c.node.name + '_children'"
|
|
>
|
|
<i
|
|
class="bwi bwi-fw"
|
|
[ngClass]="{
|
|
'bwi-angle-right': isCollapsed(c.node),
|
|
'bwi-angle-down': !isCollapsed(c.node)
|
|
}"
|
|
aria-hidden="true"
|
|
></i>
|
|
</button>
|
|
<button class="filter-button" (click)="applyFilter(c.node)">
|
|
<i
|
|
*ngIf="c.children.length === 0"
|
|
class="bwi bwi-collection bwi-fw"
|
|
aria-hidden="true"
|
|
></i
|
|
> {{ c.node.name }}
|
|
</button>
|
|
</span>
|
|
<ul
|
|
[id]="c.node.name + '_children'"
|
|
class="nested-filter-options"
|
|
*ngIf="c.children.length && !isCollapsed(c.node)"
|
|
>
|
|
<ng-container
|
|
*ngTemplateOutlet="recursiveCollections; context: { $implicit: c.children }"
|
|
>
|
|
</ng-container>
|
|
</ul>
|
|
</li>
|
|
</ng-template>
|
|
<ng-container
|
|
*ngTemplateOutlet="recursiveCollections; context: { $implicit: nestedCollections }"
|
|
>
|
|
</ng-container>
|
|
</ul>
|
|
</ng-container>
|