ngx-com 0.0.19 → 0.0.21

package/fesm2022/ngx-com-components-dialog.mjs

@@ -0,0 +1,703 @@
+import * as i0 from '@angular/core';
+import { InjectionToken, inject, viewChild, signal, computed, ChangeDetectionStrategy, Component, Injector, DestroyRef, PLATFORM_ID, TemplateRef, Injectable, Directive, input } from '@angular/core';
+import { NgTemplateOutlet, NgComponentOutlet, DOCUMENT, isPlatformBrowser } from '@angular/common';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { Overlay } from '@angular/cdk/overlay';
+import { ComponentPortal } from '@angular/cdk/portal';
+import { filter } from 'rxjs/operators';
+import { Subject, Observable } from 'rxjs';
+import { FocusTrapFactory } from '@angular/cdk/a11y';
+import { cva } from 'class-variance-authority';
+import { mergeClasses } from 'ngx-com/utils';
+
+/**
+ * Reference to an open dialog instance.
+ * Returned by `ComDialog.open()` for programmatic control.
+ */
+class ComDialogRef {
+    afterClosedSubject = new Subject();
+    backdropClickSubject = new Subject();
+    closed = false;
+    /** @internal */
+    _overlayRef = null;
+    /** @internal */
+    _closeFn = null;
+    /**
+     * Close the dialog, optionally passing a result value.
+     */
+    close(result) {
+        if (this.closed)
+            return;
+        this._closeFn?.(result);
+    }
+    /**
+     * Emits the result once after the dialog is fully closed and disposed.
+     */
+    afterClosed() {
+        return this.afterClosedSubject.asObservable();
+    }
+    /**
+     * Emits each time the backdrop is clicked.
+     */
+    backdropClick() {
+        return this.backdropClickSubject.asObservable();
+    }
+    /**
+     * Proxies keydown events from the overlay.
+     */
+    keydownEvents() {
+        return this._overlayRef?.keydownEvents() ?? new Observable();
+    }
+    /** @internal Called by the service after exit animation completes. */
+    _notifyClosed(result) {
+        if (this.closed)
+            return;
+        this.closed = true;
+        this.afterClosedSubject.next(result);
+        this.afterClosedSubject.complete();
+        this.backdropClickSubject.complete();
+    }
+    /** @internal Forward backdrop click from overlay. */
+    _notifyBackdropClick(event) {
+        this.backdropClickSubject.next(event);
+    }
+}
+
+/**
+ * Injection token for data passed to a dialog component.
+ *
+ * @example
+ * ```typescript
+ * readonly data = inject<MyData>(COM_DIALOG_DATA);
+ * ```
+ */
+const COM_DIALOG_DATA = new InjectionToken('COM_DIALOG_DATA');
+/**
+ * Injection token for global dialog configuration defaults.
+ * @internal
+ */
+const COM_DIALOG_CONFIG = new InjectionToken('COM_DIALOG_CONFIG');
+/**
+ * Provides global dialog configuration defaults.
+ *
+ * @example
+ * ```typescript
+ * bootstrapApplication(AppComponent, {
+ *   providers: [
+ *     provideComDialogConfig({ size: 'lg', hasBackdrop: true }),
+ *   ],
+ * });
+ * ```
+ */
+function provideComDialogConfig(config) {
+    return { provide: COM_DIALOG_CONFIG, useValue: config };
+}
+
+/**
+ * Injection token allowing dialog directives to register their element IDs
+ * with the container for ARIA binding.
+ * @internal
+ */
+const COM_DIALOG_CONTAINER_REF = new InjectionToken('COM_DIALOG_CONTAINER_REF');
+
+/**
+ * CVA variants for the dialog backdrop.
+ *
+ * @tokens `--color-backdrop`
+ */
+const dialogBackdropVariants = cva([
+    'fixed',
+    'inset-0',
+    'z-50',
+    'bg-backdrop',
+    'backdrop-blur-sm',
+], {
+    variants: {
+        visible: {
+            true: 'animate-in fade-in-0',
+            false: 'animate-out fade-out-0',
+        },
+    },
+    defaultVariants: {
+        visible: true,
+    },
+});
+/**
+ * CVA variants for the dialog panel container.
+ *
+ * @tokens `--color-popover`, `--color-popover-foreground`, `--color-border`,
+ *         `--shadow-xl`, `--radius-overlay`
+ */
+const dialogPanelVariants = cva([
+    'com-dialog-panel',
+    'fixed',
+    'left-1/2',
+    'top-1/2',
+    '-translate-x-1/2',
+    '-translate-y-1/2',
+    'z-50',
+    'flex',
+    'flex-col',
+    'border',
+    'border-border',
+    'bg-popover',
+    'text-popover-foreground',
+    'shadow-xl',
+    'rounded-overlay',
+    'outline-none',
+], {
+    variants: {
+        size: {
+            sm: 'w-full max-w-sm max-h-[85vh] p-6',
+            md: 'w-full max-w-lg max-h-[85vh] p-6',
+            lg: 'w-full max-w-2xl max-h-[85vh] p-6',
+            xl: 'w-full max-w-4xl max-h-[85vh] p-6',
+            full: 'w-screen h-screen max-w-none max-h-none rounded-none border-none p-6',
+        },
+        visible: {
+            true: 'animate-in fade-in-0 zoom-in-95',
+            false: 'animate-out fade-out-0 zoom-out-95',
+        },
+    },
+    defaultVariants: {
+        size: 'md',
+        visible: true,
+    },
+});
+/**
+ * CVA variants for the dialog title.
+ *
+ * @tokens `--color-foreground`
+ */
+const dialogTitleVariants = cva([
+    'font-heading',
+    'text-lg',
+    'font-semibold',
+    'tracking-tight',
+    'text-foreground',
+]);
+/**
+ * CVA variants for the dialog content area.
+ *
+ * @tokens `--color-muted-foreground`
+ */
+const dialogContentVariants = cva([
+    'flex-1',
+    'overflow-y-auto',
+    'py-4',
+    'text-sm',
+    'text-muted-foreground',
+]);
+/**
+ * CVA variants for the dialog actions area.
+ */
+const dialogActionsVariants = cva([
+    'flex',
+    'flex-col-reverse',
+    'sm:flex-row',
+    'sm:justify-end',
+    'gap-2',
+    'pt-4',
+]);
+
+let dialogIdCounter = 0;
+/** Generate a unique ID for a dialog title element. */
+function generateDialogTitleId() {
+    return `com-dialog-title-${++dialogIdCounter}`;
+}
+/** Generate a unique ID for a dialog content element. */
+function generateDialogContentId() {
+    return `com-dialog-content-${++dialogIdCounter}`;
+}
+
+/** Fallback timeout for exit animation when animationend doesn't fire. */
+const ANIMATION_FALLBACK_MS = 200;
+/**
+ * Internal dialog container component rendered inside the CDK overlay.
+ * Hosts the user's component or template and manages focus trap, animation, and ARIA.
+ *
+ * @internal Not exported in public API
+ *
+ * @tokens `--color-popover`, `--color-popover-foreground`, `--color-border`,
+ *         `--color-foreground`, `--color-muted-foreground`, `--color-backdrop`,
+ *         `--shadow-xl`, `--radius-overlay`, `--color-ring`
+ */
+class ComDialogContainerComponent {
+    focusTrapFactory = inject(FocusTrapFactory);
+    focusTrap = null;
+    animationFallback = null;
+    closing = false;
+    pendingResult = undefined;
+    panelElement = viewChild('panelElement', ...(ngDevMode ? [{ debugName: "panelElement" }] : []));
+    /** Resolved dialog configuration, set by the service. */
+    config = signal(null, ...(ngDevMode ? [{ debugName: "config" }] : []));
+    /** Whether the panel is visible (for animation state). */
+    visible = signal(false, ...(ngDevMode ? [{ debugName: "visible" }] : []));
+    /** The dialog ref for this instance, set by the service. */
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    dialogRef = signal(null, ...(ngDevMode ? [{ debugName: "dialogRef" }] : []));
+    /** Injector for content component, set by the service. */
+    contentInjector = signal(null, ...(ngDevMode ? [{ debugName: "contentInjector" }] : []));
+    // ─── Content signals (set by service) ───
+    /** Whether the content is a TemplateRef. */
+    isTemplate = signal(false, ...(ngDevMode ? [{ debugName: "isTemplate" }] : []));
+    /** Template ref content (when isTemplate is true). */
+    templateContent = signal(null, ...(ngDevMode ? [{ debugName: "templateContent" }] : []));
+    /** Component type content (when isTemplate is false). */
+    componentContent = signal(null, ...(ngDevMode ? [{ debugName: "componentContent" }] : []));
+    // ─── ARIA ID registration ───
+    /** ID of the title directive for aria-labelledby. */
+    titleId = signal('', ...(ngDevMode ? [{ debugName: "titleId" }] : []));
+    /** ID of the content directive for aria-describedby. */
+    contentId = signal('', ...(ngDevMode ? [{ debugName: "contentId" }] : []));
+    /** Register a title element ID (called by ComDialogTitle directive). */
+    registerTitleId(id) {
+        this.titleId.set(id);
+    }
+    /** Register a content element ID (called by ComDialogContent directive). */
+    registerContentId(id) {
+        this.contentId.set(id);
+    }
+    // ─── Computed classes ───
+    backdropClasses = computed(() => mergeClasses(dialogBackdropVariants({ visible: this.visible() })), ...(ngDevMode ? [{ debugName: "backdropClasses" }] : []));
+    panelClasses = computed(() => mergeClasses(dialogPanelVariants({
+        size: this.config()?.size ?? 'md',
+        visible: this.visible(),
+    }), this.config()?.panelClass ?? ''), ...(ngDevMode ? [{ debugName: "panelClasses" }] : []));
+    /** Template context for TemplateRef-based dialogs. */
+    templateContext = computed(() => ({
+        $implicit: this.dialogRef(),
+        data: this.config()?.data,
+    }), ...(ngDevMode ? [{ debugName: "templateContext" }] : []));
+    ngAfterViewInit() {
+        this.setupFocusTrap();
+    }
+    /** Handle backdrop click. */
+    onBackdropClick(event) {
+        const ref = this.dialogRef();
+        if (ref) {
+            ref._notifyBackdropClick(event);
+        }
+        if (!this.config()?.disableClose) {
+            this.dialogRef()?.close();
+        }
+    }
+    /** Start the close animation sequence. */
+    startClose(result) {
+        if (this.closing)
+            return;
+        this.closing = true;
+        this.pendingResult = result;
+        this.visible.set(false);
+        // Fallback in case animationend doesn't fire
+        this.animationFallback = setTimeout(() => this.finishClose(), ANIMATION_FALLBACK_MS);
+    }
+    /** Handle animation end on the panel. */
+    onAnimationEnd() {
+        if (this.closing) {
+            this.finishClose();
+        }
+    }
+    /** Clean up focus trap. */
+    destroyFocusTrap() {
+        this.focusTrap?.destroy();
+        this.focusTrap = null;
+    }
+    finishClose() {
+        if (this.animationFallback !== null) {
+            clearTimeout(this.animationFallback);
+            this.animationFallback = null;
+        }
+        this.destroyFocusTrap();
+        this.dialogRef()?._notifyClosed(this.pendingResult);
+    }
+    setupFocusTrap() {
+        const panelEl = this.panelElement()?.nativeElement;
+        if (!panelEl)
+            return;
+        this.focusTrap = this.focusTrapFactory.create(panelEl);
+        const autoFocus = this.config()?.autoFocus ?? 'first-tabbable';
+        if (autoFocus === 'first-tabbable') {
+            this.focusTrap.focusInitialElementWhenReady();
+        }
+        else if (autoFocus === 'dialog') {
+            panelEl.focus();
+        }
+        // autoFocus === false: don't move focus
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComDialogContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: ComDialogContainerComponent, isStandalone: true, selector: "com-dialog-container", viewQueries: [{ propertyName: "panelElement", first: true, predicate: ["panelElement"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    @if (config()?.hasBackdrop) {
+      <div
+        [class]="backdropClasses()"
+        [attr.data-state]="visible() ? 'open' : 'closed'"
+        aria-hidden="true"
+        (click)="onBackdropClick($event)"
+      ></div>
+    }
+    <div
+      #panelElement
+      [class]="panelClasses()"
+      role="dialog"
+      aria-modal="true"
+      [attr.aria-labelledby]="titleId() || null"
+      [attr.aria-describedby]="contentId() || null"
+      [attr.aria-label]="!titleId() && config()?.ariaLabel ? config()!.ariaLabel : null"
+      [attr.data-state]="visible() ? 'open' : 'closed'"
+      tabindex="-1"
+      (animationend)="onAnimationEnd()"
+    >
+      @if (isTemplate()) {
+        <ng-container
+          [ngTemplateOutlet]="templateContent()!"
+          [ngTemplateOutletContext]="templateContext()"
+        />
+      } @else if (componentContent(); as comp) {
+        @if (contentInjector(); as inj) {
+          <ng-container
+            *ngComponentOutlet="comp; injector: inj"
+          />
+        }
+      }
+    </div>
+  `, isInline: true, styles: [":host{display:contents}[data-state=open]{--tw-enter-opacity: 0;--tw-enter-scale: .95}[data-state=closed]{--tw-exit-opacity: 0;--tw-exit-scale: .95}@media(prefers-reduced-motion:reduce){[data-state=open],[data-state=closed]{animation:none}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComDialogContainerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'com-dialog-container', template: `
+    @if (config()?.hasBackdrop) {
+      <div
+        [class]="backdropClasses()"
+        [attr.data-state]="visible() ? 'open' : 'closed'"
+        aria-hidden="true"
+        (click)="onBackdropClick($event)"
+      ></div>
+    }
+    <div
+      #panelElement
+      [class]="panelClasses()"
+      role="dialog"
+      aria-modal="true"
+      [attr.aria-labelledby]="titleId() || null"
+      [attr.aria-describedby]="contentId() || null"
+      [attr.aria-label]="!titleId() && config()?.ariaLabel ? config()!.ariaLabel : null"
+      [attr.data-state]="visible() ? 'open' : 'closed'"
+      tabindex="-1"
+      (animationend)="onAnimationEnd()"
+    >
+      @if (isTemplate()) {
+        <ng-container
+          [ngTemplateOutlet]="templateContent()!"
+          [ngTemplateOutletContext]="templateContext()"
+        />
+      } @else if (componentContent(); as comp) {
+        @if (contentInjector(); as inj) {
+          <ng-container
+            *ngComponentOutlet="comp; injector: inj"
+          />
+        }
+      }
+    </div>
+  `, imports: [NgTemplateOutlet, NgComponentOutlet], changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:contents}[data-state=open]{--tw-enter-opacity: 0;--tw-enter-scale: .95}[data-state=closed]{--tw-exit-opacity: 0;--tw-exit-scale: .95}@media(prefers-reduced-motion:reduce){[data-state=open],[data-state=closed]{animation:none}}\n"] }]
+        }], propDecorators: { panelElement: [{ type: i0.ViewChild, args: ['panelElement', { isSignal: true }] }] } });
+
+/** Default dialog configuration values. */
+const COM_DIALOG_DEFAULTS = {
+    data: undefined,
+    size: 'md',
+    disableClose: false,
+    hasBackdrop: true,
+    backdropClass: '',
+    panelClass: '',
+    autoFocus: 'first-tabbable',
+    restoreFocus: true,
+    ariaLabel: '',
+};
+
+/**
+ * Service for opening dialog modals imperatively.
+ *
+ * @example
+ * ```typescript
+ * const dialog = inject(ComDialog);
+ *
+ * // Open a component
+ * const ref = dialog.open<boolean>(ConfirmComponent, { data: { id: 123 } });
+ * ref.afterClosed().subscribe(result => {
+ *   if (result) performAction();
+ * });
+ *
+ * // Open a template
+ * dialog.open(templateRef, { size: 'sm' });
+ * ```
+ */
+class ComDialog {
+    overlay = inject(Overlay);
+    injector = inject(Injector);
+    destroyRef = inject(DestroyRef);
+    platformId = inject(PLATFORM_ID);
+    document = inject(DOCUMENT);
+    globalConfig = inject(COM_DIALOG_CONFIG, { optional: true });
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    openDialogs = [];
+    /**
+     * Open a dialog with the given component or template.
+     *
+     * @param content - The component class or TemplateRef to render inside the dialog.
+     * @param config - Optional dialog configuration.
+     * @returns A reference to the opened dialog.
+     */
+    open(content, config) {
+        if (!isPlatformBrowser(this.platformId)) {
+            return new ComDialogRef();
+        }
+        const resolvedConfig = this.resolveConfig(config);
+        const previouslyFocused = this.document.activeElement;
+        // Create the dialog ref
+        const dialogRef = new ComDialogRef();
+        // Create a child injector with dialog-specific providers
+        const isTemplate = content instanceof TemplateRef;
+        const containerRef = {
+            registerTitleId: () => { },
+            registerContentId: () => { },
+        };
+        const contentInjector = Injector.create({
+            providers: [
+                { provide: ComDialogRef, useValue: dialogRef },
+                { provide: COM_DIALOG_DATA, useValue: resolvedConfig.data },
+                { provide: COM_DIALOG_CONTAINER_REF, useValue: containerRef },
+            ],
+            parent: this.injector,
+        });
+        // Create CDK overlay
+        const positionStrategy = this.overlay
+            .position()
+            .global()
+            .centerHorizontally()
+            .centerVertically();
+        const overlayRef = this.overlay.create({
+            positionStrategy,
+            scrollStrategy: this.overlay.scrollStrategies.block(),
+            hasBackdrop: false, // We handle backdrop ourselves for animation control
+            panelClass: 'com-dialog-overlay',
+            disposeOnNavigation: false,
+        });
+        dialogRef._overlayRef = overlayRef;
+        // Attach the container component
+        const portal = new ComponentPortal(ComDialogContainerComponent, null, contentInjector);
+        const containerComponentRef = overlayRef.attach(portal);
+        const container = containerComponentRef.instance;
+        // Wire up the container ref for ARIA registration
+        containerRef.registerTitleId = (id) => container.registerTitleId(id);
+        containerRef.registerContentId = (id) => container.registerContentId(id);
+        // Configure the container
+        container.config.set(resolvedConfig);
+        container.dialogRef.set(dialogRef);
+        container.isTemplate.set(isTemplate);
+        if (isTemplate) {
+            container.templateContent.set(content);
+        }
+        else {
+            container.componentContent.set(content);
+            container.contentInjector.set(contentInjector);
+        }
+        // Wire up the close function
+        dialogRef._closeFn = (result) => {
+            container.startClose(result);
+        };
+        // Subscribe to Escape key
+        overlayRef
+            .keydownEvents()
+            .pipe(filter((event) => event.key === 'Escape'), takeUntilDestroyed(this.destroyRef))
+            .subscribe((event) => {
+            if (!resolvedConfig.disableClose) {
+                event.preventDefault();
+                event.stopPropagation();
+                dialogRef.close();
+            }
+        });
+        // Track open dialog
+        this.openDialogs.push(dialogRef);
+        // Clean up after close
+        dialogRef.afterClosed().subscribe(() => {
+            const idx = this.openDialogs.indexOf(dialogRef);
+            if (idx !== -1) {
+                this.openDialogs.splice(idx, 1);
+            }
+            overlayRef.dispose();
+            // Restore focus
+            if (resolvedConfig.restoreFocus && previouslyFocused) {
+                previouslyFocused.focus();
+            }
+        });
+        // Show panel after a microtask to allow initial styles to apply
+        requestAnimationFrame(() => {
+            container.visible.set(true);
+        });
+        return dialogRef;
+    }
+    /** Close all open dialogs. */
+    closeAll() {
+        for (const ref of [...this.openDialogs]) {
+            ref.close();
+        }
+    }
+    /** Number of currently open dialogs. */
+    get openDialogCount() {
+        return this.openDialogs.length;
+    }
+    resolveConfig(config) {
+        return {
+            ...COM_DIALOG_DEFAULTS,
+            ...this.globalConfig,
+            ...config,
+        };
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComDialog, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComDialog, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComDialog, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+/**
+ * Marks an element as the dialog title. Sets up aria-labelledby
+ * binding on the dialog container.
+ *
+ * @example
+ * ```html
+ * <h2 comDialogTitle>Delete item</h2>
+ * ```
+ *
+ * @tokens `--color-foreground`
+ */
+class ComDialogTitle {
+    containerRef = inject(COM_DIALOG_CONTAINER_REF, { optional: true });
+    /** Unique ID for aria-labelledby binding. */
+    id = signal(generateDialogTitleId(), ...(ngDevMode ? [{ debugName: "id" }] : []));
+    /** Computed CSS classes. */
+    classes = signal(mergeClasses(dialogTitleVariants()), ...(ngDevMode ? [{ debugName: "classes" }] : []));
+    ngOnInit() {
+        this.containerRef?.registerTitleId(this.id());
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComDialogTitle, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.0", type: ComDialogTitle, isStandalone: true, selector: "[comDialogTitle]", host: { properties: { "id": "id()", "class": "classes()" } }, exportAs: ["comDialogTitle"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComDialogTitle, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[comDialogTitle]',
+                    exportAs: 'comDialogTitle',
+                    host: {
+                        '[id]': 'id()',
+                        '[class]': 'classes()',
+                    },
+                }]
+        }] });
+
+/**
+ * Marks an element as the dialog content area. Sets up aria-describedby
+ * binding on the dialog container.
+ *
+ * @example
+ * ```html
+ * <div comDialogContent>
+ *   <p>Are you sure you want to delete this item?</p>
+ * </div>
+ * ```
+ *
+ * @tokens `--color-muted-foreground`
+ */
+class ComDialogContent {
+    containerRef = inject(COM_DIALOG_CONTAINER_REF, { optional: true });
+    /** Unique ID for aria-describedby binding. */
+    id = signal(generateDialogContentId(), ...(ngDevMode ? [{ debugName: "id" }] : []));
+    /** Computed CSS classes. */
+    classes = signal(mergeClasses(dialogContentVariants()), ...(ngDevMode ? [{ debugName: "classes" }] : []));
+    ngOnInit() {
+        this.containerRef?.registerContentId(this.id());
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComDialogContent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.0", type: ComDialogContent, isStandalone: true, selector: "[comDialogContent]", host: { properties: { "id": "id()", "class": "classes()" } }, exportAs: ["comDialogContent"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComDialogContent, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[comDialogContent]',
+                    exportAs: 'comDialogContent',
+                    host: {
+                        '[id]': 'id()',
+                        '[class]': 'classes()',
+                    },
+                }]
+        }] });
+
+/**
+ * Marks an element as the dialog actions area (footer with buttons).
+ *
+ * @example
+ * ```html
+ * <div comDialogActions>
+ *   <button comButton variant="outline" [comDialogClose]="false">Cancel</button>
+ *   <button comButton [comDialogClose]="true">Confirm</button>
+ * </div>
+ * ```
+ */
+class ComDialogActions {
+    /** Computed CSS classes. */
+    classes = signal(mergeClasses(dialogActionsVariants()), ...(ngDevMode ? [{ debugName: "classes" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComDialogActions, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.0", type: ComDialogActions, isStandalone: true, selector: "[comDialogActions]", host: { properties: { "class": "classes()" } }, exportAs: ["comDialogActions"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComDialogActions, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[comDialogActions]',
+                    exportAs: 'comDialogActions',
+                    host: {
+                        '[class]': 'classes()',
+                    },
+                }]
+        }] });
+
+/**
+ * Closes the nearest dialog when the host element is clicked.
+ * Optionally passes a result value.
+ *
+ * @example
+ * ```html
+ * <button comButton [comDialogClose]="false">Cancel</button>
+ * <button comButton [comDialogClose]="true">Confirm</button>
+ * ```
+ */
+class ComDialogClose {
+    dialogRef = inject(ComDialogRef);
+    /** The result value to pass when closing the dialog. */
+    comDialogClose = input(undefined, ...(ngDevMode ? [{ debugName: "comDialogClose" }] : []));
+    onClick() {
+        this.dialogRef.close(this.comDialogClose());
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComDialogClose, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.0", type: ComDialogClose, isStandalone: true, selector: "[comDialogClose]", inputs: { comDialogClose: { classPropertyName: "comDialogClose", publicName: "comDialogClose", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "onClick()" } }, exportAs: ["comDialogClose"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComDialogClose, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[comDialogClose]',
+                    exportAs: 'comDialogClose',
+                    host: {
+                        '(click)': 'onClick()',
+                    },
+                }]
+        }], propDecorators: { comDialogClose: [{ type: i0.Input, args: [{ isSignal: true, alias: "comDialogClose", required: false }] }] } });
+
+// Public API for the dialog system
+// Service
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { COM_DIALOG_CONFIG, COM_DIALOG_DATA, ComDialog, ComDialogActions, ComDialogClose, ComDialogContent, ComDialogRef, ComDialogTitle, dialogActionsVariants, dialogBackdropVariants, dialogContentVariants, dialogPanelVariants, dialogTitleVariants, provideComDialogConfig };
+//# sourceMappingURL=ngx-com-components-dialog.mjs.map