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 -->
<ng-container *ngIf="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%' : '' }">
      <ng-container *ngIf="pagelet.hasParam('DisplayName'); else noDisplayName">
        {{ pagelet.stringParam('DisplayName') }}
      </ng-container>
      <ng-template #noDisplayName>
        {{ category.name }}
      </ng-template>
    </a>
 
    <ng-container *ngIf="showSubMenu(category.children?.length)">
      <a class="dropdown-toggle" (click)="toggleOpen(category.uniqueId)">
        <fa-icon *ngIf="isOpened(category.uniqueId); else closed" [icon]="['fas', 'minus']" />
        <ng-template #closed><fa-icon [icon]="['fas', 'plus']" /></ng-template>
      </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 }">
          <li
            *ngFor="let node of treeNode.children"
            class="main-navigation-level{{ depth }}-item"
            [ngClass]="{ open: isOpened(node.uniqueId) }"
          >
            <a [routerLink]="node.url" [ngStyle]="{ width: !node.children?.length ? '100%' : '' }">
              {{ node.name }}
            </a>
            <ng-container *ngIf="node.children?.length">
              <a class="dropdown-toggle" (click)="toggleOpen(node.uniqueId)">
                <fa-icon *ngIf="isOpened(node.uniqueId); else closed" [icon]="['fas', 'minus']" />
                <ng-template #closed><fa-icon [icon]="['fas', 'plus']" /></ng-template>
              </a>
              <ng-container
                [ngTemplateOutlet]="treeNodeTemplate"
                [ngTemplateOutletContext]="{ treeNode: node, depth: depth + 1 }"
              />
            </ng-container>
          </li>
 
          <li *ngIf="pagelet.hasParam('SubNavigationHTML') && depth === 1" class="sub-navigation-content">
            <div [ishServerHtml]="pagelet.stringParam('SubNavigationHTML')"></div>
          </li>
        </ul>
      </ng-template>
    </ng-container>
  </li>
</ng-container>