diff --git a/package.json b/package.json index 35078b5434..881e06704c 100644 --- a/package.json +++ b/package.json @@ -32,7 +32,7 @@ "finish-release": "bash scripts/finish-release" }, "engines": { - "node": ">4.4 < 7", + "node": ">6.9", "npm": ">3" }, "repository": { @@ -54,31 +54,32 @@ "Ilsun Park " ], "dependencies": { - "@angular/common": "^2.4.5", - "@angular/compiler": "^2.4.5", - "@angular/core": "^2.4.5", - "@angular/forms": "^2.4.5", - "@angular/flex-layout": "2.0.0-beta.5", - "@angular/http": "^2.4.5", + "@angular/animations": "^4.0.0", + "@angular/common": "^4.0.0", + "@angular/compiler": "^4.0.0", + "@angular/core": "^4.0.0", + "@angular/forms": "^4.0.0", + "@angular/flex-layout": "2.0.0-rc.1", + "@angular/http": "^4.0.0", "@angular/material": "2.0.0-beta.2", - "@angular/platform-browser": "^2.4.5", - "@angular/platform-browser-dynamic": "^2.4.5", - "@angular/platform-server": "^2.4.5", - "@angular/router": "^3.4.5", + "@angular/platform-browser": "^4.0.0", + "@angular/platform-browser-dynamic": "^4.0.0", + "@angular/platform-server": "^4.0.0", + "@angular/router": "^4.0.0", "@swimlane/ngx-charts": "4.3.0", "@ngx-translate/core": "6.0.0", "@ngx-translate/http-loader": "0.0.3", "core-js": "^2.4.1", "hammerjs": "^2.0.8", "highlight.js": "9.10.0", - "rxjs": "^5.1.0", + "rxjs": "^5.2.0", "showdown": "1.6.4", - "zone.js": "^0.7.6", + "zone.js": "^0.8.5", "d3": "^4.4.0", "web-animations-js": "2.2.2" }, "devDependencies": { - "@angular/compiler-cli": "^2.4.5", + "@angular/compiler-cli": "^4.0.0", "@angular/cli": "1.0.0", "@types/hammerjs": "^2.0.30", "@types/jasmine": "2.5.38", @@ -115,6 +116,6 @@ "semver": "5.2.0", "ts-node": "~2.0.0", "tslint": "^4.5.1", - "typescript": "2.1.5" + "typescript": "^2.1.6" } } \ No newline at end of file diff --git a/scripts/rollup.js b/scripts/rollup.js index fd804a2252..e0cb3a5641 100644 --- a/scripts/rollup.js +++ b/scripts/rollup.js @@ -20,12 +20,15 @@ gulp.task('rollup-code', '', function() { const globals = { // Angular dependencies + '@angular/animations': 'ng.animations', + '@angular/animations/browser': 'ng.animations.browser', '@angular/core': 'ng.core', '@angular/common': 'ng.common', '@angular/forms': 'ng.forms', '@angular/http': 'ng.http', '@angular/router': 'ng.router', '@angular/platform-browser': 'ng.platformBrowser', + '@angular/platform-browser/animations': 'ng.platformBrowser.animations', '@angular/platform-browser-dynamic': 'ng.platformBrowserDynamic', '@angular/material': 'ng.material', '@angular/flex-layout': 'ng.flexLayout', diff --git a/src/app/app.animations.ts b/src/app/app.animations.ts index 2b2345c317..627ecbd6a1 100644 --- a/src/app/app.animations.ts +++ b/src/app/app.animations.ts @@ -1,7 +1,7 @@ -import { animate, AnimationEntryMetadata, state, style, transition, trigger } from '@angular/core'; +import { animate, AnimationTriggerMetadata, state, style, transition, trigger } from '@angular/animations'; // Component transition animations -export const fadeAnimation: AnimationEntryMetadata = +export const fadeAnimation: AnimationTriggerMetadata = trigger('routeAnimation', [ state('*', style({ @@ -20,7 +20,7 @@ export const fadeAnimation: AnimationEntryMetadata = })), ]), ]); -export const slideInLeftAnimation: AnimationEntryMetadata = +export const slideInLeftAnimation: AnimationTriggerMetadata = trigger('routeAnimation', [ state('*', style({ @@ -42,7 +42,7 @@ export const slideInLeftAnimation: AnimationEntryMetadata = })), ]), ]); -export const slideInDownAnimation: AnimationEntryMetadata = +export const slideInDownAnimation: AnimationTriggerMetadata = trigger('routeAnimation', [ state('*', style({ diff --git a/src/app/app.module.ts b/src/app/app.module.ts index a4a0457504..83a8243af3 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -3,6 +3,7 @@ import { CommonModule } from '@angular/common'; import { FormsModule } from '@angular/forms'; import { Http, HttpModule, JsonpModule } from '@angular/http'; import { BrowserModule } from '@angular/platform-browser'; +import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { TranslateModule, TranslateService, TranslateLoader } from '@ngx-translate/core'; import { DocsAppComponent } from './app.component'; @@ -28,6 +29,7 @@ import { getSelectedLanguage, createTranslateLoader } from './utilities/translat HomeComponent, ], // directives, components, and pipes owned by this NgModule imports: [ + BrowserAnimationsModule, CommonModule, FormsModule, BrowserModule, diff --git a/src/app/components/components/charts/charts.component.html b/src/app/components/components/charts/charts.component.html index 678b422544..93738e7719 100644 --- a/src/app/components/components/charts/charts.component.html +++ b/src/app/components/components/charts/charts.component.html @@ -132,13 +132,13 @@

]]>

Properties:

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

- +

Example:

HTML

@@ -206,13 +206,13 @@

]]>

Properties:

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

- +

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

Example:

@@ -236,13 +236,13 @@

]]>

Properties:

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

- +

Use above propeties as attributes with ]]> element

Example:

@@ -292,13 +292,13 @@

]]>

Properties:

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

- +

Use above propeties as attributes with ]]> element

Example:

@@ -380,13 +380,13 @@

]]>

Properties:

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

- +

Use above propeties as attributes with ]]> element

Example:

diff --git a/src/app/components/components/chips/chips.component.html b/src/app/components/components/chips/chips.component.html index c047a664ab..ac7431d26a 100644 --- a/src/app/components/components/chips/chips.component.html +++ b/src/app/components/components/chips/chips.component.html @@ -6,11 +6,11 @@

Basic Demo

- + Demo - + Code

HTML:

Basic Demo

Autocomplete Demo

- + Demo - + Code

HTML:

Autocomplete Demo

Autocomplete and requireMatch Demo

- + Demo - + Code

HTML:

]]>

Properties:

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

- +

Example:

HTML:

diff --git a/src/app/components/components/components.component.html b/src/app/components/components/components.component.html index 278ff26993..7b9e013009 100644 --- a/src/app/components/components/components.component.html +++ b/src/app/components/components/components.component.html @@ -7,7 +7,7 @@ [sidenavWidth]="(media.registerQuery('gt-xs') | async) ? '350px' : '100%'">

Core Components

- +

Optional Components

- +

External Components

- +
Covalent Components & Addons diff --git a/src/app/components/components/components.component.ts b/src/app/components/components/components.component.ts index 0e2cf4cb22..c7bf4aaf3e 100644 --- a/src/app/components/components/components.component.ts +++ b/src/app/components/components/components.component.ts @@ -1,4 +1,4 @@ -import { Component, HostBinding, AfterViewInit, ElementRef, Inject, Renderer } from '@angular/core'; +import { Component, HostBinding, AfterViewInit, ElementRef, Inject, Renderer2 } from '@angular/core'; import { DOCUMENT } from '@angular/platform-browser'; import { TdMediaService } from '@covalent/core'; @@ -137,7 +137,7 @@ export class ComponentsComponent implements AfterViewInit { }]; constructor(public media: TdMediaService, - private _renderer: Renderer, + private _renderer: Renderer2, @Inject(DOCUMENT) private _document: any) {} ngAfterViewInit(): void { @@ -146,6 +146,6 @@ export class ComponentsComponent implements AfterViewInit { } changeDir(dir: string): void { - this._renderer.setElementAttribute(this._document.querySelector('html'), 'dir', dir); + this._renderer.setAttribute(this._document.querySelector('html'), 'dir', dir); } } 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 d65616f568..b9bef25114 100644 --- a/src/app/components/components/data-table/data-table.component.html +++ b/src/app/components/components/data-table/data-table.component.html @@ -8,7 +8,7 @@

with custom headings, columns, and inline editing

- + Demo
@@ -32,7 +32,7 @@

with custom headings, columns, and inline editing

- + Code

HTML:

with nested data, formatting, and templates - + Demo - + - + Code

HTML:

- + ]]> @@ -206,7 +206,7 @@

Paging Bar / Search Box / Sortable components

- + Demo
Title here @@ -236,7 +236,7 @@

Paging Bar / Search Box / Sortable components

- + Code

HTML:

]]>

Properties:

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

- +

Example:

HTML:

@@ -431,13 +431,13 @@

Setup:

Properties:

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

- + @@ -453,23 +453,23 @@

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

Properties:

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

- +

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

- +

Example:

HTML:

diff --git a/src/app/components/components/dialogs/dialogs.component.html b/src/app/components/components/dialogs/dialogs.component.html index d3edc53452..759532eca0 100644 --- a/src/app/components/components/dialogs/dialogs.component.html +++ b/src/app/components/components/dialogs/dialogs.component.html @@ -19,13 +19,13 @@

TdDialogService

Methods:

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

- +

Example(after setup):

Typescript:

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 faff86fa85..b4749ba671 100644 --- a/src/app/components/components/dynamic-forms/dynamic-forms.component.html +++ b/src/app/components/components/dynamic-forms/dynamic-forms.component.html @@ -7,12 +7,12 @@

Dynamic Text Elements

- + Demo - + Code

HTML:

Dynamic Number Elements - + Demo - + Code

HTML:

Dynamic Boolean Elements - + Demo - + Code

HTML:

Dynamic Array Elements - + Demo - + Code

HTML:

]]>

Properties:

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

- +

Example:

HTML:

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 2a89dd8dfb..7cf49d90c7 100644 --- a/src/app/components/components/expansion-panel/expansion-panel.component.html +++ b/src/app/components/components/expansion-panel/expansion-panel.component.html @@ -48,14 +48,14 @@

md-padding class

- - +

md-padding class

Phase 1
@@ -69,11 +69,11 @@

md-padding class

- +
@@ -172,28 +172,28 @@

Creation flows

Properties:

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

- +

Example:

HTML:

- - - + ... add summary that will be shown when expansion-panel is "collapsed". 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 1e58507b5d..dd6a51bf4e 100644 --- a/src/app/components/components/file-input/file-input.component.html +++ b/src/app/components/components/file-input/file-input.component.html @@ -4,7 +4,7 @@ - + Demo
- + Code

HTML:

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 ae2ce02a80..2e67ba2d68 100644 --- a/src/app/components/components/file-upload/file-upload.component.html +++ b/src/app/components/components/file-upload/file-upload.component.html @@ -4,16 +4,16 @@ - + Demo

Single file selection or drop:

Select Event: {{fileSelectMsg}}

Upload Event: {{fileUploadMsg}}

file_upload{{ singleFileUpload.files?.name }} - + @@ -22,7 +22,7 @@

Single file selection or drop:

 - + Code

HTML:

@@ -31,9 +31,9 @@

Single file selection or drop:

Upload Event: { {fileUploadMsg} }

file_upload{ { singleFileUpload.files?.name } } - + @@ -70,7 +70,7 @@

Single file selection or drop:

- + Demo

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

Select Event: {{fileSelectMultipleMsg}}

@@ -79,9 +79,9 @@

Multiple selection/drop for only .sql files and custom colo accept=".sql" defaultColor="accent" activeColor="warn" cancelColor="primary" multiple [disabled]="disabled"> file_upload {{ fileMultipleUpload.files?.name || fileMultipleUpload.files?.length }} files selected - + @@ -90,7 +90,7 @@

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

HTML:

@@ -103,9 +103,9 @@

Multiple selection/drop for only .sql files and custom colo { { fileMultipleUpload.files?.name || fileMultipleUpload.files?.length } } files selected - + ]]> diff --git a/src/app/components/components/http/http.component.html b/src/app/components/components/http/http.component.html index 4f4993fe46..803eddcdab 100644 --- a/src/app/components/components/http/http.component.html +++ b/src/app/components/components/http/http.component.html @@ -19,13 +19,13 @@

HttpInterceptorService

Methods:

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

- +

Setup:

Create your custom interceptors by implementing [IHttpInterceptor]:

@@ -172,13 +172,13 @@

RESTService

Methods:

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

- +

Example:

Typescript:

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 6a4d3b540b..efda9dcf41 100644 --- a/src/app/components/components/json-formatter/json-formatter.component.html +++ b/src/app/components/components/json-formatter/json-formatter.component.html @@ -25,13 +25,13 @@

]]>

Properties:

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

- +

Example:

HTML:

diff --git a/src/app/components/components/loading/loading.component.html b/src/app/components/components/loading/loading.component.html index 34d25328f1..b2d077620e 100644 --- a/src/app/components/components/loading/loading.component.html +++ b/src/app/components/components/loading/loading.component.html @@ -7,7 +7,7 @@

[tdLoading] directive with (*) syntax

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

- + Demo
@@ -23,7 +23,7 @@

with indetederminate [tdLoadingMode], circular [tdLoading

- + Code

HTML:

[tdLoading] directive with template syntax

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

- - +
- + Code

HTML:

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

with determinate [tdLoadingMode], linear [tdLoadingType],

- +
@@ -155,13 +155,13 @@

Preloaded [TdLoading] fullscreen mask

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

- + Demo
- + Code

HTML:

Custom [TdLoading] fullscreen mask

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

- + Demo
- + Code

HTML:

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

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.

+

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:

- +

Example(after setup):

HTML (*) syntax:

@@ -273,12 +273,12 @@

Example(after setup):

]]> -

HTML ]]> syntax

+

HTML ]]> syntax

+ ... - + ]]>

Typescript:

@@ -344,13 +344,13 @@

TdLoadingService

Methods:

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

- +

Example(after setup):

Typescript:

diff --git a/src/app/components/components/markdown/markdown.component.html b/src/app/components/components/markdown/markdown.component.html index 763cd2f387..2cf7a78f0a 100644 --- a/src/app/components/components/markdown/markdown.component.html +++ b/src/app/components/components/markdown/markdown.component.html @@ -13,7 +13,7 @@ - + Demo # Heading (H1) @@ -37,7 +37,7 @@ - + Code @@ -74,7 +74,7 @@ - + Demo

Links & Images

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

@@ -94,7 +94,7 @@

Links & Images

 - + Code @@ -126,7 +126,7 @@

Links & Images

- + 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.

@@ -144,7 +144,7 @@

Links & Images

 - + Code @@ -173,7 +173,7 @@

Links & Images

- + Demo

Blockquotes

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

Dividers

 - + Code diff --git a/src/app/components/components/material-components/material-components.component.html b/src/app/components/components/material-components/material-components.component.html index 4a9f195c09..9277ab52ab 100644 --- a/src/app/components/components/material-components/material-components.component.html +++ b/src/app/components/components/material-components/material-components.component.html @@ -448,7 +448,7 @@

Simple List

Checkbox list

- + - + ]]> @@ -490,20 +490,20 @@

Checkbox list

Nav list (list with links)

- + - + ]]> @@ -515,28 +515,28 @@

Nav list (list with links)

2 Line List Items with Avatars and inset dividers

- + - + ]]> @@ -547,7 +547,7 @@

{ {item.from} }

3 Line List Item with Icons and inset dividers

- + - + ]]> @@ -933,12 +933,12 @@

Dynamic Radios

- + One

First tab content

Plaid echo park knausgaard normcore franzen cronut. Pickled humblebrag tofu hoodie, umami salvia farm-to-table schlitz try-hard food truck knausgaard pabst. Yuccie portland jean shorts, authentic mixtape waistcoat gentrify blue bottle. Fixie kickstarter church-key small batch seitan, shabby chic vegan listicle before they sold out. Hammock raw denim flannel tousled seitan you probably haven't heard of them. Trust fund man bun pug, kickstarter artisan selvage letterpress cornhole tote bag butcher locavore. Affogato try-hard kickstarter seitan, DIY pickled hella godard pork belly four loko ugh.

 - + Two

Second tab content

Hashtag distillery skateboard man bun gochujang, salvia man braid art party meggings heirloom kitsch farm-to-table. Franzen beard fingerstache gentrify, heirloom portland ennui XOXO microdosing kitsch plaid. Chicharrones bushwick chia, banh mi irony tattooed hammock butcher shabby chic taxidermy semiotics marfa post-ironic. Blue bottle keffiyeh farm-to-table ennui, chambray pitchfork art party pinterest artisan pop-up. Etsy banjo marfa, blue bottle kombucha crucifix XOXO tousled beard. Tilde disrupt kale chips bicycle rights skateboard master cleanse hella shoreditch, meditation retro shabby chic vice heirloom. Etsy listicle vice actually, iPhone chia hoodie four loko.

 @@ -948,12 +948,12 @@

Second tab content

- + First tab content

First content

...

 - + Second tab content

Second tab content

...

 @@ -1081,7 +1081,7 @@

Usage within Forms

Grid list with images and headers or footers - + Headers @@ -1109,7 +1109,7 @@

Usage within Forms

 - + Footers diff --git a/src/app/components/components/media/media.component.html b/src/app/components/components/media/media.component.html index c2bcd07445..e81a82140e 100644 --- a/src/app/components/components/media/media.component.html +++ b/src/app/components/components/media/media.component.html @@ -5,13 +5,13 @@

Media Queries:

- + @@ -26,24 +26,24 @@

TdMediaService

breakpoints:

- +

Methods:

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

- +

Example:

Typescript:

@@ -114,13 +114,13 @@

tdMediaToggle

Properties:

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

- +

Example:

HTML:

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 00e0870cb1..0fff8514ac 100644 --- a/src/app/components/components/ngx-charts/ngx-charts.component.html +++ b/src/app/components/components/ngx-charts/ngx-charts.component.html @@ -127,7 +127,7 @@ - + HTML @@ -225,7 +225,7 @@ - + TypeScript - + Data - + theme.scss DEMO_BASIC.DIRECTIVE_MESSAGE
- - - + {{ 'DEMO_ONE.COUNT.NONE' | translate }} + {{ 'DEMO_ONE.COUNT.SINGLE' | translate }} + {{ 'DEMO_ONE.COUNT.PLURAL' | translate:{value: valueCountForPlural} }}
@@ -138,9 +138,9 @@

DEMO_BASIC.DIRECTIVE_MESSAGE

- - - + { { 'DEMO_ONE.COUNT.NONE' | translate } } + { { 'DEMO_ONE.COUNT.SINGLE' | translate } } + { { 'DEMO_ONE.COUNT.PLURAL' | translate:{value: valueCountForPlural} } }
]]> diff --git a/src/app/components/components/notifications/notifications.component.html b/src/app/components/components/notifications/notifications.component.html index 0187aa23d6..1939049ebb 100644 --- a/src/app/components/components/notifications/notifications.component.html +++ b/src/app/components/components/notifications/notifications.component.html @@ -6,7 +6,7 @@

Toolbar notification & menu

- + Demo
diff --git a/src/platform/core/expansion-panel/expansion-panel.component.html b/src/platform/core/expansion-panel/expansion-panel.component.html index 00bff628bf..7b9d8b6fab 100644 --- a/src/platform/core/expansion-panel/expansion-panel.component.html +++ b/src/platform/core/expansion-panel/expansion-panel.component.html @@ -7,19 +7,19 @@ [class.mat-interaction-disabled]="disabled" [class.mat-tall]="expansionPanelHeader" md-list-item> - +
- - + + {{label}}
- - + + {{sublabel}}
keyboard_arrow_down diff --git a/src/platform/core/expansion-panel/expansion-panel.component.spec.ts b/src/platform/core/expansion-panel/expansion-panel.component.spec.ts index cb2c6f4645..80e1d1c8b8 100644 --- a/src/platform/core/expansion-panel/expansion-panel.component.spec.ts +++ b/src/platform/core/expansion-panel/expansion-panel.component.spec.ts @@ -5,6 +5,7 @@ import { ComponentFixture, } from '@angular/core/testing'; import { Component } from '@angular/core'; +import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { CovalentExpansionPanelModule, TdExpansionPanelComponent } from './expansion-panel.module'; import { By } from '@angular/platform-browser'; @@ -17,6 +18,7 @@ describe('Component: ExpansionPanel', () => { TdExpansionPanelSummaryTestComponent, ], imports: [ + BrowserAnimationsModule, CovalentExpansionPanelModule, ], }); @@ -43,8 +45,11 @@ describe('Component: ExpansionPanel', () => { .innerHTML.indexOf('Sublabel') > -1).toBeTruthy(); // check if content is hidden - expect((fixture.debugElement.query(By.css('.td-expansion-content')).nativeElement) - .style.display).toBe('none'); + fixture.detectChanges(); + fixture.whenStable().then(() => { + expect((fixture.debugElement.query(By.css('.td-expansion-content')).nativeElement) + .style.display).toBe('none'); + }); }); }))); @@ -58,13 +63,14 @@ describe('Component: ExpansionPanel', () => { expect(fixture.debugElement.query(By.css('.td-expanded'))).toBeFalsy(); - // check if content is hidden - expect((fixture.debugElement.query(By.css('.td-expansion-content')).nativeElement) - .style.display).toBe('none'); - - // check if summary was rendered - expect(fixture.debugElement.query(By.css('.td-expansion-summary'))).toBeTruthy(); - + fixture.detectChanges(); + fixture.whenStable().then(() => { + // check if content is hidden + expect((fixture.debugElement.query(By.css('.td-expansion-content')).nativeElement) + .style.display).toBe('none'); + // check if summary was rendered + expect(fixture.debugElement.query(By.css('.td-expansion-summary'))).toBeTruthy(); + }); }); }))); diff --git a/src/platform/core/file/directives/file-drop.directive.ts b/src/platform/core/file/directives/file-drop.directive.ts index 4f8b1ac2e9..51e4638042 100644 --- a/src/platform/core/file/directives/file-drop.directive.ts +++ b/src/platform/core/file/directives/file-drop.directive.ts @@ -1,5 +1,5 @@ import { Directive, Input, Output, EventEmitter } from '@angular/core'; -import { HostListener, HostBinding, ElementRef, Renderer } from '@angular/core'; +import { HostListener, HostBinding, ElementRef, Renderer2 } from '@angular/core'; @Directive({ selector: '[tdFileDrop]', @@ -51,7 +51,7 @@ export class TdFileDropDirective { return this._disabled ? '' : undefined; } - constructor(private _renderer: Renderer, private _element: ElementRef) { + constructor(private _renderer: Renderer2, private _element: ElementRef) { } /** @@ -69,7 +69,7 @@ export class TdFileDropDirective { this.onFileDrop.emit(value); } } - this._renderer.setElementClass(this._element.nativeElement, 'drop-zone', false); + this._renderer.removeClass(this._element.nativeElement, 'drop-zone'); this._stopEvent(event); } @@ -98,7 +98,7 @@ export class TdFileDropDirective { @HostListener('dragenter', ['$event']) onDragEnter(event: Event): void { if (!this._disabled) { - this._renderer.setElementClass(this._element.nativeElement, 'drop-zone', true); + this._renderer.addClass(this._element.nativeElement, 'drop-zone'); } this._stopEvent(event); } @@ -109,7 +109,7 @@ export class TdFileDropDirective { */ @HostListener('dragleave', ['$event']) onDragLeave(event: Event): void { - this._renderer.setElementClass(this._element.nativeElement, 'drop-zone', false); + this._renderer.removeClass(this._element.nativeElement, 'drop-zone'); this._stopEvent(event); } diff --git a/src/platform/core/file/file-input/file-input.component.ts b/src/platform/core/file/file-input/file-input.component.ts index dbbdac96e0..42def67347 100644 --- a/src/platform/core/file/file-input/file-input.component.ts +++ b/src/platform/core/file/file-input/file-input.component.ts @@ -1,5 +1,5 @@ import { Component, Directive, Input, Output, EventEmitter, ChangeDetectionStrategy, ViewChild, - ElementRef, Renderer, TemplateRef, ViewContainerRef, ChangeDetectorRef, forwardRef } from '@angular/core'; + ElementRef, Renderer2, TemplateRef, ViewContainerRef, ChangeDetectorRef, forwardRef } from '@angular/core'; import { TemplatePortalDirective } from '@angular/material'; import { NG_VALUE_ACCESSOR, ControlValueAccessor } from '@angular/forms'; @@ -101,7 +101,7 @@ export class TdFileInputComponent implements ControlValueAccessor { */ @Output('select') onSelect: EventEmitter = new EventEmitter(); - constructor(private _renderer: Renderer, private _changeDetectorRef: ChangeDetectorRef) { + constructor(private _renderer: Renderer2, private _changeDetectorRef: ChangeDetectorRef) { } @@ -118,7 +118,7 @@ export class TdFileInputComponent implements ControlValueAccessor { */ clear(): void { this.writeValue(undefined); - this._renderer.setElementProperty(this.inputElement, 'value', ''); + this._renderer.setProperty(this.inputElement, 'value', ''); } /** diff --git a/src/platform/core/file/file-upload/README.md b/src/platform/core/file/file-upload/README.md index c43015418c..9903ddd071 100644 --- a/src/platform/core/file/file-upload/README.md +++ b/src/platform/core/file/file-upload/README.md @@ -10,9 +10,9 @@ Example for usage: file_upload{{ fileUpload.files?.name }} - + ``` 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 25965b6a82..95d92eef19 100644 --- a/src/platform/core/file/file-upload/file-upload.component.html +++ b/src/platform/core/file/file-upload/file-upload.component.html @@ -1,5 +1,5 @@ - +
\ No newline at end of file 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 b316512461..33ec2f5444 100644 --- a/src/platform/core/json-formatter/json-formatter.component.spec.ts +++ b/src/platform/core/json-formatter/json-formatter.component.spec.ts @@ -5,6 +5,7 @@ import { ComponentFixture, } from '@angular/core/testing'; import { Component } from '@angular/core'; +import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { CovalentJsonFormatterModule, TdJsonFormatterComponent } from './json-formatter.module'; import { By } from '@angular/platform-browser'; @@ -16,6 +17,7 @@ describe('Component: JsonFormatter', () => { TdJsonFormatterBasicTestComponent, ], imports: [ + BrowserAnimationsModule, CovalentJsonFormatterModule, ], }); @@ -111,8 +113,10 @@ describe('Component: JsonFormatter', () => { fixture.detectChanges(); expect(fixture.debugElement.query(By.css('.td-key-node'))).toBeTruthy(); expect(fixture.debugElement.queryAll(By.css('.td-key-leaf')).length).toBe(6); - /* tslint:disable-next-line */ - expect(fixture.debugElement.query(By.css('.td-object-children')).styles['display']).toBe('none'); + fixture.detectChanges(); + fixture.whenStable().then(() => { + expect((fixture.debugElement.query(By.css('.td-object-children')).nativeElement).style.display).toBe('none'); + }); }); }))); @@ -126,13 +130,20 @@ describe('Component: JsonFormatter', () => { fixture.detectChanges(); expect(fixture.debugElement.query(By.css('.td-key-node'))).toBeTruthy(); /* tslint:disable-next-line */ - expect(fixture.debugElement.query(By.css('.td-object-children')).styles['display']).toBe('none'); - fixture.debugElement.query(By.css('.td-key-node')).triggerEventHandler('click', new Event('click')); fixture.detectChanges(); fixture.whenStable().then(() => { + expect((fixture.debugElement.query(By.css('.td-object-children')).nativeElement).style.display).toBe('none'); + fixture.debugElement.query(By.css('.td-key-node')).triggerEventHandler('click', new Event('click')); fixture.detectChanges(); - /* tslint:disable-next-line */ - expect(fixture.debugElement.query(By.css('.td-object-children')).styles['display']).toBeNull(); + fixture.whenStable().then(() => { + fixture.detectChanges(); + fixture.whenStable().then(() => { + fixture.detectChanges(); + fixture.whenStable().then(() => { + expect((fixture.debugElement.query(By.css('.td-object-children')).nativeElement).style.display).toBe(''); + }); + }); + }); }); }); }))); @@ -146,8 +157,9 @@ describe('Component: JsonFormatter', () => { fixture.detectChanges(); fixture.whenStable().then(() => { fixture.detectChanges(); - /* tslint:disable-next-line */ - expect(fixture.debugElement.query(By.css('.td-object-children')).styles['display']).toBeNull(); + fixture.whenStable().then(() => { + expect((fixture.debugElement.query(By.css('.td-object-children')).nativeElement).style.display).toBe(''); + }); }); }))); diff --git a/src/platform/core/loading/directives/loading.directive.spec.ts b/src/platform/core/loading/directives/loading.directive.spec.ts index dddf9a2e92..af93d7fb31 100644 --- a/src/platform/core/loading/directives/loading.directive.spec.ts +++ b/src/platform/core/loading/directives/loading.directive.spec.ts @@ -5,8 +5,9 @@ import { ComponentFixture, } from '@angular/core/testing'; import { Component } from '@angular/core'; -import { CovalentLoadingModule, LoadingMode, LoadingType, LoadingStrategy, TdLoadingService } from '../loading.module'; +import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { By } from '@angular/platform-browser'; +import { CovalentLoadingModule, LoadingMode, LoadingType, LoadingStrategy, TdLoadingService } from '../loading.module'; describe('Directive: Loading', () => { @@ -18,6 +19,7 @@ describe('Directive: Loading', () => { TdLoadingDuplicationTestComponent, ], imports: [ + BrowserAnimationsModule, CovalentLoadingModule, ], }); @@ -44,9 +46,12 @@ describe('Directive: Loading', () => { fixture.detectChanges(); fixture.whenStable().then(() => { fixture.detectChanges(); - expect(fixture.debugElement.query(By.css('.content'))).toBeTruthy(); - expect(fixture.debugElement.query(By.css('td-loading'))).toBeFalsy(); - done(); + fixture.whenStable().then(() => { + fixture.detectChanges(); + expect(fixture.debugElement.query(By.css('.content'))).toBeTruthy(); + expect(fixture.debugElement.query(By.css('td-loading'))).toBeFalsy(); + done(); + }); }); }); })(); @@ -76,9 +81,12 @@ describe('Directive: Loading', () => { fixture.detectChanges(); fixture.whenStable().then(() => { fixture.detectChanges(); - expect(fixture.debugElement.query(By.css('.content'))).toBeTruthy(); - expect(fixture.debugElement.query(By.css('td-loading'))).toBeFalsy(); - done(); + fixture.whenStable().then(() => { + fixture.detectChanges(); + expect(fixture.debugElement.query(By.css('.content'))).toBeTruthy(); + expect(fixture.debugElement.query(By.css('td-loading'))).toBeFalsy(); + done(); + }); }); }); })(); @@ -101,49 +109,55 @@ describe('Directive: Loading', () => { .style.display).toBe(''); fixture.detectChanges(); fixture.whenStable().then(() => { - fixture.detectChanges(); - expect((fixture.debugElement.query(By.css('.td-loading')).nativeElement) - .style.opacity).toBe('0'); - expect((fixture.debugElement.query(By.css('.td-loading')).nativeElement) - .style.display).toBe('none'); - loadingService.register('name'); fixture.detectChanges(); 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-warn'))).toBeTruthy(); - expect(fixture.debugElement.query(By.css('.td-overlay'))).toBeTruthy(); - expect(fixture.debugElement.query(By.css('.td-fullscreen'))).toBeFalsy(); - expect(fixture.debugElement.query(By.css('.content'))).toBeTruthy(); + expect((fixture.debugElement.query(By.css('.td-loading')).nativeElement) + .style.opacity).toBe('0'); + expect((fixture.debugElement.query(By.css('.td-loading')).nativeElement) + .style.display).toBe('none'); + loadingService.register('name'); + fixture.detectChanges(); fixture.whenStable().then(() => { fixture.detectChanges(); - setTimeout(() => { - fixture.whenStable().then(() => { - fixture.detectChanges(); - expect((fixture.debugElement.query(By.css('.td-loading')).nativeElement) - .style.opacity).toBe(''); - expect((fixture.debugElement.query(By.css('.td-loading')).nativeElement) - .style.display).toBe(''); - loadingService.resolve('name'); - 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-warn'))).toBeTruthy(); + expect(fixture.debugElement.query(By.css('.td-overlay'))).toBeTruthy(); + expect(fixture.debugElement.query(By.css('.td-fullscreen'))).toBeFalsy(); + expect(fixture.debugElement.query(By.css('.content'))).toBeTruthy(); + fixture.whenStable().then(() => { + fixture.detectChanges(); + setTimeout(() => { fixture.whenStable().then(() => { fixture.detectChanges(); - setTimeout(() => { - fixture.whenStable().then(() => { - fixture.detectChanges(); - expect((fixture.debugElement.query(By.css('.td-loading')).nativeElement) - .style.opacity).toBe('0'); - expect((fixture.debugElement.query(By.css('.td-loading')).nativeElement) - .style.display).toBe('none'); - expect(fixture.debugElement.query(By.css('.content'))).toBeTruthy(); - expect(fixture.debugElement.query(By.css('td-loading'))).toBeTruthy(); - done(); - }); - }, 200); + expect((fixture.debugElement.query(By.css('.td-loading')).nativeElement) + .style.opacity).toBe(''); + expect((fixture.debugElement.query(By.css('.td-loading')).nativeElement) + .style.display).toBe(''); + loadingService.resolve('name'); + fixture.detectChanges(); + fixture.whenStable().then(() => { + fixture.detectChanges(); + setTimeout(() => { + fixture.whenStable().then(() => { + fixture.detectChanges(); + fixture.whenStable().then(() => { + fixture.detectChanges(); + expect((fixture.debugElement.query(By.css('.td-loading')).nativeElement) + .style.opacity).toBe('0'); + expect((fixture.debugElement.query(By.css('.td-loading')).nativeElement) + .style.display).toBe('none'); + expect(fixture.debugElement.query(By.css('.content'))).toBeTruthy(); + expect(fixture.debugElement.query(By.css('td-loading'))).toBeTruthy(); + done(); + }); + }); + }, 200); + }); }); - }); - }, 200); + }, 200); + }); }); }); }); @@ -168,62 +182,66 @@ describe('Directive: Loading', () => { .style.display).toBe(''); fixture.detectChanges(); fixture.whenStable().then(() => { - fixture.detectChanges(); - expect((fixture.debugElement.query(By.css('.td-loading')).nativeElement) - .style.opacity).toBe('0'); - expect((fixture.debugElement.query(By.css('.td-loading')).nativeElement) - .style.display).toBe('none'); - loadingService.register('name'); fixture.detectChanges(); fixture.whenStable().then(() => { fixture.detectChanges(); - 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-primary'))).toBeTruthy(); - expect(fixture.debugElement.query(By.css('.td-overlay'))).toBeTruthy(); - expect(fixture.debugElement.query(By.css('.td-fullscreen'))).toBeFalsy(); - expect(fixture.debugElement.query(By.css('.content'))).toBeTruthy(); + expect((fixture.debugElement.query(By.css('.td-loading')).nativeElement) + .style.opacity).toBe('0'); + expect((fixture.debugElement.query(By.css('.td-loading')).nativeElement) + .style.display).toBe('none'); + loadingService.register('name'); + fixture.detectChanges(); fixture.whenStable().then(() => { fixture.detectChanges(); - setTimeout(() => { - fixture.whenStable().then(() => { - fixture.detectChanges(); - expect((fixture.debugElement.query(By.css('.td-loading')).nativeElement) - .style.opacity).toBe(''); - expect((fixture.debugElement.query(By.css('.td-loading')).nativeElement) - .style.display).toBe(''); - loadingService.setValue('name', 20); - fixture.detectChanges(); - expect(fixture.debugElement.query(By.css('md-progress-bar')).componentInstance._primaryTransform()) - .toEqual({transform: 'scaleX(0.2)'}); + 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-primary'))).toBeTruthy(); + expect(fixture.debugElement.query(By.css('.td-overlay'))).toBeTruthy(); + expect(fixture.debugElement.query(By.css('.td-fullscreen'))).toBeFalsy(); + expect(fixture.debugElement.query(By.css('.content'))).toBeTruthy(); + fixture.whenStable().then(() => { + fixture.detectChanges(); + setTimeout(() => { + fixture.whenStable().then(() => { + fixture.detectChanges(); + expect((fixture.debugElement.query(By.css('.td-loading')).nativeElement) + .style.opacity).toBe(''); + expect((fixture.debugElement.query(By.css('.td-loading')).nativeElement) + .style.display).toBe(''); + loadingService.setValue('name', 20); + fixture.detectChanges(); + expect(fixture.debugElement.query(By.css('md-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()) - .toEqual({transform: 'scaleX(0.5)'}); + loadingService.setValue('name', 50); + fixture.detectChanges(); + expect(fixture.debugElement.query(By.css('md-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()).toEqual({transform: 'scaleX(1)'}); - loadingService.resolve('name'); - fixture.detectChanges(); - fixture.whenStable().then(() => { + loadingService.setValue('name', 100); + fixture.detectChanges(); + expect(fixture.debugElement.query(By.css('md-progress-bar')).componentInstance._primaryTransform()) + .toEqual({transform: 'scaleX(1)'}); + loadingService.resolve('name'); fixture.detectChanges(); - setTimeout(() => { - fixture.whenStable().then(() => { - fixture.detectChanges(); - expect((fixture.debugElement.query(By.css('.td-loading')).nativeElement) - .style.opacity).toBe('0'); - expect((fixture.debugElement.query(By.css('.td-loading')).nativeElement) - .style.display).toBe('none'); - expect(fixture.debugElement.query(By.css('.content'))).toBeTruthy(); - expect(fixture.debugElement.query(By.css('td-loading'))).toBeTruthy(); - done(); - }); - }, 200); + fixture.whenStable().then(() => { + fixture.detectChanges(); + setTimeout(() => { + fixture.whenStable().then(() => { + fixture.detectChanges(); + expect((fixture.debugElement.query(By.css('.td-loading')).nativeElement) + .style.opacity).toBe('0'); + expect((fixture.debugElement.query(By.css('.td-loading')).nativeElement) + .style.display).toBe('none'); + expect(fixture.debugElement.query(By.css('.content'))).toBeTruthy(); + expect(fixture.debugElement.query(By.css('td-loading'))).toBeTruthy(); + done(); + }); + }, 200); + }); }); - }); - }, 200); + }, 200); + }); }); }); }); @@ -254,9 +272,9 @@ describe('Directive: Loading', () => { @Component({ selector: 'td-loading-default-test', template: ` - + `, }) class TdLoadingDefaultTestComponent { @@ -266,9 +284,9 @@ class TdLoadingDefaultTestComponent { @Component({ selector: 'td-loading-basic-test', template: ` - + `, }) class TdLoadingBasicTestComponent { @@ -283,12 +301,12 @@ class TdLoadingBasicTestComponent { @Component({ selector: 'td-loading-duplication-test', template: ` - - + `, }) class TdLoadingDuplicationTestComponent { diff --git a/src/platform/core/loading/loading.component.html b/src/platform/core/loading/loading.component.html index fc352db6eb..20e4916f63 100644 --- a/src/platform/core/loading/loading.component.html +++ b/src/platform/core/loading/loading.component.html @@ -19,5 +19,5 @@ [color]="color">
- +
\ No newline at end of file diff --git a/src/platform/core/loading/loading.component.ts b/src/platform/core/loading/loading.component.ts index ac51a7584a..b875fc977e 100644 --- a/src/platform/core/loading/loading.component.ts +++ b/src/platform/core/loading/loading.component.ts @@ -1,4 +1,5 @@ -import { Component, AnimationTransitionEvent, ViewChild, TemplateRef, ChangeDetectorRef, ChangeDetectionStrategy } from '@angular/core'; +import { Component, ViewChild, TemplateRef, ChangeDetectorRef, ChangeDetectionStrategy } from '@angular/core'; +import { AnimationEvent } from '@angular/animations'; import { TemplatePortal } from '@angular/material'; import { Subject } from 'rxjs/Subject'; import { Observable } from 'rxjs/Observable'; @@ -133,7 +134,7 @@ export class TdLoadingComponent { return this.style === LoadingStyle.Overlay; } - animationComplete(event: AnimationTransitionEvent): void { + animationComplete(event: AnimationEvent): void { // Check to see if its "in" or "out" animation to execute the proper callback if (!event.fromState) { this.inAnimationCompleted(); diff --git a/src/platform/core/loading/services/loading.service.spec.ts b/src/platform/core/loading/services/loading.service.spec.ts index bd51fcaf9b..f1e8b3be9f 100644 --- a/src/platform/core/loading/services/loading.service.spec.ts +++ b/src/platform/core/loading/services/loading.service.spec.ts @@ -6,8 +6,9 @@ import { } from '@angular/core/testing'; import { Component } from '@angular/core'; import { OverlayContainer } from '@angular/material'; -import { CovalentLoadingModule, LoadingMode, LoadingType, LoadingStrategy, TdLoadingService } from '../loading.module'; +import { NoopAnimationsModule } from '@angular/platform-browser/animations'; import { By } from '@angular/platform-browser'; +import { CovalentLoadingModule, LoadingMode, LoadingType, LoadingStrategy, TdLoadingService } from '../loading.module'; describe('Service: Loading', () => { let overlayContainerElement: HTMLElement; @@ -18,6 +19,7 @@ describe('Service: Loading', () => { TdLoadingWrapperTestComponent, ], imports: [ + NoopAnimationsModule, CovalentLoadingModule, ], providers: [ diff --git a/src/platform/core/media/directives/media-toggle.directive.ts b/src/platform/core/media/directives/media-toggle.directive.ts index cf0f5712b1..2de0cf4fbf 100644 --- a/src/platform/core/media/directives/media-toggle.directive.ts +++ b/src/platform/core/media/directives/media-toggle.directive.ts @@ -1,5 +1,5 @@ import { Directive, ElementRef, Input, OnInit, OnDestroy } from '@angular/core'; -import { Renderer } from '@angular/core'; +import { Renderer2 } from '@angular/core'; import { Subscription } from 'rxjs/Subscription'; import { TdMediaService } from '../services/media.service'; @@ -57,7 +57,7 @@ export class TdMediaToggleDirective implements OnInit, OnDestroy { this._styles = styles; } - constructor(private _renderer: Renderer, private _elementRef: ElementRef, private _mediaService: TdMediaService) { } + constructor(private _renderer: Renderer2, private _elementRef: ElementRef, private _mediaService: TdMediaService) { } ngOnInit(): void { this._mediaChange(this._mediaService.query(this._query)); @@ -81,20 +81,24 @@ export class TdMediaToggleDirective implements OnInit, OnDestroy { private _changeAttributes(): void { for (let attr in this._attributes) { - this._renderer.setElementAttribute(this._elementRef.nativeElement, attr, + this._renderer.setAttribute(this._elementRef.nativeElement, attr, this._matches ? this._attributes[attr] : undefined); } } private _changeClasses(): void { this._classes.forEach((className: string) => { - this._renderer.setElementClass(this._elementRef.nativeElement, className, this._matches); + if (this._matches) { + this._renderer.addClass(this._elementRef.nativeElement, className); + } else { + this._renderer.removeClass(this._elementRef.nativeElement, className); + } }); } private _changeStyles(): void { for (let style in this._styles) { - this._renderer.setElementStyle(this._elementRef.nativeElement, style, + this._renderer.setStyle(this._elementRef.nativeElement, style, this._matches ? this._styles[style] : undefined); } } diff --git a/src/platform/core/paging/paging-bar.component.html b/src/platform/core/paging/paging-bar.component.html index 879071c056..680f365aef 100644 --- a/src/platform/core/paging/paging-bar.component.html +++ b/src/platform/core/paging/paging-bar.component.html @@ -1,11 +1,11 @@
- + {{pageSizeAllText}}
diff --git a/src/platform/core/search/search-box/search-box.component.ts b/src/platform/core/search/search-box/search-box.component.ts index 099fda29ec..0a735b8c65 100644 --- a/src/platform/core/search/search-box/search-box.component.ts +++ b/src/platform/core/search/search-box/search-box.component.ts @@ -1,5 +1,5 @@ -import { Component, ViewChild, Input, Output, EventEmitter, - trigger, state, style, transition, animate } from '@angular/core'; +import { Component, ViewChild, Input, Output, EventEmitter } from '@angular/core'; +import { trigger, state, style, transition, animate } from '@angular/animations'; import { TdSearchInputComponent } from '../search-input/search-input.component'; @@ -9,12 +9,12 @@ import { TdSearchInputComponent } from '../search-input/search-input.component'; styleUrls: ['./search-box.component.scss' ], animations: [ trigger('inputState', [ - state('false', style({ + state('0', style({ width: '0%', 'margin-left': '0px', 'margin-right': '0px', })), - state('true', style({ + state('1', style({ width: '100%', 'margin-left': '*', 'margin-right': '*', 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 fad6cae28f..4644e90fd0 100644 --- a/src/platform/core/search/search-input/search-input.component.ts +++ b/src/platform/core/search/search-input/search-input.component.ts @@ -1,5 +1,5 @@ -import { Component, ViewChild, OnInit, Input, Output, EventEmitter, - trigger, state, style, transition, animate, Optional } from '@angular/core'; +import { Component, ViewChild, OnInit, Input, Output, EventEmitter, Optional } from '@angular/core'; +import { trigger, state, style, transition, animate } from '@angular/animations'; import { FormControl } from '@angular/forms'; import { MdInputDirective, Dir } from '@angular/material'; import 'rxjs/add/operator/debounceTime'; diff --git a/src/platform/core/steps/step.component.html b/src/platform/core/steps/step.component.html index 1e7c8ee742..5cbbdb3c26 100644 --- a/src/platform/core/steps/step.component.html +++ b/src/platform/core/steps/step.component.html @@ -1,3 +1,3 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/src/platform/core/steps/steps.component.html b/src/platform/core/steps/steps.component.html index 619b2b705a..1ba2e40f14 100644 --- a/src/platform/core/steps/steps.component.html +++ b/src/platform/core/steps/steps.component.html @@ -1,5 +1,5 @@
- +
- - - + + {{step.label}} + {{step.sublabel}} - +
diff --git a/src/platform/core/steps/steps.component.spec.ts b/src/platform/core/steps/steps.component.spec.ts index 319956284d..466c7baf9c 100644 --- a/src/platform/core/steps/steps.component.spec.ts +++ b/src/platform/core/steps/steps.component.spec.ts @@ -5,8 +5,9 @@ import { ComponentFixture, } from '@angular/core/testing'; import { Component, DebugElement } from '@angular/core'; -import { CovalentStepsModule, StepState, StepMode } from './steps.module'; +import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { By } from '@angular/platform-browser'; +import { CovalentStepsModule, StepState, StepMode } from './steps.module'; describe('Component: Steps', () => { @@ -18,6 +19,7 @@ describe('Component: Steps', () => { TdStepsDynamicTestComponent, ], imports: [ + BrowserAnimationsModule, CovalentStepsModule, ], }); @@ -51,15 +53,18 @@ describe('Component: Steps', () => { // check if header is not active expect(fixture.debugElement.query(By.css('.td-circle.mat-active'))).toBeNull(); - // check if content is hidden - expect((fixture.debugElement.query(By.css('.td-step-content-wrapper')).nativeElement) - .style.display).toBe('none'); - // check if summary was rendered expect(fixture.debugElement.query(By.css('.td-step-summary'))).toBeNull(); // check if actions were rendered expect(fixture.debugElement.query(By.css('.td-step-actions'))).toBeNull(); + + fixture.detectChanges(); + fixture.whenStable().then(() => { + // check if content is hidden + expect((fixture.debugElement.query(By.css('.td-step-content-wrapper')).nativeElement) + .style.display).toBe('none'); + }); }); }))); @@ -184,15 +189,20 @@ describe('Component: Steps', () => { expect(fixture.debugElement.query(By.css('.td-complete'))).toBeTruthy(); expect(fixture.debugElement.query(By.css('.td-triangle'))).toBeNull(); - // check if content is hidden - expect((fixture.debugElement.query(By.css('.td-step-content-wrapper')).nativeElement) - .style.display).toBe('none'); - - // check if summary was rendered - expect(fixture.debugElement.query(By.css('.td-step-summary'))).toBeTruthy(); - expect((fixture.debugElement.query(By.css('.td-step-summary')).nativeElement) - .innerHTML.indexOf('Summary') > -1).toBeTruthy(); - + fixture.detectChanges(); + fixture.whenStable().then(() => { + // check if content is hidden + expect((fixture.debugElement.query(By.css('.td-step-content-wrapper')).nativeElement) + .style.display).toBe('none'); + + fixture.detectChanges(); + fixture.whenStable().then(() => { + // check if summary was rendered + expect(fixture.debugElement.query(By.css('.td-step-summary'))).toBeTruthy(); + expect((fixture.debugElement.query(By.css('.td-step-summary')).nativeElement) + .innerHTML.indexOf('Summary') > -1).toBeTruthy(); + }); + }); }); }))); @@ -238,9 +248,9 @@ class TdStepsBasicTestComponent { Content - + `, diff --git a/src/platform/dynamic-forms/dynamic-forms.component.html b/src/platform/dynamic-forms/dynamic-forms.component.html index d9adda00a4..eeaaca7293 100644 --- a/src/platform/dynamic-forms/dynamic-forms.component.html +++ b/src/platform/dynamic-forms/dynamic-forms.component.html @@ -3,7 +3,7 @@ layout-wrap layout-margin layout-align="start center"> - +
\ 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 a501be6ded..24e415fa83 100644 --- a/src/platform/dynamic-forms/dynamic-forms.component.spec.ts +++ b/src/platform/dynamic-forms/dynamic-forms.component.spec.ts @@ -6,6 +6,7 @@ import { } from '@angular/core/testing'; import 'hammerjs'; import { Component } from '@angular/core'; +import { NoopAnimationsModule } from '@angular/platform-browser/animations'; import { By } from '@angular/platform-browser'; import { CovalentCoreModule } from '../core'; import { TdDynamicType, TdDynamicElement, ITdDynamicElementConfig, @@ -16,6 +17,7 @@ describe('Component: TdDynamicForms', () => { beforeEach(async(() => { TestBed.configureTestingModule({ imports: [ + NoopAnimationsModule, CovalentCoreModule, CovalentDynamicFormsModule, ], diff --git a/src/platform/highlight/highlight.component.ts b/src/platform/highlight/highlight.component.ts index 806171231d..070bb20e51 100644 --- a/src/platform/highlight/highlight.component.ts +++ b/src/platform/highlight/highlight.component.ts @@ -1,4 +1,4 @@ -import { Component, AfterViewInit, ElementRef, Input, Renderer, SecurityContext } from '@angular/core'; +import { Component, AfterViewInit, ElementRef, Input, Renderer2, SecurityContext } from '@angular/core'; import { DomSanitizer } from '@angular/platform-browser'; /* tslint:disable-next-line */ let hljs: any = require('highlight.js/lib'); @@ -36,7 +36,7 @@ export class TdHighlightComponent implements AfterViewInit { */ @Input('lang') language: string = 'typescript'; - constructor(private _renderer: Renderer, + constructor(private _renderer: Renderer2, private _elementRef: ElementRef, private _domSanitizer: DomSanitizer) {} @@ -53,22 +53,22 @@ export class TdHighlightComponent implements AfterViewInit { */ private _loadContent(code: string): void { if (code && code.trim().length > 0) { + // Clean container + this._renderer.setProperty(this._elementRef.nativeElement, 'innerHTML', ''); // Parse html string into actual HTML elements. let preElement: HTMLPreElement = this._elementFromString(this._render(code)); - // Clean container - this._renderer.setElementProperty(this._elementRef.nativeElement, 'innerHTML', ''); - // Project DIV element into container - this._renderer.projectNodes(this._elementRef.nativeElement, [preElement]); } } private _elementFromString(codeStr: string): HTMLPreElement { - // Renderer doesnt have a parsing method, so we have to sanitize and use [innerHTML] + // Renderer2 doesnt have a parsing method, so we have to sanitize and use [innerHTML] // to parse the string into DOM element for now. - const preElement: HTMLPreElement = this._renderer.createElement(this._elementRef.nativeElement, 'pre'); - const codeElement: HTMLElement = this._renderer.createElement(preElement, 'code'); + const preElement: HTMLPreElement = this._renderer.createElement('pre'); + this._renderer.appendChild(this._elementRef.nativeElement, preElement); + const codeElement: HTMLElement = this._renderer.createElement('code'); + this._renderer.appendChild(preElement, codeElement); // Set .highlight class into element - this._renderer.setElementClass(codeElement, 'highlight', true); + this._renderer.addClass(codeElement, 'highlight'); codeElement.innerHTML = this._domSanitizer.sanitize(SecurityContext.HTML, codeStr); return preElement; } diff --git a/src/platform/http/http.module.ts b/src/platform/http/http.module.ts index 5ad1daf1c4..fd553058a5 100644 --- a/src/platform/http/http.module.ts +++ b/src/platform/http/http.module.ts @@ -1,10 +1,10 @@ -import { NgModule, ModuleWithProviders, Injector, OpaqueToken } from '@angular/core'; +import { NgModule, ModuleWithProviders, Injector, InjectionToken } from '@angular/core'; import { HttpModule, Http } from '@angular/http'; import { HttpInterceptorService, IHttpInterceptorConfig } from './interceptors/http-interceptor.service'; import { URLRegExpInterceptorMatcher } from './interceptors/url-regexp-interceptor-matcher.class'; -export const HTTP_CONFIG: OpaqueToken = new OpaqueToken('HTTP_CONFIG'); +export const HTTP_CONFIG: InjectionToken = new InjectionToken('HTTP_CONFIG'); export type HttpConfig = {interceptors: IHttpInterceptorConfig[]}; diff --git a/src/platform/markdown/markdown.component.ts b/src/platform/markdown/markdown.component.ts index f5e1c7263e..5bfd56cfd0 100644 --- a/src/platform/markdown/markdown.component.ts +++ b/src/platform/markdown/markdown.component.ts @@ -1,4 +1,4 @@ -import { Component, AfterViewInit, ElementRef, Input, Renderer, SecurityContext } from '@angular/core'; +import { Component, AfterViewInit, ElementRef, Input, Renderer2, SecurityContext } from '@angular/core'; import { DomSanitizer } from '@angular/platform-browser'; declare var showdown: any; @@ -26,7 +26,7 @@ export class TdMarkdownComponent implements AfterViewInit { this._loadContent(this._content); } - constructor(private _renderer: Renderer, + constructor(private _renderer: Renderer2, private _elementRef: ElementRef, private _domSanitizer: DomSanitizer) {} @@ -41,19 +41,18 @@ export class TdMarkdownComponent implements AfterViewInit { */ private _loadContent(markdown: string): void { if (markdown && markdown.trim().length > 0) { + // Clean container + this._renderer.setProperty(this._elementRef.nativeElement, 'innerHTML', ''); // Parse html string into actual HTML elements. let divElement: HTMLDivElement = this._elementFromString(this._render(markdown)); - // Clean container - this._renderer.setElementProperty(this._elementRef.nativeElement, 'innerHTML', ''); - // Project DIV element into container - this._renderer.projectNodes(this._elementRef.nativeElement, [divElement]); } } private _elementFromString(markupStr: string): HTMLDivElement { - // Renderer doesnt have a parsing method, so we have to sanitize and use [innerHTML] + // Renderer2 doesnt have a parsing method, so we have to sanitize and use [innerHTML] // to parse the string into DOM element for now. - const div: HTMLDivElement = this._renderer.createElement(this._elementRef.nativeElement, 'div'); + const div: HTMLDivElement = this._renderer.createElement('div'); + this._renderer.appendChild(this._elementRef.nativeElement, div); div.innerHTML = this._domSanitizer.sanitize(SecurityContext.HTML, markupStr); return div; }