valtech-components 2.0.691 → 2.0.692

package/src/lib/components/molecules/tabs/tabs.stories.ts

@@ -1,283 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/angular';
-import { moduleMetadata } from '@storybook/angular';
-import { CommonModule } from '@angular/common';
-import { TabsComponent } from './tabs.component';
-
-const meta: Meta<TabsComponent> = {
-  title: 'Molecules/Tabs',
-  component: TabsComponent,
-  decorators: [
-    moduleMetadata({
-      imports: [CommonModule, TabsComponent],
-    }),
-  ],
-  tags: ['autodocs'],
-  argTypes: {
-    props: {
-      description: 'Tabs configuration object',
-      control: 'object',
-    },
-    tabChange: {
-      action: 'tabChange',
-      description: 'Event emitted when a tab is selected',
-    },
-  },
-  parameters: {
-    docs: {
-      description: {
-        component: `
-## val-tabs
-
-A tab bar component for navigation between views. Supports icons, badges, and various layout options.
-
-### Usage
-
-\`\`\`html
-<val-tabs [props]="{
-  tabs: [
-    { value: 'home', label: 'Home', icon: 'home' },
-    { value: 'search', label: 'Search', icon: 'search' },
-    { value: 'profile', label: 'Profile', icon: 'person' }
-  ],
-  selectedTab: 'home'
-}" (tabChange)="onTabChange($event)"></val-tabs>
-\`\`\`
-
-### Layouts
-
-- \`icon-top\`: Icon above label (default)
-- \`icon-start\`: Icon before label
-- \`icon-end\`: Icon after label
-- \`icon-bottom\`: Icon below label
-- \`icon-hide\`: Label only
-- \`label-hide\`: Icon only
-        `,
-      },
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj<TabsComponent>;
-
-export const Default: Story = {
-  args: {
-    props: {
-      tabs: [
-        { value: 'home', label: 'Home', icon: 'home' },
-        { value: 'search', label: 'Search', icon: 'search' },
-        { value: 'favorites', label: 'Favorites', icon: 'heart' },
-        { value: 'profile', label: 'Profile', icon: 'person' },
-      ],
-      selectedTab: 'home',
-    },
-  },
-};
-
-export const WithBadges: Story = {
-  args: {
-    props: {
-      tabs: [
-        { value: 'inbox', label: 'Inbox', icon: 'mail', badge: 5 },
-        { value: 'notifications', label: 'Alerts', icon: 'notifications', badge: '99+', badgeColor: 'danger' },
-        { value: 'calendar', label: 'Calendar', icon: 'calendar' },
-        { value: 'settings', label: 'Settings', icon: 'settings' },
-      ],
-      selectedTab: 'inbox',
-    },
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: 'Tabs can display badges for notifications or counts.',
-      },
-    },
-  },
-};
-
-export const IconOnly: Story = {
-  args: {
-    props: {
-      tabs: [
-        { value: 'home', icon: 'home' },
-        { value: 'search', icon: 'search' },
-        { value: 'star', icon: 'star' },
-        { value: 'folder', icon: 'folder' },
-        { value: 'settings', icon: 'settings' },
-      ],
-      selectedTab: 'home',
-      layout: 'label-hide',
-    },
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: 'Use `layout: "label-hide"` for icon-only tabs.',
-      },
-    },
-  },
-};
-
-export const LabelOnly: Story = {
-  args: {
-    props: {
-      tabs: [
-        { value: 'tab1', label: 'Overview' },
-        { value: 'tab2', label: 'Features' },
-        { value: 'tab3', label: 'Pricing' },
-        { value: 'tab4', label: 'Reviews' },
-      ],
-      selectedTab: 'tab1',
-      layout: 'icon-hide',
-    },
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: 'Use `layout: "icon-hide"` for text-only tabs.',
-      },
-    },
-  },
-};
-
-export const IconStart: Story = {
-  args: {
-    props: {
-      tabs: [
-        { value: 'home', label: 'Home', icon: 'home' },
-        { value: 'search', label: 'Search', icon: 'search' },
-        { value: 'profile', label: 'Profile', icon: 'person' },
-      ],
-      selectedTab: 'home',
-      layout: 'icon-start',
-    },
-  },
-};
-
-export const IconEnd: Story = {
-  args: {
-    props: {
-      tabs: [
-        { value: 'home', label: 'Home', icon: 'home' },
-        { value: 'search', label: 'Search', icon: 'search' },
-        { value: 'profile', label: 'Profile', icon: 'person' },
-      ],
-      selectedTab: 'home',
-      layout: 'icon-end',
-    },
-  },
-};
-
-export const WithDisabled: Story = {
-  args: {
-    props: {
-      tabs: [
-        { value: 'active1', label: 'Active', icon: 'checkmark-circle' },
-        { value: 'disabled', label: 'Disabled', icon: 'lock-closed', disabled: true },
-        { value: 'active2', label: 'Active', icon: 'checkmark-circle' },
-      ],
-      selectedTab: 'active1',
-    },
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: 'Individual tabs can be disabled.',
-      },
-    },
-  },
-};
-
-export const PrimaryColor: Story = {
-  args: {
-    props: {
-      tabs: [
-        { value: 'home', label: 'Home', icon: 'home' },
-        { value: 'search', label: 'Search', icon: 'search' },
-        { value: 'profile', label: 'Profile', icon: 'person' },
-      ],
-      selectedTab: 'home',
-      color: 'primary',
-    },
-  },
-};
-
-export const Translucent: Story = {
-  args: {
-    props: {
-      tabs: [
-        { value: 'home', label: 'Home', icon: 'home' },
-        { value: 'search', label: 'Search', icon: 'search' },
-        { value: 'profile', label: 'Profile', icon: 'person' },
-      ],
-      selectedTab: 'home',
-      translucent: true,
-    },
-  },
-};
-
-export const Showcase: Story = {
-  render: () => ({
-    template: `
-      <div style="display: flex; flex-direction: column; gap: 32px; max-width: 500px;">
-        <h3 style="margin: 0; font-family: system-ui;">Standard Tabs</h3>
-        <val-tabs [props]="{
-          tabs: [
-            { value: 'home', label: 'Home', icon: 'home' },
-            { value: 'search', label: 'Search', icon: 'search' },
-            { value: 'favorites', label: 'Favorites', icon: 'heart' },
-            { value: 'profile', label: 'Profile', icon: 'person' }
-          ],
-          selectedTab: 'home'
-        }"></val-tabs>
-
-        <h3 style="margin: 16px 0 0 0; font-family: system-ui;">With Badges</h3>
-        <val-tabs [props]="{
-          tabs: [
-            { value: 'inbox', label: 'Inbox', icon: 'mail', badge: 3 },
-            { value: 'notifications', label: 'Alerts', icon: 'notifications', badge: 12, badgeColor: 'danger' },
-            { value: 'messages', label: 'Messages', icon: 'chatbubble' },
-            { value: 'settings', label: 'Settings', icon: 'settings' }
-          ],
-          selectedTab: 'inbox'
-        }"></val-tabs>
-
-        <h3 style="margin: 16px 0 0 0; font-family: system-ui;">Icon Only</h3>
-        <val-tabs [props]="{
-          tabs: [
-            { value: 't1', icon: 'home' },
-            { value: 't2', icon: 'search' },
-            { value: 't3', icon: 'heart' },
-            { value: 't4', icon: 'person' },
-            { value: 't5', icon: 'settings' }
-          ],
-          selectedTab: 't1',
-          layout: 'label-hide'
-        }"></val-tabs>
-
-        <h3 style="margin: 16px 0 0 0; font-family: system-ui;">Label Only</h3>
-        <val-tabs [props]="{
-          tabs: [
-            { value: 'overview', label: 'Overview' },
-            { value: 'specs', label: 'Specs' },
-            { value: 'reviews', label: 'Reviews' },
-            { value: 'support', label: 'Support' }
-          ],
-          selectedTab: 'overview',
-          layout: 'icon-hide'
-        }"></val-tabs>
-
-        <h3 style="margin: 16px 0 0 0; font-family: system-ui;">Primary Color</h3>
-        <val-tabs [props]="{
-          tabs: [
-            { value: 'tab1', label: 'Tab 1', icon: 'apps' },
-            { value: 'tab2', label: 'Tab 2', icon: 'grid' },
-            { value: 'tab3', label: 'Tab 3', icon: 'list' }
-          ],
-          selectedTab: 'tab1',
-          color: 'primary'
-        }"></val-tabs>
-      </div>
-    `,
-  }),
-};

package/src/lib/components/molecules/tabs/types.ts

@@ -1,47 +0,0 @@
-import { Color } from '@ionic/core';
-
-/**
- * Single tab configuration.
- */
-export interface TabMetadata {
-  /** Unique tab identifier */
-  value: string;
-  /** Tab label (static) */
-  label?: string;
-  /** Tab icon name */
-  icon?: string;
-  /** Badge text or number */
-  badge?: string | number;
-  /** Badge color */
-  badgeColor?: Color;
-  /** Whether the tab is disabled */
-  disabled?: boolean;
-  /** Reactive content key for label */
-  contentKey?: string;
-  /** Component class name for content lookup */
-  contentClass?: string;
-  /** Fallback for label */
-  contentFallback?: string;
-}
-
-/**
- * Metadata for the tabs component.
- */
-export interface TabsMetadata {
-  /** Tab items */
-  tabs: TabMetadata[];
-  /** Currently selected tab value */
-  selectedTab?: string;
-  /** Tabs color */
-  color?: Color;
-  /** Tab bar position */
-  position?: 'top' | 'bottom';
-  /** Tab layout */
-  layout?: 'icon-top' | 'icon-start' | 'icon-end' | 'icon-bottom' | 'icon-hide' | 'label-hide';
-  /** Unique token identifier */
-  token?: string;
-  /** Mode style */
-  mode?: 'ios' | 'md';
-  /** Translucent background */
-  translucent?: boolean;
-}

package/src/lib/components/molecules/testimonial-card/testimonial-card.component.scss

@@ -1,25 +0,0 @@
-.testimonial-card {
-  position: relative;
-  overflow: hidden;
-  border-radius: 16px;
-  margin: 10px;
-
-  .testimonial-card__content {
-    position: relative;
-    z-index: 1;
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-    height: 100%;
-    min-height: 450px;
-    max-height: 450px;
-    min-width: 300px;
-    padding: 16px;
-  }
-
-  .image-container {
-    display: flex;
-    justify-content: center;
-    margin-bottom: 16px;
-  }
-}

package/src/lib/components/molecules/testimonial-card/testimonial-card.component.ts

@@ -1,121 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { Component, inject, Input } from '@angular/core';
-import { IonCard, IonCardContent } from '@ionic/angular/standalone';
-import { ThemeService } from '../../../services/theme.service';
-import { ImageComponent } from '../../atoms/image/image.component';
-import { ButtonGroupComponent } from '../button-group/button-group.component';
-import { LinkComponent } from '../link/link.component';
-import { TitleBlockComponent } from '../title-block/title-block.component';
-import { TestimonialCardMetadata } from './types';
-
-/**
- * val-testimonial-card
- *
- * A card component for testimonials with image, title, link, and action buttons.
- * Supports dynamic background gradients and dark mode overlay.
- *
- * @example
- * <val-testimonial-card
- *   [props]="{
- *     title: { title: 'John Doe', subtitle: 'CEO, Company' },
- *     link: { text: 'Read full story', url: '#' },
- *     image: { src: 'avatar.jpg', alt: 'John Doe' },
- *     color: 'primary'
- *   }"
- * ></val-testimonial-card>
- *
- * @input props - Card configuration (title, link, image, color, background, actions)
- */
-@Component({
-  selector: 'val-testimonial-card',
-  standalone: true,
-  imports: [CommonModule, IonCard, IonCardContent, LinkComponent, TitleBlockComponent, ImageComponent, ButtonGroupComponent],
-  template: `
-    <ion-card class="testimonial-card" [ngStyle]="cardStyle()">
-      <ion-card-content
-        class="testimonial-card__content"
-        [style.min-height]="props.minHeight || '450px'"
-        [style.max-height]="props.minHeight || '450px'"
-        [style.min-width]="props.minWidth || '300px'"
-      >
-        <section>
-          @if (props.image) {
-            <section class="image-container">
-              <val-image style="display: contents;" [props]="props.image" />
-            </section>
-          }
-          <val-title-block [props]="props.title" />
-        </section>
-
-        @if (props.link) {
-          <val-link [props]="props.link" />
-        }
-
-        @if (props.actions) {
-          <val-button-group [props]="props.actions" />
-        }
-      </ion-card-content>
-    </ion-card>
-  `,
-  styleUrls: ['./testimonial-card.component.scss'],
-})
-export class TestimonialCardComponent {
-  private theme = inject(ThemeService);
-
-  /**
-   * Card configuration.
-   */
-  @Input() props!: TestimonialCardMetadata;
-
-  /**
-   * Gets the effective color/background.
-   * Supports: Ionic color names (primary, secondary), CSS variables (--my-color),
-   * direct colors (#fff, rgb()), or url() for images.
-   */
-  private getColor(): string {
-    const color = this.props.background || this.props.color || 'secondary';
-
-    // If it's a CSS variable, url, gradient, or direct color value, return as-is
-    if (
-      color.startsWith('--') ||
-      color.startsWith('var(') ||
-      color.startsWith('url(') ||
-      color.startsWith('#') ||
-      color.startsWith('rgb') ||
-      color.startsWith('hsl') ||
-      color.includes('gradient')
-    ) {
-      return color.startsWith('--') ? `var(${color})` : color;
-    }
-
-    // Assume it's an Ionic color name
-    return `var(--ion-color-${color})`;
-  }
-
-  /**
-   * Generates dynamic card styles with overlay based on theme.
-   */
-  cardStyle(): { [key: string]: string } {
-    const isDark = this.theme.IsDark;
-    const overlay = isDark
-      ? 'linear-gradient(0deg, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.45) 100%)'
-      : 'linear-gradient(0deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.55) 100%)';
-    const color = this.getColor();
-
-    // If color is an image URL
-    if (typeof color === 'string' && color.startsWith('url(')) {
-      return {
-        backgroundImage: `${overlay}, ${color}`,
-        backgroundSize: 'cover',
-        backgroundPosition: 'center',
-      };
-    }
-
-    // Gradient overlay over any background
-    return {
-      backgroundImage: `${overlay}, linear-gradient(200deg, var(--ion-color-light) 2%, ${color} 95%)`,
-      backgroundSize: 'cover',
-      backgroundPosition: 'center',
-    };
-  }
-}

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

@@ -1,130 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/angular';
-import { moduleMetadata } from '@storybook/angular';
-import { CommonModule } from '@angular/common';
-import { TestimonialCardComponent } from './testimonial-card.component';
-
-const meta: Meta<TestimonialCardComponent> = {
-  title: 'Molecules/TestimonialCard',
-  component: TestimonialCardComponent,
-  decorators: [
-    moduleMetadata({
-      imports: [CommonModule, TestimonialCardComponent],
-    }),
-  ],
-  tags: ['autodocs'],
-  argTypes: {
-    props: {
-      description: 'Card configuration object',
-      control: 'object',
-    },
-  },
-  parameters: {
-    docs: {
-      description: {
-        component: `
-## val-testimonial-card
-
-A card component for testimonials featuring image, title, link, and action buttons.
-
-### Usage
-
-\`\`\`html
-<val-testimonial-card
-  [props]="{
-    title: { position: 'center', title: { content: 'John Doe', size: 'medium' } },
-    image: { src: 'avatar.jpg', alt: 'John Doe', mode: 'circular', size: 'large' },
-    background: 'linear-gradient(135deg, #667eea, #764ba2)'
-  }"
-></val-testimonial-card>
-\`\`\`
-        `,
-      },
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj<TestimonialCardComponent>;
-
-export const Default: Story = {
-  args: {
-    props: {
-      title: {
-        position: 'center',
-        title: { content: 'Amazing Experience', size: 'medium', color: 'dark', bold: true },
-        bellowTitle: { content: 'John Doe, CEO at TechCorp', size: 'small', color: 'medium', bold: false },
-      },
-      background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
-    },
-  },
-};
-
-export const WithImage: Story = {
-  args: {
-    props: {
-      title: {
-        position: 'center',
-        title: { content: 'Life-changing Product', size: 'medium', color: 'dark', bold: true },
-        bellowTitle: { content: 'Jane Smith, Product Manager', size: 'small', color: 'medium', bold: false },
-      },
-      image: {
-        src: 'https://i.pravatar.cc/150?img=5',
-        alt: 'Jane Smith',
-        mode: 'circular',
-        shaded: false,
-        bordered: false,
-        size: 'large',
-      },
-      background: 'linear-gradient(135deg, #11998e 0%, #38ef7d 100%)',
-    },
-  },
-};
-
-export const WithActions: Story = {
-  args: {
-    props: {
-      title: {
-        position: 'center',
-        title: { content: 'Best Decision Ever', size: 'medium', color: 'light', bold: true },
-        bellowTitle: { content: 'Mike Johnson, Founder', size: 'small', color: 'light', bold: false },
-      },
-      actions: {
-        buttons: [
-          { text: 'Contact', color: 'light', fill: 'solid', state: 'ENABLED', type: 'button' },
-          { text: 'Learn More', color: 'light', fill: 'outline', state: 'ENABLED', type: 'button' },
-        ],
-        position: 'center',
-        columned: false,
-      },
-      background: 'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)',
-    },
-  },
-};
-
-export const WithBackgroundImage: Story = {
-  args: {
-    props: {
-      title: {
-        position: 'center',
-        title: { content: 'Great Partnership', size: 'medium', color: 'light', bold: true },
-        bellowTitle: { content: 'Sarah Lee, Director', size: 'small', color: 'light', bold: false },
-      },
-      background: 'url(https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=400)',
-    },
-  },
-};
-
-export const CustomDimensions: Story = {
-  args: {
-    props: {
-      title: {
-        position: 'center',
-        title: { content: 'Compact Card', size: 'medium', color: 'light', bold: true },
-        bellowTitle: { content: 'Shorter testimonial', size: 'small', color: 'light', bold: false },
-      },
-      background: 'linear-gradient(135deg, #84fab0 0%, #8fd3f4 100%)',
-      minHeight: '350px',
-      minWidth: '250px',
-    },
-  },
-};

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

@@ -1,26 +0,0 @@
-import { ButtonGroupMetadata } from '../button-group/types';
-import { ImageMetadata } from '../../atoms/image/types';
-import { LinkMetadata } from '../link/types';
-import { TitleBlockMetada } from '../title-block/types';
-
-/**
- * Configuration for the testimonial card component.
- */
-export interface TestimonialCardMetadata {
-  /** Title block configuration */
-  title: TitleBlockMetada;
-  /** Optional link configuration */
-  link?: LinkMetadata;
-  /** Optional image configuration */
-  image?: ImageMetadata;
-  /** Background color (Ionic color, CSS color, or CSS variable) */
-  color?: string;
-  /** Background (url(...) for image, gradient, or color) */
-  background?: string;
-  /** Optional action buttons */
-  actions?: ButtonGroupMetadata;
-  /** Minimum height of the card. Default: '450px' */
-  minHeight?: string;
-  /** Minimum width of the card. Default: '300px' */
-  minWidth?: string;
-}

package/src/lib/components/molecules/text-input/text-input.component.scss

@@ -1 +0,0 @@
-@import '../../organisms/form/form.component.scss';