valtech-components 2.0.821 → 2.0.824

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

@@ -0,0 +1,72 @@
+import { FormControl } from '@angular/forms';
+import { Color } from '@ionic/core';
+import { ComponentState } from '../../types';
+/**
+ * Metadata for the file input component.
+ */
+export interface FileInputMetadata {
+    /** Form control for the file (stores File object, optional when used in val-form) */
+    control?: FormControl<File | null>;
+    /** Unique token for the input */
+    token?: string;
+    /** Display label */
+    label?: string;
+    /** Field name */
+    name?: string;
+    /** Help text */
+    hint?: string;
+    /** Field state */
+    state?: ComponentState;
+    /** Accepted file types (e.g., 'image/*', '.pdf,.doc') */
+    accept?: string;
+    /** Allow multiple files */
+    multiple?: boolean;
+    /** Maximum file size in bytes */
+    maxSize?: number;
+    /** Maximum number of files (when multiple is true) */
+    maxFiles?: number;
+    /** Button text for selecting file */
+    buttonText?: string;
+    /** Text shown when no file is selected */
+    noFileText?: string;
+    /** Component color */
+    color?: Color;
+    /** Button color */
+    buttonColor?: Color;
+    /** Custom CSS class */
+    cssClass?: string;
+    /** 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 file is selected.
+ */
+export interface FileInputChangeEvent {
+    /** Selected file */
+    file: File | null;
+    /** File name */
+    fileName: string | null;
+    /** File size in bytes */
+    fileSize: number | null;
+    /** File type/MIME */
+    fileType: string | null;
+}
+/**
+ * Event emitted when multiple files are selected.
+ */
+export interface FilesInputChangeEvent {
+    /** Selected files */
+    files: File[];
+    /** Total count */
+    count: number;
+    /** Total size in bytes */
+    totalSize: number;
+}

package/lib/components/molecules/footer-links/footer-links.component.d.ts

@@ -0,0 +1,47 @@
+import { EventEmitter } from '@angular/core';
+import { LanguageSelectorMetadata } from '../language-selector/types';
+import { FooterLinksMetadata } from './types';
+import * as i0 from "@angular/core";
+/**
+ * val-footer-links
+ *
+ * A responsive footer component with two columns of links, social media icons,
+ * logo, and optional language selector.
+ *
+ * @example
+ * <val-footer-links
+ *   [props]="{
+ *     leftLinks: { title: 'Company', links: [...] },
+ *     rightLinks: { title: 'Resources', links: [...] },
+ *     logo: 'logo.svg',
+ *     logoRoute: '/',
+ *     socialLinks: [
+ *       { icon: 'logo-facebook', url: 'https://facebook.com', name: 'Facebook' }
+ *     ]
+ *   }"
+ * ></val-footer-links>
+ *
+ * @input props - Footer configuration
+ * @output logoClick - Emits when logo is clicked
+ */
+export declare class FooterLinksComponent {
+    private nav;
+    /**
+     * Footer configuration.
+     */
+    props: FooterLinksMetadata;
+    /**
+     * Emits when the logo is clicked.
+     */
+    logoClick: EventEmitter<void>;
+    /**
+     * Default language selector configuration.
+     */
+    get languageSelectorConfig(): LanguageSelectorMetadata;
+    /**
+     * Handles logo click - navigates if route provided, otherwise emits event.
+     */
+    onLogoClick(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<FooterLinksComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<FooterLinksComponent, "val-footer-links", never, { "props": { "alias": "props"; "required": false; }; }, { "logoClick": "logoClick"; }, never, never, true, never>;
+}

package/lib/components/molecules/footer-links/types.d.ts

@@ -0,0 +1,50 @@
+import { DividerMetadata } from '../../atoms/divider/types';
+import { LanguageSelectorMetadata } from '../language-selector/types';
+import { LinkCakeMetadata } from '../links-cake/types';
+/**
+ * Social link configuration.
+ */
+export interface SocialLinkMetadata {
+    /** Ionicon name (e.g., 'logo-facebook', 'logo-twitter') */
+    icon: string;
+    /** URL to the social profile */
+    url: string;
+    /** Accessible name for the link */
+    name: string;
+}
+/**
+ * Configuration for the footer links component.
+ */
+export interface FooterLinksMetadata {
+    /** Left column links configuration */
+    leftLinks: LinkCakeMetadata;
+    /** Right column links configuration */
+    rightLinks: LinkCakeMetadata;
+    /**
+     * CSS variable name for the logo (recommended for dark mode support).
+     * When set, uses background-image with this CSS variable.
+     * The variable should be defined in your theme and change based on color scheme.
+     * @example '--main-logo'
+     */
+    logoCssVariable?: string;
+    /** Optional logo URL (alternative to logoCssVariable) */
+    logo?: string;
+    /** Logo URL for dark mode. If not set, uses logo with filter invert. */
+    logoDark?: string;
+    /** Logo alt text. Default: 'Logo' */
+    logoAlt?: string;
+    /** Logo width when using logoCssVariable @default '10rem' */
+    logoWidth?: string;
+    /** Logo height when using logoCssVariable @default '3rem' */
+    logoHeight?: string;
+    /** Route to navigate when logo is clicked */
+    logoRoute?: string;
+    /** Optional divider configuration */
+    divider?: DividerMetadata;
+    /** Social media links */
+    socialLinks?: SocialLinkMetadata[];
+    /** Language selector configuration. Set to false to hide. */
+    languageSelector?: LanguageSelectorMetadata | false;
+    /** Icon color for social links. Default: 'dark' */
+    socialIconColor?: string;
+}

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

@@ -0,0 +1,60 @@
+import { EventEmitter, OnChanges, OnInit, SimpleChanges } from '@angular/core';
+import { GlowCardClickEvent, GlowCardMetadata } from './types';
+import * as i0 from "@angular/core";
+/**
+ * val-glow-card
+ *
+ * A card component featuring an image with zoom-on-hover, animated CTA link,
+ * and dynamic glow effect that adapts to light/dark mode.
+ * Supports presets for reusable configurations.
+ *
+ * @example With preset:
+ * <val-glow-card preset="feature" [props]="{ title: 'Title', cta: {...} }"></val-glow-card>
+ *
+ * @example Static:
+ * <val-glow-card
+ *   [props]="{
+ *     imageSrc: 'https://example.com/image.jpg',
+ *     imageAlt: 'Example image',
+ *     title: 'Card Title',
+ *     description: 'Card description text',
+ *     cta: { text: 'Learn More', url: '/details', type: 'internal' }
+ *   }"
+ *   (onClick)="handleClick($event)"
+ * ></val-glow-card>
+ *
+ * @input preset: string - Name of preset to apply
+ * @input props: GlowCardMetadata - Configuration for the card
+ * @output onClick - Emits GlowCardClickEvent when card, image, or CTA is clicked
+ */
+export declare class GlowCardComponent implements OnInit, OnChanges {
+    private presets;
+    preset?: string;
+    props: Partial<GlowCardMetadata>;
+    resolvedProps: GlowCardMetadata;
+    onClick: EventEmitter<GlowCardClickEvent>;
+    private i18n;
+    private navigationService;
+    private themeService;
+    ngOnInit(): void;
+    ngOnChanges(changes: SimpleChanges): void;
+    private resolveProps;
+    private readonly ionicColors;
+    private readonly colorRgbMap;
+    constructor();
+    get isDark(): boolean;
+    getTitle(): string;
+    getDescription(): string;
+    getCtaText(): string;
+    getGlowColor(): string;
+    getGlowColorRgb(): string;
+    private hexToRgb;
+    getAspectRatioValue(): string;
+    getBorderColor(): string;
+    getBackgroundStyle(): string | null;
+    onCardClick(event: MouseEvent): void;
+    onImageClick(event: MouseEvent): void;
+    onCtaClick(event: MouseEvent): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<GlowCardComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<GlowCardComponent, "val-glow-card", never, { "preset": { "alias": "preset"; "required": false; }; "props": { "alias": "props"; "required": false; }; }, { "onClick": "onClick"; }, never, never, true, never>;
+}

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

@@ -0,0 +1,94 @@
+import { Color } from '@ionic/core';
+/**
+ * Aspect ratio options for the glow-card image
+ */
+export type GlowCardAspectRatio = '16:9' | '4:3' | '1:1' | '3:2' | '21:9';
+/**
+ * CTA (Call-to-Action) configuration for glow-card
+ */
+export interface GlowCardCTA {
+    /** CTA text (static) */
+    text?: string;
+    /** Content key for i18n support */
+    contentKey?: string;
+    /** Component class name for content lookup */
+    contentClass?: string;
+    /** Fallback text if contentKey not found */
+    contentFallback?: string;
+    /** URL to navigate to */
+    url: string;
+    /** Navigation type */
+    type: 'internal' | 'tab' | 'browse';
+    /** Icon name (defaults to 'arrow-forward-outline') */
+    icon?: string;
+}
+/**
+ * Glow effect configuration
+ */
+export interface GlowConfig {
+    /** Whether glow is enabled (default: true) */
+    enabled?: boolean;
+    /** Custom glow color - uses CSS color or Ionic color name */
+    color?: Color | string;
+    /** Glow intensity (default: 'medium') */
+    intensity?: 'subtle' | 'medium' | 'intense';
+}
+/**
+ * Event emitted when glow-card is clicked
+ */
+export interface GlowCardClickEvent {
+    /** Click target */
+    target: 'card' | 'cta' | 'image';
+    /** Optional token for identification */
+    token?: string;
+    /** CTA URL if CTA was clicked */
+    url?: string;
+}
+/**
+ * Props for val-glow-card component.
+ *
+ * A card component with image, title, description, and animated CTA.
+ * Features hover states with image zoom, expanding CTA link, and glow effect.
+ */
+export interface GlowCardMetadata {
+    /** Unique token for event identification */
+    token?: string;
+    /** Image source URL (optional for no-image variant) */
+    imageSrc?: string;
+    /** Image alt text (required if imageSrc is provided) */
+    imageAlt?: string;
+    /** Label text displayed above the title (pill style) */
+    label?: string;
+    /** Image aspect ratio (default: '16:9') */
+    aspectRatio?: GlowCardAspectRatio;
+    /** Static title text */
+    title?: string;
+    /** Title content key for i18n */
+    titleKey?: string;
+    /** Title content class for i18n lookup */
+    titleClass?: string;
+    /** Title fallback text */
+    titleFallback?: string;
+    /** Static description text */
+    description?: string;
+    /** Description content key for i18n */
+    descriptionKey?: string;
+    /** Description content class for i18n lookup */
+    descriptionClass?: string;
+    /** Description fallback text */
+    descriptionFallback?: string;
+    /** CTA configuration */
+    cta: GlowCardCTA;
+    /** Glow effect configuration */
+    glow?: GlowConfig;
+    /** Card background color (optional) */
+    backgroundColor?: Color | string;
+    /** Show border around the card (default: false) */
+    bordered?: boolean;
+    /** Border color - uses CSS color or Ionic color name (default: 'medium') */
+    borderColor?: Color | string;
+}
+/**
+ * Factory function to create GlowCardMetadata with defaults
+ */
+export declare function createGlowCardProps(overrides: Partial<GlowCardMetadata> & Pick<GlowCardMetadata, 'cta'>): GlowCardMetadata;

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

@@ -0,0 +1,19 @@
+import { OnInit } from '@angular/core';
+import { InputMetadata } from '../../types';
+import * as i0 from "@angular/core";
+export declare class HintComponent implements OnInit {
+    /**
+     * Input configuration object.
+     * @type {InputMetadata}
+     * @property control - The Angular FormControl for the input.
+     * @property errors - The error messages mapping.
+     */
+    props: InputMetadata;
+    private i18n;
+    constructor();
+    ngOnInit(): void;
+    get shouldShowErrors(): boolean;
+    get Errors(): string[];
+    static ɵfac: i0.ɵɵFactoryDeclaration<HintComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<HintComponent, "val-hint", never, { "props": { "alias": "props"; "required": false; }; }, {}, never, never, true, never>;
+}

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

@@ -0,0 +1,15 @@
+import { OnInit } from '@angular/core';
+import { InputMetadata } from '../../types';
+import * as i0 from "@angular/core";
+export declare class HourInputComponent implements OnInit {
+    /**
+     * Input configuration object.
+     * @type {InputMetadata}
+     * @property control - The Angular FormControl for the time input.
+     */
+    props: InputMetadata;
+    constructor();
+    ngOnInit(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<HourInputComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<HourInputComponent, "val-hour-input", never, { "props": { "alias": "props"; "required": false; }; }, {}, never, never, true, never>;
+}

package/lib/components/molecules/image-crop/image-crop.component.d.ts

@@ -0,0 +1,59 @@
+import { EventEmitter } from '@angular/core';
+import { ImageCroppedEvent } from 'ngx-image-cropper';
+import * as i0 from "@angular/core";
+/**
+ * ImageCropComponent
+ *
+ * A modal-ready component for cropping images with a specified aspect ratio.
+ * Uses ngx-image-cropper internally and provides a simple interface.
+ *
+ * @example Inside an ion-modal
+ * ```html
+ * <ion-modal [isOpen]="showCropModal">
+ *   <ng-template>
+ *     <val-image-crop
+ *       [image]="selectedFile"
+ *       [aspectRatio]="1"
+ *       [roundCropper]="true"
+ *       (cropComplete)="onCropComplete($event)"
+ *       (cancel)="showCropModal = false"
+ *     />
+ *   </ng-template>
+ * </ion-modal>
+ * ```
+ */
+export declare class ImageCropComponent {
+    private i18n;
+    /** Image file to crop */
+    readonly image: import("@angular/core").InputSignal<File>;
+    /** Aspect ratio (1 for square, 16/9 for widescreen, etc.) */
+    readonly aspectRatio: import("@angular/core").InputSignal<number>;
+    /** Use round cropper (for avatars) */
+    readonly roundCropper: import("@angular/core").InputSignal<boolean>;
+    /** Resize output to specific width (0 = no resize) */
+    readonly resizeToWidth: import("@angular/core").InputSignal<number>;
+    /** i18n namespace for labels */
+    readonly i18nNamespace: import("@angular/core").InputSignal<string>;
+    /** Emitted when crop is confirmed with the cropped blob */
+    cropComplete: EventEmitter<Blob>;
+    /** Emitted when user cancels the crop */
+    cancel: EventEmitter<void>;
+    /** Emitted when image fails to load */
+    loadFailed: EventEmitter<void>;
+    /** Internal signal for cropped blob */
+    protected croppedBlob: import("@angular/core").WritableSignal<Blob>;
+    /** Computed text for cancel button */
+    protected cancelText: import("@angular/core").Signal<string>;
+    /** Computed text for confirm button */
+    protected confirmText: import("@angular/core").Signal<string>;
+    /** Computed text for title */
+    protected titleText: import("@angular/core").Signal<string>;
+    /** Handle crop event from ngx-image-cropper */
+    onImageCropped(event: ImageCroppedEvent): void;
+    /** Confirm and emit the cropped blob */
+    confirmCrop(): void;
+    /** Handle load failure */
+    onLoadFailed(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ImageCropComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ImageCropComponent, "val-image-crop", never, { "image": { "alias": "image"; "required": true; "isSignal": true; }; "aspectRatio": { "alias": "aspectRatio"; "required": false; "isSignal": true; }; "roundCropper": { "alias": "roundCropper"; "required": false; "isSignal": true; }; "resizeToWidth": { "alias": "resizeToWidth"; "required": false; "isSignal": true; }; "i18nNamespace": { "alias": "i18nNamespace"; "required": false; "isSignal": true; }; }, { "cropComplete": "cropComplete"; "cancel": "cancel"; "loadFailed": "loadFailed"; }, never, never, true, never>;
+}

package/lib/components/molecules/image-crop/index.d.ts

@@ -0,0 +1 @@
+export * from './image-crop.component';

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

@@ -0,0 +1,9 @@
+import { IconService } from '../../../services/icons.service';
+import { InfoMetadata } from './types';
+import * as i0 from "@angular/core";
+export declare class InfoComponent {
+    icon: IconService;
+    props: InfoMetadata;
+    static ɵfac: i0.ɵɵFactoryDeclaration<InfoComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<InfoComponent, "val-info", never, { "props": { "alias": "props"; "required": false; }; }, {}, never, never, true, never>;
+}

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

@@ -0,0 +1,10 @@
+import { ImageMetadata } from '../../atoms/image/types';
+import { ButtonGroupMetadata } from '../button-group/types';
+import { LinkMetadata } from '../link/types';
+import { TitleBlockMetada } from '../title-block/types';
+export type InfoMetadata = {
+    title: TitleBlockMetada;
+    link?: LinkMetadata;
+    image?: ImageMetadata;
+    actions?: ButtonGroupMetadata;
+};

package/lib/components/molecules/language-selector/language-selector.component.d.ts

@@ -0,0 +1,40 @@
+import { EventEmitter, OnInit } from '@angular/core';
+import { PopoverSelectorMetadata } from '../popover-selector/types';
+import { LanguageSelectorMetadata } from './types';
+import * as i0 from "@angular/core";
+export declare class LanguageSelectorComponent implements OnInit {
+    /**
+     * Language selector configuration object.
+     */
+    props: LanguageSelectorMetadata;
+    /**
+     * Event emitted when the language selection changes.
+     * Emits the selected language code.
+     */
+    languageChange: EventEmitter<string>;
+    /** Popover selector configuration (for default mode) */
+    popoverProps: PopoverSelectorMetadata;
+    /** Unique ID for the icon mode popover trigger */
+    popoverId: string;
+    /** Available languages (exposed for icon mode template) */
+    availableLanguages: string[];
+    /** Current language (exposed for icon mode template) */
+    currentLanguage: string;
+    private i18n;
+    /** Default language display names */
+    readonly defaultLanguageNames: Record<string, string>;
+    /** Default flag icons for languages */
+    readonly defaultLanguageFlags: Record<string, string>;
+    constructor();
+    ngOnInit(): void;
+    private initializePopoverProps;
+    /** Get display name for a language code (public for template access) */
+    getLanguageDisplayName(languageCode: string): string;
+    /**
+     * Handle language selection change.
+     * @param selectedLanguage - The selected language code(s)
+     */
+    onLanguageChange(selectedLanguage: string | string[]): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<LanguageSelectorComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<LanguageSelectorComponent, "val-language-selector", never, { "props": { "alias": "props"; "required": false; }; }, { "languageChange": "languageChange"; }, never, never, true, never>;
+}

package/lib/components/molecules/language-selector/types.d.ts

@@ -0,0 +1,82 @@
+import { Color } from '@ionic/core';
+/**
+ * Display mode for the language selector.
+ * - 'default': Shows button with label and/or current language
+ * - 'icon': Compact mode showing only a globe icon (ideal for headers)
+ */
+export type LanguageSelectorMode = 'default' | 'icon';
+/**
+ * Props for val-language-selector component.
+ * A specialized component for language selection.
+ *
+ * @property mode - Display mode: 'default' or 'icon' (compact for headers).
+ * @property icon - Custom icon name for icon mode (default: 'globe-outline').
+ * @property currentLanguage - Currently selected language code.
+ * @property availableLanguages - Array of available language codes.
+ * @property showLabel - Whether to show the label.
+ * @property label - Custom label text (static).
+ * @property labelConfig - Reactive content configuration for label.
+ * @property showFlags - Whether to show flag icons for languages.
+ * @property color - Button color (Ionic color string).
+ * @property size - Button size ('small' | 'default' | 'large').
+ * @property fill - Button fill style ('clear' | 'outline' | 'solid' | 'default').
+ * @property shape - Button shape ('round' | undefined).
+ * @property expand - Button expansion ('full' | 'block' | undefined).
+ * @property disabled - Whether the selector is disabled.
+ * @property customLanguageNames - Custom display names for languages.
+ */
+export interface LanguageSelectorMetadata {
+    /**
+     * Display mode for the selector.
+     * - 'default': Full button with label/dropdown
+     * - 'icon': Compact globe icon only (ideal for headers/toolbars)
+     * @default 'default'
+     */
+    mode?: LanguageSelectorMode;
+    /**
+     * Icon name for icon mode.
+     * @default 'globe-outline'
+     */
+    icon?: string;
+    /** Currently selected language code */
+    currentLanguage?: string;
+    /** Array of available language codes */
+    availableLanguages?: string[];
+    /**
+     * Whether to show the "Language" label above the selector.
+     * @default false
+     */
+    showLabel?: boolean;
+    /** Static label text (takes precedence over labelConfig) */
+    label?: string;
+    /** Reactive content configuration for label */
+    labelConfig?: {
+        className?: string;
+        key: string;
+        fallback?: string;
+        interpolation?: Record<string, any>;
+    };
+    /** Whether to show flag icons for languages */
+    showFlags?: boolean;
+    /** Button color */
+    color?: Color;
+    /** Button size */
+    size?: 'small' | 'default' | 'large';
+    /** Button fill style */
+    fill?: 'clear' | 'outline' | 'solid' | 'default';
+    /** Button shape */
+    shape?: 'round';
+    /** Button expansion */
+    expand?: 'full' | 'block';
+    /** Whether the selector is disabled */
+    disabled?: boolean;
+    /** Custom display names for languages */
+    customLanguageNames?: Record<string, string>;
+    /**
+     * Force page reload on language change.
+     * By default (false), language changes are reactive without reload.
+     * Set to true for legacy behavior or if reactive updates don't work.
+     * @default false
+     */
+    forceReload?: boolean;
+}

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

@@ -0,0 +1,10 @@
+import { ThemeService } from '../../../services/theme.service';
+import { LayeredCardMetadata } from './types';
+import * as i0 from "@angular/core";
+export declare class LayeredCardComponent {
+    theme: ThemeService;
+    props: LayeredCardMetadata;
+    color(background: any): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<LayeredCardComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<LayeredCardComponent, "layered-card", never, { "props": { "alias": "props"; "required": false; }; }, {}, never, never, true, never>;
+}

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

@@ -0,0 +1,15 @@
+import { ButtonGroupMetadata } from '../button-group/types';
+import { TitleBlockMetada } from '../title-block/types';
+export interface LayeredCardMetadata {
+    token?: string;
+    image?: string;
+    actions?: ButtonGroupMetadata;
+    content: TitleBlockMetada;
+    bigSpace?: boolean;
+    background?: string;
+    hoverable?: boolean;
+    withMin?: boolean;
+    dark?: boolean;
+    withOpacity?: boolean;
+    mode: 'layered' | 'poster';
+}

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

@@ -0,0 +1,24 @@
+import { EventEmitter, OnInit } from '@angular/core';
+import { NavigationService } from '../../../services/navigation';
+import { LinkMetadata } from './types';
+import * as i0 from "@angular/core";
+export declare class LinkComponent implements OnInit {
+    /**
+     * Link configuration object.
+     * @type {LinkMetadata}
+     * @property text - The link text.
+     * @property color - The button color (Ionic color string).
+     * @property link - The URL or route to navigate to.
+     * @property type - The navigation type ('internal', 'browse', 'tab').
+     * @property token - Optional token for event identification.
+     * @property size - The button size (optional).
+     */
+    props: LinkMetadata;
+    onClick: EventEmitter<string>;
+    service: NavigationService;
+    constructor();
+    ngOnInit(): void;
+    onClickHandler(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<LinkComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<LinkComponent, "val-link", never, { "props": { "alias": "props"; "required": false; }; }, { "onClick": "onClick"; }, never, never, true, never>;
+}

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

@@ -0,0 +1,19 @@
+import { Color } from '@ionic/core';
+/**
+ * Link configuration object.
+ * @type {LinkMetadata}
+ * @property text - The link text.
+ * @property color - The button color (Ionic color string).
+ * @property link - The URL or route to navigate to.
+ * @property type - The navigation type ('internal', 'browse', 'tab').
+ * @property token - Optional token for event identification.
+ * @property size - The button size (optional).
+ */
+export interface LinkMetadata {
+    token?: string;
+    text: string;
+    size: 'small' | 'default' | 'large';
+    color: Color;
+    type: 'internal' | 'tab' | 'browse';
+    link: string;
+}