@cdevhub/ngx-tw 0.3.0 → 0.5.0

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

@@ -1,11 +1,7 @@
 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, createGlobalPositionStrategy } 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 { InjectionToken, signal, inject, Injector, Injectable, makeEnvironmentProviders, Directive, input, computed } from '@angular/core';
+import { ReplaySubject, Subject, filter, take, merge, defer, startWith } from 'rxjs';
+import { DialogConfig } from '@angular/cdk/dialog';
 import { ESCAPE, hasModifierKey } from '@angular/cdk/keycodes';
 import { _IdGenerator } from '@angular/cdk/a11y';
 import * as i1 from '@angular/cdk/scrolling';
@@ -73,180 +69,22 @@ const SHEET_DATA = new InjectionToken('SHEET_DATA');
 /** Injection token for application-wide default sheet options. Set via `provideSheet()`. */
 const SHEET_DEFAULT_OPTIONS = new InjectionToken('SHEET_DEFAULT_OPTIONS');
 
-// Sheet uses a `data-[state]` + `data-[side]` driven CSS transition rather than
-// the project's `animate.enter`/`animate.leave` keyframes. Same rationale as
-// the dialog container (see `dialog-container.ts`):
-//   1. The ref owns the open/close lifecycle (state signal, observables) and
-//      needs runtime-configurable enter/exit durations per `Sheet.open()` call
-//      — `animate.enter` only accepts a static class name.
-//   2. The transform direction depends on `side`, and encoding four pairs of
-//      keyframe classes (slide-in/out × 4 sides) is noisier than four
-//      `data-[side=…]` selectors on a single transition rule.
-// All other library overlays (popover, menu, tooltip) use animate.enter/leave;
-// this divergence is intentional and isolated to the sheet container.
-const sheetContainerVariants = tv({
-    slots: {
-        host: 'fixed flex flex-col outline-none bg-surface-raised text-fg shadow-md overflow-hidden transition-[transform,opacity] ease-out motion-reduce:transition-none opacity-0 data-[state=open]:opacity-100',
-    },
-    variants: {
-        side: {
-            right: {
-                host: 'h-screen right-0 top-0 border-l border-border data-[state=opening]:translate-x-full data-[state=closing]:translate-x-full data-[state=open]:translate-x-0',
-            },
-            left: {
-                host: 'h-screen left-0 top-0 border-r border-border data-[state=opening]:-translate-x-full data-[state=closing]:-translate-x-full data-[state=open]:translate-x-0',
-            },
-            top: {
-                host: 'w-screen left-0 top-0 border-b border-border data-[state=opening]:-translate-y-full data-[state=closing]:-translate-y-full data-[state=open]:translate-y-0',
-            },
-            bottom: {
-                host: 'w-screen left-0 bottom-0 border-t border-border data-[state=opening]:translate-y-full data-[state=closing]:translate-y-full data-[state=open]:translate-y-0',
-            },
-        },
-        size: {
-            xs: { host: '' },
-            sm: { host: '' },
-            md: { host: '' },
-            lg: { host: '' },
-            xl: { host: '' },
-            full: { host: '' },
-        },
-    },
-    // Sheets are axis-aware: `size` controls width on horizontal sides and
-    // height on vertical sides. Encoded as compound variants so a single
-    // {side, size} pair resolves to one set of utility classes.
-    compoundVariants: [
-        // ── Right-anchored ─────────────────────────────────────────────
-        { side: 'right', size: 'xs', class: { host: 'w-full max-w-xs' } },
-        { side: 'right', size: 'sm', class: { host: 'w-full max-w-sm' } },
-        { side: 'right', size: 'md', class: { host: 'w-full max-w-md' } },
-        { side: 'right', size: 'lg', class: { host: 'w-full max-w-xl' } },
-        { side: 'right', size: 'xl', class: { host: 'w-full max-w-2xl' } },
-        { side: 'right', size: 'full', class: { host: 'w-screen max-w-none' } },
-        // ── Left-anchored ──────────────────────────────────────────────
-        { side: 'left', size: 'xs', class: { host: 'w-full max-w-xs' } },
-        { side: 'left', size: 'sm', class: { host: 'w-full max-w-sm' } },
-        { side: 'left', size: 'md', class: { host: 'w-full max-w-md' } },
-        { side: 'left', size: 'lg', class: { host: 'w-full max-w-xl' } },
-        { side: 'left', size: 'xl', class: { host: 'w-full max-w-2xl' } },
-        { side: 'left', size: 'full', class: { host: 'w-screen max-w-none' } },
-        // ── Top-anchored ───────────────────────────────────────────────
-        { side: 'top', size: 'xs', class: { host: 'h-[20vh]' } },
-        { side: 'top', size: 'sm', class: { host: 'h-[33vh]' } },
-        { side: 'top', size: 'md', class: { host: 'h-[50vh]' } },
-        { side: 'top', size: 'lg', class: { host: 'h-[66vh]' } },
-        { side: 'top', size: 'xl', class: { host: 'h-[80vh]' } },
-        { side: 'top', size: 'full', class: { host: 'h-screen' } },
-        // ── Bottom-anchored ────────────────────────────────────────────
-        { side: 'bottom', size: 'xs', class: { host: 'h-[20vh]' } },
-        { side: 'bottom', size: 'sm', class: { host: 'h-[33vh]' } },
-        { side: 'bottom', size: 'md', class: { host: 'h-[50vh]' } },
-        { side: 'bottom', size: 'lg', class: { host: 'h-[66vh]' } },
-        { side: 'bottom', size: 'xl', class: { host: 'h-[80vh]' } },
-        { side: 'bottom', size: 'full', class: { host: 'h-screen' } },
-    ],
-    defaultVariants: { side: 'right', size: 'md' },
-}, { twMerge: true });
-/**
- * Sheet container rendered inside the CDK overlay. Wraps the user-provided
- * content in a Tailwind-styled, edge-anchored surface and coordinates slide
- * enter/exit transitions with {@link SheetRef}.
- *
- * The animation state machine, `aria-describedby` queue, and panel-class
- * merge are shared with `DialogContainer` via {@link OverlayContainerCoordinator}
- * (component-scoped — see `providers: [OverlayContainerCoordinator]`).
- *
- * @docs-private
- */
-class SheetContainer extends CdkDialogContainer {
-    coordinator = inject(OverlayContainerCoordinator);
-    /** Lifecycle state of the sheet'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;
-    sideAttr = computed(() => this._config.side ?? 'right', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "sideAttr" }] : /* istanbul ignore next */ []));
-    variants = computed(() => {
-        const side = this._config.side ?? 'right';
-        const size = this._config.size ?? 'md';
-        return sheetContainerVariants({ side, size });
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "variants" }] : /* istanbul ignore next */ []));
-    hostClasses = computed(() => mergeOverlayPanelClass(this.variants().host(), this._config.panelClass), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
-    ariaDescribedByAttr = computed(() => this._config.ariaDescribedBy ||
-        this.coordinator.describedByIds()[0] ||
-        null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "ariaDescribedByAttr" }] : /* istanbul ignore next */ []));
-    transitionDuration = this.coordinator.transitionDuration;
-    constructor() {
-        super();
-        this.enterAnimationDuration = coerceOverlayDuration(this._config.enterAnimationDuration, 200);
-        this.exitAnimationDuration = coerceOverlayDuration(this._config.exitAnimationDuration, 160);
-        this.coordinator.setDurations(this.enterAnimationDuration, this.exitAnimationDuration);
-    }
-    _contentAttached() {
-        super._contentAttached();
-        this.coordinator.startEnterAnimation();
-    }
-    /** Triggered by the sheet 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: "22.0.7", ngImport: i0, type: SheetContainer, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.7", type: SheetContainer, isStandalone: true, selector: "tw-sheet-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()", "attr.data-side": "sideAttr()", "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: "22.0.7", ngImport: i0, type: SheetContainer, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'tw-sheet-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()',
-                        '[attr.data-side]': 'sideAttr()',
-                        '[class]': 'hostClasses()',
-                        '[style.transition-duration.ms]': 'transitionDuration()',
-                    },
-                }]
-        }], ctorParameters: () => [] });
-
 /**
  * Reference to a sheet opened via {@link Sheet.open}. Drives the sheet
  * lifecycle (close, state, observables) and forwards useful overlay streams.
+ *
+ * The ref is returned **synchronously** from `open()`, but the sheet's render
+ * layer (`@angular/cdk/dialog` + the Tailwind container) is loaded through a
+ * dynamic `import()`. The ref therefore starts *detached*: `id`, `state`,
+ * `close()`, the lifecycle observables, and panel mutations all work
+ * immediately (mutations are buffered and replayed on attach), but the rendered
+ * component instance does not exist yet — read it via {@link whenComponentReady}
+ * instead of a synchronous `componentInstance` field.
  */
 class SheetRef {
-    cdkRef;
     config;
-    containerInstance;
-    /** Unique ID of the sheet. */
+    /** Unique ID of the sheet. Generated eagerly by the service, so it is valid the instant `open()` returns. */
     id;
-    /** Instance of the component rendered inside the sheet, or `null` for template sheets. */
-    componentInstance = null;
-    /** `ComponentRef` of the content component, or `null` for template sheets. */
-    componentRef = null;
     /** Current lifecycle state. Reactively readable. */
     state;
     /** When `true`, close-via-escape AND close-via-backdrop are both disabled. */
@@ -260,19 +98,56 @@ class SheetRef {
     afterOpenedSubject = new ReplaySubject(1);
     beforeClosedSubject = new ReplaySubject(1);
     afterClosedSubject = new ReplaySubject(1);
+    // Facade-owned pass-throughs for the raw overlay streams, so a consumer that
+    // subscribes before the render chunk attaches still receives events once it
+    // does — the pre-deferral behaviour when `open()` wrapped a live `cdkRef`.
+    backdropClickSubject = new Subject();
+    keydownEventsSubject = new Subject();
+    cdkRef = null;
+    container = null;
+    componentInstanceValue = null;
+    componentRefValue = null;
+    resolveComponentReady;
+    componentReadyPromise = new Promise((resolve) => {
+        this.resolveComponentReady = resolve;
+    });
+    // Buffered mutations issued before the render chunk attached the CDK backend.
+    pendingPanelAdds = [];
+    pendingPanelRemoves = [];
     pendingResult;
     closeFocusOrigin;
-    constructor(cdkRef, config, containerInstance) {
-        this.cdkRef = cdkRef;
+    constructor(id, config) {
         this.config = config;
-        this.containerInstance = containerInstance;
-        this.id = cdkRef.id;
+        this.id = id;
         this.disableClose = config.disableClose;
         this.closeOnEscape = config.closeOnEscape;
         this.closeOnBackdropClick = config.closeOnBackdropClick;
         this.state = this.stateSignal.asReadonly();
+    }
+    /** The Tailwind container instance, or `null` until the sheet has attached. */
+    get containerInstance() {
+        return this.container;
+    }
+    /**
+     * @internal Wire this facade to its CDK backend. Called from the sheet
+     * renderer **inside** `cdkDialog.open()`'s `providers` callback — the same
+     * point the constructor ran before deferral — so subscriptions to
+     * `animationStateChanged` are in place before the container emits `'open'`.
+     */
+    _attach(cdkRef, container) {
+        this.cdkRef = cdkRef;
+        this.container = container;
+        // Forward the raw overlay streams into the facade pass-throughs.
+        cdkRef.backdropClick.subscribe(this.backdropClickSubject);
+        cdkRef.keydownEvents.subscribe(this.keydownEventsSubject);
         cdkRef.addPanelClass('tw-sheet-panel');
-        const animationChanges = containerInstance.animationStateChanged;
+        for (const cls of this.pendingPanelAdds)
+            cdkRef.addPanelClass(cls);
+        for (const cls of this.pendingPanelRemoves)
+            cdkRef.removePanelClass(cls);
+        this.pendingPanelAdds.length = 0;
+        this.pendingPanelRemoves.length = 0;
+        const animationChanges = container.animationStateChanged;
         animationChanges
             .pipe(filter((event) => event.state === 'open'), take(1))
             .subscribe(() => {
@@ -301,6 +176,38 @@ class SheetRef {
             this.closeWithOrigin(event.type === 'keydown' ? 'keyboard' : 'mouse');
         });
     }
+    /** @internal Record the rendered component after `cdkDialog.open()` returns. */
+    _setComponent(instance, ref) {
+        this.componentInstanceValue = instance;
+        this.componentRefValue = ref;
+        this.resolveComponentReady(instance);
+    }
+    /**
+     * Resolves with the rendered content-component instance once the sheet's
+     * render chunk has loaded and attached. Resolves `null` for template sheets,
+     * and for a sheet closed before it ever opened.
+     *
+     * Replaces the former synchronous `componentInstance` field, which cannot be
+     * populated before the deferred render chunk lands.
+     *
+     * @example
+     * ```ts
+     * const ref = sheet.open(FilterSheet);
+     * const filters = await ref.whenComponentReady();
+     * filters?.reset();
+     * ```
+     */
+    whenComponentReady() {
+        return this.componentReadyPromise;
+    }
+    /** The rendered component instance, or `null` if not yet attached / a template sheet. Prefer {@link whenComponentReady}. */
+    get componentInstance() {
+        return this.componentInstanceValue;
+    }
+    /** The rendered `ComponentRef`, or `null` if not yet attached / a template sheet. */
+    get componentRef() {
+        return this.componentRefValue;
+    }
     /**
      * Closes the sheet. The exit slide animation runs before the overlay is disposed.
      * @param result Value forwarded to `afterClosed()` subscribers.
@@ -320,22 +227,32 @@ class SheetRef {
     afterClosed() {
         return this.afterClosedSubject.asObservable();
     }
-    /** Backdrop click stream (emits even when `closeOnBackdropClick` / `disableClose` is set). */
+    /** Backdrop click stream (emits even when `closeOnBackdropClick` / `disableClose` is set). Buffered — a subscription made before the sheet attaches receives events once it does. */
     backdropClick() {
-        return this.cdkRef.backdropClick;
+        return this.backdropClickSubject.asObservable();
     }
-    /** Keydown event stream for the overlay. */
+    /** Keydown event stream for the overlay. Buffered — a subscription made before the sheet attaches receives events once it does. */
     keydownEvents() {
-        return this.cdkRef.keydownEvents;
+        return this.keydownEventsSubject.asObservable();
     }
-    /** Adds CSS classes to the overlay panel. */
+    /** Adds CSS classes to the overlay panel. Buffered until attach. */
     addPanelClass(classes) {
-        this.cdkRef.addPanelClass(classes);
+        if (this.cdkRef) {
+            this.cdkRef.addPanelClass(classes);
+        }
+        else {
+            this.pendingPanelAdds.push(...(Array.isArray(classes) ? classes : [classes]));
+        }
         return this;
     }
-    /** Removes CSS classes from the overlay panel. */
+    /** Removes CSS classes from the overlay panel. Buffered until attach. */
     removePanelClass(classes) {
-        this.cdkRef.removePanelClass(classes);
+        if (this.cdkRef) {
+            this.cdkRef.removePanelClass(classes);
+        }
+        else {
+            this.pendingPanelRemoves.push(...(Array.isArray(classes) ? classes : [classes]));
+        }
         return this;
     }
     closeWithOrigin(origin, result) {
@@ -343,7 +260,7 @@ class SheetRef {
             return;
         const predicate = this.config.closePredicate;
         if (predicate &&
-            !predicate(result, this.config, this.componentInstance)) {
+            !predicate(result, this.config, this.componentInstanceValue)) {
             return;
         }
         this.pendingResult = result;
@@ -351,8 +268,15 @@ class SheetRef {
         this.stateSignal.set('closing');
         this.beforeClosedSubject.next(result);
         this.beforeClosedSubject.complete();
+        if (!this.cdkRef) {
+            // Closed before the render chunk attached: the overlay was never created,
+            // so there is nothing to animate or dispose. Synthesize the closed state
+            // and let the service skip opening entirely (it checks state()).
+            this.finishClose();
+            return;
+        }
         this.cdkRef.overlayRef.detachBackdrop();
-        this.containerInstance._startExitAnimation();
+        this.container._startExitAnimation();
     }
     finishClose() {
         if (this.stateSignal() === 'closed')
@@ -360,26 +284,42 @@ class SheetRef {
         this.stateSignal.set('closed');
         this.afterClosedSubject.next(this.pendingResult);
         this.afterClosedSubject.complete();
-        if (this.cdkRef.containerInstance) {
+        // Idempotent — a no-op if _setComponent already resolved with an instance.
+        this.resolveComponentReady(null);
+        this.backdropClickSubject.complete();
+        this.keydownEventsSubject.complete();
+        if (this.cdkRef?.containerInstance) {
             this.cdkRef.close(this.pendingResult, { focusOrigin: this.closeFocusOrigin });
         }
-        this.componentInstance = null;
+        this.componentInstanceValue = null;
     }
 }
 
+let nextSheetId = 0;
+function generateSheetId() {
+    return `tw-sheet-${++nextSheetId}`;
+}
 /**
  * Opens edge-anchored sheet (drawer) overlays. Composes `@angular/cdk/dialog`
  * for focus trapping, portals, and overlay plumbing — adds a `GlobalPositionStrategy`
  * pinned to the requested viewport edge, a Tailwind container with axis-aware
  * sizing, slide enter/exit animations, and split close-behavior flags.
  *
+ * The rendering layer (`@angular/cdk/dialog` + the Tailwind container) is loaded
+ * through a dynamic `import()` on the first `open()` call, so merely registering
+ * this service costs nothing in the initial bundle. `open()` still returns its
+ * {@link SheetRef} synchronously — the sheet is rendered once the chunk lands.
+ * Read the rendered component via {@link SheetRef.whenComponentReady}.
+ *
  * Not `providedIn: 'root'` — register it via {@link provideSheet}.
  */
 class Sheet {
-    cdkDialog = inject(Dialog);
     injector = inject(Injector);
     defaultOptions = inject(SHEET_DEFAULT_OPTIONS, { optional: true }) ?? {};
     parentSheet = inject(Sheet, { optional: true, skipSelf: true });
+    /** Cached renderer chunk import — kicked off on the first `open()`. */
+    rendererPromise = null;
+    destroyed = false;
     openSheetsAtThisLevel = signal([], /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "openSheetsAtThisLevel" }] : /* istanbul ignore next */ []));
     afterOpenedSubject = new Subject();
@@ -403,61 +343,25 @@ class Sheet {
      * Opens a sheet 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 sheet.
+     * @returns Reference controlling the opened sheet, returned synchronously.
      */
     open(content, config) {
         const merged = this.resolveConfig(config);
-        let sheetRef;
-        const cdkRef = this.cdkDialog.open(content, {
-            id: merged.id,
-            role: merged.role,
-            data: merged.data,
-            panelClass: merged.panelClass,
-            backdropClass: merged.backdropClass || 'tw-sheet-backdrop',
-            hasBackdrop: merged.hasBackdrop,
-            // Sheet sizing happens on the container element (axis-aware width/height
-            // utilities). The overlay pane itself is the full-edge bounding box.
-            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),
-            positionStrategy: merged.positionStrategy ?? this.resolvePositionStrategy(merged.side ?? 'right'),
-            closeOnNavigation: merged.closeOnNavigation,
-            viewContainerRef: merged.viewContainerRef,
-            injector: merged.injector,
-            // We handle close/Escape/backdrop ourselves so we can run the exit slide animation.
-            disableClose: true,
-            closeOnOverlayDetachments: false,
-            container: {
-                type: SheetContainer,
-                providers: () => [
-                    { provide: SheetConfig, useValue: merged },
-                    { provide: DialogConfig, useValue: merged },
-                ],
-            },
-            providers: (_cdkRef, _cdkConfig, container) => {
-                sheetRef = new SheetRef(_cdkRef, merged, container);
-                const providers = [
-                    { provide: SheetRef, useValue: sheetRef },
-                    { provide: SHEET_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.
-        sheetRef.componentRef = cdkRef.componentRef;
-        sheetRef.componentInstance = cdkRef.componentInstance;
+        const id = merged.id ?? generateSheetId();
+        merged.id = id;
+        // Enforce id uniqueness eagerly. CDK throws this synchronously from
+        // `open()`; since our CDK open is now deferred, replicate the check here so
+        // the error still surfaces at the call site rather than in a later tick.
+        if (this.getSheetById(id)) {
+            throw new Error(`Sheet with id "${id}" exists already. The sheet id must be unique.`);
+        }
+        const sheetRef = new SheetRef(id, merged);
         const scope = this.parentSheet ?? this;
         scope.registerOpen(sheetRef);
         sheetRef.afterClosed().subscribe(() => {
             scope.unregister(sheetRef);
         });
+        void this.renderWhenReady(content, merged, sheetRef);
         return sheetRef;
     }
     /** Closes every open sheet managed by this service (and child services). */
@@ -471,12 +375,42 @@ class Sheet {
         return this.openSheets().find((sheet) => sheet.id === id);
     }
     ngOnDestroy() {
+        this.destroyed = true;
         const sheets = [...this.openSheetsAtThisLevel()];
         for (let i = sheets.length - 1; i >= 0; i--)
             sheets[i].close();
         this.afterOpenedSubject.complete();
         this.afterAllClosedSubject.complete();
     }
+    /**
+     * @internal Resolves once the renderer chunk has loaded. Exposed for tests,
+     * which must await the dynamic import before asserting on rendered DOM.
+     */
+    async _whenRendered() {
+        await this.loadRenderer();
+        await Promise.resolve();
+    }
+    /**
+     * Render a sheet once the renderer chunk has loaded. The ref was already
+     * returned to the caller, so it may have been closed (or the service
+     * destroyed) while the import was in flight — both skip the actual open.
+     */
+    async renderWhenReady(content, merged, sheetRef) {
+        const openRendered = await this.loadRenderer();
+        if (!openRendered || this.destroyed)
+            return;
+        // Closed before the chunk landed — the facade already synthesized its
+        // closed state; never create the overlay.
+        if (sheetRef.state() === 'closed')
+            return;
+        openRendered(this.injector, content, merged, sheetRef);
+    }
+    loadRenderer() {
+        if (!this.rendererPromise) {
+            this.rendererPromise = import('./cdevhub-ngx-tw-sheet-sheet-renderer-ByyNluUd.mjs').then(({ openRenderedSheet }) => this.destroyed ? null : openRenderedSheet);
+        }
+        return this.rendererPromise;
+    }
     registerOpen(ref) {
         if (this.parentSheet) {
             this.parentSheet.registerOpen(ref);
@@ -507,33 +441,6 @@ class Sheet {
         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);
-        }
-    }
-    resolvePositionStrategy(side) {
-        const strategy = createGlobalPositionStrategy(this.injector);
-        switch (side) {
-            case 'left':
-                return strategy.top('0').left('0').bottom('0');
-            case 'top':
-                return strategy.top('0').left('0').right('0');
-            case 'bottom':
-                return strategy.bottom('0').left('0').right('0');
-            case 'right':
-            default:
-                return strategy.top('0').right('0').bottom('0');
-        }
-    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: Sheet, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: Sheet });
 }
@@ -620,21 +527,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
 class SheetTitleDirective {
     generatedId = inject(_IdGenerator).getId('tw-sheet-title-');
     sheetRef = inject(SheetRef, { optional: true });
-    // Ancestor-DI fallback for the rare case where `SheetRef` 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-sheet-container>`'s DOM tree.
-    container = inject(SheetContainer, { optional: true, skipSelf: true });
     /** Custom id for the title element. Defaults to a generated unique id. */
     id = input(this.generatedId, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
     ngOnInit() {
-        const containerInstance = this.sheetRef?.containerInstance ?? this.container;
+        const containerInstance = this.sheetRef?.containerInstance;
         if (containerInstance)
             containerInstance._addAriaLabelledBy(this.id());
     }
     ngOnDestroy() {
-        const containerInstance = this.sheetRef?.containerInstance ?? this.container;
+        const containerInstance = this.sheetRef?.containerInstance;
         if (containerInstance)
             containerInstance._removeAriaLabelledBy(this.id());
     }
@@ -673,18 +578,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
 class SheetDescriptionDirective {
     generatedId = inject(_IdGenerator).getId('tw-sheet-description-');
     sheetRef = inject(SheetRef, { optional: true });
-    // Ancestor-DI fallback — see SheetTitleDirective.
-    container = inject(SheetContainer, { optional: true, skipSelf: true });
     /** Custom id for the description element. Defaults to a generated unique id. */
     id = input(this.generatedId, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
     ngOnInit() {
-        const containerInstance = this.sheetRef?.containerInstance ?? this.container;
+        const containerInstance = this.sheetRef?.containerInstance;
         if (containerInstance)
             containerInstance._addAriaDescribedBy(this.id());
     }
     ngOnDestroy() {
-        const containerInstance = this.sheetRef?.containerInstance ?? this.container;
+        const containerInstance = this.sheetRef?.containerInstance;
         if (containerInstance)
             containerInstance._removeAriaDescribedBy(this.id());
     }
@@ -778,5 +681,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { SHEET_DATA, SHEET_DEFAULT_OPTIONS, Sheet, SheetActionsDirective, SheetCloseDirective, SheetConfig, SheetContainer, SheetContentDirective, SheetDescriptionDirective, SheetHeaderDirective, SheetIconDirective, SheetRef, SheetSubtitleDirective, SheetTitleDirective, provideSheet };
+export { SHEET_DATA, SHEET_DEFAULT_OPTIONS, Sheet, SheetActionsDirective, SheetCloseDirective, SheetConfig, SheetContentDirective, SheetDescriptionDirective, SheetHeaderDirective, SheetIconDirective, SheetRef, SheetSubtitleDirective, SheetTitleDirective, provideSheet };
 //# sourceMappingURL=cdevhub-ngx-tw-sheet.mjs.map