@cdevhub/ngx-tw 0.2.0

package/fesm2022/cdevhub-ngx-tw-dialog.mjs

@@ -0,0 +1,693 @@
+import * as i0 from '@angular/core';
+import { InjectionToken, inject, computed, ViewEncapsulation, ChangeDetectionStrategy, Component, signal, Injector, Injectable, makeEnvironmentProviders, Directive, input } from '@angular/core';
+import { DialogConfig, CdkDialogContainer, Dialog } from '@angular/cdk/dialog';
+import { createBlockScrollStrategy, createNoopScrollStrategy, createRepositionScrollStrategy, createCloseScrollStrategy } from '@angular/cdk/overlay';
+import { ReplaySubject, filter, take, merge, Subject, defer, startWith } from 'rxjs';
+import { CdkPortalOutlet } from '@angular/cdk/portal';
+import { OverlayContainerCoordinator, mergeOverlayPanelClass, coerceOverlayDuration } from '@cdevhub/ngx-tw/core';
+import { tv } from 'tailwind-variants';
+import { ESCAPE, hasModifierKey } from '@angular/cdk/keycodes';
+import { _IdGenerator } from '@angular/cdk/a11y';
+import * as i1 from '@angular/cdk/scrolling';
+import { CdkScrollable } from '@angular/cdk/scrolling';
+
+/**
+ * Configuration for opening a dialog with {@link TwDialog.open}.
+ *
+ * Mirrors the shape of `@angular/cdk/dialog`'s `DialogConfig` with additional
+ * tailwind-focused options (`size`, `enterAnimationDuration`, etc.).
+ */
+class TwDialogConfig extends DialogConfig {
+    /** Preset size for the dialog panel. Ignored when `width`/`maxWidth` are provided. Defaults to `'md'`. */
+    size = 'md';
+    /** Duration of the open animation in ms. Defaults to `150`. Use `0` to disable. */
+    enterAnimationDuration = 150;
+    /**
+     * Duration of the close animation in ms. Defaults to `120`. Use `0` to disable.
+     * Asymmetric with `enterAnimationDuration` by design: the close transition is
+     * slightly faster so the dialog feels dismissive rather than reluctant.
+     */
+    exitAnimationDuration = 120;
+    /** Scroll strategy preset applied when `scrollStrategy` isn't set. Defaults to `'block'`. */
+    scrollBehavior = 'block';
+    /** Maximum width. Number values are treated as pixels. Defaults to `'calc(100vw - 32px)'`. */
+    maxWidth = 'calc(100vw - 32px)';
+    /**
+     * Whether the dialog is modal — sets `aria-modal` on the container.
+     * Defaults to `true`: a `role="dialog"` opened over the page is modal by
+     * default and the rest of the document is inert while it is open. Set to
+     * `false` only for non-modal surfaces (rare; consider `popover` instead).
+     */
+    ariaModal = true;
+    /** Whether Escape and backdrop clicks are blocked. Defaults to `false`. */
+    disableClose = false;
+    /** Where to move focus when the dialog opens. Defaults to `'first-tabbable'`. */
+    autoFocus = 'first-tabbable';
+    /** Whether to restore focus to the previously focused element after close. Defaults to `true`. */
+    restoreFocus = true;
+    /** Whether the dialog renders a backdrop. Defaults to `true`. */
+    hasBackdrop = true;
+    /** Whether navigation (e.g. router) closes the dialog. Defaults to `true`. */
+    closeOnNavigation = true;
+}
+/** Injection token carrying the `data` value passed via {@link TwDialogConfig.data}. */
+const TW_DIALOG_DATA = new InjectionToken('TW_DIALOG_DATA');
+/** Injection token for application-wide default dialog options. Set via `provideTwDialog()`. */
+const TW_DIALOG_DEFAULT_OPTIONS = new InjectionToken('TW_DIALOG_DEFAULT_OPTIONS');
+
+// Dialog uses a `data-[state]` driven CSS transition rather than the project's
+// `animate.enter`/`animate.leave` keyframes. Justification:
+//   1. The ref owns the open/close lifecycle (state signal, observables) and
+//      needs runtime-configurable enter/exit durations per `TwDialog.open()`
+//      call — `animate.enter` only accepts a static class name.
+//   2. The container drives the same CSS variables (opacity + scale) for both
+//      transitions, so a single `transition-[opacity,transform]` rule with a
+//      data-state attribute is simpler than two keyframe declarations.
+// All other library overlays (popover, menu, tooltip) use animate.enter/leave;
+// this divergence is intentional and isolated to the dialog container.
+const dialogContainerVariants = tv({
+    slots: {
+        host: 'relative flex flex-col outline-none bg-surface-raised text-fg rounded-lg shadow-md border border-border overflow-hidden transition-[opacity,transform] ease-out motion-reduce:transition-none opacity-0 scale-95 data-[state=open]:opacity-100 data-[state=open]:scale-100 data-[state=closing]:opacity-0 data-[state=closing]:scale-95',
+    },
+    variants: {
+        size: {
+            xs: { host: 'w-full max-w-sm max-h-[85vh]' },
+            sm: { host: 'w-full max-w-md max-h-[85vh]' },
+            md: { host: 'w-full max-w-lg max-h-[85vh]' },
+            lg: { host: 'w-full max-w-2xl max-h-[85vh]' },
+            xl: { host: 'w-full max-w-4xl max-h-[85vh]' },
+            fullscreen: {
+                host: 'w-screen h-screen max-w-none max-h-none rounded-none border-0',
+            },
+        },
+    },
+    defaultVariants: { size: 'md' },
+}, { twMerge: true });
+/**
+ * Dialog container rendered inside the CDK overlay. Wraps the user-provided
+ * content in a Tailwind-styled surface and coordinates enter/exit transitions
+ * with {@link TwDialogRef}.
+ *
+ * The animation state machine, `aria-describedby` queue, and panel-class
+ * merge are shared with `SheetContainer` via {@link OverlayContainerCoordinator}
+ * (component-scoped — see `providers: [OverlayContainerCoordinator]`).
+ *
+ * @docs-private
+ */
+class DialogContainer extends CdkDialogContainer {
+    coordinator = inject(OverlayContainerCoordinator);
+    /** Lifecycle state of the dialog's enter/exit animation. */
+    state = this.coordinator.state;
+    /** Emits whenever the animation state transitions. */
+    animationStateChanged = this.coordinator.animationStateChanged;
+    /** Resolved enter-animation duration in ms. */
+    enterAnimationDuration;
+    /** Resolved exit-animation duration in ms. */
+    exitAnimationDuration;
+    sizeVariant = computed(() => {
+        const size = this._config.size ?? 'md';
+        return dialogContainerVariants({ size });
+    }, ...(ngDevMode ? [{ debugName: "sizeVariant" }] : /* istanbul ignore next */ []));
+    hostClasses = computed(() => mergeOverlayPanelClass(this.sizeVariant().host(), this._config.panelClass), ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
+    ariaDescribedByAttr = computed(() => this._config.ariaDescribedBy ||
+        this.coordinator.describedByIds()[0] ||
+        null, ...(ngDevMode ? [{ debugName: "ariaDescribedByAttr" }] : /* istanbul ignore next */ []));
+    transitionDuration = this.coordinator.transitionDuration;
+    constructor() {
+        super();
+        this.enterAnimationDuration = coerceOverlayDuration(this._config.enterAnimationDuration, 150);
+        this.exitAnimationDuration = coerceOverlayDuration(this._config.exitAnimationDuration, 120);
+        this.coordinator.setDurations(this.enterAnimationDuration, this.exitAnimationDuration);
+    }
+    _contentAttached() {
+        super._contentAttached();
+        this.coordinator.startEnterAnimation();
+    }
+    /** Triggered by the dialog ref to play the exit transition before disposing the overlay. */
+    _startExitAnimation() {
+        this.coordinator.startExitAnimation();
+    }
+    /** Registers a description id for the container's `aria-describedby`. */
+    _addAriaDescribedBy(id) {
+        this.coordinator.addAriaDescribedBy(id);
+    }
+    /** Removes a previously registered description id. */
+    _removeAriaDescribedBy(id) {
+        this.coordinator.removeAriaDescribedBy(id);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: DialogContainer, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.14", type: DialogContainer, isStandalone: true, selector: "tw-dialog-container", host: { attributes: { "tabindex": "-1" }, properties: { "attr.id": "_config.id || null", "attr.role": "_config.role", "attr.aria-modal": "_config.ariaModal", "attr.aria-labelledby": "_config.ariaLabel ? null : _ariaLabelledByQueue[0]", "attr.aria-label": "_config.ariaLabel", "attr.aria-describedby": "ariaDescribedByAttr()", "attr.data-state": "state()", "class": "hostClasses()", "style.transition-duration.ms": "transitionDuration()" } }, providers: [OverlayContainerCoordinator], usesInheritance: true, ngImport: i0, template: '<ng-template cdkPortalOutlet />', isInline: true, dependencies: [{ kind: "directive", type: CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: DialogContainer, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'tw-dialog-container',
+                    template: '<ng-template cdkPortalOutlet />',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    imports: [CdkPortalOutlet],
+                    providers: [OverlayContainerCoordinator],
+                    host: {
+                        tabindex: '-1',
+                        '[attr.id]': '_config.id || null',
+                        '[attr.role]': '_config.role',
+                        '[attr.aria-modal]': '_config.ariaModal',
+                        '[attr.aria-labelledby]': '_config.ariaLabel ? null : _ariaLabelledByQueue[0]',
+                        '[attr.aria-label]': '_config.ariaLabel',
+                        '[attr.aria-describedby]': 'ariaDescribedByAttr()',
+                        '[attr.data-state]': 'state()',
+                        '[class]': 'hostClasses()',
+                        '[style.transition-duration.ms]': 'transitionDuration()',
+                    },
+                }]
+        }], ctorParameters: () => [] });
+
+/**
+ * Reference to a dialog opened via {@link TwDialog.open}. Drives the dialog
+ * lifecycle (close, state, observables) and forwards useful overlay streams.
+ */
+class TwDialogRef {
+    cdkRef;
+    config;
+    containerInstance;
+    /** Unique ID of the dialog. */
+    id;
+    /** Instance of the component rendered inside the dialog, or `null` for template dialogs. */
+    componentInstance = null;
+    /** `ComponentRef` of the content component, or `null` for template dialogs. */
+    componentRef = null;
+    /** Current lifecycle state. Reactively readable. */
+    state;
+    /** When `true`, close-via-escape and close-via-backdrop are disabled. */
+    disableClose;
+    stateSignal = signal('opening', ...(ngDevMode ? [{ debugName: "stateSignal" }] : /* istanbul ignore next */ []));
+    afterOpenedSubject = new ReplaySubject(1);
+    beforeClosedSubject = new ReplaySubject(1);
+    afterClosedSubject = new ReplaySubject(1);
+    pendingResult;
+    closeFocusOrigin;
+    constructor(cdkRef, config, containerInstance) {
+        this.cdkRef = cdkRef;
+        this.config = config;
+        this.containerInstance = containerInstance;
+        this.id = cdkRef.id;
+        this.disableClose = config.disableClose;
+        this.state = this.stateSignal.asReadonly();
+        cdkRef.addPanelClass('tw-dialog-panel');
+        const animationChanges = containerInstance.animationStateChanged;
+        animationChanges
+            .pipe(filter((event) => event.state === 'open'), take(1))
+            .subscribe(() => {
+            this.stateSignal.set('open');
+            this.afterOpenedSubject.next();
+            this.afterOpenedSubject.complete();
+        });
+        // The container owns the exit-animation fallback timer (see
+        // ANIMATION_FALLBACK_PADDING in dialog-container.ts), so we trust its
+        // `closed` emission and run finishClose exactly once from here.
+        animationChanges
+            .pipe(filter((event) => event.state === 'closed'), take(1))
+            .subscribe(() => this.finishClose());
+        cdkRef.overlayRef.detachments().subscribe(() => {
+            if (this.stateSignal() !== 'closed') {
+                this.beforeClosedSubject.next(this.pendingResult);
+                this.beforeClosedSubject.complete();
+                this.finishClose();
+            }
+        });
+        merge(cdkRef.backdropClick, cdkRef.keydownEvents.pipe(filter((event) => event.keyCode === ESCAPE && !this.disableClose && !hasModifierKey(event)))).subscribe((event) => {
+            if (this.disableClose)
+                return;
+            event.preventDefault();
+            this.closeWithOrigin(event.type === 'keydown' ? 'keyboard' : 'mouse');
+        });
+    }
+    /**
+     * Closes the dialog. The exit animation runs before the overlay is disposed.
+     * @param result Value forwarded to `afterClosed()` subscribers.
+     */
+    close(result) {
+        this.closeWithOrigin('program', result);
+    }
+    /** Observable that emits once after the enter animation finishes. */
+    afterOpened() {
+        return this.afterOpenedSubject.asObservable();
+    }
+    /** Observable that emits once when the close animation starts. */
+    beforeClosed() {
+        return this.beforeClosedSubject.asObservable();
+    }
+    /** Observable that emits once after the dialog has fully closed and the overlay is disposed. */
+    afterClosed() {
+        return this.afterClosedSubject.asObservable();
+    }
+    /** Backdrop click stream (emits even when `disableClose` is set). */
+    backdropClick() {
+        return this.cdkRef.backdropClick;
+    }
+    /** Keydown event stream for the overlay. */
+    keydownEvents() {
+        return this.cdkRef.keydownEvents;
+    }
+    /** Updates the dialog's width/height. Pass empty string to reset a dimension. */
+    updateSize(width = '', height = '') {
+        this.cdkRef.updateSize(width, height);
+        return this;
+    }
+    /** Adds CSS classes to the overlay panel. */
+    addPanelClass(classes) {
+        this.cdkRef.addPanelClass(classes);
+        return this;
+    }
+    /** Removes CSS classes from the overlay panel. */
+    removePanelClass(classes) {
+        this.cdkRef.removePanelClass(classes);
+        return this;
+    }
+    closeWithOrigin(origin, result) {
+        if (this.stateSignal() === 'closing' || this.stateSignal() === 'closed')
+            return;
+        const predicate = this.config.closePredicate;
+        if (predicate &&
+            !predicate(result, this.config, this.componentInstance)) {
+            return;
+        }
+        this.pendingResult = result;
+        this.closeFocusOrigin = origin;
+        this.stateSignal.set('closing');
+        this.beforeClosedSubject.next(result);
+        this.beforeClosedSubject.complete();
+        this.cdkRef.overlayRef.detachBackdrop();
+        this.containerInstance._startExitAnimation();
+    }
+    finishClose() {
+        if (this.stateSignal() === 'closed')
+            return;
+        this.stateSignal.set('closed');
+        this.afterClosedSubject.next(this.pendingResult);
+        this.afterClosedSubject.complete();
+        if (this.cdkRef.containerInstance) {
+            this.cdkRef.close(this.pendingResult, { focusOrigin: this.closeFocusOrigin });
+        }
+        this.componentInstance = null;
+    }
+}
+
+/**
+ * Opens Tailwind-styled modal dialogs. Composes `@angular/cdk/dialog` for focus
+ * trapping, portals, overlay plumbing, and adds a Tailwind container, richer
+ * ref API, and animation lifecycle.
+ *
+ * Not `providedIn: 'root'` — register it via {@link provideTwDialog}.
+ */
+class TwDialog {
+    cdkDialog = inject(Dialog);
+    injector = inject(Injector);
+    defaultOptions = inject(TW_DIALOG_DEFAULT_OPTIONS, { optional: true }) ?? {};
+    parentDialog = inject(TwDialog, { optional: true, skipSelf: true });
+    openDialogsAtThisLevel = signal([], ...(ngDevMode ? [{ debugName: "openDialogsAtThisLevel" }] : /* istanbul ignore next */ []));
+    afterOpenedSubject = new Subject();
+    afterAllClosedSubject = new Subject();
+    /** Reactively-readable list of currently-open dialogs across the full dialog tree. */
+    openDialogs = this.parentDialog
+        ? this.parentDialog.openDialogs
+        : this.openDialogsAtThisLevel.asReadonly();
+    /** Emits every time a dialog is opened. */
+    afterOpened = this.parentDialog
+        ? this.parentDialog.afterOpened
+        : this.afterOpenedSubject.asObservable();
+    /**
+     * Emits when every open dialog has closed. Emits immediately on subscribe if
+     * there are none open.
+     */
+    afterAllClosed = defer(() => this.openDialogs().length
+        ? this.getAfterAllClosedSource()
+        : this.getAfterAllClosedSource().pipe(startWith(undefined)));
+    /**
+     * Opens a dialog using the given component or template.
+     * @param content Component class or `TemplateRef`.
+     * @param config Options merged over the application defaults.
+     * @returns Reference controlling the opened dialog.
+     */
+    open(content, config) {
+        const merged = this.resolveConfig(config);
+        let twRef;
+        const cdkRef = this.cdkDialog.open(content, {
+            id: merged.id,
+            role: merged.role,
+            data: merged.data,
+            panelClass: merged.panelClass,
+            backdropClass: merged.backdropClass ?? 'tw-dialog-backdrop',
+            hasBackdrop: merged.hasBackdrop,
+            width: merged.width,
+            height: merged.height,
+            minWidth: merged.minWidth,
+            minHeight: merged.minHeight,
+            maxWidth: merged.maxWidth,
+            maxHeight: merged.maxHeight,
+            direction: merged.direction,
+            ariaDescribedBy: merged.ariaDescribedBy,
+            ariaLabelledBy: merged.ariaLabelledBy,
+            ariaLabel: merged.ariaLabel,
+            ariaModal: merged.ariaModal,
+            autoFocus: merged.autoFocus,
+            restoreFocus: merged.restoreFocus,
+            scrollStrategy: merged.scrollStrategy ?? this.resolveScrollStrategy(merged.scrollBehavior),
+            closeOnNavigation: merged.closeOnNavigation,
+            viewContainerRef: merged.viewContainerRef,
+            injector: merged.injector,
+            // We handle close/Escape/backdrop ourselves so we can run the exit animation.
+            disableClose: true,
+            closeOnOverlayDetachments: false,
+            container: {
+                type: DialogContainer,
+                providers: () => [
+                    { provide: TwDialogConfig, useValue: merged },
+                    { provide: DialogConfig, useValue: merged },
+                ],
+            },
+            providers: (_cdkRef, _cdkConfig, container) => {
+                twRef = new TwDialogRef(_cdkRef, merged, container);
+                const providers = [
+                    { provide: TwDialogRef, useValue: twRef },
+                    { provide: TW_DIALOG_DATA, useValue: merged.data ?? null },
+                ];
+                if (Array.isArray(merged.providers))
+                    providers.push(...merged.providers);
+                return providers;
+            },
+        });
+        // After CDK attaches the component, copy references onto our ref.
+        twRef.componentRef = cdkRef.componentRef;
+        twRef.componentInstance = cdkRef.componentInstance;
+        const scope = this.parentDialog ?? this;
+        scope.registerOpen(twRef);
+        twRef.afterClosed().subscribe(() => {
+            scope.unregister(twRef);
+        });
+        return twRef;
+    }
+    /** Closes every open dialog managed by this service (and child services). */
+    closeAll() {
+        const dialogs = [...this.openDialogs()];
+        for (let i = dialogs.length - 1; i >= 0; i--)
+            dialogs[i].close();
+    }
+    /** Looks up an open dialog by its id. */
+    getDialogById(id) {
+        return this.openDialogs().find((dialog) => dialog.id === id);
+    }
+    ngOnDestroy() {
+        const dialogs = [...this.openDialogsAtThisLevel()];
+        for (let i = dialogs.length - 1; i >= 0; i--)
+            dialogs[i].close();
+        this.afterOpenedSubject.complete();
+        this.afterAllClosedSubject.complete();
+    }
+    registerOpen(ref) {
+        if (this.parentDialog) {
+            this.parentDialog.registerOpen(ref);
+        }
+        else {
+            this.openDialogsAtThisLevel.update((list) => [...list, ref]);
+            this.afterOpenedSubject.next(ref);
+        }
+    }
+    unregister(ref) {
+        if (this.parentDialog) {
+            this.parentDialog.unregister(ref);
+        }
+        else {
+            this.openDialogsAtThisLevel.update((list) => list.filter((d) => d !== ref));
+            if (this.openDialogsAtThisLevel().length === 0) {
+                this.afterAllClosedSubject.next();
+            }
+        }
+    }
+    getAfterAllClosedSource() {
+        return this.parentDialog
+            ? this.parentDialog.getAfterAllClosedSource()
+            : this.afterAllClosedSubject;
+    }
+    resolveConfig(config) {
+        const merged = new TwDialogConfig();
+        Object.assign(merged, this.defaultOptions, config);
+        return merged;
+    }
+    resolveScrollStrategy(strategy) {
+        switch (strategy) {
+            case 'close':
+                return createCloseScrollStrategy(this.injector);
+            case 'reposition':
+                return createRepositionScrollStrategy(this.injector);
+            case 'noop':
+                return createNoopScrollStrategy();
+            case 'block':
+            default:
+                return createBlockScrollStrategy(this.injector);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: TwDialog, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: TwDialog });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: TwDialog, decorators: [{
+            type: Injectable
+        }] });
+/**
+ * Registers the {@link TwDialog} service for dependency injection.
+ *
+ * @param defaultOptions Optional defaults merged into every `open()` call.
+ * @example
+ * ```ts
+ * provideTwDialog({ size: 'lg', hasBackdrop: true })
+ * ```
+ */
+function provideTwDialog(defaultOptions) {
+    const providers = [TwDialog];
+    if (defaultOptions) {
+        providers.push({ provide: TW_DIALOG_DEFAULT_OPTIONS, useValue: defaultOptions });
+    }
+    return makeEnvironmentProviders(providers);
+}
+
+/**
+ * Header wrapper for a dialog. Provides consistent padding and spacing for
+ * title + subtitle + leading icon, and separates the header from scrollable
+ * content below.
+ */
+class DialogHeaderDirective {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: DialogHeaderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.14", type: DialogHeaderDirective, isStandalone: true, selector: "[twDialogHeader], tw-dialog-header", host: { classAttribute: "flex items-start gap-3 px-6 pt-6 pb-4" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: DialogHeaderDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[twDialogHeader], tw-dialog-header',
+                    host: {
+                        class: 'flex items-start gap-3 px-6 pt-6 pb-4',
+                    },
+                }]
+        }] });
+// Slot tokens own light/dark contrast — no `dark:` overrides, no shade picks.
+// See role slot conventions in `projects/ngx-tw/theme/_semantic.css`.
+const ICON_COLOR_CLASSES = {
+    primary: 'bg-primary-soft text-primary-icon',
+    secondary: 'bg-secondary-soft text-secondary-icon',
+    accent: 'bg-accent-soft text-accent-icon',
+    neutral: 'bg-neutral-soft text-neutral-icon',
+    info: 'bg-info-soft text-info-icon',
+    success: 'bg-success-soft text-success-icon',
+    warning: 'bg-warning-soft text-warning-icon',
+    error: 'bg-error-soft text-error-icon',
+};
+/**
+ * Decorative leading icon for a dialog header. Use with a semantic `color` to
+ * match destructive / informational / success dialogs.
+ */
+class DialogIconDirective {
+    /** Semantic color for the icon container. Defaults to a neutral surface. */
+    color = input(undefined, ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
+    classes = computed(() => {
+        const base = 'flex size-10 shrink-0 items-center justify-center rounded-full';
+        const color = this.color();
+        return color ? `${base} ${ICON_COLOR_CLASSES[color]}` : `${base} bg-surface-muted text-fg`;
+    }, ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: DialogIconDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.14", type: DialogIconDirective, isStandalone: true, selector: "[twDialogIcon]", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: DialogIconDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[twDialogIcon]',
+                    host: {
+                        '[class]': 'classes()',
+                    },
+                }]
+        }], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }] } });
+/**
+ * Dialog title. Registers its ID with the container's `aria-labelledby` queue
+ * so screen readers announce it automatically.
+ */
+class DialogTitleDirective {
+    generatedId = inject(_IdGenerator).getId('tw-dialog-title-');
+    dialogRef = inject(TwDialogRef, {
+        optional: true,
+    });
+    // Ancestor-DI fallback for the rare case where `TwDialogRef` is not in the
+    // directive's injector chain (e.g. heavily nested template portals). The
+    // container ALWAYS resolves via element-injector traversal because the
+    // directive lives inside `<tw-dialog-container>`'s DOM tree.
+    container = inject(DialogContainer, { optional: true, skipSelf: true });
+    /** Custom id for the title element. Defaults to a generated unique id. */
+    id = input(this.generatedId, ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+    ngOnInit() {
+        const containerInstance = this.dialogRef?.containerInstance ?? this.container;
+        if (containerInstance)
+            containerInstance._addAriaLabelledBy(this.id());
+    }
+    ngOnDestroy() {
+        const containerInstance = this.dialogRef?.containerInstance ?? this.container;
+        if (containerInstance)
+            containerInstance._removeAriaLabelledBy(this.id());
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: DialogTitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.14", type: DialogTitleDirective, isStandalone: true, selector: "[twDialogTitle], tw-dialog-title", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "id": "id()" }, classAttribute: "text-sm font-semibold text-fg" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: DialogTitleDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[twDialogTitle], tw-dialog-title',
+                    host: {
+                        class: 'text-sm font-semibold text-fg',
+                        '[id]': 'id()',
+                    },
+                }]
+        }], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }] } });
+/** Secondary line beneath the dialog title — intended for a short description. */
+class DialogSubtitleDirective {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: DialogSubtitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.14", type: DialogSubtitleDirective, isStandalone: true, selector: "[twDialogSubtitle], tw-dialog-subtitle", host: { classAttribute: "text-sm text-fg-muted" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: DialogSubtitleDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[twDialogSubtitle], tw-dialog-subtitle',
+                    host: {
+                        class: 'text-sm text-fg-muted',
+                    },
+                }]
+        }] });
+/**
+ * Dialog description. Registers its ID with the container's `aria-describedby`
+ * queue so screen readers announce the descriptive paragraph after the title.
+ * Mirrors {@link DialogTitleDirective} but for `aria-describedby`.
+ */
+class DialogDescriptionDirective {
+    generatedId = inject(_IdGenerator).getId('tw-dialog-description-');
+    dialogRef = inject(TwDialogRef, {
+        optional: true,
+    });
+    // Ancestor-DI fallback — see DialogTitleDirective.
+    container = inject(DialogContainer, { optional: true, skipSelf: true });
+    /** Custom id for the description element. Defaults to a generated unique id. */
+    id = input(this.generatedId, ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+    ngOnInit() {
+        const containerInstance = this.dialogRef?.containerInstance ?? this.container;
+        if (containerInstance)
+            containerInstance._addAriaDescribedBy(this.id());
+    }
+    ngOnDestroy() {
+        const containerInstance = this.dialogRef?.containerInstance ?? this.container;
+        if (containerInstance)
+            containerInstance._removeAriaDescribedBy(this.id());
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: DialogDescriptionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.14", type: DialogDescriptionDirective, isStandalone: true, selector: "[twDialogDescription], tw-dialog-description", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "id": "id()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: DialogDescriptionDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[twDialogDescription], tw-dialog-description',
+                    host: {
+                        '[id]': 'id()',
+                    },
+                }]
+        }], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }] } });
+/**
+ * Scrollable content region of the dialog. Apply between the header and the
+ * actions bar. Inherits CDK's `CdkScrollable` to play nicely with scroll
+ * strategies and nested scrollables.
+ */
+class DialogContentDirective {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: DialogContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.14", type: DialogContentDirective, isStandalone: true, selector: "[twDialogContent], tw-dialog-content", host: { classAttribute: "flex-1 overflow-y-auto px-6 py-4 text-sm text-fg" }, hostDirectives: [{ directive: i1.CdkScrollable }], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: DialogContentDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[twDialogContent], tw-dialog-content',
+                    hostDirectives: [CdkScrollable],
+                    host: {
+                        class: 'flex-1 overflow-y-auto px-6 py-4 text-sm text-fg',
+                    },
+                }]
+        }] });
+/**
+ * Bottom action bar of a dialog. Use inside the dialog content or template to
+ * host Cancel/Confirm buttons. Stays pinned below scrollable content.
+ */
+class DialogActionsDirective {
+    /** Horizontal alignment of the action buttons. Defaults to `'end'`. */
+    align = input('end', ...(ngDevMode ? [{ debugName: "align" }] : /* istanbul ignore next */ []));
+    classes = computed(() => {
+        const align = this.align();
+        const justify = align === 'start' ? 'justify-start' : align === 'center' ? 'justify-center' : 'justify-end';
+        return `flex flex-wrap items-center gap-2 px-6 py-4 border-t border-border-muted ${justify}`;
+    }, ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: DialogActionsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.14", type: DialogActionsDirective, isStandalone: true, selector: "[twDialogActions], tw-dialog-actions", inputs: { align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: DialogActionsDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[twDialogActions], tw-dialog-actions',
+                    host: {
+                        '[class]': 'classes()',
+                    },
+                }]
+        }], propDecorators: { align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }] } });
+/**
+ * Closes the enclosing dialog when the host button is clicked. Provide a
+ * `[twDialogClose]` value to pass a result to `afterClosed()` subscribers.
+ */
+class DialogCloseDirective {
+    /** Value passed to `afterClosed()` when the button is clicked. */
+    twDialogClose = input(undefined, ...(ngDevMode ? [{ debugName: "twDialogClose" }] : /* istanbul ignore next */ []));
+    /** Native button `type`. Defaults to `'button'` to avoid accidental form submission. */
+    type = input('button', ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
+    dialogRef = inject(TwDialogRef, {
+        optional: true,
+    });
+    onClick() {
+        this.dialogRef?.close(this.twDialogClose());
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: DialogCloseDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.14", type: DialogCloseDirective, isStandalone: true, selector: "[twDialogClose]", inputs: { twDialogClose: { classPropertyName: "twDialogClose", publicName: "twDialogClose", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "onClick()" }, properties: { "attr.type": "type()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: DialogCloseDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[twDialogClose]',
+                    host: {
+                        '(click)': 'onClick()',
+                        '[attr.type]': 'type()',
+                    },
+                }]
+        }], propDecorators: { twDialogClose: [{ type: i0.Input, args: [{ isSignal: true, alias: "twDialogClose", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { DialogActionsDirective, DialogCloseDirective, DialogContainer, DialogContentDirective, DialogDescriptionDirective, DialogHeaderDirective, DialogIconDirective, DialogSubtitleDirective, DialogTitleDirective, TW_DIALOG_DATA, TW_DIALOG_DEFAULT_OPTIONS, TwDialog, TwDialogConfig, TwDialogRef, provideTwDialog };
+//# sourceMappingURL=cdevhub-ngx-tw-dialog.mjs.map