All files / src/app/shared/cms/components/cms-navigation-page cms-navigation-page.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 (pageTree$ | async; as page) {
<li
  #subMenu
  [class]="'dropdown ' + pagelet.stringParam('CSSClass', '')"
  [ngClass]="{ open: isOpened(page.contentPageId) }"
  (mouseenter)="subMenuShow(subMenu)"
  (mouseleave)="subMenuHide(subMenu)"
  (click)="subMenuHide(subMenu)"
>
  <a [routerLink]="page | ishContentPageRoute" [ngStyle]="{ width: !showSubMenu(page.children.length) ? '100%' : '' }">
    @if (pagelet.hasParam('DisplayName')) {
    {{ pagelet.stringParam('DisplayName') }}
    } @else {
    {{ page.name }}
    }
  </a>
 
  @if (showSubMenu(page.children.length)) {
  <a class="dropdown-toggle" (click)="toggleOpen(page.contentPageId)">
    @if (isOpened(page.contentPageId)) {
    <i class="bi bi-dash"></i>
    } @else {
    <i class="bi bi-plus"></i>
    }
  </a>
 
  <ng-container [ngTemplateOutlet]="treeNodeTemplate" [ngTemplateOutletContext]="{ treeNode: page, 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.contentPageId) {
      <li class="main-navigation-level{{ depth }}-item" [ngClass]="{ open: isOpened(node.contentPageId) }">
        <a [routerLink]="node | ishContentPageRoute" [ngStyle]="{ width: !node.children.length ? '100%' : '' }">
          {{ node.name }}
        </a>
        @if (node.children.length) {
        <a class="dropdown-toggle" (click)="toggleOpen(node.contentPageId)">
          @if (isOpened(node.contentPageId)) {
          <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>
}