lib-common-angular 0.0.12 → 0.0.15

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

@@ -1,23 +0,0 @@
-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

@@ -1,12 +0,0 @@
-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

@@ -1,56 +0,0 @@
-<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

@@ -1,192 +0,0 @@
-: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

@@ -1,239 +0,0 @@
-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();
-  }
-}