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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@life-cockpit/angular-ui-kit",
-  "version": "1.3.1",
+  "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'
@@ -2858,6 +2878,16 @@ declare class HeaderComponent {
      * Whether to show theme toggle button in header
      */
     showThemeButton: boolean;
+    /**
+     * Contextual name displayed in the header (e.g. tenant, organization, project)
+     * @example 'Acme Corp'
+     */
+    contextName: string;
+    /**
+     * Label displayed above the context name (e.g. 'Tenant', 'Organization', 'Project')
+     * @example 'Tenant'
+     */
+    contextLabel: string;
     /**
      * Size of the profile dropdown menu
      * @default 'sm'
@@ -2884,6 +2914,10 @@ declare class HeaderComponent {
      * Emitted when Profile menu item is clicked
      */
     readonly profileClick: EventEmitter<void>;
+    /**
+     * Emitted when the context info area is clicked
+     */
+    readonly contextClick: EventEmitter<void>;
     protected readonly themeService: ThemeService;
     /**
      * Get menu items for profile dropdown
@@ -2926,7 +2960,7 @@ declare class HeaderComponent {
      */
     onMenuItemClick(item: MenuItem): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<HeaderComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<HeaderComponent, "lc-header", never, { "theme": { "alias": "theme"; "required": false; }; "logo": { "alias": "logo"; "required": false; }; "title": { "alias": "title"; "required": false; }; "subtitle": { "alias": "subtitle"; "required": false; }; "userEmail": { "alias": "userEmail"; "required": false; }; "userName": { "alias": "userName"; "required": false; }; "showHamburger": { "alias": "showHamburger"; "required": false; }; "showThemeButton": { "alias": "showThemeButton"; "required": false; }; "menuSize": { "alias": "menuSize"; "required": false; }; "showProfileMenuItem": { "alias": "showProfileMenuItem"; "required": false; }; }, { "hamburgerClick": "hamburgerClick"; "themeToggleClick": "themeToggleClick"; "logoutClick": "logoutClick"; "profileClick": "profileClick"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<HeaderComponent, "lc-header", never, { "theme": { "alias": "theme"; "required": false; }; "logo": { "alias": "logo"; "required": false; }; "title": { "alias": "title"; "required": false; }; "subtitle": { "alias": "subtitle"; "required": false; }; "userEmail": { "alias": "userEmail"; "required": false; }; "userName": { "alias": "userName"; "required": false; }; "showHamburger": { "alias": "showHamburger"; "required": false; }; "showThemeButton": { "alias": "showThemeButton"; "required": false; }; "contextName": { "alias": "contextName"; "required": false; }; "contextLabel": { "alias": "contextLabel"; "required": false; }; "menuSize": { "alias": "menuSize"; "required": false; }; "showProfileMenuItem": { "alias": "showProfileMenuItem"; "required": false; }; }, { "hamburgerClick": "hamburgerClick"; "themeToggleClick": "themeToggleClick"; "logoutClick": "logoutClick"; "profileClick": "profileClick"; "contextClick": "contextClick"; }, never, never, true, never>;
 }
 
 type PaginationSize = 'sm' | 'md' | 'lg';
@@ -3086,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
      */
@@ -3108,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
      */
@@ -3129,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';
@@ -6258,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();