valtech-components 2.0.627 → 2.0.629

package/lib/components/molecules/action-card/action-card.component.d.ts

@@ -0,0 +1,90 @@
+import { EventEmitter } from '@angular/core';
+import { ActionCardMetadata, ActionCardClickEvent } from './types';
+import * as i0 from "@angular/core";
+/**
+ * val-action-card
+ *
+ * A clickable card component with icon, title, description, and optional badge.
+ * Supports multiple icon formats: Ionicons, SVG paths, and image URLs.
+ *
+ * @example Basic usage with Ionicon
+ * ```html
+ * <val-action-card
+ *   [props]="{
+ *     icon: { ionicon: 'settings-outline' },
+ *     title: 'Settings',
+ *     description: 'Manage your preferences'
+ *   }"
+ *   (cardClick)="onCardClick($event)"
+ * />
+ * ```
+ *
+ * @example With routerLink navigation
+ * ```html
+ * <val-action-card
+ *   [props]="{
+ *     icon: { ionicon: 'person-outline', color: 'primary' },
+ *     title: 'Profile',
+ *     description: 'View and edit your profile',
+ *     routerLink: '/settings/profile',
+ *     showChevron: true
+ *   }"
+ * />
+ * ```
+ *
+ * @example With custom SVG icon
+ * ```html
+ * <val-action-card
+ *   [props]="{
+ *     icon: { svgPath: 'M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5' },
+ *     title: 'Custom Feature',
+ *     description: 'A feature with custom SVG icon',
+ *     badge: { text: 'NEW', color: 'light', backgroundColor: 'primary' }
+ *   }"
+ * />
+ * ```
+ */
+export declare class ActionCardComponent {
+    private i18n;
+    private navigation;
+    /** Component configuration */
+    readonly props: import("@angular/core").InputSignal<Partial<ActionCardMetadata>>;
+    /** Event emitted when card is clicked */
+    cardClick: EventEmitter<ActionCardClickEvent>;
+    /** Merged configuration with defaults */
+    config: import("@angular/core").Signal<{
+        token?: string;
+        icon?: import("./types").ActionCardIcon;
+        title?: string;
+        titleKey?: string;
+        description?: string;
+        descriptionKey?: string;
+        i18nNamespace?: string;
+        size: import("./types").ActionCardSize;
+        bordered: boolean;
+        borderColor?: string | (string & Record<never, never>);
+        backgroundColor?: string | (string & Record<never, never>);
+        shadowed: boolean;
+        disabled: boolean;
+        routerLink?: string | any[];
+        href?: string;
+        badge?: import("./types").ActionCardBadge;
+        showChevron: boolean;
+    }>;
+    /** Get title with i18n support */
+    getTitle(): string;
+    /** Get description with i18n support */
+    getDescription(): string;
+    /** Resolve color to CSS value */
+    private resolveColor;
+    getBackgroundColor(): string | null;
+    getBorderColor(): string | null;
+    getIconColor(): string | null;
+    getIconBackgroundColor(): string | null;
+    getBadgeColor(): string | null;
+    getBadgeBackgroundColor(): string | null;
+    /** Handle card click */
+    handleClick(event: MouseEvent): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ActionCardComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ActionCardComponent, "val-action-card", never, { "props": { "alias": "props"; "required": false; "isSignal": true; }; }, { "cardClick": "cardClick"; }, never, never, true, never>;
+}

package/lib/components/molecules/action-card/types.d.ts

@@ -0,0 +1,83 @@
+import { Color } from '@ionic/core';
+/**
+ * Size options for action-card
+ */
+export type ActionCardSize = 'small' | 'medium' | 'large';
+/**
+ * Badge configuration for action-card
+ */
+export interface ActionCardBadge {
+    /** Badge text */
+    text: string;
+    /** Badge color (Ionic color name or CSS color) */
+    color?: Color | string;
+    /** Badge background color */
+    backgroundColor?: Color | string;
+}
+/**
+ * Icon configuration - supports multiple icon sources
+ */
+export interface ActionCardIcon {
+    /** Ionicon name (e.g., 'settings-outline', 'home') */
+    ionicon?: string;
+    /** SVG path data for custom icons */
+    svgPath?: string;
+    /** Image URL for custom images */
+    imageUrl?: string;
+    /** Icon color (Ionic color name or CSS color) */
+    color?: Color | string;
+    /** Icon background color */
+    backgroundColor?: Color | string;
+}
+/**
+ * Click event emitted by action-card
+ */
+export interface ActionCardClickEvent {
+    /** Token identifier for the card */
+    token?: string;
+    /** Whether navigation was triggered (if routerLink was set) */
+    navigated?: boolean;
+}
+/**
+ * Metadata for val-action-card component
+ */
+export interface ActionCardMetadata {
+    /** Unique token for identification */
+    token?: string;
+    /** Icon configuration object */
+    icon?: ActionCardIcon;
+    /** Card title (static text) */
+    title: string;
+    /** i18n key for title */
+    titleKey?: string;
+    /** Card description (static text) */
+    description?: string;
+    /** i18n key for description */
+    descriptionKey?: string;
+    /** i18n namespace for translations */
+    i18nNamespace?: string;
+    /** Card size variant */
+    size?: ActionCardSize;
+    /** Show border */
+    bordered?: boolean;
+    /** Border color */
+    borderColor?: Color | string;
+    /** Card background color */
+    backgroundColor?: Color | string;
+    /** Show shadow */
+    shadowed?: boolean;
+    /** Disabled state */
+    disabled?: boolean;
+    /** Router link for navigation */
+    routerLink?: string | any[];
+    /** External URL (opens in new tab/browser) */
+    href?: string;
+    /** Badge configuration */
+    badge?: ActionCardBadge;
+    /** Show chevron icon on the right */
+    showChevron?: boolean;
+}
+/**
+ * Default values for ActionCardMetadata
+ */
+export declare const ACTION_CARD_DEFAULTS: Required<Pick<ActionCardMetadata, 'size' | 'bordered' | 'shadowed' | 'disabled' | 'showChevron'>>;

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

@@ -0,0 +1,30 @@
+import { LinkedProvidersMetadata, ProviderDisplayInfo } from './types';
+import { LinkedProvider, OAuthProvider } from '../../../services/auth/types';
+import * as i0 from "@angular/core";
+/**
+ * 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
+ *   }"
+ * />
+ */
+export declare class LinkedProvidersComponent {
+    props: LinkedProvidersMetadata;
+    private alertCtrl;
+    linkedProviders: import("@angular/core").Signal<LinkedProvider[]>;
+    unlinkedProviders: import("@angular/core").Signal<ProviderDisplayInfo[]>;
+    canUnlink: import("@angular/core").Signal<boolean>;
+    getProviderInfo(provider: OAuthProvider): ProviderDisplayInfo;
+    onLinkProvider(provider: OAuthProvider): void;
+    confirmUnlink(provider: OAuthProvider): Promise<void>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<LinkedProvidersComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<LinkedProvidersComponent, "val-linked-providers", never, { "props": { "alias": "props"; "required": false; }; }, {}, never, never, true, never>;
+}

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

@@ -0,0 +1,38 @@
+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 declare const OAUTH_PROVIDERS_INFO: Record<OAuthProvider, ProviderDisplayInfo>;

package/lib/components/molecules/username-input/types.d.ts

@@ -0,0 +1,34 @@
+import { FormControl } from '@angular/forms';
+import { Observable } from 'rxjs';
+import { ComponentState } from '../../types';
+/**
+ * Metadata for UsernameInputComponent.
+ */
+export interface UsernameInputMetadata {
+    /** FormControl para el valor del username */
+    control: FormControl<string>;
+    /** Label del campo */
+    label?: string;
+    /** Placeholder del input */
+    placeholder?: string;
+    /** Prefijo visual (default: '@') */
+    prefix?: string;
+    /** Longitud mínima permitida (default: 3) */
+    minLength?: number;
+    /** Longitud máxima permitida (default: 30) */
+    maxLength?: number;
+    /** Función para verificar disponibilidad del username */
+    checkAvailability?: (handle: string) => Observable<boolean>;
+    /** Mensajes de error personalizados */
+    errors?: Record<string, string>;
+    /** Estado del componente */
+    state?: ComponentState;
+    /** Mostrar indicador de disponibilidad (default: true) */
+    showAvailability?: boolean;
+    /** Debounce en ms para check de disponibilidad (default: 500) */
+    debounceTime?: number;
+}
+/**
+ * Estado de disponibilidad del username.
+ */
+export type UsernameAvailabilityStatus = 'idle' | 'checking' | 'available' | 'taken' | 'invalid';

package/lib/components/molecules/username-input/username-input.component.d.ts

@@ -0,0 +1,45 @@
+import { OnInit, OnDestroy } from '@angular/core';
+import { UsernameInputMetadata, UsernameAvailabilityStatus } from './types';
+import * as i0 from "@angular/core";
+/**
+ * Username Input Component
+ *
+ * Input especializado para usernames/handles con:
+ * - Prefijo '@' visual
+ * - Validación de formato (alfanuméricos y _)
+ * - Normalización automática (lowercase, sin espacios)
+ * - Verificación de disponibilidad con debounce
+ * - Estados visuales: available, taken, checking
+ *
+ * @example
+ * <val-username-input
+ *   [props]="{
+ *     control: usernameControl,
+ *     label: 'Nombre de usuario',
+ *     placeholder: 'tu_username',
+ *     checkAvailability: checkFn
+ *   }"
+ * />
+ */
+export declare class UsernameInputComponent implements OnInit, OnDestroy {
+    props: UsernameInputMetadata;
+    private destroy$;
+    private checkAvailability$;
+    isFocused: import("@angular/core").WritableSignal<boolean>;
+    availabilityStatus: import("@angular/core").WritableSignal<UsernameAvailabilityStatus>;
+    hasError: import("@angular/core").Signal<boolean>;
+    showStatusMessage: import("@angular/core").Signal<boolean>;
+    statusColor: import("@angular/core").Signal<"success" | "danger">;
+    statusMessage: import("@angular/core").Signal<"" | "Username disponible" | "Username ya está en uso">;
+    errorMessage: import("@angular/core").Signal<string>;
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    onFocus(): void;
+    onBlur(): void;
+    onInput(event: CustomEvent): void;
+    private setupAvailabilityCheck;
+    private normalizeUsername;
+    private isValidFormat;
+    static ɵfac: i0.ɵɵFactoryDeclaration<UsernameInputComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<UsernameInputComponent, "val-username-input", never, { "props": { "alias": "props"; "required": false; }; }, {}, never, never, true, never>;
+}

package/lib/services/auth/auth.service.d.ts

@@ -6,7 +6,7 @@ import { AuthStateService } from './auth-state.service';
 import { TokenService } from './token.service';
 import { AuthStorageService } from './storage.service';
 import { AuthSyncService } from './sync.service';
-import { SigninRequest, SigninResponse, SignupRequest, SignupResponse, VerifyEmailRequest, VerifyEmailResponse, ResendCodeRequest, ResendCodeResponse, MFAVerifyResponse, RefreshResponse, GetPermissionsResponse, GetProfileResponse, UpdateProfileRequest, UpdateProfileResponse, MFASetupResponse, MFAConfirmResponse, MFADisableResponse, ForgotPasswordRequest, ForgotPasswordResponse, ResetPasswordRequest, ResetPasswordResponse, ChangePasswordResponse, DeleteAccountResponse, SwitchOrgResponse, MFAMethod, AuthError, ValtechAuthConfig, EnableNotificationsResult, NotificationPermissionState, RegisterDeviceResult, TOTPSetupResponse, TOTPVerifySetupResponse, TOTPDisableResponse, RegenerateBackupCodesResponse, BackupCodesCountResponse, OAuthProvider, LinkedProvider, HasPasswordResponse } from './types';
+import { SigninRequest, SigninResponse, SignupRequest, SignupResponse, VerifyEmailRequest, VerifyEmailResponse, ResendCodeRequest, ResendCodeResponse, MFAVerifyResponse, RefreshResponse, GetPermissionsResponse, GetProfileResponse, UpdateProfileRequest, UpdateProfileResponse, MFASetupResponse, MFAConfirmResponse, MFADisableResponse, ForgotPasswordRequest, ForgotPasswordResponse, ResetPasswordRequest, ResetPasswordResponse, ChangePasswordResponse, DeleteAccountResponse, SwitchOrgResponse, MFAMethod, AuthError, ValtechAuthConfig, EnableNotificationsResult, NotificationPermissionState, RegisterDeviceResult, TOTPSetupResponse, TOTPVerifySetupResponse, TOTPDisableResponse, RegenerateBackupCodesResponse, BackupCodesCountResponse, OAuthProvider, LinkedProvider, HasPasswordResponse, UpdateHandleResponse, CheckHandleResponse } from './types';
 import { OAuthService } from './oauth.service';
 import { FirebaseService, MessagingService } from '../firebase';
 import { I18nService } from '../i18n';
@@ -298,6 +298,16 @@ export declare class AuthService implements OnDestroy {
      * Verifica si el usuario tiene un rol específico.
      */
     hasRole(role: string): boolean;
+    /**
+     * Actualiza el handle (@username) del usuario.
+     * @param handle - Nuevo handle (sin @, ej: "victorv")
+     */
+    updateHandle(handle: string): Observable<UpdateHandleResponse>;
+    /**
+     * Verifica si un handle está disponible.
+     * @param handle - Handle a verificar (sin @)
+     */
+    checkHandleAvailability(handle: string): Observable<CheckHandleResponse>;
     private get baseUrl();
     private handleSuccessfulAuth;
     private clearState;

package/lib/services/auth/types.d.ts

@@ -64,6 +64,10 @@ export interface AuthUser {
     email: string;
     name?: string;
     phone?: string;
+    /** Username/handle del usuario (ej: @victorv) */
+    handle?: string;
+    /** URL del avatar del usuario */
+    avatarUrl?: string;
     roles: string[];
     permissions: string[];
     isSuperAdmin: boolean;
@@ -424,6 +428,10 @@ export interface GetProfileResponse {
     email: string;
     name: string;
     phone?: string;
+    /** Username/handle del usuario */
+    handle?: string;
+    /** URL del avatar del usuario */
+    avatarUrl?: string;
     emailVerified: boolean;
     phoneVerified: boolean;
     mfaEnabled: boolean;
@@ -766,3 +774,51 @@ export interface HasPasswordResponse {
     operationId: string;
     hasPassword: boolean;
 }
+/**
+ * Request para actualizar handle (@username).
+ */
+export interface UpdateHandleRequest {
+    handle: string;
+}
+/**
+ * Response de actualizar handle.
+ */
+export interface UpdateHandleResponse {
+    operationId: string;
+    handle: string;
+    updated: boolean;
+}
+/**
+ * Request para verificar disponibilidad de handle.
+ */
+export interface CheckHandleRequest {
+    handle: string;
+}
+/**
+ * Response de verificar disponibilidad de handle.
+ */
+export interface CheckHandleResponse {
+    operationId: string;
+    handle: string;
+    available: boolean;
+}
+/**
+ * Response de obtener proveedores OAuth vinculados.
+ */
+export interface GetLinkedProvidersResponse {
+    operationId: string;
+    providers: LinkedProvider[];
+}
+/**
+ * Request para desvincular un proveedor OAuth.
+ */
+export interface UnlinkProviderRequest {
+    provider: OAuthProvider;
+}
+/**
+ * Response de desvincular proveedor.
+ */
+export interface UnlinkProviderResponse {
+    operationId: string;
+    unlinked: boolean;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "valtech-components",
-  "version": "2.0.627",
+  "version": "2.0.629",
   "private": false,
   "bin": {
     "valtech-firebase-config": "./src/lib/services/firebase/scripts/generate-sw-config.js"

package/public-api.d.ts

@@ -162,6 +162,12 @@ export * from './lib/components/molecules/links-accordion/types';
 export * from './lib/components/molecules/refresher/refresher.component';
 export * from './lib/components/molecules/refresher/types';
 export * from './lib/components/molecules/update-banner/update-banner.component';
+export * from './lib/components/molecules/action-card/action-card.component';
+export * from './lib/components/molecules/action-card/types';
+export * from './lib/components/molecules/username-input/username-input.component';
+export * from './lib/components/molecules/username-input/types';
+export * from './lib/components/molecules/linked-providers/linked-providers.component';
+export * from './lib/components/molecules/linked-providers/types';
 export * from './lib/components/organisms/article/article.component';
 export * from './lib/components/organisms/article/types';
 export * from './lib/components/organisms/banner/banner.component';