From 598823a8041467532463e033b20685cb58811b59 Mon Sep 17 00:00:00 2001 From: Adam Plumer Date: Sat, 27 Oct 2018 20:18:40 -0400 Subject: [PATCH] feat(progress-container): add progress-container component * Add two new components: `mat-progress-container` and `mat-progress-content` for use with new directive `matProgress` * When triggered, the `matProgress` directive will emit an event that notifies the components which will, if triggered to show the progress container, add that template to the view and hide the progress content, and otherwise remove the template from the view and show the progress content --- .github/CODEOWNERS | 4 ++ packages.bzl | 1 + src/demo-app/demo-app/demo-app.ts | 1 + src/demo-app/demo-app/demo-module.ts | 2 + src/demo-app/demo-app/routes.ts | 2 + src/demo-app/demo-material-module.ts | 2 + .../progress-container-demo.html | 8 +++ .../progress-container-demo.scss | 0 .../progress-container-demo.ts | 19 ++++++ src/demo-app/system-config.ts | 1 + src/e2e-app/e2e-app-module.ts | 4 ++ src/e2e-app/e2e-app/routes.ts | 2 + .../progress-container-e2e.html | 8 +++ .../progress-container-e2e.ts | 10 +++ src/e2e-app/system-config.ts | 1 + src/lib/progress-container/BUILD.bazel | 36 +++++++++++ src/lib/progress-container/README.md | 1 + .../_progress-container-theme.scss | 0 src/lib/progress-container/index.ts | 9 +++ .../progress-container-module.ts | 22 +++++++ .../progress-container.html | 5 ++ .../progress-container/progress-container.md | 46 ++++++++++++++ .../progress-container.scss | 15 +++++ .../progress-container.spec.ts | 0 .../progress-container/progress-container.ts | 62 +++++++++++++++++++ .../progress-content.spec.ts | 0 .../progress-container/progress-content.ts | 29 +++++++++ .../progress-directive.spec.ts | 0 .../progress-container/progress-directive.ts | 37 +++++++++++ src/lib/progress-container/public-api.ts | 12 ++++ .../progress-container/tsconfig-build.json | 15 +++++ src/lib/public-api.ts | 1 + src/material-examples/material-module.ts | 45 +++++++++++--- .../progress-container-overview-example.css | 1 + .../progress-container-overview-example.html | 8 +++ .../progress-container-overview-example.ts | 13 ++++ .../kitchen-sink/kitchen-sink.ts | 2 + test/karma-system-config.js | 1 + 38 files changed, 418 insertions(+), 7 deletions(-) create mode 100644 src/demo-app/progress-container/progress-container-demo.html create mode 100644 src/demo-app/progress-container/progress-container-demo.scss create mode 100644 src/demo-app/progress-container/progress-container-demo.ts create mode 100644 src/e2e-app/progress-container/progress-container-e2e.html create mode 100644 src/e2e-app/progress-container/progress-container-e2e.ts create mode 100644 src/lib/progress-container/BUILD.bazel create mode 100644 src/lib/progress-container/README.md create mode 100644 src/lib/progress-container/_progress-container-theme.scss create mode 100644 src/lib/progress-container/index.ts create mode 100644 src/lib/progress-container/progress-container-module.ts create mode 100644 src/lib/progress-container/progress-container.html create mode 100644 src/lib/progress-container/progress-container.md create mode 100644 src/lib/progress-container/progress-container.scss create mode 100644 src/lib/progress-container/progress-container.spec.ts create mode 100644 src/lib/progress-container/progress-container.ts create mode 100644 src/lib/progress-container/progress-content.spec.ts create mode 100644 src/lib/progress-container/progress-content.ts create mode 100644 src/lib/progress-container/progress-directive.spec.ts create mode 100644 src/lib/progress-container/progress-directive.ts create mode 100644 src/lib/progress-container/public-api.ts create mode 100644 src/lib/progress-container/tsconfig-build.json create mode 100644 src/material-examples/progress-container-overview/progress-container-overview-example.css create mode 100644 src/material-examples/progress-container-overview/progress-container-overview-example.html create mode 100644 src/material-examples/progress-container-overview/progress-container-overview-example.ts diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS index 9cc8781250ec..9b0a0ddf9d0c 100644 --- a/.github/CODEOWNERS +++ b/.github/CODEOWNERS @@ -21,6 +21,7 @@ /src/lib/paginator/** @andrewseguin /src/lib/prebuilt-themes/** @jelbourn /src/lib/progress-bar/** @jelbourn @crisbeto @josephperrott +/src/lib/progress-container/** @jelbourn @crisbeto /src/lib/progress-spinner/** @jelbourn @crisbeto @josephperrott /src/lib/radio/** @jelbourn @devversion /src/lib/schematics/** @devversion @jelbourn @@ -129,6 +130,7 @@ /src/demo-app/platform/** @jelbourn @devversion /src/demo-app/portal/** @jelbourn /src/demo-app/progress-bar/** @jelbourn @crisbeto @josephperrott +/src/demo-app/progress-container/** @jelbourn @crisbeto /src/demo-app/progress-spinner/** @jelbourn @crisbeto @josephperrott /src/demo-app/radio/** @jelbourn @devversion /src/demo-app/ripple/** @devversion @@ -162,6 +164,7 @@ /e2e/components/list-e2e.spec.ts @jelbourn @crisbeto @devversion /e2e/components/menu-e2e.spec.ts @crisbeto /e2e/components/progress-bar-e2e.spec.ts @jelbourn @crisbeto @josephperrott +/e2e/components/progress-container-e2e.spec.ts @jelbourn @crisbeto /e2e/components/progress-spinner-e2e.spec.ts @jelbourn @crisbeto @josephperrott /e2e/components/radio-e2e.spec.ts @jelbourn @devversion /e2e/components/sidenav-e2e.spec.ts @mmalerba @@ -182,6 +185,7 @@ /src/e2e-app/input/** @mmalerba /src/e2e-app/menu/** @crisbeto /src/e2e-app/progress-bar/** @jelbourn @crisbeto @josephperrott +/src/e2e-app/progress-container/** @jelbourn @crisbeto /src/e2e-app/progress-spinner/** @jelbourn @crisbeto @josephperrott /src/e2e-app/radio/** @jelbourn @devversion /src/e2e-app/sidenav/** @mmalerba diff --git a/packages.bzl b/packages.bzl index befb5e66790f..10419dcd2eb4 100644 --- a/packages.bzl +++ b/packages.bzl @@ -53,6 +53,7 @@ MATERIAL_PACKAGES = [ "menu", "paginator", "progress-bar", + "progress-container", "progress-spinner", "radio", "select", diff --git a/src/demo-app/demo-app/demo-app.ts b/src/demo-app/demo-app/demo-app.ts index 9274d42fe953..9cbcea443304 100644 --- a/src/demo-app/demo-app/demo-app.ts +++ b/src/demo-app/demo-app/demo-app.ts @@ -76,6 +76,7 @@ export class DemoApp { {name: 'Platform', route: '/platform'}, {name: 'Portal', route: '/portal'}, {name: 'Progress Bar', route: '/progress-bar'}, + {name: 'Progress Container', route: '/progress-container'}, {name: 'Progress Spinner', route: '/progress-spinner'}, {name: 'Radio', route: '/radio'}, {name: 'Ripple', route: '/ripple'}, diff --git a/src/demo-app/demo-app/demo-module.ts b/src/demo-app/demo-app/demo-module.ts index a1bf00cfe17d..6d387524fede 100644 --- a/src/demo-app/demo-app/demo-module.ts +++ b/src/demo-app/demo-app/demo-module.ts @@ -64,6 +64,7 @@ import {VirtualScrollDemo} from '../virtual-scroll/virtual-scroll-demo'; import {DemoApp, Home} from './demo-app'; import {DEMO_APP_ROUTES} from './routes'; import {DragAndDropDemo} from '../drag-drop/drag-drop-demo'; +import {ProgressContainerDemo} from '../progress-container/progress-container-demo'; @NgModule({ imports: [ @@ -116,6 +117,7 @@ import {DragAndDropDemo} from '../drag-drop/drag-drop-demo'; PlatformDemo, PortalDemo, ProgressBarDemo, + ProgressContainerDemo, ProgressSpinnerDemo, RadioDemo, RippleDemo, diff --git a/src/demo-app/demo-app/routes.ts b/src/demo-app/demo-app/routes.ts index e212766267fa..266b0db94582 100644 --- a/src/demo-app/demo-app/routes.ts +++ b/src/demo-app/demo-app/routes.ts @@ -56,6 +56,7 @@ import {PaginatorDemo} from '../paginator/paginator-demo'; import {ExamplesPage} from '../examples-page/examples-page'; import {TableDemo} from '../table/table-demo'; import {DragAndDropDemo} from '../drag-drop/drag-drop-demo'; +import {ProgressContainerDemo} from '../progress-container/progress-container-demo'; export const DEMO_APP_ROUTES: Routes = [ {path: '', component: DemoApp, children: [ @@ -86,6 +87,7 @@ export const DEMO_APP_ROUTES: Routes = [ {path: 'platform', component: PlatformDemo}, {path: 'portal', component: PortalDemo}, {path: 'progress-bar', component: ProgressBarDemo}, + {path: 'progress-container', component: ProgressContainerDemo}, {path: 'progress-spinner', component: ProgressSpinnerDemo}, {path: 'radio', component: RadioDemo}, {path: 'ripple', component: RippleDemo}, diff --git a/src/demo-app/demo-material-module.ts b/src/demo-app/demo-material-module.ts index 9501b379f3f1..cfdf31286825 100644 --- a/src/demo-app/demo-material-module.ts +++ b/src/demo-app/demo-material-module.ts @@ -43,6 +43,7 @@ import { MatNativeDateModule, MatPaginatorModule, MatProgressBarModule, + MatProgressContainerModule, MatProgressSpinnerModule, MatRadioModule, MatRippleModule, @@ -87,6 +88,7 @@ import { MatMenuModule, MatPaginatorModule, MatProgressBarModule, + MatProgressContainerModule, MatProgressSpinnerModule, MatRadioModule, MatRippleModule, diff --git a/src/demo-app/progress-container/progress-container-demo.html b/src/demo-app/progress-container/progress-container-demo.html new file mode 100644 index 000000000000..7305c730c126 --- /dev/null +++ b/src/demo-app/progress-container/progress-container-demo.html @@ -0,0 +1,8 @@ + diff --git a/src/demo-app/progress-container/progress-container-demo.scss b/src/demo-app/progress-container/progress-container-demo.scss new file mode 100644 index 000000000000..e69de29bb2d1 diff --git a/src/demo-app/progress-container/progress-container-demo.ts b/src/demo-app/progress-container/progress-container-demo.ts new file mode 100644 index 000000000000..f2a2448abd42 --- /dev/null +++ b/src/demo-app/progress-container/progress-container-demo.ts @@ -0,0 +1,19 @@ +/** + * @license + * Copyright Google LLC All Rights Reserved. + * + * Use of this source code is governed by an MIT-style license that can be + * found in the LICENSE file at https://angular.io/license + */ + +import {Component} from '@angular/core'; + +@Component({ + moduleId: module.id, + selector: 'progress-container-demo', + templateUrl: 'progress-container-demo.html', + styleUrls: ['progress-container-demo.css'], +}) +export class ProgressContainerDemo { + trigger: boolean = false; +} diff --git a/src/demo-app/system-config.ts b/src/demo-app/system-config.ts index fa42bcf77c52..80f2fc28d34d 100644 --- a/src/demo-app/system-config.ts +++ b/src/demo-app/system-config.ts @@ -85,6 +85,7 @@ System.config({ '@angular/material/menu': 'dist/packages/material/menu/index.js', '@angular/material/paginator': 'dist/packages/material/paginator/index.js', '@angular/material/progress-bar': 'dist/packages/material/progress-bar/index.js', + '@angular/material/progress-container': 'dist/packages/material/progress-container/index.js', '@angular/material/progress-spinner': 'dist/packages/material/progress-spinner/index.js', '@angular/material/radio': 'dist/packages/material/radio/index.js', '@angular/material/select': 'dist/packages/material/select/index.js', diff --git a/src/e2e-app/e2e-app-module.ts b/src/e2e-app/e2e-app-module.ts index 30bc6edbbd7f..dd1c701040a7 100644 --- a/src/e2e-app/e2e-app-module.ts +++ b/src/e2e-app/e2e-app-module.ts @@ -17,6 +17,7 @@ import { MatMenuModule, MatNativeDateModule, MatProgressBarModule, + MatProgressContainerModule, MatProgressSpinnerModule, MatRadioModule, MatSidenavModule, @@ -45,6 +46,7 @@ import {SidenavE2E} from './sidenav/sidenav-e2e'; import {SlideToggleE2E} from './slide-toggle/slide-toggle-e2e'; import {BasicTabs} from './tabs/tabs-e2e'; import {VirtualScrollE2E} from './virtual-scroll/virtual-scroll-e2e'; +import {ProgressContainerE2E} from './progress-container/progress-container-e2e'; /** * NgModule that contains all Material modules that are required to serve the e2e-app. @@ -62,6 +64,7 @@ import {VirtualScrollE2E} from './virtual-scroll/virtual-scroll-e2e'; MatListModule, MatMenuModule, MatProgressBarModule, + MatProgressContainerModule, MatProgressSpinnerModule, MatRadioModule, MatSidenavModule, @@ -97,6 +100,7 @@ export class E2eMaterialModule {} InputE2E, MenuE2E, ProgressBarE2E, + ProgressContainerE2E, ProgressSpinnerE2E, SidenavE2E, SimpleCheckboxes, diff --git a/src/e2e-app/e2e-app/routes.ts b/src/e2e-app/e2e-app/routes.ts index 12c2d0c5833e..4ea07c9e66b0 100644 --- a/src/e2e-app/e2e-app/routes.ts +++ b/src/e2e-app/e2e-app/routes.ts @@ -10,6 +10,7 @@ import {SimpleCheckboxes} from '../checkbox/checkbox-e2e'; import {DialogE2E} from '../dialog/dialog-e2e'; import {GridListE2E} from '../grid-list/grid-list-e2e'; import {ProgressBarE2E} from '../progress-bar/progress-bar-e2e'; +import {ProgressContainerE2E} from '../progress-container/progress-container-e2e'; import {ProgressSpinnerE2E} from '../progress-spinner/progress-spinner-e2e'; import {SlideToggleE2E} from '../slide-toggle/slide-toggle-e2e'; import {InputE2E} from '../input/input-e2e'; @@ -38,6 +39,7 @@ export const E2E_APP_ROUTES: Routes = [ {path: 'list', component: ListOverviewExample}, {path: 'menu', component: MenuE2E}, {path: 'progress-bar', component: ProgressBarE2E}, + {path: 'progress-container', component: ProgressContainerE2E}, {path: 'progress-spinner', component: ProgressSpinnerE2E}, {path: 'radio', component: SimpleRadioButtons}, {path: 'sidenav', component: SidenavE2E}, diff --git a/src/e2e-app/progress-container/progress-container-e2e.html b/src/e2e-app/progress-container/progress-container-e2e.html new file mode 100644 index 000000000000..7305c730c126 --- /dev/null +++ b/src/e2e-app/progress-container/progress-container-e2e.html @@ -0,0 +1,8 @@ + diff --git a/src/e2e-app/progress-container/progress-container-e2e.ts b/src/e2e-app/progress-container/progress-container-e2e.ts new file mode 100644 index 000000000000..431421002b54 --- /dev/null +++ b/src/e2e-app/progress-container/progress-container-e2e.ts @@ -0,0 +1,10 @@ +import {Component} from '@angular/core'; + +@Component({ + moduleId: module.id, + selector: 'progress-container-e2e', + templateUrl: 'progress-container-e2e.html', +}) +export class ProgressContainerE2E { + trigger = true; +} diff --git a/src/e2e-app/system-config.ts b/src/e2e-app/system-config.ts index 5ee59c0e5b58..3f3a4b8ae12e 100644 --- a/src/e2e-app/system-config.ts +++ b/src/e2e-app/system-config.ts @@ -76,6 +76,7 @@ System.config({ '@angular/material/menu': 'dist/bundles/material-menu.umd.js', '@angular/material/paginator': 'dist/bundles/material-paginator.umd.js', '@angular/material/progress-bar': 'dist/bundles/material-progress-bar.umd.js', + '@angular/material/progress-container': 'dist/bundles/material-progress-container.umd.js', '@angular/material/progress-spinner': 'dist/bundles/material-progress-spinner.umd.js', '@angular/material/radio': 'dist/bundles/material-radio.umd.js', '@angular/material/select': 'dist/bundles/material-select.umd.js', diff --git a/src/lib/progress-container/BUILD.bazel b/src/lib/progress-container/BUILD.bazel new file mode 100644 index 000000000000..7b883d457519 --- /dev/null +++ b/src/lib/progress-container/BUILD.bazel @@ -0,0 +1,36 @@ +package(default_visibility=["//visibility:public"]) + +load("@io_bazel_rules_sass//sass:sass.bzl", "sass_library", "sass_binary") +load("//tools:defaults.bzl", "ng_module") + +ng_module( + name = "progress-container", + srcs = glob(["**/*.ts"], exclude=["**/*.spec.ts"]), + module_name = "@angular/material/progress-container", + assets = [":progress-container.css"] + glob(["**/*.html"]), + deps = [ + "@angular//packages/common", + "@angular//packages/core", + "@rxjs", + "//src/lib/core", + "//src/cdk/coercion" + ], +) + + +# TODO(jelbourn): replace this w/ sass_library when it supports acting like a filegroup +filegroup( + name = "progress_container_scss_partials", + srcs = glob(["**/_*.scss"]), +) + +sass_binary( + name = "progress_container_scss", + src = "progress-container.scss", + deps = ["//src/lib/core:core_scss_lib"], +) + +sass_library( + name = "theme", + srcs = glob(["**/*-theme.scss"]), +) diff --git a/src/lib/progress-container/README.md b/src/lib/progress-container/README.md new file mode 100644 index 000000000000..50af318b590a --- /dev/null +++ b/src/lib/progress-container/README.md @@ -0,0 +1 @@ +Please see the official documentation at https://material.angular.io/components/component/progress-container \ No newline at end of file diff --git a/src/lib/progress-container/_progress-container-theme.scss b/src/lib/progress-container/_progress-container-theme.scss new file mode 100644 index 000000000000..e69de29bb2d1 diff --git a/src/lib/progress-container/index.ts b/src/lib/progress-container/index.ts new file mode 100644 index 000000000000..676ca90f1ffa --- /dev/null +++ b/src/lib/progress-container/index.ts @@ -0,0 +1,9 @@ +/** + * @license + * Copyright Google LLC All Rights Reserved. + * + * Use of this source code is governed by an MIT-style license that can be + * found in the LICENSE file at https://angular.io/license + */ + +export * from './public-api'; diff --git a/src/lib/progress-container/progress-container-module.ts b/src/lib/progress-container/progress-container-module.ts new file mode 100644 index 000000000000..95fcb42e3e6b --- /dev/null +++ b/src/lib/progress-container/progress-container-module.ts @@ -0,0 +1,22 @@ +/** + * @license + * Copyright Google LLC All Rights Reserved. + * + * Use of this source code is governed by an MIT-style license that can be + * found in the LICENSE file at https://angular.io/license + */ + +import {NgModule} from '@angular/core'; +import {CommonModule} from '@angular/common'; +import {MatCommonModule} from '@angular/material/core'; +import {MatProgressContainer} from './progress-container'; +import {MatProgress} from './progress-directive'; +import {MatProgressContent} from './progress-content'; + + +@NgModule({ + imports: [CommonModule, MatCommonModule], + exports: [MatProgressContainer, MatProgress, MatProgressContent, MatCommonModule], + declarations: [MatProgressContainer, MatProgress, MatProgressContent], +}) +export class MatProgressContainerModule {} diff --git a/src/lib/progress-container/progress-container.html b/src/lib/progress-container/progress-container.html new file mode 100644 index 000000000000..f551f18e632e --- /dev/null +++ b/src/lib/progress-container/progress-container.html @@ -0,0 +1,5 @@ + +
+ +
+ \ No newline at end of file diff --git a/src/lib/progress-container/progress-container.md b/src/lib/progress-container/progress-container.md new file mode 100644 index 000000000000..6ea821aec18d --- /dev/null +++ b/src/lib/progress-container/progress-container.md @@ -0,0 +1,46 @@ +`` is a horizontal progress-bar for indicating progress and activity. + +### Progress mode +The progress-bar supports four modes: determinate, indeterminate, buffer and query. + +#### Determinate +Operations where the percentage of the operation complete is known should use the +determinate indicator. + + + +This is the default mode and the progress is represented by the `value` property. + +#### Indeterminate +Operations where the user is asked to wait while something finishes and it’s +not necessary to indicate how long it will take should use the indeterminate indicator. + + + +In this mode the `value` property is ignored. + +#### Buffer +Operations where the user wants to indicate some activity or loading from the server, +use the buffer indicator. + + + +In "buffer" mode, `value` determines the progress of the primary bar while the `bufferValue` is +used to show the additional buffering progress. + +#### Query +For situations where the user wants to indicate pre-loading (until the loading can actually be made), +use the query indicator. + + + +In "query" mode, the progress-bar renders as an inverted "indeterminate" bar. Once the response +progress is available, the `mode` should be changed to determinate to convey the progress. In +this mode the `value` property is ignored. + +### Theming +The color of a progress-bar can be changed by using the `color` property. By default, progress-bars +use the theme's primary color. This can be changed to `'accent'` or `'warn'`. + +### Accessibility +Each progress bar should be given a meaningful label via `aria-label` or `aria-labelledby`. diff --git a/src/lib/progress-container/progress-container.scss b/src/lib/progress-container/progress-container.scss new file mode 100644 index 000000000000..4843f1f69d12 --- /dev/null +++ b/src/lib/progress-container/progress-container.scss @@ -0,0 +1,15 @@ +.mat-progress { + opacity: 0; + visibility: hidden; +} + +.mat-progress-container { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); +} + +.mat-progress-host { + position: relative; +} diff --git a/src/lib/progress-container/progress-container.spec.ts b/src/lib/progress-container/progress-container.spec.ts new file mode 100644 index 000000000000..e69de29bb2d1 diff --git a/src/lib/progress-container/progress-container.ts b/src/lib/progress-container/progress-container.ts new file mode 100644 index 000000000000..fb98346df383 --- /dev/null +++ b/src/lib/progress-container/progress-container.ts @@ -0,0 +1,62 @@ +/** + * @license + * Copyright Google LLC All Rights Reserved. + * + * Use of this source code is governed by an MIT-style license that can be + * found in the LICENSE file at https://angular.io/license + */ +import { + ChangeDetectionStrategy, + Component, + Host, + OnDestroy, + OnInit, + TemplateRef, + ViewChild, + ViewContainerRef, + ViewEncapsulation, + ViewRef, +} from '@angular/core'; +import {MatProgress} from './progress-directive'; +import {Subscription} from 'rxjs'; + +@Component({ + moduleId: module.id, + selector: 'mat-progress-container', + templateUrl: 'progress-container.html', + styleUrls: ['progress-container.css'], + changeDetection: ChangeDetectionStrategy.OnPush, + encapsulation: ViewEncapsulation.None, +}) +export class MatProgressContainer implements OnInit, OnDestroy { + @ViewChild(TemplateRef) + private _templateRef: TemplateRef; + private _openSubscription: Subscription; + private _containerViewRef: ViewRef | null = null; + + constructor(@Host() private _progressDirective: MatProgress, + private _viewContainerRef: ViewContainerRef) { + if (!_progressDirective) { + throw new Error(`Cannot instantiate MatProgressContainer without an ancestor + MatProgress directive`); + } + this._toggleProgress = this._toggleProgress.bind(this); + } + + ngOnInit() { + this._openSubscription = this._progressDirective.show.subscribe(this._toggleProgress); + } + + ngOnDestroy() { + this._openSubscription.unsubscribe(); + } + + private _toggleProgress(evt: boolean) { + if (evt && !this._containerViewRef) { + this._containerViewRef = this._viewContainerRef.createEmbeddedView(this._templateRef); + } else if (!evt && this._containerViewRef) { + this._viewContainerRef.remove(this._viewContainerRef.indexOf(this._containerViewRef)); + this._containerViewRef = null; + } + } +} diff --git a/src/lib/progress-container/progress-content.spec.ts b/src/lib/progress-container/progress-content.spec.ts new file mode 100644 index 000000000000..e69de29bb2d1 diff --git a/src/lib/progress-container/progress-content.ts b/src/lib/progress-container/progress-content.ts new file mode 100644 index 000000000000..ecfc0277d3a4 --- /dev/null +++ b/src/lib/progress-container/progress-content.ts @@ -0,0 +1,29 @@ +/** + * @license + * Copyright Google LLC All Rights Reserved. + * + * Use of this source code is governed by an MIT-style license that can be + * found in the LICENSE file at https://angular.io/license + */ +import {ChangeDetectionStrategy, Component, Host, ViewEncapsulation} from '@angular/core'; +import {MatProgress} from './progress-directive'; + +@Component({ + moduleId: module.id, + selector: 'mat-progress-content', + template: '', + host: { + '[attr.aria-hidden]': '_showProgress', + '[class.mat-progress]': '_showProgress', + }, + changeDetection: ChangeDetectionStrategy.OnPush, + encapsulation: ViewEncapsulation.None, +}) +export class MatProgressContent { + /** @docs-private */ + get _showProgress(): boolean { + return this._progressDirective.showProgress; + } + + constructor(@Host() private _progressDirective: MatProgress) {} +} diff --git a/src/lib/progress-container/progress-directive.spec.ts b/src/lib/progress-container/progress-directive.spec.ts new file mode 100644 index 000000000000..e69de29bb2d1 diff --git a/src/lib/progress-container/progress-directive.ts b/src/lib/progress-container/progress-directive.ts new file mode 100644 index 000000000000..d12d3971d7a2 --- /dev/null +++ b/src/lib/progress-container/progress-directive.ts @@ -0,0 +1,37 @@ +/** + * @license + * Copyright Google LLC All Rights Reserved. + * + * Use of this source code is governed by an MIT-style license that can be + * found in the LICENSE file at https://angular.io/license + */ +import {Directive, EventEmitter, Input, OnDestroy, Output} from '@angular/core'; +import {coerceBooleanProperty} from '@angular/cdk/coercion'; + +@Directive({ + selector: '[matProgress]', + host: { + '[attr.role]': 'showProgress ? "alert" : null', + '[attr.aria-live]': 'showProgress ? "assertive" : null', + '[class.mat-progress-host]': 'showProgress', + } +}) +export class MatProgress implements OnDestroy { + /** Event emitted when the progress container should be shown. */ + @Output() readonly show: EventEmitter = new EventEmitter(); + + /** Whether to display the progress instance. */ + @Input('matProgress') + get showProgress(): boolean { return this._showProgress; } + set showProgress(value: boolean) { + this._showProgress = coerceBooleanProperty(value); + this.show.emit(this._showProgress); + } + private _showProgress: boolean; + + constructor() {} + + ngOnDestroy() { + this.show.complete(); + } +} diff --git a/src/lib/progress-container/public-api.ts b/src/lib/progress-container/public-api.ts new file mode 100644 index 000000000000..2e94e24fe75d --- /dev/null +++ b/src/lib/progress-container/public-api.ts @@ -0,0 +1,12 @@ +/** + * @license + * Copyright Google LLC All Rights Reserved. + * + * Use of this source code is governed by an MIT-style license that can be + * found in the LICENSE file at https://angular.io/license + */ + +export * from './progress-container-module'; +export * from './progress-container'; +export * from './progress-directive'; + diff --git a/src/lib/progress-container/tsconfig-build.json b/src/lib/progress-container/tsconfig-build.json new file mode 100644 index 000000000000..22b10ee7a43f --- /dev/null +++ b/src/lib/progress-container/tsconfig-build.json @@ -0,0 +1,15 @@ +{ + "extends": "../tsconfig-build", + "files": [ + "public-api.ts", + "../typings.d.ts" + ], + "angularCompilerOptions": { + "annotateForClosureCompiler": true, + "strictMetadataEmit": true, + "flatModuleOutFile": "index.js", + "flatModuleId": "@angular/material/progress-container", + "skipTemplateCodegen": true, + "fullTemplateTypeCheck": true + } +} diff --git a/src/lib/public-api.ts b/src/lib/public-api.ts index 0a2d1c25296d..3135572655d3 100644 --- a/src/lib/public-api.ts +++ b/src/lib/public-api.ts @@ -28,6 +28,7 @@ export * from '@angular/material/list'; export * from '@angular/material/menu'; export * from '@angular/material/paginator'; export * from '@angular/material/progress-bar'; +export * from '@angular/material/progress-container'; export * from '@angular/material/progress-spinner'; export * from '@angular/material/radio'; export * from '@angular/material/select'; diff --git a/src/material-examples/material-module.ts b/src/material-examples/material-module.ts index 1dd9610413a9..ec82cc52257f 100644 --- a/src/material-examples/material-module.ts +++ b/src/material-examples/material-module.ts @@ -6,13 +6,42 @@ import {CdkTableModule} from '@angular/cdk/table'; import {CdkTreeModule} from '@angular/cdk/tree'; import {DragDropModule} from '@angular/cdk/drag-drop'; import { - MatAutocompleteModule, MatBadgeModule, MatBottomSheetModule, MatButtonModule, - MatButtonToggleModule, MatCardModule, MatCheckboxModule, MatChipsModule, MatDatepickerModule, - MatDialogModule, MatDividerModule, MatExpansionModule, MatFormFieldModule, MatGridListModule, - MatIconModule, MatInputModule, MatListModule, MatMenuModule, MatPaginatorModule, - MatProgressBarModule, MatProgressSpinnerModule, MatRadioModule, MatRippleModule, MatSelectModule, - MatSidenavModule, MatSliderModule, MatSlideToggleModule, MatSnackBarModule, MatSortModule, - MatStepperModule, MatTableModule, MatTabsModule, MatToolbarModule, MatTooltipModule, MatTreeModule + MatAutocompleteModule, + MatBadgeModule, + MatBottomSheetModule, + MatButtonModule, + MatButtonToggleModule, + MatCardModule, + MatCheckboxModule, + MatChipsModule, + MatDatepickerModule, + MatDialogModule, + MatDividerModule, + MatExpansionModule, + MatFormFieldModule, + MatGridListModule, + MatIconModule, + MatInputModule, + MatListModule, + MatMenuModule, + MatPaginatorModule, + MatProgressBarModule, + MatProgressContainerModule, + MatProgressSpinnerModule, + MatRadioModule, + MatRippleModule, + MatSelectModule, + MatSidenavModule, + MatSliderModule, + MatSlideToggleModule, + MatSnackBarModule, + MatSortModule, + MatStepperModule, + MatTableModule, + MatTabsModule, + MatToolbarModule, + MatTooltipModule, + MatTreeModule } from '@angular/material'; @NgModule({ @@ -41,6 +70,7 @@ import { MatMenuModule, MatPaginatorModule, MatProgressBarModule, + MatProgressContainerModule, MatProgressSpinnerModule, MatRadioModule, MatRippleModule, @@ -83,6 +113,7 @@ import { MatMenuModule, MatPaginatorModule, MatProgressBarModule, + MatProgressContainerModule, MatProgressSpinnerModule, MatRadioModule, MatRippleModule, diff --git a/src/material-examples/progress-container-overview/progress-container-overview-example.css b/src/material-examples/progress-container-overview/progress-container-overview-example.css new file mode 100644 index 000000000000..7432308753e6 --- /dev/null +++ b/src/material-examples/progress-container-overview/progress-container-overview-example.css @@ -0,0 +1 @@ +/** No CSS for this example */ diff --git a/src/material-examples/progress-container-overview/progress-container-overview-example.html b/src/material-examples/progress-container-overview/progress-container-overview-example.html new file mode 100644 index 000000000000..eca1dc96f1a4 --- /dev/null +++ b/src/material-examples/progress-container-overview/progress-container-overview-example.html @@ -0,0 +1,8 @@ + \ No newline at end of file diff --git a/src/material-examples/progress-container-overview/progress-container-overview-example.ts b/src/material-examples/progress-container-overview/progress-container-overview-example.ts new file mode 100644 index 000000000000..c612af0a351d --- /dev/null +++ b/src/material-examples/progress-container-overview/progress-container-overview-example.ts @@ -0,0 +1,13 @@ +import {Component} from '@angular/core'; + +/** + * @title Basic progress-container + */ +@Component({ + selector: 'progress-container-overview-example', + templateUrl: 'progress-container-overview-example.html', + styleUrls: ['progress-container-overview-example.css'], +}) +export class ProgressContainerOverviewExample { + trigger = false; +} diff --git a/src/universal-app/kitchen-sink/kitchen-sink.ts b/src/universal-app/kitchen-sink/kitchen-sink.ts index 5e3615ca015d..1b8c2681f1e3 100644 --- a/src/universal-app/kitchen-sink/kitchen-sink.ts +++ b/src/universal-app/kitchen-sink/kitchen-sink.ts @@ -27,6 +27,7 @@ import { MatNativeDateModule, MatPaginatorModule, MatProgressBarModule, + MatProgressContainerModule, MatProgressSpinnerModule, MatRadioModule, MatRippleModule, @@ -119,6 +120,7 @@ export class KitchenSink { MatNativeDateModule, MatPaginatorModule, MatProgressBarModule, + MatProgressContainerModule, MatProgressSpinnerModule, MatRadioModule, MatRippleModule, diff --git a/test/karma-system-config.js b/test/karma-system-config.js index af7a6e8d4f30..555075b5299b 100644 --- a/test/karma-system-config.js +++ b/test/karma-system-config.js @@ -82,6 +82,7 @@ System.config({ '@angular/material/menu': 'dist/packages/material/menu/index.js', '@angular/material/paginator': 'dist/packages/material/paginator/index.js', '@angular/material/progress-bar': 'dist/packages/material/progress-bar/index.js', + '@angular/material/progress-container': 'dist/packages/material/progress-container/index.js', '@angular/material/progress-spinner': 'dist/packages/material/progress-spinner/index.js', '@angular/material/radio': 'dist/packages/material/radio/index.js', '@angular/material/select': 'dist/packages/material/select/index.js',