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
774 lines (762 loc) • 31.4 kB
JavaScript
import { animation, style, animate, trigger, transition, useAnimation } from '@angular/animations';
import * as i2 from '@angular/common';
import { isPlatformBrowser, CommonModule } from '@angular/common';
import * as i0 from '@angular/core';
import { Injectable, EventEmitter, inject, ContentChildren, ContentChild, ViewChild, Output, Input, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
import { getTargetElement, focus, addClass, removeClass, isTouchDevice } from '@primeuix/utils';
import * as i1 from 'primeng/api';
import { SharedModule, PrimeTemplate } from 'primeng/api';
import { BaseComponent } from 'primeng/basecomponent';
import { DomHandler, ConnectedOverlayScrollHandler } from 'primeng/dom';
import { ObjectUtils, ZIndexUtils } from 'primeng/utils';
import { BaseStyle } from 'primeng/base';
const theme = ({ dt }) => `
.p-overlay {
position: absolute;
top: 0;
inset-inline-start: 0;
}
.p-overlay-modal {
display: flex;
align-items: center;
justify-content: center;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.p-overlay-content {
transform-origin: inherit;
}
.p-overlay-modal > .p-overlay-content {
z-index: 1;
width: 90%;
}
/* Position */
/* top */
.p-overlay-top {
align-items: flex-start;
}
.p-overlay-top-start {
align-items: flex-start;
justify-content: flex-start;
}
.p-overlay-top-end {
align-items: flex-start;
justify-content: flex-end;
}
/* bottom */
.p-overlay-bottom {
align-items: flex-end;
}
.p-overlay-bottom-start {
align-items: flex-end;
justify-content: flex-start;
}
.p-overlay-bottom-end {
align-items: flex-end;
justify-content: flex-end;
}
/* left */
.p-overlay-left {
justify-content: flex-start;
}
.p-overlay-left-start {
justify-content: flex-start;
align-items: flex-start;
}
.p-overlay-left-end {
justify-content: flex-start;
align-items: flex-end;
}
/* right */
.p-overlay-right {
justify-content: flex-end;
}
.p-overlay-right-start {
justify-content: flex-end;
align-items: flex-start;
}
.p-overlay-right-end {
justify-content: flex-end;
align-items: flex-end;
}
`;
class OverlayStyle extends BaseStyle {
name = 'overlay';
theme = theme;
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: OverlayStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: OverlayStyle });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: OverlayStyle, decorators: [{
type: Injectable
}] });
const showOverlayContentAnimation = animation([style({ transform: '{{transform}}', opacity: 0 }), animate('{{showTransitionParams}}')]);
const hideOverlayContentAnimation = animation([animate('{{hideTransitionParams}}', style({ transform: '{{transform}}', opacity: 0 }))]);
/**
* This API allows overlay components to be controlled from the PrimeNG. In this way, all overlay components in the application can have the same behavior.
* @group Components
*/
class Overlay extends BaseComponent {
overlayService;
zone;
/**
* The visible property is an input that determines the visibility of the component.
* @defaultValue false
* @group Props
*/
get visible() {
return this._visible;
}
set visible(value) {
this._visible = value;
if (this._visible && !this.modalVisible) {
this.modalVisible = true;
}
}
/**
* The mode property is an input that determines the overlay mode type or string.
* @defaultValue null
* @group Props
*/
get mode() {
return this._mode || this.overlayOptions?.mode;
}
set mode(value) {
this._mode = value;
}
/**
* The style property is an input that determines the style object for the component.
* @defaultValue null
* @group Props
*/
get style() {
return ObjectUtils.merge(this._style, this.modal ? this.overlayResponsiveOptions?.style : this.overlayOptions?.style);
}
set style(value) {
this._style = value;
}
/**
* The styleClass property is an input that determines the CSS class(es) for the component.
* @defaultValue null
* @group Props
*/
get styleClass() {
return ObjectUtils.merge(this._styleClass, this.modal ? this.overlayResponsiveOptions?.styleClass : this.overlayOptions?.styleClass);
}
set styleClass(value) {
this._styleClass = value;
}
/**
* The contentStyle property is an input that determines the style object for the content of the component.
* @defaultValue null
* @group Props
*/
get contentStyle() {
return ObjectUtils.merge(this._contentStyle, this.modal ? this.overlayResponsiveOptions?.contentStyle : this.overlayOptions?.contentStyle);
}
set contentStyle(value) {
this._contentStyle = value;
}
/**
* The contentStyleClass property is an input that determines the CSS class(es) for the content of the component.
* @defaultValue null
* @group Props
*/
get contentStyleClass() {
return ObjectUtils.merge(this._contentStyleClass, this.modal ? this.overlayResponsiveOptions?.contentStyleClass : this.overlayOptions?.contentStyleClass);
}
set contentStyleClass(value) {
this._contentStyleClass = value;
}
/**
* The target property is an input that specifies the target element or selector for the component.
* @defaultValue null
* @group Props
*/
get target() {
const value = this._target || this.overlayOptions?.target;
return value === undefined ? '@prev' : value;
}
set target(value) {
this._target = value;
}
/**
* Overlay can be mounted into its location, body or DOM element instance using this option.
* @defaultValue null
* @group Props
*/
get appendTo() {
return this._appendTo || this.overlayOptions?.appendTo;
}
set appendTo(value) {
this._appendTo = value;
}
/**
* The autoZIndex determines whether to automatically manage layering. Its default value is 'false'.
* @defaultValue false
* @group Props
*/
get autoZIndex() {
const value = this._autoZIndex || this.overlayOptions?.autoZIndex;
return value === undefined ? true : value;
}
set autoZIndex(value) {
this._autoZIndex = value;
}
/**
* The baseZIndex is base zIndex value to use in layering.
* @defaultValue null
* @group Props
*/
get baseZIndex() {
const value = this._baseZIndex || this.overlayOptions?.baseZIndex;
return value === undefined ? 0 : value;
}
set baseZIndex(value) {
this._baseZIndex = value;
}
/**
* Transition options of the show or hide animation.
* @defaultValue .12s cubic-bezier(0, 0, 0.2, 1)
* @group Props
*/
get showTransitionOptions() {
const value = this._showTransitionOptions || this.overlayOptions?.showTransitionOptions;
return value === undefined ? '.12s cubic-bezier(0, 0, 0.2, 1)' : value;
}
set showTransitionOptions(value) {
this._showTransitionOptions = value;
}
/**
* The hideTransitionOptions property is an input that determines the CSS transition options for hiding the component.
* @defaultValue .1s linear
* @group Props
*/
get hideTransitionOptions() {
const value = this._hideTransitionOptions || this.overlayOptions?.hideTransitionOptions;
return value === undefined ? '.1s linear' : value;
}
set hideTransitionOptions(value) {
this._hideTransitionOptions = value;
}
/**
* The listener property is an input that specifies the listener object for the component.
* @defaultValue null
* @group Props
*/
get listener() {
return this._listener || this.overlayOptions?.listener;
}
set listener(value) {
this._listener = value;
}
/**
* It is the option used to determine in which mode it should appear according to the given media or breakpoint.
* @defaultValue null
* @group Props
*/
get responsive() {
return this._responsive || this.overlayOptions?.responsive;
}
set responsive(val) {
this._responsive = val;
}
/**
* The options property is an input that specifies the overlay options for the component.
* @defaultValue null
* @group Props
*/
get options() {
return this._options;
}
set options(val) {
this._options = val;
}
/**
* This EventEmitter is used to notify changes in the visibility state of a component.
* @param {Boolean} boolean - Value of visibility as boolean.
* @group Emits
*/
visibleChange = new EventEmitter();
/**
* Callback to invoke before the overlay is shown.
* @param {OverlayOnBeforeShowEvent} event - Custom overlay before show event.
* @group Emits
*/
onBeforeShow = new EventEmitter();
/**
* Callback to invoke when the overlay is shown.
* @param {OverlayOnShowEvent} event - Custom overlay show event.
* @group Emits
*/
onShow = new EventEmitter();
/**
* Callback to invoke before the overlay is hidden.
* @param {OverlayOnBeforeHideEvent} event - Custom overlay before hide event.
* @group Emits
*/
onBeforeHide = new EventEmitter();
/**
* Callback to invoke when the overlay is hidden
* @param {OverlayOnHideEvent} event - Custom hide event.
* @group Emits
*/
onHide = new EventEmitter();
/**
* Callback to invoke when the animation is started.
* @param {AnimationEvent} event - Animation event.
* @group Emits
*/
onAnimationStart = new EventEmitter();
/**
* Callback to invoke when the animation is done.
* @param {AnimationEvent} event - Animation event.
* @group Emits
*/
onAnimationDone = new EventEmitter();
overlayViewChild;
contentViewChild;
/**
* Content template of the component.
* @group Templates
*/
contentTemplate;
templates;
_contentTemplate;
_visible = false;
_mode;
_style;
_styleClass;
_contentStyle;
_contentStyleClass;
_target;
_appendTo;
_autoZIndex;
_baseZIndex;
_showTransitionOptions;
_hideTransitionOptions;
_listener;
_responsive;
_options;
modalVisible = false;
isOverlayClicked = false;
isOverlayContentClicked = false;
scrollHandler;
documentClickListener;
documentResizeListener;
_componentStyle = inject(OverlayStyle);
documentKeyboardListener;
window;
transformOptions = {
default: 'scaleY(0.8)',
center: 'scale(0.7)',
top: 'translate3d(0px, -100%, 0px)',
'top-start': 'translate3d(0px, -100%, 0px)',
'top-end': 'translate3d(0px, -100%, 0px)',
bottom: 'translate3d(0px, 100%, 0px)',
'bottom-start': 'translate3d(0px, 100%, 0px)',
'bottom-end': 'translate3d(0px, 100%, 0px)',
left: 'translate3d(-100%, 0px, 0px)',
'left-start': 'translate3d(-100%, 0px, 0px)',
'left-end': 'translate3d(-100%, 0px, 0px)',
right: 'translate3d(100%, 0px, 0px)',
'right-start': 'translate3d(100%, 0px, 0px)',
'right-end': 'translate3d(100%, 0px, 0px)'
};
get modal() {
if (isPlatformBrowser(this.platformId)) {
return this.mode === 'modal' || (this.overlayResponsiveOptions && this.document.defaultView?.matchMedia(this.overlayResponsiveOptions.media?.replace('@media', '') || `(max-width: ${this.overlayResponsiveOptions.breakpoint})`).matches);
}
}
get overlayMode() {
return this.mode || (this.modal ? 'modal' : 'overlay');
}
get overlayOptions() {
return { ...this.config?.overlayOptions, ...this.options }; // TODO: Improve performance
}
get overlayResponsiveOptions() {
return { ...this.overlayOptions?.responsive, ...this.responsive }; // TODO: Improve performance
}
get overlayResponsiveDirection() {
return this.overlayResponsiveOptions?.direction || 'center';
}
get overlayEl() {
return this.overlayViewChild?.nativeElement;
}
get contentEl() {
return this.contentViewChild?.nativeElement;
}
get targetEl() {
return getTargetElement(this.target, this.el?.nativeElement);
}
constructor(overlayService, zone) {
super();
this.overlayService = overlayService;
this.zone = zone;
}
ngAfterContentInit() {
this.templates?.forEach((item) => {
switch (item.getType()) {
case 'content':
this._contentTemplate = item.template;
break;
// TODO: new template types may be added.
default:
this._contentTemplate = item.template;
break;
}
});
}
show(overlay, isFocus = false) {
this.onVisibleChange(true);
this.handleEvents('onShow', { overlay: overlay || this.overlayEl, target: this.targetEl, mode: this.overlayMode });
isFocus && focus(this.targetEl);
this.modal && addClass(this.document?.body, 'p-overflow-hidden');
}
hide(overlay, isFocus = false) {
if (!this.visible) {
return;
}
else {
this.onVisibleChange(false);
this.handleEvents('onHide', { overlay: overlay || this.overlayEl, target: this.targetEl, mode: this.overlayMode });
isFocus && focus(this.targetEl);
this.modal && removeClass(this.document?.body, 'p-overflow-hidden');
}
}
alignOverlay() {
!this.modal && DomHandler.alignOverlay(this.overlayEl, this.targetEl, this.appendTo);
}
onVisibleChange(visible) {
this._visible = visible;
this.visibleChange.emit(visible);
}
onOverlayClick() {
this.isOverlayClicked = true;
}
onOverlayContentClick(event) {
this.overlayService.add({
originalEvent: event,
target: this.targetEl
});
this.isOverlayContentClicked = true;
}
onOverlayContentAnimationStart(event) {
switch (event.toState) {
case 'visible':
this.handleEvents('onBeforeShow', { overlay: this.overlayEl, target: this.targetEl, mode: this.overlayMode });
if (this.autoZIndex) {
ZIndexUtils.set(this.overlayMode, this.overlayEl, this.baseZIndex + this.config?.zIndex[this.overlayMode]);
}
DomHandler.appendOverlay(this.overlayEl, this.appendTo === 'body' ? this.document.body : this.appendTo, this.appendTo);
this.alignOverlay();
break;
case 'void':
this.handleEvents('onBeforeHide', { overlay: this.overlayEl, target: this.targetEl, mode: this.overlayMode });
this.modal && addClass(this.overlayEl, 'p-overlay-mask-leave');
break;
}
this.handleEvents('onAnimationStart', event);
}
onOverlayContentAnimationDone(event) {
const container = this.overlayEl || event.element.parentElement;
switch (event.toState) {
case 'visible':
this.show(container, true);
this.bindListeners();
break;
case 'void':
this.hide(container, true);
this.unbindListeners();
DomHandler.appendOverlay(this.overlayEl, this.targetEl, this.appendTo);
ZIndexUtils.clear(container);
this.modalVisible = false;
this.cd.markForCheck();
break;
}
this.handleEvents('onAnimationDone', event);
}
handleEvents(name, params) {
this[name].emit(params);
this.options && this.options[name] && this.options[name](params);
this.config?.overlayOptions && (this.config?.overlayOptions)[name] && (this.config?.overlayOptions)[name](params);
}
bindListeners() {
this.bindScrollListener();
this.bindDocumentClickListener();
this.bindDocumentResizeListener();
this.bindDocumentKeyboardListener();
}
unbindListeners() {
this.unbindScrollListener();
this.unbindDocumentClickListener();
this.unbindDocumentResizeListener();
this.unbindDocumentKeyboardListener();
}
bindScrollListener() {
if (!this.scrollHandler) {
this.scrollHandler = new ConnectedOverlayScrollHandler(this.targetEl, (event) => {
const valid = this.listener ? this.listener(event, { type: 'scroll', mode: this.overlayMode, valid: true }) : true;
valid && this.hide(event, true);
});
}
this.scrollHandler.bindScrollListener();
}
unbindScrollListener() {
if (this.scrollHandler) {
this.scrollHandler.unbindScrollListener();
}
}
bindDocumentClickListener() {
if (!this.documentClickListener) {
this.documentClickListener = this.renderer.listen(this.document, 'click', (event) => {
const isTargetClicked = this.targetEl && (this.targetEl.isSameNode(event.target) || (!this.isOverlayClicked && this.targetEl.contains(event.target)));
const isOutsideClicked = !isTargetClicked && !this.isOverlayContentClicked;
const valid = this.listener ? this.listener(event, { type: 'outside', mode: this.overlayMode, valid: event.which !== 3 && isOutsideClicked }) : isOutsideClicked;
valid && this.hide(event);
this.isOverlayClicked = this.isOverlayContentClicked = false;
});
}
}
unbindDocumentClickListener() {
if (this.documentClickListener) {
this.documentClickListener();
this.documentClickListener = null;
}
}
bindDocumentResizeListener() {
if (!this.documentResizeListener) {
this.documentResizeListener = this.renderer.listen(this.document.defaultView, 'resize', (event) => {
const valid = this.listener ? this.listener(event, { type: 'resize', mode: this.overlayMode, valid: !isTouchDevice() }) : !isTouchDevice();
valid && this.hide(event, true);
});
}
}
unbindDocumentResizeListener() {
if (this.documentResizeListener) {
this.documentResizeListener();
this.documentResizeListener = null;
}
}
bindDocumentKeyboardListener() {
if (this.documentKeyboardListener) {
return;
}
this.zone.runOutsideAngular(() => {
this.documentKeyboardListener = this.renderer.listen(this.document.defaultView, 'keydown', (event) => {
if (this.overlayOptions.hideOnEscape === false || event.code !== 'Escape') {
return;
}
const valid = this.listener ? this.listener(event, { type: 'keydown', mode: this.overlayMode, valid: !isTouchDevice() }) : !isTouchDevice();
if (valid) {
this.zone.run(() => {
this.hide(event, true);
});
}
});
});
}
unbindDocumentKeyboardListener() {
if (this.documentKeyboardListener) {
this.documentKeyboardListener();
this.documentKeyboardListener = null;
}
}
ngOnDestroy() {
this.hide(this.overlayEl, true);
if (this.overlayEl) {
DomHandler.appendOverlay(this.overlayEl, this.targetEl, this.appendTo);
ZIndexUtils.clear(this.overlayEl);
}
if (this.scrollHandler) {
this.scrollHandler.destroy();
this.scrollHandler = null;
}
this.unbindListeners();
super.ngOnDestroy();
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: Overlay, deps: [{ token: i1.OverlayService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.2", type: Overlay, isStandalone: true, selector: "p-overlay", inputs: { visible: "visible", mode: "mode", style: "style", styleClass: "styleClass", contentStyle: "contentStyle", contentStyleClass: "contentStyleClass", target: "target", appendTo: "appendTo", autoZIndex: "autoZIndex", baseZIndex: "baseZIndex", showTransitionOptions: "showTransitionOptions", hideTransitionOptions: "hideTransitionOptions", listener: "listener", responsive: "responsive", options: "options" }, outputs: { visibleChange: "visibleChange", onBeforeShow: "onBeforeShow", onShow: "onShow", onBeforeHide: "onBeforeHide", onHide: "onHide", onAnimationStart: "onAnimationStart", onAnimationDone: "onAnimationDone" }, providers: [OverlayStyle], queries: [{ propertyName: "contentTemplate", first: true, predicate: ["content"] }, { propertyName: "templates", predicate: PrimeTemplate }], viewQueries: [{ propertyName: "overlayViewChild", first: true, predicate: ["overlay"], descendants: true }, { propertyName: "contentViewChild", first: true, predicate: ["content"], descendants: true }], usesInheritance: true, ngImport: i0, template: `
<div
*ngIf="modalVisible"
#overlay
[ngStyle]="style"
[class]="styleClass"
[ngClass]="{
'p-overlay p-component': true,
'p-overlay-modal p-overlay-mask p-overlay-mask-enter': modal,
'p-overlay-center': modal && overlayResponsiveDirection === 'center',
'p-overlay-top': modal && overlayResponsiveDirection === 'top',
'p-overlay-top-start': modal && overlayResponsiveDirection === 'top-start',
'p-overlay-top-end': modal && overlayResponsiveDirection === 'top-end',
'p-overlay-bottom': modal && overlayResponsiveDirection === 'bottom',
'p-overlay-bottom-start': modal && overlayResponsiveDirection === 'bottom-start',
'p-overlay-bottom-end': modal && overlayResponsiveDirection === 'bottom-end',
'p-overlay-left': modal && overlayResponsiveDirection === 'left',
'p-overlay-left-start': modal && overlayResponsiveDirection === 'left-start',
'p-overlay-left-end': modal && overlayResponsiveDirection === 'left-end',
'p-overlay-right': modal && overlayResponsiveDirection === 'right',
'p-overlay-right-start': modal && overlayResponsiveDirection === 'right-start',
'p-overlay-right-end': modal && overlayResponsiveDirection === 'right-end'
}"
(click)="onOverlayClick()"
>
<div
*ngIf="visible"
#content
[ngStyle]="contentStyle"
[class]="contentStyleClass"
[ngClass]="'p-overlay-content'"
(click)="onOverlayContentClick($event)"
[@overlayContentAnimation]="{
value: 'visible',
params: {
showTransitionParams: showTransitionOptions,
hideTransitionParams: hideTransitionOptions,
transform: transformOptions[modal ? overlayResponsiveDirection : 'default']
}
}"
(@overlayContentAnimation.start)="onOverlayContentAnimationStart($event)"
(@overlayContentAnimation.done)="onOverlayContentAnimationDone($event)"
>
<ng-content></ng-content>
<ng-container *ngTemplateOutlet="contentTemplate || _contentTemplate; context: { $implicit: { mode: overlayMode } }"></ng-container>
</div>
</div>
`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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 }], animations: [trigger('overlayContentAnimation', [transition(':enter', [useAnimation(showOverlayContentAnimation)]), transition(':leave', [useAnimation(hideOverlayContentAnimation)])])], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: Overlay, decorators: [{
type: Component,
args: [{
selector: 'p-overlay',
standalone: true,
imports: [CommonModule, SharedModule],
template: `
<div
*ngIf="modalVisible"
#overlay
[ngStyle]="style"
[class]="styleClass"
[ngClass]="{
'p-overlay p-component': true,
'p-overlay-modal p-overlay-mask p-overlay-mask-enter': modal,
'p-overlay-center': modal && overlayResponsiveDirection === 'center',
'p-overlay-top': modal && overlayResponsiveDirection === 'top',
'p-overlay-top-start': modal && overlayResponsiveDirection === 'top-start',
'p-overlay-top-end': modal && overlayResponsiveDirection === 'top-end',
'p-overlay-bottom': modal && overlayResponsiveDirection === 'bottom',
'p-overlay-bottom-start': modal && overlayResponsiveDirection === 'bottom-start',
'p-overlay-bottom-end': modal && overlayResponsiveDirection === 'bottom-end',
'p-overlay-left': modal && overlayResponsiveDirection === 'left',
'p-overlay-left-start': modal && overlayResponsiveDirection === 'left-start',
'p-overlay-left-end': modal && overlayResponsiveDirection === 'left-end',
'p-overlay-right': modal && overlayResponsiveDirection === 'right',
'p-overlay-right-start': modal && overlayResponsiveDirection === 'right-start',
'p-overlay-right-end': modal && overlayResponsiveDirection === 'right-end'
}"
(click)="onOverlayClick()"
>
<div
*ngIf="visible"
#content
[ngStyle]="contentStyle"
[class]="contentStyleClass"
[ngClass]="'p-overlay-content'"
(click)="onOverlayContentClick($event)"
[@overlayContentAnimation]="{
value: 'visible',
params: {
showTransitionParams: showTransitionOptions,
hideTransitionParams: hideTransitionOptions,
transform: transformOptions[modal ? overlayResponsiveDirection : 'default']
}
}"
(@overlayContentAnimation.start)="onOverlayContentAnimationStart($event)"
(@overlayContentAnimation.done)="onOverlayContentAnimationDone($event)"
>
<ng-content></ng-content>
<ng-container *ngTemplateOutlet="contentTemplate || _contentTemplate; context: { $implicit: { mode: overlayMode } }"></ng-container>
</div>
</div>
`,
animations: [trigger('overlayContentAnimation', [transition(':enter', [useAnimation(showOverlayContentAnimation)]), transition(':leave', [useAnimation(hideOverlayContentAnimation)])])],
changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None,
providers: [OverlayStyle]
}]
}], ctorParameters: () => [{ type: i1.OverlayService }, { type: i0.NgZone }], propDecorators: { visible: [{
type: Input
}], mode: [{
type: Input
}], style: [{
type: Input
}], styleClass: [{
type: Input
}], contentStyle: [{
type: Input
}], contentStyleClass: [{
type: Input
}], target: [{
type: Input
}], appendTo: [{
type: Input
}], autoZIndex: [{
type: Input
}], baseZIndex: [{
type: Input
}], showTransitionOptions: [{
type: Input
}], hideTransitionOptions: [{
type: Input
}], listener: [{
type: Input
}], responsive: [{
type: Input
}], options: [{
type: Input
}], visibleChange: [{
type: Output
}], onBeforeShow: [{
type: Output
}], onShow: [{
type: Output
}], onBeforeHide: [{
type: Output
}], onHide: [{
type: Output
}], onAnimationStart: [{
type: Output
}], onAnimationDone: [{
type: Output
}], overlayViewChild: [{
type: ViewChild,
args: ['overlay']
}], contentViewChild: [{
type: ViewChild,
args: ['content']
}], contentTemplate: [{
type: ContentChild,
args: ['content', { descendants: false }]
}], templates: [{
type: ContentChildren,
args: [PrimeTemplate]
}] } });
class OverlayModule {
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: OverlayModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.2", ngImport: i0, type: OverlayModule, imports: [Overlay, SharedModule], exports: [Overlay, SharedModule] });
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: OverlayModule, imports: [Overlay, SharedModule, SharedModule] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: OverlayModule, decorators: [{
type: NgModule,
args: [{
imports: [Overlay, SharedModule],
exports: [Overlay, SharedModule]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { Overlay, OverlayModule, OverlayStyle };
//# sourceMappingURL=primeng-overlay.mjs.map