valtech-components 2.0.691 → 2.0.692

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

@@ -0,0 +1,40 @@
+import { EventEmitter, OnInit, OnDestroy } from '@angular/core';
+import { FormControl } from '@angular/forms';
+import { CurrencyInputMetadata, CurrencyInputChangeEvent, CurrencyConfig } from './types';
+import * as i0 from "@angular/core";
+export declare class CurrencyInputComponent implements OnInit, OnDestroy {
+    props: CurrencyInputMetadata;
+    currencyChange: EventEmitter<CurrencyInputChangeEvent>;
+    states: {
+        ENABLED: "ENABLED";
+        DISABLED: "DISABLED";
+        WORKING: "WORKING";
+        ERROR: "ERROR";
+    };
+    displayControl: FormControl<string>;
+    currencyControl: FormControl<string>;
+    private valueSubscription;
+    private isFocused;
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    getLabel(): string;
+    getPlaceholder(): string;
+    getHint(): string;
+    private getDefaultPlaceholder;
+    getCurrencyList(): CurrencyConfig[];
+    getSelectedCurrency(): CurrencyConfig;
+    getCurrencySymbol(): string;
+    getSymbolPosition(): 'prefix' | 'suffix';
+    getDecimalPlaces(): number;
+    get hasError(): boolean;
+    getErrorMessage(): string;
+    onInput(event: CustomEvent): void;
+    onFocus(): void;
+    onBlur(): void;
+    onCurrencyChange(event: CustomEvent): void;
+    private parseValue;
+    private formatValue;
+    private emitChange;
+    static ɵfac: i0.ɵɵFactoryDeclaration<CurrencyInputComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CurrencyInputComponent, "val-currency-input", never, { "props": { "alias": "props"; "required": false; }; }, { "currencyChange": "currencyChange"; }, never, never, true, never>;
+}

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

@@ -0,0 +1,96 @@
+import { FormControl } from '@angular/forms';
+import { Color } from '@ionic/core';
+import { ComponentState } from '../../types';
+/**
+ * Currency configuration.
+ */
+export interface CurrencyConfig {
+    /** Currency code (ISO 4217, e.g., 'USD', 'MXN', 'EUR') */
+    code: string;
+    /** Currency symbol (e.g., '$', '€', '£') */
+    symbol: string;
+    /** Currency name */
+    name: string;
+    /** Symbol position */
+    symbolPosition?: 'prefix' | 'suffix';
+    /** Decimal separator */
+    decimalSeparator?: string;
+    /** Thousands separator */
+    thousandsSeparator?: string;
+    /** Number of decimal places */
+    decimalPlaces?: number;
+}
+/**
+ * Common currency configurations.
+ */
+export declare const COMMON_CURRENCIES: CurrencyConfig[];
+/**
+ * Metadata for the currency input component.
+ */
+export interface CurrencyInputMetadata {
+    /** Form control for the numeric value (stores raw number) */
+    control: FormControl<number | null>;
+    /** Unique token for the input */
+    token?: string;
+    /** Display label */
+    label?: string;
+    /** Field name */
+    name?: string;
+    /** Help text */
+    hint?: string;
+    /** Input placeholder */
+    placeholder?: string;
+    /** Field state */
+    state?: ComponentState;
+    /** Currency configuration */
+    currency?: CurrencyConfig;
+    /** Currency code (shortcut if not providing full config) */
+    currencyCode?: string;
+    /** Available currencies for selector */
+    currencies?: CurrencyConfig[];
+    /** Show currency selector */
+    showCurrencySelector?: boolean;
+    /** Allow negative values */
+    allowNegative?: boolean;
+    /** Number of decimal places (overrides currency default) */
+    decimalPlaces?: number;
+    /** Show thousands separator */
+    showThousandsSeparator?: boolean;
+    /** Show currency symbol */
+    showSymbol?: boolean;
+    /** Minimum value */
+    min?: number;
+    /** Maximum value */
+    max?: number;
+    /** Component color */
+    color?: Color;
+    /** Fill style */
+    fill?: 'outline' | 'solid';
+    /** Label placement */
+    labelPlacement?: 'fixed' | 'floating' | 'stacked' | 'start' | 'end';
+    /** Custom CSS class */
+    cssClass?: string;
+    /** Content key for reactive label */
+    labelContentKey?: string;
+    /** Content key for reactive placeholder */
+    placeholderContentKey?: string;
+    /** Content key for reactive hint */
+    hintContentKey?: string;
+    /** Component class name for content lookup */
+    contentClass?: string;
+    /** Custom error messages */
+    errors?: Record<string, string>;
+    /** Show validation errors */
+    showErrors?: boolean;
+}
+/**
+ * Event emitted when currency input changes.
+ */
+export interface CurrencyInputChangeEvent {
+    /** Raw numeric value */
+    value: number | null;
+    /** Formatted display value */
+    formattedValue: string;
+    /** Selected currency */
+    currency: CurrencyConfig;
+}

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

@@ -0,0 +1,40 @@
+import { OnChanges, OnInit, SimpleChanges } from '@angular/core';
+import { DateInputMetadata } from './types';
+import * as i0 from "@angular/core";
+export declare class DateInputComponent implements OnInit, OnChanges {
+    private i18n;
+    private presets;
+    /**
+     * Preset name to apply. Presets define reusable date input configurations
+     * that can be registered at app level via provideValtechPresets().
+     *
+     * @example
+     * <val-date-input preset="form-field" [props]="{ control: ctrl }"></val-date-input>
+     */
+    preset?: string;
+    /**
+     * Input configuration object. Values here override preset values.
+     * @type {DateInputMetadata}
+     * @property control - The Angular FormControl for the date input.
+     * @property hint - The hint text for the input.
+     */
+    props: Partial<DateInputMetadata>;
+    /**
+     * Resolved props after merging preset + explicit props.
+     */
+    resolvedProps: DateInputMetadata;
+    /** Done button text - from props or i18n default */
+    get doneText(): string;
+    /** Cancel button text - from props or i18n default */
+    get cancelText(): string;
+    ngOnInit(): void;
+    ngOnChanges(changes: SimpleChanges): void;
+    /**
+     * Merge preset configuration with explicit props.
+     * Explicit props take precedence over preset values.
+     */
+    private resolveProps;
+    private applyDefaultValue;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DateInputComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DateInputComponent, "val-date-input", never, { "preset": { "alias": "preset"; "required": false; }; "props": { "alias": "props"; "required": false; }; }, {}, never, never, true, never>;
+}

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

@@ -0,0 +1,74 @@
+import { FormControl } from '@angular/forms';
+import { Color } from '@ionic/core';
+import { ComponentState } from '../../types';
+/**
+ * Metadata for the date input component.
+ */
+export interface DateInputMetadata {
+    /** Form control for the date value (ISO string) */
+    control: FormControl<string | null>;
+    /** Unique token for the input */
+    token?: string;
+    /** Display label */
+    label?: string;
+    /** Field name */
+    name?: string;
+    /** Help text / title displayed in modal */
+    hint?: string;
+    /** Placeholder text */
+    placeholder?: string;
+    /** Field state */
+    state?: ComponentState;
+    /** Minimum selectable date (ISO string) */
+    min?: string;
+    /** Maximum selectable date (ISO string) */
+    max?: string;
+    /** Locale for date display (e.g., 'es-ES') */
+    locale?: string;
+    /** First day of week (0 = Sunday, 1 = Monday) */
+    firstDayOfWeek?: number;
+    /** Date presentation format */
+    presentation?: 'date' | 'date-time' | 'month' | 'month-year' | 'year' | 'time';
+    /** Custom format options */
+    formatOptions?: {
+        date?: {
+            dateStyle?: 'full' | 'long' | 'medium' | 'short';
+        };
+        time?: {
+            timeStyle?: 'full' | 'long' | 'medium' | 'short';
+        };
+    };
+    /** Done button text */
+    doneText?: string;
+    /** Cancel button text */
+    cancelText?: string;
+    /** Show default buttons */
+    showDefaultButtons?: boolean;
+    /** Component color */
+    color?: Color;
+    /** Custom CSS class */
+    cssClass?: string;
+    /** Initial value for the field */
+    value?: string;
+    /** Default value configuration - string for custom defaults, true for auto defaults */
+    withDefault?: string | boolean;
+    /** Content key for reactive label */
+    contentKey?: string;
+    /** Component class name for content lookup */
+    contentClass?: string;
+    /** Fallback text if content key is not found */
+    contentFallback?: string;
+    /** Custom error messages */
+    errors?: Record<string, string>;
+    /** Show validation errors */
+    showErrors?: boolean;
+}
+/**
+ * Event emitted when date changes.
+ */
+export interface DateInputChangeEvent {
+    /** Selected date value (ISO string) */
+    value: string | null;
+    /** Formatted date string for display */
+    formattedValue: string;
+}

package/lib/components/molecules/date-range-input/date-range-input.component.d.ts

@@ -0,0 +1,50 @@
+import { EventEmitter, OnInit, OnDestroy } from '@angular/core';
+import { FormControl } from '@angular/forms';
+import { DateRangeInputMetadata, DateRangeChangeEvent } from './types';
+import * as i0 from "@angular/core";
+export declare class DateRangeInputComponent implements OnInit, OnDestroy {
+    props: DateRangeInputMetadata;
+    rangeChange: EventEmitter<DateRangeChangeEvent>;
+    states: {
+        ENABLED: "ENABLED";
+        DISABLED: "DISABLED";
+        WORKING: "WORKING";
+        ERROR: "ERROR";
+    };
+    internalStartControl: FormControl<string>;
+    internalEndControl: FormControl<string>;
+    startDatetimeId: string;
+    endDatetimeId: string;
+    showDayCount: boolean;
+    private i18n;
+    private valueSubscription;
+    /** Get done button text from props or i18n */
+    getDoneText(): string;
+    /** Get cancel button text from props or i18n */
+    getCancelText(): string;
+    /** Get start date fallback label */
+    getStartDateFallback(): string;
+    /** Get end date fallback label */
+    getEndDateFallback(): string;
+    /** Get day/days label based on count */
+    getDayLabel(): string;
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    getLabel(): string;
+    getStartLabel(): string;
+    getEndLabel(): string;
+    getHint(): string;
+    getMinDate(): string | undefined;
+    getMaxDate(): string | undefined;
+    getMaxStartDate(): string | undefined;
+    getMinEndDate(): string | undefined;
+    get hasError(): boolean;
+    getErrorMessage(): string;
+    get dayCount(): number | null;
+    onStartDateChange(event: CustomEvent): void;
+    onEndDateChange(event: CustomEvent): void;
+    private updateMainControl;
+    private validateRange;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DateRangeInputComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DateRangeInputComponent, "val-date-range-input", never, { "props": { "alias": "props"; "required": false; }; }, { "rangeChange": "rangeChange"; }, never, never, true, never>;
+}

package/lib/components/molecules/date-range-input/types.d.ts

@@ -0,0 +1,109 @@
+import { FormControl } from '@angular/forms';
+import { Color } from '@ionic/core';
+import { ComponentState } from '../../types';
+/**
+ * Date range value.
+ */
+export interface DateRangeValue {
+    /** Start date (ISO string) */
+    start: string | null;
+    /** End date (ISO string) */
+    end: string | null;
+}
+/**
+ * Metadata for the date range input component.
+ */
+export interface DateRangeInputMetadata {
+    /** Form control for the date range (stores DateRangeValue) */
+    control: FormControl<DateRangeValue | null>;
+    /** Separate control for start date */
+    startControl?: FormControl<string | null>;
+    /** Separate control for end date */
+    endControl?: FormControl<string | null>;
+    /** Unique token for the input */
+    token?: string;
+    /** Display label */
+    label?: string;
+    /** Field name */
+    name?: string;
+    /** Help text */
+    hint?: string;
+    /** Field state */
+    state?: ComponentState;
+    /** Minimum selectable date (ISO string) */
+    min?: string;
+    /** Maximum selectable date (ISO string) */
+    max?: string;
+    /** Locale for date display */
+    locale?: string;
+    /** First day of week (0 = Sunday, 1 = Monday) */
+    firstDayOfWeek?: number;
+    /** Date presentation format */
+    presentation?: 'date' | 'date-time' | 'month' | 'month-year' | 'year';
+    /** Custom format options */
+    formatOptions?: {
+        date?: {
+            dateStyle?: 'full' | 'long' | 'medium' | 'short';
+        };
+        time?: {
+            timeStyle?: 'full' | 'long' | 'medium' | 'short';
+        };
+    };
+    /** Start date label */
+    startLabel?: string;
+    /** End date label */
+    endLabel?: string;
+    /** Start date placeholder */
+    startPlaceholder?: string;
+    /** End date placeholder */
+    endPlaceholder?: string;
+    /** Done button text */
+    doneText?: string;
+    /** Cancel button text */
+    cancelText?: string;
+    /** Require both dates */
+    requireBoth?: boolean;
+    /** Minimum range in days */
+    minRangeDays?: number;
+    /** Maximum range in days */
+    maxRangeDays?: number;
+    /** Disable past dates */
+    disablePastDates?: boolean;
+    /** Disable future dates */
+    disableFutureDates?: boolean;
+    /** Specific dates to disable */
+    disabledDates?: string[];
+    /** Display mode: 'inline' shows both pickers, 'modal' uses modals */
+    displayMode?: 'inline' | 'modal';
+    /** Layout direction */
+    layout?: 'horizontal' | 'vertical';
+    /** Component color */
+    color?: Color;
+    /** Custom CSS class */
+    cssClass?: string;
+    /** Content key for reactive label */
+    labelContentKey?: string;
+    /** Content key for reactive start label */
+    startLabelContentKey?: string;
+    /** Content key for reactive end label */
+    endLabelContentKey?: string;
+    /** Content key for reactive hint */
+    hintContentKey?: string;
+    /** Component class name for content lookup */
+    contentClass?: string;
+    /** Custom error messages */
+    errors?: Record<string, string>;
+    /** Show validation errors */
+    showErrors?: boolean;
+}
+/**
+ * Event emitted when date range changes.
+ */
+export interface DateRangeChangeEvent {
+    /** Date range value */
+    value: DateRangeValue;
+    /** Whether the range is valid */
+    isValid: boolean;
+    /** Number of days in the range */
+    dayCount: number | null;
+}

package/lib/components/molecules/docs-api-table/docs-api-table.component.d.ts

@@ -0,0 +1,41 @@
+import { DocsApiTableMetadata, DocsApiColumn } from './types';
+import * as i0 from "@angular/core";
+/**
+ * val-docs-api-table
+ *
+ * A table component for documenting component APIs (inputs, outputs, methods).
+ *
+ * @example Properties table
+ * ```html
+ * <val-docs-api-table
+ *   [props]="{
+ *     title: 'Properties',
+ *     items: [
+ *       { name: 'disabled', type: 'boolean', default: 'false', description: 'Disables the button' },
+ *       { name: 'color', type: 'string', default: 'primary', description: 'Button color variant' }
+ *     ]
+ *   }"
+ * ></val-docs-api-table>
+ * ```
+ *
+ * @example Events table
+ * ```html
+ * <val-docs-api-table
+ *   [props]="{
+ *     title: 'Events',
+ *     columns: ['name', 'type', 'description'],
+ *     items: [
+ *       { name: 'click', type: 'EventEmitter<MouseEvent>', description: 'Emitted when clicked' }
+ *     ]
+ *   }"
+ * ></val-docs-api-table>
+ * ```
+ */
+export declare class DocsApiTableComponent {
+    props: DocsApiTableMetadata;
+    readonly columnLabels: Record<DocsApiColumn, string>;
+    get displayColumns(): DocsApiColumn[];
+    getColumnLabel(col: DocsApiColumn): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DocsApiTableComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DocsApiTableComponent, "val-docs-api-table", never, { "props": { "alias": "props"; "required": false; }; }, {}, never, never, true, never>;
+}

package/lib/components/molecules/docs-api-table/types.d.ts

@@ -0,0 +1,62 @@
+/**
+ * Configuration for the docs-api-table component.
+ */
+export interface DocsApiTableMetadata {
+    /**
+     * Table title (e.g., "Properties", "Events", "Methods").
+     */
+    title?: string;
+    /**
+     * API items to display.
+     */
+    items: DocsApiItem[];
+    /**
+     * Columns to show (subset of available columns).
+     * @default ['name', 'type', 'default', 'description']
+     */
+    columns?: DocsApiColumn[];
+    /**
+     * Custom CSS class.
+     */
+    cssClass?: string;
+    /**
+     * Show border around the table.
+     * @default true
+     */
+    bordered?: boolean;
+}
+export type DocsApiColumn = 'name' | 'type' | 'default' | 'description' | 'required';
+export interface DocsApiItem {
+    /**
+     * Property/event/method name.
+     */
+    name: string;
+    /**
+     * TypeScript type (e.g., "string", "boolean", "EventEmitter<T>").
+     */
+    type?: string;
+    /**
+     * Default value.
+     */
+    default?: string;
+    /**
+     * Description of the property/event/method.
+     */
+    description?: string;
+    /**
+     * Whether it's required.
+     */
+    required?: boolean;
+    /**
+     * Whether it's deprecated.
+     */
+    deprecated?: boolean;
+    /**
+     * Deprecation message or alternative.
+     */
+    deprecationNote?: string;
+}
+/**
+ * Column labels configuration.
+ */
+export declare const API_TABLE_COLUMN_LABELS: Record<DocsApiColumn, string>;

package/lib/components/molecules/docs-breadcrumb/docs-breadcrumb.component.d.ts

@@ -0,0 +1,31 @@
+import { EventEmitter } from '@angular/core';
+import { Router } from '@angular/router';
+import { DocsBreadcrumbMetadata } from './types';
+import * as i0 from "@angular/core";
+/**
+ * val-docs-breadcrumb
+ *
+ * A breadcrumb navigation component for documentation.
+ *
+ * @example
+ * ```html
+ * <val-docs-breadcrumb
+ *   [props]="{
+ *     showHome: true,
+ *     items: [
+ *       { label: 'Components', route: ['/docs', 'components'] },
+ *       { label: 'Button' }
+ *     ]
+ *   }"
+ * ></val-docs-breadcrumb>
+ * ```
+ */
+export declare class DocsBreadcrumbComponent {
+    private router;
+    props: DocsBreadcrumbMetadata;
+    navigate: EventEmitter<string[]>;
+    constructor(router: Router);
+    onNavigate(route: string[]): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DocsBreadcrumbComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DocsBreadcrumbComponent, "val-docs-breadcrumb", never, { "props": { "alias": "props"; "required": false; }; }, { "navigate": "navigate"; }, never, never, true, never>;
+}

package/lib/components/molecules/docs-breadcrumb/types.d.ts

@@ -0,0 +1,20 @@
+export interface DocsBreadcrumbMetadata {
+    /** Breadcrumb items */
+    items: DocsBreadcrumbItem[];
+    /** Separator character @default '>' */
+    separator?: string;
+    /** Show home link at start */
+    showHome?: boolean;
+    /** Home label text @default 'Home' */
+    homeLabel?: string;
+    /** Home route */
+    homeRoute?: string[];
+    /** Custom CSS class */
+    cssClass?: string;
+}
+export interface DocsBreadcrumbItem {
+    /** Display label */
+    label: string;
+    /** Route array for navigation (omit for current page) */
+    route?: string[];
+}

package/lib/components/molecules/docs-callout/docs-callout.component.d.ts

@@ -0,0 +1,17 @@
+import * as i0 from "@angular/core";
+export type DocsCalloutVariant = 'note' | 'warning' | 'tip' | 'danger' | 'info';
+export interface DocsCalloutMetadata {
+    /** Variant determines the color scheme */
+    variant?: DocsCalloutVariant;
+    /** Optional title (defaults to variant name if not provided) */
+    title?: string;
+    /** Hide the title completely */
+    hideTitle?: boolean;
+}
+export declare class DocsCalloutComponent {
+    props: import("@angular/core").InputSignal<DocsCalloutMetadata>;
+    variant: () => DocsCalloutVariant;
+    displayTitle: () => string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DocsCalloutComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DocsCalloutComponent, "val-docs-callout", never, { "props": { "alias": "props"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}

package/lib/components/molecules/docs-code-example/docs-code-example.component.d.ts

@@ -0,0 +1,45 @@
+import { TemplateRef } from '@angular/core';
+import { DocsCodeExampleMetadata, DocsCodeTab } from './types';
+import 'prismjs/components/prism-typescript';
+import 'prismjs/components/prism-javascript';
+import 'prismjs/components/prism-css';
+import 'prismjs/components/prism-scss';
+import 'prismjs/components/prism-bash';
+import 'prismjs/components/prism-json';
+import 'prismjs/components/prism-markup';
+import * as i0 from "@angular/core";
+/**
+ * val-docs-code-example
+ *
+ * A code example component with tabs, preview, and copy functionality.
+ *
+ * @example Basic usage
+ * ```html
+ * <val-docs-code-example
+ *   [props]="{
+ *     title: 'Basic Button',
+ *     tabs: [
+ *       { label: 'HTML', language: 'html', code: '<val-button>Click me</val-button>' },
+ *       { label: 'TypeScript', language: 'typescript', code: 'import { ButtonComponent } from ...' }
+ *     ]
+ *   }"
+ * >
+ *   <ng-template #preview>
+ *     <val-button [props]="{ label: 'Click me' }"></val-button>
+ *   </ng-template>
+ * </val-docs-code-example>
+ * ```
+ */
+export declare class DocsCodeExampleComponent {
+    props: DocsCodeExampleMetadata;
+    previewTpl?: TemplateRef<any>;
+    protected activeTab: import("@angular/core").WritableSignal<number>;
+    protected copied: import("@angular/core").WritableSignal<boolean>;
+    protected currentTab(): DocsCodeTab;
+    protected highlightedCode(): string;
+    copyCode(): Promise<void>;
+    private normalizeLanguage;
+    private escapeHtml;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DocsCodeExampleComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DocsCodeExampleComponent, "val-docs-code-example", never, { "props": { "alias": "props"; "required": false; }; }, {}, ["previewTpl"], never, true, never>;
+}