# Alert Dialog

Displays a modal confirmation surface for important or destructive actions where the user is expected to respond before continuing.

Use Alert Dialog for delete confirmations, permission prompts, and share or access decisions that should not dismiss accidentally on backdrop click.

## Import

```ts
import {
  AlertDialogActionComponent,
  AlertDialogCancelComponent,
  AlertDialogComponent,
  AlertDialogContentComponent,
  AlertDialogDescriptionComponent,
  AlertDialogFooterComponent,
  AlertDialogHeaderComponent,
  AlertDialogMediaComponent,
  AlertDialogTitleComponent,
} from '@edsis/component/alert-dialog';
```

## Composition

The Angular composition keeps the shadcn structure for content and actions, with one intentional mapping difference: shadcn `AlertDialogTrigger` becomes any external control that toggles the `open` signal.

```text
button[Button] (external trigger; sets the open signal)
AlertDialog
└── AlertDialogContent
    ├── AlertDialogHeader
    │   ├── AlertDialogMedia (optional)
    │   ├── AlertDialogTitle
    │   └── AlertDialogDescription
    └── AlertDialogFooter
        ├── button[AlertDialogCancel]
        └── button[AlertDialogAction]
```

## Basic usage

Use an external trigger to set the `open` model, then declare the alert content inside `AlertDialog`.

```html
<button type="button" Button variant="outline" (click)="confirmOpen.set(true)">Show Dialog</button>

<AlertDialog
  [(open)]="confirmOpen"
  aria-labelledby="alert-title"
  aria-describedby="alert-description"
>
  <AlertDialogContent>
    <AlertDialogHeader>
      <AlertDialogTitle id="alert-title">Are you absolutely sure?</AlertDialogTitle>
      <AlertDialogDescription id="alert-description">
        This action cannot be undone. This will permanently delete your account from our servers.
      </AlertDialogDescription>
    </AlertDialogHeader>

    <AlertDialogFooter>
      <button type="button" AlertDialogCancel>Cancel</button>
      <button type="button" AlertDialogAction>Continue</button>
    </AlertDialogFooter>
  </AlertDialogContent>
</AlertDialog>
```

## Common patterns

### Small confirmation

Set `size="sm"` on `AlertDialogContent` for shorter mobile-friendly confirmations.

```html
<AlertDialog [(open)]="smallOpen">
  <AlertDialogContent size="sm">
    <AlertDialogHeader>
      <AlertDialogTitle>Allow accessory to connect?</AlertDialogTitle>
      <AlertDialogDescription>
        Do you want to allow the USB accessory to connect to this device?
      </AlertDialogDescription>
    </AlertDialogHeader>

    <AlertDialogFooter>
      <button type="button" AlertDialogCancel>Don't allow</button>
      <button type="button" AlertDialogAction>Allow</button>
    </AlertDialogFooter>
  </AlertDialogContent>
</AlertDialog>
```

### Media

Use `AlertDialogMedia` to add an icon or other leading visual treatment above the title on mobile and beside it on larger screens.

```html
<AlertDialog [(open)]="shareOpen">
  <AlertDialogContent>
    <AlertDialogHeader>
      <AlertDialogMedia>
        <svg
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="1.75"
          aria-hidden="true"
        >
          <path d="M12 5v14" />
          <path d="M5 12h14" />
          <circle cx="12" cy="12" r="8" />
        </svg>
      </AlertDialogMedia>
      <AlertDialogTitle>Share this project?</AlertDialogTitle>
      <AlertDialogDescription>
        Anyone with the link will be able to view and edit this project.
      </AlertDialogDescription>
    </AlertDialogHeader>

    <AlertDialogFooter>
      <button type="button" AlertDialogCancel>Cancel</button>
      <button type="button" AlertDialogAction>Share</button>
    </AlertDialogFooter>
  </AlertDialogContent>
</AlertDialog>
```

### Destructive action

Pass `variant="destructive"` to `AlertDialogAction` when the primary action is destructive.

```html
<AlertDialog [(open)]="deleteOpen">
  <AlertDialogContent size="sm">
    <AlertDialogHeader>
      <AlertDialogMedia class="border-destructive/20 bg-destructive/10 text-destructive">
        <svg
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="1.75"
          aria-hidden="true"
        >
          <path d="M3 6h18" />
          <path d="M8 6V4h8v2" />
          <path d="M8 10v6" />
          <path d="M12 10v6" />
          <path d="M16 10v6" />
          <path d="M5 6l1 13h12l1-13" />
        </svg>
      </AlertDialogMedia>
      <AlertDialogTitle>Delete chat?</AlertDialogTitle>
      <AlertDialogDescription>
        This permanently deletes the conversation and removes saved memories linked to it.
      </AlertDialogDescription>
    </AlertDialogHeader>

    <AlertDialogFooter>
      <button type="button" AlertDialogCancel>Cancel</button>
      <button type="button" AlertDialogAction variant="destructive">Delete</button>
    </AlertDialogFooter>
  </AlertDialogContent>
</AlertDialog>
```

### RTL

Wrap the trigger and dialog in a `dir="rtl"` container or manage direction globally in the app shell.

```html
<div dir="rtl" lang="ar" class="text-right">
  <button type="button" Button variant="outline" (click)="rtlOpen.set(true)">إظهار الحوار</button>

  <AlertDialog [(open)]="rtlOpen" aria-labelledby="rtl-title" aria-describedby="rtl-description">
    <AlertDialogContent size="sm">
      <AlertDialogHeader>
        <AlertDialogTitle id="rtl-title">هل أنت متأكد تمامًا؟</AlertDialogTitle>
        <AlertDialogDescription id="rtl-description">
          لا يمكن التراجع عن هذا الإجراء. سيؤدي هذا إلى حذف حسابك نهائيًا من خوادمنا.
        </AlertDialogDescription>
      </AlertDialogHeader>
      <AlertDialogFooter>
        <button type="button" AlertDialogCancel>إلغاء</button>
        <button type="button" AlertDialogAction>متابعة</button>
      </AlertDialogFooter>
    </AlertDialogContent>
  </AlertDialog>
</div>
```

## API reference

### `AlertDialogComponent`

| Input                  | Type                               | Default         |
| ---------------------- | ---------------------------------- | --------------- |
| `open` (model)         | `boolean`                          | `false`         |
| `backdrop`             | `'dim' \| 'blur' \| 'transparent'` | `'transparent'` |
| `closeOnEscape`        | `boolean`                          | `true`          |
| `closeOnBackdropClick` | `boolean`                          | `false`         |
| `showCloseButton`      | `boolean`                          | `false`         |
| `closeButtonLabel`     | `string`                           | `'Close'`       |
| `aria-labelledby`      | `string \| null`                   | `null`          |
| `aria-describedby`     | `string \| null`                   | `null`          |
| `class`                | `string`                           | `''`            |

Output: `openedChange: boolean`. Method: `close()`.

### `AlertDialogContentComponent`

| Input   | Type                | Default     |
| ------- | ------------------- | ----------- |
| `size`  | `'default' \| 'sm'` | `'default'` |
| `class` | `string`            | `''`        |

### Parts

| Part                        | Purpose                                                            |
| --------------------------- | ------------------------------------------------------------------ |
| `AlertDialogHeader`         | Title, optional media, and supporting copy wrapper                 |
| `AlertDialogTitle`          | Primary label announced when the dialog opens                      |
| `AlertDialogDescription`    | Supporting copy announced after the title                          |
| `AlertDialogMedia`          | Optional icon or visual cue for the decision                       |
| `AlertDialogFooter`         | Action row                                                         |
| `button[AlertDialogCancel]` | Secondary action with outline styling that closes the dialog       |
| `button[AlertDialogAction]` | Primary action that closes the dialog and supports button variants |

Lower-level behavior is based on the Radix Alert Dialog pattern: <https://www.radix-ui.com/primitives/docs/components/alert-dialog#api-reference>.

## Styling and theming

The surface reuses the shared dialog overlay and theme tokens, while the action parts reuse the same `buttonVariants` definitions as `Button`.

Pass `class` to `AlertDialog` when you need custom max width or spacing, `size="sm"` to `AlertDialogContent` for compact confirmations, and `class` to `AlertDialogMedia` when a specific tone such as destructive emphasis is needed.

## Accessibility

- The surface renders with `role="dialog"` and `aria-modal="true"`.
- Focus is trapped while the alert dialog is open and restored to the previously active element when it closes.
- Backdrop click is disabled by default so confirmations do not dismiss accidentally.
- Keep `AlertDialogTitle` and `AlertDialogDescription` short and descriptive so assistive technologies announce useful context immediately.

## Keyboard interactions

- `Tab` and `Shift+Tab` stay inside the modal while it is open.
- `Escape` closes the alert dialog unless `closeOnEscape` is disabled.
- Native button activation handles `Enter` and `Space` for cancel and action buttons.

## Angular notes

- This implementation intentionally maps shadcn `AlertDialogTrigger` to any external trigger that owns the `open` signal.
- `button[AlertDialogCancel]` and `button[AlertDialogAction]` close the nearest ancestor alert dialog automatically by default.
- Use `(click)` on the action button for side effects such as deleting or sharing, and keep `closeOnClick` enabled unless the flow needs to wait for an async result.

## Source parity

This Angular implementation keeps the shadcn information architecture, examples, and `size="sm"` content behavior while translating trigger ownership to Angular signals and dedicated attribute components for the footer actions.