primenglab 22.0.0-beta.1

package/fesm2022/primenglab-overlay.mjs

@@ -0,0 +1,751 @@
+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 'primenglab/api';
+import { BaseComponent, PARENT_INSTANCE } from 'primenglab/basecomponent';
+import * as i1 from 'primenglab/bind';
+import { Bind } from 'primenglab/bind';
+import { ConnectedOverlayScrollHandler } from 'primenglab/dom';
+import * as i2 from 'primenglab/motion';
+import { MotionModule } from 'primenglab/motion';
+import { ZIndexUtils } from 'primenglab/utils';
+import { BaseStyle } from 'primenglab/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.3", ngImport: i0, type: OverlayStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: OverlayStyle });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", 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.3", ngImport: i0, type: Overlay, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.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 } }" />
+        } @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.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 } }" />
+        } @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.3", ngImport: i0, type: OverlayModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.3", ngImport: i0, type: OverlayModule, imports: [Overlay, SharedModule], exports: [Overlay, SharedModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: OverlayModule, imports: [Overlay, SharedModule, SharedModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", 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=primenglab-overlay.mjs.map