valtech-components 2.0.691 → 2.0.692

package/src/lib/components/molecules/stats-card/stats-card.stories.ts

@@ -1,481 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/angular';
-import { moduleMetadata } from '@storybook/angular';
-import { CommonModule } from '@angular/common';
-import { StatsCardComponent } from './stats-card.component';
-import { StatsCardMetadata } from './types';
-import { SwipeCarouselComponent } from '../swipe-carousel/swipe-carousel.component';
-
-const createStatsCardProps = (overrides: Partial<StatsCardMetadata> = {}): StatsCardMetadata => ({
-  title: 'Total Users',
-  value: 12500,
-  icon: 'people',
-  color: 'primary',
-  ...overrides,
-});
-
-// Pre-create all props at module level
-const defaultProps = createStatsCardProps();
-const revenueProps = createStatsCardProps({
-  title: 'Revenue',
-  value: '45,200',
-  prefix: '$',
-  icon: 'cash',
-  color: 'success',
-  trend: { value: 12.5, direction: 'up', label: 'vs last month' },
-});
-const ordersProps = createStatsCardProps({
-  title: 'Orders',
-  value: 1284,
-  icon: 'cart',
-  color: 'tertiary',
-  footer: 'Last 30 days',
-});
-const viewsProps = createStatsCardProps({
-  title: 'Page Views',
-  value: '89.2K',
-  icon: 'eye',
-  color: 'secondary',
-  trend: { value: 5.3, direction: 'up' },
-});
-const bounceRateProps = createStatsCardProps({
-  title: 'Bounce Rate',
-  value: 42,
-  suffix: '%',
-  icon: 'analytics',
-  color: 'warning',
-  trend: { value: 2.1, direction: 'down', invertColors: true },
-});
-const gradientBackgroundProps = createStatsCardProps({
-  title: 'Total Sales',
-  value: '2.4M',
-  prefix: '$',
-  icon: 'cash',
-  color: 'primary',
-  background: 'gradient',
-  trend: { value: 18.2, direction: 'up' },
-});
-const solidBackgroundProps = createStatsCardProps({
-  title: 'Active Users',
-  value: 8420,
-  icon: 'people',
-  color: 'success',
-  background: 'solid',
-});
-const loadingProps = createStatsCardProps({
-  title: 'Loading Data',
-  value: 0,
-  icon: 'analytics',
-  loading: true,
-});
-const trendDownProps = createStatsCardProps({
-  title: 'Churn Rate',
-  value: 3.2,
-  suffix: '%',
-  icon: 'analytics',
-  color: 'danger',
-  trend: { value: 0.8, direction: 'down', label: 'vs last quarter' },
-});
-const neutralTrendProps = createStatsCardProps({
-  title: 'Avg. Session',
-  value: '4:32',
-  icon: 'time-outline',
-  color: 'medium',
-  trend: { value: 0, direction: 'neutral', label: 'no change' },
-});
-
-// Showcase props
-const showcaseUsersProps = createStatsCardProps({
-  title: 'Total Users',
-  value: '24.5K',
-  icon: 'people',
-  color: 'primary',
-  trend: { value: 8.2, direction: 'up' },
-});
-const showcaseRevenueProps = createStatsCardProps({
-  title: 'Revenue',
-  value: '128,400',
-  prefix: '$',
-  icon: 'cash',
-  color: 'success',
-  background: 'gradient',
-  trend: { value: 15.3, direction: 'up', label: 'vs last month' },
-});
-const showcaseOrdersProps = createStatsCardProps({
-  title: 'Orders',
-  value: 3248,
-  icon: 'cart',
-  color: 'tertiary',
-  footer: 'This month',
-});
-const showcaseRatingProps = createStatsCardProps({
-  title: 'Avg. Rating',
-  value: 4.8,
-  icon: 'star',
-  color: 'warning',
-  suffix: '/5',
-});
-
-// Testimonial stats with logo (no icon)
-const testimonialStats1Props: StatsCardMetadata = {
-  title: '',
-  value: '20x',
-  description: 'decrease in pipeline execution time',
-  color: 'tertiary',
-  background: 'light',
-  minHeight: 200,
-  logo: {
-    src: 'https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Google_2015_logo.svg/200px-Google_2015_logo.svg.png',
-    alt: 'Google',
-    maxHeight: 28,
-  },
-};
-const testimonialStats2Props: StatsCardMetadata = {
-  title: '',
-  value: '100',
-  description: 'fewer hours of developer downtime per month',
-  color: 'secondary',
-  background: 'light',
-  minHeight: 200,
-  logo: {
-    src: 'https://upload.wikimedia.org/wikipedia/commons/thumb/a/a9/Amazon_logo.svg/200px-Amazon_logo.svg.png',
-    alt: 'Amazon',
-    maxHeight: 28,
-  },
-};
-const testimonialStats3Props: StatsCardMetadata = {
-  title: '',
-  value: '6x',
-  description: 'faster time to market',
-  color: 'success',
-  background: 'light',
-  minHeight: 200,
-  logo: {
-    src: 'https://upload.wikimedia.org/wikipedia/commons/thumb/4/44/Microsoft_logo.svg/200px-Microsoft_logo.svg.png',
-    alt: 'Microsoft',
-    maxHeight: 28,
-  },
-};
-const withLogoAndTrendProps = createStatsCardProps({
-  title: 'Performance',
-  value: '15x',
-  description: 'improvement in deployment speed',
-  color: 'primary',
-  background: 'gradient',
-  trend: { value: 45, direction: 'up' },
-  logo: {
-    src: 'https://upload.wikimedia.org/wikipedia/commons/thumb/0/08/Netflix_2015_logo.svg/200px-Netflix_2015_logo.svg.png',
-    alt: 'Netflix',
-    maxHeight: 24,
-  },
-});
-
-const meta: Meta<StatsCardComponent> = {
-  title: 'Molecules/StatsCard',
-  component: StatsCardComponent,
-  decorators: [
-    moduleMetadata({
-      imports: [CommonModule, StatsCardComponent, SwipeCarouselComponent],
-    }),
-  ],
-  tags: ['autodocs'],
-  argTypes: {
-    props: {
-      description: 'Stats card configuration object',
-      control: 'object',
-      table: {
-        type: {
-          summary: 'StatsCardMetadata',
-          detail: `{
-  title: string;
-  value: string | number;
-  prefix?: string;
-  suffix?: string;
-  icon?: string;
-  color?: Color;
-  background?: 'solid' | 'gradient' | 'light';
-  trend?: StatsTrend;
-  footer?: string;
-  loading?: boolean;
-}`,
-        },
-      },
-    },
-  },
-  parameters: {
-    docs: {
-      description: {
-        component: `
-## val-stats-card
-
-A card component for displaying statistics and KPIs.
-
-### Features
-
-- **Trend Indicators**: Show up/down/neutral trends
-- **Prefix/Suffix**: Currency symbols, percentages, units
-- **Icons**: Visual representation of the stat
-- **Backgrounds**: Light, solid, or gradient
-- **Loading State**: Skeleton while loading
-- **Footer**: Additional context text
-
-### Usage
-
-\`\`\`html
-<val-stats-card
-  [props]="{
-    title: 'Total Users',
-    value: 12500,
-    icon: 'people',
-    color: 'primary',
-    trend: { value: 12.5, direction: 'up', label: 'vs last month' }
-  }"
-></val-stats-card>
-\`\`\`
-
-### Trend Colors
-
-- **Up**: Green (positive)
-- **Down**: Red (negative)
-- **Neutral**: Gray
-- **invertColors**: Swap up/down colors (for metrics where down is good)
-        `,
-      },
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj<StatsCardComponent>;
-
-export const Default: Story = {
-  render: () => ({
-    template: `<div style="max-width: 280px;"><val-stats-card [props]="statsProps"></val-stats-card></div>`,
-    props: { statsProps: defaultProps },
-  }),
-};
-
-export const WithTrend: Story = {
-  render: () => ({
-    template: `<div style="max-width: 280px;"><val-stats-card [props]="statsProps"></val-stats-card></div>`,
-    props: { statsProps: revenueProps },
-  }),
-  parameters: {
-    docs: {
-      description: {
-        story: 'Stats card with trend indicator showing positive growth.',
-      },
-    },
-  },
-};
-
-export const WithFooter: Story = {
-  render: () => ({
-    template: `<div style="max-width: 280px;"><val-stats-card [props]="statsProps"></val-stats-card></div>`,
-    props: { statsProps: ordersProps },
-  }),
-};
-
-export const PageViews: Story = {
-  render: () => ({
-    template: `<div style="max-width: 280px;"><val-stats-card [props]="statsProps"></val-stats-card></div>`,
-    props: { statsProps: viewsProps },
-  }),
-};
-
-export const InvertedTrend: Story = {
-  render: () => ({
-    template: `<div style="max-width: 280px;"><val-stats-card [props]="statsProps"></val-stats-card></div>`,
-    props: { statsProps: bounceRateProps },
-  }),
-  parameters: {
-    docs: {
-      description: {
-        story: 'Bounce rate with inverted colors (down is good).',
-      },
-    },
-  },
-};
-
-export const GradientBackground: Story = {
-  render: () => ({
-    template: `<div style="max-width: 280px;"><val-stats-card [props]="statsProps"></val-stats-card></div>`,
-    props: { statsProps: gradientBackgroundProps },
-  }),
-};
-
-export const SolidBackground: Story = {
-  render: () => ({
-    template: `<div style="max-width: 280px;"><val-stats-card [props]="statsProps"></val-stats-card></div>`,
-    props: { statsProps: solidBackgroundProps },
-  }),
-};
-
-export const Loading: Story = {
-  render: () => ({
-    template: `<div style="max-width: 280px;"><val-stats-card [props]="statsProps"></val-stats-card></div>`,
-    props: { statsProps: loadingProps },
-  }),
-};
-
-export const TrendDown: Story = {
-  render: () => ({
-    template: `<div style="max-width: 280px;"><val-stats-card [props]="statsProps"></val-stats-card></div>`,
-    props: { statsProps: trendDownProps },
-  }),
-};
-
-export const NeutralTrend: Story = {
-  render: () => ({
-    template: `<div style="max-width: 280px;"><val-stats-card [props]="statsProps"></val-stats-card></div>`,
-    props: { statsProps: neutralTrendProps },
-  }),
-};
-
-export const Showcase: Story = {
-  render: () => ({
-    template: `
-      <div style="display: flex; flex-direction: column; gap: 24px;">
-        <h3 style="margin: 0; font-family: system-ui;">Dashboard Stats</h3>
-
-        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; max-width: 1000px;">
-          <val-stats-card [props]="users"></val-stats-card>
-          <val-stats-card [props]="revenue"></val-stats-card>
-          <val-stats-card [props]="orders"></val-stats-card>
-          <val-stats-card [props]="rating"></val-stats-card>
-        </div>
-      </div>
-    `,
-    props: {
-      users: showcaseUsersProps,
-      revenue: showcaseRevenueProps,
-      orders: showcaseOrdersProps,
-      rating: showcaseRatingProps,
-    },
-  }),
-};
-
-export const WithLogo: Story = {
-  render: () => ({
-    template: `<div style="max-width: 320px;"><val-stats-card [props]="statsProps"></val-stats-card></div>`,
-    props: { statsProps: testimonialStats1Props },
-  }),
-  parameters: {
-    docs: {
-      description: {
-        story: 'Stats card with company logo at the bottom. Logo appears in grayscale and becomes colored on hover.',
-      },
-    },
-  },
-};
-
-export const WithLogoAndTrend: Story = {
-  render: () => ({
-    template: `<div style="max-width: 320px;"><val-stats-card [props]="statsProps"></val-stats-card></div>`,
-    props: { statsProps: withLogoAndTrendProps },
-  }),
-  parameters: {
-    docs: {
-      description: {
-        story: 'Stats card combining logo with trend indicator on gradient background.',
-      },
-    },
-  },
-};
-
-export const TestimonialStats: Story = {
-  render: () => ({
-    template: `
-      <div style="display: flex; flex-direction: column; gap: 24px;">
-        <h3 style="margin: 0; font-family: system-ui;">One platform for teams of every size</h3>
-
-        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; max-width: 1000px;">
-          <val-stats-card [props]="stat1"></val-stats-card>
-          <val-stats-card [props]="stat2"></val-stats-card>
-          <val-stats-card [props]="stat3"></val-stats-card>
-        </div>
-      </div>
-    `,
-    props: {
-      stat1: testimonialStats1Props,
-      stat2: testimonialStats2Props,
-      stat3: testimonialStats3Props,
-    },
-  }),
-  parameters: {
-    docs: {
-      description: {
-        story: 'Customer success stats with large values, descriptions, and company logos.',
-      },
-    },
-  },
-};
-
-export const TestimonialCarousel: Story = {
-  render: () => ({
-    template: `
-      <div style="display: flex; flex-direction: column; gap: 24px; max-width: 1200px;">
-        <h3 style="margin: 0; font-family: system-ui;">One platform for teams of every size</h3>
-
-        <val-swipe-carousel
-          [items]="statsItems"
-          [itemTemplate]="statsTemplate"
-          [props]="carouselProps"
-        ></val-swipe-carousel>
-
-        <ng-template #statsTemplate let-stat>
-          <val-stats-card [props]="stat" style="height: 100%;"></val-stats-card>
-        </ng-template>
-      </div>
-    `,
-    props: {
-      statsItems: [
-        testimonialStats1Props,
-        testimonialStats2Props,
-        testimonialStats3Props,
-        {
-          title: '',
-          value: '17x',
-          description: 'boost in developer happiness',
-          color: 'warning',
-          background: 'light',
-          minHeight: 200,
-          logo: {
-            src: 'https://upload.wikimedia.org/wikipedia/commons/thumb/9/96/Spotify_logo_with_text.svg/200px-Spotify_logo_with_text.svg.png',
-            alt: 'Spotify',
-            maxHeight: 28,
-          },
-        },
-        {
-          title: '',
-          value: '50%',
-          description: 'reduction in deployment failures',
-          color: 'danger',
-          background: 'light',
-          minHeight: 200,
-          logo: {
-            src: 'https://upload.wikimedia.org/wikipedia/commons/thumb/5/51/IBM_logo.svg/200px-IBM_logo.svg.png',
-            alt: 'IBM',
-            maxHeight: 28,
-          },
-        },
-      ],
-      carouselProps: {
-        slidesPerView: 1.2,
-        spaceBetween: 16,
-        navigation: true,
-        pagination: true,
-        breakpoints: {
-          640: { slidesPerView: 2.2, spaceBetween: 16 },
-          1024: { slidesPerView: 3.2, spaceBetween: 20 },
-        },
-      },
-    },
-  }),
-  parameters: {
-    docs: {
-      description: {
-        story: 'Stats cards inside a SwipeCarousel with navigation arrows. Perfect for showcasing customer success metrics.',
-      },
-    },
-  },
-};

package/src/lib/components/molecules/stats-card/types.ts

@@ -1,63 +0,0 @@
-import { Color } from '@ionic/core';
-
-/**
- * Logo configuration for stats card.
- */
-export interface StatsCardLogo {
-  /** Logo image URL */
-  src: string;
-  /** Alt text for accessibility */
-  alt: string;
-  /** Max height in pixels (default: 32) */
-  maxHeight?: number;
-  /** Max width in pixels (default: 120) */
-  maxWidth?: number;
-}
-
-/**
- * Trend configuration for stats card.
- */
-export interface StatsTrend {
-  /** Trend value (percentage or absolute) */
-  value: number;
-  /** Trend direction */
-  direction: 'up' | 'down' | 'neutral';
-  /** Trend label (e.g., "vs last month") */
-  label?: string;
-  /** Invert colors (up=bad, down=good) */
-  invertColors?: boolean;
-}
-
-/**
- * Metadata for the stats card component.
- */
-export interface StatsCardMetadata {
-  /** Stat title/label */
-  title: string;
-  /** Main stat value */
-  value: string | number;
-  /** Value prefix (e.g., "$", "€") */
-  prefix?: string;
-  /** Value suffix (e.g., "%", "users") */
-  suffix?: string;
-  /** Icon name */
-  icon?: string;
-  /** Card color */
-  color?: Color;
-  /** Background style */
-  background?: 'solid' | 'gradient' | 'light';
-  /** Trend indicator */
-  trend?: StatsTrend;
-  /** Footer text */
-  footer?: string;
-  /** Description text (for GitLab-style layout) */
-  description?: string;
-  /** Company/brand logo displayed at bottom */
-  logo?: StatsCardLogo;
-  /** Minimum height in pixels (for uniform card sizes) */
-  minHeight?: number;
-  /** Loading state */
-  loading?: boolean;
-  /** Unique token identifier */
-  token?: string;
-}

package/src/lib/components/molecules/stepper/stepper.component.scss

@@ -1,156 +0,0 @@
-:host {
-  display: block;
-}
-
-.stepper-container {
-  display: flex;
-
-  &.horizontal {
-    flex-direction: row;
-    align-items: flex-start;
-
-    .step {
-      flex: 1;
-      flex-direction: column;
-      align-items: center;
-      text-align: center;
-
-      .step-indicator {
-        flex-direction: row;
-        width: 100%;
-        justify-content: center;
-      }
-
-      .step-connector {
-        flex: 1;
-        height: 2px;
-        margin: 0 8px;
-        align-self: center;
-      }
-    }
-  }
-
-  &.vertical {
-    flex-direction: column;
-
-    .step {
-      flex-direction: row;
-      align-items: flex-start;
-
-      .step-indicator {
-        flex-direction: column;
-        align-items: center;
-      }
-
-      .step-connector {
-        width: 2px;
-        flex: 1;
-        min-height: 24px;
-        margin: 8px 0;
-      }
-
-      .step-content {
-        margin-left: 12px;
-        padding-bottom: 24px;
-      }
-    }
-  }
-}
-
-.step {
-  display: flex;
-  cursor: default;
-
-  &.clickable {
-    cursor: pointer;
-
-    &:hover .step-circle {
-      transform: scale(1.1);
-    }
-  }
-
-  &.disabled {
-    opacity: 0.5;
-    pointer-events: none;
-  }
-
-  &.current .step-circle {
-    box-shadow: 0 0 0 4px rgba(var(--ion-color-primary-rgb), 0.2);
-  }
-}
-
-.step-indicator {
-  display: flex;
-  position: relative;
-}
-
-.step-circle {
-  width: 32px;
-  height: 32px;
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background-color: var(--step-color, var(--ion-color-medium));
-  color: white;
-  font-weight: 600;
-  font-size: 14px;
-  transition: transform 0.2s, box-shadow 0.2s;
-  flex-shrink: 0;
-
-  ion-icon {
-    font-size: 18px;
-  }
-}
-
-.step-connector {
-  background-color: var(--ion-color-light-shade);
-  transition: background-color 0.3s;
-
-  &.completed {
-    background-color: var(--ion-color-primary);
-  }
-
-  &.dashed {
-    background: repeating-linear-gradient(
-      90deg,
-      var(--ion-color-light-shade),
-      var(--ion-color-light-shade) 4px,
-      transparent 4px,
-      transparent 8px
-    );
-
-    &.completed {
-      background: repeating-linear-gradient(
-        90deg,
-        var(--ion-color-primary),
-        var(--ion-color-primary) 4px,
-        transparent 4px,
-        transparent 8px
-      );
-    }
-  }
-}
-
-.step-content {
-  margin-top: 8px;
-}
-
-.step-label {
-  font-weight: 500;
-  font-size: 14px;
-  color: var(--ion-text-color);
-
-  .optional-text {
-    font-weight: 400;
-    font-size: 12px;
-    color: var(--ion-color-medium);
-    margin-left: 4px;
-  }
-}
-
-.step-description {
-  font-size: 12px;
-  color: var(--ion-color-medium);
-  margin-top: 4px;
-}