valtech-components 2.0.691 → 2.0.692

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

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

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

@@ -1,39 +0,0 @@
-/**
- * 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

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

@@ -1,123 +0,0 @@
-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;
-    });
-  }
-}