@compsych-ui-components/angular 7.0.10 → 7.0.11

package/lib/dialog/dialog.d.ts

@@ -0,0 +1,87 @@
+import { OnDestroy } from '@angular/core';
+import { DialogVariant } from './dialog-types';
+import * as i0 from "@angular/core";
+/** How a dialog was closed — surfaced by the `closed` output. */
+export type DialogCloseReason = 'programmatic' | 'backdrop' | 'escape' | 'close-button';
+/**
+ * A themeable modal dialog built on `@angular/cdk/dialog` (centered, scrimmed, focus-trapped).
+ *
+ * Figma: Core Components — "Dialog" organism (file VFBn7KCDy3FSIlvhNo3ylq, 873:9194).
+ *
+ * One component, switched by `variant`:
+ * - `modal-leading-icon`  — leading icon + title header, projected body, split footer.
+ * - `modal-centered-icon` — centered icon badge, centered title + description, split footer.
+ * - `alert`               — compact title + description, right-aligned footer.
+ *
+ * Open state is a two-way `[(open)]` model wrapped around the CDK `Dialog` service. The
+ * CDK dialog container provides `role="dialog"`, `aria-modal`, the focus trap, initial
+ * focus (`autoFocus: 'dialog'`) and focus restoration. The dialog closes on Escape /
+ * backdrop click (when `dismissible`); those are handled here so `closed` can report a
+ * reason. Title/description come from inputs; project the body as default content and each
+ * action button with the `cmpDialogActions` attribute (the footer lays them out — split
+ * full-width for modals, right-aligned for alerts).
+ *
+ *   <compsych-dialog [(open)]="showDialog" variant="modal-leading-icon"
+ *     icon="globe" title="Update your details">
+ *     <p>Body content…</p>
+ *     <compsych-button cmpDialogActions variant="outlined" fullWidth label="Cancel" (click)="showDialog = false" />
+ *     <compsych-button cmpDialogActions variant="filled" fullWidth label="Save" (click)="save()" />
+ *   </compsych-dialog>
+ *
+ * Consumers must load `@angular/cdk/overlay-prebuilt.css` (overlay positioning) and the
+ * `@compsych-ui-components/shared` design tokens globally. The scrim color is injected by
+ * the dialog itself — no extra stylesheet import is needed.
+ */
+export declare class DialogComponent implements OnDestroy {
+    /** Two-way open state. Set to `true` to show the dialog, `false` to close it. */
+    readonly open: import("@angular/core").ModelSignal<boolean>;
+    /** Layout type. Defaults to `modal-leading-icon`. */
+    readonly variant: import("@angular/core").InputSignal<DialogVariant>;
+    /**
+     * Optional width override — any CSS length (e.g. `'1000px'`). Defaults to the variant
+     * width (800px modal / 600px alert). Always clamped to the viewport on small screens.
+     */
+    readonly width: import("@angular/core").InputSignal<string>;
+    /** Heading text. Also drives the accessible name via `aria-labelledby`. */
+    readonly title: import("@angular/core").InputSignal<string>;
+    /** Supporting text under the title (rendered for `centered` and `alert` variants). */
+    readonly description: import("@angular/core").InputSignal<string>;
+    /** Lucide icon name — the leading header icon (`leading`) or centered badge glyph (`centered`). */
+    readonly icon: import("@angular/core").InputSignal<string>;
+    /**
+     * When true (default) the dialog shows a close button and closes on Escape / backdrop click.
+     * When false, the dialog is a forced choice — provide a focusable action (e.g. a
+     * `[cmpDialogActions]` button) so keyboard users can dismiss it (WCAG 2.1.2, no keyboard trap).
+     */
+    readonly dismissible: import("@angular/core").InputSignal<boolean>;
+    /** Accessible label for the close button. */
+    readonly closeLabel: import("@angular/core").InputSignal<string>;
+    /** Accessible name used when no `title` is provided (e.g. a fully custom body). */
+    readonly ariaLabel: import("@angular/core").InputSignal<string>;
+    /** Renders the action footer. Set false to hide it when there are no actions. */
+    readonly showActions: import("@angular/core").InputSignal<boolean>;
+    /** Emits after the dialog has been opened and shown. */
+    readonly opened: import("@angular/core").OutputEmitterRef<void>;
+    /** Emits after the dialog has closed, with the reason it closed. */
+    readonly closed: import("@angular/core").OutputEmitterRef<DialogCloseReason>;
+    /** The dialog surface template, projected into the CDK dialog container when open. */
+    private panelTemplate;
+    private readonly dialog;
+    private readonly overlay;
+    private readonly directionality;
+    private readonly viewContainerRef;
+    private dialogRef?;
+    private closeReason;
+    private readonly _ids;
+    protected readonly titleId: string;
+    protected readonly descId: string;
+    constructor();
+    ngOnDestroy(): void;
+    /** Close request from the close button. */
+    protected requestClose(): void;
+    private closeWith;
+    private attach;
+    private detach;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DialogComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DialogComponent, "compsych-dialog", never, { "open": { "alias": "open"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "dismissible": { "alias": "dismissible"; "required": false; "isSignal": true; }; "closeLabel": { "alias": "closeLabel"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "showActions": { "alias": "showActions"; "required": false; "isSignal": true; }; }, { "open": "openChange"; "opened": "opened"; "closed": "closed"; }, never, ["*", "[cmpDialogActions]"], true, never>;
+}

package/lib/dialog/dialog.service.d.ts

@@ -0,0 +1,55 @@
+import { TemplateRef, Type } from '@angular/core';
+import { CompsychDialogRef } from './dialog-ref';
+import { DialogVariant } from './dialog-types';
+import * as i0 from "@angular/core";
+/** Configuration for {@link DialogService.open}. */
+export interface CompsychDialogConfig<D = unknown> {
+    /** Layout type. Defaults to `modal-leading-icon`. */
+    variant?: DialogVariant;
+    /** Heading text (drives the accessible name via `aria-labelledby`). */
+    title?: string;
+    /** Supporting text (rendered for `centered` / `alert` variants). */
+    description?: string;
+    /** Lucide icon name (leading header icon / centered badge glyph). */
+    icon?: string;
+    /** When true (default) shows a close button and closes on Escape / backdrop click. */
+    dismissible?: boolean;
+    /** Accessible label for the close button. */
+    closeLabel?: string;
+    /** Accessible name used when no `title` is provided. */
+    ariaLabel?: string;
+    /** Width override — any CSS length. Defaults to the variant width, viewport-clamped. */
+    width?: string;
+    /** Whether to render the projected actions footer. */
+    showActions?: boolean;
+    /** Data injected into the opened component via the CDK `DIALOG_DATA` token. */
+    data?: D;
+    /** Extra class(es) for the overlay pane. */
+    panelClass?: string | string[];
+}
+/**
+ * Opens a component or template as a modal dialog inside the compsych-dialog chrome,
+ * imperatively (like Angular Material's `MatDialog`). Built on `@angular/cdk/dialog`.
+ *
+ * The opened content is placed in the dialog body; the header (icon/title/close) and
+ * behavior come from the config. The opened component can inject the CDK `DialogRef`
+ * (to close, optionally with a result) and `DIALOG_DATA` (to read `config.data`) — both
+ * re-exported from `@compsych-ui-components/angular`.
+ *
+ *   const ref = dialogService.open(MyComponent, {
+ *     title: 'Edit details', variant: 'modal-leading-icon', icon: 'globe', data: { id },
+ *   });
+ *   ref.closed.subscribe((result) => { ... });
+ *
+ * Requires `@angular/cdk/overlay-prebuilt.css` + the `@compsych-ui-components/shared` tokens
+ * loaded globally. The scrim color is injected by the dialog — no extra stylesheet needed.
+ */
+export declare class DialogService {
+    private readonly dialog;
+    private readonly overlay;
+    private readonly directionality;
+    /** Opens `content` as a modal dialog. Returns a {@link CompsychDialogRef} (close / closed). */
+    open<R = unknown, D = unknown, C = unknown>(content: Type<C> | TemplateRef<C>, config?: CompsychDialogConfig<D>): CompsychDialogRef<R>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DialogService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<DialogService>;
+}

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "@compsych-ui-components/angular",
-  "version": "7.0.10",
+  "version": "7.0.11",
   "description": "Angular UI components for compsych",
   "publishConfig": {
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
   "peerDependencies": {
+    "@angular/cdk": ">=17.0.0",
     "@angular/common": ">=17.0.0",
     "@angular/core": ">=17.0.0",
     "@compsych-ui-components/shared": "*"