valtech-components 2.0.1008 → 2.0.1009

package/fesm2022/valtech-components.mjs

@@ -54,7 +54,7 @@ import 'prismjs/components/prism-json';
  * Current version of valtech-components.
  * This is automatically updated during the publish process.
  */
-const VERSION = '2.0.1008';
+const VERSION = '2.0.1009';
 
 // Control de estado de refresco (singleton a nivel de módulo)
 let isRefreshing = false;
@@ -46700,7 +46700,7 @@ class AccountViewComponent {
                     {
                         text: this.tt('orgsNewCta'),
                         color: 'primary',
-                        fill: 'outline',
+                        fill: 'solid',
                         shape: 'round',
                         size: 'default',
                         type: 'button',
@@ -54033,7 +54033,7 @@ class AuthBackgroundComponent {
         this.config = computed(() => {
             const props = this._props();
             return {
-                waveCount: props.waveCount ?? 45,
+                waveCount: props.waveCount ?? 16,
                 waveColors: props.waveColors ?? this.defaultColors,
                 showGrain: props.showGrain !== false,
                 showGlass: props.showGlass !== false,
@@ -54050,9 +54050,13 @@ class AuthBackgroundComponent {
         const newWaves = Array.from({ length: count }, (_, i) => {
             // Distribuir uniforme a lo largo del viewBox (0..800) — sin huecos arriba
             const y = ((i + 0.5) / count) * 800;
-            const isThick = i % 5 === 0;
-            const isMedium = i % 3 === 0 && !isThick;
-            const amplitude = 10 + Math.random() * 20;
+            // Tiers (look "aurora"): pocas hero gruesas y luminosas, algunas mid, el
+            // resto tenues de fondo. Acentos de marca en las hero + alguna suelta.
+            const isHero = i % 5 === 0;
+            const isMedium = !isHero && i % 2 === 0;
+            const accent = isHero || i % 7 === 3;
+            // Hero más amplias para cintas que "respiran"; el resto, contenidas.
+            const amplitude = isHero ? 22 + Math.random() * 18 : 10 + Math.random() * 16;
             // Frecuencia ENTERA (ciclos completos sobre el ancho 1440). Imprescindible
             // para el loop seamless: con freq entero, path(x) === path(x ± 1440), así
             // el translateX de una vuelta (1440px) calza exacto y NO hay salto/corte.
@@ -54070,8 +54074,10 @@ class AuthBackgroundComponent {
                 id: i,
                 path,
                 color,
-                thickness: isThick ? 1.2 : isMedium ? 0.7 : 0.3,
-                opacity: isThick ? 0.5 : isMedium ? 0.4 : 0.3,
+                thickness: isHero ? 2.2 + Math.random() * 0.8 : isMedium ? 1 : 0.5,
+                opacity: isHero ? 0.55 : isMedium ? 0.3 : 0.16,
+                glow: isHero,
+                accent,
                 // Drift vertical sutil (no "equalizer"): da vida sin saltos.
                 bob: 4 + Math.random() * 10,
                 // Flujo horizontal continuo. Duraciones variadas = parallax/profundidad.
@@ -54094,6 +54100,16 @@ class AuthBackgroundComponent {
       }
       <div class="wave-bg">
         <svg class="waves" viewBox="0 0 1440 800" preserveAspectRatio="none">
+          <defs>
+            <!-- Halo: blur por debajo del trazo nítido = cinta luminosa. -->
+            <filter id="wave-glow" x="-10%" y="-60%" width="120%" height="220%">
+              <feGaussianBlur stdDeviation="2.6" result="b" />
+              <feMerge>
+                <feMergeNode in="b" />
+                <feMergeNode in="SourceGraphic" />
+              </feMerge>
+            </filter>
+          </defs>
           @for (wave of waves(); track wave.id) {
             <path
               [attr.d]="wave.path"
@@ -54101,6 +54117,8 @@ class AuthBackgroundComponent {
               [attr.stroke-width]="wave.thickness"
               [class.travel-left]="wave.travelDirection === 'left'"
               [class.travel-right]="wave.travelDirection === 'right'"
+              [class.glow]="wave.glow"
+              [class.accent]="wave.accent"
               [style.opacity]="wave.opacity"
               [style.--bob]="wave.bob + 'px'"
               [style.--travel-duration]="wave.travelDuration + 's'"
@@ -54114,7 +54132,7 @@ class AuthBackgroundComponent {
         <ng-content></ng-content>
       </div>
     </section>
-  `, isInline: true, styles: [":host{display:block;--auth-bg-start: #ffffff;--auth-bg-mid: #f8f9fa;--auth-bg-end: #f0f0f0;--auth-glass-bg: rgba(255, 255, 255, .3);--auth-grain-opacity: .035;--auth-wave-color: var(--ion-color-primary, #6366f1)}:host-context(body.dark),:host-context(.dark),:host-context(.ion-palette-dark),:host-context(html.ion-palette-dark),:host-context([data-theme=\"dark\"]){--auth-bg-start: #0f0f1a;--auth-bg-mid: #1a1a2e;--auth-bg-end: #16213e;--auth-glass-bg: rgba(0, 0, 0, .3);--auth-grain-opacity: .05;--auth-wave-color: var(--ion-color-primary, #818cf8)}.auth-background{position:relative;display:flex;align-items:center;padding:0;background:linear-gradient(135deg,var(--auth-bg-start) 0%,var(--auth-bg-mid) 50%,var(--auth-bg-end) 100%);overflow:hidden}.grain{position:absolute;inset:0;pointer-events:none;z-index:0;opacity:var(--auth-grain-opacity);background-image:url(\"data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.5' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E\")}.glass-layer{position:absolute;inset:0;pointer-events:none;z-index:1;background:var(--auth-glass-bg);backdrop-filter:blur(3px) saturate(120%);-webkit-backdrop-filter:blur(3px) saturate(120%)}.wave-bg{position:absolute;inset:0;pointer-events:none;z-index:0;transition:filter .3s ease}:host-context(body.dark) .wave-bg,:host-context(.dark) .wave-bg,:host-context(.ion-palette-dark) .wave-bg,:host-context(html.ion-palette-dark) .wave-bg,:host-context([data-theme=\"dark\"]) .wave-bg{filter:invert(1) opacity(.6)}.waves{width:100%;height:100%;overflow:visible}.waves path{fill:none;will-change:transform;animation:wave-flow-right var(--travel-duration, 18s) linear var(--travel-delay, 0s) infinite}.waves path.travel-left{animation:wave-flow-left var(--travel-duration, 18s) linear var(--travel-delay, 0s) infinite}@keyframes wave-flow-right{0%{transform:translate(0)}25%{transform:translate(-360px,calc(var(--bob, 0px) * -1))}50%{transform:translate(-720px)}75%{transform:translate(-1080px,var(--bob, 0px))}to{transform:translate(-1440px)}}@keyframes wave-flow-left{0%{transform:translate(0)}25%{transform:translate(360px,var(--bob, 0px))}50%{transform:translate(720px)}75%{transform:translate(1080px,calc(var(--bob, 0px) * -1))}to{transform:translate(1440px)}}@media (prefers-reduced-motion: reduce){.waves path{animation:none}}.content-layer{position:relative;z-index:2;width:100%;height:100%;display:flex;align-items:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
+  `, isInline: true, styles: [":host{display:block;--auth-bg-start: #ffffff;--auth-bg-mid: #f8f9fa;--auth-bg-end: #f0f0f0;--auth-glass-bg: rgba(255, 255, 255, .3);--auth-grain-opacity: .035;--auth-wave-color: var(--ion-color-primary, #6366f1)}:host-context(body.dark),:host-context(.dark),:host-context(.ion-palette-dark),:host-context(html.ion-palette-dark),:host-context([data-theme=\"dark\"]){--auth-bg-start: #0f0f1a;--auth-bg-mid: #1a1a2e;--auth-bg-end: #16213e;--auth-glass-bg: rgba(0, 0, 0, .3);--auth-grain-opacity: .05;--auth-wave-color: var(--ion-color-primary, #818cf8)}.auth-background{position:relative;display:flex;align-items:center;padding:0;background:linear-gradient(135deg,var(--auth-bg-start) 0%,var(--auth-bg-mid) 50%,var(--auth-bg-end) 100%);overflow:hidden}.grain{position:absolute;inset:0;pointer-events:none;z-index:0;opacity:var(--auth-grain-opacity);background-image:url(\"data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.5' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E\")}.glass-layer{position:absolute;inset:0;pointer-events:none;z-index:1;background:var(--auth-glass-bg);backdrop-filter:blur(3px) saturate(120%);-webkit-backdrop-filter:blur(3px) saturate(120%)}.wave-bg{position:absolute;inset:0;pointer-events:none;z-index:0;transition:filter .3s ease}:host-context(body.dark) .wave-bg,:host-context(.dark) .wave-bg,:host-context(.ion-palette-dark) .wave-bg,:host-context(html.ion-palette-dark) .wave-bg,:host-context([data-theme=\"dark\"]) .wave-bg{filter:invert(1) opacity(.6)}.waves{width:100%;height:100%;overflow:visible;-webkit-mask-image:linear-gradient(to right,transparent 0%,#000 16%,#000 84%,transparent 100%);mask-image:linear-gradient(to right,transparent 0%,#000 16%,#000 84%,transparent 100%)}.waves path{fill:none;stroke-linecap:round;will-change:transform;animation:wave-flow-right var(--travel-duration, 18s) linear var(--travel-delay, 0s) infinite}.waves path.travel-left{animation:wave-flow-left var(--travel-duration, 18s) linear var(--travel-delay, 0s) infinite}.waves path.accent{stroke:var(--auth-wave-color)}.waves path.glow{filter:url(#wave-glow)}@keyframes wave-flow-right{0%{transform:translate(0)}25%{transform:translate(-360px,calc(var(--bob, 0px) * -1))}50%{transform:translate(-720px)}75%{transform:translate(-1080px,var(--bob, 0px))}to{transform:translate(-1440px)}}@keyframes wave-flow-left{0%{transform:translate(0)}25%{transform:translate(360px,var(--bob, 0px))}50%{transform:translate(720px)}75%{transform:translate(1080px,calc(var(--bob, 0px) * -1))}to{transform:translate(1440px)}}@media (prefers-reduced-motion: reduce){.waves path{animation:none}}.content-layer{position:relative;z-index:2;width:100%;height:100%;display:flex;align-items:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AuthBackgroundComponent, decorators: [{
             type: Component,
@@ -54128,6 +54146,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
       }
       <div class="wave-bg">
         <svg class="waves" viewBox="0 0 1440 800" preserveAspectRatio="none">
+          <defs>
+            <!-- Halo: blur por debajo del trazo nítido = cinta luminosa. -->
+            <filter id="wave-glow" x="-10%" y="-60%" width="120%" height="220%">
+              <feGaussianBlur stdDeviation="2.6" result="b" />
+              <feMerge>
+                <feMergeNode in="b" />
+                <feMergeNode in="SourceGraphic" />
+              </feMerge>
+            </filter>
+          </defs>
           @for (wave of waves(); track wave.id) {
             <path
               [attr.d]="wave.path"
@@ -54135,6 +54163,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
               [attr.stroke-width]="wave.thickness"
               [class.travel-left]="wave.travelDirection === 'left'"
               [class.travel-right]="wave.travelDirection === 'right'"
+              [class.glow]="wave.glow"
+              [class.accent]="wave.accent"
               [style.opacity]="wave.opacity"
               [style.--bob]="wave.bob + 'px'"
               [style.--travel-duration]="wave.travelDuration + 's'"
@@ -54148,7 +54178,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
         <ng-content></ng-content>
       </div>
     </section>
-  `, styles: [":host{display:block;--auth-bg-start: #ffffff;--auth-bg-mid: #f8f9fa;--auth-bg-end: #f0f0f0;--auth-glass-bg: rgba(255, 255, 255, .3);--auth-grain-opacity: .035;--auth-wave-color: var(--ion-color-primary, #6366f1)}:host-context(body.dark),:host-context(.dark),:host-context(.ion-palette-dark),:host-context(html.ion-palette-dark),:host-context([data-theme=\"dark\"]){--auth-bg-start: #0f0f1a;--auth-bg-mid: #1a1a2e;--auth-bg-end: #16213e;--auth-glass-bg: rgba(0, 0, 0, .3);--auth-grain-opacity: .05;--auth-wave-color: var(--ion-color-primary, #818cf8)}.auth-background{position:relative;display:flex;align-items:center;padding:0;background:linear-gradient(135deg,var(--auth-bg-start) 0%,var(--auth-bg-mid) 50%,var(--auth-bg-end) 100%);overflow:hidden}.grain{position:absolute;inset:0;pointer-events:none;z-index:0;opacity:var(--auth-grain-opacity);background-image:url(\"data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.5' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E\")}.glass-layer{position:absolute;inset:0;pointer-events:none;z-index:1;background:var(--auth-glass-bg);backdrop-filter:blur(3px) saturate(120%);-webkit-backdrop-filter:blur(3px) saturate(120%)}.wave-bg{position:absolute;inset:0;pointer-events:none;z-index:0;transition:filter .3s ease}:host-context(body.dark) .wave-bg,:host-context(.dark) .wave-bg,:host-context(.ion-palette-dark) .wave-bg,:host-context(html.ion-palette-dark) .wave-bg,:host-context([data-theme=\"dark\"]) .wave-bg{filter:invert(1) opacity(.6)}.waves{width:100%;height:100%;overflow:visible}.waves path{fill:none;will-change:transform;animation:wave-flow-right var(--travel-duration, 18s) linear var(--travel-delay, 0s) infinite}.waves path.travel-left{animation:wave-flow-left var(--travel-duration, 18s) linear var(--travel-delay, 0s) infinite}@keyframes wave-flow-right{0%{transform:translate(0)}25%{transform:translate(-360px,calc(var(--bob, 0px) * -1))}50%{transform:translate(-720px)}75%{transform:translate(-1080px,var(--bob, 0px))}to{transform:translate(-1440px)}}@keyframes wave-flow-left{0%{transform:translate(0)}25%{transform:translate(360px,var(--bob, 0px))}50%{transform:translate(720px)}75%{transform:translate(1080px,calc(var(--bob, 0px) * -1))}to{transform:translate(1440px)}}@media (prefers-reduced-motion: reduce){.waves path{animation:none}}.content-layer{position:relative;z-index:2;width:100%;height:100%;display:flex;align-items:center}\n"] }]
+  `, styles: [":host{display:block;--auth-bg-start: #ffffff;--auth-bg-mid: #f8f9fa;--auth-bg-end: #f0f0f0;--auth-glass-bg: rgba(255, 255, 255, .3);--auth-grain-opacity: .035;--auth-wave-color: var(--ion-color-primary, #6366f1)}:host-context(body.dark),:host-context(.dark),:host-context(.ion-palette-dark),:host-context(html.ion-palette-dark),:host-context([data-theme=\"dark\"]){--auth-bg-start: #0f0f1a;--auth-bg-mid: #1a1a2e;--auth-bg-end: #16213e;--auth-glass-bg: rgba(0, 0, 0, .3);--auth-grain-opacity: .05;--auth-wave-color: var(--ion-color-primary, #818cf8)}.auth-background{position:relative;display:flex;align-items:center;padding:0;background:linear-gradient(135deg,var(--auth-bg-start) 0%,var(--auth-bg-mid) 50%,var(--auth-bg-end) 100%);overflow:hidden}.grain{position:absolute;inset:0;pointer-events:none;z-index:0;opacity:var(--auth-grain-opacity);background-image:url(\"data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.5' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E\")}.glass-layer{position:absolute;inset:0;pointer-events:none;z-index:1;background:var(--auth-glass-bg);backdrop-filter:blur(3px) saturate(120%);-webkit-backdrop-filter:blur(3px) saturate(120%)}.wave-bg{position:absolute;inset:0;pointer-events:none;z-index:0;transition:filter .3s ease}:host-context(body.dark) .wave-bg,:host-context(.dark) .wave-bg,:host-context(.ion-palette-dark) .wave-bg,:host-context(html.ion-palette-dark) .wave-bg,:host-context([data-theme=\"dark\"]) .wave-bg{filter:invert(1) opacity(.6)}.waves{width:100%;height:100%;overflow:visible;-webkit-mask-image:linear-gradient(to right,transparent 0%,#000 16%,#000 84%,transparent 100%);mask-image:linear-gradient(to right,transparent 0%,#000 16%,#000 84%,transparent 100%)}.waves path{fill:none;stroke-linecap:round;will-change:transform;animation:wave-flow-right var(--travel-duration, 18s) linear var(--travel-delay, 0s) infinite}.waves path.travel-left{animation:wave-flow-left var(--travel-duration, 18s) linear var(--travel-delay, 0s) infinite}.waves path.accent{stroke:var(--auth-wave-color)}.waves path.glow{filter:url(#wave-glow)}@keyframes wave-flow-right{0%{transform:translate(0)}25%{transform:translate(-360px,calc(var(--bob, 0px) * -1))}50%{transform:translate(-720px)}75%{transform:translate(-1080px,var(--bob, 0px))}to{transform:translate(-1440px)}}@keyframes wave-flow-left{0%{transform:translate(0)}25%{transform:translate(360px,var(--bob, 0px))}50%{transform:translate(720px)}75%{transform:translate(1080px,calc(var(--bob, 0px) * -1))}to{transform:translate(1440px)}}@media (prefers-reduced-motion: reduce){.waves path{animation:none}}.content-layer{position:relative;z-index:2;width:100%;height:100%;display:flex;align-items:center}\n"] }]
         }], ctorParameters: () => [], propDecorators: { props: [{
                 type: Input
             }] } });