valtech-components 2.0.691 → 2.0.692

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/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,
-      },
-    },
-  };
-}

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

@@ -1,173 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/angular';
-import { moduleMetadata } from '@storybook/angular';
-import { CommonModule } from '@angular/common';
-import { TestimonialCarouselComponent } from './testimonial-carousel.component';
-import { SwipeCarouselComponent } from '../../molecules/swipe-carousel/swipe-carousel.component';
-import { TestimonialCardComponent } from '../../molecules/testimonial-card/testimonial-card.component';
-
-const meta: Meta<TestimonialCarouselComponent> = {
-  title: 'Organisms/TestimonialCarousel',
-  component: TestimonialCarouselComponent,
-  decorators: [
-    moduleMetadata({
-      imports: [CommonModule, TestimonialCarouselComponent, SwipeCarouselComponent, TestimonialCardComponent],
-    }),
-  ],
-  tags: ['autodocs'],
-  argTypes: {
-    props: {
-      description: 'Carousel configuration object',
-      control: 'object',
-    },
-  },
-  parameters: {
-    docs: {
-      description: {
-        component: `
-## val-testimonial-carousel
-
-A carousel of testimonial cards using Swiper.js with centered slides.
-
-### Problem it solves
-
-Displaying customer testimonials or team member cards in an engaging way:
-- Centered slides that fade at the edges
-- Responsive breakpoints for mobile/tablet/desktop
-- Loop mode for continuous browsing
-- Navigation arrows and pagination dots
-- Touch-friendly swipe gestures
-
-### Usage
-
-\`\`\`html
-<val-testimonial-carousel
-  [props]="{
-    cards: [
-      {
-        title: { position: 'center', title: { content: 'John Doe', size: 'medium' } },
-        image: { src: '/images/john.jpg', alt: 'John', mode: 'circular', size: 'large' },
-        background: 'linear-gradient(135deg, #667eea, #764ba2)'
-      },
-      {
-        title: { position: 'center', title: { content: 'Jane Smith', size: 'medium' } },
-        image: { src: '/images/jane.jpg', alt: 'Jane', mode: 'circular', size: 'large' },
-        background: 'linear-gradient(135deg, #11998e, #38ef7d)'
-      }
-    ]
-  }"
-></val-testimonial-carousel>
-\`\`\`
-
-### Features
-
-- Centered slides with partial view of adjacent cards
-- Responsive: 1.1 slides on mobile, 1.5 on tablet, 1.7 on desktop
-- Loop mode for infinite scrolling
-- Navigation arrows and pagination dots
-- Swiper.js integration with smooth animations
-- Dark mode support via TestimonialCard
-        `,
-      },
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj<TestimonialCarouselComponent>;
-
-export const Default: Story = {
-  args: {
-    props: {
-      cards: [
-        {
-          title: {
-            position: 'center',
-            title: { content: 'Sarah Johnson', size: 'medium', color: 'dark', bold: true },
-            bellowTitle: { content: 'Product Manager', size: 'small', color: 'medium', bold: false },
-          },
-          image: { src: 'https://i.pravatar.cc/400?img=1', alt: 'Sarah Johnson', mode: 'circular', shaded: false, bordered: false, size: 'large' },
-          background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
-        },
-        {
-          title: {
-            position: 'center',
-            title: { content: 'Michael Chen', size: 'medium', color: 'dark', bold: true },
-            bellowTitle: { content: 'Lead Developer', size: 'small', color: 'medium', bold: false },
-          },
-          image: { src: 'https://i.pravatar.cc/400?img=2', alt: 'Michael Chen', mode: 'circular', shaded: false, bordered: false, size: 'large' },
-          background: 'linear-gradient(135deg, #11998e 0%, #38ef7d 100%)',
-        },
-        {
-          title: {
-            position: 'center',
-            title: { content: 'Emily Davis', size: 'medium', color: 'dark', bold: true },
-            bellowTitle: { content: 'UX Designer', size: 'small', color: 'medium', bold: false },
-          },
-          image: { src: 'https://i.pravatar.cc/400?img=3', alt: 'Emily Davis', mode: 'circular', shaded: false, bordered: false, size: 'large' },
-          background: 'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)',
-        },
-        {
-          title: {
-            position: 'center',
-            title: { content: 'David Wilson', size: 'medium', color: 'dark', bold: true },
-            bellowTitle: { content: 'DevOps Engineer', size: 'small', color: 'medium', bold: false },
-          },
-          image: { src: 'https://i.pravatar.cc/400?img=4', alt: 'David Wilson', mode: 'circular', shaded: false, bordered: false, size: 'large' },
-          background: 'linear-gradient(135deg, #84fab0 0%, #8fd3f4 100%)',
-        },
-      ],
-    },
-  },
-};
-
-export const CustomerTestimonials: Story = {
-  args: {
-    props: {
-      cards: [
-        {
-          title: {
-            position: 'center',
-            title: { content: 'Alex Thompson', size: 'medium', color: 'light', bold: true },
-            bellowTitle: { content: 'CEO, TechStart Inc.', size: 'small', color: 'light', bold: false },
-          },
-          image: { src: 'https://i.pravatar.cc/400?img=5', alt: 'Alex Thompson', mode: 'circular', shaded: false, bordered: true, size: 'large' },
-          background: 'linear-gradient(135deg, #232526 0%, #414345 100%)',
-        },
-        {
-          title: {
-            position: 'center',
-            title: { content: 'Maria Garcia', size: 'medium', color: 'light', bold: true },
-            bellowTitle: { content: 'Director, Innovation Labs', size: 'small', color: 'light', bold: false },
-          },
-          image: { src: 'https://i.pravatar.cc/400?img=6', alt: 'Maria Garcia', mode: 'circular', shaded: false, bordered: true, size: 'large' },
-          background: 'linear-gradient(135deg, #1a2a6c 0%, #b21f1f 50%, #fdbb2d 100%)',
-        },
-        {
-          title: {
-            position: 'center',
-            title: { content: 'James Brown', size: 'medium', color: 'light', bold: true },
-            bellowTitle: { content: 'Founder, Digital Agency', size: 'small', color: 'light', bold: false },
-          },
-          image: { src: 'https://i.pravatar.cc/400?img=7', alt: 'James Brown', mode: 'circular', shaded: false, bordered: true, size: 'large' },
-          background: 'linear-gradient(135deg, #0f2027 0%, #203a43 50%, #2c5364 100%)',
-        },
-      ],
-    },
-  },
-};
-
-export const ManyTestimonials: Story = {
-  args: {
-    props: {
-      cards: Array.from({ length: 8 }, (_, i) => ({
-        title: {
-          position: 'center' as const,
-          title: { content: `Team Member ${i + 1}`, size: 'medium' as const, color: 'dark', bold: true },
-          bellowTitle: { content: `Role ${i + 1}`, size: 'small' as const, color: 'medium', bold: false },
-        },
-        image: { src: `https://i.pravatar.cc/400?img=${i + 10}`, alt: `Team Member ${i + 1}`, mode: 'circular' as const, shaded: false, bordered: false, size: 'large' as const },
-        color: 'light',
-      })),
-    },
-  },
-};

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

@@ -1,9 +0,0 @@
-import { TestimonialCardMetadata } from '../../molecules/testimonial-card/types';
-
-/**
- * Configuration for the testimonial carousel component.
- */
-export interface TestimonialCarouselMetadata {
-  /** Array of testimonial cards to display */
-  cards: TestimonialCardMetadata[];
-}

package/src/lib/components/organisms/toolbar/toolbar.component.scss

@@ -1,13 +0,0 @@
-@import '../../styles/mixins.scss';
-
-ion-button {
-  font-family: var(--ion-default-font), Arial, sans-serif;
-}
-
-.left-buttons {
-  margin-left: pxToRem(-16);
-}
-
-.background {
-  background: var(--ion-background-color);
-}