valtech-components 2.0.404 → 2.0.406

package/lib/components/molecules/chip-group/chip-group.component.d.ts

@@ -0,0 +1,22 @@
+import { OnInit, OnDestroy, EventEmitter } from '@angular/core';
+import { ChipGroupMetadata, ChipMetadata, ChipSelectionEvent, ChipRemoveEvent } from './types';
+import * as i0 from "@angular/core";
+export declare class ChipGroupComponent implements OnInit, OnDestroy {
+    props: ChipGroupMetadata;
+    selectionChange: EventEmitter<ChipSelectionEvent>;
+    chipRemove: EventEmitter<ChipRemoveEvent>;
+    chipClick: EventEmitter<ChipMetadata>;
+    private langService;
+    private subscriptions;
+    private chipLabels;
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    getChipColor(chip: ChipMetadata): string;
+    getChipLabel(chip: ChipMetadata): string;
+    onChipClick(chip: ChipMetadata): void;
+    onRemoveChip(event: Event, chip: ChipMetadata): void;
+    private emitSelectionChange;
+    private setupLabels;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ChipGroupComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ChipGroupComponent, "val-chip-group", never, { "props": { "alias": "props"; "required": false; }; }, { "selectionChange": "selectionChange"; "chipRemove": "chipRemove"; "chipClick": "chipClick"; }, never, never, true, never>;
+}

package/lib/components/molecules/chip-group/types.d.ts

@@ -0,0 +1,65 @@
+import { Color } from '@ionic/core';
+/**
+ * Single chip configuration.
+ */
+export interface ChipMetadata {
+    /** Unique chip identifier */
+    value: string;
+    /** Chip label */
+    label?: string;
+    /** Chip icon */
+    icon?: string;
+    /** Chip color */
+    color?: Color;
+    /** Whether chip is selected */
+    selected?: boolean;
+    /** Whether chip 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 chip group component.
+ */
+export interface ChipGroupMetadata {
+    /** Chip items */
+    chips: ChipMetadata[];
+    /** Allow selection */
+    selectable?: boolean;
+    /** Allow multiple selection */
+    multiple?: boolean;
+    /** Allow removing chips */
+    removable?: boolean;
+    /** Default color for all chips */
+    color?: Color;
+    /** Selected color */
+    selectedColor?: Color;
+    /** Chip outline style */
+    outline?: boolean;
+    /** Unique token identifier */
+    token?: string;
+    /** Wrap chips or scroll */
+    wrap?: boolean;
+}
+/**
+ * Event emitted when chip selection changes.
+ */
+export interface ChipSelectionEvent {
+    /** Selected chip(s) */
+    selected: ChipMetadata | ChipMetadata[];
+    /** Selected value(s) */
+    values: string | string[];
+}
+/**
+ * Event emitted when chip is removed.
+ */
+export interface ChipRemoveEvent {
+    /** Removed chip */
+    chip: ChipMetadata;
+    /** Remaining chips */
+    remaining: ChipMetadata[];
+}

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

@@ -0,0 +1,42 @@
+import { EventEmitter, OnInit, OnDestroy } from '@angular/core';
+import { CommentMetadata, CommentReaction, CommentAction, CommentMenuItem, CommentAuthorClickEvent, CommentReactionClickEvent, CommentActionClickEvent, CommentMenuItemClickEvent, CommentLoadMoreEvent } from './types';
+import * as i0 from "@angular/core";
+export declare class CommentComponent implements OnInit, OnDestroy {
+    props: CommentMetadata;
+    authorClick: EventEmitter<CommentAuthorClickEvent>;
+    reactionClick: EventEmitter<CommentReactionClickEvent>;
+    actionClick: EventEmitter<CommentActionClickEvent>;
+    menuItemClick: EventEmitter<CommentMenuItemClickEvent>;
+    loadMoreClick: EventEmitter<CommentLoadMoreEvent>;
+    collapseToggle: EventEmitter<{
+        token: string;
+        collapsed: boolean;
+    }>;
+    displayContent: string;
+    private langSubscription;
+    private langService;
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    private updateDisplayContent;
+    getInitials(name: string): string;
+    formatTimestamp(timestamp: string | Date): string;
+    formatCount(count: number): string;
+    processContent(content: string): string;
+    private escapeHtml;
+    getReactionColor(reaction: CommentReaction): string;
+    getActionLabel(action: CommentAction): string;
+    getMenuItemLabel(item: CommentMenuItem): string;
+    hasChildren(): boolean;
+    canShowChildren(): boolean;
+    getChildProps(child: CommentMetadata): CommentMetadata;
+    hasMoreReplies(): boolean;
+    getRemainingCount(): number;
+    onAuthorClick(): void;
+    onReactionClick(reaction: CommentReaction): void;
+    onActionClick(action: CommentAction): void;
+    onMenuItemClick(item: CommentMenuItem): void;
+    onLoadMoreClick(): void;
+    onToggleCollapse(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<CommentComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CommentComponent, "val-comment", never, { "props": { "alias": "props"; "required": false; }; }, { "authorClick": "authorClick"; "reactionClick": "reactionClick"; "actionClick": "actionClick"; "menuItemClick": "menuItemClick"; "loadMoreClick": "loadMoreClick"; "collapseToggle": "collapseToggle"; }, never, never, true, never>;
+}

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

@@ -0,0 +1,171 @@
+import { Color } from '@ionic/core';
+import { AvatarMetadata } from '../../atoms/avatar/types';
+/**
+ * Author information for a comment.
+ */
+export interface CommentAuthor {
+    /** Display name */
+    name: string;
+    /** Username handle (without @) */
+    username?: string;
+    /** Author avatar configuration */
+    avatar?: AvatarMetadata;
+    /** Whether user is verified */
+    verified?: boolean;
+    /** Optional user ID or reference */
+    userId?: string;
+}
+/**
+ * Reaction configuration (like, love, laugh, etc.)
+ */
+export interface CommentReaction {
+    /** Unique identifier for this reaction type */
+    token: string;
+    /** Icon name (ionicon) */
+    icon: string;
+    /** Reaction count */
+    count: number;
+    /** Whether current user has reacted */
+    active?: boolean;
+    /** Icon color when active */
+    activeColor?: Color;
+    /** Icon color when inactive */
+    color?: Color;
+    /** Label for accessibility */
+    label?: string;
+}
+/**
+ * Action button configuration (reply, share, etc.)
+ */
+export interface CommentAction {
+    /** Unique identifier */
+    token: string;
+    /** Action label */
+    label: string;
+    /** Optional icon */
+    icon?: string;
+    /** Button color */
+    color?: Color;
+    /** Whether action is disabled */
+    disabled?: boolean;
+    /** Reactive content key */
+    contentKey?: string;
+    /** Component class for content lookup */
+    contentClass?: string;
+    /** Fallback label */
+    contentFallback?: string;
+}
+/**
+ * Menu item for the "more" dropdown (edit, delete, report, etc.)
+ */
+export interface CommentMenuItem {
+    /** Unique identifier */
+    token: string;
+    /** Menu item label */
+    label: string;
+    /** Optional icon */
+    icon?: string;
+    /** Item color (danger for delete, etc.) */
+    color?: Color;
+    /** Whether item is disabled */
+    disabled?: boolean;
+    /** Whether to show a divider before this item */
+    dividerBefore?: boolean;
+    /** Reactive content key */
+    contentKey?: string;
+    /** Component class for content lookup */
+    contentClass?: string;
+    /** Fallback label */
+    contentFallback?: string;
+}
+/**
+ * Main comment metadata interface.
+ * Supports recursive nesting via children property.
+ */
+export interface CommentMetadata {
+    /** Unique comment identifier */
+    token: string;
+    /** Comment author */
+    author: CommentAuthor;
+    /** Comment text content */
+    content: string;
+    /** Timestamp - can be string ("2 hours ago") or Date object */
+    timestamp: string | Date;
+    /** Available reactions */
+    reactions?: CommentReaction[];
+    /** Action buttons (reply, etc.) */
+    actions?: CommentAction[];
+    /** Menu items for "more" dropdown */
+    menuItems?: CommentMenuItem[];
+    /** Nested child comments (replies) */
+    children?: CommentMetadata[];
+    /** Whether comment was edited */
+    edited?: boolean;
+    /** Whether comment is pinned */
+    pinned?: boolean;
+    /** Whether comment is highlighted */
+    highlighted?: boolean;
+    /** Whether comment is collapsed */
+    collapsed?: boolean;
+    /** Total reply count (may differ from children.length if paginated) */
+    replyCount?: number;
+    /** Whether to auto-linkify URLs in content */
+    autoLinkify?: boolean;
+    /** Maximum nesting depth (default: 3) */
+    maxDepth?: number;
+    /** Current depth level (internal use) */
+    depth?: number;
+    /** Reactive content key for main content */
+    contentKey?: string;
+    /** Component class for content lookup */
+    contentClass?: string;
+    /** Fallback content */
+    contentFallback?: string;
+}
+/**
+ * Event emitted when author is clicked.
+ */
+export interface CommentAuthorClickEvent {
+    /** The author that was clicked */
+    author: CommentAuthor;
+    /** Parent comment token */
+    commentToken: string;
+}
+/**
+ * Event emitted when a reaction is clicked.
+ */
+export interface CommentReactionClickEvent {
+    /** The reaction that was clicked */
+    reaction: CommentReaction;
+    /** Parent comment token */
+    commentToken: string;
+    /** Whether reaction is now active */
+    isActive: boolean;
+}
+/**
+ * Event emitted when an action is clicked.
+ */
+export interface CommentActionClickEvent {
+    /** The action that was clicked */
+    action: CommentAction;
+    /** Parent comment token */
+    commentToken: string;
+}
+/**
+ * Event emitted when a menu item is clicked.
+ */
+export interface CommentMenuItemClickEvent {
+    /** The menu item that was clicked */
+    menuItem: CommentMenuItem;
+    /** Parent comment token */
+    commentToken: string;
+}
+/**
+ * Event emitted when load more replies is clicked.
+ */
+export interface CommentLoadMoreEvent {
+    /** Parent comment token */
+    commentToken: string;
+    /** Current loaded count */
+    currentCount: number;
+}

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

@@ -0,0 +1,43 @@
+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 langSubscription;
+    private valueSubscription;
+    private langService;
+    private isFocused;
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    private hasReactiveContent;
+    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-range-input/date-range-input.component.d.ts

@@ -0,0 +1,42 @@
+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 langSubscription;
+    private valueSubscription;
+    private langService;
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    private hasReactiveContent;
+    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/glow-card/glow-card.component.d.ts

@@ -0,0 +1,51 @@
+import { EventEmitter, OnInit } from '@angular/core';
+import { Observable } from 'rxjs';
+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.
+ *
+ * @example
+ * <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 props: GlowCardMetadata - Configuration for the card
+ * @output onClick - Emits GlowCardClickEvent when card, image, or CTA is clicked
+ */
+export declare class GlowCardComponent implements OnInit {
+    props: GlowCardMetadata;
+    onClick: EventEmitter<GlowCardClickEvent>;
+    private langService;
+    private navigationService;
+    private themeService;
+    title$: Observable<string>;
+    description$: Observable<string>;
+    ctaText$: Observable<string>;
+    private readonly ionicColors;
+    private readonly colorRgbMap;
+    constructor();
+    ngOnInit(): void;
+    get isDark(): boolean;
+    private initializeContent;
+    getGlowColor(): string;
+    getGlowColorRgb(): string;
+    private hexToRgb;
+    getAspectRatioValue(): string;
+    getBorderColor(): string;
+    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, { "props": { "alias": "props"; "required": false; }; }, { "onClick": "onClick"; }, never, never, true, never>;
+}