lib-common-angular 0.0.9 → 0.0.11

package/projects/lib-common-angular/src/lib/componentes/landingPages/pages/ecommerce1/home-ecommerce1/home-ecommerce1.html

@@ -0,0 +1,77 @@
+<!--  Hero Section con animaciones-->
+
+<lib-hero-section-ecommerce1></lib-hero-section-ecommerce1>
+
+<!-- Product Grid Section -->
+
+<lib-section-filters-categories-productos id="categorias"
+    [categorias]="categorias"
+    (categorySelected)="onCategoryFilter($event)">
+</lib-section-filters-categories-productos>
+<ng-template #cards let-items>
+    <div class="grid align-items-center justify-content-center">
+        @for (product of items; track $index) {
+        <div class="col-12 md:col-6 p-5 lg:p-3 lg:col-4 product-card-animation"
+            [style.transition-delay]="($index * 30) + 'ms'">
+            <lib-card-productos1 [product]="product" [detailRouteBase]="detailRouteBase" (addToCart)="onAddToCart($event)">
+            </lib-card-productos1>
+        </div>
+        }
+    </div>
+</ng-template>
+
+<lib-paginator-pg
+  [data]="filteredProducts"
+  [rows]="9"
+  [rowsPerPageOptions]="[9,18,27,54,81]"
+  [showCurrentPageReport]="true"
+  [currentPageReportTemplate]="'Mostrando {first} a {last} de {totalRecords} ítems'"
+  [itemTemplate]="cards">
+</lib-paginator-pg>
+
+<!-- Seccion "Nuestra Historia"-->
+<section id="nosotros" class="history-section" style="
+    background-image: url(&quot;https://placehold.co/1400x600/b0b0b0/ffffff?text=Our+Story+Background+Image&quot;);
+  ">
+    <div class="history-overlay"></div>
+    <div class="history-content">
+        <p class="history-pretitle">Sobre Nosotros</p>
+        <h2 class="history-title">Conoce Nuestra Historia</h2>
+        <p class="history-text">
+            No hay una fórmula mágica para escribir un texto publicitario perfecto; se
+            basa en varios factores, incluyendo la ubicación del anuncio, la
+            demografía e incluso el estado de ánimo del consumidor.
+        </p>
+        <button pButton type="button" class="p-button-rounded p-button-lg p-button-warning" icon="pi pi-play"
+            aria-label="Ver video"></button>
+    </div>
+</section>
+
+<!-- Nueva seccion de Instagram -->
+<lib-section-images-instagram-ecommerce1></lib-section-images-instagram-ecommerce1>
+
+<!-- Newsletter (PrimeFlex + animación on scroll) -->
+<section class="surface-section py-5 animate-newsletter-section">
+    <div class="mx-auto px-3 md:px-4" style="max-width: 1100px;">
+        <div class="newsletter-card surface-card border-round-2xl shadow-2 p-4 md:p-5 flex flex-column md:flex-row align-items-center gap-3 md:gap-4">
+            <div class="newsletter-left flex align-items-center gap-3 md:gap-4">
+                <div class="newsletter-icon flex align-items-center justify-content-center border-round-3xl" style="background:#fbc30d; width: 52px; height:52px;">
+                    <svg class="newsletter-svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" xmlns="http://www.w3.org/2000/svg" style="width:28px;height:28px;color:#fff;">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"></path>
+                    </svg>
+                </div>
+                <div class="newsletter-text">
+                    <h3 class="newsletter-title m-0 text-900 text-xl md:text-2xl">Suscríbete a nuestro boletín</h3>
+                    <p class="newsletter-subtitle m-0 text-600">¡y obtén un 10% de descuento!</p>
+                </div>
+            </div>
+            <div class="newsletter-right flex justify-content-center md:justify-content-end w-full md:w-auto">
+                <form id="newsletter-form" class="newsletter-form flex gap-2 w-full md:w-auto" style="max-width:520px;">
+                    <input pInputText type="email" id="email-input" name="email" class="flex-1 p-inputtext-sm md:p-inputtext" placeholder="Ingresa tu correo electrónico" required />
+                    <button pButton type="submit" label="Suscribirme" class="p-button-warning"></button>
+                </form>
+            </div>
+        </div>
+    </div>
+</section>
+

package/projects/lib-common-angular/src/lib/componentes/landingPages/pages/ecommerce1/home-ecommerce1/home-ecommerce1.scss

@@ -0,0 +1,63 @@
+ @use "../../../../../../../../../theme/funtions" as func;
+
+/* History section styles (replaces Tailwind utilities) */
+.history-section{
+    position:relative;
+    background-size:cover;
+    background-position:center;
+    min-height:500px;
+    display:flex;
+    align-items:center;
+    justify-content:center;
+    margin:1.5rem 0;
+}
+.history-overlay{ position:absolute; inset:0; background:rgba(0,0,0,0.5); }
+.history-content{ position:relative; z-index:2; max-width:800px; text-align:center; color:#ffffff; padding:2rem; }
+.history-pretitle{ font-size:1rem; font-weight:300; margin-bottom:.5rem; }
+.history-title{ font-size:2.25rem; margin:0 0 1rem 0; font-weight:700; }
+.history-text{ font-size:1rem; margin-bottom:1rem; font-weight:300; }
+
+/* Newsletter styles (replaces Tailwind utilities) */
+.animate-newsletter-section { opacity: 0; }
+.animate-newsletter-section .newsletter-card { opacity: 0; transform: translateY(24px); transition: opacity 600ms ease-out, transform 600ms ease-out; }
+.animate-newsletter-section.is-visible { opacity: 1; }
+.animate-newsletter-section.is-visible .newsletter-card { opacity: 1; transform: translateY(0); }
+
+@include func.responsive-up(md){
+    .newsletter-card{ flex-direction:row; justify-content:space-between; align-items:center; }
+    .newsletter-text{ text-align:left; }
+    .newsletter-right{ width:auto; }
+}
+
+
+/* --- 1. MÓVIL (Por defecto) --- */
+/* Pantallas pequeñas: Animación vertical suave para no salir de la pantalla */
+.product-card-animation {
+    opacity: 0;
+    transform: translateY(50px); /* Sube desde abajo */
+    transition: opacity 1.0s ease-out, transform 1.0s ease-out;
+    will-change: opacity, transform;
+
+    &.is-visible {
+        opacity: 1;
+        transform: translate(0, 0);
+    }
+}
+
+/* --- 2. TABLET (Entre 768px y 1024px) --- */
+@include func.responsive-up(md) {
+    .product-card-animation {
+        /* Hacemos un movimiento lateral PERO CORTO (-50px) */
+        /* Así se ve el efecto de lado, pero garantizamos que el usuario lo vea */
+        transform: translateX(-50px); 
+    }
+}
+
+/* --- 3. ESCRITORIO (Pantallas Grandes) --- */
+@include func.responsive-up(lg) {
+    .product-card-animation {
+        /* Aquí sí recuperamos tu efecto dramático largo */
+        transform: translateX(-400px); 
+        transition: opacity 1.0s ease-out, transform 1.0s ease-out;
+    }
+}

package/projects/lib-common-angular/src/lib/componentes/landingPages/pages/ecommerce1/home-ecommerce1/home-ecommerce1.spec.ts

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

package/projects/lib-common-angular/src/lib/componentes/landingPages/pages/ecommerce1/home-ecommerce1/home-ecommerce1.ts

@@ -0,0 +1,160 @@
+import { Component, Input, OnInit, Output, EventEmitter, AfterViewInit, ElementRef, OnChanges, SimpleChanges } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ButtonModule } from 'primeng/button';
+import { InputTextModule } from 'primeng/inputtext';
+import { HeroSectionEcommerce1 } from "../../../molecules/ecommerce1/hero-section-ecommerce1/hero-section-ecommerce1";
+import { SectionFiltersCategoriesProductos } from "../../../../shared/molecules/section-filters-categories-productos/section-filters-categories-productos";
+import { CardProductos1Component } from "../../../../shared/molecules/productos/card-productos1/card-productos1.component";
+import { SectionImagesInstagramEcommerce1 } from '../../../molecules/ecommerce1/section-images-instagram-ecommerce1/section-images-instagram-ecommerce1';
+import { PaginatorPgComponent } from '../../../../shared/atoms/paginator-pg/paginator-pg.component';
+import { BusinessDTO, CategoriaDTO, ComponentesDTO, ProductoDTO } from '@juliaosistem/core-dtos';
+
+@Component({
+  selector: 'lib-home-ecommerce1',
+  imports: [
+    CommonModule,
+    ButtonModule,
+    InputTextModule,
+    HeroSectionEcommerce1,
+    SectionFiltersCategoriesProductos,
+    CardProductos1Component,
+    SectionImagesInstagramEcommerce1,
+    PaginatorPgComponent
+  ],
+  templateUrl: './home-ecommerce1.html',
+  styleUrls: ['./home-ecommerce1.scss']
+})
+export class HomeEcommerce1 implements OnInit, AfterViewInit, OnChanges {
+
+  // Metadata del componente    
+  componente: ComponentesDTO = {
+    id: 28,
+    nombreComponente: 'lib-home-ecommerce1',
+    version: '1.0',
+    descripcion: 'Componente para mostrar home de ecommerce1'
+  }
+
+  // ===== Inputs desde la app =====
+  @Input() isLogin: boolean = false;
+  @Input() bussinesDTO!: BusinessDTO ;
+  @Input() categorias: CategoriaDTO[] = [];
+  // Base de ruta para navegar al detalle desde las cards (controlado por el front)
+  @Input() detailRouteBase: string[] = ['detalle'];
+
+  filteredProducts: ProductoDTO[] = [];
+
+  // ===== Outputs para eventos hacia la app =====
+  @Output() productClicked = new EventEmitter<ProductoDTO>();
+  @Output() categorySelected = new EventEmitter<string>();
+
+  constructor(private el: ElementRef) {}
+
+  ngOnInit(): void {
+    this.filteredProducts = this.getAllProducts();
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if ((changes['bussinesDTO'] && !changes['bussinesDTO'].firstChange) ||
+        (changes['categorias'] && !changes['categorias'].firstChange)) {
+      this.applyCategoryFilter('all');
+    }
+  }
+  ngAfterViewInit() {
+    this.iniciarAnimacionScroll();
+  }
+
+  /**
+   * Inicializa la animación de scroll configurando los observadores necesarios.
+   */
+  iniciarAnimacionScroll(): void {
+    const observer = this.createIntersectionObserver();
+    this.initialObservation(observer);
+    this.setupMutationObserver(observer);
+  }
+
+  /**
+   * Crea el IntersectionObserver para manejar la visibilidad de los elementos.
+   * @returns Instancia de IntersectionObserver configurada.
+   */
+  private createIntersectionObserver(): IntersectionObserver {
+    const observerOptions = { root: null, rootMargin: '0px', threshold: 0.1 };
+    return new IntersectionObserver((entries, obs) => {
+      entries.forEach((entry) => {
+        if (entry.isIntersecting) {
+          entry.target.classList.add('is-visible');
+          obs.unobserve(entry.target);
+        }
+      });
+    }, observerOptions);
+  }
+
+  /**
+   * Selecciona los elementos a animar y los añade al observador.
+   * @param observer El IntersectionObserver activo.
+   */
+  private observeElements(observer: IntersectionObserver): void {
+    const tarjetas = this.el.nativeElement.querySelectorAll('.product-card-animation');
+    tarjetas.forEach((tarjeta: Element) => observer.observe(tarjeta));
+    const newsletter = this.el.nativeElement.querySelectorAll('.animate-newsletter-section');
+    newsletter.forEach((sec: Element) => observer.observe(sec));
+    const genericos = this.el.nativeElement.querySelectorAll('.animate-scroll');
+    genericos.forEach((el: Element) => observer.observe(el));
+  }
+
+  /**
+   * Realiza la observación inicial después de un breve retraso para asegurar el renderizado.
+   * @param observer El IntersectionObserver activo.
+   */
+  private initialObservation(observer: IntersectionObserver): void {
+    setTimeout(() => {
+      this.observeElements(observer);
+    }, 50);
+  }
+
+  /**
+   * Configura un MutationObserver para detectar cambios en la paginación y re-observar elementos.
+   * @param observer El IntersectionObserver activo.
+   */
+  private setupMutationObserver(observer: IntersectionObserver): void {
+    const mutationObserver = new MutationObserver((mutations) => {
+      const shouldUpdate = mutations.some(mutation => mutation.addedNodes.length > 0);
+      if (shouldUpdate) {
+        this.observeElements(observer);
+      }
+    });
+
+    const paginatorElement = this.el.nativeElement.querySelector('lib-paginator-pg');
+    if (paginatorElement) {
+      mutationObserver.observe(paginatorElement, { childList: true, subtree: true });
+    }
+  }
+
+  // ===== Métodos para interactuar con la app =====
+  onProductClick(product: ProductoDTO): void {
+    this.productClicked.emit(product);
+  }
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+onAddToCart(event: any) {
+  console.log("Evento recibido:", event);
+}
+  onCategoryFilter(category: string): void {
+    this.applyCategoryFilter(category);
+    this.categorySelected.emit(category);
+  }
+
+  private applyCategoryFilter(category: string): void {
+    const base = this.getAllProducts();
+    if (!category || category === 'all') {
+      this.filteredProducts = base;
+      return;
+    }
+    this.filteredProducts = base.filter(p => p.nombreCategoria === category);
+  }
+
+  private getAllProducts(): ProductoDTO[] {
+    return (this.bussinesDTO && this.bussinesDTO.productos && this.bussinesDTO.productos.length > 0)
+      ? this.bussinesDTO.productos
+      : [];
+  }
+}

package/projects/lib-common-angular/src/lib/componentes/landingPages/pages/ecommerce1/login-ecommerce1/login-ecommerce1.html

@@ -0,0 +1,11 @@
+<div class="auth-page">
+    <section class="auth-section">
+        <lib-section-header-forms-login-ecomerce1 [titulo]="'Iniciar Sesión'" [subtitulo]="'Bienvenido de nuevo'"></lib-section-header-forms-login-ecomerce1>
+        <lib-form-auth-eccomerce1 [isRegistering]="false" [isLogout]="false"></lib-form-auth-eccomerce1>
+        <div class="auth-footer">
+            <p>¿No tienes una cuenta?
+                <button pButton type="button" label="Regístrate" class="p-button-text" [routerLink]="['register']"></button>
+            </p>
+        </div>
+    </section>
+</div>

package/projects/lib-common-angular/src/lib/componentes/landingPages/pages/ecommerce1/login-ecommerce1/login-ecommerce1.scss

@@ -0,0 +1,20 @@
+  .auth-page {
+            min-height: 100vh;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            flex-direction: column;
+            padding: 2rem 0;
+        }
+
+        .auth-section {
+            background-color: #ffffff;
+            padding: 4rem 2rem;
+            border-radius: 1rem;
+            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
+            max-width: 90%;
+            width: 500px;
+            margin: 4rem auto;
+            animation: fadeIn 0.5s ease-out;
+        }
+        

package/projects/lib-common-angular/src/lib/componentes/landingPages/pages/ecommerce1/login-ecommerce1/login-ecommerce1.spec.ts

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

package/projects/lib-common-angular/src/lib/componentes/landingPages/pages/ecommerce1/login-ecommerce1/login-ecommerce1.ts

@@ -0,0 +1,18 @@
+import { Component, ViewEncapsulation } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ButtonModule } from 'primeng/button';
+import { SectionHeaderFormsLoginEcomerce1 } from "../../../atoms/ecommerce1/section-header-forms-login-ecomerce1/section-header-forms-login-ecomerce1";
+import { FormAuthEccomerce1 } from "../../../molecules/ecommerce1/form-auth-eccomerce1/form-auth-eccomerce1";
+import { RouterModule } from '@angular/router';
+
+@Component({
+  selector: 'lib-login-ecommerce1',
+  imports: [CommonModule, ButtonModule, SectionHeaderFormsLoginEcomerce1, FormAuthEccomerce1, RouterModule],
+  templateUrl: './login-ecommerce1.html',
+  styleUrls: ['./login-ecommerce1.scss'],
+  encapsulation: ViewEncapsulation.None
+
+})
+export class LoginEcommerce1 {
+
+}

package/projects/lib-common-angular/src/lib/componentes/landingPages/pages/ecommerce1/product-detail-lib/product-detail-lib.html

@@ -0,0 +1,20 @@
+<div class="py-4 background-page mx-auto px-3">
+        <lib-detalle-carrito-1 [product]="product!" [isLogin]="isLogin"></lib-detalle-carrito-1>
+
+        @if (products && products.length > 0) {
+                <section class="mt-4 related-products">
+                        <h3 class="text-white font-semibold mb-2">Productos que te pueden gustar</h3>
+                        <swiper-container direction="horizontal" navigation="true" pagination="true" pagination-clickable="true" loop="true" autoplay="true"
+                                                autoplay-delay="6000" autoplay-disable-on-interaction="false" speed="600"
+                                                [slidesPerView]="slidesPerViewBase" [spaceBetween]="spaceBetweenBase"
+                                                [breakpoints]="breakpoints"
+                                                style="--swiper-navigation-color:#FFD600; --swiper-theme-color:#FFD600; --swiper-pagination-color:#FFD600; --swiper-pagination-bullet-inactive-color:#FFFFFF; --swiper-pagination-bullet-inactive-opacity:0.6; --swiper-pagination-bullet-size:8px; --swiper-pagination-bullet-horizontal-gap:6px;">
+                                @for (p of products; track p.id) {
+                                        <swiper-slide>
+                                                <lib-card-productos1 [product]="p" [isLogin]="isLogin"></lib-card-productos1>
+                                        </swiper-slide>
+                                }
+                        </swiper-container>
+                </section>
+        }
+</div>

package/projects/lib-common-angular/src/lib/componentes/landingPages/pages/ecommerce1/product-detail-lib/product-detail-lib.scss

@@ -0,0 +1,20 @@
+@use '../../../../../../../../../theme/variables.scss' as vars;
+
+.background-page {
+  background-color: vars.$brand-blue-zigma !important;
+}
+
+/* Centra el texto de los cards dentro del slider de relacionados */
+.related-products {
+  :host ::ng-deep lib-card-productos1 h3 {
+    text-align: center !important;
+  }
+  :host ::ng-deep lib-card-productos1 .surface-ground,
+  :host ::ng-deep lib-card-productos1 .info-badges {
+    text-align: center !important;
+    justify-content: center !important;
+  }
+  :host ::ng-deep lib-card-productos1 .mt-auto .flex {
+    justify-content: center !important;
+  }
+}

package/projects/lib-common-angular/src/lib/componentes/landingPages/pages/ecommerce1/product-detail-lib/product-detail-lib.ts

@@ -0,0 +1,190 @@
+import { Component, OnInit, Input, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { DetalleCarrito1Component } from '../../../../shared/molecules/productos/detalle-carrito-1/detalle-carrito-1.component';
+import { MetaDataService } from '../../../../shared/services/meta-data.service.ts/meta-data.service';
+import { ProductoDTO,CategoriaDTO } from '@juliaosistem/core-dtos';
+import { ActivatedRoute } from '@angular/router';
+import { ProductService } from '../../../../shared/services/product.service';
+import { Store } from '@ngxs/store';
+import { ProductosState } from '../../../../../assets/state/productos.state';
+import { CardProductos1Component } from '../../../../shared/molecules/productos/card-productos1/card-productos1.component';
+import { register } from 'swiper/element/bundle';
+
+@Component({
+  selector: 'lib-product-detail-lib',
+  standalone: true,
+  imports: [CommonModule, DetalleCarrito1Component, CardProductos1Component],
+  templateUrl: './product-detail-lib.html',
+  styleUrls: ['./product-detail-lib.scss'],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA]
+})
+export class DetalleProductoPageLib implements OnInit {
+  /**
+   * Producto actual a mostrar en el detalle.
+   * Puede llegar vía `@Input` o a través del `history.state`/ruta.
+   */
+  @Input() product: ProductoDTO | undefined;
+
+  /**
+   * Indica si el usuario está autenticado para habilitar acciones/visualizaciones para agregar al carrito.
+   */
+  @Input() isLogin = false;
+
+  /**
+   * Lista de categorías disponibles. Se usa para enriquecer los productos
+   * relacionados con el nombre de la categoría cuando el store no lo provee.
+   */
+  @Input() categorias: CategoriaDTO[] = [];
+
+  /**
+   * Productos relacionados (misma categoría) que se mostrarán en el slider.
+   */
+  products : ProductoDTO[] = [];
+
+  /**
+   * Configuración de breakpoints para el slider de productos relacionados.
+   * - 768px: 2 productos por vista
+   * - 1024px: 3 productos por vista
+   */
+  readonly breakpoints = {
+    768: { slidesPerView: 2, spaceBetween: 16 },
+    1024: { slidesPerView: 3, spaceBetween: 16 },
+  };
+
+  /** Número base de productos por vista (móvil). */
+  readonly slidesPerViewBase = 1;
+  /** Espacio base entre slides (px). */
+  readonly spaceBetweenBase = 12;
+
+  constructor(
+    private route: ActivatedRoute,
+    private productSvc: ProductService,
+    private meta: MetaDataService,
+    private store: Store,
+  ) {}
+
+  /**
+   * - Registra los web components de Swiper (una sola vez).
+   * - Resuelve el producto a mostrar y carga los relacionados.
+   */
+  ngOnInit(): void {
+    try { register(); } catch { /* ya registrado */ }
+    this.getData();
+  }
+
+  /**
+   * Obtiene el producto a mostrar:
+   * 1. Prioriza `history.state` (navegación con estado).
+   * 2. Si no está, intenta resolver por `id` en la URL:
+   *    - Busca en el store NGXS
+   *    - Si no existe, usa un mock de productos.
+   * Finalmente, carga los productos relacionados.
+   */
+  getData(): void{
+    if (!this.product) {
+      const nav = history.state as { product?: ProductoDTO; isLogin?: boolean };
+      if (nav?.product) {
+        this.product = nav.product;
+        this.isLogin = !!nav.isLogin;
+        this.loadRelatedProducts();
+        return;
+      }
+    }
+
+    const id = this.getProductIdFromRoute();
+    if (id) {
+      const productoFromStore = this.getFromStoreById(id);
+      if (productoFromStore) {
+        this.product = productoFromStore;
+        this.loadRelatedProducts();
+        return;
+      }
+
+      const mock = this.productSvc.mockProductosInflablesDTO();
+      this.product = mock.find(p => String(p.id) === String(id));
+      this.loadRelatedProducts();
+    }
+  }
+
+  /**
+   * Resuelve el `id` del producto desde diferentes ubicaciones en la ruta:
+   * - `paramMap`: `id` o `productId`
+   * - `queryParamMap`: `id`
+   * - Último segmento de la URL
+   */
+  private getProductIdFromRoute(): string | null {
+    let id = this.route.snapshot.paramMap.get('id');
+    if (id) return id;
+    id = this.route.snapshot.paramMap.get('productId');
+    if (id) return id;
+    id = this.route.snapshot.queryParamMap.get('id');
+    if (id) return id;
+    const urlSegs = this.route.snapshot.url;
+    if (urlSegs && urlSegs.length > 0) {
+      return urlSegs[urlSegs.length - 1].path || null;
+    }
+    return null;
+  }
+
+  /**
+   * Busca un producto por `id` en el store NGXS.
+   * @param id Identificador del producto
+   * @returns Producto si existe, `undefined` en caso contrario
+   */
+  private getFromStoreById(id: string): ProductoDTO | undefined {
+    try {
+      return this.store.selectSnapshot(ProductosState.selectById<ProductoDTO>(id));
+    } catch {
+      return undefined;
+    }
+  }
+
+  /**
+   * Construye la lista de productos relacionados por categoría.
+   * - Obtiene todos los productos desde el store o mock si está vacío.
+   * - Filtra por `idCategoria` y excluye el producto actual.
+   * - Enriquece los productos con `nombreCategoria` si es necesario.
+   */
+  private loadRelatedProducts(): void {
+    if (!this.product?.idCategoria) {
+      this.products = [];
+      return;
+    }
+    let allProducts = this.store.selectSnapshot(
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      (state: any) => (state?.producto?.dataList as ProductoDTO[]) || []
+    );
+    if (!allProducts || allProducts.length === 0) {
+      allProducts = this.productSvc.mockProductosInflablesDTO();
+    }
+    const idCat = String(this.product.idCategoria);
+    this.products = allProducts
+      .filter(p => String(p.idCategoria) === idCat)
+      .filter(p => String(p.id) !== String(this.product?.id));
+
+    const cats = this.getCategoriasFromStoreOrInputOrMock();
+    if (cats && cats.length) {
+      this.products = this.productSvc.addNameCategoriaToProducts(this.products, cats);
+    }
+  }
+
+  /**
+   * Obtiene categorías desde distintas fuentes (prioridad):
+   * 1. `@Input categorias`
+   * 2. Store NGXS (`categoriaproducto.dataList`)
+   * 3. Mock proporcionado por `ProductService`
+   */
+  private getCategoriasFromStoreOrInputOrMock(): CategoriaDTO[] {
+    if (this.categorias && this.categorias.length) return this.categorias;
+    try {
+      const fromStore = this.store.selectSnapshot(
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        (state: any) => (state?.categoriaproducto?.dataList as CategoriaDTO[]) || []
+      );
+      if (fromStore && fromStore.length) return fromStore;
+    } catch {
+      // ignorar y usar mock
+    }
+    return this.productSvc.mockCategoriaInflablesDTO();
+  }
+}

package/projects/lib-common-angular/src/lib/componentes/landingPages/pages/ecommerce1/register-ecommerce1/register-ecommerce1.html

@@ -0,0 +1,11 @@
+<div class="auth-page">
+    <section class="auth-section">
+        <lib-section-header-forms-login-ecomerce1 [titulo]="'Registro'" [subtitulo]="'Crea tu cuenta en segundos'"></lib-section-header-forms-login-ecomerce1>
+        <lib-form-auth-eccomerce1 [isRegistering]="true" [isLogout]="true"></lib-form-auth-eccomerce1>
+        <div class="auth-footer">
+            <p>¿Ya tienes una cuenta?
+                <button pButton type="button" label="Inicia sesión" class="p-button-text" [routerLink]="['login']"></button>
+            </p>
+        </div>
+    </section>
+</div>