valtech-components 2.0.690 → 2.0.691

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

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

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

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

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

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

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

@@ -0,0 +1,17 @@
+.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;
+  }
+}