valtech-components 2.0.787 → 2.0.795

package/src/lib/components/organisms/terminal-404/terminal-404.component.ts

@@ -0,0 +1,339 @@
+import { Component, computed, inject, Input, OnInit, signal } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { RouterLink } from '@angular/router';
+import { IonButton } from '@ionic/angular/standalone';
+import { Terminal404Metadata } from './types';
+import { I18nService } from '../../../services/i18n';
+
+/**
+ * val-terminal-404
+ *
+ * A fun, terminal-styled 404 page component with typing animations.
+ *
+ * Features:
+ * - Terminal window aesthetic with colored dots
+ * - Typing animation effect with sequential line reveals
+ * - Blinking cursor
+ * - Customizable colors to match brand
+ * - Shows the attempted path
+ *
+ * @example
+ * <val-terminal-404
+ *   [props]="{
+ *     primaryColor: '#4a1d96',
+ *     homeRoute: '/',
+ *     homeButtonText: 'cd /home'
+ *   }"
+ * ></val-terminal-404>
+ */
+@Component({
+  selector: 'val-terminal-404',
+  standalone: true,
+  imports: [CommonModule, IonButton, RouterLink],
+  styles: [
+    `
+      :host {
+        display: block;
+        width: 100%;
+        --terminal-primary: var(--ion-color-primary, #4a1d96);
+        --terminal-primary-light: var(--ion-color-primary-tint, #5b21b6);
+      }
+
+      .terminal-container {
+        min-height: 70vh;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        padding: 2rem;
+        border-radius: 16px;
+      }
+
+      .terminal {
+        border-radius: 12px;
+        padding: 0;
+        max-width: 600px;
+        width: 100%;
+        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+        overflow: hidden;
+      }
+
+      .terminal-header {
+        background: #161b22;
+        padding: 12px 16px;
+        display: flex;
+        align-items: center;
+        gap: 8px;
+      }
+
+      .terminal-dot {
+        width: 12px;
+        height: 12px;
+        border-radius: 50%;
+      }
+
+      .dot-red {
+        background: #ff5f56;
+      }
+      .dot-yellow {
+        background: #ffbd2e;
+      }
+      .dot-green {
+        background: #27ca40;
+      }
+
+      .terminal-title {
+        flex: 1;
+        text-align: center;
+        color: #8b949e;
+        font-size: 0.85rem;
+        font-family: monospace;
+      }
+
+      .terminal-body {
+        padding: 24px;
+        font-family: 'Fira Code', 'Monaco', 'Consolas', monospace;
+        font-size: 0.95rem;
+        line-height: 1.8;
+      }
+
+      .line {
+        margin-bottom: 8px;
+        opacity: 0;
+        animation: fadeIn 0.3s ease forwards;
+      }
+
+      .line:nth-child(1) {
+        animation-delay: 0.2s;
+      }
+      .line:nth-child(2) {
+        animation-delay: 0.8s;
+      }
+      .line:nth-child(3) {
+        animation-delay: 1.4s;
+      }
+      .line:nth-child(4) {
+        animation-delay: 2s;
+      }
+      .line:nth-child(5) {
+        animation-delay: 2.6s;
+      }
+      .line:nth-child(6) {
+        animation-delay: 3.2s;
+      }
+
+      @keyframes fadeIn {
+        to {
+          opacity: 1;
+        }
+      }
+
+      .prompt {
+        color: #7ee787;
+      }
+
+      .command {
+        color: #c9d1d9;
+      }
+
+      .error {
+        color: #f85149;
+      }
+
+      .info {
+        color: #58a6ff;
+      }
+
+      .warning {
+        color: #d29922;
+      }
+
+      .cursor {
+        display: inline-block;
+        width: 10px;
+        height: 18px;
+        background: #7ee787;
+        margin-left: 4px;
+        animation: blink 1s step-end infinite;
+        vertical-align: text-bottom;
+      }
+
+      @keyframes blink {
+        0%,
+        100% {
+          opacity: 1;
+        }
+        50% {
+          opacity: 0;
+        }
+      }
+
+      .error-code {
+        font-size: 6rem;
+        font-weight: 900;
+        text-align: center;
+        margin: 0.5rem 0 1rem;
+        font-family: monospace;
+      }
+
+      .action-container {
+        margin-top: 2rem;
+        text-align: center;
+        opacity: 0;
+        animation: fadeIn 0.5s ease forwards;
+        animation-delay: 3.8s;
+      }
+
+      .home-button {
+        --border-radius: 8px;
+        --background: var(--terminal-primary);
+        --background-hover: var(--terminal-primary-light);
+        font-family: monospace;
+      }
+
+      .error-code {
+        color: var(--terminal-primary);
+        text-shadow: 0 0 40px color-mix(in srgb, var(--terminal-primary) 30%, transparent);
+      }
+
+      .search-icon {
+        animation: searching 2s ease-in-out infinite;
+        display: inline-block;
+      }
+
+      @keyframes searching {
+        0%,
+        100% {
+          transform: translateX(0);
+        }
+        25% {
+          transform: translateX(5px);
+        }
+        75% {
+          transform: translateX(-5px);
+        }
+      }
+    `,
+  ],
+  template: `
+    <div
+      class="terminal-container"
+      [ngStyle]="containerStyles"
+    >
+      <div class="error-code">404</div>
+
+      <div
+        class="terminal"
+        [ngStyle]="{ background: props.terminalBackground || '#0d1117' }"
+      >
+        <div class="terminal-header">
+          <div class="terminal-dot dot-red"></div>
+          <div class="terminal-dot dot-yellow"></div>
+          <div class="terminal-dot dot-green"></div>
+          <span class="terminal-title">bash - 404</span>
+        </div>
+
+        <div class="terminal-body">
+          <div class="line">
+            <span class="prompt">user&#64;app</span>
+            <span class="command">:~$ </span>
+            <span class="command">cd /{{ requestedPath() }}</span>
+          </div>
+
+          <div class="line">
+            <span class="error"
+              >bash: cd: /{{ requestedPath() }}: {{ directoryNotFound() }}</span
+            >
+          </div>
+
+          <div class="line">
+            <span class="prompt">user&#64;app</span>
+            <span class="command">:~$ </span>
+            <span class="command">sudo find / -name "{{ searchTerm() }}"</span>
+          </div>
+
+          <div class="line">
+            <span class="info"
+              ><span class="search-icon">🔍</span> {{ searching() }}</span
+            >
+          </div>
+
+          <div class="line">
+            <span class="warning">find: {{ noResults() }}</span>
+          </div>
+
+          <div class="line">
+            <span class="prompt">user&#64;app</span>
+            <span class="command">:~$ </span>
+            <span class="cursor"></span>
+          </div>
+        </div>
+      </div>
+
+      <div class="action-container">
+        <ion-button
+          class="home-button"
+          [routerLink]="props.homeRoute || '/'"
+          expand="block"
+        >
+          {{ props.homeButtonText || homeButton() }}
+        </ion-button>
+      </div>
+    </div>
+  `,
+})
+export class Terminal404Component implements OnInit {
+  @Input() props: Terminal404Metadata = {};
+
+  private i18n = inject(I18nService);
+
+  requestedPath = signal('page-not-found');
+
+  // i18n texts - t(key, namespace)
+  directoryNotFound = computed(() =>
+    this.i18n.t('directoryNotFound', 'terminal404')
+  );
+  searching = computed(() => this.i18n.t('searching', 'terminal404'));
+  noResults = computed(() => this.i18n.t('noResults', 'terminal404'));
+  searchTerm = computed(() => this.i18n.t('searchTerm', 'terminal404'));
+  homeButton = computed(() => this.i18n.t('homeButton', 'terminal404'));
+
+  get containerStyles(): Record<string, string> {
+    const styles: Record<string, string> = {};
+
+    // Background gradient
+    const bg = this.props.backgroundColor;
+    if (bg) {
+      styles['background'] = `linear-gradient(135deg, ${bg.start} 0%, ${bg.middle} 50%, ${bg.end} 100%)`;
+    } else {
+      styles['background'] = 'linear-gradient(135deg, #ede9fe 0%, #ddd6fe 50%, #c4b5fd 100%)';
+    }
+
+    // Override primary color if provided
+    if (this.props.primaryColor) {
+      styles['--terminal-primary'] = this.props.primaryColor;
+      styles['--terminal-primary-light'] = this.lightenColor(this.props.primaryColor);
+    }
+
+    return styles;
+  }
+
+  ngOnInit(): void {
+    if (typeof window !== 'undefined') {
+      const path = window.location.pathname.slice(1) || 'unknown';
+      this.requestedPath.set(path);
+    }
+  }
+
+  /**
+   * Lighten a hex color for hover states
+   */
+  lightenColor(hex: string): string {
+    // Simple lighten by adding to RGB values
+    const num = parseInt(hex.replace('#', ''), 16);
+    const r = Math.min(255, (num >> 16) + 20);
+    const g = Math.min(255, ((num >> 8) & 0x00ff) + 20);
+    const b = Math.min(255, (num & 0x0000ff) + 20);
+    return `#${((r << 16) | (g << 8) | b).toString(16).padStart(6, '0')}`;
+  }
+}

package/src/lib/components/organisms/terminal-404/terminal-404.stories.ts

@@ -0,0 +1,229 @@
+import type { Meta, StoryObj } from '@storybook/angular';
+import { applicationConfig, moduleMetadata } from '@storybook/angular';
+import { signal } from '@angular/core';
+import { RouterModule } from '@angular/router';
+
+import { Terminal404Component } from './terminal-404.component';
+import { I18nService } from '../../../services/i18n';
+
+// ---------------------------------------------------------------------------
+// Mock factories
+// ---------------------------------------------------------------------------
+
+function createMockI18nService() {
+  const langSignal = signal<'es' | 'en'>('es');
+  return {
+    lang: langSignal.asReadonly(),
+    t: (key: string) => {
+      const map: Record<string, string> = {
+        directoryNotFound: 'No such file or directory',
+        searching: 'Searching entire filesystem...',
+        noResults: 'No such file or directory in any location',
+        searchTerm: 'page-not-found',
+        homeButton: 'cd /home',
+      };
+      return map[key] ?? key;
+    },
+  };
+}
+
+const withMockedServices = applicationConfig({
+  providers: [{ provide: I18nService, useFactory: createMockI18nService }],
+});
+
+// ---------------------------------------------------------------------------
+// Meta
+// ---------------------------------------------------------------------------
+
+const meta: Meta<Terminal404Component> = {
+  title: 'Organisms/Terminal404',
+  component: Terminal404Component,
+  decorators: [
+    withMockedServices,
+    moduleMetadata({
+      imports: [Terminal404Component, RouterModule.forRoot([])],
+    }),
+  ],
+  tags: ['autodocs'],
+  argTypes: {
+    props: {
+      description: 'Terminal404 configuration object (Terminal404Metadata)',
+      control: 'object',
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: `
+## val-terminal-404
+
+A fun, terminal-styled 404 error page with sequential typing animations.
+Each line fades in with a staggered delay to simulate a real terminal session.
+
+### Usage
+
+\`\`\`html
+<val-terminal-404
+  [props]="{
+    primaryColor: '#4a1d96',
+    homeRoute: '/',
+    homeButtonText: 'cd /home'
+  }"
+></val-terminal-404>
+\`\`\`
+
+### Features
+
+- macOS-style terminal window chrome (red / yellow / green dots)
+- Sequential line-reveal animation (6 lines, 0.6 s apart)
+- Blinking cursor on the last prompt line
+- Animated search icon
+- Fully configurable brand color, background gradient and terminal background
+- Navigation button with \`routerLink\` support
+        `,
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<Terminal404Component>;
+
+// ---------------------------------------------------------------------------
+// Stories
+// ---------------------------------------------------------------------------
+
+/**
+ * Default purple gradient — matches the Valtech brand defaults.
+ */
+export const Default: Story = {
+  args: {
+    props: {
+      homeRoute: '/',
+      homeButtonText: 'cd /home',
+    },
+  },
+};
+
+/**
+ * Dark theme — deep navy background with a teal accent.
+ */
+export const DarkTheme: Story = {
+  args: {
+    props: {
+      primaryColor: '#0d9488',
+      terminalBackground: '#0a0f1e',
+      backgroundColor: {
+        start: '#0f172a',
+        middle: '#0d1a35',
+        end: '#1e293b',
+      },
+      homeRoute: '/',
+      homeButtonText: 'cd /home',
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Dark navy background with a teal primary color — suited for dark-mode apps.',
+      },
+    },
+  },
+};
+
+/**
+ * Warm coral theme — orange-red gradient for a vibrant brand feel.
+ */
+export const CoralTheme: Story = {
+  args: {
+    props: {
+      primaryColor: '#e11d48',
+      terminalBackground: '#1c0a0a',
+      backgroundColor: {
+        start: '#fff1f2',
+        middle: '#ffe4e6',
+        end: '#fecdd3',
+      },
+      homeRoute: '/',
+      homeButtonText: 'cd /home',
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Warm rose gradient with a crimson primary accent.',
+      },
+    },
+  },
+};
+
+/**
+ * Custom button text and route — shows how to adapt the CTA for any app structure.
+ */
+export const CustomHomeRoute: Story = {
+  args: {
+    props: {
+      primaryColor: '#7c3aed',
+      homeRoute: '/dashboard',
+      homeButtonText: 'cd /dashboard',
+      backgroundColor: {
+        start: '#ede9fe',
+        middle: '#ddd6fe',
+        end: '#c4b5fd',
+      },
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Overrides `homeRoute` and `homeButtonText` to redirect to `/dashboard` instead of root.',
+      },
+    },
+  },
+};
+
+/**
+ * Side-by-side showcase of the main color themes.
+ */
+export const Showcase: Story = {
+  render: () => ({
+    template: `
+      <div style="display: flex; flex-direction: column; gap: 40px; padding: 16px;">
+        <div>
+          <p style="font-family: system-ui; font-size: 12px; color: #999; margin: 0 0 8px 0;">Default (purple)</p>
+          <val-terminal-404 [props]="{ homeRoute: '/', homeButtonText: 'cd /home' }"></val-terminal-404>
+        </div>
+
+        <div>
+          <p style="font-family: system-ui; font-size: 12px; color: #999; margin: 0 0 8px 0;">Dark theme (teal)</p>
+          <val-terminal-404 [props]="{
+            primaryColor: '#0d9488',
+            terminalBackground: '#0a0f1e',
+            backgroundColor: { start: '#0f172a', middle: '#0d1a35', end: '#1e293b' },
+            homeRoute: '/',
+            homeButtonText: 'cd /home'
+          }"></val-terminal-404>
+        </div>
+
+        <div>
+          <p style="font-family: system-ui; font-size: 12px; color: #999; margin: 0 0 8px 0;">Coral theme</p>
+          <val-terminal-404 [props]="{
+            primaryColor: '#e11d48',
+            terminalBackground: '#1c0a0a',
+            backgroundColor: { start: '#fff1f2', middle: '#ffe4e6', end: '#fecdd3' },
+            homeRoute: '/',
+            homeButtonText: 'cd /home'
+          }"></val-terminal-404>
+        </div>
+      </div>
+    `,
+  }),
+  parameters: {
+    docs: {
+      description: {
+        story: 'All three color themes stacked for quick visual comparison.',
+      },
+    },
+  },
+};

package/src/lib/components/organisms/terminal-404/types.ts

@@ -0,0 +1,22 @@
+/**
+ * Configuration for terminal 404 page component.
+ *
+ * @property backgroundColor - Background gradient colors (default: lavender purple)
+ * @property primaryColor - Main brand color for 404 text and button (default: #4a1d96)
+ * @property terminalBackground - Terminal window background (default: #0d1117)
+ * @property homeRoute - Route for the home button (default: '/')
+ * @property homeButtonText - Text for home button (default: 'cd /home')
+ * @property showLanguageSelector - Show language selector in header (default: true)
+ */
+export interface Terminal404Metadata {
+  backgroundColor?: {
+    start: string;
+    middle: string;
+    end: string;
+  };
+  primaryColor?: string;
+  terminalBackground?: string;
+  homeRoute?: string;
+  homeButtonText?: string;
+  showLanguageSelector?: boolean;
+}

package/src/lib/components/organisms/testimonial-carousel/testimonial-carousel.component.ts

@@ -0,0 +1,70 @@
+import { CommonModule } from '@angular/common';
+import { Component, Input } from '@angular/core';
+import { SwipeCarouselComponent } from '../../molecules/swipe-carousel/swipe-carousel.component';
+import { SwipeCarouselMetadata } from '../../molecules/swipe-carousel/types';
+import { TestimonialCardComponent } from '../../molecules/testimonial-card/testimonial-card.component';
+import { TestimonialCarouselMetadata } from './types';
+
+/**
+ * val-testimonial-carousel
+ *
+ * A carousel of testimonial cards using Swiper.js with centered slides
+ * and responsive breakpoints for optimal viewing on all devices.
+ *
+ * @example
+ * <val-testimonial-carousel
+ *   [props]="{
+ *     cards: [
+ *       { title: 'John Doe', image: '/john.jpg', link: { text: 'CEO', route: ['/team'] } },
+ *       { title: 'Jane Smith', image: '/jane.jpg', link: { text: 'CTO', route: ['/team'] } }
+ *     ]
+ *   }"
+ * ></val-testimonial-carousel>
+ *
+ * @input props - Carousel configuration with testimonial cards
+ */
+@Component({
+  selector: 'val-testimonial-carousel',
+  standalone: true,
+  imports: [CommonModule, TestimonialCardComponent, SwipeCarouselComponent],
+  template: `
+    <val-swipe-carousel [items]="props.cards" [itemTemplate]="testimonialTemplate" [props]="swiperProps" />
+    <ng-template #testimonialTemplate let-card>
+      <val-testimonial-card [props]="card"></val-testimonial-card>
+    </ng-template>
+  `,
+  styles: `
+    :host {
+      display: block;
+    }
+  `,
+})
+export class TestimonialCarouselComponent {
+  /**
+   * Carousel configuration with testimonial cards.
+   */
+  @Input() props: TestimonialCarouselMetadata = { cards: [] };
+
+  /**
+   * Swiper configuration optimized for testimonial cards.
+   */
+  swiperProps: SwipeCarouselMetadata = {
+    slidesPerView: 1.1,
+    spaceBetween: 40,
+    loop: true,
+    centeredSlides: true,
+    effect: 'slide',
+    pagination: true,
+    navigation: true,
+    breakpoints: {
+      768: {
+        slidesPerView: 1.5,
+        spaceBetween: 40,
+      },
+      1024: {
+        slidesPerView: 1.7,
+        spaceBetween: 50,
+      },
+    },
+  };
+}