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('rxjs')) :
|
3 | typeof define === 'function' && define.amd ? define('primeng/dynamicdialog', ['exports', '@angular/core', '@angular/animations', '@angular/common', 'primeng/dom', 'rxjs'], factory) :
|
4 | (global = global || self, factory((global.primeng = global.primeng || {}, global.primeng.dynamicdialog = {}), global.ng.core, global.ng.animations, global.ng.common, global.primeng.dom, global.rxjs));
|
5 | }(this, (function (exports, core, animations, common, dom, rxjs) { '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 DynamicDialogContent = (function () {
|
14 | function DynamicDialogContent(viewContainerRef) {
|
15 | this.viewContainerRef = viewContainerRef;
|
16 | }
|
17 | DynamicDialogContent.ctorParameters = function () { return [
|
18 | { type: core.ViewContainerRef }
|
19 | ]; };
|
20 | DynamicDialogContent = __decorate([
|
21 | core.Directive({
|
22 | selector: '[pDynamicDialogContent]'
|
23 | })
|
24 | ], DynamicDialogContent);
|
25 | return DynamicDialogContent;
|
26 | }());
|
27 |
|
28 | var DynamicDialogConfig = (function () {
|
29 | function DynamicDialogConfig() {
|
30 | }
|
31 | return DynamicDialogConfig;
|
32 | }());
|
33 |
|
34 | var DynamicDialogRef = (function () {
|
35 | function DynamicDialogRef() {
|
36 | this._onClose = new rxjs.Subject();
|
37 | this.onClose = this._onClose.asObservable();
|
38 | this._onDestroy = new rxjs.Subject();
|
39 | this.onDestroy = this._onDestroy.asObservable();
|
40 | }
|
41 | DynamicDialogRef.prototype.close = function (result) {
|
42 | this._onClose.next(result);
|
43 | };
|
44 | DynamicDialogRef.prototype.destroy = function () {
|
45 | this._onDestroy.next();
|
46 | };
|
47 | return DynamicDialogRef;
|
48 | }());
|
49 |
|
50 | var __decorate$1 = (this && this.__decorate) || function (decorators, target, key, desc) {
|
51 | var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
52 | if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
53 | 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;
|
54 | return c > 3 && r && Object.defineProperty(target, key, r), r;
|
55 | };
|
56 | var showAnimation = animations.animation([
|
57 | animations.style({ transform: '{{transform}}', opacity: 0 }),
|
58 | animations.animate('{{transition}}', animations.style({ transform: 'none', opacity: 1 }))
|
59 | ]);
|
60 | var hideAnimation = animations.animation([
|
61 | animations.animate('{{transition}}', animations.style({ transform: '{{transform}}', opacity: 0 }))
|
62 | ]);
|
63 | var DynamicDialogComponent = (function () {
|
64 | function DynamicDialogComponent(componentFactoryResolver, cd, renderer, config, dialogRef, zone) {
|
65 | this.componentFactoryResolver = componentFactoryResolver;
|
66 | this.cd = cd;
|
67 | this.renderer = renderer;
|
68 | this.config = config;
|
69 | this.dialogRef = dialogRef;
|
70 | this.zone = zone;
|
71 | this.visible = true;
|
72 | this.transformOptions = "scale(0.7)";
|
73 | }
|
74 | DynamicDialogComponent.prototype.ngAfterViewInit = function () {
|
75 | this.loadChildComponent(this.childComponentType);
|
76 | this.cd.detectChanges();
|
77 | };
|
78 | DynamicDialogComponent.prototype.loadChildComponent = function (componentType) {
|
79 | var componentFactory = this.componentFactoryResolver.resolveComponentFactory(componentType);
|
80 | var viewContainerRef = this.insertionPoint.viewContainerRef;
|
81 | viewContainerRef.clear();
|
82 | this.componentRef = viewContainerRef.createComponent(componentFactory);
|
83 | };
|
84 | DynamicDialogComponent.prototype.moveOnTop = function () {
|
85 | if (this.config.autoZIndex !== false) {
|
86 | var zIndex = (this.config.baseZIndex || 0) + (++dom.DomHandler.zindex);
|
87 | this.container.style.zIndex = String(zIndex);
|
88 | this.maskViewChild.nativeElement.style.zIndex = String(zIndex - 1);
|
89 | }
|
90 | };
|
91 | DynamicDialogComponent.prototype.onAnimationStart = function (event) {
|
92 | switch (event.toState) {
|
93 | case 'visible':
|
94 | this.container = event.element;
|
95 | this.wrapper = this.container.parentElement;
|
96 | this.moveOnTop();
|
97 | this.bindGlobalListeners();
|
98 | if (this.config.modal !== false) {
|
99 | this.enableModality();
|
100 | }
|
101 | this.focus();
|
102 | break;
|
103 | case 'void':
|
104 | this.onContainerDestroy();
|
105 | break;
|
106 | }
|
107 | };
|
108 | DynamicDialogComponent.prototype.onAnimationEnd = function (event) {
|
109 | if (event.toState === 'void') {
|
110 | this.dialogRef.destroy();
|
111 | }
|
112 | };
|
113 | DynamicDialogComponent.prototype.onContainerDestroy = function () {
|
114 | this.unbindGlobalListeners();
|
115 | if (this.config.modal !== false) {
|
116 | this.disableModality();
|
117 | }
|
118 | this.container = null;
|
119 | };
|
120 | DynamicDialogComponent.prototype.close = function () {
|
121 | this.visible = false;
|
122 | };
|
123 | DynamicDialogComponent.prototype.enableModality = function () {
|
124 | var _this = this;
|
125 | if (this.config.closable !== false && this.config.dismissableMask !== false) {
|
126 | this.maskClickListener = this.renderer.listen(this.wrapper, 'click', function (event) {
|
127 | if (_this.container && !_this.container.isSameNode(event.target) && !_this.container.contains(event.target)) {
|
128 | _this.close();
|
129 | }
|
130 | });
|
131 | }
|
132 | if (this.config.modal !== false) {
|
133 | dom.DomHandler.addClass(document.body, 'ui-overflow-hidden');
|
134 | }
|
135 | };
|
136 | DynamicDialogComponent.prototype.disableModality = function () {
|
137 | if (this.wrapper) {
|
138 | if (this.config.dismissableMask) {
|
139 | this.unbindMaskClickListener();
|
140 | }
|
141 | if (this.config.modal !== false) {
|
142 | dom.DomHandler.removeClass(document.body, 'ui-overflow-hidden');
|
143 | }
|
144 | if (!this.cd.destroyed) {
|
145 | this.cd.detectChanges();
|
146 | }
|
147 | }
|
148 | };
|
149 | DynamicDialogComponent.prototype.onKeydown = function (event) {
|
150 | if (event.which === 9) {
|
151 | event.preventDefault();
|
152 | var focusableElements = dom.DomHandler.getFocusableElements(this.container);
|
153 | if (focusableElements && focusableElements.length > 0) {
|
154 | if (!document.activeElement) {
|
155 | focusableElements[0].focus();
|
156 | }
|
157 | else {
|
158 | var focusedIndex = focusableElements.indexOf(document.activeElement);
|
159 | if (event.shiftKey) {
|
160 | if (focusedIndex == -1 || focusedIndex === 0)
|
161 | focusableElements[focusableElements.length - 1].focus();
|
162 | else
|
163 | focusableElements[focusedIndex - 1].focus();
|
164 | }
|
165 | else {
|
166 | if (focusedIndex == -1 || focusedIndex === (focusableElements.length - 1))
|
167 | focusableElements[0].focus();
|
168 | else
|
169 | focusableElements[focusedIndex + 1].focus();
|
170 | }
|
171 | }
|
172 | }
|
173 | }
|
174 | };
|
175 | DynamicDialogComponent.prototype.focus = function () {
|
176 | var focusable = dom.DomHandler.findSingle(this.container, 'a');
|
177 | if (focusable) {
|
178 | this.zone.runOutsideAngular(function () {
|
179 | setTimeout(function () { return focusable.focus(); }, 5);
|
180 | });
|
181 | }
|
182 | };
|
183 | DynamicDialogComponent.prototype.bindGlobalListeners = function () {
|
184 | this.bindDocumentKeydownListener();
|
185 | if (this.config.closeOnEscape !== false && this.config.closable !== false) {
|
186 | this.bindDocumentEscapeListener();
|
187 | }
|
188 | };
|
189 | DynamicDialogComponent.prototype.unbindGlobalListeners = function () {
|
190 | this.unbindDocumentKeydownListener();
|
191 | this.unbindDocumentEscapeListener();
|
192 | };
|
193 | DynamicDialogComponent.prototype.bindDocumentKeydownListener = function () {
|
194 | var _this = this;
|
195 | this.zone.runOutsideAngular(function () {
|
196 | _this.documentKeydownListener = _this.onKeydown.bind(_this);
|
197 | window.document.addEventListener('keydown', _this.documentKeydownListener);
|
198 | });
|
199 | };
|
200 | DynamicDialogComponent.prototype.unbindDocumentKeydownListener = function () {
|
201 | if (this.documentKeydownListener) {
|
202 | window.document.removeEventListener('keydown', this.documentKeydownListener);
|
203 | this.documentKeydownListener = null;
|
204 | }
|
205 | };
|
206 | DynamicDialogComponent.prototype.bindDocumentEscapeListener = function () {
|
207 | var _this = this;
|
208 | this.documentEscapeListener = this.renderer.listen('document', 'keydown', function (event) {
|
209 | if (event.which == 27) {
|
210 | if (parseInt(_this.container.style.zIndex) == (dom.DomHandler.zindex + (_this.config.baseZIndex ? _this.config.baseZIndex : 0))) {
|
211 | _this.close();
|
212 | }
|
213 | }
|
214 | });
|
215 | };
|
216 | DynamicDialogComponent.prototype.unbindDocumentEscapeListener = function () {
|
217 | if (this.documentEscapeListener) {
|
218 | this.documentEscapeListener();
|
219 | this.documentEscapeListener = null;
|
220 | }
|
221 | };
|
222 | DynamicDialogComponent.prototype.unbindMaskClickListener = function () {
|
223 | if (this.maskClickListener) {
|
224 | this.maskClickListener();
|
225 | this.maskClickListener = null;
|
226 | }
|
227 | };
|
228 | DynamicDialogComponent.prototype.ngOnDestroy = function () {
|
229 | this.onContainerDestroy();
|
230 | if (this.componentRef) {
|
231 | this.componentRef.destroy();
|
232 | }
|
233 | };
|
234 | DynamicDialogComponent.ctorParameters = function () { return [
|
235 | { type: core.ComponentFactoryResolver },
|
236 | { type: core.ChangeDetectorRef },
|
237 | { type: core.Renderer2 },
|
238 | { type: DynamicDialogConfig },
|
239 | { type: DynamicDialogRef },
|
240 | { type: core.NgZone }
|
241 | ]; };
|
242 | __decorate$1([
|
243 | core.ViewChild(DynamicDialogContent)
|
244 | ], DynamicDialogComponent.prototype, "insertionPoint", void 0);
|
245 | __decorate$1([
|
246 | core.ViewChild('mask')
|
247 | ], DynamicDialogComponent.prototype, "maskViewChild", void 0);
|
248 | DynamicDialogComponent = __decorate$1([
|
249 | core.Component({
|
250 | selector: 'p-dynamicDialog',
|
251 | template: "\n <div #mask [ngClass]=\"{'ui-dialog-mask ui-dialog-visible':true, 'ui-widget-overlay ui-dialog-mask-scrollblocker': config.modal !== false}\">\n <div [ngClass]=\"{'ui-dialog ui-dynamicdialog ui-widget ui-widget-content ui-corner-all ui-shadow':true, 'ui-dialog-rtl': config.rtl}\" [ngStyle]=\"config.style\" [class]=\"config.styleClass\"\n [@animation]=\"{value: 'visible', params: {transform: transformOptions, transition: config.transitionOptions || '150ms cubic-bezier(0, 0, 0.2, 1)'}}\"\n (@animation.start)=\"onAnimationStart($event)\" (@animation.done)=\"onAnimationEnd($event)\" role=\"dialog\" *ngIf=\"visible\"\n [style.width]=\"config.width\" [style.height]=\"config.height\">\n <div class=\"ui-dialog-titlebar ui-widget-header ui-helper-clearfix ui-corner-top\" *ngIf=\"config.showHeader === false ? false: true\">\n <span class=\"ui-dialog-title\">{{config.header}}</span>\n <div class=\"ui-dialog-titlebar-icons\">\n <a [ngClass]=\"'ui-dialog-titlebar-icon ui-dialog-titlebar-close ui-corner-all'\" tabindex=\"0\" role=\"button\" (click)=\"close()\" (keydown.enter)=\"close()\" *ngIf=\"config.closable !== false\">\n <span class=\"pi pi-times\"></span>\n </a>\n </div>\n </div>\n <div class=\"ui-dialog-content ui-widget-content\" [ngStyle]=\"config.contentStyle\">\n <ng-template pDynamicDialogContent></ng-template>\n </div>\n <div class=\"ui-dialog-footer ui-widget-content\" *ngIf=\"config.footer\">\n {{config.footer}}\n </div>\n </div>\n </div>\n\t",
|
252 | animations: [
|
253 | animations.trigger('animation', [
|
254 | animations.transition('void => visible', [
|
255 | animations.useAnimation(showAnimation)
|
256 | ]),
|
257 | animations.transition('visible => void', [
|
258 | animations.useAnimation(hideAnimation)
|
259 | ])
|
260 | ])
|
261 | ],
|
262 | changeDetection: core.ChangeDetectionStrategy.Default
|
263 | })
|
264 | ], DynamicDialogComponent);
|
265 | return DynamicDialogComponent;
|
266 | }());
|
267 | var DynamicDialogModule = (function () {
|
268 | function DynamicDialogModule() {
|
269 | }
|
270 | DynamicDialogModule = __decorate$1([
|
271 | core.NgModule({
|
272 | imports: [common.CommonModule],
|
273 | declarations: [DynamicDialogComponent, DynamicDialogContent],
|
274 | entryComponents: [DynamicDialogComponent]
|
275 | })
|
276 | ], DynamicDialogModule);
|
277 | return DynamicDialogModule;
|
278 | }());
|
279 |
|
280 | var DynamicDialogInjector = (function () {
|
281 | function DynamicDialogInjector(_parentInjector, _additionalTokens) {
|
282 | this._parentInjector = _parentInjector;
|
283 | this._additionalTokens = _additionalTokens;
|
284 | }
|
285 | DynamicDialogInjector.prototype.get = function (token, notFoundValue, flags) {
|
286 | var value = this._additionalTokens.get(token);
|
287 | if (value)
|
288 | return value;
|
289 | return this._parentInjector.get(token, notFoundValue);
|
290 | };
|
291 | return DynamicDialogInjector;
|
292 | }());
|
293 |
|
294 | var __decorate$2 = (this && this.__decorate) || function (decorators, target, key, desc) {
|
295 | var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
296 | if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
297 | 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;
|
298 | return c > 3 && r && Object.defineProperty(target, key, r), r;
|
299 | };
|
300 | var DialogService = (function () {
|
301 | function DialogService(componentFactoryResolver, appRef, injector) {
|
302 | this.componentFactoryResolver = componentFactoryResolver;
|
303 | this.appRef = appRef;
|
304 | this.injector = injector;
|
305 | }
|
306 | DialogService.prototype.open = function (componentType, config) {
|
307 | var dialogRef = this.appendDialogComponentToBody(config);
|
308 | this.dialogComponentRef.instance.childComponentType = componentType;
|
309 | return dialogRef;
|
310 | };
|
311 | DialogService.prototype.appendDialogComponentToBody = function (config) {
|
312 | var _this = this;
|
313 | var map = new WeakMap();
|
314 | map.set(DynamicDialogConfig, config);
|
315 | var dialogRef = new DynamicDialogRef();
|
316 | map.set(DynamicDialogRef, dialogRef);
|
317 | var sub = dialogRef.onClose.subscribe(function () {
|
318 | _this.dialogComponentRef.instance.close();
|
319 | });
|
320 | var destroySub = dialogRef.onDestroy.subscribe(function () {
|
321 | _this.removeDialogComponentFromBody();
|
322 | destroySub.unsubscribe();
|
323 | sub.unsubscribe();
|
324 | });
|
325 | var componentFactory = this.componentFactoryResolver.resolveComponentFactory(DynamicDialogComponent);
|
326 | var componentRef = componentFactory.create(new DynamicDialogInjector(this.injector, map));
|
327 | this.appRef.attachView(componentRef.hostView);
|
328 | var domElem = componentRef.hostView.rootNodes[0];
|
329 | document.body.appendChild(domElem);
|
330 | this.dialogComponentRef = componentRef;
|
331 | return dialogRef;
|
332 | };
|
333 | DialogService.prototype.removeDialogComponentFromBody = function () {
|
334 | this.appRef.detachView(this.dialogComponentRef.hostView);
|
335 | this.dialogComponentRef.destroy();
|
336 | };
|
337 | DialogService.ctorParameters = function () { return [
|
338 | { type: core.ComponentFactoryResolver },
|
339 | { type: core.ApplicationRef },
|
340 | { type: core.Injector }
|
341 | ]; };
|
342 | DialogService = __decorate$2([
|
343 | core.Injectable()
|
344 | ], DialogService);
|
345 | return DialogService;
|
346 | }());
|
347 |
|
348 | exports.DialogService = DialogService;
|
349 | exports.DynamicDialogComponent = DynamicDialogComponent;
|
350 | exports.DynamicDialogConfig = DynamicDialogConfig;
|
351 | exports.DynamicDialogInjector = DynamicDialogInjector;
|
352 | exports.DynamicDialogModule = DynamicDialogModule;
|
353 | exports.DynamicDialogRef = DynamicDialogRef;
|
354 | exports.ɵa = DynamicDialogContent;
|
355 |
|
356 | Object.defineProperty(exports, '__esModule', { value: true });
|
357 |
|
358 | })));
|
359 |
|