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/slidemenu', ['exports', '@angular/core', '@angular/animations', '@angular/common', 'primeng/dom', '@angular/router'], factory) :
|
4 | (global = global || self, factory((global.primeng = global.primeng || {}, global.primeng.slidemenu = {}), 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 SlideMenuSub = (function () {
|
17 | function SlideMenuSub(slideMenu) {
|
18 | this.backLabel = 'Back';
|
19 | this.easing = 'ease-out';
|
20 | this.slideMenu = slideMenu;
|
21 | }
|
22 | SlideMenuSub.prototype.itemClick = function (event, item, listitem) {
|
23 | var _this = this;
|
24 | if (item.disabled) {
|
25 | event.preventDefault();
|
26 | return;
|
27 | }
|
28 | if (!item.url) {
|
29 | event.preventDefault();
|
30 | }
|
31 | if (item.command) {
|
32 | item.command({
|
33 | originalEvent: event,
|
34 | item: item
|
35 | });
|
36 | }
|
37 | if (item.items && !this.slideMenu.animating) {
|
38 | this.slideMenu.left -= this.slideMenu.menuWidth;
|
39 | this.activeItem = listitem;
|
40 | this.slideMenu.animating = true;
|
41 | setTimeout(function () { return _this.slideMenu.animating = false; }, this.effectDuration);
|
42 | }
|
43 | if (!item.items && this.slideMenu.popup) {
|
44 | this.slideMenu.hide();
|
45 | }
|
46 | };
|
47 | SlideMenuSub.prototype.ngOnDestroy = function () {
|
48 | this.activeItem = null;
|
49 | };
|
50 | SlideMenuSub.ctorParameters = function () { return [
|
51 | { type: undefined, decorators: [{ type: core.Inject, args: [core.forwardRef(function () { return SlideMenu; }),] }] }
|
52 | ]; };
|
53 | __decorate([
|
54 | core.Input()
|
55 | ], SlideMenuSub.prototype, "item", void 0);
|
56 | __decorate([
|
57 | core.Input()
|
58 | ], SlideMenuSub.prototype, "root", void 0);
|
59 | __decorate([
|
60 | core.Input()
|
61 | ], SlideMenuSub.prototype, "backLabel", void 0);
|
62 | __decorate([
|
63 | core.Input()
|
64 | ], SlideMenuSub.prototype, "menuWidth", void 0);
|
65 | __decorate([
|
66 | core.Input()
|
67 | ], SlideMenuSub.prototype, "effectDuration", void 0);
|
68 | __decorate([
|
69 | core.Input()
|
70 | ], SlideMenuSub.prototype, "easing", void 0);
|
71 | __decorate([
|
72 | core.Input()
|
73 | ], SlideMenuSub.prototype, "index", void 0);
|
74 | SlideMenuSub = __decorate([
|
75 | core.Component({
|
76 | selector: 'p-slideMenuSub',
|
77 | template: "\n <ul [ngClass]=\"{'ui-slidemenu-rootlist':root, 'ui-submenu-list':!root, 'ui-active-submenu': (-slideMenu.left == (index * menuWidth))}\"\n [style.width.px]=\"menuWidth\" [style.left.px]=\"root ? slideMenu.left : slideMenu.menuWidth\"\n [style.transitionProperty]=\"root ? 'left' : 'none'\" [style.transitionDuration]=\"effectDuration + 'ms'\" [style.transitionTimingFunction]=\"easing\">\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-widget ui-corner-all':true,'ui-menuitem-active':listitem==activeItem,'ui-helper-hidden': child.visible === false}\"\n [class]=\"child.styleClass\" [ngStyle]=\"child.style\">\n <a *ngIf=\"!child.routerLink\" [href]=\"child.url||'#'\" 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}\" [attr.tabindex]=\"child.tabindex ? child.tabindex : '0'\" \n (click)=\"itemClick($event, child, listitem)\">\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\" [queryParams]=\"child.queryParams\" [routerLinkActive]=\"'ui-menuitem-link-active'\" \n [routerLinkActiveOptions]=\"child.routerLinkActiveOptions||{exact:false}\" [href]=\"child.url||'#'\" class=\"ui-menuitem-link ui-corner-all\" \n [attr.target]=\"child.target\" [attr.title]=\"child.title\" [attr.id]=\"child.id\" [attr.tabindex]=\"child.tabindex ? child.tabindex : '0'\" \n [ngClass]=\"{'ui-state-disabled':child.disabled}\" \n (click)=\"itemClick($event, child, listitem)\"\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-slideMenuSub class=\"ui-submenu\" [item]=\"child\" [index]=\"index + 1\" [menuWidth]=\"menuWidth\" *ngIf=\"child.items\"></p-slideMenuSub>\n </li>\n </ng-template>\n </ul>\n "
|
78 | }),
|
79 | __param(0, core.Inject(core.forwardRef(function () { return SlideMenu; })))
|
80 | ], SlideMenuSub);
|
81 | return SlideMenuSub;
|
82 | }());
|
83 | var SlideMenu = (function () {
|
84 | function SlideMenu(el, renderer, cd) {
|
85 | this.el = el;
|
86 | this.renderer = renderer;
|
87 | this.cd = cd;
|
88 | this.menuWidth = 190;
|
89 | this.viewportHeight = 180;
|
90 | this.effectDuration = 250;
|
91 | this.easing = 'ease-out';
|
92 | this.backLabel = 'Back';
|
93 | this.autoZIndex = true;
|
94 | this.baseZIndex = 0;
|
95 | this.showTransitionOptions = '225ms ease-out';
|
96 | this.hideTransitionOptions = '195ms ease-in';
|
97 | this.onShow = new core.EventEmitter();
|
98 | this.onHide = new core.EventEmitter();
|
99 | this.left = 0;
|
100 | this.animating = false;
|
101 | }
|
102 | SlideMenu.prototype.ngAfterViewChecked = function () {
|
103 | if (!this.viewportUpdated && !this.popup && this.containerViewChild) {
|
104 | this.updateViewPort();
|
105 | this.viewportUpdated = true;
|
106 | }
|
107 | };
|
108 | Object.defineProperty(SlideMenu.prototype, "container", {
|
109 | set: function (element) {
|
110 | this.containerViewChild = element;
|
111 | },
|
112 | enumerable: true,
|
113 | configurable: true
|
114 | });
|
115 | Object.defineProperty(SlideMenu.prototype, "backward", {
|
116 | set: function (element) {
|
117 | this.backwardViewChild = element;
|
118 | },
|
119 | enumerable: true,
|
120 | configurable: true
|
121 | });
|
122 | Object.defineProperty(SlideMenu.prototype, "slideMenuContent", {
|
123 | set: function (element) {
|
124 | this.slideMenuContentViewChild = element;
|
125 | },
|
126 | enumerable: true,
|
127 | configurable: true
|
128 | });
|
129 | SlideMenu.prototype.updateViewPort = function () {
|
130 | this.slideMenuContentViewChild.nativeElement.style.height = this.viewportHeight - dom.DomHandler.getHiddenElementOuterHeight(this.backwardViewChild.nativeElement) + 'px';
|
131 | };
|
132 | SlideMenu.prototype.toggle = function (event) {
|
133 | if (this.visible)
|
134 | this.hide();
|
135 | else
|
136 | this.show(event);
|
137 | this.preventDocumentDefault = true;
|
138 | this.cd.detectChanges();
|
139 | };
|
140 | SlideMenu.prototype.show = function (event) {
|
141 | this.target = event.currentTarget;
|
142 | this.visible = true;
|
143 | this.preventDocumentDefault = true;
|
144 | };
|
145 | SlideMenu.prototype.onOverlayAnimationStart = function (event) {
|
146 | switch (event.toState) {
|
147 | case 'visible':
|
148 | if (this.popup) {
|
149 | this.updateViewPort();
|
150 | this.moveOnTop();
|
151 | this.onShow.emit({});
|
152 | this.appendOverlay();
|
153 | dom.DomHandler.absolutePosition(this.containerViewChild.nativeElement, this.target);
|
154 | this.bindDocumentClickListener();
|
155 | this.bindDocumentResizeListener();
|
156 | }
|
157 | break;
|
158 | case 'void':
|
159 | this.onOverlayHide();
|
160 | this.onHide.emit({});
|
161 | break;
|
162 | }
|
163 | };
|
164 | SlideMenu.prototype.appendOverlay = function () {
|
165 | if (this.appendTo) {
|
166 | if (this.appendTo === 'body')
|
167 | document.body.appendChild(this.containerViewChild.nativeElement);
|
168 | else
|
169 | dom.DomHandler.appendChild(this.containerViewChild.nativeElement, this.appendTo);
|
170 | }
|
171 | };
|
172 | SlideMenu.prototype.restoreOverlayAppend = function () {
|
173 | if (this.container && this.appendTo) {
|
174 | this.el.nativeElement.appendChild(this.containerViewChild.nativeElement);
|
175 | }
|
176 | };
|
177 | SlideMenu.prototype.moveOnTop = function () {
|
178 | if (this.autoZIndex) {
|
179 | this.containerViewChild.nativeElement.style.zIndex = String(this.baseZIndex + (++dom.DomHandler.zindex));
|
180 | }
|
181 | };
|
182 | SlideMenu.prototype.hide = function () {
|
183 | this.visible = false;
|
184 | };
|
185 | SlideMenu.prototype.onWindowResize = function () {
|
186 | this.hide();
|
187 | };
|
188 | SlideMenu.prototype.onClick = function (event) {
|
189 | this.preventDocumentDefault = true;
|
190 | };
|
191 | SlideMenu.prototype.goBack = function () {
|
192 | this.left += this.menuWidth;
|
193 | };
|
194 | SlideMenu.prototype.bindDocumentClickListener = function () {
|
195 | var _this = this;
|
196 | if (!this.documentClickListener) {
|
197 | this.documentClickListener = this.renderer.listen('document', 'click', function () {
|
198 | if (!_this.preventDocumentDefault) {
|
199 | _this.hide();
|
200 | _this.cd.detectChanges();
|
201 | }
|
202 | _this.preventDocumentDefault = false;
|
203 | });
|
204 | }
|
205 | };
|
206 | SlideMenu.prototype.unbindDocumentClickListener = function () {
|
207 | if (this.documentClickListener) {
|
208 | this.documentClickListener();
|
209 | this.documentClickListener = null;
|
210 | }
|
211 | };
|
212 | SlideMenu.prototype.bindDocumentResizeListener = function () {
|
213 | this.documentResizeListener = this.onWindowResize.bind(this);
|
214 | window.addEventListener('resize', this.documentResizeListener);
|
215 | };
|
216 | SlideMenu.prototype.unbindDocumentResizeListener = function () {
|
217 | if (this.documentResizeListener) {
|
218 | window.removeEventListener('resize', this.documentResizeListener);
|
219 | this.documentResizeListener = null;
|
220 | }
|
221 | };
|
222 | SlideMenu.prototype.onOverlayHide = function () {
|
223 | this.unbindDocumentClickListener();
|
224 | this.unbindDocumentResizeListener();
|
225 | this.preventDocumentDefault = false;
|
226 | this.target = null;
|
227 | this.left = 0;
|
228 | };
|
229 | SlideMenu.prototype.ngOnDestroy = function () {
|
230 | if (this.popup) {
|
231 | this.restoreOverlayAppend();
|
232 | this.onOverlayHide();
|
233 | }
|
234 | };
|
235 | SlideMenu.ctorParameters = function () { return [
|
236 | { type: core.ElementRef },
|
237 | { type: core.Renderer2 },
|
238 | { type: core.ChangeDetectorRef }
|
239 | ]; };
|
240 | __decorate([
|
241 | core.Input()
|
242 | ], SlideMenu.prototype, "model", void 0);
|
243 | __decorate([
|
244 | core.Input()
|
245 | ], SlideMenu.prototype, "popup", void 0);
|
246 | __decorate([
|
247 | core.Input()
|
248 | ], SlideMenu.prototype, "style", void 0);
|
249 | __decorate([
|
250 | core.Input()
|
251 | ], SlideMenu.prototype, "styleClass", void 0);
|
252 | __decorate([
|
253 | core.Input()
|
254 | ], SlideMenu.prototype, "menuWidth", void 0);
|
255 | __decorate([
|
256 | core.Input()
|
257 | ], SlideMenu.prototype, "viewportHeight", void 0);
|
258 | __decorate([
|
259 | core.Input()
|
260 | ], SlideMenu.prototype, "effectDuration", void 0);
|
261 | __decorate([
|
262 | core.Input()
|
263 | ], SlideMenu.prototype, "easing", void 0);
|
264 | __decorate([
|
265 | core.Input()
|
266 | ], SlideMenu.prototype, "backLabel", void 0);
|
267 | __decorate([
|
268 | core.Input()
|
269 | ], SlideMenu.prototype, "appendTo", void 0);
|
270 | __decorate([
|
271 | core.Input()
|
272 | ], SlideMenu.prototype, "autoZIndex", void 0);
|
273 | __decorate([
|
274 | core.Input()
|
275 | ], SlideMenu.prototype, "baseZIndex", void 0);
|
276 | __decorate([
|
277 | core.Input()
|
278 | ], SlideMenu.prototype, "showTransitionOptions", void 0);
|
279 | __decorate([
|
280 | core.Input()
|
281 | ], SlideMenu.prototype, "hideTransitionOptions", void 0);
|
282 | __decorate([
|
283 | core.Output()
|
284 | ], SlideMenu.prototype, "onShow", void 0);
|
285 | __decorate([
|
286 | core.Output()
|
287 | ], SlideMenu.prototype, "onHide", void 0);
|
288 | __decorate([
|
289 | core.ViewChild('container')
|
290 | ], SlideMenu.prototype, "container", null);
|
291 | __decorate([
|
292 | core.ViewChild('backward')
|
293 | ], SlideMenu.prototype, "backward", null);
|
294 | __decorate([
|
295 | core.ViewChild('slideMenuContent')
|
296 | ], SlideMenu.prototype, "slideMenuContent", null);
|
297 | SlideMenu = __decorate([
|
298 | core.Component({
|
299 | selector: 'p-slideMenu',
|
300 | template: "\n <div #container [ngClass]=\"{'ui-slidemenu ui-widget ui-widget-content ui-corner-all':true, 'ui-slidemenu-dynamic ui-shadow':popup}\" \n [class]=\"styleClass\" [ngStyle]=\"style\" (click)=\"onClick($event)\"\n [@overlayAnimation]=\"{value: 'visible', params: {showTransitionParams: showTransitionOptions, hideTransitionParams: hideTransitionOptions}}\" [@.disabled]=\"popup !== true\" (@overlayAnimation.start)=\"onOverlayAnimationStart($event)\" *ngIf=\"!popup || visible\">\n <div class=\"ui-slidemenu-wrapper\" [style.height]=\"left ? viewportHeight + 'px' : 'auto'\">\n <div #slideMenuContent class=\"ui-slidemenu-content\">\n <p-slideMenuSub [item]=\"model\" root=\"root\" [index]=\"0\" [menuWidth]=\"menuWidth\" [effectDuration]=\"effectDuration\" [easing]=\"easing\"></p-slideMenuSub>\n </div>\n <div #backward class=\"ui-slidemenu-backward ui-widget-header ui-corner-all\" [style.display]=\"left ? 'block' : 'none'\" (click)=\"goBack()\">\n <span class=\"ui-slidemenu-backward-icon pi pi-fw pi-caret-left\"></span><span>{{backLabel}}</span>\n </div>\n </div>\n </div>\n ",
|
301 | animations: [
|
302 | animations.trigger('overlayAnimation', [
|
303 | animations.state('void', animations.style({
|
304 | transform: 'translateY(5%)',
|
305 | opacity: 0
|
306 | })),
|
307 | animations.state('visible', animations.style({
|
308 | transform: 'translateY(0)',
|
309 | opacity: 1
|
310 | })),
|
311 | animations.transition('void => visible', animations.animate('{{showTransitionParams}}')),
|
312 | animations.transition('visible => void', animations.animate('{{hideTransitionParams}}'))
|
313 | ])
|
314 | ],
|
315 | changeDetection: core.ChangeDetectionStrategy.Default
|
316 | })
|
317 | ], SlideMenu);
|
318 | return SlideMenu;
|
319 | }());
|
320 | var SlideMenuModule = (function () {
|
321 | function SlideMenuModule() {
|
322 | }
|
323 | SlideMenuModule = __decorate([
|
324 | core.NgModule({
|
325 | imports: [common.CommonModule, router.RouterModule],
|
326 | exports: [SlideMenu, router.RouterModule],
|
327 | declarations: [SlideMenu, SlideMenuSub]
|
328 | })
|
329 | ], SlideMenuModule);
|
330 | return SlideMenuModule;
|
331 | }());
|
332 |
|
333 | exports.SlideMenu = SlideMenu;
|
334 | exports.SlideMenuModule = SlideMenuModule;
|
335 | exports.SlideMenuSub = SlideMenuSub;
|
336 |
|
337 | Object.defineProperty(exports, '__esModule', { value: true });
|
338 |
|
339 | })));
|
340 |
|