@lesterarte/sefin-ui 0.0.21 → 0.0.25

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lesterarte/sefin-ui",
-  "version": "0.0.21",
+  "version": "0.0.25",
   "description": "Sefin Design System - A comprehensive Angular UI library based on Atomic Design and design tokens",
   "keywords": [
     "angular",

package/types/lesterarte-sefin-ui.d.ts

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, Injector, AfterViewInit, OnChanges, ElementRef, SimpleChanges, OnInit, OnDestroy, ChangeDetectorRef, NgZone } from '@angular/core';
+import { EventEmitter, Injector, AfterViewInit, OnChanges, ElementRef, SimpleChanges, OnInit, OnDestroy, ChangeDetectorRef, NgZone, TemplateRef } from '@angular/core';
 import { ControlValueAccessor, Validator, AbstractControl, ValidationErrors } from '@angular/forms';
 import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
 
@@ -640,6 +640,8 @@ declare class ButtonComponent {
     size: ButtonSize;
     /** Whether the button is disabled */
     disabled: boolean;
+    /** Whether the button should take full width of the container */
+    fullWidth: boolean;
     /** Button type. Options: 'button' | 'submit' | 'reset' */
     type: 'button' | 'submit' | 'reset';
     /** Additional CSS classes */
@@ -648,7 +650,7 @@ declare class ButtonComponent {
     onClick(event: MouseEvent): void;
     get buttonClasses(): string;
     static ɵfac: i0.ɵɵFactoryDeclaration<ButtonComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ButtonComponent, "sefin-button", never, { "variant": { "alias": "variant"; "required": false; }; "size": { "alias": "size"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "type": { "alias": "type"; "required": false; }; "class": { "alias": "class"; "required": false; }; }, { "clicked": "clicked"; }, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ButtonComponent, "sefin-button", never, { "variant": { "alias": "variant"; "required": false; }; "size": { "alias": "size"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "fullWidth": { "alias": "fullWidth"; "required": false; }; "type": { "alias": "type"; "required": false; }; "class": { "alias": "class"; "required": false; }; }, { "clicked": "clicked"; }, never, ["*"], true, never>;
 }
 
 type IconSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
@@ -948,10 +950,9 @@ declare class TypographyComponent {
     color: TypographyColor;
     lineHeight?: TypographyLineHeight;
     class: string;
-    text?: string;
     get typographyClasses(): string;
     static ɵfac: i0.ɵɵFactoryDeclaration<TypographyComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<TypographyComponent, "sefin-typography", never, { "variant": { "alias": "variant"; "required": false; }; "size": { "alias": "size"; "required": false; }; "weight": { "alias": "weight"; "required": false; }; "color": { "alias": "color"; "required": false; }; "lineHeight": { "alias": "lineHeight"; "required": false; }; "class": { "alias": "class"; "required": false; }; "text": { "alias": "text"; "required": false; }; }, {}, never, ["*", "*", "*", "*", "*", "*", "*", "*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TypographyComponent, "sefin-typography", never, { "variant": { "alias": "variant"; "required": false; }; "size": { "alias": "size"; "required": false; }; "weight": { "alias": "weight"; "required": false; }; "color": { "alias": "color"; "required": false; }; "lineHeight": { "alias": "lineHeight"; "required": false; }; "class": { "alias": "class"; "required": false; }; }, {}, never, ["*", "*", "*", "*", "*", "*", "*", "*"], true, never>;
 }
 
 type DividerOrientation = 'horizontal' | 'vertical';
@@ -1311,6 +1312,20 @@ declare class RateComponent {
     static ɵcmp: i0.ɵɵComponentDeclaration<RateComponent, "sefin-rate", never, { "value": { "alias": "value"; "required": false; }; "max": { "alias": "max"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "allowHalf": { "alias": "allowHalf"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "size": { "alias": "size"; "required": false; }; "showText": { "alias": "showText"; "required": false; }; "class": { "alias": "class"; "required": false; }; }, { "valueChange": "valueChange"; "hoverChange": "hoverChange"; }, never, never, true, never>;
 }
 
+type SpacerSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl';
+type SpacerOrientation = 'vertical' | 'horizontal';
+declare class SpacerComponent {
+    /** Size of the spacer. Options: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' */
+    size: SpacerSize;
+    /** Orientation of the spacer. Options: 'vertical' | 'horizontal' */
+    orientation: SpacerOrientation;
+    /** Additional CSS classes */
+    class: string;
+    get spacerClasses(): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SpacerComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SpacerComponent, "sefin-spacer", never, { "size": { "alias": "size"; "required": false; }; "orientation": { "alias": "orientation"; "required": false; }; "class": { "alias": "class"; "required": false; }; }, {}, never, never, true, never>;
+}
+
 declare class AccordionItemComponent {
     /** Title text for the accordion header */
     title: string;
@@ -1427,6 +1442,8 @@ declare class ButtonGroupComponent {
     groupVariant: ButtonGroupVariant;
     /** Whether the button group is disabled */
     disabled: boolean;
+    /** Whether buttons should take full width of the container */
+    fullWidth: boolean;
     /** Additional CSS classes */
     class: string;
     /** Event emitted when value changes (for segmented variant) */
@@ -1437,11 +1454,13 @@ declare class ButtonGroupComponent {
     buttonClick: EventEmitter<ButtonGroupOption>;
     get buttonGroupClasses(): string;
     isSelected(option: ButtonGroupOption): boolean;
-    onButtonClick(option: ButtonGroupOption): void;
+    onButtonClick(option: ButtonGroupOption, event?: MouseEvent): void;
+    handleButtonClick(option: ButtonGroupOption): (event: MouseEvent) => void;
     getButtonVariant(option: ButtonGroupOption): ButtonVariant;
+    getButtonClasses(option: ButtonGroupOption): string;
     sanitizeHtml(html: string | undefined): SafeHtml | string;
     static ɵfac: i0.ɵɵFactoryDeclaration<ButtonGroupComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ButtonGroupComponent, "sefin-button-group", never, { "options": { "alias": "options"; "required": false; }; "value": { "alias": "value"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "selectedValues": { "alias": "selectedValues"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; "size": { "alias": "size"; "required": false; }; "groupVariant": { "alias": "groupVariant"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "class": { "alias": "class"; "required": false; }; }, { "valueChange": "valueChange"; "selectedValuesChange": "selectedValuesChange"; "buttonClick": "buttonClick"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ButtonGroupComponent, "sefin-button-group", never, { "options": { "alias": "options"; "required": false; }; "value": { "alias": "value"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "selectedValues": { "alias": "selectedValues"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; "size": { "alias": "size"; "required": false; }; "groupVariant": { "alias": "groupVariant"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "fullWidth": { "alias": "fullWidth"; "required": false; }; "class": { "alias": "class"; "required": false; }; }, { "valueChange": "valueChange"; "selectedValuesChange": "selectedValuesChange"; "buttonClick": "buttonClick"; }, never, never, true, never>;
 }
 
 declare class CardComponent {
@@ -1545,6 +1564,98 @@ declare class DatepickerComponent implements OnInit, OnChanges, AfterViewInit, O
     static ɵcmp: i0.ɵɵComponentDeclaration<DatepickerComponent, "sefin-datepicker", never, { "value": { "alias": "value"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "size": { "alias": "size"; "required": false; }; "format": { "alias": "format"; "required": false; }; "mode": { "alias": "mode"; "required": false; }; "minDate": { "alias": "minDate"; "required": false; }; "maxDate": { "alias": "maxDate"; "required": false; }; "showTodayButton": { "alias": "showTodayButton"; "required": false; }; "showClearButton": { "alias": "showClearButton"; "required": false; }; "firstDayOfWeek": { "alias": "firstDayOfWeek"; "required": false; }; }, { "valueChange": "valueChange"; "dateSelected": "dateSelected"; }, never, never, true, never>;
 }
 
+type FormFieldVariant = 'outlined' | 'filled' | 'standard';
+type FormFieldSize = 'sm' | 'md' | 'lg';
+type FormFieldType = 'text' | 'email' | 'password' | 'number' | 'tel' | 'url' | 'search';
+declare class FormFieldComponent implements ControlValueAccessor, Validator, OnInit, AfterViewInit, OnDestroy {
+    private cdr;
+    inputRef?: ElementRef<HTMLInputElement>;
+    /** Label text for the field */
+    label: string;
+    /** FormField variant style. Options: 'outlined' | 'filled' | 'standard' */
+    variant: FormFieldVariant;
+    /** FormField size. Options: 'sm' | 'md' | 'lg' */
+    size: FormFieldSize;
+    /** Input type. Options: 'text' | 'email' | 'password' | 'number' | 'tel' | 'url' | 'search' */
+    type: FormFieldType;
+    /** Placeholder text */
+    placeholder: string;
+    /** Helper text shown below the input */
+    hint: string;
+    /** Error message to display */
+    errorMessage: string;
+    /** Whether the field is required */
+    required: boolean;
+    /** Whether the field is disabled */
+    disabled: boolean;
+    /** Whether the field is readonly */
+    readonly: boolean;
+    /** Maximum length of the input */
+    maxLength?: number;
+    /** Minimum length of the input */
+    minLength?: number;
+    /** Pattern for validation (regex string) */
+    pattern?: string;
+    /** Leading icon name */
+    leadingIcon?: string;
+    /** Trailing icon name */
+    trailingIcon?: string;
+    /** Whether to show character counter */
+    showCounter: boolean;
+    /** Autocomplete attribute */
+    autocomplete?: string;
+    /** Input name attribute */
+    name: string;
+    /** Input id attribute */
+    id: string;
+    /** Additional CSS classes */
+    class: string;
+    /** Custom validation function */
+    customValidator?: (value: string) => string | null;
+    /** Event emitted when the value changes */
+    valueChange: EventEmitter<string>;
+    /** Event emitted when the input is focused */
+    focused: EventEmitter<FocusEvent>;
+    /** Event emitted when the input is blurred */
+    blurred: EventEmitter<FocusEvent>;
+    /** Event emitted when trailing icon is clicked */
+    trailingIconClick: EventEmitter<MouseEvent>;
+    value: string;
+    isFocused: boolean;
+    hasError: boolean;
+    internalErrorMessage: string;
+    internalId: string;
+    private onChange;
+    private onTouched;
+    private destroy$;
+    private control?;
+    constructor(cdr: ChangeDetectorRef);
+    ngOnInit(): void;
+    ngAfterViewInit(): void;
+    ngOnDestroy(): void;
+    private generateIdIfNeeded;
+    get fieldId(): string;
+    get labelId(): string;
+    get inputId(): string;
+    get hintId(): string;
+    onInput(event: Event): void;
+    onFocus(event: FocusEvent): void;
+    onBlur(event: FocusEvent): void;
+    onTrailingIconClick(event: MouseEvent): void;
+    private validateField;
+    get displayError(): boolean;
+    get displayErrorMessage(): string;
+    get characterCount(): number;
+    get formFieldClasses(): string;
+    writeValue(value: string | null | undefined): void;
+    registerOnChange(fn: (value: string) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(isDisabled: boolean): void;
+    validate(control: AbstractControl): ValidationErrors | null;
+    static ɵfac: i0.ɵɵFactoryDeclaration<FormFieldComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<FormFieldComponent, "sefin-form-field", never, { "label": { "alias": "label"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; "size": { "alias": "size"; "required": false; }; "type": { "alias": "type"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "hint": { "alias": "hint"; "required": false; }; "errorMessage": { "alias": "errorMessage"; "required": false; }; "required": { "alias": "required"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "maxLength": { "alias": "maxLength"; "required": false; }; "minLength": { "alias": "minLength"; "required": false; }; "pattern": { "alias": "pattern"; "required": false; }; "leadingIcon": { "alias": "leadingIcon"; "required": false; }; "trailingIcon": { "alias": "trailingIcon"; "required": false; }; "showCounter": { "alias": "showCounter"; "required": false; }; "autocomplete": { "alias": "autocomplete"; "required": false; }; "name": { "alias": "name"; "required": false; }; "id": { "alias": "id"; "required": false; }; "class": { "alias": "class"; "required": false; }; "customValidator": { "alias": "customValidator"; "required": false; }; }, { "valueChange": "valueChange"; "focused": "focused"; "blurred": "blurred"; "trailingIconClick": "trailingIconClick"; }, never, never, true, never>;
+}
+
 type PaginationSize = 'sm' | 'md' | 'lg';
 type PaginationVariant = 'default' | 'compact';
 declare class PaginationComponent {
@@ -1682,7 +1793,256 @@ declare class TextareaComponent implements ControlValueAccessor, Validator, OnIn
     static ɵcmp: i0.ɵɵComponentDeclaration<TextareaComponent, "sefin-textarea", never, { "variant": { "alias": "variant"; "required": false; }; "size": { "alias": "size"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "hint": { "alias": "hint"; "required": false; }; "errorMessage": { "alias": "errorMessage"; "required": false; }; "required": { "alias": "required"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "maxLength": { "alias": "maxLength"; "required": false; }; "minLength": { "alias": "minLength"; "required": false; }; "pattern": { "alias": "pattern"; "required": false; }; "rows": { "alias": "rows"; "required": false; }; "cols": { "alias": "cols"; "required": false; }; "autoResize": { "alias": "autoResize"; "required": false; }; "minHeight": { "alias": "minHeight"; "required": false; }; "maxHeight": { "alias": "maxHeight"; "required": false; }; "showCounter": { "alias": "showCounter"; "required": false; }; "autocomplete": { "alias": "autocomplete"; "required": false; }; "name": { "alias": "name"; "required": false; }; "id": { "alias": "id"; "required": false; }; "class": { "alias": "class"; "required": false; }; "customValidator": { "alias": "customValidator"; "required": false; }; "value": { "alias": "value"; "required": false; }; }, { "valueChange": "valueChange"; "focused": "focused"; "blurred": "blurred"; }, never, never, true, never>;
 }
 
+/**
+ * Column type for table cells
+ */
+type TableColumnType = 'text' | 'number' | 'date' | 'badge' | 'actions';
+/**
+ * Text alignment options
+ */
+type TableColumnAlign = 'left' | 'center' | 'right';
+/**
+ * Sort direction
+ */
+type SortDirection = 'asc' | 'desc' | '';
+/**
+ * Table column definition
+ */
+interface TableColumn {
+    /** Unique key for the column (should match a property in data objects) */
+    key: string;
+    /** Column header label */
+    header: string;
+    /** Column type for formatting/rendering */
+    type?: TableColumnType;
+    /** Text alignment */
+    align?: TableColumnAlign;
+    /** Column width (CSS value, e.g., '100px', '20%') */
+    width?: string;
+    /** Whether column is sortable */
+    sortable?: boolean;
+    /** Whether column is sticky (e.g., first/last column) */
+    sticky?: boolean;
+    /** Whether column sticks to left or right when sticky */
+    stickyEnd?: boolean;
+    /** Custom cell template */
+    cellTemplate?: TemplateRef<any>;
+}
+/**
+ * Table density mode
+ */
+type TableDensity = 'compact' | 'comfortable';
+/**
+ * Selection mode
+ */
+type SelectionMode = 'single' | 'multiple';
+/**
+ * Page change event payload
+ */
+interface PageChangeEvent {
+    pageIndex: number;
+    pageSize: number;
+}
+/**
+ * Sort change event payload
+ */
+interface SortChangeEvent {
+    active: string;
+    direction: SortDirection;
+}
+
+/**
+ * Helper function to build displayed columns array including selection and actions
+ */
+declare function buildDisplayedColumns(columns: TableColumn[], selectable: boolean, hasActions: boolean): string[];
+declare class TableComponent implements OnInit, OnChanges {
+    private cdr;
+    /** Column definitions */
+    columns: TableColumn[];
+    /** Table data */
+    data: any[];
+    /** Property key used for tracking rows (default: 'id') */
+    trackByKey: string;
+    /** Loading state */
+    loading: boolean;
+    /** Empty state message */
+    emptyText: string;
+    /** Table density */
+    density: TableDensity;
+    /** Striped rows */
+    striped: boolean;
+    /** Row hover effect */
+    hover: boolean;
+    /** Enable row selection */
+    selectable: boolean;
+    /** Selection mode: 'single' or 'multiple' */
+    selectionMode: SelectionMode;
+    /** Enable pagination */
+    pagination: boolean;
+    /** Page size options */
+    pageSizeOptions: number[];
+    /** Current page size */
+    pageSize: number;
+    /** Total items (for server-side mode) */
+    total: number | undefined;
+    /** Enable sorting */
+    sort: boolean;
+    /** Server-side mode (don't slice data locally) */
+    serverSide: boolean;
+    /** Sticky header */
+    stickyHeader: boolean;
+    /** Header actions template slot */
+    headerActionsTemplate?: TemplateRef<any>;
+    /** Empty state icon template slot */
+    emptyIconTemplate?: TemplateRef<any>;
+    /** Row clicked event */
+    rowClicked: EventEmitter<any>;
+    /** Selection changed event */
+    selectionChanged: EventEmitter<any[]>;
+    /** Page changed event */
+    pageChanged: EventEmitter<PageChangeEvent>;
+    /** Sort changed event */
+    sortChanged: EventEmitter<SortChangeEvent>;
+    readonly selectedItems: i0.WritableSignal<any[]>;
+    readonly currentSortColumn: i0.WritableSignal<string>;
+    readonly currentSortDirection: i0.WritableSignal<SortDirection>;
+    readonly currentPage: i0.WritableSignal<number>;
+    readonly currentPageSize: i0.WritableSignal<number>;
+    readonly sortedData: i0.Signal<any[]>;
+    readonly paginatedData: i0.Signal<any[]>;
+    readonly displayedData: i0.Signal<any[]>;
+    readonly totalPages: i0.Signal<number>;
+    readonly isEmpty: i0.Signal<boolean>;
+    readonly hasActionsColumn: i0.Signal<boolean>;
+    readonly totalColspan: i0.Signal<number>;
+    readonly isAllSelected: i0.Signal<boolean>;
+    readonly isIndeterminate: i0.Signal<boolean>;
+    readonly sortIcons: {
+        readonly unsorted: "M3 4.5L6 1.5L9 4.5M3 7.5L6 10.5L9 7.5";
+        readonly ascending: "M3 7.5L6 4.5L9 7.5";
+        readonly descending: "M3 4.5L6 7.5L9 4.5";
+    };
+    constructor(cdr: ChangeDetectorRef);
+    ngOnInit(): void;
+    ngOnChanges(changes: SimpleChanges): void;
+    /**
+     * Validates component inputs and logs warnings for invalid configurations
+     * @private
+     */
+    private validateInputs;
+    trackByFn(index: number, item: any): any;
+    /**
+     * Gets the cell value from a row, supporting nested property paths (e.g., 'user.name')
+     * @param row - The row data object
+     * @param column - The column definition
+     * @returns The cell value or undefined if not found
+     */
+    getCellValue(row: any, column: TableColumn): any;
+    /**
+     * Formats a cell value based on its type
+     * @param value - The value to format
+     * @param type - The column type
+     * @param column - Optional column definition for additional formatting options
+     * @returns Formatted string representation
+     */
+    formatCellValue(value: any, type?: TableColumnType, column?: TableColumn): string;
+    /**
+     * Parses a value into a Date object
+     * @param value - The value to parse (Date, string, or number timestamp)
+     * @returns A Date object
+     */
+    private parseDate;
+    onRowClick(row: any): void;
+    /**
+     * Handles column sorting when header is clicked
+     * @param column - The column to sort by
+     * @param event - Optional keyboard event for accessibility
+     */
+    onSort(column: TableColumn, event?: KeyboardEvent): void;
+    onPageChange(page: number): void;
+    isSelected(row: any): boolean;
+    /**
+     * Toggles the selection state of a row
+     * @param checked - Whether the row should be selected
+     * @param row - The row to toggle selection for
+     */
+    toggleRowSelection(checked: boolean, row?: any): void;
+    /**
+     * Toggles selection for all rows on the current page
+     * @param checked - Whether all rows should be selected
+     */
+    toggleSelectAll(checked: boolean): void;
+    /**
+     * Gets the unique identifier for an item using the trackByKey
+     * @param item - The item to get the ID for
+     * @returns The item's ID or the item itself if no ID property exists
+     * @private
+     */
+    private getItemId;
+    /**
+     * Gets CSS classes for a column cell
+     * @param column - The column definition
+     * @returns Space-separated string of CSS classes
+     */
+    getColumnClass(column: TableColumn): string;
+    /**
+     * Gets CSS classes for the table element
+     * @returns Space-separated string of CSS classes
+     */
+    getTableClasses(): string;
+    /**
+     * Gets the width CSS value for a column
+     * @param column - The column definition
+     * @returns The width value or undefined
+     */
+    getColumnWidth(column: TableColumn): string | undefined;
+    /**
+     * Gets the appropriate sort icon path for a column
+     * @param column - The column to get the icon for
+     * @returns The SVG path string for the sort icon
+     */
+    getSortIconPath(column: TableColumn): string;
+    /**
+     * Determines if a column should show the unsorted icon
+     * @param column - The column to check
+     * @returns True if unsorted icon should be shown
+     */
+    showUnsortedIcon(column: TableColumn): boolean;
+    /**
+     * Determines if a column should show the ascending icon
+     * @param column - The column to check
+     * @returns True if ascending icon should be shown
+     */
+    showAscendingIcon(column: TableColumn): boolean;
+    /**
+     * Determines if a column should show the descending icon
+     * @param column - The column to check
+     * @returns True if descending icon should be shown
+     */
+    showDescendingIcon(column: TableColumn): boolean;
+    /**
+     * Gets the ARIA sort state for a column
+     * @param column - The column to get the sort state for
+     * @returns The ARIA sort value ('ascending', 'descending', or 'none')
+     */
+    getAriaSort(column: TableColumn): string;
+    /**
+     * Gets the ARIA label for a sortable column header
+     * @param column - The column to get the label for
+     * @returns The ARIA label string or null if not sortable
+     */
+    getSortAriaLabel(column: TableColumn): string | null;
+    /**
+     * Generates page numbers array for pagination display
+     * This method is currently not used in the template but kept for potential future use
+     * @returns Array of page numbers and ellipsis strings
+     */
+    getPageNumbers(): (number | string)[];
+    static ɵfac: i0.ɵɵFactoryDeclaration<TableComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TableComponent, "sefin-table", never, { "columns": { "alias": "columns"; "required": false; }; "data": { "alias": "data"; "required": false; }; "trackByKey": { "alias": "trackByKey"; "required": false; }; "loading": { "alias": "loading"; "required": false; }; "emptyText": { "alias": "emptyText"; "required": false; }; "density": { "alias": "density"; "required": false; }; "striped": { "alias": "striped"; "required": false; }; "hover": { "alias": "hover"; "required": false; }; "selectable": { "alias": "selectable"; "required": false; }; "selectionMode": { "alias": "selectionMode"; "required": false; }; "pagination": { "alias": "pagination"; "required": false; }; "pageSizeOptions": { "alias": "pageSizeOptions"; "required": false; }; "pageSize": { "alias": "pageSize"; "required": false; }; "total": { "alias": "total"; "required": false; }; "sort": { "alias": "sort"; "required": false; }; "serverSide": { "alias": "serverSide"; "required": false; }; "stickyHeader": { "alias": "stickyHeader"; "required": false; }; "headerActionsTemplate": { "alias": "headerActionsTemplate"; "required": false; }; "emptyIconTemplate": { "alias": "emptyIconTemplate"; "required": false; }; }, { "rowClicked": "rowClicked"; "selectionChanged": "selectionChanged"; "pageChanged": "pageChanged"; "sortChanged": "sortChanged"; }, never, ["[actions]", "[actions]"], true, never>;
+}
+
 declare const STYLES_PATH = "./styles/index.scss";
 
-export { AccordionItemComponent, AlertComponent, AutocompleteComponent, AvatarComponent, BORDER_RADIUS_TOKENS, BRAND_THEME, BadgeComponent, BreadcrumbsComponent, ButtonComponent, ButtonGroupComponent, COLOR_TOKENS, CardComponent, CheckboxComponent, ChipComponent, ContainerComponent, DARK_THEME, DESIGN_TOKENS, DatepickerComponent, DividerComponent, FabButtonComponent, IconButtonComponent, IconComponent, ImageComponent, LIGHT_THEME, LinkComponent, PaginationComponent, ProgressBarComponent, RadioComponent, RateComponent, SHADOW_TOKENS, SPACING_TOKENS, STYLES_PATH, SelectComponent, SpinnerComponent, StackComponent, SwitchComponent, TYPOGRAPHY_TOKENS, TabComponent, TagComponent, TextFieldComponent, TextareaComponent, ThemeLoader, ToastComponent, TooltipComponent, TypographyComponent };
-export type { AlertSize, AlertVariant, AutocompleteOption, AvatarSize, BadgeSize, BadgeVariant, BaseComponent, BorderRadiusToken, BreadcrumbItem, BreadcrumbSeparator, BreadcrumbSize, ButtonGroupOption, ButtonGroupSize, ButtonGroupVariant, ButtonSize, ButtonVariant, CardVariant, ChipSize, ChipVariant, ColorShade, ColorTokenName, ContainerSize, ContainerVariant, CustomTheme, DateFormat, DatePickerMode, DateRange, DividerOrientation, DividerVariant, FabSize, IconSize, ImageFit, ImageLoading, ImageRounded, InputSize, LinkSize, LinkVariant, PaginationSize, PaginationVariant, ProgressBarSize, ProgressBarVariant, RateIcon, RateSize, SelectOption, ShadowToken, SpacingToken, SpinnerSize, SpinnerVariant, TabSize, TabVariant, TagSize, TagVariant, TextFieldSize, TextFieldType, TextFieldVariant, TextareaSize, TextareaVariant, Theme, ThemeColors, ToastPosition, ToastVariant, TooltipPosition, TooltipTrigger, TypographyColor, TypographyLineHeight, TypographySize, TypographyToken, TypographyVariant, TypographyWeight };
+export { AccordionItemComponent, AlertComponent, AutocompleteComponent, AvatarComponent, BORDER_RADIUS_TOKENS, BRAND_THEME, BadgeComponent, BreadcrumbsComponent, ButtonComponent, ButtonGroupComponent, COLOR_TOKENS, CardComponent, CheckboxComponent, ChipComponent, ContainerComponent, DARK_THEME, DESIGN_TOKENS, DatepickerComponent, DividerComponent, FabButtonComponent, FormFieldComponent, IconButtonComponent, IconComponent, ImageComponent, LIGHT_THEME, LinkComponent, PaginationComponent, ProgressBarComponent, RadioComponent, RateComponent, SHADOW_TOKENS, SPACING_TOKENS, STYLES_PATH, SelectComponent, SpacerComponent, SpinnerComponent, StackComponent, SwitchComponent, TYPOGRAPHY_TOKENS, TabComponent, TableComponent, TagComponent, TextFieldComponent, TextareaComponent, ThemeLoader, ToastComponent, TooltipComponent, TypographyComponent, buildDisplayedColumns };
+export type { AlertSize, AlertVariant, AutocompleteOption, AvatarSize, BadgeSize, BadgeVariant, BaseComponent, BorderRadiusToken, BreadcrumbItem, BreadcrumbSeparator, BreadcrumbSize, ButtonGroupOption, ButtonGroupSize, ButtonGroupVariant, ButtonSize, ButtonVariant, CardVariant, ChipSize, ChipVariant, ColorShade, ColorTokenName, ContainerSize, ContainerVariant, CustomTheme, DateFormat, DatePickerMode, DateRange, DividerOrientation, DividerVariant, FabSize, FormFieldSize, FormFieldType, FormFieldVariant, IconSize, ImageFit, ImageLoading, ImageRounded, InputSize, LinkSize, LinkVariant, PageChangeEvent, PaginationSize, PaginationVariant, ProgressBarSize, ProgressBarVariant, RateIcon, RateSize, SelectOption, SelectionMode, ShadowToken, SortChangeEvent, SortDirection, SpacerOrientation, SpacerSize, SpacingToken, SpinnerSize, SpinnerVariant, TabSize, TabVariant, TableColumn, TableColumnAlign, TableColumnType, TableDensity, TagSize, TagVariant, TextFieldSize, TextFieldType, TextFieldVariant, TextareaSize, TextareaVariant, Theme, ThemeColors, ToastPosition, ToastVariant, TooltipPosition, TooltipTrigger, TypographyColor, TypographyLineHeight, TypographySize, TypographyToken, TypographyVariant, TypographyWeight };