lib-common-angular 0.0.11 → 0.0.14

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

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

@@ -1,184 +0,0 @@
-/* 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

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

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

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

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

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

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

@@ -1,41 +0,0 @@
-/* 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

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

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