@compsych-ui-components/angular 7.0.10 → 7.0.12

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

@@ -0,0 +1,43 @@
+import { InjectionToken } from '@angular/core';
+import { CdkDialogContainer, DialogConfig, DialogRef } from '@angular/cdk/dialog';
+import { DialogVariant } from './dialog-types';
+import * as i0 from "@angular/core";
+/** Chrome params supplied by `DialogService` to the container via {@link CMP_DIALOG_CHROME}. */
+export interface DialogChrome {
+    variant: DialogVariant;
+    title: string;
+    description: string;
+    icon: string;
+    dismissible: boolean;
+    closeLabel: string;
+    width: string;
+    showActions: boolean;
+    titleId: string;
+    descId: string;
+}
+/**
+ * Chrome params injected into `CmpDialogContainer`. Provided via the CDK `container` object
+ * form (`{ type, providers }`) rather than spread onto the `DialogConfig` — that avoids
+ * clobbering real config fields (e.g. `width`, which CDK also maps onto the overlay pane).
+ */
+export declare const CMP_DIALOG_CHROME: InjectionToken<DialogChrome>;
+/**
+ * Container used by `DialogService` via CDK `Dialog.open(content, { container })`. Extends
+ * the CDK dialog container (focus trap, focus capture/restore, portal outlet) and renders the
+ * shared dialog surface around the attached content. The opened content is attached into the
+ * surface's body via the `cdkPortalOutlet`; chrome params (title/variant/etc.) ride on the
+ * `DialogConfig`. Internal — not part of the public API.
+ *
+ * Host aria bindings are redeclared here (component host metadata is not inherited) and read
+ * from the injected `DialogConfig`, matching `CdkDialogContainer`'s own bindings.
+ */
+export declare class CmpDialogContainer extends CdkDialogContainer {
+    /** The dialog config (provided by CDK to the container injector); drives the aria host bindings. */
+    protected readonly config: DialogConfig<unknown, unknown, import("@angular/cdk/dialog").DialogContainer>;
+    /** Ref for the open dialog (provided by CDK to the container injector); closes on the ✕. */
+    protected readonly dialogRef: DialogRef<unknown, unknown>;
+    /** Chrome params supplied by `DialogService` via the container `providers`. */
+    protected readonly chrome: DialogChrome;
+    static ɵfac: i0.ɵɵFactoryDeclaration<CmpDialogContainer, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CmpDialogContainer, "cmp-dialog-container", never, {}, {}, never, never, true, never>;
+}

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

@@ -0,0 +1,9 @@
+/**
+ * Returns a unique `titleId` / `descId` pair for one dialog instance. Shared by the
+ * declarative `compsych-dialog` and the imperative `DialogService` so ids never collide
+ * when both kinds of dialog are open at once (e.g. GRO's `ModalService` delegating here).
+ */
+export declare function nextDialogIds(): {
+    titleId: string;
+    descId: string;
+};

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,4 +1,5 @@
-import { EventEmitter } from '@angular/core';
+import { EventEmitter, OnChanges } from '@angular/core';
+import { SafeHtml } from '@angular/platform-browser';
 import { ControlValueAccessor, NgControl } from '@angular/forms';
 import { ButtonVariant } from '../button/button';
 import * as i0 from "@angular/core";
@@ -29,9 +30,10 @@ export interface TextInputLabelButton {
  * validity once the field has been touched, and can also be set explicitly via
  * the `error` input for use outside of Angular forms.
  */
-export declare class TextInputComponent implements ControlValueAccessor {
+export declare class TextInputComponent implements ControlValueAccessor, OnChanges {
     private readonly _autoId;
     private readonly cdr;
+    private readonly sanitizer;
     private _onChange;
     private _onTouched;
     /** Injected when the component is used inside a reactive or template-driven form. */
@@ -97,10 +99,22 @@ export declare class TextInputComponent implements ControlValueAccessor {
     disabled: boolean;
     /** Makes the input read-only — focusable and copyable but not editable. Value is still submitted with the form. Supports boolean coercion. */
     readonly: boolean;
+    /** Lucide icon name rendered inside the input before the text (e.g. `'search'`). */
+    leadingIcon?: string;
+    /** Lucide icon name rendered inside the input after the text (e.g. `'eye'`). */
+    trailingIcon?: string;
+    /** Accessible label for the trailing icon button. Required when `trailingIconClick` is used. */
+    trailingIconAriaLabel: string;
+    protected leadingIconSvg: SafeHtml | null;
+    protected trailingIconSvg: SafeHtml | null;
+    ngOnChanges(): void;
+    private buildIconSvg;
     /** 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>;
+    /** Emitted when the trailing icon button is clicked. When observed, the trailing icon renders as an interactive button. */
+    readonly trailingIconClick: EventEmitter<void>;
     get inputId(): string;
     /** True when the bound FormControl is invalid and touched, or when `error` is explicitly set. */
     get hasError(): boolean;
@@ -119,7 +133,7 @@ export declare class TextInputComponent implements ControlValueAccessor {
     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; }; "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 ɵ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; }; "leadingIcon": { "alias": "leadingIcon"; "required": false; }; "trailingIcon": { "alias": "trailingIcon"; "required": false; }; "trailingIconAriaLabel": { "alias": "trailingIconAriaLabel"; "required": false; }; }, { "valueChange": "valueChange"; "labelButtonClick": "labelButtonClick"; "trailingIconClick": "trailingIconClick"; }, 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.10",
+  "version": "7.0.12",
   "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": "*"