build: fix chips drag-drop example not working and improve example-module generation (#20003)

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

Loading the chips-drag-drop example in the docs site is currently not
possible, as the example files fail to load. This is because the example
id does not match up with the directory that the example is stored within.

This highlights an issue as the docs site assumes a certain folder
structure. This is not ideal and an implementation detail specific to
the Angular Components repository. The docs site should not need to
make any assumptions about where code lives, but instead should just
retrieve this information through the example information. That way we
are free to change layout/file conventions in the components repository
without having to worry about it breaking the docs site.

This is implemented as part of this commit. Also a few sanity checks
that enforce consistency (for improved code health) have been added. The
new concept for examples also allows us to remove empty CSS files for
examples without CSS.

* chore: remove empty CSS files from examples

We now can have examples without CSS files. This was previously not
possible and the docs site just failed loading as it assumed a CSS file
per example. We remove those empty stylesheets as they are superflous to
examples and rather can confuse/distract the examples in the docs.

Author: devversion

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

@@ -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/platform/cdk-platform-overview/cdk-platform-overview-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/cdk/stepper/cdk-linear-stepper-with-form/cdk-linear-stepper-with-form-example.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/example-data.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/column-resize/default-enabled-flex/default-enabled-column-resize-flex-example-module.ts renamed to src/components-examples/material-experimental/column-resize/default-enabled-column-resize-flex/default-enabled-column-resize-flex-example-module.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/column-resize/default-enabled-flex/default-enabled-column-resize-flex-example.css renamed to src/components-examples/material-experimental/column-resize/default-enabled-column-resize-flex/default-enabled-column-resize-flex-example.css

@@ -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-experimental/column-resize/default-enabled-flex/default-enabled-column-resize-flex-example.html renamed to src/components-examples/material-experimental/column-resize/default-enabled-column-resize-flex/default-enabled-column-resize-flex-example.html

@@ -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-experimental/column-resize/default-enabled-flex/default-enabled-column-resize-flex-example.ts renamed to src/components-examples/material-experimental/column-resize/default-enabled-column-resize-flex/default-enabled-column-resize-flex-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-experimental/column-resize/default-enabled/default-enabled-column-resize-example-module.ts renamed to src/components-examples/material-experimental/column-resize/default-enabled-column-resize/default-enabled-column-resize-example-module.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-experimental/column-resize/default-enabled/default-enabled-column-resize-example.css renamed to src/components-examples/material-experimental/column-resize/default-enabled-column-resize/default-enabled-column-resize-example.css

@@ -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-experimental/column-resize/default-enabled/default-enabled-column-resize-example.html renamed to src/components-examples/material-experimental/column-resize/default-enabled-column-resize/default-enabled-column-resize-example.html

@@ -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-experimental/column-resize/default-enabled/default-enabled-column-resize-example.ts renamed to src/components-examples/material-experimental/column-resize/default-enabled-column-resize/default-enabled-column-resize-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-experimental/column-resize/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-experimental/column-resize/opt-in/opt-in-column-resize-example-module.ts renamed to src/components-examples/material-experimental/column-resize/opt-in-column-resize/opt-in-column-resize-example-module.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-experimental/column-resize/opt-in/opt-in-column-resize-example.css renamed to src/components-examples/material-experimental/column-resize/opt-in-column-resize/opt-in-column-resize-example.css

@@ -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-experimental/column-resize/opt-in/opt-in-column-resize-example.html renamed to src/components-examples/material-experimental/column-resize/opt-in-column-resize/opt-in-column-resize-example.html

@@ -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-experimental/column-resize/opt-in/opt-in-column-resize-example.ts renamed to src/components-examples/material-experimental/column-resize/opt-in-column-resize/opt-in-column-resize-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-experimental/mdc-form-field/index.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-experimental/mdc-form-field/mdc-form-field-custom-control/form-field-custom-control-example.css

@@ -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-experimental/mdc-form-field/mdc-form-field-custom-control/form-field-custom-control-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/autocomplete/autocomplete-optgroup/autocomplete-optgroup-example.css

@@ -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/autocomplete/autocomplete-optgroup/autocomplete-optgroup-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/badge/badge-overview/badge-overview-example.css

@@ -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/badge/badge-overview/badge-overview-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/bottom-sheet/bottom-sheet-overview/bottom-sheet-overview-example.css

@@ -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/bottom-sheet/bottom-sheet-overview/bottom-sheet-overview-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/button-toggle/button-toggle-overview/button-toggle-overview-example.css

@@ -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/button-toggle/button-toggle-overview/button-toggle-overview-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/card/card-overview/card-overview-example.css

@@ -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/card/card-overview/card-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/chips/chips-drag-and-drop/chips-drag-drop-example.css renamed to src/components-examples/material/chips/chips-drag-drop/chips-drag-drop-example.css

@@ -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/chips/chips-drag-and-drop/chips-drag-drop-example.html renamed to src/components-examples/material/chips/chips-drag-drop/chips-drag-drop-example.html

@@ -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/chips/chips-drag-and-drop/chips-drag-drop-example.ts renamed to src/components-examples/material/chips/chips-drag-drop/chips-drag-drop-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/chips/chips-overview/chips-overview-example.css

@@ -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[] = [