diff --git a/src/demo-app/snack-bar/snack-bar-demo.html b/src/demo-app/snack-bar/snack-bar-demo.html index 3e81b93bbee9..2ad2f577084d 100644 --- a/src/demo-app/snack-bar/snack-bar-demo.html +++ b/src/demo-app/snack-bar/snack-bar-demo.html @@ -2,11 +2,13 @@

SnackBar demo

Message:
- Show button - + +

Show button

+ +
diff --git a/src/lib/grid-list/grid-list.scss b/src/lib/grid-list/grid-list.scss index 13c69dc8bf93..cf2ee776125f 100644 --- a/src/lib/grid-list/grid-list.scss +++ b/src/lib/grid-list/grid-list.scss @@ -20,6 +20,7 @@ md-grid-list { md-grid-tile { display: block; position: absolute; + overflow: hidden; figure { display: flex; diff --git a/src/lib/snack-bar/base-snack-bar.ts b/src/lib/snack-bar/base-snack-bar.ts deleted file mode 100644 index ffbcb65bae7e..000000000000 --- a/src/lib/snack-bar/base-snack-bar.ts +++ /dev/null @@ -1,12 +0,0 @@ -import {MdSnackBarRef} from './snack-bar-ref'; - - -export class BaseSnackBarContent { - /** The instance of the component making up the content of the snack bar. */ - snackBarRef: MdSnackBarRef; - - /** Dismisses the snack bar. */ - dismiss(): void { - this.snackBarRef.dismiss(); - } -} diff --git a/src/lib/snack-bar/package.json b/src/lib/snack-bar/package.json deleted file mode 100644 index 5122e38fa551..000000000000 --- a/src/lib/snack-bar/package.json +++ /dev/null @@ -1,29 +0,0 @@ -{ - "name": "@angular2-material/snack-bar", - "version": "2.0.0-alpha.8-2", - "description": "Angular 2 Material snack bar", - "main": "./snack-bar.umd.js", - "module": "./index.js", - "typings": "./index.d.ts", - "repository": { - "type": "git", - "url": "https://github.com/angular/material2.git" - }, - "keywords": [ - "angular", - "material", - "material design", - "components", - "snackbar", - "toast", - "notification" - ], - "license": "MIT", - "bugs": { - "url": "https://github.com/angular/material2/issues" - }, - "homepage": "https://github.com/angular/material2#readme", - "peerDependencies": { - "@angular2-material/core": "2.0.0-alpha.8-2" - } -} diff --git a/src/lib/snack-bar/simple-snack-bar.scss b/src/lib/snack-bar/simple-snack-bar.scss index d380adaea3c2..9935cd92950e 100644 --- a/src/lib/snack-bar/simple-snack-bar.scss +++ b/src/lib/snack-bar/simple-snack-bar.scss @@ -1,6 +1,6 @@ md-simple-snackbar { - display: flex; - justify-content: space-between; + display: flex; + justify-content: space-between; } .md-simple-snackbar-message { diff --git a/src/lib/snack-bar/simple-snack-bar.ts b/src/lib/snack-bar/simple-snack-bar.ts index 542cbe08f586..d74d6736c3df 100644 --- a/src/lib/snack-bar/simple-snack-bar.ts +++ b/src/lib/snack-bar/simple-snack-bar.ts @@ -1,20 +1,32 @@ import {Component} from '@angular/core'; -import {BaseSnackBarContent} from './base-snack-bar'; +import {MdSnackBarRef} from './snack-bar-ref'; +/** + * A component used to open as the default snack bar, matching material spec. + * This should only be used internally by the snack bar service. + */ @Component({ moduleId: module.id, selector: 'simple-snack-bar', templateUrl: 'simple-snack-bar.html', styleUrls: ['simple-snack-bar.css'], }) -export class SimpleSnackBar extends BaseSnackBarContent { +export class SimpleSnackBar { /** The message to be shown in the snack bar. */ message: string; /** The label for the button in the snack bar. */ action: string; + /** The instance of the component making up the content of the snack bar. */ + snackBarRef: MdSnackBarRef; + + /** Dismisses the snack bar. */ + dismiss(): void { + this.snackBarRef.dismiss(); + } + /** If the action button should be shown. */ get hasAction(): boolean { return !!this.action; } } diff --git a/src/lib/snack-bar/snack-bar-config.ts b/src/lib/snack-bar/snack-bar-config.ts index 9225964d33a6..1548f45b905c 100644 --- a/src/lib/snack-bar/snack-bar-config.ts +++ b/src/lib/snack-bar/snack-bar-config.ts @@ -1,11 +1,13 @@ import {ViewContainerRef} from '@angular/core'; +import {AriaLivePoliteness} from '@angular2-material/core' -export type SnackBarRole = 'alert' | 'polite'; - export class MdSnackBarConfig { - /** The aria-role of the snack bar. */ - role: SnackBarRole = 'alert'; + /** The politeness level for the MdAriaLiveAnnouncer announcement. */ + politeness: AriaLivePoliteness = 'assertive'; + + /** Message to be announced by the MdAriaLiveAnnouncer */ + announcementMessage: string; /** The view container to place the overlay for the snack bar into. */ viewContainerRef: ViewContainerRef; diff --git a/src/lib/snack-bar/snack-bar-ref.ts b/src/lib/snack-bar/snack-bar-ref.ts index 4f1581fdd972..2fce54a5a60d 100644 --- a/src/lib/snack-bar/snack-bar-ref.ts +++ b/src/lib/snack-bar/snack-bar-ref.ts @@ -10,7 +10,7 @@ import {Subject} from 'rxjs/Subject'; */ export class MdSnackBarRef { /** The instance of the component making up the content of the snack bar. */ - readonly instance: T|any; + readonly instance: T; /** Subject for notifying the user that the snack bar has closed. */ private _afterClosed: Subject = new Subject(); @@ -18,7 +18,7 @@ export class MdSnackBarRef { /** If the snack bar is active. */ private _isActive: boolean = true; - constructor(instance: T|any, private _overlayRef: OverlayRef) { + constructor(instance: T, private _overlayRef: OverlayRef) { // Sets the readonly instance of the snack bar content component. this.instance = instance; this.afterDismissed().subscribe(null, null, () => { this._isActive = false; }); diff --git a/src/lib/snack-bar/snack-bar.ts b/src/lib/snack-bar/snack-bar.ts index 8053bf3865ee..4792ab248368 100644 --- a/src/lib/snack-bar/snack-bar.ts +++ b/src/lib/snack-bar/snack-bar.ts @@ -5,14 +5,15 @@ import { ComponentRef, } from '@angular/core'; import { - Overlay, - OverlayState, - OverlayRef, ComponentType, ComponentPortal, + Overlay, OverlayModule, + OverlayRef, + OverlayState, PortalModule, OVERLAY_PROVIDERS, + MdLiveAnnouncer, } from '@angular2-material/core'; import {CommonModule} from '@angular/common'; import {MdSnackBarConfig} from './snack-bar-config'; @@ -35,7 +36,8 @@ export class MdSnackBar { /** A reference to the current snack bar in the view. */ private _snackBarRef: MdSnackBarRef; - constructor(private _overlay: Overlay) {} + constructor(private _overlay: Overlay, + private _live: MdLiveAnnouncer) {} /** * Creates and dispatches a snack bar with a custom component for the content, removing any @@ -48,8 +50,9 @@ export class MdSnackBar { } let overlayRef = this._createOverlay(); let snackBarContainer = this._attachSnackBarContainer(overlayRef, config); - - return this._attachSnackbarContent(component, snackBarContainer, overlayRef); + let mdSnackBarRef = this._attachSnackbarContent(component, snackBarContainer, overlayRef); + this._live.announce(config.announcementMessage, config.politeness); + return mdSnackBarRef; } @@ -58,7 +61,9 @@ export class MdSnackBar { */ open(message: string, actionLabel: string, config: MdSnackBarConfig): MdSnackBarRef { + config.announcementMessage = message; let simpleSnackBarRef = this.openFromComponent(SimpleSnackBar, config); + simpleSnackBarRef.instance.snackBarRef = simpleSnackBarRef; simpleSnackBarRef.instance.message = message; simpleSnackBarRef.instance.action = actionLabel; return simpleSnackBarRef; @@ -87,7 +92,6 @@ export class MdSnackBar { let portal = new ComponentPortal(component); let contentRef = container.attachComponentPortal(portal); let snackBarRef = > new MdSnackBarRef(contentRef.instance, overlayRef); - snackBarRef.instance.snackBarRef = snackBarRef; this._snackBarRef = snackBarRef; return snackBarRef; @@ -118,7 +122,7 @@ export class MdSnackBarModule { static forRoot(): ModuleWithProviders { return { ngModule: MdSnackBarModule, - providers: [MdSnackBar, OVERLAY_PROVIDERS] + providers: [MdSnackBar, OVERLAY_PROVIDERS, MdLiveAnnouncer] }; } }