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,
747 lines (740 loc) • 44.7 kB
JavaScript
import { NgTemplateOutlet } from '@angular/common';
import * as i0 from '@angular/core';
import { Injectable, InjectionToken, inject, input, booleanAttribute, numberAttribute, model, output, contentChild, computed, signal, effect, EventEmitter, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
import { uuid, setAttribute } from '@primeuix/utils';
import { Footer, ConfirmationService, ConfirmEventType, TranslationKeys, SharedModule } from 'primeng/api';
import { BaseComponent, PARENT_INSTANCE } from 'primeng/basecomponent';
import * as i1 from 'primeng/bind';
import { Bind } from 'primeng/bind';
import { ButtonDirective } from 'primeng/button';
import { AutoFocus } from 'primeng/autofocus';
import { Dialog } from 'primeng/dialog';
import { style } from '@primeuix/styles/confirmdialog';
import { BaseStyle } from 'primeng/base';
export * from 'primeng/types/confirmdialog';
const classes = {
root: 'p-confirmdialog',
icon: 'p-confirmdialog-icon',
message: 'p-confirmdialog-message',
pcRejectButton: 'p-confirmdialog-reject-button',
pcAcceptButton: 'p-confirmdialog-accept-button'
};
class ConfirmDialogStyle extends BaseStyle {
name = 'confirmdialog';
style = style;
classes = classes;
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ConfirmDialogStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ConfirmDialogStyle });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ConfirmDialogStyle, decorators: [{
type: Injectable
}] });
/**
*
* ConfirmDialog uses a Dialog UI with confirmDialog method or <ConfirmDialog> tag.
*
* [Live Demo](https://www.primeng.org/confirmdialog)
*
* @module confirmdialogstyle
*
*/
var ConfirmDialogClasses;
(function (ConfirmDialogClasses) {
/**
* Class name of the root element
*/
ConfirmDialogClasses["root"] = "p-confirmdialog";
/**
* Class name of the icon element
*/
ConfirmDialogClasses["icon"] = "p-confirmdialog-icon";
/**
* Class name of the message element
*/
ConfirmDialogClasses["message"] = "p-confirmdialog-message";
/**
* Class name of the reject button element
*/
ConfirmDialogClasses["pcRejectButton"] = "p-confirmdialog-reject-button";
/**
* Class name of the accept button element
*/
ConfirmDialogClasses["pcAcceptButton"] = "p-confirmdialog-accept-button";
})(ConfirmDialogClasses || (ConfirmDialogClasses = {}));
const CONFIRMDIALOG_INSTANCE = new InjectionToken('CONFIRMDIALOG_INSTANCE');
/**
* ConfirmDialog uses a Dialog UI that is integrated with the Confirmation API.
* @group Components
*/
class ConfirmDialog extends BaseComponent {
componentName = 'ConfirmDialog';
$pcConfirmDialog = inject(CONFIRMDIALOG_INSTANCE, { optional: true, skipSelf: true }) ?? undefined;
bindDirectiveInstance = inject(Bind, { self: true });
onAfterViewChecked() {
this.bindDirectiveInstance.setAttrs(this.ptm('host'));
}
/**
* Title text of the dialog.
* @group Props
*/
header = input(/* @ts-ignore */
...(ngDevMode ? [undefined, { debugName: "header" }] : /* istanbul ignore next */ []));
/**
* Icon to display next to message.
* @group Props
*/
icon = input(/* @ts-ignore */
...(ngDevMode ? [undefined, { debugName: "icon" }] : /* istanbul ignore next */ []));
/**
* Message of the confirmation.
* @group Props
*/
message = input(/* @ts-ignore */
...(ngDevMode ? [undefined, { debugName: "message" }] : /* istanbul ignore next */ []));
/**
* Inline style of the element.
* @group Props
*/
style = input(/* @ts-ignore */
...(ngDevMode ? [undefined, { debugName: "style" }] : /* istanbul ignore next */ []));
/**
* Class of the element.
* @group Props
*/
styleClass = input(/* @ts-ignore */
...(ngDevMode ? [undefined, { debugName: "styleClass" }] : /* istanbul ignore next */ []));
/**
* Specify the CSS class(es) for styling the mask element
* @group Props
*/
maskStyleClass = input(/* @ts-ignore */
...(ngDevMode ? [undefined, { debugName: "maskStyleClass" }] : /* istanbul ignore next */ []));
/**
* Icon of the accept button.
* @group Props
*/
acceptIcon = input(/* @ts-ignore */
...(ngDevMode ? [undefined, { debugName: "acceptIcon" }] : /* istanbul ignore next */ []));
/**
* Label of the accept button.
* @group Props
*/
acceptLabel = input(/* @ts-ignore */
...(ngDevMode ? [undefined, { debugName: "acceptLabel" }] : /* istanbul ignore next */ []));
/**
* Defines a string that labels the close button for accessibility.
* @group Props
*/
closeAriaLabel = input(/* @ts-ignore */
...(ngDevMode ? [undefined, { debugName: "closeAriaLabel" }] : /* istanbul ignore next */ []));
/**
* Defines a string that labels the accept button for accessibility.
* @group Props
*/
acceptAriaLabel = input(/* @ts-ignore */
...(ngDevMode ? [undefined, { debugName: "acceptAriaLabel" }] : /* istanbul ignore next */ []));
/**
* Visibility of the accept button.
* @group Props
*/
acceptVisible = input(true, { ...(ngDevMode ? { debugName: "acceptVisible" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
/**
* Icon of the reject button.
* @group Props
*/
rejectIcon = input(/* @ts-ignore */
...(ngDevMode ? [undefined, { debugName: "rejectIcon" }] : /* istanbul ignore next */ []));
/**
* Label of the reject button.
* @group Props
*/
rejectLabel = input(/* @ts-ignore */
...(ngDevMode ? [undefined, { debugName: "rejectLabel" }] : /* istanbul ignore next */ []));
/**
* Defines a string that labels the reject button for accessibility.
* @group Props
*/
rejectAriaLabel = input(/* @ts-ignore */
...(ngDevMode ? [undefined, { debugName: "rejectAriaLabel" }] : /* istanbul ignore next */ []));
/**
* Visibility of the reject button.
* @group Props
*/
rejectVisible = input(true, { ...(ngDevMode ? { debugName: "rejectVisible" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
/**
* Style class of the accept button.
* @group Props
*/
acceptButtonStyleClass = input(/* @ts-ignore */
...(ngDevMode ? [undefined, { debugName: "acceptButtonStyleClass" }] : /* istanbul ignore next */ []));
/**
* Style class of the reject button.
* @group Props
*/
rejectButtonStyleClass = input(/* @ts-ignore */
...(ngDevMode ? [undefined, { debugName: "rejectButtonStyleClass" }] : /* istanbul ignore next */ []));
/**
* Specifies if pressing escape key should hide the dialog.
* @group Props
*/
closeOnEscape = input(true, { ...(ngDevMode ? { debugName: "closeOnEscape" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
/**
* Specifies if clicking the modal background should hide the dialog.
* @group Props
*/
dismissableMask = input(undefined, { ...(ngDevMode ? { debugName: "dismissableMask" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
/**
* Determines whether scrolling behavior should be blocked within the component.
* @group Props
*/
blockScroll = input(true, { ...(ngDevMode ? { debugName: "blockScroll" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
/**
* When enabled dialog is displayed in RTL direction.
* @group Props
*/
rtl = input(false, { ...(ngDevMode ? { debugName: "rtl" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
/**
* Adds a close icon to the header to hide the dialog.
* @group Props
*/
closable = input(true, { ...(ngDevMode ? { debugName: "closable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
/**
* 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 */ []));
/**
* 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 */ []));
/**
* 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 });
/**
* The motion options.
* @group Props
*/
motionOptions = input(/* @ts-ignore */
...(ngDevMode ? [undefined, { debugName: "motionOptions" }] : /* istanbul ignore next */ []));
/**
* The motion options for the mask.
* @group Props
*/
maskMotionOptions = input(/* @ts-ignore */
...(ngDevMode ? [undefined, { debugName: "maskMotionOptions" }] : /* istanbul ignore next */ []));
/**
* When enabled, can only focus on elements inside the confirm dialog.
* @group Props
*/
focusTrap = input(true, { ...(ngDevMode ? { debugName: "focusTrap" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
/**
* Element to receive the focus when the dialog gets visible.
* @group Props
*/
defaultFocus = input('accept', /* @ts-ignore */
...(ngDevMode ? [{ debugName: "defaultFocus" }] : /* istanbul ignore next */ []));
/**
* Object literal to define widths per screen size.
* @group Props
*/
breakpoints = input(/* @ts-ignore */
...(ngDevMode ? [undefined, { debugName: "breakpoints" }] : /* istanbul ignore next */ []));
/**
* Defines if background should be blocked when dialog is displayed.
* @group Props
*/
modal = input(true, { ...(ngDevMode ? { debugName: "modal" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
/**
* Current visible state as a boolean.
* @group Props
*/
visible = model(false, /* @ts-ignore */
...(ngDevMode ? [{ debugName: "visible" }] : /* istanbul ignore next */ []));
/**
* Allows getting the position of the component.
* @group Props
*/
position = input('center', /* @ts-ignore */
...(ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []));
/**
* Enables dragging to change the position using header.
* @group Props
*/
draggable = input(true, { ...(ngDevMode ? { debugName: "draggable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
/**
* Callback to invoke when dialog is hidden.
* @param {ConfirmEventType} enum - Custom confirm event.
* @group Emits
*/
onHide = output();
footer = contentChild(Footer, { ...(ngDevMode ? { debugName: "footer" } : /* istanbul ignore next */ {}), descendants: false });
_componentStyle = inject(ConfirmDialogStyle);
/**
* Custom header template.
* @group Templates
*/
headerTemplate = contentChild('header', { ...(ngDevMode ? { debugName: "headerTemplate" } : /* istanbul ignore next */ {}), descendants: false });
/**
* Custom footer template.
* @group Templates
*/
footerTemplate = contentChild('footer', { ...(ngDevMode ? { debugName: "footerTemplate" } : /* istanbul ignore next */ {}), descendants: false });
/**
* Custom reject icon template.
* @group Templates
*/
rejectIconTemplate = contentChild('rejecticon', { ...(ngDevMode ? { debugName: "rejectIconTemplate" } : /* istanbul ignore next */ {}), descendants: false });
/**
* Custom accept icon template.
* @group Templates
*/
acceptIconTemplate = contentChild('accepticon', { ...(ngDevMode ? { debugName: "acceptIconTemplate" } : /* istanbul ignore next */ {}), descendants: false });
/**
* Custom message template.
* @group Templates
*/
messageTemplate = contentChild('message', { ...(ngDevMode ? { debugName: "messageTemplate" } : /* istanbul ignore next */ {}), descendants: false });
/**
* Custom icon template.
* @group Templates
*/
iconTemplate = contentChild('icon', { ...(ngDevMode ? { debugName: "iconTemplate" } : /* istanbul ignore next */ {}), descendants: false });
/**
* Custom headless template.
* @group Templates
*/
headlessTemplate = contentChild('headless', { ...(ngDevMode ? { debugName: "headlessTemplate" } : /* istanbul ignore next */ {}), descendants: false });
onAcceptCallback = this.onAccept.bind(this);
onRejectCallback = this.onReject.bind(this);
headlessContext = computed(() => ({
$implicit: this.confirmation(),
onAccept: this.onAcceptCallback,
onReject: this.onRejectCallback
}), /* @ts-ignore */
...(ngDevMode ? [{ debugName: "headlessContext" }] : /* istanbul ignore next */ []));
messageContext = computed(() => ({ $implicit: this.confirmation() }), /* @ts-ignore */
...(ngDevMode ? [{ debugName: "messageContext" }] : /* istanbul ignore next */ []));
$appendTo = computed(() => this.appendTo() || this.config.overlayAppendTo(), /* @ts-ignore */
...(ngDevMode ? [{ debugName: "$appendTo" }] : /* istanbul ignore next */ []));
computedMotionOptions = computed(() => {
return {
...this.ptm('motion'),
...this.motionOptions()
};
}, /* @ts-ignore */
...(ngDevMode ? [{ debugName: "computedMotionOptions" }] : /* istanbul ignore next */ []));
computedMaskMotionOptions = computed(() => {
return {
...this.ptm('maskMotion'),
...this.maskMotionOptions()
};
}, /* @ts-ignore */
...(ngDevMode ? [{ debugName: "computedMaskMotionOptions" }] : /* istanbul ignore next */ []));
get focusTarget() {
return this.option('defaultFocus') ?? this.defaultFocus();
}
get autoFocusAccept() {
return this.focusTarget === 'accept';
}
get autoFocusReject() {
return this.focusTarget === 'reject';
}
confirmation = signal(null, /* @ts-ignore */
...(ngDevMode ? [{ debugName: "confirmation" }] : /* istanbul ignore next */ []));
maskVisible = signal(false, /* @ts-ignore */
...(ngDevMode ? [{ debugName: "maskVisible" }] : /* istanbul ignore next */ []));
dialog;
wrapper;
contentContainer;
subscription;
preWidth;
styleElement = null;
id = uuid('pn_id_');
ariaLabelledBy = this.getAriaLabelledBy();
translationSubscription;
confirmationService = inject(ConfirmationService);
constructor() {
super();
effect(() => {
if (this.visible() && !this.maskVisible()) {
this.maskVisible.set(true);
}
});
this.subscription = this.confirmationService.requireConfirmation$.subscribe((confirmation) => {
if (!confirmation) {
this.hide();
return;
}
if (confirmation.key === this.key()) {
this.confirmation.set(confirmation);
this.visible.set(true);
if (confirmation.accept) {
confirmation.acceptEvent = new EventEmitter();
confirmation.acceptEvent.subscribe(confirmation.accept);
}
if (confirmation.reject) {
confirmation.rejectEvent = new EventEmitter();
confirmation.rejectEvent.subscribe(confirmation.reject);
}
}
});
}
onInit() {
if (this.breakpoints()) {
this.createStyle();
}
}
getAriaLabelledBy() {
return this.option('header') ? uuid('pn_id_') + '_header' : null;
}
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;
}
getButtonStyleClass(cx, opt) {
const cxClass = this.cx(cx);
const optionClass = this.option(opt);
return [cxClass, optionClass].filter(Boolean).join(' ');
}
createStyle() {
if (!this.styleElement) {
this.styleElement = this.document.createElement('style');
this.styleElement.type = 'text/css';
setAttribute(this.styleElement, 'nonce', this.config?.csp()?.nonce);
this.document.head.appendChild(this.styleElement);
let innerHTML = '';
for (let breakpoint in this.breakpoints) {
innerHTML += `
screen and (max-width: ${breakpoint}) {
.p-dialog[${this.id}] {
width: ${this.breakpoints[breakpoint]} !important;
}
}
`;
}
this.styleElement.innerHTML = innerHTML;
setAttribute(this.styleElement, 'nonce', this.config?.csp()?.nonce);
}
}
close() {
this.confirmation()?.rejectEvent?.emit(ConfirmEventType.CANCEL);
this.hide(ConfirmEventType.CANCEL);
}
hide(type) {
this.onHide.emit(type);
this.visible.set(false);
// Unsubscribe from confirmation events when the dialogue is closed, because events are created when the dialogue is opened.
this.unsubscribeConfirmationEvents();
}
onDialogHide() {
this.confirmation.set(null);
}
destroyStyle() {
if (this.styleElement) {
this.document.head.removeChild(this.styleElement);
this.styleElement = null;
}
}
onDestroy() {
this.subscription.unsubscribe();
// Unsubscribe from confirmation events if the dialogue is opened and this component is somehow destroyed.
this.unsubscribeConfirmationEvents();
if (this.translationSubscription) {
this.translationSubscription.unsubscribe();
}
this.destroyStyle();
}
onVisibleChange(value) {
if (!value) {
this.close();
}
else {
this.visible.set(value);
}
}
onAccept() {
this.confirmation()?.acceptEvent?.emit();
this.hide(ConfirmEventType.ACCEPT);
}
onReject() {
this.confirmation()?.rejectEvent?.emit(ConfirmEventType.REJECT);
this.hide(ConfirmEventType.REJECT);
}
unsubscribeConfirmationEvents() {
this.confirmation()?.acceptEvent?.unsubscribe();
this.confirmation()?.rejectEvent?.unsubscribe();
}
get acceptButtonLabel() {
return this.option('acceptLabel') || this.getAcceptButtonProps()?.label || this.translate(TranslationKeys.ACCEPT);
}
get rejectButtonLabel() {
return this.option('rejectLabel') || this.getRejectButtonProps()?.label || this.translate(TranslationKeys.REJECT);
}
getAcceptButtonProps() {
return this.option('acceptButtonProps');
}
getRejectButtonProps() {
return this.option('rejectButtonProps');
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ConfirmDialog, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: ConfirmDialog, isStandalone: true, selector: "p-confirmdialog, p-confirm-dialog", inputs: { header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", 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 }, maskStyleClass: { classPropertyName: "maskStyleClass", publicName: "maskStyleClass", isSignal: true, isRequired: false, transformFunction: null }, acceptIcon: { classPropertyName: "acceptIcon", publicName: "acceptIcon", isSignal: true, isRequired: false, transformFunction: null }, acceptLabel: { classPropertyName: "acceptLabel", publicName: "acceptLabel", isSignal: true, isRequired: false, transformFunction: null }, closeAriaLabel: { classPropertyName: "closeAriaLabel", publicName: "closeAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, acceptAriaLabel: { classPropertyName: "acceptAriaLabel", publicName: "acceptAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, acceptVisible: { classPropertyName: "acceptVisible", publicName: "acceptVisible", isSignal: true, isRequired: false, transformFunction: null }, rejectIcon: { classPropertyName: "rejectIcon", publicName: "rejectIcon", isSignal: true, isRequired: false, transformFunction: null }, rejectLabel: { classPropertyName: "rejectLabel", publicName: "rejectLabel", isSignal: true, isRequired: false, transformFunction: null }, rejectAriaLabel: { classPropertyName: "rejectAriaLabel", publicName: "rejectAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, rejectVisible: { classPropertyName: "rejectVisible", publicName: "rejectVisible", isSignal: true, isRequired: false, transformFunction: null }, acceptButtonStyleClass: { classPropertyName: "acceptButtonStyleClass", publicName: "acceptButtonStyleClass", isSignal: true, isRequired: false, transformFunction: null }, rejectButtonStyleClass: { classPropertyName: "rejectButtonStyleClass", publicName: "rejectButtonStyleClass", isSignal: true, isRequired: false, transformFunction: null }, closeOnEscape: { classPropertyName: "closeOnEscape", publicName: "closeOnEscape", isSignal: true, isRequired: false, transformFunction: null }, dismissableMask: { classPropertyName: "dismissableMask", publicName: "dismissableMask", isSignal: true, isRequired: false, transformFunction: null }, blockScroll: { classPropertyName: "blockScroll", publicName: "blockScroll", isSignal: true, isRequired: false, transformFunction: null }, rtl: { classPropertyName: "rtl", publicName: "rtl", isSignal: true, isRequired: false, transformFunction: null }, closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null }, appendTo: { classPropertyName: "appendTo", publicName: "appendTo", isSignal: true, isRequired: false, transformFunction: null }, key: { classPropertyName: "key", publicName: "key", 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 }, motionOptions: { classPropertyName: "motionOptions", publicName: "motionOptions", isSignal: true, isRequired: false, transformFunction: null }, maskMotionOptions: { classPropertyName: "maskMotionOptions", publicName: "maskMotionOptions", isSignal: true, isRequired: false, transformFunction: null }, focusTrap: { classPropertyName: "focusTrap", publicName: "focusTrap", isSignal: true, isRequired: false, transformFunction: null }, defaultFocus: { classPropertyName: "defaultFocus", publicName: "defaultFocus", isSignal: true, isRequired: false, transformFunction: null }, breakpoints: { classPropertyName: "breakpoints", publicName: "breakpoints", isSignal: true, isRequired: false, transformFunction: null }, modal: { classPropertyName: "modal", publicName: "modal", isSignal: true, isRequired: false, transformFunction: null }, visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, draggable: { classPropertyName: "draggable", publicName: "draggable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { visible: "visibleChange", onHide: "onHide" }, providers: [ConfirmDialogStyle, { provide: CONFIRMDIALOG_INSTANCE, useExisting: ConfirmDialog }, { provide: PARENT_INSTANCE, useExisting: ConfirmDialog }], queries: [{ propertyName: "footer", first: true, predicate: Footer, isSignal: true }, { propertyName: "headerTemplate", first: true, predicate: ["header"], isSignal: true }, { propertyName: "footerTemplate", first: true, predicate: ["footer"], isSignal: true }, { propertyName: "rejectIconTemplate", first: true, predicate: ["rejecticon"], isSignal: true }, { propertyName: "acceptIconTemplate", first: true, predicate: ["accepticon"], isSignal: true }, { propertyName: "messageTemplate", first: true, predicate: ["message"], isSignal: true }, { propertyName: "iconTemplate", first: true, predicate: ["icon"], isSignal: true }, { propertyName: "headlessTemplate", first: true, predicate: ["headless"], isSignal: true }], usesInheritance: true, hostDirectives: [{ directive: i1.Bind }], ngImport: i0, template: `
<p-dialog
[pt]="pt"
#dialog
[visible]="visible()"
(visibleChange)="onVisibleChange($event)"
role="alertdialog"
[closable]="option('closable')"
[styleClass]="cn(cx('root'), styleClass())"
[modal]="option('modal')"
[header]="option('header')"
[closeOnEscape]="option('closeOnEscape')"
[blockScroll]="option('blockScroll')"
[appendTo]="$appendTo()"
[position]="position()"
[style]="style()"
[dismissableMask]="dismissableMask()"
[draggable]="draggable()"
[baseZIndex]="baseZIndex()"
[autoZIndex]="autoZIndex()"
[focusOnShow]="false"
[motionOptions]="computedMotionOptions()"
[maskMotionOptions]="computedMaskMotionOptions()"
[maskStyleClass]="cn(cx('mask'), maskStyleClass())"
[unstyled]="unstyled()"
(onHide)="onDialogHide()"
>
(headlessTemplate()) {
<ng-template #headless>
<ng-container *ngTemplateOutlet="headlessTemplate(); context: headlessContext()"></ng-container>
</ng-template>
} {
(headerTemplate()) {
<ng-template #header>
<ng-container *ngTemplateOutlet="headerTemplate()"></ng-container>
</ng-template>
}
<ng-template #content>
(iconTemplate()) {
<ng-container *ngTemplateOutlet="iconTemplate()"></ng-container>
} if (!iconTemplate() && !messageTemplate()) {
(option('icon')) {
<i [class]="cn(cx('icon'), option('icon'))" [pBind]="ptm('icon')"></i>
}
}
(messageTemplate()) {
<ng-container *ngTemplateOutlet="messageTemplate(); context: messageContext()"></ng-container>
} {
<span [class]="cx('message')" [pBind]="ptm('message')" [innerHTML]="option('message')"> </span>
}
</ng-template>
}
<ng-template #footer>
(footerTemplate()) {
<ng-content select="p-footer"></ng-content>
<ng-container *ngTemplateOutlet="footerTemplate()"></ng-container>
}
(!footerTemplate()) {
(option('rejectVisible')) {
<button
type="button"
[pButton]="getRejectButtonProps()"
[class]="getButtonStyleClass('pcRejectButton', 'rejectButtonStyleClass')"
[attr.aria-label]="option('rejectButtonProps', 'ariaLabel')"
[pAutoFocus]="autoFocusReject"
[pButtonPT]="ptm('pcRejectButton')"
[pButtonUnstyled]="unstyled()"
(click)="onReject()"
>
(rejectIcon() && !rejectIconTemplate()) {
(option('rejectIcon')) {
<i [class]="option('rejectIcon')" [pBind]="ptm('pcRejectButton')['icon']"></i>
}
}
(rejectIconTemplate()) {
<ng-container *ngTemplateOutlet="rejectIconTemplate()"></ng-container>
}
{{ rejectButtonLabel }}
</button>
}
(option('acceptVisible')) {
<button
type="button"
[pButton]="getAcceptButtonProps()"
[class]="getButtonStyleClass('pcAcceptButton', 'acceptButtonStyleClass')"
[attr.aria-label]="option('acceptButtonProps', 'ariaLabel')"
[pAutoFocus]="autoFocusAccept"
[pButtonPT]="ptm('pcAcceptButton')"
[pButtonUnstyled]="unstyled()"
(click)="onAccept()"
>
(acceptIcon() && !acceptIconTemplate()) {
(option('acceptIcon')) {
<i [class]="option('acceptIcon')" [pBind]="ptm('pcAcceptButton')['icon']"></i>
}
}
(acceptIconTemplate()) {
<ng-container *ngTemplateOutlet="acceptIconTemplate()"></ng-container>
}
{{ acceptButtonLabel }}
</button>
}
}
</ng-template>
</p-dialog>
`, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: 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: "component", type: Dialog, selector: "p-dialog", inputs: ["hostName", "header", "draggable", "resizable", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "breakpoints", "styleClass", "maskStyleClass", "maskStyle", "showHeader", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "maskMotionOptions", "motionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "closeButtonProps", "maximizeButtonProps", "visible", "style", "position", "role", "appendTo"], outputs: ["visibleChange", "onShow", "onHide", "onResizeInit", "onResizeEnd", "onDragStart", "onDragEnd", "onMaximize"] }, { kind: "ngmodule", type: SharedModule }, { kind: "directive", type: Bind, selector: "[pBind]", inputs: ["pBind"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ConfirmDialog, decorators: [{
type: Component,
args: [{
selector: 'p-confirmdialog, p-confirm-dialog',
standalone: true,
imports: [NgTemplateOutlet, ButtonDirective, AutoFocus, Dialog, SharedModule, Bind],
template: `
<p-dialog
[pt]="pt"
#dialog
[visible]="visible()"
(visibleChange)="onVisibleChange($event)"
role="alertdialog"
[closable]="option('closable')"
[styleClass]="cn(cx('root'), styleClass())"
[modal]="option('modal')"
[header]="option('header')"
[closeOnEscape]="option('closeOnEscape')"
[blockScroll]="option('blockScroll')"
[appendTo]="$appendTo()"
[position]="position()"
[style]="style()"
[dismissableMask]="dismissableMask()"
[draggable]="draggable()"
[baseZIndex]="baseZIndex()"
[autoZIndex]="autoZIndex()"
[focusOnShow]="false"
[motionOptions]="computedMotionOptions()"
[maskMotionOptions]="computedMaskMotionOptions()"
[maskStyleClass]="cn(cx('mask'), maskStyleClass())"
[unstyled]="unstyled()"
(onHide)="onDialogHide()"
>
(headlessTemplate()) {
<ng-template #headless>
<ng-container *ngTemplateOutlet="headlessTemplate(); context: headlessContext()"></ng-container>
</ng-template>
} {
(headerTemplate()) {
<ng-template #header>
<ng-container *ngTemplateOutlet="headerTemplate()"></ng-container>
</ng-template>
}
<ng-template #content>
(iconTemplate()) {
<ng-container *ngTemplateOutlet="iconTemplate()"></ng-container>
} if (!iconTemplate() && !messageTemplate()) {
(option('icon')) {
<i [class]="cn(cx('icon'), option('icon'))" [pBind]="ptm('icon')"></i>
}
}
(messageTemplate()) {
<ng-container *ngTemplateOutlet="messageTemplate(); context: messageContext()"></ng-container>
} {
<span [class]="cx('message')" [pBind]="ptm('message')" [innerHTML]="option('message')"> </span>
}
</ng-template>
}
<ng-template #footer>
(footerTemplate()) {
<ng-content select="p-footer"></ng-content>
<ng-container *ngTemplateOutlet="footerTemplate()"></ng-container>
}
(!footerTemplate()) {
(option('rejectVisible')) {
<button
type="button"
[pButton]="getRejectButtonProps()"
[class]="getButtonStyleClass('pcRejectButton', 'rejectButtonStyleClass')"
[attr.aria-label]="option('rejectButtonProps', 'ariaLabel')"
[pAutoFocus]="autoFocusReject"
[pButtonPT]="ptm('pcRejectButton')"
[pButtonUnstyled]="unstyled()"
(click)="onReject()"
>
(rejectIcon() && !rejectIconTemplate()) {
(option('rejectIcon')) {
<i [class]="option('rejectIcon')" [pBind]="ptm('pcRejectButton')['icon']"></i>
}
}
(rejectIconTemplate()) {
<ng-container *ngTemplateOutlet="rejectIconTemplate()"></ng-container>
}
{{ rejectButtonLabel }}
</button>
}
(option('acceptVisible')) {
<button
type="button"
[pButton]="getAcceptButtonProps()"
[class]="getButtonStyleClass('pcAcceptButton', 'acceptButtonStyleClass')"
[attr.aria-label]="option('acceptButtonProps', 'ariaLabel')"
[pAutoFocus]="autoFocusAccept"
[pButtonPT]="ptm('pcAcceptButton')"
[pButtonUnstyled]="unstyled()"
(click)="onAccept()"
>
(acceptIcon() && !acceptIconTemplate()) {
(option('acceptIcon')) {
<i [class]="option('acceptIcon')" [pBind]="ptm('pcAcceptButton')['icon']"></i>
}
}
(acceptIconTemplate()) {
<ng-container *ngTemplateOutlet="acceptIconTemplate()"></ng-container>
}
{{ acceptButtonLabel }}
</button>
}
}
</ng-template>
</p-dialog>
`,
changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None,
providers: [ConfirmDialogStyle, { provide: CONFIRMDIALOG_INSTANCE, useExisting: ConfirmDialog }, { provide: PARENT_INSTANCE, useExisting: ConfirmDialog }],
hostDirectives: [Bind]
}]
}], ctorParameters: () => [], propDecorators: { header: [{ type: i0.Input, args: [{ isSignal: true, alias: "header", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: false }] }], style: [{ type: i0.Input, args: [{ isSignal: true, alias: "style", required: false }] }], styleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "styleClass", required: false }] }], maskStyleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "maskStyleClass", required: false }] }], acceptIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "acceptIcon", required: false }] }], acceptLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "acceptLabel", required: false }] }], closeAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeAriaLabel", required: false }] }], acceptAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "acceptAriaLabel", required: false }] }], acceptVisible: [{ type: i0.Input, args: [{ isSignal: true, alias: "acceptVisible", required: false }] }], rejectIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "rejectIcon", required: false }] }], rejectLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "rejectLabel", required: false }] }], rejectAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "rejectAriaLabel", required: false }] }], rejectVisible: [{ type: i0.Input, args: [{ isSignal: true, alias: "rejectVisible", required: false }] }], acceptButtonStyleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "acceptButtonStyleClass", required: false }] }], rejectButtonStyleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "rejectButtonStyleClass", required: false }] }], closeOnEscape: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnEscape", required: false }] }], dismissableMask: [{ type: i0.Input, args: [{ isSignal: true, alias: "dismissableMask", required: false }] }], blockScroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "blockScroll", required: false }] }], rtl: [{ type: i0.Input, args: [{ isSignal: true, alias: "rtl", required: false }] }], closable: [{ type: i0.Input, args: [{ isSignal: true, alias: "closable", required: false }] }], appendTo: [{ type: i0.Input, args: [{ isSignal: true, alias: "appendTo", required: false }] }], key: [{ type: i0.Input, args: [{ isSignal: true, alias: "key", required: false }] }], autoZIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoZIndex", required: false }] }], baseZIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "baseZIndex", required: false }] }], motionOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "motionOptions", required: false }] }], maskMotionOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "maskMotionOptions", required: false }] }], focusTrap: [{ type: i0.Input, args: [{ isSignal: true, alias: "focusTrap", required: false }] }], defaultFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultFocus", required: false }] }], breakpoints: [{ type: i0.Input, args: [{ isSignal: true, alias: "breakpoints", required: false }] }], modal: [{ type: i0.Input, args: [{ isSignal: true, alias: "modal", required: false }] }], visible: [{ type: i0.Input, args: [{ isSignal: true, alias: "visible", required: false }] }, { type: i0.Output, args: ["visibleChange"] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], draggable: [{ type: i0.Input, args: [{ isSignal: true, alias: "draggable", required: false }] }], onHide: [{ type: i0.Output, args: ["onHide"] }], footer: [{ type: i0.ContentChild, args: [i0.forwardRef(() => Footer), { ...{ descendants: false }, isSignal: true }] }], headerTemplate: [{ type: i0.ContentChild, args: ['header', { ...{ descendants: false }, isSignal: true }] }], footerTemplate: [{ type: i0.ContentChild, args: ['footer', { ...{ descendants: false }, isSignal: true }] }], rejectIconTemplate: [{ type: i0.ContentChild, args: ['rejecticon', { ...{ descendants: false }, isSignal: true }] }], acceptIconTemplate: [{ type: i0.ContentChild, args: ['accepticon', { ...{ descendants: false }, isSignal: true }] }], messageTemplate: [{ type: i0.ContentChild, args: ['message', { ...{ descendants: false }, isSignal: true }] }], iconTemplate: [{ type: i0.ContentChild, args: ['icon', { ...{ descendants: false }, isSignal: true }] }], headlessTemplate: [{ type: i0.ContentChild, args: ['headless', { ...{ descendants: false }, isSignal: true }] }] } });
class ConfirmDialogModule {
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ConfirmDialogModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.6", ngImport: i0, type: ConfirmDialogModule, imports: [ConfirmDialog, SharedModule], exports: [ConfirmDialog, SharedModule] });
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ConfirmDialogModule, imports: [ConfirmDialog, SharedModule, SharedModule] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ConfirmDialogModule, decorators: [{
type: NgModule,
args: [{
imports: [ConfirmDialog, SharedModule],
exports: [ConfirmDialog, SharedModule]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { ConfirmDialog, ConfirmDialogClasses, ConfirmDialogModule, ConfirmDialogStyle };
//# sourceMappingURL=primeng-confirmdialog.mjs.map