fix(drag-drop): error on touch end (#14392)

Fixes an error being thrown by `CdkDrag` when the `touchend` event fires.

Fixes #14390.

Marking as P2 since this will throw consistently on touch devices.

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

@@ -1895,6 +1895,30 @@ describe('CdkDrag', () => {
           .toEqual(['Zero', 'One', 'Two', 'Three']);
     }));
 
+    it('should not throw if the `touches` array is empty', fakeAsync(() => {
+      const fixture = createComponent(DraggableInDropZone);
+      fixture.detectChanges();
+      const item = fixture.componentInstance.dragItems.toArray()[1].element.nativeElement;
+
+      dispatchTouchEvent(item, 'touchstart');
+      fixture.detectChanges();
+
+      dispatchTouchEvent(document, 'touchmove');
+      fixture.detectChanges();
+
+      dispatchTouchEvent(document, 'touchmove', 50, 50);
+      fixture.detectChanges();
+
+      expect(() => {
+        const endEvent = createTouchEvent('touchend', 50, 50);
+        Object.defineProperty(endEvent, 'touches', {get: () => []});
+
+        dispatchEvent(document, endEvent);
+        fixture.detectChanges();
+      }).not.toThrow();
+
+    }));
+
   });
 
   describe('in a connected drop container', () => {

src/cdk/drag-drop/drag.ts

@@ -790,7 +790,8 @@ export class CdkDrag<T = any> implements AfterViewInit, OnDestroy {
 
   /** Determines the point of the page that was touched by the user. */
   private _getPointerPositionOnPage(event: MouseEvent | TouchEvent): Point {
-    const point = this._isTouchEvent(event) ? event.touches[0] : event;
+    // `touches` will be empty for start/end events so we have to fall back to `changedTouches`.
+    const point = this._isTouchEvent(event) ? (event.touches[0] || event.changedTouches[0]) : event;
 
     return {
       x: point.pageX - this._scrollPosition.left,