docs: fix embedded preview (#59737)

update the embeddable examples glob to captrue the drag & drop examples,
and fix the current build issues in the drag & drop examples

PR Close #59737

adev/src/content/examples/BUILD.bazel

@@ -9,7 +9,7 @@ filegroup(
 filegroup(
     name = "embeddable",
     srcs = glob(
-        ["*/src/app/**"],
+        ["**/app/**"],
         exclude = [
             "testing/**",  # Can't embed test code
             "i18n/**",  # @angular/localize/init not available in docs app

adev/src/content/examples/drag-drop/src/axis-lock/app/app.component.ts

@@ -1,13 +1,13 @@
-import {Component} from '@angular/core';
 import {CdkDrag} from '@angular/cdk/drag-drop';
+import {Component} from '@angular/core';
 
 /**
  * @title Drag&Drop position locking
  */
 @Component({
   selector: 'cdk-drag-drop-axis-lock-example',
-  templateUrl: 'cdk-drag-drop-axis-lock-example.html',
-  styleUrl: 'cdk-drag-drop-axis-lock-example.css',
+  templateUrl: 'app.component.html',
+  styleUrl: 'app.component.css',
   standalone: true,
   imports: [CdkDrag],
 })

adev/src/content/examples/drag-drop/src/boundary/app/app.component.ts

@@ -1,13 +1,13 @@
-import {Component} from '@angular/core';
 import {CdkDrag} from '@angular/cdk/drag-drop';
+import {Component} from '@angular/core';
 
 /**
  * @title Drag&Drop boundary
  */
 @Component({
   selector: 'cdk-drag-drop-boundary-example',
-  templateUrl: 'cdk-drag-drop-boundary-example.html',
-  styleUrl: 'cdk-drag-drop-boundary-example.css',
+  templateUrl: 'app.component.html',
+  styleUrl: 'app.component.css',
   standalone: true,
   imports: [CdkDrag],
 })

adev/src/content/examples/drag-drop/src/connected-sorting-group/app/app.component.ts

@@ -1,20 +1,20 @@
-import {Component} from '@angular/core';
 import {
-  CdkDragDrop,
   CdkDrag,
+  CdkDragDrop,
   CdkDropList,
   CdkDropListGroup,
   moveItemInArray,
   transferArrayItem,
 } from '@angular/cdk/drag-drop';
+import {Component} from '@angular/core';
 
 /**
  * @title Drag&Drop connected sorting group
  */
 @Component({
   selector: 'cdk-drag-drop-connected-sorting-group-example',
-  templateUrl: 'cdk-drag-drop-connected-sorting-group-example.html',
-  styleUrl: 'cdk-drag-drop-connected-sorting-group-example.css',
+  templateUrl: 'app.component.html',
+  styleUrl: 'app.component.css',
   standalone: true,
   imports: [CdkDropListGroup, CdkDropList, CdkDrag],
 })

adev/src/content/examples/drag-drop/src/connected-sorting/app/app.component.ts

@@ -1,19 +1,19 @@
-import {Component} from '@angular/core';
 import {
+  CdkDrag,
   CdkDragDrop,
+  CdkDropList,
   moveItemInArray,
   transferArrayItem,
-  CdkDrag,
-  CdkDropList,
 } from '@angular/cdk/drag-drop';
+import {Component} from '@angular/core';
 
 /**
  * @title Drag&Drop connected sorting
  */
 @Component({
   selector: 'cdk-drag-drop-connected-sorting-example',
-  templateUrl: 'cdk-drag-drop-connected-sorting-example.html',
-  styleUrl: 'cdk-drag-drop-connected-sorting-example.css',
+  templateUrl: 'app.component.html',
+  styleUrl: 'app.component.css',
   standalone: true,
   imports: [CdkDropList, CdkDrag],
 })

adev/src/content/examples/drag-drop/src/custom-handle/app/app.component.ts

@@ -1,13 +1,13 @@
-import {Component} from '@angular/core';
 import {CdkDrag, CdkDragHandle} from '@angular/cdk/drag-drop';
+import {Component} from '@angular/core';
 
 /**
  * @title Drag&Drop with a handle
  */
 @Component({
   selector: 'cdk-drag-drop-handle-example',
-  templateUrl: 'cdk-drag-drop-handle-example.html',
-  styleUrl: 'cdk-drag-drop-handle-example.css',
+  templateUrl: 'app.component.html',
+  styleUrl: 'app.component.css',
   standalone: true,
   imports: [CdkDrag, CdkDragHandle],
 })

adev/src/content/examples/drag-drop/src/custom-placeholder/app/app.component.ts

@@ -1,4 +1,3 @@
-import {Component} from '@angular/core';
 import {
   CdkDrag,
   CdkDragDrop,
@@ -6,14 +5,15 @@ import {
   CdkDropList,
   moveItemInArray,
 } from '@angular/cdk/drag-drop';
+import {Component} from '@angular/core';
 
 /**
  * @title Drag&Drop custom placeholder
  */
 @Component({
   selector: 'cdk-drag-drop-custom-placeholder-example',
-  templateUrl: 'cdk-drag-drop-custom-placeholder-example.html',
-  styleUrl: 'cdk-drag-drop-custom-placeholder-example.css',
+  templateUrl: 'app.component.html',
+  styleUrl: 'app.component.css',
   standalone: true,
   imports: [CdkDropList, CdkDrag, CdkDragPlaceholder],
 })

adev/src/content/examples/drag-drop/src/custom-preview/app/app.component.ts

@@ -1,19 +1,19 @@
-import {Component} from '@angular/core';
 import {
-  CdkDragDrop,
-  CdkDropList,
-  CdkDragPreview,
   CdkDrag,
+  CdkDragDrop,
+  CdkDragPreview,
+  CdkDropList,
   moveItemInArray,
 } from '@angular/cdk/drag-drop';
+import {Component} from '@angular/core';
 
 /**
  * @title Drag&Drop custom preview
  */
 @Component({
   selector: 'cdk-drag-drop-custom-preview-example',
-  templateUrl: 'cdk-drag-drop-custom-preview-example.html',
-  styleUrl: 'cdk-drag-drop-custom-preview-example.css',
+  templateUrl: 'app.component.html',
+  styleUrl: 'app.component.css',
   standalone: true,
   imports: [CdkDropList, CdkDrag, CdkDragPreview],
 })

adev/src/content/examples/drag-drop/src/delay-drag/app/app.component.ts

@@ -1,13 +1,13 @@
-import {Component} from '@angular/core';
 import {CdkDrag} from '@angular/cdk/drag-drop';
+import {Component} from '@angular/core';
 
 /**
  * @title Delay dragging
  */
 @Component({
   selector: 'cdk-drag-drop-delay-example',
-  templateUrl: 'cdk-drag-drop-delay-example.html',
-  styleUrl: 'cdk-drag-drop-delay-example.css',
+  templateUrl: 'app.component.html',
+  styleUrl: 'app.component.css',
   standalone: true,
   imports: [CdkDrag],
 })

adev/src/content/examples/drag-drop/src/disable-drag/app/app.component.ts

@@ -1,13 +1,13 @@
+import {CdkDrag, CdkDragDrop, CdkDropList, moveItemInArray} from '@angular/cdk/drag-drop';
 import {Component} from '@angular/core';
-import {CdkDragDrop, CdkDrag, CdkDropList, moveItemInArray} from '@angular/cdk/drag-drop';
 
 /**
  * @title Drag&Drop disabled
  */
 @Component({
   selector: 'cdk-drag-drop-disabled-example',
-  templateUrl: 'cdk-drag-drop-disabled-example.html',
-  styleUrl: 'cdk-drag-drop-disabled-example.css',
+  templateUrl: 'app.component.html',
+  styleUrl: 'app.component.css',
   standalone: true,
   imports: [CdkDropList, CdkDrag],
 })

adev/src/content/examples/drag-drop/src/disable-sorting/app/app.component.ts

@@ -1,4 +1,3 @@
-import {Component} from '@angular/core';
 import {
   CdkDrag,
   CdkDragDrop,
@@ -7,14 +6,15 @@ import {
   moveItemInArray,
   transferArrayItem,
 } from '@angular/cdk/drag-drop';
+import {Component} from '@angular/core';
 
 /**
  * @title Drag&Drop disabled sorting
  */
 @Component({
   selector: 'cdk-drag-drop-disabled-sorting-example',
-  templateUrl: 'cdk-drag-drop-disabled-sorting-example.html',
-  styleUrl: 'cdk-drag-drop-disabled-sorting-example.css',
+  templateUrl: 'app.component.html',
+  styleUrl: 'app.component.css',
   standalone: true,
   imports: [CdkDropListGroup, CdkDropList, CdkDrag],
 })

adev/src/content/examples/drag-drop/src/enter-predicate/app/app.component.ts

@@ -1,19 +1,19 @@
-import {Component} from '@angular/core';
 import {
+  CdkDrag,
   CdkDragDrop,
+  CdkDropList,
   moveItemInArray,
   transferArrayItem,
-  CdkDrag,
-  CdkDropList,
 } from '@angular/cdk/drag-drop';
+import {Component} from '@angular/core';
 
 /**
  * @title Drag&Drop enter predicate
  */
 @Component({
   selector: 'cdk-drag-drop-enter-predicate-example',
-  templateUrl: 'cdk-drag-drop-enter-predicate-example.html',
-  styleUrl: 'cdk-drag-drop-enter-predicate-example.css',
+  templateUrl: 'app.component.html',
+  styleUrl: 'app.component.css',
   standalone: true,
   imports: [CdkDropList, CdkDrag],
 })

adev/src/content/examples/drag-drop/src/free-drag-position/app/app.component.ts

@@ -1,13 +1,13 @@
-import {Component} from '@angular/core';
 import {CdkDrag} from '@angular/cdk/drag-drop';
+import {Component} from '@angular/core';
 
 /**
  * @title Programmatically setting the free drag position
  */
 @Component({
   selector: 'cdk-drag-drop-free-drag-position-example',
-  templateUrl: 'cdk-drag-drop-free-drag-position-example.html',
-  styleUrl: 'cdk-drag-drop-free-drag-position-example.css',
+  templateUrl: 'app.component.html',
+  styleUrl: 'app.component.css',
   standalone: true,
   imports: [CdkDrag],
 })

adev/src/content/examples/drag-drop/src/horizontal-sorting/app/app.component.ts

@@ -1,13 +1,13 @@
+import {CdkDrag, CdkDragDrop, CdkDropList, moveItemInArray} from '@angular/cdk/drag-drop';
 import {Component} from '@angular/core';
-import {CdkDragDrop, CdkDrag, CdkDropList, moveItemInArray} from '@angular/cdk/drag-drop';
 
 /**
  * @title Drag&Drop horizontal sorting
  */
 @Component({
   selector: 'cdk-drag-drop-horizontal-sorting-example',
-  templateUrl: 'cdk-drag-drop-horizontal-sorting-example.html',
-  styleUrl: 'cdk-drag-drop-horizontal-sorting-example.css',
+  templateUrl: 'app.component.html',
+  styleUrl: 'app.component.css',
   standalone: true,
   imports: [CdkDropList, CdkDrag],
 })

adev/src/content/examples/drag-drop/src/mixed-sorting/app/app.component.ts

@@ -1,13 +1,13 @@
+import {CdkDrag, CdkDragDrop, CdkDropList, moveItemInArray} from '@angular/cdk/drag-drop';
 import {Component} from '@angular/core';
-import {CdkDragDrop, CdkDrag, CdkDropList, moveItemInArray} from '@angular/cdk/drag-drop';
 
 /**
  * @title Drag&Drop horizontal wrapping list
  */
 @Component({
   selector: 'cdk-drag-drop-mixed-sorting-example',
-  templateUrl: 'cdk-drag-drop-mixed-sorting-example.html',
-  styleUrl: 'cdk-drag-drop-mixed-sorting-example.css',
+  templateUrl: 'app.component.html',
+  styleUrl: 'app.component.css',
   standalone: true,
   imports: [CdkDropList, CdkDrag],
 })

adev/src/content/examples/drag-drop/src/overview/app/app.component.ts

@@ -1,13 +1,13 @@
-import {Component} from '@angular/core';
 import {CdkDrag} from '@angular/cdk/drag-drop';
+import {Component} from '@angular/core';
 
 /**
  * @title Basic Drag&Drop
  */
 @Component({
   selector: 'cdk-drag-drop-overview-example',
-  templateUrl: 'cdk-drag-drop-overview-example.html',
-  styleUrl: 'cdk-drag-drop-overview-example.css',
+  templateUrl: 'app.component.html',
+  styleUrl: 'app.component.css',
   standalone: true,
   imports: [CdkDrag],
 })

adev/src/content/examples/drag-drop/src/root-element/app/app.component.ts

@@ -1,23 +1,23 @@
-import {
-  Component,
-  ViewChild,
-  TemplateRef,
-  AfterViewInit,
-  ViewContainerRef,
-  OnDestroy,
-  inject,
-} from '@angular/core';
+import {CdkDrag} from '@angular/cdk/drag-drop';
 import {Overlay, OverlayRef} from '@angular/cdk/overlay';
 import {TemplatePortal} from '@angular/cdk/portal';
-import {CdkDrag} from '@angular/cdk/drag-drop';
+import {
+  AfterViewInit,
+  Component,
+  OnDestroy,
+  TemplateRef,
+  ViewChild,
+  ViewContainerRef,
+  inject,
+} from '@angular/core';
 
 /**
  * @title Drag&Drop with alternate root element
  */
 @Component({
   selector: 'cdk-drag-drop-root-element-example',
-  templateUrl: 'cdk-drag-drop-root-element-example.html',
-  styleUrl: 'cdk-drag-drop-root-element-example.css',
+  templateUrl: 'app.component.html',
+  styleUrl: 'app.component.css',
   standalone: true,
   imports: [CdkDrag],
 })
@@ -25,9 +25,9 @@ export class CdkDragDropRootElementExample implements AfterViewInit, OnDestroy {
   private _overlay = inject(Overlay);
   private _viewContainerRef = inject(ViewContainerRef);
 
-  @ViewChild(TemplateRef) _dialogTemplate: TemplateRef<any>;
-  private _overlayRef: OverlayRef;
-  private _portal: TemplatePortal;
+  @ViewChild(TemplateRef) _dialogTemplate!: TemplateRef<any>;
+  private _overlayRef!: OverlayRef;
+  private _portal!: TemplatePortal;
 
   ngAfterViewInit() {
     this._portal = new TemplatePortal(this._dialogTemplate, this._viewContainerRef);

adev/src/content/examples/drag-drop/src/sort-predicate/app/app.component.ts

@@ -1,13 +1,13 @@
+import {CdkDrag, CdkDragDrop, CdkDropList, moveItemInArray} from '@angular/cdk/drag-drop';
 import {Component} from '@angular/core';
-import {CdkDragDrop, moveItemInArray, CdkDrag, CdkDropList} from '@angular/cdk/drag-drop';
 
 /**
  * @title Drag&Drop sort predicate
  */
 @Component({
   selector: 'cdk-drag-drop-sort-predicate-example',
-  templateUrl: 'cdk-drag-drop-sort-predicate-example.html',
-  styleUrl: 'cdk-drag-drop-sort-predicate-example.css',
+  templateUrl: 'app.component.html',
+  styleUrl: 'app.component.css',
   standalone: true,
   imports: [CdkDropList, CdkDrag],
 })

adev/src/content/examples/drag-drop/src/sorting/app/app.component.ts

@@ -1,13 +1,13 @@
+import {CdkDrag, CdkDragDrop, CdkDropList, moveItemInArray} from '@angular/cdk/drag-drop';
 import {Component} from '@angular/core';
-import {CdkDragDrop, CdkDropList, CdkDrag, moveItemInArray} from '@angular/cdk/drag-drop';
 
 /**
  * @title Drag&Drop sorting
  */
 @Component({
   selector: 'cdk-drag-drop-sorting-example',
-  templateUrl: 'cdk-drag-drop-sorting-example.html',
-  styleUrl: 'cdk-drag-drop-sorting-example.css',
+  templateUrl: 'app.component.html',
+  styleUrl: 'app.component.css',
   standalone: true,
   imports: [CdkDropList, CdkDrag],
 })

adev/src/content/guide/drag-drop.md

@@ -44,7 +44,7 @@ export class DragDropExample {}
 
 You can make any element draggable by adding the `cdkDrag` directive. By default, all draggable elements support free dragging.
 
-<docs-code-multifile preview path="adev/src/content/examples/drag-drop/src/overview/app/app.component.html">
+<docs-code-multifile preview path="adev/src/content/examples/drag-drop/src/overview/app/app.component.ts">
   <docs-code header="app/app.component.html" path="adev/src/content/examples/drag-drop/src/overview/app/app.component.html"/>
   <docs-code header="app/app.component.ts" path="adev/src/content/examples/drag-drop/src/overview/app/app.component.ts"/>
   <docs-code header="app/app.component.css" path="adev/src/content/examples/drag-drop/src/overview/app/app.component.css"/>