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];
   }