primeng
Version:
[](https://opensource.org/licenses/MIT) [](https://badge.fury.io/js/primeng) [ • 12.1 kB
JavaScript
import { Component, ViewEncapsulation, Inject, forwardRef, Input, EventEmitter, ChangeDetectionStrategy, ElementRef, Renderer2, ChangeDetectorRef, ViewChild, Output, NgModule } from '@angular/core';
import { trigger, transition, style, animate } from '@angular/animations';
import { CommonModule } from '@angular/common';
import { DomHandler, ConnectedOverlayScrollHandler } from 'primeng/dom';
import { RouterModule } from '@angular/router';
import { RippleModule } from 'primeng/ripple';
class MenuItemContent {
constructor(menu) {
this.menu = menu;
}
}
MenuItemContent.decorators = [
{ type: Component, args: [{
selector: '[pMenuItemContent]',
template: `
<a *ngIf="!item.routerLink" [attr.href]="item.url||null" class="p-menuitem-link" [attr.tabindex]="item.disabled ? null : '0'" [attr.data-automationid]="item.automationId" [attr.target]="item.target" [attr.title]="item.title" [attr.id]="item.id"
[ngClass]="{'p-disabled':item.disabled}" (click)="menu.itemClick($event, item)" role="menuitem">
<span class="p-menuitem-icon" *ngIf="item.icon" [ngClass]="item.icon"></span>
<span class="p-menuitem-text" *ngIf="item.escape !== false; else htmlLabel">{{item.label}}</span>
<ng-template #htmlLabel><span class="p-menuitem-text" [innerHTML]="item.label"></span></ng-template>
</a>
<a *ngIf="item.routerLink" [routerLink]="item.routerLink" [attr.data-automationid]="item.automationId" [queryParams]="item.queryParams" [routerLinkActive]="'p-menuitem-link-active'"
[routerLinkActiveOptions]="item.routerLinkActiveOptions||{exact:false}" class="p-menuitem-link" [attr.target]="item.target" [attr.id]="item.id" [attr.tabindex]="item.disabled ? null : '0'"
[attr.title]="item.title" [ngClass]="{'p-disabled':item.disabled}" (click)="menu.itemClick($event, item)" role="menuitem" pRipple
[fragment]="item.fragment" [queryParamsHandling]="item.queryParamsHandling" [preserveFragment]="item.preserveFragment" [skipLocationChange]="item.skipLocationChange" [replaceUrl]="item.replaceUrl" [state]="item.state">
<span class="p-menuitem-icon" *ngIf="item.icon" [ngClass]="item.icon"></span>
<span class="p-menuitem-text" *ngIf="item.escape !== false; else htmlRouteLabel">{{item.label}}</span>
<ng-template #htmlRouteLabel><span class="p-menuitem-text" [innerHTML]="item.label"></span></ng-template>
</a>
`,
encapsulation: ViewEncapsulation.None
},] }
];
MenuItemContent.ctorParameters = () => [
{ type: undefined, decorators: [{ type: Inject, args: [forwardRef(() => Menu),] }] }
];
MenuItemContent.propDecorators = {
item: [{ type: Input, args: ["pMenuItemContent",] }]
};
class Menu {
constructor(el, renderer, cd) {
this.el = el;
this.renderer = renderer;
this.cd = cd;
this.autoZIndex = true;
this.baseZIndex = 0;
this.showTransitionOptions = '.12s cubic-bezier(0, 0, 0.2, 1)';
this.hideTransitionOptions = '.1s linear';
this.onShow = new EventEmitter();
this.onHide = new EventEmitter();
}
toggle(event) {
if (this.visible)
this.hide();
else
this.show(event);
this.preventDocumentDefault = true;
}
show(event) {
this.target = event.currentTarget;
this.relativeAlign = event.relativeAlign;
this.visible = true;
this.preventDocumentDefault = true;
this.cd.markForCheck();
}
onOverlayAnimationStart(event) {
switch (event.toState) {
case 'visible':
if (this.popup) {
this.container = event.element;
this.moveOnTop();
this.onShow.emit({});
this.appendOverlay();
this.alignOverlay();
this.bindDocumentClickListener();
this.bindDocumentResizeListener();
this.bindScrollListener();
}
break;
case 'void':
this.onOverlayHide();
this.onHide.emit({});
break;
}
}
alignOverlay() {
if (this.relativeAlign)
DomHandler.relativePosition(this.container, this.target);
else
DomHandler.absolutePosition(this.container, this.target);
}
appendOverlay() {
if (this.appendTo) {
if (this.appendTo === 'body')
document.body.appendChild(this.container);
else
DomHandler.appendChild(this.container, this.appendTo);
}
}
restoreOverlayAppend() {
if (this.container && this.appendTo) {
this.el.nativeElement.appendChild(this.container);
}
}
moveOnTop() {
if (this.autoZIndex) {
this.container.style.zIndex = String(this.baseZIndex + (++DomHandler.zindex));
}
}
hide() {
this.visible = false;
this.relativeAlign = false;
this.cd.markForCheck();
}
onWindowResize() {
this.hide();
}
itemClick(event, item) {
if (item.disabled) {
event.preventDefault();
return;
}
if (!item.url) {
event.preventDefault();
}
if (item.command) {
item.command({
originalEvent: event,
item: item
});
}
if (this.popup) {
this.hide();
}
}
bindDocumentClickListener() {
if (!this.documentClickListener) {
const documentTarget = this.el ? this.el.nativeElement.ownerDocument : 'document';
this.documentClickListener = this.renderer.listen(documentTarget, 'click', () => {
if (!this.preventDocumentDefault) {
this.hide();
}
this.preventDocumentDefault = false;
});
}
}
unbindDocumentClickListener() {
if (this.documentClickListener) {
this.documentClickListener();
this.documentClickListener = null;
}
}
bindDocumentResizeListener() {
this.documentResizeListener = this.onWindowResize.bind(this);
window.addEventListener('resize', this.documentResizeListener);
}
unbindDocumentResizeListener() {
if (this.documentResizeListener) {
window.removeEventListener('resize', this.documentResizeListener);
this.documentResizeListener = null;
}
}
bindScrollListener() {
if (!this.scrollHandler) {
this.scrollHandler = new ConnectedOverlayScrollHandler(this.target, () => {
if (this.visible) {
this.hide();
}
});
}
this.scrollHandler.bindScrollListener();
}
unbindScrollListener() {
if (this.scrollHandler) {
this.scrollHandler.unbindScrollListener();
}
}
onOverlayHide() {
this.unbindDocumentClickListener();
this.unbindDocumentResizeListener();
this.unbindScrollListener();
this.preventDocumentDefault = false;
this.target = null;
}
ngOnDestroy() {
if (this.popup) {
if (this.scrollHandler) {
this.scrollHandler.destroy();
this.scrollHandler = null;
}
this.restoreOverlayAppend();
this.onOverlayHide();
}
}
hasSubMenu() {
if (this.model) {
for (var item of this.model) {
if (item.items) {
return true;
}
}
}
return false;
}
}
Menu.decorators = [
{ type: Component, args: [{
selector: 'p-menu',
template: `
<div #container [ngClass]="{'p-menu p-component': true, 'p-menu-overlay': popup}"
[class]="styleClass" [ngStyle]="style" (click)="preventDocumentDefault=true" *ngIf="!popup || visible"
[]="{value: 'visible', params: {showTransitionParams: showTransitionOptions, hideTransitionParams: hideTransitionOptions}}" [@.disabled]="popup !== true" (.start)="onOverlayAnimationStart($event)">
<ul class="p-menu-list p-reset">
<ng-template ngFor let-submenu [ngForOf]="model" *ngIf="hasSubMenu()">
<li class="p-menu-separator" *ngIf="submenu.separator" [ngClass]="{'p-hidden': submenu.visible === false}"></li>
<li class="p-submenu-header" [attr.data-automationid]="submenu.automationId" *ngIf="!submenu.separator" [ngClass]="{'p-hidden': submenu.visible === false}">
<span *ngIf="submenu.escape !== false; else htmlSubmenuLabel">{{submenu.label}}</span>
<ng-template #htmlSubmenuLabel><span [innerHTML]="submenu.label"></span></ng-template>
</li>
<ng-template ngFor let-item [ngForOf]="submenu.items">
<li class="p-menu-separator" *ngIf="item.separator" [ngClass]="{'p-hidden': (item.visible === false || submenu.visible === false)}"></li>
<li class="p-menuitem" *ngIf="!item.separator" [pMenuItemContent]="item" [ngClass]="{'p-hidden': (item.visible === false || submenu.visible === false)}" [ngStyle]="item.style" [class]="item.styleClass"></li>
</ng-template>
</ng-template>
<ng-template ngFor let-item [ngForOf]="model" *ngIf="!hasSubMenu()">
<li class="p-menu-separator" *ngIf="item.separator" [ngClass]="{'p-hidden': item.visible === false}"></li>
<li class="p-menuitem" *ngIf="!item.separator" [pMenuItemContent]="item" [ngClass]="{'p-hidden': item.visible === false}" [ngStyle]="item.style" [class]="item.styleClass"></li>
</ng-template>
</ul>
</div>
`,
animations: [
trigger('overlayAnimation', [
transition(':enter', [
style({ opacity: 0, transform: 'scaleY(0.8)' }),
animate('{{showTransitionParams}}')
]),
transition(':leave', [
animate('{{hideTransitionParams}}', style({ opacity: 0 }))
])
])
],
changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None,
styles: [".p-menu-overlay{position:absolute}.p-menu ul{list-style:none;margin:0;padding:0}.p-menu .p-menuitem-link{align-items:center;cursor:pointer;display:flex;overflow:hidden;position:relative;text-decoration:none}.p-menu .p-menuitem-text{line-height:1}"]
},] }
];
Menu.ctorParameters = () => [
{ type: ElementRef },
{ type: Renderer2 },
{ type: ChangeDetectorRef }
];
Menu.propDecorators = {
model: [{ type: Input }],
popup: [{ type: Input }],
style: [{ type: Input }],
styleClass: [{ type: Input }],
appendTo: [{ type: Input }],
autoZIndex: [{ type: Input }],
baseZIndex: [{ type: Input }],
showTransitionOptions: [{ type: Input }],
hideTransitionOptions: [{ type: Input }],
containerViewChild: [{ type: ViewChild, args: ['container',] }],
onShow: [{ type: Output }],
onHide: [{ type: Output }]
};
class MenuModule {
}
MenuModule.decorators = [
{ type: NgModule, args: [{
imports: [CommonModule, RouterModule, RippleModule],
exports: [Menu, RouterModule],
declarations: [Menu, MenuItemContent]
},] }
];
/**
* Generated bundle index. Do not edit.
*/
export { Menu, MenuItemContent, MenuModule };
//# sourceMappingURL=primeng-menu.js.map