fix(cdk/drag-drop): allow axis lock to be reset (#31829)

Fixes that users weren't able to reset the `lockAxis` values.

Fixes #31825.

Author: crisbeto

goldens/cdk/drag-drop/index.api.md

@@ -66,7 +66,7 @@ export class CdkDrag<T = any> implements AfterViewInit, OnChanges, OnDestroy {
     getFreeDragPosition(): Readonly<Point>;
     getPlaceholderElement(): HTMLElement;
     getRootElement(): HTMLElement;
-    lockAxis: DragAxis;
+    lockAxis: DragAxis | null;
     readonly moved: Observable<CdkDragMove<T>>;
     // (undocumented)
     static ngAcceptInputType_disabled: unknown;
@@ -259,7 +259,7 @@ export class CdkDropList<T = any> implements OnDestroy {
     getSortedItems(): CdkDrag[];
     hasAnchor: boolean;
     id: string;
-    lockAxis: DragAxis;
+    lockAxis: DragAxis | null;
     // (undocumented)
     static ngAcceptInputType_autoScrollDisabled: unknown;
     // (undocumented)
@@ -330,7 +330,7 @@ export interface DragDropConfig extends Partial<DragRefConfig> {
     // (undocumented)
     listOrientation?: DropListOrientation;
     // (undocumented)
-    lockAxis?: DragAxis;
+    lockAxis?: DragAxis | null;
     // (undocumented)
     previewClass?: string | string[];
     // (undocumented)
@@ -423,7 +423,7 @@ export class DragRef<T = any> {
     getRootElement(): HTMLElement;
     getVisibleElement(): HTMLElement;
     isDragging(): boolean;
-    lockAxis: 'x' | 'y';
+    lockAxis: 'x' | 'y' | null;
     readonly moved: Observable<{
         source: DragRef;
         pointerPosition: {
@@ -523,7 +523,7 @@ export class DropListRef<T = any> {
     isDragging(): boolean;
     _isOverContainer(x: number, y: number): boolean;
     isReceiving(): boolean;
-    lockAxis: 'x' | 'y';
+    lockAxis: 'x' | 'y' | null;
     readonly receivingStarted: Subject<{
         receiver: DropListRef;
         initiator: DropListRef;

src/cdk/drag-drop/directives/config.ts

@@ -29,7 +29,7 @@ export const CDK_DRAG_CONFIG = new InjectionToken<DragDropConfig>('CDK_DRAG_CONF
  * items and drop lists within a module or a component.
  */
 export interface DragDropConfig extends Partial<DragRefConfig> {
-  lockAxis?: DragAxis;
+  lockAxis?: DragAxis | null;
   dragStartDelay?: DragStartDelay;
   constrainPosition?: DragConstrainPosition;
   previewClass?: string | string[];

src/cdk/drag-drop/directives/drag.ts

@@ -91,7 +91,7 @@ export class CdkDrag<T = any> implements AfterViewInit, OnChanges, OnDestroy {
   @Input('cdkDragData') data: T;
 
   /** Locks the position of the dragged element along the specified axis. */
-  @Input('cdkDragLockAxis') lockAxis: DragAxis;
+  @Input('cdkDragLockAxis') lockAxis: DragAxis | null = null;
 
   /**
    * Selector that will be used to determine the root draggable element, starting from
@@ -560,10 +560,7 @@ export class CdkDrag<T = any> implements AfterViewInit, OnChanges, OnDestroy {
 
     this.disabled = draggingDisabled == null ? false : draggingDisabled;
     this.dragStartDelay = dragStartDelay || 0;
-
-    if (lockAxis) {
-      this.lockAxis = lockAxis;
-    }
+    this.lockAxis = lockAxis || null;
 
     if (constrainPosition) {
       this.constrainPosition = constrainPosition;

src/cdk/drag-drop/directives/drop-list.ts

@@ -95,7 +95,7 @@ export class CdkDropList<T = any> implements OnDestroy {
   @Input() id: string = inject(_IdGenerator).getId('cdk-drop-list-');
 
   /** Locks the position of the draggable elements inside the container along the specified axis. */
-  @Input('cdkDropListLockAxis') lockAxis: DragAxis;
+  @Input('cdkDropListLockAxis') lockAxis: DragAxis | null = null;
 
   /** Whether starting a dragging sequence from this container is disabled. */
   @Input({alias: 'cdkDropListDisabled', transform: booleanAttribute})
@@ -425,10 +425,7 @@ export class CdkDropList<T = any> implements OnDestroy {
     this.sortingDisabled = sortingDisabled == null ? false : sortingDisabled;
     this.autoScrollDisabled = listAutoScrollDisabled == null ? false : listAutoScrollDisabled;
     this.orientation = listOrientation || 'vertical';
-
-    if (lockAxis) {
-      this.lockAxis = lockAxis;
-    }
+    this.lockAxis = lockAxis || null;
   }
 
   /** Syncs up the registered drag items with underlying drop list ref. */

src/cdk/drag-drop/drag-ref.ts

@@ -293,7 +293,7 @@ export class DragRef<T = any> {
   private _cachedShadowRoot: ShadowRoot | null | undefined;
 
   /** Axis along which dragging is locked. */
-  lockAxis: 'x' | 'y';
+  lockAxis: 'x' | 'y' | null = null;
 
   /**
    * Amount of milliseconds to wait after the user has put their

src/cdk/drag-drop/drop-list-ref.ts

@@ -63,7 +63,7 @@ export class DropListRef<T = any> {
   sortingDisabled: boolean = false;
 
   /** Locks the position of the draggable elements inside the container along the specified axis. */
-  lockAxis: 'x' | 'y';
+  lockAxis: 'x' | 'y' | null = null;
 
   /**
    * Whether auto-scrolling the view when the user