From a31648d9aa05603a8c79bbd372e65f240b33687c Mon Sep 17 00:00:00 2001 From: Miles Malerba Date: Thu, 15 May 2025 17:56:23 +0000 Subject: [PATCH] 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 | 2 +- .../src/axis-lock/app/app.component.ts | 6 ++-- .../src/boundary/app/app.component.ts | 6 ++-- .../app/app.component.ts | 8 ++--- .../connected-sorting/app/app.component.ts | 10 +++---- .../src/custom-handle/app/app.component.ts | 6 ++-- .../custom-placeholder/app/app.component.ts | 6 ++-- .../src/custom-preview/app/app.component.ts | 12 ++++---- .../src/delay-drag/app/app.component.ts | 6 ++-- .../src/disable-drag/app/app.component.ts | 6 ++-- .../src/disable-sorting/app/app.component.ts | 6 ++-- .../src/enter-predicate/app/app.component.ts | 10 +++---- .../free-drag-position/app/app.component.ts | 6 ++-- .../horizontal-sorting/app/app.component.ts | 6 ++-- .../src/mixed-sorting/app/app.component.ts | 6 ++-- .../src/overview/app/app.component.ts | 6 ++-- .../src/root-element/app/app.component.ts | 30 +++++++++---------- .../src/sort-predicate/app/app.component.ts | 6 ++-- .../src/sorting/app/app.component.ts | 6 ++-- adev/src/content/guide/drag-drop.md | 2 +- 20 files changed, 76 insertions(+), 76 deletions(-) diff --git a/adev/src/content/examples/BUILD.bazel b/adev/src/content/examples/BUILD.bazel index 2670f308ff3..4610052a316 100644 --- a/adev/src/content/examples/BUILD.bazel +++ b/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 diff --git a/adev/src/content/examples/drag-drop/src/axis-lock/app/app.component.ts b/adev/src/content/examples/drag-drop/src/axis-lock/app/app.component.ts index e9b646b9e6c..579ecbf34f0 100755 --- a/adev/src/content/examples/drag-drop/src/axis-lock/app/app.component.ts +++ b/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], }) diff --git a/adev/src/content/examples/drag-drop/src/boundary/app/app.component.ts b/adev/src/content/examples/drag-drop/src/boundary/app/app.component.ts index 35f66e1147b..6d4595b948e 100755 --- a/adev/src/content/examples/drag-drop/src/boundary/app/app.component.ts +++ b/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], }) diff --git a/adev/src/content/examples/drag-drop/src/connected-sorting-group/app/app.component.ts b/adev/src/content/examples/drag-drop/src/connected-sorting-group/app/app.component.ts index 8be8a09d629..08cc08275cc 100755 --- a/adev/src/content/examples/drag-drop/src/connected-sorting-group/app/app.component.ts +++ b/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], }) diff --git a/adev/src/content/examples/drag-drop/src/connected-sorting/app/app.component.ts b/adev/src/content/examples/drag-drop/src/connected-sorting/app/app.component.ts index b13ebb5630e..68de4c7bfe4 100755 --- a/adev/src/content/examples/drag-drop/src/connected-sorting/app/app.component.ts +++ b/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], }) diff --git a/adev/src/content/examples/drag-drop/src/custom-handle/app/app.component.ts b/adev/src/content/examples/drag-drop/src/custom-handle/app/app.component.ts index 291457879cd..2643d24f0a8 100755 --- a/adev/src/content/examples/drag-drop/src/custom-handle/app/app.component.ts +++ b/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], }) diff --git a/adev/src/content/examples/drag-drop/src/custom-placeholder/app/app.component.ts b/adev/src/content/examples/drag-drop/src/custom-placeholder/app/app.component.ts index 1f2421b2dd8..7be12021a6f 100755 --- a/adev/src/content/examples/drag-drop/src/custom-placeholder/app/app.component.ts +++ b/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], }) diff --git a/adev/src/content/examples/drag-drop/src/custom-preview/app/app.component.ts b/adev/src/content/examples/drag-drop/src/custom-preview/app/app.component.ts index 4b2704dd05a..015e65f20ae 100755 --- a/adev/src/content/examples/drag-drop/src/custom-preview/app/app.component.ts +++ b/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], }) diff --git a/adev/src/content/examples/drag-drop/src/delay-drag/app/app.component.ts b/adev/src/content/examples/drag-drop/src/delay-drag/app/app.component.ts index 4ad9fdb878d..77396bc9c03 100755 --- a/adev/src/content/examples/drag-drop/src/delay-drag/app/app.component.ts +++ b/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], }) diff --git a/adev/src/content/examples/drag-drop/src/disable-drag/app/app.component.ts b/adev/src/content/examples/drag-drop/src/disable-drag/app/app.component.ts index 320ee9f00ed..6ea1a6e2a41 100755 --- a/adev/src/content/examples/drag-drop/src/disable-drag/app/app.component.ts +++ b/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], }) diff --git a/adev/src/content/examples/drag-drop/src/disable-sorting/app/app.component.ts b/adev/src/content/examples/drag-drop/src/disable-sorting/app/app.component.ts index f6e6d41f30c..b4e88d1bfee 100755 --- a/adev/src/content/examples/drag-drop/src/disable-sorting/app/app.component.ts +++ b/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], }) diff --git a/adev/src/content/examples/drag-drop/src/enter-predicate/app/app.component.ts b/adev/src/content/examples/drag-drop/src/enter-predicate/app/app.component.ts index ab7cbb61d21..f00b36863c7 100755 --- a/adev/src/content/examples/drag-drop/src/enter-predicate/app/app.component.ts +++ b/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], }) diff --git a/adev/src/content/examples/drag-drop/src/free-drag-position/app/app.component.ts b/adev/src/content/examples/drag-drop/src/free-drag-position/app/app.component.ts index 1ad71644279..e022b667bd7 100755 --- a/adev/src/content/examples/drag-drop/src/free-drag-position/app/app.component.ts +++ b/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], }) diff --git a/adev/src/content/examples/drag-drop/src/horizontal-sorting/app/app.component.ts b/adev/src/content/examples/drag-drop/src/horizontal-sorting/app/app.component.ts index 2cbefbf425e..1a0e81ca738 100755 --- a/adev/src/content/examples/drag-drop/src/horizontal-sorting/app/app.component.ts +++ b/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], }) diff --git a/adev/src/content/examples/drag-drop/src/mixed-sorting/app/app.component.ts b/adev/src/content/examples/drag-drop/src/mixed-sorting/app/app.component.ts index f2fd955665a..8d177182791 100755 --- a/adev/src/content/examples/drag-drop/src/mixed-sorting/app/app.component.ts +++ b/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], }) diff --git a/adev/src/content/examples/drag-drop/src/overview/app/app.component.ts b/adev/src/content/examples/drag-drop/src/overview/app/app.component.ts index 931981504a8..ebee20d9ae4 100755 --- a/adev/src/content/examples/drag-drop/src/overview/app/app.component.ts +++ b/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], }) diff --git a/adev/src/content/examples/drag-drop/src/root-element/app/app.component.ts b/adev/src/content/examples/drag-drop/src/root-element/app/app.component.ts index 4ac0971f2d8..58c3003b11d 100755 --- a/adev/src/content/examples/drag-drop/src/root-element/app/app.component.ts +++ b/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; - private _overlayRef: OverlayRef; - private _portal: TemplatePortal; + @ViewChild(TemplateRef) _dialogTemplate!: TemplateRef; + private _overlayRef!: OverlayRef; + private _portal!: TemplatePortal; ngAfterViewInit() { this._portal = new TemplatePortal(this._dialogTemplate, this._viewContainerRef); diff --git a/adev/src/content/examples/drag-drop/src/sort-predicate/app/app.component.ts b/adev/src/content/examples/drag-drop/src/sort-predicate/app/app.component.ts index 4220b0d4af8..3077866d4e7 100755 --- a/adev/src/content/examples/drag-drop/src/sort-predicate/app/app.component.ts +++ b/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], }) diff --git a/adev/src/content/examples/drag-drop/src/sorting/app/app.component.ts b/adev/src/content/examples/drag-drop/src/sorting/app/app.component.ts index cfac4af4009..040abc89095 100755 --- a/adev/src/content/examples/drag-drop/src/sorting/app/app.component.ts +++ b/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], }) diff --git a/adev/src/content/guide/drag-drop.md b/adev/src/content/guide/drag-drop.md index ef6df5977af..f9a27839f80 100644 --- a/adev/src/content/guide/drag-drop.md +++ b/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. - +