82 lines
2.6 KiB
HTML
82 lines
2.6 KiB
HTML
<ng-container *ngIf="show">
|
|
<div class="filter-heading">
|
|
<h2>
|
|
<button
|
|
type="button"
|
|
class="no-btn"
|
|
[attr.aria-expanded]="!isCollapsed(collectionsGrouping)"
|
|
aria-controls="collection-filters"
|
|
(click)="toggleCollapse(collectionsGrouping)"
|
|
>
|
|
<i
|
|
class="bwi bwi-fw"
|
|
aria-hidden="true"
|
|
[ngClass]="{
|
|
'bwi-angle-right': isCollapsed(collectionsGrouping),
|
|
'bwi-angle-down': !isCollapsed(collectionsGrouping)
|
|
}"
|
|
></i>
|
|
{{ collectionsGrouping.name | i18n }}
|
|
</button>
|
|
</h2>
|
|
</div>
|
|
<ul id="collection-filters" *ngIf="!isCollapsed(collectionsGrouping)" class="filter-options">
|
|
<ng-template #recursiveCollections let-collections>
|
|
<li
|
|
class="filter-option"
|
|
*ngFor="let c of collections"
|
|
[ngClass]="{ active: c.node.id === activeFilter.selectedCollectionId }"
|
|
>
|
|
<span class="filter-buttons">
|
|
<button
|
|
type="button"
|
|
*ngIf="c.children.length"
|
|
class="toggle-button"
|
|
[attr.aria-expanded]="!isCollapsed(c.node)"
|
|
[attr.aria-controls]="c.node.name + '_children'"
|
|
(click)="toggleCollapse(c.node)"
|
|
appA11yTitle="{{ 'toggleCollapse' | i18n }} {{ c.node.name }}"
|
|
>
|
|
<i
|
|
class="bwi bwi-fw"
|
|
aria-hidden="true"
|
|
[ngClass]="{
|
|
'bwi-angle-right': isCollapsed(c.node),
|
|
'bwi-angle-down': !isCollapsed(c.node)
|
|
}"
|
|
></i>
|
|
</button>
|
|
<button
|
|
type="button"
|
|
class="filter-button"
|
|
(click)="applyFilter(c.node)"
|
|
[attr.aria-pressed]="c.node.id === activeFilter.selectedCollectionId"
|
|
[title]="c.node.name"
|
|
>
|
|
<i
|
|
*ngIf="c.children.length === 0"
|
|
class="bwi bwi-fw bwi-collection"
|
|
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>
|