valtech-components 2.0.821 → 2.0.823

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/maintenance-page/maintenance-page.component.d.ts

@@ -0,0 +1,57 @@
+import { MaintenancePageMetadata } from './types';
+import * as i0 from "@angular/core";
+/**
+ * val-maintenance-page
+ *
+ * Página completa de mantenimiento con imagen, título y mensaje personalizables.
+ * Se integra con i18n para textos por defecto en múltiples idiomas.
+ *
+ * @example
+ * ```html
+ * <!-- Uso básico (usa textos por defecto) -->
+ * <val-maintenance-page />
+ *
+ * <!-- Personalizado -->
+ * <val-maintenance-page
+ *   [props]="{
+ *     title: 'En mantenimiento',
+ *     message: 'Volvemos pronto',
+ *     image: 'assets/maintenance.svg'
+ *   }"
+ * />
+ * ```
+ *
+ * @example
+ * ```typescript
+ * // En app.component.ts
+ * @Component({
+ *   template: \`
+ *     @if (appConfig.isMaintenanceMode()) {
+ *       <val-maintenance-page />
+ *     } @else {
+ *       <ion-router-outlet />
+ *     }
+ *   \`
+ * })
+ * export class AppComponent {
+ *   appConfig = inject(AppConfigService);
+ * }
+ * ```
+ */
+export declare class MaintenancePageComponent {
+    /**
+     * Configuración de la página de mantenimiento.
+     */
+    props: MaintenancePageMetadata;
+    private i18n;
+    /**
+     * Título de la página (reactivo a cambios de idioma).
+     */
+    title: import("@angular/core").Signal<string>;
+    /**
+     * Mensaje de la página (reactivo a cambios de idioma).
+     */
+    message: import("@angular/core").Signal<string>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MaintenancePageComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MaintenancePageComponent, "val-maintenance-page", never, { "props": { "alias": "props"; "required": false; }; }, {}, never, never, true, never>;
+}

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

@@ -0,0 +1,12 @@
+/**
+ * Props para val-maintenance-page component.
+ *
+ * @property title - Título personalizado (opcional, usa i18n por defecto)
+ * @property message - Mensaje personalizado (opcional, usa i18n por defecto)
+ * @property image - Ruta a imagen personalizada (opcional)
+ */
+export type MaintenancePageMetadata = {
+    title?: string;
+    message?: string;
+    image?: string;
+};

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

@@ -0,0 +1,107 @@
+import { EventEmitter } from '@angular/core';
+import { ThemeService } from '../../../services/theme.service';
+import { NavigationService } from '../../../services/navigation';
+import { PageContentMetadata } from './types';
+import * as i0 from "@angular/core";
+/**
+ * val-page-content
+ *
+ * A page content template with corporate header, main content area,
+ * and footer slots. Supports dark mode and customizable backgrounds.
+ *
+ * @example
+ * <val-page-content
+ *   [props]="{
+ *     header: { ... },
+ *     background: '--main-background',
+ *     homeRoute: '/'
+ *   }"
+ *   (onHeaderClick)="handleHeaderAction($event)"
+ * >
+ *   <div content>
+ *     <!-- Main page content -->
+ *   </div>
+ *   <div footer>
+ *     <val-company-footer [props]="footerProps"></val-company-footer>
+ *   </div>
+ * </val-page-content>
+ *
+ * @input props - Page content configuration
+ * @output onHeaderClick - Emits when a header action is clicked
+ */
+export declare class PageContentComponent {
+    private theme;
+    private nav;
+    /**
+     * Page content configuration.
+     */
+    props: PageContentMetadata;
+    private appConfigEnabled;
+    constructor(theme: ThemeService, nav: NavigationService);
+    /**
+     * Whether to show the update banner.
+     * Only shows if AppConfigService is configured and not disabled via props.
+     */
+    get showUpdateBanner(): boolean;
+    /**
+     * Emits when a header action is clicked.
+     */
+    onHeaderClick: EventEmitter<string>;
+    /**
+     * Default header configuration (cached to avoid infinite change detection).
+     */
+    private readonly defaultHeader;
+    /**
+     * Gets header props, using cached default if not provided.
+     * Injects languageSelector into toolbar when provided at page level.
+     */
+    get headerProps(): import("valtech-components").HeaderMetadata | {
+        toolbar: {
+            languageSelector: import("valtech-components").LanguageSelectorMetadata;
+            withBack: boolean;
+            withMenu?: boolean;
+            backText?: string;
+            withActions: boolean;
+            color?: import("@ionic/core").Color;
+            textColor?: import("@ionic/core").Color;
+            title: string;
+            actions: import("valtech-components").ToolbarAction[];
+        } | {
+            languageSelector: import("valtech-components").LanguageSelectorMetadata;
+            withBack: boolean;
+            withActions: boolean;
+            textColor: "dark";
+            withMenu: boolean;
+            title: string;
+            actions: {
+                token: string;
+                description: string;
+                position: "left";
+                type: "IMAGE";
+                image: {
+                    width: number;
+                    src: string;
+                    alt: string;
+                    mode: "box";
+                    shaded: boolean;
+                    bordered: boolean;
+                    size: "small";
+                    limited: boolean;
+                    flex: boolean;
+                };
+            }[];
+        };
+        translucent?: boolean;
+        bordered?: boolean;
+    };
+    /**
+     * Gets the background color based on theme.
+     */
+    getBackground(): string;
+    /**
+     * Handles header action clicks.
+     */
+    onHeaderClickHandler(token: string): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<PageContentComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<PageContentComponent, "val-page-content", never, { "props": { "alias": "props"; "required": false; }; }, { "onHeaderClick": "onHeaderClick"; }, never, ["[content]", "[footer]", "[extra-footer]"], true, never>;
+}

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

@@ -0,0 +1,27 @@
+import { HeaderMetadata } from '../../organisms/header/types';
+import { LanguageSelectorMetadata } from '../../molecules/language-selector/types';
+/**
+ * Configuration for the page content component.
+ */
+export interface PageContentMetadata {
+    /** Header configuration */
+    header?: HeaderMetadata;
+    /** Background color or CSS variable */
+    background?: string;
+    /** Background color for dark mode */
+    backgroundDark?: string;
+    /** Route to navigate to when header logo is clicked */
+    homeRoute?: string;
+    /**
+     * Language selector configuration.
+     * When provided, displays a language selector icon in the header (left of menu button).
+     * Uses 'icon' mode by default for compact display.
+     */
+    languageSelector?: LanguageSelectorMetadata;
+    /**
+     * Whether to show the update banner when a new version is available.
+     * Requires AppConfigService to be configured with provideValtechAppConfig().
+     * @default true
+     */
+    showUpdateBanner?: boolean;
+}

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

@@ -0,0 +1,54 @@
+import { EventEmitter } from '@angular/core';
+import { PageTemplateMetadata } from './types';
+import * as i0 from "@angular/core";
+/**
+ * val-page-template
+ *
+ * A page template component with title, expandable description,
+ * content projection, and optional back navigation button.
+ *
+ * @example
+ * <val-page-template
+ *   [props]="{
+ *     pageTitle: 'Getting Started',
+ *     pageDescription: 'Learn how to use our components...',
+ *     showBackButton: true
+ *   }"
+ * >
+ *   <div extra-description>
+ *     <p>Additional info here</p>
+ *   </div>
+ *
+ *   <!-- Main content -->
+ *   <my-content></my-content>
+ *
+ *   <div extra-footer>
+ *     <p>Footer content</p>
+ *   </div>
+ * </val-page-template>
+ *
+ * @input props - Page template configuration
+ * @output onBack - Emits when back button is clicked
+ */
+export declare class PageTemplateComponent {
+    private nav;
+    private i18n;
+    /**
+     * Page template configuration.
+     */
+    props: PageTemplateMetadata;
+    /**
+     * Emits when the back button is clicked.
+     */
+    onBack: EventEmitter<void>;
+    /**
+     * Back button text - reactive to language changes.
+     */
+    backButtonText: import("@angular/core").Signal<string>;
+    /**
+     * Handles back navigation.
+     */
+    handleBack(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<PageTemplateComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<PageTemplateComponent, "val-page-template", never, { "props": { "alias": "props"; "required": false; }; }, { "onBack": "onBack"; }, never, ["[extra-description]", "*", "[extra-footer]"], true, never>;
+}

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

@@ -0,0 +1,17 @@
+/**
+ * Configuration for the page template component.
+ */
+export interface PageTemplateMetadata {
+    /** Page title displayed in large header style */
+    pageTitle?: string;
+    /** Page description (expandable text) */
+    pageDescription?: string;
+    /** Show a back button at the bottom */
+    showBackButton?: boolean;
+    /** Custom text for the back button (default: 'Back') */
+    backButtonText?: string;
+    /** Character limit for description before expand (default: 180) */
+    descriptionLimit?: number;
+    /** Text color for the description (default: 'dark') */
+    descriptionColor?: string;
+}

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

@@ -0,0 +1,99 @@
+import { EventEmitter, OnDestroy, OnInit } from '@angular/core';
+import { ViewWillEnter, ViewWillLeave } from '@ionic/angular/standalone';
+import { ContainerSize } from '../../atoms/container/types';
+import { PageRefreshService } from '../../../services/page-refresh/page-refresh.service';
+import { PageWrapperMetadata } from './types';
+import * as i0 from "@angular/core";
+/**
+ * val-page-wrapper
+ *
+ * A complete page wrapper template with header, router outlet, footer,
+ * and automatic scroll-to-top on navigation.
+ *
+ * @example
+ * <val-page-wrapper
+ *   [props]="{
+ *     homeRoute: '/',
+ *     scrollToTopOnNavigate: true,
+ *     footer: {
+ *       links: { ... },
+ *       rights: { companyName: 'Acme' }
+ *     }
+ *   }"
+ * ></val-page-wrapper>
+ *
+ * @input props - Page wrapper configuration
+ * @output onHeaderClick - Emits when a header action is clicked
+ */
+export declare class PageWrapperComponent implements ViewWillEnter, ViewWillLeave, OnInit, OnDestroy {
+    private theme;
+    private nav;
+    private router;
+    private routerSubscription?;
+    /** Bus del pull-to-refresh — la página activa registra su handler aquí. */
+    protected pageRefresh: PageRefreshService;
+    /**
+     * Handler del gesto pull-to-refresh (`ion-refresher` ionRefresh). Delega en
+     * el handler que registró la página activa y cierra el spinner al terminar.
+     */
+    onPageRefresh(event: Event): Promise<void>;
+    /**
+     * Page wrapper configuration.
+     * Signal-based input for full reactivity with computed().
+     */
+    readonly props: import("@angular/core").InputSignal<PageWrapperMetadata>;
+    /**
+     * Emits when a header action is clicked.
+     */
+    onHeaderClick: EventEmitter<string>;
+    /**
+     * Default header configuration (cached to avoid infinite change detection).
+     */
+    private readonly defaultHeader;
+    headerProps: import("@angular/core").Signal<import("valtech-components").HeaderMetadata | {
+        bordered: boolean;
+        translucent: boolean;
+        toolbar: {
+            withBack: boolean;
+            withActions: boolean;
+            textColor: "dark";
+            withMenu: boolean;
+            title: string;
+            actions: {
+                token: string;
+                description: string;
+                position: "left";
+                type: "IMAGE";
+                image: {
+                    width: number;
+                    src: string;
+                    alt: string;
+                    mode: "box";
+                    shaded: boolean;
+                    bordered: boolean;
+                    size: "small";
+                    limited: boolean;
+                    flex: boolean;
+                };
+            }[];
+        };
+    }>;
+    contentId: import("@angular/core").Signal<string>;
+    propsFooter: import("@angular/core").Signal<import("valtech-components").CompanyFooterMetadata>;
+    contentMaxWidth: import("@angular/core").Signal<ContainerSize>;
+    background: import("@angular/core").Signal<string>;
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    ionViewWillLeave(): void;
+    ionViewWillEnter(): void;
+    /**
+     * Scrolls the content to the top.
+     */
+    private scrollToTop;
+    /**
+     * Handles header action clicks.
+     */
+    onHeaderClickHandler(token: string): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<PageWrapperComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<PageWrapperComponent, "val-page-wrapper", never, { "props": { "alias": "props"; "required": false; "isSignal": true; }; }, { "onHeaderClick": "onHeaderClick"; }, never, never, true, never>;
+}

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

@@ -0,0 +1,26 @@
+import { HeaderMetadata } from '../../organisms/header/types';
+import { CompanyFooterMetadata } from '../../organisms/company-footer/types';
+import { ContainerSize } from '../../atoms/container/types';
+/**
+ * Configuration for the page wrapper component.
+ */
+export interface PageWrapperMetadata {
+    /** Header configuration */
+    header?: HeaderMetadata;
+    /** Footer configuration */
+    footer?: CompanyFooterMetadata;
+    /** Background color or CSS variable */
+    background?: string;
+    /** Route to navigate to when header logo is clicked */
+    homeRoute?: string;
+    /** Content ID for scroll handling */
+    contentId?: string;
+    /** Enable scroll-to-top on route change */
+    scrollToTopOnNavigate?: boolean;
+    /**
+     * Max-width cap for the routed content using design tokens.
+     * 'fluid' = no cap (default, backwards-compatible).
+     * Recommended: 'xl' for typical app pages.
+     */
+    contentMaxWidth?: ContainerSize;
+}

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

@@ -0,0 +1,14 @@
+import { EventEmitter } from '@angular/core';
+import { ThemeService } from '../../../services/theme.service';
+import { SimpleMetadata } from './types';
+import * as i0 from "@angular/core";
+export declare class SimpleComponent {
+    props: SimpleMetadata;
+    onClick: EventEmitter<string>;
+    onScrollEvent: EventEmitter<boolean>;
+    theme: ThemeService;
+    onClickHandler(token?: string): void;
+    onScrollHandler($event: Event): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SimpleComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SimpleComponent, "val-simple", never, { "props": { "alias": "props"; "required": false; }; }, { "onClick": "onClick"; "onScrollEvent": "onScrollEvent"; }, never, ["[inner-container]", "[outter-container]"], true, never>;
+}

package/lib/components/templates/simple/types.d.ts

@@ -0,0 +1,10 @@
+import { LinkMetadata } from '../../molecules/link/types';
+import { HeaderMetadata } from '../../organisms/header/types';
+export interface SimpleMetadata {
+    header: HeaderMetadata;
+    pageTitle: string;
+    pageDescription: string;
+    withDivider: boolean;
+    link?: LinkMetadata;
+    background: string;
+}