@life-cockpit/angular-ui-kit 1.1.1 → 1.2.0

package/package.json

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

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

@@ -301,6 +301,15 @@ declare class CardComponent {
      * Optional subtitle rendered below the title.
      */
     subtitle: _angular_core.InputSignal<string | undefined>;
+    /**
+     * Optional badge text/count shown next to the title (e.g. item count).
+     */
+    badge: _angular_core.InputSignal<string | undefined>;
+    /**
+     * Badge color variant.
+     * @default 'default'
+     */
+    badgeVariant: _angular_core.InputSignal<"error" | "primary" | "warning" | "default" | "success">;
     /**
      * Visual variant of the card
      * - elevated: Box shadow (default)
@@ -354,7 +363,7 @@ declare class CardComponent {
      */
     protected handleKeydown(event: KeyboardEvent): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<CardComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CardComponent, "lc-card", never, { "title": { "alias": "title"; "required": false; "isSignal": true; }; "subtitle": { "alias": "subtitle"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "padding": { "alias": "padding"; "required": false; "isSignal": true; }; "clickable": { "alias": "clickable"; "required": false; "isSignal": true; }; "selected": { "alias": "selected"; "required": false; "isSignal": true; }; "borderRadius": { "alias": "borderRadius"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, { "cardClick": "cardClick"; }, never, ["[card-header]", "*", "[card-footer]"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CardComponent, "lc-card", never, { "title": { "alias": "title"; "required": false; "isSignal": true; }; "subtitle": { "alias": "subtitle"; "required": false; "isSignal": true; }; "badge": { "alias": "badge"; "required": false; "isSignal": true; }; "badgeVariant": { "alias": "badgeVariant"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "padding": { "alias": "padding"; "required": false; "isSignal": true; }; "clickable": { "alias": "clickable"; "required": false; "isSignal": true; }; "selected": { "alias": "selected"; "required": false; "isSignal": true; }; "borderRadius": { "alias": "borderRadius"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, { "cardClick": "cardClick"; }, never, ["[card-header-action]", "[card-header]", "*", "[card-footer]"], true, never>;
 }
 
 type CheckboxSize = 'xs' | 'sm' | 'md' | 'lg';
@@ -550,10 +559,17 @@ declare class LogoComponent {
      * Makes the logo appear clickable
      */
     clickable: boolean;
+    /**
+     * Color mode for different backgrounds
+     * - 'auto': Follows global theme (uses CSS filter in dark mode)
+     * - 'light': Optimized for light backgrounds (default appearance)
+     * - 'dark': Inverted for dark backgrounds (white/light logo)
+     */
+    colorMode: 'auto' | 'light' | 'dark';
     get logoSrc(): string;
     get logoClasses(): string;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<LogoComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<LogoComponent, "lc-logo", never, { "variant": { "alias": "variant"; "required": false; }; "size": { "alias": "size"; "required": false; }; "alt": { "alias": "alt"; "required": false; }; "clickable": { "alias": "clickable"; "required": false; }; }, {}, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<LogoComponent, "lc-logo", never, { "variant": { "alias": "variant"; "required": false; }; "size": { "alias": "size"; "required": false; }; "alt": { "alias": "alt"; "required": false; }; "clickable": { "alias": "clickable"; "required": false; }; "colorMode": { "alias": "colorMode"; "required": false; }; }, {}, never, never, true, never>;
 }
 
 interface MenuItem {
@@ -885,7 +901,7 @@ declare class TypographyComponent {
      * Text color using semantic color tokens
      * @default 'primary'
      */
-    color: _angular_core.InputSignal<"error" | "primary" | "secondary" | "warning" | "info" | "disabled" | "success">;
+    color: _angular_core.InputSignal<"error" | "primary" | "secondary" | "warning" | "info" | "success" | "disabled">;
     /**
      * Font weight
      * @default 'regular'
@@ -2805,6 +2821,13 @@ declare class BreadcrumbsComponent {
  * ```
  */
 declare class HeaderComponent {
+    /**
+     * Theme variant for the header
+     * - 'light': Light background with dark text (default)
+     * - 'dark': Dark background with light text
+     * - 'auto': Follows the global theme (data-theme attribute)
+     */
+    theme: 'light' | 'dark' | 'auto';
     /**
      * Logo image source URL
      */
@@ -2834,6 +2857,11 @@ declare class HeaderComponent {
      * Whether to show theme toggle button in header
      */
     showThemeButton: boolean;
+    /**
+     * Size of the profile dropdown menu
+     * @default 'sm'
+     */
+    menuSize: 'sm' | 'md' | 'lg';
     /**
      * Whether to show the Profile menu item in the user dropdown
      * @default true
@@ -2897,7 +2925,7 @@ declare class HeaderComponent {
      */
     onMenuItemClick(item: MenuItem): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<HeaderComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<HeaderComponent, "lc-header", never, { "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; }; "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; }; "menuSize": { "alias": "menuSize"; "required": false; }; "showProfileMenuItem": { "alias": "showProfileMenuItem"; "required": false; }; }, { "hamburgerClick": "hamburgerClick"; "themeToggleClick": "themeToggleClick"; "logoutClick": "logoutClick"; "profileClick": "profileClick"; }, never, never, true, never>;
 }
 
 type PaginationSize = 'sm' | 'md' | 'lg';
@@ -3043,6 +3071,12 @@ declare class SidenavComponent {
      * Input setter for collapsed
      */
     set collapsedInput(value: boolean);
+    /** Theme variant for the sidenav */
+    themeMode: _angular_core.WritableSignal<"light" | "dark" | "auto">;
+    /**
+     * Input setter for theme
+     */
+    set themeInput(value: 'light' | 'dark' | 'auto');
     /**
      * Event emitted when the sidenav should close
      */
@@ -3094,7 +3128,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; }; }, { "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"; }, never, ["*"], true, never>;
 }
 
 type TabOrientation = 'horizontal' | 'vertical';