@forgeroute/ui 0.4.33 → 0.4.35

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@forgeroute/ui",
-  "version": "0.4.33",
+  "version": "0.4.35",
   "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<"danger" | "warning" | "primary">;
+  readonly primaryVariant: import("@angular/core").InputSignal<"primary" | "danger" | "warning">;
   readonly primaryLoading: import("@angular/core").InputSignal<boolean>;
   readonly primaryDisabled: import("@angular/core").InputSignal<boolean>;
   /** `data-testid` of the Cancel button; none when empty (default). */
@@ -2571,6 +2571,8 @@ export declare class SkeletonComponent {
 /**
  * Hover / focus tooltip for any element: `<span uiTooltip="Saved">`.
  * Empty text shows nothing. Line breaks (`\n`) are kept. Escape or leaving the element closes it.
+ * Only one tooltip is open at a time anywhere on the page: opening one closes the previous (e.g. a tooltip on a container and on a control inside
+ * it never both show; the innermost one the pointer entered last wins).
  * The bubble is rendered on `document.body` (position: fixed) so table/panel overflow never clips it.
  */
 export declare class TooltipDirective {
@@ -2581,6 +2583,8 @@ export declare class TooltipDirective {
   private readonly host;
   private readonly doc;
   private bubble;
+  /** The host's own `aria-describedby` (e.g. an error id) before the tooltip was added, put back when it closes. */
+  private previousDescribedBy;
   private readonly id;
   constructor();
   protected show(): void;
@@ -2741,7 +2745,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 | 6 | 3 | 5 | 4 | null>;
+  readonly headingLevel: import("@angular/core").InputSignal<1 | 2 | 3 | 4 | 5 | 6 | null>;
   readonly indeterminate: import("@angular/core").InputSignal<boolean>;
   readonly checked: import("@angular/core").ModelSignal<boolean>;
   /**
@@ -3139,7 +3143,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<"below" | "beside">;
+  readonly labelPosition: import("@angular/core").InputSignal<"beside" | "below">;
   /** 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 +3770,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<"link" | "danger" | "icon" | "warning" | "primary" | "secondary" | "ghost" | "ghost-start" | "tab" | "icon-danger">;
+  readonly variant: import("@angular/core").InputSignal<"primary" | "secondary" | "danger" | "warning" | "link" | "ghost" | "ghost-start" | "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'`. 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' }`). */
@@ -3963,6 +3967,11 @@ export declare class ToggleBadgeComponent {
   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[]>;
+  /**
+   * Hover / focus tooltip of the LABEL button only. Use this instead of `uiTooltip` on `<ui-toggle-badge>` when the badge has `actions`:
+   * a tooltip on the host would also open while the pointer is over an icon button and stack on top of that icon's own tooltip.
+   */
+  readonly tooltip: import("@angular/core").InputSignal<string>;
   readonly toggle: import("@angular/core").OutputEmitterRef<void>;
   /** An icon button was clicked: its `id`. Never emits `toggle`. */
   readonly action: import("@angular/core").OutputEmitterRef<string>;
@@ -3983,6 +3992,11 @@ export declare class ToggleBadgeComponent {
       "required": false;
       "isSignal": true;
     };
+    "tooltip": {
+      "alias": "tooltip";
+      "required": false;
+      "isSignal": true;
+    };
   }, {
     "toggle": "toggle";
     "action": "action";
@@ -4234,7 +4248,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<"email" | "text">;
+  readonly channel: import("@angular/core").WritableSignal<"text" | "email">;
   private readonly _subject;
   private readonly _body;
   get subject(): string;
@@ -4510,7 +4524,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" | "email" | "text" | "password" | "tel" | "url">;
+  readonly type: import("@angular/core").InputSignal<"number" | "text" | "email" | "tel" | "password" | "url">;
   readonly maxlength: import("@angular/core").InputSignal<number | undefined>;
   readonly required: import("@angular/core").InputSignal<boolean>;
   readonly autocomplete: import("@angular/core").InputSignal<string>;
@@ -4519,7 +4533,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<"" | "email" | "none" | "text" | "tel" | "url" | "decimal" | "numeric" | "search">;
+  readonly inputmode: import("@angular/core").InputSignal<"" | "none" | "text" | "search" | "email" | "tel" | "url" | "decimal" | "numeric">;
   readonly readonly: import("@angular/core").InputSignal<boolean>;
   readonly hint: import("@angular/core").InputSignal<string>;
   readonly error: import("@angular/core").InputSignal<string>;
@@ -4583,7 +4597,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" | "email" | "text" | "password" | "tel" | "url">;
+  protected readonly _inputType: import("@angular/core").Signal<"number" | "text" | "email" | "tel" | "password" | "url">;
   protected readonly _eyePath: string;
   protected readonly _eyeOffPath: string;
   protected readonly _showRequirements: import("@angular/core").Signal<boolean>;
@@ -6129,7 +6143,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, {
@@ -6179,7 +6193,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<"radio" | "checkbox" | "none">;
+  readonly leading: import("@angular/core").InputSignal<"none" | "checkbox" | "radio">;
   /** `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). */
@@ -7156,9 +7170,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<"sm" | "md" | "none">;
+  readonly spaceAbove: import("@angular/core").InputSignal<"none" | "sm" | "md">;
   /** Space below the chip group. */
-  readonly spaceBelow: import("@angular/core").InputSignal<"sm" | "md" | "none">;
+  readonly spaceBelow: import("@angular/core").InputSignal<"none" | "sm" | "md">;
   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">;
@@ -7490,7 +7504,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<"default" | "danger">;
+  readonly variant: import("@angular/core").InputSignal<"danger" | "default">;
   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>;
@@ -7602,7 +7616,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<"below" | "end">;
+  readonly timePosition: import("@angular/core").InputSignal<"end" | "below">;
   /**
    * 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.
@@ -8932,7 +8946,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<"warning" | "primary">;
+  readonly tone: import("@angular/core").InputSignal<"primary" | "warning">;
   /** 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"). */
@@ -9066,7 +9080,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 | 6 | 3 | 5 | 4 | null>;
+  readonly headingLevel: import("@angular/core").InputSignal<1 | 2 | 3 | 4 | 5 | 6 | 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. */
@@ -11142,8 +11156,12 @@ export interface SetupIntegration {
   title: string;
   /** Shown while the integration is not connected. */
   description: string;
-  /** Library `ui-list-item` icon name (default 'link'). */
+  /** Library icon name drawn in the tile when there is no `letter` (default 'link'). */
   icon?: string;
+  /** One letter shown in the coloured tile (like the source cards of an import step); takes the place of `icon`. */
+  letter?: string;
+  /** Background of the tile (any CSS colour; default slate). */
+  color?: string;
   /** GET answering `{ connected: boolean, ... }` (relative to the API base URL of `FORGEROUTE_CONFIG`). */
   statusEndpoint: string;
   /** When one status endpoint answers several providers (`{ gmail: {...}, outlook: {...} }`), the property that belongs to this one. */
@@ -11206,7 +11224,7 @@ export interface SetupStep {
   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. */
+  /** `custom` shows the app's own `<ng-template uiSetupStep="key">`; `import` and `integrations` are built in (an app template with the step's key is shown above the built-in content). */
   kind: 'custom' | 'import' | 'integrations';
   /** Shows "Skip for now" (default true). The first step of a wizard usually sets this to false. */
   skippable?: boolean;
@@ -11235,6 +11253,8 @@ export interface SetupWizardApi {
   saveAndContinue(): Promise<void>;
   /** True while a save is running. */
   readonly busy: () => boolean;
+  /** Marks steps as done (check mark, counted in the progress) without the user visiting them; unknown keys are ignored. For example a live sync that already brought in the data of later steps. */
+  markCompleted(...keys: string[]): void;
 }
 /**
  * The integrations every app can offer in a setup step. The endpoints follow the convention the apps' backends already use (`GET <x>/status`,
@@ -11251,6 +11271,8 @@ export declare function setupIntegrations(...keys: (keyof typeof SETUP_INTEGRATI
  *     <ng-template uiSetupStep="profile"> …the app's own form… </ng-template>
  *   </ui-setup-wizard>
  *
+ * An `import` or `integrations` step with a template of its key shows it ABOVE the built-in content (for example a "connect your CRM" panel above the source cards).
+ *
  * A step with `ownActions: true` draws its own continue button: `<ng-template uiSetupStep="profile" let-wizard>` … `(click)="wizard.saveAndContinue()"`.
  */
 export declare class SetupWizardStepDirective {
@@ -11373,6 +11395,8 @@ export declare class SetupWizardComponent {
   private advanceFrom;
   protected back(): void;
   protected skip(): void;
+  /** Marks the given steps done (ignoring keys that are not steps of this wizard). */
+  private markStepsCompleted;
   private markCompleted;
   /** "Save & Continue" of a custom or integrations step: runs the step's hook, then moves on. */
   saveAndContinue(): Promise<void>;
@@ -11422,12 +11446,6 @@ export interface EmailTemplateAssignmentOption {
   name: string;
   description: string;
 }
-/** The channels a template is assigned to for one trigger. */
-export interface EmailTemplateAssignmentChannels {
-  key: string;
-  email: boolean;
-  text: boolean;
-}
 /** A template as the editor shows it. `id` is null/absent for a template that is not stored yet (new, or a copy of another). */
 export interface EmailTemplateValue {
   id?: string | null;
@@ -11443,8 +11461,8 @@ export interface EmailTemplateValue {
   body: string;
   videoId?: string | null;
   videoTitle?: string | null;
-  /** The channels per trigger; a trigger that is missing is not assigned. */
-  assignments?: EmailTemplateAssignmentChannels[];
+  /** The keys of the triggers (`EmailTemplateAssignmentOption.key`) this template is assigned to. */
+  assignments?: string[];
 }
 /** What `(save)` emits. Dates are the raw `YYYY-MM-DD` values (null while "all year" is on); the host maps them to its API. */
 export interface EmailTemplateSavePayload {
@@ -11456,8 +11474,8 @@ export interface EmailTemplateSavePayload {
   activeFrom: string | null;
   activeTo: string | null;
   videoId: string | null;
-  /** Only the triggers with at least one channel on. */
-  assignments: EmailTemplateAssignmentChannels[];
+  /** The keys of the triggers this template is assigned to. */
+  assignments: string[];
 }
 export interface EmailTemplateBlock {
   key: string;
@@ -11506,8 +11524,7 @@ interface EmailBlock {
   spacing?: string;
 }
 interface AssignmentView extends EmailTemplateAssignmentOption {
-  email: boolean;
-  text: boolean;
+  assigned: boolean;
 }
 type EditorTab = 'edit' | 'preview' | 'mobile';
 type RightTab = 'blocks' | 'variables' | 'video';
@@ -11526,7 +11543,6 @@ type RightTab = 'blocks' | 'variables' | 'video';
 export declare class EmailTemplateEditorComponent {
   private readonly host;
   private readonly injector;
-  private readonly toast;
   /** The template to edit. `null` = a blank new template. An object without `id` is a new template that starts from those values (e.g. a copy). */
   readonly template: import("@angular/core").InputSignal<EmailTemplateValue | null>;
   readonly categories: import("@angular/core").InputSignal<SelectOption<string>[]>;
@@ -11535,9 +11551,10 @@ export declare class EmailTemplateEditorComponent {
   /** The assignment shown first (e.g. the trigger the user came from). */
   readonly featuredAssignmentKey: import("@angular/core").InputSignal<string | null>;
   readonly assignmentsDescription: import("@angular/core").InputSignal<string>;
-  readonly textEnabled: import("@angular/core").InputSignal<boolean>;
   readonly variableGroups: import("@angular/core").InputSignal<EmailTemplateVariableGroup[]>;
   readonly blockGroups: import("@angular/core").InputSignal<EmailTemplateBlockGroup[]>;
+  /** Page heading shown at the start of the actions row (e.g. "Create Your Template"). Empty (default) = no heading; the buttons stay right aligned. */
+  readonly heading: import("@angular/core").InputSignal<string>;
   readonly namePlaceholder: import("@angular/core").InputSignal<string>;
   readonly subjectPlaceholder: import("@angular/core").InputSignal<string>;
   readonly systemNote: import("@angular/core").InputSignal<string>;
@@ -11582,8 +11599,8 @@ export declare class EmailTemplateEditorComponent {
   readonly activeTo: import("@angular/core").WritableSignal<string>;
   readonly videoId: import("@angular/core").WritableSignal<string | null>;
   readonly videoTitle: import("@angular/core").WritableSignal<string | null>;
-  /** The channels the template has per trigger; the rows shown are `assignmentOptions` with these applied. */
-  private readonly assignmentChannels;
+  /** The triggers this template is assigned to (an email template is only ever assigned for email); the rows shown are `assignmentOptions` with this applied. */
+  private readonly assignedKeys;
   private readonly assignmentState;
   readonly blocks: import("@angular/core").WritableSignal<EmailBlock[]>;
   readonly selectedBlockId: import("@angular/core").WritableSignal<string | null>;
@@ -11621,10 +11638,6 @@ export declare class EmailTemplateEditorComponent {
   readonly imageAlt: import("@angular/core").WritableSignal<string>;
   readonly showTestSendDialog: import("@angular/core").WritableSignal<boolean>;
   readonly testSendEmail: import("@angular/core").WritableSignal<string>;
-  readonly showAssignmentConfig: import("@angular/core").WritableSignal<boolean>;
-  readonly configTarget: import("@angular/core").WritableSignal<AssignmentView | null>;
-  readonly configEmail: import("@angular/core").WritableSignal<boolean>;
-  readonly configText: import("@angular/core").WritableSignal<boolean>;
   readonly activeEditorTab: import("@angular/core").WritableSignal<EditorTab>;
   readonly activeRightTab: import("@angular/core").WritableSignal<RightTab>;
   readonly blockSearch: import("@angular/core").WritableSignal<string>;
@@ -11661,9 +11674,16 @@ export declare class EmailTemplateEditorComponent {
   readonly nameErrorShown: import("@angular/core").Signal<string>;
   readonly subjectErrorShown: import("@angular/core").Signal<string>;
   readonly bodyErrorShown: import("@angular/core").Signal<string>;
+  /** A template must be assigned to at least one automation (only in an app that offers assignments at all). */
+  readonly assignmentError: import("@angular/core").Signal<"" | "Assign this template to at least one automation.">;
+  /** True once the user has changed an assignment (or tried to save), so the message never shows on a page nobody has touched yet. */
+  readonly assignmentsTouched: import("@angular/core").WritableSignal<boolean>;
+  readonly assignmentErrorShown: import("@angular/core").Signal<"" | "Assign this template to at least one automation.">;
   readonly canSave: import("@angular/core").Signal<boolean>;
-  /** Save is offered to members who can write; clicking it while a rule fails shows the messages instead of sending anything. */
+  /** Save is offered to members who can write and stays disabled until every rule passes: a name, a subject, a message with some design (text or an image) and at least one assignment. */
   readonly saveDisabled: import("@angular/core").Signal<boolean>;
+  /** What is still missing, shown as the tooltip of the disabled Save button ('' when Save is available or the member cannot write). */
+  readonly saveHint: import("@angular/core").Signal<string>;
   private normalizedLink;
   /** Why Insert is disabled: nothing for an empty field, a message for an address that is not a link. */
   readonly linkUrlError: import("@angular/core").Signal<"" | "Enter a valid email address." | "Enter a valid web address, like https://example.com.">;
@@ -11753,8 +11773,8 @@ export declare class EmailTemplateEditorComponent {
   insertVideo(video: EmailTemplateVideo): void;
   formatDuration(seconds: number | null | undefined): string;
   categoryLabel(cat: string | null | undefined): string;
-  openAssignmentConfig(item: AssignmentView): void;
-  saveAssignmentConfig(): void;
+  /** Click / Enter / Space on a row: assign this template to that automation, or take it off again. */
+  toggleAssignment(item: AssignmentView): void;
   isOpen(id: string): boolean;
   toggleGroup(id: string): void;
   insertBlock(block: EmailTemplateBlock): void;
@@ -11792,11 +11812,6 @@ export declare class EmailTemplateEditorComponent {
       "required": false;
       "isSignal": true;
     };
-    "textEnabled": {
-      "alias": "textEnabled";
-      "required": false;
-      "isSignal": true;
-    };
     "variableGroups": {
       "alias": "variableGroups";
       "required": false;
@@ -11807,6 +11822,11 @@ export declare class EmailTemplateEditorComponent {
       "required": false;
       "isSignal": true;
     };
+    "heading": {
+      "alias": "heading";
+      "required": false;
+      "isSignal": true;
+    };
     "namePlaceholder": {
       "alias": "namePlaceholder";
       "required": false;