valtech-components 2.0.690 → 2.0.691

package/src/lib/components/molecules/expandable-text/expandable-text.stories.ts

@@ -0,0 +1,287 @@
+import type { Meta, StoryObj } from '@storybook/angular';
+import { moduleMetadata } from '@storybook/angular';
+import { CommonModule } from '@angular/common';
+import { ExpandableTextComponent } from './expandable-text.component';
+import { ExpandableTextInput } from './types';
+
+const meta: Meta<ExpandableTextComponent> = {
+  title: 'Molecules/Expandable Text',
+  component: ExpandableTextComponent,
+  decorators: [
+    moduleMetadata({
+      imports: [CommonModule, ExpandableTextComponent],
+    }),
+  ],
+  tags: ['autodocs'],
+  argTypes: {
+    props: {
+      description: 'Expandable text configuration object',
+      control: 'object',
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: `
+## val-expandable-text
+
+A text component that truncates long content and provides a "see more" link to expand.
+
+### Usage
+
+\`\`\`html
+<val-expandable-text
+  [props]="{
+    content: 'Long text content here...',
+    limit: 100,
+    color: 'primary',
+    expandText: 'Ver más'
+  }">
+</val-expandable-text>
+\`\`\`
+
+### Features
+
+- Automatic truncation based on character limit
+- Smooth expand/collapse animation
+- Gradient fade effect when truncated
+- Customizable "see more" text and color
+- Responsive to content changes
+        `,
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<ExpandableTextComponent>;
+
+const longText = `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.`;
+
+const mediumText = `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.`;
+
+const shortText = `Lorem ipsum dolor sit amet, consectetur adipiscing elit.`;
+
+const createProps = (overrides: Partial<ExpandableTextInput> = {}): ExpandableTextInput => ({
+  content: longText,
+  limit: 150,
+  color: 'primary',
+  ...overrides,
+});
+
+export const Default: Story = {
+  args: {
+    props: createProps(),
+  },
+};
+
+export const ShortLimit: Story = {
+  args: {
+    props: createProps({
+      limit: 80,
+    }),
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Expandable text with a short character limit for more aggressive truncation.',
+      },
+    },
+  },
+};
+
+export const LongLimit: Story = {
+  args: {
+    props: createProps({
+      limit: 300,
+    }),
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Expandable text with a longer character limit.',
+      },
+    },
+  },
+};
+
+export const NoTruncation: Story = {
+  args: {
+    props: createProps({
+      content: shortText,
+      limit: 200,
+    }),
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'When content is shorter than the limit, no truncation occurs.',
+      },
+    },
+  },
+};
+
+export const CustomExpandText: Story = {
+  args: {
+    props: createProps({
+      expandText: 'Leer más',
+    }),
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Expandable text with custom expand link text.',
+      },
+    },
+  },
+};
+
+export const EnglishExpandText: Story = {
+  args: {
+    props: createProps({
+      expandText: 'Read more',
+    }),
+  },
+};
+
+export const PrimaryColor: Story = {
+  args: {
+    props: createProps({
+      color: 'primary',
+    }),
+  },
+};
+
+export const SecondaryColor: Story = {
+  args: {
+    props: createProps({
+      color: 'secondary',
+    }),
+  },
+};
+
+export const TertiaryColor: Story = {
+  args: {
+    props: createProps({
+      color: 'tertiary',
+    }),
+  },
+};
+
+export const SuccessColor: Story = {
+  args: {
+    props: createProps({
+      color: 'success',
+    }),
+  },
+};
+
+export const DangerColor: Story = {
+  args: {
+    props: createProps({
+      color: 'danger',
+    }),
+  },
+};
+
+export const ProductDescription: Story = {
+  args: {
+    props: createProps({
+      content: `This premium wireless headphone delivers exceptional sound quality with active noise cancellation technology. Features include 30-hour battery life, comfortable over-ear design with memory foam cushions, and Bluetooth 5.0 connectivity. The headphones come with a carrying case, USB-C charging cable, and 3.5mm audio cable for wired use. Perfect for music lovers, gamers, and professionals who need crystal-clear audio for calls and conferences.`,
+      limit: 180,
+      expandText: 'Ver especificaciones completas',
+      color: 'primary',
+    }),
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Example use case: Product description that expands to show full details.',
+      },
+    },
+  },
+};
+
+export const ArticlePreview: Story = {
+  args: {
+    props: createProps({
+      content: `Breaking news from the tech industry: A major smartphone manufacturer announced today their latest flagship device featuring groundbreaking camera technology and a revolutionary battery system. The new device promises to deliver 48 hours of battery life under normal usage conditions. The announcement comes ahead of the annual consumer electronics show, where the company plans to showcase the full lineup of products including smartwatches, tablets, and accessories.`,
+      limit: 200,
+      expandText: 'Continue reading',
+      color: 'secondary',
+    }),
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Example use case: News article preview.',
+      },
+    },
+  },
+};
+
+export const UserBio: Story = {
+  args: {
+    props: createProps({
+      content: `Software engineer with 10+ years of experience in full-stack development. Passionate about clean code, test-driven development, and mentoring junior developers. Currently focusing on cloud-native architectures and microservices. Open source contributor and tech blogger. When not coding, enjoys hiking, photography, and playing guitar.`,
+      limit: 120,
+      expandText: 'Show full bio',
+      color: 'tertiary',
+    }),
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Example use case: User profile biography.',
+      },
+    },
+  },
+};
+
+export const Showcase: Story = {
+  render: () => ({
+    template: `
+      <div style="display: flex; flex-direction: column; gap: 24px; padding: 16px; max-width: 600px;">
+        <h3 style="margin: 0; color: #666;">Different Limits</h3>
+
+        <div style="background: #f9f9f9; padding: 16px; border-radius: 8px;">
+          <p style="margin: 0 0 8px 0; font-size: 12px; color: #999;">Limit: 80 characters</p>
+          <val-expandable-text [props]="limit80Props"></val-expandable-text>
+        </div>
+
+        <div style="background: #f9f9f9; padding: 16px; border-radius: 8px;">
+          <p style="margin: 0 0 8px 0; font-size: 12px; color: #999;">Limit: 150 characters</p>
+          <val-expandable-text [props]="limit150Props"></val-expandable-text>
+        </div>
+
+        <div style="background: #f9f9f9; padding: 16px; border-radius: 8px;">
+          <p style="margin: 0 0 8px 0; font-size: 12px; color: #999;">Limit: 250 characters</p>
+          <val-expandable-text [props]="limit250Props"></val-expandable-text>
+        </div>
+
+        <h3 style="margin: 16px 0 0 0; color: #666;">Color Variants</h3>
+
+        <div style="display: flex; flex-direction: column; gap: 16px;">
+          <val-expandable-text [props]="primaryProps"></val-expandable-text>
+          <val-expandable-text [props]="secondaryProps"></val-expandable-text>
+          <val-expandable-text [props]="tertiaryProps"></val-expandable-text>
+        </div>
+      </div>
+    `,
+    props: {
+      limit80Props: createProps({ limit: 80 }),
+      limit150Props: createProps({ limit: 150 }),
+      limit250Props: createProps({ limit: 250 }),
+      primaryProps: createProps({ color: 'primary', limit: 100, expandText: 'Primary color' }),
+      secondaryProps: createProps({ color: 'secondary', limit: 100, expandText: 'Secondary color' }),
+      tertiaryProps: createProps({ color: 'tertiary', limit: 100, expandText: 'Tertiary color' }),
+    },
+  }),
+  parameters: {
+    docs: {
+      description: {
+        story: 'A showcase of expandable text with different limits and colors.',
+      },
+    },
+  },
+};

package/src/lib/components/molecules/expandable-text/types.ts

@@ -0,0 +1,14 @@
+/**
+ * Expandable text configuration object.
+ * @type {ExpandableTextInput}
+ * @property content - The text content to display.
+ * @property limit - The character limit before truncation.
+ * @property color - The color for the "see more" link.
+ * @property expandText - The text for the expand link (optional).
+ */
+export interface ExpandableTextInput {
+  limit: number; // Máxima longitud del texto antes de truncar
+  content: string; // Contenido a mostrar
+  color?: string; // Color del texto "ver más"
+  expandText?: string; // Texto para "ver más" o equivalente
+}

package/src/lib/components/molecules/features-list/features-list.component.ts

@@ -0,0 +1,251 @@
+import { CommonModule } from '@angular/common';
+import { Component, computed, inject, input } from '@angular/core';
+import { IonIcon } from '@ionic/angular/standalone';
+import { I18nService } from '../../../services/i18n';
+import { FeatureItem, FeaturesListMetadata, FEATURES_LIST_DEFAULTS } from './types';
+
+/**
+ * val-features-list
+ *
+ * A component to display a list of features with icons, titles, and descriptions.
+ * Supports i18n for all text content.
+ *
+ * @example
+ * ```html
+ * <val-features-list
+ *   [props]="{
+ *     features: [
+ *       { icon: 'flash-outline', titleKey: 'feature1Title', descriptionKey: 'feature1Desc' },
+ *       { icon: 'color-palette-outline', titleKey: 'feature2Title', descriptionKey: 'feature2Desc' }
+ *     ],
+ *     i18nNamespace: 'Features',
+ *     iconColor: 'primary',
+ *     mode: 'vertical'
+ *   }"
+ * />
+ * ```
+ *
+ * @example With custom SVG icons
+ * ```html
+ * <val-features-list
+ *   [props]="{
+ *     features: [
+ *       {
+ *         icon: 'custom',
+ *         svgPath: 'M13 2L3 14h9l-1 8 10-12h-9l1-8z',
+ *         titleKey: 'Fast & Secure',
+ *         descriptionKey: 'Modern authentication with OAuth and MFA'
+ *       }
+ *     ]
+ *   }"
+ * />
+ * ```
+ */
+@Component({
+  selector: 'val-features-list',
+  standalone: true,
+  imports: [CommonModule, IonIcon],
+  template: `
+    <div
+      class="features-list"
+      [class.features-list--vertical]="config().mode === 'vertical'"
+      [class.features-list--horizontal]="config().mode === 'horizontal'"
+      [class.features-list--gap-small]="config().gap === 'small'"
+      [class.features-list--gap-medium]="config().gap === 'medium'"
+      [class.features-list--gap-large]="config().gap === 'large'"
+      [class.features-list--center]="config().alignment === 'center'"
+    >
+      @for (feature of props().features; track feature.titleKey) {
+        <div class="feature">
+          <div
+            class="feature__icon"
+            [style.color]="iconColorStyle()"
+            [style.width.px]="config().iconSize"
+            [style.height.px]="config().iconSize"
+          >
+            @if (feature.icon === 'custom' && feature.svgPath) {
+              <svg
+                [attr.width]="config().iconSize"
+                [attr.height]="config().iconSize"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="1.5"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              >
+                <path [attr.d]="feature.svgPath" />
+              </svg>
+            } @else {
+              <ion-icon
+                [name]="feature.icon"
+                [style.font-size.px]="config().iconSize"
+              ></ion-icon>
+            }
+          </div>
+          <div class="feature__content">
+            <strong class="feature__title">{{ getTitle(feature) }}</strong>
+            <p class="feature__description">{{ getDescription(feature) }}</p>
+          </div>
+        </div>
+      }
+    </div>
+  `,
+  styles: [`
+    :host {
+      display: block;
+    }
+
+    .features-list {
+      display: flex;
+    }
+
+    .features-list--vertical {
+      flex-direction: column;
+    }
+
+    .features-list--horizontal {
+      flex-direction: row;
+      flex-wrap: wrap;
+    }
+
+    .features-list--horizontal .feature {
+      flex: 1;
+      min-width: 200px;
+    }
+
+    .features-list--gap-small {
+      gap: 1rem;
+    }
+
+    .features-list--gap-medium {
+      gap: 1.5rem;
+    }
+
+    .features-list--gap-large {
+      gap: 2rem;
+    }
+
+    .features-list--center {
+      align-items: center;
+      text-align: center;
+    }
+
+    .features-list--center .feature {
+      flex-direction: column;
+      align-items: center;
+    }
+
+    .features-list--center .feature__content {
+      text-align: center;
+    }
+
+    .feature {
+      display: flex;
+      align-items: flex-start;
+      gap: 1rem;
+    }
+
+    .feature__icon {
+      flex-shrink: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .feature__content {
+      flex: 1;
+    }
+
+    .feature__title {
+      display: block;
+      font-size: 1.1rem;
+      font-weight: 600;
+      color: var(--ion-text-color);
+      margin-bottom: 0.25rem;
+    }
+
+    .feature__description {
+      margin: 0;
+      font-size: 0.95rem;
+      color: var(--ion-color-medium);
+      line-height: 1.5;
+    }
+
+    /* Dark mode support */
+    @media (prefers-color-scheme: dark) {
+      .feature__title {
+        color: var(--ion-text-color, #fff);
+      }
+
+      .feature__description {
+        color: var(--ion-color-medium, #a0a0a0);
+      }
+
+      .feature__icon {
+        opacity: 0.9;
+      }
+    }
+
+    /* Ionic dark mode class support */
+    :host-context(.dark) .feature__title,
+    :host-context(body.dark) .feature__title,
+    :host-context([data-theme="dark"]) .feature__title {
+      color: var(--ion-text-color, #fff);
+    }
+
+    :host-context(.dark) .feature__description,
+    :host-context(body.dark) .feature__description,
+    :host-context([data-theme="dark"]) .feature__description {
+      color: var(--ion-color-medium, #a0a0a0);
+    }
+  `],
+})
+export class FeaturesListComponent {
+  private i18n = inject(I18nService);
+
+  /** Component configuration */
+  readonly props = input.required<FeaturesListMetadata>();
+
+  /** Merged configuration with defaults */
+  config = computed(() => ({
+    ...FEATURES_LIST_DEFAULTS,
+    ...this.props(),
+  }));
+
+  /** Resolved icon color (handles Ionic colors and CSS colors) */
+  iconColorStyle = computed(() => {
+    const color = this.config().iconColor;
+    // Check if it's an Ionic color variable
+    if (color && !color.startsWith('#') && !color.startsWith('rgb')) {
+      return `var(--ion-color-${color})`;
+    }
+    return color;
+  });
+
+  /**
+   * Get translated title or return direct text
+   */
+  getTitle(feature: FeatureItem): string {
+    const namespace = this.props().i18nNamespace;
+    if (namespace) {
+      // Track language changes
+      this.i18n.lang();
+      return this.i18n.t(feature.titleKey, namespace);
+    }
+    return feature.titleKey;
+  }
+
+  /**
+   * Get translated description or return direct text
+   */
+  getDescription(feature: FeatureItem): string {
+    const namespace = this.props().i18nNamespace;
+    if (namespace) {
+      // Track language changes
+      this.i18n.lang();
+      return this.i18n.t(feature.descriptionKey, namespace);
+    }
+    return feature.descriptionKey;
+  }
+}

package/src/lib/components/molecules/features-list/types.ts

@@ -0,0 +1,44 @@
+/**
+ * Feature item configuration
+ */
+export interface FeatureItem {
+  /** Ionicon name or 'custom' for SVG path */
+  icon: string;
+  /** SVG path data (only used when icon is 'custom') */
+  svgPath?: string;
+  /** Title i18n key or direct text */
+  titleKey: string;
+  /** Description i18n key or direct text */
+  descriptionKey: string;
+}
+
+/**
+ * Features list component configuration
+ */
+export interface FeaturesListMetadata {
+  /** Array of features to display */
+  features: FeatureItem[];
+  /** i18n namespace for translations (if using keys) */
+  i18nNamespace?: string;
+  /** Icon color (Ionic color or CSS color) */
+  iconColor?: string;
+  /** Icon size in pixels */
+  iconSize?: number;
+  /** Layout mode: 'vertical' stacks features, 'horizontal' displays them in a row */
+  mode?: 'vertical' | 'horizontal';
+  /** Gap between features */
+  gap?: 'small' | 'medium' | 'large';
+  /** Alignment of features */
+  alignment?: 'start' | 'center';
+}
+
+/**
+ * Default values for FeaturesListMetadata
+ */
+export const FEATURES_LIST_DEFAULTS: Required<Omit<FeaturesListMetadata, 'features' | 'i18nNamespace'>> = {
+  iconColor: 'primary',
+  iconSize: 32,
+  mode: 'vertical',
+  gap: 'medium',
+  alignment: 'start',
+};