valtech-components 2.0.691 → 2.0.692

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

@@ -1,307 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/angular';
-import { moduleMetadata } from '@storybook/angular';
-import { CommonModule } from '@angular/common';
-import { LinkComponent } from './link.component';
-import { LinkMetadata } from './types';
-
-const meta: Meta<LinkComponent> = {
-  title: 'Molecules/Link',
-  component: LinkComponent,
-  decorators: [
-    moduleMetadata({
-      imports: [CommonModule, LinkComponent],
-    }),
-  ],
-  tags: ['autodocs'],
-  argTypes: {
-    props: {
-      description: 'Link configuration object',
-      control: 'object',
-    },
-    onClick: {
-      action: 'onClick',
-      description: 'Event emitted when link is clicked',
-    },
-  },
-  parameters: {
-    docs: {
-      description: {
-        component: `
-## val-link
-
-A stylized link button with navigation support. Features a chevron icon to indicate navigation and supports multiple navigation types.
-
-### Usage
-
-\`\`\`html
-<val-link
-  [props]="{ text: 'Go to Home', color: 'primary', link: '/home', type: 'internal', size: 'default' }"
-  (onClick)="handleClick($event)">
-</val-link>
-\`\`\`
-
-### Navigation Types
-
-- **internal**: Uses Angular Router for in-app navigation
-- **browse**: Opens URL in the current browser/webview context
-- **tab**: Opens URL in a new browser tab
-
-### Features
-
-- Chevron icon indicator for navigation
-- Multiple size options
-- Ionic color palette support
-- Event emission with optional token identifier
-        `,
-      },
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj<LinkComponent>;
-
-const createProps = (overrides: Partial<LinkMetadata> = {}): LinkMetadata => ({
-  text: 'Learn More',
-  size: 'default',
-  color: 'primary',
-  type: 'internal',
-  link: '/details',
-  ...overrides,
-});
-
-export const Default: Story = {
-  args: {
-    props: createProps(),
-  },
-};
-
-export const SmallSize: Story = {
-  args: {
-    props: createProps({
-      text: 'View Details',
-      size: 'small',
-      color: 'primary',
-    }),
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: 'Small sized link for compact layouts or secondary navigation.',
-      },
-    },
-  },
-};
-
-export const LargeSize: Story = {
-  args: {
-    props: createProps({
-      text: 'Explore Now',
-      size: 'large',
-      color: 'primary',
-    }),
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: 'Large sized link for prominent calls-to-action.',
-      },
-    },
-  },
-};
-
-export const InternalNavigation: Story = {
-  args: {
-    props: createProps({
-      text: 'Go to Dashboard',
-      type: 'internal',
-      link: '/dashboard',
-      token: 'nav-dashboard',
-    }),
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: 'Internal navigation using Angular Router. Best for navigating within the application.',
-      },
-    },
-  },
-};
-
-export const BrowseNavigation: Story = {
-  args: {
-    props: createProps({
-      text: 'Visit Website',
-      type: 'browse',
-      link: 'https://example.com',
-      token: 'nav-external',
-    }),
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: 'Browse navigation opens the URL in the current context. Useful for in-app browser functionality.',
-      },
-    },
-  },
-};
-
-export const NewTabNavigation: Story = {
-  args: {
-    props: createProps({
-      text: 'Open Documentation',
-      type: 'tab',
-      link: 'https://docs.example.com',
-      token: 'nav-docs',
-    }),
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: 'Tab navigation opens the URL in a new browser tab. Ideal for external resources.',
-      },
-    },
-  },
-};
-
-export const PrimaryColor: Story = {
-  args: {
-    props: createProps({
-      text: 'Primary Link',
-      color: 'primary',
-    }),
-  },
-};
-
-export const SecondaryColor: Story = {
-  args: {
-    props: createProps({
-      text: 'Secondary Link',
-      color: 'secondary',
-    }),
-  },
-};
-
-export const TertiaryColor: Story = {
-  args: {
-    props: createProps({
-      text: 'Tertiary Link',
-      color: 'tertiary',
-    }),
-  },
-};
-
-export const SuccessColor: Story = {
-  args: {
-    props: createProps({
-      text: 'Success Link',
-      color: 'success',
-    }),
-  },
-};
-
-export const WarningColor: Story = {
-  args: {
-    props: createProps({
-      text: 'Warning Link',
-      color: 'warning',
-    }),
-  },
-};
-
-export const DangerColor: Story = {
-  args: {
-    props: createProps({
-      text: 'Danger Link',
-      color: 'danger',
-    }),
-  },
-};
-
-export const MediumColor: Story = {
-  args: {
-    props: createProps({
-      text: 'Medium Link',
-      color: 'medium',
-    }),
-  },
-};
-
-export const DarkColor: Story = {
-  args: {
-    props: createProps({
-      text: 'Dark Link',
-      color: 'dark',
-    }),
-  },
-};
-
-export const WithToken: Story = {
-  args: {
-    props: createProps({
-      text: 'Track This Click',
-      token: 'analytics-link-001',
-      link: '/tracked-page',
-    }),
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: 'Link with a token identifier. The token is emitted in the onClick event for tracking or identification purposes.',
-      },
-    },
-  },
-};
-
-export const Showcase: Story = {
-  render: () => ({
-    template: `
-      <div style="display: flex; flex-direction: column; gap: 16px; padding: 16px;">
-        <h3 style="margin: 0; color: #666;">Size Variants</h3>
-        <div style="display: flex; gap: 24px; align-items: center;">
-          <val-link [props]="smallProps"></val-link>
-          <val-link [props]="defaultProps"></val-link>
-          <val-link [props]="largeProps"></val-link>
-        </div>
-
-        <h3 style="margin: 16px 0 0 0; color: #666;">Color Variants</h3>
-        <div style="display: flex; flex-wrap: wrap; gap: 16px; align-items: center;">
-          <val-link [props]="primaryProps"></val-link>
-          <val-link [props]="secondaryProps"></val-link>
-          <val-link [props]="tertiaryProps"></val-link>
-          <val-link [props]="successProps"></val-link>
-          <val-link [props]="warningProps"></val-link>
-          <val-link [props]="dangerProps"></val-link>
-        </div>
-
-        <h3 style="margin: 16px 0 0 0; color: #666;">Navigation Types</h3>
-        <div style="display: flex; flex-wrap: wrap; gap: 16px; align-items: center;">
-          <val-link [props]="internalProps"></val-link>
-          <val-link [props]="browseProps"></val-link>
-          <val-link [props]="tabProps"></val-link>
-        </div>
-      </div>
-    `,
-    props: {
-      smallProps: createProps({ text: 'Small', size: 'small' }),
-      defaultProps: createProps({ text: 'Default', size: 'default' }),
-      largeProps: createProps({ text: 'Large', size: 'large' }),
-      primaryProps: createProps({ text: 'Primary', color: 'primary' }),
-      secondaryProps: createProps({ text: 'Secondary', color: 'secondary' }),
-      tertiaryProps: createProps({ text: 'Tertiary', color: 'tertiary' }),
-      successProps: createProps({ text: 'Success', color: 'success' }),
-      warningProps: createProps({ text: 'Warning', color: 'warning' }),
-      dangerProps: createProps({ text: 'Danger', color: 'danger' }),
-      internalProps: createProps({ text: 'Internal Route', type: 'internal', link: '/home' }),
-      browseProps: createProps({ text: 'Browse URL', type: 'browse', link: 'https://example.com' }),
-      tabProps: createProps({ text: 'New Tab', type: 'tab', link: 'https://example.com' }),
-    },
-  }),
-  parameters: {
-    docs: {
-      description: {
-        story: 'A showcase of all link variants including sizes, colors, and navigation types.',
-      },
-    },
-  },
-};

package/src/lib/components/molecules/link/types.ts

@@ -1,20 +0,0 @@
-import { Color } from '@ionic/core';
-
-/**
- * Link configuration object.
- * @type {LinkMetadata}
- * @property text - The link text.
- * @property color - The button color (Ionic color string).
- * @property link - The URL or route to navigate to.
- * @property type - The navigation type ('internal', 'browse', 'tab').
- * @property token - Optional token for event identification.
- * @property size - The button size (optional).
- */
-export interface LinkMetadata {
-  token?: string;
-  text: string;
-  size: 'small' | 'default' | 'large';
-  color: Color;
-  type: 'internal' | 'tab' | 'browse';
-  link: string;
-}

package/src/lib/components/molecules/linked-providers/index.ts

@@ -1,2 +0,0 @@
-export * from './linked-providers.component';
-export * from './types';

package/src/lib/components/molecules/linked-providers/linked-providers.component.ts

@@ -1,289 +0,0 @@
-import { Component, Input, computed, signal } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import {
-  IonCard,
-  IonCardHeader,
-  IonCardTitle,
-  IonCardContent,
-  IonList,
-  IonItem,
-  IonLabel,
-  IonIcon,
-  IonButton,
-  IonText,
-  IonChip,
-  AlertController,
-} from '@ionic/angular/standalone';
-import { addIcons } from 'ionicons';
-import {
-  logoGoogle,
-  logoApple,
-  logoMicrosoft,
-  linkOutline,
-  unlinkOutline,
-  checkmarkCircle,
-} from 'ionicons/icons';
-import { LinkedProvidersMetadata, OAUTH_PROVIDERS_INFO, ProviderDisplayInfo } from './types';
-import { LinkedProvider, OAuthProvider } from '../../../services/auth/types';
-
-addIcons({
-  logoGoogle,
-  logoApple,
-  logoMicrosoft,
-  linkOutline,
-  unlinkOutline,
-  checkmarkCircle,
-});
-
-/**
- * Linked Providers Component
- *
- * Muestra los proveedores OAuth vinculados al usuario y permite
- * vincular nuevos o desvincular existentes.
- *
- * @example
- * <val-linked-providers
- *   [props]="{
- *     providers: linkedProviders(),
- *     onLink: linkProvider,
- *     onUnlink: unlinkProvider
- *   }"
- * />
- */
-@Component({
-  selector: 'val-linked-providers',
-  standalone: true,
-  imports: [
-    CommonModule,
-    IonCard,
-    IonCardHeader,
-    IonCardTitle,
-    IonCardContent,
-    IonList,
-    IonItem,
-    IonLabel,
-    IonIcon,
-    IonButton,
-    IonText,
-    IonChip,
-  ],
-  template: `
-    @if (props.compact) {
-      <ng-container *ngTemplateOutlet="providersList" />
-    } @else {
-      <ion-card>
-        <ion-card-header>
-          <ion-card-title>{{ props.title || 'Cuentas vinculadas' }}</ion-card-title>
-        </ion-card-header>
-        <ion-card-content>
-          @if (props.description) {
-            <p class="section-description">{{ props.description }}</p>
-          }
-          <ng-container *ngTemplateOutlet="providersList" />
-        </ion-card-content>
-      </ion-card>
-    }
-
-    <ng-template #providersList>
-      <ion-list lines="none" class="providers-list">
-        <!-- Linked providers -->
-        @for (provider of linkedProviders(); track provider.provider) {
-          <ion-item class="provider-item linked">
-            <div class="provider-icon" [style.background-color]="getProviderInfo(provider.provider).bgColor" slot="start">
-              <ion-icon [name]="getProviderInfo(provider.provider).icon" [style.color]="getProviderInfo(provider.provider).color" />
-            </div>
-            <ion-label>
-              <h3>{{ getProviderInfo(provider.provider).name }}</h3>
-              <p>{{ provider.email }}</p>
-            </ion-label>
-            <ion-icon name="checkmark-circle" color="success" slot="end" class="linked-icon" />
-            @if (props.allowUnlink !== false && canUnlink()) {
-              <ion-button
-                fill="clear"
-                color="medium"
-                slot="end"
-                (click)="confirmUnlink(provider.provider)"
-                class="unlink-btn"
-              >
-                <ion-icon name="unlink-outline" slot="icon-only" />
-              </ion-button>
-            }
-          </ion-item>
-        }
-
-        <!-- Available providers to link -->
-        @if (props.showLinkButton !== false) {
-          @for (provider of unlinkedProviders(); track provider.id) {
-            <ion-item class="provider-item available" button (click)="onLinkProvider(provider.id)">
-              <div class="provider-icon muted" slot="start">
-                <ion-icon [name]="provider.icon" />
-              </div>
-              <ion-label>
-                <h3>{{ provider.name }}</h3>
-                <p>Vincular cuenta</p>
-              </ion-label>
-              <ion-icon name="link-outline" color="primary" slot="end" />
-            </ion-item>
-          }
-        }
-
-        @if (linkedProviders().length === 0 && unlinkedProviders().length === 0) {
-          <ion-item>
-            <ion-label class="ion-text-center">
-              <p>No hay proveedores disponibles</p>
-            </ion-label>
-          </ion-item>
-        }
-      </ion-list>
-    </ng-template>
-  `,
-  styles: [`
-    ion-card {
-      margin: 0;
-      border-radius: 12px;
-      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
-    }
-
-    ion-card-title {
-      font-size: 1.125rem;
-      font-weight: 600;
-    }
-
-    .section-description {
-      margin: 0 0 1rem;
-      color: var(--ion-color-medium);
-      font-size: 0.875rem;
-    }
-
-    .providers-list {
-      padding: 0;
-    }
-
-    .provider-item {
-      --padding-start: 0;
-      --padding-end: 0;
-      --inner-padding-end: 0;
-      margin-bottom: 0.5rem;
-      border-radius: 8px;
-      border: 1px solid var(--ion-border-color, #e0e0e0);
-    }
-
-    .provider-item:last-child {
-      margin-bottom: 0;
-    }
-
-    .provider-icon {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      width: 40px;
-      height: 40px;
-      border-radius: 8px;
-      margin-right: 0.75rem;
-    }
-
-    .provider-icon ion-icon {
-      font-size: 1.25rem;
-    }
-
-    .provider-icon.muted {
-      background: var(--ion-color-light);
-    }
-
-    .provider-icon.muted ion-icon {
-      color: var(--ion-color-medium);
-    }
-
-    .provider-item ion-label h3 {
-      font-weight: 600;
-      font-size: 0.9375rem;
-      margin-bottom: 0.125rem;
-    }
-
-    .provider-item ion-label p {
-      font-size: 0.8125rem;
-      color: var(--ion-color-medium);
-    }
-
-    .linked-icon {
-      font-size: 1.25rem;
-    }
-
-    .unlink-btn {
-      --padding-start: 0.5rem;
-      --padding-end: 0.5rem;
-    }
-
-    .provider-item.available {
-      cursor: pointer;
-    }
-
-    .provider-item.available:hover {
-      background: var(--ion-color-light-tint);
-    }
-
-    /* Dark mode */
-    :host-context(body.dark) {
-      .provider-item {
-        border-color: var(--ion-color-step-150);
-      }
-
-      .provider-icon.muted {
-        background: var(--ion-color-step-100);
-      }
-    }
-  `],
-})
-export class LinkedProvidersComponent {
-  @Input() props!: LinkedProvidersMetadata;
-
-  private alertCtrl = new AlertController();
-
-  // Computed signals
-  linkedProviders = computed(() => this.props?.providers || []);
-
-  unlinkedProviders = computed(() => {
-    const linked = new Set(this.linkedProviders().map(p => p.provider));
-    const available = this.props?.availableProviders || ['google'];
-    return available
-      .filter(p => !linked.has(p))
-      .map(p => OAUTH_PROVIDERS_INFO[p]);
-  });
-
-  canUnlink = computed(() => {
-    // Can unlink if there's more than one provider or user has password
-    return this.linkedProviders().length > 1;
-  });
-
-  getProviderInfo(provider: OAuthProvider): ProviderDisplayInfo {
-    return OAUTH_PROVIDERS_INFO[provider] || OAUTH_PROVIDERS_INFO.google;
-  }
-
-  onLinkProvider(provider: OAuthProvider): void {
-    this.props.onLink?.(provider);
-  }
-
-  async confirmUnlink(provider: OAuthProvider): Promise<void> {
-    const info = this.getProviderInfo(provider);
-
-    const alert = await this.alertCtrl.create({
-      header: 'Desvincular cuenta',
-      message: `¿Estás seguro de que quieres desvincular tu cuenta de ${info.name}?`,
-      buttons: [
-        {
-          text: 'Cancelar',
-          role: 'cancel',
-        },
-        {
-          text: 'Desvincular',
-          role: 'destructive',
-          handler: () => {
-            this.props.onUnlink?.(provider);
-          },
-        },
-      ],
-    });
-
-    await alert.present();
-  }
-}

package/src/lib/components/molecules/linked-providers/types.ts

@@ -1,63 +0,0 @@
-import { LinkedProvider, OAuthProvider } from '../../../services/auth/types';
-
-/**
- * Metadata para LinkedProvidersComponent.
- */
-export interface LinkedProvidersMetadata {
-  /** Lista de proveedores vinculados */
-  providers: LinkedProvider[];
-  /** Proveedores disponibles para vincular (default: ['google']) */
-  availableProviders?: OAuthProvider[];
-  /** Callback cuando se quiere vincular un provider */
-  onLink?: (provider: OAuthProvider) => void;
-  /** Callback cuando se quiere desvincular un provider */
-  onUnlink?: (provider: OAuthProvider) => void;
-  /** Mostrar botón para vincular nuevos (default: true) */
-  showLinkButton?: boolean;
-  /** Permitir desvincular (default: true si hay más de un método de auth) */
-  allowUnlink?: boolean;
-  /** Título de la sección */
-  title?: string;
-  /** Descripción de la sección */
-  description?: string;
-  /** Modo compacto sin card */
-  compact?: boolean;
-}
-
-/**
- * Información visual de un proveedor OAuth.
- */
-export interface ProviderDisplayInfo {
-  id: OAuthProvider;
-  name: string;
-  icon: string;
-  color: string;
-  bgColor: string;
-}
-
-/**
- * Información de proveedores OAuth disponibles.
- */
-export const OAUTH_PROVIDERS_INFO: Record<OAuthProvider, ProviderDisplayInfo> = {
-  google: {
-    id: 'google',
-    name: 'Google',
-    icon: 'logo-google',
-    color: '#DB4437',
-    bgColor: '#DB443715',
-  },
-  apple: {
-    id: 'apple',
-    name: 'Apple',
-    icon: 'logo-apple',
-    color: '#000000',
-    bgColor: '#00000010',
-  },
-  microsoft: {
-    id: 'microsoft',
-    name: 'Microsoft',
-    icon: 'logo-microsoft',
-    color: '#00A4EF',
-    bgColor: '#00A4EF15',
-  },
-};

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

@@ -1,17 +0,0 @@
-.links-accordion {
-  .accordion-label {
-    font-size: 1.3rem;
-  }
-
-  .accordion-item-label {
-    font-size: 1.1rem;
-  }
-
-  ion-item {
-    --background: var(--ion-color-light-tint);
-  }
-
-  ion-accordion {
-    background: transparent;
-  }
-}