lib-common-angular 0.0.12 → 0.0.14

package/projects/lib-common-angular/src/lib/componentes/shared/atoms/loading-zigma/loading-zigma.html

@@ -1,37 +0,0 @@
-<div id="castle-loader">
-  <!-- BASE INFERIOR (Morada, la más baja) -->
-  <div class="base"></div>
-
-  <!-- Franja Azul (Segunda capa) -->
-  <div class="blue-stripe"></div>
-
-  <!-- ALMENAS (Moradas, sección dentada) -->
-  <div class="battlements"></div>
-
-  <!-- Torre Lateral Izquierda (Roja) -->
-  <div class="tower-side left">
-    <div class="roof"></div>
-    <!-- Techo triangular amarillo -->
-    <div class="flag"></div>
-  </div>
-
-  <!-- Torre Lateral Derecha (Roja) -->
-  <div class="tower-side right">
-    <div class="roof"></div>
-    <!-- Techo triangular amarillo -->
-    <div class="flag"></div>
-  </div>
-
-  <!-- Torre Central (Amarilla con techo azul) -->
-  <div class="tower-center">
-    <div class="roof"></div>
-    <!-- Techo triangular azul -->
-    <div class="flag"></div>
-  </div>
-
-  <!-- Texto de Carga, ahora dentro del contenedor del castillo -->
-  <div class="loading-text">
-    <span class="word-zigma">ZIGMA</span>
-    <span class="word-inflables">INFLABLES</span>
-  </div>
-</div>

package/projects/lib-common-angular/src/lib/componentes/shared/atoms/loading-zigma/loading-zigma.scss

@@ -1,346 +0,0 @@
-/* * Variables de color
-* Extraídas directamente de la imagen de referencia.
-*/
-:host {
-    --color-red-tower: #d33c56;     /* Rojo/Fucsia */
-            --color-yellow-main: #fec951;   /* Amarillo principal */
-            --color-blue-roof: #3d86cc;     /* Azul cúpulas */
-            --color-purple-base: #6a3493;   /* Morado base/almenas */
-            --color-blue-stripe: #3c54a3;   /* Azul oscuro de la franja central */
-            
-            --color-black-outline: #000000; 
-            --color-white: #ffffff;
-            --color-text-fill: #272727;     
-            --color-white-outline: var(--color-white); 
-            --color-orange-bg: #f9a825; /* Fondo Naranja/Amarillo */
-            --outline-width: 0px; 
-            --shadow-3d: 0 4px 10px rgba(0, 0, 0, 0.2), inset 0 -4px 5px rgba(0, 0, 0, 0.2);
-}
-
-body {
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            min-height: 100vh;
-            background-color: var(--color-orange-bg); 
-            margin: 0;
-            flex-direction: column;
-            overflow-x: hidden; 
-            font-family: sans-serif;
-        }
-
-        /* Contenedor principal de la animación */
-        #castle-loader {
-            position: relative;
-            /* Ancho ajustado para compactar el diseño */
-            width: 260px; 
-            height: 200px; 
-            display: flex;
-            justify-content: center;
-            transform-style: preserve-3d;
-            
-            /* Animación de entrada inicial: Rueda desde abajo (ver @keyframes roll-in) */
-            opacity: 0;
-            animation: roll-in 0.8s ease-out forwards, sway-y 0.8s ease-in-out infinite alternate 0.8s;
-        }
-
-        /* ------------------------- 1. BASE GEOMÉTRICA SIMPLE ------------------------- */
-        
-        /* Base (Morada, la pieza inferior más grande) */
-        .base {
-            position: absolute;
-            bottom: 30px;
-            width: 90%; 
-            max-width: 300px;
-            height: 40px; 
-            background-color: var(--color-purple-base);
-            border-radius: 5px; /* Pequeño redondeo para el efecto inflable */
-            z-index: 10;
-            transform-origin: bottom;
-            transform: scaleY(0); 
-            animation: build-up 0.5s ease-out forwards;
-            
-            box-shadow: var(--shadow-3d); /* Sombra 3D */
-            border: none;
-            overflow: hidden;
-        }
-
-        /* Franja Azul (La banda horizontal sobre la base morada) */
-        .blue-stripe {
-            position: absolute;
-            bottom: 40px; 
-            width: 90%; 
-            max-width: 300px;
-            height: 10px; 
-            background-color: var(--color-blue-stripe); 
-            z-index: 11;
-            box-shadow: inset 0 1px 3px rgba(0,0,0,0.3); /* Sombra interna para volumen */
-            border: none;
-            animation: build-up 0.5s ease-out forwards 0.1s;
-        }
-        
-        /* Almenas (Moradas, la sección dentada) */
-        .battlements {
-            position: absolute;
-            bottom: 50px; 
-            width: 90%;
-            max-width: 300px;
-            height: 20px;
-            background-color: var(--color-purple-base);
-            z-index: 12;
-            box-shadow: var(--shadow-3d); /* Sombra 3D */
-            border: none;
-            border-bottom: none;
-            border-radius: 0; 
-
-            /* Máscara para las almenas */
-            mask: repeating-linear-gradient(90deg, 
-                #000 0, #000 8%, 
-                transparent 8%, transparent 12%);
-            -webkit-mask: repeating-linear-gradient(90deg, 
-                #000 0, #000 8%, 
-                transparent 8%, transparent 12%);
-            animation: build-up 0.5s ease-out forwards 0.2s;
-        }
-
-
-        /* ------------------------- 2. TORRES LATERALES (Rojas y Amarillas) ------------------------- */
-        
-        /* Contenedor de torre (Cilindro rojo, ahora cuadrado) */
-        .tower-side {
-            position: absolute;
-            bottom: 70px; 
-            width: 60px; 
-            height: 70px; 
-            background-color: var(--color-red-tower);
-            border-radius: 0; 
-            z-index: 13; 
-            transform-origin: bottom;
-            transform: scaleY(0); 
-            animation: build-up 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.3s forwards;
-            
-            box-shadow: var(--shadow-3d); /* Sombra 3D */
-            border: none;
-        }
-
-        /* AJUSTE DE POSICIÓN: Pegadas al centro (30px) */
-        .left { left: 30px; } 
-        .right { right: 30px; } 
-
-        /* Línea AZUL CLARA en el borde inferior del techo amarillo (Torres Laterales) */
-        .tower-side::before {
-            content: '';
-            position: absolute;
-            top: -4px; 
-            left: -5px; 
-            width: 70px; 
-            height: 4px; 
-            background-color: var(--color-blue-roof); 
-            z-index: 14; 
-            display: block;
-            box-shadow: 0 1px 3px rgba(0,0,0,0.3); /* Pequeña sombra a la línea */
-        }
-
-        /* Gorro de las Torres Latelales (Techo triangular Amarillo) */
-        .tower-side .roof {
-            position: absolute;
-            top: -40px; 
-            left: 50%;
-            transform: translateX(-50%);
-            width: 0;
-            height: 0;
-            border-left: 35px solid transparent;
-            border-right: 35px solid transparent;
-            border-bottom: 40px solid var(--color-yellow-main); /* Triángulo */
-            overflow: hidden;
-            z-index: 15;
-            box-shadow: none;
-        }
-        
-        /* Bandera lateral */
-        .tower-side .flag {
-            position: absolute;
-            top: -65px; 
-            right: -10px; 
-            width: 0;
-            height: 0;
-            border-top: 5px solid transparent;
-            border-bottom: 5px solid transparent;
-            border-right: 8px solid var(--color-blue-roof); 
-            z-index: 17;
-            transform-origin: 0 50%; 
-            animation: flag-wave 0.6s infinite alternate;
-            box-shadow: none;
-            border: none; 
-        }
-        .tower-side.right .flag { 
-            right: auto; 
-            left: -10px;
-            border-left: 8px solid var(--color-blue-roof); 
-            border-right: none;
-            transform-origin: 100% 50%; 
-            animation: flag-wave 0.6s infinite alternate 0.1s; 
-        } 
-        /* Poste de la bandera lateral ELIMINADO */
-        .tower-side .flag::before {
-            content: none;
-        }
-        
-
-
-        /* ------------------------- 3. TORRE CENTRAL (Amarilla) ------------------------- */
-        .tower-center {
-            position: absolute;
-            bottom: 70px; 
-            width: 80px; 
-            height: 80px; 
-            background-color: var(--color-yellow-main);
-            border-radius: 0;
-            z-index: 18;
-            transform-origin: bottom;
-            transform: scaleY(0); 
-            animation: build-up 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.6s forwards;
-            
-            box-shadow: var(--shadow-3d); /* Sombra 3D */
-            border: none;
-        }
-
-        /* LÍNEA ROJA BAJO EL TRIÁNGULO AZUL CENTRAL */
-        .tower-center::after {
-            content: '';
-            position: absolute;
-            top: -10px; 
-            left: 0;
-            width: 100%;
-            height: 5px; 
-            background-color: var(--color-red-tower);
-            z-index: 19;
-            box-sizing: content-box;
-            box-shadow: 0 1px 3px rgba(0,0,0,0.3); /* Pequeña sombra a la línea */
-            border: none;
-            border-radius: 0;
-        }
-
-
-        /* Techo de la Torre Central (Azul, cónico) */
-        .tower-center .roof {
-            position: absolute;
-            top: -60px; 
-            left: 50%;
-            transform: translateX(-50%);
-            width: 0; 
-            height: 0; 
-            border-left: 50px solid transparent;
-            border-right: 50px solid transparent;
-            border-bottom: 60px solid var(--color-blue-roof); /* Triángulo */
-            overflow: hidden;
-            z-index: 20;
-            box-shadow: none;
-        }
-
-        /* Bandera de la Torre Central */
-        .tower-center .flag {
-            position: absolute;
-            top: -80px; 
-            left: 50%;
-            transform: translateX(-50%);
-            width: 0;
-            height: 0;
-            border-top: 5px solid transparent;
-            border-bottom: 5px solid transparent;
-            border-right: 8px solid var(--color-blue-roof); /* Bandera azul */
-            box-shadow: none; 
-            z-index: 21;
-            animation: flag-wave 0.6s infinite alternate 0.2s;
-            border: none; 
-        }
-        /* Poste de la bandera central ELIMINADO */
-        .tower-center .flag::before {
-            content: none;
-        }
-        
-        /* ------------------------- 4. TIPOGRAFÍA (Comic Sans MS) ------------------------- */
-        .loading-text {
-            position: absolute; 
-            bottom: -15px; 
-            width: 100%; 
-            font-family: 'Comic Sans MS', cursive, sans-serif; 
-            font-weight: 900; 
-            color: var(--color-text-fill); 
-            line-height: 0.8; 
-            text-align: center; 
-            z-index: 30; 
-        }
-
-        .loading-text .word-zigma {
-            display: block; 
-            font-size: 3.8em; 
-            text-shadow: 
-                /* Contorno Blanco Grueso */
-                -3px -3px 0 var(--color-white-outline), 3px -3px 0 var(--color-white-outline), 
-                -3px 3px 0 var(--color-white-outline), 3px 3px 0 var(--color-white-outline),
-                0 -3px 0 var(--color-white-outline), 0 3px 0 var(--color-white-outline),
-                -3px 0 0 var(--color-white-outline), 3px 0 0 var(--color-white-outline),
-                
-                /* Sombra 3D Inflable (Amarillo principal) */
-                4px 4px 0 var(--color-yellow-main), 
-                
-                /* Sombra Exterior NEGRA */
-                6px 6px 6px rgba(0, 0, 0, 0.4); 
-            animation: bounce-text 0.4s infinite alternate; 
-        }
-
-        .loading-text .word-inflables {
-            display: block; 
-            font-size: 1.6em; 
-            margin-top: 5px;
-            text-shadow: 
-                /* Contorno Blanco Delgado */
-                -2px -2px 0 var(--color-white-outline), 2px -2px 0 var(--color-white-outline), 
-                -2px 2px 0 var(--color-white-outline), 2px 2px 0 var(--color-white-outline),
-                
-                /* Sombra 3D Inflable (Rojo de torre) */
-                2px 2px 0 var(--color-red-tower), 
-                
-                /* Sombra Exterior NEGRA */
-                4px 4px 4px rgba(0, 0, 0, 0.3); 
-            animation: bounce-text 0.4s infinite alternate 0.1s; 
-        }
-
-        /* ------------------------- KEYFRAMES ------------------------- */
-        @keyframes build-up { 
-            0% { transform: scaleY(0); opacity: 0; } 
-            100% { transform: scaleY(1); opacity: 1; } 
-        }
-        
-        @keyframes bounce-text { 
-            0% { transform: translateY(0) scale(1); } 
-            100% { transform: translateY(-8px) scale(1.02); } 
-        }
-        
-        @keyframes sway-y { 
-            0% { transform: translateY(0); } 
-            100% { transform: translateY(-8px); } 
-        }
-        
-        @keyframes flag-wave { 
-            0% { transform: rotateZ(0deg) } 
-            50% { transform: rotateZ(10deg) } 
-            100% { transform: rotateZ(-10deg) } 
-        }
-        
-        /* Animación de entrada: Rueda el castillo desde abajo */
-        @keyframes roll-in {
-            0% {
-                opacity: 0;
-                transform: translateY(100vh) rotateZ(-30deg);
-            }
-            70% {
-                opacity: 1;
-                transform: translateY(0) rotateZ(5deg);
-            }
-            100% {
-                opacity: 1;
-                transform: translateY(0) rotateZ(0deg);
-            }
-        }

package/projects/lib-common-angular/src/lib/componentes/shared/atoms/loading-zigma/loading-zigma.ts

@@ -1,11 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'lib-loading-zigma',
-  imports: [],
-  templateUrl: './loading-zigma.html',
-  styleUrl: './loading-zigma.scss',
-})
-export class LoadingZigma {
-
-}

package/projects/lib-common-angular/src/lib/componentes/shared/atoms/menu-item1/menu-item1.component.html

@@ -1,103 +0,0 @@
-@if (!item.separator) {
-  <li 
-    [class]="getItemClasses()"
-    [style]="item.style"
-    (click)="onItemClick($event)"
-    (mouseenter)="onItemHover($event)"
-    (mouseleave)="onItemLeave($event)"
-  >
-    <!-- Enlace interno -->
-    @if (item.routerLink && !item.disabled) {
-      <a 
-        [routerLink]="item.routerLink"
-        [class]="getLinkClasses()"
-        [attr.aria-label]="item.label"
-        class="menu-link"
-      >
-        @if (showIcons && item.icon) {
-          <i [class]="item.icon"></i>
-        }
-        <span class="menu-label">{{ item.label }}</span>
-        @if (showBadges && item.badge) {
-          <span [class]="getBadgeClasses()">
-            {{ item.badge }}
-          </span>
-        }
-        @if (hasSubItems) {
-          <i class="pi pi-angle-right submenu-icon"></i>
-        }
-      </a>
-    }
-
-    <!-- Enlace externo -->
-    @if (item.url && !item.disabled) {
-      <a 
-        [href]="item.url"
-        [target]="item.target || '_self'"
-        [class]="getLinkClasses()"
-        [attr.aria-label]="item.label"
-        class="menu-link"
-      >
-        @if (showIcons && item.icon) {
-          <i [class]="item.icon"></i>
-        }
-        <span class="menu-label">{{ item.label }}</span>
-        @if (showBadges && item.badge) {
-          <span [class]="getBadgeClasses()">
-            {{ item.badge }}
-          </span>
-        }
-        @if (hasSubItems) {
-          <i class="pi pi-angle-right submenu-icon"></i>
-        }
-      </a>
-    }
-
-    <!-- Elemento sin enlace -->
-    @if (!item.routerLink && !item.url) {
-      <span 
-        [class]="getLinkClasses()"
-        [attr.aria-label]="item.label"
-        class="menu-link"
-      >
-        @if (showIcons && item.icon) {
-          <i [class]="item.icon"></i>
-        }
-        <span class="menu-label">{{ item.label }}</span>
-        @if (showBadges && item.badge) {
-          <span [class]="getBadgeClasses()">
-            {{ item.badge }}
-          </span>
-        }
-        @if (hasSubItems) {
-          <i class="pi pi-angle-right submenu-icon"></i>
-        }
-      </span>
-    }
-
-    <!-- Submenús -->
-    @if (hasSubItems && isItemExpanded) {
-      <ul class="submenu">
-        @for (subItem of item.items; track $index) {
-          <app-menu-item1
-            [item]="subItem"
-            [showIcons]="showIcons"
-            [showBadges]="showBadges"
-            [collapsed]="collapsed"
-            [isItemExpanded]="isSubItemExpanded(subItem.id)"
-            [expandedItems]="expandedItems"
-            [depth]="depth + 1"
-            [maxDepth]="maxDepth"
-            [activeItemId]="activeItemId"
-            (menuEvent)="onSubMenuEvent($event)"
-          ></app-menu-item1>
-        }
-      </ul>
-    }
-  </li>
-}
-
-<!-- Separador -->
-@if (item.separator) {
-  <li class="menu-separator"></li>
-}

package/projects/lib-common-angular/src/lib/componentes/shared/atoms/menu-item1/menu-item1.component.scss

@@ -1,176 +0,0 @@
-:host {
-  display: block;
-}
-
-li {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-}
-
-.menu-link {
-  display: flex;
-  align-items: center;
-  padding: 0.75rem 1rem;
-  text-decoration: none;
-  color: inherit;
-  transition: all 0.2s ease;
-  border-radius: 0.375rem;
-  margin: 0.125rem 0.5rem;
-  cursor: pointer;
-  position: relative;
-}
-
-.menu-link:hover {
-  background-color: rgba(0, 0, 0, 0.05);
-  color: var(--primary-color, #3b82f6);
-}
-
-.menu-link-disabled {
-  opacity: 0.5;
-  pointer-events: none;
-  cursor: not-allowed;
-}
-
-.menu-link-disabled:hover {
-  background-color: transparent;
-  color: inherit;
-}
-
-.menu-item-active .menu-link {
-  background-color: var(--primary-color, #3b82f6);
-  color: white;
-}
-
-.menu-item-active .menu-link:hover {
-  background-color: var(--primary-color, #3b82f6);
-  color: white;
-}
-
-.menu-label {
-  flex: 1;
-  margin-left: 0.5rem;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.submenu-icon {
-  margin-left: auto;
-  transition: transform 0.2s ease;
-  flex-shrink: 0;
-}
-
-.menu-item:hover .submenu-icon {
-  transform: rotate(90deg);
-}
-
-.submenu {
-  list-style: none;
-  margin: 0;
-  padding-left: 1rem;
-  border-left: 1px solid rgba(0, 0, 0, 0.1);
-  overflow: hidden;
-  transition: all 0.3s ease;
-}
-
-.menu-separator {
-  height: 1px;
-  background-color: rgba(0, 0, 0, 0.1);
-  margin: 0.5rem 1rem;
-}
-
-.badge {
-  padding: 0.25rem 0.5rem;
-  border-radius: 0.25rem;
-  font-size: 0.75rem;
-  font-weight: 600;
-  margin-left: 0.5rem;
-  flex-shrink: 0;
-}
-
-.badge-primary {
-  background-color: var(--primary-color, #3b82f6);
-  color: white;
-}
-
-.badge-secondary {
-  background-color: var(--secondary-color, #6b7280);
-  color: white;
-}
-
-.badge-success {
-  background-color: var(--success-color, #10b981);
-  color: white;
-}
-
-.badge-warning {
-  background-color: var(--warning-color, #f59e0b);
-  color: white;
-}
-
-.badge-danger {
-  background-color: var(--danger-color, #ef4444);
-  color: white;
-}
-
-/* Tema oscuro */
-.theme-dark .menu-link:hover {
-  background-color: rgba(255, 255, 255, 0.1);
-}
-
-.theme-dark .menu-item-active .menu-link {
-  background-color: var(--primary-color, #3b82f6);
-  color: white;
-}
-
-.theme-dark .menu-item-active .menu-link:hover {
-  background-color: var(--primary-color, #3b82f6);
-  color: white;
-}
-
-.theme-dark .menu-separator {
-  background-color: rgba(255, 255, 255, 0.1);
-}
-
-.theme-dark .submenu {
-  border-left-color: rgba(255, 255, 255, 0.1);
-}
-
-/* Estados de hover específicos */
-.menu-item:not(.menu-item-disabled):hover .menu-link {
-  background-color: rgba(0, 0, 0, 0.05);
-  color: var(--primary-color, #3b82f6);
-}
-
-.theme-dark .menu-item:not(.menu-item-disabled):hover .menu-link {
-  background-color: rgba(255, 255, 255, 0.1);
-}
-
-/* Prevenir hover en elementos deshabilitados */
-.menu-item-disabled .menu-link:hover {
-  background-color: transparent;
-  color: inherit;
-  cursor: not-allowed;
-}
-
-/* Animaciones suaves */
-.menu-link {
-  transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
-}
-
-.submenu-icon {
-  transition: transform 0.2s ease;
-}
-
-/* Responsive */
-@media (max-width: 768px) {
-  .menu-link {
-    padding: 0.5rem 0.75rem;
-    margin: 0.0625rem 0.25rem;
-  }
-  
-  .submenu {
-    padding-left: 0.5rem;
-  }
-}