lib-common-angular 0.0.9 → 0.0.11

package/projects/lib-common-angular/src/lib/componentes/shared/molecules/productos/detalle-carrito-1/detalle-carrito-1.component.html

@@ -0,0 +1,134 @@
+@if (product) {
+<div id="product-container" class="shadow-2 border-round-2xl p-3 md:p-5 lg:p-6">
+        <!-- Contenedor principal de la página de detalle -->
+        <div class="grid">
+            <!-- Bloque de imagen principal -->
+            <div class="flex flex-column  col-12 lg:col-6">
+                <div class="main-image-frame bg-gray-100 border-round-xl flex justify-content-center align-items-center">
+                    <img
+                        [src]="selectedImageUrl"
+                        [alt]="product.imagen[0].alt || product.name"
+                        loading="lazy" width="1024" height="520"
+                        class="main-image border-round-xl" />
+                </div>
+
+                <!-- Miniaturas debajo en móvil y tablet -->
+                @if (product.imagen && product.imagen.length > 0) {
+                <div class="flex flex-row gap-2 overflow-x-auto pt-2">
+                    @for (imagen of product.imagen; track $index) {
+                        <button type="button" class="thumbnail-container border-round-lg cursor-pointer" (click)="updateMainImage(imagen.url)">
+                            <div class="thumbnail" [class.thumbnail-active]="isActiveThumbnail(imagen.url)">
+                                <img [src]="imagen.url" alt="Miniatura {{ imagen.alt }}" loading="lazy" width="88" height="88" />
+                            </div>
+                        </button>
+                    }
+                </div>
+                }
+            </div>
+
+            <!-- Columna de información del producto -->
+            <div class="flex flex-column justify-content-between col-12 lg:col-6">
+                <div class="flex flex-column gap-3">
+                    <div class="flex justify-content-between align-items-center mb-2">
+                        <h1 class="text-3xl font-bold text-900">{{ product.name }}</h1>
+                        <p-button 
+                            [text]="true" 
+                            [rounded]="true"
+                            (onClick)="toggleFavorite()"
+                            [icon]="isFavorite ? 'pi pi-heart-fill' : 'pi pi-heart'"
+                            [class]="isFavorite ? 'text-red-500' : 'text-500'"
+                            class="hover:text-red-500">
+                        </p-button>
+                    </div>
+
+    
+
+                    <!-- Bloque descripción con fondo gris como card -->
+                    <div class="surface-ground p-3 border-round-xl border-1 surface-border">
+                        <p class="text-700 line-height-3 m-0 font-bold">Descripción</p>
+                        <p class="text-700 line-height-3 m-0">{{ product.descripcion }}</p>
+                    </div>
+
+                    <div class="flex align-items-center gap-3">
+                        @if(isLogin){
+                            @if(product.descuento != undefined && product.descuento > 0) {
+                                <span class="old-price">{{ product.precios[0].precio | currency:product.precios[0].codigo_iso :'code' }}</span>
+                                <span class="discount-label">{{ product.descuento}}% OFF</span>
+                            }
+                            <span class="current-price">{{ discount | currency:product.precios[0].codigo_iso :'code'}}</span>
+                        } @else {
+                            <a
+                                class="contact-btn"
+                                [href]="getWhatsAppLink()"
+                                target="_blank" rel="noopener noreferrer"
+                                aria-label="Contactar por WhatsApp">
+                                <i class="pi pi-whatsapp"></i>
+                                <span>Contactar</span>
+                            </a>
+                        }
+                    </div>
+
+                    <!-- Info básica: categoría y disponibles -->
+                    <div class="surface-ground p-3 border-round-xl border-1 surface-border text-sm">
+                        <div class="flex justify-content-between align-items-center mb-2">
+                            <strong class="font-bold text-700">Categoría:</strong>
+                            <span class="text-600 text-right overflow-hidden text-overflow-ellipsis" style="max-width: 60%;">
+                                {{ product.nombreCategoria || 'Sin categoría' }}
+                            </span>
+                        </div>
+                        <div class="flex justify-content-between align-items-center">
+                            <strong class="font-bold text-700">Disponibles:</strong>
+                            <span class="text-600 font-medium">{{ product.cantidad }}</span>
+                        </div>
+                    </div>
+
+                    <!-- Badges informativos -->
+                    <div class="info-badges mb-4">
+                        <div class="badge"><i class="pi pi-shield"></i><span>Compra protegida</span></div>
+                        <div class="badge"><i class="pi pi-truck"></i><span>Entrega rápida</span></div>
+                    </div>
+                </div>
+
+                <div class="cta-card">
+                    <!-- Botones de acción: Personalizar y Compartir -->
+                    <div class="flex gap-2 mb-3">
+                        @if (isPersonalizable) {
+                            <p-button 
+                                (click)="navigateToProductDetail()" 
+                                pTooltip="Personalizar"
+                                icon="pi pi-pencil"
+                                tooltipPosition="top"
+                                styleClass="bg-900 text-white w-2rem h-2rem border-circle border-none flex align-items-center justify-content-center cursor-pointer hover:bg-700 transition-colors shadow-1">
+                            </p-button>
+                        }
+                        <p-button 
+                             
+                            pTooltip="Compartir"
+                            tooltipPosition="top"
+                            icon="pi pi-share-alt text-sm"
+                            styleClass="surface-100 text-900 w-2rem h-2rem border-circle border-none flex align-items-center justify-content-center cursor-pointer hover:bg-200 transition-colors shadow-1">
+                        </p-button>
+                    </div>
+               
+
+                    <lib-section-add-cards-buttons 
+                        [product]="product" 
+                        [isLogin]="isLogin">
+                    </lib-section-add-cards-buttons>
+
+                    @if (showCartMessage) {
+                        <div class="mt-3 text-center text-sm font-semibold text-green-600">
+                            Producto añadido al carrito.
+                        </div>
+                    }
+                </div>
+            </div>
+        </div>
+    </div>
+} @else {
+    <div class="surface-card shadow-2 border-round-2xl p-3 md:p-5 lg:p-6 w-full">
+        <div class="flex justify-content-center align-items-center" style="height: 16rem;">
+            <p class="text-500 text-lg">Cargando producto...</p>
+        </div>
+    </div>
+}

package/projects/lib-common-angular/src/lib/componentes/shared/molecules/productos/detalle-carrito-1/detalle-carrito-1.component.scss

@@ -0,0 +1,184 @@
+/* Refuerza la sombra del contenedor principal para que no se pierda en pantallas grandes */
+#product-container {
+  background: #fff;
+  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08), 0 2px 12px rgba(0, 0, 0, 0.04);
+  border-radius: 1rem;
+}
+// Estilos para la imagen principal
+.main-image-frame {
+  min-height: 420px;
+  height: 520px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #fff;
+  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
+}
+
+.main-image {
+  width: 100%;
+  max-width: 640px;
+  height: 100%;
+  object-fit: contain;
+}
+
+@media (min-width: 1024px) {
+  .main-image-frame { height: 600px; box-shadow: 0 14px 40px rgba(0,0,0,0.10); }
+  .main-image { max-width: 860px; }
+}
+
+// Estilos para las miniaturas
+.thumbnail-container {
+  transition: transform 0.2s ease-in-out;
+  
+  &:hover {
+    transform: scale(1.05);
+  }
+}
+
+.thumbnail {
+  border: 2px solid transparent;
+  border-radius: 8px;
+  overflow: hidden;
+  transition: border-color 0.2s ease-in-out;
+  
+  img {
+    width: 100%;
+    height: 88px;
+    object-fit: cover;
+    display: block;
+  }
+  
+  &.thumbnail-active {
+    border-color: #3b82f6; // blue-500
+  }
+}
+
+.thumbnails-rail {
+  max-height: 520px;
+  overflow: auto;
+  padding-right: 4px;
+  border-right: 1px solid rgba(0,0,0,0.06);
+}
+
+// Estilos para precios
+.old-price {
+  text-decoration: line-through;
+  color: #9ca3af; // gray-400
+  font-size: 1.125rem; // text-lg
+}
+
+.current-price {
+  color: #1f2937; // gray-800
+  font-size: 2rem; // larger
+  font-weight: 700; // font-bold
+}
+
+.discount-label {
+  background-color: #dc2626; // red-600
+  color: white;
+  padding: 0.25rem 0.5rem;
+  border-radius: 0.375rem;
+  font-size: 0.875rem; // text-sm
+  font-weight: 600; // font-semibold
+}
+
+.info-badges {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: .5rem;
+
+  .badge {
+    display: inline-flex;
+    align-items: center;
+    gap: .5rem;
+    background: #f8fafc;
+    border: 1px solid #e2e8f0;
+    color: #334155;
+    padding: .5rem .75rem;
+    border-radius: .5rem;
+    font-weight: 600;
+    i { font-size: 1rem; }
+  }
+}
+
+// Estilos para botones de cantidad
+.quantity-btn {
+  width: 2.5rem; // w-10
+  height: 2.5rem; // h-10
+  border: 1px solid #d1d5db; // border-gray-300
+  border-radius: 0.375rem;
+  background-color: #f9fafb; // bg-gray-50
+  transition: all 0.2s ease-in-out;
+  
+  &:hover {
+    background-color: #f3f4f6; // bg-gray-100
+    border-color: #9ca3af; // border-gray-400
+  }
+  
+  &:active {
+    transform: scale(0.95);
+  }
+}
+
+// Sobreescribir estilos de PrimeNG para mantener el diseño
+:host ::ng-deep {
+  // Estilos para p-rating
+  .p-rating {
+    .p-rating-icon {
+      color: #fbbf24; // yellow-400
+      font-size: 1.25rem;
+    }
+  }
+  
+  // Estilos para p-button principal
+  .p-button {
+    &.w-full {
+      width: 100% !important;
+      justify-content: center;
+      padding: 1rem 1.5rem;
+      font-size: 1.125rem;
+      font-weight: 700;
+    }
+  }
+  
+  // Estilos para p-image
+  .p-image {
+    .p-image-preview-indicator {
+      background-color: rgba(0, 0, 0, 0.5);
+      border-radius: 50%;
+    }
+  }
+
+  .contact-btn {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    background-color: #25D366; // WhatsApp green
+    color: #ffffff;
+    padding: 0.75rem 1.25rem;
+    border-radius: 0.5rem;
+    font-weight: 700;
+    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
+    transition: transform .15s ease, box-shadow .15s ease;
+
+    &:hover {
+      transform: translateY(-1px);
+      box-shadow: 0 4px 10px rgba(0,0,0,0.15);
+      text-decoration: none;
+    }
+
+    i.pi.pi-whatsapp {
+      font-size: 1.25rem;
+    }
+  }
+
+  .cta-card {
+    margin-top: 1rem;
+    padding: 1rem;
+    border: 1px solid #e5e7eb;
+    border-radius: .75rem;
+    background: #ffffff;
+    box-shadow: 0 10px 25px rgba(0,0,0,0.05);
+  }
+}

package/projects/lib-common-angular/src/lib/componentes/shared/molecules/productos/detalle-carrito-1/detalle-carrito-1.component.spec.ts

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

package/projects/lib-common-angular/src/lib/componentes/shared/molecules/productos/detalle-carrito-1/detalle-carrito-1.component.ts

@@ -0,0 +1,113 @@
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { PrimegModule } from '../../../../../modulos/primeg.module';
+import { FormsModule } from '@angular/forms';
+import { ComponentesDTO,ProductoDTO } from '@juliaosistem/core-dtos';
+type ProductoView = ProductoDTO & { nombreCategoria?: string };
+import { ProductService } from '../../../services/product.service';
+import { SectionAddCardsButtons } from "../../section-add-cards-buttons/section-add-cards-buttons";
+
+
+
+@Component({
+  selector: 'lib-detalle-carrito-1',
+  imports: [CommonModule, PrimegModule, FormsModule,  SectionAddCardsButtons],
+  templateUrl: './detalle-carrito-1.component.html',
+  styleUrls: ['./detalle-carrito-1.component.scss'],
+  standalone: true
+})
+export class DetalleCarrito1Component implements OnInit {
+
+    @Output() addToCart = new EventEmitter<{ product: ProductoDTO; quantity: number }>();
+
+  // Metadata del componente    
+    componente:ComponentesDTO = {
+            id: 27,
+            nombreComponente: 'lib-detalle-carrito-1',
+            version: '1.0',
+            descripcion: 'Componente para mostrar detalle de un producto'
+          }
+
+  @Input()
+  // Variable que recibe el producto a mostrar
+  product!: ProductoView;
+
+  // Variable que determina si el usuario está logueado
+  @Input()
+  isLogin: boolean = false;
+
+  // Variable que determina el descuento aplicado al producto
+  discount: number = 0;
+
+  // Variable que determina la cantidad actual del producto
+  currentQuantity: number = 1;
+  // Variable que almacena la URL de la imagen seleccionada
+  selectedImageUrl: string = '';
+  // Variable que controla la visibilidad del mensaje de agregado al carrito
+  showCartMessage: boolean = false;
+  // Variable que indica si el producto es favorito
+  isFavorite: boolean = false;
+
+  // Control para mostrar botón de personalización como en las cards
+  @Input() isPersonalizable: boolean = false;
+
+  constructor(private productService: ProductService) {}
+
+  ngOnInit(): void {
+   this.checkIsProductExists();
+  }
+
+/**
+ * Método para verificar si el producto existe y tiene imágenes
+ * Si el producto tiene imágenes, se selecciona la primera imagen por defecto
+ * y se calcula el descuento utilizando el servicio de productos.
+ */
+  checkIsProductExists(){
+    if(this.product && this.product?.imagen.length > 0) {
+      this.selectedImageUrl = this.product?.imagen[0].url
+      this.discount = this.productService.calculateDiscount(this.product);
+    }
+  }
+
+  /**
+   * 
+   * @param imageUrl URL de la imagen seleccionada
+   * Método para actualizar la imagen principal cuando se selecciona una miniatura
+   */
+  updateMainImage(imageUrl: string): void {
+    this.selectedImageUrl = imageUrl;
+  }
+
+  
+
+
+  toggleFavorite(): void {
+    this.isFavorite = !this.isFavorite;
+  }
+
+  getWhatsAppLink(): string {
+    const base = 'https://wa.me/?text=';
+    const message = `Hola, estoy interesado en el producto: ${this.product?.name ?? ''}`;
+    return base + encodeURIComponent(message);
+  }
+
+
+/**
+ * 
+ * @param imageUrl URL de la imagen a verificar
+ * Método para verificar si una miniatura es la imagen activa
+ * @returns 
+ */
+  isActiveThumbnail(imageUrl: string): boolean {
+    return this.selectedImageUrl === imageUrl;
+  }
+
+  onChildAddToCart(event: { product: ProductoDTO; quantity: number }) {
+    this.addToCart.emit(event);
+    this.showCartMessage = event.quantity > 0;
+  }
+
+  navigateToProductDetail(): void {
+    console.log('Navegando a la página de detalle del producto...');
+  }
+}

package/projects/lib-common-angular/src/lib/componentes/shared/molecules/section-add-cards-buttons/section-add-cards-buttons.html

@@ -0,0 +1,7 @@
+@if (isLogin) {
+     <lib-button-add-to-card1 [product]="product" (addToCart)="onAddToCart($event)">
+    </lib-button-add-to-card1>
+} @else {
+    <lib-sh-wats-button-card [product]="product" [isLogin]="isLogin">
+    </lib-sh-wats-button-card>
+}

package/projects/lib-common-angular/src/lib/componentes/shared/molecules/section-add-cards-buttons/section-add-cards-buttons.spec.ts

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

package/projects/lib-common-angular/src/lib/componentes/shared/molecules/section-add-cards-buttons/section-add-cards-buttons.ts

@@ -0,0 +1,22 @@
+import { ProductoDTO } from '@juliaosistem/core-dtos';
+import { Component, Input } from '@angular/core';
+import { ShWatsButtonCard } from "../../atoms/sh-wats-button-card/sh-wats-button-card";
+import { ButtonAddToCard1 } from "../../atoms/button-add-to-card1/button-add-to-card1";
+
+@Component({
+  selector: 'lib-section-add-cards-buttons',
+  imports: [ShWatsButtonCard, ButtonAddToCard1],
+  templateUrl: './section-add-cards-buttons.html',
+  styleUrl: './section-add-cards-buttons.scss',
+})
+export class SectionAddCardsButtons {
+
+  @Input() product!: ProductoDTO;
+  @Input() isLogin: boolean = false;
+
+  onAddToCart(event: { product: ProductoDTO; quantity: number }): void {
+    // Aquí puedes manejar el evento de agregar al carrito si es necesario
+    console.log('Producto agregado al carrito:', event);
+  }
+
+}

package/projects/lib-common-angular/src/lib/componentes/shared/molecules/section-filters-categories-productos/section-filters-categories-productos.html

@@ -0,0 +1,9 @@
+<div class="grid  align-items-center justify-content-center filters-bar  animate-scroll">
+    <h2 class="filters-title font-bold text-gray-800">{{ titleComponent }}</h2>
+    <div class="filters-list">
+        <button pButton type="button" class="filter-btn" [ngClass]="{ 'active': selectedCategory === 'all' }" (click)="selectCategory('all')">Todos</button>
+        @for (categoria of categorias; track $index) {
+            <button pButton type="button" class="filter-btn" (click)="selectCategory(categoria.nombreCategoria)" [ngClass]="{ 'active': selectedCategory === categoria.nombreCategoria }">{{ categoria.nombreCategoria }}</button>
+        }
+    </div>
+</div>

package/projects/lib-common-angular/src/lib/componentes/shared/molecules/section-filters-categories-productos/section-filters-categories-productos.scss

@@ -0,0 +1,41 @@
+/* Styles replacing Tailwind utilities for category filters */
+.filters-bar{ display:flex; align-items:center; justify-content:space-between; gap:2rem; margin:2rem; }
+.filters-title{ font-size:1.75rem; font-weight:700; margin:0; color:#111827; }
+
+.filters-list{ display:flex; flex-wrap:wrap; gap:.75rem 1rem; align-items:center; }
+
+.filter-btn{ border-radius:999px; padding:.5rem .9rem; border:1px solid transparent; background:transparent; color:#374151; white-space:nowrap; }
+.filter-btn:hover{ opacity:.9; }
+.filter-btn.active{ background:#fbc30d; color:#111827; border-color:transparent; }
+
+@media(max-width:600px){
+    .filters-bar{ flex-direction:column; align-items:flex-start; }
+    /* En móvil, romper a múltiples filas (no carrusel horizontal) */
+    .filters-list{ flex-wrap:wrap; overflow:visible; }
+    .filter-btn{ flex:0 0 auto; }
+}
+
+/* Adaptación a breakpoints del proyecto (sm:400px, md:768px, lg:1024px) */
+@media screen and (max-width: 400px) {
+    .filters-title{ font-size:1.5rem; }
+    .filters-bar{ gap:1rem; margin:1rem; }
+}
+
+@media screen and (max-width: 768px) {
+    .filters-list{ gap:.5rem .75rem; }
+}
+
+@media screen and (min-width: 1024px) {
+    .filters-list{ gap:1rem 1.25rem; }
+}
+
+.animate-scroll {
+    opacity: 0;
+    transform: translateY(50px);
+    transition: opacity 1.5s ease-out, transform 1.5s ease-out;
+
+    &.is-visible {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}

package/projects/lib-common-angular/src/lib/componentes/shared/molecules/section-filters-categories-productos/section-filters-categories-productos.spec.ts

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

package/projects/lib-common-angular/src/lib/componentes/shared/molecules/section-filters-categories-productos/section-filters-categories-productos.ts

@@ -0,0 +1,34 @@
+import { CommonModule } from '@angular/common';
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { CategoriaDTO, ComponentesDTO } from '@juliaosistem/core-dtos';
+
+@Component({
+  selector: 'lib-section-filters-categories-productos',
+  imports: [CommonModule],
+  templateUrl: './section-filters-categories-productos.html',
+  styleUrl: './section-filters-categories-productos.scss'
+})
+export class SectionFiltersCategoriesProductos {
+
+  // Metadata del componente    
+    componente: ComponentesDTO = {
+      id: 29,
+      nombreComponente: 'lib-section-filters-categories-productos',
+      version: '1.0',
+      descripcion: 'Componente para mostrar filtros de categorias y productos'
+    }
+
+    // Categorias a mostrar
+    @Input() categorias: CategoriaDTO[] = [];
+    @Input() titleComponent: string = "Todos Las Categorias";
+
+    @Output() categorySelected: EventEmitter<string> = new EventEmitter<string>();
+
+    selectedCategory = 'all';
+
+    selectCategory(category: string): void {
+      this.selectedCategory = category;
+      this.categorySelected.emit(category);
+    }
+
+}