@forgeroute/ui 0.4.31 → 0.4.33

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@forgeroute/ui",
-  "version": "0.4.31",
+  "version": "0.4.33",
   "peerDependencies": {
     "@angular/common": ">=22.0.0",
     "@angular/core": ">=22.0.0",

package/types/forgeroute-ui.d.ts

@@ -1999,7 +1999,7 @@ export declare class SidePanelComponent implements OnDestroy {
   readonly cancelLabel: import("@angular/core").InputSignal<string>;
   /** Right-aligned primary action button label. Empty string = hidden. */
   readonly primaryLabel: import("@angular/core").InputSignal<string>;
-  readonly primaryVariant: import("@angular/core").InputSignal<"primary" | "danger" | "warning">;
+  readonly primaryVariant: import("@angular/core").InputSignal<"danger" | "warning" | "primary">;
   readonly primaryLoading: import("@angular/core").InputSignal<boolean>;
   readonly primaryDisabled: import("@angular/core").InputSignal<boolean>;
   /** `data-testid` of the Cancel button; none when empty (default). */
@@ -2741,7 +2741,7 @@ export declare class CheckboxComponent implements ControlValueAccessor, Validato
    * clicking it still toggles the box - e.g. a product name that is both the heading of its card and the label of its checkbox.
    * Default null: plain label text, exactly as before. Single mode only.
    */
-  readonly headingLevel: import("@angular/core").InputSignal<1 | 2 | 3 | 4 | 5 | 6 | null>;
+  readonly headingLevel: import("@angular/core").InputSignal<1 | 2 | 6 | 3 | 5 | 4 | null>;
   readonly indeterminate: import("@angular/core").InputSignal<boolean>;
   readonly checked: import("@angular/core").ModelSignal<boolean>;
   /**
@@ -3139,7 +3139,7 @@ export declare class StepperComponent {
    * its circle, one continuous line behind the circles that fills as steps complete; a complete step shows a check, the current step an
    * accent ring with a dot, an upcoming step an empty circle (no numbers). Circles are 40px (32px with `size="sm"`).
    */
-  readonly labelPosition: import("@angular/core").InputSignal<"beside" | "below">;
+  readonly labelPosition: import("@angular/core").InputSignal<"below" | "beside">;
   /** Viewport width in px below which a horizontal stepper is drawn vertical (labels beside the circles), e.g. `640`. null (default) = never. */
   readonly stackBelow: import("@angular/core").InputSignal<number | null>;
   /** CSS length (e.g. `10.5rem`): horizontal only - the list gets `min-width: calc(<step count> * <value>)`. Empty (default) = no minimum. */
@@ -3766,7 +3766,7 @@ export declare class ButtonComponent {
    * `ghost-start`: a ghost button for list / section toggles - a full-width row with its content aligned to the start, transparent
    * background, hover tint and the normal focus ring. Pair it with `ariaExpanded` / `ariaPressed`; the label may contain a heading element.
    */
-  readonly variant: import("@angular/core").InputSignal<"primary" | "secondary" | "danger" | "warning" | "link" | "ghost" | "ghost-start" | "tab" | "icon" | "icon-danger">;
+  readonly variant: import("@angular/core").InputSignal<"link" | "danger" | "icon" | "warning" | "primary" | "secondary" | "ghost" | "ghost-start" | "tab" | "icon-danger">;
   /** Renders an anchor to this route instead of a button (use with `variant="link"` for an inline text link). `['/settings']` or `'/settings'`. While `disabled` or `loading` it renders a non-clickable `<span role="link" aria-disabled>` with no href (like `href`). */
   readonly routerLink: import("@angular/core").InputSignal<string | readonly unknown[] | null>;
   /** Query params of the `routerLink` (e.g. `{ section: 'deal-defaults' }`). */
@@ -3941,10 +3941,31 @@ export declare class ButtonComponent {
     };
   }, {}, never, ["*"], true, never>;
 }
+/** A small icon button shown inside a toggle badge, after the label (e.g. Configure, Analytics). */
+export interface ToggleBadgeAction {
+  /** Emitted by `(action)` when the button is clicked. */
+  id: string;
+  /** Accessible name of the button (also used as the tooltip when `tooltip` is empty). */
+  label: string;
+  /** SVG path data (`d`) of a 24x24 stroked icon. Several shapes can be joined in one string (`M..M..`). */
+  icon: string;
+  /** Text of the hover / focus tooltip. */
+  tooltip?: string;
+  disabled?: boolean;
+}
+/**
+ * Pill that toggles on / off. Optional `actions` put small icon buttons INSIDE the pill, after the label and a divider, each with its own
+ * tooltip; the label button and the icon buttons are separate buttons (never nested). Clicking an icon button emits `(action)` with its id and
+ * never `(toggle)`. Content projected into the component (an icon) goes before the label, as before.
+ */
 export declare class ToggleBadgeComponent {
   readonly label: import("@angular/core").InputSignal<string>;
   readonly active: import("@angular/core").InputSignal<boolean>;
+  /** Icon buttons shown inside the pill after the label. Empty (default) = a plain pill, exactly as before. */
+  readonly actions: import("@angular/core").InputSignal<ToggleBadgeAction[]>;
   readonly toggle: import("@angular/core").OutputEmitterRef<void>;
+  /** An icon button was clicked: its `id`. Never emits `toggle`. */
+  readonly action: import("@angular/core").OutputEmitterRef<string>;
   static ɵfac: i0.ɵɵFactoryDeclaration<ToggleBadgeComponent, never>;
   static ɵcmp: i0.ɵɵComponentDeclaration<ToggleBadgeComponent, "ui-toggle-badge", never, {
     "label": {
@@ -3957,8 +3978,14 @@ export declare class ToggleBadgeComponent {
       "required": false;
       "isSignal": true;
     };
+    "actions": {
+      "alias": "actions";
+      "required": false;
+      "isSignal": true;
+    };
   }, {
     "toggle": "toggle";
+    "action": "action";
   }, never, ["*"], true, never>;
 }
 export interface PillTab {
@@ -4207,7 +4234,7 @@ export declare class BulkMessagePanelComponent {
   readonly sending: import("@angular/core").InputSignal<boolean>;
   readonly closed: import("@angular/core").OutputEmitterRef<void>;
   readonly send: import("@angular/core").OutputEmitterRef<BulkMessageSendEvent>;
-  readonly channel: import("@angular/core").WritableSignal<"text" | "email">;
+  readonly channel: import("@angular/core").WritableSignal<"email" | "text">;
   private readonly _subject;
   private readonly _body;
   get subject(): string;
@@ -4251,6 +4278,62 @@ export declare class BulkMessagePanelComponent {
     "send": "send";
   }, never, never, true, never>;
 }
+/**
+ * The grid of source cards ("Follow Up Boss", "kvCORE", "Custom CSV" ...) of the import wizard's first step. Used inside the import window and
+ * on its own (the setup wizard shows it inline so the user picks a source without opening the window first).
+ *
+ *   <ui-import-source-grid [sources]="sources" [selected]="picked" ariaLabel="Select your Contact source" (sourceSelect)="picked = $event" />
+ */
+export declare class ImportSourceGridComponent {
+  readonly sources: import("@angular/core").InputSignal<ImportSource[]>;
+  /** The `value` of the picked source (highlighted). `tile` only: the `card` appearance does not keep a selection. */
+  readonly selected: import("@angular/core").InputSignal<string>;
+  /** `tile`: the compact buttons of the import window. `card`: one `ui-detail-card` per source with its own select button (used on a page). */
+  readonly appearance: import("@angular/core").InputSignal<"card" | "tile">;
+  /** `card`: disables every card's button (for example while the page is saving). */
+  readonly disabled: import("@angular/core").InputSignal<boolean>;
+  /** `card`: the text of each card's button. */
+  readonly actionLabel: import("@angular/core").InputSignal<string>;
+  /** Accessible name of the list. */
+  readonly ariaLabel: import("@angular/core").InputSignal<string>;
+  /** Emits the `value` of the clicked source. */
+  readonly sourceSelect: import("@angular/core").OutputEmitterRef<string>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<ImportSourceGridComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<ImportSourceGridComponent, "ui-import-source-grid", never, {
+    "sources": {
+      "alias": "sources";
+      "required": true;
+      "isSignal": true;
+    };
+    "selected": {
+      "alias": "selected";
+      "required": false;
+      "isSignal": true;
+    };
+    "appearance": {
+      "alias": "appearance";
+      "required": false;
+      "isSignal": true;
+    };
+    "disabled": {
+      "alias": "disabled";
+      "required": false;
+      "isSignal": true;
+    };
+    "actionLabel": {
+      "alias": "actionLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "ariaLabel": {
+      "alias": "ariaLabel";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {
+    "sourceSelect": "sourceSelect";
+  }, never, never, true, never>;
+}
 export interface ActiveConfirm {
   title: string;
   message: string;
@@ -4427,7 +4510,7 @@ export declare class TextInputComponent implements ControlValueAccessor, Validat
   readonly passwordRequirements: import("@angular/core").InputSignal<boolean>;
   /** Rules for `passwordRequirements`; default = the library's five rules (8+ characters, upper, lower, digit, special). */
   readonly passwordRules: import("@angular/core").InputSignal<readonly PasswordRule[] | undefined>;
-  readonly type: import("@angular/core").InputSignal<"number" | "text" | "email" | "tel" | "password" | "url">;
+  readonly type: import("@angular/core").InputSignal<"number" | "email" | "text" | "password" | "tel" | "url">;
   readonly maxlength: import("@angular/core").InputSignal<number | undefined>;
   readonly required: import("@angular/core").InputSignal<boolean>;
   readonly autocomplete: import("@angular/core").InputSignal<string>;
@@ -4436,7 +4519,7 @@ export declare class TextInputComponent implements ControlValueAccessor, Validat
    * `search`, `text`, `none`). Empty (default) = the browser's default for the field, except `type="tel"`, which keeps `tel`.
    * It only picks the keyboard; it does not restrict what can be typed or pasted.
    */
-  readonly inputmode: import("@angular/core").InputSignal<"" | "none" | "text" | "search" | "email" | "tel" | "url" | "decimal" | "numeric">;
+  readonly inputmode: import("@angular/core").InputSignal<"" | "email" | "none" | "text" | "tel" | "url" | "decimal" | "numeric" | "search">;
   readonly readonly: import("@angular/core").InputSignal<boolean>;
   readonly hint: import("@angular/core").InputSignal<string>;
   readonly error: import("@angular/core").InputSignal<string>;
@@ -4500,7 +4583,7 @@ export declare class TextInputComponent implements ControlValueAccessor, Validat
   protected readonly _stepAttr: import("@angular/core").Signal<string | null>;
   protected readonly _revealable: import("@angular/core").Signal<boolean>;
   protected readonly _shown: import("@angular/core").WritableSignal<boolean>;
-  protected readonly _inputType: import("@angular/core").Signal<"number" | "text" | "email" | "tel" | "password" | "url">;
+  protected readonly _inputType: import("@angular/core").Signal<"number" | "email" | "text" | "password" | "tel" | "url">;
   protected readonly _eyePath: string;
   protected readonly _eyeOffPath: string;
   protected readonly _showRequirements: import("@angular/core").Signal<boolean>;
@@ -6046,7 +6129,7 @@ export declare class FormRowComponent {
  * child simply takes the full width. Keep a numeric span within the row's `cols` (use `all` for the whole row).
  */
 export declare class FormColSpanDirective {
-  readonly uiColSpan: import("@angular/core").InputSignal<"" | "2" | "3" | 2 | 3 | "all">;
+  readonly uiColSpan: import("@angular/core").InputSignal<"" | 2 | 3 | "2" | "3" | "all">;
   protected readonly _class: import("@angular/core").Signal<string>;
   static ɵfac: i0.ɵɵFactoryDeclaration<FormColSpanDirective, never>;
   static ɵdir: i0.ɵɵDirectiveDeclaration<FormColSpanDirective, "[uiColSpan]", never, {
@@ -6096,7 +6179,7 @@ export type ListItemDetail = string | {
 export type ListItemIconColor = 'slate' | 'amber' | 'red' | 'blue' | 'green' | 'purple' | 'teal' | 'orange';
 export declare class ListItemComponent {
   /** Show a radio button, checkbox, or nothing on the left. */
-  readonly leading: import("@angular/core").InputSignal<"none" | "checkbox" | "radio">;
+  readonly leading: import("@angular/core").InputSignal<"radio" | "checkbox" | "none">;
   /** `name` attribute for the radio/checkbox (groups radios together). */
   readonly inputName: import("@angular/core").InputSignal<string>;
   /** `id` attribute for the radio/checkbox (links the label). */
@@ -7073,9 +7156,9 @@ export declare class ChipGroupComponent {
   /** Space between each chip. */
   readonly gap: import("@angular/core").InputSignal<"sm" | "md" | "lg">;
   /** Space above the chip group. */
-  readonly spaceAbove: import("@angular/core").InputSignal<"none" | "sm" | "md">;
+  readonly spaceAbove: import("@angular/core").InputSignal<"sm" | "md" | "none">;
   /** Space below the chip group. */
-  readonly spaceBelow: import("@angular/core").InputSignal<"none" | "sm" | "md">;
+  readonly spaceBelow: import("@angular/core").InputSignal<"sm" | "md" | "none">;
   protected readonly _gap: import("@angular/core").Signal<"6px" | "12px" | "8px">;
   protected readonly _spaceAbove: import("@angular/core").Signal<"0" | "6px" | "12px">;
   protected readonly _spaceBelow: import("@angular/core").Signal<"0" | "6px" | "12px">;
@@ -7380,7 +7463,7 @@ export declare class AlertComponent {
 /** 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' | 'lock' | 'shield' | 'arrow-up' | 'arrow-down' | 'arrow-right' | 'document' | 'grip' | 'card' | 'bank' | 'view' | 'view-off' | 'edit' | 'delete' | 'download' | 'duplicate' | 'archive' | 'restore' | 'share' | 'email' | 'message' | 'call' | 'refund' | 'chevron-right' | 'link' | 'save' | 'chart' | 'clipboard';
+export type IconName = 'add' | 'close' | 'check' | 'upload' | 'image' | 'chevron-up' | 'chevron-down' | 'arrow-left' | 'bell' | 'print' | 'lock' | 'shield' | 'arrow-up' | 'arrow-down' | 'arrow-right' | 'document' | 'grip' | 'card' | 'bank' | 'view' | 'view-off' | 'edit' | 'delete' | 'download' | 'duplicate' | 'archive' | 'restore' | 'share' | 'email' | 'message' | 'call' | 'refund' | 'chevron-right' | 'link' | 'save' | 'chart' | 'clipboard' | 'unlink' | 'send' | 'refresh';
 /**
  * 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, …).
@@ -7407,7 +7490,7 @@ export declare class IconComponent {
   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 variant: import("@angular/core").InputSignal<"default" | "danger">;
   readonly disabled: import("@angular/core").InputSignal<boolean>;
   /** The host is running the request this icon started: a spinner replaces the picture and the button is disabled (no click) until it is false again. */
   readonly loading: import("@angular/core").InputSignal<boolean>;
@@ -7519,7 +7602,7 @@ export declare class TimelineComponent {
   /** Any CSS length (e.g. `600px`). When set, the list scrolls inside a keyboard-focusable region of at most this height. Empty = no wrapper. */
   readonly maxHeight: import("@angular/core").InputSignal<string>;
   /** `below` (default): the time is under the title / description. `end`: the time sits right-aligned on the title row. */
-  readonly timePosition: import("@angular/core").InputSignal<"end" | "below">;
+  readonly timePosition: import("@angular/core").InputSignal<"below" | "end">;
   /**
    * Group the items under a heading per calendar day of `dateTime` ("Today", "Yesterday", "Oct 3", "Oct 3, 2025"). Default false = no headings,
    * DOM unchanged. The given order is kept: consecutive items of one day share a heading, the same day appearing again later starts a new group.
@@ -8849,7 +8932,7 @@ export declare class PdfHotspotComponent {
   /** `ready`: clickable; `blocked`: disabled (a prerequisite is missing); `signed`: shows `image`. */
   readonly state: import("@angular/core").InputSignal<"ready" | "blocked" | "signed">;
   /** `warning` gives the ready state an amber look (e.g. for initials), default is blue. */
-  readonly tone: import("@angular/core").InputSignal<"primary" | "warning">;
+  readonly tone: import("@angular/core").InputSignal<"warning" | "primary">;
   /** Text of the ready button (e.g. "Sign Here"). */
   readonly label: import("@angular/core").InputSignal<string>;
   /** Text of the blocked button (e.g. "Add signature above"). */
@@ -8983,7 +9066,7 @@ export declare class DetailCardComponent {
   /** true (default) = the title is displayed in capitals (CSS only); false = shown as written. The text, aria-label and heading name are never changed. */
   readonly uppercaseTitle: import("@angular/core").InputSignal<boolean>;
   /** 1-6 makes the title a real heading for screen readers (role=heading, aria-level); null keeps it plain text. */
-  readonly headingLevel: import("@angular/core").InputSignal<1 | 2 | 3 | 4 | 5 | 6 | null>;
+  readonly headingLevel: import("@angular/core").InputSignal<1 | 2 | 6 | 3 | 5 | 4 | null>;
   /** Optional id for the title text; the card is then labelled by it. Without it the title is the card's aria-label. */
   readonly titleId: import("@angular/core").InputSignal<string>;
   /** Accessible name of the card when the header gives none (no header, or no title). A visible title wins; blank = no name. */
@@ -11081,6 +11164,8 @@ export interface SetupWizardTexts {
   exit: string;
   connect: string;
   reconnect: string;
+  /** Button on each source card of an import step. */
+  selectSource: string;
   connected: string;
   importMore: string;
   whatGetsImported: string;
@@ -11117,6 +11202,8 @@ export interface SetupStep {
   /** Unique within the list. */
   key: string;
   label: string;
+  /** Title in the header bar of the card around the step. Omit it and the card has no header bar. */
+  cardTitle?: string;
   /** The paragraph under the heading. */
   description?: string;
   /** `custom` shows the app's own `<ng-template uiSetupStep="key">`; `import` and `integrations` are built in. */
@@ -11185,6 +11272,28 @@ export declare class SetupWizardStepDirective {
     };
   }, {}, never, never, true, never>;
 }
+/**
+ * Content for the right side of a step's card header (a search box, a small action): `<ng-template uiSetupStepHeader="key">…</ng-template>`.
+ * It gets the same `let-wizard` as the step's own template. A step with this template shows the card header even without a `cardTitle`.
+ */
+export declare class SetupWizardStepHeaderDirective {
+  /** The `key` of the step this header content belongs to. */
+  readonly key: import("@angular/core").InputSignal<string>;
+  readonly template: TemplateRef<{
+    $implicit: SetupWizardApi;
+  }>;
+  static ngTemplateContextGuard(_dir: SetupWizardStepHeaderDirective, _ctx: unknown): _ctx is {
+    $implicit: SetupWizardApi;
+  };
+  static ɵfac: i0.ɵɵFactoryDeclaration<SetupWizardStepHeaderDirective, never>;
+  static ɵdir: i0.ɵɵDirectiveDeclaration<SetupWizardStepHeaderDirective, "ng-template[uiSetupStepHeader]", never, {
+    "key": {
+      "alias": "uiSetupStepHeader";
+      "required": true;
+      "isSignal": true;
+    };
+  }, {}, never, never, true, never>;
+}
 /** Splits a description into its first sentence (title) and the rest (text). A single sentence is all title. */
 export declare function splitIntro(description: string): {
   title: string;
@@ -11223,6 +11332,7 @@ export declare class SetupWizardComponent {
   /** The step that was just shown (its key). */
   readonly stepChange: import("@angular/core").OutputEmitterRef<string>;
   protected readonly stepTemplates: import("@angular/core").Signal<readonly SetupWizardStepDirective[]>;
+  protected readonly headerTemplates: import("@angular/core").Signal<readonly SetupWizardStepHeaderDirective[]>;
   protected readonly importers: import("@angular/core").Signal<readonly ImportExportComponent[]>;
   protected readonly t: import("@angular/core").Signal<SetupWizardTexts>;
   protected readonly currentKey: import("@angular/core").WritableSignal<string>;
@@ -11252,6 +11362,9 @@ export declare class SetupWizardComponent {
   protected readonly stepperSteps: import("@angular/core").Signal<StepperStep[]>;
   protected readonly summarySections: import("@angular/core").Signal<PanelInfoSection[]>;
   constructor();
+  protected headerTemplateFor(key: string): import("@angular/core").TemplateRef<{
+    $implicit: SetupWizardApi;
+  }> | null;
   protected templateFor(key: string): import("@angular/core").TemplateRef<{
     $implicit: SetupWizardApi;
   }> | null;
@@ -11266,6 +11379,8 @@ export declare class SetupWizardComponent {
   private run;
   /** The message to show for a failure: the server's own `{ message }` (or a thrown error's message); never the HTTP client's technical text. */
   private messageOf;
+  /** A source card was picked on the step itself: opens the import window already past its source step (at the upload step for that source). */
+  protected startImport(key: string, source: string): void;
   protected openImport(key: string): void;
   protected onImported(key: string): void;
   protected importResult(key: string): number | null;
@@ -11299,7 +11414,7 @@ export declare class SetupWizardComponent {
     "finished": "finished";
     "exited": "exited";
     "stepChange": "stepChange";
-  }, ["stepTemplates"], ["[setup-wizard-logo]"], true, never>;
+  }, ["stepTemplates", "headerTemplates"], ["[setup-wizard-logo]"], true, never>;
 }
 /** One automated trigger a template can be assigned to (the host decides which exist). */
 export interface EmailTemplateAssignmentOption {
@@ -11490,7 +11605,7 @@ export declare class EmailTemplateEditorComponent {
   readonly sizeKey: import("@angular/core").WritableSignal<number>;
   readonly headingOptions: SelectOption<string>[];
   readonly fontSizeOptions: SelectOption<string>[];
-  readonly spacingOptions: SelectOption<string>[];
+  readonly spacingTabs: PillTab[];
   readonly ctaTypeOptions: SelectOption<string>[];
   readonly playbackOptions: {
     value: string;