valtech-components 2.0.687 → 2.0.689

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

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

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

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

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

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

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

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