valtech-components 2.0.687 → 2.0.689

package/src/lib/components/atoms/skeleton/skeleton.component.ts

@@ -0,0 +1,129 @@
+import { Component, Input } from '@angular/core';
+import { IonSkeletonText } from '@ionic/angular/standalone';
+import { CommonModule } from '@angular/common';
+import { SkeletonMetadata, SKELETON_PRESETS } from './types';
+
+@Component({
+  selector: 'val-skeleton',
+  standalone: true,
+  imports: [CommonModule, IonSkeletonText],
+  template: `
+    @switch (props.type) {
+      @case ('paragraph') {
+        <div class="skeleton-paragraph">
+          @for (line of getLines(); track $index; let isLast = $last) {
+            <ion-skeleton-text
+              [animated]="props.animated !== false"
+              [style.width]="isLast ? '60%' : '100%'"
+              [style.height]="getHeight()"
+              [style.border-radius]="getBorderRadius()"
+            ></ion-skeleton-text>
+          }
+        </div>
+      }
+      @case ('list-item') {
+        <div class="skeleton-list-item">
+          <ion-skeleton-text
+            [animated]="props.animated !== false"
+            class="skeleton-avatar"
+          ></ion-skeleton-text>
+          <div class="skeleton-content">
+            <ion-skeleton-text
+              [animated]="props.animated !== false"
+              style="width: 70%; height: 14px;"
+            ></ion-skeleton-text>
+            <ion-skeleton-text
+              [animated]="props.animated !== false"
+              style="width: 50%; height: 12px;"
+            ></ion-skeleton-text>
+          </div>
+        </div>
+      }
+      @case ('card') {
+        <div class="skeleton-card">
+          <ion-skeleton-text
+            [animated]="props.animated !== false"
+            class="skeleton-card-image"
+          ></ion-skeleton-text>
+          <div class="skeleton-card-content">
+            <ion-skeleton-text
+              [animated]="props.animated !== false"
+              style="width: 80%; height: 16px;"
+            ></ion-skeleton-text>
+            <ion-skeleton-text
+              [animated]="props.animated !== false"
+              style="width: 60%; height: 12px;"
+            ></ion-skeleton-text>
+          </div>
+        </div>
+      }
+      @default {
+        <ion-skeleton-text
+          [animated]="props.animated !== false"
+          [style.width]="getWidth()"
+          [style.height]="getHeight()"
+          [style.border-radius]="getBorderRadius()"
+          [class.circle]="isCircle()"
+        ></ion-skeleton-text>
+      }
+    }
+  `,
+  styleUrls: ['./skeleton.component.scss'],
+})
+/**
+ * val-skeleton
+ *
+ * A skeleton loader component for content placeholders.
+ * Supports various presets for common UI patterns.
+ *
+ * @example Text skeleton
+ * <val-skeleton [props]="{ type: 'text' }"></val-skeleton>
+ *
+ * @example Avatar skeleton
+ * <val-skeleton [props]="{ type: 'avatar' }"></val-skeleton>
+ *
+ * @example Paragraph skeleton
+ * <val-skeleton [props]="{ type: 'paragraph', lines: 4 }"></val-skeleton>
+ *
+ * @example Custom skeleton
+ * <val-skeleton [props]="{
+ *   type: 'custom',
+ *   width: '200px',
+ *   height: '100px',
+ *   borderRadius: '12px'
+ * }"></val-skeleton>
+ *
+ * @input props: SkeletonMetadata - Configuration for the skeleton
+ */
+export class SkeletonComponent {
+  @Input() props: SkeletonMetadata = { type: 'text' };
+
+  getWidth(): string {
+    if (this.props.width) return this.props.width;
+    const preset = SKELETON_PRESETS[this.props.type || 'text'];
+    return preset.width || '100%';
+  }
+
+  getHeight(): string {
+    if (this.props.height) return this.props.height;
+    const preset = SKELETON_PRESETS[this.props.type || 'text'];
+    return preset.height || '16px';
+  }
+
+  getBorderRadius(): string {
+    if (this.props.borderRadius) return this.props.borderRadius;
+    if (this.isCircle()) return '50%';
+    const preset = SKELETON_PRESETS[this.props.type || 'text'];
+    return preset.borderRadius || '4px';
+  }
+
+  isCircle(): boolean {
+    if (this.props.circle !== undefined) return this.props.circle;
+    return this.props.type === 'avatar';
+  }
+
+  getLines(): number[] {
+    const lines = this.props.lines || SKELETON_PRESETS[this.props.type || 'text'].lines || 1;
+    return Array(lines).fill(0);
+  }
+}

package/src/lib/components/atoms/skeleton/skeleton.stories.ts

@@ -0,0 +1,242 @@
+import type { Meta, StoryObj } from '@storybook/angular';
+import { moduleMetadata } from '@storybook/angular';
+import { CommonModule } from '@angular/common';
+import { SkeletonComponent } from './skeleton.component';
+import { SkeletonMetadata } from './types';
+
+const createSkeletonProps = (overrides: Partial<SkeletonMetadata> = {}): SkeletonMetadata => ({
+  type: 'text',
+  animated: true,
+  ...overrides,
+});
+
+// Pre-create all props at module level
+const textProps = createSkeletonProps({ type: 'text' });
+const avatarProps = createSkeletonProps({ type: 'avatar' });
+const thumbnailProps = createSkeletonProps({ type: 'thumbnail' });
+const cardProps = createSkeletonProps({ type: 'card' });
+const listItemProps = createSkeletonProps({ type: 'list-item' });
+const paragraphProps = createSkeletonProps({ type: 'paragraph', lines: 3 });
+const paragraphLongProps = createSkeletonProps({ type: 'paragraph', lines: 5 });
+const customProps = createSkeletonProps({
+  type: 'custom',
+  width: '200px',
+  height: '100px',
+  borderRadius: '12px',
+});
+const noAnimationProps = createSkeletonProps({ type: 'text', animated: false });
+const circleProps = createSkeletonProps({ type: 'custom', width: '60px', height: '60px', circle: true });
+
+// Showcase props
+const showcaseTextProps = createSkeletonProps({ type: 'text' });
+const showcaseAvatarProps = createSkeletonProps({ type: 'avatar' });
+const showcaseThumbnailProps = createSkeletonProps({ type: 'thumbnail' });
+const showcaseParagraphProps = createSkeletonProps({ type: 'paragraph', lines: 3 });
+const showcaseCardProps = createSkeletonProps({ type: 'card' });
+const showcaseListItem1Props = createSkeletonProps({ type: 'list-item' });
+const showcaseListItem2Props = createSkeletonProps({ type: 'list-item' });
+const showcaseListItem3Props = createSkeletonProps({ type: 'list-item' });
+
+const meta: Meta<SkeletonComponent> = {
+  title: 'Atoms/Skeleton',
+  component: SkeletonComponent,
+  decorators: [
+    moduleMetadata({
+      imports: [CommonModule, SkeletonComponent],
+    }),
+  ],
+  tags: ['autodocs'],
+  argTypes: {
+    props: {
+      description: 'Skeleton configuration object',
+      control: 'object',
+      table: {
+        type: {
+          summary: 'SkeletonMetadata',
+          detail: `{
+  type?: 'text' | 'avatar' | 'thumbnail' | 'card' | 'list-item' | 'paragraph' | 'custom';
+  lines?: number;
+  animated?: boolean;
+  width?: string;
+  height?: string;
+  borderRadius?: string;
+  circle?: boolean;
+}`,
+        },
+      },
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: `
+## val-skeleton
+
+A skeleton loader component for content placeholders while data is loading.
+
+### Types
+
+- **text**: Single line text placeholder
+- **avatar**: Circular avatar placeholder
+- **thumbnail**: Square image placeholder
+- **card**: Card-shaped placeholder
+- **list-item**: List item with avatar and text
+- **paragraph**: Multiple lines of text
+- **custom**: Custom dimensions
+
+### Usage
+
+\`\`\`html
+<val-skeleton [props]="{ type: 'avatar' }"></val-skeleton>
+<val-skeleton [props]="{ type: 'paragraph', lines: 4 }"></val-skeleton>
+<val-skeleton [props]="{ type: 'custom', width: '200px', height: '100px' }"></val-skeleton>
+\`\`\`
+        `,
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<SkeletonComponent>;
+
+export const Text: Story = {
+  render: () => ({
+    template: `<val-skeleton [props]="skeletonProps"></val-skeleton>`,
+    props: { skeletonProps: textProps },
+  }),
+};
+
+export const Avatar: Story = {
+  render: () => ({
+    template: `<val-skeleton [props]="skeletonProps"></val-skeleton>`,
+    props: { skeletonProps: avatarProps },
+  }),
+};
+
+export const Thumbnail: Story = {
+  render: () => ({
+    template: `<val-skeleton [props]="skeletonProps"></val-skeleton>`,
+    props: { skeletonProps: thumbnailProps },
+  }),
+};
+
+export const Card: Story = {
+  render: () => ({
+    template: `<val-skeleton [props]="skeletonProps"></val-skeleton>`,
+    props: { skeletonProps: cardProps },
+  }),
+};
+
+export const ListItem: Story = {
+  render: () => ({
+    template: `<val-skeleton [props]="skeletonProps"></val-skeleton>`,
+    props: { skeletonProps: listItemProps },
+  }),
+};
+
+export const Paragraph: Story = {
+  render: () => ({
+    template: `<val-skeleton [props]="skeletonProps"></val-skeleton>`,
+    props: { skeletonProps: paragraphProps },
+  }),
+};
+
+export const ParagraphLong: Story = {
+  render: () => ({
+    template: `<val-skeleton [props]="skeletonProps"></val-skeleton>`,
+    props: { skeletonProps: paragraphLongProps },
+  }),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Paragraph with 5 lines.',
+      },
+    },
+  },
+};
+
+export const Custom: Story = {
+  render: () => ({
+    template: `<val-skeleton [props]="skeletonProps"></val-skeleton>`,
+    props: { skeletonProps: customProps },
+  }),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Custom dimensions: 200x100px with rounded corners.',
+      },
+    },
+  },
+};
+
+export const Circle: Story = {
+  render: () => ({
+    template: `<val-skeleton [props]="skeletonProps"></val-skeleton>`,
+    props: { skeletonProps: circleProps },
+  }),
+};
+
+export const NoAnimation: Story = {
+  render: () => ({
+    template: `<val-skeleton [props]="skeletonProps"></val-skeleton>`,
+    props: { skeletonProps: noAnimationProps },
+  }),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Skeleton without animation.',
+      },
+    },
+  },
+};
+
+export const Showcase: Story = {
+  render: () => ({
+    template: `
+      <div style="display: flex; flex-direction: column; gap: 32px; max-width: 400px;">
+        <div>
+          <h3 style="margin: 0 0 16px; font-family: system-ui;">Text</h3>
+          <val-skeleton [props]="text"></val-skeleton>
+        </div>
+
+        <div>
+          <h3 style="margin: 0 0 16px; font-family: system-ui;">Avatar & Thumbnail</h3>
+          <div style="display: flex; gap: 16px; align-items: center;">
+            <val-skeleton [props]="avatar"></val-skeleton>
+            <val-skeleton [props]="thumbnail"></val-skeleton>
+          </div>
+        </div>
+
+        <div>
+          <h3 style="margin: 0 0 16px; font-family: system-ui;">Paragraph</h3>
+          <val-skeleton [props]="paragraph"></val-skeleton>
+        </div>
+
+        <div>
+          <h3 style="margin: 0 0 16px; font-family: system-ui;">Card</h3>
+          <val-skeleton [props]="card"></val-skeleton>
+        </div>
+
+        <div>
+          <h3 style="margin: 0 0 16px; font-family: system-ui;">List Items</h3>
+          <div style="display: flex; flex-direction: column; gap: 8px;">
+            <val-skeleton [props]="listItem1"></val-skeleton>
+            <val-skeleton [props]="listItem2"></val-skeleton>
+            <val-skeleton [props]="listItem3"></val-skeleton>
+          </div>
+        </div>
+      </div>
+    `,
+    props: {
+      text: showcaseTextProps,
+      avatar: showcaseAvatarProps,
+      thumbnail: showcaseThumbnailProps,
+      paragraph: showcaseParagraphProps,
+      card: showcaseCardProps,
+      listItem1: showcaseListItem1Props,
+      listItem2: showcaseListItem2Props,
+      listItem3: showcaseListItem3Props,
+    },
+  }),
+};

package/src/lib/components/atoms/skeleton/types.ts

@@ -0,0 +1,39 @@
+/**
+ * Skeleton type presets.
+ */
+export type SkeletonType = 'text' | 'avatar' | 'thumbnail' | 'card' | 'list-item' | 'paragraph' | 'custom';
+
+/**
+ * Metadata for the skeleton component.
+ */
+export interface SkeletonMetadata {
+  /** Skeleton type preset */
+  type?: SkeletonType;
+  /** Number of lines (for text/paragraph type) */
+  lines?: number;
+  /** Enable animation */
+  animated?: boolean;
+  /** Custom width */
+  width?: string;
+  /** Custom height */
+  height?: string;
+  /** Border radius */
+  borderRadius?: string;
+  /** Show as circle (for avatar) */
+  circle?: boolean;
+  /** Unique token identifier */
+  token?: string;
+}
+
+/**
+ * Preset configurations for skeleton types.
+ */
+export const SKELETON_PRESETS: Record<SkeletonType, Partial<SkeletonMetadata>> = {
+  text: { width: '100%', height: '16px', borderRadius: '4px' },
+  avatar: { width: '48px', height: '48px', circle: true },
+  thumbnail: { width: '80px', height: '80px', borderRadius: '8px' },
+  card: { width: '100%', height: '120px', borderRadius: '8px' },
+  'list-item': { width: '100%', height: '56px', borderRadius: '4px' },
+  paragraph: { width: '100%', height: '16px', borderRadius: '4px', lines: 3 },
+  custom: {},
+};

package/src/lib/components/atoms/text/text.component.scss

@@ -0,0 +1,38 @@
+@import '../../styles/typography.scss';
+
+.small {
+  @include body-small;
+
+  &.bold {
+    @include body-small-bold;
+  }
+}
+
+.medium {
+  @include body-medium;
+
+  &.bold {
+    @include body-medium-bold;
+  }
+}
+
+.large {
+  @include body-large;
+
+  &.bold {
+    @include body-large-bold;
+  }
+}
+
+.xlarge {
+  @include body-xlarge;
+
+  &.bold {
+    @include body-xlarge-bold;
+  }
+}
+
+// Partial bold support
+:host ::ng-deep .partial-bold {
+  font-weight: bold;
+}

package/src/lib/components/atoms/text/text.component.ts

@@ -0,0 +1,123 @@
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
+import { IonText } from '@ionic/angular/standalone';
+import { ProcessLinksPipe } from '../../../shared/pipes/process-links.pipe';
+import { TextMetadata } from './types';
+
+@Component({
+  selector: 'val-text',
+  standalone: true,
+  imports: [IonText, ProcessLinksPipe],
+  template: `
+    <ion-text [color]="propsColor()">
+      @if (propsProcessLinks()) {
+        <p
+          [class]="propsSize()"
+          [class.bold]="propsBold()"
+          [innerHTML]="displayContent() | processLinks: propsLinkConfig()"
+        ></p>
+      } @else if (propsAllowPartialBold() && hasPartialBold()) {
+        <p [class]="propsSize()" [class.bold]="propsBold()" [innerHTML]="processPartialBold()"></p>
+      } @else {
+        <p [class]="propsSize()" [class.bold]="propsBold()">{{ displayContent() }}</p>
+      }
+    </ion-text>
+  `,
+  styleUrls: ['./text.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+/**
+ * val-text
+ *
+ * Text component that supports static content with optional interpolation.
+ *
+ * @example Static content:
+ * ```html
+ * <val-text [props]="{
+ *   content: 'Static text',
+ *   color: 'primary',
+ *   size: 'medium',
+ *   bold: false
+ * }"></val-text>
+ * ```
+ *
+ * @example With automatic link processing:
+ * ```html
+ * <val-text [props]="{
+ *   content: 'Visit https://example.com for more info',
+ *   processLinks: true,
+ *   color: 'primary',
+ *   size: 'medium'
+ * }"></val-text>
+ * ```
+ *
+ * @example With partial bold support:
+ * ```html
+ * <val-text [props]="{
+ *   content: 'Hola <b>Victor</b>, cómo estás?',
+ *   allowPartialBold: true,
+ *   color: 'dark',
+ *   size: 'medium'
+ * }"></val-text>
+ * ```
+ *
+ * @input props: TextMetadata - Configuration for the text (content, color, size, bold, etc.)
+ */
+export class TextComponent {
+  /**
+   * Text configuration object.
+   * Signal-based input for full reactivity with computed().
+   */
+  readonly props = input<TextMetadata>();
+
+  /**
+   * Computed content that SE ACTUALIZA when props() changes.
+   */
+  displayContent = computed(() => {
+    const p = this.props();
+    if (!p) return '';
+
+    if (p.content) {
+      if (p.contentInterpolation) {
+        return this.interpolateContent(p.content, p.contentInterpolation);
+      }
+      return p.content;
+    }
+    return p.contentFallback || '';
+  });
+
+  // Computed helpers for template bindings
+  propsColor = computed(() => this.props()?.color);
+  propsSize = computed(() => this.props()?.size);
+  propsBold = computed(() => this.props()?.bold);
+  propsProcessLinks = computed(() => this.props()?.processLinks);
+  propsAllowPartialBold = computed(() => this.props()?.allowPartialBold);
+  propsLinkConfig = computed(() => this.props()?.linkConfig);
+
+  /**
+   * Check if content has partial bold tags.
+   */
+  hasPartialBold = computed(() => {
+    const content = this.displayContent();
+    return content?.includes('<b>') || content?.includes('<strong>');
+  });
+
+  /**
+   * Process partial bold tags in the content.
+   */
+  processPartialBold = computed(() => {
+    const content = this.displayContent();
+    if (!content) return '';
+
+    let processed = content.replace(/<b>(.*?)<\/b>/gi, '<span class="partial-bold">$1</span>');
+    return processed.replace(/<strong>(.*?)<\/strong>/gi, '<span class="partial-bold">$1</span>');
+  });
+
+  /**
+   * Interpolate placeholders in content with provided values.
+   */
+  private interpolateContent(content: string, values: Record<string, any>): string {
+    return content.replace(/\{\{(\w+)\}\}/g, (match, key) => {
+      return values[key] !== undefined ? String(values[key]) : match;
+    });
+  }
+}