[ACS-12728] Allow drag and drop outside document list

lib/content-services/src/lib/breadcrumb/breadcrumb.component.html

@@ -4,6 +4,7 @@
         class="adf-breadcrumb-container"
         role="navigation"
         [attr.aria-label]="'BREADCRUMB.ARIA-LABEL.BREADCRUMB' | translate"
+        cdkDropListGroup
     >
         @if (hasPreviousNodes()) {
             <button
@@ -47,6 +48,9 @@
                     [attr.data-automation-id]="'breadcrumb_' + item.name"
                     class="adf-breadcrumb-item-anchor"
                     (click)="onRoutePathClick(item, $event)"
+                    cdkDropList
+                    (cdkDropListDropped)="onDrop($event)"
+                    [id]="item.id"
                 >
                     {{ item.name ?? '' | translate }}
                 </a>

lib/content-services/src/lib/breadcrumb/breadcrumb.component.scss

@@ -1,3 +1,5 @@
+@use '../mat-selectors.scss' as ms;
+
 .adf-breadcrumb {
     display: flex;
     flex: 1;
@@ -101,6 +103,11 @@
                 outline: 1px solid var(--mat-sys-outline-variant);
                 outline-offset: -1px;
             }
+
+            &#{ms.$cdk-drop-list-dragging}:hover {
+                text-decoration: underline;
+                text-underline-offset: 4px;
+            }
         }
 
         &-current {

lib/content-services/src/lib/breadcrumb/breadcrumb.component.ts

@@ -35,10 +35,11 @@ import { TranslatePipe, TranslateService } from '@ngx-translate/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { IconModule } from '@alfresco/adf-core';
 import { LiveAnnouncer } from '@angular/cdk/a11y';
+import { CdkDrag, CdkDragDrop, CdkDropList } from '@angular/cdk/drag-drop';
 
 @Component({
     selector: 'adf-breadcrumb',
-    imports: [IconModule, TranslatePipe, MatSelectModule],
+    imports: [IconModule, TranslatePipe, MatSelectModule, CdkDropList],
     templateUrl: './breadcrumb.component.html',
     styleUrls: ['./breadcrumb.component.scss'],
     encapsulation: ViewEncapsulation.None,
@@ -112,6 +113,9 @@ export class BreadcrumbComponent implements OnInit, OnChanges {
     @Output()
     navigate = new EventEmitter<PathElement>();
 
+    @Output()
+    breadcrumbPathElementsChange = new EventEmitter<string[]>();
+
     ngOnInit() {
         this.transform = this.transform ? this.transform : null;
 
@@ -145,6 +149,11 @@ export class BreadcrumbComponent implements OnInit, OnChanges {
             this.lastNodes = this.route;
             this.previousNodes = null;
         }
+        this.breadcrumbPathElementsChange.emit(
+            this.lastNodes
+                .filter((_pathElement, i) => this.breadcrumbItemIsAnchor(i === this.lastNodes.length - 1))
+                .map((pathElement) => pathElement.id)
+        );
     }
 
     open(): void {
@@ -218,4 +227,10 @@ export class BreadcrumbComponent implements OnInit, OnChanges {
             }
         }
     }
+
+    onDrop(event: CdkDragDrop<CdkDrag>) {
+        if (!event.isPointerOverContainer) {
+            return;
+        }
+    }
 }

lib/content-services/src/lib/document-list/components/document-list.component.html

@@ -29,7 +29,10 @@
     (row-select)="onNodeSelect($any($event).detail)"
     (row-unselect)="onNodeUnselect($any($event).detail)"
     (sorting-changed)="onSortingChanged($any($event))"
-    [class.adf-datatable-gallery-thumbnails]="data.thumbnails">
+    [class.adf-datatable-gallery-thumbnails]="data.thumbnails"
+    [enableDragRows]="enableDragRows"
+    [dropListConnectedTo]="dropListConnectedTo"
+    [dragBoundary]="dragBoundary">
 
     <div *ngIf="headerFilters">
         <adf-filter-header

lib/content-services/src/lib/document-list/components/document-list.component.ts

@@ -382,6 +382,20 @@ export class DocumentListComponent extends DataTableSchema implements OnInit, On
     @Input()
     displayDragAndDropHint = true;
 
+    /**
+     * Flag that enables dragging rows
+     */
+    @Input()
+    enableDragRows = false;
+
+    /** The connected drop lists for drag and drop functionality. */
+    @Input()
+    dropListConnectedTo: string[] = [];
+
+    /** The boundary element for drag and drop functionality. */
+    @Input()
+    dragBoundary = '.adf-datatable-body';
+
     /**
      * Indicates if the data is provided externally.
      * If true the component won't fetch data itself

lib/content-services/src/lib/mat-selectors.scss

@@ -40,5 +40,6 @@ $mat-evolution-chip-graphic: '.mdc-evolution-chip__graphic';
 $mat-select-arrow: '.mat-mdc-select-arrow';
 $mat-evolution-chip-set: '.mdc-evolution-chip-set';
 $cdk-overlay-pane: '.cdk-overlay-pane';
+$cdk-drop-list-dragging: '.cdk-drop-list-dragging';
 $mat-list-item-disabled: '.mdc-list-item--disabled';
 $mat-switch: '.mdc-switch';