primeng
Version:
PrimeNG is a premium UI library for Angular featuring a rich set of 90+ components, a theme designer, various theme alternatives such as Material, Bootstrap, Tailwind, premium templates and professional support. In addition, it integrates with PrimeBlock,
686 lines (681 loc) • 35.6 kB
JavaScript
export * from 'primeng/types/confirmpopup';
import { DOCUMENT, NgTemplateOutlet } from '@angular/common';
import * as i0 from '@angular/core';
import { Injectable, InjectionToken, inject, input, booleanAttribute, numberAttribute, signal, computed, contentChild, viewChild, ElementRef, EventEmitter, effect, untracked, HostListener, Inject, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
import { findSingle, absolutePosition, getOffset, addClass, appendChild, focus, isIOS, isTouchDevice } from '@primeuix/utils';
import * as i1 from 'primeng/api';
import { TranslationKeys, SharedModule } from 'primeng/api';
import { BaseComponent, PARENT_INSTANCE } from 'primeng/basecomponent';
import * as i2 from 'primeng/bind';
import { Bind } from 'primeng/bind';
import * as i3 from 'primeng/button';
import { ButtonModule } from 'primeng/button';
import { AutoFocus } from 'primeng/autofocus';
import { ConnectedOverlayScrollHandler } from 'primeng/dom';
import { FocusTrap } from 'primeng/focustrap';
import * as i4 from 'primeng/motion';
import { MotionModule } from 'primeng/motion';
import { ZIndexUtils } from 'primeng/utils';
import { style } from '@primeuix/styles/confirmpopup';
import { BaseStyle } from 'primeng/base';
const classes = {
root: () => ['p-confirmpopup p-component'],
content: 'p-confirmpopup-content',
icon: ({ instance }) => ['p-confirmpopup-icon', instance.confirmation()?.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';
style = style;
classes = classes;
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ConfirmPopupStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ConfirmPopupStyle });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ConfirmPopupStyle, decorators: [{
type: Injectable
}] });
/**
*
* 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 CONFIRMPOPUP_INSTANCE = new InjectionToken('CONFIRMPOPUP_INSTANCE');
/**
* ConfirmPopup displays a confirmation overlay displayed relatively to its target.
* @group Components
*/
class ConfirmPopup extends BaseComponent {
el;
confirmationService;
renderer;
cd;
overlayService;
document;
componentName = 'ConfirmPopup';
$pcConfirmPopup = inject(CONFIRMPOPUP_INSTANCE, { optional: true, skipSelf: true }) ?? undefined;
bindDirectiveInstance = inject(Bind, { self: true });
onAfterViewChecked() {
this.bindDirectiveInstance.setAttrs(this.ptm('host'));
}
/**
* Optional key to match the key of confirm object, necessary to use when component tree has multiple confirm dialogs.
* @group Props
*/
key = input(/* @ts-ignore */
...(ngDevMode ? [undefined, { debugName: "key" }] : /* istanbul ignore next */ []));
/**
* Element to receive the focus when the popup gets visible, valid values are "accept", "reject", and "none".
* @group Props
*/
defaultFocus = input('accept', /* @ts-ignore */
...(ngDevMode ? [{ debugName: "defaultFocus" }] : /* istanbul ignore next */ []));
/**
* Whether to automatically manage layering.
* @group Props
*/
autoZIndex = input(true, { ...(ngDevMode ? { debugName: "autoZIndex" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
/**
* Base zIndex value to use in layering.
* @group Props
*/
baseZIndex = input(0, { ...(ngDevMode ? { debugName: "baseZIndex" } : /* istanbul ignore next */ {}), transform: numberAttribute });
/**
* Inline style of the component.
* @group Props
*/
style = input(/* @ts-ignore */
...(ngDevMode ? [undefined, { debugName: "style" }] : /* istanbul ignore next */ []));
/**
* Style class of the component.
* @group Props
*/
styleClass = input(/* @ts-ignore */
...(ngDevMode ? [undefined, { debugName: "styleClass" }] : /* istanbul ignore next */ []));
/**
* Defines if the component is visible.
* @group Props
*/
visible = input(/* @ts-ignore */
...(ngDevMode ? [undefined, { debugName: "visible" }] : /* istanbul ignore next */ []));
_visible = signal(false, /* @ts-ignore */
...(ngDevMode ? [{ debugName: "_visible" }] : /* istanbul ignore next */ []));
computedVisible = computed(() => this.visible() ?? this._visible(), /* @ts-ignore */
...(ngDevMode ? [{ debugName: "computedVisible" }] : /* istanbul ignore next */ []));
render = signal(false, /* @ts-ignore */
...(ngDevMode ? [{ debugName: "render" }] : /* istanbul ignore next */ []));
/**
* The motion options.
* @group Props
*/
motionOptions = input(undefined, /* @ts-ignore */
...(ngDevMode ? [{ debugName: "motionOptions" }] : /* istanbul ignore next */ []));
computedMotionOptions = computed(() => {
return {
...this.ptm('motion'),
...this.motionOptions()
};
}, /* @ts-ignore */
...(ngDevMode ? [{ debugName: "computedMotionOptions" }] : /* istanbul ignore next */ []));
/**
* Target element to attach the overlay, valid values are "body" or a local ng-template variable of another element (note: use binding with brackets for template variables, e.g. [appendTo]="mydiv" for a div element having #mydiv as variable name).
* @defaultValue 'body'
* @group Props
*/
appendTo = input('body', /* @ts-ignore */
...(ngDevMode ? [{ debugName: "appendTo" }] : /* istanbul ignore next */ []));
headlessContext = computed(() => ({ $implicit: this.confirmation() }), /* @ts-ignore */
...(ngDevMode ? [{ debugName: "headlessContext" }] : /* istanbul ignore next */ []));
contentContext = computed(() => ({ $implicit: this.confirmation() }), /* @ts-ignore */
...(ngDevMode ? [{ debugName: "contentContext" }] : /* istanbul ignore next */ []));
$appendTo = computed(() => this.appendTo() || this.config.overlayAppendTo(), /* @ts-ignore */
...(ngDevMode ? [{ debugName: "$appendTo" }] : /* istanbul ignore next */ []));
container;
subscription;
confirmation = signal(null, /* @ts-ignore */
...(ngDevMode ? [{ debugName: "confirmation" }] : /* istanbul ignore next */ []));
autoFocusAccept = false;
autoFocusReject = false;
/**
* Custom content template.
* @group Templates
*/
contentTemplate = contentChild('content', { ...(ngDevMode ? { debugName: "contentTemplate" } : /* istanbul ignore next */ {}), descendants: false });
/**
* Custom accept icon template.
* @group Templates
*/
acceptIconTemplate = contentChild('accepticon', { ...(ngDevMode ? { debugName: "acceptIconTemplate" } : /* istanbul ignore next */ {}), descendants: false });
/**
* Custom reject icon template.
* @group Templates
*/
rejectIconTemplate = contentChild('rejecticon', { ...(ngDevMode ? { debugName: "rejectIconTemplate" } : /* istanbul ignore next */ {}), descendants: false });
/**
* Custom headless template.
* @group Templates
*/
headlessTemplate = contentChild('headless', { ...(ngDevMode ? { debugName: "headlessTemplate" } : /* istanbul ignore next */ {}), descendants: false });
acceptButtonViewChild = viewChild('acceptButton', { ...(ngDevMode ? { debugName: "acceptButtonViewChild" } : /* istanbul ignore next */ {}), read: ElementRef });
rejectButtonViewChild = viewChild('rejectButton', { ...(ngDevMode ? { debugName: "rejectButtonViewChild" } : /* istanbul ignore next */ {}), read: ElementRef });
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 (this.computedVisible()) {
requestAnimationFrame(() => {
this.alignOverlay();
this.alignArrow();
});
}
if (confirmation.key === this.key()) {
this.confirmation.set(confirmation);
if (confirmation.accept) {
confirmation.acceptEvent = new EventEmitter();
confirmation.acceptEvent.subscribe(confirmation.accept);
}
if (confirmation.reject) {
confirmation.rejectEvent = new EventEmitter();
confirmation.rejectEvent.subscribe(confirmation.reject);
}
this._visible.set(true);
}
});
effect(() => {
if (this.computedVisible()) {
untracked(() => {
if (!this.render()) {
this.render.set(true);
}
});
}
});
}
option(name, k) {
const confirmation = this.confirmation();
if (confirmation && confirmation.hasOwnProperty(name)) {
return k ? confirmation[k] : confirmation[name];
}
const source = this;
if (source.hasOwnProperty(name)) {
const value = k ? source[k] : source[name];
return typeof value === 'function' ? value() : value;
}
return undefined;
}
onEscapeKeydown(event) {
const confirmation = this.confirmation();
if (confirmation && confirmation.closeOnEscape !== false) {
this.onReject();
}
}
onBeforeEnter(event) {
const focusValue = this.confirmation()?.defaultFocus ?? this.defaultFocus();
this.autoFocusAccept = focusValue === 'accept';
this.autoFocusReject = focusValue === 'reject';
this.container = event.element;
this.appendOverlay();
this.alignOverlay();
this.alignArrow();
this.setZIndex();
this.handleFocus();
this.bindListeners();
}
handleFocus() {
const focusValue = this.defaultFocus();
if (focusValue && (this.acceptButtonViewChild() || this.rejectButtonViewChild())) {
const focusEl = (focusValue === 'accept' ? findSingle(this.acceptButtonViewChild()?.nativeElement, '[data-pc-section="root"]') : findSingle(this.rejectButtonViewChild()?.nativeElement, '[data-pc-section="root"]'));
focusEl.focus();
}
}
onAfterLeave() {
this.autoFocusAccept = false;
this.autoFocusReject = false;
this.restoreAppend();
this.onContainerDestroy();
}
getAcceptButtonProps() {
return this.option('acceptButtonProps');
}
getRejectButtonProps() {
return this.option('rejectButtonProps');
}
alignOverlay() {
const target = this.confirmation()?.target;
if (!target) {
return;
}
absolutePosition(this.container, target, false);
}
setZIndex() {
if (this.autoZIndex()) {
ZIndexUtils.set('overlay', this.container, this.config.zIndex.overlay);
}
}
alignArrow() {
const containerOffset = getOffset(this.container);
const targetOffset = getOffset(this.confirmation()?.target);
const containerLeft = containerOffset.left;
const targetLeft = targetOffset.left;
let arrowLeft = 0;
if (containerOffset && targetOffset && containerLeft < targetLeft) {
arrowLeft = targetLeft - containerLeft;
}
if (this.container) {
this.container.style.setProperty('--p-confirmpopup-arrow-left', `${arrowLeft}px`);
}
if (containerOffset && targetOffset && containerOffset.top < targetOffset.top) {
this.container.setAttribute('data-p-confirmpopup-flipped', 'true');
!this.$unstyled() && addClass(this.container, 'p-confirmpopup-flipped');
}
}
appendOverlay() {
if (this.$appendTo() && this.$appendTo() !== 'self') {
if (this.$appendTo() === 'body') {
appendChild(this.document.body, this.container);
}
else {
appendChild(this.$appendTo(), this.container);
}
}
}
restoreAppend() {
if (this.container && this.$appendTo() !== 'self') {
appendChild(this.el.nativeElement, this.container);
}
this.onContainerDestroy();
}
hide() {
this._visible.set(false);
}
onAccept() {
this.confirmation()?.acceptEvent?.emit();
this.hide();
focus(this.confirmation()?.target);
}
onReject() {
this.confirmation()?.rejectEvent?.emit();
this.hide();
focus(this.confirmation()?.target);
}
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) => {
const confirmation = this.confirmation();
if (confirmation && confirmation.dismissableMask !== false) {
let targetElement = 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.computedVisible() && !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.computedVisible()) {
this.hide();
}
});
}
this.scrollHandler.bindScrollListener();
}
unbindScrollListener() {
if (this.scrollHandler) {
this.scrollHandler.unbindScrollListener();
}
}
unsubscribeConfirmationSubscriptions() {
this.confirmation()?.acceptEvent?.unsubscribe();
this.confirmation()?.rejectEvent?.unsubscribe();
}
onContainerDestroy() {
this.unbindListeners();
this.unsubscribeConfirmationSubscriptions();
if (this.autoZIndex()) {
ZIndexUtils.clear(this.container);
}
this.confirmation.set(null);
this.render.set(false);
this.container = null;
}
get acceptButtonLabel() {
return this.confirmation()?.acceptLabel || this.confirmation()?.acceptButtonProps?.label || this.translate(TranslationKeys.ACCEPT);
}
get rejectButtonLabel() {
return this.confirmation()?.rejectLabel || this.confirmation()?.rejectButtonProps?.label || this.translate(TranslationKeys.REJECT);
}
get rejectVisible() {
return this.confirmation()?.rejectVisible !== false;
}
get acceptVisible() {
return this.confirmation()?.acceptVisible !== false;
}
get rejectButtonSize() {
return this.confirmation()?.rejectButtonProps?.size || 'small';
}
get rejectButtonText() {
return this.confirmation()?.rejectButtonProps?.text || false;
}
get acceptButtonSize() {
return this.confirmation()?.acceptButtonProps?.size || 'small';
}
get rejectButtonStyleClass() {
return this.confirmation()?.rejectButtonStyleClass;
}
get acceptButtonStyleClass() {
return this.confirmation()?.acceptButtonStyleClass;
}
get hasIcon() {
return !!this.confirmation()?.icon;
}
get hasRejectIcon() {
return !!this.confirmation()?.rejectIcon;
}
get hasAcceptIcon() {
return !!this.confirmation()?.acceptIcon;
}
get rejectIcon() {
return this.confirmation()?.rejectIcon;
}
get acceptIcon() {
return this.confirmation()?.acceptIcon;
}
get message() {
return this.confirmation()?.message;
}
onDestroy() {
this.restoreAppend();
if (this.subscription) {
this.subscription.unsubscribe();
}
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ConfirmPopup, deps: [{ token: i0.ElementRef }, { token: i1.ConfirmationService }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i1.OverlayService }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: ConfirmPopup, isStandalone: true, selector: "p-confirmpopup", inputs: { key: { classPropertyName: "key", publicName: "key", isSignal: true, isRequired: false, transformFunction: null }, defaultFocus: { classPropertyName: "defaultFocus", publicName: "defaultFocus", isSignal: true, isRequired: false, transformFunction: null }, autoZIndex: { classPropertyName: "autoZIndex", publicName: "autoZIndex", isSignal: true, isRequired: false, transformFunction: null }, baseZIndex: { classPropertyName: "baseZIndex", publicName: "baseZIndex", isSignal: true, isRequired: false, transformFunction: null }, style: { classPropertyName: "style", publicName: "style", isSignal: true, isRequired: false, transformFunction: null }, styleClass: { classPropertyName: "styleClass", publicName: "styleClass", isSignal: true, isRequired: false, transformFunction: null }, visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null }, motionOptions: { classPropertyName: "motionOptions", publicName: "motionOptions", isSignal: true, isRequired: false, transformFunction: null }, appendTo: { classPropertyName: "appendTo", publicName: "appendTo", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "document:keydown.Escape": "onEscapeKeydown($event)" } }, providers: [ConfirmPopupStyle, { provide: CONFIRMPOPUP_INSTANCE, useExisting: ConfirmPopup }, { provide: PARENT_INSTANCE, useExisting: ConfirmPopup }], queries: [{ propertyName: "contentTemplate", first: true, predicate: ["content"], isSignal: true }, { propertyName: "acceptIconTemplate", first: true, predicate: ["accepticon"], isSignal: true }, { propertyName: "rejectIconTemplate", first: true, predicate: ["rejecticon"], isSignal: true }, { propertyName: "headlessTemplate", first: true, predicate: ["headless"], isSignal: true }], viewQueries: [{ propertyName: "acceptButtonViewChild", first: true, predicate: ["acceptButton"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "rejectButtonViewChild", first: true, predicate: ["rejectButton"], descendants: true, read: ElementRef, isSignal: true }], usesInheritance: true, hostDirectives: [{ directive: i2.Bind }], ngImport: i0, template: `
(render()) {
<div
[pMotion]="computedVisible()"
[pMotionAppear]="true"
[pMotionName]="'p-anchored-overlay'"
[pMotionOptions]="computedMotionOptions()"
(pMotionOnBeforeEnter)="onBeforeEnter($event)"
(pMotionOnAfterLeave)="onAfterLeave()"
pFocusTrap
[pBind]="ptm('root')"
[class]="cn(cx('root'), styleClass())"
[style]="style()"
role="alertdialog"
(click)="onOverlayClick($event)"
>
(headlessTemplate()) {
<ng-container *ngTemplateOutlet="headlessTemplate(); context: headlessContext()"></ng-container>
} {
<div #content [pBind]="ptm('content')" [class]="cx('content')">
(contentTemplate()) {
<ng-container *ngTemplateOutlet="contentTemplate(); context: contentContext()"></ng-container>
} {
(hasIcon) {
<i [pBind]="ptm('icon')" [class]="cx('icon')"></i>
}
<span [pBind]="ptm('message')" [class]="cx('message')">{{ message }}</span>
}
</div>
<div [pBind]="ptm('footer')" [class]="cx('footer')">
(rejectVisible) {
<button
type="button"
[pButton]="getRejectButtonProps()"
[size]="rejectButtonSize"
[text]="rejectButtonText"
[class]="cn(cx('pcRejectButton'), rejectButtonStyleClass)"
[pButtonPT]="ptm('pcRejectButton')"
[pButtonUnstyled]="unstyled()"
[pAutoFocus]="autoFocusReject"
[attr.aria-label]="rejectButtonLabel"
(click)="onReject()"
>
(hasRejectIcon) {
<i [class]="rejectIcon"></i>
} if (rejectIconTemplate()) {
<ng-container *ngTemplateOutlet="rejectIconTemplate()"></ng-container>
}
{{ rejectButtonLabel }}
</button>
}
(acceptVisible) {
<button
type="button"
[pButton]="getAcceptButtonProps()"
[size]="acceptButtonSize"
[class]="cn(cx('pcAcceptButton'), acceptButtonStyleClass)"
[pButtonPT]="ptm('pcAcceptButton')"
[pButtonUnstyled]="unstyled()"
[pAutoFocus]="autoFocusAccept"
[attr.aria-label]="acceptButtonLabel"
(click)="onAccept()"
>
(hasAcceptIcon) {
<i [class]="acceptIcon"></i>
} if (acceptIconTemplate()) {
<ng-container *ngTemplateOutlet="acceptIconTemplate()"></ng-container>
}
{{ acceptButtonLabel }}
</button>
}
</div>
}
</div>
}
`, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: SharedModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i3.ButtonDirective, selector: "[pButton]", inputs: ["pButton", "pButtonPT", "pButtonUnstyled", "hostName", "text", "plain", "raised", "size", "outlined", "link", "rounded", "fluid", "variant", "iconOnly", "loading", "severity"] }, { kind: "directive", type: AutoFocus, selector: "[pAutoFocus]", inputs: ["pAutoFocus"] }, { kind: "directive", type: FocusTrap, selector: "[pFocusTrap]", inputs: ["pFocusTrapDisabled"] }, { kind: "directive", type: Bind, selector: "[pBind]", inputs: ["pBind"] }, { kind: "ngmodule", type: MotionModule }, { kind: "directive", type: i4.MotionDirective, selector: "[pMotion]", inputs: ["pMotion", "pMotionName", "pMotionType", "pMotionSafe", "pMotionDisabled", "pMotionAppear", "pMotionEnter", "pMotionLeave", "pMotionDuration", "pMotionHideStrategy", "pMotionEnterFromClass", "pMotionEnterToClass", "pMotionEnterActiveClass", "pMotionLeaveFromClass", "pMotionLeaveToClass", "pMotionLeaveActiveClass", "pMotionOptions"], outputs: ["pMotionOnBeforeEnter", "pMotionOnEnter", "pMotionOnAfterEnter", "pMotionOnEnterCancelled", "pMotionOnBeforeLeave", "pMotionOnLeave", "pMotionOnAfterLeave", "pMotionOnLeaveCancelled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ConfirmPopup, decorators: [{
type: Component,
args: [{
selector: 'p-confirmpopup',
standalone: true,
imports: [NgTemplateOutlet, SharedModule, ButtonModule, AutoFocus, FocusTrap, Bind, MotionModule],
providers: [ConfirmPopupStyle, { provide: CONFIRMPOPUP_INSTANCE, useExisting: ConfirmPopup }, { provide: PARENT_INSTANCE, useExisting: ConfirmPopup }],
hostDirectives: [Bind],
template: `
(render()) {
<div
[pMotion]="computedVisible()"
[pMotionAppear]="true"
[pMotionName]="'p-anchored-overlay'"
[pMotionOptions]="computedMotionOptions()"
(pMotionOnBeforeEnter)="onBeforeEnter($event)"
(pMotionOnAfterLeave)="onAfterLeave()"
pFocusTrap
[pBind]="ptm('root')"
[class]="cn(cx('root'), styleClass())"
[style]="style()"
role="alertdialog"
(click)="onOverlayClick($event)"
>
(headlessTemplate()) {
<ng-container *ngTemplateOutlet="headlessTemplate(); context: headlessContext()"></ng-container>
} {
<div #content [pBind]="ptm('content')" [class]="cx('content')">
(contentTemplate()) {
<ng-container *ngTemplateOutlet="contentTemplate(); context: contentContext()"></ng-container>
} {
(hasIcon) {
<i [pBind]="ptm('icon')" [class]="cx('icon')"></i>
}
<span [pBind]="ptm('message')" [class]="cx('message')">{{ message }}</span>
}
</div>
<div [pBind]="ptm('footer')" [class]="cx('footer')">
(rejectVisible) {
<button
type="button"
[pButton]="getRejectButtonProps()"
[size]="rejectButtonSize"
[text]="rejectButtonText"
[class]="cn(cx('pcRejectButton'), rejectButtonStyleClass)"
[pButtonPT]="ptm('pcRejectButton')"
[pButtonUnstyled]="unstyled()"
[pAutoFocus]="autoFocusReject"
[attr.aria-label]="rejectButtonLabel"
(click)="onReject()"
>
(hasRejectIcon) {
<i [class]="rejectIcon"></i>
} if (rejectIconTemplate()) {
<ng-container *ngTemplateOutlet="rejectIconTemplate()"></ng-container>
}
{{ rejectButtonLabel }}
</button>
}
(acceptVisible) {
<button
type="button"
[pButton]="getAcceptButtonProps()"
[size]="acceptButtonSize"
[class]="cn(cx('pcAcceptButton'), acceptButtonStyleClass)"
[pButtonPT]="ptm('pcAcceptButton')"
[pButtonUnstyled]="unstyled()"
[pAutoFocus]="autoFocusAccept"
[attr.aria-label]="acceptButtonLabel"
(click)="onAccept()"
>
(hasAcceptIcon) {
<i [class]="acceptIcon"></i>
} if (acceptIconTemplate()) {
<ng-container *ngTemplateOutlet="acceptIconTemplate()"></ng-container>
}
{{ acceptButtonLabel }}
</button>
}
</div>
}
</div>
}
`,
changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None
}]
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1.ConfirmationService }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }, { type: i1.OverlayService }, { type: Document, decorators: [{
type: Inject,
args: [DOCUMENT]
}] }], propDecorators: { key: [{ type: i0.Input, args: [{ isSignal: true, alias: "key", required: false }] }], defaultFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultFocus", required: false }] }], autoZIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoZIndex", required: false }] }], baseZIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "baseZIndex", required: false }] }], style: [{ type: i0.Input, args: [{ isSignal: true, alias: "style", required: false }] }], styleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "styleClass", required: false }] }], visible: [{ type: i0.Input, args: [{ isSignal: true, alias: "visible", required: false }] }], motionOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "motionOptions", required: false }] }], appendTo: [{ type: i0.Input, args: [{ isSignal: true, alias: "appendTo", required: false }] }], contentTemplate: [{ type: i0.ContentChild, args: ['content', { ...{ descendants: false }, isSignal: true }] }], acceptIconTemplate: [{ type: i0.ContentChild, args: ['accepticon', { ...{ descendants: false }, isSignal: true }] }], rejectIconTemplate: [{ type: i0.ContentChild, args: ['rejecticon', { ...{ descendants: false }, isSignal: true }] }], headlessTemplate: [{ type: i0.ContentChild, args: ['headless', { ...{ descendants: false }, isSignal: true }] }], acceptButtonViewChild: [{ type: i0.ViewChild, args: ['acceptButton', { ...{ read: ElementRef }, isSignal: true }] }], rejectButtonViewChild: [{ type: i0.ViewChild, args: ['rejectButton', { ...{ read: ElementRef }, isSignal: true }] }], onEscapeKeydown: [{
type: HostListener,
args: ['document:keydown.Escape', ['$event']]
}] } });
class ConfirmPopupModule {
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ConfirmPopupModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.6", ngImport: i0, type: ConfirmPopupModule, imports: [ConfirmPopup, SharedModule], exports: [ConfirmPopup, SharedModule] });
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ConfirmPopupModule, imports: [ConfirmPopup, SharedModule, SharedModule] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ConfirmPopupModule, decorators: [{
type: NgModule,
args: [{
imports: [ConfirmPopup, SharedModule],
exports: [ConfirmPopup, SharedModule]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { ConfirmPopup, ConfirmPopupClasses, ConfirmPopupModule, ConfirmPopupStyle };
//# sourceMappingURL=primeng-confirmpopup.mjs.map