1 | (function (global, factory) {
|
2 | typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('primeng/dom'), require('primeng/api'), require('@angular/animations')) :
|
3 | typeof define === 'function' && define.amd ? define('primeng/overlaypanel', ['exports', '@angular/core', '@angular/common', 'primeng/dom', 'primeng/api', '@angular/animations'], factory) :
|
4 | (global = global || self, factory((global.primeng = global.primeng || {}, global.primeng.overlaypanel = {}), global.ng.core, global.ng.common, global.primeng.dom, global.primeng.api, global.ng.animations));
|
5 | }(this, (function (exports, core, common, dom, api, animations) { '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 OverlayPanel = (function () {
|
14 | function OverlayPanel(el, renderer, cd, zone) {
|
15 | this.el = el;
|
16 | this.renderer = renderer;
|
17 | this.cd = cd;
|
18 | this.zone = zone;
|
19 | this.dismissable = true;
|
20 | this.autoZIndex = true;
|
21 | this.baseZIndex = 0;
|
22 | this.showTransitionOptions = '225ms ease-out';
|
23 | this.hideTransitionOptions = '195ms ease-in';
|
24 | this.onShow = new core.EventEmitter();
|
25 | this.onHide = new core.EventEmitter();
|
26 | this.overlayVisible = false;
|
27 | this.render = false;
|
28 | this.isContainerClicked = true;
|
29 | }
|
30 | OverlayPanel.prototype.ngAfterContentInit = function () {
|
31 | var _this = this;
|
32 | this.templates.forEach(function (item) {
|
33 | switch (item.getType()) {
|
34 | case 'content':
|
35 | _this.contentTemplate = item.template;
|
36 | break;
|
37 | default:
|
38 | _this.contentTemplate = item.template;
|
39 | break;
|
40 | }
|
41 | });
|
42 | };
|
43 | OverlayPanel.prototype.onContainerClick = function () {
|
44 | this.isContainerClicked = true;
|
45 | };
|
46 | OverlayPanel.prototype.bindDocumentClickListener = function () {
|
47 | var _this = this;
|
48 | if (!this.documentClickListener && this.dismissable) {
|
49 | this.zone.runOutsideAngular(function () {
|
50 | var documentEvent = dom.DomHandler.isIOS() ? 'touchstart' : 'click';
|
51 | _this.documentClickListener = _this.renderer.listen('document', documentEvent, function (event) {
|
52 | if (!_this.container.contains(event.target) && _this.target !== event.target && !_this.target.contains(event.target) && !_this.isContainerClicked) {
|
53 | _this.zone.run(function () {
|
54 | _this.hide();
|
55 | });
|
56 | }
|
57 | _this.isContainerClicked = false;
|
58 | _this.cd.markForCheck();
|
59 | });
|
60 | });
|
61 | }
|
62 | };
|
63 | OverlayPanel.prototype.unbindDocumentClickListener = function () {
|
64 | if (this.documentClickListener) {
|
65 | this.documentClickListener();
|
66 | this.documentClickListener = null;
|
67 | }
|
68 | };
|
69 | OverlayPanel.prototype.toggle = function (event, target) {
|
70 | var _this = this;
|
71 | if (this.overlayVisible) {
|
72 | if (this.hasTargetChanged(event, target)) {
|
73 | this.destroyCallback = function () {
|
74 | _this.show(null, (target || event.currentTarget || event.target));
|
75 | };
|
76 | }
|
77 | this.overlayVisible = false;
|
78 | }
|
79 | else {
|
80 | this.show(event, target);
|
81 | }
|
82 | };
|
83 | OverlayPanel.prototype.show = function (event, target) {
|
84 | this.target = target || event.currentTarget || event.target;
|
85 | this.overlayVisible = true;
|
86 | this.render = true;
|
87 | };
|
88 | OverlayPanel.prototype.hasTargetChanged = function (event, target) {
|
89 | return this.target != null && this.target !== (target || event.currentTarget || event.target);
|
90 | };
|
91 | OverlayPanel.prototype.appendContainer = function () {
|
92 | if (this.appendTo) {
|
93 | if (this.appendTo === 'body')
|
94 | document.body.appendChild(this.container);
|
95 | else
|
96 | dom.DomHandler.appendChild(this.container, this.appendTo);
|
97 | }
|
98 | };
|
99 | OverlayPanel.prototype.restoreAppend = function () {
|
100 | if (this.container && this.appendTo) {
|
101 | this.el.nativeElement.appendChild(this.container);
|
102 | }
|
103 | };
|
104 | OverlayPanel.prototype.align = function () {
|
105 | if (this.autoZIndex) {
|
106 | this.container.style.zIndex = String(this.baseZIndex + (++dom.DomHandler.zindex));
|
107 | }
|
108 | dom.DomHandler.absolutePosition(this.container, this.target);
|
109 | if (dom.DomHandler.getOffset(this.container).top < dom.DomHandler.getOffset(this.target).top) {
|
110 | dom.DomHandler.addClass(this.container, 'ui-overlaypanel-flipped');
|
111 | }
|
112 | if (Math.floor(dom.DomHandler.getOffset(this.container).left) < Math.floor(dom.DomHandler.getOffset(this.target).left) &&
|
113 | dom.DomHandler.getOffset(this.container).left > 0) {
|
114 | dom.DomHandler.addClass(this.container, 'ui-overlaypanel-shifted');
|
115 | }
|
116 | };
|
117 | OverlayPanel.prototype.onAnimationStart = function (event) {
|
118 | if (event.toState === 'open') {
|
119 | this.container = event.element;
|
120 | this.onShow.emit(null);
|
121 | this.appendContainer();
|
122 | this.align();
|
123 | this.bindDocumentClickListener();
|
124 | this.bindDocumentResizeListener();
|
125 | }
|
126 | };
|
127 | OverlayPanel.prototype.onAnimationEnd = function (event) {
|
128 | switch (event.toState) {
|
129 | case 'void':
|
130 | if (this.destroyCallback) {
|
131 | this.destroyCallback();
|
132 | this.destroyCallback = null;
|
133 | }
|
134 | break;
|
135 | case 'close':
|
136 | this.onContainerDestroy();
|
137 | this.onHide.emit({});
|
138 | this.render = false;
|
139 | break;
|
140 | }
|
141 | };
|
142 | OverlayPanel.prototype.hide = function () {
|
143 | this.overlayVisible = false;
|
144 | };
|
145 | OverlayPanel.prototype.onCloseClick = function (event) {
|
146 | this.hide();
|
147 | event.preventDefault();
|
148 | };
|
149 | OverlayPanel.prototype.onWindowResize = function (event) {
|
150 | this.hide();
|
151 | };
|
152 | OverlayPanel.prototype.bindDocumentResizeListener = function () {
|
153 | this.documentResizeListener = this.onWindowResize.bind(this);
|
154 | window.addEventListener('resize', this.documentResizeListener);
|
155 | };
|
156 | OverlayPanel.prototype.unbindDocumentResizeListener = function () {
|
157 | if (this.documentResizeListener) {
|
158 | window.removeEventListener('resize', this.documentResizeListener);
|
159 | this.documentResizeListener = null;
|
160 | }
|
161 | };
|
162 | OverlayPanel.prototype.onContainerDestroy = function () {
|
163 | this.target = null;
|
164 | this.unbindDocumentClickListener();
|
165 | this.unbindDocumentResizeListener();
|
166 | };
|
167 | OverlayPanel.prototype.ngOnDestroy = function () {
|
168 | this.target = null;
|
169 | this.destroyCallback = null;
|
170 | if (this.container) {
|
171 | this.restoreAppend();
|
172 | this.onContainerDestroy();
|
173 | }
|
174 | };
|
175 | OverlayPanel.ctorParameters = function () { return [
|
176 | { type: core.ElementRef },
|
177 | { type: core.Renderer2 },
|
178 | { type: core.ChangeDetectorRef },
|
179 | { type: core.NgZone }
|
180 | ]; };
|
181 | __decorate([
|
182 | core.Input()
|
183 | ], OverlayPanel.prototype, "dismissable", void 0);
|
184 | __decorate([
|
185 | core.Input()
|
186 | ], OverlayPanel.prototype, "showCloseIcon", void 0);
|
187 | __decorate([
|
188 | core.Input()
|
189 | ], OverlayPanel.prototype, "style", void 0);
|
190 | __decorate([
|
191 | core.Input()
|
192 | ], OverlayPanel.prototype, "styleClass", void 0);
|
193 | __decorate([
|
194 | core.Input()
|
195 | ], OverlayPanel.prototype, "appendTo", void 0);
|
196 | __decorate([
|
197 | core.Input()
|
198 | ], OverlayPanel.prototype, "autoZIndex", void 0);
|
199 | __decorate([
|
200 | core.Input()
|
201 | ], OverlayPanel.prototype, "ariaCloseLabel", void 0);
|
202 | __decorate([
|
203 | core.Input()
|
204 | ], OverlayPanel.prototype, "baseZIndex", void 0);
|
205 | __decorate([
|
206 | core.Input()
|
207 | ], OverlayPanel.prototype, "showTransitionOptions", void 0);
|
208 | __decorate([
|
209 | core.Input()
|
210 | ], OverlayPanel.prototype, "hideTransitionOptions", void 0);
|
211 | __decorate([
|
212 | core.Output()
|
213 | ], OverlayPanel.prototype, "onShow", void 0);
|
214 | __decorate([
|
215 | core.Output()
|
216 | ], OverlayPanel.prototype, "onHide", void 0);
|
217 | __decorate([
|
218 | core.ContentChildren(api.PrimeTemplate)
|
219 | ], OverlayPanel.prototype, "templates", void 0);
|
220 | OverlayPanel = __decorate([
|
221 | core.Component({
|
222 | selector: 'p-overlayPanel',
|
223 | template: "\n <div *ngIf=\"render\" [ngClass]=\"'ui-overlaypanel ui-widget ui-widget-content ui-corner-all ui-shadow'\" [ngStyle]=\"style\" [class]=\"styleClass\" (click)=\"onContainerClick()\"\n [@animation]=\"{value: (overlayVisible ? 'open': 'close'), params: {showTransitionParams: showTransitionOptions, hideTransitionParams: hideTransitionOptions}}\" \n (@animation.start)=\"onAnimationStart($event)\" (@animation.done)=\"onAnimationEnd($event)\">\n <div class=\"ui-overlaypanel-content\">\n <ng-content></ng-content>\n <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\n </div>\n <a tabindex=\"0\" *ngIf=\"showCloseIcon\" class=\"ui-overlaypanel-close ui-state-default\" (click)=\"onCloseClick($event)\" (keydown.enter)=\"hide()\" [attr.aria-label]=\"ariaCloseLabel\">\n <span class=\"ui-overlaypanel-close-icon pi pi-times\"></span>\n </a>\n </div>\n ",
|
224 | animations: [
|
225 | animations.trigger('animation', [
|
226 | animations.state('void', animations.style({
|
227 | transform: 'translateY(5%)',
|
228 | opacity: 0
|
229 | })),
|
230 | animations.state('close', animations.style({
|
231 | transform: 'translateY(5%)',
|
232 | opacity: 0
|
233 | })),
|
234 | animations.state('open', animations.style({
|
235 | transform: 'translateY(0)',
|
236 | opacity: 1
|
237 | })),
|
238 | animations.transition('void => open', animations.animate('{{showTransitionParams}}')),
|
239 | animations.transition('open => close', animations.animate('{{hideTransitionParams}}'))
|
240 | ])
|
241 | ],
|
242 | changeDetection: core.ChangeDetectionStrategy.Default
|
243 | })
|
244 | ], OverlayPanel);
|
245 | return OverlayPanel;
|
246 | }());
|
247 | var OverlayPanelModule = (function () {
|
248 | function OverlayPanelModule() {
|
249 | }
|
250 | OverlayPanelModule = __decorate([
|
251 | core.NgModule({
|
252 | imports: [common.CommonModule],
|
253 | exports: [OverlayPanel],
|
254 | declarations: [OverlayPanel]
|
255 | })
|
256 | ], OverlayPanelModule);
|
257 | return OverlayPanelModule;
|
258 | }());
|
259 |
|
260 | exports.OverlayPanel = OverlayPanel;
|
261 | exports.OverlayPanelModule = OverlayPanelModule;
|
262 |
|
263 | Object.defineProperty(exports, '__esModule', { value: true });
|
264 |
|
265 | })));
|
266 |
|