1 | import { Component, ViewEncapsulation, ChangeDetectorRef, Input, ChangeDetectionStrategy, NgModule } from '@angular/core';
|
2 | import { trigger, state, style, transition, animate } from '@angular/animations';
|
3 | import { CommonModule } from '@angular/common';
|
4 | import { RouterModule } from '@angular/router';
|
5 |
|
6 | class BasePanelMenuItem {
|
7 | constructor(ref) {
|
8 | this.ref = ref;
|
9 | }
|
10 | handleClick(event, item) {
|
11 | if (item.disabled) {
|
12 | event.preventDefault();
|
13 | return;
|
14 | }
|
15 | item.expanded = !item.expanded;
|
16 | this.ref.detectChanges();
|
17 | if (!item.url) {
|
18 | event.preventDefault();
|
19 | }
|
20 | if (item.command) {
|
21 | item.command({
|
22 | originalEvent: event,
|
23 | item: item
|
24 | });
|
25 | }
|
26 | }
|
27 | }
|
28 | class PanelMenuSub extends BasePanelMenuItem {
|
29 | constructor(ref) {
|
30 | super(ref);
|
31 | }
|
32 | }
|
33 | PanelMenuSub.decorators = [
|
34 | { type: Component, args: [{
|
35 | selector: 'p-panelMenuSub',
|
36 | template: `
|
37 | <ul [ngClass]="{'p-submenu-list': true, 'p-panelmenu-root-submenu': root}" [@submenu]="expanded ? {value: 'visible', params: {transitionParams: transitionOptions, height: '*'}} : {value: 'hidden', params: {transitionParams: transitionOptions, height: '0'}}" role="tree">
|
38 | <ng-template ngFor let-child [ngForOf]="item.items">
|
39 | <li *ngIf="child.separator" class="p-menu-separator" role="separator">
|
40 | <li *ngIf="!child.separator" class="p-menuitem" [ngClass]="child.styleClass" [class.p-hidden]="child.visible === false" [ngStyle]="child.style">
|
41 | <a *ngIf="!child.routerLink" [attr.href]="child.url" class="p-menuitem-link" [attr.tabindex]="!item.expanded ? null : child.disabled ? null : '0'" [attr.id]="child.id"
|
42 | [ngClass]="{'p-disabled':child.disabled}" role="treeitem" [attr.aria-expanded]="child.expanded"
|
43 | (click)="handleClick($event,child)" [attr.target]="child.target" [attr.title]="child.title">
|
44 | <span class="p-panelmenu-icon pi pi-fw" [ngClass]="{'pi-angle-right':!child.expanded,'pi-angle-down':child.expanded}" *ngIf="child.items"></span>
|
45 | <span class="p-menuitem-icon" [ngClass]="child.icon" *ngIf="child.icon"></span>
|
46 | <span class="p-menuitem-text" *ngIf="child.escape !== false; else htmlLabel">{{child.label}}</span>
|
47 | <ng-template #htmlLabel><span class="p-menuitem-text" [innerHTML]="child.label"></span></ng-template>
|
48 | </a>
|
49 | <a *ngIf="child.routerLink" [routerLink]="child.routerLink" [queryParams]="child.queryParams" [routerLinkActive]="'p-menuitem-link-active'" [routerLinkActiveOptions]="child.routerLinkActiveOptions||{exact:false}" class="p-menuitem-link"
|
50 | [ngClass]="{'p-disabled':child.disabled}" [attr.tabindex]="!item.expanded ? null : child.disabled ? null : '0'" [attr.id]="child.id" role="treeitem" [attr.aria-expanded]="child.expanded"
|
51 | (click)="handleClick($event,child)" [attr.target]="child.target" [attr.title]="child.title"
|
52 | [fragment]="child.fragment" [queryParamsHandling]="child.queryParamsHandling" [preserveFragment]="child.preserveFragment" [skipLocationChange]="child.skipLocationChange" [replaceUrl]="child.replaceUrl" [state]="child.state">
|
53 | <span class="p-panelmenu-icon pi pi-fw" [ngClass]="{'pi-angle-right':!child.expanded,'pi-angle-down':child.expanded}" *ngIf="child.items"></span>
|
54 | <span class="p-menuitem-icon" [ngClass]="child.icon" *ngIf="child.icon"></span>
|
55 | <span class="p-menuitem-text" *ngIf="child.escape !== false; else htmlRouteLabel">{{child.label}}</span>
|
56 | <ng-template #htmlRouteLabel><span class="p-menuitem-text" [innerHTML]="child.label"></span></ng-template>
|
57 | </a>
|
58 | <p-panelMenuSub [item]="child" [expanded]="child.expanded" [transitionOptions]="transitionOptions" *ngIf="child.items"></p-panelMenuSub>
|
59 | </li>
|
60 | </ng-template>
|
61 | </ul>
|
62 | `,
|
63 | animations: [
|
64 | trigger('submenu', [
|
65 | state('hidden', style({
|
66 | height: '0',
|
67 | overflow: 'hidden'
|
68 | })),
|
69 | state('visible', style({
|
70 | height: '*'
|
71 | })),
|
72 | transition('visible <=> hidden', [style({ overflow: 'hidden' }), animate('{{transitionParams}}')]),
|
73 | transition('void => *', animate(0))
|
74 | ])
|
75 | ],
|
76 | encapsulation: ViewEncapsulation.None
|
77 | },] }
|
78 | ];
|
79 | PanelMenuSub.ctorParameters = () => [
|
80 | { type: ChangeDetectorRef }
|
81 | ];
|
82 | PanelMenuSub.propDecorators = {
|
83 | item: [{ type: Input }],
|
84 | expanded: [{ type: Input }],
|
85 | transitionOptions: [{ type: Input }],
|
86 | root: [{ type: Input }]
|
87 | };
|
88 | class PanelMenu extends BasePanelMenuItem {
|
89 | constructor(ref) {
|
90 | super(ref);
|
91 | this.multiple = true;
|
92 | this.transitionOptions = '400ms cubic-bezier(0.86, 0, 0.07, 1)';
|
93 | }
|
94 | collapseAll() {
|
95 | for (let item of this.model) {
|
96 | if (item.expanded) {
|
97 | item.expanded = false;
|
98 | }
|
99 | }
|
100 | }
|
101 | handleClick(event, item) {
|
102 | if (!this.multiple) {
|
103 | for (let modelItem of this.model) {
|
104 | if (item !== modelItem && modelItem.expanded) {
|
105 | modelItem.expanded = false;
|
106 | }
|
107 | }
|
108 | }
|
109 | this.animating = true;
|
110 | super.handleClick(event, item);
|
111 | }
|
112 | onToggleDone() {
|
113 | this.animating = false;
|
114 | }
|
115 | }
|
116 | PanelMenu.decorators = [
|
117 | { type: Component, args: [{
|
118 | selector: 'p-panelMenu',
|
119 | template: `
|
120 | <div [class]="styleClass" [ngStyle]="style" [ngClass]="'p-panelmenu p-component'">
|
121 | <ng-container *ngFor="let item of model;let f=first;let l=last;">
|
122 | <div class="p-panelmenu-panel" [ngClass]="{'p-hidden': item.visible === false}">
|
123 | <div [ngClass]="{'p-component p-panelmenu-header':true, 'p-highlight':item.expanded,'p-disabled':item.disabled}" [class]="item.styleClass" [ngStyle]="item.style">
|
124 | <a *ngIf="!item.routerLink" [attr.href]="item.url" (click)="handleClick($event,item)" [attr.tabindex]="item.disabled ? null : '0'" [attr.id]="item.id"
|
125 | [attr.target]="item.target" [attr.title]="item.title" class="p-panelmenu-header-link" [attr.aria-expanded]="item.expanded" [attr.id]="item.id + '_header'" [attr.aria-controls]="item.id +'_content'">
|
126 | <span *ngIf="item.items" class="p-panelmenu-icon pi" [ngClass]="{'pi-chevron-right':!item.expanded,'pi-chevron-down':item.expanded}"></span>
|
127 | <span class="p-menuitem-icon" [ngClass]="item.icon" *ngIf="item.icon"></span>
|
128 | <span class="p-menuitem-text" *ngIf="item.escape !== false; else htmlLabel">{{item.label}}</span>
|
129 | <ng-template #htmlLabel><span class="p-menuitem-text" [innerHTML]="item.label"></span></ng-template>
|
130 | </a>
|
131 | <a *ngIf="item.routerLink" [routerLink]="item.routerLink" [queryParams]="item.queryParams" [routerLinkActive]="'p-menuitem-link-active'" [routerLinkActiveOptions]="item.routerLinkActiveOptions||{exact:false}"
|
132 | (click)="handleClick($event,item)" [attr.target]="item.target" [attr.title]="item.title" class="p-panelmenu-header-link" [attr.id]="item.id" [attr.tabindex]="item.disabled ? null : '0'"
|
133 | [fragment]="item.fragment" [queryParamsHandling]="item.queryParamsHandling" [preserveFragment]="item.preserveFragment" [skipLocationChange]="item.skipLocationChange" [replaceUrl]="item.replaceUrl" [state]="item.state">
|
134 | <span *ngIf="item.items" class="p-panelmenu-icon pi" [ngClass]="{'pi-chevron-right':!item.expanded,'pi-chevron-down':item.expanded}"></span>
|
135 | <span class="p-menuitem-icon" [ngClass]="item.icon" *ngIf="item.icon"></span>
|
136 | <span class="p-menuitem-text" *ngIf="item.escape !== false; else htmlRouteLabel">{{item.label}}</span>
|
137 | <ng-template #htmlRouteLabel><span class="p-menuitem-text" [innerHTML]="item.label"></span></ng-template>
|
138 | </a>
|
139 | </div>
|
140 | <div *ngIf="item.items" class="p-toggleable-content" [@rootItem]="item.expanded ? {value: 'visible', params: {transitionParams: animating ? transitionOptions : '0ms', height: '*'}} : {value: 'hidden', params: {transitionParams: transitionOptions, height: '0'}}" (@rootItem.done)="onToggleDone()">
|
141 | <div class="p-panelmenu-content" role="region" [attr.id]="item.id +'_content' " [attr.aria-labelledby]="item.id +'_header'">
|
142 | <p-panelMenuSub [item]="item" [expanded]="true" [transitionOptions]="transitionOptions" [root]="true"></p-panelMenuSub>
|
143 | </div>
|
144 | </div>
|
145 | </div>
|
146 | </ng-container>
|
147 | </div>
|
148 | `,
|
149 | animations: [
|
150 | trigger('rootItem', [
|
151 | state('hidden', style({
|
152 | height: '0',
|
153 | overflow: 'hidden'
|
154 | })),
|
155 | state('visible', style({
|
156 | height: '*'
|
157 | })),
|
158 | transition('visible <=> hidden', [style({ overflow: 'hidden' }), animate('{{transitionParams}}')]),
|
159 | transition('void => *', animate(0))
|
160 | ])
|
161 | ],
|
162 | changeDetection: ChangeDetectionStrategy.OnPush,
|
163 | encapsulation: ViewEncapsulation.None,
|
164 | styles: [".p-panelmenu .p-panelmenu-header-link{-moz-user-select:none;-ms-flex-align:center;-ms-user-select:none;-webkit-user-select:none;align-items:center;cursor:pointer;display:-ms-flexbox;display:flex;position:relative;text-decoration:none;user-select:none}.p-panelmenu .p-panelmenu-header-link:focus{z-index:1}.p-panelmenu .p-submenu-list{list-style:none;margin:0;padding:0}.p-panelmenu .p-menuitem-link{-moz-user-select:none;-ms-flex-align:center;-ms-user-select:none;-webkit-user-select:none;align-items:center;cursor:pointer;display:-ms-flexbox;display:flex;text-decoration:none;user-select:none}.p-panelmenu .p-menuitem-text{line-height:1}"]
|
165 | },] }
|
166 | ];
|
167 | PanelMenu.ctorParameters = () => [
|
168 | { type: ChangeDetectorRef }
|
169 | ];
|
170 | PanelMenu.propDecorators = {
|
171 | model: [{ type: Input }],
|
172 | style: [{ type: Input }],
|
173 | styleClass: [{ type: Input }],
|
174 | multiple: [{ type: Input }],
|
175 | transitionOptions: [{ type: Input }]
|
176 | };
|
177 | class PanelMenuModule {
|
178 | }
|
179 | PanelMenuModule.decorators = [
|
180 | { type: NgModule, args: [{
|
181 | imports: [CommonModule, RouterModule],
|
182 | exports: [PanelMenu, RouterModule],
|
183 | declarations: [PanelMenu, PanelMenuSub]
|
184 | },] }
|
185 | ];
|
186 |
|
187 |
|
188 |
|
189 |
|
190 |
|
191 | export { BasePanelMenuItem, PanelMenu, PanelMenuModule, PanelMenuSub };
|
192 |
|