@elavarasanbititude/ng-cwr-sidebar 0.0.3

package/CHANGELOG.md

@@ -0,0 +1,28 @@
+# Changelog
+
+All notable changes to `ng-cwr-sidebar` will be documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
+and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+---
+
+## [1.0.0] - 2026-04-16
+
+### Added
+- `Sidebar` standalone Angular component (`<cwr-sidebar>`) with:
+  - Collapsible sidebar with configurable width
+  - Left/right positioning support
+  - Nested menu items with expand/collapse
+  - Badge support on menu items
+  - Configurable colors (background, text, hover)
+  - Mobile overlay mode
+  - Toggle button
+  - `menuItemClicked` and `collapsedChange` output events
+- `SidebarService` for programmatic control:
+  - `toggleCollapsed()`, `setCollapsed()`, `getCollapsed()`
+  - `setMenuItems()`, `getMenuItems()`, `addMenuItem()`, `removeMenuItem()`
+  - `setConfig()`, `getConfig()`
+  - Observable streams: `collapsed$`, `menuItems$`, `config$`
+- `SidebarMenuItem` and `SidebarConfig` TypeScript interfaces
+- Full SCSS theming with CSS custom properties

package/README.md

@@ -0,0 +1,348 @@
+# @yourname/ng-cwr-sidebar
+
+A modern, flexible, and fully customizable Angular sidebar component library built with Angular 21 and SCSS. Perfect for building responsive navigation sidebars with nested menus, icons, and badges.
+
+## Features
+
+- ✨ **Fully Customizable** - Configure colors, width, animations, and more
+- 📱 **Responsive Design** - Works seamlessly on desktop and mobile devices
+- 🎨 **Beautiful Styling** - Built with SCSS with light and dark theme support
+- 🔀 **Nested Menus** - Support for multi-level menu hierarchies
+- 🏷️ **Badges** - Add notification badges to menu items
+- 🎯 **Collapsible** - Smooth collapse/expand animations
+- ♿ **Accessible** - Built with accessibility best practices
+- 🚀 **TypeScript** - Fully typed with TypeScript interfaces
+- 🔄 **Reactive** - Built on RxJS Observables
+
+## Installation
+
+```bash
+npm install @yourname/ng-cwr-sidebar
+```
+
+## Quick Start
+
+### 1. Import the Component
+
+```typescript
+import { Sidebar } from '@yourname/ng-cwr-sidebar';
+
+@Component({
+  selector: 'app-root',
+  standalone: true,
+  imports: [Sidebar, CommonModule],
+  template: `
+    <cwr-sidebar 
+      [menuItems]="menuItems"
+      [config]="sidebarConfig"
+      (menuItemClicked)="onMenuItemClicked($event)"
+    ></cwr-sidebar>
+  `,
+})
+export class AppComponent {
+  menuItems = [
+    {
+      label: 'Dashboard',
+      icon: '📊',
+      route: '/dashboard',
+    },
+    {
+      label: 'Settings',
+      icon: '⚙️',
+      children: [
+        { label: 'Profile', route: '/settings/profile' },
+        { label: 'Preferences', route: '/settings/preferences' },
+      ],
+    },
+  ];
+
+  sidebarConfig = {
+    width: '250px',
+    collapsedWidth: '60px',
+  };
+
+  onMenuItemClicked(item: any) {
+    console.log('Menu item clicked:', item);
+  }
+}
+```
+
+### 2. Using the Sidebar Service
+
+```typescript
+import { SidebarService } from '@yourname/ng-cwr-sidebar';
+
+export class MyComponent {
+  constructor(private sidebarService: SidebarService) {}
+
+  toggleSidebar() {
+    this.sidebarService.toggleCollapsed();
+  }
+
+  addMenuItem() {
+    this.sidebarService.addMenuItem({
+      id: 'new-item',
+      label: 'New Menu Item',
+      icon: '✨',
+      route: '/new',
+    });
+  }
+}
+```
+
+## Configuration
+
+### SidebarConfig Interface
+
+```typescript
+interface SidebarConfig {
+  collapsed?: boolean;           // Initially collapsed state
+  position?: 'left' | 'right';   // Sidebar position
+  width?: string;                // Width when expanded (default: '250px')
+  collapsedWidth?: string;       // Width when collapsed (default: '60px')
+  backgroundColor?: string;      // Background color
+  textColor?: string;            // Text color
+  hoverColor?: string;           // Hover background color
+  toggleButton?: boolean;        // Show toggle button (default: true)
+  overlayOnMobile?: boolean;     // Show overlay on mobile (default: true)
+}
+```
+
+### SidebarMenuItem Interface
+
+```typescript
+interface SidebarMenuItem {
+  id?: string;                   // Unique identifier
+  label: string;                 // Display label
+  icon?: string;                 // Icon (emoji or HTML)
+  route?: string;                // Router link
+  action?: () => void;           // Click action function
+  children?: SidebarMenuItem[];  // Nested menu items
+  disabled?: boolean;            // Disable menu item
+  badge?: {
+    text: string;
+    color?: string;              // Badge background color
+  };
+}
+```
+
+## Examples
+
+### Basic Menu
+
+```typescript
+const menuItems: SidebarMenuItem[] = [
+  { label: 'Home', icon: '🏠', route: '/' },
+  { label: 'About', icon: 'ℹ️', route: '/about' },
+  { label: 'Contact', icon: '📧', route: '/contact' },
+];
+```
+
+### Menu with Nested Items
+
+```typescript
+const menuItems: SidebarMenuItem[] = [
+  {
+    label: 'Products',
+    icon: '📦',
+    children: [
+      { label: 'Electronics', route: '/products/electronics' },
+      { label: 'Clothing', route: '/products/clothing' },
+      { label: 'Books', route: '/products/books' },
+    ],
+  },
+];
+```
+
+### Menu with Badges
+
+```typescript
+const menuItems: SidebarMenuItem[] = [
+  {
+    label: 'Messages',
+    icon: '💬',
+    route: '/messages',
+    badge: {
+      text: '5 new',
+      color: '#ff6b6b',
+    },
+  },
+];
+```
+
+### Custom Actions
+
+```typescript
+const menuItems: SidebarMenuItem[] = [
+  {
+    label: 'Logout',
+    icon: '🚪',
+    action: () => {
+      // Custom logout logic
+      console.log('Logging out...');
+    },
+  },
+];
+```
+
+### Themed Configuration
+
+```typescript
+// Light theme
+const lightConfig: SidebarConfig = {
+  backgroundColor: '#f5f5f5',
+  textColor: '#333',
+  hoverColor: '#e0e0e0',
+};
+
+// Dark theme
+const darkConfig: SidebarConfig = {
+  backgroundColor: '#2c3e50',
+  textColor: '#ecf0f1',
+  hoverColor: '#34495e',
+};
+```
+
+## Component API
+
+### Input Properties
+
+- `@Input() menuItems: SidebarMenuItem[]` - Array of menu items to display
+- `@Input() config: SidebarConfig` - Configuration object for the sidebar
+
+### Output Events
+
+- `@Output() menuItemClicked: EventEmitter<SidebarMenuItem>` - Emits when a menu item is clicked
+- `@Output() collapsedChange: EventEmitter<boolean>` - Emits when sidebar collapsed state changes
+
+## Service API
+
+### SidebarService
+
+```typescript
+// Toggle collapsed state
+sidebarService.toggleCollapsed(): void
+
+// Set collapsed state
+sidebarService.setCollapsed(collapsed: boolean): void
+
+// Get collapsed state
+sidebarService.getCollapsed(): boolean
+
+// Get collapsed state as Observable
+sidebarService.collapsed$: Observable<boolean>
+
+// Set menu items
+sidebarService.setMenuItems(items: SidebarMenuItem[]): void
+
+// Get menu items
+sidebarService.getMenuItems(): SidebarMenuItem[]
+
+// Add a menu item
+sidebarService.addMenuItem(item: SidebarMenuItem): void
+
+// Remove a menu item by id
+sidebarService.removeMenuItem(id: string): void
+
+// Set configuration
+sidebarService.setConfig(config: SidebarConfig): void
+
+// Get configuration
+sidebarService.getConfig(): SidebarConfig
+```
+
+## Styling
+
+The component uses SCSS and includes both light and dark theme variants. You can customize the appearance by:
+
+1. **Inline Styles** - Use the `config` input property
+2. **CSS Classes** - Override default styles with your own CSS
+3. **Dark Theme** - Add the `dark-theme` class to enable dark mode
+
+### Custom Styling Example
+
+```scss
+// In your global styles
+.cwr-sidebar {
+  --primary-color: #your-color;
+  
+  .menu-link:hover {
+    background-color: rgba(0, 0, 0, 0.1);
+  }
+}
+```
+
+## Responsive Behavior
+
+- **Desktop (>768px)**: Sidebar displays inline with toggle functionality
+- **Mobile (<768px)**: Sidebar displays as overlay, can be toggled in/out of view
+
+## Accessibility
+
+- Full keyboard navigation support
+- ARIA labels for screen readers
+- Focus management
+- Semantic HTML structure
+
+## Browser Support
+
+- Chrome (latest)
+- Firefox (latest)
+- Safari (latest)
+- Edge (latest)
+
+## License
+
+MIT
+
+## Contributing
+
+Contributions are welcome! Please feel free to submit a Pull Request.
+
+## Support
+
+For issues, questions, or suggestions, please open an issue on the [GitHub repository](https://github.com/yourusername/ng-cwr-sidebar/issues).
+
+## Changelog
+
+### Version 1.0.0
+- Initial release
+- Full sidebar component with nested menus
+- Dark and light themes
+- Responsive design
+- Comprehensive service API
+
+Once the project is built, you can publish your library by following these steps:
+
+1. Navigate to the `dist` directory:
+
+   ```bash
+   cd dist/ng-cwr-sidebar
+   ```
+
+2. Run the `npm publish` command to publish your library to the npm registry:
+   ```bash
+   npm publish
+   ```
+
+## Running unit tests
+
+To execute unit tests with the [Karma](https://karma-runner.github.io) test runner, use the following command:
+
+```bash
+ng test
+```
+
+## Running end-to-end tests
+
+For end-to-end (e2e) testing, run:
+
+```bash
+ng e2e
+```
+
+Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.
+
+## Additional Resources
+
+For more information on using the Angular CLI, including detailed command references, visit the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.

package/fesm2022/elavarasanbititude-ng-cwr-sidebar.mjs

@@ -0,0 +1,217 @@
+import * as i0 from '@angular/core';
+import { Injectable, EventEmitter, inject, Output, Input, ChangeDetectionStrategy, Component } from '@angular/core';
+import * as i1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i2 from '@angular/router';
+import { Router, NavigationEnd, RouterModule } from '@angular/router';
+import { BehaviorSubject } from 'rxjs';
+import { filter } from 'rxjs/operators';
+
+class SidebarService {
+    collapsedSubject = new BehaviorSubject(false);
+    menuItemsSubject = new BehaviorSubject([]);
+    configSubject = new BehaviorSubject({});
+    collapsed$ = this.collapsedSubject.asObservable();
+    menuItems$ = this.menuItemsSubject.asObservable();
+    config$ = this.configSubject.asObservable();
+    constructor() { }
+    /**
+     * Toggle the sidebar collapsed state
+     */
+    toggleCollapsed() {
+        this.collapsedSubject.next(!this.collapsedSubject.value);
+    }
+    /**
+     * Set the collapsed state
+     */
+    setCollapsed(collapsed) {
+        this.collapsedSubject.next(collapsed);
+    }
+    /**
+     * Get current collapsed state
+     */
+    getCollapsed() {
+        return this.collapsedSubject.value;
+    }
+    /**
+     * Set menu items
+     */
+    setMenuItems(items) {
+        this.menuItemsSubject.next(items);
+    }
+    /**
+     * Get menu items
+     */
+    getMenuItems() {
+        return this.menuItemsSubject.value;
+    }
+    /**
+     * Add a menu item
+     */
+    addMenuItem(item) {
+        const items = this.menuItemsSubject.value;
+        this.menuItemsSubject.next([...items, item]);
+    }
+    /**
+     * Remove a menu item by id
+     */
+    removeMenuItem(id) {
+        const items = this.menuItemsSubject.value.filter(item => item.id !== id);
+        this.menuItemsSubject.next(items);
+    }
+    /**
+     * Update sidebar configuration
+     */
+    setConfig(config) {
+        this.configSubject.next(config);
+    }
+    /**
+     * Get sidebar configuration
+     */
+    getConfig() {
+        return this.configSubject.value;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: SidebarService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: SidebarService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: SidebarService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [] });
+
+class Sidebar {
+    menuItems = [];
+    config = {};
+    collapsed = false;
+    logoUrl;
+    logoAlt = 'Logo';
+    showToggle = true;
+    menuItemClicked = new EventEmitter();
+    collapsedChange = new EventEmitter();
+    itemBadgeClick = new EventEmitter();
+    sidebarService = inject(SidebarService);
+    router = inject(Router);
+    get collapsed$() {
+        return this.sidebarService.collapsed$;
+    }
+    expandedItems = new Set();
+    isCollapsed = false;
+    defaultConfig = {
+        collapsed: false,
+        position: 'left',
+        width: '240px',
+        collapsedWidth: '60px',
+        backgroundColor: '#141F2D',
+        textColor: '#3A4D63',
+        hoverColor: '#FDFDFD',
+        activeColor: '#28B48C',
+        toggleButton: true,
+        overlayOnMobile: true,
+    };
+    ngOnInit() {
+        this.isCollapsed = this.collapsed;
+        this.sidebarService.setMenuItems(this.menuItems);
+        const mergedConfig = { ...this.defaultConfig, ...this.config };
+        this.sidebarService.setConfig(mergedConfig);
+        // Track router navigation for active state
+        this.router.events.pipe(filter(event => event instanceof NavigationEnd)).subscribe(() => {
+            // Trigger change detection for route changes
+        });
+    }
+    ngOnChanges(changes) {
+        if (changes['menuItems'] && !changes['menuItems'].firstChange) {
+            this.sidebarService.setMenuItems(this.menuItems);
+        }
+        if (changes['collapsed']) {
+            this.isCollapsed = this.collapsed;
+        }
+        if (changes['config'] && !changes['config'].firstChange) {
+            this.sidebarService.setConfig({ ...this.defaultConfig, ...this.config });
+        }
+    }
+    toggleSidebar() {
+        this.isCollapsed = !this.isCollapsed;
+        this.sidebarService.toggleCollapsed();
+        this.collapsedChange.emit(this.isCollapsed);
+    }
+    toggleExpand(item) {
+        if (item.children && item.children.length > 0) {
+            const itemId = item.id || item.label;
+            if (this.expandedItems.has(itemId)) {
+                this.expandedItems.delete(itemId);
+            }
+            else {
+                this.expandedItems.add(itemId);
+            }
+        }
+    }
+    isExpanded(item) {
+        const itemId = item.id || item.label;
+        // Check if explicitly expanded or should be expanded by default
+        return this.expandedItems.has(itemId) || item.expandedByDefault === true;
+    }
+    onMenuItemClick(item) {
+        if (item.action) {
+            item.action();
+        }
+        this.menuItemClicked.emit(item);
+    }
+    onBadgeClick(event, item) {
+        event.stopPropagation();
+        this.itemBadgeClick.emit(item);
+    }
+    hasChildren(item) {
+        return !!(item.children && item.children.length > 0);
+    }
+    isActiveRoute(item) {
+        if (item.isActive) {
+            return item.isActive();
+        }
+        return item.route ? this.router.url.includes(`/${item.route}`) : false;
+    }
+    getConfig() {
+        return this.sidebarService.getConfig();
+    }
+    closeSidebar() {
+        if (!this.isCollapsed) {
+            this.toggleSidebar();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: Sidebar, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.9", type: Sidebar, isStandalone: true, selector: "cwr-sidebar", inputs: { menuItems: "menuItems", config: "config", collapsed: "collapsed", logoUrl: "logoUrl", logoAlt: "logoAlt", showToggle: "showToggle" }, outputs: { menuItemClicked: "menuItemClicked", collapsedChange: "collapsedChange", itemBadgeClick: "itemBadgeClick" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"sidebar d-flex flex-column justify-content-between\" [class.isOpen]=\"!isCollapsed\">\n  <div>\n    <!-- Logo Section -->\n    <div class=\"d-flex justify-content-between logo pe-3 w-100\" *ngIf=\"logoUrl || showToggle\">\n      <img *ngIf=\"logoUrl\" [src]=\"logoUrl\" [alt]=\"logoAlt\" />\n      <span\n        class=\"icon-close_big d-md-none\"\n        style=\"color: #fff; cursor: pointer\"\n        [class.d-none]=\"isCollapsed\"\n        (click)=\"closeSidebar()\"></span>\n    </div>\n\n    <!-- Navigation Wrapper -->\n    <div class=\"nav-wrapper\" role=\"navigation\">\n      <ul class=\"active\">\n        <li \n          *ngFor=\"let item of menuItems\"\n          [class.active]=\"isActiveRoute(item)\"\n          [class.disabled]=\"item.disabled\"\n          [class.hidden]=\"item.visible && !item.visible()\"\n          [ngClass]=\"item.cssClass\"\n          [title]=\"item.tooltip || ''\"\n        >\n          <a \n            class=\"d-flex align-items-center w-100\"\n            [routerLink]=\"item.route\"\n            [queryParams]=\"item.queryParams\"\n            [queryParamsHandling]=\"item.queryParamsHandling\"\n            [target]=\"item.target\"\n            [routerLinkActive]=\"item.isActive ? '' : 'active'\"\n            [routerLinkActiveOptions]=\"{ exact: false }\"\n            (click)=\"onMenuItemClick(item)\"\n          >\n            <!-- Icon Section -->\n            <div class=\"menu-icon-container\" *ngIf=\"item.icon\">\n              <div [innerHTML]=\"item.icon\" class=\"svg-icon\"></div>\n            </div>\n\n            <!-- Label and Badge -->\n            <div class=\"d-flex w-100 justify-content-between align-items-center\">\n              <span class=\"nav-label\">{{ item.label }}</span>\n              \n              <!-- Badge -->\n              <span \n                class=\"badge-chip\"\n                *ngIf=\"item.badge\"\n                [style.background-color]=\"item.badge.color || '#28B48C'\"\n                (click)=\"onBadgeClick($event, item)\"\n              >\n                {{ item.badge.text }}\n              </span>\n            </div>\n          </a>\n\n          <!-- Submenu -->\n          <ul \n            class=\"submenu-list\"\n            *ngIf=\"hasChildren(item) && isExpanded(item)\"\n          >\n            <li \n              *ngFor=\"let child of item.children\"\n              [class.active]=\"isActiveRoute(child)\"\n              [class.disabled]=\"child.disabled\"\n              [class.hidden]=\"child.visible && !child.visible()\"\n              [ngClass]=\"child.cssClass\"\n              [title]=\"child.tooltip || ''\"\n            >\n              <a \n                class=\"d-flex align-items-center submenu-link\"\n                [routerLink]=\"child.route\"\n                [queryParams]=\"child.queryParams\"\n                [queryParamsHandling]=\"child.queryParamsHandling\"\n                [target]=\"child.target\"\n                [routerLinkActive]=\"child.isActive ? '' : 'active'\"\n                [routerLinkActiveOptions]=\"{ exact: false }\"\n                (click)=\"onMenuItemClick(child)\"\n              >\n                <span class=\"nav-label\">{{ child.label }}</span>\n              </a>\n            </li>\n          </ul>\n\n          <!-- Divider -->\n          <div *ngIf=\"item.divider\" class=\"sidebar-divider\"></div>\n        </li>\n      </ul>\n    </div>\n  </div>\n\n  <!-- Logout/Footer Section (optional) -->\n  <div class=\"sidebar-footer\" *ngIf=\"!isCollapsed\">\n    <slot name=\"footer\"></slot>\n  </div>\n</div>\n", styles: [".sidebar{background:#141f2d;box-shadow:0 0 4px #0000001a;min-height:100vh;width:240px;border-right:1px solid #2C4057;font-family:Inter,sans-serif;position:fixed;top:0;left:0;z-index:300;transition:.5s;-webkit-transition:.5s;-moz-transition:.5s;display:flex;flex-direction:column;justify-content:space-between}.sidebar .d-flex{display:flex}.sidebar .flex-column{flex-direction:column}.sidebar .justify-content-between{justify-content:space-between}.sidebar .justify-content-center{justify-content:center}.sidebar .align-items-center{align-items:center}.sidebar .w-100{width:100%}.sidebar .pe-3{padding-right:1rem}.sidebar .d-md-none{display:none}.sidebar .d-none{display:none!important}.sidebar .me-12{margin-right:8px}.sidebar .badge-chip{display:flex;height:20px;padding:3px 6px;align-items:center;color:#fdfdfd;border-radius:4.5px;font-size:9px;font-weight:700;letter-spacing:.18px;text-align:center;white-space:nowrap;cursor:pointer;transition:all .3s ease}.sidebar .badge-chip:hover{opacity:.9;transform:scale(1.05)}.sidebar .fill-based-icons{fill:#3a4d63!important}.sidebar li.active .fill-based-icons{fill:#2c2b33!important}.sidebar li:not(.active) a:hover .fill-based-icons{fill:#fdfdfd!important}.sidebar .stroke-based-icons{stroke:#3a4d63!important}.sidebar li.active .stroke-based-icons{stroke:#2c2b33!important}.sidebar li:not(.active) a:hover .stroke-based-icons{stroke:#fdfdfd!important}.sidebar .nav-wrapper a{text-decoration:none;transition:all .3s ease}.sidebar .nav-wrapper .nav-label{font-weight:500;font-size:16px;line-height:19px;color:#3a4d63;transition:color .3s ease}.sidebar .nav-wrapper ul{list-style:none;padding:0;margin:0}.sidebar .nav-wrapper ul li{display:flex;justify-content:space-between;align-items:center;align-self:stretch;padding:8px 14px 8px 24px;height:52px;position:relative;transition:all .3s ease}.sidebar .nav-wrapper ul li.active{background:#28b48c;border-radius:0 8px 8px 0;margin-right:1.5rem}.sidebar .nav-wrapper ul li.active .nav-label,.sidebar .nav-wrapper ul li.active a:hover .nav-label{color:#2c2b33!important}.sidebar .nav-wrapper ul li:not(.active) a:hover .nav-label{color:#fdfdfd!important}.sidebar .nav-wrapper ul li.disabled{opacity:.5;cursor:not-allowed}.sidebar .nav-wrapper ul li.disabled a{pointer-events:none}.sidebar .nav-wrapper ul .submenu-list{list-style:none;padding:0;margin:0;background:#0003}.sidebar .nav-wrapper ul .submenu-list .submenu-item{padding:0;height:auto}.sidebar .nav-wrapper ul .submenu-list .submenu-item .submenu-link{padding:8px 14px 8px 48px;height:40px;display:flex;align-items:center;font-size:14px}.sidebar .nav-wrapper ul .submenu-list .submenu-item .submenu-link .nav-label{font-size:14px}.sidebar .logo{padding-top:36px;padding-left:24px;padding-bottom:66px}.sidebar .logo img{height:20px;object-fit:contain}.sidebar .menu-icon-container{display:flex;align-items:center;justify-content:center;min-width:24px}.sidebar .menu-icon-container .svg-icon{display:flex;align-items:center;justify-content:center}.sidebar .menu-icon-container .svg-icon svg{width:20px;height:20px}.sidebar .support{color:#3a4d63;padding:8px 26px;height:52px;font-weight:500;font-size:16px;cursor:pointer;text-align:center;text-decoration:none;transition:all .3s ease}.sidebar .support path,.sidebar .support circle{stroke:#3a4d63;transition:stroke .3s ease}.sidebar .support:hover{color:#fdfdfd!important}.sidebar .support:hover path,.sidebar .support:hover circle{stroke:#fdfdfd}.sidebar .logout{color:#ff677a;padding:8px 32px;font-weight:500;cursor:pointer;transition:all .3s ease}.sidebar .logout:hover{opacity:.8}.sidebar .icon-logout{color:#ff677a}.sidebar .sidebar-footer{padding:1rem;border-top:1px solid #2C4057}@media(max-width:768px){.sidebar{left:-240px;padding-bottom:50px;width:240px;transition:left .5s ease}.sidebar.isOpen{left:0!important;width:100%}.sidebar .d-md-none{display:block!important}.sidebar .icon-close_big{margin-right:1rem}}.d-flex{display:flex}.flex-column{flex-direction:column}.justify-content-between{justify-content:space-between}.align-items-center{align-items:center}.w-100{width:100%}.pe-3{padding-right:1rem}.sidebar-divider{height:1px;background-color:#ffffff1a;margin:8px 0;width:100%}li.hidden{display:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i2.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: Sidebar, decorators: [{
+            type: Component,
+            args: [{ selector: 'cwr-sidebar', standalone: true, imports: [CommonModule, RouterModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"sidebar d-flex flex-column justify-content-between\" [class.isOpen]=\"!isCollapsed\">\n  <div>\n    <!-- Logo Section -->\n    <div class=\"d-flex justify-content-between logo pe-3 w-100\" *ngIf=\"logoUrl || showToggle\">\n      <img *ngIf=\"logoUrl\" [src]=\"logoUrl\" [alt]=\"logoAlt\" />\n      <span\n        class=\"icon-close_big d-md-none\"\n        style=\"color: #fff; cursor: pointer\"\n        [class.d-none]=\"isCollapsed\"\n        (click)=\"closeSidebar()\"></span>\n    </div>\n\n    <!-- Navigation Wrapper -->\n    <div class=\"nav-wrapper\" role=\"navigation\">\n      <ul class=\"active\">\n        <li \n          *ngFor=\"let item of menuItems\"\n          [class.active]=\"isActiveRoute(item)\"\n          [class.disabled]=\"item.disabled\"\n          [class.hidden]=\"item.visible && !item.visible()\"\n          [ngClass]=\"item.cssClass\"\n          [title]=\"item.tooltip || ''\"\n        >\n          <a \n            class=\"d-flex align-items-center w-100\"\n            [routerLink]=\"item.route\"\n            [queryParams]=\"item.queryParams\"\n            [queryParamsHandling]=\"item.queryParamsHandling\"\n            [target]=\"item.target\"\n            [routerLinkActive]=\"item.isActive ? '' : 'active'\"\n            [routerLinkActiveOptions]=\"{ exact: false }\"\n            (click)=\"onMenuItemClick(item)\"\n          >\n            <!-- Icon Section -->\n            <div class=\"menu-icon-container\" *ngIf=\"item.icon\">\n              <div [innerHTML]=\"item.icon\" class=\"svg-icon\"></div>\n            </div>\n\n            <!-- Label and Badge -->\n            <div class=\"d-flex w-100 justify-content-between align-items-center\">\n              <span class=\"nav-label\">{{ item.label }}</span>\n              \n              <!-- Badge -->\n              <span \n                class=\"badge-chip\"\n                *ngIf=\"item.badge\"\n                [style.background-color]=\"item.badge.color || '#28B48C'\"\n                (click)=\"onBadgeClick($event, item)\"\n              >\n                {{ item.badge.text }}\n              </span>\n            </div>\n          </a>\n\n          <!-- Submenu -->\n          <ul \n            class=\"submenu-list\"\n            *ngIf=\"hasChildren(item) && isExpanded(item)\"\n          >\n            <li \n              *ngFor=\"let child of item.children\"\n              [class.active]=\"isActiveRoute(child)\"\n              [class.disabled]=\"child.disabled\"\n              [class.hidden]=\"child.visible && !child.visible()\"\n              [ngClass]=\"child.cssClass\"\n              [title]=\"child.tooltip || ''\"\n            >\n              <a \n                class=\"d-flex align-items-center submenu-link\"\n                [routerLink]=\"child.route\"\n                [queryParams]=\"child.queryParams\"\n                [queryParamsHandling]=\"child.queryParamsHandling\"\n                [target]=\"child.target\"\n                [routerLinkActive]=\"child.isActive ? '' : 'active'\"\n                [routerLinkActiveOptions]=\"{ exact: false }\"\n                (click)=\"onMenuItemClick(child)\"\n              >\n                <span class=\"nav-label\">{{ child.label }}</span>\n              </a>\n            </li>\n          </ul>\n\n          <!-- Divider -->\n          <div *ngIf=\"item.divider\" class=\"sidebar-divider\"></div>\n        </li>\n      </ul>\n    </div>\n  </div>\n\n  <!-- Logout/Footer Section (optional) -->\n  <div class=\"sidebar-footer\" *ngIf=\"!isCollapsed\">\n    <slot name=\"footer\"></slot>\n  </div>\n</div>\n", styles: [".sidebar{background:#141f2d;box-shadow:0 0 4px #0000001a;min-height:100vh;width:240px;border-right:1px solid #2C4057;font-family:Inter,sans-serif;position:fixed;top:0;left:0;z-index:300;transition:.5s;-webkit-transition:.5s;-moz-transition:.5s;display:flex;flex-direction:column;justify-content:space-between}.sidebar .d-flex{display:flex}.sidebar .flex-column{flex-direction:column}.sidebar .justify-content-between{justify-content:space-between}.sidebar .justify-content-center{justify-content:center}.sidebar .align-items-center{align-items:center}.sidebar .w-100{width:100%}.sidebar .pe-3{padding-right:1rem}.sidebar .d-md-none{display:none}.sidebar .d-none{display:none!important}.sidebar .me-12{margin-right:8px}.sidebar .badge-chip{display:flex;height:20px;padding:3px 6px;align-items:center;color:#fdfdfd;border-radius:4.5px;font-size:9px;font-weight:700;letter-spacing:.18px;text-align:center;white-space:nowrap;cursor:pointer;transition:all .3s ease}.sidebar .badge-chip:hover{opacity:.9;transform:scale(1.05)}.sidebar .fill-based-icons{fill:#3a4d63!important}.sidebar li.active .fill-based-icons{fill:#2c2b33!important}.sidebar li:not(.active) a:hover .fill-based-icons{fill:#fdfdfd!important}.sidebar .stroke-based-icons{stroke:#3a4d63!important}.sidebar li.active .stroke-based-icons{stroke:#2c2b33!important}.sidebar li:not(.active) a:hover .stroke-based-icons{stroke:#fdfdfd!important}.sidebar .nav-wrapper a{text-decoration:none;transition:all .3s ease}.sidebar .nav-wrapper .nav-label{font-weight:500;font-size:16px;line-height:19px;color:#3a4d63;transition:color .3s ease}.sidebar .nav-wrapper ul{list-style:none;padding:0;margin:0}.sidebar .nav-wrapper ul li{display:flex;justify-content:space-between;align-items:center;align-self:stretch;padding:8px 14px 8px 24px;height:52px;position:relative;transition:all .3s ease}.sidebar .nav-wrapper ul li.active{background:#28b48c;border-radius:0 8px 8px 0;margin-right:1.5rem}.sidebar .nav-wrapper ul li.active .nav-label,.sidebar .nav-wrapper ul li.active a:hover .nav-label{color:#2c2b33!important}.sidebar .nav-wrapper ul li:not(.active) a:hover .nav-label{color:#fdfdfd!important}.sidebar .nav-wrapper ul li.disabled{opacity:.5;cursor:not-allowed}.sidebar .nav-wrapper ul li.disabled a{pointer-events:none}.sidebar .nav-wrapper ul .submenu-list{list-style:none;padding:0;margin:0;background:#0003}.sidebar .nav-wrapper ul .submenu-list .submenu-item{padding:0;height:auto}.sidebar .nav-wrapper ul .submenu-list .submenu-item .submenu-link{padding:8px 14px 8px 48px;height:40px;display:flex;align-items:center;font-size:14px}.sidebar .nav-wrapper ul .submenu-list .submenu-item .submenu-link .nav-label{font-size:14px}.sidebar .logo{padding-top:36px;padding-left:24px;padding-bottom:66px}.sidebar .logo img{height:20px;object-fit:contain}.sidebar .menu-icon-container{display:flex;align-items:center;justify-content:center;min-width:24px}.sidebar .menu-icon-container .svg-icon{display:flex;align-items:center;justify-content:center}.sidebar .menu-icon-container .svg-icon svg{width:20px;height:20px}.sidebar .support{color:#3a4d63;padding:8px 26px;height:52px;font-weight:500;font-size:16px;cursor:pointer;text-align:center;text-decoration:none;transition:all .3s ease}.sidebar .support path,.sidebar .support circle{stroke:#3a4d63;transition:stroke .3s ease}.sidebar .support:hover{color:#fdfdfd!important}.sidebar .support:hover path,.sidebar .support:hover circle{stroke:#fdfdfd}.sidebar .logout{color:#ff677a;padding:8px 32px;font-weight:500;cursor:pointer;transition:all .3s ease}.sidebar .logout:hover{opacity:.8}.sidebar .icon-logout{color:#ff677a}.sidebar .sidebar-footer{padding:1rem;border-top:1px solid #2C4057}@media(max-width:768px){.sidebar{left:-240px;padding-bottom:50px;width:240px;transition:left .5s ease}.sidebar.isOpen{left:0!important;width:100%}.sidebar .d-md-none{display:block!important}.sidebar .icon-close_big{margin-right:1rem}}.d-flex{display:flex}.flex-column{flex-direction:column}.justify-content-between{justify-content:space-between}.align-items-center{align-items:center}.w-100{width:100%}.pe-3{padding-right:1rem}.sidebar-divider{height:1px;background-color:#ffffff1a;margin:8px 0;width:100%}li.hidden{display:none}\n"] }]
+        }], propDecorators: { menuItems: [{
+                type: Input
+            }], config: [{
+                type: Input
+            }], collapsed: [{
+                type: Input
+            }], logoUrl: [{
+                type: Input
+            }], logoAlt: [{
+                type: Input
+            }], showToggle: [{
+                type: Input
+            }], menuItemClicked: [{
+                type: Output
+            }], collapsedChange: [{
+                type: Output
+            }], itemBadgeClick: [{
+                type: Output
+            }] } });
+
+/*
+ * Public API Surface of ng-cwr-sidebar
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { Sidebar, SidebarService };
+//# sourceMappingURL=elavarasanbititude-ng-cwr-sidebar.mjs.map

package/fesm2022/elavarasanbititude-ng-cwr-sidebar.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"elavarasanbititude-ng-cwr-sidebar.mjs","sources":["../../../packages/ng-cwr-sidebar/src/lib/services/sidebar.service.ts","../../../packages/ng-cwr-sidebar/src/lib/sidebar/sidebar.ts","../../../packages/ng-cwr-sidebar/src/lib/sidebar/sidebar.html","../../../packages/ng-cwr-sidebar/src/public-api.ts","../../../packages/ng-cwr-sidebar/src/elavarasanbititude-ng-cwr-sidebar.ts"],"sourcesContent":["import { Injectable } from '@angular/core';\nimport { BehaviorSubject, Observable } from 'rxjs';\nimport { SidebarConfig, SidebarMenuItem } from '../models/sidebar.model';\n\n@Injectable({\n  providedIn: 'root',\n})\nexport class SidebarService {\n  private collapsedSubject = new BehaviorSubject<boolean>(false);\n  private menuItemsSubject = new BehaviorSubject<SidebarMenuItem[]>([]);\n  private configSubject = new BehaviorSubject<SidebarConfig>({});\n\n  public collapsed$ = this.collapsedSubject.asObservable();\n  public menuItems$ = this.menuItemsSubject.asObservable();\n  public config$ = this.configSubject.asObservable();\n\n  constructor() {}\n\n  /**\n   * Toggle the sidebar collapsed state\n   */\n  toggleCollapsed(): void {\n    this.collapsedSubject.next(!this.collapsedSubject.value);\n  }\n\n  /**\n   * Set the collapsed state\n   */\n  setCollapsed(collapsed: boolean): void {\n    this.collapsedSubject.next(collapsed);\n  }\n\n  /**\n   * Get current collapsed state\n   */\n  getCollapsed(): boolean {\n    return this.collapsedSubject.value;\n  }\n\n  /**\n   * Set menu items\n   */\n  setMenuItems(items: SidebarMenuItem[]): void {\n    this.menuItemsSubject.next(items);\n  }\n\n  /**\n   * Get menu items\n   */\n  getMenuItems(): SidebarMenuItem[] {\n    return this.menuItemsSubject.value;\n  }\n\n  /**\n   * Add a menu item\n   */\n  addMenuItem(item: SidebarMenuItem): void {\n    const items = this.menuItemsSubject.value;\n    this.menuItemsSubject.next([...items, item]);\n  }\n\n  /**\n   * Remove a menu item by id\n   */\n  removeMenuItem(id: string): void {\n    const items = this.menuItemsSubject.value.filter(item => item.id !== id);\n    this.menuItemsSubject.next(items);\n  }\n\n  /**\n   * Update sidebar configuration\n   */\n  setConfig(config: SidebarConfig): void {\n    this.configSubject.next(config);\n  }\n\n  /**\n   * Get sidebar configuration\n   */\n  getConfig(): SidebarConfig {\n    return this.configSubject.value;\n  }\n}\n","import { Component, OnInit, OnChanges, Input, Output, EventEmitter, ChangeDetectionStrategy, inject, SimpleChanges } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { RouterModule, Router, NavigationEnd } from '@angular/router';\nimport { SidebarService } from '../services/sidebar.service';\nimport { SidebarConfig, SidebarMenuItem } from '../models/sidebar.model';\nimport { filter } from 'rxjs/operators';\n\n@Component({\n  selector: 'cwr-sidebar',\n  standalone: true,\n  imports: [CommonModule, RouterModule],\n  templateUrl: './sidebar.html',\n  styleUrl: './sidebar.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class Sidebar implements OnInit, OnChanges {\n  @Input() menuItems: SidebarMenuItem[] = [];\n  @Input() config: SidebarConfig = {};\n  @Input() collapsed: boolean = false;\n  @Input() logoUrl?: string;\n  @Input() logoAlt: string = 'Logo';\n  @Input() showToggle: boolean = true;\n  @Output() menuItemClicked = new EventEmitter<SidebarMenuItem>();\n  @Output() collapsedChange = new EventEmitter<boolean>();\n  @Output() itemBadgeClick = new EventEmitter<SidebarMenuItem>();\n\n  private sidebarService = inject(SidebarService);\n  private router = inject(Router);\n\n  get collapsed$() {\n    return this.sidebarService.collapsed$;\n  }\n\n  expandedItems: Set<string> = new Set();\n  isCollapsed = false;\n\n  readonly defaultConfig: SidebarConfig = {\n    collapsed: false,\n    position: 'left',\n    width: '240px',\n    collapsedWidth: '60px',\n    backgroundColor: '#141F2D',\n    textColor: '#3A4D63',\n    hoverColor: '#FDFDFD',\n    activeColor: '#28B48C',\n    toggleButton: true,\n    overlayOnMobile: true,\n  };\n\n  ngOnInit(): void {\n    this.isCollapsed = this.collapsed;\n    this.sidebarService.setMenuItems(this.menuItems);\n    const mergedConfig = { ...this.defaultConfig, ...this.config };\n    this.sidebarService.setConfig(mergedConfig);\n\n    // Track router navigation for active state\n    this.router.events.pipe(filter(event => event instanceof NavigationEnd)).subscribe(() => {\n      // Trigger change detection for route changes\n    });\n  }\n\n  ngOnChanges(changes: SimpleChanges): void {\n    if (changes['menuItems'] && !changes['menuItems'].firstChange) {\n      this.sidebarService.setMenuItems(this.menuItems);\n    }\n    if (changes['collapsed']) {\n      this.isCollapsed = this.collapsed;\n    }\n    if (changes['config'] && !changes['config'].firstChange) {\n      this.sidebarService.setConfig({ ...this.defaultConfig, ...this.config });\n    }\n  }\n\n  toggleSidebar(): void {\n    this.isCollapsed = !this.isCollapsed;\n    this.sidebarService.toggleCollapsed();\n    this.collapsedChange.emit(this.isCollapsed);\n  }\n\n  toggleExpand(item: SidebarMenuItem): void {\n    if (item.children && item.children.length > 0) {\n      const itemId = item.id || item.label;\n      if (this.expandedItems.has(itemId)) {\n        this.expandedItems.delete(itemId);\n      } else {\n        this.expandedItems.add(itemId);\n      }\n    }\n  }\n\n  isExpanded(item: SidebarMenuItem): boolean {\n    const itemId = item.id || item.label;\n    // Check if explicitly expanded or should be expanded by default\n    return this.expandedItems.has(itemId) || item.expandedByDefault === true;\n  }\n\n  onMenuItemClick(item: SidebarMenuItem): void {\n    if (item.action) {\n      item.action();\n    }\n    this.menuItemClicked.emit(item);\n  }\n\n  onBadgeClick(event: Event, item: SidebarMenuItem): void {\n    event.stopPropagation();\n    this.itemBadgeClick.emit(item);\n  }\n\n  hasChildren(item: SidebarMenuItem): boolean {\n    return !!(item.children && item.children.length > 0);\n  }\n\n  isActiveRoute(item: SidebarMenuItem): boolean {\n    if (item.isActive) {\n      return item.isActive();\n    }\n    return item.route ? this.router.url.includes(`/${item.route}`) : false;\n  }\n\n  getConfig(): SidebarConfig {\n    return this.sidebarService.getConfig();\n  }\n\n  closeSidebar(): void {\n    if (!this.isCollapsed) {\n      this.toggleSidebar();\n    }\n  }\n}\n","<div class=\"sidebar d-flex flex-column justify-content-between\" [class.isOpen]=\"!isCollapsed\">\n  <div>\n    <!-- Logo Section -->\n    <div class=\"d-flex justify-content-between logo pe-3 w-100\" *ngIf=\"logoUrl || showToggle\">\n      <img *ngIf=\"logoUrl\" [src]=\"logoUrl\" [alt]=\"logoAlt\" />\n      <span\n        class=\"icon-close_big d-md-none\"\n        style=\"color: #fff; cursor: pointer\"\n        [class.d-none]=\"isCollapsed\"\n        (click)=\"closeSidebar()\"></span>\n    </div>\n\n    <!-- Navigation Wrapper -->\n    <div class=\"nav-wrapper\" role=\"navigation\">\n      <ul class=\"active\">\n        <li \n          *ngFor=\"let item of menuItems\"\n          [class.active]=\"isActiveRoute(item)\"\n          [class.disabled]=\"item.disabled\"\n          [class.hidden]=\"item.visible && !item.visible()\"\n          [ngClass]=\"item.cssClass\"\n          [title]=\"item.tooltip || ''\"\n        >\n          <a \n            class=\"d-flex align-items-center w-100\"\n            [routerLink]=\"item.route\"\n            [queryParams]=\"item.queryParams\"\n            [queryParamsHandling]=\"item.queryParamsHandling\"\n            [target]=\"item.target\"\n            [routerLinkActive]=\"item.isActive ? '' : 'active'\"\n            [routerLinkActiveOptions]=\"{ exact: false }\"\n            (click)=\"onMenuItemClick(item)\"\n          >\n            <!-- Icon Section -->\n            <div class=\"menu-icon-container\" *ngIf=\"item.icon\">\n              <div [innerHTML]=\"item.icon\" class=\"svg-icon\"></div>\n            </div>\n\n            <!-- Label and Badge -->\n            <div class=\"d-flex w-100 justify-content-between align-items-center\">\n              <span class=\"nav-label\">{{ item.label }}</span>\n              \n              <!-- Badge -->\n              <span \n                class=\"badge-chip\"\n                *ngIf=\"item.badge\"\n                [style.background-color]=\"item.badge.color || '#28B48C'\"\n                (click)=\"onBadgeClick($event, item)\"\n              >\n                {{ item.badge.text }}\n              </span>\n            </div>\n          </a>\n\n          <!-- Submenu -->\n          <ul \n            class=\"submenu-list\"\n            *ngIf=\"hasChildren(item) && isExpanded(item)\"\n          >\n            <li \n              *ngFor=\"let child of item.children\"\n              [class.active]=\"isActiveRoute(child)\"\n              [class.disabled]=\"child.disabled\"\n              [class.hidden]=\"child.visible && !child.visible()\"\n              [ngClass]=\"child.cssClass\"\n              [title]=\"child.tooltip || ''\"\n            >\n              <a \n                class=\"d-flex align-items-center submenu-link\"\n                [routerLink]=\"child.route\"\n                [queryParams]=\"child.queryParams\"\n                [queryParamsHandling]=\"child.queryParamsHandling\"\n                [target]=\"child.target\"\n                [routerLinkActive]=\"child.isActive ? '' : 'active'\"\n                [routerLinkActiveOptions]=\"{ exact: false }\"\n                (click)=\"onMenuItemClick(child)\"\n              >\n                <span class=\"nav-label\">{{ child.label }}</span>\n              </a>\n            </li>\n          </ul>\n\n          <!-- Divider -->\n          <div *ngIf=\"item.divider\" class=\"sidebar-divider\"></div>\n        </li>\n      </ul>\n    </div>\n  </div>\n\n  <!-- Logout/Footer Section (optional) -->\n  <div class=\"sidebar-footer\" *ngIf=\"!isCollapsed\">\n    <slot name=\"footer\"></slot>\n  </div>\n</div>\n","/*\n * Public API Surface of ng-cwr-sidebar\n */\n\nexport * from './lib/sidebar/sidebar';\nexport * from './lib/services/sidebar.service';\nexport * from './lib/models/sidebar.model';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "@elavarasanbititude/ng-cwr-sidebar",
+  "version": "0.0.3",
+  "description": "A modern, flexible, and customizable Angular sidebar component library",
+  "author": "elavarasanbititude",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/yourusername/ng-cwr-sidebar"
+  },
+  "bugs": {
+    "url": "https://github.com/yourusername/ng-cwr-sidebar/issues"
+  },
+  "homepage": "https://github.com/yourusername/ng-cwr-sidebar#readme",
+  "keywords": [
+    "angular",
+    "sidebar",
+    "navigation",
+    "menu",
+    "component",
+    "responsive",
+    "scss"
+  ],
+  "peerDependencies": {
+    "@angular/common": "^21.2.0",
+    "@angular/core": "^21.2.0",
+    "@angular/router": "^21.2.0",
+    "rxjs": "~7.8.0"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
+  "sideEffects": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "module": "fesm2022/elavarasanbititude-ng-cwr-sidebar.mjs",
+  "typings": "types/elavarasanbititude-ng-cwr-sidebar.d.ts",
+  "exports": {
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./types/elavarasanbititude-ng-cwr-sidebar.d.ts",
+      "default": "./fesm2022/elavarasanbititude-ng-cwr-sidebar.mjs"
+    }
+  },
+  "type": "module"
+}

package/types/elavarasanbititude-ng-cwr-sidebar.d.ts

@@ -0,0 +1,140 @@
+import * as rxjs from 'rxjs';
+import { Observable } from 'rxjs';
+import * as i0 from '@angular/core';
+import { OnInit, OnChanges, EventEmitter, SimpleChanges } from '@angular/core';
+
+/**
+ * Represents a menu item in the sidebar
+ */
+interface SidebarMenuItem {
+    id?: string;
+    label: string;
+    icon?: string;
+    route?: string;
+    /** Query parameters to pass with the route */
+    queryParams?: Record<string, any>;
+    /** How to handle query parameters: 'merge', 'preserve' */
+    queryParamsHandling?: 'merge' | 'preserve';
+    action?: () => void;
+    children?: SidebarMenuItem[];
+    disabled?: boolean;
+    /** Show/hide menu item based on custom logic */
+    visible?: () => boolean;
+    /** Additional CSS classes to apply to the menu item */
+    cssClass?: string;
+    /** Link target attribute (_blank, _self, _parent, _top) */
+    target?: '_blank' | '_self' | '_parent' | '_top';
+    /** Badge configuration */
+    badge?: {
+        text: string;
+        color?: string;
+    };
+    /** Show a divider line after this menu item */
+    divider?: boolean;
+    /** Whether to expand nested children by default */
+    expandedByDefault?: boolean;
+    /** Tooltip text on hover */
+    tooltip?: string;
+    /**
+     * Custom function to determine if this item is active
+     * If provided, takes precedence over route-based active detection
+     */
+    isActive?: () => boolean;
+}
+/**
+ * Configuration for the sidebar component
+ */
+interface SidebarConfig {
+    collapsed?: boolean;
+    position?: 'left' | 'right';
+    width?: string;
+    collapsedWidth?: string;
+    backgroundColor?: string;
+    textColor?: string;
+    hoverColor?: string;
+    activeColor?: string;
+    toggleButton?: boolean;
+    overlayOnMobile?: boolean;
+}
+
+declare class Sidebar implements OnInit, OnChanges {
+    menuItems: SidebarMenuItem[];
+    config: SidebarConfig;
+    collapsed: boolean;
+    logoUrl?: string;
+    logoAlt: string;
+    showToggle: boolean;
+    menuItemClicked: EventEmitter<SidebarMenuItem>;
+    collapsedChange: EventEmitter<boolean>;
+    itemBadgeClick: EventEmitter<SidebarMenuItem>;
+    private sidebarService;
+    private router;
+    get collapsed$(): rxjs.Observable<boolean>;
+    expandedItems: Set<string>;
+    isCollapsed: boolean;
+    readonly defaultConfig: SidebarConfig;
+    ngOnInit(): void;
+    ngOnChanges(changes: SimpleChanges): void;
+    toggleSidebar(): void;
+    toggleExpand(item: SidebarMenuItem): void;
+    isExpanded(item: SidebarMenuItem): boolean;
+    onMenuItemClick(item: SidebarMenuItem): void;
+    onBadgeClick(event: Event, item: SidebarMenuItem): void;
+    hasChildren(item: SidebarMenuItem): boolean;
+    isActiveRoute(item: SidebarMenuItem): boolean;
+    getConfig(): SidebarConfig;
+    closeSidebar(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<Sidebar, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<Sidebar, "cwr-sidebar", never, { "menuItems": { "alias": "menuItems"; "required": false; }; "config": { "alias": "config"; "required": false; }; "collapsed": { "alias": "collapsed"; "required": false; }; "logoUrl": { "alias": "logoUrl"; "required": false; }; "logoAlt": { "alias": "logoAlt"; "required": false; }; "showToggle": { "alias": "showToggle"; "required": false; }; }, { "menuItemClicked": "menuItemClicked"; "collapsedChange": "collapsedChange"; "itemBadgeClick": "itemBadgeClick"; }, never, never, true, never>;
+}
+
+declare class SidebarService {
+    private collapsedSubject;
+    private menuItemsSubject;
+    private configSubject;
+    collapsed$: Observable<boolean>;
+    menuItems$: Observable<SidebarMenuItem[]>;
+    config$: Observable<SidebarConfig>;
+    constructor();
+    /**
+     * Toggle the sidebar collapsed state
+     */
+    toggleCollapsed(): void;
+    /**
+     * Set the collapsed state
+     */
+    setCollapsed(collapsed: boolean): void;
+    /**
+     * Get current collapsed state
+     */
+    getCollapsed(): boolean;
+    /**
+     * Set menu items
+     */
+    setMenuItems(items: SidebarMenuItem[]): void;
+    /**
+     * Get menu items
+     */
+    getMenuItems(): SidebarMenuItem[];
+    /**
+     * Add a menu item
+     */
+    addMenuItem(item: SidebarMenuItem): void;
+    /**
+     * Remove a menu item by id
+     */
+    removeMenuItem(id: string): void;
+    /**
+     * Update sidebar configuration
+     */
+    setConfig(config: SidebarConfig): void;
+    /**
+     * Get sidebar configuration
+     */
+    getConfig(): SidebarConfig;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SidebarService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<SidebarService>;
+}
+
+export { Sidebar, SidebarService };
+export type { SidebarConfig, SidebarMenuItem };