@forgeroute/ui 0.4.67 → 0.4.68

package/package.json

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

package/src/_detail-columns.scss

@@ -0,0 +1,32 @@
+// Independent column scrolling for detail pages (`<ui-sidebar-layout uiFillViewport>`): the viewport does not scroll; the two columns are capped
+// to the room under the page's top block (`--cols-h`, set by the `uiFillViewport` directive) and each scrolls inside its own box.
+//
+//   @use 'detail-columns' as dc;          // @forgeroute/ui/src is on the stylePreprocessorOptions includePaths
+//   @include dc.independent-columns;      // or (1200px) for collapseAt="lg"
+//
+// Markup: `.detail-page` wraps the page, `.col-main` is the `layout-main` element, `.col-side` is the `layout-side` element.
+// Only applies while the layout has two columns: `$collapse` = the sidebar-layout `collapseAt` width in px (900 = md, 1200 = lg); collapsed it is
+// one column and the page scrolls as usual. `$bleed` is the room inside the main column's scroll box so a focus ring or shadow at its edge is not clipped.
+@mixin independent-columns($collapse: 900px, $bleed: 4px) {
+  @media (min-width: #{$collapse + 1}) {
+    .detail-page { padding-bottom: 0; }   // the columns end at the bottom of the content area
+    .col-main {
+      position: relative;   // visually hidden / absolutely positioned content (sr-only text, menus) stays inside this scroll box; otherwise it is positioned against the page and stretches the document, which then scrolls
+      box-sizing: border-box;
+      padding: $bleed;
+      margin: -$bleed;
+      max-height: calc(var(--cols-h) + #{2 * $bleed});
+      overflow-y: auto;
+      overscroll-behavior: contain;
+      -webkit-overflow-scrolling: touch;
+    }
+    .col-side {
+      display: block;
+      position: relative;   // absolutely positioned content (visually hidden text, menus) stays inside this scroll box; otherwise it would stretch the library's outer side wrapper and give the column a second scrollbar
+      max-height: var(--cols-h);
+      overflow-y: auto;
+      overscroll-behavior: contain;
+      -webkit-overflow-scrolling: touch;
+    }
+  }
+}

package/types/forgeroute-ui.d.ts

@@ -1095,7 +1095,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>;
@@ -1591,6 +1591,8 @@ export declare class DataTableComponent<T extends Record<string, any>> implement
    */
   private _columnBadgeLabel;
   protected readonly _error: import("@angular/core").WritableSignal<string | null>;
+  /** Phone card list is only a role=list while it contains listitems: skeleton cards or real rows (not error / empty / no-match). */
+  protected readonly _cardListHasItems: Signal<boolean>;
   private readonly _loadFailed;
   /**
    * True from a failed load (the table shows its error state) until a later load SUCCEEDS. Unlike the error state itself it stays true while
@@ -2682,7 +2684,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>;
@@ -2936,7 +2938,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<1 | 2 | 5 | 3 | 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>;
   /**
@@ -4948,7 +4950,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" | "text" | "tel" | "email" | "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>;
@@ -4957,7 +4959,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<"" | "none" | "text" | "search" | "tel" | "email" | "url" | "decimal" | "numeric">;
+  readonly inputmode: import("@angular/core").InputSignal<"" | "search" | "none" | "text" | "email" | "tel" | "url" | "decimal" | "numeric">;
   readonly readonly: import("@angular/core").InputSignal<boolean>;
   readonly hint: import("@angular/core").InputSignal<string>;
   /** Id(s) of an external element that also describes this control (e.g. one shared error text for a group of fields). Space separated; MERGED after the control's own hint / error id in `aria-describedby`, never replacing it. Empty = unchanged. */
@@ -5023,7 +5025,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" | "text" | "tel" | "email" | "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>;
@@ -6493,7 +6495,7 @@ export declare class DropdownComponent {
   readonly loader: import("@angular/core").InputSignal<(() => Promise<DropdownItem[]>) | null>;
   readonly active: import("@angular/core").InputSignal<boolean>;
   readonly activeValue: import("@angular/core").InputSignal<string>;
-  readonly variant: import("@angular/core").InputSignal<"badge" | "button">;
+  readonly variant: import("@angular/core").InputSignal<"button" | "badge">;
   /** Trigger size for `variant="button"`: `sm` (default, the compact toolbar look) or `md` (same padding and type as a medium `ui-button`). */
   readonly size: import("@angular/core").InputSignal<"sm" | "md">;
   readonly menuWidth: import("@angular/core").InputSignal<string>;
@@ -6823,7 +6825,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 | 3 | "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, {
@@ -8086,6 +8088,11 @@ export declare class AppShellComponent implements OnInit, OnDestroy {
    * when the title is not set.
    */
   readonly pageTitle: import("@angular/core").InputSignal<string>;
+  /**
+   * Show the app's toasts (renders one `<ui-toast />` for the whole shell). Default false so an app that already renders its own `<ui-toast />`
+   * is unchanged; an app that sets this removes its own.
+   */
+  readonly showToast: import("@angular/core").InputSignal<boolean>;
   readonly appName: import("@angular/core").InputSignal<string>;
   readonly user: import("@angular/core").InputSignal<ShellUser | null>;
   readonly readOnly: import("@angular/core").InputSignal<boolean>;
@@ -8103,6 +8110,10 @@ export declare class AppShellComponent implements OnInit, OnDestroy {
   readonly persistKey: import("@angular/core").InputSignal<string>;
   readonly logoutClick: import("@angular/core").OutputEmitterRef<void>;
   protected readonly _sidebarOpen: import("@angular/core").WritableSignal<boolean>;
+  /** `data.pageTitle` of the deepest activated route that sets one ('' when none does). Updated on every NavigationEnd. */
+  protected readonly _routeTitle: import("@angular/core").WritableSignal<string>;
+  /** The title shown in the top bar: the `pageTitle` input when the app sets one (it wins), else the route's `data.pageTitle`. */
+  protected readonly _title: import("@angular/core").Signal<string>;
   protected readonly _collapsed: import("@angular/core").WritableSignal<boolean>;
   /** The rail (icons-only sidebar) only exists on the desktop layout; on the drawer layout (≤1024px) a saved rail choice is ignored. */
   protected readonly _drawerLayout: import("@angular/core").WritableSignal<boolean>;
@@ -8144,6 +8155,8 @@ export declare class AppShellComponent implements OnInit, OnDestroy {
   ngOnInit(): void;
   private _drawerMq?;
   private readonly _onDrawerMqChange;
+  /** The `data.pageTitle` of the deepest activated route that has a non-empty string one (a child route's title wins over its parent's). */
+  private _titleOfRoute;
   ngOnDestroy(): void;
   private _expandActiveGroup;
   static ɵfac: i0.ɵɵFactoryDeclaration<AppShellComponent, never>;
@@ -8158,6 +8171,11 @@ export declare class AppShellComponent implements OnInit, OnDestroy {
       "required": false;
       "isSignal": true;
     };
+    "showToast": {
+      "alias": "showToast";
+      "required": false;
+      "isSignal": true;
+    };
     "appName": {
       "alias": "appName";
       "required": false;
@@ -9913,7 +9931,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<1 | 2 | 5 | 3 | 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. */
@@ -11197,6 +11215,28 @@ export declare class SidebarLayoutComponent {
     };
   }, {}, never, ["[layout-main]", "[layout-side]"], true, never>;
 }
+/**
+ * Independent column scrolling for a detail page's `<ui-sidebar-layout uiFillViewport>`.
+ *
+ * Sets `--cols-h` on the host: the room left between the top of the layout and the bottom of the shell's content area (the nearest
+ * `<main>`). Pair it with the `independent-columns` mixin (`@use 'detail-columns' as dc;` from `@forgeroute/ui/src/_detail-columns.scss`),
+ * which caps both columns to `--cols-h` so each scrolls on its own while the viewport does not scroll.
+ *
+ *   <ui-sidebar-layout uiFillViewport sideWidth="320px" collapseAt="md">
+ *     <div layout-main class="col-main"> ... </div>
+ *     <aside layout-side class="col-side"> ... </aside>
+ *   </ui-sidebar-layout>
+ *
+ * Re-measured when the content area or the element's parent changes size (window resize, tabs wrapping, a card loading). Pure layout maths
+ * on the element's position inside the scroller's content, so it does not depend on how far the page happens to be scrolled. The height is
+ * never below 240px. With no `<main>` ancestor nothing is set. Not related to `ui-page`'s `fillViewport` input (a page at least one viewport high).
+ */
+export declare class FillViewportDirective {
+  private readonly el;
+  constructor();
+  static ɵfac: i0.ɵɵFactoryDeclaration<FillViewportDirective, never>;
+  static ɵdir: i0.ɵɵDirectiveDeclaration<FillViewportDirective, "[uiFillViewport]", never, {}, {}, never, never, true, never>;
+}
 export type ActionBarAlign = 'start' | 'center' | 'end' | 'between';
 /**
  * Bar for page-level actions (Save / Cancel) that stays at the bottom of the scrolling area.