valtech-components 2.0.821 → 2.0.824

package/lib/components/molecules/select-search/select-search.component.d.ts

@@ -0,0 +1,78 @@
+import { OnChanges, OnDestroy, SimpleChanges } from '@angular/core';
+import { IonModal } from '@ionic/angular';
+import { IconService } from '../../../services/icons.service';
+import { InputMetadata, InputOption } from '../../types';
+import * as i0 from "@angular/core";
+export declare class SelectSearchComponent implements OnChanges, OnDestroy {
+    modal: IonModal;
+    label: string;
+    labelProperty: string;
+    valueProperty: string;
+    multiple: boolean;
+    placeholder: string;
+    /**
+     * Input configuration object.
+     * @type {InputMetadata}
+     * @property control - The Angular FormControl for the select input.
+     * @property label - The label for the select.
+     * @property options - The available options for the select.
+     * @property placeholder - The placeholder text.
+     */
+    props: InputMetadata & {
+        mode?: 'legacy' | 'strict';
+    };
+    icon: IconService;
+    private changeDetector;
+    private i18n;
+    /** Get resolved label with i18n fallback */
+    getLabel(): string;
+    /** Get resolved placeholder with i18n fallback */
+    getPlaceholder(): string;
+    /** Get close button text */
+    getCloseText(): string;
+    /** Get no results text */
+    getNoResultsText(): string;
+    /** Get items selected text */
+    getItemsSelectedText(count: number): string;
+    searchTerm: string;
+    filteredItems: InputOption[];
+    selectedItems: InputOption[];
+    displayValue: string;
+    private previousOptions;
+    private isProcessingChanges;
+    private valueChangesSubscription?;
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    ngOnChanges(changes: SimpleChanges): void;
+    ionViewWillEnter(): void;
+    private subscribeToValueChanges;
+    private areOptionsEqual;
+    private initializeItems;
+    private syncControlValueWithSelectedItems;
+    private applyDefaultValue;
+    onFilter(event: any): void;
+    onFocus(): void;
+    onBlur(): void;
+    openModal(): void;
+    preventDefaultBehavior(event: MouseEvent): void;
+    /**
+     * Reset state only - called by didDismiss event
+     * Separated from closeModal to avoid double dismissal and scroll issues
+     */
+    resetState(): void;
+    /**
+     * Close modal only - does not reset state (didDismiss will handle that)
+     */
+    closeModal(): void;
+    /**
+     * @deprecated Use closeModal() instead. Kept for backwards compatibility.
+     */
+    cancelModal(): void;
+    selectItem(item: any): void;
+    isItemSelected(item: any): boolean;
+    updateDisplayValue(): void;
+    applyChanges(): void;
+    reset(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SelectSearchComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SelectSearchComponent, "val-select-search", never, { "label": { "alias": "label"; "required": false; }; "labelProperty": { "alias": "labelProperty"; "required": false; }; "valueProperty": { "alias": "valueProperty"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "props": { "alias": "props"; "required": false; }; }, {}, never, never, true, never>;
+}

package/lib/components/molecules/share-buttons/share-buttons.component.d.ts

@@ -0,0 +1,22 @@
+import { EventEmitter } from '@angular/core';
+import { ShareButtonsMetadata, ShareEvent, SharePlatform, ShareButtonConfig } from './types';
+import * as i0 from "@angular/core";
+export declare class ShareButtonsComponent {
+    props: ShareButtonsMetadata;
+    shareComplete: EventEmitter<ShareEvent>;
+    private toastController;
+    private i18n;
+    getButtons(): ShareButtonConfig[];
+    getButtonFill(): 'solid' | 'outline' | 'clear';
+    getButtonIcon(button: ShareButtonConfig): string;
+    getButtonLabel(button: ShareButtonConfig): string;
+    getButtonColor(button: ShareButtonConfig): string;
+    share(platform: SharePlatform): Promise<void>;
+    private openShareUrl;
+    private nativeShare;
+    private copyToClipboard;
+    private getCopySuccessMessage;
+    private isNativeShareSupported;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ShareButtonsComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ShareButtonsComponent, "val-share-buttons", never, { "props": { "alias": "props"; "required": false; }; }, { "shareComplete": "shareComplete"; }, never, never, true, never>;
+}

package/lib/components/molecules/share-buttons/types.d.ts

@@ -0,0 +1,108 @@
+import { Color } from '@ionic/core';
+/**
+ * Social platform identifiers for sharing.
+ */
+export type SharePlatform = 'whatsapp' | 'facebook' | 'twitter' | 'telegram' | 'linkedin' | 'email' | 'copy' | 'native';
+/**
+ * Configuration for a share button.
+ */
+export interface ShareButtonConfig {
+    /** Platform identifier */
+    platform: SharePlatform;
+    /** Custom label (overrides default) */
+    label?: string;
+    /** Custom icon (overrides default) */
+    icon?: string;
+    /** Custom color (overrides default) */
+    color?: Color | string;
+    /** Whether this button is disabled */
+    disabled?: boolean;
+    /** Additional custom data for the platform */
+    customData?: Record<string, string>;
+}
+/**
+ * Data to be shared.
+ */
+export interface ShareData {
+    /** Title of the content */
+    title?: string;
+    /** Description or message */
+    text?: string;
+    /** URL to share */
+    url?: string;
+    /** Hashtags (for Twitter) */
+    hashtags?: string[];
+    /** Email subject (for email sharing) */
+    emailSubject?: string;
+    /** Email body (for email sharing) */
+    emailBody?: string;
+    /** Phone number for WhatsApp (optional, for direct messaging) */
+    whatsappPhone?: string;
+}
+/**
+ * Metadata for the share buttons component.
+ */
+export interface ShareButtonsMetadata {
+    /** Data to share */
+    shareData: ShareData;
+    /** Platforms to show (defaults to all) */
+    platforms?: SharePlatform[];
+    /** Custom button configurations */
+    buttons?: ShareButtonConfig[];
+    /** Layout direction */
+    layout?: 'horizontal' | 'vertical';
+    /** Size variant */
+    size?: 'small' | 'medium' | 'large';
+    /** Button style */
+    variant?: 'solid' | 'outline' | 'icon-only';
+    /** Show labels */
+    showLabels?: boolean;
+    /** Gap between buttons */
+    gap?: number;
+    /** Custom CSS class */
+    cssClass?: string;
+    /** Use platform colors */
+    usePlatformColors?: boolean;
+    /** Default color (when not using platform colors) */
+    color?: Color;
+    /** Show copy success toast */
+    showCopyToast?: boolean;
+    /** Copy success message */
+    copySuccessMessage?: string;
+    /** Use native share when available */
+    preferNativeShare?: boolean;
+    /** Content class for reactive content */
+    contentClass?: string;
+    /** Content key for copy success message */
+    copySuccessMessageContentKey?: string;
+}
+/**
+ * Event emitted when a share action is performed.
+ */
+export interface ShareEvent {
+    /** Platform that was used */
+    platform: SharePlatform;
+    /** Whether the share was successful */
+    success: boolean;
+    /** Error message if failed */
+    error?: string;
+    /** The share data that was used */
+    shareData: ShareData;
+}
+/**
+ * Default platform configurations.
+ */
+export interface PlatformConfig {
+    name: string;
+    icon: string;
+    color: string;
+    getUrl: (data: ShareData) => string;
+}
+/**
+ * Default platform configurations.
+ */
+export declare const PLATFORM_CONFIGS: Record<SharePlatform, PlatformConfig>;
+/**
+ * Default platforms to show.
+ */
+export declare const DEFAULT_PLATFORMS: SharePlatform[];

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

@@ -0,0 +1,20 @@
+import { OnChanges, OnInit, EventEmitter, SimpleChanges } from '@angular/core';
+import { StatsCardMetadata } from './types';
+import * as i0 from "@angular/core";
+export declare class StatsCardComponent implements OnInit, OnChanges {
+    private presets;
+    preset?: string;
+    props: Partial<StatsCardMetadata>;
+    resolvedProps: StatsCardMetadata;
+    onClick: EventEmitter<void>;
+    Math: Math;
+    ngOnInit(): void;
+    ngOnChanges(changes: SimpleChanges): void;
+    private resolveProps;
+    getCardColor(): string;
+    getBackgroundClass(): string;
+    getTrendClass(): string;
+    getTrendIcon(): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<StatsCardComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<StatsCardComponent, "val-stats-card", never, { "preset": { "alias": "preset"; "required": false; }; "props": { "alias": "props"; "required": false; }; }, { "onClick": "onClick"; }, never, never, true, never>;
+}

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

@@ -0,0 +1,60 @@
+import { Color } from '@ionic/core';
+/**
+ * Logo configuration for stats card.
+ */
+export interface StatsCardLogo {
+    /** Logo image URL */
+    src: string;
+    /** Alt text for accessibility */
+    alt: string;
+    /** Max height in pixels (default: 32) */
+    maxHeight?: number;
+    /** Max width in pixels (default: 120) */
+    maxWidth?: number;
+}
+/**
+ * Trend configuration for stats card.
+ */
+export interface StatsTrend {
+    /** Trend value (percentage or absolute) */
+    value: number;
+    /** Trend direction */
+    direction: 'up' | 'down' | 'neutral';
+    /** Trend label (e.g., "vs last month") */
+    label?: string;
+    /** Invert colors (up=bad, down=good) */
+    invertColors?: boolean;
+}
+/**
+ * Metadata for the stats card component.
+ */
+export interface StatsCardMetadata {
+    /** Stat title/label */
+    title: string;
+    /** Main stat value */
+    value: string | number;
+    /** Value prefix (e.g., "$", "€") */
+    prefix?: string;
+    /** Value suffix (e.g., "%", "users") */
+    suffix?: string;
+    /** Icon name */
+    icon?: string;
+    /** Card color */
+    color?: Color;
+    /** Background style */
+    background?: 'solid' | 'gradient' | 'light';
+    /** Trend indicator */
+    trend?: StatsTrend;
+    /** Footer text */
+    footer?: string;
+    /** Description text (for GitLab-style layout) */
+    description?: string;
+    /** Company/brand logo displayed at bottom */
+    logo?: StatsCardLogo;
+    /** Minimum height in pixels (for uniform card sizes) */
+    minHeight?: number;
+    /** Loading state */
+    loading?: boolean;
+    /** Unique token identifier */
+    token?: string;
+}

package/lib/components/molecules/stepper/stepper.component.d.ts

@@ -0,0 +1,31 @@
+import { OnChanges, OnInit, EventEmitter, SimpleChanges } from '@angular/core';
+import { StepperMetadata, StepMetadata, StepChangeEvent, StepStatus } from './types';
+import * as i0 from "@angular/core";
+export declare class StepperComponent implements OnInit, OnChanges {
+    private presets;
+    /**
+     * Preset name to apply. Presets define reusable stepper configurations
+     * that can be registered at app level via provideValtechPresets().
+     */
+    preset?: string;
+    /**
+     * Stepper configuration object. Values here override preset values.
+     */
+    props: Partial<StepperMetadata>;
+    /**
+     * Resolved props after merging preset + explicit props.
+     */
+    resolvedProps: StepperMetadata;
+    stepChange: EventEmitter<StepChangeEvent>;
+    ngOnInit(): void;
+    ngOnChanges(changes: SimpleChanges): void;
+    private resolveProps;
+    getCurrentIndex(): number;
+    getStepStatus(step: StepMetadata, index: number): StepStatus;
+    getStepColor(step: StepMetadata, index: number): string;
+    isStepClickable(step: StepMetadata, index: number): boolean;
+    onStepClick(step: StepMetadata, index: number): void;
+    getStepLabel(step: StepMetadata): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<StepperComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<StepperComponent, "val-stepper", never, { "preset": { "alias": "preset"; "required": false; }; "props": { "alias": "props"; "required": false; }; }, { "stepChange": "stepChange"; }, never, never, true, never>;
+}

package/lib/components/molecules/stepper/types.d.ts

@@ -0,0 +1,66 @@
+import { Color } from '@ionic/core';
+/**
+ * Step status.
+ */
+export type StepStatus = 'pending' | 'current' | 'completed' | 'error';
+/**
+ * Single step configuration.
+ */
+export interface StepMetadata {
+    /** Unique step identifier */
+    value: string;
+    /** Step label */
+    label?: string;
+    /** Step description/subtitle */
+    description?: string;
+    /** Step icon (overrides number) */
+    icon?: string;
+    /** Step status */
+    status?: StepStatus;
+    /** Whether step is optional */
+    optional?: boolean;
+    /** Whether step is editable (can go back) */
+    editable?: boolean;
+    /** Whether step is disabled */
+    disabled?: boolean;
+    /** Reactive content key for label */
+    contentKey?: string;
+    /** Component class name for content lookup */
+    contentClass?: string;
+    /** Fallback for label */
+    contentFallback?: string;
+}
+/**
+ * Metadata for the stepper component.
+ */
+export interface StepperMetadata {
+    /** Step items */
+    steps: StepMetadata[];
+    /** Current step value */
+    currentStep?: string;
+    /** Current step index (alternative to currentStep) */
+    currentIndex?: number;
+    /** Stepper orientation */
+    orientation?: 'horizontal' | 'vertical';
+    /** Linear mode (must complete in order) */
+    linear?: boolean;
+    /** Stepper color */
+    color?: Color;
+    /** Show step numbers */
+    showNumbers?: boolean;
+    /** Connector line style */
+    connectorStyle?: 'solid' | 'dashed' | 'none';
+    /** Unique token identifier */
+    token?: string;
+}
+/**
+ * Event emitted when step changes.
+ */
+export interface StepChangeEvent {
+    /** New step */
+    step: StepMetadata;
+    /** New step index */
+    index: number;
+    /** Previous step index */
+    previousIndex: number;
+}

package/lib/components/molecules/swipe-carousel/swipe-carousel.component.d.ts

@@ -0,0 +1,66 @@
+import { AfterViewInit, ElementRef, OnChanges, OnDestroy, SimpleChanges, TemplateRef } from '@angular/core';
+import Swiper from 'swiper';
+import { SwipeCarouselMetadata } from './types';
+import * as i0 from "@angular/core";
+/**
+ * val-swipe-carousel
+ *
+ * A powerful carousel component built on Swiper with multiple transition effects,
+ * navigation, pagination, and responsive breakpoints.
+ *
+ * @example
+ * <val-swipe-carousel
+ *   [items]="slides"
+ *   [itemTemplate]="slideTemplate"
+ *   [props]="{ effect: 'coverflow', pagination: true }"
+ * ></val-swipe-carousel>
+ *
+ * <ng-template #slideTemplate let-item>
+ *   <div class="slide-content">{{ item.title }}</div>
+ * </ng-template>
+ *
+ * @input items - Array of items to render as slides
+ * @input itemTemplate - Template reference for rendering each slide
+ * @input props - Configuration options (effect, pagination, navigation, etc.)
+ */
+export declare class SwipeCarouselComponent<T = any> implements AfterViewInit, OnChanges, OnDestroy {
+    /**
+     * Array of items to render as slides.
+     */
+    items: T[];
+    /**
+     * Template reference for rendering each slide.
+     * The template receives the item as implicit context and index as 'index'.
+     */
+    itemTemplate: TemplateRef<any>;
+    /**
+     * Configuration options for the carousel.
+     */
+    props?: SwipeCarouselMetadata;
+    swiperContainer: ElementRef;
+    private swiper?;
+    private defaultOptions;
+    ngOnChanges(changes: SimpleChanges): void;
+    ngAfterViewInit(): void;
+    ngOnDestroy(): void;
+    private initSwiper;
+    private destroySwiper;
+    /**
+     * Navigate to previous slide.
+     */
+    slidePrev(): void;
+    /**
+     * Navigate to next slide.
+     */
+    slideNext(): void;
+    /**
+     * Navigate to specific slide by index.
+     */
+    slideTo(index: number): void;
+    /**
+     * Get the Swiper instance for advanced control.
+     */
+    getSwiperInstance(): Swiper | undefined;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SwipeCarouselComponent<any>, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SwipeCarouselComponent<any>, "val-swipe-carousel", never, { "items": { "alias": "items"; "required": false; }; "itemTemplate": { "alias": "itemTemplate"; "required": false; }; "props": { "alias": "props"; "required": false; }; }, {}, never, never, true, never>;
+}

package/lib/components/molecules/swipe-carousel/types.d.ts

@@ -0,0 +1,35 @@
+/**
+ * Configuration options for the Swiper carousel.
+ */
+export interface SwipeCarouselMetadata {
+    /** Number of slides per view. Default: 1 */
+    slidesPerView?: number | 'auto';
+    /** Space between slides in pixels. Default: 10 */
+    spaceBetween?: number;
+    /** Enable infinite loop. Default: true */
+    loop?: boolean;
+    /** Center active slide. Default: true */
+    centeredSlides?: boolean;
+    /** Transition effect. Default: 'slide' */
+    effect?: 'slide' | 'fade' | 'cube' | 'coverflow' | 'flip';
+    /** Autoplay configuration. Default: false */
+    autoplay?: boolean | {
+        delay: number;
+        disableOnInteraction: boolean;
+    };
+    /** Responsive breakpoints */
+    breakpoints?: {
+        [width: number]: {
+            slidesPerView?: number | 'auto';
+            spaceBetween?: number;
+        };
+    };
+    /** Show pagination bullets. Default: true */
+    pagination?: boolean;
+    /** Show navigation arrows. Default: true */
+    navigation?: boolean;
+    /** Apply scale effect to inactive slides. Default: true */
+    scaleEffect?: boolean;
+    /** Padding for the carousel wrapper. Default: '0 32px' */
+    wrapperPadding?: string;
+}

package/lib/components/molecules/tabs/tabs.component.d.ts

@@ -0,0 +1,34 @@
+import { OnChanges, OnInit, EventEmitter, SimpleChanges } from '@angular/core';
+import { TabsMetadata, TabMetadata } from './types';
+import * as i0 from "@angular/core";
+export declare class TabsComponent implements OnInit, OnChanges {
+    private presets;
+    /**
+     * Preset name to apply. Presets define reusable tabs configurations
+     * that can be registered at app level via provideValtechPresets().
+     *
+     * @example
+     * <val-tabs preset="main-nav" [props]="{ tabs: [...] }"></val-tabs>
+     */
+    preset?: string;
+    /**
+     * Tabs configuration object. Values here override preset values.
+     */
+    props: Partial<TabsMetadata>;
+    /**
+     * Resolved props after merging preset + explicit props.
+     */
+    resolvedProps: TabsMetadata;
+    tabChange: EventEmitter<TabMetadata>;
+    ngOnInit(): void;
+    ngOnChanges(changes: SimpleChanges): void;
+    /**
+     * Merge preset configuration with explicit props.
+     * Explicit props take precedence over preset values.
+     */
+    private resolveProps;
+    onTabClick(tab: TabMetadata): void;
+    getTabLabel(tab: TabMetadata): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TabsComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TabsComponent, "val-tabs", never, { "preset": { "alias": "preset"; "required": false; }; "props": { "alias": "props"; "required": false; }; }, { "tabChange": "tabChange"; }, never, never, true, never>;
+}

package/lib/components/molecules/tabs/types.d.ts

@@ -0,0 +1,45 @@
+import { Color } from '@ionic/core';
+/**
+ * Single tab configuration.
+ */
+export interface TabMetadata {
+    /** Unique tab identifier */
+    value: string;
+    /** Tab label (static) */
+    label?: string;
+    /** Tab icon name */
+    icon?: string;
+    /** Badge text or number */
+    badge?: string | number;
+    /** Badge color */
+    badgeColor?: Color;
+    /** Whether the tab is disabled */
+    disabled?: boolean;
+    /** Reactive content key for label */
+    contentKey?: string;
+    /** Component class name for content lookup */
+    contentClass?: string;
+    /** Fallback for label */
+    contentFallback?: string;
+}
+/**
+ * Metadata for the tabs component.
+ */
+export interface TabsMetadata {
+    /** Tab items */
+    tabs: TabMetadata[];
+    /** Currently selected tab value */
+    selectedTab?: string;
+    /** Tabs color */
+    color?: Color;
+    /** Tab bar position */
+    position?: 'top' | 'bottom';
+    /** Tab layout */
+    layout?: 'icon-top' | 'icon-start' | 'icon-end' | 'icon-bottom' | 'icon-hide' | 'label-hide';
+    /** Unique token identifier */
+    token?: string;
+    /** Mode style */
+    mode?: 'ios' | 'md';
+    /** Translucent background */
+    translucent?: boolean;
+}

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

@@ -0,0 +1,41 @@
+import { TestimonialCardMetadata } from './types';
+import * as i0 from "@angular/core";
+/**
+ * val-testimonial-card
+ *
+ * A card component for testimonials with image, title, link, and action buttons.
+ * Supports dynamic background gradients and dark mode overlay.
+ *
+ * @example
+ * <val-testimonial-card
+ *   [props]="{
+ *     title: { title: 'John Doe', subtitle: 'CEO, Company' },
+ *     link: { text: 'Read full story', url: '#' },
+ *     image: { src: 'avatar.jpg', alt: 'John Doe' },
+ *     color: 'primary'
+ *   }"
+ * ></val-testimonial-card>
+ *
+ * @input props - Card configuration (title, link, image, color, background, actions)
+ */
+export declare class TestimonialCardComponent {
+    private theme;
+    /**
+     * Card configuration.
+     */
+    props: TestimonialCardMetadata;
+    /**
+     * Gets the effective color/background.
+     * Supports: Ionic color names (primary, secondary), CSS variables (--my-color),
+     * direct colors (#fff, rgb()), or url() for images.
+     */
+    private getColor;
+    /**
+     * Generates dynamic card styles with overlay based on theme.
+     */
+    cardStyle(): {
+        [key: string]: string;
+    };
+    static ɵfac: i0.ɵɵFactoryDeclaration<TestimonialCardComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TestimonialCardComponent, "val-testimonial-card", never, { "props": { "alias": "props"; "required": false; }; }, {}, never, never, true, never>;
+}

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

@@ -0,0 +1,25 @@
+import { ButtonGroupMetadata } from '../button-group/types';
+import { ImageMetadata } from '../../atoms/image/types';
+import { LinkMetadata } from '../link/types';
+import { TitleBlockMetada } from '../title-block/types';
+/**
+ * Configuration for the testimonial card component.
+ */
+export interface TestimonialCardMetadata {
+    /** Title block configuration */
+    title: TitleBlockMetada;
+    /** Optional link configuration */
+    link?: LinkMetadata;
+    /** Optional image configuration */
+    image?: ImageMetadata;
+    /** Background color (Ionic color, CSS color, or CSS variable) */
+    color?: string;
+    /** Background (url(...) for image, gradient, or color) */
+    background?: string;
+    /** Optional action buttons */
+    actions?: ButtonGroupMetadata;
+    /** Minimum height of the card. Default: '450px' */
+    minHeight?: string;
+    /** Minimum width of the card. Default: '300px' */
+    minWidth?: string;
+}