@raintonic/formaui 0.2.0

package/fesm2022/raintonic-formaui-cdk-overlay.mjs

@@ -0,0 +1,1757 @@
+import * as i0 from '@angular/core';
+import { InjectionToken, ComponentRef, TemplateRef, EmbeddedViewRef, inject, ElementRef, Component, RendererFactory2, EnvironmentInjector, createComponent, Injectable, DOCUMENT as DOCUMENT$1 } from '@angular/core';
+import { DOCUMENT } from '@angular/common';
+import { Subject } from 'rxjs';
+
+/**
+ * Injection token for the overlay container element
+ */
+const FUI_OVERLAY_CONTAINER = new InjectionToken('FUI_OVERLAY_CONTAINER');
+/**
+ * Injection token for the overlay scroll strategy
+ */
+const FUI_OVERLAY_SCROLL_STRATEGY = new InjectionToken('FUI_OVERLAY_SCROLL_STRATEGY');
+
+/**
+ * # FuiOverlayRefImpl
+ *
+ * Implementation of the FuiOverlayRef interface. This class manages the lifecycle
+ * of an individual overlay instance, including content attachment, positioning,
+ * and cleanup.
+ *
+ * ## Features
+ * - Content attachment and detachment
+ * - Event handling (backdrop clicks, keyboard events)
+ * - Position and size updates
+ * - CSS class management
+ * - Proper cleanup and disposal
+ */
+class FuiOverlayRefImpl {
+    _id;
+    _overlayElement;
+    _renderer;
+    _zIndex;
+    _backdropElement = null;
+    _attachedContent = null;
+    _config;
+    _hasAttached = false;
+    // Event subjects
+    _backdropClick = new Subject();
+    _keydownEvents = new Subject();
+    _attachments = new Subject();
+    _detachments = new Subject();
+    // Event listeners
+    _backdropClickListener;
+    _keydownListener;
+    constructor(overlayElement, config, renderer, id, zIndex = 1000) {
+        this._id = id ?? this._generateId();
+        this._overlayElement = overlayElement;
+        this._config = { ...config };
+        this._renderer = renderer;
+        this._zIndex = zIndex;
+        requestAnimationFrame(() => {
+            this._setupOverlayElement();
+            this._setupBackdrop();
+            this._setupEventListeners();
+        });
+    }
+    /** Unique identifier for this overlay */
+    get id() {
+        return this._id;
+    }
+    /** The overlay pane element */
+    get overlayElement() {
+        return this._overlayElement;
+    }
+    /** The backdrop element (if any) */
+    get backdropElement() {
+        return this._backdropElement;
+    }
+    /** Observable that emits when the backdrop is clicked */
+    get backdropClick() {
+        return this._backdropClick.asObservable();
+    }
+    /** Observable that emits when a key is pressed while the overlay has focus */
+    get keydownEvents() {
+        return this._keydownEvents.asObservable();
+    }
+    /** Observable that emits when the overlay is attached to the DOM */
+    get attachments() {
+        return this._attachments.asObservable();
+    }
+    /** Observable that emits when the overlay is detached from the DOM */
+    get detachments() {
+        return this._detachments.asObservable();
+    }
+    /** Whether the overlay is currently attached */
+    get hasAttached() {
+        return this._hasAttached;
+    }
+    /**
+     * Attaches content to the overlay
+     */
+    attach(content, injector) {
+        if (this._hasAttached) {
+            throw new Error('Overlay already has content attached');
+        }
+        // Hide overlay initially to prevent flash at (0,0) before positioning
+        this._renderer.setStyle(this._overlayElement, 'opacity', '0');
+        let attachedContent = null;
+        if (content instanceof ComponentRef) {
+            // Component content
+            attachedContent = content;
+            this._overlayElement.appendChild(content.location.nativeElement);
+        }
+        else if (content instanceof TemplateRef) {
+            // Template content
+            const viewRef = content.createEmbeddedView({}, injector);
+            attachedContent = viewRef;
+            viewRef.rootNodes.forEach((node) => {
+                this._overlayElement.appendChild(node);
+            });
+        }
+        else if (content instanceof HTMLElement) {
+            // DOM element content
+            this._overlayElement.appendChild(content);
+        }
+        else if (typeof content === 'string') {
+            // String content
+            this._renderer.setProperty(this._overlayElement, 'textContent', content);
+        }
+        this._attachedContent = attachedContent;
+        this._hasAttached = true;
+        this._attachments.next();
+        // Apply position strategy after DOM has settled
+        // Use single RAF to ensure layout is complete, then make visible
+        if (this._config.positionStrategy) {
+            requestAnimationFrame(() => {
+                if (this._config.positionStrategy && this._hasAttached) {
+                    this._config.positionStrategy.apply();
+                    // Make overlay visible after positioning
+                    this._renderer.setStyle(this._overlayElement, 'opacity', '1');
+                }
+            });
+        }
+        else {
+            // No position strategy, make visible immediately
+            this._renderer.setStyle(this._overlayElement, 'opacity', '1');
+        }
+        // Enable scroll strategy if available
+        if (this._config.scrollStrategy) {
+            this._config.scrollStrategy.enable();
+        }
+        return attachedContent;
+    }
+    /**
+     * Detaches the content from the overlay
+     */
+    detach() {
+        if (!this._hasAttached) {
+            return;
+        }
+        // Disable scroll strategy
+        if (this._config.scrollStrategy) {
+            this._config.scrollStrategy.disable();
+        }
+        // Clean up attached content
+        if (this._attachedContent) {
+            if (this._attachedContent instanceof ComponentRef) {
+                this._attachedContent.destroy();
+            }
+            else if (this._attachedContent instanceof EmbeddedViewRef) {
+                this._attachedContent.destroy();
+            }
+            this._attachedContent = null;
+        }
+        // Clear overlay element content
+        while (this._overlayElement.firstChild) {
+            this._overlayElement.removeChild(this._overlayElement.firstChild);
+        }
+        this._hasAttached = false;
+        this._detachments.next();
+    }
+    /**
+     * Disposes the overlay and cleans up resources
+     */
+    dispose() {
+        // Detach content first
+        this.detach();
+        // Dispose position strategy
+        if (this._config.positionStrategy) {
+            this._config.positionStrategy.dispose();
+        }
+        // Dispose scroll strategy
+        if (this._config.scrollStrategy) {
+            this._config.scrollStrategy.detach();
+        }
+        // Remove event listeners
+        this._removeEventListeners();
+        // Remove backdrop
+        if (this._backdropElement?.parentElement) {
+            this._backdropElement.parentElement.removeChild(this._backdropElement);
+        }
+        // Remove overlay element
+        if (this._overlayElement.parentElement) {
+            this._overlayElement.parentElement.removeChild(this._overlayElement);
+        }
+        // Complete subjects
+        this._backdropClick.complete();
+        this._keydownEvents.complete();
+        this._attachments.complete();
+        this._detachments.complete();
+    }
+    /**
+     * Updates the position of the overlay
+     */
+    updatePosition() {
+        if (this._config.positionStrategy) {
+            this._config.positionStrategy.apply();
+        }
+    }
+    /**
+     * Updates the size of the overlay
+     */
+    updateSize(config) {
+        if (config) {
+            Object.assign(this._config, config);
+        }
+        this._applySizeConfig();
+    }
+    /**
+     * Adds CSS classes to the overlay pane
+     */
+    addPanelClass(classes) {
+        const classArray = Array.isArray(classes) ? classes : [classes];
+        classArray.forEach((className) => {
+            if (className) {
+                this._renderer.addClass(this._overlayElement, className);
+            }
+        });
+    }
+    /**
+     * Removes CSS classes from the overlay pane
+     */
+    removePanelClass(classes) {
+        const classArray = Array.isArray(classes) ? classes : [classes];
+        classArray.forEach((className) => {
+            if (className) {
+                this._renderer.removeClass(this._overlayElement, className);
+            }
+        });
+    }
+    /**
+     * Gets the current configuration of the overlay
+     */
+    getConfig() {
+        return { ...this._config };
+    }
+    /**
+     * Updates the configuration of the overlay
+     */
+    updateConfig(config) {
+        const oldConfig = { ...this._config };
+        Object.assign(this._config, config);
+        // Update backdrop if needed
+        if (config.hasBackdrop !== undefined && config.hasBackdrop !== oldConfig.hasBackdrop) {
+            if (config.hasBackdrop) {
+                this._createBackdrop();
+            }
+            else {
+                this._removeBackdrop();
+            }
+        }
+        // Update backdrop classes
+        const backdrop = this._backdropElement;
+        if (config.backdropClass && backdrop) {
+            // Remove old classes
+            if (oldConfig.backdropClass) {
+                const oldClasses = Array.isArray(oldConfig.backdropClass) ? oldConfig.backdropClass : [oldConfig.backdropClass];
+                oldClasses.forEach((className) => {
+                    if (className) {
+                        this._renderer.removeClass(backdrop, className);
+                    }
+                });
+            }
+            // Add new classes
+            const newClasses = Array.isArray(config.backdropClass) ? config.backdropClass : [config.backdropClass];
+            newClasses.forEach((className) => {
+                if (className) {
+                    this._renderer.addClass(backdrop, className);
+                }
+            });
+        }
+        // Update panel classes
+        if (config.panelClass) {
+            // Remove old classes
+            if (oldConfig.panelClass) {
+                this.removePanelClass(oldConfig.panelClass);
+            }
+            // Add new classes
+            this.addPanelClass(config.panelClass);
+        }
+        // Update size
+        this._applySizeConfig();
+        // Update position strategy
+        if (config.positionStrategy && config.positionStrategy !== oldConfig.positionStrategy) {
+            if (oldConfig.positionStrategy) {
+                oldConfig.positionStrategy.dispose();
+            }
+            config.positionStrategy.setOverlayElement(this._overlayElement);
+        }
+        // Update scroll strategy
+        if (config.scrollStrategy && config.scrollStrategy !== oldConfig.scrollStrategy) {
+            if (oldConfig.scrollStrategy) {
+                oldConfig.scrollStrategy.detach();
+            }
+            config.scrollStrategy.attach(this);
+        }
+    }
+    _setupOverlayElement() {
+        // Add base classes
+        this._renderer.addClass(this._overlayElement, 'fui-overlay-pane');
+        // Add custom panel classes
+        if (this._config.panelClass) {
+            this.addPanelClass(this._config.panelClass);
+        }
+        // Apply z-index for proper stacking of nested overlays
+        this._renderer.setStyle(this._overlayElement, 'z-index', String(this._zIndex));
+        // Apply size configuration
+        this._applySizeConfig();
+        // Set direction
+        if (this._config.direction) {
+            this._renderer.setAttribute(this._overlayElement, 'dir', this._config.direction);
+        }
+        // Set position strategy
+        if (this._config.positionStrategy) {
+            this._config.positionStrategy.setOverlayElement(this._overlayElement);
+        }
+    }
+    _setupBackdrop() {
+        if (this._config.hasBackdrop) {
+            this._createBackdrop();
+        }
+    }
+    _createBackdrop() {
+        if (this._backdropElement) {
+            return;
+        }
+        this._backdropElement = this._renderer.createElement('div');
+        this._renderer.addClass(this._backdropElement, 'fui-overlay-backdrop');
+        // Apply z-index for backdrop (slightly below the overlay panel)
+        this._renderer.setStyle(this._backdropElement, 'z-index', String(this._zIndex - 1));
+        // Add custom backdrop classes
+        const backdropEl = this._backdropElement;
+        if (this._config.backdropClass && backdropEl) {
+            const classes = Array.isArray(this._config.backdropClass)
+                ? this._config.backdropClass
+                : [this._config.backdropClass];
+            classes.forEach((className) => {
+                if (className) {
+                    this._renderer.addClass(backdropEl, className);
+                }
+            });
+        }
+        // Insert backdrop before overlay element
+        const parent = this._overlayElement.parentElement;
+        if (parent) {
+            this._renderer.insertBefore(parent, this._backdropElement, this._overlayElement);
+        }
+        // Setup backdrop click listener
+        this._backdropClickListener = (event) => {
+            if (event.target === this._backdropElement) {
+                this._backdropClick.next(event);
+            }
+        };
+        if (this._backdropElement) {
+            this._backdropElement.addEventListener('click', this._backdropClickListener);
+        }
+    }
+    _removeBackdrop() {
+        if (this._backdropElement) {
+            if (this._backdropClickListener) {
+                this._backdropElement.removeEventListener('click', this._backdropClickListener);
+                this._backdropClickListener = undefined;
+            }
+            if (this._backdropElement.parentElement) {
+                this._backdropElement.parentElement.removeChild(this._backdropElement);
+            }
+            this._backdropElement = null;
+        }
+    }
+    _setupEventListeners() {
+        // Keydown events
+        this._keydownListener = (event) => {
+            this._keydownEvents.next(event);
+        };
+        this._overlayElement.addEventListener('keydown', this._keydownListener);
+    }
+    _removeEventListeners() {
+        if (this._keydownListener) {
+            this._overlayElement.removeEventListener('keydown', this._keydownListener);
+            this._keydownListener = undefined;
+        }
+        if (this._backdropClickListener && this._backdropElement) {
+            this._backdropElement.removeEventListener('click', this._backdropClickListener);
+            this._backdropClickListener = undefined;
+        }
+    }
+    _applySizeConfig() {
+        const config = this._config;
+        if (config.width !== undefined) {
+            this._renderer.setStyle(this._overlayElement, 'width', this._coerceCssPixelValue(config.width));
+        }
+        if (config.height !== undefined) {
+            this._renderer.setStyle(this._overlayElement, 'height', this._coerceCssPixelValue(config.height));
+        }
+        if (config.minWidth !== undefined) {
+            this._renderer.setStyle(this._overlayElement, 'min-width', this._coerceCssPixelValue(config.minWidth));
+        }
+        if (config.minHeight !== undefined) {
+            this._renderer.setStyle(this._overlayElement, 'min-height', this._coerceCssPixelValue(config.minHeight));
+        }
+        if (config.maxWidth !== undefined) {
+            this._renderer.setStyle(this._overlayElement, 'max-width', this._coerceCssPixelValue(config.maxWidth));
+        }
+        if (config.maxHeight !== undefined) {
+            this._renderer.setStyle(this._overlayElement, 'max-height', this._coerceCssPixelValue(config.maxHeight));
+        }
+    }
+    _coerceCssPixelValue(value) {
+        return typeof value === 'number' ? `${value}px` : value;
+    }
+    _generateId() {
+        return `fui-overlay-${Math.random().toString(36).substr(2, 9)}`;
+    }
+}
+
+/**
+ * # FuiOverlayContainer Component
+ *
+ * Container component that holds all overlay content. This component is automatically
+ * created and attached to the document body when the overlay service is first used.
+ *
+ * ## Features
+ * - Provides a dedicated container for all overlay content
+ * - Manages z-index stacking for multiple overlays
+ * - Handles cleanup when destroyed
+ * - Applies proper CSS classes for styling
+ *
+ * ## Usage
+ *
+ * This component is used internally by the overlay service and should not be
+ * instantiated directly by application code.
+ */
+class FuiOverlayContainerComponent {
+    _document = inject(DOCUMENT);
+    _elementRef = inject((ElementRef));
+    ngOnInit() {
+        // Ensure the container is attached to the document body
+        if (this._elementRef.nativeElement.parentElement !== this._document.body) {
+            this._document.body.appendChild(this._elementRef.nativeElement);
+        }
+    }
+    ngOnDestroy() {
+        // Clean up the container element
+        const element = this._elementRef.nativeElement;
+        if (element.parentElement) {
+            element.parentElement.removeChild(element);
+        }
+    }
+    /**
+     * Gets the container element
+     */
+    getContainerElement() {
+        return this._elementRef.nativeElement;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiOverlayContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.6", type: FuiOverlayContainerComponent, isStandalone: true, selector: "fui-overlay-container", host: { properties: { "attr.aria-live": "\"polite\"", "attr.aria-atomic": "\"true\"" }, classAttribute: "fui-overlay-container" }, ngImport: i0, template: '', isInline: true, styles: [":host{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:var(--fui-z-popover)}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiOverlayContainerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fui-overlay-container', standalone: true, template: '', host: {
+                        class: 'fui-overlay-container',
+                        '[attr.aria-live]': '"polite"',
+                        '[attr.aria-atomic]': '"true"',
+                    }, styles: [":host{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:var(--fui-z-popover)}\n"] }]
+        }] });
+
+/**
+ * # FuiGlobalPositionStrategy
+ *
+ * A position strategy that positions the overlay at a fixed position on the screen.
+ * This strategy is useful for modals, dialogs, and other overlays that should be
+ * positioned relative to the viewport rather than a specific element.
+ *
+ * ## Features
+ * - Fixed positioning relative to the viewport
+ * - Support for all CSS position properties (top, bottom, left, right)
+ * - Centering options (horizontal and vertical)
+ * - Responsive positioning
+ * - Size constraints (width, height, min/max dimensions)
+ */
+class FuiGlobalPositionStrategy {
+    _renderer;
+    _options;
+    _overlayElement;
+    _positionChanges = new Subject();
+    _isDisposed = false;
+    constructor(_renderer, _options = {}) {
+        this._renderer = _renderer;
+        this._options = _options;
+    }
+    /** Observable that emits when the position changes */
+    get positionChanges() {
+        return this._positionChanges.asObservable();
+    }
+    /**
+     * Sets the overlay element reference
+     */
+    setOverlayElement(element) {
+        this._overlayElement = element;
+    }
+    /**
+     * Applies the positioning strategy
+     */
+    apply() {
+        if (!this._overlayElement || this._isDisposed) {
+            return;
+        }
+        // Set position to fixed for global positioning
+        this._renderer.setStyle(this._overlayElement, 'position', 'fixed');
+        // Apply positioning
+        this._applyPosition();
+        // Apply centering if requested
+        this._applyCentering();
+        // Apply size constraints
+        this._applySizeConstraints();
+    }
+    /**
+     * Sets the top position
+     */
+    top(value = '0') {
+        this._options.top = value;
+        this._options.bottom = undefined;
+        return this;
+    }
+    /**
+     * Sets the bottom position
+     */
+    bottom(value = '0') {
+        this._options.bottom = value;
+        this._options.top = undefined;
+        return this;
+    }
+    /**
+     * Sets the left position
+     */
+    left(value = '0') {
+        this._options.left = value;
+        this._options.right = undefined;
+        return this;
+    }
+    /**
+     * Sets the right position
+     */
+    right(value = '0') {
+        this._options.right = value;
+        this._options.left = undefined;
+        return this;
+    }
+    /**
+     * Centers the overlay horizontally
+     */
+    centerHorizontally() {
+        this._options.centerHorizontally = true;
+        this._options.left = undefined;
+        this._options.right = undefined;
+        return this;
+    }
+    /**
+     * Centers the overlay vertically
+     */
+    centerVertically() {
+        this._options.centerVertically = true;
+        this._options.top = undefined;
+        this._options.bottom = undefined;
+        return this;
+    }
+    /**
+     * Sets the width of the overlay
+     */
+    width(value) {
+        this._options.width = value;
+        return this;
+    }
+    /**
+     * Sets the height of the overlay
+     */
+    height(value) {
+        this._options.height = value;
+        return this;
+    }
+    /**
+     * Sets the minimum width of the overlay
+     */
+    minWidth(value) {
+        this._options.minWidth = value;
+        return this;
+    }
+    /**
+     * Sets the minimum height of the overlay
+     */
+    minHeight(value) {
+        this._options.minHeight = value;
+        return this;
+    }
+    /**
+     * Sets the maximum width of the overlay
+     */
+    maxWidth(value) {
+        this._options.maxWidth = value;
+        return this;
+    }
+    /**
+     * Sets the maximum height of the overlay
+     */
+    maxHeight(value) {
+        this._options.maxHeight = value;
+        return this;
+    }
+    /**
+     * Disposes the strategy and cleans up resources
+     */
+    dispose() {
+        if (this._isDisposed) {
+            return;
+        }
+        this._isDisposed = true;
+        this._positionChanges.complete();
+    }
+    /**
+     * Detaches the strategy from the overlay
+     */
+    detach() {
+        // Global position strategy doesn't need special detach logic
+    }
+    _applyPosition() {
+        if (!this._overlayElement) {
+            return;
+        }
+        const options = this._options;
+        // Apply top/bottom positioning
+        if (options.top !== undefined) {
+            this._renderer.setStyle(this._overlayElement, 'top', this._coerceCssPixelValue(options.top));
+            this._renderer.removeStyle(this._overlayElement, 'bottom');
+        }
+        else if (options.bottom !== undefined) {
+            this._renderer.setStyle(this._overlayElement, 'bottom', this._coerceCssPixelValue(options.bottom));
+            this._renderer.removeStyle(this._overlayElement, 'top');
+        }
+        // Apply left/right positioning
+        if (options.left !== undefined) {
+            this._renderer.setStyle(this._overlayElement, 'left', this._coerceCssPixelValue(options.left));
+            this._renderer.removeStyle(this._overlayElement, 'right');
+        }
+        else if (options.right !== undefined) {
+            this._renderer.setStyle(this._overlayElement, 'right', this._coerceCssPixelValue(options.right));
+            this._renderer.removeStyle(this._overlayElement, 'left');
+        }
+    }
+    _applyCentering() {
+        if (!this._overlayElement) {
+            return;
+        }
+        const options = this._options;
+        if (options.centerHorizontally) {
+            this._renderer.setStyle(this._overlayElement, 'left', '50%');
+            this._renderer.setStyle(this._overlayElement, 'transform', 'translateX(-50%)');
+            this._renderer.removeStyle(this._overlayElement, 'right');
+        }
+        if (options.centerVertically) {
+            this._renderer.setStyle(this._overlayElement, 'top', '50%');
+            const existingTransform = this._overlayElement.style.transform;
+            if (existingTransform?.includes('translateX')) {
+                this._renderer.setStyle(this._overlayElement, 'transform', 'translate(-50%, -50%)');
+            }
+            else {
+                this._renderer.setStyle(this._overlayElement, 'transform', 'translateY(-50%)');
+            }
+            this._renderer.removeStyle(this._overlayElement, 'bottom');
+        }
+    }
+    _applySizeConstraints() {
+        if (!this._overlayElement) {
+            return;
+        }
+        const options = this._options;
+        if (options.width !== undefined) {
+            this._renderer.setStyle(this._overlayElement, 'width', this._coerceCssPixelValue(options.width));
+        }
+        if (options.height !== undefined) {
+            this._renderer.setStyle(this._overlayElement, 'height', this._coerceCssPixelValue(options.height));
+        }
+        if (options.minWidth !== undefined) {
+            this._renderer.setStyle(this._overlayElement, 'min-width', this._coerceCssPixelValue(options.minWidth));
+        }
+        if (options.minHeight !== undefined) {
+            this._renderer.setStyle(this._overlayElement, 'min-height', this._coerceCssPixelValue(options.minHeight));
+        }
+        if (options.maxWidth !== undefined) {
+            this._renderer.setStyle(this._overlayElement, 'max-width', this._coerceCssPixelValue(options.maxWidth));
+        }
+        if (options.maxHeight !== undefined) {
+            this._renderer.setStyle(this._overlayElement, 'max-height', this._coerceCssPixelValue(options.maxHeight));
+        }
+    }
+    _coerceCssPixelValue(value) {
+        return typeof value === 'number' ? `${value}px` : value;
+    }
+}
+
+/**
+ * # FuiConnectedPositionStrategy
+ *
+ * A position strategy that positions the overlay relative to a connected element.
+ * This strategy is ideal for tooltips, dropdowns, menus, and other overlays that
+ * should be positioned relative to a trigger element.
+ *
+ * ## Features
+ * - Positions overlay relative to an origin element
+ * - Multiple fallback positions with automatic selection
+ * - Collision detection and viewport boundary handling
+ * - Push and grow behaviors for constrained spaces
+ * - Scroll and resize event handling
+ * - Transform origin support for animations
+ */
+class FuiConnectedPositionStrategy {
+    _renderer;
+    _overlayElement;
+    _originElement;
+    _positions;
+    _appliedPosition;
+    _isDisposed = false;
+    _resizeSubscription;
+    _scrollSubscription;
+    _positionChanges = new Subject();
+    // Configuration options
+    _withPush = true;
+    _withGrowAfterOpen = false;
+    _withLockedPosition = false;
+    _defaultOffsetX = 0;
+    _defaultOffsetY = 0;
+    _transformOriginElement;
+    _viewportMargin = 0;
+    _withFlexibleDimensions = false;
+    constructor(_renderer, options) {
+        this._renderer = _renderer;
+        this._originElement = options.origin instanceof ElementRef ? options.origin.nativeElement : options.origin;
+        this._positions = [...options.positions];
+        // Apply configuration options
+        if (options.withPush !== undefined) {
+            this._withPush = options.withPush;
+        }
+        if (options.withGrowAfterOpen !== undefined) {
+            this._withGrowAfterOpen = options.withGrowAfterOpen;
+        }
+        if (options.withLockedPosition !== undefined) {
+            this._withLockedPosition = options.withLockedPosition;
+        }
+        if (options.withDefaultOffsetX !== undefined) {
+            this._defaultOffsetX = options.withDefaultOffsetX;
+        }
+        if (options.withDefaultOffsetY !== undefined) {
+            this._defaultOffsetY = options.withDefaultOffsetY;
+        }
+        if (options.withTransformOriginOn) {
+            this._transformOriginElement =
+                options.withTransformOriginOn instanceof ElementRef
+                    ? options.withTransformOriginOn.nativeElement
+                    : options.withTransformOriginOn;
+        }
+        if (options.viewportMargin !== undefined) {
+            this._viewportMargin = options.viewportMargin;
+        }
+        if (options.withFlexibleDimensions !== undefined) {
+            this._withFlexibleDimensions = options.withFlexibleDimensions;
+        }
+    }
+    /** Observable that emits when the position changes */
+    get positionChanges() {
+        return this._positionChanges.asObservable();
+    }
+    /**
+     * Sets the overlay element reference
+     */
+    setOverlayElement(element) {
+        this._overlayElement = element;
+    }
+    /**
+     * Applies the positioning strategy
+     */
+    apply() {
+        if (!this._overlayElement || this._isDisposed) {
+            return;
+        }
+        // Set position to fixed for precise positioning
+        this._renderer.setStyle(this._overlayElement, 'position', 'fixed');
+        // Force a layout recalculation to ensure accurate dimensions
+        // This is necessary to get the correct bounding rect
+        void this._overlayElement.offsetHeight;
+        // Find the best position
+        const bestPosition = this._getBestPosition();
+        if (bestPosition) {
+            this._applyPosition(bestPosition);
+            this._appliedPosition = bestPosition;
+            // Set up event listeners for repositioning
+            this._setupEventListeners();
+            // Emit position change
+            this._positionChanges.next({
+                connectionPair: bestPosition,
+                scrollableViewProperties: this._getScrollableViewProperties(),
+            });
+        }
+    }
+    /**
+     * Updates the positions array
+     */
+    withPositions(positions) {
+        this._positions = [...positions];
+        return this;
+    }
+    /**
+     * Enables pushing the overlay on-screen if it would otherwise be clipped
+     */
+    withPush(enabled = true) {
+        this._withPush = enabled;
+        return this;
+    }
+    /**
+     * Enables growing the overlay after it reaches the edge of the viewport
+     */
+    withGrowAfterOpen(enabled = true) {
+        this._withGrowAfterOpen = enabled;
+        return this;
+    }
+    /**
+     * Locks the position after the first time it is positioned
+     */
+    withLockedPosition(enabled = true) {
+        this._withLockedPosition = enabled;
+        return this;
+    }
+    /**
+     * Sets the default offset for the x-axis
+     */
+    withDefaultOffsetX(offset) {
+        this._defaultOffsetX = offset;
+        return this;
+    }
+    /**
+     * Sets the default offset for the y-axis
+     */
+    withDefaultOffsetY(offset) {
+        this._defaultOffsetY = offset;
+        return this;
+    }
+    /**
+     * Sets the element to use for transform origin
+     */
+    withTransformOriginOn(element) {
+        this._transformOriginElement = element instanceof ElementRef ? element.nativeElement : element;
+        return this;
+    }
+    /**
+     * Sets the margin between the overlay and the viewport edge
+     */
+    withViewportMargin(margin) {
+        this._viewportMargin = margin;
+        return this;
+    }
+    /**
+     * Enables flexible dimensions
+     */
+    withFlexibleDimensions(enabled = true) {
+        this._withFlexibleDimensions = enabled;
+        return this;
+    }
+    /**
+     * Disposes the strategy and cleans up resources
+     */
+    dispose() {
+        if (this._isDisposed) {
+            return;
+        }
+        this._isDisposed = true;
+        this._removeEventListeners();
+        this._positionChanges.complete();
+    }
+    /**
+     * Detaches the strategy from the overlay
+     */
+    detach() {
+        this._removeEventListeners();
+    }
+    _getBestPosition() {
+        if (!this._overlayElement || !this._originElement) {
+            return null;
+        }
+        // If position is locked and we have an applied position, use it
+        if (this._withLockedPosition && this._appliedPosition) {
+            return this._appliedPosition;
+        }
+        // Force layout recalculation to ensure overlay has correct dimensions
+        // This is critical for center-aligned positions (right, left, top, bottom)
+        void this._overlayElement.offsetHeight;
+        void this._overlayElement.offsetWidth;
+        const originRect = this._originElement.getBoundingClientRect();
+        const overlayRect = this._overlayElement.getBoundingClientRect();
+        const viewportSize = this._getViewportSize();
+        let bestPosition = null;
+        let bestScore = -1;
+        for (const position of this._positions) {
+            const positionedRect = this._calculatePositionedRect(position, originRect, overlayRect);
+            const score = this._calculatePositionScore(positionedRect, viewportSize);
+            if (score > bestScore) {
+                bestScore = score;
+                bestPosition = position;
+            }
+            // If we found a perfect position (fully visible), use it
+            if (score === 1) {
+                break;
+            }
+        }
+        return bestPosition;
+    }
+    _applyPosition(position) {
+        if (!this._overlayElement || !this._originElement) {
+            return;
+        }
+        // Force layout recalculation again to ensure dimensions are current
+        void this._overlayElement.offsetHeight;
+        void this._overlayElement.offsetWidth;
+        const originRect = this._originElement.getBoundingClientRect();
+        const overlayRect = this._overlayElement.getBoundingClientRect();
+        const positionedRect = this._calculatePositionedRect(position, originRect, overlayRect);
+        let { x, y } = positionedRect;
+        // Apply push behavior if enabled
+        if (this._withPush) {
+            const pushedPosition = this._pushWithinViewport({ x, y, width: overlayRect.width, height: overlayRect.height });
+            x = pushedPosition.x;
+            y = pushedPosition.y;
+        }
+        // Apply the position
+        this._renderer.setStyle(this._overlayElement, 'left', `${x}px`);
+        this._renderer.setStyle(this._overlayElement, 'top', `${y}px`);
+        // Apply transform origin if specified
+        if (this._transformOriginElement) {
+            this._setTransformOrigin(position);
+        }
+        // Apply flexible dimensions if enabled
+        if (this._withFlexibleDimensions) {
+            this._applyFlexibleDimensions(position, { x, y, width: overlayRect.width, height: overlayRect.height });
+        }
+    }
+    _calculatePositionedRect(position, originRect, overlayRect) {
+        const offsetX = (position.offsetX ?? 0) + this._defaultOffsetX;
+        const offsetY = (position.offsetY ?? 0) + this._defaultOffsetY;
+        let x;
+        let y;
+        // Calculate x position
+        switch (position.originX) {
+            case 'start':
+                x = originRect.left;
+                break;
+            case 'center':
+                x = originRect.left + originRect.width / 2;
+                break;
+            case 'end':
+                x = originRect.right;
+                break;
+        }
+        switch (position.overlayX) {
+            case 'start':
+                // x remains as is
+                break;
+            case 'center':
+                x -= overlayRect.width / 2;
+                break;
+            case 'end':
+                x -= overlayRect.width;
+                break;
+        }
+        // Calculate y position
+        switch (position.originY) {
+            case 'top':
+                y = originRect.top;
+                break;
+            case 'center':
+                y = originRect.top + originRect.height / 2;
+                break;
+            case 'bottom':
+                y = originRect.bottom;
+                break;
+        }
+        switch (position.overlayY) {
+            case 'top':
+                // y remains as is
+                break;
+            case 'center':
+                y -= overlayRect.height / 2;
+                break;
+            case 'bottom':
+                y -= overlayRect.height;
+                break;
+        }
+        return {
+            x: x + offsetX,
+            y: y + offsetY,
+            width: overlayRect.width,
+            height: overlayRect.height,
+        };
+    }
+    _calculatePositionScore(rect, viewportSize) {
+        const margin = this._viewportMargin;
+        const visibleArea = Math.max(0, Math.min(rect.x + rect.width, viewportSize.width - margin) - Math.max(rect.x, margin)) *
+            Math.max(0, Math.min(rect.y + rect.height, viewportSize.height - margin) - Math.max(rect.y, margin));
+        const totalArea = rect.width * rect.height;
+        return totalArea > 0 ? visibleArea / totalArea : 0;
+    }
+    _pushWithinViewport(rect) {
+        const viewportSize = this._getViewportSize();
+        const margin = this._viewportMargin;
+        let { x, y } = rect;
+        // Push horizontally
+        if (x < margin) {
+            x = margin;
+        }
+        else if (x + rect.width > viewportSize.width - margin) {
+            x = viewportSize.width - rect.width - margin;
+        }
+        // Push vertically
+        if (y < margin) {
+            y = margin;
+        }
+        else if (y + rect.height > viewportSize.height - margin) {
+            y = viewportSize.height - rect.height - margin;
+        }
+        return { x, y };
+    }
+    _setTransformOrigin(position) {
+        if (!this._transformOriginElement || !this._overlayElement) {
+            return;
+        }
+        let transformOrigin = '';
+        // Set horizontal transform origin
+        switch (position.overlayX) {
+            case 'start':
+                transformOrigin += 'left';
+                break;
+            case 'center':
+                transformOrigin += 'center';
+                break;
+            case 'end':
+                transformOrigin += 'right';
+                break;
+        }
+        transformOrigin += ' ';
+        // Set vertical transform origin
+        switch (position.overlayY) {
+            case 'top':
+                transformOrigin += 'top';
+                break;
+            case 'center':
+                transformOrigin += 'center';
+                break;
+            case 'bottom':
+                transformOrigin += 'bottom';
+                break;
+        }
+        this._renderer.setStyle(this._transformOriginElement, 'transform-origin', transformOrigin);
+    }
+    _applyFlexibleDimensions(position, rect) {
+        if (!this._overlayElement) {
+            return;
+        }
+        const viewportSize = this._getViewportSize();
+        const margin = this._viewportMargin;
+        // Calculate available space
+        const availableWidth = viewportSize.width - rect.x - margin;
+        const availableHeight = viewportSize.height - rect.y - margin;
+        // Apply flexible width if needed
+        if (rect.width > availableWidth) {
+            this._renderer.setStyle(this._overlayElement, 'max-width', `${availableWidth}px`);
+        }
+        // Apply flexible height if needed
+        if (rect.height > availableHeight) {
+            this._renderer.setStyle(this._overlayElement, 'max-height', `${availableHeight}px`);
+        }
+    }
+    _setupEventListeners() {
+        if (this._isDisposed) {
+            return;
+        }
+        // Remove existing listeners
+        this._removeEventListeners();
+        // Set up resize listener
+        this._resizeSubscription = () => {
+            if (!this._isDisposed) {
+                this.apply();
+            }
+        };
+        window.addEventListener('resize', this._resizeSubscription);
+        // Set up scroll listener
+        this._scrollSubscription = () => {
+            if (!this._isDisposed) {
+                this.apply();
+            }
+        };
+        window.addEventListener('scroll', this._scrollSubscription, true);
+    }
+    _removeEventListeners() {
+        if (this._resizeSubscription) {
+            window.removeEventListener('resize', this._resizeSubscription);
+            this._resizeSubscription = undefined;
+        }
+        if (this._scrollSubscription) {
+            window.removeEventListener('scroll', this._scrollSubscription, true);
+            this._scrollSubscription = undefined;
+        }
+    }
+    _getViewportSize() {
+        return {
+            width: window.innerWidth,
+            height: window.innerHeight,
+        };
+    }
+    _getScrollableViewProperties() {
+        const viewportSize = this._getViewportSize();
+        return {
+            size: viewportSize,
+            scrollPosition: {
+                top: window.pageYOffset || document.documentElement.scrollTop,
+                left: window.pageXOffset || document.documentElement.scrollLeft,
+            },
+        };
+    }
+}
+
+/**
+ * # FuiNoopScrollStrategy
+ *
+ * A scroll strategy that does nothing when the user scrolls.
+ * This is useful for overlays that should remain in their position
+ * regardless of scrolling.
+ */
+class FuiNoopScrollStrategy {
+    enable() {
+        // Intentionally empty
+    }
+    disable() {
+        // Intentionally empty
+    }
+    attach(_overlayRef) {
+        // Intentionally empty
+    }
+    detach() {
+        // Intentionally empty
+    }
+}
+/**
+ * # FuiCloseScrollStrategy
+ *
+ * A scroll strategy that closes the overlay when the user scrolls.
+ * This is useful for overlays like tooltips or dropdowns that should
+ * disappear when the user scrolls away from the trigger element.
+ */
+class FuiCloseScrollStrategy {
+    _threshold;
+    _overlayRef;
+    _scrollListener;
+    _isEnabled = false;
+    constructor(_threshold = 0) {
+        this._threshold = _threshold;
+    }
+    enable() {
+        if (this._isEnabled || !this._overlayRef) {
+            return;
+        }
+        this._isEnabled = true;
+        this._scrollListener = () => {
+            if (this._overlayRef) {
+                this._overlayRef.dispose();
+            }
+        };
+        window.addEventListener('scroll', this._scrollListener, true);
+    }
+    disable() {
+        if (!this._isEnabled) {
+            return;
+        }
+        this._isEnabled = false;
+        this._removeScrollListener();
+    }
+    attach(overlayRef) {
+        this._overlayRef = overlayRef;
+    }
+    detach() {
+        this.disable();
+        this._overlayRef = undefined;
+    }
+    _removeScrollListener() {
+        if (this._scrollListener) {
+            window.removeEventListener('scroll', this._scrollListener, true);
+            this._scrollListener = undefined;
+        }
+    }
+}
+/**
+ * # FuiRepositionScrollStrategy
+ *
+ * A scroll strategy that repositions the overlay when the user scrolls.
+ * This is useful for overlays that should follow their trigger element
+ * as it moves due to scrolling.
+ */
+class FuiRepositionScrollStrategy {
+    _scrollThrottle;
+    _autoClose;
+    _overlayRef;
+    _scrollListener;
+    _isEnabled = false;
+    constructor(_scrollThrottle = 20, _autoClose = false) {
+        this._scrollThrottle = _scrollThrottle;
+        this._autoClose = _autoClose;
+    }
+    enable() {
+        if (this._isEnabled || !this._overlayRef) {
+            return;
+        }
+        this._isEnabled = true;
+        let timeoutId = null;
+        this._scrollListener = () => {
+            if (timeoutId) {
+                clearTimeout(timeoutId);
+            }
+            timeoutId = window.setTimeout(() => {
+                if (this._overlayRef) {
+                    if (this._autoClose && this._isScrolledOutOfView()) {
+                        this._overlayRef.dispose();
+                    }
+                    else {
+                        this._overlayRef.updatePosition();
+                    }
+                }
+            }, this._scrollThrottle);
+        };
+        window.addEventListener('scroll', this._scrollListener, true);
+    }
+    disable() {
+        if (!this._isEnabled) {
+            return;
+        }
+        this._isEnabled = false;
+        this._removeScrollListener();
+    }
+    attach(overlayRef) {
+        this._overlayRef = overlayRef;
+    }
+    detach() {
+        this.disable();
+        this._overlayRef = undefined;
+    }
+    _removeScrollListener() {
+        if (this._scrollListener) {
+            window.removeEventListener('scroll', this._scrollListener, true);
+            this._scrollListener = undefined;
+        }
+    }
+    _isScrolledOutOfView() {
+        // This is a simplified implementation
+        // In a real implementation, you would check if the origin element
+        // is still visible in the viewport
+        return false;
+    }
+}
+/**
+ * # FuiBlockScrollStrategy
+ *
+ * A scroll strategy that prevents scrolling while the overlay is open.
+ * This is useful for modal dialogs and other overlays that should
+ * prevent interaction with the underlying content.
+ */
+class FuiBlockScrollStrategy {
+    _document;
+    _previousHTMLStyles = {};
+    _previousBodyStyles = {};
+    _isEnabled = false;
+    constructor(_document) {
+        this._document = _document;
+    }
+    enable() {
+        if (this._isEnabled) {
+            return;
+        }
+        this._isEnabled = true;
+        const doc = this._document ?? document;
+        const html = doc.documentElement;
+        const body = doc.body;
+        if (!html || !body) {
+            return;
+        }
+        // Store previous styles
+        this._previousHTMLStyles = {
+            overflow: html.style.overflow || '',
+            paddingRight: html.style.paddingRight || '',
+        };
+        this._previousBodyStyles = {
+            overflow: body.style.overflow || '',
+            paddingRight: body.style.paddingRight || '',
+        };
+        // Calculate scrollbar width
+        const scrollbarWidth = this._getScrollbarWidth();
+        // Apply blocking styles
+        html.style.overflow = 'hidden';
+        body.style.overflow = 'hidden';
+        // Compensate for scrollbar width to prevent layout shift
+        if (scrollbarWidth > 0) {
+            html.style.paddingRight = `${scrollbarWidth}px`;
+            body.style.paddingRight = `${scrollbarWidth}px`;
+        }
+    }
+    disable() {
+        if (!this._isEnabled) {
+            return;
+        }
+        this._isEnabled = false;
+        const doc = this._document ?? document;
+        const html = doc.documentElement;
+        const body = doc.body;
+        if (!html || !body) {
+            return;
+        }
+        // Restore previous styles
+        html.style.overflow = this._previousHTMLStyles['overflow'];
+        html.style.paddingRight = this._previousHTMLStyles['paddingRight'];
+        body.style.overflow = this._previousBodyStyles['overflow'];
+        body.style.paddingRight = this._previousBodyStyles['paddingRight'];
+        // Clear stored styles
+        this._previousHTMLStyles = {};
+        this._previousBodyStyles = {};
+    }
+    attach(_overlayRef) {
+        // Block scroll strategy doesn't need the overlay reference
+    }
+    detach() {
+        this.disable();
+    }
+    _getScrollbarWidth() {
+        const doc = this._document ?? document;
+        // Create a temporary div to measure scrollbar width
+        const outer = doc.createElement('div');
+        outer.style.visibility = 'hidden';
+        outer.style.overflow = 'scroll';
+        // outer.style.msOverflowStyle = 'scrollbar'; // needed for WinJS apps
+        doc.body.appendChild(outer);
+        const inner = doc.createElement('div');
+        outer.appendChild(inner);
+        const scrollbarWidth = outer.offsetWidth - inner.offsetWidth;
+        // Clean up
+        outer.parentNode?.removeChild(outer);
+        return scrollbarWidth;
+    }
+}
+/**
+ * Factory functions for creating scroll strategies
+ */
+const FUI_SCROLL_STRATEGIES = {
+    /**
+     * Creates a noop scroll strategy
+     */
+    noop: () => new FuiNoopScrollStrategy(),
+    /**
+     * Creates a close scroll strategy
+     */
+    close: (threshold = 0) => new FuiCloseScrollStrategy(threshold),
+    /**
+     * Creates a reposition scroll strategy
+     */
+    reposition: (scrollThrottle = 20, autoClose = false) => new FuiRepositionScrollStrategy(scrollThrottle, autoClose),
+    /**
+     * Creates a block scroll strategy
+     * @param doc Optional Document reference for SSR compatibility
+     */
+    block: (doc) => new FuiBlockScrollStrategy(doc),
+};
+
+/**
+ * # FuiOverlayService
+ *
+ * Core service for creating and managing overlays. This service provides a
+ * comprehensive overlay system similar to Angular Material's overlay service,
+ * with support for positioning strategies, scroll strategies, backdrop handling,
+ * and focus management.
+ *
+ * ## Features
+ * - Create overlays with flexible positioning strategies
+ * - Global and connected positioning support
+ * - Multiple scroll strategies (reposition, close, block, noop)
+ * - Backdrop support with click detection
+ * - Z-index management for stacking overlays
+ * - Focus management and restoration
+ * - Keyboard event handling
+ * - Responsive positioning with collision detection
+ *
+ * ## Usage
+ *
+ * ### Basic Overlay
+ * ```typescript
+ * const overlayRef = this.overlay.create({
+ *   positionStrategy: this.overlay.position()
+ *     .global()
+ *     .centerHorizontally()
+ *     .centerVertically(),
+ *   hasBackdrop: true
+ * });
+ *
+ * overlayRef.attach(myComponent);
+ * ```
+ *
+ * ### Connected Overlay (Tooltip/Dropdown)
+ * ```typescript
+ * const overlayRef = this.overlay.create({
+ *   positionStrategy: this.overlay.position()
+ *     .connectedTo(this.triggerElement)
+ *     .withPositions([{
+ *       originX: 'center',
+ *       originY: 'bottom',
+ *       overlayX: 'center',
+ *       overlayY: 'top',
+ *       offsetY: 8
+ *     }]),
+ *   scrollStrategy: this.overlay.scrollStrategies.reposition()
+ * });
+ * ```
+ */
+/** Base z-index for overlays */
+const OVERLAY_BASE_Z_INDEX = 1000;
+/** Z-index increment for each new overlay */
+const OVERLAY_Z_INDEX_INCREMENT = 10;
+class FuiOverlayService {
+    _document = inject(DOCUMENT);
+    _rendererFactory = inject(RendererFactory2);
+    _environmentInjector = inject(EnvironmentInjector);
+    _renderer;
+    _overlayContainer;
+    _nextUniqueId = 0;
+    _activeOverlays = new Set();
+    _currentZIndex = OVERLAY_BASE_Z_INDEX;
+    constructor() {
+        this._renderer = this._rendererFactory.createRenderer(null, null);
+    }
+    /**
+     * Creates a new overlay with the given configuration
+     */
+    create(config = {}) {
+        const overlayElement = this._createOverlayElement();
+        // Calculate z-index for this overlay (increments for each new overlay)
+        const zIndex = this._getNextZIndex();
+        const overlayRef = new FuiOverlayRefImpl(overlayElement, this._applyConfigDefaults(config), this._renderer, `fui-overlay-${this._nextUniqueId++}`, zIndex);
+        // Attach to container
+        this._attachToContainer(overlayElement);
+        // Track active overlay
+        this._activeOverlays.add(overlayRef);
+        // Set up disposal cleanup
+        overlayRef.detachments.subscribe(() => {
+            this._activeOverlays.delete(overlayRef);
+            this._recalculateBaseZIndex();
+        });
+        return overlayRef;
+    }
+    /**
+     * Gets the next available z-index for a new overlay
+     */
+    _getNextZIndex() {
+        this._currentZIndex += OVERLAY_Z_INDEX_INCREMENT;
+        return this._currentZIndex;
+    }
+    /**
+     * Recalculates the base z-index when overlays are disposed
+     * Resets to base if no overlays are active
+     */
+    _recalculateBaseZIndex() {
+        if (this._activeOverlays.size === 0) {
+            this._currentZIndex = OVERLAY_BASE_Z_INDEX;
+        }
+    }
+    /**
+     * Gets the position builder for creating position strategies
+     */
+    position() {
+        return new FuiOverlayPositionBuilder(this._renderer);
+    }
+    /**
+     * Gets the scroll strategies factory
+     */
+    get scrollStrategies() {
+        return FUI_SCROLL_STRATEGIES;
+    }
+    /**
+     * Gets all currently active overlays
+     */
+    getActiveOverlays() {
+        return Array.from(this._activeOverlays);
+    }
+    /**
+     * Disposes all active overlays
+     */
+    disposeAll() {
+        const overlays = Array.from(this._activeOverlays);
+        overlays.forEach((overlay) => {
+            overlay.dispose();
+        });
+    }
+    _createOverlayElement() {
+        const overlayElement = this._renderer.createElement('div');
+        this._renderer.addClass(overlayElement, 'fui-overlay-pane');
+        this._renderer.setStyle(overlayElement, 'pointer-events', 'auto');
+        return overlayElement;
+    }
+    _attachToContainer(overlayElement) {
+        const container = this._getOverlayContainer();
+        this._renderer.appendChild(container, overlayElement);
+    }
+    _getOverlayContainer() {
+        if (!this._overlayContainer) {
+            this._overlayContainer = createComponent(FuiOverlayContainerComponent, {
+                environmentInjector: this._environmentInjector,
+            });
+            // Manually trigger ngOnInit to ensure container is attached to body
+            this._overlayContainer.instance.ngOnInit();
+        }
+        return this._overlayContainer.instance.getContainerElement();
+    }
+    _applyConfigDefaults(config) {
+        return {
+            hasBackdrop: false,
+            backdropClass: 'fui-overlay-backdrop',
+            backdropClickBehavior: 'close',
+            panelClass: '',
+            scrollStrategy: this.scrollStrategies.noop(),
+            direction: 'ltr',
+            disposeOnNavigation: true,
+            ...config,
+        };
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiOverlayService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiOverlayService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiOverlayService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [] });
+/**
+ * # FuiOverlayPositionBuilder
+ *
+ * Builder class for creating position strategies. Provides a fluent API
+ * for configuring overlay positioning.
+ */
+class FuiOverlayPositionBuilder {
+    _renderer;
+    constructor(_renderer) {
+        this._renderer = _renderer;
+    }
+    /**
+     * Creates a global position strategy
+     */
+    global(options = {}) {
+        return new FuiGlobalPositionStrategy(this._renderer, options);
+    }
+    /**
+     * Creates a connected position strategy
+     */
+    connectedTo(origin, positions) {
+        const defaultPositions = [
+            {
+                originX: 'start',
+                originY: 'bottom',
+                overlayX: 'start',
+                overlayY: 'top',
+            },
+            {
+                originX: 'start',
+                originY: 'top',
+                overlayX: 'start',
+                overlayY: 'bottom',
+            },
+        ];
+        const options = {
+            origin,
+            positions: positions ?? defaultPositions,
+        };
+        return new FuiConnectedPositionStrategy(this._renderer, options);
+    }
+    /**
+     * Creates a flexible connected position strategy with common tooltip positions
+     */
+    flexibleConnectedTo(origin, preferredPosition = 'top') {
+        const positions = this._getFlexiblePositions(preferredPosition);
+        const options = {
+            origin,
+            positions,
+            withPush: true,
+            withFlexibleDimensions: true,
+            viewportMargin: 8,
+        };
+        return new FuiConnectedPositionStrategy(this._renderer, options);
+    }
+    _getFlexiblePositions(preferredPosition) {
+        const positions = [];
+        switch (preferredPosition) {
+            case 'top':
+                positions.push({ originX: 'center', originY: 'top', overlayX: 'center', overlayY: 'bottom', offsetY: -8 }, { originX: 'center', originY: 'bottom', overlayX: 'center', overlayY: 'top', offsetY: 8 }, { originX: 'end', originY: 'center', overlayX: 'start', overlayY: 'center', offsetX: 8 }, { originX: 'start', originY: 'center', overlayX: 'end', overlayY: 'center', offsetX: -8 });
+                break;
+            case 'bottom':
+                positions.push({ originX: 'center', originY: 'bottom', overlayX: 'center', overlayY: 'top', offsetY: 8 }, { originX: 'center', originY: 'top', overlayX: 'center', overlayY: 'bottom', offsetY: -8 }, { originX: 'end', originY: 'center', overlayX: 'start', overlayY: 'center', offsetX: 8 }, { originX: 'start', originY: 'center', overlayX: 'end', overlayY: 'center', offsetX: -8 });
+                break;
+            case 'left':
+                positions.push({ originX: 'start', originY: 'center', overlayX: 'end', overlayY: 'center', offsetX: -8 }, { originX: 'end', originY: 'center', overlayX: 'start', overlayY: 'center', offsetX: 8 }, { originX: 'center', originY: 'top', overlayX: 'center', overlayY: 'bottom', offsetY: -8 }, { originX: 'center', originY: 'bottom', overlayX: 'center', overlayY: 'top', offsetY: 8 });
+                break;
+            case 'right':
+                positions.push({ originX: 'end', originY: 'center', overlayX: 'start', overlayY: 'center', offsetX: 8 }, { originX: 'start', originY: 'center', overlayX: 'end', overlayY: 'center', offsetX: -8 }, { originX: 'center', originY: 'top', overlayX: 'center', overlayY: 'bottom', offsetY: -8 }, { originX: 'center', originY: 'bottom', overlayX: 'center', overlayY: 'top', offsetY: 8 });
+                break;
+        }
+        return positions;
+    }
+}
+
+/**
+ * # Portal Service
+ *
+ * A service for dynamically moving DOM elements to different locations in the DOM tree,
+ * particularly useful for moving elements to the document body to avoid clipping issues
+ * with parent containers that have overflow: hidden.
+ *
+ * ## Features
+ * - Move elements to document body or any other container
+ * - Maintain element references and event listeners
+ * - Proper cleanup when detaching
+ * - Support for multiple portal outlets
+ *
+ * ## Usage
+ *
+ * ```typescript
+ * constructor(private portalService: PortalService) {}
+ *
+ * openMenu() {
+ *   const menuElement = this.menuElementRef.nativeElement;
+ *   this.portalAttachment = this.portalService.attachToBody(menuElement);
+ * }
+ *
+ * closeMenu() {
+ *   if (this.portalAttachment) {
+ *     this.portalAttachment.detach();
+ *     this.portalAttachment = null;
+ *   }
+ * }
+ * ```
+ */
+class PortalService {
+    _document = inject(DOCUMENT$1);
+    _renderer;
+    _rendererFactory = inject(RendererFactory2);
+    constructor() {
+        this._renderer = this._rendererFactory.createRenderer(null, null);
+    }
+    /**
+     * Attaches an element to the document body
+     * @param element The element to attach
+     * @returns PortalAttachment with detach function
+     */
+    attachToBody(element) {
+        return this.attachToContainer(element, this._document.body);
+    }
+    /**
+     * Attaches an element to a specific container
+     * @param element The element to attach
+     * @param container The container to attach to
+     * @returns PortalAttachment with detach function
+     */
+    attachToContainer(element, container) {
+        // Store the original parent and next sibling for restoration
+        const originalParent = element.parentElement;
+        const originalNextSibling = element.nextSibling;
+        // Move the element to the container
+        this._renderer.appendChild(container, element);
+        // Return attachment object with detach function
+        return {
+            element,
+            detach: () => {
+                // Restore the element to its original position
+                if (originalParent) {
+                    if (originalNextSibling) {
+                        this._renderer.insertBefore(originalParent, element, originalNextSibling);
+                    }
+                    else {
+                        this._renderer.appendChild(originalParent, element);
+                    }
+                }
+            },
+        };
+    }
+    /**
+     * Creates a portal outlet element and attaches it to the document body
+     * @param className Optional CSS class for the outlet
+     * @returns The created outlet element
+     */
+    createBodyOutlet(className) {
+        const outlet = this._renderer.createElement('div');
+        if (className) {
+            this._renderer.addClass(outlet, className);
+        }
+        // Add some default styles to ensure proper positioning
+        this._renderer.setStyle(outlet, 'position', 'absolute');
+        this._renderer.setStyle(outlet, 'top', '0');
+        this._renderer.setStyle(outlet, 'left', '0');
+        this._renderer.setStyle(outlet, 'pointer-events', 'none');
+        this._renderer.setStyle(outlet, 'z-index', '1000');
+        this._renderer.appendChild(this._document.body, outlet);
+        return outlet;
+    }
+    /**
+     * Removes a portal outlet from the document
+     * @param outlet The outlet element to remove
+     */
+    removeOutlet(outlet) {
+        if (outlet.parentElement) {
+            this._renderer.removeChild(outlet.parentElement, outlet);
+        }
+    }
+    /**
+     * Checks if an element is currently attached to a portal
+     * @param element The element to check
+     * @returns True if the element is attached to the body or not in its original position
+     */
+    isAttachedToPortal(element) {
+        // Simple check: if the element's parent is the body, it's likely in a portal
+        // This is a heuristic and might need refinement based on specific use cases
+        return element.parentElement === this._document.body;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: PortalService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: PortalService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: PortalService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [] });
+
+// Core overlay exports
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { FUI_OVERLAY_CONTAINER, FUI_OVERLAY_SCROLL_STRATEGY, FUI_SCROLL_STRATEGIES, FuiBlockScrollStrategy, FuiCloseScrollStrategy, FuiConnectedPositionStrategy, FuiGlobalPositionStrategy, FuiNoopScrollStrategy, FuiOverlayContainerComponent, FuiOverlayPositionBuilder, FuiOverlayRefImpl, FuiOverlayService, FuiRepositionScrollStrategy, PortalService };
+//# sourceMappingURL=raintonic-formaui-cdk-overlay.mjs.map