lib-common-angular 0.0.9 → 0.0.11

package/projects/lib-common-angular/src/lib/componentes/landingPages/molecules/ecommerce1/form-auth-eccomerce1/form-auth-eccomerce1.ts

@@ -0,0 +1,19 @@
+import { Component, Input } from '@angular/core';
+import { PrimegModule } from '../../../../../modulos/primeg.module';
+import { SectionLoginRegistroEcomerce1 } from "../../../atoms/ecommerce1/section-login-registro-ecomerce1/section-login-registro-ecomerce1";
+import { InputsLoginEcommerce1 } from "../../../atoms/ecommerce1/inputs-login-ecommerce1/inputs-login-ecommerce1";
+import { ButtonsSocialmediaLogin } from "../../../atoms/ecommerce1/buttons-socialmedia-login/buttons-socialmedia-login";
+import { InputsRegisterEcommerce1 } from '../../../atoms/ecommerce1/inputs-register-ecommerce1/inputs-register-ecommerce1';
+
+@Component({
+  selector: 'lib-form-auth-eccomerce1',
+  imports: [PrimegModule, SectionLoginRegistroEcomerce1, InputsLoginEcommerce1, ButtonsSocialmediaLogin, InputsRegisterEcommerce1],
+  templateUrl: './form-auth-eccomerce1.html',
+  styleUrl: './form-auth-eccomerce1.css'
+})
+export class FormAuthEccomerce1 {
+  
+  @Input() isRegistering = true;
+  @Input() isLogout = false;
+
+}

package/projects/lib-common-angular/src/lib/componentes/landingPages/molecules/ecommerce1/header-ecommerce1/header-ecommerce1.html

@@ -0,0 +1,168 @@
+<header>
+    
+ <lib-header-top-ecommerce1 
+    [facebookLink]="'https://www.facebook.com/Zigmainflables'"
+    [instagramLink]="'https://www.instagram.com/zigmainflables/'"
+    [whatsappLink]="DatosNegocio?.urlWhatssapp || 'https://wa.me/3186956700'">
+ </lib-header-top-ecommerce1>
+    
+    <nav class="main-nav hidden md:block mt-4 mx-auto px-5 py-5 border-round-3xl shadow-4" style="max-width: 1000px; width: 90%; font-size: 1.125rem; font-weight: 600;">
+        <div class="flex align-items-center justify-content-between">
+            <ul class="main-nav-ul flex gap-4 list-none m-0 p-0">
+                @for (item of getLeftMenuItems(); track item.id) {
+                    <li>
+                        <a [routerLink]="item.routerLink" routerLinkActive="active-route" [routerLinkActiveOptions]="{ exact: true }" (click)="onMenuItemClick(item, $event)" class="main-nav-link  no-underline font-semibold cursor-pointer">
+                            @if (currentMenu.showIcons && item.icon) {
+                            <i [class]="item.icon" style="margin-right:8px"></i>
+       }
+                            {{ item.label }}
+                        </a>
+                    </li>
+                }
+            </ul>
+            <a [routerLink]="['/']" class="logo-center text-3xl font-bold text-900 no-underline" aria-label="Home">
+                @if (logoUrl) {
+                    <img [src]="logoUrl" [alt]="logoAlt || logoText" class="logo-img" />
+                } @else {
+                    {{ logoText }}
+                }
+            </a>
+            <ul class="main-nav-ul flex gap-4 list-none m-0 p-0">
+                @for (item of getRightMenuItems(); track item.id) {
+                    <li>
+                        <a [routerLink]="item.routerLink" routerLinkActive="active-route" [routerLinkActiveOptions]="{ exact: true }" (click)="onMenuItemClick(item, $event)" class="main-nav-link  cursor-pointer">
+                            @if (currentMenu.showIcons && item.icon) {
+                                <i  [class]="item.icon"  ></i>
+                            }
+                            {{ item.label }}
+                        </a>
+                    </li>
+                }
+                @if(islogin){
+                 <li class="flex items-center gap-3 ml-2">
+                    <i class="fas fa-shopping-cart text-xl cursor-pointer shopping-cart" (click)="openCart()"></i>
+                </li>
+}
+            </ul>
+        </div>
+    </nav>
+
+    <nav class="mobile-header md:hidden mt-3 mx-auto border-round-xl shadow-4 flex align-items-center justify-content-between px-4 py-3" 
+         style="max-width: 95%; background-color: #0093e9;">
+         
+         <button (click)="toggleMobileMenu()" class="p-0 border-none bg-transparent flex align-items-center justify-content-center cursor-pointer text-white hover:text-gray-200 transition-colors">
+             <i class="fas fa-bars text-2xl"></i>
+            </button>
+         <div class="flex align-items-center gap-3">
+                <a [routerLink]="['/']" class="text-xl font-bold text-white no-underline line-height-2" aria-label="Home">
+                    @if (logoUrl) {
+                        <img [src]="logoUrl" [alt]="logoAlt || logoText" class="logo-img-mobile" />
+                    } @else {
+                        {{ logoText }}
+                    }
+                </a>
+        </div>
+
+        @if(islogin){
+            <div class="flex align-items-center">
+                <i class="fas fa-shopping-cart text-white text-xl cursor-pointer hover:text-gray-200 transition-colors" (click)="openCart()"></i>
+            </div>
+        }
+    </nav>
+    
+    <p-drawer [(visible)]="isMobileMenuOpen"
+              position="left"
+              [modal]="true"
+              [dismissible]="true"
+              [blockScroll]="true"
+              [autoZIndex]="true"
+              (onHide)="isMobileMenuOpen = false"
+              styleClass="w-20rem custom-sidebar">
+        <ng-template pTemplate="content" style="background-color:#fbc30d !important;">
+            
+            <div class="relative mb-4">
+                <div class="menu-header-bg"></div>
+                <div class="header-content">
+                    <img src="https://placehold.co/100x100/ffffff/000000?text=User" alt="User">
+                    <div>
+                        <h2>{{logoText}}</h2>
+                        <p>Fabrica de inflables</p>
+                    </div>
+                </div>
+            </div>
+
+            <div class="menu-items-container">
+                @for (item of getMobileMenuItems(); track item.id) {
+                          <a [routerLink]="item.routerLink" 
+                              (click)="onMenuItemClick(item, $event)"
+                              routerLinkActive="active-route" [routerLinkActiveOptions]="{ exact: true }"
+                       class="menu-item-link">
+                        
+                        @if (currentMenu.showIcons && item.icon) {
+                            <i [class]="item.icon"></i>
+                        }
+                        
+                        <span>{{ item.label }}</span>
+                    </a>
+                }
+            </div>
+            
+            <div class="language-section">
+                <select [(ngModel)]="seleccionada" (change)="cambiaLang(seleccionada)" class="custom-select">
+                    @for (lang of langs; track lang) {
+                        <option [value]="lang">{{ lang }}</option>
+                    }
+                </select>
+            </div>
+
+        </ng-template>
+    </p-drawer>
+
+        <!-- Drawer Carrito (derecha) -->
+         @if(islogin) {
+        <p-drawer [(visible)]="isCartOpen"
+                            position="right"
+                            [modal]="true"
+                            [dismissible]="true"
+                            [blockScroll]="true"
+                            [autoZIndex]="true"
+                            (onHide)="isCartOpen = false"
+                            styleClass="w-22rem cart-sidebar">
+
+            <ng-template  pTemplate="header">
+                <div class="cart-header">
+                    <span>Tu Carrito</span>
+                    <button class="close-cart" (click)="closeCart()">×</button>
+                </div>
+            </ng-template>
+            <ng-template pTemplate="content">
+                <div class="cart-items">
+                    @if (cartItems.length === 0) {
+                        <div class="cart-empty">Tu carrito está vacío.</div>
+                    } @else {
+                        @for (ci of cartItems; track ci.id) {
+                            <div class="cart-item">
+                                <div class="cart-item-info">
+                                    <span class="name">{{ ci.name }}</span>
+                                    <small class="meta">x{{ ci.qty }}</small>
+                                </div>
+                                <div class="cart-item-actions">
+                                    <span class="price">{{ ci.price | currency:'USD':'symbol':'1.0-0' }}</span>
+                                </div>
+                            </div>
+                        }
+                    }
+                </div>
+                <div class="cart-footer">
+                    <div class="total-row">
+                        <span>Total</span>
+                        <strong>{{ getCartTotal() | currency:'USD':'symbol':'1.0-0' }}</strong>
+                    </div>
+                    <div class="actions">
+                        <button class="btn btn-primary" (click)="goToCheckout()">Pagar</button>
+                    </div>
+                </div>
+            </ng-template>
+        </p-drawer>
+         }
+</header>

package/projects/lib-common-angular/src/lib/componentes/landingPages/molecules/ecommerce1/header-ecommerce1/header-ecommerce1.scss

@@ -0,0 +1,287 @@
+@use '../../../../../../../../../theme/variables.scss' as vars;
+/* Variables de color (Hardcoded para asegurar el diseño) */
+
+$text-color: #333;
+
+$colorTextos3: #ffffff;
+$sombra1: 0 4px 15px rgba(0,0,0,0.1);
+/* Variables de color (Hardcoded para asegurar el diseño) */
+
+$text-color: #333;
+
+$colorTextos3: #ffffff;
+$sombra1: 0 4px 15px rgba(0,0,0,0.1);
+
+
+/* --- ESTILOS DEL NAVBAR DESKTOP (Ya existentes) --- */
+.bg-brand-yellow { background-color: vars.$brand-yellow-zigma !important; }
+.bg-brand-blue { background-color: vars.$brand-blue-zigma !important; }
+.main-nav {
+    background-color: vars.$brand-blue-zigma;
+    border-radius: 24px;
+    box-shadow: 0 10px 30px rgba(0,0,0,0.18);
+}
+.header-top { background-color: vars.$brand-yellow-zigma; color: black; }
+.main-nav-link {
+   color: white;
+    transition: color 0.2s ease, text-shadow 0.2s ease;
+    font-size: 1.05rem; /* ligeramente más grande */
+    letter-spacing: 0.2px;
+    text-shadow: 0 1px 0 rgba(0,0,0,0.15);
+    padding: 0.4rem 0.6rem; /* más aire alrededor del texto */
+    border-radius: 12px;
+    &:hover {
+        color: vars.$brand-yellow-zigma;
+        text-shadow: 0 2px 6px rgba(0,0,0,0.25);
+        background: rgba(255,255,255,0.08);
+    }
+}
+.logo-center {
+    text-shadow: 3px 3px 0 rgba(0,0,0,0.25), -1px -1px 0 rgba(255,255,255,0.15);
+    letter-spacing: 0.4px;
+}
+
+/* Asegurar que el logo conserve colores originales y proporción */
+.logo-img {
+    height: 6rem;
+    width: auto;
+    object-fit: contain;
+    display: block;
+    filter: none !important; /* Evitar filtros que alteren color */
+}
+.logo-img-mobile {
+    height: 4rem;
+    width: auto;
+    object-fit: contain;
+    display: block;
+    filter: none !important;
+}
+
+/* --- ESTILOS DEL SIDEBAR MÓVIL (PrimeNG Drawer) --- */
+
+:host ::ng-deep .custom-sidebar, .custom-sidebar {
+    /* OJO: En v18 la clase de contenido puede ser p-drawer-content */
+    /* Fuerza fondo amarillo en contenedor y contenido */
+    .p-drawer, .p-drawer-content {
+        background-color: vars.$brand-yellow-zigma !important;
+        color: #1a1a1a;
+    }
+    .p-drawer-content {
+        padding: 0 !important;
+        overflow-x: hidden;
+        overflow-y: auto; /* Permitir scroll interno del contenido */
+        min-height: 100%;
+        max-height: 100vh; /* Limitar al alto de la ventana */
+    }
+
+    /* Overlay y posicionamiento */
+    .p-drawer {
+        background-color: vars.$brand-yellow-zigma !important;
+        position: fixed !important;
+        top: 0;
+        left: 0;
+        height: 100vh;
+        z-index: 1100;
+    }
+
+    .p-drawer-mask {
+        position: fixed !important;
+        inset: 0;
+        z-index: 1090;
+        background: rgba(0,0,0,0.35);
+        backdrop-filter: blur(1px);
+    }
+    
+    /* Permite scroll vertical pero gestos horizontales desde el borde */
+    touch-action: pan-y;
+    .p-drawer-close-button {
+        color: white !important;
+        z-index: 100;
+        position: absolute; /* Aseguramos posición */
+        top: 10px; 
+        right: 10px;
+        background: rgba(0,0,0,0.1);
+    }
+}
+
+/* Drawer Carrito (derecha) */
+:host ::ng-deep .cart-sidebar, .cart-sidebar {
+    .p-drawer {
+        position: fixed !important;
+        right: 0;
+        top: 0;
+        height: 100vh;
+        z-index: 1100;
+    }
+    .p-drawer-content {
+        background: #ffffff;
+        padding: 0 !important;
+        display: flex;
+        flex-direction: column;
+        min-height: 100%;
+    }
+    .cart-header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 12px 16px;
+        background: vars.$brand-blue-zigma;
+        color: #fff;
+        font-weight: 600;
+    }
+    .close-cart {
+        background: transparent;
+        border: none;
+        color: #fff;
+        font-size: 22px;
+        cursor: pointer;
+    }
+    .cart-items {
+        padding: 12px 12px 0 12px;
+        flex: 1;
+        overflow-y: auto;
+    }
+    .cart-item {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 10px 8px;
+        border-bottom: 1px solid #eee;
+    }
+    .cart-item-info .name { font-weight: 600; }
+    .cart-item-info .meta { color: #888; margin-left: 8px; }
+    .cart-item-actions .price { font-weight: 600; }
+    .cart-empty { color: #666; padding: 16px; text-align: center; }
+    .cart-footer {
+        padding: 12px 16px 16px 16px;
+        border-top: 1px solid #eee;
+        background: #fafafa;
+    }
+    .cart-footer .total-row {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 10px;
+    }
+    .cart-footer .actions .btn {
+        width: 100%;
+        padding: 10px 12px;
+        border: none;
+        border-radius: 8px;
+        background: vars.$brand-blue-zigma;
+        color: #fff;
+        font-weight: 600;
+        cursor: pointer;
+    }
+}
+/* --- Encabezado dentro del menú móvil --- */
+.menu-header-bg {
+    height: 180px;
+    width: 350px; /* Un poco más ancho para asegurar cobertura */
+    background: vars.$brand-blue-zigma; /* Usando color azul de tema */
+    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
+    transform: rotate(-15deg);
+    border-radius: 10px 10px 10px 50px;
+    margin-left: -18px;
+    margin-top: -50px;
+    margin-bottom: 20px; /* Reducido un poco */
+    position: relative;
+    z-index: 0;
+}
+
+.header-content {
+    position: absolute;
+    top: 40px;
+    left: 20px;
+    display: flex;
+    align-items: center;
+    z-index: 1; /* Encima del fondo */
+    
+    img {
+        width: 70px; /* Ajustado ligeramente */
+        height: 70px;
+        border-radius: 50%;
+        margin-right: 14px;
+        background: white;
+        padding: 2px;
+        object-fit: cover;
+    }
+
+    h2 {
+        font-weight: 600;
+        color: white; /* Texto blanco sobre fondo azul */
+        margin: 0;
+        font-size: 1.2rem;
+    }
+
+    p {
+        font-size: 13px;
+        color: rgba(255,255,255,0.8);
+        margin: 2px 0 0 0;
+        letter-spacing: 0.4px;
+    }
+}
+
+/* Lista de items del menú */
+.menu-items-container {
+    flex-grow: 1; /* Ocupa el espacio disponible */
+    padding: 0 10px;
+    padding-top: 40px; /* Bajar más el primer item para evitar solapamiento */
+}
+
+.menu-item-link {
+    display: flex;
+    align-items: center;
+    padding: 15px 20px;
+    color: #666;
+    text-decoration: none;
+    font-weight: 500;
+    transition: all 0.2s;
+    border-radius: 0 25px 25px 0; /* Efecto redondeado a la derecha como Ionic */
+    margin-bottom: 5px;
+
+    i {
+        width: 25px;
+        text-align: center;
+        margin-right: 15px;
+        color: #86979f;
+        font-size: 1.2rem;
+    }
+
+    /* Estado Activo (Router Link Active) */
+    &.active-route {
+        background-color: rgba(vars.$brand-blue-zigma, 0.1);
+        color: vars.$brand-blue-zigma;
+        border-left: 5px solid vars.$brand-blue-zigma;
+        
+        i {
+            color: vars.$brand-blue-zigma;
+        }
+    }
+
+    &:hover {
+        background-color: #f5f5f5;
+    }
+}
+
+/* Selector de Lenguaje */
+.language-section {
+    padding: 20px;
+    border-top: 1px solid #f0f0f0;
+    
+    .custom-select {
+        width: 100%;
+        padding: 10px;
+        border: 1px solid #ddd;
+        border-radius: 8px;
+        background: white;
+        color: #555;
+    }
+}
+
+.shopping-cart{
+    color: #ffffff;
+    &:hover {
+        color: vars.$brand-yellow-zigma;
+    }
+}