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
64
65
66
67
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) }"
    (click)="subMenuHide(subMenu)"
    (mouseenter)="subMenuShow(subMenu)"
    (mouseleave)="subMenuHide(subMenu)"
  >
    <a [ngStyle]="{ width: !showSubMenu(category.children?.length) ? '100%' : '' }" [routerLink]="category.url">
      @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-depth="depth" let-treeNode="treeNode">
        <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 [ngStyle]="{ width: !node.children?.length ? '100%' : '' }" [routerLink]="node.url">
                {{ 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>
}