1 | import { EventEmitter, Component, ChangeDetectionStrategy, ViewEncapsulation, ElementRef, Renderer2, NgZone, ChangeDetectorRef, Input, ContentChild, ContentChildren, ViewChild, Output, NgModule } from '@angular/core';
|
2 | import { animation, style, animate, trigger, transition, useAnimation } from '@angular/animations';
|
3 | import { CommonModule } from '@angular/common';
|
4 | import { DomHandler } from 'primeng/dom';
|
5 | import { Header, Footer, PrimeTemplate, SharedModule } from 'primeng/api';
|
6 | import { FocusTrapModule } from 'primeng/focustrap';
|
7 | import { RippleModule } from 'primeng/ripple';
|
8 |
|
9 | let idx = 0;
|
10 | const showAnimation = animation([
|
11 | style({ transform: '{{transform}}', opacity: 0 }),
|
12 | animate('{{transition}}')
|
13 | ]);
|
14 | const hideAnimation = animation([
|
15 | animate('{{transition}}', style({ transform: '{{transform}}', opacity: 0 }))
|
16 | ]);
|
17 | class Dialog {
|
18 | constructor(el, renderer, zone, cd) {
|
19 | this.el = el;
|
20 | this.renderer = renderer;
|
21 | this.zone = zone;
|
22 | this.cd = cd;
|
23 | this.draggable = true;
|
24 | this.resizable = true;
|
25 | this.closeOnEscape = true;
|
26 | this.closable = true;
|
27 | this.showHeader = true;
|
28 | this.blockScroll = false;
|
29 | this.autoZIndex = true;
|
30 | this.baseZIndex = 0;
|
31 | this.minX = 0;
|
32 | this.minY = 0;
|
33 | this.focusOnShow = true;
|
34 | this.keepInViewport = true;
|
35 | this.focusTrap = true;
|
36 | this.transitionOptions = '150ms cubic-bezier(0, 0, 0.2, 1)';
|
37 | this.closeIcon = 'pi pi-times';
|
38 | this.minimizeIcon = 'pi pi-window-minimize';
|
39 | this.maximizeIcon = 'pi pi-window-maximize';
|
40 | this.onShow = new EventEmitter();
|
41 | this.onHide = new EventEmitter();
|
42 | this.visibleChange = new EventEmitter();
|
43 | this.onResizeInit = new EventEmitter();
|
44 | this.onResizeEnd = new EventEmitter();
|
45 | this.onDragEnd = new EventEmitter();
|
46 | this.id = `p-dialog-${idx++}`;
|
47 | this._style = {};
|
48 | this._position = "center";
|
49 | this.transformOptions = "scale(0.7)";
|
50 | }
|
51 | get positionLeft() {
|
52 | return 0;
|
53 | }
|
54 | ;
|
55 | set positionLeft(_positionLeft) {
|
56 | console.log("positionLeft property is deprecated.");
|
57 | }
|
58 | get positionTop() {
|
59 | return 0;
|
60 | }
|
61 | ;
|
62 | set positionTop(_positionTop) {
|
63 | console.log("positionTop property is deprecated.");
|
64 | }
|
65 | get responsive() {
|
66 | return false;
|
67 | }
|
68 | ;
|
69 | set responsive(_responsive) {
|
70 | console.log("Responsive property is deprecated.");
|
71 | }
|
72 | get breakpoint() {
|
73 | return 649;
|
74 | }
|
75 | ;
|
76 | set breakpoint(_breakpoint) {
|
77 | console.log("Breakpoint property is not utilized and deprecated, use CSS media queries instead.");
|
78 | }
|
79 | ngAfterContentInit() {
|
80 | this.templates.forEach((item) => {
|
81 | switch (item.getType()) {
|
82 | case 'header':
|
83 | this.headerTemplate = item.template;
|
84 | break;
|
85 | case 'content':
|
86 | this.contentTemplate = item.template;
|
87 | break;
|
88 | case 'footer':
|
89 | this.footerTemplate = item.template;
|
90 | break;
|
91 | default:
|
92 | this.contentTemplate = item.template;
|
93 | break;
|
94 | }
|
95 | });
|
96 | }
|
97 | get visible() {
|
98 | return this._visible;
|
99 | }
|
100 | set visible(value) {
|
101 | this._visible = value;
|
102 | if (this._visible && !this.maskVisible) {
|
103 | this.maskVisible = true;
|
104 | }
|
105 | }
|
106 | get style() {
|
107 | return this._style;
|
108 | }
|
109 | set style(value) {
|
110 | if (value) {
|
111 | this._style = Object.assign({}, value);
|
112 | this.originalStyle = value;
|
113 | }
|
114 | }
|
115 | get position() {
|
116 | return this._position;
|
117 | }
|
118 | ;
|
119 | set position(value) {
|
120 | this._position = value;
|
121 | switch (value) {
|
122 | case 'topleft':
|
123 | case 'bottomleft':
|
124 | case 'left':
|
125 | this.transformOptions = "translate3d(-100%, 0px, 0px)";
|
126 | break;
|
127 | case 'topright':
|
128 | case 'bottomright':
|
129 | case 'right':
|
130 | this.transformOptions = "translate3d(100%, 0px, 0px)";
|
131 | break;
|
132 | case 'bottom':
|
133 | this.transformOptions = "translate3d(0px, 100%, 0px)";
|
134 | break;
|
135 | case 'top':
|
136 | this.transformOptions = "translate3d(0px, -100%, 0px)";
|
137 | break;
|
138 | default:
|
139 | this.transformOptions = "scale(0.7)";
|
140 | break;
|
141 | }
|
142 | }
|
143 | focus() {
|
144 | let focusable = DomHandler.findSingle(this.container, '[autofocus]');
|
145 | if (focusable) {
|
146 | this.zone.runOutsideAngular(() => {
|
147 | setTimeout(() => focusable.focus(), 5);
|
148 | });
|
149 | }
|
150 | }
|
151 | close(event) {
|
152 | this.visibleChange.emit(false);
|
153 | event.preventDefault();
|
154 | }
|
155 | enableModality() {
|
156 | if (this.closable && this.dismissableMask) {
|
157 | this.maskClickListener = this.renderer.listen(this.wrapper, 'click', (event) => {
|
158 | if (this.wrapper && this.wrapper.isSameNode(event.target)) {
|
159 | this.close(event);
|
160 | }
|
161 | });
|
162 | }
|
163 | if (this.modal) {
|
164 | DomHandler.addClass(document.body, 'p-overflow-hidden');
|
165 | }
|
166 | }
|
167 | disableModality() {
|
168 | if (this.wrapper) {
|
169 | if (this.dismissableMask) {
|
170 | this.unbindMaskClickListener();
|
171 | }
|
172 | if (this.modal) {
|
173 | DomHandler.removeClass(document.body, 'p-overflow-hidden');
|
174 | }
|
175 | if (!this.cd.destroyed) {
|
176 | this.cd.detectChanges();
|
177 | }
|
178 | }
|
179 | }
|
180 | maximize() {
|
181 | this.maximized = !this.maximized;
|
182 | if (!this.modal && !this.blockScroll) {
|
183 | if (this.maximized)
|
184 | DomHandler.addClass(document.body, 'p-overflow-hidden');
|
185 | else
|
186 | DomHandler.removeClass(document.body, 'p-overflow-hidden');
|
187 | }
|
188 | }
|
189 | unbindMaskClickListener() {
|
190 | if (this.maskClickListener) {
|
191 | this.maskClickListener();
|
192 | this.maskClickListener = null;
|
193 | }
|
194 | }
|
195 | moveOnTop() {
|
196 | if (this.autoZIndex) {
|
197 | this.container.style.zIndex = String(this.baseZIndex + (++DomHandler.zindex));
|
198 | this.wrapper.style.zIndex = String(this.baseZIndex + (DomHandler.zindex - 1));
|
199 | }
|
200 | }
|
201 | initDrag(event) {
|
202 | if (DomHandler.hasClass(event.target, 'p-dialog-header-icon') || DomHandler.hasClass(event.target.parentElement, 'p-dialog-header-icon')) {
|
203 | return;
|
204 | }
|
205 | if (this.draggable) {
|
206 | this.dragging = true;
|
207 | this.lastPageX = event.pageX;
|
208 | this.lastPageY = event.pageY;
|
209 | this.container.style.margin = '0';
|
210 | DomHandler.addClass(document.body, 'p-unselectable-text');
|
211 | }
|
212 | }
|
213 | onKeydown(event) {
|
214 | if (this.focusTrap) {
|
215 | if (event.which === 9) {
|
216 | event.preventDefault();
|
217 | let focusableElements = DomHandler.getFocusableElements(this.container);
|
218 | if (focusableElements && focusableElements.length > 0) {
|
219 | if (!focusableElements[0].ownerDocument.activeElement) {
|
220 | focusableElements[0].focus();
|
221 | }
|
222 | else {
|
223 | let focusedIndex = focusableElements.indexOf(focusableElements[0].ownerDocument.activeElement);
|
224 | if (event.shiftKey) {
|
225 | if (focusedIndex == -1 || focusedIndex === 0)
|
226 | focusableElements[focusableElements.length - 1].focus();
|
227 | else
|
228 | focusableElements[focusedIndex - 1].focus();
|
229 | }
|
230 | else {
|
231 | if (focusedIndex == -1 || focusedIndex === (focusableElements.length - 1))
|
232 | focusableElements[0].focus();
|
233 | else
|
234 | focusableElements[focusedIndex + 1].focus();
|
235 | }
|
236 | }
|
237 | }
|
238 | }
|
239 | }
|
240 | }
|
241 | onDrag(event) {
|
242 | if (this.dragging) {
|
243 | let containerWidth = DomHandler.getOuterWidth(this.container);
|
244 | let containerHeight = DomHandler.getOuterHeight(this.container);
|
245 | let deltaX = event.pageX - this.lastPageX;
|
246 | let deltaY = event.pageY - this.lastPageY;
|
247 | let offset = DomHandler.getOffset(this.container);
|
248 | let leftPos = offset.left + deltaX;
|
249 | let topPos = offset.top + deltaY;
|
250 | let viewport = DomHandler.getViewport();
|
251 | this.container.style.position = 'fixed';
|
252 | if (this.keepInViewport) {
|
253 | if (leftPos >= this.minX && (leftPos + containerWidth) < viewport.width) {
|
254 | this._style.left = leftPos + 'px';
|
255 | this.lastPageX = event.pageX;
|
256 | this.container.style.left = leftPos + 'px';
|
257 | }
|
258 | if (topPos >= this.minY && (topPos + containerHeight) < viewport.height) {
|
259 | this._style.top = topPos + 'px';
|
260 | this.lastPageY = event.pageY;
|
261 | this.container.style.top = topPos + 'px';
|
262 | }
|
263 | }
|
264 | else {
|
265 | this.lastPageX = event.pageX;
|
266 | this.container.style.left = leftPos + 'px';
|
267 | this.lastPageY = event.pageY;
|
268 | this.container.style.top = topPos + 'px';
|
269 | }
|
270 | }
|
271 | }
|
272 | endDrag(event) {
|
273 | if (this.dragging) {
|
274 | this.dragging = false;
|
275 | DomHandler.removeClass(document.body, 'p-unselectable-text');
|
276 | this.cd.detectChanges();
|
277 | this.onDragEnd.emit(event);
|
278 | }
|
279 | }
|
280 | resetPosition() {
|
281 | this.container.style.position = '';
|
282 | this.container.style.left = '';
|
283 | this.container.style.top = '';
|
284 | this.container.style.margin = '';
|
285 | }
|
286 |
|
287 | center() {
|
288 | this.resetPosition();
|
289 | }
|
290 | initResize(event) {
|
291 | if (this.resizable) {
|
292 | this.resizing = true;
|
293 | this.lastPageX = event.pageX;
|
294 | this.lastPageY = event.pageY;
|
295 | DomHandler.addClass(document.body, 'p-unselectable-text');
|
296 | this.onResizeInit.emit(event);
|
297 | }
|
298 | }
|
299 | onResize(event) {
|
300 | if (this.resizing) {
|
301 | let deltaX = event.pageX - this.lastPageX;
|
302 | let deltaY = event.pageY - this.lastPageY;
|
303 | let containerWidth = DomHandler.getOuterWidth(this.container);
|
304 | let containerHeight = DomHandler.getOuterHeight(this.container);
|
305 | let contentHeight = DomHandler.getOuterHeight(this.contentViewChild.nativeElement);
|
306 | let newWidth = containerWidth + deltaX;
|
307 | let newHeight = containerHeight + deltaY;
|
308 | let minWidth = this.container.style.minWidth;
|
309 | let minHeight = this.container.style.minHeight;
|
310 | let offset = DomHandler.getOffset(this.container);
|
311 | let viewport = DomHandler.getViewport();
|
312 | let hasBeenDragged = !parseInt(this.container.style.top) || !parseInt(this.container.style.left);
|
313 | if (hasBeenDragged) {
|
314 | newWidth += deltaX;
|
315 | newHeight += deltaY;
|
316 | }
|
317 | if ((!minWidth || newWidth > parseInt(minWidth)) && (offset.left + newWidth) < viewport.width) {
|
318 | this._style.width = newWidth + 'px';
|
319 | this.container.style.width = this._style.width;
|
320 | }
|
321 | if ((!minHeight || newHeight > parseInt(minHeight)) && (offset.top + newHeight) < viewport.height) {
|
322 | this.contentViewChild.nativeElement.style.height = contentHeight + newHeight - containerHeight + 'px';
|
323 | if (this._style.height) {
|
324 | this._style.height = newHeight + 'px';
|
325 | this.container.style.height = this._style.height;
|
326 | }
|
327 | }
|
328 | this.lastPageX = event.pageX;
|
329 | this.lastPageY = event.pageY;
|
330 | }
|
331 | }
|
332 | resizeEnd(event) {
|
333 | if (this.resizing) {
|
334 | this.resizing = false;
|
335 | DomHandler.removeClass(document.body, 'p-unselectable-text');
|
336 | this.onResizeEnd.emit(event);
|
337 | }
|
338 | }
|
339 | bindGlobalListeners() {
|
340 | if (this.draggable) {
|
341 | this.bindDocumentDragListener();
|
342 | this.bindDocumentDragEndListener();
|
343 | }
|
344 | if (this.resizable) {
|
345 | this.bindDocumentResizeListeners();
|
346 | }
|
347 | if (this.closeOnEscape && this.closable) {
|
348 | this.bindDocumentEscapeListener();
|
349 | }
|
350 | }
|
351 | unbindGlobalListeners() {
|
352 | this.unbindDocumentDragListener();
|
353 | this.unbindDocumentDragEndListener();
|
354 | this.unbindDocumentResizeListeners();
|
355 | this.unbindDocumentEscapeListener();
|
356 | }
|
357 | bindDocumentDragListener() {
|
358 | this.zone.runOutsideAngular(() => {
|
359 | this.documentDragListener = this.onDrag.bind(this);
|
360 | window.document.addEventListener('mousemove', this.documentDragListener);
|
361 | });
|
362 | }
|
363 | unbindDocumentDragListener() {
|
364 | if (this.documentDragListener) {
|
365 | window.document.removeEventListener('mousemove', this.documentDragListener);
|
366 | this.documentDragListener = null;
|
367 | }
|
368 | }
|
369 | bindDocumentDragEndListener() {
|
370 | this.zone.runOutsideAngular(() => {
|
371 | this.documentDragEndListener = this.endDrag.bind(this);
|
372 | window.document.addEventListener('mouseup', this.documentDragEndListener);
|
373 | });
|
374 | }
|
375 | unbindDocumentDragEndListener() {
|
376 | if (this.documentDragEndListener) {
|
377 | window.document.removeEventListener('mouseup', this.documentDragEndListener);
|
378 | this.documentDragEndListener = null;
|
379 | }
|
380 | }
|
381 | bindDocumentResizeListeners() {
|
382 | this.zone.runOutsideAngular(() => {
|
383 | this.documentResizeListener = this.onResize.bind(this);
|
384 | this.documentResizeEndListener = this.resizeEnd.bind(this);
|
385 | window.document.addEventListener('mousemove', this.documentResizeListener);
|
386 | window.document.addEventListener('mouseup', this.documentResizeEndListener);
|
387 | });
|
388 | }
|
389 | unbindDocumentResizeListeners() {
|
390 | if (this.documentResizeListener && this.documentResizeEndListener) {
|
391 | window.document.removeEventListener('mousemove', this.documentResizeListener);
|
392 | window.document.removeEventListener('mouseup', this.documentResizeEndListener);
|
393 | this.documentResizeListener = null;
|
394 | this.documentResizeEndListener = null;
|
395 | }
|
396 | }
|
397 | bindDocumentEscapeListener() {
|
398 | const documentTarget = this.el ? this.el.nativeElement.ownerDocument : 'document';
|
399 | this.documentEscapeListener = this.renderer.listen(documentTarget, 'keydown', (event) => {
|
400 | if (event.which == 27) {
|
401 | if (parseInt(this.container.style.zIndex) === (DomHandler.zindex + this.baseZIndex)) {
|
402 | this.close(event);
|
403 | }
|
404 | }
|
405 | });
|
406 | }
|
407 | unbindDocumentEscapeListener() {
|
408 | if (this.documentEscapeListener) {
|
409 | this.documentEscapeListener();
|
410 | this.documentEscapeListener = null;
|
411 | }
|
412 | }
|
413 | appendContainer() {
|
414 | if (this.appendTo) {
|
415 | if (this.appendTo === 'body')
|
416 | document.body.appendChild(this.wrapper);
|
417 | else
|
418 | DomHandler.appendChild(this.wrapper, this.appendTo);
|
419 | }
|
420 | }
|
421 | restoreAppend() {
|
422 | if (this.container && this.appendTo) {
|
423 | this.el.nativeElement.appendChild(this.wrapper);
|
424 | }
|
425 | }
|
426 | onAnimationStart(event) {
|
427 | switch (event.toState) {
|
428 | case 'visible':
|
429 | this.container = event.element;
|
430 | this.wrapper = this.container.parentElement;
|
431 | this.onShow.emit({});
|
432 | this.appendContainer();
|
433 | this.moveOnTop();
|
434 | this.bindGlobalListeners();
|
435 | if (this.modal) {
|
436 | this.enableModality();
|
437 | }
|
438 | if (!this.modal && this.blockScroll) {
|
439 | DomHandler.addClass(document.body, 'p-overflow-hidden');
|
440 | }
|
441 | if (this.focusOnShow) {
|
442 | this.focus();
|
443 | }
|
444 | break;
|
445 | }
|
446 | }
|
447 | onAnimationEnd(event) {
|
448 | switch (event.toState) {
|
449 | case 'void':
|
450 | this.onContainerDestroy();
|
451 | this.onHide.emit({});
|
452 | break;
|
453 | }
|
454 | }
|
455 | onContainerDestroy() {
|
456 | this.unbindGlobalListeners();
|
457 | this.dragging = false;
|
458 | this.maskVisible = false;
|
459 | if (this.maximized) {
|
460 | DomHandler.removeClass(document.body, 'p-overflow-hidden');
|
461 | this.maximized = false;
|
462 | }
|
463 | if (this.modal) {
|
464 | this.disableModality();
|
465 | }
|
466 | if (this.blockScroll) {
|
467 | DomHandler.removeClass(document.body, 'p-overflow-hidden');
|
468 | }
|
469 | this.container = null;
|
470 | this.wrapper = null;
|
471 | this._style = this.originalStyle ? Object.assign({}, this.originalStyle) : {};
|
472 | }
|
473 | ngOnDestroy() {
|
474 | if (this.container) {
|
475 | this.restoreAppend();
|
476 | this.onContainerDestroy();
|
477 | }
|
478 | }
|
479 | }
|
480 | Dialog.decorators = [
|
481 | { type: Component, args: [{
|
482 | selector: 'p-dialog',
|
483 | template: `
|
484 | <div *ngIf="maskVisible" [class]="maskStyleClass"
|
485 | [ngClass]="{'p-dialog-mask': true, 'p-component-overlay': this.modal, 'p-dialog-mask-scrollblocker': this.modal || this.blockScroll,
|
486 | 'p-dialog-left': position === 'left',
|
487 | 'p-dialog-right': position === 'right',
|
488 | 'p-dialog-top': position === 'top',
|
489 | 'p-dialog-top-left': position === 'topleft' || position === 'top-left',
|
490 | 'p-dialog-top-right': position === 'topright' || position === 'top-right',
|
491 | 'p-dialog-bottom': position === 'bottom',
|
492 | 'p-dialog-bottom-left': position === 'bottomleft' || position === 'bottom-left',
|
493 | 'p-dialog-bottom-right': position === 'bottomright' || position === 'bottom-right'}">
|
494 | <div #container [ngClass]="{'p-dialog p-component':true, 'p-dialog-rtl':rtl,'p-dialog-draggable':draggable,'p-dialog-resizable':resizable, 'p-dialog-maximized': maximized}"
|
495 | [ngStyle]="style" [class]="styleClass" *ngIf="visible" pFocusTrap [pFocusTrapDisabled]="focusTrap === false"
|
496 | [@animation]="{value: 'visible', params: {transform: transformOptions, transition: transitionOptions}}" (@animation.start)="onAnimationStart($event)" (@animation.done)="onAnimationEnd($event)" role="dialog" [attr.aria-labelledby]="id + '-label'">
|
497 | <div #titlebar class="p-dialog-header" (mousedown)="initDrag($event)" *ngIf="showHeader">
|
498 | <span [attr.id]="id + '-label'" class="p-dialog-title" *ngIf="header">{{header}}</span>
|
499 | <span [attr.id]="id + '-label'" class="p-dialog-title" *ngIf="headerFacet">
|
500 | <ng-content select="p-header"></ng-content>
|
501 | </span>
|
502 | <ng-container *ngTemplateOutlet="headerTemplate"></ng-container>
|
503 | <div class="p-dialog-header-icons">
|
504 | <button *ngIf="maximizable" type="button" [ngClass]="{'p-dialog-header-icon p-dialog-header-maximize p-link':true}" (click)="maximize()" (keydown.enter)="maximize()" tabindex="-1" pRipple>
|
505 | <span class="p-dialog-header-maximize-icon" [ngClass]="maximized ? minimizeIcon : maximizeIcon"></span>
|
506 | </button>
|
507 | <button *ngIf="closable" type="button" [ngClass]="{'p-dialog-header-icon p-dialog-header-close p-link':true}" (click)="close($event)" (keydown.enter)="close($event)" tabindex="-1" pRipple>
|
508 | <span class="p-dialog-header-close-icon" [ngClass]="closeIcon"></span>
|
509 | </button>
|
510 | </div>
|
511 | </div>
|
512 | <div #content [ngClass]="'p-dialog-content'" [ngStyle]="contentStyle" [class]="contentStyleClass">
|
513 | <ng-content></ng-content>
|
514 | <ng-container *ngTemplateOutlet="contentTemplate"></ng-container>
|
515 | </div>
|
516 | <div #footer class="p-dialog-footer" *ngIf="footerFacet || footerTemplate">
|
517 | <ng-content select="p-footer"></ng-content>
|
518 | <ng-container *ngTemplateOutlet="footerTemplate"></ng-container>
|
519 | </div>
|
520 | <div *ngIf="resizable" class="p-resizable-handle" style="z-index: 90;" (mousedown)="initResize($event)"></div>
|
521 | </div>
|
522 | </div>
|
523 | `,
|
524 | animations: [
|
525 | trigger('animation', [
|
526 | transition('void => visible', [
|
527 | useAnimation(showAnimation)
|
528 | ]),
|
529 | transition('visible => void', [
|
530 | useAnimation(hideAnimation)
|
531 | ])
|
532 | ])
|
533 | ],
|
534 | changeDetection: ChangeDetectionStrategy.OnPush,
|
535 | encapsulation: ViewEncapsulation.None,
|
536 | styles: [".p-dialog-mask{-ms-flex-align:center;-ms-flex-pack:center;align-items:center;background-color:rgba(0,0,0,0);display:-ms-flexbox;display:flex;height:100%;justify-content:center;left:0;pointer-events:none;position:fixed;top:0;transition-property:background-color;width:100%}.p-dialog,.p-dialog-mask.p-component-overlay{pointer-events:auto}.p-dialog{-ms-flex-direction:column;-ms-transform:scale(1);display:-ms-flexbox;display:flex;flex-direction:column;max-height:90%;position:relative;transform:scale(1)}.p-dialog-content{overflow-y:auto}.p-dialog-header{-ms-flex-align:center;-ms-flex-pack:justify;align-items:center;display:-ms-flexbox;display:flex;justify-content:space-between}.p-dialog-footer,.p-dialog-header{-ms-flex-negative:0;flex-shrink:0}.p-dialog .p-dialog-header-icon,.p-dialog .p-dialog-header-icons{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex}.p-dialog .p-dialog-header-icon{-ms-flex-pack:center;justify-content:center;overflow:hidden;position:relative}.p-dialog-mask.p-dialog-mask-leave{background-color:rgba(0,0,0,0)}.p-fluid .p-dialog-footer .p-button{width:auto}.p-dialog-bottom-left .p-dialog,.p-dialog-bottom-right .p-dialog,.p-dialog-bottom .p-dialog,.p-dialog-left .p-dialog,.p-dialog-right .p-dialog,.p-dialog-top-left .p-dialog,.p-dialog-top-right .p-dialog,.p-dialog-top .p-dialog{margin:.75rem;transform:translateZ(0)}.p-dialog-maximized{-ms-transform:none;height:100%;max-height:100%;transform:none;transition:none;width:100vw!important}.p-dialog-maximized .p-dialog-content{-ms-flex-positive:1;flex-grow:1}.p-dialog-left{-ms-flex-pack:start;justify-content:flex-start}.p-dialog-right{-ms-flex-pack:end;justify-content:flex-end}.p-dialog-top,.p-dialog-top-left{-ms-flex-align:start;align-items:flex-start}.p-dialog-top-left{-ms-flex-pack:start;justify-content:flex-start}.p-dialog-top-right{-ms-flex-align:start;-ms-flex-pack:end;align-items:flex-start;justify-content:flex-end}.p-dialog-bottom,.p-dialog-bottom-left{-ms-flex-align:end;align-items:flex-end}.p-dialog-bottom-left{-ms-flex-pack:start;justify-content:flex-start}.p-dialog-bottom-right{-ms-flex-align:end;-ms-flex-pack:end;align-items:flex-end;justify-content:flex-end}.p-dialog .p-resizable-handle{bottom:1px;cursor:se-resize;display:block;font-size:.1px;height:12px;position:absolute;right:1px;width:12px}.p-confirm-dialog .p-dialog-content{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex}"]
|
537 | },] }
|
538 | ];
|
539 | Dialog.ctorParameters = () => [
|
540 | { type: ElementRef },
|
541 | { type: Renderer2 },
|
542 | { type: NgZone },
|
543 | { type: ChangeDetectorRef }
|
544 | ];
|
545 | Dialog.propDecorators = {
|
546 | header: [{ type: Input }],
|
547 | draggable: [{ type: Input }],
|
548 | resizable: [{ type: Input }],
|
549 | positionLeft: [{ type: Input }],
|
550 | positionTop: [{ type: Input }],
|
551 | contentStyle: [{ type: Input }],
|
552 | contentStyleClass: [{ type: Input }],
|
553 | modal: [{ type: Input }],
|
554 | closeOnEscape: [{ type: Input }],
|
555 | dismissableMask: [{ type: Input }],
|
556 | rtl: [{ type: Input }],
|
557 | closable: [{ type: Input }],
|
558 | responsive: [{ type: Input }],
|
559 | appendTo: [{ type: Input }],
|
560 | styleClass: [{ type: Input }],
|
561 | maskStyleClass: [{ type: Input }],
|
562 | showHeader: [{ type: Input }],
|
563 | breakpoint: [{ type: Input }],
|
564 | blockScroll: [{ type: Input }],
|
565 | autoZIndex: [{ type: Input }],
|
566 | baseZIndex: [{ type: Input }],
|
567 | minX: [{ type: Input }],
|
568 | minY: [{ type: Input }],
|
569 | focusOnShow: [{ type: Input }],
|
570 | maximizable: [{ type: Input }],
|
571 | keepInViewport: [{ type: Input }],
|
572 | focusTrap: [{ type: Input }],
|
573 | transitionOptions: [{ type: Input }],
|
574 | closeIcon: [{ type: Input }],
|
575 | minimizeIcon: [{ type: Input }],
|
576 | maximizeIcon: [{ type: Input }],
|
577 | headerFacet: [{ type: ContentChild, args: [Header,] }],
|
578 | footerFacet: [{ type: ContentChild, args: [Footer,] }],
|
579 | templates: [{ type: ContentChildren, args: [PrimeTemplate,] }],
|
580 | headerViewChild: [{ type: ViewChild, args: ['titlebar',] }],
|
581 | contentViewChild: [{ type: ViewChild, args: ['content',] }],
|
582 | footerViewChild: [{ type: ViewChild, args: ['footer',] }],
|
583 | onShow: [{ type: Output }],
|
584 | onHide: [{ type: Output }],
|
585 | visibleChange: [{ type: Output }],
|
586 | onResizeInit: [{ type: Output }],
|
587 | onResizeEnd: [{ type: Output }],
|
588 | onDragEnd: [{ type: Output }],
|
589 | visible: [{ type: Input }],
|
590 | style: [{ type: Input }],
|
591 | position: [{ type: Input }]
|
592 | };
|
593 | class DialogModule {
|
594 | }
|
595 | DialogModule.decorators = [
|
596 | { type: NgModule, args: [{
|
597 | imports: [CommonModule, FocusTrapModule, RippleModule],
|
598 | exports: [Dialog, SharedModule],
|
599 | declarations: [Dialog]
|
600 | },] }
|
601 | ];
|
602 |
|
603 |
|
604 |
|
605 |
|
606 |
|
607 | export { Dialog, DialogModule };
|
608 |
|