From cb55f3cc0ae1898bc8f852aa560403d41aa45bea Mon Sep 17 00:00:00 2001 From: Andy Chrzaszcz Date: Thu, 21 May 2020 19:12:14 -0400 Subject: [PATCH 01/20] doc(examples/cdk/overlay): add a basic component Add a basic component in order to build out an example for the cdk Overlay feature --- .../cdk-overlay-basic-example.css | 0 .../cdk-overlay-basic-example.html | 3 +++ .../cdk-overlay-basic-example.ts | 13 +++++++++++++ src/components-examples/cdk/overlay/index.ts | 16 ++++++++++++++++ 4 files changed, 32 insertions(+) create mode 100644 src/components-examples/cdk/overlay/cdk-overlay-basic/cdk-overlay-basic-example.css create mode 100644 src/components-examples/cdk/overlay/cdk-overlay-basic/cdk-overlay-basic-example.html create mode 100644 src/components-examples/cdk/overlay/cdk-overlay-basic/cdk-overlay-basic-example.ts create mode 100644 src/components-examples/cdk/overlay/index.ts diff --git a/src/components-examples/cdk/overlay/cdk-overlay-basic/cdk-overlay-basic-example.css b/src/components-examples/cdk/overlay/cdk-overlay-basic/cdk-overlay-basic-example.css new file mode 100644 index 000000000000..e69de29bb2d1 diff --git a/src/components-examples/cdk/overlay/cdk-overlay-basic/cdk-overlay-basic-example.html b/src/components-examples/cdk/overlay/cdk-overlay-basic/cdk-overlay-basic-example.html new file mode 100644 index 000000000000..4b63235f433f --- /dev/null +++ b/src/components-examples/cdk/overlay/cdk-overlay-basic/cdk-overlay-basic-example.html @@ -0,0 +1,3 @@ +

+ cdk-overlay-basic works! +

diff --git a/src/components-examples/cdk/overlay/cdk-overlay-basic/cdk-overlay-basic-example.ts b/src/components-examples/cdk/overlay/cdk-overlay-basic/cdk-overlay-basic-example.ts new file mode 100644 index 000000000000..7d6d9fc7b17a --- /dev/null +++ b/src/components-examples/cdk/overlay/cdk-overlay-basic/cdk-overlay-basic-example.ts @@ -0,0 +1,13 @@ +import {Component} from '@angular/core'; + +/** + * @title Overlay basic example + */ +@Component({ + selector: 'cdk-overlay-basic-example', + templateUrl: './cdk-overlay-basic-example.html', + styleUrls: ['./cdk-overlay-basic-example.css'], +}) +export class CdkOverlayBasicExample { + constructor() {} +} diff --git a/src/components-examples/cdk/overlay/index.ts b/src/components-examples/cdk/overlay/index.ts new file mode 100644 index 000000000000..733535710b2f --- /dev/null +++ b/src/components-examples/cdk/overlay/index.ts @@ -0,0 +1,16 @@ +import {NgModule} from '@angular/core'; +import {OverlayModule} from '@angular/cdk/overlay'; + +import {CdkOverlayBasicExample} from './cdk-overlay-basic/cdk-overlay-basic-example'; + +export {CdkOverlayBasicExample}; + +const EXAMPLES = [CdkOverlayBasicExample]; + +@NgModule({ + imports: [OverlayModule], + declarations: EXAMPLES, + exports: EXAMPLES, + entryComponents: EXAMPLES, +}) +export class CdkOverlayExamplesModule {} From 78978a5bf0cdc0c1c521983ff2c916b136c15fb9 Mon Sep 17 00:00:00 2001 From: Andy Chrzaszcz Date: Thu, 21 May 2020 19:13:54 -0400 Subject: [PATCH 02/20] build(examples/cdk/overlay): add bazel build config for overlay example --- .../cdk/overlay/BUILD.bazel | 25 +++++++++++++++++++ 1 file changed, 25 insertions(+) create mode 100644 src/components-examples/cdk/overlay/BUILD.bazel diff --git a/src/components-examples/cdk/overlay/BUILD.bazel b/src/components-examples/cdk/overlay/BUILD.bazel new file mode 100644 index 000000000000..92eea8fd6f10 --- /dev/null +++ b/src/components-examples/cdk/overlay/BUILD.bazel @@ -0,0 +1,25 @@ +load("//tools:defaults.bzl", "ng_module") + +package(default_visibility = ["//visibility:public"]) + +ng_module( + name = "overlay", + srcs = glob(["**/*.ts"]), + assets = glob([ + "**/*.html", + "**/*.css", + ]), + module_name = "@angular/components-examples/cdk/overlay", + deps = [ + "//src/cdk/overlay", + ], +) + +filegroup( + name = "source-files", + srcs = glob([ + "**/*.html", + "**/*.css", + "**/*.ts", + ]), +) From 50f3c6cad7e34406fa01a890f86c6d82509d445c Mon Sep 17 00:00:00 2001 From: Andy Chrzaszcz Date: Thu, 21 May 2020 19:15:13 -0400 Subject: [PATCH 03/20] build(examples/cdk/overlay): update root examples bazel build script Include new Overlay example in root examples bazel build script --- src/components-examples/BUILD.bazel | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components-examples/BUILD.bazel b/src/components-examples/BUILD.bazel index 92897e666de2..46483466bb91 100644 --- a/src/components-examples/BUILD.bazel +++ b/src/components-examples/BUILD.bazel @@ -56,6 +56,7 @@ ALL_EXAMPLES = [ "//src/components-examples/cdk/drag-drop", "//src/components-examples/cdk/clipboard", "//src/components-examples/cdk/a11y", + "//src/components-examples/cdk/overlay", "//src/components-examples/cdk-experimental/popover-edit", ] From 79e0bf36d7722438f048c6a0f465e281e82aee4f Mon Sep 17 00:00:00 2001 From: Andy Chrzaszcz Date: Thu, 21 May 2020 19:17:29 -0400 Subject: [PATCH 04/20] docs(examples/cdk/overlay): add overlay example component to dev-app --- src/dev-app/overlay/overlay-demo-module.ts | 23 ++++++++++++++++++++++ src/dev-app/overlay/overlay-demo.html | 2 ++ src/dev-app/overlay/overlay-demo.ts | 13 ++++++++++++ 3 files changed, 38 insertions(+) create mode 100644 src/dev-app/overlay/overlay-demo-module.ts create mode 100644 src/dev-app/overlay/overlay-demo.html create mode 100644 src/dev-app/overlay/overlay-demo.ts diff --git a/src/dev-app/overlay/overlay-demo-module.ts b/src/dev-app/overlay/overlay-demo-module.ts new file mode 100644 index 000000000000..582d203980c6 --- /dev/null +++ b/src/dev-app/overlay/overlay-demo-module.ts @@ -0,0 +1,23 @@ +/** + * @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 {RouterModule} from '@angular/router'; +import {OverlayModule} from '@angular/cdk/overlay'; +import {CdkOverlayExamplesModule} from '@angular/components-examples/cdk/overlay'; + +import {OverlayDemo} from './overlay-demo'; + +@NgModule({ + imports: [ + OverlayModule, + CdkOverlayExamplesModule, + RouterModule.forChild([{path: '', component: OverlayDemo}]), + ], + declarations: [OverlayDemo], +}) +export class OverlayDemoModule {} diff --git a/src/dev-app/overlay/overlay-demo.html b/src/dev-app/overlay/overlay-demo.html new file mode 100644 index 000000000000..b5974e42df63 --- /dev/null +++ b/src/dev-app/overlay/overlay-demo.html @@ -0,0 +1,2 @@ +

Basic overlay

+ diff --git a/src/dev-app/overlay/overlay-demo.ts b/src/dev-app/overlay/overlay-demo.ts new file mode 100644 index 000000000000..ece02057eb69 --- /dev/null +++ b/src/dev-app/overlay/overlay-demo.ts @@ -0,0 +1,13 @@ +/** + * @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({ + templateUrl: 'overlay-demo.html', +}) +export class OverlayDemo {} From 08ce2cd4363f7434ea6f1ca85a3c7c0601af6de0 Mon Sep 17 00:00:00 2001 From: Andy Chrzaszcz Date: Thu, 21 May 2020 19:18:18 -0400 Subject: [PATCH 05/20] build(examples/cdk/overlay): add bazel build script for overlay dev-app --- src/dev-app/overlay/BUILD.bazel | 13 +++++++++++++ 1 file changed, 13 insertions(+) create mode 100644 src/dev-app/overlay/BUILD.bazel diff --git a/src/dev-app/overlay/BUILD.bazel b/src/dev-app/overlay/BUILD.bazel new file mode 100644 index 000000000000..0c8e742f77b4 --- /dev/null +++ b/src/dev-app/overlay/BUILD.bazel @@ -0,0 +1,13 @@ +load("//tools:defaults.bzl", "ng_module") + +package(default_visibility = ["//visibility:public"]) + +ng_module( + name = "overlay", + srcs = glob(["**/*.ts"]), + assets = ["overlay-demo.html"], + deps = [ + "//src/components-examples/cdk/overlay", + "@npm//@angular/router", + ], +) From f998e43178345b006263df27cecfaba8ad7f28ad Mon Sep 17 00:00:00 2001 From: Andy Chrzaszcz Date: Thu, 21 May 2020 19:19:34 -0400 Subject: [PATCH 06/20] build(examples/cdk/overlay): update dev-app bazel to include overlay example --- src/dev-app/BUILD.bazel | 1 + 1 file changed, 1 insertion(+) diff --git a/src/dev-app/BUILD.bazel b/src/dev-app/BUILD.bazel index 5792420e4cd9..91811a25f674 100644 --- a/src/dev-app/BUILD.bazel +++ b/src/dev-app/BUILD.bazel @@ -60,6 +60,7 @@ ng_module( "//src/dev-app/mdc-table", "//src/dev-app/mdc-tabs", "//src/dev-app/menu", + "//src/dev-app/overlay", "//src/dev-app/paginator", "//src/dev-app/platform", "//src/dev-app/popover-edit", From a76de2cb93447db8f7f07390b87df8d3cda17b8f Mon Sep 17 00:00:00 2001 From: Andy Chrzaszcz Date: Thu, 21 May 2020 19:20:37 -0400 Subject: [PATCH 07/20] docs(examples/cdk/overlay): update dev-app routing to include overlay --- src/dev-app/dev-app/dev-app-layout.ts | 9 ++++++--- src/dev-app/dev-app/routes.ts | 1 + 2 files changed, 7 insertions(+), 3 deletions(-) diff --git a/src/dev-app/dev-app/dev-app-layout.ts b/src/dev-app/dev-app/dev-app-layout.ts index 1e3a5f02236e..fa85fd71d670 100644 --- a/src/dev-app/dev-app/dev-app-layout.ts +++ b/src/dev-app/dev-app/dev-app-layout.ts @@ -48,6 +48,7 @@ export class DevAppLayout { {name: 'List', route: '/list'}, {name: 'Live Announcer', route: '/live-announcer'}, {name: 'Menu', route: '/menu'}, + {name: 'Overlay', route: '/overlay'}, {name: 'Paginator', route: '/paginator'}, {name: 'Platform', route: '/platform'}, {name: 'Popover Edit', route: '/popover-edit'}, @@ -95,8 +96,11 @@ export class DevAppLayout { densityScales = [0, -1, -2, 'minimum', 'maximum']; constructor( - private _element: ElementRef, public rippleOptions: DevAppRippleOptions, - @Inject(Directionality) public dir: DevAppDirectionality, cdr: ChangeDetectorRef) { + private _element: ElementRef, + public rippleOptions: DevAppRippleOptions, + @Inject(Directionality) public dir: DevAppDirectionality, + cdr: ChangeDetectorRef + ) { dir.change.subscribe(() => cdr.markForCheck()); this.updateDensityClasses(); } @@ -139,7 +143,6 @@ export class DevAppLayout { } } - /** Gets the index of the next density scale that can be selected. */ getNextDensityIndex() { return (this.currentDensityIndex + 1) % this.densityScales.length; diff --git a/src/dev-app/dev-app/routes.ts b/src/dev-app/dev-app/routes.ts index 6a0170f4ed80..5fde2e84368a 100644 --- a/src/dev-app/dev-app/routes.ts +++ b/src/dev-app/dev-app/routes.ts @@ -85,6 +85,7 @@ export const DEV_APP_ROUTES: Routes = [ {path: 'mdc-table', loadChildren: 'mdc-table/mdc-table-demo-module#MdcTableDemoModule'}, {path: 'mdc-tabs', loadChildren: 'mdc-tabs/mdc-tabs-demo-module#MdcTabsDemoModule'}, {path: 'menu', loadChildren: 'menu/menu-demo-module#MenuDemoModule'}, + {path: 'overlay', loadChildren: 'overlay/overlay-demo-module#OverlayDemoModule'}, {path: 'paginator', loadChildren: 'paginator/paginator-demo-module#PaginatorDemoModule'}, {path: 'platform', loadChildren: 'platform/platform-demo-module#PlatformDemoModule'}, { From eed1455689400929d33cc7b09b7c9e2791893572 Mon Sep 17 00:00:00 2001 From: Andy Chrzaszcz Date: Thu, 21 May 2020 20:18:18 -0400 Subject: [PATCH 08/20] docs(examples/cdk/overlay): add a basic overlay example Add a basic overlay example demonstrating how to use the overlay directives in order to display a sub-view and connect it to a button --- .../cdk/overlay/BUILD.bazel | 4 +++ .../cdk-overlay-basic-example.css | 0 .../cdk-overlay-basic-example.html | 30 +++++++++++++++++-- .../cdk-overlay-basic-example.ts | 7 ++++- src/components-examples/cdk/overlay/index.ts | 6 +++- 5 files changed, 42 insertions(+), 5 deletions(-) delete mode 100644 src/components-examples/cdk/overlay/cdk-overlay-basic/cdk-overlay-basic-example.css diff --git a/src/components-examples/cdk/overlay/BUILD.bazel b/src/components-examples/cdk/overlay/BUILD.bazel index 92eea8fd6f10..c9c54a549479 100644 --- a/src/components-examples/cdk/overlay/BUILD.bazel +++ b/src/components-examples/cdk/overlay/BUILD.bazel @@ -12,6 +12,10 @@ ng_module( module_name = "@angular/components-examples/cdk/overlay", deps = [ "//src/cdk/overlay", + "//src/material/button", + "//src/material/list", + "//src/material/card", + "//src/material/divider", ], ) diff --git a/src/components-examples/cdk/overlay/cdk-overlay-basic/cdk-overlay-basic-example.css b/src/components-examples/cdk/overlay/cdk-overlay-basic/cdk-overlay-basic-example.css deleted file mode 100644 index e69de29bb2d1..000000000000 diff --git a/src/components-examples/cdk/overlay/cdk-overlay-basic/cdk-overlay-basic-example.html b/src/components-examples/cdk/overlay/cdk-overlay-basic/cdk-overlay-basic-example.html index 4b63235f433f..284f44cc32e5 100644 --- a/src/components-examples/cdk/overlay/cdk-overlay-basic/cdk-overlay-basic-example.html +++ b/src/components-examples/cdk/overlay/cdk-overlay-basic/cdk-overlay-basic-example.html @@ -1,3 +1,27 @@ -

- cdk-overlay-basic works! -

+ + + + + + + + Item 1 + + Item 2 + + Item 3 + + + diff --git a/src/components-examples/cdk/overlay/cdk-overlay-basic/cdk-overlay-basic-example.ts b/src/components-examples/cdk/overlay/cdk-overlay-basic/cdk-overlay-basic-example.ts index 7d6d9fc7b17a..d13ddccedf12 100644 --- a/src/components-examples/cdk/overlay/cdk-overlay-basic/cdk-overlay-basic-example.ts +++ b/src/components-examples/cdk/overlay/cdk-overlay-basic/cdk-overlay-basic-example.ts @@ -2,12 +2,17 @@ import {Component} from '@angular/core'; /** * @title Overlay basic example + * + * CdkOverlayBasicExample demonstrates how it is possible to trigger and + * connect a component to a set origin (in this case a button). + * */ @Component({ selector: 'cdk-overlay-basic-example', templateUrl: './cdk-overlay-basic-example.html', - styleUrls: ['./cdk-overlay-basic-example.css'], }) export class CdkOverlayBasicExample { + isOpen: boolean = false; + constructor() {} } diff --git a/src/components-examples/cdk/overlay/index.ts b/src/components-examples/cdk/overlay/index.ts index 733535710b2f..4156fad265fa 100644 --- a/src/components-examples/cdk/overlay/index.ts +++ b/src/components-examples/cdk/overlay/index.ts @@ -1,5 +1,9 @@ import {NgModule} from '@angular/core'; import {OverlayModule} from '@angular/cdk/overlay'; +import {MatButtonModule} from '@angular/material/button'; +import {MatCardModule} from '@angular/material/card'; +import {MatListModule} from '@angular/material/list'; +import {MatDividerModule} from '@angular/material/divider'; import {CdkOverlayBasicExample} from './cdk-overlay-basic/cdk-overlay-basic-example'; @@ -8,7 +12,7 @@ export {CdkOverlayBasicExample}; const EXAMPLES = [CdkOverlayBasicExample]; @NgModule({ - imports: [OverlayModule], + imports: [OverlayModule, MatButtonModule, MatListModule, MatDividerModule, MatCardModule], declarations: EXAMPLES, exports: EXAMPLES, entryComponents: EXAMPLES, From 80466f39e572ed6c087392f8899d586f8df11653 Mon Sep 17 00:00:00 2001 From: Andy Chrzaszcz Date: Thu, 21 May 2020 20:39:01 -0400 Subject: [PATCH 09/20] style(examples/cdk/overlay): fix bazel linting error for overlay example --- src/components-examples/cdk/overlay/BUILD.bazel | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components-examples/cdk/overlay/BUILD.bazel b/src/components-examples/cdk/overlay/BUILD.bazel index c9c54a549479..4423046734ff 100644 --- a/src/components-examples/cdk/overlay/BUILD.bazel +++ b/src/components-examples/cdk/overlay/BUILD.bazel @@ -12,10 +12,10 @@ ng_module( module_name = "@angular/components-examples/cdk/overlay", deps = [ "//src/cdk/overlay", - "//src/material/button", - "//src/material/list", - "//src/material/card", - "//src/material/divider", + "//src/material/button", + "//src/material/card", + "//src/material/divider", + "//src/material/list", ], ) From 42a82591691933c773a4b722af372a5c2ac83f34 Mon Sep 17 00:00:00 2001 From: Andy Chrzaszcz Date: Fri, 22 May 2020 11:39:51 -0400 Subject: [PATCH 10/20] docs(examples/cdk/overlay): remote unused constructor --- .../cdk/overlay/cdk-overlay-basic/cdk-overlay-basic-example.ts | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/components-examples/cdk/overlay/cdk-overlay-basic/cdk-overlay-basic-example.ts b/src/components-examples/cdk/overlay/cdk-overlay-basic/cdk-overlay-basic-example.ts index d13ddccedf12..88a92f6a8117 100644 --- a/src/components-examples/cdk/overlay/cdk-overlay-basic/cdk-overlay-basic-example.ts +++ b/src/components-examples/cdk/overlay/cdk-overlay-basic/cdk-overlay-basic-example.ts @@ -13,6 +13,4 @@ import {Component} from '@angular/core'; }) export class CdkOverlayBasicExample { isOpen: boolean = false; - - constructor() {} } From 6c0085fd3ceb96f34a046780c72dbb40a69c5aac Mon Sep 17 00:00:00 2001 From: Andy Chrzaszcz Date: Fri, 22 May 2020 11:42:38 -0400 Subject: [PATCH 11/20] docs(examples/cdk/overlay): remote unnecessary boolean type --- .../cdk/overlay/cdk-overlay-basic/cdk-overlay-basic-example.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components-examples/cdk/overlay/cdk-overlay-basic/cdk-overlay-basic-example.ts b/src/components-examples/cdk/overlay/cdk-overlay-basic/cdk-overlay-basic-example.ts index 88a92f6a8117..9de25830c7b1 100644 --- a/src/components-examples/cdk/overlay/cdk-overlay-basic/cdk-overlay-basic-example.ts +++ b/src/components-examples/cdk/overlay/cdk-overlay-basic/cdk-overlay-basic-example.ts @@ -12,5 +12,5 @@ import {Component} from '@angular/core'; templateUrl: './cdk-overlay-basic-example.html', }) export class CdkOverlayBasicExample { - isOpen: boolean = false; + isOpen = false; } From e76319391b02c5dfd9ba27ff2dc48e0217c5432c Mon Sep 17 00:00:00 2001 From: Andy Chrzaszcz Date: Fri, 22 May 2020 12:18:08 -0400 Subject: [PATCH 12/20] docs(examples/cdk/overlay): move simple overlay example to existing dev-app route --- src/dev-app/connected-overlay/BUILD.bazel | 1 + .../connected-overlay/connected-overlay-demo-module.ts | 6 ++++-- src/dev-app/connected-overlay/connected-overlay-demo.html | 5 +++++ 3 files changed, 10 insertions(+), 2 deletions(-) diff --git a/src/dev-app/connected-overlay/BUILD.bazel b/src/dev-app/connected-overlay/BUILD.bazel index 63257bb042f4..d0cc04e0306e 100644 --- a/src/dev-app/connected-overlay/BUILD.bazel +++ b/src/dev-app/connected-overlay/BUILD.bazel @@ -13,6 +13,7 @@ ng_module( "//src/cdk/bidi", "//src/cdk/overlay", "//src/cdk/portal", + "//src/components-examples/cdk/overlay", "//src/material/button", "//src/material/checkbox", "//src/material/radio", diff --git a/src/dev-app/connected-overlay/connected-overlay-demo-module.ts b/src/dev-app/connected-overlay/connected-overlay-demo-module.ts index 7a1e26f2d4a3..086621dc49b4 100644 --- a/src/dev-app/connected-overlay/connected-overlay-demo-module.ts +++ b/src/dev-app/connected-overlay/connected-overlay-demo-module.ts @@ -14,10 +14,13 @@ import {MatButtonModule} from '@angular/material/button'; import {MatCheckboxModule} from '@angular/material/checkbox'; import {MatRadioModule} from '@angular/material/radio'; import {RouterModule} from '@angular/router'; +import {CdkOverlayExamplesModule} from '@angular/components-examples/cdk/overlay'; + import {ConnectedOverlayDemo} from './connected-overlay-demo'; @NgModule({ imports: [ + CdkOverlayExamplesModule, CommonModule, FormsModule, MatButtonModule, @@ -28,5 +31,4 @@ import {ConnectedOverlayDemo} from './connected-overlay-demo'; ], declarations: [ConnectedOverlayDemo], }) -export class ConnectedOverlayDemoModule { -} +export class ConnectedOverlayDemoModule {} diff --git a/src/dev-app/connected-overlay/connected-overlay-demo.html b/src/dev-app/connected-overlay/connected-overlay-demo.html index 20985f7aeaeb..c0d6bee6f8f6 100644 --- a/src/dev-app/connected-overlay/connected-overlay-demo.html +++ b/src/dev-app/connected-overlay/connected-overlay-demo.html @@ -1,5 +1,10 @@ +

Basic overlay

+ +
+

Debug Overlay

+

Origin X

From 5ab6161ae0e08ec4ec25894a44fd361dc92a0dcc Mon Sep 17 00:00:00 2001 From: Andy Chrzaszcz Date: Fri, 22 May 2020 12:19:13 -0400 Subject: [PATCH 13/20] Revert "docs(examples/cdk/overlay): add overlay example component to dev-app" This reverts commit 79e0bf36d7722438f048c6a0f465e281e82aee4f. --- src/dev-app/overlay/overlay-demo-module.ts | 23 ---------------------- src/dev-app/overlay/overlay-demo.html | 2 -- src/dev-app/overlay/overlay-demo.ts | 13 ------------ 3 files changed, 38 deletions(-) delete mode 100644 src/dev-app/overlay/overlay-demo-module.ts delete mode 100644 src/dev-app/overlay/overlay-demo.html delete mode 100644 src/dev-app/overlay/overlay-demo.ts diff --git a/src/dev-app/overlay/overlay-demo-module.ts b/src/dev-app/overlay/overlay-demo-module.ts deleted file mode 100644 index 582d203980c6..000000000000 --- a/src/dev-app/overlay/overlay-demo-module.ts +++ /dev/null @@ -1,23 +0,0 @@ -/** - * @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 {RouterModule} from '@angular/router'; -import {OverlayModule} from '@angular/cdk/overlay'; -import {CdkOverlayExamplesModule} from '@angular/components-examples/cdk/overlay'; - -import {OverlayDemo} from './overlay-demo'; - -@NgModule({ - imports: [ - OverlayModule, - CdkOverlayExamplesModule, - RouterModule.forChild([{path: '', component: OverlayDemo}]), - ], - declarations: [OverlayDemo], -}) -export class OverlayDemoModule {} diff --git a/src/dev-app/overlay/overlay-demo.html b/src/dev-app/overlay/overlay-demo.html deleted file mode 100644 index b5974e42df63..000000000000 --- a/src/dev-app/overlay/overlay-demo.html +++ /dev/null @@ -1,2 +0,0 @@ -

Basic overlay

- diff --git a/src/dev-app/overlay/overlay-demo.ts b/src/dev-app/overlay/overlay-demo.ts deleted file mode 100644 index ece02057eb69..000000000000 --- a/src/dev-app/overlay/overlay-demo.ts +++ /dev/null @@ -1,13 +0,0 @@ -/** - * @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({ - templateUrl: 'overlay-demo.html', -}) -export class OverlayDemo {} From f58f1990ac71deb6c04240110ce9dc62ddf3903b Mon Sep 17 00:00:00 2001 From: Andy Chrzaszcz Date: Fri, 22 May 2020 12:19:24 -0400 Subject: [PATCH 14/20] Revert "build(examples/cdk/overlay): add bazel build script for overlay dev-app" This reverts commit 08ce2cd4363f7434ea6f1ca85a3c7c0601af6de0. --- src/dev-app/overlay/BUILD.bazel | 13 ------------- 1 file changed, 13 deletions(-) delete mode 100644 src/dev-app/overlay/BUILD.bazel diff --git a/src/dev-app/overlay/BUILD.bazel b/src/dev-app/overlay/BUILD.bazel deleted file mode 100644 index 0c8e742f77b4..000000000000 --- a/src/dev-app/overlay/BUILD.bazel +++ /dev/null @@ -1,13 +0,0 @@ -load("//tools:defaults.bzl", "ng_module") - -package(default_visibility = ["//visibility:public"]) - -ng_module( - name = "overlay", - srcs = glob(["**/*.ts"]), - assets = ["overlay-demo.html"], - deps = [ - "//src/components-examples/cdk/overlay", - "@npm//@angular/router", - ], -) From d93828de52828804d2738f6fc195dc743ce56c05 Mon Sep 17 00:00:00 2001 From: Andy Chrzaszcz Date: Fri, 22 May 2020 12:19:33 -0400 Subject: [PATCH 15/20] Revert "build(examples/cdk/overlay): update dev-app bazel to include overlay example" This reverts commit f998e43178345b006263df27cecfaba8ad7f28ad. --- src/dev-app/BUILD.bazel | 1 - 1 file changed, 1 deletion(-) diff --git a/src/dev-app/BUILD.bazel b/src/dev-app/BUILD.bazel index 91811a25f674..5792420e4cd9 100644 --- a/src/dev-app/BUILD.bazel +++ b/src/dev-app/BUILD.bazel @@ -60,7 +60,6 @@ ng_module( "//src/dev-app/mdc-table", "//src/dev-app/mdc-tabs", "//src/dev-app/menu", - "//src/dev-app/overlay", "//src/dev-app/paginator", "//src/dev-app/platform", "//src/dev-app/popover-edit", From ae0fbdc4a5b66919074e9f363361a63b86dee8a4 Mon Sep 17 00:00:00 2001 From: Andy Chrzaszcz Date: Fri, 22 May 2020 12:19:43 -0400 Subject: [PATCH 16/20] Revert "docs(examples/cdk/overlay): update dev-app routing to include overlay" This reverts commit a76de2cb93447db8f7f07390b87df8d3cda17b8f. --- src/dev-app/dev-app/dev-app-layout.ts | 9 +++------ src/dev-app/dev-app/routes.ts | 1 - 2 files changed, 3 insertions(+), 7 deletions(-) diff --git a/src/dev-app/dev-app/dev-app-layout.ts b/src/dev-app/dev-app/dev-app-layout.ts index fa85fd71d670..1e3a5f02236e 100644 --- a/src/dev-app/dev-app/dev-app-layout.ts +++ b/src/dev-app/dev-app/dev-app-layout.ts @@ -48,7 +48,6 @@ export class DevAppLayout { {name: 'List', route: '/list'}, {name: 'Live Announcer', route: '/live-announcer'}, {name: 'Menu', route: '/menu'}, - {name: 'Overlay', route: '/overlay'}, {name: 'Paginator', route: '/paginator'}, {name: 'Platform', route: '/platform'}, {name: 'Popover Edit', route: '/popover-edit'}, @@ -96,11 +95,8 @@ export class DevAppLayout { densityScales = [0, -1, -2, 'minimum', 'maximum']; constructor( - private _element: ElementRef, - public rippleOptions: DevAppRippleOptions, - @Inject(Directionality) public dir: DevAppDirectionality, - cdr: ChangeDetectorRef - ) { + private _element: ElementRef, public rippleOptions: DevAppRippleOptions, + @Inject(Directionality) public dir: DevAppDirectionality, cdr: ChangeDetectorRef) { dir.change.subscribe(() => cdr.markForCheck()); this.updateDensityClasses(); } @@ -143,6 +139,7 @@ export class DevAppLayout { } } + /** Gets the index of the next density scale that can be selected. */ getNextDensityIndex() { return (this.currentDensityIndex + 1) % this.densityScales.length; diff --git a/src/dev-app/dev-app/routes.ts b/src/dev-app/dev-app/routes.ts index 5fde2e84368a..6a0170f4ed80 100644 --- a/src/dev-app/dev-app/routes.ts +++ b/src/dev-app/dev-app/routes.ts @@ -85,7 +85,6 @@ export const DEV_APP_ROUTES: Routes = [ {path: 'mdc-table', loadChildren: 'mdc-table/mdc-table-demo-module#MdcTableDemoModule'}, {path: 'mdc-tabs', loadChildren: 'mdc-tabs/mdc-tabs-demo-module#MdcTabsDemoModule'}, {path: 'menu', loadChildren: 'menu/menu-demo-module#MenuDemoModule'}, - {path: 'overlay', loadChildren: 'overlay/overlay-demo-module#OverlayDemoModule'}, {path: 'paginator', loadChildren: 'paginator/paginator-demo-module#PaginatorDemoModule'}, {path: 'platform', loadChildren: 'platform/platform-demo-module#PlatformDemoModule'}, { From 7f577248ee7d43829cbdee096a3a96fd3d073ef3 Mon Sep 17 00:00:00 2001 From: Andy Chrzaszcz Date: Fri, 22 May 2020 12:24:07 -0400 Subject: [PATCH 17/20] docs(examples/cdk/overlay): remove long comment Remove long component comment in order to prevent it from rendering fully on the examples page as the title --- .../overlay/cdk-overlay-basic/cdk-overlay-basic-example.ts | 4 ---- 1 file changed, 4 deletions(-) diff --git a/src/components-examples/cdk/overlay/cdk-overlay-basic/cdk-overlay-basic-example.ts b/src/components-examples/cdk/overlay/cdk-overlay-basic/cdk-overlay-basic-example.ts index 9de25830c7b1..e5ba0279b598 100644 --- a/src/components-examples/cdk/overlay/cdk-overlay-basic/cdk-overlay-basic-example.ts +++ b/src/components-examples/cdk/overlay/cdk-overlay-basic/cdk-overlay-basic-example.ts @@ -2,10 +2,6 @@ import {Component} from '@angular/core'; /** * @title Overlay basic example - * - * CdkOverlayBasicExample demonstrates how it is possible to trigger and - * connect a component to a set origin (in this case a button). - * */ @Component({ selector: 'cdk-overlay-basic-example', From db88f661adf70cae232ebfb6aee4178a809caf2c Mon Sep 17 00:00:00 2001 From: Andy Chrzaszcz Date: Fri, 22 May 2020 13:06:18 -0400 Subject: [PATCH 18/20] docs(examples/cdk/overlay): remove angular material from overlay cdk example --- .../cdk/overlay/BUILD.bazel | 4 ---- .../cdk-overlay-basic-example.css | 13 ++++++++++ .../cdk-overlay-basic-example.html | 24 +++++++------------ .../cdk-overlay-basic-example.ts | 1 + src/components-examples/cdk/overlay/index.ts | 6 +---- 5 files changed, 23 insertions(+), 25 deletions(-) create mode 100644 src/components-examples/cdk/overlay/cdk-overlay-basic/cdk-overlay-basic-example.css diff --git a/src/components-examples/cdk/overlay/BUILD.bazel b/src/components-examples/cdk/overlay/BUILD.bazel index 4423046734ff..92eea8fd6f10 100644 --- a/src/components-examples/cdk/overlay/BUILD.bazel +++ b/src/components-examples/cdk/overlay/BUILD.bazel @@ -12,10 +12,6 @@ ng_module( module_name = "@angular/components-examples/cdk/overlay", deps = [ "//src/cdk/overlay", - "//src/material/button", - "//src/material/card", - "//src/material/divider", - "//src/material/list", ], ) diff --git a/src/components-examples/cdk/overlay/cdk-overlay-basic/cdk-overlay-basic-example.css b/src/components-examples/cdk/overlay/cdk-overlay-basic/cdk-overlay-basic-example.css new file mode 100644 index 000000000000..661634a4f6fd --- /dev/null +++ b/src/components-examples/cdk/overlay/cdk-overlay-basic/cdk-overlay-basic-example.css @@ -0,0 +1,13 @@ +.list-container { + width: 100px; + border: solid 1px #ccc; + border-radius: 5px; + background: #fff; + text-align: center; + padding: 10px; + margin: 0px; +} + +.list-container li { + list-style-type: none; +} diff --git a/src/components-examples/cdk/overlay/cdk-overlay-basic/cdk-overlay-basic-example.html b/src/components-examples/cdk/overlay/cdk-overlay-basic/cdk-overlay-basic-example.html index 284f44cc32e5..e283ad019908 100644 --- a/src/components-examples/cdk/overlay/cdk-overlay-basic/cdk-overlay-basic-example.html +++ b/src/components-examples/cdk/overlay/cdk-overlay-basic/cdk-overlay-basic-example.html @@ -1,11 +1,5 @@ - @@ -15,13 +9,11 @@ [cdkConnectedOverlayOrigin]="trigger" [cdkConnectedOverlayOpen]="isOpen" > - - - Item 1 - - Item 2 - - Item 3 - - +
    +
  • Item 1
    • +
    +
  • Item 2
    • +
    +
  • Item 3
    • +
diff --git a/src/components-examples/cdk/overlay/cdk-overlay-basic/cdk-overlay-basic-example.ts b/src/components-examples/cdk/overlay/cdk-overlay-basic/cdk-overlay-basic-example.ts index e5ba0279b598..09575982dbbf 100644 --- a/src/components-examples/cdk/overlay/cdk-overlay-basic/cdk-overlay-basic-example.ts +++ b/src/components-examples/cdk/overlay/cdk-overlay-basic/cdk-overlay-basic-example.ts @@ -6,6 +6,7 @@ import {Component} from '@angular/core'; @Component({ selector: 'cdk-overlay-basic-example', templateUrl: './cdk-overlay-basic-example.html', + styleUrls: ['./cdk-overlay-basic-example.css'], }) export class CdkOverlayBasicExample { isOpen = false; diff --git a/src/components-examples/cdk/overlay/index.ts b/src/components-examples/cdk/overlay/index.ts index 4156fad265fa..733535710b2f 100644 --- a/src/components-examples/cdk/overlay/index.ts +++ b/src/components-examples/cdk/overlay/index.ts @@ -1,9 +1,5 @@ import {NgModule} from '@angular/core'; import {OverlayModule} from '@angular/cdk/overlay'; -import {MatButtonModule} from '@angular/material/button'; -import {MatCardModule} from '@angular/material/card'; -import {MatListModule} from '@angular/material/list'; -import {MatDividerModule} from '@angular/material/divider'; import {CdkOverlayBasicExample} from './cdk-overlay-basic/cdk-overlay-basic-example'; @@ -12,7 +8,7 @@ export {CdkOverlayBasicExample}; const EXAMPLES = [CdkOverlayBasicExample]; @NgModule({ - imports: [OverlayModule, MatButtonModule, MatListModule, MatDividerModule, MatCardModule], + imports: [OverlayModule], declarations: EXAMPLES, exports: EXAMPLES, entryComponents: EXAMPLES, From 753cffaecfa9acea630e7695c28a1df2590c68fb Mon Sep 17 00:00:00 2001 From: Andy Chrzaszcz Date: Fri, 22 May 2020 13:13:11 -0400 Subject: [PATCH 19/20] docs(examples/cdk/overlay): fix css linting errors on overlay example --- .../overlay/cdk-overlay-basic/cdk-overlay-basic-example.css | 6 +++--- .../cdk-overlay-basic/cdk-overlay-basic-example.html | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components-examples/cdk/overlay/cdk-overlay-basic/cdk-overlay-basic-example.css b/src/components-examples/cdk/overlay/cdk-overlay-basic/cdk-overlay-basic-example.css index 661634a4f6fd..9d24e8f44983 100644 --- a/src/components-examples/cdk/overlay/cdk-overlay-basic/cdk-overlay-basic-example.css +++ b/src/components-examples/cdk/overlay/cdk-overlay-basic/cdk-overlay-basic-example.css @@ -1,13 +1,13 @@ -.list-container { +.example-list { width: 100px; border: solid 1px #ccc; border-radius: 5px; background: #fff; text-align: center; padding: 10px; - margin: 0px; + margin: 0; } -.list-container li { +.example-list li { list-style-type: none; } diff --git a/src/components-examples/cdk/overlay/cdk-overlay-basic/cdk-overlay-basic-example.html b/src/components-examples/cdk/overlay/cdk-overlay-basic/cdk-overlay-basic-example.html index e283ad019908..41807a9af5f2 100644 --- a/src/components-examples/cdk/overlay/cdk-overlay-basic/cdk-overlay-basic-example.html +++ b/src/components-examples/cdk/overlay/cdk-overlay-basic/cdk-overlay-basic-example.html @@ -9,7 +9,7 @@ [cdkConnectedOverlayOrigin]="trigger" [cdkConnectedOverlayOpen]="isOpen" > -
    +
    • Item 1
    • Item 2
      • From deb1e4f5d1bba9cdba2ee74b422586c11dfa664f Mon Sep 17 00:00:00 2001 From: Andy Chrzaszcz Date: Wed, 27 May 2020 01:27:03 -0400 Subject: [PATCH 20/20] docs(examples/cdk/overlay): remove
      from example and use css to divide list items --- .../cdk-overlay-basic/cdk-overlay-basic-example.css | 8 +++++++- .../cdk-overlay-basic/cdk-overlay-basic-example.html | 2 -- 2 files changed, 7 insertions(+), 3 deletions(-) diff --git a/src/components-examples/cdk/overlay/cdk-overlay-basic/cdk-overlay-basic-example.css b/src/components-examples/cdk/overlay/cdk-overlay-basic/cdk-overlay-basic-example.css index 9d24e8f44983..8288eba90519 100644 --- a/src/components-examples/cdk/overlay/cdk-overlay-basic/cdk-overlay-basic-example.css +++ b/src/components-examples/cdk/overlay/cdk-overlay-basic/cdk-overlay-basic-example.css @@ -8,6 +8,12 @@ margin: 0; } -.example-list li { +.example-list > li { list-style-type: none; + border-bottom: solid 1px #8b8b8b; + padding: 8px 0; +} + +.example-list > li:last-child { + border-bottom: none; } diff --git a/src/components-examples/cdk/overlay/cdk-overlay-basic/cdk-overlay-basic-example.html b/src/components-examples/cdk/overlay/cdk-overlay-basic/cdk-overlay-basic-example.html index 41807a9af5f2..5ece34c61897 100644 --- a/src/components-examples/cdk/overlay/cdk-overlay-basic/cdk-overlay-basic-example.html +++ b/src/components-examples/cdk/overlay/cdk-overlay-basic/cdk-overlay-basic-example.html @@ -11,9 +11,7 @@ >
      • Item 1
        • -
      • Item 2
        • -
      • Item 3