@life-cockpit/angular-ui-kit 1.4.0 → 1.5.0

package/package.json

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

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

@@ -208,6 +208,26 @@ interface NavigationItem {
      * Children are displayed beneath it with the label as a group title.
      */
     isSection?: boolean;
+    /**
+     * Optional action button displayed on the right side of the item.
+     * Emits `itemAction` when clicked (e.g. to open a modal or context menu).
+     */
+    action?: {
+        /** Icon name from lc-icons library (e.g., 'plus', 'ellipsis-horizontal') */
+        icon: string;
+        /** Accessible label for the action button */
+        ariaLabel?: string;
+    };
+    /**
+     * Optional badge displayed on the right side of the item (e.g. count).
+     * Rendered as a small pill badge.
+     */
+    badge?: {
+        /** Text or number to display inside the badge */
+        value: string | number;
+        /** Badge color variant */
+        variant?: 'default' | 'primary' | 'success' | 'warning' | 'error' | 'info';
+    };
 }
 
 /**
@@ -310,7 +330,7 @@ declare class CardComponent {
      * Badge color variant.
      * @default 'default'
      */
-    badgeVariant: _angular_core.InputSignal<"error" | "primary" | "warning" | "default" | "success">;
+    badgeVariant: _angular_core.InputSignal<"default" | "primary" | "success" | "warning" | "error">;
     /**
      * Visual variant of the card
      * - elevated: Box shadow (default)
@@ -902,7 +922,7 @@ declare class TypographyComponent {
      * Text color using semantic color tokens
      * @default 'primary'
      */
-    color: _angular_core.InputSignal<"error" | "primary" | "secondary" | "warning" | "info" | "success" | "disabled">;
+    color: _angular_core.InputSignal<"primary" | "success" | "warning" | "error" | "info" | "secondary" | "disabled">;
     /**
      * Font weight
      * @default 'regular'
@@ -3100,6 +3120,10 @@ declare class SidenavComponent {
      * Event emitted when a navigation item is clicked
      */
     readonly itemClicked: EventEmitter<NavigationItem>;
+    /**
+     * Event emitted when an item's action button is clicked
+     */
+    readonly itemAction: EventEmitter<NavigationItem>;
     /**
      * Computed CSS classes for the sidenav
      */
@@ -3122,6 +3146,10 @@ declare class SidenavComponent {
      * Handle navigation item click
      */
     handleItemClick(item: NavigationItem): void;
+    /**
+     * Handle action button click on a navigation item
+     */
+    handleItemAction(event: Event, item: NavigationItem): void;
     /**
      * Check if an item is active
      */
@@ -3143,7 +3171,7 @@ declare class SidenavComponent {
      */
     handleKeydown(event: KeyboardEvent): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SidenavComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SidenavComponent, "lc-sidenav", never, { "isOpenInput": { "alias": "isOpenInput"; "required": false; }; "modeInput": { "alias": "modeInput"; "required": false; }; "positionInput": { "alias": "positionInput"; "required": false; }; "widthInput": { "alias": "widthInput"; "required": false; }; "ariaLabelInput": { "alias": "ariaLabelInput"; "required": false; }; "hasOverlayInput": { "alias": "hasOverlayInput"; "required": false; }; "itemsInput": { "alias": "itemsInput"; "required": false; }; "activeRouteInput": { "alias": "activeRouteInput"; "required": false; }; "collapsedInput": { "alias": "collapsedInput"; "required": false; }; "themeInput": { "alias": "theme"; "required": false; }; }, { "closed": "closed"; "itemClicked": "itemClicked"; }, never, ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SidenavComponent, "lc-sidenav", never, { "isOpenInput": { "alias": "isOpenInput"; "required": false; }; "modeInput": { "alias": "modeInput"; "required": false; }; "positionInput": { "alias": "positionInput"; "required": false; }; "widthInput": { "alias": "widthInput"; "required": false; }; "ariaLabelInput": { "alias": "ariaLabelInput"; "required": false; }; "hasOverlayInput": { "alias": "hasOverlayInput"; "required": false; }; "itemsInput": { "alias": "itemsInput"; "required": false; }; "activeRouteInput": { "alias": "activeRouteInput"; "required": false; }; "collapsedInput": { "alias": "collapsedInput"; "required": false; }; "themeInput": { "alias": "theme"; "required": false; }; }, { "closed": "closed"; "itemClicked": "itemClicked"; "itemAction": "itemAction"; }, never, ["*"], true, never>;
 }
 
 type TabOrientation = 'horizontal' | 'vertical';
@@ -6272,7 +6300,7 @@ declare class ConfirmDialogComponent {
     /** Resolved icon color */
     protected iconColor: _angular_core.Signal<"var(--color-error-default, #ef4444)" | "var(--color-warning-default, #f59e0b)" | "var(--color-primary-600, #2563eb)">;
     /** Confirm button variant */
-    protected confirmButtonVariant: _angular_core.Signal<"primary" | "danger" | "warning">;
+    protected confirmButtonVariant: _angular_core.Signal<"primary" | "warning" | "danger">;
     /** Whether confirm is allowed (text match check) */
     protected confirmAllowed: _angular_core.Signal<boolean>;
     constructor();