valtech-components 2.0.404 → 2.0.407

package/lib/components/organisms/comment-section/types.d.ts

@@ -0,0 +1,144 @@
+import { Color } from '@ionic/core';
+import { CommentMetadata, CommentAuthor } from '../../molecules/comment/types';
+/**
+ * Sort/filter option for comments.
+ * The actual sorting logic is handled by the parent component.
+ */
+export interface CommentSortOption {
+    /** Unique identifier */
+    token: string;
+    /** Display label */
+    label: string;
+    /** Optional icon */
+    icon?: string;
+    /** Reactive content key */
+    contentKey?: string;
+    /** Component class for content lookup */
+    contentClass?: string;
+    /** Fallback label */
+    contentFallback?: string;
+}
+/**
+ * Configuration for the new comment input area.
+ */
+export interface CommentInputConfig {
+    /** Input placeholder text */
+    placeholder?: string;
+    /** Submit button label */
+    submitLabel?: string;
+    /** Current user info (for avatar display) */
+    currentUser?: CommentAuthor;
+    /** Maximum character length */
+    maxLength?: number;
+    /** Minimum character length to enable submit */
+    minLength?: number;
+    /** Whether input is disabled */
+    disabled?: boolean;
+    /** Submit button color */
+    submitColor?: Color;
+    /** Show character counter */
+    showCounter?: boolean;
+    /** Reactive content keys */
+    placeholderContentKey?: string;
+    submitLabelContentKey?: string;
+    contentClass?: string;
+}
+/**
+ * Empty state configuration when no comments exist.
+ */
+export interface CommentEmptyState {
+    /** Empty state title */
+    title?: string;
+    /** Empty state message */
+    message?: string;
+    /** Empty state icon */
+    icon?: string;
+    /** Reactive content keys */
+    titleContentKey?: string;
+    messageContentKey?: string;
+    contentClass?: string;
+}
+/**
+ * Main metadata for comment-section organism.
+ */
+export interface CommentSectionMetadata {
+    /** Unique section identifier */
+    token?: string;
+    /** Section title (e.g., "Comments", "Reviews") */
+    title?: string;
+    /** Total comment count (may differ from comments.length if paginated) */
+    count?: number;
+    /** Whether to show the count badge */
+    showCount?: boolean;
+    /** Available sort options */
+    sortOptions?: CommentSortOption[];
+    /** Currently selected sort option token */
+    selectedSort?: string;
+    /** Sort dropdown label */
+    sortLabel?: string;
+    /** Array of comments to display */
+    comments: CommentMetadata[];
+    /** Whether to show the new comment input */
+    showInput?: boolean;
+    /** Input configuration */
+    inputConfig?: CommentInputConfig;
+    /** Initial loading state */
+    loading?: boolean;
+    /** Loading more comments */
+    loadingMore?: boolean;
+    /** Number of skeleton items to show when loading */
+    skeletonCount?: number;
+    /** Whether there are more comments to load */
+    hasMore?: boolean;
+    /** Load more button label */
+    loadMoreLabel?: string;
+    /** Pagination mode: 'button' (default) or 'infinite' */
+    paginationMode?: 'button' | 'infinite';
+    /** Infinite scroll threshold (e.g., '100px', '15%') */
+    infiniteScrollThreshold?: string;
+    /** Infinite scroll position */
+    infiniteScrollPosition?: 'top' | 'bottom';
+    /** Empty state configuration */
+    emptyState?: CommentEmptyState;
+    /** Section color theme */
+    color?: Color;
+    /** Whether to show dividers between comments */
+    showDividers?: boolean;
+    /** Reactive content key for title */
+    titleContentKey?: string;
+    /** Component class for content lookup */
+    contentClass?: string;
+    /** Fallback title */
+    titleContentFallback?: string;
+    /** Reactive content key for load more label */
+    loadMoreContentKey?: string;
+}
+/**
+ * Event emitted when sort option changes.
+ */
+export interface CommentSortChangeEvent {
+    /** Selected sort option */
+    option: CommentSortOption;
+    /** Previous sort option token */
+    previousSort?: string;
+}
+/**
+ * Event emitted when a new comment is submitted.
+ */
+export interface CommentSubmitEvent {
+    /** Comment text content */
+    content: string;
+    /** Parent comment token (if replying) */
+    parentToken?: string;
+    /** Section token */
+    sectionToken?: string;
+}
+/**
+ * Event emitted when load more is clicked.
+ */
+export interface CommentSectionLoadMoreEvent {
+    /** Section token */
+    sectionToken?: string;
+    /** Current loaded count */
+    currentCount: number;
+}

package/lib/components/organisms/data-table/data-table.component.d.ts

@@ -0,0 +1,46 @@
+import { EventEmitter, OnInit, OnChanges, SimpleChanges } from '@angular/core';
+import { DataTableMetadata, DataTableColumn, DataTableSort, DataTableRowClickEvent, DataTableSelectionChangeEvent, DataTableSortChangeEvent, DataTablePageChangeEvent } from './types';
+import * as i0 from "@angular/core";
+export declare class DataTableComponent<T = any> implements OnInit, OnChanges {
+    props: DataTableMetadata<T>;
+    rowClick: EventEmitter<DataTableRowClickEvent<T>>;
+    selectionChange: EventEmitter<DataTableSelectionChangeEvent<T>>;
+    sortChange: EventEmitter<DataTableSortChangeEvent>;
+    pageChange: EventEmitter<DataTablePageChangeEvent>;
+    displayedData: T[];
+    currentSort: DataTableSort | null;
+    selectedRows: Set<any>;
+    private langService;
+    ngOnInit(): void;
+    ngOnChanges(changes: SimpleChanges): void;
+    private initializeState;
+    private updateDisplayedData;
+    private sortData;
+    get visibleColumns(): DataTableColumn<T>[];
+    get totalColumns(): number;
+    get emptyState(): import("./types").DataTableEmptyState;
+    get pageSizeOptions(): number[];
+    get totalPages(): number;
+    get paginationStart(): number;
+    get paginationEnd(): number;
+    get isAllSelected(): boolean;
+    get isIndeterminate(): boolean;
+    getCellValue(row: T, column: DataTableColumn<T>): any;
+    getFormattedValue(row: T, column: DataTableColumn<T>): string;
+    getColumnClass(column: DataTableColumn<T>): string;
+    getAriaSort(column: DataTableColumn<T>): string | null;
+    getRowNumber(index: number): number;
+    getRowId(row: T): any;
+    trackByFn(row: T): any;
+    isRowSelected(row: T): boolean;
+    onSort(column: DataTableColumn<T>): void;
+    onRowClick(row: T, index: number, event: MouseEvent): void;
+    toggleSelectAll(event: CustomEvent): void;
+    toggleRowSelection(row: T, event: CustomEvent): void;
+    selectSingleRow(row: T): void;
+    private emitSelectionChange;
+    goToPage(page: number): void;
+    onPageSizeChange(event: CustomEvent): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DataTableComponent<any>, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DataTableComponent<any>, "val-data-table", never, { "props": { "alias": "props"; "required": false; }; }, { "rowClick": "rowClick"; "selectionChange": "selectionChange"; "sortChange": "sortChange"; "pageChange": "pageChange"; }, never, never, true, never>;
+}

package/lib/components/organisms/data-table/types.d.ts

@@ -0,0 +1,205 @@
+import { Color } from '@ionic/core';
+import { TemplateRef } from '@angular/core';
+/**
+ * Column definition for the data table.
+ */
+export interface DataTableColumn<T = any> {
+    /** Unique identifier for the column */
+    key: string;
+    /** Header label */
+    label: string;
+    /** Property path in the data object (supports dot notation) */
+    field?: string;
+    /** Column width (CSS value) */
+    width?: string;
+    /** Minimum width */
+    minWidth?: string;
+    /** Maximum width */
+    maxWidth?: string;
+    /** Text alignment */
+    align?: 'left' | 'center' | 'right';
+    /** Whether the column is sortable */
+    sortable?: boolean;
+    /** Custom sort function */
+    sortFn?: (a: T, b: T) => number;
+    /** Whether the column is visible */
+    visible?: boolean;
+    /** Custom cell template */
+    cellTemplate?: TemplateRef<any>;
+    /** Custom header template */
+    headerTemplate?: TemplateRef<any>;
+    /** Format function for cell value */
+    format?: (value: any, row: T) => string;
+    /** CSS class for the column */
+    cssClass?: string;
+    /** Whether this is a sticky column */
+    sticky?: 'start' | 'end';
+}
+/**
+ * Sort configuration.
+ */
+export interface DataTableSort {
+    /** Column key to sort by */
+    column: string;
+    /** Sort direction */
+    direction: 'asc' | 'desc';
+}
+/**
+ * Pagination configuration.
+ */
+export interface DataTablePagination {
+    /** Current page (0-indexed) */
+    page: number;
+    /** Items per page */
+    pageSize: number;
+    /** Total number of items */
+    total: number;
+    /** Available page size options */
+    pageSizeOptions?: number[];
+}
+/**
+ * Selection configuration.
+ */
+export interface DataTableSelection<T = any> {
+    /** Selection mode */
+    mode: 'none' | 'single' | 'multiple';
+    /** Currently selected items */
+    selected: T[];
+    /** Function to get unique ID from row */
+    trackBy?: (row: T) => any;
+}
+/**
+ * Row click event.
+ */
+export interface DataTableRowClickEvent<T = any> {
+    /** The row data */
+    row: T;
+    /** Row index */
+    index: number;
+    /** Original mouse event */
+    event: MouseEvent;
+}
+/**
+ * Selection change event.
+ */
+export interface DataTableSelectionChangeEvent<T = any> {
+    /** Selected rows */
+    selected: T[];
+    /** Row that was changed (if single change) */
+    changedRow?: T;
+    /** Action performed */
+    action: 'select' | 'deselect' | 'selectAll' | 'deselectAll';
+}
+/**
+ * Sort change event.
+ */
+export interface DataTableSortChangeEvent {
+    /** Column key */
+    column: string;
+    /** Sort direction */
+    direction: 'asc' | 'desc' | null;
+}
+/**
+ * Page change event.
+ */
+export interface DataTablePageChangeEvent {
+    /** New page number */
+    page: number;
+    /** Page size */
+    pageSize: number;
+    /** Previous page */
+    previousPage: number;
+}
+/**
+ * Empty state configuration.
+ */
+export interface DataTableEmptyState {
+    /** Icon to display */
+    icon?: string;
+    /** Title text */
+    title?: string;
+    /** Description text */
+    description?: string;
+    /** Custom template */
+    template?: TemplateRef<any>;
+}
+/**
+ * Loading state configuration.
+ */
+export interface DataTableLoadingState {
+    /** Whether data is loading */
+    loading: boolean;
+    /** Number of skeleton rows to show */
+    skeletonRows?: number;
+    /** Loading message */
+    message?: string;
+}
+/**
+ * Metadata for the data table component.
+ */
+export interface DataTableMetadata<T = any> {
+    /** Column definitions */
+    columns: DataTableColumn<T>[];
+    /** Data rows */
+    data: T[];
+    /** Current sort configuration */
+    sort?: DataTableSort;
+    /** Enable client-side sorting */
+    clientSort?: boolean;
+    /** Pagination configuration */
+    pagination?: DataTablePagination;
+    /** Enable client-side pagination */
+    clientPagination?: boolean;
+    /** Show pagination controls */
+    showPagination?: boolean;
+    /** Selection configuration */
+    selection?: DataTableSelection<T>;
+    /** Show selection column */
+    showSelectionColumn?: boolean;
+    /** Table size variant */
+    size?: 'small' | 'medium' | 'large';
+    /** Show borders */
+    bordered?: boolean;
+    /** Striped rows */
+    striped?: boolean;
+    /** Hoverable rows */
+    hoverable?: boolean;
+    /** Fixed header */
+    stickyHeader?: boolean;
+    /** Table max height (enables scrolling) */
+    maxHeight?: string;
+    /** Show row numbers */
+    showRowNumbers?: boolean;
+    /** Row number start */
+    rowNumberStart?: number;
+    /** Empty state configuration */
+    emptyState?: DataTableEmptyState;
+    /** Loading state */
+    loadingState?: DataTableLoadingState;
+    /** Custom CSS class */
+    cssClass?: string;
+    /** Header color */
+    headerColor?: Color;
+    /** Row click enabled */
+    rowClickable?: boolean;
+    /** Row actions template */
+    actionsTemplate?: TemplateRef<any>;
+    /** Actions column width */
+    actionsWidth?: string;
+    /** Actions column label */
+    actionsLabel?: string;
+    /** Table caption for screen readers */
+    caption?: string;
+    /** ARIA label */
+    ariaLabel?: string;
+    /** Content class for reactive content */
+    contentClass?: string;
+}
+/**
+ * Default pagination options.
+ */
+export declare const DEFAULT_PAGE_SIZE_OPTIONS: number[];
+/**
+ * Default empty state.
+ */
+export declare const DEFAULT_EMPTY_STATE: DataTableEmptyState;

package/lib/components/types.d.ts

@@ -40,21 +40,27 @@ export type Action = {
  */
 export declare enum InputType {
     TEXT = 0,
-    EMAIL = 1,
-    PASSWORD = 2,
-    COMMENT = 3,
-    NUMBER = 4,
-    NUMBER_FROM_TO = 5,
-    PIN_CODE = 6,
-    DATE = 7,
-    HOUR = 8,
-    CHECK = 9,
-    RADIO = 10,
-    SELECT = 11,
-    SEARCH_SELECT = 12,
-    MULTI_SELECT = 13,
-    MULTI_SELECT_SIMPLE = 14,
-    FILE = 15
+    TEXTAREA = 1,
+    EMAIL = 2,
+    PASSWORD = 3,
+    COMMENT = 4,
+    NUMBER = 5,
+    NUMBER_FROM_TO = 6,
+    PIN_CODE = 7,
+    DATE = 8,
+    DATE_RANGE = 9,
+    HOUR = 10,
+    CHECK = 11,
+    RADIO = 12,
+    SELECT = 13,
+    SEARCH_SELECT = 14,
+    MULTI_SELECT = 15,
+    MULTI_SELECT_SIMPLE = 16,
+    FILE = 17,
+    TOGGLE = 18,
+    RANGE = 19,
+    PHONE = 20,
+    CURRENCY = 21
 }
 /**
  * Option for select, radio, etc. inputs.

package/lib/services/confirmation-dialog/confirmation-dialog.service.d.ts

@@ -0,0 +1,71 @@
+import { ConfirmationDialogMetadata, ConfirmationResult, ConfirmationButton } from './types';
+import * as i0 from "@angular/core";
+/**
+ * Service for displaying confirmation dialogs.
+ *
+ * @example Basic usage
+ * const result = await confirmationService.confirm({
+ *   title: 'Delete Item',
+ *   message: 'Are you sure you want to delete this item?',
+ * });
+ *
+ * if (result.confirmed) {
+ *   // User confirmed
+ * }
+ *
+ * @example Custom buttons
+ * const result = await confirmationService.confirm({
+ *   title: 'Save Changes',
+ *   message: 'Do you want to save your changes before leaving?',
+ *   confirmButton: { text: 'Save', color: 'success' },
+ *   cancelButton: { text: 'Discard', color: 'danger' },
+ *   extraButtons: [{ text: 'Cancel', role: 'cancel' }]
+ * });
+ *
+ * @example Destructive action
+ * const result = await confirmationService.confirmDestructive({
+ *   title: 'Delete Account',
+ *   message: 'This action cannot be undone. Are you sure?',
+ * });
+ */
+export declare class ConfirmationDialogService {
+    private alertController;
+    /**
+     * Shows a confirmation dialog and returns the result.
+     * @param options - Configuration for the dialog
+     * @returns Promise resolving to the confirmation result
+     */
+    confirm(options: ConfirmationDialogMetadata): Promise<ConfirmationResult>;
+    /**
+     * Shows a simple confirmation dialog with default buttons.
+     * @param title - Dialog title
+     * @param message - Dialog message
+     * @returns Promise resolving to true if confirmed, false otherwise
+     */
+    confirmSimple(title: string, message: string): Promise<boolean>;
+    /**
+     * Shows a destructive action confirmation with red confirm button.
+     * @param options - Configuration for the dialog
+     * @returns Promise resolving to the confirmation result
+     */
+    confirmDestructive(options: Omit<ConfirmationDialogMetadata, 'confirmButton'> & {
+        confirmButton?: Partial<ConfirmationButton>;
+    }): Promise<ConfirmationResult>;
+    /**
+     * Shows an info alert with just an OK button.
+     * @param title - Alert title
+     * @param message - Alert message
+     */
+    alert(title: string, message: string): Promise<void>;
+    /**
+     * Shows a three-option dialog (Save, Discard, Cancel).
+     * Common for unsaved changes scenarios.
+     * @param title - Dialog title
+     * @param message - Dialog message
+     * @returns Promise resolving to 'save' | 'discard' | 'cancel'
+     */
+    confirmSaveDiscard(title: string, message: string): Promise<'save' | 'discard' | 'cancel'>;
+    private buildButtons;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ConfirmationDialogService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<ConfirmationDialogService>;
+}

package/lib/services/confirmation-dialog/types.d.ts

@@ -0,0 +1,61 @@
+import { Color } from '@ionic/core';
+/**
+ * Button configuration for confirmation dialog.
+ */
+export interface ConfirmationButton {
+    /** Button text */
+    text: string;
+    /** Button role */
+    role?: 'cancel' | 'destructive' | 'confirm';
+    /** Button color (Ionic color) */
+    color?: Color;
+    /** CSS class for the button */
+    cssClass?: string;
+    /** Handler function called when button is clicked */
+    handler?: () => void | Promise<void> | boolean | Promise<boolean>;
+}
+/**
+ * Metadata for the confirmation dialog.
+ */
+export interface ConfirmationDialogMetadata {
+    /** Dialog title */
+    title: string;
+    /** Dialog message/content */
+    message: string;
+    /** Confirm button configuration */
+    confirmButton?: ConfirmationButton;
+    /** Cancel button configuration */
+    cancelButton?: ConfirmationButton;
+    /** Additional buttons (between cancel and confirm) */
+    extraButtons?: ConfirmationButton[];
+    /** Allow dismissing by clicking backdrop */
+    backdropDismiss?: boolean;
+    /** CSS class for the alert */
+    cssClass?: string;
+    /** Alert mode */
+    mode?: 'ios' | 'md';
+    /** Unique token identifier */
+    token?: string;
+    /** Translucent backdrop */
+    translucent?: boolean;
+    /** Animated transitions */
+    animated?: boolean;
+    /** Header subtitle */
+    subHeader?: string;
+}
+/**
+ * Result from confirmation dialog.
+ */
+export interface ConfirmationResult {
+    /** Whether the dialog was confirmed */
+    confirmed: boolean;
+    /** The role of the button clicked */
+    role?: string;
+    /** Any data returned */
+    data?: any;
+}
+/**
+ * Default confirmation dialog options.
+ */
+export declare const DEFAULT_CONFIRM_BUTTON: ConfirmationButton;
+export declare const DEFAULT_CANCEL_BUTTON: ConfirmationButton;

package/lib/services/modal/modal.service.d.ts

@@ -0,0 +1,98 @@
+import { ModalMetadata, SimpleModalMetadata, ModalResult, ModalButton } from './types';
+import * as i0 from "@angular/core";
+/**
+ * ModalService
+ *
+ * A service for creating and managing modals with various configurations.
+ *
+ * @example Basic component modal
+ * ```typescript
+ * const result = await modalService.open({
+ *   component: MyFormComponent,
+ *   componentProps: { userId: 123 },
+ *   header: { title: 'Edit User', showCloseButton: true },
+ *   size: 'medium'
+ * });
+ *
+ * if (result.role === 'confirm') {
+ *   console.log('Saved:', result.data);
+ * }
+ * ```
+ *
+ * @example Simple content modal
+ * ```typescript
+ * await modalService.openSimple({
+ *   title: 'Terms of Service',
+ *   content: '<p>Terms content here...</p>',
+ *   size: 'large',
+ *   showCloseButton: true
+ * });
+ * ```
+ *
+ * @example Sheet modal (mobile)
+ * ```typescript
+ * const result = await modalService.openSheet({
+ *   component: FilterComponent,
+ *   breakpoints: {
+ *     initialBreakpoint: 0.5,
+ *     breakpoints: [0, 0.5, 1],
+ *     showHandle: true
+ *   }
+ * });
+ * ```
+ */
+export declare class ModalService {
+    private modalController;
+    /**
+     * Opens a modal with a component.
+     * @param options - Modal configuration
+     * @returns Promise resolving to the modal result
+     */
+    open<T = any, R = any>(options: ModalMetadata<T>): Promise<ModalResult<R>>;
+    /**
+     * Opens a simple content modal without a custom component.
+     * Uses Ionic's alert-like styling but with modal capabilities.
+     * @param options - Simple modal configuration
+     * @returns Promise resolving to the modal result
+     */
+    openSimple(options: SimpleModalMetadata): Promise<ModalResult>;
+    /**
+     * Opens a confirmation modal.
+     * @param title - Modal title
+     * @param message - Modal message
+     * @param confirmButton - Confirm button config (optional)
+     * @param cancelButton - Cancel button config (optional)
+     * @returns Promise resolving to true if confirmed
+     */
+    confirm(title: string, message: string, confirmButton?: Partial<ModalButton>, cancelButton?: Partial<ModalButton>): Promise<boolean>;
+    /**
+     * Opens a sheet modal (iOS-style bottom sheet).
+     * @param options - Modal configuration with sheet-specific options
+     * @returns Promise resolving to the modal result
+     */
+    openSheet<T = any, R = any>(options: Omit<ModalMetadata<T>, 'breakpoints'> & {
+        initialBreakpoint?: number;
+        breakpoints?: number[];
+        showHandle?: boolean;
+    }): Promise<ModalResult<R>>;
+    /**
+     * Opens a fullscreen modal.
+     * @param options - Modal configuration
+     * @returns Promise resolving to the modal result
+     */
+    openFullscreen<T = any, R = any>(options: ModalMetadata<T>): Promise<ModalResult<R>>;
+    /**
+     * Dismisses the top-most modal.
+     * @param data - Optional data to return
+     * @param role - Optional role
+     */
+    dismiss(data?: any, role?: string): Promise<boolean>;
+    /**
+     * Gets the top-most modal.
+     */
+    getTop(): Promise<HTMLIonModalElement | undefined>;
+    private normalizeCanDismiss;
+    private buildCssClasses;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ModalService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<ModalService>;
+}

package/lib/services/modal/simple-modal-content.component.d.ts

@@ -0,0 +1,19 @@
+import { ModalButton } from './types';
+import * as i0 from "@angular/core";
+/**
+ * Internal component for simple content modals.
+ * Used by ModalService.openSimple()
+ */
+export declare class SimpleModalContentComponent {
+    title: string;
+    content: string;
+    buttons: ModalButton[];
+    showCloseButton: boolean;
+    _modalRef: {
+        dismiss: (data?: any, role?: string) => Promise<boolean>;
+    };
+    onButtonClick(button: ModalButton): Promise<void>;
+    onDismiss(role: string): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SimpleModalContentComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SimpleModalContentComponent, "val-simple-modal-content", never, { "title": { "alias": "title"; "required": false; }; "content": { "alias": "content"; "required": false; }; "buttons": { "alias": "buttons"; "required": false; }; "showCloseButton": { "alias": "showCloseButton"; "required": false; }; "_modalRef": { "alias": "_modalRef"; "required": false; }; }, {}, never, never, true, never>;
+}