novo-elements 6.0.0-next.6 → 6.0.0-next.7

package/bundles/novo-elements.umd.js

@@ -20913,7 +20913,7 @@
         }
         Object.defineProperty(NovoFormGroup.prototype, "value", {
             get: function () {
-                return this.getRawValue();
+                return this.getRawValue(); // The value property on Angular form groups do not include disabled form control values.  Find way to address this.
             },
             set: function (v) {
                 this._value = v;
@@ -21019,6 +21019,7 @@
             this.noItems = 'There are no items';
             this.dateFormat = 'MM/dd/yyyy';
             this.dateFormatPlaceholder = 'MM/DD/YYYY';
+            this.localDatePlaceholder = 'mm/dd/yyyy';
             this.timeFormatPlaceholderAM = 'hh:mm AM';
             this.timeFormatPlaceholder24Hour = 'HH:mm';
             this.timeFormatAM = 'AM';
@@ -21067,6 +21068,9 @@
         NovoLabelService.prototype.dateFormatString = function () {
             return this.dateFormat;
         };
+        NovoLabelService.prototype.localizedDatePlaceholder = function () {
+            return this.localDatePlaceholder;
+        };
         NovoLabelService.prototype.tabbedGroupClearSuggestion = function (tabLabelPlural) {
             return "Clear your search to see all " + tabLabelPlural + ".";
         };
@@ -25437,9 +25441,12 @@
             /** Emits when the state of the option changes and any parents have to be notified. */
             this._stateChanges = new rxjs.Subject();
             // (click) is overridden when defined by user.
-            this._clickListener = rxjs.fromEvent(this._element.nativeElement, 'click', { capture: true }).subscribe(function (evt) {
+            this._clickCapture = rxjs.fromEvent(this._element.nativeElement, 'click', { capture: true }).subscribe(function (evt) {
                 _this._handleDisabledClick(evt);
             });
+            this._clickPassive = rxjs.fromEvent(this._element.nativeElement, 'click').subscribe(function (evt) {
+                setTimeout(function () { return _this._handlePassiveClick(evt); });
+            });
         }
         Object.defineProperty(NovoOptionBase.prototype, "selectable", {
             /** If there is no parent then nothing is managing the selection. */
@@ -25554,25 +25561,19 @@
             return this.viewValue;
         };
         NovoOptionBase.prototype._handleDisabledClick = function (event) {
-            console.log('Captured click');
             if (this.disabled) {
-                console.log('disabled');
                 event.preventDefault();
                 event.stopPropagation();
                 event.stopImmediatePropagation();
             }
-            else if (this.inert) {
-                // do nothing
-                console.log('this is inert');
-            }
-            else {
-                console.log('selecting');
+        };
+        NovoOptionBase.prototype._handlePassiveClick = function (event) {
+            if (!this.inert) {
                 this._selectViaInteraction();
             }
         };
         /** Ensures the option is selected when activated from the keyboard. */
         NovoOptionBase.prototype._handleKeydown = function (event) {
-            console.log('KEY DOWN');
             if (event.target instanceof HTMLInputElement && event.key === "Enter" /* Enter */) {
                 this._emitSelectionChangeEvent(!this.keepOpen);
             }
@@ -25636,7 +25637,8 @@
         };
         NovoOptionBase.prototype.ngOnDestroy = function () {
             this._stateChanges.complete();
-            this._clickListener.unsubscribe();
+            this._clickCapture.unsubscribe();
+            this._clickPassive.unsubscribe();
         };
         /** Emits the selection change event. */
         NovoOptionBase.prototype._emitSelectionChangeEvent = function (isUserInput) {
@@ -26380,6 +26382,12 @@
                 if (_this.overlayRef) {
                     _this.overlayRef.updatePosition();
                     _this.opening.emit(true);
+                    setTimeout(function () {
+                        // TODO: @charlesabarnes Remove this once we remove table
+                        if (_this.overlayRef) {
+                            _this.overlayRef.updatePosition();
+                        }
+                    });
                 }
             });
         };
@@ -26752,6 +26760,9 @@
                     }
                 });
             }
+            else if ("Escape" /* Escape */ === key) {
+                this.closePanel();
+            }
             else {
                 var previouslyFocusedIndex = manager.activeItemIndex;
                 manager.onKeydown(event);
@@ -33330,7 +33341,8 @@
         };
         /** Emits change event to set the model value. */
         NovoChipsElement.prototype._propagateChanges = function (fallbackValue) {
-            this.changed.emit({ value: this.value.length ? this.value : '', rawValue: this.items });
+            var _a;
+            this.changed.emit({ value: ((_a = this.value) === null || _a === void 0 ? void 0 : _a.length) ? this.value : '', rawValue: this.items });
             this.onModelChange(this.value);
         };
         /**
@@ -34977,7 +34989,6 @@
             this.checkSortFilterState({ filter: this.state.filter, sort: this.state.sort }, true);
             this.multiSelect = this.config.filterConfig && this.config.filterConfig.type ? this.config.filterConfig.type === 'multi-select' : false;
             if (this.multiSelect) {
-                console.log('is multiselect');
                 this.multiSelectedOptions = this.filter ? __spread(this.filter) : [];
             }
         };
@@ -35128,6 +35139,12 @@
                 }
             }
         };
+        NovoDataTableCellHeader.prototype.handleEscapeKeydown = function (event) {
+            if (!this.multiSelect) {
+                this.error = false;
+                this.dropdown.closePanel();
+            }
+        };
         NovoDataTableCellHeader.prototype.clearOptionFilter = function () {
             this.error = false;
             if (this.optionFilter.length > 0) {
@@ -35175,7 +35192,6 @@
                 setTimeout(function () { return _this.filterInput.nativeElement.focus(); }, 0);
             }
             if (this.multiSelect && this.dropdown) {
-                console.log('focussing');
                 this.dropdown._handleKeydown = function (event) {
                     _this.multiSelectOptionFilterHandleKeydown(event);
                 };
@@ -35247,7 +35263,7 @@
     NovoDataTableCellHeader.decorators = [
         { type: i0.Component, args: [{
                     selector: '[novo-data-table-cell-config]',
-                    template: "\n    <i class=\"bhi-{{ labelIcon }} label-icon\" *ngIf=\"labelIcon\" data-automation-id=\"novo-data-table-header-icon\"></i>\n    <label data-automation-id=\"novo-data-table-label\">{{ label }}</label>\n    <div>\n      <novo-sort-button\n        *ngIf=\"config.sortable\"\n        data-automation-id=\"novo-data-table-sort\"\n        tooltipPosition=\"left\"\n        [tooltip]=\"labels.sort\"\n        [attr.data-feature-id]=\"'novo-data-table-sort-' + this.id\"\n        (sortChange)=\"sort()\"\n        [value]=\"sortValue\"\n      ></novo-sort-button>\n      <novo-dropdown\n        *ngIf=\"config.filterable\"\n        side=\"right\"\n        parentScrollSelector=\".novo-data-table-container\"\n        containerClass=\"data-table-dropdown\"\n        data-automation-id=\"novo-data-table-filter\"\n        [multiple]=\"multiSelect\"\n      >\n        <novo-icon\n          dropdownTrigger\n          class=\"filter-button\"\n          [class.filter-active]=\"filterActive\"\n          [tooltip]=\"labels.filters\"\n          [tooltipPosition]=\"'left'\"\n          [attr.data-feature-id]=\"'novo-data-table-filter-' + this.id\"\n          (click)=\"focusInput()\"\n          >filter</novo-icon\n        >\n        <div class=\"header\">\n          <novo-label>{{ labels.filters }}</novo-label>\n          <novo-button\n            theme=\"dialogue\"\n            color=\"negative\"\n            size=\"small\"\n            icon=\"times\"\n            (click)=\"clearFilter()\"\n            *ngIf=\"filter !== null && filter !== undefined && filter !== ''\"\n            data-automation-id=\"novo-data-table-filter-clear\"\n          >\n            {{ labels.clear }}\n          </novo-button>\n        </div>\n        <ng-container [ngSwitch]=\"config.filterConfig.type\">\n          <novo-optgroup *ngSwitchCase=\"'date'\">\n            <ng-container *ngIf=\"!showCustomRange\">\n              <novo-option\n                [class.active]=\"activeDateFilter === option.label\"\n                *ngFor=\"let option of config.filterConfig.options\"\n                (click)=\"filterData(option)\"\n                [attr.data-automation-id]=\"'novo-data-table-filter-' + option.label\"\n              >\n                <span>{{ option.label }}</span>\n                <novo-icon novoSuffix color=\"positive\" *ngIf=\"activeDateFilter === option.label\">check</novo-icon>\n              </novo-option>\n            </ng-container>\n            <novo-option\n              [class.active]=\"labels.customDateRange === activeDateFilter\"\n              (click)=\"toggleCustomRange($event, true)\"\n              *ngIf=\"config.filterConfig.allowCustomRange && !showCustomRange\"\n            >\n              <span>{{ labels.customDateRange }}</span>\n              <novo-icon novoSuffix color=\"positive\" *ngIf=\"labels.customDateRange === activeDateFilter\">check</novo-icon>\n            </novo-option>\n            <novo-option class=\"calendar-container\" *ngIf=\"showCustomRange\" keepOpen>\n              <novo-stack>\n                <div class=\"back-link\" (click)=\"toggleCustomRange($event, false)\">\n                  <i class=\"bhi-previous\"></i>{{ labels.backToPresetFilters }}\n                </div>\n                <novo-date-picker (onSelect)=\"filterData($event)\" [(ngModel)]=\"filter\" range=\"true\"></novo-date-picker>\n              </novo-stack>\n            </novo-option>\n          </novo-optgroup>\n          <novo-optgroup *ngSwitchCase=\"'select'\">\n            <novo-option\n              [class.active]=\"filter === option\"\n              *ngFor=\"let option of config.filterConfig.options\"\n              (click)=\"filterData(option)\"\n              [attr.data-automation-id]=\"'novo-data-table-filter-' + (option?.label || option)\"\n            >\n              <span>{{ option?.label || option }}</span>\n              <novo-icon novoSuffix color=\"positive\" *ngIf=\"option.hasOwnProperty('value') ? filter === option.value : filter === option\"\n                >check</novo-icon\n              >\n            </novo-option>\n          </novo-optgroup>\n          <ng-container *ngSwitchCase=\"'multi-select'\">\n            <novo-optgroup class=\"dropdown-list-filter\" (keydown)=\"multiSelectOptionFilterHandleKeydown($event)\">\n              <novo-option class=\"filter-search\" inert>\n                <novo-field flex>\n                  <input\n                    novoInput\n                    [(ngModel)]=\"optionFilter\"\n                    (ngModelChange)=\"multiSelectOptionFilter($event)\"\n                    #optionFilterInput\n                    data-automation-id=\"novo-data-table-multi-select-option-filter-input\"\n                  />\n                  <novo-icon novoSuffix>search</novo-icon>\n                  <novo-error class=\"error-text\" [hidden]=\"!error || !multiSelectHasVisibleOptions()\">{{\n                    labels.selectFilterOptions\n                  }}</novo-error>\n                </novo-field>\n              </novo-option>\n            </novo-optgroup>\n            <novo-optgroup class=\"dropdown-list-options\">\n              <novo-option\n                *ngFor=\"let option of config.filterConfig.options\"\n                [hidden]=\"multiSelectOptionIsHidden(option)\"\n                (click)=\"toggleSelection(option)\"\n                [attr.data-automation-id]=\"'novo-data-table-filter-' + (option?.label || option)\"\n              >\n                <span>{{ option?.label || option }}</span>\n                <novo-icon novoSuffix color=\"positive\">{{\n                  isSelected(option, multiSelectedOptions) ? 'checkbox-filled' : 'checkbox-empty'\n                }}</novo-icon>\n              </novo-option>\n            </novo-optgroup>\n            <novo-option class=\"filter-null-results\" [hidden]=\"multiSelectHasVisibleOptions()\">{{ labels.pickerEmpty }}</novo-option>\n          </ng-container>\n          <novo-optgroup *ngSwitchCase=\"'custom'\">\n            <novo-option class=\"filter-search\" inert>\n              <ng-container *ngTemplateOutlet=\"filterTemplate; context: { $implicit: config }\"></ng-container>\n            </novo-option>\n          </novo-optgroup>\n          <novo-optgroup *ngSwitchDefault>\n            <novo-option class=\"filter-search\" inert>\n              <novo-field flex fullWidth>\n                <input\n                  novoInput\n                  [type]=\"config.filterConfig.type\"\n                  [(ngModel)]=\"filter\"\n                  (ngModelChange)=\"filterData($event)\"\n                  #filterInput\n                  data-automation-id=\"novo-data-table-filter-input\"\n                />\n                <novo-icon novoSuffix>search</novo-icon>\n              </novo-field>\n            </novo-option>\n          </novo-optgroup>\n        </ng-container>\n        <div class=\"footer\" *ngIf=\"multiSelect\">\n          <novo-button theme=\"dialogue\" color=\"dark\" (click)=\"cancel()\" data-automation-id=\"novo-data-table-multi-select-cancel\">\n            {{ labels.cancel }}\n          </novo-button>\n          <novo-button\n            theme=\"dialogue\"\n            color=\"positive\"\n            (click)=\"filterMultiSelect()\"\n            data-automation-id=\"novo-data-table-multi-select-filter\"\n          >\n            {{ labels.filters }}\n          </novo-button>\n        </div>\n      </novo-dropdown>\n    </div>\n    <div class=\"spacer\"></div>\n    <div class=\"data-table-header-resizable\" *ngIf=\"config.resizable\"><span (mousedown)=\"startResize($event)\">&nbsp;</span></div>\n  ",
+                    template: "\n    <i class=\"bhi-{{ labelIcon }} label-icon\" *ngIf=\"labelIcon\" data-automation-id=\"novo-data-table-header-icon\"></i>\n    <label data-automation-id=\"novo-data-table-label\">{{ label }}</label>\n    <div>\n      <novo-sort-button\n        *ngIf=\"config.sortable\"\n        data-automation-id=\"novo-data-table-sort\"\n        tooltipPosition=\"left\"\n        [tooltip]=\"labels.sort\"\n        [attr.data-feature-id]=\"'novo-data-table-sort-' + this.id\"\n        (sortChange)=\"sort()\"\n        [value]=\"sortValue\"\n      ></novo-sort-button>\n      <novo-dropdown\n        *ngIf=\"config.filterable\"\n        side=\"right\"\n        parentScrollSelector=\".novo-data-table-container\"\n        containerClass=\"data-table-dropdown\"\n        data-automation-id=\"novo-data-table-filter\"\n        [multiple]=\"multiSelect\"\n      >\n        <novo-icon\n          dropdownTrigger\n          class=\"filter-button\"\n          [class.filter-active]=\"filterActive\"\n          [tooltip]=\"labels.filters\"\n          [tooltipPosition]=\"'left'\"\n          [attr.data-feature-id]=\"'novo-data-table-filter-' + this.id\"\n          (click)=\"focusInput()\"\n          >filter</novo-icon\n        >\n        <div class=\"header\">\n          <novo-label>{{ labels.filters }}</novo-label>\n          <novo-button\n            theme=\"dialogue\"\n            color=\"negative\"\n            size=\"small\"\n            icon=\"times\"\n            (click)=\"clearFilter()\"\n            *ngIf=\"filter !== null && filter !== undefined && filter !== ''\"\n            data-automation-id=\"novo-data-table-filter-clear\"\n          >\n            {{ labels.clear }}\n          </novo-button>\n        </div>\n        <ng-container [ngSwitch]=\"config.filterConfig.type\">\n          <novo-optgroup *ngSwitchCase=\"'date'\" (keydown.escape)=\"handleEscapeKeydown($event)\">\n            <ng-container *ngIf=\"!showCustomRange\">\n              <novo-option\n                [class.active]=\"activeDateFilter === option.label\"\n                *ngFor=\"let option of config.filterConfig.options\"\n                (click)=\"filterData(option)\"\n                [attr.data-automation-id]=\"'novo-data-table-filter-' + option.label\"\n              >\n                <span>{{ option.label }}</span>\n                <novo-icon novoSuffix color=\"positive\" *ngIf=\"activeDateFilter === option.label\">check</novo-icon>\n              </novo-option>\n            </ng-container>\n            <novo-option\n              [class.active]=\"labels.customDateRange === activeDateFilter\"\n              (click)=\"toggleCustomRange($event, true)\"\n              *ngIf=\"config.filterConfig.allowCustomRange && !showCustomRange\"\n            >\n              <span>{{ labels.customDateRange }}</span>\n              <novo-icon novoSuffix color=\"positive\" *ngIf=\"labels.customDateRange === activeDateFilter\">check</novo-icon>\n            </novo-option>\n            <novo-option class=\"calendar-container\" *ngIf=\"showCustomRange\" keepOpen>\n              <novo-stack>\n                <div class=\"back-link\" (click)=\"toggleCustomRange($event, false)\">\n                  <i class=\"bhi-previous\"></i>{{ labels.backToPresetFilters }}\n                </div>\n                <novo-date-picker\n                  (onSelect)=\"filterData($event)\"\n                  [(ngModel)]=\"filter\"\n                  range=\"true\"\n                  (keydown.escape)=\"handleEscapeKeydown($event)\"\n                ></novo-date-picker>\n              </novo-stack>\n            </novo-option>\n          </novo-optgroup>\n          <novo-optgroup *ngSwitchCase=\"'select'\">\n            <novo-option\n              [class.active]=\"filter === option\"\n              *ngFor=\"let option of config.filterConfig.options\"\n              (click)=\"filterData(option)\"\n              [attr.data-automation-id]=\"'novo-data-table-filter-' + (option?.label || option)\"\n            >\n              <span>{{ option?.label || option }}</span>\n              <novo-icon novoSuffix color=\"positive\" *ngIf=\"option.hasOwnProperty('value') ? filter === option.value : filter === option\"\n                >check</novo-icon\n              >\n            </novo-option>\n          </novo-optgroup>\n          <ng-container *ngSwitchCase=\"'multi-select'\">\n            <novo-optgroup class=\"dropdown-list-filter\" (keydown)=\"multiSelectOptionFilterHandleKeydown($event)\">\n              <novo-option class=\"filter-search\" inert>\n                <novo-field flex>\n                  <input\n                    novoInput\n                    [(ngModel)]=\"optionFilter\"\n                    (ngModelChange)=\"multiSelectOptionFilter($event)\"\n                    #optionFilterInput\n                    data-automation-id=\"novo-data-table-multi-select-option-filter-input\"\n                  />\n                  <novo-icon novoSuffix>search</novo-icon>\n                  <novo-error class=\"error-text\" [hidden]=\"!error || !multiSelectHasVisibleOptions()\">{{\n                    labels.selectFilterOptions\n                  }}</novo-error>\n                </novo-field>\n              </novo-option>\n            </novo-optgroup>\n            <novo-optgroup class=\"dropdown-list-options\" (keydown.escape)=\"handleEscapeKeydown($event)\">\n              <novo-option\n                *ngFor=\"let option of config.filterConfig.options\"\n                [hidden]=\"multiSelectOptionIsHidden(option)\"\n                (click)=\"toggleSelection(option)\"\n                [attr.data-automation-id]=\"'novo-data-table-filter-' + (option?.label || option)\"\n              >\n                <span>{{ option?.label || option }}</span>\n                <novo-icon novoSuffix color=\"positive\">{{\n                  isSelected(option, multiSelectedOptions) ? 'checkbox-filled' : 'checkbox-empty'\n                }}</novo-icon>\n              </novo-option>\n            </novo-optgroup>\n            <novo-option class=\"filter-null-results\" [hidden]=\"multiSelectHasVisibleOptions()\">{{ labels.pickerEmpty }}</novo-option>\n          </ng-container>\n          <novo-optgroup *ngSwitchCase=\"'custom'\">\n            <novo-option class=\"filter-search\" inert>\n              <ng-container *ngTemplateOutlet=\"filterTemplate; context: { $implicit: config }\"></ng-container>\n            </novo-option>\n          </novo-optgroup>\n          <novo-optgroup *ngSwitchDefault (keydown.escape)=\"handleEscapeKeydown($event)\">\n            <novo-option class=\"filter-search\" inert>\n              <novo-field flex fullWidth>\n                <input\n                  novoInput\n                  [type]=\"config.filterConfig.type\"\n                  [(ngModel)]=\"filter\"\n                  (ngModelChange)=\"filterData($event)\"\n                  #filterInput\n                  data-automation-id=\"novo-data-table-filter-input\"\n                  (keydown.escape)=\"handleEscapeKeydown($event)\"\n                />\n                <novo-icon novoSuffix>search</novo-icon>\n              </novo-field>\n            </novo-option>\n          </novo-optgroup>\n        </ng-container>\n        <div class=\"footer\" *ngIf=\"multiSelect\">\n          <novo-button theme=\"dialogue\" color=\"dark\" (click)=\"cancel()\" data-automation-id=\"novo-data-table-multi-select-cancel\">\n            {{ labels.cancel }}\n          </novo-button>\n          <novo-button\n            theme=\"dialogue\"\n            color=\"positive\"\n            (click)=\"filterMultiSelect()\"\n            data-automation-id=\"novo-data-table-multi-select-filter\"\n          >\n            {{ labels.filters }}\n          </novo-button>\n        </div>\n      </novo-dropdown>\n    </div>\n    <div class=\"spacer\"></div>\n    <div class=\"data-table-header-resizable\" *ngIf=\"config.resizable\"><span (mousedown)=\"startResize($event)\">&nbsp;</span></div>\n  ",
                     changeDetection: i0.ChangeDetectionStrategy.OnPush
                 },] }
     ];
@@ -35270,7 +35286,8 @@
         filterTemplate: [{ type: i0.Input }],
         resizable: [{ type: i0.HostBinding, args: ['class.resizable',] }],
         column: [{ type: i0.Input, args: ['novo-data-table-cell-config',] }],
-        multiSelectOptionFilterHandleKeydown: [{ type: i0.HostListener, args: ['keydown', ['$event'],] }]
+        multiSelectOptionFilterHandleKeydown: [{ type: i0.HostListener, args: ['keydown', ['$event'],] }],
+        handleEscapeKeydown: [{ type: i0.HostListener, args: ['keydown.escape', ['$event'],] }]
     };
 
     var DataTableSource = /** @class */ (function (_super) {
@@ -36978,7 +36995,7 @@
             this.blurEvent = new i0.EventEmitter();
             this.focusEvent = new i0.EventEmitter();
             this.changeEvent = new i0.EventEmitter();
-            this.placeholder = this.labels.dateFormatString().toUpperCase() || this.labels.dateFormatPlaceholder;
+            this.placeholder = this.labels.localizedDatePlaceholder();
         }
         NovoDatePickerInputElement.prototype.ngOnInit = function () {
             this.userDefinedFormat = this.format ? !this.format.match(/^(DD\/MM\/YYYY|MM\/DD\/YYYY)$/g) : false;
@@ -38155,7 +38172,7 @@
             /** Function that maps an option's control value to its display value in the trigger. */
             _this.displayWith = null;
             /** * Function to compare the option values with the selected values. */
-            _this.compareWith = function (o1, o2) { return o1 === o2; };
+            _this.compareWith = function (o1, o2) { return o1 === o2 || o1 === o2.id || (!Helpers.isEmpty(o1.id) && !Helpers.isEmpty(o2.id) && o1.id === o2.id); };
             _this.header = {
                 open: false,
                 valid: true,
@@ -38278,8 +38295,16 @@
             this._initializeSelection();
             // Listen to selection changes to select and deselect options
             this._selectionModel.changed.pipe(operators.takeUntil(this._destroy)).subscribe(function (event) {
-                event.added.forEach(function (option) { return option.select(); });
-                event.removed.forEach(function (option) { return option.deselect(); });
+                event.added.forEach(function (option) {
+                    if (option.select) {
+                        option.select();
+                    }
+                });
+                event.removed.forEach(function (option) {
+                    if (option.deselect) {
+                        option.deselect();
+                    }
+                });
             });
             // Listen to QueryList changes
             rxjs.merge(this.contentOptions.changes, this.viewOptions.changes)
@@ -38321,7 +38346,11 @@
          */
         NovoSelectElement.prototype._setSelectionByValue = function (value) {
             var _this = this;
-            this._selectionModel.selected.forEach(function (option) { return option.setInactiveStyles(); });
+            this._selectionModel.selected.forEach(function (option) {
+                if (option.setInactiveStyles) {
+                    option.setInactiveStyles();
+                }
+            });
             this._selectionModel.clear();
             if (this.multiple && value) {
                 value.forEach(function (currentValue) { return _this._selectValue(currentValue); });
@@ -38355,11 +38384,25 @@
                 if (_this._selectionModel.isSelected(option)) {
                     return false;
                 }
-                return option.value != null && _this.compareWith(option.value, value);
+                return !Helpers.isEmpty(value) && !Helpers.isEmpty(option.value) && _this.compareWith(option.value, value);
             });
             if (correspondingOption) {
                 this._selectionModel.select(correspondingOption);
             }
+            else if (value && !correspondingOption) {
+                // Double Check option not already added.
+                var legacyOption = this.filteredOptions.find(function (it) { return it.value === value; });
+                if (!legacyOption) {
+                    // Add a disabled option to the list and select it
+                    this.filteredOptions.push({
+                        disabled: true,
+                        tooltip: 'Value is not provided in list of valid options.',
+                        label: (value === null || value === void 0 ? void 0 : value.label) || value,
+                        value: value,
+                    });
+                    this.ref.detectChanges();
+                }
+            }
             return correspondingOption;
         };
         NovoSelectElement.prototype.select = function (option, i, fireEvents) {
@@ -38405,9 +38448,13 @@
             this._watchSelectionEvents();
         };
         NovoSelectElement.prototype._getDisplayValue = function (option) {
-            if (!option)
+            if (!option) {
                 return '';
-            var toDisplay = this.displayWith ? this.displayWith(option.value) : option.viewValue;
+            }
+            var toDisplay = option.viewValue;
+            if (this.displayWith) {
+                toDisplay = this.displayWith(option.value);
+            }
             // Simply falling back to an empty string if the display value is falsy does not work properly.
             // The display value can also be the number zero and shouldn't fall back to an empty string.
             var displayValue = toDisplay != null ? toDisplay : '';
@@ -38487,6 +38534,9 @@
                     }
                 });
             }
+            else if ("Escape" /* Escape */ === key) {
+                this.closePanel();
+            }
             else {
                 var previouslyFocusedIndex = manager.activeItemIndex;
                 manager.onKeydown(event);
@@ -38618,11 +38668,11 @@
             }
             else {
                 this.filteredOptions = (this.options || [])
-                    .filter(function (item) {
-                    return !item.readOnly;
+                    .map(function (item) {
+                    return Object.assign(Object.assign({}, item), { disabled: item.readOnly || item.disabled });
                 })
-                    .map(function (element) {
-                    return Object.assign(Object.assign({}, element), { active: false });
+                    .map(function (item) {
+                    return Object.assign(Object.assign({}, item), { active: false });
                 });
             }
         };
@@ -38677,7 +38727,7 @@
                         { provide: NovoFieldControl, useExisting: NovoSelectElement },
                         { provide: NOVO_OPTION_PARENT_COMPONENT, useExisting: NovoSelectElement },
                     ],
-                    template: "\n    <div class=\"novo-select-trigger\" #dropdownElement (click)=\"togglePanel(); (false)\" tabIndex=\"{{ disabled ? -1 : 0 }}\" type=\"button\">\n      <span class=\"novo-select-placeholder\" *ngIf=\"empty\">{{ placeholder }}</span>\n      <span class=\"novo-select-display-value\" *ngIf=\"!empty\">{{ displayValue }}</span>\n      <i class=\"bhi-collapse\"></i>\n    </div>\n    <novo-overlay-template\n      [parent]=\"elementRef\"\n      [position]=\"position\"\n      [width]=\"overlayWidth\"\n      [height]=\"overlayHeight\"\n      (closing)=\"dropdown.nativeElement.focus()\"\n    >\n      <div #panel class=\"novo-select-list\" tabIndex=\"-1\" [class.has-header]=\"headerConfig\" [class.active]=\"panelOpen\">\n        <novo-option *ngIf=\"headerConfig\" class=\"select-header\" [class.open]=\"header.open\">\n          <novo-button *ngIf=\"!header.open\" icon=\"add-thin\" (click)=\"toggleHeader($event); (false)\" tabIndex=\"-1\" class=\"header\">\n            {{ headerConfig.label }}\n          </novo-button>\n          <div *ngIf=\"header.open\" [ngClass]=\"{ active: header.open }\">\n            <input\n              autofocus\n              type=\"text\"\n              [placeholder]=\"headerConfig.placeholder\"\n              [attr.id]=\"name\"\n              autocomplete=\"off\"\n              [value]=\"header.value\"\n              [ngClass]=\"{ invalid: !header.valid }\"\n            />\n            <footer>\n              <novo-button (click)=\"toggleHeader($event, false)\">{{ labels.cancel }}</novo-button>\n              <novo-button (click)=\"saveHeader()\" class=\"primary\">{{ labels.save }}</novo-button>\n            </footer>\n          </div>\n        </novo-option>\n        <!-- Declarative Content Goes Here -->\n        <ng-content></ng-content>\n        <!-- Data Driven Content Goes Here -->\n        <ng-container *ngFor=\"let option of filteredOptions; let i = index\">\n          <novo-option\n            *ngIf=\"!option.divider; else divider\"\n            class=\"select-item\"\n            [class.active]=\"option.active\"\n            [class.disabled]=\"option.disabled\"\n            [attr.data-automation-value]=\"option.label\"\n            [value]=\"option.value\"\n            [tooltip]=\"option.tooltip\"\n            [tooltipPosition]=\"option.tooltipPosition || 'right'\"\n          >\n            <span [innerHtml]=\"highlight(option.label, filterTerm)\"></span> <i *ngIf=\"option.active\" class=\"bhi-check\"></i>\n          </novo-option>\n          <ng-template #divider>\n            <novo-divider class=\"select-item-divider\" [class.with-label]=\"option.label\" [class.without-label]=\"!option.label\">\n              {{ option?.label }}\n            </novo-divider>\n          </ng-template>\n        </ng-container>\n      </div>\n    </novo-overlay-template>\n  "
+                    template: "\n    <div class=\"novo-select-trigger\" #dropdownElement (click)=\"togglePanel(); (false)\" tabIndex=\"{{ disabled ? -1 : 0 }}\" type=\"button\">\n      <span class=\"novo-select-placeholder\" *ngIf=\"empty\">{{ placeholder }}</span>\n      <span class=\"novo-select-display-value\" *ngIf=\"!empty\">{{ displayValue }}</span>\n      <i class=\"bhi-collapse\"></i>\n    </div>\n    <novo-overlay-template\n      [parent]=\"elementRef\"\n      [position]=\"position\"\n      [width]=\"overlayWidth\"\n      [height]=\"overlayHeight\"\n      (closing)=\"dropdown.nativeElement.focus()\"\n    >\n      <div #panel class=\"novo-select-list\" tabIndex=\"-1\" [class.has-header]=\"headerConfig\" [class.active]=\"panelOpen\">\n        <novo-option *ngIf=\"headerConfig\" class=\"select-header\" [class.open]=\"header.open\">\n          <novo-button *ngIf=\"!header.open\" icon=\"add-thin\" (click)=\"toggleHeader($event); (false)\" tabIndex=\"-1\" class=\"header\">\n            {{ headerConfig.label }}\n          </novo-button>\n          <div *ngIf=\"header.open\" [ngClass]=\"{ active: header.open }\">\n            <input\n              autofocus\n              type=\"text\"\n              [placeholder]=\"headerConfig.placeholder\"\n              [attr.id]=\"name\"\n              autocomplete=\"off\"\n              [value]=\"header.value\"\n              [ngClass]=\"{ invalid: !header.valid }\"\n            />\n            <footer>\n              <novo-button (click)=\"toggleHeader($event, false)\">{{ labels.cancel }}</novo-button>\n              <novo-button (click)=\"saveHeader()\" class=\"primary\">{{ labels.save }}</novo-button>\n            </footer>\n          </div>\n        </novo-option>\n        <!-- Declarative Content Goes Here -->\n        <ng-content></ng-content>\n        <!-- Data Driven Content Goes Here -->\n        <ng-container *ngFor=\"let option of filteredOptions; let i = index\">\n          <novo-option\n            *ngIf=\"!option.divider; else divider\"\n            class=\"select-item\"\n            [disabled]=\"option.disabled\"\n            [class.active]=\"option.active\"\n            [attr.data-automation-value]=\"option.label\"\n            [value]=\"option.value\"\n            [tooltip]=\"option.tooltip\"\n            [tooltipPosition]=\"option.tooltipPosition || 'right'\"\n          >\n            <span [innerHtml]=\"highlight(option.label, filterTerm)\"></span> <i *ngIf=\"option.active\" class=\"bhi-check\"></i>\n          </novo-option>\n          <ng-template #divider>\n            <novo-divider class=\"select-item-divider\" [class.with-label]=\"option.label\" [class.without-label]=\"!option.label\">\n              {{ option?.label }}\n            </novo-divider>\n          </ng-template>\n        </ng-container>\n      </div>\n    </novo-overlay-template>\n  "
                 },] }
     ];
     NovoSelectElement.ctorParameters = function () { return [
@@ -41335,6 +41385,9 @@
         NovoTimePickerInputElement.prototype.dispatchOnChange = function (newValue, skip) {
             if (skip === void 0) { skip = false; }
             if (newValue !== this.value) {
+                if (this.value instanceof Date && newValue instanceof Date && this.value.getTime() === newValue.getTime()) {
+                    return;
+                }
                 this._onChange(newValue);
                 !skip && this.writeValue(newValue);
             }
@@ -43574,6 +43627,10 @@
             this._remove = false;
             this._edit = false;
             this._collapsible = false;
+            // Edit icon at the end of each row (no bhi- prefix)
+            this.editIcon = 'edit';
+            // Remove icon at the end of each row (no bhi- prefix)
+            this.removeIcon = 'delete-o';
             this.onRemove = new i0.EventEmitter();
             this.onEdit = new i0.EventEmitter();
             this.onAdd = new i0.EventEmitter();
@@ -43855,7 +43912,7 @@
     NovoControlGroup.decorators = [
         { type: i0.Component, args: [{
                     selector: 'novo-control-group',
-                    template: "<h6 class=\"novo-section-header\" *ngIf=\"label\">\n  <span (click)=\"toggle($event)\" [class.clickable]=\"collapsible\">\n    <i *ngIf=\"icon && !collapsible\" [ngClass]=\"icon\" [attr.data-automation-id]=\"'novo-control-group-icon-' + key\"></i>\n    <i *ngIf=\"collapsible\" class=\"bhi-next\" [class.toggled]=\"toggled\"\n      [attr.data-automation-id]=\"'novo-control-group-collapse-' + key\"></i>\n    <span [attr.data-automation-id]=\"'novo-control-group-label-' + key\">{{ label }}</span>\n  </span>\n  <label class=\"novo-control-group-description\" *ngIf=\"description\"\n    [attr.data-automation-id]=\"'novo-control-group-description-' + key\">{{ description }}</label>\n</h6>\n<div class=\"novo-control-group-controls\" [class.vertical]=\"vertical\" [class.horizontal]=\"!vertical\"\n  [class.hidden]=\"collapsible && !toggled\">\n\n  <ng-template #defaultTemplate let-index=\"index\" let-form=\"form\" let-key=\"key\">\n    <div class=\"novo-control-group-control\">\n      <div *ngFor=\"let c of controls\" class=\"novo-control-container {{c.key}}\"\n        [class.is-label]=\"c.controlType === 'read-only'\" [style.max-width.px]=\"c.width\">\n        <novo-control (change)=\"onChange()\" [form]=\"(form?.controls)[key]['controls'][index]\" [control]=\"c\"\n          [condensed]=\"!vertical || c.controlType === 'read-only'\"></novo-control>\n      </div>\n      <div class=\"novo-control-container last\" *ngIf=\"edit && !vertical\">\n        <novo-button class=\"control-group-action\" [disabled]=\"!disabledArray[index].edit\" type=\"button\"\n          *ngIf=\"edit && !vertical\" theme=\"icon\" icon=\"edit\"\n          (click)=\"editControl(index)\" [attr.data-automation-id]=\"'novo-control-group-edit-' + key\" index=\"-1\">\n        </novo-button>\n      </div>\n      <div class=\"novo-control-container last\" *ngIf=\"remove && !vertical\">\n        <novo-button class=\"control-group-action\" [disabled]=\"!disabledArray[index].remove\" type=\"button\"\n          *ngIf=\"remove && !vertical\" theme=\"icon\"\n          icon=\"delete-o\" (click)=\"removeControl(index)\"\n          [attr.data-automation-id]=\"'novo-control-group-delete-' + key\"\n          index=\"-1\">\n        </novo-button>\n      </div>\n    </div>\n    <novo-button class=\"control-group-action\" [disabled]=\"!disabledArray[index].edit\" type=\"button\"\n      *ngIf=\"edit && vertical\"\n      theme=\"icon\" icon=\"edit\"\n      (click)=\"editControl(index)\" [attr.data-automation-id]=\"'novo-control-group-edit-' + key\" index=\"-1\">\n    </novo-button>\n    <novo-button class=\"control-group-action\" [disabled]=\"!disabledArray[index].remove\" type=\"button\"\n      *ngIf=\"remove && vertical\" theme=\"icon\"\n      icon=\"delete-o\" (click)=\"removeControl(index)\"\n      [attr.data-automation-id]=\"'novo-control-group-delete-' + key\"\n      index=\"-1\">\n    </novo-button>\n  </ng-template>\n\n  <ng-template #defaultColumnLabelTemplate let-form=\"form\" let-key=\"key\">\n    <div *ngFor=\"let label of controlLabels\"\n      class=\"novo-control-group-control-label {{ label.key }}\"\n      [class.novo-control-group-control-hidden]=\"label.hidden\"\n      [style.max-width.px]=\"label.width\" [class.column-required]=\"label.required\">\n      <span [attr.data-automation-id]=\"'novo-control-group-label-' + label.value\">{{ label.value }}</span>\n    </div>\n    <div class=\"novo-control-group-control-label last\" *ngIf=\"edit\"\n      [attr.data-automation-id]=\"'novo-control-group-edit-' + key\"></div>\n    <div class=\"novo-control-group-control-label last\" *ngIf=\"remove\"\n      [attr.data-automation-id]=\"'novo-control-group-delete-' + key\"></div>\n  </ng-template>\n\n  <ng-container *ngIf=\"!vertical && (form?.controls)[key] && (form?.controls)[key]['controls'].length !== 0\">\n    <div class=\"novo-control-group-labels\"\n      *ngIf=\"!vertical && (form?.controls)[key] && (form?.controls)[key]['controls'].length !== 0\">\n      <ng-template [ngTemplateOutlet]=\"columnLabelTemplate || defaultColumnLabelTemplate\"\n        [ngTemplateOutletContext]=\"{ form: form, key: key, controlLabels: controlLabels }\">\n      </ng-template>\n    </div>\n  </ng-container>\n\n  <ng-container *ngIf=\"(form?.controls)[key]\">\n    <div class=\"novo-control-group-row\"\n      *ngFor=\"let control of (form?.controls)[key]['controls']; let index = index\">\n      <ng-template [ngTemplateOutlet]=\"rowTemplate || defaultTemplate\"\n        [ngTemplateOutletContext]=\"{ form: form, formGroup: control, index: index, key: key, controls: controls }\">\n      </ng-template>\n    </div>\n  </ng-container>\n\n  <div class=\"novo-control-group-empty\"\n    *ngIf=\"(form?.controls)[key] && (form?.controls)[key]['controls'].length === 0\"\n    [attr.data-automation-id]=\"'novo-control-group-empty-' + key\">\n    {{ emptyMessage }}\n  </div>\n\n  <div *ngIf=\"add\" class=\"novo-control-group-footer\">\n    <novo-button type=\"button\" theme=\"dialogue\" icon=\"add-thin\" side=\"left\" (click)=\"onClickAdd()\"\n      [attr.data-automation-id]=\"'novo-control-group-bottom-add-' + key\" index=\"-1\">\n      {{ add?.label }}\n    </novo-button>\n    <!-- <novo-button *ngIf=\"editState==='editing'\" type=\"button\" theme=\"dialogue\" icon=\"close\" side=\"left\"\n                  (click)=\"onClickCancel()\" [attr.data-automation-id]=\"'novo-control-group-bottom-cancel-' + key\"\n                  index=\"-1\">\n                {{ 'cancel' }}\n                </novo-button>\n                  <novo-button *ngIf=\"editState==='editing'\" type=\"button\" theme=\"dialogue\" icon=\"check\" side=\"left\"\n                  (click)=\"onClickSave()\" [attr.data-automation-id]=\"'novo-control-group-bottom-save-' + key\"\n                  index=\"-1\">\n                {{ add?.label }}\n                </novo-button> -->\n  </div>\n</div>",
+                    template: "<h6 class=\"novo-section-header\" *ngIf=\"label\">\n  <span (click)=\"toggle($event)\" [class.clickable]=\"collapsible\">\n    <i *ngIf=\"icon && !collapsible\" [ngClass]=\"icon\" [attr.data-automation-id]=\"'novo-control-group-icon-' + key\"></i>\n    <i *ngIf=\"collapsible\" class=\"bhi-next\" [class.toggled]=\"toggled\"\n      [attr.data-automation-id]=\"'novo-control-group-collapse-' + key\"></i>\n    <span [attr.data-automation-id]=\"'novo-control-group-label-' + key\">{{ label }}</span>\n  </span>\n  <label class=\"novo-control-group-description\" *ngIf=\"description\"\n    [attr.data-automation-id]=\"'novo-control-group-description-' + key\">{{ description }}</label>\n</h6>\n<div class=\"novo-control-group-controls\" [class.vertical]=\"vertical\" [class.horizontal]=\"!vertical\"\n  [class.hidden]=\"collapsible && !toggled\">\n\n  <ng-template #defaultTemplate let-index=\"index\" let-form=\"form\" let-key=\"key\">\n    <div class=\"novo-control-group-control\">\n      <div *ngFor=\"let c of controls\" class=\"novo-control-container {{c.key}}\"\n        [class.is-label]=\"c.controlType === 'read-only'\" [style.max-width.px]=\"c.width\">\n        <novo-control (change)=\"onChange()\" [form]=\"(form?.controls)[key]['controls'][index]\" [control]=\"c\"\n          [condensed]=\"!vertical || c.controlType === 'read-only'\"></novo-control>\n      </div>\n      <div class=\"novo-control-container edit last\" *ngIf=\"edit && !vertical\">\n        <novo-button class=\"control-group-action\" [disabled]=\"!disabledArray[index].edit\" type=\"button\"\n          *ngIf=\"edit && !vertical\" theme=\"icon\" icon=\"editIcon\"\n          (click)=\"editControl(index)\" [attr.data-automation-id]=\"'novo-control-group-edit-' + key\" index=\"-1\">\n        </novo-button>\n      </div>\n      <div class=\"novo-control-container remove last\" *ngIf=\"remove && !vertical\">\n        <novo-button class=\"control-group-action\" [disabled]=\"!disabledArray[index].remove\" type=\"button\"\n          *ngIf=\"remove && !vertical\" theme=\"icon\"\n          icon=\"removeIcon\" (click)=\"removeControl(index)\"\n          [attr.data-automation-id]=\"'novo-control-group-delete-' + key\"\n          index=\"-1\">\n        </novo-button>\n      </div>\n    </div>\n    <novo-button class=\"control-group-action\" [disabled]=\"!disabledArray[index].edit\" type=\"button\"\n      *ngIf=\"edit && vertical\"\n      theme=\"icon\" icon=\"editIcon\"\n      (click)=\"editControl(index)\" [attr.data-automation-id]=\"'novo-control-group-edit-' + key\" index=\"-1\">\n    </novo-button>\n    <novo-button class=\"control-group-action\" [disabled]=\"!disabledArray[index].remove\" type=\"button\"\n      *ngIf=\"remove && vertical\" theme=\"icon\"\n      icon=\"removeIcon\" (click)=\"removeControl(index)\"\n      [attr.data-automation-id]=\"'novo-control-group-delete-' + key\"\n      index=\"-1\">\n    </novo-button>\n  </ng-template>\n\n  <ng-template #defaultColumnLabelTemplate let-form=\"form\" let-key=\"key\">\n    <div *ngFor=\"let label of controlLabels\"\n      class=\"novo-control-group-control-label {{ label.key }}\"\n      [class.novo-control-group-control-hidden]=\"label.hidden\"\n      [style.max-width.px]=\"label.width\" [class.column-required]=\"label.required\">\n      <span [attr.data-automation-id]=\"'novo-control-group-label-' + label.value\">{{ label.value }}</span>\n    </div>\n    <div class=\"novo-control-group-control-label edit last\" *ngIf=\"edit\"\n      [attr.data-automation-id]=\"'novo-control-group-edit-' + key\"></div>\n    <div class=\"novo-control-group-control-label remove last\" *ngIf=\"remove\"\n      [attr.data-automation-id]=\"'novo-control-group-delete-' + key\"></div>\n  </ng-template>\n\n  <ng-container *ngIf=\"!vertical && (form?.controls)[key] && (form?.controls)[key]['controls'].length !== 0\">\n    <div class=\"novo-control-group-labels\"\n      *ngIf=\"!vertical && (form?.controls)[key] && (form?.controls)[key]['controls'].length !== 0\">\n      <ng-template [ngTemplateOutlet]=\"columnLabelTemplate || defaultColumnLabelTemplate\"\n        [ngTemplateOutletContext]=\"{ form: form, key: key, controlLabels: controlLabels }\">\n      </ng-template>\n    </div>\n  </ng-container>\n\n  <ng-container *ngIf=\"(form?.controls)[key]\">\n    <div class=\"novo-control-group-row\"\n      *ngFor=\"let control of (form?.controls)[key]['controls']; let index = index\">\n      <ng-template [ngTemplateOutlet]=\"rowTemplate || defaultTemplate\"\n        [ngTemplateOutletContext]=\"{ form: form, formGroup: control, index: index, key: key, controls: controls }\">\n      </ng-template>\n    </div>\n  </ng-container>\n\n  <div class=\"novo-control-group-empty\"\n    *ngIf=\"(form?.controls)[key] && (form?.controls)[key]['controls'].length === 0\"\n    [attr.data-automation-id]=\"'novo-control-group-empty-' + key\">\n    {{ emptyMessage }}\n  </div>\n\n  <div *ngIf=\"add\" class=\"novo-control-group-footer\">\n    <novo-button type=\"button\" theme=\"dialogue\" icon=\"add-thin\" side=\"left\" (click)=\"onClickAdd()\"\n      [attr.data-automation-id]=\"'novo-control-group-bottom-add-' + key\" index=\"-1\">\n      {{ add?.label }}\n    </novo-button>\n    <!-- <novo-button *ngIf=\"editState==='editing'\" type=\"button\" theme=\"dialogue\" icon=\"close\" side=\"left\"\n                  (click)=\"onClickCancel()\" [attr.data-automation-id]=\"'novo-control-group-bottom-cancel-' + key\"\n                  index=\"-1\">\n                {{ 'cancel' }}\n                </novo-button>\n                  <novo-button *ngIf=\"editState==='editing'\" type=\"button\" theme=\"dialogue\" icon=\"check\" side=\"left\"\n                  (click)=\"onClickSave()\" [attr.data-automation-id]=\"'novo-control-group-bottom-save-' + key\"\n                  index=\"-1\">\n                {{ add?.label }}\n                </novo-button> -->\n  </div>\n</div>",
                     changeDetection: i0.ChangeDetectionStrategy.OnPush,
                     host: {
                         '[class.novo-control-group-appearance-card]': "appearance=='card'",
@@ -43883,6 +43940,8 @@
         description: [{ type: i0.Input }],
         emptyMessage: [{ type: i0.Input }],
         icon: [{ type: i0.Input }],
+        editIcon: [{ type: i0.Input }],
+        removeIcon: [{ type: i0.Input }],
         initialValue: [{ type: i0.Input }],
         canEdit: [{ type: i0.Input }],
         canRemove: [{ type: i0.Input }],
@@ -45740,6 +45799,9 @@
                 _this._changeDetectorRef.markForCheck();
             });
         };
+        NovoLayoutContent.prototype.getHostElement = function () {
+            return this.elementRef.nativeElement;
+        };
         return NovoLayoutContent;
     }(i1.CdkScrollable));
     NovoLayoutContent.decorators = [
@@ -52098,7 +52160,6 @@
             }
         };
         TableFilter.prototype.onClick = function (event) {
-            console.log('hmmm');
             Helpers.swallowEvent(event);
         };
         return TableFilter;
@@ -52279,7 +52340,6 @@
         }
         ThSortable.prototype.onToggleSort = function (event) {
             if (event) {
-                console.log('sorting');
                 // event.preventDefault();
             }
             if (this.config && this.column && this.config.sorting !== false && this.column.sorting !== false) {
@@ -52318,7 +52378,7 @@
     }());
     NovoTableExtrasModule.decorators = [
         { type: i0.NgModule, args: [{
-                    imports: [common.CommonModule, forms.FormsModule, NovoSelectModule, NovoDropdownModule, NovoButtonModule],
+                    imports: [common.CommonModule, forms.FormsModule, NovoSelectModule, NovoDropdownModule, NovoButtonModule, NovoCommonModule],
                     declarations: [
                         NovoTableHeaderElement,
                         NovoTableFooterElement,
@@ -52528,6 +52588,7 @@
         });
         NovoTableElement.prototype.onDropdownToggled = function (event, column) {
             this.toggledDropdownMap[column] = event;
+            this.cdr.markForCheck();
         };
         NovoTableElement.prototype.focusInput = function () {
             if (this.filterInputs && this.filterInputs.length) {
@@ -52582,7 +52643,6 @@
             return tableFormRows.controls[i];
         };
         NovoTableElement.prototype.onFilterClick = function (column, filter) {
-            console.log('clicking filter', filter);
             if (filter.range && !column.calendarShow) {
                 column.calenderShow = true;
                 return;
@@ -53173,7 +53233,7 @@
                         '[class.novo-table-loading]': 'loading',
                     },
                     // directives: [],
-                    template: "\n    <header *ngIf=\"columns.length\">\n      <ng-content select=\"novo-table-header\"></ng-content>\n      <div class=\"header-actions\">\n        <novo-pagination\n          *ngIf=\"config.paging && !(dataProvider.isEmpty() && !dataProvider.isFiltered())\"\n          [rowOptions]=\"config.paging.rowOptions\"\n          [disablePageSelection]=\"config.paging.disablePageSelection\"\n          [(page)]=\"dataProvider.page\"\n          [(itemsPerPage)]=\"dataProvider.pageSize\"\n          [totalItems]=\"dataProvider.total\"\n          (onPageChange)=\"onPageChange($event)\"\n        >\n        </novo-pagination>\n        <ng-content select=\"novo-table-actions\"></ng-content>\n      </div>\n    </header>\n    <div class=\"novo-table-loading-overlay\" *ngIf=\"loading || dataProvider.isLoading()\">\n      <novo-loading></novo-loading>\n    </div>\n    <novo-toast *ngIf=\"toast\" [theme]=\"toast?.theme\" [icon]=\"toast?.icon\" [message]=\"toast?.message\"></novo-toast>\n    <div class=\"table-container\" *ngIf=\"!grossFlagToAvoidTheTableFromBeingUglyWhenHidingTheToast\">\n      <novo-form hideHeader=\"true\" [form]=\"tableForm\">\n        <table class=\"table table-striped dataTable\" [class.table-details]=\"config.hasDetails\" role=\"grid\">\n          <!-- skipSortAndFilterClear is a hack right now, will be removed once Canvas is refactored -->\n          <thead *ngIf=\"columns.length && (!dataProvider.isEmpty() || dataProvider.isFiltered() || skipSortAndFilterClear || editing)\">\n            <tr role=\"row\">\n              <!-- DETAILS -->\n              <th class=\"row-actions\" *ngIf=\"config.hasDetails\">\n                <novo-button\n                  theme=\"icon\"\n                  icon=\"next\"\n                  (click)=\"expandAllOnPage(config.expandAll)\"\n                  *ngIf=\"!config.expandAll\"\n                  data-automation-id=\"expand-all\"\n                ></novo-button>\n                <novo-button\n                  theme=\"icon\"\n                  icon=\"sort-desc\"\n                  (click)=\"expandAllOnPage(config.expandAll)\"\n                  *ngIf=\"config.expandAll\"\n                  data-automation-id=\"collapse-all\"\n                ></novo-button>\n              </th>\n              <!-- CHECKBOX -->\n              <th class=\"row-actions checkbox mass-action\" *ngIf=\"config.rowSelectionStyle === 'checkbox'\">\n                <novo-checkbox\n                  [(ngModel)]=\"master\"\n                  [indeterminate]=\"pageSelected.length > 0 && pageSelected.length < pagedData.length\"\n                  (ngModelChange)=\"selectPage($event)\"\n                  data-automation-id=\"select-all-checkbox\"\n                  [tooltip]=\"master ? labels.deselectAll : labels.selectAllOnPage\"\n                  tooltipPosition=\"right\"\n                ></novo-checkbox>\n              </th>\n              <!-- TABLE HEADERS -->\n              <th\n                *ngFor=\"let column of columns\"\n                [ngClass]=\"{\n                  'mass-action': config?.rowSelectionStyle === 'checkbox',\n                  actions: column?.actions?.items?.length > 0,\n                  preview: column?.name === 'preview'\n                }\"\n                [novoThOrderable]=\"column\"\n                (onOrderChange)=\"onOrderChange($event)\"\n                [hidden]=\"isColumnHidden(column)\"\n              >\n                <div class=\"th-group\" [attr.data-automation-id]=\"column.id || column.name\" *ngIf=\"!column.hideHeader\">\n                  <!-- LABEL & SORT ARROWS -->\n                  <div\n                    class=\"th-title\"\n                    [ngClass]=\"config.sorting !== false && column.sorting !== false ? 'sortable' : ''\"\n                    [novoThSortable]=\"config\"\n                    [column]=\"column\"\n                    (onSortChange)=\"onSortChange($event)\"\n                  >\n                    <label>{{ column.title || column.label }}</label>\n                    <div\n                      class=\"table-sort-icons\"\n                      tooltipPosition=\"bottom\"\n                      [tooltip]=\"labels.sort\"\n                      [ngClass]=\"column.sort || ''\"\n                      *ngIf=\"config.sorting !== false && column.sorting !== false\"\n                    >\n                      <i class=\"bhi-arrow-up\"></i>\n                      <i class=\"bhi-arrow-down\"></i>\n                    </div>\n                  </div>\n                  <!-- FILTER DROP-DOWN -->\n                  <novo-dropdown\n                    side=\"right\"\n                    *ngIf=\"config.filtering !== false && column.filtering !== false\"\n                    class=\"column-filters\"\n                    (toggled)=\"onDropdownToggled($event, column.name)\"\n                    parentScrollSelector=\".table-container\"\n                    containerClass=\"table-dropdown\"\n                  >\n                    <novo-button\n                      type=\"button\"\n                      theme=\"icon\"\n                      icon=\"filter\"\n                      tooltipPosition=\"bottom\"\n                      [tooltip]=\"labels.filters\"\n                      [class.filtered]=\"column.filter || column.filter === false\"\n                      (click)=\"focusInput()\"\n                    ></novo-button>\n                    <!-- FILTER OPTIONS LIST -->\n                    <novo-optgroup\n                      *ngIf=\"\n                        (column?.options?.length || column?.originalOptions?.length) &&\n                        column?.type !== 'date' &&\n                        toggledDropdownMap[column.name]\n                      \"\n                    >\n                      <novo-option class=\"filter-search\" inert>\n                        <div class=\"header\">\n                          <span>{{ labels.filters }}</span>\n                          <novo-button\n                            theme=\"dialogue\"\n                            color=\"negative\"\n                            icon=\"times\"\n                            (click)=\"onFilterClear(column)\"\n                            *ngIf=\"column.filter || column.filter === false\"\n                          >\n                            {{ labels.clear }}\n                          </novo-button>\n                        </div>\n                        <input\n                          type=\"text\"\n                          *ngIf=\"!!column.allowCustomTextOption\"\n                          [attr.id]=\"column.name + '-input'\"\n                          [novoTableFilter]=\"column\"\n                          (onFilterChange)=\"onFilterKeywords($event)\"\n                          [(ngModel)]=\"column.freetextFilter\"\n                          keepFilterFocused\n                          #filterInput\n                        />\n                      </novo-option>\n                      <novo-option\n                        [ngClass]=\"{ active: isFilterActive(column, option) }\"\n                        *ngFor=\"let option of column.options\"\n                        (click)=\"onFilterClick(column, option)\"\n                        [attr.data-automation-id]=\"getOptionDataAutomationId(option)\"\n                      >\n                        <span>{{ option?.label || option }}</span> <i class=\"bhi-check\" *ngIf=\"isFilterActive(column, option)\"></i>\n                      </novo-option>\n                    </novo-optgroup>\n                    <!-- FILTER SEARCH INPUT -->\n                    <novo-optgroup *ngIf=\"!(column?.options?.length || column?.originalOptions?.length) && toggledDropdownMap[column.name]\">\n                      <novo-option class=\"filter-search\" inert>\n                        <div class=\"header\">\n                          <span>{{ labels.filters }}</span>\n                          <novo-button theme=\"dialogue\" color=\"negative\" icon=\"times\" (click)=\"onFilterClear(column)\" *ngIf=\"column.filter\">\n                            {{ labels.clear }}\n                          </novo-button>\n                        </div>\n                        <input\n                          type=\"text\"\n                          [attr.id]=\"column.name + '-input'\"\n                          [novoTableFilter]=\"column\"\n                          (onFilterChange)=\"onFilterChange($event)\"\n                          [(ngModel)]=\"column.filter\"\n                          keepFilterFocused\n                          #filterInput\n                        />\n                      </novo-option>\n                    </novo-optgroup>\n                    <!-- FILTER DATE OPTIONS -->\n                    <novo-optgroup *ngIf=\"column?.options?.length && column?.type === 'date' && toggledDropdownMap[column.name]\">\n                      <novo-option class=\"filter-search\" *ngIf=\"!column.calenderShow\" inert>\n                        <div class=\"header\">\n                          <span>{{ labels.filters }}</span>\n                          <novo-button theme=\"dialogue\" color=\"negative\" icon=\"times\" (click)=\"onFilterClear(column)\" *ngIf=\"column.filter\">\n                            {{ labels.clear }}\n                          </novo-button>\n                        </div>\n                      </novo-option>\n                      <novo-option\n                        [class.active]=\"isFilterActive(column, option)\"\n                        *ngFor=\"let option of column.options\"\n                        (click)=\"onFilterClick(column, option)\"\n                        [keepOpen]=\"option.range\"\n                        [hidden]=\"column.calenderShow\"\n                        [attr.data-automation-id]=\"option?.label || option\"\n                      >\n                        {{ option?.label || option }}\n                        <novo-icon novoSuffix color=\"positive\" *ngIf=\"isFilterActive(column, option)\">check</novo-icon>\n                      </novo-option>\n                      <novo-option class=\"calendar-container\" *ngIf=\"column.calenderShow\" keepOpen inert>\n                        <novo-stack>\n                          <div class=\"back-link\" (click)=\"column.calenderShow = false\">\n                            <i class=\"bhi-previous\"></i>{{ labels.backToPresetFilters }}\n                          </div>\n                          <novo-date-picker\n                            (onSelect)=\"onCalenderSelect(column, $event)\"\n                            [(ngModel)]=\"column.filter\"\n                            mode=\"range\"\n                          ></novo-date-picker>\n                        </novo-stack>\n                      </novo-option>\n                    </novo-optgroup>\n                  </novo-dropdown>\n                </div>\n              </th>\n            </tr>\n          </thead>\n          <!-- TABLE DATA -->\n          <tbody *ngIf=\"!dataProvider.isEmpty() || editing\">\n            <tr\n              class=\"table-selection-row\"\n              *ngIf=\"config.rowSelectionStyle === 'checkbox' && showSelectAllMessage && config.selectAllEnabled\"\n              data-automation-id=\"table-selection-row\"\n            >\n              <td colspan=\"100%\">\n                {{ labels.selectedRecords(selected.length) }}\n                <a (click)=\"selectAll(true)\" data-automation-id=\"all-matching-records\">{{ labels.totalRecords(dataProvider.total) }}</a>\n              </td>\n            </tr>\n            <ng-template ngFor let-row=\"$implicit\" let-i=\"index\" [ngForOf]=\"rows\">\n              <tr\n                class=\"table-row\"\n                [ngClass]=\"row.customClass || ''\"\n                [id]=\"name + '-' + row[rowIdentifier]\"\n                [attr.data-automation-id]=\"row.id\"\n                (click)=\"rowClickHandler(row)\"\n                [class.active]=\"row.id === activeId\"\n              >\n                <td class=\"row-actions\" *ngIf=\"config.hasDetails\">\n                  <novo-button theme=\"icon\" icon=\"next\" (click)=\"row._expanded = !row._expanded\" *ngIf=\"!row._expanded\"></novo-button>\n                  <novo-button theme=\"icon\" icon=\"sort-desc\" (click)=\"row._expanded = !row._expanded\" *ngIf=\"row._expanded\"></novo-button>\n                </td>\n                <td class=\"row-actions checkbox\" *ngIf=\"config.rowSelectionStyle === 'checkbox'\">\n                  <novo-checkbox\n                    [(ngModel)]=\"row._selected\"\n                    (ngModelChange)=\"rowSelectHandler(row)\"\n                    data-automation-id=\"select-row-checkbox\"\n                  ></novo-checkbox>\n                </td>\n                <td\n                  *ngFor=\"let column of columns\"\n                  [attr.data-automation-id]=\"column.id || column.name\"\n                  [class.novo-form-row]=\"editable\"\n                  [hidden]=\"isColumnHidden(column)\"\n                >\n                  <novo-table-cell\n                    *ngIf=\"row._editing && !row._editing[column.name]\"\n                    [hasEditor]=\"editable\"\n                    [column]=\"column\"\n                    [row]=\"row\"\n                    [form]=\"getRowControlForm(i)\"\n                  ></novo-table-cell>\n                  <novo-control\n                    *ngIf=\"row._editing && row._editing[column.name]\"\n                    condensed=\"true\"\n                    [form]=\"getRowControlForm(i)\"\n                    [control]=\"row.controls[column.name]\"\n                  ></novo-control>\n                </td>\n              </tr>\n              <tr\n                class=\"details-row\"\n                *ngIf=\"config.hasDetails\"\n                [hidden]=\"!row._expanded\"\n                [attr.data-automation-id]=\"'details-row-' + row.id\"\n              >\n                <td class=\"row-actions\"></td>\n                <td [attr.colspan]=\"config.rowSelectionStyle === 'checkbox' ? columns.length + 1 : columns.length\">\n                  <novo-row-details [data]=\"row\" [renderer]=\"config.detailsRenderer\"></novo-row-details>\n                </td>\n              </tr>\n            </ng-template>\n          </tbody>\n          <!-- NO TABLE DATA PLACEHOLDER -->\n          <tbody\n            class=\"table-message\"\n            *ngIf=\"dataProvider.isEmpty() && !dataProvider.isFiltered() && !editing\"\n            data-automation-id=\"empty-table\"\n          >\n            <tr>\n              <td colspan=\"100%\">\n                <div #emptymessage><ng-content select=\"[table-empty-message]\"></ng-content></div>\n                <div class=\"table-empty-message\" *ngIf=\"emptymessage.childNodes.length == 0\">\n                  <h4><i class=\"bhi-search-question\"></i> {{ labels.emptyTableMessage }}</h4>\n                </div>\n              </td>\n            </tr>\n          </tbody>\n          <!-- NO MATCHING RECORDS -->\n          <tbody class=\"table-message\" *ngIf=\"dataProvider.isEmpty() && dataProvider.isFiltered()\" data-automation-id=\"empty-table\">\n            <tr>\n              <td colspan=\"100%\">\n                <div #nomatchmessage><ng-content select=\"[table-no-matching-records-message]\"></ng-content></div>\n                <div class=\"no-matching-records\" *ngIf=\"nomatchmessage.childNodes.length == 0\">\n                  <h4><i class=\"bhi-search-question\"></i> {{ labels.noMatchingRecordsMessage }}</h4>\n                </div>\n              </td>\n            </tr>\n          </tbody>\n          <!-- TABLE DATA ERROR PLACEHOLDER -->\n          <tbody class=\"table-message\" *ngIf=\"dataProvider.hasErrors()\" data-automation-id=\"table-errors\">\n            <tr>\n              <td colspan=\"100%\">\n                <div #errormessage><ng-content select=\"[table-error-message]\"></ng-content></div>\n                <div class=\"table-error-message\" *ngIf=\"errormessage.childNodes.length == 0\">\n                  <h4><i class=\"bhi-caution\"></i> {{ labels.erroredTableMessage }}</h4>\n                </div>\n              </td>\n            </tr>\n          </tbody>\n          <tfoot *ngIf=\"!config.footers\" [ngClass]=\"dataProvider.length % 2 == 0 ? 'odd' : 'even'\">\n            <tr>\n              <td colspan=\"100%\">\n                <ng-content select=\"novo-table-footer\"></ng-content>\n              </td>\n            </tr>\n          </tfoot>\n          <tfoot *ngFor=\"let footer of footers; let i = index\" class=\"novo-table-total-footer\">\n            <tr>\n              <td *ngFor=\"let column of columns\" [attr.data-automation-id]=\"(column.id || column.name) + '-total-' + i\">\n                {{ footer[column.name] }}\n              </td>\n            </tr>\n          </tfoot>\n        </table>\n      </novo-form>\n    </div>\n  "
+                    template: "\n    <header *ngIf=\"columns.length\">\n      <ng-content select=\"novo-table-header\"></ng-content>\n      <div class=\"header-actions\">\n        <novo-pagination\n          *ngIf=\"config.paging && !(dataProvider.isEmpty() && !dataProvider.isFiltered())\"\n          [rowOptions]=\"config.paging.rowOptions\"\n          [disablePageSelection]=\"config.paging.disablePageSelection\"\n          [(page)]=\"dataProvider.page\"\n          [(itemsPerPage)]=\"dataProvider.pageSize\"\n          [totalItems]=\"dataProvider.total\"\n          (onPageChange)=\"onPageChange($event)\"\n        >\n        </novo-pagination>\n        <ng-content select=\"novo-table-actions\"></ng-content>\n      </div>\n    </header>\n    <div class=\"novo-table-loading-overlay\" *ngIf=\"loading || dataProvider.isLoading()\">\n      <novo-loading></novo-loading>\n    </div>\n    <novo-toast *ngIf=\"toast\" [theme]=\"toast?.theme\" [icon]=\"toast?.icon\" [message]=\"toast?.message\"></novo-toast>\n    <div class=\"table-container\" *ngIf=\"!grossFlagToAvoidTheTableFromBeingUglyWhenHidingTheToast\">\n      <novo-form hideHeader=\"true\" [form]=\"tableForm\">\n        <table class=\"table table-striped dataTable\" [class.table-details]=\"config.hasDetails\" role=\"grid\">\n          <!-- skipSortAndFilterClear is a hack right now, will be removed once Canvas is refactored -->\n          <thead *ngIf=\"columns.length && (!dataProvider.isEmpty() || dataProvider.isFiltered() || skipSortAndFilterClear || editing)\">\n            <tr role=\"row\">\n              <!-- DETAILS -->\n              <th class=\"row-actions\" *ngIf=\"config.hasDetails\">\n                <novo-button\n                  theme=\"icon\"\n                  icon=\"next\"\n                  (click)=\"expandAllOnPage(config.expandAll)\"\n                  *ngIf=\"!config.expandAll\"\n                  data-automation-id=\"expand-all\"\n                ></novo-button>\n                <novo-button\n                  theme=\"icon\"\n                  icon=\"sort-desc\"\n                  (click)=\"expandAllOnPage(config.expandAll)\"\n                  *ngIf=\"config.expandAll\"\n                  data-automation-id=\"collapse-all\"\n                ></novo-button>\n              </th>\n              <!-- CHECKBOX -->\n              <th class=\"row-actions checkbox mass-action\" *ngIf=\"config.rowSelectionStyle === 'checkbox'\">\n                <novo-checkbox\n                  [(ngModel)]=\"master\"\n                  [indeterminate]=\"pageSelected.length > 0 && pageSelected.length < pagedData.length\"\n                  (ngModelChange)=\"selectPage($event)\"\n                  data-automation-id=\"select-all-checkbox\"\n                  [tooltip]=\"master ? labels.deselectAll : labels.selectAllOnPage\"\n                  tooltipPosition=\"right\"\n                ></novo-checkbox>\n              </th>\n              <!-- TABLE HEADERS -->\n              <th\n                *ngFor=\"let column of columns\"\n                [ngClass]=\"{\n                  'mass-action': config?.rowSelectionStyle === 'checkbox',\n                  actions: column?.actions?.items?.length > 0,\n                  preview: column?.name === 'preview'\n                }\"\n                [novoThOrderable]=\"column\"\n                (onOrderChange)=\"onOrderChange($event)\"\n                [hidden]=\"isColumnHidden(column)\"\n              >\n                <div class=\"th-group\" [attr.data-automation-id]=\"column.id || column.name\" *ngIf=\"!column.hideHeader\">\n                  <!-- LABEL & SORT ARROWS -->\n                  <div\n                    class=\"th-title\"\n                    [ngClass]=\"config.sorting !== false && column.sorting !== false ? 'sortable' : ''\"\n                    [novoThSortable]=\"config\"\n                    [column]=\"column\"\n                    (onSortChange)=\"onSortChange($event)\"\n                  >\n                    <label>{{ column.title || column.label }}</label>\n                    <div\n                      class=\"table-sort-icons\"\n                      tooltipPosition=\"bottom\"\n                      [tooltip]=\"labels.sort\"\n                      [ngClass]=\"column.sort || ''\"\n                      *ngIf=\"config.sorting !== false && column.sorting !== false\"\n                    >\n                      <i class=\"bhi-arrow-up\"></i>\n                      <i class=\"bhi-arrow-down\"></i>\n                    </div>\n                  </div>\n                  <!-- FILTER DROP-DOWN -->\n                  <novo-dropdown\n                    side=\"default\"\n                    *ngIf=\"config.filtering !== false && column.filtering !== false\"\n                    class=\"column-filters\"\n                    (toggled)=\"onDropdownToggled($event, column.name)\"\n                    parentScrollSelector=\".table-container\"\n                    containerClass=\"table-dropdown\"\n                  >\n                    <novo-button\n                      type=\"button\"\n                      theme=\"icon\"\n                      icon=\"filter\"\n                      tooltipPosition=\"bottom\"\n                      [tooltip]=\"labels.filters\"\n                      [class.filtered]=\"column.filter || column.filter === false\"\n                      (click)=\"focusInput()\"\n                    ></novo-button>\n                    <!-- FILTER OPTIONS LIST -->\n                    <novo-optgroup\n                      *ngIf=\"\n                        (column?.options?.length || column?.originalOptions?.length) &&\n                        column?.type !== 'date' &&\n                        toggledDropdownMap[column.name]\n                      \"\n                    >\n                      <novo-option class=\"filter-search\" inert>\n                        <div class=\"header\">\n                          <span>{{ labels.filters }}</span>\n                          <novo-button\n                            theme=\"dialogue\"\n                            color=\"negative\"\n                            icon=\"times\"\n                            (click)=\"onFilterClear(column)\"\n                            *ngIf=\"column.filter || column.filter === false\"\n                          >\n                            {{ labels.clear }}\n                          </novo-button>\n                        </div>\n                        <input\n                          type=\"text\"\n                          *ngIf=\"!!column.allowCustomTextOption\"\n                          [attr.id]=\"column.name + '-input'\"\n                          [novoTableFilter]=\"column\"\n                          (onFilterChange)=\"onFilterKeywords($event)\"\n                          [(ngModel)]=\"column.freetextFilter\"\n                          keepFilterFocused\n                          #filterInput\n                        />\n                      </novo-option>\n                      <novo-option\n                        [ngClass]=\"{ active: isFilterActive(column, option) }\"\n                        *ngFor=\"let option of column.options\"\n                        (click)=\"onFilterClick(column, option)\"\n                        [attr.data-automation-id]=\"getOptionDataAutomationId(option)\"\n                      >\n                        <span>{{ option?.label || option }}</span> <i class=\"bhi-check\" *ngIf=\"isFilterActive(column, option)\"></i>\n                      </novo-option>\n                    </novo-optgroup>\n                    <!-- FILTER SEARCH INPUT -->\n                    <novo-optgroup *ngIf=\"!(column?.options?.length || column?.originalOptions?.length) && toggledDropdownMap[column.name]\">\n                      <novo-option class=\"filter-search\" inert>\n                        <div class=\"header\">\n                          <span>{{ labels.filters }}</span>\n                          <novo-button theme=\"dialogue\" color=\"negative\" icon=\"times\" (click)=\"onFilterClear(column)\" *ngIf=\"column.filter\">\n                            {{ labels.clear }}\n                          </novo-button>\n                        </div>\n                        <input\n                          type=\"text\"\n                          [attr.id]=\"column.name + '-input'\"\n                          [novoTableFilter]=\"column\"\n                          (onFilterChange)=\"onFilterChange($event)\"\n                          [(ngModel)]=\"column.filter\"\n                          keepFilterFocused\n                          #filterInput\n                        />\n                      </novo-option>\n                    </novo-optgroup>\n                    <!-- FILTER DATE OPTIONS -->\n                    <novo-optgroup *ngIf=\"column?.options?.length && column?.type === 'date' && toggledDropdownMap[column.name]\">\n                      <novo-option class=\"filter-search\" *ngIf=\"!column.calenderShow\" inert>\n                        <div class=\"header\">\n                          <span>{{ labels.filters }}</span>\n                          <novo-button theme=\"dialogue\" color=\"negative\" icon=\"times\" (click)=\"onFilterClear(column)\" *ngIf=\"column.filter\">\n                            {{ labels.clear }}\n                          </novo-button>\n                        </div>\n                      </novo-option>\n                      <novo-option\n                        [class.active]=\"isFilterActive(column, option)\"\n                        *ngFor=\"let option of column.options\"\n                        (click)=\"onFilterClick(column, option)\"\n                        [keepOpen]=\"option.range\"\n                        [hidden]=\"column.calenderShow\"\n                        [attr.data-automation-id]=\"option?.label || option\"\n                      >\n                        {{ option?.label || option }}\n                        <novo-icon novoSuffix color=\"positive\" *ngIf=\"isFilterActive(column, option)\">check</novo-icon>\n                      </novo-option>\n                      <novo-option class=\"calendar-container\" *ngIf=\"column.calenderShow\" keepOpen inert>\n                        <novo-stack>\n                          <div class=\"back-link\" (click)=\"column.calenderShow = false\">\n                            <i class=\"bhi-previous\"></i>{{ labels.backToPresetFilters }}\n                          </div>\n                          <novo-date-picker\n                            (onSelect)=\"onCalenderSelect(column, $event)\"\n                            [(ngModel)]=\"column.filter\"\n                            mode=\"range\"\n                          ></novo-date-picker>\n                        </novo-stack>\n                      </novo-option>\n                    </novo-optgroup>\n                  </novo-dropdown>\n                </div>\n              </th>\n            </tr>\n          </thead>\n          <!-- TABLE DATA -->\n          <tbody *ngIf=\"!dataProvider.isEmpty() || editing\">\n            <tr\n              class=\"table-selection-row\"\n              *ngIf=\"config.rowSelectionStyle === 'checkbox' && showSelectAllMessage && config.selectAllEnabled\"\n              data-automation-id=\"table-selection-row\"\n            >\n              <td colspan=\"100%\">\n                {{ labels.selectedRecords(selected.length) }}\n                <a (click)=\"selectAll(true)\" data-automation-id=\"all-matching-records\">{{ labels.totalRecords(dataProvider.total) }}</a>\n              </td>\n            </tr>\n            <ng-template ngFor let-row=\"$implicit\" let-i=\"index\" [ngForOf]=\"rows\">\n              <tr\n                class=\"table-row\"\n                [ngClass]=\"row.customClass || ''\"\n                [id]=\"name + '-' + row[rowIdentifier]\"\n                [attr.data-automation-id]=\"row.id\"\n                (click)=\"rowClickHandler(row)\"\n                [class.active]=\"row.id === activeId\"\n              >\n                <td class=\"row-actions\" *ngIf=\"config.hasDetails\">\n                  <novo-button theme=\"icon\" icon=\"next\" (click)=\"row._expanded = !row._expanded\" *ngIf=\"!row._expanded\"></novo-button>\n                  <novo-button theme=\"icon\" icon=\"sort-desc\" (click)=\"row._expanded = !row._expanded\" *ngIf=\"row._expanded\"></novo-button>\n                </td>\n                <td class=\"row-actions checkbox\" *ngIf=\"config.rowSelectionStyle === 'checkbox'\">\n                  <novo-checkbox\n                    [(ngModel)]=\"row._selected\"\n                    (ngModelChange)=\"rowSelectHandler(row)\"\n                    data-automation-id=\"select-row-checkbox\"\n                  ></novo-checkbox>\n                </td>\n                <td\n                  *ngFor=\"let column of columns\"\n                  [attr.data-automation-id]=\"column.id || column.name\"\n                  [class.novo-form-row]=\"editable\"\n                  [hidden]=\"isColumnHidden(column)\"\n                >\n                  <novo-table-cell\n                    *ngIf=\"row._editing && !row._editing[column.name]\"\n                    [hasEditor]=\"editable\"\n                    [column]=\"column\"\n                    [row]=\"row\"\n                    [form]=\"getRowControlForm(i)\"\n                  ></novo-table-cell>\n                  <novo-control\n                    *ngIf=\"row._editing && row._editing[column.name]\"\n                    condensed=\"true\"\n                    [form]=\"getRowControlForm(i)\"\n                    [control]=\"row.controls[column.name]\"\n                  ></novo-control>\n                </td>\n              </tr>\n              <tr\n                class=\"details-row\"\n                *ngIf=\"config.hasDetails\"\n                [hidden]=\"!row._expanded\"\n                [attr.data-automation-id]=\"'details-row-' + row.id\"\n              >\n                <td class=\"row-actions\"></td>\n                <td [attr.colspan]=\"config.rowSelectionStyle === 'checkbox' ? columns.length + 1 : columns.length\">\n                  <novo-row-details [data]=\"row\" [renderer]=\"config.detailsRenderer\"></novo-row-details>\n                </td>\n              </tr>\n            </ng-template>\n          </tbody>\n          <!-- NO TABLE DATA PLACEHOLDER -->\n          <tbody\n            class=\"table-message\"\n            *ngIf=\"dataProvider.isEmpty() && !dataProvider.isFiltered() && !editing\"\n            data-automation-id=\"empty-table\"\n          >\n            <tr>\n              <td colspan=\"100%\">\n                <div #emptymessage><ng-content select=\"[table-empty-message]\"></ng-content></div>\n                <div class=\"table-empty-message\" *ngIf=\"emptymessage.childNodes.length == 0\">\n                  <h4><i class=\"bhi-search-question\"></i> {{ labels.emptyTableMessage }}</h4>\n                </div>\n              </td>\n            </tr>\n          </tbody>\n          <!-- NO MATCHING RECORDS -->\n          <tbody class=\"table-message\" *ngIf=\"dataProvider.isEmpty() && dataProvider.isFiltered()\" data-automation-id=\"empty-table\">\n            <tr>\n              <td colspan=\"100%\">\n                <div #nomatchmessage><ng-content select=\"[table-no-matching-records-message]\"></ng-content></div>\n                <div class=\"no-matching-records\" *ngIf=\"nomatchmessage.childNodes.length == 0\">\n                  <h4><i class=\"bhi-search-question\"></i> {{ labels.noMatchingRecordsMessage }}</h4>\n                </div>\n              </td>\n            </tr>\n          </tbody>\n          <!-- TABLE DATA ERROR PLACEHOLDER -->\n          <tbody class=\"table-message\" *ngIf=\"dataProvider.hasErrors()\" data-automation-id=\"table-errors\">\n            <tr>\n              <td colspan=\"100%\">\n                <div #errormessage><ng-content select=\"[table-error-message]\"></ng-content></div>\n                <div class=\"table-error-message\" *ngIf=\"errormessage.childNodes.length == 0\">\n                  <h4><i class=\"bhi-caution\"></i> {{ labels.erroredTableMessage }}</h4>\n                </div>\n              </td>\n            </tr>\n          </tbody>\n          <tfoot *ngIf=\"!config.footers\" [ngClass]=\"dataProvider.length % 2 == 0 ? 'odd' : 'even'\">\n            <tr>\n              <td colspan=\"100%\">\n                <ng-content select=\"novo-table-footer\"></ng-content>\n              </td>\n            </tr>\n          </tfoot>\n          <tfoot *ngFor=\"let footer of footers; let i = index\" class=\"novo-table-total-footer\">\n            <tr>\n              <td *ngFor=\"let column of columns\" [attr.data-automation-id]=\"(column.id || column.name) + '-total-' + i\">\n                {{ footer[column.name] }}\n              </td>\n            </tr>\n          </tfoot>\n        </table>\n      </novo-form>\n    </div>\n  "
                 },] }
     ];
     NovoTableElement.ctorParameters = function () { return [