diff --git a/src/demo-app/snack-bar/snack-bar-demo.html b/src/demo-app/snack-bar/snack-bar-demo.html index 3e81b93bbee9..026258e8bf3c 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 on snack bar

+ +
diff --git a/src/demo-app/snack-bar/snack-bar-demo.ts b/src/demo-app/snack-bar/snack-bar-demo.ts index 790d045ec6c8..a684a2e39bd4 100644 --- a/src/demo-app/snack-bar/snack-bar-demo.ts +++ b/src/demo-app/snack-bar/snack-bar-demo.ts @@ -1,5 +1,5 @@ import {Component, ViewContainerRef} from '@angular/core'; -import {MdSnackBar, MdSnackBarConfig} from '@angular2-material/snack-bar'; +import {MdSnackBar, MdSnackBarConfig} from '@angular/material'; @Component({ moduleId: module.id, diff --git a/src/lib/index.ts b/src/lib/index.ts index ead3f4846688..027498aea622 100644 --- a/src/lib/index.ts +++ b/src/lib/index.ts @@ -18,6 +18,7 @@ export * from './select/index'; export * from './sidenav/index'; export * from './slider/index'; export * from './slide-toggle/index'; +export * from './snack-bar/index'; export * from './tabs/index'; export * from './toolbar/index'; export * from './tooltip/index'; diff --git a/src/lib/module.ts b/src/lib/module.ts index ccb27607db3d..ade62b770cec 100644 --- a/src/lib/module.ts +++ b/src/lib/module.ts @@ -23,7 +23,7 @@ import {MdIconModule} from './icon/index'; import {MdProgressCircleModule} from './progress-circle/index'; import {MdProgressBarModule} from './progress-bar/index'; import {MdInputModule} from './input/index'; -import {MdSnackBarModule} from '@angular2-material/snack-bar'; +import {MdSnackBarModule} from './snack-bar/snack-bar'; import {MdTabsModule} from './tabs/index'; import {MdToolbarModule} from './toolbar/index'; import {MdTooltipModule} from './tooltip/index'; diff --git a/src/lib/snack-bar/README.md b/src/lib/snack-bar/README.md new file mode 100644 index 000000000000..33b2a4b0bee3 --- /dev/null +++ b/src/lib/snack-bar/README.md @@ -0,0 +1,38 @@ +# MdSnackBar +`MdSnackBar` is a service, which opens snack bar notifications in the view. + +### Methods + +| Name | Description | +| --- | --- | +| `open(message: string,
actionLabel: string, config: MdSnackBarConfig): MdSnackBarRef` | Creates and opens a simple snack bar noticiation matching material spec. | +| `openFromComponent(component: ComponentType, config: MdSnackBarConfig): MdSnackBarRef` | Creates and opens a snack bar noticiation with a custom component as content. | + +### Config + +| Key | Description | +| --- | --- | +| `viewContainerRef: ViewContainerRef` | The view container ref to attach the snack bar to. | +| `role: AriaLivePoliteness = 'assertive'` | The politeness level to announce the snack bar with. | +| `announcementMessage: string` | The message to announce with the snack bar. | + + +### Example +The service can be injected in a component. +```ts +@Component({ + selector: 'my-component' + providers: [MdSnackBar] +}) +export class MyComponent { + + constructor(snackBar: MdSnackBar + viewContainerRef: ViewContainerRef) {} + + failedAttempt() { + config = new MdSnackBarConfig(this.viewContainerRef); + this.snackBar.open('It didn\'t quite work!', 'Try Again', config); + } + +} +``` \ No newline at end of file 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..8eaebb8202cc 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 '../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-container.ts b/src/lib/snack-bar/snack-bar-container.ts index 1ce167d3ac25..0ccbd6e3bda0 100644 --- a/src/lib/snack-bar/snack-bar-container.ts +++ b/src/lib/snack-bar/snack-bar-container.ts @@ -8,7 +8,7 @@ import { ComponentPortal, TemplatePortal, PortalHostDirective -} from '@angular2-material/core'; +} from '../core'; import {MdSnackBarConfig} from './snack-bar-config'; import {MdSnackBarContentAlreadyAttached} from './snack-bar-errors'; diff --git a/src/lib/snack-bar/snack-bar-errors.ts b/src/lib/snack-bar/snack-bar-errors.ts index cb8bbe2b5723..abd3fb3892ff 100644 --- a/src/lib/snack-bar/snack-bar-errors.ts +++ b/src/lib/snack-bar/snack-bar-errors.ts @@ -1,4 +1,4 @@ -import {MdError} from '@angular2-material/core'; +import {MdError} from '../core'; export class MdSnackBarContentAlreadyAttached extends MdError { diff --git a/src/lib/snack-bar/snack-bar-ref.ts b/src/lib/snack-bar/snack-bar-ref.ts index 4f1581fdd972..9d03085679d4 100644 --- a/src/lib/snack-bar/snack-bar-ref.ts +++ b/src/lib/snack-bar/snack-bar-ref.ts @@ -1,4 +1,4 @@ -import {OverlayRef} from '@angular2-material/core'; +import {OverlayRef} from '../core'; import {Observable} from 'rxjs/Observable'; import {Subject} from 'rxjs/Subject'; @@ -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..c147524dcb50 100644 --- a/src/lib/snack-bar/snack-bar.ts +++ b/src/lib/snack-bar/snack-bar.ts @@ -5,15 +5,16 @@ import { ComponentRef, } from '@angular/core'; import { - Overlay, - OverlayState, - OverlayRef, ComponentType, ComponentPortal, + Overlay, OverlayModule, + OverlayRef, + OverlayState, PortalModule, OVERLAY_PROVIDERS, -} from '@angular2-material/core'; + MdLiveAnnouncer, +} from '../core'; import {CommonModule} from '@angular/common'; import {MdSnackBarConfig} from './snack-bar-config'; import {MdSnackBarRef} from './snack-bar-ref'; @@ -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] }; } } diff --git a/src/lib/system-config-spec.ts b/src/lib/system-config-spec.ts index 7e4369d361e5..acf90f93b5ba 100644 --- a/src/lib/system-config-spec.ts +++ b/src/lib/system-config-spec.ts @@ -41,4 +41,4 @@ System.config({ defaultExtension: 'js' } } -}); \ No newline at end of file +});