@lesterarte/sefin-ui 0.0.29 → 0.0.31

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lesterarte/sefin-ui",
-  "version": "0.0.29",
+  "version": "0.0.31",
   "description": "Sefin Design System - A comprehensive Angular UI library based on Atomic Design and design tokens",
   "keywords": [
     "angular",
@@ -19,7 +19,8 @@
   "peerDependencies": {
     "@angular/common": "^21.0.0",
     "@angular/core": "^21.0.0",
-    "@angular/forms": "^21.0.0"
+    "@angular/forms": "^21.0.0",
+    "@angular/router": "^21.0.0"
   },
   "dependencies": {
     "lucide": "^0.562.0",

package/types/lesterarte-sefin-ui.d.ts

@@ -2,6 +2,7 @@ import * as i0 from '@angular/core';
 import { EventEmitter, Injector, AfterViewInit, OnChanges, ElementRef, SimpleChanges, OnInit, OnDestroy, ChangeDetectorRef, NgZone, TemplateRef } from '@angular/core';
 import { ControlValueAccessor, Validator, AbstractControl, ValidationErrors } from '@angular/forms';
 import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
+import { Router } from '@angular/router';
 
 /**
  * Color design tokens as TypeScript constants
@@ -950,9 +951,10 @@ declare class TypographyComponent {
     color: TypographyColor;
     lineHeight?: TypographyLineHeight;
     class: string;
+    text: string;
     get typographyClasses(): string;
     static ɵfac: i0.ɵɵFactoryDeclaration<TypographyComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<TypographyComponent, "sefin-typography", never, { "variant": { "alias": "variant"; "required": false; }; "size": { "alias": "size"; "required": false; }; "weight": { "alias": "weight"; "required": false; }; "color": { "alias": "color"; "required": false; }; "lineHeight": { "alias": "lineHeight"; "required": false; }; "class": { "alias": "class"; "required": false; }; }, {}, never, ["*", "*", "*", "*", "*", "*", "*", "*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TypographyComponent, "sefin-typography", never, { "variant": { "alias": "variant"; "required": false; }; "size": { "alias": "size"; "required": false; }; "weight": { "alias": "weight"; "required": false; }; "color": { "alias": "color"; "required": false; }; "lineHeight": { "alias": "lineHeight"; "required": false; }; "class": { "alias": "class"; "required": false; }; "text": { "alias": "text"; "required": false; }; }, {}, never, never, true, never>;
 }
 
 type DividerOrientation = 'horizontal' | 'vertical';
@@ -2042,7 +2044,69 @@ declare class TableComponent implements OnInit, OnChanges {
     static ɵcmp: i0.ɵɵComponentDeclaration<TableComponent, "sefin-table", never, { "columns": { "alias": "columns"; "required": false; }; "data": { "alias": "data"; "required": false; }; "trackByKey": { "alias": "trackByKey"; "required": false; }; "loading": { "alias": "loading"; "required": false; }; "emptyText": { "alias": "emptyText"; "required": false; }; "density": { "alias": "density"; "required": false; }; "striped": { "alias": "striped"; "required": false; }; "hover": { "alias": "hover"; "required": false; }; "selectable": { "alias": "selectable"; "required": false; }; "selectionMode": { "alias": "selectionMode"; "required": false; }; "pagination": { "alias": "pagination"; "required": false; }; "pageSizeOptions": { "alias": "pageSizeOptions"; "required": false; }; "pageSize": { "alias": "pageSize"; "required": false; }; "total": { "alias": "total"; "required": false; }; "sort": { "alias": "sort"; "required": false; }; "serverSide": { "alias": "serverSide"; "required": false; }; "stickyHeader": { "alias": "stickyHeader"; "required": false; }; "headerActionsTemplate": { "alias": "headerActionsTemplate"; "required": false; }; "emptyIconTemplate": { "alias": "emptyIconTemplate"; "required": false; }; }, { "rowClicked": "rowClicked"; "selectionChanged": "selectionChanged"; "pageChanged": "pageChanged"; "sortChanged": "sortChanged"; }, never, ["[actions]", "[actions]"], true, never>;
 }
 
+/**
+ * Sidebar navigation item interface
+ */
+interface NavItem {
+    /** Label text for the navigation item */
+    label: string;
+    /** Route path for navigation */
+    route?: string;
+    /** Icon name from lucide icons */
+    icon?: string;
+    /** Child navigation items */
+    children?: NavItem[];
+    /** Whether the item is expanded (for items with children) */
+    expanded?: boolean;
+}
+
+declare class SidebarComponent implements OnInit, OnDestroy {
+    private router;
+    private cdr;
+    private sanitizer;
+    /** Navigation items array */
+    navItems: NavItem[];
+    /** Mobile mode flag */
+    isMobile: boolean;
+    /** Sidebar open state (for mobile) */
+    isOpen: boolean;
+    /** Sidebar collapsed state (for desktop) */
+    isCollapsed: boolean;
+    /** Header title text */
+    headerTitle: string;
+    /** Header subtitle text */
+    headerSubtitle: string;
+    /** Header icon name */
+    headerIcon: string;
+    /** Footer version text */
+    footerVersion: string;
+    /** Show footer */
+    showFooter: boolean;
+    /** Toggle collapse event */
+    toggleCollapse: EventEmitter<void>;
+    currentRoute: string;
+    private routerSubscription?;
+    readonly primaryColor = "#55C3D8";
+    readonly textColor = "#383838";
+    constructor(router: Router, cdr: ChangeDetectorRef, sanitizer: DomSanitizer);
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    updateExpandedStates(): void;
+    hasActiveChild(item: NavItem, currentRoute: string): boolean;
+    toggleExpand(item: NavItem): void;
+    isActive(route: string): boolean;
+    navigate(route: string): void;
+    hasChildren(item: NavItem): boolean;
+    handleToggleCollapse(): void;
+    /**
+     * Get SVG icon as SafeHtml based on icon name
+     */
+    getIconSvg(iconName: string, size?: number): SafeHtml;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SidebarComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SidebarComponent, "sefin-sidebar", never, { "navItems": { "alias": "navItems"; "required": false; }; "isMobile": { "alias": "isMobile"; "required": false; }; "isOpen": { "alias": "isOpen"; "required": false; }; "isCollapsed": { "alias": "isCollapsed"; "required": false; }; "headerTitle": { "alias": "headerTitle"; "required": false; }; "headerSubtitle": { "alias": "headerSubtitle"; "required": false; }; "headerIcon": { "alias": "headerIcon"; "required": false; }; "footerVersion": { "alias": "footerVersion"; "required": false; }; "showFooter": { "alias": "showFooter"; "required": false; }; }, { "toggleCollapse": "toggleCollapse"; }, never, never, true, never>;
+}
+
 declare const STYLES_PATH = "./styles/index.scss";
 
-export { AccordionItemComponent, AlertComponent, AutocompleteComponent, AvatarComponent, BORDER_RADIUS_TOKENS, BRAND_THEME, BadgeComponent, BreadcrumbsComponent, ButtonComponent, ButtonGroupComponent, COLOR_TOKENS, CardComponent, CheckboxComponent, ChipComponent, ContainerComponent, DARK_THEME, DESIGN_TOKENS, DatepickerComponent, DividerComponent, FabButtonComponent, FormFieldComponent, IconButtonComponent, IconComponent, ImageComponent, LIGHT_THEME, LinkComponent, PaginationComponent, ProgressBarComponent, RadioComponent, RateComponent, SHADOW_TOKENS, SPACING_TOKENS, STYLES_PATH, SelectComponent, SpacerComponent, SpinnerComponent, StackComponent, SwitchComponent, TYPOGRAPHY_TOKENS, TabComponent, TableComponent, TagComponent, TextFieldComponent, TextareaComponent, ThemeLoader, ToastComponent, TooltipComponent, TypographyComponent, buildDisplayedColumns };
-export type { AlertSize, AlertVariant, AutocompleteOption, AvatarSize, BadgeSize, BadgeVariant, BaseComponent, BorderRadiusToken, BreadcrumbItem, BreadcrumbSeparator, BreadcrumbSize, ButtonGroupOption, ButtonGroupSize, ButtonGroupVariant, ButtonSize, ButtonVariant, CardVariant, ChipSize, ChipVariant, ColorShade, ColorTokenName, ContainerSize, ContainerVariant, CustomTheme, DateFormat, DatePickerMode, DateRange, DividerOrientation, DividerVariant, FabSize, FormFieldSize, FormFieldType, FormFieldVariant, IconSize, ImageFit, ImageLoading, ImageRounded, InputSize, LinkSize, LinkVariant, PageChangeEvent, PaginationSize, PaginationVariant, ProgressBarSize, ProgressBarVariant, RateIcon, RateSize, SelectOption, SelectionMode, ShadowToken, SortChangeEvent, SortDirection, SpacerOrientation, SpacerSize, SpacingToken, SpinnerSize, SpinnerVariant, TabSize, TabVariant, TableColumn, TableColumnAlign, TableColumnType, TableDensity, TagSize, TagVariant, TextFieldSize, TextFieldType, TextFieldVariant, TextareaSize, TextareaVariant, Theme, ThemeColors, ToastPosition, ToastVariant, TooltipPosition, TooltipTrigger, TypographyColor, TypographyLineHeight, TypographySize, TypographyToken, TypographyVariant, TypographyWeight };
+export { AccordionItemComponent, AlertComponent, AutocompleteComponent, AvatarComponent, BORDER_RADIUS_TOKENS, BRAND_THEME, BadgeComponent, BreadcrumbsComponent, ButtonComponent, ButtonGroupComponent, COLOR_TOKENS, CardComponent, CheckboxComponent, ChipComponent, ContainerComponent, DARK_THEME, DESIGN_TOKENS, DatepickerComponent, DividerComponent, FabButtonComponent, FormFieldComponent, IconButtonComponent, IconComponent, ImageComponent, LIGHT_THEME, LinkComponent, PaginationComponent, ProgressBarComponent, RadioComponent, RateComponent, SHADOW_TOKENS, SPACING_TOKENS, STYLES_PATH, SelectComponent, SidebarComponent, SpacerComponent, SpinnerComponent, StackComponent, SwitchComponent, TYPOGRAPHY_TOKENS, TabComponent, TableComponent, TagComponent, TextFieldComponent, TextareaComponent, ThemeLoader, ToastComponent, TooltipComponent, TypographyComponent, buildDisplayedColumns };
+export type { AlertSize, AlertVariant, AutocompleteOption, AvatarSize, BadgeSize, BadgeVariant, BaseComponent, BorderRadiusToken, BreadcrumbItem, BreadcrumbSeparator, BreadcrumbSize, ButtonGroupOption, ButtonGroupSize, ButtonGroupVariant, ButtonSize, ButtonVariant, CardVariant, ChipSize, ChipVariant, ColorShade, ColorTokenName, ContainerSize, ContainerVariant, CustomTheme, DateFormat, DatePickerMode, DateRange, DividerOrientation, DividerVariant, FabSize, FormFieldSize, FormFieldType, FormFieldVariant, IconSize, ImageFit, ImageLoading, ImageRounded, InputSize, LinkSize, LinkVariant, NavItem, PageChangeEvent, PaginationSize, PaginationVariant, ProgressBarSize, ProgressBarVariant, RateIcon, RateSize, SelectOption, SelectionMode, ShadowToken, SortChangeEvent, SortDirection, SpacerOrientation, SpacerSize, SpacingToken, SpinnerSize, SpinnerVariant, TabSize, TabVariant, TableColumn, TableColumnAlign, TableColumnType, TableDensity, TagSize, TagVariant, TextFieldSize, TextFieldType, TextFieldVariant, TextareaSize, TextareaVariant, Theme, ThemeColors, ToastPosition, ToastVariant, TooltipPosition, TooltipTrigger, TypographyColor, TypographyLineHeight, TypographySize, TypographyToken, TypographyVariant, TypographyWeight };