1 | (function (global, factory) {
|
2 | typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/animations'), require('@angular/common'), require('primeng/dom'), require('@angular/router')) :
|
3 | typeof define === 'function' && define.amd ? define('primeng/tieredmenu', ['exports', '@angular/core', '@angular/animations', '@angular/common', 'primeng/dom', '@angular/router'], factory) :
|
4 | (global = global || self, factory((global.primeng = global.primeng || {}, global.primeng.tieredmenu = {}), global.ng.core, global.ng.animations, global.ng.common, global.primeng.dom, global.ng.router));
|
5 | }(this, (function (exports, core, animations, common, dom, router) { 'use strict';
|
6 |
|
7 | var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
|
8 | var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
9 | if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
10 | 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;
|
11 | return c > 3 && r && Object.defineProperty(target, key, r), r;
|
12 | };
|
13 | var __param = (this && this.__param) || function (paramIndex, decorator) {
|
14 | return function (target, key) { decorator(target, key, paramIndex); }
|
15 | };
|
16 | var TieredMenuSub = (function () {
|
17 | function TieredMenuSub(tieredMenu, cf, renderer) {
|
18 | this.cf = cf;
|
19 | this.renderer = renderer;
|
20 | this.autoZIndex = true;
|
21 | this.baseZIndex = 0;
|
22 | this.tieredMenu = tieredMenu;
|
23 | }
|
24 | Object.defineProperty(TieredMenuSub.prototype, "parentActive", {
|
25 | get: function () {
|
26 | return this._parentActive;
|
27 | },
|
28 | set: function (value) {
|
29 | this._parentActive = value;
|
30 | if (!value) {
|
31 | this.activeItem = null;
|
32 | }
|
33 | },
|
34 | enumerable: true,
|
35 | configurable: true
|
36 | });
|
37 | TieredMenuSub.prototype.ngAfterViewInit = function () {
|
38 | if (this.root && !this.tieredMenu.popup) {
|
39 | this.bindDocumentClickListener();
|
40 | }
|
41 | };
|
42 | TieredMenuSub.prototype.onItemMouseEnter = function (event, item, menuitem) {
|
43 | if (this.tieredMenu.popup || (!this.root || this.activeItem)) {
|
44 | if (menuitem.disabled) {
|
45 | return;
|
46 | }
|
47 | this.activeItem = item;
|
48 | var nextElement = item.children[0].nextElementSibling;
|
49 | if (nextElement) {
|
50 | var sublist = nextElement.children[0];
|
51 | if (this.autoZIndex) {
|
52 | sublist.style.zIndex = String(this.baseZIndex + (++dom.DomHandler.zindex));
|
53 | }
|
54 | sublist.style.zIndex = String(++dom.DomHandler.zindex);
|
55 | sublist.style.top = '0px';
|
56 | sublist.style.left = dom.DomHandler.getOuterWidth(item.children[0]) + 'px';
|
57 | }
|
58 | }
|
59 | };
|
60 | TieredMenuSub.prototype.itemClick = function (event, item, menuitem) {
|
61 | if (menuitem.disabled) {
|
62 | event.preventDefault();
|
63 | return true;
|
64 | }
|
65 | if (!menuitem.url) {
|
66 | event.preventDefault();
|
67 | }
|
68 | if (menuitem.command) {
|
69 | menuitem.command({
|
70 | originalEvent: event,
|
71 | item: menuitem
|
72 | });
|
73 | }
|
74 | if (this.root && !this.activeItem && !this.tieredMenu.popup) {
|
75 | this.activeItem = item;
|
76 | var nextElement = item.children[0].nextElementSibling;
|
77 | if (nextElement) {
|
78 | var sublist = nextElement.children[0];
|
79 | if (this.autoZIndex) {
|
80 | sublist.style.zIndex = String(this.baseZIndex + (++dom.DomHandler.zindex));
|
81 | }
|
82 | sublist.style.zIndex = String(++dom.DomHandler.zindex);
|
83 | sublist.style.top = '0px';
|
84 | sublist.style.left = dom.DomHandler.getOuterWidth(item.children[0]) + 'px';
|
85 | this.rootItemClick = true;
|
86 | }
|
87 | }
|
88 | if (!menuitem.items && this.tieredMenu.popup) {
|
89 | this.tieredMenu.hide();
|
90 | }
|
91 | };
|
92 | TieredMenuSub.prototype.listClick = function (event) {
|
93 | if (!this.rootItemClick) {
|
94 | this.activeItem = null;
|
95 | }
|
96 | };
|
97 | TieredMenuSub.prototype.bindDocumentClickListener = function () {
|
98 | var _this = this;
|
99 | if (!this.documentClickListener) {
|
100 | this.documentClickListener = this.renderer.listen('document', 'click', function () {
|
101 | if (!_this.rootItemClick) {
|
102 | _this.parentActive = false;
|
103 | _this.activeItem = null;
|
104 | }
|
105 | _this.rootItemClick = false;
|
106 | });
|
107 | }
|
108 | };
|
109 | TieredMenuSub.prototype.unbindDocumentClickListener = function () {
|
110 | if (this.documentClickListener) {
|
111 | this.documentClickListener();
|
112 | this.documentClickListener = null;
|
113 | }
|
114 | };
|
115 | TieredMenuSub.prototype.ngOnDestroy = function () {
|
116 | if (this.root && !this.tieredMenu.popup) {
|
117 | this.unbindDocumentClickListener();
|
118 | }
|
119 | };
|
120 | TieredMenuSub.ctorParameters = function () { return [
|
121 | { type: undefined, decorators: [{ type: core.Inject, args: [core.forwardRef(function () { return TieredMenu; }),] }] },
|
122 | { type: core.ChangeDetectorRef },
|
123 | { type: core.Renderer2 }
|
124 | ]; };
|
125 | __decorate([
|
126 | core.Input()
|
127 | ], TieredMenuSub.prototype, "item", void 0);
|
128 | __decorate([
|
129 | core.Input()
|
130 | ], TieredMenuSub.prototype, "root", void 0);
|
131 | __decorate([
|
132 | core.Input()
|
133 | ], TieredMenuSub.prototype, "autoZIndex", void 0);
|
134 | __decorate([
|
135 | core.Input()
|
136 | ], TieredMenuSub.prototype, "baseZIndex", void 0);
|
137 | __decorate([
|
138 | core.Input()
|
139 | ], TieredMenuSub.prototype, "parentActive", null);
|
140 | TieredMenuSub = __decorate([
|
141 | core.Component({
|
142 | selector: 'p-tieredMenuSub',
|
143 | template: "\n <ul [ngClass]=\"{'ui-widget-content ui-corner-all ui-shadow ui-submenu-list': !root}\" (click)=\"listClick($event)\" role=\"menubar\">\n <ng-template ngFor let-child [ngForOf]=\"(root ? item : item.items)\">\n <li *ngIf=\"child.separator\" class=\"ui-menu-separator ui-widget-content\" [ngClass]=\"{'ui-helper-hidden': child.visible === false}\" role=\"separator\">\n <li *ngIf=\"!child.separator\" #listItem [ngClass]=\"{'ui-menuitem ui-widget ui-corner-all':true,'ui-menuitem-active':listItem==activeItem,'ui-helper-hidden': child.visible === false}\"\n [class]=\"child.styleClass\" [ngStyle]=\"child.style\" role=\"none\"\n (mouseenter)=\"onItemMouseEnter($event, listItem, child)\">\n <a *ngIf=\"!child.routerLink\" [attr.href]=\"child.url\" class=\"ui-menuitem-link ui-corner-all\" [attr.target]=\"child.target\" [attr.tabindex]=\"child.tabindex ? child.tabindex : '0'\" [attr.title]=\"child.title\" [attr.id]=\"child.id\" \n [ngClass]=\"{'ui-state-disabled':child.disabled}\" (click)=\"itemClick($event, listItem, child)\" role=\"menuitem\" [attr.aria-haspopup]=\"item.items != null\" [attr.aria-expanded]=\"item === activeItem\">\n <span class=\"ui-menuitem-icon\" *ngIf=\"child.icon\" [ngClass]=\"child.icon\"></span>\n <span class=\"ui-menuitem-text\">{{child.label}}</span>\n <span class=\"ui-submenu-icon pi pi-fw pi-caret-right\" *ngIf=\"child.items\"></span>\n </a>\n <a *ngIf=\"child.routerLink\" [routerLink]=\"child.routerLink\" role=\"menuitem\" [queryParams]=\"child.queryParams\" [routerLinkActive]=\"'ui-menuitem-link-active'\" role=\"menuitem\" [attr.tabindex]=\"child.tabindex ? child.tabindex : '0'\"\n [routerLinkActiveOptions]=\"child.routerLinkActiveOptions||{exact:false}\"\n class=\"ui-menuitem-link ui-corner-all\" [attr.target]=\"child.target\" [attr.title]=\"child.title\" [attr.id]=\"child.id\"\n [ngClass]=\"{'ui-state-disabled':child.disabled}\" (click)=\"itemClick($event, listItem, child)\"\n [fragment]=\"child.fragment\" [queryParamsHandling]=\"child.queryParamsHandling\" [preserveFragment]=\"child.preserveFragment\" [skipLocationChange]=\"child.skipLocationChange\" [replaceUrl]=\"child.replaceUrl\" [state]=\"child.state\">\n <span class=\"ui-menuitem-icon\" *ngIf=\"child.icon\" [ngClass]=\"child.icon\"></span>\n <span class=\"ui-menuitem-text\">{{child.label}}</span>\n <span class=\"ui-submenu-icon pi pi-fw pi-caret-right\" *ngIf=\"child.items\"></span>\n </a>\n <p-tieredMenuSub class=\"ui-submenu\" [item]=\"child\" *ngIf=\"child.items\" [baseZIndex]=\"baseZIndex\" [parentActive]=\"listItem==activeItem\" [autoZIndex]=\"autoZIndex\"></p-tieredMenuSub>\n </li>\n </ng-template>\n </ul>\n "
|
144 | }),
|
145 | __param(0, core.Inject(core.forwardRef(function () { return TieredMenu; })))
|
146 | ], TieredMenuSub);
|
147 | return TieredMenuSub;
|
148 | }());
|
149 | var TieredMenu = (function () {
|
150 | function TieredMenu(el, renderer) {
|
151 | this.el = el;
|
152 | this.renderer = renderer;
|
153 | this.autoZIndex = true;
|
154 | this.baseZIndex = 0;
|
155 | this.showTransitionOptions = '225ms ease-out';
|
156 | this.hideTransitionOptions = '195ms ease-in';
|
157 | }
|
158 | TieredMenu.prototype.toggle = function (event) {
|
159 | if (this.visible)
|
160 | this.hide();
|
161 | else
|
162 | this.show(event);
|
163 | this.preventDocumentDefault = true;
|
164 | };
|
165 | TieredMenu.prototype.show = function (event) {
|
166 | this.target = event.currentTarget;
|
167 | this.visible = true;
|
168 | this.parentActive = true;
|
169 | this.preventDocumentDefault = true;
|
170 | };
|
171 | TieredMenu.prototype.onOverlayAnimationStart = function (event) {
|
172 | switch (event.toState) {
|
173 | case 'visible':
|
174 | if (this.popup) {
|
175 | this.container = event.element;
|
176 | this.moveOnTop();
|
177 | this.appendOverlay();
|
178 | dom.DomHandler.absolutePosition(this.container, this.target);
|
179 | this.bindDocumentClickListener();
|
180 | this.bindDocumentResizeListener();
|
181 | }
|
182 | break;
|
183 | case 'void':
|
184 | this.onOverlayHide();
|
185 | break;
|
186 | }
|
187 | };
|
188 | TieredMenu.prototype.appendOverlay = function () {
|
189 | if (this.appendTo) {
|
190 | if (this.appendTo === 'body')
|
191 | document.body.appendChild(this.container);
|
192 | else
|
193 | dom.DomHandler.appendChild(this.container, this.appendTo);
|
194 | }
|
195 | };
|
196 | TieredMenu.prototype.restoreOverlayAppend = function () {
|
197 | if (this.container && this.appendTo) {
|
198 | this.el.nativeElement.appendChild(this.container);
|
199 | }
|
200 | };
|
201 | TieredMenu.prototype.moveOnTop = function () {
|
202 | if (this.autoZIndex) {
|
203 | this.container.style.zIndex = String(this.baseZIndex + (++dom.DomHandler.zindex));
|
204 | }
|
205 | };
|
206 | TieredMenu.prototype.hide = function () {
|
207 | this.visible = false;
|
208 | this.parentActive = false;
|
209 | };
|
210 | TieredMenu.prototype.onWindowResize = function () {
|
211 | this.hide();
|
212 | };
|
213 | TieredMenu.prototype.bindDocumentClickListener = function () {
|
214 | var _this = this;
|
215 | if (!this.documentClickListener) {
|
216 | this.documentClickListener = this.renderer.listen('document', 'click', function () {
|
217 | if (!_this.preventDocumentDefault && _this.popup) {
|
218 | _this.hide();
|
219 | }
|
220 | _this.preventDocumentDefault = false;
|
221 | });
|
222 | }
|
223 | };
|
224 | TieredMenu.prototype.unbindDocumentClickListener = function () {
|
225 | if (this.documentClickListener) {
|
226 | this.documentClickListener();
|
227 | this.documentClickListener = null;
|
228 | }
|
229 | };
|
230 | TieredMenu.prototype.bindDocumentResizeListener = function () {
|
231 | this.documentResizeListener = this.onWindowResize.bind(this);
|
232 | window.addEventListener('resize', this.documentResizeListener);
|
233 | };
|
234 | TieredMenu.prototype.unbindDocumentResizeListener = function () {
|
235 | if (this.documentResizeListener) {
|
236 | window.removeEventListener('resize', this.documentResizeListener);
|
237 | this.documentResizeListener = null;
|
238 | }
|
239 | };
|
240 | TieredMenu.prototype.onOverlayHide = function () {
|
241 | this.unbindDocumentClickListener();
|
242 | this.unbindDocumentResizeListener();
|
243 | this.preventDocumentDefault = false;
|
244 | this.target = null;
|
245 | };
|
246 | TieredMenu.prototype.ngOnDestroy = function () {
|
247 | if (this.popup) {
|
248 | this.restoreOverlayAppend();
|
249 | this.onOverlayHide();
|
250 | }
|
251 | };
|
252 | TieredMenu.ctorParameters = function () { return [
|
253 | { type: core.ElementRef },
|
254 | { type: core.Renderer2 }
|
255 | ]; };
|
256 | __decorate([
|
257 | core.Input()
|
258 | ], TieredMenu.prototype, "model", void 0);
|
259 | __decorate([
|
260 | core.Input()
|
261 | ], TieredMenu.prototype, "popup", void 0);
|
262 | __decorate([
|
263 | core.Input()
|
264 | ], TieredMenu.prototype, "style", void 0);
|
265 | __decorate([
|
266 | core.Input()
|
267 | ], TieredMenu.prototype, "styleClass", void 0);
|
268 | __decorate([
|
269 | core.Input()
|
270 | ], TieredMenu.prototype, "appendTo", void 0);
|
271 | __decorate([
|
272 | core.Input()
|
273 | ], TieredMenu.prototype, "autoZIndex", void 0);
|
274 | __decorate([
|
275 | core.Input()
|
276 | ], TieredMenu.prototype, "baseZIndex", void 0);
|
277 | __decorate([
|
278 | core.Input()
|
279 | ], TieredMenu.prototype, "showTransitionOptions", void 0);
|
280 | __decorate([
|
281 | core.Input()
|
282 | ], TieredMenu.prototype, "hideTransitionOptions", void 0);
|
283 | TieredMenu = __decorate([
|
284 | core.Component({
|
285 | selector: 'p-tieredMenu',
|
286 | template: "\n <div [ngClass]=\"{'ui-tieredmenu ui-widget ui-widget-content ui-corner-all':true, 'ui-tieredmenu-dynamic ui-shadow':popup}\" [class]=\"styleClass\" [ngStyle]=\"style\"\n [@overlayAnimation]=\"{value: 'visible', params: {showTransitionParams: showTransitionOptions, hideTransitionParams: hideTransitionOptions}}\" [@.disabled]=\"popup !== true\" (@overlayAnimation.start)=\"onOverlayAnimationStart($event)\" *ngIf=\"!popup || visible\">\n <p-tieredMenuSub [item]=\"model\" root=\"root\" [parentActive]=\"parentActive\" [baseZIndex]=\"baseZIndex\" [autoZIndex]=\"autoZIndex\"></p-tieredMenuSub>\n </div>\n ",
|
287 | animations: [
|
288 | animations.trigger('overlayAnimation', [
|
289 | animations.state('void', animations.style({
|
290 | transform: 'translateY(5%)',
|
291 | opacity: 0
|
292 | })),
|
293 | animations.state('visible', animations.style({
|
294 | transform: 'translateY(0)',
|
295 | opacity: 1
|
296 | })),
|
297 | animations.transition('void => visible', animations.animate('{{showTransitionParams}}')),
|
298 | animations.transition('visible => void', animations.animate('{{hideTransitionParams}}'))
|
299 | ])
|
300 | ],
|
301 | changeDetection: core.ChangeDetectionStrategy.Default
|
302 | })
|
303 | ], TieredMenu);
|
304 | return TieredMenu;
|
305 | }());
|
306 | var TieredMenuModule = (function () {
|
307 | function TieredMenuModule() {
|
308 | }
|
309 | TieredMenuModule = __decorate([
|
310 | core.NgModule({
|
311 | imports: [common.CommonModule, router.RouterModule],
|
312 | exports: [TieredMenu, router.RouterModule],
|
313 | declarations: [TieredMenu, TieredMenuSub]
|
314 | })
|
315 | ], TieredMenuModule);
|
316 | return TieredMenuModule;
|
317 | }());
|
318 |
|
319 | exports.TieredMenu = TieredMenu;
|
320 | exports.TieredMenuModule = TieredMenuModule;
|
321 | exports.TieredMenuSub = TieredMenuSub;
|
322 |
|
323 | Object.defineProperty(exports, '__esModule', { value: true });
|
324 |
|
325 | })));
|
326 |
|