feat(): use secondary entry points for @angular/material and rxjs so …

…we can cherry pick modules (#1019)

this is needed so we dont load all the @angular/material packages when we only need a few (same for rxjs)

scripts/rollup.js

@@ -34,7 +34,24 @@ gulp.task('rollup-code', '', function() {
     '@angular/platform-browser': 'ng.platformBrowser',
     '@angular/platform-browser/animations': 'ng.platformBrowser.animations',
     '@angular/platform-browser-dynamic': 'ng.platformBrowserDynamic',
+    // Material entry points
     '@angular/material': 'ng.material',
+    '@angular/material/core': 'ng.material.core',
+    '@angular/material/input': 'ng.material.input',
+    '@angular/material/button': 'ng.material.button',
+    '@angular/material/sidenav': 'ng.material.sidenav',
+    '@angular/material/autocomplete': 'ng.material.autocomplete',
+    '@angular/material/toolbar': 'ng.material.toolbar',
+    '@angular/material/dialog': 'ng.material.dialog',
+    '@angular/material/icon': 'ng.material.icon',
+    '@angular/material/chips': 'ng.material.chips',
+    '@angular/material/slide-toggle': 'ng.material.slideToggle',
+    '@angular/material/slider': 'ng.material.slider',
+    '@angular/material/checkbox': 'ng.material.checkbox',
+    '@angular/material/progress-bar': 'ng.material.progress-bar',
+    '@angular/material/progress-spinner': 'ng.material.progress-spinner',
+    '@angular/material/tooltip': 'ng.material.tooltip',
+    // CDK entry points
     '@angular/cdk': 'ng.cdk',
     '@angular/cdk/overlay': 'ng.cdk.overlay',
     '@angular/cdk/portal': 'ng.cdk.portal',
@@ -45,20 +62,29 @@ gulp.task('rollup-code', '', function() {
 
     // Rxjs dependencies
     'rxjs/Subject': 'Rx',
-    'rxjs/BehaviorSubject': 'Rx.BehaviorSubject',
+    'rxjs/Subscription': 'Rx',
+    'rxjs/Observable': 'Rx',
+    'rxjs/BehaviorSubject': 'Rx',
+
     'rxjs/observable/merge': 'Rx.Observable',
     'rxjs/observable/forkJoin': 'Rx.Observable',
     'rxjs/observable/of': 'Rx.Observable',
     'rxjs/observable/timer': 'Rx.Observable',
     'rxjs/observable/fromEvent': 'Rx.Observable',
+
     'rxjs/operator/toPromise': 'Rx.Observable.prototype',
+
     'rxjs/operators/pairwise': 'Rx.Observable',
     'rxjs/operators/map': 'Rx.Observable',
     'rxjs/operators/filter': 'Rx.Observable',
     'rxjs/operators/catchError': 'Rx.Observable',
     'rxjs/operators/debounceTime': 'Rx.Observable',
+    'rxjs/operators/take': 'Rx.Observable',
+    'rxjs/operators/tap': 'Rx.Observable',
+    'rxjs/operators/switchMap': 'Rx.Observable',
+    'rxjs/operators/startWith': 'Rx.Observable',
     'rxjs/operators/skip': 'Rx.Observable',
-    'rxjs/Observable': 'Rx',
+    'rxjs/operators/takeUntil': 'Rx.Observable',
 
     // Covalent
     '@covalent/core': 'td.core',

src/app/app.component.ts

@@ -1,7 +1,7 @@
 import { Component, ChangeDetectorRef } from '@angular/core';
 import { DomSanitizer } from '@angular/platform-browser';
 import { Dir } from '@angular/cdk/bidi';
-import { MatIconRegistry } from '@angular/material';
+import { MatIconRegistry } from '@angular/material/icon';
 import { TdMediaService } from '@covalent/core';
 import { TranslateService } from '@ngx-translate/core';
 

src/app/app.module.ts

@@ -17,8 +17,15 @@ import { HomeComponent } from './components/home/home.component';
 import { TemplatesComponent } from './components/templates/templates.component';
 import { appRoutes, appRoutingProviders } from './app.routes';
 
-import { MatButtonModule, MatListModule, MatIconModule, MatCardModule, MatMenuModule, MatTabsModule,
-         MatToolbarModule, MatGridListModule, MatTooltipModule } from '@angular/material';
+import { MatButtonModule } from '@angular/material/button';
+import { MatListModule } from '@angular/material/list';
+import { MatIconModule } from '@angular/material/icon';
+import { MatCardModule } from '@angular/material/card';
+import { MatToolbarModule } from '@angular/material/toolbar';
+import { MatMenuModule } from '@angular/material/menu';
+import { MatGridListModule } from '@angular/material/grid-list';
+import { MatTabsModule } from '@angular/material/tabs';
+import { MatTooltipModule } from '@angular/material/tooltip';
 
 import { CovalentLayoutModule, CovalentExpansionPanelModule, CovalentNotificationsModule, CovalentMenuModule,
          CovalentMediaModule } from '../platform/core';

src/app/components/components/chips/chips.component.ts

@@ -2,8 +2,6 @@ import { Component, HostBinding, OnInit, ChangeDetectionStrategy, ChangeDetector
 
 import { slideInDownAnimation } from '../../../app.animations';
 
-import { MatChip} from '@angular/material';
-
 @Component({
   selector: 'chips-demo',
   styleUrls: ['./chips.component.scss'],

src/app/components/components/components.module.ts

@@ -37,9 +37,22 @@ import { NgxTranslateDemoComponent } from './ngx-translate/ngx-translate.compone
 import { NgxChartsModule } from '@swimlane/ngx-charts';
 import { TranslateModule } from '@ngx-translate/core';
 
-import { MatButtonModule, MatListModule, MatIconModule, MatCardModule, MatMenuModule, MatInputModule, MatButtonToggleModule, MatSlideToggleModule,
-         MatSelectModule, MatToolbarModule, MatTabsModule, MatTooltipModule, MatAutocompleteModule,
-         MatProgressBarModule, MatGridListModule, MatRippleModule } from '@angular/material';
+import { MatButtonModule } from '@angular/material/button';
+import { MatListModule } from '@angular/material/list';
+import { MatIconModule } from '@angular/material/icon';
+import { MatCardModule } from '@angular/material/card';
+import { MatToolbarModule } from '@angular/material/toolbar';
+import { MatInputModule } from '@angular/material/input';
+import { MatMenuModule } from '@angular/material/menu';
+import { MatSelectModule } from '@angular/material/select';
+import { MatGridListModule } from '@angular/material/grid-list';
+import { MatTabsModule } from '@angular/material/tabs';
+import { MatAutocompleteModule } from '@angular/material/autocomplete';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { MatButtonToggleModule } from '@angular/material/button-toggle';
+import { MatSlideToggleModule } from '@angular/material/slide-toggle';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
+import { MatRippleModule } from '@angular/material/core';
 
 import { CovalentCommonModule, CovalentLayoutModule, CovalentMediaModule, CovalentExpansionPanelModule, CovalentFileModule,
          CovalentStepsModule, CovalentLoadingModule, CovalentDialogsModule, CovalentSearchModule, CovalentPagingModule,

src/app/components/design-patterns/alerts/alerts.component.html

@@ -162,7 +162,7 @@ <h3>Solution</h3>
                   <ng-template matTabLabel>Typescript</ng-template>
                     <td-highlight lang="typescript">
                       <![CDATA[
-                        import { MatSnackBar } from '@angular/material';
+                        import { MatSnackBar } from '@angular/material/snack-bar';
                         ...
                         export class ToastsComponent {
                           constructor(private _snackBarService: MatSnackBar) {

src/app/components/design-patterns/alerts/alerts.component.ts

@@ -5,7 +5,7 @@ import { slideInDownAnimation } from '../../../app.animations';
 import { TdDialogService } from '../../../../platform/core';
 import { TdCollapseAnimation } from '@covalent/core';
 
-import { MatSnackBar } from '@angular/material';
+import { MatSnackBar } from '@angular/material/snack-bar';
 
 @Component({
   selector: 'design-patterns-alerts',

src/app/components/design-patterns/design-patterns.module.ts

@@ -10,9 +10,22 @@ import { AlertsComponent } from './alerts/alerts.component';
 import { ManagementListComponent } from './management-list/management-list.component';
 import { NavigationDrawerComponent } from './navigation-drawer/navigation-drawer.component';
 
-import { MatButtonModule, MatListModule, MatIconModule, MatCardModule, MatToolbarModule, MatSnackBarModule,
-         MatInputModule, MatMenuModule, MatSelectModule, MatGridListModule, MatTabsModule, MatSidenavModule,
-         MatTooltipModule, MatProgressBarModule, MatButtonToggleModule } from '@angular/material';
+import { MatButtonModule } from '@angular/material/button';
+import { MatListModule } from '@angular/material/list';
+import { MatIconModule } from '@angular/material/icon';
+import { MatCardModule } from '@angular/material/card';
+import { MatToolbarModule } from '@angular/material/toolbar';
+import { MatInputModule } from '@angular/material/input';
+import { MatMenuModule } from '@angular/material/menu';
+import { MatSelectModule } from '@angular/material/select';
+import { MatGridListModule } from '@angular/material/grid-list';
+import { MatTabsModule } from '@angular/material/tabs';
+import { MatSidenavModule } from '@angular/material/sidenav';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { MatButtonToggleModule } from '@angular/material/button-toggle';
+import { MatSlideToggleModule } from '@angular/material/slide-toggle';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
+import { MatSnackBarModule } from '@angular/material/snack-bar';
 
 import { CovalentLayoutModule, CovalentMediaModule, CovalentSearchModule, CovalentPagingModule,
          CovalentExpansionPanelModule, CovalentDialogsModule, CovalentMessageModule } from '../../../platform/core';

src/app/components/docs/docs.module.ts

@@ -19,8 +19,12 @@ import { MockDataComponent } from './mock-data/mock-data.component';
 
 import { DocumentationToolsModule } from '../../documentation-tools';
 
-import { MatButtonModule, MatListModule, MatIconModule, MatCardModule, MatToolbarModule,
-         MatMenuModule } from '@angular/material';
+import { MatButtonModule } from '@angular/material/button';
+import { MatListModule } from '@angular/material/list';
+import { MatIconModule } from '@angular/material/icon';
+import { MatCardModule } from '@angular/material/card';
+import { MatToolbarModule } from '@angular/material/toolbar';
+import { MatMenuModule } from '@angular/material/menu';
 
 import { CovalentLayoutModule, CovalentMediaModule } from '../../../platform/core';
 import { CovalentHighlightModule } from '../../../platform/highlight';

src/app/components/docs/icons/icons.component.html

@@ -17,7 +17,7 @@ <h3>SVG Icons (from Safe URLS)</h3>
     <td-highlight lang="typescript">
      <![CDATA[
        import { DomSanitizer } from '@angular/platform-browser';
-       import { MatIconRegistry } from '@angular/material';
+       import { MatIconRegistry } from '@angular/material/icon';
        ...
        ...
        constructor(private _iconRegistry: MatIconRegistry,

src/app/components/layouts/layouts.module.ts

@@ -10,7 +10,11 @@ import { NavListComponent } from './nav-list/nav-list.component';
 import { CardOverComponent } from './card-over/card-over.component';
 import { ManageListComponent } from './manage-list/manage-list.component';
 
-import { MatButtonModule, MatListModule, MatIconModule, MatCardModule, MatToolbarModule } from '@angular/material';
+import { MatButtonModule } from '@angular/material/button';
+import { MatListModule } from '@angular/material/list';
+import { MatIconModule } from '@angular/material/icon';
+import { MatCardModule } from '@angular/material/card';
+import { MatToolbarModule } from '@angular/material/toolbar';
 
 import { CovalentLayoutModule, CovalentExpansionPanelModule, CovalentStepsModule, CovalentMediaModule,
          CovalentCommonModule } from '../../../platform/core';

src/app/components/style-guide/style-guide.module.ts

@@ -13,9 +13,20 @@ import { ColorsComponent } from './colors/colors.component';
 import { UtilityStylesComponent } from './utility-styles/utility-styles.component';
 import { ResourcesComponent } from './resources/resources.component';
 
-import { MatButtonModule, MatListModule, MatIconModule, MatCardModule, MatToolbarModule, MatSnackBarModule,
-         MatInputModule, MatMenuModule, MatSelectModule, MatGridListModule, MatTabsModule, MatSidenavModule,
-         MatTooltipModule, MatProgressBarModule } from '@angular/material';
+import { MatButtonModule } from '@angular/material/button';
+import { MatListModule } from '@angular/material/list';
+import { MatIconModule } from '@angular/material/icon';
+import { MatCardModule } from '@angular/material/card';
+import { MatSnackBarModule } from '@angular/material/snack-bar';
+import { MatInputModule } from '@angular/material/input';
+import { MatMenuModule } from '@angular/material/menu';
+import { MatSelectModule } from '@angular/material/select';
+import { MatGridListModule } from '@angular/material/grid-list';
+import { MatTabsModule } from '@angular/material/tabs';
+import { MatSidenavModule } from '@angular/material/sidenav';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
+import { MatToolbarModule } from '@angular/material/toolbar';
 
 import { CovalentLayoutModule, CovalentMediaModule, CovalentSearchModule, CovalentPagingModule,
          CovalentExpansionPanelModule, CovalentDialogsModule, CovalentMessageModule } from '../../../platform/core';

src/app/components/toolbar/toolbar.module.ts

@@ -4,7 +4,10 @@ import { RouterModule } from '@angular/router';
 
 import { ToolbarComponent } from './toolbar.component';
 
-import { MatButtonModule, MatListModule, MatIconModule, MatMenuModule } from '@angular/material';
+import { MatButtonModule } from '@angular/material/button';
+import { MatListModule } from '@angular/material/list';
+import { MatIconModule } from '@angular/material/icon';
+import { MatMenuModule } from '@angular/material/menu';
 
 import { CovalentMenuModule, CovalentNotificationsModule } from '../../../platform/core';
 

src/app/documentation-tools/index.ts

@@ -1,7 +1,8 @@
 import { NgModule, ModuleWithProviders } from '@angular/core';
 import { CommonModule } from '@angular/common';
 
-import { MatCheckbox, MatCardModule, MatCheckboxModule } from '@angular/material';
+import { MatCheckbox, MatCheckboxModule } from '@angular/material/checkbox';
+import { MatCardModule } from '@angular/material/card';
 
 import { CovalentDataTableModule, TdDataTableComponent } from '../../platform/core';
 import { CovalentHighlightModule, TdHighlightComponent } from '../../platform/highlight';

src/app/documentation-tools/pretty-markdown/pretty-markdown.component.ts

@@ -2,7 +2,7 @@ import { Component, Directive, AfterViewInit, ElementRef, Input, Renderer2, Secu
          ViewContainerRef, ComponentFactoryResolver, Injector, ComponentRef, ViewChild, ChangeDetectorRef } from '@angular/core';
 import { DomSanitizer } from '@angular/platform-browser';
 
-import { MatCheckbox } from '@angular/material';
+import { MatCheckbox } from '@angular/material/checkbox';
 import { TdHighlightComponent } from '@covalent/highlight';
 import { TdMarkdownComponent } from '@covalent/markdown';
 import { TdDataTableComponent, TdDataTableSortingOrder, ITdDataTableSortChangeEvent, ITdDataTableColumnWidth } from '@covalent/core';

src/app/documentation-tools/readme-loader/readme-loader.component.ts

@@ -2,7 +2,7 @@ import { Component, Input, HostBinding, Sanitizer, SecurityContext, ChangeDetect
 import { HttpClient } from '@angular/common/http';
 import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';
 
-import { catchError } from 'rxjs/operators';
+import { catchError } from 'rxjs/operators/catchError';
 
 @Component({
   selector: 'td-readme-loader',

src/app/services/github.service.ts

@@ -3,7 +3,8 @@ import { HttpClient } from '@angular/common/http';
 import { Observable } from 'rxjs/Observable';
 import { Subscriber } from 'rxjs/Subscriber';
 
-import { map, catchError } from 'rxjs/operators';
+import { map } from 'rxjs/operators/map';
+import { catchError } from 'rxjs/operators/catchError';
 
 const GITHUB_URL: string = 'https://api.github.com';
 

src/app/services/internal-docs.service.ts

@@ -3,7 +3,8 @@ import { HttpClient } from '@angular/common/http';
 import { Observable } from 'rxjs/Observable';
 import { Subscriber } from 'rxjs/Subscriber';
 
-import { map, catchError } from 'rxjs/operators';
+import { map } from 'rxjs/operators/map';
+import { catchError } from 'rxjs/operators/catchError';
 
 export interface ITemplate {
   title: string;

src/platform/core/chips/chips.component.spec.ts

@@ -11,7 +11,7 @@ import {
 
 import { DELETE, BACKSPACE, ENTER, LEFT_ARROW, RIGHT_ARROW } from '@angular/cdk/keycodes';
 import { OverlayContainer } from '@angular/cdk/overlay';
-import { MatChip } from '@angular/material';
+import { MatChip } from '@angular/material/chips';
 import { By } from '@angular/platform-browser';
 import { CovalentChipsModule, TdChipsComponent } from './chips.module';
 

src/platform/core/chips/chips.component.ts

@@ -8,7 +8,10 @@ import { NG_VALUE_ACCESSOR, ControlValueAccessor, FormControl } from '@angular/f
 import { TemplatePortalDirective } from '@angular/cdk/portal';
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
 import { UP_ARROW, DOWN_ARROW, ESCAPE, LEFT_ARROW, RIGHT_ARROW, DELETE, BACKSPACE, ENTER, SPACE, TAB, HOME } from '@angular/cdk/keycodes';
-import { MatChip, MatInput, MatOption, MatAutocompleteTrigger } from '@angular/material';
+import { MatChip } from '@angular/material/chips';
+import { MatInput } from '@angular/material/input';
+import { MatOption } from '@angular/material/core';
+import { MatAutocompleteTrigger } from '@angular/material/autocomplete';
 
 import { Observable } from 'rxjs/Observable';
 import { Subscription } from 'rxjs/Subscription';

src/platform/core/chips/chips.module.ts

@@ -3,7 +3,10 @@ import { NgModule, ModuleWithProviders } from '@angular/core';
 import { ReactiveFormsModule } from '@angular/forms';
 import { CommonModule } from '@angular/common';
 
-import { MatInputModule, MatIconModule, MatAutocompleteModule, MatChipsModule } from '@angular/material';
+import { MatInputModule } from '@angular/material/input';
+import { MatIconModule } from '@angular/material/icon';
+import { MatAutocompleteModule } from '@angular/material/autocomplete';
+import { MatChipsModule } from '@angular/material/chips';
 
 import { TdChipsComponent, TdChipDirective, TdAutocompleteOptionDirective } from './chips.component';
 export { TdChipsComponent, TdChipDirective, TdAutocompleteOptionDirective } from './chips.component';

src/platform/core/data-table/data-table.component.spec.ts

@@ -14,7 +14,8 @@ import { TdDataTableComponent, ITdDataTableColumn } from './data-table.component
 import { TdDataTableService } from './services/data-table.service';
 import { CovalentDataTableModule } from './data-table.module';
 import { NgModule, DebugElement } from '@angular/core';
-import { MatCheckbox, MatPseudoCheckbox } from '@angular/material';
+import { MatCheckbox } from '@angular/material/checkbox';
+import { MatPseudoCheckbox } from '@angular/material/core';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 
 describe('Component: DataTable', () => {

src/platform/core/data-table/data-table.module.ts

@@ -1,6 +1,9 @@
 import { NgModule, Type } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { MatCheckboxModule, MatTooltipModule, MatIconModule, MatPseudoCheckboxModule } from '@angular/material';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { MatIconModule } from '@angular/material/icon';
+import { MatPseudoCheckboxModule } from '@angular/material/core';
 
 import { TdDataTableComponent } from './data-table.component';
 import { TdDataTableColumnComponent } from './data-table-column/data-table-column.component';

src/platform/core/dialogs/alert-dialog/alert-dialog.component.ts

@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { MatDialogRef } from '@angular/material';
+import { MatDialogRef } from '@angular/material/dialog';
 
 @Component({
   selector: 'td-alert-dialog',

src/platform/core/dialogs/confirm-dialog/confirm-dialog.component.ts

@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { MatDialogRef } from '@angular/material';
+import { MatDialogRef } from '@angular/material/dialog';
 
 @Component({
   selector: 'td-confirm-dialog',

src/platform/core/dialogs/dialogs.module.ts

@@ -3,7 +3,9 @@ import { NgModule, ModuleWithProviders } from '@angular/core';
 
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
-import { MatDialogModule, MatInputModule, MatButtonModule } from '@angular/material';
+import { MatDialogModule } from '@angular/material/dialog';
+import { MatInputModule } from '@angular/material/input';
+import { MatButtonModule } from '@angular/material/button';
 
 import { TdDialogComponent, TdDialogTitleDirective,
          TdDialogActionsDirective, TdDialogContentDirective } from './dialog.component';

src/platform/core/dialogs/prompt-dialog/prompt-dialog.component.ts

@@ -1,5 +1,5 @@
 import { Component, ViewChild, ElementRef, AfterViewInit } from '@angular/core';
-import { MatDialogRef } from '@angular/material';
+import { MatDialogRef } from '@angular/material/dialog';
 
 @Component({
   selector: 'td-prompt-dialog',

src/platform/core/dialogs/services/dialog.service.ts

@@ -1,5 +1,5 @@
 import { Injectable, ViewContainerRef, Provider, SkipSelf, Optional } from '@angular/core';
-import { MatDialog, MatDialogRef, MatDialogConfig } from '@angular/material';
+import { MatDialog, MatDialogRef, MatDialogConfig } from '@angular/material/dialog';
 import { ComponentType } from '@angular/cdk/portal';
 
 import { TdAlertDialogComponent } from '../alert-dialog/alert-dialog.component';