valtech-components 2.0.687 → 2.0.689

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

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

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

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