1 | (function (global, factory) {
|
2 | typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('primeng/dom'), require('@angular/router')) :
|
3 | typeof define === 'function' && define.amd ? define('primeng/menubar', ['exports', '@angular/core', '@angular/common', 'primeng/dom', '@angular/router'], factory) :
|
4 | (global = global || self, factory((global.primeng = global.primeng || {}, global.primeng.menubar = {}), global.ng.core, global.ng.common, global.primeng.dom, global.ng.router));
|
5 | }(this, (function (exports, core, 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 MenubarSub = (function () {
|
14 | function MenubarSub(renderer, cd) {
|
15 | this.renderer = renderer;
|
16 | this.cd = cd;
|
17 | this.autoZIndex = true;
|
18 | this.baseZIndex = 0;
|
19 | this.menuHoverActive = false;
|
20 | }
|
21 | Object.defineProperty(MenubarSub.prototype, "parentActive", {
|
22 | get: function () {
|
23 | return this._parentActive;
|
24 | },
|
25 | set: function (value) {
|
26 | if (!this.root) {
|
27 | this._parentActive = value;
|
28 | if (!value)
|
29 | this.activeItem = null;
|
30 | }
|
31 | },
|
32 | enumerable: true,
|
33 | configurable: true
|
34 | });
|
35 | MenubarSub.prototype.onItemMenuClick = function (event, item, menuitem) {
|
36 | if (!this.autoDisplay) {
|
37 | if (menuitem.disabled) {
|
38 | return;
|
39 | }
|
40 | this.activeItem = this.activeMenu ? (this.activeMenu.isEqualNode(item) ? null : item) : item;
|
41 | var nextElement = item.children[0].nextElementSibling;
|
42 | if (nextElement) {
|
43 | var sublist = nextElement.children[0];
|
44 | if (this.autoZIndex) {
|
45 | sublist.style.zIndex = String(this.baseZIndex + (++dom.DomHandler.zindex));
|
46 | }
|
47 | if (this.root) {
|
48 | sublist.style.top = dom.DomHandler.getOuterHeight(item.children[0]) + 'px';
|
49 | sublist.style.left = '0px';
|
50 | }
|
51 | else {
|
52 | sublist.style.top = '0px';
|
53 | sublist.style.left = dom.DomHandler.getOuterWidth(item.children[0]) + 'px';
|
54 | }
|
55 | }
|
56 | this.menuClick = true;
|
57 | this.menuHoverActive = this.activeMenu ? (!this.activeMenu.isEqualNode(item)) : true;
|
58 | this.activeMenu = this.activeMenu ? (this.activeMenu.isEqualNode(item) ? null : item) : item;
|
59 | this.bindEventListener();
|
60 | }
|
61 | };
|
62 | MenubarSub.prototype.bindEventListener = function () {
|
63 | var _this = this;
|
64 | if (!this.documentClickListener) {
|
65 | this.documentClickListener = this.renderer.listen('document', 'click', function (event) {
|
66 | if (!_this.menuClick) {
|
67 | _this.activeItem = null;
|
68 | _this.menuHoverActive = false;
|
69 | _this.activeMenu = false;
|
70 | }
|
71 | _this.menuClick = false;
|
72 | });
|
73 | }
|
74 | };
|
75 | MenubarSub.prototype.onItemMouseEnter = function (event, item, menuitem) {
|
76 | if (this.autoDisplay || (!this.autoDisplay && this.root && this.menuHoverActive)) {
|
77 | if (menuitem.disabled) {
|
78 | return;
|
79 | }
|
80 | if ((this.activeItem && !this.activeItem.isEqualNode(item) || !this.activeItem)) {
|
81 | this.activeItem = item;
|
82 | var nextElement = item.children[0].nextElementSibling;
|
83 | if (nextElement) {
|
84 | var sublist = nextElement.children[0];
|
85 | sublist.style.zIndex = String(++dom.DomHandler.zindex);
|
86 | if (this.root) {
|
87 | sublist.style.top = dom.DomHandler.getOuterHeight(item.children[0]) + 'px';
|
88 | sublist.style.left = '0px';
|
89 | }
|
90 | else {
|
91 | sublist.style.top = '0px';
|
92 | sublist.style.left = dom.DomHandler.getOuterWidth(item.children[0]) + 'px';
|
93 | }
|
94 | }
|
95 | this.activeMenu = item;
|
96 | }
|
97 | }
|
98 | };
|
99 | MenubarSub.prototype.itemClick = function (event, item) {
|
100 | if (item.disabled) {
|
101 | event.preventDefault();
|
102 | return;
|
103 | }
|
104 | if (!item.url) {
|
105 | event.preventDefault();
|
106 | }
|
107 | if (item.command) {
|
108 | item.command({
|
109 | originalEvent: event,
|
110 | item: item
|
111 | });
|
112 | }
|
113 | this.activeItem = null;
|
114 | };
|
115 | MenubarSub.prototype.listClick = function (event) {
|
116 | if (this.autoDisplay) {
|
117 | this.activeItem = null;
|
118 | }
|
119 | };
|
120 | MenubarSub.prototype.ngOnDestroy = function () {
|
121 | if (this.documentClickListener) {
|
122 | this.documentClickListener();
|
123 | this.documentClickListener = null;
|
124 | }
|
125 | };
|
126 | MenubarSub.ctorParameters = function () { return [
|
127 | { type: core.Renderer2 },
|
128 | { type: core.ChangeDetectorRef }
|
129 | ]; };
|
130 | __decorate([
|
131 | core.Input()
|
132 | ], MenubarSub.prototype, "item", void 0);
|
133 | __decorate([
|
134 | core.Input()
|
135 | ], MenubarSub.prototype, "root", void 0);
|
136 | __decorate([
|
137 | core.Input()
|
138 | ], MenubarSub.prototype, "autoDisplay", void 0);
|
139 | __decorate([
|
140 | core.Input()
|
141 | ], MenubarSub.prototype, "autoZIndex", void 0);
|
142 | __decorate([
|
143 | core.Input()
|
144 | ], MenubarSub.prototype, "baseZIndex", void 0);
|
145 | __decorate([
|
146 | core.Input()
|
147 | ], MenubarSub.prototype, "parentActive", null);
|
148 | MenubarSub = __decorate([
|
149 | core.Component({
|
150 | selector: 'p-menubarSub',
|
151 | template: "\n <ul [ngClass]=\"{'ui-menubar-root-list':root, 'ui-widget-content ui-corner-all ui-submenu-list ui-shadow':!root}\"\n (click)=\"listClick($event)\">\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}\">\n <li *ngIf=\"!child.separator\" #listItem [ngClass]=\"{'ui-menuitem ui-corner-all':true,\n 'ui-menu-parent':child.items,'ui-menuitem-active':listItem==activeItem,'ui-helper-hidden': child.visible === false}\"\n (mouseenter)=\"onItemMouseEnter($event,listItem,child)\" (click)=\"onItemMenuClick($event, listItem, child)\">\n <a *ngIf=\"!child.routerLink\" [href]=\"child.url||'#'\" [attr.data-automationid]=\"child.automationId\" [attr.target]=\"child.target\" [attr.title]=\"child.title\" [attr.id]=\"child.id\" (click)=\"itemClick($event, child)\"\n [ngClass]=\"{'ui-menuitem-link ui-corner-all':true,'ui-state-disabled':child.disabled}\" [ngStyle]=\"child.style\" [class]=\"child.styleClass\" \n [attr.tabindex]=\"child.tabindex ? child.tabindex : '0'\" [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\" *ngIf=\"child.items\" [ngClass]=\"{'pi-caret-down':root,'pi-caret-right':!root}\"></span>\n </a>\n <a *ngIf=\"child.routerLink\" [routerLink]=\"child.routerLink\" [attr.data-automationid]=\"child.automationId\" [queryParams]=\"child.queryParams\" [routerLinkActive]=\"'ui-menuitem-link-active'\" [routerLinkActiveOptions]=\"child.routerLinkActiveOptions||{exact:false}\"\n [attr.target]=\"child.target\" [attr.title]=\"child.title\" [attr.id]=\"child.id\" [attr.tabindex]=\"child.tabindex ? child.tabindex : '0'\" role=\"menuitem\"\n (click)=\"itemClick($event, child)\" [ngClass]=\"{'ui-menuitem-link ui-corner-all':true,'ui-state-disabled':child.disabled}\" [ngStyle]=\"child.style\" [class]=\"child.styleClass\"\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\" *ngIf=\"child.items\" [ngClass]=\"{'pi-caret-down':root,'pi-caret-right':!root}\"></span>\n </a>\n <p-menubarSub class=\"ui-submenu\" [parentActive]=\"listItem==activeItem\" [item]=\"child\" *ngIf=\"child.items\" [autoDisplay]=\"true\"></p-menubarSub>\n </li>\n </ng-template>\n </ul>\n "
|
152 | })
|
153 | ], MenubarSub);
|
154 | return MenubarSub;
|
155 | }());
|
156 | var Menubar = (function () {
|
157 | function Menubar(el, renderer) {
|
158 | this.el = el;
|
159 | this.renderer = renderer;
|
160 | this.autoZIndex = true;
|
161 | this.baseZIndex = 0;
|
162 | }
|
163 | Object.defineProperty(Menubar.prototype, "autoDisplay", {
|
164 | get: function () {
|
165 | return this._autoDisplay;
|
166 | },
|
167 | enumerable: true,
|
168 | configurable: true
|
169 | });
|
170 | Object.defineProperty(Menubar.prototype, "utc", {
|
171 | set: function (_utc) {
|
172 | console.log("AutoDisplay property is deprecated and functionality is not available.");
|
173 | },
|
174 | enumerable: true,
|
175 | configurable: true
|
176 | });
|
177 | Menubar.ctorParameters = function () { return [
|
178 | { type: core.ElementRef },
|
179 | { type: core.Renderer2 }
|
180 | ]; };
|
181 | __decorate([
|
182 | core.Input()
|
183 | ], Menubar.prototype, "model", void 0);
|
184 | __decorate([
|
185 | core.Input()
|
186 | ], Menubar.prototype, "style", void 0);
|
187 | __decorate([
|
188 | core.Input()
|
189 | ], Menubar.prototype, "styleClass", void 0);
|
190 | __decorate([
|
191 | core.Input()
|
192 | ], Menubar.prototype, "autoZIndex", void 0);
|
193 | __decorate([
|
194 | core.Input()
|
195 | ], Menubar.prototype, "baseZIndex", void 0);
|
196 | __decorate([
|
197 | core.Input()
|
198 | ], Menubar.prototype, "autoDisplay", null);
|
199 | Menubar = __decorate([
|
200 | core.Component({
|
201 | selector: 'p-menubar',
|
202 | template: "\n <div [ngClass]=\"{'ui-menubar ui-widget ui-widget-content ui-corner-all':true}\" [class]=\"styleClass\" [ngStyle]=\"style\">\n <p-menubarSub [item]=\"model\" root=\"root\" [baseZIndex]=\"baseZIndex\" [autoZIndex]=\"autoZIndex\">\n <ng-content></ng-content>\n </p-menubarSub>\n <div class=\"ui-menubar-custom\">\n <ng-content></ng-content>\n </div>\n </div>\n ",
|
203 | changeDetection: core.ChangeDetectionStrategy.Default
|
204 | })
|
205 | ], Menubar);
|
206 | return Menubar;
|
207 | }());
|
208 | var MenubarModule = (function () {
|
209 | function MenubarModule() {
|
210 | }
|
211 | MenubarModule = __decorate([
|
212 | core.NgModule({
|
213 | imports: [common.CommonModule, router.RouterModule],
|
214 | exports: [Menubar, router.RouterModule],
|
215 | declarations: [Menubar, MenubarSub]
|
216 | })
|
217 | ], MenubarModule);
|
218 | return MenubarModule;
|
219 | }());
|
220 |
|
221 | exports.Menubar = Menubar;
|
222 | exports.MenubarModule = MenubarModule;
|
223 | exports.MenubarSub = MenubarSub;
|
224 |
|
225 | Object.defineProperty(exports, '__esModule', { value: true });
|
226 |
|
227 | })));
|
228 |
|