@raintonic/formaui 0.2.0

package/fesm2022/raintonic-formaui-services-dialog.mjs

@@ -0,0 +1,798 @@
+import * as i0 from '@angular/core';
+import { InjectionToken, inject, ElementRef, signal, computed, HostListener, ViewChild, ChangeDetectionStrategy, Component, ViewEncapsulation, EnvironmentInjector, Injector, ApplicationRef, TemplateRef, createComponent, Injectable } from '@angular/core';
+import { Subject, defer } from 'rxjs';
+import { filter, startWith, map } from 'rxjs/operators';
+import { FuiOverlayService } from '@raintonic/formaui/cdk/overlay';
+import { DOCUMENT } from '@angular/common';
+import { FuiIconComponent } from '@raintonic/formaui/components/icon';
+import { FuiButtonDirective } from '@raintonic/formaui/components/button';
+
+/**
+ * Injection token for dialog data passed to the dialog component
+ */
+const FUI_DIALOG_DATA = new InjectionToken('FuiDialogData');
+/**
+ * Injection token for the dialog scroll strategy
+ */
+const FUI_DIALOG_DEFAULT_OPTIONS = new InjectionToken('FuiDialogDefaultOptions');
+
+/**
+ * # FuiDialogRefImpl
+ *
+ * Implementation of the FuiDialogRef interface. This class manages the lifecycle
+ * of an individual dialog instance, providing methods to close, update position/size,
+ * and observe dialog events.
+ *
+ * ## Features
+ * - Dialog result handling
+ * - Position and size updates
+ * - Event observables (backdrop click, keydown, lifecycle)
+ * - CSS class management
+ * - Focus management integration
+ */
+class FuiDialogRef {
+    _overlayRef;
+    _config;
+    _id;
+    _componentInstance = null;
+    _result;
+    _state = 'enter';
+    // Event subjects
+    _afterOpened = new Subject();
+    _beforeClosed = new Subject();
+    _afterClosed = new Subject();
+    // Configuration
+    disableClose;
+    constructor(_overlayRef, _config, id) {
+        this._overlayRef = _overlayRef;
+        this._config = _config;
+        this._id = id ?? this._generateId();
+        this.disableClose = _config.disableClose ?? false;
+        this._setupEventHandlers();
+    }
+    /** Unique ID for this dialog instance */
+    get id() {
+        return this._id;
+    }
+    /** The component instance if the dialog was created with a component */
+    get componentInstance() {
+        return this._componentInstance;
+    }
+    /** Sets the component instance (internal use) */
+    set componentInstance(instance) {
+        this._componentInstance = instance;
+    }
+    /** Observable that emits when the dialog has been opened */
+    get afterOpened() {
+        return this._afterOpened.asObservable();
+    }
+    /** Observable that emits when the dialog has started closing */
+    get beforeClosed() {
+        return this._beforeClosed.asObservable();
+    }
+    /** Observable that emits when the dialog has finished closing */
+    get afterClosed() {
+        return this._afterClosed.asObservable();
+    }
+    /** Observable that emits when the backdrop is clicked */
+    get backdropClick() {
+        return this._overlayRef.backdropClick;
+    }
+    /** Observable that emits when a keydown event occurs on the overlay */
+    get keydownEvents() {
+        return this._overlayRef.keydownEvents;
+    }
+    /**
+     * Closes the dialog with an optional result
+     */
+    close(dialogResult) {
+        if (this._state === 'exit') {
+            return;
+        }
+        this._result = dialogResult;
+        this._state = 'exit';
+        // Emit before closed event
+        this._beforeClosed.next(dialogResult);
+        this._beforeClosed.complete();
+        // Get animation duration from config
+        const exitDuration = this._parseAnimationDuration(this._config.exitAnimationDuration);
+        if (exitDuration > 0) {
+            // Add exit animation class
+            this._overlayRef.addPanelClass('fui-dialog-exit');
+            // Wait for animation then dispose
+            setTimeout(() => {
+                this._finishDialogClose();
+            }, exitDuration);
+        }
+        else {
+            this._finishDialogClose();
+        }
+    }
+    /**
+     * Updates the dialog's position
+     */
+    updatePosition(position) {
+        const strategy = this._overlayRef.getConfig().positionStrategy;
+        if (strategy) {
+            if (position?.left || position?.right) {
+                if (position?.left) {
+                    strategy.left(position.left);
+                }
+                else if (position?.right) {
+                    strategy.right(position.right);
+                }
+            }
+            else {
+                strategy.centerHorizontally();
+            }
+            if (position?.top || position?.bottom) {
+                if (position?.top) {
+                    strategy.top(position.top);
+                }
+                else if (position?.bottom) {
+                    strategy.bottom(position.bottom);
+                }
+            }
+            else {
+                strategy.centerVertically();
+            }
+            this._overlayRef.updatePosition();
+        }
+    }
+    /**
+     * Updates the dialog's dimensions
+     */
+    updateSize(width, height) {
+        this._overlayRef.updateSize({
+            width: width ?? undefined,
+            height: height ?? undefined,
+        });
+    }
+    /**
+     * Adds CSS classes to the dialog panel
+     */
+    addPanelClass(classes) {
+        this._overlayRef.addPanelClass(classes);
+    }
+    /**
+     * Removes CSS classes from the dialog panel
+     */
+    removePanelClass(classes) {
+        this._overlayRef.removePanelClass(classes);
+    }
+    /**
+     * Gets the current state of the dialog's lifecycle
+     */
+    getState() {
+        return this._state;
+    }
+    /**
+     * Notifies that the dialog has been opened (internal use)
+     */
+    _notifyOpened() {
+        this._afterOpened.next();
+        this._afterOpened.complete();
+    }
+    _setupEventHandlers() {
+        // Handle backdrop clicks
+        this._overlayRef.backdropClick.subscribe(() => {
+            if (!this.disableClose) {
+                this.close();
+            }
+        });
+        // Handle escape key
+        this._overlayRef.keydownEvents
+            .pipe(filter((event) => event.key === 'Escape' && !this.disableClose))
+            .subscribe((event) => {
+            event.preventDefault();
+            this.close();
+        });
+    }
+    _finishDialogClose() {
+        // Dispose the overlay
+        this._overlayRef.dispose();
+        // Emit after closed event
+        this._afterClosed.next(this._result);
+        this._afterClosed.complete();
+    }
+    _parseAnimationDuration(duration) {
+        if (duration === undefined) {
+            return 200; // Default 200ms
+        }
+        if (typeof duration === 'number') {
+            return duration;
+        }
+        // Parse CSS duration string (e.g., '200ms', '0.2s')
+        const match = /^(\d+(?:\.\d+)?)(ms|s)$/.exec(duration);
+        if (match) {
+            const value = parseFloat(match[1]);
+            const unit = match[2];
+            return unit === 's' ? value * 1000 : value;
+        }
+        return 200;
+    }
+    _generateId() {
+        return `fui-dialog-${Math.random().toString(36).substr(2, 9)}`;
+    }
+}
+
+/**
+ * # FuiDialogContainerComponent
+ *
+ * Internal container component that hosts the dialog content. This component
+ * handles focus trapping, animations, and accessibility attributes.
+ *
+ * ## Features
+ * - Focus trapping within the dialog
+ * - Configurable ARIA attributes
+ * - Enter/exit animations
+ * - Focus restoration on close
+ */
+class FuiDialogContainerComponent {
+    _document = inject(DOCUMENT);
+    _elementRef = inject((ElementRef));
+    _dialogContainer;
+    /** Configuration for the dialog */
+    config;
+    /** The previously focused element before the dialog was opened */
+    _elementFocusedBeforeDialogWasOpened = null;
+    /** Animation state of the dialog */
+    animationState = signal('void', ...(ngDevMode ? [{ debugName: "animationState" }] : /* istanbul ignore next */ []));
+    /** Whether the dialog is currently animating */
+    isAnimating = computed(() => this.animationState() !== 'void', ...(ngDevMode ? [{ debugName: "isAnimating" }] : /* istanbul ignore next */ []));
+    ngAfterViewInit() {
+        this._trapFocus();
+    }
+    ngOnDestroy() {
+        this._restoreFocus();
+    }
+    /**
+     * Handles keydown events for focus trap cycling within the dialog.
+     * Tab loops from last to first focusable element, Shift+Tab from first to last.
+     */
+    _onKeydown(event) {
+        if (event.key === 'Tab') {
+            const focusableElements = this._getFocusableElements();
+            if (focusableElements.length === 0) {
+                event.preventDefault();
+                return;
+            }
+            const firstFocusable = focusableElements[0];
+            const lastFocusable = focusableElements[focusableElements.length - 1];
+            const activeElement = this._document.activeElement;
+            if (event.shiftKey) {
+                // Shift+Tab: if on first element, wrap to last
+                if (activeElement === firstFocusable || activeElement === this._dialogContainer.nativeElement) {
+                    event.preventDefault();
+                    lastFocusable.focus();
+                }
+            }
+            else {
+                // Tab: if on last element, wrap to first
+                if (activeElement === lastFocusable) {
+                    event.preventDefault();
+                    firstFocusable.focus();
+                }
+            }
+        }
+    }
+    /**
+     * Initializes the dialog container with the given configuration
+     */
+    _initializeWithConfig(config) {
+        this.config = config;
+    }
+    /**
+     * Starts the enter animation
+     */
+    _startEnterAnimation() {
+        this.animationState.set('enter');
+    }
+    /**
+     * Starts the exit animation
+     */
+    _startExitAnimation() {
+        this.animationState.set('exit');
+    }
+    /**
+     * Gets the native element of the container
+     */
+    _getHostElement() {
+        return this._elementRef.nativeElement;
+    }
+    /**
+     * Saves the element that was focused before the dialog opened and traps focus
+     */
+    _trapFocus() {
+        // Store the currently focused element
+        this._elementFocusedBeforeDialogWasOpened = this._document.activeElement;
+        // Focus the dialog container
+        const autoFocus = this.config?.autoFocus ?? 'first-tabbable';
+        if (autoFocus === false || autoFocus === 'dialog') {
+            // Focus the dialog container itself
+            this._dialogContainer.nativeElement.focus();
+        }
+        else if (autoFocus === 'first-tabbable') {
+            this._focusFirstTabbableElement();
+        }
+        else if (autoFocus === 'first-heading') {
+            this._focusFirstHeading();
+        }
+        else if (typeof autoFocus === 'string') {
+            // Focus a specific element by selector
+            this._focusBySelector(autoFocus);
+        }
+        else {
+            // Default: focus first tabbable
+            this._focusFirstTabbableElement();
+        }
+    }
+    /**
+     * Focuses the first tabbable element within the dialog
+     */
+    _focusFirstTabbableElement() {
+        const focusableElements = this._getFocusableElements();
+        if (focusableElements.length > 0) {
+            focusableElements[0].focus();
+        }
+        else {
+            // Fallback to container
+            this._dialogContainer.nativeElement.focus();
+        }
+    }
+    /**
+     * Focuses the first heading element within the dialog
+     */
+    _focusFirstHeading() {
+        const heading = this._dialogContainer.nativeElement.querySelector('h1, h2, h3, h4, h5, h6, [role="heading"]');
+        if (heading) {
+            // Make heading focusable if it's not already
+            if (!heading.hasAttribute('tabindex')) {
+                heading.setAttribute('tabindex', '-1');
+            }
+            heading.focus();
+        }
+        else {
+            this._focusFirstTabbableElement();
+        }
+    }
+    /**
+     * Focuses an element matching the given selector
+     */
+    _focusBySelector(selector) {
+        const element = this._dialogContainer.nativeElement.querySelector(selector);
+        if (element) {
+            element.focus();
+        }
+        else {
+            this._focusFirstTabbableElement();
+        }
+    }
+    /**
+     * Gets all focusable elements within the dialog
+     */
+    _getFocusableElements() {
+        const focusableSelectors = [
+            'a[href]',
+            'button:not([disabled])',
+            'textarea:not([disabled])',
+            'input:not([disabled])',
+            'select:not([disabled])',
+            '[tabindex]:not([tabindex="-1"])',
+            '[contenteditable="true"]',
+        ].join(',');
+        return Array.from(this._dialogContainer.nativeElement.querySelectorAll(focusableSelectors)).filter((el) => {
+            // Filter out elements that are not visible
+            return el.offsetParent !== null;
+        });
+    }
+    /**
+     * Restores focus to the element that was focused before the dialog opened
+     */
+    _restoreFocus() {
+        const shouldRestoreFocus = this.config?.restoreFocus !== false;
+        if (shouldRestoreFocus && this._elementFocusedBeforeDialogWasOpened) {
+            // Check if the element is still in the DOM and can receive focus
+            if (typeof this._elementFocusedBeforeDialogWasOpened.focus === 'function') {
+                this._elementFocusedBeforeDialogWasOpened.focus();
+            }
+        }
+        this._elementFocusedBeforeDialogWasOpened = null;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiDialogContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.6", type: FuiDialogContainerComponent, isStandalone: true, selector: "fui-dialog-container", host: { listeners: { "keydown": "_onKeydown($event)" }, classAttribute: "fui-dialog-container-host" }, viewQueries: [{ propertyName: "_dialogContainer", first: true, predicate: ["dialogContainer"], descendants: true, static: true }], ngImport: i0, template: `
+    <div
+      #dialogContainer
+      class="fui-dialog-container"
+      [class.fui-dialog-enter]="animationState() === 'enter'"
+      [class.fui-dialog-exit]="animationState() === 'exit'"
+      [attr.role]="config.role || 'dialog'"
+      [attr.aria-modal]="true"
+      [attr.aria-label]="config.ariaLabel"
+      [attr.aria-labelledby]="config.ariaLabelledBy"
+      [attr.aria-describedby]="config.ariaDescribedBy"
+      tabindex="-1"
+    >
+      <div class="fui-dialog-content" aria-live="polite">
+        <ng-content></ng-content>
+      </div>
+    </div>
+  `, isInline: true, styles: [":host{display:block;outline:0}.fui-dialog-container{display:flex;flex-direction:column;box-sizing:border-box;overflow:auto;outline:0;max-height:inherit;border:1px solid var(--fui-border-color);border-radius:var(--fui-border-radius-md);background:var(--fui-surface-00);box-shadow:var(--fui-dialog-box-shadow, var(--fui-shadow-05))}.fui-dialog-content{display:contents}.fui-dialog-enter{animation:fui-dialog-enter var(--fui-duration-moderate-02) var(--fui-ease-entrance)}.fui-dialog-exit{animation:fui-dialog-exit var(--fui-duration-moderate-01) var(--fui-ease-exit)}@keyframes fui-dialog-enter{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes fui-dialog-exit{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.95)}}@media(prefers-reduced-motion:reduce){.fui-dialog-enter,.fui-dialog-exit{animation:none}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiDialogContainerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fui-dialog-container', standalone: true, imports: [], template: `
+    <div
+      #dialogContainer
+      class="fui-dialog-container"
+      [class.fui-dialog-enter]="animationState() === 'enter'"
+      [class.fui-dialog-exit]="animationState() === 'exit'"
+      [attr.role]="config.role || 'dialog'"
+      [attr.aria-modal]="true"
+      [attr.aria-label]="config.ariaLabel"
+      [attr.aria-labelledby]="config.ariaLabelledBy"
+      [attr.aria-describedby]="config.ariaDescribedBy"
+      tabindex="-1"
+    >
+      <div class="fui-dialog-content" aria-live="polite">
+        <ng-content></ng-content>
+      </div>
+    </div>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'fui-dialog-container-host',
+                    }, styles: [":host{display:block;outline:0}.fui-dialog-container{display:flex;flex-direction:column;box-sizing:border-box;overflow:auto;outline:0;max-height:inherit;border:1px solid var(--fui-border-color);border-radius:var(--fui-border-radius-md);background:var(--fui-surface-00);box-shadow:var(--fui-dialog-box-shadow, var(--fui-shadow-05))}.fui-dialog-content{display:contents}.fui-dialog-enter{animation:fui-dialog-enter var(--fui-duration-moderate-02) var(--fui-ease-entrance)}.fui-dialog-exit{animation:fui-dialog-exit var(--fui-duration-moderate-01) var(--fui-ease-exit)}@keyframes fui-dialog-enter{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes fui-dialog-exit{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.95)}}@media(prefers-reduced-motion:reduce){.fui-dialog-enter,.fui-dialog-exit{animation:none}}\n"] }]
+        }], propDecorators: { _dialogContainer: [{
+                type: ViewChild,
+                args: ['dialogContainer', { static: true }]
+            }], _onKeydown: [{
+                type: HostListener,
+                args: ['keydown', ['$event']]
+            }] } });
+
+class FuiConfirmDialogComponent {
+    data = inject(FUI_DIALOG_DATA);
+    dialogRef = inject(FuiDialogRef);
+    title = this.data.title;
+    message = this.data.message;
+    confirmText = this.data.confirmText ?? 'Confirm';
+    cancelText = this.data.cancelText ?? 'Cancel';
+    variant = this.data.variant ?? 'info';
+    icon = computed(() => {
+        switch (this.variant) {
+            case 'warning':
+                return 'warning-diamond';
+            case 'danger':
+                return 'warning-octagon';
+            default:
+                return 'info';
+        }
+    }, ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
+    confirmButtonVariant = computed(() => {
+        switch (this.variant) {
+            case 'danger':
+                return 'danger';
+            case 'warning':
+                return 'primary';
+            default:
+                return 'primary';
+        }
+    }, ...(ngDevMode ? [{ debugName: "confirmButtonVariant" }] : /* istanbul ignore next */ []));
+    onConfirm() {
+        this.dialogRef.close(true);
+    }
+    onCancel() {
+        this.dialogRef.close(false);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiConfirmDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.6", type: FuiConfirmDialogComponent, isStandalone: true, selector: "fui-confirm-dialog", host: { classAttribute: "fui-confirm-dialog" }, ngImport: i0, template: "<div class=\"fui-confirm-dialog__header\">\n  <fui-icon class=\"fui-confirm-dialog__icon fui-confirm-dialog__icon--{{ variant }}\" [name]=\"icon()\" size=\"lg\" />\n  <h2 class=\"fui-confirm-dialog__title\" id=\"confirm-dialog-title\">{{ title }}</h2>\n</div>\n\n<div class=\"fui-confirm-dialog__body\" id=\"confirm-dialog-description\">\n  <p class=\"fui-confirm-dialog__message\">{{ message }}</p>\n</div>\n\n<div class=\"fui-confirm-dialog__actions\">\n  <button fuiButton variant=\"ghost\" (click)=\"onCancel()\">{{ cancelText }}</button>\n  <button fuiButton [variant]=\"confirmButtonVariant()\" (click)=\"onConfirm()\">{{ confirmText }}</button>\n</div>\n", styles: [".fui-confirm-dialog{display:flex;flex-direction:column;padding:var(--fui-padding-24, 1.5rem)}.fui-confirm-dialog__header{display:flex;align-items:center;gap:var(--fui-gap-12, .75rem);margin-bottom:var(--fui-gap-16, 1rem)}.fui-confirm-dialog__icon{flex-shrink:0}.fui-confirm-dialog__icon--info{color:var(--fui-info)}.fui-confirm-dialog__icon--warning{color:var(--fui-warning)}.fui-confirm-dialog__icon--danger{color:var(--fui-danger)}.fui-confirm-dialog__title{font-family:var(--fui-font-family-sans);font-size:var(--fui-font-size-04);font-weight:var(--fui-font-weight-semibold, 600);color:var(--fui-text-primary);margin:0}.fui-confirm-dialog__body{margin-bottom:var(--fui-padding-24, 1.5rem)}.fui-confirm-dialog__message{font-size:var(--fui-font-size-02);color:var(--fui-text-secondary);line-height:1.5;margin:0}.fui-confirm-dialog__actions{display:flex;justify-content:flex-end;gap:var(--fui-gap-8, .5rem)}\n"], dependencies: [{ kind: "component", type: FuiIconComponent, selector: "fui-icon", inputs: ["name", "size", "weight", "color", "ariaLabel", "spin", "pulse"] }, { kind: "directive", type: FuiButtonDirective, selector: "button[fuiButton], a[fuiButton]", inputs: ["variant", "size", "disabled", "fullWidth", "loading", "iconOnly", "aria-label", "type"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiConfirmDialogComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fui-confirm-dialog', standalone: true, imports: [FuiIconComponent, FuiButtonDirective], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: { class: 'fui-confirm-dialog' }, template: "<div class=\"fui-confirm-dialog__header\">\n  <fui-icon class=\"fui-confirm-dialog__icon fui-confirm-dialog__icon--{{ variant }}\" [name]=\"icon()\" size=\"lg\" />\n  <h2 class=\"fui-confirm-dialog__title\" id=\"confirm-dialog-title\">{{ title }}</h2>\n</div>\n\n<div class=\"fui-confirm-dialog__body\" id=\"confirm-dialog-description\">\n  <p class=\"fui-confirm-dialog__message\">{{ message }}</p>\n</div>\n\n<div class=\"fui-confirm-dialog__actions\">\n  <button fuiButton variant=\"ghost\" (click)=\"onCancel()\">{{ cancelText }}</button>\n  <button fuiButton [variant]=\"confirmButtonVariant()\" (click)=\"onConfirm()\">{{ confirmText }}</button>\n</div>\n", styles: [".fui-confirm-dialog{display:flex;flex-direction:column;padding:var(--fui-padding-24, 1.5rem)}.fui-confirm-dialog__header{display:flex;align-items:center;gap:var(--fui-gap-12, .75rem);margin-bottom:var(--fui-gap-16, 1rem)}.fui-confirm-dialog__icon{flex-shrink:0}.fui-confirm-dialog__icon--info{color:var(--fui-info)}.fui-confirm-dialog__icon--warning{color:var(--fui-warning)}.fui-confirm-dialog__icon--danger{color:var(--fui-danger)}.fui-confirm-dialog__title{font-family:var(--fui-font-family-sans);font-size:var(--fui-font-size-04);font-weight:var(--fui-font-weight-semibold, 600);color:var(--fui-text-primary);margin:0}.fui-confirm-dialog__body{margin-bottom:var(--fui-padding-24, 1.5rem)}.fui-confirm-dialog__message{font-size:var(--fui-font-size-02);color:var(--fui-text-secondary);line-height:1.5;margin:0}.fui-confirm-dialog__actions{display:flex;justify-content:flex-end;gap:var(--fui-gap-8, .5rem)}\n"] }]
+        }] });
+
+/**
+ * # FuiDialogService
+ *
+ * Service for opening modal dialogs. This service provides a comprehensive
+ * dialog system similar to Angular Material's MatDialog, built on top of
+ * the FuiOverlayService.
+ *
+ * ## Features
+ * - Open dialogs with components or templates
+ * - Pass data to dialog components
+ * - Configure positioning, sizing, and behavior
+ * - Get results from dialogs via observables
+ * - Manage multiple open dialogs
+ * - Automatic focus management and accessibility
+ *
+ * ## Usage
+ *
+ * ### Opening a Component Dialog
+ * ```typescript
+ * const dialogRef = this.dialog.open(MyDialogComponent, {
+ *   width: '400px',
+ *   data: { name: 'John' }
+ * });
+ *
+ * dialogRef.afterClosed().subscribe(result => {
+ *   console.log('Dialog result:', result);
+ * });
+ * ```
+ *
+ * ### Opening a Template Dialog
+ * ```typescript
+ * const dialogRef = this.dialog.open(myTemplateRef, {
+ *   width: '300px',
+ *   hasBackdrop: true
+ * });
+ * ```
+ *
+ * ### Accessing Data in Dialog Component
+ * ```typescript
+ * export class MyDialogComponent {
+ *   private readonly data = inject(FUI_DIALOG_DATA);
+ *   private readonly dialogRef = inject(FuiDialogRef);
+ *
+ *   onClose() {
+ *     this.dialogRef.close('result');
+ *   }
+ * }
+ * ```
+ */
+class FuiDialogService {
+    _overlayService = inject(FuiOverlayService);
+    _environmentInjector = inject(EnvironmentInjector);
+    _injector = inject(Injector);
+    _appRef = inject(ApplicationRef);
+    _openDialogs = [];
+    _afterOpenedSubject = new Subject();
+    _afterAllClosedSubject = new Subject();
+    _nextUniqueId = 0;
+    /**
+     * Observable that emits when a dialog is opened
+     */
+    afterOpened = this._afterOpenedSubject.asObservable();
+    /**
+     * Observable that emits when all dialogs are closed
+     */
+    afterAllClosed = defer(() => this._openDialogs.length ? this._getAfterAllClosed() : this._getAfterAllClosed().pipe(startWith(undefined)));
+    /**
+     * Gets all currently open dialogs
+     */
+    get openDialogs() {
+        return this._openDialogs.slice();
+    }
+    /**
+     * Opens a dialog containing the given component or template
+     * @param componentOrTemplateRef Component type or TemplateRef to display
+     * @param config Configuration options for the dialog
+     * @returns Reference to the opened dialog
+     */
+    open(componentOrTemplateRef, config) {
+        const mergedConfig = this._applyConfigDefaults(config);
+        const overlayRef = this._createOverlay(mergedConfig);
+        const dialogContainer = this._attachDialogContainer(overlayRef, mergedConfig);
+        const dialogRef = this._createDialogRef(overlayRef, dialogContainer, mergedConfig);
+        if (componentOrTemplateRef instanceof TemplateRef) {
+            this._attachTemplateContent(dialogContainer, componentOrTemplateRef, dialogRef);
+        }
+        else {
+            const componentRef = this._attachComponentContent(dialogContainer, componentOrTemplateRef, dialogRef, mergedConfig);
+            dialogRef.componentInstance = componentRef.instance;
+        }
+        // Track open dialogs
+        this._openDialogs.push(dialogRef);
+        // Handle dialog close
+        dialogRef.afterClosed.subscribe(() => {
+            this._removeOpenDialog(dialogRef);
+        });
+        // Start enter animation and notify opened
+        dialogContainer._startEnterAnimation();
+        // Notify that dialog has been opened
+        requestAnimationFrame(() => {
+            dialogRef._notifyOpened();
+            this._afterOpenedSubject.next(dialogRef);
+        });
+        return dialogRef;
+    }
+    /**
+     * Closes all open dialogs
+     */
+    closeAll() {
+        const dialogs = this._openDialogs.slice();
+        dialogs.forEach((dialog) => {
+            dialog.close();
+        });
+    }
+    /**
+     * Gets a dialog by its ID
+     * @param id Dialog ID
+     * @returns The dialog reference or undefined
+     */
+    getDialogById(id) {
+        return this._openDialogs.find((dialog) => dialog.id === id);
+    }
+    _createOverlay(config) {
+        const overlayConfig = this._getOverlayConfig(config);
+        return this._overlayService.create(overlayConfig);
+    }
+    _getOverlayConfig(config) {
+        // Create position strategy
+        const positionStrategy = this._overlayService.position().global();
+        // Apply positioning
+        if (config.position?.left || config.position?.right) {
+            if (config.position.left) {
+                positionStrategy.left(config.position.left);
+            }
+            else if (config.position.right) {
+                positionStrategy.right(config.position.right);
+            }
+        }
+        else {
+            positionStrategy.centerHorizontally();
+        }
+        if (config.position?.top || config.position?.bottom) {
+            if (config.position.top) {
+                positionStrategy.top(config.position.top);
+            }
+            else if (config.position.bottom) {
+                positionStrategy.bottom(config.position.bottom);
+            }
+        }
+        else {
+            positionStrategy.centerVertically();
+        }
+        return {
+            positionStrategy,
+            scrollStrategy: this._overlayService.scrollStrategies.block(),
+            hasBackdrop: config.hasBackdrop ?? true,
+            backdropClass: this._getBackdropClass(config),
+            backdropClickBehavior: config.disableClose ? 'ignore' : 'close',
+            panelClass: this._getPanelClass(config),
+            width: config.width,
+            height: config.height,
+            minWidth: config.minWidth,
+            minHeight: config.minHeight,
+            maxWidth: config.maxWidth,
+            maxHeight: config.maxHeight,
+            direction: config.direction,
+        };
+    }
+    _getBackdropClass(config) {
+        const baseClass = 'fui-dialog-backdrop';
+        let customClasses = [];
+        if (config.backdropClass) {
+            customClasses = Array.isArray(config.backdropClass) ? config.backdropClass : [config.backdropClass];
+        }
+        return [baseClass, ...customClasses];
+    }
+    _getPanelClass(config) {
+        const baseClass = 'fui-dialog-panel';
+        let customPanelClasses = [];
+        if (config.panelClass) {
+            customPanelClasses = Array.isArray(config.panelClass) ? config.panelClass : [config.panelClass];
+        }
+        return [baseClass, ...customPanelClasses];
+    }
+    _attachDialogContainer(overlayRef, config) {
+        const containerRef = createComponent(FuiDialogContainerComponent, {
+            environmentInjector: this._environmentInjector,
+        });
+        // Initialize the container with config
+        containerRef.instance._initializeWithConfig(config);
+        // Trigger change detection
+        containerRef.changeDetectorRef.detectChanges();
+        // Attach to overlay
+        overlayRef.attach(containerRef);
+        return containerRef.instance;
+    }
+    _createDialogRef(overlayRef, container, config) {
+        const dialogId = config.id ?? `fui-dialog-${this._nextUniqueId++}`;
+        return new FuiDialogRef(overlayRef, config, dialogId);
+    }
+    _attachComponentContent(container, component, dialogRef, config) {
+        // Create custom injector with dialog data and ref
+        const providers = [
+            { provide: FUI_DIALOG_DATA, useValue: config.data },
+            { provide: FuiDialogRef, useValue: dialogRef },
+        ];
+        const injector = Injector.create({
+            parent: config.injector ?? this._injector,
+            providers,
+        });
+        // Create the component
+        const componentRef = createComponent(component, {
+            environmentInjector: this._environmentInjector,
+            elementInjector: injector,
+        });
+        // Attach to ApplicationRef to connect it to Angular's change detection tree
+        // This is crucial for form controls and event bindings to work properly
+        this._appRef.attachView(componentRef.hostView);
+        // Append to container
+        const hostElement = container._getHostElement();
+        const containerElement = hostElement.querySelector('.fui-dialog-container');
+        if (containerElement) {
+            containerElement.appendChild(componentRef.location.nativeElement);
+        }
+        // Trigger change detection
+        componentRef.changeDetectorRef.detectChanges();
+        return componentRef;
+    }
+    _attachTemplateContent(container, template, dialogRef) {
+        // Create the embedded view
+        const context = { $implicit: dialogRef };
+        const viewRef = template.createEmbeddedView(context);
+        // Attach to ApplicationRef to connect it to Angular's change detection tree
+        this._appRef.attachView(viewRef);
+        // Append to container
+        const hostElement = container._getHostElement();
+        const containerElement = hostElement.querySelector('.fui-dialog-container');
+        if (containerElement) {
+            viewRef.rootNodes.forEach((node) => {
+                containerElement.appendChild(node);
+            });
+        }
+        // Mark for check
+        viewRef.detectChanges();
+        return viewRef;
+    }
+    _removeOpenDialog(dialogRef) {
+        const index = this._openDialogs.indexOf(dialogRef);
+        if (index > -1) {
+            this._openDialogs.splice(index, 1);
+            // Emit if all dialogs are closed
+            if (this._openDialogs.length === 0) {
+                this._afterAllClosedSubject.next();
+            }
+        }
+    }
+    _getAfterAllClosed() {
+        return this._afterAllClosedSubject.asObservable();
+    }
+    /**
+     * Opens a confirmation dialog and returns an Observable<boolean>.
+     * Resolves to `true` when confirmed, `false` when cancelled, ESC, or backdrop click.
+     */
+    confirm(config) {
+        const dialogRef = this.open(FuiConfirmDialogComponent, {
+            width: '28rem',
+            maxWidth: '90vw',
+            data: config,
+            role: config.variant === 'danger' ? 'alertdialog' : 'dialog',
+            ariaLabelledBy: 'confirm-dialog-title',
+            ariaDescribedBy: 'confirm-dialog-description',
+            disableClose: false,
+        });
+        return dialogRef.afterClosed.pipe(map((result) => result === true));
+    }
+    _applyConfigDefaults(config) {
+        return {
+            role: 'dialog',
+            hasBackdrop: true,
+            disableClose: false,
+            maxWidth: '80vw',
+            autoFocus: 'first-tabbable',
+            restoreFocus: true,
+            closeOnNavigation: true,
+            enterAnimationDuration: 200,
+            exitAnimationDuration: 150,
+            ...config,
+        };
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiDialogService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiDialogService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiDialogService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { FUI_DIALOG_DATA, FUI_DIALOG_DEFAULT_OPTIONS, FuiConfirmDialogComponent, FuiDialogContainerComponent, FuiDialogRef, FuiDialogService };
+//# sourceMappingURL=raintonic-formaui-services-dialog.mjs.map