@forgeroute/ui 0.4.39 → 0.4.41

package/types/forgeroute-ui.d.ts

@@ -298,6 +298,8 @@ export type BulkUpdateOption<T = any> = string | {
    * It is also the inline select's accessible name, the default confirm's title and confirm button, and the default confirm message reads
    * "<label>: <option> for N items?" (instead of "Change <column> to <option> for N items?"). Host `confirm` copy still wins; its
    * `ctx.columnLabel` stays the column's label. Trimmed; blank = ignored. Ignored for the reserved `delete` key. Omit it and nothing changes.
+   * Direct actions (`action: true`): the bar button text, default confirm title and confirm button (required in practice; trimmed,
+   * blank = the key split on `_`, `-` and camelCase with only the first word capitalised: 'resend' -> 'Resend', 'send_reminder' / 'sendReminder' -> 'Send reminder'); `ctx.columnLabel` is this label.
    *
    *   { field: 'state', label: 'Archive / Restore' }
    */
@@ -330,8 +332,32 @@ export type BulkUpdateOption<T = any> = string | {
    *   { field: 'status', allowedFrom: { SENT: ['DRAFT'] }, canChange: (row, target) => target !== 'SENT' || canSend(row) }
    */
   canChange?: (row: T, target: string) => boolean;
+  /**
+   * Direct bulk action (`{ field: 'resend', action: true, label: 'Resend' }`): a bulk-bar button that is neither a field change nor
+   * Delete. `field` is the action key (no column needed), the button type is `action-<field>` and there is no inline select.
+   * Clicking it opens the library confirm, then POSTs `<endpoint>/bulk/<field>` with exactly `{ ids }` (the eligible rows). The response is
+   * handled like a field change (`updated`, `skipped`, `notAllowed`, readable `message`). Ignored for the reserved `delete` key.
+   * Read-only users get no bulk bar, so nothing changes for them. Omit it and nothing changes.
+   * `confirm` on an action takes only the function form; a map (target value -> function) is ignored and the default copy is used.
+   *
+   *   { field: 'resend', action: true, label: 'Resend', eligible: (row: Request) => row.status === 'PENDING' }
+   */
+  action?: boolean;
+  /** Direct action only: button style, default 'secondary'. 'danger' also makes the default confirm button red. */
+  variant?: 'secondary' | 'danger';
+  /**
+   * Direct action only: true when the server will accept the action for this row (keep it identical to the backend rule). Rows it
+   * refuses are skipped (counted, NEVER sent; "N selected rows don't qualify for <label lower-cased> and will be skipped."). When no selected loaded row passes,
+   * the button is disabled with a visible reason ("None of the selected rows qualify for <label lower-cased>."). Omit it and every selected row is sent. A predicate that throws counts as "row not eligible" (never breaks rendering).
+   */
+  eligible?: (row: T) => boolean;
+  /**
+   * Direct action only: the past-tense word in the result toast. "N <doneLabel>, M skipped." when anything was skipped / not allowed,
+   * else "N <itemLabel>(s) <doneLabel>.". Default 'updated'.
+   */
+  doneLabel?: string;
 };
-/** What a bulk confirm function receives. For bulk Delete: `targetValue`/`targetLabel` are '', `columnLabel` is 'Delete', skipped counts are 0. */
+/** What a bulk confirm function receives. For a direct bulk action: `columnLabel` is the action label, `targetValue`/`targetLabel` are '', `rows`/`skippedRows` the eligible / refused selected rows. For bulk Delete: `targetValue`/`targetLabel` are '', `columnLabel` is 'Delete', skipped counts are 0. */
 export interface BulkConfirmContext<T = any> {
   /** Rows that WILL be sent (eligible). For Delete: the selected count. */
   count: number;
@@ -391,6 +417,12 @@ export interface BulkActionDef {
   deletable?: (row: any) => boolean;
   /** Field changes: per-row check that the server will accept the move to a target (from `{ field, canChange }`). */
   canChange?: (row: any, target: string) => boolean;
+  /** True for a direct bulk action (from `{ field, action: true, label }`); `type` is `action-<key>` and `field` is not set (no inline select). */
+  action?: boolean;
+  /** Direct action: which rows the server will accept (from `{ field, action: true, eligible }`). */
+  eligible?: (row: any) => boolean;
+  /** Direct action: past-tense word in the result toast (from `{ doneLabel }`), default 'updated'. */
+  doneLabel?: string;
   /**
    * The item field this action targets (e.g. 'status', 'type').
    * When set the table shows an inline select populated from the column's option sources.
@@ -1056,7 +1088,7 @@ export declare class SelectComponent implements ControlValueAccessor, Validator,
   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 size: import("@angular/core").InputSignal<"sm" | "default">;
+  readonly size: import("@angular/core").InputSignal<"default" | "sm">;
   readonly _disabledInput: import("@angular/core").InputSignal<boolean>;
   private readonly _cvaDisabled;
   protected readonly disabled: import("@angular/core").Signal<boolean>;
@@ -1392,6 +1424,10 @@ export declare class DataTableComponent<T extends Record<string, any>> implement
    * `[{ field: 'status', exclude: ['EXPIRED'] }, 'delete']` (see `BulkUpdateOption`).
    * Use `{ field, allowedFrom: { TARGET: [sourceValues] } }` for a status workflow: only targets some selected row can
    * legally move to are offered, and rows that can't move are skipped (never sent).
+   * Use `{ field: 'resend', action: true, label: 'Resend', eligible?, confirm?, variant?, doneLabel? }` for a direct bulk action: a bar button
+   * that confirms and POSTs `<endpoint>/bulk/<field>` with `{ ids }` of the eligible rows (no select, no column needed).
+   * A blank `label` falls back to the key split on `_`, `-` and camelCase with only the first word capitalised ('send_reminder' -> 'Send reminder');
+   * two actions with the same key collapse to the first; an `eligible` that throws counts as "row not eligible".
    */
   readonly bulkUpdateOptions: import("@angular/core").InputSignal<BulkUpdateOption<T>[]>;
   readonly rowClick: import("@angular/core").OutputEmitterRef<T>;
@@ -1582,9 +1618,14 @@ export declare class DataTableComponent<T extends Record<string, any>> implement
   /**
    * Derives internal action definitions from the `bulkUpdateOptions` string array.
    * 'delete' → built-in danger action with table-managed confirm dialog.
+   * `{ field, action: true, label }` → direct action (type `action-<key>`, no column needed, no select).
    * Everything else → matched to a column: label = the entry's `label` when given, else "Change {col.label}"; options from column config.
    */
   protected readonly _bulkDefs: Signal<BulkActionDef[]>;
+  /** Fallback label of a direct action without one: splits the key on `_`, `-` and camelCase, capitalises the first word only ('send_reminder' / 'sendReminder' -> 'Send reminder'). */
+  private _actionKeyLabel;
+  /** Runs a direct action's `eligible` predicate; a predicate that throws counts as "row not eligible". */
+  private _isActionEligible;
   /** Options for a field-based bulk action: the field's options minus the entry's `exclude` values. */
   private _bulkOptionsFor;
   /** True when a row whose field currently holds `current` may be moved to `target` by this action. */
@@ -1638,12 +1679,20 @@ export declare class DataTableComponent<T extends Record<string, any>> implement
    * skipped-rows sentence, appended on a new paragraph unless the copy sets `omitSkippedNote`.
    */
   private _hostConfirm;
-  /** Why a bulk action can't be used right now ('' = it can). Only Delete with `deletable` can be blocked. */
+  /** Why a bulk action can't be used right now ('' = it can). Only Delete with `deletable` and a direct action with `eligible` can be blocked. */
   protected _bulkBlockedReason(def: BulkActionDef): string;
   /** The distinct reasons of the currently blocked bulk actions, shown as visible text next to the disabled buttons. */
   protected _bulkBlockedHints(): string[];
   /** Selected rows (loaded page) split by the delete option's `deletable` predicate; without it every selected row is deletable. */
   private _deleteSplit;
+  /** Selected rows (loaded page) split by a direct action's `eligible` predicate; without it every selected row is eligible. */
+  private _actionSplit;
+  /** Type of the direct bulk action whose request is in flight (null = none). */
+  protected readonly _runningAction: import("@angular/core").WritableSignal<string | null>;
+  /** True while a direct action's confirm dialog is open (guards against a second click). */
+  private _confirmingAction;
+  /** Direct bulk action: confirm, then POST `<endpoint>/bulk/<key>` with `{ ids }` of the eligible rows. */
+  private _runDirectAction;
   /** Called when the user clicks a bulk action button in the selection bar. */
   protected onBulkActionClick(def: BulkActionDef): void;
   /** True while the field-change confirmation dialog is open (guards against a second Apply click). */
@@ -1692,6 +1741,11 @@ export declare class DataTableComponent<T extends Record<string, any>> implement
    */
   private _fetchCounts;
   ngOnInit(): void;
+  /**
+   * Retry from the error state. A failed table shows no search box or quick tabs (there is nothing to search), so a search term that was
+   * active when the request failed could not be cleared any more: the retry therefore asks for the unsearched list on page 1.
+   */
+  protected _retryAfterError(): void;
   protected onSearchChange(val: string): void;
   /** Phone sort control: "Default" (value '') + one entry per sortable visible column and direction ("<key>:asc|desc"). */
   protected readonly _phoneSortOptions: Signal<{
@@ -2751,7 +2805,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<2 | 1 | 3 | 4 | 5 | 6 | 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>;
   /**
@@ -3662,7 +3716,7 @@ export declare class PhoneNumberPickerComponent {
   protected readonly modeCtl: FormControl<string>;
   protected readonly zipCtl: FormControl<string>;
   protected readonly areaCtl: FormControl<string>;
-  protected readonly step: import("@angular/core").WritableSignal<2 | 1 | 3>;
+  protected readonly step: import("@angular/core").WritableSignal<1 | 2 | 3>;
   protected readonly mode: import("@angular/core").WritableSignal<PhoneNumberSearchMode>;
   private readonly _zip;
   private readonly _area;
@@ -3776,7 +3830,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" | "primary" | "secondary" | "danger" | "warning" | "ghost" | "ghost-start" | "tab" | "icon" | "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' }`). */
@@ -3815,13 +3869,13 @@ export declare class ButtonComponent {
    * shows when the viewport is narrower than this; from the width itself the long text shows (`640`: >= 640px long, < 640px short, like a
    * `min-width: 640px` switch). Tokens are pure CSS; a number is tracked with `matchMedia`. Default `'md'`.
    */
-  readonly shortBelow: import("@angular/core").InputSignal<number | "sm" | "lg" | "md">;
+  readonly shortBelow: import("@angular/core").InputSignal<number | "sm" | "md" | "lg">;
   /** Classes of the two label spans: the token class, or `btn-sl-narrow` while a pixel breakpoint is active. */
   protected readonly _slClass: import("@angular/core").Signal<string>;
   private readonly _narrow;
   readonly color: import("@angular/core").InputSignal<string | undefined>;
   readonly active: import("@angular/core").InputSignal<boolean>;
-  readonly size: import("@angular/core").InputSignal<"sm" | "lg" | "md" | "xs">;
+  readonly size: import("@angular/core").InputSignal<"sm" | "md" | "lg" | "xs">;
   readonly type: import("@angular/core").InputSignal<"reset" | "submit" | "button">;
   readonly disabled: import("@angular/core").InputSignal<boolean>;
   readonly loading: import("@angular/core").InputSignal<boolean>;
@@ -4254,7 +4308,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;
@@ -4618,7 +4672,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" | "tel" | "password" | "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>;
@@ -4627,7 +4681,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" | "search" | "tel" | "url" | "decimal" | "numeric">;
+  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>;
@@ -4691,7 +4745,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" | "tel" | "password" | "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>;
@@ -6031,7 +6085,11 @@ export interface DropdownItem {
   count?: number;
   /** Greyed-out, not selectable and skipped by keyboard navigation. */
   disabled?: boolean;
+  /** Optional 14px icon before the label: an SVG path (the `d` value, like a toolbar action's `icon`). Decorative (hidden from assistive tech). */
+  icon?: string;
 }
+/** Which edge of the trigger the menu lines up with: `auto` (default) opens from the trigger's left edge and switches to its right edge when the menu would run off the right of the screen. */
+export type DropdownAlign = 'auto' | 'start' | 'end';
 export declare class DropdownComponent {
   readonly label: import("@angular/core").InputSignal<string>;
   readonly items: import("@angular/core").InputSignal<DropdownItem[]>;
@@ -6048,12 +6106,19 @@ export declare class DropdownComponent {
    */
   readonly ariaLabel: import("@angular/core").InputSignal<string>;
   readonly itemClick: import("@angular/core").OutputEmitterRef<DropdownItem>;
+  /** Which edge of the trigger the menu lines up with (default `auto`: from the left edge, switching to the right edge when it would run off the screen). */
+  readonly align: import("@angular/core").InputSignal<DropdownAlign>;
   protected readonly open: import("@angular/core").WritableSignal<boolean>;
   protected readonly loading: import("@angular/core").WritableSignal<boolean>;
+  /** Placement measured when the menu opens: right-aligned, above the trigger, and the height left on that side (the menu scrolls inside it). */
+  protected readonly alignEnd: import("@angular/core").WritableSignal<boolean>;
+  protected readonly openUp: import("@angular/core").WritableSignal<boolean>;
+  protected readonly menuMaxHeight: import("@angular/core").WritableSignal<number | null>;
   private readonly _loaded;
   private readonly _id;
   private readonly _host;
   private readonly _cdr;
+  private readonly _injector;
   private _pendingFocus;
   private _typeahead;
   private _typeaheadTimer;
@@ -6083,6 +6148,12 @@ export declare class DropdownComponent {
   protected onMenuKeydown(event: KeyboardEvent): void;
   protected onEscape(event: Event): void;
   private _setOpen;
+  /**
+   * Places the open menu from its measured size and the trigger's screen position: it keeps 16px clear of the screen edges, lines up with the trigger's
+   * right edge instead of the left when that is the side with room (`align` = auto), opens above the trigger when there is more room there, and is capped to
+   * the room left on that side (so it scrolls inside only when it truly does not fit). No layout APIs (server rendering) = the default placement.
+   */
+  private _place;
   private _openAndFocus;
   /** Renders the menu synchronously, then focuses the pending first / last enabled item. */
   private _focusPending;
@@ -6131,6 +6202,11 @@ export declare class DropdownComponent {
       "required": false;
       "isSignal": true;
     };
+    "align": {
+      "alias": "align";
+      "required": false;
+      "isSignal": true;
+    };
   }, {
     "itemClick": "itemClick";
   }, never, never, true, never>;
@@ -6220,7 +6296,7 @@ export declare class FormSectionComponent {
   }, {}, never, ["*"], true, never>;
 }
 export declare class FormRowComponent {
-  readonly cols: import("@angular/core").InputSignal<2 | 1 | 3 | 4>;
+  readonly cols: import("@angular/core").InputSignal<1 | 2 | 3 | 4>;
   static ɵfac: i0.ɵɵFactoryDeclaration<FormRowComponent, never>;
   static ɵcmp: i0.ɵɵComponentDeclaration<FormRowComponent, "ui-form-row", never, {
     "cols": {
@@ -6237,7 +6313,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 | "2" | "3" | 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, {
@@ -7259,11 +7335,11 @@ export declare class ChipComponent implements ControlValueAccessor {
  */
 export declare class ChipGroupComponent {
   /** Space between each chip. */
-  readonly gap: import("@angular/core").InputSignal<"sm" | "lg" | "md">;
+  readonly gap: import("@angular/core").InputSignal<"sm" | "md" | "lg">;
   /** Space above the chip group. */
-  readonly spaceAbove: import("@angular/core").InputSignal<"sm" | "none" | "md">;
+  readonly spaceAbove: import("@angular/core").InputSignal<"none" | "sm" | "md">;
   /** Space below the chip group. */
-  readonly spaceBelow: import("@angular/core").InputSignal<"sm" | "none" | "md">;
+  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">;
@@ -7523,6 +7599,8 @@ export declare class AlertComponent {
    * Default false: the body is a flex row with a gap, exactly as before (use it for text plus a button).
    */
   readonly inline: import("@angular/core").InputSignal<boolean>;
+  /** The box fills the height of its parent cell (two alerts in one grid row get the same height whatever their text length). Default false. */
+  readonly fill: import("@angular/core").InputSignal<boolean>;
   readonly dismissed: import("@angular/core").OutputEmitterRef<void>;
   static ɵfac: i0.ɵɵFactoryDeclaration<AlertComponent, never>;
   static ɵcmp: i0.ɵɵComponentDeclaration<AlertComponent, "ui-alert", never, {
@@ -7561,6 +7639,11 @@ export declare class AlertComponent {
       "required": false;
       "isSignal": true;
     };
+    "fill": {
+      "alias": "fill";
+      "required": false;
+      "isSignal": true;
+    };
   }, {
     "dismissed": "dismissed";
   }, never, ["*"], true, never>;
@@ -9171,7 +9254,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<2 | 1 | 3 | 4 | 5 | 6 | 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. */
@@ -9204,6 +9287,8 @@ export declare class DetailCardComponent {
   readonly editAriaLabel: import("@angular/core").InputSignal<string>;
   /** true = the card fills the height of its container (a grid cell / flex item) so sibling cards line up; the body grows. Spacing between cells comes from the gap: the filled card's margin-bottom is 0. Default false: unchanged. */
   readonly fill: import("@angular/core").InputSignal<boolean>;
+  /** Max height of the card body (any CSS length, e.g. `360px`): a longer body scrolls inside the card so the card never gets crazy long. Empty = no limit (or the `--dc-body-max-height` custom property, which a page can set on the card or an ancestor). */
+  readonly maxBodyHeight: import("@angular/core").InputSignal<string>;
   /** true = a click on the card (outside interactive controls and text selections) toggles `selected`. The card must contain its own checkbox for keyboard / screen-reader users. Default false: no handler, cursor or outline. */
   readonly selectable: import("@angular/core").InputSignal<boolean>;
   /** Two-way: whether the card is selected (only shown / toggled when `selectable`). */
@@ -9318,6 +9403,11 @@ export declare class DetailCardComponent {
       "required": false;
       "isSignal": true;
     };
+    "maxBodyHeight": {
+      "alias": "maxBodyHeight";
+      "required": false;
+      "isSignal": true;
+    };
     "selectable": {
       "alias": "selectable";
       "required": false;
@@ -9383,6 +9473,55 @@ export declare class DividerComponent {
     };
   }, {}, never, never, true, never>;
 }
+export type FixedFooterAlign = 'start' | 'center' | 'end' | 'between';
+/**
+ * A footer bar fixed to the bottom of the page: it stays visible while the page scrolls, sits flush with the bottom of the viewport
+ * and spans the full width of the content area (from the side nav to the end of the screen). Put it as the LAST child of the page:
+ *
+ *   <div class="settings-page">
+ *     ...the page content...
+ *     <ui-fixed-footer>
+ *       <ui-button variant="primary" (click)="save()">Save All Settings</ui-button>
+ *     </ui-fixed-footer>
+ *   </div>
+ *
+ * How it works: the bar is `position: sticky` at the bottom of the scrolling page. Inside `ui-app-shell` the content area is padded
+ * (24px / 16px / 12px by width) and the shell publishes that padding as `--shell-content-padding`; the footer cancels it with negative
+ * margins and a negative `bottom`, so it reaches the viewport edges instead of stopping inside the padding. Outside the shell the
+ * variable is unset (0px) and the bar simply sticks to the bottom of its scrolling parent. Nothing else needs to be set up.
+ *
+ * Inputs:
+ *  - `align` (default `end`): where the projected content sits: start | center | end | between.
+ *  - `ariaLabel` (default `Page actions`): the accessible name of the bar (a labelled region).
+ *  - `elevated` (default true): the soft shadow above the bar; false = just the top border.
+ * Theming by CSS custom properties: `--ui-footer-bg` (white), `--ui-footer-border` (#e2e8f0), `--ui-footer-pad-y` (20px; 16px up to 1024px, 14px up to 480px).
+ */
+export declare class FixedFooterComponent {
+  /** Where the projected content sits in the bar. */
+  readonly align: import("@angular/core").InputSignal<FixedFooterAlign>;
+  /** Accessible name of the bar. */
+  readonly ariaLabel: import("@angular/core").InputSignal<string>;
+  /** The soft shadow above the bar (false = only the top border). */
+  readonly elevated: import("@angular/core").InputSignal<boolean>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<FixedFooterComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<FixedFooterComponent, "ui-fixed-footer", never, {
+    "align": {
+      "alias": "align";
+      "required": false;
+      "isSignal": true;
+    };
+    "ariaLabel": {
+      "alias": "ariaLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "elevated": {
+      "alias": "elevated";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, ["*"], true, never>;
+}
 /** One column (stage) of a [ui-board]. `items` are the host's own records; the board never reads their fields. */
 export interface BoardColumn<T = unknown> {
   /** Unique id of the column (the stage key); reported in `from` / `to` of a move. */
@@ -9921,7 +10060,7 @@ export declare class SectionHeaderComponent {
   /** 1px border and 10px corners. */
   readonly bordered: import("@angular/core").InputSignal<boolean>;
   /** Visual size: 'sm', 'md' (default), 'lg' or 'xl'. Independent of `level`; anything else renders as 'md'. */
-  readonly size: import("@angular/core").InputSignal<"sm" | "lg" | "md" | "xl">;
+  readonly size: import("@angular/core").InputSignal<"sm" | "md" | "lg" | "xl">;
   /** Remove the built-in top padding. */
   readonly noPaddingTop: import("@angular/core").InputSignal<boolean>;
   /** Remove the built-in left padding. */
@@ -11005,8 +11144,8 @@ export declare class ShowComponent {
   readonly from: import("@angular/core").InputSignal<ShowBreakpoint | null>;
   readonly below: import("@angular/core").InputSignal<ShowBreakpoint | null>;
   private readonly win;
-  protected readonly fromToken: import("@angular/core").Signal<"sm" | "lg" | "md" | null>;
-  protected readonly belowToken: import("@angular/core").Signal<"sm" | "lg" | "md" | null>;
+  protected readonly fromToken: import("@angular/core").Signal<"sm" | "md" | "lg" | null>;
+  protected readonly belowToken: import("@angular/core").Signal<"sm" | "md" | "lg" | null>;
   protected readonly fromMatch: import("@angular/core").WritableSignal<boolean>;
   protected readonly belowMatch: import("@angular/core").WritableSignal<boolean>;
   constructor();
@@ -11230,12 +11369,13 @@ export interface IntegrationPlainText {
 export declare function integrationPlainText(html: string): IntegrationPlainText;
 /**
  * How a connect button for an integration works.
- *  - `oauth`: GET `authorizeEndpoint` answers `{ url }` and the browser goes there (QuickBooks, Slack, Gmail, Outlook, Google / Outlook calendar).
+ *  - `oauth`: GET `authorizeEndpoint` answers `{ url }` (or `{ authUrl }`) and the browser goes there (in a NEW tab with `newTab: true`, opened inside the click so popup blockers allow it, else in this tab) (QuickBooks, Slack, Gmail, Outlook, Google / Outlook calendar, Stripe, Square).
  *  - `area-code`: asks for a US area code and POSTs `{ areaCode }` to `connectEndpoint` (Twilio buys a number that way); the status is reloaded after.
  */
 export type SetupIntegrationConnect = {
   type: 'oauth';
   authorizeEndpoint: string;
+  newTab?: boolean;
 } | {
   type: 'area-code';
   connectEndpoint: string;
@@ -11282,6 +11422,8 @@ export interface SetupWizardTexts {
   selectSource: string;
   connected: string;
   importMore: string;
+  /** The link on an import step (before data came in) that downloads the template CSV: the header row and the config's `templateSampleRows`, so the user can add their data to it. */
+  downloadSample: string;
   /** Shown (and described by the disabled Continue) on an import step with `requireImport` until data came in. */
   importRequired: string;
   /** An import where some rows were refused: the warning's title and text (rows that failed must be fixed and imported again before Continue) and the button that returns to the sources. */
@@ -11311,6 +11453,8 @@ export interface SetupImportStep {
   buttonLabel: string;
   /** Hint above the button. */
   hint?: string;
+  /** Text of the template download link, e.g. "Download Products/Services CSV Template" (default: the `downloadSample` text, "Download CSV Template"). The file is this step's own template: the config's field labels and `templateSampleRows`. */
+  templateLabel?: string;
   /** Result alert title, built from the number imported (default `${n} ${config.entityNamePlural.toLowerCase()} imported successfully.`). */
   resultTitle?: (imported: number) => string;
   /** Result alert body. */
@@ -11373,7 +11517,9 @@ export interface SetupWizardApi {
   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`,
+ * The integrations every app can offer in a setup step. Payment processing (`stripe`, `square`) belongs in almost every app's wizard:
+ * `setupIntegrations('stripe', 'square')` is the ready-made "connect payments" step (an app that has one processor passes just that one; the
+ * backend answers 409 when the other is already connected, and the step shows it). The endpoints follow the convention the apps' backends already use (`GET <x>/status`,
  * `GET <x>/authorize` answering `{ url }`); an app whose routes differ spreads a preset and overrides what differs:
  * `{ ...SETUP_INTEGRATIONS['quickbooks'], statusEndpoint: '/accounting/status' }`.
  */
@@ -11465,7 +11611,7 @@ export declare class SetupWizardComponent {
   /** An import step with `requireImport` keeps Continue off until something came in (a CSV import or `markCompleted`, e.g. a live sync). */
   protected readonly importBlocked: import("@angular/core").Signal<boolean>;
   /** The step's own two parts (`splitLayout`) show as two tabs, one card at a time; this is the open one (it starts on the app's part on every visit). */
-  protected readonly splitTab: import("@angular/core").WritableSignal<"extra" | "main">;
+  protected readonly splitTab: import("@angular/core").WritableSignal<"main" | "extra">;
   protected readonly splitTabs: import("@angular/core").Signal<{
     key: string;
     label: string;
@@ -11475,6 +11621,8 @@ export declare class SetupWizardComponent {
   readonly steps: import("@angular/core").InputSignal<SetupStep[]>;
   /** Replaces any of the built-in texts. */
   readonly texts: import("@angular/core").InputSignal<Partial<SetupWizardTexts>>;
+  /** The key of the step to open first (for example the one a payment provider's return address names); default (empty or unknown) = the first step. Read once, when the wizard starts. */
+  readonly initialStep: import("@angular/core").InputSignal<string>;
   /** The last step's button ("Go to Dashboard"). */
   readonly finished: import("@angular/core").OutputEmitterRef<void>;
   /** "Exit Setup". */
@@ -11494,6 +11642,12 @@ export declare class SetupWizardComponent {
   private readonly importErrors;
   private readonly statuses;
   readonly busy: import("@angular/core").WritableSignal<boolean>;
+  /** Key of the integration whose authorization address is being requested: only that card's button shows a loader (the footer's Save & Continue is not busy), and no second press starts a second connection. */
+  protected readonly connecting: import("@angular/core").WritableSignal<string>;
+  /** The blank tab opened on the Connect click (the click is the user gesture; the address arrives later), or null when none was opened / the browser blocked it. */
+  private pendingTab;
+  /** A provider's page was opened in another tab: when this tab becomes visible again the step's statuses are read again. */
+  private connectTabOpened;
   /** What a custom step's template receives (`let-wizard`). */
   protected readonly api: SetupWizardApi;
   protected readonly error: import("@angular/core").WritableSignal<string>;
@@ -11541,6 +11695,8 @@ export declare class SetupWizardComponent {
   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;
+  /** The sample CSV (the import window's template): the field labels as the header row and the config's example rows. */
+  protected downloadSample(): void;
   protected openImport(key: string): void;
   protected onImported(key: string): void;
   protected importResult(key: string): number | null;
@@ -11553,12 +11709,18 @@ export declare class SetupWizardComponent {
   protected isConnected(i: SetupIntegration): boolean;
   protected detailFor(i: SetupIntegration): string;
   protected connect(i: SetupIntegration): void;
+  /** Opens an empty tab for the provider's page (null when the browser refuses; the address then opens in this tab). */
+  protected openTab(): Window | null;
+  private closePendingTab;
   private startConnect;
+  private isWebAddress;
   /** SVG path of a library icon (the buttons' leading / trailing glyph). */
   protected iconD(name: string): string;
   protected areaCodeLabelFor(i: SetupIntegration): string;
-  /** Sends the browser to the provider's authorization page. */
+  /** Opens the provider's authorization page: in the tab opened on the click, else (a blocked tab) in this one. */
   protected redirect(url: string): void;
+  /** Sends THIS tab to the address (no new tab was opened, the browser refused it or the user closed it). */
+  protected navigateHere(url: string): void;
   protected submitAreaCode(i: SetupIntegration): void;
   static ɵfac: i0.ɵɵFactoryDeclaration<SetupWizardComponent, never>;
   static ɵcmp: i0.ɵɵComponentDeclaration<SetupWizardComponent, "ui-setup-wizard", never, {
@@ -11572,6 +11734,11 @@ export declare class SetupWizardComponent {
       "required": false;
       "isSignal": true;
     };
+    "initialStep": {
+      "alias": "initialStep";
+      "required": false;
+      "isSignal": true;
+    };
   }, {
     "finished": "finished";
     "exited": "exited";