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
528 lines (523 loc) • 23.5 kB
JavaScript
export * from 'primeng/types/popover';
import * as i2 from '@angular/common';
import { isPlatformBrowser, CommonModule } from '@angular/common';
import * as i0 from '@angular/core';
import { Injectable, InjectionToken, inject, input, computed, EventEmitter, NgZone, booleanAttribute, numberAttribute, HostListener, ContentChildren, ContentChild, Output, Input, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
import { $dt } from '@primeuix/styled';
import { isIOS, appendChild, absolutePosition, getOffset, addClass, findSingle, isTouchDevice } from '@primeuix/utils';
import { OverlayService, SharedModule, PrimeTemplate } from 'primeng/api';
import { BaseComponent, PARENT_INSTANCE } from 'primeng/basecomponent';
import * as i1 from 'primeng/bind';
import { Bind } from 'primeng/bind';
import { ConnectedOverlayScrollHandler } from 'primeng/dom';
import * as i3 from 'primeng/motion';
import { MotionModule } from 'primeng/motion';
import { ZIndexUtils } from 'primeng/utils';
import { style } from '@primeuix/styles/popover';
import { BaseStyle } from 'primeng/base';
const inlineStyles = {
root: () => ({ position: 'absolute' })
};
const classes = {
root: 'p-popover p-component',
content: 'p-popover-content'
};
class PopoverStyle extends BaseStyle {
name = 'popover';
style = style;
classes = classes;
inlineStyles = inlineStyles;
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: PopoverStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: PopoverStyle });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: PopoverStyle, decorators: [{
type: Injectable
}] });
const POPOVER_INSTANCE = new InjectionToken('POPOVER_INSTANCE');
/**
* Popover is a container component that can overlay other components on page.
* @group Components
*/
class Popover extends BaseComponent {
$pcPopover = inject(POPOVER_INSTANCE, { optional: true, skipSelf: true }) ?? undefined;
bindDirectiveInstance = inject(Bind, { self: true });
onAfterViewChecked() {
this.bindDirectiveInstance.setAttrs(this.ptm('host'));
}
/**
* Defines a string that labels the input for accessibility.
* @group Props
*/
ariaLabel;
/**
* Establishes relationships between the component and label(s) where its value should be one or more element IDs.
* @group Props
*/
ariaLabelledBy;
/**
* Enables to hide the overlay when outside is clicked.
* @group Props
*/
dismissable = true;
/**
* Inline style of the component.
* @group Props
*/
style;
/**
* Style class of the component.
* @group Props
*/
styleClass;
/**
* 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 'self'
* @group Props
*/
appendTo = input('body', ...(ngDevMode ? [{ debugName: "appendTo" }] : []));
/**
* Whether to automatically manage layering.
* @group Props
*/
autoZIndex = true;
/**
* Aria label of the close icon.
* @group Props
*/
ariaCloseLabel;
/**
* Base zIndex value to use in layering.
* @group Props
*/
baseZIndex = 0;
/**
* When enabled, first button receives focus on show.
* @group Props
*/
focusOnShow = true;
/**
* Transition options of the show animation.
* @group Props
* @deprecated since v21.0.0. Use `motionOptions` instead.
*/
showTransitionOptions = '.12s cubic-bezier(0, 0, 0.2, 1)';
/**
* Transition options of the hide animation.
* @group Props
* @deprecated since v21.0.0. Use `motionOptions` instead.
*/
hideTransitionOptions = '.1s linear';
/**
* The motion options.
* @group Props
*/
motionOptions = input(undefined, ...(ngDevMode ? [{ debugName: "motionOptions" }] : []));
computedMotionOptions = computed(() => {
return {
...this.ptm('motion'),
...this.motionOptions()
};
}, ...(ngDevMode ? [{ debugName: "computedMotionOptions" }] : []));
/**
* Callback to invoke when an overlay becomes visible.
* @group Emits
*/
onShow = new EventEmitter();
/**
* Callback to invoke when an overlay gets hidden.
* @group Emits
*/
onHide = new EventEmitter();
$appendTo = computed(() => this.appendTo() || this.config.overlayAppendTo(), ...(ngDevMode ? [{ debugName: "$appendTo" }] : []));
container;
overlayVisible = false;
render = false;
selfClick = false;
documentClickListener;
target;
willHide;
scrollHandler;
documentResizeListener;
/**
* Custom content template.
* @param {PopoverContentTemplateContext} context - content context.
* @see {@link PopoverContentTemplateContext}
* @group Templates
*/
contentTemplate;
templates;
_contentTemplate;
destroyCallback;
overlayEventListener;
overlaySubscription;
_componentStyle = inject(PopoverStyle);
zone = inject(NgZone);
overlayService = inject(OverlayService);
onAfterContentInit() {
this.templates.forEach((item) => {
switch (item.getType()) {
case 'content':
this._contentTemplate = item.template;
break;
}
});
}
bindDocumentClickListener() {
if (isPlatformBrowser(this.platformId)) {
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.dismissable) {
return;
}
if (!this.container?.contains(event.target) && this.target !== event.target && !this.target.contains(event.target) && !this.selfClick) {
this.hide();
}
this.selfClick = false;
this.cd.markForCheck();
});
}
}
}
unbindDocumentClickListener() {
if (this.documentClickListener) {
this.documentClickListener();
this.documentClickListener = null;
this.selfClick = false;
}
}
/**
* Toggles the visibility of the panel.
* @param {Event} event - Browser event
* @param {Target} target - Target element.
* @group Method
*/
toggle(event, target) {
if (this.overlayVisible) {
if (this.hasTargetChanged(event, target)) {
this.destroyCallback = () => {
this.show(null, target || event.currentTarget || event.target);
};
}
this.hide();
}
else {
this.show(event, target);
}
}
/**
* Displays the panel.
* @param {Event} event - Browser event
* @param {Target} target - Target element.
* @group Method
*/
show(event, target) {
target && event && event.stopPropagation();
// Clear container if it exists from previous show
if (this.container && !this.overlayVisible) {
this.container = null;
}
this.target = target || event.currentTarget || event.target;
this.overlayVisible = true;
this.render = true;
this.cd.markForCheck();
}
onOverlayClick(event) {
this.overlayService.add({
originalEvent: event,
target: this.el.nativeElement
});
this.selfClick = true;
}
onContentClick(event) {
const targetElement = event.target;
this.selfClick = event.offsetX < targetElement.clientWidth && event.offsetY < targetElement.clientHeight;
}
hasTargetChanged(event, target) {
return this.target != null && this.target !== (target || event.currentTarget || event.target);
}
appendOverlay() {
if (this.$appendTo() && this.$appendTo() !== 'self') {
if (this.$appendTo() === 'body') {
appendChild(this.document.body, this.container);
}
else {
appendChild(this.$appendTo(), this.container);
}
}
}
restoreAppend() {
if (this.container && this.$appendTo() && this.$appendTo() !== 'self') {
appendChild(this.el.nativeElement, this.container);
}
}
setZIndex() {
if (this.autoZIndex) {
ZIndexUtils.set('overlay', this.container, this.baseZIndex + this.config.zIndex.overlay);
}
}
align() {
if (this.target && this.container) {
absolutePosition(this.container, this.target, false);
const containerOffset = getOffset(this.container);
const targetOffset = getOffset(this.target);
const borderRadius = this.document.defaultView?.getComputedStyle(this.container).getPropertyValue('border-radius');
let arrowLeft = 0;
if (containerOffset.left < targetOffset.left) {
arrowLeft = targetOffset.left - containerOffset.left - parseFloat(borderRadius) * 2;
}
this.container.style.setProperty($dt('popover.arrow.left').name, `${arrowLeft}px`);
if (containerOffset.top < targetOffset.top) {
this.container.setAttribute('data-p-popover-flipped', 'true');
!this.$unstyled() && addClass(this.container, 'p-popover-flipped');
}
}
}
onAnimationStart(event) {
this.container = event.element;
this.container?.setAttribute(this.$attrSelector, '');
this.appendOverlay();
this.align();
this.setZIndex();
this.bindDocumentClickListener();
this.bindDocumentResizeListener();
this.bindScrollListener();
if (this.focusOnShow) {
this.focus();
}
this.overlayEventListener = (e) => {
if (this.container && this.container.contains(e.target)) {
this.selfClick = true;
}
};
this.overlaySubscription = this.overlayService.clickObservable.subscribe(this.overlayEventListener);
this.onShow.emit(null);
}
onAnimationEnd() {
if (!this.overlayVisible) {
if (this.destroyCallback) {
this.destroyCallback();
this.destroyCallback = null;
}
if (this.overlaySubscription) {
this.overlaySubscription.unsubscribe();
}
if (this.autoZIndex) {
ZIndexUtils.clear(this.container);
}
this.onContainerDestroy();
this.onHide.emit({});
this.render = false;
this.container = null;
}
}
focus() {
let focusable = findSingle(this.container, '[autofocus]');
if (focusable) {
this.zone.runOutsideAngular(() => {
setTimeout(() => focusable.focus(), 5);
});
}
}
/**
* Hides the panel.
* @group Method
*/
hide() {
this.overlayVisible = false;
this.cd.markForCheck();
}
onCloseClick(event) {
this.hide();
event.preventDefault();
}
onEscapeKeydown(_event) {
this.hide();
}
onWindowResize() {
if (this.overlayVisible && !isTouchDevice()) {
this.hide();
}
}
bindDocumentResizeListener() {
if (isPlatformBrowser(this.platformId)) {
if (!this.documentResizeListener) {
const window = this.document.defaultView;
this.documentResizeListener = this.renderer.listen(window, 'resize', this.onWindowResize.bind(this));
}
}
}
unbindDocumentResizeListener() {
if (this.documentResizeListener) {
this.documentResizeListener();
this.documentResizeListener = null;
}
}
bindScrollListener() {
if (isPlatformBrowser(this.platformId)) {
if (!this.scrollHandler) {
this.scrollHandler = new ConnectedOverlayScrollHandler(this.target, () => {
if (this.overlayVisible) {
this.hide();
}
});
}
this.scrollHandler.bindScrollListener();
}
}
unbindScrollListener() {
if (this.scrollHandler) {
this.scrollHandler.unbindScrollListener();
}
}
onContainerDestroy() {
if (!this.cd.destroyed) {
this.target = null;
}
this.unbindDocumentClickListener();
this.unbindDocumentResizeListener();
this.unbindScrollListener();
}
onDestroy() {
if (this.scrollHandler) {
this.scrollHandler.destroy();
this.scrollHandler = null;
}
if (this.container && this.autoZIndex) {
ZIndexUtils.clear(this.container);
}
if (!this.cd.destroyed) {
this.target = null;
}
this.destroyCallback = null;
if (this.container) {
this.restoreAppend();
this.onContainerDestroy();
}
if (this.overlaySubscription) {
this.overlaySubscription.unsubscribe();
}
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: Popover, deps: null, target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.5", type: Popover, isStandalone: true, selector: "p-popover", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: false, isRequired: false, transformFunction: null }, ariaLabelledBy: { classPropertyName: "ariaLabelledBy", publicName: "ariaLabelledBy", isSignal: false, isRequired: false, transformFunction: null }, dismissable: { classPropertyName: "dismissable", publicName: "dismissable", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, style: { classPropertyName: "style", publicName: "style", isSignal: false, isRequired: false, transformFunction: null }, styleClass: { classPropertyName: "styleClass", publicName: "styleClass", isSignal: false, isRequired: false, transformFunction: null }, appendTo: { classPropertyName: "appendTo", publicName: "appendTo", isSignal: true, isRequired: false, transformFunction: null }, autoZIndex: { classPropertyName: "autoZIndex", publicName: "autoZIndex", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, ariaCloseLabel: { classPropertyName: "ariaCloseLabel", publicName: "ariaCloseLabel", isSignal: false, isRequired: false, transformFunction: null }, baseZIndex: { classPropertyName: "baseZIndex", publicName: "baseZIndex", isSignal: false, isRequired: false, transformFunction: numberAttribute }, focusOnShow: { classPropertyName: "focusOnShow", publicName: "focusOnShow", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, showTransitionOptions: { classPropertyName: "showTransitionOptions", publicName: "showTransitionOptions", isSignal: false, isRequired: false, transformFunction: null }, hideTransitionOptions: { classPropertyName: "hideTransitionOptions", publicName: "hideTransitionOptions", isSignal: false, isRequired: false, transformFunction: null }, motionOptions: { classPropertyName: "motionOptions", publicName: "motionOptions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onShow: "onShow", onHide: "onHide" }, host: { listeners: { "document:keydown.escape": "onEscapeKeydown($event)" } }, providers: [PopoverStyle, { provide: POPOVER_INSTANCE, useExisting: Popover }, { provide: PARENT_INSTANCE, useExisting: Popover }], queries: [{ propertyName: "contentTemplate", first: true, predicate: ["content"] }, { propertyName: "templates", predicate: PrimeTemplate }], usesInheritance: true, hostDirectives: [{ directive: i1.Bind }], ngImport: i0, template: `
(render) {
<div
[pBind]="ptm('root')"
[class]="cn(cx('root'), styleClass)"
[style]="sx('root')"
[ngStyle]="style"
(click)="onOverlayClick($event)"
role="dialog"
[attr.aria-modal]="overlayVisible"
[attr.aria-label]="ariaLabel"
[attr.aria-labelledBy]="ariaLabelledBy"
[pMotion]="overlayVisible"
pMotionName="p-anchored-overlay"
[pMotionAppear]="true"
(pMotionOnEnter)="onAnimationStart($event)"
(pMotionOnAfterLeave)="onAnimationEnd()"
[pMotionOptions]="computedMotionOptions()"
>
<div [pBind]="ptm('content')" [class]="cx('content')" (click)="onContentClick($event)" (mousedown)="onContentClick($event)">
<ng-content></ng-content>
<ng-template *ngTemplateOutlet="contentTemplate || _contentTemplate; context: { closeCallback: onCloseClick.bind(this) }"></ng-template>
</div>
</div>
}
`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: "directive", type: Bind, selector: "[pBind]", inputs: ["pBind"] }, { kind: "ngmodule", type: MotionModule }, { kind: "directive", type: i3.MotionDirective, selector: "[pMotion]", inputs: ["pMotion", "pMotionName", "pMotionType", "pMotionSafe", "pMotionDisabled", "pMotionAppear", "pMotionEnter", "pMotionLeave", "pMotionDuration", "pMotionHideStrategy", "pMotionEnterFromClass", "pMotionEnterToClass", "pMotionEnterActiveClass", "pMotionLeaveFromClass", "pMotionLeaveToClass", "pMotionLeaveActiveClass", "pMotionOptions"], outputs: ["pMotionOnBeforeEnter", "pMotionOnEnter", "pMotionOnAfterEnter", "pMotionOnEnterCancelled", "pMotionOnBeforeLeave", "pMotionOnLeave", "pMotionOnAfterLeave", "pMotionOnLeaveCancelled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: Popover, decorators: [{
type: Component,
args: [{
selector: 'p-popover',
standalone: true,
imports: [CommonModule, SharedModule, Bind, MotionModule],
providers: [PopoverStyle, { provide: POPOVER_INSTANCE, useExisting: Popover }, { provide: PARENT_INSTANCE, useExisting: Popover }],
hostDirectives: [Bind],
template: `
(render) {
<div
[pBind]="ptm('root')"
[class]="cn(cx('root'), styleClass)"
[style]="sx('root')"
[ngStyle]="style"
(click)="onOverlayClick($event)"
role="dialog"
[attr.aria-modal]="overlayVisible"
[attr.aria-label]="ariaLabel"
[attr.aria-labelledBy]="ariaLabelledBy"
[pMotion]="overlayVisible"
pMotionName="p-anchored-overlay"
[pMotionAppear]="true"
(pMotionOnEnter)="onAnimationStart($event)"
(pMotionOnAfterLeave)="onAnimationEnd()"
[pMotionOptions]="computedMotionOptions()"
>
<div [pBind]="ptm('content')" [class]="cx('content')" (click)="onContentClick($event)" (mousedown)="onContentClick($event)">
<ng-content></ng-content>
<ng-template *ngTemplateOutlet="contentTemplate || _contentTemplate; context: { closeCallback: onCloseClick.bind(this) }"></ng-template>
</div>
</div>
}
`,
changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None
}]
}], propDecorators: { ariaLabel: [{
type: Input
}], ariaLabelledBy: [{
type: Input
}], dismissable: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], style: [{
type: Input
}], styleClass: [{
type: Input
}], appendTo: [{ type: i0.Input, args: [{ isSignal: true, alias: "appendTo", required: false }] }], autoZIndex: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], ariaCloseLabel: [{
type: Input
}], baseZIndex: [{
type: Input,
args: [{ transform: numberAttribute }]
}], focusOnShow: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], showTransitionOptions: [{
type: Input
}], hideTransitionOptions: [{
type: Input
}], motionOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "motionOptions", required: false }] }], onShow: [{
type: Output
}], onHide: [{
type: Output
}], contentTemplate: [{
type: ContentChild,
args: ['content', { descendants: false }]
}], templates: [{
type: ContentChildren,
args: [PrimeTemplate]
}], onEscapeKeydown: [{
type: HostListener,
args: ['document:keydown.escape', ['$event']]
}] } });
class PopoverModule {
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: PopoverModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.5", ngImport: i0, type: PopoverModule, imports: [Popover, SharedModule], exports: [Popover, SharedModule] });
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: PopoverModule, imports: [Popover, SharedModule, SharedModule] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: PopoverModule, decorators: [{
type: NgModule,
args: [{
imports: [Popover, SharedModule],
exports: [Popover, SharedModule]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { Popover, PopoverModule, PopoverStyle };
//# sourceMappingURL=primeng-popover.mjs.map