@forgeroute/ui 0.4.22 → 0.4.24

package/package.json

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

package/types/forgeroute-ui.d.ts

@@ -47,7 +47,7 @@ export interface ToolbarAction {
   /** Hide this action entirely */
   hidden?: boolean;
   /** Documentation of intent: marks a mutating action ("Add …", bulk mutations). It does not change behavior - the table hides
-   *  EVERY page-defined toolbar action for any `permission` other than 'full', with or without this flag. */
+   *  EVERY page-defined toolbar action for any `permission` other than 'full', unless it is marked `allowReadOnly`. */
   requiresFull?: boolean;
   /**
    * Keep this action when the table is empty and unfiltered. By default only `variant: 'primary'` buttons survive that
@@ -56,6 +56,13 @@ export interface ToolbarAction {
    * menu back (with its usual items).
    */
   keepWhenEmpty?: boolean;
+  /**
+   * Keep this action for a read-only table (`permission` other than 'full'). By default a read-only table drops every
+   * page-defined toolbar action and keeps only Export; set this on a PURE READ - e.g. a "Board View" / "List View" switch
+   * that changes what is shown but writes nothing. Never set it on an action that creates, changes or deletes a record.
+   * On an empty, unfiltered table only primary buttons survive: add `keepWhenEmpty` as well to keep a view switch there.
+   */
+  allowReadOnly?: boolean;
   /**
    * Standalone toggle buttons (e.g. "Assigned to Me"): true / false renders `aria-pressed` so screen readers announce
    * the on / off state. Leave unset for ordinary buttons (no attribute).
@@ -836,7 +843,7 @@ export declare class TableToolbarComponent {
   readonly activeViewId: import("@angular/core").InputSignal<string | null>;
   readonly showSavedViews: import("@angular/core").InputSignal<boolean>;
   /**
-   * Read-only (permission isn't 'full'): only Export stays — no page buttons, no Import, no Columns, no
+   * Read-only (permission isn't 'full'): only Export and pure reads marked `allowReadOnly` stay — no other page buttons, no Import, no Columns, no
    * Save Current View, no deleting views. More Actions offers only the user's existing Saved Views and is
    * hidden when they have none.
    */
@@ -856,7 +863,7 @@ export declare class TableToolbarComponent {
   protected _saveViewName: string;
   /** Draft column visibility — only applied to the table when the user clicks Apply. */
   private readonly _pendingCols;
-  /** Buttons this user may see — read-only users only get Export (page actions and Import are hidden). */
+  /** Buttons this user may see — read-only users only get Export and pure reads marked `allowReadOnly` (page actions and Import are hidden). */
   private readonly _allowedButtons;
   protected readonly standaloneButtons: import("@angular/core").Signal<ToolbarAction[]>;
   protected readonly importButton: import("@angular/core").Signal<ToolbarAction | null>;
@@ -1342,7 +1349,7 @@ export declare class DataTableComponent<T extends Record<string, any>> implement
   /**
    * Page permission. Anything other than 'full' makes the table read-only: no Import,
    * no bulk update/delete and no checkbox column (even when `selectable` is set), no page-defined
-   * toolbar buttons at all (only Export; More Actions offers only their existing Saved Views), and the
+   * toolbar buttons except Export and pure reads marked `allowReadOnly` (More Actions offers only their existing Saved Views), and the
    * row menu offers only View (`type: 'view'`).
    * Rows with nothing to show get no "⋮" trigger; the Actions column is dropped when no row has View.
    */
@@ -6858,6 +6865,9 @@ export interface PanelInfoItem {
   /** Renders a small edit (pencil) `ui-icon` button after the value; `editTooltip` is its tooltip and accessible name (default "Edit"). */
   editAction?: () => void;
   editTooltip?: string;
+  /** Renders a small delete (bin) `ui-icon` button after the edit pencil; the host asks for confirmation and does the deleting. `deleteTooltip` is its tooltip and accessible name (default "Delete"). */
+  deleteAction?: () => void;
+  deleteTooltip?: string;
   muted?: boolean;
   danger?: boolean;
   hidden?: boolean;
@@ -7322,7 +7332,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' | 'view-off' | 'edit' | 'delete' | 'download' | 'duplicate' | 'archive' | 'restore' | 'share' | 'email' | 'message' | 'call' | 'refund' | 'chevron-right' | 'link' | 'save' | 'chart';
+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' | 'refund' | 'chevron-right' | 'link' | 'save' | 'chart' | 'clipboard';
 /**
  * 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, …).
@@ -9217,12 +9227,18 @@ export declare class BoardCardDirective<T = unknown> {
 export declare class BoardComponent<T = unknown> {
   /** The columns in display order, each with its items. A new value replaces the board's content (and any on-screen move). */
   readonly columns: import("@angular/core").InputSignal<BoardColumn<T>[]>;
-  /** Stable unique id of a card (used to track cards between renders). */
+  /** Stable unique id of a card (used to track cards between renders, to find its menu and to move it). Must be unique across the whole board. */
   readonly itemKey: import("@angular/core").InputSignal<(item: T) => string>;
   /** Spoken name of a card: title, who, status, value... The card's visible content is the `uiBoardCard` template. */
   readonly itemLabel: import("@angular/core").InputSignal<(item: T) => string>;
   /** Menu on every card (the "⋮" button). Empty = no menu. Handle the pick in `(cardAction)`. */
   readonly cardActions: import("@angular/core").InputSignal<RowAction[]>;
+  /**
+   * Adds "Move to <column>" to every card's menu (one item per column the card may be moved to), so a card can be moved
+   * without dragging - by touch, with a screen reader or with the mouse alone. Only while cards can be moved (not read-only,
+   * not `moveDisabled`) and only to columns that accept the card (`canMove`, `dropDisabled`). Set false to leave the menu to `cardActions`.
+   */
+  readonly moveMenu: import("@angular/core").InputSignal<boolean>;
   readonly loading: import("@angular/core").InputSignal<boolean>;
   /** Error text: replaces the board with the message and a Retry button. */
   readonly error: import("@angular/core").InputSignal<string | null>;
@@ -9282,6 +9298,11 @@ export declare class BoardComponent<T = unknown> {
   protected onDragLeave(event: DragEvent, col: BoardColumn<T>): void;
   protected onDrop(event: DragEvent, col: BoardColumn<T>): void;
   protected onCardKey(event: KeyboardEvent, item: T, col: BoardColumn<T>): void;
+  /** The menu of each card by item key: the host's `cardActions`, then "Move to <column>" for each column that accepts the card (one shared array per column when the host has no `canMove` rule). */
+  protected readonly menuActions: import("@angular/core").Signal<Map<string, RowAction[]>>;
+  protected onMenuAction(type: string, item: T): void;
+  /** The card is re-created in its new column: put the focus back on it once it is drawn. */
+  private focusCard;
   private accepts;
   private move;
   static ɵfac: i0.ɵɵFactoryDeclaration<BoardComponent<any>, never>;
@@ -9306,6 +9327,11 @@ export declare class BoardComponent<T = unknown> {
       "required": false;
       "isSignal": true;
     };
+    "moveMenu": {
+      "alias": "moveMenu";
+      "required": false;
+      "isSignal": true;
+    };
     "loading": {
       "alias": "loading";
       "required": false;
@@ -10000,6 +10026,25 @@ export type SidebarCollapse = 'sm' | 'md' | 'lg' | 'never';
  *  - `collapseAt`: sm (640px) | md (900px, default) | lg (1200px) | never. At and below that viewport width there is ONE
  *    column and the side column is static (never sticky, no max-height). `sideFirstWhenCollapsed` (default true) puts the
  *    side column first there; `false` puts the main column first.
+ *  - `sideFirstInDom` (default false): by default the side column is only moved to the top on small screens with CSS
+ *    `order`, so Tab / reading order stays main then side. With `sideFirstInDom` AND `sideFirstWhenCollapsed`, the side
+ *    wrapper is rendered BEFORE the main wrapper in the DOM while the viewport is at or below the `collapseAt` width
+ *    (tracked with `matchMedia` for the same query), so Tab order equals the visual order. At wide widths the DOM is main
+ *    then side. The projected nodes are moved, never recreated (same element instances, no state lost). No `matchMedia`
+ *    (server rendering) = not collapsed; CSS `order` still gives the right visual order until the browser takes over.
+ *    The `.sl` root element carries `data-dom-order="main-first|side-first"`.
+ *  - `sideBleed` (CSS length, default `4px`; `0px` = none): the sticky side column scrolls inside itself
+ *    (`overflow-y: auto`), which would clip focus rings and shadows at its edges. It gets padding and a negative margin of the
+ *    bleed size (the full `sideBleed` on the outer and block edges, `min(sideBleed, gap)` toward main), so the content keeps exactly its `sideWidth` and `gap` (the layout does not
+ *    move) while a 2px outline with a 2px offset still fits. `top` is reduced by the bleed so the content sticks at
+ *    `stickyTop`, and `max-height` is `100vh - (stickyTop + stickyOffset)` for the CONTENT (the bleed is added back).
+ *    The bleed toward main is clamped to the gap (`min(sideBleed, gap)`), so the transparent padding never overlaps or
+ *    intercepts clicks on main; the outer edge keeps the full bleed. Needs CSS `min()` (all current browsers).
+ *    Collapsed and non-sticky columns have no bleed. NOTE: the outer edge of the side box overhangs the layout by the bleed
+ *    (4px by default, on the right for `end`, on the left for `start`), so a flush clipping or scrolling ancestor can
+ *    show 4px of horizontal overflow: use `sideBleed="0px"` there.
+ *  - `sideWidth`, `sideBleed` and `gap` must be non-negative lengths; a negative value falls back to the default. A `calc(...)` or
+ *    `var(...)` value is passed through as written and is not checked: make sure it cannot compute to a negative length.
  *  - An empty side slot (no `layout-side` element) hides the side column and the main column takes the full width.
  *
  * Plain media queries only (no `:has()`, no container queries) so it behaves the same in Chrome, Edge, Firefox and Safari.
@@ -10013,19 +10058,31 @@ export declare class SidebarLayoutComponent {
   readonly gap: import("@angular/core").InputSignal<string>;
   /** Keep the side column pinned while the main column scrolls (wide widths only). */
   readonly stickySide: import("@angular/core").InputSignal<boolean>;
-  /** Distance in px from the top of the viewport at which the side column sticks (default 16). */
+  /** Distance in px from the top of the viewport at which the side column's content sticks (default 16). */
   readonly stickyTop: import("@angular/core").InputSignal<number>;
   /** Total px of non-viewport space above and below the side column, used for its max-height (default 32). */
   readonly stickyOffset: import("@angular/core").InputSignal<number>;
   readonly collapseAt: import("@angular/core").InputSignal<SidebarCollapse>;
   /** When collapsed to one column: side column first (default) or main column first. */
   readonly sideFirstWhenCollapsed: import("@angular/core").InputSignal<boolean>;
+  /** Also put the side wrapper first in the DOM (not only visually) while collapsed, so Tab order equals visual order. Default false. */
+  readonly sideFirstInDom: import("@angular/core").InputSignal<boolean>;
+  /** Room (CSS length) inside the sticky side's scroll box so focus rings at its edge are not clipped. Default `4px`; `0px` = none. */
+  readonly sideBleed: import("@angular/core").InputSignal<string>;
+  /** True while the viewport is at or below the collapseAt width; only tracked when sideFirstInDom is set. */
+  private readonly collapsed;
   protected readonly position: import("@angular/core").Signal<SidebarPosition>;
+  private readonly collapseKey;
+  /** The side wrapper is rendered before the main wrapper. */
+  protected readonly domSideFirst: import("@angular/core").Signal<boolean>;
+  protected readonly domOrder: import("@angular/core").Signal<"side-first" | "main-first">;
   protected readonly sideCss: import("@angular/core").Signal<string>;
+  protected readonly bleedCss: import("@angular/core").Signal<string>;
   protected readonly gapCss: import("@angular/core").Signal<string>;
   protected readonly topCss: import("@angular/core").Signal<string>;
   protected readonly offCss: import("@angular/core").Signal<string>;
   protected readonly rootClass: import("@angular/core").Signal<string>;
+  constructor();
   static ɵfac: i0.ɵɵFactoryDeclaration<SidebarLayoutComponent, never>;
   static ɵcmp: i0.ɵɵComponentDeclaration<SidebarLayoutComponent, "ui-sidebar-layout", never, {
     "sideWidth": {
@@ -10068,6 +10125,16 @@ export declare class SidebarLayoutComponent {
       "required": false;
       "isSignal": true;
     };
+    "sideFirstInDom": {
+      "alias": "sideFirstInDom";
+      "required": false;
+      "isSignal": true;
+    };
+    "sideBleed": {
+      "alias": "sideBleed";
+      "required": false;
+      "isSignal": true;
+    };
   }, {}, never, ["[layout-main]", "[layout-side]"], true, never>;
 }
 export type ActionBarAlign = 'start' | 'center' | 'end' | 'between';