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
786 lines (774 loc) • 33.3 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, Component, ChangeDetectionStrategy, ViewEncapsulation, Input, Output, ViewChild, ContentChild, ContentChildren, NgModule } from '@angular/core';
import { getTargetElement, focus, addClass, removeClass, isTouchDevice } from '@primeuix/utils';
import * as i1 from 'primeng/api';
import { PrimeTemplate, SharedModule } 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 = /*@__PURE__*/ (() => { let ɵOverlayStyle_BaseFactory; return function OverlayStyle_Factory(__ngFactoryType__) { return (ɵOverlayStyle_BaseFactory || (ɵOverlayStyle_BaseFactory = i0.ɵɵgetInheritedFactory(OverlayStyle)))(__ngFactoryType__ || OverlayStyle); }; })();
static ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: OverlayStyle, factory: OverlayStyle.ɵfac });
}
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(OverlayStyle, [{
type: Injectable
}], null, null); })();
const _c0 = ["content"];
const _c1 = ["overlay"];
const _c2 = ["*"];
const _c3 = (a0, a1, a2, a3, a4, a5, a6, a7, a8, a9, a10, a11, a12, a13) => ({ "p-overlay p-component": true, "p-overlay-modal p-overlay-mask p-overlay-mask-enter": a0, "p-overlay-center": a1, "p-overlay-top": a2, "p-overlay-top-start": a3, "p-overlay-top-end": a4, "p-overlay-bottom": a5, "p-overlay-bottom-start": a6, "p-overlay-bottom-end": a7, "p-overlay-left": a8, "p-overlay-left-start": a9, "p-overlay-left-end": a10, "p-overlay-right": a11, "p-overlay-right-start": a12, "p-overlay-right-end": a13 });
const _c4 = (a0, a1, a2) => ({ showTransitionParams: a0, hideTransitionParams: a1, transform: a2 });
const _c5 = a0 => ({ value: "visible", params: a0 });
const _c6 = a0 => ({ mode: a0 });
const _c7 = a0 => ({ $implicit: a0 });
function Overlay_div_0_div_2_ng_container_3_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵelementContainer(0);
} }
function Overlay_div_0_div_2_Template(rf, ctx) { if (rf & 1) {
const _r3 = i0.ɵɵgetCurrentView();
i0.ɵɵelementStart(0, "div", 3, 1);
i0.ɵɵlistener("click", function Overlay_div_0_div_2_Template_div_click_0_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onOverlayContentClick($event)); })("@overlayContentAnimation.start", function Overlay_div_0_div_2_Template_div_animation_overlayContentAnimation_start_0_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onOverlayContentAnimationStart($event)); })("@overlayContentAnimation.done", function Overlay_div_0_div_2_Template_div_animation_overlayContentAnimation_done_0_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onOverlayContentAnimationDone($event)); });
i0.ɵɵprojection(2);
i0.ɵɵtemplate(3, Overlay_div_0_div_2_ng_container_3_Template, 1, 0, "ng-container", 4);
i0.ɵɵelementEnd();
} if (rf & 2) {
const ctx_r1 = i0.ɵɵnextContext(2);
i0.ɵɵclassMap(ctx_r1.contentStyleClass);
i0.ɵɵproperty("ngStyle", ctx_r1.contentStyle)("ngClass", "p-overlay-content")("@overlayContentAnimation", i0.ɵɵpureFunction1(11, _c5, i0.ɵɵpureFunction3(7, _c4, ctx_r1.showTransitionOptions, ctx_r1.hideTransitionOptions, ctx_r1.transformOptions[ctx_r1.modal ? ctx_r1.overlayResponsiveDirection : "default"])));
i0.ɵɵadvance(3);
i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.contentTemplate || ctx_r1._contentTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction1(15, _c7, i0.ɵɵpureFunction1(13, _c6, ctx_r1.overlayMode)));
} }
function Overlay_div_0_Template(rf, ctx) { if (rf & 1) {
const _r1 = i0.ɵɵgetCurrentView();
i0.ɵɵelementStart(0, "div", 3, 0);
i0.ɵɵlistener("click", function Overlay_div_0_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onOverlayClick()); });
i0.ɵɵtemplate(2, Overlay_div_0_div_2_Template, 4, 17, "div", 2);
i0.ɵɵelementEnd();
} if (rf & 2) {
const ctx_r1 = i0.ɵɵnextContext();
i0.ɵɵclassMap(ctx_r1.styleClass);
i0.ɵɵproperty("ngStyle", ctx_r1.style)("ngClass", i0.ɵɵpureFunctionV(5, _c3, [ctx_r1.modal, ctx_r1.modal && ctx_r1.overlayResponsiveDirection === "center", ctx_r1.modal && ctx_r1.overlayResponsiveDirection === "top", ctx_r1.modal && ctx_r1.overlayResponsiveDirection === "top-start", ctx_r1.modal && ctx_r1.overlayResponsiveDirection === "top-end", ctx_r1.modal && ctx_r1.overlayResponsiveDirection === "bottom", ctx_r1.modal && ctx_r1.overlayResponsiveDirection === "bottom-start", ctx_r1.modal && ctx_r1.overlayResponsiveDirection === "bottom-end", ctx_r1.modal && ctx_r1.overlayResponsiveDirection === "left", ctx_r1.modal && ctx_r1.overlayResponsiveDirection === "left-start", ctx_r1.modal && ctx_r1.overlayResponsiveDirection === "left-end", ctx_r1.modal && ctx_r1.overlayResponsiveDirection === "right", ctx_r1.modal && ctx_r1.overlayResponsiveDirection === "right-start", ctx_r1.modal && ctx_r1.overlayResponsiveDirection === "right-end"]));
i0.ɵɵadvance(2);
i0.ɵɵproperty("ngIf", ctx_r1.visible);
} }
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 = function Overlay_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || Overlay)(i0.ɵɵdirectiveInject(i1.OverlayService), i0.ɵɵdirectiveInject(i0.NgZone)); };
static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Overlay, selectors: [["p-overlay"]], contentQueries: function Overlay_ContentQueries(rf, ctx, dirIndex) { if (rf & 1) {
i0.ɵɵcontentQuery(dirIndex, _c0, 4);
i0.ɵɵcontentQuery(dirIndex, PrimeTemplate, 4);
} if (rf & 2) {
let _t;
i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.contentTemplate = _t.first);
i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.templates = _t);
} }, viewQuery: function Overlay_Query(rf, ctx) { if (rf & 1) {
i0.ɵɵviewQuery(_c1, 5);
i0.ɵɵviewQuery(_c0, 5);
} if (rf & 2) {
let _t;
i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.overlayViewChild = _t.first);
i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.contentViewChild = _t.first);
} }, 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" }, features: [i0.ɵɵProvidersFeature([OverlayStyle]), i0.ɵɵInheritDefinitionFeature], ngContentSelectors: _c2, decls: 1, vars: 1, consts: [["overlay", ""], ["content", ""], [3, "ngStyle", "class", "ngClass", "click", 4, "ngIf"], [3, "click", "ngStyle", "ngClass"], [4, "ngTemplateOutlet", "ngTemplateOutletContext"]], template: function Overlay_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵprojectionDef();
i0.ɵɵtemplate(0, Overlay_div_0_Template, 3, 20, "div", 2);
} if (rf & 2) {
i0.ɵɵproperty("ngIf", ctx.modalVisible);
} }, dependencies: [CommonModule, i2.NgClass, i2.NgIf, i2.NgTemplateOutlet, i2.NgStyle, SharedModule], encapsulation: 2, data: { animation: [trigger('overlayContentAnimation', [transition(':enter', [useAnimation(showOverlayContentAnimation)]), transition(':leave', [useAnimation(hideOverlayContentAnimation)])])] }, changeDetection: 0 });
}
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(Overlay, [{
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]
}]
}], () => [{ type: i1.OverlayService }, { type: i0.NgZone }], { 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]
}] }); })();
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(Overlay, { className: "Overlay", filePath: "overlay.ts", lineNumber: 76 }); })();
class OverlayModule {
static ɵfac = function OverlayModule_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || OverlayModule)(); };
static ɵmod = /*@__PURE__*/ i0.ɵɵdefineNgModule({ type: OverlayModule });
static ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ imports: [Overlay, SharedModule, SharedModule] });
}
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(OverlayModule, [{
type: NgModule,
args: [{
imports: [Overlay, SharedModule],
exports: [Overlay, SharedModule]
}]
}], null, null); })();
(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(OverlayModule, { imports: [Overlay, SharedModule], exports: [Overlay, SharedModule] }); })();
/**
* Generated bundle index. Do not edit.
*/
export { Overlay, OverlayModule, OverlayStyle };
//# sourceMappingURL=primeng-overlay.mjs.map