@forgeroute/ui 0.4.14 → 0.4.16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@forgeroute/ui",
-  "version": "0.4.14",
+  "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;
@@ -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>;
 }
 /**
@@ -2390,7 +2445,8 @@ export declare class TooltipDirective {
 /**
  * A small gold star with a hover / focus tooltip: `<ui-star tooltip="Authorization Form" />`.
  *
- * The star is always gold (there is no color input). `tooltip` is the text the user sees on hover or keyboard focus (library `uiTooltip`);
+ * The star is gold by default (there is no color input); `[filled]="false"` draws an uncolored outline star instead, and `[interactive]="true"`
+ * makes it a button that emits `(starClick)` — e.g. an outline star "Click to make primary photo" next to the gold primary one. `tooltip` is the text the user sees on hover or keyboard focus (library `uiTooltip`);
  * it is also the star's accessible name, so a screen reader reads it too. Without a tooltip the star is decorative (hidden from assistive tech).
  * In `<ui-data-table>` use `ColumnDef.starFn` to put one to the left of a text cell (e.g. the name column).
  */
@@ -2399,6 +2455,11 @@ export declare class StarComponent {
   readonly tooltip: import("@angular/core").InputSignal<string>;
   /** Star size in px. Default 16. */
   readonly size: import("@angular/core").InputSignal<number>;
+  /** true (default) = the gold star. false = an uncolored outline star (e.g. "not the primary one"). */
+  readonly filled: import("@angular/core").InputSignal<boolean>;
+  /** true = the star is a real button (keyboard + click) that emits `starClick`; `tooltip` is then its accessible name. Default false (a plain marker). */
+  readonly interactive: import("@angular/core").InputSignal<boolean>;
+  readonly starClick: import("@angular/core").OutputEmitterRef<MouseEvent>;
   protected readonly hasTooltip: import("@angular/core").Signal<boolean>;
   static ɵfac: i0.ɵɵFactoryDeclaration<StarComponent, never>;
   static ɵcmp: i0.ɵɵComponentDeclaration<StarComponent, "ui-star", never, {
@@ -2412,7 +2473,19 @@ export declare class StarComponent {
       "required": false;
       "isSignal": true;
     };
-  }, {}, never, never, true, never>;
+    "filled": {
+      "alias": "filled";
+      "required": false;
+      "isSignal": true;
+    };
+    "interactive": {
+      "alias": "interactive";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {
+    "starClick": "starClick";
+  }, never, never, true, never>;
 }
 export type ImageRepositionShape = 'circle' | 'rounded';
 /**
@@ -4085,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). */
@@ -4096,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>;
@@ -4167,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;
@@ -4221,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;
@@ -6716,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, …).