[ACS-8634] Additional fixes (#10351)

* [ACS-8634] Limit drag area for dragging datatable rows

* ACS-8634 Fixed styles for context menu

* [ACS-8634] Keep row and cell appearance while dragging

---------

Co-authored-by: Aleksander Sklorz <Aleksander.Sklorz@hyland.com>

lib/core/src/lib/context-menu/context-menu-list.component.scss

@@ -0,0 +1,15 @@
+@use '@angular/material' as mat;
+
+@keyframes delayed-elevation {
+    0% {
+        box-shadow: none;
+    }
+
+    100% {
+        @include mat.elevation(8);
+    }
+}
+
+adf-context-menu {
+    animation: delayed-elevation 0.5s ease-in-out 0.1s forwards;
+}

lib/core/src/lib/context-menu/context-menu-list.component.ts

@@ -31,6 +31,7 @@ import { DOWN_ARROW, UP_ARROW } from '@angular/cdk/keycodes';
     selector: 'adf-context-menu',
     standalone: true,
     templateUrl: './context-menu-list.component.html',
+    styleUrls: ['./context-menu-list.component.scss'],
     host: {
         role: 'menu',
         class: 'adf-context-menu'

lib/core/src/lib/datatable/components/datatable/datatable.component.html

@@ -165,6 +165,7 @@
                 (cdkDragDropped)="onDragDrop($event)"
                 (cdkDragStarted)="onDragStart()"
                 (cdkDragEnded)="onDragEnd()"
+                [cdkDragBoundary]="'.adf-datatable-body'"
                 [row]="row"
                 (select)="onEnterKeyPressed(row, $event)"
                 (keyup)="onRowKeyUp(row, $event)"

lib/core/src/lib/datatable/components/datatable/datatable.component.scss

@@ -52,7 +52,8 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width-1 !default;
     }
 }
 
-.adf-datatable-list {
+.adf-datatable-list,
+#{$cdk-drag-preview} {
     display: flex;
     flex-direction: column;
     background-color: var(--adf-theme-background-card-color);
@@ -603,7 +604,9 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width-1 !default;
 #{$cdk-drag-preview} {
     min-height: $data-table-row-height;
     display: flex;
+    flex-direction: row;
     align-items: center;
+    box-sizing: unset;
     background-color: var(--theme-background-color);
     border-top: 2px solid var(--theme-selected-background-color);
     opacity: 1;