@gravionlabs/helix-core 22.1.1 → 22.1.3

package/fesm2022/gravionlabs-helix-core-overlay.mjs

@@ -1,23 +1,23 @@
-import * as i3 from '@angular/common';
-import { isPlatformBrowser, CommonModule } from '@angular/common';
-import * as i0 from '@angular/core';
-import { Injectable, InjectionToken, inject, input, model, booleanAttribute, numberAttribute, 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 '@gravionlabs/helix-core/uix/utils';
-import * as i1 from '@gravionlabs/helix-core/api';
-import { HelixTemplate, SharedModule } from '@gravionlabs/helix-core/api';
-import { BaseComponent, PARENT_INSTANCE } from '@gravionlabs/helix-core/basecomponent';
-import * as i2 from '@gravionlabs/helix-core/bind';
-import { Bind } from '@gravionlabs/helix-core/bind';
-import { ConnectedOverlayScrollHandler } from '@gravionlabs/helix-core/dom';
-import * as i4 from '@gravionlabs/helix-core/motion';
-import { MotionModule } from '@gravionlabs/helix-core/motion';
-import { ZIndexUtils } from '@gravionlabs/helix-core/utils';
-import { BaseStyle } from '@gravionlabs/helix-core/base';
-
-const inlineStyles = {
-    root: () => ({ position: 'absolute', top: '0' })
-};
-const style = /*css*/ `
+import * as i3 from "@angular/common";
+import { CommonModule, isPlatformBrowser } from "@angular/common";
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, Injectable, InjectionToken, NgModule, ViewEncapsulation, booleanAttribute, computed, contentChild, contentChildren, effect, inject, input, model, numberAttribute, output, signal, viewChild } from "@angular/core";
+import { absolutePosition, addClass, appendChild, focus, getOuterWidth, getTargetElement, isTouchDevice, relativePosition, removeClass } from "@gravionlabs/helix-core/uix/utils";
+import * as i1 from "@gravionlabs/helix-core/api";
+import { HelixTemplate, SharedModule } from "@gravionlabs/helix-core/api";
+import { BaseComponent, PARENT_INSTANCE } from "@gravionlabs/helix-core/basecomponent";
+import * as i2 from "@gravionlabs/helix-core/bind";
+import { Bind } from "@gravionlabs/helix-core/bind";
+import { ConnectedOverlayScrollHandler } from "@gravionlabs/helix-core/dom";
+import * as i4 from "@gravionlabs/helix-core/motion";
+import { MotionModule } from "@gravionlabs/helix-core/motion";
+import { ZIndexUtils } from "@gravionlabs/helix-core/utils";
+import { BaseStyle } from "@gravionlabs/helix-core/base";
+const inlineStyles = { root: () => ({
+	position: "absolute",
+	top: "0"
+}) };
+const style = `
 .h-overlay-modal {
     display: flex;
     align-items: center;
@@ -102,585 +102,969 @@ const style = /*css*/ `
 }
 `;
 const classes = {
-    host: 'h-overlay-host',
-    root: ({ instance }) => [
-        'h-overlay h-component',
-        {
-            'h-overlay-modal h-overlay-mask h-overlay-mask-enter-active': instance.modal,
-            'h-overlay-center': instance.modal && instance.overlayResponsiveDirection === 'center',
-            'h-overlay-top': instance.modal && instance.overlayResponsiveDirection === 'top',
-            'h-overlay-top-start': instance.modal && instance.overlayResponsiveDirection === 'top-start',
-            'h-overlay-top-end': instance.modal && instance.overlayResponsiveDirection === 'top-end',
-            'h-overlay-bottom': instance.modal && instance.overlayResponsiveDirection === 'bottom',
-            'h-overlay-bottom-start': instance.modal && instance.overlayResponsiveDirection === 'bottom-start',
-            'h-overlay-bottom-end': instance.modal && instance.overlayResponsiveDirection === 'bottom-end',
-            'h-overlay-left': instance.modal && instance.overlayResponsiveDirection === 'left',
-            'h-overlay-left-start': instance.modal && instance.overlayResponsiveDirection === 'left-start',
-            'h-overlay-left-end': instance.modal && instance.overlayResponsiveDirection === 'left-end',
-            'h-overlay-right': instance.modal && instance.overlayResponsiveDirection === 'right',
-            'h-overlay-right-start': instance.modal && instance.overlayResponsiveDirection === 'right-start',
-            'h-overlay-right-end': instance.modal && instance.overlayResponsiveDirection === 'right-end'
-        }
-    ],
-    content: 'h-overlay-content'
+	host: "h-overlay-host",
+	root: ({ instance }) => ["h-overlay h-component", {
+		"h-overlay-modal h-overlay-mask h-overlay-mask-enter-active": instance.modal,
+		"h-overlay-center": instance.modal && instance.overlayResponsiveDirection === "center",
+		"h-overlay-top": instance.modal && instance.overlayResponsiveDirection === "top",
+		"h-overlay-top-start": instance.modal && instance.overlayResponsiveDirection === "top-start",
+		"h-overlay-top-end": instance.modal && instance.overlayResponsiveDirection === "top-end",
+		"h-overlay-bottom": instance.modal && instance.overlayResponsiveDirection === "bottom",
+		"h-overlay-bottom-start": instance.modal && instance.overlayResponsiveDirection === "bottom-start",
+		"h-overlay-bottom-end": instance.modal && instance.overlayResponsiveDirection === "bottom-end",
+		"h-overlay-left": instance.modal && instance.overlayResponsiveDirection === "left",
+		"h-overlay-left-start": instance.modal && instance.overlayResponsiveDirection === "left-start",
+		"h-overlay-left-end": instance.modal && instance.overlayResponsiveDirection === "left-end",
+		"h-overlay-right": instance.modal && instance.overlayResponsiveDirection === "right",
+		"h-overlay-right-start": instance.modal && instance.overlayResponsiveDirection === "right-start",
+		"h-overlay-right-end": instance.modal && instance.overlayResponsiveDirection === "right-end"
+	}],
+	content: "h-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.6", ngImport: i0, type: OverlayStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: OverlayStyle });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.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 Helix configuration. In this way, all overlay components in the application can have the same behavior.
- * @group Components
- */
-class Overlay extends BaseComponent {
-    overlayService;
-    zone;
-    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 ? [{ 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(undefined, /* @ts-ignore */
-    ...(ngDevMode ? [{ 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 ? [{ 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(undefined, /* @ts-ignore */
-    ...(ngDevMode ? [{ 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 ? [{ 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(undefined, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "target" }] : /* istanbul ignore next */ []));
-    /**
-     * The autoZIndex determines whether to automatically manage layering. Its default value is 'false'.
-     * @defaultValue false
-     * @group Props
-     */
-    autoZIndex = input(true, { ...(ngDevMode ? { debugName: "autoZIndex" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-    /**
-     * The baseZIndex is base zIndex value to use in layering.
-     * @defaultValue null
-     * @group Props
-     */
-    baseZIndex = input(0, { ...(ngDevMode ? { debugName: "baseZIndex" } : /* istanbul ignore next */ {}), transform: numberAttribute });
-    /**
-     * 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('.12s cubic-bezier(0, 0, 0.2, 1)', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "showTransitionOptions" }] : /* istanbul ignore next */ []));
-    /**
-     * 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('.1s linear', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "hideTransitionOptions" }] : /* istanbul ignore next */ []));
-    /**
-     * The listener property is an input that specifies the listener object for the component.
-     * @defaultValue null
-     * @group Props
-     */
-    listener = input(undefined, /* @ts-ignore */
-    ...(ngDevMode ? [{ 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(undefined, /* @ts-ignore */
-    ...(ngDevMode ? [{ 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(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(() => {
-        return {
-            ...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(HelixTemplate, /* @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;
-    transformOptions = {
-        default: 'scaleY(0.8)',
-        center: 'scale(0.7)',
-        top: 'translate3d(0px, -100%, 0px)',
-        'top-start': 'translate3d(0px, -100%, 0px)',
-        'top-end': 'translate3d(0px, -100%, 0px)',
-        bottom: 'translate3d(0px, 100%, 0px)',
-        'bottom-start': 'translate3d(0px, 100%, 0px)',
-        'bottom-end': 'translate3d(0px, 100%, 0px)',
-        left: 'translate3d(-100%, 0px, 0px)',
-        'left-start': 'translate3d(-100%, 0px, 0px)',
-        'left-end': 'translate3d(-100%, 0px, 0px)',
-        right: 'translate3d(100%, 0px, 0px)',
-        'right-start': 'translate3d(100%, 0px, 0px)',
-        'right-end': 'translate3d(100%, 0px, 0px)'
-    };
-    get modal() {
-        if (isPlatformBrowser(this.platformId)) {
-            return this.mode() === 'modal' || (this.overlayResponsiveOptions && this.document.defaultView?.matchMedia(this.overlayResponsiveOptions.media?.replace('@media', '') || `(max-width: ${this.overlayResponsiveOptions.breakpoint})`).matches);
-        }
-    }
-    get overlayMode() {
-        return this.mode() || (this.modal ? 'modal' : 'overlay');
-    }
-    get overlayOptions() {
-        return { ...this.config?.overlayOptions, ...this.options() }; // TODO: Improve performance
-    }
-    get overlayResponsiveOptions() {
-        return { ...this.overlayOptions?.responsive, ...this.responsive() }; // TODO: Improve performance
-    }
-    get overlayResponsiveDirection() {
-        return this.overlayResponsiveOptions?.direction || 'center';
-    }
-    get overlayEl() {
-        return this.overlayViewChild()?.nativeElement;
-    }
-    get contentEl() {
-        return this.contentViewChild()?.nativeElement;
-    }
-    get targetEl() {
-        return getTargetElement(this.target(), this.el?.nativeElement);
-    }
-    constructor(overlayService, zone) {
-        super();
-        this.overlayService = overlayService;
-        this.zone = zone;
-        effect(() => {
-            if (this.visible() && !this.modalVisible) {
-                this.modalVisible = true;
-            }
-        });
-    }
-    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, 'h-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, 'h-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);
-        this.options() && this.options()[name] && this.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.6", ngImport: i0, type: Overlay, deps: [{ token: i1.OverlayService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: Overlay, isStandalone: true, selector: "h-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: HelixTemplate, 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: i2.Bind }], ngImport: i0, template: "@if (inline()) {\n  <ng-content></ng-content>\n  <ng-container *ngTemplateOutlet=\"contentTemplate() || _contentTemplate; context: { $implicit: { mode: null } }\"></ng-container>\n} @else {\n  @if (modalVisible) {\n    <div #overlay [class]=\"cn(cx('root'), styleClass)\" [style]=\"sx('root')\" [hBind]=\"ptm('root')\" (click)=\"onOverlayClick()\">\n      <h-motion\n        [visible]=\"visible\"\n        name=\"h-anchored-overlay\"\n        [appear]=\"true\"\n        [options]=\"computedMotionOptions()\"\n        (onBeforeEnter)=\"onOverlayBeforeEnter($event)\"\n        (onEnter)=\"onOverlayEnter($event)\"\n        (onAfterEnter)=\"onOverlayAfterEnter($event)\"\n        (onBeforeLeave)=\"onOverlayBeforeLeave($event)\"\n        (onLeave)=\"onOverlayLeave($event)\"\n        (onAfterLeave)=\"onOverlayAfterLeave($event)\"\n        >\n        <div #content [class]=\"cn(cx('content'), contentStyleClass)\" [hBind]=\"ptm('content')\" (click)=\"onOverlayContentClick($event)\">\n          <ng-content></ng-content>\n          <ng-container *ngTemplateOutlet=\"contentTemplate() || _contentTemplate; context: { $implicit: { mode: overlayMode } }\"></ng-container>\n        </div>\n      </h-motion>\n    </div>\n  }\n}\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: SharedModule }, { kind: "directive", type: Bind, selector: "[hBind]", inputs: ["hBind"] }, { kind: "ngmodule", type: MotionModule }, { kind: "component", type: i4.Motion, selector: "h-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.6", ngImport: i0, type: Overlay, decorators: [{
-            type: Component,
-            args: [{ selector: 'h-overlay', standalone: true, imports: [CommonModule, SharedModule, Bind, MotionModule], hostDirectives: [Bind], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [OverlayStyle, { provide: OVERLAY_INSTANCE, useExisting: Overlay }, { provide: PARENT_INSTANCE, useExisting: Overlay }], template: "@if (inline()) {\n  <ng-content></ng-content>\n  <ng-container *ngTemplateOutlet=\"contentTemplate() || _contentTemplate; context: { $implicit: { mode: null } }\"></ng-container>\n} @else {\n  @if (modalVisible) {\n    <div #overlay [class]=\"cn(cx('root'), styleClass)\" [style]=\"sx('root')\" [hBind]=\"ptm('root')\" (click)=\"onOverlayClick()\">\n      <h-motion\n        [visible]=\"visible\"\n        name=\"h-anchored-overlay\"\n        [appear]=\"true\"\n        [options]=\"computedMotionOptions()\"\n        (onBeforeEnter)=\"onOverlayBeforeEnter($event)\"\n        (onEnter)=\"onOverlayEnter($event)\"\n        (onAfterEnter)=\"onOverlayAfterEnter($event)\"\n        (onBeforeLeave)=\"onOverlayBeforeLeave($event)\"\n        (onLeave)=\"onOverlayLeave($event)\"\n        (onAfterLeave)=\"onOverlayAfterLeave($event)\"\n        >\n        <div #content [class]=\"cn(cx('content'), contentStyleClass)\" [hBind]=\"ptm('content')\" (click)=\"onOverlayContentClick($event)\">\n          <ng-content></ng-content>\n          <ng-container *ngTemplateOutlet=\"contentTemplate() || _contentTemplate; context: { $implicit: { mode: overlayMode } }\"></ng-container>\n        </div>\n      </h-motion>\n    </div>\n  }\n}\n" }]
-        }], ctorParameters: () => [{ type: i1.OverlayService }, { type: i0.NgZone }], 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(() => HelixTemplate), { 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.6", ngImport: i0, type: OverlayModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.6", ngImport: i0, type: OverlayModule, imports: [Overlay, SharedModule], exports: [Overlay, SharedModule] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: OverlayModule, imports: [Overlay, SharedModule, SharedModule] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: OverlayModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [Overlay, SharedModule],
-                    exports: [Overlay, SharedModule]
-                }]
-        }] });
-
-/**
- * Generated bundle index. Do not edit.
- */
-
+var OverlayStyle = class OverlayStyle extends BaseStyle {
+	name = "overlay";
+	style = style;
+	classes = classes;
+	inlineStyles = inlineStyles;
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: OverlayStyle,
+		deps: null,
+		target: i0.ɵɵFactoryTarget.Injectable
+	});
+	static ɵprov = i0.ɵɵngDeclareInjectable({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: OverlayStyle
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: OverlayStyle,
+	decorators: [{ type: Injectable }]
+});
+const OVERLAY_INSTANCE = new InjectionToken("OVERLAY_INSTANCE");
+var Overlay = class Overlay extends BaseComponent {
+	overlayService;
+	zone;
+	componentName = "Overlay";
+	$pcOverlay = inject(OVERLAY_INSTANCE, {
+		optional: true,
+		skipSelf: true
+	}) ?? void 0;
+	hostName = input("", ...ngDevMode ? [{ debugName: "hostName" }] : 	/* istanbul ignore next */ []);
+	visible = model(false, ...ngDevMode ? [{ debugName: "visible" }] : 	/* istanbul ignore next */ []);
+	mode = input("", ...ngDevMode ? [{ debugName: "mode" }] : 	/* istanbul ignore next */ []);
+	style = input(void 0, ...ngDevMode ? [{ debugName: "style" }] : 	/* istanbul ignore next */ []);
+	styleClass = input("", ...ngDevMode ? [{ debugName: "styleClass" }] : 	/* istanbul ignore next */ []);
+	contentStyle = input(void 0, ...ngDevMode ? [{ debugName: "contentStyle" }] : 	/* istanbul ignore next */ []);
+	contentStyleClass = input("", ...ngDevMode ? [{ debugName: "contentStyleClass" }] : 	/* istanbul ignore next */ []);
+	target = input(void 0, ...ngDevMode ? [{ debugName: "target" }] : 	/* istanbul ignore next */ []);
+	autoZIndex = input(true, {
+		...ngDevMode ? { debugName: "autoZIndex" } : 		/* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	baseZIndex = input(0, {
+		...ngDevMode ? { debugName: "baseZIndex" } : 		/* istanbul ignore next */ {},
+		transform: numberAttribute
+	});
+	showTransitionOptions = input(".12s cubic-bezier(0, 0, 0.2, 1)", ...ngDevMode ? [{ debugName: "showTransitionOptions" }] : 	/* istanbul ignore next */ []);
+	hideTransitionOptions = input(".1s linear", ...ngDevMode ? [{ debugName: "hideTransitionOptions" }] : 	/* istanbul ignore next */ []);
+	listener = input(void 0, ...ngDevMode ? [{ debugName: "listener" }] : 	/* istanbul ignore next */ []);
+	responsive = input(void 0, ...ngDevMode ? [{ debugName: "responsive" }] : 	/* istanbul ignore next */ []);
+	options = input(void 0, ...ngDevMode ? [{ debugName: "options" }] : 	/* istanbul ignore next */ []);
+	appendTo = input(void 0, ...ngDevMode ? [{ debugName: "appendTo" }] : 	/* istanbul ignore next */ []);
+	inline = input(false, ...ngDevMode ? [{ debugName: "inline" }] : 	/* istanbul ignore next */ []);
+	motionOptions = input(void 0, ...ngDevMode ? [{ debugName: "motionOptions" }] : 	/* istanbul ignore next */ []);
+	computedMotionOptions = computed(() => {
+		return {
+			...this.ptm("motion"),
+			...this.motionOptions() || this.overlayOptions?.motionOptions
+		};
+	}, ...ngDevMode ? [{ debugName: "computedMotionOptions" }] : 	/* istanbul ignore next */ []);
+	onBeforeShow = output();
+	onShow = output();
+	onBeforeHide = output();
+	onHide = output();
+	onAnimationStart = output();
+	onAnimationDone = output();
+	onBeforeEnter = output();
+	onEnter = output();
+	onAfterEnter = output();
+	onBeforeLeave = output();
+	onLeave = output();
+	onAfterLeave = output();
+	overlayViewChild = viewChild("overlay", ...ngDevMode ? [{ debugName: "overlayViewChild" }] : 	/* istanbul ignore next */ []);
+	contentViewChild = viewChild("content", ...ngDevMode ? [{ debugName: "contentViewChild" }] : 	/* istanbul ignore next */ []);
+	contentTemplate = contentChild("content", {
+		...ngDevMode ? { debugName: "contentTemplate" } : 		/* istanbul ignore next */ {},
+		descendants: false
+	});
+	templates = contentChildren(HelixTemplate, ...ngDevMode ? [{ debugName: "templates" }] : 	/* istanbul ignore next */ []);
+	hostAttrSelector = input(...ngDevMode ? [void 0, { debugName: "hostAttrSelector" }] : 	/* istanbul ignore next */ []);
+	$appendTo = computed(() => this.appendTo() || this.config.overlayAppendTo(), ...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;
+	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()
+		};
+	}
+	get overlayResponsiveOptions() {
+		return {
+			...this.overlayOptions?.responsive,
+			...this.responsive()
+		};
+	}
+	get overlayResponsiveDirection() {
+		return this.overlayResponsiveOptions?.direction || "center";
+	}
+	get overlayEl() {
+		return this.overlayViewChild()?.nativeElement;
+	}
+	get contentEl() {
+		return this.contentViewChild()?.nativeElement;
+	}
+	get targetEl() {
+		return getTargetElement(this.target(), this.el?.nativeElement);
+	}
+	constructor(overlayService, zone) {
+		super();
+		this.overlayService = overlayService;
+		this.zone = zone;
+		effect(() => {
+			if (this.visible() && !this.modalVisible) this.modalVisible = true;
+		});
+	}
+	onAfterContentInit() {
+		this.templates()?.forEach((item) => {
+			switch (item.getType()) {
+				case "content":
+					this._contentTemplate = item.template;
+					break;
+				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, "h-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, "h-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(void 0, ...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);
+		this.options() && this.options()[name] && this.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) => {
+			(!this.listener() || this.listener()(event, {
+				type: "scroll",
+				mode: this.overlayMode,
+				valid: true
+			})) && this.hide(event, true);
+		});
+		this.scrollHandler.bindScrollListener();
+	}
+	unbindScrollListener() {
+		if (this.scrollHandler) this.scrollHandler.unbindScrollListener();
+	}
+	bindDocumentClickListener() {
+		if (!this.documentClickListener) this.documentClickListener = this.renderer.listen(this.document, "click", (event) => {
+			const isOutsideClicked = !(this.targetEl && (this.targetEl.isSameNode(event.target) || !this.isOverlayClicked && this.targetEl.contains(event.target))) && !this.isOverlayContentClicked;
+			(this.listener() ? this.listener()(event, {
+				type: "outside",
+				mode: this.overlayMode,
+				valid: event.which !== 3 && isOutsideClicked
+			}) : isOutsideClicked) && this.hide(event);
+			this.isOverlayClicked = this.isOverlayContentClicked = false;
+		});
+	}
+	unbindDocumentClickListener() {
+		if (this.documentClickListener) {
+			this.documentClickListener();
+			this.documentClickListener = null;
+		}
+	}
+	bindDocumentResizeListener() {
+		if (!this.documentResizeListener) this.documentResizeListener = this.renderer.listen(this.document.defaultView, "resize", (event) => {
+			(this.listener() ? this.listener()(event, {
+				type: "resize",
+				mode: this.overlayMode,
+				valid: !isTouchDevice()
+			}) : !isTouchDevice()) && this.hide(event, true);
+		});
+	}
+	unbindDocumentResizeListener() {
+		if (this.documentResizeListener) {
+			this.documentResizeListener();
+			this.documentResizeListener = null;
+		}
+	}
+	bindDocumentKeyboardListener() {
+		if (this.documentKeyboardListener) return;
+		this.zone.runOutsideAngular(() => {
+			this.documentKeyboardListener = this.renderer.listen(this.document.defaultView, "keydown", (event) => {
+				if (this.overlayOptions.hideOnEscape === false || event.code !== "Escape") return;
+				if (this.listener() ? this.listener()(event, {
+					type: "keydown",
+					mode: this.overlayMode,
+					valid: !isTouchDevice()
+				}) : !isTouchDevice()) this.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.2.1",
+		ngImport: i0,
+		type: Overlay,
+		deps: [{ token: i1.OverlayService }, { token: i0.NgZone }],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.1",
+		type: Overlay,
+		isStandalone: true,
+		selector: "h-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: HelixTemplate,
+			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: i2.Bind }],
+		ngImport: i0,
+		template: "@if (inline()) {\n  <ng-content></ng-content>\n  <ng-container *ngTemplateOutlet=\"contentTemplate() || _contentTemplate; context: { $implicit: { mode: null } }\"></ng-container>\n} @else {\n  @if (modalVisible) {\n    <div #overlay [class]=\"cn(cx('root'), styleClass)\" [style]=\"sx('root')\" [hBind]=\"ptm('root')\" (click)=\"onOverlayClick()\">\n      <h-motion\n        [visible]=\"visible\"\n        name=\"h-anchored-overlay\"\n        [appear]=\"true\"\n        [options]=\"computedMotionOptions()\"\n        (onBeforeEnter)=\"onOverlayBeforeEnter($event)\"\n        (onEnter)=\"onOverlayEnter($event)\"\n        (onAfterEnter)=\"onOverlayAfterEnter($event)\"\n        (onBeforeLeave)=\"onOverlayBeforeLeave($event)\"\n        (onLeave)=\"onOverlayLeave($event)\"\n        (onAfterLeave)=\"onOverlayAfterLeave($event)\"\n        >\n        <div #content [class]=\"cn(cx('content'), contentStyleClass)\" [hBind]=\"ptm('content')\" (click)=\"onOverlayContentClick($event)\">\n          <ng-content></ng-content>\n          <ng-container *ngTemplateOutlet=\"contentTemplate() || _contentTemplate; context: { $implicit: { mode: overlayMode } }\"></ng-container>\n        </div>\n      </h-motion>\n    </div>\n  }\n}\n",
+		dependencies: [
+			{
+				kind: "ngmodule",
+				type: CommonModule
+			},
+			{
+				kind: "directive",
+				type: i3.NgTemplateOutlet,
+				selector: "[ngTemplateOutlet]",
+				inputs: [
+					"ngTemplateOutletContext",
+					"ngTemplateOutlet",
+					"ngTemplateOutletInjector"
+				]
+			},
+			{
+				kind: "ngmodule",
+				type: SharedModule
+			},
+			{
+				kind: "directive",
+				type: Bind,
+				selector: "[hBind]",
+				inputs: ["hBind"]
+			},
+			{
+				kind: "ngmodule",
+				type: MotionModule
+			},
+			{
+				kind: "component",
+				type: i4.Motion,
+				selector: "h-motion",
+				inputs: [
+					"visible",
+					"mountOnEnter",
+					"unmountOnLeave",
+					"name",
+					"type",
+					"safe",
+					"disabled",
+					"appear",
+					"enter",
+					"leave",
+					"duration",
+					"hideStrategy",
+					"enterFromClass",
+					"enterToClass",
+					"enterActiveClass",
+					"leaveFromClass",
+					"leaveToClass",
+					"leaveActiveClass",
+					"options"
+				],
+				outputs: [
+					"onBeforeEnter",
+					"onEnter",
+					"onAfterEnter",
+					"onEnterCancelled",
+					"onBeforeLeave",
+					"onLeave",
+					"onAfterLeave",
+					"onLeaveCancelled"
+				]
+			}
+		],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush,
+		encapsulation: i0.ViewEncapsulation.None
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: Overlay,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "h-overlay",
+			standalone: true,
+			imports: [
+				CommonModule,
+				SharedModule,
+				Bind,
+				MotionModule
+			],
+			hostDirectives: [Bind],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			encapsulation: ViewEncapsulation.None,
+			providers: [
+				OverlayStyle,
+				{
+					provide: OVERLAY_INSTANCE,
+					useExisting: Overlay
+				},
+				{
+					provide: PARENT_INSTANCE,
+					useExisting: Overlay
+				}
+			],
+			template: "@if (inline()) {\n  <ng-content></ng-content>\n  <ng-container *ngTemplateOutlet=\"contentTemplate() || _contentTemplate; context: { $implicit: { mode: null } }\"></ng-container>\n} @else {\n  @if (modalVisible) {\n    <div #overlay [class]=\"cn(cx('root'), styleClass)\" [style]=\"sx('root')\" [hBind]=\"ptm('root')\" (click)=\"onOverlayClick()\">\n      <h-motion\n        [visible]=\"visible\"\n        name=\"h-anchored-overlay\"\n        [appear]=\"true\"\n        [options]=\"computedMotionOptions()\"\n        (onBeforeEnter)=\"onOverlayBeforeEnter($event)\"\n        (onEnter)=\"onOverlayEnter($event)\"\n        (onAfterEnter)=\"onOverlayAfterEnter($event)\"\n        (onBeforeLeave)=\"onOverlayBeforeLeave($event)\"\n        (onLeave)=\"onOverlayLeave($event)\"\n        (onAfterLeave)=\"onOverlayAfterLeave($event)\"\n        >\n        <div #content [class]=\"cn(cx('content'), contentStyleClass)\" [hBind]=\"ptm('content')\" (click)=\"onOverlayContentClick($event)\">\n          <ng-content></ng-content>\n          <ng-container *ngTemplateOutlet=\"contentTemplate() || _contentTemplate; context: { $implicit: { mode: overlayMode } }\"></ng-container>\n        </div>\n      </h-motion>\n    </div>\n  }\n}\n"
+		}]
+	}],
+	ctorParameters: () => [{ type: i1.OverlayService }, { type: i0.NgZone }],
+	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(() => HelixTemplate), { isSignal: true }]
+		}],
+		hostAttrSelector: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "hostAttrSelector",
+				required: false
+			}]
+		}]
+	}
+});
+var OverlayModule = class OverlayModule {
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: OverlayModule,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.NgModule
+	});
+	static ɵmod = i0.ɵɵngDeclareNgModule({
+		minVersion: "14.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: OverlayModule,
+		imports: [Overlay, SharedModule],
+		exports: [Overlay, SharedModule]
+	});
+	static ɵinj = i0.ɵɵngDeclareInjector({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: OverlayModule,
+		imports: [
+			Overlay,
+			SharedModule,
+			SharedModule
+		]
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: OverlayModule,
+	decorators: [{
+		type: NgModule,
+		args: [{
+			imports: [Overlay, SharedModule],
+			exports: [Overlay, SharedModule]
+		}]
+	}]
+});
 export { Overlay, OverlayModule, OverlayStyle };
-//# sourceMappingURL=gravionlabs-helix-core-overlay.mjs.map
+
+//# sourceMappingURL=gravionlabs-helix-core-overlay.mjs.map