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,
489 lines (484 loc) • 24.1 kB
JavaScript
export * from 'primeng/types/popover';
import { isPlatformBrowser, NgTemplateOutlet } from '@angular/common';
import * as i0 from '@angular/core';
import { Injectable, InjectionToken, inject, input, booleanAttribute, numberAttribute, computed, output, signal, contentChild, HostListener, 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 } 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 i2 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: ({ instance }) => {
const style = instance.style();
return {
position: 'absolute',
...style
};
}
};
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: "22.0.6", ngImport: i0, type: PopoverStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: PopoverStyle });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", 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 {
componentName = 'Popover';
$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 = input(/* @ts-ignore */
...(ngDevMode ? [undefined, { debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
/**
* Establishes relationships between the component and label(s) where its value should be one or more element IDs.
* @group Props
*/
ariaLabelledBy = input(/* @ts-ignore */
...(ngDevMode ? [undefined, { debugName: "ariaLabelledBy" }] : /* istanbul ignore next */ []));
/**
* Enables to hide the overlay when outside is clicked.
* @group Props
*/
dismissable = input(true, { ...(ngDevMode ? { debugName: "dismissable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
/**
* Inline style of the component.
* @group Props
*/
style = input(/* @ts-ignore */
...(ngDevMode ? [undefined, { debugName: "style" }] : /* istanbul ignore next */ []));
/**
* Style class of the component.
* @group Props
*/
styleClass = input(/* @ts-ignore */
...(ngDevMode ? [undefined, { debugName: "styleClass" }] : /* istanbul ignore next */ []));
/**
* 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 */ []));
/**
* Whether to automatically manage layering.
* @group Props
*/
autoZIndex = input(true, { ...(ngDevMode ? { debugName: "autoZIndex" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
/**
* Aria label of the close icon.
* @group Props
*/
ariaCloseLabel = input(/* @ts-ignore */
...(ngDevMode ? [undefined, { debugName: "ariaCloseLabel" }] : /* istanbul ignore next */ []));
/**
* Base zIndex value to use in layering.
* @group Props
*/
baseZIndex = input(0, { ...(ngDevMode ? { debugName: "baseZIndex" } : /* istanbul ignore next */ {}), transform: numberAttribute });
/**
* When enabled, first button receives focus on show.
* @group Props
*/
focusOnShow = input(true, { ...(ngDevMode ? { debugName: "focusOnShow" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
/**
* The motion options.
* @group Props
*/
motionOptions = input(undefined, /* @ts-ignore */
...(ngDevMode ? [{ debugName: "motionOptions" }] : /* istanbul ignore next */ []));
computedMotionOptions = computed(() => {
return {
...this.ptm('motion'),
...this.motionOptions()
};
}, /* @ts-ignore */
...(ngDevMode ? [{ debugName: "computedMotionOptions" }] : /* istanbul ignore next */ []));
/**
* Callback to invoke when an overlay becomes visible.
* @group Emits
*/
onShow = output();
/**
* Callback to invoke when an overlay gets hidden.
* @group Emits
*/
onHide = output();
$appendTo = computed(() => this.appendTo() || this.config.overlayAppendTo(), /* @ts-ignore */
...(ngDevMode ? [{ debugName: "$appendTo" }] : /* istanbul ignore next */ []));
container;
overlayVisible = signal(false, /* @ts-ignore */
...(ngDevMode ? [{ debugName: "overlayVisible" }] : /* istanbul ignore next */ []));
render = signal(false, /* @ts-ignore */
...(ngDevMode ? [{ debugName: "render" }] : /* istanbul ignore next */ []));
selfClick = false;
documentClickListener;
target = null;
willHide;
scrollHandler;
documentResizeListener;
/**
* Custom content template.
* @param {PopoverContentTemplateContext} context - content context.
* @see {@link PopoverContentTemplateContext}
* @group Templates
*/
contentTemplate = contentChild('content', { ...(ngDevMode ? { debugName: "contentTemplate" } : /* istanbul ignore next */ {}), descendants: false });
onCloseClickCallback = this.onCloseClick.bind(this);
contentTemplateContext = computed(() => ({ closeCallback: this.onCloseClickCallback }), /* @ts-ignore */
...(ngDevMode ? [{ debugName: "contentTemplateContext" }] : /* istanbul ignore next */ []));
destroyCallback;
overlayEventListener;
overlaySubscription;
_componentStyle = inject(PopoverStyle);
overlayService = inject(OverlayService);
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;
});
}
}
}
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.set(true);
this.render.set(true);
}
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 containerLeft = containerOffset.left;
const containerTop = containerOffset.top;
const targetLeft = targetOffset.left;
const targetTop = targetOffset.top;
const borderRadius = this.document.defaultView?.getComputedStyle(this.container).getPropertyValue('border-radius');
let arrowLeft = 0;
if (containerLeft < targetLeft) {
arrowLeft = targetLeft - containerLeft - parseFloat(borderRadius) * 2;
}
this.container.style.setProperty($dt('popover.arrow.left').name, `${arrowLeft}px`);
if (containerTop < targetTop) {
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.set(false);
this.container = null;
}
}
focus() {
const focusable = findSingle(this.container, '[autofocus]');
if (focusable) {
setTimeout(() => focusable.focus(), 5);
}
}
/**
* Hides the panel.
* @group Method
*/
hide() {
this.overlayVisible.set(false);
}
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: "22.0.6", ngImport: i0, type: Popover, deps: null, target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: Popover, isStandalone: true, selector: "p-popover", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledBy: { classPropertyName: "ariaLabelledBy", publicName: "ariaLabelledBy", isSignal: true, isRequired: false, transformFunction: null }, dismissable: { classPropertyName: "dismissable", publicName: "dismissable", 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 }, appendTo: { classPropertyName: "appendTo", publicName: "appendTo", isSignal: true, isRequired: false, transformFunction: null }, autoZIndex: { classPropertyName: "autoZIndex", publicName: "autoZIndex", isSignal: true, isRequired: false, transformFunction: null }, ariaCloseLabel: { classPropertyName: "ariaCloseLabel", publicName: "ariaCloseLabel", isSignal: true, isRequired: false, transformFunction: null }, baseZIndex: { classPropertyName: "baseZIndex", publicName: "baseZIndex", isSignal: true, isRequired: false, transformFunction: null }, focusOnShow: { classPropertyName: "focusOnShow", publicName: "focusOnShow", isSignal: true, 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"], isSignal: true }], usesInheritance: true, hostDirectives: [{ directive: i1.Bind }], ngImport: i0, template: `
(render()) {
<div
[pBind]="ptm('root')"
[class]="cn(cx('root'), styleClass())"
[style]="sx('root')"
(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>
(contentTemplate()) {
<ng-container *ngTemplateOutlet="contentTemplate(); context: contentTemplateContext()"></ng-container>
}
</div>
</div>
}
`, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: SharedModule }, { kind: "directive", type: Bind, selector: "[pBind]", inputs: ["pBind"] }, { kind: "ngmodule", type: MotionModule }, { kind: "directive", type: i2.MotionDirective, selector: "[pMotion]", inputs: ["pMotion", "pMotionName", "pMotionType", "pMotionSafe", "pMotionDisabled", "pMotionAppear", "pMotionEnter", "pMotionLeave", "pMotionDuration", "pMotionHideStrategy", "pMotionEnterFromClass", "pMotionEnterToClass", "pMotionEnterActiveClass", "pMotionLeaveFromClass", "pMotionLeaveToClass", "pMotionLeaveActiveClass", "pMotionOptions"], outputs: ["pMotionOnBeforeEnter", "pMotionOnEnter", "pMotionOnAfterEnter", "pMotionOnEnterCancelled", "pMotionOnBeforeLeave", "pMotionOnLeave", "pMotionOnAfterLeave", "pMotionOnLeaveCancelled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: Popover, decorators: [{
type: Component,
args: [{
selector: 'p-popover',
standalone: true,
imports: [NgTemplateOutlet, 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')"
(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>
(contentTemplate()) {
<ng-container *ngTemplateOutlet="contentTemplate(); context: contentTemplateContext()"></ng-container>
}
</div>
</div>
}
`,
changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None
}]
}], propDecorators: { ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaLabelledBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelledBy", required: false }] }], dismissable: [{ type: i0.Input, args: [{ isSignal: true, alias: "dismissable", required: false }] }], style: [{ type: i0.Input, args: [{ isSignal: true, alias: "style", required: false }] }], styleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "styleClass", required: false }] }], appendTo: [{ type: i0.Input, args: [{ isSignal: true, alias: "appendTo", required: false }] }], autoZIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoZIndex", required: false }] }], ariaCloseLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaCloseLabel", required: false }] }], baseZIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "baseZIndex", required: false }] }], focusOnShow: [{ type: i0.Input, args: [{ isSignal: true, alias: "focusOnShow", required: false }] }], motionOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "motionOptions", required: false }] }], onShow: [{ type: i0.Output, args: ["onShow"] }], onHide: [{ type: i0.Output, args: ["onHide"] }], contentTemplate: [{ type: i0.ContentChild, args: ['content', { ...{ descendants: false }, isSignal: true }] }], onEscapeKeydown: [{
type: HostListener,
args: ['document:keydown.escape', ['$event']]
}] } });
class PopoverModule {
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: PopoverModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.6", ngImport: i0, type: PopoverModule, imports: [Popover, SharedModule], exports: [Popover, SharedModule] });
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: PopoverModule, imports: [Popover, SharedModule, SharedModule] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", 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