Dialog

// The component that OPENS a dialog injects the service.
import { WrDialog } from 'ngwr/dialog';

@Component({...})
export class MyComponent {
  private readonly dialog = inject(WrDialog);
}

// The component OPENED as a dialog imports the layout directives it uses.
// Selector -> class: [wrDialogTitle] -> WrDialogTitle, and so on.
import { WrDialogClose, WrDialogContent, WrDialogFooter, WrDialogTitle } from 'ngwr/dialog';

@Component({
  imports: [WrDialogTitle, WrDialogContent, WrDialogFooter, WrDialogClose],
  templateUrl: './confirm.html',
})
export class ConfirmComponent {}

const ref = dialog.open(ConfirmComponent, {
  data: { title: 'Delete', message: 'Are you sure?' },
  width: '24rem',
});

const ok = await ref.awaitClose(); // result from <wr-btn wrDialogClose value>

// Inside the opened component. Every attribute below is a directive:
// imports: [WrDialogTitle, WrDialogContent, WrDialogFooter, WrDialogClose]
<h2 wrDialogTitle>Delete</h2>
<div wrDialogContent>Are you sure?</div>
<div wrDialogFooter>
  <wr-btn wrDialogClose>Cancel</wr-btn>
  <wr-btn color="danger" [wrDialogClose]="true">Delete</wr-btn>
</div>

// Inside the opened component — close without a click.
import { WR_DIALOG_DATA, WrDialogRef } from 'ngwr/dialog';

@Component({...})
export class EditUserComponent {
  private readonly ref = inject(WrDialogRef);
  protected readonly data = inject<EditUserData>(WR_DIALOG_DATA);

  save(): void {
    this.store.saveUser(this.form.value);
    this.ref.close(true);            // the caller's awaitClose() resolves
  }
}

// The class token already types the generics — no cast, no WR_DIALOG_REF needed:
private readonly ref = inject<WrDialogRef<EditUserComponent, boolean>>(WR_DIALOG_REF);

// A dialog outlives the component that opened it. `WrDialog` is root-provided
// and the panel's injector hangs off the root environment injector, so an
// `@if` that removes the opener leaves the panel, its backdrop and the
// `cdk-global-scrollblock` on the page. (Navigation is the one exception:
// `closeOnNavigation` is on by default.) Close the ref when you go away.
import { DestroyRef, inject } from '@angular/core';

@Component({...})
export class MyComponent {
  private readonly dialog = inject(WrDialog);
  private readonly destroyRef = inject(DestroyRef);

  async confirmDelete(): Promise<void> {
    const ref = this.dialog.open<ConfirmComponent, boolean>(ConfirmComponent);
    const stop = this.destroyRef.onDestroy(() => ref.close());

    // awaitClose() is a Promise, so takeUntilDestroyed() does not apply to it —
    // that operator takes an Observable. Two ways to not act on a stale result:
    const ok = await ref.awaitClose();
    stop();                                  // nothing left to cancel
    if (ok) this.store.remove();
  }
}

// Or subscribe instead of awaiting, and takeUntilDestroyed() does apply —
// `ref.closed` is an Observable, and the ref is the same one either way.
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';

ref.closed.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(ok => { … });

// The × comes for free — nothing to add. It sits in the panel's top-right
// corner, is labelled from the `dialog.close` i18n key, and the title row
// reserves the gutter so a long heading wraps instead of running under it.
dialog.open(EditUserComponent);

// Turn it off when the content already owns its dismiss, or when the dialog
// must be resolved through its own actions:
dialog.open(EditUserComponent, { closable: false });

// Override just the accessible name:
dialog.open(EditUserComponent, { closeLabel: 'Discard changes' });

<!-- Inside the opened component. Nothing to import: the focus trap looks
     for the attribute by name, so a bare `cdkFocusInitial` is enough. -->
<h2 wrDialogTitle>Rename project</h2>
<div wrDialogContent>
  <wr-form-field label="Name">
    <input wrInput cdkFocusInitial [(value)]="name" />
  </wr-form-field>
</div>
<div wrDialogFooter>
  <wr-btn wrDialogClose>Cancel</wr-btn>
  <wr-btn color="primary" [wrDialogClose]="name()">Save</wr-btn>
</div>

<!-- Without `cdkFocusInitial` the first tabbable element wins — here the same
     input, since the ✕ is appended AFTER your content and comes last. A panel
     of plain text focuses nothing; Escape still closes it. -->

// The overlay container is isolated, and that is what `provideWrOverlay()`
// promises — not a place in your z-index scale. These do nothing:
//
//   .wr-overlay-container .cdk-overlay-pane { z-index: 1100; }
//   header { z-index: 100000; }
//
// To opt the whole application out of the top layer and back into ordinary
// stacking, configure the CDK itself at bootstrap:
import { OVERLAY_DEFAULT_CONFIG } from '@angular/cdk/overlay';

bootstrapApplication(AppComponent, {
  providers: [
    { provide: OVERLAY_DEFAULT_CONFIG, useValue: { usePopover: false } },
  ],
});

// Opting out is a real trade: overlays go back to being clipped by an
// ancestor's `overflow` and to competing on z-index with everything else.

// A dialog that owns a form: keep the backdrop, ignore its clicks.
const ref = this.dialog.open(EditUserComponent, {
  closeOnBackdropClick: false,   // a click beside an open select cannot lose the form
  // closeOnEscape stays true — Escape closes the select first, the dialog next.
});

// Per dialog — slides up as a bottom-sheet on small screens.
dialog.open(ConfirmComponent, { responsive: true });

// Or app-wide, for every overlay:
provideWrResponsiveOverlays();          // default breakpoint 640px
provideWrResponsiveOverlays({ breakpoint: 768 });

const ref = this.dialog.open<ConfirmComponent, 'saved' | 'discarded'>(ConfirmComponent);

// `undefined` is every dismissal: ✕, Escape, backdrop, navigation, and a bare
// [wrDialogClose]. Give the outcomes you care about their own values.
const result = await ref.awaitClose();   // 'saved' | 'discarded' | undefined
if (result === undefined) return;        // dismissed — leave the page as it was

// Or subscribe, when the caller is not an async method:
ref.closed.subscribe(result => { … });   // emits once, then completes