@life-cockpit/angular-ui-kit 1.11.4 → 1.11.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@life-cockpit/angular-ui-kit",
-  "version": "1.11.4",
+  "version": "1.11.5",
   "description": "Life Cockpit Design System - Angular UI component library",
   "license": "MIT",
   "repository": {

package/types/life-cockpit-angular-ui-kit.d.ts

@@ -435,7 +435,7 @@ declare class CheckboxComponent implements ControlValueAccessor {
 type IconVariant = 'outline' | 'solid';
 type IconSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 /**
- * Icon component - Tabler Icons wrapper for displaying SVG icons
+ * Icon component - Heroicons wrapper for displaying SVG icons
  *
  * Features:
  * - Signal-based reactive API
@@ -443,7 +443,7 @@ type IconSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
  * - Multiple size options (xs, sm, md, lg, xl)
  * - Custom color support (CSS colors, variables)
  * - Accessibility attributes (ARIA labels, decorative icons)
- * - Dynamic SVG loading from Tabler Icons
+ * - Dynamic SVG loading from Heroicons
  *
  * @example
  * ```html
@@ -470,7 +470,7 @@ declare class IconComponent {
     private readonly sanitizer;
     private readonly http;
     /**
-    * Icon name from Tabler Icons library
+     * Icon name from Heroicons library
      * @example "user", "check", "arrow-right"
      */
     readonly name: _angular_core.InputSignal<string>;
@@ -509,13 +509,13 @@ declare class IconComponent {
      */
     readonly decorative: _angular_core.InputSignal<boolean>;
     /**
-    * SVG content loaded from Tabler Icons
+     * SVG content loaded from Heroicons
      * @internal
      */
     readonly svgContent: _angular_core.WritableSignal<SafeHtml>;
     /**
-    * Alias map for non-Tabler names (e.g. Material Design names)
-    * Maps alternative names to their Tabler equivalents
+     * Alias map for non-Heroicon names (e.g. Material Design names)
+     * Maps alternative names to their Heroicon equivalents
      * @internal
      */
     private readonly iconAliasMap;
@@ -794,12 +794,12 @@ declare class InputComponent implements ControlValueAccessor {
      */
     readonly helperText: _angular_core.InputSignal<string | undefined>;
     /**
-      * Icon to display before input text (Tabler icon name)
+     * Icon to display before input text (Heroicons name)
      * @example 'envelope'
      */
     readonly iconBefore: _angular_core.InputSignal<string | undefined>;
     /**
-      * Icon to display after input text (Tabler icon name)
+     * Icon to display after input text (Heroicons name)
      * @example 'eye'
      */
     readonly iconAfter: _angular_core.InputSignal<string | undefined>;
@@ -3317,7 +3317,7 @@ declare class TabComponent {
      */
     readonly disabled: _angular_core.InputSignal<boolean>;
     /**
-     * Optional icon name (Tabler Icons)
+     * Optional icon name (Heroicons)
      */
     readonly icon: _angular_core.InputSignal<string | undefined>;
     /**
@@ -3717,7 +3717,7 @@ declare class ChipComponent {
     variant: _angular_core.InputSignal<ChipVariant>;
     /** Size of the chip */
     size: _angular_core.InputSignal<ChipSize>;
-    /** Icon name from Tabler Icons */
+    /** Icon name from Heroicons */
     icon: _angular_core.InputSignal<string | undefined>;
     /** Whether the chip can be removed */
     removable: _angular_core.InputSignal<boolean>;
@@ -3772,6 +3772,8 @@ interface TableColumn {
     cssClass?: string;
     /** Optional tooltip shown on hover over the column header */
     tooltip?: string;
+    /** Optional formatter for cell output when no custom template is used */
+    formatter?: (value: unknown, row: Record<string, unknown>, column: TableColumn, rowIndex: number) => unknown;
     /** Input type for inline editing (default: text) */
     editType?: 'text' | 'number' | 'select';
     /** Options for select edit type */
@@ -3802,7 +3804,9 @@ type TableSize = 'sm' | 'md' | 'lg';
  * - Variant styles (default, striped, bordered)
  * - Size presets (sm, md, lg)
  * - Hoverable row highlighting
+ * - Per-column formatter callbacks for display values
  * - Custom cell templates via content projection
+ * - Composed cells (e.g. avatar + badge + actions)
  * - Responsive horizontal scrolling
  * - Empty state text for no data
  * - Accessible with proper table semantics
@@ -3812,6 +3816,20 @@ type TableSize = 'sm' | 'md' | 'lg';
  * <lc-table [columns]="columns" [data]="data" variant="striped" [hoverable]="true"
  *   (sort)="onSort($event)" (rowClick)="onRowClick($event)" />
  * ```
+ *
+ * @example
+ * ```ts
+ * columns: TableColumn[] = [
+ *   {
+ *     key: 'amount',
+ *     label: 'Amount',
+ *     formatter: (value) => new Intl.NumberFormat('de-DE', {
+ *       style: 'currency',
+ *       currency: 'EUR',
+ *     }).format(Number(value ?? 0)),
+ *   },
+ * ];
+ * ```
  */
 declare class TableComponent {
     /** Custom cell templates */
@@ -3894,6 +3912,7 @@ declare class TableComponent {
     getAriaSort(columnKey: string): string | null;
     getHeaderClasses(column: TableColumn): string;
     getCellValue(row: Record<string, unknown>, columnKey: string): unknown;
+    getFormattedCellValue(row: Record<string, unknown>, column: TableColumn, relativeRowIndex: number): unknown;
     getCellTemplate(columnKey: string): TableCellDirective | undefined;
     hasCustomTemplate(columnKey: string): boolean;
     onRowClick(row: Record<string, unknown>): void;
@@ -3923,7 +3942,7 @@ declare class TableComponent {
  *
  * Features:
  * - Consistent label-value layout for read-only data
- * - Optional leading icon from Tabler Icons
+ * - Optional leading icon from Heroicons
  * - Compact mode for dense layouts
  * - Content projection for custom value rendering
  * - Configurable icon size (xs, sm, md)
@@ -3944,7 +3963,7 @@ declare class FieldGroupComponent {
      */
     value: _angular_core.InputSignal<string | undefined>;
     /**
-     * Optional icon name from Tabler Icons
+     * Optional icon name from Heroicons
      */
     icon: _angular_core.InputSignal<string | undefined>;
     /**
@@ -4165,7 +4184,7 @@ type EmptyStateSize = 'sm' | 'md' | 'lg';
  *
  * Features:
  * - Compact (sm) and page-level (md, lg) size modes
- * - Optional icon from Tabler Icons library
+ * - Optional icon from Heroicons library
  * - Heading and description text
  * - Action slot for projected CTA buttons
  * - Centered layout with visual hierarchy
@@ -4190,7 +4209,7 @@ declare class EmptyStateComponent {
      */
     readonly size: _angular_core.InputSignal<EmptyStateSize>;
     /**
-      * Tabler icon name to display above the heading
+     * Heroicon name to display above the heading
      */
     readonly icon: _angular_core.InputSignal<string | undefined>;
     /**
@@ -4594,7 +4613,7 @@ declare class StatTrendComponent {
     sparklineData: _angular_core.InputSignal<number[]>;
     /** Color of the sparkline. Auto-matched to trend direction if not set. */
     sparklineColor: _angular_core.InputSignal<SparklineColor | undefined>;
-    /** Optional icon name (Tabler icon). */
+    /** Optional icon name (Heroicon). */
     icon: _angular_core.InputSignal<string>;
     protected readonly resolvedDirection: _angular_core.Signal<StatTrendDirection>;
     protected readonly trendColorClass: _angular_core.Signal<string>;