primeng
Version:
[](https://opensource.org/licenses/MIT) [](https://badge.fury.io/js/primeng) [ • 10.5 kB
JavaScript
import { EventEmitter, Component, ChangeDetectionStrategy, ViewEncapsulation, ElementRef, Renderer2, ChangeDetectorRef, Input, NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { TranslationKeys, ConfirmationService, PrimeNGConfig } from 'primeng/api';
import { ButtonModule } from 'primeng/button';
import { trigger, state, style, transition, animate } from '@angular/animations';
import { DomHandler, ConnectedOverlayScrollHandler } from 'primeng/dom';
class ConfirmPopup {
constructor(el, confirmationService, renderer, cd, config) {
this.el = el;
this.confirmationService = confirmationService;
this.renderer = renderer;
this.cd = cd;
this.config = config;
this.showTransitionOptions = '.12s cubic-bezier(0, 0, 0.2, 1)';
this.hideTransitionOptions = '.1s linear';
this.autoZIndex = true;
this.baseZIndex = 0;
this.subscription = this.confirmationService.requireConfirmation$.subscribe(confirmation => {
if (!confirmation) {
this.hide();
return;
}
if (confirmation.key === this.key) {
this.confirmation = confirmation;
if (this.confirmation.accept) {
this.confirmation.acceptEvent = new EventEmitter();
this.confirmation.acceptEvent.subscribe(this.confirmation.accept);
}
if (this.confirmation.reject) {
this.confirmation.rejectEvent = new EventEmitter();
this.confirmation.rejectEvent.subscribe(this.confirmation.reject);
}
this.visible = true;
}
});
}
get visible() {
return this._visible;
}
set visible(value) {
this._visible = value;
this.cd.markForCheck();
}
onAnimationStart(event) {
if (event.toState === 'open') {
this.container = event.element;
document.body.appendChild(this.container);
this.align();
this.bindListeners();
}
}
onAnimationEnd(event) {
switch (event.toState) {
case 'void':
this.onContainerDestroy();
break;
}
}
align() {
if (this.autoZIndex) {
this.container.style.zIndex = String(this.baseZIndex + (++DomHandler.zindex));
}
DomHandler.absolutePosition(this.container, this.confirmation.target);
const containerOffset = DomHandler.getOffset(this.container);
const targetOffset = DomHandler.getOffset(this.confirmation.target);
let arrowLeft = 0;
if (containerOffset.left < targetOffset.left) {
arrowLeft = targetOffset.left - containerOffset.left;
}
this.container.style.setProperty('--overlayArrowLeft', `${arrowLeft}px`);
if (containerOffset.top < targetOffset.top) {
DomHandler.addClass(this.container, 'p-confirm-popup-flipped');
}
}
hide() {
this.visible = false;
}
accept() {
if (this.confirmation.acceptEvent) {
this.confirmation.acceptEvent.emit();
}
this.hide();
}
reject() {
if (this.confirmation.rejectEvent) {
this.confirmation.rejectEvent.emit();
}
this.hide();
}
bindListeners() {
this.bindDocumentClickListener();
this.bindDocumentResizeListener();
this.bindScrollListener();
}
unbindListeners() {
this.unbindDocumentClickListener();
this.unbindDocumentResizeListener();
this.unbindScrollListener();
}
bindDocumentClickListener() {
if (!this.documentClickListener) {
let documentEvent = DomHandler.isIOS() ? 'touchstart' : 'click';
const documentTarget = this.el ? this.el.nativeElement.ownerDocument : document;
this.documentClickListener = this.renderer.listen(documentTarget, documentEvent, (event) => {
let targetElement = this.confirmation.target;
if (this.container !== event.target && !this.container.contains(event.target) &&
targetElement !== event.target && !targetElement.contains(event.target)) {
this.hide();
}
});
}
}
unbindDocumentClickListener() {
if (this.documentClickListener) {
this.documentClickListener();
this.documentClickListener = null;
}
}
onWindowResize() {
this.hide();
}
bindDocumentResizeListener() {
this.documentResizeListener = this.onWindowResize.bind(this);
window.addEventListener('resize', this.documentResizeListener);
}
unbindDocumentResizeListener() {
if (this.documentResizeListener) {
window.removeEventListener('resize', this.documentResizeListener);
this.documentResizeListener = null;
}
}
bindScrollListener() {
if (!this.scrollHandler) {
this.scrollHandler = new ConnectedOverlayScrollHandler(this.confirmation.target, () => {
if (this.visible) {
this.hide();
}
});
}
this.scrollHandler.bindScrollListener();
}
unbindScrollListener() {
if (this.scrollHandler) {
this.scrollHandler.unbindScrollListener();
}
}
unsubscribeConfirmationSubscriptions() {
if (this.confirmation) {
if (this.confirmation.acceptEvent) {
this.confirmation.acceptEvent.unsubscribe();
}
if (this.confirmation.rejectEvent) {
this.confirmation.rejectEvent.unsubscribe();
}
}
}
onContainerDestroy() {
this.unbindListeners();
this.unsubscribeConfirmationSubscriptions();
this.confirmation = null;
this.container = null;
}
restoreAppend() {
if (this.container) {
document.body.removeChild(this.container);
}
this.onContainerDestroy();
}
get acceptButtonLabel() {
return this.confirmation.acceptLabel || this.config.getTranslation(TranslationKeys.ACCEPT);
}
get rejectButtonLabel() {
return this.confirmation.rejectLabel || this.config.getTranslation(TranslationKeys.REJECT);
}
ngOnDestroy() {
this.restoreAppend();
if (this.subscription) {
this.subscription.unsubscribe();
}
}
}
ConfirmPopup.decorators = [
{ type: Component, args: [{
selector: 'p-confirmPopup',
template: `
<div *ngIf="visible" [ngClass]="'p-confirm-popup p-component'" [ngStyle]="style" [class]="styleClass"
[]="{value: 'open', params: {showTransitionParams: showTransitionOptions, hideTransitionParams: hideTransitionOptions}}"
(.start)="onAnimationStart($event)" (.done)="onAnimationEnd($event)">
<div #content class="p-confirm-popup-content">
<i [ngClass]="'p-confirm-popup-icon'" [class]="confirmation.icon" *ngIf="confirmation.icon"></i>
<span class="p-confirm-popup-message">{{confirmation.message}}</span>
</div>
<div class="p-confirm-popup-footer">
<button type="button" pButton [icon]="confirmation.rejectIcon" [label]="rejectButtonLabel" (click)="reject()" [ngClass]="'p-confirm-popup-reject p-button-sm'"
[class]="confirmation.rejectButtonStyleClass || 'p-button-text'" *ngIf="confirmation.rejectVisible !== false" [attr.aria-label]="rejectButtonLabel"></button>
<button type="button" pButton [icon]="confirmation.acceptIcon" [label]="acceptButtonLabel" (click)="accept()" [ngClass]="'p-confirm-popup-accept p-button-sm'"
[class]="confirmation.acceptButtonStyleClass" *ngIf="confirmation.acceptVisible !== false" [attr.aria-label]="acceptButtonLabel"></button>
</div>
</div>
`,
animations: [
trigger('animation', [
state('void', style({
transform: 'scaleY(0.8)',
opacity: 0
})),
state('open', style({
transform: 'translateY(0)',
opacity: 1
})),
transition('void => open', animate('{{showTransitionParams}}')),
transition('open => void', animate('{{hideTransitionParams}}')),
])
],
changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None,
styles: [".p-confirm-popup{margin-top:10px;position:absolute}.p-confirm-popup-flipped{margin-bottom:10px;margin-top:0}.p-confirm-popup:after,.p-confirm-popup:before{bottom:100%;content:\" \";height:0;left:calc(var(--overlayArrowLeft, 0) + 1.25rem);pointer-events:none;position:absolute;width:0}.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{align-items:center;display:flex}"]
},] }
];
ConfirmPopup.ctorParameters = () => [
{ type: ElementRef },
{ type: ConfirmationService },
{ type: Renderer2 },
{ type: ChangeDetectorRef },
{ type: PrimeNGConfig }
];
ConfirmPopup.propDecorators = {
key: [{ type: Input }],
showTransitionOptions: [{ type: Input }],
hideTransitionOptions: [{ type: Input }],
autoZIndex: [{ type: Input }],
baseZIndex: [{ type: Input }],
style: [{ type: Input }],
styleClass: [{ type: Input }],
visible: [{ type: Input }]
};
class ConfirmPopupModule {
}
ConfirmPopupModule.decorators = [
{ type: NgModule, args: [{
imports: [CommonModule, ButtonModule],
exports: [ConfirmPopup],
declarations: [ConfirmPopup]
},] }
];
/**
* Generated bundle index. Do not edit.
*/
export { ConfirmPopup, ConfirmPopupModule };
//# sourceMappingURL=primeng-confirmpopup.js.map