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

package/package.json

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

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

@@ -2853,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
      */
@@ -2960,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';
@@ -3030,28 +3036,53 @@ type SidenavMode = 'drawer' | 'docked';
  *
  * Features:
  * - Drawer (overlay) and docked (persistent) modes
- * - Collapsed icon-rail mode (narrow 56px sidebar with icons only)
- * - Hierarchical navigation with collapsible groups
- * - Section headlines for item grouping
- * - Active route highlighting
- * - Keyboard navigation support
+ * - Responsive mobile mode — docked automatically switches to drawer below a configurable breakpoint
+ * - Collapsed icon-rail mode (narrow 56px sidebar with icons only and hover tooltips)
+ * - Integrated logo area with collapse-toggle (sidebar-first layouts)
+ * - Hierarchical navigation with collapsible groups (up to 3 levels)
+ * - Section headlines for item grouping with optional action buttons
+ * - Action buttons on any item (hover-reveal)
+ * - Badge support on items (count / status indicator)
+ * - Active route highlighting (no hover color change on active items)
+ * - Keyboard navigation support (Escape closes drawer)
  * - Configurable width and position (left/right)
  * - Optional backdrop overlay
+ * - Theme variants: auto, light, dark (with teal accent for dark mode)
  * - Accessible with ARIA navigation role
  *
  * @example
  * ```html
- * <lc-sidenav [isOpen]="isOpen" mode="docked" [collapsed]="isCollapsed" [items]="navItems"
- *   (closed)="isOpen = false" (itemClicked)="navigate($event)" />
+ * <lc-sidenav
+ *   [isOpenInput]="isOpen"
+ *   modeInput="docked"
+ *   [collapsedInput]="isCollapsed"
+ *   [showLogoInput]="true"
+ *   [mobileBreakpointInput]="768"
+ *   [itemsInput]="navItems"
+ *   activeRouteInput="/dashboard"
+ *   theme="dark"
+ *   (closed)="isOpen = false"
+ *   (itemClicked)="navigate($event)"
+ *   (itemAction)="onAction($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 */
@@ -3106,6 +3137,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">;
     /**
@@ -3124,6 +3163,10 @@ declare class SidenavComponent {
      * 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
      */
@@ -3159,7 +3202,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;
     /**
@@ -3171,7 +3215,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"; "itemAction": "itemAction"; }, 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';