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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@life-cockpit/angular-ui-kit",
-  "version": "1.11.5",
+  "version": "1.11.8",
   "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 - Heroicons wrapper for displaying SVG icons
+ * Icon component - Tabler Icons 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 Heroicons
+ * - Dynamic SVG loading from Tabler Icons
  *
  * @example
  * ```html
@@ -470,7 +470,7 @@ declare class IconComponent {
     private readonly sanitizer;
     private readonly http;
     /**
-     * Icon name from Heroicons library
+    * Icon name from Tabler Icons 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 Heroicons
+    * SVG content loaded from Tabler Icons
      * @internal
      */
     readonly svgContent: _angular_core.WritableSignal<SafeHtml>;
     /**
-     * Alias map for non-Heroicon names (e.g. Material Design names)
-     * Maps alternative names to their Heroicon equivalents
+    * Alias map for non-Tabler names (e.g. Material Design names)
+    * Maps alternative names to their Tabler 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 (Heroicons name)
+      * Icon to display before input text (Tabler icon name)
      * @example 'envelope'
      */
     readonly iconBefore: _angular_core.InputSignal<string | undefined>;
     /**
-     * Icon to display after input text (Heroicons name)
+      * Icon to display after input text (Tabler icon 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 (Heroicons)
+     * Optional icon name (Tabler Icons)
      */
     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 Heroicons */
+    /** Icon name from Tabler Icons */
     icon: _angular_core.InputSignal<string | undefined>;
     /** Whether the chip can be removed */
     removable: _angular_core.InputSignal<boolean>;
@@ -3761,6 +3761,8 @@ declare class TableCellDirective {
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<TableCellDirective, "[lcTableCell]", never, { "columnKey": { "alias": "lcTableCell"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
+type TableCellClass = string | ((value: unknown, row: Record<string, unknown>, column: TableColumn, rowIndex: number) => string);
+type TableCellStyle = Record<string, string> | ((value: unknown, row: Record<string, unknown>, column: TableColumn, rowIndex: number) => Record<string, string>);
 interface TableColumn {
     key: string;
     label: string;
@@ -3770,6 +3772,10 @@ interface TableColumn {
     width?: string;
     /** Optional CSS class(es) applied to both th and td cells */
     cssClass?: string;
+    /** Optional CSS class(es) for td cells only (string or resolver callback) */
+    cellClass?: TableCellClass;
+    /** Optional inline styles for td cells only (object or resolver callback) */
+    cellStyle?: TableCellStyle;
     /** Optional tooltip shown on hover over the column header */
     tooltip?: string;
     /** Optional formatter for cell output when no custom template is used */
@@ -3805,6 +3811,7 @@ type TableSize = 'sm' | 'md' | 'lg';
  * - Size presets (sm, md, lg)
  * - Hoverable row highlighting
  * - Per-column formatter callbacks for display values
+ * - Per-cell class/style callbacks for conditional styling
  * - Custom cell templates via content projection
  * - Composed cells (e.g. avatar + badge + actions)
  * - Responsive horizontal scrolling
@@ -3913,6 +3920,8 @@ declare class TableComponent {
     getHeaderClasses(column: TableColumn): string;
     getCellValue(row: Record<string, unknown>, columnKey: string): unknown;
     getFormattedCellValue(row: Record<string, unknown>, column: TableColumn, relativeRowIndex: number): unknown;
+    getCellClasses(row: Record<string, unknown>, column: TableColumn, relativeRowIndex: number): string;
+    getCellStyles(row: Record<string, unknown>, column: TableColumn, relativeRowIndex: number): Record<string, string> | null;
     getCellTemplate(columnKey: string): TableCellDirective | undefined;
     hasCustomTemplate(columnKey: string): boolean;
     onRowClick(row: Record<string, unknown>): void;
@@ -3942,7 +3951,7 @@ declare class TableComponent {
  *
  * Features:
  * - Consistent label-value layout for read-only data
- * - Optional leading icon from Heroicons
+ * - Optional leading icon from Tabler Icons
  * - Compact mode for dense layouts
  * - Content projection for custom value rendering
  * - Configurable icon size (xs, sm, md)
@@ -3963,7 +3972,7 @@ declare class FieldGroupComponent {
      */
     value: _angular_core.InputSignal<string | undefined>;
     /**
-     * Optional icon name from Heroicons
+     * Optional icon name from Tabler Icons
      */
     icon: _angular_core.InputSignal<string | undefined>;
     /**
@@ -4184,7 +4193,7 @@ type EmptyStateSize = 'sm' | 'md' | 'lg';
  *
  * Features:
  * - Compact (sm) and page-level (md, lg) size modes
- * - Optional icon from Heroicons library
+ * - Optional icon from Tabler Icons library
  * - Heading and description text
  * - Action slot for projected CTA buttons
  * - Centered layout with visual hierarchy
@@ -4209,7 +4218,7 @@ declare class EmptyStateComponent {
      */
     readonly size: _angular_core.InputSignal<EmptyStateSize>;
     /**
-     * Heroicon name to display above the heading
+      * Tabler icon name to display above the heading
      */
     readonly icon: _angular_core.InputSignal<string | undefined>;
     /**
@@ -4613,7 +4622,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 (Heroicon). */
+    /** Optional icon name (Tabler icon). */
     icon: _angular_core.InputSignal<string>;
     protected readonly resolvedDirection: _angular_core.Signal<StatTrendDirection>;
     protected readonly trendColorClass: _angular_core.Signal<string>;