@tylertech/forge 3.13.1 → 3.14.0-dev.1

package/esm/switch/switch.scss.js

@@ -0,0 +1,9 @@
+/**
+ * @license
+ * Copyright Tyler Technologies, Inc.
+ * License: Apache-2.0
+ */
+
+var styles = ":host{display:inline-block;outline:none;-webkit-tap-highlight-color:rgba(0,0,0,0)}:host([hidden]){display:none}.forge-switch{--_switch-handle-size:var(--forge-switch-handle-size, 20px);--_switch-handle-scale:var(--forge-switch-handle-scale, 1);--_switch-handle-elevation:var(--forge-switch-handle-elevation, 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12));--_switch-track-border-width:var(--forge-switch-track-border-width, 0);--_switch-track-border-color:var(--forge-switch-track-border-color, transparent);--_switch-icon-color:var(--forge-switch-icon-color, var(--forge-theme-on-tertiary, #ffffff));--_switch-icon-size:var(--forge-switch-icon-size, 16px);--_switch-icon-scale:var(--forge-switch-icon-scale, 1);--_switch-state-layer-size:var(--forge-switch-state-layer-size, 40px);--_switch-state-layer-dense-size:var(--forge-switch-state-layer-dense-size, 28px);--_switch-handle-on-color:var(--forge-switch-handle-on-color, var(--forge-theme-tertiary, #3d5afe));--_switch-handle-off-color:var(--forge-switch-handle-off-color, var(--forge-theme-outline-medium, #757575));--_switch-handle-width:var(--forge-switch-handle-width, var(--_switch-handle-size));--_switch-handle-height:var(--forge-switch-handle-height, var(--_switch-handle-size));--_switch-handle-on-scale:var(--forge-switch-handle-on-scale, var(--_switch-handle-scale));--_switch-handle-off-scale:var(--forge-switch-handle-off-scale, var(--_switch-handle-scale));--_switch-handle-shape:var(--forge-switch-handle-shape, calc(var(--forge-shape-round, 50%) * var(--forge-shape-factor, 1)));--_switch-handle-on-elevation:var(--forge-switch-handle-on-elevation, var(--_switch-handle-elevation));--_switch-handle-off-elevation:var(--forge-switch-handle-off-elevation, var(--_switch-handle-elevation));--_switch-track-on-color:var(--forge-switch-track-on-color, var(--forge-theme-tertiary-container, #d0d7ff));--_switch-track-off-color:var(--forge-switch-track-off-color, var(--forge-theme-surface-container, #e0e0e0));--_switch-track-width:var(--forge-switch-track-width, 36px);--_switch-track-height:var(--forge-switch-track-height, 14px);--_switch-track-shape:var(--forge-switch-track-shape, calc(var(--forge-shape-full, 9999px) * var(--forge-shape-factor, 1)));--_switch-track-on-border-width:var(--forge-switch-track-on-border-width, var(--_switch-track-border-width));--_switch-track-off-border-width:var(--forge-switch-track-off-border-width, var(--_switch-track-border-width));--_switch-track-on-border-color:var(--forge-switch-track-on-border-color, var(--_switch-track-border-color));--_switch-track-off-border-color:var(--forge-switch-track-off-border-color, var(--_switch-track-border-color));--_switch-icon-on-color:var(--forge-switch-icon-on-color, var(--_switch-icon-color));--_switch-icon-off-color:var(--forge-switch-icon-off-color, var(--_switch-icon-color));--_switch-icon-on-size:var(--forge-switch-icon-on-size, var(--_switch-icon-size));--_switch-icon-off-size:var(--forge-switch-icon-off-size, var(--_switch-icon-size));--_switch-icon-on-scale:var(--forge-switch-icon-on-scale, var(--_switch-icon-scale));--_switch-icon-off-scale:var(--forge-switch-icon-off-scale, var(--_switch-icon-scale));--_switch-gap:var(--forge-switch-gap, 0);--_switch-justify:var(--forge-switch-justify, start);--_switch-align:var(--forge-switch-align, center);--_switch-direction:var(--forge-switch-direction, initial);--_switch-state-layer-width:var(--forge-switch-state-layer-width, var(--_switch-state-layer-size));--_switch-state-layer-height:var(--forge-switch-state-layer-height, var(--_switch-state-layer-size));--_switch-state-layer-on-color:var(--forge-switch-state-layer-on-color, var(--_switch-handle-on-color));--_switch-state-layer-off-color:var(--forge-switch-state-layer-off-color, var(--_switch-color));--_switch-state-layer-dense-width:var(--forge-switch-state-layer-dense-width, var(--_switch-state-layer-dense-size));--_switch-state-layer-dense-height:var(--forge-switch-state-layer-dense-height, var(--_switch-state-layer-dense-size));--_switch-disabled-opacity:var(--forge-switch-disabled-opacity, 0.54);--_switch-handle-active-on-color:var(--forge-switch-handle-active-on-color, var(--_switch-handle-on-color));--_switch-handle-active-off-color:var(--forge-switch-handle-active-off-color, var(--_switch-handle-off-color));--_switch-handle-active-scale:var(--forge-switch-handle-active-scale, 1.2);--_switch-handle-active-on-scale:var(--forge-switch-handle-active-on-scale, var(--_switch-handle-active-scale));--_switch-handle-active-off-scale:var(--forge-switch-handle-active-off-scale, var(--_switch-handle-active-scale));--_switch-handle-active-elevation:var(--forge-switch-handle-active-elevation, var(--_switch-handle-elevation));--_switch-handle-active-on-elevation:var(--forge-switch-handle-active-on-elevation, var(--_switch-handle-active-elevation));--_switch-handle-active-off-elevation:var(--forge-switch-handle-active-off-elevation, var(--_switch-handle-active-elevation));--_switch-track-active-on-color:var(--forge-switch-track-active-on-color, var(--_switch-track-on-color));--_switch-track-active-off-color:var(--forge-switch-track-active-off-color, var(--_switch-track-off-color));--_switch-track-active-on-border-width:var(--forge-switch-track-active-on-border-width, var(--_switch-track-on-border-width));--_switch-track-active-off-border-width:var(--forge-switch-track-active-off-border-width, var(--_switch-track-off-border-width));--_switch-track-active-on-border-color:var(--forge-switch-track-active-on-border-color, var(--_switch-track-on-border-color));--_switch-track-active-off-border-color:var(--forge-switch-track-active-off-border-color, var(--_switch-track-off-border-color));--_switch-icon-active-on-color:var(--forge-switch-icon-active-on-color, var(--_switch-icon-on-color));--_switch-icon-active-off-color:var(--forge-switch-icon-active-off-color, var(--_switch-icon-off-color));--_switch-icon-active-on-scale:var(--forge-switch-icon-active-on-scale, var(--_switch-icon-on-scale));--_switch-icon-active-off-scale:var(--forge-switch-icon-active-off-scale, var(--_switch-icon-off-scale));--_switch-animation-duration:var(--forge-switch-animation-duration, var(--forge-animation-duration-short2, 100ms));--_switch-animation-timing:var(--forge-switch-animation-timing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)));--_switch-active-animation-timing:var(--forge-switch-active-animation-timing, var(--forge-animation-easing-linear, cubic-bezier(0, 0, 1, 1)))}.forge-switch{display:flex;position:relative;flex-direction:var(--_switch-direction);align-items:var(--_switch-align);justify-content:var(--_switch-justify);gap:var(--_switch-gap);--_switch-current-state-layer-width:var(--_switch-state-layer-width);--_switch-current-state-layer-height:var(--_switch-state-layer-height)}.forge-switch .container{position:relative;align-items:center;display:flex;flex-shrink:0;block-size:max(var(--_switch-handle-height), var(--_switch-track-height), var(--_switch-current-state-layer-height));cursor:pointer}.forge-switch .input{position:absolute;z-index:1;appearance:none;outline:none;margin:0;inline-size:100%;block-size:100%;cursor:unset}.forge-switch .track{transition-property:background-color,border-color,border-width;transition-duration:var(--_switch-animation-duration);transition-timing-function:var(--_switch-animation-timing);box-sizing:border-box;margin-inline:calc(max(var(--_switch-handle-width), var(--_switch-current-state-layer-width)) / 2 - calc(var(--_switch-track-height) / 2));border-width:var(--_switch-track-off-border-width);border-color:var(--_switch-track-off-border-color);border-style:solid;border-radius:var(--_switch-track-shape);inline-size:var(--_switch-track-width);block-size:var(--_switch-track-height);background-color:var(--_switch-track-off-color)}.forge-switch .handle{position:absolute;justify-content:center;align-items:center;display:flex;transition-property:translate;transition-duration:var(--_switch-animation-duration);transition-timing-function:var(--_switch-animation-timing);border-radius:var(--_switch-handle-shape);inline-size:var(--_switch-current-state-layer-width);block-size:var(--_switch-current-state-layer-height)}.forge-switch .handle::before{content:\"\";position:relative;display:block;scale:var(--_switch-handle-off-scale);transition:background-color var(--_switch-animation-duration) var(--_switch-animation-timing),box-shadow var(--_switch-animation-duration) var(--_switch-animation-timing),scale var(--_switch-animation-duration) var(--_switch-active-animation-timing);box-shadow:var(--_switch-handle-off-elevation);border-radius:var(--_switch-handle-shape);inline-size:var(--_switch-handle-width);block-size:var(--_switch-handle-height);background-color:var(--_switch-handle-off-color)}.forge-switch .icon{position:absolute;align-items:center;justify-content:center;display:flex;transition-property:opacity,scale;transition-duration:var(--_switch-animation-duration);transition-timing-function:var(--_switch-animation-timing);inline-size:var(--_switch-icon-off-size);block-size:var(--_switch-icon-off-size);color:var(--_switch-icon-off-color);fill:var(--_switch-icon-off-color);font-size:var(--_switch-icon-off-size);--forge-icon-font-size: var(--_switch-icon-off-size)}.forge-switch .icon__on{--forge-icon-font-size: var(--_switch-icon-on-size);inline-size:var(--_switch-icon-on-size);block-size:var(--_switch-icon-on-size);color:var(--_switch-icon-on-color);fill:var(--_switch-icon-on-color);font-size:var(--_switch-icon-on-size);opacity:0;scale:.4}.forge-switch .icon__off{opacity:1;scale:var(--_switch-icon-off-scale)}.forge-switch .label{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--forge-typography-label2-font-family, var(--forge-typography-font-family, \"Roboto\", sans-serif));font-size:var(--forge-typography-label2-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-label-font-size-scale, 0.8125)));font-weight:var(--forge-typography-label2-font-weight, 400);line-height:var(--forge-typography-label2-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-label-line-height-scale, 1.25)));letter-spacing:var(--forge-typography-label2-letter-spacing, 0.0096153846em);text-transform:var(--forge-typography-label2-text-transform, inherit);text-decoration:var(--forge-typography-label2-text-decoration, inherit)}.forge-switch .label:empty{display:none}.forge-switch .hidden{display:none}.forge-switch ::slotted([slot=input]){position:absolute;z-index:1;appearance:none;outline:none;margin:0;inline-size:100%;block-size:100%;cursor:unset}:host([checked]) .track{border-width:var(--_switch-track-on-border-width);border-color:var(--_switch-track-on-border-color);background-color:var(--_switch-track-on-color)}:host([checked]) .handle{translate:calc(var(--_switch-track-width) - calc(var(--_switch-track-height) / 2) * 2)}:host([checked]) .handle::before{scale:var(--_switch-handle-on-scale);box-shadow:var(--_switch-handle-on-elevation);background-color:var(--_switch-handle-on-color)}:host([checked]) .handle .icon__on{opacity:1;scale:var(--_switch-icon-on-scale)}:host([checked]) .handle .icon__off{opacity:0;scale:.4}:host([checked]) forge-state-layer{--forge-state-layer-color: var(--_switch-state-layer-on-color)}:host(:not([disabled]):not([readonly])) .forge-switch .container:active .track{border-width:var(--_switch-track-active-off-border-width);border-color:var(--_switch-track-active-off-border-color);background-color:var(--_switch-track-active-off-color)}:host(:not([disabled]):not([readonly])) .forge-switch .container:active .handle::before{scale:var(--_switch-handle-active-off-scale);box-shadow:var(--_switch-handle-active-off-elevation);background-color:var(--_switch-handle-active-off-color)}:host(:not([disabled]):not([readonly])) .forge-switch .container:active .handle .icon{scale:var(--_switch-icon-active-off-scale);color:var(--_switch-icon-active-off-color);fill:var(--_switch-icon-active-off-color)}:host(:not([disabled]):not([readonly])[checked]) .forge-switch .container:active .track{border-width:var(--_switch-track-active-on-border-width);border-color:var(--_switch-track-active-on-border-color);background-color:var(--_switch-track-active-on-color)}:host(:not([disabled]):not([readonly])[checked]) .forge-switch .container:active .handle::before{scale:var(--_switch-handle-active-on-scale);box-shadow:var(--_switch-handle-active-on-elevation);background-color:var(--_switch-handle-active-on-color)}:host(:not([disabled]):not([readonly])[checked]) .forge-switch .container:active .handle .icon{scale:var(--_switch-icon-active-on-scale);color:var(--_switch-icon-active-on-color);fill:var(--_switch-icon-active-on-color)}:host([dense]) .forge-switch{--_switch-current-state-layer-width:var(--_switch-state-layer-dense-width);--_switch-current-state-layer-height:var(--_switch-state-layer-dense-height)}:host([disabled]) .forge-switch .container{opacity:var(--_switch-disabled-opacity);cursor:not-allowed}:host([disabled]) .forge-switch .handle::before{box-shadow:none}:host([readonly]) .forge-switch .container{cursor:not-allowed}@media(prefers-reduced-motion){.switch{--_switch-animation-duration:var(--forge-switch-animation-duration, 0s)}}forge-state-layer{--forge-state-layer-color: var(--_switch-state-layer-off-color)}forge-focus-indicator{--forge-focus-indicator-shape: var(--_switch-track-shape);--forge-focus-indicator-outward-offset: 0px}";
+
+export { styles as default };

package/esm/table/index.d.ts

@@ -1,12 +1,7 @@
-/**
- * @license
- * Copyright Tyler Technologies, Inc. 
- * License: Apache-2.0
- */
-export * from './table-adapter';
-export * from './table-constants';
-export * from './table-core';
-export * from './table-row';
-export * from './table';
-export * from './types';
+export * from './table-adapter.js';
+export * from './table-constants.js';
+export * from './table-core.js';
+export * from './table-row.js';
+export * from './table.js';
+export * from './types.js';
 export declare function defineTableComponent(): void;

package/esm/table/index.js

@@ -1,16 +1,19 @@
 /**
  * @license
- * Copyright Tyler Technologies, Inc. 
+ * Copyright Tyler Technologies, Inc.
  * License: Apache-2.0
  */
+
 import { defineCustomElement } from '@tylertech/forge-core';
-import { TableComponent } from './table';
-export * from './table-adapter';
-export * from './table-constants';
-export * from './table-core';
-export * from './table-row';
-export * from './table';
-export * from './types';
-export function defineTableComponent() {
+import { TableComponent } from './table.js';
+export { TableAdapter } from './table-adapter.js';
+export { TABLE_CONSTANTS } from './table-constants.js';
+export { TableCore } from './table-core.js';
+export { TableRow } from './table-row.js';
+export { CellAlign, SortDirection, TableFilterType } from './types.js';
+
+function defineTableComponent() {
     defineCustomElement(TableComponent);
 }
+
+export { TableComponent, defineTableComponent };

package/esm/table/multi-sort-manager.d.ts

@@ -1,9 +1,4 @@
-/**
- * @license
- * Copyright Tyler Technologies, Inc. 
- * License: Apache-2.0
- */
-import { ISortedItem, ISortedItemUpdate } from './types';
+import { ISortedItem, ISortedItemUpdate } from './types.js';
 export declare class MultiSortManager {
     private _sortedColumns;
     get sortedColumns(): ISortedItem[];

package/esm/table/multi-sort-manager.js

@@ -1,10 +1,12 @@
 /**
  * @license
- * Copyright Tyler Technologies, Inc. 
+ * Copyright Tyler Technologies, Inc.
  * License: Apache-2.0
  */
-import { SortDirection } from './types';
-export class MultiSortManager {
+
+import { SortDirection } from './types.js';
+
+class MultiSortManager {
     constructor() {
         this._sortedColumns = [];
     }
@@ -65,3 +67,5 @@ export class MultiSortManager {
         this._sortedColumns.forEach((column, index) => (column.sortOrder = index + 1));
     }
 }
+
+export { MultiSortManager };

package/esm/table/table-adapter.d.ts

@@ -1,17 +1,13 @@
-/**
- * @license
- * Copyright Tyler Technologies, Inc. 
- * License: Apache-2.0
- */
-import { BaseAdapter, IBaseAdapter } from '../core/base/base-adapter';
-import { ITableComponent } from './table';
-import { CellAlign, ITableConfiguration, SortDirection, TableHeaderSelectAllTemplate, TableViewTemplate, TableSelectTooltipCallback } from './types';
-import { TableRow } from './table-row';
+import { BaseAdapter, IBaseAdapter } from '../core/base/base-adapter.js';
+import { ITableComponent } from './table.js';
+import { CellAlign, ITableConfiguration, SortDirection, TableHeaderSelectAllTemplate, TableViewTemplate, TableSelectTooltipCallback } from './types.js';
+import { TableRow } from './table-row.js';
 export interface ITableAdapter extends IBaseAdapter {
     initialize: () => void;
     getTableElement: () => HTMLTableElement;
     createTable: (configuration: ITableConfiguration) => void;
     recreateTableBody: (configuration: ITableConfiguration) => void;
+    recreateTableFoot: (configuration: ITableConfiguration) => void;
     setSelectedRows: (tableElement: HTMLTableElement, key: string[], data: any[], selectedRows: any[], preserveExisting?: boolean) => void;
     clearSelectedRows: (tableElement: HTMLTableElement) => void;
     updateSelectedState: (rowElement: HTMLTableRowElement, isSelected: boolean) => void;
@@ -45,11 +41,13 @@ export interface ITableAdapter extends IBaseAdapter {
  */
 export declare class TableAdapter extends BaseAdapter<ITableComponent> implements ITableAdapter {
     private _tableElement;
+    private _filterListenerController;
     constructor(component: ITableComponent);
     initialize(): void;
     getTableElement(): HTMLTableElement;
     createTable(configuration: ITableConfiguration): void;
     recreateTableBody(configuration: ITableConfiguration): void;
+    recreateTableFoot(configuration: ITableConfiguration): void;
     setSelectedRows(tableElement: HTMLTableElement, key: string[], data: any[], selectedRows: any[], preserveExisting?: boolean): void;
     clearSelectedRows(tableElement: HTMLTableElement): void;
     updateSelectedState(rowElement: HTMLTableRowElement, isSelected: boolean): void;
@@ -77,4 +75,5 @@ export declare class TableAdapter extends BaseAdapter<ITableComponent> implement
     removeTableClass(classes: string | string[]): void;
     setRowClickListeners(tableElement: HTMLTableElement, allowClick: boolean, clickListener: (evt: Event) => void, doubleClickListener: (evt: Event) => void): void;
     setRowClickAttributes(tableElement: HTMLTableElement, allowClick: boolean): void;
+    private _resetFilterListeners;
 }

package/esm/table/table-adapter.js

@@ -1,18 +1,21 @@
 /**
  * @license
- * Copyright Tyler Technologies, Inc. 
+ * Copyright Tyler Technologies, Inc.
  * License: Apache-2.0
  */
-import { addClass, removeAllChildren, removeClass } from '@tylertech/forge-core';
-import { BaseAdapter } from '../core/base/base-adapter';
-import { TABLE_CONSTANTS } from './table-constants';
-import { TableUtils } from './table-utils';
+
+import { removeAllChildren, addClass, removeClass } from '@tylertech/forge-core';
+import { BaseAdapter } from '../core/base/base-adapter.js';
+import { TABLE_CONSTANTS } from './table-constants.js';
+import { TableUtils } from './table-utils.js';
+
 /**
  * Provides facilities for interacting with the internal DOM of `TableComponent`.
  */
-export class TableAdapter extends BaseAdapter {
+class TableAdapter extends BaseAdapter {
     constructor(component) {
         super(component);
+        this._filterListenerController = new AbortController();
     }
     initialize() {
         if (!this._tableElement) {
@@ -31,11 +34,15 @@ export class TableAdapter extends BaseAdapter {
         return this._tableElement;
     }
     createTable(configuration) {
-        return TableUtils.createTable(configuration);
+        this._resetFilterListeners();
+        return TableUtils.createTable(configuration, this._filterListenerController.signal);
     }
     recreateTableBody(configuration) {
         TableUtils.recreateTableBody(configuration);
     }
+    recreateTableFoot(configuration) {
+        TableUtils.recreateTableFoot(configuration);
+    }
     setSelectedRows(tableElement, key, data, selectedRows, preserveExisting = false) {
         TableUtils.setSelectedRows(tableElement, key, data, selectedRows, preserveExisting);
     }
@@ -73,7 +80,8 @@ export class TableAdapter extends BaseAdapter {
         TableUtils.setSelectAllVisibility(tableElement, dense, isVisible, listener, selectAllTemplate, selectCheckboxAlignment || null, tooltipSelectAll || null);
     }
     setFilterRow(configuration) {
-        TableUtils.setFilterRow(configuration);
+        this._resetFilterListeners();
+        TableUtils.setFilterRow(configuration, this._filterListenerController.signal);
     }
     expandRow(configuration, rowIndex, template) {
         return TableUtils.expandRow(configuration, rowIndex, template);
@@ -117,4 +125,10 @@ export class TableAdapter extends BaseAdapter {
     setRowClickAttributes(tableElement, allowClick) {
         TableUtils.setRowClickAttributes(tableElement, allowClick);
     }
+    _resetFilterListeners() {
+        this._filterListenerController.abort();
+        this._filterListenerController = new AbortController();
+    }
 }
+
+export { TableAdapter };

package/esm/table/table-constants.d.ts

@@ -1,8 +1,3 @@
-/**
- * @license
- * Copyright Tyler Technologies, Inc. 
- * License: Apache-2.0
- */
 export declare const TABLE_CONSTANTS: {
     elementName: "forge-table";
     classes: {
@@ -29,6 +24,12 @@ export declare const TABLE_CONSTANTS: {
         TABLE_HEAD_CELL_SORTED_DESCENDING: string;
         TABLE_HEAD_CELL_SORT_ORDER: string;
         TABLE_HEAD_CELL_SORT_ORDER_HIDDEN: string;
+        TABLE_FOOT: string;
+        TABLE_FOOT_ROW: string;
+        TABLE_FOOT_CELL: string;
+        TABLE_FOOT_HEADER: string;
+        TABLE_FOOT_CELL_CONTAINER: string;
+        TABLE_FOOT_CELL_TEXT: string;
         TABLE_BODY: string;
         TABLE_BODY_ROW: string;
         TABLE_BODY_ROW_SELECTED: string;
@@ -74,6 +75,7 @@ export declare const TABLE_CONSTANTS: {
         SELECT_CHECKBOX_ALIGNMENT: string;
         TOOLTIP_SELECT: string;
         TOOLTIP_SELECT_ALL: string;
+        INCLUDE_FOOTER: string;
         CHECKBOX_TYPE: string;
         CUSTOM_CELL_TEMPLATE: string;
         CUSTOM_CELL_TEMPLATE_STOP_PROPAGATION: string;
@@ -90,6 +92,8 @@ export declare const TABLE_CONSTANTS: {
         COLUMN_RESIZE: string;
         BEFORE_BODY_RENDERED: string;
         BODY_RENDERED: string;
+        BEFORE_FOOTER_RENDERED: string;
+        FOOTER_RENDERED: string;
     };
     strings: {
         SELECT_ALL: string;

package/esm/table/table-constants.js

@@ -1,9 +1,11 @@
 /**
  * @license
- * Copyright Tyler Technologies, Inc. 
+ * Copyright Tyler Technologies, Inc.
  * License: Apache-2.0
  */
-import { COMPONENT_NAME_PREFIX } from '../constants';
+
+import { COMPONENT_NAME_PREFIX } from '../constants.js';
+
 const elementName = `${COMPONENT_NAME_PREFIX}table`;
 const classes = {
     TABLE: 'forge-table',
@@ -29,6 +31,12 @@ const classes = {
     TABLE_HEAD_CELL_SORTED_DESCENDING: 'forge-table-head__cell--sorted-descending',
     TABLE_HEAD_CELL_SORT_ORDER: 'forge-table-head__cell__sort-order',
     TABLE_HEAD_CELL_SORT_ORDER_HIDDEN: 'forge-table-head__cell__sort-order--hidden',
+    TABLE_FOOT: 'forge-table-foot',
+    TABLE_FOOT_ROW: 'forge-table-foot__row',
+    TABLE_FOOT_CELL: 'forge-table-foot__cell',
+    TABLE_FOOT_HEADER: 'forge-table-foot__header',
+    TABLE_FOOT_CELL_CONTAINER: 'forge-table-foot__cell-container',
+    TABLE_FOOT_CELL_TEXT: 'forge-table-foot__cell-text',
     TABLE_BODY: 'forge-table-body',
     TABLE_BODY_ROW: 'forge-table-body__row',
     TABLE_BODY_ROW_SELECTED: 'forge-table-body__row--selected',
@@ -75,6 +83,7 @@ const attributes = {
     SELECT_CHECKBOX_ALIGNMENT: 'select-checkbox-alignment',
     TOOLTIP_SELECT: 'tooltip-select',
     TOOLTIP_SELECT_ALL: 'tooltip-select-all',
+    INCLUDE_FOOTER: 'include-footer',
     // Internal
     CHECKBOX_TYPE: 'forge-checkbox-type',
     CUSTOM_CELL_TEMPLATE: 'data-cell-template',
@@ -91,7 +100,9 @@ const events = {
     INITIALIZED: `${elementName}-initialized`,
     COLUMN_RESIZE: `${elementName}-column-resize`,
     BEFORE_BODY_RENDERED: `${elementName}-before-body-rendered`,
-    BODY_RENDERED: `${elementName}-body-rendered`
+    BODY_RENDERED: `${elementName}-body-rendered`,
+    BEFORE_FOOTER_RENDERED: `${elementName}-before-footer-rendered`,
+    FOOTER_RENDERED: `${elementName}-footer-rendered`
 };
 const strings = {
     SELECT_ALL: 'select-all',
@@ -106,7 +117,7 @@ const numbers = {
     MIN_RESIZE_WIDTH: 100,
     RESIZE_HOVER_DURATION: 150
 };
-export const TABLE_CONSTANTS = {
+const TABLE_CONSTANTS = {
     elementName,
     classes,
     selectors,
@@ -116,3 +127,5 @@ export const TABLE_CONSTANTS = {
     icons,
     numbers
 };
+
+export { TABLE_CONSTANTS };

package/esm/table/table-core.d.ts

@@ -1,10 +1,5 @@
-/**
- * @license
- * Copyright Tyler Technologies, Inc. 
- * License: Apache-2.0
- */
-import { ITableAdapter } from './table-adapter';
-import { IColumnConfiguration, TableLayoutType, TableViewTemplate, TableRowCreatedCallback, TableCellCreatedCallback, TableHeaderSelectAllTemplate, CellAlign, TableSelectTooltipCallback } from './types';
+import { ITableAdapter } from './table-adapter.js';
+import { IColumnConfiguration, TableLayoutType, TableViewTemplate, TableRowCreatedCallback, TableCellCreatedCallback, TableHeaderSelectAllTemplate, CellAlign, TableSelectTooltipCallback } from './types.js';
 export interface ITableCore {
     data: any[];
     columnConfigurations: IColumnConfiguration[];
@@ -15,6 +10,7 @@ export interface ITableCore {
     fixedHeaders: boolean;
     layoutType: TableLayoutType;
     wrapContent: boolean;
+    includeFooter: boolean;
     resizable: boolean;
     minResizeWidth: number;
     allowRowClick: boolean;
@@ -59,6 +55,7 @@ export declare class TableCore implements ITableCore {
     private _fixedHeaders;
     private _layoutType;
     private _wrapContent;
+    private _includeFooter;
     private _resizable;
     private _minResizeWidth;
     private _multiColumnSort;
@@ -129,6 +126,9 @@ export declare class TableCore implements ITableCore {
     /** Controls whether the content in each cell wraps or not */
     get wrapContent(): boolean;
     set wrapContent(value: boolean);
+    /** Controls whether the table includes a footer row or not. */
+    get includeFooter(): boolean;
+    set includeFooter(value: boolean);
     /** Controls whether the columns are resizable or not. */
     get resizable(): boolean;
     set resizable(value: boolean);
@@ -197,6 +197,10 @@ export declare class TableCore implements ITableCore {
      * Renders the table body only.
      */
     private _renderBody;
+    /**
+     * Renders the table footer only.
+     */
+    private _renderFooter;
     private _renderSelections;
     /**
      * Expands a collapsed row.

package/esm/table/table-core.js

@@ -1,15 +1,17 @@
 /**
  * @license
- * Copyright Tyler Technologies, Inc. 
+ * Copyright Tyler Technologies, Inc.
  * License: Apache-2.0
  */
-import { createPredicate, getEventPath, isNumber, isObject, ItemManager, matchesPredicate } from '@tylertech/forge-core';
-import { MultiSortManager } from './multi-sort-manager';
-import { TABLE_CONSTANTS } from './table-constants';
-import { TableRow } from './table-row';
-import { TableUtils } from './table-utils';
-import { SortDirection, CellAlign } from './types';
-export class TableCore {
+
+import { ItemManager, isObject, isNumber, createPredicate, matchesPredicate, getEventPath } from '@tylertech/forge-core';
+import { MultiSortManager } from './multi-sort-manager.js';
+import { TABLE_CONSTANTS } from './table-constants.js';
+import { TableRow } from './table-row.js';
+import { TableUtils } from './table-utils.js';
+import { CellAlign, SortDirection } from './types.js';
+
+class TableCore {
     constructor(_adapter) {
         this._adapter = _adapter;
         // Backing model values
@@ -24,6 +26,7 @@ export class TableCore {
         this._fixedHeaders = false;
         this._layoutType = TABLE_CONSTANTS.strings.DEFAULT_LAYOUT_TYPE;
         this._wrapContent = true;
+        this._includeFooter = false;
         this._resizable = false;
         this._minResizeWidth = TABLE_CONSTANTS.numbers.MIN_RESIZE_WIDTH;
         this._multiColumnSort = false;
@@ -79,6 +82,9 @@ export class TableCore {
         }
         this._tableRows = this._data.map(data => new TableRow(data, this._selectionManager.exists(data)));
         this._renderBody();
+        if (this._includeFooter) {
+            this._renderFooter();
+        }
     }
     get data() {
         return this._data.map(o => ({ ...o })); // Shallow clone
@@ -133,7 +139,8 @@ export class TableCore {
             selectAllTemplate: this._selectAllTemplate,
             selectCheckboxAlignment: this._selectCheckboxAlignment,
             tooltipSelect: this._tooltipSelect,
-            tooltipSelectAll: this._tooltipSelectAll
+            tooltipSelectAll: this._tooltipSelectAll,
+            includeFooter: this._includeFooter
         };
     }
     /** Controls the visibility of the select column. */
@@ -252,6 +259,16 @@ export class TableCore {
             this._adapter.setWrapContentState(this._tableConfiguration);
         }
     }
+    /** Controls whether the table includes a footer row or not. */
+    get includeFooter() {
+        return this._includeFooter;
+    }
+    set includeFooter(value) {
+        if (this._includeFooter !== value) {
+            this._includeFooter = value;
+            this.render();
+        }
+    }
     /** Controls whether the columns are resizable or not. */
     get resizable() {
         return this._resizable;
@@ -458,6 +475,17 @@ export class TableCore {
         this._renderSelections();
         this._adapter.emitHostEvent(TABLE_CONSTANTS.events.BODY_RENDERED, undefined, false);
     }
+    /**
+     * Renders the table footer only.
+     */
+    _renderFooter() {
+        if (!this._rendered) {
+            return;
+        }
+        this._adapter.emitHostEvent(TABLE_CONSTANTS.events.BEFORE_FOOTER_RENDERED, undefined, false);
+        this._adapter.recreateTableFoot(this._tableConfiguration);
+        this._adapter.emitHostEvent(TABLE_CONSTANTS.events.FOOTER_RENDERED, undefined, false);
+    }
     _renderSelections() {
         if (this.select) {
             this._isAllSelected = this._getSelectAllState();
@@ -958,3 +986,5 @@ export class TableCore {
         }
     }
 }
+
+export { TableCore };

package/esm/table/table-row.d.ts

@@ -1,8 +1,3 @@
-/**
- * @license
- * Copyright Tyler Technologies, Inc. 
- * License: Apache-2.0
- */
 /**
  * Represents a row within the table.
  */

package/esm/table/table-row.js

@@ -1,14 +1,17 @@
 /**
  * @license
- * Copyright Tyler Technologies, Inc. 
+ * Copyright Tyler Technologies, Inc.
  * License: Apache-2.0
  */
+
 /**
  * Represents a row within the table.
  */
-export class TableRow {
+class TableRow {
     constructor(data, selected = false) {
         this.data = data;
         this.selected = selected;
     }
 }
+
+export { TableRow };

package/esm/table/table-utils.d.ts

@@ -1,10 +1,5 @@
-/**
- * @license
- * Copyright Tyler Technologies, Inc. 
- * License: Apache-2.0
- */
-import { TableRow } from './table-row';
-import { CellAlign, ITableConfiguration, SortDirection, TableHeaderSelectAllTemplate, TableViewTemplate, TableSelectTooltipCallback } from './types';
+import { TableRow } from './table-row.js';
+import { CellAlign, ITableConfiguration, SortDirection, TableHeaderSelectAllTemplate, TableViewTemplate, TableSelectTooltipCallback } from './types.js';
 /**
  * Provides facilities for creating and manipulating a table component.
  */
@@ -13,9 +8,15 @@ export declare class TableUtils {
      * Creates a table using the provided configuration.
      * @param {ITableConfiguration} configuration The table configuration.
      */
-    static createTable(configuration: ITableConfiguration): void;
+    static createTable(configuration: ITableConfiguration, signal: AbortSignal): void;
     private static _setTableHead;
     private static _setTableBody;
+    private static _setTableFoot;
+    /**
+     * Destroys and recreates the table footer section only.
+     * @param {ITableConfiguration} configuration The table configuration.
+     */
+    static recreateTableFoot(configuration: ITableConfiguration): void;
     /**
      * Destroys and recreates the table body section only.
      * @param {ITableConfiguration} configuration The table configuration.
@@ -36,6 +37,12 @@ export declare class TableUtils {
      * @param tableElement The table element.
      */
     private static _createTableHead;
+    /**
+     * 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.
+     */
+    private static _createTableFoot;
     /**
      * Sets the sort direction on the table to the provided column.
      * @param tableElement
@@ -158,6 +165,7 @@ export declare class TableUtils {
      * Creates the select column as the first column in the table.
      * @param theadElement
      * @param tbodyElement
+     * @param tfootElement
      */
     private static _createSelectColumn;
     /**
@@ -166,6 +174,12 @@ export declare class TableUtils {
      * @param {boolean} showSelectAll Whether to show the select all checkbox or not.
      */
     private static _createHeadSelectColumn;
+    /**
+     * 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.
+     */
+    private static _createFootSelectColumn;
     /**
      * Creates the select column in the table body.
      * @param {HTMLTableSectionElement} tbodyElement The table body element.
@@ -316,7 +330,7 @@ export declare class TableUtils {
      * Controls the visibility of the table filter row.
      * @param {ITableConfiguration} configuration The table configuration.
      */
-    static setFilterRow(configuration: ITableConfiguration): void;
+    static setFilterRow(configuration: ITableConfiguration, signal: AbortSignal): void;
     /**
      * Creates the table filter row element.
      * @param {ITableConfiguration} configuration The table configuration.