gog-dialog

Dialog

A service-driven modal outlet — mount <gog-dialog /> once and open any component as its body through DialogService. Supports stacking, dragging, a built-in focus trap, and a ready-made confirmation dialog.

Overview

Import DialogComponent and mount <gog-dialog /> once — typically near the root of your app. Every DialogService.open() call renders through that single outlet, so it only needs to exist once no matter how many places call it.

import { DialogComponent, DialogService } from '@guildofgleks/ui';

@Component({
  // ...
  imports: [DialogComponent],
})
export class AppComponent {
  // Mount <gog-dialog /> once, near the root of your app.
}

Basic usage — the library ships a ready-made ConfirmationDialogComponent for confirm/cancel prompts:

<gog-button (gogClick)="openConfirm()">Delete workspace</gog-button>
<gog-dialog />

Last result: No dialog closed yet.

Examples

Custom content

Any component can be the dialog body. Inject DIALOG_DATA to read the data passed to open(), and DIALOG_REF to close the dialog and resolve afterClosed from inside the body itself.

<gog-button (gogClick)="openCustomContent()">Open custom dialog</gog-button>
<gog-dialog />

Non-closable

closable: false hides the header close button and ignores Escape and backdrop clicks — the only way out is a control inside the body.

<gog-dialog />

Non-modal

modal: false leaves the page behind it scrollable and interactive, and drops the Tab focus trap — useful for a lightweight panel rather than a blocking prompt.

<gog-dialog />

Custom width

width and maxWidth are plain CSS values forwarded to the panel.

<gog-dialog />

Stacked dialogs

Calling open() again from inside a dialog's body stacks a new one on top, each with an increasing z-index — the body component can inject DialogService itself, same as any other consumer.

<gog-dialog />

API Reference

DialogConfig

Passed to DialogService.open(config).

Name	Type	Default	Description
`component`	`Type<unknown>`	`required`	The component rendered as the dialog body.
`title`	`string`	`undefined`	Header title. The header renders if either title or closable is set.
`data`	`unknown`	`undefined`	Passed to the body component via the DIALOG_DATA injection token.
`modal`	`boolean`	`true`	Locks body scroll, traps Tab focus inside the panel, and restores focus to the trigger on close.
`closable`	`boolean`	`true`	Shows the header close button and enables Escape/backdrop-click to close.
`draggable`	`boolean`	`true`	Lets the header be dragged to reposition the panel. Only takes effect when a header renders.
`closeIconName`	`GogIconName`	`'close'`	Icon for the header close button.
`closeIconTemplate`	`TemplateRef<unknown> \| null`	`null`	Replaces the close button icon entirely.
`width`	`string`	`'auto'`	CSS width of the panel.
`maxWidth`	`string`	`'90vw'`	CSS max-width of the panel.
`role`	`'dialog' \| 'alertdialog'`	`'dialog'`	ARIA role for the panel. Use 'alertdialog' for confirmation-style prompts.
`zIndex`	`number`	`auto-incrementing from 1000`	Backdrop z-index. Dropdowns rendered inside the dialog use zIndex + 10.

DialogService methods

Signature	Description
`open<TResult>(config: DialogConfig): DialogHandle<TResult>`	Opens a dialog. Returns a handle with close(result?) and an afterClosed promise that resolves once the dialog closes, with whatever value close() was called with.
`closeAll(result?: unknown): void`	Closes every open dialog, resolving each afterClosed with the same result.

Injection tokens

Used inside the component passed as DialogConfig.component.

Token	Description
`DIALOG_DATA: InjectionToken<unknown>`	Inject inside the body component to read the data passed to open().
`DIALOG_REF: InjectionToken<DialogRef<unknown>>`	Inject inside the body component to call close(result?) and dismiss the dialog from within.

ConfirmationDialogComponent

A ready-made dialog body for confirm/cancel prompts — pass it as component with a ConfirmDialogData object as data: { title, description, confirmText, cancelText }. It closes itself with true on confirm and false on cancel.

Styling Tokens

Every CSS custom property the dialog paints with. Override any of them — on a single instance, a subtree, or a theme — to restyle it. See the Theming guide for the full token-layering model, or the Theme Generator to tweak these live.

Token	Description
`--gog-dialog-backdrop-bg / -backdrop-blur`	Scrim behind the dialog.
`--gog-dialog-bg / -color / -border / -radius / -shadow`	Panel surface.
`--gog-dialog-header-padding / -body-padding`	Section padding.
`--gog-dialog-close-color / -close-hover-color / -close-hover-bg`	Close button.
`--gog-confirm-color / -description-color / -actions-gap`	Confirmation dialog variant.