@brickclay-org/ui 0.0.41 → 0.0.42

package/fesm2022/brickclay-org-ui.mjs

@@ -1,15 +1,19 @@
 import * as i0 from '@angular/core';
-import { Component, EventEmitter, HostListener, ViewChildren, Output, Input, Injectable, NgModule, forwardRef, ViewEncapsulation, Optional, Self, ViewChild, input, model, output, signal, computed, effect, inject, ElementRef } from '@angular/core';
+import { Component, EventEmitter, HostListener, ViewChildren, Output, Input, Injectable, NgModule, forwardRef, ViewEncapsulation, Optional, Self, ViewChild, input, model, output, signal, computed, effect, inject, ElementRef, InjectionToken, Directive } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i1$1 from '@angular/forms';
 import { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
 import moment from 'moment';
-import { Subject } from 'rxjs';
+import { Subject, filter } from 'rxjs';
 import * as i2 from '@angular/cdk/drag-drop';
 import { moveItemInArray, DragDropModule } from '@angular/cdk/drag-drop';
-import { ScrollingModule } from '@angular/cdk/scrolling';
+import * as i1$2 from '@angular/cdk/scrolling';
+import { ScrollingModule, CdkScrollable } from '@angular/cdk/scrolling';
 import { NgxMaskDirective, provideNgxMask } from 'ngx-mask';
+import { DIALOG_DATA as DIALOG_DATA$1, CdkDialogContainer, Dialog, DialogModule } from '@angular/cdk/dialog';
+import { Overlay, OverlayModule } from '@angular/cdk/overlay';
+import { CdkPortalOutlet, PortalModule } from '@angular/cdk/portal';
 
 // Icon paths that will be resolved relative to the library's assets folder
 // When published to npm, users will need to configure their angular.json to include these assets
@@ -4022,6 +4026,1202 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                 type: Output
             }] } });
 
+/**
+ * Dialog Injection Tokens
+ *
+ * Architecture Decision:
+ * ─────────────────────
+ * • `DIALOG_DATA` — Re-exported from `@angular/cdk/dialog` so that
+ *   consumers import from our barrel and the token identity matches
+ *   exactly what CDK's `Dialog` service provides in the injector.
+ *   This means `@Inject(DIALOG_DATA)` works without any extra wiring.
+ *
+ * • `DIALOG_GLOBAL_CONFIG` — Optional app-level defaults, same pattern
+ *   as before.
+ *
+ * • `INTERNAL_DIALOG_CONFIG` — Internal-only token used to pass our
+ *   full `DialogConfig` (including animation fields) to the custom
+ *   `DialogContainerComponent`.  Not part of the public API.
+ */
+// ──── Public ─────────────────────────────────────────────────────────────
+/**
+ * Injection token used to pass arbitrary data into a dialog component.
+ *
+ * This is CDK's own `DIALOG_DATA` token — re-exported so that imports
+ * from our barrel (`shared/components/dialog`) resolve to the exact same
+ * token that CDK's `Dialog` service provides.
+ *
+ * Usage inside a dialog component:
+ * ```ts
+ * constructor(@Inject(DIALOG_DATA) public data: MyDataType) {}
+ * ```
+ */
+const DIALOG_DATA = DIALOG_DATA$1;
+/**
+ * Optional token for providing global dialog defaults at the
+ * application level.
+ *
+ * Usage in `app.config.ts` or a module's `providers` array:
+ * ```ts
+ * providers: [
+ *   { provide: DIALOG_GLOBAL_CONFIG, useValue: { animation: 'zoom', width: '600px' } }
+ * ]
+ * ```
+ */
+const DIALOG_GLOBAL_CONFIG = new InjectionToken('DIALOG_GLOBAL_CONFIG');
+// ──── Internal ───────────────────────────────────────────────────────────
+/**
+ * Internal token that carries our full `DialogConfig` (with animation
+ * settings, position offsets, etc.) into the `DialogContainerComponent`.
+ *
+ * @internal — not exported from the barrel; do not depend on it.
+ */
+const INTERNAL_DIALOG_CONFIG = new InjectionToken('INTERNAL_DIALOG_CONFIG');
+
+/**
+ * Dialog Animations
+ *
+ * Architecture Decision:
+ * ─────────────────────
+ * Animations are implemented via the Web Animations API (WAAPI) instead of
+ * Angular's @angular/animations so that:
+ *  1. The dialog container stays truly standalone — no BrowserAnimationsModule
+ *     dependency is required.
+ *  2. We have full programmatic control over timing, easing, and cleanup.
+ *  3. Future presets can be added without touching the component template.
+ *
+ * Each preset exports an `enter` and `leave` keyframe array plus a
+ * recommended timing object. The DialogContainerComponent plays these
+ * via `element.animate()`.
+ */
+/**
+ * Build enter/leave WAAPI keyframes for the dialog **panel** element.
+ */
+function getDialogPanelAnimation(preset, enterDuration, leaveDuration) {
+    const easeEnter = 'cubic-bezier(0.0, 0.0, 0.2, 1)'; // decelerate
+    const easeLeave = 'cubic-bezier(0.4, 0.0, 1, 1)'; // accelerate
+    switch (preset) {
+        // ─── Fade ────────────────────────────────────────────────────
+        case 'fade':
+            return {
+                enter: {
+                    keyframes: [
+                        { opacity: 0, transform: 'scale(0.95)' },
+                        { opacity: 1, transform: 'scale(1)' },
+                    ],
+                    options: { duration: enterDuration, easing: easeEnter, fill: 'forwards' },
+                },
+                leave: {
+                    keyframes: [
+                        { opacity: 1, transform: 'scale(1)' },
+                        { opacity: 0, transform: 'scale(0.95)' },
+                    ],
+                    options: { duration: leaveDuration, easing: easeLeave, fill: 'forwards' },
+                },
+            };
+        // ─── Zoom ────────────────────────────────────────────────────
+        case 'zoom':
+            return {
+                enter: {
+                    keyframes: [
+                        { opacity: 0, transform: 'scale(0.5)' },
+                        { opacity: 1, transform: 'scale(1)' },
+                    ],
+                    options: { duration: enterDuration, easing: easeEnter, fill: 'forwards' },
+                },
+                leave: {
+                    keyframes: [
+                        { opacity: 1, transform: 'scale(1)' },
+                        { opacity: 0, transform: 'scale(0.5)' },
+                    ],
+                    options: { duration: leaveDuration, easing: easeLeave, fill: 'forwards' },
+                },
+            };
+        // ─── Slide Top ───────────────────────────────────────────────
+        case 'slide-top':
+            return {
+                enter: {
+                    keyframes: [
+                        { opacity: 0, transform: 'translateY(-40px)' },
+                        { opacity: 1, transform: 'translateY(0)' },
+                    ],
+                    options: { duration: enterDuration, easing: easeEnter, fill: 'forwards' },
+                },
+                leave: {
+                    keyframes: [
+                        { opacity: 1, transform: 'translateY(0)' },
+                        { opacity: 0, transform: 'translateY(-40px)' },
+                    ],
+                    options: { duration: leaveDuration, easing: easeLeave, fill: 'forwards' },
+                },
+            };
+        // ─── Slide Bottom ────────────────────────────────────────────
+        case 'slide-bottom':
+            return {
+                enter: {
+                    keyframes: [
+                        { opacity: 0, transform: 'translateY(40px)' },
+                        { opacity: 1, transform: 'translateY(0)' },
+                    ],
+                    options: { duration: enterDuration, easing: easeEnter, fill: 'forwards' },
+                },
+                leave: {
+                    keyframes: [
+                        { opacity: 1, transform: 'translateY(0)' },
+                        { opacity: 0, transform: 'translateY(40px)' },
+                    ],
+                    options: { duration: leaveDuration, easing: easeLeave, fill: 'forwards' },
+                },
+            };
+        // ─── Slide Left ──────────────────────────────────────────────
+        case 'slide-left':
+            return {
+                enter: {
+                    keyframes: [
+                        { opacity: 0, transform: 'translateX(-40px)' },
+                        { opacity: 1, transform: 'translateX(0)' },
+                    ],
+                    options: { duration: enterDuration, easing: easeEnter, fill: 'forwards' },
+                },
+                leave: {
+                    keyframes: [
+                        { opacity: 1, transform: 'translateX(0)' },
+                        { opacity: 0, transform: 'translateX(-40px)' },
+                    ],
+                    options: { duration: leaveDuration, easing: easeLeave, fill: 'forwards' },
+                },
+            };
+        // ─── Slide Right ─────────────────────────────────────────────
+        case 'slide-right':
+            return {
+                enter: {
+                    keyframes: [
+                        { opacity: 0, transform: 'translateX(40px)' },
+                        { opacity: 1, transform: 'translateX(0)' },
+                    ],
+                    options: { duration: enterDuration, easing: easeEnter, fill: 'forwards' },
+                },
+                leave: {
+                    keyframes: [
+                        { opacity: 1, transform: 'translateX(0)' },
+                        { opacity: 0, transform: 'translateX(40px)' },
+                    ],
+                    options: { duration: leaveDuration, easing: easeLeave, fill: 'forwards' },
+                },
+            };
+        // ─── None ────────────────────────────────────────────────────
+        case 'none':
+        default:
+            return {
+                enter: {
+                    keyframes: [{ opacity: 1 }],
+                    options: { duration: 0, fill: 'forwards' },
+                },
+                leave: {
+                    keyframes: [{ opacity: 0 }],
+                    options: { duration: 0, fill: 'forwards' },
+                },
+            };
+    }
+}
+/**
+ * Build enter/leave WAAPI keyframes for the **backdrop** element.
+ * The backdrop always uses a simple opacity fade regardless of the
+ * panel animation preset.
+ */
+function getDialogBackdropAnimation(enterDuration, leaveDuration) {
+    return {
+        enter: {
+            keyframes: [{ opacity: 0 }, { opacity: 1 }],
+            options: { duration: enterDuration, easing: 'ease-out', fill: 'forwards' },
+        },
+        leave: {
+            keyframes: [{ opacity: 1 }, { opacity: 0 }],
+            options: { duration: leaveDuration, easing: 'ease-in', fill: 'forwards' },
+        },
+    };
+}
+
+/**
+ * DialogContainerComponent
+ *
+ * Architecture Decision:
+ * ─────────────────────
+ * Extends CDK's `CdkDialogContainer` — the headless base class that
+ * provides:
+ *   • Focus-trap management (tab key stays inside the dialog).
+ *   • Auto-focus / restore-focus behaviour.
+ *   • Portal outlet (`<ng-template cdkPortalOutlet />`) for dynamic
+ *     component projection.
+ *   • ARIA attribute management on the host element.
+ *
+ * We add:
+ *   • WAAPI enter / leave animations on the panel (host element) and
+ *     the CDK backdrop sibling.
+ *   • Flex-column styles on the dynamically created component host so
+ *     `.bk-dialog-content` scrolls and `.bk-dialog-actions` stays pinned.
+ *   • Position-offset application via CSS margin.
+ *
+ * This component is **never** used directly — it is created internally
+ * by `DialogService` via CDK's `Dialog.open()`.
+ */
+class DialogContainerComponent extends CdkDialogContainer {
+    /**
+     * Our full config (including animation fields).
+     * Provided by DialogService via the INTERNAL_DIALOG_CONFIG token.
+     */
+    _dialogConfig = inject(INTERNAL_DIALOG_CONFIG);
+    // ──── Opened promise ─────────────────────────────────────────────────
+    /**
+     * Resolves when the enter animation finishes (or immediately for 'none').
+     * `DialogService` subscribes via `.then()` to emit `afterOpened` on the
+     * `DialogRef`.
+     */
+    _resolveOpened;
+    opened = new Promise(resolve => {
+        this._resolveOpened = resolve;
+    });
+    // ──── Lifecycle ──────────────────────────────────────────────────────
+    ngOnInit() {
+        this._playEnterAnimation();
+        this._applyPositionOffsets();
+    }
+    // ──── Portal override ────────────────────────────────────────────────
+    /**
+     * Override the CDK base to apply flex-column layout on the dynamically
+     * created component's host element.
+     *
+     * Angular's emulated view encapsulation prevents scoped CSS from reaching
+     * dynamically-projected elements, so we set styles programmatically.
+     */
+    attachComponentPortal(portal) {
+        const ref = super.attachComponentPortal(portal);
+        const el = ref.location.nativeElement;
+        el.style.display = 'flex';
+        el.style.flexDirection = 'column';
+        el.style.flex = '1 1 auto';
+        el.style.minHeight = '0';
+        el.style.overflow = 'hidden';
+        return ref;
+    }
+    // ──── WAAPI Animations ───────────────────────────────────────────────
+    /**
+     * Play the enter animation on the panel (host element) and backdrop.
+     * Resolves the `opened` promise when the panel animation finishes.
+     */
+    _playEnterAnimation() {
+        const preset = this._dialogConfig.animation ?? 'fade';
+        if (preset === 'none') {
+            this._resolveOpened();
+            return;
+        }
+        const enterDur = this._dialogConfig.animationDurationEnter ?? 200;
+        const leaveDur = this._dialogConfig.animationDurationLeave ?? 150;
+        // ── Panel animation ──
+        const panelAnim = getDialogPanelAnimation(preset, enterDur, leaveDur);
+        const anim = this._elementRef.nativeElement.animate(panelAnim.enter.keyframes, panelAnim.enter.options);
+        // ── Backdrop animation ──
+        const backdropEl = this._getBackdropElement();
+        if (backdropEl) {
+            // Override CDK's CSS transition so our WAAPI timing wins.
+            backdropEl.style.transition = 'none';
+            backdropEl.style.backgroundColor = 'var(--dialog-backdrop-bg, rgba(0, 0, 0, 0.5))';
+            const bdAnim = getDialogBackdropAnimation(enterDur, leaveDur);
+            backdropEl.animate(bdAnim.enter.keyframes, bdAnim.enter.options);
+        }
+        anim.onfinish = () => this._resolveOpened();
+    }
+    /**
+     * Play the leave animation.  Returns a Promise that resolves when done.
+     * Called by `DialogRef._runCloseSequence()` before CDK tears down the
+     * overlay.
+     */
+    playLeaveAnimation() {
+        const preset = this._dialogConfig.animation ?? 'fade';
+        if (preset === 'none')
+            return Promise.resolve();
+        const enterDur = this._dialogConfig.animationDurationEnter ?? 200;
+        const leaveDur = this._dialogConfig.animationDurationLeave ?? 150;
+        return new Promise(resolve => {
+            // ── Panel ──
+            const panelAnim = getDialogPanelAnimation(preset, enterDur, leaveDur);
+            const anim = this._elementRef.nativeElement.animate(panelAnim.leave.keyframes, panelAnim.leave.options);
+            // ── Backdrop ──
+            const backdropEl = this._getBackdropElement();
+            if (backdropEl) {
+                const bdAnim = getDialogBackdropAnimation(enterDur, leaveDur);
+                backdropEl.animate(bdAnim.leave.keyframes, bdAnim.leave.options);
+            }
+            anim.onfinish = () => resolve();
+            // Safety net — resolve even if onfinish never fires (SSR, etc.).
+            setTimeout(() => resolve(), leaveDur + 50);
+        });
+    }
+    // ──── Position Offsets ───────────────────────────────────────────────
+    /**
+     * Apply explicit position offsets via CSS margin.
+     * These are additive to CDK's `GlobalPositionStrategy` alignment.
+     */
+    _applyPositionOffsets() {
+        const pos = this._dialogConfig.position;
+        if (!pos)
+            return;
+        const el = this._elementRef.nativeElement;
+        if (pos.top)
+            el.style.marginTop = pos.top;
+        if (pos.bottom)
+            el.style.marginBottom = pos.bottom;
+        if (pos.left)
+            el.style.marginLeft = pos.left;
+        if (pos.right)
+            el.style.marginRight = pos.right;
+    }
+    // ──── Helpers ────────────────────────────────────────────────────────
+    /**
+     * CDK places the backdrop as a sibling of `.cdk-overlay-pane`.
+     * Walk up from our host → pane → wrapper, then query for the backdrop.
+     */
+    _getBackdropElement() {
+        const pane = this._elementRef.nativeElement.closest('.cdk-overlay-pane');
+        return pane?.parentElement?.querySelector('.cdk-overlay-backdrop') ?? null;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DialogContainerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: DialogContainerComponent, isStandalone: true, selector: "bk-dialog-container", host: { classAttribute: "bk-dialog-container" }, usesInheritance: true, ngImport: i0, template: "<!--\r\n  Dialog Container Template (CDK-based)\r\n\r\n  Architecture:\r\n  \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n  CDK Overlay manages the full overlay stack:\r\n\r\n  \u250C\u2500 .cdk-overlay-container (fixed, z-index managed by CDK) \u2500\u2500\u2500\u2500\u2500\u2500\u2510\r\n  \u2502  \u250C\u2500 .cdk-global-overlay-wrapper (flex-center) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510 \u2502\r\n  \u2502  \u2502  .cdk-overlay-backdrop (click \u2192 close, CDK transition)   \u2502 \u2502\r\n  \u2502  \u2502  \u250C\u2500 .cdk-overlay-pane (width/height from config) \u2500\u2500\u2500\u2500\u2500\u2500\u2510 \u2502 \u2502\r\n  \u2502  \u2502  \u2502  <bk-dialog-container>  \u2190 this component (panel)     \u2502 \u2502 \u2502\r\n  \u2502  \u2502  \u2502    <ng-template cdkPortalOutlet />  \u2190 user component  \u2502 \u2502 \u2502\r\n  \u2502  \u2502  \u2502      <UserDialogComponent>                            \u2502 \u2502 \u2502\r\n  \u2502  \u2502  \u2502        <h2 bk-dialog-title>Title</h2>                 \u2502 \u2502 \u2502\r\n  \u2502  \u2502  \u2502        <div bk-dialog-content>Scrollable body</div>   \u2502 \u2502 \u2502\r\n  \u2502  \u2502  \u2502        <div bk-dialog-actions>Pinned buttons</div>    \u2502 \u2502 \u2502\r\n  \u2502  \u2502  \u2502      </UserDialogComponent>                           \u2502 \u2502 \u2502\r\n  \u2502  \u2502  \u2502  </bk-dialog-container>                               \u2502 \u2502 \u2502\r\n  \u2502  \u2502  \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518 \u2502 \u2502\r\n  \u2502  \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518 \u2502\r\n  \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\r\n\r\n  The host element IS the visible panel (background, radius, shadow).\r\n  CDK Portal projects the caller's component as a direct child.\r\n\r\n  Directives (BkDialogTitle, BkDialogContent, BkDialogActions, BkDialogClose)\r\n  apply the corresponding CSS classes and add accessibility features.\r\n-->\r\n\r\n<ng-template cdkPortalOutlet />\r\n", styles: [":host{display:flex;flex-direction:column;flex:1;min-height:0;max-height:inherit;background:var(--bk-dialog-panel-bg, #ffffff);border-radius:var(--bk-dialog-panel-radius, 8px);box-shadow:var( --bk-dialog-panel-shadow, 0 11px 15px -7px rgba(0, 0, 0, .2), 0 24px 38px 3px rgba(0, 0, 0, .14), 0 9px 46px 8px rgba(0, 0, 0, .12) );outline:0;box-sizing:border-box;overflow:hidden;will-change:transform,opacity}:host ::ng-deep>:first-child{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;overflow:hidden}:host ::ng-deep .bk-dialog-content{flex:1 1 auto;overflow:auto;min-height:0;display:block;-webkit-overflow-scrolling:touch}:host ::ng-deep .bk-dialog-actions{flex:0 0 auto;display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;min-height:52px}:host ::ng-deep .bk-dialog-title{flex:0 0 auto;margin:0}:host ::ng-deep .bk-dialog-actions-align-start{justify-content:flex-start}:host ::ng-deep .bk-dialog-actions-align-center{justify-content:center}\n"], dependencies: [{ kind: "directive", type: CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DialogContainerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'bk-dialog-container', standalone: true, imports: [CdkPortalOutlet], host: {
+                        'class': 'bk-dialog-container',
+                    }, template: "<!--\r\n  Dialog Container Template (CDK-based)\r\n\r\n  Architecture:\r\n  \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n  CDK Overlay manages the full overlay stack:\r\n\r\n  \u250C\u2500 .cdk-overlay-container (fixed, z-index managed by CDK) \u2500\u2500\u2500\u2500\u2500\u2500\u2510\r\n  \u2502  \u250C\u2500 .cdk-global-overlay-wrapper (flex-center) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510 \u2502\r\n  \u2502  \u2502  .cdk-overlay-backdrop (click \u2192 close, CDK transition)   \u2502 \u2502\r\n  \u2502  \u2502  \u250C\u2500 .cdk-overlay-pane (width/height from config) \u2500\u2500\u2500\u2500\u2500\u2500\u2510 \u2502 \u2502\r\n  \u2502  \u2502  \u2502  <bk-dialog-container>  \u2190 this component (panel)     \u2502 \u2502 \u2502\r\n  \u2502  \u2502  \u2502    <ng-template cdkPortalOutlet />  \u2190 user component  \u2502 \u2502 \u2502\r\n  \u2502  \u2502  \u2502      <UserDialogComponent>                            \u2502 \u2502 \u2502\r\n  \u2502  \u2502  \u2502        <h2 bk-dialog-title>Title</h2>                 \u2502 \u2502 \u2502\r\n  \u2502  \u2502  \u2502        <div bk-dialog-content>Scrollable body</div>   \u2502 \u2502 \u2502\r\n  \u2502  \u2502  \u2502        <div bk-dialog-actions>Pinned buttons</div>    \u2502 \u2502 \u2502\r\n  \u2502  \u2502  \u2502      </UserDialogComponent>                           \u2502 \u2502 \u2502\r\n  \u2502  \u2502  \u2502  </bk-dialog-container>                               \u2502 \u2502 \u2502\r\n  \u2502  \u2502  \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518 \u2502 \u2502\r\n  \u2502  \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518 \u2502\r\n  \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\r\n\r\n  The host element IS the visible panel (background, radius, shadow).\r\n  CDK Portal projects the caller's component as a direct child.\r\n\r\n  Directives (BkDialogTitle, BkDialogContent, BkDialogActions, BkDialogClose)\r\n  apply the corresponding CSS classes and add accessibility features.\r\n-->\r\n\r\n<ng-template cdkPortalOutlet />\r\n", styles: [":host{display:flex;flex-direction:column;flex:1;min-height:0;max-height:inherit;background:var(--bk-dialog-panel-bg, #ffffff);border-radius:var(--bk-dialog-panel-radius, 8px);box-shadow:var( --bk-dialog-panel-shadow, 0 11px 15px -7px rgba(0, 0, 0, .2), 0 24px 38px 3px rgba(0, 0, 0, .14), 0 9px 46px 8px rgba(0, 0, 0, .12) );outline:0;box-sizing:border-box;overflow:hidden;will-change:transform,opacity}:host ::ng-deep>:first-child{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;overflow:hidden}:host ::ng-deep .bk-dialog-content{flex:1 1 auto;overflow:auto;min-height:0;display:block;-webkit-overflow-scrolling:touch}:host ::ng-deep .bk-dialog-actions{flex:0 0 auto;display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;min-height:52px}:host ::ng-deep .bk-dialog-title{flex:0 0 auto;margin:0}:host ::ng-deep .bk-dialog-actions-align-start{justify-content:flex-start}:host ::ng-deep .bk-dialog-actions-align-center{justify-content:center}\n"] }]
+        }] });
+
+/**
+ * DialogRef — Handle returned to callers by `DialogService.open()`.
+ *
+ * Architecture Decision:
+ * ─────────────────────
+ * Wraps CDK's `DialogRef` to add:
+ *  • WAAPI leave-animation before CDK tears down the overlay.
+ *  • Per-instance `afterOpened()` observable (CDK only has a service-level
+ *    `afterOpened` Subject).
+ *  • The same familiar API shape used by callers (`close`, `afterClosed`,
+ *    `backdropClick`, `keydownEvents`, `componentInstance`).
+ *
+ * CDK's `DialogRef<R, C>` has Result first, Component second.
+ * Ours keeps `<T, R>` (Component first, Result second) to match the
+ * convention consumers already use.
+ */
+class DialogRef {
+    _cdkRef;
+    /** Unique dialog identifier (managed by CDK). */
+    id;
+    /** Instance of the component rendered inside the dialog. */
+    componentInstance;
+    // ──── Internal wiring (set by DialogService) ──────────────────────────
+    /** @internal Container reference for leave animation. */
+    _containerInstance;
+    /** @internal Prevent double-close. */
+    _closing = false;
+    /** @internal Per-instance afterOpened Subject. */
+    _afterOpened$ = new Subject();
+    constructor(
+    /**
+     * @internal Wrapped CDK ref.
+     * Typed as `CdkDialogRef<any>` to avoid deep generic-variance issues
+     * that arise from CDK's `config.providers` callback signature.
+     * The public API (`afterClosed`, etc.) re-types the observables.
+     */
+    _cdkRef) {
+        this._cdkRef = _cdkRef;
+        this.id = _cdkRef.id;
+    }
+    // ──── Public API ──────────────────────────────────────────────────────
+    /**
+     * Close the dialog, optionally returning a result.
+     * Plays the WAAPI leave animation, then delegates to CDK for cleanup.
+     */
+    close(result) {
+        if (this._closing)
+            return;
+        this._closing = true;
+        this._runCloseSequence(result);
+    }
+    /**
+     * Observable that emits (and completes) once after the dialog has been
+     * removed from the DOM and all cleanup is done.
+     */
+    afterClosed() {
+        return this._cdkRef.closed;
+    }
+    /**
+     * Observable that emits (and completes) when the enter animation
+     * finishes and the dialog is fully visible.
+     */
+    afterOpened() {
+        return this._afterOpened$.asObservable();
+    }
+    /**
+     * Observable of backdrop / outside-pointer click events.
+     */
+    backdropClick() {
+        return this._cdkRef.outsidePointerEvents;
+    }
+    /**
+     * Observable of keyboard events dispatched while this dialog is open.
+     */
+    keydownEvents() {
+        return this._cdkRef.keydownEvents;
+    }
+    // ──── Internal helpers ────────────────────────────────────────────────
+    /** @internal Called by the container once the enter animation finishes. */
+    _emitOpened() {
+        this._afterOpened$.next();
+        this._afterOpened$.complete();
+    }
+    /** Play leave animation, then close via CDK. */
+    async _runCloseSequence(result) {
+        try {
+            await this._containerInstance.playLeaveAnimation();
+        }
+        catch {
+            // Animation may fail in SSR / test — proceed anyway.
+        }
+        this._cdkRef.close(result);
+    }
+}
+
+/**
+ * Dialog Configuration
+ *
+ * Architecture Decision:
+ * ─────────────────────
+ * Our `DialogConfig` mirrors the fields from CDK's `DialogConfig` that we
+ * expose, plus adds custom animation properties powered by WAAPI.
+ *
+ * When `DialogService.open()` is called these values are:
+ *  1. Merged with global defaults and per-call overrides.
+ *  2. Mapped onto CDK's native `DialogConfig` for overlay, backdrop, scroll,
+ *     position, ARIA, and focus-trap management.
+ *  3. Passed to `DialogContainerComponent` via an internal token for
+ *     animation playback and position offsets.
+ *
+ * CDK handles: unique IDs, z-index stacking, scroll blocking, focus trap,
+ * backdrop rendering, overlay positioning, keyboard events.
+ * We handle: WAAPI animations, panel appearance, convenience config sugar.
+ */
+// ──── Defaults ───────────────────────────────────────────────────────────
+const DEFAULT_DIALOG_CONFIG = {
+    id: undefined,
+    width: undefined,
+    height: undefined,
+    minWidth: undefined,
+    minHeight: undefined,
+    maxWidth: '90vw',
+    maxHeight: '90vh',
+    disableClose: false,
+    closeOnBackdrop: true,
+    closeOnEsc: true,
+    hasBackdrop: true,
+    lockScroll: true,
+    panelClass: '',
+    backdropClass: '',
+    data: undefined,
+    animation: 'fade',
+    animationDurationEnter: 200,
+    animationDurationLeave: 150,
+    position: undefined,
+    role: 'dialog',
+    ariaLabel: undefined,
+    ariaLabelledBy: undefined,
+    ariaDescribedBy: undefined,
+    autoFocus: true,
+    restoreFocus: true,
+    scrollStrategy: undefined,
+};
+
+/**
+ * DialogService — The core engine of the custom dialog system.
+ *
+ * Architecture Decision:
+ * ─────────────────────
+ * Built on top of Angular CDK's `Dialog` service (the same foundation
+ * that `MatDialog` uses internally):
+ *
+ *  1. CDK creates the overlay, backdrop, scroll-blocking, focus-trap,
+ *     z-index stacking, and unique ID management — battle-tested infra
+ *     shared with every Angular Material dialog in the ecosystem.
+ *
+ *  2. We provide our own `DialogContainerComponent` (extending
+ *     `CdkDialogContainer`) for WAAPI animations and panel styling.
+ *
+ *  3. We wrap CDK's `DialogRef` in our own `DialogRef` to add the
+ *     leave-animation step before CDK tears down the overlay, and to
+ *     expose the same familiar API shape (`afterClosed()`, etc.).
+ *
+ *  4. Configuration is merged DEFAULT → GLOBAL → per-call, then mapped
+ *     to CDK's native config with our extras carried via an internal
+ *     injection token.
+ *
+ * What CDK handles for us (no custom code needed):
+ * ─────────────────────────────────────────────────
+ *   ✓ Unique dialog IDs (throws on collision)
+ *   ✓ Z-index stacking via `.cdk-overlay-container`
+ *   ✓ Focus trap (tab key stays inside dialog)
+ *   ✓ Auto-focus / restore-focus
+ *   ✓ Scroll blocking (BlockScrollStrategy)
+ *   ✓ Backdrop rendering and click detection
+ *   ✓ Keyboard event forwarding
+ *   ✓ Overlay DOM lifecycle (create → attach → detach → dispose)
+ *
+ * Memory safety:
+ * ─────────────
+ * CDK manages the full lifecycle: on close it detaches the overlay,
+ * destroys the container, and disposes the overlay ref.
+ * Our DialogRef subjects complete via CDK's `closed` observable,
+ * preventing lingering subscriptions.
+ */
+class DialogService {
+    _cdkDialog = inject(Dialog);
+    _overlay = inject(Overlay);
+    _globalConfig = inject(DIALOG_GLOBAL_CONFIG, { optional: true });
+    /** Stack of currently open dialog refs (most recent = last). */
+    _openDialogRefs = [];
+    // ════════════════════════════════════════════════════════════════════
+    //  Public API
+    // ════════════════════════════════════════════════════════════════════
+    /**
+     * Open a dialog containing the given component.
+     *
+     * @param component  The component class to render inside the dialog.
+     * @param config     Optional per-dialog configuration (merged on top
+     *                   of global and default settings).
+     * @returns          A strongly-typed `DialogRef` to interact with.
+     *
+     * @example
+     * ```ts
+     * const ref = this.dialog.open(UserFormComponent, {
+     *   width: '500px',
+     *   data: { userId: 10 },
+     * });
+     * ref.afterClosed().subscribe(result => console.log(result));
+     * ```
+     */
+    open(component, config) {
+        // ── 1. Merge configs: DEFAULT ← GLOBAL ← per-call ──────────────
+        const mergedConfig = {
+            ...DEFAULT_DIALOG_CONFIG,
+            ...(this._globalConfig ?? {}),
+            ...(config ?? {}),
+        };
+        // ── 2. Prepare the return ref (set inside providers callback) ───
+        let ourRef;
+        // ── 3. Build CDK-native config ──────────────────────────────────
+        const cdkConfig = {
+            // Identity
+            id: mergedConfig.id,
+            // Sizing (applied on .cdk-overlay-pane)
+            width: mergedConfig.width,
+            height: mergedConfig.height,
+            minWidth: mergedConfig.minWidth,
+            minHeight: mergedConfig.minHeight,
+            maxWidth: mergedConfig.maxWidth ?? '90vw',
+            maxHeight: mergedConfig.maxHeight ?? '90vh',
+            // Backdrop
+            hasBackdrop: mergedConfig.hasBackdrop !== false,
+            backdropClass: mergedConfig.backdropClass || 'cdk-overlay-dark-backdrop',
+            // Panel class (always include our base class)
+            panelClass: this._buildPanelClasses(mergedConfig),
+            // Data (CDK provides this as DIALOG_DATA automatically)
+            data: mergedConfig.data,
+            // We manage close ourselves for fine-grained closeOnBackdrop / closeOnEsc.
+            disableClose: true,
+            // Accessibility
+            autoFocus: mergedConfig.autoFocus ?? true,
+            restoreFocus: mergedConfig.restoreFocus ?? true,
+            role: mergedConfig.role ?? 'dialog',
+            ariaLabel: mergedConfig.ariaLabel ?? null,
+            ariaLabelledBy: mergedConfig.ariaLabelledBy ?? null,
+            ariaDescribedBy: mergedConfig.ariaDescribedBy ?? null,
+            // Scroll strategy
+            scrollStrategy: mergedConfig.scrollStrategy ??
+                (mergedConfig.lockScroll !== false
+                    ? this._overlay.scrollStrategies.block()
+                    : this._overlay.scrollStrategies.noop()),
+            // Position strategy (centered by default, shifted by offsets)
+            positionStrategy: this._buildPositionStrategy(mergedConfig),
+            // ── Custom container ──────────────────────────────────────────
+            container: {
+                type: DialogContainerComponent,
+                providers: () => [
+                    { provide: INTERNAL_DIALOG_CONFIG, useValue: mergedConfig },
+                ],
+            },
+            // ── Provider callback ─────────────────────────────────────────
+            // Runs after the container is created but before the user
+            // component.  We create our `DialogRef` wrapper here and make
+            // it available for injection in the user component.
+            providers: (cdkRef, _cdkConfig, containerInstance) => {
+                ourRef = new DialogRef(cdkRef);
+                ourRef._containerInstance = containerInstance;
+                // Wire up afterOpened emission.
+                containerInstance.opened
+                    .then(() => ourRef._emitOpened());
+                return [
+                    { provide: DialogRef, useValue: ourRef },
+                ];
+            },
+        };
+        // ── 4. Open via CDK ─────────────────────────────────────────────
+        const cdkRef = this._cdkDialog.open(component, cdkConfig);
+        // ── 5. Link componentInstance ───────────────────────────────────
+        ourRef.componentInstance = cdkRef.componentInstance;
+        // ── 6. Set up close-on-backdrop / close-on-ESC ──────────────────
+        this._setupCloseListeners(ourRef, mergedConfig);
+        // ── 7. Track in stack ───────────────────────────────────────────
+        this._openDialogRefs.push(ourRef);
+        // ── 8. Cleanup on close ─────────────────────────────────────────
+        ourRef.afterClosed().subscribe(() => {
+            const idx = this._openDialogRefs.indexOf(ourRef);
+            if (idx !== -1)
+                this._openDialogRefs.splice(idx, 1);
+        });
+        return ourRef;
+    }
+    /**
+     * Close all currently open dialogs (most recent first).
+     */
+    closeAll() {
+        for (let i = this._openDialogRefs.length - 1; i >= 0; i--) {
+            this._openDialogRefs[i].close();
+        }
+    }
+    /**
+     * Returns the `DialogRef` of the most recently opened dialog,
+     * or `undefined` if none are open.
+     */
+    getTopDialog() {
+        return this._openDialogRefs[this._openDialogRefs.length - 1];
+    }
+    /**
+     * Get a dialog by its CDK-managed unique ID.
+     */
+    getDialogById(id) {
+        return this._openDialogRefs.find(r => r.id === id);
+    }
+    /**
+     * Number of currently open dialogs.
+     */
+    get openDialogCount() {
+        return this._openDialogRefs.length;
+    }
+    /**
+     * Read-only snapshot of currently open dialog refs.
+     * Used internally by content directives (`BkDialogTitle`, `BkDialogActions`,
+     * `BkDialogClose`) for the DOM-walk fallback when `DialogRef` is not
+     * available via injection (e.g. inside `<ng-template>`).
+     */
+    get openDialogsRef() {
+        return this._openDialogRefs;
+    }
+    // ════════════════════════════════════════════════════════════════════
+    //  Convenience Helpers
+    // ════════════════════════════════════════════════════════════════════
+    /**
+     * Open a simple confirmation dialog.
+     * Resolves `true` if the user confirms, `false` otherwise.
+     *
+     * @example
+     * ```ts
+     * const ref = this.dialog.confirm({
+     *   message: 'Delete this item?',
+     *   component: ConfirmDialogComponent,
+     * });
+     * ref.afterClosed().subscribe(yes => { if (yes) ... });
+     * ```
+     */
+    confirm(options) {
+        return this.open(options.component, {
+            width: options.width ?? '400px',
+            disableClose: true,
+            closeOnBackdrop: false,
+            animation: 'fade',
+            data: {
+                title: options.title ?? 'Confirm',
+                message: options.message,
+                btnOkText: options.btnOkText ?? 'Yes',
+                btnCancelText: options.btnCancelText ?? 'No',
+            },
+        });
+    }
+    /**
+     * Open a simple alert dialog.
+     */
+    alert(options) {
+        return this.open(options.component, {
+            width: options.width ?? '400px',
+            disableClose: true,
+            closeOnBackdrop: false,
+            animation: 'fade',
+            data: {
+                title: options.title ?? 'Alert',
+                message: options.message,
+                btnOkText: options.btnOkText ?? 'OK',
+            },
+        });
+    }
+    // ════════════════════════════════════════════════════════════════════
+    //  Private
+    // ════════════════════════════════════════════════════════════════════
+    /**
+     * Subscribe to backdrop-click and ESC events on the CDK ref,
+     * closing the dialog based on our config flags.
+     *
+     * We always set CDK `disableClose: true` so that CDK never auto-closes;
+     * this gives us fine-grained control over `closeOnBackdrop` and
+     * `closeOnEsc` independently.
+     */
+    _setupCloseListeners(ref, config) {
+        if (config.disableClose)
+            return;
+        // Backdrop click
+        if (config.closeOnBackdrop !== false) {
+            ref.backdropClick().subscribe(() => ref.close());
+        }
+        // ESC key
+        if (config.closeOnEsc !== false) {
+            ref.keydownEvents()
+                .pipe(filter((e) => e.key === 'Escape' || e.key === 'Esc'))
+                .subscribe((e) => {
+                e.preventDefault();
+                ref.close();
+            });
+        }
+    }
+    /**
+     * Build the CSS classes for the CDK overlay pane.
+     * Always includes our base class; adds user-provided classes on top.
+     */
+    _buildPanelClasses(config) {
+        const classes = ['bk-dialog-pane'];
+        if (config.panelClass) {
+            if (Array.isArray(config.panelClass)) {
+                classes.push(...config.panelClass);
+            }
+            else {
+                classes.push(config.panelClass);
+            }
+        }
+        return classes;
+    }
+    /**
+     * Build CDK's `GlobalPositionStrategy` from our position config.
+     * Falls back to centred (both axes) when no position is specified.
+     */
+    _buildPositionStrategy(config) {
+        const strategy = this._overlay.position().global();
+        if (config.position?.top) {
+            strategy.top(config.position.top);
+        }
+        else if (config.position?.bottom) {
+            strategy.bottom(config.position.bottom);
+        }
+        else {
+            strategy.centerVertically();
+        }
+        if (config.position?.left) {
+            strategy.left(config.position.left);
+        }
+        else if (config.position?.right) {
+            strategy.right(config.position.right);
+        }
+        else {
+            strategy.centerHorizontally();
+        }
+        return strategy;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DialogService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DialogService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DialogService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+/**
+ * Dialog Content Directives
+ *
+ * Architecture Decision:
+ * ─────────────────────
+ * These directives mirror Angular Material's dialog content directives:
+ *
+ *   MatDialogTitle    → BkDialogTitle
+ *   MatDialogContent  → BkDialogContent
+ *   MatDialogActions  → BkDialogActions
+ *   MatDialogClose    → BkDialogClose
+ *
+ * Each directive:
+ *  1. Applies the corresponding CSS host class (e.g. `bk-dialog-content`)
+ *     that is styled in `dialog-container.css` via `::ng-deep`.
+ *  2. Provides extra accessibility or behavioural features on top of the
+ *     plain CSS class.
+ *
+ * Consumers can still use the raw CSS classes directly (without importing
+ * these directives) for backward compatibility, but the directives are
+ * preferred because they add CdkScrollable, ARIA integration, and one-click
+ * close behaviour.
+ *
+ * @see https://github.com/angular/components/blob/main/src/material/dialog/dialog-content-directives.ts
+ */
+// ──── ID Generation ──────────────────────────────────────────────────────
+let nextTitleId = 0;
+// ──── Helper ─────────────────────────────────────────────────────────────
+/**
+ * Finds the closest `DialogRef` by walking up the DOM from the given
+ * element to the nearest `bk-dialog-container` host, then matching its
+ * `id` attribute against the currently open dialogs.
+ *
+ * This fallback is necessary when a directive lives inside an
+ * `<ng-template>` (TemplateRef), where the dialog's custom injector is
+ * not available.
+ *
+ * @see Material's `getClosestDialog` in `dialog-content-directives.ts`
+ */
+function getClosestDialog(element, openDialogs) {
+    let parent = element.nativeElement.parentElement;
+    while (parent && !parent.classList.contains('bk-dialog-container')) {
+        parent = parent.parentElement;
+    }
+    return parent
+        ? openDialogs.find(ref => ref.id === parent.id) ?? null
+        : null;
+}
+// ──── Base for Title / Actions ───────────────────────────────────────────
+/**
+ * Shared abstract base that resolves the owning `DialogRef` (via DI or
+ * DOM walk) and invokes `_onAdd()` / `_onRemove()` lifecycle hooks.
+ *
+ * Same pattern as Material's internal `MatDialogLayoutSection`.
+ */
+class BkDialogLayoutSection {
+    _dialogRef = inject(DialogRef, { optional: true });
+    _elementRef = inject((ElementRef));
+    _dialogService = inject(DialogService);
+    ngOnInit() {
+        if (!this._dialogRef) {
+            this._dialogRef = getClosestDialog(this._elementRef, this._dialogService.openDialogsRef);
+        }
+        if (this._dialogRef) {
+            Promise.resolve().then(() => this._onAdd());
+        }
+    }
+    ngOnDestroy() {
+        if (this._dialogRef) {
+            Promise.resolve().then(() => this._onRemove());
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkDialogLayoutSection, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.16", type: BkDialogLayoutSection, isStandalone: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkDialogLayoutSection, decorators: [{
+            type: Directive,
+            args: [{ standalone: true }]
+        }] });
+// ════════════════════════════════════════════════════════════════════════
+//  BkDialogTitle
+// ════════════════════════════════════════════════════════════════════════
+/**
+ * Marks an element as the dialog title.
+ *
+ * • Generates a unique `id` and binds it to the host element.
+ * • Registers the `id` with the CDK container's `aria-labelledby` queue
+ *   so screen readers announce the dialog title automatically.
+ *
+ * Usage:
+ * ```html
+ * <h2 bk-dialog-title>Edit User</h2>
+ * ```
+ */
+class BkDialogTitle extends BkDialogLayoutSection {
+    /** Unique element `id`. Auto-generated but can be overridden. */
+    id = `bk-dialog-title-${nextTitleId++}`;
+    _onAdd() {
+        // Register with the CdkDialogContainer's aria-labelledby queue.
+        // _containerInstance extends CdkDialogContainer which has _addAriaLabelledBy.
+        this._dialogRef?._containerInstance?._addAriaLabelledBy?.(this.id);
+    }
+    _onRemove() {
+        this._dialogRef?._containerInstance?._removeAriaLabelledBy?.(this.id);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkDialogTitle, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.16", type: BkDialogTitle, isStandalone: true, selector: "[bk-dialog-title], [bkDialogTitle]", inputs: { id: "id" }, host: { properties: { "id": "id" }, classAttribute: "bk-dialog-title" }, exportAs: ["bkDialogTitle"], usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkDialogTitle, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[bk-dialog-title], [bkDialogTitle]',
+                    standalone: true,
+                    exportAs: 'bkDialogTitle',
+                    host: {
+                        'class': 'bk-dialog-title',
+                        '[id]': 'id',
+                    },
+                }]
+        }], propDecorators: { id: [{
+                type: Input
+            }] } });
+// ════════════════════════════════════════════════════════════════════════
+//  BkDialogContent
+// ════════════════════════════════════════════════════════════════════════
+/**
+ * Scrollable content area of a dialog.
+ *
+ * • Applies the `bk-dialog-content` CSS class → `flex: 1 1 auto; overflow: auto`.
+ * • Composes CDK's `CdkScrollable` for scroll-position monitoring and
+ *   integration with CDK's scroll dispatcher.
+ *
+ * Usage (attribute):
+ * ```html
+ * <div bk-dialog-content>
+ *   <!-- body content — this area scrolls -->
+ * </div>
+ * ```
+ *
+ * Usage (element):
+ * ```html
+ * <bk-dialog-content>...</bk-dialog-content>
+ * ```
+ */
+class BkDialogContent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkDialogContent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.16", type: BkDialogContent, isStandalone: true, selector: "[bk-dialog-content], bk-dialog-content, [bkDialogContent]", host: { classAttribute: "bk-dialog-content" }, exportAs: ["bkDialogContent"], hostDirectives: [{ directive: i1$2.CdkScrollable }], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkDialogContent, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[bk-dialog-content], bk-dialog-content, [bkDialogContent]',
+                    standalone: true,
+                    exportAs: 'bkDialogContent',
+                    host: {
+                        'class': 'bk-dialog-content',
+                    },
+                    hostDirectives: [CdkScrollable],
+                }]
+        }] });
+// ════════════════════════════════════════════════════════════════════════
+//  BkDialogActions
+// ════════════════════════════════════════════════════════════════════════
+/**
+ * Container for action buttons at the bottom of a dialog.
+ * Stays pinned when the content area scrolls.
+ *
+ * • Applies `bk-dialog-actions` class → `flex: 0 0 auto` (never shrinks).
+ * • Optional `align` input controls horizontal alignment.
+ *
+ * Usage:
+ * ```html
+ * <div bk-dialog-actions>
+ *   <button (click)="cancel()">Cancel</button>
+ *   <button (click)="save()">Save</button>
+ * </div>
+ *
+ * <!-- With alignment -->
+ * <div bk-dialog-actions align="center">...</div>
+ * ```
+ */
+class BkDialogActions extends BkDialogLayoutSection {
+    /** Horizontal alignment of action buttons. */
+    align;
+    _onAdd() {
+        // Future: notify container for action section count (like Material).
+    }
+    _onRemove() {
+        // No-op.
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkDialogActions, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.16", type: BkDialogActions, isStandalone: true, selector: "[bk-dialog-actions], bk-dialog-actions, [bkDialogActions]", inputs: { align: "align" }, host: { properties: { "class.bk-dialog-actions-align-start": "align === \"start\"", "class.bk-dialog-actions-align-center": "align === \"center\"", "class.bk-dialog-actions-align-end": "align === \"end\"" }, classAttribute: "bk-dialog-actions" }, exportAs: ["bkDialogActions"], usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkDialogActions, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[bk-dialog-actions], bk-dialog-actions, [bkDialogActions]',
+                    standalone: true,
+                    exportAs: 'bkDialogActions',
+                    host: {
+                        'class': 'bk-dialog-actions',
+                        '[class.bk-dialog-actions-align-start]': 'align === "start"',
+                        '[class.bk-dialog-actions-align-center]': 'align === "center"',
+                        '[class.bk-dialog-actions-align-end]': 'align === "end"',
+                    },
+                }]
+        }], propDecorators: { align: [{
+                type: Input
+            }] } });
+// ════════════════════════════════════════════════════════════════════════
+//  BkDialogClose
+// ════════════════════════════════════════════════════════════════════════
+/**
+ * Closes the dialog when the host element is clicked.
+ * Optionally returns a result value to the opener.
+ *
+ * • Sets `type="button"` by default to prevent accidental form submissions.
+ * • Supports an optional `aria-label` for screen readers.
+ *
+ * Usage:
+ * ```html
+ * <!-- Close with no result -->
+ * <button bk-dialog-close>Cancel</button>
+ *
+ * <!-- Close with a result value -->
+ * <button [bk-dialog-close]="'confirmed'">OK</button>
+ *
+ * <!-- Alternative camelCase binding -->
+ * <button [bkDialogClose]="myResult">Done</button>
+ * ```
+ */
+class BkDialogClose {
+    _dialogRef = inject(DialogRef, { optional: true });
+    _elementRef = inject((ElementRef));
+    _dialogService = inject(DialogService);
+    /** Screen-reader label for the button. */
+    ariaLabel;
+    /** Prevents accidental form submits. Default: `'button'`. */
+    type = 'button';
+    /** Dialog result — set via `[bk-dialog-close]="value"`. */
+    dialogResult;
+    /** Alternative camelCase binding: `[bkDialogClose]="value"`. */
+    _bkDialogClose;
+    ngOnInit() {
+        if (!this._dialogRef) {
+            this._dialogRef = getClosestDialog(this._elementRef, this._dialogService.openDialogsRef);
+        }
+    }
+    ngOnChanges(changes) {
+        const proxiedChange = changes['_bkDialogClose'] || changes['dialogResult'];
+        if (proxiedChange) {
+            this.dialogResult = proxiedChange.currentValue;
+        }
+    }
+    _onButtonClick(_event) {
+        this._dialogRef?.close(this.dialogResult);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkDialogClose, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.16", type: BkDialogClose, isStandalone: true, selector: "[bk-dialog-close], [bkDialogClose]", inputs: { ariaLabel: ["aria-label", "ariaLabel"], type: "type", dialogResult: ["bk-dialog-close", "dialogResult"], _bkDialogClose: ["bkDialogClose", "_bkDialogClose"] }, host: { listeners: { "click": "_onButtonClick($event)" }, properties: { "attr.aria-label": "ariaLabel || null", "attr.type": "type" } }, exportAs: ["bkDialogClose"], usesOnChanges: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkDialogClose, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[bk-dialog-close], [bkDialogClose]',
+                    standalone: true,
+                    exportAs: 'bkDialogClose',
+                    host: {
+                        '(click)': '_onButtonClick($event)',
+                        '[attr.aria-label]': 'ariaLabel || null',
+                        '[attr.type]': 'type',
+                    },
+                }]
+        }], propDecorators: { ariaLabel: [{
+                type: Input,
+                args: ['aria-label']
+            }], type: [{
+                type: Input
+            }], dialogResult: [{
+                type: Input,
+                args: ['bk-dialog-close']
+            }], _bkDialogClose: [{
+                type: Input,
+                args: ['bkDialogClose']
+            }] } });
+
+/**
+ * BkDialogModule
+ *
+ * Optional NgModule wrapper for projects that prefer module-based usage.
+ *
+ * Architecture Decision:
+ * ─────────────────────
+ * Follows the exact same pattern as Angular Material's `MatDialogModule`
+ * and `@brickclay-org/ui`'s `CalendarModule`:
+ *
+ *  • All components/directives are **standalone**.
+ *  • This module simply imports + re-exports them for convenience.
+ *  • `DialogService` is `providedIn: 'root'`, so it does NOT need to
+ *    be listed in `providers` here — it is tree-shakeable and available
+ *    app-wide automatically.
+ *
+ * Two usage styles:
+ *
+ * ───────── Module-based (NgModule) ─────────
+ * ```ts
+ * import { BkDialogModule } from '@shared/components/dialog';
+ *
+ * @NgModule({ imports: [BkDialogModule] })
+ * export class FuelCostModule {}
+ * ```
+ *
+ * ───────── Standalone ──────────────────────
+ * ```ts
+ * @Component({
+ *   standalone: true,
+ *   imports: [BkDialogContent, BkDialogActions, BkDialogClose],
+ * })
+ * export class MyDialog {}
+ * ```
+ *
+ * @see https://github.com/angular/components/blob/main/src/material/dialog/dialog-module.ts
+ */
+class BkDialogModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkDialogModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.16", ngImport: i0, type: BkDialogModule, imports: [
+            // ── CDK foundations ──────────────────────────────────────────────
+            DialogModule,
+            OverlayModule,
+            PortalModule,
+            // ── Our standalone pieces ───────────────────────────────────────
+            DialogContainerComponent,
+            BkDialogTitle,
+            BkDialogContent,
+            BkDialogActions,
+            BkDialogClose], exports: [
+            // ── Public API for template usage ───────────────────────────────
+            // Consumers import BkDialogModule and get these directives in
+            // their templates automatically — just like MatDialogModule.
+            BkDialogTitle,
+            BkDialogContent,
+            BkDialogActions,
+            BkDialogClose] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkDialogModule, imports: [
+            // ── CDK foundations ──────────────────────────────────────────────
+            DialogModule,
+            OverlayModule,
+            PortalModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkDialogModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        // ── CDK foundations ──────────────────────────────────────────────
+                        DialogModule,
+                        OverlayModule,
+                        PortalModule,
+                        // ── Our standalone pieces ───────────────────────────────────────
+                        DialogContainerComponent,
+                        BkDialogTitle,
+                        BkDialogContent,
+                        BkDialogActions,
+                        BkDialogClose,
+                    ],
+                    exports: [
+                        // ── Public API for template usage ───────────────────────────────
+                        // Consumers import BkDialogModule and get these directives in
+                        // their templates automatically — just like MatDialogModule.
+                        BkDialogTitle,
+                        BkDialogContent,
+                        BkDialogActions,
+                        BkDialogClose,
+                    ],
+                }]
+        }] });
+
 /*
  * Public API Surface of brickclay-lib
  */
@@ -4031,5 +5231,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { BkBadge, BkButton, BkButtonGroup, BkCheckbox, BkChips, BkCustomCalendar, BkGrid, BkIconButton, BkInput, BkPill, BkRadioButton, BkScheduledDatePicker, BkSelect, BkSpinner, BkTabs, BkTextarea, BkTimePicker, BkToggle, BrickclayIcons, BrickclayLib, CalendarManagerService, CalendarModule };
+export { BkBadge, BkButton, BkButtonGroup, BkCheckbox, BkChips, BkCustomCalendar, BkDialogActions, BkDialogClose, BkDialogContent, BkDialogModule, BkDialogTitle, BkGrid, BkIconButton, BkInput, BkPill, BkRadioButton, BkScheduledDatePicker, BkSelect, BkSpinner, BkTabs, BkTextarea, BkTimePicker, BkToggle, BrickclayIcons, BrickclayLib, CalendarManagerService, CalendarModule, DEFAULT_DIALOG_CONFIG, DIALOG_DATA, DIALOG_GLOBAL_CONFIG, DialogRef, DialogService, getDialogBackdropAnimation, getDialogPanelAnimation };
 //# sourceMappingURL=brickclay-org-ui.mjs.map