valtech-components 2.0.795 → 2.0.797

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

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

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

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

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