@forgeroute/ui 0.4.15 → 0.4.16

package/package.json

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

package/types/forgeroute-ui.d.ts

@@ -398,6 +398,18 @@ export interface BulkActionEvent {
   value?: string;
   skippedCount: number;
 }
+/** Emitted by (rowReorder) after the user moves a row (`reorderable`). */
+export interface TableRowReorderEvent<T = any> {
+  /** The row that was moved. */
+  item: T;
+  /** Its index on the page before and after the move (0-based). */
+  from: number;
+  to: number;
+  /** The rows on the page in their new order. */
+  items: T[];
+  /** How many rows come before this page (0 on the first page), so `offset + to` is the row's position in the whole list. */
+  offset: number;
+}
 export interface PageResponse<T> {
   content: T[];
   totalElements: number;
@@ -961,7 +973,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>;
@@ -1307,6 +1319,16 @@ export declare class DataTableComponent<T extends Record<string, any>> implement
   readonly bulkAction: import("@angular/core").OutputEmitterRef<BulkActionEvent>;
   /** Emitted after a built-in single-row delete completes successfully. */
   readonly rowDeleted: import("@angular/core").OutputEmitterRef<T>;
+  /**
+   * Optional drag-and-drop ordering of the rows. Off by default; when `true` (and the user has full access) every row gets a grip
+   * (drag it, or focus it and use the arrow keys / Home / End; phone cards get Move up / Move down buttons). Reordering is only
+   * offered while the list is in its stored order: with a sort, search, quick tab or column filter active the grips are disabled
+   * (their tooltip says why), because the visible order is then not the stored one. The move is applied to the page on screen at
+   * once and announced as `(rowReorder)`; the host saves it (a failed save should call `refresh()` to bring back the stored order).
+   */
+  readonly reorderable: import("@angular/core").InputSignal<boolean>;
+  /** Emitted after the user moves a row: `items` is the page in its new order, `from` / `to` are page indexes, `offset` is the number of rows on earlier pages. */
+  readonly rowReorder: import("@angular/core").OutputEmitterRef<TableRowReorderEvent<T>>;
   private readonly config;
   private readonly http;
   private readonly destroyRef;
@@ -1400,6 +1422,33 @@ export declare class DataTableComponent<T extends Record<string, any>> implement
   protected readonly _toolbarButtons: Signal<ToolbarAction[]>;
   /** True while the table is empty and unfiltered but the host kept a More Actions item (`keepWhenEmpty`) — the menu stays. */
   protected readonly _keepMoreActions: Signal<boolean>;
+  /** The reorder column is part of the table (the grips may still be disabled, see `_reorderActive`). */
+  protected readonly _reorderOn: Signal<boolean>;
+  /** Moves are allowed: the list is in its stored order (no sort / search / tab / filter), loaded, and has more than one row. */
+  protected readonly _reorderActive: Signal<boolean>;
+  protected readonly _reorderHint: Signal<"There is nothing to reorder" | "Clear the sort, search and filters to change the order">;
+  /** One id per table, so each grip can point to the instructions (aria-describedby) even with several tables on a page. */
+  protected readonly _reorderHelpId: string;
+  protected readonly _dragFrom: import("@angular/core").WritableSignal<number | null>;
+  /** Key of the row being dragged: the index can go stale if the page reloads mid-drag, the key cannot. */
+  private _dragKey;
+  protected readonly _dragOver: import("@angular/core").WritableSignal<number | null>;
+  /** Polite screen-reader message after a move. */
+  protected readonly _reorderAnnouncement: import("@angular/core").WritableSignal<string>;
+  private readonly _host;
+  protected reorderLabel(item: T): string;
+  protected onGripDragStart(e: DragEvent, index: number): void;
+  protected onGripDragEnd(): void;
+  protected onRowDragOver(e: DragEvent, index: number): void;
+  protected onRowDrop(e: DragEvent, index: number): void;
+  protected onGripKeydown(e: KeyboardEvent, index: number): void;
+  /**
+   * A Move up / Move down button (touch screens and phone cards). The pressed button can end up disabled (the row reached an end), and a
+   * focused control that gets disabled drops focus to the page, so focus goes to the row's other Move button then.
+   */
+  protected moveByButton(index: number, direction: -1 | 1): void;
+  /** Moves the row at `from` to `to` (both page indexes) in the table and tells the host. false = nothing changed. */
+  protected moveRow(from: number, to: number): boolean;
   protected readonly _hasActiveFilters: Signal<boolean>;
   /** Host `params` with empty values dropped; equal by content so a new object with the same values doesn't reload. */
   protected readonly _extraParams: Signal<Record<string, string>>;
@@ -1455,7 +1504,7 @@ export declare class DataTableComponent<T extends Record<string, any>> implement
    */
   private readonly _rowNameSuffix;
   /** A row's accessible name: its name, plus the position among rows of the same name when that name repeats on the page. */
-  private rowAccessibleName;
+  protected rowAccessibleName(item: T): string;
   /** "Select Acme Electric" — a row's selection checkbox name ("Select Acme Electric (2 of 3)" when the name repeats on the page). */
   protected selectRowLabel(item: T): string;
   /**
@@ -1769,6 +1818,11 @@ export declare class DataTableComponent<T extends Record<string, any>> implement
       "required": false;
       "isSignal": true;
     };
+    "reorderable": {
+      "alias": "reorderable";
+      "required": false;
+      "isSignal": true;
+    };
   }, {
     "rowClick": "rowClick";
     "linkClick": "linkClick";
@@ -1782,6 +1836,7 @@ export declare class DataTableComponent<T extends Record<string, any>> implement
     "tabChange": "tabChange";
     "bulkAction": "bulkAction";
     "rowDeleted": "rowDeleted";
+    "rowReorder": "rowReorder";
   }, never, never, true, never>;
 }
 /**
@@ -2279,7 +2334,7 @@ export declare class AudioPlayerComponent {
   /** Accessible name of the player. */
   readonly ariaLabel: import("@angular/core").InputSignal<string>;
   /** How much to load before play: 'metadata' (default), 'auto' or 'none'. */
-  readonly preload: import("@angular/core").InputSignal<"none" | "metadata" | "auto">;
+  readonly preload: import("@angular/core").InputSignal<"none" | "auto" | "metadata">;
   /** Fires when the browser can't load or decode the source. */
   readonly playbackError: import("@angular/core").OutputEmitterRef<void>;
   protected readonly failed: import("@angular/core").WritableSignal<boolean>;
@@ -2529,7 +2584,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<3 | 1 | 2 | 5 | 6 | 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>;
   /**
@@ -3410,7 +3465,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<3 | 1 | 2>;
+  protected readonly step: import("@angular/core").WritableSignal<1 | 2 | 3>;
   protected readonly mode: import("@angular/core").WritableSignal<PhoneNumberSearchMode>;
   private readonly _zip;
   private readonly _area;
@@ -3524,7 +3579,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' }`). */
@@ -3570,7 +3625,7 @@ export declare class ButtonComponent {
   readonly color: import("@angular/core").InputSignal<string | undefined>;
   readonly active: import("@angular/core").InputSignal<boolean>;
   readonly size: import("@angular/core").InputSignal<"sm" | "md" | "lg" | "xs">;
-  readonly type: import("@angular/core").InputSignal<"button" | "reset" | "submit">;
+  readonly type: import("@angular/core").InputSignal<"reset" | "submit" | "button">;
   readonly disabled: import("@angular/core").InputSignal<boolean>;
   readonly loading: import("@angular/core").InputSignal<boolean>;
   readonly fullWidth: import("@angular/core").InputSignal<boolean>;
@@ -4103,6 +4158,54 @@ export declare class ErrorStateComponent {
     "retry": "retry";
   }, never, never, true, never>;
 }
+/** One password rule: `test` decides whether the typed password satisfies it. */
+export interface PasswordRule {
+  id: string;
+  label: string;
+  test: (password: string) => boolean;
+}
+/** The default rules (same as the backends): 8+ characters, an uppercase letter, a lowercase letter, a digit and a special character. */
+export declare const DEFAULT_PASSWORD_RULES: readonly PasswordRule[];
+/** True when the password satisfies every rule (default: {@link DEFAULT_PASSWORD_RULES}). Use it to gate Save. */
+export declare function passwordMeetsRules(password: string, rules?: readonly PasswordRule[]): boolean;
+/**
+ * The password requirements checklist. Pass the typed password; each rule shows as a row that turns green with a check mark once it is
+ * satisfied, and stays grey with an empty circle until then. There is no "(met)" text: the state is also in `data-met` and in
+ * visually hidden text for screen readers, so it is not colour alone.
+ *
+ * Also available as `<ui-text-input type="password" [passwordRequirements]="true">`, which shows this list under the field.
+ */
+export declare class PasswordRequirementsComponent {
+  /** The password to check. */
+  readonly value: import("@angular/core").InputSignal<string>;
+  /** Rules to show; default {@link DEFAULT_PASSWORD_RULES}. */
+  readonly rules: import("@angular/core").InputSignal<readonly PasswordRule[]>;
+  readonly title: import("@angular/core").InputSignal<string>;
+  protected readonly _check: string;
+  protected readonly _results: import("@angular/core").Signal<{
+    id: string;
+    label: string;
+    met: boolean;
+  }[]>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<PasswordRequirementsComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<PasswordRequirementsComponent, "ui-password-requirements", never, {
+    "value": {
+      "alias": "value";
+      "required": false;
+      "isSignal": true;
+    };
+    "rules": {
+      "alias": "rules";
+      "required": false;
+      "isSignal": true;
+    };
+    "title": {
+      "alias": "title";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, never, true, never>;
+}
 export declare class TextInputComponent implements ControlValueAccessor, Validator, UiFieldValidity {
   readonly label: import("@angular/core").InputSignal<string>;
   /** Accessible name for a field with no visible label (e.g. an inline cell or title input). */
@@ -4114,6 +4217,18 @@ export declare class TextInputComponent implements ControlValueAccessor, Validat
    * Meant for a short mark of 1-3 characters.
    */
   readonly prefix: import("@angular/core").InputSignal<string>;
+  /**
+   * `type="password"` only: puts an eye button inside the field, at its right end, that shows / hides the typed text (the eye with a slash
+   * means "hidden again"). Per field, starts hidden; the button is a toggle (`aria-pressed`) named "Show password". Ignored for other types.
+   */
+  readonly revealable: import("@angular/core").InputSignal<boolean>;
+  /**
+   * `type="password"` only: shows the password requirements checklist under the field (`ui-password-requirements`) once the user has typed
+   * (it hides again when the host clears the field, e.g. after a successful change). Each rule turns green with a check when satisfied. Off by default; ignored for other types.
+   */
+  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 maxlength: import("@angular/core").InputSignal<number | undefined>;
   readonly required: import("@angular/core").InputSignal<boolean>;
@@ -4185,6 +4300,17 @@ export declare class TextInputComponent implements ControlValueAccessor, Validat
   private readonly _numeric;
   /** The native `step` attribute: only for `type="number"` and only for a finite number above 0; otherwise none (the browser's step of 1). */
   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 _eyePath: string;
+  protected readonly _eyeOffPath: string;
+  protected readonly _showRequirements: import("@angular/core").Signal<boolean>;
+  /** `aria-describedby`: the error / hint text and, while the requirements checklist is shown, the checklist (so a screen reader reads the rules with the field). */
+  protected readonly _describedBy: import("@angular/core").Signal<string | null>;
+  /** True once the user typed in the field; a host-written empty value (a form reset) puts it back to false. */
+  private readonly _typed;
+  protected readonly _defaultRules: readonly PasswordRule[];
   private _warned;
   private readonly _formatting;
   private readonly _issue;
@@ -4239,6 +4365,21 @@ export declare class TextInputComponent implements ControlValueAccessor, Validat
       "required": false;
       "isSignal": true;
     };
+    "revealable": {
+      "alias": "revealable";
+      "required": false;
+      "isSignal": true;
+    };
+    "passwordRequirements": {
+      "alias": "passwordRequirements";
+      "required": false;
+      "isSignal": true;
+    };
+    "passwordRules": {
+      "alias": "passwordRules";
+      "required": false;
+      "isSignal": true;
+    };
     "type": {
       "alias": "type";
       "required": false;
@@ -5685,7 +5826,7 @@ export declare class FormSectionComponent {
   }, {}, never, ["*"], true, never>;
 }
 export declare class FormRowComponent {
-  readonly cols: import("@angular/core").InputSignal<3 | 1 | 2 | 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": {
@@ -5702,7 +5843,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<"" | 3 | 2 | "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, {
@@ -6734,7 +6875,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' | 'edit' | 'delete' | 'download' | 'duplicate' | 'archive' | 'restore' | 'share' | 'email' | 'message' | 'call';
+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';
 /**
  * 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, …).
@@ -8281,7 +8422,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<3 | 1 | 2 | 5 | 6 | 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. */