lib-common-angular 0.0.12 → 0.0.15

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

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

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

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