@impartner/design-components 2.1.1 → 2.2.0

package/lib/alert/alert.component.d.ts

@@ -30,6 +30,10 @@ export declare class AlertComponent {
      * Removes the Alert icon provided by the theme or projected into the icon area using the `icon` directive.
      */
     hideIcon: boolean;
+    /**
+     * Removes the Alert border and background colors to only style icon and text according to theme.
+     */
+    borderless: boolean;
     /**
      * Allows the Alert to be dismissed.
      */
@@ -42,5 +46,5 @@ export declare class AlertComponent {
     get themeIconName(): string;
     closeAlert(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<AlertComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<AlertComponent, "impdc-alert, [impdc-alert]", never, { "theme": { "alias": "theme"; "required": false; }; "show": { "alias": "show"; "required": false; }; "headingText": { "alias": "headingText"; "required": false; }; "bodyText": { "alias": "bodyText"; "required": false; }; "inline": { "alias": "inline"; "required": false; }; "hideIcon": { "alias": "hideIcon"; "required": false; }; "dismissible": { "alias": "dismissible"; "required": false; }; }, { "dismiss": "dismiss"; }, never, ["[icon]", "[heading]", "*", "[action]"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AlertComponent, "impdc-alert, [impdc-alert]", never, { "theme": { "alias": "theme"; "required": false; }; "show": { "alias": "show"; "required": false; }; "headingText": { "alias": "headingText"; "required": false; }; "bodyText": { "alias": "bodyText"; "required": false; }; "inline": { "alias": "inline"; "required": false; }; "hideIcon": { "alias": "hideIcon"; "required": false; }; "borderless": { "alias": "borderless"; "required": false; }; "dismissible": { "alias": "dismissible"; "required": false; }; }, { "dismiss": "dismiss"; }, never, ["[icon]", "[heading]", "*", "[action]"], false, never>;
 }

package/lib/datetime-picker/components/datetime-picker/datetime-picker.component.d.ts

@@ -47,7 +47,7 @@ export declare class DatetimePickerComponent extends _DatetimePickerComponentBas
     protected readonly formGroup: import("@angular/forms").FormGroup<{
         date: FormControl<any>;
         time: FormControl<any>;
-        useMeridian: FormControl<boolean>;
+        use24hrTime: FormControl<boolean>;
     }>;
     protected cvaOnChange: (_: any) => void;
     protected cvaOnTouched: () => void;
@@ -139,8 +139,8 @@ export declare class DatetimePickerComponent extends _DatetimePickerComponentBas
     protected _focused: boolean;
     readonly controlType: string;
     readonly supportsAffixes: boolean;
-    protected get useMeridian(): boolean;
-    protected get useMeridianLabelText(): string;
+    protected get use24hrTime(): boolean;
+    protected get use24hrTimeLabelText(): string;
     protected handleFocusOut(evt: FocusEvent): void;
     private _getValueFromFormModel;
     private _dateIsOutsideCurrentMonth;

package/lib/datetime-picker/constants/datetime-picker-defaults.d.ts

@@ -1,4 +1,4 @@
 import { NgbDateStruct } from '@ng-bootstrap/ng-bootstrap';
-export declare const DEFAULT_USE_MERIDIAN_LABEL = "Use 24-hour format";
+export declare const DEFAULT_USE_24HR_TIME_LABEL = "Use 24-hour format";
 export declare const DEFAULT_MIN_DATE: NgbDateStruct;
 export declare const DEFAULT_MAX_DATE: NgbDateStruct;

package/lib/file-upload/file-upload.module.d.ts

@@ -9,6 +9,6 @@ import * as i7 from "../icon/icon.module";
 export declare class FileUploadModule {
     constructor();
     static ɵfac: i0.ɵɵFactoryDeclaration<FileUploadModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<FileUploadModule, [typeof i1.FileDropDirective, typeof i2.FileUploadComponent, typeof i3.HumanReadableByteSizePipe], [typeof i4.CommonModule, typeof i5.FormsModule, typeof i6.ButtonModule, typeof i7.IconModule], [typeof i7.IconModule, typeof i1.FileDropDirective, typeof i2.FileUploadComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<FileUploadModule, [typeof i1.FileDropDirective, typeof i2.FileUploadComponent, typeof i3.HumanReadableByteSizePipe], [typeof i4.CommonModule, typeof i5.FormsModule, typeof i6.ButtonModule, typeof i7.IconModule], [typeof i7.IconModule, typeof i1.FileDropDirective, typeof i2.FileUploadComponent, typeof i3.HumanReadableByteSizePipe]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<FileUploadModule>;
 }

package/lib/modal/modal.component.d.ts

@@ -60,6 +60,10 @@ export declare class ModalComponent implements OnInit, OnDestroy, IInteractableC
      * Shows a backdrop behind the Modal.
      */
     backdrop: boolean;
+    /**
+     * When `true`, Modal will not automatically render a fallback "accept" button in the footer.
+     */
+    noFallback: boolean;
     /**
      * Contains the dismiss button content projection.
      */
@@ -108,5 +112,5 @@ export declare class ModalComponent implements OnInit, OnDestroy, IInteractableC
     private _setupEventHandling;
     private _disableEventHandling;
     static ɵfac: i0.ɵɵFactoryDeclaration<ModalComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ModalComponent, "impdc-modal", never, { "show": { "alias": "show"; "required": false; }; "theme": { "alias": "theme"; "required": false; }; "size": { "alias": "size"; "required": false; }; "iconName": { "alias": "iconName"; "required": false; }; "iconTheme": { "alias": "iconTheme"; "required": false; }; "titleText": { "alias": "titleText"; "required": false; }; "acceptText": { "alias": "acceptText"; "required": false; }; "dismissable": { "alias": "dismissable"; "required": false; }; "fade": { "alias": "fade"; "required": false; }; "backdrop": { "alias": "backdrop"; "required": false; }; }, { "dismiss": "dismiss"; "deny": "deny"; "accept": "accept"; }, never, ["*", "[dismiss]", "[deny]", "[accept]"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ModalComponent, "impdc-modal", never, { "show": { "alias": "show"; "required": false; }; "theme": { "alias": "theme"; "required": false; }; "size": { "alias": "size"; "required": false; }; "iconName": { "alias": "iconName"; "required": false; }; "iconTheme": { "alias": "iconTheme"; "required": false; }; "titleText": { "alias": "titleText"; "required": false; }; "acceptText": { "alias": "acceptText"; "required": false; }; "dismissable": { "alias": "dismissable"; "required": false; }; "fade": { "alias": "fade"; "required": false; }; "backdrop": { "alias": "backdrop"; "required": false; }; "noFallback": { "alias": "noFallback"; "required": false; }; }, { "dismiss": "dismiss"; "deny": "deny"; "accept": "accept"; }, never, ["*", "[dismiss]", "[deny]", "[accept]"], false, never>;
 }

package/lib/progress-bar/progress-bar.component.d.ts

@@ -12,11 +12,20 @@ export declare class ProgressBarComponent {
      * The right/status text of the Progress Bar.
      */
     statusText: string;
+    /**
+     * The color of the progress bar
+     */
+    barColor: string;
+    /**
+     * The color of the label and status
+     */
+    darkText: boolean;
     /**
      * The current value of the Progress Bar represented as a number between 0 and 100.
      */
     progressPercentage: number;
+    get textClass(): string;
     constructor();
     static ɵfac: i0.ɵɵFactoryDeclaration<ProgressBarComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ProgressBarComponent, "impdc-progress-bar", never, { "labelText": { "alias": "labelText"; "required": false; }; "statusText": { "alias": "statusText"; "required": false; }; "progressPercentage": { "alias": "progressPercentage"; "required": false; }; }, {}, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ProgressBarComponent, "impdc-progress-bar", never, { "labelText": { "alias": "labelText"; "required": false; }; "statusText": { "alias": "statusText"; "required": false; }; "barColor": { "alias": "barColor"; "required": false; }; "darkText": { "alias": "darkText"; "required": false; }; "progressPercentage": { "alias": "progressPercentage"; "required": false; }; }, {}, never, never, false, never>;
 }

package/lib/table/components/bulk-actions/bulk-actions.component.d.ts

@@ -1,4 +1,9 @@
 import * as i0 from "@angular/core";
+/**
+ * A container component for projecting displays and controls for performing bulk actions upon one
+ * or more selected table rows. Elements to be projected should be decorated with `[selectedTotal]`
+ * and `[bulkAction]` attributes.
+ */
 export declare class TableBulkActionsComponent {
     static ɵfac: i0.ɵɵFactoryDeclaration<TableBulkActionsComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<TableBulkActionsComponent, "impdc-table-bulk-actions", never, {}, {}, never, ["[selectedTotal]", "[bulkAction]"], false, never>;

package/lib/table/constants/table.constants.d.ts

@@ -6,5 +6,4 @@ export declare const SELECTED_ROWS_PER_PAGE: {
     text: string;
 };
 export declare const ROWS_PER_PAGE_GROUP: ITableCellOption[];
-export declare const SORT_COLUMN_INDEX = 0;
 export declare const DEBOUNCE_TIME = 500;

package/lib/table/containers/table.component.d.ts

@@ -1,12 +1,13 @@
 import { DatePipe, DecimalPipe, PercentPipe } from '@angular/common';
-import { ChangeDetectorRef, EventEmitter, OnChanges, SimpleChanges } from '@angular/core';
+import { ChangeDetectorRef, EventEmitter, OnChanges, SimpleChanges, TemplateRef } from '@angular/core';
 import { TableColumnType } from '../enumerations/index';
-import { ICustomCellRendererComponents, ISortByPayload, ITableActionsColumnDef, ITableEventPayload, ITableRowActionPayload, ITableRowItem, ITableRowItemValue, ITableRowItemValueTypes, TableColumnDef } from '../interfaces/index';
+import { ICollapsibleRowContentContext, ICustomCellRendererComponents, ISortByPayload, ITableActionsColumnDef, ITableEventPayload, ITableRowActionPayload, ITableRowCollapseChange, ITableRowItem, ITableRowItemValueTypes, TableColumnDef } from '../interfaces/index';
 import { CheckboxChangeEvent } from '../../form-field';
 import { ComponentTheme } from '../../../types';
 import { BrandedDirective } from '../../branding';
 import { PaginationComponent } from '../../pagination';
 import { TableBulkActionsComponent } from '../components';
+import { NgbCollapse } from '@ng-bootstrap/ng-bootstrap';
 import * as i0 from "@angular/core";
 /**
  * The `TableComponent` (`<impdc-table`) is a data table component.
@@ -29,11 +30,19 @@ export declare class TableComponent implements OnChanges {
      * 2) `colorGetter`- allows an `ITableColumnDef` to delegate the responsibility of cell color to a function of the `ITableRowItem` determined by the developer.
      * 3) `color` - a property of an `ITableColumnDef`.
      */
-    columnDefs: TableColumnDef[];
+    columnDefs: TableColumnDef<any>[];
     /**
      * Whether the table is striped.
      */
     striped: boolean;
+    /**
+     * Whether table rows should apply hover styles when hovered over via cursor.
+     */
+    hover: boolean;
+    /**
+     * The layout algorithm to be used when rendering the table.
+     */
+    layout: 'auto' | 'fixed';
     /**
      * Whether individual rows can be selected. Will be `true` if explicitly set to `true` or `canSelectAllRows` is `true`.
      */
@@ -70,6 +79,18 @@ export declare class TableComponent implements OnChanges {
      * For a given `ITableColumnDef` in the `columnDefs` input, the `cellRendererComponent` property should be set to the key of the registered component in this input.
      */
     customCellComponents?: ICustomCellRendererComponents;
+    /**
+     * An optional template for content that may be rendered below a row in an collapsible view. Value can either be an Angular template or a function that can evaluated
+     * to resolve to a template. The template will be rendered with a provided `ICollapsibleRowContentContext` object as template context, with the current `ITableRowData`
+     * implicitly available as a default template key.
+     */
+    collapsibleTemplate: TemplateRef<ICollapsibleRowContentContext<any>> | null | ((row: any) => TemplateRef<ICollapsibleRowContentContext<any>> | null);
+    /**
+     * The clickable control that will trigger expansion and collapse of content when using `collapsibleTemplate` functionality.
+     * When set to `button`, the collapsible content's state can only be toggled from a clickable button at the start of the row.
+     * When set to `row`, the entire row will become a clickable trigger.
+     */
+    collapsibleTrigger: 'button' | 'row';
     /**
      * Event emitted when one or multiple rows are selected. Emits `(string | number)[]` payload.
      */
@@ -81,20 +102,24 @@ export declare class TableComponent implements OnChanges {
     /**
      * Event emitted when a row link is clicked. Emits `ITableEventPayload` payload.
      */
-    readonly linkClick: EventEmitter<ITableEventPayload<ITableRowItem>>;
+    readonly linkClick: EventEmitter<ITableEventPayload<any>>;
     /**
      * Event emitted when a row action is clicked. Emits an `ITableRowActionPayload` payload.
      */
-    readonly rowActionClick: EventEmitter<ITableRowActionPayload<ITableRowItem>>;
+    readonly rowActionClick: EventEmitter<ITableRowActionPayload<any>>;
+    /**
+     * Event emitted when a row input value is changed. Emitted cells of `columnType` `SingleSelect`, `MultiSelect`, `Input`, `Boolean` or `Icon`.
+     * Not emitted if column definition property `disabled` = `true`. Emits `ITableEventPayload` payload.
+     */
+    readonly inputChange: EventEmitter<ITableEventPayload<any>>;
+    /**
+     * Event emitted when a row with collapsible content has its collapse state changed.
+     */
+    readonly rowCollapseChange: EventEmitter<ITableRowCollapseChange<any>>;
     /** @ignore */
     paginationComponent?: PaginationComponent;
     /** @ignore */
     bulkActions?: TableBulkActionsComponent;
-    /**
-     * Event emitted when a row input value is changed. Emitted cells of `columnType` `SinglSelect`, `MultiSelect`, `Input`, `Boolean` or `Icon`.
-     * Not emitted if column definition property `disabled` = `true`. Emits `ITableEventPayload` payload.
-     */
-    readonly inputChange: EventEmitter<ITableEventPayload<ITableRowItem>>;
     /** @ignore */
     readonly cellType: typeof TableColumnType;
     /** @ignore */
@@ -111,23 +136,43 @@ export declare class TableComponent implements OnChanges {
     private readonly _inputChange;
     constructor(_datePipe: DatePipe, _percentPipe: PercentPipe, _decmialPipe: DecimalPipe, _changeDetectorRef: ChangeDetectorRef, _branded: BrandedDirective);
     ngOnChanges(changes: SimpleChanges): void;
+    /** @ignore */
     getMailToValue(columnIndex: number, currentRow: ITableRowItem): string;
+    /** @ignore */
     getStringValue(columnIndex: number, currentRow: ITableRowItem): string;
+    /** @ignore */
     getValue(columnIndex: number, currentRow: ITableRowItem): string | string[];
-    getRawValue(columnIndex: number, currentRow: ITableRowItem): ITableRowItemValueTypes<ITableRowItemValue>;
+    /** @ignore */
+    getRawValue(columnIndex: number, currentRow: ITableRowItem): ITableRowItemValueTypes;
+    /** @ignore */
     getCellColor(columnDefinition: TableColumnDef, item: ITableRowItem): string;
+    /** @ignore */
     getTheme(columnDefinition: TableColumnDef, item: ITableRowItem): ComponentTheme;
+    /** @ignore */
     isSortedColumn(columnIndex: number): boolean;
+    /** @ignore */
     isRowSelected(id: string | number): boolean;
+    /** @ignore */
     handleSelectAll(event: CheckboxChangeEvent): void;
+    /** @ignore */
     handleSort(columnIndex: number): void;
+    /** @ignore */
     handleRowSelect(event: CheckboxChangeEvent, rowId: number | string): void;
+    /** @ignore */
     handleCellValueChange(columnIndex: number, rowIndex: number, value: string | number | boolean | string[]): void;
-    handleLinkClick(columnIndex: number, item: ITableRowItem): void;
+    /** @ignore */
+    handleLinkClick(columnIndex: number, item: ITableRowItem, event: Event): void;
+    /** @ignore */
     handleActionClick(columnIndex: number, item: ITableRowItem, actionApiName: string): void;
     protected columnDefIsActions(columnDef: TableColumnDef<any>): columnDef is ITableActionsColumnDef<any>;
+    protected tryToggleCollapse(collapsibleForRowResult: {
+        template: TemplateRef<ICollapsibleRowContentContext> | null;
+    }, ngbCollapse: NgbCollapse, event: Event, source: 'button' | 'row'): void;
+    protected getCollapsibleTemplateForRow(row: ITableRowItem): {
+        template: TemplateRef<ICollapsibleRowContentContext> | null;
+    };
     private _getColumnDefByIndex;
     private _getValue;
     static ɵfac: i0.ɵɵFactoryDeclaration<TableComponent, [null, null, null, null, { optional: true; host: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<TableComponent, "impdc-table", never, { "loading": { "alias": "loading"; "required": false; }; "columnDefs": { "alias": "columnDefs"; "required": false; }; "striped": { "alias": "striped"; "required": false; }; "canSelectRows": { "alias": "canSelectRows"; "required": false; }; "canSelectAllRows": { "alias": "canSelectAllRows"; "required": false; }; "selectPlaceholder": { "alias": "selectPlaceholder"; "required": false; }; "sortColumnIndex": { "alias": "sortColumnIndex"; "required": false; }; "sortDirection": { "alias": "sortDirection"; "required": false; }; "tableData": { "alias": "tableData"; "required": false; }; "selectedRowIds": { "alias": "selectedRowIds"; "required": false; }; "customCellComponents": { "alias": "customCellComponents"; "required": false; }; }, { "rowSelect": "rowSelect"; "sortBy": "sortBy"; "linkClick": "linkClick"; "rowActionClick": "rowActionClick"; "inputChange": "inputChange"; }, ["paginationComponent", "bulkActions"], ["impdc-table-bulk-actions", "[impdcTableBulkActions]", "[noData]", "impdc-pagination, div[impdc-pagination]"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TableComponent, "impdc-table", never, { "loading": { "alias": "loading"; "required": false; }; "columnDefs": { "alias": "columnDefs"; "required": false; }; "striped": { "alias": "striped"; "required": false; }; "hover": { "alias": "hover"; "required": false; }; "layout": { "alias": "layout"; "required": false; }; "canSelectRows": { "alias": "canSelectRows"; "required": false; }; "canSelectAllRows": { "alias": "canSelectAllRows"; "required": false; }; "selectPlaceholder": { "alias": "selectPlaceholder"; "required": false; }; "sortColumnIndex": { "alias": "sortColumnIndex"; "required": false; }; "sortDirection": { "alias": "sortDirection"; "required": false; }; "tableData": { "alias": "tableData"; "required": false; }; "selectedRowIds": { "alias": "selectedRowIds"; "required": false; }; "customCellComponents": { "alias": "customCellComponents"; "required": false; }; "collapsibleTemplate": { "alias": "collapsibleTemplate"; "required": false; }; "collapsibleTrigger": { "alias": "collapsibleTrigger"; "required": false; }; }, { "rowSelect": "rowSelect"; "sortBy": "sortBy"; "linkClick": "linkClick"; "rowActionClick": "rowActionClick"; "inputChange": "inputChange"; "rowCollapseChange": "rowCollapseChange"; }, ["paginationComponent", "bulkActions"], ["impdc-table-bulk-actions", "[impdcTableBulkActions]", "[noData]", "impdc-pagination, div[impdc-pagination]"], false, never>;
 }

package/lib/table/directives/collapse-monitor.directive.d.ts

@@ -0,0 +1,12 @@
+import { EventEmitter } from '@angular/core';
+import * as i0 from "@angular/core";
+import * as i1 from "@ng-bootstrap/ng-bootstrap";
+export declare class CollapseMonitorDirective {
+    private readonly _ngbCollapse;
+    readonly collapsed: import("@angular/core").WritableSignal<boolean>;
+    readonly ngbCollapsing: import("@angular/core").WritableSignal<boolean>;
+    readonly collapseChange: EventEmitter<boolean>;
+    constructor();
+    static ɵfac: i0.ɵɵFactoryDeclaration<CollapseMonitorDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<CollapseMonitorDirective, "[impdcCollapseMonitor]", ["impdcCollapseMonitor"], {}, { "collapseChange": "collapseChange"; }, never, never, false, [{ directive: typeof i1.NgbCollapse; inputs: { "ngbCollapse": "impdcCollapseMonitor"; }; outputs: {}; }]>;
+}

package/lib/table/directives/index.d.ts

@@ -1,2 +1,3 @@
+export * from './collapse-monitor.directive';
 export * from './table-inject-component.directive';
 export * from './table.directive';

package/lib/table/directives/table-inject-component.directive.d.ts

@@ -1,11 +1,11 @@
 import { ComponentFactoryResolver, OnInit, ViewContainerRef } from '@angular/core';
-import { ICustomCellRendererComponents, ITableRowItem, ITableRowItemValue, ITableRowItemValueTypes, TableColumnDef } from '../interfaces/index';
+import { ICustomCellRendererComponents, ITableRowItem, ITableRowItemValueTypes, TableColumnDef } from '../interfaces/index';
 import * as i0 from "@angular/core";
 export declare class TableInjectComponentDirective implements OnInit {
     private readonly _viewContainerRef;
     private readonly _componentFactoryResolver;
     columnDef: TableColumnDef;
-    value: ITableRowItemValueTypes<ITableRowItemValue>;
+    value: ITableRowItemValueTypes;
     rowItem: ITableRowItem;
     customCellComponents: ICustomCellRendererComponents;
     constructor(_viewContainerRef: ViewContainerRef, _componentFactoryResolver: ComponentFactoryResolver);

package/lib/table/directives/table.directive.d.ts

@@ -1,15 +1,23 @@
 import * as i0 from "@angular/core";
 /**
- * The `TableDirective` (`<table impdcTable`) that adds Hex styling to a `table` element.
- * To use, import `TableModule` or another module that imports and exports that module from `@impartner/design-components`.
+ * `TableDirective` (`table[impdcTable]`) is a directive that adds Hex styling to a `table` element.
  */
 export declare class TableDirective {
     /**
      * Stripes every other row in a slightly darker background color.
      */
     striped: boolean;
+    /**
+     * Whether table rows should apply hover styles when hovered over via cursor.
+     */
+    hover: boolean;
+    /**
+     * The layout algorithm to be used when rendering the table.
+     */
+    layout: 'auto' | 'fixed';
     private classTable;
     private get classTableStriped();
+    private get classTableHover();
     static ɵfac: i0.ɵɵFactoryDeclaration<TableDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<TableDirective, "table[impdcTable]", never, { "striped": { "alias": "striped"; "required": false; }; }, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<TableDirective, "table[impdcTable]", never, { "striped": { "alias": "striped"; "required": false; }; "hover": { "alias": "hover"; "required": false; }; "layout": { "alias": "layout"; "required": false; }; }, {}, never, never, false, never>;
 }

package/lib/table/index.d.ts

@@ -1,7 +1,7 @@
 export * from './table.module';
 export * from './containers';
 export * from './components';
-export * from './directives';
+export { TableDirective, TableInjectComponentDirective } from './directives';
 export * from './helpers';
 export * from './enumerations';
 export * from './interfaces';

package/lib/table/interfaces/cell-renderer.interface.d.ts

@@ -1,6 +1,13 @@
-import { ITableRowItem, ITableRowItemValue, ITableRowItemValueTypes } from './table-row-item.interface';
-export interface ICellRenderer<T = ITableRowItem, P = object> {
-    value: ITableRowItemValueTypes<ITableRowItemValue>;
+import { ITableRowItem, ITableRowItemValueTypes } from './table-row-item.interface';
+/**
+ * The base interface type implemented by Angular components to be used as custom renderers for
+ * `TableComponent` table cells.
+ */
+export interface ICellRenderer<T extends ITableRowItem = ITableRowItem, P = object> {
+    /** The resolved raw value for the cell, as per the column defintion. */
+    value: ITableRowItemValueTypes;
+    /** The row object for the current table row. */
     rowItem: T;
+    /** The `cellRendererParams` value from the original column definition. */
     params?: P;
 }

package/lib/table/interfaces/collapsible-row-content-context.interface.d.ts

@@ -0,0 +1,39 @@
+import { ITableRowItem } from './table-row-item.interface';
+/**
+ * An interface for context objects that will be provided when rendering collapsible row content
+ * for `TableComponent` rows.
+ */
+export interface ICollapsibleRowContentContext<T extends ITableRowItem = ITableRowItem> {
+    /**
+     * The current row object.
+     */
+    $implicit: T;
+    /**
+     * Whether the collapsible row is collapsed.
+     */
+    collapsed: boolean;
+    /**
+     * Whether the table row is selected, if row selection is available.
+     */
+    selected: boolean;
+    /**
+     * Index of the parent row in the currently displayed data set.
+     */
+    index: number;
+    /**
+     * Whether the parent row is the first row in the displayed data set.
+     */
+    first: boolean;
+    /**
+     * Whether the parent row is the last row in the displayed data set.
+     */
+    last: boolean;
+    /**
+     * Whether the parent row's index in the currently displayed data set is even.
+     */
+    even: boolean;
+    /**
+     * Whether the parent row's index in the currently displayed data set is odd.
+     */
+    odd: boolean;
+}

package/lib/table/interfaces/index.d.ts

@@ -8,3 +8,5 @@ export * from './custom-cell-renderer-components.type';
 export * from './table-cell-option.interface';
 export * from './table-row-action.interface';
 export * from './table-row-action-payload.interface';
+export * from './collapsible-row-content-context.interface';
+export * from './table-row-collapse-change.interface';

package/lib/table/interfaces/sort-by-payload.interface.d.ts

@@ -1,5 +1,11 @@
+/**
+ * An interface for events emitted from `TableComponent` when the user requests to sort by a particular column.
+ */
 export interface ISortByPayload {
+    /** The field the user has requested to sort by, if the sorted column is mapped to one. */
     field: string;
+    /** The index of the relevant column in the table. */
     columnIndex: number;
+    /** The direction or order in which the data is expected to be sorted. */
     direction: 'asc' | 'desc';
 }

package/lib/table/interfaces/table-column-defs.type.d.ts

@@ -3,27 +3,51 @@ import { ComponentTheme } from '../../../types';
 import { ITableRowItem } from './table-row-item.interface';
 import { ITableCellOption } from './table-cell-option.interface';
 import { ITableRowAction } from './table-row-action.interface';
-export interface ITableColumnDef<T = ITableRowItem> {
+/**
+ * An interface for specifying all of the configuration necessary for a column of cells in `TableComponent` tables.
+ */
+export interface ITableColumnDef<T extends ITableRowItem = ITableRowItem> {
+    /** The type indicating how the column cells should should be displayed and their data interpreted. */
     readonly columnType: TableColumnType;
+    /** The title of the column to be displayed in the table header. */
     title: string;
+    /** The row object property from which cell data will be retrieved. */
     field?: string;
+    /** A callable function that can be evaluated against the row object to resolve the cell value. */
     valueGetter?: (record: T) => string;
+    /** A default color/theme that can be used when rendering the table cell. */
     color?: ComponentTheme;
+    /** A callable function that can be evaluated against the row object to resolve a color/theme for the table cell. */
     colorGetter?: (record: T) => ComponentTheme;
+    /** A row object property from which a table cell's color/theme may be retrieved. */
     fieldColor?: string;
+    /** Whether the column is sortable. */
     sorted?: boolean;
-    boldedText?: boolean;
-    truncated?: number;
+    /**
+     * The name/key of the Angular component passed in the TableComponent's `[customCellComponents]` input that should
+     * be used to render cells in this column.
+     */
     cellRendererComponent?: string;
+    /**
+     * Additional parameters that will be passed to the custom cell renderer's `[params]` input property at render time.
+     */
     cellRendererParams?: object;
+    /** Whether to remove the default padding around cells for this column.*/
     noPadding?: boolean;
+    /** Available options for selection when `columnType` is `'SingleSelect'` or `'MultiSelect'`. */
     values?: ITableCellOption[];
+    /** The name of the FontAwesome icon to be displayed when `columnType` is `'Icon'`. */
     iconName?: string;
+    /** Whether to disable the input control when `columnType` is `'Boolean'`, `'SingleSelect'`, or `'MultiSelect'`. */
     disabled?: boolean;
+    /** @ignore */
+    boldedText?: boolean;
+    /** @ignore */
+    truncated?: number;
 }
-export interface ITableActionsColumnDef<T = ITableRowItem> extends ITableColumnDef<T> {
+export interface ITableActionsColumnDef<T extends ITableRowItem = ITableRowItem> extends ITableColumnDef<T> {
     readonly columnType: TableColumnType.Actions;
-    actions: ITableRowAction[];
+    actions: ITableRowAction<T>[];
     actionType: 'icon' | 'button' | 'link';
 }
-export type TableColumnDef<T = ITableRowItem> = ITableActionsColumnDef<T> | ITableColumnDef<T>;
+export type TableColumnDef<T extends ITableRowItem = ITableRowItem> = ITableActionsColumnDef<T> | ITableColumnDef<T>;

package/lib/table/interfaces/table-event-payload.interface.d.ts

@@ -1,6 +1,13 @@
 import { ITableRowItem } from './table-row-item.interface';
-export interface ITableEventPayload<T = ITableRowItem> {
+/**
+ * An interface for user input events originating from `TableComponent` rows, including clicked links and changed
+ * values in editable cells.
+ */
+export interface ITableEventPayload<T extends ITableRowItem = ITableRowItem> {
+    /** The row from which the event originated. */
     item: T;
+    /** The table column index from which the event originated. */
     columnIndex: number;
+    /** The new or selected value that triggered the event, in the case of an editable table cell. */
     value?: string | number | boolean | string[];
 }

package/lib/table/interfaces/table-row-action-payload.interface.d.ts

@@ -1,6 +1,13 @@
 import { ITableRowItem } from './table-row-item.interface';
-export interface ITableRowActionPayload<T = ITableRowItem> {
+/**
+ * An interface for events emitted from `TableComponent` when a user clicks or interacts with a row-level action
+ * button, link, or icon.
+ */
+export interface ITableRowActionPayload<T extends ITableRowItem = ITableRowItem> {
+    /** The row object corresponding to the action taken. */
     item: T;
+    /** The specific column index the action originated from. */
     columnIndex: number;
+    /** The defined `apiName` for the action that triggered the event. */
     actionApiName: string;
 }

package/lib/table/interfaces/table-row-action.interface.d.ts

@@ -1,9 +1,17 @@
 import { ComponentTheme } from '../../../types';
 import { ITableRowItem } from './table-row-item.interface';
-export interface ITableRowAction {
+/**
+ * An interface for declaring row-level actions that a user may trigger.
+ */
+export interface ITableRowAction<T extends ITableRowItem = ITableRowItem> {
+    /** A uniquely identifying string that event listeners will use to discern which action was triggered. */
     apiName: string;
+    /** The text to display for the action. */
     text: string;
+    /** The name of the FontAwesome icon to use, should the action be rendered as an icon. */
     iconName: string;
+    /** The color theme to use when displaying the action as an icon. */
     theme?: ComponentTheme;
-    isVisible?: (rowItem: ITableRowItem) => boolean;
+    /** A function to be evaluated against the row object in order to conditionally render an action for a given row. */
+    isVisible?: (rowItem: T) => boolean;
 }

package/lib/table/interfaces/table-row-collapse-change.interface.d.ts

@@ -0,0 +1,11 @@
+import { ITableRowItem } from './table-row-item.interface';
+/**
+ * An interface for events emitted from `TableComponent` when a user triggers the expansion or collapse of additional
+ * row-level content.
+ */
+export interface ITableRowCollapseChange<T extends ITableRowItem = ITableRowItem> {
+    /** The row object for the row that is expanding or collapsing. */
+    readonly row: T;
+    /** Whether the row is in a collapsed state. */
+    readonly collapsed: boolean;
+}

package/lib/table/interfaces/table-row-item.interface.d.ts

@@ -1,9 +1,8 @@
 export interface IIdentifiable {
     id: string | number;
 }
-export type ITableRowItemValueTypes<T = never> = string | number | boolean | Array<string | number> | T | Array<T>;
-export interface ITableRowItemBase<T = never> {
-    [field: string]: ITableRowItemValueTypes<T>;
+export type ITableRowItemValueTypes = string | number | boolean | Date | object | Array<any> | null;
+export interface ITableRowItemValue {
+    [field: string]: ITableRowItemValueTypes;
 }
-export type ITableRowItemValue = ITableRowItemBase<ITableRowItemBase<ITableRowItemBase>>;
 export type ITableRowItem = IIdentifiable & ITableRowItemValue;

package/lib/table/table.module.d.ts

@@ -1,23 +1,24 @@
 import * as i0 from "@angular/core";
-import * as i1 from "./directives/table.directive";
-import * as i2 from "./containers/table.component";
-import * as i3 from "./components/column-heading/column-heading.component";
-import * as i4 from "./directives/table-inject-component.directive";
-import * as i5 from "./components/bulk-actions/bulk-actions.component";
-import * as i6 from "./components/row-actions/row-actions.component";
-import * as i7 from "@angular/common";
-import * as i8 from "../button/button.module";
-import * as i9 from "../pagination/pagination.module";
-import * as i10 from "../icon/icon.module";
-import * as i11 from "../form-field/impdc-forms.module";
-import * as i12 from "@angular/forms";
-import * as i13 from "../spinner/spinner.module";
-import * as i14 from "../badge/badge.module";
-import * as i15 from "../branding/branding.module";
-import * as i16 from "@ng-bootstrap/ng-bootstrap";
+import * as i1 from "./directives/collapse-monitor.directive";
+import * as i2 from "./directives/table.directive";
+import * as i3 from "./containers/table.component";
+import * as i4 from "./components/column-heading/column-heading.component";
+import * as i5 from "./directives/table-inject-component.directive";
+import * as i6 from "./components/bulk-actions/bulk-actions.component";
+import * as i7 from "./components/row-actions/row-actions.component";
+import * as i8 from "@angular/common";
+import * as i9 from "../button/button.module";
+import * as i10 from "../pagination/pagination.module";
+import * as i11 from "../icon/icon.module";
+import * as i12 from "../form-field/impdc-forms.module";
+import * as i13 from "@angular/forms";
+import * as i14 from "../spinner/spinner.module";
+import * as i15 from "../badge/badge.module";
+import * as i16 from "../branding/branding.module";
+import * as i17 from "@ng-bootstrap/ng-bootstrap";
 export declare class TableModule {
     constructor();
     static ɵfac: i0.ɵɵFactoryDeclaration<TableModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<TableModule, [typeof i1.TableDirective, typeof i2.TableComponent, typeof i3.ColumnHeadingComponent, typeof i4.TableInjectComponentDirective, typeof i5.TableBulkActionsComponent, typeof i6.RowActionsComponent], [typeof i7.CommonModule, typeof i8.ButtonModule, typeof i9.PaginationModule, typeof i10.IconModule, typeof i11.ImpdcFormsModule, typeof i12.FormsModule, typeof i13.SpinnerModule, typeof i14.BadgeModule, typeof i15.BrandingModule, typeof i16.NgbDropdownModule], [typeof i8.ButtonModule, typeof i1.TableDirective, typeof i3.ColumnHeadingComponent, typeof i5.TableBulkActionsComponent, typeof i9.PaginationModule, typeof i2.TableComponent, typeof i10.IconModule, typeof i4.TableInjectComponentDirective, typeof i15.BrandingModule, typeof i6.RowActionsComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<TableModule, [typeof i1.CollapseMonitorDirective, typeof i2.TableDirective, typeof i3.TableComponent, typeof i4.ColumnHeadingComponent, typeof i5.TableInjectComponentDirective, typeof i6.TableBulkActionsComponent, typeof i7.RowActionsComponent], [typeof i8.CommonModule, typeof i9.ButtonModule, typeof i10.PaginationModule, typeof i11.IconModule, typeof i12.ImpdcFormsModule, typeof i13.FormsModule, typeof i14.SpinnerModule, typeof i15.BadgeModule, typeof i16.BrandingModule, typeof i17.NgbDropdownModule, typeof i17.NgbCollapseModule], [typeof i9.ButtonModule, typeof i2.TableDirective, typeof i4.ColumnHeadingComponent, typeof i6.TableBulkActionsComponent, typeof i10.PaginationModule, typeof i3.TableComponent, typeof i11.IconModule, typeof i5.TableInjectComponentDirective, typeof i16.BrandingModule, typeof i7.RowActionsComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<TableModule>;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@impartner/design-components",
-  "version": "2.1.1",
+  "version": "2.2.0",
   "author": "Impartner",
   "license": "BSD-3-Clause",
   "private": false,