@compsych-ui-components/angular 7.0.9 → 7.0.11

package/lib/dialog/dialog-ref.d.ts

@@ -0,0 +1,24 @@
+import { DialogRef } from '@angular/cdk/dialog';
+/**
+ * Reference to a dialog opened via {@link DialogService.open}. Returned to the opener and
+ * also injectable by the opened content component/template (to close with a result).
+ *
+ * Wraps the CDK `DialogRef`. `closed` is a `Promise` that resolves with the close result — or
+ * `undefined` when the dialog is dismissed (close button / Escape / backdrop). CDK emits its
+ * own `closed` synchronously inside `close()`, which can trigger `ExpressionChangedAfter-
+ * ItHasBeenChecked` (NG0100) when a subscriber updates view state; a Promise defers to a
+ * microtask, so handlers are change-detection safe. Using a Promise (rather than an rxjs
+ * Observable) also keeps the library rxjs-free and mirrors ng-bootstrap's `NgbModalRef.result`.
+ */
+export declare class CompsychDialogRef<R = unknown> {
+    private readonly _cdkRef;
+    /** Resolves once the dialog has closed, with the result (or `undefined` when dismissed). */
+    readonly closed: Promise<R | undefined>;
+    constructor(_cdkRef: DialogRef<R, unknown>);
+    /** The opened component instance, or `null` for template content. */
+    get componentInstance(): unknown;
+    /** Unique id of the open dialog. */
+    get id(): string;
+    /** Closes the dialog, optionally passing a result to `closed`. */
+    close(result?: R): void;
+}

package/lib/dialog/dialog-surface.d.ts

@@ -0,0 +1,54 @@
+import { SafeHtml } from '@angular/platform-browser';
+import { DialogVariant } from './dialog-types';
+import * as i0 from "@angular/core";
+/**
+ * Internal presentational chrome for the dialog: the surface box, header (leading icon +
+ * title + close, or a floating close), centered icon badge + title/description, the body
+ * slot, and the actions footer. Rendered by BOTH the declarative `compsych-dialog` and the
+ * imperative `DialogService` container, so the chrome has a single source of truth.
+ *
+ * Not part of the public API. Overlay/a11y state (role, aria-modal, focus, open) is owned
+ * by the host (the CDK dialog container); `titleId`/`descId` are supplied by the host so its
+ * `aria-labelledby`/`aria-describedby` can reference the rendered title/description elements.
+ * The host renders `display: contents`, so `.cmp-dialog` is the layout box.
+ */
+export declare class DialogSurfaceComponent {
+    /** Layout type. */
+    readonly variant: import("@angular/core").InputSignal<DialogVariant>;
+    /** Optional CSS-length width override (falls back to the variant width). */
+    readonly width: import("@angular/core").InputSignal<string>;
+    /** Heading text. */
+    readonly title: import("@angular/core").InputSignal<string>;
+    /** Supporting text (rendered for `centered` and `alert` variants). */
+    readonly description: import("@angular/core").InputSignal<string>;
+    /** Lucide icon name (leading header icon / centered badge glyph). */
+    readonly icon: import("@angular/core").InputSignal<string>;
+    /** Whether the close button is shown. */
+    readonly dismissible: import("@angular/core").InputSignal<boolean>;
+    /** Accessible label for the close button. */
+    readonly closeLabel: import("@angular/core").InputSignal<string>;
+    /** Whether the projected actions footer is rendered. */
+    readonly showActions: import("@angular/core").InputSignal<boolean>;
+    /** Id for the title element (host supplies it for `aria-labelledby`). */
+    readonly titleId: import("@angular/core").InputSignal<string>;
+    /** Id for the description element (host supplies it for `aria-describedby`). */
+    readonly descId: import("@angular/core").InputSignal<string>;
+    /** Emitted when the close button is activated. */
+    readonly closeClick: import("@angular/core").OutputEmitterRef<void>;
+    private readonly sanitizer;
+    constructor();
+    /** Header (leading) icon markup at 24px. */
+    protected readonly iconMarkup: import("@angular/core").Signal<SafeHtml>;
+    /** Centered badge icon markup at 32px. */
+    protected readonly centeredIconMarkup: import("@angular/core").Signal<SafeHtml>;
+    /** Close (`x`) icon markup at 20px. */
+    protected readonly closeMarkup: import("@angular/core").Signal<SafeHtml>;
+    /**
+     * Looks up a Lucide icon by name and injects an explicit width/height so it renders at the
+     * right size when bound via `[innerHTML]` (Angular's CSS encapsulation does not reach
+     * dynamically injected content). Matches the Card/Button icon helper.
+     */
+    private buildIcon;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DialogSurfaceComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DialogSurfaceComponent, "cmp-dialog-surface", never, { "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; }; "showActions": { "alias": "showActions"; "required": false; "isSignal": true; }; "titleId": { "alias": "titleId"; "required": false; "isSignal": true; }; "descId": { "alias": "descId"; "required": false; "isSignal": true; }; }, { "closeClick": "closeClick"; }, never, ["*", "[cmpDialogActions]"], true, never>;
+}

package/lib/dialog/dialog-types.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Dialog layout type — mirrors the Figma "Dialog" organism `Type` property
+ * (file VFBn7KCDy3FSIlvhNo3ylq, 873:9194).
+ *
+ * - `'modal-leading-icon'`  — header row with an optional leading icon + title
+ *                             and a close button, a projected body, and a
+ *                             full-width split action footer. Widest surface.
+ * - `'modal-centered-icon'` — a centered icon badge above a centered title +
+ *                             description, with a full-width split action footer.
+ * - `'alert'`               — compact: left-aligned title + description with the
+ *                             actions right-aligned. Narrowest surface.
+ */
+export type DialogVariant = 'modal-leading-icon' | 'modal-centered-icon' | 'alert';

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/lib/text-input/text-input.d.ts

@@ -1,10 +1,26 @@
 import { EventEmitter } from '@angular/core';
 import { ControlValueAccessor, NgControl } from '@angular/forms';
+import { ButtonVariant } from '../button/button';
 import * as i0 from "@angular/core";
 /** Size variant of a `compsych-text-input`. Controls input height, padding, and font size. */
 export type TextInputSize = 'small' | 'medium' | 'large';
 /** Native input type. */
 export type TextInputType = 'text' | 'password';
+/** Configuration for the optional button rendered at the right of the label row. */
+export interface TextInputLabelButton {
+    /** Stable identifier emitted by `labelButtonClick` when clicked. */
+    id: string;
+    /** Text displayed on the button. */
+    label: string;
+    /** Visual style of the button. Defaults to `'text'`. */
+    variant?: ButtonVariant;
+    /** Lucide icon name shown before the label. */
+    leadingIcon?: string;
+    /** Lucide icon name shown after the label. */
+    trailingIcon?: string;
+    /** Hides the label and renders a square icon-only button. Requires `leadingIcon`. */
+    iconOnly?: boolean;
+}
 /**
  * A labelled text input that wraps a native `<input>` element.
  * Implements `ControlValueAccessor` so it works with both reactive forms
@@ -40,6 +56,30 @@ export declare class TextInputComponent implements ControlValueAccessor {
      * Forwarded to `aria-describedby` on the native `<input>`.
      */
     ariaDescribedBy?: string;
+    /** Text displayed below the input. Shown in red when the input is in error state. */
+    supportingText: string;
+    /**
+     * Static error text shown in red when the input is in error state.
+     * Used when the input is outside a form (with `[error]="true"`).
+     * When inside a form, prefer `errorMessages` for per-validator messages.
+     */
+    errorMessage: string;
+    /**
+     * Map of Angular validator error keys to display strings.
+     * The component reads `ngControl.errors` to determine which validator failed
+     * and shows the matching message in red below the input.
+     * Example: `{ required: 'Username is required', minlength: 'Min 8 characters' }`
+     */
+    errorMessages: Record<string, string>;
+    private _labelButton;
+    /**
+     * JSON string configuring the optional button at the right of the label row.
+     * Hidden when empty or omitted. Example: `'{"id":"show","label":"Show"}'`
+     * Clicking emits the button's `id` via the `labelButtonClick` output.
+     */
+    set labelButton(json: string);
+    /** @internal Template access to the parsed label button config. */
+    protected get parsedLabelButton(): TextInputLabelButton | null;
     /**
      * Adds a blue asterisk after the label. When used in a form, this is set
      * automatically if the bound `FormControl` has `Validators.required`.
@@ -59,11 +99,16 @@ export declare class TextInputComponent implements ControlValueAccessor {
     readonly: boolean;
     /** Emits the new string value whenever the user types. For use outside Angular forms; inside forms use the `FormControl` value stream. */
     readonly valueChange: EventEmitter<string>;
+    /** Emits the label button's `id` when it is clicked. */
+    readonly labelButtonClick: EventEmitter<string>;
     get inputId(): string;
     /** True when the bound FormControl is invalid and touched, or when `error` is explicitly set. */
     get hasError(): boolean;
     /** True when `required` is set explicitly, or when the bound FormControl has Validators.required. */
     get isRequired(): boolean;
+    private get activeErrorMessage();
+    get displayedSupportingText(): string;
+    get describedBy(): string | null;
     get wrapperClasses(): string;
     writeValue(value: string | null): void;
     registerOnChange(fn: (value: string) => void): void;
@@ -72,8 +117,9 @@ export declare class TextInputComponent implements ControlValueAccessor {
     setDisabledState(isDisabled: boolean): void;
     protected onInput(event: Event): void;
     protected onBlur(): void;
+    protected onLabelButtonClick(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<TextInputComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<TextInputComponent, "compsych-text-input", never, { "label": { "alias": "label"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "value": { "alias": "value"; "required": false; }; "type": { "alias": "type"; "required": false; }; "size": { "alias": "size"; "required": false; }; "name": { "alias": "name"; "required": false; }; "id": { "alias": "id"; "required": false; }; "ariaDescribedBy": { "alias": "ariaDescribedBy"; "required": false; }; "required": { "alias": "required"; "required": false; }; "error": { "alias": "error"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; }, { "valueChange": "valueChange"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TextInputComponent, "compsych-text-input", never, { "label": { "alias": "label"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "value": { "alias": "value"; "required": false; }; "type": { "alias": "type"; "required": false; }; "size": { "alias": "size"; "required": false; }; "name": { "alias": "name"; "required": false; }; "id": { "alias": "id"; "required": false; }; "ariaDescribedBy": { "alias": "ariaDescribedBy"; "required": false; }; "supportingText": { "alias": "supportingText"; "required": false; }; "errorMessage": { "alias": "errorMessage"; "required": false; }; "errorMessages": { "alias": "errorMessages"; "required": false; }; "labelButton": { "alias": "labelButton"; "required": false; }; "required": { "alias": "required"; "required": false; }; "error": { "alias": "error"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; }, { "valueChange": "valueChange"; "labelButtonClick": "labelButtonClick"; }, never, never, true, never>;
     static ngAcceptInputType_required: unknown;
     static ngAcceptInputType_error: unknown;
     static ngAcceptInputType_disabled: unknown;

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "@compsych-ui-components/angular",
-  "version": "7.0.9",
+  "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": "*"