@lifecorner/angular-ui-kit 3.13.1 → 3.14.0

package/types/lifecorner-angular-ui-kit-sidenav.d.ts

@@ -18,6 +18,10 @@ export type SidenavVariant = 'default' | 'transparent';
  * - Responsive mobile mode — docked automatically switches to drawer below a configurable breakpoint
  * - Collapsed icon-rail mode (narrow 56px sidebar with icons only and hover tooltips)
  * - Integrated logo area with collapse-toggle (sidebar-first layouts)
+ * - Text brand (`brandName`, `brandIcon`): an icon tile and the product name,
+ *   one link to home (`brandHref`, else `routerLink="/"`), as high as the
+ *   `lc-header` next to it; the rail shows only the tile. It never toggles:
+ *   `showCollapseToggle` adds a collapse button at the bottom of the rail
  * - Hierarchical navigation with collapsible groups (up to 3 levels)
  * - Section headlines for item grouping with optional action buttons
  * - Action buttons on any item (hover-reveal)
@@ -29,7 +33,15 @@ export type SidenavVariant = 'default' | 'transparent';
  * - Keyboard navigation support (Escape closes drawer)
  * - Configurable width and position (left/right)
  * - Optional backdrop overlay
- * - Theme variants: auto, light, dark (with teal accent for dark mode)
+ * - Theme variants: auto, light, dark (with teal accent for dark mode). The
+ *   theming hooks (`--lc-sidenav-bg`, `-fg`, `-fg-active`, `-border`,
+ *   `-hover-bg`, `-section-fg`, `-active-bg`, `-active-fg`, `-active-icon`)
+ *   set on `lc-sidenav` win over `theme` (3.14); `--lc-sidenav-active-indicator`
+ *   (the current item's 2 px bar, default `--color-primary-500`; on a
+ *   `theme="light"` rail #208497 on any page, like its focus rings),
+ *   `--lc-sidenav-brand-tile-bg` (default `--color-primary-fill`) and
+ *   `--lc-sidenav-brand-tile-fg` (default `--color-on-primary`) can be set on
+ *   any ancestor
  * - `variant="transparent"`: no rail background or border, items as 48 px
  *   pills with 16 px labels, the current one on `--color-surface-selected`
  * - Items are at least 44 px high in every density; the current item's ink is
@@ -77,8 +89,51 @@ export declare class SidenavComponent implements OnDestroy {
   readonly logoDarkEmblemSrc: import("@angular/core").InputSignal<string>;
   /** Alt text for the brand logo. */
   readonly logoAlt: import("@angular/core").InputSignal<string>;
-  /** Size of the brand logo (forwarded to inner `<lc-logo>`). Defaults to `md` for a prominent brand block aligned with `<lc-header size="md">` (both 64px). */
+  /** Size of the brand logo (forwarded to inner `<lc-logo>`). Defaults to `md` for a prominent brand block aligned with `<lc-header size="md">` (both 64px). Also sets the height of the text brand (`brandName`). */
   readonly logoSize: import("@angular/core").InputSignal<"xs" | "sm" | "md" | "lg" | "xl">;
+  /**
+   * Product name shown as a text brand at the top: an icon tile and the name,
+   * one link to home. Replaces the image logo (`showLogo`). The block is as
+   * high as the image logo (`logoSize`: 64 px for `md`, matching
+   * `lc-header size="md"`); the name wraps to two lines at most, and the full
+   * name stays the link's accessible name. Collapsed, only the tile shows.
+   * The brand never toggles the rail (see `showCollapseToggle`). Under
+   * `@defer`, give the `lc-sidenav-placeholder` `[showLogo]="true"` and the
+   * same `logoSize` to reserve the block. Empty: no text brand.
+   * @default ''
+   */
+  readonly brandName: import("@angular/core").InputSignal<string>;
+  /**
+   * `lc-icon` name in the brand tile (decorative). Empty: the tile shows the
+   * name's first letter. Renders nothing without `brandName`.
+   * @default ''
+   */
+  readonly brandIcon: import("@angular/core").InputSignal<string>;
+  /**
+   * Plain URL of the brand link (a native `<a href>`, works without the
+   * router). Empty: `routerLink="/"`, as `lc-header`'s `homeHref`.
+   * @default ''
+   */
+  readonly brandHref: import("@angular/core").InputSignal<string>;
+  /**
+   * Accessible name of the brand link. Empty: the brand name. Start it with
+   * the visible name, e.g. `'Finance Intelligence – home'`.
+   * @default ''
+   */
+  readonly brandAriaLabel: import("@angular/core").InputSignal<string>;
+  /**
+   * Docked mode: a button at the bottom of the rail collapses and expands it
+   * (`collapsed`). Independent of the brand. With `showLogo` the image logo
+   * toggles already, so use one of the two.
+   * @default false
+   */
+  readonly showCollapseToggle: import("@angular/core").InputSignal<boolean>;
+  /**
+   * Accessible name of the collapse button (`showCollapseToggle`) while the
+   * rail is collapsed. Expanded, it uses `collapseAriaLabel`.
+   * @default 'Expand navigation'
+   */
+  readonly expandAriaLabel: import("@angular/core").InputSignal<string>;
   /** Whether the sidenav is open */
   readonly isOpen: import("@angular/core").InputSignal<boolean>;
   /** Display mode: 'drawer' (overlay) or 'docked' (persistent sidebar) */
@@ -203,10 +258,20 @@ export declare class SidenavComponent implements OnDestroy {
   sidenavStyles: import("@angular/core").Signal<{
     width: string;
   }>;
+  /** The brand tile's letter when there is no `brandIcon`: the name's first character, upper-cased. */
+  protected readonly brandInitial: import("@angular/core").Signal<string>;
+  /** Whether the rail shows only icons (as `lc-sidenav--collapsed`). */
+  protected readonly isRail: import("@angular/core").Signal<boolean>;
+  /** The collapse button's accessible name: what a press does. */
+  protected readonly collapseToggleLabel: import("@angular/core").Signal<string>;
+  /** The collapse button's chevron points where the rail moves: ⟨ to collapse a left rail, ⟩ to expand it (mirrored on the right). */
+  protected readonly collapseToggleIcon: import("@angular/core").Signal<"chevron-left" | "chevron-right">;
   /**
    * Toggle collapsed state
    */
   toggleCollapsed(): void;
+  /** The brand link closes the drawer on a phone, as the items do. */
+  handleBrandClick(): void;
   /**
    * Handle close action
    */
@@ -285,6 +350,36 @@ export declare class SidenavComponent implements OnDestroy {
       "required": false;
       "isSignal": true;
     };
+    "brandName": {
+      "alias": "brandName";
+      "required": false;
+      "isSignal": true;
+    };
+    "brandIcon": {
+      "alias": "brandIcon";
+      "required": false;
+      "isSignal": true;
+    };
+    "brandHref": {
+      "alias": "brandHref";
+      "required": false;
+      "isSignal": true;
+    };
+    "brandAriaLabel": {
+      "alias": "brandAriaLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "showCollapseToggle": {
+      "alias": "showCollapseToggle";
+      "required": false;
+      "isSignal": true;
+    };
+    "expandAriaLabel": {
+      "alias": "expandAriaLabel";
+      "required": false;
+      "isSignal": true;
+    };
     "isOpen": {
       "alias": "isOpen";
       "required": false;

package/types/lifecorner-angular-ui-kit-stat-trend.d.ts

@@ -1,6 +1,26 @@
 import { SparklineColor } from "@lifecorner/angular-ui-kit/sparkline";
 import * as i0 from "@angular/core";
 export type StatTrendDirection = 'up' | 'down' | 'neutral';
+/** Whether a change is good or bad for the reader, independent of its direction. */
+export type StatTrendSentiment = 'positive' | 'negative' | 'neutral';
+/**
+ * Words of the screen-reader text that `lc-stat-trend` adds to the change when
+ * `sentiment` is set (", up, unfavourable"). Override single keys via `labels`.
+ */
+export interface StatTrendLabels {
+  /** Direction up. EN "up", DE "gestiegen". */
+  up: string;
+  /** Direction down. EN "down", DE "gesunken". */
+  down: string;
+  /** Direction neutral. EN "unchanged", DE "unverändert". */
+  unchanged: string;
+  /** Sentiment positive. EN "favourable", DE "günstig". */
+  positive: string;
+  /** Sentiment negative. EN "unfavourable", DE "ungünstig". */
+  negative: string;
+  /** Sentiment neutral. EN "neutral", DE "neutral". */
+  neutral: string;
+}
 export declare class StatTrendComponent {
   /** Main KPI label. */
   label: import("@angular/core").InputSignal<string>;
@@ -10,6 +30,20 @@ export declare class StatTrendComponent {
   change: import("@angular/core").InputSignal<string>;
   /** Trend direction for color coding. Auto-detected from change if not set. */
   direction: import("@angular/core").InputSignal<StatTrendDirection | undefined>;
+  /**
+   * Whether the change is good or bad, independent of its direction (a rise in
+   * costs is negative). Colours the change and the default sparkline; the arrow
+   * keeps the direction. Unset: derived from the direction.
+   * @default undefined
+   */
+  sentiment: import("@angular/core").InputSignal<StatTrendSentiment | undefined>;
+  /**
+   * Words of the screen-reader text added to the change when `sentiment` is set.
+   * Missing keys fall back to the English defaults (up, down, unchanged,
+   * favourable, unfavourable, neutral).
+   * @default {}
+   */
+  labels: import("@angular/core").InputSignal<Partial<StatTrendLabels>>;
   /** Sparkline data points. If empty, no sparkline is shown. */
   sparklineData: import("@angular/core").InputSignal<number[]>;
   /** Color of the sparkline. Auto-matched to trend direction if not set. */
@@ -20,6 +54,8 @@ export declare class StatTrendComponent {
   protected readonly trendColorClass: import("@angular/core").Signal<string>;
   protected readonly resolvedSparklineColor: import("@angular/core").Signal<SparklineColor>;
   protected readonly trendIcon: import("@angular/core").Signal<string>;
+  /** ", up, unfavourable": rendered only when `sentiment` is set. */
+  protected readonly srText: import("@angular/core").Signal<string>;
   protected readonly hasSparkline: import("@angular/core").Signal<boolean>;
   static ɵfac: i0.ɵɵFactoryDeclaration<StatTrendComponent, never>;
   static ɵcmp: i0.ɵɵComponentDeclaration<StatTrendComponent, "lc-stat-trend", never, {
@@ -43,6 +79,16 @@ export declare class StatTrendComponent {
       "required": false;
       "isSignal": true;
     };
+    "sentiment": {
+      "alias": "sentiment";
+      "required": false;
+      "isSignal": true;
+    };
+    "labels": {
+      "alias": "labels";
+      "required": false;
+      "isSignal": true;
+    };
     "sparklineData": {
       "alias": "sparklineData";
       "required": false;