From ae454c79091ea97261d88f1932925d1063899ae2 Mon Sep 17 00:00:00 2001 From: Vishwajeet Vatharkar Date: Tue, 12 Sep 2017 22:56:04 +0530 Subject: [PATCH 01/16] chore(): typo in changelog fixed (#869) --- docs/CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/CHANGELOG.md b/docs/CHANGELOG.md index 6c79993179..b552fe5395 100644 --- a/docs/CHANGELOG.md +++ b/docs/CHANGELOG.md @@ -20,7 +20,7 @@ Please check the Angular Material `beta.10` [changelog](https://github.com/angul #### CovalentDynamicFormsModule -In order to ensure proper i18n support, all error messages mut be provided by the developer. +In order to ensure proper i18n support, all error messages must be provided by the developer. e.g. From ccc8ccbc99c947eee4c6babb3e7c60532fffebf5 Mon Sep 17 00:00:00 2001 From: Jenn Medellin <54321jenn@gmail.com> Date: Tue, 19 Sep 2017 11:17:13 -0700 Subject: [PATCH 02/16] chore(patterns): use routerLink (#880) - replace all href elements with routerLink in all paterns pages --- .../components/design-patterns/alerts/alerts.component.html | 2 +- .../components/design-patterns/cards/cards.component.html | 6 +++--- .../management-list/management-list.component.html | 4 ++-- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/src/app/components/design-patterns/alerts/alerts.component.html b/src/app/components/design-patterns/alerts/alerts.component.html index d0fd356134..ef6b7f9b02 100644 --- a/src/app/components/design-patterns/alerts/alerts.component.html +++ b/src/app/components/design-patterns/alerts/alerts.component.html @@ -39,7 +39,7 @@

Solution

Angular Material Snackbars - + launch Covalent Dialogs diff --git a/src/app/components/design-patterns/cards/cards.component.html b/src/app/components/design-patterns/cards/cards.component.html index 16c4860d2d..ca3b80fe98 100644 --- a/src/app/components/design-patterns/cards/cards.component.html +++ b/src/app/components/design-patterns/cards/cards.component.html @@ -118,7 +118,7 @@

Solution

Login Card Card with form -

In special cases, cards may contain form elements, like the login card. However, in most sitautions, we recommend using the Card Over full page layout for forms.

+

In special cases, cards may contain form elements, like the login card. However, in most sitautions, we recommend using the Card Over full page layout for forms.
@@ -219,7 +219,7 @@

Solution

Metadata List Card Card with metadata for an item detail -

Cards support many rich components, including our management list. When adding multiple lists to a card, seperate them using md-divider and consider adding md-subheader.

+

Cards support many rich components, including our management list. When adding multiple lists to a card, seperate them using md-divider and consider adding md-subheader.
@@ -333,7 +333,7 @@

Wed, July 4, 2016 09:11 AM

CRUD Manage List Card Card with faux-columns & search -

In this example, notice the search component in the top left. Also, using the flex model, you can simulate columns by using the same layout on each row. See the management list for more implementation details.

+

In this example, notice the search component in the top left. Also, using the flex model, you can simulate columns by using the same layout on each row. See the management list for more implementation details.
diff --git a/src/app/components/design-patterns/management-list/management-list.component.html b/src/app/components/design-patterns/management-list/management-list.component.html index 47283da060..af8b218d5c 100644 --- a/src/app/components/design-patterns/management-list/management-list.component.html +++ b/src/app/components/design-patterns/management-list/management-list.component.html @@ -42,13 +42,13 @@

Solution

This example contains a variety of components including:

- + launch Covalent Search

td-search

 - + launch Covalent Paging

td-paging-bar

From 556a42c5388bba56326b03a63506652d5b3f1c46 Mon Sep 17 00:00:00 2001 From: Doge Date: Sat, 30 Sep 2017 18:19:20 -0700 Subject: [PATCH 03/16] chore(): URLs to pages that no longer exist in style-guide/colors doc (#888) chore(): URLs to pages that no longer exist in style-guide/colors doc --- src/app/components/style-guide/colors/colors.component.html | 5 ----- 1 file changed, 5 deletions(-) diff --git a/src/app/components/style-guide/colors/colors.component.html b/src/app/components/style-guide/colors/colors.component.html index 32bff06925..2e9000faa1 100644 --- a/src/app/components/style-guide/colors/colors.component.html +++ b/src/app/components/style-guide/colors/colors.component.html @@ -324,11 +324,6 @@

View title

Material Design Dark Color Palette - - launch - OSX Material Design System Color Picker - - launch Material Colors OSX Desktop App From 8a9b4db4ee89869a5f02b906b07c30f8d49a7bff Mon Sep 17 00:00:00 2001 From: Ed Morales Date: Mon, 2 Oct 2017 12:17:26 -0700 Subject: [PATCH 04/16] fix(paging): stop css bleed to all md-selects from paging scss (#894) closes https://github.com/Teradata/covalent/issues/872 --- .../core/paging/paging-bar.component.scss | 38 +++++++++---------- 1 file changed, 19 insertions(+), 19 deletions(-) diff --git a/src/platform/core/paging/paging-bar.component.scss b/src/platform/core/paging/paging-bar.component.scss index e29dca0cf0..4fee42c30d 100644 --- a/src/platform/core/paging/paging-bar.component.scss +++ b/src/platform/core/paging/paging-bar.component.scss @@ -1,27 +1,27 @@ :host { display: block; -} -.td-paging-bar { - height: 48px; - /deep/ > * { - margin: 0 10px; + .td-paging-bar { + height: 48px; + /deep/ > * { + margin: 0 10px; + } } -} -[md-icon-button] { - font-size: 12px; - font-weight: normal; -} -/deep/ md-select { - &.mat-select { - padding-top: 0px; + [md-icon-button] { + font-size: 12px; + font-weight: normal; } - & { - .mat-select-trigger { - min-width: 44px; - font-size: 12px; + /deep/ md-select { + &.mat-select { + padding-top: 0px; } - .mat-select-underline { - display: none; + & { + .mat-select-trigger { + min-width: 44px; + font-size: 12px; + } + .mat-select-underline { + display: none; + } } } } \ No newline at end of file From 42c83987ef3498c52fa990ef974e819d1d606621 Mon Sep 17 00:00:00 2001 From: Ed Morales Date: Mon, 2 Oct 2017 13:56:31 -0700 Subject: [PATCH 05/16] fix(json-formatter): represent array of arrays properly (#899) --- .../components/json-formatter/json-formatter.component.ts | 4 ++++ src/platform/core/json-formatter/json-formatter.component.ts | 5 +++++ 2 files changed, 9 insertions(+) diff --git a/src/app/components/components/json-formatter/json-formatter.component.ts b/src/app/components/components/json-formatter/json-formatter.component.ts index 5d8524f54c..135671a742 100644 --- a/src/app/components/components/json-formatter/json-formatter.component.ts +++ b/src/app/components/components/json-formatter/json-formatter.component.ts @@ -37,6 +37,10 @@ export class JsonFormatterDemoComponent { 'numberProperty': 10000, 'booleanProperty': true, 'numberArray': [1, 2, 3, 4, 5, 6], + 'arrayOfArrays': [ + [1, [2, 3]], + [3, 4], + ], 'objectArray': [{ 'prop': undefined, }, { diff --git a/src/platform/core/json-formatter/json-formatter.component.ts b/src/platform/core/json-formatter/json-formatter.component.ts index 3e73fc5463..c2ff3cdd42 100644 --- a/src/platform/core/json-formatter/json-formatter.component.ts +++ b/src/platform/core/json-formatter/json-formatter.component.ts @@ -137,6 +137,8 @@ export class TdJsonFormatterComponent { return value.toString() .replace(/[\r\n]/g, '') .replace(/\{.*\}/, '') + '{…}'; + } else if (Array.isArray(value)) { + return this.getObjectName() + ' [' + value.length + ']'; } return value; } @@ -150,6 +152,9 @@ export class TdJsonFormatterComponent { if (!object) { return 'null'; } + if (Array.isArray(object)) { + return 'object'; + } let date: Date = new Date(object); if (Object.prototype.toString.call(date) === '[object Date]') { if (!Number.isNaN(date.getTime())) { From 013df521bc55818ee7bfe7cf318862ab02787abd Mon Sep 17 00:00:00 2001 From: Ed Morales Date: Mon, 2 Oct 2017 14:00:52 -0700 Subject: [PATCH 06/16] fix(data-table): show which column was deselected when using single selection mode (#896) closes https://github.com/Teradata/covalent/issues/881 --- src/platform/core/data-table/data-table.component.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/platform/core/data-table/data-table.component.ts b/src/platform/core/data-table/data-table.component.ts index 15b0d323dd..64c8b3e78a 100644 --- a/src/platform/core/data-table/data-table.component.ts +++ b/src/platform/core/data-table/data-table.component.ts @@ -841,10 +841,10 @@ export class TdDataTableComponent implements ControlValueAccessor, OnInit, After */ private _doSelection(row: any): boolean { let wasSelected: boolean = this.isRowSelected(row); - if (!this._multiple) { - this.clearModel(); - } if (!wasSelected) { + if (!this._multiple) { + this.clearModel(); + } this._value.push(row); } else { // compare items by [compareWith] function From 6590cf2497868d1151c36492f3fc75c4a3b53d8c Mon Sep 17 00:00:00 2001 From: Ed Morales Date: Mon, 2 Oct 2017 14:14:02 -0700 Subject: [PATCH 07/16] fix(virtual-scroll): re-render rows with proper height when replacing the data set (#897) closes https://github.com/Teradata/covalent/issues/878 --- ...virtual-scroll-container.component.spec.ts | 30 +++++++++++++++++++ .../virtual-scroll-container.component.ts | 14 ++++++--- 2 files changed, 40 insertions(+), 4 deletions(-) diff --git a/src/platform/core/virtual-scroll/virtual-scroll-container.component.spec.ts b/src/platform/core/virtual-scroll/virtual-scroll-container.component.spec.ts index 468b165278..ef21ce5f44 100644 --- a/src/platform/core/virtual-scroll/virtual-scroll-container.component.spec.ts +++ b/src/platform/core/virtual-scroll/virtual-scroll-container.component.spec.ts @@ -77,6 +77,36 @@ describe('Component: VirtualScrollContainer', () => { }); }); }); + + it('should render rows, clear them and render them again', (done: DoneFn) => { + let fixture: ComponentFixture = TestBed.createComponent(TestBasicVirtualScrollComponent); + let component: TestBasicVirtualScrollComponent = fixture.debugElement.componentInstance; + let virtualScrollComponent: DebugElement = fixture.debugElement.query(By.directive(TdVirtualScrollContainerComponent)); + + component.height = 100; + let data: any[] = component.data; + fixture.detectChanges(); + fixture.whenStable().then(() => { + fixture.detectChanges(); + fixture.whenStable().then(() => { + expect(virtualScrollComponent.componentInstance.fromRow).toBe(0); + expect(virtualScrollComponent.componentInstance.virtualData.length).toBe(6); + component.data = []; + fixture.detectChanges(); + fixture.whenStable().then(() => { + expect(virtualScrollComponent.componentInstance.fromRow).toBe(0); + expect(virtualScrollComponent.componentInstance.virtualData.length).toBe(0); + component.data = data; + fixture.detectChanges(); + fixture.whenStable().then(() => { + expect(virtualScrollComponent.componentInstance.fromRow).toBe(0); + expect(virtualScrollComponent.componentInstance.virtualData.length).toBe(6); + done(); + }); + }); + }); + }); + }); }); @Component({ diff --git a/src/platform/core/virtual-scroll/virtual-scroll-container.component.ts b/src/platform/core/virtual-scroll/virtual-scroll-container.component.ts index 63ef14f781..4e5f6d37a8 100644 --- a/src/platform/core/virtual-scroll/virtual-scroll-container.component.ts +++ b/src/platform/core/virtual-scroll/virtual-scroll-container.component.ts @@ -1,6 +1,6 @@ import { Component, Directive, Input, Output, EventEmitter, ContentChild, AfterViewInit, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef, QueryList, ViewChildren, ElementRef, HostListener, - Renderer2, AfterViewChecked } from '@angular/core'; + Renderer2, AfterViewChecked, OnDestroy } from '@angular/core'; import { DomSanitizer, SafeStyle } from '@angular/platform-browser'; import { Subscription } from 'rxjs/Subscription'; @@ -15,8 +15,9 @@ const TD_VIRTUAL_OFFSET: number = 2; templateUrl: './virtual-scroll-container.component.html', changeDetection: ChangeDetectionStrategy.OnPush, }) -export class TdVirtualScrollContainerComponent implements AfterViewInit, AfterViewChecked { +export class TdVirtualScrollContainerComponent implements AfterViewInit, AfterViewChecked, OnDestroy { + private _rowChangeSubs: Subscription; private _initialized: boolean = false; private _totalHeight: number = 0; @@ -83,8 +84,7 @@ export class TdVirtualScrollContainerComponent implements AfterViewInit, AfterVi private _changeDetectorRef: ChangeDetectorRef) {} ngAfterViewInit(): void { - let subs: Subscription = this._rows.changes.subscribe(() => { - subs.unsubscribe(); + this._rowChangeSubs = this._rows.changes.subscribe(() => { this._calculateVirtualRows(); }); this._initialized = true; @@ -101,6 +101,12 @@ export class TdVirtualScrollContainerComponent implements AfterViewInit, AfterVi } } + ngOnDestroy(): void { + if (this._rowChangeSubs) { + this._rowChangeSubs.unsubscribe(); + } + } + /** * trackBy?: TrackByFunction * This accepts the same trackBy function [ngFor] does. From 025ead6e6383f6faafd51decda28511cd30b9e44 Mon Sep 17 00:00:00 2001 From: Ed Morales Date: Mon, 2 Oct 2017 14:32:41 -0700 Subject: [PATCH 08/16] fix(data-table): replace hardcoded 100px min width with projected width (#895) * fix(data-table): replace hardcoded 100px min width with projected width also add posibility to override projected min width via configuration closes https://github.com/Teradata/covalent/issues/891 * fix(): add min width to checkbox columns * chore(): make it more explicit with a skipProjection flag --- .../data-table-column.component.html | 2 +- .../data-table-column.component.ts | 11 ++++++- .../core/data-table/data-table.component.html | 4 +-- .../core/data-table/data-table.component.scss | 1 + .../core/data-table/data-table.component.ts | 29 ++++++++----------- 5 files changed, 26 insertions(+), 21 deletions(-) diff --git a/src/platform/core/data-table/data-table-column/data-table-column.component.html b/src/platform/core/data-table/data-table-column/data-table-column.component.html index 075e83b790..8755b16653 100644 --- a/src/platform/core/data-table/data-table-column/data-table-column.component.html +++ b/src/platform/core/data-table/data-table-column/data-table-column.component.html @@ -1,4 +1,4 @@ - + this._columnContent.nativeElement).getBoundingClientRect().width; + } + return 100; + } + /** * name?: string * Sets unique column [name] for [sortable] events. diff --git a/src/platform/core/data-table/data-table.component.html b/src/platform/core/data-table/data-table.component.html index 224698ed5e..6faef52a02 100644 --- a/src/platform/core/data-table/data-table.component.html +++ b/src/platform/core/data-table/data-table.component.html @@ -63,8 +63,8 @@ [numeric]="column.numeric" [hidden]="column.hidden" *ngFor="let column of columns; let i = index" - [style.min-width.px]="getWidth(i)" - [style.max-width.px]="getWidth(i)"> + [style.min-width.px]="getColumnWidth(i)" + [style.max-width.px]="getColumnWidth(i)"> {{column.format ? column.format(getCellValue(column, row)) : getCellValue(column, row)}} { @@ -206,7 +206,7 @@ export class TdDataTableComponent implements ControlValueAccessor, OnInit, After @ViewChild('scrollableDiv') _scrollableDiv: ElementRef; - @ViewChildren('columnElement', {read: ElementRef}) _colElements: QueryList; + @ViewChildren('columnElement') _colElements: QueryList; @ViewChildren(TdDataTableRowComponent) _rows: QueryList; @@ -541,16 +541,6 @@ export class TdDataTableComponent implements ControlValueAccessor, OnInit, After return undefined; } - /** - * Returns the width needed for the cells via index - */ - getWidth(index: number): number { - if (this._colElements && this._colElements.toArray()[index]) { - return this._colElements.toArray()[index].nativeElement.getBoundingClientRect().width; - } - return undefined; - } - getCellValue(column: ITdDataTableColumn, value: any): string { if (column.nested === undefined || column.nested) { return this._getNestedValue(column.name, value); @@ -885,7 +875,7 @@ export class TdDataTableComponent implements ControlValueAccessor, OnInit, After private _calculateWidths(): void { if (this._colElements && this._colElements.length) { this._widths = []; - this._colElements.forEach((col: ElementRef, index: number) => { + this._colElements.forEach((col: TdDataTableColumnComponent, index: number) => { this._adjustColumnWidth(index, this._calculateWidth()); }); this._adjustColumnWidhts(); @@ -949,11 +939,15 @@ export class TdDataTableComponent implements ControlValueAccessor, OnInit, After min: false, max: false, }; + // flag to see if we need to skip the min width projection + // depending if a width or min width has been provided + let skipMinWidthProjection: boolean = false; if (this.columns[index]) { // if the provided width has min/max, then we check to see if we need to set it if (typeof this.columns[index].width === 'object') { let widthOpts: ITdDataTableColumnWidth = this.columns[index].width; // if the column width is less than the configured min, we override it + skipMinWidthProjection = (widthOpts && !!widthOpts.min); if (widthOpts && widthOpts.min >= this._widths[index].value) { this._widths[index].value = widthOpts.min; this._widths[index].min = true; @@ -965,12 +959,13 @@ export class TdDataTableComponent implements ControlValueAccessor, OnInit, After // if it has a fixed width, then we just set it } else if (typeof this.columns[index].width === 'number') { this._widths[index].value = this.columns[index].width; - this._widths[index].limit = true; + skipMinWidthProjection = this._widths[index].limit = true; } } - // if there wasnt any width provided, we set a min of 100px - if (this._widths[index].value < 100) { - this._widths[index].value = 100; + // if there wasn't any width or min width provided, we set a min to what the column width min should be + if (!skipMinWidthProjection && + this._widths[index].value < this._colElements.toArray()[index].projectedWidth) { + this._widths[index].value = this._colElements.toArray()[index].projectedWidth; this._widths[index].min = true; this._widths[index].limit = false; } From 33790243daf55b265061b175bd092ec0063fc315 Mon Sep 17 00:00:00 2001 From: Ed Morales Date: Mon, 2 Oct 2017 15:43:28 -0700 Subject: [PATCH 09/16] feat(data-table): allow dynamic row heights in data table even when using its virtual scroll (#898) * fix(data-table): remove cell 48 height css rule so its dynamic * feat(data-table): allow dynamic row heights in data table virtual scroll now we will cache the height of every row and recalculate the height as we keep scrolling * chore(data-table): update demo and docs with better examples and load data from service * chore(): add comments to explain code in PR --- .../data-table/data-table.component.html | 318 +++--------------- .../data-table/data-table.component.ts | 168 ++------- src/app/services/internal-docs.service.ts | 18 + .../data-table-cell.component.scss | 1 - .../data-table-row.component.ts | 8 + .../core/data-table/data-table.component.html | 2 +- .../core/data-table/data-table.component.ts | 180 ++++++---- 7 files changed, 223 insertions(+), 472 deletions(-) diff --git a/src/app/components/components/data-table/data-table.component.html b/src/app/components/components/data-table/data-table.component.html index e17ce8c8a8..35dc040949 100644 --- a/src/app/components/components/data-table/data-table.component.html +++ b/src/app/components/components/data-table/data-table.component.html @@ -13,25 +13,25 @@

with custom headings, columns, and inline editing

- + - +
- comment - Comments - {{column.label}} + comment + Comments +
- - {{column.format ? column.format(row[column.name]) : row[column.name]}} + +
@@ -45,25 +45,25 @@

with custom headings, columns, and inline editing

- + - +
- comment - Comments - { {column.label}} + comment + Comments +
- - { {column.format ? column.format(row[column.name]) : row[column.name]}} + +
@@ -75,69 +75,19 @@

with custom headings, columns, and inline editing

import { ITdDataTableColumn } from '@covalent/core'; import { TdDialogService } from '@covalent/core'; ... - const NUMBER_FORMAT: (v: any) => any = (v: number) => v; const DECIMAL_FORMAT: (v: any) => any = (v: number) => v.toFixed(2); ... }) export class Demo { columns: ITdDataTableColumn[] = [ - { name: 'name', label: 'Dessert (100g serving)' }, - { name: 'type', label: 'Type', filter: true }, - { name: 'calories', label: 'Calories', numeric: true, format: NUMBER_FORMAT }, - { name: 'fat', label: 'Fat (g)', numeric: true, format: DECIMAL_FORMAT }, - { name: 'carbs', label: 'Carbs (g)', numeric: true, format: NUMBER_FORMAT }, - { name: 'protein', label: 'Protein (g)', numeric: true, format: DECIMAL_FORMAT }, - { name: 'sodium', label: 'Sodium (mg)', numeric: true, format: NUMBER_FORMAT }, - { name: 'calcium', label: 'Calcium (%)', numeric: true, format: NUMBER_FORMAT }, - { name: 'iron', label: 'Iron (%)', numeric: true, format: NUMBER_FORMAT }, + { name: 'first_name', label: 'First Name' }, + { name: 'last_name', label: 'Last Name' }, + { name: 'gender', label: 'Gender' }, + { name: 'email', label: 'Email' }, + { name: 'balance', label: 'Balance', numeric: true, format: DECIMAL_FORMAT }, ]; - data: any[] = { - 'id': 1, - 'name': 'Frozen yogurt', - 'type': 'Ice cream', - 'calories': 159.0, - 'fat': 6.0, - 'carbs': 24.0, - 'protein': 4.0, - 'sodium': 87.0, - 'calcium': 14.0, - 'iron': 1.0, - 'comments': 'I love froyo!', - }, { - 'id': 2, - 'name': 'Ice cream sandwich', - 'type': 'Ice cream', - 'calories': 237.0, - 'fat': 9.0, - 'carbs': 37.0, - 'protein': 4.3, - 'sodium': 129.0, - 'calcium': 8.0, - 'iron': 1.0, - }, { - 'id': 3, - 'name': 'Eclair', - 'type': 'Pastry', - 'calories': 262.0, - 'fat': 16.0, - 'carbs': 24.0, - 'protein': 6.0, - 'sodium': 337.0, - 'calcium': 6.0, - 'iron': 7.0, - }, { - 'id': 4, - 'name': 'Cupcake', - 'type': 'Pastry', - 'calories': 305.0, - 'fat': 3.7, - 'carbs': 67.0, - 'protein': 4.3, - 'sodium': 413.0, - 'calcium': 3.0, - 'iron': 8.0, - }]; + basicData: any[] = [...]; // see data json constructor(private _dialogService: TdDialogService) {} @@ -154,6 +104,9 @@

with custom headings, columns, and inline editing

} ]]> +

Data:

+ + @@ -161,7 +114,7 @@

with custom headings, columns, and inline editing

Basic Data Table

-

with nested data, formatting, configurable width columns and templates

+

with formatting, configurable width columns and templates

@@ -169,12 +122,8 @@

with nested data, formatting, configurable width columns - -
- {{value}} - - star -
+ + @@ -186,12 +135,8 @@

with nested data, formatting, configurable width columns - -
- { {value}} // or { {row[column]}} - - star -
+ + ]]> @@ -201,56 +146,25 @@

with nested data, formatting, configurable width columns any = (v: number) => v; const DECIMAL_FORMAT: (v: any) => any = (v: number) => v.toFixed(2); ... }) - export class Demo { + export class Demo implements OnInit { configWidthColumns: ITdDataTableColumn[] = [ - { name: 'name', label: 'Dessert (100g serving)', width: 300 }, - { name: 'type', label: 'Type', width: { min: 150, max: 250 } }, - { name: 'calories', label: 'Calories', numeric: true, format: NUMBER_FORMAT}, - { name: 'fat', label: 'Fat (g)', numeric: true, format: DECIMAL_FORMAT}, + { name: 'first_name', label: 'First name', width: 150 }, + { name: 'last_name', label: 'Last name', width: { min: 150, max: 250 } }, + { name: 'gender', label: 'Gender'}, + { name: 'email', label: 'Email', width: 250}, + { name: 'img', label: 'Avatar', width: 50}, ]; - basicData: any[] = [ - { - 'id': 1, - 'food': { - 'name': 'Frozen yogurt', - 'type': 'Ice cream', - }, - 'calories': 159.0, - 'fat': 6.0, - }, { - 'id': 2, - 'food': { - 'name': 'Ice cream sandwich', - 'type': 'Ice cream', - }, - 'calories': 237.0, - 'fat': 9.0, - }, { - 'id': 3, - 'food': { - 'name': 'Eclair', - 'type': 'Pastry', - }, - 'calories': 262.0, - 'fat': 16.0, - }, { - 'id': 4, - 'food': { - 'name': 'Cupcake', - 'type': 'Pastry', - }, - 'calories': 305.0, - 'fat': 3.7, - } - ]; + basicData: any[] = [...]; // see data json } ]]> +

Data:

+ + @@ -296,7 +210,7 @@

No results to display.

Rows per page: - + {{size}} @@ -340,7 +254,7 @@

No results to display.

Rows per page: - + { {size} } @@ -354,148 +268,19 @@

No results to display.

import { TdDataTableService, TdDataTableSortingOrder, ITdDataTableSortChangeEvent, ITdDataTableColumn } from '@covalent/core'; import { IPageChangeEvent } from '@covalent/core'; ... - const NUMBER_FORMAT: (v: any) => any = (v: number) => v; const DECIMAL_FORMAT: (v: any) => any = (v: number) => v.toFixed(2); ... }) export class Demo { columns: ITdDataTableColumn[] = [ - { name: 'name', label: 'Dessert (100g serving)', sortable: true, width: 200 }, - { name: 'type', label: 'Type', filter: true }, - { name: 'calories', label: 'Calories', numeric: true, format: NUMBER_FORMAT, sortable: true, hidden: false }, - { name: 'fat', label: 'Fat (g)', numeric: true, format: DECIMAL_FORMAT, sortable: true }, - { name: 'carbs', label: 'Carbs (g)', numeric: true, format: NUMBER_FORMAT }, - { name: 'protein', label: 'Protein (g)', numeric: true, format: DECIMAL_FORMAT }, - { name: 'sodium', label: 'Sodium (mg)', numeric: true, format: NUMBER_FORMAT }, - { name: 'calcium', label: 'Calcium (%)', numeric: true, format: NUMBER_FORMAT }, - { name: 'iron', label: 'Iron (%)', numeric: true, format: NUMBER_FORMAT }, + { name: 'first_name', label: 'First Name', sortable: true, width: 150 }, + { name: 'last_name', label: 'Last Name', filter: true }, + { name: 'gender', label: 'Gender', hidden: false }, + { name: 'email', label: 'Email', sortable: true, width: 250 }, + { name: 'balance', label: 'Balance', numeric: true, format: DECIMAL_FORMAT }, ]; - data: any[] = [ - { - 'id': 1, - 'name': 'Frozen yogurt', - 'type': 'Ice cream', - 'calories': 159.0, - 'fat': 6.0, - 'carbs': 24.0, - 'protein': 4.0, - 'sodium': 87.0, - 'calcium': 14.0, - 'iron': 1.0, - 'comments': 'I love froyo!', - }, { - 'id': 2, - 'name': 'Ice cream sandwich', - 'type': 'Ice cream', - 'calories': 237.0, - 'fat': 9.0, - 'carbs': 37.0, - 'protein': 4.3, - 'sodium': 129.0, - 'calcium': 8.0, - 'iron': 1.0, - }, { - 'id': 3, - 'name': 'Eclair', - 'type': 'Pastry', - 'calories': 262.0, - 'fat': 16.0, - 'carbs': 24.0, - 'protein': 6.0, - 'sodium': 337.0, - 'calcium': 6.0, - 'iron': 7.0, - }, { - 'id': 4, - 'name': 'Cupcake', - 'type': 'Pastry', - 'calories': 305.0, - 'fat': 3.7, - 'carbs': 67.0, - 'protein': 4.3, - 'sodium': 413.0, - 'calcium': 3.0, - 'iron': 8.0, - }, { - 'id': 5, - 'name': 'Jelly bean', - 'type': 'Candy', - 'calories': 375.0, - 'fat': 0.0, - 'carbs': 94.0, - 'protein': 0.0, - 'sodium': 50.0, - 'calcium': 0.0, - 'iron': 0.0, - }, { - 'id': 6, - 'name': 'Lollipop', - 'type': 'Candy', - 'calories': 392.0, - 'fat': 0.2, - 'carbs': 98.0, - 'protein': 0.0, - 'sodium': 38.0, - 'calcium': 0.0, - 'iron': 2.0, - }, { - 'id': 7, - 'name': 'Honeycomb', - 'type': 'Other', - 'calories': 408.0, - 'fat': 3.2, - 'carbs': 87.0, - 'protein': 6.5, - 'sodium': 562.0, - 'calcium': 0.0, - 'iron': 45.0, - }, { - 'id': 8, - 'name': 'Donut', - 'type': 'Pastry', - 'calories': 452.0, - 'fat': 25.0, - 'carbs': 51.0, - 'protein': 4.9, - 'sodium': 326.0, - 'calcium': 2.0, - 'iron': 22.0, - }, { - 'id': 9, - 'name': 'KitKat', - 'type': 'Candy', - 'calories': 518.0, - 'fat': 26.0, - 'carbs': 65.0, - 'protein': 7.0, - 'sodium': 54.0, - 'calcium': 12.0, - 'iron': 6.0, - }, { - 'id': 10, - 'name': 'Chocolate', - 'type': 'Candy', - 'calories': 518.0, - 'fat': 26.0, - 'carbs': 65.0, - 'protein': 7.0, - 'sodium': 54.0, - 'calcium': 12.0, - 'iron': 6.0, - }, { - 'id': 11, - 'name': 'Chamoy', - 'type': 'Candy', - 'calories': 518.0, - 'fat': 26.0, - 'carbs': 65.0, - 'protein': 7.0, - 'sodium': 54.0, - 'calcium': 12.0, - 'iron': 6.0, - }, - ]; + data: any[] = [...]; // see json data filteredData: any[] = this.data; filteredTotal: number = this.data.length; @@ -503,8 +288,8 @@

No results to display.

searchTerm: string = ''; fromRow: number = 1; currentPage: number = 1; - pageSize: number = 10; - sortBy: string = 'name'; + pageSize: number = 50; + sortBy: string = 'first_name'; selectedRows: any[] = []; sortOrder: TdDataTableSortingOrder = TdDataTableSortingOrder.Descending; @@ -550,6 +335,9 @@

No results to display.

} ]]> +

Data:

+ + @@ -575,10 +363,10 @@

No results to display.

- Hide calories + Hide gender - Type column is searchable (search for candy) + Type column is searchable (search for lifsey)
diff --git a/src/app/components/components/data-table/data-table.component.ts b/src/app/components/components/data-table/data-table.component.ts index 474c89d5bf..02575fdc22 100644 --- a/src/app/components/components/data-table/data-table.component.ts +++ b/src/app/components/components/data-table/data-table.component.ts @@ -7,6 +7,10 @@ import { TdDataTableSortingOrder, TdDataTableService, TdDataTableComponent, import { IPageChangeEvent } from '../../../../platform/core'; import { TdDialogService } from '../../../../platform/core'; +import { InternalDocsService } from '../../../services'; + +import { toPromise } from 'rxjs/operator/toPromise'; + const NUMBER_FORMAT: (v: any) => any = (v: number) => v; const DECIMAL_FORMAT: (v: any) => any = (v: number) => v.toFixed(2); @@ -78,167 +82,41 @@ export class DataTableDemoComponent implements OnInit { }]; configWidthColumns: ITdDataTableColumn[] = [ - { name: 'name', label: 'Dessert (100g serving)', width: 300 }, - { name: 'type', label: 'Type', width: { min: 150, max: 250 } }, - { name: 'calories', label: 'Calories', numeric: true, format: NUMBER_FORMAT}, - { name: 'fat', label: 'Fat (g)', numeric: true, format: DECIMAL_FORMAT}, + { name: 'first_name', label: 'First name', width: 150 }, + { name: 'last_name', label: 'Last name', width: { min: 150, max: 250 } }, + { name: 'gender', label: 'Gender'}, + { name: 'email', label: 'Email', width: 250}, + { name: 'img', label: 'Avatar', width: 50}, ]; columns: ITdDataTableColumn[] = [ - { name: 'name', label: 'Dessert (100g serving)', sortable: true, width: 200 }, - { name: 'type', label: 'Type', filter: true }, - { name: 'calories', label: 'Calories', numeric: true, format: NUMBER_FORMAT, sortable: true, hidden: false }, - { name: 'fat', label: 'Fat (g)', numeric: true, format: DECIMAL_FORMAT, sortable: true }, - { name: 'carbs', label: 'Carbs (g)', numeric: true, format: NUMBER_FORMAT }, - { name: 'protein', label: 'Protein (g)', numeric: true, format: DECIMAL_FORMAT }, - { name: 'sodium', label: 'Sodium (mg)', numeric: true, format: NUMBER_FORMAT }, - { name: 'calcium', label: 'Calcium (%)', numeric: true, format: NUMBER_FORMAT }, - { name: 'iron', label: 'Iron (%)', numeric: true, format: NUMBER_FORMAT }, + { name: 'first_name', label: 'First Name', sortable: true, width: 150 }, + { name: 'last_name', label: 'Last Name', filter: true }, + { name: 'gender', label: 'Gender', hidden: false }, + { name: 'email', label: 'Email', sortable: true, width: 250 }, + { name: 'balance', label: 'Balance', numeric: true, format: DECIMAL_FORMAT }, ]; - data: any[] = [ - { - 'id': 1, - 'name': 'Frozen yogurt', - 'type': 'Ice cream', - 'calories': 159.0, - 'fat': 6.0, - 'carbs': 24.0, - 'protein': 4.0, - 'sodium': 87.0, - 'calcium': 14.0, - 'iron': 1.0, - 'comments': 'I love froyo!', - }, { - 'id': 2, - 'name': 'Ice cream sandwich', - 'type': 'Ice cream', - 'calories': 237.0, - 'fat': 9.0, - 'carbs': 37.0, - 'protein': 4.3, - 'sodium': 129.0, - 'calcium': 8.0, - 'iron': 1.0, - }, { - 'id': 3, - 'name': 'Eclair', - 'type': 'Pastry', - 'calories': 262.0, - 'fat': 16.0, - 'carbs': 24.0, - 'protein': 6.0, - 'sodium': 337.0, - 'calcium': 6.0, - 'iron': 7.0, - }, { - 'id': 4, - 'name': 'Cupcake', - 'type': 'Pastry', - 'calories': 305.0, - 'fat': 3.7, - 'carbs': 67.0, - 'protein': 4.3, - 'sodium': 413.0, - 'calcium': 3.0, - 'iron': 8.0, - }, { - 'id': 5, - 'name': 'Jelly bean', - 'type': 'Candy', - 'calories': 375.0, - 'fat': 0.0, - 'carbs': 94.0, - 'protein': 0.0, - 'sodium': 50.0, - 'calcium': 0.0, - 'iron': 0.0, - }, { - 'id': 6, - 'name': 'Lollipop', - 'type': 'Candy', - 'calories': 392.0, - 'fat': 0.2, - 'carbs': 98.0, - 'protein': 0.0, - 'sodium': 38.0, - 'calcium': 0.0, - 'iron': 2.0, - }, { - 'id': 7, - 'name': 'Honeycomb', - 'type': 'Other', - 'calories': 408.0, - 'fat': 3.2, - 'carbs': 87.0, - 'protein': 6.5, - 'sodium': 562.0, - 'calcium': 0.0, - 'iron': 45.0, - }, { - 'id': 8, - 'name': 'Donut', - 'type': 'Pastry', - 'calories': 452.0, - 'fat': 25.0, - 'carbs': 51.0, - 'protein': 4.9, - 'sodium': 326.0, - 'calcium': 2.0, - 'iron': 22.0, - }, { - 'id': 9, - 'name': 'KitKat', - 'type': 'Candy', - 'calories': 518.0, - 'fat': 26.0, - 'carbs': 65.0, - 'protein': 7.0, - 'sodium': 54.0, - 'calcium': 12.0, - 'iron': 6.0, - }, { - 'id': 10, - 'name': 'Chocolate', - 'type': 'Candy', - 'calories': 518.0, - 'fat': 26.0, - 'carbs': 65.0, - 'protein': 7.0, - 'sodium': 54.0, - 'calcium': 12.0, - 'iron': 6.0, - }, { - 'id': 11, - 'name': 'Chamoy', - 'type': 'Candy', - 'calories': 518.0, - 'fat': 26.0, - 'carbs': 65.0, - 'protein': 7.0, - 'sodium': 54.0, - 'calcium': 12.0, - 'iron': 6.0, - }, - ]; - basicData: any[] = this.data.slice(0, 4); + data: any[]; + basicData: any[]; selectable: boolean = true; clickable: boolean = false; multiple: boolean = true; filterColumn: boolean = true; - filteredData: any[] = this.data; - filteredTotal: number = this.data.length; + filteredData: any[]; + filteredTotal: number ; selectedRows: any[] = []; searchTerm: string = ''; fromRow: number = 1; currentPage: number = 1; - pageSize: number = 10; - sortBy: string = 'name'; + pageSize: number = 50; + sortBy: string = 'first_name'; sortOrder: TdDataTableSortingOrder = TdDataTableSortingOrder.Descending; constructor(private _dataTableService: TdDataTableService, + private _internalDocsService: InternalDocsService, private _dialogService: TdDialogService) {} openPrompt(row: any, name: string): void { @@ -252,7 +130,9 @@ export class DataTableDemoComponent implements OnInit { }); } - ngOnInit(): void { + async ngOnInit(): Promise { + this.data = await toPromise.call(this._internalDocsService.queryData()); + this.basicData = this.data.slice(0, 10); this.filter(); } diff --git a/src/app/services/internal-docs.service.ts b/src/app/services/internal-docs.service.ts index 3fe4c1c0a5..9443462348 100644 --- a/src/app/services/internal-docs.service.ts +++ b/src/app/services/internal-docs.service.ts @@ -41,4 +41,22 @@ export class InternalDocsService { }); } + queryData(): Observable { + return new Observable((subscriber: Subscriber) => { + this._http.get(INTERNAL_DOCS_URL + '/data.json').subscribe((response: Response) => { + let data: ITemplate[]; + try { + data = response.json(); + } catch (e) { + data = []; + subscriber.error(); + } + subscriber.next(data); + subscriber.complete(); + }, (error: any) => { + subscriber.error(); + }); + }); + } + } diff --git a/src/platform/core/data-table/data-table-cell/data-table-cell.component.scss b/src/platform/core/data-table/data-table-cell/data-table-cell.component.scss index f3f809197b..c283623b12 100644 --- a/src/platform/core/data-table/data-table-cell/data-table-cell.component.scss +++ b/src/platform/core/data-table/data-table-cell/data-table-cell.component.scss @@ -6,7 +6,6 @@ padding: 0; > .td-data-table-cell-content-wrapper { padding: 0 28px 0 28px; - height: 48px; } &:first-child > .td-data-table-cell-content-wrapper { diff --git a/src/platform/core/data-table/data-table-row/data-table-row.component.ts b/src/platform/core/data-table/data-table-row/data-table-row.component.ts index 31f5efea99..6d3b65455f 100644 --- a/src/platform/core/data-table/data-table-row/data-table-row.component.ts +++ b/src/platform/core/data-table/data-table-row/data-table-row.component.ts @@ -40,6 +40,14 @@ export class TdDataTableRowComponent { return this._selected; } + get height(): number { + let height: number = 48; + if (this._elementRef.nativeElement) { + height = (this._elementRef.nativeElement).getBoundingClientRect().height; + } + return height; + } + constructor(private _elementRef: ElementRef, private _renderer: Renderer2) { this._renderer.addClass(this._elementRef.nativeElement, 'td-data-table-row'); } diff --git a/src/platform/core/data-table/data-table.component.html b/src/platform/core/data-table/data-table.component.html index 6faef52a02..511ed8bac3 100644 --- a/src/platform/core/data-table/data-table.component.html +++ b/src/platform/core/data-table/data-table.component.html @@ -43,7 +43,7 @@ #dtRow [tabIndex]="selectable ? 0 : -1" [selected]="(clickable || selectable) && isRowSelected(row)" - *ngFor="let row of data | slice:fromRow:toRow; let rowIndex = index" + *ngFor="let row of virtualData; let rowIndex = index" (click)="handleRowClick(row, $event)" (keyup)="selectable && _rowKeyup($event, row, rowIndex)" (keydown.space)="blockEvent($event)" diff --git a/src/platform/core/data-table/data-table.component.ts b/src/platform/core/data-table/data-table.component.ts index eb77101ef4..f8b431f1f3 100644 --- a/src/platform/core/data-table/data-table.component.ts +++ b/src/platform/core/data-table/data-table.component.ts @@ -73,6 +73,16 @@ export interface IInternalColumnWidth { max?: boolean; } +/** + * Constant to set the rows offset before and after the viewport + */ +const TD_VIRTUAL_OFFSET: number = 2; + +/** + * Constant to set default row height if none is provided + */ +const TD_VIRTUAL_DEFAULT_ROW_HEIGHT: number = 48; + @Component({ providers: [ TD_DATA_TABLE_CONTROL_VALUE_ACCESSOR ], selector: 'td-data-table', @@ -103,74 +113,52 @@ export class TdDataTableComponent implements ControlValueAccessor, OnInit, After private _verticalScrollSubs: Subscription; private _horizontalScrollSubs: Subscription; private _scrollHorizontalOffset: number = 0; - private _scrollVerticalOffset: number = 0; - private _hostHeight: number = 0; private _onHorizontalScroll: Subject = new Subject(); private _onVerticalScroll: Subject = new Subject(); - /** - * Returns the height of the row - * For now we assume thats 49px. - */ - get rowHeight(): number { - return 49; - } + // Array of cached row heights to allow dynamic row heights + private _rowHeightCache: number[] = []; + // Total pseudo height of all the elements + private _totalHeight: number = 0; + // Total host height for the viewport + private _hostHeight: number = 0; + // Scrolled vertical pixels + private _scrollVerticalOffset: number = 0; + // Style to move the content a certain offset depending on scrolled offset + private _offsetTransform: SafeStyle; - /** - * Returns the number of rows that are rendered outside the viewport. - */ - get offsetRows(): number { - return 2; - } + // Variables that set from and to which rows will be rendered + private _fromRow: number = 0; + private _toRow: number = 0; /** * 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 { - let offset: number = 0; - if (this._scrollVerticalOffset > (this.offsetRows * this.rowHeight)) { - offset = this.fromRow * this.rowHeight; - } - return this._domSanitizer.bypassSecurityTrustStyle('translateY(' + (offset - this.totalHeight) + 'px)'); + return this._offsetTransform; } /** * Returns the assumed total height of the rows */ get totalHeight(): number { - if (this._data) { - return this._data.length * this.rowHeight; - } - return 0; + return this._totalHeight; } /** * Returns the initial row to render in the viewport */ get fromRow(): number { - if (this._data) { - // we calculate how many rows would have been scrolled minus an offset - let fromRow: number = Math.floor((this._scrollVerticalOffset / this.rowHeight)) - this.offsetRows; - return fromRow > 0 ? fromRow : 0; - } - return 0; + return this._fromRow; } /** * Returns the last row to render in the viewport */ get toRow(): number { - if (this._data) { - // we calculate how many rows would fit in the viewport and add an offset - let toRow: number = Math.floor((this._hostHeight / this.rowHeight)) + this.fromRow + (this.offsetRows * 2); - if (toRow > this._data.length) { - toRow = this._data.length; - } - return toRow; - } - return 0; + return this._toRow; } /** @@ -182,6 +170,8 @@ export class TdDataTableComponent implements ControlValueAccessor, OnInit, After /** internal attributes */ private _data: any[]; + // data virtually iterated by component + private _virtualData: any[]; private _columns: ITdDataTableColumn[]; private _selectable: boolean = false; private _clickable: boolean = false; @@ -226,7 +216,7 @@ export class TdDataTableComponent implements ControlValueAccessor, OnInit, After /** * Returns true if all values are not deselected - * and atleast one is. + * and at least one is. */ get indeterminate(): boolean { return this._indeterminate; @@ -251,6 +241,7 @@ export class TdDataTableComponent implements ControlValueAccessor, OnInit, After @Input('data') set data(data: any[]) { this._data = data; + this._rowHeightCache = []; Promise.resolve().then(() => { this.refresh(); // scroll back to the top if the data has changed @@ -261,6 +252,10 @@ export class TdDataTableComponent implements ControlValueAccessor, OnInit, After return this._data; } + get virtualData(): any[] { + return this._virtualData; + } + /** * columns?: ITdDataTableColumn[] * Sets additional column configuration. [ITdDataTableColumn.name] has to exist in [data] as key. @@ -434,8 +429,14 @@ export class TdDataTableComponent implements ControlValueAccessor, OnInit, After */ ngOnInit(): void { // initialize observable for resize calculations - this._resizeSubs = debounceTime.call(this._onResize.asObservable(), 10).subscribe(() => { + this._resizeSubs = this._onResize.asObservable().subscribe(() => { + if (this._rows) { + this._rows.toArray().forEach((row: TdDataTableRowComponent, index: number) => { + this._rowHeightCache[this.fromRow + index] = row.height + 1; + }); + } this._calculateWidths(); + this._calculateVirtualRows(); }); // initialize observable for scroll column header reposition this._horizontalScrollSubs = this._onHorizontalScroll.asObservable() @@ -447,6 +448,7 @@ export class TdDataTableComponent implements ControlValueAccessor, OnInit, After this._verticalScrollSubs = this._onVerticalScroll.asObservable() .subscribe((verticalScroll: number) => { this._scrollVerticalOffset = verticalScroll; + this._calculateVirtualRows(); this._changeDetectorRef.markForCheck(); }); } @@ -480,6 +482,7 @@ export class TdDataTableComponent implements ControlValueAccessor, OnInit, After // if the height of the viewport has changed, then we mark for check if (this._hostHeight !== newHostHeight) { this._hostHeight = newHostHeight; + this._calculateVirtualRows(); this._changeDetectorRef.markForCheck(); } } @@ -493,6 +496,7 @@ export class TdDataTableComponent implements ControlValueAccessor, OnInit, After this._rowsChangedSubs = debounceTime.call(this._rows.changes, 0).subscribe(() => { this._onResize.next(); }); + this._calculateVirtualRows(); } /** @@ -566,6 +570,7 @@ export class TdDataTableComponent implements ControlValueAccessor, OnInit, After * Refreshes data table and rerenders [data] and [columns] */ refresh(): void { + this._calculateVirtualRows(); this._calculateWidths(); this._calculateCheckboxState(); this._changeDetectorRef.markForCheck(); @@ -745,17 +750,9 @@ export class TdDataTableComponent implements ControlValueAccessor, OnInit, After case UP_ARROW: /** * if users presses the up arrow, we focus the prev row - * unless its the first row, then we move to the last row + * unless its the first row */ - if (index === 0) { - if (!event.shiftKey) { - this._scrollableDiv.nativeElement.scrollTop = this.totalHeight; - let subs: Subscription = this._rows.changes.subscribe(() => { - subs.unsubscribe(); - this._rows.toArray()[this._rows.toArray().length - 1].focus(); - }); - } - } else { + if (index > 0) { this._rows.toArray()[index - 1].focus(); } this.blockEvent(event); @@ -766,17 +763,9 @@ export class TdDataTableComponent implements ControlValueAccessor, OnInit, After case DOWN_ARROW: /** * if users presses the down arrow, we focus the next row - * unless its the last row, then we move to the first row + * unless its the last row */ - if (index === (this._rows.toArray().length - 1)) { - if (!event.shiftKey) { - this._scrollableDiv.nativeElement.scrollTop = 0; - let subs: Subscription = this._rows.changes.subscribe(() => { - subs.unsubscribe(); - this._rows.toArray()[0].focus(); - }); - } - } else { + if (index < (this._rows.toArray().length - 1)) { this._rows.toArray()[index + 1].focus(); } this.blockEvent(event); @@ -978,4 +967,73 @@ export class TdDataTableComponent implements ControlValueAccessor, OnInit, After let renderedColumns: ITdDataTableColumn[] = this.columns.filter((col: ITdDataTableColumn) => !col.hidden); return Math.floor(this.hostWidth / renderedColumns.length); } + + /** + * Method to calculate the rows to be rendered in the viewport + */ + private _calculateVirtualRows(): void { + let scrolledRows: number = 0; + if (this._data) { + this._totalHeight = 0; + let rowHeightSum: number = 0; + // loop through all rows to see if we have their height cached + // and sum them all to calculate the total height + this._data.forEach((d: any, index: number) => { + // iterate through all rows at first and assume all + // rows are the same height as the first one + if (!this._rowHeightCache[index]) { + this._rowHeightCache[index] = this._rowHeightCache[0] || TD_VIRTUAL_DEFAULT_ROW_HEIGHT; + } + rowHeightSum += this._rowHeightCache[index]; + // check how many rows have been scrolled + if (this._scrollVerticalOffset - rowHeightSum > 0) { + scrolledRows++; + } + }); + this._totalHeight = rowHeightSum; + // set the initial row to be rendered taking into account the row offset + let fromRow: number = scrolledRows - TD_VIRTUAL_OFFSET; + this._fromRow = fromRow > 0 ? fromRow : 0; + + let hostHeight: number = this._hostHeight; + let index: number = 0; + // calculate how many rows can fit in the viewport + while (hostHeight > 0) { + hostHeight -= this._rowHeightCache[this.fromRow + index]; + index++; + } + // set the last row to be rendered taking into account the row offset + let range: number = (index - 1) + (TD_VIRTUAL_OFFSET * 2); + let toRow: number = range + this.fromRow; + // if last row is greater than the total length, then we use the total length + if (isFinite(toRow) && toRow > this._data.length) { + toRow = this._data.length; + } else if (!isFinite(toRow)) { + toRow = TD_VIRTUAL_OFFSET; + } + this._toRow = toRow; + } else { + this._totalHeight = 0; + this._fromRow = 0; + this._toRow = 0; + } + + let offset: number = 0; + // calculate the proper offset depending on how many rows have been scrolled + if (scrolledRows > TD_VIRTUAL_OFFSET) { + for (let index: number = 0; index < this.fromRow; index++) { + offset += this._rowHeightCache[index]; + } + } + + this._offsetTransform = this._domSanitizer.bypassSecurityTrustStyle('translateY(' + (offset - this.totalHeight) + 'px)'); + if (this._data) { + this._virtualData = this.data.slice(this.fromRow, this.toRow); + } + // mark for check at the end of the queue so we are sure + // that the changes will be marked + Promise.resolve().then(() => { + this._changeDetectorRef.markForCheck(); + }); + } } From 5ffb36432ee155caf706c43aa88f42754e776d64 Mon Sep 17 00:00:00 2001 From: Ed Morales Date: Tue, 3 Oct 2017 08:10:37 -0700 Subject: [PATCH 10/16] feat(): upgrade to material@beta.11 (#890) * chore(): upgrade angular and material dependencies * fix(): rename OverlayState to OverlayConfig * fix(): remove MdCoreModule from modules * chore(): add MATERIAL_COMPATIBILITY_MODE provider to allow mat- prefixes * chore(): use mat- preffix for any MatListModule related components * chore(): use mat- prefix for any MatIconModule related components * chore(): use mat- preffix for any MatSidenavModule related components * chore(): use mat- prefix for any MatToolbarModule related components * chore(): use mat- prefix for any MatButtonModule related components * chore(): use mat- prefix for any MatMenuModule related components * chore(): use mat- prefix for any MatRippleModule related components * chore(): use mat- prefix for any MatTooltipModule related components * chore(): use mat- prefix for any MatCardModule related components * chore(): use mat- prefix for any MatGridListModule related components * chore(): use mat- prefix for any MatInputModule related components * chore(): use mat- prefix for any MatTabsModule related components * chore(): use mat- prefix for any MatSelectModule related components * chore(): use mat- prefix for any MatDialogModule related components * chore(): use mat- prefix for any MatSnackBarModule related components * chore(): use mat- prefix for any MatAutocompleteModule related components * chore(): use mat- prefix for any MatChipsModule related components * chore(): use mat- prefix for any MatProgressBarModule (Spinner) related components * chore(): use mat- prefix for any MatCheckboxModule related components * chore(): use mat- prefix for any MatPseudoCheckboxModule related components * chore(): missing md-line replacement for matLine * chore(): use mat- prefix for any MatSlideToggleModule related components * chore(): use mat- prefix for any MatSliderModule related components * chore(): use mat- prefix for any matSubheader related directives * chore(): update unit tests with MATERIAL_COMPATIBILITY_MODE for mat prefixes * chore(): upgrade yarn.lock to use latest deps * fix(): typo in paging demo * fix(): unit tests --- docs/CHANGELOG.md | 2 +- docs/IE11.md | 2 +- package.json | 28 +- src/app/app.component.html | 12 +- src/app/app.component.ts | 6 +- src/app/app.module.ts | 24 +- .../animations/animations.component.html | 380 ++++---- .../components/charts/charts.component.html | 204 ++--- .../components/chips/chips.component.html | 218 ++--- .../components/chips/chips.component.ts | 2 +- .../code-editor/code-editor.component.html | 66 +- .../components/components.component.html | 60 +- .../components/components.component.ts | 2 +- .../components/components.module.ts | 35 +- .../data-table/data-table.component.html | 218 ++--- .../data-table/data-table.component.ts | 2 +- .../components/dialogs/dialogs.component.html | 48 +- .../components/dialogs/dialogs.component.ts | 12 +- .../directives/directives.component.html | 98 +- .../dynamic-forms.component.html | 292 +++--- .../expansion-panel.component.html | 298 +++---- .../file-input/file-input.component.html | 70 +- .../file-upload/file-upload.component.html | 100 +-- .../highlight/highlight.component.html | 14 +- .../components/http/http.component.html | 52 +- .../json-formatter.component.html | 42 +- .../components/loading/loading.component.html | 328 +++---- .../markdown/markdown.component.html | 136 +-- .../components/media/media.component.html | 90 +- .../components/message/message.component.html | 134 +-- .../ngx-charts/ngx-charts.component.html | 160 ++-- .../ngx-translate.component.html | 274 +++--- .../notifications.component.html | 286 +++--- .../overview/overview.component.html | 100 +-- .../components/paging/paging.component.html | 246 ++--- .../components/paging/paging.component.ts | 2 +- .../components/pipes/pipes.component.html | 228 ++--- .../components/search/search.component.html | 96 +- .../components/steps/steps.component.html | 118 +-- .../text-editor/text-editor.component.html | 40 +- .../virtual-scroll.component.html | 96 +- .../alerts/alerts.component.html | 332 +++---- .../alerts/alerts.component.ts | 4 +- .../cards/cards.component.html | 718 +++++++-------- .../design-patterns.component.html | 24 +- .../design-patterns.component.ts | 2 +- .../design-patterns/design-patterns.module.ts | 35 +- .../management-list.component.html | 278 +++--- .../management-list.component.scss | 2 +- .../navigation-drawer.component.html | 126 +-- .../navigation-drawer.component.scss | 2 +- .../angular-material.component.html | 58 +- .../docs/angular/angular.component.html | 106 +-- .../build-tasks/build-tasks.component.html | 22 +- .../docs/creating/creating.component.html | 22 +- .../docs/deployment/deployment.component.html | 14 +- src/app/components/docs/docs.component.html | 22 +- src/app/components/docs/docs.component.ts | 2 +- src/app/components/docs/docs.module.ts | 17 +- .../docs/icons/icons.component.html | 36 +- .../docs/mock-data/mock-data.component.html | 26 +- .../docs/overview/overview.component.html | 26 +- .../docs/testing/testing.component.html | 48 +- .../docs/theme/theme.component.html | 94 +- .../docs/theme/theme.component.scss | 2 +- src/app/components/home/home.component.html | 112 +-- src/app/components/home/home.component.scss | 6 +- .../card-over/card-over.component.html | 240 ++--- .../components/layouts/layouts.component.html | 4 +- src/app/components/layouts/layouts.module.ts | 13 +- .../manage-list/manage-list.component.html | 382 ++++---- .../manage-list/manage-list.component.ts | 2 +- .../layouts/nav-list/nav-list.component.html | 222 ++--- .../layouts/nav-list/nav-list.component.ts | 2 +- .../layouts/nav-view/nav-view.component.html | 294 +++--- .../layouts/overview/overview.component.html | 58 +- .../style-guide/colors/colors.component.html | 338 +++---- .../style-guide/colors/colors.component.scss | 2 +- .../iconography/iconography.component.html | 218 ++--- .../style-guide/logo/logo.component.html | 78 +- .../product-icons.component.html | 30 +- .../product-icons.component.scss | 2 +- .../resources/resources.component.html | 174 ++-- .../style-guide/style-guide.component.html | 24 +- .../style-guide/style-guide.component.ts | 2 +- .../style-guide/style-guide.module.ts | 35 +- .../typography/typography.component.html | 116 +-- .../utility-styles.component.html | 72 +- .../templates/templates.component.html | 22 +- .../templates/templates.component.scss | 2 +- .../templates/templates.component.ts | 2 +- .../components/toolbar/toolbar.component.html | 44 +- src/app/components/toolbar/toolbar.module.ts | 10 +- src/app/documentation-tools/index.ts | 8 +- .../pretty-markdown.component.scss | 4 +- .../pretty-markdown.component.ts | 8 +- .../readme-loader.component.html | 8 +- src/platform/core/chips/README.md | 2 +- src/platform/core/chips/_chips-theme.scss | 10 +- src/platform/core/chips/chips.component.html | 24 +- src/platform/core/chips/chips.component.scss | 4 +- .../core/chips/chips.component.spec.ts | 108 +-- src/platform/core/chips/chips.component.ts | 20 +- src/platform/core/chips/chips.module.ts | 10 +- src/platform/core/common/_common-theme.scss | 6 +- .../services/router-path.service.spec.ts | 2 +- src/platform/core/common/styles/_button.scss | 52 +- .../core/common/styles/_card-colored.scss | 10 +- src/platform/core/common/styles/_card.scss | 38 +- src/platform/core/common/styles/_chips.scss | 6 +- src/platform/core/common/styles/_content.scss | 2 +- src/platform/core/common/styles/_divider.scss | 4 +- src/platform/core/common/styles/_icons.scss | 8 +- src/platform/core/common/styles/_list.scss | 8 +- .../common/styles/_navigation-drawer.scss | 4 +- src/platform/core/common/styles/_sidenav.scss | 4 +- src/platform/core/common/styles/_toolbar.scss | 8 +- .../core/common/styles/_typography.scss | 2 +- .../core/common/styles/_variables.scss | 4 +- .../core/common/styles/font/_font.scss | 2 +- src/platform/core/data-table/README.md | 2 +- .../core/data-table/_data-table-theme.scss | 8 +- .../data-table-column.component.html | 8 +- .../data-table-column.component.scss | 12 +- .../core/data-table/data-table.component.html | 10 +- .../core/data-table/data-table.component.scss | 4 +- .../data-table/data-table.component.spec.ts | 149 ++-- .../core/data-table/data-table.component.ts | 2 +- .../core/data-table/data-table.module.ts | 10 +- .../alert-dialog/alert-dialog.component.html | 2 +- .../alert-dialog/alert-dialog.component.ts | 4 +- .../confirm-dialog.component.html | 4 +- .../confirm-dialog.component.ts | 4 +- src/platform/core/dialogs/dialogs.module.ts | 8 +- .../prompt-dialog.component.html | 10 +- .../prompt-dialog/prompt-dialog.component.ts | 4 +- .../core/dialogs/services/dialog.service.ts | 44 +- .../_expansion-panel-theme.scss | 4 +- .../expansion-panel.component.html | 6 +- .../expansion-panel.component.spec.ts | 4 + .../expansion-panel/expansion-panel.module.ts | 6 +- src/platform/core/file/_file-theme.scss | 2 +- src/platform/core/file/file-input/README.md | 4 +- .../file/file-input/file-input.component.html | 2 +- .../file-input/file-input.component.spec.ts | 4 + .../file/file-input/file-input.component.ts | 2 +- .../core/file/file-upload.component.html | 12 +- src/platform/core/file/file-upload/README.md | 10 +- .../file-upload/file-upload.component.html | 6 +- .../file-upload/file-upload.component.scss | 2 +- .../file-upload/file-upload.component.spec.ts | 4 + .../file/file-upload/file-upload.component.ts | 6 +- src/platform/core/file/file.module.ts | 6 +- .../json-formatter.component.html | 4 +- .../json-formatter.component.spec.ts | 4 + .../json-formatter/json-formatter.module.ts | 6 +- src/platform/core/layout/README.md | 8 +- src/platform/core/layout/_layout-theme.scss | 10 +- .../layout-card-over.component.html | 14 +- .../core/layout/layout-manage-list/README.md | 24 +- .../layout-manage-list.component.html | 12 +- .../layout-manage-list.component.scss | 10 +- .../layout-manage-list.component.ts | 14 +- .../core/layout/layout-nav-list/README.md | 20 +- .../layout-nav-list.component.html | 20 +- .../layout-nav-list.component.scss | 8 +- .../layout-nav-list.component.ts | 14 +- src/platform/core/layout/layout-nav/README.md | 4 +- .../layout-nav/layout-nav.component.html | 8 +- .../core/layout/layout-toggle.class.ts | 10 +- .../core/layout/layout.component.html | 8 +- .../core/layout/layout.component.scss | 2 +- src/platform/core/layout/layout.component.ts | 14 +- src/platform/core/layout/layout.module.ts | 14 +- .../navigation-drawer.component.html | 14 +- .../navigation-drawer.component.scss | 4 +- .../navigation-drawer.component.ts | 8 +- .../directives/loading.directive.spec.ts | 24 +- .../core/loading/loading.component.html | 8 +- .../core/loading/loading.component.scss | 2 +- .../core/loading/loading.component.ts | 2 +- src/platform/core/loading/loading.module.ts | 6 +- .../core/loading/services/loading.factory.ts | 4 +- .../loading/services/loading.service.spec.ts | 10 +- src/platform/core/menu/menu.component.html | 4 +- src/platform/core/menu/menu.component.scss | 14 +- src/platform/core/menu/menu.module.ts | 6 +- src/platform/core/message/README.md | 4 +- .../core/message/message.component.html | 2 +- .../core/message/message.component.spec.ts | 4 + src/platform/core/message/message.module.ts | 4 +- src/platform/core/notifications/README.md | 4 +- .../notification-count.component.spec.ts | 14 +- src/platform/core/paging/README.md | 28 +- .../core/paging/_paging-bar-theme.scss | 2 +- .../core/paging/paging-bar.component.html | 18 +- .../core/paging/paging-bar.component.scss | 28 +- .../core/paging/paging-bar.component.spec.ts | 14 +- src/platform/core/paging/paging.module.ts | 6 +- .../search-box/search-box.component.html | 6 +- .../search-input/search-input.component.html | 10 +- .../search-input/search-input.component.scss | 2 +- .../search-input/search-input.component.ts | 4 +- src/platform/core/search/search.module.ts | 8 +- src/platform/core/steps/_steps-theme.scss | 2 +- .../step-header/step-header.component.html | 10 +- .../step-header/step-header.component.scss | 8 +- .../core/steps/steps.component.spec.ts | 4 + src/platform/core/steps/steps.module.ts | 6 +- ...virtual-scroll-container.component.spec.ts | 20 +- .../dynamic-checkbox.component.html | 4 +- .../dynamic-file-input.component.html | 12 +- .../dynamic-input.component.html | 6 +- .../dynamic-select.component.html | 6 +- .../dynamic-slide-toggle.component.html | 4 +- .../dynamic-slider.component.html | 4 +- .../dynamic-textarea.component.html | 6 +- .../dynamic-forms.component.spec.ts | 4 + .../dynamic-forms/dynamic-forms.module.ts | 18 +- src/tests/utilities/covalent-tests.ts | 2 +- src/theme.scss | 8 +- .../combat-training/combat-training.html | 2 +- yarn.lock | 840 ++++++++++-------- 223 files changed, 5751 insertions(+), 5583 deletions(-) diff --git a/docs/CHANGELOG.md b/docs/CHANGELOG.md index b552fe5395..bd81081a75 100644 --- a/docs/CHANGELOG.md +++ b/docs/CHANGELOG.md @@ -1151,7 +1151,7 @@ ngAfterViewInit(): void { * **steps:** Support for ngFor and ngIf usage on td-step components and register/de-register steps automatically. ([6486eb527ae845224a170b8c7dda2dc92a089c3a](https://github.com/Teradata/covalent/commit/6486eb527ae845224a170b8c7dda2dc92a089c3a)), closes [#200](https://github.com/Teradata/covalent/issues/200) * **dependencies:** Upgrade to @angular@2.4.1 and @material@beta.1. ([6cd31f063ae5a1fd0e31378c1bbf6c466a7d3c15](https://github.com/Teradata/covalent/commit/6cd31f063ae5a1fd0e31378c1bbf6c466a7d3c15)) * **deployment:** Initial AoT support. ([6cd31f063ae5a1fd0e31378c1bbf6c466a7d3c15](https://github.com/Teradata/covalent/commit/6cd31f063ae5a1fd0e31378c1bbf6c466a7d3c15)), closes [#149](https://github.com/Teradata/covalent/issues/149) -* **paging:** Usage of `md-select` as `perPage` selection insteaf of `md-icon-button` and `md-menu`. ([63a0ca3d4acaebeb5b19eac826da0f8d2c4dfd1e](https://github.com/Teradata/covalent/commit/63a0ca3d4acaebeb5b19eac826da0f8d2c4dfd1e)) +* **paging:** Usage of `md-select` as `perPage` selection insteaf of `md-icon-button` and `mat-menu`. ([63a0ca3d4acaebeb5b19eac826da0f8d2c4dfd1e](https://github.com/Teradata/covalent/commit/63a0ca3d4acaebeb5b19eac826da0f8d2c4dfd1e)) * **layouts:** Added optional sticky footer (and footer-inner). ([59253bef91c354cb85ddd9f1d9622ec76241d13e](https://github.com/Teradata/covalent/commit/59253bef91c354cb85ddd9f1d9622ec76241d13e)) Usage: diff --git a/docs/IE11.md b/docs/IE11.md index 2adf2f46a9..0e98a710ad 100644 --- a/docs/IE11.md +++ b/docs/IE11.md @@ -104,7 +104,7 @@ For example, `` needs a flex wrapper inside a `layout="row"` ### Some HTML elements can't be flex containers -For example, don't use `layout="row"` on `

Typescript:

@@ -67,19 +67,19 @@

Demo 1:

HTML:

- Rotate 180°mood + ]]>
- +

Demo 2:

-

Typescript:

@@ -100,62 +100,62 @@

Demo 2:

HTML:

- Rotate -45°mood + ]]>
- +

API:

- - -

anchor?: string

-

The anchor name is used to attach the animation to an arbitrary element in the template. Defaults to 'tdRotate'.

- - - -

duration?: number

-

Duration the animation will run in milliseconds. Defaults to 250 ms.

- - - -

delay?: number

-

Delay before the animation will run in milliseconds. Defaults to 0 ms.

- - - -

degrees?: number

-

Degrees of rotation the dom object will animation. A negative value will cause the animation to initially rotate counter-clockwise. Defaults to 180 degrees.

- - - -

ease?: string

-

Animation accelerates and decelerates when rotation. Defaults to ease-in.

- - - + + +

anchor?: string

+

The anchor name is used to attach the animation to an arbitrary element in the template. Defaults to 'tdRotate'.

+ + + +

duration?: number

+

Duration the animation will run in milliseconds. Defaults to 250 ms.

+ + + +

delay?: number

+

Delay before the animation will run in milliseconds. Defaults to 0 ms.

+ + + +

degrees?: number

+

Degrees of rotation the dom object will animation. A negative value will cause the animation to initially rotate counter-clockwise. Defaults to 180 degrees.

+ + + +

ease?: string

+

Animation accelerates and decelerates when rotation. Defaults to ease-in.

+ + +
- - + + - - Collapse Animation - - + + Collapse Animation + +

Use TdCollapseAnimation to collapse any element based on a boolean state.

Demo 1:

- +
- - Collapse card - Collapse card with a click! - - + + Collapse card + Collapse card with a click! + +

Typescript:

@@ -175,67 +175,67 @@

Demo 1:

HTML:

Collapse +
- - Collapse card - Collapse card with a click! - - + + Collapse card + Collapse card with a click! + +
]]>
- +

API:

- - -

anchor?: string

-

The anchor name is used to attach the animation to an arbitrary element in the template. Defaults to 'tdCollapse'.

- - - -

duration?: number

-

Duration the animation will run in milliseconds. Defaults to 150 ms.

- - - -

delay?: number

-

Delay before the animation will run in milliseconds. Defaults to 0 ms.

- - - -

easeOnClose?: string

-

Animation accelerates and decelerates when closing. Defaults to ease-in.

- - - -

easeOnOpen?: string

-

Animation accelerates and decelerates when opening. Defaults to ease-out.

- - - + + +

anchor?: string

+

The anchor name is used to attach the animation to an arbitrary element in the template. Defaults to 'tdCollapse'.

+ + + +

duration?: number

+

Duration the animation will run in milliseconds. Defaults to 150 ms.

+ + + +

delay?: number

+

Delay before the animation will run in milliseconds. Defaults to 0 ms.

+ + + +

easeOnClose?: string

+

Animation accelerates and decelerates when closing. Defaults to ease-in.

+ + + +

easeOnOpen?: string

+

Animation accelerates and decelerates when opening. Defaults to ease-out.

+ + +
- - + + - - Fade in/out Animation - - + + Fade in/out Animation + +

Use TdFadeInOutAnimation to fade in/out any element based on a boolean state.

Demo 1:

- +
- - Fade Card - Fade in or out with a click! - - + + Fade Card + Fade in or out with a click! + +

Typescript:

@@ -255,77 +255,77 @@

Demo 1:

HTML:

Fade In +
- - Fade Card - Fade in or out with a click! - - + + Fade Card + Fade in or out with a click! + +
]]>
- +

API:

- - -

anchor?: string

-

The anchor name is used to attach the animation to an arbitrary element in the template. Defaults to 'tdFadeInOut'.

- - - -

duration?: number

-

Duration the animation will run in milliseconds. Defaults to 150 ms.

- - - -

delay?: number

-

Delay before the animation will run in milliseconds. Defaults to 0 ms.

- - - -

easeOnIn?: string

-

Animation accelerates and decelerates when fading in. Defaults to ease-in.

- - - -

easeOnOut?: string

-

Animation accelerates and decelerates when fading out. Defaults to ease-out.

- - - + + +

anchor?: string

+

The anchor name is used to attach the animation to an arbitrary element in the template. Defaults to 'tdFadeInOut'.

+ + + +

duration?: number

+

Duration the animation will run in milliseconds. Defaults to 150 ms.

+ + + +

delay?: number

+

Delay before the animation will run in milliseconds. Defaults to 0 ms.

+ + + +

easeOnIn?: string

+

Animation accelerates and decelerates when fading in. Defaults to ease-in.

+ + + +

easeOnOut?: string

+

Animation accelerates and decelerates when fading out. Defaults to ease-out.

+ + +
- - + + - - Attention Seekers Animation - - + + Attention Seekers Animation + +

Demos:

- - - - -

Typescript:

@@ -359,44 +359,44 @@

Demos:

HTML:

- @tdBounce mood + - - - - ]]>
- +

API:

- - -

anchor?: string

-

The anchor name is used to attach the animation to an arbitrary element in the template.

- - - -

duration?: number

-

Duration the animation will run in milliseconds. Defaults to 500 ms.

- - - -

delay?: number

-

Delay before the animation will run in milliseconds. Defaults to 0 ms.

- - - + + +

anchor?: string

+

The anchor name is used to attach the animation to an arbitrary element in the template.

+ + + +

duration?: number

+

Duration the animation will run in milliseconds. Defaults to 500 ms.

+ + + +

delay?: number

+

Delay before the animation will run in milliseconds. Defaults to 0 ms.

+ + +
- - + + diff --git a/src/app/components/components/charts/charts.component.html b/src/app/components/components/charts/charts.component.html index 8cad9a3ae7..d9c9a28540 100644 --- a/src/app/components/components/charts/charts.component.html +++ b/src/app/components/components/charts/charts.component.html @@ -1,10 +1,10 @@ - - Covalent Charts (deprecated) - use ngx-charts instead - - - Time Series Line Chart - x-axis grid hidden, shadow disabled + + Covalent Charts (deprecated) + use ngx-charts instead + + + Time Series Line Chart + x-axis grid hidden, shadow disabled @@ -20,9 +20,9 @@ transitionDelay="1000"> - - Sparkline Chart - x-axis hidden completely, shadow enabled + + Sparkline Chart + x-axis hidden completely, shadow enabled @@ -38,9 +38,9 @@ transitionDelay="1000"> - - Bar Chart - y-axis grid & ticks hidden + + Bar Chart + y-axis grid & ticks hidden @@ -56,9 +56,9 @@ transitionDelay="3000"> - - Single/Multi Line Chart - x-axis ticks & grid hidden, y-axis grid hidden + + Single/Multi Line Chart + x-axis ticks & grid hidden, y-axis grid hidden @@ -73,9 +73,9 @@ transitionDelay="2000"> - - Area Chart - right y-axis used, x-axis grid hidden + + Area Chart + right y-axis used, x-axis grid hidden @@ -90,9 +90,9 @@ transitionDelay="4000"> - - Combo Chart - dual y-axis, x-axis grid hidden + + Combo Chart + dual y-axis, x-axis grid hidden @@ -120,26 +120,26 @@ transitionDelay="5000"> - - - - TdChartsComponent - How to use this component - - + + + + TdChartsComponent + How to use this component + +

]]>

Use ]]> element to wrap individual chart elements

Properties:

This component has {{chartsAttr.length}} properties:

- + - -

{{attr.name}}: {{attr.type}}

-

{{attr.description}}

+ +

{{attr.name}}: {{attr.type}}

+

{{attr.description}}

- + - +

Example:

HTML

@@ -192,28 +192,28 @@

Setup:

export class MyModule {} ]]> - - - - TdAxisComponent - How to use the individual axes components - - + + + + TdAxisComponent + How to use the individual axes components + +

]]>

Use ]]> element to control the x-axis

Use ]]> element to control the left y-axis

Use ]]> element to control the right y-axis

Properties:

This component has {{axisAttrs.length}} properties:

- + - -

{{attr.name}}: {{attr.type}}

-

{{attr.description}}

+ +

{{attr.name}}: {{attr.type}}

+

{{attr.description}}

- + - +

Use above propeties as attributes with ]]>, ]]>, or ]]> elements

Example:

HTML

@@ -224,26 +224,26 @@

Example:

]]> - - - - TdChartBarComponent - Use this component to draw Bar Chart - - + + + + TdChartBarComponent + Use this component to draw Bar Chart + +

]]>

Use ]]> element wrapped inside ]]> element to create a Bar Chart.

Properties:

This component has {{barChartAttrs.length}} properties:

- + - -

{{attr.name}}: {{attr.type}}

-

{{attr.description}}

+ +

{{attr.name}}: {{attr.type}}

+

{{attr.description}}

- + - +

Use above propeties as attributes with ]]> element

Example:

HTML

@@ -280,26 +280,26 @@

Example:

{'x': 'Dec', 'y': 260}]; ]]> - - - - TdChartLineComponent - Use this component to draw Line Chart - - + + + + TdChartLineComponent + Use this component to draw Line Chart + +

]]>

Use ]]> element wrapped inside ]]> element to draw a single or multi line chart

Properties:

This component has {{lineChartAttrs.length}} properties:

- + - -

{{attr.name}}: {{attr.type}}

-

{{attr.description}}

+ +

{{attr.name}}: {{attr.type}}

+

{{attr.description}}

- + - +

Use above propeties as attributes with ]]> element

Example:

HTML

@@ -332,9 +332,9 @@

Example:

30-Apr-07,99.80 ]]> - - - + + +

Sparkline example:

Sparkline example: ]]> - - - + + +

Multi Line example:

Multi Line example: ]]> - - - - TdChartAreaComponent - Use this component to draw Area Chart - - + + + + TdChartAreaComponent + Use this component to draw Area Chart + +

]]>

Use ]]> element wrapped inside ]]> element to draw an area chart

Properties:

This component has {{areaChartAttrs.length}} properties:

- + - -

{{attr.name}}: {{attr.type}}

-

{{attr.description}}

+ +

{{attr.name}}: {{attr.type}}

+

{{attr.description}}

- + - +

Use above propeties as attributes with ]]> element

Example:

HTML

@@ -424,13 +424,13 @@

Example:

}] ]]> - - - - Combo Charts Example - Use multiple chart and axes components - - + + + + Combo Charts Example + Use multiple chart and axes components + +

Example:

HTML

@@ -466,5 +466,5 @@

Example:

]]> - - \ No newline at end of file + + \ No newline at end of file diff --git a/src/app/components/components/chips/chips.component.html b/src/app/components/components/chips/chips.component.html index 64c2d82ab5..1c8e2f4b5d 100644 --- a/src/app/components/components/chips/chips.component.html +++ b/src/app/components/components/chips/chips.component.html @@ -1,10 +1,10 @@ - - Chips & Autocomplete with strings - Autocomplete with chips and no custom inputs - - - - Demo + + Chips & Autocomplete with strings + Autocomplete with chips and no custom inputs + + + + Demo
Type and select a preset option or press enter:
- - - Code - + + + Code +

HTML:

- - - - - + + + + +
- + Disabled - +
- +
- + Chip addition - +
- +
- + Chip removal - +
- - - - Chips & Autocomplete with objects - Autocomplete with chips and templates and accent color - - - - Demo + + + + Chips & Autocomplete with objects + Autocomplete with chips and templates and accent color + + + + Demo
Type and select a preset option or press enter:
- location_city {{chip.city}}, (Pop: {{chip.population}}) + location_city {{chip.city}}, (Pop: {{chip.population}})
- location_city {{option.city}} + location_city {{option.city}}
- - - Code - + + + Code +

HTML:

- location_city { {chip.city} }, (Pop: { {chip.population} }) + location_city { {chip.city} }, (Pop: { {chip.population} })
- location_city { {option.city} } + location_city { {option.city} }
@@ -186,17 +186,17 @@ } ]]> - - - - - - Chips & async Autocomplete with template chip avatar - Load autocomplete items asynchronous when typing in the input - - - - Demo + + + + + + Chips & async Autocomplete with template chip avatar + Load autocomplete items asynchronous when typing in the input + + + + Demo
Type and see how it will load items async:
{{chip.substring(0, 1).toUpperCase()}}
{{chip}} - +
- - - Code - + + + Code +

HTML:

{ {chip.substring(0, 1).toUpperCase()} }
{ {chip} } - + ]]> @@ -273,17 +273,17 @@ } ]]> - - - - - - Stacked chips and Autocomplete with custom inputs - Autocomplete demo allowing custom inputs and stacked chips - - - - Demo + + + + + + Stacked chips and Autocomplete with custom inputs + Autocomplete demo allowing custom inputs and stacked chips + + + + Demo
Type and select option or enter custom text and press enter:
- - - Code - + + + Code +

HTML:

- - - - - - Custom chips - Demo allowing custom inputs for tags and warn color - - - - Demo + + + + + + Custom chips + Demo allowing custom inputs for tags and warn color + + + + Demo
Type any test and press enter:
- - - Code - + + + Code +

HTML:

- - - - - - Chip Events - Demo showing chip events - - - - Demo + + + + + + Chip Events + Demo showing chip events + + + + Demo
Type and select a preset option or press enter:
- +

Event Log:

{{ 'No Event Logs' }} - - - - Code - + + + + Code +

HTML:

- - - - + + + + diff --git a/src/app/components/components/chips/chips.component.ts b/src/app/components/components/chips/chips.component.ts index ff75726a41..dc3924080f 100644 --- a/src/app/components/components/chips/chips.component.ts +++ b/src/app/components/components/chips/chips.component.ts @@ -2,7 +2,7 @@ import { Component, HostBinding, OnInit, ChangeDetectionStrategy, ChangeDetector import { slideInDownAnimation } from '../../../app.animations'; -import { MdChip} from '@angular/material'; +import { MatChip} from '@angular/material'; @Component({ selector: 'chips-demo', diff --git a/src/app/components/components/code-editor/code-editor.component.html b/src/app/components/components/code-editor/code-editor.component.html index 6381f70dfe..5d2d6b5cbc 100644 --- a/src/app/components/components/code-editor/code-editor.component.html +++ b/src/app/components/components/code-editor/code-editor.component.html @@ -1,21 +1,21 @@ - - Code Editor - Multi-language code editor for Browser and Electron - - + + Code Editor + Multi-language code editor for Browser and Electron + +

With this component you can utilize the Monaco Editor as an Angular Component in a Browser or Electron.

- - - - Github Repo - npm Module - - - - Basic example - Editor running in browser
(change language, theme, right click context menu, syntax highlighting, and more) - - + + + + Github Repo + npm Module + + + + Basic example + Editor running in browser
(change language, theme, right click context menu, syntax highlighting, and more) + +
@@ -23,28 +23,28 @@
- - - + + +
Editor Language - - SQL - JavaScript - HTML - + + SQL + JavaScript + HTML +
- +
Editor Theme - - Light - Dark - High Contrast - + + Light + Dark + High Contrast +
- - + + diff --git a/src/app/components/components/components.component.html b/src/app/components/components/components.component.html index 8aa92631eb..a51b4ad0ee 100644 --- a/src/app/components/components/components.component.html +++ b/src/app/components/components/components.component.html @@ -5,62 +5,62 @@ [opened]="media.registerQuery('gt-sm') | async" [mode]="(media.registerQuery('gt-sm') | async) ? 'side' : ((media.registerQuery('sm') | async) ? 'push' : 'over')" [sidenavWidth]="(media.registerQuery('gt-xs') | async) ? '350px' : '100%'"> - - -

Core Components

+ +

Core Components

- - {{item.icon}} -

{{item.title}}

-

{{item.description}}

+ {{item.icon}} +

{{item.title}}

+

{{item.description}}

- + -

Optional Components

+

Optional Components

- - {{item.icon}} -

{{item.title}}

-

{{item.description}}

+ {{item.icon}} +

{{item.title}}

+

{{item.description}}

- + -

External Components

- External Components + - layers -

Angular Material

-

Material Design components

- launch + layers +

Angular Material

+

Material Design components

+ launch - + - - {{item.icon}} -

{{item.title}}

-

{{item.description}}

+ {{item.icon}} +

{{item.title}}

+

{{item.description}}

- + - +
- Components & Addons diff --git a/src/app/components/components/components.component.ts b/src/app/components/components/components.component.ts index bc9f222b27..f8f8d32805 100644 --- a/src/app/components/components/components.component.ts +++ b/src/app/components/components/components.component.ts @@ -161,7 +161,7 @@ export class ComponentsComponent implements AfterViewInit { ngAfterViewInit(): void { // broadcast to all listener observables when loading the page - setTimeout(() => { // workaround since MdSidenav has issues redrawing at the beggining + setTimeout(() => { // workaround since MatSidenav has issues redrawing at the beggining this.media.broadcast(); this._changeDetectorRef.detectChanges(); }); diff --git a/src/app/components/components/components.module.ts b/src/app/components/components/components.module.ts index 5f1d4a8ca7..4f08721e7b 100644 --- a/src/app/components/components/components.module.ts +++ b/src/app/components/components/components.module.ts @@ -37,9 +37,9 @@ import { NgxTranslateDemoComponent } from './ngx-translate/ngx-translate.compone import { NgxChartsModule } from '@swimlane/ngx-charts'; import { TranslateModule } from '@ngx-translate/core'; -import { MdButtonModule, MdListModule, MdIconModule, MdCardModule, MdMenuModule, MdInputModule, MdButtonToggleModule, MdSlideToggleModule, - MdSelectModule, MdToolbarModule, MdTabsModule, MdTooltipModule, MdCoreModule, MdAutocompleteModule, - MdProgressBarModule } from '@angular/material'; +import { MatButtonModule, MatListModule, MatIconModule, MatCardModule, MatMenuModule, MatInputModule, MatButtonToggleModule, MatSlideToggleModule, + MatSelectModule, MatToolbarModule, MatTabsModule, MatTooltipModule, MatAutocompleteModule, + MatProgressBarModule } from '@angular/material'; import { CovalentCommonModule, CovalentLayoutModule, CovalentMediaModule, CovalentExpansionPanelModule, CovalentFileModule, CovalentStepsModule, CovalentLoadingModule, CovalentDialogsModule, CovalentSearchModule, CovalentPagingModule, @@ -92,21 +92,20 @@ import { ToolbarModule } from '../../components/toolbar/toolbar.module'; CommonModule, FormsModule, /** Material Modules */ - MdCoreModule, - MdButtonModule, - MdListModule, - MdIconModule, - MdCardModule, - MdMenuModule, - MdInputModule, - MdSelectModule, - MdButtonToggleModule, - MdSlideToggleModule, - MdToolbarModule, - MdTabsModule, - MdTooltipModule, - MdProgressBarModule, - MdAutocompleteModule, + MatButtonModule, + MatListModule, + MatIconModule, + MatCardModule, + MatMenuModule, + MatInputModule, + MatSelectModule, + MatButtonToggleModule, + MatSlideToggleModule, + MatToolbarModule, + MatTabsModule, + MatTooltipModule, + MatProgressBarModule, + MatAutocompleteModule, /** Covalent Modules */ CovalentCommonModule, CovalentLayoutModule, diff --git a/src/app/components/components/data-table/data-table.component.html b/src/app/components/components/data-table/data-table.component.html index 35dc040949..37ccf7476a 100644 --- a/src/app/components/components/data-table/data-table.component.html +++ b/src/app/components/components/data-table/data-table.component.html @@ -1,14 +1,14 @@ - - Data Table - Display sets of raw data - - + + Data Table + Display sets of raw data + +

Custom Data Table

with custom headings, columns, and inline editing

- - - - Demo + + + + Demo
@@ -19,7 +19,7 @@

with custom headings, columns, and inline editing

{{column.label}} @@ -30,15 +30,15 @@

with custom headings, columns, and inline editing

{{column.format ? column.format(row[column.name]) : row[column.name]}}
- comment + comment Comments
- +
- - - Code + + + Code

HTML:

with custom headings, columns, and inline editing { {column.label}} - comment + comment Comments @@ -62,7 +62,7 @@

with custom headings, columns, and inline editing

{ {column.format ? column.format(row[column.name]) : row[column.name]}} - + @@ -107,18 +107,18 @@

with custom headings, columns, and inline editing

Data:

- - - - - - + + + + + +

Basic Data Table

with formatting, configurable width columns and templates

- - - - Demo + + + + Demo @@ -126,9 +126,9 @@

with formatting, configurable width columns and templates - - - Code + + + Code

HTML:

with formatting, configurable width columns and templates { name: 'last_name', label: 'Last name', width: { min: 150, max: 250 } }, { name: 'gender', label: 'Gender'}, { name: 'email', label: 'Email', width: 250}, - { name: 'img', label: 'Avatar', width: 50}, + { name: 'img', label: '', width: 100}, ]; basicData: any[] = [...]; // see data json @@ -165,18 +165,18 @@

with formatting, configurable width columns and templates

Data:

- - - - - - + + + + + +

Data Table with components

Paging Bar / Search Box / Sortable components

- - - - Demo + + + + Demo
Title here @@ -184,11 +184,11 @@

Paging Bar / Search Box / Sortable components

 -
- + No results to display.

Rows per page: - - + + {{size}} - - + + {{pagingBar.range}} of {{pagingBar.total}} - - - Code + + + Code

HTML:

No results to display. - + No results to display. Rows per page: - - + + { {size} } - - + + { {pagingBar.range} } of { {pagingBar.total} } ]]> @@ -338,66 +338,66 @@

No results to display.

Data:

- - - - - + + + + +
- + Selectable rows - - + + Clickable rows - - + + Multiple rows (shift + click for range selection) - +
- +
- + Tooltips on column headers - +
- +
- - Hide gender - - + + Hide calories + + Type column is searchable (search for lifsey) - +
- - + + - - TdDataTableService - How to use this service - - + + TdDataTableService + How to use this service + +

Service provided with methods for sorting/paging/searching the data table.

Properties:

The service has {{serviceAttrs.length}} methods:

- + - -

{{attr.name}}: {{attr.type}}

-

{{attr.description}}

+ +

{{attr.name}}: {{attr.type}}

+

{{attr.description}}

- + - - - - - Data Table (Atomic) Components - How to use these components - - + + + + + Data Table (Atomic) Components + How to use these components + +

Use ]]> element to generate wrapper atomic table.

Use ]]> element to generate wrapper atomic column row.

Use ]]> element to generate wrapper atomic row.

@@ -405,25 +405,25 @@

{{attr.name}}: {{attr.type}}

Use ]]> element to generate wrapper atomic column.

Properties:

The ]]> component has {{cellAttrs.length}} properties:

- + - -

{{attr.name}}: {{attr.type}}

-

{{attr.description}}

+ +

{{attr.name}}: {{attr.type}}

+

{{attr.description}}

- + - +

The ]]> component has {{columnAttrs.length}} properties:

- + - -

{{attr.name}}: {{attr.type}}

-

{{attr.description}}

+ +

{{attr.name}}: {{attr.type}}

+

{{attr.description}}

- + - +

Example:

HTML:

@@ -453,5 +453,5 @@

Example:

]]> - - + + diff --git a/src/app/components/components/data-table/data-table.component.ts b/src/app/components/components/data-table/data-table.component.ts index 02575fdc22..f7144aedbf 100644 --- a/src/app/components/components/data-table/data-table.component.ts +++ b/src/app/components/components/data-table/data-table.component.ts @@ -86,7 +86,7 @@ export class DataTableDemoComponent implements OnInit { { name: 'last_name', label: 'Last name', width: { min: 150, max: 250 } }, { name: 'gender', label: 'Gender'}, { name: 'email', label: 'Email', width: 250}, - { name: 'img', label: 'Avatar', width: 50}, + { name: 'img', label: '', width: 100}, ]; columns: ITdDataTableColumn[] = [ diff --git a/src/app/components/components/dialogs/dialogs.component.html b/src/app/components/components/dialogs/dialogs.component.html index 94dbfaeeb1..e219c5147b 100644 --- a/src/app/components/components/dialogs/dialogs.component.html +++ b/src/app/components/components/dialogs/dialogs.component.html @@ -1,32 +1,32 @@ - - Simple Dialogs - Quick way to use alert, confirm and prompt dialogs - - - - - - - - - TdDialogService - How to use this service - - + + Simple Dialogs + Quick way to use alert, confirm and prompt dialogs + + + + + + + + + TdDialogService + How to use this service + +

TdDialogService

-

Service provided with methods that wrap the @angular/material [MdDialog] service and provide an easier experience for simple dialogs.

+

Service provided with methods that wrap the @angular/material [MatDialog] service and provide an easier experience for simple dialogs.

Note: if no [ViewContainerRef] is provided, [TdDialogService] will throw an error.

Methods:

The [TdDialogService] service has {{dialogServiceMethods.length}} properties:

- + - -

{{attr.name}}: {{attr.type}}

-

{{attr.description}}

+ +

{{attr.name}}: {{attr.type}}

+

{{attr.description}}

- + - +

Example(after setup):

Typescript:

@@ -105,5 +105,5 @@

Setup:

]]>

After that, just inject [TdDialogService] and use it for your dialogs.

- - \ No newline at end of file + + \ No newline at end of file diff --git a/src/app/components/components/dialogs/dialogs.component.ts b/src/app/components/components/dialogs/dialogs.component.ts index 536c88a65f..62a3eaeb23 100644 --- a/src/app/components/components/dialogs/dialogs.component.ts +++ b/src/app/components/components/dialogs/dialogs.component.ts @@ -18,22 +18,22 @@ export class DialogsDemoComponent { dialogServiceMethods: Object[] = [{ description: `Opens an alert dialog with the provided config.`, name: 'openAlert', - type: 'function(IAlertConfig): MdDialogRef', + type: 'function(IAlertConfig): MatDialogRef', }, { description: `Opens a confirm dialog with the provided config.`, name: 'openConfirm', - type: 'function(IConfirmConfig): MdDialogRef', + type: 'function(IConfirmConfig): MatDialogRef', }, { description: `Opens a prompt dialog with the provided config.`, name: 'openPrompt', - type: 'function(IPromptConfig): MdDialogRef', + type: 'function(IPromptConfig): MatDialogRef', }, { - description: `Wrapper function over the open() method in MdDialog. + description: `Wrapper function over the open() method in MatDialog. Opens a modal dialog containing the given component.`, name: 'open', - type: 'function(component: ComponentType, config: MdDialogConfig): MdDialogRef', + type: 'function(component: ComponentType, config: MatDialogConfig): MatDialogRef', }, { - description: `Wrapper function over the closeAll() method in MdDialog. + description: `Wrapper function over the closeAll() method in MatDialog. Closes all of the currently-open dialogs.`, name: 'closeAll', type: 'function()', diff --git a/src/app/components/components/directives/directives.component.html b/src/app/components/components/directives/directives.component.html index 2f90df29de..323c87b850 100644 --- a/src/app/components/components/directives/directives.component.html +++ b/src/app/components/components/directives/directives.component.html @@ -1,8 +1,8 @@ - - Directives - Core Covalent directives & utilities - - + + Directives + Core Covalent directives & utilities + +

A directive is essentially like a component functionally without a template. There are structural and attribute directives.

Structural directives can change the DOM layout by adding and removing DOM elements. NgFor and NgIf are two familiar examples.

An Attribute directive can change the appearance or behavior of an element. The built-in NgStyle directive, for example, can change several element styles at the same time.

@@ -22,53 +22,53 @@

Setup:

export class MyModule {} ]]> - - - - Directives Docs - - + + + + Directives Docs + + - - Autotrim directive - - + + Autotrim directive + +

Use tdAutoTrim on an input to automatically trim the characters.

Try entering white spaces before or after a word this input:

- - - + + +

Usage:

- - + + + ]]> - - + + - - Toggle directive - - + + Toggle directive + +

Use [tdToggle]="variable" on an element to toggle it open or closed (used in Stepper & Expansion Panels).

Click on this to open a div:

- +
- - Toggle Card - Reveal or hide with a toggle click! - - + + Toggle Card + Reveal or hide with a toggle click! + +

HTML:

Toggle +
Reveal or hide with a toggle click!
@@ -82,27 +82,27 @@

Setup:

this.toggleDiv = !this.toggleDiv; {{ '}' }} - - + + - - Fade directive - - + + Fade directive + +

Use [tdFade]="variable" on an element to fade it in and out.

Click on this to open a div:

- +
- - Fade Card - Fade in or out with a click! - - + + Fade Card + Fade in or out with a click! + +

HTML:

Toggle +
This one fades in and out!
@@ -116,5 +116,5 @@

Setup:

this.fadeDiv = !this.fadeDiv; {{ '}' }} - - + + diff --git a/src/app/components/components/dynamic-forms/dynamic-forms.component.html b/src/app/components/components/dynamic-forms/dynamic-forms.component.html index a19a332e31..240edd6ff3 100644 --- a/src/app/components/components/dynamic-forms/dynamic-forms.component.html +++ b/src/app/components/components/dynamic-forms/dynamic-forms.component.html @@ -1,26 +1,26 @@ - - Dynamic Forms - Build forms from a JS object - - + + Dynamic Forms + Build forms from a JS object + +
Generated Form Form Builder
- - + +
- - + +
Toggle to reveal form JSON object
-
- - + +
@@ -39,111 +39,111 @@
- - - - + +
- +
Select a type, add element then update
- - + +
- - + + {{ option }} - - -

Form elements

- +
- - + - - - + + - +
- - + - - - + + - +
- - + - - - + + - +
- Required + Required -
-
- - - + + +

Dynamic Text Elements

- - - - Demo + + + + Demo @@ -154,9 +154,9 @@

Dynamic Text Elements

 - - - Code + + + Code

HTML:

Dynamic Text Elements {{textElements | json}} - - - - - - + + + + + +

Dynamic Number Elements

- - - - Demo + + + + Demo @@ -197,9 +197,9 @@

Dynamic Number Elements

 - - - Code + + + Code

HTML:

Dynamic Number Elements {{numberElements | json}} - - - - - - + + + + + +

Dynamic Boolean Elements

- - - - Demo + + + + Demo
- - - Code + + + Code

HTML:

Dynamic Boolean Elements {{booleanElements | json}} - - - - - - + + + + + +

Dynamic Array Elements

- - - - Demo + + + + Demo - - - Code + + + Code

HTML:

Dynamic Array Elements {{arrayElements | json}} - - - - + + + + - - + +

Dynamic File Input Element

- - - - Demo + + + + Demo - - - Code + + + Code

HTML:

Dynamic File Input Element {{fileElements | json}} - - - - + + + + - - + +

Custom Validation

Using custom validator functions to create your own

- - - - Demo + + + + Demo @@ -328,9 +328,9 @@

Using custom validator functions to create your own

 - - - Code + + + Code

HTML:

Using custom validator functions to create your own }]; ]]> - - + +

Multiple Validators

- - - - Demo + + + + Demo @@ -393,9 +393,9 @@

Multiple Validators

 - - - Code + + + Code

HTML:

Multiple Validators }]; ]]> - - + +

Angular Validators

- - - - Demo + + + + Demo @@ -453,9 +453,9 @@

Angular Validators

 - - - Code + + + Code

HTML:

Angular Validators }]; ]]> - - - - + + + + diff --git a/src/app/components/components/expansion-panel/expansion-panel.component.html b/src/app/components/components/expansion-panel/expansion-panel.component.html index 0c7aa8d79f..42617674a7 100644 --- a/src/app/components/components/expansion-panel/expansion-panel.component.html +++ b/src/app/components/components/expansion-panel/expansion-panel.component.html @@ -1,10 +1,10 @@ - - Expansion panels - Use single or multiple expansion panels - - - - Demo + + Expansion panels + Use single or multiple expansion panels + + + + Demo

md-padding class

@@ -23,10 +23,10 @@

md-padding class

Demo 8
 - - - Code - + + + Code +

HTML:

md-padding class } ]]> - - - - - + + + + +
- + Disabled - +
- - + + - - Grouped Expansion panels - Add margin animation between grouped expansion panels - - - - Demo + + Grouped Expansion panels + Add margin animation between grouped expansion panels + + + + Demo
@@ -95,10 +95,10 @@

md-padding class

 - - - Code - + + + Code +

HTML:

md-padding class ]]> - - - - + + + + - - Expansion panel with summary and templates - Expand to view form, collapse to view summary - - - - Demo + + Expansion panel with summary and templates + Expand to view form, collapse to view summary + + + + Demo - star + star Google 1600 Amphitheatre Pkwy, Mountain View, CA 94043, USA - - - pin_drop -

Google

-

Headquarters

-

+ + + pin_drop +

Google

+

Headquarters

+

1600 Amphitheatre Pkwy
Mountain View, CA 94043, USA

- - + +
- - - + + +
- - - + + +
- +
- - + +
- - - Code - + + + Code +

HTML:

- star + star Google 1600 Amphitheatre Pkwy, Mountain View, CA 94043, USA - - - pin_drop -

Google

-

Headquarters

-

+ + + pin_drop +

Google

+

Headquarters

+

1600 Amphitheatre Pkwy
Mountain View, CA 94043, USA

- - + +
- - - + + +
- - - + + +
- +
- - + +
]]> - - - - + + + + - - Expansion panel with header template - replace the entire header as needed and disable ripple - - - - Demo + + Expansion panel with header template + replace the entire header as needed and disable ripple + + + + Demo - + Custom td-expansion-panel-header - +
Owner - chevron_right + chevron_right John Jameson
API Key - chevron_right + chevron_right 1141e8e8-8d24-4956-93c2
- -

Metadata

- - account_box -

John Jameson

-

Owner

- - - - description -

An item description

-

Description

- - - - vpn_key -

1141e8e8-8d24-4956-93c2

-

API Key

- - + +

Metadata

+ + account_box +

John Jameson

+

Owner

+ + + + description +

An item description

+

Description

+ + + + vpn_key +

1141e8e8-8d24-4956-93c2

+

API Key

+ + - - - Code - + + + Code +

HTML:

- + Custom td-expansion-panel-header - +
Owner - chevron_right + chevron_right John Jameson
API Key - chevron_right + chevron_right 1141e8e8-8d24-4956-93c2
- -

Metadata

- - account_box -

John Jameson

-

Owner

- - - - description -

An item description

-

Description

- - - - vpn_key -

1141e8e8-8d24-4956-93c2

-

API Key

- - + +

Metadata

+ + account_box +

John Jameson

+

Owner

+ + + + description +

An item description

+

Description

+ + + + vpn_key +

1141e8e8-8d24-4956-93c2

+

API Key

+ + ]]> - - - - + + + + diff --git a/src/app/components/components/file-input/file-input.component.html b/src/app/components/components/file-input/file-input.component.html index 0adb79e1d2..aa9fc23cc6 100644 --- a/src/app/components/components/file-input/file-input.component.html +++ b/src/app/components/components/file-input/file-input.component.html @@ -1,13 +1,13 @@ - - File Input - single or multiple selection/drop - - - - Demo - + + File Input + single or multiple selection/drop + + + + Demo +
- - - - - folder + folder Browse... - +
- - - - - - - - Code - + + + + + + + + Code +

HTML:

- - - - - folder + folder Browse... - + ]]> @@ -96,9 +96,9 @@ } ]]> - - - - + + + + \ No newline at end of file diff --git a/src/app/components/components/file-upload/file-upload.component.html b/src/app/components/components/file-upload/file-upload.component.html index 92772bc390..43c24ed80d 100644 --- a/src/app/components/components/file-upload/file-upload.component.html +++ b/src/app/components/components/file-upload/file-upload.component.html @@ -1,42 +1,42 @@ - - File Upload Button - Single upload input button - - - - Demo - + + File Upload Button + Single upload input button + + + + Demo +

Single file selection or drop:

Select Event: {{fileSelectMsg}}

Upload Event: {{fileUploadMsg}}

- file_upload{{ singleFileUpload.files?.name }} + file_upload{{ singleFileUpload.files?.name }} - attach_fileChoose a file... + attach_fileChoose a file... - - - - - - - - Code - + + + + + + + + Code +

HTML:

Select Event: { {fileSelectMsg} }

Upload Event: { {fileUploadMsg} }

- file_upload{ { singleFileUpload.files?.name } } + file_upload{ { singleFileUpload.files?.name } } - attach_fileChoose a file... + attach_fileChoose a file... - + ]]>

Typescript:

@@ -66,37 +66,37 @@

Single file selection or drop:

} ]]> - - - - - - Multiple File Upload Button - - - - Demo - + + + + + + Multiple File Upload Button + + + + Demo +

Multiple selection/drop for only .sql files and custom color palette:

Select Event: {{fileSelectMultipleMsg}}

Upload Event: {{fileUploadMultipleMsg}}

- file_upload + file_upload {{ fileMultipleUpload.files?.name || fileMultipleUpload.files?.length }} files selected - attach_fileChoose multiple .sql files... + attach_fileChoose multiple .sql files... - - - - - - - - Code - + + + + + + + + Code +

HTML:

Multiple selection/drop for only .sql files and custom colo

Upload Event: { {fileUploadMultipleMsg} }

- file_upload + file_upload { { fileMultipleUpload.files?.name || fileMultipleUpload.files?.length } } files selected - attach_fileChoose multiple .sql files... + attach_fileChoose multiple .sql files... ]]> @@ -152,8 +152,8 @@

Multiple selection/drop for only .sql files and custom colo } ]]> - - - - + + + + \ No newline at end of file diff --git a/src/app/components/components/highlight/highlight.component.html b/src/app/components/components/highlight/highlight.component.html index 9f6c27b17d..415b617b2d 100644 --- a/src/app/components/components/highlight/highlight.component.html +++ b/src/app/components/components/highlight/highlight.component.html @@ -1,8 +1,8 @@ - - Syntax Highlighting - Highlighting your code snippets - - + + Syntax Highlighting + Highlighting your code snippets + +

Example:

HTML usage:

@@ -64,7 +64,7 @@

hello world!

} ]]> - - + + diff --git a/src/app/components/components/http/http.component.html b/src/app/components/components/http/http.component.html index a8f9349570..012f1f3742 100644 --- a/src/app/components/components/http/http.component.html +++ b/src/app/components/components/http/http.component.html @@ -1,8 +1,8 @@ - - HttpInterceptorService - How to use this service - - + + HttpInterceptorService + How to use this service + +

HttpInterceptorService

Service provided with methods that wrap the @angular [Http] service and provide an easier experience for interceptor implementation.

To add a desired interceptor, it needs to implement the [IHttpInterceptor] interface.

@@ -18,15 +18,15 @@

HttpInterceptorService

Methods:

The [HttpInterceptorService] service has {{interceptorServiceMethods.length}} properties:

- + - -

{{attr.name}}: {{attr.type}}

-

{{attr.description}}

+ +

{{attr.name}}: {{attr.type}}

+

{{attr.description}}

- + - +

Setup:

Create your custom interceptors by implementing [IHttpInterceptor]:

@@ -160,26 +160,26 @@

Examples:

- `www.url.com/users` - - - - RESTService - How to use this class - - + + + + RESTService + How to use this class + +

RESTService

Abstract class provided with methods that wraps http services to facilitate REST API calls.

Methods:

The RESTService class has {{restServiceMethods.length}} methods:

- + - -

{{attr.name}}: {{attr.type}}

-

{{attr.description}}

+ +

{{attr.name}}: {{attr.type}}

+

{{attr.description}}

- + - +

Example:

Typescript:

@@ -218,5 +218,5 @@

Example:

} ]]> - - + + diff --git a/src/app/components/components/json-formatter/json-formatter.component.html b/src/app/components/components/json-formatter/json-formatter.component.html index d275163b3b..95a9f63c11 100644 --- a/src/app/components/components/json-formatter/json-formatter.component.html +++ b/src/app/components/components/json-formatter/json-formatter.component.html @@ -1,38 +1,38 @@ - - JSON Formatter - JSON object tree with collapsible nodes - - + + JSON Formatter + JSON object tree with collapsible nodes + +

Object using JSON Formatting:

(Use mouse or keyboard to expand/collapse nodes)

- +

Original JSON Object:

{{data | json}} - - - - TdJsonFormatterComponent - How to use this component - - + + + + TdJsonFormatterComponent + How to use this component + +

]]>

Simply add the ]]> element and pass the object to be formatted as a [data] input.

Hovering on nodes will bring out a preview tooltip of the first 5 objects/properties of the node.

The tree is collapsable/expandable so you can navigate through its nodes.

Properties:

The ]]> component has {{jsonFormatterAttrs.length}} properties:

- + - -

{{attr.name}}: {{attr.type}}

-

{{attr.description}}

+ +

{{attr.name}}: {{attr.type}}

+

{{attr.description}}

- + - +

Example:

HTML:

@@ -69,5 +69,5 @@

Setup:

export class MyModule {} ]]> - - + + diff --git a/src/app/components/components/loading/loading.component.html b/src/app/components/components/loading/loading.component.html index de5d8e1b38..8a814248b5 100644 --- a/src/app/components/components/loading/loading.component.html +++ b/src/app/components/components/loading/loading.component.html @@ -1,48 +1,48 @@ - - Loading - Circular or linear progress loader - - + + Loading + Circular or linear progress loader + +

[tdLoading] directive with (*) syntax

with indetederminate [tdLoadingMode], circular [tdLoadingType], overlay [tdLoadingStrategy], accent [tdLoadingColor]

- - - Demo + + + Demo
- - - + + +
- - - + + +
- +
- - - Code + + + Code

HTML:

- - - + + +
- - - + + +
- +
]]> @@ -76,52 +76,52 @@

with indetederminate [tdLoadingMode], circular [tdLoading } ]]> - - - - - - + + + + + +

[tdLoading] directive with template syntax

with determinate [tdLoadingMode], linear [tdLoadingType], replace [tdLoadingStrategy], warn [tdLoadingColor]

- - - Demo + + + Demo
- - - + + +
- - - + + +
- +
- - - Code + + + Code

HTML:

- - - + + +
- - - + + +
- +
]]> @@ -156,52 +156,52 @@

with determinate [tdLoadingMode], linear [tdLoadingType], } ]]> - - - - - - + + + + + +

[tdLoading] until star syntax with variable reference and observables

with accent [tdLoadingColor]

- - - Demo + + + Demo
- + - - + + {{item.label}} - - - + + + - +
- +
- - - Code + + + Code

HTML:

- + - - + + { {item.label} } - - - + + + - +
- +
]]> @@ -224,52 +224,52 @@

with accent [tdLoadingColor]

} ]]> - - - - - - + + + + + +

[tdLoading] until template syntax with booleans

with overlay [tdLoadingStrategy]

- - - Demo + + + Demo
- - - + + +
- - - + + +
- Loading Mask + Loading Mask
- - - Code + + + Code

HTML:

- - - + + +
- - - + + +
- Loading Mask + Loading Mask
]]> @@ -287,28 +287,28 @@

with overlay [tdLoadingStrategy]

} ]]> - - - - - - + + + + + +

Preloaded [TdLoading] fullscreen mask

with indeterminate [mode], circular [type], primary [color] by default

- - - Demo + + + Demo
- +
- - - Code + + + Code

HTML:

- + ]]> @@ -333,28 +333,28 @@

with indeterminate [mode], circular [type], primary [colo } ]]> - - - - - - + + + + + +

Custom [TdLoading] fullscreen mask

with indeterminate [mode], linear [type], accent [color]

- - - Demo + + + Demo
- +
- - - Code + + + Code

HTML:

- + ]]> @@ -382,31 +382,31 @@

with indeterminate [mode], linear [type], accent [color]< } ]]> - - - - - - TdLoadingDirective - How to use this directive - - + + + + + + TdLoadingDirective + How to use this directive + +

tdLoading

Simply add the tdLoading attibute with a "name" value to the element you want to mask.

Dont forget to add the asterisk syntax before the tdLoading directive if its not used in a ]]> element.

More info on the asterisk (*) syntax here

Properties:

The tdLoading directive has {{loadingAttrs.length}} properties:

- + - -

{{attr.name}}: {{attr.type}}

-

{{attr.description}}

-

{{attr.additionalDescription}}

+ +

{{attr.name}}: {{attr.type}}

+

{{attr.description}}

+

{{attr.additionalDescription}}

- + - +

Example(after setup):

HTML (*) syntax:

@@ -481,13 +481,13 @@

Setup:

export class MyModule {} ]]> - - - - TdLoadingService - How to use this service - - + + + + TdLoadingService + How to use this service + +

TdLoadingService

This service is designed to be a factory of loading masks and serves as a facade for their usage.

Simply add this service as a provider to be able to use it in a component.

@@ -502,15 +502,15 @@

TdLoadingService

Methods:

The TdLoadingService service has {{loadingServiceMethods.length}} properties:

- + - -

{{attr.name}}: {{attr.type}}

-

{{attr.description}}

+ +

{{attr.name}}: {{attr.type}}

+

{{attr.description}}

- + - +

Example(after setup):

Typescript:

@@ -537,5 +537,5 @@

Example(after setup):

} ]]> - - + + diff --git a/src/app/components/components/markdown/markdown.component.html b/src/app/components/components/markdown/markdown.component.html index e782822624..3b475fc17f 100644 --- a/src/app/components/components/markdown/markdown.component.html +++ b/src/app/components/components/markdown/markdown.component.html @@ -1,19 +1,19 @@ - - Markdown - Parse markdown code - - + + Markdown + Parse markdown code + + With this component you can easily write inline markdown, or alternatively you can sanitize and load external markdown (.md) files. - - - - Basic example - Headings, lists & paragraphs - - - - - Demo + + + + Basic example + Headings, lists & paragraphs + + + + + Demo # Heading (H1) @@ -35,9 +35,9 @@ Combined emphasis with **asterisks and _underscores_**. - - - Code + + + Code @@ -63,18 +63,18 @@ ]]> - - - - - - Links & Images - There are two ways to create links, inline & reference - - - - - Demo + + + + + + Links & Images + There are two ways to create links, inline & reference + + + + + Demo

Links & Images

There are two ways to create links. Inline & reference:

@@ -92,9 +92,9 @@

Links & Images

[logo]: app/assets/icons/teradata.svg "Teradata Labs" - - - Code + + + Code @@ -114,19 +114,19 @@

Links & Images

]]> - - - - - - - Inline Code & Snippets - Code blocks - - - - - Demo + + + + + + + Inline Code & Snippets + Code blocks + + + + + Demo

Inline has `back-ticks` around it.

Blocks of code are either fenced by lines with three back-ticks ```, or are indented with four spaces.

@@ -142,9 +142,9 @@

Links & Images

print s ``` - - - Code + + + Code @@ -162,18 +162,18 @@

Links & Images

]]> - - - - - - - Block Quotes & Dividers - - - - - Demo + + + + + + + Block Quotes & Dividers + + + + + Demo

Blockquotes

> Blockquotes are very handy in email to emulate reply text. @@ -199,9 +199,9 @@

Dividers

Underscores - - - Code + + + Code @@ -234,9 +234,9 @@

Dividers

]]> - - - - + + + + diff --git a/src/app/components/components/media/media.component.html b/src/app/components/components/media/media.component.html index c201cd0037..ed153de5c9 100644 --- a/src/app/components/components/media/media.component.html +++ b/src/app/components/components/media/media.component.html @@ -1,50 +1,50 @@ - - Media Queries - Responsive service & directive (for attributes) - - + + Media Queries + Responsive service & directive (for attributes) + +

Media Queries:

- + - -

{{demo.query}}

-

matches: {{demo.value}}

+ +

{{demo.query}}

+

matches: {{demo.value}}

- + - - - - - TdMediaService - How to use this service - - + + + + + TdMediaService + How to use this service + +

TdMediaService

This service is designed to provide basic media query evaluation for responsive applications.

It has pre-programmed support for media queries that match the layout breakpoints:

- + - -

{{bpoint.breakpoint}}

-

{{bpoint.query}}

+ +

{{bpoint.breakpoint}}

+

{{bpoint.query}}

- + - +

Methods:

The TdMediaService service has {{mediaServiceMethods.length}} properties:

- + - -

{{attr.name}}: {{attr.type}}

-

{{attr.description}}

+ +

{{attr.name}}: {{attr.type}}

+

{{attr.description}}

- + - +

Example:

Typescript:

@@ -102,26 +102,26 @@

Setup:

export class MyModule {} ]]> - - - - TdMediaToggleDirective - How to use this directive - - + + + + TdMediaToggleDirective + How to use this directive + +

tdMediaToggle

Simply add the tdMediaToggle attibute with a "media query" value to the element you want to modify depending on screen size.

Properties:

The tdMediaToggle directive has {{mediaAttrs.length}} properties:

- + - -

{{attr.name}}: {{attr.type}}

-

{{attr.description}}

+ +

{{attr.name}}: {{attr.type}}

+

{{attr.description}}

- + - +

Example:

HTML:

@@ -132,5 +132,5 @@

Example:

]]> - - + + diff --git a/src/app/components/components/message/message.component.html b/src/app/components/components/message/message.component.html index 7df4dedf10..c6ac681674 100644 --- a/src/app/components/components/message/message.component.html +++ b/src/app/components/components/message/message.component.html @@ -1,118 +1,118 @@ - - Messages & Alerts - Info, warning & alert messages - - - - Demo - + + Messages & Alerts + Info, warning & alert messages + + + + Demo +

Standalone message:

Message in a card with action

- + - + - +

Message in a card content:

- - Card title - + + Card title + - + content - - + +

Toggle visibility:

- + - - - - Code - + + + + Code +

HTML:

Standalone message:

Message in a card with action

- + - + - +

Message in a card content:

- - Card title - + + Card title + - + content - - + +

Toggle visibility:

- + - ]]> - - - - - - - - - - Material Colored Messages - Use the full Material Design color palette - - - - Demo - + + + + Material Colored Messages + Use the full Material Design color palette + + + + Demo +

Using color:

- +

Using class:

- + - - - - Code - + + + + Code +

HTML:

Using color:

- +

Using class:

- + ]]> - - - - - - + + + + + + Color Guide - - + + \ No newline at end of file diff --git a/src/app/components/components/ngx-charts/ngx-charts.component.html b/src/app/components/components/ngx-charts/ngx-charts.component.html index e6862fe775..d7731a3ddd 100644 --- a/src/app/components/components/ngx-charts/ngx-charts.component.html +++ b/src/app/components/components/ngx-charts/ngx-charts.component.html @@ -1,8 +1,8 @@ - - NGX-Charts (External library) - Declarative Charting Framework for Angular - - + + NGX-Charts (External library) + Declarative Charting Framework for Angular + +

Rather than building & maintaining our own td-charts D3 component, we've opted instead to partner with an external open-source library. Charts components are a massive undertaking and would have detracted from the features & support of Covalent.

The NGX-Charts team took the exact approach we would have and did a fantastic job building a framework that can be extended. We therefor are an official partner and will be contributing massive additions.

@@ -14,17 +14,17 @@
  • Easily add new chart components in a modular fashion
  • Everything is styled via SCSS
    • -     - - - NGX-Charts Docs - -     - - Example Charts - Samples of various available charts - - + + + + NGX-Charts Docs + + + + Example Charts + Samples of various available charts + +
    - - Gauge - + + Gauge +
    -     +
    - - Stacked Horizontal Bars - + + Stacked Horizontal Bars +
    -     +
    - - Vertical Grouped Bars - + + Vertical Grouped Bars +
    -     +
    - - Lines - + + Lines +
    -     +
    - - + + - - Code - Demo html, typescript, data & theme - - - - - HTML + + Code + Demo html, typescript, data & theme + + + + + HTML @@ -142,9 +142,9 @@
    - - Gauge - + + Gauge +
    -     +
    - - Stacked Horizontal Bars - + + Stacked Horizontal Bars +
    -     +
    - - Vertical Grouped Bars - + + Vertical Grouped Bars +
    -     +
    - - Lines - + + Lines +
    -     +
    ]]> - - - TypeScript + + + TypeScript - - - Data + + + Data - - - theme.scss + + + theme.scss - - -     -     + + + + - - Recommended Color Palettes - - + + Recommended Color Palettes + +

    Since our apps largely span from Orange / Blue / Grey families, here's some recommended palettes:

    Blues

    @@ -474,7 +474,7 @@

    Blues

    }; ]]> - +

    Oranges

    @@ -491,7 +491,7 @@

    Oranges

    }; ]]> - +

    Blue to Orange

    @@ -511,8 +511,8 @@

    Blue to Orange

    }; ]]> - - - + + + \ No newline at end of file diff --git a/src/app/components/components/ngx-translate/ngx-translate.component.html b/src/app/components/components/ngx-translate/ngx-translate.component.html index 5f8644ce60..a7310c3a49 100644 --- a/src/app/components/components/ngx-translate/ngx-translate.component.html +++ b/src/app/components/components/ngx-translate/ngx-translate.component.html @@ -1,44 +1,44 @@ - - NGX-Translate (External library) - i18n library for Angular - - + + NGX-Translate (External library) + i18n library for Angular + + An implementation of angular translate for Angular. - - - - - - - - - Resources - - - - launch - View @ngx-translate/core documentation + + + + + + + + + Resources + + + + launch + View @ngx-translate/core documentation - - - launch - View @ngx-translate/http-loader documentation + + + launch + View @ngx-translate/http-loader documentation - - - - {{ 'DEMO_BASIC.TITLE' | translate }} - {{ 'DEMO_BASIC.SUBTITLE' | translate }} - - - - + + + + {{ 'DEMO_BASIC.TITLE' | translate }} + {{ 'DEMO_BASIC.SUBTITLE' | translate }} + + + +

    {{ 'DEMO_BASIC.PIPE_MESSAGE' | translate }}

    DEMO_BASIC.DIRECTIVE_MESSAGE

    -     - + +

    HTML:

    DEMO_BASIC.DIRECTIVE_MESSAGE

    } ]]> -     -     -     - - - - - -     - - {{ 'DEMO_ONE.TITLE' | translate }} - {{ 'DEMO_ONE.SUBTITLE' | translate }} - - - - + + + + + + + + + + + {{ 'DEMO_ONE.TITLE' | translate }} + {{ 'DEMO_ONE.SUBTITLE' | translate }} + + + +
    - - 0 - 1 - 4 - 10 - + 0 + 1 + 4 + 10 +
    {{ 'DEMO_ONE.COUNT.NONE' | translate }} @@ -122,20 +122,20 @@

    DEMO_BASIC.DIRECTIVE_MESSAGE

    {{ 'DEMO_ONE.COUNT.PLURAL' | translate:{value: valueCountForPlural} }}
    -     - + +

    HTML:

    - - 0 - 1 - 4 - 10 - + 0 + 1 + 4 + 10 +
    { { 'DEMO_ONE.COUNT.NONE' | translate } } @@ -201,55 +201,55 @@

    DEMO_BASIC.DIRECTIVE_MESSAGE

    } ]]> - - - - - - - - - - - {{ 'DEMO_TWO.TITLE' | translate }} - {{ 'DEMO_TWO.SUBTITLE' | translate }} - - - - - - - person -

    Any person

    -

    DEMO_TWO.BALANCE

    + + + + + + + + + + + {{ 'DEMO_TWO.TITLE' | translate }} + {{ 'DEMO_TWO.SUBTITLE' | translate }} + + + + + + + person +

    Any person

    +

    DEMO_TWO.BALANCE

    {{dateToFormat | date:'medium'}} -     - - person -

    Another person

    -

    DEMO_TWO.BALANCE

    + + + person +

    Another person

    +

    DEMO_TWO.BALANCE

    {{dateToFormat | date:'medium'}} -     -     -     - + + + +

    HTML:

    - - person -

    Any person

    -

    DEMO_TWO.BALANCE

    + + + person +

    Any person

    +

    DEMO_TWO.BALANCE

    { {dateToFormat | date:'medium'} } -     - - person -

    Another person

    -

    DEMO_TWO.BALANCE

    + + + person +

    Another person

    +

    DEMO_TWO.BALANCE

    { {dateToFormat | date:'medium'} } -     - + + ]]>

    Typescript (NgModule):

    @@ -288,31 +288,31 @@

    Another person

    } ]]> -     -     -     - - - - - -     - - {{ 'DEMO_THREE.TITLE' | translate }} - {{ 'DEMO_THREE.SUBTITLE' | translate }} - - - - + + + + + + + + + + + {{ 'DEMO_THREE.TITLE' | translate }} + {{ 'DEMO_THREE.SUBTITLE' | translate }} + + + +
    - +
    -     - + +

    HTML:

    { {'DEMO_THREE.OPEN_ALERT' | translate} } + ]]>

    Typescript:

    @@ -373,12 +373,12 @@

    Another person

    } ]]> -     -     -     - - - - - -     \ No newline at end of file + + + + + + + + + \ No newline at end of file diff --git a/src/app/components/components/notifications/notifications.component.html b/src/app/components/components/notifications/notifications.component.html index 3011c2a5ca..629fed3cef 100644 --- a/src/app/components/components/notifications/notifications.component.html +++ b/src/app/components/components/notifications/notifications.component.html @@ -1,267 +1,267 @@ - - Notifications - Notification count & menu for toolbar - - + + Notifications + Notification count & menu for toolbar + +

    Toolbar notification & menu

    - - - Demo - - Toolbar - person + person - messages + messages - - +
    Notifications
    - + - - today -

    A user did an activity on an item that you've subscribed to follow actions on.

    -

    22 minutes ago

    +     + today +

    A user did an activity on an item that you've subscribed to follow actions on.

    +

    22 minutes ago

     - +     -     -     -     - - - + + - - -     -     - - Code + + + + + Code

    HTML:

    - Toolbar - person + person - messages + messages - - +
    Notifications
    - + - - today -

    A user did an activity on an item that you've subscribed to follow actions on.

    -

    22 minutes ago

    +     + today +

    A user did an activity on an item that you've subscribed to follow actions on.

    +

    22 minutes ago

     - +     -     -     -     - - - + + - - - + + ]]>     -     -     -     -     - - + + + + + +

    Tabs notification

    - - - Demo - - - + + + Demo + + +
    Activities
    -     - - + + +
    Logs
    -     - - + + +
    Chats
    -     -     -     - - Code + + + + + Code

    HTML:

    - - + + +
    Activities
    -     - - +     + +
    Logs
    -     - - + + +
    Chats
    -     -     + + ]]> - - -     -     - - + + + + + +

    List item notification

    - - - Demo - - - person -

    Jyn Erso stole the plans to the Death Star

    -

    10 mins ago

    + + + Demo + +     + person +

    Jyn Erso stole the plans to the Death Star

    +

    10 mins ago

    - - - person -

    Something something something.. dark side.

    -

    9 hours ago

    + +     + person +

    Something something something.. dark side.

    +

    9 hours ago

    - - - person -

    Chirrut Îmwe beat down a bunch of storm troopers with a stick

    -

    2 days ago

    + +     + person +

    Chirrut Îmwe beat down a bunch of storm troopers with a stick

    +

    2 days ago

    -     -     - - Code + + + + Code

    HTML:

    - - person -

    Jyn Erso stole the plans to the Death Star

    -

    10 mins ago

    + +     + person +

    Jyn Erso stole the plans to the Death Star

    +

    10 mins ago

    - - - person -

    Something something something.. dark side.

    -

    9 hours ago

    + +     + person +

    Something something something.. dark side.

    +

    9 hours ago

    - - - person -

    Chirrut Îmwe beat down a bunch of storm troopers with a stick

    -

    2 days ago

    + +     + person +

    Chirrut Îmwe beat down a bunch of storm troopers with a stick

    +

    2 days ago

    - + ]]>     -     -     -     -     + + + + \ No newline at end of file diff --git a/src/app/components/components/overview/overview.component.html b/src/app/components/components/overview/overview.component.html index 86bd7b0267..8c250fc557 100644 --- a/src/app/components/components/overview/overview.component.html +++ b/src/app/components/components/overview/overview.component.html @@ -1,83 +1,83 @@ - - Core Components - Core Covalent Components, Directives, Pipes & Services - - + + Core Components + Core Covalent Components, Directives, Pipes & Services + +
    - - - {{item.icon}} - - + + + {{item.icon}} + +
    {{item.title}}
    -     -     + +
    -     -     - - Optional Components - Extra components & services not required - - + + + + Optional Components + Extra components & services not required + +
    - - - {{item.icon}} - - + + + {{item.icon}} + +
    {{item.title}}
    -     -     + +
    -     -     - - External Components - Recommended but not maintained by Covalent - - + + + + External Components + Recommended but not maintained by Covalent + +
    - - - {{item.icon}} - - + + + {{item.icon}} + +
    {{item.title}}
    -     -     + +
    -     -     \ No newline at end of file + + \ No newline at end of file diff --git a/src/app/components/components/paging/paging.component.html b/src/app/components/components/paging/paging.component.html index 663cc17ec6..7acefb2f98 100644 --- a/src/app/components/components/paging/paging.component.html +++ b/src/app/components/components/paging/paging.component.html @@ -1,11 +1,11 @@ - - Paging - Paging bar for lists and tables - - - - Demo - + + Paging + Paging bar for lists and tables + + + + Demo +

    Change Event:

    Page Size: {{event?.pageSize || '100'}}

    @@ -13,15 +13,15 @@

    Rows: {{event?.fromRow || '1'}} to {{event?.toRow || '100'}}

    Total: {{event?.total || '1345'}}

    -     - + + {{pagingBar.range}} of {{pagingBar.total}} -     - - Code - + + + Code +

    HTML:

    -     -     -     - - + + + + +
    - +
    -     -     + + - - Paging with dynamic page size - Set a select to change the page size on the fly - - - - Demo - + + Paging with dynamic page size + Set a select to change the page size on the fly + + + + Demo +

    Change Event:

    Page Size: {{eventPageSize?.pageSize || '100'}}

    @@ -75,31 +75,31 @@

    Rows: {{eventPageSize?.fromRow || '1'}} to {{eventPageSize?.toRow || '100'}}

    Total: {{eventPageSize?.total || '1345'}}

    -     - + + Rows per page: - - + + {{size}} - - + + {{pagingBarPageSize.range}} of {{pagingBarPageSize.total}} -     - - Code - + + + Code +

    HTML:

    Rows per page: - - + + { {size} } - - + + { {pagingBarPageSize.range} } of { {pagingBarPageSize.total} } ]]> @@ -119,19 +119,19 @@ } ]]> -     -     -     -     + + + + - - Paging using page links - Navigate to pages with button links - - - - Demo - + + Paging using page links + Navigate to pages with button links + + + + Demo +

    Change Event:

    Page Size: {{eventLinks?.pageSize || '100'}}

    @@ -139,15 +139,15 @@

    Rows: {{eventLinks?.fromRow || '1'}} to {{eventLinks?.toRow || '100'}}

    Total: {{eventLinks?.total || '1345'}}

    -     - + + {{pagingBarLinks.range}} of {{pagingBarLinks.total}} -     - - Code - + + + Code +

    HTML:

    -     -     -     -     + + + + - - Paging using input - Navigate to a specific page - - - - Demo - + + Paging using input + Navigate to a specific page + + + + Demo +

    Change Event:

    Page Size: {{eventInput?.pageSize || '100'}}

    @@ -190,41 +190,41 @@

    Rows: {{eventInput?.fromRow || '1'}} to {{eventInput?.toRow || '100'}}

    Total: {{eventInput?.total || '1345'}}

    -     - + +

    Go to:

    - + - + {{pagingBarInput.range}} of {{pagingBarInput.total}}     -     - - Code - + + + Code +

    HTML:

    Go to:

    - + - + { {pagingBarInput.range} } of { {pagingBarInput.total} } ]]> @@ -243,19 +243,19 @@ } ]]>     -     -     -     -     + + + + - - Paging with everything - All the previous things + reponsiveness leveraging the `CovalentMediaModule` - - - - Demo - + + Paging with everything + All the previous things + responsiveness leveraging the `CovalentMediaModule` + + + + Demo +

    Change Event:

    Page Size: {{eventResponsive?.pageSize || '100'}}

    @@ -263,8 +263,8 @@

    Rows: {{eventResponsive?.fromRow || '1'}} to {{eventResponsive?.toRow || '100'}}

    Total: {{eventResponsive?.total || '1345'}}

    -     - + + Rows per page: - - + + {{size}} - - + +

    Go to:

    - + - + {{pagingBarResponsive.range}} of {{pagingBarResponsive.total}}     -     - - Code - + + + Code +

    HTML:

    Rows per page: - - + + { {size} } - - + +

    Go to:

    - + - + { {pagingBarResponsive.range} } of { {pagingBarResponsive.total} } ]]> @@ -338,7 +338,7 @@ ngAfterViewInit(): void { // broadcast to all listener observables when loading the page - setTimeout(() => { // workaround since MdSidenav has issues redrawing at the beggining + setTimeout(() => { // workaround since MatSidenav has issues redrawing at the beggining this.media.broadcast(); this._changeDetectorRef.detectChanges(); }); @@ -350,9 +350,9 @@ } ]]>     -     -     -     -     + + + + \ No newline at end of file diff --git a/src/app/components/components/paging/paging.component.ts b/src/app/components/components/paging/paging.component.ts index 3cbaaab85a..371e2c17f5 100644 --- a/src/app/components/components/paging/paging.component.ts +++ b/src/app/components/components/paging/paging.component.ts @@ -30,7 +30,7 @@ export class PagingDemoComponent implements AfterViewInit { ngAfterViewInit(): void { // broadcast to all listener observables when loading the page - setTimeout(() => { // workaround since MdSidenav has issues redrawing at the beggining + setTimeout(() => { // workaround since MatSidenav has issues redrawing at the beggining this.media.broadcast(); this._changeDetectorRef.detectChanges(); }); diff --git a/src/app/components/components/pipes/pipes.component.html b/src/app/components/components/pipes/pipes.component.html index 7f11d1de2c..8167fe4e91 100644 --- a/src/app/components/components/pipes/pipes.component.html +++ b/src/app/components/components/pipes/pipes.component.html @@ -1,8 +1,8 @@ - - Pipes - Custom Angular pipes (filters) - - + + Pipes + Custom Angular pipes (filters) + +
    Every application starts out with what seems like a simple task: get data, transform them, and show them to users. Getting data could be as simple as creating a local variable or as complex as streaming data over a Websocket.
    A pipe takes in data as input and transforms it to a desired output.
    @@ -22,164 +22,164 @@

    Setup:

    export class MyModule {} ]]> -     - - - Pipes Docs - -     + + + + Pipes Docs + + - - Digits Conversion - - + + Digits Conversion + +

    The digits pipe takes a number and converts the output to an appropriate numerical measurement with an optional precision argument.

    - - + + -

    Digits: {{ log.digits }}

    +

    Digits: {{ log.digits }}

    -

    Converted: {{ log.digits | digits }}

    +

    Converted: {{ log.digits | digits }}

    -

    With precision argument: {{ log.digits | digits:log.precision }}

    -     -     +

    With precision argument: {{ log.digits | digits:log.precision }}

    + +

    Usage:

    - + + -

    Digits: { { log.digits } }

    +

    Digits: { { log.digits } }

    -

    Converted: { { log.digits | digits } }

    +

    Converted: { { log.digits | digits } }

    -

    With precision argument: { { log.digits | digits:log.precision } }

    -     - +

    With precision argument: { { log.digits | digits:log.precision } }

    + + ]]>     -     -     + + - - Byte Conversion - - + + Byte Conversion + +

    The bytes pipe takes a number and converts the output to an appropriate data measurement with an optional precision argument.

    - - + + -

    Bytes: {{ log.bytes }}

    +

    Bytes: {{ log.bytes }}

    -

    Converted: {{ log.bytes | bytes }}

    +

    Converted: {{ log.bytes | bytes }}

    -

    With precision argument: {{ log.bytes | bytes:log.precision }}

    -     -     +

    With precision argument: {{ log.bytes | bytes:log.precision }}

    + +

    Usage:

    - + + -

    Bytes: { { log.bytes } }

    +

    Bytes: { { log.bytes } }

    -

    Converted: { { log.bytes | bytes } }

    +

    Converted: { { log.bytes | bytes } }

    -

    With precision argument: { { log.bytes | bytes:log.precision } }

    -     - +

    With precision argument: { { log.bytes | bytes:log.precision } }

    + + ]]>     -     -     + + - - Time Ago - - + + Time Ago + +

    The timeAgo pipe takes a string, number or Date timestamp (example: 2016-01-29T17:59:59.000Z) and tranforms it to the amount of time that has gone by.

    - - -

    Timestamp: {{ log.timestamp }} | {{ log.timestamp | timeAgo:log.reference }}

    -

    Reference: {{ log.reference }}

    -     -     + + +

    Timestamp: {{ log.timestamp }} | {{ log.timestamp | timeAgo:log.reference }}

    +

    Reference: {{ log.reference }}

    +     +

    Usage:

    - + + { { log.timestamp } } | { { log.timestamp | timeAgo:reference } } //reference is optional - - + + ]]> -     -     + + - - Time Difference - - + + Time Difference + +

    The timeDifference pipe outputs the difference between two times. Strings, Numbers or Date timestamps are acceptable types. (example: 2016-01-29T17:59:59.000Z).

    - - + + -

    Start Time: {{ log.timestamp }} | End Time: {{ log.timestampend }}

    +

    Start Time: {{ log.timestamp }} | End Time: {{ log.timestampend }}

    -

    Difference: {{ log.timestamp | timeDifference:log.timestampend }}

    +

    Difference: {{ log.timestamp | timeDifference:log.timestampend }}

    -

    Difference relative to current time: {{ log.timestamp | timeDifference }}

    -     -     +

    Difference relative to current time: {{ log.timestamp | timeDifference }}

    + +

    Note: Using this pipe without arguments outputs the time difference relative to the current time.

    Usage:

    - + + -

    { { log.timestamp } } | End Time: { { log.timestampend } }

    +

    { { log.timestamp } } | End Time: { { log.timestampend } }

    -

    Difference: { { log.timestamp | timeDifference:log.timestampend } }

    +

    Difference: { { log.timestamp | timeDifference:log.timestampend } }

    -

    Difference relative to current time: { { log.timestamp | timeDifference } }

    -     - +

    Difference relative to current time: { { log.timestamp | timeDifference } }

    + + ]]>     -     -     + + - - Truncate - - + + Truncate + +

    The truncate pipe limits a string to a specified length and adds an ellipsis.

    - - + + -

    Original value: {{ log.text_value }}

    +

    Original value: {{ log.text_value }}

    -

    Truncate with a length value of {{ log.truncate_length }}: {{ log.text_value | truncate:log.truncate_length }}

    -     -     +

    Truncate with a length value of {{ log.truncate_length }}: {{ log.text_value | truncate:log.truncate_length }}

    + +

    Usage:

    - + + -

    Original value: { { log.text_value } }

    +

    Original value: { { log.text_value } }

    -

    Truncate with a length value of { { log.truncate_length } }: { { log.text_value | truncate:log.truncate_length } }

    -     - +

    Truncate with a length value of { { log.truncate_length } }: { { log.text_value | truncate:log.truncate_length } }

    + + ]]>

    Note: If the last character in a returned output is a space, then that space is removed.

    @@ -191,16 +191,16 @@

    Original value: { { log.text_value } }

    { { abcd abcd abcd | truncate:5 } } ]]> -     -     + + - - Angular Pipes - - - - launch - Angular comes with a stock of pipes such as DatePipe, UpperCasePipe, LowerCasePipe, CurrencyPipe, and PercentPipe + + Angular Pipes + + + + launch + Angular comes with a stock of pipes such as DatePipe, UpperCasePipe, LowerCasePipe, CurrencyPipe, and PercentPipe - - \ No newline at end of file + + \ No newline at end of file diff --git a/src/app/components/components/search/search.component.html b/src/app/components/components/search/search.component.html index a610860824..278d8503f8 100644 --- a/src/app/components/components/search/search.component.html +++ b/src/app/components/components/search/search.component.html @@ -1,13 +1,13 @@ - - Search - Search and filter items - - + + Search + Search and filter items + +
    - - search Enter/Clear - keyboard Debounce - + + search Enter/Clear + keyboard Debounce +

    Search Input

    Search Value: {{searchInputTerm || 'Empty'}}

    @@ -20,46 +20,46 @@

    Search Input

    Search Box

    Search Value: {{searchBoxTerm || 'Empty'}}

    - +
    Card
    - - card content -     + + card content +

    Search Box in Toolbar

    - + - - -     - - - - -     - - TdSearchInputComponent - How to use this component - - + + + + + + + + + + TdSearchInputComponent + How to use this component + +

    ]]>

    Use ]]> element to generate a search input with its animated cancel button.

    Properties:

    The ]]> component has {{searchInputAttrs.length}} properties:

    - + - -

    {{attr.name}}: {{attr.type}}

    -

    {{attr.description}}

    +     +

    {{attr.name}}: {{attr.type}}

    +

    {{attr.description}}

    - +     -     +

    Example:

    HTML:

    @@ -83,26 +83,26 @@

    Setup:

    export class MyModule {} ]]>     -     -     - - TdSearchBoxComponent - How to use this component - - + + + + TdSearchBoxComponent + How to use this component + +

    ]]>

    Use ]]> element to generate a search box with animations.

    Properties:

    The ]]> component has {{searchBoxAttrs.length}} properties:

    - + - -

    {{attr.name}}: {{attr.type}}

    -

    {{attr.description}}

    +     +

    {{attr.name}}: {{attr.type}}

    +

    {{attr.description}}

    - +     -     +

    Example:

    HTML:

    @@ -111,5 +111,5 @@

    Example:

    ]]>     -     -     \ No newline at end of file + + \ No newline at end of file diff --git a/src/app/components/components/steps/steps.component.html b/src/app/components/components/steps/steps.component.html index 0e9a0c2164..aab21726f7 100644 --- a/src/app/components/components/steps/steps.component.html +++ b/src/app/components/components/steps/steps.component.html @@ -1,18 +1,18 @@ - - Stepper (Wizard) - A sequence of logical & numbered steps - - + + Stepper (Wizard) + A sequence of logical & numbered steps + +

    Basic Stepper

    - - - Demo + + + Demo
    - - swap_vert Vertical - swap_horiz Horizontal - devices Responsive (gt-sm) - + + swap_vert Vertical + swap_horiz Horizontal + devices Responsive (gt-sm) +

    Active/Deactive Event for Step 1: {{activeDeactiveStep1Msg}}

    {{horizontal ? 'Horizontal Mode' : 'Vertical Mode'}}

    @@ -24,8 +24,8 @@

    {{horizontal ? 'Horizontal Mode' : 'Vertical Mode'}}

    This step is required! - - + + @@ -34,14 +34,14 @@

    {{horizontal ? 'Horizontal Mode' : 'Vertical Mode'}}

    Use an optional step summary to summarize the info in this step - - + +     -     - - Code + + + Code

    HTML:

    {{horizontal ? 'Horizontal Mode' : 'Vertical Mode'}}

    This step is required! - - + + @@ -63,8 +63,8 @@

    {{horizontal ? 'Horizontal Mode' : 'Vertical Mode'}}

    Use an optional step summary to summarize the info in this step - - + +     @@ -100,33 +100,33 @@

    {{horizontal ? 'Horizontal Mode' : 'Vertical Mode'}}

    } ]]> -     -     -     - - - - - -     - - TdStepsComponent - How to use this component - - + + + + + + + + + + + TdStepsComponent + How to use this component + +

    ]]>

    Simply wrap the ]]> elements you need in a ]]> element.

    Properties:

    The ]]> component has {{stepsAttrs.length}} properties:

    - + - -

    {{attr.name}}: {{attr.type}}

    -

    {{attr.description}}

    +     +

    {{attr.name}}: {{attr.type}}

    +

    {{attr.description}}

    - +     -     +

    Example:

    HTML:

    @@ -167,13 +167,13 @@

    Setup:

    export class MyModule {} ]]>     -     -     - - TdStepComponent - How to use this component - - + + + + TdStepComponent + How to use this component + +

    ]]>

    Add as many ]]> elements you need wrapped by a ]]> element for control.

    Uses StepState enum to define step state value [StepState.None, StepState.Required and StepState.Complete].

    @@ -182,15 +182,15 @@

    ]]>

    You can keep it in sync with the (activated/deactivated) events if there is a need to do it.

    Properties:

    The ]]> component has {{stepAttrs.length}} properties:

    - + - -

    {{attr.name}}: {{attr.type}}

    -

    {{attr.description}}

    +     +

    {{attr.name}}: {{attr.type}}

    +

    {{attr.description}}

    - +     -     +

    Example:

    HTML:

    @@ -232,5 +232,5 @@

    Example:

    } ]]>     -     -     + + diff --git a/src/app/components/components/text-editor/text-editor.component.html b/src/app/components/components/text-editor/text-editor.component.html index 9da66dc5be..03f96f65b2 100644 --- a/src/app/components/components/text-editor/text-editor.component.html +++ b/src/app/components/components/text-editor/text-editor.component.html @@ -1,27 +1,27 @@ - - Markdown Text Editor - Simple markdown text editor component - - + + Markdown Text Editor + Simple markdown text editor component + +

    With this component you can utilize SimpleMDE as an Angular Component.

    -     - - - Github Repo - npm Module - -     - - Demo - Edit the markdown in the left editor for a real-time preview - - + + + + Github Repo + npm Module + + + + Demo + Edit the markdown in the left editor for a real-time preview + +
    Editor Preview
    -     - + +
    @@ -30,7 +30,7 @@
    -     + diff --git a/src/app/components/components/virtual-scroll/virtual-scroll.component.html b/src/app/components/components/virtual-scroll/virtual-scroll.component.html index a809f58650..8c9e5a43f2 100644 --- a/src/app/components/components/virtual-scroll/virtual-scroll.component.html +++ b/src/app/components/components/virtual-scroll/virtual-scroll.component.html @@ -1,45 +1,45 @@ - +
    -
    - Virtual Scroll - + Virtual Scroll + Scroll virtually on a set of items - - - + + +
    - - - HTML + + + HTML - + + Column Header - - + + - - person -

    { {row.name} }

    -

    Row: { {row.index} }

    -     - + + person +

    { {row.name} }

    +

    Row: { {row.index} }

    +     +     - + ]]>     -     - - TS + + + TS { {row.name} }

    } ]]> -     -     - + + + - - + + Column Header - - + + - - person -

    {{row.name}}

    -

    Row: {{row.index}}

    -     - + + person +

    {{row.name}}

    +

    Row: {{row.index}}

    +     +     -     -     - - - - - - -     + + diff --git a/src/app/components/design-patterns/alerts/alerts.component.html b/src/app/components/design-patterns/alerts/alerts.component.html index ef6b7f9b02..8bb25c24b9 100644 --- a/src/app/components/design-patterns/alerts/alerts.component.html +++ b/src/app/components/design-patterns/alerts/alerts.component.html @@ -1,91 +1,91 @@
    - - Alert Patterns - - + + Alert Patterns + +

    Problem

    Need to provide information or feedback to the user and potentially prompt them to take action.

    Solution

    Notifications have a signifigant impact on the user's overall impression of the application. This is how the app communicates directly with the user, so it is important to consider the form of notification. For exmaple, dialogs are most useful in situations where the user most take some action or the app needs to communicate critical information. On the other hand, toasts and snackbars are passive and do not require any user action or interruption to the user's workflow. Inline errors are useful for forms validation while guiding the user through the form.

    -     -     + + - - Resources - - - - launch - Material Design Dialogs + + Resources + + + + launch + Material Design Dialogs - - - launch - Material Design Toasts & Snackbars + + + launch + Material Design Toasts & Snackbars - - - launch - Material Design Errors + + + launch + Material Design Errors - - - launch - Angular Material Dialogs + + + launch + Angular Material Dialogs - - - launch - Angular Material Snackbars + + + launch + Angular Material Snackbars - - - launch - Covalent Dialogs + + + launch + Covalent Dialogs - - + +
    - - Examples - - + + Examples + +
    - Dialogs - Notification with call to action - + Dialogs + Notification with call to action +

    Since dialogs are disruptive, reserve use to inform users about a specific task or critical information, such as a verbose/critical error, alert or a confirmation of an action.

    -     +
    - - + +
    -
    -     +
    - - - HTML + + + HTML View Error - + + ]]> - - - Typescript + + + Typescript Solution

    } ]]> -     -     + + - + - - - - -     + + + + +
    - Toast - Brief, floating notification with optional user interaction - + Toast + Brief, floating notification with optional user interaction +

    Toasts & snackbars provide brief feedback about an operation through a message at the bottom of the screen. This information is transient and will go away momentarily.

    -     +
    - - + +
    -
    -     +
    - - - HTML + + + HTML Send toast + ]]> - - - Typescript + + + Typescript Solution

    } ]]>     -     -     + + - + - - - -     + + + +
    - Inline Errors - For forms and inputs use inline errors for contextual feedback. - + Inline Errors + For forms and inputs use inline errors for contextual feedback. +

    Inline errors are useful in forms for validation, warnings and errors.

    -     +
    - - + +
    -
    -     +
    @@ -210,118 +210,118 @@

    Solution

    - - - + + + Required - - - - - + + + + + Required - - + +
    - - - + + + Required - - {{addressEl.value.length}} / 50 - - - - + + {{addressEl.value.length}} / 50 + + + +
    - - - + + + Required 2 uppercase letters - - e.g CA - - - - + + e.g CA + + + + Required 5 digits pls - - e.g 92101 - + + e.g 92101 +
    - +
    - +
    ]]>
    - +
    - - - + + + Required - - - - - + + + + + Required - - + +
    - - + - + Required - - {{addressEl.value.length}} / 50 - - - - + + {{addressEl.value.length}} / 50 + + + +
    - - + - + Required 2 uppercase letters - - e.g CA - - - - + + e.g CA + + + + Required 5 digits pls - - e.g 92101 - + + e.g 92101 +
    -     +
    - - \ No newline at end of file + + \ No newline at end of file diff --git a/src/app/components/design-patterns/alerts/alerts.component.ts b/src/app/components/design-patterns/alerts/alerts.component.ts index 5d7292e0b1..42e6de726f 100644 --- a/src/app/components/design-patterns/alerts/alerts.component.ts +++ b/src/app/components/design-patterns/alerts/alerts.component.ts @@ -4,7 +4,7 @@ import { slideInDownAnimation } from '../../../app.animations'; import { TdDialogService } from '../../../../platform/core'; -import { MdSnackBar } from '@angular/material'; +import { MatSnackBar } from '@angular/material'; @Component({ selector: 'design-patterns-alerts', @@ -28,7 +28,7 @@ export class AlertsComponent { example3: boolean = true; constructor(private _dialogService: TdDialogService, - private _snackBarService: MdSnackBar) {} + private _snackBarService: MatSnackBar) {} showSnackBar(): void { this._snackBarService diff --git a/src/app/components/design-patterns/cards/cards.component.html b/src/app/components/design-patterns/cards/cards.component.html index ca3b80fe98..ce1e473482 100644 --- a/src/app/components/design-patterns/cards/cards.component.html +++ b/src/app/components/design-patterns/cards/cards.component.html @@ -1,534 +1,534 @@
    - - Card Patterns - - + + Card Patterns + +

    Problem

    Need to display item or set of content composed of different elements whose size or supported actions vary.

    Solution

    Cards are a convenient means of displaying content composed of different elements. They’re also well-suited for showcasing elements whose size or supported actions vary, like photos with captions of variable length.

    -     -     - - Resources - - - - launch - Material Design Cards + + + + Resources + + + + launch + Material Design Cards - - - launch - Angular Material Cards + + + launch + Angular Material Cards - - - launch - Google Now Cards + + + launch + Google Now Cards - - + +
    - - Examples - - + + Examples + +
    - Standard Card - Card with standard card elements - + Standard Card + Card with standard card elements +

    A card can be used with any of the optional card sub-elements including:

    - - - md-title + + + md-title - - - md-subtitle + + + md-subtitle - - - md-divider + + + mat-divider - - - md-card-content + + + mat-card-content - - - md-card-actions + + + mat-card-actions - +

    Additionally, a card may contain other components such as search, lists, icons, and images.

    -     +
    - - + +
    -
    -     +
    - Standard Card - Subtitle - - + + Standard Card + Subtitle + +

    Standard card with content

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do tempor incididunt ut labore et dolore magna aliqua. Ut enim ad

    -     - - - - - - + + + + + + + ]]>
    - +
    - - Title - Subtitle - - - - - - - - - -     + + Title + Subtitle + + + + + + + + + +
    - Login Card - Card with form - + Login Card + Card with form +

    In special cases, cards may contain form elements, like the login card. However, in most sitautions, we recommend using the Card Over full page layout for forms.

    -     +
    - - + +
    -
    -     +
    Login - Sign In with Your Credentials - - + Login + Sign In with Your Credentials + +
    - - - + + + Required - - { {userElement.value.length} } / 30 - + + { {userElement.value.length} } / 30 +
    - - - + + + Required - - Something hard to guess - + + Something hard to guess +
    The username or password is incorrect. Please try again.
    -     - - + + +
    - +
    -     - + + ]]>
    - +
    - - - Login - - Sign In with Your Credentials - - + + + Login + + Sign In with Your Credentials + +
    - - + - + Required - - {{userElement.value.length}} / 30 - + + {{userElement.value.length}} / 30 +
    - - + - + Required - - Something hard to guess - + + Something hard to guess +
    The username or password is incorrect. Please try again.
    -     - - + + +
    - +
    -     -     -     + + +
    - Metadata List Card - Card with metadata for an item detail - -

    Cards support many rich components, including our management list. When adding multiple lists to a card, seperate them using md-divider and consider adding md-subheader.

    -     + Metadata List Card + Card with metadata for an item detail + +

    Cards support many rich components, including our management list. When adding multiple lists to a card, seperate them using mat-divider and consider adding matSubheader.

    +
    - - + +
    -
    -     +
    - Item Info - Info About This Item - - -

    Metadata

    - - account_box -

    John Jameson

    -

    Owner

    -     - - - description -

    An Item Description

    -

    Description

    -     - - - vpn_key -

    1141e8e8-8d24-4956-93c2

    -

    API Key

    -     - -

    Dates

    - - access_time -

    Wed, July 6, 2016 11:13 AM

    -

    Last Updated

    -     - - - today -

    Wed, July 4, 2016 09:11 AM

    -

    Created

    -     -     - - - - - + + Item Info + Info About This Item + + +

    Metadata

    + + account_box +

    John Jameson

    +

    Owner

    +     + + + description +

    An Item Description

    +

    Description

    +     + + + vpn_key +

    1141e8e8-8d24-4956-93c2

    +

    API Key

    +     + +

    Dates

    + + access_time +

    Wed, July 6, 2016 11:13 AM

    +

    Last Updated

    +     + + + today +

    Wed, July 4, 2016 09:11 AM

    +

    Created

    +     +     + + + + +     ]]>
    - +
    - - Item Info - Info About This Item - - -

    Metadata

    - - account_box -

    John Jameson

    -

    Owner

    -     - - - description -

    An Item Description

    -

    Description

    -     - - - vpn_key -

    1141e8e8-8d24-4956-93c2

    -

    API Key

    -     - -

    Dates

    - - access_time -

    Wed, July 6, 2016 11:13 AM

    -

    Last Updated

    -     - - - today -

    Wed, July 4, 2016 09:11 AM

    -

    Created

    -     -     - - - - -     -     + + Item Info + Info About This Item + + +

    Metadata

    + + account_box +

    John Jameson

    +

    Owner

    +     + + + description +

    An Item Description

    +

    Description

    +     + + + vpn_key +

    1141e8e8-8d24-4956-93c2

    +

    API Key

    +     + +

    Dates

    + + access_time +

    Wed, July 6, 2016 11:13 AM

    +

    Last Updated

    +     + + + today +

    Wed, July 4, 2016 09:11 AM

    +

    Created

    +     +     + + + + +     +
    - CRUD Manage List Card - Card with faux-columns & search - + CRUD Manage List Card + Card with faux-columns & search +

    In this example, notice the search component in the top left. Also, using the flex model, you can simulate columns by using the same layout on each row. See the management list for more implementation details.

    -     +
    - - + +
    -
    -     +
    - - - - search - - - - - apps -

    App Name

    + + + + + search + + + + + apps +

    App Name

    Owner Modified -     + - - dns -

    Item { {i} }

    -

    Item Description

    +     + dns +

    Item { {i} }

    +

    Item Description

    Firstname Lastname Apr 14, 2016 12:32 PM     - +     -     - + + ]]>
    - +
    - - - - - search - - - - - apps -

    App Name

    + + + + + search + + + + + apps +

    App Name

    Owner Modified -     + - - dns -

    Item {{i}}

    -

    Item Description

    +     + dns +

    Item {{i}}

    +

    Item Description

    Firstname Lastname Apr 14, 2016 12:32 PM     - +     -     -     -     + + +
    - Card with Image Variations - Card with sepcial image elements - + Card with Image Variations + Card with sepcial image elements +

    Images displayed within cards inherit styling which removes margin and padding, depending on where the imgae is positioned within the card. Notice if the image is first it has proper rounded corners.

    Examples are leveraging the following special image elements:

    - - - Card Small Image -

    md-card-sm-image

    + +     + Card Small Image +

    mat-card-sm-image

     - - - Card Medium Image -

    md-card-md-image

    + +     + Card Medium Image +

    mat-card-md-image

     -     -     + +
    - - + +
    -
    -     +
    - - - Card with Image First - 100% Width Image - - - + + + Card with Image First + 100% Width Image + + +
    - - - Card with Small Image - 80px x 80px Image - - - + + + Card with Small Image + 80px x 80px Image + + +
    - - - Card with Medium Image - 112px x 112px Image - - - + + + Card with Medium Image + 112px x 112px Image + + +
    - - - Card with Large Image - 152px x 152px image - - - + + + Card with Large Image + 152px x 152px image + + +
    ]]>
    - +
    - - kitten - Card with Image First - 100% Width Image - - - + + kitten + Card with Image First + 100% Width Image + + +
    - - - Card with Small Image - 80px x 80px Image - kitten - - + + + Card with Small Image + 80px x 80px Image + kitten + +
    - - - Card with Medium Image - 112px x 112px Image - kitten - - + + + Card with Medium Image + 112px x 112px Image + kitten + +
    - - - Card with Large Image - 152px x 152px Image - kitten - - + + + Card with Large Image + 152px x 152px Image + kitten + +
    - +
    -     -     \ No newline at end of file + + \ No newline at end of file diff --git a/src/app/components/design-patterns/design-patterns.component.html b/src/app/components/design-patterns/design-patterns.component.html index 06d2566aff..9d5897acc1 100644 --- a/src/app/components/design-patterns/design-patterns.component.html +++ b/src/app/components/design-patterns/design-patterns.component.html @@ -5,27 +5,27 @@ [opened]="media.registerQuery('gt-sm') | async" [mode]="(media.registerQuery('gt-sm') | async) ? 'side' : ((media.registerQuery('sm') | async) ? 'push' : 'over')" [sidenavWidth]="(media.registerQuery('gt-xs') | async) ? '350px' : '100%'"> - - -

    Design Patterns

    + +

    Design Patterns

    - - {{item.icon}} -

    {{item.title}}

    -

    {{item.description}}

    + {{item.icon}} +

    {{item.title}}

    +

    {{item.description}}

    - +     -     +
    - Design Patterns diff --git a/src/app/components/design-patterns/design-patterns.component.ts b/src/app/components/design-patterns/design-patterns.component.ts index 5eaf447c2d..019e052e73 100644 --- a/src/app/components/design-patterns/design-patterns.component.ts +++ b/src/app/components/design-patterns/design-patterns.component.ts @@ -41,7 +41,7 @@ export class DesignPatternsComponent implements AfterViewInit { ngAfterViewInit(): void { // broadcast to all listener observables when loading the page - setTimeout(() => { // workaround since MdSidenav has issues redrawing at the beggining + setTimeout(() => { // workaround since MatSidenav has issues redrawing at the beggining this.media.broadcast(); this._changeDetectorRef.detectChanges(); }); diff --git a/src/app/components/design-patterns/design-patterns.module.ts b/src/app/components/design-patterns/design-patterns.module.ts index 6e6a95ada5..b64bc31e24 100644 --- a/src/app/components/design-patterns/design-patterns.module.ts +++ b/src/app/components/design-patterns/design-patterns.module.ts @@ -10,9 +10,9 @@ import { AlertsComponent } from './alerts/alerts.component'; import { ManagementListComponent } from './management-list/management-list.component'; import { NavigationDrawerComponent } from './navigation-drawer/navigation-drawer.component'; -import { MdButtonModule, MdListModule, MdIconModule, MdCardModule, MdToolbarModule, MdCoreModule, MdSnackBarModule, - MdInputModule, MdMenuModule, MdSelectModule, MdGridListModule, MdTabsModule, MdSidenavModule, - MdTooltipModule, MdProgressBarModule, MdButtonToggleModule } from '@angular/material'; +import { MatButtonModule, MatListModule, MatIconModule, MatCardModule, MatToolbarModule, MatSnackBarModule, + MatInputModule, MatMenuModule, MatSelectModule, MatGridListModule, MatTabsModule, MatSidenavModule, + MatTooltipModule, MatProgressBarModule, MatButtonToggleModule } from '@angular/material'; import { CovalentLayoutModule, CovalentMediaModule, CovalentSearchModule, CovalentPagingModule, CovalentExpansionPanelModule, CovalentDialogsModule, CovalentMessageModule } from '../../../platform/core'; @@ -33,21 +33,20 @@ import { ToolbarModule } from '../../components/toolbar/toolbar.module'; CommonModule, FormsModule, /** Material Modules */ - MdCoreModule, - MdButtonModule, - MdListModule, - MdIconModule, - MdCardModule, - MdInputModule, - MdMenuModule, - MdSelectModule, - MdGridListModule, - MdTabsModule, - MdSidenavModule, - MdSnackBarModule, - MdTooltipModule, - MdProgressBarModule, - MdButtonToggleModule, + MatButtonModule, + MatListModule, + MatIconModule, + MatCardModule, + MatInputModule, + MatMenuModule, + MatSelectModule, + MatGridListModule, + MatTabsModule, + MatSidenavModule, + MatSnackBarModule, + MatTooltipModule, + MatProgressBarModule, + MatButtonToggleModule, /** Covalent Modules */ CovalentCommonModule, CovalentLayoutModule, diff --git a/src/app/components/design-patterns/management-list/management-list.component.html b/src/app/components/design-patterns/management-list/management-list.component.html index af8b218d5c..6156411e2d 100644 --- a/src/app/components/design-patterns/management-list/management-list.component.html +++ b/src/app/components/design-patterns/management-list/management-list.component.html @@ -1,103 +1,103 @@
    - - Management Lists Patterns - - + + Management Lists Patterns + +

    Problem

    Need to display collection of data with a similar data type and a minimal amount of metadata.

    Solution

    If the amount of data or structure of the data does not justify a data grid, consider using a management list with faux-columns and sorting instead.

    -     -     - - Resources - - - - launch - Material Design Lists + + + + Resources + + + + launch + Material Design Lists - - - launch - Material Design Lists Controls + + + launch + Material Design Lists Controls - - - launch - Angular Material Lists + + + launch + Angular Material Lists - - + +
    - - Examples - - + + Examples + +
    - - + +
    -
    -     +
    - - - HTML + + + HTML +
    Title here @@ -105,40 +105,40 @@

    Solution

    - - - + + - +
    - - - - apps -

    App Name

    + + + + apps +

    App Name

    Owner - - + + { {option.name}} - - + + - { {isASC(sortKey)? 'arrow_upward' : 'arrow_downward'}} + { {isASC(sortKey)? 'arrow_upward' : 'arrow_downward'}} -     - + + - - desktop_mac -

    { {item.name}}

    + + desktop_mac +

    { {item.name}}

    { {item.owner}} @@ -146,26 +146,26 @@

    { {item.name}}

    { {item[sortKey] | date:'short'}} -     - + +     -     - + + Rows per page: - - + + { {size} } - - + + { {pagingBar.range} } of { {pagingBar.total} } - +     ]]>     -     - - Typescript + + + Typescript { {item.name}} } ]]> - -     + +
    - +
    - +
    Title here @@ -217,40 +217,40 @@

    { {item.name}}

    flex> - - - + + - +
    - - - - apps -

    App Name

    + + + + apps +

    App Name

    Owner - - + + {{option.name}} - - + + - {{isASC(sortKey)? 'arrow_upward' : 'arrow_downward'}} + {{isASC(sortKey)? 'arrow_upward' : 'arrow_downward'}} -     - + + - - desktop_mac -

    {{item.name}}

    + + desktop_mac +

    {{item.name}}

    {{item.owner}} @@ -258,23 +258,23 @@

    {{item.name}}

    {{item[sortKey] | date:'short'}} -     - + +     -     - + + Rows per page: - - + + {{size}} - - + + {{pagingBar.range}} of {{pagingBar.total}} -     -     + +
    -     -     + + diff --git a/src/app/components/design-patterns/management-list/management-list.component.scss b/src/app/components/design-patterns/management-list/management-list.component.scss index e1dafcfc92..8f26bec639 100644 --- a/src/app/components/design-patterns/management-list/management-list.component.scss +++ b/src/app/components/design-patterns/management-list/management-list.component.scss @@ -1,4 +1,4 @@ -md-select { +mat-select { & /deep/ { .mat-select-underline { display: none; diff --git a/src/app/components/design-patterns/navigation-drawer/navigation-drawer.component.html b/src/app/components/design-patterns/navigation-drawer/navigation-drawer.component.html index 4f9396446f..9b562b602f 100644 --- a/src/app/components/design-patterns/navigation-drawer/navigation-drawer.component.html +++ b/src/app/components/design-patterns/navigation-drawer/navigation-drawer.component.html @@ -1,76 +1,76 @@
    - - Navigation Drawers Patterns - - + + Navigation Drawers Patterns + +

    Problem

    Need a means of navigation that is familiar and consistent.

    Solution

    The navigation drawer provides a familiar means of navigation along with access to additional account features, for example, the ability to switch accounts, access settings, and sign out.

    -     -     - - Resources - - - - launch - Material Design Nav Drawer + + + + Resources + + + + launch + Material Design Nav Drawer - - + +
    - - Examples - - + + Examples + +
    - Side Navigation - Sidenav toolbar & list from the Material Design spec - + Side Navigation + Sidenav toolbar & list from the Material Design spec +

    In addition to the Material Design Navigation Drawer component, this example leverages the following components:

    - - - launch - Material Design List -

    md-list

    + +     + launch + Material Design List +

    mat-list

     - - - launch - Material Design Icon -

    md-icons

    + +     + launch + Material Design Icon +

    mat-icons

     -     -     + +
    - - + +
    -
    -     +
    - - - HTML + + + HTML - - { {item.icon} }{ {item.title} } - + + { {item.icon} }{ {item.title} } +
    @@ -80,9 +80,9 @@

    Solution

    ]]> - - - Typescript + + + Typescript Solution } ]]> - - + +
    - +
    - - {{item.icon}}{{item.title}} - + + {{item.icon}}{{item.title}} +
    @@ -149,8 +149,8 @@

    Solution
    - +
    - - \ No newline at end of file + + \ No newline at end of file diff --git a/src/app/components/design-patterns/navigation-drawer/navigation-drawer.component.scss b/src/app/components/design-patterns/navigation-drawer/navigation-drawer.component.scss index cebd32fe5b..001fb52089 100644 --- a/src/app/components/design-patterns/navigation-drawer/navigation-drawer.component.scss +++ b/src/app/components/design-patterns/navigation-drawer/navigation-drawer.component.scss @@ -3,7 +3,7 @@ position: static; width: 100%; height: 500px; - md-sidenav { + mat-sidenav { transform: translate3d(0,0,0) !important; visibility: visible !important; } diff --git a/src/app/components/docs/angular-material/angular-material.component.html b/src/app/components/docs/angular-material/angular-material.component.html index 92cc48c9b3..3be6102347 100644 --- a/src/app/components/docs/angular-material/angular-material.component.html +++ b/src/app/components/docs/angular-material/angular-material.component.html @@ -1,8 +1,8 @@ - - Angular Material - Material Design components - - + + Angular Material + Material Design components + +

    Core Components

    The UI Platform is built on top of @angular/material components which are the core of Covalent.

    New & Custom Components

    @@ -17,30 +17,30 @@

    New & Custom Components

    Obviously we'll need to extend and customize material, but when doing so try to submit to the main UI Platform repo and collaborate with others to ensure standards.

    -     - - - Components - Github Repo - -     - - Resources - - - - launch - Why Angular Material? + + + + Components + Github Repo + + + + Resources + + + + launch + Why Angular Material? - - - launch - Angular Material Docs Site + + + launch + Angular Material Docs Site - - - launch - Angular Material Feature Status + + + launch + Angular Material Feature Status - - + + diff --git a/src/app/components/docs/angular/angular.component.html b/src/app/components/docs/angular/angular.component.html index 83eb9ebf0c..75816c2b97 100644 --- a/src/app/components/docs/angular/angular.component.html +++ b/src/app/components/docs/angular/angular.component.html @@ -1,8 +1,8 @@ - - Angular - Benefits of Angular - - + + Angular + Benefits of Angular + +

    Modern Web Dev

    Angular is a complete rewrite, so disgregard anything you know from 1.x (AngularJS). Along with ES2015 (formerly ES6) and TypeScript, Angular brings many best practices and conveniences from backend languages to the frontend. Along with that, other key benefits:

      @@ -13,59 +13,59 @@

      Modern Web Dev

    • Lazy loading - load one web component per time for optimization
    • Performance - incredibly improved overall speed and performance
    -     - - - Angular Docs - -     - - Recommended Text Editors - - - - launch - Microsoft Visual Studio Code (free) + + + + Angular Docs + + + + Recommended Text Editors + + + + launch + Microsoft Visual Studio Code (free) - - - launch - Atom (free) + + + launch + Atom (free) - - - - Angular Resources - - - - launch - Angular Example App Tutorial + + + + Angular Resources + + + + launch + Angular Example App Tutorial - - - launch - Angular Quickstart app + + + launch + Angular Quickstart app - - - launch - Angular VS AngularJS Blog + + + launch + Angular VS AngularJS Blog - - - launch - Todd Motto Bootstrapping your first Angular application + + + launch + Todd Motto Bootstrapping your first Angular application - - - launch - Understanding ES5, ES2015 and TypeScript by John Papa + + + launch + Understanding ES5, ES2015 and TypeScript by John Papa - - - launch - Awesome list of Angular seed repos, starters, boilerplates, examples, tutorials, components, & more! + + + launch + Awesome list of Angular seed repos, starters, boilerplates, examples, tutorials, components, & more! - - + + diff --git a/src/app/components/docs/build-tasks/build-tasks.component.html b/src/app/components/docs/build-tasks/build-tasks.component.html index 2b14cbf7d0..43cc9f7ec3 100644 --- a/src/app/components/docs/build-tasks/build-tasks.component.html +++ b/src/app/components/docs/build-tasks/build-tasks.component.html @@ -1,8 +1,8 @@ - - Build Tasks - Angular CLI Build Tasks - - + + Build Tasks + Angular CLI Build Tasks + +

    Command Line Build Tasks

    Important: Make sure you have Node 6.11.1 or greater!

    @@ -68,9 +68,9 @@

    Generating content

    -     - - - Build Docs - -     + + + + Build Docs + + diff --git a/src/app/components/docs/creating/creating.component.html b/src/app/components/docs/creating/creating.component.html index 34bc73d01f..633aad272e 100644 --- a/src/app/components/docs/creating/creating.component.html +++ b/src/app/components/docs/creating/creating.component.html @@ -1,8 +1,8 @@ - - Creating new views - Harness the power of the new Angular CLI - - + + Creating new views + Harness the power of the new Angular CLI + +

    Generate Component

    Using the CLI, nagivate into the directory you want the new component, then simply:

    @@ -44,9 +44,9 @@

    Generate Component

    ]]>

    Now you can use this new route in your main nav or wherever you like!

    -     - - - Generate Docs - -     + + + + Generate Docs + + diff --git a/src/app/components/docs/deployment/deployment.component.html b/src/app/components/docs/deployment/deployment.component.html index c0c0ce7699..2de403f66c 100644 --- a/src/app/components/docs/deployment/deployment.component.html +++ b/src/app/components/docs/deployment/deployment.component.html @@ -1,8 +1,8 @@ - - Deployment - Deploy your app via CLI - - + + Deployment + Deploy your app via CLI + +

    Command Line Deploy Tasks

    You can deploy your apps quickly via:

    @@ -56,5 +56,5 @@

    Ahead-of-time Compilation

    ng build --prod --aot -     -     + + diff --git a/src/app/components/docs/docs.component.html b/src/app/components/docs/docs.component.html index 775136d802..5d5430ec8b 100644 --- a/src/app/components/docs/docs.component.html +++ b/src/app/components/docs/docs.component.html @@ -5,26 +5,26 @@ [opened]="media.registerQuery('gt-sm') | async" [mode]="(media.registerQuery('gt-sm') | async) ? 'side' : ((media.registerQuery('sm') | async) ? 'push' : 'over')" [sidenavWidth]="(media.registerQuery('gt-xs') | async) ? '350px' : '100%'"> - - + - - {{item.icon}} -

    {{item.title}}

    -

    {{item.description}}

    + {{item.icon}} +

    {{item.title}}

    +

    {{item.description}}

    - +     -     +
    - Documentation diff --git a/src/app/components/docs/docs.component.ts b/src/app/components/docs/docs.component.ts index 17eb868c71..951ab6d2a9 100644 --- a/src/app/components/docs/docs.component.ts +++ b/src/app/components/docs/docs.component.ts @@ -71,7 +71,7 @@ export class DocsComponent implements AfterViewInit { ngAfterViewInit(): void { // broadcast to all listener observables when loading the page - setTimeout(() => { // workaround since MdSidenav has issues redrawing at the beggining + setTimeout(() => { // workaround since MatSidenav has issues redrawing at the beggining this.media.broadcast(); this._changeDetectorRef.detectChanges(); }); diff --git a/src/app/components/docs/docs.module.ts b/src/app/components/docs/docs.module.ts index fd31147211..1d0e28bb15 100644 --- a/src/app/components/docs/docs.module.ts +++ b/src/app/components/docs/docs.module.ts @@ -17,8 +17,8 @@ import { MockDataComponent } from './mock-data/mock-data.component'; import { DocumentationToolsModule } from '../../documentation-tools'; -import { MdButtonModule, MdListModule, MdIconModule, MdCardModule, MdToolbarModule, MdCoreModule, - MdMenuModule } from '@angular/material'; +import { MatButtonModule, MatListModule, MatIconModule, MatCardModule, MatToolbarModule, + MatMenuModule } from '@angular/material'; import { CovalentLayoutModule, CovalentMediaModule } from '../../../platform/core'; import { CovalentHighlightModule } from '../../../platform/highlight'; @@ -43,13 +43,12 @@ import { ToolbarModule } from '../../components/toolbar/toolbar.module'; /** Angular Modules */ CommonModule, /** Material Modules */ - MdCoreModule, - MdButtonModule, - MdListModule, - MdIconModule, - MdCardModule, - MdToolbarModule, - MdMenuModule, + MatButtonModule, + MatListModule, + MatIconModule, + MatCardModule, + MatToolbarModule, + MatMenuModule, /** Covalent Modules */ CovalentLayoutModule, CovalentMediaModule, diff --git a/src/app/components/docs/icons/icons.component.html b/src/app/components/docs/icons/icons.component.html index 030da60324..918e7e81c1 100644 --- a/src/app/components/docs/icons/icons.component.html +++ b/src/app/components/docs/icons/icons.component.html @@ -1,26 +1,26 @@ - - Material Design Icons - Access 750+ SVG or Font icons - - + + Material Design Icons + Access 750+ SVG or Font icons + +

    Font Icons

    Font icons using ligatures are the default option and simple to use:

    - home ]]> + home ]]>

    - which renders home + which renders home

    SVG Icons (from Safe URLS)

    -

    SVG icons have to be sanitized before they can be used with [DomSanitizer] and then icons need to be registered in [MdIconRegistry] so it can be referred later on:

    +

    SVG icons have to be sanitized before they can be used with [DomSanitizer] and then icons need to be registered in [MatIconRegistry] so it can be referred later on:

    Typescript:

    SVG Icons (from Safe URLS)

    HTML:

    - ]]> + ]]> -     - - - Search Icons - Icon Guide - -     + + + + Search Icons + Icon Guide + + diff --git a/src/app/components/docs/mock-data/mock-data.component.html b/src/app/components/docs/mock-data/mock-data.component.html index 5e6fe551a7..c83374f830 100644 --- a/src/app/components/docs/mock-data/mock-data.component.html +++ b/src/app/components/docs/mock-data/mock-data.component.html @@ -1,8 +1,8 @@ - - Mock Data Server - Prototype against a real API server with mock data - - + + Mock Data Server + Prototype against a real API server with mock data + +

    Covalent Quickstart includes the ultimate prototyping tool, a localhost Mock API!

    With the mock API server, you can develop against realistic API service endpoints, and model the mock data closely to your production data!

    The mock api server is called Covalent Data and is available as an npm package.

    @@ -24,7 +24,7 @@ npm run stop-api - +

    Customizing Mock Data Schema

    You can easily modify or create new schemas for mock data in the /mock-api/schemas/ directory.

    For example to modify the mock users , edit mock-api/schemas/users.yaml

    @@ -68,10 +68,10 @@

    Consuming Mock Data Endpoints

    ]]>

    The Covalent Data Mock API Server actually stores data in memory, so it's possible to add, update, and delete records. All changes made will be erased once Covalent Data is stopped. See the Covalent Data repo for more information.

    -     - - - Quickstart Repo - Data Repo - -     + + + + Quickstart Repo + Data Repo + + diff --git a/src/app/components/docs/overview/overview.component.html b/src/app/components/docs/overview/overview.component.html index 7769318c07..0ab960255d 100644 --- a/src/app/components/docs/overview/overview.component.html +++ b/src/app/components/docs/overview/overview.component.html @@ -1,9 +1,9 @@ - - Quickstart Setup - Start using the Covalent Quickstart - - + + Quickstart Setup + Start using the Covalent Quickstart + +

    Covalent Quickstart

    Create a new repo based on the covalent-quickstart

    Clone the covalent-quickstart into a new project folder (e.g. my-product).

    @@ -28,7 +28,7 @@

    Create a new Git repository for your product

    git remote add origin git push -u origin master - +

    Start Developing!

    Prerequisites

      @@ -64,15 +64,15 @@

      Run the Angular-CLI local server

      ng serve
      - +

      New optional feature: use the Covalent Mock API Server
      - - - - Quickstart Repo - - + + + + Quickstart Repo + + diff --git a/src/app/components/docs/testing/testing.component.html b/src/app/components/docs/testing/testing.component.html index 80c3345b25..40d96d3344 100644 --- a/src/app/components/docs/testing/testing.component.html +++ b/src/app/components/docs/testing/testing.component.html @@ -1,8 +1,8 @@ - - Testing - Deploy your app via CLI - - + + Testing + Deploy your app via CLI + +

      Install TSLint for TypeScript

      First ensure you have Protractor and TSLint installed, setup for TypeScript and updated Webdriver

      @@ -36,24 +36,24 @@

      Linting and formatting code

      ng lint -       - - - Testing Docs - -       - - Resources - - - - launch - More on Karma (Unit Tests) + + + + Testing Docs + + + + Resources + + + + launch + More on Karma (Unit Tests) - - - launch - More on Protractor (End to End Tests) + + + launch + More on Protractor (End to End Tests) - - + + diff --git a/src/app/components/docs/theme/theme.component.html b/src/app/components/docs/theme/theme.component.html index e68acf0e40..c8d92ded48 100644 --- a/src/app/components/docs/theme/theme.component.html +++ b/src/app/components/docs/theme/theme.component.html @@ -1,8 +1,8 @@ - - Custom Theme - SCSS variables to customize the color scheme - - + + Custom Theme + SCSS variables to customize the color scheme + +

      SCSS Variables

      Simply edit the /theme.scss file and update these SCSS variables:

      @@ -39,22 +39,22 @@

      SCSS Variables

      Color palettes and hues follow the official Material Design Spec.

      -       - - - Theming Docs - Color Guide - -       - - Multiple color themes - Choose a primary, accent and warn color from the official Material color palette. - - + + + + Theming Docs + Color Guide + + + + Multiple color themes + Choose a primary, accent and warn color from the official Material color palette. + + Add the custom CSS class with custom SCSS variables to your /theme.scss file - - - + + +

      Blue Primary / Orange Accent

      @@ -72,18 +72,18 @@

      Blue Primary /

      - - - + + + - - + + Toolbar - - - -

      View title

      @@ -92,11 +92,11 @@

      View title

      Palettes with a secondary color may use this color to indicate a related action or information.

      -       -       + +
      - +

      Blue Grey Primary / Deep Orange Accent

      @@ -114,18 +114,18 @@

      Blue Grey Primary / <

      - - - + + + - - + + Toolbar - - - -

      View title

      @@ -134,9 +134,9 @@

      View title

      Palettes with a secondary color may use this color to indicate a related action or information.

      -       -       + +
      -       -       \ No newline at end of file + + \ No newline at end of file diff --git a/src/app/components/docs/theme/theme.component.scss b/src/app/components/docs/theme/theme.component.scss index 13d4949392..d7b337ab2f 100644 --- a/src/app/components/docs/theme/theme.component.scss +++ b/src/app/components/docs/theme/theme.component.scss @@ -1,3 +1,3 @@ -.md-fab-position-bottom-right { +.mat-fab-position-bottom-right { bottom: 20px; } \ No newline at end of file diff --git a/src/app/components/home/home.component.html b/src/app/components/home/home.component.html index 4659b9c7de..7dc6449794 100644 --- a/src/app/components/home/home.component.html +++ b/src/app/components/home/home.component.html @@ -1,6 +1,6 @@ -
      @@ -14,44 +14,44 @@

      An open-source UI Platform from Teradata that combines a comprehensive design language with a powerful web framework, built on Angular & Angular Material (Design).

      - - - - star {{starCount}} + + + + star {{starCount}}
    - +
    - - + +
    @@ -85,24 +85,24 @@

    As A
    - + - - {{item.icon}} -

    {{item.title}}

    -

    {{item.description}}

    +     + {{item.icon}} +

    {{item.title}}

    +

    {{item.description}}

    - + - +
    - +
    - + {{item.icon}} - +
    {{item.title}}
    {{item.description}}
    @@ -129,7 +129,7 @@

    Adop

    - +
    @@ -250,13 +250,13 @@

    FAQs

    - - + +
    To build an atomic, standardized, reusable UI component platform based on Material Design, for Teradata to use for all user interfaces, while collaborating in an open source model.
    -     -     + +
    Teradata's UX team is extremely lean & agile (notice agile is lower case). We have a simple list of milestones and issues prioritized by demand across products. Some big ticket items are underway such as TD Charts, an extensive & standardized component built on Google Charts (continuing w/ the Google web stack). @@ -264,32 +264,32 @@

    FAQs

    Remember, we're agile so our roadmap is iterative & bite sized for frequent, rapid releases.
    - -     - launch -

    Releases

    -

    Our latest version you can use today!

    + +     + launch +

    Releases

    +

    Our latest version you can use today!

     - - - launch -

    Milestones

    -

    Rough time estimates

    + +     + launch +

    Milestones

    +

    Rough time estimates

     - - - launch -

    Feature Requests & Bugs

    -

    Priotized by demand

    + +     + launch +

    Feature Requests & Bugs

    +

    Priotized by demand

     - +
    Covalent is a UI Platform that combines proven design language with a comprehensive web framework, built on Angular & Angular-Material (Design). Electron is a framework for creating native desktop applications with web technologies like JavaScript, HTML, and CSS. Covalent Electron is the Electron Platform to build desktop apps using Covalent and Electron - View Repo + View Repo
    @@ -297,7 +297,7 @@

    Feature Requests & Bugs

    Covalent Data is a Mock API server for rapid prototyping and API standards Built on Golang Allows for quick prototyping for your Covalent Applications with an easy to mock http backend server - View Repo + View Repo
    @@ -311,8 +311,8 @@

    Feature Requests & Bugs

    Copyright © 2016 - 2017 Teradata. All rights reserved
    diff --git a/src/app/components/home/home.component.scss b/src/app/components/home/home.component.scss index 293339eab3..60d5795afa 100644 --- a/src/app/components/home/home.component.scss +++ b/src/app/components/home/home.component.scss @@ -1,10 +1,10 @@ .margin { margin: -60px; } -.md-icon-logo { +.mat-icon-logo { width: 88px; } -.md-icon-svg-lg { +.mat-icon-svg-lg { height: 60px; width: 60px; margin-left: 16px; @@ -13,7 +13,7 @@ width: 90%; height: 90%; } -.md-icon-ux { +.mat-icon-ux { width: 165px; } @media (max-width: 799px) { diff --git a/src/app/components/layouts/card-over/card-over.component.html b/src/app/components/layouts/card-over/card-over.component.html index c01e8a3e17..9efcaa33ff 100644 --- a/src/app/components/layouts/card-over/card-over.component.html +++ b/src/app/components/layouts/card-over/card-over.component.html @@ -1,14 +1,14 @@ - - Minimum Demo - Minimum code for this layout with no wrapper - - + + Minimum Demo + Minimum code for this layout with no wrapper + + Content goes here - - - + + + @@ -16,52 +16,52 @@ ]]> - - - - Basic Demo - Basic layout wrapper & nav drawer - - + + + + Basic Demo + Basic layout wrapper & nav drawer + + - - homeHome - + + homeHome + - Content goes here - - - + + + - - homeHome - + + homeHome + - Content goes here @@ -70,127 +70,127 @@ ]]> - - - - Full Demo - Full working code with all options and templates - - + + + + Full Demo + Full working code with all options and templates + + - - {{item.icon}}{{item.title}} - + + {{item.icon}}{{item.title}} +
    - - + Covalent - chrome_reader_mode - + chrome_reader_mode +
    - Card Over Layout - A card over layout with all available options - - - -

    Metadata

    + Card Over Layout + A card over layout with all available options + + + +

    Metadata

    - - {{item.icon}} -

    {{item.title}}

    -

    {{item.description}}

    -     - + + {{item.icon}} +

    {{item.title}}

    +

    {{item.description}}

    +     +     - -

    Dates

    + +

    Dates

    - - {{item.icon}} -

    {{item.date | timeAgo}}

    -

    {{item.description}}

    -     - + + {{item.icon}} +

    {{item.date | timeAgo}}

    +

    {{item.description}}

    +     +     -     -     - - - - + +     + + + + -     - - + + + - - { {item.icon} }{ {item.title} } - + + { {item.icon} }{ {item.title} } +
    - - + Covalent - chrome_reader_mode - + chrome_reader_mode +
    - Card Over Layout - A card over layout with all available options - - - -

    Metadata

    + Card Over Layout + A card over layout with all available options + + + +

    Metadata

    - - { {item.icon} } -

    { {item.title} }

    -

    { {item.description} }

    -     - + + { {item.icon} } +

    { {item.title} }

    +

    { {item.description} }

    +     +     - -

    Dates

    + +

    Dates

    - - { {item.icon} } -

    { {item.date | timeAgo} }

    -

    { {item.description} }

    -     - + + { {item.icon} } +

    { {item.date | timeAgo} }

    +

    { {item.description} }

    +     +     -     -     - - - - + +     + + + + @@ -277,6 +277,6 @@

    TypeScript:

    } ]]> -     -     + + diff --git a/src/app/components/layouts/layouts.component.html b/src/app/components/layouts/layouts.component.html index ec919ff7f4..d8a84173f0 100644 --- a/src/app/components/layouts/layouts.component.html +++ b/src/app/components/layouts/layouts.component.html @@ -1,6 +1,6 @@ - diff --git a/src/app/components/layouts/layouts.module.ts b/src/app/components/layouts/layouts.module.ts index 21414bcec8..b5327e1453 100644 --- a/src/app/components/layouts/layouts.module.ts +++ b/src/app/components/layouts/layouts.module.ts @@ -10,7 +10,7 @@ import { NavListComponent } from './nav-list/nav-list.component'; import { CardOverComponent } from './card-over/card-over.component'; import { ManageListComponent } from './manage-list/manage-list.component'; -import { MdButtonModule, MdListModule, MdIconModule, MdCardModule, MdToolbarModule, MdCoreModule } from '@angular/material'; +import { MatButtonModule, MatListModule, MatIconModule, MatCardModule, MatToolbarModule } from '@angular/material'; import { CovalentLayoutModule, CovalentExpansionPanelModule, CovalentStepsModule, CovalentMediaModule, CovalentCommonModule } from '../../../platform/core'; @@ -33,12 +33,11 @@ import { ToolbarModule } from '../../components/toolbar/toolbar.module'; /** Angular Modules */ CommonModule, /** Material Modules */ - MdCoreModule, - MdButtonModule, - MdListModule, - MdIconModule, - MdCardModule, - MdToolbarModule, + MatButtonModule, + MatListModule, + MatIconModule, + MatCardModule, + MatToolbarModule, /** Covalent Modules */ CovalentLayoutModule, CovalentExpansionPanelModule, diff --git a/src/app/components/layouts/manage-list/manage-list.component.html b/src/app/components/layouts/manage-list/manage-list.component.html index 8ae129cf09..0f9643359d 100644 --- a/src/app/components/layouts/manage-list/manage-list.component.html +++ b/src/app/components/layouts/manage-list/manage-list.component.html @@ -1,218 +1,218 @@ - - Minimum Demo - Minimum code for this layout with no wrapper - - + + Minimum Demo + Minimum code for this layout with no wrapper + + - +
    Sidenav content here
    - + Content goes here     -     - - + + + - +
    Sidenav content here
    - + Content goes here ]]>     -     -     - - Basic Demo - Basic layout wrapper & nav drawer - - + + + + Basic Demo + Basic layout wrapper & nav drawer + + - - homeHome - + + homeHome + - - Nav Title + Nav Title
    Sidenav content here
    - - Content Title - + Content goes here     -     - - + + + - - homeHome - + + homeHome + - - Nav Title + Nav Title
    Sidenav content here
    - - Content Title - + Content goes here     ]]>     -     -     - - Full Demo - Full working code with all options and templates - - + + + + Full Demo + Full working code with all options and templates + + - - {{item.icon}}{{item.title}} - + + {{item.icon}}{{item.title}} +
    - - + Covalent - chrome_reader_mode - + chrome_reader_mode +
    - + Optional Title - - + + - - {{item.icon}} {{item.title}} + + {{item.icon}} {{item.title}} - - + +
    - Content Title - +
    -     +
    - - Products Sales - usage stats for our products - - + + Products Sales + usage stats for our products + + card content - - - - + + + + View More - - - - Customer Activity - Recent activity from select members - - + + + + Customer Activity + Recent activity from select members + + card content - - - - + + + + View More - - + +
    - - Alerts - Items requiring attention - - + + Alerts + Items requiring attention + + card content - - - - + + + + View More - - - - Favorites - Your favorite products - - + + + + Favorites + Your favorite products + + card content - - - - + + + + View More - - + +
    @@ -226,117 +226,117 @@     -     - - + + + - - { {item.icon} }{ {item.title} } - + + { {item.icon} }{ {item.title} } +
    - - + Covalent - chrome_reader_mode - + chrome_reader_mode +
    - + Optional Title - - + + - - { {item.icon} } { {item.title} } + + { {item.icon} } { {item.title} } - - + +
    - Content Title - +
    -     +
    - - Products Sales - usage stats for our products - - + + Products Sales + usage stats for our products + + card content - - - - + + + + View More - - - - Customer Activity - Recent activity from select members - - + + + + Customer Activity + Recent activity from select members + + card content - - - - + + + + View More - - + +
    - - Alerts - Items requiring attention - - + + Alerts + Items requiring attention + + card content - - - - + + + + View More - - - - Favorites - Your favorite products - - + + + + Favorites + Your favorite products + + card content - - - - + + + + View More - - + +
    @@ -436,7 +436,7 @@

    TypeScript:

    ngAfterViewInit(): void { // broadcast to all listener observables when loading the page - setTimeout(() => { // workaround since MdSidenav has issues redrawing at the beggining + setTimeout(() => { // workaround since MatSidenav has issues redrawing at the beggining this.media.broadcast(); this._changeDetectorRef.detectChanges(); }); @@ -446,6 +446,6 @@

    TypeScript:

    ]]>     -     -     + + \ No newline at end of file diff --git a/src/app/components/layouts/manage-list/manage-list.component.ts b/src/app/components/layouts/manage-list/manage-list.component.ts index 2313a32bab..14c9398b89 100644 --- a/src/app/components/layouts/manage-list/manage-list.component.ts +++ b/src/app/components/layouts/manage-list/manage-list.component.ts @@ -84,7 +84,7 @@ export class ManageListComponent implements AfterViewInit { ngAfterViewInit(): void { // broadcast to all listener observables when loading the page - setTimeout(() => { // workaround since MdSidenav has issues redrawing at the beggining + setTimeout(() => { // workaround since MatSidenav has issues redrawing at the beggining this.media.broadcast(); this._changeDetectorRef.detectChanges(); }); diff --git a/src/app/components/layouts/nav-list/nav-list.component.html b/src/app/components/layouts/nav-list/nav-list.component.html index a6b5d5e045..1c23cf6882 100644 --- a/src/app/components/layouts/nav-list/nav-list.component.html +++ b/src/app/components/layouts/nav-list/nav-list.component.html @@ -1,17 +1,17 @@ - - Minimum Demo - Minimum code for this layout with no wrapper - - + + Minimum Demo + Minimum code for this layout with no wrapper + +
    Sidenav content here
    Content goes here     -     - - + + + @@ -22,64 +22,64 @@ ]]> - -     - - Basic Demo - Basic layout wrapper & nav drawer - - + + + + Basic Demo + Basic layout wrapper & nav drawer + + - - homeHome - + + homeHome + -
    Sidenav content here
    -
    Content goes here     -     - - + + + - - homeHome - + + homeHome + -
    Sidenav content here
    -
    @@ -88,22 +88,22 @@ ]]>     -     -     - - Full Demo - Full working code with all options and templates - - + + + + Full Demo + Full working code with all options and templates + + - - {{item.icon}}{{item.title}} - + + {{item.icon}}{{item.title}} +
    - - + Covalent
    - Page Title - chrome_reader_mode - + chrome_reader_mode +
    - + - - {{item.icon}} -

    {{item.title}}

    -

    {{item.description}}

    +     + {{item.icon}} +

    {{item.title}}

    +

    {{item.description}}

    - +     -     +
    - - Main Content - content area - - + + Main Content + content area + + card content - - - - + + + + View More - - + +
    Optional inner footer @@ -163,20 +163,20 @@

    {{item.title}}

    -     - - + + + - - { {item.icon} }{ {item.title} } - + + { {item.icon} }{ {item.title} } + {{item.title}}

    [mode]="(media.registerQuery('gt-sm') | async) ? 'side' : 'over'" [sidenavWidth]="(media.registerQuery('gt-xs') | async) ? '350px' : '100%'">
    - - + Covalent
    - Page Title - chrome_reader_mode - + chrome_reader_mode +
    - + - - { {item.icon} } -

    { {item.title} }

    -

    { {item.description} }

    +     + { {item.icon} } +

    { {item.title} }

    +

    { {item.description} }

    - +     -     +
    - - Main Content - content area - - + + Main Content + content area + + card content - - - - + + + + View More - - + +
    Optional inner footer @@ -321,7 +321,7 @@

    TypeScript:

    ngAfterViewInit(): void { // broadcast to all listener observables when loading the page - setTimeout(() => { // workaround since MdSidenav has issues redrawing at the beggining + setTimeout(() => { // workaround since MatSidenav has issues redrawing at the beggining this.media.broadcast(); this._changeDetectorRef.detectChanges(); }); @@ -330,6 +330,6 @@

    TypeScript:

    } ]]> -     -     + + \ No newline at end of file diff --git a/src/app/components/layouts/nav-list/nav-list.component.ts b/src/app/components/layouts/nav-list/nav-list.component.ts index 9c1c038b27..cb04683e5e 100644 --- a/src/app/components/layouts/nav-list/nav-list.component.ts +++ b/src/app/components/layouts/nav-list/nav-list.component.ts @@ -84,7 +84,7 @@ export class NavListComponent implements AfterViewInit { ngAfterViewInit(): void { // broadcast to all listener observables when loading the page - setTimeout(() => { // workaround since MdSidenav has issues redrawing at the beggining + setTimeout(() => { // workaround since MatSidenav has issues redrawing at the beggining this.media.broadcast(); this._changeDetectorRef.detectChanges(); }); diff --git a/src/app/components/layouts/nav-view/nav-view.component.html b/src/app/components/layouts/nav-view/nav-view.component.html index 07e0d5bbd4..78daca067c 100644 --- a/src/app/components/layouts/nav-view/nav-view.component.html +++ b/src/app/components/layouts/nav-view/nav-view.component.html @@ -1,16 +1,16 @@ - - Minimum Demo - Minimum code for this layout with no wrapper - - + + Minimum Demo + Minimum code for this layout with no wrapper + + Content goes here - - - + + + @@ -18,145 +18,145 @@ ]]> - - - - Basic Demo - Basic layout wrapper & nav drawer - - + + + + Basic Demo + Basic layout wrapper & nav drawer + + - - homeHome - + + homeHome + - Content goes here - - - + + + - - homeHome - + + homeHome + - Content goes here ]]> - - - - Full Demo - Full working code with all options and templates - - + + + + Full Demo + Full working code with all options and templates + + - - {{item.icon}}{{item.title}} - + + {{item.icon}}{{item.title}} +
    - - + Covalent - chrome_reader_mode - + chrome_reader_mode +
    - - Products Sales - usage stats for our products - - + + Products Sales + usage stats for our products + + card content - - - - + + + + View More - - - - Customer Activity - Recent activity from select members - - + + + + Customer Activity + Recent activity from select members + + card content - - - - + + + + View More - - + +
    - - Alerts - Items requiring attention - - + + Alerts + Items requiring attention + + card content - - - - + + + + View More - - - - Favorites - Your favorite products - - + + + + Favorites + Your favorite products + + card content - - - - + + + + View More - - + +
    @@ -166,80 +166,80 @@     -     - - + + + - - { {item.icon} }{ {item.title} } - + + { {item.icon} }{ {item.title} } +
    - - + Covalent - chrome_reader_mode - + chrome_reader_mode +
    - - Products Sales - usage stats for our products - - + + Products Sales + usage stats for our products + + card content - - - - Customer Activity - Recent activity from select members - - + + + + Customer Activity + Recent activity from select members + + card content - - + +
    - - Alerts - Items requiring attention - - + + Alerts + Items requiring attention + + card content - - - - + + + + View More - - - - Favorites - Your favorite products - - + + + + Favorites + Your favorite products + + card content - - - + + + View More - - + +
    @@ -304,6 +304,6 @@

    TypeScript:

    } ]]>     -     -     + + \ No newline at end of file diff --git a/src/app/components/layouts/overview/overview.component.html b/src/app/components/layouts/overview/overview.component.html index 7db4df6588..12fe5d53dc 100644 --- a/src/app/components/layouts/overview/overview.component.html +++ b/src/app/components/layouts/overview/overview.component.html @@ -1,33 +1,33 @@ - - Layout Options - We offer 4 Material Design layouts for you - - + + Layout Options + We offer 4 Material Design layouts for you + +

    For your entire app or for different sections of your app, select one of these Material Design layout options:

    -     - + + - - {{item.icon}} -

    {{item.title}}

    -

    {{item.description}}

    +     + {{item.icon}} +

    {{item.title}}

    +

    {{item.description}}

    - +     -     -     + + - - Flexbox Layout ("grid") + + Flexbox Layout ("grid")
    @@ -50,7 +50,7 @@

    {{item.title}}

    child
    child
    - + @@ -60,14 +60,14 @@

    {{item.title}}

    ]]> - +

    Vertical column container:

    child
    child
    child
    - + @@ -87,7 +87,7 @@

    {{item.title}}

    child
    child
    - + @@ -97,14 +97,14 @@

    {{item.title}}

    ]]>     - +

    Layout padding

    child
    child
    child
    - + @@ -124,7 +124,7 @@

    {{item.title}}

    child
    child
    - + @@ -134,14 +134,14 @@

    {{item.title}}

    ]]>     - +

    Responsive widths (will change as you resize browser):

    child
    child
    child
    - + @@ -151,13 +151,13 @@

    {{item.title}}

    ]]>     - +

    Typical responsive layout (just collapse on xs which is mobile)

    child
    child
    - + @@ -169,4 +169,4 @@

    {{item.title}}

    - \ No newline at end of file + \ No newline at end of file diff --git a/src/app/components/style-guide/colors/colors.component.html b/src/app/components/style-guide/colors/colors.component.html index 2e9000faa1..639d2b6758 100644 --- a/src/app/components/style-guide/colors/colors.component.html +++ b/src/app/components/style-guide/colors/colors.component.html @@ -1,109 +1,109 @@ - - Color Palette - - + + Color Palette + +

    Color in material design is inspired by bold hues juxtaposed with muted environments, deep shadows, and bright highlights.

    Teradata product usage recommends selecting primary and accent colors from these Material Design colors:

    - - - label + + + label Orange - - - label + + + label Deep Orange - - - label + + + label Blue - - - label + + + label Light Blue - - - label + + + label Grey - - - label + + + label Blue Grey - - + +
    - info NOTE: as always, rules are meant to be bent so if you veer from these colors, just have a good justification! + info NOTE: as always, rules are meant to be bent so if you veer from these colors, just have a good justification!

    Hues

    Each Material Design color has several available hues. It's recommended to use 3 hues for your primary and 1 for your accent, like:

    - - - -

    Orange 700

    -     -     - - -

    Orange 800

    -     -     - - -

    Orange 900

    -     -     - - -

    Blue 700

    -     -     -     -     - - - Color Spec - -     - - Example Product Color Schemes - Products may select colors from the material design color palette. Limit your selection of colors to three hues from the primary palette and one accent color from the secondary palette. - - + + + +

    Orange 700

    +     +     + + +

    Orange 800

    +     +     + + +

    Orange 900

    +     +     + + +

    Blue 700

    +     +     +     + + + + Color Spec + + + + Example Product Color Schemes + Products may select colors from the material design color palette. Limit your selection of colors to three hues from the primary palette and one accent color from the secondary palette. + +

    Blue Primary / Orange Accent

    - + Primary - + Hue: 700 - - - + + + Accent - + Hue: 800 - - + +
    - - - + + + - - + + App Usage - - - - + +

    View title

    When using a primary color in your palette, this color should be the most widely used across all screens and components. @@ -111,41 +111,41 @@

    View title

    Palettes with a secondary color may use this color to indicate a related action or information.

    -     -     + +
    - +

    Orange Primary / Light Blue Accent

    - + Primary - + Hue: 800 - - - + + + Accent - + Hue: 700 - - + +
    - - - + + + - - + + App Usage - - - - + +

    View title

    When using a primary color in your palette, this color should be the most widely used across all screens and components. @@ -153,41 +153,41 @@

    View title

    Palettes with a secondary color may use this color to indicate a related action or information.

    -     -     + +
    - +

    Blue-Grey Primary / Deep Orange Accent

    - + Primary - + Hue: 700 - - - + + + Accent - + Hue: 700 - - + +
    - - - + + + - - + + App Usage - - - - + +

    View title

    When using a primary color in your palette, this color should be the most widely used across all screens and components. @@ -195,18 +195,18 @@

    View title

    Palettes with a secondary color may use this color to indicate a related action or information.

    -     -     + +
    -     -     - - CSS Background Colors - - - - + + + + CSS Background Colors + + + +

    To manually color a background, use our simple bgc utility class:

    View title

    choose from any of the material colors, in hues from 50, 100, 200, 300, 400, 500, 600, 700, 800, 900 (and A100, A200, A400, A700 for all except brown, grey & blue-grey)

    - +
    class="bgc-{{color}}-"
    50
    @@ -240,10 +240,10 @@

    View title

    A400
    A700
    -     +
    - +
    class="bgc-{{color}}-"
    50
    @@ -259,13 +259,13 @@

    View title

    800
    900
    -     +
    -     -     - - + + + +

    To manually color a background, use our simple bgc utility class:

    View title

    choose from any of the dark material colors, in hues from 500, B100, B65, B40, B30 & B15

    - +
    class="bgc-dark-{{color}}-"
    500
    @@ -285,10 +285,10 @@

    View title

    B30
    B15
    -     +
    - +
    class="bgc-dark-{{color}}-"
    500
    @@ -298,40 +298,40 @@

    View title

    B30
    B15
    -     +
    -     -     -     -     - - Material Design Color Resources - - - - launch - Material Palette + + + + + + Material Design Color Resources + + + + launch + Material Palette - - - launch - Material Design Colors + + + launch + Material Design Colors - - - launch - Material Design Dark Color Palette + + + launch + Material Design Dark Color Palette - - - launch - Material Colors OSX Desktop App + + + launch + Material Colors OSX Desktop App - - - launch - Color Palettes (official resource) + + + launch + Color Palettes (official resource) - - + + diff --git a/src/app/components/style-guide/colors/colors.component.scss b/src/app/components/style-guide/colors/colors.component.scss index 5c23f60424..cd0b857730 100644 --- a/src/app/components/style-guide/colors/colors.component.scss +++ b/src/app/components/style-guide/colors/colors.component.scss @@ -1,3 +1,3 @@ -md-card .top-toolbar md-toolbar:first-of-type { +mat-card .top-toolbar mat-toolbar:first-of-type { border-radius: 2px 2px 0 0; } \ No newline at end of file diff --git a/src/app/components/style-guide/iconography/iconography.component.html b/src/app/components/style-guide/iconography/iconography.component.html index c93e79d358..5b50b22a8c 100644 --- a/src/app/components/style-guide/iconography/iconography.component.html +++ b/src/app/components/style-guide/iconography/iconography.component.html @@ -1,7 +1,7 @@ - - Icons - - + + Icons + +

    Ligature Material Icons

    The UI Platform ships with 750+ icons as Font (Ligature) icons.

    @@ -12,170 +12,170 @@

    Usage

    Using font icon within the Teradata UI Plaform is extremely simple:

    thumb_up - thumb_down + thumb_up + thumb_down ]]>

    Which renders:

    - thumb_up - thumb_down -     - - - + thumb_up + thumb_down + + + + Material Icons Library - -     - - CSS Icon (Font or SVG) Colors - - - - + + + + CSS Icon (Font or SVG) Colors + + + +

    To manually color a fill or font color (depending if you're using a font icon or SVV icon), use our simple tc utility class:

    palette + palette /* this will be a green filled SVG icon */ - + ]]>

    choose from any of the material colors, in hues from 50, 100, 200, 300, 400, 500, 600, 700, 800, 900 (and A100, A200, A400, A700 for all except brown, grey & blue-grey)

    - +
    class="tc-{{color}}-"
    - palette - palette - palette - palette - palette + palette + palette + palette + palette + palette
    - palette - palette - palette - palette - palette + palette + palette + palette + palette + palette
    - palette - palette + palette + palette
    - palette - palette + palette + palette
    -     +
    - +
    class="tc-{{color}}-"
    - palette - palette - palette - palette - palette + palette + palette + palette + palette + palette
    - palette - palette - palette - palette - palette + palette + palette + palette + palette + palette
    -     +
    -     -     - - + + + +

    To manually color a fill or font color (depending if you're using a font icon or SVV icon), use our simple tc utility class:

    palette + palette /* this will be a dark green filled SVG icon */ - + ]]>

    choose from any of the dark material colors, in hues from 500, B100, B65, B40, B30 & B15

    - +
    class="tc-dark-{{color}}-"
    - palette - palette - palette - palette - palette - palette + palette + palette + palette + palette + palette + palette
    -     +
    - +
    class="tc-dark-{{color}}-"
    - palette - palette - palette - palette - palette - palette + palette + palette + palette + palette + palette + palette
    -     +
    -     -     -     -     - - + + + + + +

    Search Icons

    Current icons bundled with Icon Service

    - - - Demo + + + Demo
    - - + +
    - {{icon}} + {{icon}}

    {{icon}}

    -     -     - - Code +     + + + Code

    HTML:

    - - + +
    - { {icon} } + { {icon} }

    { {icon} }

    -     + ]]>

    Typescript:

    @@ -202,26 +202,26 @@

    Current icons bundled with Icon Service

    } ]]>     - - - - - - IconService - How to use this service - - + + + + + + IconService + How to use this service + +

    Icon service provides an array of icon names & capability to serach through icons

    Methods:

    The service comes with {{serviceAttrs.length}} methods:

    - + - -

    {{attr.name}}: {{attr.type}}

    -

    {{attr.description}}

    +     +

    {{attr.name}}: {{attr.type}}

    +

    {{attr.description}}

    - +     -     -     -     + + + diff --git a/src/app/components/style-guide/logo/logo.component.html b/src/app/components/style-guide/logo/logo.component.html index d683248023..32e2ccc0fb 100644 --- a/src/app/components/style-guide/logo/logo.component.html +++ b/src/app/components/style-guide/logo/logo.component.html @@ -1,56 +1,56 @@ - - Including Your Logo - - -

    Your company logo can be implemented with md-icon.

    + + Including Your Logo + + +

    Your company logo can be implemented with mat-icon.

    For example:

    + ]]>

    The code above will output an inline SVG with 100px width and auto height:

    - - + + -     - - - Icon Docs - -     + + + + Icon Docs + + - - Toolbar Logo Placement - place the logo in the top toolbar next to the title - - + + Toolbar Logo Placement + place the logo in the top toolbar next to the title + + - + ]]> - - - - Layout Docs - - + + + + Layout Docs + + - - Navigation Drawer (Sidenav) Logo Placement - place the logo in the sidenav toolbar next to the title, above the user info - - + + Navigation Drawer (Sidenav) Logo Placement + place the logo in the sidenav toolbar next to the title, above the user info + +
    @@ -63,7 +63,7 @@
    - + @@ -74,9 +74,9 @@ ]]> -     - - - Navigation Drawer - -     \ No newline at end of file + + + + Navigation Drawer + + \ No newline at end of file diff --git a/src/app/components/style-guide/product-icons/product-icons.component.html b/src/app/components/style-guide/product-icons/product-icons.component.html index 1939b27f41..36085ba68f 100644 --- a/src/app/components/style-guide/product-icons/product-icons.component.html +++ b/src/app/components/style-guide/product-icons/product-icons.component.html @@ -1,37 +1,37 @@ - - SVG Product Icons - - + + SVG Product Icons + +

    Style

    While Teradata doesn't have product logos, products do have illustrated vector icons.

    Product icons will be flat, angled, and incorporate arrows or movement into dimensionality.

    Examples

    - +
    AppCenter
    - +
    Listener
    - +
    QueryGrid

    Usage

    -

    Use the md-icon component to load an SVG instead of a typing font icon:

    +

    Use the mat-icon component to load an SVG instead of a typing font icon:

    + /* to color an SVG icon use our utility material color fill class */ - /md-icon> + /mat-icon> ]]> -     - - + + + Teradata AppCenter, Teradata Listener & Teradata QuerGrid icons copyright Teradata. All rights reserved. - -     + + diff --git a/src/app/components/style-guide/product-icons/product-icons.component.scss b/src/app/components/style-guide/product-icons/product-icons.component.scss index 59da17a3f4..3b923d075f 100644 --- a/src/app/components/style-guide/product-icons/product-icons.component.scss +++ b/src/app/components/style-guide/product-icons/product-icons.component.scss @@ -1,4 +1,4 @@ -.md-icon-lg { +.mat-icon-lg { height: 8rem; width: 8rem; } \ No newline at end of file diff --git a/src/app/components/style-guide/resources/resources.component.html b/src/app/components/style-guide/resources/resources.component.html index 53679b9b9e..973ccd8b6e 100644 --- a/src/app/components/style-guide/resources/resources.component.html +++ b/src/app/components/style-guide/resources/resources.component.html @@ -1,98 +1,98 @@ - - Resources - - + + Resources + +

    User Experience and User Interface design templates and libraries to provide a seamless transition from visual design to prototypes to production interfaces with Covalent.

    -     -     - - - Sketch icon - Sketch Template - Covalent template for the OSX Sketch App - - - + + + + + Sketch icon + Sketch Template + Covalent template for the OSX Sketch App + + +

    Create static mockups that are identical to the Covalent layouts and Angular-Material components!

    - + Sketch Template Screenshot - + - - -

    4 Covalent Layouts

    -

    nav view, manage list, card over & nav list

    -     - -

    4 responsive formats

    -

    desktop, tablet landscape, table portrait & mobile

    -     - -

    All Core Material Design Components

    -

    built using scalable Sketch symbols

    -     - -

    Material Design Patterns

    -

    tons of cards, lists, settings & forms

    -     - -

    Material Design Typography & Iconography

    -

    Sketch shared text styles & SVG icons

    -     -     + + +

    4 Covalent Layouts

    +

    nav view, manage list, card over & nav list

    +     + +

    4 responsive formats

    +

    desktop, tablet landscape, table portrait & mobile

    +     + +

    All Core Material Design Components

    +

    built using scalable Sketch symbols

    +     + +

    Material Design Patterns

    +

    tons of cards, lists, settings & forms

    +     + +

    Material Design Typography & Iconography

    +

    Sketch shared text styles & SVG icons

    +     +     -     - - - Sketch Template - -     - - - Axure icon - Axure Widget Library - Covalent widget library for Axure RP - - - + + + + Sketch Template + + + + + Axure icon + Axure Widget Library + Covalent widget library for Axure RP + + +

    Prototype interactive UX flows that perfectly complement the Sketch template and production Covalent code.

    - + Axure Widget Library Screenshot - + - - -

    4 Covalent Layouts

    -

    nav view, manage list, card over & nav list

    -     - -

    Interactive Prototype Elements

    -

    buttons, tabs, stepper

    -     - -

    Interactive Navigation Drawer

    -

    mimics the Material Design responsive sidenav

    -     - -

    Form and Form Components

    -

    interactive inputs, radio, checkboxes, toggles & more

    -     - -

    Vector SVG Iconsets

    -

    Material Design sets of icons

    -     - -

    Pre-built Material Design Patterns

    -

    cards, lists, settings & more

    -     -     + + +

    4 Covalent Layouts

    +

    nav view, manage list, card over & nav list

    +     + +

    Interactive Prototype Elements

    +

    buttons, tabs, stepper

    +     + +

    Interactive Navigation Drawer

    +

    mimics the Material Design responsive sidenav

    +     + +

    Form and Form Components

    +

    interactive inputs, radio, checkboxes, toggles & more

    +     + +

    Vector SVG Iconsets

    +

    Material Design sets of icons

    +     + +

    Pre-built Material Design Patterns

    +

    cards, lists, settings & more

    +     +     -     - - - Axure Library - View Prototype - -     + + + + Axure Library + View Prototype + + diff --git a/src/app/components/style-guide/style-guide.component.html b/src/app/components/style-guide/style-guide.component.html index a6e2f6349f..4cad2e0fcc 100644 --- a/src/app/components/style-guide/style-guide.component.html +++ b/src/app/components/style-guide/style-guide.component.html @@ -5,27 +5,27 @@ [opened]="media.registerQuery('gt-sm') | async" [mode]="(media.registerQuery('gt-sm') | async) ? 'side' : ((media.registerQuery('sm') | async) ? 'push' : 'over')" [sidenavWidth]="(media.registerQuery('gt-xs') | async) ? '350px' : '100%'"> - - -

    Style Guide

    + +

    Style Guide

    - - {{item.icon}} -

    {{item.title}}

    -

    {{item.description}}

    + {{item.icon}} +

    {{item.title}}

    +

    {{item.description}}

    - +     -     +
    - Style Guide diff --git a/src/app/components/style-guide/style-guide.component.ts b/src/app/components/style-guide/style-guide.component.ts index 9f59b2b4c7..1dec05ba06 100644 --- a/src/app/components/style-guide/style-guide.component.ts +++ b/src/app/components/style-guide/style-guide.component.ts @@ -77,7 +77,7 @@ export class StyleGuideComponent implements AfterViewInit { ngAfterViewInit(): void { // broadcast to all listener observables when loading the page - setTimeout(() => { // workaround since MdSidenav has issues redrawing at the beggining + setTimeout(() => { // workaround since MatSidenav has issues redrawing at the beggining this.media.broadcast(); this._changeDetectorRef.detectChanges(); }); diff --git a/src/app/components/style-guide/style-guide.module.ts b/src/app/components/style-guide/style-guide.module.ts index 4c01dc73da..46cabba6f8 100644 --- a/src/app/components/style-guide/style-guide.module.ts +++ b/src/app/components/style-guide/style-guide.module.ts @@ -13,9 +13,9 @@ import { ColorsComponent } from './colors/colors.component'; import { UtilityStylesComponent } from './utility-styles/utility-styles.component'; import { ResourcesComponent } from './resources/resources.component'; -import { MdButtonModule, MdListModule, MdIconModule, MdCardModule, MdToolbarModule, MdCoreModule, MdSnackBarModule, - MdInputModule, MdMenuModule, MdSelectModule, MdGridListModule, MdTabsModule, MdSidenavModule, - MdTooltipModule, MdProgressBarModule } from '@angular/material'; +import { MatButtonModule, MatListModule, MatIconModule, MatCardModule, MatToolbarModule, MatSnackBarModule, + MatInputModule, MatMenuModule, MatSelectModule, MatGridListModule, MatTabsModule, MatSidenavModule, + MatTooltipModule, MatProgressBarModule } from '@angular/material'; import { CovalentLayoutModule, CovalentMediaModule, CovalentSearchModule, CovalentPagingModule, CovalentExpansionPanelModule, CovalentDialogsModule, CovalentMessageModule } from '../../../platform/core'; @@ -39,21 +39,20 @@ import { ToolbarModule } from '../../components/toolbar/toolbar.module'; CommonModule, FormsModule, /** Material Modules */ - MdCoreModule, - MdButtonModule, - MdListModule, - MdIconModule, - MdCardModule, - MdToolbarModule, - MdInputModule, - MdMenuModule, - MdSelectModule, - MdGridListModule, - MdTabsModule, - MdSidenavModule, - MdSnackBarModule, - MdTooltipModule, - MdProgressBarModule, + MatButtonModule, + MatListModule, + MatIconModule, + MatCardModule, + MatToolbarModule, + MatInputModule, + MatMenuModule, + MatSelectModule, + MatGridListModule, + MatTabsModule, + MatSidenavModule, + MatSnackBarModule, + MatTooltipModule, + MatProgressBarModule, /** Covalent Modules */ CovalentLayoutModule, CovalentMediaModule, diff --git a/src/app/components/style-guide/typography/typography.component.html b/src/app/components/style-guide/typography/typography.component.html index 7dafc6cabd..4bf65bc54d 100644 --- a/src/app/components/style-guide/typography/typography.component.html +++ b/src/app/components/style-guide/typography/typography.component.html @@ -1,59 +1,59 @@ - - Typography - - + + Typography + +

    Angular Material provides typography CSS classes you can use to create visual consistency across your application.

    Note: Base font size is 10px for easy rem units (1.2rem = 12px). Body font size is 14px. sp = scalable pixels.

    -     - - - Typography Spec - -     - - Header Styles - - + + + + Typography Spec + + + + Header Styles + +

    To preserve semantic structures, you can optionally style the <h1> - <h6> heading tags with the styling classes shown below:

    .md-display-4 Light 112px
    - +
    .md-display-3 Regular 56px
    - +
    .md-display-2 Regular 45px
    - +
    .md-display-1 Regular 34px
    - +
    .md-headline Regular 24px
    - +
    .md-title Medium 20px
    - +
    .md-subhead Regular 16px
    - +

    Usage

    @@ -68,33 +68,33 @@

    Roboto and Noto are the standard typefaces on Android an

    Noto is the standard typeface for all languages on Chrome and Android for all languages not covered by Roboto.

    ]]>     -     -     - - Body Copy - - + + + + Body Copy + +
    .md-body-1 Regular 14px
    - +
    .md-body-2 Medium 14px
    - +
    - .md-button - Medium 14px + .mat-button + Medium 14px
    - +
    .md-caption Regular 12px
    - +

    Usage

    @@ -102,18 +102,18 @@

    Usage

    Roboto is the standard typeface on Android.

    Roboto and Noto are the standard typefaces on Android and Chrome.

    -

    Roboto and Noto are the standard typefaces on Android and Chrome.

    +

    Roboto and Noto are the standard typefaces on Android and Chrome.

    Noto is the standard typeface for all languages on Chrome and Android for all languages not covered by Roboto.

    ]]>     -     -     - - CSS Font Colors - - - - + + + + CSS Font Colors + + + +

    To manually color a font color, use our simple tc utility class:

    Usage

    choose from any of the material colors, in hues from 50, 100, 200, 300, 400, 500, 600, 700, 800, 900 (and A100, A200, A400, A700 for all except brown, grey & blue-grey)

    - +
    class="tc-{{color}}-"
    50
    @@ -147,10 +147,10 @@

    Usage

    A400
    A700
    -     +
    - +
    class="tc-{{color}}-"
    50
    @@ -166,13 +166,13 @@

    Usage

    800
    900
    -     +
    -     -     - - + + + +

    To manually color a font color, use our simple tc utility class:

    Usage

    choose from any of the dark material colors, in hues from 500, B100, B65, B40, B30 & B15

    - +
    class="tc-dark-{{color}}-"
    500
    @@ -192,10 +192,10 @@

    Usage

    B30
    B15
    -     +
    - +
    class="tc-dark-{{color}}-"
    500
    @@ -205,10 +205,10 @@

    Usage

    B30
    B15
    -     +
    -     -     -     -     \ No newline at end of file + + + + \ No newline at end of file diff --git a/src/app/components/style-guide/utility-styles/utility-styles.component.html b/src/app/components/style-guide/utility-styles/utility-styles.component.html index 0514fdbce2..31da167e94 100644 --- a/src/app/components/style-guide/utility-styles/utility-styles.component.html +++ b/src/app/components/style-guide/utility-styles/utility-styles.component.html @@ -1,14 +1,14 @@ - - CSS Utility Styles & Classes - - + + CSS Utility Styles & Classes + +

    Covalent includes many utility styles to save you time. If each UI element is an atom, think of these classes as subatomic particles. They're equally reusable to help tweak a particular atom.

    We've included general utilities, padding (pad), margin (push), negative margin (pull), sizing, and text classes.

    -     -     - - General Utilities - + + + + General Utilities + .radius-none // no border radius .overflow-hidden // hide overflow @@ -22,22 +22,22 @@ .z-2 // z index 2 .z-1 // z index 1 - - - - Sizing Utilities - + + + + Sizing Utilities + /* Sizing avail in 12 16 24 32 50 64 72 100 128 256 */ .size-256 // 256 height and width .size-height-256 // 256 height and auto width .size-width-256 // 256 width and auto height - - - - Text Utilities - + + + + Text Utilities + .text-normal // normal font size .text-center // text align center @@ -60,13 +60,13 @@ .text-truncate // single line of truncated text w/ ... .text-nodecoration // no underline - - + +
    - - Pad (Padding) Utilities - + + Pad (Padding) Utilities + .pad .pad-xxl @@ -114,13 +114,13 @@ .pad-left-xs .pad-left-none - - + +
    - - Push (Margin) Utilities - + + Push (Margin) Utilities + .push .push-xxl @@ -168,13 +168,13 @@ .push-left-xs .push-left-none - - + +
    - - Pull (Negative Margin) Utilities - + + Pull (Negative Margin) Utilities + .pull .pull-xxl @@ -222,7 +222,7 @@ .pull-left-xs .pull-left-none - - + +
    diff --git a/src/app/components/templates/templates.component.html b/src/app/components/templates/templates.component.html index 40362ff5c3..cb7ba78b83 100644 --- a/src/app/components/templates/templates.component.html +++ b/src/app/components/templates/templates.component.html @@ -1,6 +1,6 @@ -
    @@ -14,18 +14,18 @@

    Example starter templates f
    diff --git a/src/app/components/templates/templates.component.scss b/src/app/components/templates/templates.component.scss index 9d65635c27..c4658b149e 100644 --- a/src/app/components/templates/templates.component.scss +++ b/src/app/components/templates/templates.component.scss @@ -1,5 +1,5 @@ :host /deep/ { - md-grid-tile img { + mat-grid-tile img { width: 100%; height: auto; } diff --git a/src/app/components/templates/templates.component.ts b/src/app/components/templates/templates.component.ts index 2fb999dcdc..ca9b5b713a 100644 --- a/src/app/components/templates/templates.component.ts +++ b/src/app/components/templates/templates.component.ts @@ -27,7 +27,7 @@ export class TemplatesComponent implements AfterViewInit { ngAfterViewInit(): void { // broadcast to all listener observables when loading the page - setTimeout(() => { // workaround since MdSidenav has issues redrawing at the beggining + setTimeout(() => { // workaround since MatSidenav has issues redrawing at the beggining this.media.broadcast(); this._changeDetectorRef.detectChanges(); }); diff --git a/src/app/components/toolbar/toolbar.component.html b/src/app/components/toolbar/toolbar.component.html index 74ca9ea267..36a4f53e20 100644 --- a/src/app/components/toolbar/toolbar.component.html +++ b/src/app/components/toolbar/toolbar.component.html @@ -12,41 +12,41 @@ Design Patterns Templates - - +
    Updates
    - + - - {{item.icon}} -

    {{item.description}}

    -

    {{item.title}}

    +     + {{item.icon}} +

    {{item.description}}

    +

    {{item.title}}

     - +     - - change_history -

    CDK and material@beta.10 support

    -

    Dependencies updated

    +     + change_history +

    CDK and material@beta.10 support

    +

    Dependencies updated

     -     - + + View Full Changelog     -     - - - - +

    \ No newline at end of file diff --git a/src/app/components/toolbar/toolbar.module.ts b/src/app/components/toolbar/toolbar.module.ts index 9fbcd2cd7b..b0f422126e 100644 --- a/src/app/components/toolbar/toolbar.module.ts +++ b/src/app/components/toolbar/toolbar.module.ts @@ -4,17 +4,17 @@ import { RouterModule } from '@angular/router'; import { ToolbarComponent } from './toolbar.component'; -import { MdButtonModule, MdListModule, MdIconModule, MdMenuModule } from '@angular/material'; +import { MatButtonModule, MatListModule, MatIconModule, MatMenuModule } from '@angular/material'; import { CovalentMenuModule, CovalentNotificationsModule } from '../../../platform/core'; @NgModule({ imports: [ CommonModule, - MdButtonModule, - MdListModule, - MdIconModule, - MdMenuModule, + MatButtonModule, + MatListModule, + MatIconModule, + MatMenuModule, CovalentMenuModule, CovalentNotificationsModule, RouterModule, diff --git a/src/app/documentation-tools/index.ts b/src/app/documentation-tools/index.ts index 016c24ab6f..e9b14acc37 100644 --- a/src/app/documentation-tools/index.ts +++ b/src/app/documentation-tools/index.ts @@ -1,7 +1,7 @@ import { NgModule, ModuleWithProviders } from '@angular/core'; import { CommonModule } from '@angular/common'; -import { MdCheckbox, MdCardModule, MdCheckboxModule } from '@angular/material'; +import { MatCheckbox, MatCardModule, MatCheckboxModule } from '@angular/material'; import { CovalentDataTableModule, TdDataTableComponent } from '../../platform/core'; import { CovalentHighlightModule, TdHighlightComponent } from '../../platform/highlight'; @@ -13,8 +13,8 @@ import { TdReadmeLoaderComponent } from './readme-loader/readme-loader.component @NgModule({ imports: [ CommonModule, - MdCardModule, - MdCheckboxModule, + MatCardModule, + MatCheckboxModule, CovalentDataTableModule, CovalentHighlightModule, CovalentMarkdownModule, @@ -29,7 +29,7 @@ import { TdReadmeLoaderComponent } from './readme-loader/readme-loader.component TdPrettyMarkdownContainerDirective, TdReadmeLoaderComponent, ], - entryComponents: [ TdDataTableComponent, TdMarkdownComponent, TdHighlightComponent, MdCheckbox ], + entryComponents: [ TdDataTableComponent, TdMarkdownComponent, TdHighlightComponent, MatCheckbox ], }) export class DocumentationToolsModule { } diff --git a/src/app/documentation-tools/pretty-markdown/pretty-markdown.component.scss b/src/app/documentation-tools/pretty-markdown/pretty-markdown.component.scss index d59b815b1b..10467ca7c9 100644 --- a/src/app/documentation-tools/pretty-markdown/pretty-markdown.component.scss +++ b/src/app/documentation-tools/pretty-markdown/pretty-markdown.component.scss @@ -11,13 +11,13 @@ $code-font: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monos } td-data-table, td-highlight, - md-checkbox { + mat-checkbox { display: block; } td-data-table, td-highlight, - md-checkbox:last-of-type { + mat-checkbox:last-of-type { margin-bottom: 16px; } diff --git a/src/app/documentation-tools/pretty-markdown/pretty-markdown.component.ts b/src/app/documentation-tools/pretty-markdown/pretty-markdown.component.ts index d84b43d873..2ac250daf7 100644 --- a/src/app/documentation-tools/pretty-markdown/pretty-markdown.component.ts +++ b/src/app/documentation-tools/pretty-markdown/pretty-markdown.component.ts @@ -2,7 +2,7 @@ import { Component, Directive, AfterViewInit, ElementRef, Input, Renderer2, Secu ViewContainerRef, ComponentFactoryResolver, Injector, ComponentRef, ViewChild, ChangeDetectorRef } from '@angular/core'; import { DomSanitizer } from '@angular/platform-browser'; -import { MdCheckbox } from '@angular/material'; +import { MatCheckbox } from '@angular/material'; import { TdHighlightComponent } from '@covalent/highlight'; import { TdMarkdownComponent } from '@covalent/markdown'; import { TdDataTableComponent, TdDataTableSortingOrder, ITdDataTableSortChangeEvent, ITdDataTableColumnWidth } from '@covalent/core'; @@ -119,13 +119,13 @@ export class TdPrettyMarkdownComponent implements AfterViewInit { private _replaceCheckbox(markdown: string): string { let checkboxRegExp: RegExp = /(?:^|\n)- \[(x| )\](.*)/gi; - return this._replaceComponent(markdown, MdCheckbox, checkboxRegExp, - (componentRef: ComponentRef, match: string, checked: string, label: string) => { + return this._replaceComponent(markdown, MatCheckbox, checkboxRegExp, + (componentRef: ComponentRef, match: string, checked: string, label: string) => { componentRef.instance.checked = !!checked.trim(); componentRef.instance.disabled = true; componentRef.instance.labelPosition = 'after'; this._renderer.setProperty((componentRef.instance._inputElement.nativeElement) - .getElementsByClassName('md-checkbox-label')[0], 'innerHTML', label); + .getElementsByClassName('mat-checkbox-label')[0], 'innerHTML', label); }); } diff --git a/src/app/documentation-tools/readme-loader/readme-loader.component.html b/src/app/documentation-tools/readme-loader/readme-loader.component.html index ef7a2ad455..556ac78cb4 100644 --- a/src/app/documentation-tools/readme-loader/readme-loader.component.html +++ b/src/app/documentation-tools/readme-loader/readme-loader.component.html @@ -1,6 +1,6 @@ - - + + - - \ No newline at end of file + + \ No newline at end of file diff --git a/src/platform/core/chips/README.md b/src/platform/core/chips/README.md index 686c3242ab..224cf77dfa 100644 --- a/src/platform/core/chips/README.md +++ b/src/platform/core/chips/README.md @@ -13,7 +13,7 @@ Properties: | Name | Type | Description | | --- | --- | 650--- | | `color?` | `'primary', 'accent' or 'warn'` | color for the input and focus state of the chips. Defaults to 'primary' -| `items?` | `any[]` | Renders the `md-autocomplete` with the provided list to display as options. +| `items?` | `any[]` | Renders the `mat-autocomplete` with the provided list to display as options. | `requireMatch?` | `boolean` | Blocks custom inputs and only allows selections from the autocomplete list. | `stacked?` | `boolean` | Set stacked or horizontal chips depending on value. Defaults to false. | `placeholder?` | `string` | Placeholder for the autocomplete input. diff --git a/src/platform/core/chips/_chips-theme.scss b/src/platform/core/chips/_chips-theme.scss index f6a10abbeb..cbd828634a 100644 --- a/src/platform/core/chips/_chips-theme.scss +++ b/src/platform/core/chips/_chips-theme.scss @@ -14,29 +14,29 @@ background: mat-color($background, status-bar); color: mat-color($foreground, text); &:focus:not(.td-chip-disabled) { - md-icon:hover { + mat-icon:hover { color: mat-color($foreground, icon); } &.mat-primary { background: mat-color($primary); - &, md-icon { + &, mat-icon { color: mat-color($primary, default-contrast); } } &.mat-accent { background: mat-color($accent); - &, md-icon { + &, mat-icon { color: mat-color($accent, default-contrast); } } &.mat-warn { background: mat-color($warn); - &, md-icon { + &, mat-icon { color: mat-color($warn, default-contrast); } } } - md-icon.td-chip-removal { + mat-icon.td-chip-removal { color: mat-color($foreground, hint-text); &:hover { color: mat-color($foreground, icon); diff --git a/src/platform/core/chips/chips.component.html b/src/platform/core/chips/chips.component.html index d450d9ac80..29d42d9821 100644 --- a/src/platform/core/chips/chips.component.html +++ b/src/platform/core/chips/chips.component.html @@ -1,6 +1,6 @@
    - - + cancel - +
    - + - - - - + - + {{item}} - + - +
    diff --git a/src/platform/core/chips/chips.component.scss b/src/platform/core/chips/chips.component.scss index 12b16dda6b..bf72e78121 100644 --- a/src/platform/core/chips/chips.component.scss +++ b/src/platform/core/chips/chips.component.scss @@ -47,7 +47,7 @@ &.td-chip-after-pad { @include rtl(padding, 0 12px 0 0, 0 0 0 12px); } - md-icon.td-chip-removal { + mat-icon.td-chip-removal { margin: 0 4px; font-size: 21px; line-height: 22px; @@ -89,7 +89,7 @@ } :host { - /deep/ md-form-field { + /deep/ mat-form-field { .mat-form-field-underline { display: none; } diff --git a/src/platform/core/chips/chips.component.spec.ts b/src/platform/core/chips/chips.component.spec.ts index d973a45fb0..12fb4df6f1 100644 --- a/src/platform/core/chips/chips.component.spec.ts +++ b/src/platform/core/chips/chips.component.spec.ts @@ -11,9 +11,10 @@ import { import { DELETE, BACKSPACE, ENTER, LEFT_ARROW, RIGHT_ARROW } from '@angular/cdk/keycodes'; import { OverlayContainer } from '@angular/cdk/overlay'; -import { MdChip } from '@angular/material'; +import { MatChip } from '@angular/material'; import { By } from '@angular/platform-browser'; import { CovalentChipsModule, TdChipsComponent } from './chips.module'; +import { MATERIAL_COMPATIBILITY_MODE } from '@angular/material'; function createFakeKeyboardEvent(keyCode: number): any { return { @@ -48,6 +49,7 @@ describe('Component: Chips', () => { TdChipsEventsTestComponent, ], providers: [ + {provide: MATERIAL_COMPATIBILITY_MODE, useValue: true}, {provide: OverlayContainer, useFactory: () => { overlayContainerElement = document.createElement('div') as HTMLElement; overlayContainerElement.classList.add('cdk-overlay-container'); @@ -148,7 +150,7 @@ describe('Component: Chips', () => { chips.triggerEventHandler('focus', new Event('focus')); fixture.detectChanges(); fixture.whenStable().then(() => { - expect(fixture.debugElement.queryAll(By.directive(MdChip))[0].nativeElement) + expect(fixture.debugElement.queryAll(By.directive(MatChip))[0].nativeElement) .toBe(document.activeElement); done(); }); @@ -166,25 +168,25 @@ describe('Component: Chips', () => { chips.triggerEventHandler('focus', new Event('focus')); fixture.detectChanges(); fixture.whenStable().then(() => { - expect(fixture.debugElement.queryAll(By.directive(MdChip))[0].nativeElement) + expect(fixture.debugElement.queryAll(By.directive(MatChip))[0].nativeElement) .toBe(document.activeElement); - fixture.debugElement.queryAll(By.directive(MdChip))[0] + fixture.debugElement.queryAll(By.directive(MatChip))[0] .triggerEventHandler('keydown', createFakeKeyboardEvent(LEFT_ARROW)); fixture.detectChanges(); fixture.whenStable().then(() => { - expect(fixture.debugElement.queryAll(By.directive(MdChip))[2].nativeElement) + expect(fixture.debugElement.queryAll(By.directive(MatChip))[2].nativeElement) .toBe(document.activeElement); - fixture.debugElement.queryAll(By.directive(MdChip))[2] + fixture.debugElement.queryAll(By.directive(MatChip))[2] .triggerEventHandler('keydown', createFakeKeyboardEvent(LEFT_ARROW)); fixture.detectChanges(); fixture.whenStable().then(() => { - expect(fixture.debugElement.queryAll(By.directive(MdChip))[1].nativeElement) + expect(fixture.debugElement.queryAll(By.directive(MatChip))[1].nativeElement) .toBe(document.activeElement); - fixture.debugElement.queryAll(By.directive(MdChip))[1] + fixture.debugElement.queryAll(By.directive(MatChip))[1] .triggerEventHandler('keydown', createFakeKeyboardEvent(LEFT_ARROW)); fixture.detectChanges(); fixture.whenStable().then(() => { - expect(fixture.debugElement.queryAll(By.directive(MdChip))[0].nativeElement) + expect(fixture.debugElement.queryAll(By.directive(MatChip))[0].nativeElement) .toBe(document.activeElement); done(); }); @@ -205,25 +207,25 @@ describe('Component: Chips', () => { chips.triggerEventHandler('focus', new Event('focus')); fixture.detectChanges(); fixture.whenStable().then(() => { - expect(fixture.debugElement.queryAll(By.directive(MdChip))[0].nativeElement) + expect(fixture.debugElement.queryAll(By.directive(MatChip))[0].nativeElement) .toBe(document.activeElement); - fixture.debugElement.queryAll(By.directive(MdChip))[0] + fixture.debugElement.queryAll(By.directive(MatChip))[0] .triggerEventHandler('keydown', createFakeKeyboardEvent(RIGHT_ARROW)); fixture.detectChanges(); fixture.whenStable().then(() => { - expect(fixture.debugElement.queryAll(By.directive(MdChip))[1].nativeElement) + expect(fixture.debugElement.queryAll(By.directive(MatChip))[1].nativeElement) .toBe(document.activeElement); - fixture.debugElement.queryAll(By.directive(MdChip))[1] + fixture.debugElement.queryAll(By.directive(MatChip))[1] .triggerEventHandler('keydown', createFakeKeyboardEvent(RIGHT_ARROW)); fixture.detectChanges(); fixture.whenStable().then(() => { - expect(fixture.debugElement.queryAll(By.directive(MdChip))[2].nativeElement) + expect(fixture.debugElement.queryAll(By.directive(MatChip))[2].nativeElement) .toBe(document.activeElement); - fixture.debugElement.queryAll(By.directive(MdChip))[2] + fixture.debugElement.queryAll(By.directive(MatChip))[2] .triggerEventHandler('keydown', createFakeKeyboardEvent(RIGHT_ARROW)); fixture.detectChanges(); fixture.whenStable().then(() => { - expect(fixture.debugElement.queryAll(By.directive(MdChip))[0].nativeElement) + expect(fixture.debugElement.queryAll(By.directive(MatChip))[0].nativeElement) .toBe(document.activeElement); done(); }); @@ -262,8 +264,8 @@ describe('Component: Chips', () => { // set tiemout setTimeout(() => { expect(chips.componentInstance.value.length).toBe(1); - expect(fixture.debugElement.queryAll(By.directive(MdChip)).length).toBe(1); - expect(fixture.debugElement.queryAll(By.directive(MdChip))[0].nativeElement.textContent).toContain('test'); + expect(fixture.debugElement.queryAll(By.directive(MatChip)).length).toBe(1); + expect(fixture.debugElement.queryAll(By.directive(MatChip))[0].nativeElement.textContent).toContain('test'); done(); }, 200); }); @@ -276,12 +278,12 @@ describe('Component: Chips', () => { chips.triggerEventHandler('focus', new Event('focus')); fixture.detectChanges(); fixture.whenStable().then(() => { - const option: HTMLElement = overlayContainerElement.querySelector('md-option'); + const option: HTMLElement = overlayContainerElement.querySelector('mat-option'); option.click(); fixture.detectChanges(); fixture.whenStable().then(() => { expect(chips.componentInstance.value.length).toBe(1); - expect(fixture.debugElement.queryAll(By.directive(MdChip)).length).toBe(1); + expect(fixture.debugElement.queryAll(By.directive(MatChip)).length).toBe(1); done(); }); }); @@ -292,17 +294,17 @@ describe('Component: Chips', () => { chips.triggerEventHandler('focus', new Event('focus')); fixture.detectChanges(); fixture.whenStable().then(() => { - const option: HTMLElement = overlayContainerElement.querySelector('md-option'); + const option: HTMLElement = overlayContainerElement.querySelector('mat-option'); option.click(); fixture.detectChanges(); fixture.whenStable().then(() => { expect(chips.componentInstance.value.length).toBe(1); - expect(fixture.debugElement.queryAll(By.directive(MdChip)).length).toBe(1); - fixture.debugElement.queryAll(By.directive(MdChip))[0].triggerEventHandler('keydown', createFakeKeyboardEvent(BACKSPACE)); + expect(fixture.debugElement.queryAll(By.directive(MatChip)).length).toBe(1); + fixture.debugElement.queryAll(By.directive(MatChip))[0].triggerEventHandler('keydown', createFakeKeyboardEvent(BACKSPACE)); fixture.detectChanges(); fixture.whenStable().then(() => { expect(chips.componentInstance.value.length).toBe(0); - expect(fixture.debugElement.queryAll(By.directive(MdChip)).length).toBe(0); + expect(fixture.debugElement.queryAll(By.directive(MatChip)).length).toBe(0); done(); }); }); @@ -314,17 +316,17 @@ describe('Component: Chips', () => { chips.triggerEventHandler('focus', new Event('focus')); fixture.detectChanges(); fixture.whenStable().then(() => { - const option: HTMLElement = overlayContainerElement.querySelector('md-option'); + const option: HTMLElement = overlayContainerElement.querySelector('mat-option'); option.click(); fixture.detectChanges(); fixture.whenStable().then(() => { expect(chips.componentInstance.value.length).toBe(1); - expect(fixture.debugElement.queryAll(By.directive(MdChip)).length).toBe(1); + expect(fixture.debugElement.queryAll(By.directive(MatChip)).length).toBe(1); fixture.debugElement.queryAll(By.css('.td-chip-removal'))[0].triggerEventHandler('click', new Event('click')); fixture.detectChanges(); fixture.whenStable().then(() => { expect(chips.componentInstance.value.length).toBe(0); - expect(fixture.debugElement.queryAll(By.directive(MdChip)).length).toBe(0); + expect(fixture.debugElement.queryAll(By.directive(MatChip)).length).toBe(0); done(); }); }); @@ -432,12 +434,12 @@ describe('Component: Chips', () => { fixture.whenStable().then(() => { fixture.detectChanges(); fixture.whenStable().then(() => { - const option: HTMLElement = overlayContainerElement.querySelector('md-option'); + const option: HTMLElement = overlayContainerElement.querySelector('mat-option'); option.click(); fixture.detectChanges(); fixture.whenStable().then(() => { expect(chips.componentInstance.value.length).toBe(1); - expect(fixture.debugElement.queryAll(By.directive(MdChip)).length).toBe(1); + expect(fixture.debugElement.queryAll(By.directive(MatChip)).length).toBe(1); done(); }); }); @@ -498,7 +500,7 @@ describe('Component: Chips', () => { chips.triggerEventHandler('focus', new Event('focus')); fixture.detectChanges(); fixture.whenStable().then(() => { - fixture.debugElement.queryAll(By.directive(MdChip))[0] + fixture.debugElement.queryAll(By.directive(MatChip))[0] .triggerEventHandler('keydown', createFakeKeyboardEvent(RIGHT_ARROW)); fixture.detectChanges(); fixture.whenStable().then(() => { @@ -522,11 +524,11 @@ describe('Component: Chips', () => { chips.triggerEventHandler('focus', new Event('focus')); fixture.detectChanges(); fixture.whenStable().then(() => { - fixture.debugElement.queryAll(By.directive(MdChip))[0] + fixture.debugElement.queryAll(By.directive(MatChip))[0] .triggerEventHandler('keydown', createFakeKeyboardEvent(RIGHT_ARROW)); fixture.detectChanges(); fixture.whenStable().then(() => { - fixture.debugElement.queryAll(By.directive(MdChip))[1] + fixture.debugElement.queryAll(By.directive(MatChip))[1] .triggerEventHandler('keydown', createFakeKeyboardEvent(RIGHT_ARROW)); fixture.detectChanges(); fixture.whenStable().then(() => { @@ -596,13 +598,13 @@ describe('Component: Chips', () => { fixture.detectChanges(); fixture.whenStable().then(() => { expect(chips.componentInstance.value.length).toBe(3); - expect(fixture.debugElement.queryAll(By.directive(MdChip)).length).toBe(3); + expect(fixture.debugElement.queryAll(By.directive(MatChip)).length).toBe(3); fixture.debugElement.queryAll(By.css('.td-chip-removal'))[0] .triggerEventHandler('click', new Event('click')); fixture.detectChanges(); fixture.whenStable().then(() => { expect(chips.componentInstance.value.length).toBe(2); - expect(fixture.debugElement.queryAll(By.directive(MdChip)).length).toBe(2); + expect(fixture.debugElement.queryAll(By.directive(MatChip)).length).toBe(2); done(); }); }); @@ -621,25 +623,25 @@ describe('Component: Chips', () => { chips.triggerEventHandler('focus', new Event('focus')); fixture.detectChanges(); fixture.whenStable().then(() => { - expect(fixture.debugElement.queryAll(By.directive(MdChip))[0].nativeElement) + expect(fixture.debugElement.queryAll(By.directive(MatChip))[0].nativeElement) .toBe(document.activeElement); fixture.detectChanges(); fixture.whenStable().then(() => { - fixture.debugElement.queryAll(By.directive(MdChip))[0] + fixture.debugElement.queryAll(By.directive(MatChip))[0] .triggerEventHandler('keydown', createFakeKeyboardEvent(BACKSPACE)); fixture.detectChanges(); fixture.whenStable().then(() => { expect(chips.componentInstance.value.length).toBe(2); - expect(fixture.debugElement.queryAll(By.directive(MdChip)).length).toBe(2); + expect(fixture.debugElement.queryAll(By.directive(MatChip)).length).toBe(2); fixture.detectChanges(); fixture.whenStable().then(() => { expect(chips.componentInstance.value.length).toBe(2); - fixture.debugElement.queryAll(By.directive(MdChip))[0] + fixture.debugElement.queryAll(By.directive(MatChip))[0] .triggerEventHandler('keydown', createFakeKeyboardEvent(DELETE)); fixture.detectChanges(); fixture.whenStable().then(() => { expect(chips.componentInstance.value.length).toBe(1); - expect(fixture.debugElement.queryAll(By.directive(MdChip)).length).toBe(1); + expect(fixture.debugElement.queryAll(By.directive(MatChip)).length).toBe(1); done(); }); }); @@ -661,25 +663,25 @@ describe('Component: Chips', () => { chips.triggerEventHandler('focus', new Event('focus')); fixture.detectChanges(); fixture.whenStable().then(() => { - expect(fixture.debugElement.queryAll(By.directive(MdChip))[0].nativeElement) + expect(fixture.debugElement.queryAll(By.directive(MatChip))[0].nativeElement) .toBe(document.activeElement); - fixture.debugElement.queryAll(By.directive(MdChip))[0] + fixture.debugElement.queryAll(By.directive(MatChip))[0] .triggerEventHandler('keydown', createFakeKeyboardEvent(LEFT_ARROW)); fixture.detectChanges(); fixture.whenStable().then(() => { - expect(fixture.debugElement.queryAll(By.directive(MdChip))[2].nativeElement) + expect(fixture.debugElement.queryAll(By.directive(MatChip))[2].nativeElement) .toBe(document.activeElement); - fixture.debugElement.queryAll(By.directive(MdChip))[2] + fixture.debugElement.queryAll(By.directive(MatChip))[2] .triggerEventHandler('keydown', createFakeKeyboardEvent(LEFT_ARROW)); fixture.detectChanges(); fixture.whenStable().then(() => { - expect(fixture.debugElement.queryAll(By.directive(MdChip))[1].nativeElement) + expect(fixture.debugElement.queryAll(By.directive(MatChip))[1].nativeElement) .toBe(document.activeElement); - fixture.debugElement.queryAll(By.directive(MdChip))[1] + fixture.debugElement.queryAll(By.directive(MatChip))[1] .triggerEventHandler('keydown', createFakeKeyboardEvent(LEFT_ARROW)); fixture.detectChanges(); fixture.whenStable().then(() => { - expect(fixture.debugElement.queryAll(By.directive(MdChip))[0].nativeElement) + expect(fixture.debugElement.queryAll(By.directive(MatChip))[0].nativeElement) .toBe(document.activeElement); done(); }); @@ -701,25 +703,25 @@ describe('Component: Chips', () => { chips.triggerEventHandler('focus', new Event('focus')); fixture.detectChanges(); fixture.whenStable().then(() => { - expect(fixture.debugElement.queryAll(By.directive(MdChip))[0].nativeElement) + expect(fixture.debugElement.queryAll(By.directive(MatChip))[0].nativeElement) .toBe(document.activeElement); - fixture.debugElement.queryAll(By.directive(MdChip))[0] + fixture.debugElement.queryAll(By.directive(MatChip))[0] .triggerEventHandler('keydown', createFakeKeyboardEvent(RIGHT_ARROW)); fixture.detectChanges(); fixture.whenStable().then(() => { - expect(fixture.debugElement.queryAll(By.directive(MdChip))[1].nativeElement) + expect(fixture.debugElement.queryAll(By.directive(MatChip))[1].nativeElement) .toBe(document.activeElement); - fixture.debugElement.queryAll(By.directive(MdChip))[1] + fixture.debugElement.queryAll(By.directive(MatChip))[1] .triggerEventHandler('keydown', createFakeKeyboardEvent(RIGHT_ARROW)); fixture.detectChanges(); fixture.whenStable().then(() => { - expect(fixture.debugElement.queryAll(By.directive(MdChip))[2].nativeElement) + expect(fixture.debugElement.queryAll(By.directive(MatChip))[2].nativeElement) .toBe(document.activeElement); - fixture.debugElement.queryAll(By.directive(MdChip))[2] + fixture.debugElement.queryAll(By.directive(MatChip))[2] .triggerEventHandler('keydown', createFakeKeyboardEvent(RIGHT_ARROW)); fixture.detectChanges(); fixture.whenStable().then(() => { - expect(fixture.debugElement.queryAll(By.directive(MdChip))[0].nativeElement) + expect(fixture.debugElement.queryAll(By.directive(MatChip))[0].nativeElement) .toBe(document.activeElement); done(); }); diff --git a/src/platform/core/chips/chips.component.ts b/src/platform/core/chips/chips.component.ts index 21b7150da4..c0dd9f9605 100644 --- a/src/platform/core/chips/chips.component.ts +++ b/src/platform/core/chips/chips.component.ts @@ -9,7 +9,7 @@ import { TemplatePortalDirective } from '@angular/cdk/portal'; import { coerceBooleanProperty } from '@angular/cdk/coercion'; import { UP_ARROW, DOWN_ARROW, ESCAPE, LEFT_ARROW, RIGHT_ARROW, DELETE, BACKSPACE, ENTER, SPACE, TAB, HOME } from '@angular/cdk/keycodes'; import { RxChain, debounceTime, filter } from '@angular/cdk/rxjs'; -import { MdChip, MdInput, MdOption, MdAutocompleteTrigger } from '@angular/material'; +import { MatChip, MatInput, MatOption, MatAutocompleteTrigger } from '@angular/material'; import { Observable } from 'rxjs/Observable'; import { Subscription } from 'rxjs/Subscription'; @@ -83,14 +83,14 @@ export class TdChipsComponent extends _TdChipsMixinBase implements ControlValueA _internalClick: boolean = false; @ViewChild('input') _nativeInput: ElementRef; - @ViewChild(MdInput) _inputChild: MdInput; - @ViewChild(MdAutocompleteTrigger) _autocompleteTrigger: MdAutocompleteTrigger; - @ViewChildren(MdChip) _chipsChildren: QueryList; + @ViewChild(MatInput) _inputChild: MatInput; + @ViewChild(MatAutocompleteTrigger) _autocompleteTrigger: MatAutocompleteTrigger; + @ViewChildren(MatChip) _chipsChildren: QueryList; @ContentChild(TdChipDirective) _chipTemplate: TdChipDirective; @ContentChild(TdAutocompleteOptionDirective) _autocompleteOptionTemplate: TdAutocompleteOptionDirective; - @ViewChildren(MdOption) _options: QueryList; + @ViewChildren(MatOption) _options: QueryList; /** * Flag that is true when autocomplete is focused. @@ -100,13 +100,13 @@ export class TdChipsComponent extends _TdChipsMixinBase implements ControlValueA } /** - * FormControl for the mdInput element. + * FormControl for the matInput element. */ inputControl: FormControl = new FormControl(); /** * items?: any[] - * Renders the `md-autocomplete` with the provided list to display as options. + * Renders the `mat-autocomplete` with the provided list to display as options. */ @Input('items') set items(items: any[]) { @@ -399,7 +399,7 @@ export class TdChipsComponent extends _TdChipsMixinBase implements ControlValueA _handleAddChip(): boolean { let value: any; if (this.requireMatch) { - let selectedOptions: MdOption[] = this._options.toArray().filter((option: MdOption) => { + let selectedOptions: MatOption[] = this._options.toArray().filter((option: MatOption) => { return option.active; }); if (selectedOptions.length > 0) { @@ -684,7 +684,7 @@ export class TdChipsComponent extends _TdChipsMixinBase implements ControlValueA * Get total of chips */ get _totalChips(): number { - let chips: MdChip[] = this._chipsChildren.toArray(); + let chips: MatChip[] = this._chipsChildren.toArray(); return chips.length; } @@ -731,7 +731,7 @@ export class TdChipsComponent extends _TdChipsMixinBase implements ControlValueA toPromise.call(timer()).then(() => { if (this.focused && this._options && this._options.length > 0) { // clean up of previously active options - this._options.toArray().forEach((option: MdOption) => { + this._options.toArray().forEach((option: MatOption) => { option.setInactiveStyles(); }); // set the first one as active diff --git a/src/platform/core/chips/chips.module.ts b/src/platform/core/chips/chips.module.ts index c22cf37545..b98ff2b39e 100644 --- a/src/platform/core/chips/chips.module.ts +++ b/src/platform/core/chips/chips.module.ts @@ -3,7 +3,7 @@ import { NgModule, ModuleWithProviders } from '@angular/core'; import { ReactiveFormsModule } from '@angular/forms'; import { CommonModule } from '@angular/common'; -import { MdInputModule, MdIconModule, MdAutocompleteModule, MdChipsModule } from '@angular/material'; +import { MatInputModule, MatIconModule, MatAutocompleteModule, MatChipsModule } from '@angular/material'; import { TdChipsComponent, TdChipDirective, TdAutocompleteOptionDirective } from './chips.component'; export { TdChipsComponent, TdChipDirective, TdAutocompleteOptionDirective } from './chips.component'; @@ -12,10 +12,10 @@ export { TdChipsComponent, TdChipDirective, TdAutocompleteOptionDirective } from imports: [ ReactiveFormsModule, CommonModule, - MdInputModule, - MdIconModule, - MdChipsModule, - MdAutocompleteModule, + MatInputModule, + MatIconModule, + MatChipsModule, + MatAutocompleteModule, ], declarations: [ TdChipsComponent, diff --git a/src/platform/core/common/_common-theme.scss b/src/platform/core/common/_common-theme.scss index d7971d8b88..f22c163bde 100644 --- a/src/platform/core/common/_common-theme.scss +++ b/src/platform/core/common/_common-theme.scss @@ -5,11 +5,11 @@ $foreground: map-get($theme, foreground); $background: map-get($theme, background); - md-list-item, + mat-list-item, .mat-list-item-content { - md-icon { + mat-icon { color: mat-color($foreground, icon); - &[mdListAvatar] { + &[matListAvatar] { background-color: mat-color($background, hover); } } diff --git a/src/platform/core/common/services/router-path.service.spec.ts b/src/platform/core/common/services/router-path.service.spec.ts index 32c454b7a6..b8337c8035 100644 --- a/src/platform/core/common/services/router-path.service.spec.ts +++ b/src/platform/core/common/services/router-path.service.spec.ts @@ -30,7 +30,7 @@ describe('Service: RouterPath', () => { FakeComponent, ], providers: [ - RouterPathService, + RouterPathService, ], }); TestBed.compileComponents(); diff --git a/src/platform/core/common/styles/_button.scss b/src/platform/core/common/styles/_button.scss index 0f9dcfb887..a6d14b0165 100644 --- a/src/platform/core/common/styles/_button.scss +++ b/src/platform/core/common/styles/_button.scss @@ -2,31 +2,31 @@ @import 'mixins'; // Standard button sizing. -$md-button-padding: 0 rem(0.600) !default; -$md-button-min-width: rem(8.800) !default; -$md-button-margin: rem(0.600) rem(0.800) !default; -$md-button-line-height: rem(3.60) !default; -$md-button-border-radius: 3px !default; +$mat-button-padding: 0 rem(0.600) !default; +$mat-button-min-width: rem(8.800) !default; +$mat-button-margin: rem(0.600) rem(0.800) !default; +$mat-button-line-height: rem(3.60) !default; +$mat-button-border-radius: 3px !default; // FAB sizing. -$md-fab-border-radius: 50%; -$md-fab-size: rem(5.600) !default; -$md-fab-line-height: rem(5.600) !default; -$md-fab-padding: rem(1.60) !default; -$md-fab-mini-size: rem(4.00) !default; -$md-fab-mini-line-height: rem(4.00) !default; +$mat-fab-border-radius: 50%; +$mat-fab-size: rem(5.600) !default; +$mat-fab-line-height: rem(5.600) !default; +$mat-fab-padding: rem(1.60) !default; +$mat-fab-mini-size: rem(4.00) !default; +$mat-fab-mini-line-height: rem(4.00) !default; // Icon button sizing. -$md-icon-button-height: rem(4.000) !default; -$md-icon-button-width: rem(4.000) !default; -$md-icon-button-margin: rem(0.600) !default; -$md-icon-border-radius: $md-fab-border-radius; +$mat-icon-button-height: rem(4.000) !default; +$mat-icon-button-width: rem(4.000) !default; +$mat-icon-button-margin: rem(0.600) !default; +$mat-icon-border-radius: $mat-fab-border-radius; -/** Mixin to create distinct classes for fab positions, e.g. ".md-fab-position-bottom-right". */ -@mixin md-fab-position($spot, $top: auto, $right: auto, $bottom: auto, $left: auto) { - [md-fab].md-fab-position-#{$spot}, +/** Mixin to create distinct classes for fab positions, e.g. ".mat-fab-position-bottom-right". */ +@mixin mat-fab-position($spot, $top: auto, $right: auto, $bottom: auto, $left: auto) { + [mat-fab].mat-fab-position-#{$spot}, .mat-fab.mat-fab-position-#{$spot}, - [md-fab].md-fab-#{$spot}, + [mat-fab].mat-fab-#{$spot}, .mat-fab.mat-fab-#{$spot} { top: $top; @include rtl(right, $right,$left); @@ -40,15 +40,15 @@ $md-icon-border-radius: $md-fab-border-radius; } -$md-fab-pos-offset: ($md-fab-size - $md-fab-padding) / 2; -@include md-fab-position(bottom-right, auto, $md-fab-pos-offset, $md-fab-pos-offset, auto); -@include md-fab-position(bottom-left, auto, auto, $md-fab-pos-offset, $md-fab-pos-offset); -@include md-fab-position(top-right, $md-fab-pos-offset, $md-fab-pos-offset, auto, auto); -@include md-fab-position(top-left, $md-fab-pos-offset, auto, auto, $md-fab-pos-offset); +$mat-fab-pos-offset: ($mat-fab-size - $mat-fab-padding) / 2; +@include mat-fab-position(bottom-right, auto, $mat-fab-pos-offset, $mat-fab-pos-offset, auto); +@include mat-fab-position(bottom-left, auto, auto, $mat-fab-pos-offset, $mat-fab-pos-offset); +@include mat-fab-position(top-right, $mat-fab-pos-offset, $mat-fab-pos-offset, auto, auto); +@include mat-fab-position(top-left, $mat-fab-pos-offset, auto, auto, $mat-fab-pos-offset); button { - &[md-icon-button] { - &.md-icon-button-mini { + &[mat-icon-button] { + &.mat-icon-button-mini { height: 24px; line-height: 24px; width: 24px; diff --git a/src/platform/core/common/styles/_card-colored.scss b/src/platform/core/common/styles/_card-colored.scss index 938624aee0..cc580d777d 100644 --- a/src/platform/core/common/styles/_card-colored.scss +++ b/src/platform/core/common/styles/_card-colored.scss @@ -12,7 +12,7 @@ $color: rgba(0, 0, 0, 0.01); -.md-card-colored { +.mat-card-colored { &[href], &[ng-reflect-href] { &:hover { @@ -21,23 +21,23 @@ $color: rgba(0, 0, 0, 0.01); } &:active{ box-shadow: 0 6px 6px -3px rgba(0,0,0,.2),0 10px 14px 1px rgba(0,0,0,.14),0 4px 18px 3px rgba(0,0,0,.12); - & md-toolbar { + & mat-toolbar { background-color:rgba(255, 255, 255, 0.2); background-position: -100% 100%; } } - & md-toolbar { + & mat-toolbar { background-size: 200% 100%; background-image: linear-gradient(to right, transparent 50%, rgba(255, 255, 255, 0.2) 50%); transition: background-position .3s cubic-bezier(0.19, 1, 0.22, 1) .1s, color .5s ease 0s, background-color .5s ease; } } - & md-toolbar { + & mat-toolbar { height: 148px; border-radius: 2px 2px 0 0; overflow: hidden; - md-icon, + mat-icon, .mat-icon { opacity: 0.65; color: white; diff --git a/src/platform/core/common/styles/_card.scss b/src/platform/core/common/styles/_card.scss index c6721a0f3e..945c04ca85 100644 --- a/src/platform/core/common/styles/_card.scss +++ b/src/platform/core/common/styles/_card.scss @@ -4,14 +4,14 @@ html { .mat-card { padding: 0; margin: 8px; - md-card-header { + mat-card-header { height: auto; } - [mdCardAvatar] { - font-size: $md-card-header-size; - line-height: $md-card-header-size; - height: $md-card-header-size; - width: $md-card-header-size; + [matCardAvatar] { + font-size: $mat-card-header-size; + line-height: $mat-card-header-size; + height: $mat-card-header-size; + width: $mat-card-header-size; margin: 16px 0 0 15px; border-radius: 50%; } @@ -25,16 +25,16 @@ html { .mat-card-title-group { margin: 0; } - md-card-title { + mat-card-title { padding-top: $padding; padding-left: $padding; padding-right: $padding; } - md-card-subtitle { + mat-card-subtitle { padding-left: $padding; padding-right: $padding; } - md-card-content { + mat-card-content { padding: $padding; } &, & .mat-card { @@ -55,23 +55,23 @@ html { .mat-card-md-image, .mat-card-sm-image { &:last-child { - border-top-right-radius: $md-card-radius; - border-bottom-right-radius: $md-card-radius; + border-top-right-radius: $mat-card-radius; + border-bottom-right-radius: $mat-card-radius; } } } .mat-card { .mat-card-image { &:first-child { - border-top-left-radius: $md-card-radius; - border-top-right-radius: $md-card-radius; + border-top-left-radius: $mat-card-radius; + border-top-right-radius: $mat-card-radius; } } .mat-card-lg-image, .mat-card-md-image, .mat-card-sm-image { &:first-child { - border-top-left-radius: $md-card-radius; + border-top-left-radius: $mat-card-radius; } } } @@ -83,23 +83,23 @@ html { .mat-card-md-image, .mat-card-sm-image { &:last-child { - border-top-left-radius: $md-card-radius; - border-bottom-left-radius: $md-card-radius; + border-top-left-radius: $mat-card-radius; + border-bottom-left-radius: $mat-card-radius; } } } .mat-card { .mat-card-image { &:first-child { - border-top-left-radius: $md-card-radius; - border-top-right-radius: $md-card-radius; + border-top-left-radius: $mat-card-radius; + border-top-right-radius: $mat-card-radius; } } .mat-card-lg-image, .mat-card-md-image, .mat-card-sm-image { &:first-child { - border-top-right-radius: $md-card-radius; + border-top-right-radius: $mat-card-radius; } } } diff --git a/src/platform/core/common/styles/_chips.scss b/src/platform/core/common/styles/_chips.scss index be544cceb5..17b9fc914c 100644 --- a/src/platform/core/common/styles/_chips.scss +++ b/src/platform/core/common/styles/_chips.scss @@ -3,9 +3,9 @@ $mat-chip-horizontal-padding: 12px; $mat-chips-chip-margin: $mat-chip-horizontal-padding / 4; // Fix from material -md-chip-list { +mat-chip-list { &:not(.mat-chip-list-stacked) { - .md-chip-list-wrapper { + .mat-chip-list-wrapper { .mat-chip:not(.mat-basic-chip) { margin: 0 $mat-chips-chip-margin 0 $mat-chips-chip-margin; @@ -27,7 +27,7 @@ md-chip-list { } } &.mat-chip-list-stacked { - .md-chip-list-wrapper { + .mat-chip-list-wrapper { display: block; .mat-chip:not(.mat-basic-chip) { diff --git a/src/platform/core/common/styles/_content.scss b/src/platform/core/common/styles/_content.scss index b01e0b2b43..734f8a4e1d 100644 --- a/src/platform/core/common/styles/_content.scss +++ b/src/platform/core/common/styles/_content.scss @@ -1,5 +1,5 @@ // Overall app layout height -md-sidenav-container { +mat-sidenav-container { & > md-content, & > [md-content], & > .md-content { diff --git a/src/platform/core/common/styles/_divider.scss b/src/platform/core/common/styles/_divider.scss index 671eba2ebe..e9f59b670a 100644 --- a/src/platform/core/common/styles/_divider.scss +++ b/src/platform/core/common/styles/_divider.scss @@ -1,5 +1,5 @@ -md-divider { - &[md-inset] { +mat-divider { + &[matInset] { @include rtl(margin-left, 72px,0); @include rtl(margin-right, 0,72px); } diff --git a/src/platform/core/common/styles/_icons.scss b/src/platform/core/common/styles/_icons.scss index 051b2601b0..cdc36927dd 100644 --- a/src/platform/core/common/styles/_icons.scss +++ b/src/platform/core/common/styles/_icons.scss @@ -1,7 +1,7 @@ -md-list-item, +mat-list-item, .mat-list-item-content { - md-icon { - &[mdListAvatar] { + mat-icon { + &[matListAvatar] { -webkit-align-items: center; -ms-flex-align: center; align-items: center; @@ -15,7 +15,7 @@ md-list-item, } } } -.mat-icon.md-icon-logo { +.mat-icon.mat-icon-logo { height: 24px; width: 100px; } diff --git a/src/platform/core/common/styles/_list.scss b/src/platform/core/common/styles/_list.scss index a84a8bfa79..24c7a4d831 100644 --- a/src/platform/core/common/styles/_list.scss +++ b/src/platform/core/common/styles/_list.scss @@ -1,6 +1,6 @@ -md-list md-list-item [mdListAvatar], -md-list a[md-list-item] [mdListAvatar], -md-nav-list md-list-item [mdListAvatar], -md-nav-list a[md-list-item] [mdListAvatar] { +mat-list mat-list-item [matListAvatar], +mat-list a[mat-list-item] [matListAvatar], +mat-nav-list mat-list-item [matListAvatar], +mat-nav-list a[mat-list-item] [matListAvatar] { min-width: 40px; } \ No newline at end of file diff --git a/src/platform/core/common/styles/_navigation-drawer.scss b/src/platform/core/common/styles/_navigation-drawer.scss index cc7d435c37..0153ce4cea 100644 --- a/src/platform/core/common/styles/_navigation-drawer.scss +++ b/src/platform/core/common/styles/_navigation-drawer.scss @@ -1,9 +1,9 @@ @import 'variables'; -md-sidenav { +mat-sidenav { width: $navigation-drawer-width; .mat-list-item-content { - md-icon { + mat-icon { @include rtl(margin-left, 0px,$margin); @include rtl(margin-right, $margin, 0px); color: #737373; diff --git a/src/platform/core/common/styles/_sidenav.scss b/src/platform/core/common/styles/_sidenav.scss index c6c72e4f0f..5e26718079 100644 --- a/src/platform/core/common/styles/_sidenav.scss +++ b/src/platform/core/common/styles/_sidenav.scss @@ -1,5 +1,5 @@ -md-sidenav { - [md-list-item] { +mat-sidenav { + [mat-list-item] { &,&:active,&:focus { outline: none; } diff --git a/src/platform/core/common/styles/_toolbar.scss b/src/platform/core/common/styles/_toolbar.scss index 6d216511e5..4220b13234 100644 --- a/src/platform/core/common/styles/_toolbar.scss +++ b/src/platform/core/common/styles/_toolbar.scss @@ -1,5 +1,5 @@ -md-toolbar { - [md-button] { +mat-toolbar { + [mat-button] { &:first-of-type:not(:last-child) { margin-left: -6px; @@ -16,14 +16,14 @@ md-toolbar { } } } - .md-icon-logo { + .mat-icon-logo { margin-right: 10px; [dir='rtl'] & { margin-left: 10px; margin-right: 0; } } - [md-icon-button] { + [mat-icon-button] { margin: 0 6px; } } diff --git a/src/platform/core/common/styles/_typography.scss b/src/platform/core/common/styles/_typography.scss index bee12733db..1e79d25438 100644 --- a/src/platform/core/common/styles/_typography.scss +++ b/src/platform/core/common/styles/_typography.scss @@ -96,7 +96,7 @@ body { letter-spacing: 0.020em; } - .md-button { + .mat-button { letter-spacing: 0.010em; } } diff --git a/src/platform/core/common/styles/_variables.scss b/src/platform/core/common/styles/_variables.scss index 6f75a42b12..e96a2fb6d2 100644 --- a/src/platform/core/common/styles/_variables.scss +++ b/src/platform/core/common/styles/_variables.scss @@ -38,8 +38,8 @@ $md-body-font-size-base: rem(1.400) !default; $app-bar-height: 64px; // card header variables -$md-card-header-size: 40px; -$md-card-radius: 2px; +$mat-card-header-size: 40px; +$mat-card-radius: 2px; // Icons $icon-size: rem(2.4); diff --git a/src/platform/core/common/styles/font/_font.scss b/src/platform/core/common/styles/font/_font.scss index 2eaaccdd8d..02d29944f1 100644 --- a/src/platform/core/common/styles/font/_font.scss +++ b/src/platform/core/common/styles/font/_font.scss @@ -39,7 +39,7 @@ $md-font-url: './' !default; } // Ensure our size prevails over material -md-icon.material-icons { +mat-icon.material-icons { &,&.mat-icon { width: 1em; height: 1em; diff --git a/src/platform/core/data-table/README.md b/src/platform/core/data-table/README.md index 9338df2645..deff1cb57a 100644 --- a/src/platform/core/data-table/README.md +++ b/src/platform/core/data-table/README.md @@ -81,7 +81,7 @@ Example for HTML usage:
    {{value}} // or {{row[column]}} - star + star
    diff --git a/src/platform/core/data-table/_data-table-theme.scss b/src/platform/core/data-table/_data-table-theme.scss index 6147d80bcf..3287bb2bc7 100644 --- a/src/platform/core/data-table/_data-table-theme.scss +++ b/src/platform/core/data-table/_data-table-theme.scss @@ -14,7 +14,7 @@ .mat-checkbox-cell, .mat-checkbox-column { color: mat-color($foreground, secondary-text); - md-pseudo-checkbox.mat-pseudo-checkbox-checked { + mat-pseudo-checkbox.mat-pseudo-checkbox-checked { background-color: mat-color($accent); } } @@ -23,7 +23,7 @@ font-weight: 400; letter-spacing: 0.010em; line-height: 20px; - md-form-field { + mat-form-field { .mat-form-field-underline { display: none; } @@ -35,13 +35,13 @@ * { vertical-align: middle; } - md-icon { + mat-icon { &.td-data-table-sort-icon { color: mat-color($foreground, disabled); } } &.mat-active, - &.mat-active md-icon { + &.mat-active mat-icon { color: mat-color($foreground, base); } } diff --git a/src/platform/core/data-table/data-table-column/data-table-column.component.html b/src/platform/core/data-table/data-table-column/data-table-column.component.html index 8755b16653..e55e645953 100644 --- a/src/platform/core/data-table/data-table-column/data-table-column.component.html +++ b/src/platform/core/data-table/data-table-column/data-table-column.component.html @@ -1,19 +1,19 @@ - arrow_upward - + - arrow_upward - + diff --git a/src/platform/core/data-table/data-table-column/data-table-column.component.scss b/src/platform/core/data-table/data-table-column/data-table-column.component.scss index eaee31f5be..fae81bce2f 100644 --- a/src/platform/core/data-table/data-table-column/data-table-column.component.scss +++ b/src/platform/core/data-table/data-table-column/data-table-column.component.scss @@ -19,7 +19,7 @@ @include rtl(padding-right, 24px, 28px); } - md-icon { + mat-icon { height: 16px; width: 16px; font-size: 16px !important; @@ -39,8 +39,8 @@ } } - &:hover.mat-sortable md-icon.td-data-table-sort-icon, - &.mat-active.mat-sortable md-icon.td-data-table-sort-icon { + &:hover.mat-sortable mat-icon.td-data-table-sort-icon, + &.mat-active.mat-sortable mat-icon.td-data-table-sort-icon { opacity: 1; } @@ -62,19 +62,19 @@ display: inline-block; position: relative; } - md-icon.td-data-table-sort-icon { + mat-icon.td-data-table-sort-icon { position: absolute; top: 0px; } &.mat-numeric { @include rtl(text-align, right, left); - md-icon.td-data-table-sort-icon { + mat-icon.td-data-table-sort-icon { @include rtl(margin-left, -22px, initial); @include rtl(margin-right, initial, -22px); } } &:not(.mat-numeric) { - md-icon.td-data-table-sort-icon { + mat-icon.td-data-table-sort-icon { @include rtl(margin-left, 6px, initial); @include rtl(margin-right, initial, 6px); } diff --git a/src/platform/core/data-table/data-table.component.html b/src/platform/core/data-table/data-table.component.html index 511ed8bac3..36c984cb9e 100644 --- a/src/platform/core/data-table/data-table.component.html +++ b/src/platform/core/data-table/data-table.component.html @@ -3,7 +3,7 @@ [class.mat-selectable]="selectable"> - - + - {{column.label}} + {{column.label}} @@ -51,13 +51,13 @@ (keydown.shift)="disableTextSelection()" (keyup.shift)="enableTextSelection()"> - - + { @@ -35,6 +36,7 @@ describe('Component: DataTable', () => { TdDataTableCompareWithTestComponent, ], providers: [ + {provide: MATERIAL_COMPATIBILITY_MODE, useValue: true}, TdDataTableService, ], }); @@ -168,34 +170,37 @@ describe('Component: DataTable', () => { fixture.detectChanges(); fixture.whenStable().then(() => { - let dataTableComponent: TdDataTableComponent = fixture.debugElement.query(By.directive(TdDataTableComponent)).componentInstance; - // check how many rows were rendered - expect(fixture.debugElement.queryAll(By.directive(TdDataTableRowComponent)).length).toBe(4); - // check to see checkboxes states - expect(dataTableComponent.indeterminate).toBeFalsy(); - expect(dataTableComponent.allSelected).toBeFalsy(); - // select a row with a click event - fixture.debugElement.queryAll(By.directive(MdPseudoCheckbox))[2].triggerEventHandler('click', new Event('click')); fixture.detectChanges(); fixture.whenStable().then(() => { - // check to see if its in indeterminate state - expect(dataTableComponent.indeterminate).toBeTruthy(); + let dataTableComponent: TdDataTableComponent = fixture.debugElement.query(By.directive(TdDataTableComponent)).componentInstance; + // check how many rows were rendered + expect(fixture.debugElement.queryAll(By.directive(TdDataTableRowComponent)).length).toBe(4); + // check to see checkboxes states + expect(dataTableComponent.indeterminate).toBeFalsy(); expect(dataTableComponent.allSelected).toBeFalsy(); - // select the rest of the rows by clicking in selectAll - fixture.debugElement.query(By.directive(MdCheckbox)).triggerEventHandler('click', new Event('click')); + // select a row with a click event + fixture.debugElement.queryAll(By.directive(MatPseudoCheckbox))[2].triggerEventHandler('click', new Event('click')); fixture.detectChanges(); fixture.whenStable().then(() => { - // check to see if its in indeterminate state and allSelected + // check to see if its in indeterminate state expect(dataTableComponent.indeterminate).toBeTruthy(); - expect(dataTableComponent.allSelected).toBeTruthy(); - // unselect all rows by clicking in unselect all - fixture.debugElement.query(By.directive(MdCheckbox)).triggerEventHandler('click', new Event('click')); + expect(dataTableComponent.allSelected).toBeFalsy(); + // select the rest of the rows by clicking in selectAll + fixture.debugElement.query(By.directive(MatCheckbox)).triggerEventHandler('click', new Event('click')); fixture.detectChanges(); fixture.whenStable().then(() => { - // check to see if its not in indeterminate state and not allSelected - expect(dataTableComponent.indeterminate).toBeFalsy(); - expect(dataTableComponent.allSelected).toBeFalsy(); - done(); + // check to see if its in indeterminate state and allSelected + expect(dataTableComponent.indeterminate).toBeTruthy(); + expect(dataTableComponent.allSelected).toBeTruthy(); + // unselect all rows by clicking in unselect all + fixture.debugElement.query(By.directive(MatCheckbox)).triggerEventHandler('click', new Event('click')); + fixture.detectChanges(); + fixture.whenStable().then(() => { + // check to see if its not in indeterminate state and not allSelected + expect(dataTableComponent.indeterminate).toBeFalsy(); + expect(dataTableComponent.allSelected).toBeFalsy(); + done(); + }); }); }); }); @@ -221,39 +226,41 @@ describe('Component: DataTable', () => { { sku: '1421-0', item: 'Prime Rib', price: 41.15 }, { sku: '1452-1', item: 'Sirlone', price: 22.11 }, { sku: '1421-3', item: 'T-Bone', price: 51.15 }]; - fixture.detectChanges(); fixture.whenStable().then(() => { - let dataTableComponent: TdDataTableComponent = fixture.debugElement.query(By.directive(TdDataTableComponent)).componentInstance; - // check how many rows were rendered - expect(fixture.debugElement.queryAll(By.directive(TdDataTableRowComponent)).length).toBe(4); - // check to see checkboxes states - expect(dataTableComponent.indeterminate).toBeFalsy(); - expect(dataTableComponent.allSelected).toBeFalsy(); - // select a row with a click event - fixture.debugElement.queryAll(By.directive(MdPseudoCheckbox))[2].triggerEventHandler('click', new Event('click')); fixture.detectChanges(); fixture.whenStable().then(() => { - // check to see if its in indeterminate state - expect(dataTableComponent.indeterminate).toBeTruthy(); + let dataTableComponent: TdDataTableComponent = fixture.debugElement.query(By.directive(TdDataTableComponent)).componentInstance; + // check how many rows were rendered + expect(fixture.debugElement.queryAll(By.directive(TdDataTableRowComponent)).length).toBe(4); + // check to see checkboxes states + expect(dataTableComponent.indeterminate).toBeFalsy(); expect(dataTableComponent.allSelected).toBeFalsy(); - // select the rest of the rows - fixture.debugElement.queryAll(By.directive(MdPseudoCheckbox))[0].triggerEventHandler('click', new Event('click')); - fixture.debugElement.queryAll(By.directive(MdPseudoCheckbox))[1].triggerEventHandler('click', new Event('click')); - fixture.debugElement.queryAll(By.directive(MdPseudoCheckbox))[3].triggerEventHandler('click', new Event('click')); + // select a row with a click event + fixture.debugElement.queryAll(By.directive(MatPseudoCheckbox))[2].triggerEventHandler('click', new Event('click')); fixture.detectChanges(); fixture.whenStable().then(() => { - // check to see if its in indeterminate state and allSelected + // check to see if its in indeterminate state expect(dataTableComponent.indeterminate).toBeTruthy(); - expect(dataTableComponent.allSelected).toBeTruthy(); - // unselect one of the rows - fixture.debugElement.queryAll(By.directive(MdPseudoCheckbox))[2].triggerEventHandler('click', new Event('click')); + expect(dataTableComponent.allSelected).toBeFalsy(); + // select the rest of the rows + fixture.debugElement.queryAll(By.directive(MatPseudoCheckbox))[0].triggerEventHandler('click', new Event('click')); + fixture.debugElement.queryAll(By.directive(MatPseudoCheckbox))[1].triggerEventHandler('click', new Event('click')); + fixture.debugElement.queryAll(By.directive(MatPseudoCheckbox))[3].triggerEventHandler('click', new Event('click')); fixture.detectChanges(); fixture.whenStable().then(() => { - // check to see if its in indeterminate state and not allSelected + // check to see if its in indeterminate state and allSelected expect(dataTableComponent.indeterminate).toBeTruthy(); - expect(dataTableComponent.allSelected).toBeFalsy(); - done(); + expect(dataTableComponent.allSelected).toBeTruthy(); + // unselect one of the rows + fixture.debugElement.queryAll(By.directive(MatPseudoCheckbox))[2].triggerEventHandler('click', new Event('click')); + fixture.detectChanges(); + fixture.whenStable().then(() => { + // check to see if its in indeterminate state and not allSelected + expect(dataTableComponent.indeterminate).toBeTruthy(); + expect(dataTableComponent.allSelected).toBeFalsy(); + done(); + }); }); }); }); @@ -282,28 +289,31 @@ describe('Component: DataTable', () => { fixture.detectChanges(); fixture.whenStable().then(() => { - let dataTableComponent: TdDataTableComponent = fixture.debugElement.query(By.directive(TdDataTableComponent)).componentInstance; - // check how many rows were rendered - expect(fixture.debugElement.queryAll(By.directive(TdDataTableRowComponent)).length).toBe(4); - // check to see checkboxes states - expect(dataTableComponent.indeterminate).toBeFalsy(); - expect(dataTableComponent.allSelected).toBeFalsy(); - fixture.detectChanges(); fixture.whenStable().then(() => { - // select the first and last row with shift key also selected and should then select all checkboxes - let clickEvent: MouseEvent = document.createEvent('MouseEvents'); - // the 12th parameter below 'true' sets the shift key to be clicked at the same time as as the mouse click - clickEvent.initMouseEvent('click', true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, document.body.parentNode); - fixture.debugElement.queryAll(By.directive(MdPseudoCheckbox))[0].nativeElement.dispatchEvent(clickEvent); - let shiftClickEvent: MouseEvent = document.createEvent('MouseEvents'); - shiftClickEvent.initMouseEvent('click', true, true, window, 0, 0, 0, 0, 0, false, false, true, false, 0, document.body.parentNode); - fixture.debugElement.queryAll(By.directive(MdPseudoCheckbox))[3].nativeElement.dispatchEvent(shiftClickEvent); + let dataTableComponent: TdDataTableComponent = fixture.debugElement.query(By.directive(TdDataTableComponent)).componentInstance; + // check how many rows were rendered + expect(fixture.debugElement.queryAll(By.directive(TdDataTableRowComponent)).length).toBe(4); + // check to see checkboxes states + expect(dataTableComponent.indeterminate).toBeFalsy(); + expect(dataTableComponent.allSelected).toBeFalsy(); + fixture.detectChanges(); fixture.whenStable().then(() => { - // check to see if allSelected is true - expect(dataTableComponent.allSelected).toBeTruthy(); - done(); + // select the first and last row with shift key also selected and should then select all checkboxes + let clickEvent: MouseEvent = document.createEvent('MouseEvents'); + // the 12th parameter below 'true' sets the shift key to be clicked at the same time as as the mouse click + clickEvent.initMouseEvent('click', true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, document.body.parentNode); + fixture.debugElement.queryAll(By.directive(MatPseudoCheckbox))[0].nativeElement.dispatchEvent(clickEvent); + let shiftClickEvent: MouseEvent = document.createEvent('MouseEvents'); + shiftClickEvent.initMouseEvent('click', true, true, window, 0, 0, 0, 0, 0, false, false, true, false, 0, document.body.parentNode); + fixture.debugElement.queryAll(By.directive(MatPseudoCheckbox))[3].nativeElement.dispatchEvent(shiftClickEvent); + fixture.detectChanges(); + fixture.whenStable().then(() => { + // check to see if allSelected is true + expect(dataTableComponent.allSelected).toBeTruthy(); + done(); + }); }); }); }); @@ -358,7 +368,7 @@ describe('Component: DataTable', () => { fixture.detectChanges(); fixture.whenStable().then(() => { - fixture.debugElement.queryAll(By.directive(MdPseudoCheckbox))[0].nativeElement.click(); + fixture.debugElement.queryAll(By.directive(MatPseudoCheckbox))[0].nativeElement.click(); fixture.detectChanges(); fixture.whenStable().then(() => { expect(clickEventSpy.calls.count()).toBe(1); @@ -379,8 +389,8 @@ describe('Component: DataTable', () => { fixture.detectChanges(); fixture.whenStable().then(() => { fixture.detectChanges(); - expect(fixture.debugElement.queryAll(By.directive(MdPseudoCheckbox))[0].componentInstance.state).toBe('checked'); - expect(fixture.debugElement.queryAll(By.directive(MdPseudoCheckbox))[1].componentInstance.state).toBe('unchecked'); + expect(fixture.debugElement.queryAll(By.directive(MatPseudoCheckbox))[0].componentInstance.state).toBe('checked'); + expect(fixture.debugElement.queryAll(By.directive(MatPseudoCheckbox))[1].componentInstance.state).toBe('unchecked'); }); }))); @@ -394,8 +404,8 @@ describe('Component: DataTable', () => { fixture.detectChanges(); fixture.whenStable().then(() => { fixture.detectChanges(); - expect(fixture.debugElement.queryAll(By.directive(MdPseudoCheckbox))[0].componentInstance.state).toBe('unchecked'); - expect(fixture.debugElement.queryAll(By.directive(MdPseudoCheckbox))[1].componentInstance.state).toBe('unchecked'); + expect(fixture.debugElement.queryAll(By.directive(MatPseudoCheckbox))[0].componentInstance.state).toBe('unchecked'); + expect(fixture.debugElement.queryAll(By.directive(MatPseudoCheckbox))[1].componentInstance.state).toBe('unchecked'); }); }))); @@ -409,8 +419,8 @@ describe('Component: DataTable', () => { fixture.detectChanges(); fixture.whenStable().then(() => { fixture.detectChanges(); - expect(fixture.debugElement.queryAll(By.directive(MdPseudoCheckbox))[0].componentInstance.state).toBe('checked'); - expect(fixture.debugElement.queryAll(By.directive(MdPseudoCheckbox))[1].componentInstance.state).toBe('unchecked'); + expect(fixture.debugElement.queryAll(By.directive(MatPseudoCheckbox))[0].componentInstance.state).toBe('checked'); + expect(fixture.debugElement.queryAll(By.directive(MatPseudoCheckbox))[1].componentInstance.state).toBe('unchecked'); }); }))); }); @@ -441,7 +451,8 @@ class TdDataTableBasicTestComponent { [data]="data" [columns]="columns" [selectable]="selectable" - [multiple]="multiple"> + [multiple]="multiple" + [style.height.px]="200"> `, }) class TdDataTableSelectableTestComponent { diff --git a/src/platform/core/data-table/data-table.component.ts b/src/platform/core/data-table/data-table.component.ts index f8b431f1f3..847240d12f 100644 --- a/src/platform/core/data-table/data-table.component.ts +++ b/src/platform/core/data-table/data-table.component.ts @@ -92,7 +92,7 @@ const TD_VIRTUAL_DEFAULT_ROW_HEIGHT: number = 48; }) export class TdDataTableComponent implements ControlValueAccessor, OnInit, AfterContentInit, AfterContentChecked, AfterViewInit, OnDestroy { - /** reponsive width calculations */ + /** responsive width calculations */ private _resizeSubs: Subscription; private _rowsChangedSubs: Subscription; private _hostWidth: number = 0; diff --git a/src/platform/core/data-table/data-table.module.ts b/src/platform/core/data-table/data-table.module.ts index e61d64a787..648d2c91c9 100644 --- a/src/platform/core/data-table/data-table.module.ts +++ b/src/platform/core/data-table/data-table.module.ts @@ -1,6 +1,6 @@ import { NgModule, Type } from '@angular/core'; import { CommonModule } from '@angular/common'; -import { MdCheckboxModule, MdTooltipModule, MdIconModule, MdPseudoCheckboxModule } from '@angular/material'; +import { MatCheckboxModule, MatTooltipModule, MatIconModule, MatPseudoCheckboxModule } from '@angular/material'; import { TdDataTableComponent } from './data-table.component'; import { TdDataTableColumnComponent } from './data-table-column/data-table-column.component'; @@ -34,10 +34,10 @@ export { TdDataTableTableComponent } from './data-table-table/data-table-table.c @NgModule({ imports: [ CommonModule, - MdCheckboxModule, - MdTooltipModule, - MdIconModule, - MdPseudoCheckboxModule, + MatCheckboxModule, + MatTooltipModule, + MatIconModule, + MatPseudoCheckboxModule, ], declarations: [ TD_DATA_TABLE, diff --git a/src/platform/core/dialogs/alert-dialog/alert-dialog.component.html b/src/platform/core/dialogs/alert-dialog/alert-dialog.component.html index cf97af1bdd..4274e39473 100644 --- a/src/platform/core/dialogs/alert-dialog/alert-dialog.component.html +++ b/src/platform/core/dialogs/alert-dialog/alert-dialog.component.html @@ -6,6 +6,6 @@ {{message}} - + \ No newline at end of file diff --git a/src/platform/core/dialogs/alert-dialog/alert-dialog.component.ts b/src/platform/core/dialogs/alert-dialog/alert-dialog.component.ts index a41af05fdd..165b9c8266 100644 --- a/src/platform/core/dialogs/alert-dialog/alert-dialog.component.ts +++ b/src/platform/core/dialogs/alert-dialog/alert-dialog.component.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { MdDialogRef } from '@angular/material'; +import { MatDialogRef } from '@angular/material'; @Component({ selector: 'td-alert-dialog', @@ -11,7 +11,7 @@ export class TdAlertDialogComponent { message: string; closeButton: string = 'CLOSE'; - constructor(private _dialogRef: MdDialogRef) {} + constructor(private _dialogRef: MatDialogRef) {} close(): void { this._dialogRef.close(); diff --git a/src/platform/core/dialogs/confirm-dialog/confirm-dialog.component.html b/src/platform/core/dialogs/confirm-dialog/confirm-dialog.component.html index 59925a799a..a7dcb110cb 100644 --- a/src/platform/core/dialogs/confirm-dialog/confirm-dialog.component.html +++ b/src/platform/core/dialogs/confirm-dialog/confirm-dialog.component.html @@ -6,11 +6,11 @@ {{message}} - - -
    { @@ -21,6 +22,9 @@ describe('Component: ExpansionPanel', () => { NoopAnimationsModule, CovalentExpansionPanelModule, ], + providers: [ + {provide: MATERIAL_COMPATIBILITY_MODE, useValue: true}, + ], }); TestBed.compileComponents(); })); diff --git a/src/platform/core/expansion-panel/expansion-panel.module.ts b/src/platform/core/expansion-panel/expansion-panel.module.ts index 5a88854e46..1d6c32ae0d 100644 --- a/src/platform/core/expansion-panel/expansion-panel.module.ts +++ b/src/platform/core/expansion-panel/expansion-panel.module.ts @@ -3,7 +3,7 @@ import { NgModule, ModuleWithProviders } from '@angular/core'; import { CommonModule } from '@angular/common'; import { PortalModule } from '@angular/cdk/portal'; -import { MdRippleModule, MdIconModule } from '@angular/material'; +import { MatRippleModule, MatIconModule } from '@angular/material'; import { TdExpansionPanelComponent, TdExpansionPanelHeaderDirective, TdExpansionPanelLabelDirective, TdExpansionPanelSublabelDirective, TdExpansionPanelSummaryComponent } from './expansion-panel.component'; @@ -24,8 +24,8 @@ export { TdExpansionPanelGroupComponent } from './expansion-panel-group.componen @NgModule({ imports: [ CommonModule, - MdRippleModule, - MdIconModule, + MatRippleModule, + MatIconModule, PortalModule, ], declarations: [ diff --git a/src/platform/core/file/_file-theme.scss b/src/platform/core/file/_file-theme.scss index 19d2896f22..02d1fbbd60 100644 --- a/src/platform/core/file/_file-theme.scss +++ b/src/platform/core/file/_file-theme.scss @@ -7,7 +7,7 @@ td-file-upload { .td-file-upload-cancel { - md-icon { + mat-icon { background-color: mat-color($background, background); } } diff --git a/src/platform/core/file/file-input/README.md b/src/platform/core/file/file-input/README.md index 7312c70c88..2a074ccfcc 100644 --- a/src/platform/core/file/file-input/README.md +++ b/src/platform/core/file/file-input/README.md @@ -11,7 +11,7 @@ Example for usage: ```html - attach_fileChoose a file... + attach_fileChoose a file... ``` @@ -37,7 +37,7 @@ Properties: | Name | Type | Description | | --- | --- | 650--- | -| color | string | Sets button color. Uses same color palette accepted as [mdButton]. +| color | string | Sets button color. Uses same color palette accepted as [MatButton]. | multiple | boolean | Sets if multiple files can be dropped/selected at once in [TdFileUploadComponent]. | accept | string | Sets files accepted when opening the file browser dialog. Same as "accept" attribute in `` element. | disabled | boolean | Disables [TdFileUploadComponent] and clears selected/dropped files. diff --git a/src/platform/core/file/file-input/file-input.component.html b/src/platform/core/file/file-input/file-input.component.html index 0ada088acf..1b1a392f18 100644 --- a/src/platform/core/file/file-input/file-input.component.html +++ b/src/platform/core/file/file-input/file-input.component.html @@ -1,5 +1,5 @@
    - -
    \ No newline at end of file diff --git a/src/platform/core/file/file-upload/README.md b/src/platform/core/file/file-upload/README.md index 4ee15d0cf3..de83744468 100644 --- a/src/platform/core/file/file-upload/README.md +++ b/src/platform/core/file/file-upload/README.md @@ -9,9 +9,9 @@ Example for usage: ```html - file_upload{{ fileUpload.files?.name }} + file_upload{{ fileUpload.files?.name }} - attach_fileChoose a file... + attach_fileChoose a file... ``` @@ -49,9 +49,9 @@ Properties: | Name | Type | Description | | --- | --- | 650--- | -| `defaultColor` | `string` | Sets browse button color. Uses same color palette accepted as [mdButton] and defaults to 'primary'. -| `activeColor` | `string` | Sets upload button color. Uses same color palette accepted as [mdButton] and defaults to 'accent'. -| `cancelColor` | `string` | Sets cancel button color. Uses same color palette accepted as [mdButton] and defaults to 'warn'. +| `defaultColor` | `string` | Sets browse button color. Uses same color palette accepted as [MatButton] and defaults to 'primary'. +| `activeColor` | `string` | Sets upload button color. Uses same color palette accepted as [MatButton] and defaults to 'accent'. +| `cancelColor` | `string` | Sets cancel button color. Uses same color palette accepted as [MatButton] and defaults to 'warn'. | `multiple` | `boolean` | Sets if multiple files can be dropped/selected at once in [TdFileUploadComponent]. | `accept` | `string` | Sets files accepted when opening the file browser dialog. Same as "accept" attribute in `` element. | `disabled` | `boolean` | Disables [TdFileUploadComponent] and clears selected/dropped files. diff --git a/src/platform/core/file/file-upload/file-upload.component.html b/src/platform/core/file/file-upload/file-upload.component.html index 95d92eef19..761144122f 100644 --- a/src/platform/core/file/file-upload/file-upload.component.html +++ b/src/platform/core/file/file-upload/file-upload.component.html @@ -4,7 +4,7 @@
    -
    \ No newline at end of file diff --git a/src/platform/core/file/file-upload/file-upload.component.scss b/src/platform/core/file/file-upload/file-upload.component.scss index 62dad5def5..e949556d0e 100644 --- a/src/platform/core/file/file-upload/file-upload.component.scss +++ b/src/platform/core/file/file-upload/file-upload.component.scss @@ -12,7 +12,7 @@ right: -12px; left: 0; } - md-icon { + mat-icon { border-radius: 12px; vertical-align: baseline; } diff --git a/src/platform/core/file/file-upload/file-upload.component.spec.ts b/src/platform/core/file/file-upload/file-upload.component.spec.ts index a1461d2eab..420524f87a 100644 --- a/src/platform/core/file/file-upload/file-upload.component.spec.ts +++ b/src/platform/core/file/file-upload/file-upload.component.spec.ts @@ -7,6 +7,7 @@ import { import { Component } from '@angular/core'; import { CovalentFileModule, TdFileUploadComponent } from '../file.module'; import { By } from '@angular/platform-browser'; +import { MATERIAL_COMPATIBILITY_MODE } from '@angular/material'; describe('Component: FileUpload', () => { @@ -18,6 +19,9 @@ describe('Component: FileUpload', () => { imports: [ CovalentFileModule, ], + providers: [ + {provide: MATERIAL_COMPATIBILITY_MODE, useValue: true}, + ], }); TestBed.compileComponents(); })); diff --git a/src/platform/core/file/file-upload/file-upload.component.ts b/src/platform/core/file/file-upload/file-upload.component.ts index 8b7547d2db..f391647180 100644 --- a/src/platform/core/file/file-upload/file-upload.component.ts +++ b/src/platform/core/file/file-upload/file-upload.component.ts @@ -27,19 +27,19 @@ export class TdFileUploadComponent extends _TdFileUploadMixinBase implements ICa /** * defaultColor?: string - * Sets browse button color. Uses same color palette accepted as [mdButton] and defaults to 'primary'. + * Sets browse button color. Uses same color palette accepted as [MatButton] and defaults to 'primary'. */ @Input('defaultColor') defaultColor: string = 'primary'; /** * activeColor?: string - * Sets upload button color. Uses same color palette accepted as [mdButton] and defaults to 'accent'. + * Sets upload button color. Uses same color palette accepted as [MatButton] and defaults to 'accent'. */ @Input('activeColor') activeColor: string = 'accent'; /** * cancelColor?: string - * Sets cancel button color. Uses same color palette accepted as [mdButton] and defaults to 'warn'. + * Sets cancel button color. Uses same color palette accepted as [MatButton] and defaults to 'warn'. */ @Input('cancelColor') cancelColor: string = 'warn'; diff --git a/src/platform/core/file/file.module.ts b/src/platform/core/file/file.module.ts index 23cfecff4a..5e9a1d348c 100644 --- a/src/platform/core/file/file.module.ts +++ b/src/platform/core/file/file.module.ts @@ -6,7 +6,7 @@ import { HttpModule, JsonpModule } from '@angular/http'; import { FormsModule } from '@angular/forms'; import { PortalModule } from '@angular/cdk/portal'; -import { MdIconModule, MdButtonModule } from '@angular/material'; +import { MatIconModule, MatButtonModule } from '@angular/material'; import { TdFileSelectDirective } from './directives/file-select.directive'; import { TdFileDropDirective } from './directives/file-drop.directive'; @@ -34,8 +34,8 @@ export { TdFileService, IUploadOptions } from './services/file.service'; JsonpModule, FormsModule, CommonModule, - MdIconModule, - MdButtonModule, + MatIconModule, + MatButtonModule, PortalModule, ], declarations: [ diff --git a/src/platform/core/json-formatter/json-formatter.component.html b/src/platform/core/json-formatter/json-formatter.component.html index 2251d2f828..fab9eaa6c2 100644 --- a/src/platform/core/json-formatter/json-formatter.component.html +++ b/src/platform/core/json-formatter/json-formatter.component.html @@ -7,10 +7,10 @@ layout="row" layout-align="start center" (click)="toggle()"> - {{open? 'keyboard_arrow_down' : (isRTL ? 'keyboard_arrow_left' : 'keyboard_arrow_right')}} + {{open? 'keyboard_arrow_down' : (isRTL ? 'keyboard_arrow_left' : 'keyboard_arrow_right')}} {{key}}: - + {{getObjectName()}} [{{data.length}}] diff --git a/src/platform/core/json-formatter/json-formatter.component.spec.ts b/src/platform/core/json-formatter/json-formatter.component.spec.ts index d855b624dd..6816ccc57e 100644 --- a/src/platform/core/json-formatter/json-formatter.component.spec.ts +++ b/src/platform/core/json-formatter/json-formatter.component.spec.ts @@ -8,6 +8,7 @@ import { Component } from '@angular/core'; import { NoopAnimationsModule } from '@angular/platform-browser/animations'; import { CovalentJsonFormatterModule, TdJsonFormatterComponent } from './json-formatter.module'; import { By } from '@angular/platform-browser'; +import { MATERIAL_COMPATIBILITY_MODE } from '@angular/material'; describe('Component: JsonFormatter', () => { @@ -20,6 +21,9 @@ describe('Component: JsonFormatter', () => { NoopAnimationsModule, CovalentJsonFormatterModule, ], + providers: [ + {provide: MATERIAL_COMPATIBILITY_MODE, useValue: true}, + ], }); TestBed.compileComponents(); })); diff --git a/src/platform/core/json-formatter/json-formatter.module.ts b/src/platform/core/json-formatter/json-formatter.module.ts index c009ed2f1b..6f8d31c00c 100644 --- a/src/platform/core/json-formatter/json-formatter.module.ts +++ b/src/platform/core/json-formatter/json-formatter.module.ts @@ -1,7 +1,7 @@ import { NgModule, ModuleWithProviders } from '@angular/core'; import { CommonModule } from '@angular/common'; -import { MdTooltipModule, MdIconModule } from '@angular/material'; +import { MatTooltipModule, MatIconModule } from '@angular/material'; import { TdJsonFormatterComponent } from './json-formatter.component'; @@ -10,8 +10,8 @@ export { TdJsonFormatterComponent } from './json-formatter.component'; @NgModule({ imports: [ CommonModule, - MdTooltipModule, - MdIconModule, + MatTooltipModule, + MatIconModule, ], declarations: [ TdJsonFormatterComponent, diff --git a/src/platform/core/layout/README.md b/src/platform/core/layout/README.md index f451a8831b..6c33ba4cdf 100644 --- a/src/platform/core/layout/README.md +++ b/src/platform/core/layout/README.md @@ -32,16 +32,16 @@ To toggle/close/open the main sidenav from child layouts/components, you can use Example: ```html - ``` To disable the sidenav action, just set the input to false. ```html - ``` diff --git a/src/platform/core/layout/_layout-theme.scss b/src/platform/core/layout/_layout-theme.scss index 5f31b4fc55..e72922ff7d 100644 --- a/src/platform/core/layout/_layout-theme.scss +++ b/src/platform/core/layout/_layout-theme.scss @@ -12,7 +12,7 @@ background-color: mat-color($background, status-bar); } - [md-icon-button].td-layout-menu-button { + [mat-icon-button].td-layout-menu-button { margin-left: 0px; /deep/ [dir='rtl'] & { margin-right: 0px; @@ -26,7 +26,7 @@ td-layout-card-over, td-navigation-drawer, td-layout { - md-toolbar { + mat-toolbar { @include mat-elevation(1); z-index: 1; } @@ -40,19 +40,19 @@ @include mat-elevation(2); &.mat-primary { background: mat-color($primary); - &, md-icon { + &, mat-icon { color: mat-color($primary, default-contrast); } } &.mat-accent { background: mat-color($accent); - &, md-icon { + &, mat-icon { color: mat-color($accent, default-contrast); } } &.mat-warn { background: mat-color($warn); - &, md-icon { + &, mat-icon { color: mat-color($warn, default-contrast); } } diff --git a/src/platform/core/layout/layout-card-over/layout-card-over.component.html b/src/platform/core/layout/layout-card-over/layout-card-over.component.html index bebb830f36..0a354d32ee 100644 --- a/src/platform/core/layout/layout-card-over/layout-card-over.component.html +++ b/src/platform/core/layout/layout-card-over/layout-card-over.component.html @@ -1,13 +1,13 @@ - - + +
    - - {{cardTitle}} - {{cardSubtitle}} - + + {{cardTitle}} + {{cardSubtitle}} + - +
    diff --git a/src/platform/core/layout/layout-manage-list/README.md b/src/platform/core/layout/layout-manage-list/README.md index 7b86eeb6c6..dedf44be64 100644 --- a/src/platform/core/layout/layout-manage-list/README.md +++ b/src/platform/core/layout/layout-manage-list/README.md @@ -19,16 +19,16 @@ To toggle/close/open the manage list sidenav from child layouts/components, you Example: ```html - ``` To disable the sidenav action, just set the input to false. ```html - ``` @@ -52,18 +52,18 @@ Example for Manage List Layout / Nav Layout combo: .. main toolbar content - + ... toolbar in sidenav - - + + ... sidenav content - - - ... sub toolbar content - + ... main content ... sub footer content diff --git a/src/platform/core/layout/layout-manage-list/layout-manage-list.component.html b/src/platform/core/layout/layout-manage-list/layout-manage-list.component.html index 6502ac749f..4d87f54745 100644 --- a/src/platform/core/layout/layout-manage-list/layout-manage-list.component.html +++ b/src/platform/core/layout/layout-manage-list/layout-manage-list.component.html @@ -1,5 +1,5 @@ - - + - +
    -     +
    - +
    -     + diff --git a/src/platform/core/layout/layout-manage-list/layout-manage-list.component.scss b/src/platform/core/layout/layout-manage-list/layout-manage-list.component.scss index e01cc62a51..0b9eaa599d 100644 --- a/src/platform/core/layout/layout-manage-list/layout-manage-list.component.scss +++ b/src/platform/core/layout/layout-manage-list/layout-manage-list.component.scss @@ -5,8 +5,8 @@ min-height: 100%; height: 100%; overflow: hidden; - md-sidenav-container.td-layout-manage-list { - & > md-sidenav { + mat-sidenav-container.td-layout-manage-list { + & > mat-sidenav { &.mat-drawer-opened, &.mat-drawer-opening, &.mat-drawer-closed, @@ -20,12 +20,12 @@ } } :host /deep/ { - md-sidenav-container.td-layout-manage-list { + mat-sidenav-container.td-layout-manage-list { & > .mat-drawer-content { flex-grow: 1; } /* Ensure the left sidenav is a flex column & 100% height */ - & > md-sidenav { + & > mat-sidenav { box-sizing: border-box; display: -webkit-box; display: -webkit-flex; @@ -35,7 +35,7 @@ flex-direction: column; } } - md-nav-list a[md-list-item] .mat-list-item-content { + mat-nav-list a[mat-list-item] .mat-list-item-content { font-size: 14px; } .mat-toolbar { diff --git a/src/platform/core/layout/layout-manage-list/layout-manage-list.component.ts b/src/platform/core/layout/layout-manage-list/layout-manage-list.component.ts index ca9da947d0..f2efc8df45 100644 --- a/src/platform/core/layout/layout-manage-list/layout-manage-list.component.ts +++ b/src/platform/core/layout/layout-manage-list/layout-manage-list.component.ts @@ -1,6 +1,6 @@ import { Component, Directive, Input, ViewChild } from '@angular/core'; -import { MdSidenav, MdDrawerToggleResult } from '@angular/material'; +import { MatSidenav, MatDrawerToggleResult } from '@angular/material'; import { ILayoutTogglable } from '../layout-toggle.class'; @@ -11,14 +11,14 @@ import { ILayoutTogglable } from '../layout-toggle.class'; }) export class TdLayoutManageListComponent implements ILayoutTogglable { - @ViewChild(MdSidenav) sidenav: MdSidenav; + @ViewChild(MatSidenav) sidenav: MatSidenav; /** * mode?: 'side', 'push' or 'over' * * The mode or styling of the sidenav. * Defaults to "side". - * See "MdSidenav" documentation for more info. + * See "MatSidenav" documentation for more info. * * https://github.com/angular/material2/tree/master/src/lib/sidenav */ @@ -30,7 +30,7 @@ export class TdLayoutManageListComponent implements ILayoutTogglable { * Whether or not the sidenav is opened. Use this binding to open/close the sidenav. * Defaults to "true". * - * See "MdSidenav" documentation for more info. + * See "MatSidenav" documentation for more info. * * https://github.com/angular/material2/tree/master/src/lib/sidenav */ @@ -57,21 +57,21 @@ export class TdLayoutManageListComponent implements ILayoutTogglable { /** * Proxy toggle method to access sidenav from outside (from td-layout template). */ - public toggle(): Promise { + public toggle(): Promise { return this.sidenav.toggle(!this.sidenav.opened); } /** * Proxy open method to access sidenav from outside (from td-layout template). */ - public open(): Promise { + public open(): Promise { return this.sidenav.open(); } /** * Proxy close method to access sidenav from outside (from td-layout template). */ - public close(): Promise { + public close(): Promise { return this.sidenav.close(); } diff --git a/src/platform/core/layout/layout-nav-list/README.md b/src/platform/core/layout/layout-nav-list/README.md index c0bb4cd199..af5e32fb9d 100644 --- a/src/platform/core/layout/layout-nav-list/README.md +++ b/src/platform/core/layout/layout-nav-list/README.md @@ -24,16 +24,16 @@ To toggle/close/open the nav list sidenav from child layouts/components, you can Example: ```html - ``` To disable the sidenav action, just set the input to false. ```html - ``` @@ -59,18 +59,18 @@ Example for Nav List Layout: ```html -
    ... left toolbar content
    - - ... sidenav content - +
    ... right toolbar content
    diff --git a/src/platform/core/layout/layout-nav-list/layout-nav-list.component.html b/src/platform/core/layout/layout-nav-list/layout-nav-list.component.html index ed4b9e7fdc..e86b07882d 100644 --- a/src/platform/core/layout/layout-nav-list/layout-nav-list.component.html +++ b/src/platform/core/layout/layout-nav-list/layout-nav-list.component.html @@ -1,7 +1,7 @@
    - - + - + - {{icon}} - + {{icon}} + {{toolbarTitle}} - +
    -     +
    - + - +
    -     +
    \ No newline at end of file diff --git a/src/platform/core/layout/layout-nav-list/layout-nav-list.component.scss b/src/platform/core/layout/layout-nav-list/layout-nav-list.component.scss index ddb75b16fc..7bc72bb0c6 100644 --- a/src/platform/core/layout/layout-nav-list/layout-nav-list.component.scss +++ b/src/platform/core/layout/layout-nav-list/layout-nav-list.component.scss @@ -5,8 +5,8 @@ min-height: 100%; height: 100%; overflow: hidden; - md-sidenav-container.td-layout-nav-list { - & > md-sidenav { + mat-sidenav-container.td-layout-nav-list { + & > mat-sidenav { &.mat-drawer-opened, &.mat-drawer-opening, &.mat-drawer-closed, @@ -20,12 +20,12 @@ } } :host /deep/ { - md-sidenav-container.td-layout-nav-list { + mat-sidenav-container.td-layout-nav-list { & > .mat-drawer-content { flex-grow: 1; } /* Ensure the left sidenav is a flex column & 100% height */ - & > md-sidenav { + & > mat-sidenav { box-sizing: border-box; display: -webkit-box; display: -webkit-flex; diff --git a/src/platform/core/layout/layout-nav-list/layout-nav-list.component.ts b/src/platform/core/layout/layout-nav-list/layout-nav-list.component.ts index b1b7154322..44c15adaf5 100644 --- a/src/platform/core/layout/layout-nav-list/layout-nav-list.component.ts +++ b/src/platform/core/layout/layout-nav-list/layout-nav-list.component.ts @@ -1,7 +1,7 @@ import { Component, Input, ViewChild, Optional } from '@angular/core'; import { Router } from '@angular/router'; -import { MdSidenav, MdDrawerToggleResult } from '@angular/material'; +import { MatSidenav, MatDrawerToggleResult } from '@angular/material'; import { ILayoutTogglable } from '../layout-toggle.class'; @@ -12,7 +12,7 @@ import { ILayoutTogglable } from '../layout-toggle.class'; }) export class TdLayoutNavListComponent implements ILayoutTogglable { - @ViewChild(MdSidenav) sidenav: MdSidenav; + @ViewChild(MatSidenav) sidenav: MatSidenav; /** * toolbarTitle?: string @@ -48,7 +48,7 @@ export class TdLayoutNavListComponent implements ILayoutTogglable { * * The mode or styling of the sidenav. * Defaults to "side". - * See "MdSidenav" documentation for more info. + * See "MatSidenav" documentation for more info. * * https://github.com/angular/material2/tree/master/src/lib/sidenav */ @@ -59,7 +59,7 @@ export class TdLayoutNavListComponent implements ILayoutTogglable { * Whether or not the sidenav is opened. Use this binding to open/close the sidenav. * Defaults to "true". * - * See "MdSidenav" documentation for more info. + * See "MatSidenav" documentation for more info. * * https://github.com/angular/material2/tree/master/src/lib/sidenav */ @@ -108,21 +108,21 @@ export class TdLayoutNavListComponent implements ILayoutTogglable { /** * Proxy toggle method to access sidenav from outside (from td-layout template). */ - public toggle(): Promise { + public toggle(): Promise { return this.sidenav.toggle(!this.sidenav.opened); } /** * Proxy open method to access sidenav from outside (from td-layout template). */ - public open(): Promise { + public open(): Promise { return this.sidenav.open(); } /** * Proxy close method to access sidenav from outside (from td-layout template). */ - public close(): Promise { + public close(): Promise { return this.sidenav.close(); } diff --git a/src/platform/core/layout/layout-nav/README.md b/src/platform/core/layout/layout-nav/README.md index ddce912ef5..646ce71016 100644 --- a/src/platform/core/layout/layout-nav/README.md +++ b/src/platform/core/layout/layout-nav/README.md @@ -26,8 +26,8 @@ Example for Nav Layout: ```html -
    .. main toolbar content diff --git a/src/platform/core/layout/layout-nav/layout-nav.component.html b/src/platform/core/layout/layout-nav/layout-nav.component.html index 7f69ae0715..4aab50a113 100644 --- a/src/platform/core/layout/layout-nav/layout-nav.component.html +++ b/src/platform/core/layout/layout-nav/layout-nav.component.html @@ -1,17 +1,17 @@
    - + - {{icon}} - + {{icon}} + {{toolbarTitle}} - +
    diff --git a/src/platform/core/layout/layout-toggle.class.ts b/src/platform/core/layout/layout-toggle.class.ts index 657db46174..5bd906c1cb 100644 --- a/src/platform/core/layout/layout-toggle.class.ts +++ b/src/platform/core/layout/layout-toggle.class.ts @@ -1,16 +1,16 @@ import { Input, HostBinding, HostListener, Renderer2, ElementRef, AfterViewInit, OnDestroy } from '@angular/core'; -import { MdDrawerToggleResult, MdSidenav } from '@angular/material'; +import { MatDrawerToggleResult, MatSidenav } from '@angular/material'; import { Observable } from 'rxjs/Observable'; import { Subscription } from 'rxjs/Subscription'; import { merge } from 'rxjs/observable/merge'; export interface ILayoutTogglable { - sidenav: MdSidenav; - toggle(): Promise; - open(): Promise; - close(): Promise; + sidenav: MatSidenav; + toggle(): Promise; + open(): Promise; + close(): Promise; } export abstract class LayoutToggle implements AfterViewInit, OnDestroy { diff --git a/src/platform/core/layout/layout.component.html b/src/platform/core/layout/layout.component.html index e942611157..01c6b7ad9c 100644 --- a/src/platform/core/layout/layout.component.html +++ b/src/platform/core/layout/layout.component.html @@ -1,5 +1,5 @@ - - + - + - + diff --git a/src/platform/core/layout/layout.component.scss b/src/platform/core/layout/layout.component.scss index b8992237a5..e95511d3c3 100644 --- a/src/platform/core/layout/layout.component.scss +++ b/src/platform/core/layout/layout.component.scss @@ -8,7 +8,7 @@ /deep/ { // Ensuring sidenav content has flex column properties - & > md-sidenav-container > md-sidenav { + & > mat-sidenav-container > mat-sidenav { display: -webkit-box; display: -webkit-flex; display: -moz-box; diff --git a/src/platform/core/layout/layout.component.ts b/src/platform/core/layout/layout.component.ts index af3cc7265e..94df4e30ec 100644 --- a/src/platform/core/layout/layout.component.ts +++ b/src/platform/core/layout/layout.component.ts @@ -1,6 +1,6 @@ import { Component, Input, ViewChild } from '@angular/core'; -import { MdSidenav, MdDrawerToggleResult } from '@angular/material'; +import { MatSidenav, MatDrawerToggleResult } from '@angular/material'; import { ILayoutTogglable } from './layout-toggle.class'; @@ -11,14 +11,14 @@ import { ILayoutTogglable } from './layout-toggle.class'; }) export class TdLayoutComponent implements ILayoutTogglable { - @ViewChild(MdSidenav) sidenav: MdSidenav; + @ViewChild(MatSidenav) sidenav: MatSidenav; /** * mode?: 'side', 'push' or 'over' * * The mode or styling of the sidenav. * Defaults to "over". - * See "MdSidenav" documentation for more info. + * See "MatSidenav" documentation for more info. * * https://github.com/angular/material2/tree/master/src/lib/sidenav */ @@ -30,7 +30,7 @@ export class TdLayoutComponent implements ILayoutTogglable { * Whether or not the sidenav is opened. Use this binding to open/close the sidenav. * Defaults to "false". * - * See "MdSidenav" documentation for more info. + * See "MatSidenav" documentation for more info. * * https://github.com/angular/material2/tree/master/src/lib/sidenav */ @@ -57,21 +57,21 @@ export class TdLayoutComponent implements ILayoutTogglable { /** * Proxy toggle method to access sidenav from outside (from td-layout template). */ - public toggle(): Promise { + public toggle(): Promise { return this.sidenav.toggle(!this.sidenav.opened); } /** * Proxy open method to access sidenav from outside (from td-layout template). */ - public open(): Promise { + public open(): Promise { return this.sidenav.open(); } /** * Proxy close method to access sidenav from outside (from td-layout template). */ - public close(): Promise { + public close(): Promise { return this.sidenav.close(); } diff --git a/src/platform/core/layout/layout.module.ts b/src/platform/core/layout/layout.module.ts index ecc15c22bd..ca080b8f8d 100644 --- a/src/platform/core/layout/layout.module.ts +++ b/src/platform/core/layout/layout.module.ts @@ -3,7 +3,7 @@ import { NgModule, ModuleWithProviders } from '@angular/core'; import { CommonModule } from '@angular/common'; import { ScrollDispatchModule } from '@angular/cdk/scrolling'; -import { MdSidenavModule, MdToolbarModule, MdButtonModule, MdIconModule, MdCardModule, MdListModule } from '@angular/material'; +import { MatSidenavModule, MatToolbarModule, MatButtonModule, MatIconModule, MatCardModule, MatListModule } from '@angular/material'; import { TdLayoutComponent } from './layout.component'; import { TdLayoutToggleDirective, TdLayoutCloseDirective, TdLayoutOpenDirective } from './layout.directives'; @@ -60,12 +60,12 @@ export { TdLayoutComponent, TdLayoutToggleDirective, TdLayoutCloseDirective, TdL imports: [ CommonModule, ScrollDispatchModule, - MdSidenavModule, - MdToolbarModule, - MdButtonModule, - MdIconModule, - MdCardModule, - MdListModule, + MatSidenavModule, + MatToolbarModule, + MatButtonModule, + MatIconModule, + MatCardModule, + MatListModule, ], declarations: [ TD_LAYOUTS, diff --git a/src/platform/core/layout/navigation-drawer/navigation-drawer.component.html b/src/platform/core/layout/navigation-drawer/navigation-drawer.component.html index 086ac9945a..8ac239308c 100644 --- a/src/platform/core/layout/navigation-drawer/navigation-drawer.component.html +++ b/src/platform/core/layout/navigation-drawer/navigation-drawer.component.html @@ -1,4 +1,4 @@ - +
    @@ -7,21 +7,21 @@ (click)="handleNavigationClick()" layout="row" layout-align="start center"> - {{icon}} - + {{icon}} + {{sidenavTitle}}
    {{name}}
    {{email || name}} -
    -     +
    diff --git a/src/platform/core/layout/navigation-drawer/navigation-drawer.component.scss b/src/platform/core/layout/navigation-drawer/navigation-drawer.component.scss index 5fe99e91d2..b250a8c636 100644 --- a/src/platform/core/layout/navigation-drawer/navigation-drawer.component.scss +++ b/src/platform/core/layout/navigation-drawer/navigation-drawer.component.scss @@ -1,12 +1,12 @@ :host { width: 100%; - md-toolbar { + mat-toolbar { padding: 16px; &.td-toolbar-background { background-repeat: no-repeat; background-size: cover; } - /deep/ > .mat-toolbar-layout > md-toolbar-row { + /deep/ > .mat-toolbar-layout > mat-toolbar-row { height: auto !important; display: block !important; } diff --git a/src/platform/core/layout/navigation-drawer/navigation-drawer.component.ts b/src/platform/core/layout/navigation-drawer/navigation-drawer.component.ts index 84024bbad9..52c8cd8b8e 100644 --- a/src/platform/core/layout/navigation-drawer/navigation-drawer.component.ts +++ b/src/platform/core/layout/navigation-drawer/navigation-drawer.component.ts @@ -4,7 +4,7 @@ import { Router } from '@angular/router'; import { SafeResourceUrl, SafeStyle, DomSanitizer } from '@angular/platform-browser'; import { Subscription } from 'rxjs/Subscription'; -import { MdDrawerToggleResult } from '@angular/material'; +import { MatDrawerToggleResult } from '@angular/material'; import { TdLayoutComponent } from '../layout.component'; @@ -176,21 +176,21 @@ export class TdNavigationDrawerComponent implements OnInit, OnDestroy { /** * Proxy toggle method to access sidenav from outside (from td-layout template). */ - public toggle(): Promise { + public toggle(): Promise { return this._layout.toggle(); } /** * Proxy open method to access sidenav from outside (from td-layout template). */ - public open(): Promise { + public open(): Promise { return this._layout.open(); } /** * Proxy close method to access sidenav from outside (from td-layout template). */ - public close(): Promise { + public close(): Promise { return this._layout.close(); } } diff --git a/src/platform/core/loading/directives/loading.directive.spec.ts b/src/platform/core/loading/directives/loading.directive.spec.ts index cb8fa63ee5..53d8d77550 100644 --- a/src/platform/core/loading/directives/loading.directive.spec.ts +++ b/src/platform/core/loading/directives/loading.directive.spec.ts @@ -12,6 +12,7 @@ import { By } from '@angular/platform-browser'; import { CovalentLoadingModule, LoadingMode, LoadingType, LoadingStrategy, TdLoadingService } from '../loading.module'; import { of } from 'rxjs/observable/of'; import { _catch } from 'rxjs/operator/catch'; +import { MATERIAL_COMPATIBILITY_MODE } from '@angular/material'; describe('Directive: Loading', () => { @@ -29,6 +30,9 @@ describe('Directive: Loading', () => { NoopAnimationsModule, CovalentLoadingModule, ], + providers: [ + {provide: MATERIAL_COMPATIBILITY_MODE, useValue: true}, + ], }); TestBed.compileComponents(); })); @@ -43,7 +47,7 @@ describe('Directive: Loading', () => { fixture.detectChanges(); fixture.whenStable().then(() => { expect(fixture.debugElement.query(By.css('td-loading'))).toBeTruthy(); - expect(fixture.debugElement.query(By.css('md-progress-spinner'))).toBeTruthy(); + expect(fixture.debugElement.query(By.css('mat-progress-spinner'))).toBeTruthy(); expect(fixture.debugElement.query(By.css('.mat-primary'))).toBeTruthy(); expect(fixture.debugElement.query(By.css('.td-overlay'))).toBeFalsy(); expect(fixture.debugElement.query(By.css('.td-fullscreen'))).toBeFalsy(); @@ -73,7 +77,7 @@ describe('Directive: Loading', () => { fixture.detectChanges(); fixture.whenStable().then(() => { expect(fixture.debugElement.query(By.css('td-loading'))).toBeTruthy(); - expect(fixture.debugElement.query(By.css('md-progress-bar'))).toBeTruthy(); + expect(fixture.debugElement.query(By.css('mat-progress-bar'))).toBeTruthy(); expect(fixture.debugElement.query(By.css('.mat-accent'))).toBeTruthy(); expect(fixture.debugElement.query(By.css('.td-overlay'))).toBeFalsy(); expect(fixture.debugElement.query(By.css('.td-fullscreen'))).toBeFalsy(); @@ -108,7 +112,7 @@ describe('Directive: Loading', () => { fixture.detectChanges(); fixture.whenStable().then(() => { expect(fixture.debugElement.query(By.css('td-loading'))).toBeTruthy(); - expect(fixture.debugElement.query(By.css('md-progress-spinner'))).toBeTruthy(); + expect(fixture.debugElement.query(By.css('mat-progress-spinner'))).toBeTruthy(); expect(fixture.debugElement.query(By.css('.mat-warn'))).toBeTruthy(); expect(fixture.debugElement.query(By.css('.td-overlay'))).toBeTruthy(); expect(fixture.debugElement.query(By.css('.td-fullscreen'))).toBeFalsy(); @@ -155,7 +159,7 @@ describe('Directive: Loading', () => { fixture.detectChanges(); fixture.whenStable().then(() => { expect(fixture.debugElement.query(By.css('td-loading'))).toBeTruthy(); - expect(fixture.debugElement.query(By.css('md-progress-bar'))).toBeTruthy(); + expect(fixture.debugElement.query(By.css('mat-progress-bar'))).toBeTruthy(); expect(fixture.debugElement.query(By.css('.mat-primary'))).toBeTruthy(); expect(fixture.debugElement.query(By.css('.td-overlay'))).toBeTruthy(); expect(fixture.debugElement.query(By.css('.td-fullscreen'))).toBeFalsy(); @@ -169,17 +173,17 @@ describe('Directive: Loading', () => { loadingService.setValue('name', 20); fixture.detectChanges(); - expect(fixture.debugElement.query(By.css('md-progress-bar')).componentInstance._primaryTransform()) + expect(fixture.debugElement.query(By.css('mat-progress-bar')).componentInstance._primaryTransform()) .toEqual({transform: 'scaleX(0.2)'}); loadingService.setValue('name', 50); fixture.detectChanges(); - expect(fixture.debugElement.query(By.css('md-progress-bar')).componentInstance._primaryTransform()) + expect(fixture.debugElement.query(By.css('mat-progress-bar')).componentInstance._primaryTransform()) .toEqual({transform: 'scaleX(0.5)'}); loadingService.setValue('name', 100); fixture.detectChanges(); - expect(fixture.debugElement.query(By.css('md-progress-bar')).componentInstance._primaryTransform()) + expect(fixture.debugElement.query(By.css('mat-progress-bar')).componentInstance._primaryTransform()) .toEqual({transform: 'scaleX(1)'}); loadingService.resolve('name'); @@ -232,7 +236,7 @@ describe('Directive: Loading', () => { fixture.whenStable().then(() => { fixture.detectChanges(); expect(fixture.debugElement.query(By.css('td-loading'))).toBeTruthy(); - expect(fixture.debugElement.query(By.css('md-progress-spinner'))).toBeTruthy(); + expect(fixture.debugElement.query(By.css('mat-progress-spinner'))).toBeTruthy(); expect(fixture.debugElement.query(By.css('.mat-accent'))).toBeTruthy(); expect(fixture.debugElement.query(By.css('.content'))).toBeFalsy(); component.sendResult('success'); @@ -259,7 +263,7 @@ describe('Directive: Loading', () => { fixture.whenStable().then(() => { fixture.detectChanges(); expect(fixture.debugElement.query(By.css('td-loading'))).toBeTruthy(); - expect(fixture.debugElement.query(By.css('md-progress-spinner'))).toBeTruthy(); + expect(fixture.debugElement.query(By.css('mat-progress-spinner'))).toBeTruthy(); expect(fixture.debugElement.query(By.css('.mat-primary'))).toBeTruthy(); expect(fixture.debugElement.query(By.css('.content'))).toBeFalsy(); component.sendError('error'); @@ -286,7 +290,7 @@ describe('Directive: Loading', () => { fixture.whenStable().then(() => { fixture.detectChanges(); expect(fixture.debugElement.query(By.css('td-loading'))).toBeTruthy(); - expect(fixture.debugElement.query(By.css('md-progress-spinner'))).toBeTruthy(); + expect(fixture.debugElement.query(By.css('mat-progress-spinner'))).toBeTruthy(); expect(fixture.debugElement.query(By.css('.mat-primary'))).toBeTruthy(); expect(fixture.debugElement.query(By.css('.content'))).toBeFalsy(); component.loading = false; diff --git a/src/platform/core/loading/loading.component.html b/src/platform/core/loading/loading.component.html index 20e4916f63..6299e3bbcb 100644 --- a/src/platform/core/loading/loading.component.html +++ b/src/platform/core/loading/loading.component.html @@ -6,18 +6,18 @@ layout="row" layout-align="center center" flex> - - - + - +
    \ No newline at end of file diff --git a/src/platform/core/loading/loading.component.scss b/src/platform/core/loading/loading.component.scss index cf3f312441..95d4c19ac9 100644 --- a/src/platform/core/loading/loading.component.scss +++ b/src/platform/core/loading/loading.component.scss @@ -13,7 +13,7 @@ right: 0; bottom: 0; z-index: 1000; - md-progress-bar { + mat-progress-bar { position: absolute; top: 0; left: 0; diff --git a/src/platform/core/loading/loading.component.ts b/src/platform/core/loading/loading.component.ts index 655ff0c3c1..2f328bfa8d 100644 --- a/src/platform/core/loading/loading.component.ts +++ b/src/platform/core/loading/loading.component.ts @@ -177,7 +177,7 @@ export class TdLoadingComponent { startOutAnimation(): Observable { this.animation = false; /* need to switch back and forth from determinate/indeterminate so the setInterval() - * inside md-progress-spinner stops and protractor doesnt timeout waiting to sync. + * inside mat-progress-spinner stops and protractor doesnt timeout waiting to sync. */ this._mode = LoadingMode.Determinate; // Check for changes for `OnPush` change detection diff --git a/src/platform/core/loading/loading.module.ts b/src/platform/core/loading/loading.module.ts index c3e99f4719..4e63f543e8 100644 --- a/src/platform/core/loading/loading.module.ts +++ b/src/platform/core/loading/loading.module.ts @@ -4,7 +4,7 @@ import { NgModule, ModuleWithProviders } from '@angular/core'; import { CommonModule } from '@angular/common'; import { PortalModule } from '@angular/cdk/portal'; import { OverlayModule } from '@angular/cdk/overlay'; -import { MdProgressBarModule, MdProgressSpinnerModule } from '@angular/material'; +import { MatProgressBarModule, MatProgressSpinnerModule } from '@angular/material'; import { TdLoadingService, LOADING_PROVIDER } from './services/loading.service'; import { TdLoadingFactory, LOADING_FACTORY_PROVIDER } from './services/loading.factory'; @@ -26,8 +26,8 @@ export { TdLoadingService, ITdLoadingConfig } from './services/loading.service'; @NgModule({ imports: [ CommonModule, - MdProgressBarModule, - MdProgressSpinnerModule, + MatProgressBarModule, + MatProgressSpinnerModule, OverlayModule, PortalModule, ], diff --git a/src/platform/core/loading/services/loading.factory.ts b/src/platform/core/loading/services/loading.factory.ts index f3aa835460..1d67481353 100644 --- a/src/platform/core/loading/services/loading.factory.ts +++ b/src/platform/core/loading/services/loading.factory.ts @@ -1,7 +1,7 @@ import { Injectable, ComponentFactoryResolver, ChangeDetectorRef, Provider, SkipSelf, Optional } from '@angular/core'; import { Injector, ComponentRef, ViewContainerRef, TemplateRef } from '@angular/core'; import { TemplatePortal, ComponentPortal } from '@angular/cdk/portal'; -import { Overlay, OverlayState, OverlayRef, OverlayOrigin } from '@angular/cdk/overlay'; +import { Overlay, OverlayConfig, OverlayRef, OverlayOrigin } from '@angular/cdk/overlay'; import { Subject } from 'rxjs/Subject'; import { Observable } from 'rxjs/Observable'; import { Subscription } from 'rxjs/Subscription'; @@ -144,7 +144,7 @@ export class TdLoadingFactory { * Creates a fullscreen overlay for the loading usage. */ private _createOverlay(): OverlayRef { - let state: OverlayState = new OverlayState(); + let state: OverlayConfig = new OverlayConfig(); state.hasBackdrop = false; state.positionStrategy = this._overlay.position().global().centerHorizontally().centerVertically(); return this._overlay.create(state); diff --git a/src/platform/core/loading/services/loading.service.spec.ts b/src/platform/core/loading/services/loading.service.spec.ts index 16987dcab5..6c2a973663 100644 --- a/src/platform/core/loading/services/loading.service.spec.ts +++ b/src/platform/core/loading/services/loading.service.spec.ts @@ -9,6 +9,7 @@ import { OverlayContainer } from '@angular/cdk/overlay'; import { NoopAnimationsModule } from '@angular/platform-browser/animations'; import { By } from '@angular/platform-browser'; import { CovalentLoadingModule, LoadingMode, LoadingType, LoadingStrategy, TdLoadingService } from '../loading.module'; +import { MATERIAL_COMPATIBILITY_MODE } from '@angular/material'; describe('Service: Loading', () => { let overlayContainerElement: HTMLElement; @@ -23,6 +24,7 @@ describe('Service: Loading', () => { CovalentLoadingModule, ], providers: [ + {provide: MATERIAL_COMPATIBILITY_MODE, useValue: true}, {provide: OverlayContainer, useFactory: () => { overlayContainerElement = document.createElement('div'); return {getContainerElement: () => overlayContainerElement}; @@ -45,7 +47,7 @@ describe('Service: Loading', () => { fixture.detectChanges(); fixture.whenStable().then(() => { expect(overlayContainerElement.querySelector('td-loading')).toBeTruthy(); - expect(overlayContainerElement.querySelector('md-progress-spinner')).toBeTruthy(); + expect(overlayContainerElement.querySelector('mat-progress-spinner')).toBeTruthy(); expect(overlayContainerElement.querySelector('.mat-primary')).toBeTruthy(); expect(overlayContainerElement.querySelector('.td-overlay')).toBeTruthy(); expect(overlayContainerElement.querySelector('.td-fullscreen')).toBeTruthy(); @@ -73,7 +75,7 @@ describe('Service: Loading', () => { fixture.detectChanges(); fixture.whenStable().then(() => { expect(overlayContainerElement.querySelector('td-loading')).toBeTruthy(); - expect(overlayContainerElement.querySelector('md-progress-bar')).toBeTruthy(); + expect(overlayContainerElement.querySelector('mat-progress-bar')).toBeTruthy(); expect(overlayContainerElement.querySelector('.mat-accent')).toBeTruthy(); expect(overlayContainerElement.querySelector('.td-overlay')).toBeTruthy(); expect(overlayContainerElement.querySelector('.td-fullscreen')).toBeTruthy(); @@ -101,7 +103,7 @@ describe('Service: Loading', () => { fixture.detectChanges(); fixture.whenStable().then(() => { expect(overlayContainerElement.querySelector('td-loading')).toBeTruthy(); - expect(overlayContainerElement.querySelector('md-progress-bar')).toBeTruthy(); + expect(overlayContainerElement.querySelector('mat-progress-bar')).toBeTruthy(); expect(overlayContainerElement.querySelector('.mat-accent')).toBeTruthy(); expect(overlayContainerElement.querySelector('.td-overlay')).toBeTruthy(); expect(overlayContainerElement.querySelector('.td-fullscreen')).toBeTruthy(); @@ -172,7 +174,7 @@ describe('Service: Loading', () => { fixture.detectChanges(); fixture.whenStable().then(() => { expect(overlayContainerElement.querySelector('td-loading')).toBeTruthy(); - expect(overlayContainerElement.querySelector('md-progress-spinner')).toBeTruthy(); + expect(overlayContainerElement.querySelector('mat-progress-spinner')).toBeTruthy(); expect(overlayContainerElement.querySelector('.mat-primary')).toBeTruthy(); expect(overlayContainerElement.querySelector('.td-overlay')).toBeTruthy(); expect(overlayContainerElement.querySelector('.td-fullscreen')).toBeTruthy(); diff --git a/src/platform/core/menu/menu.component.html b/src/platform/core/menu/menu.component.html index f9e624038e..ede2b02640 100644 --- a/src/platform/core/menu/menu.component.html +++ b/src/platform/core/menu/menu.component.html @@ -1,9 +1,9 @@
    - +
    - +
    \ No newline at end of file diff --git a/src/platform/core/menu/menu.component.scss b/src/platform/core/menu/menu.component.scss index fd6aeb4a05..161e3ffe0c 100644 --- a/src/platform/core/menu/menu.component.scss +++ b/src/platform/core/menu/menu.component.scss @@ -9,12 +9,12 @@ $td-menu-spacing: 8px !default; padding: $td-menu-spacing; text-align: center; } - md-list, - md-list[dense], - md-nav-list, - md-nav-list[dense], { - a[md-list-item].mat-2-line .mat-list-item-content, - md-list-item.mat-2-line .mat-list-item-content { + mat-list, + mat-list[dense], + mat-nav-list, + mat-nav-list[dense], { + a[mat-list-item].mat-2-line .mat-list-item-content, + mat-list-item.mat-2-line .mat-list-item-content { height: auto; padding: $td-menu-spacing; .mat-list-text { @@ -24,7 +24,7 @@ $td-menu-spacing: 8px !default; padding-right: 16px; } } - [mdLine] + [mdLine] { + [matLine] + [matLine] { margin-top: $td-menu-spacing / 2; } } diff --git a/src/platform/core/menu/menu.module.ts b/src/platform/core/menu/menu.module.ts index 5cfc6edfe8..36e6fc3f19 100644 --- a/src/platform/core/menu/menu.module.ts +++ b/src/platform/core/menu/menu.module.ts @@ -2,7 +2,7 @@ import { Type } from '@angular/core'; import { NgModule, ModuleWithProviders } from '@angular/core'; import { CommonModule } from '@angular/common'; -import { MdMenuModule, MdListModule } from '@angular/material'; +import { MatMenuModule, MatListModule } from '@angular/material'; import { TdMenuComponent } from './menu.component'; @@ -15,8 +15,8 @@ export { TdMenuComponent } from './menu.component'; @NgModule({ imports: [ CommonModule, - MdMenuModule, - MdListModule, + MatMenuModule, + MatListModule, ], declarations: [ TD_MENU, diff --git a/src/platform/core/message/README.md b/src/platform/core/message/README.md index ade9963545..ca964ed003 100644 --- a/src/platform/core/message/README.md +++ b/src/platform/core/message/README.md @@ -42,8 +42,8 @@ Example for HTML usage: ```html - - + + // .. body goes here ``` diff --git a/src/platform/core/message/message.component.html b/src/platform/core/message/message.component.html index faf1393ce5..e4fc4e0abc 100644 --- a/src/platform/core/message/message.component.html +++ b/src/platform/core/message/message.component.html @@ -2,7 +2,7 @@
    - {{icon}} + {{icon}}
    {{label}}
    {{sublabel}}
    diff --git a/src/platform/core/message/message.component.spec.ts b/src/platform/core/message/message.component.spec.ts index 18f984c5e4..3d5153aef9 100644 --- a/src/platform/core/message/message.component.spec.ts +++ b/src/platform/core/message/message.component.spec.ts @@ -11,6 +11,7 @@ import { TdMessageComponent } from './message.component'; import { CovalentMessageModule } from './message.module'; import { NgModule, DebugElement } from '@angular/core'; import { NoopAnimationsModule } from '@angular/platform-browser/animations'; +import { MATERIAL_COMPATIBILITY_MODE } from '@angular/material'; describe('Component: Message', () => { @@ -25,6 +26,9 @@ describe('Component: Message', () => { TdMessageContentTestComponent, TdMessageOpenedTestComponent, ], + providers: [ + {provide: MATERIAL_COMPATIBILITY_MODE, useValue: true}, + ], }); TestBed.compileComponents(); })); diff --git a/src/platform/core/message/message.module.ts b/src/platform/core/message/message.module.ts index 62a88d182a..967a67225d 100644 --- a/src/platform/core/message/message.module.ts +++ b/src/platform/core/message/message.module.ts @@ -2,7 +2,7 @@ import { Type } from '@angular/core'; import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; -import { MdIconModule } from '@angular/material'; +import { MatIconModule } from '@angular/material'; import { TdMessageComponent, TdMessageContainerDirective } from './message.component'; @@ -16,7 +16,7 @@ export { TdMessageComponent } from './message.component'; @NgModule({ imports: [ CommonModule, - MdIconModule, + MatIconModule, ], declarations: [ TD_MESSAGE, diff --git a/src/platform/core/notifications/README.md b/src/platform/core/notifications/README.md index 4684526ede..a59427fbb0 100644 --- a/src/platform/core/notifications/README.md +++ b/src/platform/core/notifications/README.md @@ -35,7 +35,7 @@ Example for HTML count usage: ```html - notifications + notifications ``` @@ -43,7 +43,7 @@ Example for HTML count usage: ```html - notifications + notifications ``` diff --git a/src/platform/core/notifications/notification-count.component.spec.ts b/src/platform/core/notifications/notification-count.component.spec.ts index c3b127fd0e..ac92d3bd6a 100644 --- a/src/platform/core/notifications/notification-count.component.spec.ts +++ b/src/platform/core/notifications/notification-count.component.spec.ts @@ -5,10 +5,11 @@ import { ComponentFixture, } from '@angular/core/testing'; import { Component } from '@angular/core'; -import { MdIconModule } from '@angular/material'; +import { MatIconModule } from '@angular/material'; import { CovalentNotificationsModule, TdNotificationCountPositionX, TdNotificationCountPositionY } from './notifications.module'; import { By } from '@angular/platform-browser'; +import { MATERIAL_COMPATIBILITY_MODE } from '@angular/material'; describe('Component: NotificationCount', () => { @@ -21,9 +22,12 @@ describe('Component: NotificationCount', () => { TdNotificationCountPositionContentTestComponent, ], imports: [ - MdIconModule, + MatIconModule, CovalentNotificationsModule, ], + providers: [ + {provide: MATERIAL_COMPATIBILITY_MODE, useValue: true}, + ], }); TestBed.compileComponents(); })); @@ -122,7 +126,7 @@ describe('Component: NotificationCount', () => { fixture.whenStable().then(() => { expect(fixture.debugElement.query(By.css('.td-notification-content'))).toBeTruthy(); - expect(fixture.debugElement.query(By.css('md-icon'))).toBeTruthy(); + expect(fixture.debugElement.query(By.css('mat-icon'))).toBeTruthy(); }); }))); @@ -188,7 +192,7 @@ class TdNotificationCountBasicTestComponent { selector: 'td-notification-count-content-test', template: ` - notifications + notifications `, }) @@ -214,7 +218,7 @@ class TdNotificationCountPositionTestComponent { selector: 'td-notification-count-position-content-test', template: ` - notifications + notifications `, }) diff --git a/src/platform/core/paging/README.md b/src/platform/core/paging/README.md index dff40adba5..8dcf9e8519 100644 --- a/src/platform/core/paging/README.md +++ b/src/platform/core/paging/README.md @@ -67,11 +67,11 @@ Example with material select for dynamic page sizes: [total]="1345" (change)="change($event)"> Rows per page: - - + + {{size}} - - + + {{pagingBar.range}} of {{pagingBar.total}} ``` @@ -84,16 +84,16 @@ Example with material input for navigation: [total]="1345" (change)="change($event)">

    Go to:

    - + - + {{pagingBar.range}} of {{pagingBar.total}} @@ -109,22 +109,22 @@ Example with dynamic page sizes, input and page links for navigation: [total]="1345" (change)="change($event)"> Rows per page: - - + + {{size}} - - + +

    Go to:

    - + - + {{pagingBar.range}} of {{pagingBar.total}} ``` diff --git a/src/platform/core/paging/_paging-bar-theme.scss b/src/platform/core/paging/_paging-bar-theme.scss index 483c0c1f31..cab8b30eb2 100644 --- a/src/platform/core/paging/_paging-bar-theme.scss +++ b/src/platform/core/paging/_paging-bar-theme.scss @@ -8,7 +8,7 @@ $foreground: map-get($theme, foreground); td-paging-bar { - &, & md-select .mat-select-value { + &, & mat-select .mat-select-value { color: mat-color($foreground, secondary-text); } } diff --git a/src/platform/core/paging/paging-bar.component.html b/src/platform/core/paging/paging-bar.component.html index 71e08b4e6a..c4bff45159 100644 --- a/src/platform/core/paging/paging-bar.component.html +++ b/src/platform/core/paging/paging-bar.component.html @@ -1,20 +1,20 @@
    - - - + - -
    \ No newline at end of file diff --git a/src/platform/core/paging/paging-bar.component.scss b/src/platform/core/paging/paging-bar.component.scss index 4fee42c30d..8b5955636b 100644 --- a/src/platform/core/paging/paging-bar.component.scss +++ b/src/platform/core/paging/paging-bar.component.scss @@ -5,22 +5,22 @@ /deep/ > * { margin: 0 10px; } - } - [md-icon-button] { - font-size: 12px; - font-weight: normal; - } - /deep/ md-select { - &.mat-select { - padding-top: 0px; + [mat-icon-button] { + font-size: 12px; + font-weight: normal; } - & { - .mat-select-trigger { - min-width: 44px; - font-size: 12px; + /deep/ mat-select { + &.mat-select { + padding-top: 0px; } - .mat-select-underline { - display: none; + & { + .mat-select-trigger { + min-width: 44px; + font-size: 12px; + } + .mat-select-underline { + display: none; + } } } } diff --git a/src/platform/core/paging/paging-bar.component.spec.ts b/src/platform/core/paging/paging-bar.component.spec.ts index a4166570dd..9f819decbf 100644 --- a/src/platform/core/paging/paging-bar.component.spec.ts +++ b/src/platform/core/paging/paging-bar.component.spec.ts @@ -9,9 +9,10 @@ import { Component } from '@angular/core'; import { By } from '@angular/platform-browser'; import { TdPagingBarComponent } from './paging-bar.component'; import { CovalentPagingModule } from './paging.module'; -import { MdInputModule } from '@angular/material'; +import { MatInputModule } from '@angular/material'; import { NgModule, DebugElement } from '@angular/core'; import { NoopAnimationsModule } from '@angular/platform-browser/animations'; +import { MATERIAL_COMPATIBILITY_MODE } from '@angular/material'; describe('Component: PagingBar', () => { @@ -19,7 +20,7 @@ describe('Component: PagingBar', () => { TestBed.configureTestingModule({ imports: [ NoopAnimationsModule, - MdInputModule, + MatInputModule, CovalentPagingModule, ], declarations: [ @@ -29,6 +30,9 @@ describe('Component: PagingBar', () => { TestPageLinkCountComponent, TestGoToComponent, ], + providers: [ + {provide: MATERIAL_COMPATIBILITY_MODE, useValue: true}, + ], }); TestBed.compileComponents(); })); @@ -242,16 +246,16 @@ class TestPageLinkCountComponent { template: `

    Go to:

    - + - +     `, }) diff --git a/src/platform/core/paging/paging.module.ts b/src/platform/core/paging/paging.module.ts index 9fd3208475..14aeb13adf 100644 --- a/src/platform/core/paging/paging.module.ts +++ b/src/platform/core/paging/paging.module.ts @@ -2,7 +2,7 @@ import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; -import { MdIconModule, MdButtonModule } from '@angular/material'; +import { MatIconModule, MatButtonModule } from '@angular/material'; import { TdPagingBarComponent } from './paging-bar.component'; @@ -11,8 +11,8 @@ export { TdPagingBarComponent, IPageChangeEvent } from './paging-bar.component'; @NgModule({ imports: [ CommonModule, - MdIconModule, - MdButtonModule, + MatIconModule, + MatButtonModule, ], declarations: [ TdPagingBarComponent, diff --git a/src/platform/core/search/search-box/search-box.component.html b/src/platform/core/search/search-box/search-box.component.html index 018168f366..023b347659 100644 --- a/src/platform/core/search/search-box/search-box.component.html +++ b/src/platform/core/search/search-box/search-box.component.html @@ -1,7 +1,7 @@
    - - - + - -
    \ No newline at end of file diff --git a/src/platform/core/search/search-input/search-input.component.scss b/src/platform/core/search/search-input/search-input.component.scss index 480a1c4c19..6d402a1e28 100644 --- a/src/platform/core/search/search-input/search-input.component.scss +++ b/src/platform/core/search/search-input/search-input.component.scss @@ -1,6 +1,6 @@ .td-search-input { overflow-x: hidden; - /deep/ md-form-field.mat-hide-underline { + /deep/ mat-form-field.mat-hide-underline { .mat-form-field-underline { display: none; } diff --git a/src/platform/core/search/search-input/search-input.component.ts b/src/platform/core/search/search-input/search-input.component.ts index 27250d577e..24175c7527 100644 --- a/src/platform/core/search/search-input/search-input.component.ts +++ b/src/platform/core/search/search-input/search-input.component.ts @@ -2,7 +2,7 @@ import { Component, ViewChild, OnInit, Input, Output, EventEmitter, Optional } f import { trigger, state, style, transition, animate } from '@angular/animations'; import { FormControl } from '@angular/forms'; import { Dir } from '@angular/cdk/bidi'; -import { MdInput } from '@angular/material'; +import { MatInput } from '@angular/material'; import { debounceTime } from 'rxjs/operator/debounceTime'; import { skip } from 'rxjs/operator/skip'; @@ -31,7 +31,7 @@ import { skip } from 'rxjs/operator/skip'; }) export class TdSearchInputComponent implements OnInit { - @ViewChild(MdInput) _input: MdInput; + @ViewChild(MatInput) _input: MatInput; value: string; diff --git a/src/platform/core/search/search.module.ts b/src/platform/core/search/search.module.ts index 400d2868ae..4206893cb8 100644 --- a/src/platform/core/search/search.module.ts +++ b/src/platform/core/search/search.module.ts @@ -3,7 +3,7 @@ import { NgModule, ModuleWithProviders } from '@angular/core'; import { CommonModule } from '@angular/common'; import { FormsModule } from '@angular/forms'; -import { MdInputModule, MdIconModule, MdButtonModule } from '@angular/material'; +import { MatInputModule, MatIconModule, MatButtonModule } from '@angular/material'; import { TdSearchInputComponent } from './search-input/search-input.component'; import { TdSearchBoxComponent } from './search-box/search-box.component'; @@ -15,9 +15,9 @@ export { TdSearchInputComponent } from './search-input/search-input.component'; imports: [ FormsModule, CommonModule, - MdInputModule, - MdIconModule, - MdButtonModule, + MatInputModule, + MatIconModule, + MatButtonModule, ], declarations: [ TdSearchInputComponent, diff --git a/src/platform/core/steps/_steps-theme.scss b/src/platform/core/steps/_steps-theme.scss index 6f4213286b..f9d60699f9 100644 --- a/src/platform/core/steps/_steps-theme.scss +++ b/src/platform/core/steps/_steps-theme.scss @@ -56,7 +56,7 @@ &.mat-inactive { background-color: mat-color($foreground, disabled); } - & md-icon { + & mat-icon { fill: mat-color($foreground, text); } } diff --git a/src/platform/core/steps/step-header/step-header.component.html b/src/platform/core/steps/step-header/step-header.component.html index e996a06e20..84753f4969 100644 --- a/src/platform/core/steps/step-header/step-header.component.html +++ b/src/platform/core/steps/step-header/step-header.component.html @@ -1,7 +1,7 @@
    {{number || ''}}
    - check_circle + check_circle
    - warning + warning
    - mode_edit + mode_edit
    \ No newline at end of file diff --git a/src/platform/core/steps/step-header/step-header.component.scss b/src/platform/core/steps/step-header/step-header.component.scss index cf8c6f155e..699bfe2d11 100644 --- a/src/platform/core/steps/step-header/step-header.component.scss +++ b/src/platform/core/steps/step-header/step-header.component.scss @@ -9,10 +9,10 @@ $step-circle: 24px; .td-step-header-content { height: 72px; } - md-icon.td-edit-icon { + mat-icon.td-edit-icon { margin: 0 8px; } - md-icon { + mat-icon { &.mat-warn { font-size: $step-circle; height: $step-circle; @@ -34,13 +34,13 @@ $step-circle: 24px; border-radius: 99%; text-align: center; flex: none; - & md-icon { + & mat-icon { margin-top: 2px; font-weight: bold; } } .td-triangle { - & > md-icon { + & > mat-icon { font-size: 25px; } } diff --git a/src/platform/core/steps/steps.component.spec.ts b/src/platform/core/steps/steps.component.spec.ts index 572a94459c..6026a75037 100644 --- a/src/platform/core/steps/steps.component.spec.ts +++ b/src/platform/core/steps/steps.component.spec.ts @@ -8,6 +8,7 @@ import { Component, DebugElement } from '@angular/core'; import { NoopAnimationsModule } from '@angular/platform-browser/animations'; import { By } from '@angular/platform-browser'; import { CovalentStepsModule, StepState, StepMode } from './steps.module'; +import { MATERIAL_COMPATIBILITY_MODE } from '@angular/material'; describe('Component: Steps', () => { @@ -22,6 +23,9 @@ describe('Component: Steps', () => { NoopAnimationsModule, CovalentStepsModule, ], + providers: [ + {provide: MATERIAL_COMPATIBILITY_MODE, useValue: true}, + ], }); TestBed.compileComponents(); })); diff --git a/src/platform/core/steps/steps.module.ts b/src/platform/core/steps/steps.module.ts index 34430b1245..a04917397a 100644 --- a/src/platform/core/steps/steps.module.ts +++ b/src/platform/core/steps/steps.module.ts @@ -5,7 +5,7 @@ import { CommonModule } from '@angular/common'; import { PortalModule } from '@angular/cdk/portal'; import { ScrollDispatchModule } from '@angular/cdk/scrolling'; -import { MdIconModule, MdRippleModule } from '@angular/material'; +import { MatIconModule, MatRippleModule } from '@angular/material'; import { CovalentCommonModule } from '../common/common.module'; @@ -32,8 +32,8 @@ export { TdStepsComponent, IStepChangeEvent, StepMode } from './steps.component' @NgModule({ imports: [ CommonModule, - MdIconModule, - MdRippleModule, + MatIconModule, + MatRippleModule, PortalModule, ScrollDispatchModule, CovalentCommonModule, diff --git a/src/platform/core/virtual-scroll/virtual-scroll-container.component.spec.ts b/src/platform/core/virtual-scroll/virtual-scroll-container.component.spec.ts index ef21ce5f44..1731715080 100644 --- a/src/platform/core/virtual-scroll/virtual-scroll-container.component.spec.ts +++ b/src/platform/core/virtual-scroll/virtual-scroll-container.component.spec.ts @@ -9,9 +9,10 @@ import { Component } from '@angular/core'; import { By } from '@angular/platform-browser'; import { TdVirtualScrollContainerComponent } from './virtual-scroll-container.component'; import { CovalentVirtualScrollModule } from './virtual-scroll.module'; -import { MdListModule } from '@angular/material'; +import { MatListModule } from '@angular/material'; import { NgModule, DebugElement } from '@angular/core'; import { NoopAnimationsModule } from '@angular/platform-browser/animations'; +import { MATERIAL_COMPATIBILITY_MODE } from '@angular/material'; describe('Component: VirtualScrollContainer', () => { @@ -19,12 +20,15 @@ describe('Component: VirtualScrollContainer', () => { TestBed.configureTestingModule({ imports: [ NoopAnimationsModule, - MdListModule, + MatListModule, CovalentVirtualScrollModule, ], declarations: [ TestBasicVirtualScrollComponent, ], + providers: [ + {provide: MATERIAL_COMPATIBILITY_MODE, useValue: true}, + ], }); TestBed.compileComponents(); })); @@ -111,16 +115,16 @@ describe('Component: VirtualScrollContainer', () => { @Component({ template: ` - + - -

    {{row}}

    -     - + +

    {{row}}

    +     +     -     `, + `, }) class TestBasicVirtualScrollComponent { height: number = 200; diff --git a/src/platform/dynamic-forms/dynamic-elements/dynamic-checkbox/dynamic-checkbox.component.html b/src/platform/dynamic-forms/dynamic-elements/dynamic-checkbox/dynamic-checkbox.component.html index f564075984..9d6847e59d 100644 --- a/src/platform/dynamic-forms/dynamic-elements/dynamic-checkbox/dynamic-checkbox.component.html +++ b/src/platform/dynamic-forms/dynamic-elements/dynamic-checkbox/dynamic-checkbox.component.html @@ -1,7 +1,7 @@
    - {{label}} - +
    \ No newline at end of file diff --git a/src/platform/dynamic-forms/dynamic-elements/dynamic-file-input/dynamic-file-input.component.html b/src/platform/dynamic-forms/dynamic-elements/dynamic-file-input/dynamic-file-input.component.html index 5d620860ed..0ade1c3058 100644 --- a/src/platform/dynamic-forms/dynamic-elements/dynamic-file-input/dynamic-file-input.component.html +++ b/src/platform/dynamic-forms/dynamic-elements/dynamic-file-input/dynamic-file-input.component.html @@ -1,5 +1,5 @@
    - - - - - folder + folder {{ label }}
    \ No newline at end of file diff --git a/src/platform/dynamic-forms/dynamic-elements/dynamic-input/dynamic-input.component.html b/src/platform/dynamic-forms/dynamic-elements/dynamic-input/dynamic-input.component.html index 95c9304e26..5e17eb015d 100644 --- a/src/platform/dynamic-forms/dynamic-elements/dynamic-input/dynamic-input.component.html +++ b/src/platform/dynamic-forms/dynamic-elements/dynamic-input/dynamic-input.component.html @@ -1,7 +1,7 @@
    - + - +
    diff --git a/src/platform/dynamic-forms/dynamic-elements/dynamic-select/dynamic-select.component.html b/src/platform/dynamic-forms/dynamic-elements/dynamic-select/dynamic-select.component.html index c80f9c5d23..b728aaad0e 100644 --- a/src/platform/dynamic-forms/dynamic-elements/dynamic-select/dynamic-select.component.html +++ b/src/platform/dynamic-forms/dynamic-elements/dynamic-select/dynamic-select.component.html @@ -1,8 +1,8 @@
    - - {{selection.label || selection}} - + {{selection.label || selection}} +
    diff --git a/src/platform/dynamic-forms/dynamic-elements/dynamic-slide-toggle/dynamic-slide-toggle.component.html b/src/platform/dynamic-forms/dynamic-elements/dynamic-slide-toggle/dynamic-slide-toggle.component.html index 4410062164..75548e9a69 100644 --- a/src/platform/dynamic-forms/dynamic-elements/dynamic-slide-toggle/dynamic-slide-toggle.component.html +++ b/src/platform/dynamic-forms/dynamic-elements/dynamic-slide-toggle/dynamic-slide-toggle.component.html @@ -1,7 +1,7 @@
    - {{label}} - +
    \ No newline at end of file diff --git a/src/platform/dynamic-forms/dynamic-elements/dynamic-slider/dynamic-slider.component.html b/src/platform/dynamic-forms/dynamic-elements/dynamic-slider/dynamic-slider.component.html index 44c2bb03aa..0e8c7216bb 100644 --- a/src/platform/dynamic-forms/dynamic-elements/dynamic-slider/dynamic-slider.component.html +++ b/src/platform/dynamic-forms/dynamic-elements/dynamic-slider/dynamic-slider.component.html @@ -3,7 +3,7 @@
    - - +
    \ No newline at end of file diff --git a/src/platform/dynamic-forms/dynamic-elements/dynamic-textarea/dynamic-textarea.component.html b/src/platform/dynamic-forms/dynamic-elements/dynamic-textarea/dynamic-textarea.component.html index de8d7e5a09..8b715500c2 100644 --- a/src/platform/dynamic-forms/dynamic-elements/dynamic-textarea/dynamic-textarea.component.html +++ b/src/platform/dynamic-forms/dynamic-elements/dynamic-textarea/dynamic-textarea.component.html @@ -1,12 +1,12 @@
    - + - +
    \ No newline at end of file diff --git a/src/platform/dynamic-forms/dynamic-forms.component.spec.ts b/src/platform/dynamic-forms/dynamic-forms.component.spec.ts index 8cb8e47b9c..af2c8362f0 100644 --- a/src/platform/dynamic-forms/dynamic-forms.component.spec.ts +++ b/src/platform/dynamic-forms/dynamic-forms.component.spec.ts @@ -11,6 +11,7 @@ import { NoopAnimationsModule } from '@angular/platform-browser/animations'; import { By } from '@angular/platform-browser'; import { TdDynamicType, TdDynamicElement, ITdDynamicElementConfig, TdDynamicElementComponent, TdDynamicFormsComponent, CovalentDynamicFormsModule } from './'; +import { MATERIAL_COMPATIBILITY_MODE } from '@angular/material'; describe('Component: TdDynamicForms', () => { @@ -23,6 +24,9 @@ describe('Component: TdDynamicForms', () => { declarations: [ TdDynamicFormsTestComponent, ], + providers: [ + {provide: MATERIAL_COMPATIBILITY_MODE, useValue: true}, + ], }); TestBed.compileComponents(); })); diff --git a/src/platform/dynamic-forms/dynamic-forms.module.ts b/src/platform/dynamic-forms/dynamic-forms.module.ts index 52127bab52..3e49b1febf 100644 --- a/src/platform/dynamic-forms/dynamic-forms.module.ts +++ b/src/platform/dynamic-forms/dynamic-forms.module.ts @@ -2,8 +2,8 @@ import { NgModule, Type } from '@angular/core'; import { CommonModule } from '@angular/common'; import { ReactiveFormsModule } from '@angular/forms'; -import { MdInputModule, MdSelectModule, MdCheckboxModule, MdSliderModule, MdSlideToggleModule, MdIconModule, - MdButtonModule } from '@angular/material'; +import { MatInputModule, MatSelectModule, MatCheckboxModule, MatSliderModule, MatSlideToggleModule, MatIconModule, + MatButtonModule } from '@angular/material'; import { CovalentCommonModule } from '../core'; import { CovalentFileModule } from '../core'; @@ -49,13 +49,13 @@ const TD_DYNAMIC_FORMS_ENTRY_COMPONENTS: Type[] = [ imports: [ CommonModule, ReactiveFormsModule, - MdInputModule, - MdSelectModule, - MdCheckboxModule, - MdSliderModule, - MdSlideToggleModule, - MdIconModule, - MdButtonModule, + MatInputModule, + MatSelectModule, + MatCheckboxModule, + MatSliderModule, + MatSlideToggleModule, + MatIconModule, + MatButtonModule, CovalentCommonModule, CovalentFileModule, ], diff --git a/src/tests/utilities/covalent-tests.ts b/src/tests/utilities/covalent-tests.ts index fe7e45d76b..a58fa7970f 100644 --- a/src/tests/utilities/covalent-tests.ts +++ b/src/tests/utilities/covalent-tests.ts @@ -30,7 +30,7 @@ export class CovalentTests { * function that can be changed for all places needing this. */ public static clickDialogButton(component: any, buttonText: string): void { - let elements: NodeList = document.querySelectorAll('[md-button]'); + let elements: NodeList = document.querySelectorAll('[mat-button]'); for (let index: number = 0; index < elements.length; index++) { // try to click share on any buttons found with share as the text content. If there is an error trying to click one just // hide the error as it may not be clickable yet in the DOM or something diff --git a/src/theme.scss b/src/theme.scss index 32d8ac5edd..ccc3b823ad 100644 --- a/src/theme.scss +++ b/src/theme.scss @@ -163,13 +163,13 @@ $background: map-get($theme, background); // Apply theme for this app // Active icon color in list nav -md-nav-list { - [md-list-item].active { - md-icon[mdListAvatar] { +mat-nav-list { + [mat-list-item].active { + mat-icon[matListAvatar] { background-color: mat-color($accent); color: mat-color($accent, default-contrast) } - md-icon[mdListIcon] { + mat-icon[matListIcon] { color: mat-color($accent); } } diff --git a/src/universal-app/combat-training/combat-training.html b/src/universal-app/combat-training/combat-training.html index 23117c98fb..acdb0db43f 100644 --- a/src/universal-app/combat-training/combat-training.html +++ b/src/universal-app/combat-training/combat-training.html @@ -3,6 +3,6 @@

    Combat training app

    Covalent Message

    - + diff --git a/yarn.lock b/yarn.lock index cad05383fe..50093ee1c3 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3,46 +3,49 @@ "@angular-devkit/build-optimizer@~0.0.18": - version "0.0.18" - resolved "https://registry.yarnpkg.com/@angular-devkit/build-optimizer/-/build-optimizer-0.0.18.tgz#bdf507a37403b07fc72437d792d4e2541b0f13ec" + version "0.0.23" + resolved "https://registry.yarnpkg.com/@angular-devkit/build-optimizer/-/build-optimizer-0.0.23.tgz#2fe39f11460b27e3ebd007af7432e44646ea8816" dependencies: loader-utils "^1.1.0" source-map "^0.5.6" typescript "^2.3.3" + webpack-sources "^1.0.1" -"@angular-devkit/core@0.0.12": - version "0.0.12" - resolved "https://registry.yarnpkg.com/@angular-devkit/core/-/core-0.0.12.tgz#bf044c8ed38b8e2ec2648bbc6fd0d92be99112da" +"@angular-devkit/core@0.0.15": + version "0.0.15" + resolved "https://registry.yarnpkg.com/@angular-devkit/core/-/core-0.0.15.tgz#f237b4b27743d3a5e6dac60503596daa14442516" + dependencies: + source-map "^0.5.6" "@angular-devkit/schematics@~0.0.21": - version "0.0.21" - resolved "https://registry.yarnpkg.com/@angular-devkit/schematics/-/schematics-0.0.21.tgz#ea4b3b6ce8fc86f50de9df3402a039469369a7eb" + version "0.0.25" + resolved "https://registry.yarnpkg.com/@angular-devkit/schematics/-/schematics-0.0.25.tgz#993e63c2398ce0bcd61172627bc6e44ed4c98a99" dependencies: - "@angular-devkit/core" "0.0.12" + "@angular-devkit/core" "0.0.15" "@ngtools/json-schema" "^1.1.0" minimist "^1.2.0" rxjs "^5.4.2" -"@angular/animations@^4.3.0": - version "4.3.6" - resolved "https://registry.yarnpkg.com/@angular/animations/-/animations-4.3.6.tgz#bf9283ec7c8c98b32f569d84dcda10890fdc0262" +"@angular/animations@^4.4.3": + version "4.4.4" + resolved "https://registry.yarnpkg.com/@angular/animations/-/animations-4.4.4.tgz#a2f9353604347abe15df98292058842f52f08bc2" dependencies: tslib "^1.7.1" -"@angular/cdk@^2.0.0-beta.10": - version "2.0.0-beta.10" - resolved "https://registry.yarnpkg.com/@angular/cdk/-/cdk-2.0.0-beta.10.tgz#7ffcc430d6f67dfde1df25e1fa693c188e4da08a" +"@angular/cdk@^2.0.0-beta.11": + version "2.0.0-beta.11" + resolved "https://registry.yarnpkg.com/@angular/cdk/-/cdk-2.0.0-beta.11.tgz#b9e799574786272c63b6334c837c5ee2445bc933" dependencies: tslib "^1.7.1" -"@angular/cli@1.4.1": - version "1.4.1" - resolved "https://registry.yarnpkg.com/@angular/cli/-/cli-1.4.1.tgz#3999b93385c87b7c8d1511131c21280ba0e2cf12" +"@angular/cli@1.4.2": + version "1.4.2" + resolved "https://registry.yarnpkg.com/@angular/cli/-/cli-1.4.2.tgz#220a54c7e12303157cc289f4306fa46d080705ac" dependencies: "@angular-devkit/build-optimizer" "~0.0.18" "@angular-devkit/schematics" "~0.0.21" "@ngtools/json-schema" "1.1.0" - "@ngtools/webpack" "1.7.0" + "@ngtools/webpack" "1.7.1" "@schematics/angular" "~0.0.30" autoprefixer "^6.5.3" chalk "^2.0.1" @@ -98,79 +101,79 @@ optionalDependencies: node-sass "^4.3.0" -"@angular/common@^4.3.0": - version "4.3.6" - resolved "https://registry.yarnpkg.com/@angular/common/-/common-4.3.6.tgz#ed37e9307c7506dd834797c1a6cf675e52b5b6ee" +"@angular/common@^4.4.3": + version "4.4.4" + resolved "https://registry.yarnpkg.com/@angular/common/-/common-4.4.4.tgz#ae0a818aaa0c6a3f0901e7b80bd94e1c22eb9365" dependencies: tslib "^1.7.1" -"@angular/compiler-cli@^4.3.0": - version "4.3.6" - resolved "https://registry.yarnpkg.com/@angular/compiler-cli/-/compiler-cli-4.3.6.tgz#6afa6aef68dd681e61b398be4d6270e5c8680b12" +"@angular/compiler-cli@^4.4.3": + version "4.4.4" + resolved "https://registry.yarnpkg.com/@angular/compiler-cli/-/compiler-cli-4.4.4.tgz#063080a497d9175396825050222c717da184f6cf" dependencies: - "@angular/tsc-wrapped" "4.3.6" + "@angular/tsc-wrapped" "4.4.4" minimist "^1.2.0" reflect-metadata "^0.1.2" -"@angular/compiler@^4.3.0": - version "4.3.6" - resolved "https://registry.yarnpkg.com/@angular/compiler/-/compiler-4.3.6.tgz#be170df098b71e835ccedf168d5fb7b23e5045b8" +"@angular/compiler@^4.4.3": + version "4.4.4" + resolved "https://registry.yarnpkg.com/@angular/compiler/-/compiler-4.4.4.tgz#326eb0029d9a3541aaca124def9adc51c36f2b41" dependencies: tslib "^1.7.1" -"@angular/core@^4.3.0": - version "4.3.6" - resolved "https://registry.yarnpkg.com/@angular/core/-/core-4.3.6.tgz#bbac63d68d0f7bcb389d12b34208652be3287e96" +"@angular/core@^4.4.3": + version "4.4.4" + resolved "https://registry.yarnpkg.com/@angular/core/-/core-4.4.4.tgz#bd37ecf54158f97489996c9386bd222f80a32f5c" dependencies: tslib "^1.7.1" -"@angular/forms@^4.3.0": - version "4.3.6" - resolved "https://registry.yarnpkg.com/@angular/forms/-/forms-4.3.6.tgz#0f20c4597c16a152745d7cd95559855a0a5c6687" +"@angular/forms@^4.4.3": + version "4.4.4" + resolved "https://registry.yarnpkg.com/@angular/forms/-/forms-4.4.4.tgz#4db3790509b6b10f1db8a7c1b7f52187cf64cfd4" dependencies: tslib "^1.7.1" -"@angular/http@^4.3.0": - version "4.3.6" - resolved "https://registry.yarnpkg.com/@angular/http/-/http-4.3.6.tgz#563827d1a7d5e89e3b7d86b77fbbd367b2c08591" +"@angular/http@^4.4.3": + version "4.4.4" + resolved "https://registry.yarnpkg.com/@angular/http/-/http-4.4.4.tgz#667faf616bb624168eafae6ee92e5eba23a9d1f2" dependencies: tslib "^1.7.1" -"@angular/material@^2.0.0-beta.10": - version "2.0.0-beta.10" - resolved "https://registry.yarnpkg.com/@angular/material/-/material-2.0.0-beta.10.tgz#23f5887d5e34da89dd6da1fe4da0b3f779da4807" +"@angular/material@^2.0.0-beta.11": + version "2.0.0-beta.11" + resolved "https://registry.yarnpkg.com/@angular/material/-/material-2.0.0-beta.11.tgz#9124a1f50f3eb7dc28640317ee1e875f71da753a" dependencies: tslib "^1.7.1" -"@angular/platform-browser-dynamic@^4.3.0": - version "4.3.6" - resolved "https://registry.yarnpkg.com/@angular/platform-browser-dynamic/-/platform-browser-dynamic-4.3.6.tgz#9eabf826f119c98f85c2a96edcb18ab00b4efb1c" +"@angular/platform-browser-dynamic@^4.4.3": + version "4.4.4" + resolved "https://registry.yarnpkg.com/@angular/platform-browser-dynamic/-/platform-browser-dynamic-4.4.4.tgz#c3c9eb854a528556a07054127932e527fa932e14" dependencies: tslib "^1.7.1" -"@angular/platform-browser@^4.3.0": - version "4.3.6" - resolved "https://registry.yarnpkg.com/@angular/platform-browser/-/platform-browser-4.3.6.tgz#6152b1f3b78d0246fc5e150e2f7b9ed4337e3ba6" +"@angular/platform-browser@^4.4.3": + version "4.4.4" + resolved "https://registry.yarnpkg.com/@angular/platform-browser/-/platform-browser-4.4.4.tgz#a3898e2e7ba9d84ffa0d47144c6971179c75aee6" dependencies: tslib "^1.7.1" -"@angular/platform-server@^4.3.0": - version "4.3.6" - resolved "https://registry.yarnpkg.com/@angular/platform-server/-/platform-server-4.3.6.tgz#369d49844f1c0a9a10c7cba9b0cb78c2520741a5" +"@angular/platform-server@^4.4.3": + version "4.4.4" + resolved "https://registry.yarnpkg.com/@angular/platform-server/-/platform-server-4.4.4.tgz#73ee41fa1cec8628fcc03174727b27cb0031b22a" dependencies: parse5 "^3.0.1" tslib "^1.7.1" xhr2 "^0.1.4" -"@angular/router@^4.3.0": - version "4.3.6" - resolved "https://registry.yarnpkg.com/@angular/router/-/router-4.3.6.tgz#64033edb4fcda08a323e7533b4a1820c0f28d130" +"@angular/router@^4.4.3": + version "4.4.4" + resolved "https://registry.yarnpkg.com/@angular/router/-/router-4.4.4.tgz#7be391096e843cb3e04f9f05d1d65a88df9bc7cf" dependencies: tslib "^1.7.1" -"@angular/tsc-wrapped@4.3.6": - version "4.3.6" - resolved "https://registry.yarnpkg.com/@angular/tsc-wrapped/-/tsc-wrapped-4.3.6.tgz#1aa66e0ab2c4799a4ad14b675e13953aa5fcd436" +"@angular/tsc-wrapped@4.4.4": + version "4.4.4" + resolved "https://registry.yarnpkg.com/@angular/tsc-wrapped/-/tsc-wrapped-4.4.4.tgz#9841821e55616b826ca160250fe85e15fc74ffc3" dependencies: tsickle "^0.21.0" @@ -190,9 +193,9 @@ version "1.1.0" resolved "https://registry.yarnpkg.com/@ngtools/json-schema/-/json-schema-1.1.0.tgz#c3a0c544d62392acc2813a42c8a0dc6f58f86922" -"@ngtools/webpack@1.7.0": - version "1.7.0" - resolved "https://registry.yarnpkg.com/@ngtools/webpack/-/webpack-1.7.0.tgz#100b4ba370b3b9f991936f3d5db09cebffe11583" +"@ngtools/webpack@1.7.1": + version "1.7.1" + resolved "https://registry.yarnpkg.com/@ngtools/webpack/-/webpack-1.7.1.tgz#383ddd689845cf42fc755975f6440f75535f5016" dependencies: enhanced-resolve "^3.1.0" loader-utils "^1.0.2" @@ -208,16 +211,16 @@ resolved "https://registry.yarnpkg.com/@ngx-translate/http-loader/-/http-loader-1.0.2.tgz#cd4aa2cb73e400346dacaae2dac5d29dc58c298a" "@schematics/angular@~0.0.30": - version "0.0.33" - resolved "https://registry.yarnpkg.com/@schematics/angular/-/angular-0.0.33.tgz#bc0b28356af46fe9ec64495588ee61503fd34ce5" + version "0.0.38" + resolved "https://registry.yarnpkg.com/@schematics/angular/-/angular-0.0.38.tgz#6131569a9fe21fe7bad8abf4a3174ea5a8647bbd" "@swimlane/ngx-charts@5.3.1": version "5.3.1" resolved "https://registry.yarnpkg.com/@swimlane/ngx-charts/-/ngx-charts-5.3.1.tgz#942d95e8f11a3156b3f263783287d53eb648284c" "@types/fs-extra@^4.0.0": - version "4.0.0" - resolved "https://registry.yarnpkg.com/@types/fs-extra/-/fs-extra-4.0.0.tgz#1dd742ad5c9bce308f7a52d02ebc01421bc9102f" + version "4.0.2" + resolved "https://registry.yarnpkg.com/@types/fs-extra/-/fs-extra-4.0.2.tgz#7b9b1bbf85962cbe029b5a83c9b530d7c75af3ba" dependencies: "@types/node" "*" @@ -230,8 +233,8 @@ resolved "https://registry.yarnpkg.com/@types/jasmine/-/jasmine-2.5.38.tgz#a4379124c4921d4e21de54ec74669c9e9b356717" "@types/node@*": - version "8.0.26" - resolved "https://registry.yarnpkg.com/@types/node/-/node-8.0.26.tgz#4d58be925306fd22b1141085535a0268b8beb189" + version "8.0.31" + resolved "https://registry.yarnpkg.com/@types/node/-/node-8.0.31.tgz#d9af61093cf4bfc9f066ca34de0175012cfb0ce9" "@types/node@^6.0.46", "@types/node@~6.0.60": version "6.0.88" @@ -246,8 +249,8 @@ resolved "https://registry.yarnpkg.com/@types/selenium-webdriver/-/selenium-webdriver-2.53.42.tgz#74cb77fb6052edaff2a8984ddafd88d419f25cac" abbrev@1: - version "1.1.0" - resolved "https://registry.yarnpkg.com/abbrev/-/abbrev-1.1.0.tgz#d0554c2256636e2f56e7c2e5ad183f859428d81f" + version "1.1.1" + resolved "https://registry.yarnpkg.com/abbrev/-/abbrev-1.1.1.tgz#f8f2c887ad10bf67f634f005b6987fed3179aac8" accepts@1.3.3: version "1.3.3" @@ -256,7 +259,7 @@ accepts@1.3.3: mime-types "~2.1.11" negotiator "0.6.1" -accepts@~1.3.3: +accepts@~1.3.4: version "1.3.4" resolved "https://registry.yarnpkg.com/accepts/-/accepts-1.3.4.tgz#86246758c7dd6d21a6474ff084a4740ec05eb21f" dependencies: @@ -274,8 +277,8 @@ acorn@^4.0.1, acorn@^4.0.3: resolved "https://registry.yarnpkg.com/acorn/-/acorn-4.0.13.tgz#105495ae5361d697bd195c825192e1ad7f253787" acorn@^5.0.0: - version "5.1.1" - resolved "https://registry.yarnpkg.com/acorn/-/acorn-5.1.1.tgz#53fe161111f912ab999ee887a90a0bc52822fd75" + version "5.1.2" + resolved "https://registry.yarnpkg.com/acorn/-/acorn-5.1.2.tgz#911cb53e036807cf0fa778dc5d370fbd864246d7" adm-zip@0.4.4: version "0.4.4" @@ -307,9 +310,9 @@ ajv@^4.9.1: co "^4.6.0" json-stable-stringify "^1.0.1" -ajv@^5.0.0, ajv@^5.1.5: - version "5.2.2" - resolved "https://registry.yarnpkg.com/ajv/-/ajv-5.2.2.tgz#47c68d69e86f5d953103b0074a9430dc63da5e39" +ajv@^5.0.0, ajv@^5.1.0, ajv@^5.1.5: + version "5.2.3" + resolved "https://registry.yarnpkg.com/ajv/-/ajv-5.2.3.tgz#c06f598778c44c6b161abafe3466b81ad1814ed2" dependencies: co "^4.6.0" fast-deep-equal "^1.0.0" @@ -388,8 +391,8 @@ append-transform@^0.4.0: default-require-extensions "^1.0.0" aproba@^1.0.3: - version "1.1.2" - resolved "https://registry.yarnpkg.com/aproba/-/aproba-1.1.2.tgz#45c6629094de4e96f693ef7eab74ae079c240fc1" + version "1.2.0" + resolved "https://registry.yarnpkg.com/aproba/-/aproba-1.2.0.tgz#6802e6264efd18c790a1b0d517f0f2627bf2c94a" archy@^1.0.0: version "1.0.0" @@ -565,7 +568,11 @@ aws-sign2@~0.6.0: version "0.6.0" resolved "https://registry.yarnpkg.com/aws-sign2/-/aws-sign2-0.6.0.tgz#14342dd38dbcc94d0e5b87d763cd63612c0e794f" -aws4@^1.2.1: +aws-sign2@~0.7.0: + version "0.7.0" + resolved "https://registry.yarnpkg.com/aws-sign2/-/aws-sign2-0.7.0.tgz#b46e890934a9591f2d2f6f86d7e6a9f1b3fe76a8" + +aws4@^1.2.1, aws4@^1.6.0: version "1.6.0" resolved "https://registry.yarnpkg.com/aws4/-/aws4-1.6.0.tgz#83ef5ca860b2b32e4a0deedee8c771b9db57471e" @@ -636,7 +643,7 @@ babel-types@^6.18.0, babel-types@^6.26.0: lodash "^4.17.4" to-fast-properties "^1.0.3" -babylon@^6.17.4, babylon@^6.18.0: +babylon@^6.18.0: version "6.18.0" resolved "https://registry.yarnpkg.com/babylon/-/babylon-6.18.0.tgz#af2f3b88fa6f5c1e4c634d1a0f8eac4f55b395e3" @@ -685,8 +692,8 @@ better-assert@~1.0.0: callsite "1.0.0" big.js@^3.1.3: - version "3.1.3" - resolved "https://registry.yarnpkg.com/big.js/-/big.js-3.1.3.tgz#4cada2193652eb3ca9ec8e55c9015669c9806978" + version "3.2.0" + resolved "https://registry.yarnpkg.com/big.js/-/big.js-3.2.0.tgz#a5fc298b81b9e0dca2e458824784b65c52ba588e" binary-extensions@^1.0.0: version "1.10.0" @@ -720,19 +727,19 @@ bn.js@^4.0.0, bn.js@^4.1.0, bn.js@^4.1.1, bn.js@^4.4.0: version "4.11.8" resolved "https://registry.yarnpkg.com/bn.js/-/bn.js-4.11.8.tgz#2cde09eb5ee341f484746bb0309b3253b1b1442f" -body-parser@^1.12.4: - version "1.17.2" - resolved "https://registry.yarnpkg.com/body-parser/-/body-parser-1.17.2.tgz#f8892abc8f9e627d42aedafbca66bf5ab99104ee" +body-parser@1.18.2, body-parser@^1.12.4: + version "1.18.2" + resolved "https://registry.yarnpkg.com/body-parser/-/body-parser-1.18.2.tgz#87678a19d84b47d859b83199bd59bce222b10454" dependencies: - bytes "2.4.0" - content-type "~1.0.2" - debug "2.6.7" - depd "~1.1.0" - http-errors "~1.6.1" - iconv-lite "0.4.15" + bytes "3.0.0" + content-type "~1.0.4" + debug "2.6.9" + depd "~1.1.1" + http-errors "~1.6.2" + iconv-lite "0.4.19" on-finished "~2.3.0" - qs "6.4.0" - raw-body "~2.2.0" + qs "6.5.1" + raw-body "2.3.2" type-is "~1.6.15" bonjour@^3.5.0: @@ -756,6 +763,18 @@ boom@2.x.x: dependencies: hoek "2.x.x" +boom@4.x.x: + version "4.3.1" + resolved "https://registry.yarnpkg.com/boom/-/boom-4.3.1.tgz#4f8a3005cb4a7e3889f749030fd25b96e01d2e31" + dependencies: + hoek "4.x.x" + +boom@5.x.x: + version "5.2.0" + resolved "https://registry.yarnpkg.com/boom/-/boom-5.2.0.tgz#5dd9da6ee3a5f302077436290cb717d3f4a54e02" + dependencies: + hoek "4.x.x" + brace-expansion@^1.0.0, brace-expansion@^1.1.7: version "1.1.8" resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.8.tgz#c07b211c7c952ec1f8efd51a77ef0d1d3990a292" @@ -788,14 +807,15 @@ browser-resolve@^1.11.0: resolve "1.1.7" browserify-aes@^1.0.0, browserify-aes@^1.0.4: - version "1.0.6" - resolved "https://registry.yarnpkg.com/browserify-aes/-/browserify-aes-1.0.6.tgz#5e7725dbdef1fd5930d4ebab48567ce451c48a0a" + version "1.0.8" + resolved "https://registry.yarnpkg.com/browserify-aes/-/browserify-aes-1.0.8.tgz#c8fa3b1b7585bb7ba77c5560b60996ddec6d5309" dependencies: - buffer-xor "^1.0.2" + buffer-xor "^1.0.3" cipher-base "^1.0.0" create-hash "^1.1.0" - evp_bytestokey "^1.0.0" + evp_bytestokey "^1.0.3" inherits "^2.0.1" + safe-buffer "^5.0.1" browserify-cipher@^1.0.0: version "1.0.0" @@ -856,7 +876,7 @@ buffer-indexof@^1.0.0: version "1.1.1" resolved "https://registry.yarnpkg.com/buffer-indexof/-/buffer-indexof-1.1.1.tgz#52fabcc6a606d1a00302802648ef68f639da268c" -buffer-xor@^1.0.2: +buffer-xor@^1.0.3: version "1.0.3" resolved "https://registry.yarnpkg.com/buffer-xor/-/buffer-xor-1.0.3.tgz#26e61ed1422fb70dd42e6e36729ed51d855fe8d9" @@ -883,13 +903,9 @@ bump-regex@^2.0.0: semver "^5.1.0" xtend "^4.0.1" -bytes@2.4.0: - version "2.4.0" - resolved "https://registry.yarnpkg.com/bytes/-/bytes-2.4.0.tgz#7d97196f9d5baf7f6935e25985549edd2a6c2339" - -bytes@2.5.0: - version "2.5.0" - resolved "https://registry.yarnpkg.com/bytes/-/bytes-2.5.0.tgz#4c9423ea2d252c270c41b2bdefeff9bb6b62c06a" +bytes@3.0.0: + version "3.0.0" + resolved "https://registry.yarnpkg.com/bytes/-/bytes-3.0.0.tgz#d32815404d689699f85a4ea4fa8755dd13a96048" callsite@1.0.0: version "1.0.0" @@ -935,12 +951,12 @@ caniuse-api@^1.5.2: lodash.uniq "^4.5.0" caniuse-db@^1.0.30000529, caniuse-db@^1.0.30000634, caniuse-db@^1.0.30000639: - version "1.0.30000721" - resolved "https://registry.yarnpkg.com/caniuse-db/-/caniuse-db-1.0.30000721.tgz#cdc52efe8f82dd13916615b78e86f704ece61802" + version "1.0.30000740" + resolved "https://registry.yarnpkg.com/caniuse-db/-/caniuse-db-1.0.30000740.tgz#03fcaaa176e3ed075895f72d46c1a12149bbeac9" caniuse-lite@^1.0.30000697, caniuse-lite@^1.0.30000718: - version "1.0.30000721" - resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30000721.tgz#931a21a7bd85016300328d21f126d84b73437d35" + version "1.0.30000740" + resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30000740.tgz#f2c4c04d6564eb812e61006841700ad557f6f973" caseless@~0.11.0: version "0.11.0" @@ -1006,8 +1022,8 @@ circular-dependency-plugin@^3.0.0: resolved "https://registry.yarnpkg.com/circular-dependency-plugin/-/circular-dependency-plugin-3.0.0.tgz#9b68692e35b0e3510998d0164b6ae5011bea5760" clap@^1.0.9: - version "1.2.0" - resolved "https://registry.yarnpkg.com/clap/-/clap-1.2.0.tgz#59c90fe3e137104746ff19469a27a634ff68c857" + version "1.2.3" + resolved "https://registry.yarnpkg.com/clap/-/clap-1.2.3.tgz#4f36745b32008492557f46412d66d50cb99bce51" dependencies: chalk "^1.1.3" @@ -1016,8 +1032,8 @@ classlist.js@^1.1.20150312: resolved "https://registry.yarnpkg.com/classlist.js/-/classlist.js-1.1.20150312.tgz#1d70842f7022f08d9ac086ce69e5b250f2c57789" clean-css@4.1.x: - version "4.1.7" - resolved "https://registry.yarnpkg.com/clean-css/-/clean-css-4.1.7.tgz#b9aea4f85679889cf3eae8b40349ec4ebdfdd032" + version "4.1.9" + resolved "https://registry.yarnpkg.com/clean-css/-/clean-css-4.1.9.tgz#35cee8ae7687a49b98034f70de00c4edd3826301" dependencies: source-map "0.5.x" @@ -1094,8 +1110,8 @@ codemirror-spell-checker@*: typo-js "*" codemirror@*: - version "5.29.0" - resolved "https://registry.yarnpkg.com/codemirror/-/codemirror-5.29.0.tgz#e68de1350e2f0ce804a3930576d0ae318736e967" + version "5.30.0" + resolved "https://registry.yarnpkg.com/codemirror/-/codemirror-5.30.0.tgz#86e57dd5ea5535acbcf9c720797b4cefe05b5a70" color-convert@^1.3.0, color-convert@^1.9.0: version "1.9.0" @@ -1171,23 +1187,23 @@ component-inherit@0.0.3: version "0.0.3" resolved "https://registry.yarnpkg.com/component-inherit/-/component-inherit-0.0.3.tgz#645fc4adf58b72b649d5cae65135619db26ff143" -compressible@~2.0.10: +compressible@~2.0.11: version "2.0.11" resolved "https://registry.yarnpkg.com/compressible/-/compressible-2.0.11.tgz#16718a75de283ed8e604041625a2064586797d8a" dependencies: mime-db ">= 1.29.0 < 2" compression@^1.5.2: - version "1.7.0" - resolved "https://registry.yarnpkg.com/compression/-/compression-1.7.0.tgz#030c9f198f1643a057d776a738e922da4373012d" + version "1.7.1" + resolved "https://registry.yarnpkg.com/compression/-/compression-1.7.1.tgz#eff2603efc2e22cf86f35d2eb93589f9875373db" dependencies: - accepts "~1.3.3" - bytes "2.5.0" - compressible "~2.0.10" - debug "2.6.8" + accepts "~1.3.4" + bytes "3.0.0" + compressible "~2.0.11" + debug "2.6.9" on-headers "~1.0.1" safe-buffer "5.1.1" - vary "~1.1.1" + vary "~1.1.2" concat-map@0.0.1: version "0.0.1" @@ -1214,13 +1230,13 @@ connect-history-api-fallback@^1.3.0: resolved "https://registry.yarnpkg.com/connect-history-api-fallback/-/connect-history-api-fallback-1.3.0.tgz#e51d17f8f0ef0db90a64fdb47de3051556e9f169" connect@^3.3.5: - version "3.6.3" - resolved "https://registry.yarnpkg.com/connect/-/connect-3.6.3.tgz#f7320d46a25b4be7b483a2236517f24b1e27e301" + version "3.6.5" + resolved "https://registry.yarnpkg.com/connect/-/connect-3.6.5.tgz#fb8dde7ba0763877d0ec9df9dac0b4b40e72c7da" dependencies: - debug "2.6.8" - finalhandler "1.0.4" - parseurl "~1.3.1" - utils-merge "1.0.0" + debug "2.6.9" + finalhandler "1.0.6" + parseurl "~1.3.2" + utils-merge "1.0.1" console-browserify@^1.1.0: version "1.1.0" @@ -1240,9 +1256,9 @@ content-disposition@0.5.2: version "0.5.2" resolved "https://registry.yarnpkg.com/content-disposition/-/content-disposition-0.5.2.tgz#0cf68bb9ddf5f2be7961c3a85178cb85dba78cb4" -content-type@~1.0.2: - version "1.0.2" - resolved "https://registry.yarnpkg.com/content-type/-/content-type-1.0.2.tgz#b7d113aee7a8dd27bd21133c4dc2529df1721eed" +content-type@~1.0.4: + version "1.0.4" + resolved "https://registry.yarnpkg.com/content-type/-/content-type-1.0.4.tgz#e138cc75e040c727b1966fe5e5f8c9aee256fe3b" convert-source-map@^1.1.1, convert-source-map@^1.3.0: version "1.5.0" @@ -1270,8 +1286,8 @@ copy-webpack-plugin@^4.0.1: node-dir "^0.1.10" core-js@^2.2.0, core-js@^2.4.0, core-js@^2.4.1: - version "2.5.0" - resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.5.0.tgz#569c050918be6486b3837552028ae0466b717086" + version "2.5.1" + resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.5.1.tgz#ae6874dc66937789b80754ff5428df66819ca50b" core-object@^3.1.0: version "3.1.5" @@ -1296,8 +1312,8 @@ cosmiconfig@^2.1.0, cosmiconfig@^2.1.1: require-from-string "^1.1.0" coveralls@^2.12.0: - version "2.13.1" - resolved "https://registry.yarnpkg.com/coveralls/-/coveralls-2.13.1.tgz#d70bb9acc1835ec4f063ff9dac5423c17b11f178" + version "2.13.3" + resolved "https://registry.yarnpkg.com/coveralls/-/coveralls-2.13.3.tgz#9ad7c2ae527417f361e8b626483f48ee92dd2bc7" dependencies: js-yaml "3.6.1" lcov-parse "0.0.10" @@ -1357,6 +1373,12 @@ cryptiles@2.x.x: dependencies: boom "2.x.x" +cryptiles@3.x.x: + version "3.1.2" + resolved "https://registry.yarnpkg.com/cryptiles/-/cryptiles-3.1.2.tgz#a89fbb220f5ce25ec56e8c4aa8a4fd7b5b0d29fe" + dependencies: + boom "5.x.x" + crypto-browserify@^3.11.0: version "3.11.1" resolved "https://registry.yarnpkg.com/crypto-browserify/-/crypto-browserify-3.11.1.tgz#948945efc6757a400d6e5e5af47194d10064279f" @@ -1484,7 +1506,11 @@ custom-event@~1.0.0: version "1.0.1" resolved "https://registry.yarnpkg.com/custom-event/-/custom-event-1.0.1.tgz#5d02a46850adf1b4a317946a3928fccb5bfd0425" -d3-array@1, d3-array@1.2.0, d3-array@^1.2.0: +d3-array@1, d3-array@^1.2.0: + version "1.2.1" + resolved "https://registry.yarnpkg.com/d3-array/-/d3-array-1.2.1.tgz#d1ca33de2f6ac31efadb8e050a021d7e2396d5dc" + +d3-array@1.2.0: version "1.2.0" resolved "https://registry.yarnpkg.com/d3-array/-/d3-array-1.2.0.tgz#147d269720e174c4057a7f42be8b0f3f2ba53108" @@ -1528,9 +1554,9 @@ d3-drag@1, d3-drag@1.1.1: d3-dispatch "1" d3-selection "1" -d3-dsv@1, d3-dsv@1.0.5: - version "1.0.5" - resolved "https://registry.yarnpkg.com/d3-dsv/-/d3-dsv-1.0.5.tgz#419f7db47f628789fc3fdb636e678449d0821136" +d3-dsv@1, d3-dsv@1.0.7: + version "1.0.7" + resolved "https://registry.yarnpkg.com/d3-dsv/-/d3-dsv-1.0.7.tgz#137076663f398428fc3d031ae65370522492b78f" dependencies: commander "2" iconv-lite "0.4" @@ -1589,9 +1615,9 @@ d3-random@1.1.0: version "1.1.0" resolved "https://registry.yarnpkg.com/d3-random/-/d3-random-1.1.0.tgz#6642e506c6fa3a648595d2b2469788a8d12529d3" -d3-request@1.0.5: - version "1.0.5" - resolved "https://registry.yarnpkg.com/d3-request/-/d3-request-1.0.5.tgz#4daae946d1dd0d57dfe01f022956354958d51f23" +d3-request@1.0.6: + version "1.0.6" + resolved "https://registry.yarnpkg.com/d3-request/-/d3-request-1.0.6.tgz#a1044a9ef4ec28c824171c9379fae6d79474b19f" dependencies: d3-collection "1" d3-dispatch "1" @@ -1630,9 +1656,9 @@ d3-time@1, d3-time@1.0.7: version "1.0.7" resolved "https://registry.yarnpkg.com/d3-time/-/d3-time-1.0.7.tgz#94caf6edbb7879bb809d0d1f7572bc48482f7270" -d3-timer@1, d3-timer@1.0.6: - version "1.0.6" - resolved "https://registry.yarnpkg.com/d3-timer/-/d3-timer-1.0.6.tgz#4044bf15d7025c06ce7d1149f73cd07b54dbd784" +d3-timer@1, d3-timer@1.0.7: + version "1.0.7" + resolved "https://registry.yarnpkg.com/d3-timer/-/d3-timer-1.0.7.tgz#df9650ca587f6c96607ff4e60cc38229e8dd8531" d3-transition@1, d3-transition@1.1.0: version "1.1.0" @@ -1660,8 +1686,8 @@ d3-zoom@1.5.0: d3-transition "1" d3@^4.4.0: - version "4.10.0" - resolved "https://registry.yarnpkg.com/d3/-/d3-4.10.0.tgz#0bcca3a3b614e2fd45b1b5bd0b9164d57352a862" + version "4.10.2" + resolved "https://registry.yarnpkg.com/d3/-/d3-4.10.2.tgz#d401b2bc0372a77e6822f278c0e4b4090206babd" dependencies: d3-array "1.2.0" d3-axis "1.0.8" @@ -1671,7 +1697,7 @@ d3@^4.4.0: d3-color "1.0.3" d3-dispatch "1.0.3" d3-drag "1.1.1" - d3-dsv "1.0.5" + d3-dsv "1.0.7" d3-ease "1.0.3" d3-force "1.0.6" d3-format "1.2.0" @@ -1683,13 +1709,13 @@ d3@^4.4.0: d3-quadtree "1.0.3" d3-queue "3.0.7" d3-random "1.1.0" - d3-request "1.0.5" + d3-request "1.0.6" d3-scale "1.0.6" d3-selection "1.1.0" d3-shape "1.2.0" d3-time "1.0.7" d3-time-format "2.0.5" - d3-timer "1.0.6" + d3-timer "1.0.7" d3-transition "1.1.0" d3-voronoi "1.1.2" d3-zoom "1.5.0" @@ -1718,12 +1744,12 @@ dateformat@^1.0.11: meow "^3.3.0" dateformat@^2.0.0: - version "2.0.0" - resolved "https://registry.yarnpkg.com/dateformat/-/dateformat-2.0.0.tgz#2743e3abb5c3fc2462e527dca445e04e9f4dee17" + version "2.2.0" + resolved "https://registry.yarnpkg.com/dateformat/-/dateformat-2.2.0.tgz#4065e2013cf9fb916ddfd82efb506ad4c6769062" debug@*: - version "3.0.1" - resolved "https://registry.yarnpkg.com/debug/-/debug-3.0.1.tgz#0564c612b521dc92d9f2988f0549e34f9c98db64" + version "3.1.0" + resolved "https://registry.yarnpkg.com/debug/-/debug-3.1.0.tgz#5bb5a0672628b64149566ba16819e61518c67261" dependencies: ms "2.0.0" @@ -1731,9 +1757,9 @@ debug@0.7.4: version "0.7.4" resolved "https://registry.yarnpkg.com/debug/-/debug-0.7.4.tgz#06e1ea8082c2cb14e39806e22e2f6f757f92af39" -debug@2, debug@2.6.8, debug@^2.2.0, debug@^2.6.3, debug@^2.6.6, debug@^2.6.8: - version "2.6.8" - resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.8.tgz#e731531ca2ede27d188222427da17821d68ff4fc" +debug@2, debug@2.6.9, debug@^2.2.0, debug@^2.6.3, debug@^2.6.6, debug@^2.6.8: + version "2.6.9" + resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f" dependencies: ms "2.0.0" @@ -1749,12 +1775,6 @@ debug@2.3.3: dependencies: ms "0.7.2" -debug@2.6.7: - version "2.6.7" - resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.7.tgz#92bad1f6d05bbb6bba22cca88bcd0ec894c2861e" - dependencies: - ms "2.0.0" - decamelize@^1.0.0, decamelize@^1.1.1, decamelize@^1.1.2: version "1.2.0" resolved "https://registry.yarnpkg.com/decamelize/-/decamelize-1.2.0.tgz#f6534d15148269b20352e7bee26f501f9a191290" @@ -1818,7 +1838,7 @@ denodeify@^1.2.1: version "1.2.1" resolved "https://registry.yarnpkg.com/denodeify/-/denodeify-1.2.1.tgz#3a36287f5034e699e7577901052c2e6c94251631" -depd@1.1.1, depd@~1.1.0, depd@~1.1.1: +depd@1.1.1, depd@~1.1.1: version "1.1.1" resolved "https://registry.yarnpkg.com/depd/-/depd-1.1.1.tgz#5783b4e1c459f06fa5ca27f991f3d06e7a310359" @@ -1858,8 +1878,8 @@ di@^0.0.1: resolved "https://registry.yarnpkg.com/di/-/di-0.0.1.tgz#806649326ceaa7caa3306d75d985ea2748ba913c" diff@^3.1.0, diff@^3.2.0: - version "3.3.0" - resolved "https://registry.yarnpkg.com/diff/-/diff-3.3.0.tgz#056695150d7aa93237ca7e378ac3b1682b7963b9" + version "3.3.1" + resolved "https://registry.yarnpkg.com/diff/-/diff-3.3.1.tgz#aa8567a6eed03c531fc89d3f711cd0e5259dec75" diffie-hellman@^5.0.0: version "5.0.2" @@ -1977,8 +1997,8 @@ ejs@^2.5.7: resolved "https://registry.yarnpkg.com/ejs/-/ejs-2.5.7.tgz#cc872c168880ae3c7189762fd5ffc00896c9518a" electron-to-chromium@^1.2.7, electron-to-chromium@^1.3.18: - version "1.3.18" - resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.18.tgz#3dcc99da3e6b665f6abbc71c28ad51a2cd731a9c" + version "1.3.24" + resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.24.tgz#9b7b88bb05ceb9fa016a177833cc2dde388f21b6" elliptic@^6.0.0: version "6.4.0" @@ -2184,9 +2204,9 @@ esutils@^2.0.2: version "2.0.2" resolved "https://registry.yarnpkg.com/esutils/-/esutils-2.0.2.tgz#0abf4f1caa5bcb1f7a9d8acc6dea4faaa04bac9b" -etag@~1.8.0: - version "1.8.0" - resolved "https://registry.yarnpkg.com/etag/-/etag-1.8.0.tgz#6f631aef336d6c46362b51764044ce216be3c051" +etag@~1.8.1: + version "1.8.1" + resolved "https://registry.yarnpkg.com/etag/-/etag-1.8.1.tgz#41ae2eeb65efa62268aebfea83ac7d79299b0887" event-emitter@~0.3.5: version "0.3.5" @@ -2209,9 +2229,9 @@ eventsource@0.1.6: dependencies: original ">=0.0.5" -evp_bytestokey@^1.0.0: - version "1.0.2" - resolved "https://registry.yarnpkg.com/evp_bytestokey/-/evp_bytestokey-1.0.2.tgz#f66bb88ecd57f71a766821e20283ea38c68bf80a" +evp_bytestokey@^1.0.0, evp_bytestokey@^1.0.3: + version "1.0.3" + resolved "https://registry.yarnpkg.com/evp_bytestokey/-/evp_bytestokey-1.0.3.tgz#7fcbdb198dc71959432efe13842684e0525acb02" dependencies: md5.js "^1.3.4" safe-buffer "^5.1.1" @@ -2279,37 +2299,39 @@ exports-loader@^0.6.3: source-map "0.5.x" express@^4.13.3: - version "4.15.4" - resolved "https://registry.yarnpkg.com/express/-/express-4.15.4.tgz#032e2253489cf8fce02666beca3d11ed7a2daed1" + version "4.16.0" + resolved "https://registry.yarnpkg.com/express/-/express-4.16.0.tgz#b519638e4eb58e7178c81b498ef22f798cb2e255" dependencies: - accepts "~1.3.3" + accepts "~1.3.4" array-flatten "1.1.1" + body-parser "1.18.2" content-disposition "0.5.2" - content-type "~1.0.2" + content-type "~1.0.4" cookie "0.3.1" cookie-signature "1.0.6" - debug "2.6.8" + debug "2.6.9" depd "~1.1.1" encodeurl "~1.0.1" escape-html "~1.0.3" - etag "~1.8.0" - finalhandler "~1.0.4" - fresh "0.5.0" + etag "~1.8.1" + finalhandler "1.1.0" + fresh "0.5.2" merge-descriptors "1.0.1" methods "~1.1.2" on-finished "~2.3.0" - parseurl "~1.3.1" + parseurl "~1.3.2" path-to-regexp "0.1.7" - proxy-addr "~1.1.5" - qs "6.5.0" + proxy-addr "~2.0.2" + qs "6.5.1" range-parser "~1.2.0" - send "0.15.4" - serve-static "1.12.4" - setprototypeof "1.0.3" + safe-buffer "5.1.1" + send "0.16.0" + serve-static "1.13.0" + setprototypeof "1.1.0" statuses "~1.3.1" type-is "~1.6.15" - utils-merge "1.0.0" - vary "~1.1.1" + utils-merge "1.0.1" + vary "~1.1.2" extend-shallow@^1.1.2: version "1.1.4" @@ -2323,7 +2345,7 @@ extend-shallow@^2.0.1: dependencies: is-extendable "^0.1.0" -extend@3, extend@^3.0.0, extend@~3.0.0: +extend@3, extend@^3.0.0, extend@~3.0.0, extend@~3.0.1: version "3.0.1" resolved "https://registry.yarnpkg.com/extend/-/extend-3.0.1.tgz#a755ea7bc1adfcc5a31ce7e762dbaadc5e636444" @@ -2424,15 +2446,27 @@ fill-range@^2.1.0: repeat-element "^1.1.2" repeat-string "^1.5.2" -finalhandler@1.0.4, finalhandler@~1.0.4: - version "1.0.4" - resolved "https://registry.yarnpkg.com/finalhandler/-/finalhandler-1.0.4.tgz#18574f2e7c4b98b8ae3b230c21f201f31bdb3fb7" +finalhandler@1.0.6: + version "1.0.6" + resolved "https://registry.yarnpkg.com/finalhandler/-/finalhandler-1.0.6.tgz#007aea33d1a4d3e42017f624848ad58d212f814f" dependencies: - debug "2.6.8" + debug "2.6.9" encodeurl "~1.0.1" escape-html "~1.0.3" on-finished "~2.3.0" - parseurl "~1.3.1" + parseurl "~1.3.2" + statuses "~1.3.1" + unpipe "~1.0.0" + +finalhandler@1.1.0: + version "1.1.0" + resolved "https://registry.yarnpkg.com/finalhandler/-/finalhandler-1.1.0.tgz#ce0b6855b45853e791b2fcc680046d88253dd7f5" + dependencies: + debug "2.6.9" + encodeurl "~1.0.1" + escape-html "~1.0.3" + on-finished "~2.3.0" + parseurl "~1.3.2" statuses "~1.3.1" unpipe "~1.0.0" @@ -2526,13 +2560,21 @@ form-data@~2.1.1: combined-stream "^1.0.5" mime-types "^2.1.12" -forwarded@~0.1.0: - version "0.1.0" - resolved "https://registry.yarnpkg.com/forwarded/-/forwarded-0.1.0.tgz#19ef9874c4ae1c297bcf078fde63a09b66a84363" +form-data@~2.3.1: + version "2.3.1" + resolved "https://registry.yarnpkg.com/form-data/-/form-data-2.3.1.tgz#6fb94fbd71885306d73d15cc497fe4cc4ecd44bf" + dependencies: + asynckit "^0.4.0" + combined-stream "^1.0.5" + mime-types "^2.1.12" -fresh@0.5.0: - version "0.5.0" - resolved "https://registry.yarnpkg.com/fresh/-/fresh-0.5.0.tgz#f474ca5e6a9246d6fd8e0953cfa9b9c805afa78e" +forwarded@~0.1.2: + version "0.1.2" + resolved "https://registry.yarnpkg.com/forwarded/-/forwarded-0.1.2.tgz#98c23dab1175657b8c0573e8ceccd91b0ff18c84" + +fresh@0.5.2: + version "0.5.2" + resolved "https://registry.yarnpkg.com/fresh/-/fresh-0.5.2.tgz#3d8cadd90d976569fa835ab1f8e4b23a105605a7" fs-access@^1.0.0: version "1.0.1" @@ -2564,11 +2606,11 @@ fs-extra@^0.26.4: rimraf "^2.2.8" fs-extra@^4.0.0: - version "4.0.1" - resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-4.0.1.tgz#7fc0c6c8957f983f57f306a24e5b9ddd8d0dd880" + version "4.0.2" + resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-4.0.2.tgz#f91704c53d1b461f893452b0c307d9997647ab6b" dependencies: graceful-fs "^4.1.2" - jsonfile "^3.0.0" + jsonfile "^4.0.0" universalify "^0.1.0" fs-extra@~1.0.0: @@ -3025,6 +3067,10 @@ har-schema@^1.0.5: version "1.0.5" resolved "https://registry.yarnpkg.com/har-schema/-/har-schema-1.0.5.tgz#d263135f43307c02c602afc8fe95970c0151369e" +har-schema@^2.0.0: + version "2.0.0" + resolved "https://registry.yarnpkg.com/har-schema/-/har-schema-2.0.0.tgz#a94c2224ebcac04782a0d9035521f24735b7ec92" + har-validator@~2.0.6: version "2.0.6" resolved "https://registry.yarnpkg.com/har-validator/-/har-validator-2.0.6.tgz#cdcbc08188265ad119b6a5a7c8ab70eecfb5d27d" @@ -3041,6 +3087,13 @@ har-validator@~4.2.1: ajv "^4.9.1" har-schema "^1.0.5" +har-validator@~5.0.3: + version "5.0.3" + resolved "https://registry.yarnpkg.com/har-validator/-/har-validator-5.0.3.tgz#ba402c266194f15956ef15e0fcf242993f6a7dfd" + dependencies: + ajv "^5.1.0" + har-schema "^2.0.0" + has-ansi@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/has-ansi/-/has-ansi-2.0.0.tgz#34f5049ce1ecdf2b0649af3ef24e45ed35416d91" @@ -3108,7 +3161,7 @@ hasha@~2.2.0: is-stream "^1.0.1" pinkie-promise "^2.0.0" -hawk@~3.1.3: +hawk@3.1.3, hawk@~3.1.3: version "3.1.3" resolved "https://registry.yarnpkg.com/hawk/-/hawk-3.1.3.tgz#078444bd7c1640b0fe540d2c9b73d59678e8e1c4" dependencies: @@ -3117,6 +3170,15 @@ hawk@~3.1.3: hoek "2.x.x" sntp "1.x.x" +hawk@~6.0.2: + version "6.0.2" + resolved "https://registry.yarnpkg.com/hawk/-/hawk-6.0.2.tgz#af4d914eb065f9b5ce4d9d11c1cb2126eecc3038" + dependencies: + boom "4.x.x" + cryptiles "3.x.x" + hoek "4.x.x" + sntp "2.x.x" + he@1.1.x: version "1.1.1" resolved "https://registry.yarnpkg.com/he/-/he-1.1.1.tgz#93410fd21b009735151f8868c2f271f3427e23fd" @@ -3150,6 +3212,10 @@ hoek@2.x.x: version "2.16.3" resolved "https://registry.yarnpkg.com/hoek/-/hoek-2.16.3.tgz#20bb7403d3cea398e91dc4710a8ff1b8274a25ed" +hoek@4.x.x: + version "4.2.0" + resolved "https://registry.yarnpkg.com/hoek/-/hoek-4.2.0.tgz#72d9d0754f7fe25ca2d01ad8f8f9a9449a89526d" + homedir-polyfill@^1.0.0, homedir-polyfill@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/homedir-polyfill/-/homedir-polyfill-1.0.1.tgz#4c2bbc8a758998feebf5ed68580f76d46768b4bc" @@ -3178,8 +3244,8 @@ html-entities@^1.2.0: resolved "https://registry.yarnpkg.com/html-entities/-/html-entities-1.2.1.tgz#0df29351f0721163515dfb9e5543e5f6eed5162f" html-minifier@^3.2.3: - version "3.5.3" - resolved "https://registry.yarnpkg.com/html-minifier/-/html-minifier-3.5.3.tgz#4a275e3b1a16639abb79b4c11191ff0d0fcf1ab9" + version "3.5.5" + resolved "https://registry.yarnpkg.com/html-minifier/-/html-minifier-3.5.5.tgz#3bdc9427e638bbe3dbde96c0eb988b044f02739e" dependencies: camel-case "3.0.x" clean-css "4.1.x" @@ -3188,7 +3254,7 @@ html-minifier@^3.2.3: ncname "1.0.x" param-case "2.1.x" relateurl "0.2.x" - uglify-js "3.0.x" + uglify-js "3.1.x" html-webpack-plugin@^2.29.0: version "2.30.1" @@ -3214,7 +3280,7 @@ http-deceiver@^1.2.7: version "1.2.7" resolved "https://registry.yarnpkg.com/http-deceiver/-/http-deceiver-1.2.7.tgz#fa7168944ab9a519d337cb0bec7284dc3e723d87" -http-errors@~1.6.1, http-errors@~1.6.2: +http-errors@1.6.2, http-errors@~1.6.2: version "1.6.2" resolved "https://registry.yarnpkg.com/http-errors/-/http-errors-1.6.2.tgz#0a002cc85707192a7e7946ceedc11155f60ec736" dependencies: @@ -3223,6 +3289,10 @@ http-errors@~1.6.1, http-errors@~1.6.2: setprototypeof "1.0.3" statuses ">= 1.3.1 < 2" +http-parser-js@>=0.4.0: + version "0.4.8" + resolved "https://registry.yarnpkg.com/http-parser-js/-/http-parser-js-0.4.8.tgz#763f75c4b771a0bb44653b07070bff6ca7bc5561" + http-proxy-middleware@~0.17.4: version "0.17.4" resolved "https://registry.yarnpkg.com/http-proxy-middleware/-/http-proxy-middleware-0.17.4.tgz#642e8848851d66f09d4f124912846dbaeb41b833" @@ -3247,6 +3317,14 @@ http-signature@~1.1.0: jsprim "^1.2.2" sshpk "^1.7.0" +http-signature@~1.2.0: + version "1.2.0" + resolved "https://registry.yarnpkg.com/http-signature/-/http-signature-1.2.0.tgz#9aecd925114772f3d95b65a60abb8f7c18fbace1" + dependencies: + assert-plus "^1.0.0" + jsprim "^1.2.2" + sshpk "^1.7.0" + https-browserify@0.0.1: version "0.0.1" resolved "https://registry.yarnpkg.com/https-browserify/-/https-browserify-0.0.1.tgz#3f91365cabe60b77ed0ebba24b454e3e09d95a82" @@ -3259,13 +3337,9 @@ https-proxy-agent@^1.0.0: debug "2" extend "3" -iconv-lite@0.4: - version "0.4.18" - resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.18.tgz#23d8656b16aae6742ac29732ea8f0336a4789cf2" - -iconv-lite@0.4.15: - version "0.4.15" - resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.15.tgz#fe265a218ac6a57cfe854927e9d04c19825eddeb" +iconv-lite@0.4, iconv-lite@0.4.19: + version "0.4.19" + resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.19.tgz#f7468f60135f5e5dad3399c0a81be9a1603a082b" icss-replace-symbols@^1.1.0: version "1.1.0" @@ -3339,8 +3413,8 @@ internal-ip@^1.2.0: meow "^3.3.0" interpret@^1.0.0: - version "1.0.3" - resolved "https://registry.yarnpkg.com/interpret/-/interpret-1.0.3.tgz#cbc35c62eeee73f19ab7b10a801511401afc0f90" + version "1.0.4" + resolved "https://registry.yarnpkg.com/interpret/-/interpret-1.0.4.tgz#820cdd588b868ffb191a809506d6c9c8f212b1b0" invariant@^2.2.2: version "2.2.2" @@ -3356,9 +3430,9 @@ ip@^1.1.0, ip@^1.1.5: version "1.1.5" resolved "https://registry.yarnpkg.com/ip/-/ip-1.1.5.tgz#bdded70114290828c0a039e72ef25f5aaec4354a" -ipaddr.js@1.4.0: - version "1.4.0" - resolved "https://registry.yarnpkg.com/ipaddr.js/-/ipaddr.js-1.4.0.tgz#296aca878a821816e5b85d0a285a99bcff4582f0" +ipaddr.js@1.5.2: + version "1.5.2" + resolved "https://registry.yarnpkg.com/ipaddr.js/-/ipaddr.js-1.5.2.tgz#d4b505bde9946987ccf0fc58d9010ff9607e3fa0" is-absolute-url@^2.0.0: version "2.1.0" @@ -3585,14 +3659,14 @@ isstream@~0.1.2: resolved "https://registry.yarnpkg.com/isstream/-/isstream-0.1.2.tgz#47e63f7af55afa6f92e1500e690eb8b8529c099a" istanbul-api@^1.1.1: - version "1.1.13" - resolved "https://registry.yarnpkg.com/istanbul-api/-/istanbul-api-1.1.13.tgz#7197f64413600ebdfec6347a2dc3d4e03f97ed5a" + version "1.1.14" + resolved "https://registry.yarnpkg.com/istanbul-api/-/istanbul-api-1.1.14.tgz#25bc5701f7c680c0ffff913de46e3619a3a6e680" dependencies: async "^2.1.4" fileset "^2.0.2" istanbul-lib-coverage "^1.1.1" istanbul-lib-hook "^1.0.7" - istanbul-lib-instrument "^1.7.5" + istanbul-lib-instrument "^1.8.0" istanbul-lib-report "^1.1.1" istanbul-lib-source-maps "^1.2.1" istanbul-reports "^1.1.2" @@ -3619,15 +3693,15 @@ istanbul-lib-hook@^1.0.7: dependencies: append-transform "^0.4.0" -istanbul-lib-instrument@^1.1.3, istanbul-lib-instrument@^1.7.5: - version "1.7.5" - resolved "https://registry.yarnpkg.com/istanbul-lib-instrument/-/istanbul-lib-instrument-1.7.5.tgz#adb596f8f0cb8b95e739206351a38a586af21b1e" +istanbul-lib-instrument@^1.1.3, istanbul-lib-instrument@^1.8.0: + version "1.8.0" + resolved "https://registry.yarnpkg.com/istanbul-lib-instrument/-/istanbul-lib-instrument-1.8.0.tgz#66f6c9421cc9ec4704f76f2db084ba9078a2b532" dependencies: babel-generator "^6.18.0" babel-template "^6.16.0" babel-traverse "^6.18.0" babel-types "^6.18.0" - babylon "^6.17.4" + babylon "^6.18.0" istanbul-lib-coverage "^1.1.1" semver "^5.3.0" @@ -3677,8 +3751,8 @@ jasminewd2@^2.1.0: resolved "https://registry.yarnpkg.com/jasminewd2/-/jasminewd2-2.1.0.tgz#da595275d1ae631de736ac0a7c7d85c9f73ef652" js-base64@^2.1.5, js-base64@^2.1.8, js-base64@^2.1.9: - version "2.1.9" - resolved "https://registry.yarnpkg.com/js-base64/-/js-base64-2.1.9.tgz#f0e80ae039a4bd654b5f281fc93f04a914a7fcce" + version "2.3.2" + resolved "https://registry.yarnpkg.com/js-base64/-/js-base64-2.3.2.tgz#a79a923666372b580f8e27f51845c6f7e8fbfbaf" js-tokens@^3.0.0, js-tokens@^3.0.2: version "3.0.2" @@ -3692,8 +3766,8 @@ js-yaml@3.6.1: esprima "^2.6.0" js-yaml@^3.4.3, js-yaml@^3.7.0: - version "3.9.1" - resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.9.1.tgz#08775cebdfdd359209f0d2acd383c8f86a6904a0" + version "3.10.0" + resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.10.0.tgz#2e78441646bd4682e963f22b6e92823c309c62dc" dependencies: argparse "^1.0.7" esprima "^4.0.0" @@ -3753,9 +3827,9 @@ jsonfile@^2.1.0: optionalDependencies: graceful-fs "^4.1.6" -jsonfile@^3.0.0: - version "3.0.1" - resolved "https://registry.yarnpkg.com/jsonfile/-/jsonfile-3.0.1.tgz#a5ecc6f65f53f662c4415c7675a0331d0992ec66" +jsonfile@^4.0.0: + version "4.0.0" + resolved "https://registry.yarnpkg.com/jsonfile/-/jsonfile-4.0.0.tgz#8771aae0799b64076b76640fca058f9c10e33ecb" optionalDependencies: graceful-fs "^4.1.6" @@ -3932,8 +4006,8 @@ less@^2.7.2: source-map "^0.5.3" license-webpack-plugin@^1.0.0: - version "1.0.0" - resolved "https://registry.yarnpkg.com/license-webpack-plugin/-/license-webpack-plugin-1.0.0.tgz#9515229075bacce8ec420cadf99a54a5f78cc7df" + version "1.0.1" + resolved "https://registry.yarnpkg.com/license-webpack-plugin/-/license-webpack-plugin-1.0.1.tgz#abeb3ab168a9930f2fd57311951dc094aaf33e45" dependencies: ejs "^2.5.7" @@ -4149,8 +4223,8 @@ log4js@^0.6.31: semver "~4.3.3" loglevel@^1.4.1: - version "1.4.1" - resolved "https://registry.yarnpkg.com/loglevel/-/loglevel-1.4.1.tgz#95b383f91a3c2756fd4ab093667e4309161f2bcd" + version "1.5.0" + resolved "https://registry.yarnpkg.com/loglevel/-/loglevel-1.5.0.tgz#3863984a2c326b986fbb965f378758a6dc8a4324" longest@^1.0.1: version "1.0.1" @@ -4308,37 +4382,29 @@ micromatch@^2.1.5, micromatch@^2.3.11, micromatch@^2.3.7: regex-cache "^0.4.2" miller-rabin@^4.0.0: - version "4.0.0" - resolved "https://registry.yarnpkg.com/miller-rabin/-/miller-rabin-4.0.0.tgz#4a62fb1d42933c05583982f4c716f6fb9e6c6d3d" + version "4.0.1" + resolved "https://registry.yarnpkg.com/miller-rabin/-/miller-rabin-4.0.1.tgz#f080351c865b0dc562a8462966daa53543c78a4d" dependencies: bn.js "^4.0.0" brorand "^1.0.1" -"mime-db@>= 1.29.0 < 2": +"mime-db@>= 1.29.0 < 2", mime-db@~1.30.0: version "1.30.0" resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.30.0.tgz#74c643da2dd9d6a45399963465b26d5ca7d71f01" -mime-db@~1.29.0: - version "1.29.0" - resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.29.0.tgz#48d26d235589651704ac5916ca06001914266878" - -mime-types@^2.1.12, mime-types@~2.1.11, mime-types@~2.1.15, mime-types@~2.1.16, mime-types@~2.1.7: - version "2.1.16" - resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.16.tgz#2b858a52e5ecd516db897ac2be87487830698e23" +mime-types@^2.1.12, mime-types@~2.1.11, mime-types@~2.1.15, mime-types@~2.1.16, mime-types@~2.1.17, mime-types@~2.1.7: + version "2.1.17" + resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.17.tgz#09d7a393f03e995a79f8af857b70a9e0ab16557a" dependencies: - mime-db "~1.29.0" - -mime@1.3.4: - version "1.3.4" - resolved "https://registry.yarnpkg.com/mime/-/mime-1.3.4.tgz#115f9e3b6b3daf2959983cb38f149a2d40eb5d53" + mime-db "~1.30.0" mime@1.3.x: version "1.3.6" resolved "https://registry.yarnpkg.com/mime/-/mime-1.3.6.tgz#591d84d3653a6b0b4a3b9df8de5aa8108e72e5e0" -mime@^1.2.11, mime@^1.3.4: - version "1.4.0" - resolved "https://registry.yarnpkg.com/mime/-/mime-1.4.0.tgz#69e9e0db51d44f2a3b56e48b7817d7d137f1a343" +mime@1.4.1, mime@^1.2.11, mime@^1.3.4: + version "1.4.1" + resolved "https://registry.yarnpkg.com/mime/-/mime-1.4.1.tgz#121f9ebc49e3766f311a76e1fa1c8003c4b03aa6" mimic-fn@^1.0.0: version "1.1.0" @@ -4454,8 +4520,8 @@ negotiator@0.6.1: resolved "https://registry.yarnpkg.com/negotiator/-/negotiator-0.6.1.tgz#2b327184e8992101177b28563fb5e7102acd0ca9" no-case@^2.2.0: - version "2.3.1" - resolved "https://registry.yarnpkg.com/no-case/-/no-case-2.3.1.tgz#7aeba1c73a52184265554b7dc03baf720df80081" + version "2.3.2" + resolved "https://registry.yarnpkg.com/no-case/-/no-case-2.3.2.tgz#60b813396be39b3f1288a4c1ed5d1e7d28b464ac" dependencies: lower-case "^1.1.1" @@ -4520,14 +4586,15 @@ node-modules-path@^1.0.0: resolved "https://registry.yarnpkg.com/node-modules-path/-/node-modules-path-1.0.1.tgz#40096b08ce7ad0ea14680863af449c7c75a5d1c8" node-pre-gyp@^0.6.36: - version "0.6.36" - resolved "https://registry.yarnpkg.com/node-pre-gyp/-/node-pre-gyp-0.6.36.tgz#db604112cb74e0d477554e9b505b17abddfab786" + version "0.6.38" + resolved "https://registry.yarnpkg.com/node-pre-gyp/-/node-pre-gyp-0.6.38.tgz#e92a20f83416415bb4086f6d1fb78b3da73d113d" dependencies: + hawk "3.1.3" mkdirp "^0.5.1" nopt "^4.0.1" npmlog "^4.0.2" rc "^1.1.7" - request "^2.81.0" + request "2.81.0" rimraf "^2.6.1" semver "^5.3.0" tar "^2.2.1" @@ -4649,7 +4716,7 @@ number-is-nan@^1.0.0: version "1.0.1" resolved "https://registry.yarnpkg.com/number-is-nan/-/number-is-nan-1.0.1.tgz#097b602b53422a522c1afb8790318336941a011d" -oauth-sign@~0.8.1: +oauth-sign@~0.8.1, oauth-sign@~0.8.2: version "0.8.2" resolved "https://registry.yarnpkg.com/oauth-sign/-/oauth-sign-0.8.2.tgz#46a6ab7f0aead8deae9ec0565780b7d4efeb9d43" @@ -4820,8 +4887,8 @@ p-locate@^2.0.0: p-limit "^1.1.0" p-map@^1.1.1: - version "1.1.1" - resolved "https://registry.yarnpkg.com/p-map/-/p-map-1.1.1.tgz#05f5e4ae97a068371bc2a5cc86bfbdbc19c4ae7a" + version "1.2.0" + resolved "https://registry.yarnpkg.com/p-map/-/p-map-1.2.0.tgz#e4e94f311eabbc8633a1e79908165fca26241b6b" pako@~0.2.0: version "0.2.9" @@ -4894,9 +4961,9 @@ parseuri@0.0.5: dependencies: better-assert "~1.0.0" -parseurl@~1.3.1: - version "1.3.1" - resolved "https://registry.yarnpkg.com/parseurl/-/parseurl-1.3.1.tgz#c8ab8c9223ba34888aa64a297b28853bec18da56" +parseurl@~1.3.2: + version "1.3.2" + resolved "https://registry.yarnpkg.com/parseurl/-/parseurl-1.3.2.tgz#fc289d4ed8993119460c156253262cdc8de65bf3" path-browserify@0.0.0: version "0.0.0" @@ -4961,8 +5028,8 @@ path-type@^2.0.0: pify "^2.0.0" pbkdf2@^3.0.3: - version "3.0.13" - resolved "https://registry.yarnpkg.com/pbkdf2/-/pbkdf2-3.0.13.tgz#c37d295531e786b1da3e3eadc840426accb0ae25" + version "3.0.14" + resolved "https://registry.yarnpkg.com/pbkdf2/-/pbkdf2-3.0.14.tgz#a35e13c64799b06ce15320f459c230e68e73bade" dependencies: create-hash "^1.1.2" create-hmac "^1.1.4" @@ -4978,6 +5045,10 @@ performance-now@^0.2.0: version "0.2.0" resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-0.2.0.tgz#33ef30c5c77d4ea21c5a53869d91b56d8f2555e5" +performance-now@^2.1.0: + version "2.1.0" + resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-2.1.0.tgz#6309f4e0e5fa913ec1c69307ae364b4b377c9e7b" + phantomjs-prebuilt@2.1.14: version "2.1.14" resolved "https://registry.yarnpkg.com/phantomjs-prebuilt/-/phantomjs-prebuilt-2.1.14.tgz#d53d311fcfb7d1d08ddb24014558f1188c516da0" @@ -5332,12 +5403,12 @@ postcss@^5.0.0, postcss@^5.0.10, postcss@^5.0.11, postcss@^5.0.12, postcss@^5.0. supports-color "^3.2.3" postcss@^6.0.0, postcss@^6.0.1, postcss@^6.0.6: - version "6.0.10" - resolved "https://registry.yarnpkg.com/postcss/-/postcss-6.0.10.tgz#c311b89734483d87a91a56dc9e53f15f4e6e84e4" + version "6.0.12" + resolved "https://registry.yarnpkg.com/postcss/-/postcss-6.0.12.tgz#6b0155089d2d212f7bd6a0cecd4c58c007403535" dependencies: chalk "^2.1.0" source-map "^0.5.7" - supports-color "^4.2.1" + supports-color "^4.4.0" prepend-http@^1.0.0: version "1.0.4" @@ -5396,12 +5467,12 @@ protractor@~5.1.0: webdriver-js-extender "^1.0.0" webdriver-manager "^12.0.6" -proxy-addr@~1.1.5: - version "1.1.5" - resolved "https://registry.yarnpkg.com/proxy-addr/-/proxy-addr-1.1.5.tgz#71c0ee3b102de3f202f3b64f608d173fcba1a918" +proxy-addr@~2.0.2: + version "2.0.2" + resolved "https://registry.yarnpkg.com/proxy-addr/-/proxy-addr-2.0.2.tgz#6571504f47bb988ec8180253f85dd7e14952bdec" dependencies: - forwarded "~0.1.0" - ipaddr.js "1.4.0" + forwarded "~0.1.2" + ipaddr.js "1.5.2" prr@~0.0.0: version "0.0.0" @@ -5441,18 +5512,18 @@ qjobs@^1.1.4: version "1.1.5" resolved "https://registry.yarnpkg.com/qjobs/-/qjobs-1.1.5.tgz#659de9f2cf8dcc27a1481276f205377272382e73" -qs@6.4.0, qs@~6.4.0: - version "6.4.0" - resolved "https://registry.yarnpkg.com/qs/-/qs-6.4.0.tgz#13e26d28ad6b0ffaa91312cd3bf708ed351e7233" - -qs@6.5.0: - version "6.5.0" - resolved "https://registry.yarnpkg.com/qs/-/qs-6.5.0.tgz#8d04954d364def3efc55b5a0793e1e2c8b1e6e49" +qs@6.5.1, qs@~6.5.1: + version "6.5.1" + resolved "https://registry.yarnpkg.com/qs/-/qs-6.5.1.tgz#349cdf6eef89ec45c12d7d5eb3fc0c870343a6d8" qs@~6.3.0: version "6.3.2" resolved "https://registry.yarnpkg.com/qs/-/qs-6.3.2.tgz#e75bd5f6e268122a2a0e0bda630b2550c166502c" +qs@~6.4.0: + version "6.4.0" + resolved "https://registry.yarnpkg.com/qs/-/qs-6.4.0.tgz#13e26d28ad6b0ffaa91312cd3bf708ed351e7233" + query-string@^4.1.0: version "4.3.4" resolved "https://registry.yarnpkg.com/query-string/-/query-string-4.3.4.tgz#bbb693b9ca915c232515b228b1a02b609043dbeb" @@ -5493,12 +5564,13 @@ range-parser@^1.0.3, range-parser@^1.2.0, range-parser@~1.2.0: version "1.2.0" resolved "https://registry.yarnpkg.com/range-parser/-/range-parser-1.2.0.tgz#f49be6b487894ddc40dcc94a322f611092e00d5e" -raw-body@~2.2.0: - version "2.2.0" - resolved "https://registry.yarnpkg.com/raw-body/-/raw-body-2.2.0.tgz#994976cf6a5096a41162840492f0bdc5d6e7fb96" +raw-body@2.3.2: + version "2.3.2" + resolved "https://registry.yarnpkg.com/raw-body/-/raw-body-2.3.2.tgz#bcd60c77d3eb93cde0050295c3f379389bc88f89" dependencies: - bytes "2.4.0" - iconv-lite "0.4.15" + bytes "3.0.0" + http-errors "1.6.2" + iconv-lite "0.4.19" unpipe "1.0.0" raw-loader@^0.5.1: @@ -5626,19 +5698,18 @@ reflect-metadata@^0.1.2: resolved "https://registry.yarnpkg.com/reflect-metadata/-/reflect-metadata-0.1.10.tgz#b4f83704416acad89988c9b15635d47e03b9344a" regenerate@^1.2.1: - version "1.3.2" - resolved "https://registry.yarnpkg.com/regenerate/-/regenerate-1.3.2.tgz#d1941c67bad437e1be76433add5b385f95b19260" + version "1.3.3" + resolved "https://registry.yarnpkg.com/regenerate/-/regenerate-1.3.3.tgz#0c336d3980553d755c39b586ae3b20aa49c82b7f" regenerator-runtime@^0.11.0: version "0.11.0" resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.11.0.tgz#7e54fe5b5ccd5d6624ea6255c3473be090b802e1" regex-cache@^0.4.2: - version "0.4.3" - resolved "https://registry.yarnpkg.com/regex-cache/-/regex-cache-0.4.3.tgz#9b1a6c35d4d0dfcef5711ae651e8e9d3d7114145" + version "0.4.4" + resolved "https://registry.yarnpkg.com/regex-cache/-/regex-cache-0.4.4.tgz#75bdc58a2a1496cec48a12835bc54c8d562336dd" dependencies: is-equal-shallow "^0.1.3" - is-primitive "^2.0.0" regexpu-core@^1.0.0: version "1.0.0" @@ -5704,18 +5775,45 @@ request-progress@~2.0.1: dependencies: throttleit "^1.0.0" -request@2, request@^2.61.0, request@^2.72.0, request@^2.78.0, request@^2.79.0, request@^2.81.0, request@~2.81.0: - version "2.81.0" - resolved "https://registry.yarnpkg.com/request/-/request-2.81.0.tgz#c6928946a0e06c5f8d6f8a9333469ffda46298a0" +request@2, request@^2.61.0, request@^2.72.0, request@^2.78.0, request@^2.79.0: + version "2.83.0" + resolved "https://registry.yarnpkg.com/request/-/request-2.83.0.tgz#ca0b65da02ed62935887808e6f510381034e3356" + dependencies: + aws-sign2 "~0.7.0" + aws4 "^1.6.0" + caseless "~0.12.0" + combined-stream "~1.0.5" + extend "~3.0.1" + forever-agent "~0.6.1" + form-data "~2.3.1" + har-validator "~5.0.3" + hawk "~6.0.2" + http-signature "~1.2.0" + is-typedarray "~1.0.0" + isstream "~0.1.2" + json-stringify-safe "~5.0.1" + mime-types "~2.1.17" + oauth-sign "~0.8.2" + performance-now "^2.1.0" + qs "~6.5.1" + safe-buffer "^5.1.1" + stringstream "~0.0.5" + tough-cookie "~2.3.3" + tunnel-agent "^0.6.0" + uuid "^3.1.0" + +request@2.79.0, request@~2.79.0: + version "2.79.0" + resolved "https://registry.yarnpkg.com/request/-/request-2.79.0.tgz#4dfe5bf6be8b8cdc37fcf93e04b65577722710de" dependencies: aws-sign2 "~0.6.0" aws4 "^1.2.1" - caseless "~0.12.0" + caseless "~0.11.0" combined-stream "~1.0.5" extend "~3.0.0" forever-agent "~0.6.1" form-data "~2.1.1" - har-validator "~4.2.1" + har-validator "~2.0.6" hawk "~3.1.3" http-signature "~1.1.0" is-typedarray "~1.0.0" @@ -5723,26 +5821,24 @@ request@2, request@^2.61.0, request@^2.72.0, request@^2.78.0, request@^2.79.0, r json-stringify-safe "~5.0.1" mime-types "~2.1.7" oauth-sign "~0.8.1" - performance-now "^0.2.0" - qs "~6.4.0" - safe-buffer "^5.0.1" + qs "~6.3.0" stringstream "~0.0.4" tough-cookie "~2.3.0" - tunnel-agent "^0.6.0" + tunnel-agent "~0.4.1" uuid "^3.0.0" -request@2.79.0, request@~2.79.0: - version "2.79.0" - resolved "https://registry.yarnpkg.com/request/-/request-2.79.0.tgz#4dfe5bf6be8b8cdc37fcf93e04b65577722710de" +request@2.81.0, request@~2.81.0: + version "2.81.0" + resolved "https://registry.yarnpkg.com/request/-/request-2.81.0.tgz#c6928946a0e06c5f8d6f8a9333469ffda46298a0" dependencies: aws-sign2 "~0.6.0" aws4 "^1.2.1" - caseless "~0.11.0" + caseless "~0.12.0" combined-stream "~1.0.5" extend "~3.0.0" forever-agent "~0.6.1" form-data "~2.1.1" - har-validator "~2.0.6" + har-validator "~4.2.1" hawk "~3.1.3" http-signature "~1.1.0" is-typedarray "~1.0.0" @@ -5750,10 +5846,12 @@ request@2.79.0, request@~2.79.0: json-stringify-safe "~5.0.1" mime-types "~2.1.7" oauth-sign "~0.8.1" - qs "~6.3.0" + performance-now "^0.2.0" + qs "~6.4.0" + safe-buffer "^5.0.1" stringstream "~0.0.4" tough-cookie "~2.3.0" - tunnel-agent "~0.4.1" + tunnel-agent "^0.6.0" uuid "^3.0.0" require-dir@0.3.0: @@ -5800,8 +5898,8 @@ right-align@^0.1.1: align-text "^0.1.1" rimraf@2, rimraf@^2.2.8, rimraf@^2.3.3, rimraf@^2.5.1, rimraf@^2.5.2, rimraf@^2.5.4, rimraf@^2.6.1: - version "2.6.1" - resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.6.1.tgz#c2338ec643df7a1b7fe5c54fa86f57428a55f33d" + version "2.6.2" + resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.6.2.tgz#2ed8150d24a16ea8651e6d6ef0f47c4158ce7a36" dependencies: glob "^7.0.5" @@ -5967,19 +6065,19 @@ semver@~5.3.0: version "5.3.0" resolved "https://registry.yarnpkg.com/semver/-/semver-5.3.0.tgz#9b2ce5d3de02d17c6012ad326aa6b4d0cf54f94f" -send@0.15.4: - version "0.15.4" - resolved "https://registry.yarnpkg.com/send/-/send-0.15.4.tgz#985faa3e284b0273c793364a35c6737bd93905b9" +send@0.16.0: + version "0.16.0" + resolved "https://registry.yarnpkg.com/send/-/send-0.16.0.tgz#16338dbb9a2ede4ad57b48420ec3b82d8e80a57b" dependencies: - debug "2.6.8" + debug "2.6.9" depd "~1.1.1" destroy "~1.0.4" encodeurl "~1.0.1" escape-html "~1.0.3" - etag "~1.8.0" - fresh "0.5.0" + etag "~1.8.1" + fresh "0.5.2" http-errors "~1.6.2" - mime "1.3.4" + mime "1.4.1" ms "2.0.0" on-finished "~2.3.0" range-parser "~1.2.0" @@ -5990,25 +6088,25 @@ sequencify@~0.0.7: resolved "https://registry.yarnpkg.com/sequencify/-/sequencify-0.0.7.tgz#90cff19d02e07027fd767f5ead3e7b95d1e7380c" serve-index@^1.7.2: - version "1.9.0" - resolved "https://registry.yarnpkg.com/serve-index/-/serve-index-1.9.0.tgz#d2b280fc560d616ee81b48bf0fa82abed2485ce7" + version "1.9.1" + resolved "https://registry.yarnpkg.com/serve-index/-/serve-index-1.9.1.tgz#d3768d69b1e7d82e5ce050fff5b453bea12a9239" dependencies: - accepts "~1.3.3" + accepts "~1.3.4" batch "0.6.1" - debug "2.6.8" + debug "2.6.9" escape-html "~1.0.3" - http-errors "~1.6.1" - mime-types "~2.1.15" - parseurl "~1.3.1" + http-errors "~1.6.2" + mime-types "~2.1.17" + parseurl "~1.3.2" -serve-static@1.12.4: - version "1.12.4" - resolved "https://registry.yarnpkg.com/serve-static/-/serve-static-1.12.4.tgz#9b6aa98eeb7253c4eedc4c1f6fdbca609901a961" +serve-static@1.13.0: + version "1.13.0" + resolved "https://registry.yarnpkg.com/serve-static/-/serve-static-1.13.0.tgz#810c91db800e94ba287eae6b4e06caab9fdc16f1" dependencies: encodeurl "~1.0.1" escape-html "~1.0.3" - parseurl "~1.3.1" - send "0.15.4" + parseurl "~1.3.2" + send "0.16.0" set-blocking@^2.0.0, set-blocking@~2.0.0: version "2.0.0" @@ -6026,11 +6124,16 @@ setprototypeof@1.0.3: version "1.0.3" resolved "https://registry.yarnpkg.com/setprototypeof/-/setprototypeof-1.0.3.tgz#66567e37043eeb4f04d91bd658c0cbefb55b8e04" +setprototypeof@1.1.0: + version "1.1.0" + resolved "https://registry.yarnpkg.com/setprototypeof/-/setprototypeof-1.1.0.tgz#d0bd85536887b6fe7c0d818cb962d9d91c54e656" + sha.js@^2.4.0, sha.js@^2.4.8: - version "2.4.8" - resolved "https://registry.yarnpkg.com/sha.js/-/sha.js-2.4.8.tgz#37068c2c476b6baf402d14a49c67f597921f634f" + version "2.4.9" + resolved "https://registry.yarnpkg.com/sha.js/-/sha.js-2.4.9.tgz#98f64880474b74f4a38b8da9d3c0f2d104633e7d" dependencies: inherits "^2.0.1" + safe-buffer "^5.0.1" shallow-clone@^0.1.2: version "0.1.2" @@ -6085,6 +6188,12 @@ sntp@1.x.x: dependencies: hoek "2.x.x" +sntp@2.x.x: + version "2.0.2" + resolved "https://registry.yarnpkg.com/sntp/-/sntp-2.0.2.tgz#5064110f0af85f7cfdb7d6b67a40028ce52b4b2b" + dependencies: + hoek "4.x.x" + socket.io-adapter@0.5.0: version "0.5.0" resolved "https://registry.yarnpkg.com/socket.io-adapter/-/socket.io-adapter-0.5.0.tgz#cb6d4bb8bec81e1078b99677f9ced0046066bb8b" @@ -6166,8 +6275,8 @@ source-map-loader@^0.2.0: source-map "~0.1.33" source-map-support@^0.4.0, source-map-support@^0.4.1, source-map-support@^0.4.2, source-map-support@~0.4.0: - version "0.4.16" - resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.4.16.tgz#16fecf98212467d017d586a2af68d628b9421cd8" + version "0.4.18" + resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.4.18.tgz#0286a6de8be42641338594e97ccea75f0a2c585f" dependencies: source-map "^0.5.6" @@ -6314,7 +6423,7 @@ string_decoder@~1.0.3: dependencies: safe-buffer "~5.1.0" -stringstream@~0.0.4: +stringstream@~0.0.4, stringstream@~0.0.5: version "0.0.5" resolved "https://registry.yarnpkg.com/stringstream/-/stringstream-0.0.5.tgz#4e484cd4de5a0bbbee18e46307710a8a81621878" @@ -6403,9 +6512,9 @@ supports-color@^3.1.1, supports-color@^3.1.2, supports-color@^3.2.3: dependencies: has-flag "^1.0.0" -supports-color@^4.0.0, supports-color@^4.2.1: - version "4.3.0" - resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-4.3.0.tgz#0fa3755bb961136cf75ff2ee3eb775822c04a31b" +supports-color@^4.0.0, supports-color@^4.2.1, supports-color@^4.4.0: + version "4.4.0" + resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-4.4.0.tgz#883f7ddabc165142b2a61427f3352ded195d1a3e" dependencies: has-flag "^2.0.0" @@ -6560,12 +6669,12 @@ to-fast-properties@^1.0.3: resolved "https://registry.yarnpkg.com/to-fast-properties/-/to-fast-properties-1.0.3.tgz#b83571fa4d8c25b82e231b06e3a3055de4ca1a47" toposort@^1.0.0: - version "1.0.3" - resolved "https://registry.yarnpkg.com/toposort/-/toposort-1.0.3.tgz#f02cd8a74bd8be2fc0e98611c3bacb95a171869c" + version "1.0.4" + resolved "https://registry.yarnpkg.com/toposort/-/toposort-1.0.4.tgz#a86107690cbee8cae43b349d2f60162500924dfc" -tough-cookie@~2.3.0: - version "2.3.2" - resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-2.3.2.tgz#f081f76e4c85720e6c37a5faced737150d84072a" +tough-cookie@~2.3.0, tough-cookie@~2.3.3: + version "2.3.3" + resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-2.3.3.tgz#0b618a5565b6dea90bf3425d04d55edc475a7561" dependencies: punycode "^1.4.1" @@ -6661,8 +6770,8 @@ typedarray@^0.0.6, typedarray@~0.0.5: resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777" "typescript@>=2.0.0 <2.6.0", typescript@^2.3.3: - version "2.5.2" - resolved "https://registry.yarnpkg.com/typescript/-/typescript-2.5.2.tgz#038a95f7d9bbb420b1bf35ba31d4c5c1dd3ffe34" + version "2.5.3" + resolved "https://registry.yarnpkg.com/typescript/-/typescript-2.5.3.tgz#df3dcdc38f3beb800d4bc322646b04a3f6ca7f0d" typescript@~2.3.2: version "2.3.4" @@ -6672,9 +6781,9 @@ typo-js@*: version "1.0.3" resolved "https://registry.yarnpkg.com/typo-js/-/typo-js-1.0.3.tgz#54d8ebc7949f1a7810908b6002c6841526c99d5a" -uglify-js@3.0.x: - version "3.0.28" - resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-3.0.28.tgz#96b8495f0272944787b5843a1679aa326640d5f7" +uglify-js@3.1.x: + version "3.1.2" + resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-3.1.2.tgz#b50bcf15a5fd9e9ed40afbcdef3b59d6891b291f" dependencies: commander "~2.11.0" source-map "~0.5.1" @@ -6814,15 +6923,15 @@ utila@~0.4: version "0.4.0" resolved "https://registry.yarnpkg.com/utila/-/utila-0.4.0.tgz#8a16a05d445657a3aea5eecc5b12a4fa5379772c" -utils-merge@1.0.0: - version "1.0.0" - resolved "https://registry.yarnpkg.com/utils-merge/-/utils-merge-1.0.0.tgz#0294fb922bb9375153541c4f7096231f287c8af8" +utils-merge@1.0.1: + version "1.0.1" + resolved "https://registry.yarnpkg.com/utils-merge/-/utils-merge-1.0.1.tgz#9f95710f50a267947b2ccc124741c1028427e713" uuid@^2.0.2: version "2.0.3" resolved "https://registry.yarnpkg.com/uuid/-/uuid-2.0.3.tgz#67e2e863797215530dff318e5bf9dcebfd47b21a" -uuid@^3.0.0: +uuid@^3.0.0, uuid@^3.1.0: version "3.1.0" resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.1.0.tgz#3dd3d3e790abc24d7b0d3a034ffababe28ebbc04" @@ -6833,10 +6942,10 @@ v8flags@^2.0.2: user-home "^1.1.1" v8flags@^3.0.0: - version "3.0.0" - resolved "https://registry.yarnpkg.com/v8flags/-/v8flags-3.0.0.tgz#4be9604488e0c4123645def705b1848d16b8e01f" + version "3.0.1" + resolved "https://registry.yarnpkg.com/v8flags/-/v8flags-3.0.1.tgz#dce8fc379c17d9f2c9e9ed78d89ce00052b1b76b" dependencies: - user-home "^1.1.1" + homedir-polyfill "^1.0.1" vali-date@^1.0.0: version "1.0.0" @@ -6849,9 +6958,9 @@ validate-npm-package-license@^3.0.1: spdx-correct "~1.0.0" spdx-expression-parse "~1.0.0" -vary@~1.1.1: - version "1.1.1" - resolved "https://registry.yarnpkg.com/vary/-/vary-1.1.1.tgz#67535ebb694c1d52257457984665323f587e8d37" +vary@~1.1.2: + version "1.1.2" + resolved "https://registry.yarnpkg.com/vary/-/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc" vendors@^1.0.0: version "1.0.1" @@ -7070,14 +7179,15 @@ webpack@~3.5.5: yargs "^8.0.2" websocket-driver@>=0.5.1: - version "0.6.5" - resolved "https://registry.yarnpkg.com/websocket-driver/-/websocket-driver-0.6.5.tgz#5cb2556ceb85f4373c6d8238aa691c8454e13a36" + version "0.7.0" + resolved "https://registry.yarnpkg.com/websocket-driver/-/websocket-driver-0.7.0.tgz#0caf9d2d755d93aee049d4bdd0d3fe2cca2a24eb" dependencies: + http-parser-js ">=0.4.0" websocket-extensions ">=0.1.1" websocket-extensions@>=0.1.1: - version "0.1.1" - resolved "https://registry.yarnpkg.com/websocket-extensions/-/websocket-extensions-0.1.1.tgz#76899499c184b6ef754377c2dbb0cd6cb55d29e7" + version "0.1.2" + resolved "https://registry.yarnpkg.com/websocket-extensions/-/websocket-extensions-0.1.2.tgz#0e18781de629a18308ce1481650f67ffa2693a5d" when@~3.6.x: version "3.6.4" @@ -7303,6 +7413,10 @@ yn@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/yn/-/yn-2.0.0.tgz#e5adabc8acf408f6385fc76495684c88e6af689a" -zone.js@0.8.17, zone.js@^0.8.14: +zone.js@0.8.17: version "0.8.17" resolved "https://registry.yarnpkg.com/zone.js/-/zone.js-0.8.17.tgz#4c5e5185a857da8da793daf3919371c5a36b2a0b" + +zone.js@^0.8.14: + version "0.8.18" + resolved "https://registry.yarnpkg.com/zone.js/-/zone.js-0.8.18.tgz#8cecb3977fcd1b3090562ff4570e2847e752b48d" From 6220b2a7a867f66fd6892888a2e3b21a9a645c74 Mon Sep 17 00:00:00 2001 From: Roman Kolesnikov Date: Wed, 4 Oct 2017 21:30:36 +0300 Subject: [PATCH 11/16] fix(file-upload): clear internal file input on cancel (#905) --- src/platform/core/file/file-upload/file-upload.component.ts | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/platform/core/file/file-upload/file-upload.component.ts b/src/platform/core/file/file-upload/file-upload.component.ts index f391647180..56fd5613cf 100644 --- a/src/platform/core/file/file-upload/file-upload.component.ts +++ b/src/platform/core/file/file-upload/file-upload.component.ts @@ -1,4 +1,4 @@ -import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy, ContentChild, ChangeDetectorRef } from '@angular/core'; +import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy, ViewChild, ContentChild, ChangeDetectorRef } from '@angular/core'; import { coerceBooleanProperty } from '@angular/cdk/coercion'; import { ICanDisable, mixinDisabled } from '../../common/common.module'; @@ -23,6 +23,8 @@ export class TdFileUploadComponent extends _TdFileUploadMixinBase implements ICa files: FileList | File; + @ViewChild(TdFileInputComponent) fileInput: TdFileInputComponent; + @ContentChild(TdFileInputLabelDirective) inputLabel: TdFileInputLabelDirective; /** @@ -111,6 +113,7 @@ export class TdFileUploadComponent extends _TdFileUploadMixinBase implements ICa cancel(): void { this.files = undefined; this.onCancel.emit(undefined); + this.fileInput.clear(); this._changeDetectorRef.markForCheck(); } From 00fcf66f2bbe0b86f488ae7ba2bffdd163ac32fe Mon Sep 17 00:00:00 2001 From: Kyle Ledbetter Date: Wed, 4 Oct 2017 15:33:56 -0700 Subject: [PATCH 12/16] feat(resources): update layout & add Illustrator (#911) --- src/app/assets/icons/illustrator.svg | 1 + .../resources/resources.component.html | 101 ++++-------------- 2 files changed, 20 insertions(+), 82 deletions(-) create mode 100644 src/app/assets/icons/illustrator.svg diff --git a/src/app/assets/icons/illustrator.svg b/src/app/assets/icons/illustrator.svg new file mode 100644 index 0000000000..f8347a439a --- /dev/null +++ b/src/app/assets/icons/illustrator.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/app/components/style-guide/resources/resources.component.html b/src/app/components/style-guide/resources/resources.component.html index 973ccd8b6e..d015be70b2 100644 --- a/src/app/components/style-guide/resources/resources.component.html +++ b/src/app/components/style-guide/resources/resources.component.html @@ -6,93 +6,30 @@ - - Sketch icon - Sketch Template - Covalent template for the OSX Sketch App - + Templates + download the template of your preferred design application - -

    Create static mockups that are identical to the Covalent layouts and Angular-Material components!

    - - Sketch Template Screenshot + + + Axure icon +

    Axure RP Libraries

    +

    Covalent libraries for the Axure RP

     - - - -

    4 Covalent Layouts

    -

    nav view, manage list, card over & nav list

    -     - -

    4 responsive formats

    -

    desktop, tablet landscape, table portrait & mobile

    -     - -

    All Core Material Design Components

    -

    built using scalable Sketch symbols

    -     - -

    Material Design Patterns

    -

    tons of cards, lists, settings & forms

    -     - -

    Material Design Typography & Iconography

    -

    Sketch shared text styles & SVG icons

    -     -     -     -     - - - Sketch Template - -     - - - Axure icon - Axure Widget Library - Covalent widget library for Axure RP - - - -

    Prototype interactive UX flows that perfectly complement the Sketch template and production Covalent code.

    - - Axure Widget Library Screenshot + + Illustrator icon +

    Illustrator Template

    +

    Covalent template for the Adobe Illustrator

     - - - -

    4 Covalent Layouts

    -

    nav view, manage list, card over & nav list

    -     - -

    Interactive Prototype Elements

    -

    buttons, tabs, stepper

    -     - -

    Interactive Navigation Drawer

    -

    mimics the Material Design responsive sidenav

    -     - -

    Form and Form Components

    -

    interactive inputs, radio, checkboxes, toggles & more

    -     - -

    Vector SVG Iconsets

    -

    Material Design sets of icons

    -     - -

    Pre-built Material Design Patterns

    -

    cards, lists, settings & more

    -     -     -     -     + + Sketch icon +

    Sketch Template

    +

    Covalent template for the macOS Sketch App

    +     + - - Axure Library - View Prototype + + Resources Repo     From 658680a03ba6fa7f4b7e3361e2404b5588743d99 Mon Sep 17 00:00:00 2001 From: Ed Morales Date: Thu, 5 Oct 2017 09:43:55 -0700 Subject: [PATCH 13/16] chore(): add mat- prefixes to all our md- prefixed classes (ignoring typography for now) (#912) --- src/platform/core/common/platform.scss | 2 +- src/platform/core/common/styles/_content.scss | 17 ++- src/platform/core/common/styles/_mixins.scss | 31 ++--- src/platform/core/common/styles/_shadows.scss | 4 +- .../core/common/styles/_structure.scss | 116 +++--------------- .../core/common/styles/_typography.scss | 8 +- .../core/common/styles/_variables.scss | 2 +- .../core/common/styles/_whiteframe.scss | 88 +++++-------- .../core/common/styles/font/_font.scss | 30 ++--- src/platform/core/steps/_steps-theme.scss | 2 +- 10 files changed, 88 insertions(+), 212 deletions(-) diff --git a/src/platform/core/common/platform.scss b/src/platform/core/common/platform.scss index 24812d520a..8f10607ef6 100644 --- a/src/platform/core/common/platform.scss +++ b/src/platform/core/common/platform.scss @@ -1,4 +1,4 @@ -$md-font-url: 'styles/font/'; +$mat-font-url: 'styles/font/'; @import "styles/font/font"; @import "styles/variables"; @import "styles/button"; diff --git a/src/platform/core/common/styles/_content.scss b/src/platform/core/common/styles/_content.scss index 734f8a4e1d..40cc357f8e 100644 --- a/src/platform/core/common/styles/_content.scss +++ b/src/platform/core/common/styles/_content.scss @@ -2,7 +2,10 @@ mat-sidenav-container { & > md-content, & > [md-content], - & > .md-content { + & > .md-content, + & > mat-content, + & > [mat-content], + & > .mat-content { height: 100%; overflow: hidden; } @@ -10,18 +13,24 @@ mat-sidenav-container { md-content, [md-content], -.md-content { +.md-content, +mat-content, +[mat-content], +.mat-content, + { display: block; position: relative; overflow: auto; -webkit-overflow-scrolling: touch; - &[md-scroll-y] { + &[md-scroll-y], + &.mat-scroll-y { overflow-y: auto; overflow-x: hidden; } - &[md-scroll-x] { + &[md-scroll-x], + &.mat-scroll-x { overflow-x: auto; overflow-y: hidden; } diff --git a/src/platform/core/common/styles/_mixins.scss b/src/platform/core/common/styles/_mixins.scss index 36aaf7d0e0..322c02ffb0 100644 --- a/src/platform/core/common/styles/_mixins.scss +++ b/src/platform/core/common/styles/_mixins.scss @@ -4,7 +4,7 @@ * Mixin that creates a new stacking context. * see https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context */ -@mixin md-stacking-context() { +@mixin mat-stacking-context() { position: relative; // Use a transform to create a new stacking context. @@ -44,54 +44,37 @@ } } -@mixin md-shadow-bottom-z-1() { +@mixin mat-shadow-bottom-z-1() { box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26); } -@mixin md-shadow-bottom-z-2() { +@mixin mat-shadow-bottom-z-2() { box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.4); } -// Mixin for a "flat" input that can be used for components that contain an input -// (datepicker, autocomplete). -@mixin md-flat-input() { - font-size: 14px; - - box-sizing: border-box; - border: none; - box-shadow: none; - outline: none; - background: transparent; - - // The the "clear X" that IE adds to input[type="search"] - &::-ms-clear { - display: none; - } -} - // Typography mixins -@mixin md-title() { +@mixin mat-title() { font-size: $title-font-size-base; font-weight: 500; letter-spacing: 0.005em; } -@mixin md-body-1() { +@mixin mat-body-1() { font-size: $body-font-size-base; font-weight: 400; letter-spacing: 0.010em; line-height: rem(2); } -@mixin md-body-2() { +@mixin mat-body-2() { font-size: $body-font-size-base; font-weight: 500; letter-spacing: 0.010em; line-height: rem(2.4); } -@mixin md-subhead() { +@mixin mat-subhead() { font-size: $subhead-font-size-base; font-weight: 400; letter-spacing: 0.010em; diff --git a/src/platform/core/common/styles/_shadows.scss b/src/platform/core/common/styles/_shadows.scss index 585c74e9f5..bb2185e1e1 100644 --- a/src/platform/core/common/styles/_shadows.scss +++ b/src/platform/core/common/styles/_shadows.scss @@ -1,8 +1,8 @@ // Elements can have an "elevation" from 1 to 5, signified by shadows. // See http://google.com/design/spec/what-is-material/objects-in-3d-space.html -$md-shadow-bottom-z-1: 0 2px 5px 0 rgba(0, 0, 0, 0.26); -$md-shadow-bottom-z-2: 0 4px 8px 0 rgba(0, 0, 0, 0.4); +$mat-shadow-bottom-z-1: 0 2px 5px 0 rgba(0, 0, 0, 0.26); +$mat-shadow-bottom-z-2: 0 4px 8px 0 rgba(0, 0, 0, 0.4); // Whiteframes diff --git a/src/platform/core/common/styles/_structure.scss b/src/platform/core/common/styles/_structure.scss index 477c56cb31..80875db559 100644 --- a/src/platform/core/common/styles/_structure.scss +++ b/src/platform/core/common/styles/_structure.scss @@ -67,7 +67,8 @@ input { } } -.md-visually-hidden { +.md-visually-hidden, +.mat-visually-hidden { border: 0; clip: rect(0 0 0 0); height: 1px; @@ -79,7 +80,8 @@ input { width: 1px; } -.md-shadow { +.md-shadow, +.mat-shadow { position: absolute; top: 0; left: 0; @@ -89,120 +91,34 @@ input { pointer-events: none; } -.md-shadow-bottom-z-1 { +.md-shadow-bottom-z-1, +.mat-shadow-bottom-z-1 { box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26); } -.md-shadow-bottom-z-2 { +.md-shadow-bottom-z-2, +.mat-shadow-bottom-z-2{ box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.4); } -.md-shadow-animated.md-shadow { +.md-shadow-animated.md-shadow, +.mat-shadow-animated.mat-shadow { transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1); } -/* - * A container inside of a rippling element (eg a button), - * which contains all of the individual ripples - */ -.md-ripple-container { - pointer-events: none; - position: absolute; - overflow: hidden; - left: 0; - [dir='rtl'] & { - right:0; - left: auto; - } - top: 0; - width: 100%; - height: 100%; -} - -/* - * A container inside of a rippling element (eg a button), - * which contains all of the individual ripples - */ -.md-ripple-container { - pointer-events: none; - position: absolute; - overflow: hidden; - left: 0; - [dir='rtl'] & { - right:0; - left: auto; - } - top: 0; - width: 100%; - height: 100%; - transition: all 0.55s $swift-ease-out-timing-function; -} - -.md-ripple { - position: absolute; - transform: translate(-50%, -50%) scale(0); - transform-origin: 50% 50%; - opacity: 0; - border-radius: 50%; - &.md-ripple-placed { - $sizeDuration: 0.45s * 2; - transition: margin $sizeDuration $swift-ease-out-timing-function, - border $sizeDuration $swift-ease-out-timing-function, - width $sizeDuration $swift-ease-out-timing-function, - height $sizeDuration $swift-ease-out-timing-function, - opacity $sizeDuration $swift-ease-out-timing-function, - transform $sizeDuration $swift-ease-out-timing-function; - } - &.md-ripple-scaled { - transform: translate(-50%, -50%) scale(1); - } - &.md-ripple-active, &.md-ripple-full, &.md-ripple-visible { - opacity: 0.20; - } -} - -.md-padding { +.md-padding, +.mat-padding { padding: 8px; } -.md-margin { +.md-margin, +.mat-margin { margin: 8px; } -.md-scroll-mask { - position: absolute; - background-color: transparent; - top: 0; - right: 0; - bottom: 0; - left: 0; - > .md-scroll-mask-bar { - display: block; - position: absolute; - background-color: #fafafa; - right: 0; - [dir='rtl'] & { - left:0; - right: auto; - } - top: 0; - bottom: 0; - z-index: $z-index-scroll-mask; - box-shadow: inset 0px 0px 1px rgba(0, 0, 0, 0.3) - } -} - -.md-no-select { - -webkit-touch-callout: none; - -webkit-user-select: none; - -khtml-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; -} - @media (min-width: $layout-breakpoint-sm) { - .md-padding { + .md-padding, + .mat-padding { padding: 16px; } } diff --git a/src/platform/core/common/styles/_typography.scss b/src/platform/core/common/styles/_typography.scss index 1e79d25438..48d48842e4 100644 --- a/src/platform/core/common/styles/_typography.scss +++ b/src/platform/core/common/styles/_typography.scss @@ -73,22 +73,22 @@ body { } .md-title { - @include md-title(); + @include mat-title(); } .md-subhead { - @include md-subhead(); + @include mat-subhead(); } /************ * Body Copy ************/ .md-body-1 { - @include md-body-1(); + @include mat-body-1(); } .md-body-2 { - @include md-body-2(); + @include mat-body-2(); } .md-caption { diff --git a/src/platform/core/common/styles/_variables.scss b/src/platform/core/common/styles/_variables.scss index e96a2fb6d2..674b042f19 100644 --- a/src/platform/core/common/styles/_variables.scss +++ b/src/platform/core/common/styles/_variables.scss @@ -32,7 +32,7 @@ $layout-breakpoint-lg: 1920px !default; $layout-gutter-width: ($baseline-grid * 2) !default; // Typography -$md-body-font-size-base: rem(1.400) !default; +$mat-body-font-size-base: rem(1.400) !default; // App bar variables $app-bar-height: 64px; diff --git a/src/platform/core/common/styles/_whiteframe.scss b/src/platform/core/common/styles/_whiteframe.scss index be9f3fd25e..7d88810cc0 100644 --- a/src/platform/core/common/styles/_whiteframe.scss +++ b/src/platform/core/common/styles/_whiteframe.scss @@ -1,103 +1,71 @@ @import 'shadows'; -.md-whiteframe-1dp, .md-whiteframe-z1 { +.md-whiteframe-1dp, .md-whiteframe-z1, +.mat-whiteframe-1dp, .mat-whiteframe-z1 { box-shadow: $whiteframe-shadow-1dp; } -.md-whiteframe-2dp { +.md-whiteframe-2dp, +.mat-whiteframe-2dp { box-shadow: $whiteframe-shadow-2dp; } -.md-whiteframe-3dp { +.md-whiteframe-3dp, +.mat-whiteframe-3dp { box-shadow: $whiteframe-shadow-3dp; } -.md-whiteframe-4dp, .md-whiteframe-z2 { +.md-whiteframe-4dp, .md-whiteframe-z2, +.mat-whiteframe-4dp, .mat-whiteframe-z2 { box-shadow: $whiteframe-shadow-4dp; } -.md-whiteframe-5dp { +.md-whiteframe-5dp, +.mat-whiteframe-5dp { box-shadow: $whiteframe-shadow-5dp; } -.md-whiteframe-6dp { +.md-whiteframe-6dp, +.mat-whiteframe-6dp { box-shadow: $whiteframe-shadow-6dp; } -.md-whiteframe-7dp, .md-whiteframe-z3 { +.md-whiteframe-7dp, .md-whiteframe-z3, +.mat-whiteframe-7dp, .mat-whiteframe-z3 { box-shadow: $whiteframe-shadow-7dp; } -.md-whiteframe-8dp { +.md-whiteframe-8dp, +.mat-whiteframe-8dp { box-shadow: $whiteframe-shadow-8dp; } -.md-whiteframe-9dp { +.md-whiteframe-9dp, +.mat-whiteframe-9dp { box-shadow: $whiteframe-shadow-9dp; } -.md-whiteframe-10dp, .md-whiteframe-z4 { +.md-whiteframe-10dp, .md-whiteframe-z4, +.mat-whiteframe-10dp, .mat-whiteframe-z4 { box-shadow: $whiteframe-shadow-10dp; } -.md-whiteframe-11dp { +.md-whiteframe-11dp, +.mat-whiteframe-11dp { box-shadow: $whiteframe-shadow-11dp; } -.md-whiteframe-12dp { +.md-whiteframe-12dp, +.mat-whiteframe-12dp { box-shadow: $whiteframe-shadow-12dp; } -.md-whiteframe-13dp, .md-whiteframe-z5 { +.md-whiteframe-13dp, .md-whiteframe-z5, +.mat-whiteframe-13dp, .mat-whiteframe-z5 { box-shadow: $whiteframe-shadow-13dp; } -.md-whiteframe-14dp { +.md-whiteframe-14dp, +.mat-whiteframe-14dp { box-shadow: $whiteframe-shadow-14dp; } - -.md-whiteframe-15dp { - box-shadow: $whiteframe-shadow-15dp; -} - -.md-whiteframe-16dp { - box-shadow: $whiteframe-shadow-16dp; -} - -.md-whiteframe-17dp { - box-shadow: $whiteframe-shadow-17dp; -} - -.md-whiteframe-18dp { - box-shadow: $whiteframe-shadow-18dp; -} - -.md-whiteframe-19dp { - box-shadow: $whiteframe-shadow-19dp; -} - -.md-whiteframe-20dp { - box-shadow: $whiteframe-shadow-20dp; -} - -.md-whiteframe-21dp { - box-shadow: $whiteframe-shadow-21dp; -} - -.md-whiteframe-22dp { - box-shadow: $whiteframe-shadow-22dp; -} - -.md-whiteframe-23dp { - box-shadow: $whiteframe-shadow-23dp; -} - -.md-whiteframe-24dp { - box-shadow: $whiteframe-shadow-24dp; -} - -@media screen and (-ms-high-contrast: active) { - md-whiteframe { - border: 1px solid #fff; - } -} diff --git a/src/platform/core/common/styles/font/_font.scss b/src/platform/core/common/styles/font/_font.scss index 02d29944f1..3f337b6c53 100644 --- a/src/platform/core/common/styles/font/_font.scss +++ b/src/platform/core/common/styles/font/_font.scss @@ -1,15 +1,15 @@ -$md-font-url: './' !default; +$mat-font-url: './' !default; @font-face { font-family: 'Material Icons'; font-style: normal; font-weight: 400; - src: url($md-font-url + 'MaterialIcons-Regular.eot'); /* For IE6-8 */ - src: local($md-font-url + 'Material Icons'), - local($md-font-url + 'MaterialIcons-Regular'), - url($md-font-url + 'MaterialIcons-Regular.woff2') format('woff2'), - url($md-font-url + 'MaterialIcons-Regular.woff') format('woff'), - url($md-font-url + 'MaterialIcons-Regular.ttf') format('truetype'); + src: url($mat-font-url + 'MaterialIcons-Regular.eot'); /* For IE6-8 */ + src: local($mat-font-url + 'Material Icons'), + local($mat-font-url + 'MaterialIcons-Regular'), + url($mat-font-url + 'MaterialIcons-Regular.woff2') format('woff2'), + url($mat-font-url + 'MaterialIcons-Regular.woff') format('woff'), + url($mat-font-url + 'MaterialIcons-Regular.ttf') format('truetype'); } .material-icons { font-family: 'Material Icons'; @@ -47,15 +47,15 @@ mat-icon.material-icons { } // Rules for sizing the icon. -.material-icons.md-18 { font-size: 18px; height:18px; width: 18px } -.material-icons.md-24 { font-size: 24px; height:24px; width: 24px } -.material-icons.md-36 { font-size: 36px; height:36px; width: 36px } -.material-icons.md-48 { font-size: 48px; height:48px; width: 48px } +.material-icons.md-18, .material-icons.mat-18 { font-size: 18px; height:18px; width: 18px } +.material-icons.md-24, .material-icons.mat-24 { font-size: 24px; height:24px; width: 24px } +.material-icons.md-36, .material-icons.mat-36 { font-size: 36px; height:36px; width: 36px } +.material-icons.md-48, .material-icons.mat-48 { font-size: 48px; height:48px; width: 48px } // Rules for using icons as black on a light background. -.material-icons.md-dark { color: rgba(0, 0, 0, 0.54); } -.material-icons.md-dark.md-inactive { color: rgba(0, 0, 0, 0.26); } +.material-icons.md-dark, .material-icons.mat-dark { color: rgba(0, 0, 0, 0.54); } +.material-icons.md-dark.md-inactive, .material-icons.mat-dark.mat-inactive { color: rgba(0, 0, 0, 0.26); } // Rules for using icons as white on a dark background. -.material-icons.md-light { color: rgba(255, 255, 255, 1); } -.material-icons.md-light.md-inactive { color: rgba(255, 255, 255, 0.3); } +.material-icons.md-light, .material-icons.mat-light { color: rgba(255, 255, 255, 1); } +.material-icons.md-light.md-inactive, .material-icons.mat-light.mat-inactive { color: rgba(255, 255, 255, 0.3); } diff --git a/src/platform/core/steps/_steps-theme.scss b/src/platform/core/steps/_steps-theme.scss index f9d60699f9..5446f772fe 100644 --- a/src/platform/core/steps/_steps-theme.scss +++ b/src/platform/core/steps/_steps-theme.scss @@ -30,7 +30,7 @@ background: mat-color($background, 'hover'); } .td-step-label-wrapper { - .md-caption { + .td-step-sublabel { color: mat-color($foreground, secondary-text); } &.mat-inactive { From 544cf22e62d968f6ef1923c9757f90992f94247d Mon Sep 17 00:00:00 2001 From: Ed Morales Date: Thu, 5 Oct 2017 11:04:40 -0700 Subject: [PATCH 14/16] chore(): changelog for beta.8 release (#910) * chore(): changelog for beta.8 release * chore(): update package.json dependencies for release * chore(): update notifications menu * chore(): fix interface for templates * fix(): small checkup to file-upload clear button * chore(): update with latest commit * chore(): add latest commit and polish changelog --- docs/CHANGELOG.md | 41 +++++++++++++++++++ .../components/toolbar/toolbar.component.html | 2 +- .../components/toolbar/toolbar.component.ts | 22 +--------- src/app/services/internal-docs.service.ts | 2 +- .../file/file-upload/file-upload.component.ts | 7 +++- src/platform/core/package.json | 14 +++---- src/platform/highlight/package.json | 4 +- src/platform/http/package.json | 4 +- src/platform/markdown/package.json | 4 +- 9 files changed, 62 insertions(+), 38 deletions(-) diff --git a/docs/CHANGELOG.md b/docs/CHANGELOG.md index bd81081a75..42fc8b13a3 100644 --- a/docs/CHANGELOG.md +++ b/docs/CHANGELOG.md @@ -1,3 +1,44 @@ + +# [1.0.0-beta.8 Free Fallin](https://github.com/Teradata/covalent/tree/v1.0.0-beta.8) (2017-08-05) + +The main focus of this release is support for `@angular/material@1.0.0-beta.11` and rename all `md` references from our selectors and inputs to `mat` for future support since the `md` prefixes are gonna be removed on `@angular/material`'s following release. + +The material team created a tool to update it automatically if you want to give it a test. [angular-material-prefix-updater](https://www.npmjs.com/package/angular-material-prefix-updater) + +#### Material Breaking Changes + +The material team decided to change their prefix from `md` to `mat`. Read more on the reasons in the `@angular/material` [changelog](https://github.com/angular/material2/blob/master/CHANGELOG.md#200-beta11-carapace-parapet-2017-09-21) + +#### Steps to rename md to mat + +We structured our commits in this [PR](https://github.com/Teradata/covalent/pull/890/commits) with the specific steps needed for the `md`/`mat` conversion. + +#### Highlights + +- `@angular/material@1.0.0-beta.11` support +- Bugfixes and improvements + +## Bug Fixes +* **data-table:** replace hardcoded 100px min width with projected width and way to override it [025ead6e6383f6faafd51decda28511cd30b9e44](https://github.com/Teradata/covalent/commit/025ead6e6383f6faafd51decda28511cd30b9e44)), closes [#891](https://github.com/Teradata/covalent/issues/891) +* **data-table:** show which column was deselected when using single selection mode [013df521bc55818ee7bfe7cf318862ab02787abd](https://github.com/Teradata/covalent/commit/013df521bc55818ee7bfe7cf318862ab02787abd)), closes [#881](https://github.com/Teradata/covalent/issues/881) +* **file-upload:** clear internal file input on cancel [6220b2a7a867f66fd6892888a2e3b21a9a645c74](https://github.com/Teradata/covalent/commit/6220b2a7a867f66fd6892888a2e3b21a9a645c74)) +* **json-formatter:** represent array of arrays properly [42c83987ef3498c52fa990ef974e819d1d606621](https://github.com/Teradata/covalent/commit/42c83987ef3498c52fa990ef974e819d1d606621)), closes [#852](https://github.com/Teradata/covalent/issues/852) +* **paging:** stop css bleed to all md-selects from paging scss [8a9b4db4ee89869a5f02b906b07c30f8d49a7bff](https://github.com/Teradata/covalent/commit/8a9b4db4ee89869a5f02b906b07c30f8d49a7bff)), closes [#872](https://github.com/Teradata/covalent/issues/872) +* **virtual-scroll:** re-render rows with proper height when replacing the data set [6590cf2497868d1151c36492f3fc75c4a3b53d8c](https://github.com/Teradata/covalent/commit/6590cf2497868d1151c36492f3fc75c4a3b53d8c)), closes [#878](https://github.com/Teradata/covalent/issues/878) + +## Features +* **data-table:** allow dynamic row heights in data table even when using its virtual scroll impl [33790243daf55b265061b175bd092ec0063fc315](https://github.com/Teradata/covalent/commit/33790243daf55b265061b175bd092ec0063fc315)), closes [#868](https://github.com/Teradata/covalent/issues/868) +* **data-table:** update demo and docs with better examples and load data from service [33790243daf55b265061b175bd092ec0063fc315](https://github.com/Teradata/covalent/commit/33790243daf55b265061b175bd092ec0063fc315)), closes [#868](https://github.com/Teradata/covalent/issues/868) + +## Refactor +* **material:** upgrade to material@beta.11 [5ffb36432ee155caf706c43aa88f42754e776d64](https://github.com/Teradata/covalent/commit/5ffb36432ee155caf706c43aa88f42754e776d64)) +* **styles:** add mat- prefixes to all our md- prefixed classes (ignoring typography) [658680a03ba6fa7f4b7e3361e2404b5588743d99](https://github.com/Teradata/covalent/commit/658680a03ba6fa7f4b7e3361e2404b5588743d99)) + +## Internal +* **docs:** update resources layout & add Illustrator [00fcf66f2bbe0b86f488ae7ba2bffdd163ac32fe](https://github.com/Teradata/covalent/commit/00fcf66f2bbe0b86f488ae7ba2bffdd163ac32fe)) +* **angular:** upgrade to angular@4.4.3 [5ffb36432ee155caf706c43aa88f42754e776d64](https://github.com/Teradata/covalent/commit/5ffb36432ee155caf706c43aa88f42754e776d64)) + + # [1.0.0-beta.7 One Step Closer](https://github.com/Teradata/covalent/tree/v1.0.0-beta.7) (2017-09-11) diff --git a/src/app/components/toolbar/toolbar.component.html b/src/app/components/toolbar/toolbar.component.html index 36a4f53e20..59005b3f6c 100644 --- a/src/app/components/toolbar/toolbar.component.html +++ b/src/app/components/toolbar/toolbar.component.html @@ -31,7 +31,7 @@

    {{item.description}}

    change_history -

    CDK and material@beta.10 support

    +

    CDK and material@beta.11 support

    Dependencies updated

     diff --git a/src/app/components/toolbar/toolbar.component.ts b/src/app/components/toolbar/toolbar.component.ts index a4602379f8..f043f1bb44 100644 --- a/src/app/components/toolbar/toolbar.component.ts +++ b/src/app/components/toolbar/toolbar.component.ts @@ -17,30 +17,10 @@ import { getDirection, setDirection } from '../../utilities/direction'; }) export class ToolbarComponent { updates: Object[] = [{ - description: 'Virtual scroll component', - icon: 'format_line_spacing', - route: '/components/virtual-scroll', - title: 'New component', - }, { - description: 'Markdown text editor component', - icon: 'keyboard', - route: '/components/text-editor', - title: 'New component', - }, { - description: 'Sticky headers, virtual scroll & configurable widths', + description: 'Bugfixes, enhancements and demo improvements', icon: 'grid_on', route: '/components/data-table', title: 'Data table updates', - }, { - description: 'New form features & bugfixes', - icon: 'format_align_center', - route: '/components/dynamic-forms', - title: 'Dynamic forms updates', - }, { - description: 'New pre-canned animations!', - icon: 'theaters', - route: '/components/animations', - title: 'New utility', }, ]; diff --git a/src/app/services/internal-docs.service.ts b/src/app/services/internal-docs.service.ts index 9443462348..62d676256f 100644 --- a/src/app/services/internal-docs.service.ts +++ b/src/app/services/internal-docs.service.ts @@ -6,7 +6,7 @@ import { Subscriber } from 'rxjs/Subscriber'; import { HttpInterceptorService } from '@covalent/http'; export interface ITemplate { - name: string; + title: string; description: string; plnkr: string; img: string; diff --git a/src/platform/core/file/file-upload/file-upload.component.ts b/src/platform/core/file/file-upload/file-upload.component.ts index 56fd5613cf..3cb7b5751c 100644 --- a/src/platform/core/file/file-upload/file-upload.component.ts +++ b/src/platform/core/file/file-upload/file-upload.component.ts @@ -66,7 +66,7 @@ export class TdFileUploadComponent extends _TdFileUploadMixinBase implements ICa /** * select?: function - * Event emitted when a file is selecte. + * Event emitted when a file is selected. * Emits a [File | FileList] object. */ @Output('select') onSelect: EventEmitter = new EventEmitter(); @@ -113,7 +113,10 @@ export class TdFileUploadComponent extends _TdFileUploadMixinBase implements ICa cancel(): void { this.files = undefined; this.onCancel.emit(undefined); - this.fileInput.clear(); + // check if the file input is rendered before clearing it + if (this.fileInput) { + this.fileInput.clear(); + } this._changeDetectorRef.markForCheck(); } diff --git a/src/platform/core/package.json b/src/platform/core/package.json index d7ed0d0b5a..5fbc417f74 100644 --- a/src/platform/core/package.json +++ b/src/platform/core/package.json @@ -37,12 +37,12 @@ "tslib": "^1.7.1" }, "peerDependencies": { - "@angular/common": "^4.3.0", - "@angular/core": "^4.3.0", - "@angular/forms": "^4.3.0", - "@angular/http": "^4.3.0", - "@angular/router": "^4.3.0", - "@angular/cdk": "^2.0.0-beta.10", - "@angular/material": "^2.0.0-beta.10" + "@angular/common": "^4.4.3", + "@angular/core": "^4.4.3", + "@angular/forms": "^4.4.3", + "@angular/http": "^4.4.3", + "@angular/router": "^4.4.3", + "@angular/cdk": "^2.0.0-beta.11", + "@angular/material": "^2.0.0-beta.11" } } diff --git a/src/platform/highlight/package.json b/src/platform/highlight/package.json index 380437b4b7..aa434a958d 100644 --- a/src/platform/highlight/package.json +++ b/src/platform/highlight/package.json @@ -37,7 +37,7 @@ "highlight.js": "9.11.0" }, "peerDependencies": { - "@angular/common": "^4.3.0", - "@angular/core": "^4.3.0" + "@angular/common": "^4.4.3", + "@angular/core": "^4.4.3" } } diff --git a/src/platform/http/package.json b/src/platform/http/package.json index 079b91feb8..2484a1f631 100644 --- a/src/platform/http/package.json +++ b/src/platform/http/package.json @@ -37,7 +37,7 @@ "tslib": "^1.7.1" }, "peerDependencies": { - "@angular/core": "^4.3.0", - "@angular/http": "^4.3.0" + "@angular/core": "^4.4.3", + "@angular/http": "^4.4.3" } } diff --git a/src/platform/markdown/package.json b/src/platform/markdown/package.json index 6a64680bf7..f3d6b9cbf9 100644 --- a/src/platform/markdown/package.json +++ b/src/platform/markdown/package.json @@ -35,7 +35,7 @@ "showdown": "1.6.4" }, "peerDependencies": { - "@angular/common": "^4.3.0", - "@angular/core": "^4.3.0" + "@angular/common": "^4.4.3", + "@angular/core": "^4.4.3" } } From 318b5e51bdc71ffb25dfdc90e641a93456d03664 Mon Sep 17 00:00:00 2001 From: emoralesb05 Date: Thu, 5 Oct 2017 11:50:09 -0700 Subject: [PATCH 15/16] Version bump --- package.json | 2 +- src/platform/core/package.json | 2 +- src/platform/dynamic-forms/package.json | 2 +- src/platform/highlight/package.json | 2 +- src/platform/http/package.json | 2 +- src/platform/markdown/package.json | 2 +- 6 files changed, 6 insertions(+), 6 deletions(-) diff --git a/package.json b/package.json index 54e83f24c8..c2d6207b7b 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "covalent", - "version": "1.0.0-beta.7", + "version": "1.0.0-beta.8", "private": true, "description": "Teradata UI Platform built on Angular Material", "keywords": [ diff --git a/src/platform/core/package.json b/src/platform/core/package.json index 5fbc417f74..d8413e4ba6 100644 --- a/src/platform/core/package.json +++ b/src/platform/core/package.json @@ -1,6 +1,6 @@ { "name": "@covalent/core", - "version": "1.0.0-beta.7", + "version": "1.0.0-beta.8", "description": "Teradata UI Platform built on Angular Material", "main": "./bundles/core.umd.js", "module": "./index.js", diff --git a/src/platform/dynamic-forms/package.json b/src/platform/dynamic-forms/package.json index 6bb5bedcf2..ff3144fe07 100644 --- a/src/platform/dynamic-forms/package.json +++ b/src/platform/dynamic-forms/package.json @@ -1,6 +1,6 @@ { "name": "@covalent/dynamic-forms", - "version": "1.0.0-beta.7", + "version": "1.0.0-beta.8", "description": "Teradata UI Platform Dynamic Forms Module", "main": "./bundles/dynamic-forms.umd.js", "module": "./index.js", diff --git a/src/platform/highlight/package.json b/src/platform/highlight/package.json index aa434a958d..7ba3a551ac 100644 --- a/src/platform/highlight/package.json +++ b/src/platform/highlight/package.json @@ -1,6 +1,6 @@ { "name": "@covalent/highlight", - "version": "1.0.0-beta.7", + "version": "1.0.0-beta.8", "description": "Teradata UI Platform Highlight Module", "main": "./bundles/highlight.umd.js", "module": "./index.js", diff --git a/src/platform/http/package.json b/src/platform/http/package.json index 2484a1f631..a8de8313c8 100644 --- a/src/platform/http/package.json +++ b/src/platform/http/package.json @@ -1,6 +1,6 @@ { "name": "@covalent/http", - "version": "1.0.0-beta.7", + "version": "1.0.0-beta.8", "description": "Teradata UI Platform Http Helper Module", "main": "./bundles/http.umd.js", "module": "./index.js", diff --git a/src/platform/markdown/package.json b/src/platform/markdown/package.json index f3d6b9cbf9..81cdc29428 100644 --- a/src/platform/markdown/package.json +++ b/src/platform/markdown/package.json @@ -1,6 +1,6 @@ { "name": "@covalent/markdown", - "version": "1.0.0-beta.7", + "version": "1.0.0-beta.8", "description": "Teradata UI Platform Markdown Module", "main": "./bundles/markdown.umd.js", "module": "./index.js", From abfa71ec6b2e077ce025f0fa7273200888ba0482 Mon Sep 17 00:00:00 2001 From: emoralesb05 Date: Thu, 5 Oct 2017 11:53:10 -0700 Subject: [PATCH 16/16] chore(): bump dependencies --- src/platform/dynamic-forms/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/platform/dynamic-forms/package.json b/src/platform/dynamic-forms/package.json index ff3144fe07..404da18193 100644 --- a/src/platform/dynamic-forms/package.json +++ b/src/platform/dynamic-forms/package.json @@ -33,6 +33,6 @@ "Steven Ov " ], "dependencies": { - "@covalent/core": "1.0.0-beta.7" + "@covalent/core": "1.0.0-beta.8" } }