commons-shared-web-ui 0.0.28 → 0.0.30

package/index.d.ts

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { OnChanges, EventEmitter, SimpleChanges, ChangeDetectorRef, OnInit, OnDestroy, ElementRef, PipeTransform, AfterViewInit, QueryList, NgZone } from '@angular/core';
+import { OnChanges, EventEmitter, SimpleChanges, ChangeDetectorRef, OnInit, OnDestroy, ElementRef, PipeTransform, NgZone, AfterViewInit, QueryList } from '@angular/core';
 import * as i2 from '@angular/material/snack-bar';
 import { MatSnackBar, MatSnackBarRef } from '@angular/material/snack-bar';
 import * as i2$1 from '@angular/common';
@@ -161,6 +161,12 @@ interface ActionButtonConfig {
     hidden?: boolean;
     /** State. @default false */
     disabled?: boolean;
+    /**
+     * When true and sectionStepper is active, this button is only visible
+     * on the last step. Use this for Submit buttons that should not appear
+     * on intermediate steps.
+     */
+    showOnLastStepOnly?: boolean;
     /** Action logic. */
     action: ActionConfig;
 }
@@ -267,6 +273,7 @@ interface FieldConfig {
     numberConfig?: NumberConfig;
     dateConfig?: DateConfig;
     optionConfig?: OptionConfig$1;
+    autocompleteConfig?: AutocompleteConfig;
     generatedConfig?: GeneratedConfig;
     rangeConfig?: RangeConfig;
     attachmentConfig?: AttachmentConfig;
@@ -320,6 +327,72 @@ interface OptionConfig$1 {
     layout?: 'row' | 'column';
     optionList?: OptionItem[];
 }
+interface AutocompleteDisplayField {
+    /** Dot-notation path to the value in the API response item (e.g. 'login', 'contact.phone'). */
+    path: string;
+    /**
+     * How to render the value.
+     * Built-in: 'text' | 'email' | 'phone' | 'image'.
+     * Can be any string for custom logic/styling.
+     */
+    type?: 'text' | 'email' | 'phone' | 'image' | string;
+    /** Optional Material Icon name to show (e.g. 'location_on', 'calendar_today', 'person'). */
+    icon?: string;
+    /** Optional label prefix shown before the value (e.g. 'Email: '). */
+    label?: string;
+    /** Custom CSS class to apply to this display item. */
+    className?: string;
+}
+/**
+ * Configuration specific to the AUTOCOMPLETE field type.
+ * For detailed documentation and examples, see documentation/smart-form.md.
+ */
+interface AutocompleteConfig {
+    /** HTTP method for the options API. Defaults to 'GET'. */
+    method?: 'GET' | 'POST' | 'PUT' | 'PATCH';
+    /** Static request body sent with POST/PUT/PATCH requests. */
+    body?: any;
+    /** Static query parameters to append to the API URL on every request. */
+    queryParams?: {
+        [key: string]: any;
+    };
+    /** Custom HTTP headers to send with the API request (e.g. Authorization, X-TENANT). */
+    headers?: {
+        [key: string]: string;
+    };
+    /**
+     * Template string for building a composite label from multiple fields.
+     * Use {fieldName} placeholders. E.g. '{firstName} {lastName} ({login})'.
+     * Takes precedence over optionConfig.labelPath if both are set.
+     */
+    labelTemplate?: string;
+    /**
+     * One or more extra fields to render below the main label inside each dropdown option.
+     *
+     * Accepts:
+     *  - A plain string  → treated as a single dot-notation path rendered as 'text'.
+     *    Backward-compatible with the old `displayPath` string.
+     *  - An array of AutocompleteDisplayField objects → full control over icon,
+     *    type (text | email | phone | image), and optional label prefix.
+     *
+     * Examples:
+     *   "displayFields": "login"
+     *   "displayFields": [
+     *     { "path": "login",    "type": "email" },
+     *     { "path": "phone",    "type": "phone" },
+     *     { "path": "photoUrl", "type": "image" }
+     *   ]
+     */
+    displayFields?: string | AutocompleteDisplayField[];
+    /** Query parameter key appended to the URL when the user types (e.g. 'searchTerm', 'q'). */
+    searchParam?: string;
+    /** Alias for 'searchParam'. */
+    searchKey?: string;
+    /** Minimum characters to type before a server request fires (default: 1). */
+    searchMinLength?: number;
+    /** Debounce delay in ms before firing the search request (default: 300ms server-side, 150ms local). */
+    searchDebounce?: number;
+}
 interface EmailConfig {
     defaultDomain?: string;
     allowedDomains?: string[];
@@ -1297,6 +1370,8 @@ declare class FormFieldComponent implements OnInit, OnDestroy {
         label: string;
         code: any;
     }[];
+    /** Cache of the latest dependency parameters for server-side autocomplete filtering */
+    private _latestDependencyValues;
     /** For GROUP fields with allowMulti = true */
     groupFormArray: FormArray;
     /** For GROUP fields with allowMulti = false — single nested FormGroup */
@@ -1366,11 +1441,13 @@ declare class FormFieldComponent implements OnInit, OnDestroy {
     }): any;
     extractFunctionName(formula: string): string | null;
     setupDependencies(): void;
-    loadDropdownOptions(queryParams?: {
+    loadDropdownOptions(dynamicParams?: {
         [key: string]: any;
     }): void;
     private getValueByPath;
-    /** Builds HttpHeaders using the token stored in the SmartFormController (sourced from configJSON). */
+    /** Builds HttpHeaders using the token stored in the SmartFormController (sourced from configJSON)
+     *  merged with any custom headers declared in optionConfig.headers.
+     */
     private getHeaders;
     updateValue(newValue: any): void;
     onCheckboxListChange(code: string, checked: boolean): void;
@@ -2390,8 +2467,13 @@ interface ConfirmationModalConfig {
         color?: string;
     };
     width?: string;
-    size?: 'sm' | 'md' | 'lg';
+    size?: 'sm' | 'md' | 'lg' | 'xl';
     customClass?: string;
+    type?: 'modal' | 'side-panel';
+    panelPosition?: 'left' | 'right' | 'top' | 'bottom';
+    panelSpacing?: string;
+    panelWidth?: string;
+    panelHeight?: string;
     backgroundColor?: string;
     borderRadius?: string;
     borderTopLeftRadius?: string;
@@ -2497,6 +2579,7 @@ declare class ConfirmationModalComponent implements OnInit, OnDestroy {
     onClose(): void;
     onShowCodeSnippet(): void;
     getModalWidth(): string;
+    getModalStyles(): any;
     getConfirmButtonClass(): string;
     getHeaderClass(): string;
     resolveIconType(icon: any): 'material' | 'custom' | 'img';
@@ -3058,172 +3141,6 @@ declare class SideNavModule {
     static ɵinj: i0.ɵɵInjectorDeclaration<SideNavModule>;
 }
 
-declare class SharedUiModule {
-    static ɵfac: i0.ɵɵFactoryDeclaration<SharedUiModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<SharedUiModule, never, [typeof i2$1.CommonModule, typeof MaterialModule, typeof AlertModule, typeof ButtonModule, typeof ButtonDropdownModule, typeof ConfirmationModalModule, typeof FilterSidebarModule, typeof FilterModule, typeof SummaryCardModule, typeof ConfigurableFormModule, typeof FormComponentsModule, typeof SmartFormModule, typeof SideNavModule, typeof FormBuilderModule], [typeof MaterialModule, typeof AlertModule, typeof ButtonModule, typeof ButtonDropdownModule, typeof ConfirmationModalModule, typeof FilterSidebarModule, typeof FilterModule, typeof SummaryCardModule, typeof ConfigurableFormModule, typeof FormComponentsModule, typeof SmartFormModule, typeof SideNavModule, typeof FormBuilderModule]>;
-    static ɵinj: i0.ɵɵInjectorDeclaration<SharedUiModule>;
-}
-
-/**
- * Utility functions for LocalStorage operations
- */
-declare const getLocalStorageItem: (key: string) => string | null;
-declare const setLocalStorageItem: (key: string, value: string) => void;
-declare const removeLocalStorageItem: (key: string) => void;
-declare const clearLocalStorage: () => void;
-/**
- * Utility functions for SessionStorage operations
- */
-declare const getSessionStorageItem: (key: string) => string | null;
-declare const setSessionStorageItem: (key: string, value: string) => void;
-declare const removeSessionStorageItem: (key: string) => void;
-declare const clearSessionStorage: () => void;
-
-/**
- * Utility functions for string manipulation
- */
-declare class StringUtils {
-    /**
-     * Converts a string to camelCase.
-     * Example: "First Name" -> "firstName", "Profile Picture" -> "profilePicture"
-     */
-    static toCamelCase(str?: string): string;
-}
-
-/**
- * Recursively translates the Configuration object using the provided labels map.
- * This function processes:
- * - Section Titles
- * - Field Labels
- * - Placeholders
- * - Help Texts
- * - Option Labels (for static options)
- * - Repeater Labels (addLabel, repeaterItemLabel)
- *
- * @param config The FormConfig object to translate
- * @param labelsMap A map of key-value pairs for translation (Flattened JSON)
- * @returns A new FormConfig object with translated strings
- */
-declare function translateConfig(config: any, labelsMap: any): any;
-
-/**
- * Example: Basic Form Configuration
- * This is a generic example for testing and demonstration purposes.
- */
-declare const EXAMPLE_FORM_CONFIG: FormConfig;
-/**
- * Example: Target Group Configuration
- * Demonstrates composite fields for Age Group and Gender Split
- */
-declare const TARGET_GROUP_CONFIG: FormConfig;
-
-declare const configurableForm_examples_d_EXAMPLE_FORM_CONFIG: typeof EXAMPLE_FORM_CONFIG;
-declare const configurableForm_examples_d_TARGET_GROUP_CONFIG: typeof TARGET_GROUP_CONFIG;
-declare namespace configurableForm_examples_d {
-  export {
-    configurableForm_examples_d_EXAMPLE_FORM_CONFIG as EXAMPLE_FORM_CONFIG,
-    configurableForm_examples_d_TARGET_GROUP_CONFIG as TARGET_GROUP_CONFIG,
-  };
-}
-
-interface PaginationLabels {
-    items: string;
-    of: string;
-    perPage: string;
-}
-declare class PaginationComponent implements OnInit, OnChanges {
-    totalItems: number;
-    itemsPerPage: number;
-    currentPage: number;
-    pageSizeOptions: number[];
-    theme: 'theme-1' | 'theme-2';
-    labels: PaginationLabels;
-    pageChange: EventEmitter<number>;
-    itemsPerPageChange: EventEmitter<number>;
-    totalPages: number;
-    pages: (number | string)[];
-    startItem: number;
-    endItem: number;
-    constructor();
-    ngOnInit(): void;
-    ngOnChanges(changes: SimpleChanges): void;
-    calculatePagination(): void;
-    getVisiblePages(current: number, total: number): (number | string)[];
-    onPageChange(page: number | string): void;
-    onItemsPerPageChange(event: Event): void;
-    nextPage(): void;
-    prevPage(): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<PaginationComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<PaginationComponent, "lib-pagination", never, { "totalItems": { "alias": "totalItems"; "required": false; }; "itemsPerPage": { "alias": "itemsPerPage"; "required": false; }; "currentPage": { "alias": "currentPage"; "required": false; }; "pageSizeOptions": { "alias": "pageSizeOptions"; "required": false; }; "theme": { "alias": "theme"; "required": false; }; "labels": { "alias": "labels"; "required": false; }; }, { "pageChange": "pageChange"; "itemsPerPageChange": "itemsPerPageChange"; }, never, never, false, never>;
-}
-
-declare class PaginationModule {
-    static ɵfac: i0.ɵɵFactoryDeclaration<PaginationModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<PaginationModule, [typeof PaginationComponent], [typeof i2$1.CommonModule], [typeof PaginationComponent]>;
-    static ɵinj: i0.ɵɵInjectorDeclaration<PaginationModule>;
-}
-
-interface NavStyleConfig {
-    width?: string;
-    backgroundColor?: string;
-    borderRadius?: string;
-    border?: string;
-    padding?: string;
-    gap?: string;
-    boxShadow?: string;
-    itemColor?: string;
-    itemRadius?: string;
-    itemPadding?: string;
-    fontSize?: string;
-    fontWeight?: string;
-    activeItemBg?: string;
-    activeItemColor?: string;
-    activeItemFontWeight?: string;
-    activeItemBorderColor?: string;
-    hoverItemBg?: string;
-    hoverItemColor?: string;
-    badgeBg?: string;
-    badgeColor?: string;
-}
-
-interface NavItem {
-    id: string | number;
-    label: string;
-    icon?: string;
-    badge?: string | number;
-    disabled?: boolean;
-}
-declare class NavComponent implements OnChanges {
-    items: NavItem[];
-    activeId: string | number | null;
-    variant: 'filled' | 'underline' | 'pills';
-    orientation: 'horizontal' | 'vertical';
-    styleConfig: NavStyleConfig;
-    selectionChange: EventEmitter<NavItem>;
-    ngOnChanges(changes: SimpleChanges): void;
-    get computedStyles(): {
-        [key: string]: string | undefined;
-    };
-    onItemClick(item: NavItem): void;
-    trackById(index: number, item: NavItem): string | number;
-    static ɵfac: i0.ɵɵFactoryDeclaration<NavComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<NavComponent, "lib-nav", never, { "items": { "alias": "items"; "required": false; }; "activeId": { "alias": "activeId"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; "orientation": { "alias": "orientation"; "required": false; }; "styleConfig": { "alias": "styleConfig"; "required": false; }; }, { "selectionChange": "selectionChange"; }, never, never, false, never>;
-}
-
-declare class NavModule {
-    static ɵfac: i0.ɵɵFactoryDeclaration<NavModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<NavModule, [typeof NavComponent], [typeof i2$1.CommonModule], [typeof NavComponent]>;
-    static ɵinj: i0.ɵɵInjectorDeclaration<NavModule>;
-}
-
-declare const DEFAULT_ITEMS_PER_PAGE = 10;
-declare const DEFAULT_PAGE_SIZE_OPTIONS: number[];
-declare const PAGINATION_THEME_DEFAULT = "theme-1";
-declare const PAGINATION_THEME_DARK = "theme-2";
-declare const NAV_VARIANT_DEFAULT: 'filled' | 'underline' | 'pills';
-declare const NAV_ORIENTATION_DEFAULT: 'horizontal' | 'vertical';
-declare const DEFAULT_SIDE_NAV_TOOLTIP_POSITION = "right";
-
 interface TableOption {
     label: string;
     value: any;
@@ -3385,6 +3302,203 @@ interface TableDataChangeEvent {
     };
 }
 
+/**
+ * Maps a SmartForm field name to its corresponding API query-param key.
+ */
+interface FilterParamMap {
+    /** Field name as declared in sectionConfig.children (e.g. "country") */
+    formFieldName: string;
+    /** Actual query-param key sent to the table API (e.g. "currentCountryCode") */
+    apiParamKey: string;
+}
+/**
+ * Configuration for the left-hand filter panel (powered by SmartForm).
+ */
+interface FilterPanelConfig {
+    /** Full SmartForm JSON schema (entityType, sectionConfig, actionBarConfig, etc.) */
+    smartFormConfig: FormSchema;
+    /** Maps each form field to the API query-param that the table expects */
+    filterParamMapping: FilterParamMap[];
+    /**
+     * Optional default values pre-filled when the component opens AND restored on Clear Filter.
+     * Key = formFieldName, Value = the field value.
+     * When provided, the initial table load will include these params.
+     */
+    defaultValues?: Record<string, any>;
+    /**
+     * List of field names that should be rendered as disabled/read-only.
+     * The values are still used when building API params, but users cannot change them.
+     * Their values are preserved when Clear Filter is triggered.
+     */
+    disabledFields?: string[];
+    /**
+     * i18n key or literal text for the "Clear Filter" button.
+     * Defaults to 'COMMON.FILTER_TABLE.CLEAR_FILTER'.
+     */
+    clearFilterLabel?: string;
+    /**
+     * i18n key or literal text for the "Apply Filter" button.
+     * Defaults to 'COMMON.FILTER_TABLE.APPLY_FILTER'.
+     */
+    applyFilterLabel?: string;
+}
+/**
+ * Controls selection behaviour and bottom action bar labels.
+ */
+interface SelectionConfig {
+    /** Allow selecting multiple rows (true = checkbox per row, false = radio). */
+    multiSelect: boolean;
+    /**
+     * i18n token for the "X of Y users Selected" counter.
+     * Use placeholders {selected} and {total}.
+     * Example: "COMMON.FILTER_TABLE.SELECTION_COUNT"
+     */
+    selectionCountLabel: string;
+    /** i18n token (or literal text) for the primary submit button. */
+    submitButtonLabel: string;
+    /** i18n token (or literal text) for the secondary cancel/back button. */
+    cancelButtonLabel: string;
+}
+/**
+ * Top-level configuration object for FilterTableSelectorComponent.
+ */
+interface FilterTableSelectorConfig {
+    /** Dialog / modal heading. */
+    title?: string;
+    /** Left-panel filter form configuration. */
+    filterConfig: FilterPanelConfig;
+    /**
+     * Right-panel table configuration.
+     * Extends the standard SmartTable config; `selectable` should be true.
+     * `multiSelect` is controlled via selectionConfig.multiSelect.
+     */
+    tableConfig: FilterTableConfig;
+    /** Selection behaviour and bottom action bar labels. */
+    selectionConfig: SelectionConfig;
+}
+/**
+ * Extended TableConfig for FilterTableSelector — adds multiSelect support.
+ */
+interface FilterTableConfig extends TableConfig {
+    /**
+     * When true (and selectable=true), multiple rows can be selected simultaneously.
+     * When false, only one row can be selected at a time (radio behaviour).
+     */
+    multiSelect?: boolean;
+}
+
+declare class FilterTableSelectorComponent implements OnInit, OnChanges, OnDestroy {
+    private cdr;
+    private ngZone;
+    /** Full config object driven by consuming MFE JSON. */
+    config: FilterTableSelectorConfig;
+    /**
+     * Flat i18n labels map from the consuming MFE.
+     * Mirrors the pattern used by SmartFormComponent.
+     */
+    labels: Record<string, string>;
+    /**
+     * Pre-selected row identifiers.
+     * When provided, matching rows are pre-checked on first load and
+     * re-checked after each page navigation.
+     * Must be an array of row objects (the same shape returned by the API).
+     */
+    preSelectedRows: any[];
+    /** Emits the array of currently selected row objects on "Add / Submit". */
+    onSubmit: EventEmitter<any[]>;
+    /** Emits void on "Back / Cancel". */
+    onCancel: EventEmitter<void>;
+    /** A deep-copy of tableConfig with the current filter params baked-in. */
+    resolvedTableConfig: FilterTableConfig;
+    /** Current active filter params (merged from form submission). */
+    activeFilterParams: Record<string, string>;
+    /** The base API URL without any filter query params. */
+    private baseApiUrl;
+    /** All rows selected so far, tracked across pagination pages. */
+    selectedRows: any[];
+    /** Total rows currently loaded in the table (reported by SmartTable rowSelect). */
+    totalTableItems: number;
+    /** Serialised SmartForm JSON (with labels translated + disabled fields applied). */
+    resolvedFormJson: string;
+    /**
+     * Default values to prefill the SmartForm.
+     * Updated on each initialize() call and reset to config defaults on Clear Filter.
+     */
+    resolvedInitialValues: Record<string, any>;
+    /**
+     * Version counter — bumping this forces *ngIf to re-create the SmartForm
+     * component with fresh initial values (used by Clear Filter).
+     */
+    formVersion: number;
+    /** Whether the filter panel is visible (toggled on mobile, always visible on desktop). */
+    filterPanelVisible: boolean;
+    /**
+     * Tracks the live form values as the user changes fields.
+     * Updated via SmartForm's (valueChange) output.
+     * Used when the user clicks the "Apply Filter" button in the component.
+     */
+    currentFormValues: Record<string, any>;
+    private destroy$;
+    constructor(cdr: ChangeDetectorRef, ngZone: NgZone);
+    ngOnInit(): void;
+    ngOnChanges(changes: SimpleChanges): void;
+    ngOnDestroy(): void;
+    private initialize;
+    /**
+     * Serialises the SmartForm config JSON.
+     * Applies disabledFields from filterPanelConfig.
+     */
+    private buildFormJson;
+    /**
+     * Rebuilds resolvedTableConfig with the current activeFilterParams appended
+     * to the base API URL.
+     */
+    private applyFilterParamsToTable;
+    /**
+     * Converts a flat form-value map to API param key/value pairs
+     * using the configured filterParamMapping.
+     */
+    private buildFilterParams;
+    /**
+     * Called every time a form field value changes (SmartForm valueChange output).
+     * We track the current values so the component-level "Apply Filter" button
+     * can read them without relying on a form submit button inside the JSON config.
+     */
+    onFormValueChange(values: Record<string, any>): void;
+    /**
+     * Called when the user clicks the "Apply Filter" button rendered by the component.
+     * Builds API params from the tracked form values and reloads the table.
+     */
+    applyCurrentFilter(): void;
+    /**
+     * Clear Filter: resets form to default values (preserving disabled-field values),
+     * reloads the table with default params.
+     * The form is re-created via formVersion bump so SmartForm gets fresh initialValues.
+     */
+    onClearFilter(): void;
+    /**
+     * Called by SmartTable's (rowSelect) output.
+     * Merges page-level selection with the cross-page tracking set.
+     */
+    onRowSelect(globalSelection: any[]): void;
+    /**
+     * Syncs preSelectedRows into the local selectedRows (called when input changes).
+     */
+    private syncPreselection;
+    handleSubmit(): void;
+    handleCancel(): void;
+    translate(key: string): string;
+    get titleLabel(): string;
+    get submitButtonLabel(): string;
+    get cancelButtonLabel(): string;
+    get clearFilterButtonLabel(): string;
+    get applyFilterButtonLabel(): string;
+    get selectionCountText(): string;
+    get hasActiveFilters(): boolean;
+    static ɵfac: i0.ɵɵFactoryDeclaration<FilterTableSelectorComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<FilterTableSelectorComponent, "lib-filter-table-selector", never, { "config": { "alias": "config"; "required": false; }; "labels": { "alias": "labels"; "required": false; }; "preSelectedRows": { "alias": "preSelectedRows"; "required": false; }; }, { "onSubmit": "onSubmit"; "onCancel": "onCancel"; }, never, never, false, never>;
+}
+
 declare class SmartTableComponent implements OnInit, OnChanges, AfterViewInit, OnDestroy {
     private http;
     private router;
@@ -3417,6 +3531,11 @@ declare class SmartTableComponent implements OnInit, OnChanges, AfterViewInit, O
         row: any;
         column: string;
     }>;
+    /**
+     * Pre-selected row objects. These are tracked across pages.
+     * Matching incoming data rows (via rowIdField) will be checked automatically.
+     */
+    selectedRows: any[];
     /** Emitted in external-data mode when the user changes the sort column/direction. */
     sortChange: EventEmitter<TableDataChangeEvent>;
     /** Emitted in external-data mode when the user changes the page or page size. */
@@ -3436,7 +3555,6 @@ declare class SmartTableComponent implements OnInit, OnChanges, AfterViewInit, O
         [key: string]: any;
     };
     searchTerm: string;
-    selectedRows: any[];
     stickyColumnStyles: {
         [key: string]: any;
     };
@@ -3447,6 +3565,13 @@ declare class SmartTableComponent implements OnInit, OnChanges, AfterViewInit, O
         top: number;
         right: number;
     };
+    /** Items and row for the currently open dropdown — rendered in a portal outside the table. */
+    activeDropdownItems: any[] | null;
+    activeDropdownRow: any;
+    openFilterKey: string | null;
+    activeFilterLabels: {
+        [key: string]: string;
+    };
     deleteModalOpen: boolean;
     deleteModalConfig: any;
     private pendingDeleteAction;
@@ -3462,11 +3587,24 @@ declare class SmartTableComponent implements OnInit, OnChanges, AfterViewInit, O
     private setupResizeObserver;
     private observeHeaders;
     loadData(): void;
+    /**
+     * Syncs the locally loaded data set with the externally provided selectedRows.
+     * Marks 'selected' property on row objects to reflect checkbox state.
+     */
+    private syncSelection;
     onPageChange(page: number): void;
     onPageSizeChange(size: number): void;
     onSort(col: TableColumn): void;
     onSearch(event: Event): void;
     onFilterChange(key: string, event: Event): void;
+    private applyFilter;
+    toggleFilter(key: string, event: Event): void;
+    selectFilterOption(filter: any, opt: {
+        label: string;
+        value: any;
+    } | null): void;
+    getFilterDisplay(filter: any): string;
+    isFilterActive(filter: any): boolean;
     /**
      * Assembles the current table state into a `TableDataChangeEvent` object.
      * Emitted to the parent in external-data mode so it can fetch and supply new data.
@@ -3485,7 +3623,8 @@ declare class SmartTableComponent implements OnInit, OnChanges, AfterViewInit, O
     updateSelectedRows(): void;
     getCellValue(row: any, col: TableColumn): any;
     getBadgeClass(row: any, col: TableColumn): string;
-    getSortIcon(key: string): string;
+    getAscOpacity(key: string): number;
+    getDescOpacity(key: string): number;
     private replaceParams;
     private loadFilterOptions;
     private getValueByPath;
@@ -3494,10 +3633,47 @@ declare class SmartTableComponent implements OnInit, OnChanges, AfterViewInit, O
     get columnCount(): number;
     onColumnClick(row: any, col: TableColumn): void;
     private getHeaders;
-    toggleDropdown(id: string, event: Event): void;
+    toggleDropdown(id: string, event: Event, items: any[], row: any): void;
     closeDropdown(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<SmartTableComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<SmartTableComponent, "lib-smart-table", never, { "config": { "alias": "config"; "required": false; }; "tableData": { "alias": "tableData"; "required": false; }; "totalItemsCount": { "alias": "totalItemsCount"; "required": false; }; }, { "action": "action"; "topAction": "topAction"; "filterChange": "filterChange"; "rowSelect": "rowSelect"; "columnClick": "columnClick"; "sortChange": "sortChange"; "pageChange": "pageChange"; "searchChange": "searchChange"; }, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SmartTableComponent, "lib-smart-table", never, { "config": { "alias": "config"; "required": false; }; "tableData": { "alias": "tableData"; "required": false; }; "totalItemsCount": { "alias": "totalItemsCount"; "required": false; }; "selectedRows": { "alias": "selectedRows"; "required": false; }; }, { "action": "action"; "topAction": "topAction"; "filterChange": "filterChange"; "rowSelect": "rowSelect"; "columnClick": "columnClick"; "sortChange": "sortChange"; "pageChange": "pageChange"; "searchChange": "searchChange"; }, never, never, false, never>;
+}
+
+interface PaginationLabels {
+    items: string;
+    of: string;
+    perPage: string;
+}
+declare class PaginationComponent implements OnInit, OnChanges {
+    totalItems: number;
+    itemsPerPage: number;
+    currentPage: number;
+    pageSizeOptions: number[];
+    theme: 'theme-1' | 'theme-2';
+    labels: PaginationLabels;
+    pageChange: EventEmitter<number>;
+    itemsPerPageChange: EventEmitter<number>;
+    totalPages: number;
+    pages: (number | string)[];
+    startItem: number;
+    endItem: number;
+    constructor();
+    ngOnInit(): void;
+    ngOnChanges(changes: SimpleChanges): void;
+    calculatePagination(): void;
+    getVisiblePages(current: number, total: number): (number | string)[];
+    onPageChange(page: number | string): void;
+    onItemsPerPageChange(event: Event): void;
+    nextPage(): void;
+    prevPage(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<PaginationComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<PaginationComponent, "lib-pagination", never, { "totalItems": { "alias": "totalItems"; "required": false; }; "itemsPerPage": { "alias": "itemsPerPage"; "required": false; }; "currentPage": { "alias": "currentPage"; "required": false; }; "pageSizeOptions": { "alias": "pageSizeOptions"; "required": false; }; "theme": { "alias": "theme"; "required": false; }; "labels": { "alias": "labels"; "required": false; }; }, { "pageChange": "pageChange"; "itemsPerPageChange": "itemsPerPageChange"; }, never, never, false, never>;
+}
+
+declare class PaginationModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<PaginationModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<PaginationModule, [typeof PaginationComponent], [typeof i2$1.CommonModule], [typeof PaginationComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<PaginationModule>;
 }
 
 declare class SmartTableModule {
@@ -3506,6 +3682,141 @@ declare class SmartTableModule {
     static ɵinj: i0.ɵɵInjectorDeclaration<SmartTableModule>;
 }
 
+declare class FilterTableSelectorModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<FilterTableSelectorModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<FilterTableSelectorModule, [typeof FilterTableSelectorComponent], [typeof i2$1.CommonModule, typeof SmartFormModule, typeof SmartTableModule, typeof ButtonModule], [typeof FilterTableSelectorComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<FilterTableSelectorModule>;
+}
+
+declare class SharedUiModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<SharedUiModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<SharedUiModule, never, [typeof i2$1.CommonModule, typeof MaterialModule, typeof AlertModule, typeof ButtonModule, typeof ButtonDropdownModule, typeof ConfirmationModalModule, typeof FilterSidebarModule, typeof FilterModule, typeof SummaryCardModule, typeof ConfigurableFormModule, typeof FormComponentsModule, typeof SmartFormModule, typeof SideNavModule, typeof FormBuilderModule, typeof FilterTableSelectorModule], [typeof MaterialModule, typeof AlertModule, typeof ButtonModule, typeof ButtonDropdownModule, typeof ConfirmationModalModule, typeof FilterSidebarModule, typeof FilterModule, typeof SummaryCardModule, typeof ConfigurableFormModule, typeof FormComponentsModule, typeof SmartFormModule, typeof SideNavModule, typeof FormBuilderModule, typeof FilterTableSelectorModule]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<SharedUiModule>;
+}
+
+/**
+ * Utility functions for LocalStorage operations
+ */
+declare const getLocalStorageItem: (key: string) => string | null;
+declare const setLocalStorageItem: (key: string, value: string) => void;
+declare const removeLocalStorageItem: (key: string) => void;
+declare const clearLocalStorage: () => void;
+/**
+ * Utility functions for SessionStorage operations
+ */
+declare const getSessionStorageItem: (key: string) => string | null;
+declare const setSessionStorageItem: (key: string, value: string) => void;
+declare const removeSessionStorageItem: (key: string) => void;
+declare const clearSessionStorage: () => void;
+
+/**
+ * Utility functions for string manipulation
+ */
+declare class StringUtils {
+    /**
+     * Converts a string to camelCase.
+     * Example: "First Name" -> "firstName", "Profile Picture" -> "profilePicture"
+     */
+    static toCamelCase(str?: string): string;
+}
+
+/**
+ * Recursively translates the Configuration object using the provided labels map.
+ * This function processes:
+ * - Section Titles
+ * - Field Labels
+ * - Placeholders
+ * - Help Texts
+ * - Option Labels (for static options)
+ * - Repeater Labels (addLabel, repeaterItemLabel)
+ *
+ * @param config The FormConfig object to translate
+ * @param labelsMap A map of key-value pairs for translation (Flattened JSON)
+ * @returns A new FormConfig object with translated strings
+ */
+declare function translateConfig(config: any, labelsMap: any): any;
+
+/**
+ * Example: Basic Form Configuration
+ * This is a generic example for testing and demonstration purposes.
+ */
+declare const EXAMPLE_FORM_CONFIG: FormConfig;
+/**
+ * Example: Target Group Configuration
+ * Demonstrates composite fields for Age Group and Gender Split
+ */
+declare const TARGET_GROUP_CONFIG: FormConfig;
+
+declare const configurableForm_examples_d_EXAMPLE_FORM_CONFIG: typeof EXAMPLE_FORM_CONFIG;
+declare const configurableForm_examples_d_TARGET_GROUP_CONFIG: typeof TARGET_GROUP_CONFIG;
+declare namespace configurableForm_examples_d {
+  export {
+    configurableForm_examples_d_EXAMPLE_FORM_CONFIG as EXAMPLE_FORM_CONFIG,
+    configurableForm_examples_d_TARGET_GROUP_CONFIG as TARGET_GROUP_CONFIG,
+  };
+}
+
+interface NavStyleConfig {
+    width?: string;
+    backgroundColor?: string;
+    borderRadius?: string;
+    border?: string;
+    padding?: string;
+    gap?: string;
+    boxShadow?: string;
+    itemColor?: string;
+    itemRadius?: string;
+    itemPadding?: string;
+    fontSize?: string;
+    fontWeight?: string;
+    activeItemBg?: string;
+    activeItemColor?: string;
+    activeItemFontWeight?: string;
+    activeItemBorderColor?: string;
+    hoverItemBg?: string;
+    hoverItemColor?: string;
+    badgeBg?: string;
+    badgeColor?: string;
+}
+
+interface NavItem {
+    id: string | number;
+    label: string;
+    icon?: string;
+    badge?: string | number;
+    disabled?: boolean;
+}
+declare class NavComponent implements OnChanges {
+    items: NavItem[];
+    activeId: string | number | null;
+    variant: 'filled' | 'underline' | 'pills';
+    orientation: 'horizontal' | 'vertical';
+    styleConfig: NavStyleConfig;
+    selectionChange: EventEmitter<NavItem>;
+    ngOnChanges(changes: SimpleChanges): void;
+    get computedStyles(): {
+        [key: string]: string | undefined;
+    };
+    onItemClick(item: NavItem): void;
+    trackById(index: number, item: NavItem): string | number;
+    static ɵfac: i0.ɵɵFactoryDeclaration<NavComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<NavComponent, "lib-nav", never, { "items": { "alias": "items"; "required": false; }; "activeId": { "alias": "activeId"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; "orientation": { "alias": "orientation"; "required": false; }; "styleConfig": { "alias": "styleConfig"; "required": false; }; }, { "selectionChange": "selectionChange"; }, never, never, false, never>;
+}
+
+declare class NavModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<NavModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<NavModule, [typeof NavComponent], [typeof i2$1.CommonModule], [typeof NavComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<NavModule>;
+}
+
+declare const DEFAULT_ITEMS_PER_PAGE = 10;
+declare const DEFAULT_PAGE_SIZE_OPTIONS: number[];
+declare const PAGINATION_THEME_DEFAULT = "theme-1";
+declare const PAGINATION_THEME_DARK = "theme-2";
+declare const NAV_VARIANT_DEFAULT: 'filled' | 'underline' | 'pills';
+declare const NAV_ORIENTATION_DEFAULT: 'horizontal' | 'vertical';
+declare const DEFAULT_SIDE_NAV_TOOLTIP_POSITION = "right";
+
 declare function appendBaseUrlRecursively(obj: any, baseURL: string): void;
 
 declare class ValidationUtils {
@@ -3555,5 +3866,5 @@ declare class SnackbarModule {
     static ɵinj: i0.ɵɵInjectorDeclaration<SnackbarModule>;
 }
 
-export { AlertComponent, AlertModule, ButtonComponent, ButtonDropdownComponent, ButtonDropdownModule, ButtonModule, CheckboxComponent, ConfigurableFormComponent, configurableForm_examples_d as ConfigurableFormExamples, ConfigurableFormModule, ConfirmationModalComponent, ConfirmationModalModule, DEFAULT_ITEMS_PER_PAGE, DEFAULT_PAGE_SIZE_OPTIONS, DEFAULT_SIDE_NAV_TOOLTIP_POSITION, DatepickerComponent, DropdownComponent, ExpressionService, FieldConfiguratorComponent, FieldSelectionComponent, FilterComponent, FilterModule, FilterSidebarComponent, FilterSidebarModule, FormBuilderModule, FormComponentsModule, InputComponent, MaterialModule, NAV_ORIENTATION_DEFAULT, NAV_VARIANT_DEFAULT, NavComponent, NavModule, PAGINATION_THEME_DARK, PAGINATION_THEME_DEFAULT, PaginationComponent, PaginationModule, RadioComponent, SearchComponent, SharedUiModule, SideNavComponent, SideNavModule, SmartFormComponent, SmartFormController, smartForm_examples_d as SmartFormExamples, SmartFormModule, SmartTableComponent, SmartTableModule, SnackbarComponent, SnackbarModule, SnackbarService, StringUtils, SummaryCardComponent, SummaryCardModule, ToggleComponent, ValidationUtils, appendBaseUrlRecursively, clearLocalStorage, clearSessionStorage, getLocalStorageItem, getSessionStorageItem, removeLocalStorageItem, removeSessionStorageItem, setLocalStorageItem, setSessionStorageItem, translateConfig };
-export type { AlertLabels, AlertVariant, AttachmentConfig, ButtonLabels, ButtonVariant, CheckboxConfig, CheckboxLabels, CheckboxOption, ConfirmationModalConfig, DateConfig, DatePickerConfig, DatepickerLabels, DropdownAction, DropdownConfig, DropdownLabels, DropdownOption, EmailConfig, FieldConfig, FieldType, FilterChangeEvent, FilterConfig, FilterItem, FilterItemType, FilterOutput, FilterSearchConfig, FilterSidebarChangeEvent, FilterSidebarConfig, FilterSidebarOutput, FormConfig, FormField, FormOption, FormSchema, FormSection, GeneratedConfig, IconInput, InputConfig, InputLabels, InputType, JsonFieldConfig, JsonFormConfig, KeyType, LengthConstraint, LocationConfig, NavItem, NavStyleConfig, NestedStringConfig, NumberConfig, OptionConfig, OptionDTO, OptionItem, PaginationConfig, PaginationLabels, PhoneConfig, QueryParamsConfig, RadioConfig, RadioLabels, RadioOption, RangeConfig, RatingConfig, SearchConfig, SearchLabels, SectionConfig, SideNavItem, SideNavSection, SideNavStyleConfig, SnackbarConfig, SnackbarVariant, StepperConfig, SubmitConfig, SummaryCardConfig, SummaryCardLabels, SummaryCardMeta, TableAction, TableActionItem, TableColumn, TableConfig, TableDataChangeEvent, TableFilter, TableFilterChangeEvent, TableFilterColumn, TableFilterConfig, TableFilterItem, TableFilterLabels, TableFilterOutput, TableLabels, TableOption, TableTheme, TextConfig, ToggleConfig, ToggleLabels, UIConfig, UISubType, UIType, UploadedFile, ValidationResult, ValidationRules };
+export { AlertComponent, AlertModule, ButtonComponent, ButtonDropdownComponent, ButtonDropdownModule, ButtonModule, CheckboxComponent, ConfigurableFormComponent, configurableForm_examples_d as ConfigurableFormExamples, ConfigurableFormModule, ConfirmationModalComponent, ConfirmationModalModule, DEFAULT_ITEMS_PER_PAGE, DEFAULT_PAGE_SIZE_OPTIONS, DEFAULT_SIDE_NAV_TOOLTIP_POSITION, DatepickerComponent, DropdownComponent, ExpressionService, FieldConfiguratorComponent, FieldSelectionComponent, FilterComponent, FilterModule, FilterSidebarComponent, FilterSidebarModule, FilterTableSelectorComponent, FilterTableSelectorModule, FormBuilderModule, FormComponentsModule, InputComponent, MaterialModule, NAV_ORIENTATION_DEFAULT, NAV_VARIANT_DEFAULT, NavComponent, NavModule, PAGINATION_THEME_DARK, PAGINATION_THEME_DEFAULT, PaginationComponent, PaginationModule, RadioComponent, SearchComponent, SharedUiModule, SideNavComponent, SideNavModule, SmartFormComponent, SmartFormController, smartForm_examples_d as SmartFormExamples, SmartFormModule, SmartTableComponent, SmartTableModule, SnackbarComponent, SnackbarModule, SnackbarService, StringUtils, SummaryCardComponent, SummaryCardModule, ToggleComponent, ValidationUtils, appendBaseUrlRecursively, clearLocalStorage, clearSessionStorage, getLocalStorageItem, getSessionStorageItem, removeLocalStorageItem, removeSessionStorageItem, setLocalStorageItem, setSessionStorageItem, translateConfig };
+export type { AlertLabels, AlertVariant, AttachmentConfig, ButtonLabels, ButtonVariant, CheckboxConfig, CheckboxLabels, CheckboxOption, ConfirmationModalConfig, DateConfig, DatePickerConfig, DatepickerLabels, DropdownAction, DropdownConfig, DropdownLabels, DropdownOption, EmailConfig, FieldConfig, FieldType, FilterChangeEvent, FilterConfig, FilterItem, FilterItemType, FilterOutput, FilterPanelConfig, FilterParamMap, FilterSearchConfig, FilterSidebarChangeEvent, FilterSidebarConfig, FilterSidebarOutput, FilterTableConfig, FilterTableSelectorConfig, FormConfig, FormField, FormOption, FormSchema, FormSection, GeneratedConfig, IconInput, InputConfig, InputLabels, InputType, JsonFieldConfig, JsonFormConfig, KeyType, LengthConstraint, LocationConfig, NavItem, NavStyleConfig, NestedStringConfig, NumberConfig, OptionConfig, OptionDTO, OptionItem, PaginationConfig, PaginationLabels, PhoneConfig, QueryParamsConfig, RadioConfig, RadioLabels, RadioOption, RangeConfig, RatingConfig, SearchConfig, SearchLabels, SectionConfig, SelectionConfig, SideNavItem, SideNavSection, SideNavStyleConfig, SnackbarConfig, SnackbarVariant, StepperConfig, SubmitConfig, SummaryCardConfig, SummaryCardLabels, SummaryCardMeta, TableAction, TableActionItem, TableColumn, TableConfig, TableDataChangeEvent, TableFilter, TableFilterChangeEvent, TableFilterColumn, TableFilterConfig, TableFilterItem, TableFilterLabels, TableFilterOutput, TableLabels, TableOption, TableTheme, TextConfig, ToggleConfig, ToggleLabels, UIConfig, UISubType, UIType, UploadedFile, ValidationResult, ValidationRules };