chore: switch examples to secondary entry-points (#15977)

Since the primary entry-point `@angular/material` is now deprecated
with V8, we should no longer use the deprecated entry-point in our
examples.

src/material-examples/BUILD.bazel

@@ -1,6 +1,6 @@
 package(default_visibility=["//visibility:public"])
 
-load("//:packages.bzl", "CDK_TARGETS", "CDK_EXPERIMENTAL_TARGETS", "MATERIAL_TARGETS", "MATERIAL_EXPERIMENTAL_TARGETS", "ROLLUP_GLOBALS")
+load("//:packages.bzl", "CDK_TARGETS", "CDK_EXPERIMENTAL_TARGETS", "MATERIAL_PACKAGES", "MATERIAL_EXPERIMENTAL_TARGETS", "ROLLUP_GLOBALS")
 load("//tools:defaults.bzl", "ng_module", "ng_package")
 load("//tools/highlight-files:index.bzl", "highlight_files")
 load("//tools/package-docs-content:index.bzl", "package_docs_content")
@@ -17,7 +17,7 @@ ng_module(
     "@npm//@angular/forms",
     "@npm//moment",
     "//src/material-moment-adapter",
-  ] + CDK_TARGETS + CDK_EXPERIMENTAL_TARGETS + MATERIAL_TARGETS + MATERIAL_EXPERIMENTAL_TARGETS,
+  ] + CDK_TARGETS + CDK_EXPERIMENTAL_TARGETS + MATERIAL_EXPERIMENTAL_TARGETS + ["//src/material/%s" % p for p in MATERIAL_PACKAGES],
   # Specify the tsconfig that is also used by Gulp. We need to explicitly use this tsconfig
   # because in order to import Moment with TypeScript, some specific options need to be set.
   tsconfig = ":tsconfig-build.json",

src/material-examples/bottom-sheet-overview/bottom-sheet-overview-example.ts

@@ -1,5 +1,5 @@
 import {Component} from '@angular/core';
-import {MatBottomSheet, MatBottomSheetRef} from '@angular/material';
+import {MatBottomSheet, MatBottomSheetRef} from '@angular/material/bottom-sheet';
 
 /**
  * @title Bottom Sheet Overview

src/material-examples/chips-autocomplete/chips-autocomplete-example.ts

@@ -1,7 +1,8 @@
 import {COMMA, ENTER} from '@angular/cdk/keycodes';
 import {Component, ElementRef, ViewChild} from '@angular/core';
 import {FormControl} from '@angular/forms';
-import {MatAutocompleteSelectedEvent, MatChipInputEvent, MatAutocomplete} from '@angular/material';
+import {MatAutocompleteSelectedEvent, MatAutocomplete} from '@angular/material/autocomplete';
+import {MatChipInputEvent} from '@angular/material/chips';
 import {Observable} from 'rxjs';
 import {map, startWith} from 'rxjs/operators';
 

src/material-examples/chips-input/chips-input-example.ts

@@ -1,6 +1,6 @@
 import {COMMA, ENTER} from '@angular/cdk/keycodes';
 import {Component} from '@angular/core';
-import {MatChipInputEvent} from '@angular/material';
+import {MatChipInputEvent} from '@angular/material/chips';
 
 export interface Fruit {
   name: string;

src/material-examples/datepicker-custom-header/datepicker-custom-header-example.ts

@@ -5,7 +5,7 @@ import {
   Inject,
   OnDestroy
 } from '@angular/core';
-import {MatCalendar} from '@angular/material';
+import {MatCalendar} from '@angular/material/datepicker';
 import {DateAdapter, MAT_DATE_FORMATS, MatDateFormats} from '@angular/material/core';
 import {Subject} from 'rxjs';
 import {takeUntil} from 'rxjs/operators';

src/material-examples/dialog-content/dialog-content-example.ts

@@ -1,5 +1,5 @@
 import {Component} from '@angular/core';
-import {MatDialog} from '@angular/material';
+import {MatDialog} from '@angular/material/dialog';
 
 /**
  * @title Dialog with header, scrollable content and actions

src/material-examples/dialog-data/dialog-data-example.ts

@@ -1,5 +1,5 @@
 import {Component, Inject} from '@angular/core';
-import {MatDialog, MAT_DIALOG_DATA} from '@angular/material';
+import {MatDialog, MAT_DIALOG_DATA} from '@angular/material/dialog';
 
 export interface DialogData {
   animal: 'panda' | 'unicorn' | 'lion';

src/material-examples/dialog-elements/dialog-elements-example.ts

@@ -1,5 +1,5 @@
 import {Component} from '@angular/core';
-import {MatDialog} from '@angular/material';
+import {MatDialog} from '@angular/material/dialog';
 
 /**
  * @title Dialog elements

src/material-examples/dialog-overview/dialog-overview-example.ts

@@ -1,5 +1,5 @@
 import {Component, Inject} from '@angular/core';
-import {MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material';
+import {MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material/dialog';
 
 export interface DialogData {
   animal: string;

src/material-examples/expansion-expand-collapse-all/expansion-expand-collapse-all-example.ts

@@ -1,5 +1,5 @@
 import {Component, ViewChild} from '@angular/core';
-import {MatAccordion} from '@angular/material';
+import {MatAccordion} from '@angular/material/expansion';
 
 /**
  * @title Accordion with expand/collapse all toggles

src/material-examples/form-field-custom-control/form-field-custom-control-example.ts

@@ -2,7 +2,7 @@ import {FocusMonitor} from '@angular/cdk/a11y';
 import {coerceBooleanProperty} from '@angular/cdk/coercion';
 import {Component, ElementRef, Input, OnDestroy, Optional, Self} from '@angular/core';
 import {FormBuilder, FormGroup, ControlValueAccessor, NgControl} from '@angular/forms';
-import {MatFormFieldControl} from '@angular/material';
+import {MatFormFieldControl} from '@angular/material/form-field';
 import {Subject} from 'rxjs';
 
 /** @title Form field with custom telephone number input control. */

src/material-examples/icon-svg/icon-svg-example.ts

@@ -1,6 +1,6 @@
 import {Component} from '@angular/core';
 import {DomSanitizer} from '@angular/platform-browser';
-import {MatIconRegistry} from '@angular/material';
+import {MatIconRegistry} from '@angular/material/icon';
 
 /**
  * @title SVG icons

src/material-examples/material-module.ts

@@ -1,24 +1,50 @@
-import {NgModule} from '@angular/core';
+import {CdkPopoverEditModule} from '@angular/cdk-experimental/popover-edit';
+import {A11yModule} from '@angular/cdk/a11y';
+import {DragDropModule} from '@angular/cdk/drag-drop';
+import {PortalModule} from '@angular/cdk/portal';
 
 import {ScrollingModule} from '@angular/cdk/scrolling';
-import {A11yModule} from '@angular/cdk/a11y';
-import {CdkPopoverEditModule} from '@angular/cdk-experimental/popover-edit';
+import {CdkStepperModule} from '@angular/cdk/stepper';
 import {CdkTableModule} from '@angular/cdk/table';
 import {CdkTreeModule} from '@angular/cdk/tree';
-import {DragDropModule} from '@angular/cdk/drag-drop';
-import {CdkStepperModule} from '@angular/cdk/stepper';
+import {NgModule} from '@angular/core';
 import {MatPopoverEditModule} from '@angular/material-experimental/popover-edit';
-import {PortalModule} from '@angular/cdk/portal';
-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, MatNativeDateModule
-} from '@angular/material';
+
+import {MatAutocompleteModule} from '@angular/material/autocomplete';
+import {MatBadgeModule} from '@angular/material/badge';
+import {MatBottomSheetModule} from '@angular/material/bottom-sheet';
+import {MatButtonModule} from '@angular/material/button';
+import {MatButtonToggleModule} from '@angular/material/button-toggle';
+import {MatCardModule} from '@angular/material/card';
+import {MatCheckboxModule} from '@angular/material/checkbox';
+import {MatChipsModule} from '@angular/material/chips';
+import {MatNativeDateModule, MatRippleModule} from '@angular/material/core';
+import {MatDatepickerModule} from '@angular/material/datepicker';
+import {MatDialogModule} from '@angular/material/dialog';
+import {MatDividerModule} from '@angular/material/divider';
+import {MatExpansionModule} from '@angular/material/expansion';
+import {MatFormFieldModule} from '@angular/material/form-field';
+import {MatGridListModule} from '@angular/material/grid-list';
+import {MatIconModule} from '@angular/material/icon';
+import {MatInputModule} from '@angular/material/input';
+import {MatListModule} from '@angular/material/list';
+import {MatMenuModule} from '@angular/material/menu';
+import {MatPaginatorModule} from '@angular/material/paginator';
+import {MatProgressBarModule} from '@angular/material/progress-bar';
+import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';
+import {MatRadioModule} from '@angular/material/radio';
+import {MatSelectModule} from '@angular/material/select';
+import {MatSidenavModule} from '@angular/material/sidenav';
+import {MatSlideToggleModule} from '@angular/material/slide-toggle';
+import {MatSliderModule} from '@angular/material/slider';
+import {MatSnackBarModule} from '@angular/material/snack-bar';
+import {MatSortModule} from '@angular/material/sort';
+import {MatStepperModule} from '@angular/material/stepper';
+import {MatTableModule} from '@angular/material/table';
+import {MatTabsModule} from '@angular/material/tabs';
+import {MatToolbarModule} from '@angular/material/toolbar';
+import {MatTooltipModule} from '@angular/material/tooltip';
+import {MatTreeModule} from '@angular/material/tree';
 
 @NgModule({
   imports: [

src/material-examples/paginator-configurable/paginator-configurable-example.ts

@@ -1,5 +1,5 @@
 import {Component} from '@angular/core';
-import {PageEvent} from '@angular/material';
+import {PageEvent} from '@angular/material/paginator';
 
 /**
  * @title Configurable paginator

src/material-examples/popover-edit-cell-span-mat-table/popover-edit-cell-span-mat-table-example.ts

@@ -2,7 +2,7 @@ import {Component} from '@angular/core';
 import {DataSource} from '@angular/cdk/collections';
 import {DomSanitizer} from '@angular/platform-browser';
 import {NgForm} from '@angular/forms';
-import {MatIconRegistry} from '@angular/material';
+import {MatIconRegistry} from '@angular/material/icon';
 import {BehaviorSubject, Observable} from 'rxjs';
 
 export interface Person {

src/material-examples/popover-edit-mat-table-flex/popover-edit-mat-table-flex-example.ts

@@ -2,7 +2,7 @@ import {Component} from '@angular/core';
 import {DataSource} from '@angular/cdk/collections';
 import {DomSanitizer} from '@angular/platform-browser';
 import {NgForm} from '@angular/forms';
-import {MatIconRegistry} from '@angular/material';
+import {MatIconRegistry} from '@angular/material/icon';
 import {BehaviorSubject, Observable} from 'rxjs';
 
 export interface PeriodicElement {

src/material-examples/popover-edit-mat-table/popover-edit-mat-table-example.ts

@@ -2,7 +2,7 @@ import {Component} from '@angular/core';
 import {DataSource} from '@angular/cdk/collections';
 import {DomSanitizer} from '@angular/platform-browser';
 import {NgForm} from '@angular/forms';
-import {MatIconRegistry} from '@angular/material';
+import {MatIconRegistry} from '@angular/material/icon';
 import {BehaviorSubject, Observable} from 'rxjs';
 
 export interface PeriodicElement {

src/material-examples/popover-edit-tab-out-mat-table/popover-edit-tab-out-mat-table-example.ts

@@ -2,7 +2,7 @@ import {Component} from '@angular/core';
 import {DataSource} from '@angular/cdk/collections';
 import {DomSanitizer} from '@angular/platform-browser';
 import {NgForm} from '@angular/forms';
-import {MatIconRegistry} from '@angular/material';
+import {MatIconRegistry} from '@angular/material/icon';
 import {BehaviorSubject, Observable} from 'rxjs';
 
 export interface PeriodicElement {

src/material-examples/snack-bar-component/snack-bar-component-example.ts

@@ -1,5 +1,5 @@
 import {Component} from '@angular/core';
-import {MatSnackBar} from '@angular/material';
+import {MatSnackBar} from '@angular/material/snack-bar';
 
 /**
  * @title Snack-bar with a custom component

src/material-examples/snack-bar-overview/snack-bar-overview-example.ts

@@ -1,5 +1,5 @@
 import {Component} from '@angular/core';
-import {MatSnackBar} from '@angular/material';
+import {MatSnackBar} from '@angular/material/snack-bar';
 
 /**
  * @title Basic snack-bar

src/material-examples/snack-bar-position/snack-bar-position-example.ts

@@ -3,7 +3,7 @@ import {
   MatSnackBar,
   MatSnackBarHorizontalPosition,
   MatSnackBarVerticalPosition,
-} from '@angular/material';
+} from '@angular/material/snack-bar';
 
 /**
  * @title Snack-bar with configurable position

src/material-examples/sort-overview/sort-overview-example.ts

@@ -1,5 +1,5 @@
 import {Component} from '@angular/core';
-import {Sort} from '@angular/material';
+import {Sort} from '@angular/material/sort';
 
 export interface Dessert {
   calories: number;

src/material-examples/table-filtering/table-filtering-example.ts

@@ -1,5 +1,5 @@
 import {Component} from '@angular/core';
-import {MatTableDataSource} from '@angular/material';
+import {MatTableDataSource} from '@angular/material/table';
 
 export interface PeriodicElement {
   name: string;

src/material-examples/table-http/table-http-example.ts

@@ -1,6 +1,7 @@
 import {HttpClient} from '@angular/common/http';
 import {Component, ViewChild, AfterViewInit} from '@angular/core';
-import {MatPaginator, MatSort} from '@angular/material';
+import {MatPaginator} from '@angular/material/paginator';
+import {MatSort} from '@angular/material/sort';
 import {merge, Observable, of as observableOf} from 'rxjs';
 import {catchError, map, startWith, switchMap} from 'rxjs/operators';
 

src/material-examples/table-overview/table-overview-example.ts

@@ -1,5 +1,7 @@
 import {Component, OnInit, ViewChild} from '@angular/core';
-import {MatPaginator, MatSort, MatTableDataSource} from '@angular/material';
+import {MatPaginator} from '@angular/material/paginator';
+import {MatSort} from '@angular/material/sort';
+import {MatTableDataSource} from '@angular/material/table';
 
 export interface UserData {
   id: string;

src/material-examples/table-pagination/table-pagination-example.ts

@@ -1,5 +1,6 @@
 import {Component, OnInit, ViewChild} from '@angular/core';
-import {MatPaginator, MatTableDataSource} from '@angular/material';
+import {MatPaginator} from '@angular/material/paginator';
+import {MatTableDataSource} from '@angular/material/table';
 
 /**
  * @title Table with pagination

src/material-examples/table-selection/table-selection-example.ts

@@ -1,6 +1,6 @@
 import {SelectionModel} from '@angular/cdk/collections';
 import {Component} from '@angular/core';
-import {MatTableDataSource} from '@angular/material';
+import {MatTableDataSource} from '@angular/material/table';
 
 export interface PeriodicElement {
   name: string;

src/material-examples/table-sorting/table-sorting-example.ts

@@ -1,5 +1,6 @@
 import {Component, OnInit, ViewChild} from '@angular/core';
-import {MatSort, MatTableDataSource} from '@angular/material';
+import {MatSort} from '@angular/material/sort';
+import {MatTableDataSource} from '@angular/material/table';
 
 export interface PeriodicElement {
   name: string;

src/material-examples/table-sticky-complex-flex/table-sticky-complex-flex-example.ts

@@ -1,5 +1,5 @@
 import {Component} from '@angular/core';
-import {MatButtonToggleGroup} from '@angular/material';
+import {MatButtonToggleGroup} from '@angular/material/button-toggle';
 
 /**
  * @title Flex-layout tables with toggle-able sticky headers, footers, and columns

src/material-examples/table-sticky-complex/table-sticky-complex-example.ts

@@ -1,5 +1,5 @@
 import {Component} from '@angular/core';
-import {MatButtonToggleGroup} from '@angular/material';
+import {MatButtonToggleGroup} from '@angular/material/button-toggle';
 
 /**
  * @title Tables with toggle-able sticky headers, footers, and columns

src/material-examples/table-text-column-advanced/table-text-column-advanced-example.ts

@@ -1,6 +1,6 @@
 import {Component} from '@angular/core';
 import {DecimalPipe} from '@angular/common';
-import {MatTableDataSource} from '@angular/material';
+import {MatTableDataSource} from '@angular/material/table';
 
 export interface PeriodicElement {
   name: string;

src/material-examples/table-wrapped/table-wrapped-example.ts

@@ -8,14 +8,14 @@ import {
   QueryList,
   ViewChild
 } from '@angular/core';
+import {MatSort} from '@angular/material/sort';
 import {
   MatColumnDef,
   MatHeaderRowDef,
   MatRowDef,
-  MatSort,
   MatTable,
   MatTableDataSource
-} from '@angular/material';
+} from '@angular/material/table';
 
 export interface PeriodicElement {
   name: string;

src/material-examples/tooltip-auto-hide/tooltip-auto-hide-example.ts

@@ -1,6 +1,6 @@
 import {Component} from '@angular/core';
 import {FormControl} from '@angular/forms';
-import {TooltipPosition} from '@angular/material';
+import {TooltipPosition} from '@angular/material/tooltip';
 
 /**
  * @title Tooltip that demonstrates auto-hiding when it clips out of its scrolling container.

src/material-examples/tooltip-modified-defaults/tooltip-modified-defaults-example.ts

@@ -1,5 +1,5 @@
 import {Component} from '@angular/core';
-import {MAT_TOOLTIP_DEFAULT_OPTIONS, MatTooltipDefaultOptions} from '@angular/material';
+import {MAT_TOOLTIP_DEFAULT_OPTIONS, MatTooltipDefaultOptions} from '@angular/material/tooltip';
 
 /** Custom options the configure the tooltip's default show/hide delays. */
 export const myCustomTooltipDefaults: MatTooltipDefaultOptions = {

src/material-examples/tooltip-position/tooltip-position-example.ts

@@ -1,6 +1,6 @@
 import {Component} from '@angular/core';
 import {FormControl} from '@angular/forms';
-import {TooltipPosition} from '@angular/material';
+import {TooltipPosition} from '@angular/material/tooltip';
 
 /**
  * @title Tooltip with a custom position

src/material-examples/tsconfig-build.json

@@ -27,11 +27,10 @@
     "baseUrl": ".",
     "paths": {
       "@angular/material/*": ["../../dist/packages/material/*"],
-      "@angular/material": ["../../dist/packages/material"],
       "@angular/material-experimental/*": ["../../dist/packages/material-experimental/*"],
       "@angular/material-moment-adapter": ["../../dist/packages/material-moment-adapter"],
       "@angular/cdk/*": ["../../dist/packages/cdk/*"],
-      "@angular/cdk-experimental/*": ["../../dist/packages/cdk-experimental/*"],
+      "@angular/cdk-experimental/*": ["../../dist/packages/cdk-experimental/*"]
     }
   },
   "files": [

src/material-examples/tsconfig.json

@@ -10,7 +10,6 @@
       "@angular/cdk/*": ["../cdk/*"],
       "@angular/cdk-experimental/*": ["../cdk-experimental/*"],
       "@angular/material/*": ["../material/*"],
-      "@angular/material": ["../material/public-api.ts"],
       "@angular/material-experimental/*": ["../material-experimental/*"],
       "@angular/material-moment-adapter": ["../material-moment-adapter/public-api.ts"]
     }