novo-elements 5.1.1 → 5.2.3

package/elements/table/Table.d.ts

@@ -1,184 +1,184 @@
-import { DoCheck, ElementRef, EventEmitter, QueryList } from '@angular/core';
-import { AbstractControl, FormBuilder, FormGroup } from '@angular/forms';
-import { PagedArrayCollection } from '../../services/data-provider/PagedArrayCollection';
-import { NovoLabelService } from '../../services/novo-label-service';
-import { FormUtils } from '../../utils/form-utils/FormUtils';
-export interface NovoTableConfig {
-    paging?: {
-        current: number;
-        itemsPerPage: number;
-        onPageChange: Function;
-        rowOptions?: {
-            value: number;
-            label: string;
-        }[];
-        disablePageSelection?: boolean;
-    };
-    footers?: Array<{
-        columns: Array<string>;
-        method: string;
-        labelColumn: string;
-        label: string;
-    }>;
-    filtering?: boolean | any;
-    sorting?: boolean | any;
-    ordering?: boolean | Function;
-    resizing?: boolean | Function;
-    rowSelectionStyle?: string;
-    rowSelect?: boolean;
-    hasDetails?: boolean;
-    detailsRenderer?: any;
-    expandAll?: boolean;
-    selectAllEnabled?: boolean;
-}
-export declare enum NovoTableMode {
-    VIEW = 1,
-    EDIT = 2
-}
-export declare class NovoTableElement implements DoCheck {
-    labels: NovoLabelService;
-    private formUtils;
-    private builder;
-    filterInputs: QueryList<ElementRef>;
-    config: NovoTableConfig;
-    columns: Array<any>;
-    theme: string;
-    skipSortAndFilterClear: boolean;
-    mode: NovoTableMode;
-    editable: boolean;
-    rowIdentifier: string;
-    name: string;
-    onRowClick: EventEmitter<any>;
-    onRowSelect: EventEmitter<any>;
-    onTableChange: EventEmitter<any>;
-    _dataProvider: PagedArrayCollection<any>;
-    _rows: Array<any>;
-    selected: Array<any>;
-    activeId: number;
-    master: boolean;
-    expandAll: boolean;
-    indeterminate: boolean;
-    lastPage: number;
-    selectedPageCount: number;
-    showSelectAllMessage: boolean;
-    currentSortColumn: any;
-    pagedData: Array<any>;
-    pageSelected: any;
-    toggledDropdownMap: any;
-    NovoTableMode: typeof NovoTableMode;
-    tableForm: FormGroup;
-    toast: {
-        theme: string;
-        icon: string;
-        message: string;
-    };
-    footers: any[];
-    grossFlagToAvoidTheTableFromBeingUglyWhenHidingTheToast: boolean;
-    loading: boolean;
-    set rows(rows: Array<any>);
-    get rows(): Array<any>;
-    set dataProvider(dp: any);
-    get dataProvider(): any;
-    get editing(): boolean;
-    get formValue(): any;
-    constructor(labels: NovoLabelService, formUtils: FormUtils, builder: FormBuilder);
-    onDropdownToggled(event: any, column: any): void;
-    focusInput(): void;
-    onPageChange(event: any): void;
-    getOptionDataAutomationId(option: any): any;
-    setupColumnDefaults(): void;
-    ngDoCheck(): void;
-    getPageStart(): number;
-    getPageEnd(): number;
-    getRowControlForm(i: any): AbstractControl;
-    onFilterClick(column: any, filter: any): void;
-    onFilterClear(column: any): void;
-    clearAllSortAndFilters(): void;
-    /**
-     * @description This method updates the row data to reflect the active filters.
-     */
-    onFilterChange(event?: Event): void;
-    escapeCharacters(filter: any): any;
-    isFilterActive(column: any, filter: any): boolean;
-    onSortChange(column: any): void;
-    fireTableChangeEvent(): void;
-    findColumnIndex(value: any): number;
-    onOrderChange(event: any): void;
-    expandAllOnPage(expanded: any): void;
-    selectPage(data?: any): void;
-    selectAll(value: any): void;
-    rowSelectHandler(data?: any): void;
-    emitSelected(selected: any): void;
-    rowClickHandler(row: any): void;
-    getDefaultOptions(column: any): any[];
-    onCalenderSelect(column: any, event: any): void;
-    onFilterKeywords(config: any): void;
-    /**
-     * @description Sets the Table into EDIT mode, based on the row/column passed you can enter in a few states
-     * (1) setTableEdit() - don't pass any to put the FULL table into edit mode
-     * (2) setTableEdit(1) - pass only row to put that FULL row of the table into edit mode
-     * (3) setTableEdit(1, 1) - pass row and column to put that column of the row of the table into edit mode
-     * @memberOf NovoTableElement
-     */
-    setTableEdit(rowNumber?: number, columnNumber?: number): void;
-    /**
-     * @description Leaves edit mode for the Table and puts everything back to VIEW only
-     * @memberOf NovoTableElement
-     * @param cancel - whether or not to save data or undo
-     */
-    private leaveEditMode;
-    /**
-     * @description Adds a new row into the table to be edited, can be called from a local reference of the table in your template
-     * @memberOf NovoTableElement
-     */
-    addEditableRow(defaultValue?: any): void;
-    /**
-     * @description Validates the Form inside of the Table, if there are errors it will display/return the errors for each row.
-     * If there are no errors, then it will return ONLY the changed data for each row, the data returned will be in the form:
-     * { id: ID_OF_RECORD, key: value } -- data that was updated
-     * { id: undefined, key: value } -- data that was added
-     * @memberOf NovoTableElement
-     */
-    validateAndGetUpdatedData(): {
-        changed?: any[];
-        errors?: {
-            errors: any;
-            row: any;
-            index: number;
-        }[];
-    };
-    /**
-     * @description Refresh the data provider and leave edit mode
-     * @memberOf NovoTableElement
-     */
-    cancelEditing(): void;
-    /**
-     * @description Refresh the data provider and leave edit mode
-     * @memberOf NovoTableElement
-     */
-    saveChanges(): void;
-    /**
-     * @description Displays a toast message inside of the table
-     * @memberOf NovoTableElement
-     */
-    displayToastMessage(toast: {
-        icon: string;
-        theme: string;
-        message: string;
-    }, hideDelay?: number): void;
-    /**
-     * @description Force hide the toast message
-     * @memberOf NovoTableElement
-     */
-    hideToastMessage(): void;
-    /**
-     * @description display the loading overlay on the table
-     * @memberOf NovoTableElement
-     */
-    toggleLoading(show: boolean): void;
-    /**
-     * @description hide a column in edit or view mode
-     * @memberOf NovoTableElement
-     */
-    isColumnHidden(column: any): boolean;
-}
+import { DoCheck, ElementRef, EventEmitter, QueryList } from '@angular/core';
+import { AbstractControl, FormBuilder, FormGroup } from '@angular/forms';
+import { PagedArrayCollection } from '../../services/data-provider/PagedArrayCollection';
+import { NovoLabelService } from '../../services/novo-label-service';
+import { FormUtils } from '../../utils/form-utils/FormUtils';
+export interface NovoTableConfig {
+    paging?: {
+        current: number;
+        itemsPerPage: number;
+        onPageChange: Function;
+        rowOptions?: {
+            value: number;
+            label: string;
+        }[];
+        disablePageSelection?: boolean;
+    };
+    footers?: Array<{
+        columns: Array<string>;
+        method: string;
+        labelColumn: string;
+        label: string;
+    }>;
+    filtering?: boolean | any;
+    sorting?: boolean | any;
+    ordering?: boolean | Function;
+    resizing?: boolean | Function;
+    rowSelectionStyle?: string;
+    rowSelect?: boolean;
+    hasDetails?: boolean;
+    detailsRenderer?: any;
+    expandAll?: boolean;
+    selectAllEnabled?: boolean;
+}
+export declare enum NovoTableMode {
+    VIEW = 1,
+    EDIT = 2
+}
+export declare class NovoTableElement implements DoCheck {
+    labels: NovoLabelService;
+    private formUtils;
+    private builder;
+    filterInputs: QueryList<ElementRef>;
+    config: NovoTableConfig;
+    columns: Array<any>;
+    theme: string;
+    skipSortAndFilterClear: boolean;
+    mode: NovoTableMode;
+    editable: boolean;
+    rowIdentifier: string;
+    name: string;
+    onRowClick: EventEmitter<any>;
+    onRowSelect: EventEmitter<any>;
+    onTableChange: EventEmitter<any>;
+    _dataProvider: PagedArrayCollection<any>;
+    _rows: Array<any>;
+    selected: Array<any>;
+    activeId: number;
+    master: boolean;
+    expandAll: boolean;
+    indeterminate: boolean;
+    lastPage: number;
+    selectedPageCount: number;
+    showSelectAllMessage: boolean;
+    currentSortColumn: any;
+    pagedData: Array<any>;
+    pageSelected: any;
+    toggledDropdownMap: any;
+    NovoTableMode: typeof NovoTableMode;
+    tableForm: FormGroup;
+    toast: {
+        theme: string;
+        icon: string;
+        message: string;
+    };
+    footers: any[];
+    grossFlagToAvoidTheTableFromBeingUglyWhenHidingTheToast: boolean;
+    loading: boolean;
+    set rows(rows: Array<any>);
+    get rows(): Array<any>;
+    set dataProvider(dp: any);
+    get dataProvider(): any;
+    get editing(): boolean;
+    get formValue(): any;
+    constructor(labels: NovoLabelService, formUtils: FormUtils, builder: FormBuilder);
+    onDropdownToggled(event: any, column: any): void;
+    focusInput(): void;
+    onPageChange(event: any): void;
+    getOptionDataAutomationId(option: any): any;
+    setupColumnDefaults(): void;
+    ngDoCheck(): void;
+    getPageStart(): number;
+    getPageEnd(): number;
+    getRowControlForm(i: any): AbstractControl;
+    onFilterClick(column: any, filter: any): void;
+    onFilterClear(column: any): void;
+    clearAllSortAndFilters(): void;
+    /**
+     * @description This method updates the row data to reflect the active filters.
+     */
+    onFilterChange(event?: Event): void;
+    escapeCharacters(filter: any): any;
+    isFilterActive(column: any, filter: any): boolean;
+    onSortChange(column: any): void;
+    fireTableChangeEvent(): void;
+    findColumnIndex(value: any): number;
+    onOrderChange(event: any): void;
+    expandAllOnPage(expanded: any): void;
+    selectPage(data?: any): void;
+    selectAll(value: any): void;
+    rowSelectHandler(data?: any): void;
+    emitSelected(selected: any): void;
+    rowClickHandler(row: any): void;
+    getDefaultOptions(column: any): any[];
+    onCalenderSelect(column: any, event: any): void;
+    onFilterKeywords(config: any): void;
+    /**
+     * @description Sets the Table into EDIT mode, based on the row/column passed you can enter in a few states
+     * (1) setTableEdit() - don't pass any to put the FULL table into edit mode
+     * (2) setTableEdit(1) - pass only row to put that FULL row of the table into edit mode
+     * (3) setTableEdit(1, 1) - pass row and column to put that column of the row of the table into edit mode
+     * @memberOf NovoTableElement
+     */
+    setTableEdit(rowNumber?: number, columnNumber?: number): void;
+    /**
+     * @description Leaves edit mode for the Table and puts everything back to VIEW only
+     * @memberOf NovoTableElement
+     * @param cancel - whether or not to save data or undo
+     */
+    private leaveEditMode;
+    /**
+     * @description Adds a new row into the table to be edited, can be called from a local reference of the table in your template
+     * @memberOf NovoTableElement
+     */
+    addEditableRow(defaultValue?: any): void;
+    /**
+     * @description Validates the Form inside of the Table, if there are errors it will display/return the errors for each row.
+     * If there are no errors, then it will return ONLY the changed data for each row, the data returned will be in the form:
+     * { id: ID_OF_RECORD, key: value } -- data that was updated
+     * { id: undefined, key: value } -- data that was added
+     * @memberOf NovoTableElement
+     */
+    validateAndGetUpdatedData(): {
+        changed?: any[];
+        errors?: {
+            errors: any;
+            row: any;
+            index: number;
+        }[];
+    };
+    /**
+     * @description Refresh the data provider and leave edit mode
+     * @memberOf NovoTableElement
+     */
+    cancelEditing(): void;
+    /**
+     * @description Refresh the data provider and leave edit mode
+     * @memberOf NovoTableElement
+     */
+    saveChanges(): void;
+    /**
+     * @description Displays a toast message inside of the table
+     * @memberOf NovoTableElement
+     */
+    displayToastMessage(toast: {
+        icon: string;
+        theme: string;
+        message: string;
+    }, hideDelay?: number): void;
+    /**
+     * @description Force hide the toast message
+     * @memberOf NovoTableElement
+     */
+    hideToastMessage(): void;
+    /**
+     * @description display the loading overlay on the table
+     * @memberOf NovoTableElement
+     */
+    toggleLoading(show: boolean): void;
+    /**
+     * @description hide a column in edit or view mode
+     * @memberOf NovoTableElement
+     */
+    isColumnHidden(column: any): boolean;
+}

package/elements/table/Table.module.d.ts

@@ -1,2 +1,2 @@
-export declare class NovoTableModule {
-}
+export declare class NovoTableModule {
+}

package/elements/table/Table.scss

@@ -0,0 +1,585 @@
+$table-header-font-weight: 400;
+$table-header-font-color: #757575;
+$table-cell-padding: 1.2rem;
+$table-condensed-cell-padding: $table-cell-padding/2;
+$table-bg: #fff;
+$table-bg-accent: #f4f4f4;
+$table-bg-hover: rgba(0, 0, 0, 0.12);
+$table-bg-active: $table-bg-hover;
+$table-border-color: #f5f5f5;
+novo-table {
+  width: 100%;
+  display: block;
+  > header {
+    novo-table-header {
+      padding: 10px;
+      button {
+        height: 39px;
+        margin-right: 10px;
+        &:last-child {
+          margin-right: 0;
+        }
+      }
+    }
+    div.header-actions {
+      display: flex;
+      align-items: center;
+      > novo-pagination {
+        flex: 1;
+        > h5 {
+          margin-left: 0;
+        }
+        novo-select {
+          .novo-select-list {
+            transform: translateY(5%) !important;
+          }
+        }
+      }
+      > novo-table-actions {
+        padding: 10px;
+        display: flex;
+        align-items: center;
+        > * {
+          margin-right: 10px;
+          &:last-child {
+            margin-right: 0;
+          }
+        }
+        > button {
+          height: 39px;
+        }
+      }
+    }
+  }
+  > .table-container {
+    overflow-x: auto;
+    overflow-y: hidden;
+    width: 100%;
+    display: block;
+  }
+  novo-table-footer {
+    display: flex;
+  }
+  tfoot.novo-table-total-footer {
+    td {
+      padding: $table-cell-padding;
+    }
+  }
+  &.editing {
+    th .th-title,
+    th novo-dropdown,
+    novo-pagination h5,
+    novo-pagination novo-select,
+    novo-pagination ul.pager {
+      pointer-events: none;
+      opacity: 0.7;
+    }
+    novo-control {
+      margin-top: 0 !important;
+    }
+  }
+  &.novo-table-loading {
+    position: relative;
+  }
+  div.novo-table-loading-overlay {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.07);
+    z-index: 9999;
+  }
+  novo-form {
+    max-width: inherit;
+    td.novo-form-row {
+      width: inherit !important;
+    }
+  }
+}
+
+// Baseline styles
+.table {
+  width: 100%;
+  max-width: 100%;
+  background-color: $table-bg;
+  > tbody,
+  > thead {
+    > tr {
+      > td,
+      > th {
+        position: relative;
+        text-align: left;
+        padding: $table-condensed-cell-padding;
+        button {
+          padding: 5px !important;
+          width: inherit !important;
+          height: inherit !important;
+        }
+        .th-title {
+          padding: 5px 5px 5px 0;
+        }
+        vertical-align: middle;
+        &.checkbox {
+          text-align: center;
+          padding-bottom: 15px;
+          > novo-checkbox {
+            justify-content: center;
+          }
+        }
+      }
+      &.table-selection-row,
+      &.active {
+        background-color: lighten($positive, 30%) !important;
+      }
+    }
+  }
+  > thead > tr > th {
+    &.sorted {
+      background: rgba($positive, 0.2);
+    }
+  }
+  > thead > tr > th {
+    font-weight: $table-header-font-weight;
+    color: $table-header-font-color;
+    vertical-align: bottom;
+    border-bottom: 1px solid #f4f4f4;
+    border-top: 1px solid #f4f4f4;
+    border-right: 1px solid #f4f4f4;
+    padding: 0.75rem;
+    &.over {
+      background: #eee;
+      border-right: 2px double #000 !important;
+      * {
+        pointer-events: none;
+      }
+    }
+    .th-group {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      novo-dropdown.column-filters {
+        button.filtered {
+          i {
+            color: $positive;
+          }
+        }
+      }
+      .th-title {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        padding: 10px 10px 10px 5px;
+        border-radius: 3px;
+        font-weight: $table-header-font-weight;
+        &.sortable {
+          cursor: pointer;
+          label {
+            cursor: pointer; // chrome user agent style will override this unless explicitly set on the element
+            margin-right: 10px;
+          }
+        }
+        &:hover {
+          .table-sort-icons {
+            opacity: 1;
+            i {
+              &.bhi-arrow-down {
+                color: lighten(#757575, 15%);
+              }
+              &.bhi-arrow-up {
+                color: darken(#757575, 10%);
+              }
+            }
+          }
+        }
+        .table-sort-icons {
+          display: flex;
+          flex-direction: row;
+          opacity: 0.3;
+          transition: all 200ms ease-in-out;
+          i {
+            font-size: 0.8em;
+            margin: 0;
+            &.bhi-arrow-down {
+              padding-top: 5px;
+            }
+          }
+          &.asc {
+            opacity: 1;
+            i {
+              &.bhi-arrow-down {
+                color: lighten(#757575, 15%);
+              }
+              &.bhi-arrow-up {
+                color: $positive;
+              }
+            }
+          }
+          &.desc {
+            opacity: 1;
+            i {
+              &.bhi-arrow-down {
+                color: $positive;
+              }
+              &.bhi-arrow-up {
+                color: lighten(#757575, 15%);
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+  > tbody + tbody {
+    border-top: 1px solid rgba(0, 0, 0, 0.12);
+  }
+  .table-message {
+    tr,
+    td {
+      background-color: $white !important;
+    }
+  }
+  .table {
+    background-color: $table-bg;
+  }
+  .row-action {
+    padding: 0.3rem !important;
+  }
+  tr.details-row {
+    td {
+      padding-top: 0 !important;
+    }
+  }
+  .no-border {
+    border: 0;
+  }
+  .table-message,
+  .no-matching-records,
+  .table-empty-message {
+    color: $grey;
+    margin: 40px 0;
+    vertical-align: middle;
+  }
+  .table-error-message {
+    color: $grey;
+    margin: 40px 0;
+    vertical-align: middle;
+  }
+  .table-loading {
+    display: flex;
+    vertical-align: middle;
+    align-items: center;
+    justify-content: center;
+    background: $white;
+  }
+  novo-checkbox {
+    .check-box-group {
+      color: $grey;
+      margin-right: 0;
+      &.checked {
+        color: $positive;
+      }
+      .bhi-checkbox-indeterminate {
+        color: $positive;
+      }
+    }
+  }
+}
+
+.dropdown-container.table-dropdown {
+  right: -15px;
+  min-width: 230px;
+  max-width: 230px;
+  max-height: 500px;
+  overflow-x: hidden;
+  overflow-y: auto;
+  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;
+        }
+      }
+    }
+    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;
+        }
+      }
+    }
+  }
+}
+
+// Bordered version
+// Add horizontal borders between columns.
+.table-bordered {
+  tbody,
+  thead,
+  tfoot {
+    tr {
+      td,
+      th {
+        border-bottom: 1px solid $table-border-color;
+      }
+    }
+  }
+  > thead > tr {
+    > td,
+    > th {
+      border-bottom-width: 2px;
+    }
+  }
+}
+
+// Zebra-striping
+// Default zebra-stripe styles (alternating gray and transparent backgrounds)
+.table-striped:not(.table-details) {
+  > tbody tr:nth-of-type(odd):not(.table-selection-row) {
+    background-color: $table-bg-accent;
+    td {
+      background-color: $table-bg-accent;
+    }
+  }
+}
+
+.table-striped.table-details {
+  > tbody tr:nth-of-type(4n + 2),
+  > tbody tr:nth-of-type(4n + 1) {
+    background-color: $table-bg-accent;
+  }
+}
+
+// Hover effect
+.table-hover {
+  > tbody > tr:hover {
+    background-color: $table-bg-hover;
+  }
+}
+
+.handle {
+  display: block;
+  position: absolute;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 6px;
+  cursor: col-resize;
+}
+
+novo-table {
+  &[dark] {
+    .table > thead > tr > th {
+      border-right: 1px solid rgba(#f4f4f4, 0.04);
+    }
+    .table-striped:not(.table-details) {
+      > tbody tr:nth-of-type(odd) {
+        background-color: rgba($table-bg-accent, 0.04);
+        td {
+          background-color: transparent;
+        }
+      }
+    }
+    .table-striped.table-details {
+      > tbody tr:nth-of-type(4n + 2),
+      > tbody tr:nth-of-type(4n + 1) {
+        background-color: rgba($table-bg-accent, 0.04);
+      }
+    }
+  }
+  @each $analytics, $color in $analytics-colors {
+    &[theme='#{$analytics}'] {
+      > header {
+        background: $color;
+        color: #fff;
+        novo-pagination {
+          background: rgba(0, 0, 0, 0.15);
+          > * {
+            color: $white;
+            opacity: 1;
+          }
+          .page {
+            color: $white;
+          }
+          h5.rows {
+            opacity: 0.75;
+          }
+          novo-select {
+            div[type='button'] {
+              color: $white;
+              border-bottom: 1px solid rgba(255, 255, 255, 0.15);
+              i {
+                color: $white !important;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+  @each $entity, $color in $entity-colors {
+    &[theme='#{$entity}'] {
+      > header {
+        background: $color;
+        color: #fff;
+        novo-pagination {
+          background: rgba(0, 0, 0, 0.15);
+          > * {
+            color: $white;
+            opacity: 1;
+          }
+          .page {
+            color: $white;
+          }
+          h5.rows {
+            opacity: 0.75;
+          }
+          novo-select {
+            div[type='button'] {
+              color: $white;
+              border-bottom: 1px solid rgba(255, 255, 255, 0.15);
+              i {
+                color: $white !important;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+  @each $basic, $color in $app-colors {
+    &[theme='#{$basic}'] {
+      > header {
+        background: $color;
+        color: #fff;
+        novo-pagination {
+          background: rgba(0, 0, 0, 0.15);
+          > * {
+            color: $white;
+            opacity: 1;
+          }
+          .page {
+            color: $white;
+          }
+          h5.rows {
+            opacity: 0.75;
+          }
+          novo-select {
+            div[type='button'] {
+              color: $white;
+              border-bottom: 1px solid rgba(255, 255, 255, 0.15);
+              i {
+                color: $white !important;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+  &[dark] {
+    > header {
+      color: #fff;
+      novo-pagination {
+        background: rgba(0, 0, 0, 0.15);
+        > * {
+          color: $white;
+          opacity: 1;
+        }
+        .page {
+          color: $white;
+          &.active {
+            color: #fff;
+            background: rgba(0, 0, 0, 0.15);
+          }
+        }
+        h5.rows {
+          opacity: 0.75;
+        }
+        novo-select {
+          div[type='button'] {
+            color: $white;
+            border-bottom: 1px solid rgba(255, 255, 255, 0.15);
+            i {
+              color: $white !important;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+th.dragging {
+  opacity: 0.4;
+}