primeng 22.1.1 → 22.1.3

package/fesm2022/primeng-overlay.mjs

@@ -1,38 +1,33 @@
-import { isPlatformBrowser, NgTemplateOutlet } from '@angular/common';
-import * as i0 from '@angular/core';
-import { Injectable, InjectionToken, inject, input, model, output, viewChild, contentChild, computed, signal, effect, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
-import { getTargetElement, focus, addClass, removeClass, appendChild, getOuterWidth, relativePosition, absolutePosition, 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 { BaseStyle } from 'primeng/base';
-
+import { NgTemplateOutlet, isPlatformBrowser } from "@angular/common";
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, Injectable, InjectionToken, NgModule, ViewEncapsulation, computed, contentChild, effect, inject, input, model, output, signal, viewChild } from "@angular/core";
+import { absolutePosition, appendChild, focus, getOuterWidth, getTargetElement, isTouchDevice, relativePosition } 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, getEventTarget } from "primeng/dom";
+import * as i2 from "primeng/motion";
+import { MotionModule } from "primeng/motion";
+import { ZIndexUtils, markInstance } from "primeng/utils";
+import { BaseStyle } from "primeng/base";
 const inlineStyles = {
-    root: ({ instance }) => {
-        const modal = instance.modal();
-        const responsiveStyle = modal ? instance.$overlayResponsiveOptions()?.style : instance.$overlayOptions()?.style;
-        return {
-            position: 'absolute',
-            top: '0',
-            ...responsiveStyle,
-            ...instance.style()
-        };
-    },
-    content: ({ instance }) => {
-        const modal = instance.modal();
-        const responsiveContentStyle = modal ? instance.$overlayResponsiveOptions()?.contentStyle : instance.$overlayOptions()?.contentStyle;
-        return {
-            ...responsiveContentStyle,
-            ...instance.contentStyle()
-        };
-    }
+	root: ({ instance }) => {
+		return {
+			position: "absolute",
+			top: "0",
+			...instance.modal() ? instance.$overlayResponsiveOptions()?.style : instance.$overlayOptions()?.style,
+			...instance.style()
+		};
+	},
+	content: ({ instance }) => {
+		return {
+			...instance.modal() ? instance.$overlayResponsiveOptions()?.contentStyle : instance.$overlayOptions()?.contentStyle,
+			...instance.contentStyle()
+		};
+	}
 };
-const style = /*css*/ `
+const style = `
 .p-overlay-modal {
     display: flex;
     align-items: center;
@@ -117,565 +112,560 @@ const style = /*css*/ `
 }
 `;
 const classes = {
-    host: 'p-overlay-host',
-    root: ({ instance }) => {
-        const modal = instance.modal();
-        const dir = instance.overlayResponsiveDirection();
-        return [
-            'p-overlay p-component',
-            {
-                'p-overlay-modal p-overlay-mask p-overlay-mask-enter-active': modal,
-                'p-overlay-center': modal && dir === 'center',
-                'p-overlay-top': modal && dir === 'top',
-                'p-overlay-top-start': modal && dir === 'top-start',
-                'p-overlay-top-end': modal && dir === 'top-end',
-                'p-overlay-bottom': modal && dir === 'bottom',
-                'p-overlay-bottom-start': modal && dir === 'bottom-start',
-                'p-overlay-bottom-end': modal && dir === 'bottom-end',
-                'p-overlay-left': modal && dir === 'left',
-                'p-overlay-left-start': modal && dir === 'left-start',
-                'p-overlay-left-end': modal && dir === 'left-end',
-                'p-overlay-right': modal && dir === 'right',
-                'p-overlay-right-start': modal && dir === 'right-start',
-                'p-overlay-right-end': modal && dir === 'right-end'
-            }
-        ];
-    },
-    content: 'p-overlay-content'
+	host: "p-overlay-host",
+	root: ({ instance }) => {
+		const modal = instance.modal();
+		const dir = instance.overlayResponsiveDirection();
+		return ["p-overlay p-component", {
+			"p-overlay-modal p-overlay-mask p-overlay-mask-enter-active": modal,
+			"p-overlay-center": modal && dir === "center",
+			"p-overlay-top": modal && dir === "top",
+			"p-overlay-top-start": modal && dir === "top-start",
+			"p-overlay-top-end": modal && dir === "top-end",
+			"p-overlay-bottom": modal && dir === "bottom",
+			"p-overlay-bottom-start": modal && dir === "bottom-start",
+			"p-overlay-bottom-end": modal && dir === "bottom-end",
+			"p-overlay-left": modal && dir === "left",
+			"p-overlay-left-start": modal && dir === "left-start",
+			"p-overlay-left-end": modal && dir === "left-end",
+			"p-overlay-right": modal && dir === "right",
+			"p-overlay-right-start": modal && dir === "right-start",
+			"p-overlay-right-end": modal && dir === "right-end"
+		}];
+	},
+	content: "p-overlay-content"
 };
-class OverlayStyle extends BaseStyle {
-    name = 'overlay';
-    style = style;
-    classes = classes;
-    inlineStyles = inlineStyles;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: OverlayStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: OverlayStyle });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: OverlayStyle, decorators: [{
-            type: Injectable
-        }] });
-
-const OVERLAY_INSTANCE = new InjectionToken('OVERLAY_INSTANCE');
-/**
- * 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 {
-    componentName = 'Overlay';
-    $pcOverlay = inject(OVERLAY_INSTANCE, { optional: true, skipSelf: true }) ?? undefined;
-    hostName = input('', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "hostName" }] : /* istanbul ignore next */ []));
-    /**
-     * The visible property is an input that determines the visibility of the component.
-     * @defaultValue false
-     * @group Props
-     */
-    visible = model(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "visible" }] : /* istanbul ignore next */ []));
-    /**
-     * The mode property is an input that determines the overlay mode type or string.
-     * @defaultValue null
-     * @group Props
-     */
-    mode = input(/* @ts-ignore */
-    ...(ngDevMode ? [undefined, { debugName: "mode" }] : /* istanbul ignore next */ []));
-    /**
-     * The style property is an input that determines the style object for the component.
-     * @defaultValue null
-     * @group Props
-     */
-    style = input(/* @ts-ignore */
-    ...(ngDevMode ? [undefined, { debugName: "style" }] : /* istanbul ignore next */ []));
-    /**
-     * The styleClass property is an input that determines the CSS class(es) for the component.
-     * @defaultValue null
-     * @group Props
-     */
-    styleClass = input(/* @ts-ignore */
-    ...(ngDevMode ? [undefined, { debugName: "styleClass" }] : /* istanbul ignore next */ []));
-    /**
-     * The contentStyle property is an input that determines the style object for the content of the component.
-     * @defaultValue null
-     * @group Props
-     */
-    contentStyle = input(/* @ts-ignore */
-    ...(ngDevMode ? [undefined, { debugName: "contentStyle" }] : /* istanbul ignore next */ []));
-    /**
-     * The contentStyleClass property is an input that determines the CSS class(es) for the content of the component.
-     * @defaultValue null
-     * @group Props
-     */
-    contentStyleClass = input(/* @ts-ignore */
-    ...(ngDevMode ? [undefined, { debugName: "contentStyleClass" }] : /* istanbul ignore next */ []));
-    /**
-     * The target property is an input that specifies the target element or selector for the component.
-     * @defaultValue null
-     * @group Props
-     */
-    target = input(/* @ts-ignore */
-    ...(ngDevMode ? [undefined, { debugName: "target" }] : /* istanbul ignore next */ []));
-    /**
-     * The autoZIndex determines whether to automatically manage layering. Its default value is 'false'.
-     * @defaultValue false
-     * @group Props
-     */
-    autoZIndex = input(/* @ts-ignore */
-    ...(ngDevMode ? [undefined, { debugName: "autoZIndex" }] : /* istanbul ignore next */ []));
-    /**
-     * The baseZIndex is base zIndex value to use in layering.
-     * @defaultValue null
-     * @group Props
-     */
-    baseZIndex = input(/* @ts-ignore */
-    ...(ngDevMode ? [undefined, { debugName: "baseZIndex" }] : /* istanbul ignore next */ []));
-    /**
-     * The listener property is an input that specifies the listener object for the component.
-     * @defaultValue null
-     * @group Props
-     */
-    listener = input(/* @ts-ignore */
-    ...(ngDevMode ? [undefined, { debugName: "listener" }] : /* istanbul ignore next */ []));
-    /**
-     * It is the option used to determine in which mode it should appear according to the given media or breakpoint.
-     * @defaultValue null
-     * @group Props
-     */
-    responsive = input(/* @ts-ignore */
-    ...(ngDevMode ? [undefined, { debugName: "responsive" }] : /* istanbul ignore next */ []));
-    /**
-     * The options property is an input that specifies the overlay options for the component.
-     * @defaultValue null
-     * @group Props
-     */
-    options = input(/* @ts-ignore */
-    ...(ngDevMode ? [undefined, { debugName: "options" }] : /* 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 'self'
-     * @group Props
-     */
-    appendTo = input(undefined, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "appendTo" }] : /* istanbul ignore next */ []));
-    /**
-     * Specifies whether the overlay should be rendered inline within the current component's template.
-     * @defaultValue false
-     * @group Props
-     */
-    inline = input(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "inline" }] : /* istanbul ignore next */ []));
-    /**
-     * The motion options.
-     * @group Props
-     */
-    motionOptions = input(undefined, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "motionOptions" }] : /* istanbul ignore next */ []));
-    /**
-     * Callback to invoke before the overlay is shown.
-     * @param {OverlayOnBeforeShowEvent} event - Custom overlay before show event.
-     * @group Emits
-     */
-    onBeforeShow = output();
-    /**
-     * Callback to invoke when the overlay is shown.
-     * @param {OverlayOnShowEvent} event - Custom overlay show event.
-     * @group Emits
-     */
-    onShow = output();
-    /**
-     * Callback to invoke before the overlay is hidden.
-     * @param {OverlayOnBeforeHideEvent} event - Custom overlay before hide event.
-     * @group Emits
-     */
-    onBeforeHide = output();
-    /**
-     * Callback to invoke when the overlay is hidden
-     * @param {OverlayOnHideEvent} event - Custom hide event.
-     * @group Emits
-     */
-    onHide = output();
-    /**
-     * Callback to invoke when the animation is started.
-     * @param {MotionEvent} event - Motion event. The AnimationEvent typing is deprecated and kept for backward compatibility; only the MotionEvent properties exist at runtime.
-     * @group Emits
-     * @deprecated since v21.0.0. Use onBeforeEnter and onBeforeLeave instead.
-     */
-    onAnimationStart = output();
-    /**
-     * Callback to invoke when the animation is done.
-     * @param {MotionEvent} event - Motion event. The AnimationEvent typing is deprecated and kept for backward compatibility; only the MotionEvent properties exist at runtime.
-     * @group Emits
-     * @deprecated since v21.0.0. Use onAfterEnter and onAfterLeave instead.
-     */
-    onAnimationDone = output();
-    /**
-     * Callback to invoke before the overlay enters.
-     * @param {MotionEvent} event - Event before enter.
-     * @group Emits
-     */
-    onBeforeEnter = output();
-    /**
-     * Callback to invoke when the overlay enters.
-     * @param {MotionEvent} event - Event on enter.
-     * @group Emits
-     */
-    onEnter = output();
-    /**
-     * Callback to invoke after the overlay has entered.
-     * @param {MotionEvent} event - Event after enter.
-     * @group Emits
-     */
-    onAfterEnter = output();
-    /**
-     * Callback to invoke before the overlay leaves.
-     * @param {MotionEvent} event - Event before leave.
-     * @group Emits
-     */
-    onBeforeLeave = output();
-    /**
-     * Callback to invoke when the overlay leaves.
-     * @param {MotionEvent} event - Event on leave.
-     * @group Emits
-     */
-    onLeave = output();
-    /**
-     * Callback to invoke after the overlay has left.
-     * @param {MotionEvent} event - Event after leave.
-     * @group Emits
-     */
-    onAfterLeave = output();
-    overlayViewChild = viewChild('overlay', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "overlayViewChild" }] : /* istanbul ignore next */ []));
-    contentViewChild = viewChild('content', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "contentViewChild" }] : /* istanbul ignore next */ []));
-    /**
-     * Content template of the component.
-     * @param {OverlayContentTemplateContext} context - content context.
-     * @see {@link OverlayContentTemplateContext}
-     * @group Templates
-     */
-    contentTemplate = contentChild('content', { ...(ngDevMode ? { debugName: "contentTemplate" } : /* istanbul ignore next */ {}), descendants: false });
-    hostAttrSelector = input(/* @ts-ignore */
-    ...(ngDevMode ? [undefined, { debugName: "hostAttrSelector" }] : /* istanbul ignore next */ []));
-    $appendTo = computed(() => this.appendTo() || this.config.overlayAppendTo(), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "$appendTo" }] : /* istanbul ignore next */ []));
-    $overlayOptions = computed(() => ({ ...this.config?.overlayOptions, ...this.options() }), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "$overlayOptions" }] : /* istanbul ignore next */ []));
-    $overlayResponsiveOptions = computed(() => ({ ...this.$overlayOptions()?.responsive, ...this.responsive() }), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "$overlayResponsiveOptions" }] : /* istanbul ignore next */ []));
-    overlayResponsiveDirection = computed(() => this.$overlayResponsiveOptions()?.direction || 'center', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "overlayResponsiveDirection" }] : /* istanbul ignore next */ []));
-    $mode = computed(() => this.mode() || this.$overlayOptions()?.mode, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "$mode" }] : /* istanbul ignore next */ []));
-    mergedStyleClass = computed(() => this.cn(this.styleClass(), this.modal() ? this.$overlayResponsiveOptions()?.styleClass : this.$overlayOptions()?.styleClass), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "mergedStyleClass" }] : /* istanbul ignore next */ []));
-    mergedContentStyleClass = computed(() => this.cn(this.contentStyleClass(), this.modal() ? this.$overlayResponsiveOptions()?.contentStyleClass : this.$overlayOptions()?.contentStyleClass), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "mergedContentStyleClass" }] : /* istanbul ignore next */ []));
-    $target = computed(() => {
-        const value = this.target() || this.$overlayOptions()?.target;
-        return value === undefined ? '@prev' : value;
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "$target" }] : /* istanbul ignore next */ []));
-    $autoZIndex = computed(() => {
-        const value = this.autoZIndex() || this.$overlayOptions()?.autoZIndex;
-        return value === undefined ? true : value;
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "$autoZIndex" }] : /* istanbul ignore next */ []));
-    $baseZIndex = computed(() => {
-        const value = this.baseZIndex() || this.$overlayOptions()?.baseZIndex;
-        return value === undefined ? 0 : value;
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "$baseZIndex" }] : /* istanbul ignore next */ []));
-    $listener = computed(() => this.listener() || this.$overlayOptions()?.listener, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "$listener" }] : /* istanbul ignore next */ []));
-    modal = computed(() => {
-        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));
-        }
-        return undefined;
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "modal" }] : /* istanbul ignore next */ []));
-    overlayMode = computed(() => this.$mode() || (this.modal() ? 'modal' : 'overlay'), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "overlayMode" }] : /* istanbul ignore next */ []));
-    overlayEl = computed(() => this.overlayViewChild()?.nativeElement, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "overlayEl" }] : /* istanbul ignore next */ []));
-    contentEl = computed(() => this.contentViewChild()?.nativeElement, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "contentEl" }] : /* istanbul ignore next */ []));
-    targetEl = computed(() => getTargetElement(this.$target(), this.el?.nativeElement), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "targetEl" }] : /* istanbul ignore next */ []));
-    computedMotionOptions = computed(() => ({
-        ...this.ptm('motion'),
-        ...(this.motionOptions() || this.$overlayOptions()?.motionOptions)
-    }), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "computedMotionOptions" }] : /* istanbul ignore next */ []));
-    modalVisible = signal(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "modalVisible" }] : /* istanbul ignore next */ []));
-    isOverlayClicked = false;
-    isOverlayContentClicked = false;
-    scrollHandler;
-    documentClickListener;
-    documentResizeListener;
-    _componentStyle = inject(OverlayStyle);
-    bindDirectiveInstance = inject(Bind, { self: true });
-    documentKeyboardListener;
-    parentDragSubscription = null;
-    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)'
-    };
-    overlayService = inject(OverlayService);
-    constructor() {
-        super();
-        effect(() => {
-            const v = this.visible();
-            if (v && !this.modalVisible()) {
-                this.modalVisible.set(true);
-            }
-        });
-    }
-    container = signal(undefined, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "container" }] : /* istanbul ignore next */ []));
-    onAfterViewChecked() {
-        this.bindDirectiveInstance.setAttrs(this.ptm('host'));
-    }
-    show(overlay, isFocus = false) {
-        this.onVisibleChange(true);
-        this.handleEvents('onShow', { overlay: overlay || this.overlayEl(), target: this.targetEl(), mode: this.overlayMode() });
-        if (isFocus) {
-            focus(this.targetEl());
-        }
-        if (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() });
-            if (isFocus) {
-                focus(this.targetEl());
-            }
-            if (this.modal()) {
-                removeClass(this.document?.body, 'p-overflow-hidden');
-            }
-        }
-    }
-    onVisibleChange(visible) {
-        this.visible.set(visible);
-    }
-    onOverlayClick() {
-        this.isOverlayClicked = true;
-    }
-    onOverlayContentClick(event) {
-        this.overlayService.add({
-            originalEvent: event,
-            target: this.targetEl()
-        });
-        this.isOverlayContentClicked = true;
-    }
-    onOverlayBeforeEnter(event) {
-        this.handleEvents('onBeforeShow', { overlay: this.overlayEl(), target: this.targetEl(), mode: this.overlayMode() });
-        this.container.set(this.overlayEl() || event.element);
-        this.show(this.overlayEl(), true);
-        if (this.hostAttrSelector() && this.overlayEl()) {
-            this.overlayEl().setAttribute(this.hostAttrSelector(), '');
-        }
-        this.appendOverlay();
-        this.alignOverlay();
-        this.bindParentDragListener();
-        this.setZIndex();
-        this.handleEvents('onBeforeEnter', event);
-    }
-    onOverlayEnter(event) {
-        this.handleEvents('onEnter', event);
-    }
-    onOverlayAfterEnter(event) {
-        this.bindListeners();
-        this.handleEvents('onAfterEnter', event);
-    }
-    onOverlayBeforeLeave(event) {
-        this.handleEvents('onBeforeHide', { overlay: this.overlayEl(), target: this.targetEl(), mode: this.overlayMode() });
-        this.handleEvents('onBeforeLeave', event);
-    }
-    onOverlayLeave(event) {
-        this.handleEvents('onLeave', event);
-    }
-    onOverlayAfterLeave(event) {
-        this.hide(this.overlayEl(), true);
-        this.container.set(null);
-        this.unbindListeners();
-        this.appendOverlay();
-        ZIndexUtils.clear(this.overlayEl());
-        this.modalVisible.set(false);
-        this.cd.markForCheck();
-        this.handleEvents('onAfterLeave', event);
-    }
-    handleEvents(name, params) {
-        this[name].emit(params);
-        const opts = this.options();
-        if (opts && opts[name]) {
-            opts[name](params);
-        }
-        if (this.config?.overlayOptions && (this.config?.overlayOptions)[name]) {
-            (this.config?.overlayOptions)[name](params);
-        }
-    }
-    setZIndex() {
-        if (this.$autoZIndex()) {
-            ZIndexUtils.set(this.overlayMode(), this.overlayEl(), this.$baseZIndex() + this.config?.zIndex[this.overlayMode()]);
-        }
-    }
-    appendOverlay() {
-        if (this.$appendTo() && this.$appendTo() !== 'self') {
-            if (this.$appendTo() === 'body') {
-                appendChild(this.document.body, this.overlayEl());
-            }
-            else {
-                appendChild(this.$appendTo(), this.overlayEl());
-            }
-        }
-    }
-    alignOverlay() {
-        if (!this.modal()) {
-            if (this.overlayEl() && this.targetEl()) {
-                this.overlayEl().style.minWidth = getOuterWidth(this.targetEl()) + 'px';
-                if (this.$appendTo() === 'self') {
-                    relativePosition(this.overlayEl(), this.targetEl());
-                }
-                else {
-                    absolutePosition(this.overlayEl(), this.targetEl());
-                }
-            }
-        }
-    }
-    bindListeners() {
-        this.bindScrollListener();
-        this.bindDocumentClickListener();
-        this.bindDocumentResizeListener();
-        this.bindDocumentKeyboardListener();
-    }
-    unbindListeners() {
-        this.unbindScrollListener();
-        this.unbindDocumentClickListener();
-        this.unbindDocumentResizeListener();
-        this.unbindDocumentKeyboardListener();
-        this.unbindParentDragListener();
-    }
-    bindParentDragListener() {
-        if (!this.parentDragSubscription && this.$appendTo() !== 'self' && this.targetEl) {
-            this.parentDragSubscription = this.overlayService.parentDragObservable.subscribe((container) => {
-                if (container.contains(this.targetEl())) {
-                    this.hide(this.overlayEl(), true);
-                }
-            });
-        }
-    }
-    unbindParentDragListener() {
-        if (this.parentDragSubscription) {
-            this.parentDragSubscription.unsubscribe();
-            this.parentDragSubscription = null;
-        }
-    }
-    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;
-                if (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;
-                if (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();
-                if (valid) {
-                    this.hide(event, true);
-                }
-            });
-        }
-    }
-    unbindDocumentResizeListener() {
-        if (this.documentResizeListener) {
-            this.documentResizeListener();
-            this.documentResizeListener = null;
-        }
-    }
-    bindDocumentKeyboardListener() {
-        if (this.documentKeyboardListener) {
-            return;
-        }
-        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.hide(event, true);
-            }
-        });
-    }
-    unbindDocumentKeyboardListener() {
-        if (this.documentKeyboardListener) {
-            this.documentKeyboardListener();
-            this.documentKeyboardListener = null;
-        }
-    }
-    onDestroy() {
-        this.hide(this.overlayEl(), true);
-        if (this.overlayEl() && this.$appendTo() !== 'self') {
-            this.renderer.appendChild(this.el.nativeElement, this.overlayEl());
-            ZIndexUtils.clear(this.overlayEl());
-        }
-        if (this.scrollHandler) {
-            this.scrollHandler.destroy();
-            this.scrollHandler = null;
-        }
-        this.unbindListeners();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: Overlay, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: Overlay, isStandalone: true, selector: "p-overlay", inputs: { hostName: { classPropertyName: "hostName", publicName: "hostName", isSignal: true, isRequired: false, transformFunction: null }, visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", 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 }, contentStyle: { classPropertyName: "contentStyle", publicName: "contentStyle", isSignal: true, isRequired: false, transformFunction: null }, contentStyleClass: { classPropertyName: "contentStyleClass", publicName: "contentStyleClass", isSignal: true, isRequired: false, transformFunction: null }, target: { classPropertyName: "target", publicName: "target", isSignal: true, isRequired: false, transformFunction: null }, autoZIndex: { classPropertyName: "autoZIndex", publicName: "autoZIndex", isSignal: true, isRequired: false, transformFunction: null }, baseZIndex: { classPropertyName: "baseZIndex", publicName: "baseZIndex", isSignal: true, isRequired: false, transformFunction: null }, listener: { classPropertyName: "listener", publicName: "listener", isSignal: true, isRequired: false, transformFunction: null }, responsive: { classPropertyName: "responsive", publicName: "responsive", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, appendTo: { classPropertyName: "appendTo", publicName: "appendTo", isSignal: true, isRequired: false, transformFunction: null }, inline: { classPropertyName: "inline", publicName: "inline", isSignal: true, isRequired: false, transformFunction: null }, motionOptions: { classPropertyName: "motionOptions", publicName: "motionOptions", isSignal: true, isRequired: false, transformFunction: null }, hostAttrSelector: { classPropertyName: "hostAttrSelector", publicName: "hostAttrSelector", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { visible: "visibleChange", onBeforeShow: "onBeforeShow", onShow: "onShow", onBeforeHide: "onBeforeHide", onHide: "onHide", onAnimationStart: "onAnimationStart", onAnimationDone: "onAnimationDone", onBeforeEnter: "onBeforeEnter", onEnter: "onEnter", onAfterEnter: "onAfterEnter", onBeforeLeave: "onBeforeLeave", onLeave: "onLeave", onAfterLeave: "onAfterLeave" }, providers: [OverlayStyle, { provide: OVERLAY_INSTANCE, useExisting: Overlay }, { provide: PARENT_INSTANCE, useExisting: Overlay }], queries: [{ propertyName: "contentTemplate", first: true, predicate: ["content"], isSignal: true }], viewQueries: [{ propertyName: "overlayViewChild", first: true, predicate: ["overlay"], descendants: true, isSignal: true }, { propertyName: "contentViewChild", first: true, predicate: ["content"], descendants: true, isSignal: true }], usesInheritance: true, hostDirectives: [{ directive: i1.Bind }], ngImport: i0, template: `
+var OverlayStyle = class OverlayStyle extends BaseStyle {
+	name = "overlay";
+	style = style;
+	classes = classes;
+	inlineStyles = inlineStyles;
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.3",
+		ngImport: i0,
+		type: OverlayStyle,
+		deps: null,
+		target: i0.ɵɵFactoryTarget.Injectable
+	});
+	static ɵprov = i0.ɵɵngDeclareInjectable({
+		minVersion: "12.0.0",
+		version: "22.2.3",
+		ngImport: i0,
+		type: OverlayStyle
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.3",
+	ngImport: i0,
+	type: OverlayStyle,
+	decorators: [{ type: Injectable }]
+});
+const OVERLAY_INSTANCE = new InjectionToken("OVERLAY_INSTANCE");
+var Overlay = class Overlay extends BaseComponent {
+	componentName = "Overlay";
+	$pcOverlay = inject(OVERLAY_INSTANCE, {
+		optional: true,
+		skipSelf: true
+	}) ?? void 0;
+	hostName = input("", ...ngDevMode ? [{ debugName: "hostName" }] : /* istanbul ignore next */ []);
+	visible = model(false, ...ngDevMode ? [{ debugName: "visible" }] : /* istanbul ignore next */ []);
+	mode = input(...ngDevMode ? [void 0, { debugName: "mode" }] : /* istanbul ignore next */ []);
+	style = input(...ngDevMode ? [void 0, { debugName: "style" }] : /* istanbul ignore next */ []);
+	styleClass = input(...ngDevMode ? [void 0, { debugName: "styleClass" }] : /* istanbul ignore next */ []);
+	contentStyle = input(...ngDevMode ? [void 0, { debugName: "contentStyle" }] : /* istanbul ignore next */ []);
+	contentStyleClass = input(...ngDevMode ? [void 0, { debugName: "contentStyleClass" }] : /* istanbul ignore next */ []);
+	target = input(...ngDevMode ? [void 0, { debugName: "target" }] : /* istanbul ignore next */ []);
+	autoZIndex = input(...ngDevMode ? [void 0, { debugName: "autoZIndex" }] : /* istanbul ignore next */ []);
+	baseZIndex = input(...ngDevMode ? [void 0, { debugName: "baseZIndex" }] : /* istanbul ignore next */ []);
+	listener = input(...ngDevMode ? [void 0, { debugName: "listener" }] : /* istanbul ignore next */ []);
+	responsive = input(...ngDevMode ? [void 0, { debugName: "responsive" }] : /* istanbul ignore next */ []);
+	options = input(...ngDevMode ? [void 0, { debugName: "options" }] : /* istanbul ignore next */ []);
+	appendTo = input(void 0, ...ngDevMode ? [{ debugName: "appendTo" }] : /* istanbul ignore next */ []);
+	inline = input(false, ...ngDevMode ? [{ debugName: "inline" }] : /* istanbul ignore next */ []);
+	motionOptions = input(void 0, ...ngDevMode ? [{ debugName: "motionOptions" }] : /* istanbul ignore next */ []);
+	onBeforeShow = output();
+	onShow = output();
+	onBeforeHide = output();
+	onHide = output();
+	onAnimationStart = output();
+	onAnimationDone = output();
+	onBeforeEnter = output();
+	onEnter = output();
+	onAfterEnter = output();
+	onBeforeLeave = output();
+	onLeave = output();
+	onAfterLeave = output();
+	overlayViewChild = viewChild("overlay", ...ngDevMode ? [{ debugName: "overlayViewChild" }] : /* istanbul ignore next */ []);
+	contentViewChild = viewChild("content", ...ngDevMode ? [{ debugName: "contentViewChild" }] : /* istanbul ignore next */ []);
+	contentTemplate = contentChild("content", {
+		...ngDevMode ? { debugName: "contentTemplate" } : /* istanbul ignore next */ {},
+		descendants: false
+	});
+	hostAttrSelector = input(...ngDevMode ? [void 0, { debugName: "hostAttrSelector" }] : /* istanbul ignore next */ []);
+	$appendTo = computed(() => this.appendTo() || this.config.overlayAppendTo(), ...ngDevMode ? [{ debugName: "$appendTo" }] : /* istanbul ignore next */ []);
+	$overlayOptions = computed(() => ({
+		...this.config?.overlayOptions,
+		...this.options()
+	}), ...ngDevMode ? [{ debugName: "$overlayOptions" }] : /* istanbul ignore next */ []);
+	$overlayResponsiveOptions = computed(() => ({
+		...this.$overlayOptions()?.responsive,
+		...this.responsive()
+	}), ...ngDevMode ? [{ debugName: "$overlayResponsiveOptions" }] : /* istanbul ignore next */ []);
+	overlayResponsiveDirection = computed(() => this.$overlayResponsiveOptions()?.direction || "center", ...ngDevMode ? [{ debugName: "overlayResponsiveDirection" }] : /* istanbul ignore next */ []);
+	$mode = computed(() => this.mode() || this.$overlayOptions()?.mode, ...ngDevMode ? [{ debugName: "$mode" }] : /* istanbul ignore next */ []);
+	mergedStyleClass = computed(() => this.cn(this.styleClass(), this.modal() ? this.$overlayResponsiveOptions()?.styleClass : this.$overlayOptions()?.styleClass), ...ngDevMode ? [{ debugName: "mergedStyleClass" }] : /* istanbul ignore next */ []);
+	mergedContentStyleClass = computed(() => this.cn(this.contentStyleClass(), this.modal() ? this.$overlayResponsiveOptions()?.contentStyleClass : this.$overlayOptions()?.contentStyleClass), ...ngDevMode ? [{ debugName: "mergedContentStyleClass" }] : /* istanbul ignore next */ []);
+	$target = computed(() => {
+		const value = this.target() || this.$overlayOptions()?.target;
+		return value === void 0 ? "@prev" : value;
+	}, ...ngDevMode ? [{ debugName: "$target" }] : /* istanbul ignore next */ []);
+	$autoZIndex = computed(() => {
+		const value = this.autoZIndex() || this.$overlayOptions()?.autoZIndex;
+		return value === void 0 ? true : value;
+	}, ...ngDevMode ? [{ debugName: "$autoZIndex" }] : /* istanbul ignore next */ []);
+	$baseZIndex = computed(() => {
+		const value = this.baseZIndex() || this.$overlayOptions()?.baseZIndex;
+		return value === void 0 ? 0 : value;
+	}, ...ngDevMode ? [{ debugName: "$baseZIndex" }] : /* istanbul ignore next */ []);
+	$listener = computed(() => this.listener() || this.$overlayOptions()?.listener, ...ngDevMode ? [{ debugName: "$listener" }] : /* istanbul ignore next */ []);
+	modal = computed(() => {
+		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;
+	}, ...ngDevMode ? [{ debugName: "modal" }] : /* istanbul ignore next */ []);
+	overlayMode = computed(() => this.$mode() || (this.modal() ? "modal" : "overlay"), ...ngDevMode ? [{ debugName: "overlayMode" }] : /* istanbul ignore next */ []);
+	overlayEl = computed(() => this.overlayViewChild()?.nativeElement, ...ngDevMode ? [{ debugName: "overlayEl" }] : /* istanbul ignore next */ []);
+	contentEl = computed(() => this.contentViewChild()?.nativeElement, ...ngDevMode ? [{ debugName: "contentEl" }] : /* istanbul ignore next */ []);
+	targetEl = computed(() => getTargetElement(this.$target(), this.el?.nativeElement), ...ngDevMode ? [{ debugName: "targetEl" }] : /* istanbul ignore next */ []);
+	computedMotionOptions = computed(() => ({
+		...this.ptm("motion"),
+		...this.motionOptions() || this.$overlayOptions()?.motionOptions
+	}), ...ngDevMode ? [{ debugName: "computedMotionOptions" }] : /* istanbul ignore next */ []);
+	modalVisible = signal(false, ...ngDevMode ? [{ debugName: "modalVisible" }] : /* istanbul ignore next */ []);
+	isOverlayClicked = false;
+	isOverlayContentClicked = false;
+	scrollHandler;
+	documentClickListener;
+	documentResizeListener;
+	_componentStyle = inject(OverlayStyle);
+	bindDirectiveInstance = inject(Bind, { self: true });
+	documentKeyboardListener;
+	parentDragSubscription = null;
+	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)"
+	};
+	overlayService = inject(OverlayService);
+	constructor() {
+		super();
+		effect(() => {
+			if (this.visible() && !this.modalVisible()) this.modalVisible.set(true);
+		});
+	}
+	container = signal(void 0, ...ngDevMode ? [{ debugName: "container" }] : /* istanbul ignore next */ []);
+	onAfterViewChecked() {
+		this.bindDirectiveInstance.setAttrs(this.ptm("host"));
+	}
+	show(overlay, isFocus = false) {
+		this.onVisibleChange(true);
+		this.handleEvents("onShow", {
+			overlay: overlay || this.overlayEl(),
+			target: this.targetEl(),
+			mode: this.overlayMode()
+		});
+		if (isFocus) focus(this.targetEl());
+		if (this.modal()) this.$blockBodyScroll();
+	}
+	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()
+			});
+			if (isFocus) focus(this.targetEl());
+			if (this.modal()) this.$unblockBodyScroll();
+		}
+	}
+	onVisibleChange(visible) {
+		this.visible.set(visible);
+	}
+	onOverlayClick() {
+		this.isOverlayClicked = true;
+	}
+	onOverlayContentClick(event) {
+		this.overlayService.add({
+			originalEvent: event,
+			target: this.targetEl()
+		});
+		this.isOverlayContentClicked = true;
+	}
+	onOverlayBeforeEnter(event) {
+		event.element.style.removeProperty("pointer-events");
+		this.handleEvents("onBeforeShow", {
+			overlay: this.overlayEl(),
+			target: this.targetEl(),
+			mode: this.overlayMode()
+		});
+		this.container.set(this.overlayEl() || event.element);
+		this.show(this.overlayEl(), true);
+		markInstance(this.overlayEl(), this.hostAttrSelector());
+		this.appendOverlay();
+		this.alignOverlay();
+		this.bindParentDragListener();
+		this.setZIndex();
+		this.handleEvents("onBeforeEnter", event);
+	}
+	onOverlayEnter(event) {
+		this.handleEvents("onEnter", event);
+	}
+	onOverlayAfterEnter(event) {
+		this.bindListeners();
+		this.handleEvents("onAfterEnter", event);
+	}
+	onOverlayBeforeLeave(event) {
+		event.element.style.pointerEvents = "none";
+		this.handleEvents("onBeforeHide", {
+			overlay: this.overlayEl(),
+			target: this.targetEl(),
+			mode: this.overlayMode()
+		});
+		this.handleEvents("onBeforeLeave", event);
+	}
+	onOverlayLeave(event) {
+		this.handleEvents("onLeave", event);
+	}
+	onOverlayAfterLeave(event) {
+		this.hide(this.overlayEl(), true);
+		this.container.set(null);
+		this.unbindListeners();
+		this.appendOverlay();
+		ZIndexUtils.clear(this.overlayEl());
+		this.modalVisible.set(false);
+		this.cd.markForCheck();
+		this.handleEvents("onAfterLeave", event);
+	}
+	handleEvents(name, params) {
+		this[name].emit(params);
+		const opts = this.options();
+		if (opts && opts[name]) opts[name](params);
+		if (this.config?.overlayOptions && (this.config?.overlayOptions)[name]) (this.config?.overlayOptions)[name](params);
+	}
+	setZIndex() {
+		if (this.$autoZIndex()) ZIndexUtils.set(this.overlayMode(), this.overlayEl(), this.$baseZIndex() + this.config?.zIndex[this.overlayMode()]);
+	}
+	appendOverlay() {
+		if (this.$appendTo() && this.$appendTo() !== "self") {
+			if (this.$appendTo() === "body") appendChild(this.$overlayParent(this.document.body, this.overlayEl()), this.overlayEl());
+			else appendChild(this.$overlayParent(this.$appendTo(), this.overlayEl()), this.overlayEl());
+		}
+	}
+	alignOverlay() {
+		if (!this.modal()) {
+			if (this.overlayEl() && this.targetEl()) {
+				this.overlayEl().style.minWidth = getOuterWidth(this.targetEl()) + "px";
+				if (this.$appendTo() === "self") relativePosition(this.overlayEl(), this.targetEl());
+				else absolutePosition(this.overlayEl(), this.targetEl());
+			}
+		}
+	}
+	bindListeners() {
+		this.bindScrollListener();
+		this.bindDocumentClickListener();
+		this.bindDocumentResizeListener();
+		this.bindDocumentKeyboardListener();
+	}
+	unbindListeners() {
+		this.unbindScrollListener();
+		this.unbindDocumentClickListener();
+		this.unbindDocumentResizeListener();
+		this.unbindDocumentKeyboardListener();
+		this.unbindParentDragListener();
+	}
+	bindParentDragListener() {
+		if (!this.parentDragSubscription && this.$appendTo() !== "self" && this.targetEl) this.parentDragSubscription = this.overlayService.parentDragObservable.subscribe((container) => {
+			if (container.contains(this.targetEl())) this.hide(this.overlayEl(), true);
+		});
+	}
+	unbindParentDragListener() {
+		if (this.parentDragSubscription) {
+			this.parentDragSubscription.unsubscribe();
+			this.parentDragSubscription = null;
+		}
+	}
+	bindScrollListener() {
+		if (!this.scrollHandler) this.scrollHandler = new ConnectedOverlayScrollHandler(this.targetEl(), (event) => {
+			if (this.$listener() ? this.$listener()(event, {
+				type: "scroll",
+				mode: this.overlayMode(),
+				valid: true
+			}) : true) 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 node = getEventTarget(event, this.targetEl());
+			const isOutsideClicked = !(this.targetEl() && (this.targetEl().isSameNode(node) || !this.isOverlayClicked && this.targetEl().contains(node))) && !this.isOverlayContentClicked;
+			if (this.$listener() ? this.$listener()(event, {
+				type: "outside",
+				mode: this.overlayMode(),
+				valid: event.which !== 3 && isOutsideClicked
+			}) : isOutsideClicked) 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) => {
+			if (this.$listener() ? this.$listener()(event, {
+				type: "resize",
+				mode: this.overlayMode(),
+				valid: !isTouchDevice()
+			}) : !isTouchDevice()) this.hide(event, true);
+		});
+	}
+	unbindDocumentResizeListener() {
+		if (this.documentResizeListener) {
+			this.documentResizeListener();
+			this.documentResizeListener = null;
+		}
+	}
+	bindDocumentKeyboardListener() {
+		if (this.documentKeyboardListener) return;
+		this.documentKeyboardListener = this.renderer.listen(this.document.defaultView, "keydown", (event) => {
+			if (this.$overlayOptions().hideOnEscape === false || event.code !== "Escape") return;
+			if (this.$listener() ? this.$listener()(event, {
+				type: "keydown",
+				mode: this.overlayMode(),
+				valid: !isTouchDevice()
+			}) : !isTouchDevice()) this.hide(event, true);
+		});
+	}
+	unbindDocumentKeyboardListener() {
+		if (this.documentKeyboardListener) {
+			this.documentKeyboardListener();
+			this.documentKeyboardListener = null;
+		}
+	}
+	onDestroy() {
+		this.hide(this.overlayEl(), true);
+		if (this.overlayEl() && this.$appendTo() !== "self") {
+			this.renderer.appendChild(this.el.nativeElement, this.overlayEl());
+			ZIndexUtils.clear(this.overlayEl());
+		}
+		if (this.scrollHandler) {
+			this.scrollHandler.destroy();
+			this.scrollHandler = null;
+		}
+		this.unbindListeners();
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.3",
+		ngImport: i0,
+		type: Overlay,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.3",
+		type: Overlay,
+		isStandalone: true,
+		selector: "p-overlay",
+		inputs: {
+			hostName: {
+				classPropertyName: "hostName",
+				publicName: "hostName",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			visible: {
+				classPropertyName: "visible",
+				publicName: "visible",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			mode: {
+				classPropertyName: "mode",
+				publicName: "mode",
+				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
+			},
+			contentStyle: {
+				classPropertyName: "contentStyle",
+				publicName: "contentStyle",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			contentStyleClass: {
+				classPropertyName: "contentStyleClass",
+				publicName: "contentStyleClass",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			target: {
+				classPropertyName: "target",
+				publicName: "target",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			autoZIndex: {
+				classPropertyName: "autoZIndex",
+				publicName: "autoZIndex",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			baseZIndex: {
+				classPropertyName: "baseZIndex",
+				publicName: "baseZIndex",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			listener: {
+				classPropertyName: "listener",
+				publicName: "listener",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			responsive: {
+				classPropertyName: "responsive",
+				publicName: "responsive",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			options: {
+				classPropertyName: "options",
+				publicName: "options",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			appendTo: {
+				classPropertyName: "appendTo",
+				publicName: "appendTo",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			inline: {
+				classPropertyName: "inline",
+				publicName: "inline",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			motionOptions: {
+				classPropertyName: "motionOptions",
+				publicName: "motionOptions",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			hostAttrSelector: {
+				classPropertyName: "hostAttrSelector",
+				publicName: "hostAttrSelector",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: {
+			visible: "visibleChange",
+			onBeforeShow: "onBeforeShow",
+			onShow: "onShow",
+			onBeforeHide: "onBeforeHide",
+			onHide: "onHide",
+			onAnimationStart: "onAnimationStart",
+			onAnimationDone: "onAnimationDone",
+			onBeforeEnter: "onBeforeEnter",
+			onEnter: "onEnter",
+			onAfterEnter: "onAfterEnter",
+			onBeforeLeave: "onBeforeLeave",
+			onLeave: "onLeave",
+			onAfterLeave: "onAfterLeave"
+		},
+		providers: [
+			OverlayStyle,
+			{
+				provide: OVERLAY_INSTANCE,
+				useExisting: Overlay
+			},
+			{
+				provide: PARENT_INSTANCE,
+				useExisting: Overlay
+			}
+		],
+		queries: [{
+			propertyName: "contentTemplate",
+			first: true,
+			predicate: ["content"],
+			isSignal: true
+		}],
+		viewQueries: [{
+			propertyName: "overlayViewChild",
+			first: true,
+			predicate: ["overlay"],
+			descendants: true,
+			isSignal: true
+		}, {
+			propertyName: "contentViewChild",
+			first: true,
+			predicate: ["content"],
+			descendants: true,
+			isSignal: true
+		}],
+		usesInheritance: true,
+		hostDirectives: [{ directive: i1.Bind }],
+		ngImport: i0,
+		template: `
         @if (inline()) {
             <ng-content />
             <ng-container *ngTemplateOutlet="contentTemplate(); context: { $implicit: { mode: null } }" />
@@ -684,7 +674,7 @@ class Overlay extends BaseComponent {
                 <div #overlay [class]="cn(cx('root'), mergedStyleClass())" [style]="sx('root')" [pBind]="ptm('root')" (click)="onOverlayClick()">
                     <p-motion
                         [visible]="visible()"
-                        name="p-anchored-overlay"
+                        [name]="pcn('p-anchored-overlay')"
                         [appear]="true"
                         [options]="computedMotionOptions()"
                         (onBeforeEnter)="onOverlayBeforeEnter($event)"
@@ -702,16 +692,92 @@ class Overlay extends BaseComponent {
                 </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: "component", type: i2.Motion, selector: "p-motion", inputs: ["visible", "mountOnEnter", "unmountOnLeave", "name", "type", "safe", "disabled", "appear", "enter", "leave", "duration", "hideStrategy", "enterFromClass", "enterToClass", "enterActiveClass", "leaveFromClass", "leaveToClass", "leaveActiveClass", "options"], outputs: ["onBeforeEnter", "onEnter", "onAfterEnter", "onEnterCancelled", "onBeforeLeave", "onLeave", "onAfterLeave", "onLeaveCancelled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: Overlay, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'p-overlay',
-                    standalone: true,
-                    imports: [NgTemplateOutlet, SharedModule, Bind, MotionModule],
-                    hostDirectives: [Bind],
-                    template: `
+    `,
+		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: "component",
+				type: i2.Motion,
+				selector: "p-motion",
+				inputs: [
+					"visible",
+					"mountOnEnter",
+					"unmountOnLeave",
+					"name",
+					"type",
+					"safe",
+					"disabled",
+					"appear",
+					"enter",
+					"leave",
+					"duration",
+					"hideStrategy",
+					"enterFromClass",
+					"enterToClass",
+					"enterActiveClass",
+					"leaveFromClass",
+					"leaveToClass",
+					"leaveActiveClass",
+					"options"
+				],
+				outputs: [
+					"onBeforeEnter",
+					"onEnter",
+					"onAfterEnter",
+					"onEnterCancelled",
+					"onBeforeLeave",
+					"onLeave",
+					"onAfterLeave",
+					"onLeaveCancelled"
+				]
+			}
+		],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush,
+		encapsulation: i0.ViewEncapsulation.None
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.3",
+	ngImport: i0,
+	type: Overlay,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "p-overlay",
+			standalone: true,
+			imports: [
+				NgTemplateOutlet,
+				SharedModule,
+				Bind,
+				MotionModule
+			],
+			hostDirectives: [Bind],
+			template: `
         @if (inline()) {
             <ng-content />
             <ng-container *ngTemplateOutlet="contentTemplate(); context: { $implicit: { mode: null } }" />
@@ -720,7 +786,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
                 <div #overlay [class]="cn(cx('root'), mergedStyleClass())" [style]="sx('root')" [pBind]="ptm('root')" (click)="onOverlayClick()">
                     <p-motion
                         [visible]="visible()"
-                        name="p-anchored-overlay"
+                        [name]="pcn('p-anchored-overlay')"
                         [appear]="true"
                         [options]="computedMotionOptions()"
                         (onBeforeEnter)="onOverlayBeforeEnter($event)"
@@ -739,27 +805,268 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
             }
         }
     `,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    encapsulation: ViewEncapsulation.None,
-                    providers: [OverlayStyle, { provide: OVERLAY_INSTANCE, useExisting: Overlay }, { provide: PARENT_INSTANCE, useExisting: Overlay }]
-                }]
-        }], ctorParameters: () => [], propDecorators: { hostName: [{ type: i0.Input, args: [{ isSignal: true, alias: "hostName", required: false }] }], visible: [{ type: i0.Input, args: [{ isSignal: true, alias: "visible", required: false }] }, { type: i0.Output, args: ["visibleChange"] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], style: [{ type: i0.Input, args: [{ isSignal: true, alias: "style", required: false }] }], styleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "styleClass", required: false }] }], contentStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentStyle", required: false }] }], contentStyleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentStyleClass", required: false }] }], target: [{ type: i0.Input, args: [{ isSignal: true, alias: "target", required: false }] }], autoZIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoZIndex", required: false }] }], baseZIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "baseZIndex", required: false }] }], listener: [{ type: i0.Input, args: [{ isSignal: true, alias: "listener", required: false }] }], responsive: [{ type: i0.Input, args: [{ isSignal: true, alias: "responsive", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], appendTo: [{ type: i0.Input, args: [{ isSignal: true, alias: "appendTo", required: false }] }], inline: [{ type: i0.Input, args: [{ isSignal: true, alias: "inline", required: false }] }], motionOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "motionOptions", required: false }] }], onBeforeShow: [{ type: i0.Output, args: ["onBeforeShow"] }], onShow: [{ type: i0.Output, args: ["onShow"] }], onBeforeHide: [{ type: i0.Output, args: ["onBeforeHide"] }], onHide: [{ type: i0.Output, args: ["onHide"] }], onAnimationStart: [{ type: i0.Output, args: ["onAnimationStart"] }], onAnimationDone: [{ type: i0.Output, args: ["onAnimationDone"] }], onBeforeEnter: [{ type: i0.Output, args: ["onBeforeEnter"] }], onEnter: [{ type: i0.Output, args: ["onEnter"] }], onAfterEnter: [{ type: i0.Output, args: ["onAfterEnter"] }], onBeforeLeave: [{ type: i0.Output, args: ["onBeforeLeave"] }], onLeave: [{ type: i0.Output, args: ["onLeave"] }], onAfterLeave: [{ type: i0.Output, args: ["onAfterLeave"] }], overlayViewChild: [{ type: i0.ViewChild, args: ['overlay', { isSignal: true }] }], contentViewChild: [{ type: i0.ViewChild, args: ['content', { isSignal: true }] }], contentTemplate: [{ type: i0.ContentChild, args: ['content', { ...{ descendants: false }, isSignal: true }] }], hostAttrSelector: [{ type: i0.Input, args: [{ isSignal: true, alias: "hostAttrSelector", required: false }] }] } });
-class OverlayModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: OverlayModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.5", ngImport: i0, type: OverlayModule, imports: [Overlay, SharedModule], exports: [Overlay, SharedModule] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: OverlayModule, imports: [Overlay, SharedModule, SharedModule] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: OverlayModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [Overlay, SharedModule],
-                    exports: [Overlay, SharedModule]
-                }]
-        }] });
-
-/**
- * Generated bundle index. Do not edit.
- */
-
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			encapsulation: ViewEncapsulation.None,
+			providers: [
+				OverlayStyle,
+				{
+					provide: OVERLAY_INSTANCE,
+					useExisting: Overlay
+				},
+				{
+					provide: PARENT_INSTANCE,
+					useExisting: Overlay
+				}
+			]
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		hostName: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "hostName",
+				required: false
+			}]
+		}],
+		visible: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "visible",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["visibleChange"]
+		}],
+		mode: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "mode",
+				required: false
+			}]
+		}],
+		style: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "style",
+				required: false
+			}]
+		}],
+		styleClass: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "styleClass",
+				required: false
+			}]
+		}],
+		contentStyle: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "contentStyle",
+				required: false
+			}]
+		}],
+		contentStyleClass: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "contentStyleClass",
+				required: false
+			}]
+		}],
+		target: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "target",
+				required: false
+			}]
+		}],
+		autoZIndex: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "autoZIndex",
+				required: false
+			}]
+		}],
+		baseZIndex: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "baseZIndex",
+				required: false
+			}]
+		}],
+		listener: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "listener",
+				required: false
+			}]
+		}],
+		responsive: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "responsive",
+				required: false
+			}]
+		}],
+		options: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "options",
+				required: false
+			}]
+		}],
+		appendTo: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "appendTo",
+				required: false
+			}]
+		}],
+		inline: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "inline",
+				required: false
+			}]
+		}],
+		motionOptions: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "motionOptions",
+				required: false
+			}]
+		}],
+		onBeforeShow: [{
+			type: i0.Output,
+			args: ["onBeforeShow"]
+		}],
+		onShow: [{
+			type: i0.Output,
+			args: ["onShow"]
+		}],
+		onBeforeHide: [{
+			type: i0.Output,
+			args: ["onBeforeHide"]
+		}],
+		onHide: [{
+			type: i0.Output,
+			args: ["onHide"]
+		}],
+		onAnimationStart: [{
+			type: i0.Output,
+			args: ["onAnimationStart"]
+		}],
+		onAnimationDone: [{
+			type: i0.Output,
+			args: ["onAnimationDone"]
+		}],
+		onBeforeEnter: [{
+			type: i0.Output,
+			args: ["onBeforeEnter"]
+		}],
+		onEnter: [{
+			type: i0.Output,
+			args: ["onEnter"]
+		}],
+		onAfterEnter: [{
+			type: i0.Output,
+			args: ["onAfterEnter"]
+		}],
+		onBeforeLeave: [{
+			type: i0.Output,
+			args: ["onBeforeLeave"]
+		}],
+		onLeave: [{
+			type: i0.Output,
+			args: ["onLeave"]
+		}],
+		onAfterLeave: [{
+			type: i0.Output,
+			args: ["onAfterLeave"]
+		}],
+		overlayViewChild: [{
+			type: i0.ViewChild,
+			args: ["overlay", { isSignal: true }]
+		}],
+		contentViewChild: [{
+			type: i0.ViewChild,
+			args: ["content", { isSignal: true }]
+		}],
+		contentTemplate: [{
+			type: i0.ContentChild,
+			args: ["content", {
+				descendants: false,
+				isSignal: true
+			}]
+		}],
+		hostAttrSelector: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "hostAttrSelector",
+				required: false
+			}]
+		}]
+	}
+});
+var OverlayModule = class OverlayModule {
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.3",
+		ngImport: i0,
+		type: OverlayModule,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.NgModule
+	});
+	static ɵmod = i0.ɵɵngDeclareNgModule({
+		minVersion: "14.0.0",
+		version: "22.2.3",
+		ngImport: i0,
+		type: OverlayModule,
+		imports: [Overlay, SharedModule],
+		exports: [Overlay, SharedModule]
+	});
+	static ɵinj = i0.ɵɵngDeclareInjector({
+		minVersion: "12.0.0",
+		version: "22.2.3",
+		ngImport: i0,
+		type: OverlayModule,
+		imports: [
+			Overlay,
+			SharedModule,
+			SharedModule
+		]
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.3",
+	ngImport: i0,
+	type: OverlayModule,
+	decorators: [{
+		type: NgModule,
+		args: [{
+			imports: [Overlay, SharedModule],
+			exports: [Overlay, SharedModule]
+		}]
+	}]
+});
 export { Overlay, OverlayModule, OverlayStyle };
-//# sourceMappingURL=primeng-overlay.mjs.map
+