@covalent/core 3.1.2-beta.4 → 4.0.0

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

@@ -1,58 +0,0 @@
-@import '../../common/styles/rtl';
-:host {
-  vertical-align: middle;
-  @include rtl(text-align, left, right);
-
-  padding: 0;
-  > .td-data-table-cell-content-wrapper {
-    padding: 0 28px;
-    // [layout]
-    box-sizing: border-box;
-    display: flex;
-    // [layout="row"]
-    flex-direction: row;
-    // [layout-align="start center"]
-    align-items: center;
-    align-content: center;
-    max-width: 100%;
-    justify-content: flex-start;
-    &.td-data-table-cell-numeric {
-      // [layout-align="end center"]
-      justify-content: flex-end;
-    }
-    &.td-data-table-cell-align-start {
-      justify-content: flex-start;
-    }
-    &.td-data-table-cell-align-end {
-      justify-content: flex-end;
-    }
-    &.td-data-table-cell-align-center {
-      justify-content: center;
-    }
-  }
-
-  &:first-child > .td-data-table-cell-content-wrapper {
-    @include rtl(padding-left, 24px, initial);
-    @include rtl(padding-right, initial, 24px);
-  }
-  &:last-child > .td-data-table-cell-content-wrapper {
-    @include rtl(padding-left, 28px, 24px);
-    @include rtl(padding-right, 24px, 28px);
-  }
-
-  > * {
-    vertical-align: middle;
-  }
-
-  &.mat-clickable {
-    cursor: pointer;
-
-    &:focus {
-      outline: none;
-    }
-  }
-
-  &.mat-numeric {
-    @include rtl(text-align, right, left);
-  }
-}

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

@@ -1,63 +0,0 @@
-import { EventEmitter, Renderer2, ElementRef } from '@angular/core';
-import { TdDataTableSortingOrder } from '../data-table.component';
-export interface ITdDataTableSortChangeEvent {
-    order: TdDataTableSortingOrder;
-    name: string;
-}
-export declare class TdDataTableColumnComponent {
-    private _elementRef;
-    private _renderer;
-    private _sortOrder;
-    _columnContent: ElementRef;
-    get projectedWidth(): number;
-    /**
-     * name?: string
-     * Sets unique column [name] for [sortable] events.
-     */
-    name: string;
-    /**
-     * sortable?: boolean
-     * Enables sorting events, sort icons and active column states.
-     * Defaults to 'false'
-     */
-    sortable: boolean;
-    /**
-     * active?: boolean
-     * Sets column to active state when 'true'.
-     * Defaults to 'false'
-     */
-    active: boolean;
-    /**
-     * numeric?: boolean
-     * Makes column follow the numeric data-table specs and sort icon.
-     * Defaults to 'false'
-     */
-    numeric: boolean;
-    /**
-     * if column sort order is present
-     */
-    isColumnSortOrder: boolean;
-    /**
-     * sortOrder?: ['ASC' | 'DESC'] or TdDataTableSortingOrder
-     * Sets the sort order of column.
-     * Defaults to 'ASC' or TdDataTableSortingOrder.Ascending
-     */
-    set sortOrder(order: 'ASC' | 'DESC');
-    /**
-     * sortChange?: function
-     * Event emitted when the column headers are clicked. [sortable] needs to be enabled.
-     * Emits an [ITdDataTableSortChangeEvent] implemented object.
-     */
-    sortChange: EventEmitter<ITdDataTableSortChangeEvent>;
-    get bindClickable(): boolean;
-    get bingSortable(): boolean;
-    get bindActive(): boolean;
-    get bindNumeric(): boolean;
-    constructor(_elementRef: ElementRef, _renderer: Renderer2);
-    /**
-     * Listening to click event on host to throw a sort event
-     */
-    handleClick(): void;
-    isAscending(): boolean;
-    isDescending(): boolean;
-}

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

@@ -1,80 +0,0 @@
-@import '../../common/styles/rtl';
-
-:host {
-  white-space: nowrap;
-  position: relative;
-  padding: 0;
-  > .td-data-table-heading {
-    padding: 0 28px;
-  }
-
-  &:first-child > .td-data-table-heading {
-    @include rtl(padding-left, 24px, initial);
-    @include rtl(padding-right, initial, 24px);
-  }
-  &:last-child > .td-data-table-heading {
-    @include rtl(padding-left, 28px, 24px);
-    @include rtl(padding-right, 24px, 28px);
-  }
-
-  mat-icon {
-    height: 16px;
-    width: 16px;
-    font-size: 16px !important;
-    line-height: 16px !important;
-
-    &.td-data-table-sort-icon {
-      opacity: 0;
-      transition: transform 0.25s;
-      position: absolute;
-      top: 0;
-      &.display-numeric {
-        right: 0;
-      }
-      &.mat-asc {
-        transform: rotate(0deg);
-      }
-
-      &.mat-desc {
-        transform: rotate(180deg);
-      }
-    }
-  }
-
-  &:hover.mat-sortable mat-icon.td-data-table-sort-icon,
-  &.mat-active.mat-sortable mat-icon.td-data-table-sort-icon {
-    opacity: 1;
-  }
-
-  vertical-align: middle;
-  @include rtl(text-align, left, right);
-
-  > * {
-    vertical-align: middle;
-  }
-
-  &.mat-clickable {
-    cursor: pointer;
-
-    &:focus {
-      outline: none;
-    }
-  }
-  .td-data-table-heading {
-    display: inline-block;
-    position: relative;
-  }
-  &.mat-numeric {
-    @include rtl(text-align, right, left);
-    mat-icon.td-data-table-sort-icon {
-      @include rtl(margin-left, -22px, initial);
-      @include rtl(margin-right, initial, -22px);
-    }
-  }
-  &:not(.mat-numeric) {
-    mat-icon.td-data-table-sort-icon {
-      @include rtl(margin-left, 6px, initial);
-      @include rtl(margin-right, initial, 6px);
-    }
-  }
-}

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

@@ -1,20 +0,0 @@
-import { Renderer2, ElementRef } from '@angular/core';
-export declare class TdDataTableColumnRowComponent {
-    protected _elementRef: ElementRef;
-    protected _renderer: Renderer2;
-    constructor(_elementRef: ElementRef, _renderer: Renderer2);
-}
-export declare class TdDataTableRowComponent {
-    private _elementRef;
-    private _renderer;
-    private _selected;
-    set selected(selected: boolean);
-    get selected(): boolean;
-    get height(): number;
-    constructor(_elementRef: ElementRef, _renderer: Renderer2);
-    /**
-     * Listening to click event to explicitly focus the row element.
-     */
-    clickListener(): void;
-    focus(): void;
-}

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

@@ -1,12 +0,0 @@
-:host {
-  border-bottom-style: solid;
-  border-bottom-width: 1px;
-}
-
-:host.td-data-table-row {
-  height: 48px;
-}
-
-:host.td-data-table-column-row {
-  height: 56px;
-}

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

@@ -1,6 +0,0 @@
-import { Renderer2, ElementRef } from '@angular/core';
-export declare class TdDataTableTableComponent {
-    private _elementRef;
-    private _renderer;
-    constructor(_elementRef: ElementRef, _renderer: Renderer2);
-}

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

@@ -1,7 +0,0 @@
-:host {
-  width: 100%;
-  position: relative;
-  border-spacing: 0;
-  overflow: hidden;
-  border-collapse: collapse;
-}

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

@@ -1,356 +0,0 @@
-import { EventEmitter, ChangeDetectorRef, OnDestroy, AfterViewInit, TemplateRef, AfterContentInit, QueryList, ElementRef, OnInit, AfterContentChecked } from '@angular/core';
-import { DomSanitizer, SafeStyle } from '@angular/platform-browser';
-import { TdDataTableRowComponent } from './data-table-row/data-table-row.component';
-import { ITdDataTableSortChangeEvent, TdDataTableColumnComponent } from './data-table-column/data-table-column.component';
-import { TdDataTableTemplateDirective } from './directives/data-table-template.directive';
-import { IControlValueAccessor } from '@covalent/core/common';
-export declare enum TdDataTableSortingOrder {
-    Ascending = "ASC",
-    Descending = "DESC"
-}
-export interface ITdDataTableColumnWidth {
-    min?: number;
-    max?: number;
-}
-export interface ITdDataTableColumn {
-    name: string;
-    label: string;
-    tooltip?: string;
-    numeric?: boolean;
-    format?: (value: any) => any;
-    nested?: boolean;
-    sortable?: boolean;
-    hidden?: boolean;
-    filter?: boolean;
-    width?: ITdDataTableColumnWidth | number;
-    columnSortOrder?: number;
-}
-export interface ITdDataTableSelectEvent {
-    row: any;
-    selected: boolean;
-    index: number;
-}
-export interface ITdDataTableSelectAllEvent {
-    rows: any[];
-    selected: boolean;
-}
-export interface ITdDataTableRowClickEvent {
-    row: any;
-    index: number;
-}
-export interface IInternalColumnWidth {
-    value: number;
-    limit: boolean;
-    index: number;
-    min?: boolean;
-    max?: boolean;
-}
-export declare class TdDataTableBase {
-    _changeDetectorRef: ChangeDetectorRef;
-    constructor(_changeDetectorRef: ChangeDetectorRef);
-}
-export declare const _TdDataTableMixinBase: (new (...args: any[]) => IControlValueAccessor) & typeof TdDataTableBase;
-export declare class TdDataTableComponent extends _TdDataTableMixinBase implements IControlValueAccessor, OnInit, AfterContentInit, AfterContentChecked, AfterViewInit, OnDestroy {
-    private _document;
-    private _elementRef;
-    private _domSanitizer;
-    /** responsive width calculations */
-    private _resizeSubs;
-    private _rowsChangedSubs;
-    private _hostWidth;
-    /** manually resizable columns */
-    private _resizableColumns;
-    private _columnClientX;
-    private _columnResizeSubs;
-    private _resizingColumn;
-    private _onColumnResize;
-    get resizingColumn(): number;
-    get hostWidth(): number;
-    private _widths;
-    private _onResize;
-    /** column header reposition and viewpoort */
-    private _verticalScrollSubs;
-    private _horizontalScrollSubs;
-    private _scrollHorizontalOffset;
-    private _onHorizontalScroll;
-    private _onVerticalScroll;
-    private _rowHeightCache;
-    private _totalHeight;
-    private _hostHeight;
-    private _scrollVerticalOffset;
-    private _offsetTransform;
-    private _fromRow;
-    private _toRow;
-    /**
-     * Returns the offset style with a proper calculation on how much it should move
-     * over the y axis of the total height
-     */
-    get offsetTransform(): SafeStyle;
-    /**
-     * Returns the assumed total height of the rows
-     */
-    get totalHeight(): number;
-    /**
-     * Returns the initial row to render in the viewport
-     */
-    get fromRow(): number;
-    /**
-     * Returns the last row to render in the viewport
-     */
-    get toRow(): number;
-    private _valueChangesSubs;
-    /** internal attributes */
-    private _data;
-    private _virtualData;
-    private _columns;
-    private _selectable;
-    private _clickable;
-    private _multiple;
-    private _allSelected;
-    private _indeterminate;
-    /** sorting */
-    private _sortable;
-    private _sortBy;
-    private _sortOrder;
-    /** shift select */
-    private _shiftPreviouslyPressed;
-    private _lastSelectedIndex;
-    private _firstSelectedIndex;
-    private _firstCheckboxValue;
-    /** template fetching support */
-    private _templateMap;
-    _templates: QueryList<TdDataTableTemplateDirective>;
-    _scrollableDiv: ElementRef;
-    _colElements: QueryList<TdDataTableColumnComponent>;
-    _rows: QueryList<TdDataTableRowComponent>;
-    /**
-     * Returns scroll position to reposition column headers
-     */
-    get columnsLeftScroll(): number;
-    /**
-     * Returns true if all values are selected.
-     */
-    get allSelected(): boolean;
-    /**
-     * Returns true if all values are not deselected
-     * and at least one is.
-     */
-    get indeterminate(): boolean;
-    /**
-     * data?: {[key: string]: any}[]
-     * Sets the data to be rendered as rows.
-     */
-    set data(data: any[]);
-    get data(): any[];
-    get virtualData(): any[];
-    /**
-     * columns?: ITdDataTableColumn[]
-     * Sets additional column configuration. [ITdDataTableColumn.name] has to exist in [data] as key.
-     * Defaults to [data] keys.
-     */
-    set columns(cols: ITdDataTableColumn[]);
-    get columns(): ITdDataTableColumn[];
-    /**
-     * resizableColumns?: boolean
-     * Enables manual column resize.
-     * Defaults to 'false'
-     */
-    set resizableColumns(resizableColumns: boolean);
-    get resizableColumns(): boolean;
-    /**
-     * selectable?: boolean
-     * Enables row selection events, hover and selected row states.
-     * Defaults to 'false'
-     */
-    set selectable(selectable: boolean);
-    get selectable(): boolean;
-    /**
-     * clickable?: boolean
-     * Enables row click events, hover.
-     * Defaults to 'false'
-     */
-    set clickable(clickable: boolean);
-    get clickable(): boolean;
-    /**
-     * multiple?: boolean
-     * Enables multiple row selection. [selectable] needs to be enabled.
-     * Defaults to 'false'
-     */
-    set multiple(multiple: boolean);
-    get multiple(): boolean;
-    /**
-     * sortable?: boolean
-     * Enables sorting events, sort icons and active column states.
-     * Defaults to 'false'
-     */
-    set sortable(sortable: boolean);
-    get sortable(): boolean;
-    /**
-     * sortBy?: string
-     * Sets the active sort column. [sortable] needs to be enabled.
-     */
-    set sortBy(columnName: string);
-    get sortByColumn(): ITdDataTableColumn;
-    /**
-     * sortOrder?: ['ASC' | 'DESC'] or TdDataTableSortingOrder
-     * Sets the sort order of the [sortBy] column. [sortable] needs to be enabled.
-     * Defaults to 'ASC' or TdDataTableSortingOrder.Ascending
-     */
-    set sortOrder(order: 'ASC' | 'DESC');
-    get sortOrderEnum(): TdDataTableSortingOrder;
-    get hasData(): boolean;
-    /**
-     * sortChange?: function
-     * Event emitted when the column headers are clicked. [sortable] needs to be enabled.
-     * Emits an [ITdDataTableSortChangeEvent] implemented object.
-     */
-    sortChange: EventEmitter<ITdDataTableSortChangeEvent>;
-    /**
-     * rowSelect?: function
-     * Event emitted when a row is selected/deselected. [selectable] needs to be enabled.
-     * Emits an [ITdDataTableSelectEvent] implemented object.
-     */
-    rowSelect: EventEmitter<ITdDataTableSelectEvent>;
-    /**
-     * rowClick?: function
-     * Event emitted when a row is clicked.
-     * Emits an [ITdDataTableRowClickEvent] implemented object.
-     */
-    rowClick: EventEmitter<ITdDataTableRowClickEvent>;
-    /**
-     * selectAll?: function
-     * Event emitted when all rows are selected/deselected by the all checkbox. [selectable] needs to be enabled.
-     * Emits an [ITdDataTableSelectAllEvent] implemented object.
-     */
-    selectAll: EventEmitter<ITdDataTableSelectAllEvent>;
-    constructor(_document: any, _elementRef: ElementRef, _domSanitizer: DomSanitizer, _changeDetectorRef: ChangeDetectorRef);
-    /**
-     * compareWith?: function(row, model): boolean
-     * Allows custom comparison between row and model to see if row is selected or not
-     * Default comparation is by reference
-     */
-    compareWith: (row: any, model: any) => boolean;
-    /**
-     * Initialize observable for resize and scroll events
-     */
-    ngOnInit(): void;
-    /**
-     * Loads templates and sets them in a map for faster access.
-     */
-    ngAfterContentInit(): void;
-    /**
-     * Checks hosts native elements widths to see if it has changed (resize check)
-     */
-    ngAfterContentChecked(): void;
-    /**
-     * Registers to an observable that checks if all rows have been rendered
-     * so we can start calculating the widths
-     */
-    ngAfterViewInit(): void;
-    /**
-     * Unsubscribes observables when data table is destroyed
-     */
-    ngOnDestroy(): void;
-    /**
-     * Method that gets executed every time there is a scroll event
-     * Calls the scroll observable
-     */
-    handleScroll(event: Event): void;
-    /**
-     * Returns the width needed for the columns via index
-     */
-    getColumnWidth(index: number): number;
-    getCellValue(column: ITdDataTableColumn, value: any): string;
-    /**
-     * Getter method for template references
-     */
-    getTemplateRef(name: string): TemplateRef<any>;
-    /**
-     * Clears model (ngModel) of component by removing all values in array.
-     */
-    clearModel(): void;
-    /**
-     * Refreshes data table and rerenders [data] and [columns]
-     */
-    refresh(): void;
-    /**
-     * Selects or clears all rows depending on 'checked' value.
-     */
-    _selectAll(checked: boolean): void;
-    /**
-     * Checks if row is selected
-     */
-    isRowSelected(row: any): boolean;
-    /**
-     * Selects or clears a row depending on 'checked' value if the row 'isSelectable'
-     * handles cntrl clicks and shift clicks for multi-select
-     */
-    select(row: any, event: Event, currentSelected: number): void;
-    /**
-     * Overrides the onselectstart method of the document so other text on the page
-     * doesn't get selected when doing shift selections.
-     */
-    disableTextSelection(): void;
-    /**
-     * Resets the original onselectstart method.
-     */
-    enableTextSelection(): void;
-    /**
-     * emits the onRowClickEvent when a row is clicked
-     * if clickable is true and selectable is false then select the row
-     */
-    handleRowClick(row: any, index: number, event: Event): void;
-    /**
-     * Method handle for sort click event in column headers.
-     */
-    handleSort(column: ITdDataTableColumn): void;
-    /**
-     * Handle all keyup events when focusing a data table row
-     */
-    _rowKeyup(event: KeyboardEvent, row: any, index: number): void;
-    /**
-     * Sets column index of the dragged column and initial clientX of column
-     */
-    _handleStartColumnDrag(index: number, event: MouseEvent): void;
-    /**
-     * Calculates new width depending on new clientX of dragger column
-     */
-    _handleColumnDrag(event: MouseEvent | DragEvent): void;
-    /**
-     * Ends dragged flags
-     */
-    _handleEndColumnDrag(): void;
-    /**
-     * Method to prevent the default events
-     */
-    blockEvent(event: Event): void;
-    private _getNestedValue;
-    /**
-     * Does the actual Row Selection
-     */
-    private _doSelection;
-    /**
-     * Calculate all the state of all checkboxes
-     */
-    private _calculateCheckboxState;
-    /**
-     * Calculates the widths for columns and cells depending on content
-     */
-    private _calculateWidths;
-    /**
-     * Adjusts columns after calculation to see if they need to be recalculated.
-     */
-    private _adjustColumnWidhts;
-    /**
-     * Adjusts a single column to see if it can be recalculated
-     */
-    private _adjustColumnWidth;
-    /**
-     * Generic method to calculate column width
-     */
-    private _calculateWidth;
-    /**
-     * Method to calculate the rows to be rendered in the viewport
-     */
-    private _calculateVirtualRows;
-}

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

@@ -1,93 +0,0 @@
-$backdrop-index: 80;
-$checkbox-size: 18px;
-
-.td-data-table-sort-badge {
-  height: 16px;
-  width: 16px;
-  border-radius: 50%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  margin-left: 4px;
-}
-
-:host {
-  display: block;
-  overflow: hidden;
-  .td-data-table-scrollable {
-    position: relative;
-    overflow: auto;
-    height: calc(100% - 56px);
-  }
-}
-
-.td-table-header-label {
-  display: flex;
-}
-
-.td-data-table-column-resizer {
-  &,
-  .td-data-table-column-separator {
-    position: absolute;
-    height: 100%;
-    top: 0;
-  }
-  .td-data-table-column-separator {
-    left: 2px;
-  }
-
-  right: 0;
-  width: 6px;
-  cursor: col-resize;
-  &.td-resizing {
-    cursor: -webkit-grabbing;
-  }
-}
-
-table.td-data-table {
-  width: auto !important;
-  &.mat-selectable tbody > tr.td-data-table-row {
-    transition: background-color 0.2s;
-  }
-
-  &.mat-selectable .td-data-table-column,
-  &.mat-selectable th.td-data-table-column,
-  &.mat-selectable td.td-data-table-cell {
-    &:first-child > .td-data-table-column-content-wrapper {
-      width: 18px;
-      min-width: 18px;
-      padding: 0 24px;
-    }
-    &:nth-child(2) > .td-data-table-column-content-wrapper {
-      padding-left: 0;
-    }
-    [dir='rtl'] & {
-      &:nth-child(2) > .td-data-table-column-content-wrapper {
-        padding-right: 0;
-        padding-left: 28px;
-      }
-    }
-  }
-
-  td.mat-checkbox-cell,
-  th.mat-checkbox-column {
-    min-width: 42px;
-    width: 42px;
-    font-size: 0 !important;
-    mat-pseudo-checkbox {
-      width: $checkbox-size;
-      height: $checkbox-size;
-      ::ng-deep &.mat-pseudo-checkbox-checked::after {
-        width: 11px !important;
-        height: 4px !important;
-      }
-    }
-    mat-checkbox {
-      ::ng-deep .mat-checkbox-inner-container {
-        width: $checkbox-size;
-        height: $checkbox-size;
-        margin: 0;
-      }
-    }
-  }
-}

package/data-table/data-table.module.d.ts

@@ -1,2 +0,0 @@
-export declare class CovalentDataTableModule {
-}