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
929 lines (922 loc) • 41.6 kB
JavaScript
import { animation, style, animate, trigger, transition, useAnimation } from '@angular/animations';
import * as i2 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i0 from '@angular/core';
import { Injectable, EventEmitter, inject, booleanAttribute, numberAttribute, Component, ChangeDetectionStrategy, ViewEncapsulation, Input, Output, ContentChild, ContentChildren, NgModule } from '@angular/core';
import { uuid, findSingle, setAttribute } from '@primeuix/utils';
import * as i1 from 'primeng/api';
import { ConfirmEventType, TranslationKeys, Footer, PrimeTemplate, SharedModule } from 'primeng/api';
import { BaseComponent } from 'primeng/basecomponent';
import { Button } from 'primeng/button';
import { Dialog } from 'primeng/dialog';
import { BaseStyle } from 'primeng/base';
const theme = ({ dt }) => `
.p-confirmdialog .p-dialog-content {
display: flex;
align-items: center;
gap: ${dt('confirmdialog.content.gap')};
}
.p-confirmdialog .p-confirmdialog-icon {
color: ${dt('confirmdialog.icon.color')};
font-size: ${dt('confirmdialog.icon.size')};
width: ${dt('confirmdialog.icon.size')};
height: ${dt('confirmdialog.icon.size')};
}
`;
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';
theme = theme;
classes = classes;
static ɵfac = /*@__PURE__*/ (() => { let ɵConfirmDialogStyle_BaseFactory; return function ConfirmDialogStyle_Factory(__ngFactoryType__) { return (ɵConfirmDialogStyle_BaseFactory || (ɵConfirmDialogStyle_BaseFactory = i0.ɵɵgetInheritedFactory(ConfirmDialogStyle)))(__ngFactoryType__ || ConfirmDialogStyle); }; })();
static ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: ConfirmDialogStyle, factory: ConfirmDialogStyle.ɵfac });
}
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ConfirmDialogStyle, [{
type: Injectable
}], null, null); })();
/**
*
* 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 _c0 = ["header"];
const _c1 = ["footer"];
const _c2 = ["rejecticon"];
const _c3 = ["accepticon"];
const _c4 = ["message"];
const _c5 = ["icon"];
const _c6 = ["headless"];
const _c7 = [[["p-footer"]]];
const _c8 = ["p-footer"];
const _c9 = (a0, a1, a2) => ({ $implicit: a0, onAccept: a1, onReject: a2 });
const _c10 = a0 => ({ $implicit: a0 });
function ConfirmDialog_Conditional_2_ng_template_0_ng_container_0_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵelementContainer(0);
} }
function ConfirmDialog_Conditional_2_ng_template_0_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵtemplate(0, ConfirmDialog_Conditional_2_ng_template_0_ng_container_0_Template, 1, 0, "ng-container", 5);
} if (rf & 2) {
const ctx_r1 = i0.ɵɵnextContext(2);
i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.headlessTemplate || ctx_r1._headlessTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction3(2, _c9, ctx_r1.confirmation, ctx_r1.onAccept.bind(ctx_r1), ctx_r1.onReject.bind(ctx_r1)));
} }
function ConfirmDialog_Conditional_2_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵtemplate(0, ConfirmDialog_Conditional_2_ng_template_0_Template, 1, 6, "ng-template", null, 2, i0.ɵɵtemplateRefExtractor);
} }
function ConfirmDialog_Conditional_3_Conditional_0_ng_container_1_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵelementContainer(0);
} }
function ConfirmDialog_Conditional_3_Conditional_0_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵelementStart(0, "div", 6);
i0.ɵɵtemplate(1, ConfirmDialog_Conditional_3_Conditional_0_ng_container_1_Template, 1, 0, "ng-container", 7);
i0.ɵɵelementEnd();
} if (rf & 2) {
const ctx_r1 = i0.ɵɵnextContext(2);
i0.ɵɵproperty("ngClass", ctx_r1.cx("header"));
i0.ɵɵadvance();
i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.headerTemplate || ctx_r1._headerTemplate);
} }
function ConfirmDialog_Conditional_3_ng_template_1_Conditional_0_0_ng_template_0_Template(rf, ctx) { }
function ConfirmDialog_Conditional_3_ng_template_1_Conditional_0_0_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵtemplate(0, ConfirmDialog_Conditional_3_ng_template_1_Conditional_0_0_ng_template_0_Template, 0, 0, "ng-template");
} }
function ConfirmDialog_Conditional_3_ng_template_1_Conditional_0_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵtemplate(0, ConfirmDialog_Conditional_3_ng_template_1_Conditional_0_0_Template, 1, 0, null, 7);
} if (rf & 2) {
const ctx_r1 = i0.ɵɵnextContext(3);
i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.iconTemplate || ctx_r1._iconTemplate);
} }
function ConfirmDialog_Conditional_3_ng_template_1_Conditional_1_i_0_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵelement(0, "i", 6);
} if (rf & 2) {
const ctx_r1 = i0.ɵɵnextContext(4);
i0.ɵɵclassMap(ctx_r1.option("icon"));
i0.ɵɵproperty("ngClass", ctx_r1.cx("icon"));
} }
function ConfirmDialog_Conditional_3_ng_template_1_Conditional_1_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵtemplate(0, ConfirmDialog_Conditional_3_ng_template_1_Conditional_1_i_0_Template, 1, 3, "i", 10);
} if (rf & 2) {
const ctx_r1 = i0.ɵɵnextContext(3);
i0.ɵɵproperty("ngIf", ctx_r1.option("icon"));
} }
function ConfirmDialog_Conditional_3_ng_template_1_Conditional_2_0_ng_template_0_Template(rf, ctx) { }
function ConfirmDialog_Conditional_3_ng_template_1_Conditional_2_0_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵtemplate(0, ConfirmDialog_Conditional_3_ng_template_1_Conditional_2_0_ng_template_0_Template, 0, 0, "ng-template");
} }
function ConfirmDialog_Conditional_3_ng_template_1_Conditional_2_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵtemplate(0, ConfirmDialog_Conditional_3_ng_template_1_Conditional_2_0_Template, 1, 0, null, 5);
} if (rf & 2) {
const ctx_r1 = i0.ɵɵnextContext(3);
i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.messageTemplate || ctx_r1._messageTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c10, ctx_r1.confirmation));
} }
function ConfirmDialog_Conditional_3_ng_template_1_Conditional_3_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵelement(0, "span", 9);
} if (rf & 2) {
const ctx_r1 = i0.ɵɵnextContext(3);
i0.ɵɵproperty("ngClass", ctx_r1.cx("message"))("innerHTML", ctx_r1.option("message"), i0.ɵɵsanitizeHtml);
} }
function ConfirmDialog_Conditional_3_ng_template_1_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵtemplate(0, ConfirmDialog_Conditional_3_ng_template_1_Conditional_0_Template, 1, 1)(1, ConfirmDialog_Conditional_3_ng_template_1_Conditional_1_Template, 1, 1, "i", 8)(2, ConfirmDialog_Conditional_3_ng_template_1_Conditional_2_Template, 1, 4)(3, ConfirmDialog_Conditional_3_ng_template_1_Conditional_3_Template, 1, 2, "span", 9);
} if (rf & 2) {
const ctx_r1 = i0.ɵɵnextContext(2);
i0.ɵɵconditional(ctx_r1.iconTemplate || ctx_r1._iconTemplate ? 0 : !ctx_r1.iconTemplate && !ctx_r1._iconTemplate && !ctx_r1._messageTemplate && !ctx_r1.messageTemplate ? 1 : -1);
i0.ɵɵadvance(2);
i0.ɵɵconditional(ctx_r1.messageTemplate || ctx_r1._messageTemplate ? 2 : 3);
} }
function ConfirmDialog_Conditional_3_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵtemplate(0, ConfirmDialog_Conditional_3_Conditional_0_Template, 2, 2, "div", 6)(1, ConfirmDialog_Conditional_3_ng_template_1_Template, 4, 2, "ng-template", null, 3, i0.ɵɵtemplateRefExtractor);
} if (rf & 2) {
const ctx_r1 = i0.ɵɵnextContext();
i0.ɵɵconditional(ctx_r1.headerTemplate || ctx_r1._headerTemplate ? 0 : -1);
} }
function ConfirmDialog_ng_template_4_Conditional_0_ng_container_1_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵelementContainer(0);
} }
function ConfirmDialog_ng_template_4_Conditional_0_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵprojection(0);
i0.ɵɵtemplate(1, ConfirmDialog_ng_template_4_Conditional_0_ng_container_1_Template, 1, 0, "ng-container", 7);
} if (rf & 2) {
const ctx_r1 = i0.ɵɵnextContext(2);
i0.ɵɵadvance();
i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.footerTemplate || ctx_r1._footerTemplate);
} }
function ConfirmDialog_ng_template_4_Conditional_1_p_button_0_Conditional_1_i_0_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵelement(0, "i");
} if (rf & 2) {
const ctx_r1 = i0.ɵɵnextContext(5);
i0.ɵɵclassMap(ctx_r1.option("rejectIcon"));
} }
function ConfirmDialog_ng_template_4_Conditional_1_p_button_0_Conditional_1_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵtemplate(0, ConfirmDialog_ng_template_4_Conditional_1_p_button_0_Conditional_1_i_0_Template, 1, 2, "i", 14);
} if (rf & 2) {
const ctx_r1 = i0.ɵɵnextContext(4);
i0.ɵɵproperty("ngIf", ctx_r1.option("rejectIcon"));
} }
function ConfirmDialog_ng_template_4_Conditional_1_p_button_0_2_ng_template_0_Template(rf, ctx) { }
function ConfirmDialog_ng_template_4_Conditional_1_p_button_0_2_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵtemplate(0, ConfirmDialog_ng_template_4_Conditional_1_p_button_0_2_ng_template_0_Template, 0, 0, "ng-template");
} }
function ConfirmDialog_ng_template_4_Conditional_1_p_button_0_Template(rf, ctx) { if (rf & 1) {
const _r3 = i0.ɵɵgetCurrentView();
i0.ɵɵelementStart(0, "p-button", 12);
i0.ɵɵlistener("onClick", function ConfirmDialog_ng_template_4_Conditional_1_p_button_0_Template_p_button_onClick_0_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.onReject()); });
i0.ɵɵtemplate(1, ConfirmDialog_ng_template_4_Conditional_1_p_button_0_Conditional_1_Template, 1, 1, "i", 13)(2, ConfirmDialog_ng_template_4_Conditional_1_p_button_0_2_Template, 1, 0, null, 7);
i0.ɵɵelementEnd();
} if (rf & 2) {
const ctx_r1 = i0.ɵɵnextContext(3);
i0.ɵɵproperty("label", ctx_r1.rejectButtonLabel)("styleClass", ctx_r1.getButtonStyleClass("pcRejectButton", "rejectButtonStyleClass"))("ariaLabel", ctx_r1.option("rejectButtonProps", "ariaLabel"))("buttonProps", ctx_r1.getRejectButtonProps());
i0.ɵɵadvance();
i0.ɵɵconditional(ctx_r1.rejectIcon && !ctx_r1.rejectIconTemplate && !ctx_r1._rejectIconTemplate ? 1 : -1);
i0.ɵɵadvance();
i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.rejectIconTemplate || ctx_r1._rejectIconTemplate);
} }
function ConfirmDialog_ng_template_4_Conditional_1_p_button_1_Conditional_1_i_0_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵelement(0, "i");
} if (rf & 2) {
const ctx_r1 = i0.ɵɵnextContext(5);
i0.ɵɵclassMap(ctx_r1.option("acceptIcon"));
} }
function ConfirmDialog_ng_template_4_Conditional_1_p_button_1_Conditional_1_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵtemplate(0, ConfirmDialog_ng_template_4_Conditional_1_p_button_1_Conditional_1_i_0_Template, 1, 2, "i", 14);
} if (rf & 2) {
const ctx_r1 = i0.ɵɵnextContext(4);
i0.ɵɵproperty("ngIf", ctx_r1.option("acceptIcon"));
} }
function ConfirmDialog_ng_template_4_Conditional_1_p_button_1_2_ng_template_0_Template(rf, ctx) { }
function ConfirmDialog_ng_template_4_Conditional_1_p_button_1_2_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵtemplate(0, ConfirmDialog_ng_template_4_Conditional_1_p_button_1_2_ng_template_0_Template, 0, 0, "ng-template");
} }
function ConfirmDialog_ng_template_4_Conditional_1_p_button_1_Template(rf, ctx) { if (rf & 1) {
const _r4 = i0.ɵɵgetCurrentView();
i0.ɵɵelementStart(0, "p-button", 12);
i0.ɵɵlistener("onClick", function ConfirmDialog_ng_template_4_Conditional_1_p_button_1_Template_p_button_onClick_0_listener() { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.onAccept()); });
i0.ɵɵtemplate(1, ConfirmDialog_ng_template_4_Conditional_1_p_button_1_Conditional_1_Template, 1, 1, "i", 13)(2, ConfirmDialog_ng_template_4_Conditional_1_p_button_1_2_Template, 1, 0, null, 7);
i0.ɵɵelementEnd();
} if (rf & 2) {
const ctx_r1 = i0.ɵɵnextContext(3);
i0.ɵɵproperty("label", ctx_r1.acceptButtonLabel)("styleClass", ctx_r1.getButtonStyleClass("pcAcceptButton", "acceptButtonStyleClass"))("ariaLabel", ctx_r1.option("acceptButtonProps", "ariaLabel"))("buttonProps", ctx_r1.getAcceptButtonProps());
i0.ɵɵadvance();
i0.ɵɵconditional(ctx_r1.acceptIcon && !ctx_r1._acceptIconTemplate && !ctx_r1.acceptIconTemplate ? 1 : -1);
i0.ɵɵadvance();
i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.acceptIconTemplate || ctx_r1._acceptIconTemplate);
} }
function ConfirmDialog_ng_template_4_Conditional_1_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵtemplate(0, ConfirmDialog_ng_template_4_Conditional_1_p_button_0_Template, 3, 6, "p-button", 11)(1, ConfirmDialog_ng_template_4_Conditional_1_p_button_1_Template, 3, 6, "p-button", 11);
} if (rf & 2) {
const ctx_r1 = i0.ɵɵnextContext(2);
i0.ɵɵproperty("ngIf", ctx_r1.option("rejectVisible"));
i0.ɵɵadvance();
i0.ɵɵproperty("ngIf", ctx_r1.option("acceptVisible"));
} }
function ConfirmDialog_ng_template_4_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵtemplate(0, ConfirmDialog_ng_template_4_Conditional_0_Template, 2, 1)(1, ConfirmDialog_ng_template_4_Conditional_1_Template, 2, 2);
} if (rf & 2) {
const ctx_r1 = i0.ɵɵnextContext();
i0.ɵɵconditional(ctx_r1.footerTemplate || ctx_r1._footerTemplate ? 0 : -1);
i0.ɵɵadvance();
i0.ɵɵconditional(!ctx_r1.footerTemplate && !ctx_r1._footerTemplate ? 1 : -1);
} }
const showAnimation = animation([style({ transform: '{{transform}}', opacity: 0 }), animate('{{transition}}', style({ transform: 'none', opacity: 1 }))]);
const hideAnimation = animation([animate('{{transition}}', style({ transform: '{{transform}}', opacity: 0 }))]);
/**
* ConfirmDialog uses a Dialog UI that is integrated with the Confirmation API.
* @group Components
*/
class ConfirmDialog extends BaseComponent {
confirmationService;
zone;
/**
* Title text of the dialog.
* @group Props
*/
header;
/**
* Icon to display next to message.
* @group Props
*/
icon;
/**
* Message of the confirmation.
* @group Props
*/
message;
/**
* Inline style of the element.
* @group Props
*/
get style() {
return this._style;
}
set style(value) {
this._style = value;
this.cd.markForCheck();
}
/**
* Class of the element.
* @group Props
*/
styleClass;
/**
* Specify the CSS class(es) for styling the mask element
* @group Props
*/
maskStyleClass;
/**
* Icon of the accept button.
* @group Props
*/
acceptIcon;
/**
* Label of the accept button.
* @group Props
*/
acceptLabel;
/**
* Defines a string that labels the close button for accessibility.
* @group Props
*/
closeAriaLabel;
/**
* Defines a string that labels the accept button for accessibility.
* @group Props
*/
acceptAriaLabel;
/**
* Visibility of the accept button.
* @group Props
*/
acceptVisible = true;
/**
* Icon of the reject button.
* @group Props
*/
rejectIcon;
/**
* Label of the reject button.
* @group Props
*/
rejectLabel;
/**
* Defines a string that labels the reject button for accessibility.
* @group Props
*/
rejectAriaLabel;
/**
* Visibility of the reject button.
* @group Props
*/
rejectVisible = true;
/**
* Style class of the accept button.
* @group Props
*/
acceptButtonStyleClass;
/**
* Style class of the reject button.
* @group Props
*/
rejectButtonStyleClass;
/**
* Specifies if pressing escape key should hide the dialog.
* @group Props
*/
closeOnEscape = true;
/**
* Specifies if clicking the modal background should hide the dialog.
* @group Props
*/
dismissableMask;
/**
* Determines whether scrolling behavior should be blocked within the component.
* @group Props
*/
blockScroll = true;
/**
* When enabled dialog is displayed in RTL direction.
* @group Props
*/
rtl = false;
/**
* Adds a close icon to the header to hide the dialog.
* @group Props
*/
closable = true;
/**
* Target element to attach the dialog, 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).
* @group Props
*/
appendTo = 'body';
/**
* Optional key to match the key of confirm object, necessary to use when component tree has multiple confirm dialogs.
* @group Props
*/
key;
/**
* Whether to automatically manage layering.
* @group Props
*/
autoZIndex = true;
/**
* Base zIndex value to use in layering.
* @group Props
*/
baseZIndex = 0;
/**
* Transition options of the animation.
* @group Props
*/
transitionOptions = '150ms cubic-bezier(0, 0, 0.2, 1)';
/**
* When enabled, can only focus on elements inside the confirm dialog.
* @group Props
*/
focusTrap = true;
/**
* Element to receive the focus when the dialog gets visible.
* @group Props
*/
defaultFocus = 'accept';
/**
* Object literal to define widths per screen size.
* @group Props
*/
breakpoints;
/**
* Current visible state as a boolean.
* @group Props
*/
get visible() {
return this._visible;
}
set visible(value) {
this._visible = value;
if (this._visible && !this.maskVisible) {
this.maskVisible = true;
}
this.cd.markForCheck();
}
/**
* Allows getting the position of the component.
* @group Props
*/
get position() {
return this._position;
}
set position(value) {
this._position = value;
switch (value) {
case 'topleft':
case 'bottomleft':
case 'left':
this.transformOptions = 'translate3d(-100%, 0px, 0px)';
break;
case 'topright':
case 'bottomright':
case 'right':
this.transformOptions = 'translate3d(100%, 0px, 0px)';
break;
case 'bottom':
this.transformOptions = 'translate3d(0px, 100%, 0px)';
break;
case 'top':
this.transformOptions = 'translate3d(0px, -100%, 0px)';
break;
default:
this.transformOptions = 'scale(0.7)';
break;
}
}
/**
* Callback to invoke when dialog is hidden.
* @param {ConfirmEventType} enum - Custom confirm event.
* @group Emits
*/
onHide = new EventEmitter();
footer;
_componentStyle = inject(ConfirmDialogStyle);
headerTemplate;
footerTemplate;
rejectIconTemplate;
acceptIconTemplate;
messageTemplate;
iconTemplate;
headlessTemplate;
templates;
_headerTemplate;
_footerTemplate;
_rejectIconTemplate;
_acceptIconTemplate;
_messageTemplate;
_iconTemplate;
_headlessTemplate;
confirmation;
_visible;
_style;
maskVisible;
dialog;
wrapper;
contentContainer;
subscription;
preWidth;
_position = 'center';
transformOptions = 'scale(0.7)';
styleElement;
id = uuid('pn_id_');
ariaLabelledBy = this.getAriaLabelledBy();
translationSubscription;
get containerClass() {
return this.cx('root') + ' ' + this.styleClass || ' ';
}
constructor(confirmationService, zone) {
super();
this.confirmationService = confirmationService;
this.zone = zone;
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;
}
});
}
ngOnInit() {
super.ngOnInit();
if (this.breakpoints) {
this.createStyle();
}
this.translationSubscription = this.config.translationObserver.subscribe(() => {
if (this.visible) {
this.cd.markForCheck();
}
});
}
ngAfterContentInit() {
this.templates?.forEach((item) => {
switch (item.getType()) {
case 'header':
this._headerTemplate = item.template;
break;
case 'footer':
this._footerTemplate = item.template;
break;
case 'message':
this._messageTemplate = item.template;
break;
case 'icon':
this._iconTemplate = item.template;
break;
case 'rejecticon':
this._rejectIconTemplate = item.template;
break;
case 'accepticon':
this._acceptIconTemplate = item.template;
break;
case 'headless':
this._headlessTemplate = item.template;
break;
}
});
}
getAriaLabelledBy() {
return this.header !== null ? uuid('pn_id_') + '_header' : null;
}
option(name, k) {
const source = this || this;
if (source.hasOwnProperty(name)) {
if (k) {
return source[k];
}
return source[name];
}
return undefined;
}
getButtonStyleClass(cx, opt) {
const cxClass = this.cx(cx);
const optionClass = this.option(opt);
return [cxClass, optionClass].filter(Boolean).join(' ');
}
getElementToFocus() {
switch (this.option('defaultFocus')) {
case 'accept':
return findSingle(this.dialog.el.nativeElement, '.p-confirm-dialog-accept');
case 'reject':
return findSingle(this.dialog.el.nativeElement, '.p-confirm-dialog-reject');
case 'close':
return findSingle(this.dialog.el.nativeElement, '.p-dialog-header-close');
case 'none':
return null;
//backward compatibility
default:
return findSingle(this.dialog.el.nativeElement, '.p-confirm-dialog-accept');
}
}
createStyle() {
if (!this.styleElement) {
this.styleElement = this.document.createElement('style');
this.styleElement.type = 'text/css';
this.document.head.appendChild(this.styleElement);
let innerHTML = '';
for (let breakpoint in this.breakpoints) {
innerHTML += `
@media 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(event) {
if (this.confirmation?.rejectEvent) {
this.confirmation.rejectEvent.emit(ConfirmEventType.CANCEL);
}
this.hide(ConfirmEventType.CANCEL);
event.preventDefault();
}
hide(type) {
this.onHide.emit(type);
this.visible = false;
this.confirmation = null;
}
destroyStyle() {
if (this.styleElement) {
this.document.head.removeChild(this.styleElement);
this.styleElement = null;
}
}
ngOnDestroy() {
this.subscription.unsubscribe();
if (this.translationSubscription) {
this.translationSubscription.unsubscribe();
}
this.destroyStyle();
super.ngOnDestroy();
}
onAccept() {
if (this.confirmation && this.confirmation.acceptEvent) {
this.confirmation.acceptEvent.emit();
}
this.hide(ConfirmEventType.ACCEPT);
}
onReject() {
if (this.confirmation && this.confirmation.rejectEvent) {
this.confirmation.rejectEvent.emit(ConfirmEventType.REJECT);
}
this.hide(ConfirmEventType.REJECT);
}
get acceptButtonLabel() {
return this.option('acceptLabel') || this.config.getTranslation(TranslationKeys.ACCEPT);
}
get rejectButtonLabel() {
return this.option('rejectLabel') || this.config.getTranslation(TranslationKeys.REJECT);
}
getAcceptButtonProps() {
return this.option('acceptButtonProps');
}
getRejectButtonProps() {
return this.option('rejectButtonProps');
}
static ɵfac = function ConfirmDialog_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || ConfirmDialog)(i0.ɵɵdirectiveInject(i1.ConfirmationService), i0.ɵɵdirectiveInject(i0.NgZone)); };
static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ConfirmDialog, selectors: [["p-confirmDialog"], ["p-confirmdialog"], ["p-confirm-dialog"]], contentQueries: function ConfirmDialog_ContentQueries(rf, ctx, dirIndex) { if (rf & 1) {
i0.ɵɵcontentQuery(dirIndex, Footer, 5);
i0.ɵɵcontentQuery(dirIndex, _c0, 4);
i0.ɵɵcontentQuery(dirIndex, _c1, 4);
i0.ɵɵcontentQuery(dirIndex, _c2, 4);
i0.ɵɵcontentQuery(dirIndex, _c3, 4);
i0.ɵɵcontentQuery(dirIndex, _c4, 4);
i0.ɵɵcontentQuery(dirIndex, _c5, 4);
i0.ɵɵcontentQuery(dirIndex, _c6, 4);
i0.ɵɵcontentQuery(dirIndex, PrimeTemplate, 4);
} if (rf & 2) {
let _t;
i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.footer = _t.first);
i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.headerTemplate = _t.first);
i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.footerTemplate = _t.first);
i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.rejectIconTemplate = _t.first);
i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.acceptIconTemplate = _t.first);
i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.messageTemplate = _t.first);
i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.iconTemplate = _t.first);
i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.headlessTemplate = _t.first);
i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.templates = _t);
} }, inputs: { header: "header", icon: "icon", message: "message", style: "style", styleClass: "styleClass", maskStyleClass: "maskStyleClass", acceptIcon: "acceptIcon", acceptLabel: "acceptLabel", closeAriaLabel: "closeAriaLabel", acceptAriaLabel: "acceptAriaLabel", acceptVisible: [2, "acceptVisible", "acceptVisible", booleanAttribute], rejectIcon: "rejectIcon", rejectLabel: "rejectLabel", rejectAriaLabel: "rejectAriaLabel", rejectVisible: [2, "rejectVisible", "rejectVisible", booleanAttribute], acceptButtonStyleClass: "acceptButtonStyleClass", rejectButtonStyleClass: "rejectButtonStyleClass", closeOnEscape: [2, "closeOnEscape", "closeOnEscape", booleanAttribute], dismissableMask: [2, "dismissableMask", "dismissableMask", booleanAttribute], blockScroll: [2, "blockScroll", "blockScroll", booleanAttribute], rtl: [2, "rtl", "rtl", booleanAttribute], closable: [2, "closable", "closable", booleanAttribute], appendTo: "appendTo", key: "key", autoZIndex: [2, "autoZIndex", "autoZIndex", booleanAttribute], baseZIndex: [2, "baseZIndex", "baseZIndex", numberAttribute], transitionOptions: "transitionOptions", focusTrap: [2, "focusTrap", "focusTrap", booleanAttribute], defaultFocus: "defaultFocus", breakpoints: "breakpoints", visible: "visible", position: "position" }, outputs: { onHide: "onHide" }, features: [i0.ɵɵProvidersFeature([ConfirmDialogStyle]), i0.ɵɵInputTransformsFeature, i0.ɵɵInheritDefinitionFeature], ngContentSelectors: _c8, decls: 6, vars: 12, consts: [["dialog", ""], ["footer", ""], ["headless", ""], ["content", ""], ["role", "alertdialog", 3, "visibleChange", "visible", "closable", "styleClass", "modal", "header", "closeOnEscape", "blockScroll", "appendTo", "position"], [4, "ngTemplateOutlet", "ngTemplateOutletContext"], [3, "ngClass"], [4, "ngTemplateOutlet"], [3, "ngClass", "class"], [3, "ngClass", "innerHTML"], [3, "ngClass", "class", 4, "ngIf"], [3, "label", "styleClass", "ariaLabel", "buttonProps", "onClick", 4, "ngIf"], [3, "onClick", "label", "styleClass", "ariaLabel", "buttonProps"], [3, "class"], [3, "class", 4, "ngIf"]], template: function ConfirmDialog_Template(rf, ctx) { if (rf & 1) {
const _r1 = i0.ɵɵgetCurrentView();
i0.ɵɵprojectionDef(_c7);
i0.ɵɵelementStart(0, "p-dialog", 4, 0);
i0.ɵɵtwoWayListener("visibleChange", function ConfirmDialog_Template_p_dialog_visibleChange_0_listener($event) { i0.ɵɵrestoreView(_r1); i0.ɵɵtwoWayBindingSet(ctx.visible, $event) || (ctx.visible = $event); return i0.ɵɵresetView($event); });
i0.ɵɵtemplate(2, ConfirmDialog_Conditional_2_Template, 2, 0)(3, ConfirmDialog_Conditional_3_Template, 3, 1)(4, ConfirmDialog_ng_template_4_Template, 2, 2, "ng-template", null, 1, i0.ɵɵtemplateRefExtractor);
i0.ɵɵelementEnd();
} if (rf & 2) {
i0.ɵɵstyleMap(ctx.style);
i0.ɵɵtwoWayProperty("visible", ctx.visible);
i0.ɵɵproperty("closable", ctx.option("closable"))("styleClass", ctx.containerClass)("modal", true)("header", ctx.option("header"))("closeOnEscape", ctx.option("closeOnEscape"))("blockScroll", ctx.option("blockScroll"))("appendTo", ctx.option("appendTo"))("position", ctx.position);
i0.ɵɵadvance(2);
i0.ɵɵconditional(ctx.headlessTemplate || ctx._headlessTemplate ? 2 : 3);
} }, dependencies: [CommonModule, i2.NgClass, i2.NgIf, i2.NgTemplateOutlet, Button, Dialog, SharedModule], encapsulation: 2, data: { animation: [trigger('animation', [transition('void => visible', [useAnimation(showAnimation)]), transition('visible => void', [useAnimation(hideAnimation)])])] }, changeDetection: 0 });
}
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ConfirmDialog, [{
type: Component,
args: [{
selector: 'p-confirmDialog, p-confirmdialog, p-confirm-dialog',
standalone: true,
imports: [CommonModule, Button, Dialog, SharedModule],
template: `
<p-dialog
#dialog
[(visible)]="visible"
role="alertdialog"
[closable]="option('closable')"
[styleClass]="containerClass"
[modal]="true"
[header]="option('header')"
[closeOnEscape]="option('closeOnEscape')"
[blockScroll]="option('blockScroll')"
[appendTo]="option('appendTo')"
[position]="position"
[style]="style"
>
@if (headlessTemplate || _headlessTemplate) {
<ng-template #headless>
<ng-container
*ngTemplateOutlet="
headlessTemplate || _headlessTemplate;
context: {
$implicit: confirmation,
onAccept: onAccept.bind(this),
onReject: onReject.bind(this)
}
"
></ng-container>
</ng-template>
} @else {
@if (headerTemplate || _headerTemplate) {
<div [ngClass]="cx('header')">
<ng-container *ngTemplateOutlet="headerTemplate || _headerTemplate"></ng-container>
</div>
}
<ng-template #content>
@if (iconTemplate || _iconTemplate) {
<ng-template *ngTemplateOutlet="iconTemplate || _iconTemplate"></ng-template>
} @else if (!iconTemplate && !_iconTemplate && !_messageTemplate && !messageTemplate) {
<i [ngClass]="cx('icon')" [class]="option('icon')" *ngIf="option('icon')"></i>
}
@if (messageTemplate || _messageTemplate) {
<ng-template *ngTemplateOutlet="messageTemplate || _messageTemplate; context: { $implicit: confirmation }"></ng-template>
} @else {
<span [ngClass]="cx('message')" [innerHTML]="option('message')"> </span>
}
</ng-template>
}
<ng-template #footer>
@if (footerTemplate || _footerTemplate) {
<ng-content select="p-footer"></ng-content>
<ng-container *ngTemplateOutlet="footerTemplate || _footerTemplate"></ng-container>
}
@if (!footerTemplate && !_footerTemplate) {
<p-button
*ngIf="option('rejectVisible')"
[label]="rejectButtonLabel"
(onClick)="onReject()"
[styleClass]="getButtonStyleClass('pcRejectButton', 'rejectButtonStyleClass')"
[ariaLabel]="option('rejectButtonProps', 'ariaLabel')"
[buttonProps]="getRejectButtonProps()"
>
@if (rejectIcon && !rejectIconTemplate && !_rejectIconTemplate) {
<i *ngIf="option('rejectIcon')" [class]="option('rejectIcon')"></i>
}
<ng-template *ngTemplateOutlet="rejectIconTemplate || _rejectIconTemplate"></ng-template>
</p-button>
<p-button
[label]="acceptButtonLabel"
(onClick)="onAccept()"
[styleClass]="getButtonStyleClass('pcAcceptButton', 'acceptButtonStyleClass')"
*ngIf="option('acceptVisible')"
[ariaLabel]="option('acceptButtonProps', 'ariaLabel')"
[buttonProps]="getAcceptButtonProps()"
>
@if (acceptIcon && !_acceptIconTemplate && !acceptIconTemplate) {
<i *ngIf="option('acceptIcon')" [class]="option('acceptIcon')"></i>
}
<ng-template *ngTemplateOutlet="acceptIconTemplate || _acceptIconTemplate"></ng-template>
</p-button>
}
</ng-template>
</p-dialog>
`,
animations: [trigger('animation', [transition('void => visible', [useAnimation(showAnimation)]), transition('visible => void', [useAnimation(hideAnimation)])])],
changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None,
providers: [ConfirmDialogStyle]
}]
}], () => [{ type: i1.ConfirmationService }, { type: i0.NgZone }], { header: [{
type: Input
}], icon: [{
type: Input
}], message: [{
type: Input
}], style: [{
type: Input
}], styleClass: [{
type: Input
}], maskStyleClass: [{
type: Input
}], acceptIcon: [{
type: Input
}], acceptLabel: [{
type: Input
}], closeAriaLabel: [{
type: Input
}], acceptAriaLabel: [{
type: Input
}], acceptVisible: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], rejectIcon: [{
type: Input
}], rejectLabel: [{
type: Input
}], rejectAriaLabel: [{
type: Input
}], rejectVisible: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], acceptButtonStyleClass: [{
type: Input
}], rejectButtonStyleClass: [{
type: Input
}], closeOnEscape: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], dismissableMask: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], blockScroll: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], rtl: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], closable: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], appendTo: [{
type: Input
}], key: [{
type: Input
}], autoZIndex: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], baseZIndex: [{
type: Input,
args: [{ transform: numberAttribute }]
}], transitionOptions: [{
type: Input
}], focusTrap: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], defaultFocus: [{
type: Input
}], breakpoints: [{
type: Input
}], visible: [{
type: Input
}], position: [{
type: Input
}], onHide: [{
type: Output
}], footer: [{
type: ContentChild,
args: [Footer]
}], headerTemplate: [{
type: ContentChild,
args: ['header', { descendants: false }]
}], footerTemplate: [{
type: ContentChild,
args: ['footer', { descendants: false }]
}], rejectIconTemplate: [{
type: ContentChild,
args: ['rejecticon', { descendants: false }]
}], acceptIconTemplate: [{
type: ContentChild,
args: ['accepticon', { descendants: false }]
}], messageTemplate: [{
type: ContentChild,
args: ['message', { descendants: false }]
}], iconTemplate: [{
type: ContentChild,
args: ['icon', { descendants: false }]
}], headlessTemplate: [{
type: ContentChild,
args: ['headless', { descendants: false }]
}], templates: [{
type: ContentChildren,
args: [PrimeTemplate]
}] }); })();
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ConfirmDialog, { className: "ConfirmDialog", filePath: "confirmdialog.ts", lineNumber: 132 }); })();
class ConfirmDialogModule {
static ɵfac = function ConfirmDialogModule_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || ConfirmDialogModule)(); };
static ɵmod = /*@__PURE__*/ i0.ɵɵdefineNgModule({ type: ConfirmDialogModule });
static ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ imports: [ConfirmDialog, SharedModule, SharedModule] });
}
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ConfirmDialogModule, [{
type: NgModule,
args: [{
imports: [ConfirmDialog, SharedModule],
exports: [ConfirmDialog, SharedModule]
}]
}], null, null); })();
(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(ConfirmDialogModule, { imports: [ConfirmDialog, SharedModule], exports: [ConfirmDialog, SharedModule] }); })();
/**
* Generated bundle index. Do not edit.
*/
export { ConfirmDialog, ConfirmDialogClasses, ConfirmDialogModule, ConfirmDialogStyle };
//# sourceMappingURL=primeng-confirmdialog.mjs.map