source: trip-planner-front/node_modules/primeng/fesm2020/primeng-overlaypanel.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: 17.4 KB
RevLine 
[59329aa]1import * as i0 from '@angular/core';
2import { EventEmitter, Component, ChangeDetectionStrategy, ViewEncapsulation, Input, Output, ContentChildren, NgModule } from '@angular/core';
3import * as i2 from '@angular/common';
4import { CommonModule } from '@angular/common';
5import { DomHandler, ConnectedOverlayScrollHandler } from 'primeng/dom';
6import * as i1 from 'primeng/api';
7import { PrimeTemplate, SharedModule } from 'primeng/api';
8import * as i3 from 'primeng/ripple';
9import { RippleModule } from 'primeng/ripple';
10import { trigger, state, style, transition, animate } from '@angular/animations';
11import { ZIndexUtils } from 'primeng/utils';
12
13class OverlayPanel {
14 constructor(el, renderer, cd, zone, config, overlayService) {
15 this.el = el;
16 this.renderer = renderer;
17 this.cd = cd;
18 this.zone = zone;
19 this.config = config;
20 this.overlayService = overlayService;
21 this.dismissable = true;
22 this.appendTo = 'body';
23 this.autoZIndex = true;
24 this.baseZIndex = 0;
25 this.focusOnShow = true;
26 this.showTransitionOptions = '.12s cubic-bezier(0, 0, 0.2, 1)';
27 this.hideTransitionOptions = '.1s linear';
28 this.onShow = new EventEmitter();
29 this.onHide = new EventEmitter();
30 this.overlayVisible = false;
31 this.render = false;
32 this.selfClick = false;
33 }
34 ngAfterContentInit() {
35 this.templates.forEach((item) => {
36 switch (item.getType()) {
37 case 'content':
38 this.contentTemplate = item.template;
39 break;
40 default:
41 this.contentTemplate = item.template;
42 break;
43 }
44 this.cd.markForCheck();
45 });
46 }
47 bindDocumentClickListener() {
48 if (!this.documentClickListener && this.dismissable) {
49 this.zone.runOutsideAngular(() => {
50 let documentEvent = DomHandler.isIOS() ? 'touchstart' : 'click';
51 const documentTarget = this.el ? this.el.nativeElement.ownerDocument : 'document';
52 this.documentClickListener = this.renderer.listen(documentTarget, documentEvent, (event) => {
53 if (!this.container.contains(event.target) && this.target !== event.target && !this.target.contains(event.target) && !this.selfClick) {
54 this.zone.run(() => {
55 this.hide();
56 });
57 }
58 this.selfClick = false;
59 this.cd.markForCheck();
60 });
61 });
62 }
63 }
64 unbindDocumentClickListener() {
65 if (this.documentClickListener) {
66 this.documentClickListener();
67 this.documentClickListener = null;
68 this.selfClick = false;
69 }
70 }
71 toggle(event, target) {
72 if (this.overlayVisible) {
73 if (this.hasTargetChanged(event, target)) {
74 this.destroyCallback = () => {
75 this.show(null, (target || event.currentTarget || event.target));
76 };
77 }
78 this.hide();
79 }
80 else {
81 this.show(event, target);
82 }
83 }
84 show(event, target) {
85 this.target = target || event.currentTarget || event.target;
86 this.overlayVisible = true;
87 this.render = true;
88 this.cd.markForCheck();
89 }
90 onOverlayClick(event) {
91 this.overlayService.add({
92 originalEvent: event,
93 target: this.el.nativeElement
94 });
95 this.selfClick = true;
96 }
97 onContentClick() {
98 this.selfClick = true;
99 }
100 hasTargetChanged(event, target) {
101 return this.target != null && this.target !== (target || event.currentTarget || event.target);
102 }
103 appendContainer() {
104 if (this.appendTo) {
105 if (this.appendTo === 'body')
106 document.body.appendChild(this.container);
107 else
108 DomHandler.appendChild(this.container, this.appendTo);
109 }
110 }
111 restoreAppend() {
112 if (this.container && this.appendTo) {
113 this.el.nativeElement.appendChild(this.container);
114 }
115 }
116 align() {
117 if (this.autoZIndex) {
118 ZIndexUtils.set('overlay', this.container, this.baseZIndex + this.config.zIndex.overlay);
119 }
120 DomHandler.absolutePosition(this.container, this.target);
121 const containerOffset = DomHandler.getOffset(this.container);
122 const targetOffset = DomHandler.getOffset(this.target);
123 let arrowLeft = 0;
124 if (containerOffset.left < targetOffset.left) {
125 arrowLeft = targetOffset.left - containerOffset.left;
126 }
127 this.container.style.setProperty('--overlayArrowLeft', `${arrowLeft}px`);
128 if (containerOffset.top < targetOffset.top) {
129 DomHandler.addClass(this.container, 'p-overlaypanel-flipped');
130 }
131 }
132 onAnimationStart(event) {
133 if (event.toState === 'open') {
134 this.container = event.element;
135 this.onShow.emit(null);
136 this.appendContainer();
137 this.align();
138 this.bindDocumentClickListener();
139 this.bindDocumentResizeListener();
140 this.bindScrollListener();
141 if (this.focusOnShow) {
142 this.focus();
143 }
144 this.overlayEventListener = (e) => {
145 if (this.container && this.container.contains(e.target)) {
146 this.selfClick = true;
147 }
148 };
149 this.overlaySubscription = this.overlayService.clickObservable.subscribe(this.overlayEventListener);
150 }
151 }
152 onAnimationEnd(event) {
153 switch (event.toState) {
154 case 'void':
155 if (this.destroyCallback) {
156 this.destroyCallback();
157 this.destroyCallback = null;
158 }
159 if (this.overlaySubscription) {
160 this.overlaySubscription.unsubscribe();
161 }
162 break;
163 case 'close':
164 if (this.autoZIndex) {
165 ZIndexUtils.clear(this.container);
166 }
167 if (this.overlaySubscription) {
168 this.overlaySubscription.unsubscribe();
169 }
170 this.onContainerDestroy();
171 this.onHide.emit({});
172 this.render = false;
173 break;
174 }
175 }
176 focus() {
177 let focusable = DomHandler.findSingle(this.container, '[autofocus]');
178 if (focusable) {
179 this.zone.runOutsideAngular(() => {
180 setTimeout(() => focusable.focus(), 5);
181 });
182 }
183 }
184 hide() {
185 this.overlayVisible = false;
186 this.cd.markForCheck();
187 }
188 onCloseClick(event) {
189 this.hide();
190 event.preventDefault();
191 }
192 onWindowResize(event) {
193 this.hide();
194 }
195 bindDocumentResizeListener() {
196 this.documentResizeListener = this.onWindowResize.bind(this);
197 window.addEventListener('resize', this.documentResizeListener);
198 }
199 unbindDocumentResizeListener() {
200 if (this.documentResizeListener) {
201 window.removeEventListener('resize', this.documentResizeListener);
202 this.documentResizeListener = null;
203 }
204 }
205 bindScrollListener() {
206 if (!this.scrollHandler) {
207 this.scrollHandler = new ConnectedOverlayScrollHandler(this.target, () => {
208 if (this.overlayVisible) {
209 this.hide();
210 }
211 });
212 }
213 this.scrollHandler.bindScrollListener();
214 }
215 unbindScrollListener() {
216 if (this.scrollHandler) {
217 this.scrollHandler.unbindScrollListener();
218 }
219 }
220 onContainerDestroy() {
221 this.target = null;
222 this.unbindDocumentClickListener();
223 this.unbindDocumentResizeListener();
224 this.unbindScrollListener();
225 }
226 ngOnDestroy() {
227 if (this.scrollHandler) {
228 this.scrollHandler.destroy();
229 this.scrollHandler = null;
230 }
231 if (this.container && this.autoZIndex) {
232 ZIndexUtils.clear(this.container);
233 }
234 this.target = null;
235 this.destroyCallback = null;
236 if (this.container) {
237 this.restoreAppend();
238 this.onContainerDestroy();
239 }
240 if (this.overlaySubscription) {
241 this.overlaySubscription.unsubscribe();
242 }
243 }
244}
245OverlayPanel.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: OverlayPanel, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i1.PrimeNGConfig }, { token: i1.OverlayService }], target: i0.ɵɵFactoryTarget.Component });
246OverlayPanel.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.0", type: OverlayPanel, selector: "p-overlayPanel", inputs: { dismissable: "dismissable", showCloseIcon: "showCloseIcon", style: "style", styleClass: "styleClass", appendTo: "appendTo", autoZIndex: "autoZIndex", ariaCloseLabel: "ariaCloseLabel", baseZIndex: "baseZIndex", focusOnShow: "focusOnShow", showTransitionOptions: "showTransitionOptions", hideTransitionOptions: "hideTransitionOptions" }, outputs: { onShow: "onShow", onHide: "onHide" }, host: { classAttribute: "p-element" }, queries: [{ propertyName: "templates", predicate: PrimeTemplate }], ngImport: i0, template: `
247 <div *ngIf="render" [ngClass]="'p-overlaypanel p-component'" [ngStyle]="style" [class]="styleClass" (click)="onOverlayClick($event)"
248 [@animation]="{value: (overlayVisible ? 'open': 'close'), params: {showTransitionParams: showTransitionOptions, hideTransitionParams: hideTransitionOptions}}"
249 (@animation.start)="onAnimationStart($event)" (@animation.done)="onAnimationEnd($event)">
250 <div class="p-overlaypanel-content" (click)="onContentClick()" (mousedown)="onContentClick()">
251 <ng-content></ng-content>
252 <ng-container *ngTemplateOutlet="contentTemplate"></ng-container>
253 </div>
254 <button *ngIf="showCloseIcon" type="button" class="p-overlaypanel-close p-link" (click)="onCloseClick($event)" (keydown.enter)="hide()" [attr.aria-label]="ariaCloseLabel" pRipple>
255 <span class="p-overlaypanel-close-icon pi pi-times"></span>
256 </button>
257 </div>
258 `, isInline: true, styles: [".p-overlaypanel{position:absolute;margin-top:10px;top:0;left:0}.p-overlaypanel-flipped{margin-top:0;margin-bottom:10px}.p-overlaypanel-close{display:flex;justify-content:center;align-items:center;overflow:hidden;position:relative}.p-overlaypanel:after,.p-overlaypanel:before{bottom:100%;left:calc(0 + 1.25rem);left:calc(var(--overlayArrowLeft, 0) + 1.25rem);content:\" \";height:0;width:0;position:absolute;pointer-events:none}.p-overlaypanel:after{border-width:8px;margin-left:-8px}.p-overlaypanel:before{border-width:10px;margin-left:-10px}.p-overlaypanel-shifted:after,.p-overlaypanel-shifted:before{left:auto;right:1.25em;margin-left:auto}.p-overlaypanel-flipped:after,.p-overlaypanel-flipped:before{bottom:auto;top:100%}.p-overlaypanel.p-overlaypanel-flipped:after,.p-overlaypanel.p-overlaypanel-flipped:before{border-bottom-color:transparent}\n"], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3.Ripple, selector: "[pRipple]" }], animations: [
259 trigger('animation', [
260 state('void', style({
261 transform: 'scaleY(0.8)',
262 opacity: 0
263 })),
264 state('close', style({
265 opacity: 0
266 })),
267 state('open', style({
268 transform: 'translateY(0)',
269 opacity: 1
270 })),
271 transition('void => open', animate('{{showTransitionParams}}')),
272 transition('open => close', animate('{{hideTransitionParams}}')),
273 ])
274 ], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
275i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: OverlayPanel, decorators: [{
276 type: Component,
277 args: [{ selector: 'p-overlayPanel', template: `
278 <div *ngIf="render" [ngClass]="'p-overlaypanel p-component'" [ngStyle]="style" [class]="styleClass" (click)="onOverlayClick($event)"
279 [@animation]="{value: (overlayVisible ? 'open': 'close'), params: {showTransitionParams: showTransitionOptions, hideTransitionParams: hideTransitionOptions}}"
280 (@animation.start)="onAnimationStart($event)" (@animation.done)="onAnimationEnd($event)">
281 <div class="p-overlaypanel-content" (click)="onContentClick()" (mousedown)="onContentClick()">
282 <ng-content></ng-content>
283 <ng-container *ngTemplateOutlet="contentTemplate"></ng-container>
284 </div>
285 <button *ngIf="showCloseIcon" type="button" class="p-overlaypanel-close p-link" (click)="onCloseClick($event)" (keydown.enter)="hide()" [attr.aria-label]="ariaCloseLabel" pRipple>
286 <span class="p-overlaypanel-close-icon pi pi-times"></span>
287 </button>
288 </div>
289 `, animations: [
290 trigger('animation', [
291 state('void', style({
292 transform: 'scaleY(0.8)',
293 opacity: 0
294 })),
295 state('close', style({
296 opacity: 0
297 })),
298 state('open', style({
299 transform: 'translateY(0)',
300 opacity: 1
301 })),
302 transition('void => open', animate('{{showTransitionParams}}')),
303 transition('open => close', animate('{{hideTransitionParams}}')),
304 ])
305 ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
306 'class': 'p-element'
307 }, styles: [".p-overlaypanel{position:absolute;margin-top:10px;top:0;left:0}.p-overlaypanel-flipped{margin-top:0;margin-bottom:10px}.p-overlaypanel-close{display:flex;justify-content:center;align-items:center;overflow:hidden;position:relative}.p-overlaypanel:after,.p-overlaypanel:before{bottom:100%;left:calc(0 + 1.25rem);left:calc(var(--overlayArrowLeft, 0) + 1.25rem);content:\" \";height:0;width:0;position:absolute;pointer-events:none}.p-overlaypanel:after{border-width:8px;margin-left:-8px}.p-overlaypanel:before{border-width:10px;margin-left:-10px}.p-overlaypanel-shifted:after,.p-overlaypanel-shifted:before{left:auto;right:1.25em;margin-left:auto}.p-overlaypanel-flipped:after,.p-overlaypanel-flipped:before{bottom:auto;top:100%}.p-overlaypanel.p-overlaypanel-flipped:after,.p-overlaypanel.p-overlaypanel-flipped:before{border-bottom-color:transparent}\n"] }]
308 }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: i1.PrimeNGConfig }, { type: i1.OverlayService }]; }, propDecorators: { dismissable: [{
309 type: Input
310 }], showCloseIcon: [{
311 type: Input
312 }], style: [{
313 type: Input
314 }], styleClass: [{
315 type: Input
316 }], appendTo: [{
317 type: Input
318 }], autoZIndex: [{
319 type: Input
320 }], ariaCloseLabel: [{
321 type: Input
322 }], baseZIndex: [{
323 type: Input
324 }], focusOnShow: [{
325 type: Input
326 }], showTransitionOptions: [{
327 type: Input
328 }], hideTransitionOptions: [{
329 type: Input
330 }], onShow: [{
331 type: Output
332 }], onHide: [{
333 type: Output
334 }], templates: [{
335 type: ContentChildren,
336 args: [PrimeTemplate]
337 }] } });
338class OverlayPanelModule {
339}
340OverlayPanelModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: OverlayPanelModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
341OverlayPanelModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: OverlayPanelModule, declarations: [OverlayPanel], imports: [CommonModule, RippleModule, SharedModule], exports: [OverlayPanel, SharedModule] });
342OverlayPanelModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: OverlayPanelModule, imports: [[CommonModule, RippleModule, SharedModule], SharedModule] });
343i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: OverlayPanelModule, decorators: [{
344 type: NgModule,
345 args: [{
346 imports: [CommonModule, RippleModule, SharedModule],
347 exports: [OverlayPanel, SharedModule],
348 declarations: [OverlayPanel]
349 }]
350 }] });
351
352/**
353 * Generated bundle index. Do not edit.
354 */
355
356export { OverlayPanel, OverlayPanelModule };
Note: See TracBrowser for help on using the repository browser.