novo-elements 5.6.1 → 5.10.0

package/fesm2015/novo-elements.js

@@ -2971,6 +2971,7 @@ class NovoLabelService {
         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';
@@ -5747,6 +5748,8 @@ class EntityPickerResult {
                     return 'user';
                 case 'CorporationDepartment':
                     return 'department';
+                case 'JobShift':
+                    return 'timetable contract';
                 default:
                     return '';
             }
@@ -5760,6 +5763,14 @@ class EntityPickerResult {
         }
         return timestamp;
     }
+    renderTimeNoOffset(dateStr) {
+        let timestamp = '';
+        if (dateStr) {
+            dateStr = dateStr.slice(0, 19);
+            timestamp = this.labels.formatTime(dateStr);
+        }
+        return timestamp;
+    }
     getNameForResult(result) {
         if (result) {
             switch (result.searchEntity) {
@@ -5828,6 +5839,26 @@ EntityPickerResult.decorators = [
           <i class="bhi-calendar"></i>
           <span [innerHtml]="renderTimestamp(match.data.dateBegin) + ' - ' + renderTimestamp(match.data.dateEnd)"></span>
         </p>
+        <!-- START Date -->
+        <p class="start-date" *ngIf="match.data.startTime && match.data.searchEntity === 'JobShift'">
+            <i class="bhi-calendar"></i>
+            <span [innerHtml]="renderTimestamp(match.data.startTime)"></span>
+        </p>
+        <!-- START & END TIME -->
+        <p class="start-time" *ngIf="match.data.startTime && match.data.searchEntity === 'JobShift'">
+            <i class="bhi-clock"></i>
+            <span [innerHtml]="renderTimeNoOffset(match.data.startTime) + ' - ' + renderTimeNoOffset(match.data.endTime)"></span>
+        </p>
+        <!-- JOBORDER -->
+        <p class="job" *ngIf="match.data.jobOrder && match.data.searchEntity === 'JobShift'">
+            <i class="bhi-job"></i>
+            <span [innerHtml]="highlight(match.data.jobOrder.title, term)"></span>
+        </p>
+        <!-- OPENINGS -->
+        <p class="openings" *ngIf="match.data.openings && match.data.searchEntity === 'JobShift'">
+            <i class="bhi-candidate"></i>
+            <span>{{ match.data.numAssigned }} / {{ match.data.openings }}</span>
+        </p>
         <!-- EMAIL -->
         <p class="email" *ngIf="match.data.email">
           <i class="bhi-email"></i> <span [innerHtml]="highlight(match.data.email, term)"></span>
@@ -7169,6 +7200,7 @@ class DataTableState {
         this.expandedRows = new Set();
         this.isForceRefresh = false;
         this.updates = new EventEmitter();
+        this.retainSelected = false;
     }
     get userFiltered() {
         return !!(this.filter || this.sort || this.globalSearch || this.outsideFilter);
@@ -7186,9 +7218,12 @@ class DataTableState {
             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,
@@ -7200,8 +7235,8 @@ class DataTableState {
     clearSort(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({
@@ -7215,8 +7250,8 @@ class DataTableState {
         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({
@@ -7226,6 +7261,19 @@ class DataTableState {
             });
         }
     }
+    clearSelected(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,
+            });
+        }
+    }
     onSelectionChange() {
         this.selectionSource.next();
     }
@@ -7233,9 +7281,12 @@ class DataTableState {
         this.expandSource.next(targetId);
     }
     onPaginationChange(isPageSizeChange, pageSize) {
+        this.checkRetainment('page');
         this.paginationSource.next({ isPageSizeChange, pageSize });
     }
     onSortFilterChange() {
+        this.checkRetainment('sort');
+        this.checkRetainment('filter');
         this.sortFilterSource.next({
             sort: this.sort,
             filter: this.filter,
@@ -7259,6 +7310,10 @@ class DataTableState {
             }
         }
     }
+    checkRetainment(caller) {
+        var _a;
+        this.retainSelected = ((_a = this.selectionOptions) === null || _a === void 0 ? void 0 : _a.some(option => option.label === caller)) || this.retainSelected;
+    }
 }
 DataTableState.decorators = [
     { type: Injectable }
@@ -7269,6 +7324,7 @@ class NovoDataTableClearButton {
         this.state = state;
         this.ref = ref;
         this.labels = labels;
+        this.selectedClear = new EventEmitter();
         this.sortClear = new EventEmitter();
         this.filterClear = new EventEmitter();
         this.allClear = new EventEmitter();
@@ -7281,9 +7337,14 @@ class NovoDataTableClearButton {
         this.state.clearFilter();
         this.filterClear.emit(true);
     }
+    clearSelected() {
+        this.state.clearSelected();
+        this.selectedClear.emit(true);
+    }
     clearAll() {
         this.state.reset();
         this.allClear.emit(true);
+        this.selectedClear.emit(true);
         this.sortClear.emit(true);
         this.filterClear.emit(true);
     }
@@ -7295,6 +7356,7 @@ NovoDataTableClearButton.decorators = [
     <novo-dropdown side="bottom-right" class="novo-data-table-clear-button" data-automation-id="novo-data-table-clear-dropdown">
       <button type="button" theme="primary" color="negative" icon="collapse" data-automation-id="novo-data-table-clear-dropdown-btn">{{ labels.clear }}</button>
       <list>
+          <item *ngIf="state.selected.length > 0" (click)="clearSelected()" data-automation-id="novo-data-table-clear-dropdown-clear-selected">{{ labels.clearSelected }}</item>
           <item *ngIf="state.sort" (click)="clearSort()" data-automation-id="novo-data-table-clear-dropdown-clear-sort">{{ labels.clearSort }}</item>
           <item *ngIf="state.filter" (click)="clearFilter()" data-automation-id="novo-data-table-clear-dropdown-clear-filter">{{ labels.clearFilter }}</item>
           <item *ngIf="state.sort && state.filter" (click)="clearAll()" data-automation-id="novo-data-table-clear-dropdown-clear-all">{{ labels.clearAllNormalCase }}</item>
@@ -7310,6 +7372,7 @@ NovoDataTableClearButton.ctorParameters = () => [
     { type: NovoLabelService }
 ];
 NovoDataTableClearButton.propDecorators = {
+    selectedClear: [{ type: Output }],
     sortClear: [{ type: Output }],
     filterClear: [{ type: Output }],
     allClear: [{ type: Output }]
@@ -7353,7 +7416,10 @@ class DataTableSource extends DataSource {
             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(() => {
@@ -7716,6 +7782,7 @@ class NovoDataTableSortFilter {
             }
         }
         this.state.filter = filter;
+        this.state.checkRetainment('filter');
         this.state.reset(false, true);
         this.state.updates.next({ filter, sort: this.state.sort });
         this.state.onSortFilterChange();
@@ -7723,6 +7790,7 @@ class NovoDataTableSortFilter {
     sort(id, value, transform) {
         const sort = { id, value, transform };
         this.state.sort = sort;
+        this.state.checkRetainment('sort');
         this.state.reset(false, true);
         this.state.updates.next({ sort, filter: this.state.filter });
         this.state.onSortFilterChange();
@@ -8258,6 +8326,7 @@ class NovoDataTable {
         this.trackByFn = (index, item) => item.id;
         this.templates = {};
         this.fixedHeader = false;
+        this.maxSelected = undefined;
         this._hideGlobalSearch = true;
         this.preferencesChanged = new EventEmitter();
         this.loading = true;
@@ -8429,6 +8498,7 @@ class NovoDataTable {
         }
     }
     ngAfterContentInit() {
+        var _a;
         if (this.displayedColumns && this.displayedColumns.length) {
             this.expandable = this.displayedColumns.includes('expand');
         }
@@ -8458,6 +8528,7 @@ class NovoDataTable {
         }
         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;
@@ -8702,8 +8773,8 @@ NovoDataTable.decorators = [
           [hidden]="dataSource?.totallyEmpty && !state.userFiltered"
         >
           <ng-container cdkColumnDef="selection">
-            <novo-data-table-checkbox-header-cell *cdkHeaderCellDef></novo-data-table-checkbox-header-cell>
-            <novo-data-table-checkbox-cell *cdkCellDef="let row; let i = index" [row]="row"></novo-data-table-checkbox-cell>
+            <novo-data-table-checkbox-header-cell *cdkHeaderCellDef [maxSelected]="maxSelected"></novo-data-table-checkbox-header-cell>
+            <novo-data-table-checkbox-cell *cdkCellDef="let row; let i = index" [row]="row" [maxSelected]="maxSelected"></novo-data-table-checkbox-cell>
           </ng-container>
           <ng-container cdkColumnDef="expand">
             <novo-data-table-expand-header-cell *cdkHeaderCellDef></novo-data-table-expand-header-cell>
@@ -8874,6 +8945,7 @@ NovoDataTable.propDecorators = {
     displayedColumns: [{ type: Input }],
     paginationOptions: [{ type: Input }],
     searchOptions: [{ type: Input }],
+    selectionOptions: [{ type: Input }],
     defaultSort: [{ type: Input }],
     name: [{ type: Input }],
     allowMultipleFilters: [{ type: Input }],
@@ -8883,6 +8955,7 @@ NovoDataTable.propDecorators = {
     templates: [{ type: Input }],
     fixedHeader: [{ type: Input }],
     paginatorDataFeatureId: [{ type: Input }],
+    maxSelected: [{ type: Input }],
     dataTableService: [{ type: Input }],
     rows: [{ type: Input }],
     outsideFilter: [{ type: Input }],
@@ -27373,6 +27446,7 @@ NovoAddressElement.decorators = [
         (focus)="isFocused($event, 'address1')"
         (blur)="isBlurred($event, 'address1')"
         (input)="onInput($event, 'address1')"
+        [disabled]="disabled.address1"
       />
     </span>
     <span
@@ -27401,6 +27475,7 @@ NovoAddressElement.decorators = [
         (focus)="isFocused($event, 'address2')"
         (blur)="isBlurred($event, 'address2')"
         (input)="onInput($event, 'address2')"
+        [disabled]="disabled.address2"
       />
     </span>
     <span
@@ -27424,6 +27499,7 @@ NovoAddressElement.decorators = [
         (focus)="isFocused($event, 'city')"
         (blur)="isBlurred($event, 'city')"
         (input)="onInput($event, 'city')"
+        [disabled]="disabled.city"
       />
     </span>
     <span
@@ -27465,6 +27541,7 @@ NovoAddressElement.decorators = [
         (focus)="isFocused($event, 'zip')"
         (blur)="isBlurred($event, 'zip')"
         (input)="onInput($event, 'zip')"
+        [disabled]="disabled.zip"
       />
     </span>
     <span
@@ -29412,6 +29489,7 @@ class NovoDataTableCheckboxCell extends CdkCell {
         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}`);
@@ -29425,11 +29503,19 @@ class NovoDataTableCheckboxCell extends CdkCell {
             this.ref.markForCheck();
         });
     }
+    get isAtLimit() {
+        return this.maxSelected && this.dataTable.state.selectedRows.size >= this.maxSelected && !this.checked;
+    }
     ngOnInit() {
         this.checked = this.dataTable.isSelected(this.row);
     }
     onClick() {
-        this.dataTable.selectRow(this.row);
+        if (!this.isAtLimit) {
+            this.dataTable.selectRow(this.row);
+        }
+    }
+    getTooltip() {
+        return (this.isAtLimit) ? 'More than ' + this.maxSelected + ' items are not able to be selected at one time' : '';
     }
     ngOnDestroy() {
         if (this.selectionSubscription) {
@@ -29444,10 +29530,11 @@ NovoDataTableCheckboxCell.decorators = [
     { type: Component, args: [{
                 selector: 'novo-data-table-checkbox-cell',
                 template: `
-    <div class="data-table-checkbox" (click)="onClick()">
+    <div class="data-table-checkbox" (click)="onClick()" [tooltip]="getTooltip()" tooltipPosition="right">
       <input type="checkbox" [checked]="checked">
       <label>
-        <i [class.bhi-checkbox-empty]="!checked"
+        <i [class.bhi-checkbox-disabled]="isAtLimit"
+          [class.bhi-checkbox-empty]="!checked"
           [class.bhi-checkbox-filled]="checked"></i>
       </label>
     </div>
@@ -29464,7 +29551,8 @@ NovoDataTableCheckboxCell.ctorParameters = () => [
 ];
 NovoDataTableCheckboxCell.propDecorators = {
     role: [{ type: HostBinding, args: ['attr.role',] }],
-    row: [{ type: Input }]
+    row: [{ type: Input }],
+    maxSelected: [{ type: Input }]
 };
 
 class NovoDataTableExpandCell extends CdkCell {
@@ -29602,12 +29690,211 @@ NovoDataTableExpandHeaderCell.propDecorators = {
     role: [{ type: HostBinding, args: ['attr.role',] }]
 };
 
+// NG2
+class NovoToastElement {
+    constructor(sanitizer) {
+        this.sanitizer = sanitizer;
+        this.theme = 'danger';
+        this.icon = 'caution';
+        this.hasDialogue = false;
+        this.isCloseable = false;
+        this.closed = new EventEmitter();
+        this.show = false;
+        this.animate = false;
+        this.parent = null;
+        this.launched = false;
+    }
+    set message(m) {
+        this._message = this.sanitizer.bypassSecurityTrustHtml(m);
+    }
+    ngOnInit() {
+        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';
+            }
+        }
+    }
+    ngOnChanges(changes) {
+        // set icon and styling
+        this.iconClass = `bhi-${this.icon}`;
+        this.alertTheme = `${this.theme} toast-container embedded`;
+        if (this.hasDialogue) {
+            this.alertTheme += ' dialogue';
+        }
+    }
+    clickHandler(event) {
+        if (!this.isCloseable) {
+            if (event) {
+                event.stopPropagation();
+                event.preventDefault();
+            }
+            if (this.parent) {
+                this.parent.hide(this);
+            }
+            else {
+                this.closed.emit({ closed: true });
+            }
+        }
+    }
+    close(event) {
+        if (event) {
+            event.stopPropagation();
+            event.preventDefault();
+        }
+        if (this.parent) {
+            this.parent.hide(this);
+        }
+        else {
+            this.closed.emit({ closed: true });
+        }
+    }
+}
+NovoToastElement.decorators = [
+    { type: Component, args: [{
+                selector: 'novo-toast',
+                host: {
+                    '[class]': 'alertTheme',
+                    '[class.show]': 'show',
+                    '[class.animate]': 'animate',
+                    '[class.embedded]': 'embedded',
+                    '(click)': '!isCloseable && clickHandler($event)',
+                },
+                template: `
+        <div class="toast-icon">
+            <i [ngClass]="iconClass"></i>
+        </div>
+        <div class="toast-content">
+            <h5 *ngIf="title">{{title}}</h5>
+            <p *ngIf="_message" [class.message-only]="!title" [innerHtml]="_message"></p>
+            <div *ngIf="link" class="link-generated">
+                <input type="text" [value]="link" onfocus="this.select();"/>
+            </div>
+            <div class="dialogue">
+                <ng-content></ng-content>
+            </div>
+        </div>
+        <div class="close-icon" *ngIf="isCloseable" (click)="close($event)">
+            <i class="bhi-times"></i>
+        </div>
+    `
+            },] }
+];
+NovoToastElement.ctorParameters = () => [
+    { type: DomSanitizer }
+];
+NovoToastElement.propDecorators = {
+    theme: [{ type: Input }],
+    icon: [{ type: Input }],
+    title: [{ type: Input }],
+    hasDialogue: [{ type: Input }],
+    link: [{ type: Input }],
+    isCloseable: [{ type: Input }],
+    message: [{ type: Input }],
+    closed: [{ type: Output }]
+};
+
+// NG2
+class NovoToastService {
+    constructor(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' };
+    }
+    set parentViewContainer(view) {
+        this._parentViewContainer = view;
+    }
+    alert(options, toastElement = NovoToastElement) {
+        return new Promise((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;
+            }
+            const toast = this.componentUtils.append(toastElement, this._parentViewContainer);
+            this.references.push(toast);
+            this.handleAlert(toast.instance, options);
+            resolve(toast);
+        });
+    }
+    isVisible(toast) {
+        return toast.show;
+    }
+    hide(toast) {
+        toast.animate = false;
+        setTimeout(() => {
+            toast.show = false;
+            const REF = this.references.filter((x) => x.instance === toast)[0];
+            if (REF) {
+                this.references.splice(this.references.indexOf(REF), 1);
+                REF.destroy();
+            }
+        }, 300);
+    }
+    handleAlert(toast, options) {
+        this.setToastOnSession(toast, options);
+        setTimeout(() => {
+            this.show(toast);
+        }, 20);
+        if (!toast.isCloseable) {
+            this.toastTimer(toast);
+        }
+    }
+    setToastOnSession(toast, opts) {
+        const 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;
+        const CUSTOM_CLASS = OPTIONS.customClass || '';
+        const ALERT_STYLE = OPTIONS.theme || this.defaults.theme;
+        const ALERT_POSITION = OPTIONS.position || this.defaults.position;
+        const 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`;
+    }
+    show(toast) {
+        toast.show = true;
+        setTimeout(addClass, 25);
+        /**
+         * Adds animate class to be called after a timeout
+         **/
+        function addClass() {
+            toast.animate = true;
+        }
+    }
+    toastTimer(toast) {
+        if (toast.hideDelay < 0) {
+            return;
+        }
+        setTimeout(() => {
+            this.hide(toast);
+        }, toast.hideDelay);
+    }
+}
+NovoToastService.decorators = [
+    { type: Injectable }
+];
+NovoToastService.ctorParameters = () => [
+    { type: ComponentUtils }
+];
+
 class NovoDataTableCheckboxHeaderCell extends CdkHeaderCell {
-    constructor(columnDef, elementRef, renderer, dataTable, ref) {
+    constructor(columnDef, elementRef, renderer, dataTable, ref, toaster) {
         super(columnDef, elementRef);
         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}`);
@@ -29620,6 +29907,8 @@ class NovoDataTableCheckboxHeaderCell extends CdkHeaderCell {
             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();
@@ -29631,6 +29920,9 @@ class NovoDataTableCheckboxHeaderCell extends CdkHeaderCell {
             this.ref.markForCheck();
         });
     }
+    get isAtLimit() {
+        return this.maxSelected && this.dataTable.state.selectedRows.size + this.dataTable.dataSource.data.length > this.maxSelected && !this.checked;
+    }
     ngOnDestroy() {
         if (this.selectionSubscription) {
             this.selectionSubscription.unsubscribe();
@@ -29643,7 +29935,17 @@ class NovoDataTableCheckboxHeaderCell extends CdkHeaderCell {
         }
     }
     onClick() {
-        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);
+        }
     }
 }
 NovoDataTableCheckboxHeaderCell.decorators = [
@@ -29666,10 +29968,12 @@ NovoDataTableCheckboxHeaderCell.ctorParameters = () => [
     { type: ElementRef },
     { type: Renderer2 },
     { type: NovoDataTable },
-    { type: ChangeDetectorRef }
+    { type: ChangeDetectorRef },
+    { type: NovoToastService }
 ];
 NovoDataTableCheckboxHeaderCell.propDecorators = {
-    role: [{ type: HostBinding, args: ['attr.role',] }]
+    role: [{ type: HostBinding, args: ['attr.role',] }],
+    maxSelected: [{ type: Input }]
 };
 
 class NovoDataTableHeaderCell extends CdkHeaderCell {
@@ -29765,10 +30069,12 @@ class NovoDataTablePagination {
         this.resetSubscription.unsubscribe();
     }
     selectPage(page) {
+        this.state.checkRetainment('page');
         this.page = page;
         this.emitPageEvent();
     }
     nextPage() {
+        this.state.checkRetainment('page');
         if (!this.hasNextPage()) {
             return;
         }
@@ -29777,6 +30083,7 @@ class NovoDataTablePagination {
         this.emitPageEvent();
     }
     previousPage() {
+        this.state.checkRetainment('page');
         if (!this.hasPreviousPage()) {
             return;
         }
@@ -31154,7 +31461,7 @@ NovoExpansionPanel.decorators = [
                     '[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 = () => [
@@ -32556,6 +32863,7 @@ class FormUtils {
             })
             : [];
         let fields = meta.fields.map((field) => {
+            field.parentEntity = meta.entity;
             if (!field.hasOwnProperty('sortOrder')) {
                 field.sortOrder = Number.MAX_SAFE_INTEGER - 1;
             }
@@ -32979,203 +33287,6 @@ NovoModalService.ctorParameters = () => [
     { type: ComponentUtils }
 ];
 
-// NG2
-class NovoToastElement {
-    constructor(sanitizer) {
-        this.sanitizer = sanitizer;
-        this.theme = 'danger';
-        this.icon = 'caution';
-        this.hasDialogue = false;
-        this.isCloseable = false;
-        this.closed = new EventEmitter();
-        this.show = false;
-        this.animate = false;
-        this.parent = null;
-        this.launched = false;
-    }
-    set message(m) {
-        this._message = this.sanitizer.bypassSecurityTrustHtml(m);
-    }
-    ngOnInit() {
-        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';
-            }
-        }
-    }
-    ngOnChanges(changes) {
-        // set icon and styling
-        this.iconClass = `bhi-${this.icon}`;
-        this.alertTheme = `${this.theme} toast-container embedded`;
-        if (this.hasDialogue) {
-            this.alertTheme += ' dialogue';
-        }
-    }
-    clickHandler(event) {
-        if (!this.isCloseable) {
-            if (event) {
-                event.stopPropagation();
-                event.preventDefault();
-            }
-            if (this.parent) {
-                this.parent.hide(this);
-            }
-            else {
-                this.closed.emit({ closed: true });
-            }
-        }
-    }
-    close(event) {
-        if (event) {
-            event.stopPropagation();
-            event.preventDefault();
-        }
-        if (this.parent) {
-            this.parent.hide(this);
-        }
-        else {
-            this.closed.emit({ closed: true });
-        }
-    }
-}
-NovoToastElement.decorators = [
-    { type: Component, args: [{
-                selector: 'novo-toast',
-                host: {
-                    '[class]': 'alertTheme',
-                    '[class.show]': 'show',
-                    '[class.animate]': 'animate',
-                    '[class.embedded]': 'embedded',
-                    '(click)': '!isCloseable && clickHandler($event)',
-                },
-                template: `
-        <div class="toast-icon">
-            <i [ngClass]="iconClass"></i>
-        </div>
-        <div class="toast-content">
-            <h5 *ngIf="title">{{title}}</h5>
-            <p *ngIf="_message" [class.message-only]="!title" [innerHtml]="_message"></p>
-            <div *ngIf="link" class="link-generated">
-                <input type="text" [value]="link" onfocus="this.select();"/>
-            </div>
-            <div class="dialogue">
-                <ng-content></ng-content>
-            </div>
-        </div>
-        <div class="close-icon" *ngIf="isCloseable" (click)="close($event)">
-            <i class="bhi-times"></i>
-        </div>
-    `
-            },] }
-];
-NovoToastElement.ctorParameters = () => [
-    { type: DomSanitizer }
-];
-NovoToastElement.propDecorators = {
-    theme: [{ type: Input }],
-    icon: [{ type: Input }],
-    title: [{ type: Input }],
-    hasDialogue: [{ type: Input }],
-    link: [{ type: Input }],
-    isCloseable: [{ type: Input }],
-    message: [{ type: Input }],
-    closed: [{ type: Output }]
-};
-
-// NG2
-class NovoToastService {
-    constructor(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' };
-    }
-    set parentViewContainer(view) {
-        this._parentViewContainer = view;
-    }
-    alert(options, toastElement = NovoToastElement) {
-        return new Promise((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;
-            }
-            const toast = this.componentUtils.append(toastElement, this._parentViewContainer);
-            this.references.push(toast);
-            this.handleAlert(toast.instance, options);
-            resolve(toast);
-        });
-    }
-    isVisible(toast) {
-        return toast.show;
-    }
-    hide(toast) {
-        toast.animate = false;
-        setTimeout(() => {
-            toast.show = false;
-            const REF = this.references.filter((x) => x.instance === toast)[0];
-            if (REF) {
-                this.references.splice(this.references.indexOf(REF), 1);
-                REF.destroy();
-            }
-        }, 300);
-    }
-    handleAlert(toast, options) {
-        this.setToastOnSession(toast, options);
-        setTimeout(() => {
-            this.show(toast);
-        }, 20);
-        if (!toast.isCloseable) {
-            this.toastTimer(toast);
-        }
-    }
-    setToastOnSession(toast, opts) {
-        const 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;
-        const CUSTOM_CLASS = OPTIONS.customClass || '';
-        const ALERT_STYLE = OPTIONS.theme || this.defaults.theme;
-        const ALERT_POSITION = OPTIONS.position || this.defaults.position;
-        const 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`;
-    }
-    show(toast) {
-        toast.show = true;
-        setTimeout(addClass, 25);
-        /**
-         * Adds animate class to be called after a timeout
-         **/
-        function addClass() {
-            toast.animate = true;
-        }
-    }
-    toastTimer(toast) {
-        if (toast.hideDelay < 0) {
-            return;
-        }
-        setTimeout(() => {
-            this.hide(toast);
-        }, toast.hideDelay);
-    }
-}
-NovoToastService.decorators = [
-    { type: Injectable }
-];
-NovoToastService.ctorParameters = () => [
-    { type: ComponentUtils }
-];
-
 // NG2
 class ControlConfirmModal {
     constructor(modalRef, params, labels) {