valtech-components 2.0.795 → 2.0.796

package/src/lib/components/organisms/testimonial-carousel/testimonial-carousel.stories.ts

@@ -1,173 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/angular';
-import { moduleMetadata } from '@storybook/angular';
-import { CommonModule } from '@angular/common';
-import { TestimonialCarouselComponent } from './testimonial-carousel.component';
-import { SwipeCarouselComponent } from '../../molecules/swipe-carousel/swipe-carousel.component';
-import { TestimonialCardComponent } from '../../molecules/testimonial-card/testimonial-card.component';
-
-const meta: Meta<TestimonialCarouselComponent> = {
-  title: 'Organisms/TestimonialCarousel',
-  component: TestimonialCarouselComponent,
-  decorators: [
-    moduleMetadata({
-      imports: [CommonModule, TestimonialCarouselComponent, SwipeCarouselComponent, TestimonialCardComponent],
-    }),
-  ],
-  tags: ['autodocs'],
-  argTypes: {
-    props: {
-      description: 'Carousel configuration object',
-      control: 'object',
-    },
-  },
-  parameters: {
-    docs: {
-      description: {
-        component: `
-## val-testimonial-carousel
-
-A carousel of testimonial cards using Swiper.js with centered slides.
-
-### Problem it solves
-
-Displaying customer testimonials or team member cards in an engaging way:
-- Centered slides that fade at the edges
-- Responsive breakpoints for mobile/tablet/desktop
-- Loop mode for continuous browsing
-- Navigation arrows and pagination dots
-- Touch-friendly swipe gestures
-
-### Usage
-
-\`\`\`html
-<val-testimonial-carousel
-  [props]="{
-    cards: [
-      {
-        title: { position: 'center', title: { content: 'John Doe', size: 'medium' } },
-        image: { src: '/images/john.jpg', alt: 'John', mode: 'circular', size: 'large' },
-        background: 'linear-gradient(135deg, #667eea, #764ba2)'
-      },
-      {
-        title: { position: 'center', title: { content: 'Jane Smith', size: 'medium' } },
-        image: { src: '/images/jane.jpg', alt: 'Jane', mode: 'circular', size: 'large' },
-        background: 'linear-gradient(135deg, #11998e, #38ef7d)'
-      }
-    ]
-  }"
-></val-testimonial-carousel>
-\`\`\`
-
-### Features
-
-- Centered slides with partial view of adjacent cards
-- Responsive: 1.1 slides on mobile, 1.5 on tablet, 1.7 on desktop
-- Loop mode for infinite scrolling
-- Navigation arrows and pagination dots
-- Swiper.js integration with smooth animations
-- Dark mode support via TestimonialCard
-        `,
-      },
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj<TestimonialCarouselComponent>;
-
-export const Default: Story = {
-  args: {
-    props: {
-      cards: [
-        {
-          title: {
-            position: 'center',
-            title: { content: 'Sarah Johnson', size: 'medium', color: 'dark', bold: true },
-            bellowTitle: { content: 'Product Manager', size: 'small', color: 'medium', bold: false },
-          },
-          image: { src: 'https://i.pravatar.cc/400?img=1', alt: 'Sarah Johnson', mode: 'circular', shaded: false, bordered: false, size: 'large' },
-          background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
-        },
-        {
-          title: {
-            position: 'center',
-            title: { content: 'Michael Chen', size: 'medium', color: 'dark', bold: true },
-            bellowTitle: { content: 'Lead Developer', size: 'small', color: 'medium', bold: false },
-          },
-          image: { src: 'https://i.pravatar.cc/400?img=2', alt: 'Michael Chen', mode: 'circular', shaded: false, bordered: false, size: 'large' },
-          background: 'linear-gradient(135deg, #11998e 0%, #38ef7d 100%)',
-        },
-        {
-          title: {
-            position: 'center',
-            title: { content: 'Emily Davis', size: 'medium', color: 'dark', bold: true },
-            bellowTitle: { content: 'UX Designer', size: 'small', color: 'medium', bold: false },
-          },
-          image: { src: 'https://i.pravatar.cc/400?img=3', alt: 'Emily Davis', mode: 'circular', shaded: false, bordered: false, size: 'large' },
-          background: 'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)',
-        },
-        {
-          title: {
-            position: 'center',
-            title: { content: 'David Wilson', size: 'medium', color: 'dark', bold: true },
-            bellowTitle: { content: 'DevOps Engineer', size: 'small', color: 'medium', bold: false },
-          },
-          image: { src: 'https://i.pravatar.cc/400?img=4', alt: 'David Wilson', mode: 'circular', shaded: false, bordered: false, size: 'large' },
-          background: 'linear-gradient(135deg, #84fab0 0%, #8fd3f4 100%)',
-        },
-      ],
-    },
-  },
-};
-
-export const CustomerTestimonials: Story = {
-  args: {
-    props: {
-      cards: [
-        {
-          title: {
-            position: 'center',
-            title: { content: 'Alex Thompson', size: 'medium', color: 'light', bold: true },
-            bellowTitle: { content: 'CEO, TechStart Inc.', size: 'small', color: 'light', bold: false },
-          },
-          image: { src: 'https://i.pravatar.cc/400?img=5', alt: 'Alex Thompson', mode: 'circular', shaded: false, bordered: true, size: 'large' },
-          background: 'linear-gradient(135deg, #232526 0%, #414345 100%)',
-        },
-        {
-          title: {
-            position: 'center',
-            title: { content: 'Maria Garcia', size: 'medium', color: 'light', bold: true },
-            bellowTitle: { content: 'Director, Innovation Labs', size: 'small', color: 'light', bold: false },
-          },
-          image: { src: 'https://i.pravatar.cc/400?img=6', alt: 'Maria Garcia', mode: 'circular', shaded: false, bordered: true, size: 'large' },
-          background: 'linear-gradient(135deg, #1a2a6c 0%, #b21f1f 50%, #fdbb2d 100%)',
-        },
-        {
-          title: {
-            position: 'center',
-            title: { content: 'James Brown', size: 'medium', color: 'light', bold: true },
-            bellowTitle: { content: 'Founder, Digital Agency', size: 'small', color: 'light', bold: false },
-          },
-          image: { src: 'https://i.pravatar.cc/400?img=7', alt: 'James Brown', mode: 'circular', shaded: false, bordered: true, size: 'large' },
-          background: 'linear-gradient(135deg, #0f2027 0%, #203a43 50%, #2c5364 100%)',
-        },
-      ],
-    },
-  },
-};
-
-export const ManyTestimonials: Story = {
-  args: {
-    props: {
-      cards: Array.from({ length: 8 }, (_, i) => ({
-        title: {
-          position: 'center' as const,
-          title: { content: `Team Member ${i + 1}`, size: 'medium' as const, color: 'dark', bold: true },
-          bellowTitle: { content: `Role ${i + 1}`, size: 'small' as const, color: 'medium', bold: false },
-        },
-        image: { src: `https://i.pravatar.cc/400?img=${i + 10}`, alt: `Team Member ${i + 1}`, mode: 'circular' as const, shaded: false, bordered: false, size: 'large' as const },
-        color: 'light',
-      })),
-    },
-  },
-};

package/src/lib/components/organisms/testimonial-carousel/types.ts

@@ -1,9 +0,0 @@
-import { TestimonialCardMetadata } from '../../molecules/testimonial-card/types';
-
-/**
- * Configuration for the testimonial carousel component.
- */
-export interface TestimonialCarouselMetadata {
-  /** Array of testimonial cards to display */
-  cards: TestimonialCardMetadata[];
-}

package/src/lib/components/organisms/toolbar/toolbar.component.scss

@@ -1,13 +0,0 @@
-@import '../../styles/mixins.scss';
-
-ion-button {
-  font-family: var(--ion-default-font), Arial, sans-serif;
-}
-
-.left-buttons {
-  margin-left: pxToRem(-16);
-}
-
-.background {
-  background: var(--ion-background-color);
-}

package/src/lib/components/organisms/toolbar/toolbar.component.ts

@@ -1,205 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
-import { NavController } from '@ionic/angular';
-import {
-  IonButton,
-  IonButtons,
-  IonIcon,
-  IonMenuButton,
-  IonText,
-  IonTitle,
-  IonToolbar,
-} from '@ionic/angular/standalone';
-import { addIcons } from 'ionicons';
-import { chevronBackOutline } from 'ionicons/icons';
-import { IconService } from '../../../services/icons.service';
-import { AvatarComponent } from '../../atoms/avatar/avatar.component';
-import { ImageComponent } from '../../atoms/image/image.component';
-import { UserAvatarComponent } from '../../atoms/user-avatar/user-avatar.component';
-import { LanguageSelectorComponent } from '../../molecules/language-selector/language-selector.component';
-import { ToolbarAction, ToolbarActionType } from '../../types';
-import { ToolbarMetadata } from './types';
-
-/**
- * ToolbarComponent
- *
- * Componente de barra de herramientas reutilizable para encabezados y pies de página.
- * Permite acciones, botón de retroceso, menú y personalización de colores y título.
- *
- * @example
- * <val-toolbar [props]="{ title: 'Mi App', withBack: true, actions: [...] }" (onClick)="handleToolbarAction($event)"></val-toolbar>
- *
- * @input props {ToolbarMetadata} - Metadatos de la barra de herramientas.
- * @output onClick - Emite el token de la acción clicada.
- */
-@Component({
-  selector: 'val-toolbar',
-  standalone: true,
-  imports: [
-    CommonModule,
-    IonToolbar,
-    IonButtons,
-    IonButton,
-    IonIcon,
-    IonText,
-    IonTitle,
-    AvatarComponent,
-    ImageComponent,
-    UserAvatarComponent,
-    IonMenuButton,
-    LanguageSelectorComponent,
-  ],
-  template: `
-    <ion-toolbar [color]="props.color" [class.background]="props.color === 'background'">
-      <ng-container *ngIf="props.withBack">
-        <ion-buttons class="left-buttons" slot="start" *ngIf="props.withBack">
-          <ion-button fill="clear" (click)="goBack()" [color]="props.textColor" style="margin-left: 8px;">
-            <ion-icon name="chevron-back-outline" [slot]="props.backText ? 'start' : 'icon-only'"></ion-icon>
-            <ion-text *ngIf="props.backText">{{ props.backText }}</ion-text>
-          </ion-button>
-        </ion-buttons>
-      </ng-container>
-      <ng-container *ngIf="props.withActions">
-        <ion-buttons slot="end" *ngIf="someInRight() || props.withMenu || props.languageSelector">
-          <ng-container *ngFor="let action of rightActions()">
-            <ion-button *ngIf="action.type === actionTypes.ICON" (click)="clickHandler(action.token)">
-              <ion-icon slot="icon-only" [name]="action.description" [color]="props.textColor"></ion-icon>
-            </ion-button>
-            <val-user-avatar
-              *ngIf="action.type === actionTypes.AVATAR"
-              [props]="{
-                user: action.user,
-                avatarUrl: action.description,
-                size: 'small',
-              }"
-              (onClick)="clickHandler(action.token)"
-            ></val-user-avatar>
-            <val-image
-              *ngIf="action.type === actionTypes.IMAGE"
-              [props]="action.image"
-              (click)="clickHandler(action.token)"
-            ></val-image>
-            <ion-button
-              [color]="props.textColor"
-              *ngIf="action.type === actionTypes.BUTTON"
-              (click)="clickHandler(action.token)"
-              >{{ action.description }}</ion-button
-            >
-          </ng-container>
-          @if (props.languageSelector) {
-            <val-language-selector [props]="languageSelectorProps"></val-language-selector>
-          }
-          @if (props.withMenu) {
-            <ion-menu-button color="dark"></ion-menu-button>
-          }
-        </ion-buttons>
-        <ion-buttons slot="start" *ngIf="someInLeft()" style="padding-left: 4px;">
-          <ng-container *ngFor="let action of leftActions()">
-            <ion-button *ngIf="action.type === actionTypes.ICON" (click)="clickHandler(action.token)">
-              <ion-icon slot="icon-only" [name]="action.description" [color]="props.textColor"></ion-icon>
-            </ion-button>
-            <val-user-avatar
-              *ngIf="action.type === actionTypes.AVATAR"
-              [props]="{
-                user: action.user,
-                avatarUrl: action.description,
-                size: 'small',
-              }"
-              (onClick)="clickHandler(action.token)"
-            ></val-user-avatar>
-            <val-image
-              *ngIf="action.type === actionTypes.IMAGE"
-              [props]="action.image"
-              (click)="clickHandler(action.token)"
-            ></val-image>
-            <ion-button *ngIf="action.type === actionTypes.BUTTON" (click)="clickHandler(action.token)">{{
-              action.description
-            }}</ion-button>
-          </ng-container>
-        </ion-buttons>
-      </ng-container>
-      <ion-title *ngIf="props.title" [color]="props.textColor">{{ props.title }}</ion-title>
-      <!-- experimental -->
-      <ng-content select="[toolbar-bottom]"></ng-content>
-    </ion-toolbar>
-  `,
-  styleUrls: ['./toolbar.component.scss'],
-})
-export class ToolbarComponent implements OnInit {
-  /**
-   * Metadatos de la barra de herramientas.
-   */
-  @Input()
-  props: ToolbarMetadata;
-
-  /**
-   * Evento emitido al hacer click en una acción o botón de la barra.
-   */
-  @Output()
-  onClick = new EventEmitter<string>();
-
-  actionTypes = ToolbarActionType;
-
-  constructor(
-    private navCtrl: NavController,
-    icon: IconService
-  ) {
-    addIcons({ chevronBackOutline });
-  }
-
-  ngOnInit() {}
-
-  /**
-   * Emite el token de la acción clicada.
-   * @param token Token de la acción
-   */
-  clickHandler(token?: string) {
-    this.onClick.emit(token);
-  }
-
-  /**
-   * Navega hacia atrás usando NavController.
-   */
-  goBack() {
-    this.navCtrl.back();
-  }
-
-  /**
-   * Determina si hay acciones a la derecha.
-   */
-  someInRight(): boolean {
-    return !!this.props.actions.find(x => x.position === 'right');
-  }
-
-  /**
-   * Determina si hay acciones a la izquierda.
-   */
-  someInLeft(): boolean {
-    return !!this.props.actions.find(x => x.position === 'left');
-  }
-
-  /**
-   * Devuelve las acciones de la derecha.
-   */
-  rightActions(): ToolbarAction[] {
-    return this.props.actions.filter(x => x.position === 'right');
-  }
-
-  /**
-   * Devuelve las acciones de la izquierda.
-   */
-  leftActions(): ToolbarAction[] {
-    return this.props.actions.filter(x => x.position === 'left');
-  }
-
-  /**
-   * Language selector props with 'icon' mode as default for toolbar display.
-   */
-  get languageSelectorProps() {
-    return {
-      mode: 'icon' as const,
-      color: this.props.textColor || 'dark',
-      ...this.props.languageSelector,
-    };
-  }
-}

package/src/lib/components/organisms/toolbar/toolbar.stories.ts

@@ -1,263 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/angular';
-import { moduleMetadata } from '@storybook/angular';
-import { CommonModule } from '@angular/common';
-import { ToolbarComponent } from './toolbar.component';
-import { ToolbarActionType } from '../../types';
-
-const meta: Meta<ToolbarComponent> = {
-  title: 'Organisms/Toolbar',
-  component: ToolbarComponent,
-  decorators: [
-    moduleMetadata({
-      imports: [CommonModule, ToolbarComponent],
-    }),
-  ],
-  tags: ['autodocs'],
-  argTypes: {
-    props: {
-      description: 'Toolbar configuration object',
-      control: 'object',
-    },
-    onClick: {
-      action: 'onClick',
-      description: 'Event emitted when an action is clicked',
-    },
-  },
-  parameters: {
-    docs: {
-      description: {
-        component: `
-## val-toolbar
-
-A reusable toolbar component for headers and footers. Supports actions, back button, menu, and customizable colors and title.
-
-### Usage
-
-\`\`\`html
-<val-toolbar [props]="{
-  title: 'My App',
-  withBack: true,
-  withActions: true,
-  actions: [
-    { type: 'ICON', token: 'search', position: 'right', description: 'search' },
-    { type: 'ICON', token: 'notifications', position: 'right', description: 'notifications' }
-  ]
-}" (onClick)="handleToolbarAction($event)"></val-toolbar>
-\`\`\`
-
-### Action Types
-
-- \`ICON\`: Display an icon button
-- \`AVATAR\`: Display a user avatar
-- \`IMAGE\`: Display an image
-- \`BUTTON\`: Display a text button
-        `,
-      },
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj<ToolbarComponent>;
-
-export const Default: Story = {
-  args: {
-    props: {
-      title: 'Page Title',
-      withBack: false,
-      withActions: false,
-      actions: [],
-    },
-  },
-};
-
-export const WithBackButton: Story = {
-  args: {
-    props: {
-      title: 'Details',
-      withBack: true,
-      backText: 'Back',
-      withActions: false,
-      actions: [],
-    },
-  },
-};
-
-export const WithActions: Story = {
-  args: {
-    props: {
-      title: 'My App',
-      withBack: false,
-      withActions: true,
-      actions: [
-        { type: ToolbarActionType.ICON, token: 'search', position: 'right', description: 'search' },
-        { type: ToolbarActionType.ICON, token: 'notifications', position: 'right', description: 'notifications' },
-      ],
-    },
-  },
-};
-
-export const WithMenu: Story = {
-  args: {
-    props: {
-      title: 'Dashboard',
-      withBack: false,
-      withMenu: true,
-      withActions: true,
-      actions: [
-        { type: ToolbarActionType.ICON, token: 'settings', position: 'right', description: 'settings' },
-      ],
-    },
-  },
-};
-
-export const FullFeatured: Story = {
-  args: {
-    props: {
-      title: 'Profile',
-      withBack: true,
-      backText: '',
-      withActions: true,
-      color: 'primary',
-      textColor: 'light',
-      actions: [
-        { type: ToolbarActionType.ICON, token: 'edit', position: 'right', description: 'create-outline' },
-        { type: ToolbarActionType.ICON, token: 'more', position: 'right', description: 'ellipsis-vertical' },
-      ],
-    },
-  },
-};
-
-export const WithLeftAndRightActions: Story = {
-  args: {
-    props: {
-      title: 'Messages',
-      withBack: false,
-      withActions: true,
-      actions: [
-        { type: ToolbarActionType.ICON, token: 'menu', position: 'left', description: 'menu' },
-        { type: ToolbarActionType.ICON, token: 'search', position: 'right', description: 'search' },
-        { type: ToolbarActionType.ICON, token: 'add', position: 'right', description: 'add' },
-      ],
-    },
-  },
-};
-
-export const PrimaryColor: Story = {
-  args: {
-    props: {
-      title: 'Primary Toolbar',
-      withBack: true,
-      withActions: true,
-      color: 'primary',
-      textColor: 'light',
-      actions: [
-        { type: ToolbarActionType.ICON, token: 'heart', position: 'right', description: 'heart' },
-        { type: ToolbarActionType.ICON, token: 'share', position: 'right', description: 'share-social' },
-      ],
-    },
-  },
-};
-
-export const SecondaryColor: Story = {
-  args: {
-    props: {
-      title: 'Secondary Toolbar',
-      withBack: true,
-      withActions: true,
-      color: 'secondary',
-      textColor: 'light',
-      actions: [
-        { type: ToolbarActionType.ICON, token: 'settings', position: 'right', description: 'settings' },
-      ],
-    },
-  },
-};
-
-export const DarkColor: Story = {
-  args: {
-    props: {
-      title: 'Dark Toolbar',
-      withBack: true,
-      withActions: true,
-      color: 'dark',
-      textColor: 'light',
-      actions: [
-        { type: ToolbarActionType.ICON, token: 'notifications', position: 'right', description: 'notifications' },
-      ],
-    },
-  },
-};
-
-export const WithTextButton: Story = {
-  args: {
-    props: {
-      title: 'Edit Profile',
-      withBack: true,
-      backText: 'Cancel',
-      withActions: true,
-      actions: [
-        { type: ToolbarActionType.BUTTON, token: 'save', position: 'right', description: 'Save' },
-      ],
-    },
-  },
-};
-
-export const Showcase: Story = {
-  render: () => ({
-    template: `
-      <div style="display: flex; flex-direction: column; gap: 24px; max-width: 500px;">
-        <h3 style="margin: 0; font-family: system-ui;">Basic Toolbar</h3>
-        <val-toolbar [props]="{
-          title: 'Page Title',
-          withBack: false,
-          withActions: false,
-          actions: []
-        }"></val-toolbar>
-
-        <h3 style="margin: 16px 0 0 0; font-family: system-ui;">With Back Button</h3>
-        <val-toolbar [props]="{
-          title: 'Details',
-          withBack: true,
-          backText: 'Back',
-          withActions: false,
-          actions: []
-        }"></val-toolbar>
-
-        <h3 style="margin: 16px 0 0 0; font-family: system-ui;">With Actions</h3>
-        <val-toolbar [props]="{
-          title: 'My App',
-          withBack: false,
-          withActions: true,
-          actions: [
-            { type: 'ICON', token: 'search', position: 'right', description: 'search' },
-            { type: 'ICON', token: 'notifications', position: 'right', description: 'notifications' }
-          ]
-        }"></val-toolbar>
-
-        <h3 style="margin: 16px 0 0 0; font-family: system-ui;">Primary Color</h3>
-        <val-toolbar [props]="{
-          title: 'Primary',
-          withBack: true,
-          withActions: true,
-          color: 'primary',
-          textColor: 'light',
-          actions: [
-            { type: 'ICON', token: 'heart', position: 'right', description: 'heart' }
-          ]
-        }"></val-toolbar>
-
-        <h3 style="margin: 16px 0 0 0; font-family: system-ui;">With Text Button</h3>
-        <val-toolbar [props]="{
-          title: 'Edit',
-          withBack: true,
-          backText: 'Cancel',
-          withActions: true,
-          actions: [
-            { type: 'BUTTON', token: 'save', position: 'right', description: 'Save' }
-          ]
-        }"></val-toolbar>
-      </div>
-    `,
-  }),
-};

package/src/lib/components/organisms/toolbar/types.ts

@@ -1,32 +0,0 @@
-/**
- * Tipos y metadatos para el componente ToolbarComponent.
- * Permiten definir el título, acciones, colores y opciones de navegación de la barra de herramientas.
- */
-import { Color } from '@ionic/core';
-import { ToolbarAction } from '../../types';
-import { LanguageSelectorMetadata } from '../../molecules/language-selector/types';
-
-/**
- * Metadatos para la barra de herramientas.
- * @property withBack Si muestra botón de retroceso.
- * @property withMenu (opcional) Si muestra botón de menú.
- * @property backText (opcional) Texto del botón de retroceso.
- * @property withActions Si muestra acciones.
- * @property color (opcional) Color de fondo.
- * @property textColor (opcional) Color del texto.
- * @property title Título de la barra.
- * @property actions Acciones disponibles en la barra.
- * @property languageSelector (opcional) Configuración del selector de idioma.
- */
-export type ToolbarMetadata = {
-  withBack: boolean;
-  withMenu?: boolean;
-  backText?: string;
-  withActions: boolean;
-  color?: Color;
-  textColor?: Color;
-  title: string;
-  actions: ToolbarAction[];
-  /** Language selector configuration. Displays to the left of menu button when provided. */
-  languageSelector?: LanguageSelectorMetadata;
-};