diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS index 468c257a3792..acc764a6d9e2 100644 --- a/.github/CODEOWNERS +++ b/.github/CODEOWNERS @@ -111,7 +111,7 @@ /src/dev-app/connected-overlay/** @jelbourn @crisbeto /src/dev-app/dataset/** @andrewseguin /src/dev-app/datepicker/** @mmalerba -/src/dev-app/dev-app-layout/** @mmalerba +/src/dev-app/dev-app/** @mmalerba /src/dev-app/dialog/** @jelbourn @crisbeto /src/dev-app/drag-drop/** @crisbeto /src/dev-app/drawer/** @mmalerba diff --git a/package.json b/package.json index a2356ae3b42d..0ab285269f6f 100644 --- a/package.json +++ b/package.json @@ -125,10 +125,12 @@ "node-sass": "^4.11.0", "parse5": "^5.0.0", "protractor": "^5.4.1", + "requirejs": "^2.3.6", "resolve-bin": "^0.4.0", - "rollup": "^0.56.3", - "rollup-plugin-alias": "^1.4.0", - "rollup-plugin-node-resolve": "^3.0.3", + "rollup": "^1.7.0", + "rollup-plugin-alias": "^1.5.1", + "rollup-plugin-commonjs": "^9.2.1", + "rollup-plugin-node-resolve": "^4.0.1", "run-sequence": "^1.2.2", "scss-bundle": "^2.0.1-beta.7", "selenium-webdriver": "^3.6.0", diff --git a/scripts/ivy/build.sh b/scripts/ivy/build.sh index 06eacbfa2d82..fe6f16258e73 100755 --- a/scripts/ivy/build.sh +++ b/scripts/ivy/build.sh @@ -4,24 +4,22 @@ set -e echo ">>> Build Material" rm -rf dist -gulp build:devapp +yarn gulp build:devapp echo ">>> Rebuild dev-app with ngtsc" node_modules/.bin/ngc -p src/dev-app/tsconfig-build.json -echo ">>> Bundle demo-app with SystemJS" -node ./src/dev-app/systemjs-bundle.js +echo ">>> Bundling dev-app with Rollup" +node ./src/dev-app/rollup-bundles.js -echo ">>> Assembling app" -mkdir dist/demo -cp dist/packages/dev-app/bundle.js dist/demo +echo ">>> Copying assets to output" cp src/dev-app/index.html dist/demo cp dist/packages/dev-app/theme.css dist/demo cp 'node_modules/@webcomponents/custom-elements/custom-elements.min.js' dist/demo cp node_modules/core-js/client/core.js dist/demo -cp node_modules/systemjs/dist/system.src.js dist/demo +cp node_modules/requirejs/require.js dist/demo cp node_modules/zone.js/dist/zone.js dist/demo cp node_modules/hammerjs/hammer.min.js dist/demo echo ">>> Done." -echo "Output: $(pwd)/dist/demo" \ No newline at end of file +echo "Output: $(pwd)/dist/demo" diff --git a/scripts/ivy/install-angular.sh b/scripts/ivy/install-angular.sh index f8e7eadeac91..d34f542f4ec7 100755 --- a/scripts/ivy/install-angular.sh +++ b/scripts/ivy/install-angular.sh @@ -21,6 +21,7 @@ function build_angular_packages() { function install_angular_package() { name=$1 echo " @angular/$name" + rm -Rf "node_modules/@angular/${name}" cp -r "${output_path}/${name}/npm_package" "node_modules/@angular/${name}" } diff --git a/src/dev-app/autocomplete/autocomplete-demo-module.ts b/src/dev-app/autocomplete/autocomplete-demo-module.ts index 2e51b6f154f2..18269191c81d 100644 --- a/src/dev-app/autocomplete/autocomplete-demo-module.ts +++ b/src/dev-app/autocomplete/autocomplete-demo-module.ts @@ -16,6 +16,7 @@ import { MatFormFieldModule, MatInputModule } from '@angular/material'; +import {RouterModule} from '@angular/router'; import {AutocompleteDemo} from './autocomplete-demo'; @NgModule({ @@ -28,6 +29,7 @@ import {AutocompleteDemo} from './autocomplete-demo'; MatFormFieldModule, MatInputModule, ReactiveFormsModule, + RouterModule.forChild([{path: '', component: AutocompleteDemo}]), ], declarations: [AutocompleteDemo], }) diff --git a/src/dev-app/badge/badge-demo-module.ts b/src/dev-app/badge/badge-demo-module.ts index 7a3da62d0154..008159872f2d 100644 --- a/src/dev-app/badge/badge-demo-module.ts +++ b/src/dev-app/badge/badge-demo-module.ts @@ -10,6 +10,7 @@ import {CommonModule} from '@angular/common'; import {NgModule} from '@angular/core'; import {FormsModule} from '@angular/forms'; import {MatBadgeModule, MatButtonModule, MatIconModule} from '@angular/material'; +import {RouterModule} from '@angular/router'; import {BadgeDemo} from './badge-demo'; @NgModule({ @@ -19,6 +20,7 @@ import {BadgeDemo} from './badge-demo'; MatBadgeModule, MatButtonModule, MatIconModule, + RouterModule.forChild([{path: '', component: BadgeDemo}]), ], declarations: [BadgeDemo], }) diff --git a/src/dev-app/baseline/baseline-demo-module.ts b/src/dev-app/baseline/baseline-demo-module.ts index 337c361b095c..c3e6e9080981 100644 --- a/src/dev-app/baseline/baseline-demo-module.ts +++ b/src/dev-app/baseline/baseline-demo-module.ts @@ -17,6 +17,7 @@ import { MatSelectModule, MatToolbarModule } from '@angular/material'; +import {RouterModule} from '@angular/router'; import {BaselineDemo} from './baseline-demo'; @NgModule({ @@ -29,6 +30,7 @@ import {BaselineDemo} from './baseline-demo'; MatRadioModule, MatSelectModule, MatToolbarModule, + RouterModule.forChild([{path: '', component: BaselineDemo}]), ], declarations: [BaselineDemo], }) diff --git a/src/dev-app/bottom-sheet/bottom-sheet-demo-module.ts b/src/dev-app/bottom-sheet/bottom-sheet-demo-module.ts index af0e6f8c16d6..702d73e87c04 100644 --- a/src/dev-app/bottom-sheet/bottom-sheet-demo-module.ts +++ b/src/dev-app/bottom-sheet/bottom-sheet-demo-module.ts @@ -20,6 +20,7 @@ import { MatListModule, MatSelectModule } from '@angular/material'; +import {RouterModule} from '@angular/router'; import {BottomSheetDemo, ExampleBottomSheet} from './bottom-sheet-demo'; @NgModule({ @@ -35,6 +36,7 @@ import {BottomSheetDemo, ExampleBottomSheet} from './bottom-sheet-demo'; MatInputModule, MatListModule, MatSelectModule, + RouterModule.forChild([{path: '', component: BottomSheetDemo}]), ], declarations: [BottomSheetDemo, ExampleBottomSheet], entryComponents: [ExampleBottomSheet], diff --git a/src/dev-app/button-toggle/button-toggle-demo-module.ts b/src/dev-app/button-toggle/button-toggle-demo-module.ts index 44d4d66aeaed..c6338266277b 100644 --- a/src/dev-app/button-toggle/button-toggle-demo-module.ts +++ b/src/dev-app/button-toggle/button-toggle-demo-module.ts @@ -10,6 +10,7 @@ import {CommonModule} from '@angular/common'; import {NgModule} from '@angular/core'; import {FormsModule} from '@angular/forms'; import {MatButtonToggleModule, MatCheckboxModule, MatIconModule} from '@angular/material'; +import {RouterModule} from '@angular/router'; import {ButtonToggleDemo} from './button-toggle-demo'; @NgModule({ @@ -19,6 +20,7 @@ import {ButtonToggleDemo} from './button-toggle-demo'; MatButtonToggleModule, MatCheckboxModule, MatIconModule, + RouterModule.forChild([{path: '', component: ButtonToggleDemo}]), ], declarations: [ButtonToggleDemo], }) diff --git a/src/dev-app/button/button-demo-module.ts b/src/dev-app/button/button-demo-module.ts index c5a845b242fb..351c52b98cb4 100644 --- a/src/dev-app/button/button-demo-module.ts +++ b/src/dev-app/button/button-demo-module.ts @@ -8,12 +8,14 @@ import {NgModule} from '@angular/core'; import {MatButtonModule, MatIconModule} from '@angular/material'; +import {RouterModule} from '@angular/router'; import {ButtonDemo} from './button-demo'; @NgModule({ imports: [ MatButtonModule, MatIconModule, + RouterModule.forChild([{path: '', component: ButtonDemo}]), ], declarations: [ButtonDemo], }) diff --git a/src/dev-app/card/card-demo-module.ts b/src/dev-app/card/card-demo-module.ts index 20c5993cb15b..2802f70bf778 100644 --- a/src/dev-app/card/card-demo-module.ts +++ b/src/dev-app/card/card-demo-module.ts @@ -13,6 +13,7 @@ import { MatDividerModule, MatProgressBarModule } from '@angular/material'; +import {RouterModule} from '@angular/router'; import {CardDemo} from './card-demo'; @NgModule({ @@ -21,6 +22,7 @@ import {CardDemo} from './card-demo'; MatCardModule, MatDividerModule, MatProgressBarModule, + RouterModule.forChild([{path: '', component: CardDemo}]), ], declarations: [CardDemo], }) diff --git a/src/dev-app/checkbox/checkbox-demo-module.ts b/src/dev-app/checkbox/checkbox-demo-module.ts index 92d7963a6fdd..25cd416b5497 100644 --- a/src/dev-app/checkbox/checkbox-demo-module.ts +++ b/src/dev-app/checkbox/checkbox-demo-module.ts @@ -10,6 +10,7 @@ import {CommonModule} from '@angular/common'; import {NgModule} from '@angular/core'; import {FormsModule} from '@angular/forms'; import {MatCheckboxModule, MatPseudoCheckboxModule} from '@angular/material'; +import {RouterModule} from '@angular/router'; import {CheckboxDemo, MatCheckboxDemoNestedChecklist} from './checkbox-demo'; @NgModule({ @@ -18,6 +19,7 @@ import {CheckboxDemo, MatCheckboxDemoNestedChecklist} from './checkbox-demo'; FormsModule, MatCheckboxModule, MatPseudoCheckboxModule, + RouterModule.forChild([{path: '', component: CheckboxDemo}]), ], declarations: [CheckboxDemo, MatCheckboxDemoNestedChecklist], }) diff --git a/src/dev-app/chips/chips-demo-module.ts b/src/dev-app/chips/chips-demo-module.ts index cf83265f3666..7fe266a8071f 100644 --- a/src/dev-app/chips/chips-demo-module.ts +++ b/src/dev-app/chips/chips-demo-module.ts @@ -18,6 +18,7 @@ import { MatIconModule, MatToolbarModule } from '@angular/material'; +import {RouterModule} from '@angular/router'; import {ChipsDemo} from './chips-demo'; @NgModule({ @@ -31,6 +32,7 @@ import {ChipsDemo} from './chips-demo'; MatFormFieldModule, MatIconModule, MatToolbarModule, + RouterModule.forChild([{path: '', component: ChipsDemo}]), ], declarations: [ChipsDemo], }) 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 db91cfb45ea1..7756b9b595de 100644 --- a/src/dev-app/connected-overlay/connected-overlay-demo-module.ts +++ b/src/dev-app/connected-overlay/connected-overlay-demo-module.ts @@ -11,6 +11,7 @@ import {CommonModule} from '@angular/common'; import {NgModule} from '@angular/core'; import {FormsModule} from '@angular/forms'; import {MatButtonModule, MatCheckboxModule, MatRadioModule} from '@angular/material'; +import {RouterModule} from '@angular/router'; import {ConnectedOverlayDemo} from './connected-overlay-demo'; @NgModule({ @@ -21,6 +22,7 @@ import {ConnectedOverlayDemo} from './connected-overlay-demo'; MatCheckboxModule, MatRadioModule, OverlayModule, + RouterModule.forChild([{path: '', component: ConnectedOverlayDemo}]), ], declarations: [ConnectedOverlayDemo], }) diff --git a/src/dev-app/datepicker/datepicker-demo-module.ts b/src/dev-app/datepicker/datepicker-demo-module.ts index 8d867369e708..edec8d6f84d4 100644 --- a/src/dev-app/datepicker/datepicker-demo-module.ts +++ b/src/dev-app/datepicker/datepicker-demo-module.ts @@ -16,8 +16,10 @@ import { MatFormFieldModule, MatIconModule, MatInputModule, + MatNativeDateModule, MatSelectModule } from '@angular/material'; +import {RouterModule} from '@angular/router'; import {CustomHeader, CustomHeaderNgContent, DatepickerDemo} from './datepicker-demo'; @NgModule({ @@ -30,8 +32,10 @@ import {CustomHeader, CustomHeaderNgContent, DatepickerDemo} from './datepicker- MatFormFieldModule, MatIconModule, MatInputModule, + MatNativeDateModule, MatSelectModule, ReactiveFormsModule, + RouterModule.forChild([{path: '', component: DatepickerDemo}]), ], declarations: [CustomHeader, CustomHeaderNgContent, DatepickerDemo], entryComponents: [CustomHeader, CustomHeaderNgContent], diff --git a/src/dev-app/dev-app-module.ts b/src/dev-app/dev-app-module.ts deleted file mode 100644 index abd3e1508b66..000000000000 --- a/src/dev-app/dev-app-module.ts +++ /dev/null @@ -1,133 +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 {FullscreenOverlayContainer, OverlayContainer} from '@angular/cdk/overlay'; -import {HttpClientModule} from '@angular/common/http'; -import {NgModule} from '@angular/core'; -import {MAT_RIPPLE_GLOBAL_OPTIONS} from '@angular/material'; -import {BrowserModule} from '@angular/platform-browser'; -import {BrowserAnimationsModule} from '@angular/platform-browser/animations'; -import {RouterModule} from '@angular/router'; -import {AutocompleteDemoModule} from './autocomplete/autocomplete-demo-module'; -import {BadgeDemoModule} from './badge/badge-demo-module'; -import {BaselineDemoModule} from './baseline/baseline-demo-module'; -import {BottomSheetDemoModule} from './bottom-sheet/bottom-sheet-demo-module'; -import {ButtonToggleDemoModule} from './button-toggle/button-toggle-demo-module'; -import {ButtonDemoModule} from './button/button-demo-module'; -import {CardDemoModule} from './card/card-demo-module'; -import {CheckboxDemoModule} from './checkbox/checkbox-demo-module'; -import {ChipsDemoModule} from './chips/chips-demo-module'; -import {ConnectedOverlayDemoModule} from './connected-overlay/connected-overlay-demo-module'; -import {DatepickerDemoModule} from './datepicker/datepicker-demo-module'; -import {DevApp404, DevAppComponent, DevAppHome} from './dev-app'; -import {DevAppLayoutModule} from './dev-app-layout/dev-app-layout-module'; -import {DialogDemoModule} from './dialog/dialog-demo-module'; -import {DragDropDemoModule} from './drag-drop/drag-drop-demo-module'; -import {DrawerDemoModule} from './drawer/drawer-demo-module'; -import {ExamplesPageModule} from './examples-page/examples-page-module'; -import {ExpansionDemoModule} from './expansion/expansion-demo-module'; -import {FocusOriginDemoModule} from './focus-origin/focus-origin-demo-module'; -import {GesturesDemoModule} from './gestures/gestures-demo-module'; -import {GridListDemoModule} from './grid-list/grid-list-demo-module'; -import {IconDemoModule} from './icon/icon-demo-module'; -import {InputDemoModule} from './input/input-demo-module'; -import {ListDemoModule} from './list/list-demo-module'; -import {LiveAnnouncerDemoModule} from './live-announcer/live-announcer-demo-module'; -import {MenuDemoModule} from './menu/menu-demo-module'; -import {PaginatorDemoModule} from './paginator/paginator-demo-module'; -import {PlatformDemoModule} from './platform/platform-demo-module'; -import {PortalDemoModule} from './portal/portal-demo-module'; -import {ProgressBarDemoModule} from './progress-bar/progress-bar-demo-module'; -import {ProgressSpinnerDemoModule} from './progress-spinner/progress-spinner-demo-module'; -import {RadioDemoModule} from './radio/radio-demo-module'; -import {RippleDemoModule} from './ripple/ripple-demo-module'; -import {DevAppRippleOptions} from './ripple/ripple-options'; -import {DEV_APP_ROUTES} from './routes'; -import {ScreenTypeDemoModule} from './screen-type/screen-type-demo-module'; -import {SelectDemoModule} from './select/select-demo-module'; -import {SidenavDemoModule} from './sidenav/sidenav-demo-module'; -import {SlideToggleDemoModule} from './slide-toggle/slide-toggle-demo-module'; -import {SliderDemoModule} from './slider/slider-demo-module'; -import {SnackBarDemoModule} from './snack-bar/snack-bar-demo-module'; -import {StepperDemoModule} from './stepper/stepper-demo-module'; -import {TableDemoModule} from './table/table-demo-module'; -import {TabsDemoModule} from './tabs/tabs-demo-module'; -import {ToolbarDemoModule} from './toolbar/toolbar-demo-module'; -import {TooltipDemoModule} from './tooltip/tooltip-demo-module'; -import {TreeDemoModule} from './tree/tree-demo-module'; -import {TypographyDemoModule} from './typography/typography-demo-module'; -import {VirtualScrollDemoModule} from './virtual-scroll/virtual-scroll-demo-module'; - -@NgModule({ - imports: [ - BrowserAnimationsModule, - BrowserModule, - DevAppLayoutModule, - HttpClientModule, - RouterModule.forRoot(DEV_APP_ROUTES), - - // Demo pages - AutocompleteDemoModule, - BadgeDemoModule, - BaselineDemoModule, - BottomSheetDemoModule, - ButtonDemoModule, - ButtonToggleDemoModule, - CardDemoModule, - CheckboxDemoModule, - ChipsDemoModule, - ConnectedOverlayDemoModule, - DatepickerDemoModule, - DialogDemoModule, - DragDropDemoModule, - DrawerDemoModule, - ExamplesPageModule, - ExpansionDemoModule, - FocusOriginDemoModule, - GesturesDemoModule, - GridListDemoModule, - IconDemoModule, - InputDemoModule, - ListDemoModule, - LiveAnnouncerDemoModule, - MenuDemoModule, - PaginatorDemoModule, - PlatformDemoModule, - PortalDemoModule, - ProgressBarDemoModule, - ProgressSpinnerDemoModule, - RadioDemoModule, - RippleDemoModule, - ScreenTypeDemoModule, - SelectDemoModule, - SidenavDemoModule, - SliderDemoModule, - SlideToggleDemoModule, - SnackBarDemoModule, - StepperDemoModule, - TableDemoModule, - TabsDemoModule, - ToolbarDemoModule, - TooltipDemoModule, - TreeDemoModule, - TypographyDemoModule, - VirtualScrollDemoModule, - ], - declarations: [ - DevAppComponent, - DevAppHome, - DevApp404, - ], - providers: [ - {provide: OverlayContainer, useClass: FullscreenOverlayContainer}, - {provide: MAT_RIPPLE_GLOBAL_OPTIONS, useExisting: DevAppRippleOptions}, - ], - bootstrap: [DevAppComponent], -}) -export class DevAppModule { -} diff --git a/src/dev-app/dev-app.ts b/src/dev-app/dev-app.ts index 1a50a5062bd0..08e998fd66e6 100644 --- a/src/dev-app/dev-app.ts +++ b/src/dev-app/dev-app.ts @@ -17,24 +17,3 @@ import {Component, ViewEncapsulation} from '@angular/core'; }) export class DevAppComponent { } - - -/** Home component which includes a welcome message for the dev-app. */ -@Component({ - selector: 'home', - template: ` -
Welcome to the development demos for Angular Material!
-Open the sidenav to select a demo.
- `, -}) -export class DevAppHome {} - -@Component({ - template: ` -This page does not exist
- Go back to the home page - `, - host: {'class': 'mat-typography'}, -}) -export class DevApp404 {} diff --git a/src/dev-app/dev-app/dev-app-404.ts b/src/dev-app/dev-app/dev-app-404.ts new file mode 100644 index 000000000000..c017a6fda35c --- /dev/null +++ b/src/dev-app/dev-app/dev-app-404.ts @@ -0,0 +1,20 @@ +/** + * @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({ + template: ` +This page does not exist
+ Go back to the home page + `, + host: {'class': 'mat-typography'}, +}) +export class DevApp404 { +} diff --git a/src/dev-app/dev-app/dev-app-directionality.ts b/src/dev-app/dev-app/dev-app-directionality.ts new file mode 100644 index 000000000000..b20e937e5a39 --- /dev/null +++ b/src/dev-app/dev-app/dev-app-directionality.ts @@ -0,0 +1,28 @@ +/** + * @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 {Direction, Directionality} from '@angular/cdk/bidi'; +import {EventEmitter, Injectable, OnDestroy} from '@angular/core'; + +@Injectable() +export class DevAppDirectionality implements Directionality, OnDestroy { + readonly change = new EventEmitterWelcome to the development demos for Angular Material!
+Open the sidenav to select a demo.
+ `, +}) +export class DevAppHome { +} diff --git a/src/dev-app/dev-app-layout/dev-app-layout.html b/src/dev-app/dev-app/dev-app-layout.html similarity index 88% rename from src/dev-app/dev-app-layout/dev-app-layout.html rename to src/dev-app/dev-app/dev-app-layout.html index 8360402265a2..27fba50379f2 100644 --- a/src/dev-app/dev-app-layout/dev-app-layout.html +++ b/src/dev-app/dev-app/dev-app-layout.html @@ -37,15 +37,15 @@