Drawer

import {
  WrDrawer,
  WrDrawerTitle,
  WrDrawerContent,
  WrDrawerFooter,
  WrDrawerClose
} from 'ngwr/drawer';

<wr-btn (click)="open.set(true)">Open</wr-btn>

<wr-drawer [(open)]="open" position="right" width="22rem">
  <h2 wrDrawerTitle>Settings</h2>
  <div wrDrawerContent>…</div>
  <div wrDrawerFooter>
    <wr-btn wrDrawerClose>Close</wr-btn>
    <wr-btn color="primary" wrDrawerClose>Save</wr-btn>
  </div>
</wr-drawer>

import { WrDrawerManager } from 'ngwr/drawer';

@Component({...})
export class ToolbarComponent {
  private readonly drawers = inject(WrDrawerManager);

  async openChat(threadId: string): Promise<void> {
    const ref = this.drawers.open<ChatComponent, string, ChatData>(ChatComponent, {
      data: { thread: threadId },
      position: 'right',
      width: '24rem',
    });

    const sent = await ref.awaitClose(); // string | undefined
  }
}

// The opened component — same layout directives, no <wr-drawer> wrapper.
import { WR_DRAWER_DATA, WrDrawerRef } from 'ngwr/drawer';

@Component({...})
export class ChatComponent {
  protected readonly data = inject<ChatData>(WR_DRAWER_DATA);
  private readonly ref = inject(WrDrawerRef);

  send(): void {
    this.store.send(this.draft());
    this.ref.close('sent');        // the caller's awaitClose() resolves
  }
}

// The class token already types the generics — no cast, no WR_DRAWER_REF needed:
private readonly ref = inject<WrDrawerRef<ChatComponent, string>>(WR_DRAWER_REF);

<!-- Say where focus starts and the two forms stop differing. The attribute
     needs no import — the focus trap looks it up by name. -->
<wr-drawer [(open)]="open" position="right">
  <h2 wrDrawerTitle>Filters</h2>
  <div wrDrawerContent>
    <wr-form-field label="Search">
      <input wrInput cdkFocusInitial [(value)]="query" />
    </wr-form-field>
  </div>
</wr-drawer>

<!-- Unmarked:
       <wr-drawer>          -> the ✕, which its template renders first
       WrDrawerManager.open -> the first control, since its ✕ is appended last
     Either way, closing returns focus to whatever was focused when it opened. -->