primeng/fesm2022/primeng-overlay.mjs

PrimeNG is a premium UI library for Angular featuring a rich set of 90+ components, a theme designer, various theme alternatives such as Material, Bootstrap, Tailwind, premium templates and professional support. In addition, it integrates with PrimeBlock,

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';

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()
        };
    }
};
const style = /*css*/ `
.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;
    will-change: transform;
}

/* Github Issue #18560 */
.p-component-overlay.p-component {
    position: relative;
}

.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;
}

.p-overlay-content ~ .p-overlay-content {
    display: none;
}
`;
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'
};
class OverlayStyle extends BaseStyle {
    name = 'overlay';
    style = style;
    classes = classes;
    inlineStyles = inlineStyles;
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: OverlayStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: OverlayStyle });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", 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 {AnimationEvent} event - Animation event.
     * @group Emits
     * @deprecated since v21.0.0. Use onOverlayBeforeEnter and onOverlayBeforeLeave instead.
     */
    onAnimationStart = output();
    /**
     * Callback to invoke when the animation is done.
     * @param {AnimationEvent} event - Animation event.
     * @group Emits
     * @deprecated since v21.0.0. Use onOverlayAfterEnter and onOverlayAfterLeave 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(() => {
        return { ...this.config?.overlayOptions, ...this.options() };
    }, /* @ts-ignore */
    ...(ngDevMode ? [{ debugName: "$overlayOptions" }] : /* istanbul ignore next */ []));
    $overlayResponsiveOptions = computed(() => {
        return { ...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(() => {
        return {
            ...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);
            }
        });
    }
    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() });
        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');
        }
    }
    onVisibleChange(visible) {
        this.visible.set(visible);
    }
    onOverlayClick() {
        this.isOverlayClicked = true;
    }
    onOverlayContentClick(event) {
        this.overlayService.add({
            originalEvent: event,
            target: this.targetEl()
        });
        this.isOverlayContentClicked = true;
    }
    container = signal(undefined, /* @ts-ignore */
    ...(ngDevMode ? [{ debugName: "container" }] : /* istanbul ignore next */ []));
    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);
        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();
        opts && opts[name] && opts[name](params);
        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;
                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.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.0.6", ngImport: i0, type: Overlay, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", 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 } }" />
        } @else {
            @if (modalVisible()) {
                <div #overlay [class]="cn(cx('root'), mergedStyleClass())" [style]="sx('root')" [pBind]="ptm('root')" (click)="onOverlayClick()">
                    <p-motion
                        [visible]="visible()"
                        name="p-anchored-overlay"
                        [appear]="true"
                        [options]="computedMotionOptions()"
                        (onBeforeEnter)="onOverlayBeforeEnter($event)"
                        (onEnter)="onOverlayEnter($event)"
                        (onAfterEnter)="onOverlayAfterEnter($event)"
                        (onBeforeLeave)="onOverlayBeforeLeave($event)"
                        (onLeave)="onOverlayLeave($event)"
                        (onAfterLeave)="onOverlayAfterLeave($event)"
                    >
                        <div #content [class]="cn(cx('content'), mergedContentStyleClass())" [style]="sx('content')" [pBind]="ptm('content')" (click)="onOverlayContentClick($event)">
                            <ng-content />
                            <ng-container *ngTemplateOutlet="contentTemplate(); context: { $implicit: { mode: overlayMode() } }" />
                        </div>
                    </p-motion>
                </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.0.6", 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 } }" />
        } @else {
            @if (modalVisible()) {
                <div #overlay [class]="cn(cx('root'), mergedStyleClass())" [style]="sx('root')" [pBind]="ptm('root')" (click)="onOverlayClick()">
                    <p-motion
                        [visible]="visible()"
                        name="p-anchored-overlay"
                        [appear]="true"
                        [options]="computedMotionOptions()"
                        (onBeforeEnter)="onOverlayBeforeEnter($event)"
                        (onEnter)="onOverlayEnter($event)"
                        (onAfterEnter)="onOverlayAfterEnter($event)"
                        (onBeforeLeave)="onOverlayBeforeLeave($event)"
                        (onLeave)="onOverlayLeave($event)"
                        (onAfterLeave)="onOverlayAfterLeave($event)"
                    >
                        <div #content [class]="cn(cx('content'), mergedContentStyleClass())" [style]="sx('content')" [pBind]="ptm('content')" (click)="onOverlayContentClick($event)">
                            <ng-content />
                            <ng-container *ngTemplateOutlet="contentTemplate(); context: { $implicit: { mode: overlayMode() } }" />
                        </div>
                    </p-motion>
                </div>
            }
        }
    `,
                    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.0.6", ngImport: i0, type: OverlayModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.6", ngImport: i0, type: OverlayModule, imports: [Overlay, SharedModule], exports: [Overlay, SharedModule] });
    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: OverlayModule, imports: [Overlay, SharedModule, SharedModule] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: OverlayModule, decorators: [{
            type: NgModule,
            args: [{
                    imports: [Overlay, SharedModule],
                    exports: [Overlay, SharedModule]
                }]
        }] });

/**
 * Generated bundle index. Do not edit.
 */

export { Overlay, OverlayModule, OverlayStyle };
//# sourceMappingURL=primeng-overlay.mjs.map