@forgeroute/ui 0.4.53 → 0.4.55

package/package.json

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

package/types/forgeroute-ui.d.ts

@@ -1424,6 +1424,8 @@ export declare class DataTableComponent<T extends Record<string, any>> implement
    * tabs are all off, the header row is not rendered at all.
    */
   readonly showQuickTabs: import("@angular/core").InputSignal<boolean>;
+  /** `false` hides the pager under the rows: the table shows only the first `pageSize` rows (a dashboard card that links to the full list instead). Default `true`. */
+  readonly showPagination: import("@angular/core").InputSignal<boolean>;
   /**
    * Keep the Actions column (the row "⋮" menu) pinned to the right edge while the table scrolls sideways, so a wide table never hides it
    * off-screen. Default false: every existing table is unchanged. Only matters when the table is wider than its container (columns scroll);
@@ -1998,6 +2000,11 @@ export declare class DataTableComponent<T extends Record<string, any>> implement
       "required": false;
       "isSignal": true;
     };
+    "showPagination": {
+      "alias": "showPagination";
+      "required": false;
+      "isSignal": true;
+    };
     "stickyActions": {
       "alias": "stickyActions";
       "required": false;
@@ -6741,6 +6748,8 @@ export declare class CardListItemComponent {
   readonly indicator: import("@angular/core").InputSignal<CardListIndicator>;
   /** Round icon on the left (wins over `indicator`). */
   readonly icon: import("@angular/core").InputSignal<CardListIcon | undefined>;
+  /** A type badge or a status badge (with its variant) shows: they sit in the card's upper right corner. */
+  protected readonly hasBadges: import("@angular/core").Signal<boolean>;
   /** Built-in "Edit" chip button -> `editClick`. */
   readonly editButton: import("@angular/core").InputSignal<boolean>;
   /** Built-in "View" chip button -> `viewClick`. */
@@ -10971,13 +10980,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. */
@@ -11024,6 +11052,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;
@@ -11124,6 +11159,11 @@ export declare class CalendarComponent {
       "required": false;
       "isSignal": true;
     };
+    "loadingActions": {
+      "alias": "loadingActions";
+      "required": false;
+      "isSignal": true;
+    };
     "view": {
       "alias": "view";
       "required": false;