@coreui/angular-pro 4.7.2 → 5.0.0-alpha.1

package/lib/nav/nav.component.d.ts

@@ -7,9 +7,9 @@ export declare class NavComponent {
     layout?: 'fill' | 'justified';
     /**
      * Set the nav variant to tabs or pills.
-     * @type {'tabs' | 'pills' | 'underline'}
+     * @type 'tabs' | 'pills' | 'underline' | 'underline-border'
      */
-    variant?: '' | 'tabs' | 'pills' | 'underline';
+    variant?: '' | 'tabs' | 'pills' | 'underline' | 'underline-border';
     get hostClasses(): any;
     static ɵfac: i0.ɵɵFactoryDeclaration<NavComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<NavComponent, "c-nav", never, { "layout": { "alias": "layout"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; }, {}, never, ["*"], true, never>;

package/lib/navbar/navbar.component.d.ts

@@ -3,6 +3,7 @@ import { BreakpointObserver } from '@angular/cdk/layout';
 import { CollapseDirective } from '../collapse';
 import { Colors } from '../coreui.types';
 import * as i0 from "@angular/core";
+import * as i1 from "../shared/theme.directive";
 export declare class NavbarComponent implements AfterContentInit {
     private hostElement;
     private breakpointObserver;
@@ -11,10 +12,6 @@ export declare class NavbarComponent implements AfterContentInit {
      * @type Colors
      */
     color?: Colors;
-    /**
-     * Sets if the color of text should be colored for a light or dark dark background.
-     */
-    colorScheme?: 'dark' | 'light';
     /**
      * Defines optional container wrapping children elements.
      */
@@ -35,5 +32,5 @@ export declare class NavbarComponent implements AfterContentInit {
     get breakpoint(): string | boolean;
     ngAfterContentInit(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<NavbarComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<NavbarComponent, "c-navbar", never, { "color": { "alias": "color"; "required": false; }; "colorScheme": { "alias": "colorScheme"; "required": false; }; "container": { "alias": "container"; "required": false; }; "expand": { "alias": "expand"; "required": false; }; "placement": { "alias": "placement"; "required": false; }; "role": { "alias": "role"; "required": false; }; }, {}, ["collapse"], ["*", "*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<NavbarComponent, "c-navbar", never, { "color": { "alias": "color"; "required": false; }; "container": { "alias": "container"; "required": false; }; "expand": { "alias": "expand"; "required": false; }; "placement": { "alias": "placement"; "required": false; }; "role": { "alias": "role"; "required": false; }; }, {}, ["collapse"], ["*", "*"], true, [{ directive: typeof i1.ThemeDirective; inputs: { "colorScheme": "colorScheme"; }; outputs: {}; }]>;
 }

package/lib/offcanvas/offcanvas/offcanvas.component.d.ts

@@ -1,10 +1,10 @@
-import { ElementRef, EventEmitter, OnDestroy, OnInit, Renderer2 } from '@angular/core';
 import { AnimationEvent } from '@angular/animations';
-import { BooleanInput } from '@angular/cdk/coercion';
+import { ElementRef, EventEmitter, OnDestroy, OnInit, Renderer2 } from '@angular/core';
 import { BreakpointObserver } from '@angular/cdk/layout';
 import { BackdropService } from '../../backdrop/backdrop.service';
 import { OffcanvasService } from '../offcanvas.service';
 import * as i0 from "@angular/core";
+import * as i1 from "../../shared/theme.directive";
 export declare class OffcanvasComponent implements OnInit, OnDestroy {
     #private;
     private document;
@@ -15,7 +15,6 @@ export declare class OffcanvasComponent implements OnInit, OnDestroy {
     private backdropService;
     private breakpointObserver;
     constructor(document: Document, platformId: any, renderer: Renderer2, hostElement: ElementRef, offcanvasService: OffcanvasService, backdropService: BackdropService, breakpointObserver: BreakpointObserver);
-    static ngAcceptInputType_scroll: BooleanInput;
     /**
      * Apply a backdrop on body while offcanvas is open.
      * @type boolean | 'static'
@@ -54,24 +53,24 @@ export declare class OffcanvasComponent implements OnInit, OnDestroy {
      * @default true
      */
     ariaModal: boolean;
-    /**
-     * Event triggered on visible change.
-     */
-    readonly visibleChange: EventEmitter<boolean>;
-    get scroll(): boolean;
     /**
      * Allow body scrolling while offcanvas is visible.
      * @type boolean
      * @default false
      */
-    set scroll(value: boolean);
-    get visible(): boolean;
+    scroll: boolean;
     /**
      * Toggle the visibility of offcanvas component.
      * @type boolean
      * @default false
      */
     set visible(value: boolean);
+    get visible(): boolean;
+    /**
+     * Event triggered on visible change.
+     * @type EventEmitter<boolean>
+     */
+    readonly visibleChange: EventEmitter<boolean>;
     get hostClasses(): any;
     get ariaHidden(): boolean | null;
     get tabIndex(): string | null;
@@ -90,5 +89,9 @@ export declare class OffcanvasComponent implements OnInit, OnDestroy {
     private setBackdrop;
     private layoutChangeSubscribe;
     static ɵfac: i0.ɵɵFactoryDeclaration<OffcanvasComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<OffcanvasComponent, "c-offcanvas", ["cOffcanvas"], { "backdrop": { "alias": "backdrop"; "required": false; }; "keyboard": { "alias": "keyboard"; "required": false; }; "placement": { "alias": "placement"; "required": false; }; "responsive": { "alias": "responsive"; "required": false; }; "id": { "alias": "id"; "required": false; }; "role": { "alias": "role"; "required": false; }; "ariaModal": { "alias": "ariaModal"; "required": false; }; "scroll": { "alias": "scroll"; "required": false; }; "visible": { "alias": "visible"; "required": false; }; }, { "visibleChange": "visibleChange"; }, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<OffcanvasComponent, "c-offcanvas", ["cOffcanvas"], { "backdrop": { "alias": "backdrop"; "required": false; }; "keyboard": { "alias": "keyboard"; "required": false; }; "placement": { "alias": "placement"; "required": false; }; "responsive": { "alias": "responsive"; "required": false; }; "id": { "alias": "id"; "required": false; }; "role": { "alias": "role"; "required": false; }; "ariaModal": { "alias": "ariaModal"; "required": false; }; "scroll": { "alias": "scroll"; "required": false; }; "visible": { "alias": "visible"; "required": false; }; }, { "visibleChange": "visibleChange"; }, never, ["*"], true, [{ directive: typeof i1.ThemeDirective; inputs: { "dark": "dark"; }; outputs: {}; }]>;
+    static ngAcceptInputType_keyboard: unknown;
+    static ngAcceptInputType_ariaModal: unknown;
+    static ngAcceptInputType_scroll: unknown;
+    static ngAcceptInputType_visible: unknown;
 }

package/lib/shared/public_api.d.ts

@@ -1,3 +1,4 @@
 export { SharedModule } from './shared.module';
 export { HtmlAttributesDirective } from './html-attr.directive';
 export { TemplateIdDirective } from './template-id.directive';
+export { ThemeDirective } from './theme.directive';

package/lib/shared/shared.module.d.ts

@@ -2,9 +2,10 @@ import { ModuleWithProviders } from '@angular/core';
 import * as i0 from "@angular/core";
 import * as i1 from "./html-attr.directive";
 import * as i2 from "./template-id.directive";
+import * as i3 from "./theme.directive";
 export declare class SharedModule {
     static forRoot(): ModuleWithProviders<SharedModule>;
     static ɵfac: i0.ɵɵFactoryDeclaration<SharedModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<SharedModule, never, [typeof i1.HtmlAttributesDirective, typeof i2.TemplateIdDirective], [typeof i1.HtmlAttributesDirective, typeof i2.TemplateIdDirective]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<SharedModule, never, [typeof i1.HtmlAttributesDirective, typeof i2.TemplateIdDirective, typeof i3.ThemeDirective], [typeof i1.HtmlAttributesDirective, typeof i2.TemplateIdDirective, typeof i3.ThemeDirective]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<SharedModule>;
 }

package/lib/shared/theme.directive.d.ts

@@ -0,0 +1,19 @@
+import * as i0 from "@angular/core";
+export declare class ThemeDirective {
+    #private;
+    /**
+     * Add dark theme attribute.
+     * @type 'dark' | 'light' | undefined
+     */
+    set colorScheme(scheme: 'dark' | 'light' | undefined);
+    /**
+     * Add dark theme attribute.
+     * @type boolean
+     */
+    set dark(darkTheme: boolean);
+    setTheme(theme?: string): void;
+    unsetTheme(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ThemeDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ThemeDirective, "[cTheme]", never, { "colorScheme": { "alias": "colorScheme"; "required": false; }; "dark": { "alias": "dark"; "required": false; }; }, {}, never, never, true, never>;
+    static ngAcceptInputType_dark: unknown;
+}

package/lib/sidebar/sidebar-nav/sidebar-nav.component.d.ts

@@ -18,6 +18,7 @@ export declare class SidebarNavGroupComponent implements OnInit, OnDestroy {
     item: any;
     dropdownMode: 'path' | 'none' | 'close';
     show?: boolean;
+    compact?: boolean;
     get hostClasses(): any;
     sidebarNav: ElementRef;
     navigationEndObservable: Observable<NavigationEnd>;
@@ -34,7 +35,8 @@ export declare class SidebarNavGroupComponent implements OnInit, OnDestroy {
     onAnimationStart($event: AnimationEvent): void;
     onAnimationDone($event: AnimationEvent): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<SidebarNavGroupComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<SidebarNavGroupComponent, "c-sidebar-nav-group", never, { "item": { "alias": "item"; "required": false; }; "dropdownMode": { "alias": "dropdownMode"; "required": false; }; "show": { "alias": "show"; "required": false; }; }, {}, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SidebarNavGroupComponent, "c-sidebar-nav-group", never, { "item": { "alias": "item"; "required": false; }; "dropdownMode": { "alias": "dropdownMode"; "required": false; }; "show": { "alias": "show"; "required": false; }; "compact": { "alias": "compact"; "required": false; }; }, {}, never, never, true, never>;
+    static ngAcceptInputType_compact: unknown;
 }
 export declare class SidebarNavComponent implements OnChanges {
     sidebar: SidebarComponent;
@@ -49,11 +51,12 @@ export declare class SidebarNavComponent implements OnChanges {
     groupItems?: boolean;
     compact?: boolean;
     get hostClasses(): any;
-    get sidebarNavGroupItemsClass(): boolean;
     role: string;
     navItemsArray: INavData[];
     ngOnChanges(changes: SimpleChanges): void;
     hideMobile(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<SidebarNavComponent, [{ optional: true; }, null, null, null, null, null]>;
     static ɵcmp: i0.ɵɵComponentDeclaration<SidebarNavComponent, "c-sidebar-nav", never, { "navItems": { "alias": "navItems"; "required": false; }; "dropdownMode": { "alias": "dropdownMode"; "required": false; }; "groupItems": { "alias": "groupItems"; "required": false; }; "compact": { "alias": "compact"; "required": false; }; }, {}, never, ["*"], true, never>;
+    static ngAcceptInputType_groupItems: unknown;
+    static ngAcceptInputType_compact: unknown;
 }

package/lib/sidebar/sidebar-toggler/sidebar-toggler.component.d.ts

@@ -2,6 +2,7 @@ import * as i0 from "@angular/core";
 export declare class SidebarTogglerComponent {
     role: string;
     sidebarTogglerClass: boolean;
+    get getStyles(): any;
     static ɵfac: i0.ɵɵFactoryDeclaration<SidebarTogglerComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<SidebarTogglerComponent, "c-sidebar-toggler", never, { "role": { "alias": "role"; "required": false; }; }, {}, never, never, true, never>;
 }

package/lib/smart-table/smart-table/smart-table.component.d.ts

@@ -1,22 +1,19 @@
-import { AfterContentInit, EventEmitter, IterableDiffers, KeyValueDiffers, OnChanges, QueryList, SimpleChanges, TemplateRef } from '@angular/core';
-import { BooleanInput, NumberInput } from '@angular/cdk/coercion';
+import { AfterContentInit, EventEmitter, IterableDiffers, KeyValueDiffers, OnChanges, QueryList, SimpleChanges, TemplateRef, WritableSignal } from '@angular/core';
 import { BehaviorSubject } from 'rxjs';
 import { ITable } from '../../table/table.type';
-import { IColumn, IColumnFilter, IColumnFilterValue, IItem, IItemInternal, ISmartTable, ISorter, ISorterValue, ITableFilter, ITableGroupProps, ItemsPerPageSelect } from '../smart-table.type';
+import { IColumn, IColumnFilter, IColumnFilterValue, IGroup, IItem, IItemInternal, ISmartTable, ISorter, ISorterValue, ITableFilter, ITableSectionProps, ItemsPerPageSelect, SortOrder } from '../smart-table.type';
 import { TemplateIdDirective } from '../../shared';
 import * as i0 from "@angular/core";
 export declare class SmartTableComponent implements ISmartTable, AfterContentInit, OnChanges {
     private iterableDiffers;
     private keyValueDiffers;
-    static ngAcceptInputType_activePage: NumberInput;
-    static ngAcceptInputType_cleaner: BooleanInput;
-    static ngAcceptInputType_clickableRows: BooleanInput;
-    static ngAcceptInputType_footer: BooleanInput;
-    static ngAcceptInputType_header: BooleanInput;
-    static ngAcceptInputType_itemsPerPage: NumberInput;
-    static ngAcceptInputType_pagination: BooleanInput;
-    static ngAcceptInputType_selectable: BooleanInput;
     constructor(iterableDiffers: IterableDiffers, keyValueDiffers: KeyValueDiffers);
+    readonly getColumnKey: (column: string | IColumn) => string;
+    readonly getTableDataCellClass: (column: IColumn, item: IItem) => {
+        [x: string]: boolean;
+    };
+    readonly getTableDataCellProps: (column: IColumn, item: IItem) => {};
+    readonly getTableDataCellStyles: (column: IColumn, item: IItem) => Partial<CSSStyleDeclaration>;
     readonly selectedAllSubject: BehaviorSubject<boolean | "indeterminate">;
     private readonly itemsDiffer;
     private readonly itemsFilteredDiffer;
@@ -25,28 +22,23 @@ export declare class SmartTableComponent implements ISmartTable, AfterContentIni
     set activePage(value: number);
     get activePage(): number;
     private _activePage;
-    set cleaner(value: boolean);
-    get cleaner(): boolean;
-    private _cleaner;
-    set clickableRows(value: boolean);
-    get clickableRows(): boolean;
-    private _clickableRows;
-    set columns(value: (string | IColumn)[]);
-    get columns(): (string | IColumn)[];
-    private _columns?;
+    cleaner: boolean;
+    clickableRows: boolean;
+    set columns(value: (string | IColumn | IGroup)[]);
+    get columns(): IColumn[];
+    columns$: WritableSignal<IColumn[]>;
+    columnGroups$: WritableSignal<IGroup[][]>;
+    showGroups$: import("@angular/core").Signal<boolean>;
     columnFilter?: boolean | IColumnFilter;
     set columnFilterValue(value: IColumnFilterValue);
     get columnFilterValue(): IColumnFilterValue;
     private _columnFilterValue;
     columnSorter?: boolean | ISorter;
-    set footer(value: boolean);
-    get footer(): boolean;
-    private _footer;
-    set header(value: boolean);
-    get header(): boolean;
-    private _header;
+    footer: boolean;
+    header: boolean;
     set items(value: IItem[]);
     get items(): IItem[];
+    items$: WritableSignal<IItemInternal[]>;
     private _items;
     set itemsPerPage(value: number);
     get itemsPerPage(): number;
@@ -56,15 +48,11 @@ export declare class SmartTableComponent implements ISmartTable, AfterContentIni
     itemsPerPageSelect?: boolean | ItemsPerPageSelect;
     loading?: boolean;
     noItemsLabel: string | TemplateRef<any>;
-    set pagination(value: boolean);
-    get pagination(): boolean;
-    private _pagination;
+    pagination: boolean;
     set selectable(value: boolean);
     get selectable(): boolean;
     private _selectable;
-    set selectAll(value: boolean);
-    get selectAll(): boolean;
-    private _selectAll;
+    selectAll: boolean;
     set sorterValue(value: ISorterValue);
     get sorterValue(): ISorterValue;
     private _sorterValue;
@@ -76,9 +64,9 @@ export declare class SmartTableComponent implements ISmartTable, AfterContentIni
     set tableFilterValue(value: string);
     get tableFilterValue(): string;
     private _tableFilterValue;
-    tableBodyProps?: ITableGroupProps;
-    tableFootProps?: ITableGroupProps;
-    tableHeadProps?: ITableGroupProps;
+    tableBodyProps?: ITableSectionProps;
+    tableFootProps?: ITableSectionProps;
+    tableHeadProps?: ITableSectionProps;
     tableProps?: ITable;
     readonly selectedItemsChange: EventEmitter<IItem[]>;
     readonly sorterValueChange: EventEmitter<ISorterValue>;
@@ -105,9 +93,8 @@ export declare class SmartTableComponent implements ISmartTable, AfterContentIni
     get firstItemOnActivePageIndex(): number;
     get itemsOnActivePage(): IItemInternal[];
     get currentItems(): IItemInternal[];
-    get genCols(): string[];
-    get rawColumnNames(): string[];
-    get itemsDataColumns(): string[];
+    rawColumnNames$: import("@angular/core").Signal<string[]>;
+    itemsDataColumns$: import("@angular/core").Signal<string[]>;
     get sortedItems(): IItemInternal[];
     get tableFilterEvent(): 'change' | 'input';
     private _columnFiltered;
@@ -118,9 +105,10 @@ export declare class SmartTableComponent implements ISmartTable, AfterContentIni
     handleSortChange($event: {
         columnKey: string;
         index: number;
+        order?: SortOrder;
     }): void;
     isSortable(i: number): boolean | undefined;
-    handleSorterChange(column: string, index: number): void;
+    handleSorterChange(column: string, index: number, order?: SortOrder): void;
     setActivePage($event: number): void;
     handleColumnFilterChange($event: any): void;
     handleTableFilterChange($event: {
@@ -131,18 +119,6 @@ export declare class SmartTableComponent implements ISmartTable, AfterContentIni
     handleItemsPerPageChange(value: number): void;
     handleRowChecked($event: Event, item: IItemInternal): void;
     handleSelectAllChange($event: any): void;
-    tableDataCellProps(item: IItem, colName: string): {
-        active?: boolean | undefined;
-        align?: "top" | "middle" | "bottom" | undefined;
-        color?: string | undefined;
-        _attributes?: {
-            [key: string]: any;
-        } | undefined;
-    } | undefined;
-    tableDataCellClasses(item: IItem, colName: string): string | string[] | Set<string> | {
-        [klass: string]: any;
-    } | undefined;
-    getColumnName($event: MouseEvent): string;
     handleRowClick(param: {
         $event: MouseEvent;
         item: IItemInternal;
@@ -151,4 +127,13 @@ export declare class SmartTableComponent implements ISmartTable, AfterContentIni
     ngOnChanges(changes: SimpleChanges): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<SmartTableComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<SmartTableComponent, "c-smart-table", ["cSmartTable"], { "activePage": { "alias": "activePage"; "required": false; }; "cleaner": { "alias": "cleaner"; "required": false; }; "clickableRows": { "alias": "clickableRows"; "required": false; }; "columns": { "alias": "columns"; "required": false; }; "columnFilter": { "alias": "columnFilter"; "required": false; }; "columnFilterValue": { "alias": "columnFilterValue"; "required": false; }; "columnSorter": { "alias": "columnSorter"; "required": false; }; "footer": { "alias": "footer"; "required": false; }; "header": { "alias": "header"; "required": false; }; "items": { "alias": "items"; "required": false; }; "itemsPerPage": { "alias": "itemsPerPage"; "required": false; }; "itemsPerPageLabel": { "alias": "itemsPerPageLabel"; "required": false; }; "itemsPerPageOptions": { "alias": "itemsPerPageOptions"; "required": false; }; "itemsPerPageSelect": { "alias": "itemsPerPageSelect"; "required": false; }; "loading": { "alias": "loading"; "required": false; }; "noItemsLabel": { "alias": "noItemsLabel"; "required": false; }; "pagination": { "alias": "pagination"; "required": false; }; "selectable": { "alias": "selectable"; "required": false; }; "selectAll": { "alias": "selectAll"; "required": false; }; "sorterValue": { "alias": "sorterValue"; "required": false; }; "tableFilter": { "alias": "tableFilter"; "required": false; }; "tableFilterLabel": { "alias": "tableFilterLabel"; "required": false; }; "tableFilterPlaceholder": { "alias": "tableFilterPlaceholder"; "required": false; }; "tableFilterValue": { "alias": "tableFilterValue"; "required": false; }; "tableBodyProps": { "alias": "tableBodyProps"; "required": false; }; "tableFootProps": { "alias": "tableFootProps"; "required": false; }; "tableHeadProps": { "alias": "tableHeadProps"; "required": false; }; "tableProps": { "alias": "tableProps"; "required": false; }; }, { "selectedItemsChange": "selectedItemsChange"; "sorterValueChange": "sorterValueChange"; "activePageChange": "activePageChange"; "itemsPerPageChange": "itemsPerPageChange"; "rowClick": "rowClick"; "columnFilterValueChange": "columnFilterValueChange"; "filteredItemsChange": "filteredItemsChange"; "tableFilterValueChange": "tableFilterValueChange"; }, ["columnTemplates"], ["[customHeader]"], true, never>;
+    static ngAcceptInputType_activePage: unknown;
+    static ngAcceptInputType_cleaner: unknown;
+    static ngAcceptInputType_clickableRows: unknown;
+    static ngAcceptInputType_footer: unknown;
+    static ngAcceptInputType_header: unknown;
+    static ngAcceptInputType_itemsPerPage: unknown;
+    static ngAcceptInputType_pagination: unknown;
+    static ngAcceptInputType_selectable: unknown;
+    static ngAcceptInputType_selectAll: unknown;
 }

package/lib/smart-table/smart-table-head/smart-table-column-label.pipe.d.ts

@@ -3,7 +3,6 @@ import { IColumn } from '../smart-table.type';
 import * as i0 from "@angular/core";
 export declare class SmartTableColumnLabelPipe implements PipeTransform {
     transform(column: IColumn | string, ...args: unknown[]): unknown;
-    prettifyName(name: string): string;
     static ɵfac: i0.ɵɵFactoryDeclaration<SmartTableColumnLabelPipe, never>;
     static ɵpipe: i0.ɵɵPipeDeclaration<SmartTableColumnLabelPipe, "columnLabel", true>;
 }

package/lib/smart-table/smart-table-head/smart-table-head.component.d.ts

@@ -1,21 +1,31 @@
-import { EventEmitter, OnInit, TemplateRef } from '@angular/core';
+import { EventEmitter, OnInit, TemplateRef, WritableSignal } from '@angular/core';
 import { BehaviorSubject } from 'rxjs';
-import { IColumn, IColumnFilter, IColumnFilterValue, ISorter, ISorterValue } from '../smart-table.type';
+import { IColumn, IColumnFilter, IColumnFilterValue, IGroup, ISorter, ISorterValue, SortOrder } from '../smart-table.type';
 import { Colors } from '../../coreui.types';
 import * as i0 from "@angular/core";
 export declare class SmartTableHeadComponent implements OnInit {
     #private;
     constructor();
+    protected readonly getTableHeaderCellStyles: (column: IColumn, columnSorter: boolean | ISorter | undefined) => Partial<CSSStyleDeclaration>;
+    protected readonly getTableHeaderCellProps: (column: string | IColumn) => {
+        [key: string]: any;
+    };
+    protected readonly getTableHeaderCellClass: (column: IColumn) => {
+        [x: string]: boolean;
+    };
     columnFilter?: boolean | IColumnFilter;
     columnFilterState: IColumnFilterValue;
     columnSorter?: boolean | ISorter;
     component?: string;
-    columns?: (IColumn | string)[];
+    set columns(value: (IColumn | IGroup)[] | undefined);
+    get columns(): (IColumn | IGroup)[] | undefined;
+    set columnGroups(value: IGroup[][]);
+    columnGroups$: WritableSignal<IGroup[][]>;
     selectable?: boolean;
-    set selectAll(value: boolean);
-    get selectAll(): boolean;
+    selectAll: boolean;
     set selectedAll(value: boolean | 'indeterminate');
     get selectedAll(): boolean | 'indeterminate';
+    showGroups: boolean;
     sorterValue?: ISorterValue;
     set columnFilterTemplates(value: any);
     get columnFilterTemplates(): any;
@@ -30,14 +40,11 @@ export declare class SmartTableHeadComponent implements OnInit {
         tfoot: boolean;
     };
     ngOnInit(): void;
-    tableHeaderCellProps(column: IColumn | string): {
-        [key: string]: any;
-    };
     tableHeaderCellColor(column: IColumn | string): Colors;
-    tableHeaderCellStyles(column: IColumn | string): any;
     columnKey(column: IColumn | string): string;
     getColumnSorterState(column: IColumn | string): string | number;
-    handleSortClick(column: IColumn | string, i: number): void;
+    handleSortClick(column: IColumn | string, i: number, order?: SortOrder): void;
+    handleSortKeyDown($event: KeyboardEvent, column: IColumn | string, i: number): void;
     columnFilterEnabled(column: IColumn | string): boolean | ((column: import("../smart-table.type").IItem, value: string) => boolean);
     columnSorterEnabled(column: IColumn | string): boolean | ((a: import("../smart-table.type").IItem, b: import("../smart-table.type").IItem) => number);
     handleColumnFilterValueChange($event: {
@@ -48,6 +55,9 @@ export declare class SmartTableHeadComponent implements OnInit {
     handleSelectAllChecked($event: Event): void;
     getColumnFilter(column: IColumn | string): string;
     get columnFilterEvent(): 'change' | 'input';
+    getAriaSort(column: IColumn | string): "ascending" | "descending" | null;
     static ɵfac: i0.ɵɵFactoryDeclaration<SmartTableHeadComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<SmartTableHeadComponent, "c-smart-table-head", never, { "columnFilter": { "alias": "columnFilter"; "required": false; }; "columnFilterState": { "alias": "columnFilterState"; "required": false; }; "columnSorter": { "alias": "columnSorter"; "required": false; }; "component": { "alias": "component"; "required": false; }; "columns": { "alias": "columns"; "required": false; }; "selectable": { "alias": "selectable"; "required": false; }; "selectAll": { "alias": "selectAll"; "required": false; }; "selectedAll": { "alias": "selectedAll"; "required": false; }; "sorterValue": { "alias": "sorterValue"; "required": false; }; "columnFilterTemplates": { "alias": "columnFilterTemplates"; "required": false; }; "summaryRowTemplate": { "alias": "summaryRowTemplate"; "required": false; }; }, { "columnFilterStateChange": "columnFilterStateChange"; "sorterStateChange": "sorterStateChange"; "selectAllChange": "selectAllChange"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SmartTableHeadComponent, "c-smart-table-head", never, { "columnFilter": { "alias": "columnFilter"; "required": false; }; "columnFilterState": { "alias": "columnFilterState"; "required": false; }; "columnSorter": { "alias": "columnSorter"; "required": false; }; "component": { "alias": "component"; "required": false; }; "columns": { "alias": "columns"; "required": false; }; "columnGroups": { "alias": "columnGroups"; "required": false; }; "selectable": { "alias": "selectable"; "required": false; }; "selectAll": { "alias": "selectAll"; "required": false; }; "selectedAll": { "alias": "selectedAll"; "required": false; }; "showGroups": { "alias": "showGroups"; "required": false; }; "sorterValue": { "alias": "sorterValue"; "required": false; }; "columnFilterTemplates": { "alias": "columnFilterTemplates"; "required": false; }; "summaryRowTemplate": { "alias": "summaryRowTemplate"; "required": false; }; }, { "columnFilterStateChange": "columnFilterStateChange"; "sorterStateChange": "sorterStateChange"; "selectAllChange": "selectAllChange"; }, never, never, true, never>;
+    static ngAcceptInputType_selectAll: unknown;
+    static ngAcceptInputType_showGroups: unknown;
 }

package/lib/smart-table/smart-table.type.d.ts

@@ -1,4 +1,4 @@
-import { Colors } from '../coreui.types';
+import { Colors, NgCssClass } from '../coreui.types';
 import { TemplateRef } from '@angular/core';
 import { ITable, ITableElementProps, ITableRowCellProps } from '../table/table.type';
 export interface ISmartTable {
@@ -42,7 +42,7 @@ export interface ISmartTable {
      * Object: item is object with following keys available as column configuration:
      * - key (required)(String) - define column name equal to item key.
      * - label (String) - define visible label of column. If not defined, label will be generated automatically based on column name, by converting kebab-case and snake_case to individual words and capitalization of each word.
-     * - _classes (String/Array/Object) - adds classes to all cels in column
+     * - _classes (String/Array/Object) - adds classes to all cells in a column
      * - _style (String/Array/Object) - adds styles to the column header (useful for defining widths)
      * - sorter (Boolean) - disables sorting of the column when set to false
      * - filter (Boolean) - removes filter from column when set to false.
@@ -64,7 +64,7 @@ export interface ISmartTable {
      */
     footer?: boolean;
     /**
-     * Set to false to remove table header.
+     * Set false to remove table header.
      * @default true
      */
     header?: boolean;
@@ -72,7 +72,7 @@ export interface ISmartTable {
      * Array of objects, where each object represents one item - row in table. Additionally, you can add style classes to each row by passing them by '_classes' key and to single cell by '_cellClasses'.
      *
      * Example item:
-     * { name: 'John' , age: 12, _props: { color: 'success' }, _cellProps: { age: { className: 'fw-bold'}}}
+     * { name: 'John' , age: 12, _props: { color: 'success' }, _cellProps: { age: { class: 'fw-bold'}}}
      * For column generation description see columns prop.
      * @type Array<IItem>
      */
@@ -87,21 +87,17 @@ export interface ISmartTable {
      * Label for items per page selector.
      * @default 'Items per page:'
      * @type string
-     * todo or remove?
      */
     itemsPerPageLabel?: string;
     /**
      * Items per page selector options.
      * @default [5, 10, 20, 50]
      * @type number[]
-     * todo or remove?
      */
     itemsPerPageOptions?: number[];
     /**
      * Adds select element over table, which is used for control items per page in pagination.
      * If you want to customize this element, pass an object with optional values:
-     * - label (String) - replaces default label text
-     * - values (Array) - custom array of pagination values
      * - external (Boolean) - disables automatic 'itemsPerPage' change (use to change pages externally by 'pagination-change' event).
      */
     itemsPerPageSelect?: boolean | ItemsPerPageSelect;
@@ -130,7 +126,7 @@ export interface ISmartTable {
      */
     /**
      * Scoped columns.
-     * @type ScopedColumns
+     // * @type ScopedColumns
      * todo or remove?
      */
     /**
@@ -164,15 +160,15 @@ export interface ISmartTable {
      */
     sortingIconDescending?: TemplateRef<any>;
     /**
-     * Properties to `CTableBody` component.
+     * Properties to `TableBody` component.
      * @link https://coreui.io/angular/docs/components/table/#ctablebody
-     * todo or remove?
      */
+    tableBodyProps?: ITableSectionProps;
     /**
-     * Properties to `CTableFoot` component.
+     * Properties to `TableFoot` component.
      * @link https://coreui.io/angular/docs/components/table/#ctablefoot
-     * todo or remove?
      */
+    tableFootProps?: ITableSectionProps;
     /**
      * When set, displays table filter above table, allowing filtering by specific column.
      *
@@ -203,14 +199,19 @@ export interface ISmartTable {
     /**
      * Properties to `CTableHead` component.
      * @link https://coreui.io/angular/docs/components/table/#ctablehead
-     * todo or remove?
      */
+    tableHeadProps?: ITableSectionProps;
     /**
      * Properties to `CTable` component.
      * @link https://coreui.io/angular/docs/components/table/#ctable
      */
     tableProps?: ITable;
 }
+export interface ITableSectionProps extends ITableElementProps {
+    align?: 'bottom' | 'middle' | 'top';
+    color?: Colors;
+    attributes?: Partial<HTMLTableSectionElement>;
+}
 export interface IColumnFilter {
     lazy?: boolean;
     external?: boolean;
@@ -219,15 +220,32 @@ export interface IColumnFilterValue {
     [key: string]: any;
 }
 export interface IColumn {
+    children?: IColumn[];
     filter?: boolean | ((column: IItem, value: string) => boolean);
-    label?: string;
+    group?: string;
     key: string;
+    label?: string;
     sorter?: boolean | ((a: IItem, b: IItem) => number);
-    _style?: any;
+    _attr?: Partial<HTMLTableCellElement>;
+    _style?: Partial<CSSStyleDeclaration>;
     _props?: ITableHeaderCellProps;
-    _classes?: string | string[] | Set<string> | {
-        [klass: string]: any;
-    };
+    _classes?: NgCssClass;
+    _colAttr?: Partial<HTMLTableColElement>;
+    _colStyle?: Partial<CSSStyleDeclaration>;
+    _colProps?: ITableRowCellProps;
+    _colClass?: NgCssClass;
+}
+export interface IGroup {
+    children?: IGroup[] | IColumn[];
+    colspan?: number;
+    deep?: number;
+    group?: string;
+    key: string;
+    label?: string;
+    _attr?: Partial<HTMLTableCellElement>;
+    _class?: NgCssClass;
+    _props?: ITableHeaderCellProps;
+    _style?: Partial<CSSStyleDeclaration>;
 }
 export interface ITableHeaderCellProps {
     /**
@@ -243,26 +261,27 @@ export interface ISorter {
     external?: boolean;
 }
 export interface IItem {
+    _attr?: Partial<HTMLTableRowElement>;
+    _class?: NgCssClass;
     _props?: ITableRowCellProps;
-    _cellProps?: ITableCellProps;
+    _style?: Partial<CSSStyleDeclaration>;
+    _cellAttr?: ITableCellProps<HTMLTableCellElement>;
+    _cellClass?: ITableCellProps<NgCssClass>;
+    _cellProps?: ITableCellProps<ITableRowCellProps>;
+    _cellStyle?: ITableCellProps<CSSStyleDeclaration>;
     _selected?: boolean;
     _selectable?: boolean;
     [key: string]: number | string | any;
 }
-export interface ITableCellProps {
-    _all?: ITableRowCellProps;
-    _attributes?: {
-        [key: string]: any;
-    };
-    [key: string]: ITableRowCellProps | undefined;
+export interface ITableCellProps<T> {
+    _all?: Partial<T>;
+    [key: string]: Partial<T> | undefined;
 }
 export interface IItemInternal extends IItem {
-    _id?: number;
+    ___id?: number;
 }
 export interface ItemsPerPageSelect {
     external?: boolean;
-    label?: string;
-    values?: Array<number>;
 }
 export interface ISorterValue {
     column?: string;
@@ -275,8 +294,4 @@ export interface ITableFilter {
     placeholder?: string;
     value?: string | number;
 }
-export interface ITableGroupProps extends ITableElementProps {
-    attributes?: {
-        [key: string]: any;
-    };
-}
+export type SortOrder = 'asc' | 'desc' | 0 | undefined;

package/lib/smart-table/smart-table.utils.d.ts

@@ -0,0 +1,29 @@
+import { IColumn, IGroup, IItem, ISorter } from './smart-table.type';
+export declare const getClickedColumnName: (target: HTMLTextAreaElement, columnNames: string[], selectable: boolean) => string;
+export declare const getColumnKey: (column: IColumn | string) => string;
+export declare const getColumnLabel: (column: IColumn | string) => string;
+export declare const getColumnName: (column: IColumn | string) => string;
+export declare const getColumnNames: (columns: (string | IColumn)[] | undefined, items: IItem[]) => string[];
+export declare const getColumns: (_columns: (IColumn | IGroup)[]) => (IColumn)[];
+export declare const countColumns: (columns: IColumn[], counter?: number) => number;
+export declare const getColumnGroups: (columns: (string | IColumn)[] | undefined) => IGroup[][];
+export declare const getColumnNamesFromItems: (items: IItem[]) => string[];
+export declare const getColumnValues: (items: IItem[], key: string) => any[];
+export declare const convertNgClassToObj: (value: string | Set<string> | string[] | {
+    [klass: string]: any;
+} | null | undefined) => {
+    [klass: string]: boolean;
+};
+export declare const getTableDataCellClass: (column: IColumn, item: IItem) => {
+    [x: string]: boolean;
+};
+export declare const getTableDataCellProps: (column: IColumn, item: IItem) => {};
+export declare const getTableDataCellStyles: (column: IColumn, item: IItem) => Partial<CSSStyleDeclaration>;
+export declare const getTableHeaderCellProps: (column: IColumn | string) => {
+    [key: string]: any;
+};
+export declare const getTableHeaderCellClass: (column: IColumn) => {
+    [x: string]: boolean;
+};
+export declare const getTableHeaderCellStyles: (column: IColumn, columnSorter: boolean | ISorter | undefined) => Partial<CSSStyleDeclaration>;
+export declare const prettifyName: (name: string) => string;