lib-common-angular 0.0.12 → 0.0.15

package/projects/lib-common-angular-demo/public/assets/layout/variables/_light.scss

@@ -1,5 +0,0 @@
-:root {
-    --surface-ground: var(--p-surface-100);
-    --code-background: var(--p-surface-900);
-    --code-color: var(--p-surface-200);
-}

package/projects/lib-common-angular-demo/src/app/app.component.html

@@ -1 +0,0 @@
-<router-outlet />

package/projects/lib-common-angular-demo/src/app/app.component.ts

@@ -1,12 +0,0 @@
-import { Component } from '@angular/core';
-import { RouterOutlet } from '@angular/router';
-@Component({
-  selector: 'app-root',
-  imports: [RouterOutlet],
-  templateUrl: './app.component.html',
-  styleUrl: './app.component.scss',
-standalone: true,
-})
-export class AppComponent {
-  title = 'lib-common-angular-demo';
-}

package/projects/lib-common-angular-demo/src/app/app.config.server.ts

@@ -1,12 +0,0 @@
-import { mergeApplicationConfig, ApplicationConfig } from '@angular/core';
-import { provideServerRendering } from '@angular/platform-server';
-import { appConfig } from './app.config';
-
-const serverConfig: ApplicationConfig = {
-  providers: [
-    provideServerRendering()
-    // If you need routing, configure it with the correct provider from the appropriate Angular package
-  ]
-};
-
-export const config = mergeApplicationConfig(appConfig, serverConfig);

package/projects/lib-common-angular-demo/src/app/app.config.ts

@@ -1,22 +0,0 @@
-import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
-import { provideRouter } from '@angular/router';
-// import Aura from '@primeng/themes/aura';
-// import { providePrimeNG } from 'primeng/config';
-import { provideAnimations } from '@angular/platform-browser/animations';
-
-import { routes } from './app.routes';
-import { provideHttpClient, withFetch } from '@angular/common/http';
-import { provideClientHydration, withEventReplay } from '@angular/platform-browser';
-import { ConfirmationService, MessageService } from 'primeng/api';
-
-export const appConfig: ApplicationConfig = {
-  providers: [
-    provideZoneChangeDetection({ eventCoalescing: true }), provideRouter(routes), 
-      provideAnimations(),
-    provideHttpClient(withFetch()),
-    provideClientHydration(withEventReplay()),
-
-    MessageService,
-    ConfirmationService,
-  ]
-};

package/projects/lib-common-angular-demo/src/app/app.routes.server.ts

@@ -1,8 +0,0 @@
-import { RenderMode, ServerRoute } from '@angular/ssr';
-
-export const serverRoutes: ServerRoute[] = [
-  {
-    path: '**',
-    renderMode: RenderMode.Prerender
-  }
-];

package/projects/lib-common-angular-demo/src/app/app.routes.ts

@@ -1,86 +0,0 @@
-import { Routes } from '@angular/router';
-import { DaskBoard3 } from 'lib-common-angular';
-import { 
-  defaultMenuConfig, 
-  adminMenuConfig, 
-  minimalMenuConfig, 
-  userMenuConfig,
-  permissionConfigs 
-} from './menu-configs';
-
-export const routes: Routes = [
-  {
-    path: '',
-    component: DaskBoard3,
-    data: {
-      menuConfig: defaultMenuConfig,
-      userPermissions: permissionConfigs.user
-    },
-    children: [
-      { 
-        path: '', 
-        component: DaskBoard3,
-        data: {
-          menuConfig: defaultMenuConfig,
-          userPermissions: permissionConfigs.user
-        }
-      },
-      { 
-        path: 'admin', 
-        component: DaskBoard3,
-        data: {
-          menuConfig: adminMenuConfig,
-          userPermissions: permissionConfigs.admin
-        }
-      },
-      { 
-        path: 'minimal', 
-        component: DaskBoard3,
-        data: {
-          menuConfig: minimalMenuConfig,
-          userPermissions: permissionConfigs.guest
-        }
-      },
-      { 
-        path: 'user', 
-        component: DaskBoard3,
-        data: {
-          menuConfig: userMenuConfig,
-          userPermissions: permissionConfigs.user
-        }
-      },
-      { 
-        path: 'navigation', 
-        component: DaskBoard3,
-        data: {
-          menuConfig: defaultMenuConfig,
-          userPermissions: permissionConfigs.user
-        }
-      },
-      { 
-        path: 'pages', 
-        loadChildren: () => import('./pages.routes'),
-        data: {
-          menuConfig: defaultMenuConfig,
-          userPermissions: permissionConfigs.user
-        }
-      },
-        { 
-        path: 'documentation', 
-        loadChildren: () => import('./doc.routes'),
-        data: {
-          menuConfig: defaultMenuConfig,
-          userPermissions: permissionConfigs.user
-        }
-      },
-      { 
-        path: 'componentes', 
-        loadChildren: () => import('./componentes.routes'),
-        data: {
-          menuConfig: defaultMenuConfig,
-          userPermissions: permissionConfigs.user
-        }
-      }
-    ]
-  }
-];

package/projects/lib-common-angular-demo/src/app/componentes/crud/crud.component.html

@@ -1,43 +0,0 @@
-<lib-crud 
-    [submitted]="submitted"
-    [loaded]="loaded"
-    [tableType]="tableType"
-    [data]="data"
-    [fieldTypeConfig]="fieldTypeConfig"
-    [fieldLabels]="fieldLabels"
-    [fieldOrder]="fieldOrder"
-    [excludeFields]="excludeFields"
-    [fieldSelectOptions]="fieldSelectOptions"
-    (dataChange)="onDataChanged($event)"
-    (editItemRequest)="onEditItemRequest($any($event))"
-    (newItemRequest)="onNewItemRequest()"
-    (itemSaved)="onItemSaved()"
-    (dialogCanceled)="onDialogCanceled()">
-</lib-crud>
-
-<!-- Diálogo CRUD manejado desde el componente demo -->
-<!-- Dialog CRUD -->
-<lib-crud-dialog1
-    #crudDialog
-    [(visible)]="showDialog"
-    [displayFields]="$any(dialogDisplayFields)"
-    [currentItem]="dialogCurrentItem"
-    [fieldSelectOptions]="dialogFieldSelectOptions"
-    [body]="productDialogTemplate"
-    showDefaultHeader="true"
-    (save)="onDialogSave($any($event))"
-    (cancel)="onDialogCancel()">
-    [showDefault]
-</lib-crud-dialog1>
-
-<!-- Template para el body del dialog -->
-<ng-template #productDialogTemplate>
-    <lib-product-dialog1
-        [productDialog]="true"
-        [product]="dialogCurrentItem"
-        [statuses]="['INSTOCK', 'LOWSTOCK', 'OUTOFSTOCK']"
-        [triggerSave]="crudDialog.triggerSave"
-        (onSave)="onProductSave($event)"
-        (onCancel)="onProductCancel()">
-    </lib-product-dialog1>
-</ng-template>

package/projects/lib-common-angular-demo/src/app/componentes/crud/crud.component.spec.ts

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

package/projects/lib-common-angular-demo/src/app/componentes/crud/crud.component.ts

@@ -1,243 +0,0 @@
-import { Component,OnInit, ViewChild } from '@angular/core';
-import { Crud, CrudDialog1Component, ProductDialog1Component } from 'lib-common-angular';
-import { FieldType } from '@juliaosistem/core-dtos';
-import { Product } from '../../core/services/product.service';
-import { Table } from 'primeng/table';
-import { TablaDataSharedDTO } from 'juliaositembackenexpress/dist/api/dtos/componentes-common-lib-angular/tablaDataSharedDTO';
-
-import { Menu } from 'primeng/menu';
-
-@Component({
-  selector: 'app-crud',
-  imports: [CrudDialog1Component, ProductDialog1Component,Crud], 
-  templateUrl: './crud.component.html',
-  styleUrl: './crud.component.scss',
-  standalone: true,
-  providers: [] // Sin providers específicos por ahora
-
-})
-export class CrudComponent implements  OnInit {
-
-    productDialog: boolean = false;
-    submitted: boolean = false;
-    showDialog: boolean = false;
-    dialogCurrentItem: Record<string, unknown> = {};
-    dialogDisplayFields: unknown[] = [];
-dialogFieldSelectOptions: Record<string, { label: string; value: string }[]> = {};
-
-// aqui tienes q implementar la logica para el crud 
-// traerte los servicios de la libreria
-// y el crud.ts solo debe entender lo generico
- @ViewChild('dt') dt!: Table;
- loaded :boolean = false;
-
- // ✅ Propiedad para controlar el tipo de vista
- tableType: 'table' | 'grid' = 'table';
-
- tablaDataSharedDTO: TablaDataSharedDTO<Menu, Product> = new TablaDataSharedDTO<Menu, Product>();
-  
- constructor(
-         
-      ) {}
-
-  exportCSV() {
-        this.dt.exportCSV();
-    }
-
-    ngOnInit() {
-        this.loadDemoData();
-    }
-
-    loadDemoData() {
-this.loaded = false;
-    }
-
-    // ✅ Datos dinámicos de ejemplo
-    data: Record<string, unknown>[] = [
-        {
-            id: '1',
-            name: 'Laptop Gaming Pro',
-            description: 'High-performance gaming laptop with advanced graphics',
-            inventoryStatus: 'INSTOCK',
-            category: 'Electronics',
-            price: 1299.99,
-            quantity: 25,
-            image: 'https://images.unsplash.com/photo-1496181133206-80ce9b88a853?w=400&h=300&fit=crop'
-        },
-        {
-            id: '2',
-            name: 'Wireless Headphones',
-            description: 'Premium noise-canceling wireless headphones',
-            inventoryStatus: 'LOWSTOCK',
-            category: 'Electronics',
-            price: 199.99,
-            quantity: 8,
-            image: 'https://images.unsplash.com/photo-1505740420928-5e560c06d30e?w=400&h=300&fit=crop'
-        },
-        {
-            id: '3',
-            name: 'Running Shoes',
-            description: 'Comfortable running shoes for daily exercise',
-            inventoryStatus: 'INSTOCK',
-            category: 'Fitness',
-            price: 89.99,
-            quantity: 50,
-            image: 'https://images.unsplash.com/photo-1542291026-7eec264c27ff?w=400&h=300&fit=crop'
-        },
-        {
-            id: '4',
-            name: 'Cotton T-Shirt',
-            description: 'Premium cotton t-shirt with modern fit',
-            inventoryStatus: 'OUTOFSTOCK',
-            category: 'Clothing',
-            price: 29.99,
-            quantity: 0,
-            image: 'https://images.unsplash.com/photo-1521572163474-6864f9cf17ab?w=400&h=300&fit=crop'
-        },
-        {
-            id: '5',
-            name: 'Leather Wallet',
-            description: 'Genuine leather wallet with multiple compartments',
-            inventoryStatus: 'INSTOCK',
-            category: 'Accessories',
-            price: 49.99,
-            quantity: 15,
-            image: 'https://images.unsplash.com/photo-1627123424574-724758594e93?w=400&h=300&fit=crop'
-        }
-    ];
-
-    // ✅ Configuración de tipos para cada campo
-    fieldTypeConfig: Record<string, FieldType> = {
-        name: 'text',
-        description: 'text',
-        inventoryStatus: 'select',
-        category: 'select',
-        price: 'number',
-        quantity: 'number',
-        image: 'img'
-    };
-
-    // ✅ Configuración de opciones para campos de tipo select
-fieldSelectOptions: Record<string, { label: string; value: string }[]> = {
-    inventoryStatus: [
-        { label: 'INSTOCK', value: 'INSTOCK' },
-        { label: 'LOWSTOCK', value: 'LOWSTOCK' },
-        { label: 'OUTOFSTOCK', value: 'OUTOFSTOCK' }
-    ],
-    category: [
-        { label: 'Accessories', value: 'Accessories' },
-        { label: 'Clothing', value: 'Clothing' },
-        { label: 'Electronics', value: 'Electronics' },
-        { label: 'Fitness', value: 'Fitness' }
-    ]
-};
-
-private mapSelectOptions(options: Record<string, string[]>): Record<string, { label: string; value: string }[]> {
-  const mapped: Record<string, { label: string; value: string }[]> = {};
-  Object.keys(options).forEach(key => {
-    mapped[key] = options[key].map(opt => ({ label: opt, value: opt }));
-  });
-  return mapped;
-}
-
-    // ✅ Etiquetas personalizadas
-    fieldLabels: Record<string, string> = {
-        name: 'Name',
-        description: 'Description',
-        inventoryStatus: 'Inventory Status',
-        category: 'Category',
-        price: 'Price',
-        quantity: 'Quantity',
-        image: 'Image'
-    };
-    
-   
-
-    // ✅ Orden personalizado de columnas
-    fieldOrder: string[] = [
-        'name',
-        'description',
-        'image',
-        'inventoryStatus',
-        'category',
-        'price',
-        'quantity'
-    ];
-
-    // ✅ Campos a excluir de la vista
-    excludeFields: string[] = ['id'];
-
-    // ✅ Método para recibir cambios de datos del componente CRUD
-    onDataChanged(updatedData: Record<string, unknown>[]) {
-        this.data = [...updatedData]; // Actualizar la data local
-    }
-
-    // ✅ Métodos para manejar los eventos del dialog
-  onEditItemRequest(item: Record<string, unknown>) {
-    this.dialogCurrentItem = { ...item };
-    this.dialogDisplayFields = this.createDisplayFields();
-this.dialogFieldSelectOptions = this.fieldSelectOptions;
-    this.showDialog = true;
-}
-
-    onNewItemRequest() {
-    this.dialogCurrentItem = {};
-    this.dialogDisplayFields = this.createDisplayFields();
-this.dialogFieldSelectOptions = this.fieldSelectOptions;
-    this.showDialog = true;
-}
-
-    onDialogSave(savedItem: Record<string, unknown>) {
-        // Procesar el guardado localmente por ahora
-        if (savedItem['id']) {
-            // Actualizar item existente
-            const index = this.data.findIndex(item => item['id'] === savedItem['id']);
-            if (index !== -1) {
-                this.data[index] = { ...savedItem };
-            }
-        } else {
-            // Crear nuevo item
-            savedItem['id'] = Date.now().toString(); // ID temporal
-            this.data.push({ ...savedItem });
-        }
-        this.data = [...this.data]; // Trigger change detection
-        this.showDialog = false;
-    }
-
-    onDialogCancel() {
-        this.showDialog = false;
-        this.dialogCurrentItem = {};
-    }
-
-    onDialogCanceled() {
-        this.showDialog = false;
-    }
-
-    onItemSaved() {
-        // Método llamado cuando el CRUD confirma que se guardó el item
-        this.showDialog = false;
-    }
-
-    // ✅ Métodos para manejar el ProductDialog1Component
-    onProductSave(product: unknown) {
-        // Convertir el producto a Record<string, unknown> y procesarlo
-        const productItem = product as Record<string, unknown>;
-        this.onDialogSave(productItem);
-    }
-
-    onProductCancel() {
-        this.onDialogCancel();
-    }
-
-    private createDisplayFields() {
-        // Crear los campos de display basados en la configuración
-        return this.fieldOrder.map(fieldKey => ({
-            key: fieldKey,
-            type: this.fieldTypeConfig[fieldKey] || 'text',
-            label: this.fieldLabels[fieldKey] || fieldKey,
-            value: '',
-            required: false,
-            visible: !this.excludeFields.includes(fieldKey)
-        })).filter(field => field.visible);
-    }
-}

package/projects/lib-common-angular-demo/src/app/componentes/menu-navigation/menu-demo-visual.component.ts

@@ -1,76 +0,0 @@
-import { Component, Input } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { RouterModule } from '@angular/router';
-import { MenuConfig, MenuComponent } from "lib-common-angular";
-
-@Component({
-  selector: 'app-menu-demo-visual',
-  standalone: true,
-  imports: [CommonModule, RouterModule, MenuComponent],
-  template: `
-    <div class="menu-demo-container">
-      <h4>Vista previa del menú real:</h4>
-      <div class="mock-menu-wrapper">
-        <lib-menu 
-          [menuConfig]="menuConfig" 
-          [userPermissions]="userPermissions"
-          class="demo-menu">
-        </lib-menu>
-      </div>
-    </div>
-  `,
-  styles: [`
-    .menu-demo-container {
-      border: 1px solid #ddd;
-      border-radius: 8px;
-      padding: 16px;
-      margin: 16px 0;
-      background: #f9f9f9;
-      max-width: 300px;
-      position: relative;
-      overflow: hidden;
-    }
-    
-    .mock-menu-wrapper {
-      background: white;
-      border-radius: 4px;
-      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
-      max-height: 400px;
-      overflow-y: auto;
-      position: relative;
-      z-index: 1;
-    }
-    
-    /* Aislar estilos del menú demo */
-    .demo-menu {
-      position: static !important;
-      width: 100% !important;
-      height: auto !important;
-      box-shadow: none !important;
-      border: none !important;
-    }
-    
-    /* Evitar que afecte el layout principal */
-    :host {
-      contain: layout style;
-      isolation: isolate;
-    }
-    
-    /* Resetear cualquier posicionamiento absoluto del menú */
-    .demo-menu ::ng-deep * {
-      position: static !important;
-    }
-    
-    .demo-menu ::ng-deep .layout-sidebar,
-    .demo-menu ::ng-deep .sidebar {
-      position: static !important;
-      width: 100% !important;
-      height: auto !important;
-      transform: none !important;
-    }
-  `]
-})
-export class MenuDemoVisualComponent {
-  @Input() menuConfig!: MenuConfig;
-  @Input() userPermissions: string[] = [];
-}

package/projects/lib-common-angular-demo/src/app/componentes/menu-navigation/menu-navigation.component.html

@@ -1,60 +0,0 @@
-<!-- Demo de configuración de menús - No renderizar el menú real aquí -->
-<div class="menu-navigation">
-  <h2>Navegación de Menús</h2>
-  <p>Selecciona una ruta para ver diferentes configuraciones de menú:</p>
-
-  <div class="navigation-buttons">
-    <a routerLink="/" class="nav-button">
-      <i class="pi pi-home"></i>
-      <span>Menú por Defecto</span>
-      <p>Este es el que usa este dashboard</p>
-    </a>
-
-    <a routerLink="/admin" class="nav-button">
-      <i class="pi pi-cog"></i>
-      <span>Menú de Administrador</span>
-    </a>
-
-    <a routerLink="/minimal" class="nav-button">
-      <i class="pi pi-list"></i>
-      <span>Menú Minimalista</span>
-    </a>
-
-  </div>
-
-  <div class="relative">
-    <p>Ejemplo de configuraciones de menú:</p>
-    <lib-terminal [code]="menuPrivateConfig" language="typescript"> </lib-terminal>
-  </div>
-
-  <div class="info-panel">
-    <h3>Información de Configuración</h3>
-
-    <p><strong>Configuración de menú:</strong> Se carga automáticamente desde los datos de la ruta</p>
-
-    <lib-terminal [code]="codeExample" language="typescript"> </lib-terminal>
-    <p><strong>Permisos:</strong> Se aplican según el tipo de usuario se configuran de la siguiente forma </p>
-    <lib-terminal [code]="permisos" language="typescript"> </lib-terminal>
-
-    <p><strong>Como queda en la interfaz</strong> Se requiere llenar una interfaz para cargar la configuración del menú
-    </p>
-
-    <!-- Demo visual del menú -->
-    <app-menu-demo-visual [menuConfig]="userMenuConfig" [userPermissions]="permissionConfigs.custom">
-    </app-menu-demo-visual>
-
-    <a routerLink="/user" class="nav-button">
-      <i class="pi pi-user"></i>
-      <span>Menú de Usuario</span>
-    </a>
-    <p>Ejemplo de Router</p>
-
-    <div class="relative">
-
-      <lib-terminal [code]="router" language="typescript"> </lib-terminal>
-
-
-    </div>
-
-  </div>
-</div>

package/projects/lib-common-angular-demo/src/app/componentes/menu-navigation/menu-navigation.component.scss

@@ -1,63 +0,0 @@
-.menu-navigation {
-      padding: 2rem;
-      max-width: 800px;
-      margin: 0 auto;
-    }
-    
-    h2 {
-      color: #495057;
-      margin-bottom: 1rem;
-    }
-    
-    .navigation-buttons {
-      display: grid;
-      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-      gap: 1rem;
-      margin: 2rem 0;
-    }
-    
-    .nav-button {
-      display: flex;
-      align-items: center;
-      gap: 0.5rem;
-      padding: 1rem;
-      background: #ffffff;
-      border: 1px solid #dee2e6;
-      border-radius: 0.5rem;
-      text-decoration: none;
-      color: #495057;
-      transition: all 0.2s ease;
-    }
-    
-    .nav-button:hover {
-      background: #f8f9fa;
-      border-color: #3b82f6;
-      color: #3b82f6;
-      transform: translateY(-2px);
-      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-    }
-    
-    .nav-button i {
-      font-size: 1.2rem;
-    }
-    
-    .info-panel {
-      background: #f8f9fa;
-      padding: 1.5rem;
-      border-radius: 0.5rem;
-      margin-top: 2rem;
-    }
-    
-    .info-panel h3 {
-      color: #495057;
-      margin-bottom: 1rem;
-    }
-    
-    .info-panel p {
-      margin: 0.5rem 0;
-      color: #6c757d;
-    }
-    
-    .info-panel strong {
-      color: #495057;
-    }