build: fix chips drag-drop example not working and improve example-module generation

src/components-examples/cdk/platform/cdk-platform-overview/cdk-platform-overview-example.ts

@@ -12,7 +12,6 @@ import {
 @Component({
   selector: 'cdk-platform-overview-example',
   templateUrl: 'cdk-platform-overview-example.html',
-  styleUrls: ['cdk-platform-overview-example.css'],
 })
 export class CdkPlatformOverviewExample {
   supportedInputTypes = Array.from(getSupportedInputTypes()).join(', ');

src/components-examples/cdk/stepper/cdk-linear-stepper-with-form/cdk-linear-stepper-with-form-example.ts

@@ -4,7 +4,7 @@ import {FormBuilder, FormGroup, Validators} from '@angular/forms';
 
 /** @title A custom CDK linear stepper with forms */
 @Component({
-  selector: 'cdk-linear-stepper-with-form',
+  selector: 'cdk-linear-stepper-with-form-example',
   templateUrl: './cdk-linear-stepper-with-form-example.html',
   styleUrls: ['./cdk-linear-stepper-with-form-example.css']
 })

src/components-examples/example-data.ts

@@ -27,15 +27,13 @@ export class ExampleData {
       return;
     }
 
-    const {componentName, additionalFiles, additionalComponents, title} =
+    const {componentName, files, selector, primaryFile, additionalComponents, title} =
         EXAMPLE_COMPONENTS[example];
     const exampleName = example.replace(/(?:^\w|\b\w)/g, letter => letter.toUpperCase());
 
-    // TODO(tinayuangao): Do not hard-code extensions
-    this.exampleFiles = ['html', 'ts', 'css'].map(extension => `${example}-example.${extension}`);
-    this.selectorName = this.indexFilename = `${example}-example`;
-
-    this.exampleFiles.push(...additionalFiles);
+    this.exampleFiles = files;
+    this.selectorName = selector;
+    this.indexFilename = primaryFile;
     this.description = title || exampleName.replace(/[\-]+/g, ' ') + ' Example';
     this.componentNames = [componentName, ...additionalComponents];
   }

src/components-examples/material-experimental/column-resize/index.ts

@@ -1,32 +1,34 @@
 import {NgModule} from '@angular/core';
-import {OptInColumnResizeExampleModule} from './opt-in/opt-in-column-resize-example-module';
 import {
-  DefaultEnabledColumnResizeExampleModule,
-} from './default-enabled/default-enabled-column-resize-example-module';
+  DefaultEnabledColumnResizeFlexExampleModule
+} from './default-enabled-column-resize-flex/default-enabled-column-resize-flex-example-module';
+import {
+  DefaultEnabledColumnResizeExampleModule
+} from './default-enabled-column-resize/default-enabled-column-resize-example-module';
 import {
-  DefaultEnabledColumnResizeFlexExampleModule,
-} from './default-enabled-flex/default-enabled-column-resize-flex-example-module';
+  OptInColumnResizeExampleModule
+} from './opt-in-column-resize/opt-in-column-resize-example-module';
 
 export {
   DefaultEnabledColumnResizeExample
-} from './default-enabled/default-enabled-column-resize-example';
+} from './default-enabled-column-resize/default-enabled-column-resize-example';
 export {
   DefaultEnabledColumnResizeExampleModule
-} from './default-enabled/default-enabled-column-resize-example-module';
+} from './default-enabled-column-resize/default-enabled-column-resize-example-module';
 
 export {
   DefaultEnabledColumnResizeFlexExample
-} from './default-enabled-flex/default-enabled-column-resize-flex-example';
+} from './default-enabled-column-resize-flex/default-enabled-column-resize-flex-example';
 export {
   DefaultEnabledColumnResizeFlexExampleModule
-} from './default-enabled-flex/default-enabled-column-resize-flex-example-module';
+} from './default-enabled-column-resize-flex/default-enabled-column-resize-flex-example-module';
 
 export {
   OptInColumnResizeExample
-} from './opt-in/opt-in-column-resize-example';
+} from './opt-in-column-resize/opt-in-column-resize-example';
 export {
   OptInColumnResizeExampleModule
-} from './opt-in/opt-in-column-resize-example-module';
+} from './opt-in-column-resize/opt-in-column-resize-example-module';
 
 
 @NgModule({

src/components-examples/material-experimental/mdc-form-field/index.ts

@@ -4,17 +4,17 @@ import {ReactiveFormsModule} from '@angular/forms';
 import {MatFormFieldModule} from '@angular/material-experimental/mdc-form-field';
 import {MatIconModule} from '@angular/material/icon';
 import {
-  FormFieldCustomControlExample,
+  MdcFormFieldCustomControlExample,
   MyTelInput
 } from './mdc-form-field-custom-control/form-field-custom-control-example';
 
 export {
-  FormFieldCustomControlExample,
+  MdcFormFieldCustomControlExample,
   MyTelInput,
 };
 
 const EXAMPLES = [
-  FormFieldCustomControlExample,
+  MdcFormFieldCustomControlExample,
 ];
 
 @NgModule({

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

@@ -7,11 +7,10 @@ import {Subject} from 'rxjs';
 
 /** @title Form field with custom telephone number input control. */
 @Component({
-  selector: 'form-field-custom-control-example',
+  selector: 'mdc-form-field-custom-control-example',
   templateUrl: 'form-field-custom-control-example.html',
-  styleUrls: ['form-field-custom-control-example.css'],
 })
-export class FormFieldCustomControlExample {}
+export class MdcFormFieldCustomControlExample {}
 
 /** Data structure for holding telephone number. */
 export class MyTel {

src/components-examples/material/autocomplete/autocomplete-optgroup/autocomplete-optgroup-example.ts

@@ -20,7 +20,6 @@ export const _filter = (opt: string[], value: string): string[] => {
 @Component({
   selector: 'autocomplete-optgroup-example',
   templateUrl: './autocomplete-optgroup-example.html',
-  styleUrls: ['./autocomplete-optgroup-example.css'],
 })
 
 export class AutocompleteOptgroupExample implements OnInit {

src/components-examples/material/badge/badge-overview/badge-overview-example.ts

@@ -6,7 +6,6 @@ import {Component} from '@angular/core';
 @Component({
   selector: 'badge-overview-example',
   templateUrl: 'badge-overview-example.html',
-  styleUrls: ['badge-overview-example.css'],
 })
 export class BadgeOverviewExample {
   hidden = false;

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

@@ -7,7 +7,6 @@ import {MatBottomSheet, MatBottomSheetRef} from '@angular/material/bottom-sheet'
 @Component({
   selector: 'bottom-sheet-overview-example',
   templateUrl: 'bottom-sheet-overview-example.html',
-  styleUrls: ['bottom-sheet-overview-example.css'],
 })
 export class BottomSheetOverviewExample {
   constructor(private _bottomSheet: MatBottomSheet) {}

src/components-examples/material/button-toggle/button-toggle-overview/button-toggle-overview-example.ts

@@ -6,6 +6,5 @@ import {Component} from '@angular/core';
 @Component({
   selector: 'button-toggle-overview-example',
   templateUrl: 'button-toggle-overview-example.html',
-  styleUrls: ['button-toggle-overview-example.css'],
 })
 export class ButtonToggleOverviewExample {}

src/components-examples/material/card/card-overview/card-overview-example.ts

@@ -6,6 +6,5 @@ import {Component} from '@angular/core';
 @Component({
   selector: 'card-overview-example',
   templateUrl: 'card-overview-example.html',
-  styleUrls: ['card-overview-example.css'],
 })
 export class CardOverviewExample {}

src/components-examples/material/chips/chips-overview/chips-overview-example.ts

@@ -6,6 +6,5 @@ import {Component} from '@angular/core';
 @Component({
   selector: 'chips-overview-example',
   templateUrl: 'chips-overview-example.html',
-  styleUrls: ['chips-overview-example.css'],
 })
 export class ChipsOverviewExample {}

src/components-examples/material/chips/index.ts

@@ -7,7 +7,7 @@ import {MatChipsModule} from '@angular/material/chips';
 import {MatFormFieldModule} from '@angular/material/form-field';
 import {MatIconModule} from '@angular/material/icon';
 import {ChipsAutocompleteExample} from './chips-autocomplete/chips-autocomplete-example';
-import {ChipsDragDropExample} from './chips-drag-and-drop/chips-drag-drop-example';
+import {ChipsDragDropExample} from './chips-drag-drop/chips-drag-drop-example';
 import {ChipsInputExample} from './chips-input/chips-input-example';
 import {ChipsOverviewExample} from './chips-overview/chips-overview-example';
 import {ChipsStackedExample} from './chips-stacked/chips-stacked-example';

src/components-examples/material/datepicker/date-range-picker-forms/date-range-picker-forms-example.ts

@@ -5,7 +5,6 @@ import {FormGroup, FormControl} from '@angular/forms';
 @Component({
   selector: 'date-range-picker-forms-example',
   templateUrl: 'date-range-picker-forms-example.html',
-  styleUrls: ['date-range-picker-forms-example.css'],
 })
 export class DateRangePickerFormsExample {
   range = new FormGroup({

src/components-examples/material/datepicker/date-range-picker-overview/date-range-picker-overview-example.ts

@@ -4,6 +4,5 @@ import {Component} from '@angular/core';
 @Component({
   selector: 'date-range-picker-overview-example',
   templateUrl: 'date-range-picker-overview-example.html',
-  styleUrls: ['date-range-picker-overview-example.css'],
 })
 export class DateRangePickerOverviewExample {}

src/components-examples/material/datepicker/date-range-picker-selection-strategy/date-range-picker-selection-strategy-example.ts

@@ -33,7 +33,6 @@ export class FiveDayRangeSelectionStrategy<D> implements MatDateRangeSelectionSt
 @Component({
   selector: 'date-range-picker-selection-strategy-example',
   templateUrl: 'date-range-picker-selection-strategy-example.html',
-  styleUrls: ['date-range-picker-selection-strategy-example.css'],
   providers: [{
     provide: MAT_DATE_RANGE_SELECTION_STRATEGY,
     useClass: FiveDayRangeSelectionStrategy

src/components-examples/material/datepicker/datepicker-custom-icon/datepicker-custom-icon-example.ts

@@ -4,6 +4,5 @@ import {Component} from '@angular/core';
 @Component({
   selector: 'datepicker-custom-icon-example',
   templateUrl: 'datepicker-custom-icon-example.html',
-  styleUrls: ['datepicker-custom-icon-example.css'],
 })
 export class DatepickerCustomIconExample {}

src/components-examples/material/datepicker/datepicker-disabled/datepicker-disabled-example.ts

@@ -4,6 +4,5 @@ import {Component} from '@angular/core';
 @Component({
   selector: 'datepicker-disabled-example',
   templateUrl: 'datepicker-disabled-example.html',
-  styleUrls: ['datepicker-disabled-example.css'],
 })
 export class DatepickerDisabledExample {}

src/components-examples/material/datepicker/datepicker-filter/datepicker-filter-example.ts

@@ -4,7 +4,6 @@ import {Component} from '@angular/core';
 @Component({
   selector: 'datepicker-filter-example',
   templateUrl: 'datepicker-filter-example.html',
-  styleUrls: ['datepicker-filter-example.css'],
 })
 export class DatepickerFilterExample {
   myFilter = (d: Date | null): boolean => {

src/components-examples/material/datepicker/datepicker-formats/datepicker-formats-example.ts

@@ -31,7 +31,6 @@ export const MY_FORMATS = {
 @Component({
   selector: 'datepicker-formats-example',
   templateUrl: 'datepicker-formats-example.html',
-  styleUrls: ['datepicker-formats-example.css'],
   providers: [
     // `MomentDateAdapter` can be automatically provided by importing `MomentDateModule` in your
     // application's root module. We provide it at the component level here, due to limitations of

src/components-examples/material/datepicker/datepicker-min-max/datepicker-min-max-example.ts

@@ -4,7 +4,6 @@ import {Component} from '@angular/core';
 @Component({
   selector: 'datepicker-min-max-example',
   templateUrl: 'datepicker-min-max-example.html',
-  styleUrls: ['datepicker-min-max-example.css'],
 })
 export class DatepickerMinMaxExample {
   minDate: Date;

src/components-examples/material/datepicker/datepicker-moment/datepicker-moment-example.ts

@@ -17,7 +17,6 @@ const moment = _rollupMoment || _moment;
 @Component({
   selector: 'datepicker-moment-example',
   templateUrl: 'datepicker-moment-example.html',
-  styleUrls: ['datepicker-moment-example.css'],
   providers: [
     // `MomentDateAdapter` and `MAT_MOMENT_DATE_FORMATS` can be automatically provided by importing
     // `MatMomentDateModule` in your applications root module. We provide it at the component level

src/components-examples/material/datepicker/datepicker-overview/datepicker-overview-example.ts

@@ -4,6 +4,5 @@ import {Component} from '@angular/core';
 @Component({
   selector: 'datepicker-overview-example',
   templateUrl: 'datepicker-overview-example.html',
-  styleUrls: ['datepicker-overview-example.css'],
 })
 export class DatepickerOverviewExample {}

src/components-examples/material/datepicker/datepicker-start-view/datepicker-start-view-example.ts

@@ -4,7 +4,6 @@ import {Component} from '@angular/core';
 @Component({
   selector: 'datepicker-start-view-example',
   templateUrl: 'datepicker-start-view-example.html',
-  styleUrls: ['datepicker-start-view-example.css'],
 })
 export class DatepickerStartViewExample {
   startDate = new Date(1990, 0, 1);

src/components-examples/material/datepicker/datepicker-touch/datepicker-touch-example.ts

@@ -4,6 +4,5 @@ import {Component} from '@angular/core';
 @Component({
   selector: 'datepicker-touch-example',
   templateUrl: 'datepicker-touch-example.html',
-  styleUrls: ['datepicker-touch-example.css'],
 })
 export class DatepickerTouchExample {}

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

@@ -7,7 +7,6 @@ import {MatDialog} from '@angular/material/dialog';
 @Component({
   selector: 'dialog-content-example',
   templateUrl: 'dialog-content-example.html',
-  styleUrls: ['dialog-content-example.css'],
 })
 export class DialogContentExample {
   constructor(public dialog: MatDialog) {}

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

@@ -11,7 +11,6 @@ export interface DialogData {
 @Component({
   selector: 'dialog-data-example',
   templateUrl: 'dialog-data-example.html',
-  styleUrls: ['dialog-data-example.css'],
 })
 export class DialogDataExample {
   constructor(public dialog: MatDialog) {}

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

@@ -7,7 +7,6 @@ import {MatDialog} from '@angular/material/dialog';
 @Component({
   selector: 'dialog-elements-example',
   templateUrl: 'dialog-elements-example.html',
-  styleUrls: ['dialog-elements-example.css'],
 })
 export class DialogElementsExample {
   constructor(public dialog: MatDialog) {}

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

@@ -12,7 +12,6 @@ export interface DialogData {
 @Component({
   selector: 'dialog-overview-example',
   templateUrl: 'dialog-overview-example.html',
-  styleUrls: ['dialog-overview-example.css'],
 })
 export class DialogOverviewExample {
 

src/components-examples/material/divider/divider-overview/divider-overview-example.ts

@@ -6,6 +6,5 @@ import {Component} from '@angular/core';
 @Component({
   selector: 'divider-overview-example',
   templateUrl: 'divider-overview-example.html',
-  styleUrls: ['divider-overview-example.css'],
 })
 export class DividerOverviewExample {}

src/components-examples/material/form-field/form-field-appearance/form-field-appearance-example.ts

@@ -4,6 +4,5 @@ import {Component} from '@angular/core';
 @Component({
   selector: 'form-field-appearance-example',
   templateUrl: 'form-field-appearance-example.html',
-  styleUrls: ['form-field-appearance-example.css'],
 })
 export class FormFieldAppearanceExample {}

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

@@ -25,7 +25,6 @@ import {Subject} from 'rxjs';
 @Component({
   selector: 'form-field-custom-control-example',
   templateUrl: 'form-field-custom-control-example.html',
-  styleUrls: ['form-field-custom-control-example.css']
 })
 export class FormFieldCustomControlExample {
   form: FormGroup = new FormGroup({

src/components-examples/material/form-field/form-field-overview/form-field-overview-example.ts

@@ -4,6 +4,5 @@ import {Component} from '@angular/core';
 @Component({
   selector: 'form-field-overview-example',
   templateUrl: 'form-field-overview-example.html',
-  styleUrls: ['form-field-overview-example.css'],
 })
 export class FormFieldOverviewExample {}

src/components-examples/material/grid-list/grid-list-dynamic/grid-list-dynamic-example.ts

@@ -13,7 +13,6 @@ export interface Tile {
 @Component({
   selector: 'grid-list-dynamic-example',
   templateUrl: 'grid-list-dynamic-example.html',
-  styleUrls: ['grid-list-dynamic-example.css'],
 })
 export class GridListDynamicExample {
   tiles: Tile[] = [