lib-common-angular 0.0.9 → 0.0.11

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

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

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

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

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

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