@forgeroute/ui 0.3.9 → 0.3.11

package/types/forgeroute-ui.d.ts

@@ -1,6 +1,6 @@
 import * as i0 from "@angular/core";
 import { ChangeDetectorRef, InjectionToken, OnDestroy, OnInit, Signal, WritableSignal } from "@angular/core";
-import { AbstractControl, ControlValueAccessor, ValidationErrors, Validator } from "@angular/forms";
+import { AbstractControl, ControlValueAccessor, FormControl, ValidationErrors, Validator } from "@angular/forms";
 import { Observable, Subject } from "rxjs";
 import { HttpClient, HttpInterceptorFn } from "@angular/common/http";
 import { SafeHtml } from "@angular/platform-browser";
@@ -2056,12 +2056,34 @@ export declare class ImageRepositionComponent {
     "y": "yChange";
   }, never, never, true, never>;
 }
+/** One checkbox of a group (`options`). */
+export interface CheckboxOption {
+  value: string;
+  label: string;
+  /** Helper text under the option. */
+  description?: string;
+  disabled?: boolean;
+}
 export declare class CheckboxComponent implements ControlValueAccessor, Validator, UiFieldValidity {
   readonly label: import("@angular/core").InputSignal<string>;
   /** Accessible name for the native checkbox when there is no visible `label` (e.g. a table row's selector). */
   readonly ariaLabel: import("@angular/core").InputSignal<string>;
   readonly indeterminate: import("@angular/core").InputSignal<boolean>;
   readonly checked: import("@angular/core").ModelSignal<boolean>;
+  /**
+   * GROUP MODE (optional): with `options` the component renders a native `<fieldset>` with a `<legend>` and one checkbox per option,
+   * and its value (ngModel / forms) is the array of ticked option values (in option order). Without `options` it is the single
+   * boolean checkbox it always was. In group mode `label` / `checked` / `indeterminate` are not used; `required` means at least one
+   * option must be ticked ("<legend> is required.").
+   */
+  readonly options: import("@angular/core").InputSignal<CheckboxOption[]>;
+  /** Group heading (the fieldset's legend). */
+  readonly legend: import("@angular/core").InputSignal<string>;
+  /** Indent this checkbox (or the whole group) under its parent option, aligned with the parent's label. */
+  readonly indent: import("@angular/core").InputSignal<boolean>;
+  protected readonly groupMode: import("@angular/core").Signal<boolean>;
+  private readonly _selected;
+  protected isSelected(value: string): boolean;
   /** The box must be ticked. */
   readonly required: import("@angular/core").InputSignal<boolean>;
   /** Replaces the built-in "<label> is required." message. */
@@ -2094,11 +2116,15 @@ export declare class CheckboxComponent implements ControlValueAccessor, Validato
   protected readonly disabled: import("@angular/core").Signal<boolean>;
   private onChange;
   private onTouched;
-  writeValue(val: boolean): void;
-  registerOnChange(fn: (v: boolean) => void): void;
+  writeValue(val: boolean | string[] | null): void;
+  registerOnChange(fn: (v: boolean | string[]) => void): void;
   registerOnTouched(fn: () => void): void;
   setDisabledState(d: boolean): void;
   onToggle(event: Event): void;
+  /** The values keep the option order, and values that are not an option are dropped. */
+  private inOptionOrder;
+  /** Group mode: ticks / unticks one option; the form gets the full list of ticked values. */
+  onToggleOption(value: string, event: Event): void;
   static ɵfac: i0.ɵɵFactoryDeclaration<CheckboxComponent, never>;
   static ɵcmp: i0.ɵɵComponentDeclaration<CheckboxComponent, "ui-checkbox", never, {
     "label": {
@@ -2121,6 +2147,21 @@ export declare class CheckboxComponent implements ControlValueAccessor, Validato
       "required": false;
       "isSignal": true;
     };
+    "options": {
+      "alias": "options";
+      "required": false;
+      "isSignal": true;
+    };
+    "legend": {
+      "alias": "legend";
+      "required": false;
+      "isSignal": true;
+    };
+    "indent": {
+      "alias": "indent";
+      "required": false;
+      "isSignal": true;
+    };
     "required": {
       "alias": "required";
       "required": false;
@@ -2156,6 +2197,542 @@ export declare class CheckboxComponent implements ControlValueAccessor, Validato
     "invalidChange": "invalidChange";
   }, never, ["*"], true, never>;
 }
+/**
+ * On/off switch for settings: a label and optional hint on the left, the switch on the right
+ * (ControlValueAccessor with a boolean value; `[(checked)]` also works).
+ *
+ *   <ui-toggle label="SMS Enabled" hint="Allow sending texts" [(ngModel)]="form.sms" />
+ *   <ui-toggle label="Autoplay" [checked]="on()" (checkedChange)="on.set($event)" />
+ *   <ui-toggle ariaLabel="Enable feature" [(checked)]="on" />        <!-- no visible label -->
+ *
+ * Built on a native `<input type="checkbox" role="switch">`, so Space toggles it, it is focusable, and a screen reader
+ * announces it as a switch (on / off). The label and hint name and describe it. `disabled` (input or form control) dims it
+ * and blocks changes. On touch devices and phones the switch has a >= 44px hit area.
+ */
+export declare class ToggleComponent implements ControlValueAccessor {
+  /** Bold line on the left. */
+  readonly label: import("@angular/core").InputSignal<string>;
+  /** Grey helper text under the label. */
+  readonly hint: import("@angular/core").InputSignal<string>;
+  /** Accessible name when there is no visible `label`. */
+  readonly ariaLabel: import("@angular/core").InputSignal<string>;
+  /** Whether the switch is on. Two-way: `[(checked)]`. */
+  readonly checked: import("@angular/core").ModelSignal<boolean>;
+  /** Public so a host template can bind `[disabled]` (a protected input fails strict template type-checking, TS2445). */
+  readonly _disabledInput: import("@angular/core").InputSignal<boolean>;
+  private readonly _cvaDisabled;
+  protected readonly disabled: import("@angular/core").Signal<boolean>;
+  private readonly _id;
+  protected readonly _labelId: string;
+  protected readonly _hintId: string;
+  private _onChange;
+  private _onTouched;
+  writeValue(val: boolean): void;
+  registerOnChange(fn: (v: boolean) => void): void;
+  registerOnTouched(fn: () => void): void;
+  setDisabledState(d: boolean): void;
+  protected onTouched(): void;
+  protected onToggle(event: Event): void;
+  static ɵfac: i0.ɵɵFactoryDeclaration<ToggleComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<ToggleComponent, "ui-toggle", never, {
+    "label": {
+      "alias": "label";
+      "required": false;
+      "isSignal": true;
+    };
+    "hint": {
+      "alias": "hint";
+      "required": false;
+      "isSignal": true;
+    };
+    "ariaLabel": {
+      "alias": "ariaLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "checked": {
+      "alias": "checked";
+      "required": false;
+      "isSignal": true;
+    };
+    "_disabledInput": {
+      "alias": "disabled";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {
+    "checked": "checkedChange";
+  }, never, never, true, never>;
+}
+/** One weekday of the schedule. `open` / `close` are `HH:mm`; `open2` / `close2` are the optional second shift (split shift). */
+export interface BusinessHoursDay {
+  /** 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat' | 'sun' */
+  day: string;
+  /** 'Monday' … */
+  label: string;
+  enabled: boolean;
+  open: string;
+  close: string;
+  open2?: string;
+  close2?: string;
+}
+/** Mon–Fri 9:00 AM – 5:00 PM, Sat/Sun closed (their stored times are 9:00 AM – 12:00 PM, used when the day is switched on). */
+export declare function buildDefaultSchedule(): BusinessHoursDay[];
+/**
+ * Parses a stored schedule (`{"mon":{"enabled":true,"open":"09:00","close":"17:00"}, …}`, optionally with `open2` / `close2`)
+ * into a full Mon–Sun array. Missing days / fields fall back to the defaults; anything that is not valid JSON gives the defaults.
+ */
+export declare function parseBizHours(json: string | null | undefined): BusinessHoursDay[];
+/** The inverse of `parseBizHours`: `{ mon: { enabled, open, close[, open2, close2] }, … }` as a JSON string. */
+export declare function serializeBizHours(schedule: BusinessHoursDay[]): string;
+export type BusinessHoursStep = 15 | 30 | 60;
+/** `HH:mm` options for one day, every `step` minutes from 00:00 to the last slot of the day, labelled 12-hour ("9:00 AM") or 24-hour ("09:00"). */
+export declare function businessTimeOptions(step?: BusinessHoursStep, hour24?: boolean): {
+  value: string;
+  label: string;
+}[];
+/**
+ * Weekly business-hours editor: one row per weekday with a checkbox (open / closed) and "opens … to … closes" selects.
+ * ControlValueAccessor over `BusinessHoursDay[]` (`[(ngModel)]`, `formControl`, or `[(value)]`); the array is never mutated, each change emits a new array.
+ *
+ *   <ui-business-hours label="Schedule" [(ngModel)]="schedule" />
+ *   <ui-business-hours label="Schedule" [(ngModel)]="schedule" [step]="15" [hour24]="true" [allowSplitShifts]="true" [showCopyToWeekdays]="true" />
+ *
+ * Inputs
+ * - `label` (names the group), `hint`, `error` (host message, wins), `showErrors` (reveal built-in messages now; otherwise after the first change / blur), `disabled`.
+ * - `step` 15 | 30 | 60 minutes between time options (default 30). A stored time that is not on the grid is still offered, so it never shows blank.
+ * - `hour24` 24-hour labels ("17:00") instead of "5:00 PM".
+ * - `allowSplitShifts` adds an "Add shift" / "Remove shift" link per open day for a second shift (`open2` / `close2`), e.g. 9–12 and 1–5.
+ * - `showCopyToWeekdays` adds a "Copy Monday to weekdays" button that copies Monday's open flag and times (incl. the second shift) to Tue–Fri.
+ * - `required` at least one day must be open ("<label> needs at least one open day.").
+ *
+ * Validation (built in; `Validator` + `UiFieldValidity` + `invalidChange`, like the other inputs): for every open day the closing time must be after
+ * the opening time ("Monday: closing time must be after opening time."); with a second shift it must start after the first ends and end after it starts.
+ * Overnight ranges are not supported (a single `open < close` window per shift), the same as call routing.
+ *
+ * Accessibility: a `role="group"` named by `label`; every select has its own name ("Monday opens", "Monday closes", "Monday second shift opens" …);
+ * errors are announced (`role="alert"`) and linked with `aria-describedby`.
+ */
+export declare class BusinessHoursComponent implements ControlValueAccessor, Validator, UiFieldValidity {
+  /** The schedule (also what `ngModel` / `formControl` hold). Two-way: `[(value)]`. */
+  readonly value: import("@angular/core").ModelSignal<BusinessHoursDay[]>;
+  readonly label: import("@angular/core").InputSignal<string>;
+  readonly hint: import("@angular/core").InputSignal<string>;
+  /** Host-provided error message (wins over the built-in ones). */
+  readonly error: import("@angular/core").InputSignal<string>;
+  /** Reveal the built-in message now (e.g. after a failed Save click) instead of after the first change. */
+  readonly showErrors: import("@angular/core").InputSignal<boolean>;
+  /** At least one day must be open. */
+  readonly required: import("@angular/core").InputSignal<boolean>;
+  /** Minutes between time options. */
+  readonly step: import("@angular/core").InputSignal<BusinessHoursStep>;
+  /** 24-hour labels. */
+  readonly hour24: import("@angular/core").InputSignal<boolean>;
+  /** Allow a second shift per day (split shifts). */
+  readonly allowSplitShifts: import("@angular/core").InputSignal<boolean>;
+  /** Show "Copy Monday to weekdays". */
+  readonly showCopyToWeekdays: import("@angular/core").InputSignal<boolean>;
+  /** Public so a host template can bind `[disabled]` (a protected input fails strict template type-checking, TS2445). */
+  readonly _disabledInput: import("@angular/core").InputSignal<boolean>;
+  private readonly _cvaDisabled;
+  protected readonly disabled: import("@angular/core").Signal<boolean>;
+  protected readonly _descId: string;
+  private readonly _reveal;
+  private readonly _issue;
+  /** True while a built-in rule is broken or the host passed an `[error]`. */
+  readonly invalid: import("@angular/core").Signal<boolean>;
+  /** Message of the first broken built-in rule ('' when valid), shown or not. */
+  readonly errorMessage: import("@angular/core").Signal<string>;
+  /** Emits whenever the field becomes invalid / valid. */
+  readonly invalidChange: import("@angular/core").OutputEmitterRef<boolean>;
+  protected readonly _activeError: import("@angular/core").Signal<string>;
+  private _onValidatorChange;
+  private readonly _options;
+  constructor();
+  /** Re-run the form control's validation when a rule input (`required`, `allowSplitShifts`) changes. */
+  ngOnChanges(): void;
+  validate(control: AbstractControl): ValidationErrors | null;
+  registerOnValidatorChange(fn: () => void): void;
+  private _onChange;
+  private _onTouched;
+  writeValue(val: BusinessHoursDay[] | null): void;
+  registerOnChange(fn: (v: BusinessHoursDay[]) => void): void;
+  registerOnTouched(fn: () => void): void;
+  setDisabledState(d: boolean): void;
+  /** The grid options plus the stored value when it is not on the grid (so a saved 09:15 never renders blank). */
+  protected optionsFor(current: string): {
+    value: string;
+    label: string;
+  }[];
+  protected hasSecondShift(d: BusinessHoursDay): boolean;
+  /** A second shift needs room: the first must end at least one hour before the last slot of the day. */
+  protected canAddShift(d: BusinessHoursDay): boolean;
+  protected update(day: string, patch: Partial<BusinessHoursDay>): void;
+  protected addShift(day: string): void;
+  protected removeShift(day: string): void;
+  protected copyMondayToWeekdays(): void;
+  private _emit;
+  private _check;
+  static ɵfac: i0.ɵɵFactoryDeclaration<BusinessHoursComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<BusinessHoursComponent, "ui-business-hours", never, {
+    "value": {
+      "alias": "value";
+      "required": false;
+      "isSignal": true;
+    };
+    "label": {
+      "alias": "label";
+      "required": false;
+      "isSignal": true;
+    };
+    "hint": {
+      "alias": "hint";
+      "required": false;
+      "isSignal": true;
+    };
+    "error": {
+      "alias": "error";
+      "required": false;
+      "isSignal": true;
+    };
+    "showErrors": {
+      "alias": "showErrors";
+      "required": false;
+      "isSignal": true;
+    };
+    "required": {
+      "alias": "required";
+      "required": false;
+      "isSignal": true;
+    };
+    "step": {
+      "alias": "step";
+      "required": false;
+      "isSignal": true;
+    };
+    "hour24": {
+      "alias": "hour24";
+      "required": false;
+      "isSignal": true;
+    };
+    "allowSplitShifts": {
+      "alias": "allowSplitShifts";
+      "required": false;
+      "isSignal": true;
+    };
+    "showCopyToWeekdays": {
+      "alias": "showCopyToWeekdays";
+      "required": false;
+      "isSignal": true;
+    };
+    "_disabledInput": {
+      "alias": "disabled";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {
+    "value": "valueChange";
+    "invalidChange": "invalidChange";
+  }, never, never, true, never>;
+}
+export interface RadioOption {
+  value: string;
+  label: string;
+  description?: string;
+  disabled?: boolean;
+}
+/**
+ * Group of native radio buttons inside a `<fieldset>` (+ `<legend>` = `label`), a ControlValueAccessor (string value, `''`
+ * = nothing selected). Arrow keys move and select natively because all radios share one `name`.
+ * Built-in validation: `required` -> "<label> is required."; a non-empty value that is not one of the `options` ->
+ * "Select a valid option." (not checked while `options` is empty). Disabled groups are never invalid.
+ *
+ * Validity API (same on every ui input): Angular `Validator`, signals `invalid` + `errorMessage`, `invalidChange` output,
+ * provides `UiFieldValidity`. Messages show after the group lost focus or while `[showErrors]="true"`; a host `[error]` wins.
+ */
+export declare class RadioGroupComponent implements ControlValueAccessor, Validator, UiFieldValidity {
+  readonly label: import("@angular/core").InputSignal<string>;
+  readonly options: import("@angular/core").InputSignal<RadioOption[]>;
+  readonly required: import("@angular/core").InputSignal<boolean>;
+  readonly hint: import("@angular/core").InputSignal<string>;
+  readonly error: import("@angular/core").InputSignal<string>;
+  /** Reveal the built-in error messages now (e.g. after a failed Save click), without waiting for blur. */
+  readonly showErrors: import("@angular/core").InputSignal<boolean>;
+  readonly orientation: import("@angular/core").InputSignal<"vertical" | "horizontal">;
+  /** Native `name` shared by the radios; a unique one is generated when omitted. */
+  readonly name: import("@angular/core").InputSignal<string>;
+  protected readonly _disabledInput: import("@angular/core").InputSignal<boolean>;
+  private readonly _cvaDisabled;
+  protected readonly disabled: import("@angular/core").Signal<boolean>;
+  private readonly _generatedName;
+  protected get _name(): string;
+  protected readonly _descId: string;
+  protected readonly _value: import("@angular/core").WritableSignal<string>;
+  private readonly _reveal;
+  private readonly _issue;
+  /** True while the value breaks a built-in rule or the host passed an `[error]`. */
+  readonly invalid: import("@angular/core").Signal<boolean>;
+  /** Message of the first broken built-in rule ('' when valid), shown or not. */
+  readonly errorMessage: import("@angular/core").Signal<string>;
+  /** Emits whenever the field becomes invalid / valid. */
+  readonly invalidChange: import("@angular/core").OutputEmitterRef<boolean>;
+  protected readonly _activeError: import("@angular/core").Signal<string>;
+  private _onValidatorChange;
+  constructor();
+  /** Re-run the form control's validation when a rule input (required, options) changes. */
+  ngOnChanges(): void;
+  validate(control: AbstractControl): ValidationErrors | null;
+  registerOnValidatorChange(fn: () => void): void;
+  private _onChange;
+  private _onTouched;
+  writeValue(val: string): void;
+  registerOnChange(fn: (v: string) => void): void;
+  registerOnTouched(fn: () => void): void;
+  setDisabledState(d: boolean): void;
+  protected onSelect(value: string): void;
+  /** Touched once focus leaves the whole group (moving between its radios does not count). */
+  protected onFocusOut(event: FocusEvent): void;
+  private _check;
+  static ɵfac: i0.ɵɵFactoryDeclaration<RadioGroupComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<RadioGroupComponent, "ui-radio-group", never, {
+    "label": {
+      "alias": "label";
+      "required": false;
+      "isSignal": true;
+    };
+    "options": {
+      "alias": "options";
+      "required": false;
+      "isSignal": true;
+    };
+    "required": {
+      "alias": "required";
+      "required": false;
+      "isSignal": true;
+    };
+    "hint": {
+      "alias": "hint";
+      "required": false;
+      "isSignal": true;
+    };
+    "error": {
+      "alias": "error";
+      "required": false;
+      "isSignal": true;
+    };
+    "showErrors": {
+      "alias": "showErrors";
+      "required": false;
+      "isSignal": true;
+    };
+    "orientation": {
+      "alias": "orientation";
+      "required": false;
+      "isSignal": true;
+    };
+    "name": {
+      "alias": "name";
+      "required": false;
+      "isSignal": true;
+    };
+    "_disabledInput": {
+      "alias": "disabled";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {
+    "invalidChange": "invalidChange";
+  }, never, never, true, never>;
+}
+/** One phone number the host found for sale. */
+export interface PhoneNumberOption {
+  /** E.164 number, e.g. '+15125550100'. */
+  phoneNumber: string;
+  /** What the user sees, e.g. '(512) 555-0100'. */
+  friendlyName: string;
+  /** City / state label shown as a badge, e.g. 'Austin, TX'. */
+  region: string | null;
+}
+/** What the host's `search` function receives: exactly one of the two keys. */
+export interface PhoneNumberSearchCriteria {
+  postalCode?: string;
+  areaCode?: string;
+}
+/** What `selected` emits: the chosen number plus the criteria that found it. */
+export type PhoneNumberSelection = PhoneNumberOption & PhoneNumberSearchCriteria;
+export type PhoneNumberSearchMode = 'zip' | 'area-code';
+export declare const PHONE_NUMBER_ZIP_LENGTH = 5;
+export declare const PHONE_NUMBER_AREA_CODE_LENGTH = 3;
+/** Keeps only digits and cuts to `max` ("78701-1234" -> "78701"). */
+export declare function digitsOnly(value: string | null | undefined, max: number): string;
+/**
+ * Side panel that walks the user through finding and choosing a phone number to buy. The HOST does the searching (the
+ * library owns no HTTP and knows nothing about the phone provider): it passes a `search` function that returns the
+ * numbers for a ZIP code or an area code.
+ *
+ *   <ui-phone-number-picker
+ *     [open]="showPicker()"
+ *     defaultPostalCode="78701"
+ *     costNotice="Each number costs about $1.00/month."
+ *     [search]="searchNumbers"
+ *     (selected)="buy($event)"
+ *     (closed)="showPicker.set(false)" />
+ *
+ *   searchNumbers = (c: PhoneNumberSearchCriteria) => this.api.get<PhoneNumberOption[]>('/phone-numbers/available', c);
+ *
+ * Inputs: `open`, `title` ('Get a Phone Number'), `subtitle`, `defaultPostalCode` (prefilled ZIP, may be empty),
+ * `defaultMode` ('zip' | 'area-code'), `allowAreaCode` (true: the user can switch to an area code search), `search`
+ * (required), `costNotice` (warning shown on steps 1 and 3), `confirmLabel` ('Get this number'), `maxResults` (5: caps what is shown).
+ * Outputs: `selected` (PhoneNumberSelection, only from the final confirm button) and `closed`.
+ *
+ * Flow (three steps, nothing is ever searched or bought without a click):
+ *  1. Confirm location - ZIP code (5 digits) or area code (3 digits), prefilled from `defaultPostalCode`. The primary button
+ *     "Confirm ZIP code and search" is disabled until the value is complete; Enter does the same. Non-digits are ignored while
+ *     typing, a pasted ZIP+4 keeps its first 5 digits.
+ *  2. Results - `search(criteria)` runs ONCE per confirm; a newer search (or closing) drops the older response. Skeleton while
+ *     loading, an empty state, or an error with Retry. Picking a row only moves on to step 3.
+ *  3. Confirm number - "You chose ...". Only the final button emits `selected`, then `closed`.
+ * Every time `open` becomes true the panel starts again at step 1 with the defaults; closing discards everything.
+ * `defaultPostalCode` may arrive after the panel opened (the host loads it asynchronously): while the panel is on step 1 in ZIP
+ * mode and the user has NOT typed or pasted in the ZIP field (clearing it counts as an edit), a non-empty default fills the field;
+ * typed input is never overwritten, an empty default is ignored, and a default that arrives on step 2 or 3 is applied when the user
+ * returns to step 1 only if the field is still untouched.
+ * The final confirm emits `selected` at most once per opening (double clicks / repeated Enter are ignored and the button is disabled
+ * after the first click). The panel emits `closed` right after `selected`, so the host closes it; reopening re-enables the button.
+ *
+ * Accessibility: labelled fields with the library's inline errors, focus moves to the first control of each step (a text
+ * field is not focused on touch devices so no keyboard pops up), a visually hidden polite live region announces searching,
+ * result counts, errors and step changes, Escape closes the panel even from inside a field, 44px touch targets come from the
+ * shared components.
+ */
+export declare class PhoneNumberPickerComponent {
+  readonly open: import("@angular/core").InputSignal<boolean>;
+  readonly title: import("@angular/core").InputSignal<string>;
+  readonly subtitle: import("@angular/core").InputSignal<string>;
+  readonly defaultPostalCode: import("@angular/core").InputSignal<string>;
+  readonly defaultMode: import("@angular/core").InputSignal<PhoneNumberSearchMode>;
+  readonly allowAreaCode: import("@angular/core").InputSignal<boolean>;
+  /** Host-supplied search. Called once per confirm; the library never fetches by itself. */
+  readonly search: import("@angular/core").InputSignal<(criteria: PhoneNumberSearchCriteria) => Observable<PhoneNumberOption[]>>;
+  readonly costNotice: import("@angular/core").InputSignal<string>;
+  readonly confirmLabel: import("@angular/core").InputSignal<string>;
+  readonly maxResults: import("@angular/core").InputSignal<number>;
+  readonly closed: import("@angular/core").OutputEmitterRef<void>;
+  readonly selected: import("@angular/core").OutputEmitterRef<PhoneNumberSelection>;
+  protected readonly modeOptions: RadioOption[];
+  protected readonly skeletonRows: number[];
+  protected readonly modeCtl: FormControl<string>;
+  protected readonly zipCtl: FormControl<string>;
+  protected readonly areaCtl: FormControl<string>;
+  protected readonly step: import("@angular/core").WritableSignal<1 | 2 | 3>;
+  protected readonly mode: import("@angular/core").WritableSignal<PhoneNumberSearchMode>;
+  private readonly _zip;
+  private readonly _area;
+  protected readonly touched: import("@angular/core").WritableSignal<boolean>;
+  /** True once the user typed / pasted in the ZIP field this opening: a late default never overwrites it. */
+  private readonly _zipEdited;
+  /** True once the final confirm emitted `selected` this opening: further confirms are ignored. */
+  protected readonly confirmed: import("@angular/core").WritableSignal<boolean>;
+  protected readonly loading: import("@angular/core").WritableSignal<boolean>;
+  protected readonly searchFailed: import("@angular/core").WritableSignal<boolean>;
+  private readonly _results;
+  private readonly _criteria;
+  protected readonly chosen: import("@angular/core").WritableSignal<PhoneNumberOption | null>;
+  private readonly _value;
+  private readonly _length;
+  protected readonly valid: import("@angular/core").Signal<boolean>;
+  private readonly _fieldName;
+  /** Own "wrong length" message (empty is left to the input's built-in "is required"); only once the field was touched. */
+  protected readonly fieldError: import("@angular/core").Signal<string>;
+  protected readonly visibleResults: import("@angular/core").Signal<PhoneNumberOption[]>;
+  protected readonly primaryLabel: import("@angular/core").Signal<string>;
+  protected readonly changeLabel: import("@angular/core").Signal<"Change area code" | "Change ZIP code">;
+  protected readonly emptyTitle: import("@angular/core").Signal<string>;
+  protected readonly criteriaText: import("@angular/core").Signal<string>;
+  protected readonly announcement: import("@angular/core").Signal<string>;
+  private readonly _destroyRef;
+  private readonly _injector;
+  private readonly _el;
+  private _searchSub;
+  constructor();
+  protected onPrimary(): void;
+  protected onEnter(event: Event): void;
+  /** Typing a non-digit is blocked before it reaches the field. */
+  protected onBeforeInput(event: Event): void;
+  /** A pasted ZIP+4 / formatted text keeps its first 5 (or 3) digits and replaces the field's text. */
+  protected onPaste(event: Event): void;
+  protected submit(): void;
+  protected retry(): void;
+  protected choose(option: PhoneNumberOption): void;
+  protected changeLocation(): void;
+  protected backToResults(): void;
+  protected confirm(): void;
+  protected close(): void;
+  private _run;
+  private _abort;
+  private _reset;
+  /** A user edit: sanitise and write back into the field when something was stripped. */
+  private _typed;
+  private _write;
+  /** Moves focus to the first control of the step that was just shown. */
+  private _focusStep;
+  static ɵfac: i0.ɵɵFactoryDeclaration<PhoneNumberPickerComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<PhoneNumberPickerComponent, "ui-phone-number-picker", never, {
+    "open": {
+      "alias": "open";
+      "required": false;
+      "isSignal": true;
+    };
+    "title": {
+      "alias": "title";
+      "required": false;
+      "isSignal": true;
+    };
+    "subtitle": {
+      "alias": "subtitle";
+      "required": false;
+      "isSignal": true;
+    };
+    "defaultPostalCode": {
+      "alias": "defaultPostalCode";
+      "required": false;
+      "isSignal": true;
+    };
+    "defaultMode": {
+      "alias": "defaultMode";
+      "required": false;
+      "isSignal": true;
+    };
+    "allowAreaCode": {
+      "alias": "allowAreaCode";
+      "required": false;
+      "isSignal": true;
+    };
+    "search": {
+      "alias": "search";
+      "required": true;
+      "isSignal": true;
+    };
+    "costNotice": {
+      "alias": "costNotice";
+      "required": false;
+      "isSignal": true;
+    };
+    "confirmLabel": {
+      "alias": "confirmLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "maxResults": {
+      "alias": "maxResults";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {
+    "closed": "closed";
+    "selected": "selected";
+  }, never, never, true, never>;
+}
 export declare class ButtonComponent {
   readonly variant: import("@angular/core").InputSignal<"primary" | "secondary" | "danger" | "warning" | "link" | "ghost" | "tab" | "icon" | "icon-danger">;
   /** Renders an anchor to this route instead of a button (use with `variant="link"` for an inline text link). `['/settings']` or `'/settings'`. */
@@ -2955,120 +3532,11 @@ export declare class ComboboxComponent<T = unknown> implements ControlValueAcces
       "isSignal": true;
     };
   }, {
-    "searchChange": "searchChange";
-    "valueChange": "valueChange";
-    "invalidChange": "invalidChange";
-    "focused": "focused";
-    "blurred": "blurred";
-  }, never, never, true, never>;
-}
-export interface RadioOption {
-  value: string;
-  label: string;
-  description?: string;
-  disabled?: boolean;
-}
-/**
- * Group of native radio buttons inside a `<fieldset>` (+ `<legend>` = `label`), a ControlValueAccessor (string value, `''`
- * = nothing selected). Arrow keys move and select natively because all radios share one `name`.
- * Built-in validation: `required` -> "<label> is required."; a non-empty value that is not one of the `options` ->
- * "Select a valid option." (not checked while `options` is empty). Disabled groups are never invalid.
- *
- * Validity API (same on every ui input): Angular `Validator`, signals `invalid` + `errorMessage`, `invalidChange` output,
- * provides `UiFieldValidity`. Messages show after the group lost focus or while `[showErrors]="true"`; a host `[error]` wins.
- */
-export declare class RadioGroupComponent implements ControlValueAccessor, Validator, UiFieldValidity {
-  readonly label: import("@angular/core").InputSignal<string>;
-  readonly options: import("@angular/core").InputSignal<RadioOption[]>;
-  readonly required: import("@angular/core").InputSignal<boolean>;
-  readonly hint: import("@angular/core").InputSignal<string>;
-  readonly error: import("@angular/core").InputSignal<string>;
-  /** Reveal the built-in error messages now (e.g. after a failed Save click), without waiting for blur. */
-  readonly showErrors: import("@angular/core").InputSignal<boolean>;
-  readonly orientation: import("@angular/core").InputSignal<"vertical" | "horizontal">;
-  /** Native `name` shared by the radios; a unique one is generated when omitted. */
-  readonly name: import("@angular/core").InputSignal<string>;
-  protected readonly _disabledInput: import("@angular/core").InputSignal<boolean>;
-  private readonly _cvaDisabled;
-  protected readonly disabled: import("@angular/core").Signal<boolean>;
-  private readonly _generatedName;
-  protected get _name(): string;
-  protected readonly _descId: string;
-  protected readonly _value: import("@angular/core").WritableSignal<string>;
-  private readonly _reveal;
-  private readonly _issue;
-  /** True while the value breaks a built-in rule or the host passed an `[error]`. */
-  readonly invalid: import("@angular/core").Signal<boolean>;
-  /** Message of the first broken built-in rule ('' when valid), shown or not. */
-  readonly errorMessage: import("@angular/core").Signal<string>;
-  /** Emits whenever the field becomes invalid / valid. */
-  readonly invalidChange: import("@angular/core").OutputEmitterRef<boolean>;
-  protected readonly _activeError: import("@angular/core").Signal<string>;
-  private _onValidatorChange;
-  constructor();
-  /** Re-run the form control's validation when a rule input (required, options) changes. */
-  ngOnChanges(): void;
-  validate(control: AbstractControl): ValidationErrors | null;
-  registerOnValidatorChange(fn: () => void): void;
-  private _onChange;
-  private _onTouched;
-  writeValue(val: string): void;
-  registerOnChange(fn: (v: string) => void): void;
-  registerOnTouched(fn: () => void): void;
-  setDisabledState(d: boolean): void;
-  protected onSelect(value: string): void;
-  /** Touched once focus leaves the whole group (moving between its radios does not count). */
-  protected onFocusOut(event: FocusEvent): void;
-  private _check;
-  static ɵfac: i0.ɵɵFactoryDeclaration<RadioGroupComponent, never>;
-  static ɵcmp: i0.ɵɵComponentDeclaration<RadioGroupComponent, "ui-radio-group", never, {
-    "label": {
-      "alias": "label";
-      "required": false;
-      "isSignal": true;
-    };
-    "options": {
-      "alias": "options";
-      "required": false;
-      "isSignal": true;
-    };
-    "required": {
-      "alias": "required";
-      "required": false;
-      "isSignal": true;
-    };
-    "hint": {
-      "alias": "hint";
-      "required": false;
-      "isSignal": true;
-    };
-    "error": {
-      "alias": "error";
-      "required": false;
-      "isSignal": true;
-    };
-    "showErrors": {
-      "alias": "showErrors";
-      "required": false;
-      "isSignal": true;
-    };
-    "orientation": {
-      "alias": "orientation";
-      "required": false;
-      "isSignal": true;
-    };
-    "name": {
-      "alias": "name";
-      "required": false;
-      "isSignal": true;
-    };
-    "_disabledInput": {
-      "alias": "disabled";
-      "required": false;
-      "isSignal": true;
-    };
-  }, {
+    "searchChange": "searchChange";
+    "valueChange": "valueChange";
     "invalidChange": "invalidChange";
+    "focused": "focused";
+    "blurred": "blurred";
   }, never, never, true, never>;
 }
 /**
@@ -3273,8 +3741,27 @@ export interface DocumentPreviewTarget {
   title: string;
   fileName: string | null;
 }
-/** Opens a document for preview (the host knows its own route / viewer). Called synchronously inside the click. */
-export type DocumentPreviewHandler = (doc: DocumentPreviewTarget) => void;
+/** The recipient the panel currently holds (as the panel's `contactId` / `contactName` / `contactEmail` / `contactPhone` inputs). */
+export interface DocumentPreviewContact {
+  id: string;
+  name: string;
+  email: string;
+  phone: string;
+}
+/**
+ * Second argument of `documentPreview`: who the document is being sent to, so the host can preview it filled for that recipient.
+ * `contact` is `null` when the panel has no recipient (all four contact inputs blank); `sendContext` is the panel's `sendContext` input
+ * as given (not filtered by `documentContextTypes`) or `null`.
+ */
+export interface DocumentPreviewContext {
+  contact: DocumentPreviewContact | null;
+  sendContext: SendContext | null;
+}
+/**
+ * Opens a document for preview (the host knows its own route / viewer). Called synchronously inside the click. The second argument
+ * is new and optional to use: a handler that only declares `doc` keeps working.
+ */
+export type DocumentPreviewHandler = (doc: DocumentPreviewTarget, context: DocumentPreviewContext) => void;
 /**
  * Turns on the "Expiry and Reminders" settings of the document section and sets their starting values (the keys you leave out start at
  * the defaults below). `null` / not passed = the settings are not shown and nothing about them is sent.
@@ -3402,6 +3889,10 @@ export declare class DocumentSendOptionsComponent implements UiFieldValidity {
    * (`window.open` after an await is blocked as a popup in Safari).
    */
   readonly documentPreview: import("@angular/core").InputSignal<DocumentPreviewHandler | null>;
+  /** The recipient passed to `documentPreview` as `context.contact` (the send panel sets it from its contact inputs). `null` = none. */
+  readonly previewContact: import("@angular/core").InputSignal<DocumentPreviewContact | null>;
+  /** The send context passed to `documentPreview` as `context.sendContext` (the send panel sets it from its `sendContext`). `null` = none. */
+  readonly previewSendContext: import("@angular/core").InputSignal<SendContext | null>;
   /**
    * Turns on the signer logic (`documentSigners` of the panel): a document's customer roles (from its row's `signerRoles`, or the config's
    * `resolveRoles`), informational documents (no signature fields), the one-signer DocuSign rule and the read-only countersign rule.
@@ -3552,6 +4043,16 @@ export declare class DocumentSendOptionsComponent implements UiFieldValidity {
       "required": false;
       "isSignal": true;
     };
+    "previewContact": {
+      "alias": "previewContact";
+      "required": false;
+      "isSignal": true;
+    };
+    "previewSendContext": {
+      "alias": "previewSendContext";
+      "required": false;
+      "isSignal": true;
+    };
     "signers": {
       "alias": "signers";
       "required": false;
@@ -3829,6 +4330,8 @@ declare class SendEmailComponent implements OnInit {
   readonly docuSignConnected: import("@angular/core").InputSignal<boolean>;
   /** "Preview Document" button(s) in the Documents section call this; `null` hides them. */
   readonly documentPreview: import("@angular/core").InputSignal<DocumentPreviewHandler | null>;
+  /** The recipient handed to `documentPreview` (second argument): the panel's contact inputs, `null` while all four are blank. */
+  readonly previewContact: import("@angular/core").Signal<DocumentPreviewContact | null>;
   /**
    * Turns on the video settings (Playback, Call-to-Action, Hide reactions, Watch Preview, Remove Video) once a video is attached, starting
    * from these defaults, and makes the video link carry them. `null` (default) = the attached video's plain share link is inserted, as before.
@@ -4214,6 +4717,8 @@ declare class SendTextComponent implements OnInit {
   readonly documentSigningOptions: import("@angular/core").InputSignal<DocumentSigningOptions | null | undefined>;
   /** "Preview Document" button(s) in the Documents section call this; `null` hides them. */
   readonly documentPreview: import("@angular/core").InputSignal<DocumentPreviewHandler | null>;
+  /** The recipient handed to `documentPreview` (second argument): the panel's contact inputs, `null` while all four are blank. */
+  readonly previewContact: import("@angular/core").Signal<DocumentPreviewContact | null>;
   /**
    * Turns on the video settings (Playback, Call-to-Action, Hide reactions, Watch Preview, Remove Video) once a video is attached, starting
    * from these defaults, and makes the video link carry them. `null` (default) = the plain share link is inserted, as before.
@@ -5347,47 +5852,133 @@ export declare class TextareaInputComponent implements ControlValueAccessor, Val
     "invalidChange": "invalidChange";
   }, never, never, true, never>;
 }
+/** Why a chosen file was refused. */
+export type FileRejectReason = 'type' | 'size';
+/** A refused file with the message the field shows (also emitted by `(fileRejected)`). */
+export interface FileRejection {
+  file: File;
+  reason: FileRejectReason;
+  message: string;
+}
+/** "1.5 MB", "820 KB", "12 B" (binary units, one decimal for MB and above). */
+export declare function formatFileSize(bytes: number): string;
+/** True when `file` matches one token of a native `accept` string (`.pdf`, `image/png`, `image/*`). Empty `accept` accepts everything. */
+export declare function fileMatchesAccept(file: File, accept: string): boolean;
+/** "PDF", "PNG, JPEG and WEBP" from an `accept` string, for the default type message. */
+export declare function acceptLabel(accept: string): string;
 /**
  * File picker styled like the other `ui-*` inputs (label, hint, required marker, error, disabled).
  * Value (ngModel / forms) is `File | null`, or `File[]` when `multiple` is set.
  *
  * Set `[showField]="false"` for a picker with no visible field and call `open()` from the host
  * (e.g. an "Attach document" menu action). `(filesSelected)` fires in both modes.
+ *
+ * Built in (all opt-in, nothing changes unless an input is set):
+ *  - `clearable`: a Remove button next to the chosen file; `(fileRemoved)` fires after it clears the selection.
+ *  - `accept` is enforced on picked AND dropped files (`enforceAccept`, on by default), `maxSize` (bytes) refuses bigger
+ *    files. A refused file is never added to the value: the field shows the message (`typeMessage` / `sizeMessage`
+ *    override the wording, also in picker-only mode), and `(fileRejected)` emits `{ file, reason, message }`.
+ *  - `required` is a real rule: Angular `Validator` + `UiFieldValidity` (`invalid`, `errorMessage`, `invalidChange`,
+ *    `showErrors`), like the other inputs. The message shows after the field was used or `[showErrors]="true"`.
+ *  - `dropzone`: the field accepts files dropped on it.
+ *  - `showDetails`: file size after the name; `preview`: a thumbnail of a chosen image.
+ *  - `loading` (+ `loadingText`): a `ui-skeleton` replaces the file name while the host works on the file (scanning, uploading).
  */
-export declare class FileInputComponent implements ControlValueAccessor {
+export declare class FileInputComponent implements ControlValueAccessor, Validator, UiFieldValidity {
   readonly label: import("@angular/core").InputSignal<string>;
   /** Accessible name for a field with no visible label. */
   readonly ariaLabel: import("@angular/core").InputSignal<string>;
   readonly placeholder: import("@angular/core").InputSignal<string>;
   readonly buttonLabel: import("@angular/core").InputSignal<string>;
-  /** Native `accept` string, e.g. ".pdf,.png". */
+  /** Native `accept` string, e.g. ".pdf,.png". Also enforced on picked and dropped files unless `enforceAccept` is false. */
   readonly accept: import("@angular/core").InputSignal<string>;
   readonly multiple: import("@angular/core").InputSignal<boolean>;
+  /** A file must be chosen (a real rule: Validator + UiFieldValidity, message shown after use or `showErrors`). */
   readonly required: import("@angular/core").InputSignal<boolean>;
   readonly hint: import("@angular/core").InputSignal<string>;
+  /** Host-provided error message (wins over the built-in ones). Shown under a visible field only. */
   readonly error: import("@angular/core").InputSignal<string>;
   /** false = no visible field; open the picker from the host with `open()`. */
   readonly showField: import("@angular/core").InputSignal<boolean>;
-  /** Emits the chosen files (one or many) each time the user picks. */
+  /** Reveal the built-in "required" message now (e.g. after a failed Save click). */
+  readonly showErrors: import("@angular/core").InputSignal<boolean>;
+  /** Show a Remove button next to the chosen file. */
+  readonly clearable: import("@angular/core").InputSignal<boolean>;
+  readonly removeLabel: import("@angular/core").InputSignal<string>;
+  /** Largest allowed file in bytes; a bigger file is refused. null = no limit. */
+  readonly maxSize: import("@angular/core").InputSignal<number | null>;
+  /** Refuse files that do not match `accept` (picked or dropped). */
+  readonly enforceAccept: import("@angular/core").InputSignal<boolean>;
+  /** Replaces the built-in "Only PDF files are allowed." message. */
+  readonly typeMessage: import("@angular/core").InputSignal<string>;
+  /** Replaces the built-in "The file must be 5 MB or smaller." message. */
+  readonly sizeMessage: import("@angular/core").InputSignal<string>;
+  /** The field accepts files dropped on it. */
+  readonly dropzone: import("@angular/core").InputSignal<boolean>;
+  /** Show the file size after the name. */
+  readonly showDetails: import("@angular/core").InputSignal<boolean>;
+  /** Show a thumbnail when the chosen file is an image. */
+  readonly preview: import("@angular/core").InputSignal<boolean>;
+  /** The host is working on the file (scanning, uploading): a skeleton replaces the name and Browse / Remove are disabled. */
+  readonly loading: import("@angular/core").InputSignal<boolean>;
+  /** Screen-reader text while `loading` (default "Processing…"). */
+  readonly loadingText: import("@angular/core").InputSignal<string>;
+  /** Emits the chosen (accepted) files (one or many) each time the user picks or drops. */
   readonly filesSelected: import("@angular/core").OutputEmitterRef<File[]>;
+  /** A picked or dropped file was refused (wrong type or too big). */
+  readonly fileRejected: import("@angular/core").OutputEmitterRef<FileRejection>;
+  /** The Remove button cleared the selection. */
+  readonly fileRemoved: import("@angular/core").OutputEmitterRef<void>;
+  /** Emits whenever the field becomes invalid / valid. */
+  readonly invalidChange: import("@angular/core").OutputEmitterRef<boolean>;
   protected readonly _disabledInput: import("@angular/core").InputSignal<boolean>;
   private readonly _cvaDisabled;
   protected readonly disabled: import("@angular/core").Signal<boolean>;
   protected readonly _files: import("@angular/core").WritableSignal<File[]>;
   protected readonly _inputId: string;
   private readonly fileEl;
+  protected readonly _dragging: import("@angular/core").WritableSignal<boolean>;
+  /** Message of the last refused file ('' when the last pick was fine); shown in every mode. */
+  private readonly _rejection;
+  private readonly _reveal;
+  private readonly _issue;
+  /** True while a required field is empty, the last pick was refused, or the host passed an `[error]`. */
+  readonly invalid: import("@angular/core").Signal<boolean>;
+  /** Message of the first broken built-in rule ('' when valid), shown or not. */
+  readonly errorMessage: import("@angular/core").Signal<string>;
+  /** What the field shows: the host error (visible field only), a refused file, or the revealed built-in message. */
+  protected readonly _shownError: import("@angular/core").Signal<string>;
   protected readonly summary: import("@angular/core").Signal<string>;
+  /** Object URL of the chosen image (single file) while `preview` is on. */
+  protected readonly _previewUrl: import("@angular/core").WritableSignal<string | null>;
+  private _urlToRevoke;
+  private _onValidatorChange;
   protected _onChange: (_: File | File[] | null) => void;
   protected _onTouched: () => void;
+  constructor();
+  private revokePreview;
+  /** Re-run the form control's validation when a rule input changes. */
+  ngOnChanges(): void;
+  validate(_control: AbstractControl): ValidationErrors | null;
+  registerOnValidatorChange(fn: () => void): void;
   /** Opens the native file dialog. */
   open(): void;
-  /** Clears the selection (and the native input, so the same file can be picked again). */
+  /** Clears the selection (and the native input, so the same file can be picked again) and any "refused file" message. */
   clear(): void;
+  /** The Remove button: clears, then tells the host. */
+  protected remove(): void;
   writeValue(val: File | File[] | null): void;
   registerOnChange(fn: (v: File | File[] | null) => void): void;
   registerOnTouched(fn: () => void): void;
   setDisabledState(d: boolean): void;
+  protected _touch(): void;
   protected onChange(event: Event): void;
+  protected onDragOver(event: DragEvent): void;
+  protected onDragLeave(event: DragEvent): void;
+  protected onDrop(event: DragEvent): void;
+  private rejectionFor;
+  /** Applies picked / dropped files: refused ones raise the message and `fileRejected`, accepted ones become the value. */
+  private accept$;
   static ɵfac: i0.ɵɵFactoryDeclaration<FileInputComponent, never>;
   static ɵcmp: i0.ɵɵComponentDeclaration<FileInputComponent, "ui-file-input", never, {
     "label": {
@@ -5440,6 +6031,66 @@ export declare class FileInputComponent implements ControlValueAccessor {
       "required": false;
       "isSignal": true;
     };
+    "showErrors": {
+      "alias": "showErrors";
+      "required": false;
+      "isSignal": true;
+    };
+    "clearable": {
+      "alias": "clearable";
+      "required": false;
+      "isSignal": true;
+    };
+    "removeLabel": {
+      "alias": "removeLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "maxSize": {
+      "alias": "maxSize";
+      "required": false;
+      "isSignal": true;
+    };
+    "enforceAccept": {
+      "alias": "enforceAccept";
+      "required": false;
+      "isSignal": true;
+    };
+    "typeMessage": {
+      "alias": "typeMessage";
+      "required": false;
+      "isSignal": true;
+    };
+    "sizeMessage": {
+      "alias": "sizeMessage";
+      "required": false;
+      "isSignal": true;
+    };
+    "dropzone": {
+      "alias": "dropzone";
+      "required": false;
+      "isSignal": true;
+    };
+    "showDetails": {
+      "alias": "showDetails";
+      "required": false;
+      "isSignal": true;
+    };
+    "preview": {
+      "alias": "preview";
+      "required": false;
+      "isSignal": true;
+    };
+    "loading": {
+      "alias": "loading";
+      "required": false;
+      "isSignal": true;
+    };
+    "loadingText": {
+      "alias": "loadingText";
+      "required": false;
+      "isSignal": true;
+    };
     "_disabledInput": {
       "alias": "disabled";
       "required": false;
@@ -5447,6 +6098,9 @@ export declare class FileInputComponent implements ControlValueAccessor {
     };
   }, {
     "filesSelected": "filesSelected";
+    "fileRejected": "fileRejected";
+    "fileRemoved": "fileRemoved";
+    "invalidChange": "invalidChange";
   }, never, never, true, never>;
 }
 export declare class DateInputComponent implements ControlValueAccessor, Validator, UiFieldValidity {
@@ -6522,6 +7176,83 @@ export declare class HintComponent {
   static ɵfac: i0.ɵɵFactoryDeclaration<HintComponent, never>;
   static ɵcmp: i0.ɵɵComponentDeclaration<HintComponent, "ui-hint", never, {}, {}, never, ["*"], true, never>;
 }
+/** The SVG path (24×24 stroke icon) for an icon key, or undefined when the key is unknown. */
+export declare function iconPath(name: string): string | undefined;
+/** Keys with an icon of their own (the data-table action keys are accepted too — see `builtInActionIcon`). */
+export type IconName = 'add' | 'close' | 'check' | 'upload' | 'image' | 'chevron-up' | 'chevron-down' | 'arrow-left' | 'bell' | 'print' | 'view' | 'edit' | 'delete' | 'download' | 'duplicate' | 'archive' | 'restore' | 'share' | 'email' | 'message' | 'call';
+/**
+ * A clickable icon. The host passes a key (`name="delete"`) and the library draws that icon; clicking it emits
+ * `iconClick`, and the host does the actual work (delete the row, open a panel, …).
+ *
+ *   <ui-icon name="delete" tooltip="Remove line item 1" variant="danger" (iconClick)="removeLineItem(i)" />
+ *
+ * `tooltip` is the text shown on hover / keyboard focus (any length) and, unless `ariaLabel` is set, the name
+ * assistive tech reads — always set it on a clickable icon. An unknown `name` draws nothing.
+ *
+ * `[interactive]="false"` draws just the picture (no button, no click) for an icon that sits next to text or inside another
+ * button — e.g. the arrow in a "Back" button, a bell beside a reminder. It is hidden from assistive tech unless a `tooltip` or `ariaLabel` is set.
+ *
+ *   <ui-button><ui-icon name="arrow-left" [interactive]="false" /> Back to Dashboard</ui-button>
+ */
+export declare class IconComponent {
+  /** Which icon to draw, e.g. `delete`, `edit`, `add`. */
+  readonly name: import("@angular/core").InputSignal<IconName | (string & {})>;
+  /** Hover / keyboard-focus tooltip text, e.g. "Remove line item 1". Any length. Also the accessible name unless `ariaLabel` is set. */
+  readonly tooltip: import("@angular/core").InputSignal<string>;
+  /** Screen-reader name. Leave empty to use `tooltip`; set it only when it should differ. */
+  readonly ariaLabel: import("@angular/core").InputSignal<string>;
+  /** Icon size in px. */
+  readonly size: import("@angular/core").InputSignal<number>;
+  readonly variant: import("@angular/core").InputSignal<"danger" | "default">;
+  readonly disabled: import("@angular/core").InputSignal<boolean>;
+  /** false = just the picture (no button, no click) — for an icon beside text or inside another button. */
+  readonly interactive: import("@angular/core").InputSignal<boolean>;
+  /** Fires on click (not while disabled); the host performs the action. */
+  readonly iconClick: import("@angular/core").OutputEmitterRef<MouseEvent>;
+  protected readonly accessibleName: import("@angular/core").Signal<string>;
+  protected readonly path: import("@angular/core").Signal<string | undefined>;
+  protected onClick(event: MouseEvent): void;
+  static ɵfac: i0.ɵɵFactoryDeclaration<IconComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<IconComponent, "ui-icon", never, {
+    "name": {
+      "alias": "name";
+      "required": true;
+      "isSignal": true;
+    };
+    "tooltip": {
+      "alias": "tooltip";
+      "required": false;
+      "isSignal": true;
+    };
+    "ariaLabel": {
+      "alias": "ariaLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "size": {
+      "alias": "size";
+      "required": false;
+      "isSignal": true;
+    };
+    "variant": {
+      "alias": "variant";
+      "required": false;
+      "isSignal": true;
+    };
+    "disabled": {
+      "alias": "disabled";
+      "required": false;
+      "isSignal": true;
+    };
+    "interactive": {
+      "alias": "interactive";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {
+    "iconClick": "iconClick";
+  }, never, never, true, never>;
+}
 export type ImagePreviewShape = 'circle' | 'rounded';
 export type ImagePreviewSize = 'sm' | 'md' | 'lg';
 export type ImagePreviewPlaceholder = 'person' | 'image';
@@ -7149,6 +7880,9 @@ export declare class RadioMatrixComponent implements ControlValueAccessor, Valid
  *  - `<ng-container card-header>`: your own header content, shown under the title (or instead of it when no title is set).
  *  - `<ng-container card-header-action>`: buttons or links on the right side of the header.
  *  - `showEdit` + `editLabel` + `(editClick)`: the built-in Edit button.
+ *  - `background`: the card's background colour (any CSS colour; default white).
+ *  - `textColor`: the colour of the title, subtitle, chevron and body text (any CSS colour; default: the normal slate colours). Use it for light text on a dark `background`. Text you colour yourself inside the body keeps its own colour.
+ *  - The body has built-in padding (16px 18px, matching the header's 18px side padding); there is no padding input.
  *  - `collapsible` (default true): a chevron toggle and a clickable header; `[(expanded)]` is two-way.
  *    Without a header, or with `collapsible` false, the body is always open.
  *
@@ -7172,6 +7906,10 @@ export declare class DetailCardComponent {
   readonly titleId: import("@angular/core").InputSignal<string>;
   /** Grey line under the title. */
   readonly subtitle: import("@angular/core").InputSignal<string>;
+  /** Card background as any CSS colour (`#f8fafc`, `var(--surface)` …). Empty = white. */
+  readonly background: import("@angular/core").InputSignal<string>;
+  /** Text colour as any CSS colour (`#fff`, `var(--on-dark)` …). Empty = the default colours. Colours the title, subtitle, chevron and body text. */
+  readonly textColor: import("@angular/core").InputSignal<string>;
   /** false = no header at all (no title, edit button, toggle or divider): the card is only the body, always open. */
   readonly showHeader: import("@angular/core").InputSignal<boolean>;
   /** Chevron toggle + clickable header. false = the body is always open. */
@@ -7209,6 +7947,16 @@ export declare class DetailCardComponent {
       "required": false;
       "isSignal": true;
     };
+    "background": {
+      "alias": "background";
+      "required": false;
+      "isSignal": true;
+    };
+    "textColor": {
+      "alias": "textColor";
+      "required": false;
+      "isSignal": true;
+    };
     "showHeader": {
       "alias": "showHeader";
       "required": false;
@@ -7278,4 +8026,222 @@ export declare class DividerComponent {
     };
   }, {}, never, never, true, never>;
 }
+/**
+ * Wraps a block of form controls (a settings page, a configuration card) so a view-only user can look at the current
+ * values but change nothing. While `readOnly` is true the wrapper's native `<fieldset>` is `disabled`, and the browser
+ * disables every native form control inside it: text inputs, checkboxes, selects, textareas, radios and the `<button>`
+ * rendered by `ui-button`, plus the native controls inside the `ui-*` inputs.
+ *
+ * **Default: `readOnly` is false.** With no input nothing is locked and every control is fully editable. The wrapper only
+ * locks when the host passes `[readOnly]="true"` (typically `perm() !== 'full'`). Flipping it live re-enables / disables
+ * the same projected DOM nodes; values, `ngModel` state and focus targets are preserved.
+ *
+ * Limits (native `<fieldset disabled>` semantics):
+ * - Only NATIVE form controls are disabled. Non-native clickable things (divs with click handlers, links, drag handles,
+ *   `ui-data-table` toolbars and row menus) are NOT affected: hide or guard them in the host.
+ * - A `ui-data-table` has its own `[permission]` input. Keep tables outside the wrapper or use that input.
+ * - Nesting: a nested wrapper with `readOnly=false` inside a locked wrapper stays disabled, because a disabled
+ *   ancestor fieldset always disables its descendants. A nested wrapper cannot "unlock" a region.
+ *
+ * Layout: the fieldset is reset (border 0, margin 0, padding 0, min-width 0) and is a plain flex column, not
+ * `display: contents` (unreliable on `<fieldset>` in some browsers). Children therefore lay out as direct children;
+ * set `gap` when the parent spaced them with a flex gap.
+ *
+ * Accessibility: optional `ariaLabel` names the group; optional `reason` ("You have view-only access") is rendered as
+ * visually-hidden text linked via `aria-describedby`, only while locked.
+ *
+ * Usage: `<ui-readonly-fieldset [readOnly]="perm() !== 'full'" gap="20px"> ...controls... </ui-readonly-fieldset>`
+ */
+export declare class ReadonlyFieldsetComponent {
+  /** Lock every native control inside. Default false: nothing is locked. */
+  readonly readOnly: import("@angular/core").InputSignal<boolean>;
+  /** CSS `gap` between the children (default none). */
+  readonly gap: import("@angular/core").InputSignal<string>;
+  /** Optional accessible name for the group. */
+  readonly ariaLabel: import("@angular/core").InputSignal<string>;
+  /** Optional explanation announced while locked (visually hidden), e.g. "You have view-only access". */
+  readonly reason: import("@angular/core").InputSignal<string>;
+  protected readonly _reasonId: string;
+  protected readonly _showReason: import("@angular/core").Signal<boolean>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<ReadonlyFieldsetComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<ReadonlyFieldsetComponent, "ui-readonly-fieldset", never, {
+    "readOnly": {
+      "alias": "readOnly";
+      "required": false;
+      "isSignal": true;
+    };
+    "gap": {
+      "alias": "gap";
+      "required": false;
+      "isSignal": true;
+    };
+    "ariaLabel": {
+      "alias": "ariaLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "reason": {
+      "alias": "reason";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, ["*"], true, never>;
+}
+/** A preset swatch offered under the field. `label` is its accessible name. */
+export interface ColorPreset {
+  value: string;
+  label: string;
+}
+/**
+ * Normalises a CSS hex colour: `#fff` / `FFF` -> `#ffffff`, `#RRGGBB` -> lower case. With `allowAlpha`, `#rrggbbaa`
+ * is accepted and kept at 8 digits (shorthand `#rgba` is never accepted). Returns null for anything else
+ * (named colours, `rgb()`, wrong lengths, non-hex digits). The leading `#` is optional on input.
+ */
+export declare function normalizeHexColor(value: string | null | undefined, allowAlpha?: boolean): string | null;
+/**
+ * Colour input: ControlValueAccessor over a string holding a CSS hex colour. A swatch opens the operating system's
+ * colour picker (native `<input type="color">`) and a text field next to it shows / edits the hex; both stay in sync.
+ *
+ *   <ui-color-input label="Brand colour" [(ngModel)]="brand" />
+ *   <ui-color-input label="Accent" [presets]="presets" [allowAlpha]="true" [formControl]="accent" />
+ *
+ * Value contract
+ * - A valid colour is emitted normalised to lower-case `#rrggbb` (`#FFF` -> `#ffffff`; 8-digit `#rrggbbaa` only with
+ *   `allowAlpha`, kept at 8 digits). The user may type with or without the leading `#`; the control prepends it.
+ * - Text the user typed that is not a valid colour is emitted as typed (with `#` prepended, `''` when cleared) so the host
+ *   sees what the user entered; the control is then invalid ("Enter a hex colour like #3b82f6.") and the form control gets
+ *   the `color` error. While typing, the text is not rewritten (`#fff` is emitted as `#ffffff` but stays `#fff` on screen)
+ *   and is normalised on blur.
+ * - A value WRITTEN BY THE HOST (`writeValue` / `[ngModel]` / `[formControl]`) is never flagged as an invalid colour, even
+ *   when it is not a hex (`red`, `#fff8`, a legacy value), until the user changes it, so legacy data never blocks Save.
+ *   (Required is still checked for an empty value.) The native picker gets `#000000` for a non-hex value so it never throws.
+ * - Picking in the native picker with an 8-digit value and `allowAlpha` keeps the existing alpha digits.
+ *
+ * Validity API (same as the other ui inputs): `Validator` (error keys `required`, `color`), signals `invalid` /
+ * `errorMessage`, `invalidChange` output, `UiFieldValidity` token. Messages show after blur or while
+ * `[showErrors]="true"`; a host `[error]` always wins. Disabled controls are never invalid.
+ *
+ * Cross-browser: the native swatch is styled with `-webkit-appearance` and the `::-webkit-color-swatch` / `::-moz-color-swatch`
+ * pseudo-elements and sits invisibly over our own preview square, so it looks the same in Chrome, Edge, Firefox and Safari.
+ * Preset swatches are real `<button>`s (Enter / Space work natively, `aria-pressed` marks the selected one).
+ */
+export declare class ColorInputComponent implements ControlValueAccessor, Validator, UiFieldValidity {
+  readonly label: import("@angular/core").InputSignal<string>;
+  /** Accessible name for a field with no visible label. */
+  readonly ariaLabel: import("@angular/core").InputSignal<string>;
+  readonly placeholder: import("@angular/core").InputSignal<string>;
+  readonly required: import("@angular/core").InputSignal<boolean>;
+  readonly hint: import("@angular/core").InputSignal<string>;
+  /** Host error message; always wins over the built-in message. */
+  readonly error: import("@angular/core").InputSignal<string>;
+  /** Reveal the built-in error messages now (e.g. after a failed Save click), without waiting for blur. */
+  readonly showErrors: import("@angular/core").InputSignal<boolean>;
+  /** Accept (and keep) 8-digit `#rrggbbaa` values. */
+  readonly allowAlpha: import("@angular/core").InputSignal<boolean>;
+  /** Optional row of preset swatches. */
+  readonly presets: import("@angular/core").InputSignal<ColorPreset[]>;
+  /** Emits whenever the field becomes invalid / valid. */
+  readonly invalidChange: import("@angular/core").OutputEmitterRef<boolean>;
+  protected readonly _disabledInput: import("@angular/core").InputSignal<boolean>;
+  private readonly _cvaDisabled;
+  protected readonly disabled: import("@angular/core").Signal<boolean>;
+  /** Current model value (what the form control holds). */
+  private readonly _model;
+  /** Text shown in the text field. */
+  protected readonly _text: import("@angular/core").WritableSignal<string>;
+  /** True once the user changed the value; host-written values are not format-checked before that. */
+  private readonly _edited;
+  private readonly _reveal;
+  private readonly _issue;
+  readonly invalid: import("@angular/core").Signal<boolean>;
+  readonly errorMessage: import("@angular/core").Signal<string>;
+  protected readonly _activeError: import("@angular/core").Signal<string>;
+  private readonly _valid;
+  /** Colour of the preview square: the value when it is a usable hex, otherwise transparent. */
+  protected readonly _swatchColor: import("@angular/core").Signal<string>;
+  /** Value for the native picker: always `#rrggbb`. */
+  protected readonly _nativeValue: import("@angular/core").Signal<string>;
+  private readonly _uid;
+  protected readonly _textId: string;
+  protected readonly _nativeId: string;
+  protected readonly _descId: string;
+  private _onChange;
+  private _onTouched;
+  private _onValidatorChange;
+  constructor();
+  /** Re-run the form control's validation when a rule input (required, allowAlpha, ...) changes. */
+  ngOnChanges(): void;
+  writeValue(val: string | null): void;
+  registerOnChange(fn: (v: string) => void): void;
+  registerOnTouched(fn: () => void): void;
+  registerOnValidatorChange(fn: () => void): void;
+  setDisabledState(d: boolean): void;
+  validate(control: AbstractControl): ValidationErrors | null;
+  protected onTextInput(event: Event): void;
+  protected onNativeInput(event: Event): void;
+  protected selectPreset(p: ColorPreset): void;
+  protected _isSelected(p: ColorPreset): boolean;
+  protected _presetColor(p: ColorPreset): string;
+  protected onTextBlur(): void;
+  /** Blur of the native picker only marks the field touched; it never rewrites the text. */
+  protected onNativeBlur(): void;
+  private _touch;
+  private _commit;
+  private _check;
+  static ɵfac: i0.ɵɵFactoryDeclaration<ColorInputComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<ColorInputComponent, "ui-color-input", never, {
+    "label": {
+      "alias": "label";
+      "required": false;
+      "isSignal": true;
+    };
+    "ariaLabel": {
+      "alias": "ariaLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "placeholder": {
+      "alias": "placeholder";
+      "required": false;
+      "isSignal": true;
+    };
+    "required": {
+      "alias": "required";
+      "required": false;
+      "isSignal": true;
+    };
+    "hint": {
+      "alias": "hint";
+      "required": false;
+      "isSignal": true;
+    };
+    "error": {
+      "alias": "error";
+      "required": false;
+      "isSignal": true;
+    };
+    "showErrors": {
+      "alias": "showErrors";
+      "required": false;
+      "isSignal": true;
+    };
+    "allowAlpha": {
+      "alias": "allowAlpha";
+      "required": false;
+      "isSignal": true;
+    };
+    "presets": {
+      "alias": "presets";
+      "required": false;
+      "isSignal": true;
+    };
+    "_disabledInput": {
+      "alias": "disabled";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {
+    "invalidChange": "invalidChange";
+  }, never, never, true, never>;
+}
 export type { CreateDocumentRequestBody, DocuSignSendBody, DocumentSentInfo, DocumentSentMessage, DocumentsPayloadExtras, ExistingEnvelopeSendBody, SendDocumentsPayload, SendEmailPayload, SendTextPayload, VideoDefaults, VideoLinkOptions };