diff --git a/e2e/components/menu-e2e.spec.ts b/e2e/components/menu-e2e.spec.ts index 3f253e09c07..f9e442180c1 100644 --- a/e2e/components/menu-e2e.spec.ts +++ b/e2e/components/menu-e2e.spec.ts @@ -76,7 +76,8 @@ describe('menu', () => { it('should mirror classes on host to menu template in overlay', () => { page.trigger().click(); - expect(page.menu().getAttribute('class')).toContain('mat-menu-panel custom'); + expect(page.menu().getAttribute('class')).toContain('mat-menu-panel'); + expect(page.menu().getAttribute('class')).toContain('custom'); }); describe('keyboard events', () => { diff --git a/e2e/components/sidenav-e2e.spec.ts b/e2e/components/sidenav-e2e.spec.ts index f14688f3803..445d8bf63b7 100644 --- a/e2e/components/sidenav-e2e.spec.ts +++ b/e2e/components/sidenav-e2e.spec.ts @@ -20,7 +20,9 @@ describe('sidenav', () => { it('should close again', () => { element(by.buttonText('Open sidenav')).click(); + browser.sleep(50); element(by.buttonText('Open sidenav')).click(); + expect(sidenav.isDisplayed()).toBeFalsy(); }); }); diff --git a/package-lock.json b/package-lock.json index 7b9ef57faf6..7b64347efe5 100644 --- a/package-lock.json +++ b/package-lock.json @@ -5,77 +5,105 @@ "requires": true, "dependencies": { "@angular/animations": { - "version": "4.1.3", - "resolved": "https://registry.npmjs.org/@angular/animations/-/animations-4.1.3.tgz", - "integrity": "sha1-bomh4Pv9bQ6Qvk8q4ZCqxn+DpBE=" + "version": "4.3.4", + "resolved": "https://registry.npmjs.org/@angular/animations/-/animations-4.3.4.tgz", + "integrity": "sha1-Ascms7cK49LhVXBMjGDpuvAVR+8=", + "requires": { + "tslib": "1.7.1" + } }, "@angular/common": { - "version": "4.1.3", - "resolved": "https://registry.npmjs.org/@angular/common/-/common-4.1.3.tgz", - "integrity": "sha1-58R5HjITHPdMI5QowqZ9qrLu8Bc=" + "version": "4.3.4", + "resolved": "https://registry.npmjs.org/@angular/common/-/common-4.3.4.tgz", + "integrity": "sha1-mPt9bo2mM7pWhE1cAJhspAeuqVA=", + "requires": { + "tslib": "1.7.1" + } }, "@angular/compiler": { - "version": "4.1.3", - "resolved": "https://registry.npmjs.org/@angular/compiler/-/compiler-4.1.3.tgz", - "integrity": "sha1-0t0whTsM9KVHWLSjFGMsIx+clMM=" + "version": "4.3.4", + "resolved": "https://registry.npmjs.org/@angular/compiler/-/compiler-4.3.4.tgz", + "integrity": "sha1-mxaueF8iuRiqFo2wVVwFMEuvnXc=", + "requires": { + "tslib": "1.7.1" + } }, "@angular/compiler-cli": { - "version": "4.1.3", - "resolved": "https://registry.npmjs.org/@angular/compiler-cli/-/compiler-cli-4.1.3.tgz", - "integrity": "sha1-wjYv/fZXVkcUgfg5+rZ1vKwhP5Y=", + "version": "4.3.4", + "resolved": "https://registry.npmjs.org/@angular/compiler-cli/-/compiler-cli-4.3.4.tgz", + "integrity": "sha1-PRbshpw59KyhjKxx3PEYqA9iCOY=", "dev": true, "requires": { - "@angular/tsc-wrapped": "4.1.3", + "@angular/tsc-wrapped": "4.3.4", "minimist": "1.2.0", "reflect-metadata": "0.1.10" } }, "@angular/core": { - "version": "4.1.3", - "resolved": "https://registry.npmjs.org/@angular/core/-/core-4.1.3.tgz", - "integrity": "sha1-KFSY64arfQtvmC+Pn0h+9hABOzU=" + "version": "4.3.4", + "resolved": "https://registry.npmjs.org/@angular/core/-/core-4.3.4.tgz", + "integrity": "sha1-Qt2ARmAPWggKThISEWsS/pe8/LQ=", + "requires": { + "tslib": "1.7.1" + } }, "@angular/forms": { - "version": "4.1.3", - "resolved": "https://registry.npmjs.org/@angular/forms/-/forms-4.1.3.tgz", - "integrity": "sha1-OAq0w6+ExdHXSMKn0EFRx9yOSYI=" + "version": "4.3.4", + "resolved": "https://registry.npmjs.org/@angular/forms/-/forms-4.3.4.tgz", + "integrity": "sha1-V/oHt7+RA/G5SPv+TP7TFAksnpY=", + "requires": { + "tslib": "1.7.1" + } }, "@angular/http": { - "version": "4.1.3", - "resolved": "https://registry.npmjs.org/@angular/http/-/http-4.1.3.tgz", - "integrity": "sha1-650cMCoBcoFfmlczENm+C964Ra4=" + "version": "4.3.4", + "resolved": "https://registry.npmjs.org/@angular/http/-/http-4.3.4.tgz", + "integrity": "sha1-diy3wDIFn0Hf0FU/V06c4NXswKk=", + "requires": { + "tslib": "1.7.1" + } }, "@angular/platform-browser": { - "version": "4.1.3", - "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-4.1.3.tgz", - "integrity": "sha1-T6HbURndF4sxXdrlsym+4akypb0=" + "version": "4.3.4", + "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-4.3.4.tgz", + "integrity": "sha1-3t6P8xRBokUvIC7XmKCCLrxakVM=", + "requires": { + "tslib": "1.7.1" + } }, "@angular/platform-browser-dynamic": { - "version": "4.1.3", - "resolved": "https://registry.npmjs.org/@angular/platform-browser-dynamic/-/platform-browser-dynamic-4.1.3.tgz", - "integrity": "sha1-PBP9z1kdSH9u/cHUaRPygMbYwuw=", - "dev": true + "version": "4.3.4", + "resolved": "https://registry.npmjs.org/@angular/platform-browser-dynamic/-/platform-browser-dynamic-4.3.4.tgz", + "integrity": "sha1-v3uEHy/I0g7+dW/h5QqgKMletXw=", + "dev": true, + "requires": { + "tslib": "1.7.1" + } }, "@angular/platform-server": { - "version": "4.1.3", - "resolved": "https://registry.npmjs.org/@angular/platform-server/-/platform-server-4.1.3.tgz", - "integrity": "sha1-u/rkKxVzA1d1HaDhRdaG+SWpRDE=", + "version": "4.3.4", + "resolved": "https://registry.npmjs.org/@angular/platform-server/-/platform-server-4.3.4.tgz", + "integrity": "sha1-zf/kDT2xF1m8oi8ywnkT+TvAkPM=", "dev": true, "requires": { "parse5": "3.0.2", + "tslib": "1.7.1", "xhr2": "0.1.4" } }, "@angular/router": { - "version": "4.1.3", - "resolved": "https://registry.npmjs.org/@angular/router/-/router-4.1.3.tgz", - "integrity": "sha1-3a/UaufMyLH3SQT/tF85TkRiUhY=", - "dev": true + "version": "4.3.4", + "resolved": "https://registry.npmjs.org/@angular/router/-/router-4.3.4.tgz", + "integrity": "sha1-IGWI/sRm+DonaL11bFZkZRCR5Hc=", + "dev": true, + "requires": { + "tslib": "1.7.1" + } }, "@angular/tsc-wrapped": { - "version": "4.1.3", - "resolved": "https://registry.npmjs.org/@angular/tsc-wrapped/-/tsc-wrapped-4.1.3.tgz", - "integrity": "sha1-LWNyyRh78WIerNlguUs5xPlSk80=", + "version": "4.3.4", + "resolved": "https://registry.npmjs.org/@angular/tsc-wrapped/-/tsc-wrapped-4.3.4.tgz", + "integrity": "sha1-hsFM7A7n8lu3p/gCcL/+Gf56zWM=", "dev": true, "requires": { "tsickle": "0.21.6" @@ -10362,14 +10390,12 @@ "minimist": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz", - "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=", - "dev": true + "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=" }, "mkdirp": { "version": "0.5.1", "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz", "integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=", - "dev": true, "requires": { "minimist": "0.0.8" }, @@ -10377,8 +10403,7 @@ "minimist": { "version": "0.0.8", "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz", - "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=", - "dev": true + "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=" } } }, @@ -13343,14 +13368,12 @@ "source-map": { "version": "0.5.6", "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.6.tgz", - "integrity": "sha1-dc449SvwczxafwwRjYEzSiu19BI=", - "dev": true + "integrity": "sha1-dc449SvwczxafwwRjYEzSiu19BI=" }, "source-map-support": { "version": "0.4.15", "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.4.15.tgz", "integrity": "sha1-AyAt9lwG0r2MfsI2KhkwVv7407E=", - "dev": true, "requires": { "source-map": "0.5.6" } @@ -14591,6 +14614,17 @@ } } }, + "tsickle": { + "version": "0.23.5", + "resolved": "https://registry.npmjs.org/tsickle/-/tsickle-0.23.5.tgz", + "integrity": "sha1-kYgnFwwMe4kYPWxhc8NWQZG6xqo=", + "requires": { + "minimist": "1.2.0", + "mkdirp": "0.5.1", + "source-map": "0.5.6", + "source-map-support": "0.4.15" + } + }, "tslib": { "version": "1.7.1", "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.7.1.tgz", diff --git a/package.json b/package.json index ee85600ba5f..1eeaf4d37d4 100644 --- a/package.json +++ b/package.json @@ -22,28 +22,29 @@ "version": "2.0.0-beta.8", "license": "MIT", "engines": { - "node": ">= 5.4.1 < 7" + "node": ">= 5.4.1" }, "dependencies": { - "@angular/animations": "~4.1.0", - "@angular/common": "~4.1.0", - "@angular/compiler": "~4.1.0", - "@angular/core": "~4.1.0", - "@angular/forms": "~4.1.0", - "@angular/http": "~4.1.0", - "@angular/platform-browser": "~4.1.0", + "@angular/animations": "~4.3.0", + "@angular/common": "~4.3.0", + "@angular/compiler": "~4.3.0", + "@angular/core": "~4.3.0", + "@angular/forms": "~4.3.0", + "@angular/http": "~4.3.0", + "@angular/platform-browser": "~4.3.0", "core-js": "^2.4.1", "rxjs": "^5.0.1", "systemjs": "0.19.43", + "tsickle": "^0.23.5", "tslib": "^1.7.1", - "zone.js": "^0.8.4" + "zone.js": "^0.8.12" }, "devDependencies": { - "@angular/compiler-cli": "~4.1.0", - "@angular/platform-browser-dynamic": "~4.1.0", - "@angular/platform-server": "~4.1.0", - "@angular/router": "~4.1.0", - "@angular/tsc-wrapped": "~4.1.0", + "@angular/compiler-cli": "~4.3.0", + "@angular/platform-browser-dynamic": "~4.3.0", + "@angular/platform-server": "~4.3.0", + "@angular/router": "~4.3.0", + "@angular/tsc-wrapped": "~4.3.0", "@google-cloud/storage": "^1.1.1", "@types/chalk": "^0.4.31", "@types/fs-extra": "^3.0.1", diff --git a/src/cdk/package.json b/src/cdk/package.json index 80d474b2372..3b1a28634a4 100644 --- a/src/cdk/package.json +++ b/src/cdk/package.json @@ -23,8 +23,8 @@ }, "homepage": "https://github.com/angular/material2#readme", "peerDependencies": { - "@angular/core": "^4.0.0", - "@angular/common": "^4.0.0" + "@angular/core": "^4.3.0", + "@angular/common": "^4.3.0" }, "dependencies": { "tslib": "^1.7.1" diff --git a/src/demo-app/autocomplete/autocomplete-demo.html b/src/demo-app/autocomplete/autocomplete-demo.html index 75cbfb340ec..97ae6761a08 100644 --- a/src/demo-app/autocomplete/autocomplete-demo.html +++ b/src/demo-app/autocomplete/autocomplete-demo.html @@ -29,7 +29,7 @@ Space above cards:
Template-driven value (currentState): {{ currentState }}
-
Template-driven dirty: {{ modelDir?.dirty }}
+
Template-driven dirty: {{ modelDir ? modelDir.dirty : false }}
diff --git a/src/lib/menu/menu.spec.ts b/src/lib/menu/menu.spec.ts index 7f9a1bccfbd..61b562001bb 100644 --- a/src/lib/menu/menu.spec.ts +++ b/src/lib/menu/menu.spec.ts @@ -590,7 +590,7 @@ describe('MdMenu', () => { subscription.unsubscribe(); }); - it('should toggle a nested menu when its trigger is hovered', () => { + it('should toggle a nested menu when its trigger is hovered', fakeAsync(() => { compileTestComponent(); instance.rootTriggerEl.nativeElement.click(); fixture.detectChanges(); @@ -607,33 +607,39 @@ describe('MdMenu', () => { dispatchMouseEvent(items[items.indexOf(levelOneTrigger) + 1], 'mouseenter'); fixture.detectChanges(); + tick(500); + expect(overlay.querySelectorAll('.mat-menu-panel').length).toBe(1, 'Expected one open menu'); expect(levelOneTrigger.classList) .not.toContain('mat-menu-item-highlighted', 'Expected the trigger to not be highlighted'); - }); + })); - it('should close all the open sub-menus when the hover state is changed at the root', () => { - compileTestComponent(); - instance.rootTriggerEl.nativeElement.click(); - fixture.detectChanges(); + it('should close all the open sub-menus when the hover state is changed at the root', + fakeAsync(() => { + compileTestComponent(); + instance.rootTriggerEl.nativeElement.click(); + fixture.detectChanges(); - const items = Array.from(overlay.querySelectorAll('.mat-menu-panel [md-menu-item]')); - const levelOneTrigger = overlay.querySelector('#level-one-trigger')!; + const items = Array.from(overlay.querySelectorAll('.mat-menu-panel [md-menu-item]')); + const levelOneTrigger = overlay.querySelector('#level-one-trigger')!; - dispatchMouseEvent(levelOneTrigger, 'mouseenter'); - fixture.detectChanges(); + dispatchMouseEvent(levelOneTrigger, 'mouseenter'); + fixture.detectChanges(); - const levelTwoTrigger = overlay.querySelector('#level-two-trigger')! as HTMLElement; - dispatchMouseEvent(levelTwoTrigger, 'mouseenter'); - fixture.detectChanges(); + const levelTwoTrigger = overlay.querySelector('#level-two-trigger')! as HTMLElement; + dispatchMouseEvent(levelTwoTrigger, 'mouseenter'); + fixture.detectChanges(); - expect(overlay.querySelectorAll('.mat-menu-panel').length) - .toBe(3, 'Expected three open menus'); + expect(overlay.querySelectorAll('.mat-menu-panel').length) + .toBe(3, 'Expected three open menus'); - dispatchMouseEvent(items[items.indexOf(levelOneTrigger) + 1], 'mouseenter'); - fixture.detectChanges(); - expect(overlay.querySelectorAll('.mat-menu-panel').length).toBe(1, 'Expected one open menu'); - }); + dispatchMouseEvent(items[items.indexOf(levelOneTrigger) + 1], 'mouseenter'); + fixture.detectChanges(); + tick(500); + + expect(overlay.querySelectorAll('.mat-menu-panel').length) + .toBe(1, 'Expected one open menu'); + })); it('should open a nested menu when its trigger is clicked', () => { compileTestComponent(); @@ -653,7 +659,7 @@ describe('MdMenu', () => { .toBe(2, 'Expected repeat clicks not to close the menu.'); }); - it('should open and close a nested menu with arrow keys in ltr', () => { + it('should open and close a nested menu with arrow keys in ltr', fakeAsync(() => { compileTestComponent(); instance.rootTriggerEl.nativeElement.click(); fixture.detectChanges(); @@ -669,11 +675,12 @@ describe('MdMenu', () => { expect(panels.length).toBe(2, 'Expected two open menus'); dispatchKeyboardEvent(panels[1], 'keydown', LEFT_ARROW); fixture.detectChanges(); + tick(500); expect(overlay.querySelectorAll('.mat-menu-panel').length).toBe(1); - }); + })); - it('should open and close a nested menu with the arrow keys in rtl', () => { + it('should open and close a nested menu with the arrow keys in rtl', fakeAsync(() => { dir = 'rtl'; fixture.destroy(); compileTestComponent(); @@ -691,9 +698,10 @@ describe('MdMenu', () => { expect(panels.length).toBe(2, 'Expected two open menus'); dispatchKeyboardEvent(panels[1], 'keydown', RIGHT_ARROW); fixture.detectChanges(); + tick(500); expect(overlay.querySelectorAll('.mat-menu-panel').length).toBe(1); - }); + })); it('should not do anything with the arrow keys for a top-level menu', () => { compileTestComponent(); @@ -713,7 +721,7 @@ describe('MdMenu', () => { .toBe(1, 'Expected one menu to remain open'); }); - it('should close all of the menus when the backdrop is clicked', () => { + it('should close all of the menus when the backdrop is clicked', fakeAsync(() => { compileTestComponent(); instance.rootTriggerEl.nativeElement.click(); fixture.detectChanges(); @@ -733,9 +741,10 @@ describe('MdMenu', () => { (overlay.querySelector('.cdk-overlay-backdrop')! as HTMLElement).click(); fixture.detectChanges(); + tick(500); expect(overlay.querySelectorAll('.mat-menu-panel').length).toBe(0, 'Expected no open menus'); - }); + })); it('should shift focus between the sub-menus', () => { compileTestComponent(); @@ -858,7 +867,7 @@ describe('MdMenu', () => { expect(Math.round(triggerRect.top)).toBe(Math.round(panelRect.top) + MENU_PANEL_TOP_PADDING); }); - it('should close all of the menus when an item is clicked', () => { + it('should close all of the menus when an item is clicked', fakeAsync(() => { compileTestComponent(); instance.rootTriggerEl.nativeElement.click(); fixture.detectChanges(); @@ -875,9 +884,10 @@ describe('MdMenu', () => { (menus[2].querySelector('.mat-menu-item')! as HTMLElement).click(); fixture.detectChanges(); + tick(500); expect(overlay.querySelectorAll('.mat-menu-panel').length).toBe(0, 'Expected no open menus'); - }); + })); it('should set a class on the menu items that trigger a sub-menu', () => { compileTestComponent(); @@ -911,37 +921,40 @@ describe('MdMenu', () => { .toContain('mat-elevation-z4', 'Expected second sub-menu to have base elevation + 2.'); }); - it('should update the elevation when the same menu is opened at a different depth', () => { - compileTestComponent(); - instance.rootTrigger.openMenu(); - fixture.detectChanges(); + it('should update the elevation when the same menu is opened at a different depth', + fakeAsync(() => { + compileTestComponent(); + instance.rootTrigger.openMenu(); + fixture.detectChanges(); - instance.levelOneTrigger.openMenu(); - fixture.detectChanges(); + instance.levelOneTrigger.openMenu(); + fixture.detectChanges(); - instance.levelTwoTrigger.openMenu(); - fixture.detectChanges(); + instance.levelTwoTrigger.openMenu(); + fixture.detectChanges(); - let lastMenu = overlay.querySelectorAll('.mat-menu-panel')[2]; + let lastMenu = overlay.querySelectorAll('.mat-menu-panel')[2]; - expect(lastMenu.classList) - .toContain('mat-elevation-z4', 'Expected menu to have the base elevation plus two.'); + expect(lastMenu.classList) + .toContain('mat-elevation-z4', 'Expected menu to have the base elevation plus two.'); - (overlay.querySelector('.cdk-overlay-backdrop')! as HTMLElement).click(); - fixture.detectChanges(); + (overlay.querySelector('.cdk-overlay-backdrop')! as HTMLElement).click(); + fixture.detectChanges(); + tick(500); - expect(overlay.querySelectorAll('.mat-menu-panel').length).toBe(0, 'Expected no open menus'); + expect(overlay.querySelectorAll('.mat-menu-panel').length) + .toBe(0, 'Expected no open menus'); - instance.alternateTrigger.openMenu(); - fixture.detectChanges(); + instance.alternateTrigger.openMenu(); + fixture.detectChanges(); - lastMenu = overlay.querySelector('.mat-menu-panel') as HTMLElement; + lastMenu = overlay.querySelector('.mat-menu-panel') as HTMLElement; - expect(lastMenu.classList) - .not.toContain('mat-elevation-z4', 'Expected menu not to maintain old elevation.'); - expect(lastMenu.classList) - .toContain('mat-elevation-z2', 'Expected menu to have the proper updated elevation.'); - }); + expect(lastMenu.classList) + .not.toContain('mat-elevation-z4', 'Expected menu not to maintain old elevation.'); + expect(lastMenu.classList) + .toContain('mat-elevation-z2', 'Expected menu to have the proper updated elevation.'); + })); it('should not increase the elevation if the user specified a custom one', () => { const elevationFixture = TestBed.createComponent(NestedMenuCustomElevation); diff --git a/src/lib/package.json b/src/lib/package.json index b6ea8b0c0f1..d077b8b5d8e 100644 --- a/src/lib/package.json +++ b/src/lib/package.json @@ -23,8 +23,8 @@ "homepage": "https://github.com/angular/material2#readme", "peerDependencies": { "@angular/cdk": "0.0.0-PLACEHOLDER", - "@angular/core": "^4.0.0", - "@angular/common": "^4.0.0" + "@angular/core": "^4.3.0", + "@angular/common": "^4.3.0" }, "dependencies": { "tslib": "^1.7.1" diff --git a/src/lib/sidenav/sidenav.spec.ts b/src/lib/sidenav/sidenav.spec.ts index 3a27dc4feba..b0c3d316a19 100644 --- a/src/lib/sidenav/sidenav.spec.ts +++ b/src/lib/sidenav/sidenav.spec.ts @@ -31,7 +31,6 @@ describe('MdSidenav', () => { let fixture = TestBed.createComponent(BasicTestApp); fixture.detectChanges(); - tick(); let testComponent: BasicTestApp = fixture.debugElement.componentInstance; let sidenav = fixture.debugElement.query(By.directive(MdSidenav)); @@ -44,6 +43,7 @@ describe('MdSidenav', () => { expect(testComponent.closeCount).toBe(0); tick(); + fixture.detectChanges(); expect(sidenav.componentInstance._isAnimating).toBe(false); expect(testComponent.openCount).toBe(1); @@ -58,6 +58,7 @@ describe('MdSidenav', () => { expect(testComponent.closeCount).toBe(0); tick(); + fixture.detectChanges(); expect(testComponent.openCount).toBe(1); expect(testComponent.closeCount).toBe(1); @@ -105,7 +106,6 @@ describe('MdSidenav', () => { let fixture = TestBed.createComponent(BasicTestApp); fixture.detectChanges(); - tick(); let testComponent: BasicTestApp = fixture.debugElement.componentInstance; let sidenav = fixture.debugElement.query(By.directive(MdSidenav)); @@ -162,7 +162,6 @@ describe('MdSidenav', () => { let fixture = TestBed.createComponent(BasicTestApp); fixture.detectChanges(); - tick(); let sidenav = fixture.debugElement.query(By.directive(MdSidenav)).componentInstance; let openButton = fixture.componentInstance.openButton.nativeElement; diff --git a/src/lib/sidenav/sidenav.ts b/src/lib/sidenav/sidenav.ts index 47d90947b8f..b2b995674b0 100644 --- a/src/lib/sidenav/sidenav.ts +++ b/src/lib/sidenav/sidenav.ts @@ -71,12 +71,13 @@ export class MdSidenavToggleResult { visibility: 'hidden', })), transition('void => open-instant', animate('0ms')), - transition('void <=> open', animate('400ms cubic-bezier(0.25, 0.8, 0.25, 1)')) + transition('void <=> open, open-instant => void', + animate('400ms cubic-bezier(0.25, 0.8, 0.25, 1)')) ]) ], host: { 'class': 'mat-sidenav', - '[@transform]': '_getAnimationState()', + '[@transform]': '_animationState', '(@transform.start)': '_onAnimationStart()', '(@transform.done)': '_onAnimationEnd($event)', '(keydown)': 'handleKeydown($event)', @@ -129,6 +130,9 @@ export class MdSidenav implements AfterContentInit, OnDestroy { /** Whether the sidenav is animating. Used to prevent overlapping animations. */ _isAnimating = false; + /** Current state of the sidenav animation. */ + _animationState: 'open-instant' | 'open' | 'void' = 'void'; + /** * Promise that resolves when the open/close animation completes. It is here for backwards * compatibility and should be removed next time we do sidenav breaking changes. @@ -186,7 +190,7 @@ export class MdSidenav implements AfterContentInit, OnDestroy { ngAfterContentInit() { this._focusTrap = this._focusTrapFactory.create(this._elementRef.nativeElement); this._focusTrap.enabled = this.isFocusTrapEnabled; - Promise.resolve().then(() => this._enableAnimations = true); + this._enableAnimations = true; } ngOnDestroy() { @@ -223,6 +227,13 @@ export class MdSidenav implements AfterContentInit, OnDestroy { toggle(isOpen: boolean = !this.opened): Promise { if (!this._isAnimating) { this._opened = isOpen; + + if (isOpen) { + this._animationState = this._enableAnimations ? 'open' : 'open-instant'; + } else { + this._animationState = 'void'; + } + this._currentTogglePromise = new Promise(resolve => { first.call(isOpen ? this.onOpen : this.onClose).subscribe(resolve); }); @@ -232,7 +243,7 @@ export class MdSidenav implements AfterContentInit, OnDestroy { } } - // TODO(crisbeto): This promise is here backwards-compatibility. + // TODO(crisbeto): This promise is here for backwards-compatibility. // It should be removed next time we do breaking changes in the sidenav. return this._currentTogglePromise!; } @@ -248,17 +259,6 @@ export class MdSidenav implements AfterContentInit, OnDestroy { } } - /** - * Figures out the state of the sidenav animation. - */ - _getAnimationState(): 'open-instant' | 'open' | 'void' { - if (this.opened) { - return this._enableAnimations ? 'open' : 'open-instant'; - } - - return 'void'; - } - _onAnimationStart() { this._isAnimating = true; this._animationStarted.emit(); @@ -273,8 +273,13 @@ export class MdSidenav implements AfterContentInit, OnDestroy { this.onClose.emit(new MdSidenavToggleResult('close', true)); } - this._isAnimating = false; - this._currentTogglePromise = null; + // Note: as of Angular 4.3, the animations module seems to fire the `start` callback before + // the end if animations are disabled. Make this call async to ensure that it still fires + // at the appropriate time. + Promise.resolve().then(() => { + this._isAnimating = false; + this._currentTogglePromise = null; + }); } get _width() { diff --git a/src/material-examples/package.json b/src/material-examples/package.json index bddb9cae984..e4f029d0dfa 100644 --- a/src/material-examples/package.json +++ b/src/material-examples/package.json @@ -24,9 +24,9 @@ "homepage": "https://github.com/angular/material2#readme", "peerDependencies": { "@angular/cdk": "0.0.0-PLACEHOLDER", - "@angular/core": "^4.0.0", - "@angular/common": "^4.0.0", - "@angular/http": "^4.0.0", + "@angular/core": "^4.3.0", + "@angular/common": "^4.3.0", + "@angular/http": "^4.3.0", "@angular/material": "0.0.0-PLACEHOLDER" }, "dependencies": { diff --git a/tools/screenshot-test/package.json b/tools/screenshot-test/package.json index 9f5ae91cf24..485555b28bc 100644 --- a/tools/screenshot-test/package.json +++ b/tools/screenshot-test/package.json @@ -11,16 +11,16 @@ "dependencies": { "@angular/animations": "^4.0.2", "@angular/cdk": "angular/cdk-builds", - "@angular/common": "^4.0.0", - "@angular/compiler": "^4.0.0", - "@angular/compiler-cli": "^4.0.0", - "@angular/core": "^4.0.0", - "@angular/forms": "^4.0.0", - "@angular/http": "^4.0.0", + "@angular/common": "^4.3.0", + "@angular/compiler": "^4.3.0", + "@angular/compiler-cli": "^4.3.0", + "@angular/core": "^4.3.0", + "@angular/forms": "^4.3.0", + "@angular/http": "^4.3.0", "@angular/material": "angular/material2-builds", - "@angular/platform-browser": "^4.0.0", - "@angular/platform-browser-dynamic": "^4.0.0", - "@angular/router": "^4.0.0", + "@angular/platform-browser": "^4.3.0", + "@angular/platform-browser-dynamic": "^4.3.0", + "@angular/router": "^4.3.0", "core-js": "^2.4.1", "firebase": "^3.7.6", "rxjs": "^5.0.1", @@ -29,7 +29,7 @@ }, "devDependencies": { "@angular/cli": "^1.0.0", - "@angular/compiler-cli": "^4.0.0", + "@angular/compiler-cli": "^4.3.0", "@types/node": "^6.0.42", "ts-node": "1.2.1", "typescript": "~2.2.1"