valtech-components 2.0.691 → 2.0.692

package/lib/components/types.d.ts

@@ -0,0 +1,289 @@
+import { FormControl, ValidatorFn } from '@angular/forms';
+import { Color } from '@ionic/core';
+import { ImageMetadata } from './atoms/image/types';
+/**
+ * Possible states for an interactive component.
+ */
+export type ComponentState = 'ENABLED' | 'DISABLED' | 'WORKING' | 'ERROR';
+/**
+ * Object containing all possible component states.
+ */
+export declare const ComponentStates: {
+    ENABLED: "ENABLED";
+    DISABLED: "DISABLED";
+    WORKING: "WORKING";
+    ERROR: "ERROR";
+};
+/**
+ * Types of actions that a button or link can perform.
+ */
+export declare enum ActionType {
+    BROWSER_NEW_TAB = 0,// Open in a new browser tab
+    BROWSER_DOWNLOAD = 1,// Download via browser
+    NATIVE_DOWNLOAD = 2,// Download using native capabilities
+    APP_NAVIGATION = 3,// Internal app navigation
+    BROWSER_NAVIGATION = 4
+}
+/**
+ * Represents an executable action for a button or link.
+ */
+export type Action = {
+    /** Action description */
+    description: string;
+    /** Action type */
+    type: ActionType;
+    /** Action source or destination */
+    source: string;
+};
+/**
+ * Supported input types for forms.
+ */
+export declare enum InputType {
+    TEXT = 0,
+    TEXTAREA = 1,
+    EMAIL = 2,
+    PASSWORD = 3,
+    COMMENT = 4,
+    NUMBER = 5,
+    NUMBER_FROM_TO = 6,
+    PIN_CODE = 7,
+    DATE = 8,
+    DATE_RANGE = 9,
+    HOUR = 10,
+    CHECK = 11,
+    RADIO = 12,
+    SELECT = 13,
+    SEARCH_SELECT = 14,
+    MULTI_SELECT = 15,
+    MULTI_SELECT_SIMPLE = 16,
+    FILE = 17,
+    TOGGLE = 18,
+    RANGE = 19,
+    PHONE = 20,
+    CURRENCY = 21
+}
+/**
+ * Option for select, radio, etc. inputs.
+ */
+export type InputOption = {
+    /** Unique option identifier */
+    id: string;
+    /** Display name */
+    name: string;
+    /** Whether the option is selected by default */
+    selected?: boolean;
+    /** Display order */
+    order: number;
+};
+/**
+ * Metadata for a form field.
+ */
+export type InputMetadata = {
+    /** Associated form control (optional, created internally by val-form) */
+    control?: FormControl;
+    /** From control (only for NUMBER_FROM_TO type) */
+    fromControl?: FormControl;
+    /** To control (only for NUMBER_FROM_TO type) */
+    toControl?: FormControl;
+    /** Unique token for the input */
+    token: string;
+    /** Display label */
+    label: string;
+    /** Field name */
+    name: string;
+    /** Help text (shown below input, for validation hints) */
+    hint: string;
+    /** Description text (shown below label, explains the field purpose) */
+    description?: string;
+    /** Input placeholder */
+    placeholder: string;
+    /** Input type */
+    type: InputType;
+    /** Display order */
+    order: number;
+    /** Associated validators */
+    validators: ValidatorFn[];
+    /** Options (for select, radio, etc.) */
+    options?: InputOption[];
+    /** Allowed range (for number, date, etc.) */
+    range?: {
+        min: number;
+        max: number;
+    };
+    /** Custom error messages */
+    errors: {
+        [key: string]: string;
+    };
+    /** Initial value for the field */
+    value?: string;
+    /** Default value configuration - string for custom defaults, true for auto defaults */
+    withDefault?: string | boolean;
+    /** Field state */
+    state: ComponentState;
+    /** Label for "from" field (only for NUMBER_FROM_TO type) */
+    fromLabel?: string;
+    /** Label for "to" field (only for NUMBER_FROM_TO type) */
+    toLabel?: string;
+    /** Placeholder for "from" field (only for NUMBER_FROM_TO type) */
+    fromPlaceholder?: string;
+    /** Placeholder for "to" field (only for NUMBER_FROM_TO type) */
+    toPlaceholder?: string;
+    /** Key for content lookup */
+    contentKey?: string;
+    /** Component class name for content lookup */
+    contentClass?: string;
+    /** Fallback text if content key is not found */
+    contentFallback?: string;
+    /** Custom header text for select modal */
+    modalHeader?: string;
+    /** Custom cancel button text for select modal */
+    cancelText?: string;
+    /** Custom OK button text for select modal */
+    okText?: string;
+    /** Position of label for checkbox ('start' | 'end') */
+    labelPlacement?: 'start' | 'end';
+    /** Number of digits in PIN (default: 5, only for PIN_CODE type) */
+    length?: number;
+    /** Size of the input boxes: 'small' | 'medium' | 'large' (default: 'medium', only for PIN_CODE type) */
+    size?: 'small' | 'medium' | 'large';
+    /** Allow only numbers (default: true, only for PIN_CODE type) */
+    allowNumbersOnly?: boolean;
+    /** Mask input - show dots instead of characters (only for PIN_CODE type) */
+    mask?: boolean;
+    /** Auto focus first input (only for PIN_CODE type) */
+    autoFocus?: boolean;
+    /** Custom input styles (only for PIN_CODE type) */
+    inputStyles?: Record<string, string>;
+};
+/**
+ * A section in a form, grouping multiple fields.
+ */
+export type FormSection = {
+    /** Section name */
+    name: string;
+    /** Display order */
+    order: number;
+    /** Fields included in the section */
+    fields: InputMetadata[];
+};
+/**
+ * Data sent when submitting a form.
+ */
+export type FormSubmit = {
+    /** Form field values as key-value pairs */
+    fields: Record<string, any>;
+    /** Optional token for the operation */
+    token?: string;
+};
+/**
+ * Metadata for a complete form.
+ */
+export type FormMetadata = {
+    /** Form name */
+    name: string;
+    /** Form sections */
+    sections: FormSection[];
+    /** Action buttons configuration */
+    actions: ButtonMetadata;
+    /** Global form state */
+    state: ComponentState;
+};
+/**
+ * Possible action types for a toolbar.
+ */
+export declare enum ToolbarActionType {
+    AVATAR = "AVATAR",
+    ICON = "ICON",
+    IMAGE = "IMAGE",
+    BUTTON = "BUTTON"
+}
+/**
+ * Toolbar action definition.
+ */
+export type ToolbarAction = {
+    /** Action type */
+    type: 'AVATAR' | 'ICON' | 'IMAGE' | 'BUTTON';
+    /** Optional token identifier */
+    token?: string;
+    /** Toolbar position */
+    position: 'left' | 'right' | 'center';
+    /** Optional description */
+    description?: string;
+    /** Associated image (if any) */
+    image?: ImageMetadata;
+};
+/**
+ * Metadata for an icon.
+ */
+export interface IconMetada {
+    /** Icon name */
+    name: string;
+    /** Icon slot position */
+    slot: 'start' | 'end';
+}
+/**
+ * Button configuration object.
+ * Supports both static and reactive content.
+ * @type {ButtonMetadata}
+ * @property text - Static button label (takes precedence over textConfig).
+ * @property textConfig - Reactive content configuration for button text.
+ * @property color - The button color (Ionic color string).
+ * @property icon - Icon to display (optional).
+ * @property state - Button state (enabled, disabled, working, etc.).
+ * @property expand, fill, size, shape, href, target, download, handler, etc. - See ButtonMetadata for all options.
+ */
+export interface ButtonMetadata {
+    /** Associated action type */
+    actionType?: ActionType;
+    /** Button expansion */
+    expand?: 'full' | 'block';
+    /** Associated link */
+    link?: string;
+    /** Associated href link */
+    href?: string;
+    /** Link target */
+    target?: '_blank' | '_self' | '_parent' | '_top';
+    /** Download file name */
+    download?: string;
+    /** Button color */
+    color: Color;
+    /** Button state */
+    state: ComponentState;
+    /** Static display text (takes precedence over reactive content) */
+    text?: string;
+    /** Reactive content configuration for button text */
+    contentKey?: string;
+    /** Component class name for content lookup (required with contentKey) */
+    contentClass?: string;
+    /** Fallback text if contentKey is not found */
+    contentFallback?: string;
+    /** Values to interpolate into the content string */
+    contentInterpolation?: Record<string, string | number>;
+    /** Associated icon */
+    icon?: IconMetada;
+    /** Button shape */
+    shape?: 'round';
+    /** Button size */
+    size?: 'small' | 'default' | 'large';
+    /** Button fill */
+    fill?: 'clear' | 'outline' | 'solid' | 'default';
+    /** Button type */
+    type: 'button' | 'submit' | 'reset';
+    /** Optional token identifier */
+    token?: string;
+    /** Optional reference */
+    ref?: any;
+    /** Action handler */
+    handler?: (value: any) => any | Promise<any>;
+}
+/**
+ * Configuration for reactive content in val-button component.
+ * Use this interface when you only need to specify content-related properties.
+ * This follows the same pattern as TextContentConfig for consistency.
+ */
+export interface ButtonContentConfig {
+    contentKey: string;
+    contentClass: string;
+    contentFallback?: string;
+    contentInterpolation?: Record<string, string | number>;
+}

package/lib/config/company-footer.config.d.ts

@@ -0,0 +1,98 @@
+/**
+ * Shared Company Footer Configuration
+ *
+ * This configuration is shared across all Valtech products:
+ * - ui-docs
+ * - showcase
+ * - myvaltech (company website)
+ *
+ * When links or social profiles change, update here and publish a new version.
+ */
+/**
+ * Social media links for Valtech
+ */
+export declare const VALTECH_SOCIAL_LINKS: {
+    icon: string;
+    url: string;
+    name: string;
+}[];
+/**
+ * Footer logo configuration
+ * Uses CSS variable for automatic theme-aware logo switching
+ */
+export declare const VALTECH_FOOTER_LOGO: {
+    logoCssVariable: string;
+    logoAlt: string;
+    logoRoute: string;
+};
+/**
+ * Company link definition
+ */
+export interface CompanyLink {
+    /** i18n key for the link text */
+    key: string;
+    /** URL path or external URL */
+    url: string;
+    /** Whether the link opens in a new tab */
+    external?: boolean;
+}
+/**
+ * Company links organized by section
+ */
+export declare const VALTECH_COMPANY_LINKS: {
+    legal: CompanyLink[];
+    support: CompanyLink[];
+};
+/**
+ * i18n keys for the footer (Layout namespace)
+ * These should be registered in each app's i18n config
+ */
+export declare const VALTECH_FOOTER_I18N: {
+    es: {
+        footerLeftTitle: string;
+        footerRightTitle: string;
+        aboutUs: string;
+        privacyPolicy: string;
+        termsConditions: string;
+        contactSupport: string;
+        faq: string;
+        feedback: string;
+        copyrightText: string;
+    };
+    en: {
+        footerLeftTitle: string;
+        footerRightTitle: string;
+        aboutUs: string;
+        privacyPolicy: string;
+        termsConditions: string;
+        contactSupport: string;
+        faq: string;
+        feedback: string;
+        copyrightText: string;
+    };
+};
+/**
+ * Default language selector configuration for footer
+ */
+export declare const VALTECH_LANGUAGE_SELECTOR: {
+    mode: "default";
+    showFlags: boolean;
+    showLabel: boolean;
+    fill: "outline";
+    size: "default";
+};
+/**
+ * Helper to build footer links from company links config
+ * @param links - Array of company links
+ * @param t - Translation function (key: string) => string
+ * @returns Array of link objects ready for FooterLinksMetadata
+ */
+export declare function buildFooterLinks(links: CompanyLink[], t: (key: string) => string): Array<{
+    url: string;
+    text: string;
+    color: string;
+    token: string;
+    download: boolean;
+    hoverable: boolean;
+    target?: string;
+}>;

package/lib/services/ads/ads-loader.service.d.ts

@@ -0,0 +1,41 @@
+import { ValtechAdsConfig } from './types';
+import * as i0 from "@angular/core";
+/**
+ * Servicio para cargar el script de Google AdSense.
+ *
+ * Implementa lazy loading: el script solo se carga cuando
+ * se solicita renderizar el primer ad slot.
+ */
+export declare class AdsLoaderService {
+    private config;
+    private platformId;
+    private readonly _isLoading;
+    private readonly _isLoaded;
+    private readonly _error;
+    /** Indica si el script esta cargando */
+    readonly isLoading: import("@angular/core").Signal<boolean>;
+    /** Indica si el script esta cargado */
+    readonly isLoaded: import("@angular/core").Signal<boolean>;
+    /** Error de carga (si existe) */
+    readonly error: import("@angular/core").Signal<Error>;
+    private loadPromise;
+    constructor(config: ValtechAdsConfig, platformId: Object);
+    /**
+     * Carga el script AdSense de forma lazy.
+     * Retorna true si se cargo correctamente, false si fallo.
+     *
+     * @returns Promise<boolean>
+     */
+    loadAdSense(): Promise<boolean>;
+    /**
+     * Verifica si el script AdSense esta disponible.
+     */
+    isAdSenseAvailable(): boolean;
+    /**
+     * Ejecuta un comando AdSense (push a la queue).
+     * Usado internamente para activar ad slots.
+     */
+    pushAdCommand(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<AdsLoaderService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<AdsLoaderService>;
+}

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

@@ -0,0 +1,99 @@
+/**
+ * Ads Service
+ *
+ * Servicio principal para Google AdSense.
+ * Integra con el sistema de auth para detectar usuarios premium.
+ */
+import { OnDestroy } from '@angular/core';
+import { Router } from '@angular/router';
+import { AdsLoaderService } from './ads-loader.service';
+import { AuthStateService } from '../auth/auth-state.service';
+import { ValtechAdsConfig, AdSlotState, AdEvent } from './types';
+import * as i0 from "@angular/core";
+/**
+ * Servicio principal de Google AdSense.
+ *
+ * Maneja la carga del script y el estado de ads.
+ * Detecta automaticamente usuarios premium para ocultar ads.
+ *
+ * @example
+ * ```typescript
+ * @Component({...})
+ * export class MyComponent {
+ *   private ads = inject(AdsService);
+ *
+ *   // Verificar si mostrar ads
+ *   showAds = this.ads.isEnabled;
+ *
+ *   // Verificar si usuario es premium
+ *   isPremium = this.ads.isPremiumUser;
+ * }
+ * ```
+ */
+export declare class AdsService implements OnDestroy {
+    private config;
+    private platformId;
+    private router;
+    private loaderService;
+    private authStateService;
+    private readonly _isInitialized;
+    private readonly _isEnabled;
+    private readonly _isDebugMode;
+    private readonly _slotStates;
+    private readonly _events;
+    private readonly _adClient;
+    /** Indica si el servicio esta inicializado */
+    readonly isInitialized: import("@angular/core").Signal<boolean>;
+    /** Indica si los ads estan habilitados (no premium + inicializado) */
+    readonly isEnabled: import("@angular/core").Signal<boolean>;
+    /** Indica si el usuario es premium (no ve ads) */
+    readonly isPremiumUser: import("@angular/core").Signal<boolean>;
+    /** Indica si esta en modo debug */
+    readonly isDebugMode: import("@angular/core").Signal<boolean>;
+    /** Publisher ID de AdSense */
+    readonly adClient: import("@angular/core").Signal<string>;
+    /** Eventos de ads (historial) */
+    readonly events: import("@angular/core").Signal<AdEvent[]>;
+    private activeSlotIds;
+    private routerSubscription;
+    constructor(config: ValtechAdsConfig, platformId: Object, router: Router, loaderService: AdsLoaderService, authStateService: AuthStateService);
+    /**
+     * Inicializa el servicio de ads.
+     * Llamado automaticamente por APP_INITIALIZER.
+     * NO carga el script AdSense hasta que se necesite el primer ad.
+     */
+    initialize(): Promise<void>;
+    /**
+     * Carga el script AdSense de forma lazy.
+     * Llamado automaticamente cuando se renderiza el primer ad slot.
+     */
+    ensureAdSenseLoaded(): Promise<boolean>;
+    /**
+     * Registra un ad slot.
+     * Llamado internamente por el componente AdSlot.
+     *
+     * @param slotId - ID unico del slot
+     * @returns true si el slot se puede mostrar
+     */
+    registerSlot(slotId: string): Promise<boolean>;
+    /**
+     * Desregistra un slot.
+     *
+     * @param slotId - ID del slot a desregistrar
+     */
+    unregisterSlot(slotId: string): void;
+    /**
+     * Obtiene el estado de un slot.
+     *
+     * @param slotId - ID del slot
+     * @returns Estado actual del slot
+     */
+    getSlotState(slotId: string): AdSlotState;
+    private updateSlotState;
+    private emitEvent;
+    private setupRouteListener;
+    private isRouteExcluded;
+    ngOnDestroy(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<AdsService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<AdsService>;
+}

package/lib/services/ads/config.d.ts

@@ -0,0 +1,53 @@
+/**
+ * Ads Configuration
+ *
+ * Configuracion e inicializacion de Google AdSense para Angular.
+ * Usa provideValtechAds() en el bootstrap de tu aplicacion.
+ */
+import { EnvironmentProviders, InjectionToken } from '@angular/core';
+import { ValtechAdsConfig } from './types';
+/**
+ * Token de inyeccion para la configuracion de Ads.
+ * Usado internamente por los servicios de ads.
+ */
+export declare const VALTECH_ADS_CONFIG: InjectionToken<ValtechAdsConfig>;
+/**
+ * Configuracion por defecto del servicio de ads.
+ */
+export declare const DEFAULT_ADS_CONFIG: Partial<ValtechAdsConfig>;
+/**
+ * Provee el servicio de Ads a la aplicacion Angular.
+ *
+ * @param config - Configuracion de Google AdSense
+ * @returns EnvironmentProviders para usar en bootstrapApplication
+ *
+ * @example
+ * ```typescript
+ * // main.ts
+ * import { bootstrapApplication } from '@angular/platform-browser';
+ * import { provideValtechAds } from 'valtech-components';
+ *
+ * bootstrapApplication(AppComponent, {
+ *   providers: [
+ *     provideValtechAds({
+ *       adClient: 'ca-pub-XXXXXXXXXXXXXXXX',
+ *       testMode: true, // Usa ads de prueba en desarrollo
+ *       debugMode: true,
+ *     }),
+ *   ],
+ * });
+ * ```
+ *
+ * @example Con rutas excluidas
+ * ```typescript
+ * provideValtechAds({
+ *   adClient: 'ca-pub-XXXXXXXXXXXXXXXX',
+ *   excludeRoutes: [
+ *     '^/checkout',
+ *     '^/payment',
+ *     '^/premium',
+ *   ],
+ * })
+ * ```
+ */
+export declare function provideValtechAds(config: ValtechAdsConfig): EnvironmentProviders;

package/lib/services/ads/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Ads Module
+ *
+ * Exports publicos para el servicio de Google AdSense.
+ */
+export { provideValtechAds, VALTECH_ADS_CONFIG, DEFAULT_ADS_CONFIG } from './config';
+export { AdsService } from './ads.service';
+export { AdsLoaderService } from './ads-loader.service';
+export { ValtechAdsConfig, AdSlotConfig, AdFormat, AdSlotState, AdEvent, AdsConsentState, AdSlotSize, AD_SIZE_MAP, SizeMapping, } from './types';

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

@@ -0,0 +1,106 @@
+/**
+ * Ads Types
+ *
+ * Tipos e interfaces para el servicio de Google AdSense.
+ * Simplificado para usar AdSense en lugar de GPT (Ad Manager).
+ */
+/**
+ * Configuracion del servicio de Ads.
+ * Pasada a provideValtechAds() en el bootstrap de la aplicacion.
+ */
+export interface ValtechAdsConfig {
+    /** Publisher ID de AdSense (formato: ca-pub-XXXXXXXXXXXXXXXX) */
+    adClient: string;
+    /** Habilitar modo debug (muestra info de ads en consola) */
+    debugMode?: boolean;
+    /** Test mode - usa ads de prueba durante desarrollo */
+    testMode?: boolean;
+    /** Habilitar Auto Ads (Google decide ubicacion automaticamente) */
+    autoAds?: boolean;
+    /** Callback cuando se carga un ad */
+    onAdLoaded?: (slotId: string, isEmpty: boolean) => void;
+    /** Callback cuando falla un ad */
+    onAdError?: (slotId: string, error: Error) => void;
+    /** Rutas donde NO mostrar ads (regex patterns) */
+    excludeRoutes?: string[];
+}
+/**
+ * Formato de ad para AdSense.
+ */
+export type AdFormat = 'auto' | 'fluid' | 'rectangle' | 'horizontal' | 'vertical';
+/**
+ * Configuracion de un ad slot individual.
+ */
+export interface AdSlotConfig {
+    /** ID unico del slot (usado para el div container) */
+    slotId: string;
+    /** Ad Slot ID de AdSense (numero de unidad de anuncio) */
+    adSlot?: string;
+    /** Formato del ad */
+    format?: AdFormat;
+    /** Responsive - ocupa todo el ancho disponible */
+    fullWidth?: boolean;
+    /** CSS class adicional */
+    cssClass?: string;
+    /** Altura minima mientras carga */
+    minHeight?: string;
+    /** Mostrar skeleton mientras carga */
+    showSkeleton?: boolean;
+}
+/**
+ * Estado de un ad slot.
+ */
+export type AdSlotState = 'idle' | 'loading' | 'rendered' | 'empty' | 'hidden' | 'error';
+/**
+ * Evento emitido por el servicio de ads.
+ */
+export interface AdEvent {
+    type: 'loaded' | 'empty' | 'error' | 'viewable' | 'clicked';
+    slotId: string;
+    timestamp: Date;
+    isEmpty?: boolean;
+    error?: Error;
+}
+/**
+ * Estado de consent para ads (mapeado desde AnalyticsService).
+ */
+export interface AdsConsentState {
+    /** Permite almacenamiento de ads */
+    adStorage: boolean;
+    /** Permite personalizacion de ads */
+    adPersonalization: boolean;
+    /** Permite datos de usuario para ads */
+    adUserData: boolean;
+}
+/** AdSense global array */
+export type AdSenseCommand = Record<string, unknown>;
+declare global {
+    interface Window {
+        adsbygoogle?: AdSenseCommand[];
+        googletag?: GoogleTag;
+    }
+}
+/** Google Publisher Tags (GPT) interface */
+export interface GoogleTag {
+    cmd: Array<() => void>;
+    pubads(): GoogleTagPubAds;
+}
+/** GPT PubAds service */
+export interface GoogleTagPubAds {
+    setRequestNonPersonalizedAds(value: 0 | 1): void;
+}
+/**
+ * @deprecated Use AdFormat instead
+ */
+export type AdSlotSize = 'leaderboard' | 'billboard' | 'medium-rectangle' | 'large-rectangle' | 'half-page' | 'skyscraper' | 'mobile-banner' | 'mobile-leaderboard' | 'fluid' | 'native' | 'custom';
+/**
+ * @deprecated AdSense handles sizes automatically
+ */
+export declare const AD_SIZE_MAP: Record<AdSlotSize, [number, number] | 'fluid'>;
+/**
+ * @deprecated Not used with AdSense
+ */
+export interface SizeMapping {
+    viewportWidth: number;
+    sizes: ([number, number] | 'fluid')[];
+}