Fix: replace drag drop & clipboard dependencies with Angular CDK (#4362)

* Swap ngx-drag-drop dependency for Angular CDK

* Swap ngx-clipboard dependency for Angular CDK

src-ui/src/app/components/dashboard/widgets/widget-frame/widget-frame.component.html

@@ -1,15 +1,8 @@
-<div class="card shadow-sm bg-light"
-  [dndDraggable]="draggable"
-  dndEffectAllowed="move"
-  [dndDisableIf]="!draggable"
-  (dndStart)="dndStart.emit($event)"
-  (dndMoved)="dndMoved.emit($event)"
-  (dndCanceled)="dndCanceled.emit($event)"
-  (dndEnd)="dndEnd.emit($event)">
+<div class="card shadow-sm bg-light" cdkDrag [cdkDragDisabled]="!draggable" cdkDragPreviewContainer="parent">
   <div class="card-header">
     <div class="d-flex justify-content-between align-items-center">
       <div class="d-flex">
-        <div *ngIf="draggable" class="ms-n2 me-1" dndHandle>
+        <div *ngIf="draggable" class="ms-n2 me-1" cdkDragHandle>
           <svg class="sidebaricon text-muted" fill="currentColor">
             <use xlink:href="assets/bootstrap-icons.svg#grip-vertical"/>
           </svg>

src-ui/src/app/components/dashboard/widgets/widget-frame/widget-frame.component.spec.ts

@@ -1,10 +1,10 @@
 import { Component } from '@angular/core'
 import { ComponentFixture, TestBed } from '@angular/core/testing'
 import { By } from '@angular/platform-browser'
-import { NgbAlertModule, NgbAlert } from '@ng-bootstrap/ng-bootstrap'
+import { NgbAlertModule } from '@ng-bootstrap/ng-bootstrap'
 import { PermissionsGuard } from 'src/app/guards/permissions.guard'
 import { WidgetFrameComponent } from './widget-frame.component'
-import { DndModule } from 'ngx-drag-drop'
+import { DragDropModule } from '@angular/cdk/drag-drop'
 
 @Component({
   template: `
@@ -30,7 +30,7 @@ describe('WidgetFrameComponent', () => {
     TestBed.configureTestingModule({
       declarations: [WidgetFrameComponent, WidgetFrameComponent],
       providers: [PermissionsGuard],
-      imports: [NgbAlertModule, DndModule],
+      imports: [NgbAlertModule, DragDropModule],
     }).compileComponents()
 
     fixture = TestBed.createComponent(WidgetFrameComponent)

src-ui/src/app/components/dashboard/widgets/widget-frame/widget-frame.component.ts

@@ -1,4 +1,4 @@
-import { Component, EventEmitter, Input, Output } from '@angular/core'
+import { Component, Input } from '@angular/core'
 
 @Component({
   selector: 'pngx-widget-frame',
@@ -16,16 +16,4 @@ export class WidgetFrameComponent {
 
   @Input()
   draggable: any
-
-  @Output()
-  dndStart: EventEmitter<DragEvent> = new EventEmitter()
-
-  @Output()
-  dndMoved: EventEmitter<DragEvent> = new EventEmitter()
-
-  @Output()
-  dndCanceled: EventEmitter<DragEvent> = new EventEmitter()
-
-  @Output()
-  dndEnd: EventEmitter<DragEvent> = new EventEmitter()
 }