@wawjs/ngx-prime 22.0.0

package/fesm2022/wawjs-ngx-prime-overlay.mjs

@@ -0,0 +1,779 @@
+import * as i2 from '@angular/common';
+import { isPlatformBrowser, CommonModule } from '@angular/common';
+import * as i0 from '@angular/core';
+import { Injectable, InjectionToken, inject, NgZone, input, model, computed, output, viewChild, contentChild, contentChildren, effect, signal, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
+import { getTargetElement, focus, addClass, removeClass, appendChild, getOuterWidth, relativePosition, absolutePosition, isTouchDevice } from '@wawjs/css-prime-utils';
+import { OverlayService, PrimeTemplate, SharedModule } from '@wawjs/ngx-prime/api';
+import { BaseComponent, PARENT_INSTANCE } from '@wawjs/ngx-prime/basecomponent';
+import * as i1 from '@wawjs/ngx-prime/bind';
+import { Bind } from '@wawjs/ngx-prime/bind';
+import { ConnectedOverlayScrollHandler } from '@wawjs/ngx-prime/dom';
+import * as i3 from '@wawjs/ngx-prime/motion';
+import { MotionModule } from '@wawjs/ngx-prime/motion';
+import { ObjectUtils, ZIndexUtils } from '@wawjs/ngx-prime/utils';
+import { BaseStyle } from '@wawjs/ngx-prime/base';
+
+const inlineStyles = {
+    root: () => ({ position: 'absolute', top: '0' })
+};
+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 }) => [
+        'p-overlay p-component',
+        {
+            'p-overlay-modal p-overlay-mask p-overlay-mask-enter-active': instance.modal,
+            'p-overlay-center': instance.modal && instance.overlayResponsiveDirection === 'center',
+            'p-overlay-top': instance.modal && instance.overlayResponsiveDirection === 'top',
+            'p-overlay-top-start': instance.modal && instance.overlayResponsiveDirection === 'top-start',
+            'p-overlay-top-end': instance.modal && instance.overlayResponsiveDirection === 'top-end',
+            'p-overlay-bottom': instance.modal && instance.overlayResponsiveDirection === 'bottom',
+            'p-overlay-bottom-start': instance.modal && instance.overlayResponsiveDirection === 'bottom-start',
+            'p-overlay-bottom-end': instance.modal && instance.overlayResponsiveDirection === 'bottom-end',
+            'p-overlay-left': instance.modal && instance.overlayResponsiveDirection === 'left',
+            'p-overlay-left-start': instance.modal && instance.overlayResponsiveDirection === 'left-start',
+            'p-overlay-left-end': instance.modal && instance.overlayResponsiveDirection === 'left-end',
+            'p-overlay-right': instance.modal && instance.overlayResponsiveDirection === 'right',
+            'p-overlay-right-start': instance.modal && instance.overlayResponsiveDirection === 'right-start',
+            'p-overlay-right-end': instance.modal && instance.overlayResponsiveDirection === '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.2", ngImport: i0, type: OverlayStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: OverlayStyle });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: OverlayStyle, decorators: [{
+            type: Injectable
+        }] });
+
+const OVERLAY_INSTANCE = new InjectionToken('OVERLAY_INSTANCE');
+/**
+ * This API allows overlay components to be controlled from the ngx-prime. In this way, all overlay components in the application can have the same behavior.
+ * @group Components
+ */
+class Overlay extends BaseComponent {
+    overlayService = inject(OverlayService);
+    zone = inject(NgZone);
+    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
+     */
+    // Keep the established public names while preserving their option-merging getters.
+    /* eslint-disable @angular-eslint/no-input-rename */
+    _mode = input(undefined, { ...(ngDevMode ? { debugName: "_mode" } : /* istanbul ignore next */ {}), alias: 'mode' });
+    get mode() {
+        return this._mode() || this.overlayOptions?.mode;
+    }
+    /**
+     * The style property is an input that determines the style object for the component.
+     * @defaultValue null
+     * @group Props
+     */
+    _style = input(undefined, { ...(ngDevMode ? { debugName: "_style" } : /* istanbul ignore next */ {}), alias: 'style' });
+    get style() {
+        return ObjectUtils.merge(this._style(), this.modal ? this.overlayResponsiveOptions?.style : this.overlayOptions?.style);
+    }
+    /**
+     * The styleClass property is an input that determines the CSS class(es) for the component.
+     * @defaultValue null
+     * @group Props
+     */
+    _styleClass = input(undefined, { ...(ngDevMode ? { debugName: "_styleClass" } : /* istanbul ignore next */ {}), alias: 'styleClass' });
+    get styleClass() {
+        return ObjectUtils.merge(this._styleClass(), this.modal ? this.overlayResponsiveOptions?.styleClass : this.overlayOptions?.styleClass);
+    }
+    /**
+     * The contentStyle property is an input that determines the style object for the content of the component.
+     * @defaultValue null
+     * @group Props
+     */
+    _contentStyle = input(undefined, { ...(ngDevMode ? { debugName: "_contentStyle" } : /* istanbul ignore next */ {}), alias: 'contentStyle' });
+    get contentStyle() {
+        return ObjectUtils.merge(this._contentStyle(), this.modal ? this.overlayResponsiveOptions?.contentStyle : this.overlayOptions?.contentStyle);
+    }
+    /**
+     * The contentStyleClass property is an input that determines the CSS class(es) for the content of the component.
+     * @defaultValue null
+     * @group Props
+     */
+    _contentStyleClass = input(undefined, { ...(ngDevMode ? { debugName: "_contentStyleClass" } : /* istanbul ignore next */ {}), alias: 'contentStyleClass' });
+    get contentStyleClass() {
+        return ObjectUtils.merge(this._contentStyleClass(), this.modal ? this.overlayResponsiveOptions?.contentStyleClass : this.overlayOptions?.contentStyleClass);
+    }
+    /**
+     * The target property is an input that specifies the target element or selector for the component.
+     * @defaultValue null
+     * @group Props
+     */
+    _target = input(undefined, { ...(ngDevMode ? { debugName: "_target" } : /* istanbul ignore next */ {}), alias: 'target' });
+    get target() {
+        const value = this._target() || this.overlayOptions?.target;
+        return value === undefined ? '@prev' : value;
+    }
+    /**
+     * The autoZIndex determines whether to automatically manage layering. Its default value is 'false'.
+     * @defaultValue false
+     * @group Props
+     */
+    _autoZIndex = input(undefined, { ...(ngDevMode ? { debugName: "_autoZIndex" } : /* istanbul ignore next */ {}), alias: 'autoZIndex' });
+    get autoZIndex() {
+        const value = this._autoZIndex() || this.overlayOptions?.autoZIndex;
+        return value === undefined ? true : value;
+    }
+    /**
+     * The baseZIndex is base zIndex value to use in layering.
+     * @defaultValue null
+     * @group Props
+     */
+    _baseZIndex = input(undefined, { ...(ngDevMode ? { debugName: "_baseZIndex" } : /* istanbul ignore next */ {}), alias: 'baseZIndex' });
+    get baseZIndex() {
+        const value = this._baseZIndex() || this.overlayOptions?.baseZIndex;
+        return value === undefined ? 0 : value;
+    }
+    /**
+     * Transition options of the show or hide animation.
+     * @defaultValue .12s cubic-bezier(0, 0, 0.2, 1)
+     * @group Props
+     * @deprecated since v21.0.0. Use `motionOptions` instead.
+     */
+    _showTransitionOptions = input(undefined, { ...(ngDevMode ? { debugName: "_showTransitionOptions" } : /* istanbul ignore next */ {}), alias: 'showTransitionOptions' });
+    get showTransitionOptions() {
+        const value = this._showTransitionOptions() || this.overlayOptions?.showTransitionOptions;
+        return value === undefined ? '.12s cubic-bezier(0, 0, 0.2, 1)' : value;
+    }
+    /**
+     * The hideTransitionOptions property is an input that determines the CSS transition options for hiding the component.
+     * @defaultValue .1s linear
+     * @group Props
+     * @deprecated since v21.0.0. Use `motionOptions` instead.
+     */
+    _hideTransitionOptions = input(undefined, { ...(ngDevMode ? { debugName: "_hideTransitionOptions" } : /* istanbul ignore next */ {}), alias: 'hideTransitionOptions' });
+    get hideTransitionOptions() {
+        const value = this._hideTransitionOptions() || this.overlayOptions?.hideTransitionOptions;
+        return value === undefined ? '.1s linear' : value;
+    }
+    /**
+     * The listener property is an input that specifies the listener object for the component.
+     * @defaultValue null
+     * @group Props
+     */
+    _listener = input(undefined, { ...(ngDevMode ? { debugName: "_listener" } : /* istanbul ignore next */ {}), alias: 'listener' });
+    get listener() {
+        return this._listener() || this.overlayOptions?.listener;
+    }
+    /**
+     * 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(undefined, { ...(ngDevMode ? { debugName: "_responsive" } : /* istanbul ignore next */ {}), alias: 'responsive' });
+    get responsive() {
+        return this._responsive() || this.overlayOptions?.responsive;
+    }
+    /**
+     * The options property is an input that specifies the overlay options for the component.
+     * @defaultValue null
+     * @group Props
+     */
+    /* eslint-enable @angular-eslint/no-input-rename */
+    options = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ 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 */ []));
+    computedMotionOptions = computed(() => ({
+        ...this.ptm('motion'),
+        ...(this.motionOptions() || this.overlayOptions?.motionOptions)
+    }), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "computedMotionOptions" }] : /* istanbul ignore next */ []));
+    /**
+     * This EventEmitter is used to notify changes in the visibility state of a component.
+     * @param {Boolean} boolean - Value of visibility as boolean.
+     * @group Emits
+     */
+    /**
+     * 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 });
+    templates = contentChildren(PrimeTemplate, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "templates" }] : /* istanbul ignore next */ []));
+    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 */ []));
+    _contentTemplate;
+    modalVisible = false;
+    isOverlayClicked = false;
+    isOverlayContentClicked = false;
+    scrollHandler;
+    documentClickListener;
+    documentResizeListener;
+    _componentStyle = inject(OverlayStyle);
+    bindDirectiveInstance = inject(Bind, { self: true });
+    documentKeyboardListener;
+    parentDragSubscription = null;
+    window;
+    constructor() {
+        super();
+        effect(() => {
+            if (this.visible() && !this.modalVisible) {
+                this.modalVisible = true;
+            }
+        });
+    }
+    transformOptions = {
+        default: 'scaleY(0.8)',
+        center: 'scale(0.7)',
+        top: 'translate3d(0px, -100%, 0px)',
+        'top-start': 'translate3d(0px, -100%, 0px)',
+        'top-end': 'translate3d(0px, -100%, 0px)',
+        bottom: 'translate3d(0px, 100%, 0px)',
+        'bottom-start': 'translate3d(0px, 100%, 0px)',
+        'bottom-end': 'translate3d(0px, 100%, 0px)',
+        left: 'translate3d(-100%, 0px, 0px)',
+        'left-start': 'translate3d(-100%, 0px, 0px)',
+        'left-end': 'translate3d(-100%, 0px, 0px)',
+        right: 'translate3d(100%, 0px, 0px)',
+        'right-start': 'translate3d(100%, 0px, 0px)',
+        'right-end': 'translate3d(100%, 0px, 0px)'
+    };
+    get modal() {
+        if (isPlatformBrowser(this.platformId)) {
+            return this.mode === 'modal' || (this.overlayResponsiveOptions && this.document.defaultView?.matchMedia(this.overlayResponsiveOptions.media?.replace('@media', '') || `(max-width: ${this.overlayResponsiveOptions.breakpoint})`).matches);
+        }
+    }
+    get overlayMode() {
+        return this.mode || (this.modal ? 'modal' : 'overlay');
+    }
+    get overlayOptions() {
+        return { ...this.config?.overlayOptions, ...this.options() }; // TODO: Improve performance
+    }
+    get overlayResponsiveOptions() {
+        return { ...this.overlayOptions?.responsive, ...this.responsive }; // TODO: Improve performance
+    }
+    get overlayResponsiveDirection() {
+        return this.overlayResponsiveOptions?.direction || 'center';
+    }
+    get overlayEl() {
+        return this.overlayViewChild()?.nativeElement;
+    }
+    get contentEl() {
+        return this.contentViewChild()?.nativeElement;
+    }
+    get targetEl() {
+        return getTargetElement(this.target, this.el?.nativeElement);
+    }
+    onAfterContentInit() {
+        this.templates()?.forEach((item) => {
+            switch (item.getType()) {
+                case 'content':
+                    this._contentTemplate = item.template;
+                    break;
+                // TODO: new template types may be added.
+                default:
+                    this._contentTemplate = item.template;
+                    break;
+            }
+        });
+    }
+    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 = false;
+        this.cd.markForCheck();
+        this.handleEvents('onAfterLeave', event);
+    }
+    handleEvents(name, params) {
+        this[name].emit(params);
+        const options = this.options();
+        options && options[name] && options[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.zone.runOutsideAngular(() => {
+            this.documentKeyboardListener = this.renderer.listen(this.document.defaultView, 'keydown', (event) => {
+                if (this.overlayOptions.hideOnEscape === false || event.code !== 'Escape') {
+                    return;
+                }
+                const valid = this.listener ? this.listener(event, { type: 'keydown', mode: this.overlayMode, valid: !isTouchDevice() }) : !isTouchDevice();
+                if (valid) {
+                    this.zone.run(() => {
+                        this.hide(event, true);
+                    });
+                }
+            });
+        });
+    }
+    unbindDocumentKeyboardListener() {
+        if (this.documentKeyboardListener) {
+            this.documentKeyboardListener();
+            this.documentKeyboardListener = null;
+        }
+    }
+    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.2", ngImport: i0, type: Overlay, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", 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 }, _showTransitionOptions: { classPropertyName: "_showTransitionOptions", publicName: "showTransitionOptions", isSignal: true, isRequired: false, transformFunction: null }, _hideTransitionOptions: { classPropertyName: "_hideTransitionOptions", publicName: "hideTransitionOptions", 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 }, { propertyName: "templates", predicate: PrimeTemplate, 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-content>
+            <ng-container *ngTemplateOutlet="contentTemplate() || _contentTemplate; context: { $implicit: { mode: null } }"></ng-container>
+        } @else {
+            @if (modalVisible) {
+                <div #overlay [class]="cn(cx('root'), styleClass)" [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'), contentStyleClass)" [pBind]="ptm('content')" (click)="onOverlayContentClick($event)">
+                            <ng-content></ng-content>
+                            <ng-container *ngTemplateOutlet="contentTemplate() || _contentTemplate; context: { $implicit: { mode: overlayMode } }"></ng-container>
+                        </div>
+                    </p-motion>
+                </div>
+            }
+        }
+    `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.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: i3.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.2", ngImport: i0, type: Overlay, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'p-overlay',
+                    standalone: true,
+                    imports: [CommonModule, SharedModule, Bind, MotionModule],
+                    hostDirectives: [Bind],
+                    template: `
+        @if (inline()) {
+            <ng-content></ng-content>
+            <ng-container *ngTemplateOutlet="contentTemplate() || _contentTemplate; context: { $implicit: { mode: null } }"></ng-container>
+        } @else {
+            @if (modalVisible) {
+                <div #overlay [class]="cn(cx('root'), styleClass)" [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'), contentStyleClass)" [pBind]="ptm('content')" (click)="onOverlayContentClick($event)">
+                            <ng-content></ng-content>
+                            <ng-container *ngTemplateOutlet="contentTemplate() || _contentTemplate; context: { $implicit: { mode: overlayMode } }"></ng-container>
+                        </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 }] }], _showTransitionOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTransitionOptions", required: false }] }], _hideTransitionOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideTransitionOptions", 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 }] }], templates: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => PrimeTemplate), { 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.2", ngImport: i0, type: OverlayModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.2", ngImport: i0, type: OverlayModule, imports: [Overlay, SharedModule], exports: [Overlay, SharedModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: OverlayModule, imports: [Overlay, SharedModule, SharedModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: OverlayModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [Overlay, SharedModule],
+                    exports: [Overlay, SharedModule]
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { Overlay, OverlayModule, OverlayStyle };
+//# sourceMappingURL=wawjs-ngx-prime-overlay.mjs.map