@impartner/design-components 2.1.2 → 2.2.0

package/fesm2022/impartner-design-components.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Injectable, Component, Input, NgModule, ViewEncapsulation, ViewChild, HostBinding, Directive, InjectionToken, Host, Optional, SkipSelf, Inject, ChangeDetectionStrategy, ContentChild, ContentChildren, inject, EventEmitter, Output, Self, booleanAttribute, numberAttribute, Attribute, ChangeDetectorRef, NgZone, ElementRef, ViewChildren, TemplateRef, HostListener, Pipe, DestroyRef } from '@angular/core';
+import { Injectable, Component, Input, NgModule, ViewEncapsulation, ViewChild, HostBinding, Directive, InjectionToken, Host, Optional, SkipSelf, Inject, ChangeDetectionStrategy, ContentChild, ContentChildren, inject, EventEmitter, Output, Self, booleanAttribute, numberAttribute, Attribute, ChangeDetectorRef, NgZone, ElementRef, ViewChildren, signal, TemplateRef, HostListener, Pipe, DestroyRef } from '@angular/core';
 import { BehaviorSubject, map, distinctUntilChanged, shareReplay, Subject, takeUntil, merge, tap, startWith, combineLatest, switchMap, take, defer, debounceTime, filter, fromEvent } from 'rxjs';
 import * as i1 from '@angular/common';
 import { CommonModule, NgClass, AsyncPipe, DatePipe, PercentPipe, DecimalPipe, TranslationWidth } from '@angular/common';
@@ -11,7 +11,7 @@ import { debounceTime as debounceTime$1 } from 'rxjs/operators';
 import sanitizeHtml from 'sanitize-html';
 import { nanoid } from 'nanoid';
 import * as i3 from '@ng-bootstrap/ng-bootstrap';
-import { NgbDropdownItem, NgbDropdown, NgbDropdownModule, NgbDatepickerI18n, NgbDate, NgbCalendar, NgbDatepickerMonth, NgbDateAdapter, NgbDatepicker, NgbDatepickerModule, NgbTimepickerModule, NgbTimeAdapter, NgbTypeaheadModule } from '@ng-bootstrap/ng-bootstrap';
+import { NgbDropdownItem, NgbDropdown, NgbDropdownModule, NgbCollapse, NgbCollapseModule, NgbDatepickerI18n, NgbDate, NgbCalendar, NgbDatepickerMonth, NgbDateAdapter, NgbDatepicker, NgbDatepickerModule, NgbTimepickerModule, NgbTimeAdapter, NgbTypeaheadModule } from '@ng-bootstrap/ng-bootstrap';
 
 const FontAwesomeIconThemes = ['solid', 'regular', 'light'];
 const FontAwesomeIcons = [
@@ -3530,7 +3530,6 @@ const ROWS_PER_PAGE_GROUP = [
         label: '100'
     }
 ];
-const SORT_COLUMN_INDEX = 0;
 const DEBOUNCE_TIME = 500;
 
 const IS_SELECTED_PROPERTY = 'isSelected';
@@ -7269,6 +7268,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.1", ngImpor
                 type: Output
             }] } });
 
+/**
+ * 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.
+ */
 class TableBulkActionsComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: TableBulkActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.1", type: TableBulkActionsComponent, selector: "impdc-table-bulk-actions", ngImport: i0, template: "<div class=\"table-bulk-actions\">\n  <div class=\"selected-total\">\n    <ng-content select=\"[selectedTotal]\"></ng-content>\n  </div>\n  <div class=\"bulk-actions\">\n    <ng-content select=\"[bulkAction]\"></ng-content>\n  </div>\n</div>\n", styles: [".table-bulk-actions{display:flex;flex-direction:row;align-items:center;font-weight:400}.table-bulk-actions .selected-total{border-right:1px solid var(--impd-color-gray-200, \"#e5e7eb\");padding-right:1.6rem}.table-bulk-actions .bulk-actions{padding-left:1.6rem;display:flex;flex-direction:row;gap:1.6rem}\n"] }); }
@@ -7350,9 +7354,46 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.1", ngImpor
                 type: Input
             }] } });
 
+class CollapseMonitorDirective {
+    constructor() {
+        this._ngbCollapse = inject(NgbCollapse);
+        this.collapsed = signal(true);
+        this.ngbCollapsing = signal(true);
+        this.collapseChange = new EventEmitter();
+        // eagerly assert true as soon as *something* is expected to be shown, then assert false when we know we've fully collapsed
+        this._ngbCollapse.ngbCollapseChange.subscribe(value => {
+            this.ngbCollapsing.set(value);
+            if (!value) {
+                this.collapsed.set(value);
+                this.collapseChange.emit(value);
+            }
+        });
+        this._ngbCollapse.hidden.subscribe(() => {
+            this.collapsed.set(true);
+            this.collapseChange.emit(true);
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: CollapseMonitorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.1", type: CollapseMonitorDirective, selector: "[impdcCollapseMonitor]", outputs: { collapseChange: "collapseChange" }, exportAs: ["impdcCollapseMonitor"], hostDirectives: [{ directive: i3.NgbCollapse, inputs: ["ngbCollapse", "impdcCollapseMonitor"] }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: CollapseMonitorDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    exportAs: 'impdcCollapseMonitor',
+                    selector: '[impdcCollapseMonitor]',
+                    hostDirectives: [
+                        {
+                            directive: NgbCollapse,
+                            inputs: ['ngbCollapse: impdcCollapseMonitor']
+                        }
+                    ]
+                }]
+        }], ctorParameters: () => [], propDecorators: { collapseChange: [{
+                type: Output
+            }] } });
+
 /**
- * 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.
  */
 class TableDirective {
     constructor() {
@@ -7360,13 +7401,24 @@ class TableDirective {
          * Stripes every other row in a slightly darker background color.
          */
         this.striped = false;
+        /**
+         * Whether table rows should apply hover styles when hovered over via cursor.
+         */
+        this.hover = false;
+        /**
+         * The layout algorithm to be used when rendering the table.
+         */
+        this.layout = 'auto';
         this.classTable = true;
     }
     get classTableStriped() {
         return this.striped;
     }
+    get classTableHover() {
+        return this.hover;
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: TableDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.1", type: TableDirective, selector: "table[impdcTable]", inputs: { striped: "striped" }, host: { properties: { "class.table": "this.classTable", "class.table-striped": "this.classTableStriped" } }, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.1", type: TableDirective, selector: "table[impdcTable]", inputs: { striped: "striped", hover: "hover", layout: "layout" }, host: { properties: { "style.table-layout": "this.layout", "class.table": "this.classTable", "class.table-striped": "this.classTableStriped", "class.table-hover": "this.classTableHover" } }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: TableDirective, decorators: [{
             type: Directive,
@@ -7375,12 +7427,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.1", ngImpor
                 }]
         }], propDecorators: { striped: [{
                 type: Input
+            }], hover: [{
+                type: Input
+            }], layout: [{
+                type: HostBinding,
+                args: ['style.table-layout']
+            }, {
+                type: Input
             }], classTable: [{
                 type: HostBinding,
                 args: ['class.table']
             }], classTableStriped: [{
                 type: HostBinding,
                 args: ['class.table-striped']
+            }], classTableHover: [{
+                type: HostBinding,
+                args: ['class.table-hover']
             }] } });
 
 class TableInjectComponentDirective {
@@ -7469,9 +7531,14 @@ class TableComponent {
     }
     /** @ignore */
     get tableSpan() {
-        return this.canSelectRows
-            ? this.columnDefs.length + 1
-            : this.columnDefs.length;
+        let cols = this.columnDefs.length;
+        if (this.canSelectRows) {
+            cols++;
+        }
+        if (this.collapsibleTemplate) {
+            cols++;
+        }
+        return cols;
     }
     constructor(_datePipe, _percentPipe, _decmialPipe, _changeDetectorRef, _branded) {
         this._datePipe = _datePipe;
@@ -7495,6 +7562,14 @@ class TableComponent {
          * Whether the table is striped.
          */
         this.striped = true;
+        /**
+         * Whether table rows should apply hover styles when hovered over via cursor.
+         */
+        this.hover = true;
+        /**
+         * The layout algorithm to be used when rendering the table.
+         */
+        this.layout = 'auto';
         /**
          * The placeholder text and empty value display text for `<impdc-select>` instances in cells with a `ITableColumnDef` `columnType` = `SingleSelect` or `MultiSelect`.
          */
@@ -7502,7 +7577,7 @@ class TableComponent {
         /**
          * The `columnDefs` index of the currently sorted column.
          */
-        this.sortColumnIndex = SORT_COLUMN_INDEX;
+        this.sortColumnIndex = 0;
         /**
          * The direction of the currently sorted column.
          */
@@ -7511,6 +7586,18 @@ class TableComponent {
          * The table row data as an array of `ITableRowItem`.
          */
         this.tableData = [];
+        /**
+         * 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.
+         */
+        this.collapsibleTemplate = 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.
+         */
+        this.collapsibleTrigger = 'button';
         /**
          * Event emitted when one or multiple rows are selected. Emits `(string | number)[]` payload.
          */
@@ -7527,15 +7614,19 @@ class TableComponent {
          * Event emitted when a row action is clicked. Emits an `ITableRowActionPayload` payload.
          */
         this.rowActionClick = new EventEmitter();
-        /** @ignore */
-        this.paginationComponent = undefined;
-        /** @ignore */
-        this.bulkActions = undefined;
         /**
-         * Event emitted when a row input value is changed. Emitted cells of `columnType` `SinglSelect`, `MultiSelect`, `Input`, `Boolean` or `Icon`.
+         * 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.
          */
         this.inputChange = new EventEmitter();
+        /**
+         * Event emitted when a row with collapsible content has its collapse state changed.
+         */
+        this.rowCollapseChange = new EventEmitter();
+        /** @ignore */
+        this.paginationComponent = undefined;
+        /** @ignore */
+        this.bulkActions = undefined;
         /** @ignore */
         this.cellType = TableColumnType;
         /** @ignore */
@@ -7564,6 +7655,7 @@ class TableComponent {
             }
         }
     }
+    /** @ignore */
     getMailToValue(columnIndex, currentRow) {
         const { columnType, truncated: truncated } = this._getColumnDefByIndex(columnIndex);
         let value = this._getValue(columnIndex, currentRow);
@@ -7573,6 +7665,7 @@ class TableComponent {
         value = value ? `mailto:${value}` : value;
         return String(value);
     }
+    /** @ignore */
     getStringValue(columnIndex, currentRow) {
         const value = this.getValue(columnIndex, currentRow);
         if (Array.isArray(value)) {
@@ -7580,6 +7673,7 @@ class TableComponent {
         }
         return String(value);
     }
+    /** @ignore */
     getValue(columnIndex, currentRow) {
         const { columnType, truncated: truncated } = this._getColumnDefByIndex(columnIndex);
         let value = this._getValue(columnIndex, currentRow);
@@ -7641,6 +7735,7 @@ class TableComponent {
         }
         return String(value);
     }
+    /** @ignore */
     getRawValue(columnIndex, currentRow) {
         const { field } = this._getColumnDefByIndex(columnIndex);
         if (!field) {
@@ -7648,19 +7743,24 @@ class TableComponent {
         }
         return currentRow[field] || '';
     }
+    /** @ignore */
     getCellColor(columnDefinition, item) {
         return TableThemeHelper.getCellColor(columnDefinition, item);
     }
+    /** @ignore */
     getTheme(columnDefinition, item) {
         return (TableThemeHelper.getTheme(columnDefinition, item) ||
             ComponentTheme.Primary);
     }
+    /** @ignore */
     isSortedColumn(columnIndex) {
         return columnIndex === this.sortColumnIndex;
     }
+    /** @ignore */
     isRowSelected(id) {
         return this.selectedRowIds.includes(id);
     }
+    /** @ignore */
     handleSelectAll(event) {
         if (!this.canSelectAllRows || !this.tableData) {
             return;
@@ -7675,6 +7775,7 @@ class TableComponent {
         this.allSelected = this.selectedRowIds.length >= this.tableData.length;
         this.rowSelect.emit(this.selectedRowIds);
     }
+    /** @ignore */
     handleSort(columnIndex) {
         if (columnIndex === this.sortColumnIndex) {
             this.sortDirection = this.sortDirection === 'asc' ? 'desc' : 'asc';
@@ -7690,6 +7791,7 @@ class TableComponent {
             direction: this.sortDirection
         });
     }
+    /** @ignore */
     handleRowSelect(event, rowId) {
         if (!this.canSelectRows) {
             return;
@@ -7709,6 +7811,7 @@ class TableComponent {
         this.allSelected = this.selectedRowIds.length >= this.tableData.length;
         this.rowSelect.emit(this.selectedRowIds);
     }
+    /** @ignore */
     handleCellValueChange(columnIndex, rowIndex, value) {
         const { field, columnType } = this._getColumnDefByIndex(columnIndex);
         let currentValue = value;
@@ -7724,12 +7827,16 @@ class TableComponent {
         });
         this._changeDetectorRef.detectChanges();
     }
-    handleLinkClick(columnIndex, item) {
+    /** @ignore */
+    handleLinkClick(columnIndex, item, event) {
+        event.preventDefault();
+        event.stopPropagation();
         this.linkClick.emit({
             item,
             columnIndex
         });
     }
+    /** @ignore */
     handleActionClick(columnIndex, item, actionApiName) {
         this.rowActionClick.emit({
             item,
@@ -7740,6 +7847,21 @@ class TableComponent {
     columnDefIsActions(columnDef) {
         return columnDef.columnType === TableColumnType.Actions;
     }
+    tryToggleCollapse(collapsibleForRowResult, ngbCollapse, event, source) {
+        if (collapsibleForRowResult.template &&
+            (this.collapsibleTrigger === 'row' || this.collapsibleTrigger === source)) {
+            ngbCollapse.toggle();
+            event.stopPropagation();
+        }
+    }
+    getCollapsibleTemplateForRow(row) {
+        return {
+            template: this.collapsibleTemplate &&
+                typeof this.collapsibleTemplate === 'function'
+                ? this.collapsibleTemplate(row)
+                : this.collapsibleTemplate
+        };
+    }
     _getColumnDefByIndex(columnIndex) {
         return this.columnDefs[columnIndex];
     }
@@ -7756,11 +7878,11 @@ class TableComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: TableComponent, deps: [{ token: i1.DatePipe }, { token: i1.PercentPipe }, { token: i1.DecimalPipe }, { token: i0.ChangeDetectorRef }, { token: BrandedDirective, host: true, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.1", type: TableComponent, selector: "impdc-table", inputs: { loading: "loading", columnDefs: "columnDefs", striped: "striped", canSelectRows: "canSelectRows", canSelectAllRows: "canSelectAllRows", selectPlaceholder: "selectPlaceholder", sortColumnIndex: "sortColumnIndex", sortDirection: "sortDirection", tableData: "tableData", selectedRowIds: "selectedRowIds", customCellComponents: "customCellComponents" }, outputs: { rowSelect: "rowSelect", sortBy: "sortBy", linkClick: "linkClick", rowActionClick: "rowActionClick", inputChange: "inputChange" }, queries: [{ propertyName: "paginationComponent", first: true, predicate: PaginationComponent, descendants: true }, { propertyName: "bulkActions", first: true, predicate: TableBulkActionsComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "@if (tableData) {\n<table impdcTable [striped]=\"striped\">\n  <thead>\n    @if (!!bulkActions) {\n    <tr>\n      <th [attr.colspan]=\"tableSpan\" scope=\"col\" class=\"bulk-action-column\">\n        <ng-content select=\"impdc-table-bulk-actions\"></ng-content>\n        <ng-content select=\"[impdcTableBulkActions]\"></ng-content>\n      </th>\n    </tr>\n    }\n    <tr>\n      @if (canSelectRows) {\n      <th\n        scope=\"col\"\n        [ngClass]=\"{\n          'heading-below-bulk-actions': !!bulkActions\n        }\">\n        @if (canSelectAllRows) {\n        <div>\n          <impdc-checkbox\n            ngModel\n            [checked]=\"allSelected\"\n            [indeterminate]=\"someSelected\"\n            (change)=\"handleSelectAll($event)\"></impdc-checkbox>\n        </div>\n        }\n      </th>\n      } @for (columnDef of columnDefs; track columnDef; let columnIndex =\n      $index) {\n      <th\n        scope=\"col\"\n        [ngClass]=\"{\n          'sorted-column': isSortedColumn(columnIndex),\n          'sortable-column': columnDef.sorted,\n          'heading-below-bulk-actions': !!bulkActions\n        }\"\n        (click)=\"handleSort(columnIndex)\">\n        <impdc-column-heading\n          [isSortable]=\"columnDef.sorted || false\"\n          [columnIndex]=\"columnIndex\"\n          [sortColumnIndex]=\"sortColumnIndex\"\n          [direction]=\"sortDirection\"\n          [text]=\"columnDef.title\"\n          (sort)=\"handleSort($event)\">\n        </impdc-column-heading>\n      </th>\n      }\n    </tr>\n  </thead>\n  <tbody>\n    @if (loading) {\n    <tr>\n      <td [attr.colspan]=\"tableSpan\" class=\"data-loading\">\n        <impdc-spinner></impdc-spinner>\n      </td>\n    </tr>\n    } @else { @for (row of tableData; track row; let rowIndex = $index) {\n    <tr>\n      @if (canSelectRows) {\n      <td>\n        <div class=\"select-column\">\n          <impdc-checkbox\n            [ngModel]=\"isRowSelected(row.id)\"\n            (change)=\"handleRowSelect($event, row.id)\"></impdc-checkbox>\n        </div>\n      </td>\n      }\n      <td\n        *ngFor=\"let columnDef of columnDefs; index as colIndex; last as isLast\"\n        [ngClass]=\"{\n          'col-no-padding': !!columnDef.noPadding,\n          'actions-column': columnDef.columnType === cellType.Actions\n        }\">\n        <div>\n          @switch (columnDef.columnType) { @case (cellType.Badge) {\n          <span>\n            <impdc-badge\n              [text]=\"getStringValue(colIndex, row)\"\n              [theme]=\"getTheme(columnDef, row)\">\n            </impdc-badge>\n          </span>\n          } @case (cellType.Link) {\n          <span (click)=\"handleLinkClick(colIndex, row)\">\n            @if (!branded) {\n            <a>\n              {{ getValue(colIndex, row) }}\n            </a>\n            } @else {\n            <a impdcBranded>\n              {{ getValue(colIndex, row) }}\n            </a>\n            }\n          </span>\n          } @case (cellType.Url) {\n          <span>\n            @if (!branded) {\n            <a target=\"_blank\" [attr.href]=\"getValue(colIndex, row)\">\n              {{ getValue(colIndex, row) }}\n            </a>\n            } @else {\n            <a\n              impdcBranded\n              target=\"_blank\"\n              [attr.href]=\"getValue(colIndex, row)\">\n              {{ getValue(colIndex, row) }}\n            </a>\n            }\n          </span>\n          } @case (cellType.Email) {\n          <span>\n            @if (!branded) {\n            <a\n              target=\"_blank\"\n              [attr.href]=\"'mailto:' + getValue(colIndex, row)\">\n              {{ getValue(colIndex, row) }}\n            </a>\n            } @else {\n            <a impdcBranded [attr.href]=\"getMailToValue(colIndex, row)\">\n              {{ getValue(colIndex, row) }}\n            </a>\n            }\n          </span>\n          } @case (cellType.Input) {\n          <span>\n            <input\n              impdcInput\n              type=\"text\"\n              class=\"{{ getCellColor(columnDef, row) }}\"\n              [ngModel]=\"getValue(colIndex, row)\"\n              (ngModelChange)=\"\n                handleCellValueChange(colIndex, rowIndex, $event)\n              \" />\n          </span>\n          } @case (cellType.Boolean) {\n          <span>\n            @if (columnDef.disabled && getValue(colIndex, row) === 'true') {\n            <span\n              impdc-icon\n              name=\"check\"\n              class=\"{{ getCellColor(columnDef, row) }}\"></span>\n            } @else if (!columnDef.disabled) {\n            <impdc-checkbox\n              [checked]=\"getValue(colIndex, row) === 'true'\"\n              [isSwitch]=\"true\"\n              (change)=\"\n                handleCellValueChange(colIndex, rowIndex, $event.checked)\n              \"></impdc-checkbox>\n            }\n          </span>\n          } @case (cellType.SingleSelect) {\n          <span>\n            <impdc-select\n              [ngModel]=\"getValue(colIndex, row)\"\n              [disabled]=\"columnDef.disabled || false\"\n              [placeholder]=\"selectPlaceholder\"\n              allowClear=\"true\"\n              (selectionChange)=\"\n                handleCellValueChange(colIndex, rowIndex, $event.value)\n              \">\n              @for (value of (columnDef.values || []); track value) {\n              <impdc-select-option\n                [value]=\"value.value\"\n                [label]=\"value.label\"></impdc-select-option>\n              }\n            </impdc-select>\n          </span>\n          } @case (cellType.MultiSelect) {\n          <span>\n            <impdc-select\n              [ngModel]=\"getValue(colIndex, row)\"\n              [disabled]=\"columnDef.disabled || false\"\n              [placeholder]=\"selectPlaceholder\"\n              multiple=\"true\"\n              (selectionChange)=\"\n                handleCellValueChange(colIndex, rowIndex, $event.value)\n              \">\n              @for (value of (columnDef.values || []); track value) {\n              <impdc-select-option\n                [value]=\"value.value\"\n                [label]=\"value.label\"></impdc-select-option>\n              }\n            </impdc-select>\n          </span>\n          } @case (cellType.CellRender) {\n          <span class=\"{{ getCellColor(columnDef, row) }}\">\n            <ng-template\n              impdcTableInjectComponent\n              [columnDef]=\"columnDef\"\n              [rowItem]=\"row\"\n              [customCellComponents]=\"customCellComponents || {}\"\n              [value]=\"getRawValue(colIndex, row)\"></ng-template>\n          </span>\n          } @case (cellType.Icon) {\n          <span>\n            <span\n              impdc-icon\n              [name]=\"columnDef.iconName\"\n              class=\"{{ getCellColor(columnDef, row) }}\"></span>\n          </span>\n          } @case (cellType.Actions) {\n          <span>\n            <!-- will always return 'true', but needed to satisfy the type engine -->\n            @if (columnDefIsActions(columnDef)) {\n            <impdc-row-actions\n              [columnDef]=\"columnDef\"\n              [rowItem]=\"row\"\n              [lastColumn]=\"isLast\"\n              (actionClick)=\"\n                handleActionClick(colIndex, row, $event)\n              \"></impdc-row-actions>\n            }\n          </span>\n          } @default {\n          <span class=\"{{ getCellColor(columnDef, row) }}\">\n            {{ getValue(colIndex, row) }}\n          </span>\n          } }\n        </div>\n      </td>\n    </tr>\n    } @empty {\n    <tr>\n      <td [attr.colspan]=\"tableSpan\" class=\"no-data\">\n        <ng-content select=\"[noData]\"></ng-content>\n      </td>\n    </tr>\n    } }\n  </tbody>\n  <tfoot>\n    @if (paginationComponent) {\n    <tr>\n      <td [attr.colspan]=\"tableSpan\">\n        <ng-content\n          select=\"impdc-pagination, div[impdc-pagination]\"></ng-content>\n      </td>\n    </tr>\n    }\n  </tfoot>\n</table>\n}\n", styles: [".bulk-action-container{display:flex;flex-direction:row;border:1px solid var(--impd-color-gray-200);border-top-left-radius:.6rem;border-top-right-radius:.6rem;border-bottom:0px}.bulk-action-container .bulk-action-checkbox{padding:1.6rem 2rem}.bulk-action-container .bulk-actions{display:flex;flex-direction:row;gap:.4rem}.col-no-padding{padding:0!important}.data-loading{height:var(--impd-size-80);vertical-align:middle;text-align:center}.no-data{vertical-align:middle;text-align:center}.select-row{display:flex;height:var(--impd-size-4);align-items:center;justify-items:end;border-radius:var(--impd-border-radius-default)}.heading-with-checkbox{padding-left:5px;padding-right:10px}.actions-column{width:.1%;white-space:nowrap}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: BrandedDirective, selector: "[impdcBranded]" }, { kind: "component", type: IconComponent, selector: "impdc-icon, [impdc-icon]", inputs: ["name", "theme", "size"] }, { kind: "component", type: CheckboxComponent, selector: "impdc-checkbox", inputs: ["tabIndex", "id", "label", "description", "isSwitch", "switchIcons", "inline", "layout", "checked", "indeterminate", "disabled", "errorStateMatcher", "required"], outputs: ["change", "indeterminateChange"], exportAs: ["impdcCheckControl"] }, { kind: "component", type: SelectOptionComponent, selector: "impdc-select-option", inputs: ["value", "label", "disabled"] }, { kind: "component", type: SelectComponent, selector: "impdc-select", inputs: ["disabled", "tabIndex", "search", "placeholder", "required", "compareWith", "dropdownContainer", "errorStateMatcher", "allowClear", "multiple", "multipleDisplay"], outputs: ["selectionChange", "valueChange", "searchTextChanges"], exportAs: ["impdcSelect"] }, { kind: "directive", type: InputDirective, selector: "input[impdcInput], textarea[impdcInput], select[impdcNativeSelect]", inputs: ["disabled", "id", "type", "required", "readonly", "errorStateMatcher", "value"], exportAs: ["impdcInput"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: SpinnerComponent, selector: "impdc-spinner, div[impdc-spinner]", inputs: ["accessibilityText"] }, { kind: "component", type: BadgeComponent, selector: "impdc-badge, [impdc-badge]", inputs: ["text", "icon", "theme", "size", "hideBg", "rounded", "dismissable"], outputs: ["dismiss"] }, { kind: "directive", type: TableDirective, selector: "table[impdcTable]", inputs: ["striped"] }, { kind: "component", type: ColumnHeadingComponent, selector: "impdc-column-heading", inputs: ["isSortable", "columnIndex", "sortColumnIndex", "direction", "text"], outputs: ["sort"] }, { kind: "directive", type: TableInjectComponentDirective, selector: "[impdcTableInjectComponent]", inputs: ["columnDef", "value", "rowItem", "customCellComponents"] }, { kind: "component", type: RowActionsComponent, selector: "impdc-row-actions", inputs: ["columnDef", "rowItem", "lastColumn"], outputs: ["actionClick"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.1", type: TableComponent, selector: "impdc-table", inputs: { loading: "loading", columnDefs: "columnDefs", striped: "striped", hover: "hover", layout: "layout", canSelectRows: "canSelectRows", canSelectAllRows: "canSelectAllRows", selectPlaceholder: "selectPlaceholder", sortColumnIndex: "sortColumnIndex", sortDirection: "sortDirection", tableData: "tableData", selectedRowIds: "selectedRowIds", customCellComponents: "customCellComponents", collapsibleTemplate: "collapsibleTemplate", collapsibleTrigger: "collapsibleTrigger" }, outputs: { rowSelect: "rowSelect", sortBy: "sortBy", linkClick: "linkClick", rowActionClick: "rowActionClick", inputChange: "inputChange", rowCollapseChange: "rowCollapseChange" }, queries: [{ propertyName: "paginationComponent", first: true, predicate: PaginationComponent, descendants: true }, { propertyName: "bulkActions", first: true, predicate: TableBulkActionsComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "@if (tableData) {\n<table\n  impdcTable\n  [striped]=\"striped && !collapsibleTemplate\"\n  [layout]=\"layout\"\n  [hover]=\"hover\">\n  <thead>\n    @if (!!bulkActions) {\n    <tr>\n      <th [attr.colspan]=\"tableSpan\" scope=\"col\" class=\"bulk-action-column\">\n        <ng-content select=\"impdc-table-bulk-actions\"></ng-content>\n        <ng-content select=\"[impdcTableBulkActions]\"></ng-content>\n      </th>\n    </tr>\n    }\n    <tr>\n      @if (collapsibleTemplate) {\n      <th\n        scope=\"col\"\n        [class.heading-below-bulk-actions]=\"!!bulkActions\"\n        class=\"impdc-table-collapsible-content-row-button-container\"></th>\n      } @if (canSelectRows) {\n      <th\n        scope=\"col\"\n        class=\"impdc-table-selectable-row-toggle-container\"\n        [ngClass]=\"{\n          'heading-below-bulk-actions': !!bulkActions\n        }\">\n        @if (canSelectAllRows) {\n        <div>\n          <impdc-checkbox\n            ngModel\n            [checked]=\"allSelected\"\n            [indeterminate]=\"someSelected\"\n            (change)=\"handleSelectAll($event)\"></impdc-checkbox>\n        </div>\n        }\n      </th>\n      } @for (columnDef of columnDefs; track columnDef; let columnIndex =\n      $index) {\n      <th\n        scope=\"col\"\n        [ngClass]=\"{\n          'sorted-column': isSortedColumn(columnIndex),\n          'sortable-column': columnDef.sorted,\n          'heading-below-bulk-actions': !!bulkActions\n        }\"\n        (click)=\"handleSort(columnIndex)\">\n        <impdc-column-heading\n          [isSortable]=\"columnDef.sorted || false\"\n          [columnIndex]=\"columnIndex\"\n          [sortColumnIndex]=\"sortColumnIndex\"\n          [direction]=\"sortDirection\"\n          [text]=\"columnDef.title\"\n          (sort)=\"handleSort($event)\">\n        </impdc-column-heading>\n      </th>\n      }\n    </tr>\n  </thead>\n  <tbody>\n    @if (loading) {\n    <tr>\n      <td [attr.colspan]=\"tableSpan\" class=\"data-loading\">\n        <impdc-spinner></impdc-spinner>\n      </td>\n    </tr>\n    } @else { @for (row of tableData; track row.id; let rowIndex = $index; let\n    rowFirst = $first; let rowLast = $last; let rowEven = $even; let rowOdd =\n    $odd) { @if (getCollapsibleTemplateForRow(row); as\n    collapsibleTemplateForRow) {\n    <tr\n      [class.impdc-table-collapsible-row-trigger]=\"collapsibleTrigger === 'row'\"\n      [class.table-active]=\"isRowSelected(row.id)\"\n      (click)=\"\n        tryToggleCollapse(collapsibleTemplateForRow, ngbCollapse, $event, 'row')\n      \">\n      @if (collapsibleTemplate) {\n      <td\n        class=\"impdc-table-collapsible-content-row-button-container\"\n        [class.opened]=\"!collapseMonitor.ngbCollapsing()\">\n        @if (collapsibleTemplateForRow.template) {\n        <div>\n          <button\n            type=\"button\"\n            (click)=\"\n              tryToggleCollapse(\n                collapsibleTemplateForRow,\n                ngbCollapse,\n                $event,\n                'button'\n              )\n            \"\n            class=\"impdc-table-collapsible-content-row-button btn btn-link\">\n            <span\n              class=\"far fa-chevron-right\"\n              [class.fa-rotate-90]=\"!collapseMonitor.ngbCollapsing()\"></span>\n          </button>\n        </div>\n        }\n      </td>\n      } @if (canSelectRows) {\n      <td class=\"impdc-table-selectable-row-toggle-container\">\n        <div class=\"select-column\">\n          <impdc-checkbox\n            [ngModel]=\"isRowSelected(row.id)\"\n            (change)=\"handleRowSelect($event, row.id)\"\n            (click)=\"$event.stopPropagation()\"></impdc-checkbox>\n        </div>\n      </td>\n      }\n      <td\n        *ngFor=\"let columnDef of columnDefs; index as colIndex; last as isLast\"\n        [ngClass]=\"{\n          'col-no-padding': !!columnDef.noPadding,\n          'actions-column': columnDef.columnType === cellType.Actions\n        }\">\n        <div>\n          @switch (columnDef.columnType) { @case (cellType.Badge) {\n          <span>\n            <impdc-badge\n              [text]=\"getStringValue(colIndex, row)\"\n              [theme]=\"getTheme(columnDef, row)\">\n            </impdc-badge>\n          </span>\n          } @case (cellType.Link) {\n          <span (click)=\"handleLinkClick(colIndex, row, $event)\">\n            @if (!branded) {\n            <a class=\"link-primary\">\n              {{ getValue(colIndex, row) }}\n            </a>\n            } @else {\n            <a impdcBranded>\n              {{ getValue(colIndex, row) }}\n            </a>\n            }\n          </span>\n          } @case (cellType.Url) {\n          <span>\n            @if (!branded) {\n            <a\n              target=\"_blank\"\n              [attr.href]=\"getValue(colIndex, row)\"\n              (click)=\"$event.stopPropagation()\">\n              {{ getValue(colIndex, row) }}\n            </a>\n            } @else {\n            <a\n              impdcBranded\n              target=\"_blank\"\n              [attr.href]=\"getValue(colIndex, row)\"\n              (click)=\"$event.stopPropagation()\">\n              {{ getValue(colIndex, row) }}\n            </a>\n            }\n          </span>\n          } @case (cellType.Email) {\n          <span>\n            @if (!branded) {\n            <a\n              target=\"_blank\"\n              [attr.href]=\"'mailto:' + getValue(colIndex, row)\"\n              (click)=\"$event.stopPropagation()\">\n              {{ getValue(colIndex, row) }}\n            </a>\n            } @else {\n            <a\n              impdcBranded\n              [attr.href]=\"getMailToValue(colIndex, row)\"\n              (click)=\"$event.stopPropagation()\">\n              {{ getValue(colIndex, row) }}\n            </a>\n            }\n          </span>\n          } @case (cellType.Input) {\n          <span>\n            <input\n              impdcInput\n              type=\"text\"\n              class=\"{{ getCellColor(columnDef, row) }}\"\n              [ngModel]=\"getValue(colIndex, row)\"\n              (ngModelChange)=\"\n                handleCellValueChange(colIndex, rowIndex, $event)\n              \"\n              (click)=\"$event.stopPropagation()\" />\n          </span>\n          } @case (cellType.Boolean) {\n          <span>\n            @if (columnDef.disabled && getValue(colIndex, row) === 'true') {\n            <span\n              impdc-icon\n              name=\"check\"\n              class=\"{{ getCellColor(columnDef, row) }}\"></span>\n            } @else if (!columnDef.disabled) {\n            <impdc-checkbox\n              [checked]=\"getValue(colIndex, row) === 'true'\"\n              [isSwitch]=\"true\"\n              (change)=\"\n                handleCellValueChange(colIndex, rowIndex, $event.checked)\n              \"\n              (click)=\"$event.stopPropagation()\"></impdc-checkbox>\n            }\n          </span>\n          } @case (cellType.SingleSelect) {\n          <span>\n            <impdc-select\n              [ngModel]=\"getValue(colIndex, row)\"\n              [disabled]=\"columnDef.disabled || false\"\n              [placeholder]=\"selectPlaceholder\"\n              allowClear=\"true\"\n              (selectionChange)=\"\n                handleCellValueChange(colIndex, rowIndex, $event.value)\n              \"\n              (click)=\"$event.stopPropagation()\">\n              @for (value of (columnDef.values || []); track value) {\n              <impdc-select-option\n                [value]=\"value.value\"\n                [label]=\"value.label\"></impdc-select-option>\n              }\n            </impdc-select>\n          </span>\n          } @case (cellType.MultiSelect) {\n          <span>\n            <impdc-select\n              [ngModel]=\"getValue(colIndex, row)\"\n              [disabled]=\"columnDef.disabled || false\"\n              [placeholder]=\"selectPlaceholder\"\n              multiple=\"true\"\n              (selectionChange)=\"\n                handleCellValueChange(colIndex, rowIndex, $event.value)\n              \"\n              (click)=\"$event.stopPropagation()\">\n              @for (value of (columnDef.values || []); track value) {\n              <impdc-select-option\n                [value]=\"value.value\"\n                [label]=\"value.label\"></impdc-select-option>\n              }\n            </impdc-select>\n          </span>\n          } @case (cellType.CellRender) {\n          <span class=\"{{ getCellColor(columnDef, row) }}\">\n            <ng-template\n              impdcTableInjectComponent\n              [columnDef]=\"columnDef\"\n              [rowItem]=\"row\"\n              [customCellComponents]=\"customCellComponents || {}\"\n              [value]=\"getRawValue(colIndex, row)\"></ng-template>\n          </span>\n          } @case (cellType.Icon) {\n          <span>\n            <span\n              impdc-icon\n              [name]=\"columnDef.iconName\"\n              class=\"{{ getCellColor(columnDef, row) }}\"></span>\n          </span>\n          } @case (cellType.Actions) {\n          <span>\n            <!-- will always return 'true', but needed to satisfy the type engine -->\n            @if (columnDefIsActions(columnDef)) {\n            <impdc-row-actions\n              [columnDef]=\"columnDef\"\n              [rowItem]=\"row\"\n              [lastColumn]=\"isLast\"\n              (actionClick)=\"handleActionClick(colIndex, row, $event)\"\n              (click)=\"$event.stopPropagation()\"></impdc-row-actions>\n            }\n          </span>\n          } @default {\n          <span class=\"{{ getCellColor(columnDef, row) }}\">\n            {{ getValue(colIndex, row) }}\n          </span>\n          } }\n        </div>\n      </td>\n    </tr>\n    <tr\n      class=\"impdc-table-collapsible-content-row\"\n      [class.opened]=\"!collapseMonitor.ngbCollapsing()\">\n      <td class=\"w-100 p-0\" [attr.colspan]=\"tableSpan\">\n        <div\n          class=\"impdc-table-collapsible-content-container\"\n          #ngbCollapse=\"ngbCollapse\"\n          #collapseMonitor=\"impdcCollapseMonitor\"\n          [impdcCollapseMonitor]=\"true\"\n          (collapseChange)=\"rowCollapseChange.emit({ row, collapsed: $event })\">\n          @if (collapsibleTemplateForRow.template) {\n          <div>\n            <ng-container\n              *ngTemplateOutlet=\"\n                collapsibleTemplateForRow.template;\n                context: {\n                  $implicit: row,\n                  collapsed: collapseMonitor.collapsed(),\n                  selected: isRowSelected(row.id),\n                  index: rowIndex,\n                  first: !!rowFirst,\n                  last: !!rowLast,\n                  even: !!rowEven,\n                  odd: !!rowOdd\n                }\n              \"></ng-container>\n          </div>\n          }\n        </div>\n      </td>\n    </tr>\n    } } @empty {\n    <tr>\n      <td [attr.colspan]=\"tableSpan\" class=\"no-data\">\n        <ng-content select=\"[noData]\"></ng-content>\n      </td>\n    </tr>\n    } }\n  </tbody>\n  <tfoot>\n    @if (paginationComponent) {\n    <tr>\n      <td [attr.colspan]=\"tableSpan\">\n        <ng-content\n          select=\"impdc-pagination, div[impdc-pagination]\"></ng-content>\n      </td>\n    </tr>\n    }\n  </tfoot>\n</table>\n}\n", styles: [".bulk-action-container{display:flex;flex-direction:row;border:1px solid var(--impd-color-gray-200);border-top-left-radius:.6rem;border-top-right-radius:.6rem;border-bottom:0px}.bulk-action-container .bulk-action-checkbox{padding:1.6rem 2rem}.bulk-action-container .bulk-actions{display:flex;flex-direction:row;gap:.4rem}.col-no-padding{padding:0!important}.data-loading{height:var(--impd-size-80);vertical-align:middle;text-align:center}.no-data{vertical-align:middle;text-align:center}.select-row{display:flex;height:var(--impd-size-4);align-items:center;justify-items:end;border-radius:var(--impd-border-radius-default)}.heading-with-checkbox{padding-left:5px;padding-right:10px}.actions-column{width:.1%;white-space:nowrap}tr.impdc-table-collapsible-content-row:has(>td>div.impdc-table-collapsible-content-container.collapse:not(.show)){display:none}tr:has(td.impdc-table-collapsible-content-row-button-container),tr.impdc-table-collapsible-content-row{transition:background-color .35s ease-in-out}tr:has(td.impdc-table-collapsible-content-row-button-container.opened),tr.impdc-table-collapsible-content-row.opened{background-color:var(--impd-color-gray-50)}tr.impdc-table-collapsible-row-trigger{cursor:pointer}table ::ng-deep tbody>tr>td.impdc-table-selectable-row-toggle-container,table ::ng-deep tr>td.impdc-table-selectable-row-toggle-container,table ::ng-deep thead>tr>th.impdc-table-selectable-row-toggle-container,table ::ng-deep tr>th.impdc-table-selectable-row-toggle-container{padding-left:var(--impd-size-5);padding-right:var(--impd-size-1);width:var(--impd-size-10)}table ::ng-deep tbody>tr>td.impdc-table-collapsible-content-row-button-container,table ::ng-deep tr>td.impdc-table-collapsible-content-row-button-container,table ::ng-deep thead>tr>th.impdc-table-collapsible-content-row-button-container,table ::ng-deep tr>th.impdc-table-collapsible-content-row-button-container{padding-left:var(--impd-size-5);padding-right:0;width:var(--impd-size-10)}table ::ng-deep tbody>tr>td.impdc-table-collapsible-content-row-button-container:empty,table ::ng-deep tr>td.impdc-table-collapsible-content-row-button-container:empty,table ::ng-deep thead>tr>th.impdc-table-collapsible-content-row-button-container:empty,table ::ng-deep tr>th.impdc-table-collapsible-content-row-button-container:empty{padding:0}table ::ng-deep tbody>tr>td.impdc-table-collapsible-content-row-button-container+.impdc-table-selectable-row-toggle-container,table ::ng-deep tr>td.impdc-table-collapsible-content-row-button-container+.impdc-table-selectable-row-toggle-container,table ::ng-deep thead>tr>th.impdc-table-collapsible-content-row-button-container+.impdc-table-selectable-row-toggle-container,table ::ng-deep tr>th.impdc-table-collapsible-content-row-button-container+.impdc-table-selectable-row-toggle-container{padding-left:var(--impd-size-3);width:var(--impd-size-8)}.impdc-table-collapsible-content-row-button{align-items:center;border-radius:var(--impd-border-radius-2xl);color:var(--impd-color-gray-700)!important;display:flex;height:var(--impd-size-5);justify-content:center;padding:0;width:var(--impd-size-5);box-shadow:none}.impdc-table-collapsible-content-row-button:hover,.impdc-table-collapsible-content-row-button:focus,.impdc-table-collapsible-content-row-button:active{background-color:var(--impd-color-gray-100)}.impdc-table-collapsible-content-row-button impdc-icon{line-height:1}.impdc-table-collapsible-content-row-button>span.fa-chevron-right{font-size:1.6rem;transition:transform .35s}table.table-striped>tbody>tr:nth-of-type(4n+3)>*{--impartner-hex-table-bg-type: var(--impd-color-gray-50)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: BrandedDirective, selector: "[impdcBranded]" }, { kind: "component", type: IconComponent, selector: "impdc-icon, [impdc-icon]", inputs: ["name", "theme", "size"] }, { kind: "component", type: CheckboxComponent, selector: "impdc-checkbox", inputs: ["tabIndex", "id", "label", "description", "isSwitch", "switchIcons", "inline", "layout", "checked", "indeterminate", "disabled", "errorStateMatcher", "required"], outputs: ["change", "indeterminateChange"], exportAs: ["impdcCheckControl"] }, { kind: "component", type: SelectOptionComponent, selector: "impdc-select-option", inputs: ["value", "label", "disabled"] }, { kind: "component", type: SelectComponent, selector: "impdc-select", inputs: ["disabled", "tabIndex", "search", "placeholder", "required", "compareWith", "dropdownContainer", "errorStateMatcher", "allowClear", "multiple", "multipleDisplay"], outputs: ["selectionChange", "valueChange", "searchTextChanges"], exportAs: ["impdcSelect"] }, { kind: "directive", type: InputDirective, selector: "input[impdcInput], textarea[impdcInput], select[impdcNativeSelect]", inputs: ["disabled", "id", "type", "required", "readonly", "errorStateMatcher", "value"], exportAs: ["impdcInput"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: SpinnerComponent, selector: "impdc-spinner, div[impdc-spinner]", inputs: ["accessibilityText"] }, { kind: "component", type: BadgeComponent, selector: "impdc-badge, [impdc-badge]", inputs: ["text", "icon", "theme", "size", "hideBg", "rounded", "dismissable"], outputs: ["dismiss"] }, { kind: "directive", type: CollapseMonitorDirective, selector: "[impdcCollapseMonitor]", outputs: ["collapseChange"], exportAs: ["impdcCollapseMonitor"] }, { kind: "directive", type: TableDirective, selector: "table[impdcTable]", inputs: ["striped", "hover", "layout"] }, { kind: "component", type: ColumnHeadingComponent, selector: "impdc-column-heading", inputs: ["isSortable", "columnIndex", "sortColumnIndex", "direction", "text"], outputs: ["sort"] }, { kind: "directive", type: TableInjectComponentDirective, selector: "[impdcTableInjectComponent]", inputs: ["columnDef", "value", "rowItem", "customCellComponents"] }, { kind: "component", type: RowActionsComponent, selector: "impdc-row-actions", inputs: ["columnDef", "rowItem", "lastColumn"], outputs: ["actionClick"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: TableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'impdc-table', template: "@if (tableData) {\n<table impdcTable [striped]=\"striped\">\n  <thead>\n    @if (!!bulkActions) {\n    <tr>\n      <th [attr.colspan]=\"tableSpan\" scope=\"col\" class=\"bulk-action-column\">\n        <ng-content select=\"impdc-table-bulk-actions\"></ng-content>\n        <ng-content select=\"[impdcTableBulkActions]\"></ng-content>\n      </th>\n    </tr>\n    }\n    <tr>\n      @if (canSelectRows) {\n      <th\n        scope=\"col\"\n        [ngClass]=\"{\n          'heading-below-bulk-actions': !!bulkActions\n        }\">\n        @if (canSelectAllRows) {\n        <div>\n          <impdc-checkbox\n            ngModel\n            [checked]=\"allSelected\"\n            [indeterminate]=\"someSelected\"\n            (change)=\"handleSelectAll($event)\"></impdc-checkbox>\n        </div>\n        }\n      </th>\n      } @for (columnDef of columnDefs; track columnDef; let columnIndex =\n      $index) {\n      <th\n        scope=\"col\"\n        [ngClass]=\"{\n          'sorted-column': isSortedColumn(columnIndex),\n          'sortable-column': columnDef.sorted,\n          'heading-below-bulk-actions': !!bulkActions\n        }\"\n        (click)=\"handleSort(columnIndex)\">\n        <impdc-column-heading\n          [isSortable]=\"columnDef.sorted || false\"\n          [columnIndex]=\"columnIndex\"\n          [sortColumnIndex]=\"sortColumnIndex\"\n          [direction]=\"sortDirection\"\n          [text]=\"columnDef.title\"\n          (sort)=\"handleSort($event)\">\n        </impdc-column-heading>\n      </th>\n      }\n    </tr>\n  </thead>\n  <tbody>\n    @if (loading) {\n    <tr>\n      <td [attr.colspan]=\"tableSpan\" class=\"data-loading\">\n        <impdc-spinner></impdc-spinner>\n      </td>\n    </tr>\n    } @else { @for (row of tableData; track row; let rowIndex = $index) {\n    <tr>\n      @if (canSelectRows) {\n      <td>\n        <div class=\"select-column\">\n          <impdc-checkbox\n            [ngModel]=\"isRowSelected(row.id)\"\n            (change)=\"handleRowSelect($event, row.id)\"></impdc-checkbox>\n        </div>\n      </td>\n      }\n      <td\n        *ngFor=\"let columnDef of columnDefs; index as colIndex; last as isLast\"\n        [ngClass]=\"{\n          'col-no-padding': !!columnDef.noPadding,\n          'actions-column': columnDef.columnType === cellType.Actions\n        }\">\n        <div>\n          @switch (columnDef.columnType) { @case (cellType.Badge) {\n          <span>\n            <impdc-badge\n              [text]=\"getStringValue(colIndex, row)\"\n              [theme]=\"getTheme(columnDef, row)\">\n            </impdc-badge>\n          </span>\n          } @case (cellType.Link) {\n          <span (click)=\"handleLinkClick(colIndex, row)\">\n            @if (!branded) {\n            <a>\n              {{ getValue(colIndex, row) }}\n            </a>\n            } @else {\n            <a impdcBranded>\n              {{ getValue(colIndex, row) }}\n            </a>\n            }\n          </span>\n          } @case (cellType.Url) {\n          <span>\n            @if (!branded) {\n            <a target=\"_blank\" [attr.href]=\"getValue(colIndex, row)\">\n              {{ getValue(colIndex, row) }}\n            </a>\n            } @else {\n            <a\n              impdcBranded\n              target=\"_blank\"\n              [attr.href]=\"getValue(colIndex, row)\">\n              {{ getValue(colIndex, row) }}\n            </a>\n            }\n          </span>\n          } @case (cellType.Email) {\n          <span>\n            @if (!branded) {\n            <a\n              target=\"_blank\"\n              [attr.href]=\"'mailto:' + getValue(colIndex, row)\">\n              {{ getValue(colIndex, row) }}\n            </a>\n            } @else {\n            <a impdcBranded [attr.href]=\"getMailToValue(colIndex, row)\">\n              {{ getValue(colIndex, row) }}\n            </a>\n            }\n          </span>\n          } @case (cellType.Input) {\n          <span>\n            <input\n              impdcInput\n              type=\"text\"\n              class=\"{{ getCellColor(columnDef, row) }}\"\n              [ngModel]=\"getValue(colIndex, row)\"\n              (ngModelChange)=\"\n                handleCellValueChange(colIndex, rowIndex, $event)\n              \" />\n          </span>\n          } @case (cellType.Boolean) {\n          <span>\n            @if (columnDef.disabled && getValue(colIndex, row) === 'true') {\n            <span\n              impdc-icon\n              name=\"check\"\n              class=\"{{ getCellColor(columnDef, row) }}\"></span>\n            } @else if (!columnDef.disabled) {\n            <impdc-checkbox\n              [checked]=\"getValue(colIndex, row) === 'true'\"\n              [isSwitch]=\"true\"\n              (change)=\"\n                handleCellValueChange(colIndex, rowIndex, $event.checked)\n              \"></impdc-checkbox>\n            }\n          </span>\n          } @case (cellType.SingleSelect) {\n          <span>\n            <impdc-select\n              [ngModel]=\"getValue(colIndex, row)\"\n              [disabled]=\"columnDef.disabled || false\"\n              [placeholder]=\"selectPlaceholder\"\n              allowClear=\"true\"\n              (selectionChange)=\"\n                handleCellValueChange(colIndex, rowIndex, $event.value)\n              \">\n              @for (value of (columnDef.values || []); track value) {\n              <impdc-select-option\n                [value]=\"value.value\"\n                [label]=\"value.label\"></impdc-select-option>\n              }\n            </impdc-select>\n          </span>\n          } @case (cellType.MultiSelect) {\n          <span>\n            <impdc-select\n              [ngModel]=\"getValue(colIndex, row)\"\n              [disabled]=\"columnDef.disabled || false\"\n              [placeholder]=\"selectPlaceholder\"\n              multiple=\"true\"\n              (selectionChange)=\"\n                handleCellValueChange(colIndex, rowIndex, $event.value)\n              \">\n              @for (value of (columnDef.values || []); track value) {\n              <impdc-select-option\n                [value]=\"value.value\"\n                [label]=\"value.label\"></impdc-select-option>\n              }\n            </impdc-select>\n          </span>\n          } @case (cellType.CellRender) {\n          <span class=\"{{ getCellColor(columnDef, row) }}\">\n            <ng-template\n              impdcTableInjectComponent\n              [columnDef]=\"columnDef\"\n              [rowItem]=\"row\"\n              [customCellComponents]=\"customCellComponents || {}\"\n              [value]=\"getRawValue(colIndex, row)\"></ng-template>\n          </span>\n          } @case (cellType.Icon) {\n          <span>\n            <span\n              impdc-icon\n              [name]=\"columnDef.iconName\"\n              class=\"{{ getCellColor(columnDef, row) }}\"></span>\n          </span>\n          } @case (cellType.Actions) {\n          <span>\n            <!-- will always return 'true', but needed to satisfy the type engine -->\n            @if (columnDefIsActions(columnDef)) {\n            <impdc-row-actions\n              [columnDef]=\"columnDef\"\n              [rowItem]=\"row\"\n              [lastColumn]=\"isLast\"\n              (actionClick)=\"\n                handleActionClick(colIndex, row, $event)\n              \"></impdc-row-actions>\n            }\n          </span>\n          } @default {\n          <span class=\"{{ getCellColor(columnDef, row) }}\">\n            {{ getValue(colIndex, row) }}\n          </span>\n          } }\n        </div>\n      </td>\n    </tr>\n    } @empty {\n    <tr>\n      <td [attr.colspan]=\"tableSpan\" class=\"no-data\">\n        <ng-content select=\"[noData]\"></ng-content>\n      </td>\n    </tr>\n    } }\n  </tbody>\n  <tfoot>\n    @if (paginationComponent) {\n    <tr>\n      <td [attr.colspan]=\"tableSpan\">\n        <ng-content\n          select=\"impdc-pagination, div[impdc-pagination]\"></ng-content>\n      </td>\n    </tr>\n    }\n  </tfoot>\n</table>\n}\n", styles: [".bulk-action-container{display:flex;flex-direction:row;border:1px solid var(--impd-color-gray-200);border-top-left-radius:.6rem;border-top-right-radius:.6rem;border-bottom:0px}.bulk-action-container .bulk-action-checkbox{padding:1.6rem 2rem}.bulk-action-container .bulk-actions{display:flex;flex-direction:row;gap:.4rem}.col-no-padding{padding:0!important}.data-loading{height:var(--impd-size-80);vertical-align:middle;text-align:center}.no-data{vertical-align:middle;text-align:center}.select-row{display:flex;height:var(--impd-size-4);align-items:center;justify-items:end;border-radius:var(--impd-border-radius-default)}.heading-with-checkbox{padding-left:5px;padding-right:10px}.actions-column{width:.1%;white-space:nowrap}\n"] }]
+            args: [{ selector: 'impdc-table', template: "@if (tableData) {\n<table\n  impdcTable\n  [striped]=\"striped && !collapsibleTemplate\"\n  [layout]=\"layout\"\n  [hover]=\"hover\">\n  <thead>\n    @if (!!bulkActions) {\n    <tr>\n      <th [attr.colspan]=\"tableSpan\" scope=\"col\" class=\"bulk-action-column\">\n        <ng-content select=\"impdc-table-bulk-actions\"></ng-content>\n        <ng-content select=\"[impdcTableBulkActions]\"></ng-content>\n      </th>\n    </tr>\n    }\n    <tr>\n      @if (collapsibleTemplate) {\n      <th\n        scope=\"col\"\n        [class.heading-below-bulk-actions]=\"!!bulkActions\"\n        class=\"impdc-table-collapsible-content-row-button-container\"></th>\n      } @if (canSelectRows) {\n      <th\n        scope=\"col\"\n        class=\"impdc-table-selectable-row-toggle-container\"\n        [ngClass]=\"{\n          'heading-below-bulk-actions': !!bulkActions\n        }\">\n        @if (canSelectAllRows) {\n        <div>\n          <impdc-checkbox\n            ngModel\n            [checked]=\"allSelected\"\n            [indeterminate]=\"someSelected\"\n            (change)=\"handleSelectAll($event)\"></impdc-checkbox>\n        </div>\n        }\n      </th>\n      } @for (columnDef of columnDefs; track columnDef; let columnIndex =\n      $index) {\n      <th\n        scope=\"col\"\n        [ngClass]=\"{\n          'sorted-column': isSortedColumn(columnIndex),\n          'sortable-column': columnDef.sorted,\n          'heading-below-bulk-actions': !!bulkActions\n        }\"\n        (click)=\"handleSort(columnIndex)\">\n        <impdc-column-heading\n          [isSortable]=\"columnDef.sorted || false\"\n          [columnIndex]=\"columnIndex\"\n          [sortColumnIndex]=\"sortColumnIndex\"\n          [direction]=\"sortDirection\"\n          [text]=\"columnDef.title\"\n          (sort)=\"handleSort($event)\">\n        </impdc-column-heading>\n      </th>\n      }\n    </tr>\n  </thead>\n  <tbody>\n    @if (loading) {\n    <tr>\n      <td [attr.colspan]=\"tableSpan\" class=\"data-loading\">\n        <impdc-spinner></impdc-spinner>\n      </td>\n    </tr>\n    } @else { @for (row of tableData; track row.id; let rowIndex = $index; let\n    rowFirst = $first; let rowLast = $last; let rowEven = $even; let rowOdd =\n    $odd) { @if (getCollapsibleTemplateForRow(row); as\n    collapsibleTemplateForRow) {\n    <tr\n      [class.impdc-table-collapsible-row-trigger]=\"collapsibleTrigger === 'row'\"\n      [class.table-active]=\"isRowSelected(row.id)\"\n      (click)=\"\n        tryToggleCollapse(collapsibleTemplateForRow, ngbCollapse, $event, 'row')\n      \">\n      @if (collapsibleTemplate) {\n      <td\n        class=\"impdc-table-collapsible-content-row-button-container\"\n        [class.opened]=\"!collapseMonitor.ngbCollapsing()\">\n        @if (collapsibleTemplateForRow.template) {\n        <div>\n          <button\n            type=\"button\"\n            (click)=\"\n              tryToggleCollapse(\n                collapsibleTemplateForRow,\n                ngbCollapse,\n                $event,\n                'button'\n              )\n            \"\n            class=\"impdc-table-collapsible-content-row-button btn btn-link\">\n            <span\n              class=\"far fa-chevron-right\"\n              [class.fa-rotate-90]=\"!collapseMonitor.ngbCollapsing()\"></span>\n          </button>\n        </div>\n        }\n      </td>\n      } @if (canSelectRows) {\n      <td class=\"impdc-table-selectable-row-toggle-container\">\n        <div class=\"select-column\">\n          <impdc-checkbox\n            [ngModel]=\"isRowSelected(row.id)\"\n            (change)=\"handleRowSelect($event, row.id)\"\n            (click)=\"$event.stopPropagation()\"></impdc-checkbox>\n        </div>\n      </td>\n      }\n      <td\n        *ngFor=\"let columnDef of columnDefs; index as colIndex; last as isLast\"\n        [ngClass]=\"{\n          'col-no-padding': !!columnDef.noPadding,\n          'actions-column': columnDef.columnType === cellType.Actions\n        }\">\n        <div>\n          @switch (columnDef.columnType) { @case (cellType.Badge) {\n          <span>\n            <impdc-badge\n              [text]=\"getStringValue(colIndex, row)\"\n              [theme]=\"getTheme(columnDef, row)\">\n            </impdc-badge>\n          </span>\n          } @case (cellType.Link) {\n          <span (click)=\"handleLinkClick(colIndex, row, $event)\">\n            @if (!branded) {\n            <a class=\"link-primary\">\n              {{ getValue(colIndex, row) }}\n            </a>\n            } @else {\n            <a impdcBranded>\n              {{ getValue(colIndex, row) }}\n            </a>\n            }\n          </span>\n          } @case (cellType.Url) {\n          <span>\n            @if (!branded) {\n            <a\n              target=\"_blank\"\n              [attr.href]=\"getValue(colIndex, row)\"\n              (click)=\"$event.stopPropagation()\">\n              {{ getValue(colIndex, row) }}\n            </a>\n            } @else {\n            <a\n              impdcBranded\n              target=\"_blank\"\n              [attr.href]=\"getValue(colIndex, row)\"\n              (click)=\"$event.stopPropagation()\">\n              {{ getValue(colIndex, row) }}\n            </a>\n            }\n          </span>\n          } @case (cellType.Email) {\n          <span>\n            @if (!branded) {\n            <a\n              target=\"_blank\"\n              [attr.href]=\"'mailto:' + getValue(colIndex, row)\"\n              (click)=\"$event.stopPropagation()\">\n              {{ getValue(colIndex, row) }}\n            </a>\n            } @else {\n            <a\n              impdcBranded\n              [attr.href]=\"getMailToValue(colIndex, row)\"\n              (click)=\"$event.stopPropagation()\">\n              {{ getValue(colIndex, row) }}\n            </a>\n            }\n          </span>\n          } @case (cellType.Input) {\n          <span>\n            <input\n              impdcInput\n              type=\"text\"\n              class=\"{{ getCellColor(columnDef, row) }}\"\n              [ngModel]=\"getValue(colIndex, row)\"\n              (ngModelChange)=\"\n                handleCellValueChange(colIndex, rowIndex, $event)\n              \"\n              (click)=\"$event.stopPropagation()\" />\n          </span>\n          } @case (cellType.Boolean) {\n          <span>\n            @if (columnDef.disabled && getValue(colIndex, row) === 'true') {\n            <span\n              impdc-icon\n              name=\"check\"\n              class=\"{{ getCellColor(columnDef, row) }}\"></span>\n            } @else if (!columnDef.disabled) {\n            <impdc-checkbox\n              [checked]=\"getValue(colIndex, row) === 'true'\"\n              [isSwitch]=\"true\"\n              (change)=\"\n                handleCellValueChange(colIndex, rowIndex, $event.checked)\n              \"\n              (click)=\"$event.stopPropagation()\"></impdc-checkbox>\n            }\n          </span>\n          } @case (cellType.SingleSelect) {\n          <span>\n            <impdc-select\n              [ngModel]=\"getValue(colIndex, row)\"\n              [disabled]=\"columnDef.disabled || false\"\n              [placeholder]=\"selectPlaceholder\"\n              allowClear=\"true\"\n              (selectionChange)=\"\n                handleCellValueChange(colIndex, rowIndex, $event.value)\n              \"\n              (click)=\"$event.stopPropagation()\">\n              @for (value of (columnDef.values || []); track value) {\n              <impdc-select-option\n                [value]=\"value.value\"\n                [label]=\"value.label\"></impdc-select-option>\n              }\n            </impdc-select>\n          </span>\n          } @case (cellType.MultiSelect) {\n          <span>\n            <impdc-select\n              [ngModel]=\"getValue(colIndex, row)\"\n              [disabled]=\"columnDef.disabled || false\"\n              [placeholder]=\"selectPlaceholder\"\n              multiple=\"true\"\n              (selectionChange)=\"\n                handleCellValueChange(colIndex, rowIndex, $event.value)\n              \"\n              (click)=\"$event.stopPropagation()\">\n              @for (value of (columnDef.values || []); track value) {\n              <impdc-select-option\n                [value]=\"value.value\"\n                [label]=\"value.label\"></impdc-select-option>\n              }\n            </impdc-select>\n          </span>\n          } @case (cellType.CellRender) {\n          <span class=\"{{ getCellColor(columnDef, row) }}\">\n            <ng-template\n              impdcTableInjectComponent\n              [columnDef]=\"columnDef\"\n              [rowItem]=\"row\"\n              [customCellComponents]=\"customCellComponents || {}\"\n              [value]=\"getRawValue(colIndex, row)\"></ng-template>\n          </span>\n          } @case (cellType.Icon) {\n          <span>\n            <span\n              impdc-icon\n              [name]=\"columnDef.iconName\"\n              class=\"{{ getCellColor(columnDef, row) }}\"></span>\n          </span>\n          } @case (cellType.Actions) {\n          <span>\n            <!-- will always return 'true', but needed to satisfy the type engine -->\n            @if (columnDefIsActions(columnDef)) {\n            <impdc-row-actions\n              [columnDef]=\"columnDef\"\n              [rowItem]=\"row\"\n              [lastColumn]=\"isLast\"\n              (actionClick)=\"handleActionClick(colIndex, row, $event)\"\n              (click)=\"$event.stopPropagation()\"></impdc-row-actions>\n            }\n          </span>\n          } @default {\n          <span class=\"{{ getCellColor(columnDef, row) }}\">\n            {{ getValue(colIndex, row) }}\n          </span>\n          } }\n        </div>\n      </td>\n    </tr>\n    <tr\n      class=\"impdc-table-collapsible-content-row\"\n      [class.opened]=\"!collapseMonitor.ngbCollapsing()\">\n      <td class=\"w-100 p-0\" [attr.colspan]=\"tableSpan\">\n        <div\n          class=\"impdc-table-collapsible-content-container\"\n          #ngbCollapse=\"ngbCollapse\"\n          #collapseMonitor=\"impdcCollapseMonitor\"\n          [impdcCollapseMonitor]=\"true\"\n          (collapseChange)=\"rowCollapseChange.emit({ row, collapsed: $event })\">\n          @if (collapsibleTemplateForRow.template) {\n          <div>\n            <ng-container\n              *ngTemplateOutlet=\"\n                collapsibleTemplateForRow.template;\n                context: {\n                  $implicit: row,\n                  collapsed: collapseMonitor.collapsed(),\n                  selected: isRowSelected(row.id),\n                  index: rowIndex,\n                  first: !!rowFirst,\n                  last: !!rowLast,\n                  even: !!rowEven,\n                  odd: !!rowOdd\n                }\n              \"></ng-container>\n          </div>\n          }\n        </div>\n      </td>\n    </tr>\n    } } @empty {\n    <tr>\n      <td [attr.colspan]=\"tableSpan\" class=\"no-data\">\n        <ng-content select=\"[noData]\"></ng-content>\n      </td>\n    </tr>\n    } }\n  </tbody>\n  <tfoot>\n    @if (paginationComponent) {\n    <tr>\n      <td [attr.colspan]=\"tableSpan\">\n        <ng-content\n          select=\"impdc-pagination, div[impdc-pagination]\"></ng-content>\n      </td>\n    </tr>\n    }\n  </tfoot>\n</table>\n}\n", styles: [".bulk-action-container{display:flex;flex-direction:row;border:1px solid var(--impd-color-gray-200);border-top-left-radius:.6rem;border-top-right-radius:.6rem;border-bottom:0px}.bulk-action-container .bulk-action-checkbox{padding:1.6rem 2rem}.bulk-action-container .bulk-actions{display:flex;flex-direction:row;gap:.4rem}.col-no-padding{padding:0!important}.data-loading{height:var(--impd-size-80);vertical-align:middle;text-align:center}.no-data{vertical-align:middle;text-align:center}.select-row{display:flex;height:var(--impd-size-4);align-items:center;justify-items:end;border-radius:var(--impd-border-radius-default)}.heading-with-checkbox{padding-left:5px;padding-right:10px}.actions-column{width:.1%;white-space:nowrap}tr.impdc-table-collapsible-content-row:has(>td>div.impdc-table-collapsible-content-container.collapse:not(.show)){display:none}tr:has(td.impdc-table-collapsible-content-row-button-container),tr.impdc-table-collapsible-content-row{transition:background-color .35s ease-in-out}tr:has(td.impdc-table-collapsible-content-row-button-container.opened),tr.impdc-table-collapsible-content-row.opened{background-color:var(--impd-color-gray-50)}tr.impdc-table-collapsible-row-trigger{cursor:pointer}table ::ng-deep tbody>tr>td.impdc-table-selectable-row-toggle-container,table ::ng-deep tr>td.impdc-table-selectable-row-toggle-container,table ::ng-deep thead>tr>th.impdc-table-selectable-row-toggle-container,table ::ng-deep tr>th.impdc-table-selectable-row-toggle-container{padding-left:var(--impd-size-5);padding-right:var(--impd-size-1);width:var(--impd-size-10)}table ::ng-deep tbody>tr>td.impdc-table-collapsible-content-row-button-container,table ::ng-deep tr>td.impdc-table-collapsible-content-row-button-container,table ::ng-deep thead>tr>th.impdc-table-collapsible-content-row-button-container,table ::ng-deep tr>th.impdc-table-collapsible-content-row-button-container{padding-left:var(--impd-size-5);padding-right:0;width:var(--impd-size-10)}table ::ng-deep tbody>tr>td.impdc-table-collapsible-content-row-button-container:empty,table ::ng-deep tr>td.impdc-table-collapsible-content-row-button-container:empty,table ::ng-deep thead>tr>th.impdc-table-collapsible-content-row-button-container:empty,table ::ng-deep tr>th.impdc-table-collapsible-content-row-button-container:empty{padding:0}table ::ng-deep tbody>tr>td.impdc-table-collapsible-content-row-button-container+.impdc-table-selectable-row-toggle-container,table ::ng-deep tr>td.impdc-table-collapsible-content-row-button-container+.impdc-table-selectable-row-toggle-container,table ::ng-deep thead>tr>th.impdc-table-collapsible-content-row-button-container+.impdc-table-selectable-row-toggle-container,table ::ng-deep tr>th.impdc-table-collapsible-content-row-button-container+.impdc-table-selectable-row-toggle-container{padding-left:var(--impd-size-3);width:var(--impd-size-8)}.impdc-table-collapsible-content-row-button{align-items:center;border-radius:var(--impd-border-radius-2xl);color:var(--impd-color-gray-700)!important;display:flex;height:var(--impd-size-5);justify-content:center;padding:0;width:var(--impd-size-5);box-shadow:none}.impdc-table-collapsible-content-row-button:hover,.impdc-table-collapsible-content-row-button:focus,.impdc-table-collapsible-content-row-button:active{background-color:var(--impd-color-gray-100)}.impdc-table-collapsible-content-row-button impdc-icon{line-height:1}.impdc-table-collapsible-content-row-button>span.fa-chevron-right{font-size:1.6rem;transition:transform .35s}table.table-striped>tbody>tr:nth-of-type(4n+3)>*{--impartner-hex-table-bg-type: var(--impd-color-gray-50)}\n"] }]
         }], ctorParameters: () => [{ type: i1.DatePipe }, { type: i1.PercentPipe }, { type: i1.DecimalPipe }, { type: i0.ChangeDetectorRef }, { type: BrandedDirective, decorators: [{
                     type: Optional
                 }, {
@@ -7771,6 +7893,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.1", ngImpor
                 type: Input
             }], striped: [{
                 type: Input
+            }], hover: [{
+                type: Input
+            }], layout: [{
+                type: Input
             }], canSelectRows: [{
                 type: Input
             }], canSelectAllRows: [{
@@ -7787,6 +7913,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.1", ngImpor
                 type: Input
             }], customCellComponents: [{
                 type: Input
+            }], collapsibleTemplate: [{
+                type: Input
+            }], collapsibleTrigger: [{
+                type: Input
             }], rowSelect: [{
                 type: Output
             }], sortBy: [{
@@ -7795,14 +7925,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.1", ngImpor
                 type: Output
             }], rowActionClick: [{
                 type: Output
+            }], inputChange: [{
+                type: Output
+            }], rowCollapseChange: [{
+                type: Output
             }], paginationComponent: [{
                 type: ContentChild,
                 args: [PaginationComponent]
             }], bulkActions: [{
                 type: ContentChild,
                 args: [TableBulkActionsComponent]
-            }], inputChange: [{
-                type: Output
             }] } });
 
 class SpinnerModule {
@@ -7822,7 +7954,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.1", ngImpor
 class TableModule {
     constructor() { }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: TableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.1", ngImport: i0, type: TableModule, declarations: [TableDirective,
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.1", ngImport: i0, type: TableModule, declarations: [CollapseMonitorDirective,
+            TableDirective,
             TableComponent,
             ColumnHeadingComponent,
             TableInjectComponentDirective,
@@ -7836,7 +7969,8 @@ class TableModule {
             SpinnerModule,
             BadgeModule,
             BrandingModule,
-            NgbDropdownModule], exports: [ButtonModule,
+            NgbDropdownModule,
+            NgbCollapseModule], exports: [ButtonModule,
             TableDirective,
             ColumnHeadingComponent,
             TableBulkActionsComponent,
@@ -7855,7 +7989,8 @@ class TableModule {
             SpinnerModule,
             BadgeModule,
             BrandingModule,
-            NgbDropdownModule, ButtonModule,
+            NgbDropdownModule,
+            NgbCollapseModule, ButtonModule,
             PaginationModule,
             IconModule,
             BrandingModule] }); }
@@ -7873,9 +8008,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.1", ngImpor
                         SpinnerModule,
                         BadgeModule,
                         BrandingModule,
-                        NgbDropdownModule
+                        NgbDropdownModule,
+                        NgbCollapseModule
                     ],
                     declarations: [
+                        CollapseMonitorDirective,
                         TableDirective,
                         TableComponent,
                         ColumnHeadingComponent,
@@ -7976,6 +8113,10 @@ class ModalComponent {
          * Shows a backdrop behind the Modal.
          */
         this.backdrop = true;
+        /**
+         * When `true`, Modal will not automatically render a fallback "accept" button in the footer.
+         */
+        this.noFallback = false;
         /**
          * Event emitted when the Modal content is dismissed.
          */
@@ -8117,7 +8258,7 @@ class ModalComponent {
         this._closed$.next();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: ModalComponent, deps: [{ token: InteractionService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.1", type: ModalComponent, selector: "impdc-modal", inputs: { show: "show", theme: "theme", size: "size", iconName: "iconName", iconTheme: "iconTheme", titleText: "titleText", acceptText: "acceptText", dismissable: "dismissable", fade: "fade", backdrop: "backdrop" }, outputs: { dismiss: "dismiss", deny: "deny", accept: "accept" }, host: { attributes: { "tabindex": "-1" }, properties: { "class.fade": "fade", "class.in": "fade && shown", "class.show": "shown", "class.dismissable": "dismissable" }, classAttribute: "impdc modal" }, viewQueries: [{ propertyName: "_dialogElementRef", first: true, predicate: ["dialogElement"], descendants: true }, { propertyName: "dismissEl", first: true, predicate: ["dismissEl"], descendants: true }, { propertyName: "denyEl", first: true, predicate: ["denyEl"], descendants: true }, { propertyName: "acceptEl", first: true, predicate: ["acceptEl"], descendants: true }], ngImport: i0, template: "<div\n  #dialogElement\n  *ngIf=\"valid\"\n  class=\"modal-dialog modal-dialog-centered modal-dialog-scrollable modal-theme-{{\n    theme\n  }}\"\n  [class.modal-sm]=\"size === 'sm'\"\n  [class.modal-lg]=\"size === 'lg'\"\n  [class.modal-xl]=\"size === 'xl'\"\n  [class.modal-fullscreen]=\"size === 'fs'\"\n  [class.modal-fullscreen-lg-down]=\"size !== 'fs'\">\n  <div class=\"modal-content\">\n    <div *ngIf=\"showDestructiveIcon\" class=\"modal-icon\">\n      <span impdc-icon [name]=\"iconName\" [theme]=\"iconTheme\"></span>\n    </div>\n    <div #header class=\"modal-header\" [class.hide]=\"hideHeader\">\n      <h3 class=\"modal-title\">\n        <span *ngIf=\"showWorkingIcon\" class=\"modal-icon\">\n          <span impdc-icon [name]=\"iconName\" [theme]=\"iconTheme\"></span>\n        </span>\n        <span>{{ titleText }}</span>\n      </h3>\n      <button\n        impdcButton\n        *ngIf=\"dismissable\"\n        theme=\"close\"\n        (click)=\"handleDismiss($event); $event.stopPropagation()\"></button>\n    </div>\n    <div #bodyEl class=\"modal-body\">\n      <ng-content></ng-content>\n    </div>\n    <div #footer class=\"modal-footer\">\n      <span\n        #dismissEl\n        *ngIf=\"dismissable\"\n        [class.hide]=\"!dismissEl.children.length\"\n        (click)=\"handleDismiss($event); $event.stopPropagation()\">\n        <ng-content select=\"[dismiss]\"></ng-content>\n      </span>\n      <span\n        #denyEl\n        [class.hide]=\"!denyEl.children.length\"\n        (click)=\"handleDeny($event); $event.stopPropagation()\">\n        <ng-content select=\"[deny]\"></ng-content>\n      </span>\n      <span\n        #acceptEl\n        [class.hide]=\"!acceptEl.children.length\"\n        (click)=\"handleAccept($event); $event.stopPropagation()\">\n        <ng-content select=\"[accept]\"></ng-content>\n      </span>\n      <span\n        #acceptFallbackEl\n        *ngIf=\"!acceptEl.children.length\"\n        (click)=\"handleAccept($event); $event.stopPropagation()\">\n        <button\n          impdcButton\n          [text]=\"acceptText\"\n          [theme]=\"acceptFallbackTheme\"></button>\n      </span>\n    </div>\n  </div>\n</div>\n", styles: [":host{-webkit-user-select:none;user-select:none}:host .modal-icon{display:inline-flex;justify-content:center;align-items:center;height:40px;width:40px;color:var(--impd-color-gray-500);background:var(--impd-color-gray-100);border-radius:50%;flex-shrink:0}:host .modal-icon .fa,:host .modal-icon .fa-brands,:host .modal-icon .fa-duotone,:host .modal-icon .fa-light,:host .modal-icon .fa-regular,:host .modal-icon .fa-solid,:host .modal-icon .fa-thin,:host .modal-icon .fab,:host .modal-icon .fad,:host .modal-icon .fal,:host .modal-icon .far,:host .modal-icon .fas,:host .modal-icon .fat{line-height:var(--impartner-hex-modal-title-line-height)}:host.fade.in{background-color:transparent}:host.show{display:block;opacity:1}:host:not(.show),:host.hide,:host .hide{display:none}:host.dismissable{cursor:pointer}:host.dismissable .modal-dialog{cursor:default}:host .modal-dialog{cursor:default;-webkit-user-select:auto;user-select:auto}:host .modal-theme-simple .modal-header,:host .modal-theme-destructive .modal-header{border:0;padding-bottom:0}:host .modal-theme-simple .modal-body,:host .modal-theme-destructive .modal-body{padding:calc(var(--impartner-hex-modal-padding) * .5) var(--impartner-hex-modal-padding) var(--impartner-hex-modal-padding)}:host .modal-theme-simple .modal-footer,:host .modal-theme-destructive .modal-footer{border:0;padding-top:0}:host .modal-theme-working .modal-footer{padding:calc(var(--impartner-hex-modal-padding) * .5 - var(--impartner-hex-modal-footer-gap) * .5) calc(var(--impartner-hex-modal-padding) - var(--impartner-hex-modal-footer-gap) * .5)}:host .modal-theme-destructive .modal-content{display:grid;grid-template-areas:\"modal-icon modal-header\" \"modal-icon modal-body\" \"modal-footer modal-footer\";grid-template-columns:auto 1fr;grid-template-rows:auto 1fr auto}:host .modal-theme-destructive .modal-content>.modal-icon{grid-area:modal-icon;margin:var(--impartner-hex-modal-header-padding);margin-right:0;margin-bottom:0}:host .modal-theme-destructive .modal-content>.modal-header{grid-area:modal-header;padding-left:16px;margin-top:8px;justify-content:unset}:host .modal-theme-destructive .modal-content>.modal-body{grid-area:modal-body;padding-left:16px}:host .modal-theme-destructive .modal-content>.modal-footer{grid-area:modal-footer}:host .modal-theme-destructive .modal-icon{color:var(--impd-color-red-600);background:var(--impd-color-red-100)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ButtonComponent, selector: "button[impdcButton]", inputs: ["type", "theme", "text", "disabled", "titleText", "ariaLabel"] }, { kind: "component", type: IconComponent, selector: "impdc-icon, [impdc-icon]", inputs: ["name", "theme", "size"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.1", type: ModalComponent, selector: "impdc-modal", inputs: { show: "show", theme: "theme", size: "size", iconName: "iconName", iconTheme: "iconTheme", titleText: "titleText", acceptText: "acceptText", dismissable: "dismissable", fade: "fade", backdrop: "backdrop", noFallback: "noFallback" }, outputs: { dismiss: "dismiss", deny: "deny", accept: "accept" }, host: { attributes: { "tabindex": "-1" }, properties: { "class.fade": "fade", "class.in": "fade && shown", "class.show": "shown", "class.dismissable": "dismissable" }, classAttribute: "impdc modal" }, viewQueries: [{ propertyName: "_dialogElementRef", first: true, predicate: ["dialogElement"], descendants: true }, { propertyName: "dismissEl", first: true, predicate: ["dismissEl"], descendants: true }, { propertyName: "denyEl", first: true, predicate: ["denyEl"], descendants: true }, { propertyName: "acceptEl", first: true, predicate: ["acceptEl"], descendants: true }], ngImport: i0, template: "<div\n  #dialogElement\n  *ngIf=\"valid\"\n  class=\"modal-dialog modal-dialog-centered modal-dialog-scrollable modal-theme-{{\n    theme\n  }}\"\n  [class.modal-sm]=\"size === 'sm'\"\n  [class.modal-lg]=\"size === 'lg'\"\n  [class.modal-xl]=\"size === 'xl'\"\n  [class.modal-fullscreen]=\"size === 'fs'\"\n  [class.modal-fullscreen-lg-down]=\"size !== 'fs'\">\n  <div class=\"modal-content\">\n    <div *ngIf=\"showDestructiveIcon\" class=\"modal-icon\">\n      <span impdc-icon [name]=\"iconName\" [theme]=\"iconTheme\"></span>\n    </div>\n    <div #header class=\"modal-header\" [class.hide]=\"hideHeader\">\n      <h3 class=\"modal-title\">\n        <span *ngIf=\"showWorkingIcon\" class=\"modal-icon\">\n          <span impdc-icon [name]=\"iconName\" [theme]=\"iconTheme\"></span>\n        </span>\n        <span>{{ titleText }}</span>\n      </h3>\n      <button\n        impdcButton\n        *ngIf=\"dismissable\"\n        theme=\"close\"\n        (click)=\"handleDismiss($event); $event.stopPropagation()\"></button>\n    </div>\n    <div #bodyEl class=\"modal-body\">\n      <ng-content></ng-content>\n    </div>\n    <div #footer class=\"modal-footer\">\n      <span\n        #dismissEl\n        *ngIf=\"dismissable\"\n        [class.hide]=\"!dismissEl.children.length\"\n        (click)=\"handleDismiss($event); $event.stopPropagation()\">\n        <ng-content select=\"[dismiss]\"></ng-content>\n      </span>\n      <span\n        #denyEl\n        [class.hide]=\"!denyEl.children.length\"\n        (click)=\"handleDeny($event); $event.stopPropagation()\">\n        <ng-content select=\"[deny]\"></ng-content>\n      </span>\n      <span\n        #acceptEl\n        [class.hide]=\"!acceptEl.children.length\"\n        (click)=\"handleAccept($event); $event.stopPropagation()\">\n        <ng-content select=\"[accept]\"></ng-content>\n      </span>\n      <span\n        #acceptFallbackEl\n        *ngIf=\"!noFallback && !acceptEl.children.length\"\n        (click)=\"handleAccept($event); $event.stopPropagation()\">\n        <button\n          impdcButton\n          [text]=\"acceptText\"\n          [theme]=\"acceptFallbackTheme\"></button>\n      </span>\n    </div>\n  </div>\n</div>\n", styles: [":host{-webkit-user-select:none;user-select:none}:host .modal-icon{display:inline-flex;justify-content:center;align-items:center;height:40px;width:40px;color:var(--impd-color-gray-500);background:var(--impd-color-gray-100);border-radius:50%;flex-shrink:0}:host .modal-icon .fa,:host .modal-icon .fa-brands,:host .modal-icon .fa-duotone,:host .modal-icon .fa-light,:host .modal-icon .fa-regular,:host .modal-icon .fa-solid,:host .modal-icon .fa-thin,:host .modal-icon .fab,:host .modal-icon .fad,:host .modal-icon .fal,:host .modal-icon .far,:host .modal-icon .fas,:host .modal-icon .fat{line-height:var(--impartner-hex-modal-title-line-height)}:host.fade.in{background-color:transparent}:host.show{display:block;opacity:1}:host:not(.show),:host.hide,:host .hide{display:none}:host.dismissable{cursor:pointer}:host.dismissable .modal-dialog{cursor:default}:host .modal-dialog{cursor:default;-webkit-user-select:auto;user-select:auto}:host .modal-theme-simple .modal-header,:host .modal-theme-destructive .modal-header{border:0;padding-bottom:0}:host .modal-theme-simple .modal-body,:host .modal-theme-destructive .modal-body{padding:calc(var(--impartner-hex-modal-padding) * .5) var(--impartner-hex-modal-padding) var(--impartner-hex-modal-padding)}:host .modal-theme-simple .modal-footer,:host .modal-theme-destructive .modal-footer{border:0;padding-top:0}:host .modal-theme-working .modal-footer{padding:calc(var(--impartner-hex-modal-padding) * .5 - var(--impartner-hex-modal-footer-gap) * .5) calc(var(--impartner-hex-modal-padding) - var(--impartner-hex-modal-footer-gap) * .5)}:host .modal-theme-destructive .modal-content{display:grid;grid-template-areas:\"modal-icon modal-header\" \"modal-icon modal-body\" \"modal-footer modal-footer\";grid-template-columns:auto 1fr;grid-template-rows:auto 1fr auto}:host .modal-theme-destructive .modal-content>.modal-icon{grid-area:modal-icon;margin:var(--impartner-hex-modal-header-padding);margin-right:0;margin-bottom:0}:host .modal-theme-destructive .modal-content>.modal-header{grid-area:modal-header;padding-left:16px;margin-top:8px;justify-content:unset}:host .modal-theme-destructive .modal-content>.modal-body{grid-area:modal-body;padding-left:16px}:host .modal-theme-destructive .modal-content>.modal-footer{grid-area:modal-footer}:host .modal-theme-destructive .modal-icon{color:var(--impd-color-red-600);background:var(--impd-color-red-100)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ButtonComponent, selector: "button[impdcButton]", inputs: ["type", "theme", "text", "disabled", "titleText", "ariaLabel"] }, { kind: "component", type: IconComponent, selector: "impdc-icon, [impdc-icon]", inputs: ["name", "theme", "size"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: ModalComponent, decorators: [{
             type: Component,
@@ -8128,7 +8269,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.1", ngImpor
                         '[class.show]': 'shown',
                         '[class.dismissable]': 'dismissable',
                         tabindex: '-1'
-                    }, template: "<div\n  #dialogElement\n  *ngIf=\"valid\"\n  class=\"modal-dialog modal-dialog-centered modal-dialog-scrollable modal-theme-{{\n    theme\n  }}\"\n  [class.modal-sm]=\"size === 'sm'\"\n  [class.modal-lg]=\"size === 'lg'\"\n  [class.modal-xl]=\"size === 'xl'\"\n  [class.modal-fullscreen]=\"size === 'fs'\"\n  [class.modal-fullscreen-lg-down]=\"size !== 'fs'\">\n  <div class=\"modal-content\">\n    <div *ngIf=\"showDestructiveIcon\" class=\"modal-icon\">\n      <span impdc-icon [name]=\"iconName\" [theme]=\"iconTheme\"></span>\n    </div>\n    <div #header class=\"modal-header\" [class.hide]=\"hideHeader\">\n      <h3 class=\"modal-title\">\n        <span *ngIf=\"showWorkingIcon\" class=\"modal-icon\">\n          <span impdc-icon [name]=\"iconName\" [theme]=\"iconTheme\"></span>\n        </span>\n        <span>{{ titleText }}</span>\n      </h3>\n      <button\n        impdcButton\n        *ngIf=\"dismissable\"\n        theme=\"close\"\n        (click)=\"handleDismiss($event); $event.stopPropagation()\"></button>\n    </div>\n    <div #bodyEl class=\"modal-body\">\n      <ng-content></ng-content>\n    </div>\n    <div #footer class=\"modal-footer\">\n      <span\n        #dismissEl\n        *ngIf=\"dismissable\"\n        [class.hide]=\"!dismissEl.children.length\"\n        (click)=\"handleDismiss($event); $event.stopPropagation()\">\n        <ng-content select=\"[dismiss]\"></ng-content>\n      </span>\n      <span\n        #denyEl\n        [class.hide]=\"!denyEl.children.length\"\n        (click)=\"handleDeny($event); $event.stopPropagation()\">\n        <ng-content select=\"[deny]\"></ng-content>\n      </span>\n      <span\n        #acceptEl\n        [class.hide]=\"!acceptEl.children.length\"\n        (click)=\"handleAccept($event); $event.stopPropagation()\">\n        <ng-content select=\"[accept]\"></ng-content>\n      </span>\n      <span\n        #acceptFallbackEl\n        *ngIf=\"!acceptEl.children.length\"\n        (click)=\"handleAccept($event); $event.stopPropagation()\">\n        <button\n          impdcButton\n          [text]=\"acceptText\"\n          [theme]=\"acceptFallbackTheme\"></button>\n      </span>\n    </div>\n  </div>\n</div>\n", styles: [":host{-webkit-user-select:none;user-select:none}:host .modal-icon{display:inline-flex;justify-content:center;align-items:center;height:40px;width:40px;color:var(--impd-color-gray-500);background:var(--impd-color-gray-100);border-radius:50%;flex-shrink:0}:host .modal-icon .fa,:host .modal-icon .fa-brands,:host .modal-icon .fa-duotone,:host .modal-icon .fa-light,:host .modal-icon .fa-regular,:host .modal-icon .fa-solid,:host .modal-icon .fa-thin,:host .modal-icon .fab,:host .modal-icon .fad,:host .modal-icon .fal,:host .modal-icon .far,:host .modal-icon .fas,:host .modal-icon .fat{line-height:var(--impartner-hex-modal-title-line-height)}:host.fade.in{background-color:transparent}:host.show{display:block;opacity:1}:host:not(.show),:host.hide,:host .hide{display:none}:host.dismissable{cursor:pointer}:host.dismissable .modal-dialog{cursor:default}:host .modal-dialog{cursor:default;-webkit-user-select:auto;user-select:auto}:host .modal-theme-simple .modal-header,:host .modal-theme-destructive .modal-header{border:0;padding-bottom:0}:host .modal-theme-simple .modal-body,:host .modal-theme-destructive .modal-body{padding:calc(var(--impartner-hex-modal-padding) * .5) var(--impartner-hex-modal-padding) var(--impartner-hex-modal-padding)}:host .modal-theme-simple .modal-footer,:host .modal-theme-destructive .modal-footer{border:0;padding-top:0}:host .modal-theme-working .modal-footer{padding:calc(var(--impartner-hex-modal-padding) * .5 - var(--impartner-hex-modal-footer-gap) * .5) calc(var(--impartner-hex-modal-padding) - var(--impartner-hex-modal-footer-gap) * .5)}:host .modal-theme-destructive .modal-content{display:grid;grid-template-areas:\"modal-icon modal-header\" \"modal-icon modal-body\" \"modal-footer modal-footer\";grid-template-columns:auto 1fr;grid-template-rows:auto 1fr auto}:host .modal-theme-destructive .modal-content>.modal-icon{grid-area:modal-icon;margin:var(--impartner-hex-modal-header-padding);margin-right:0;margin-bottom:0}:host .modal-theme-destructive .modal-content>.modal-header{grid-area:modal-header;padding-left:16px;margin-top:8px;justify-content:unset}:host .modal-theme-destructive .modal-content>.modal-body{grid-area:modal-body;padding-left:16px}:host .modal-theme-destructive .modal-content>.modal-footer{grid-area:modal-footer}:host .modal-theme-destructive .modal-icon{color:var(--impd-color-red-600);background:var(--impd-color-red-100)}\n"] }]
+                    }, template: "<div\n  #dialogElement\n  *ngIf=\"valid\"\n  class=\"modal-dialog modal-dialog-centered modal-dialog-scrollable modal-theme-{{\n    theme\n  }}\"\n  [class.modal-sm]=\"size === 'sm'\"\n  [class.modal-lg]=\"size === 'lg'\"\n  [class.modal-xl]=\"size === 'xl'\"\n  [class.modal-fullscreen]=\"size === 'fs'\"\n  [class.modal-fullscreen-lg-down]=\"size !== 'fs'\">\n  <div class=\"modal-content\">\n    <div *ngIf=\"showDestructiveIcon\" class=\"modal-icon\">\n      <span impdc-icon [name]=\"iconName\" [theme]=\"iconTheme\"></span>\n    </div>\n    <div #header class=\"modal-header\" [class.hide]=\"hideHeader\">\n      <h3 class=\"modal-title\">\n        <span *ngIf=\"showWorkingIcon\" class=\"modal-icon\">\n          <span impdc-icon [name]=\"iconName\" [theme]=\"iconTheme\"></span>\n        </span>\n        <span>{{ titleText }}</span>\n      </h3>\n      <button\n        impdcButton\n        *ngIf=\"dismissable\"\n        theme=\"close\"\n        (click)=\"handleDismiss($event); $event.stopPropagation()\"></button>\n    </div>\n    <div #bodyEl class=\"modal-body\">\n      <ng-content></ng-content>\n    </div>\n    <div #footer class=\"modal-footer\">\n      <span\n        #dismissEl\n        *ngIf=\"dismissable\"\n        [class.hide]=\"!dismissEl.children.length\"\n        (click)=\"handleDismiss($event); $event.stopPropagation()\">\n        <ng-content select=\"[dismiss]\"></ng-content>\n      </span>\n      <span\n        #denyEl\n        [class.hide]=\"!denyEl.children.length\"\n        (click)=\"handleDeny($event); $event.stopPropagation()\">\n        <ng-content select=\"[deny]\"></ng-content>\n      </span>\n      <span\n        #acceptEl\n        [class.hide]=\"!acceptEl.children.length\"\n        (click)=\"handleAccept($event); $event.stopPropagation()\">\n        <ng-content select=\"[accept]\"></ng-content>\n      </span>\n      <span\n        #acceptFallbackEl\n        *ngIf=\"!noFallback && !acceptEl.children.length\"\n        (click)=\"handleAccept($event); $event.stopPropagation()\">\n        <button\n          impdcButton\n          [text]=\"acceptText\"\n          [theme]=\"acceptFallbackTheme\"></button>\n      </span>\n    </div>\n  </div>\n</div>\n", styles: [":host{-webkit-user-select:none;user-select:none}:host .modal-icon{display:inline-flex;justify-content:center;align-items:center;height:40px;width:40px;color:var(--impd-color-gray-500);background:var(--impd-color-gray-100);border-radius:50%;flex-shrink:0}:host .modal-icon .fa,:host .modal-icon .fa-brands,:host .modal-icon .fa-duotone,:host .modal-icon .fa-light,:host .modal-icon .fa-regular,:host .modal-icon .fa-solid,:host .modal-icon .fa-thin,:host .modal-icon .fab,:host .modal-icon .fad,:host .modal-icon .fal,:host .modal-icon .far,:host .modal-icon .fas,:host .modal-icon .fat{line-height:var(--impartner-hex-modal-title-line-height)}:host.fade.in{background-color:transparent}:host.show{display:block;opacity:1}:host:not(.show),:host.hide,:host .hide{display:none}:host.dismissable{cursor:pointer}:host.dismissable .modal-dialog{cursor:default}:host .modal-dialog{cursor:default;-webkit-user-select:auto;user-select:auto}:host .modal-theme-simple .modal-header,:host .modal-theme-destructive .modal-header{border:0;padding-bottom:0}:host .modal-theme-simple .modal-body,:host .modal-theme-destructive .modal-body{padding:calc(var(--impartner-hex-modal-padding) * .5) var(--impartner-hex-modal-padding) var(--impartner-hex-modal-padding)}:host .modal-theme-simple .modal-footer,:host .modal-theme-destructive .modal-footer{border:0;padding-top:0}:host .modal-theme-working .modal-footer{padding:calc(var(--impartner-hex-modal-padding) * .5 - var(--impartner-hex-modal-footer-gap) * .5) calc(var(--impartner-hex-modal-padding) - var(--impartner-hex-modal-footer-gap) * .5)}:host .modal-theme-destructive .modal-content{display:grid;grid-template-areas:\"modal-icon modal-header\" \"modal-icon modal-body\" \"modal-footer modal-footer\";grid-template-columns:auto 1fr;grid-template-rows:auto 1fr auto}:host .modal-theme-destructive .modal-content>.modal-icon{grid-area:modal-icon;margin:var(--impartner-hex-modal-header-padding);margin-right:0;margin-bottom:0}:host .modal-theme-destructive .modal-content>.modal-header{grid-area:modal-header;padding-left:16px;margin-top:8px;justify-content:unset}:host .modal-theme-destructive .modal-content>.modal-body{grid-area:modal-body;padding-left:16px}:host .modal-theme-destructive .modal-content>.modal-footer{grid-area:modal-footer}:host .modal-theme-destructive .modal-icon{color:var(--impd-color-red-600);background:var(--impd-color-red-100)}\n"] }]
         }], ctorParameters: () => [{ type: InteractionService }, { type: i0.ElementRef }], propDecorators: { _dialogElementRef: [{
                 type: ViewChild,
                 args: ['dialogElement']
@@ -8152,6 +8293,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.1", ngImpor
                 type: Input
             }], backdrop: [{
                 type: Input
+            }], noFallback: [{
+                type: Input
             }], dismissEl: [{
                 type: ViewChild,
                 args: ['dismissEl', { static: false }]
@@ -8265,6 +8408,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.1", ngImpor
  * To use, import `ProgressBarModule` or another module that imports and exports that module from `@impartner/design-components`.
  */
 class ProgressBarComponent {
+    get textClass() {
+        return this.darkText ? 'dark-progress-text' : 'light-progress-text';
+    }
     constructor() {
         /**
          * The left/subject text of the Progress Bar.
@@ -8274,21 +8420,33 @@ class ProgressBarComponent {
          * The right/status text of the Progress Bar.
          */
         this.statusText = '';
+        /**
+         * The color of the progress bar
+         */
+        this.barColor = '';
+        /**
+         * The color of the label and status
+         */
+        this.darkText = true;
         /**
          * The current value of the Progress Bar represented as a number between 0 and 100.
          */
         this.progressPercentage = 0;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: ProgressBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.1", type: ProgressBarComponent, selector: "impdc-progress-bar", inputs: { labelText: "labelText", statusText: "statusText", progressPercentage: "progressPercentage" }, ngImport: i0, template: "<div class=\"progress-container\">\n  <div class=\"progress-text\">\n    <div class=\"text-left\">\n      {{ labelText }}\n    </div>\n    <div class=\"text-right\">\n      {{ statusText }}\n    </div>\n  </div>\n  <div class=\"bar-bg\">\n    <div\n      class=\"bar\"\n      role=\"progressbar\"\n      [style.width.%]=\"progressPercentage\"\n      [attr.aria-valuenow]=\"progressPercentage\"\n      aria-valuemin=\"0\"\n      aria-valuemax=\"100\"></div>\n  </div>\n</div>\n", styles: [".progress-container{min-width:50rem;width:100%;display:flex;flex-direction:column}.progress-container .progress-text{color:#000;display:flex;flex-direction:row;font-size:1.4rem}.progress-container .text-left{flex-grow:1}.progress-container .bar-bg{height:.6rem;overflow:hidden;border-top-right-radius:.6rem;border-bottom-right-radius:.6rem;background-color:#e5e7eb}.progress-container .bar{height:.6rem;overflow:hidden;background-color:#1d4ed8}\n"] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.1", type: ProgressBarComponent, selector: "impdc-progress-bar", inputs: { labelText: "labelText", statusText: "statusText", barColor: "barColor", darkText: "darkText", progressPercentage: "progressPercentage" }, ngImport: i0, template: "<div class=\"progress-container\">\n  <div class=\"progress-text\" [ngClass]=\"textClass\">\n    <div class=\"text-left\">\n      {{ labelText }}\n    </div>\n    <div class=\"text-right\">\n      {{ statusText }}\n    </div>\n  </div>\n  <div class=\"bar-bg\">\n    <div\n      [ngStyle]=\"{ 'background-color': barColor }\"\n      class=\"bar\"\n      role=\"progressbar\"\n      [style.width.%]=\"progressPercentage\"\n      [attr.aria-valuenow]=\"progressPercentage\"\n      aria-valuemin=\"0\"\n      aria-valuemax=\"100\"></div>\n  </div>\n</div>\n", styles: [".progress-container{width:100%;display:flex;flex-direction:column}.progress-container .progress-text{color:#000;display:flex;flex-direction:row;font-size:1.4rem;padding:0 .2rem .5rem}.progress-container .dark-progress-text{color:var(--impartner-hex-gray-900)}.progress-container .light-progress-text{color:var(--impartner-hex-gray-600)}.progress-container .text-left{flex-grow:1}.progress-container .bar-bg{height:1rem;overflow:hidden;border-bottom-right-radius:.6rem;background-color:#e5e7eb;border-radius:6rem}.progress-container .bar{height:1rem;overflow:hidden;background-color:#1d4ed8;border-radius:6rem}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: ProgressBarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'impdc-progress-bar', template: "<div class=\"progress-container\">\n  <div class=\"progress-text\">\n    <div class=\"text-left\">\n      {{ labelText }}\n    </div>\n    <div class=\"text-right\">\n      {{ statusText }}\n    </div>\n  </div>\n  <div class=\"bar-bg\">\n    <div\n      class=\"bar\"\n      role=\"progressbar\"\n      [style.width.%]=\"progressPercentage\"\n      [attr.aria-valuenow]=\"progressPercentage\"\n      aria-valuemin=\"0\"\n      aria-valuemax=\"100\"></div>\n  </div>\n</div>\n", styles: [".progress-container{min-width:50rem;width:100%;display:flex;flex-direction:column}.progress-container .progress-text{color:#000;display:flex;flex-direction:row;font-size:1.4rem}.progress-container .text-left{flex-grow:1}.progress-container .bar-bg{height:.6rem;overflow:hidden;border-top-right-radius:.6rem;border-bottom-right-radius:.6rem;background-color:#e5e7eb}.progress-container .bar{height:.6rem;overflow:hidden;background-color:#1d4ed8}\n"] }]
+            args: [{ selector: 'impdc-progress-bar', template: "<div class=\"progress-container\">\n  <div class=\"progress-text\" [ngClass]=\"textClass\">\n    <div class=\"text-left\">\n      {{ labelText }}\n    </div>\n    <div class=\"text-right\">\n      {{ statusText }}\n    </div>\n  </div>\n  <div class=\"bar-bg\">\n    <div\n      [ngStyle]=\"{ 'background-color': barColor }\"\n      class=\"bar\"\n      role=\"progressbar\"\n      [style.width.%]=\"progressPercentage\"\n      [attr.aria-valuenow]=\"progressPercentage\"\n      aria-valuemin=\"0\"\n      aria-valuemax=\"100\"></div>\n  </div>\n</div>\n", styles: [".progress-container{width:100%;display:flex;flex-direction:column}.progress-container .progress-text{color:#000;display:flex;flex-direction:row;font-size:1.4rem;padding:0 .2rem .5rem}.progress-container .dark-progress-text{color:var(--impartner-hex-gray-900)}.progress-container .light-progress-text{color:var(--impartner-hex-gray-600)}.progress-container .text-left{flex-grow:1}.progress-container .bar-bg{height:1rem;overflow:hidden;border-bottom-right-radius:.6rem;background-color:#e5e7eb;border-radius:6rem}.progress-container .bar{height:1rem;overflow:hidden;background-color:#1d4ed8;border-radius:6rem}\n"] }]
         }], ctorParameters: () => [], propDecorators: { labelText: [{
                 type: Input
             }], statusText: [{
                 type: Input
+            }], barColor: [{
+                type: Input
+            }], darkText: [{
+                type: Input
             }], progressPercentage: [{
                 type: Input
             }] } });
@@ -8508,6 +8666,10 @@ class AlertComponent {
          * Removes the Alert icon provided by the theme or projected into the icon area using the `icon` directive.
          */
         this.hideIcon = false;
+        /**
+         * Removes the Alert border and background colors to only style icon and text according to theme.
+         */
+        this.borderless = false;
         /**
          * Allows the Alert to be dismissed.
          */
@@ -8529,7 +8691,8 @@ class AlertComponent {
                         : '';
         const inlineClass = this.inline ? ' alert-inline' : '';
         const dismissibleClass = this.dismissible ? ' alert-dismissible' : '';
-        return themeClass + inlineClass + dismissibleClass;
+        const borderless = this.borderless ? ' borderless' : '';
+        return themeClass + inlineClass + dismissibleClass + borderless;
     }
     get themeIconName() {
         return this.theme === 'warning'
@@ -8550,11 +8713,11 @@ class AlertComponent {
         this.dismiss.emit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: AlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.1", type: AlertComponent, selector: "impdc-alert, [impdc-alert]", inputs: { theme: "theme", show: "show", headingText: "headingText", bodyText: "bodyText", inline: "inline", hideIcon: "hideIcon", dismissible: "dismissible" }, outputs: { dismiss: "dismiss" }, ngImport: i0, template: "<div *ngIf=\"show\" class=\"impdc alert\" [ngClass]=\"componentClasses\">\n  <ng-container *ngIf=\"!hideIcon\">\n    <span #alertIcon [hidden]=\"!alertIcon.children.length\" class=\"alert-icon\">\n      <ng-content select=\"[icon]\"></ng-content>\n    </span>\n    <span *ngIf=\"!alertIcon.children.length\" class=\"alert-icon\">\n      <span impdc-icon [name]=\"themeIconName\"></span>\n    </span>\n  </ng-container>\n\n  <div\n    class=\"alert-content\"\n    [ngClass]=\"{\n      'alert-content-heading-only':\n        !bodyText &&\n        !projectedBody.children.length &&\n        !projectedBody.innerHTML &&\n        !alertActions.children.length\n    }\">\n    <div class=\"alert-heading\">\n      <ng-content select=\"[heading]\"></ng-content>\n      <span *ngIf=\"headingText\">{{ headingText }}</span>\n    </div>\n    <div\n      #bodyContent\n      class=\"alert-body\"\n      [hidden]=\"!bodyContent.children.length\">\n      <div *ngIf=\"bodyText\">{{ bodyText }}</div>\n\n      <div\n        #projectedBody\n        [hidden]=\"!projectedBody.children.length && !projectedBody.innerHTML\">\n        <ng-content></ng-content>\n      </div>\n\n      <div\n        #alertActions\n        [hidden]=\"!alertActions.children.length\"\n        class=\"alert-actions\">\n        <ng-content select=\"[action]\"></ng-content>\n      </div>\n    </div>\n  </div>\n\n  <a\n    *ngIf=\"dismissible\"\n    class=\"close-icon\"\n    (click)=\"closeAlert()\"\n    data-bs-dismiss=\"alert\"\n    aria-label=\"Close\">\n    <span impdc-icon name=\"times\" theme=\"regular\"></span>\n  </a>\n</div>\n", styles: [".impdc.alert{display:flex;gap:1.2rem}.impdc.alert .alert-icon,.impdc.alert .close-icon{display:flex;width:2rem;height:2rem;font-size:1.6rem;line-height:2rem;align-items:center;justify-content:center}.impdc.alert .alert-content{flex:1;display:flex;flex-direction:column;gap:.8rem}.impdc.alert .alert-content .alert-heading{display:flex;align-items:center;gap:1.2rem}.impdc.alert .alert-content .alert-body{display:flex;flex-direction:column;gap:1.6rem;font-size:1.4rem;font-weight:400;line-height:2rem}.impdc.alert .alert-content .alert-body .alert-actions{display:flex;gap:2.8rem}.impdc.alert .alert-content .alert-body .alert-actions ::ng-deep a{font-size:1.4rem;font-weight:500;line-height:2rem;text-decoration-line:underline;color:var(--impartner-hex-alert-action-color)}.impdc.alert .alert-content-heading-only{gap:0}.impdc.alert .close-icon{cursor:pointer;color:var(--impartner-hex-btn-close-color)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "impdc-icon, [impdc-icon]", inputs: ["name", "theme", "size"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.1", type: AlertComponent, selector: "impdc-alert, [impdc-alert]", inputs: { theme: "theme", show: "show", headingText: "headingText", bodyText: "bodyText", inline: "inline", hideIcon: "hideIcon", borderless: "borderless", dismissible: "dismissible" }, outputs: { dismiss: "dismiss" }, ngImport: i0, template: "<div *ngIf=\"show\" class=\"impdc alert\" [ngClass]=\"componentClasses\">\n  <ng-container *ngIf=\"!hideIcon\">\n    <span #alertIcon [hidden]=\"!alertIcon.children.length\" class=\"alert-icon\">\n      <ng-content select=\"[icon]\"></ng-content>\n    </span>\n    <span *ngIf=\"!alertIcon.children.length\" class=\"alert-icon\">\n      <span impdc-icon [name]=\"themeIconName\"></span>\n    </span>\n  </ng-container>\n\n  <div\n    class=\"alert-content\"\n    [ngClass]=\"{\n      'alert-content-heading-only':\n        !bodyText &&\n        !projectedBody.children.length &&\n        !projectedBody.innerHTML &&\n        !alertActions.children.length\n    }\">\n    <div class=\"alert-heading\">\n      <ng-content select=\"[heading]\"></ng-content>\n      <span *ngIf=\"headingText\">{{ headingText }}</span>\n    </div>\n    <div\n      #bodyContent\n      class=\"alert-body\"\n      [hidden]=\"!bodyContent.children.length\">\n      <div *ngIf=\"bodyText\">{{ bodyText }}</div>\n\n      <div\n        #projectedBody\n        [hidden]=\"!projectedBody.children.length && !projectedBody.innerHTML\">\n        <ng-content></ng-content>\n      </div>\n\n      <div\n        #alertActions\n        [hidden]=\"!alertActions.children.length\"\n        class=\"alert-actions\">\n        <ng-content select=\"[action]\"></ng-content>\n      </div>\n    </div>\n  </div>\n\n  <a\n    *ngIf=\"dismissible\"\n    class=\"close-icon\"\n    (click)=\"closeAlert()\"\n    data-bs-dismiss=\"alert\"\n    aria-label=\"Close\">\n    <span impdc-icon name=\"times\" theme=\"regular\"></span>\n  </a>\n</div>\n", styles: [".impdc.alert{display:flex;gap:1.2rem}.impdc.alert .alert-icon,.impdc.alert .close-icon{display:flex;width:2rem;height:2rem;font-size:1.6rem;line-height:2rem;align-items:center;justify-content:center}.impdc.alert .alert-content{flex:1;display:flex;flex-direction:column;gap:.8rem}.impdc.alert .alert-content .alert-heading{display:flex;align-items:center;gap:1.2rem}.impdc.alert .alert-content .alert-body{display:flex;flex-direction:column;gap:1.6rem;font-size:1.4rem;font-weight:400;line-height:2rem}.impdc.alert .alert-content .alert-body .alert-actions{display:flex;gap:2.8rem}.impdc.alert .alert-content .alert-body .alert-actions ::ng-deep a{font-size:1.4rem;font-weight:500;line-height:2rem;text-decoration-line:underline;color:var(--impartner-hex-alert-action-color)}.impdc.alert .alert-content-heading-only{gap:0}.impdc.alert .close-icon{cursor:pointer;color:var(--impartner-hex-btn-close-color)}.impdc.alert.borderless{border:none;background-color:transparent}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "impdc-icon, [impdc-icon]", inputs: ["name", "theme", "size"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: AlertComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'impdc-alert, [impdc-alert]', template: "<div *ngIf=\"show\" class=\"impdc alert\" [ngClass]=\"componentClasses\">\n  <ng-container *ngIf=\"!hideIcon\">\n    <span #alertIcon [hidden]=\"!alertIcon.children.length\" class=\"alert-icon\">\n      <ng-content select=\"[icon]\"></ng-content>\n    </span>\n    <span *ngIf=\"!alertIcon.children.length\" class=\"alert-icon\">\n      <span impdc-icon [name]=\"themeIconName\"></span>\n    </span>\n  </ng-container>\n\n  <div\n    class=\"alert-content\"\n    [ngClass]=\"{\n      'alert-content-heading-only':\n        !bodyText &&\n        !projectedBody.children.length &&\n        !projectedBody.innerHTML &&\n        !alertActions.children.length\n    }\">\n    <div class=\"alert-heading\">\n      <ng-content select=\"[heading]\"></ng-content>\n      <span *ngIf=\"headingText\">{{ headingText }}</span>\n    </div>\n    <div\n      #bodyContent\n      class=\"alert-body\"\n      [hidden]=\"!bodyContent.children.length\">\n      <div *ngIf=\"bodyText\">{{ bodyText }}</div>\n\n      <div\n        #projectedBody\n        [hidden]=\"!projectedBody.children.length && !projectedBody.innerHTML\">\n        <ng-content></ng-content>\n      </div>\n\n      <div\n        #alertActions\n        [hidden]=\"!alertActions.children.length\"\n        class=\"alert-actions\">\n        <ng-content select=\"[action]\"></ng-content>\n      </div>\n    </div>\n  </div>\n\n  <a\n    *ngIf=\"dismissible\"\n    class=\"close-icon\"\n    (click)=\"closeAlert()\"\n    data-bs-dismiss=\"alert\"\n    aria-label=\"Close\">\n    <span impdc-icon name=\"times\" theme=\"regular\"></span>\n  </a>\n</div>\n", styles: [".impdc.alert{display:flex;gap:1.2rem}.impdc.alert .alert-icon,.impdc.alert .close-icon{display:flex;width:2rem;height:2rem;font-size:1.6rem;line-height:2rem;align-items:center;justify-content:center}.impdc.alert .alert-content{flex:1;display:flex;flex-direction:column;gap:.8rem}.impdc.alert .alert-content .alert-heading{display:flex;align-items:center;gap:1.2rem}.impdc.alert .alert-content .alert-body{display:flex;flex-direction:column;gap:1.6rem;font-size:1.4rem;font-weight:400;line-height:2rem}.impdc.alert .alert-content .alert-body .alert-actions{display:flex;gap:2.8rem}.impdc.alert .alert-content .alert-body .alert-actions ::ng-deep a{font-size:1.4rem;font-weight:500;line-height:2rem;text-decoration-line:underline;color:var(--impartner-hex-alert-action-color)}.impdc.alert .alert-content-heading-only{gap:0}.impdc.alert .close-icon{cursor:pointer;color:var(--impartner-hex-btn-close-color)}\n"] }]
+            args: [{ selector: 'impdc-alert, [impdc-alert]', template: "<div *ngIf=\"show\" class=\"impdc alert\" [ngClass]=\"componentClasses\">\n  <ng-container *ngIf=\"!hideIcon\">\n    <span #alertIcon [hidden]=\"!alertIcon.children.length\" class=\"alert-icon\">\n      <ng-content select=\"[icon]\"></ng-content>\n    </span>\n    <span *ngIf=\"!alertIcon.children.length\" class=\"alert-icon\">\n      <span impdc-icon [name]=\"themeIconName\"></span>\n    </span>\n  </ng-container>\n\n  <div\n    class=\"alert-content\"\n    [ngClass]=\"{\n      'alert-content-heading-only':\n        !bodyText &&\n        !projectedBody.children.length &&\n        !projectedBody.innerHTML &&\n        !alertActions.children.length\n    }\">\n    <div class=\"alert-heading\">\n      <ng-content select=\"[heading]\"></ng-content>\n      <span *ngIf=\"headingText\">{{ headingText }}</span>\n    </div>\n    <div\n      #bodyContent\n      class=\"alert-body\"\n      [hidden]=\"!bodyContent.children.length\">\n      <div *ngIf=\"bodyText\">{{ bodyText }}</div>\n\n      <div\n        #projectedBody\n        [hidden]=\"!projectedBody.children.length && !projectedBody.innerHTML\">\n        <ng-content></ng-content>\n      </div>\n\n      <div\n        #alertActions\n        [hidden]=\"!alertActions.children.length\"\n        class=\"alert-actions\">\n        <ng-content select=\"[action]\"></ng-content>\n      </div>\n    </div>\n  </div>\n\n  <a\n    *ngIf=\"dismissible\"\n    class=\"close-icon\"\n    (click)=\"closeAlert()\"\n    data-bs-dismiss=\"alert\"\n    aria-label=\"Close\">\n    <span impdc-icon name=\"times\" theme=\"regular\"></span>\n  </a>\n</div>\n", styles: [".impdc.alert{display:flex;gap:1.2rem}.impdc.alert .alert-icon,.impdc.alert .close-icon{display:flex;width:2rem;height:2rem;font-size:1.6rem;line-height:2rem;align-items:center;justify-content:center}.impdc.alert .alert-content{flex:1;display:flex;flex-direction:column;gap:.8rem}.impdc.alert .alert-content .alert-heading{display:flex;align-items:center;gap:1.2rem}.impdc.alert .alert-content .alert-body{display:flex;flex-direction:column;gap:1.6rem;font-size:1.4rem;font-weight:400;line-height:2rem}.impdc.alert .alert-content .alert-body .alert-actions{display:flex;gap:2.8rem}.impdc.alert .alert-content .alert-body .alert-actions ::ng-deep a{font-size:1.4rem;font-weight:500;line-height:2rem;text-decoration-line:underline;color:var(--impartner-hex-alert-action-color)}.impdc.alert .alert-content-heading-only{gap:0}.impdc.alert .close-icon{cursor:pointer;color:var(--impartner-hex-btn-close-color)}.impdc.alert.borderless{border:none;background-color:transparent}\n"] }]
         }], propDecorators: { theme: [{
                 type: Input
             }], show: [{
@@ -8567,6 +8730,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.1", ngImpor
                 type: Input
             }], hideIcon: [{
                 type: Input
+            }], borderless: [{
+                type: Input
             }], dismissible: [{
                 type: Input
             }], dismiss: [{
@@ -8981,7 +9146,10 @@ class FileUploadModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: FileUploadModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
     static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.1", ngImport: i0, type: FileUploadModule, declarations: [FileDropDirective,
             FileUploadComponent,
-            HumanReadableByteSizePipe], imports: [CommonModule, FormsModule, ButtonModule, IconModule], exports: [IconModule, FileDropDirective, FileUploadComponent] }); }
+            HumanReadableByteSizePipe], imports: [CommonModule, FormsModule, ButtonModule, IconModule], exports: [IconModule,
+            FileDropDirective,
+            FileUploadComponent,
+            HumanReadableByteSizePipe] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: FileUploadModule, imports: [CommonModule, FormsModule, ButtonModule, IconModule, IconModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: FileUploadModule, decorators: [{
@@ -8993,7 +9161,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.1", ngImpor
                         FileUploadComponent,
                         HumanReadableByteSizePipe
                     ],
-                    exports: [IconModule, FileDropDirective, FileUploadComponent]
+                    exports: [
+                        IconModule,
+                        FileDropDirective,
+                        FileUploadComponent,
+                        HumanReadableByteSizePipe
+                    ]
                 }]
         }], ctorParameters: () => [] });
 
@@ -9308,7 +9481,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.1", ngImpor
                     }]
             }] } });
 
-const DEFAULT_USE_MERIDIAN_LABEL = 'Use 24-hour format';
+const DEFAULT_USE_24HR_TIME_LABEL = 'Use 24-hour format';
 const DEFAULT_MIN_DATE = {
     year: 1900,
     month: 1,
@@ -9456,7 +9629,7 @@ class DatetimePickerComponent extends _DatetimePickerComponentBase {
         this.formGroup = inject(FormBuilder).group({
             date: new FormControl(null),
             time: new FormControl(null),
-            useMeridian: new FormControl(true, { nonNullable: true })
+            use24hrTime: new FormControl(false, { nonNullable: true })
         });
         this.cvaOnChange = (_) => { };
         this.cvaOnTouched = () => { };
@@ -9466,7 +9639,7 @@ class DatetimePickerComponent extends _DatetimePickerComponentBase {
         /**
          * Label to be displayed with time controls to allow the user to input 24-hour or meridian-based (AM, PM) time.
          */
-        this.meridianToggleLabel = DEFAULT_USE_MERIDIAN_LABEL;
+        this.meridianToggleLabel = DEFAULT_USE_24HR_TIME_LABEL;
         /**
          * Set whether to display controls for selecting a time value in addition to the date.
          */
@@ -9608,11 +9781,11 @@ class DatetimePickerComponent extends _DatetimePickerComponentBase {
         return this._focused;
     }
     /* Internals */
-    get useMeridian() {
-        return this.formGroup.getRawValue().useMeridian;
+    get use24hrTime() {
+        return this.formGroup.getRawValue().use24hrTime;
     }
-    get useMeridianLabelText() {
-        return this.meridianToggleLabel?.trim() || DEFAULT_USE_MERIDIAN_LABEL;
+    get use24hrTimeLabelText() {
+        return this.meridianToggleLabel?.trim() || DEFAULT_USE_24HR_TIME_LABEL;
     }
     handleFocusOut(evt) {
         if (!evt.relatedTarget ||
@@ -9659,7 +9832,7 @@ class DatetimePickerComponent extends _DatetimePickerComponentBase {
                 provide: ImpdcFormFieldControl,
                 useExisting: DatetimePickerComponent
             }
-        ], viewQueries: [{ propertyName: "ngbDatepicker", first: true, predicate: NgbDatepicker, descendants: true, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<impdc-datepicker-template-host #templateHost></impdc-datepicker-template-host>\n<div\n  [formGroup]=\"formGroup\"\n  class=\"d-flex\"\n  [ngClass]=\"{\n    'flex-column': withTime && timeLayout.layout === 'stacked'\n  }\"\n  (focusout)=\"handleFocusOut($event)\">\n  <ngb-datepicker\n    class=\"impdc-datetime-picker--datepicker\"\n    formControlName=\"date\"\n    [dayTemplate]=\"templateHost.dayTemplateRef\"\n    [contentTemplate]=\"templateHost.contentTemplateRef\"\n    [showWeekNumbers]=\"false\"\n    outsideDays=\"visible\"\n    [weekdays]=\"NgTranslationWidth.Abbreviated\"\n    [markDisabled]=\"markDateDisabledFn\"\n    [minDate]=\"minDate\"\n    [maxDate]=\"maxDate\" />\n  @if (withTime) {\n  <div\n    class=\"impdc-datetime-picker--timepicker d-flex flex-column gap-4 p-4 w-100\"\n    [ngClass]=\"{\n      'border-0': !timeLayout.border,\n      'border-gray-200': timeLayout.border,\n      'mt-2': timeLayout.layout === 'stacked',\n      'border-top': timeLayout.border && timeLayout.layout === 'stacked',\n      'ms-2': timeLayout.layout === 'inline',\n      'border-start': timeLayout.border && timeLayout.layout === 'inline'\n    }\">\n    <impdc-checkbox\n      [label]=\"useMeridianLabelText\"\n      formControlName=\"useMeridian\"\n      [isSwitch]=\"true\"\n      layout=\"check-end\" />\n    <ngb-timepicker\n      formControlName=\"time\"\n      [meridian]=\"useMeridian\"\n      [seconds]=\"false\"\n      [spinners]=\"false\"\n      size=\"medium\"></ngb-timepicker>\n  </div>\n  }\n</div>\n", styles: [":host{display:block}ngb-datepicker{border:0}ngb-timepicker{font-size:var(--impd-font-size-sm)}::ng-deep .ngb-dp-header{display:none}::ng-deep .ngb-tp-spacer{width:var(--impd-size-4)}.impdc-datetime-picker--datepicker,.impdc-datetime-picker--timepicker{max-width:312px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: NgbDatepickerModule }, { kind: "component", type: i3.NgbDatepicker, selector: "ngb-datepicker", inputs: ["contentTemplate", "dayTemplate", "dayTemplateData", "displayMonths", "firstDayOfWeek", "footerTemplate", "markDisabled", "maxDate", "minDate", "navigation", "outsideDays", "showWeekNumbers", "startDate", "weekdays"], outputs: ["navigate", "dateSelect"], exportAs: ["ngbDatepicker"] }, { kind: "ngmodule", type: NgbTimepickerModule }, { kind: "component", type: i3.NgbTimepicker, selector: "ngb-timepicker", inputs: ["meridian", "spinners", "seconds", "hourStep", "minuteStep", "secondStep", "readonlyInputs", "size"], exportAs: ["ngbTimepicker"] }, { kind: "component", type: DatepickerTemplateHostComponent, selector: "impdc-datepicker-template-host" }, { kind: "ngmodule", type: ImpdcFormsModule }, { kind: "directive", type: RootFormGroupDirective, selector: "[formGroup]" }, { kind: "component", type: CheckboxComponent, selector: "impdc-checkbox", inputs: ["tabIndex", "id", "label", "description", "isSwitch", "switchIcons", "inline", "layout", "checked", "indeterminate", "disabled", "errorStateMatcher", "required"], outputs: ["change", "indeterminateChange"], exportAs: ["impdcCheckControl"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], viewQueries: [{ propertyName: "ngbDatepicker", first: true, predicate: NgbDatepicker, descendants: true, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<impdc-datepicker-template-host #templateHost></impdc-datepicker-template-host>\n<div\n  [formGroup]=\"formGroup\"\n  class=\"d-flex\"\n  [ngClass]=\"{\n    'flex-column': withTime && timeLayout.layout === 'stacked'\n  }\"\n  (focusout)=\"handleFocusOut($event)\">\n  <ngb-datepicker\n    class=\"impdc-datetime-picker--datepicker\"\n    formControlName=\"date\"\n    [dayTemplate]=\"templateHost.dayTemplateRef\"\n    [contentTemplate]=\"templateHost.contentTemplateRef\"\n    [showWeekNumbers]=\"false\"\n    outsideDays=\"visible\"\n    [weekdays]=\"NgTranslationWidth.Abbreviated\"\n    [markDisabled]=\"markDateDisabledFn\"\n    [minDate]=\"minDate\"\n    [maxDate]=\"maxDate\" />\n  @if (withTime) {\n  <div\n    class=\"impdc-datetime-picker--timepicker d-flex flex-column gap-4 p-4 w-100\"\n    [ngClass]=\"{\n      'border-0': !timeLayout.border,\n      'border-gray-200': timeLayout.border,\n      'mt-2': timeLayout.layout === 'stacked',\n      'border-top': timeLayout.border && timeLayout.layout === 'stacked',\n      'ms-2': timeLayout.layout === 'inline',\n      'border-start': timeLayout.border && timeLayout.layout === 'inline'\n    }\">\n    <impdc-checkbox\n      [label]=\"use24hrTimeLabelText\"\n      formControlName=\"use24hrTime\"\n      [isSwitch]=\"true\"\n      layout=\"check-end\" />\n    <ngb-timepicker\n      formControlName=\"time\"\n      [meridian]=\"!use24hrTime\"\n      [seconds]=\"false\"\n      [spinners]=\"false\"\n      size=\"medium\"></ngb-timepicker>\n  </div>\n  }\n</div>\n", styles: [":host{display:block}ngb-datepicker{border:0}ngb-timepicker{font-size:var(--impd-font-size-sm)}::ng-deep .ngb-dp-header{display:none}::ng-deep .ngb-tp-spacer{width:var(--impd-size-4)}.impdc-datetime-picker--datepicker,.impdc-datetime-picker--timepicker{max-width:312px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: NgbDatepickerModule }, { kind: "component", type: i3.NgbDatepicker, selector: "ngb-datepicker", inputs: ["contentTemplate", "dayTemplate", "dayTemplateData", "displayMonths", "firstDayOfWeek", "footerTemplate", "markDisabled", "maxDate", "minDate", "navigation", "outsideDays", "showWeekNumbers", "startDate", "weekdays"], outputs: ["navigate", "dateSelect"], exportAs: ["ngbDatepicker"] }, { kind: "ngmodule", type: NgbTimepickerModule }, { kind: "component", type: i3.NgbTimepicker, selector: "ngb-timepicker", inputs: ["meridian", "spinners", "seconds", "hourStep", "minuteStep", "secondStep", "readonlyInputs", "size"], exportAs: ["ngbTimepicker"] }, { kind: "component", type: DatepickerTemplateHostComponent, selector: "impdc-datepicker-template-host" }, { kind: "ngmodule", type: ImpdcFormsModule }, { kind: "directive", type: RootFormGroupDirective, selector: "[formGroup]" }, { kind: "component", type: CheckboxComponent, selector: "impdc-checkbox", inputs: ["tabIndex", "id", "label", "description", "isSwitch", "switchIcons", "inline", "layout", "checked", "indeterminate", "disabled", "errorStateMatcher", "required"], outputs: ["change", "indeterminateChange"], exportAs: ["impdcCheckControl"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.1", ngImport: i0, type: DatetimePickerComponent, decorators: [{
             type: Component,
@@ -9689,7 +9862,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.1", ngImpor
                             provide: ImpdcFormFieldControl,
                             useExisting: DatetimePickerComponent
                         }
-                    ], template: "<impdc-datepicker-template-host #templateHost></impdc-datepicker-template-host>\n<div\n  [formGroup]=\"formGroup\"\n  class=\"d-flex\"\n  [ngClass]=\"{\n    'flex-column': withTime && timeLayout.layout === 'stacked'\n  }\"\n  (focusout)=\"handleFocusOut($event)\">\n  <ngb-datepicker\n    class=\"impdc-datetime-picker--datepicker\"\n    formControlName=\"date\"\n    [dayTemplate]=\"templateHost.dayTemplateRef\"\n    [contentTemplate]=\"templateHost.contentTemplateRef\"\n    [showWeekNumbers]=\"false\"\n    outsideDays=\"visible\"\n    [weekdays]=\"NgTranslationWidth.Abbreviated\"\n    [markDisabled]=\"markDateDisabledFn\"\n    [minDate]=\"minDate\"\n    [maxDate]=\"maxDate\" />\n  @if (withTime) {\n  <div\n    class=\"impdc-datetime-picker--timepicker d-flex flex-column gap-4 p-4 w-100\"\n    [ngClass]=\"{\n      'border-0': !timeLayout.border,\n      'border-gray-200': timeLayout.border,\n      'mt-2': timeLayout.layout === 'stacked',\n      'border-top': timeLayout.border && timeLayout.layout === 'stacked',\n      'ms-2': timeLayout.layout === 'inline',\n      'border-start': timeLayout.border && timeLayout.layout === 'inline'\n    }\">\n    <impdc-checkbox\n      [label]=\"useMeridianLabelText\"\n      formControlName=\"useMeridian\"\n      [isSwitch]=\"true\"\n      layout=\"check-end\" />\n    <ngb-timepicker\n      formControlName=\"time\"\n      [meridian]=\"useMeridian\"\n      [seconds]=\"false\"\n      [spinners]=\"false\"\n      size=\"medium\"></ngb-timepicker>\n  </div>\n  }\n</div>\n", styles: [":host{display:block}ngb-datepicker{border:0}ngb-timepicker{font-size:var(--impd-font-size-sm)}::ng-deep .ngb-dp-header{display:none}::ng-deep .ngb-tp-spacer{width:var(--impd-size-4)}.impdc-datetime-picker--datepicker,.impdc-datetime-picker--timepicker{max-width:312px}\n"] }]
+                    ], template: "<impdc-datepicker-template-host #templateHost></impdc-datepicker-template-host>\n<div\n  [formGroup]=\"formGroup\"\n  class=\"d-flex\"\n  [ngClass]=\"{\n    'flex-column': withTime && timeLayout.layout === 'stacked'\n  }\"\n  (focusout)=\"handleFocusOut($event)\">\n  <ngb-datepicker\n    class=\"impdc-datetime-picker--datepicker\"\n    formControlName=\"date\"\n    [dayTemplate]=\"templateHost.dayTemplateRef\"\n    [contentTemplate]=\"templateHost.contentTemplateRef\"\n    [showWeekNumbers]=\"false\"\n    outsideDays=\"visible\"\n    [weekdays]=\"NgTranslationWidth.Abbreviated\"\n    [markDisabled]=\"markDateDisabledFn\"\n    [minDate]=\"minDate\"\n    [maxDate]=\"maxDate\" />\n  @if (withTime) {\n  <div\n    class=\"impdc-datetime-picker--timepicker d-flex flex-column gap-4 p-4 w-100\"\n    [ngClass]=\"{\n      'border-0': !timeLayout.border,\n      'border-gray-200': timeLayout.border,\n      'mt-2': timeLayout.layout === 'stacked',\n      'border-top': timeLayout.border && timeLayout.layout === 'stacked',\n      'ms-2': timeLayout.layout === 'inline',\n      'border-start': timeLayout.border && timeLayout.layout === 'inline'\n    }\">\n    <impdc-checkbox\n      [label]=\"use24hrTimeLabelText\"\n      formControlName=\"use24hrTime\"\n      [isSwitch]=\"true\"\n      layout=\"check-end\" />\n    <ngb-timepicker\n      formControlName=\"time\"\n      [meridian]=\"!use24hrTime\"\n      [seconds]=\"false\"\n      [spinners]=\"false\"\n      size=\"medium\"></ngb-timepicker>\n  </div>\n  }\n</div>\n", styles: [":host{display:block}ngb-datepicker{border:0}ngb-timepicker{font-size:var(--impd-font-size-sm)}::ng-deep .ngb-dp-header{display:none}::ng-deep .ngb-tp-spacer{width:var(--impd-size-4)}.impdc-datetime-picker--datepicker,.impdc-datetime-picker--timepicker{max-width:312px}\n"] }]
         }], ctorParameters: () => [{ type: ErrorStateMatcher }, { type: undefined, decorators: [{
                     type: Optional
                 }, {