novo-elements 5.6.1 → 5.10.0

package/bundles/novo-elements.umd.js

@@ -3128,6 +3128,7 @@
             this.clearAllNormalCase = 'Clear All';
             this.clearSort = 'Clear Sort';
             this.clearFilter = 'Clear Filter';
+            this.clearSelected = 'Clear Selected';
             this.today = 'Today';
             this.now = 'Now';
             this.isRequired = 'is required';
@@ -5814,6 +5815,8 @@
                         return 'user';
                     case 'CorporationDepartment':
                         return 'department';
+                    case 'JobShift':
+                        return 'timetable contract';
                     default:
                         return '';
                 }
@@ -5827,6 +5830,14 @@
             }
             return timestamp;
         };
+        EntityPickerResult.prototype.renderTimeNoOffset = function (dateStr) {
+            var timestamp = '';
+            if (dateStr) {
+                dateStr = dateStr.slice(0, 19);
+                timestamp = this.labels.formatTime(dateStr);
+            }
+            return timestamp;
+        };
         EntityPickerResult.prototype.getNameForResult = function (result) {
             if (result) {
                 switch (result.searchEntity) {
@@ -5869,7 +5880,7 @@
     EntityPickerResult.decorators = [
         { type: core.Component, args: [{
                     selector: 'entity-picker-result',
-                    template: "\n    <novo-list-item *ngIf=\"match.data\">\n      <item-header>\n        <item-avatar [icon]=\"getIconForResult(match.data)\"></item-avatar>\n        <item-title> <span [innerHtml]=\"highlight(getNameForResult(match.data), term)\"></span> </item-title>\n      </item-header>\n      <item-content direction=\"horizontal\">\n        <!-- COMPANY 1 -->\n        <p class=\"company\" *ngIf=\"match.data.companyName || match.data?.clientCorporation?.name\">\n          <i class=\"bhi-company\"></i>\n          <span [innerHtml]=\"highlight(match.data.companyName || match.data?.clientCorporation?.name, term)\"></span>\n        </p>\n        <!-- CLIENT CONTACT -->\n        <p class=\"contact\" *ngIf=\"match.data?.clientContact?.firstName\">\n          <i class=\"bhi-person contact person\"></i>\n          <span [innerHtml]=\"highlight(match.data.clientContact.firstName + ' ' + match.data.clientContact.lastName, term)\"></span>\n        </p>\n        <!-- CANDIDATE -->\n        <p class=\"candidate\" *ngIf=\"match.data.candidate && match.data.searchEntity === 'Placement'\">\n          <i class=\"bhi-candidate\"></i>\n          <span [innerHtml]=\"highlight(match.data.candidate.firstName + ' ' + match.data.candidate.lastName, term)\"></span>\n        </p>\n        <!-- START & END DATE -->\n        <p class=\"start-date\" *ngIf=\"match.data.dateBegin && match.data.searchEntity === 'Placement'\">\n          <i class=\"bhi-calendar\"></i>\n          <span [innerHtml]=\"renderTimestamp(match.data.dateBegin) + ' - ' + renderTimestamp(match.data.dateEnd)\"></span>\n        </p>\n        <!-- EMAIL -->\n        <p class=\"email\" *ngIf=\"match.data.email\">\n          <i class=\"bhi-email\"></i> <span [innerHtml]=\"highlight(match.data.email, term)\"></span>\n        </p>\n        <!-- PHONE -->\n        <p class=\"phone\" *ngIf=\"match.data.phone\">\n          <i class=\"bhi-phone\"></i> <span [innerHtml]=\"highlight(match.data.phone, term)\"></span>\n        </p>\n        <!-- ADDRESS -->\n        <p class=\"location\" *ngIf=\"match.data.address && (match.data.address.city || match.data.address.state)\">\n          <i class=\"bhi-location\"></i> <span *ngIf=\"match.data.address.city\" [innerHtml]=\"highlight(match.data.address.city, term)\"></span>\n          <span *ngIf=\"match.data.address.city && match.data.address.state\">, </span>\n          <span *ngIf=\"match.data.address.state\" [innerHtml]=\"highlight(match.data.address.state, term)\"></span>\n        </p>\n        <!-- STATUS -->\n        <p class=\"status\" *ngIf=\"match.data.status\">\n          <i class=\"bhi-info\"></i> <span [innerHtml]=\"highlight(match.data.status, term)\"></span>\n        </p>\n        <!-- OWNER -->\n        <p class=\"owner\" *ngIf=\"match.data.owner && match.data.owner.name && match.data.searchEntity === 'Candidate'\">\n          <i class=\"bhi-person\"></i> <span [innerHtml]=\"highlight(match.data.owner.name, term)\"></span>\n        </p>\n        <!-- PRIMARY DEPARTMENT -->\n        <p\n          class=\"primary-department\"\n          *ngIf=\"match.data.primaryDepartment && match.data.primaryDepartment.name && match.data.searchEntity === 'CorporateUser'\"\n        >\n          <i class=\"bhi-department\"></i> <span [innerHtml]=\"highlight(match.data.primaryDepartment.name, term)\"></span>\n        </p>\n        <!-- OCCUPATION -->\n        <p class=\"occupation\" *ngIf=\"match.data.occupation && match.data.searchEntity === 'CorporateUser'\">\n          <i class=\"bhi-occupation\"></i> <span [innerHtml]=\"highlight(match.data.occupation, term)\"></span>\n        </p>\n      </item-content>\n    </novo-list-item>\n  "
+                    template: "\n    <novo-list-item *ngIf=\"match.data\">\n      <item-header>\n        <item-avatar [icon]=\"getIconForResult(match.data)\"></item-avatar>\n        <item-title> <span [innerHtml]=\"highlight(getNameForResult(match.data), term)\"></span> </item-title>\n      </item-header>\n      <item-content direction=\"horizontal\">\n        <!-- COMPANY 1 -->\n        <p class=\"company\" *ngIf=\"match.data.companyName || match.data?.clientCorporation?.name\">\n          <i class=\"bhi-company\"></i>\n          <span [innerHtml]=\"highlight(match.data.companyName || match.data?.clientCorporation?.name, term)\"></span>\n        </p>\n        <!-- CLIENT CONTACT -->\n        <p class=\"contact\" *ngIf=\"match.data?.clientContact?.firstName\">\n          <i class=\"bhi-person contact person\"></i>\n          <span [innerHtml]=\"highlight(match.data.clientContact.firstName + ' ' + match.data.clientContact.lastName, term)\"></span>\n        </p>\n        <!-- CANDIDATE -->\n        <p class=\"candidate\" *ngIf=\"match.data.candidate && match.data.searchEntity === 'Placement'\">\n          <i class=\"bhi-candidate\"></i>\n          <span [innerHtml]=\"highlight(match.data.candidate.firstName + ' ' + match.data.candidate.lastName, term)\"></span>\n        </p>\n        <!-- START & END DATE -->\n        <p class=\"start-date\" *ngIf=\"match.data.dateBegin && match.data.searchEntity === 'Placement'\">\n          <i class=\"bhi-calendar\"></i>\n          <span [innerHtml]=\"renderTimestamp(match.data.dateBegin) + ' - ' + renderTimestamp(match.data.dateEnd)\"></span>\n        </p>\n        <!-- START Date -->\n        <p class=\"start-date\" *ngIf=\"match.data.startTime && match.data.searchEntity === 'JobShift'\">\n            <i class=\"bhi-calendar\"></i>\n            <span [innerHtml]=\"renderTimestamp(match.data.startTime)\"></span>\n        </p>\n        <!-- START & END TIME -->\n        <p class=\"start-time\" *ngIf=\"match.data.startTime && match.data.searchEntity === 'JobShift'\">\n            <i class=\"bhi-clock\"></i>\n            <span [innerHtml]=\"renderTimeNoOffset(match.data.startTime) + ' - ' + renderTimeNoOffset(match.data.endTime)\"></span>\n        </p>\n        <!-- JOBORDER -->\n        <p class=\"job\" *ngIf=\"match.data.jobOrder && match.data.searchEntity === 'JobShift'\">\n            <i class=\"bhi-job\"></i>\n            <span [innerHtml]=\"highlight(match.data.jobOrder.title, term)\"></span>\n        </p>\n        <!-- OPENINGS -->\n        <p class=\"openings\" *ngIf=\"match.data.openings && match.data.searchEntity === 'JobShift'\">\n            <i class=\"bhi-candidate\"></i>\n            <span>{{ match.data.numAssigned }} / {{ match.data.openings }}</span>\n        </p>\n        <!-- EMAIL -->\n        <p class=\"email\" *ngIf=\"match.data.email\">\n          <i class=\"bhi-email\"></i> <span [innerHtml]=\"highlight(match.data.email, term)\"></span>\n        </p>\n        <!-- PHONE -->\n        <p class=\"phone\" *ngIf=\"match.data.phone\">\n          <i class=\"bhi-phone\"></i> <span [innerHtml]=\"highlight(match.data.phone, term)\"></span>\n        </p>\n        <!-- ADDRESS -->\n        <p class=\"location\" *ngIf=\"match.data.address && (match.data.address.city || match.data.address.state)\">\n          <i class=\"bhi-location\"></i> <span *ngIf=\"match.data.address.city\" [innerHtml]=\"highlight(match.data.address.city, term)\"></span>\n          <span *ngIf=\"match.data.address.city && match.data.address.state\">, </span>\n          <span *ngIf=\"match.data.address.state\" [innerHtml]=\"highlight(match.data.address.state, term)\"></span>\n        </p>\n        <!-- STATUS -->\n        <p class=\"status\" *ngIf=\"match.data.status\">\n          <i class=\"bhi-info\"></i> <span [innerHtml]=\"highlight(match.data.status, term)\"></span>\n        </p>\n        <!-- OWNER -->\n        <p class=\"owner\" *ngIf=\"match.data.owner && match.data.owner.name && match.data.searchEntity === 'Candidate'\">\n          <i class=\"bhi-person\"></i> <span [innerHtml]=\"highlight(match.data.owner.name, term)\"></span>\n        </p>\n        <!-- PRIMARY DEPARTMENT -->\n        <p\n          class=\"primary-department\"\n          *ngIf=\"match.data.primaryDepartment && match.data.primaryDepartment.name && match.data.searchEntity === 'CorporateUser'\"\n        >\n          <i class=\"bhi-department\"></i> <span [innerHtml]=\"highlight(match.data.primaryDepartment.name, term)\"></span>\n        </p>\n        <!-- OCCUPATION -->\n        <p class=\"occupation\" *ngIf=\"match.data.occupation && match.data.searchEntity === 'CorporateUser'\">\n          <i class=\"bhi-occupation\"></i> <span [innerHtml]=\"highlight(match.data.occupation, term)\"></span>\n        </p>\n      </item-content>\n    </novo-list-item>\n  "
                 },] }
     ];
     EntityPickerResult.ctorParameters = function () { return [
@@ -6987,6 +6998,7 @@
             this.expandedRows = new Set();
             this.isForceRefresh = false;
             this.updates = new core.EventEmitter();
+            this.retainSelected = false;
         }
         Object.defineProperty(DataTableState.prototype, "userFiltered", {
             get: function () {
@@ -7017,9 +7029,12 @@
                 this.filter = undefined;
             }
             this.page = 0;
-            this.selectedRows.clear();
-            this.resetSource.next();
+            if (!this.retainSelected) {
+                this.selectedRows.clear();
+                this.resetSource.next();
+            }
             this.onSortFilterChange();
+            this.retainSelected = false;
             if (fireUpdate) {
                 this.updates.emit({
                     sort: this.sort,
@@ -7032,8 +7047,8 @@
             if (fireUpdate === void 0) { fireUpdate = true; }
             this.sort = undefined;
             this.page = 0;
-            this.selectedRows.clear();
-            this.resetSource.next();
+            this.checkRetainment('sort');
+            this.reset(fireUpdate, true);
             this.onSortFilterChange();
             if (fireUpdate) {
                 this.updates.emit({
@@ -7048,8 +7063,8 @@
             this.filter = undefined;
             this.globalSearch = undefined;
             this.page = 0;
-            this.selectedRows.clear();
-            this.resetSource.next();
+            this.checkRetainment('filter');
+            this.reset(fireUpdate, true);
             this.onSortFilterChange();
             if (fireUpdate) {
                 this.updates.emit({
@@ -7059,6 +7074,20 @@
                 });
             }
         };
+        DataTableState.prototype.clearSelected = function (fireUpdate) {
+            if (fireUpdate === void 0) { fireUpdate = true; }
+            this.globalSearch = undefined;
+            this.page = 0;
+            this.reset(fireUpdate, true);
+            this.onSelectionChange();
+            if (fireUpdate) {
+                this.updates.emit({
+                    sort: this.sort,
+                    filter: this.filter,
+                    globalSearch: this.globalSearch,
+                });
+            }
+        };
         DataTableState.prototype.onSelectionChange = function () {
             this.selectionSource.next();
         };
@@ -7066,9 +7095,12 @@
             this.expandSource.next(targetId);
         };
         DataTableState.prototype.onPaginationChange = function (isPageSizeChange, pageSize) {
+            this.checkRetainment('page');
             this.paginationSource.next({ isPageSizeChange: isPageSizeChange, pageSize: pageSize });
         };
         DataTableState.prototype.onSortFilterChange = function () {
+            this.checkRetainment('sort');
+            this.checkRetainment('filter');
             this.sortFilterSource.next({
                 sort: this.sort,
                 filter: this.filter,
@@ -7092,6 +7124,10 @@
                 }
             }
         };
+        DataTableState.prototype.checkRetainment = function (caller) {
+            var _a;
+            this.retainSelected = ((_a = this.selectionOptions) === null || _a === void 0 ? void 0 : _a.some(function (option) { return option.label === caller; })) || this.retainSelected;
+        };
         return DataTableState;
     }());
     DataTableState.decorators = [
@@ -7103,6 +7139,7 @@
             this.state = state;
             this.ref = ref;
             this.labels = labels;
+            this.selectedClear = new core.EventEmitter();
             this.sortClear = new core.EventEmitter();
             this.filterClear = new core.EventEmitter();
             this.allClear = new core.EventEmitter();
@@ -7115,9 +7152,14 @@
             this.state.clearFilter();
             this.filterClear.emit(true);
         };
+        NovoDataTableClearButton.prototype.clearSelected = function () {
+            this.state.clearSelected();
+            this.selectedClear.emit(true);
+        };
         NovoDataTableClearButton.prototype.clearAll = function () {
             this.state.reset();
             this.allClear.emit(true);
+            this.selectedClear.emit(true);
             this.sortClear.emit(true);
             this.filterClear.emit(true);
         };
@@ -7126,7 +7168,7 @@
     NovoDataTableClearButton.decorators = [
         { type: core.Component, args: [{
                     selector: 'novo-data-table-clear-button',
-                    template: "\n    <novo-dropdown side=\"bottom-right\" class=\"novo-data-table-clear-button\" data-automation-id=\"novo-data-table-clear-dropdown\">\n      <button type=\"button\" theme=\"primary\" color=\"negative\" icon=\"collapse\" data-automation-id=\"novo-data-table-clear-dropdown-btn\">{{ labels.clear }}</button>\n      <list>\n          <item *ngIf=\"state.sort\" (click)=\"clearSort()\" data-automation-id=\"novo-data-table-clear-dropdown-clear-sort\">{{ labels.clearSort }}</item>\n          <item *ngIf=\"state.filter\" (click)=\"clearFilter()\" data-automation-id=\"novo-data-table-clear-dropdown-clear-filter\">{{ labels.clearFilter }}</item>\n          <item *ngIf=\"state.sort && state.filter\" (click)=\"clearAll()\" data-automation-id=\"novo-data-table-clear-dropdown-clear-all\">{{ labels.clearAllNormalCase }}</item>\n      </list>\n    </novo-dropdown>\n  ",
+                    template: "\n    <novo-dropdown side=\"bottom-right\" class=\"novo-data-table-clear-button\" data-automation-id=\"novo-data-table-clear-dropdown\">\n      <button type=\"button\" theme=\"primary\" color=\"negative\" icon=\"collapse\" data-automation-id=\"novo-data-table-clear-dropdown-btn\">{{ labels.clear }}</button>\n      <list>\n          <item *ngIf=\"state.selected.length > 0\" (click)=\"clearSelected()\" data-automation-id=\"novo-data-table-clear-dropdown-clear-selected\">{{ labels.clearSelected }}</item>\n          <item *ngIf=\"state.sort\" (click)=\"clearSort()\" data-automation-id=\"novo-data-table-clear-dropdown-clear-sort\">{{ labels.clearSort }}</item>\n          <item *ngIf=\"state.filter\" (click)=\"clearFilter()\" data-automation-id=\"novo-data-table-clear-dropdown-clear-filter\">{{ labels.clearFilter }}</item>\n          <item *ngIf=\"state.sort && state.filter\" (click)=\"clearAll()\" data-automation-id=\"novo-data-table-clear-dropdown-clear-all\">{{ labels.clearAllNormalCase }}</item>\n      </list>\n    </novo-dropdown>\n  ",
                     changeDetection: core.ChangeDetectionStrategy.OnPush
                 },] }
     ];
@@ -7136,6 +7178,7 @@
         { type: NovoLabelService }
     ]; };
     NovoDataTableClearButton.propDecorators = {
+        selectedClear: [{ type: core.Output }],
         sortClear: [{ type: core.Output }],
         filterClear: [{ type: core.Output }],
         allClear: [{ type: core.Output }]
@@ -7190,7 +7233,10 @@
                 _this.current = data.results.length;
                 _this.data = data.results;
                 // Clear selection
-                _this.state.selectedRows.clear();
+                if (!_this.state.retainSelected) {
+                    _this.state.selectedRows.clear();
+                }
+                _this.state.retainSelected = false;
                 _this.state.onSelectionChange();
                 // Mark changes
                 setTimeout(function () {
@@ -7562,6 +7608,7 @@
                 }
             }
             this.state.filter = filter;
+            this.state.checkRetainment('filter');
             this.state.reset(false, true);
             this.state.updates.next({ filter: filter, sort: this.state.sort });
             this.state.onSortFilterChange();
@@ -7569,6 +7616,7 @@
         NovoDataTableSortFilter.prototype.sort = function (id, value, transform) {
             var sort = { id: id, value: value, transform: transform };
             this.state.sort = sort;
+            this.state.checkRetainment('sort');
             this.state.reset(false, true);
             this.state.updates.next({ sort: sort, filter: this.state.filter });
             this.state.onSortFilterChange();
@@ -7981,6 +8029,7 @@
             this.trackByFn = function (index, item) { return item.id; };
             this.templates = {};
             this.fixedHeader = false;
+            this.maxSelected = undefined;
             this._hideGlobalSearch = true;
             this.preferencesChanged = new core.EventEmitter();
             this.loading = true;
@@ -8204,6 +8253,7 @@
         };
         NovoDataTable.prototype.ngAfterContentInit = function () {
             var _this = this;
+            var _a;
             if (this.displayedColumns && this.displayedColumns.length) {
                 this.expandable = this.displayedColumns.includes('expand');
             }
@@ -8233,6 +8283,7 @@
             }
             this.state.page = this.paginationOptions ? this.paginationOptions.page : undefined;
             this.state.pageSize = this.paginationOptions ? this.paginationOptions.pageSize : undefined;
+            this.state.selectionOptions = (_a = this.selectionOptions) !== null && _a !== void 0 ? _a : undefined;
             // Scrolling inside table
             this.novoDataTableContainer.nativeElement.addEventListener('scroll', this.scrollListenerHandler);
             this.initialized = true;
@@ -8407,11 +8458,11 @@
             this.ref.markForCheck();
         };
         NovoDataTable.prototype.performInteractions = function (event) {
-            var e_1, _a;
+            var e_1, _b;
             if (this.listInteractions) {
                 try {
-                    for (var _b = __values(this.columns), _c = _b.next(); !_c.done; _c = _b.next()) {
-                        var column = _c.value;
+                    for (var _c = __values(this.columns), _d = _c.next(); !_d.done; _d = _c.next()) {
+                        var column = _d.value;
                         var allListColumnInteractions = this.listInteractions[column.id];
                         var listColumnInteraction = allListColumnInteractions && allListColumnInteractions.find(function (int) { return int.event.includes(event); });
                         if (listColumnInteraction) {
@@ -8422,7 +8473,7 @@
                 catch (e_1_1) { e_1 = { error: e_1_1 }; }
                 finally {
                     try {
-                        if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
+                        if (_d && !_d.done && (_b = _c.return)) _b.call(_c);
                     }
                     finally { if (e_1) throw e_1.error; }
                 }
@@ -8440,7 +8491,7 @@
                             animations.transition('void <=> *', animations.animate('70ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
                         ]),
                     ],
-                    template: "\n    <header\n      *ngIf=\"(!(dataSource?.totallyEmpty && !state.userFiltered) && !loading) || forceShowHeader\"\n      [class.empty]=\"hideGlobalSearch && !paginationOptions && !templates['customActions']\"\n    >\n      <ng-container *ngTemplateOutlet=\"templates['customHeader']\"></ng-container>\n      <novo-search\n        alwaysOpen=\"true\"\n        (searchChanged)=\"onSearchChange($event)\"\n        [(ngModel)]=\"state.globalSearch\"\n        *ngIf=\"!hideGlobalSearch\"\n        [placeholder]=\"searchOptions?.placeholder\"\n        [hint]=\"searchOptions?.tooltip\"\n      >\n      </novo-search>\n      <novo-data-table-pagination\n        *ngIf=\"paginationOptions\"\n        [theme]=\"paginationOptions.theme\"\n        [length]=\"dataSource?.currentTotal\"\n        [page]=\"paginationOptions.page\"\n        [pageSize]=\"paginationOptions.pageSize\"\n        [pageSizeOptions]=\"paginationOptions.pageSizeOptions\"\n        [dataFeatureId]=\"paginatorDataFeatureId\"\n      >\n      </novo-data-table-pagination>\n      <div class=\"novo-data-table-actions\" *ngIf=\"templates['customActions']\">\n        <ng-container *ngTemplateOutlet=\"templates['customActions']\"></ng-container>\n      </div>\n    </header>\n    <div class=\"novo-data-table-loading-mask\" *ngIf=\"dataSource?.loading || loading\" data-automation-id=\"novo-data-table-loading\">\n      <novo-loading></novo-loading>\n    </div>\n    <div class=\"novo-data-table-outside-container\" [ngClass]=\"{ 'novo-data-table-outside-container-fixed': fixedHeader }\">\n      <div class=\"novo-data-table-custom-filter\" *ngIf=\"customFilter\">\n        <ng-container *ngTemplateOutlet=\"templates['customFilter']\"></ng-container>\n      </div>\n      <div\n        #novoDataTableContainer\n        class=\"novo-data-table-container\"\n        [ngClass]=\"{ 'novo-data-table-container-fixed': fixedHeader }\"\n        [class.empty-user-filtered]=\"dataSource?.currentlyEmpty && state.userFiltered\"\n        [class.empty]=\"dataSource?.totallyEmpty && !dataSource?.loading && !loading && !state.userFiltered && !dataSource.pristine\"\n      >\n        <cdk-table\n          *ngIf=\"columns?.length > 0 && columnsLoaded && dataSource\"\n          [dataSource]=\"dataSource\"\n          [trackBy]=\"trackByFn\"\n          novoDataTableSortFilter\n          [class.expandable]=\"expandable\"\n          [class.empty]=\"dataSource?.currentlyEmpty && state.userFiltered\"\n          [hidden]=\"dataSource?.totallyEmpty && !state.userFiltered\"\n        >\n          <ng-container cdkColumnDef=\"selection\">\n            <novo-data-table-checkbox-header-cell *cdkHeaderCellDef></novo-data-table-checkbox-header-cell>\n            <novo-data-table-checkbox-cell *cdkCellDef=\"let row; let i = index\" [row]=\"row\"></novo-data-table-checkbox-cell>\n          </ng-container>\n          <ng-container cdkColumnDef=\"expand\">\n            <novo-data-table-expand-header-cell *cdkHeaderCellDef></novo-data-table-expand-header-cell>\n            <novo-data-table-expand-cell *cdkCellDef=\"let row; let i = index\" [row]=\"row\"></novo-data-table-expand-cell>\n          </ng-container>\n          <ng-container *ngFor=\"let column of columns; trackBy: trackColumnsBy\" [cdkColumnDef]=\"column.id\">\n            <novo-data-table-header-cell\n              *cdkHeaderCellDef\n              [column]=\"column\"\n              [filterTemplate]=\"templates['column-filter-' + column.id]\"\n              [novo-data-table-cell-config]=\"column\"\n              [resized]=\"resized\"\n              [defaultSort]=\"defaultSort\"\n              [allowMultipleFilters]=\"allowMultipleFilters\"\n              [class.empty]=\"column?.type === 'action' && !column?.label\"\n              [class.button-header-cell]=\"column?.type === 'expand' || (column?.type === 'action' && !column?.action?.options)\"\n              [class.dropdown-header-cell]=\"column?.type === 'action' && column?.action?.options\"\n              [class.fixed-header]=\"fixedHeader\"\n            ></novo-data-table-header-cell>\n            <novo-data-table-cell\n              *cdkCellDef=\"let row\"\n              [resized]=\"resized\"\n              [column]=\"column\"\n              [row]=\"row\"\n              [template]=\"columnToTemplate[column.id]\"\n              [class.empty]=\"column?.type === 'action' && !column?.label\"\n              [class.button-cell]=\"column?.type === 'expand' || (column?.type === 'action' && !column?.action?.options)\"\n              [class.dropdown-cell]=\"column?.type === 'action' && column?.action?.options\"\n            ></novo-data-table-cell>\n          </ng-container>\n          <novo-data-table-header-row\n            *cdkHeaderRowDef=\"displayedColumns\"\n            [fixedHeader]=\"fixedHeader\"\n            data-automation-id=\"novo-data-table-header-row\"\n          ></novo-data-table-header-row>\n          <novo-data-table-row\n            *cdkRowDef=\"let row; columns: displayedColumns\"\n            [ngClass]=\"{ active: row[rowIdentifier] == activeRowIdentifier }\"\n            [novoDataTableExpand]=\"detailRowTemplate\"\n            [row]=\"row\"\n            [id]=\"name + '-' + row[rowIdentifier]\"\n            [dataAutomationId]=\"row[rowIdentifier]\"\n          ></novo-data-table-row>\n        </cdk-table>\n        <div class=\"novo-data-table-footer\" *ngIf=\"templates['footer']\">\n          <ng-container *ngTemplateOutlet=\"templates['footer']; context: { $implicit: columns, data: dataSource.data }\"></ng-container>\n        </div>\n        <div\n          class=\"novo-data-table-no-results-container\"\n          [style.left.px]=\"scrollLeft\"\n          *ngIf=\"dataSource?.currentlyEmpty && state.userFiltered && !dataSource?.loading && !loading && !dataSource.pristine\"\n        >\n          <div class=\"novo-data-table-empty-message\">\n            <ng-container *ngTemplateOutlet=\"templates['noResultsMessage'] || templates['defaultNoResultsMessage']\"></ng-container>\n          </div>\n        </div>\n      </div>\n      <div\n        class=\"novo-data-table-empty-container\"\n        *ngIf=\"dataSource?.totallyEmpty && !dataSource?.loading && !loading && !state.userFiltered && !dataSource.pristine\"\n      >\n        <div class=\"novo-data-table-empty-message\">\n          <ng-container *ngTemplateOutlet=\"templates['emptyMessage'] || templates['defaultNoResultsMessage']\"></ng-container>\n        </div>\n      </div>\n    </div>\n    <!-- DEFAULT CELL TEMPLATE -->\n    <ng-template novoTemplate=\"textCellTemplate\" let-row let-col=\"col\">\n      <span [style.width.px]=\"col?.width\" [style.min-width.px]=\"col?.width\" [style.max-width.px]=\"col?.width\">{{\n        row[col.id] | dataTableInterpolate: col\n      }}</span>\n    </ng-template>\n    <ng-template novoTemplate=\"dateCellTemplate\" let-row let-col=\"col\">\n      <span>{{ row[col.id] | dataTableInterpolate: col | dataTableDateRenderer: col }}</span>\n    </ng-template>\n    <ng-template novoTemplate=\"datetimeCellTemplate\" let-row let-col=\"col\">\n      <span>{{ row[col.id] | dataTableInterpolate: col | dataTableDateTimeRenderer: col }}</span>\n    </ng-template>\n    <ng-template novoTemplate=\"timeCellTemplate\" let-row let-col=\"col\">\n      <span>{{ row[col.id] | dataTableInterpolate: col | dataTableTimeRenderer: col }}</span>\n    </ng-template>\n    <ng-template novoTemplate=\"currencyCellTemplate\" let-row let-col=\"col\">\n      <span>{{ row[col.id] | dataTableInterpolate: col | dataTableCurrencyRenderer: col }}</span>\n    </ng-template>\n    <ng-template novoTemplate=\"bigdecimalCellTemplate\" let-row let-col=\"col\">\n      <span>{{ row[col.id] | dataTableInterpolate: col | dataTableBigDecimalRenderer: col }}</span>\n    </ng-template>\n    <ng-template novoTemplate=\"numberCellTemplate\" let-row let-col=\"col\">\n      <span>{{ row[col.id] | dataTableInterpolate: col | dataTableNumberRenderer: col }}</span>\n    </ng-template>\n    <ng-template novoTemplate=\"percentCellTemplate\" let-row let-col=\"col\">\n      <span>{{ row[col.id] | dataTableInterpolate: col | dataTableNumberRenderer: col:true }}</span>\n    </ng-template>\n    <ng-template novoTemplate=\"linkCellTemplate\" let-row let-col=\"col\">\n      <a\n        [attr.data-feature-id]=\"col?.attributes?.dataFeatureId\"\n        (click)=\"col.handlers?.click({ originalEvent: $event, row: row })\"\n        [style.width.px]=\"col?.width\"\n        [style.min-width.px]=\"col?.width\"\n        [style.max-width.px]=\"col?.width\"\n        >{{ row[col.id] | dataTableInterpolate: col }}</a\n      >\n    </ng-template>\n    <ng-template novoTemplate=\"telCellTemplate\" let-row let-col=\"col\">\n      <a href=\"tel:{{ row[col.id] | dataTableInterpolate: col }}\" [target]=\"col?.attributes?.target\">{{\n        row[col.id] | dataTableInterpolate: col\n      }}</a>\n    </ng-template>\n    <ng-template novoTemplate=\"mailtoCellTemplate\" let-row let-col=\"col\">\n      <a href=\"mailto:{{ row[col.id] | dataTableInterpolate: col }}\" [target]=\"col?.attributes?.target\">{{\n        row[col.id] | dataTableInterpolate: col\n      }}</a>\n    </ng-template>\n    <ng-template novoTemplate=\"buttonCellTemplate\" let-row let-col=\"col\">\n      <p [tooltip]=\"col?.action?.tooltip\" tooltipPosition=\"right\" [attr.data-feature-id]=\"col?.attributes?.dataFeatureId\">\n        <i\n          class=\"bhi-{{ col?.action?.icon }} data-table-icon\"\n          (click)=\"col.handlers?.click({ originalEvent: $event, row: row })\"\n          [class.disabled]=\"isDisabled(col, row)\"\n        ></i>\n      </p>\n    </ng-template>\n    <ng-template novoTemplate=\"dropdownCellTemplate\" let-row let-col=\"col\">\n      <novo-dropdown parentScrollSelector=\".novo-data-table-container\" containerClass=\"novo-data-table-dropdown\">\n        <button type=\"button\" theme=\"dialogue\" [icon]=\"col.action.icon\" inverse>{{ col.label }}</button>\n        <list>\n          <item\n            *ngFor=\"let option of col?.action?.options\"\n            (action)=\"option.handlers.click({ originalEvent: $event?.originalEvent, row: row })\"\n            [disabled]=\"isDisabled(option, row)\"\n          >\n            <span [attr.data-automation-id]=\"option.label\">{{ option.label }}</span>\n          </item>\n        </list>\n      </novo-dropdown>\n    </ng-template>\n    <ng-template novoTemplate=\"defaultNoResultsMessage\">\n      <h4><i class=\"bhi-search-question\"></i> {{ labels.noMatchingRecordsMessage }}</h4>\n    </ng-template>\n    <ng-template novoTemplate=\"defaultEmptyMessage\">\n      <h4><i class=\"bhi-search-question\"></i> {{ labels.emptyTableMessage }}</h4>\n    </ng-template>\n    <ng-template novoTemplate=\"expandedRow\"> You did not provide an \"expandedRow\" template! </ng-template>\n    <ng-template #detailRowTemplate let-row>\n      <div class=\"novo-data-table-detail-row\" [@expand] style=\"overflow: hidden\">\n        <ng-container *ngTemplateOutlet=\"templates['expandedRow']; context: { $implicit: row }\"></ng-container>\n      </div>\n    </ng-template>\n    <!-- CUSTOM CELLS PASSED IN -->\n    <ng-content></ng-content>\n  ",
+                    template: "\n    <header\n      *ngIf=\"(!(dataSource?.totallyEmpty && !state.userFiltered) && !loading) || forceShowHeader\"\n      [class.empty]=\"hideGlobalSearch && !paginationOptions && !templates['customActions']\"\n    >\n      <ng-container *ngTemplateOutlet=\"templates['customHeader']\"></ng-container>\n      <novo-search\n        alwaysOpen=\"true\"\n        (searchChanged)=\"onSearchChange($event)\"\n        [(ngModel)]=\"state.globalSearch\"\n        *ngIf=\"!hideGlobalSearch\"\n        [placeholder]=\"searchOptions?.placeholder\"\n        [hint]=\"searchOptions?.tooltip\"\n      >\n      </novo-search>\n      <novo-data-table-pagination\n        *ngIf=\"paginationOptions\"\n        [theme]=\"paginationOptions.theme\"\n        [length]=\"dataSource?.currentTotal\"\n        [page]=\"paginationOptions.page\"\n        [pageSize]=\"paginationOptions.pageSize\"\n        [pageSizeOptions]=\"paginationOptions.pageSizeOptions\"\n        [dataFeatureId]=\"paginatorDataFeatureId\"\n      >\n      </novo-data-table-pagination>\n      <div class=\"novo-data-table-actions\" *ngIf=\"templates['customActions']\">\n        <ng-container *ngTemplateOutlet=\"templates['customActions']\"></ng-container>\n      </div>\n    </header>\n    <div class=\"novo-data-table-loading-mask\" *ngIf=\"dataSource?.loading || loading\" data-automation-id=\"novo-data-table-loading\">\n      <novo-loading></novo-loading>\n    </div>\n    <div class=\"novo-data-table-outside-container\" [ngClass]=\"{ 'novo-data-table-outside-container-fixed': fixedHeader }\">\n      <div class=\"novo-data-table-custom-filter\" *ngIf=\"customFilter\">\n        <ng-container *ngTemplateOutlet=\"templates['customFilter']\"></ng-container>\n      </div>\n      <div\n        #novoDataTableContainer\n        class=\"novo-data-table-container\"\n        [ngClass]=\"{ 'novo-data-table-container-fixed': fixedHeader }\"\n        [class.empty-user-filtered]=\"dataSource?.currentlyEmpty && state.userFiltered\"\n        [class.empty]=\"dataSource?.totallyEmpty && !dataSource?.loading && !loading && !state.userFiltered && !dataSource.pristine\"\n      >\n        <cdk-table\n          *ngIf=\"columns?.length > 0 && columnsLoaded && dataSource\"\n          [dataSource]=\"dataSource\"\n          [trackBy]=\"trackByFn\"\n          novoDataTableSortFilter\n          [class.expandable]=\"expandable\"\n          [class.empty]=\"dataSource?.currentlyEmpty && state.userFiltered\"\n          [hidden]=\"dataSource?.totallyEmpty && !state.userFiltered\"\n        >\n          <ng-container cdkColumnDef=\"selection\">\n            <novo-data-table-checkbox-header-cell *cdkHeaderCellDef [maxSelected]=\"maxSelected\"></novo-data-table-checkbox-header-cell>\n            <novo-data-table-checkbox-cell *cdkCellDef=\"let row; let i = index\" [row]=\"row\" [maxSelected]=\"maxSelected\"></novo-data-table-checkbox-cell>\n          </ng-container>\n          <ng-container cdkColumnDef=\"expand\">\n            <novo-data-table-expand-header-cell *cdkHeaderCellDef></novo-data-table-expand-header-cell>\n            <novo-data-table-expand-cell *cdkCellDef=\"let row; let i = index\" [row]=\"row\"></novo-data-table-expand-cell>\n          </ng-container>\n          <ng-container *ngFor=\"let column of columns; trackBy: trackColumnsBy\" [cdkColumnDef]=\"column.id\">\n            <novo-data-table-header-cell\n              *cdkHeaderCellDef\n              [column]=\"column\"\n              [filterTemplate]=\"templates['column-filter-' + column.id]\"\n              [novo-data-table-cell-config]=\"column\"\n              [resized]=\"resized\"\n              [defaultSort]=\"defaultSort\"\n              [allowMultipleFilters]=\"allowMultipleFilters\"\n              [class.empty]=\"column?.type === 'action' && !column?.label\"\n              [class.button-header-cell]=\"column?.type === 'expand' || (column?.type === 'action' && !column?.action?.options)\"\n              [class.dropdown-header-cell]=\"column?.type === 'action' && column?.action?.options\"\n              [class.fixed-header]=\"fixedHeader\"\n            ></novo-data-table-header-cell>\n            <novo-data-table-cell\n              *cdkCellDef=\"let row\"\n              [resized]=\"resized\"\n              [column]=\"column\"\n              [row]=\"row\"\n              [template]=\"columnToTemplate[column.id]\"\n              [class.empty]=\"column?.type === 'action' && !column?.label\"\n              [class.button-cell]=\"column?.type === 'expand' || (column?.type === 'action' && !column?.action?.options)\"\n              [class.dropdown-cell]=\"column?.type === 'action' && column?.action?.options\"\n            ></novo-data-table-cell>\n          </ng-container>\n          <novo-data-table-header-row\n            *cdkHeaderRowDef=\"displayedColumns\"\n            [fixedHeader]=\"fixedHeader\"\n            data-automation-id=\"novo-data-table-header-row\"\n          ></novo-data-table-header-row>\n          <novo-data-table-row\n            *cdkRowDef=\"let row; columns: displayedColumns\"\n            [ngClass]=\"{ active: row[rowIdentifier] == activeRowIdentifier }\"\n            [novoDataTableExpand]=\"detailRowTemplate\"\n            [row]=\"row\"\n            [id]=\"name + '-' + row[rowIdentifier]\"\n            [dataAutomationId]=\"row[rowIdentifier]\"\n          ></novo-data-table-row>\n        </cdk-table>\n        <div class=\"novo-data-table-footer\" *ngIf=\"templates['footer']\">\n          <ng-container *ngTemplateOutlet=\"templates['footer']; context: { $implicit: columns, data: dataSource.data }\"></ng-container>\n        </div>\n        <div\n          class=\"novo-data-table-no-results-container\"\n          [style.left.px]=\"scrollLeft\"\n          *ngIf=\"dataSource?.currentlyEmpty && state.userFiltered && !dataSource?.loading && !loading && !dataSource.pristine\"\n        >\n          <div class=\"novo-data-table-empty-message\">\n            <ng-container *ngTemplateOutlet=\"templates['noResultsMessage'] || templates['defaultNoResultsMessage']\"></ng-container>\n          </div>\n        </div>\n      </div>\n      <div\n        class=\"novo-data-table-empty-container\"\n        *ngIf=\"dataSource?.totallyEmpty && !dataSource?.loading && !loading && !state.userFiltered && !dataSource.pristine\"\n      >\n        <div class=\"novo-data-table-empty-message\">\n          <ng-container *ngTemplateOutlet=\"templates['emptyMessage'] || templates['defaultNoResultsMessage']\"></ng-container>\n        </div>\n      </div>\n    </div>\n    <!-- DEFAULT CELL TEMPLATE -->\n    <ng-template novoTemplate=\"textCellTemplate\" let-row let-col=\"col\">\n      <span [style.width.px]=\"col?.width\" [style.min-width.px]=\"col?.width\" [style.max-width.px]=\"col?.width\">{{\n        row[col.id] | dataTableInterpolate: col\n      }}</span>\n    </ng-template>\n    <ng-template novoTemplate=\"dateCellTemplate\" let-row let-col=\"col\">\n      <span>{{ row[col.id] | dataTableInterpolate: col | dataTableDateRenderer: col }}</span>\n    </ng-template>\n    <ng-template novoTemplate=\"datetimeCellTemplate\" let-row let-col=\"col\">\n      <span>{{ row[col.id] | dataTableInterpolate: col | dataTableDateTimeRenderer: col }}</span>\n    </ng-template>\n    <ng-template novoTemplate=\"timeCellTemplate\" let-row let-col=\"col\">\n      <span>{{ row[col.id] | dataTableInterpolate: col | dataTableTimeRenderer: col }}</span>\n    </ng-template>\n    <ng-template novoTemplate=\"currencyCellTemplate\" let-row let-col=\"col\">\n      <span>{{ row[col.id] | dataTableInterpolate: col | dataTableCurrencyRenderer: col }}</span>\n    </ng-template>\n    <ng-template novoTemplate=\"bigdecimalCellTemplate\" let-row let-col=\"col\">\n      <span>{{ row[col.id] | dataTableInterpolate: col | dataTableBigDecimalRenderer: col }}</span>\n    </ng-template>\n    <ng-template novoTemplate=\"numberCellTemplate\" let-row let-col=\"col\">\n      <span>{{ row[col.id] | dataTableInterpolate: col | dataTableNumberRenderer: col }}</span>\n    </ng-template>\n    <ng-template novoTemplate=\"percentCellTemplate\" let-row let-col=\"col\">\n      <span>{{ row[col.id] | dataTableInterpolate: col | dataTableNumberRenderer: col:true }}</span>\n    </ng-template>\n    <ng-template novoTemplate=\"linkCellTemplate\" let-row let-col=\"col\">\n      <a\n        [attr.data-feature-id]=\"col?.attributes?.dataFeatureId\"\n        (click)=\"col.handlers?.click({ originalEvent: $event, row: row })\"\n        [style.width.px]=\"col?.width\"\n        [style.min-width.px]=\"col?.width\"\n        [style.max-width.px]=\"col?.width\"\n        >{{ row[col.id] | dataTableInterpolate: col }}</a\n      >\n    </ng-template>\n    <ng-template novoTemplate=\"telCellTemplate\" let-row let-col=\"col\">\n      <a href=\"tel:{{ row[col.id] | dataTableInterpolate: col }}\" [target]=\"col?.attributes?.target\">{{\n        row[col.id] | dataTableInterpolate: col\n      }}</a>\n    </ng-template>\n    <ng-template novoTemplate=\"mailtoCellTemplate\" let-row let-col=\"col\">\n      <a href=\"mailto:{{ row[col.id] | dataTableInterpolate: col }}\" [target]=\"col?.attributes?.target\">{{\n        row[col.id] | dataTableInterpolate: col\n      }}</a>\n    </ng-template>\n    <ng-template novoTemplate=\"buttonCellTemplate\" let-row let-col=\"col\">\n      <p [tooltip]=\"col?.action?.tooltip\" tooltipPosition=\"right\" [attr.data-feature-id]=\"col?.attributes?.dataFeatureId\">\n        <i\n          class=\"bhi-{{ col?.action?.icon }} data-table-icon\"\n          (click)=\"col.handlers?.click({ originalEvent: $event, row: row })\"\n          [class.disabled]=\"isDisabled(col, row)\"\n        ></i>\n      </p>\n    </ng-template>\n    <ng-template novoTemplate=\"dropdownCellTemplate\" let-row let-col=\"col\">\n      <novo-dropdown parentScrollSelector=\".novo-data-table-container\" containerClass=\"novo-data-table-dropdown\">\n        <button type=\"button\" theme=\"dialogue\" [icon]=\"col.action.icon\" inverse>{{ col.label }}</button>\n        <list>\n          <item\n            *ngFor=\"let option of col?.action?.options\"\n            (action)=\"option.handlers.click({ originalEvent: $event?.originalEvent, row: row })\"\n            [disabled]=\"isDisabled(option, row)\"\n          >\n            <span [attr.data-automation-id]=\"option.label\">{{ option.label }}</span>\n          </item>\n        </list>\n      </novo-dropdown>\n    </ng-template>\n    <ng-template novoTemplate=\"defaultNoResultsMessage\">\n      <h4><i class=\"bhi-search-question\"></i> {{ labels.noMatchingRecordsMessage }}</h4>\n    </ng-template>\n    <ng-template novoTemplate=\"defaultEmptyMessage\">\n      <h4><i class=\"bhi-search-question\"></i> {{ labels.emptyTableMessage }}</h4>\n    </ng-template>\n    <ng-template novoTemplate=\"expandedRow\"> You did not provide an \"expandedRow\" template! </ng-template>\n    <ng-template #detailRowTemplate let-row>\n      <div class=\"novo-data-table-detail-row\" [@expand] style=\"overflow: hidden\">\n        <ng-container *ngTemplateOutlet=\"templates['expandedRow']; context: { $implicit: row }\"></ng-container>\n      </div>\n    </ng-template>\n    <!-- CUSTOM CELLS PASSED IN -->\n    <ng-content></ng-content>\n  ",
                     changeDetection: core.ChangeDetectionStrategy.OnPush,
                     providers: [DataTableState]
                 },] }
@@ -8460,6 +8511,7 @@
         displayedColumns: [{ type: core.Input }],
         paginationOptions: [{ type: core.Input }],
         searchOptions: [{ type: core.Input }],
+        selectionOptions: [{ type: core.Input }],
         defaultSort: [{ type: core.Input }],
         name: [{ type: core.Input }],
         allowMultipleFilters: [{ type: core.Input }],
@@ -8469,6 +8521,7 @@
         templates: [{ type: core.Input }],
         fixedHeader: [{ type: core.Input }],
         paginatorDataFeatureId: [{ type: core.Input }],
+        maxSelected: [{ type: core.Input }],
         dataTableService: [{ type: core.Input }],
         rows: [{ type: core.Input }],
         outsideFilter: [{ type: core.Input }],
@@ -26931,7 +26984,7 @@
         { type: core.Component, args: [{
                     selector: 'novo-address',
                     providers: [ADDRESS_VALUE_ACCESSOR],
-                    template: "\n    <span\n      *ngIf=\"!config?.address1?.hidden\"\n      class=\"street-address\"\n      [class.invalid]=\"invalid.address1\"\n      [class.focus]=\"focused.address1\"\n      [class.disabled]=\"disabled.address1\"\n    >\n      <i\n        *ngIf=\"config.address1.required\"\n        class=\"required-indicator address1\"\n        [ngClass]=\"{ 'bhi-circle': !valid.address1, 'bhi-check': valid.address1 }\"\n      >\n      </i>\n      <input\n        [class.maxlength-error]=\"invalidMaxlength.address1\"\n        type=\"text\"\n        id=\"address1\"\n        name=\"address1\"\n        [placeholder]=\"config.address1.label\"\n        [maxlength]=\"config?.address1?.maxlength\"\n        autocomplete=\"shipping street-address address-line-1\"\n        [(ngModel)]=\"model.address1\"\n        (ngModelChange)=\"updateControl()\"\n        (focus)=\"isFocused($event, 'address1')\"\n        (blur)=\"isBlurred($event, 'address1')\"\n        (input)=\"onInput($event, 'address1')\"\n      />\n    </span>\n    <span\n      *ngIf=\"!config?.address2?.hidden\"\n      class=\"apt suite\"\n      [class.invalid]=\"invalid.address2\"\n      [class.focus]=\"focused.address2\"\n      [class.disabled]=\"disabled.address2\"\n    >\n      <i\n        *ngIf=\"config.address2.required\"\n        class=\"required-indicator address2\"\n        [ngClass]=\"{ 'bhi-circle': !valid.address2, 'bhi-check': valid.address2 }\"\n      >\n      </i>\n      <input\n        [class.maxlength-error]=\"invalidMaxlength.address2\"\n        type=\"text\"\n        id=\"address2\"\n        name=\"address2\"\n        [placeholder]=\"config.address2.label\"\n        [maxlength]=\"config?.address2?.maxlength\"\n        autocomplete=\"shipping address-line-2\"\n        [(ngModel)]=\"model.address2\"\n        (ngModelChange)=\"updateControl()\"\n        (focus)=\"isFocused($event, 'address2')\"\n        (blur)=\"isBlurred($event, 'address2')\"\n        (input)=\"onInput($event, 'address2')\"\n      />\n    </span>\n    <span\n      *ngIf=\"!config?.city?.hidden\"\n      class=\"city locality\"\n      [class.invalid]=\"invalid.city\"\n      [class.focus]=\"focused.city\"\n      [class.disabled]=\"disabled.city\"\n    >\n      <i *ngIf=\"config.city.required\" class=\"required-indicator\" [ngClass]=\"{ 'bhi-circle': !valid.city, 'bhi-check': valid.city }\"> </i>\n      <input\n        [class.maxlength-error]=\"invalidMaxlength.city\"\n        type=\"text\"\n        id=\"city\"\n        name=\"city\"\n        [placeholder]=\"config.city.label\"\n        autocomplete=\"shipping city locality\"\n        [maxlength]=\"config?.city?.maxlength\"\n        [(ngModel)]=\"model.city\"\n        (ngModelChange)=\"updateControl()\"\n        (focus)=\"isFocused($event, 'city')\"\n        (blur)=\"isBlurred($event, 'city')\"\n        (input)=\"onInput($event, 'city')\"\n      />\n    </span>\n    <span\n      *ngIf=\"!config?.state?.hidden\"\n      class=\"state region\"\n      [class.invalid]=\"invalid.state\"\n      [class.focus]=\"focused.state\"\n      [class.disabled]=\"disabled.state\"\n      [tooltip]=\"tooltip.state\"\n    >\n      <i *ngIf=\"config.state.required\" class=\"required-indicator\" [ngClass]=\"{ 'bhi-circle': !valid.state, 'bhi-check': valid.state }\"> </i>\n      <novo-picker\n        [config]=\"config?.state?.pickerConfig\"\n        [placeholder]=\"config?.state?.label\"\n        (changed)=\"onStateChange($event)\"\n        autocomplete=\"shipping region\"\n        [(ngModel)]=\"model.state\"\n        [disablePickerInput]=\"disabled.state\"\n      ></novo-picker>\n    </span>\n    <span\n      *ngIf=\"!config?.zip?.hidden\"\n      class=\"zip postal-code\"\n      [class.invalid]=\"invalid.zip\"\n      [class.focus]=\"focused.zip\"\n      [class.disabled]=\"disabled.zip\"\n    >\n      <i *ngIf=\"config.zip.required\" class=\"required-indicator\" [ngClass]=\"{ 'bhi-circle': !valid.zip, 'bhi-check': valid.zip }\"> </i>\n      <input\n        [class.maxlength-error]=\"invalidMaxlength.zip\"\n        type=\"text\"\n        id=\"zip\"\n        name=\"zip\"\n        [placeholder]=\"config.zip.label\"\n        autocomplete=\"shipping postal-code\"\n        [maxlength]=\"config?.zip?.maxlength\"\n        [(ngModel)]=\"model.zip\"\n        (ngModelChange)=\"updateControl()\"\n        (focus)=\"isFocused($event, 'zip')\"\n        (blur)=\"isBlurred($event, 'zip')\"\n        (input)=\"onInput($event, 'zip')\"\n      />\n    </span>\n    <span\n      *ngIf=\"!config?.countryID?.hidden\"\n      class=\"country-name\"\n      [class.invalid]=\"invalid.countryID\"\n      [class.focus]=\"focused.countryID\"\n      [class.disabled]=\"disabled.countryID\"\n    >\n      <i\n        *ngIf=\"config.countryID.required\"\n        class=\"required-indicator\"\n        [ngClass]=\"{ 'bhi-circle': !valid.countryID, 'bhi-check': valid.countryID }\"\n      >\n      </i>\n      <novo-picker\n        [config]=\"config?.countryID?.pickerConfig\"\n        [placeholder]=\"config.countryID.label\"\n        (changed)=\"onCountryChange($event)\"\n        autocomplete=\"shipping country\"\n        [(ngModel)]=\"model.countryID\"\n        [disablePickerInput]=\"disabled.countryID\"\n      ></novo-picker>\n    </span>\n  "
+                    template: "\n    <span\n      *ngIf=\"!config?.address1?.hidden\"\n      class=\"street-address\"\n      [class.invalid]=\"invalid.address1\"\n      [class.focus]=\"focused.address1\"\n      [class.disabled]=\"disabled.address1\"\n    >\n      <i\n        *ngIf=\"config.address1.required\"\n        class=\"required-indicator address1\"\n        [ngClass]=\"{ 'bhi-circle': !valid.address1, 'bhi-check': valid.address1 }\"\n      >\n      </i>\n      <input\n        [class.maxlength-error]=\"invalidMaxlength.address1\"\n        type=\"text\"\n        id=\"address1\"\n        name=\"address1\"\n        [placeholder]=\"config.address1.label\"\n        [maxlength]=\"config?.address1?.maxlength\"\n        autocomplete=\"shipping street-address address-line-1\"\n        [(ngModel)]=\"model.address1\"\n        (ngModelChange)=\"updateControl()\"\n        (focus)=\"isFocused($event, 'address1')\"\n        (blur)=\"isBlurred($event, 'address1')\"\n        (input)=\"onInput($event, 'address1')\"\n        [disabled]=\"disabled.address1\"\n      />\n    </span>\n    <span\n      *ngIf=\"!config?.address2?.hidden\"\n      class=\"apt suite\"\n      [class.invalid]=\"invalid.address2\"\n      [class.focus]=\"focused.address2\"\n      [class.disabled]=\"disabled.address2\"\n    >\n      <i\n        *ngIf=\"config.address2.required\"\n        class=\"required-indicator address2\"\n        [ngClass]=\"{ 'bhi-circle': !valid.address2, 'bhi-check': valid.address2 }\"\n      >\n      </i>\n      <input\n        [class.maxlength-error]=\"invalidMaxlength.address2\"\n        type=\"text\"\n        id=\"address2\"\n        name=\"address2\"\n        [placeholder]=\"config.address2.label\"\n        [maxlength]=\"config?.address2?.maxlength\"\n        autocomplete=\"shipping address-line-2\"\n        [(ngModel)]=\"model.address2\"\n        (ngModelChange)=\"updateControl()\"\n        (focus)=\"isFocused($event, 'address2')\"\n        (blur)=\"isBlurred($event, 'address2')\"\n        (input)=\"onInput($event, 'address2')\"\n        [disabled]=\"disabled.address2\"\n      />\n    </span>\n    <span\n      *ngIf=\"!config?.city?.hidden\"\n      class=\"city locality\"\n      [class.invalid]=\"invalid.city\"\n      [class.focus]=\"focused.city\"\n      [class.disabled]=\"disabled.city\"\n    >\n      <i *ngIf=\"config.city.required\" class=\"required-indicator\" [ngClass]=\"{ 'bhi-circle': !valid.city, 'bhi-check': valid.city }\"> </i>\n      <input\n        [class.maxlength-error]=\"invalidMaxlength.city\"\n        type=\"text\"\n        id=\"city\"\n        name=\"city\"\n        [placeholder]=\"config.city.label\"\n        autocomplete=\"shipping city locality\"\n        [maxlength]=\"config?.city?.maxlength\"\n        [(ngModel)]=\"model.city\"\n        (ngModelChange)=\"updateControl()\"\n        (focus)=\"isFocused($event, 'city')\"\n        (blur)=\"isBlurred($event, 'city')\"\n        (input)=\"onInput($event, 'city')\"\n        [disabled]=\"disabled.city\"\n      />\n    </span>\n    <span\n      *ngIf=\"!config?.state?.hidden\"\n      class=\"state region\"\n      [class.invalid]=\"invalid.state\"\n      [class.focus]=\"focused.state\"\n      [class.disabled]=\"disabled.state\"\n      [tooltip]=\"tooltip.state\"\n    >\n      <i *ngIf=\"config.state.required\" class=\"required-indicator\" [ngClass]=\"{ 'bhi-circle': !valid.state, 'bhi-check': valid.state }\"> </i>\n      <novo-picker\n        [config]=\"config?.state?.pickerConfig\"\n        [placeholder]=\"config?.state?.label\"\n        (changed)=\"onStateChange($event)\"\n        autocomplete=\"shipping region\"\n        [(ngModel)]=\"model.state\"\n        [disablePickerInput]=\"disabled.state\"\n      ></novo-picker>\n    </span>\n    <span\n      *ngIf=\"!config?.zip?.hidden\"\n      class=\"zip postal-code\"\n      [class.invalid]=\"invalid.zip\"\n      [class.focus]=\"focused.zip\"\n      [class.disabled]=\"disabled.zip\"\n    >\n      <i *ngIf=\"config.zip.required\" class=\"required-indicator\" [ngClass]=\"{ 'bhi-circle': !valid.zip, 'bhi-check': valid.zip }\"> </i>\n      <input\n        [class.maxlength-error]=\"invalidMaxlength.zip\"\n        type=\"text\"\n        id=\"zip\"\n        name=\"zip\"\n        [placeholder]=\"config.zip.label\"\n        autocomplete=\"shipping postal-code\"\n        [maxlength]=\"config?.zip?.maxlength\"\n        [(ngModel)]=\"model.zip\"\n        (ngModelChange)=\"updateControl()\"\n        (focus)=\"isFocused($event, 'zip')\"\n        (blur)=\"isBlurred($event, 'zip')\"\n        (input)=\"onInput($event, 'zip')\"\n        [disabled]=\"disabled.zip\"\n      />\n    </span>\n    <span\n      *ngIf=\"!config?.countryID?.hidden\"\n      class=\"country-name\"\n      [class.invalid]=\"invalid.countryID\"\n      [class.focus]=\"focused.countryID\"\n      [class.disabled]=\"disabled.countryID\"\n    >\n      <i\n        *ngIf=\"config.countryID.required\"\n        class=\"required-indicator\"\n        [ngClass]=\"{ 'bhi-circle': !valid.countryID, 'bhi-check': valid.countryID }\"\n      >\n      </i>\n      <novo-picker\n        [config]=\"config?.countryID?.pickerConfig\"\n        [placeholder]=\"config.countryID.label\"\n        (changed)=\"onCountryChange($event)\"\n        autocomplete=\"shipping country\"\n        [(ngModel)]=\"model.countryID\"\n        [disablePickerInput]=\"disabled.countryID\"\n      ></novo-picker>\n    </span>\n  "
                 },] }
     ];
     NovoAddressElement.ctorParameters = function () { return [
@@ -28658,6 +28711,7 @@
             _this.dataTable = dataTable;
             _this.ref = ref;
             _this.role = 'gridcell';
+            _this.maxSelected = undefined;
             _this.checked = false;
             renderer.setAttribute(elementRef.nativeElement, 'data-automation-id', "novo-checkbox-column-" + columnDef.cssClassFriendlyName);
             renderer.addClass(elementRef.nativeElement, "novo-checkbox-column-" + columnDef.cssClassFriendlyName);
@@ -28672,11 +28726,23 @@
             });
             return _this;
         }
+        Object.defineProperty(NovoDataTableCheckboxCell.prototype, "isAtLimit", {
+            get: function () {
+                return this.maxSelected && this.dataTable.state.selectedRows.size >= this.maxSelected && !this.checked;
+            },
+            enumerable: false,
+            configurable: true
+        });
         NovoDataTableCheckboxCell.prototype.ngOnInit = function () {
             this.checked = this.dataTable.isSelected(this.row);
         };
         NovoDataTableCheckboxCell.prototype.onClick = function () {
-            this.dataTable.selectRow(this.row);
+            if (!this.isAtLimit) {
+                this.dataTable.selectRow(this.row);
+            }
+        };
+        NovoDataTableCheckboxCell.prototype.getTooltip = function () {
+            return (this.isAtLimit) ? 'More than ' + this.maxSelected + ' items are not able to be selected at one time' : '';
         };
         NovoDataTableCheckboxCell.prototype.ngOnDestroy = function () {
             if (this.selectionSubscription) {
@@ -28691,7 +28757,7 @@
     NovoDataTableCheckboxCell.decorators = [
         { type: core.Component, args: [{
                     selector: 'novo-data-table-checkbox-cell',
-                    template: "\n    <div class=\"data-table-checkbox\" (click)=\"onClick()\">\n      <input type=\"checkbox\" [checked]=\"checked\">\n      <label>\n        <i [class.bhi-checkbox-empty]=\"!checked\"\n          [class.bhi-checkbox-filled]=\"checked\"></i>\n      </label>\n    </div>\n    ",
+                    template: "\n    <div class=\"data-table-checkbox\" (click)=\"onClick()\" [tooltip]=\"getTooltip()\" tooltipPosition=\"right\">\n      <input type=\"checkbox\" [checked]=\"checked\">\n      <label>\n        <i [class.bhi-checkbox-disabled]=\"isAtLimit\"\n          [class.bhi-checkbox-empty]=\"!checked\"\n          [class.bhi-checkbox-filled]=\"checked\"></i>\n      </label>\n    </div>\n    ",
                     changeDetection: core.ChangeDetectionStrategy.OnPush
                 },] }
     ];
@@ -28704,7 +28770,8 @@
     ]; };
     NovoDataTableCheckboxCell.propDecorators = {
         role: [{ type: core.HostBinding, args: ['attr.role',] }],
-        row: [{ type: core.Input }]
+        row: [{ type: core.Input }],
+        maxSelected: [{ type: core.Input }]
     };
 
     var NovoDataTableExpandCell = /** @class */ (function (_super) {
@@ -28850,13 +28917,210 @@
         role: [{ type: core.HostBinding, args: ['attr.role',] }]
     };
 
+    // NG2
+    var NovoToastElement = /** @class */ (function () {
+        function NovoToastElement(sanitizer) {
+            this.sanitizer = sanitizer;
+            this.theme = 'danger';
+            this.icon = 'caution';
+            this.hasDialogue = false;
+            this.isCloseable = false;
+            this.closed = new core.EventEmitter();
+            this.show = false;
+            this.animate = false;
+            this.parent = null;
+            this.launched = false;
+        }
+        Object.defineProperty(NovoToastElement.prototype, "message", {
+            set: function (m) {
+                this._message = this.sanitizer.bypassSecurityTrustHtml(m);
+            },
+            enumerable: false,
+            configurable: true
+        });
+        NovoToastElement.prototype.ngOnInit = function () {
+            if (!this.launched) {
+                // clear position and time
+                this.position = null;
+                this.time = null;
+                // set icon and styling
+                this.iconClass = "bhi-" + this.icon;
+                this.alertTheme = this.theme + " toast-container embedded";
+                if (this.hasDialogue) {
+                    this.alertTheme += ' dialogue';
+                }
+            }
+        };
+        NovoToastElement.prototype.ngOnChanges = function (changes) {
+            // set icon and styling
+            this.iconClass = "bhi-" + this.icon;
+            this.alertTheme = this.theme + " toast-container embedded";
+            if (this.hasDialogue) {
+                this.alertTheme += ' dialogue';
+            }
+        };
+        NovoToastElement.prototype.clickHandler = function (event) {
+            if (!this.isCloseable) {
+                if (event) {
+                    event.stopPropagation();
+                    event.preventDefault();
+                }
+                if (this.parent) {
+                    this.parent.hide(this);
+                }
+                else {
+                    this.closed.emit({ closed: true });
+                }
+            }
+        };
+        NovoToastElement.prototype.close = function (event) {
+            if (event) {
+                event.stopPropagation();
+                event.preventDefault();
+            }
+            if (this.parent) {
+                this.parent.hide(this);
+            }
+            else {
+                this.closed.emit({ closed: true });
+            }
+        };
+        return NovoToastElement;
+    }());
+    NovoToastElement.decorators = [
+        { type: core.Component, args: [{
+                    selector: 'novo-toast',
+                    host: {
+                        '[class]': 'alertTheme',
+                        '[class.show]': 'show',
+                        '[class.animate]': 'animate',
+                        '[class.embedded]': 'embedded',
+                        '(click)': '!isCloseable && clickHandler($event)',
+                    },
+                    template: "\n        <div class=\"toast-icon\">\n            <i [ngClass]=\"iconClass\"></i>\n        </div>\n        <div class=\"toast-content\">\n            <h5 *ngIf=\"title\">{{title}}</h5>\n            <p *ngIf=\"_message\" [class.message-only]=\"!title\" [innerHtml]=\"_message\"></p>\n            <div *ngIf=\"link\" class=\"link-generated\">\n                <input type=\"text\" [value]=\"link\" onfocus=\"this.select();\"/>\n            </div>\n            <div class=\"dialogue\">\n                <ng-content></ng-content>\n            </div>\n        </div>\n        <div class=\"close-icon\" *ngIf=\"isCloseable\" (click)=\"close($event)\">\n            <i class=\"bhi-times\"></i>\n        </div>\n    "
+                },] }
+    ];
+    NovoToastElement.ctorParameters = function () { return [
+        { type: platformBrowser.DomSanitizer }
+    ]; };
+    NovoToastElement.propDecorators = {
+        theme: [{ type: core.Input }],
+        icon: [{ type: core.Input }],
+        title: [{ type: core.Input }],
+        hasDialogue: [{ type: core.Input }],
+        link: [{ type: core.Input }],
+        isCloseable: [{ type: core.Input }],
+        message: [{ type: core.Input }],
+        closed: [{ type: core.Output }]
+    };
+
+    // NG2
+    var NovoToastService = /** @class */ (function () {
+        function NovoToastService(componentUtils) {
+            this.componentUtils = componentUtils;
+            this.references = [];
+            this.icons = { default: 'bell', success: 'check', info: 'info', warning: 'warning', danger: 'remove' };
+            this.defaults = { hideDelay: 3500, position: 'growlTopRight', theme: 'default' };
+        }
+        Object.defineProperty(NovoToastService.prototype, "parentViewContainer", {
+            set: function (view) {
+                this._parentViewContainer = view;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        NovoToastService.prototype.alert = function (options, toastElement) {
+            var _this = this;
+            if (toastElement === void 0) { toastElement = NovoToastElement; }
+            return new Promise(function (resolve) {
+                if (!_this._parentViewContainer) {
+                    console.error('No parent view container specified for the ToastService. Set it inside your main application. \nthis.toastService.parentViewContainer = view (ViewContainerRef)');
+                    return;
+                }
+                var toast = _this.componentUtils.append(toastElement, _this._parentViewContainer);
+                _this.references.push(toast);
+                _this.handleAlert(toast.instance, options);
+                resolve(toast);
+            });
+        };
+        NovoToastService.prototype.isVisible = function (toast) {
+            return toast.show;
+        };
+        NovoToastService.prototype.hide = function (toast) {
+            var _this = this;
+            toast.animate = false;
+            setTimeout(function () {
+                toast.show = false;
+                var REF = _this.references.filter(function (x) { return x.instance === toast; })[0];
+                if (REF) {
+                    _this.references.splice(_this.references.indexOf(REF), 1);
+                    REF.destroy();
+                }
+            }, 300);
+        };
+        NovoToastService.prototype.handleAlert = function (toast, options) {
+            var _this = this;
+            this.setToastOnSession(toast, options);
+            setTimeout(function () {
+                _this.show(toast);
+            }, 20);
+            if (!toast.isCloseable) {
+                this.toastTimer(toast);
+            }
+        };
+        NovoToastService.prototype.setToastOnSession = function (toast, opts) {
+            var OPTIONS = typeof opts === 'object' ? opts : {};
+            toast.parent = this;
+            toast.title = OPTIONS.title || '';
+            toast.message = OPTIONS.message || '';
+            toast.hideDelay = OPTIONS.hideDelay || this.defaults.hideDelay;
+            toast.link = OPTIONS.link || '';
+            toast.isCloseable = OPTIONS.isCloseable || false;
+            var CUSTOM_CLASS = OPTIONS.customClass || '';
+            var ALERT_STYLE = OPTIONS.theme || this.defaults.theme;
+            var ALERT_POSITION = OPTIONS.position || this.defaults.position;
+            var ALERT_ICON = OPTIONS.icon || this.icons.default;
+            toast.iconClass = "bhi-" + ALERT_ICON;
+            toast.launched = true;
+            toast.alertTheme = ALERT_STYLE + " " + ALERT_POSITION + " " + CUSTOM_CLASS + " toast-container launched";
+        };
+        NovoToastService.prototype.show = function (toast) {
+            toast.show = true;
+            setTimeout(addClass, 25);
+            /**
+             * Adds animate class to be called after a timeout
+             **/
+            function addClass() {
+                toast.animate = true;
+            }
+        };
+        NovoToastService.prototype.toastTimer = function (toast) {
+            var _this = this;
+            if (toast.hideDelay < 0) {
+                return;
+            }
+            setTimeout(function () {
+                _this.hide(toast);
+            }, toast.hideDelay);
+        };
+        return NovoToastService;
+    }());
+    NovoToastService.decorators = [
+        { type: core.Injectable }
+    ];
+    NovoToastService.ctorParameters = function () { return [
+        { type: ComponentUtils }
+    ]; };
+
     var NovoDataTableCheckboxHeaderCell = /** @class */ (function (_super) {
         __extends(NovoDataTableCheckboxHeaderCell, _super);
-        function NovoDataTableCheckboxHeaderCell(columnDef, elementRef, renderer, dataTable, ref) {
+        function NovoDataTableCheckboxHeaderCell(columnDef, elementRef, renderer, dataTable, ref, toaster) {
             var _this = _super.call(this, columnDef, elementRef) || this;
             _this.dataTable = dataTable;
             _this.ref = ref;
+            _this.toaster = toaster;
             _this.role = 'columnheader';
+            _this.maxSelected = undefined;
             _this.checked = false;
             renderer.setAttribute(elementRef.nativeElement, 'data-automation-id', "novo-checkbox-column-header-" + columnDef.cssClassFriendlyName);
             renderer.addClass(elementRef.nativeElement, "novo-checkbox-column-" + columnDef.cssClassFriendlyName);
@@ -28869,6 +29133,8 @@
                 if (event.isPageSizeChange) {
                     _this.checked = false;
                     _this.dataTable.selectRows(false);
+                    _this.dataTable.state.checkRetainment('pageSize');
+                    _this.dataTable.state.reset(false, true);
                 }
                 else {
                     _this.checked = _this.dataTable.allCurrentRowsSelected();
@@ -28881,6 +29147,13 @@
             });
             return _this;
         }
+        Object.defineProperty(NovoDataTableCheckboxHeaderCell.prototype, "isAtLimit", {
+            get: function () {
+                return this.maxSelected && this.dataTable.state.selectedRows.size + this.dataTable.dataSource.data.length > this.maxSelected && !this.checked;
+            },
+            enumerable: false,
+            configurable: true
+        });
         NovoDataTableCheckboxHeaderCell.prototype.ngOnDestroy = function () {
             if (this.selectionSubscription) {
                 this.selectionSubscription.unsubscribe();
@@ -28893,7 +29166,17 @@
             }
         };
         NovoDataTableCheckboxHeaderCell.prototype.onClick = function () {
-            this.dataTable.selectRows(!this.checked);
+            if (this.isAtLimit) {
+                this.toaster.alert({
+                    theme: 'danger',
+                    position: 'fixedTop',
+                    message: 'Error, more than 500 items are not able to be selected at one time',
+                    icon: 'caution',
+                });
+            }
+            else {
+                this.dataTable.selectRows(!this.checked);
+            }
         };
         return NovoDataTableCheckboxHeaderCell;
     }(table.CdkHeaderCell));
@@ -28909,10 +29192,12 @@
         { type: core.ElementRef },
         { type: core.Renderer2 },
         { type: NovoDataTable },
-        { type: core.ChangeDetectorRef }
+        { type: core.ChangeDetectorRef },
+        { type: NovoToastService }
     ]; };
     NovoDataTableCheckboxHeaderCell.propDecorators = {
-        role: [{ type: core.HostBinding, args: ['attr.role',] }]
+        role: [{ type: core.HostBinding, args: ['attr.role',] }],
+        maxSelected: [{ type: core.Input }]
     };
 
     var NovoDataTableHeaderCell = /** @class */ (function (_super) {
@@ -29028,10 +29313,12 @@
             this.resetSubscription.unsubscribe();
         };
         NovoDataTablePagination.prototype.selectPage = function (page) {
+            this.state.checkRetainment('page');
             this.page = page;
             this.emitPageEvent();
         };
         NovoDataTablePagination.prototype.nextPage = function () {
+            this.state.checkRetainment('page');
             if (!this.hasNextPage()) {
                 return;
             }
@@ -29040,6 +29327,7 @@
             this.emitPageEvent();
         };
         NovoDataTablePagination.prototype.previousPage = function () {
+            this.state.checkRetainment('page');
             if (!this.hasPreviousPage()) {
                 return;
             }
@@ -30307,7 +30595,7 @@
                         '[class.novo-expansion-panel-spacing]': '_hasSpacing()',
                         '[class.novo-expansion-panel-padding]': 'padding',
                     },
-                    styles: ["@-webkit-keyframes rotate{0%{transform:rotate(0deg)}75%{transform:rotate(200deg)}to{transform:rotate(180deg)}}@-webkit-keyframes half-rotate{0%{transform:rotate(45deg)}75%{transform:rotate(100deg)}to{transform:rotate(90deg)}}@-webkit-keyframes rotateBack{0%{transform:rotate(90deg)}to{transform:rotate(0deg)}}@-webkit-keyframes show{0%{opacity:0;transform:translateX(-100%)}75%{transform:translateX(0)}to{opacity:1;transform:translateX(0)}}@keyframes rotate{0%{transform:rotate(0deg)}75%{transform:rotate(200deg)}to{transform:rotate(180deg)}}@keyframes half-rotate{0%{transform:rotate(45deg)}75%{transform:rotate(100deg)}to{transform:rotate(90deg)}}@keyframes rotateBack{0%{transform:rotate(90deg)}to{transform:rotate(0deg)}}@keyframes show{0%{opacity:0;transform:translateX(-100%)}75%{transform:translateX(0)}to{opacity:1;transform:translateX(0)}}.novo-expansion-panel{background:#fff;color:#3d464d}.novo-action-row{border-top-color:#3d464d}.novo-expansion-panel:not(.novo-expanded) .novo-expansion-panel-header:not([aria-disabled=true]).cdk-keyboard-focused,.novo-expansion-panel:not(.novo-expanded) .novo-expansion-panel-header:not([aria-disabled=true]).cdk-program-focused,.novo-expansion-panel:not(.novo-expanded) .novo-expansion-panel-header:not([aria-disabled=true]):hover{background:rgba(0,0,0,.04)}.novo-expansion-panel-header-title{color:#3d464d}.novo-expansion-indicator:after,.novo-expansion-panel-header-description{color:#999}.novo-expansion-panel-header[aria-disabled=true]{color:#999;pointer-events:none}.novo-expansion-panel-header[aria-disabled=true] .novo-expansion-panel-header-description,.novo-expansion-panel-header[aria-disabled=true] .novo-expansion-panel-header-title{color:inherit}.novo-expansion-panel.novo-expanded[theme=company]{border-top:3px solid #39d}.novo-expansion-panel.novo-expanded[theme=candidate]{border-top:3px solid #4b7}.novo-expansion-panel.novo-expanded[theme=navigation]{border-top:3px solid #2f384f}.novo-expansion-panel.novo-expanded[theme=lead]{border-top:3px solid #a69}.novo-expansion-panel.novo-expanded[theme=contact]{border-top:3px solid #fa4}.novo-expansion-panel.novo-expanded[theme=opportunity]{border-top:3px solid #625}.novo-expansion-panel.novo-expanded[theme=job]{border-top:3px solid #b56}.novo-expansion-panel.novo-expanded[theme=earnCode],.novo-expansion-panel.novo-expanded[theme=jobCode]{border-top:3px solid #696d79}.novo-expansion-panel.novo-expanded[theme=sendout]{border-top:3px solid #747884}.novo-expansion-panel.novo-expanded[theme=placement]{border-top:3px solid #0b344f}.novo-expansion-panel.novo-expanded[theme=corporateuser],.novo-expansion-panel.novo-expanded[theme=credential],.novo-expansion-panel.novo-expanded[theme=distributionList],.novo-expansion-panel.novo-expanded[theme=task],.novo-expansion-panel.novo-expanded[theme=user]{border-top:3px solid #4f5361}.novo-expansion-panel.novo-expanded[theme=aqua]{border-top:3px solid #3bafda}.novo-expansion-panel.novo-expanded[theme=ocean]{border-top:3px solid #4a89dc}.novo-expansion-panel.novo-expanded[theme=mint]{border-top:3px solid #37bc9b}.novo-expansion-panel.novo-expanded[theme=grass]{border-top:3px solid #8cc152}.novo-expansion-panel.novo-expanded[theme=sunflower]{border-top:3px solid #f6b042}.novo-expansion-panel.novo-expanded[theme=bittersweet]{border-top:3px solid #eb6845}.novo-expansion-panel.novo-expanded[theme=grapefruit]{border-top:3px solid #da4453}.novo-expansion-panel.novo-expanded[theme=carnation]{border-top:3px solid #d770ad}.novo-expansion-panel.novo-expanded[theme=lavender]{border-top:3px solid #967adc}.novo-expansion-panel.novo-expanded[theme=positive]{border-top:3px solid #4a89dc}.novo-expansion-panel.novo-expanded[theme=success]{border-top:3px solid #8cc152}.novo-expansion-panel.novo-expanded[theme=negative]{border-top:3px solid #da4453}.novo-expansion-panel.novo-expanded[theme=warning]{border-top:3px solid #f6b042}.novo-expansion-panel.novo-expanded[theme=black]{border-top:3px solid #000}.novo-expansion-panel.novo-expanded[theme=dark]{border-top:3px solid #3d464d}.novo-expansion-panel.novo-expanded[theme=pulse]{border-top:3px solid #3bafda}.novo-expansion-panel.novo-expanded[theme=neutral]{border-top:3px solid #4f5361}.novo-expansion-panel.novo-expanded[theme=navy]{border-top:3px solid #0d2d42}.novo-expansion-panel.novo-expanded[theme=contract]{border-top:3px solid #454ea0}.novo-expansion-panel.novo-expanded[theme=mountain]{border-top:3px solid #9678b6}.novo-expansion-panel.novo-expanded[theme=billableCharge],.novo-expansion-panel.novo-expanded[theme=invoiceStatement],.novo-expansion-panel.novo-expanded[theme=payableCharge]{border-top:3px solid #696d79}.novo-expansion-panel.novo-expanded[theme=submission]{border-top:3px solid #a9adbb}.novo-expansion-panel.novo-expanded[theme=note]{border-top:3px solid #747884}.novo-expansion-panel.novo-expanded[theme=ash]{border-top:3px solid #a0a0a0}.novo-expansion-panel.novo-expanded[theme=slate]{border-top:3px solid #707070}.novo-expansion-panel.novo-expanded[theme=charcoal]{border-top:3px solid #282828}.novo-expansion-panel.novo-expanded[theme=background]{border-top:3px solid #f4f4f4}.novo-expansion-panel.novo-expanded[theme=background-dark]{border-top:3px solid #e2e2e2}.novo-expansion-panel.novo-expanded[theme=white]{border-top:3px solid #fff}.novo-expansion-panel.novo-expanded[theme=grey]{border-top:3px solid #999}.novo-expansion-panel.novo-expanded[theme=off-white]{border-top:3px solid #f4f4f4}.novo-expansion-panel.novo-expanded[theme=light]{border-top:3px solid #d9dadc}.novo-expansion-panel.novo-expanded[theme=empty]{border-top:3px solid #cccdcc}.novo-expansion-panel.novo-expanded[theme=sand]{border-top:3px solid #f4f4f4}.novo-expansion-panel.novo-expanded[theme=silver]{border-top:3px solid #e2e2e2}.novo-expansion-panel.novo-expanded[theme=stone]{border-top:3px solid #bebebe}.novo-expansion-panel{box-shadow:0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12);box-sizing:content-box;display:block;margin:0 16px;transition:margin 225ms ease-in-out}.novo-expansion-panel.novo-expanded{margin:16px 4px}.novo-expansion-panel.novo-expanded:first-child{margin-top:0}.novo-expansion-panel.novo-expanded:last-child{margin-bottom:0}.novo-expansion-panel-content{overflow:hidden}.novo-expansion-panel-content.novo-expanded{overflow:visible}.novo-expansion-panel-padding .novo-expansion-panel-body{padding:0 24px 16px}.novo-accordion .novo-expansion-panel-spacing:first-child{margin-top:0}.novo-accordion .novo-expansion-panel-spacing:last-child{margin-bottom:0}.novo-action-row{border-top-style:solid;border-top-width:1px;display:flex;flex-direction:row;justify-content:flex-end;padding:16px 8px 16px 24px}.novo-action-row button.novo-button{margin-left:8px}[dir=rtl] .novo-action-row button.novo-button{margin-left:0;margin-right:8px}"]
+                    styles: ["@-webkit-keyframes rotate{0%{transform:rotate(0deg)}75%{transform:rotate(200deg)}to{transform:rotate(180deg)}}@-webkit-keyframes half-rotate{0%{transform:rotate(45deg)}75%{transform:rotate(100deg)}to{transform:rotate(90deg)}}@-webkit-keyframes rotateBack{0%{transform:rotate(90deg)}to{transform:rotate(0deg)}}@-webkit-keyframes show{0%{opacity:0;transform:translateX(-100%)}75%{transform:translateX(0)}to{opacity:1;transform:translateX(0)}}@keyframes rotate{0%{transform:rotate(0deg)}75%{transform:rotate(200deg)}to{transform:rotate(180deg)}}@keyframes half-rotate{0%{transform:rotate(45deg)}75%{transform:rotate(100deg)}to{transform:rotate(90deg)}}@keyframes rotateBack{0%{transform:rotate(90deg)}to{transform:rotate(0deg)}}@keyframes show{0%{opacity:0;transform:translateX(-100%)}75%{transform:translateX(0)}to{opacity:1;transform:translateX(0)}}.novo-expansion-panel{background:#fff;color:#3d464d}.novo-action-row{border-top-color:#3d464d}.novo-expansion-panel:not(.novo-expanded) .novo-expansion-panel-header:not([aria-disabled=true]).cdk-keyboard-focused,.novo-expansion-panel:not(.novo-expanded) .novo-expansion-panel-header:not([aria-disabled=true]).cdk-program-focused,.novo-expansion-panel:not(.novo-expanded) .novo-expansion-panel-header:not([aria-disabled=true]):hover{background:rgba(0,0,0,.04)}.novo-expansion-panel-header-title{color:#3d464d}.novo-expansion-indicator:after,.novo-expansion-panel-header-description{color:#999}.novo-expansion-panel-header[aria-disabled=true]{color:#999;pointer-events:none}.novo-expansion-panel-header[aria-disabled=true] .novo-expansion-panel-header-description,.novo-expansion-panel-header[aria-disabled=true] .novo-expansion-panel-header-title{color:inherit}.novo-expansion-panel.novo-expanded[theme=company]{border-top:3px solid #39d}.novo-expansion-panel.novo-expanded[theme=candidate]{border-top:3px solid #4b7}.novo-expansion-panel.novo-expanded[theme=navigation]{border-top:3px solid #2f384f}.novo-expansion-panel.novo-expanded[theme=lead]{border-top:3px solid #a69}.novo-expansion-panel.novo-expanded[theme=contact]{border-top:3px solid #fa4}.novo-expansion-panel.novo-expanded[theme=opportunity]{border-top:3px solid #625}.novo-expansion-panel.novo-expanded[theme=job]{border-top:3px solid #b56}.novo-expansion-panel.novo-expanded[theme=earnCode],.novo-expansion-panel.novo-expanded[theme=jobCode]{border-top:3px solid #696d79}.novo-expansion-panel.novo-expanded[theme=sendout]{border-top:3px solid #747884}.novo-expansion-panel.novo-expanded[theme=placement]{border-top:3px solid #0b344f}.novo-expansion-panel.novo-expanded[theme=corporateuser],.novo-expansion-panel.novo-expanded[theme=credential],.novo-expansion-panel.novo-expanded[theme=distributionList],.novo-expansion-panel.novo-expanded[theme=task],.novo-expansion-panel.novo-expanded[theme=user]{border-top:3px solid #4f5361}.novo-expansion-panel.novo-expanded[theme=aqua]{border-top:3px solid #3bafda}.novo-expansion-panel.novo-expanded[theme=ocean]{border-top:3px solid #4a89dc}.novo-expansion-panel.novo-expanded[theme=mint]{border-top:3px solid #37bc9b}.novo-expansion-panel.novo-expanded[theme=grass]{border-top:3px solid #8cc152}.novo-expansion-panel.novo-expanded[theme=sunflower]{border-top:3px solid #f6b042}.novo-expansion-panel.novo-expanded[theme=bittersweet]{border-top:3px solid #eb6845}.novo-expansion-panel.novo-expanded[theme=grapefruit]{border-top:3px solid #da4453}.novo-expansion-panel.novo-expanded[theme=carnation]{border-top:3px solid #d770ad}.novo-expansion-panel.novo-expanded[theme=lavender]{border-top:3px solid #967adc}.novo-expansion-panel.novo-expanded[theme=positive]{border-top:3px solid #4a89dc}.novo-expansion-panel.novo-expanded[theme=success]{border-top:3px solid #8cc152}.novo-expansion-panel.novo-expanded[theme=negative]{border-top:3px solid #da4453}.novo-expansion-panel.novo-expanded[theme=warning]{border-top:3px solid #f6b042}.novo-expansion-panel.novo-expanded[theme=black]{border-top:3px solid #000}.novo-expansion-panel.novo-expanded[theme=dark]{border-top:3px solid #3d464d}.novo-expansion-panel.novo-expanded[theme=pulse]{border-top:3px solid #3bafda}.novo-expansion-panel.novo-expanded[theme=neutral]{border-top:3px solid #4f5361}.novo-expansion-panel.novo-expanded[theme=navy]{border-top:3px solid #0d2d42}.novo-expansion-panel.novo-expanded[theme=contract]{border-top:3px solid #454ea0}.novo-expansion-panel.novo-expanded[theme=mountain]{border-top:3px solid #9678b6}.novo-expansion-panel.novo-expanded[theme=billableCharge],.novo-expansion-panel.novo-expanded[theme=invoiceStatement],.novo-expansion-panel.novo-expanded[theme=payableCharge]{border-top:3px solid #696d79}.novo-expansion-panel.novo-expanded[theme=submission]{border-top:3px solid #a9adbb}.novo-expansion-panel.novo-expanded[theme=note]{border-top:3px solid #747884}.novo-expansion-panel.novo-expanded[theme=ash]{border-top:3px solid #a0a0a0}.novo-expansion-panel.novo-expanded[theme=slate]{border-top:3px solid #707070}.novo-expansion-panel.novo-expanded[theme=charcoal]{border-top:3px solid #282828}.novo-expansion-panel.novo-expanded[theme=jobShift]{border-top:3px solid #454ea0}.novo-expansion-panel.novo-expanded[theme=background]{border-top:3px solid #f4f4f4}.novo-expansion-panel.novo-expanded[theme=background-dark]{border-top:3px solid #e2e2e2}.novo-expansion-panel.novo-expanded[theme=white]{border-top:3px solid #fff}.novo-expansion-panel.novo-expanded[theme=grey]{border-top:3px solid #999}.novo-expansion-panel.novo-expanded[theme=off-white]{border-top:3px solid #f4f4f4}.novo-expansion-panel.novo-expanded[theme=light]{border-top:3px solid #d9dadc}.novo-expansion-panel.novo-expanded[theme=empty]{border-top:3px solid #cccdcc}.novo-expansion-panel.novo-expanded[theme=sand]{border-top:3px solid #f4f4f4}.novo-expansion-panel.novo-expanded[theme=silver]{border-top:3px solid #e2e2e2}.novo-expansion-panel.novo-expanded[theme=stone]{border-top:3px solid #bebebe}.novo-expansion-panel{box-shadow:0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12);box-sizing:content-box;display:block;margin:0 16px;transition:margin 225ms ease-in-out}.novo-expansion-panel.novo-expanded{margin:16px 4px}.novo-expansion-panel.novo-expanded:first-child{margin-top:0}.novo-expansion-panel.novo-expanded:last-child{margin-bottom:0}.novo-expansion-panel-content{overflow:hidden}.novo-expansion-panel-content.novo-expanded{overflow:visible}.novo-expansion-panel-padding .novo-expansion-panel-body{padding:0 24px 16px}.novo-accordion .novo-expansion-panel-spacing:first-child{margin-top:0}.novo-accordion .novo-expansion-panel-spacing:last-child{margin-bottom:0}.novo-action-row{border-top-style:solid;border-top-width:1px;display:flex;flex-direction:row;justify-content:flex-end;padding:16px 8px 16px 24px}.novo-action-row button.novo-button{margin-left:8px}[dir=rtl] .novo-action-row button.novo-button{margin-left:0;margin-right:8px}"]
                 },] }
     ];
     NovoExpansionPanel.ctorParameters = function () { return [
@@ -31800,6 +32088,7 @@
                 })
                 : [];
             var fields = meta.fields.map(function (field) {
+                field.parentEntity = meta.entity;
                 if (!field.hasOwnProperty('sortOrder')) {
                     field.sortOrder = Number.MAX_SAFE_INTEGER - 1;
                 }
@@ -32230,201 +32519,6 @@
         { type: ComponentUtils }
     ]; };
 
-    // NG2
-    var NovoToastElement = /** @class */ (function () {
-        function NovoToastElement(sanitizer) {
-            this.sanitizer = sanitizer;
-            this.theme = 'danger';
-            this.icon = 'caution';
-            this.hasDialogue = false;
-            this.isCloseable = false;
-            this.closed = new core.EventEmitter();
-            this.show = false;
-            this.animate = false;
-            this.parent = null;
-            this.launched = false;
-        }
-        Object.defineProperty(NovoToastElement.prototype, "message", {
-            set: function (m) {
-                this._message = this.sanitizer.bypassSecurityTrustHtml(m);
-            },
-            enumerable: false,
-            configurable: true
-        });
-        NovoToastElement.prototype.ngOnInit = function () {
-            if (!this.launched) {
-                // clear position and time
-                this.position = null;
-                this.time = null;
-                // set icon and styling
-                this.iconClass = "bhi-" + this.icon;
-                this.alertTheme = this.theme + " toast-container embedded";
-                if (this.hasDialogue) {
-                    this.alertTheme += ' dialogue';
-                }
-            }
-        };
-        NovoToastElement.prototype.ngOnChanges = function (changes) {
-            // set icon and styling
-            this.iconClass = "bhi-" + this.icon;
-            this.alertTheme = this.theme + " toast-container embedded";
-            if (this.hasDialogue) {
-                this.alertTheme += ' dialogue';
-            }
-        };
-        NovoToastElement.prototype.clickHandler = function (event) {
-            if (!this.isCloseable) {
-                if (event) {
-                    event.stopPropagation();
-                    event.preventDefault();
-                }
-                if (this.parent) {
-                    this.parent.hide(this);
-                }
-                else {
-                    this.closed.emit({ closed: true });
-                }
-            }
-        };
-        NovoToastElement.prototype.close = function (event) {
-            if (event) {
-                event.stopPropagation();
-                event.preventDefault();
-            }
-            if (this.parent) {
-                this.parent.hide(this);
-            }
-            else {
-                this.closed.emit({ closed: true });
-            }
-        };
-        return NovoToastElement;
-    }());
-    NovoToastElement.decorators = [
-        { type: core.Component, args: [{
-                    selector: 'novo-toast',
-                    host: {
-                        '[class]': 'alertTheme',
-                        '[class.show]': 'show',
-                        '[class.animate]': 'animate',
-                        '[class.embedded]': 'embedded',
-                        '(click)': '!isCloseable && clickHandler($event)',
-                    },
-                    template: "\n        <div class=\"toast-icon\">\n            <i [ngClass]=\"iconClass\"></i>\n        </div>\n        <div class=\"toast-content\">\n            <h5 *ngIf=\"title\">{{title}}</h5>\n            <p *ngIf=\"_message\" [class.message-only]=\"!title\" [innerHtml]=\"_message\"></p>\n            <div *ngIf=\"link\" class=\"link-generated\">\n                <input type=\"text\" [value]=\"link\" onfocus=\"this.select();\"/>\n            </div>\n            <div class=\"dialogue\">\n                <ng-content></ng-content>\n            </div>\n        </div>\n        <div class=\"close-icon\" *ngIf=\"isCloseable\" (click)=\"close($event)\">\n            <i class=\"bhi-times\"></i>\n        </div>\n    "
-                },] }
-    ];
-    NovoToastElement.ctorParameters = function () { return [
-        { type: platformBrowser.DomSanitizer }
-    ]; };
-    NovoToastElement.propDecorators = {
-        theme: [{ type: core.Input }],
-        icon: [{ type: core.Input }],
-        title: [{ type: core.Input }],
-        hasDialogue: [{ type: core.Input }],
-        link: [{ type: core.Input }],
-        isCloseable: [{ type: core.Input }],
-        message: [{ type: core.Input }],
-        closed: [{ type: core.Output }]
-    };
-
-    // NG2
-    var NovoToastService = /** @class */ (function () {
-        function NovoToastService(componentUtils) {
-            this.componentUtils = componentUtils;
-            this.references = [];
-            this.icons = { default: 'bell', success: 'check', info: 'info', warning: 'warning', danger: 'remove' };
-            this.defaults = { hideDelay: 3500, position: 'growlTopRight', theme: 'default' };
-        }
-        Object.defineProperty(NovoToastService.prototype, "parentViewContainer", {
-            set: function (view) {
-                this._parentViewContainer = view;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        NovoToastService.prototype.alert = function (options, toastElement) {
-            var _this = this;
-            if (toastElement === void 0) { toastElement = NovoToastElement; }
-            return new Promise(function (resolve) {
-                if (!_this._parentViewContainer) {
-                    console.error('No parent view container specified for the ToastService. Set it inside your main application. \nthis.toastService.parentViewContainer = view (ViewContainerRef)');
-                    return;
-                }
-                var toast = _this.componentUtils.append(toastElement, _this._parentViewContainer);
-                _this.references.push(toast);
-                _this.handleAlert(toast.instance, options);
-                resolve(toast);
-            });
-        };
-        NovoToastService.prototype.isVisible = function (toast) {
-            return toast.show;
-        };
-        NovoToastService.prototype.hide = function (toast) {
-            var _this = this;
-            toast.animate = false;
-            setTimeout(function () {
-                toast.show = false;
-                var REF = _this.references.filter(function (x) { return x.instance === toast; })[0];
-                if (REF) {
-                    _this.references.splice(_this.references.indexOf(REF), 1);
-                    REF.destroy();
-                }
-            }, 300);
-        };
-        NovoToastService.prototype.handleAlert = function (toast, options) {
-            var _this = this;
-            this.setToastOnSession(toast, options);
-            setTimeout(function () {
-                _this.show(toast);
-            }, 20);
-            if (!toast.isCloseable) {
-                this.toastTimer(toast);
-            }
-        };
-        NovoToastService.prototype.setToastOnSession = function (toast, opts) {
-            var OPTIONS = typeof opts === 'object' ? opts : {};
-            toast.parent = this;
-            toast.title = OPTIONS.title || '';
-            toast.message = OPTIONS.message || '';
-            toast.hideDelay = OPTIONS.hideDelay || this.defaults.hideDelay;
-            toast.link = OPTIONS.link || '';
-            toast.isCloseable = OPTIONS.isCloseable || false;
-            var CUSTOM_CLASS = OPTIONS.customClass || '';
-            var ALERT_STYLE = OPTIONS.theme || this.defaults.theme;
-            var ALERT_POSITION = OPTIONS.position || this.defaults.position;
-            var ALERT_ICON = OPTIONS.icon || this.icons.default;
-            toast.iconClass = "bhi-" + ALERT_ICON;
-            toast.launched = true;
-            toast.alertTheme = ALERT_STYLE + " " + ALERT_POSITION + " " + CUSTOM_CLASS + " toast-container launched";
-        };
-        NovoToastService.prototype.show = function (toast) {
-            toast.show = true;
-            setTimeout(addClass, 25);
-            /**
-             * Adds animate class to be called after a timeout
-             **/
-            function addClass() {
-                toast.animate = true;
-            }
-        };
-        NovoToastService.prototype.toastTimer = function (toast) {
-            var _this = this;
-            if (toast.hideDelay < 0) {
-                return;
-            }
-            setTimeout(function () {
-                _this.hide(toast);
-            }, toast.hideDelay);
-        };
-        return NovoToastService;
-    }());
-    NovoToastService.decorators = [
-        { type: core.Injectable }
-    ];
-    NovoToastService.ctorParameters = function () { return [
-        { type: ComponentUtils }
-    ]; };
-
     // NG2
     var ControlConfirmModal = /** @class */ (function () {
         function ControlConfirmModal(modalRef, params, labels) {