@forgeroute/ui 0.4.54 → 0.4.56

package/package.json

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

package/types/forgeroute-ui.d.ts

@@ -1836,6 +1836,14 @@ export declare class DataTableComponent<T extends Record<string, any>> implement
    * zero rows, so they can change or clear it. Headers are plain labels otherwise.
    */
   protected readonly _showColumnControls: Signal<boolean>;
+  /**
+   * Keys of sortable columns whose cell is blank ('' or '—') on every loaded row — nothing to sort by, so the sort control is
+   * hidden. Judged from the loaded page (the same text the cells show); an active sort on the column keeps its control so it
+   * can be changed or cleared.
+   */
+  protected readonly _emptyColumnKeys: Signal<Set<string>>;
+  /** A header sort control shows for a sortable column while there are rows and the column has a value somewhere. */
+  protected _canShowSort(col: ColumnDef): boolean;
   protected readonly _hasPhoneControls: Signal<boolean>;
   /** Phone sort select → sets the sort directly (same state, page reset and load as the header's onSort). */
   protected onPhoneSort(value: string): void;
@@ -6729,6 +6737,11 @@ export type CardListIcon = 'call' | 'email' | 'sms' | 'task' | 'doc' | 'money' |
  * Other projected content (default slot) shows after the chips at the row end; `[card-stats]` and `[card-detail]` add a footer row
  * under the row (use the `.cli-stat`, `.cli-stat-label`, `.cli-stat-value`, `.cli-stat-divider` classes inside `[card-stats]`).
  *
+ * Delete and a generic action (additive; unused = the row looks exactly as before). Row-end order: Edit, View, action, delete, then projected content.
+ *  - `[deletable]="true"` shows a red icon-only trash button (28px, 44px hit area on touch) -> `(delete)`; name it with `deleteLabel` (default "Delete"), `deleteTestId` sets its `data-testid`.
+ *    The page owns the confirmation (the component never deletes anything itself).
+ *  - `actionLabel="Download"` shows a grey chip button with that text -> `(action)`; `actionTestId`, `actionAriaLabel` as for the other buttons.
+ *
  * Accessibility: the Edit / View buttons are real buttons; give them a longer name with `editAriaLabel` / `viewAriaLabel`
  * ("Edit task Call John") when the visible word alone is ambiguous in a list. The priority dot (`high`/`medium`/`low`) has a tooltip and an
  * accessible name (`High priority`, ...), is focusable so the tooltip works by keyboard; `blue`/`green` dots are decorative. The icon circle is decorative.
@@ -6757,10 +6770,22 @@ export declare class CardListItemComponent {
   /** Accessible names for the buttons when the visible word is not enough ("Edit task Call John"). */
   readonly editAriaLabel: import("@angular/core").InputSignal<string>;
   readonly viewAriaLabel: import("@angular/core").InputSignal<string>;
+  /** Built-in icon-only trash button -> `delete`. The accessible name comes from `deleteLabel` ("Delete task Call John"). */
+  readonly deletable: import("@angular/core").InputSignal<boolean>;
+  readonly deleteLabel: import("@angular/core").InputSignal<string>;
+  /** `data-testid` of the delete button (none when empty). */
+  readonly deleteTestId: import("@angular/core").InputSignal<string>;
+  /** Built-in secondary chip button (text = `actionLabel`, e.g. "Download") -> `action`; shown only while `actionLabel` is not empty. */
+  readonly actionLabel: import("@angular/core").InputSignal<string>;
+  readonly actionTestId: import("@angular/core").InputSignal<string>;
+  readonly actionAriaLabel: import("@angular/core").InputSignal<string>;
   readonly editClick: import("@angular/core").OutputEmitterRef<void>;
   readonly viewClick: import("@angular/core").OutputEmitterRef<void>;
+  readonly delete: import("@angular/core").OutputEmitterRef<void>;
+  readonly action: import("@angular/core").OutputEmitterRef<void>;
   protected readonly calendarPath = "M5 4h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2z M16 2v4 M8 2v4 M3 10h18";
   protected readonly editPath = "M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7 M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z";
+  protected readonly trashPath = "M3 6h18 M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2 M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6 M10 11v6 M14 11v6";
   protected readonly iconPath: import("@angular/core").Signal<string | null>;
   protected readonly indicatorLabel: import("@angular/core").Signal<string>;
   static ɵfac: i0.ɵɵFactoryDeclaration<CardListItemComponent, never>;
@@ -6830,9 +6855,41 @@ export declare class CardListItemComponent {
       "required": false;
       "isSignal": true;
     };
+    "deletable": {
+      "alias": "deletable";
+      "required": false;
+      "isSignal": true;
+    };
+    "deleteLabel": {
+      "alias": "deleteLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "deleteTestId": {
+      "alias": "deleteTestId";
+      "required": false;
+      "isSignal": true;
+    };
+    "actionLabel": {
+      "alias": "actionLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "actionTestId": {
+      "alias": "actionTestId";
+      "required": false;
+      "isSignal": true;
+    };
+    "actionAriaLabel": {
+      "alias": "actionAriaLabel";
+      "required": false;
+      "isSignal": true;
+    };
   }, {
     "editClick": "editClick";
     "viewClick": "viewClick";
+    "delete": "delete";
+    "action": "action";
   }, never, ["[card-list-inline]", "[card-list-action]", "*", "[card-stats]", "[card-detail]"], true, never>;
 }
 /** A note as the notes API returns it. */
@@ -6870,8 +6927,22 @@ export declare class NotesComponent {
   /** What the notes belong to, as the API names it: `contact`, `transaction`, `property`, `task`, ... */
   readonly resourceType: import("@angular/core").InputSignal<string>;
   readonly resourceId: import("@angular/core").InputSignal<string>;
+  /**
+   * Resource-specific notes API (optional). When set (e.g. `/permits/42/notes`, relative to `FORGEROUTE_CONFIG.baseUrl`), the component uses it instead of
+   * the generic `/notes/{resourceType}/{resourceId}` API and `resourceType` / `resourceId` are not needed:
+   *  - `GET    {basePath}?page=<0-based>&size=5` -> `{ content, totalElements, ... }` (`page` or Spring's `number` is accepted for the page index)
+   *  - `POST   {basePath}` `{ content }` -> the new note
+   *  - `PUT    {basePath}/{noteId}` `{ content }` (only when `editable` is true)
+   *  - `DELETE {basePath}/{noteId}`
+   * A note's text may come as `body` or `content`; a missing `updatedAt` counts as `createdAt` (no "edited" tag). Empty (default) = the generic API.
+   */
+  readonly basePath: import("@angular/core").InputSignal<string>;
   /** True: list only, no add box, edit or delete. */
   readonly readOnly: import("@angular/core").InputSignal<boolean>;
+  /** False hides the edit icon (for APIs without an update endpoint). Default true. */
+  readonly editable: import("@angular/core").InputSignal<boolean>;
+  /** Longest note, in characters after trimming (default `NOTES_MAX_LENGTH`, 10000). Set it to the API's column size, e.g. 255 for customer notes. */
+  readonly maxLength: import("@angular/core").InputSignal<number>;
   /** Total number of notes after every load / add / delete. */
   readonly totalChange: import("@angular/core").OutputEmitterRef<number>;
   private readonly http;
@@ -6879,8 +6950,6 @@ export declare class NotesComponent {
   private readonly destroyRef;
   private readonly apiBase;
   readonly pageSize = 5;
-  /** The character limit of a note (see `NOTES_MAX_LENGTH`). */
-  readonly maxLength = 10000;
   readonly notes: import("@angular/core").WritableSignal<NoteItem[]>;
   readonly loading: import("@angular/core").WritableSignal<boolean>;
   readonly saving: import("@angular/core").WritableSignal<boolean>;
@@ -6898,6 +6967,12 @@ export declare class NotesComponent {
   /** True when the trimmed text is not empty and within the limit. */
   protected validBody(text: string): boolean;
   private get listUrl();
+  private noteUrl;
+  private get ready();
+  /** Request body for create / update: `{ content }` for a `basePath` API, `{ body }` for the generic one. */
+  private payload;
+  /** Accepts `body` or `content` as the text and a missing `updatedAt`. */
+  private normalize;
   constructor();
   loadPage(p: number): void;
   addNote(): void;
@@ -6918,11 +6993,26 @@ export declare class NotesComponent {
       "required": false;
       "isSignal": true;
     };
+    "basePath": {
+      "alias": "basePath";
+      "required": false;
+      "isSignal": true;
+    };
     "readOnly": {
       "alias": "readOnly";
       "required": false;
       "isSignal": true;
     };
+    "editable": {
+      "alias": "editable";
+      "required": false;
+      "isSignal": true;
+    };
+    "maxLength": {
+      "alias": "maxLength";
+      "required": false;
+      "isSignal": true;
+    };
   }, {
     "totalChange": "totalChange";
   }, never, never, true, never>;
@@ -10980,13 +11070,32 @@ export interface CalendarSlotClick {
  * In the week view each all-day cell and each day column has a visually hidden "+ Add" button that appears when focused; Enter/Space on it
  * creates (all-day, or the first visible hour). The initial `view` must be one of `views`.
  *
+ * Loading: bind `[loading]`. On the FIRST load (nothing shown yet) the whole page is drawn as one skeleton outline (`data-testid="calendar-skeleton"`,
+ * one `role="status"` region "Loading calendar", only decorative `ui-skeleton`s): period label, Previous / Today / Next, view tabs, `loadingActions`
+ * (default 2) action placeholders, the filter label + one chip per filter plus All, and the weekday row + day grid of the current view. The real
+ * toolbar / filters / grid are not in the DOM until loading ends, but `rangeChange` still fires on the first render. After the first load,
+ * `[loading]` replaces only the grid with a skeleton so the toolbar and period navigation stay usable. No markup or config is needed in the host;
+ * start with `loading` true to avoid a one-frame flash of the real toolbar before the outline.
+ *
  * Content slots: `[calendar-actions]` (right of the view switcher), `[calendar-summary]` (centre of the toolbar on
  * desktop) and `[calendar-summary-mobile]` (shown instead of it on phones).
  */
 export declare class CalendarComponent {
   /** Everything to show in the visible range. Ids must be unique across the whole list. */
   readonly items: import("@angular/core").InputSignal<CalendarItem[]>;
+  /**
+   * The host is loading the visible range. On the FIRST load (nothing shown yet) the component draws an outline of the whole page (period label,
+   * nav buttons, view tabs, action placeholders, filter chips, weekday row and day grid) built only from decorative `ui-skeleton`s in ONE status
+   * region (`data-testid="calendar-skeleton"`, "Loading calendar"); the real toolbar / filters / grid are not in the DOM until loading ends.
+   * `rangeChange` still fires meanwhile. Later reloads (after a first load finished, or while items are shown) replace only the grid with a
+   * skeleton so the toolbar and period navigation stay usable. Hosts need no markup or config: they just bind `[loading]`.
+   */
   readonly loading: import("@angular/core").InputSignal<boolean>;
+  /**
+   * Optional. How many skeleton button placeholders the first-load outline draws in the actions position (where `[calendar-actions]` content
+   * goes). The calendar cannot count projected content, so this is a number: default 2; 0 draws none. Not used after the first load.
+   */
+  readonly loadingActions: import("@angular/core").InputSignalWithTransform<number, unknown>;
   /** Active view; two-way bindable. A value that is not in `views` is replaced by the first allowed view. */
   readonly view: import("@angular/core").ModelSignal<CalendarViewMode>;
   /** Views the switcher offers. One entry hides the switcher. */
@@ -11033,6 +11142,13 @@ export declare class CalendarComponent {
   protected readonly weekDayLabels: string[];
   protected readonly weekDayNames: string[];
   protected readonly skeletonCells: number[];
+  protected readonly skeletonDays: number[];
+  protected readonly skeletonRows: number[];
+  /** `idle` until the first loading cycle starts, `first` while it runs, `loaded` once it has ended: from then on `loading` only skeletons the grid. */
+  private readonly loadPhase;
+  /** True while the first load runs and nothing is shown yet: the whole page is drawn as a skeleton outline. */
+  protected readonly showOutline: import("@angular/core").Signal<boolean>;
+  protected readonly loadingActionSlots: import("@angular/core").Signal<number[]>;
   protected readonly formatHour: typeof formatHour;
   /** The browser clock's today as `YYYY-MM-DD`; refreshed at local midnight, when the tab becomes visible again and when the user presses Today. */
   private readonly clockToday;
@@ -11133,6 +11249,11 @@ export declare class CalendarComponent {
       "required": false;
       "isSignal": true;
     };
+    "loadingActions": {
+      "alias": "loadingActions";
+      "required": false;
+      "isSignal": true;
+    };
     "view": {
       "alias": "view";
       "required": false;