novo-elements 5.1.1 → 5.2.3

package/elements/data-table/cells/data-table-cell.component.d.ts

@@ -1,17 +1,17 @@
-import { ElementRef, Renderer2, OnInit, TemplateRef, EventEmitter, OnDestroy } from '@angular/core';
-import { CdkCell, CdkColumnDef } from '@angular/cdk/table';
-import { IDataTableColumn } from '../interfaces';
-export declare class NovoDataTableCell<T> extends CdkCell implements OnInit, OnDestroy {
-    private elementRef;
-    private renderer;
-    role: string;
-    row: T;
-    template: TemplateRef<any>;
-    column: IDataTableColumn<T>;
-    resized: EventEmitter<IDataTableColumn<T>>;
-    private subscriptions;
-    constructor(columnDef: CdkColumnDef, elementRef: ElementRef, renderer: Renderer2);
-    ngOnInit(): void;
-    ngOnDestroy(): void;
-    private calculateWidths;
-}
+import { ElementRef, Renderer2, OnInit, TemplateRef, EventEmitter, OnDestroy } from '@angular/core';
+import { CdkCell, CdkColumnDef } from '@angular/cdk/table';
+import { IDataTableColumn } from '../interfaces';
+export declare class NovoDataTableCell<T> extends CdkCell implements OnInit, OnDestroy {
+    private elementRef;
+    private renderer;
+    role: string;
+    row: T;
+    template: TemplateRef<any>;
+    column: IDataTableColumn<T>;
+    resized: EventEmitter<IDataTableColumn<T>>;
+    private subscriptions;
+    constructor(columnDef: CdkColumnDef, elementRef: ElementRef, renderer: Renderer2);
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    private calculateWidths;
+}

package/elements/data-table/cells/data-table-checkbox-cell.component.d.ts

@@ -1,17 +1,17 @@
-import { ElementRef, Renderer2, OnInit, OnDestroy, ChangeDetectorRef } from '@angular/core';
-import { CdkCell, CdkColumnDef } from '@angular/cdk/table';
-import { NovoDataTable } from '../data-table.component';
-export declare class NovoDataTableCheckboxCell<T> extends CdkCell implements OnInit, OnDestroy {
-    columnDef: CdkColumnDef;
-    dataTable: NovoDataTable<T>;
-    private ref;
-    role: string;
-    row: T;
-    checked: boolean;
-    private selectionSubscription;
-    private resetSubscription;
-    constructor(columnDef: CdkColumnDef, elementRef: ElementRef, renderer: Renderer2, dataTable: NovoDataTable<T>, ref: ChangeDetectorRef);
-    ngOnInit(): void;
-    onClick(): void;
-    ngOnDestroy(): void;
-}
+import { ElementRef, Renderer2, OnInit, OnDestroy, ChangeDetectorRef } from '@angular/core';
+import { CdkCell, CdkColumnDef } from '@angular/cdk/table';
+import { NovoDataTable } from '../data-table.component';
+export declare class NovoDataTableCheckboxCell<T> extends CdkCell implements OnInit, OnDestroy {
+    columnDef: CdkColumnDef;
+    dataTable: NovoDataTable<T>;
+    private ref;
+    role: string;
+    row: T;
+    checked: boolean;
+    private selectionSubscription;
+    private resetSubscription;
+    constructor(columnDef: CdkColumnDef, elementRef: ElementRef, renderer: Renderer2, dataTable: NovoDataTable<T>, ref: ChangeDetectorRef);
+    ngOnInit(): void;
+    onClick(): void;
+    ngOnDestroy(): void;
+}

package/elements/data-table/cells/data-table-expand-cell.component.d.ts

@@ -1,16 +1,16 @@
-import { CdkCell, CdkColumnDef } from '@angular/cdk/table';
-import { ChangeDetectorRef, ElementRef, OnDestroy, OnInit, Renderer2 } from '@angular/core';
-import { NovoDataTable } from '../data-table.component';
-export declare class NovoDataTableExpandCell<T> extends CdkCell implements OnInit, OnDestroy {
-    columnDef: CdkColumnDef;
-    dataTable: NovoDataTable<T>;
-    private ref;
-    role: string;
-    row: T;
-    expanded: boolean;
-    private expandSubscription;
-    constructor(columnDef: CdkColumnDef, elementRef: ElementRef, renderer: Renderer2, dataTable: NovoDataTable<T>, ref: ChangeDetectorRef);
-    ngOnInit(): void;
-    onClick(): void;
-    ngOnDestroy(): void;
-}
+import { CdkCell, CdkColumnDef } from '@angular/cdk/table';
+import { ChangeDetectorRef, ElementRef, OnDestroy, OnInit, Renderer2 } from '@angular/core';
+import { NovoDataTable } from '../data-table.component';
+export declare class NovoDataTableExpandCell<T> extends CdkCell implements OnInit, OnDestroy {
+    columnDef: CdkColumnDef;
+    dataTable: NovoDataTable<T>;
+    private ref;
+    role: string;
+    row: T;
+    expanded: boolean;
+    private expandSubscription;
+    constructor(columnDef: CdkColumnDef, elementRef: ElementRef, renderer: Renderer2, dataTable: NovoDataTable<T>, ref: ChangeDetectorRef);
+    ngOnInit(): void;
+    onClick(): void;
+    ngOnDestroy(): void;
+}

package/elements/data-table/data-table-clear-button.component.d.ts

@@ -1,15 +1,15 @@
-import { EventEmitter, ChangeDetectorRef } from '@angular/core';
-import { DataTableState } from './state/data-table-state.service';
-import { NovoLabelService } from '../../services/novo-label-service';
-export declare class NovoDataTableClearButton<T> {
-    state: DataTableState<T>;
-    private ref;
-    labels: NovoLabelService;
-    sortClear: EventEmitter<boolean>;
-    filterClear: EventEmitter<boolean>;
-    allClear: EventEmitter<boolean>;
-    constructor(state: DataTableState<T>, ref: ChangeDetectorRef, labels: NovoLabelService);
-    clearSort(): void;
-    clearFilter(): void;
-    clearAll(): void;
-}
+import { EventEmitter, ChangeDetectorRef } from '@angular/core';
+import { DataTableState } from './state/data-table-state.service';
+import { NovoLabelService } from '../../services/novo-label-service';
+export declare class NovoDataTableClearButton<T> {
+    state: DataTableState<T>;
+    private ref;
+    labels: NovoLabelService;
+    sortClear: EventEmitter<boolean>;
+    filterClear: EventEmitter<boolean>;
+    allClear: EventEmitter<boolean>;
+    constructor(state: DataTableState<T>, ref: ChangeDetectorRef, labels: NovoLabelService);
+    clearSort(): void;
+    clearFilter(): void;
+    clearAll(): void;
+}

package/elements/data-table/data-table-expand.directive.d.ts

@@ -1,18 +1,18 @@
-import { TemplateRef, ViewContainerRef, OnDestroy } from '@angular/core';
-import { DataTableState } from './state/data-table-state.service';
-import { NovoDataTable } from './data-table.component';
-export declare class NovoDataTableExpandDirective<T> implements OnDestroy {
-    vcRef: ViewContainerRef;
-    private state;
-    private dataTable;
-    row: T;
-    template: TemplateRef<any>;
-    private subscription;
-    constructor(vcRef: ViewContainerRef, state: DataTableState<T>, dataTable: NovoDataTable<T>);
-    shouldExpandAllRows: (targetId: number) => boolean;
-    shouldExpandOneRow: (targetId: number) => boolean;
-    ngOnDestroy(): void;
-    onClick(event: MouseEvent): void;
-    private clear;
-    private render;
-}
+import { TemplateRef, ViewContainerRef, OnDestroy } from '@angular/core';
+import { DataTableState } from './state/data-table-state.service';
+import { NovoDataTable } from './data-table.component';
+export declare class NovoDataTableExpandDirective<T> implements OnDestroy {
+    vcRef: ViewContainerRef;
+    private state;
+    private dataTable;
+    row: T;
+    template: TemplateRef<any>;
+    private subscription;
+    constructor(vcRef: ViewContainerRef, state: DataTableState<T>, dataTable: NovoDataTable<T>);
+    shouldExpandAllRows: (targetId: number) => boolean;
+    shouldExpandOneRow: (targetId: number) => boolean;
+    ngOnDestroy(): void;
+    onClick(event: MouseEvent): void;
+    private clear;
+    private render;
+}

package/elements/data-table/data-table.component.d.ts

@@ -1,99 +1,99 @@
-import { AfterContentInit, ChangeDetectorRef, ElementRef, EventEmitter, OnDestroy, QueryList, TemplateRef } from '@angular/core';
-import { NovoLabelService } from '../../services/novo-label-service';
-import { NovoTemplate } from '../common/novo-template/novo-template.directive';
-import { DataTableSource } from './data-table.source';
-import { IDataTableColumn, IDataTablePaginationOptions, IDataTablePreferences, IDataTableSearchOptions, IDataTableService } from './interfaces';
-import { DataTableState } from './state/data-table-state.service';
-import { NovoDataTableCellHeader } from './cell-headers/data-table-header-cell.component';
-import { ListInteractionDictionary, ListInteractionEvent } from './ListInteractionTypes';
-export declare class NovoDataTable<T> implements AfterContentInit, OnDestroy {
-    labels: NovoLabelService;
-    private ref;
-    state: DataTableState<T>;
-    globalSearchHiddenClassToggle: boolean;
-    customTemplates: QueryList<NovoTemplate>;
-    defaultTemplates: QueryList<NovoTemplate>;
-    cellHeaders: QueryList<NovoDataTableCellHeader<T>>;
-    novoDataTableContainer: ElementRef;
-    resized: EventEmitter<IDataTableColumn<T>>;
-    set displayedColumns(displayedColumns: string[]);
-    get displayedColumns(): string[];
-    private _disabledColumns;
-    paginationOptions: IDataTablePaginationOptions;
-    searchOptions: IDataTableSearchOptions;
-    defaultSort: {
-        id: string;
-        value: string;
-    };
-    name: string;
-    allowMultipleFilters: boolean;
-    rowIdentifier: string;
-    activeRowIdentifier: string;
-    trackByFn: (index: any, item: any) => any;
-    templates: {
-        [key: string]: TemplateRef<any>;
-    };
-    fixedHeader: boolean;
-    paginatorDataFeatureId: string;
-    set dataTableService(service: IDataTableService<T>);
-    set rows(rows: T[]);
-    set outsideFilter(outsideFilter: EventEmitter<any>);
-    set refreshSubject(refreshSubject: EventEmitter<any>);
-    set columns(columns: IDataTableColumn<T>[]);
-    get columns(): IDataTableColumn<T>[];
-    set customFilter(v: boolean);
-    get customFilter(): boolean;
-    private _customFilter;
-    set hasExandedRows(v: boolean);
-    get hasExandedRows(): boolean;
-    private _hasExandedRows;
-    set forceShowHeader(v: boolean);
-    get forceShowHeader(): boolean;
-    private _forceShowHeader;
-    set hideGlobalSearch(v: boolean);
-    get hideGlobalSearch(): boolean;
-    private _hideGlobalSearch;
-    preferencesChanged: EventEmitter<IDataTablePreferences>;
-    dataSource: DataTableSource<T>;
-    loading: boolean;
-    columnToTemplate: {
-        [key: string]: TemplateRef<any>;
-    };
-    columnsLoaded: boolean;
-    selection: Set<string>;
-    scrollLeft: number;
-    expandable: boolean;
-    private outsideFilterSubscription;
-    private refreshSubscription;
-    private resetSubscription;
-    private paginationSubscription;
-    private sortFilterSubscription;
-    private _columns;
-    private scrollListenerHandler;
-    private initialized;
-    get empty(): boolean;
-    get loadingClass(): boolean;
-    listInteractions: ListInteractionDictionary;
-    constructor(labels: NovoLabelService, ref: ChangeDetectorRef, state: DataTableState<T>);
-    modifyCellHeaderMultiSelectFilterOptions(column: string, newOptions: {
-        value: any;
-        label: string;
-    }[]): void;
-    ngOnDestroy(): void;
-    ngAfterContentInit(): void;
-    onSearchChange(term: string): void;
-    trackColumnsBy(index: number, item: IDataTableColumn<T>): string;
-    isDisabled(check: any, row: T): boolean;
-    isExpanded(row: T): boolean;
-    expandRow(row: T): void;
-    expandRows(expand: boolean): void;
-    allCurrentRowsExpanded(): boolean;
-    isSelected(row: T): boolean;
-    selectRow(row: T): void;
-    selectRows(selected: boolean): void;
-    allCurrentRowsSelected(): boolean;
-    private configureLastDisplayedColumn;
-    private configureColumns;
-    private scrollListener;
-    performInteractions(event: ListInteractionEvent): void;
-}
+import { AfterContentInit, ChangeDetectorRef, ElementRef, EventEmitter, OnDestroy, QueryList, TemplateRef } from '@angular/core';
+import { NovoLabelService } from '../../services/novo-label-service';
+import { NovoTemplate } from '../common/novo-template/novo-template.directive';
+import { DataTableSource } from './data-table.source';
+import { IDataTableColumn, IDataTablePaginationOptions, IDataTablePreferences, IDataTableSearchOptions, IDataTableService } from './interfaces';
+import { DataTableState } from './state/data-table-state.service';
+import { NovoDataTableCellHeader } from './cell-headers/data-table-header-cell.component';
+import { ListInteractionDictionary, ListInteractionEvent } from './ListInteractionTypes';
+export declare class NovoDataTable<T> implements AfterContentInit, OnDestroy {
+    labels: NovoLabelService;
+    private ref;
+    state: DataTableState<T>;
+    globalSearchHiddenClassToggle: boolean;
+    customTemplates: QueryList<NovoTemplate>;
+    defaultTemplates: QueryList<NovoTemplate>;
+    cellHeaders: QueryList<NovoDataTableCellHeader<T>>;
+    novoDataTableContainer: ElementRef;
+    resized: EventEmitter<IDataTableColumn<T>>;
+    set displayedColumns(displayedColumns: string[]);
+    get displayedColumns(): string[];
+    private _disabledColumns;
+    paginationOptions: IDataTablePaginationOptions;
+    searchOptions: IDataTableSearchOptions;
+    defaultSort: {
+        id: string;
+        value: string;
+    };
+    name: string;
+    allowMultipleFilters: boolean;
+    rowIdentifier: string;
+    activeRowIdentifier: string;
+    trackByFn: (index: any, item: any) => any;
+    templates: {
+        [key: string]: TemplateRef<any>;
+    };
+    fixedHeader: boolean;
+    paginatorDataFeatureId: string;
+    set dataTableService(service: IDataTableService<T>);
+    set rows(rows: T[]);
+    set outsideFilter(outsideFilter: EventEmitter<any>);
+    set refreshSubject(refreshSubject: EventEmitter<any>);
+    set columns(columns: IDataTableColumn<T>[]);
+    get columns(): IDataTableColumn<T>[];
+    set customFilter(v: boolean);
+    get customFilter(): boolean;
+    private _customFilter;
+    set hasExandedRows(v: boolean);
+    get hasExandedRows(): boolean;
+    private _hasExandedRows;
+    set forceShowHeader(v: boolean);
+    get forceShowHeader(): boolean;
+    private _forceShowHeader;
+    set hideGlobalSearch(v: boolean);
+    get hideGlobalSearch(): boolean;
+    private _hideGlobalSearch;
+    preferencesChanged: EventEmitter<IDataTablePreferences>;
+    dataSource: DataTableSource<T>;
+    loading: boolean;
+    columnToTemplate: {
+        [key: string]: TemplateRef<any>;
+    };
+    columnsLoaded: boolean;
+    selection: Set<string>;
+    scrollLeft: number;
+    expandable: boolean;
+    private outsideFilterSubscription;
+    private refreshSubscription;
+    private resetSubscription;
+    private paginationSubscription;
+    private sortFilterSubscription;
+    private _columns;
+    private scrollListenerHandler;
+    private initialized;
+    get empty(): boolean;
+    get loadingClass(): boolean;
+    listInteractions: ListInteractionDictionary;
+    constructor(labels: NovoLabelService, ref: ChangeDetectorRef, state: DataTableState<T>);
+    modifyCellHeaderMultiSelectFilterOptions(column: string, newOptions: {
+        value: any;
+        label: string;
+    }[]): void;
+    ngOnDestroy(): void;
+    ngAfterContentInit(): void;
+    onSearchChange(term: string): void;
+    trackColumnsBy(index: number, item: IDataTableColumn<T>): string;
+    isDisabled(check: any, row: T): boolean;
+    isExpanded(row: T): boolean;
+    expandRow(row: T): void;
+    expandRows(expand: boolean): void;
+    allCurrentRowsExpanded(): boolean;
+    isSelected(row: T): boolean;
+    selectRow(row: T): void;
+    selectRows(selected: boolean): void;
+    allCurrentRowsSelected(): boolean;
+    private configureLastDisplayedColumn;
+    private configureColumns;
+    private scrollListener;
+    performInteractions(event: ListInteractionEvent): void;
+}

package/elements/data-table/data-table.component.scss

@@ -0,0 +1,753 @@
+$table-bg-accent: #f4f4f4;
+$novo-row-horizontal-padding: 20px;
+$table-header-font-weight: 400;
+$breakpoint: 1000px;
+
+cdk-table {
+  display: block;
+  flex: 1;
+  &.expandable {
+    width: fit-content;
+    min-width: 100%;
+  }
+  &.empty {
+    min-height: 62px;
+    max-height: 62px;
+  }
+  > .novo-data-table-row:nth-of-type(odd) {
+    .novo-data-table-cell,
+    .novo-data-table-button-cell,
+    .novo-data-table-dropdown-cell,
+    .novo-data-table-expand-cell,
+    .novo-data-table-checkbox-cell {
+      background-color: $table-bg-accent;
+    }
+    &.active {
+      .novo-data-table-cell,
+      .novo-data-table-button-cell,
+      .novo-data-table-dropdown-cell,
+      .novo-data-table-expand-cell,
+      .novo-data-table-checkbox-cell {
+        background-color: rgba($ocean, 0.15);
+      }
+      + .novo-data-table-detail-row {
+        background-color: rgba($ocean, 0.15);
+      }
+    }
+    + .novo-data-table-detail-row {
+      background: $table-bg-accent;
+    }
+  }
+  > .novo-data-table-row:nth-of-type(even) {
+    .novo-data-table-cell,
+    .novo-data-table-button-cell,
+    .novo-data-table-dropdown-cell,
+    .novo-data-table-expand-cell,
+    .novo-data-table-checkbox-cell {
+      background-color: $white;
+    }
+    &.active {
+      .novo-data-table-cell,
+      .novo-data-table-button-cell,
+      .novo-data-table-dropdown-cell,
+      .novo-data-table-expand-cell,
+      .novo-data-table-checkbox-cell {
+        background-color: rgba($ocean, 0.15);
+      }
+      + .novo-data-table-detail-row {
+        background-color: rgba($ocean, 0.15);
+      }
+    }
+    + .novo-data-table-detail-row {
+      background: $white;
+    }
+  }
+}
+
+.novo-data-table-cell-align-right {
+  text-align: right;
+}
+
+.novo-data-table-header-row,
+.novo-data-table-header-cell {
+  position: relative;
+  z-index: 1;
+}
+
+.novo-data-table-header-row.fixed-header,
+.novo-data-table-header-cell.fixed-header {
+  position: sticky;
+  top: 0;
+}
+
+.novo-data-table-row,
+.novo-data-table-header-row {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  background-color: $white;
+  .novo-data-table-header-cell,
+  .novo-data-table-checkbox-header-cell {
+    border-bottom: 1px solid $off-white;
+    background-color: $white;
+  }
+  &.expanded {
+    i.bhi-next.data-table-icon {
+      cursor: pointer;
+      transition: all 0.1s;
+      &.expanded {
+        transform: rotate(90deg);
+      }
+    }
+  }
+}
+
+.novo-data-table-header-cell {
+  &.resizable {
+    padding-right: 0;
+    .data-table-header-resizable {
+      height: 100%;
+
+      span {
+        cursor: ew-resize;
+        width: 8px;
+        display: block;
+      }
+    }
+  }
+  > div {
+    > button {
+      margin-right: 2px;
+    }
+    &.spacer {
+      flex-grow: 100;
+    }
+  }
+}
+
+.novo-data-table-clear-button {
+  button {
+    min-width: 80px !important;
+  }
+}
+
+.novo-data-table-cell,
+.novo-data-table-header-cell {
+  min-width: 200px;
+  padding: 10px;
+  flex: 1;
+  > i.label-icon {
+    margin-right: 0.5em;
+  }
+  > span {
+    display: block;
+    min-width: 180px;
+    max-width: 180px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  novo-dropdown {
+    display: inline-block;
+  }
+  button.active {
+    color: $white;
+    background: $positive;
+    &:hover,
+    &:active,
+    &:focus,
+    &:visited {
+      background: $positive !important;
+    }
+  }
+  &.clickable {
+    cursor: pointer;
+    color: $company;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+}
+
+.novo-data-table-cell {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  &.dropdown-cell,
+  &.button-cell {
+    display: flex;
+    align-items: flex-start;
+    justify-content: center;
+    flex-direction: column;
+    padding: 0 5px;
+    novo-dropdown {
+      button {
+        padding: 0;
+        padding-left: 5px;
+        &:hover,
+        &:active,
+        &:focus {
+          background: rgba(0, 0, 0, 0.1) !important;
+        }
+      }
+    }
+  }
+  &.button-cell {
+    min-width: 40px;
+    max-width: 40px;
+  }
+  &.dropdown-cell {
+    min-width: 98px;
+    max-width: 98px;
+    &.empty {
+      min-width: 39px;
+      max-width: 39px;
+    }
+  }
+  i.data-table-icon {
+    cursor: pointer;
+    font-size: 1.2em;
+    padding: 0.5em;
+    border-radius: 3px;
+    &.disabled {
+      pointer-events: none;
+      opacity: 0.7;
+    }
+    &:hover {
+      background: rgba(0, 0, 0, 0.1);
+    }
+    &:active {
+      background: rgba(0, 0, 0, 0.25);
+    }
+  }
+}
+
+.novo-data-table-header-cell {
+  border-left: 1px solid $off-white;
+  white-space: nowrap;
+  display: flex;
+  align-items: center;
+  + .button-header-cell,
+  + .dropdown-header-cell {
+    border-left: none;
+  }
+  > label {
+    display: inline-block;
+    padding-right: 10px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    &.sort-disabled {
+      cursor: default;
+    }
+  }
+  > div {
+    width: 55px;
+    display: flex;
+    flex: 0;
+  }
+  novo-dropdown[side='right'] {
+    display: inline-block;
+  }
+  &.button-header-cell {
+    min-width: 40px;
+    max-width: 40px;
+  }
+  &.dropdown-header-cell {
+    min-width: 98px;
+    max-width: 98px;
+    &.empty {
+      min-width: 39px;
+      max-width: 39px;
+    }
+  }
+}
+
+.novo-data-table-expand-header-cell,
+.novo-data-table-expand-cell {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 30px;
+  i {
+    cursor: pointer;
+    transition: all 0.1s;
+    &.expanded {
+      transform: rotate(90deg);
+    }
+  }
+}
+
+.novo-data-table-checkbox-header-cell,
+.novo-data-table-checkbox-cell {
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  flex-direction: column;
+  max-width: 40px;
+  padding: 0 10px;
+  div.data-table-checkbox {
+    display: flex;
+    cursor: pointer;
+    i {
+      cursor: pointer;
+      &.bhi-checkbox-empty {
+        color: #d2d2d2;
+      }
+      &.bhi-checkbox-filled {
+        color: $positive;
+      }
+    }
+  }
+  input {
+    appearance: none !important;
+    height: 0 !important;
+    border: none !important;
+  }
+}
+
+novo-data-table {
+  position: relative;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  &.loading {
+    min-height: 300px;
+  }
+  header {
+    padding: 5px;
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
+    border-bottom: 1px solid $off-white;
+    &.empty {
+      padding: 0;
+    }
+    > [novo-data-table-custom-header] {
+      flex: 1;
+    }
+    > novo-search {
+      padding-right: 10px;
+      display: none;
+      @media (min-width: $breakpoint) {
+        display: flex;
+      }
+      > input {
+        padding: 8.5px;
+        font-size: 1.1em;
+        height: 35px;
+      }
+      &.active > button[theme='fab'] {
+        height: 35px;
+        min-height: 35px;
+      }
+    }
+    > div.novo-data-table-actions {
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+      > * {
+        margin-right: 0.2em;
+        &:last-child {
+          margin-right: 0;
+        }
+      }
+      > div,
+      > section {
+        display: flex;
+        align-items: center;
+        button {
+          margin-left: 3px;
+        }
+        button[theme][theme='icon'] {
+          height: 35px;
+          width: 35px;
+          font-size: 1.4em;
+        }
+        novo-dropdown {
+          button[theme] {
+            white-space: nowrap;
+            padding: 6px 5px 6px 15px !important;
+          }
+        }
+      }
+    }
+  }
+  button[theme][theme='icon'] {
+    height: 30px;
+    width: 30px;
+    padding: 5px;
+  }
+  .novo-data-table-loading-mask {
+    position: absolute;
+    display: flex;
+    padding-top: 10%;
+    justify-content: center;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.07);
+    z-index: 99;
+  }
+  .clickable {
+    @extend a;
+  }
+  .novo-data-table-detail-row {
+    padding: 1em;
+  }
+  .novo-data-table-empty-container {
+    padding-top: 0;
+  }
+  .novo-data-table-no-results-container {
+    position: absolute;
+    top: 48%;
+    left: 0;
+    right: 0;
+    width: 100%;
+  }
+  .novo-data-table-empty-container,
+  .novo-data-table-no-results-container {
+    padding: 2em;
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: $grey;
+    z-index: 5;
+  }
+  .novo-data-table-outside-container {
+    display: flex;
+    flex: 1;
+    .novo-data-table-custom-filter {
+      border-right: 1px solid $off-white;
+      novo-date-picker {
+        .calendar {
+          box-shadow: none;
+          .date-range-tabs {
+            height: 51px;
+          }
+          .calendar-footer {
+            display: none;
+          }
+        }
+      }
+      div.period-selector {
+        padding: 1em;
+        .novo-form-control-label {
+          display: block;
+          max-width: 100%;
+          margin-bottom: 1em;
+        }
+      }
+    }
+    .novo-data-table-container {
+      flex: 1;
+      overflow: auto;
+      position: relative;
+      &.empty {
+        display: flex;
+        flex: 0;
+      }
+      &.empty-user-filtered {
+        display: flex;
+        flex-flow: column nowrap;
+        min-height: 250px;
+      }
+    }
+  }
+  .novo-data-table-outside-container-fixed {
+    overflow: hidden;
+    position: relative;
+    .novo-data-table-container-fixed {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+    }
+  }
+  .novo-data-table-footer {
+    display: flex;
+    align-items: center;
+    > div,
+    div.novo-data-table-footer-cell {
+      border-top: 1px solid $off-white;
+      flex: 1;
+      min-width: 200px;
+      display: flex;
+      align-items: center;
+      &:not(.button-cell):not(.dropdown-cell) {
+        padding: 10px;
+      }
+    }
+  }
+}
+
+novo-data-table-pagination {
+  &.basic,
+  &.basic-wide {
+    display: flex;
+    align-items: center;
+    flex: 1;
+    novo-tiles > .tile-container .tile {
+      padding: 7px 10px;
+    }
+    > .novo-data-table-pagination-size {
+      padding-right: 10px;
+    }
+    > .novo-data-table-range-label-long,
+    > .novo-data-table-range-label-short {
+      padding-right: 10px;
+      white-space: nowrap;
+    }
+    > .novo-data-table-range-label-long {
+      display: none;
+      @media (min-width: $breakpoint) {
+        display: block;
+      }
+    }
+    > .novo-data-table-spacer {
+      width: 100%;
+    }
+    > .novo-data-table-range-label-short {
+      display: block;
+      @media (min-width: $breakpoint) {
+        display: none;
+      }
+    }
+    > button:first-of-type {
+      margin-right: 5px;
+    }
+    > button {
+      span {
+        display: none;
+        @media (min-width: $breakpoint) {
+          display: block;
+        }
+      }
+    }
+    > button[theme][theme='dialogue'][icon][side='left'] {
+      padding: 5px;
+      @media (min-width: $breakpoint) {
+        padding: 5px 15px 5px 5px;
+      }
+    }
+    > button[theme][theme='dialogue'][icon][side='right'] {
+      padding: 5px;
+      @media (min-width: $breakpoint) {
+        padding: 5px 5px 5px 15px;
+      }
+    }
+  }
+  &.standard {
+    display: flex;
+    flex-flow: row nowrap;
+    flex: 1;
+    > * {
+      margin: auto 5px;
+    }
+    h5.rows {
+      padding: 0;
+      font-size: 12px;
+      opacity: 0.75;
+      letter-spacing: 0.1px;
+    }
+    span.spacer {
+      flex: 1;
+    }
+    novo-select {
+      max-width: 100px;
+      min-width: 100px;
+      div[type='button'] {
+        &:hover {
+          i {
+            opacity: 0.75;
+          }
+        }
+        &:active,
+        &:focus {
+          i {
+            opacity: 1;
+          }
+        }
+        i {
+          opacity: 0.45;
+        }
+      }
+    }
+    .pager {
+      list-style-type: none;
+      user-select: none;
+      display: flex;
+      .page {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 30px;
+        height: 30px;
+        border-radius: 2px;
+        list-style-type: none;
+        cursor: pointer;
+        color: $company;
+        &.disabled {
+          opacity: 0.3;
+          pointer-events: none;
+        }
+      }
+      .page.active {
+        color: $company;
+        background-color: $off-white;
+        opacity: 1;
+      }
+    }
+  }
+}
+
+.dropdown-container.data-table-dropdown {
+  min-width: 230px;
+  max-width: 230px;
+  max-height: 500px;
+  overflow-x: hidden;
+  overflow-y: auto;
+  &.right {
+    margin-left: -150px !important;
+  }
+  .header {
+    padding: 5px 10px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    button {
+      padding: 3px;
+      icon {
+        font-size: 0.8em;
+      }
+    }
+  }
+  .dropdown-list-options {
+    max-height: 346px;
+    overflow-y: auto;
+    overflow-x: hidden;
+  }
+  .footer {
+    border-top: 1px solid $light;
+    padding: 5px 10px;
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    button {
+      icon {
+        font-size: 0.8em;
+      }
+    }
+  }
+  list item.active {
+    background: transparent;
+    font-weight: 500;
+  }
+  button[theme][theme='dialogue'][icon] i {
+    padding: inherit;
+    padding-left: 5px;
+    height: inherit;
+    width: inherit;
+    display: inline-block;
+    line-height: inherit;
+  }
+  list {
+    item.filter-search {
+      padding: 10px 0;
+      width: 100%;
+      height: auto;
+      flex-direction: column;
+      align-items: flex-start;
+      cursor: initial;
+      &:hover {
+        background: transparent;
+      }
+      .header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        width: 90%;
+        font-size: 0.9em;
+        margin: 0 auto;
+        span {
+          text-transform: uppercase;
+          font-weight: $table-header-font-weight;
+        }
+        button {
+          padding: 0 5px;
+          i {
+            height: auto !important;
+            width: auto !important;
+            font-size: 0.9em;
+          }
+        }
+      }
+      input {
+        border: none;
+        border-bottom: 2px solid #bebebe;
+        width: 90%;
+        margin: 0 auto;
+        background: transparent;
+        &:focus {
+          outline: none;
+          border-bottom: 2px solid $ocean;
+          ~ i.bhi-search {
+            color: $ocean;
+          }
+        }
+      }
+    }
+    item > span {
+      display: inline-block;
+      max-width: calc(100% - 20px);
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+  }
+  .calendar-container {
+    height: 100%;
+    min-height: 200px;
+    width: 100%;
+    background: #fff;
+    > div {
+      color: $positive;
+      line-height: 3em;
+      font-size: 0.9em;
+      padding-left: 5px;
+      cursor: pointer;
+    }
+    novo-date-picker {
+      .calendar {
+        width: 100%;
+        height: 100%;
+        box-shadow: none;
+        padding: 0 5px 10px;
+        .calendar-top {
+          display: none;
+        }
+      }
+    }
+  }
+  i.bhi-search {
+    color: inherit;
+    position: relative;
+    left: 196px;
+    top: -25px;
+  }
+  span.error-text {
+    color: $negative;
+    position: relative;
+    left: 10px;
+    top: -17px;
+    font-size: x-small;
+  }
+  .filter-null-results {
+    background-color: $white;
+    text-align: center;
+    color: darken($light, 15%);
+    background: transparent;
+    font-weight: 500;
+  }
+}