primeng
Version:
PrimeNG is an open source UI library for Angular featuring a rich set of 80+ components, a theme designer, various theme alternatives such as Material, Bootstrap, Tailwind, premium templates and professional support. In addition, it integrates with PrimeB
822 lines (801 loc) • 37 kB
JavaScript
import { trigger, state, style, transition, animate } from '@angular/animations';
import * as i2 from '@angular/common';
import { DOCUMENT, CommonModule } from '@angular/common';
import * as i0 from '@angular/core';
import { Injectable, inject, EventEmitter, booleanAttribute, numberAttribute, Component, ChangeDetectionStrategy, ViewEncapsulation, Inject, Input, ContentChild, ContentChildren, HostListener, NgModule } from '@angular/core';
import { findSingle, absolutePosition, getOffset, addClass, isIOS, isTouchDevice } from '@primeuix/utils';
import * as i1 from 'primeng/api';
import { TranslationKeys, PrimeTemplate, SharedModule } from 'primeng/api';
import { BaseComponent } from 'primeng/basecomponent';
import * as i3 from 'primeng/button';
import { ButtonModule } from 'primeng/button';
import { ConnectedOverlayScrollHandler } from 'primeng/dom';
import { ZIndexUtils } from 'primeng/utils';
import { BaseStyle } from 'primeng/base';
const theme = ({ dt }) => `
.p-confirmpopup {
position: absolute;
margin-top: ${dt('confirmpopup.gutter')};
top: 0;
left: 0;
background: ${dt('confirmpopup.background')};
color: ${dt('confirmpopup.color')};
border: 1px solid ${dt('confirmpopup.border.color')};
border-radius: ${dt('confirmpopup.border.radius')};
box-shadow: ${dt('confirmpopup.shadow')};
}
.p-confirmpopup-content {
display: flex;
align-items: center;
padding: ${dt('confirmpopup.content.padding')};
gap: ${dt('confirmpopup.content.gap')};
}
.p-confirmpopup-icon {
font-size: ${dt('confirmpopup.icon.size')};
width: ${dt('confirmpopup.icon.size')};
height: ${dt('confirmpopup.icon.size')};
color: ${dt('confirmpopup.icon.color')};
}
.p-confirmpopup-footer {
display: flex;
justify-content: flex-end;
gap: ${dt('confirmpopup.footer.gap')};
padding: ${dt('confirmpopup.footer.padding')};
}
.p-confirmpopup-footer button {
width: auto;
}
.p-confirmpopup-footer button:last-child {
margin: 0;
}
.p-confirmpopup-flipped {
margin-top: calc(${dt('confirmpopup.gutter')} * -1);
margin-bottom: ${dt('confirmpopup.gutter')};
}
.p-confirmpopup-enter-from {
opacity: 0;
transform: scaleY(0.8);
}
.p-confirmpopup-leave-to {
opacity: 0;
}
.p-confirmpopup-enter-active {
transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1);
}
.p-confirmpopup-leave-active {
transition: opacity 0.1s linear;
}
.p-confirmpopup:after,
.p-confirmpopup:before {
bottom: 100%;
left: ${dt('confirmpopup.arrow.offset')};
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.p-confirmpopup:after {
border-width: calc(${dt('confirmpopup.gutter')} - 2px);
margin-left: calc(-1 * (${dt('confirmpopup.gutter')} - 2px));
border-style: solid;
border-color: transparent;
border-bottom-color: ${dt('confirmpopup.background')};
}
.p-confirmpopup:before {
border-width: ${dt('confirmpopup.gutter')};
margin-left: calc(-1 * ${dt('confirmpopup.gutter')});
border-style: solid;
border-color: transparent;
border-bottom-color: ${dt('confirmpopup.border.color')};
}
.p-confirmpopup-flipped:after,
.p-confirmpopup-flipped:before {
bottom: auto;
top: 100%;
}
.p-confirmpopup-flipped:after {
border-bottom-color: transparent;
border-top-color: ${dt('confirmpopup.background')};
}
.p-confirmpopup-flipped:before {
border-bottom-color: transparent;
border-top-color: ${dt('confirmpopup.border.color')};
}
`;
const classes = {
root: 'p-confirmpopup p-component',
content: 'p-confirmpopup-content',
icon: 'p-confirmpopup-icon',
message: 'p-confirmpopup-message',
footer: 'p-confirmpopup-footer',
pcRejectButton: 'p-confirmpopup-reject-button',
pcAcceptButton: 'p-confirmpopup-accept-button'
};
class ConfirmPopupStyle extends BaseStyle {
name = 'confirmpopup';
theme = theme;
classes = classes;
static ɵfac = /*@__PURE__*/ (() => { let ɵConfirmPopupStyle_BaseFactory; return function ConfirmPopupStyle_Factory(__ngFactoryType__) { return (ɵConfirmPopupStyle_BaseFactory || (ɵConfirmPopupStyle_BaseFactory = i0.ɵɵgetInheritedFactory(ConfirmPopupStyle)))(__ngFactoryType__ || ConfirmPopupStyle); }; })();
static ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: ConfirmPopupStyle, factory: ConfirmPopupStyle.ɵfac });
}
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ConfirmPopupStyle, [{
type: Injectable
}], null, null); })();
/**
*
* ConfirmPopup displays a confirmation overlay displayed relatively to its target.
*
* [Live Demo](https://www.primeng.org/confirmpopup)
*
* @module confirmpopupstyle
*
*/
var ConfirmPopupClasses;
(function (ConfirmPopupClasses) {
/**
* Class name of the root element
*/
ConfirmPopupClasses["root"] = "p-confirmpopup";
/**
* Class name of the content element
*/
ConfirmPopupClasses["content"] = "p-confirmpopup-content";
/**
* Class name of the icon element
*/
ConfirmPopupClasses["icon"] = "p-confirmpopup-icon";
/**
* Class name of the message element
*/
ConfirmPopupClasses["message"] = "p-confirmpopup-message";
/**
* Class name of the footer element
*/
ConfirmPopupClasses["footer"] = "p-confirmpopup-footer";
/**
* Class name of the reject button element
*/
ConfirmPopupClasses["pcRejectButton"] = "p-confirmpopup-reject-button";
/**
* Class name of the accept button element
*/
ConfirmPopupClasses["pcAcceptButton"] = "p-confirmpopup-accept-button";
})(ConfirmPopupClasses || (ConfirmPopupClasses = {}));
const _c0 = ["content"];
const _c1 = ["accepticon"];
const _c2 = ["rejecticon"];
const _c3 = ["headless"];
const _c4 = (a0, a1) => ({ showTransitionParams: a0, hideTransitionParams: a1 });
const _c5 = a0 => ({ value: "open", params: a0 });
const _c6 = a0 => ({ $implicit: a0 });
function ConfirmPopup_div_0_ng_container_1_ng_container_1_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵelementContainer(0);
} }
function ConfirmPopup_div_0_ng_container_1_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵelementContainerStart(0);
i0.ɵɵtemplate(1, ConfirmPopup_div_0_ng_container_1_ng_container_1_Template, 1, 0, "ng-container", 8);
i0.ɵɵelementContainerEnd();
} if (rf & 2) {
const ctx_r1 = i0.ɵɵnextContext(2);
i0.ɵɵadvance();
i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.headlessTemplate || ctx_r1._headlessTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c6, ctx_r1.confirmation));
} }
function ConfirmPopup_div_0_ng_template_2_ng_container_2_ng_container_1_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵelementContainer(0);
} }
function ConfirmPopup_div_0_ng_template_2_ng_container_2_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵelementContainerStart(0);
i0.ɵɵtemplate(1, ConfirmPopup_div_0_ng_template_2_ng_container_2_ng_container_1_Template, 1, 0, "ng-container", 8);
i0.ɵɵelementContainerEnd();
} if (rf & 2) {
const ctx_r1 = i0.ɵɵnextContext(3);
i0.ɵɵadvance();
i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.contentTemplate || ctx_r1._contentTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c6, ctx_r1.confirmation));
} }
function ConfirmPopup_div_0_ng_template_2_ng_template_3_i_0_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵelement(0, "i", 15);
} if (rf & 2) {
const ctx_r1 = i0.ɵɵnextContext(4);
i0.ɵɵclassMap(ctx_r1.confirmation == null ? null : ctx_r1.confirmation.icon);
i0.ɵɵproperty("ngClass", "p-confirmpopup-icon");
} }
function ConfirmPopup_div_0_ng_template_2_ng_template_3_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵtemplate(0, ConfirmPopup_div_0_ng_template_2_ng_template_3_i_0_Template, 1, 3, "i", 13);
i0.ɵɵelementStart(1, "span", 14);
i0.ɵɵtext(2);
i0.ɵɵelementEnd();
} if (rf & 2) {
const ctx_r1 = i0.ɵɵnextContext(3);
i0.ɵɵproperty("ngIf", ctx_r1.confirmation == null ? null : ctx_r1.confirmation.icon);
i0.ɵɵadvance(2);
i0.ɵɵtextInterpolate(ctx_r1.confirmation == null ? null : ctx_r1.confirmation.message);
} }
function ConfirmPopup_div_0_ng_template_2_p_button_6_i_1_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵelement(0, "i");
} if (rf & 2) {
const ctx_r1 = i0.ɵɵnextContext(4);
i0.ɵɵclassMap(ctx_r1.confirmation == null ? null : ctx_r1.confirmation.rejectIcon);
} }
function ConfirmPopup_div_0_ng_template_2_p_button_6_2_ng_template_0_Template(rf, ctx) { }
function ConfirmPopup_div_0_ng_template_2_p_button_6_2_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵtemplate(0, ConfirmPopup_div_0_ng_template_2_p_button_6_2_ng_template_0_Template, 0, 0, "ng-template", null, 3, i0.ɵɵtemplateRefExtractor);
} }
function ConfirmPopup_div_0_ng_template_2_p_button_6_Template(rf, ctx) { if (rf & 1) {
const _r3 = i0.ɵɵgetCurrentView();
i0.ɵɵelementStart(0, "p-button", 16);
i0.ɵɵlistener("onClick", function ConfirmPopup_div_0_ng_template_2_p_button_6_Template_p_button_onClick_0_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.onReject()); });
i0.ɵɵtemplate(1, ConfirmPopup_div_0_ng_template_2_p_button_6_i_1_Template, 1, 2, "i", 17)(2, ConfirmPopup_div_0_ng_template_2_p_button_6_2_Template, 2, 0, null, 18);
i0.ɵɵelementEnd();
} if (rf & 2) {
const ctx_r1 = i0.ɵɵnextContext(3);
i0.ɵɵproperty("label", ctx_r1.rejectButtonLabel)("ngClass", "p-confirmpopup-reject-button")("styleClass", ctx_r1.confirmation == null ? null : ctx_r1.confirmation.rejectButtonStyleClass)("size", (ctx_r1.confirmation.rejectButtonProps == null ? null : ctx_r1.confirmation.rejectButtonProps.size) || "small")("text", (ctx_r1.confirmation.rejectButtonProps == null ? null : ctx_r1.confirmation.rejectButtonProps.text) || false)("buttonProps", ctx_r1.getRejectButtonProps());
i0.ɵɵattribute("aria-label", ctx_r1.rejectButtonLabel);
i0.ɵɵadvance();
i0.ɵɵproperty("ngIf", ctx_r1.confirmation == null ? null : ctx_r1.confirmation.rejectIcon)("ngIfElse", ctx_r1.rejecticon);
i0.ɵɵadvance();
i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.rejectIconTemplate || ctx_r1._rejectIconTemplate);
} }
function ConfirmPopup_div_0_ng_template_2_p_button_7_i_1_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵelement(0, "i");
} if (rf & 2) {
const ctx_r1 = i0.ɵɵnextContext(4);
i0.ɵɵclassMap(ctx_r1.confirmation == null ? null : ctx_r1.confirmation.acceptIcon);
} }
function ConfirmPopup_div_0_ng_template_2_p_button_7_2_ng_template_0_Template(rf, ctx) { }
function ConfirmPopup_div_0_ng_template_2_p_button_7_2_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵtemplate(0, ConfirmPopup_div_0_ng_template_2_p_button_7_2_ng_template_0_Template, 0, 0, "ng-template", null, 4, i0.ɵɵtemplateRefExtractor);
} }
function ConfirmPopup_div_0_ng_template_2_p_button_7_Template(rf, ctx) { if (rf & 1) {
const _r4 = i0.ɵɵgetCurrentView();
i0.ɵɵelementStart(0, "p-button", 19);
i0.ɵɵlistener("onClick", function ConfirmPopup_div_0_ng_template_2_p_button_7_Template_p_button_onClick_0_listener() { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.onAccept()); });
i0.ɵɵtemplate(1, ConfirmPopup_div_0_ng_template_2_p_button_7_i_1_Template, 1, 2, "i", 17)(2, ConfirmPopup_div_0_ng_template_2_p_button_7_2_Template, 2, 0, null, 18);
i0.ɵɵelementEnd();
} if (rf & 2) {
const ctx_r1 = i0.ɵɵnextContext(3);
i0.ɵɵproperty("label", ctx_r1.acceptButtonLabel)("ngClass", "p-confirmpopup-accept-button")("styleClass", ctx_r1.confirmation == null ? null : ctx_r1.confirmation.acceptButtonStyleClass)("size", (ctx_r1.confirmation.acceptButtonProps == null ? null : ctx_r1.confirmation.acceptButtonProps.size) || "small")("buttonProps", ctx_r1.getAcceptButtonProps());
i0.ɵɵattribute("aria-label", ctx_r1.acceptButtonLabel);
i0.ɵɵadvance();
i0.ɵɵproperty("ngIf", ctx_r1.confirmation == null ? null : ctx_r1.confirmation.acceptIcon)("ngIfElse", ctx_r1.accepticontemplate);
i0.ɵɵadvance();
i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.acceptIconTemplate || ctx_r1._acceptIconTemplate);
} }
function ConfirmPopup_div_0_ng_template_2_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵelementStart(0, "div", 9, 1);
i0.ɵɵtemplate(2, ConfirmPopup_div_0_ng_template_2_ng_container_2_Template, 2, 4, "ng-container", 7)(3, ConfirmPopup_div_0_ng_template_2_ng_template_3_Template, 3, 2, "ng-template", null, 2, i0.ɵɵtemplateRefExtractor);
i0.ɵɵelementEnd();
i0.ɵɵelementStart(5, "div", 10);
i0.ɵɵtemplate(6, ConfirmPopup_div_0_ng_template_2_p_button_6_Template, 3, 10, "p-button", 11)(7, ConfirmPopup_div_0_ng_template_2_p_button_7_Template, 3, 9, "p-button", 12);
i0.ɵɵelementEnd();
} if (rf & 2) {
const withoutContentTemplate_r5 = i0.ɵɵreference(4);
const ctx_r1 = i0.ɵɵnextContext(2);
i0.ɵɵadvance(2);
i0.ɵɵproperty("ngIf", ctx_r1.contentTemplate || ctx_r1._contentTemplate)("ngIfElse", withoutContentTemplate_r5);
i0.ɵɵadvance(4);
i0.ɵɵproperty("ngIf", (ctx_r1.confirmation == null ? null : ctx_r1.confirmation.rejectVisible) !== false);
i0.ɵɵadvance();
i0.ɵɵproperty("ngIf", (ctx_r1.confirmation == null ? null : ctx_r1.confirmation.acceptVisible) !== false);
} }
function ConfirmPopup_div_0_Template(rf, ctx) { if (rf & 1) {
const _r1 = i0.ɵɵgetCurrentView();
i0.ɵɵelementStart(0, "div", 6);
i0.ɵɵlistener("click", function ConfirmPopup_div_0_Template_div_click_0_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onOverlayClick($event)); })("@animation.start", function ConfirmPopup_div_0_Template_div_animation_animation_start_0_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onAnimationStart($event)); })("@animation.done", function ConfirmPopup_div_0_Template_div_animation_animation_done_0_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onAnimationEnd($event)); });
i0.ɵɵtemplate(1, ConfirmPopup_div_0_ng_container_1_Template, 2, 4, "ng-container", 7)(2, ConfirmPopup_div_0_ng_template_2_Template, 8, 4, "ng-template", null, 0, i0.ɵɵtemplateRefExtractor);
i0.ɵɵelementEnd();
} if (rf & 2) {
const notHeadless_r6 = i0.ɵɵreference(3);
const ctx_r1 = i0.ɵɵnextContext();
i0.ɵɵclassMap(ctx_r1.styleClass);
i0.ɵɵproperty("ngClass", "p-confirmpopup p-component")("ngStyle", ctx_r1.style)("@animation", i0.ɵɵpureFunction1(10, _c5, i0.ɵɵpureFunction2(7, _c4, ctx_r1.showTransitionOptions, ctx_r1.hideTransitionOptions)));
i0.ɵɵadvance();
i0.ɵɵproperty("ngIf", ctx_r1.headlessTemplate || ctx_r1._headlessTemplate)("ngIfElse", notHeadless_r6);
} }
/**
* ConfirmPopup displays a confirmation overlay displayed relatively to its target.
* @group Components
*/
class ConfirmPopup extends BaseComponent {
el;
confirmationService;
renderer;
cd;
overlayService;
document;
/**
* Optional key to match the key of confirm object, necessary to use when component tree has multiple confirm dialogs.
* @group Props
*/
key;
/**
* Element to receive the focus when the popup gets visible, valid values are "accept", "reject", and "none".
* @group Props
*/
defaultFocus = 'accept';
/**
* Transition options of the show animation.
* @group Props
*/
showTransitionOptions = '.12s cubic-bezier(0, 0, 0.2, 1)';
/**
* Transition options of the hide animation.
* @group Props
*/
hideTransitionOptions = '.1s linear';
/**
* Whether to automatically manage layering.
* @group Props
*/
autoZIndex = true;
/**
* Base zIndex value to use in layering.
* @group Props
*/
baseZIndex = 0;
/**
* Inline style of the component.
* @group Props
*/
style;
/**
* Style class of the component.
* @group Props
*/
styleClass;
/**
* Defines if the component is visible.
* @group Props
*/
get visible() {
return this._visible;
}
set visible(value) {
this._visible = value;
this.cd.markForCheck();
}
container;
subscription;
confirmation;
contentTemplate;
acceptIconTemplate;
rejectIconTemplate;
headlessTemplate;
_contentTemplate;
_acceptIconTemplate;
_rejectIconTemplate;
_headlessTemplate;
_visible;
documentClickListener;
documentResizeListener;
scrollHandler;
window;
_componentStyle = inject(ConfirmPopupStyle);
constructor(el, confirmationService, renderer, cd, overlayService, document) {
super();
this.el = el;
this.confirmationService = confirmationService;
this.renderer = renderer;
this.cd = cd;
this.overlayService = overlayService;
this.document = document;
this.window = this.document.defaultView;
this.subscription = this.confirmationService.requireConfirmation$.subscribe((confirmation) => {
if (!confirmation) {
this.hide();
return;
}
if (confirmation.key === this.key) {
this.confirmation = confirmation;
const keys = Object.keys(confirmation);
keys.forEach((key) => {
this[key] = confirmation[key];
});
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;
}
});
}
templates;
ngAfterContentInit() {
this.templates?.forEach((item) => {
switch (item.getType()) {
case 'content':
this._contentTemplate = item.template;
break;
case 'rejecticon':
this._rejectIconTemplate = item.template;
break;
case 'accepticon':
this._acceptIconTemplate = item.template;
break;
case 'headless':
this._headlessTemplate = item.template;
break;
}
});
}
option(name, k) {
const source = this || this;
if (source.hasOwnProperty(name)) {
if (k) {
return source[k];
}
return source[name];
}
return undefined;
}
onEscapeKeydown(event) {
if (this.confirmation && this.confirmation.closeOnEscape) {
this.onReject();
}
}
onAnimationStart(event) {
if (event.toState === 'open') {
this.container = event.element;
this.renderer.appendChild(this.document.body, this.container);
this.align();
this.bindListeners();
const element = this.getElementToFocus();
if (element) {
element.focus();
}
}
}
onAnimationEnd(event) {
switch (event.toState) {
case 'void':
this.onContainerDestroy();
break;
}
}
getAcceptButtonProps() {
return this.option('acceptButtonProps');
}
getRejectButtonProps() {
return this.option('rejectButtonProps');
}
getElementToFocus() {
switch (this.defaultFocus) {
case 'accept':
return findSingle(this.container, '.p-confirm-popup-accept');
case 'reject':
return findSingle(this.container, '.p-confirm-popup-reject');
case 'none':
return null;
}
}
align() {
if (this.autoZIndex) {
ZIndexUtils.set('overlay', this.container, this.config.zIndex.overlay);
}
if (!this.confirmation) {
return;
}
absolutePosition(this.container, this.confirmation?.target, false);
const containerOffset = getOffset(this.container);
const targetOffset = 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) {
addClass(this.container, 'p-confirm-popup-flipped');
}
}
hide() {
this.visible = false;
}
onAccept() {
if (this.confirmation?.acceptEvent) {
this.confirmation.acceptEvent.emit();
}
this.hide();
}
onReject() {
if (this.confirmation?.rejectEvent) {
this.confirmation.rejectEvent.emit();
}
this.hide();
}
onOverlayClick(event) {
this.overlayService.add({
originalEvent: event,
target: this.el.nativeElement
});
}
bindListeners() {
/*
* Called inside `setTimeout` to avoid listening to the click event that appears when `confirm` is first called(bubbling).
* Need wait when bubbling event up and hang the handler on the next tick.
* This is the case when eventTarget and confirmation.target do not match when the `confirm` method is called.
*/
setTimeout(() => {
this.bindDocumentClickListener();
this.bindDocumentResizeListener();
this.bindScrollListener();
});
}
unbindListeners() {
this.unbindDocumentClickListener();
this.unbindDocumentResizeListener();
this.unbindScrollListener();
}
bindDocumentClickListener() {
if (!this.documentClickListener) {
let documentEvent = isIOS() ? 'touchstart' : 'click';
const documentTarget = this.el ? this.el.nativeElement.ownerDocument : this.document;
this.documentClickListener = this.renderer.listen(documentTarget, documentEvent, (event) => {
if (this.confirmation && this.confirmation.dismissableMask !== false) {
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() {
if (this.visible && !isTouchDevice()) {
this.hide();
}
}
bindDocumentResizeListener() {
if (!this.documentResizeListener) {
this.documentResizeListener = this.renderer.listen(this.window, 'resize', this.onWindowResize.bind(this));
}
}
unbindDocumentResizeListener() {
if (this.documentResizeListener) {
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();
if (this.autoZIndex) {
ZIndexUtils.clear(this.container);
}
this.confirmation = null;
this.container = null;
}
restoreAppend() {
if (this.container) {
this.renderer.removeChild(this.document.body, 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();
}
}
static ɵfac = function ConfirmPopup_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || ConfirmPopup)(i0.ɵɵdirectiveInject(i0.ElementRef), i0.ɵɵdirectiveInject(i1.ConfirmationService), i0.ɵɵdirectiveInject(i0.Renderer2), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(i1.OverlayService), i0.ɵɵdirectiveInject(DOCUMENT)); };
static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ConfirmPopup, selectors: [["p-confirmPopup"], ["p-confirmpopup"], ["p-confirm-popup"]], contentQueries: function ConfirmPopup_ContentQueries(rf, ctx, dirIndex) { if (rf & 1) {
i0.ɵɵcontentQuery(dirIndex, _c0, 4);
i0.ɵɵcontentQuery(dirIndex, _c1, 4);
i0.ɵɵcontentQuery(dirIndex, _c2, 4);
i0.ɵɵcontentQuery(dirIndex, _c3, 4);
i0.ɵɵcontentQuery(dirIndex, PrimeTemplate, 4);
} if (rf & 2) {
let _t;
i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.contentTemplate = _t.first);
i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.acceptIconTemplate = _t.first);
i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.rejectIconTemplate = _t.first);
i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.headlessTemplate = _t.first);
i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.templates = _t);
} }, hostBindings: function ConfirmPopup_HostBindings(rf, ctx) { if (rf & 1) {
i0.ɵɵlistener("keydown.escape", function ConfirmPopup_keydown_escape_HostBindingHandler($event) { return ctx.onEscapeKeydown($event); }, false, i0.ɵɵresolveDocument);
} }, inputs: { key: "key", defaultFocus: "defaultFocus", showTransitionOptions: "showTransitionOptions", hideTransitionOptions: "hideTransitionOptions", autoZIndex: [2, "autoZIndex", "autoZIndex", booleanAttribute], baseZIndex: [2, "baseZIndex", "baseZIndex", numberAttribute], style: "style", styleClass: "styleClass", visible: "visible" }, features: [i0.ɵɵProvidersFeature([ConfirmPopupStyle]), i0.ɵɵInputTransformsFeature, i0.ɵɵInheritDefinitionFeature], decls: 1, vars: 1, consts: [["notHeadless", ""], ["content", ""], ["withoutContentTemplate", ""], ["rejecticon", ""], ["accepticontemplate", ""], ["role", "alertdialog", 3, "ngClass", "ngStyle", "class", "click", 4, "ngIf"], ["role", "alertdialog", 3, "click", "ngClass", "ngStyle"], [4, "ngIf", "ngIfElse"], [4, "ngTemplateOutlet", "ngTemplateOutletContext"], [1, "p-confirmpopup-content"], [1, "p-confirmpopup-footer"], ["type", "button", 3, "label", "ngClass", "styleClass", "size", "text", "buttonProps", "onClick", 4, "ngIf"], ["type", "button", 3, "label", "ngClass", "styleClass", "size", "buttonProps", "onClick", 4, "ngIf"], [3, "ngClass", "class", 4, "ngIf"], [1, "p-confirmpopup-message"], [3, "ngClass"], ["type", "button", 3, "onClick", "label", "ngClass", "styleClass", "size", "text", "buttonProps"], [3, "class", 4, "ngIf", "ngIfElse"], [4, "ngTemplateOutlet"], ["type", "button", 3, "onClick", "label", "ngClass", "styleClass", "size", "buttonProps"]], template: function ConfirmPopup_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵtemplate(0, ConfirmPopup_div_0_Template, 4, 12, "div", 5);
} if (rf & 2) {
i0.ɵɵproperty("ngIf", ctx.visible);
} }, dependencies: [CommonModule, i2.NgClass, i2.NgIf, i2.NgTemplateOutlet, i2.NgStyle, SharedModule, ButtonModule, i3.Button], encapsulation: 2, data: { animation: [
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: 0 });
}
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ConfirmPopup, [{
type: Component,
args: [{
selector: 'p-confirmPopup, p-confirmpopup, p-confirm-popup',
standalone: true,
imports: [CommonModule, SharedModule, ButtonModule],
template: `
<div
*ngIf="visible"
[ngClass]="'p-confirmpopup p-component'"
[ngStyle]="style"
[class]="styleClass"
role="alertdialog"
(click)="onOverlayClick($event)"
[@animation]="{
value: 'open',
params: { showTransitionParams: showTransitionOptions, hideTransitionParams: hideTransitionOptions }
}"
(@animation.start)="onAnimationStart($event)"
(@animation.done)="onAnimationEnd($event)"
>
<ng-container *ngIf="headlessTemplate || _headlessTemplate; else notHeadless">
<ng-container *ngTemplateOutlet="headlessTemplate || _headlessTemplate; context: { $implicit: confirmation }"></ng-container>
</ng-container>
<ng-template #notHeadless>
<div #content class="p-confirmpopup-content">
<ng-container *ngIf="contentTemplate || _contentTemplate; else withoutContentTemplate">
<ng-container *ngTemplateOutlet="contentTemplate || _contentTemplate; context: { $implicit: confirmation }"></ng-container>
</ng-container>
<ng-template #withoutContentTemplate>
<i [ngClass]="'p-confirmpopup-icon'" [class]="confirmation?.icon" *ngIf="confirmation?.icon"></i>
<span class="p-confirmpopup-message">{{ confirmation?.message }}</span>
</ng-template>
</div>
<div class="p-confirmpopup-footer">
<p-button
type="button"
[label]="rejectButtonLabel"
(onClick)="onReject()"
[ngClass]="'p-confirmpopup-reject-button'"
[styleClass]="confirmation?.rejectButtonStyleClass"
[size]="confirmation.rejectButtonProps?.size || 'small'"
[text]="confirmation.rejectButtonProps?.text || false"
*ngIf="confirmation?.rejectVisible !== false"
[attr.aria-label]="rejectButtonLabel"
[buttonProps]="getRejectButtonProps()"
>
<i [class]="confirmation?.rejectIcon" *ngIf="confirmation?.rejectIcon; else rejecticon"></i>
<ng-template #rejecticon *ngTemplateOutlet="rejectIconTemplate || _rejectIconTemplate"></ng-template>
</p-button>
<p-button
type="button"
[label]="acceptButtonLabel"
(onClick)="onAccept()"
[ngClass]="'p-confirmpopup-accept-button'"
[styleClass]="confirmation?.acceptButtonStyleClass"
[size]="confirmation.acceptButtonProps?.size || 'small'"
*ngIf="confirmation?.acceptVisible !== false"
[attr.aria-label]="acceptButtonLabel"
[buttonProps]="getAcceptButtonProps()"
>
<i [class]="confirmation?.acceptIcon" *ngIf="confirmation?.acceptIcon; else accepticontemplate"></i>
<ng-template #accepticontemplate *ngTemplateOutlet="acceptIconTemplate || _acceptIconTemplate"></ng-template>
</p-button>
</div>
</ng-template>
</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,
providers: [ConfirmPopupStyle]
}]
}], () => [{ type: i0.ElementRef }, { type: i1.ConfirmationService }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }, { type: i1.OverlayService }, { type: Document, decorators: [{
type: Inject,
args: [DOCUMENT]
}] }], { key: [{
type: Input
}], defaultFocus: [{
type: Input
}], showTransitionOptions: [{
type: Input
}], hideTransitionOptions: [{
type: Input
}], autoZIndex: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], baseZIndex: [{
type: Input,
args: [{ transform: numberAttribute }]
}], style: [{
type: Input
}], styleClass: [{
type: Input
}], visible: [{
type: Input
}], contentTemplate: [{
type: ContentChild,
args: ['content', { descendants: false }]
}], acceptIconTemplate: [{
type: ContentChild,
args: ['accepticon', { descendants: false }]
}], rejectIconTemplate: [{
type: ContentChild,
args: ['rejecticon', { descendants: false }]
}], headlessTemplate: [{
type: ContentChild,
args: ['headless', { descendants: false }]
}], templates: [{
type: ContentChildren,
args: [PrimeTemplate]
}], onEscapeKeydown: [{
type: HostListener,
args: ['document:keydown.escape', ['$event']]
}] }); })();
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ConfirmPopup, { className: "ConfirmPopup", filePath: "confirmpopup.ts", lineNumber: 129 }); })();
class ConfirmPopupModule {
static ɵfac = function ConfirmPopupModule_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || ConfirmPopupModule)(); };
static ɵmod = /*@__PURE__*/ i0.ɵɵdefineNgModule({ type: ConfirmPopupModule });
static ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ imports: [ConfirmPopup, SharedModule, SharedModule] });
}
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ConfirmPopupModule, [{
type: NgModule,
args: [{
imports: [ConfirmPopup, SharedModule],
exports: [ConfirmPopup, SharedModule]
}]
}], null, null); })();
(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(ConfirmPopupModule, { imports: [ConfirmPopup, SharedModule], exports: [ConfirmPopup, SharedModule] }); })();
/**
* Generated bundle index. Do not edit.
*/
export { ConfirmPopup, ConfirmPopupClasses, ConfirmPopupModule, ConfirmPopupStyle };
//# sourceMappingURL=primeng-confirmpopup.mjs.map