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

package/package.json

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

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

@@ -611,6 +611,11 @@ declare class MenuComponent {
      * @default 'bottom-right'
      */
     position: 'bottom-left' | 'bottom-right' | 'top-left' | 'top-right';
+    /**
+     * Size of menu items
+     * @default 'md'
+     */
+    size: 'sm' | 'md' | 'lg';
     /**
      * Minimum width of menu dropdown
      * @default '220px'
@@ -642,7 +647,7 @@ declare class MenuComponent {
      */
     onEscapeKey(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<MenuComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MenuComponent, "lc-menu", never, { "items": { "alias": "items"; "required": false; }; "isOpen": { "alias": "isOpen"; "required": false; }; "position": { "alias": "position"; "required": false; }; "minWidth": { "alias": "minWidth"; "required": false; }; }, { "itemClick": "itemClick"; "closed": "closed"; }, never, ["[trigger]", "[header]", "[footer]"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MenuComponent, "lc-menu", never, { "items": { "alias": "items"; "required": false; }; "isOpen": { "alias": "isOpen"; "required": false; }; "position": { "alias": "position"; "required": false; }; "size": { "alias": "size"; "required": false; }; "minWidth": { "alias": "minWidth"; "required": false; }; }, { "itemClick": "itemClick"; "closed": "closed"; }, never, ["[trigger]", "[header]", "[footer]"], true, never>;
 }
 
 /**
@@ -1820,11 +1825,13 @@ declare class EmailInputComponent implements ControlValueAccessor {
 
 type HeroColor = 'primary' | 'secondary' | 'neutral' | 'success' | 'info' | 'warning' | 'accent-orange' | 'accent-purple' | 'accent-violet';
 type HeroSize = 'sm' | 'md' | 'lg';
+type HeroVariant = 'default' | 'slim' | 'light';
 /**
  * Hero component for prominent page headers with gradient backgrounds.
  *
  * Features:
- * - Color gradient variants (primary, secondary, success, warning, error, neutral)
+ * - Color gradient variants (primary, secondary, success, warning, info, neutral, accent-orange, accent-purple, accent-violet)
+ * - 3 visual variants: default (dark gradient), slim (compact banner), light (pastel gradient with dark text)
  * - Size options (sm, md, lg)
  * - Optional label text above the title
  * - Configurable border radius
@@ -1833,7 +1840,7 @@ type HeroSize = 'sm' | 'md' | 'lg';
  *
  * @example
  * ```html
- * <lc-hero label="MY APP" title="Welcome" color="primary">
+ * <lc-hero label="MY APP" title="Welcome" color="primary" variant="slim">
  *   <p>Description text</p>
  *   <div hero-footer>Status: Active</div>
  * </lc-hero>
@@ -1863,9 +1870,17 @@ declare class HeroComponent {
      * @default 'lg'
      */
     borderRadius: _angular_core.InputSignal<"sm" | "md" | "lg" | "none">;
+    /**
+     * Visual variant.
+     * - `default`: dark gradient with white text
+     * - `slim`: compact single-line banner
+     * - `light`: softer pastel gradient with dark text
+     * @default 'default'
+     */
+    variant: _angular_core.InputSignal<HeroVariant>;
     protected heroClasses: _angular_core.Signal<string>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<HeroComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<HeroComponent, "lc-hero", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": true; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "borderRadius": { "alias": "borderRadius"; "required": false; "isSignal": true; }; }, {}, never, ["*", "[hero-footer]"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<HeroComponent, "lc-hero", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": true; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "borderRadius": { "alias": "borderRadius"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; }, {}, never, ["*", "[hero-footer]"], true, never>;
 }
 
 type ProgressBarColor = 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'info';
@@ -2952,6 +2967,7 @@ 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
@@ -2962,11 +2978,13 @@ type SidenavMode = 'drawer' | 'docked';
  *
  * @example
  * ```html
- * <lc-sidenav [isOpen]="isOpen" mode="docked" [items]="navItems"
+ * <lc-sidenav [isOpen]="isOpen" mode="docked" [collapsed]="isCollapsed" [items]="navItems"
  *   (closed)="isOpen = false" (itemClicked)="navigate($event)" />
  * ```
  */
 declare class SidenavComponent {
+    /** Whether the sidenav is collapsed to icon-only rail */
+    collapsed: _angular_core.WritableSignal<boolean>;
     /** Whether the sidenav is open */
     isOpen: _angular_core.WritableSignal<boolean>;
     /** Display mode: 'drawer' (overlay) or 'docked' (persistent sidebar) */
@@ -3021,6 +3039,10 @@ declare class SidenavComponent {
      * Input setter for active route
      */
     set activeRouteInput(value: string);
+    /**
+     * Input setter for collapsed
+     */
+    set collapsedInput(value: boolean);
     /**
      * Event emitted when the sidenav should close
      */
@@ -3039,6 +3061,10 @@ declare class SidenavComponent {
     sidenavStyles: _angular_core.Signal<{
         width: string;
     }>;
+    /**
+     * Toggle collapsed state
+     */
+    toggleCollapsed(): void;
     /**
      * Handle close action
      */
@@ -3068,7 +3094,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; }; }, { "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; }; }, { "closed": "closed"; "itemClicked": "itemClicked"; }, never, ["*"], true, never>;
 }
 
 type TabOrientation = 'horizontal' | 'vertical';
@@ -3379,19 +3405,37 @@ type ListVariant = 'default' | 'card';
  * List item interface
  */
 interface ListItem {
-    /** Item label text */
+    /** Item label text (primary line) */
     label: string;
+    /** Secondary text shown below the label */
+    subtitle?: string;
+    /** Description text shown below subtitle (third line) */
+    description?: string;
     /** Optional icon identifier */
     icon?: string;
+    /** Avatar URL or initials (renders a circular avatar instead of icon) */
+    avatar?: string;
+    /** Badge text (e.g. count, status label) shown on the trailing side */
+    badge?: string;
+    /** Badge color variant */
+    badgeVariant?: 'default' | 'primary' | 'success' | 'warning' | 'error';
+    /** Metadata text shown on the trailing side (e.g. date, size) */
+    metadata?: string;
     /** Optional action label */
     action?: string;
     /** Item identifier */
     id?: string;
     /** Whether the item is disabled */
     disabled?: boolean;
+    /** Whether the item is selected / highlighted */
+    selected?: boolean;
     /** Any additional data */
     [key: string]: any;
 }
+/**
+ * List item size
+ */
+type ListSize = 'sm' | 'md' | 'lg';
 /**
  * List component for displaying structured item collections.
  *
@@ -3422,6 +3466,8 @@ declare class ListComponent {
     orientation: _angular_core.InputSignal<ListOrientation>;
     /** Visual variant */
     variant: _angular_core.InputSignal<ListVariant>;
+    /** Size of list items */
+    size: _angular_core.InputSignal<ListSize>;
     /** Whether to show dividers between items */
     showDividers: _angular_core.InputSignal<boolean>;
     /** Event emitted when an item is clicked */
@@ -3445,7 +3491,7 @@ declare class ListComponent {
      */
     onActionClick(item: ListItem): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<ListComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ListComponent, "lc-list", never, { "items": { "alias": "items"; "required": false; "isSignal": true; }; "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "showDividers": { "alias": "showDividers"; "required": false; "isSignal": true; }; }, { "itemClick": "itemClick"; "actionClick": "actionClick"; }, ["itemTemplate"], never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ListComponent, "lc-list", never, { "items": { "alias": "items"; "required": false; "isSignal": true; }; "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "showDividers": { "alias": "showDividers"; "required": false; "isSignal": true; }; }, { "itemClick": "itemClick"; "actionClick": "actionClick"; }, ["itemTemplate"], never, true, never>;
 }
 
 type ChipVariant = 'default' | 'primary' | 'success' | 'warning' | 'error' | 'info';
@@ -5926,4 +5972,4 @@ declare class RichTextEditorComponent implements ControlValueAccessor, AfterView
 }
 
 export { AccordionComponent, AlertComponent, AnimationDurationFast, AnimationEasingEaseIn, AnimationEasingEaseInOut, AnimationEasingEaseOut, AreaChartComponent, AvatarComponent, AvatarGroupComponent, BadgeComponent, BarChartComponent, BorderRadius2xl, BorderRadiusFull, BorderRadiusLg, BorderRadiusMd, BorderRadiusNone, BorderRadiusSm, BorderRadiusXl, BreadcrumbsComponent, ButtonComponent, CalendarComponent, CalloutComponent, CardComponent, ChatComponent, CheckboxComponent, ChipComponent, CodeBlockComponent, ColorAccentOrange, ColorAccentPurple, ColorAccentRed, ColorAccentRust, ColorAccentViolet, ColorErrorDark, ColorErrorDefault, ColorErrorLight, ColorInfoDark, ColorInfoDefault, ColorInfoLight, ColorNeutral100, ColorNeutral200, ColorNeutral300, ColorNeutral400, ColorNeutral50, ColorNeutral500, ColorNeutral600, ColorNeutral700, ColorNeutral800, ColorNeutral900, ColorPickerComponent, ColorPrimary100, ColorPrimary200, ColorPrimary300, ColorPrimary400, ColorPrimary50, ColorPrimary500, ColorPrimary600, ColorPrimary700, ColorPrimary800, ColorPrimary900, ColorSecondary100, ColorSecondary200, ColorSecondary300, ColorSecondary400, ColorSecondary50, ColorSecondary500, ColorSecondary600, ColorSecondary700, ColorSecondary800, ColorSecondary900, ColorSuccessDark, ColorSuccessDefault, ColorSuccessLight, ColorWarningDark, ColorWarningDefault, ColorWarningLight, ContainerComponent, DateRangePickerComponent, DatepickerComponent, DependencyViewerComponent, DiffViewerComponent, DividerComponent, DocumentViewerComponent, DonutChartComponent, DrawerComponent, Elevation1, Elevation2, Elevation3, Elevation4, EmailInputComponent, EmptyStateComponent, ErrorDisplayComponent, FieldGroupComponent, FileUploadComponent, FilterBarComponent, FooterComponent, FunnelChartComponent, GalleryComponent, GanttChartComponent, GaugeComponent, HeaderComponent, HeatmapComponent, HeroComponent, IconComponent, InputComponent, KanbanBoardComponent, LineChartComponent, ListComponent, ListItemTemplateDirective, LogoComponent, MenuComponent, ModalComponent, NotificationCenterComponent, NumberInputComponent, PaginationComponent, PasswordInputComponent, PieChartComponent, PopoverComponent, ProgressBarComponent, ProgressRingComponent, RadarChartComponent, RadioComponent, RatingComponent, RichTextEditorComponent, ScatterPlotComponent, SearchInputComponent, SectionComponent, SelectComponent, SidenavComponent, SizeInteractiveLgFontSize, SizeInteractiveLgHeight, SizeInteractiveLgPadding, SizeInteractiveMdFontSize, SizeInteractiveMdHeight, SizeInteractiveMdPadding, SizeInteractiveSmFontSize, SizeInteractiveSmHeight, SizeInteractiveSmPadding, SizeInteractiveXsFontSize, SizeInteractiveXsHeight, SizeInteractiveXsPadding, SizeMinTouchHeight, SizeMinTouchWidth, SkeletonComponent, SliderComponent, SpacerComponent, Spacing0, Spacing05, Spacing1, Spacing10, Spacing11, Spacing12, Spacing14, Spacing15, Spacing16, Spacing2, Spacing25, Spacing3, Spacing35, Spacing4, Spacing5, Spacing6, Spacing7, Spacing8, Spacing9, SparklineComponent, SpinnerComponent, StackComponent, StackedBarChartComponent, StatTrendComponent, StepperComponent, SwitchComponent, TabComponent, TableCellDirective, TableComponent, TabsComponent, TagInputComponent, TextareaComponent, ThemeService, TimelineComponent, ToastComponent, ToastService, ToggleGroupComponent, TooltipContentComponent, TooltipDirective, TypographyComponent, TypographyFontFamilyBase, TypographyFontFamilyMono, TypographyFontSize2xl, TypographyFontSize3xl, TypographyFontSize4xl, TypographyFontSize5xl, TypographyFontSize6xl, TypographyFontSizeBase, TypographyFontSizeLg, TypographyFontSizeSm, TypographyFontSizeXl, TypographyFontSizeXs, TypographyFontWeightBold, TypographyFontWeightMedium, TypographyFontWeightNormal, TypographyFontWeightSemibold, TypographyLineHeightNormal, TypographyLineHeightRelaxed, TypographyLineHeightTight, VerificationCodeInputComponent, WaterfallChartComponent };
-export type { AlertVariant, AreaChartSeries, AvatarGroupItem, AvatarSize, AvatarStatus, BadgeSize, BadgeVariant, BarChartItem, BarChartOrientation, BreadcrumbItem, BreadcrumbSize, ButtonSize, ButtonType, ButtonVariant, CalendarEvent, CalendarView, CalloutVariant, CellEditEvent, ChatMessage, ChatMessageRole, ChatSendEvent, CheckboxSize, ChipSize, ChipVariant, CodeBlockLanguage, ContainerSize, DateRange, DateValue, DependencyDirection, DependencyEdgeDef, DependencyNode, DependencyNodeStatus, DependencyRelation, DiffViewMode, DividerOrientation, DividerSpacing, DividerVariant, DocumentType, DonutChartSize, DonutSegment, DrawerPosition, DrawerSize, EmptyStateSize, ErrorSeverity, FileUploadFile, FilterConfig, FilterOption, FilterValues, FooterLink, FooterSection, FooterVariant, FunnelStep, GalleryItem, GalleryLayout, GallerySize, GanttDependency, GanttTask, GaugeColor, GaugeSize, HeatmapCell, HeroColor, HeroSize, IconSize, IconVariant, KanbanCard, KanbanColumn, KanbanLabel, KanbanMoveEvent, LineChartSeries, ListItem, ListOrientation, ListVariant, MenuItem, ModalSize, NavigationItem, Notification, NotificationPriority, NotificationType, PaginationSize, PasswordRequirement, PasswordStrength, PieChartSize, PieSegment, PopoverPosition, PopoverTrigger, ProgressBarColor, ProgressBarSize, ProgressBarVariant, ProgressRingColor, ProgressRingSize, RadarChartSeries, RadioSize, RatingSize, RichTextEditorMode, ScatterPoint, ScatterSeries, SearchInputSize, SectionBackground, SectionSpacing, SelectOption, SelectOptionGroup, SelectValue, SelectionChangeEvent, SidenavMode, SidenavPosition, SkeletonVariant, SortEvent, SpacerSize, SparklineColor, SparklineCurve, SpinnerSize, StackAlign, StackDirection, StackGap, StackJustify, StackedBarCategory, StackedBarLegend, StackedBarOrientation, StatTrendDirection, StepState, StepperStep, TabOrientation, TableColumn, TableSize, TableVariant, ThemeConfig, ThemeMode, ThemeState, TimelineItem, TimelineOrientation, Toast, ToastAction, ToastConfig, ToastPosition, ToastVariant, ToggleOption, ToolbarAction, ToolbarConfig, TooltipPosition, WaterfallItem };
+export type { AlertVariant, AreaChartSeries, AvatarGroupItem, AvatarSize, AvatarStatus, BadgeSize, BadgeVariant, BarChartItem, BarChartOrientation, BreadcrumbItem, BreadcrumbSize, ButtonSize, ButtonType, ButtonVariant, CalendarEvent, CalendarView, CalloutVariant, CellEditEvent, ChatMessage, ChatMessageRole, ChatSendEvent, CheckboxSize, ChipSize, ChipVariant, CodeBlockLanguage, ContainerSize, DateRange, DateValue, DependencyDirection, DependencyEdgeDef, DependencyNode, DependencyNodeStatus, DependencyRelation, DiffViewMode, DividerOrientation, DividerSpacing, DividerVariant, DocumentType, DonutChartSize, DonutSegment, DrawerPosition, DrawerSize, EmptyStateSize, ErrorSeverity, FileUploadFile, FilterConfig, FilterOption, FilterValues, FooterLink, FooterSection, FooterVariant, FunnelStep, GalleryItem, GalleryLayout, GallerySize, GanttDependency, GanttTask, GaugeColor, GaugeSize, HeatmapCell, HeroColor, HeroSize, HeroVariant, IconSize, IconVariant, KanbanCard, KanbanColumn, KanbanLabel, KanbanMoveEvent, LineChartSeries, ListItem, ListOrientation, ListSize, ListVariant, MenuItem, ModalSize, NavigationItem, Notification, NotificationPriority, NotificationType, PaginationSize, PasswordRequirement, PasswordStrength, PieChartSize, PieSegment, PopoverPosition, PopoverTrigger, ProgressBarColor, ProgressBarSize, ProgressBarVariant, ProgressRingColor, ProgressRingSize, RadarChartSeries, RadioSize, RatingSize, RichTextEditorMode, ScatterPoint, ScatterSeries, SearchInputSize, SectionBackground, SectionSpacing, SelectOption, SelectOptionGroup, SelectValue, SelectionChangeEvent, SidenavMode, SidenavPosition, SkeletonVariant, SortEvent, SpacerSize, SparklineColor, SparklineCurve, SpinnerSize, StackAlign, StackDirection, StackGap, StackJustify, StackedBarCategory, StackedBarLegend, StackedBarOrientation, StatTrendDirection, StepState, StepperStep, TabOrientation, TableColumn, TableSize, TableVariant, ThemeConfig, ThemeMode, ThemeState, TimelineItem, TimelineOrientation, Toast, ToastAction, ToastConfig, ToastPosition, ToastVariant, ToggleOption, ToolbarAction, ToolbarConfig, TooltipPosition, WaterfallItem };