All files / src/app/shared/cms/components/cms-navigation-category cms-navigation-category.component.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
1x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
<!-- eslint-disable @angular-eslint/template/interactive-supports-focus -->
<!-- eslint-disable @angular-eslint/template/click-events-have-key-events -->
@if (categoryTree$ | async; as category) {
<li
  #subMenu
  [class]="'dropdown ' + pagelet.stringParam('CSSClass', '')"
  [ngClass]="{ open: isOpened(category.uniqueId) }"
  (mouseenter)="subMenuShow(subMenu)"
  (mouseleave)="subMenuHide(subMenu)"
  (click)="subMenuHide(subMenu)"
>
  <a [routerLink]="category.url" [ngStyle]="{ width: !showSubMenu(category.children?.length) ? '100%' : '' }">
    @if (pagelet.hasParam('DisplayName')) {
    {{ pagelet.stringParam('DisplayName') }}
    } @else {
    {{ category.name }}
    }
  </a>
 
  @if (showSubMenu(category.children?.length)) {
  <a class="dropdown-toggle" (click)="toggleOpen(category.uniqueId)">
    @if (isOpened(category.uniqueId)) {
    <i class="bi bi-dash"></i>
    } @else {
    <i class="bi bi-plus"></i>
    }
  </a>
 
  <ng-container [ngTemplateOutlet]="treeNodeTemplate" [ngTemplateOutletContext]="{ treeNode: category, depth: 1 }" />
 
  <!-- the recursively used template to render the tree nodes -->
  <ng-template #treeNodeTemplate let-treeNode="treeNode" let-depth="depth">
    <ul class="category-level{{ depth }}" [ngClass]="{ 'dropdown-menu': depth === 1 }">
      @for (node of treeNode.children; track node.uniqueId) {
      <li class="main-navigation-level{{ depth }}-item" [ngClass]="{ open: isOpened(node.uniqueId) }">
        <a [routerLink]="node.url" [ngStyle]="{ width: !node.children?.length ? '100%' : '' }">
          {{ node.name }}
        </a>
        @if (node.children?.length) {
        <a class="dropdown-toggle" (click)="toggleOpen(node.uniqueId)">
          @if (isOpened(node.uniqueId)) {
          <i class="bi bi-dash"></i>
          } @else {
          <i class="bi bi-plus"></i>
          }
        </a>
        <ng-container
          [ngTemplateOutlet]="treeNodeTemplate"
          [ngTemplateOutletContext]="{ treeNode: node, depth: depth + 1 }"
        />
        }
      </li>
      } @if (pagelet.hasParam('SubNavigationHTML') && depth === 1) {
      <li class="sub-navigation-content">
        <div [ishServerHtml]="pagelet.stringParam('SubNavigationHTML')"></div>
      </li>
      }
    </ul>
  </ng-template>
  }
</li>
}