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
631 lines (626 loc) • 28.1 kB
JavaScript
import { trigger, state, transition, style as style$1, animate } from '@angular/animations';
import * as i2 from '@angular/common';
import { DOCUMENT, CommonModule } from '@angular/common';
import * as i0 from '@angular/core';
import { Injectable, inject, EventEmitter, numberAttribute, booleanAttribute, HostListener, ContentChildren, ContentChild, Input, Inject, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
import { absolutePosition, getOffset, addClass, focus, isIOS, isTouchDevice } from '@primeuix/utils';
import * as i1 from 'primeng/api';
import { TranslationKeys, SharedModule, PrimeTemplate } from 'primeng/api';
import { BaseComponent } from 'primeng/basecomponent';
import * as i3 from 'primeng/button';
import { ButtonModule } from 'primeng/button';
import { ConnectedOverlayScrollHandler } from 'primeng/dom';
import { FocusTrap } from 'primeng/focustrap';
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';
theme = style;
classes = classes;
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: ConfirmPopupStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: ConfirmPopupStyle });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", 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 = {}));
/**
* ConfirmPopup displays a confirmation overlay displayed relatively to its target.
* @group Components
*/
class ConfirmPopup extends BaseComponent {
el;
confirmationService;
renderer;
cd;
overlayService;
document;
/**
* Optional key to match the key of confirm object, necessary to use when component tree has multiple confirm dialogs.
* @group Props
*/
key;
/**
* Element to receive the focus when the popup gets visible, valid values are "accept", "reject", and "none".
* @group Props
*/
defaultFocus = 'accept';
/**
* Transition options of the show animation.
* @group Props
*/
showTransitionOptions = '.12s cubic-bezier(0, 0, 0.2, 1)';
/**
* Transition options of the hide animation.
* @group Props
*/
hideTransitionOptions = '.1s linear';
/**
* Whether to automatically manage layering.
* @group Props
*/
autoZIndex = true;
/**
* Base zIndex value to use in layering.
* @group Props
*/
baseZIndex = 0;
/**
* Inline style of the component.
* @group Props
*/
style;
/**
* Style class of the component.
* @group Props
*/
styleClass;
/**
* Defines if the component is visible.
* @group Props
*/
get visible() {
return this._visible;
}
set visible(value) {
this._visible = value;
this.cd.markForCheck();
}
container;
subscription;
confirmation;
autoFocusAccept = false;
autoFocusReject = false;
contentTemplate;
acceptIconTemplate;
rejectIconTemplate;
headlessTemplate;
_contentTemplate;
_acceptIconTemplate;
_rejectIconTemplate;
_headlessTemplate;
_visible;
documentClickListener;
documentResizeListener;
scrollHandler;
window;
_componentStyle = inject(ConfirmPopupStyle);
constructor(el, confirmationService, renderer, cd, overlayService, document) {
super();
this.el = el;
this.confirmationService = confirmationService;
this.renderer = renderer;
this.cd = cd;
this.overlayService = overlayService;
this.document = document;
this.window = this.document.defaultView;
this.subscription = this.confirmationService.requireConfirmation$.subscribe((confirmation) => {
if (!confirmation) {
this.hide();
return;
}
if (confirmation.key === this.key) {
this.confirmation = confirmation;
const keys = Object.keys(confirmation);
keys.forEach((key) => {
this[key] = confirmation[key];
});
if (this.confirmation.accept) {
this.confirmation.acceptEvent = new EventEmitter();
this.confirmation.acceptEvent.subscribe(this.confirmation.accept);
}
if (this.confirmation.reject) {
this.confirmation.rejectEvent = new EventEmitter();
this.confirmation.rejectEvent.subscribe(this.confirmation.reject);
}
this.visible = true;
}
});
}
templates;
ngAfterContentInit() {
this.templates?.forEach((item) => {
switch (item.getType()) {
case 'content':
this._contentTemplate = item.template;
break;
case 'rejecticon':
this._rejectIconTemplate = item.template;
break;
case 'accepticon':
this._acceptIconTemplate = item.template;
break;
case 'headless':
this._headlessTemplate = item.template;
break;
}
});
}
option(name, k) {
const source = this;
if (source.hasOwnProperty(name)) {
if (k) {
return source[k];
}
return source[name];
}
return undefined;
}
onEscapeKeydown(event) {
if (this.confirmation && this.confirmation.closeOnEscape) {
this.onReject();
}
}
onAnimationStart(event) {
if (event.toState === 'open') {
this.container = event.element;
this.renderer.appendChild(this.document.body, this.container);
this.align();
this.bindListeners();
this.autoFocusAccept = this.defaultFocus === undefined || this.defaultFocus === 'accept' ? true : false;
this.autoFocusReject = this.defaultFocus === 'reject' ? true : false;
}
}
onAnimationEnd(event) {
switch (event.toState) {
case 'void':
this.onContainerDestroy();
break;
}
}
getAcceptButtonProps() {
return this.option('acceptButtonProps');
}
getRejectButtonProps() {
return this.option('rejectButtonProps');
}
align() {
if (this.autoZIndex) {
ZIndexUtils.set('overlay', this.container, this.config.zIndex.overlay);
}
if (!this.confirmation) {
return;
}
absolutePosition(this.container, this.confirmation?.target, false);
const containerOffset = getOffset(this.container);
const targetOffset = getOffset(this.confirmation?.target);
let arrowLeft = 0;
if (containerOffset.left < targetOffset.left) {
arrowLeft = targetOffset.left - containerOffset.left;
}
this.container.style.setProperty('--p-confirmpopup-arrow-left', `${arrowLeft}px`);
if (containerOffset.top < targetOffset.top) {
addClass(this.container, 'p-confirm-popup-flipped');
}
}
hide() {
this.visible = false;
}
onAccept() {
if (this.confirmation?.acceptEvent) {
this.confirmation.acceptEvent.emit();
}
this.hide();
focus(this.confirmation?.target);
}
onReject() {
if (this.confirmation?.rejectEvent) {
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) => {
if (this.confirmation && this.confirmation.dismissableMask !== false) {
let targetElement = this.confirmation.target;
if (this.container !== event.target && !this.container?.contains(event.target) && targetElement !== event.target && !targetElement.contains(event.target)) {
this.hide();
}
}
});
}
}
unbindDocumentClickListener() {
if (this.documentClickListener) {
this.documentClickListener();
this.documentClickListener = null;
}
}
onWindowResize() {
if (this.visible && !isTouchDevice()) {
this.hide();
}
}
bindDocumentResizeListener() {
if (!this.documentResizeListener) {
this.documentResizeListener = this.renderer.listen(this.window, 'resize', this.onWindowResize.bind(this));
}
}
unbindDocumentResizeListener() {
if (this.documentResizeListener) {
this.documentResizeListener();
this.documentResizeListener = null;
}
}
bindScrollListener() {
if (!this.scrollHandler) {
this.scrollHandler = new ConnectedOverlayScrollHandler(this.confirmation?.target, () => {
if (this.visible) {
this.hide();
}
});
}
this.scrollHandler.bindScrollListener();
}
unbindScrollListener() {
if (this.scrollHandler) {
this.scrollHandler.unbindScrollListener();
}
}
unsubscribeConfirmationSubscriptions() {
if (this.confirmation) {
if (this.confirmation.acceptEvent) {
this.confirmation.acceptEvent.unsubscribe();
}
if (this.confirmation.rejectEvent) {
this.confirmation.rejectEvent.unsubscribe();
}
}
}
onContainerDestroy() {
this.unbindListeners();
this.unsubscribeConfirmationSubscriptions();
if (this.autoZIndex) {
ZIndexUtils.clear(this.container);
}
this.confirmation = null;
this.container = null;
}
restoreAppend() {
if (this.container) {
this.renderer.removeChild(this.document.body, this.container);
}
this.onContainerDestroy();
}
get acceptButtonLabel() {
return this.confirmation?.acceptLabel || this.config.getTranslation(TranslationKeys.ACCEPT);
}
get rejectButtonLabel() {
return this.confirmation?.rejectLabel || this.config.getTranslation(TranslationKeys.REJECT);
}
ngOnDestroy() {
this.restoreAppend();
if (this.subscription) {
this.subscription.unsubscribe();
}
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", 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: "16.1.0", version: "20.1.3", type: ConfirmPopup, isStandalone: true, selector: "p-confirmpopup", inputs: { key: "key", defaultFocus: "defaultFocus", showTransitionOptions: "showTransitionOptions", hideTransitionOptions: "hideTransitionOptions", autoZIndex: ["autoZIndex", "autoZIndex", booleanAttribute], baseZIndex: ["baseZIndex", "baseZIndex", numberAttribute], style: "style", styleClass: "styleClass", visible: "visible" }, host: { listeners: { "document:keydown.escape": "onEscapeKeydown($event)" } }, providers: [ConfirmPopupStyle], queries: [{ propertyName: "contentTemplate", first: true, predicate: ["content"] }, { propertyName: "acceptIconTemplate", first: true, predicate: ["accepticon"] }, { propertyName: "rejectIconTemplate", first: true, predicate: ["rejecticon"] }, { propertyName: "headlessTemplate", first: true, predicate: ["headless"] }, { propertyName: "templates", predicate: PrimeTemplate }], usesInheritance: true, ngImport: i0, template: `
<div
*ngIf="visible"
pFocusTrap
[class]="cn(cx('root'), styleClass)"
[ngStyle]="style"
role="alertdialog"
(click)="onOverlayClick($event)"
[@animation]="{
value: 'open',
params: { showTransitionParams: showTransitionOptions, hideTransitionParams: hideTransitionOptions }
}"
(@animation.start)="onAnimationStart($event)"
(@animation.done)="onAnimationEnd($event)"
>
<ng-container *ngIf="headlessTemplate || _headlessTemplate; else notHeadless">
<ng-container *ngTemplateOutlet="headlessTemplate || _headlessTemplate; context: { $implicit: confirmation }"></ng-container>
</ng-container>
<ng-template #notHeadless>
<div #content [class]="cx('content')">
<ng-container *ngIf="contentTemplate || _contentTemplate; else withoutContentTemplate">
<ng-container *ngTemplateOutlet="contentTemplate || _contentTemplate; context: { $implicit: confirmation }"></ng-container>
</ng-container>
<ng-template #withoutContentTemplate>
<i [class]="cx('icon')" *ngIf="confirmation?.icon"></i>
<span [class]="cx('message')">{{ confirmation?.message }}</span>
</ng-template>
</div>
<div [class]="cx('footer')">
<p-button
type="button"
[label]="rejectButtonLabel"
(onClick)="onReject()"
[class]="cx('pcRejectButton')"
[styleClass]="confirmation?.rejectButtonStyleClass"
[size]="confirmation.rejectButtonProps?.size || 'small'"
[text]="confirmation.rejectButtonProps?.text || false"
*ngIf="confirmation?.rejectVisible !== false"
[attr.aria-label]="rejectButtonLabel"
[buttonProps]="getRejectButtonProps()"
[autofocus]="autoFocusReject"
>
<ng-template #icon>
<i [class]="confirmation?.rejectIcon" *ngIf="confirmation?.rejectIcon; else rejecticon"></i>
<ng-template #rejecticon *ngTemplateOutlet="rejectIconTemplate || _rejectIconTemplate"></ng-template>
</ng-template>
</p-button>
<p-button
type="button"
[label]="acceptButtonLabel"
(onClick)="onAccept()"
[class]="cx('pcAcceptButton')"
[styleClass]="confirmation?.acceptButtonStyleClass"
[size]="confirmation.acceptButtonProps?.size || 'small'"
*ngIf="confirmation?.acceptVisible !== false"
[attr.aria-label]="acceptButtonLabel"
[buttonProps]="getAcceptButtonProps()"
[autofocus]="autoFocusAccept"
>
<ng-template #icon>
<i [class]="confirmation?.acceptIcon" *ngIf="confirmation?.acceptIcon; else accepticontemplate"></i>
<ng-template #accepticontemplate *ngTemplateOutlet="acceptIconTemplate || _acceptIconTemplate"></ng-template>
</ng-template>
</p-button>
</div>
</ng-template>
</div>
`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: SharedModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i3.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "directive", type: FocusTrap, selector: "[pFocusTrap]", inputs: ["pFocusTrapDisabled"] }], animations: [
trigger('animation', [
state('void', style$1({
transform: 'scaleY(0.8)',
opacity: 0
})),
state('open', style$1({
transform: 'translateY(0)',
opacity: 1
})),
transition('void => open', animate('{{showTransitionParams}}')),
transition('open => void', animate('{{hideTransitionParams}}'))
])
], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: ConfirmPopup, decorators: [{
type: Component,
args: [{
selector: 'p-confirmpopup',
standalone: true,
imports: [CommonModule, SharedModule, ButtonModule, FocusTrap],
template: `
<div
*ngIf="visible"
pFocusTrap
[class]="cn(cx('root'), styleClass)"
[ngStyle]="style"
role="alertdialog"
(click)="onOverlayClick($event)"
[@animation]="{
value: 'open',
params: { showTransitionParams: showTransitionOptions, hideTransitionParams: hideTransitionOptions }
}"
(@animation.start)="onAnimationStart($event)"
(@animation.done)="onAnimationEnd($event)"
>
<ng-container *ngIf="headlessTemplate || _headlessTemplate; else notHeadless">
<ng-container *ngTemplateOutlet="headlessTemplate || _headlessTemplate; context: { $implicit: confirmation }"></ng-container>
</ng-container>
<ng-template #notHeadless>
<div #content [class]="cx('content')">
<ng-container *ngIf="contentTemplate || _contentTemplate; else withoutContentTemplate">
<ng-container *ngTemplateOutlet="contentTemplate || _contentTemplate; context: { $implicit: confirmation }"></ng-container>
</ng-container>
<ng-template #withoutContentTemplate>
<i [class]="cx('icon')" *ngIf="confirmation?.icon"></i>
<span [class]="cx('message')">{{ confirmation?.message }}</span>
</ng-template>
</div>
<div [class]="cx('footer')">
<p-button
type="button"
[label]="rejectButtonLabel"
(onClick)="onReject()"
[class]="cx('pcRejectButton')"
[styleClass]="confirmation?.rejectButtonStyleClass"
[size]="confirmation.rejectButtonProps?.size || 'small'"
[text]="confirmation.rejectButtonProps?.text || false"
*ngIf="confirmation?.rejectVisible !== false"
[attr.aria-label]="rejectButtonLabel"
[buttonProps]="getRejectButtonProps()"
[autofocus]="autoFocusReject"
>
<ng-template #icon>
<i [class]="confirmation?.rejectIcon" *ngIf="confirmation?.rejectIcon; else rejecticon"></i>
<ng-template #rejecticon *ngTemplateOutlet="rejectIconTemplate || _rejectIconTemplate"></ng-template>
</ng-template>
</p-button>
<p-button
type="button"
[label]="acceptButtonLabel"
(onClick)="onAccept()"
[class]="cx('pcAcceptButton')"
[styleClass]="confirmation?.acceptButtonStyleClass"
[size]="confirmation.acceptButtonProps?.size || 'small'"
*ngIf="confirmation?.acceptVisible !== false"
[attr.aria-label]="acceptButtonLabel"
[buttonProps]="getAcceptButtonProps()"
[autofocus]="autoFocusAccept"
>
<ng-template #icon>
<i [class]="confirmation?.acceptIcon" *ngIf="confirmation?.acceptIcon; else accepticontemplate"></i>
<ng-template #accepticontemplate *ngTemplateOutlet="acceptIconTemplate || _acceptIconTemplate"></ng-template>
</ng-template>
</p-button>
</div>
</ng-template>
</div>
`,
animations: [
trigger('animation', [
state('void', style$1({
transform: 'scaleY(0.8)',
opacity: 0
})),
state('open', style$1({
transform: 'translateY(0)',
opacity: 1
})),
transition('void => open', animate('{{showTransitionParams}}')),
transition('open => void', animate('{{hideTransitionParams}}'))
])
],
changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None,
providers: [ConfirmPopupStyle]
}]
}], 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: Input
}], defaultFocus: [{
type: Input
}], showTransitionOptions: [{
type: Input
}], hideTransitionOptions: [{
type: Input
}], autoZIndex: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], baseZIndex: [{
type: Input,
args: [{ transform: numberAttribute }]
}], style: [{
type: Input
}], styleClass: [{
type: Input
}], visible: [{
type: Input
}], contentTemplate: [{
type: ContentChild,
args: ['content', { descendants: false }]
}], acceptIconTemplate: [{
type: ContentChild,
args: ['accepticon', { descendants: false }]
}], rejectIconTemplate: [{
type: ContentChild,
args: ['rejecticon', { descendants: false }]
}], headlessTemplate: [{
type: ContentChild,
args: ['headless', { descendants: false }]
}], templates: [{
type: ContentChildren,
args: [PrimeTemplate]
}], onEscapeKeydown: [{
type: HostListener,
args: ['document:keydown.escape', ['$event']]
}] } });
class ConfirmPopupModule {
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: ConfirmPopupModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.1.3", ngImport: i0, type: ConfirmPopupModule, imports: [ConfirmPopup, SharedModule], exports: [ConfirmPopup, SharedModule] });
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: ConfirmPopupModule, imports: [ConfirmPopup, SharedModule, SharedModule] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", 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