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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@life-cockpit/angular-ui-kit",
-  "version": "1.4.0",
+  "version": "1.6.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'
@@ -2833,6 +2853,12 @@ declare class HeaderComponent {
      * Logo image source URL
      */
     logo: string;
+    /**
+     * Whether to show the logo in the header.
+     * Set to false when the sidenav owns the logo (sidebar-first layout).
+     * @default true
+     */
+    showLogo: boolean;
     /**
      * Optional title to display next to logo
      */
@@ -2940,7 +2966,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; }; "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>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<HeaderComponent, "lc-header", never, { "theme": { "alias": "theme"; "required": false; }; "logo": { "alias": "logo"; "required": false; }; "showLogo": { "alias": "showLogo"; "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';
@@ -3025,13 +3051,23 @@ type SidenavMode = 'drawer' | 'docked';
  *   (closed)="isOpen = false" (itemClicked)="navigate($event)" />
  * ```
  */
-declare class SidenavComponent {
+declare class SidenavComponent implements OnInit, OnDestroy {
     /** Whether the sidenav is collapsed to icon-only rail */
     collapsed: _angular_core.WritableSignal<boolean>;
+    /** Whether to show the logo at the top of the sidenav */
+    showLogo: _angular_core.WritableSignal<boolean>;
     /** Whether the sidenav is open */
     isOpen: _angular_core.WritableSignal<boolean>;
     /** Display mode: 'drawer' (overlay) or 'docked' (persistent sidebar) */
     mode: _angular_core.WritableSignal<SidenavMode>;
+    /** Mobile breakpoint in pixels. Below this width, docked mode switches to drawer. */
+    mobileBreakpoint: _angular_core.WritableSignal<number>;
+    /** Whether the viewport is below the mobile breakpoint */
+    isMobile: _angular_core.WritableSignal<boolean>;
+    /** Effective mode: switches docked → drawer on mobile */
+    effectiveMode: _angular_core.Signal<SidenavMode>;
+    private mediaQuery;
+    private mediaHandler;
     /** Position of the sidenav (left or right) */
     position: _angular_core.WritableSignal<SidenavPosition>;
     /** Width of the sidenav drawer */
@@ -3086,6 +3122,14 @@ declare class SidenavComponent {
      * Input setter for collapsed
      */
     set collapsedInput(value: boolean);
+    /**
+     * Input setter for showLogo
+     */
+    set showLogoInput(value: boolean);
+    /**
+     * Input setter for mobileBreakpoint
+     */
+    set mobileBreakpointInput(value: number);
     /** Theme variant for the sidenav */
     themeMode: _angular_core.WritableSignal<"light" | "dark" | "auto">;
     /**
@@ -3100,6 +3144,14 @@ 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>;
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    private setupMediaQuery;
+    private teardownMediaQuery;
     /**
      * Computed CSS classes for the sidenav
      */
@@ -3122,6 +3174,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
      */
@@ -3131,7 +3187,8 @@ declare class SidenavComponent {
      */
     hasActiveChild(item: NavigationItem): boolean;
     /**
-     * Toggle expansion of a parent item
+     * Toggle expansion of a parent item.
+     * If the sidenav is collapsed, expand it first.
      */
     toggleExpanded(item: NavigationItem): void;
     /**
@@ -3143,7 +3200,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; }; "showLogoInput": { "alias": "showLogoInput"; "required": false; }; "mobileBreakpointInput": { "alias": "mobileBreakpointInput"; "required": false; }; "themeInput": { "alias": "theme"; "required": false; }; }, { "closed": "closed"; "itemClicked": "itemClicked"; "itemAction": "itemAction"; }, never, ["*"], true, never>;
 }
 
 type TabOrientation = 'horizontal' | 'vertical';
@@ -6272,7 +6329,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();