valtech-components 2.0.691 → 2.0.692

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

@@ -0,0 +1,31 @@
+/**
+ * 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;
+};

package/lib/components/organisms/wizard/types.d.ts

@@ -0,0 +1,42 @@
+/**
+ * Tipos y metadatos para el componente WizardComponent.
+ * Permiten definir los pasos, botones, estado y navegación del wizard.
+ */
+import { ButtonMetadata, ComponentState } from '../../types';
+import { NoContentMetadata } from '../no-content/types';
+/**
+ * Metadatos del wizard.
+ * @property state Estado global del wizard.
+ * @property current Paso actual.
+ * @property steps Colección de pasos.
+ * @property error Paso de error.
+ */
+export type WizardMetadata = {
+    state: ComponentState;
+    current: number;
+    steps: Steps;
+    error: Step;
+};
+/**
+ * Representa un paso del wizard.
+ * @property titles Metadatos de "no contenido" para el paso.
+ * @property buttons Botones disponibles en el paso.
+ */
+export type Step = {
+    titles: NoContentMetadata;
+    buttons: ButtonMetadata[];
+};
+/**
+ * Colección de pasos del wizard, indexados por número de paso.
+ */
+export type Steps = {
+    [step: number]: Step;
+};
+/**
+ * Enumera los posibles movimientos de navegación en el wizard.
+ */
+export declare enum MOTION {
+    BACKWARD = 0,
+    FORWARD = 1,
+    RETRY = 2
+}

package/lib/components/organisms/wizard/wizard-footer/wizard-footer.component.d.ts

@@ -0,0 +1,23 @@
+import { ChangeDetectorRef, EventEmitter, OnChanges, OnInit, SimpleChanges } from '@angular/core';
+import { ButtonMetadata } from '../../../types';
+import { MOTION, Step, WizardMetadata } from '../types';
+import * as i0 from "@angular/core";
+export declare class WizardFooterComponent implements OnInit, OnChanges {
+    private cdr;
+    props: WizardMetadata;
+    onClick: EventEmitter<{
+        current: number;
+        motion: MOTION;
+    }>;
+    wrapperId: string;
+    constructor(cdr: ChangeDetectorRef);
+    ngOnInit(): void;
+    ngOnChanges(changes: SimpleChanges): void;
+    clickHandler(token?: string): void;
+    get Current(): Step;
+    get Progress(): number;
+    get actions(): ButtonMetadata[];
+    tryToStep(motion: MOTION): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<WizardFooterComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<WizardFooterComponent, "val-wizard-footer", never, { "props": { "alias": "props"; "required": false; }; }, { "onClick": "onClick"; }, never, never, true, never>;
+}

package/lib/components/organisms/wizard/wizard.component.d.ts

@@ -0,0 +1,27 @@
+import { EventEmitter, OnChanges, OnInit, SimpleChanges } from '@angular/core';
+import { MOTION, Step, WizardMetadata } from './types';
+import * as i0 from "@angular/core";
+export declare class WizardComponent implements OnInit, OnChanges {
+    props: WizardMetadata;
+    onClick: EventEmitter<{
+        current: number;
+        motion: MOTION;
+    }>;
+    wrapperId: string;
+    currentStep: Step | null;
+    currentStepTitles: any;
+    loadingText: string;
+    private cdr;
+    ngOnInit(): void;
+    ngOnChanges(changes: SimpleChanges): void;
+    private updateCurrentStep;
+    working(): void;
+    done(): void;
+    get Current(): Step;
+    setCurrent(newStep: number): void;
+    setError(error: string): void;
+    reset(): void;
+    clickHandler(token?: string): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<WizardComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<WizardComponent, "val-wizard", never, { "props": { "alias": "props"; "required": false; }; }, { "onClick": "onClick"; }, never, ["[step]"], true, never>;
+}

package/lib/components/templates/auth-background/auth-background.component.d.ts

@@ -0,0 +1,59 @@
+import { AuthBackgroundMetadata } from './types';
+import * as i0 from "@angular/core";
+interface WaveData {
+    id: number;
+    path: string;
+    color: string;
+    thickness: number;
+    opacity: number;
+    duration: number;
+    delay: number;
+}
+/**
+ * val-auth-background
+ *
+ * A visually striking background component for authentication pages.
+ * Features animated wave patterns, grain texture, and glassmorphism effects.
+ * Supports dark mode automatically via CSS variables.
+ *
+ * @example Basic usage
+ * ```html
+ * <val-auth-background>
+ *   <div class="my-content">
+ *     <h1>Welcome</h1>
+ *     <val-login [props]="loginProps" />
+ *   </div>
+ * </val-auth-background>
+ * ```
+ *
+ * @example Custom configuration
+ * ```html
+ * <val-auth-background [props]="{
+ *   waveCount: 30,
+ *   showGrain: false,
+ *   minHeight: '100vh'
+ * }">
+ *   <div class="content">...</div>
+ * </val-auth-background>
+ * ```
+ */
+export declare class AuthBackgroundComponent {
+    private _props;
+    set props(value: AuthBackgroundMetadata);
+    get props(): AuthBackgroundMetadata;
+    private defaultColors;
+    private wavesSignal;
+    config: import("@angular/core").Signal<{
+        waveCount: number;
+        waveColors: string[];
+        showGrain: boolean;
+        showGlass: boolean;
+        minHeight: string;
+    }>;
+    waves: import("@angular/core").Signal<WaveData[]>;
+    constructor();
+    private regenerateWaves;
+    static ɵfac: i0.ɵɵFactoryDeclaration<AuthBackgroundComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AuthBackgroundComponent, "val-auth-background", never, { "props": { "alias": "props"; "required": false; }; }, {}, never, ["*"], true, never>;
+}
+export {};

package/lib/components/templates/auth-background/types.d.ts

@@ -0,0 +1,30 @@
+/**
+ * Configuration for the auth-background component.
+ */
+export interface AuthBackgroundMetadata {
+    /**
+     * Number of animated wave lines.
+     * @default 45
+     */
+    waveCount?: number;
+    /**
+     * Array of colors for waves. Picks randomly from this palette.
+     * @default ['#e0e0e0', '#bdbdbd', '#9e9e9e', '#757575', '#616161', '#424242']
+     */
+    waveColors?: string[];
+    /**
+     * Show grain texture overlay.
+     * @default true
+     */
+    showGrain?: boolean;
+    /**
+     * Show glassmorphism layer.
+     * @default true
+     */
+    showGlass?: boolean;
+    /**
+     * Minimum height of the background container.
+     * @default 'calc(100vh - 120px)'
+     */
+    minHeight?: string;
+}

package/lib/components/templates/docs-layout/docs-layout.component.d.ts

@@ -0,0 +1,42 @@
+import { EventEmitter } from '@angular/core';
+import { DocsLayoutMetadata } from './types';
+import * as i0 from "@angular/core";
+/**
+ * val-docs-layout
+ *
+ * A responsive 3-column layout template for documentation sites.
+ * Provides slots for sidebar navigation, main content, and table of contents.
+ *
+ * @example Basic usage
+ * ```html
+ * <val-docs-layout [props]="{ showToc: true }">
+ *   <ng-container sidebar>
+ *     <val-docs-sidebar [props]="sidebarConfig"></val-docs-sidebar>
+ *   </ng-container>
+ *
+ *   <ng-container content>
+ *     <val-article [props]="articleConfig"></val-article>
+ *   </ng-container>
+ *
+ *   <ng-container toc>
+ *     <val-docs-toc [props]="tocConfig"></val-docs-toc>
+ *   </ng-container>
+ * </val-docs-layout>
+ * ```
+ */
+export declare class DocsLayoutComponent {
+    props: DocsLayoutMetadata;
+    sidebarToggle: EventEmitter<boolean>;
+    private readonly MOBILE_BREAKPOINT;
+    private readonly TABLET_BREAKPOINT;
+    private windowWidth;
+    protected sidebarOpen: import("@angular/core").WritableSignal<boolean>;
+    protected isMobile: import("@angular/core").Signal<boolean>;
+    protected isTablet: import("@angular/core").Signal<boolean>;
+    onResize(): void;
+    onEscapeKey(): void;
+    toggleSidebar(): void;
+    closeSidebar(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DocsLayoutComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DocsLayoutComponent, "val-docs-layout", never, { "props": { "alias": "props"; "required": false; }; }, { "sidebarToggle": "sidebarToggle"; }, never, ["[mobile-header]", "[sidebar]", "[content]", "[toc]"], true, never>;
+}

package/lib/components/templates/docs-layout/types.d.ts

@@ -0,0 +1,39 @@
+/**
+ * Configuration for the docs-layout template component.
+ */
+export interface DocsLayoutMetadata {
+    /**
+     * Show the left sidebar navigation.
+     * @default true
+     */
+    showSidebar?: boolean;
+    /**
+     * Show the right table of contents.
+     * @default true
+     */
+    showToc?: boolean;
+    /**
+     * Width of the sidebar.
+     * @default '260px'
+     */
+    sidebarWidth?: string;
+    /**
+     * Width of the table of contents.
+     * @default '220px'
+     */
+    tocWidth?: string;
+    /**
+     * Maximum width of the main content area.
+     * @default '900px'
+     */
+    contentMaxWidth?: string;
+    /**
+     * Sticky header offset (for scroll calculations).
+     * @default 0
+     */
+    headerOffset?: number;
+    /**
+     * Custom CSS class for the layout container.
+     */
+    cssClass?: string;
+}

package/lib/components/templates/docs-page/docs-page.component.d.ts

@@ -0,0 +1,61 @@
+import { AfterViewInit, OnDestroy } from '@angular/core';
+import { DocsBreadcrumbMetadata } from '../../molecules/docs-breadcrumb/types';
+import { DocsNavLinksMetadata } from '../../molecules/docs-nav-links/types';
+import { DocsTocMetadata } from '../../organisms/docs-toc/types';
+import { ContentReactionMetadata } from '../../molecules/content-reaction/types';
+import { DocsPageMetadata } from './types';
+import * as i0 from "@angular/core";
+/**
+ * val-docs-page
+ *
+ * A complete documentation page template that eliminates boilerplate.
+ * Provides automatic TOC generation, navigation links, and consistent styling.
+ *
+ * @example Basic usage
+ * ```html
+ * <val-docs-page [props]="{
+ *   title: 'Button',
+ *   lead: 'A clickable element for user interactions.',
+ *   previousPage: { title: 'Quick Start', route: ['/docs', 'quick-start'] },
+ *   nextPage: { title: 'Card', route: ['/docs', 'components', 'card'] }
+ * }">
+ *   <val-docs-section [props]="{ id: 'basic-usage', title: 'Basic Usage' }">
+ *     <p>Content here...</p>
+ *   </val-docs-section>
+ *
+ *   <val-docs-section [props]="{ id: 'variants', title: 'Variants' }">
+ *     <p>More content...</p>
+ *   </val-docs-section>
+ * </val-docs-page>
+ * ```
+ *
+ * @example With badge
+ * ```html
+ * <val-docs-page [props]="{
+ *   title: 'New Component',
+ *   badge: 'New',
+ *   badgeColor: 'success'
+ * }">
+ *   ...
+ * </val-docs-page>
+ * ```
+ */
+export declare class DocsPageComponent implements AfterViewInit, OnDestroy {
+    private elementRef;
+    private router;
+    private _props;
+    set props(value: DocsPageMetadata);
+    get props(): DocsPageMetadata;
+    private tocItems;
+    private observer;
+    ngAfterViewInit(): void;
+    ngOnDestroy(): void;
+    private scanForSections;
+    tocProps: import("@angular/core").Signal<DocsTocMetadata>;
+    navLinksProps: import("@angular/core").Signal<DocsNavLinksMetadata>;
+    showNavLinks: import("@angular/core").Signal<boolean>;
+    breadcrumbProps: import("@angular/core").Signal<DocsBreadcrumbMetadata>;
+    feedbackProps: import("@angular/core").Signal<ContentReactionMetadata>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DocsPageComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DocsPageComponent, "val-docs-page", never, { "props": { "alias": "props"; "required": false; }; }, {}, never, ["*"], true, never>;
+}

package/lib/components/templates/docs-page/types.d.ts

@@ -0,0 +1,121 @@
+import { DocsBreadcrumbItem } from '../../molecules/docs-breadcrumb/types';
+/**
+ * Configuration for the docs-page component.
+ */
+export interface DocsPageMetadata {
+    /**
+     * Page title displayed as h1.
+     */
+    title: string;
+    /**
+     * Breadcrumb navigation items.
+     * When provided, shows breadcrumb above the title.
+     */
+    breadcrumb?: {
+        /** Breadcrumb items (last item is current page) */
+        items: DocsBreadcrumbItem[];
+        /** Show home icon at start @default true */
+        showHome?: boolean;
+        /** Custom home route @default ['/'] */
+        homeRoute?: string[];
+    };
+    /**
+     * Lead paragraph below the title.
+     */
+    lead?: string;
+    /**
+     * Optional badge displayed next to title (e.g., "New", "Updated", "Beta").
+     */
+    badge?: string;
+    /**
+     * Badge color variant.
+     * @default 'default'
+     */
+    badgeColor?: 'default' | 'success' | 'warning' | 'danger';
+    /**
+     * Previous page for navigation.
+     */
+    previousPage?: DocsPageLink;
+    /**
+     * Next page for navigation.
+     */
+    nextPage?: DocsPageLink;
+    /**
+     * i18n labels for navigation.
+     */
+    navLabels?: {
+        previous?: string;
+        next?: string;
+    };
+    /**
+     * TOC configuration.
+     */
+    toc?: {
+        /**
+         * TOC title.
+         * @default 'On this page'
+         */
+        title?: string;
+        /**
+         * Hide the TOC.
+         * @default false
+         */
+        hide?: boolean;
+    };
+    /**
+     * Custom CSS class.
+     */
+    cssClass?: string;
+    /**
+     * Feedback/reaction widget configuration.
+     * When enabled, shows a "Was this page helpful?" reaction widget.
+     */
+    feedback?: DocsPageFeedbackConfig;
+}
+/**
+ * Configuration for the feedback reaction widget.
+ */
+export interface DocsPageFeedbackConfig {
+    /**
+     * Enable the feedback widget.
+     */
+    enabled: boolean;
+    /**
+     * Entity type for categorizing feedback.
+     * @default 'docs-page'
+     */
+    entityType?: string;
+    /**
+     * Entity ID for this page. If not provided, derives from current route.
+     * @example 'components-button', 'guides-theming'
+     */
+    entityId?: string;
+    /**
+     * Custom question text. If not provided, uses i18n default.
+     * @example '¿Te resultó útil esta página?'
+     */
+    question?: string;
+    /**
+     * Allow anonymous (unauthenticated) feedback.
+     * @default true
+     */
+    allowAnonymous?: boolean;
+    /**
+     * Show optional comment field after reaction.
+     * @default true
+     */
+    showComment?: boolean;
+}
+/**
+ * Link to another documentation page.
+ */
+export interface DocsPageLink {
+    /**
+     * Display title for the link.
+     */
+    title: string;
+    /**
+     * Route array for navigation.
+     */
+    route: string[];
+}

package/lib/components/templates/docs-shell/docs-shell.component.d.ts

@@ -0,0 +1,33 @@
+import { EventEmitter } from '@angular/core';
+import { DocsSearchMetadata } from '../../molecules/docs-search/types';
+import { DocsShellMetadata, DocsShellSection } from './types';
+import * as i0 from "@angular/core";
+/**
+ * val-docs-shell
+ *
+ * A complete documentation shell with sidebar navigation, search, and content area.
+ * Use this component as the root layout for documentation pages.
+ *
+ * @example
+ * ```html
+ * <val-docs-shell [props]="shellConfig">
+ *   <router-outlet></router-outlet>
+ * </val-docs-shell>
+ * ```
+ */
+export declare class DocsShellComponent {
+    private menuCtrl;
+    private docsNav;
+    props: DocsShellMetadata;
+    navigate: EventEmitter<string[]>;
+    private _sectionsState;
+    sectionsState: import("@angular/core").Signal<DocsShellSection[]>;
+    searchProps: import("@angular/core").Signal<DocsSearchMetadata>;
+    ngOnChanges(): void;
+    toggleSection(section: DocsShellSection): void;
+    closeMenu(): Promise<void>;
+    onNavigate(route: string[]): void;
+    private buildSearchSections;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DocsShellComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DocsShellComponent, "val-docs-shell", never, { "props": { "alias": "props"; "required": false; }; }, { "navigate": "navigate"; }, never, ["*"], true, never>;
+}

package/lib/components/templates/docs-shell/types.d.ts

@@ -0,0 +1,152 @@
+import { CompanyFooterMetadata } from '../../organisms/company-footer/types';
+import { LanguageSelectorMetadata } from '../../molecules/language-selector/types';
+/**
+ * Configuration for the docs-shell component.
+ */
+export interface DocsShellMetadata {
+    /**
+     * Logo configuration for the sidebar header.
+     */
+    logo: DocsShellLogo;
+    /**
+     * Navigation sections for the sidebar.
+     */
+    sections: DocsShellSection[];
+    /**
+     * Search configuration.
+     */
+    search?: {
+        /** Placeholder text for the search input */
+        placeholder?: string;
+        /** Show keyboard shortcut hint */
+        showShortcut?: boolean;
+    };
+    /**
+     * Mobile logo configuration.
+     * Used in the mobile header toolbar.
+     */
+    mobileLogo?: {
+        /**
+         * CSS variable for the logo (recommended for dark mode support).
+         * @example '--main-logo-mini'
+         */
+        cssVariable?: string;
+        /**
+         * Logo image source (alternative to cssVariable).
+         */
+        src?: string;
+        /**
+         * Logo width.
+         * @default '32px'
+         */
+        width?: string;
+        /**
+         * Logo height.
+         * @default '32px'
+         */
+        height?: string;
+    };
+    /**
+     * Footer configuration.
+     */
+    footer?: CompanyFooterMetadata;
+    /**
+     * Sidebar width in desktop mode.
+     * @default '260px'
+     */
+    sidebarWidth?: string;
+    /**
+     * Language selector configuration for the footer.
+     */
+    languageSelector?: LanguageSelectorMetadata;
+    /**
+     * Custom CSS class for the shell.
+     */
+    cssClass?: string;
+}
+/**
+ * Logo configuration for the docs shell.
+ */
+export interface DocsShellLogo {
+    /**
+     * Use CSS variable for the logo (recommended for dark mode support).
+     * When set, uses background-image with this CSS variable.
+     * @example '--main-logo'
+     */
+    cssVariable?: string;
+    /**
+     * Logo image source (alternative to cssVariable).
+     */
+    src?: string;
+    /**
+     * Dark mode logo source (used with src).
+     */
+    srcDark?: string;
+    /**
+     * Alt text for accessibility.
+     */
+    alt: string;
+    /**
+     * Route to navigate when clicking the logo.
+     * @default ['/']
+     */
+    route?: string[];
+    /**
+     * Logo width.
+     * @default '10rem'
+     */
+    width?: string;
+    /**
+     * Logo height.
+     * @default '3rem'
+     */
+    height?: string;
+}
+/**
+ * A navigation section in the sidebar.
+ */
+export interface DocsShellSection {
+    /**
+     * Unique key for the section.
+     */
+    key: string;
+    /**
+     * Display title for the section header.
+     */
+    title: string;
+    /**
+     * Icon name (ionicons).
+     */
+    icon?: string;
+    /**
+     * Whether the section is expanded by default.
+     * @default true
+     */
+    expanded?: boolean;
+    /**
+     * Child navigation links.
+     */
+    children: DocsShellLink[];
+}
+/**
+ * A navigation link in the sidebar.
+ */
+export interface DocsShellLink {
+    /**
+     * Display label for the link.
+     */
+    label: string;
+    /**
+     * Route array for navigation.
+     */
+    route: string[];
+    /**
+     * Optional badge text (e.g., "New", "Updated").
+     */
+    badge?: string;
+    /**
+     * Badge color variant.
+     * @default 'default'
+     */
+    badgeColor?: 'default' | 'success';
+}

package/lib/components/templates/layout/layout.component.d.ts

@@ -0,0 +1,5 @@
+import * as i0 from "@angular/core";
+export declare class LayoutComponent {
+    static ɵfac: i0.ɵɵFactoryDeclaration<LayoutComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<LayoutComponent, "val-layout", never, {}, {}, never, ["*"], true, never>;
+}