@cdevhub/ngx-tw 0.2.0

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

@@ -0,0 +1,768 @@
+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 { ESCAPE, hasModifierKey } from '@angular/cdk/keycodes';
+import { _IdGenerator } from '@angular/cdk/a11y';
+import * as i1 from '@angular/cdk/scrolling';
+import { CdkScrollable } from '@angular/cdk/scrolling';
+
+/**
+ * Configuration for opening a sheet with {@link Sheet.open}.
+ *
+ * Extends `@angular/cdk/dialog`'s `DialogConfig` with sheet-specific options
+ * (`side`, `size`, animation durations, split close flags).
+ */
+class SheetConfig extends DialogConfig {
+    /** Edge the sheet anchors against. Defaults to `'right'`. */
+    side = 'right';
+    /** Preset size for the sheet panel. Axis-dependent (width for left/right, height for top/bottom). Defaults to `'md'`. */
+    size = 'md';
+    /** Duration of the open slide animation in ms. Defaults to `200`. Use `0` to disable. */
+    enterAnimationDuration = 200;
+    /**
+     * Duration of the close slide animation in ms. Defaults to `160`. Use `0` to disable.
+     * Asymmetric with `enterAnimationDuration` by design — the close transition is slightly
+     * faster so the sheet feels dismissive rather than reluctant.
+     */
+    exitAnimationDuration = 160;
+    /** Scroll strategy preset applied when `scrollStrategy` isn't set. Defaults to `'block'`. */
+    scrollBehavior = 'block';
+    /**
+     * Whether the sheet is modal — sets `aria-modal` on the container. Defaults to `true`:
+     * a sheet opened over the page is modal by default and the rest of the document is
+     * inert while it is open. Set to `false` only for non-modal surfaces.
+     */
+    ariaModal = true;
+    /** Whether the sheet renders a backdrop. Defaults to `true`. */
+    hasBackdrop = true;
+    /**
+     * Whether pressing `Escape` closes the sheet.
+     *
+     * Defaults to `true` — Escape is the universal dismiss key for modal surfaces; the
+     * "swallow Escape" variant is the special case. `disableClose` overrides this when
+     * `true`.
+     */
+    closeOnEscape = true;
+    /**
+     * Whether clicking the backdrop closes the sheet.
+     *
+     * Defaults to `true` — clicking outside a modal sheet is the expected dismiss
+     * gesture; enforcing an explicit dismiss button is the special case. `disableClose`
+     * overrides this when `true`.
+     */
+    closeOnBackdropClick = true;
+    /**
+     * Whether Escape AND backdrop clicks are blocked. Defaults to `false`.
+     * When `true`, this overrides both `closeOnEscape` and `closeOnBackdropClick`.
+     */
+    disableClose = false;
+    /** Whether navigation (e.g. router) closes the sheet. Defaults to `true`. */
+    closeOnNavigation = true;
+    /** Where to move focus when the sheet opens. Defaults to `'first-tabbable'`. */
+    autoFocus = 'first-tabbable';
+    /** Whether to restore focus to the previously focused element after close. Defaults to `true`. */
+    restoreFocus = true;
+}
+/** Injection token carrying the `data` value passed via {@link SheetConfig.data}. */
+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', ...(ngDevMode ? [{ debugName: "sideAttr" }] : /* istanbul ignore next */ []));
+    variants = computed(() => {
+        const side = this._config.side ?? 'right';
+        const size = this._config.size ?? 'md';
+        return sheetContainerVariants({ side, size });
+    }, ...(ngDevMode ? [{ debugName: "variants" }] : /* istanbul ignore next */ []));
+    hostClasses = computed(() => mergeOverlayPanelClass(this.variants().host(), this._config.panelClass), ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
+    ariaDescribedByAttr = computed(() => this._config.ariaDescribedBy ||
+        this.coordinator.describedByIds()[0] ||
+        null, ...(ngDevMode ? [{ debugName: "ariaDescribedByAttr" }] : /* istanbul ignore next */ []));
+    transitionDuration = this.coordinator.transitionDuration;
+    constructor() {
+        super();
+        this.enterAnimationDuration = coerceOverlayDuration(this._config.enterAnimationDuration, 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: "21.2.14", ngImport: i0, type: SheetContainer, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.14", 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: "21.2.14", 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.
+ */
+class SheetRef {
+    cdkRef;
+    config;
+    containerInstance;
+    /** Unique ID of the sheet. */
+    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. */
+    disableClose;
+    /** When `false`, pressing Escape does not close the sheet. */
+    closeOnEscape;
+    /** When `false`, clicking the backdrop does not close the sheet. */
+    closeOnBackdropClick;
+    stateSignal = signal('opening', ...(ngDevMode ? [{ debugName: "stateSignal" }] : /* istanbul ignore next */ []));
+    afterOpenedSubject = new ReplaySubject(1);
+    beforeClosedSubject = new ReplaySubject(1);
+    afterClosedSubject = new ReplaySubject(1);
+    pendingResult;
+    closeFocusOrigin;
+    constructor(cdkRef, config, containerInstance) {
+        this.cdkRef = cdkRef;
+        this.config = config;
+        this.containerInstance = containerInstance;
+        this.id = cdkRef.id;
+        this.disableClose = config.disableClose;
+        this.closeOnEscape = config.closeOnEscape;
+        this.closeOnBackdropClick = config.closeOnBackdropClick;
+        this.state = this.stateSignal.asReadonly();
+        cdkRef.addPanelClass('tw-sheet-panel');
+        const animationChanges = containerInstance.animationStateChanged;
+        animationChanges
+            .pipe(filter((event) => event.state === 'open'), take(1))
+            .subscribe(() => {
+            this.stateSignal.set('open');
+            this.afterOpenedSubject.next();
+            this.afterOpenedSubject.complete();
+        });
+        // The container owns the exit-animation fallback timer
+        // (ANIMATION_FALLBACK_PADDING in sheet-container.ts), so we trust its
+        // `closed` emission and run finishClose exactly once from here.
+        animationChanges
+            .pipe(filter((event) => event.state === 'closed'), take(1))
+            .subscribe(() => this.finishClose());
+        cdkRef.overlayRef.detachments().subscribe(() => {
+            if (this.stateSignal() !== 'closed') {
+                this.beforeClosedSubject.next(this.pendingResult);
+                this.beforeClosedSubject.complete();
+                this.finishClose();
+            }
+        });
+        merge(cdkRef.backdropClick.pipe(filter(() => !this.disableClose && this.closeOnBackdropClick !== false)), cdkRef.keydownEvents.pipe(filter((event) => event.keyCode === ESCAPE &&
+            !this.disableClose &&
+            this.closeOnEscape !== false &&
+            !hasModifierKey(event)))).subscribe((event) => {
+            event.preventDefault();
+            this.closeWithOrigin(event.type === 'keydown' ? 'keyboard' : 'mouse');
+        });
+    }
+    /**
+     * Closes the sheet. The exit slide animation runs before the overlay is disposed.
+     * @param result Value forwarded to `afterClosed()` subscribers.
+     */
+    close(result) {
+        this.closeWithOrigin('program', result);
+    }
+    /** Observable that emits once after the enter animation finishes. */
+    afterOpened() {
+        return this.afterOpenedSubject.asObservable();
+    }
+    /** Observable that emits once when the close animation starts. */
+    beforeClosed() {
+        return this.beforeClosedSubject.asObservable();
+    }
+    /** Observable that emits once after the sheet has fully closed and the overlay is disposed. */
+    afterClosed() {
+        return this.afterClosedSubject.asObservable();
+    }
+    /** Backdrop click stream (emits even when `closeOnBackdropClick` / `disableClose` is set). */
+    backdropClick() {
+        return this.cdkRef.backdropClick;
+    }
+    /** Keydown event stream for the overlay. */
+    keydownEvents() {
+        return this.cdkRef.keydownEvents;
+    }
+    /** Adds CSS classes to the overlay panel. */
+    addPanelClass(classes) {
+        this.cdkRef.addPanelClass(classes);
+        return this;
+    }
+    /** Removes CSS classes from the overlay panel. */
+    removePanelClass(classes) {
+        this.cdkRef.removePanelClass(classes);
+        return this;
+    }
+    closeWithOrigin(origin, result) {
+        if (this.stateSignal() === 'closing' || this.stateSignal() === 'closed')
+            return;
+        const predicate = this.config.closePredicate;
+        if (predicate &&
+            !predicate(result, this.config, this.componentInstance)) {
+            return;
+        }
+        this.pendingResult = result;
+        this.closeFocusOrigin = origin;
+        this.stateSignal.set('closing');
+        this.beforeClosedSubject.next(result);
+        this.beforeClosedSubject.complete();
+        this.cdkRef.overlayRef.detachBackdrop();
+        this.containerInstance._startExitAnimation();
+    }
+    finishClose() {
+        if (this.stateSignal() === 'closed')
+            return;
+        this.stateSignal.set('closed');
+        this.afterClosedSubject.next(this.pendingResult);
+        this.afterClosedSubject.complete();
+        if (this.cdkRef.containerInstance) {
+            this.cdkRef.close(this.pendingResult, { focusOrigin: this.closeFocusOrigin });
+        }
+        this.componentInstance = null;
+    }
+}
+
+/**
+ * Opens 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.
+ *
+ * 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 });
+    openSheetsAtThisLevel = signal([], ...(ngDevMode ? [{ debugName: "openSheetsAtThisLevel" }] : /* istanbul ignore next */ []));
+    afterOpenedSubject = new Subject();
+    afterAllClosedSubject = new Subject();
+    /** Reactively-readable list of currently-open sheets across the full sheet tree. */
+    openSheets = this.parentSheet
+        ? this.parentSheet.openSheets
+        : this.openSheetsAtThisLevel.asReadonly();
+    /** Emits every time a sheet is opened. */
+    afterOpened = this.parentSheet
+        ? this.parentSheet.afterOpened
+        : this.afterOpenedSubject.asObservable();
+    /**
+     * Emits when every open sheet has closed. Emits immediately on subscribe if
+     * there are none open.
+     */
+    afterAllClosed = defer(() => this.openSheets().length
+        ? this.getAfterAllClosedSource()
+        : this.getAfterAllClosedSource().pipe(startWith(undefined)));
+    /**
+     * 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.
+     */
+    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 scope = this.parentSheet ?? this;
+        scope.registerOpen(sheetRef);
+        sheetRef.afterClosed().subscribe(() => {
+            scope.unregister(sheetRef);
+        });
+        return sheetRef;
+    }
+    /** Closes every open sheet managed by this service (and child services). */
+    closeAll() {
+        const sheets = [...this.openSheets()];
+        for (let i = sheets.length - 1; i >= 0; i--)
+            sheets[i].close();
+    }
+    /** Looks up an open sheet by its id. */
+    getSheetById(id) {
+        return this.openSheets().find((sheet) => sheet.id === id);
+    }
+    ngOnDestroy() {
+        const sheets = [...this.openSheetsAtThisLevel()];
+        for (let i = sheets.length - 1; i >= 0; i--)
+            sheets[i].close();
+        this.afterOpenedSubject.complete();
+        this.afterAllClosedSubject.complete();
+    }
+    registerOpen(ref) {
+        if (this.parentSheet) {
+            this.parentSheet.registerOpen(ref);
+        }
+        else {
+            this.openSheetsAtThisLevel.update((list) => [...list, ref]);
+            this.afterOpenedSubject.next(ref);
+        }
+    }
+    unregister(ref) {
+        if (this.parentSheet) {
+            this.parentSheet.unregister(ref);
+        }
+        else {
+            this.openSheetsAtThisLevel.update((list) => list.filter((d) => d !== ref));
+            if (this.openSheetsAtThisLevel().length === 0) {
+                this.afterAllClosedSubject.next();
+            }
+        }
+    }
+    getAfterAllClosedSource() {
+        return this.parentSheet
+            ? this.parentSheet.getAfterAllClosedSource()
+            : this.afterAllClosedSubject;
+    }
+    resolveConfig(config) {
+        const merged = new SheetConfig();
+        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: "21.2.14", ngImport: i0, type: Sheet, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: Sheet });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: Sheet, decorators: [{
+            type: Injectable
+        }] });
+/**
+ * Registers the {@link Sheet} service for dependency injection.
+ *
+ * @param defaultOptions Optional defaults merged into every `open()` call.
+ * @example
+ * ```ts
+ * provideSheet({ side: 'left', size: 'lg' })
+ * ```
+ */
+function provideSheet(defaultOptions) {
+    const providers = [Sheet];
+    if (defaultOptions) {
+        providers.push({ provide: SHEET_DEFAULT_OPTIONS, useValue: defaultOptions });
+    }
+    return makeEnvironmentProviders(providers);
+}
+
+/**
+ * Header wrapper for a sheet. Provides consistent padding and spacing for
+ * title + subtitle + leading icon, and separates the header from scrollable
+ * content below.
+ */
+class SheetHeaderDirective {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: SheetHeaderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.14", type: SheetHeaderDirective, isStandalone: true, selector: "[twSheetHeader], tw-sheet-header", host: { classAttribute: "flex items-start gap-3 px-6 pt-6 pb-4" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: SheetHeaderDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[twSheetHeader], tw-sheet-header',
+                    host: {
+                        class: 'flex items-start gap-3 px-6 pt-6 pb-4',
+                    },
+                }]
+        }] });
+// Slot tokens own light/dark contrast — no `dark:` overrides, no shade picks.
+// See role slot conventions in `projects/ngx-tw/theme/_semantic.css`.
+const ICON_COLOR_CLASSES = {
+    primary: 'bg-primary-soft text-primary-icon',
+    secondary: 'bg-secondary-soft text-secondary-icon',
+    accent: 'bg-accent-soft text-accent-icon',
+    neutral: 'bg-neutral-soft text-neutral-icon',
+    info: 'bg-info-soft text-info-icon',
+    success: 'bg-success-soft text-success-icon',
+    warning: 'bg-warning-soft text-warning-icon',
+    error: 'bg-error-soft text-error-icon',
+};
+/**
+ * Decorative leading icon for a sheet header. Use with a semantic `color` to
+ * match destructive / informational / success sheets.
+ */
+class SheetIconDirective {
+    /** Semantic color for the icon container. Defaults to a neutral surface. */
+    color = input(undefined, ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
+    classes = computed(() => {
+        const base = 'flex size-10 shrink-0 items-center justify-center rounded-full';
+        const color = this.color();
+        return color ? `${base} ${ICON_COLOR_CLASSES[color]}` : `${base} bg-surface-muted text-fg`;
+    }, ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: SheetIconDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.14", type: SheetIconDirective, isStandalone: true, selector: "[twSheetIcon]", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: SheetIconDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[twSheetIcon]',
+                    host: {
+                        '[class]': 'classes()',
+                    },
+                }]
+        }], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }] } });
+/**
+ * Sheet title. Registers its ID with the container's `aria-labelledby` queue
+ * so screen readers announce it automatically.
+ */
+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, ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+    ngOnInit() {
+        const containerInstance = this.sheetRef?.containerInstance ?? this.container;
+        if (containerInstance)
+            containerInstance._addAriaLabelledBy(this.id());
+    }
+    ngOnDestroy() {
+        const containerInstance = this.sheetRef?.containerInstance ?? this.container;
+        if (containerInstance)
+            containerInstance._removeAriaLabelledBy(this.id());
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: SheetTitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.14", type: SheetTitleDirective, isStandalone: true, selector: "[twSheetTitle], tw-sheet-title", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "id": "id()" }, classAttribute: "text-sm font-semibold text-fg" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: SheetTitleDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[twSheetTitle], tw-sheet-title',
+                    host: {
+                        class: 'text-sm font-semibold text-fg',
+                        '[id]': 'id()',
+                    },
+                }]
+        }], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }] } });
+/** Secondary line beneath the sheet title — intended for a short description. */
+class SheetSubtitleDirective {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: SheetSubtitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.14", type: SheetSubtitleDirective, isStandalone: true, selector: "[twSheetSubtitle], tw-sheet-subtitle", host: { classAttribute: "text-sm text-fg-muted" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: SheetSubtitleDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[twSheetSubtitle], tw-sheet-subtitle',
+                    host: {
+                        class: 'text-sm text-fg-muted',
+                    },
+                }]
+        }] });
+/**
+ * Sheet description. Registers its ID with the container's `aria-describedby`
+ * queue so screen readers announce the descriptive paragraph after the title.
+ * Mirrors {@link SheetTitleDirective} but for `aria-describedby`.
+ */
+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, ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+    ngOnInit() {
+        const containerInstance = this.sheetRef?.containerInstance ?? this.container;
+        if (containerInstance)
+            containerInstance._addAriaDescribedBy(this.id());
+    }
+    ngOnDestroy() {
+        const containerInstance = this.sheetRef?.containerInstance ?? this.container;
+        if (containerInstance)
+            containerInstance._removeAriaDescribedBy(this.id());
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: SheetDescriptionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.14", type: SheetDescriptionDirective, isStandalone: true, selector: "[twSheetDescription], tw-sheet-description", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "id": "id()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: SheetDescriptionDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[twSheetDescription], tw-sheet-description',
+                    host: {
+                        '[id]': 'id()',
+                    },
+                }]
+        }], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }] } });
+/**
+ * Scrollable content region of the sheet. Apply between the header and the
+ * actions bar. Inherits CDK's `CdkScrollable` to play nicely with scroll
+ * strategies and nested scrollables.
+ */
+class SheetContentDirective {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: SheetContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.14", type: SheetContentDirective, isStandalone: true, selector: "[twSheetContent], tw-sheet-content", host: { classAttribute: "flex-1 overflow-y-auto px-6 py-4 text-sm text-fg" }, hostDirectives: [{ directive: i1.CdkScrollable }], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: SheetContentDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[twSheetContent], tw-sheet-content',
+                    hostDirectives: [CdkScrollable],
+                    host: {
+                        class: 'flex-1 overflow-y-auto px-6 py-4 text-sm text-fg',
+                    },
+                }]
+        }] });
+/**
+ * Bottom action bar of a sheet. Use inside the sheet content or template to
+ * host Cancel/Confirm buttons. Stays pinned below scrollable content.
+ */
+class SheetActionsDirective {
+    /** Horizontal alignment of the action buttons. Defaults to `'end'`. */
+    align = input('end', ...(ngDevMode ? [{ debugName: "align" }] : /* istanbul ignore next */ []));
+    classes = computed(() => {
+        const align = this.align();
+        const justify = align === 'start' ? 'justify-start' : align === 'center' ? 'justify-center' : 'justify-end';
+        return `flex flex-wrap items-center gap-2 px-6 py-4 border-t border-border-muted ${justify}`;
+    }, ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: SheetActionsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.14", type: SheetActionsDirective, isStandalone: true, selector: "[twSheetActions], tw-sheet-actions", inputs: { align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: SheetActionsDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[twSheetActions], tw-sheet-actions',
+                    host: {
+                        '[class]': 'classes()',
+                    },
+                }]
+        }], propDecorators: { align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }] } });
+/**
+ * Closes the enclosing sheet when the host button is clicked. Provide a
+ * `[twSheetClose]` value to pass a result to `afterClosed()` subscribers.
+ */
+class SheetCloseDirective {
+    /** Value passed to `afterClosed()` when the button is clicked. */
+    twSheetClose = input(undefined, ...(ngDevMode ? [{ debugName: "twSheetClose" }] : /* istanbul ignore next */ []));
+    /** Native button `type`. Defaults to `'button'` to avoid accidental form submission. */
+    type = input('button', ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
+    sheetRef = inject(SheetRef, { optional: true });
+    onClick() {
+        this.sheetRef?.close(this.twSheetClose());
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: SheetCloseDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.14", type: SheetCloseDirective, isStandalone: true, selector: "[twSheetClose]", inputs: { twSheetClose: { classPropertyName: "twSheetClose", publicName: "twSheetClose", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "onClick()" }, properties: { "attr.type": "type()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: SheetCloseDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[twSheetClose]',
+                    host: {
+                        '(click)': 'onClick()',
+                        '[attr.type]': 'type()',
+                    },
+                }]
+        }], propDecorators: { twSheetClose: [{ type: i0.Input, args: [{ isSignal: true, alias: "twSheetClose", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }] } });
+
+/**
+ * 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 };
+//# sourceMappingURL=cdevhub-ngx-tw-sheet.mjs.map