ngwr 9.0.1 → 10.0.0

package/fesm2022/ngwr-drawer.mjs

@@ -1,11 +1,14 @@
 import { ConfigurableFocusTrapFactory } from '@angular/cdk/a11y';
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
-import { TemplatePortal } from '@angular/cdk/portal';
+import { TemplatePortal, ComponentPortal } from '@angular/cdk/portal';
 import { isPlatformBrowser } from '@angular/common';
 import * as i0 from '@angular/core';
-import { model, input, viewChild, TemplateRef, inject, ViewContainerRef, DestroyRef, PLATFORM_ID, effect, ViewEncapsulation, Component, Directive, computed } from '@angular/core';
+import { model, input, viewChild, TemplateRef, inject, ViewContainerRef, DestroyRef, PLATFORM_ID, effect, ViewEncapsulation, Component, InjectionToken, EnvironmentInjector, Injector, afterNextRender, Service, Directive, computed } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { WR_OVERLAY } from 'ngwr/overlay';
+import { useI18nText, WrI18n } from 'ngwr/i18n';
+import { WR_OVERLAY, wrAppendOverlayClose } from 'ngwr/overlay';
+import { ScrollStrategyOptions } from '@angular/cdk/overlay';
+import { ReplaySubject } from 'rxjs';
 
 /**
  * @license
@@ -75,6 +78,15 @@ class WrDrawer {
     closeOnBackdropClick = input(true, { ...(ngDevMode ? { debugName: "closeOnBackdropClick" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
     /** Close on Escape. @default true */
     closeOnEscape = input(true, { ...(ngDevMode ? { debugName: "closeOnEscape" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    /**
+     * Show a dismiss (×) button in the panel's top-right corner. Set `false` when
+     * the projected content supplies its own close affordance. @default true
+     */
+    closable = input(true, { ...(ngDevMode ? { debugName: "closable" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    /** Accessible name for the dismiss button. Falls back to `drawer.close`. */
+    closeLabel = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "closeLabel" }] : /* istanbul ignore next */ []));
+    resolvedCloseLabel = useI18nText(this.closeLabel, 'drawer.close', 'Close drawer');
     panelTpl = viewChild.required(TemplateRef, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "panelTpl" }] : /* istanbul ignore next */ []));
     panelClass() {
@@ -83,6 +95,8 @@ class WrDrawer {
             parts.push('wr-drawer__panel--rounded');
         if (this.safeArea())
             parts.push('wr-drawer__panel--safe-area');
+        if (this.closable())
+            parts.push('wr-drawer__panel--closable');
         return parts.join(' ');
     }
     // Swipe-to-dismiss — gated to the grab handle, so it never fights the
@@ -91,28 +105,31 @@ class WrDrawer {
     swipeStartX = 0;
     swipeStartY = 0;
     swiping = false;
+    // Pointer, not Touch. The handle has always advertised itself to a mouse with
+    // `cursor: grab`, but the gesture was bound to touch events only, so on a
+    // desktop it could not be dragged at all. Pointer Events cover touch, mouse and
+    // pen through one path — the same idiom `wr-splitter` already uses.
     onSwipeStart(event) {
-        const touch = event.touches[0];
-        if (!touch)
+        // Ignore secondary contacts of a multi-touch gesture.
+        if (!event.isPrimary)
             return;
-        this.swipeStartX = touch.clientX;
-        this.swipeStartY = touch.clientY;
+        this.swipeStartX = event.clientX;
+        this.swipeStartY = event.clientY;
         this.swiping = true;
+        // Capture, so the drag keeps reporting once the cursor leaves the 2.5rem
+        // grabber — without it a mouse drag dies the moment it slips off the handle.
+        event.currentTarget.setPointerCapture(event.pointerId);
     }
     onSwipeMove(event, panel) {
         if (!this.swiping)
             return;
-        const touch = event.touches[0];
-        if (!touch)
-            return;
         const { axis, sign } = this.closeAxis();
-        const delta = axis === 'y' ? touch.clientY - this.swipeStartY : touch.clientX - this.swipeStartX;
-        // Only follow the finger when dragging toward the closing edge.
+        const delta = axis === 'y' ? event.clientY - this.swipeStartY : event.clientX - this.swipeStartX;
+        // Only follow the pointer when dragging toward the closing edge.
         if (delta * sign <= 0) {
             panel.style.transform = '';
             return;
         }
-        event.preventDefault();
         panel.style.transition = 'none';
         panel.style.transform = axis === 'y' ? `translateY(${delta}px)` : `translateX(${delta}px)`;
     }
@@ -120,9 +137,8 @@ class WrDrawer {
         if (!this.swiping)
             return;
         this.swiping = false;
-        const touch = event.changedTouches[0];
         const { axis, sign } = this.closeAxis();
-        const delta = touch ? (axis === 'y' ? touch.clientY - this.swipeStartY : touch.clientX - this.swipeStartX) : 0;
+        const delta = axis === 'y' ? event.clientY - this.swipeStartY : event.clientX - this.swipeStartX;
         const panelSize = axis === 'y' ? panel.offsetHeight : panel.offsetWidth;
         if (delta * sign > panelSize * 0.3) {
             this.open.set(false); // keep the dragged offset as the overlay disposes
@@ -238,12 +254,329 @@ class WrDrawer {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: WrDrawer, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: WrDrawer, isStandalone: true, selector: "wr-drawer", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, showHandle: { classPropertyName: "showHandle", publicName: "showHandle", isSignal: true, isRequired: false, transformFunction: null }, safeArea: { classPropertyName: "safeArea", publicName: "safeArea", isSignal: true, isRequired: false, transformFunction: null }, hasBackdrop: { classPropertyName: "hasBackdrop", publicName: "hasBackdrop", isSignal: true, isRequired: false, transformFunction: null }, closeOnBackdropClick: { classPropertyName: "closeOnBackdropClick", publicName: "closeOnBackdropClick", isSignal: true, isRequired: false, transformFunction: null }, closeOnEscape: { classPropertyName: "closeOnEscape", publicName: "closeOnEscape", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange" }, host: { styleAttribute: "display:none" }, viewQueries: [{ propertyName: "panelTpl", first: true, predicate: TemplateRef, descendants: true, isSignal: true }], ngImport: i0, template: "<ng-template>\n  <div #panel [class]=\"panelClass()\">\n    @if (showHandle()) {\n      <div\n        class=\"wr-drawer__handle\"\n        aria-hidden=\"true\"\n        (touchstart)=\"onSwipeStart($event)\"\n        (touchmove)=\"onSwipeMove($event, panel)\"\n        (touchend)=\"onSwipeEnd($event, panel)\"\n        (touchcancel)=\"onSwipeEnd($event, panel)\"\n      >\n        <span class=\"wr-drawer__grabber\"></span>\n      </div>\n    }\n    <ng-content />\n  </div>\n</ng-template>\n", encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: WrDrawer, isStandalone: true, selector: "wr-drawer", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, showHandle: { classPropertyName: "showHandle", publicName: "showHandle", isSignal: true, isRequired: false, transformFunction: null }, safeArea: { classPropertyName: "safeArea", publicName: "safeArea", isSignal: true, isRequired: false, transformFunction: null }, hasBackdrop: { classPropertyName: "hasBackdrop", publicName: "hasBackdrop", isSignal: true, isRequired: false, transformFunction: null }, closeOnBackdropClick: { classPropertyName: "closeOnBackdropClick", publicName: "closeOnBackdropClick", isSignal: true, isRequired: false, transformFunction: null }, closeOnEscape: { classPropertyName: "closeOnEscape", publicName: "closeOnEscape", isSignal: true, isRequired: false, transformFunction: null }, closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null }, closeLabel: { classPropertyName: "closeLabel", publicName: "closeLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange" }, host: { styleAttribute: "display:none" }, viewQueries: [{ propertyName: "panelTpl", first: true, predicate: TemplateRef, descendants: true, isSignal: true }], ngImport: i0, template: "<ng-template>\n  <div #panel [class]=\"panelClass()\">\n    @if (showHandle()) {\n      <div\n        class=\"wr-drawer__handle\"\n        aria-hidden=\"true\"\n        (pointerdown)=\"onSwipeStart($event)\"\n        (pointermove)=\"onSwipeMove($event, panel)\"\n        (pointerup)=\"onSwipeEnd($event, panel)\"\n        (pointercancel)=\"onSwipeEnd($event, panel)\"\n      >\n        <span class=\"wr-drawer__grabber\"></span>\n      </div>\n    }\n    @if (closable()) {\n      <button type=\"button\" class=\"wr-drawer__close\" [attr.aria-label]=\"resolvedCloseLabel()\" (click)=\"open.set(false)\">\n        <svg\n          class=\"wr-icon__svg\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          aria-hidden=\"true\"\n        >\n          <path d=\"M18 6 6 18\" />\n          <path d=\"m6 6 12 12\" />\n        </svg>\n      </button>\n    }\n    <ng-content />\n  </div>\n</ng-template>\n", encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: WrDrawer, decorators: [{
             type: Component,
-            args: [{ selector: 'wr-drawer', encapsulation: ViewEncapsulation.None, host: { style: 'display:none' }, template: "<ng-template>\n  <div #panel [class]=\"panelClass()\">\n    @if (showHandle()) {\n      <div\n        class=\"wr-drawer__handle\"\n        aria-hidden=\"true\"\n        (touchstart)=\"onSwipeStart($event)\"\n        (touchmove)=\"onSwipeMove($event, panel)\"\n        (touchend)=\"onSwipeEnd($event, panel)\"\n        (touchcancel)=\"onSwipeEnd($event, panel)\"\n      >\n        <span class=\"wr-drawer__grabber\"></span>\n      </div>\n    }\n    <ng-content />\n  </div>\n</ng-template>\n" }]
-        }], ctorParameters: () => [], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], maxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxHeight", required: false }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], showHandle: [{ type: i0.Input, args: [{ isSignal: true, alias: "showHandle", required: false }] }], safeArea: [{ type: i0.Input, args: [{ isSignal: true, alias: "safeArea", required: false }] }], hasBackdrop: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasBackdrop", required: false }] }], closeOnBackdropClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnBackdropClick", required: false }] }], closeOnEscape: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnEscape", required: false }] }], panelTpl: [{ type: i0.ViewChild, args: [i0.forwardRef(() => TemplateRef), { isSignal: true }] }] } });
+            args: [{ selector: 'wr-drawer', encapsulation: ViewEncapsulation.None, host: { style: 'display:none' }, template: "<ng-template>\n  <div #panel [class]=\"panelClass()\">\n    @if (showHandle()) {\n      <div\n        class=\"wr-drawer__handle\"\n        aria-hidden=\"true\"\n        (pointerdown)=\"onSwipeStart($event)\"\n        (pointermove)=\"onSwipeMove($event, panel)\"\n        (pointerup)=\"onSwipeEnd($event, panel)\"\n        (pointercancel)=\"onSwipeEnd($event, panel)\"\n      >\n        <span class=\"wr-drawer__grabber\"></span>\n      </div>\n    }\n    @if (closable()) {\n      <button type=\"button\" class=\"wr-drawer__close\" [attr.aria-label]=\"resolvedCloseLabel()\" (click)=\"open.set(false)\">\n        <svg\n          class=\"wr-icon__svg\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          aria-hidden=\"true\"\n        >\n          <path d=\"M18 6 6 18\" />\n          <path d=\"m6 6 12 12\" />\n        </svg>\n      </button>\n    }\n    <ng-content />\n  </div>\n</ng-template>\n" }]
+        }], ctorParameters: () => [], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], maxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxHeight", required: false }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], showHandle: [{ type: i0.Input, args: [{ isSignal: true, alias: "showHandle", required: false }] }], safeArea: [{ type: i0.Input, args: [{ isSignal: true, alias: "safeArea", required: false }] }], hasBackdrop: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasBackdrop", required: false }] }], closeOnBackdropClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnBackdropClick", required: false }] }], closeOnEscape: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnEscape", required: false }] }], closable: [{ type: i0.Input, args: [{ isSignal: true, alias: "closable", required: false }] }], closeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeLabel", required: false }] }], panelTpl: [{ type: i0.ViewChild, args: [i0.forwardRef(() => TemplateRef), { isSignal: true }] }] } });
+
+/**
+ * @license
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE
+ */
+/**
+ * Handle returned by `WrDrawerManager.open()`.
+ *
+ * Wraps the underlying `OverlayRef` and tracks the close result. It is also
+ * provided inside the drawer's own injector, so the projected content can
+ * inject it and close itself — the counterpart to `[wrDrawerClose]` when the
+ * close is programmatic (after a save succeeds, say) rather than a click.
+ *
+ * @example
+ * ```ts
+ * // Caller side.
+ * const ref = drawers.open<ChatComponent, boolean>(ChatComponent, { position: 'right' });
+ * const result = await ref.awaitClose(); // boolean | undefined
+ * ```
+ *
+ * @example
+ * ```ts
+ * // Content side — the drawer closes itself.
+ * @Component({...})
+ * export class ChatComponent {
+ *   private readonly ref = inject(WrDrawerRef);
+ *
+ *   send(): void {
+ *     this.store.send(this.draft());
+ *     this.ref.close(true);
+ *   }
+ * }
+ * ```
+ */
+class WrDrawerRef {
+    _overlayRef;
+    /**
+     * Emits the close result once and completes.
+     *
+     * A `ReplaySubject`, not a plain `Subject`, so the result survives a late
+     * subscriber: content can close itself before `open()` has even returned, and
+     * `awaitClose()` may be called long after the dismissal — both would otherwise
+     * see only `complete` and resolve `undefined`.
+     */
+    closed = new ReplaySubject(1);
+    /** @internal */
+    componentRef = null;
+    /** @internal */
+    focusTrap = null;
+    /** @internal */
+    previouslyFocused = null;
+    constructor(_overlayRef) {
+        this._overlayRef = _overlayRef;
+    }
+    /** The instantiated drawer component. */
+    get componentInstance() {
+        if (!this.componentRef) {
+            throw new Error('WrDrawerRef: component not yet attached');
+        }
+        return this.componentRef.instance;
+    }
+    isClosed = false;
+    /** Close the drawer, optionally returning a result. */
+    close(result) {
+        if (this.isClosed)
+            return;
+        this.isClosed = true;
+        this.closed.next(result);
+        this.closed.complete();
+        // Content that closes itself while constructing gets here with
+        // `OverlayRef.attach()` still on the stack — `componentRef` is assigned
+        // only once attach returns. Disposing mid-attach leaves the CDK writing to
+        // a detached host, so let the current task finish first.
+        if (!this.componentRef) {
+            queueMicrotask(() => this.teardown());
+            return;
+        }
+        this.teardown();
+    }
+    teardown() {
+        this.focusTrap?.destroy();
+        this.focusTrap = null;
+        const restore = this.previouslyFocused;
+        this.previouslyFocused = null;
+        this._overlayRef.dispose();
+        // Drop the destroyed component so a retained ref doesn't pin its instance,
+        // host element and view in memory.
+        this.componentRef = null;
+        // Restore focus after disposal so the trigger is reachable again.
+        if (restore && typeof restore.focus === 'function') {
+            restore.focus();
+        }
+    }
+    /** Resolves with the close result when the drawer is dismissed. */
+    awaitClose() {
+        return new Promise(resolve => {
+            this.closed.subscribe({
+                next: value => resolve(value),
+                complete: () => resolve(undefined),
+            });
+        });
+    }
+    /** Underlying overlay ref — escape hatch for advanced cases. */
+    get overlayRef() {
+        return this._overlayRef;
+    }
+}
+
+/**
+ * @license
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE
+ */
+/**
+ * Token that exposes the `data` payload passed to `WrDrawerManager.open()`.
+ *
+ * @example
+ * ```ts
+ * @Component({...})
+ * export class ChatComponent {
+ *   readonly data = inject<ChatData>(WR_DRAWER_DATA);
+ * }
+ * ```
+ */
+const WR_DRAWER_DATA = new InjectionToken('WR_DRAWER_DATA');
+
+/**
+ * @license
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE
+ */
+/**
+ * Token exposing the open drawer's `WrDrawerRef` to components and
+ * directives rendered inside it (e.g. `[wrDrawerClose]`).
+ *
+ * **Prefer `inject(WrDrawerRef)`** — the ref is provided under the class token
+ * too, and the class path is the documented one. It already covers both cases
+ * you might reach for a token for: `inject(WrDrawerRef, { optional: true })`
+ * works for content that also renders outside a drawer, and
+ * `inject<WrDrawerRef<ChatComponent, boolean>>(WrDrawerRef)` types the generics
+ * without a cast.
+ *
+ * This token is the same object under a second key. It exists for the library's
+ * own directives (`[wrDrawerClose]`) and for swapping the provider out — a test
+ * stub, say — without touching the class.
+ *
+ * @example
+ * ```ts
+ * @Component({...})
+ * export class ChatComponent {
+ *   private readonly ref = inject<WrDrawerRef<ChatComponent, boolean>>(WrDrawerRef);
+ *
+ *   dismiss(): void {
+ *     this.ref.close(true);
+ *   }
+ * }
+ * ```
+ */
+const WR_DRAWER_REF = new InjectionToken('WR_DRAWER_REF');
+
+/**
+ * @license
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE
+ */
+const DEFAULT_POSITION = 'right';
+const DEFAULT_WIDTH = '20rem';
+const DEFAULT_HEIGHT = '16rem';
+const BACKDROP_CLASS = 'wr-drawer-backdrop';
+/**
+ * Opens drawer components in an isolated NGWR overlay — the programmatic
+ * counterpart to `<wr-drawer [(open)]="…">`.
+ *
+ * Use the component when the drawer is part of a template and its open state
+ * is a signal you already own; use this service when the caller doesn't own
+ * the markup (opening a chat panel from a toolbar action, from an effect, from
+ * a route guard) or when you need the close result.
+ *
+ * Uses `WR_OVERLAY` so it composes cleanly with `provideWrOverlay()`
+ * — drawers render into NGWR's own overlay container and never collide
+ * with other CDK consumers (Material, NG-ZORRO, etc.).
+ *
+ * `showHandle` / swipe-to-dismiss is component-only: it needs the drawer's own
+ * wrapper markup, which the service path replaces with your component.
+ *
+ * @example
+ * ```ts
+ * const drawers = inject(WrDrawerManager);
+ *
+ * const ref = drawers.open(ChatComponent, {
+ *   data: { threadId },
+ *   position: 'right',
+ *   width: '28rem',
+ * });
+ *
+ * await ref.awaitClose();
+ * ```
+ *
+ * @see https://ngwr.dev/reference/components/drawer
+ */
+class WrDrawerManager {
+    overlay = inject(WR_OVERLAY);
+    scrollStrategies = inject(ScrollStrategyOptions);
+    parentInjector = inject(EnvironmentInjector);
+    focusTrapFactory = inject(ConfigurableFocusTrapFactory);
+    isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
+    i18n = inject(WrI18n);
+    open(component, options = {}) {
+        const position = options.position ?? DEFAULT_POSITION;
+        const isHorizontal = position === 'left' || position === 'right';
+        // The content component is attached straight into the overlay pane, so the
+        // panel styles land on the pane rather than on an inner wrapper.
+        const panelClasses = [
+            'wr-drawer-overlay',
+            `wr-drawer-overlay--${position}`,
+            'wr-drawer__panel',
+            `wr-drawer__panel--${position}`,
+        ];
+        if (options.rounded)
+            panelClasses.push('wr-drawer__panel--rounded');
+        if (options.safeArea)
+            panelClasses.push('wr-drawer__panel--safe-area');
+        const extra = options.panelClass;
+        if (typeof extra === 'string') {
+            panelClasses.push(extra);
+        }
+        else if (extra) {
+            for (const cls of extra)
+                panelClasses.push(cls);
+        }
+        const positionStrategy = this.overlay
+            .position()
+            .global()[position === 'left' ? 'left' : position === 'right' ? 'right' : 'centerHorizontally']();
+        if (position === 'top')
+            positionStrategy.top();
+        else if (position === 'bottom')
+            positionStrategy.bottom();
+        else
+            positionStrategy.centerVertically();
+        const cap = options.maxHeight ?? null;
+        const overlayRef = this.overlay.create({
+            positionStrategy,
+            scrollStrategy: this.scrollStrategies.block(),
+            hasBackdrop: options.hasBackdrop !== false,
+            backdropClass: BACKDROP_CLASS,
+            panelClass: panelClasses,
+            width: isHorizontal ? (options.width ?? DEFAULT_WIDTH) : '100vw',
+            height: isHorizontal ? undefined : (options.height ?? DEFAULT_HEIGHT),
+            maxHeight: isHorizontal ? undefined : (cap ?? undefined),
+        });
+        const drawerRef = new WrDrawerRef(overlayRef);
+        if (this.isBrowser) {
+            const active = document.activeElement;
+            drawerRef.previouslyFocused = active instanceof HTMLElement ? active : null;
+        }
+        const injector = Injector.create({
+            parent: this.parentInjector,
+            providers: [
+                { provide: WR_DRAWER_DATA, useValue: options.data },
+                { provide: WR_DRAWER_REF, useValue: drawerRef },
+                // Provided as its own token as well, so drawer content can reach for
+                // the familiar `inject(WrDrawerRef)` and close itself.
+                { provide: WrDrawerRef, useValue: drawerRef },
+            ],
+        });
+        const portal = new ComponentPortal(component, null, injector);
+        drawerRef.componentRef = overlayRef.attach(portal);
+        if (this.isBrowser) {
+            const host = overlayRef.overlayElement;
+            host.setAttribute('role', 'dialog');
+            host.setAttribute('aria-modal', 'true');
+            // Built-in dismiss, same contract as WrDialog's `closable`.
+            if (options.closable !== false) {
+                host.classList.add('wr-drawer__panel--closable');
+                const label = options.closeLabel ?? this.i18n.t('drawer.close');
+                wrAppendOverlayClose(host, 'wr-drawer__close', label, () => drawerRef.close());
+            }
+            // Wire aria-labelledby to wrDrawerTitle's auto-id once content is in DOM.
+            // Has to wait for a render, not a microtask: attaching the portal only
+            // schedules change detection, so under zoneless CD a microtask runs while
+            // the content is still an empty view and the title id doesn't exist yet.
+            afterNextRender(() => {
+                const titleEl = host.querySelector('[wrDrawerTitle], [wr-drawer-title]');
+                if (titleEl?.id)
+                    host.setAttribute('aria-labelledby', titleEl.id);
+            }, { injector: this.parentInjector });
+            // Trap focus inside the drawer and move initial focus in.
+            const trap = this.focusTrapFactory.create(host);
+            drawerRef.focusTrap = trap;
+            void trap.focusInitialElementWhenReady();
+        }
+        // Overlay subscriptions complete when the overlay is disposed, so no
+        // explicit teardown is required.
+        if (options.closeOnBackdropClick !== false) {
+            overlayRef.backdropClick().subscribe(() => drawerRef.close());
+        }
+        if (options.closeOnEscape !== false) {
+            overlayRef.keydownEvents().subscribe(event => {
+                if (event.key === 'Escape') {
+                    event.preventDefault();
+                    drawerRef.close();
+                }
+            });
+        }
+        return drawerRef;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: WrDrawerManager, deps: [], target: i0.ɵɵFactoryTarget.Service });
+    static ɵprov = i0.ɵɵngDeclareService({ minVersion: "22.0.0", version: "22.1.0", ngImport: i0, type: WrDrawerManager });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: WrDrawerManager, decorators: [{
+            type: Service
+        }] });
 
 /**
  * @license
@@ -348,18 +681,40 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
 /**
  * Closes the parent drawer on click. Attach to any clickable element.
  *
+ * Works for both drawer flavours: inside `<wr-drawer>` it clears the
+ * component's `open` model, and inside a `WrDrawerManager.open()` drawer it
+ * closes the ref — optionally passing a `[wrDrawerClose]` value as the close
+ * result (the component flavour has no result to carry, so the value is
+ * ignored there).
+ *
  * @example
  * ```html
  * <wr-btn wrDrawerClose>Close</wr-btn>
+ * <wr-btn color="primary" [wrDrawerClose]="true">Save</wr-btn>
  * ```
  */
 class WrDrawerClose {
+    /**
+     * Value to pass to `close()` for service-opened drawers. When unset — or
+     * used as a bare attribute — the drawer closes with `undefined`.
+     */
+    result = input(undefined, { ...(ngDevMode ? { debugName: "result" } : /* istanbul ignore next */ {}), alias: 'wrDrawerClose',
+        // A bare `wrDrawerClose` attribute arrives as the empty string; that means
+        // "no result", not a result of `''`.
+        transform: value => (value === '' ? undefined : value) });
     drawer = inject(WrDrawer, { optional: true });
+    ref = inject(WR_DRAWER_REF, { optional: true });
     close() {
-        this.drawer?.open.set(false);
+        // Element injectors win, so a surrounding `<wr-drawer>` is the nearer
+        // owner even when a service-opened drawer sits further up the tree.
+        if (this.drawer) {
+            this.drawer.open.set(false);
+            return;
+        }
+        this.ref?.close(this.result());
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: WrDrawerClose, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.0", type: WrDrawerClose, isStandalone: true, selector: "[wrDrawerClose]", host: { listeners: { "click": "close()" } }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.0", type: WrDrawerClose, isStandalone: true, selector: "[wrDrawerClose]", inputs: { result: { classPropertyName: "result", publicName: "wrDrawerClose", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "close()" } }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: WrDrawerClose, decorators: [{
             type: Directive,
@@ -367,11 +722,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
                     selector: '[wrDrawerClose]',
                     host: { '(click)': 'close()' },
                 }]
-        }] });
+        }], propDecorators: { result: [{ type: i0.Input, args: [{ isSignal: true, alias: "wrDrawerClose", required: false }] }] } });
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { WrDrawer, WrDrawerClose, WrDrawerContent, WrDrawerFooter, WrDrawerTitle };
+export { WR_DRAWER_DATA, WR_DRAWER_REF, WrDrawer, WrDrawerClose, WrDrawerContent, WrDrawerFooter, WrDrawerManager, WrDrawerRef, WrDrawerTitle };
 //# sourceMappingURL=ngwr-drawer.mjs.map