@tylertech/forge 3.13.1 → 3.14.0-dev.0

package/esm/table/table-utils.js

@@ -1,33 +1,40 @@
 /**
  * @license
- * Copyright Tyler Technologies, Inc. 
+ * Copyright Tyler Technologies, Inc.
  * License: Apache-2.0
  */
-import { addClass, createPredicate, debounce, findWhere, getPropertyValue, isDefined, isFunction, isNumber, isObject, isString, removeAllChildren, removeClass, removeElement, replaceElement, safeCssWidth, toggleClass } from '@tylertech/forge-core';
-import { CHECKBOX_CONSTANTS } from '../checkbox';
-import { EXPANSION_PANEL_CONSTANTS } from '../expansion-panel';
-import { TABLE_CONSTANTS } from './table-constants';
-import { CellAlign, SortDirection } from './types';
-import { ICON_CONSTANTS } from '../icon';
-import { FormFieldComponentDelegate } from '../core/delegates/form-field-component-delegate';
-import { BaseComponentDelegate } from '../core';
+
+import { replaceElement, removeAllChildren, addClass, isDefined, safeCssWidth, isObject, removeClass, getPropertyValue, findWhere, createPredicate, toggleClass, removeElement, isFunction, isNumber, debounce, isString } from '@tylertech/forge-core';
+import '../checkbox/index.js';
+import '../expansion-panel/index.js';
+import { TABLE_CONSTANTS } from './table-constants.js';
+import { SortDirection, CellAlign } from './types.js';
+import '../icon/index.js';
+import { FormFieldComponentDelegate } from '../core/delegates/form-field-component-delegate.js';
+import '../core/index.js';
+import { ICON_CONSTANTS } from '../icon/icon-constants.js';
+import { CHECKBOX_CONSTANTS } from '../checkbox/checkbox-constants.js';
+import { BaseComponentDelegate } from '../core/delegates/base-component-delegate.js';
+import { EXPANSION_PANEL_CONSTANTS } from '../expansion-panel/expansion-panel-constants.js';
+
 function isTemplateResultObject(val) {
     return val && typeof val === 'object' && 'content' in val;
 }
 /**
  * Provides facilities for creating and manipulating a table component.
  */
-export class TableUtils {
+class TableUtils {
     /**
      * Creates a table using the provided configuration.
      * @param {ITableConfiguration} configuration The table configuration.
      */
-    static createTable(configuration) {
+    static createTable(configuration, signal) {
         // Reset the table back to its original unpopulated state
         TableUtils._resetTable(configuration.tableElement);
         // Create the header and body rows
         const thead = TableUtils._createTableHead(configuration);
         const tbody = TableUtils._createTableBody(configuration);
+        const tfoot = TableUtils._createTableFoot(configuration);
         // If we are allowing click events on the table rows then attach the row click listeners and attributes
         if (configuration.clickListener) {
             TableUtils._attachRowClickListeners(tbody, configuration.clickListener, configuration.doubleClickListener);
@@ -51,7 +58,7 @@ export class TableUtils {
         }
         // Add the select column
         if (configuration.selectListener) {
-            TableUtils._addSelectColumn(thead, tbody, configuration.dense, configuration.selectListener, configuration.selectAllListener, configuration.selectAllTemplate, configuration.selectCheckboxAlignment, configuration.data, configuration.tooltipSelect, configuration.tooltipSelectAll);
+            TableUtils._addSelectColumn(thead, tbody, tfoot, configuration.dense, configuration.selectListener, configuration.selectAllListener, configuration.selectAllTemplate, configuration.selectCheckboxAlignment, configuration.data, configuration.tooltipSelect, configuration.tooltipSelectAll);
         }
         if (configuration.resizable || configuration.columnConfigurations.some(c => !!c.sortable)) {
             TableUtils._attachHeadRowMouseDownListener(thead, configuration.headRowMouseDownListener);
@@ -63,9 +70,12 @@ export class TableUtils {
         TableUtils._setTableHead(configuration.tableElement, thead);
         // Add the filter row (must come after adding the select column and table head)
         if (configuration.filter) {
-            TableUtils.setFilterRow(configuration);
+            TableUtils.setFilterRow(configuration, signal);
         }
         TableUtils._setTableBody(configuration.tableElement, tbody);
+        if (configuration.includeFooter) {
+            TableUtils._setTableFoot(configuration.tableElement, tfoot);
+        }
     }
     static _setTableHead(tableElement, thead) {
         if (tableElement.tHead) {
@@ -83,6 +93,25 @@ export class TableUtils {
             tableElement.appendChild(tbody);
         }
     }
+    static _setTableFoot(tableElement, tfoot) {
+        if (tableElement.tFoot) {
+            replaceElement(tfoot, tableElement.tFoot);
+        }
+        else {
+            tableElement.appendChild(tfoot);
+        }
+    }
+    /**
+     * Destroys and recreates the table footer section only.
+     * @param {ITableConfiguration} configuration The table configuration.
+     */
+    static recreateTableFoot(configuration) {
+        const tfoot = TableUtils._createTableFoot(configuration);
+        if (configuration.selectListener) {
+            TableUtils._createFootSelectColumn(tfoot, !!configuration.selectAllListener);
+        }
+        TableUtils._setTableFoot(configuration.tableElement, tfoot);
+    }
     /**
      * Destroys and recreates the table body section only.
      * @param {ITableConfiguration} configuration The table configuration.
@@ -241,6 +270,77 @@ export class TableUtils {
         }
         return thead;
     }
+    /**
+     * Creates the table footer section by adding a row for the column footers based on column configuration.
+     * @param columnDataMap The column based data map.
+     * @param tableElement The table element.
+     */
+    static _createTableFoot(tableConfiguration) {
+        const tfoot = document.createElement('tfoot');
+        // Create the table foot row for our column headers with required class
+        const tr = tfoot.insertRow();
+        addClass([TABLE_CONSTANTS.classes.TABLE_ROW, TABLE_CONSTANTS.classes.TABLE_FOOT_ROW], tr);
+        // Create a footer cell for each column in our column data map
+        for (let i = 0; i < tableConfiguration.columnConfigurations.length; i++) {
+            const columnConfig = tableConfiguration.columnConfigurations[i];
+            // Create the th/td element with required classes
+            const cell = i === 0 ? document.createElement('th') : document.createElement('td');
+            if (cell.tagName === 'TH') {
+                cell.scope = 'row';
+                addClass([TABLE_CONSTANTS.classes.TABLE_CELL, TABLE_CONSTANTS.classes.TABLE_FOOT_HEADER, 'forge-typography--overline'], cell);
+            }
+            else {
+                addClass([TABLE_CONSTANTS.classes.TABLE_CELL, TABLE_CONSTANTS.classes.TABLE_FOOT_CELL], cell);
+            }
+            // We wrap the header text in a div for ease of alignment
+            const cellContainer = document.createElement('div');
+            cellContainer.classList.add(TABLE_CONSTANTS.classes.TABLE_FOOT_CELL_CONTAINER);
+            // Set the cell alignment from config
+            if (columnConfig.align) {
+                TableUtils._setCellAlignmentClass(cellContainer, columnConfig.align);
+            }
+            // Check if width was specified
+            if (isDefined(columnConfig.width)) {
+                const width = safeCssWidth(columnConfig.width);
+                if (width) {
+                    cell.style.width = width;
+                }
+            }
+            // Check if we were provided any inline style declarations and apply to th/td AND wrapper content div
+            if (isDefined(columnConfig.footerCellStyle) && isObject(columnConfig.footerCellStyle)) {
+                Object.assign(cell.style, columnConfig.footerCellStyle);
+                Object.assign(cellContainer.style, columnConfig.footerCellStyle);
+            }
+            if (typeof columnConfig.footerTemplate === 'function') {
+                Promise.resolve(columnConfig.footerTemplate(i, cellContainer, columnConfig)).then(element => {
+                    if (element) {
+                        const node = document.createElement('div');
+                        addClass(TABLE_CONSTANTS.classes.TABLE_CELL_CONTAINER, node);
+                        if (typeof element === 'string') {
+                            node.innerHTML = element;
+                        }
+                        else {
+                            TableUtils._prepend(element, node);
+                        }
+                        node.setAttribute(TABLE_CONSTANTS.attributes.CUSTOM_CELL_TEMPLATE, '');
+                        TableUtils._prepend(node, cellContainer);
+                    }
+                });
+            }
+            else {
+                const span = document.createElement('span');
+                span.classList.add(TABLE_CONSTANTS.classes.TABLE_FOOT_CELL_TEXT);
+                span.textContent = columnConfig.footer && typeof columnConfig.footer === 'string' ? columnConfig.footer.trim() : '';
+                if (span.textContent.trim().length === 0) {
+                    cell.setAttribute('aria-hidden', 'true');
+                }
+                TableUtils._prepend(span, cellContainer);
+            }
+            cell.appendChild(cellContainer);
+            tr.appendChild(cell);
+        }
+        return tfoot;
+    }
     /**
      * Sets the sort direction on the table to the provided column.
      * @param tableElement
@@ -593,14 +693,18 @@ export class TableUtils {
      * Creates the select column as the first column in the table.
      * @param theadElement
      * @param tbodyElement
+     * @param tfootElement
      */
-    static _createSelectColumn(theadElement, tbodyElement, dense, showSelectAll, selectAllTemplate, registerListener, selectCheckboxAlignment, data, tooltipSelect, tooltipSelectAll) {
+    static _createSelectColumn(theadElement, tbodyElement, tfootElement, dense, showSelectAll, selectAllTemplate, registerListener, selectCheckboxAlignment, data, tooltipSelect, tooltipSelectAll) {
         if (theadElement) {
             TableUtils._createHeadSelectColumn(theadElement, dense, showSelectAll, selectAllTemplate, registerListener, selectCheckboxAlignment, tooltipSelectAll);
         }
         if (tbodyElement) {
             TableUtils._createBodySelectColumn(tbodyElement, dense, selectCheckboxAlignment, data, tooltipSelect, tooltipSelectAll);
         }
+        if (tfootElement) {
+            TableUtils._createFootSelectColumn(tfootElement, showSelectAll);
+        }
     }
     /**
      * Creates the select column in the table head.
@@ -628,6 +732,22 @@ export class TableUtils {
             }
         }
     }
+    /**
+     * Creates the select column in the table foot.
+     * @param {HTMLTableSectionElement} tfootElement The table foot element.
+     * @param {boolean} showSelectAll Whether to show the select all checkbox or not.
+     */
+    static _createFootSelectColumn(tfootElement, showSelectAll) {
+        Array.from(tfootElement.rows).forEach(row => {
+            const th = document.createElement('th');
+            addClass([TABLE_CONSTANTS.classes.TABLE_CELL, TABLE_CONSTANTS.classes.TABLE_FOOT_CELL], th);
+            row.insertBefore(th, row.cells.item(0));
+        });
+        if (showSelectAll) {
+            const lastRowFirstCell = tfootElement.rows.item(tfootElement.rows.length - 1)?.cells.item(0);
+            lastRowFirstCell?.appendChild(document.createElement('div'));
+        }
+    }
     /**
      * Creates the select column in the table body.
      * @param {HTMLTableSectionElement} tbodyElement The table body element.
@@ -653,10 +773,13 @@ export class TableUtils {
      * @param {HTMLTableSectionElement} theadElement The table head element.
      * @param {HTMLTableSectionElement} tbodyElement The table body element.
      */
-    static _destroySelectColumn(theadElement, tbodyElement) {
+    static _destroySelectColumn(theadElement, tbodyElement, tfootElement) {
         const nonExpandedRows = TableUtils._getNonExpandedRows(tbodyElement.rows);
         Array.from(theadElement.rows).forEach(row => row.removeChild(row.cells.item(0)));
         Array.from(nonExpandedRows).forEach(row => row.removeChild(row.cells.item(0)));
+        if (tfootElement) {
+            Array.from(tfootElement.rows).forEach(row => row.removeChild(row.cells.item(0)));
+        }
         // Update the colspan on the expanded rows
         if (tbodyElement.rows.length) {
             const firstRow = tbodyElement.rows.item(0);
@@ -850,7 +973,6 @@ export class TableUtils {
             TableUtils.clearSelectedRows(tableElement);
         }
         const rows = tableElement.tBodies[0].rows;
-        let selectedRowCount = 0;
         if (selectedRows.length) {
             Array.from(rows).forEach((row, index) => {
                 const rowData = data[index];
@@ -861,11 +983,9 @@ export class TableUtils {
                     if (selectCheckbox) {
                         TableUtils._setSelectedCheckboxState(selectCheckbox, true);
                     }
-                    selectedRowCount++;
                 }
             });
         }
-        TableUtils.updateSelectAllState(tableElement, selectedRowCount > 0 && rows.length === selectedRowCount);
     }
     /**
      * Clears all selected rows in the table.
@@ -961,11 +1081,12 @@ export class TableUtils {
     static setSelectColumnVisibility(tableElement, dense, isVisible, selectListener, selectAllListener, selectAllTemplate, selectCheckboxAlignment, data, tooltipSelect, tooltipSelectAll) {
         const theadElement = tableElement.tHead;
         const tbodyElement = tableElement.tBodies[0];
+        const tfootElement = tableElement.tFoot;
         if (!theadElement || !tbodyElement) {
             return;
         }
         if (isVisible) {
-            TableUtils._addSelectColumn(theadElement, tbodyElement, dense, selectListener, selectAllListener, selectAllTemplate, selectCheckboxAlignment, data, tooltipSelect, tooltipSelectAll);
+            TableUtils._addSelectColumn(theadElement, tbodyElement, tfootElement, dense, selectListener, selectAllListener, selectAllTemplate, selectCheckboxAlignment, data, tooltipSelect, tooltipSelectAll);
         }
         else if (TableUtils._hasSelectColumn(theadElement, tbodyElement)) {
             if (selectListener) {
@@ -974,7 +1095,7 @@ export class TableUtils {
             if (selectAllListener) {
                 TableUtils._detachSelectAllListener(theadElement, selectAllListener);
             }
-            TableUtils._destroySelectColumn(theadElement, tbodyElement);
+            TableUtils._destroySelectColumn(theadElement, tbodyElement, tfootElement);
         }
     }
     /**
@@ -984,8 +1105,8 @@ export class TableUtils {
      * @param selectListener The row select listener.
      * @param selectAllListener The select all checkbox listener.
      */
-    static _addSelectColumn(theadElement, tbodyElement, dense, selectListener, selectAllListener, selectAllTemplate, selectCheckboxAlignment, data, tooltipSelect, tooltipSelectAll) {
-        TableUtils._createSelectColumn(theadElement, tbodyElement, dense, !!selectAllListener, selectAllTemplate, () => {
+    static _addSelectColumn(theadElement, tbodyElement, tfootElement, dense, selectListener, selectAllListener, selectAllTemplate, selectCheckboxAlignment, data, tooltipSelect, tooltipSelectAll) {
+        TableUtils._createSelectColumn(theadElement, tbodyElement, tfootElement, dense, !!selectAllListener, selectAllTemplate, () => {
             if (selectAllListener) {
                 TableUtils._tryAttachSelectAllTemplateListener(theadElement, selectAllListener);
             }
@@ -1130,7 +1251,7 @@ export class TableUtils {
      * Controls the visibility of the table filter row.
      * @param {ITableConfiguration} configuration The table configuration.
      */
-    static setFilterRow(configuration) {
+    static setFilterRow(configuration, signal) {
         if (!configuration.tableElement.tHead) {
             return;
         }
@@ -1153,7 +1274,7 @@ export class TableUtils {
                 const lastTheadRow = configuration.tableElement.tHead.rows[configuration.tableElement.tHead.rows.length - 1];
                 selectAllCell = lastTheadRow.cells.item(0);
             }
-            const rowElement = TableUtils._createFilterRowElement(configuration);
+            const rowElement = TableUtils._createFilterRowElement(configuration, signal);
             // Move the select all cell to the new filter row
             if (rowElement && selectAllCell) {
                 Array.from(selectAllCell.children).forEach(child => {
@@ -1180,7 +1301,7 @@ export class TableUtils {
      * Creates the table filter row element.
      * @param {ITableConfiguration} configuration The table configuration.
      */
-    static _createFilterRowElement(configuration) {
+    static _createFilterRowElement(configuration, signal) {
         if (!configuration.tableElement.tHead) {
             throw new Error('Table head element cannot be null.');
         }
@@ -1201,7 +1322,7 @@ export class TableUtils {
                 if (columnConfig.align) {
                     TableUtils._setCellAlignmentClass(container, columnConfig.align);
                 }
-                const element = TableUtils._createFilterElement(columnConfig, columnIndex, configuration.filterListener);
+                const element = TableUtils._createFilterElement(columnConfig, columnIndex, configuration.filterListener, signal);
                 container.appendChild(element);
                 th.appendChild(container);
             }
@@ -1213,7 +1334,7 @@ export class TableUtils {
      * Creates the element that will be used as the filter for this column.
      * @param {IColumnConfiguration} columnConfig The column configuration.
      */
-    static _createFilterElement(columnConfig, columnIndex, filterListener) {
+    static _createFilterElement(columnConfig, columnIndex, filterListener, signal) {
         let delegate;
         if (isFunction(columnConfig.filterDelegate)) {
             delegate = columnConfig.filterDelegate();
@@ -1230,10 +1351,10 @@ export class TableUtils {
                 const debounceTime = isDefined(columnConfig.filterDebounceTime)
                     ? columnConfig.filterDebounceTime
                     : TABLE_CONSTANTS.numbers.DEFAULT_FILTER_DEBOUNCE_TIME;
-                delegate.onChange(debounce((value) => filterListener(value, columnIndex), debounceTime));
+                delegate.onChange(debounce((value) => filterListener(value, columnIndex), debounceTime), { signal });
             }
             else {
-                delegate.onChange((value) => filterListener(value, columnIndex));
+                delegate.onChange((value) => filterListener(value, columnIndex), { signal });
             }
         }
         return delegate.element;
@@ -1478,3 +1599,5 @@ export class TableUtils {
         });
     }
 }
+
+export { TableUtils };

package/esm/table/table.d.ts

@@ -1,10 +1,5 @@
-/**
- * @license
- * Copyright Tyler Technologies, Inc. 
- * License: Apache-2.0
- */
-import { BaseComponent, IBaseComponent } from '../core/base/base-component';
-import { IColumnConfiguration, TableLayoutType, TableViewTemplate, TableRowCreatedCallback, TableCellCreatedCallback, TableHeaderSelectAllTemplate, CellAlign, ITableRowClickEventData, ITableSelectDoubleEventData, ITableSelectEventData, ITableSelectAllEventData, ITableColumnResizeEventData, ITableSortEventData, ITableSortMultipleEventData, ITableFilterEventData, TableSelectTooltipCallback } from './types';
+import { BaseComponent, IBaseComponent } from '../core/base/base-component.js';
+import { IColumnConfiguration, TableLayoutType, TableViewTemplate, TableRowCreatedCallback, TableCellCreatedCallback, TableHeaderSelectAllTemplate, CellAlign, ITableRowClickEventData, ITableSelectDoubleEventData, ITableSelectEventData, ITableSelectAllEventData, ITableColumnResizeEventData, ITableSortEventData, ITableSortMultipleEventData, ITableFilterEventData, TableSelectTooltipCallback } from './types.js';
 export interface ITableComponent extends IBaseComponent {
     data: any[];
     columnConfigurations: IColumnConfiguration[];
@@ -14,6 +9,7 @@ export interface ITableComponent extends IBaseComponent {
     dense: boolean;
     roomy: boolean;
     filter: boolean;
+    includeFooter: boolean;
     fixedHeaders: boolean;
     layoutType: TableLayoutType;
     wrapContent: boolean;
@@ -246,10 +242,16 @@ export declare class TableComponent extends BaseComponent implements ITableCompo
      * @attribute wrap-content
      */
     wrapContent: boolean;
+    /**
+     * Controls whether to render a table footer.
+     * @default false
+     * @attribute include-footer
+     */
+    includeFooter: boolean;
     /**
      * Controls whether the columns are resizable or not.
      * @default false
-     * @attribute
+     * @attribute resizable
      */
     resizable: boolean;
     /**

package/esm/table/table.js

@@ -1,21 +1,29 @@
 /**
  * @license
- * Copyright Tyler Technologies, Inc. 
+ * Copyright Tyler Technologies, Inc.
  * License: Apache-2.0
  */
-import { __decorate } from "tslib";
-import { coerceBoolean, coerceNumber, customElement, coreProperty } from '@tylertech/forge-core';
+
+import { __decorate } from 'tslib';
+import { coerceBoolean, coerceNumber, coreProperty, customElement } from '@tylertech/forge-core';
 import { tylIconArrowDownward } from '@tylertech/tyler-icons';
-import { ExpansionPanelComponent } from '../expansion-panel';
-import { CheckboxComponent } from '../checkbox';
-import { TableAdapter } from './table-adapter';
-import { TABLE_CONSTANTS } from './table-constants';
-import { TableCore } from './table-core';
-import { IconRegistry, IconComponent } from '../icon';
-import { BaseComponent } from '../core/base/base-component';
-import { CellAlign } from './types';
-import { TooltipComponent } from '../tooltip';
-import { FocusIndicatorComponent } from '../focus-indicator';
+import '../expansion-panel/index.js';
+import '../checkbox/index.js';
+import { TableAdapter } from './table-adapter.js';
+import { TABLE_CONSTANTS } from './table-constants.js';
+import { TableCore } from './table-core.js';
+import '../icon/index.js';
+import { BaseComponent } from '../core/base/base-component.js';
+import { CellAlign } from './types.js';
+import '../tooltip/index.js';
+import '../focus-indicator/index.js';
+import { IconRegistry } from '../icon/icon-registry.js';
+import { ExpansionPanelComponent } from '../expansion-panel/expansion-panel.js';
+import { IconComponent } from '../icon/icon.js';
+import { CheckboxComponent } from '../checkbox/checkbox.js';
+import { TooltipComponent } from '../tooltip/tooltip.js';
+import { FocusIndicatorComponent } from '../focus-indicator/focus-indicator.js';
+
 /**
  * @summary Tables are used to display sets of data. They organize information into rows and columns, making it easier to read, compare, and analyze. The Forge table provides a configuration-based approach to building data tables with means for sorting, filtering, selecting, and customizing the display of tabular data.
  *
@@ -57,7 +65,8 @@ let TableComponent = class TableComponent extends BaseComponent {
             TABLE_CONSTANTS.attributes.MULTI_COLUMN_SORT,
             TABLE_CONSTANTS.attributes.SELECT_CHECKBOX_ALIGNMENT,
             TABLE_CONSTANTS.attributes.TOOLTIP_SELECT,
-            TABLE_CONSTANTS.attributes.TOOLTIP_SELECT_ALL
+            TABLE_CONSTANTS.attributes.TOOLTIP_SELECT_ALL,
+            TABLE_CONSTANTS.attributes.INCLUDE_FOOTER
         ];
     }
     constructor() {
@@ -124,6 +133,9 @@ let TableComponent = class TableComponent extends BaseComponent {
             case TABLE_CONSTANTS.attributes.TOOLTIP_SELECT_ALL:
                 this.tooltipSelectAll = newValue;
                 break;
+            case TABLE_CONSTANTS.attributes.INCLUDE_FOOTER:
+                this.includeFooter = coerceBoolean(newValue);
+                break;
         }
     }
     /**
@@ -285,6 +297,9 @@ __decorate([
 __decorate([
     coreProperty()
 ], TableComponent.prototype, "wrapContent", void 0);
+__decorate([
+    coreProperty()
+], TableComponent.prototype, "includeFooter", void 0);
 __decorate([
     coreProperty()
 ], TableComponent.prototype, "resizable", void 0);
@@ -315,4 +330,5 @@ TableComponent = __decorate([
         dependencies: [ExpansionPanelComponent, IconComponent, CheckboxComponent, TooltipComponent, FocusIndicatorComponent]
     })
 ], TableComponent);
+
 export { TableComponent };

package/esm/table/types.d.ts

@@ -1,15 +1,11 @@
-/**
- * @license
- * Copyright Tyler Technologies, Inc. 
- * License: Apache-2.0
- */
-import { BaseComponentDelegate, IBaseComponentDelegate, IBaseComponentDelegateOptions } from '../core';
-import { IFormFieldComponentDelegate } from '../core/delegates/form-field-component-delegate';
-import { TableRow } from './table-row';
+import { BaseComponentDelegate, IBaseComponentDelegate, IBaseComponentDelegateOptions } from '../core/index.js';
+import { IFormFieldComponentDelegate } from '../core/delegates/form-field-component-delegate.js';
+import { TableRow } from './table-row.js';
 export declare type TableViewTemplate = string | HTMLElement | TableViewTemplateBuilder;
 export declare type TableViewTemplateBuilder<T = any> = (rowIndex: number, div: HTMLElement, rowData: T) => HTMLElement | string | ITableViewTemplateBuilderResult | undefined | Promise<HTMLElement | string | undefined | ITableViewTemplateBuilderResult>;
 export declare type TableTemplateBuilder<T = any> = (rowIndex: number, div: HTMLElement, rowData: T, columnIndex: number) => HTMLElement | string | ITableTemplateBuilderResult | undefined | Promise<HTMLElement | string | undefined | ITableTemplateBuilderResult>;
-export declare type TableHeaderTemplateBuilder = (rowIndex: number, div: HTMLElement, columConfig: IColumnConfiguration) => HTMLElement | string | Promise<HTMLElement | string>;
+export declare type TableHeaderTemplateBuilder = (rowIndex: number, div: HTMLElement, columnConfig: IColumnConfiguration) => HTMLElement | string | Promise<HTMLElement | string>;
+export declare type TableFooterTemplateBuilder = (rowIndex: number, div: HTMLElement, columnConfig: IColumnConfiguration) => HTMLElement | string | Promise<HTMLElement | string>;
 export declare type TableHeaderSelectAllTemplate = () => HTMLElement | string | Promise<HTMLElement | string>;
 export declare type TableRowCreatedCallback = (rowElement: HTMLTableRowElement, rowIndex: number, rowData: any) => void;
 export declare type TableSelectTooltipCallback = (rowIndex: number, rowData: any) => string;
@@ -29,6 +25,7 @@ export interface ITableConfiguration {
     filter: boolean;
     wrapContent: boolean;
     resizable: boolean;
+    includeFooter: boolean;
     fixedHeaders: boolean;
     layoutType: TableLayoutType;
     selectCheckboxAlignment: CellAlign;
@@ -51,6 +48,8 @@ export interface IColumnConfiguration {
     template?: TableTemplateBuilder;
     headerTemplate?: TableHeaderTemplateBuilder;
     header?: string;
+    footerTemplate?: TableFooterTemplateBuilder;
+    footer?: string;
     hidden?: boolean;
     sortable?: boolean;
     preventUnsort?: boolean;
@@ -64,6 +63,7 @@ export interface IColumnConfiguration {
     filterDebounceTime?: number;
     cellStyle?: Partial<CSSStyleDeclaration>;
     headerCellStyle?: Partial<CSSStyleDeclaration>;
+    footerCellStyle?: Partial<CSSStyleDeclaration>;
     resizable?: boolean;
     columnSpan?: 'all' | number;
     stopCellTemplateClickPropagation?: boolean;

package/esm/table/types.js

@@ -1,21 +1,22 @@
 /**
  * @license
- * Copyright Tyler Technologies, Inc. 
+ * Copyright Tyler Technologies, Inc.
  * License: Apache-2.0
  */
-export var CellAlign;
+
+var CellAlign;
 (function (CellAlign) {
     CellAlign["Left"] = "left";
     CellAlign["Right"] = "right";
     CellAlign["Center"] = "center";
 })(CellAlign || (CellAlign = {}));
-export var SortDirection;
+var SortDirection;
 (function (SortDirection) {
     SortDirection["Ascending"] = "ASC";
     SortDirection["Descending"] = "DESC";
     SortDirection["Unset"] = "UNSET";
 })(SortDirection || (SortDirection = {}));
-export var TableFilterType;
+var TableFilterType;
 (function (TableFilterType) {
     TableFilterType["InputText"] = "text";
     TableFilterType["InputNumber"] = "number";
@@ -24,3 +25,5 @@ export var TableFilterType;
     TableFilterType["Date"] = "date";
     TableFilterType["DateRange"] = "date-range";
 })(TableFilterType || (TableFilterType = {}));
+
+export { CellAlign, SortDirection, TableFilterType };

package/esm/tabs/index.d.ts

@@ -1,7 +1,2 @@
-/**
- * @license
- * Copyright Tyler Technologies, Inc. 
- * License: Apache-2.0
- */
-export * from './tab';
-export * from './tab-bar';
+export * from './tab/index.js';
+export * from './tab-bar/index.js';

package/esm/tabs/index.js

@@ -1,7 +1,8 @@
 /**
  * @license
- * Copyright Tyler Technologies, Inc. 
+ * Copyright Tyler Technologies, Inc.
  * License: Apache-2.0
  */
-export * from './tab';
-export * from './tab-bar';
+
+export { defineTabComponent } from './tab/index.js';
+export { defineTabBarComponent } from './tab-bar/index.js';

package/esm/tabs/tab/index.d.ts

@@ -1,10 +1,5 @@
-/**
- * @license
- * Copyright Tyler Technologies, Inc. 
- * License: Apache-2.0
- */
-export * from './tab-adapter';
-export * from './tab-constants';
-export * from './tab-core';
-export * from './tab';
+export * from './tab-adapter.js';
+export * from './tab-constants.js';
+export * from './tab-core.js';
+export * from './tab.js';
 export declare function defineTabComponent(): void;

package/esm/tabs/tab/index.js

@@ -1,14 +1,17 @@
 /**
  * @license
- * Copyright Tyler Technologies, Inc. 
+ * Copyright Tyler Technologies, Inc.
  * License: Apache-2.0
  */
+
 import { defineCustomElement } from '@tylertech/forge-core';
-import { TabComponent } from './tab';
-export * from './tab-adapter';
-export * from './tab-constants';
-export * from './tab-core';
-export * from './tab';
-export function defineTabComponent() {
+import { TabComponent } from './tab.js';
+export { TabAdapter } from './tab-adapter.js';
+export { TAB_CONSTANTS } from './tab-constants.js';
+export { TabCore } from './tab-core.js';
+
+function defineTabComponent() {
     defineCustomElement(TabComponent);
 }
+
+export { TabComponent, defineTabComponent };

package/esm/tabs/tab/tab-adapter.d.ts

@@ -1,10 +1,5 @@
-/**
- * @license
- * Copyright Tyler Technologies, Inc. 
- * License: Apache-2.0
- */
-import { BaseAdapter, IBaseAdapter } from '../../core/base/base-adapter';
-import type { ITabComponent } from './tab';
+import { BaseAdapter, IBaseAdapter } from '../../core/base/base-adapter.js';
+import type { ITabComponent } from './tab.js';
 export interface ITabAdapter extends IBaseAdapter {
     initialize(): void;
     activateFocusIndicator(): void;

package/esm/tabs/tab/tab-adapter.js

@@ -1,15 +1,19 @@
 /**
  * @license
- * Copyright Tyler Technologies, Inc. 
+ * Copyright Tyler Technologies, Inc.
  * License: Apache-2.0
  */
-import { getShadowElement, requireParent, toggleAttribute } from '@tylertech/forge-core';
-import { STATE_LAYER_CONSTANTS } from '../../state-layer';
-import { BaseAdapter } from '../../core/base/base-adapter';
-import { TAB_BAR_CONSTANTS } from '../tab-bar/tab-bar-constants';
-import { TAB_CONSTANTS } from './tab-constants';
-import { FOCUS_INDICATOR_TAG_NAME } from '../../focus-indicator';
-export class TabAdapter extends BaseAdapter {
+
+import { getShadowElement, toggleAttribute, requireParent } from '@tylertech/forge-core';
+import '../../state-layer/index.js';
+import { BaseAdapter } from '../../core/base/base-adapter.js';
+import { TAB_BAR_CONSTANTS } from '../tab-bar/tab-bar-constants.js';
+import { TAB_CONSTANTS } from './tab-constants.js';
+import '../../focus-indicator/index.js';
+import { FOCUS_INDICATOR_TAG_NAME } from '../../focus-indicator/focus-indicator.js';
+import { STATE_LAYER_CONSTANTS } from '../../state-layer/state-layer-constants.js';
+
+class TabAdapter extends BaseAdapter {
     constructor(component) {
         super(component);
         this._tabIndicatorElement = getShadowElement(this._component, TAB_CONSTANTS.selectors.INDICATOR);
@@ -86,3 +90,5 @@ export class TabAdapter extends BaseAdapter {
         return null;
     }
 }
+
+export { TabAdapter };