lib-common-angular 0.0.9 → 0.0.11

package/projects/lib-common-angular/src/lib/componentes/daskboards/daskboard2/index2/index2.component.ts

@@ -0,0 +1,15 @@
+import { Component } from '@angular/core';
+import { Header2Component } from '../header2/header2.component';
+import { CoreModuleLib } from '../../../../modulos/core.lib.module';
+import { RouterOutlet } from '@angular/router';
+
+@Component({
+  selector: 'lib-index2',
+  standalone: true,
+  imports: [Header2Component, CoreModuleLib,RouterOutlet],
+  templateUrl: './index2.component.html',
+  styleUrl: './index2.component.css'
+})
+export class Index2Component {
+
+}

package/projects/lib-common-angular/src/lib/componentes/daskboards/daskboard2/services2/services2.component.html

@@ -0,0 +1 @@
+<p>services2 works!</p>

package/projects/lib-common-angular/src/lib/componentes/daskboards/daskboard2/services2/services2.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { Services2Component } from './services2.component';
+
+describe('Services2Component', () => {
+  let component: Services2Component;
+  let fixture: ComponentFixture<Services2Component>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [Services2Component]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(Services2Component);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/projects/lib-common-angular/src/lib/componentes/daskboards/daskboard2/services2/services2.component.ts

@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'lib-services2',
+  standalone: true,
+  imports: [],
+  templateUrl: './services2.component.html',
+  styleUrl: './services2.component.css'
+})
+export class Services2Component {
+
+}

package/projects/lib-common-angular/src/lib/componentes/daskboards/daskboard2/slider2/slider2.component.html

@@ -0,0 +1 @@
+<p>slider2 works!</p>

package/projects/lib-common-angular/src/lib/componentes/daskboards/daskboard2/slider2/slider2.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { Slider2Component } from './slider2.component';
+
+describe('Slider2Component', () => {
+  let component: Slider2Component;
+  let fixture: ComponentFixture<Slider2Component>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [Slider2Component]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(Slider2Component);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/projects/lib-common-angular/src/lib/componentes/daskboards/daskboard2/slider2/slider2.component.ts

@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'lib-slider2',
+  standalone: true,
+  imports: [],
+  templateUrl: './slider2.component.html',
+  styleUrl: './slider2.component.css'
+})
+export class Slider2Component {
+
+}

package/projects/lib-common-angular/src/lib/componentes/daskboards/daskboard3/atoms/dynamic-menu1/dynamic-menu1.component.html

@@ -0,0 +1,56 @@
+<nav 
+  [class]="getMenuClasses()"
+  [attr.aria-label]="config?.name || 'Menú de navegación'"
+>
+  <!-- Botón de colapsar/expandir -->
+  @if (config?.collapsible) {
+    <button 
+      class="menu-toggle-btn"
+      (click)="toggleMenu()"
+      [attr.aria-expanded]="!collapsed"
+      [attr.aria-label]="collapsed ? 'Expandir menú' : 'Colapsar menú'"
+    >
+      <i class="pi" [class]="collapsed ? 'pi-bars' : 'pi-times'"></i>
+    </button>
+  }
+
+  <!-- Contenedor del menú -->
+  <div 
+    class="menu-container"
+    [class.menu-collapsed]="collapsed"
+  >
+    <!-- Lista de elementos del menú -->
+    <ul class="menu-list">
+      @for (item of menuItems; track $index) {
+        <app-menu-item1
+          [item]="item"
+          [showIcons]="config?.showIcons ?? true"
+          [showBadges]="config?.showBadges ?? true"
+          [collapsed]="collapsed"
+          [isItemExpanded]="isItemExpanded(item.id)"
+          [expandedItems]="expandedItems"
+          [depth]="0"
+          [maxDepth]="config?.maxDepth ?? 3"
+          [activeItemId]="activeItemId"
+          (menuEvent)="onMenuItemEvent($event)"
+        ></app-menu-item1>
+      }
+    </ul>
+
+    <!-- Indicador de carga -->
+    @if (loading) {
+      <div class="menu-loading">
+        <i class="pi pi-spin pi-spinner"></i>
+        <span>Cargando menú...</span>
+      </div>
+    }
+
+    <!-- Mensaje de error -->
+    @if (error) {
+      <div class="menu-error">
+        <i class="pi pi-exclamation-triangle"></i>
+        <span>{{ error }}</span>
+      </div>
+    }
+  </div>
+</nav>

package/projects/lib-common-angular/src/lib/componentes/daskboards/daskboard3/atoms/dynamic-menu1/dynamic-menu1.component.scss

@@ -0,0 +1,192 @@
+:host {
+  display: block;
+  height: 100%;
+}
+
+nav {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  background-color: var(--menu-bg-color, #ffffff);
+  border-right: 1px solid var(--menu-border-color, #e5e7eb);
+  transition: all 0.3s ease;
+}
+
+.menu-horizontal {
+  flex-direction: row;
+  border-right: none;
+  border-bottom: 1px solid var(--menu-border-color, #e5e7eb);
+}
+
+.menu-toggle-btn {
+  display: none;
+  align-items: center;
+  justify-content: center;
+  width: 2.5rem;
+  height: 2.5rem;
+  background: none;
+  border: none;
+  cursor: pointer;
+  color: var(--menu-text-color, #374151);
+  transition: color 0.2s ease;
+  flex-shrink: 0;
+}
+
+.menu-toggle-btn:hover {
+  color: var(--primary-color, #3b82f6);
+}
+
+.menu-toggle-btn:focus {
+  outline: 2px solid var(--primary-color, #3b82f6);
+  outline-offset: 2px;
+}
+
+.menu-container {
+  flex: 1;
+  overflow-y: auto;
+  overflow-x: hidden;
+  transition: all 0.3s ease;
+  display: flex;
+  flex-direction: column;
+}
+
+.menu-collapsed {
+  width: 0;
+  opacity: 0;
+  pointer-events: none;
+  .menu-list {
+    display: none;
+  }
+}
+
+.menu-list {
+  list-style: none;
+  margin: 0;
+  padding: 0.5rem 0;
+  flex: 1;
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+.menu-loading,
+.menu-error {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 1rem;
+  color: var(--menu-text-color, #374151);
+  font-size: 0.875rem;
+  min-height: 100px;
+}
+
+.menu-loading i,
+.menu-error i {
+  margin-right: 0.5rem;
+}
+
+.menu-error {
+  color: var(--danger-color, #ef4444);
+}
+
+/* Tema oscuro */
+.theme-dark {
+  background-color: var(--menu-bg-dark, #1f2937);
+  border-color: var(--menu-border-dark, #374151);
+}
+
+.theme-dark .menu-toggle-btn {
+  color: var(--menu-text-dark, #d1d5db);
+}
+
+.theme-dark .menu-toggle-btn:hover {
+  color: var(--primary-color, #3b82f6);
+}
+
+.theme-dark .menu-loading,
+.theme-dark .menu-error {
+  color: var(--menu-text-dark, #d1d5db);
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+  .menu-toggle-btn {
+    display: flex;
+  }
+
+  nav {
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 1000;
+    transform: translateX(-100%);
+    transition: transform 0.3s ease;
+    width: 280px;
+    max-width: 90vw;
+  }
+
+  nav.menu-open {
+    transform: translateX(0);
+  }
+
+  .menu-horizontal {
+    position: static;
+    transform: none;
+    width: auto;
+    max-width: none;
+  }
+}
+
+/* Animaciones */
+.menu-item-enter {
+  opacity: 0;
+  transform: translateY(-10px);
+}
+
+.menu-item-enter-active {
+  opacity: 1;
+  transform: translateY(0);
+  transition: all 0.3s ease;
+}
+
+.menu-item-exit {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+.menu-item-exit-active {
+  opacity: 0;
+  transform: translateY(-10px);
+  transition: all 0.3s ease;
+}
+
+/* Scrollbar personalizado */
+.menu-container::-webkit-scrollbar,
+.menu-list::-webkit-scrollbar {
+  width: 6px;
+}
+
+.menu-container::-webkit-scrollbar-track,
+.menu-list::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.menu-container::-webkit-scrollbar-thumb,
+.menu-list::-webkit-scrollbar-thumb {
+  background: rgba(0, 0, 0, 0.2);
+  border-radius: 3px;
+}
+
+.menu-container::-webkit-scrollbar-thumb:hover,
+.menu-list::-webkit-scrollbar-thumb:hover {
+  background: rgba(0, 0, 0, 0.3);
+}
+
+.theme-dark .menu-container::-webkit-scrollbar-thumb,
+.theme-dark .menu-list::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.2);
+}
+
+.theme-dark .menu-container::-webkit-scrollbar-thumb:hover,
+.theme-dark .menu-list::-webkit-scrollbar-thumb:hover {
+  background: rgba(255, 255, 255, 0.3);
+} 

package/projects/lib-common-angular/src/lib/componentes/daskboards/daskboard3/atoms/dynamic-menu1/dynamic-menu1.component.ts

@@ -0,0 +1,239 @@
+import { Component, Input, Output, EventEmitter, OnInit } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MenuItem1Component } from '../../../../shared/atoms/menu-item1/menu-item1.component';
+import {MenuManager } from '../../../../shared/interfaces/menu.interface';
+import { DynamicMenuService } from '../../../../shared/services/dynamic-menu.service';
+import { MenuConfig, MenuItem,MenuEvent } from '@juliaosistem/core-dtos';
+
+@Component({
+  selector: 'app-dynamic-menu1',
+  standalone: true,
+  imports: [CommonModule, MenuItem1Component],
+  templateUrl: './dynamic-menu1.component.html',
+  styleUrls: ['./dynamic-menu1.component.scss']
+})
+export class DynamicMenu1Component implements OnInit {
+  @Input() menuId!: string;
+  @Input() userPermissions: string[] = [];
+  @Input() menuConfig?: MenuConfig;
+  @Input() autoLoad: boolean = true;
+
+  @Output() menuEvent = new EventEmitter<MenuEvent>();
+  @Output() menuLoaded = new EventEmitter<MenuConfig>();
+  @Output() menuError = new EventEmitter<string>();
+
+  config?: MenuConfig;
+  menuItems: MenuItem[] = [];
+ collapsed = false;
+  loading = false;
+  error?: string;
+  activeItemId?: string;
+  expandedItems: Set<string> = new Set(); // Rastrear elementos expandidos
+
+  private menuManager?: MenuManager;
+  private subscription?: unknown;
+
+  constructor(private menuService: DynamicMenuService) {}
+
+  ngOnInit() {
+    if (this.menuConfig) {
+      this.setConfig(this.menuConfig);
+    } else if (this.autoLoad && this.menuId) {
+      this.loadMenu();
+    }
+  }
+
+
+  async loadMenu() {
+    if (!this.menuId) {
+      this.error = 'ID de menú no proporcionado';
+      this.menuError.emit(this.error);
+      return;
+    }
+
+    this.loading = true;
+    this.error = undefined;
+
+    try {
+      this.config = await this.menuService.getMenuConfig(this.menuId);
+      this.setConfig(this.config);
+      this.menuLoaded.emit(this.config);
+    } catch (err) {
+      this.error = err instanceof Error ? err.message : 'Error al cargar el menú';
+      this.menuError.emit(this.error);
+    } finally {
+      this.loading = false;
+    }
+  }
+
+  private setConfig(config: MenuConfig) {
+    this.config = config;
+    this.collapsed = config.collapsed ?? false;
+    this.menuManager = new MenuManager(config);
+    this.updateMenuItems();
+  }
+
+  private updateMenuItems() {
+    if (!this.menuManager) return;
+
+    let items = this.menuManager.getOrderedItems();
+
+    // Filtrar por permisos si se proporcionan
+    if (this.userPermissions.length > 0) {
+      items = this.menuManager.filterByPermissions(this.userPermissions);
+    }
+
+    this.menuItems = items;
+  }
+
+  getMenuClasses(): string {
+    const classes = ['dynamic-menu'];
+    
+    if (this.config?.orientation === 'horizontal') {
+      classes.push('menu-horizontal');
+    }
+    
+    if (this.config?.theme === 'dark') {
+      classes.push('theme-dark');
+    }
+    
+    return classes.join(' ');
+  }
+
+  toggleMenu() {
+    if (this.config?.collapsible) {
+      this.collapsed = !this.collapsed;
+      console.log('Menu Event toggleMenu:',this.collapsed);
+      this.menuEvent.emit({
+        type: this.collapsed ? 'collapse' : 'expand',
+        item: { id: 'menu-toggle', label: 'Menu Toggle', type: 'item' }
+      });
+    }
+  }
+
+  onMenuItemEvent(event: MenuEvent) {
+    // Manejar eventos específicos del menú
+    console.log('Menu Event: onMenuItemEvent', event);
+    
+    switch (event.type) {
+      case 'click':
+        this.activeItemId = event.item.id;
+        
+        // Si el item tiene submenús, toggle su estado expandido
+        if (this.hasSubItems(event.item)) {
+          this.toggleItemExpansion(event.item.id);
+        }
+        break;
+      case 'expand':
+        this.expandedItems.add(event.item.id);
+        break;
+      case 'collapse':
+        this.expandedItems.delete(event.item.id);
+        break;
+    }
+
+    // Propagar evento hacia arriba
+    this.menuEvent.emit(event);
+  }
+
+  // Verificar si un item tiene submenús
+  private hasSubItems(item: MenuItem): boolean {
+    return !!(item.items && item.items.length > 0);
+  }
+
+  // Toggle expansión de un item
+  private toggleItemExpansion(itemId: string) {
+    if (this.expandedItems.has(itemId)) {
+      this.expandedItems.delete(itemId);
+      // También colapsar todos los subitems de este item
+      this.collapseAllSubItems(itemId);
+      this.menuEvent.emit({
+        type: 'collapse',
+        item: { id: itemId, label: '', type: 'item' }
+      });
+    } else {
+      this.expandedItems.add(itemId);
+      this.menuEvent.emit({
+        type: 'expand',
+        item: { id: itemId, label: '', type: 'item' }
+      });
+    }
+  }
+
+  // Colapsar todos los subitems de un item específico
+  private collapseAllSubItems(parentId: string) {
+    const parentItem = this.findItemById(parentId, this.menuItems);
+    if (parentItem && parentItem.items) {
+      parentItem.items.forEach((subItem: MenuItem) => {
+        this.expandedItems.delete(subItem.id);
+        if (subItem.items && subItem.items.length > 0) {
+          this.collapseAllSubItems(subItem.id);
+        }
+      });
+    }
+  }
+
+  // Buscar un item por ID recursivamente
+  private findItemById(id: string, items: MenuItem[]): MenuItem | null {
+    for (const item of items) {
+      if (item.id === id) {
+        return item;
+      }
+      if (item.items && item.items.length > 0) {
+        const found = this.findItemById(id, item.items);
+        if (found) return found;
+      }
+    }
+    return null;
+  }
+
+  // Método para verificar si un item está expandido (usar en template)
+  isItemExpanded(itemId: string): boolean {
+    return this.expandedItems.has(itemId);
+  }
+
+  // Métodos públicos para manipular el menú
+  async addMenuItem(item: MenuItem) {
+    if (!this.menuId) return;
+    
+    try {
+      await this.menuService.addMenuItem(this.menuId, item);
+      await this.loadMenu(); // Recargar menú
+    } catch (err) {
+      this.error = 'Error al agregar elemento del menú';
+      this.menuError.emit(this.error + err);
+    }
+  }
+
+  async removeMenuItem(itemId: string) {
+    if (!this.menuId) return;
+    
+    try {
+      await this.menuService.removeMenuItem(this.menuId, itemId);
+      await this.loadMenu(); // Recargar menú
+    } catch (err) {
+      this.error = 'Error al eliminar elemento del menú';
+      this.menuError.emit(this.error + err);
+    }
+  }
+
+  async updateMenuItem(itemId: string, updates: Partial<MenuItem>) {
+    if (!this.menuId) return;
+    
+    try {
+      await this.menuService.updateMenuItem(this.menuId, itemId, updates);
+      await this.loadMenu(); // Recargar menú
+    } catch (err) {
+      this.error = 'Error al actualizar elemento del menú';
+      this.menuError.emit(this.error + err);
+    }
+  }
+
+  setActiveItem(itemId: string) {
+    this.activeItemId = itemId;
+  }
+
+  refreshMenu() {
+    this.loadMenu();
+  }
+}