source: trip-planner-front/node_modules/primeng/fesm2020/primeng-confirmpopup.mjs@ 6fe77af

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

adding photos

  • Property mode set to 100644
File size: 16.2 KB
Line 
1import * as i0 from '@angular/core';
2import { EventEmitter, Component, ChangeDetectionStrategy, ViewEncapsulation, Input, NgModule } from '@angular/core';
3import * as i2 from '@angular/common';
4import { CommonModule } from '@angular/common';
5import * as i1 from 'primeng/api';
6import { TranslationKeys } from 'primeng/api';
7import * as i3 from 'primeng/button';
8import { ButtonModule } from 'primeng/button';
9import { ZIndexUtils } from 'primeng/utils';
10import { trigger, state, style, transition, animate } from '@angular/animations';
11import { DomHandler, ConnectedOverlayScrollHandler } from 'primeng/dom';
12
13class ConfirmPopup {
14 constructor(el, confirmationService, renderer, cd, config, overlayService) {
15 this.el = el;
16 this.confirmationService = confirmationService;
17 this.renderer = renderer;
18 this.cd = cd;
19 this.config = config;
20 this.overlayService = overlayService;
21 this.defaultFocus = "accept";
22 this.showTransitionOptions = '.12s cubic-bezier(0, 0, 0.2, 1)';
23 this.hideTransitionOptions = '.1s linear';
24 this.autoZIndex = true;
25 this.baseZIndex = 0;
26 this.subscription = this.confirmationService.requireConfirmation$.subscribe(confirmation => {
27 if (!confirmation) {
28 this.hide();
29 return;
30 }
31 if (confirmation.key === this.key) {
32 this.confirmation = confirmation;
33 if (this.confirmation.accept) {
34 this.confirmation.acceptEvent = new EventEmitter();
35 this.confirmation.acceptEvent.subscribe(this.confirmation.accept);
36 }
37 if (this.confirmation.reject) {
38 this.confirmation.rejectEvent = new EventEmitter();
39 this.confirmation.rejectEvent.subscribe(this.confirmation.reject);
40 }
41 this.visible = true;
42 }
43 });
44 }
45 get visible() {
46 return this._visible;
47 }
48 set visible(value) {
49 this._visible = value;
50 this.cd.markForCheck();
51 }
52 onAnimationStart(event) {
53 if (event.toState === 'open') {
54 this.container = event.element;
55 document.body.appendChild(this.container);
56 this.align();
57 this.bindListeners();
58 const element = this.getElementToFocus();
59 if (element) {
60 element.focus();
61 }
62 }
63 }
64 onAnimationEnd(event) {
65 switch (event.toState) {
66 case 'void':
67 this.onContainerDestroy();
68 break;
69 }
70 }
71 getElementToFocus() {
72 switch (this.defaultFocus) {
73 case 'accept':
74 return DomHandler.findSingle(this.container, '.p-confirm-popup-accept');
75 case 'reject':
76 return DomHandler.findSingle(this.container, '.p-confirm-popup-reject');
77 case 'none':
78 return null;
79 }
80 }
81 align() {
82 if (this.autoZIndex) {
83 ZIndexUtils.set('overlay', this.container, this.config.zIndex.overlay);
84 }
85 DomHandler.absolutePosition(this.container, this.confirmation.target);
86 const containerOffset = DomHandler.getOffset(this.container);
87 const targetOffset = DomHandler.getOffset(this.confirmation.target);
88 let arrowLeft = 0;
89 if (containerOffset.left < targetOffset.left) {
90 arrowLeft = targetOffset.left - containerOffset.left;
91 }
92 this.container.style.setProperty('--overlayArrowLeft', `${arrowLeft}px`);
93 if (containerOffset.top < targetOffset.top) {
94 DomHandler.addClass(this.container, 'p-confirm-popup-flipped');
95 }
96 }
97 hide() {
98 this.visible = false;
99 }
100 accept() {
101 if (this.confirmation.acceptEvent) {
102 this.confirmation.acceptEvent.emit();
103 }
104 this.hide();
105 }
106 reject() {
107 if (this.confirmation.rejectEvent) {
108 this.confirmation.rejectEvent.emit();
109 }
110 this.hide();
111 }
112 onOverlayClick(event) {
113 this.overlayService.add({
114 originalEvent: event,
115 target: this.el.nativeElement
116 });
117 }
118 bindListeners() {
119 this.bindDocumentClickListener();
120 this.bindDocumentResizeListener();
121 this.bindScrollListener();
122 }
123 unbindListeners() {
124 this.unbindDocumentClickListener();
125 this.unbindDocumentResizeListener();
126 this.unbindScrollListener();
127 }
128 bindDocumentClickListener() {
129 if (!this.documentClickListener) {
130 let documentEvent = DomHandler.isIOS() ? 'touchstart' : 'click';
131 const documentTarget = this.el ? this.el.nativeElement.ownerDocument : document;
132 this.documentClickListener = this.renderer.listen(documentTarget, documentEvent, (event) => {
133 let targetElement = this.confirmation.target;
134 if (this.container !== event.target && !this.container.contains(event.target) &&
135 targetElement !== event.target && !targetElement.contains(event.target)) {
136 this.hide();
137 }
138 });
139 }
140 }
141 unbindDocumentClickListener() {
142 if (this.documentClickListener) {
143 this.documentClickListener();
144 this.documentClickListener = null;
145 }
146 }
147 onWindowResize() {
148 this.hide();
149 }
150 bindDocumentResizeListener() {
151 this.documentResizeListener = this.onWindowResize.bind(this);
152 window.addEventListener('resize', this.documentResizeListener);
153 }
154 unbindDocumentResizeListener() {
155 if (this.documentResizeListener) {
156 window.removeEventListener('resize', this.documentResizeListener);
157 this.documentResizeListener = null;
158 }
159 }
160 bindScrollListener() {
161 if (!this.scrollHandler) {
162 this.scrollHandler = new ConnectedOverlayScrollHandler(this.confirmation.target, () => {
163 if (this.visible) {
164 this.hide();
165 }
166 });
167 }
168 this.scrollHandler.bindScrollListener();
169 }
170 unbindScrollListener() {
171 if (this.scrollHandler) {
172 this.scrollHandler.unbindScrollListener();
173 }
174 }
175 unsubscribeConfirmationSubscriptions() {
176 if (this.confirmation) {
177 if (this.confirmation.acceptEvent) {
178 this.confirmation.acceptEvent.unsubscribe();
179 }
180 if (this.confirmation.rejectEvent) {
181 this.confirmation.rejectEvent.unsubscribe();
182 }
183 }
184 }
185 onContainerDestroy() {
186 this.unbindListeners();
187 this.unsubscribeConfirmationSubscriptions();
188 if (this.autoZIndex) {
189 ZIndexUtils.clear(this.container);
190 }
191 this.confirmation = null;
192 this.container = null;
193 }
194 restoreAppend() {
195 if (this.container) {
196 document.body.removeChild(this.container);
197 }
198 this.onContainerDestroy();
199 }
200 get acceptButtonLabel() {
201 return this.confirmation.acceptLabel || this.config.getTranslation(TranslationKeys.ACCEPT);
202 }
203 get rejectButtonLabel() {
204 return this.confirmation.rejectLabel || this.config.getTranslation(TranslationKeys.REJECT);
205 }
206 ngOnDestroy() {
207 this.restoreAppend();
208 if (this.subscription) {
209 this.subscription.unsubscribe();
210 }
211 }
212}
213ConfirmPopup.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: ConfirmPopup, deps: [{ token: i0.ElementRef }, { token: i1.ConfirmationService }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i1.PrimeNGConfig }, { token: i1.OverlayService }], target: i0.ɵɵFactoryTarget.Component });
214ConfirmPopup.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.0", type: ConfirmPopup, selector: "p-confirmPopup", inputs: { key: "key", defaultFocus: "defaultFocus", showTransitionOptions: "showTransitionOptions", hideTransitionOptions: "hideTransitionOptions", autoZIndex: "autoZIndex", baseZIndex: "baseZIndex", style: "style", styleClass: "styleClass", visible: "visible" }, host: { classAttribute: "p-element" }, ngImport: i0, template: `
215 <div *ngIf="visible" [ngClass]="'p-confirm-popup p-component'" [ngStyle]="style" [class]="styleClass" (click)="onOverlayClick($event)"
216 [@animation]="{value: 'open', params: {showTransitionParams: showTransitionOptions, hideTransitionParams: hideTransitionOptions}}"
217 (@animation.start)="onAnimationStart($event)" (@animation.done)="onAnimationEnd($event)">
218 <div #content class="p-confirm-popup-content">
219 <i [ngClass]="'p-confirm-popup-icon'" [class]="confirmation.icon" *ngIf="confirmation.icon"></i>
220 <span class="p-confirm-popup-message">{{confirmation.message}}</span>
221 </div>
222 <div class="p-confirm-popup-footer">
223 <button type="button" pButton [icon]="confirmation.rejectIcon" [label]="rejectButtonLabel" (click)="reject()" [ngClass]="'p-confirm-popup-reject p-button-sm'"
224 [class]="confirmation.rejectButtonStyleClass || 'p-button-text'" *ngIf="confirmation.rejectVisible !== false" [attr.aria-label]="rejectButtonLabel"></button>
225 <button type="button" pButton [icon]="confirmation.acceptIcon" [label]="acceptButtonLabel" (click)="accept()" [ngClass]="'p-confirm-popup-accept p-button-sm'"
226 [class]="confirmation.acceptButtonStyleClass" *ngIf="confirmation.acceptVisible !== false" [attr.aria-label]="acceptButtonLabel"></button>
227 </div>
228 </div>
229 `, isInline: true, styles: [".p-confirm-popup{position:absolute;margin-top:10px;top:0;left:0}.p-confirm-popup-flipped{margin-top:0;margin-bottom:10px}.p-confirm-popup:after,.p-confirm-popup: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-confirm-popup:after{border-width:8px;margin-left:-8px}.p-confirm-popup:before{border-width:10px;margin-left:-10px}.p-confirm-popup-flipped:after,.p-confirm-popup-flipped:before{bottom:auto;top:100%}.p-confirm-popup.p-confirm-popup-flipped:after,.p-confirm-popup.p-confirm-popup-flipped:before{border-bottom-color:transparent}.p-confirm-popup .p-confirm-popup-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: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i3.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading"] }], animations: [
230 trigger('animation', [
231 state('void', style({
232 transform: 'scaleY(0.8)',
233 opacity: 0
234 })),
235 state('open', style({
236 transform: 'translateY(0)',
237 opacity: 1
238 })),
239 transition('void => open', animate('{{showTransitionParams}}')),
240 transition('open => void', animate('{{hideTransitionParams}}')),
241 ])
242 ], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
243i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: ConfirmPopup, decorators: [{
244 type: Component,
245 args: [{ selector: 'p-confirmPopup', template: `
246 <div *ngIf="visible" [ngClass]="'p-confirm-popup p-component'" [ngStyle]="style" [class]="styleClass" (click)="onOverlayClick($event)"
247 [@animation]="{value: 'open', params: {showTransitionParams: showTransitionOptions, hideTransitionParams: hideTransitionOptions}}"
248 (@animation.start)="onAnimationStart($event)" (@animation.done)="onAnimationEnd($event)">
249 <div #content class="p-confirm-popup-content">
250 <i [ngClass]="'p-confirm-popup-icon'" [class]="confirmation.icon" *ngIf="confirmation.icon"></i>
251 <span class="p-confirm-popup-message">{{confirmation.message}}</span>
252 </div>
253 <div class="p-confirm-popup-footer">
254 <button type="button" pButton [icon]="confirmation.rejectIcon" [label]="rejectButtonLabel" (click)="reject()" [ngClass]="'p-confirm-popup-reject p-button-sm'"
255 [class]="confirmation.rejectButtonStyleClass || 'p-button-text'" *ngIf="confirmation.rejectVisible !== false" [attr.aria-label]="rejectButtonLabel"></button>
256 <button type="button" pButton [icon]="confirmation.acceptIcon" [label]="acceptButtonLabel" (click)="accept()" [ngClass]="'p-confirm-popup-accept p-button-sm'"
257 [class]="confirmation.acceptButtonStyleClass" *ngIf="confirmation.acceptVisible !== false" [attr.aria-label]="acceptButtonLabel"></button>
258 </div>
259 </div>
260 `, animations: [
261 trigger('animation', [
262 state('void', style({
263 transform: 'scaleY(0.8)',
264 opacity: 0
265 })),
266 state('open', style({
267 transform: 'translateY(0)',
268 opacity: 1
269 })),
270 transition('void => open', animate('{{showTransitionParams}}')),
271 transition('open => void', animate('{{hideTransitionParams}}')),
272 ])
273 ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
274 'class': 'p-element'
275 }, styles: [".p-confirm-popup{position:absolute;margin-top:10px;top:0;left:0}.p-confirm-popup-flipped{margin-top:0;margin-bottom:10px}.p-confirm-popup:after,.p-confirm-popup: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-confirm-popup:after{border-width:8px;margin-left:-8px}.p-confirm-popup:before{border-width:10px;margin-left:-10px}.p-confirm-popup-flipped:after,.p-confirm-popup-flipped:before{bottom:auto;top:100%}.p-confirm-popup.p-confirm-popup-flipped:after,.p-confirm-popup.p-confirm-popup-flipped:before{border-bottom-color:transparent}.p-confirm-popup .p-confirm-popup-content{display:flex;align-items:center}\n"] }]
276 }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1.ConfirmationService }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }, { type: i1.PrimeNGConfig }, { type: i1.OverlayService }]; }, propDecorators: { key: [{
277 type: Input
278 }], defaultFocus: [{
279 type: Input
280 }], showTransitionOptions: [{
281 type: Input
282 }], hideTransitionOptions: [{
283 type: Input
284 }], autoZIndex: [{
285 type: Input
286 }], baseZIndex: [{
287 type: Input
288 }], style: [{
289 type: Input
290 }], styleClass: [{
291 type: Input
292 }], visible: [{
293 type: Input
294 }] } });
295class ConfirmPopupModule {
296}
297ConfirmPopupModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: ConfirmPopupModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
298ConfirmPopupModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: ConfirmPopupModule, declarations: [ConfirmPopup], imports: [CommonModule, ButtonModule], exports: [ConfirmPopup] });
299ConfirmPopupModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: ConfirmPopupModule, imports: [[CommonModule, ButtonModule]] });
300i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: ConfirmPopupModule, decorators: [{
301 type: NgModule,
302 args: [{
303 imports: [CommonModule, ButtonModule],
304 exports: [ConfirmPopup],
305 declarations: [ConfirmPopup]
306 }]
307 }] });
308
309/**
310 * Generated bundle index. Do not edit.
311 */
312
313export { ConfirmPopup, ConfirmPopupModule };
Note: See TracBrowser for help on using the repository browser.