valtech-components 2.0.787 → 2.0.795

package/src/lib/components/atoms/user-avatar/user-avatar.component.ts

@@ -0,0 +1,295 @@
+import { CommonModule } from '@angular/common';
+import { Component, computed, EventEmitter, Input, Output, signal } from '@angular/core';
+import { IonIcon } from '@ionic/angular/standalone';
+import { addIcons } from 'ionicons';
+import { personOutline } from 'ionicons/icons';
+import { UserAvatarMetadata } from './types';
+
+addIcons({ personOutline });
+
+/**
+ * `val-user-avatar`
+ *
+ * Avatar **smart** con cadena de fallback automática:
+ *
+ *   foto (`avatarUrl`) → iniciales (de `name`/`email`) → icono persona.
+ *
+ * Si la imagen falla en cargar (404, CORS, etc.), automáticamente cae a las
+ * iniciales sin que el caller tenga que hacer nada. Color de fondo derivado
+ * deterministicamente del user para que el mismo user tenga siempre el mismo
+ * color (a menos que `background` se sobrescriba).
+ *
+ * @example
+ * ```html
+ * <val-user-avatar [props]="{ user: auth.user() }" (onClick)="goProfile()" />
+ * ```
+ */
+@Component({
+  selector: 'val-user-avatar',
+  standalone: true,
+  imports: [CommonModule, IonIcon],
+  template: `
+    <button
+      type="button"
+      class="val-user-avatar"
+      [class.bordered]="resolvedProps().bordered"
+      [class.grayscale]="resolvedProps().grayscale"
+      [class.has-click]="hasClick"
+      [class]="shapeClass() + ' ' + sizeClass() + ' ' + (resolvedProps().cssClass || '')"
+      [style.background]="bgColor()"
+      [style.color]="resolvedProps().foreground || '#fff'"
+      [attr.aria-label]="ariaLabel()"
+      (click)="onClick.emit()"
+    >
+      <!-- Placeholder layer (siempre presente) — iniciales o icono. La imagen
+           se monta encima y hace fade-in al cargar; si falla queda invisible
+           y el placeholder permanece visible sin parpadeo. -->
+      @if (initials()) {
+        <span class="val-user-avatar__initials">{{ initials() }}</span>
+      } @else {
+        <ion-icon name="person-outline" class="val-user-avatar__icon" aria-hidden="true" />
+      }
+
+      @if (imageUrl()) {
+        <img
+          class="val-user-avatar__img"
+          [class.loaded]="imageLoaded()"
+          [src]="imageUrl()"
+          alt=""
+          loading="lazy"
+          decoding="async"
+          (error)="onImageError()"
+          (load)="onImageLoad()"
+        />
+      }
+    </button>
+  `,
+  styles: [
+    `
+      :host {
+        display: inline-flex;
+      }
+
+      .val-user-avatar {
+        position: relative;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        overflow: hidden;
+        padding: 0;
+        margin: 0;
+        border: none;
+        background: var(--ion-color-medium, #92949c);
+        color: #fff;
+        font-weight: 600;
+        font-family: inherit;
+        line-height: 1;
+        user-select: none;
+        cursor: default;
+        transition:
+          transform 0.15s ease,
+          box-shadow 0.15s ease;
+      }
+
+      .val-user-avatar.has-click {
+        cursor: pointer;
+      }
+
+      .val-user-avatar.has-click:hover {
+        transform: scale(1.04);
+      }
+
+      .val-user-avatar.has-click:active {
+        transform: scale(0.96);
+      }
+
+      /* Shape */
+      .val-user-avatar.circle {
+        border-radius: 50%;
+      }
+
+      .val-user-avatar.square {
+        border-radius: 8px;
+      }
+
+      /* Sizes */
+      .val-user-avatar.xsmall {
+        width: 24px;
+        height: 24px;
+        font-size: 0.625rem;
+      }
+      .val-user-avatar.small {
+        width: 32px;
+        height: 32px;
+        font-size: 0.75rem;
+      }
+      .val-user-avatar.medium {
+        width: 48px;
+        height: 48px;
+        font-size: 1rem;
+      }
+      .val-user-avatar.large {
+        width: 72px;
+        height: 72px;
+        font-size: 1.5rem;
+      }
+      .val-user-avatar.xlarge {
+        width: 96px;
+        height: 96px;
+        font-size: 2rem;
+      }
+
+      .val-user-avatar.bordered {
+        box-shadow: 0 0 0 2px var(--ion-background-color, #fff);
+      }
+
+      .val-user-avatar.grayscale {
+        filter: grayscale(100%);
+      }
+
+      /* Image layer — capa absoluta sobre el placeholder. Inicia invisible
+       * y fade-in cuando el navegador dispara el evento load. Si falla, la
+       * clase .loaded nunca se aplica → queda transparent y el placeholder de
+       * abajo permanece visible (sin flash blanco). */
+      .val-user-avatar__img {
+        position: absolute;
+        inset: 0;
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+        display: block;
+        opacity: 0;
+        transition: opacity 0.35s ease-in-out;
+        pointer-events: none;
+      }
+
+      .val-user-avatar__img.loaded {
+        opacity: 1;
+      }
+
+      .val-user-avatar__initials {
+        text-transform: uppercase;
+        letter-spacing: 0.02em;
+        position: relative;
+        z-index: 0;
+      }
+
+      .val-user-avatar__icon {
+        font-size: 60%;
+        position: relative;
+        z-index: 0;
+      }
+    `,
+  ],
+})
+export class UserAvatarComponent {
+  private readonly props_ = signal<UserAvatarMetadata>({});
+  private readonly imageFailed = signal(false);
+  /** Indica si el `<img>` actual disparó su evento `load`. Conduce el fade-in. */
+  protected readonly imageLoaded = signal(false);
+
+  @Input() set props(value: UserAvatarMetadata | undefined) {
+    const prev = this.props_();
+    const next = value ?? {};
+    this.props_.set(next);
+    // Reset estado de carga si cambia la URL — re-disparar fade-in.
+    const prevUrl = prev?.user?.avatarUrl || prev?.avatarUrl || '';
+    const nextUrl = next.user?.avatarUrl || next.avatarUrl || '';
+    if (prevUrl !== nextUrl) {
+      this.imageFailed.set(false);
+      this.imageLoaded.set(false);
+    }
+  }
+
+  @Output() onClick = new EventEmitter<void>();
+
+  /** Subscribers — usado para condicionar cursor/aria. */
+  get hasClick(): boolean {
+    return this.onClick.observed;
+  }
+
+  readonly resolvedProps = computed<UserAvatarMetadata>(() => this.props_());
+
+  /** Resuelve los campos del user (user prop > campos sueltos). */
+  private readonly resolvedUser = computed(() => {
+    const p = this.resolvedProps();
+    return {
+      name: p.user?.name?.trim() || p.name?.trim() || '',
+      email: p.user?.email?.trim() || p.email?.trim() || '',
+      avatarUrl: p.user?.avatarUrl?.trim() || p.avatarUrl?.trim() || '',
+    };
+  });
+
+  /**
+   * URL de imagen. Empty si la última carga falló — eso evita re-intentar
+   * con la misma URL cuando el browser ya marcó error. El placeholder
+   * (iniciales/icono) sigue visible debajo.
+   */
+  readonly imageUrl = computed(() => {
+    if (this.imageFailed()) return '';
+    return this.resolvedUser().avatarUrl;
+  });
+
+  /** Iniciales — 1-2 chars derivados de name (preferred) o email prefix. */
+  readonly initials = computed(() => {
+    const { name, email } = this.resolvedUser();
+    if (name) {
+      const parts = name.split(/\s+/).filter(Boolean);
+      if (parts.length >= 2) return parts[0]![0]! + parts[1]![0]!;
+      if (parts.length === 1 && parts[0]!.length >= 2) {
+        return parts[0]!.slice(0, 2);
+      }
+      return parts[0]?.[0] ?? '';
+    }
+    if (email) {
+      const prefix = email.split('@')[0] ?? '';
+      // Tomar 1-2 chars del prefix
+      if (prefix.length >= 2) return prefix.slice(0, 2);
+      return prefix[0] ?? '';
+    }
+    return '';
+  });
+
+  readonly sizeClass = computed(() => this.resolvedProps().size || 'small');
+  readonly shapeClass = computed(() => this.resolvedProps().shape || 'circle');
+
+  /** Background — explicito o derivado deterministicamente del user. */
+  readonly bgColor = computed(() => {
+    const p = this.resolvedProps();
+    if (p.background) return p.background;
+    const { name, email } = this.resolvedUser();
+    const seed = name || email || 'val';
+    return this.colorFromSeed(seed);
+  });
+
+  readonly ariaLabel = computed(() => {
+    const { name, email } = this.resolvedUser();
+    return name || email || 'User avatar';
+  });
+
+  onImageError(): void {
+    this.imageFailed.set(true);
+    this.imageLoaded.set(false);
+  }
+
+  onImageLoad(): void {
+    this.imageFailed.set(false);
+    this.imageLoaded.set(true);
+  }
+
+  /**
+   * Hash determinista string → HSL color del rango Valtech (purples/blues).
+   * Mismo seed → mismo color (consistencia entre sessions).
+   */
+  private colorFromSeed(seed: string): string {
+    let hash = 0;
+    for (let i = 0; i < seed.length; i++) {
+      hash = (hash * 31 + seed.charCodeAt(i)) >>> 0;
+    }
+    // Restringir a rango violet/blue (240-290°) para coherencia con palette
+    const hue = 240 + (hash % 50);
+    const sat = 55 + ((hash >>> 8) % 20); // 55-75%
+    const light = 38 + ((hash >>> 16) % 12); // 38-50% — siempre legible con fg blanco
+    return `hsl(${hue}, ${sat}%, ${light}%)`;
+  }
+}

package/src/lib/components/molecules/accordion/accordion.component.scss

@@ -0,0 +1,34 @@
+:host {
+  display: block;
+}
+
+ion-accordion-group {
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+ion-accordion {
+  margin: 0;
+
+  &:not(:last-child) {
+    border-bottom: 1px solid var(--ion-color-light-shade);
+  }
+}
+
+.accordion-content {
+  background: var(--ion-background-color);
+  color: var(--ion-text-color);
+  font-size: 14px;
+  line-height: 1.6;
+}
+
+ion-item[slot='header'] {
+  --padding-start: 16px;
+  --inner-padding-end: 16px;
+  font-weight: 500;
+}
+
+ion-icon[slot='start'] {
+  margin-right: 12px;
+  font-size: 20px;
+}

package/src/lib/components/molecules/accordion/accordion.component.ts

@@ -0,0 +1,103 @@
+import { Component, inject, Input, OnChanges, OnInit, Output, EventEmitter, SimpleChanges } from '@angular/core';
+import { IonAccordion, IonAccordionGroup, IonItem, IonLabel, IonIcon } from '@ionic/angular/standalone';
+import { CommonModule } from '@angular/common';
+import { PresetService } from '../../../services/presets';
+import { AccordionMetadata, AccordionItemMetadata } from './types';
+import { addIcons } from 'ionicons';
+import { chevronDown, helpCircle, informationCircle, documentText } from 'ionicons/icons';
+
+addIcons({ chevronDown, helpCircle, informationCircle, documentText });
+
+@Component({
+  selector: 'val-accordion',
+  standalone: true,
+  imports: [CommonModule, IonAccordion, IonAccordionGroup, IonItem, IonLabel, IonIcon],
+  template: `
+    <ion-accordion-group
+      [multiple]="resolvedProps.multiple ?? false"
+      [value]="resolvedProps.value"
+      [readonly]="resolvedProps.readonly ?? false"
+      [mode]="resolvedProps.mode"
+      (ionChange)="onAccordionChange($event)"
+    >
+      @for (item of resolvedProps.items; track item.value) {
+        <ion-accordion [value]="item.value" [disabled]="item.disabled">
+          <ion-item slot="header" [color]="resolvedProps.color || 'light'">
+            @if (item.icon) {
+              <ion-icon [name]="item.icon" slot="start"></ion-icon>
+            }
+            <ion-label>{{ getItemHeader(item) }}</ion-label>
+          </ion-item>
+          <div class="ion-padding accordion-content" slot="content">
+            {{ getItemContent(item) }}
+          </div>
+        </ion-accordion>
+      }
+    </ion-accordion-group>
+  `,
+  styleUrls: ['./accordion.component.scss'],
+})
+/**
+ * val-accordion
+ *
+ * An accordion component for collapsible content sections.
+ * Supports presets for reusable configurations.
+ *
+ * @example With preset:
+ * <val-accordion preset="faq" [props]="{ items: [...] }"></val-accordion>
+ *
+ * @example Static:
+ * <val-accordion [props]="{
+ *   items: [
+ *     { value: 'faq1', header: '¿Qué es esto?', content: 'Es un acordeón.' },
+ *     { value: 'faq2', header: '¿Cómo funciona?', content: 'Haz clic para expandir.' }
+ *   ]
+ * }"></val-accordion>
+ *
+ * @input preset: string - Name of preset to apply
+ * @input props: AccordionMetadata - Configuration for the accordion
+ * @output accordionChange: string | string[] - Emits expanded value(s)
+ */
+export class AccordionComponent implements OnInit, OnChanges {
+  private presets = inject(PresetService);
+
+  @Input() preset?: string;
+  @Input() props: Partial<AccordionMetadata> = {};
+
+  resolvedProps: AccordionMetadata = {} as AccordionMetadata;
+
+  @Output() accordionChange = new EventEmitter<string | string[] | null>();
+
+  ngOnInit() {
+    this.resolveProps();
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+    if (changes['preset'] || changes['props']) {
+      this.resolveProps();
+    }
+  }
+
+  private resolveProps(): void {
+    const presetProps = this.preset
+      ? (this.presets.get('accordion', this.preset) as Partial<AccordionMetadata>)
+      : {};
+
+    this.resolvedProps = {
+      ...presetProps,
+      ...this.props,
+    } as AccordionMetadata;
+  }
+
+  onAccordionChange(event: CustomEvent): void {
+    this.accordionChange.emit(event.detail.value);
+  }
+
+  getItemHeader(item: AccordionItemMetadata): string {
+    return item.header || item.headerFallback || '';
+  }
+
+  getItemContent(item: AccordionItemMetadata): string {
+    return item.content || item.contentFallback || '';
+  }
+}

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

@@ -0,0 +1,236 @@
+import type { Meta, StoryObj } from '@storybook/angular';
+import { moduleMetadata } from '@storybook/angular';
+import { CommonModule } from '@angular/common';
+import { AccordionComponent } from './accordion.component';
+
+const meta: Meta<AccordionComponent> = {
+  title: 'Molecules/Accordion',
+  component: AccordionComponent,
+  decorators: [
+    moduleMetadata({
+      imports: [CommonModule, AccordionComponent],
+    }),
+  ],
+  tags: ['autodocs'],
+  argTypes: {
+    props: {
+      description: 'Accordion configuration object',
+      control: 'object',
+    },
+    accordionChange: {
+      action: 'accordionChange',
+      description: 'Event emitted when accordion state changes',
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: `
+## val-accordion
+
+An accordion component for collapsible content sections. Perfect for FAQs, settings panels, and expandable content areas.
+
+### Usage
+
+\`\`\`html
+<val-accordion [props]="{
+  items: [
+    { value: 'item1', header: 'Section 1', content: 'Content for section 1' },
+    { value: 'item2', header: 'Section 2', content: 'Content for section 2' }
+  ],
+  multiple: false
+}" (accordionChange)="onAccordionChange($event)"></val-accordion>
+\`\`\`
+
+### Features
+
+- Single or multiple expansion mode
+- Icons support for each item
+- Disabled items
+- Readonly mode support
+        `,
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<AccordionComponent>;
+
+export const Default: Story = {
+  args: {
+    props: {
+      items: [
+        { value: 'item1', header: 'First Section', content: 'This is the content of the first section.' },
+        { value: 'item2', header: 'Second Section', content: 'This is the content of the second section.' },
+        { value: 'item3', header: 'Third Section', content: 'This is the content of the third section.' },
+      ],
+      multiple: false,
+    },
+  },
+};
+
+export const WithIcons: Story = {
+  args: {
+    props: {
+      items: [
+        { value: 'help', header: 'Help & Support', content: 'Get help with your account and find answers to common questions.', icon: 'help-circle' },
+        { value: 'info', header: 'About Us', content: 'Learn more about our company and mission.', icon: 'information-circle' },
+        { value: 'docs', header: 'Documentation', content: 'Access technical documentation and guides.', icon: 'document-text' },
+      ],
+      multiple: false,
+      color: 'light',
+    },
+  },
+};
+
+export const Multiple: Story = {
+  args: {
+    props: {
+      items: [
+        { value: 'faq1', header: 'What is this component?', content: 'This is a reusable accordion component built with Ionic.' },
+        { value: 'faq2', header: 'How do I use it?', content: 'Simply pass the props object with your items configuration.' },
+        { value: 'faq3', header: 'Can I have multiple open?', content: 'Yes! Set multiple: true to allow multiple sections to be open.' },
+      ],
+      multiple: true,
+      value: ['faq1', 'faq2'],
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'With `multiple: true`, users can expand multiple sections at once.',
+      },
+    },
+  },
+};
+
+export const WithDisabledItem: Story = {
+  args: {
+    props: {
+      items: [
+        { value: 'active1', header: 'Active Section', content: 'This section can be expanded.' },
+        { value: 'disabled', header: 'Disabled Section (Coming Soon)', content: 'This content is not available yet.', disabled: true },
+        { value: 'active2', header: 'Another Active Section', content: 'This section can also be expanded.' },
+      ],
+      multiple: false,
+    },
+  },
+};
+
+export const PreExpanded: Story = {
+  args: {
+    props: {
+      items: [
+        { value: 'intro', header: 'Introduction', content: 'Welcome to our application! This section is expanded by default.' },
+        { value: 'features', header: 'Features', content: 'Discover all the amazing features we offer.' },
+        { value: 'pricing', header: 'Pricing', content: 'Check out our competitive pricing plans.' },
+      ],
+      multiple: false,
+      value: 'intro',
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Use the `value` prop to set initially expanded item(s).',
+      },
+    },
+  },
+};
+
+export const FAQStyle: Story = {
+  args: {
+    props: {
+      items: [
+        {
+          value: 'faq1',
+          header: 'How do I reset my password?',
+          content: 'Click on "Forgot Password" on the login page, enter your email, and follow the instructions sent to your inbox.',
+          icon: 'help-circle'
+        },
+        {
+          value: 'faq2',
+          header: 'Can I change my subscription plan?',
+          content: 'Yes, you can upgrade or downgrade your plan at any time from your account settings.',
+          icon: 'help-circle'
+        },
+        {
+          value: 'faq3',
+          header: 'What payment methods do you accept?',
+          content: 'We accept all major credit cards, PayPal, and bank transfers.',
+          icon: 'help-circle'
+        },
+        {
+          value: 'faq4',
+          header: 'How do I contact support?',
+          content: 'You can reach our support team via email at support@example.com or through the chat widget.',
+          icon: 'help-circle'
+        },
+      ],
+      multiple: false,
+      color: 'light',
+    },
+  },
+};
+
+export const Readonly: Story = {
+  args: {
+    props: {
+      items: [
+        { value: 'item1', header: 'Expanded Item', content: 'This accordion is in readonly mode - items cannot be collapsed or expanded.' },
+        { value: 'item2', header: 'Another Item', content: 'This item is also locked.' },
+      ],
+      multiple: true,
+      value: ['item1'],
+      readonly: true,
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Readonly mode prevents users from expanding or collapsing items.',
+      },
+    },
+  },
+};
+
+export const Showcase: Story = {
+  render: () => ({
+    template: `
+      <div style="display: flex; flex-direction: column; gap: 32px; max-width: 600px;">
+        <h3 style="margin: 0; font-family: system-ui;">Basic Accordion</h3>
+        <val-accordion [props]="{
+          items: [
+            { value: 'basic1', header: 'Section One', content: 'Content for the first section goes here.' },
+            { value: 'basic2', header: 'Section Two', content: 'Content for the second section goes here.' },
+            { value: 'basic3', header: 'Section Three', content: 'Content for the third section goes here.' }
+          ],
+          multiple: false
+        }"></val-accordion>
+
+        <h3 style="margin: 16px 0 0 0; font-family: system-ui;">With Icons</h3>
+        <val-accordion [props]="{
+          items: [
+            { value: 'icon1', header: 'Settings', content: 'Configure your preferences here.', icon: 'settings' },
+            { value: 'icon2', header: 'Profile', content: 'Manage your profile information.', icon: 'person' },
+            { value: 'icon3', header: 'Notifications', content: 'Control your notification settings.', icon: 'notifications' }
+          ],
+          multiple: false,
+          color: 'light'
+        }"></val-accordion>
+
+        <h3 style="margin: 16px 0 0 0; font-family: system-ui;">FAQ Example</h3>
+        <val-accordion [props]="{
+          items: [
+            { value: 'q1', header: 'What is your return policy?', content: 'We offer a 30-day return policy on all items.', icon: 'help-circle' },
+            { value: 'q2', header: 'How long does shipping take?', content: 'Standard shipping takes 3-5 business days.', icon: 'help-circle' },
+            { value: 'q3', header: 'Do you ship internationally?', content: 'Yes, we ship to over 100 countries worldwide.', icon: 'help-circle' }
+          ],
+          multiple: true,
+          color: 'light'
+        }"></val-accordion>
+      </div>
+    `,
+  }),
+};