primeng
Version:
[](https://opensource.org/licenses/MIT) [](https://badge.fury.io/js/primeng) [ • 11.4 kB
JavaScript
import { ChangeDetectorRef, Input, Component, ChangeDetectionStrategy, NgModule } from '@angular/core';
import { trigger, state, style, transition, animate } from '@angular/animations';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
class BasePanelMenuItem {
constructor(ref) {
this.ref = ref;
}
handleClick(event, item) {
if (item.disabled) {
event.preventDefault();
return;
}
item.expanded = !item.expanded;
this.ref.detectChanges();
if (!item.url) {
event.preventDefault();
}
if (item.command) {
item.command({
originalEvent: event,
item: item
});
}
}
}
let PanelMenuSub = class PanelMenuSub extends BasePanelMenuItem {
constructor(ref) {
super(ref);
}
};
PanelMenuSub.ctorParameters = () => [
{ type: ChangeDetectorRef }
];
__decorate([
Input()
], PanelMenuSub.prototype, "item", void 0);
__decorate([
Input()
], PanelMenuSub.prototype, "expanded", void 0);
__decorate([
Input()
], PanelMenuSub.prototype, "transitionOptions", void 0);
PanelMenuSub = __decorate([
Component({
selector: 'p-panelMenuSub',
template: `
<ul class="ui-submenu-list" [@submenu]="expanded ? {value: 'visible', params: {transitionParams: transitionOptions, height: '*'}} : {value: 'hidden', params: {transitionParams: transitionOptions, height: '0'}}" role="tree">
<ng-template ngFor let-child [ngForOf]="item.items">
<li *ngIf="child.separator" class="ui-menu-separator ui-widget-content" role="separator">
<li *ngIf="!child.separator" class="ui-menuitem ui-corner-all" [ngClass]="child.styleClass" [class.ui-helper-hidden]="child.visible === false" [ngStyle]="child.style">
<a *ngIf="!child.routerLink" [href]="child.url||'#'" class="ui-menuitem-link ui-corner-all" [attr.tabindex]="item.expanded ? null : child.tabindex ? child.tabindex : '-1'" [attr.id]="child.id"
[ngClass]="{'ui-state-disabled':child.disabled, 'ui-state-active': child.expanded}" role="treeitem" [attr.aria-expanded]="child.expanded"
(click)="handleClick($event,child)" [attr.target]="child.target" [attr.title]="child.title">
<span class="ui-panelmenu-icon pi pi-fw" [ngClass]="{'pi-caret-right':!child.expanded,'pi-caret-down':child.expanded}" *ngIf="child.items"></span
><span class="ui-menuitem-icon" [ngClass]="child.icon" *ngIf="child.icon"></span
><span class="ui-menuitem-text">{{child.label}}</span>
</a>
<a *ngIf="child.routerLink" [routerLink]="child.routerLink" [queryParams]="child.queryParams" [routerLinkActive]="'ui-menuitem-link-active'" [routerLinkActiveOptions]="child.routerLinkActiveOptions||{exact:false}" class="ui-menuitem-link ui-corner-all"
[ngClass]="{'ui-state-disabled':child.disabled}" [attr.tabindex]="item.expanded ? null : child.tabindex ? child.tabindex : '-1'" [attr.id]="child.id" role="treeitem" [attr.aria-expanded]="child.expanded"
(click)="handleClick($event,child)" [attr.target]="child.target" [attr.title]="child.title"
[fragment]="child.fragment" [queryParamsHandling]="child.queryParamsHandling" [preserveFragment]="child.preserveFragment" [skipLocationChange]="child.skipLocationChange" [replaceUrl]="child.replaceUrl" [state]="child.state">
<span class="ui-panelmenu-icon pi pi-fw" [ngClass]="{'pi-caret-right':!child.expanded,'pi-caret-down':child.expanded}" *ngIf="child.items"></span
><span class="ui-menuitem-icon" [ngClass]="child.icon" *ngIf="child.icon"></span
><span class="ui-menuitem-text">{{child.label}}</span>
</a>
<p-panelMenuSub [item]="child" [expanded]="child.expanded" [transitionOptions]="transitionOptions" *ngIf="child.items"></p-panelMenuSub>
</li>
</ng-template>
</ul>
`,
animations: [
trigger('submenu', [
state('hidden', style({
height: '0px'
})),
state('void', style({
height: '{{height}}'
}), { params: { height: '0' } }),
state('visible', style({
height: '*'
})),
transition('visible => hidden', animate('{{transitionParams}}')),
transition('hidden => visible', animate('{{transitionParams}}')),
transition('void => hidden', animate('{{transitionParams}}')),
transition('void => visible', animate('{{transitionParams}}'))
])
]
})
], PanelMenuSub);
let PanelMenu = class PanelMenu extends BasePanelMenuItem {
constructor(ref) {
super(ref);
this.multiple = true;
this.transitionOptions = '400ms cubic-bezier(0.86, 0, 0.07, 1)';
}
collapseAll() {
for (let item of this.model) {
if (item.expanded) {
item.expanded = false;
}
}
}
handleClick(event, item) {
if (!this.multiple) {
for (let modelItem of this.model) {
if (item !== modelItem && modelItem.expanded) {
modelItem.expanded = false;
}
}
}
this.animating = true;
super.handleClick(event, item);
}
onToggleDone() {
this.animating = false;
}
};
PanelMenu.ctorParameters = () => [
{ type: ChangeDetectorRef }
];
__decorate([
Input()
], PanelMenu.prototype, "model", void 0);
__decorate([
Input()
], PanelMenu.prototype, "style", void 0);
__decorate([
Input()
], PanelMenu.prototype, "styleClass", void 0);
__decorate([
Input()
], PanelMenu.prototype, "multiple", void 0);
__decorate([
Input()
], PanelMenu.prototype, "transitionOptions", void 0);
PanelMenu = __decorate([
Component({
selector: 'p-panelMenu',
template: `
<div [class]="styleClass" [ngStyle]="style" [ngClass]="'ui-panelmenu ui-widget'">
<ng-container *ngFor="let item of model;let f=first;let l=last;">
<div class="ui-panelmenu-panel" [ngClass]="{'ui-helper-hidden': item.visible === false}">
<div [ngClass]="{'ui-widget ui-panelmenu-header ui-state-default':true,'ui-corner-top':f,'ui-corner-bottom':l&&!item.expanded,
'ui-state-active':item.expanded,'ui-state-disabled':item.disabled}" [class]="item.styleClass" [ngStyle]="item.style">
<a *ngIf="!item.routerLink" [href]="item.url||'#'" (click)="handleClick($event,item)" [attr.tabindex]="item.tabindex ? item.tabindex : '0'" [attr.id]="item.id"
[attr.target]="item.target" [attr.title]="item.title" class="ui-panelmenu-header-link" [attr.aria-expanded]="item.expanded" [attr.id]="item.id + '_header'" [attr.aria-controls]="item.id +'_content'">
<span *ngIf="item.items" class="ui-panelmenu-icon pi pi-fw" [ngClass]="{'pi-chevron-right':!item.expanded,'pi-chevron-down':item.expanded}"></span
><span class="ui-menuitem-icon" [ngClass]="item.icon" *ngIf="item.icon"></span
><span class="ui-menuitem-text">{{item.label}}</span>
</a>
<a *ngIf="item.routerLink" [routerLink]="item.routerLink" [queryParams]="item.queryParams" [routerLinkActive]="'ui-menuitem-link-active'" [routerLinkActiveOptions]="item.routerLinkActiveOptions||{exact:false}"
(click)="handleClick($event,item)" [attr.target]="item.target" [attr.title]="item.title" class="ui-panelmenu-header-link" [attr.id]="item.id" [attr.tabindex]="item.tabindex ? item.tabindex : '0'"
[fragment]="item.fragment" [queryParamsHandling]="item.queryParamsHandling" [preserveFragment]="item.preserveFragment" [skipLocationChange]="item.skipLocationChange" [replaceUrl]="item.replaceUrl" [state]="item.state">
<span *ngIf="item.items" class="ui-panelmenu-icon pi pi-fw" [ngClass]="{'pi-chevron-right':!item.expanded,'pi-chevron-down':item.expanded}"></span
><span class="ui-menuitem-icon" [ngClass]="item.icon" *ngIf="item.icon"></span
><span class="ui-menuitem-text">{{item.label}}</span>
</a>
</div>
<div *ngIf="item.items" class="ui-panelmenu-content-wrapper" [@rootItem]="item.expanded ? {value: 'visible', params: {transitionParams: animating ? transitionOptions : '0ms', height: '*'}} : {value: 'hidden', params: {transitionParams: transitionOptions, height: '0'}}" (@rootItem.done)="onToggleDone()"
[ngClass]="{'ui-panelmenu-content-wrapper-overflown': !item.expanded||animating}">
<div class="ui-panelmenu-content ui-widget-content" role="region" [attr.id]="item.id +'_content' " [attr.aria-labelledby]="item.id +'_header'">
<p-panelMenuSub [item]="item" [expanded]="true" [transitionOptions]="transitionOptions" class="ui-panelmenu-root-submenu"></p-panelMenuSub>
</div>
</div>
</div>
</ng-container>
</div>
`,
animations: [
trigger('rootItem', [
state('hidden', style({
height: '0px'
})),
state('void', style({
height: '{{height}}'
}), { params: { height: '0' } }),
state('visible', style({
height: '*'
})),
transition('visible => hidden', animate('{{transitionParams}}')),
transition('hidden => visible', animate('{{transitionParams}}')),
transition('void => hidden', animate('{{transitionParams}}')),
transition('void => visible', animate('{{transitionParams}}'))
])
],
changeDetection: ChangeDetectionStrategy.Default
})
], PanelMenu);
let PanelMenuModule = class PanelMenuModule {
};
PanelMenuModule = __decorate([
NgModule({
imports: [CommonModule, RouterModule],
exports: [PanelMenu, RouterModule],
declarations: [PanelMenu, PanelMenuSub]
})
], PanelMenuModule);
/**
* Generated bundle index. Do not edit.
*/
export { BasePanelMenuItem, PanelMenu, PanelMenuModule, PanelMenuSub };
//# sourceMappingURL=primeng-panelmenu.js.map