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',