source: trip-planner-front/node_modules/primeng/fesm2020/primeng-dialog.mjs@ 1ad8e64

Last change on this file since 1ad8e64 was 59329aa, checked in by Ema <ema_spirova@…>, 3 years ago

adding photos
  • Property mode set to 100644
File size: 37.4 KB
RevLine 
[59329aa]1import * as i0 from '@angular/core';
2import { EventEmitter, Component, ChangeDetectionStrategy, ViewEncapsulation, Input, ContentChild, ContentChildren, ViewChild, Output, NgModule } from '@angular/core';
3import { animation, style, animate, trigger, transition, useAnimation } from '@angular/animations';
4import * as i2 from '@angular/common';
5import { CommonModule } from '@angular/common';
6import { DomHandler } from 'primeng/dom';
7import * as i1 from 'primeng/api';
8import { Header, Footer, PrimeTemplate, SharedModule } from 'primeng/api';
9import * as i3 from 'primeng/focustrap';
10import { FocusTrapModule } from 'primeng/focustrap';
11import * as i4 from 'primeng/ripple';
12import { RippleModule } from 'primeng/ripple';
13import { UniqueComponentId, ZIndexUtils } from 'primeng/utils';
14
15const showAnimation = animation([
16 style({ transform: '{{transform}}', opacity: 0 }),
17 animate('{{transition}}')
18]);
19const hideAnimation = animation([
20 animate('{{transition}}', style({ transform: '{{transform}}', opacity: 0 }))
21]);
22class Dialog {
23 constructor(el, renderer, zone, cd, config) {
24 this.el = el;
25 this.renderer = renderer;
26 this.zone = zone;
27 this.cd = cd;
28 this.config = config;
29 this.draggable = true;
30 this.resizable = true;
31 this.closeOnEscape = true;
32 this.closable = true;
33 this.showHeader = true;
34 this.blockScroll = false;
35 this.autoZIndex = true;
36 this.baseZIndex = 0;
37 this.minX = 0;
38 this.minY = 0;
39 this.focusOnShow = true;
40 this.keepInViewport = true;
41 this.focusTrap = true;
42 this.transitionOptions = '150ms cubic-bezier(0, 0, 0.2, 1)';
43 this.closeIcon = 'pi pi-times';
44 this.closeTabindex = "-1";
45 this.minimizeIcon = 'pi pi-window-minimize';
46 this.maximizeIcon = 'pi pi-window-maximize';
47 this.onShow = new EventEmitter();
48 this.onHide = new EventEmitter();
49 this.visibleChange = new EventEmitter();
50 this.onResizeInit = new EventEmitter();
51 this.onResizeEnd = new EventEmitter();
52 this.onDragEnd = new EventEmitter();
53 this.onMaximize = new EventEmitter();
54 this.id = UniqueComponentId();
55 this._style = {};
56 this._position = "center";
57 this.transformOptions = "scale(0.7)";
58 }
59 get positionLeft() {
60 return 0;
61 }
62 ;
63 set positionLeft(_positionLeft) {
64 console.log("positionLeft property is deprecated.");
65 }
66 get positionTop() {
67 return 0;
68 }
69 ;
70 set positionTop(_positionTop) {
71 console.log("positionTop property is deprecated.");
72 }
73 get responsive() {
74 return false;
75 }
76 ;
77 set responsive(_responsive) {
78 console.log("Responsive property is deprecated.");
79 }
80 get breakpoint() {
81 return 649;
82 }
83 ;
84 set breakpoint(_breakpoint) {
85 console.log("Breakpoint property is not utilized and deprecated, use breakpoints or CSS media queries instead.");
86 }
87 ngAfterContentInit() {
88 this.templates.forEach((item) => {
89 switch (item.getType()) {
90 case 'header':
91 this.headerTemplate = item.template;
92 break;
93 case 'content':
94 this.contentTemplate = item.template;
95 break;
96 case 'footer':
97 this.footerTemplate = item.template;
98 break;
99 default:
100 this.contentTemplate = item.template;
101 break;
102 }
103 });
104 }
105 ngOnInit() {
106 if (this.breakpoints) {
107 this.createStyle();
108 }
109 }
110 get visible() {
111 return this._visible;
112 }
113 set visible(value) {
114 this._visible = value;
115 if (this._visible && !this.maskVisible) {
116 this.maskVisible = true;
117 }
118 }
119 get style() {
120 return this._style;
121 }
122 set style(value) {
123 if (value) {
124 this._style = { ...value };
125 this.originalStyle = value;
126 }
127 }
128 get position() {
129 return this._position;
130 }
131 ;
132 set position(value) {
133 this._position = value;
134 switch (value) {
135 case 'topleft':
136 case 'bottomleft':
137 case 'left':
138 this.transformOptions = "translate3d(-100%, 0px, 0px)";
139 break;
140 case 'topright':
141 case 'bottomright':
142 case 'right':
143 this.transformOptions = "translate3d(100%, 0px, 0px)";
144 break;
145 case 'bottom':
146 this.transformOptions = "translate3d(0px, 100%, 0px)";
147 break;
148 case 'top':
149 this.transformOptions = "translate3d(0px, -100%, 0px)";
150 break;
151 default:
152 this.transformOptions = "scale(0.7)";
153 break;
154 }
155 }
156 focus() {
157 let focusable = DomHandler.findSingle(this.container, '[autofocus]');
158 if (focusable) {
159 this.zone.runOutsideAngular(() => {
160 setTimeout(() => focusable.focus(), 5);
161 });
162 }
163 }
164 close(event) {
165 this.visibleChange.emit(false);
166 event.preventDefault();
167 }
168 enableModality() {
169 if (this.closable && this.dismissableMask) {
170 this.maskClickListener = this.renderer.listen(this.wrapper, 'mousedown', (event) => {
171 if (this.wrapper && this.wrapper.isSameNode(event.target)) {
172 this.close(event);
173 }
174 });
175 }
176 if (this.modal) {
177 DomHandler.addClass(document.body, 'p-overflow-hidden');
178 }
179 }
180 disableModality() {
181 if (this.wrapper) {
182 if (this.dismissableMask) {
183 this.unbindMaskClickListener();
184 }
185 if (this.modal) {
186 DomHandler.removeClass(document.body, 'p-overflow-hidden');
187 }
188 if (!this.cd.destroyed) {
189 this.cd.detectChanges();
190 }
191 }
192 }
193 maximize() {
194 this.maximized = !this.maximized;
195 if (!this.modal && !this.blockScroll) {
196 if (this.maximized)
197 DomHandler.addClass(document.body, 'p-overflow-hidden');
198 else
199 DomHandler.removeClass(document.body, 'p-overflow-hidden');
200 }
201 this.onMaximize.emit({ 'maximized': this.maximized });
202 }
203 unbindMaskClickListener() {
204 if (this.maskClickListener) {
205 this.maskClickListener();
206 this.maskClickListener = null;
207 }
208 }
209 moveOnTop() {
210 if (this.autoZIndex) {
211 ZIndexUtils.set('modal', this.container, this.baseZIndex + this.config.zIndex.modal);
212 this.wrapper.style.zIndex = String(parseInt(this.container.style.zIndex, 10) - 1);
213 }
214 }
215 createStyle() {
216 if (!this.styleElement) {
217 this.styleElement = document.createElement('style');
218 this.styleElement.type = 'text/css';
219 document.head.appendChild(this.styleElement);
220 let innerHTML = '';
221 for (let breakpoint in this.breakpoints) {
222 innerHTML += `
223 @media screen and (max-width: ${breakpoint}) {
224 .p-dialog[${this.id}] {
225 width: ${this.breakpoints[breakpoint]} !important;
226 }
227 }
228 `;
229 }
230 this.styleElement.innerHTML = innerHTML;
231 }
232 }
233 initDrag(event) {
234 if (DomHandler.hasClass(event.target, 'p-dialog-header-icon') || DomHandler.hasClass(event.target.parentElement, 'p-dialog-header-icon')) {
235 return;
236 }
237 if (this.draggable) {
238 this.dragging = true;
239 this.lastPageX = event.pageX;
240 this.lastPageY = event.pageY;
241 this.container.style.margin = '0';
242 DomHandler.addClass(document.body, 'p-unselectable-text');
243 }
244 }
245 onKeydown(event) {
246 if (this.focusTrap) {
247 if (event.which === 9) {
248 event.preventDefault();
249 let focusableElements = DomHandler.getFocusableElements(this.container);
250 if (focusableElements && focusableElements.length > 0) {
251 if (!focusableElements[0].ownerDocument.activeElement) {
252 focusableElements[0].focus();
253 }
254 else {
255 let focusedIndex = focusableElements.indexOf(focusableElements[0].ownerDocument.activeElement);
256 if (event.shiftKey) {
257 if (focusedIndex == -1 || focusedIndex === 0)
258 focusableElements[focusableElements.length - 1].focus();
259 else
260 focusableElements[focusedIndex - 1].focus();
261 }
262 else {
263 if (focusedIndex == -1 || focusedIndex === (focusableElements.length - 1))
264 focusableElements[0].focus();
265 else
266 focusableElements[focusedIndex + 1].focus();
267 }
268 }
269 }
270 }
271 }
272 }
273 onDrag(event) {
274 if (this.dragging) {
275 let containerWidth = DomHandler.getOuterWidth(this.container);
276 let containerHeight = DomHandler.getOuterHeight(this.container);
277 let deltaX = event.pageX - this.lastPageX;
278 let deltaY = event.pageY - this.lastPageY;
279 let offset = DomHandler.getOffset(this.container);
280 let leftPos = offset.left + deltaX;
281 let topPos = offset.top + deltaY;
282 let viewport = DomHandler.getViewport();
283 this.container.style.position = 'fixed';
284 if (this.keepInViewport) {
285 if (leftPos >= this.minX && (leftPos + containerWidth) < viewport.width) {
286 this._style.left = leftPos + 'px';
287 this.lastPageX = event.pageX;
288 this.container.style.left = leftPos + 'px';
289 }
290 if (topPos >= this.minY && (topPos + containerHeight) < viewport.height) {
291 this._style.top = topPos + 'px';
292 this.lastPageY = event.pageY;
293 this.container.style.top = topPos + 'px';
294 }
295 }
296 else {
297 this.lastPageX = event.pageX;
298 this.container.style.left = leftPos + 'px';
299 this.lastPageY = event.pageY;
300 this.container.style.top = topPos + 'px';
301 }
302 }
303 }
304 endDrag(event) {
305 if (this.dragging) {
306 this.dragging = false;
307 DomHandler.removeClass(document.body, 'p-unselectable-text');
308 this.cd.detectChanges();
309 this.onDragEnd.emit(event);
310 }
311 }
312 resetPosition() {
313 this.container.style.position = '';
314 this.container.style.left = '';
315 this.container.style.top = '';
316 this.container.style.margin = '';
317 }
318 //backward compatibility
319 center() {
320 this.resetPosition();
321 }
322 initResize(event) {
323 if (this.resizable) {
324 this.resizing = true;
325 this.lastPageX = event.pageX;
326 this.lastPageY = event.pageY;
327 DomHandler.addClass(document.body, 'p-unselectable-text');
328 this.onResizeInit.emit(event);
329 }
330 }
331 onResize(event) {
332 if (this.resizing) {
333 let deltaX = event.pageX - this.lastPageX;
334 let deltaY = event.pageY - this.lastPageY;
335 let containerWidth = DomHandler.getOuterWidth(this.container);
336 let containerHeight = DomHandler.getOuterHeight(this.container);
337 let contentHeight = DomHandler.getOuterHeight(this.contentViewChild.nativeElement);
338 let newWidth = containerWidth + deltaX;
339 let newHeight = containerHeight + deltaY;
340 let minWidth = this.container.style.minWidth;
341 let minHeight = this.container.style.minHeight;
342 let offset = DomHandler.getOffset(this.container);
343 let viewport = DomHandler.getViewport();
344 let hasBeenDragged = !parseInt(this.container.style.top) || !parseInt(this.container.style.left);
345 if (hasBeenDragged) {
346 newWidth += deltaX;
347 newHeight += deltaY;
348 }
349 if ((!minWidth || newWidth > parseInt(minWidth)) && (offset.left + newWidth) < viewport.width) {
350 this._style.width = newWidth + 'px';
351 this.container.style.width = this._style.width;
352 }
353 if ((!minHeight || newHeight > parseInt(minHeight)) && (offset.top + newHeight) < viewport.height) {
354 this.contentViewChild.nativeElement.style.height = contentHeight + newHeight - containerHeight + 'px';
355 if (this._style.height) {
356 this._style.height = newHeight + 'px';
357 this.container.style.height = this._style.height;
358 }
359 }
360 this.lastPageX = event.pageX;
361 this.lastPageY = event.pageY;
362 }
363 }
364 resizeEnd(event) {
365 if (this.resizing) {
366 this.resizing = false;
367 DomHandler.removeClass(document.body, 'p-unselectable-text');
368 this.onResizeEnd.emit(event);
369 }
370 }
371 bindGlobalListeners() {
372 if (this.draggable) {
373 this.bindDocumentDragListener();
374 this.bindDocumentDragEndListener();
375 }
376 if (this.resizable) {
377 this.bindDocumentResizeListeners();
378 }
379 if (this.closeOnEscape && this.closable) {
380 this.bindDocumentEscapeListener();
381 }
382 }
383 unbindGlobalListeners() {
384 this.unbindDocumentDragListener();
385 this.unbindDocumentDragEndListener();
386 this.unbindDocumentResizeListeners();
387 this.unbindDocumentEscapeListener();
388 }
389 bindDocumentDragListener() {
390 this.zone.runOutsideAngular(() => {
391 this.documentDragListener = this.onDrag.bind(this);
392 window.document.addEventListener('mousemove', this.documentDragListener);
393 });
394 }
395 unbindDocumentDragListener() {
396 if (this.documentDragListener) {
397 window.document.removeEventListener('mousemove', this.documentDragListener);
398 this.documentDragListener = null;
399 }
400 }
401 bindDocumentDragEndListener() {
402 this.zone.runOutsideAngular(() => {
403 this.documentDragEndListener = this.endDrag.bind(this);
404 window.document.addEventListener('mouseup', this.documentDragEndListener);
405 });
406 }
407 unbindDocumentDragEndListener() {
408 if (this.documentDragEndListener) {
409 window.document.removeEventListener('mouseup', this.documentDragEndListener);
410 this.documentDragEndListener = null;
411 }
412 }
413 bindDocumentResizeListeners() {
414 this.zone.runOutsideAngular(() => {
415 this.documentResizeListener = this.onResize.bind(this);
416 this.documentResizeEndListener = this.resizeEnd.bind(this);
417 window.document.addEventListener('mousemove', this.documentResizeListener);
418 window.document.addEventListener('mouseup', this.documentResizeEndListener);
419 });
420 }
421 unbindDocumentResizeListeners() {
422 if (this.documentResizeListener && this.documentResizeEndListener) {
423 window.document.removeEventListener('mousemove', this.documentResizeListener);
424 window.document.removeEventListener('mouseup', this.documentResizeEndListener);
425 this.documentResizeListener = null;
426 this.documentResizeEndListener = null;
427 }
428 }
429 bindDocumentEscapeListener() {
430 const documentTarget = this.el ? this.el.nativeElement.ownerDocument : 'document';
431 this.documentEscapeListener = this.renderer.listen(documentTarget, 'keydown', (event) => {
432 if (event.which == 27) {
433 this.close(event);
434 }
435 });
436 }
437 unbindDocumentEscapeListener() {
438 if (this.documentEscapeListener) {
439 this.documentEscapeListener();
440 this.documentEscapeListener = null;
441 }
442 }
443 appendContainer() {
444 if (this.appendTo) {
445 if (this.appendTo === 'body')
446 document.body.appendChild(this.wrapper);
447 else
448 DomHandler.appendChild(this.wrapper, this.appendTo);
449 }
450 }
451 restoreAppend() {
452 if (this.container && this.appendTo) {
453 this.el.nativeElement.appendChild(this.wrapper);
454 }
455 }
456 onAnimationStart(event) {
457 switch (event.toState) {
458 case 'visible':
459 this.container = event.element;
460 this.wrapper = this.container.parentElement;
461 this.appendContainer();
462 this.moveOnTop();
463 this.bindGlobalListeners();
464 this.container.setAttribute(this.id, '');
465 if (this.modal) {
466 this.enableModality();
467 }
468 if (!this.modal && this.blockScroll) {
469 DomHandler.addClass(document.body, 'p-overflow-hidden');
470 }
471 if (this.focusOnShow) {
472 this.focus();
473 }
474 break;
475 case 'void':
476 if (this.modal) {
477 DomHandler.addClass(this.wrapper, 'p-component-overlay-leave');
478 }
479 break;
480 }
481 }
482 onAnimationEnd(event) {
483 switch (event.toState) {
484 case 'void':
485 this.onContainerDestroy();
486 this.onHide.emit({});
487 break;
488 case 'visible':
489 this.onShow.emit({});
490 break;
491 }
492 }
493 onContainerDestroy() {
494 this.unbindGlobalListeners();
495 this.dragging = false;
496 this.maskVisible = false;
497 if (this.maximized) {
498 DomHandler.removeClass(document.body, 'p-overflow-hidden');
499 this.maximized = false;
500 }
501 if (this.modal) {
502 this.disableModality();
503 }
504 if (this.blockScroll) {
505 DomHandler.removeClass(document.body, 'p-overflow-hidden');
506 }
507 if (this.container && this.autoZIndex) {
508 ZIndexUtils.clear(this.container);
509 }
510 this.container = null;
511 this.wrapper = null;
512 this._style = this.originalStyle ? { ...this.originalStyle } : {};
513 }
514 destroyStyle() {
515 if (this.styleElement) {
516 document.head.removeChild(this.styleElement);
517 this.styleElement = null;
518 }
519 }
520 ngOnDestroy() {
521 if (this.container) {
522 this.restoreAppend();
523 this.onContainerDestroy();
524 }
525 this.destroyStyle();
526 }
527}
528Dialog.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: Dialog, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i1.PrimeNGConfig }], target: i0.ɵɵFactoryTarget.Component });
529Dialog.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.0", type: Dialog, selector: "p-dialog", inputs: { header: "header", draggable: "draggable", resizable: "resizable", positionLeft: "positionLeft", positionTop: "positionTop", contentStyle: "contentStyle", contentStyleClass: "contentStyleClass", modal: "modal", closeOnEscape: "closeOnEscape", dismissableMask: "dismissableMask", rtl: "rtl", closable: "closable", responsive: "responsive", appendTo: "appendTo", breakpoints: "breakpoints", styleClass: "styleClass", maskStyleClass: "maskStyleClass", showHeader: "showHeader", breakpoint: "breakpoint", blockScroll: "blockScroll", autoZIndex: "autoZIndex", baseZIndex: "baseZIndex", minX: "minX", minY: "minY", focusOnShow: "focusOnShow", maximizable: "maximizable", keepInViewport: "keepInViewport", focusTrap: "focusTrap", transitionOptions: "transitionOptions", closeIcon: "closeIcon", closeAriaLabel: "closeAriaLabel", closeTabindex: "closeTabindex", minimizeIcon: "minimizeIcon", maximizeIcon: "maximizeIcon", visible: "visible", style: "style", position: "position" }, outputs: { onShow: "onShow", onHide: "onHide", visibleChange: "visibleChange", onResizeInit: "onResizeInit", onResizeEnd: "onResizeEnd", onDragEnd: "onDragEnd", onMaximize: "onMaximize" }, host: { classAttribute: "p-element" }, queries: [{ propertyName: "headerFacet", first: true, predicate: Header, descendants: true }, { propertyName: "footerFacet", first: true, predicate: Footer, descendants: true }, { propertyName: "templates", predicate: PrimeTemplate }], viewQueries: [{ propertyName: "headerViewChild", first: true, predicate: ["titlebar"], descendants: true }, { propertyName: "contentViewChild", first: true, predicate: ["content"], descendants: true }, { propertyName: "footerViewChild", first: true, predicate: ["footer"], descendants: true }], ngImport: i0, template: `
530 <div *ngIf="maskVisible" [class]="maskStyleClass"
531 [ngClass]="{'p-dialog-mask': true, 'p-component-overlay p-component-overlay-enter': this.modal, 'p-dialog-mask-scrollblocker': this.modal || this.blockScroll,
532 'p-dialog-left': position === 'left',
533 'p-dialog-right': position === 'right',
534 'p-dialog-top': position === 'top',
535 'p-dialog-top-left': position === 'topleft' || position === 'top-left',
536 'p-dialog-top-right': position === 'topright' || position === 'top-right',
537 'p-dialog-bottom': position === 'bottom',
538 'p-dialog-bottom-left': position === 'bottomleft' || position === 'bottom-left',
539 'p-dialog-bottom-right': position === 'bottomright' || position === 'bottom-right'}">
540 <div #container [ngClass]="{'p-dialog p-component':true, 'p-dialog-rtl':rtl,'p-dialog-draggable':draggable,'p-dialog-resizable':resizable, 'p-dialog-maximized': maximized}"
541 [ngStyle]="style" [class]="styleClass" *ngIf="visible" pFocusTrap [pFocusTrapDisabled]="focusTrap === false"
542 [@animation]="{value: 'visible', params: {transform: transformOptions, transition: transitionOptions}}" (@animation.start)="onAnimationStart($event)" (@animation.done)="onAnimationEnd($event)" role="dialog" [attr.aria-labelledby]="id + '-label'">
543 <div #titlebar class="p-dialog-header" (mousedown)="initDrag($event)" *ngIf="showHeader">
544 <span [attr.id]="id + '-label'" class="p-dialog-title" *ngIf="!headerFacet && !headerTemplate">{{header}}</span>
545 <span [attr.id]="id + '-label'" class="p-dialog-title" *ngIf="headerFacet">
546 <ng-content select="p-header"></ng-content>
547 </span>
548 <ng-container *ngTemplateOutlet="headerTemplate"></ng-container>
549 <div class="p-dialog-header-icons">
550 <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>
551 <span class="p-dialog-header-maximize-icon" [ngClass]="maximized ? minimizeIcon : maximizeIcon"></span>
552 </button>
553 <button *ngIf="closable" type="button" [ngClass]="{'p-dialog-header-icon p-dialog-header-close p-link':true}" [attr.aria-label]="closeAriaLabel" (click)="close($event)" (keydown.enter)="close($event)" [attr.tabindex]="closeTabindex" pRipple>
554 <span class="p-dialog-header-close-icon" [ngClass]="closeIcon"></span>
555 </button>
556 </div>
557 </div>
558 <div #content [ngClass]="'p-dialog-content'" [ngStyle]="contentStyle" [class]="contentStyleClass">
559 <ng-content></ng-content>
560 <ng-container *ngTemplateOutlet="contentTemplate"></ng-container>
561 </div>
562 <div #footer class="p-dialog-footer" *ngIf="footerFacet || footerTemplate">
563 <ng-content select="p-footer"></ng-content>
564 <ng-container *ngTemplateOutlet="footerTemplate"></ng-container>
565 </div>
566 <div *ngIf="resizable" class="p-resizable-handle" style="z-index: 90;" (mousedown)="initResize($event)"></div>
567 </div>
568 </div>
569 `, isInline: true, styles: [".p-dialog-mask{position:fixed;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center;pointer-events:none}.p-dialog-mask.p-component-overlay{pointer-events:auto}.p-dialog{display:flex;flex-direction:column;pointer-events:auto;max-height:90%;transform:scale(1);position:relative}.p-dialog-content{overflow-y:auto;flex-grow:1}.p-dialog-header{display:flex;align-items:center;justify-content:space-between;flex-shrink:0}.p-dialog-footer{flex-shrink:0}.p-dialog .p-dialog-header-icons{display:flex;align-items:center}.p-dialog .p-dialog-header-icon{display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative}.p-fluid .p-dialog-footer .p-button{width:auto}.p-dialog-top .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-bottom-left .p-dialog,.p-dialog-bottom-right .p-dialog{margin:.75rem;transform:translate(0)}.p-dialog-maximized{transition:none;transform:none;width:100vw!important;height:100vh!important;top:0px!important;left:0px!important;max-height:100%;height:100%}.p-dialog-maximized .p-dialog-content{flex-grow:1}.p-dialog-left{justify-content:flex-start}.p-dialog-right{justify-content:flex-end}.p-dialog-top{align-items:flex-start}.p-dialog-top-left{justify-content:flex-start;align-items:flex-start}.p-dialog-top-right{justify-content:flex-end;align-items:flex-start}.p-dialog-bottom{align-items:flex-end}.p-dialog-bottom-left{justify-content:flex-start;align-items:flex-end}.p-dialog-bottom-right{justify-content:flex-end;align-items:flex-end}.p-dialog .p-resizable-handle{position:absolute;font-size:.1px;display:block;cursor:se-resize;width:12px;height:12px;right:1px;bottom:1px}.p-confirm-dialog .p-dialog-content{display:flex;align-items:center}\n"], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.FocusTrap, selector: "[pFocusTrap]", inputs: ["pFocusTrapDisabled"] }, { type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i4.Ripple, selector: "[pRipple]" }], animations: [
570 trigger('animation', [
571 transition('void => visible', [
572 useAnimation(showAnimation)
573 ]),
574 transition('visible => void', [
575 useAnimation(hideAnimation)
576 ])
577 ])
578 ], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
579i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: Dialog, decorators: [{
580 type: Component,
581 args: [{ selector: 'p-dialog', template: `
582 <div *ngIf="maskVisible" [class]="maskStyleClass"
583 [ngClass]="{'p-dialog-mask': true, 'p-component-overlay p-component-overlay-enter': this.modal, 'p-dialog-mask-scrollblocker': this.modal || this.blockScroll,
584 'p-dialog-left': position === 'left',
585 'p-dialog-right': position === 'right',
586 'p-dialog-top': position === 'top',
587 'p-dialog-top-left': position === 'topleft' || position === 'top-left',
588 'p-dialog-top-right': position === 'topright' || position === 'top-right',
589 'p-dialog-bottom': position === 'bottom',
590 'p-dialog-bottom-left': position === 'bottomleft' || position === 'bottom-left',
591 'p-dialog-bottom-right': position === 'bottomright' || position === 'bottom-right'}">
592 <div #container [ngClass]="{'p-dialog p-component':true, 'p-dialog-rtl':rtl,'p-dialog-draggable':draggable,'p-dialog-resizable':resizable, 'p-dialog-maximized': maximized}"
593 [ngStyle]="style" [class]="styleClass" *ngIf="visible" pFocusTrap [pFocusTrapDisabled]="focusTrap === false"
594 [@animation]="{value: 'visible', params: {transform: transformOptions, transition: transitionOptions}}" (@animation.start)="onAnimationStart($event)" (@animation.done)="onAnimationEnd($event)" role="dialog" [attr.aria-labelledby]="id + '-label'">
595 <div #titlebar class="p-dialog-header" (mousedown)="initDrag($event)" *ngIf="showHeader">
596 <span [attr.id]="id + '-label'" class="p-dialog-title" *ngIf="!headerFacet && !headerTemplate">{{header}}</span>
597 <span [attr.id]="id + '-label'" class="p-dialog-title" *ngIf="headerFacet">
598 <ng-content select="p-header"></ng-content>
599 </span>
600 <ng-container *ngTemplateOutlet="headerTemplate"></ng-container>
601 <div class="p-dialog-header-icons">
602 <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>
603 <span class="p-dialog-header-maximize-icon" [ngClass]="maximized ? minimizeIcon : maximizeIcon"></span>
604 </button>
605 <button *ngIf="closable" type="button" [ngClass]="{'p-dialog-header-icon p-dialog-header-close p-link':true}" [attr.aria-label]="closeAriaLabel" (click)="close($event)" (keydown.enter)="close($event)" [attr.tabindex]="closeTabindex" pRipple>
606 <span class="p-dialog-header-close-icon" [ngClass]="closeIcon"></span>
607 </button>
608 </div>
609 </div>
610 <div #content [ngClass]="'p-dialog-content'" [ngStyle]="contentStyle" [class]="contentStyleClass">
611 <ng-content></ng-content>
612 <ng-container *ngTemplateOutlet="contentTemplate"></ng-container>
613 </div>
614 <div #footer class="p-dialog-footer" *ngIf="footerFacet || footerTemplate">
615 <ng-content select="p-footer"></ng-content>
616 <ng-container *ngTemplateOutlet="footerTemplate"></ng-container>
617 </div>
618 <div *ngIf="resizable" class="p-resizable-handle" style="z-index: 90;" (mousedown)="initResize($event)"></div>
619 </div>
620 </div>
621 `, animations: [
622 trigger('animation', [
623 transition('void => visible', [
624 useAnimation(showAnimation)
625 ]),
626 transition('visible => void', [
627 useAnimation(hideAnimation)
628 ])
629 ])
630 ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
631 'class': 'p-element'
632 }, styles: [".p-dialog-mask{position:fixed;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center;pointer-events:none}.p-dialog-mask.p-component-overlay{pointer-events:auto}.p-dialog{display:flex;flex-direction:column;pointer-events:auto;max-height:90%;transform:scale(1);position:relative}.p-dialog-content{overflow-y:auto;flex-grow:1}.p-dialog-header{display:flex;align-items:center;justify-content:space-between;flex-shrink:0}.p-dialog-footer{flex-shrink:0}.p-dialog .p-dialog-header-icons{display:flex;align-items:center}.p-dialog .p-dialog-header-icon{display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative}.p-fluid .p-dialog-footer .p-button{width:auto}.p-dialog-top .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-bottom-left .p-dialog,.p-dialog-bottom-right .p-dialog{margin:.75rem;transform:translate(0)}.p-dialog-maximized{transition:none;transform:none;width:100vw!important;height:100vh!important;top:0px!important;left:0px!important;max-height:100%;height:100%}.p-dialog-maximized .p-dialog-content{flex-grow:1}.p-dialog-left{justify-content:flex-start}.p-dialog-right{justify-content:flex-end}.p-dialog-top{align-items:flex-start}.p-dialog-top-left{justify-content:flex-start;align-items:flex-start}.p-dialog-top-right{justify-content:flex-end;align-items:flex-start}.p-dialog-bottom{align-items:flex-end}.p-dialog-bottom-left{justify-content:flex-start;align-items:flex-end}.p-dialog-bottom-right{justify-content:flex-end;align-items:flex-end}.p-dialog .p-resizable-handle{position:absolute;font-size:.1px;display:block;cursor:se-resize;width:12px;height:12px;right:1px;bottom:1px}.p-confirm-dialog .p-dialog-content{display:flex;align-items:center}\n"] }]
633 }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }, { type: i1.PrimeNGConfig }]; }, propDecorators: { header: [{
634 type: Input
635 }], draggable: [{
636 type: Input
637 }], resizable: [{
638 type: Input
639 }], positionLeft: [{
640 type: Input
641 }], positionTop: [{
642 type: Input
643 }], contentStyle: [{
644 type: Input
645 }], contentStyleClass: [{
646 type: Input
647 }], modal: [{
648 type: Input
649 }], closeOnEscape: [{
650 type: Input
651 }], dismissableMask: [{
652 type: Input
653 }], rtl: [{
654 type: Input
655 }], closable: [{
656 type: Input
657 }], responsive: [{
658 type: Input
659 }], appendTo: [{
660 type: Input
661 }], breakpoints: [{
662 type: Input
663 }], styleClass: [{
664 type: Input
665 }], maskStyleClass: [{
666 type: Input
667 }], showHeader: [{
668 type: Input
669 }], breakpoint: [{
670 type: Input
671 }], blockScroll: [{
672 type: Input
673 }], autoZIndex: [{
674 type: Input
675 }], baseZIndex: [{
676 type: Input
677 }], minX: [{
678 type: Input
679 }], minY: [{
680 type: Input
681 }], focusOnShow: [{
682 type: Input
683 }], maximizable: [{
684 type: Input
685 }], keepInViewport: [{
686 type: Input
687 }], focusTrap: [{
688 type: Input
689 }], transitionOptions: [{
690 type: Input
691 }], closeIcon: [{
692 type: Input
693 }], closeAriaLabel: [{
694 type: Input
695 }], closeTabindex: [{
696 type: Input
697 }], minimizeIcon: [{
698 type: Input
699 }], maximizeIcon: [{
700 type: Input
701 }], headerFacet: [{
702 type: ContentChild,
703 args: [Header]
704 }], footerFacet: [{
705 type: ContentChild,
706 args: [Footer]
707 }], templates: [{
708 type: ContentChildren,
709 args: [PrimeTemplate]
710 }], headerViewChild: [{
711 type: ViewChild,
712 args: ['titlebar']
713 }], contentViewChild: [{
714 type: ViewChild,
715 args: ['content']
716 }], footerViewChild: [{
717 type: ViewChild,
718 args: ['footer']
719 }], onShow: [{
720 type: Output
721 }], onHide: [{
722 type: Output
723 }], visibleChange: [{
724 type: Output
725 }], onResizeInit: [{
726 type: Output
727 }], onResizeEnd: [{
728 type: Output
729 }], onDragEnd: [{
730 type: Output
731 }], onMaximize: [{
732 type: Output
733 }], visible: [{
734 type: Input
735 }], style: [{
736 type: Input
737 }], position: [{
738 type: Input
739 }] } });
740class DialogModule {
741}
742DialogModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: DialogModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
743DialogModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: DialogModule, declarations: [Dialog], imports: [CommonModule, FocusTrapModule, RippleModule], exports: [Dialog, SharedModule] });
744DialogModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: DialogModule, imports: [[CommonModule, FocusTrapModule, RippleModule], SharedModule] });
745i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: DialogModule, decorators: [{
746 type: NgModule,
747 args: [{
748 imports: [CommonModule, FocusTrapModule, RippleModule],
749 exports: [Dialog, SharedModule],
750 declarations: [Dialog]
751 }]
752 }] });
753
754/**
755 * Generated bundle index. Do not edit.
756 */
757
758export { Dialog, DialogModule };
Note: See TracBrowser for help on using the repository browser.