@angular/cdk-experimental - npm Package Compare versions

Comparing version 6.3.2 to 6.3.3

bundles/cdk-experimental-drag-drop.umd.js

@@ -9,6 +9,6 @@ /**
 (function (global, factory) {
-	typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/platform-browser'), require('@angular/cdk/platform')) :
-	typeof define === 'function' && define.amd ? define('@angular/cdk-experimental/dragDrop', ['exports', '@angular/core', '@angular/platform-browser', '@angular/cdk/platform'], factory) :
-	(factory((global.ng = global.ng || {}, global.ng['cdk-experimental'] = global.ng['cdk-experimental'] || {}, global.ng['cdk-experimental'].dragDrop = {}),global.ng.core,global.ng.platformBrowser,global.ng.cdk.platform));
-}(this, (function (exports,core,platformBrowser,platform) { 'use strict';
+	typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/platform-browser'), require('@angular/cdk/bidi'), require('@angular/cdk/platform'), require('@angular/cdk/overlay')) :
+	typeof define === 'function' && define.amd ? define('@angular/cdk-experimental/dragDrop', ['exports', '@angular/core', '@angular/platform-browser', '@angular/cdk/bidi', '@angular/cdk/platform', '@angular/cdk/overlay'], factory) :
+	(factory((global.ng = global.ng || {}, global.ng['cdk-experimental'] = global.ng['cdk-experimental'] || {}, global.ng['cdk-experimental'].dragDrop = {}),global.ng.core,global.ng.platformBrowser,global.ng.cdk.bidi,global.ng.cdk.platform,global.ng.cdk.overlay));
+}(this, (function (exports,core,platformBrowser,bidi,platform,overlay) { 'use strict';
 
@@ -121,3 +121,3 @@ /**
     function CdkDrag(element, /** Droppable container that the draggable is a part of. */
-    dropContainer, document, _ngZone, _viewContainerRef) {
+    dropContainer, document, _ngZone, _viewContainerRef, _viewportRuler, _dir) {
         var _this = this;
@@ -128,2 +128,4 @@ this.element = element;
         this._viewContainerRef = _viewContainerRef;
+        this._viewportRuler = _viewportRuler;
+        this._dir = _dir;
         /**
@@ -171,3 +173,3 @@ * CSS `transform` applied to the element when it isn't being dragged. We need a
          */
-        this._pointerDown = function (event) {
+        this._pointerDown = function (referenceElement, event) {
             if (_this._isDragging) {
@@ -178,2 +180,3 @@ return;
             _this._initialContainer = _this.dropContainer;
+            _this._scrollPosition = _this._viewportRuler.getViewportScrollPosition();
             // If we have a custom preview template, the element won't be visible anyway so we avoid the
@@ -184,3 +187,3 @@ // extra `getBoundingClientRect` calls and just move the preview next to the cursor.
             _this._pickupPositionInElement = _this._previewTemplate ? { x: 0, y: 0 } :
-                _this._getPointerPositionInElement(event);
+                _this._getPointerPositionInElement(referenceElement, event);
             _this._pickupPositionOnPage = _this._getPointerPositionOnPage(event);
@@ -282,7 +285,3 @@ _this._registerMoveListeners(event);
         var _this = this;
-        // TODO: doesn't handle (pun intended) the handle being destroyed
-        var /** @type {?} */ dragElement = (this._handle ? this._handle.element : this.element).nativeElement;
-        dragElement.addEventListener('mousedown', this._pointerDown);
-        dragElement.addEventListener('touchstart', this._pointerDown);
-        // Webkit won't preventDefault on a dynamically-added `touchmove` listener, which means that
+        // WebKit won't preventDefault on a dynamically-added `touchmove` listener, which means that
         // we need to add one ahead of time. See https://bugs.webkit.org/show_bug.cgi?id=184250.
@@ -311,3 +310,30 @@ // TODO: move into a central registry.
     };
+    /** Starts the dragging sequence. */
     /**
+     * Starts the dragging sequence.
+     * @param {?} event
+     * @return {?}
+     */
+    CdkDrag.prototype._startDragging = /**
+     * Starts the dragging sequence.
+     * @param {?} event
+     * @return {?}
+     */
+    function (event) {
+        // Delegate the event based on whether it started from a handle or the element itself.
+        if (this._handles.length) {
+            var /** @type {?} */ targetHandle = this._handles.find(function (handle) {
+                var /** @type {?} */ element = handle.element.nativeElement;
+                var /** @type {?} */ target = event.target;
+                return !!target && (target === element || element.contains(/** @type {?} */ (target)));
+            });
+            if (targetHandle) {
+                this._pointerDown(targetHandle.element, event);
+            }
+        }
+        else {
+            this._pointerDown(this.element, event);
+        }
+    };
+    /**
      * Cleans up the DOM artifacts that were added to facilitate the element being dragged.
@@ -370,3 +396,3 @@ * @return {?}
         }
-        this.dropContainer._sortItem(this, y);
+        this.dropContainer._sortItem(this, x, y);
         this._setTransform(this._preview, x - this._pickupPositionInElement.x, y - this._pickupPositionInElement.y);
@@ -401,2 +427,3 @@ };
         preview.classList.add('cdk-drag-preview');
+        preview.setAttribute('dir', this._dir ? this._dir.value : 'ltr');
         return preview;
@@ -463,2 +490,3 @@ };
      * Figures out the coordinates at which an element was picked up.
+     * @param {?} referenceElement Element that initiated the dragging.
      * @param {?} event Event that initiated the dragging.
@@ -469,12 +497,15 @@ * @return {?}
      * Figures out the coordinates at which an element was picked up.
+     * @param {?} referenceElement Element that initiated the dragging.
      * @param {?} event Event that initiated the dragging.
      * @return {?}
      */
-    function (event) {
+    function (referenceElement, event) {
         var /** @type {?} */ elementRect = this.element.nativeElement.getBoundingClientRect();
-        var /** @type {?} */ handleElement = this._handle ? this._handle.element.nativeElement : null;
+        var /** @type {?} */ handleElement = referenceElement === this.element ? null : referenceElement.nativeElement;
         var /** @type {?} */ referenceRect = handleElement ? handleElement.getBoundingClientRect() : elementRect;
-        var /** @type {?} */ x = this._isTouchEvent(event) ? event.targetTouches[0].pageX - referenceRect.left :
+        var /** @type {?} */ x = this._isTouchEvent(event) ?
+            event.targetTouches[0].pageX - referenceRect.left - this._scrollPosition.left :
             event.offsetX;
-        var /** @type {?} */ y = this._isTouchEvent(event) ? event.targetTouches[0].pageY - referenceRect.top :
+        var /** @type {?} */ y = this._isTouchEvent(event) ?
+            event.targetTouches[0].pageY - referenceRect.top - this._scrollPosition.top :
             event.offsetY;
@@ -582,4 +613,7 @@ return {
     function (event) {
-        return this._isTouchEvent(event) ? { x: event.touches[0].pageX, y: event.touches[0].pageY } :
-            { x: event.pageX, y: event.pageY };
+        var /** @type {?} */ point = this._isTouchEvent(event) ? event.touches[0] : event;
+        return {
+            x: point.pageX - this._scrollPosition.left,
+            y: point.pageY - this._scrollPosition.top
+        };
     };
@@ -665,2 +699,4 @@ /**
                         'class': 'cdk-drag',
+                        '(mousedown)': '_startDragging($event)',
+                        '(touchstart)': '_startDragging($event)',
                     }
@@ -676,5 +712,7 @@ },] },
         { type: core.ViewContainerRef, },
+        { type: overlay.ViewportRuler, },
+        { type: bidi.Directionality, decorators: [{ type: core.Optional },] },
     ]; };
     CdkDrag.propDecorators = {
-        "_handle": [{ type: core.ContentChild, args: [CdkDragHandle,] },],
+        "_handles": [{ type: core.ContentChildren, args: [CdkDragHandle,] },],
         "_previewTemplate": [{ type: core.ContentChild, args: [CdkDragPreview,] },],
@@ -708,2 +746,6 @@ "_placeholderTemplate": [{ type: core.ContentChild, args: [CdkDragPlaceholder,] },],
         /**
+         * Direction in which the list is oriented.
+         */
+        this.orientation = 'vertical';
+        /**
          * Emits when the user drops an item inside the container.
@@ -833,2 +875,3 @@ */
      * @param item Item to be sorted.
+     * @param xOffset Position of the item along the X axis.
      * @param yOffset Position of the item along the Y axis.
@@ -839,2 +882,3 @@ */
      * @param {?} item Item to be sorted.
+     * @param {?} xOffset Position of the item along the X axis.
      * @param {?} yOffset Position of the item along the Y axis.
@@ -846,11 +890,17 @@ * @return {?}
      * @param {?} item Item to be sorted.
+     * @param {?} xOffset Position of the item along the X axis.
      * @param {?} yOffset Position of the item along the Y axis.
      * @return {?}
      */
-    function (item, yOffset) {
-        // TODO: only covers Y axis sorting.
+    function (item, xOffset, yOffset) {
+        var _this = this;
         var /** @type {?} */ siblings = this._positionCache.items;
         var /** @type {?} */ newPosition = siblings.find(function (_a) {
             var drag = _a.drag, clientRect = _a.clientRect;
-            return drag !== item && yOffset > clientRect.top && yOffset < clientRect.bottom;
+            if (drag === item) {
+                return false;
+            }
+            return _this.orientation === 'horizontal' ?
+                xOffset > clientRect.left && xOffset < clientRect.right :
+                yOffset > clientRect.top && yOffset < clientRect.bottom;
         });
@@ -935,3 +985,3 @@ if (!newPosition && siblings.length > 0) {
                     changeDetection: core.ChangeDetectionStrategy.OnPush,
-                    styles: [".cdk-drag-preview{position:absolute;top:0;left:0;z-index:1000}"],
+                    styles: [".cdk-drag-preview{position:fixed;top:0;left:0;z-index:1000}"],
                     providers: [
@@ -954,2 +1004,3 @@ { provide: CDK_DROP_CONTAINER, useExisting: CdkDrop },
         "data": [{ type: core.Input },],
+        "orientation": [{ type: core.Input },],
         "dropped": [{ type: core.Output },],
@@ -956,0 +1007,0 @@ "entered": [{ type: core.Output },],

bundles/cdk-experimental-drag-drop.umd.min.js

@@ -8,3 +8,3 @@ /**
  */
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@angular/core"),require("@angular/platform-browser"),require("@angular/cdk/platform")):"function"==typeof define&&define.amd?define("@angular/cdk-experimental/dragDrop",["exports","@angular/core","@angular/platform-browser","@angular/cdk/platform"],t):t((e.ng=e.ng||{},e.ng["cdk-experimental"]=e.ng["cdk-experimental"]||{},e.ng["cdk-experimental"].dragDrop={}),e.ng.core,e.ng.platformBrowser,e.ng.cdk.platform)}(this,function(e,t,n,r){"use strict";function i(e,t,n){if(t!==n){for(var r=e[t],i=n<t?-1:1,o=t;o!==n;o+=i)e[o]=e[o+i];e[n]=r}}function o(e,t,n,r){t.splice(r,0,e.splice(n,1)[0])}var s=function(){function e(e){this.element=e}return e.decorators=[{type:t.Directive,args:[{selector:"[cdkDragHandle]",host:{class:"cdk-drag-handle"}}]}],e.ctorParameters=function(){return[{type:t.ElementRef}]},e}(),a=new t.InjectionToken("CDK_DROP_CONTAINER"),p=function(){function e(e){this.templateRef=e}return e.decorators=[{type:t.Directive,args:[{selector:"ng-template[cdkDragPreview]"}]}],e.ctorParameters=function(){return[{type:t.TemplateRef}]},e.propDecorators={data:[{type:t.Input}]},e}(),d=function(){function e(e){this.templateRef=e}return e.decorators=[{type:t.Directive,args:[{selector:"ng-template[cdkDragPlaceholder]"}]}],e.ctorParameters=function(){return[{type:t.TemplateRef}]},e.propDecorators={data:[{type:t.Input}]},e}(),c=!!r.supportsPassiveEventListeners()&&{passive:!1},l=function(){function e(e,n,r,i,o){var s=this;this.element=e,this.dropContainer=n,this._ngZone=i,this._viewContainerRef=o,this._passiveTransform={x:0,y:0},this._activeTransform={x:0,y:0},this._isDragging=!1,this._hasMoved=!1,this.started=new t.EventEmitter,this.ended=new t.EventEmitter,this.entered=new t.EventEmitter,this.exited=new t.EventEmitter,this.dropped=new t.EventEmitter,this._pointerDown=function(e){if(!s._isDragging&&(s._isDragging=!0,s._initialContainer=s.dropContainer,s._pickupPositionInElement=s._previewTemplate?{x:0,y:0}:s._getPointerPositionInElement(e),s._pickupPositionOnPage=s._getPointerPositionOnPage(e),s._registerMoveListeners(e),s.started.emit({source:s}),s.dropContainer)){var t=s.element.nativeElement,n=s._preview=s._createPreviewElement(),r=s._placeholder=s._createPlaceholderElement();t.style.display="none",s._document.body.appendChild(t.parentNode.replaceChild(r,t)),s._document.body.appendChild(n),s.dropContainer.start()}},this._pointerMove=function(e){if(s._isDragging)if(s._hasMoved=!0,e.preventDefault(),s.dropContainer)s._updateActiveDropContainer(e);else{var t=s._activeTransform,n=s._getPointerPositionOnPage(e),r=n.x,i=n.y;t.x=r-s._pickupPositionOnPage.x+s._passiveTransform.x,t.y=i-s._pickupPositionOnPage.y+s._passiveTransform.y,s._setTransform(s.element.nativeElement,t.x,t.y)}},this._pointerUp=function(){if(s._isDragging){if(s._removeDocumentEvents(),s._isDragging=!1,!s.dropContainer)return s._passiveTransform.x=s._activeTransform.x,s._passiveTransform.y=s._activeTransform.y,void s._ngZone.run(function(){return s.ended.emit({source:s})});s._animatePreviewToPlaceholder().then(function(){return s._cleanupDragArtifacts()})}},this._preventScrollListener=function(e){s._isDragging&&e.preventDefault()},this._document=r}return e.prototype.getPlaceholderElement=function(){return this._placeholder},e.prototype.ngAfterContentInit=function(){var e=this,t=(this._handle?this._handle.element:this.element).nativeElement;t.addEventListener("mousedown",this._pointerDown),t.addEventListener("touchstart",this._pointerDown),this._ngZone.runOutsideAngular(function(){e._document.addEventListener("touchmove",e._preventScrollListener,c)})},e.prototype.ngOnDestroy=function(){this._removeDocumentEvents(),this._destroyPreview(),this._destroyPlaceholder(),this._document.removeEventListener("touchmove",this._preventScrollListener,c),this._isDragging&&this._removeElement(this.element.nativeElement)},e.prototype._cleanupDragArtifacts=function(){var e=this;this._destroyPreview(),this._placeholder.parentNode.insertBefore(this.element.nativeElement,this._placeholder),this._destroyPlaceholder(),this.element.nativeElement.style.display="",this._ngZone.run(function(){var t=e._getElementIndexInDom();e.ended.emit({source:e}),e.dropped.emit({item:e,currentIndex:t,previousIndex:e._initialContainer.getItemIndex(e),container:e.dropContainer,previousContainer:e._initialContainer}),e.dropContainer.drop(e,t,e._initialContainer)})},e.prototype._updateActiveDropContainer=function(e){var t=this,n=this._getPointerPositionOnPage(e),r=n.x,i=n.y,o=this.dropContainer._getSiblingContainerFromPosition(r,i);o&&this._ngZone.run(function(){t.exited.emit({item:t,container:t.dropContainer}),t.dropContainer.exit(t),t.entered.emit({item:t,container:o}),t.dropContainer=o,t.dropContainer.enter(t)}),this.dropContainer._sortItem(this,i),this._setTransform(this._preview,r-this._pickupPositionInElement.x,i-this._pickupPositionInElement.y)},e.prototype._createPreviewElement=function(){var e;if(this._previewTemplate){var t=this._viewContainerRef.createEmbeddedView(this._previewTemplate.templateRef,this._previewTemplate.data);e=t.rootNodes[0],this._previewRef=t,this._setTransform(e,this._pickupPositionOnPage.x,this._pickupPositionOnPage.y)}else{var n=this.element.nativeElement,r=n.getBoundingClientRect();e=n.cloneNode(!0),e.style.width=r.width+"px",e.style.height=r.height+"px",this._setTransform(e,r.left,r.top)}return e.classList.add("cdk-drag-preview"),e},e.prototype._createPlaceholderElement=function(){var e;return this._placeholderTemplate?(this._placeholderRef=this._viewContainerRef.createEmbeddedView(this._placeholderTemplate.templateRef,this._placeholderTemplate.data),e=this._placeholderRef.rootNodes[0]):e=this.element.nativeElement.cloneNode(!0),e.classList.add("cdk-drag-placeholder"),e},e.prototype._getElementIndexInDom=function(){var e=this,t=this.element.nativeElement;if(!t.parentElement)return-1;for(var n=0,r=t.parentElement.children,i=r.length,o=this.dropContainer._draggables.filter(function(t){return t!==e}).map(function(e){return e.element.nativeElement}),s=0;s<i;s++){if(r[s]===t)return n;o.indexOf(r[s])>-1&&n++}return-1},e.prototype._getPointerPositionInElement=function(e){var t=this.element.nativeElement.getBoundingClientRect(),n=this._handle?this._handle.element.nativeElement:null,r=n?n.getBoundingClientRect():t,i=this._isTouchEvent(e)?e.targetTouches[0].pageX-r.left:e.offsetX,o=this._isTouchEvent(e)?e.targetTouches[0].pageY-r.top:e.offsetY;return{x:r.left-t.left+i,y:r.top-t.top+o}},e.prototype._animatePreviewToPlaceholder=function(){var e=this;if(!this._hasMoved)return Promise.resolve();var t=this._placeholder.getBoundingClientRect();this._preview.classList.add("cdk-drag-animating"),this._setTransform(this._preview,t.left,t.top);var n=getComputedStyle(this._preview).getPropertyValue("transition-duration");return 0===parseFloat(n)?Promise.resolve():this._ngZone.runOutsideAngular(function(){return new Promise(function(t){var n=function(r){r.target===e._preview&&(e._preview.removeEventListener("transitionend",n),t())};e._preview.addEventListener("transitionend",n)})})},e.prototype._setTransform=function(e,t,n){e.style.transform="translate3d("+t+"px, "+n+"px, 0)"},e.prototype._removeElement=function(e){e&&e.parentNode&&e.parentNode.removeChild(e)},e.prototype._removeDocumentEvents=function(){this._document.removeEventListener("mousemove",this._pointerMove,c),this._document.removeEventListener("touchmove",this._pointerMove,c),this._document.removeEventListener("mouseup",this._pointerUp),this._document.removeEventListener("touchend",this._pointerUp)},e.prototype._getPointerPositionOnPage=function(e){return this._isTouchEvent(e)?{x:e.touches[0].pageX,y:e.touches[0].pageY}:{x:e.pageX,y:e.pageY}},e.prototype._isTouchEvent=function(e){return e.type.startsWith("touch")},e.prototype._destroyPreview=function(){this._preview&&this._removeElement(this._preview),this._previewRef&&this._previewRef.destroy(),this._preview=this._previewRef=null},e.prototype._destroyPlaceholder=function(){this._placeholder&&this._removeElement(this._placeholder),this._placeholderRef&&this._placeholderRef.destroy(),this._placeholder=this._placeholderRef=null},e.prototype._registerMoveListeners=function(e){var t=this;this._ngZone.runOutsideAngular(function(){var n=t._isTouchEvent(e);t._document.addEventListener(n?"touchmove":"mousemove",t._pointerMove,c),t._document.addEventListener(n?"touchend":"mouseup",t._pointerUp)})},e.decorators=[{type:t.Directive,args:[{selector:"[cdkDrag]",exportAs:"cdkDrag",host:{class:"cdk-drag"}}]}],e.ctorParameters=function(){return[{type:t.ElementRef},{type:void 0,decorators:[{type:t.Inject,args:[a]},{type:t.Optional},{type:t.SkipSelf}]},{type:void 0,decorators:[{type:t.Inject,args:[n.DOCUMENT]}]},{type:t.NgZone},{type:t.ViewContainerRef}]},e.propDecorators={_handle:[{type:t.ContentChild,args:[s]}],_previewTemplate:[{type:t.ContentChild,args:[p]}],_placeholderTemplate:[{type:t.ContentChild,args:[d]}],started:[{type:t.Output,args:["cdkDragStarted"]}],ended:[{type:t.Output,args:["cdkDragEnded"]}],entered:[{type:t.Output,args:["cdkDragEntered"]}],exited:[{type:t.Output,args:["cdkDragExited"]}],dropped:[{type:t.Output,args:["cdkDragDropped"]}]},e}(),h=function(){function e(e){this.element=e,this.connectedTo=[],this.dropped=new t.EventEmitter,this.entered=new t.EventEmitter,this.exited=new t.EventEmitter,this._dragging=!1,this._positionCache={items:[],siblings:[]}}return e.prototype.start=function(){this._dragging=!0,this._refreshPositions()},e.prototype.drop=function(e,t,n){this.dropped.emit({item:e,currentIndex:t,previousIndex:n.getItemIndex(e),container:this,previousContainer:n}),this._reset()},e.prototype.enter=function(e){this.entered.emit({item:e,container:this}),this.start()},e.prototype.exit=function(e){this._reset(),this.exited.emit({item:e,container:this})},e.prototype.getItemIndex=function(e){return this._draggables.toArray().indexOf(e)},e.prototype._sortItem=function(e,t){var n=this._positionCache.items,r=n.find(function(n){var r=n.drag,i=n.clientRect;return r!==e&&t>i.top&&t<i.bottom});if(r||!(n.length>0)){var i=r?r.drag.element.nativeElement:null,o=i?i.nextSibling:null,s=i?i.parentElement:this.element.nativeElement,a=e.getPlaceholderElement();o?s.insertBefore(a,o===a?i:o):s.appendChild(a),this._refreshPositions()}},e.prototype._getSiblingContainerFromPosition=function(e,t){var n=this._positionCache.siblings.find(function(n){var r=n.clientRect,i=r.top,o=r.bottom,s=r.left,a=r.right;return t>=i&&t<=o&&e>=s&&e<=a});return n?n.drop:null},e.prototype._refreshPositions=function(){this._positionCache.items=this._draggables.map(function(e){return{drag:e,clientRect:e.element.nativeElement.getBoundingClientRect()}}).sort(function(e,t){return e.clientRect.top-t.clientRect.top}),this._positionCache.siblings=this.connectedTo.map(function(e){return{drop:e,clientRect:e.element.nativeElement.getBoundingClientRect()}})},e.prototype._reset=function(){this._dragging=!1,this._positionCache.items=[],this._positionCache.siblings=[]},e.decorators=[{type:t.Component,args:[{selector:"cdk-drop",exportAs:"cdkDrop",template:"<ng-content></ng-content>",encapsulation:t.ViewEncapsulation.None,changeDetection:t.ChangeDetectionStrategy.OnPush,styles:[".cdk-drag-preview{position:absolute;top:0;left:0;z-index:1000}"],providers:[{provide:a,useExisting:e}],host:{class:"cdk-drop","[class.cdk-drop-dragging]":"_dragging"}}]}],e.ctorParameters=function(){return[{type:t.ElementRef}]},e.propDecorators={_draggables:[{type:t.ContentChildren,args:[t.forwardRef(function(){return l})]}],connectedTo:[{type:t.Input}],data:[{type:t.Input}],dropped:[{type:t.Output}],entered:[{type:t.Output}],exited:[{type:t.Output}]},e}(),u=function(){function e(){}return e.decorators=[{type:t.NgModule,args:[{declarations:[h,l,s,p,d],exports:[h,l,s,p,d]}]}],e}();e.CdkDrop=h,e.CdkDrag=l,e.CdkDragHandle=s,e.moveItemInArray=i,e.transferArrayItem=o,e.CdkDragPreview=p,e.CdkDragPlaceholder=d,e.DragDropModule=u,e.ɵb=a,Object.defineProperty(e,"__esModule",{value:!0})});
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@angular/core"),require("@angular/platform-browser"),require("@angular/cdk/bidi"),require("@angular/cdk/platform"),require("@angular/cdk/overlay")):"function"==typeof define&&define.amd?define("@angular/cdk-experimental/dragDrop",["exports","@angular/core","@angular/platform-browser","@angular/cdk/bidi","@angular/cdk/platform","@angular/cdk/overlay"],t):t((e.ng=e.ng||{},e.ng["cdk-experimental"]=e.ng["cdk-experimental"]||{},e.ng["cdk-experimental"].dragDrop={}),e.ng.core,e.ng.platformBrowser,e.ng.cdk.bidi,e.ng.cdk.platform,e.ng.cdk.overlay)}(this,function(e,t,n,r,i,o){"use strict";function s(e,t,n){if(t!==n){for(var r=e[t],i=n<t?-1:1,o=t;o!==n;o+=i)e[o]=e[o+i];e[n]=r}}function a(e,t,n,r){t.splice(r,0,e.splice(n,1)[0])}var p=function(){function e(e){this.element=e}return e.decorators=[{type:t.Directive,args:[{selector:"[cdkDragHandle]",host:{class:"cdk-drag-handle"}}]}],e.ctorParameters=function(){return[{type:t.ElementRef}]},e}(),l=new t.InjectionToken("CDK_DROP_CONTAINER"),d=function(){function e(e){this.templateRef=e}return e.decorators=[{type:t.Directive,args:[{selector:"ng-template[cdkDragPreview]"}]}],e.ctorParameters=function(){return[{type:t.TemplateRef}]},e.propDecorators={data:[{type:t.Input}]},e}(),c=function(){function e(e){this.templateRef=e}return e.decorators=[{type:t.Directive,args:[{selector:"ng-template[cdkDragPlaceholder]"}]}],e.ctorParameters=function(){return[{type:t.TemplateRef}]},e.propDecorators={data:[{type:t.Input}]},e}(),u=!!i.supportsPassiveEventListeners()&&{passive:!1},h=function(){function e(e,n,r,i,o,s,a){var p=this;this.element=e,this.dropContainer=n,this._ngZone=i,this._viewContainerRef=o,this._viewportRuler=s,this._dir=a,this._passiveTransform={x:0,y:0},this._activeTransform={x:0,y:0},this._isDragging=!1,this._hasMoved=!1,this.started=new t.EventEmitter,this.ended=new t.EventEmitter,this.entered=new t.EventEmitter,this.exited=new t.EventEmitter,this.dropped=new t.EventEmitter,this._pointerDown=function(e,t){if(!p._isDragging&&(p._isDragging=!0,p._initialContainer=p.dropContainer,p._scrollPosition=p._viewportRuler.getViewportScrollPosition(),p._pickupPositionInElement=p._previewTemplate?{x:0,y:0}:p._getPointerPositionInElement(e,t),p._pickupPositionOnPage=p._getPointerPositionOnPage(t),p._registerMoveListeners(t),p.started.emit({source:p}),p.dropContainer)){var n=p.element.nativeElement,r=p._preview=p._createPreviewElement(),i=p._placeholder=p._createPlaceholderElement();n.style.display="none",p._document.body.appendChild(n.parentNode.replaceChild(i,n)),p._document.body.appendChild(r),p.dropContainer.start()}},this._pointerMove=function(e){if(p._isDragging)if(p._hasMoved=!0,e.preventDefault(),p.dropContainer)p._updateActiveDropContainer(e);else{var t=p._activeTransform,n=p._getPointerPositionOnPage(e),r=n.x,i=n.y;t.x=r-p._pickupPositionOnPage.x+p._passiveTransform.x,t.y=i-p._pickupPositionOnPage.y+p._passiveTransform.y,p._setTransform(p.element.nativeElement,t.x,t.y)}},this._pointerUp=function(){if(p._isDragging){if(p._removeDocumentEvents(),p._isDragging=!1,!p.dropContainer)return p._passiveTransform.x=p._activeTransform.x,p._passiveTransform.y=p._activeTransform.y,void p._ngZone.run(function(){return p.ended.emit({source:p})});p._animatePreviewToPlaceholder().then(function(){return p._cleanupDragArtifacts()})}},this._preventScrollListener=function(e){p._isDragging&&e.preventDefault()},this._document=r}return e.prototype.getPlaceholderElement=function(){return this._placeholder},e.prototype.ngAfterContentInit=function(){var e=this;this._ngZone.runOutsideAngular(function(){e._document.addEventListener("touchmove",e._preventScrollListener,u)})},e.prototype.ngOnDestroy=function(){this._removeDocumentEvents(),this._destroyPreview(),this._destroyPlaceholder(),this._document.removeEventListener("touchmove",this._preventScrollListener,u),this._isDragging&&this._removeElement(this.element.nativeElement)},e.prototype._startDragging=function(e){if(this._handles.length){var t=this._handles.find(function(t){var n=t.element.nativeElement,r=e.target;return!!r&&(r===n||n.contains(r))});t&&this._pointerDown(t.element,e)}else this._pointerDown(this.element,e)},e.prototype._cleanupDragArtifacts=function(){var e=this;this._destroyPreview(),this._placeholder.parentNode.insertBefore(this.element.nativeElement,this._placeholder),this._destroyPlaceholder(),this.element.nativeElement.style.display="",this._ngZone.run(function(){var t=e._getElementIndexInDom();e.ended.emit({source:e}),e.dropped.emit({item:e,currentIndex:t,previousIndex:e._initialContainer.getItemIndex(e),container:e.dropContainer,previousContainer:e._initialContainer}),e.dropContainer.drop(e,t,e._initialContainer)})},e.prototype._updateActiveDropContainer=function(e){var t=this,n=this._getPointerPositionOnPage(e),r=n.x,i=n.y,o=this.dropContainer._getSiblingContainerFromPosition(r,i);o&&this._ngZone.run(function(){t.exited.emit({item:t,container:t.dropContainer}),t.dropContainer.exit(t),t.entered.emit({item:t,container:o}),t.dropContainer=o,t.dropContainer.enter(t)}),this.dropContainer._sortItem(this,r,i),this._setTransform(this._preview,r-this._pickupPositionInElement.x,i-this._pickupPositionInElement.y)},e.prototype._createPreviewElement=function(){var e;if(this._previewTemplate){var t=this._viewContainerRef.createEmbeddedView(this._previewTemplate.templateRef,this._previewTemplate.data);e=t.rootNodes[0],this._previewRef=t,this._setTransform(e,this._pickupPositionOnPage.x,this._pickupPositionOnPage.y)}else{var n=this.element.nativeElement,r=n.getBoundingClientRect();e=n.cloneNode(!0),e.style.width=r.width+"px",e.style.height=r.height+"px",this._setTransform(e,r.left,r.top)}return e.classList.add("cdk-drag-preview"),e.setAttribute("dir",this._dir?this._dir.value:"ltr"),e},e.prototype._createPlaceholderElement=function(){var e;return this._placeholderTemplate?(this._placeholderRef=this._viewContainerRef.createEmbeddedView(this._placeholderTemplate.templateRef,this._placeholderTemplate.data),e=this._placeholderRef.rootNodes[0]):e=this.element.nativeElement.cloneNode(!0),e.classList.add("cdk-drag-placeholder"),e},e.prototype._getElementIndexInDom=function(){var e=this,t=this.element.nativeElement;if(!t.parentElement)return-1;for(var n=0,r=t.parentElement.children,i=r.length,o=this.dropContainer._draggables.filter(function(t){return t!==e}).map(function(e){return e.element.nativeElement}),s=0;s<i;s++){if(r[s]===t)return n;o.indexOf(r[s])>-1&&n++}return-1},e.prototype._getPointerPositionInElement=function(e,t){var n=this.element.nativeElement.getBoundingClientRect(),r=e===this.element?null:e.nativeElement,i=r?r.getBoundingClientRect():n,o=this._isTouchEvent(t)?t.targetTouches[0].pageX-i.left-this._scrollPosition.left:t.offsetX,s=this._isTouchEvent(t)?t.targetTouches[0].pageY-i.top-this._scrollPosition.top:t.offsetY;return{x:i.left-n.left+o,y:i.top-n.top+s}},e.prototype._animatePreviewToPlaceholder=function(){var e=this;if(!this._hasMoved)return Promise.resolve();var t=this._placeholder.getBoundingClientRect();this._preview.classList.add("cdk-drag-animating"),this._setTransform(this._preview,t.left,t.top);var n=getComputedStyle(this._preview).getPropertyValue("transition-duration");return 0===parseFloat(n)?Promise.resolve():this._ngZone.runOutsideAngular(function(){return new Promise(function(t){var n=function(r){r.target===e._preview&&(e._preview.removeEventListener("transitionend",n),t())};e._preview.addEventListener("transitionend",n)})})},e.prototype._setTransform=function(e,t,n){e.style.transform="translate3d("+t+"px, "+n+"px, 0)"},e.prototype._removeElement=function(e){e&&e.parentNode&&e.parentNode.removeChild(e)},e.prototype._removeDocumentEvents=function(){this._document.removeEventListener("mousemove",this._pointerMove,u),this._document.removeEventListener("touchmove",this._pointerMove,u),this._document.removeEventListener("mouseup",this._pointerUp),this._document.removeEventListener("touchend",this._pointerUp)},e.prototype._getPointerPositionOnPage=function(e){var t=this._isTouchEvent(e)?e.touches[0]:e;return{x:t.pageX-this._scrollPosition.left,y:t.pageY-this._scrollPosition.top}},e.prototype._isTouchEvent=function(e){return e.type.startsWith("touch")},e.prototype._destroyPreview=function(){this._preview&&this._removeElement(this._preview),this._previewRef&&this._previewRef.destroy(),this._preview=this._previewRef=null},e.prototype._destroyPlaceholder=function(){this._placeholder&&this._removeElement(this._placeholder),this._placeholderRef&&this._placeholderRef.destroy(),this._placeholder=this._placeholderRef=null},e.prototype._registerMoveListeners=function(e){var t=this;this._ngZone.runOutsideAngular(function(){var n=t._isTouchEvent(e);t._document.addEventListener(n?"touchmove":"mousemove",t._pointerMove,u),t._document.addEventListener(n?"touchend":"mouseup",t._pointerUp)})},e.decorators=[{type:t.Directive,args:[{selector:"[cdkDrag]",exportAs:"cdkDrag",host:{class:"cdk-drag","(mousedown)":"_startDragging($event)","(touchstart)":"_startDragging($event)"}}]}],e.ctorParameters=function(){return[{type:t.ElementRef},{type:void 0,decorators:[{type:t.Inject,args:[l]},{type:t.Optional},{type:t.SkipSelf}]},{type:void 0,decorators:[{type:t.Inject,args:[n.DOCUMENT]}]},{type:t.NgZone},{type:t.ViewContainerRef},{type:o.ViewportRuler},{type:r.Directionality,decorators:[{type:t.Optional}]}]},e.propDecorators={_handles:[{type:t.ContentChildren,args:[p]}],_previewTemplate:[{type:t.ContentChild,args:[d]}],_placeholderTemplate:[{type:t.ContentChild,args:[c]}],started:[{type:t.Output,args:["cdkDragStarted"]}],ended:[{type:t.Output,args:["cdkDragEnded"]}],entered:[{type:t.Output,args:["cdkDragEntered"]}],exited:[{type:t.Output,args:["cdkDragExited"]}],dropped:[{type:t.Output,args:["cdkDragDropped"]}]},e}(),g=function(){function e(e){this.element=e,this.connectedTo=[],this.orientation="vertical",this.dropped=new t.EventEmitter,this.entered=new t.EventEmitter,this.exited=new t.EventEmitter,this._dragging=!1,this._positionCache={items:[],siblings:[]}}return e.prototype.start=function(){this._dragging=!0,this._refreshPositions()},e.prototype.drop=function(e,t,n){this.dropped.emit({item:e,currentIndex:t,previousIndex:n.getItemIndex(e),container:this,previousContainer:n}),this._reset()},e.prototype.enter=function(e){this.entered.emit({item:e,container:this}),this.start()},e.prototype.exit=function(e){this._reset(),this.exited.emit({item:e,container:this})},e.prototype.getItemIndex=function(e){return this._draggables.toArray().indexOf(e)},e.prototype._sortItem=function(e,t,n){var r=this,i=this._positionCache.items,o=i.find(function(i){var o=i.drag,s=i.clientRect;return o!==e&&("horizontal"===r.orientation?t>s.left&&t<s.right:n>s.top&&n<s.bottom)});if(o||!(i.length>0)){var s=o?o.drag.element.nativeElement:null,a=s?s.nextSibling:null,p=s?s.parentElement:this.element.nativeElement,l=e.getPlaceholderElement();a?p.insertBefore(l,a===l?s:a):p.appendChild(l),this._refreshPositions()}},e.prototype._getSiblingContainerFromPosition=function(e,t){var n=this._positionCache.siblings.find(function(n){var r=n.clientRect,i=r.top,o=r.bottom,s=r.left,a=r.right;return t>=i&&t<=o&&e>=s&&e<=a});return n?n.drop:null},e.prototype._refreshPositions=function(){this._positionCache.items=this._draggables.map(function(e){return{drag:e,clientRect:e.element.nativeElement.getBoundingClientRect()}}).sort(function(e,t){return e.clientRect.top-t.clientRect.top}),this._positionCache.siblings=this.connectedTo.map(function(e){return{drop:e,clientRect:e.element.nativeElement.getBoundingClientRect()}})},e.prototype._reset=function(){this._dragging=!1,this._positionCache.items=[],this._positionCache.siblings=[]},e.decorators=[{type:t.Component,args:[{selector:"cdk-drop",exportAs:"cdkDrop",template:"<ng-content></ng-content>",encapsulation:t.ViewEncapsulation.None,changeDetection:t.ChangeDetectionStrategy.OnPush,styles:[".cdk-drag-preview{position:fixed;top:0;left:0;z-index:1000}"],providers:[{provide:l,useExisting:e}],host:{class:"cdk-drop","[class.cdk-drop-dragging]":"_dragging"}}]}],e.ctorParameters=function(){return[{type:t.ElementRef}]},e.propDecorators={_draggables:[{type:t.ContentChildren,args:[t.forwardRef(function(){return h})]}],connectedTo:[{type:t.Input}],data:[{type:t.Input}],orientation:[{type:t.Input}],dropped:[{type:t.Output}],entered:[{type:t.Output}],exited:[{type:t.Output}]},e}(),m=function(){function e(){}return e.decorators=[{type:t.NgModule,args:[{declarations:[g,h,p,d,c],exports:[g,h,p,d,c]}]}],e}();e.CdkDrop=g,e.CdkDrag=h,e.CdkDragHandle=p,e.moveItemInArray=s,e.transferArrayItem=a,e.CdkDragPreview=d,e.CdkDragPlaceholder=c,e.DragDropModule=m,e.ɵb=l,Object.defineProperty(e,"__esModule",{value:!0})});
 //# sourceMappingURL=cdk-experimental-drag-drop.umd.min.js.map

bundles/cdk-experimental.umd.js

@@ -9,6 +9,6 @@ /**
 (function (global, factory) {
-	typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core')) :
-	typeof define === 'function' && define.amd ? define('@angular/cdk-experimental', ['exports', '@angular/core'], factory) :
-	(factory((global.ng = global.ng || {}, global.ng['cdk-experimental'] = {}),global.ng.core));
-}(this, (function (exports,core) { 'use strict';
+	typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/cdk-experimental/scrolling')) :
+	typeof define === 'function' && define.amd ? define('@angular/cdk-experimental', ['exports', '@angular/core', '@angular/cdk-experimental/scrolling'], factory) :
+	(factory((global.ng = global.ng || {}, global.ng['cdk-experimental'] = {}),global.ng.core,global.ng.cdkExperimental.scrolling));
+}(this, (function (exports,core,scrolling) { 'use strict';
 
@@ -22,4 +22,15 @@ /**
  */
-var /** @type {?} */ VERSION = new core.Version('6.3.2');
+var /** @type {?} */ VERSION = new core.Version('6.3.3');
 
+exports.ItemSizeAverager = scrolling.ItemSizeAverager;
+exports.AutoSizeVirtualScrollStrategy = scrolling.AutoSizeVirtualScrollStrategy;
+exports._autoSizeVirtualScrollStrategyFactory = scrolling._autoSizeVirtualScrollStrategyFactory;
+exports.CdkAutoSizeVirtualScroll = scrolling.CdkAutoSizeVirtualScroll;
+exports.FixedSizeVirtualScrollStrategy = scrolling.FixedSizeVirtualScrollStrategy;
+exports._fixedSizeVirtualScrollStrategyFactory = scrolling._fixedSizeVirtualScrollStrategyFactory;
+exports.CdkFixedSizeVirtualScroll = scrolling.CdkFixedSizeVirtualScroll;
+exports.ScrollingModule = scrolling.ScrollingModule;
+exports.CdkVirtualForOf = scrolling.CdkVirtualForOf;
+exports.VIRTUAL_SCROLL_STRATEGY = scrolling.VIRTUAL_SCROLL_STRATEGY;
+exports.CdkVirtualScrollViewport = scrolling.CdkVirtualScrollViewport;
 exports.VERSION = VERSION;
@@ -26,0 +37,0 @@

bundles/cdk-experimental.umd.min.js

@@ -8,3 +8,3 @@ /**
  */
-!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports,require("@angular/core")):"function"==typeof define&&define.amd?define("@angular/cdk-experimental",["exports","@angular/core"],n):n((e.ng=e.ng||{},e.ng["cdk-experimental"]={}),e.ng.core)}(this,function(e,n){"use strict";var r=new n.Version("6.3.2");e.VERSION=r,Object.defineProperty(e,"__esModule",{value:!0})});
+!function(e,r){"object"==typeof exports&&"undefined"!=typeof module?r(exports,require("@angular/core"),require("@angular/cdk-experimental/scrolling")):"function"==typeof define&&define.amd?define("@angular/cdk-experimental",["exports","@angular/core","@angular/cdk-experimental/scrolling"],r):r((e.ng=e.ng||{},e.ng["cdk-experimental"]={}),e.ng.core,e.ng.cdkExperimental.scrolling)}(this,function(e,r,l){"use strict";var t=new r.Version("6.3.3");e.ItemSizeAverager=l.ItemSizeAverager,e.AutoSizeVirtualScrollStrategy=l.AutoSizeVirtualScrollStrategy,e._autoSizeVirtualScrollStrategyFactory=l._autoSizeVirtualScrollStrategyFactory,e.CdkAutoSizeVirtualScroll=l.CdkAutoSizeVirtualScroll,e.FixedSizeVirtualScrollStrategy=l.FixedSizeVirtualScrollStrategy,e._fixedSizeVirtualScrollStrategyFactory=l._fixedSizeVirtualScrollStrategyFactory,e.CdkFixedSizeVirtualScroll=l.CdkFixedSizeVirtualScroll,e.ScrollingModule=l.ScrollingModule,e.CdkVirtualForOf=l.CdkVirtualForOf,e.VIRTUAL_SCROLL_STRATEGY=l.VIRTUAL_SCROLL_STRATEGY,e.CdkVirtualScrollViewport=l.CdkVirtualScrollViewport,e.VERSION=t,Object.defineProperty(e,"__esModule",{value:!0})});
 //# sourceMappingURL=cdk-experimental.umd.min.js.map

drag-drop/typings/drag.d.ts

@@ -8,3 +8,4 @@ /**
  */
-import { ElementRef, AfterContentInit, NgZone, OnDestroy, EventEmitter, ViewContainerRef } from '@angular/core';
+import { ElementRef, AfterContentInit, NgZone, OnDestroy, EventEmitter, ViewContainerRef, QueryList } from '@angular/core';
+import { Directionality } from '@angular/cdk/bidi';
 import { CdkDragHandle } from './drag-handle';
@@ -15,2 +16,3 @@ import { CdkDropContainer } from './drop-container';
 import { CdkDragPlaceholder } from './drag-placeholder';
+import { ViewportRuler } from '@angular/cdk/overlay';
 /** Element that can be moved inside a CdkDrop container. */
@@ -24,2 +26,4 @@ export declare class CdkDrag implements AfterContentInit, OnDestroy {
     private _viewContainerRef;
+    private _viewportRuler;
+    private _dir;
     private _document;
@@ -53,4 +57,6 @@ /** Element displayed next to the user's pointer while the element is dragged. */
     private _initialContainer;
-    /** Element that can be used to drag the draggable item. */
-    _handle: CdkDragHandle;
+    /** Cached scroll position on the page when the element was picked up. */
+    private _scrollPosition;
+    /** Elements that can be used to drag the draggable item. */
+    _handles: QueryList<CdkDragHandle>;
     /** Element that will be used as a template to create the draggable item's preview. */
@@ -76,3 +82,3 @@ _previewTemplate: CdkDragPreview;
         /** Droppable container that the draggable is a part of. */
-        dropContainer: CdkDropContainer, document: any, _ngZone: NgZone, _viewContainerRef: ViewContainerRef);
+        dropContainer: CdkDropContainer, document: any, _ngZone: NgZone, _viewContainerRef: ViewContainerRef, _viewportRuler: ViewportRuler, _dir: Directionality);
     /**
@@ -85,2 +91,4 @@ * Returns the element that is being used as a placeholder
     ngOnDestroy(): void;
+    /** Starts the dragging sequence. */
+    _startDragging(event: MouseEvent | TouchEvent): void;
     /** Handler for when the pointer is pressed down on the element or the handle. */
@@ -110,5 +118,6 @@ private _pointerDown;
      * Figures out the coordinates at which an element was picked up.
+     * @param referenceElement Element that initiated the dragging.
      * @param event Event that initiated the dragging.
      */
-    private _getPointerPositionInElement(event);
+    private _getPointerPositionInElement(referenceElement, event);
     /**
@@ -115,0 +124,0 @@ * Animates the preview element from its current position to the location of the drop placeholder.

drag-drop/typings/drop-container.d.ts

@@ -14,2 +14,4 @@ /**
     data: T;
+    /** Direction in which the list is oriented. */
+    orientation: 'horizontal' | 'vertical';
     /** Starts dragging an item. */
@@ -39,3 +41,3 @@ start(): void;
     getItemIndex(item: CdkDrag): number;
-    _sortItem(item: CdkDrag, yOffset: number): void;
+    _sortItem(item: CdkDrag, xOffset: number, yOffset: number): void;
     _draggables: QueryList<CdkDrag>;
@@ -42,0 +44,0 @@ _getSiblingContainerFromPosition(x: number, y: number): CdkDropContainer | null;

drag-drop/typings/drop.d.ts

@@ -23,2 +23,4 @@ /**
     data: T;
+    /** Direction in which the list is oriented. */
+    orientation: 'horizontal' | 'vertical';
     /** Emits when the user drops an item inside the container. */
@@ -67,5 +69,6 @@ dropped: EventEmitter<CdkDragDrop<T, any>>;
      * @param item Item to be sorted.
+     * @param xOffset Position of the item along the X axis.
      * @param yOffset Position of the item along the Y axis.
      */
-    _sortItem(item: CdkDrag, yOffset: number): void;
+    _sortItem(item: CdkDrag, xOffset: number, yOffset: number): void;
     /**
@@ -72,0 +75,0 @@ * Figures out whether an item should be moved into a sibling

drag-drop/typings/index.metadata.json

@@ -1,1 +0,1 @@
-{"__symbolic":"module","version":4,"metadata":{"CdkDrop":{"__symbolic":"class","arity":1,"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":26,"character":1},"arguments":[{"moduleId":{"__symbolic":"select","expression":{"__symbolic":"reference","name":"module"},"member":"id"},"selector":"cdk-drop","exportAs":"cdkDrop","template":"<ng-content></ng-content>","encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation","line":31,"character":17},"member":"None"},"changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":32,"character":19},"member":"OnPush"},"providers":[{"provide":{"__symbolic":"reference","name":"ɵb"},"useExisting":{"__symbolic":"reference","name":"CdkDrop"}}],"host":{"class":"cdk-drop","[class.cdk-drop-dragging]":"_dragging","$quoted$":["class","[class.cdk-drop-dragging]"]},"styles":[".cdk-drag-preview{position:absolute;top:0;left:0;z-index:1000}"]}]}],"members":{"_draggables":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChildren","line":44,"character":3},"arguments":[{"__symbolic":"reference","name":"CdkDrag"}]}]}],"connectedTo":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":50,"character":3}}]}],"data":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":53,"character":3}}]}],"dropped":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":56,"character":3}}]}],"entered":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":61,"character":3}}]}],"exited":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":67,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"ElementRef","module":"@angular/core","arguments":[{"__symbolic":"error","message":"Could not resolve type","line":69,"character":41,"context":{"typeName":"HTMLElement"},"module":"./drop"}]}]}],"start":[{"__symbolic":"method"}],"drop":[{"__symbolic":"method"}],"enter":[{"__symbolic":"method"}],"exit":[{"__symbolic":"method"}],"getItemIndex":[{"__symbolic":"method"}],"_sortItem":[{"__symbolic":"method"}],"_getSiblingContainerFromPosition":[{"__symbolic":"method"}],"_refreshPositions":[{"__symbolic":"method"}],"_reset":[{"__symbolic":"method"}]}},"CdkDrag":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":38,"character":1},"arguments":[{"selector":"[cdkDrag]","exportAs":"cdkDrag","host":{"class":"cdk-drag","$quoted$":["class"]}}]}],"members":{"_handle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild","line":87,"character":3},"arguments":[{"__symbolic":"reference","name":"CdkDragHandle"}]}]}],"_previewTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild","line":90,"character":3},"arguments":[{"__symbolic":"reference","name":"CdkDragPreview"}]}]}],"_placeholderTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild","line":95,"character":3},"arguments":[{"__symbolic":"reference","name":"CdkDragPlaceholder"}]}]}],"started":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":98,"character":3},"arguments":["cdkDragStarted"]}]}],"ended":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":101,"character":3},"arguments":["cdkDragEnded"]}]}],"entered":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":104,"character":3},"arguments":["cdkDragEntered"]}]}],"exited":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":107,"character":3},"arguments":["cdkDragExited"]}]}],"dropped":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":110,"character":3},"arguments":["cdkDragDropped"]}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[null,[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":116,"character":5},"arguments":[{"__symbolic":"reference","name":"ɵb"}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional","line":116,"character":33}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"SkipSelf","line":116,"character":45}}],[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":117,"character":5},"arguments":[{"__symbolic":"reference","module":"@angular/platform-browser","name":"DOCUMENT","line":117,"character":12}]}],null,null],"parameters":[{"__symbolic":"reference","name":"ElementRef","module":"@angular/core","arguments":[{"__symbolic":"error","message":"Could not resolve type","line":114,"character":31,"context":{"typeName":"HTMLElement"},"module":"./drag"}]},{"__symbolic":"reference","name":"ɵa"},{"__symbolic":"reference","name":"any"},{"__symbolic":"reference","module":"@angular/core","name":"NgZone","line":118,"character":21},{"__symbolic":"reference","module":"@angular/core","name":"ViewContainerRef","line":119,"character":31}]}],"getPlaceholderElement":[{"__symbolic":"method"}],"ngAfterContentInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"_cleanupDragArtifacts":[{"__symbolic":"method"}],"_updateActiveDropContainer":[{"__symbolic":"method"}],"_createPreviewElement":[{"__symbolic":"method"}],"_createPlaceholderElement":[{"__symbolic":"method"}],"_getElementIndexInDom":[{"__symbolic":"method"}],"_getPointerPositionInElement":[{"__symbolic":"method"}],"_animatePreviewToPlaceholder":[{"__symbolic":"method"}],"_setTransform":[{"__symbolic":"method"}],"_removeElement":[{"__symbolic":"method"}],"_removeDocumentEvents":[{"__symbolic":"method"}],"_getPointerPositionOnPage":[{"__symbolic":"method"}],"_isTouchEvent":[{"__symbolic":"method"}],"_destroyPreview":[{"__symbolic":"method"}],"_destroyPlaceholder":[{"__symbolic":"method"}],"_registerMoveListeners":[{"__symbolic":"method"}]}},"CdkDragHandle":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":11,"character":1},"arguments":[{"selector":"[cdkDragHandle]","host":{"class":"cdk-drag-handle","$quoted$":["class"]}}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"ElementRef","module":"@angular/core","arguments":[{"__symbolic":"error","message":"Could not resolve type","line":18,"character":41,"context":{"typeName":"HTMLElement"},"module":"./drag-handle"}]}]}]}},"CdkDragStart":{"__symbolic":"interface"},"CdkDragEnd":{"__symbolic":"interface"},"CdkDragEnter":{"__symbolic":"interface"},"CdkDragExit":{"__symbolic":"interface"},"CdkDragDrop":{"__symbolic":"interface"},"moveItemInArray":{"__symbolic":"function"},"transferArrayItem":{"__symbolic":"function"},"CdkDragPreview":{"__symbolic":"class","arity":1,"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":14,"character":1},"arguments":[{"selector":"ng-template[cdkDragPreview]"}]}],"members":{"data":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":19,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"TemplateRef","module":"@angular/core","arguments":[{"__symbolic":"error","message":"Could not resolve type","line":20,"character":46,"context":{"typeName":"T"},"module":"./drag-preview"}]}]}]}},"CdkDragPlaceholder":{"__symbolic":"class","arity":1,"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":14,"character":1},"arguments":[{"selector":"ng-template[cdkDragPlaceholder]"}]}],"members":{"data":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":19,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"TemplateRef","module":"@angular/core","arguments":[{"__symbolic":"error","message":"Could not resolve type","line":20,"character":46,"context":{"typeName":"T"},"module":"./drag-placeholder"}]}]}]}},"DragDropModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":15,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"CdkDrop"},{"__symbolic":"reference","name":"CdkDrag"},{"__symbolic":"reference","name":"CdkDragHandle"},{"__symbolic":"reference","name":"CdkDragPreview"},{"__symbolic":"reference","name":"CdkDragPlaceholder"}],"exports":[{"__symbolic":"reference","name":"CdkDrop"},{"__symbolic":"reference","name":"CdkDrag"},{"__symbolic":"reference","name":"CdkDragHandle"},{"__symbolic":"reference","name":"CdkDragPreview"},{"__symbolic":"reference","name":"CdkDragPlaceholder"}]}]}],"members":{}},"ɵa":{"__symbolic":"interface"},"ɵb":{"__symbolic":"new","expression":{"__symbolic":"reference","module":"@angular/core","name":"InjectionToken","line":54,"character":38},"arguments":["CDK_DROP_CONTAINER"]}},"origins":{"CdkDrop":"./drop","CdkDrag":"./drag","CdkDragHandle":"./drag-handle","CdkDragStart":"./drag-events","CdkDragEnd":"./drag-events","CdkDragEnter":"./drag-events","CdkDragExit":"./drag-events","CdkDragDrop":"./drag-events","moveItemInArray":"./drag-utils","transferArrayItem":"./drag-utils","CdkDragPreview":"./drag-preview","CdkDragPlaceholder":"./drag-placeholder","DragDropModule":"./drag-drop-module","ɵa":"./drop-container","ɵb":"./drop-container"},"importAs":"@angular/cdk-experimental/drag-drop"}
+{"__symbolic":"module","version":4,"metadata":{"CdkDrop":{"__symbolic":"class","arity":1,"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":25,"character":1},"arguments":[{"moduleId":{"__symbolic":"select","expression":{"__symbolic":"reference","name":"module"},"member":"id"},"selector":"cdk-drop","exportAs":"cdkDrop","template":"<ng-content></ng-content>","encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation","line":30,"character":17},"member":"None"},"changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":31,"character":19},"member":"OnPush"},"providers":[{"provide":{"__symbolic":"reference","name":"ɵb"},"useExisting":{"__symbolic":"reference","name":"CdkDrop"}}],"host":{"class":"cdk-drop","[class.cdk-drop-dragging]":"_dragging","$quoted$":["class","[class.cdk-drop-dragging]"]},"styles":[".cdk-drag-preview{position:fixed;top:0;left:0;z-index:1000}"]}]}],"members":{"_draggables":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChildren","line":43,"character":3},"arguments":[{"__symbolic":"reference","name":"CdkDrag"}]}]}],"connectedTo":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":49,"character":3}}]}],"data":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":52,"character":3}}]}],"orientation":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":55,"character":3}}]}],"dropped":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":58,"character":3}}]}],"entered":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":63,"character":3}}]}],"exited":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":69,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"ElementRef","module":"@angular/core","arguments":[{"__symbolic":"error","message":"Could not resolve type","line":71,"character":41,"context":{"typeName":"HTMLElement"},"module":"./drop"}]}]}],"start":[{"__symbolic":"method"}],"drop":[{"__symbolic":"method"}],"enter":[{"__symbolic":"method"}],"exit":[{"__symbolic":"method"}],"getItemIndex":[{"__symbolic":"method"}],"_sortItem":[{"__symbolic":"method"}],"_getSiblingContainerFromPosition":[{"__symbolic":"method"}],"_refreshPositions":[{"__symbolic":"method"}],"_reset":[{"__symbolic":"method"}]}},"CdkDrag":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":42,"character":1},"arguments":[{"selector":"[cdkDrag]","exportAs":"cdkDrag","host":{"class":"cdk-drag","(mousedown)":"_startDragging($event)","(touchstart)":"_startDragging($event)","$quoted$":["class","(mousedown)","(touchstart)"]}}]}],"members":{"_handles":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChildren","line":96,"character":3},"arguments":[{"__symbolic":"reference","name":"CdkDragHandle"}]}]}],"_previewTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild","line":99,"character":3},"arguments":[{"__symbolic":"reference","name":"CdkDragPreview"}]}]}],"_placeholderTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild","line":104,"character":3},"arguments":[{"__symbolic":"reference","name":"CdkDragPlaceholder"}]}]}],"started":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":107,"character":3},"arguments":["cdkDragStarted"]}]}],"ended":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":110,"character":3},"arguments":["cdkDragEnded"]}]}],"entered":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":113,"character":3},"arguments":["cdkDragEntered"]}]}],"exited":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":116,"character":3},"arguments":["cdkDragExited"]}]}],"dropped":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":119,"character":3},"arguments":["cdkDragDropped"]}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[null,[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":125,"character":5},"arguments":[{"__symbolic":"reference","name":"ɵb"}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional","line":125,"character":33}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"SkipSelf","line":125,"character":45}}],[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":126,"character":5},"arguments":[{"__symbolic":"reference","module":"@angular/platform-browser","name":"DOCUMENT","line":126,"character":12}]}],null,null,null,[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional","line":130,"character":5}}]],"parameters":[{"__symbolic":"reference","name":"ElementRef","module":"@angular/core","arguments":[{"__symbolic":"error","message":"Could not resolve type","line":123,"character":31,"context":{"typeName":"HTMLElement"},"module":"./drag"}]},{"__symbolic":"reference","name":"ɵa"},{"__symbolic":"reference","name":"any"},{"__symbolic":"reference","module":"@angular/core","name":"NgZone","line":127,"character":21},{"__symbolic":"reference","module":"@angular/core","name":"ViewContainerRef","line":128,"character":31},{"__symbolic":"reference","module":"@angular/cdk/overlay","name":"ViewportRuler","line":129,"character":28},{"__symbolic":"reference","module":"@angular/cdk/bidi","name":"Directionality","line":130,"character":30}]}],"getPlaceholderElement":[{"__symbolic":"method"}],"ngAfterContentInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"_startDragging":[{"__symbolic":"method"}],"_cleanupDragArtifacts":[{"__symbolic":"method"}],"_updateActiveDropContainer":[{"__symbolic":"method"}],"_createPreviewElement":[{"__symbolic":"method"}],"_createPlaceholderElement":[{"__symbolic":"method"}],"_getElementIndexInDom":[{"__symbolic":"method"}],"_getPointerPositionInElement":[{"__symbolic":"method"}],"_animatePreviewToPlaceholder":[{"__symbolic":"method"}],"_setTransform":[{"__symbolic":"method"}],"_removeElement":[{"__symbolic":"method"}],"_removeDocumentEvents":[{"__symbolic":"method"}],"_getPointerPositionOnPage":[{"__symbolic":"method"}],"_isTouchEvent":[{"__symbolic":"method"}],"_destroyPreview":[{"__symbolic":"method"}],"_destroyPlaceholder":[{"__symbolic":"method"}],"_registerMoveListeners":[{"__symbolic":"method"}]}},"CdkDragHandle":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":11,"character":1},"arguments":[{"selector":"[cdkDragHandle]","host":{"class":"cdk-drag-handle","$quoted$":["class"]}}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"ElementRef","module":"@angular/core","arguments":[{"__symbolic":"error","message":"Could not resolve type","line":18,"character":41,"context":{"typeName":"HTMLElement"},"module":"./drag-handle"}]}]}]}},"CdkDragStart":{"__symbolic":"interface"},"CdkDragEnd":{"__symbolic":"interface"},"CdkDragEnter":{"__symbolic":"interface"},"CdkDragExit":{"__symbolic":"interface"},"CdkDragDrop":{"__symbolic":"interface"},"moveItemInArray":{"__symbolic":"function"},"transferArrayItem":{"__symbolic":"function"},"CdkDragPreview":{"__symbolic":"class","arity":1,"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":14,"character":1},"arguments":[{"selector":"ng-template[cdkDragPreview]"}]}],"members":{"data":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":19,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"TemplateRef","module":"@angular/core","arguments":[{"__symbolic":"error","message":"Could not resolve type","line":20,"character":46,"context":{"typeName":"T"},"module":"./drag-preview"}]}]}]}},"CdkDragPlaceholder":{"__symbolic":"class","arity":1,"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":14,"character":1},"arguments":[{"selector":"ng-template[cdkDragPlaceholder]"}]}],"members":{"data":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":19,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"TemplateRef","module":"@angular/core","arguments":[{"__symbolic":"error","message":"Could not resolve type","line":20,"character":46,"context":{"typeName":"T"},"module":"./drag-placeholder"}]}]}]}},"DragDropModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":15,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"CdkDrop"},{"__symbolic":"reference","name":"CdkDrag"},{"__symbolic":"reference","name":"CdkDragHandle"},{"__symbolic":"reference","name":"CdkDragPreview"},{"__symbolic":"reference","name":"CdkDragPlaceholder"}],"exports":[{"__symbolic":"reference","name":"CdkDrop"},{"__symbolic":"reference","name":"CdkDrag"},{"__symbolic":"reference","name":"CdkDragHandle"},{"__symbolic":"reference","name":"CdkDragPreview"},{"__symbolic":"reference","name":"CdkDragPlaceholder"}]}]}],"members":{}},"ɵa":{"__symbolic":"interface"},"ɵb":{"__symbolic":"new","expression":{"__symbolic":"reference","module":"@angular/core","name":"InjectionToken","line":57,"character":38},"arguments":["CDK_DROP_CONTAINER"]}},"origins":{"CdkDrop":"./drop","CdkDrag":"./drag","CdkDragHandle":"./drag-handle","CdkDragStart":"./drag-events","CdkDragEnd":"./drag-events","CdkDragEnter":"./drag-events","CdkDragExit":"./drag-events","CdkDragDrop":"./drag-events","moveItemInArray":"./drag-utils","transferArrayItem":"./drag-utils","CdkDragPreview":"./drag-preview","CdkDragPlaceholder":"./drag-placeholder","DragDropModule":"./drag-drop-module","ɵa":"./drop-container","ɵb":"./drop-container"},"importAs":"@angular/cdk-experimental/drag-drop"}

esm2015/cdk-experimental.js

@@ -9,2 +9,3 @@ /**
 import { Version } from '@angular/core';
+export { ItemSizeAverager, AutoSizeVirtualScrollStrategy, _autoSizeVirtualScrollStrategyFactory, CdkAutoSizeVirtualScroll, FixedSizeVirtualScrollStrategy, _fixedSizeVirtualScrollStrategyFactory, CdkFixedSizeVirtualScroll, ScrollingModule, CdkVirtualForOf, VIRTUAL_SCROLL_STRATEGY, CdkVirtualScrollViewport } from '@angular/cdk-experimental/scrolling';
 
@@ -18,3 +19,3 @@ /**
  */
-const /** @type {?} */ VERSION = new Version('6.3.2');
+const /** @type {?} */ VERSION = new Version('6.3.3');
 
@@ -21,0 +22,0 @@ /**

esm2015/drag-drop.js

@@ -8,5 +8,7 @@ /**
  */
-import { Directive, ElementRef, InjectionToken, TemplateRef, Input, ContentChild, Inject, Optional, NgZone, SkipSelf, Output, EventEmitter, ViewContainerRef, Component, ContentChildren, forwardRef, ViewEncapsulation, ChangeDetectionStrategy, NgModule } from '@angular/core';
+import { Directive, ElementRef, InjectionToken, TemplateRef, Input, ContentChild, Inject, Optional, NgZone, SkipSelf, Output, EventEmitter, ViewContainerRef, ContentChildren, Component, forwardRef, ViewEncapsulation, ChangeDetectionStrategy, NgModule } from '@angular/core';
 import { DOCUMENT } from '@angular/platform-browser';
+import { Directionality } from '@angular/cdk/bidi';
 import { supportsPassiveEventListeners } from '@angular/cdk/platform';
+import { ViewportRuler } from '@angular/cdk/overlay';
 
@@ -130,5 +132,7 @@ /**
      * @param {?} _viewContainerRef
+     * @param {?} _viewportRuler
+     * @param {?} _dir
      */
     constructor(element, /** Droppable container that the draggable is a part of. */
-    dropContainer, document, _ngZone, _viewContainerRef) {
+    dropContainer, document, _ngZone, _viewContainerRef, _viewportRuler, _dir) {
         this.element = element;
@@ -138,2 +142,4 @@ this.dropContainer = dropContainer;
         this._viewContainerRef = _viewContainerRef;
+        this._viewportRuler = _viewportRuler;
+        this._dir = _dir;
         /**
@@ -181,3 +187,3 @@ * CSS `transform` applied to the element when it isn't being dragged. We need a
          */
-        this._pointerDown = (event) => {
+        this._pointerDown = (referenceElement, event) => {
             if (this._isDragging) {
@@ -188,6 +194,7 @@ return;
             this._initialContainer = this.dropContainer;
+            this._scrollPosition = this._viewportRuler.getViewportScrollPosition();
             // If we have a custom preview template, the element won't be visible anyway so we avoid the
             // extra `getBoundingClientRect` calls and just move the preview next to the cursor.
             this._pickupPositionInElement = this._previewTemplate ? { x: 0, y: 0 } :
-                this._getPointerPositionInElement(event);
+                this._getPointerPositionInElement(referenceElement, event);
             this._pickupPositionOnPage = this._getPointerPositionOnPage(event);
@@ -272,7 +279,3 @@ this._registerMoveListeners(event);
     ngAfterContentInit() {
-        // TODO: doesn't handle (pun intended) the handle being destroyed
-        const /** @type {?} */ dragElement = (this._handle ? this._handle.element : this.element).nativeElement;
-        dragElement.addEventListener('mousedown', this._pointerDown);
-        dragElement.addEventListener('touchstart', this._pointerDown);
-        // Webkit won't preventDefault on a dynamically-added `touchmove` listener, which means that
+        // WebKit won't preventDefault on a dynamically-added `touchmove` listener, which means that
         // we need to add one ahead of time. See https://bugs.webkit.org/show_bug.cgi?id=184250.
@@ -299,2 +302,23 @@ // TODO: move into a central registry.
     /**
+     * Starts the dragging sequence.
+     * @param {?} event
+     * @return {?}
+     */
+    _startDragging(event) {
+        // Delegate the event based on whether it started from a handle or the element itself.
+        if (this._handles.length) {
+            const /** @type {?} */ targetHandle = this._handles.find(handle => {
+                const /** @type {?} */ element = handle.element.nativeElement;
+                const /** @type {?} */ target = event.target;
+                return !!target && (target === element || element.contains(/** @type {?} */ (target)));
+            });
+            if (targetHandle) {
+                this._pointerDown(targetHandle.element, event);
+            }
+        }
+        else {
+            this._pointerDown(this.element, event);
+        }
+    }
+    /**
      * Cleans up the DOM artifacts that were added to facilitate the element being dragged.
@@ -343,3 +367,3 @@ * @return {?}
         }
-        this.dropContainer._sortItem(this, y);
+        this.dropContainer._sortItem(this, x, y);
         this._setTransform(this._preview, x - this._pickupPositionInElement.x, y - this._pickupPositionInElement.y);
@@ -369,2 +393,3 @@ }
         preview.classList.add('cdk-drag-preview');
+        preview.setAttribute('dir', this._dir ? this._dir.value : 'ltr');
         return preview;
@@ -422,12 +447,15 @@ }
      * Figures out the coordinates at which an element was picked up.
+     * @param {?} referenceElement Element that initiated the dragging.
      * @param {?} event Event that initiated the dragging.
      * @return {?}
      */
-    _getPointerPositionInElement(event) {
+    _getPointerPositionInElement(referenceElement, event) {
         const /** @type {?} */ elementRect = this.element.nativeElement.getBoundingClientRect();
-        const /** @type {?} */ handleElement = this._handle ? this._handle.element.nativeElement : null;
+        const /** @type {?} */ handleElement = referenceElement === this.element ? null : referenceElement.nativeElement;
         const /** @type {?} */ referenceRect = handleElement ? handleElement.getBoundingClientRect() : elementRect;
-        const /** @type {?} */ x = this._isTouchEvent(event) ? event.targetTouches[0].pageX - referenceRect.left :
+        const /** @type {?} */ x = this._isTouchEvent(event) ?
+            event.targetTouches[0].pageX - referenceRect.left - this._scrollPosition.left :
             event.offsetX;
-        const /** @type {?} */ y = this._isTouchEvent(event) ? event.targetTouches[0].pageY - referenceRect.top :
+        const /** @type {?} */ y = this._isTouchEvent(event) ?
+            event.targetTouches[0].pageY - referenceRect.top - this._scrollPosition.top :
             event.offsetY;
@@ -509,4 +537,7 @@ return {
     _getPointerPositionOnPage(event) {
-        return this._isTouchEvent(event) ? { x: event.touches[0].pageX, y: event.touches[0].pageY } :
-            { x: event.pageX, y: event.pageY };
+        const /** @type {?} */ point = this._isTouchEvent(event) ? event.touches[0] : event;
+        return {
+            x: point.pageX - this._scrollPosition.left,
+            y: point.pageY - this._scrollPosition.top
+        };
     }
@@ -570,2 +601,4 @@ /**
                     'class': 'cdk-drag',
+                    '(mousedown)': '_startDragging($event)',
+                    '(touchstart)': '_startDragging($event)',
                 }
@@ -581,5 +614,7 @@ },] },
     { type: ViewContainerRef, },
+    { type: ViewportRuler, },
+    { type: Directionality, decorators: [{ type: Optional },] },
 ];
 CdkDrag.propDecorators = {
-    "_handle": [{ type: ContentChild, args: [CdkDragHandle,] },],
+    "_handles": [{ type: ContentChildren, args: [CdkDragHandle,] },],
     "_previewTemplate": [{ type: ContentChild, args: [CdkDragPreview,] },],
@@ -614,2 +649,6 @@ "_placeholderTemplate": [{ type: ContentChild, args: [CdkDragPlaceholder,] },],
         /**
+         * Direction in which the list is oriented.
+         */
+        this.orientation = 'vertical';
+        /**
          * Emits when the user drops an item inside the container.
@@ -694,10 +733,15 @@ */
      * @param {?} item Item to be sorted.
+     * @param {?} xOffset Position of the item along the X axis.
      * @param {?} yOffset Position of the item along the Y axis.
      * @return {?}
      */
-    _sortItem(item, yOffset) {
-        // TODO: only covers Y axis sorting.
+    _sortItem(item, xOffset, yOffset) {
         const /** @type {?} */ siblings = this._positionCache.items;
         const /** @type {?} */ newPosition = siblings.find(({ drag, clientRect }) => {
-            return drag !== item && yOffset > clientRect.top && yOffset < clientRect.bottom;
+            if (drag === item) {
+                return false;
+            }
+            return this.orientation === 'horizontal' ?
+                xOffset > clientRect.left && xOffset < clientRect.right :
+                yOffset > clientRect.top && yOffset < clientRect.bottom;
         });
@@ -761,3 +805,3 @@ if (!newPosition && siblings.length > 0) {
                 changeDetection: ChangeDetectionStrategy.OnPush,
-                styles: [".cdk-drag-preview{position:absolute;top:0;left:0;z-index:1000}"],
+                styles: [".cdk-drag-preview{position:fixed;top:0;left:0;z-index:1000}"],
                 providers: [
@@ -780,2 +824,3 @@ { provide: CDK_DROP_CONTAINER, useExisting: CdkDrop },
     "data": [{ type: Input },],
+    "orientation": [{ type: Input },],
     "dropped": [{ type: Output },],
@@ -782,0 +827,0 @@ "entered": [{ type: Output },],

esm5/cdk-experimental.es5.js

@@ -9,2 +9,3 @@ /**
 import { Version } from '@angular/core';
+export { ItemSizeAverager, AutoSizeVirtualScrollStrategy, _autoSizeVirtualScrollStrategyFactory, CdkAutoSizeVirtualScroll, FixedSizeVirtualScrollStrategy, _fixedSizeVirtualScrollStrategyFactory, CdkFixedSizeVirtualScroll, ScrollingModule, CdkVirtualForOf, VIRTUAL_SCROLL_STRATEGY, CdkVirtualScrollViewport } from '@angular/cdk-experimental/scrolling';
 
@@ -18,3 +19,3 @@ /**
  */
-var /** @type {?} */ VERSION = new Version('6.3.2');
+var /** @type {?} */ VERSION = new Version('6.3.3');
 
@@ -21,0 +22,0 @@ /**

esm5/drag-drop.es5.js

@@ -8,5 +8,7 @@ /**
  */
-import { Directive, ElementRef, InjectionToken, TemplateRef, Input, ContentChild, Inject, Optional, NgZone, SkipSelf, Output, EventEmitter, ViewContainerRef, Component, ContentChildren, forwardRef, ViewEncapsulation, ChangeDetectionStrategy, NgModule } from '@angular/core';
+import { Directive, ElementRef, InjectionToken, TemplateRef, Input, ContentChild, Inject, Optional, NgZone, SkipSelf, Output, EventEmitter, ViewContainerRef, ContentChildren, Component, forwardRef, ViewEncapsulation, ChangeDetectionStrategy, NgModule } from '@angular/core';
 import { DOCUMENT } from '@angular/platform-browser';
+import { Directionality } from '@angular/cdk/bidi';
 import { supportsPassiveEventListeners } from '@angular/cdk/platform';
+import { ViewportRuler } from '@angular/cdk/overlay';
 
@@ -119,3 +121,3 @@ /**
     function CdkDrag(element, /** Droppable container that the draggable is a part of. */
-    dropContainer, document, _ngZone, _viewContainerRef) {
+    dropContainer, document, _ngZone, _viewContainerRef, _viewportRuler, _dir) {
         var _this = this;
@@ -126,2 +128,4 @@ this.element = element;
         this._viewContainerRef = _viewContainerRef;
+        this._viewportRuler = _viewportRuler;
+        this._dir = _dir;
         /**
@@ -169,3 +173,3 @@ * CSS `transform` applied to the element when it isn't being dragged. We need a
          */
-        this._pointerDown = function (event) {
+        this._pointerDown = function (referenceElement, event) {
             if (_this._isDragging) {
@@ -176,2 +180,3 @@ return;
             _this._initialContainer = _this.dropContainer;
+            _this._scrollPosition = _this._viewportRuler.getViewportScrollPosition();
             // If we have a custom preview template, the element won't be visible anyway so we avoid the
@@ -182,3 +187,3 @@ // extra `getBoundingClientRect` calls and just move the preview next to the cursor.
             _this._pickupPositionInElement = _this._previewTemplate ? { x: 0, y: 0 } :
-                _this._getPointerPositionInElement(event);
+                _this._getPointerPositionInElement(referenceElement, event);
             _this._pickupPositionOnPage = _this._getPointerPositionOnPage(event);
@@ -280,7 +285,3 @@ _this._registerMoveListeners(event);
         var _this = this;
-        // TODO: doesn't handle (pun intended) the handle being destroyed
-        var /** @type {?} */ dragElement = (this._handle ? this._handle.element : this.element).nativeElement;
-        dragElement.addEventListener('mousedown', this._pointerDown);
-        dragElement.addEventListener('touchstart', this._pointerDown);
-        // Webkit won't preventDefault on a dynamically-added `touchmove` listener, which means that
+        // WebKit won't preventDefault on a dynamically-added `touchmove` listener, which means that
         // we need to add one ahead of time. See https://bugs.webkit.org/show_bug.cgi?id=184250.
@@ -309,3 +310,30 @@ // TODO: move into a central registry.
     };
+    /** Starts the dragging sequence. */
     /**
+     * Starts the dragging sequence.
+     * @param {?} event
+     * @return {?}
+     */
+    CdkDrag.prototype._startDragging = /**
+     * Starts the dragging sequence.
+     * @param {?} event
+     * @return {?}
+     */
+    function (event) {
+        // Delegate the event based on whether it started from a handle or the element itself.
+        if (this._handles.length) {
+            var /** @type {?} */ targetHandle = this._handles.find(function (handle) {
+                var /** @type {?} */ element = handle.element.nativeElement;
+                var /** @type {?} */ target = event.target;
+                return !!target && (target === element || element.contains(/** @type {?} */ (target)));
+            });
+            if (targetHandle) {
+                this._pointerDown(targetHandle.element, event);
+            }
+        }
+        else {
+            this._pointerDown(this.element, event);
+        }
+    };
+    /**
      * Cleans up the DOM artifacts that were added to facilitate the element being dragged.
@@ -368,3 +396,3 @@ * @return {?}
         }
-        this.dropContainer._sortItem(this, y);
+        this.dropContainer._sortItem(this, x, y);
         this._setTransform(this._preview, x - this._pickupPositionInElement.x, y - this._pickupPositionInElement.y);
@@ -399,2 +427,3 @@ };
         preview.classList.add('cdk-drag-preview');
+        preview.setAttribute('dir', this._dir ? this._dir.value : 'ltr');
         return preview;
@@ -461,2 +490,3 @@ };
      * Figures out the coordinates at which an element was picked up.
+     * @param {?} referenceElement Element that initiated the dragging.
      * @param {?} event Event that initiated the dragging.
@@ -467,12 +497,15 @@ * @return {?}
      * Figures out the coordinates at which an element was picked up.
+     * @param {?} referenceElement Element that initiated the dragging.
      * @param {?} event Event that initiated the dragging.
      * @return {?}
      */
-    function (event) {
+    function (referenceElement, event) {
         var /** @type {?} */ elementRect = this.element.nativeElement.getBoundingClientRect();
-        var /** @type {?} */ handleElement = this._handle ? this._handle.element.nativeElement : null;
+        var /** @type {?} */ handleElement = referenceElement === this.element ? null : referenceElement.nativeElement;
         var /** @type {?} */ referenceRect = handleElement ? handleElement.getBoundingClientRect() : elementRect;
-        var /** @type {?} */ x = this._isTouchEvent(event) ? event.targetTouches[0].pageX - referenceRect.left :
+        var /** @type {?} */ x = this._isTouchEvent(event) ?
+            event.targetTouches[0].pageX - referenceRect.left - this._scrollPosition.left :
             event.offsetX;
-        var /** @type {?} */ y = this._isTouchEvent(event) ? event.targetTouches[0].pageY - referenceRect.top :
+        var /** @type {?} */ y = this._isTouchEvent(event) ?
+            event.targetTouches[0].pageY - referenceRect.top - this._scrollPosition.top :
             event.offsetY;
@@ -580,4 +613,7 @@ return {
     function (event) {
-        return this._isTouchEvent(event) ? { x: event.touches[0].pageX, y: event.touches[0].pageY } :
-            { x: event.pageX, y: event.pageY };
+        var /** @type {?} */ point = this._isTouchEvent(event) ? event.touches[0] : event;
+        return {
+            x: point.pageX - this._scrollPosition.left,
+            y: point.pageY - this._scrollPosition.top
+        };
     };
@@ -663,2 +699,4 @@ /**
                         'class': 'cdk-drag',
+                        '(mousedown)': '_startDragging($event)',
+                        '(touchstart)': '_startDragging($event)',
                     }
@@ -674,5 +712,7 @@ },] },
         { type: ViewContainerRef, },
+        { type: ViewportRuler, },
+        { type: Directionality, decorators: [{ type: Optional },] },
     ]; };
     CdkDrag.propDecorators = {
-        "_handle": [{ type: ContentChild, args: [CdkDragHandle,] },],
+        "_handles": [{ type: ContentChildren, args: [CdkDragHandle,] },],
         "_previewTemplate": [{ type: ContentChild, args: [CdkDragPreview,] },],
@@ -706,2 +746,6 @@ "_placeholderTemplate": [{ type: ContentChild, args: [CdkDragPlaceholder,] },],
         /**
+         * Direction in which the list is oriented.
+         */
+        this.orientation = 'vertical';
+        /**
          * Emits when the user drops an item inside the container.
@@ -831,2 +875,3 @@ */
      * @param item Item to be sorted.
+     * @param xOffset Position of the item along the X axis.
      * @param yOffset Position of the item along the Y axis.
@@ -837,2 +882,3 @@ */
      * @param {?} item Item to be sorted.
+     * @param {?} xOffset Position of the item along the X axis.
      * @param {?} yOffset Position of the item along the Y axis.
@@ -844,11 +890,17 @@ * @return {?}
      * @param {?} item Item to be sorted.
+     * @param {?} xOffset Position of the item along the X axis.
      * @param {?} yOffset Position of the item along the Y axis.
      * @return {?}
      */
-    function (item, yOffset) {
-        // TODO: only covers Y axis sorting.
+    function (item, xOffset, yOffset) {
+        var _this = this;
         var /** @type {?} */ siblings = this._positionCache.items;
         var /** @type {?} */ newPosition = siblings.find(function (_a) {
             var drag = _a.drag, clientRect = _a.clientRect;
-            return drag !== item && yOffset > clientRect.top && yOffset < clientRect.bottom;
+            if (drag === item) {
+                return false;
+            }
+            return _this.orientation === 'horizontal' ?
+                xOffset > clientRect.left && xOffset < clientRect.right :
+                yOffset > clientRect.top && yOffset < clientRect.bottom;
         });
@@ -933,3 +985,3 @@ if (!newPosition && siblings.length > 0) {
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    styles: [".cdk-drag-preview{position:absolute;top:0;left:0;z-index:1000}"],
+                    styles: [".cdk-drag-preview{position:fixed;top:0;left:0;z-index:1000}"],
                     providers: [
@@ -952,2 +1004,3 @@ { provide: CDK_DROP_CONTAINER, useExisting: CdkDrop },
         "data": [{ type: Input },],
+        "orientation": [{ type: Input },],
         "dropped": [{ type: Output },],
@@ -954,0 +1007,0 @@ "entered": [{ type: Output },],

package.json

 {
   "name": "@angular/cdk-experimental",
-  "version": "6.3.2",
+  "version": "6.3.3",
   "description": "Experimental components for Angular CDK",
@@ -19,3 +19,3 @@ "main": "./bundles/cdk-experimental.umd.js",
   "peerDependencies": {
-    "@angular/cdk": "6.3.2",
+    "@angular/cdk": "6.3.3",
     "@angular/core": ">=6.0.0-beta.0 <7.0.0"
@@ -22,0 +22,0 @@ },

typings/drag-drop/drag.d.ts

@@ -8,3 +8,4 @@ /**
  */
-import { ElementRef, AfterContentInit, NgZone, OnDestroy, EventEmitter, ViewContainerRef } from '@angular/core';
+import { ElementRef, AfterContentInit, NgZone, OnDestroy, EventEmitter, ViewContainerRef, QueryList } from '@angular/core';
+import { Directionality } from '@angular/cdk/bidi';
 import { CdkDragHandle } from './drag-handle';
@@ -15,2 +16,3 @@ import { CdkDropContainer } from './drop-container';
 import { CdkDragPlaceholder } from './drag-placeholder';
+import { ViewportRuler } from '@angular/cdk/overlay';
 /** Element that can be moved inside a CdkDrop container. */
@@ -24,2 +26,4 @@ export declare class CdkDrag implements AfterContentInit, OnDestroy {
     private _viewContainerRef;
+    private _viewportRuler;
+    private _dir;
     private _document;
@@ -53,4 +57,6 @@ /** Element displayed next to the user's pointer while the element is dragged. */
     private _initialContainer;
-    /** Element that can be used to drag the draggable item. */
-    _handle: CdkDragHandle;
+    /** Cached scroll position on the page when the element was picked up. */
+    private _scrollPosition;
+    /** Elements that can be used to drag the draggable item. */
+    _handles: QueryList<CdkDragHandle>;
     /** Element that will be used as a template to create the draggable item's preview. */
@@ -76,3 +82,3 @@ _previewTemplate: CdkDragPreview;
         /** Droppable container that the draggable is a part of. */
-        dropContainer: CdkDropContainer, document: any, _ngZone: NgZone, _viewContainerRef: ViewContainerRef);
+        dropContainer: CdkDropContainer, document: any, _ngZone: NgZone, _viewContainerRef: ViewContainerRef, _viewportRuler: ViewportRuler, _dir: Directionality);
     /**
@@ -85,2 +91,4 @@ * Returns the element that is being used as a placeholder
     ngOnDestroy(): void;
+    /** Starts the dragging sequence. */
+    _startDragging(event: MouseEvent | TouchEvent): void;
     /** Handler for when the pointer is pressed down on the element or the handle. */
@@ -110,5 +118,6 @@ private _pointerDown;
      * Figures out the coordinates at which an element was picked up.
+     * @param referenceElement Element that initiated the dragging.
      * @param event Event that initiated the dragging.
      */
-    private _getPointerPositionInElement(event);
+    private _getPointerPositionInElement(referenceElement, event);
     /**
@@ -115,0 +124,0 @@ * Animates the preview element from its current position to the location of the drop placeholder.

typings/drag-drop/drop-container.d.ts

@@ -14,2 +14,4 @@ /**
     data: T;
+    /** Direction in which the list is oriented. */
+    orientation: 'horizontal' | 'vertical';
     /** Starts dragging an item. */
@@ -39,3 +41,3 @@ start(): void;
     getItemIndex(item: CdkDrag): number;
-    _sortItem(item: CdkDrag, yOffset: number): void;
+    _sortItem(item: CdkDrag, xOffset: number, yOffset: number): void;
     _draggables: QueryList<CdkDrag>;
@@ -42,0 +44,0 @@ _getSiblingContainerFromPosition(x: number, y: number): CdkDropContainer | null;

typings/drag-drop/drop.d.ts

@@ -23,2 +23,4 @@ /**
     data: T;
+    /** Direction in which the list is oriented. */
+    orientation: 'horizontal' | 'vertical';
     /** Emits when the user drops an item inside the container. */
@@ -67,5 +69,6 @@ dropped: EventEmitter<CdkDragDrop<T, any>>;
      * @param item Item to be sorted.
+     * @param xOffset Position of the item along the X axis.
      * @param yOffset Position of the item along the Y axis.
      */
-    _sortItem(item: CdkDrag, yOffset: number): void;
+    _sortItem(item: CdkDrag, xOffset: number, yOffset: number): void;
     /**
@@ -72,0 +75,0 @@ * Figures out whether an item should be moved into a sibling

typings/drag-drop/index.metadata.json

@@ -1,1 +0,1 @@
-{"__symbolic":"module","version":4,"metadata":{"CdkDrop":{"__symbolic":"class","arity":1,"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":26,"character":1},"arguments":[{"moduleId":{"__symbolic":"select","expression":{"__symbolic":"reference","name":"module"},"member":"id"},"selector":"cdk-drop","exportAs":"cdkDrop","template":"<ng-content></ng-content>","encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation","line":31,"character":17},"member":"None"},"changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":32,"character":19},"member":"OnPush"},"providers":[{"provide":{"__symbolic":"reference","name":"ɵb"},"useExisting":{"__symbolic":"reference","name":"CdkDrop"}}],"host":{"class":"cdk-drop","[class.cdk-drop-dragging]":"_dragging","$quoted$":["class","[class.cdk-drop-dragging]"]},"styles":[".cdk-drag-preview{position:absolute;top:0;left:0;z-index:1000}"]}]}],"members":{"_draggables":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChildren","line":44,"character":3},"arguments":[{"__symbolic":"reference","name":"CdkDrag"}]}]}],"connectedTo":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":50,"character":3}}]}],"data":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":53,"character":3}}]}],"dropped":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":56,"character":3}}]}],"entered":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":61,"character":3}}]}],"exited":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":67,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"ElementRef","module":"@angular/core","arguments":[{"__symbolic":"error","message":"Could not resolve type","line":69,"character":41,"context":{"typeName":"HTMLElement"},"module":"./drop"}]}]}],"start":[{"__symbolic":"method"}],"drop":[{"__symbolic":"method"}],"enter":[{"__symbolic":"method"}],"exit":[{"__symbolic":"method"}],"getItemIndex":[{"__symbolic":"method"}],"_sortItem":[{"__symbolic":"method"}],"_getSiblingContainerFromPosition":[{"__symbolic":"method"}],"_refreshPositions":[{"__symbolic":"method"}],"_reset":[{"__symbolic":"method"}]}},"CdkDrag":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":38,"character":1},"arguments":[{"selector":"[cdkDrag]","exportAs":"cdkDrag","host":{"class":"cdk-drag","$quoted$":["class"]}}]}],"members":{"_handle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild","line":87,"character":3},"arguments":[{"__symbolic":"reference","name":"CdkDragHandle"}]}]}],"_previewTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild","line":90,"character":3},"arguments":[{"__symbolic":"reference","name":"CdkDragPreview"}]}]}],"_placeholderTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild","line":95,"character":3},"arguments":[{"__symbolic":"reference","name":"CdkDragPlaceholder"}]}]}],"started":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":98,"character":3},"arguments":["cdkDragStarted"]}]}],"ended":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":101,"character":3},"arguments":["cdkDragEnded"]}]}],"entered":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":104,"character":3},"arguments":["cdkDragEntered"]}]}],"exited":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":107,"character":3},"arguments":["cdkDragExited"]}]}],"dropped":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":110,"character":3},"arguments":["cdkDragDropped"]}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[null,[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":116,"character":5},"arguments":[{"__symbolic":"reference","name":"ɵb"}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional","line":116,"character":33}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"SkipSelf","line":116,"character":45}}],[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":117,"character":5},"arguments":[{"__symbolic":"reference","module":"@angular/platform-browser","name":"DOCUMENT","line":117,"character":12}]}],null,null],"parameters":[{"__symbolic":"reference","name":"ElementRef","module":"@angular/core","arguments":[{"__symbolic":"error","message":"Could not resolve type","line":114,"character":31,"context":{"typeName":"HTMLElement"},"module":"./drag"}]},{"__symbolic":"reference","name":"ɵa"},{"__symbolic":"reference","name":"any"},{"__symbolic":"reference","module":"@angular/core","name":"NgZone","line":118,"character":21},{"__symbolic":"reference","module":"@angular/core","name":"ViewContainerRef","line":119,"character":31}]}],"getPlaceholderElement":[{"__symbolic":"method"}],"ngAfterContentInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"_cleanupDragArtifacts":[{"__symbolic":"method"}],"_updateActiveDropContainer":[{"__symbolic":"method"}],"_createPreviewElement":[{"__symbolic":"method"}],"_createPlaceholderElement":[{"__symbolic":"method"}],"_getElementIndexInDom":[{"__symbolic":"method"}],"_getPointerPositionInElement":[{"__symbolic":"method"}],"_animatePreviewToPlaceholder":[{"__symbolic":"method"}],"_setTransform":[{"__symbolic":"method"}],"_removeElement":[{"__symbolic":"method"}],"_removeDocumentEvents":[{"__symbolic":"method"}],"_getPointerPositionOnPage":[{"__symbolic":"method"}],"_isTouchEvent":[{"__symbolic":"method"}],"_destroyPreview":[{"__symbolic":"method"}],"_destroyPlaceholder":[{"__symbolic":"method"}],"_registerMoveListeners":[{"__symbolic":"method"}]}},"CdkDragHandle":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":11,"character":1},"arguments":[{"selector":"[cdkDragHandle]","host":{"class":"cdk-drag-handle","$quoted$":["class"]}}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"ElementRef","module":"@angular/core","arguments":[{"__symbolic":"error","message":"Could not resolve type","line":18,"character":41,"context":{"typeName":"HTMLElement"},"module":"./drag-handle"}]}]}]}},"CdkDragStart":{"__symbolic":"interface"},"CdkDragEnd":{"__symbolic":"interface"},"CdkDragEnter":{"__symbolic":"interface"},"CdkDragExit":{"__symbolic":"interface"},"CdkDragDrop":{"__symbolic":"interface"},"moveItemInArray":{"__symbolic":"function"},"transferArrayItem":{"__symbolic":"function"},"CdkDragPreview":{"__symbolic":"class","arity":1,"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":14,"character":1},"arguments":[{"selector":"ng-template[cdkDragPreview]"}]}],"members":{"data":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":19,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"TemplateRef","module":"@angular/core","arguments":[{"__symbolic":"error","message":"Could not resolve type","line":20,"character":46,"context":{"typeName":"T"},"module":"./drag-preview"}]}]}]}},"CdkDragPlaceholder":{"__symbolic":"class","arity":1,"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":14,"character":1},"arguments":[{"selector":"ng-template[cdkDragPlaceholder]"}]}],"members":{"data":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":19,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"TemplateRef","module":"@angular/core","arguments":[{"__symbolic":"error","message":"Could not resolve type","line":20,"character":46,"context":{"typeName":"T"},"module":"./drag-placeholder"}]}]}]}},"DragDropModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":15,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"CdkDrop"},{"__symbolic":"reference","name":"CdkDrag"},{"__symbolic":"reference","name":"CdkDragHandle"},{"__symbolic":"reference","name":"CdkDragPreview"},{"__symbolic":"reference","name":"CdkDragPlaceholder"}],"exports":[{"__symbolic":"reference","name":"CdkDrop"},{"__symbolic":"reference","name":"CdkDrag"},{"__symbolic":"reference","name":"CdkDragHandle"},{"__symbolic":"reference","name":"CdkDragPreview"},{"__symbolic":"reference","name":"CdkDragPlaceholder"}]}]}],"members":{}},"ɵa":{"__symbolic":"interface"},"ɵb":{"__symbolic":"new","expression":{"__symbolic":"reference","module":"@angular/core","name":"InjectionToken","line":54,"character":38},"arguments":["CDK_DROP_CONTAINER"]}},"origins":{"CdkDrop":"./drop","CdkDrag":"./drag","CdkDragHandle":"./drag-handle","CdkDragStart":"./drag-events","CdkDragEnd":"./drag-events","CdkDragEnter":"./drag-events","CdkDragExit":"./drag-events","CdkDragDrop":"./drag-events","moveItemInArray":"./drag-utils","transferArrayItem":"./drag-utils","CdkDragPreview":"./drag-preview","CdkDragPlaceholder":"./drag-placeholder","DragDropModule":"./drag-drop-module","ɵa":"./drop-container","ɵb":"./drop-container"},"importAs":"@angular/cdk-experimental/drag-drop"}
+{"__symbolic":"module","version":4,"metadata":{"CdkDrop":{"__symbolic":"class","arity":1,"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":25,"character":1},"arguments":[{"moduleId":{"__symbolic":"select","expression":{"__symbolic":"reference","name":"module"},"member":"id"},"selector":"cdk-drop","exportAs":"cdkDrop","template":"<ng-content></ng-content>","encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation","line":30,"character":17},"member":"None"},"changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":31,"character":19},"member":"OnPush"},"providers":[{"provide":{"__symbolic":"reference","name":"ɵb"},"useExisting":{"__symbolic":"reference","name":"CdkDrop"}}],"host":{"class":"cdk-drop","[class.cdk-drop-dragging]":"_dragging","$quoted$":["class","[class.cdk-drop-dragging]"]},"styles":[".cdk-drag-preview{position:fixed;top:0;left:0;z-index:1000}"]}]}],"members":{"_draggables":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChildren","line":43,"character":3},"arguments":[{"__symbolic":"reference","name":"CdkDrag"}]}]}],"connectedTo":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":49,"character":3}}]}],"data":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":52,"character":3}}]}],"orientation":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":55,"character":3}}]}],"dropped":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":58,"character":3}}]}],"entered":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":63,"character":3}}]}],"exited":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":69,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"ElementRef","module":"@angular/core","arguments":[{"__symbolic":"error","message":"Could not resolve type","line":71,"character":41,"context":{"typeName":"HTMLElement"},"module":"./drop"}]}]}],"start":[{"__symbolic":"method"}],"drop":[{"__symbolic":"method"}],"enter":[{"__symbolic":"method"}],"exit":[{"__symbolic":"method"}],"getItemIndex":[{"__symbolic":"method"}],"_sortItem":[{"__symbolic":"method"}],"_getSiblingContainerFromPosition":[{"__symbolic":"method"}],"_refreshPositions":[{"__symbolic":"method"}],"_reset":[{"__symbolic":"method"}]}},"CdkDrag":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":42,"character":1},"arguments":[{"selector":"[cdkDrag]","exportAs":"cdkDrag","host":{"class":"cdk-drag","(mousedown)":"_startDragging($event)","(touchstart)":"_startDragging($event)","$quoted$":["class","(mousedown)","(touchstart)"]}}]}],"members":{"_handles":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChildren","line":96,"character":3},"arguments":[{"__symbolic":"reference","name":"CdkDragHandle"}]}]}],"_previewTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild","line":99,"character":3},"arguments":[{"__symbolic":"reference","name":"CdkDragPreview"}]}]}],"_placeholderTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild","line":104,"character":3},"arguments":[{"__symbolic":"reference","name":"CdkDragPlaceholder"}]}]}],"started":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":107,"character":3},"arguments":["cdkDragStarted"]}]}],"ended":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":110,"character":3},"arguments":["cdkDragEnded"]}]}],"entered":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":113,"character":3},"arguments":["cdkDragEntered"]}]}],"exited":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":116,"character":3},"arguments":["cdkDragExited"]}]}],"dropped":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":119,"character":3},"arguments":["cdkDragDropped"]}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[null,[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":125,"character":5},"arguments":[{"__symbolic":"reference","name":"ɵb"}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional","line":125,"character":33}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"SkipSelf","line":125,"character":45}}],[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":126,"character":5},"arguments":[{"__symbolic":"reference","module":"@angular/platform-browser","name":"DOCUMENT","line":126,"character":12}]}],null,null,null,[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional","line":130,"character":5}}]],"parameters":[{"__symbolic":"reference","name":"ElementRef","module":"@angular/core","arguments":[{"__symbolic":"error","message":"Could not resolve type","line":123,"character":31,"context":{"typeName":"HTMLElement"},"module":"./drag"}]},{"__symbolic":"reference","name":"ɵa"},{"__symbolic":"reference","name":"any"},{"__symbolic":"reference","module":"@angular/core","name":"NgZone","line":127,"character":21},{"__symbolic":"reference","module":"@angular/core","name":"ViewContainerRef","line":128,"character":31},{"__symbolic":"reference","module":"@angular/cdk/overlay","name":"ViewportRuler","line":129,"character":28},{"__symbolic":"reference","module":"@angular/cdk/bidi","name":"Directionality","line":130,"character":30}]}],"getPlaceholderElement":[{"__symbolic":"method"}],"ngAfterContentInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"_startDragging":[{"__symbolic":"method"}],"_cleanupDragArtifacts":[{"__symbolic":"method"}],"_updateActiveDropContainer":[{"__symbolic":"method"}],"_createPreviewElement":[{"__symbolic":"method"}],"_createPlaceholderElement":[{"__symbolic":"method"}],"_getElementIndexInDom":[{"__symbolic":"method"}],"_getPointerPositionInElement":[{"__symbolic":"method"}],"_animatePreviewToPlaceholder":[{"__symbolic":"method"}],"_setTransform":[{"__symbolic":"method"}],"_removeElement":[{"__symbolic":"method"}],"_removeDocumentEvents":[{"__symbolic":"method"}],"_getPointerPositionOnPage":[{"__symbolic":"method"}],"_isTouchEvent":[{"__symbolic":"method"}],"_destroyPreview":[{"__symbolic":"method"}],"_destroyPlaceholder":[{"__symbolic":"method"}],"_registerMoveListeners":[{"__symbolic":"method"}]}},"CdkDragHandle":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":11,"character":1},"arguments":[{"selector":"[cdkDragHandle]","host":{"class":"cdk-drag-handle","$quoted$":["class"]}}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"ElementRef","module":"@angular/core","arguments":[{"__symbolic":"error","message":"Could not resolve type","line":18,"character":41,"context":{"typeName":"HTMLElement"},"module":"./drag-handle"}]}]}]}},"CdkDragStart":{"__symbolic":"interface"},"CdkDragEnd":{"__symbolic":"interface"},"CdkDragEnter":{"__symbolic":"interface"},"CdkDragExit":{"__symbolic":"interface"},"CdkDragDrop":{"__symbolic":"interface"},"moveItemInArray":{"__symbolic":"function"},"transferArrayItem":{"__symbolic":"function"},"CdkDragPreview":{"__symbolic":"class","arity":1,"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":14,"character":1},"arguments":[{"selector":"ng-template[cdkDragPreview]"}]}],"members":{"data":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":19,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"TemplateRef","module":"@angular/core","arguments":[{"__symbolic":"error","message":"Could not resolve type","line":20,"character":46,"context":{"typeName":"T"},"module":"./drag-preview"}]}]}]}},"CdkDragPlaceholder":{"__symbolic":"class","arity":1,"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":14,"character":1},"arguments":[{"selector":"ng-template[cdkDragPlaceholder]"}]}],"members":{"data":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":19,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"TemplateRef","module":"@angular/core","arguments":[{"__symbolic":"error","message":"Could not resolve type","line":20,"character":46,"context":{"typeName":"T"},"module":"./drag-placeholder"}]}]}]}},"DragDropModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":15,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"CdkDrop"},{"__symbolic":"reference","name":"CdkDrag"},{"__symbolic":"reference","name":"CdkDragHandle"},{"__symbolic":"reference","name":"CdkDragPreview"},{"__symbolic":"reference","name":"CdkDragPlaceholder"}],"exports":[{"__symbolic":"reference","name":"CdkDrop"},{"__symbolic":"reference","name":"CdkDrag"},{"__symbolic":"reference","name":"CdkDragHandle"},{"__symbolic":"reference","name":"CdkDragPreview"},{"__symbolic":"reference","name":"CdkDragPlaceholder"}]}]}],"members":{}},"ɵa":{"__symbolic":"interface"},"ɵb":{"__symbolic":"new","expression":{"__symbolic":"reference","module":"@angular/core","name":"InjectionToken","line":57,"character":38},"arguments":["CDK_DROP_CONTAINER"]}},"origins":{"CdkDrop":"./drop","CdkDrag":"./drag","CdkDragHandle":"./drag-handle","CdkDragStart":"./drag-events","CdkDragEnd":"./drag-events","CdkDragEnter":"./drag-events","CdkDragExit":"./drag-events","CdkDragDrop":"./drag-events","moveItemInArray":"./drag-utils","transferArrayItem":"./drag-utils","CdkDragPreview":"./drag-preview","CdkDragPlaceholder":"./drag-placeholder","DragDropModule":"./drag-drop-module","ɵa":"./drop-container","ɵb":"./drop-container"},"importAs":"@angular/cdk-experimental/drag-drop"}

typings/esm5/drag-drop/drag.d.ts

@@ -8,3 +8,4 @@ /**
  */
-import { ElementRef, AfterContentInit, NgZone, OnDestroy, EventEmitter, ViewContainerRef } from '@angular/core';
+import { ElementRef, AfterContentInit, NgZone, OnDestroy, EventEmitter, ViewContainerRef, QueryList } from '@angular/core';
+import { Directionality } from '@angular/cdk/bidi';
 import { CdkDragHandle } from './drag-handle';
@@ -15,2 +16,3 @@ import { CdkDropContainer } from './drop-container';
 import { CdkDragPlaceholder } from './drag-placeholder';
+import { ViewportRuler } from '@angular/cdk/overlay';
 /** Element that can be moved inside a CdkDrop container. */
@@ -24,2 +26,4 @@ export declare class CdkDrag implements AfterContentInit, OnDestroy {
     private _viewContainerRef;
+    private _viewportRuler;
+    private _dir;
     private _document;
@@ -53,4 +57,6 @@ /** Element displayed next to the user's pointer while the element is dragged. */
     private _initialContainer;
-    /** Element that can be used to drag the draggable item. */
-    _handle: CdkDragHandle;
+    /** Cached scroll position on the page when the element was picked up. */
+    private _scrollPosition;
+    /** Elements that can be used to drag the draggable item. */
+    _handles: QueryList<CdkDragHandle>;
     /** Element that will be used as a template to create the draggable item's preview. */
@@ -76,3 +82,3 @@ _previewTemplate: CdkDragPreview;
         /** Droppable container that the draggable is a part of. */
-        dropContainer: CdkDropContainer, document: any, _ngZone: NgZone, _viewContainerRef: ViewContainerRef);
+        dropContainer: CdkDropContainer, document: any, _ngZone: NgZone, _viewContainerRef: ViewContainerRef, _viewportRuler: ViewportRuler, _dir: Directionality);
     /**
@@ -85,2 +91,4 @@ * Returns the element that is being used as a placeholder
     ngOnDestroy(): void;
+    /** Starts the dragging sequence. */
+    _startDragging(event: MouseEvent | TouchEvent): void;
     /** Handler for when the pointer is pressed down on the element or the handle. */
@@ -110,5 +118,6 @@ private _pointerDown;
      * Figures out the coordinates at which an element was picked up.
+     * @param referenceElement Element that initiated the dragging.
      * @param event Event that initiated the dragging.
      */
-    private _getPointerPositionInElement(event);
+    private _getPointerPositionInElement(referenceElement, event);
     /**
@@ -115,0 +124,0 @@ * Animates the preview element from its current position to the location of the drop placeholder.

typings/esm5/drag-drop/drop-container.d.ts

@@ -14,2 +14,4 @@ /**
     data: T;
+    /** Direction in which the list is oriented. */
+    orientation: 'horizontal' | 'vertical';
     /** Starts dragging an item. */
@@ -39,3 +41,3 @@ start(): void;
     getItemIndex(item: CdkDrag): number;
-    _sortItem(item: CdkDrag, yOffset: number): void;
+    _sortItem(item: CdkDrag, xOffset: number, yOffset: number): void;
     _draggables: QueryList<CdkDrag>;
@@ -42,0 +44,0 @@ _getSiblingContainerFromPosition(x: number, y: number): CdkDropContainer | null;

typings/esm5/drag-drop/drop.d.ts

@@ -23,2 +23,4 @@ /**
     data: T;
+    /** Direction in which the list is oriented. */
+    orientation: 'horizontal' | 'vertical';
     /** Emits when the user drops an item inside the container. */
@@ -67,5 +69,6 @@ dropped: EventEmitter<CdkDragDrop<T, any>>;
      * @param item Item to be sorted.
+     * @param xOffset Position of the item along the X axis.
      * @param yOffset Position of the item along the Y axis.
      */
-    _sortItem(item: CdkDrag, yOffset: number): void;
+    _sortItem(item: CdkDrag, xOffset: number, yOffset: number): void;
     /**
@@ -72,0 +75,0 @@ * Figures out whether an item should be moved into a sibling

typings/esm5/drag-drop/index.metadata.json

@@ -1,1 +0,1 @@
-{"__symbolic":"module","version":4,"metadata":{"CdkDrop":{"__symbolic":"class","arity":1,"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":26,"character":1},"arguments":[{"moduleId":{"__symbolic":"select","expression":{"__symbolic":"reference","name":"module"},"member":"id"},"selector":"cdk-drop","exportAs":"cdkDrop","template":"<ng-content></ng-content>","encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation","line":31,"character":17},"member":"None"},"changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":32,"character":19},"member":"OnPush"},"providers":[{"provide":{"__symbolic":"reference","name":"ɵb"},"useExisting":{"__symbolic":"reference","name":"CdkDrop"}}],"host":{"class":"cdk-drop","[class.cdk-drop-dragging]":"_dragging","$quoted$":["class","[class.cdk-drop-dragging]"]},"styles":[".cdk-drag-preview{position:absolute;top:0;left:0;z-index:1000}"]}]}],"members":{"_draggables":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChildren","line":44,"character":3},"arguments":[{"__symbolic":"reference","name":"CdkDrag"}]}]}],"connectedTo":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":50,"character":3}}]}],"data":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":53,"character":3}}]}],"dropped":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":56,"character":3}}]}],"entered":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":61,"character":3}}]}],"exited":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":67,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"ElementRef","module":"@angular/core","arguments":[{"__symbolic":"error","message":"Could not resolve type","line":69,"character":41,"context":{"typeName":"HTMLElement"},"module":"./drop"}]}]}],"start":[{"__symbolic":"method"}],"drop":[{"__symbolic":"method"}],"enter":[{"__symbolic":"method"}],"exit":[{"__symbolic":"method"}],"getItemIndex":[{"__symbolic":"method"}],"_sortItem":[{"__symbolic":"method"}],"_getSiblingContainerFromPosition":[{"__symbolic":"method"}],"_refreshPositions":[{"__symbolic":"method"}],"_reset":[{"__symbolic":"method"}]}},"CdkDrag":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":38,"character":1},"arguments":[{"selector":"[cdkDrag]","exportAs":"cdkDrag","host":{"class":"cdk-drag","$quoted$":["class"]}}]}],"members":{"_handle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild","line":87,"character":3},"arguments":[{"__symbolic":"reference","name":"CdkDragHandle"}]}]}],"_previewTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild","line":90,"character":3},"arguments":[{"__symbolic":"reference","name":"CdkDragPreview"}]}]}],"_placeholderTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild","line":95,"character":3},"arguments":[{"__symbolic":"reference","name":"CdkDragPlaceholder"}]}]}],"started":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":98,"character":3},"arguments":["cdkDragStarted"]}]}],"ended":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":101,"character":3},"arguments":["cdkDragEnded"]}]}],"entered":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":104,"character":3},"arguments":["cdkDragEntered"]}]}],"exited":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":107,"character":3},"arguments":["cdkDragExited"]}]}],"dropped":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":110,"character":3},"arguments":["cdkDragDropped"]}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[null,[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":116,"character":5},"arguments":[{"__symbolic":"reference","name":"ɵb"}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional","line":116,"character":33}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"SkipSelf","line":116,"character":45}}],[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":117,"character":5},"arguments":[{"__symbolic":"reference","module":"@angular/platform-browser","name":"DOCUMENT","line":117,"character":12}]}],null,null],"parameters":[{"__symbolic":"reference","name":"ElementRef","module":"@angular/core","arguments":[{"__symbolic":"error","message":"Could not resolve type","line":114,"character":31,"context":{"typeName":"HTMLElement"},"module":"./drag"}]},{"__symbolic":"reference","name":"ɵa"},{"__symbolic":"reference","name":"any"},{"__symbolic":"reference","module":"@angular/core","name":"NgZone","line":118,"character":21},{"__symbolic":"reference","module":"@angular/core","name":"ViewContainerRef","line":119,"character":31}]}],"getPlaceholderElement":[{"__symbolic":"method"}],"ngAfterContentInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"_cleanupDragArtifacts":[{"__symbolic":"method"}],"_updateActiveDropContainer":[{"__symbolic":"method"}],"_createPreviewElement":[{"__symbolic":"method"}],"_createPlaceholderElement":[{"__symbolic":"method"}],"_getElementIndexInDom":[{"__symbolic":"method"}],"_getPointerPositionInElement":[{"__symbolic":"method"}],"_animatePreviewToPlaceholder":[{"__symbolic":"method"}],"_setTransform":[{"__symbolic":"method"}],"_removeElement":[{"__symbolic":"method"}],"_removeDocumentEvents":[{"__symbolic":"method"}],"_getPointerPositionOnPage":[{"__symbolic":"method"}],"_isTouchEvent":[{"__symbolic":"method"}],"_destroyPreview":[{"__symbolic":"method"}],"_destroyPlaceholder":[{"__symbolic":"method"}],"_registerMoveListeners":[{"__symbolic":"method"}]}},"CdkDragHandle":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":11,"character":1},"arguments":[{"selector":"[cdkDragHandle]","host":{"class":"cdk-drag-handle","$quoted$":["class"]}}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"ElementRef","module":"@angular/core","arguments":[{"__symbolic":"error","message":"Could not resolve type","line":18,"character":41,"context":{"typeName":"HTMLElement"},"module":"./drag-handle"}]}]}]}},"CdkDragStart":{"__symbolic":"interface"},"CdkDragEnd":{"__symbolic":"interface"},"CdkDragEnter":{"__symbolic":"interface"},"CdkDragExit":{"__symbolic":"interface"},"CdkDragDrop":{"__symbolic":"interface"},"moveItemInArray":{"__symbolic":"function"},"transferArrayItem":{"__symbolic":"function"},"CdkDragPreview":{"__symbolic":"class","arity":1,"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":14,"character":1},"arguments":[{"selector":"ng-template[cdkDragPreview]"}]}],"members":{"data":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":19,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"TemplateRef","module":"@angular/core","arguments":[{"__symbolic":"error","message":"Could not resolve type","line":20,"character":46,"context":{"typeName":"T"},"module":"./drag-preview"}]}]}]}},"CdkDragPlaceholder":{"__symbolic":"class","arity":1,"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":14,"character":1},"arguments":[{"selector":"ng-template[cdkDragPlaceholder]"}]}],"members":{"data":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":19,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"TemplateRef","module":"@angular/core","arguments":[{"__symbolic":"error","message":"Could not resolve type","line":20,"character":46,"context":{"typeName":"T"},"module":"./drag-placeholder"}]}]}]}},"DragDropModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":15,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"CdkDrop"},{"__symbolic":"reference","name":"CdkDrag"},{"__symbolic":"reference","name":"CdkDragHandle"},{"__symbolic":"reference","name":"CdkDragPreview"},{"__symbolic":"reference","name":"CdkDragPlaceholder"}],"exports":[{"__symbolic":"reference","name":"CdkDrop"},{"__symbolic":"reference","name":"CdkDrag"},{"__symbolic":"reference","name":"CdkDragHandle"},{"__symbolic":"reference","name":"CdkDragPreview"},{"__symbolic":"reference","name":"CdkDragPlaceholder"}]}]}],"members":{}},"ɵa":{"__symbolic":"interface"},"ɵb":{"__symbolic":"new","expression":{"__symbolic":"reference","module":"@angular/core","name":"InjectionToken","line":54,"character":38},"arguments":["CDK_DROP_CONTAINER"]}},"origins":{"CdkDrop":"./drop","CdkDrag":"./drag","CdkDragHandle":"./drag-handle","CdkDragStart":"./drag-events","CdkDragEnd":"./drag-events","CdkDragEnter":"./drag-events","CdkDragExit":"./drag-events","CdkDragDrop":"./drag-events","moveItemInArray":"./drag-utils","transferArrayItem":"./drag-utils","CdkDragPreview":"./drag-preview","CdkDragPlaceholder":"./drag-placeholder","DragDropModule":"./drag-drop-module","ɵa":"./drop-container","ɵb":"./drop-container"},"importAs":"@angular/cdk-experimental/drag-drop"}
+{"__symbolic":"module","version":4,"metadata":{"CdkDrop":{"__symbolic":"class","arity":1,"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":25,"character":1},"arguments":[{"moduleId":{"__symbolic":"select","expression":{"__symbolic":"reference","name":"module"},"member":"id"},"selector":"cdk-drop","exportAs":"cdkDrop","template":"<ng-content></ng-content>","encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation","line":30,"character":17},"member":"None"},"changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":31,"character":19},"member":"OnPush"},"providers":[{"provide":{"__symbolic":"reference","name":"ɵb"},"useExisting":{"__symbolic":"reference","name":"CdkDrop"}}],"host":{"class":"cdk-drop","[class.cdk-drop-dragging]":"_dragging","$quoted$":["class","[class.cdk-drop-dragging]"]},"styles":[".cdk-drag-preview{position:fixed;top:0;left:0;z-index:1000}"]}]}],"members":{"_draggables":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChildren","line":43,"character":3},"arguments":[{"__symbolic":"reference","name":"CdkDrag"}]}]}],"connectedTo":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":49,"character":3}}]}],"data":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":52,"character":3}}]}],"orientation":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":55,"character":3}}]}],"dropped":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":58,"character":3}}]}],"entered":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":63,"character":3}}]}],"exited":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":69,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"ElementRef","module":"@angular/core","arguments":[{"__symbolic":"error","message":"Could not resolve type","line":71,"character":41,"context":{"typeName":"HTMLElement"},"module":"./drop"}]}]}],"start":[{"__symbolic":"method"}],"drop":[{"__symbolic":"method"}],"enter":[{"__symbolic":"method"}],"exit":[{"__symbolic":"method"}],"getItemIndex":[{"__symbolic":"method"}],"_sortItem":[{"__symbolic":"method"}],"_getSiblingContainerFromPosition":[{"__symbolic":"method"}],"_refreshPositions":[{"__symbolic":"method"}],"_reset":[{"__symbolic":"method"}]}},"CdkDrag":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":42,"character":1},"arguments":[{"selector":"[cdkDrag]","exportAs":"cdkDrag","host":{"class":"cdk-drag","(mousedown)":"_startDragging($event)","(touchstart)":"_startDragging($event)","$quoted$":["class","(mousedown)","(touchstart)"]}}]}],"members":{"_handles":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChildren","line":96,"character":3},"arguments":[{"__symbolic":"reference","name":"CdkDragHandle"}]}]}],"_previewTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild","line":99,"character":3},"arguments":[{"__symbolic":"reference","name":"CdkDragPreview"}]}]}],"_placeholderTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild","line":104,"character":3},"arguments":[{"__symbolic":"reference","name":"CdkDragPlaceholder"}]}]}],"started":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":107,"character":3},"arguments":["cdkDragStarted"]}]}],"ended":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":110,"character":3},"arguments":["cdkDragEnded"]}]}],"entered":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":113,"character":3},"arguments":["cdkDragEntered"]}]}],"exited":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":116,"character":3},"arguments":["cdkDragExited"]}]}],"dropped":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":119,"character":3},"arguments":["cdkDragDropped"]}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[null,[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":125,"character":5},"arguments":[{"__symbolic":"reference","name":"ɵb"}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional","line":125,"character":33}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"SkipSelf","line":125,"character":45}}],[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":126,"character":5},"arguments":[{"__symbolic":"reference","module":"@angular/platform-browser","name":"DOCUMENT","line":126,"character":12}]}],null,null,null,[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional","line":130,"character":5}}]],"parameters":[{"__symbolic":"reference","name":"ElementRef","module":"@angular/core","arguments":[{"__symbolic":"error","message":"Could not resolve type","line":123,"character":31,"context":{"typeName":"HTMLElement"},"module":"./drag"}]},{"__symbolic":"reference","name":"ɵa"},{"__symbolic":"reference","name":"any"},{"__symbolic":"reference","module":"@angular/core","name":"NgZone","line":127,"character":21},{"__symbolic":"reference","module":"@angular/core","name":"ViewContainerRef","line":128,"character":31},{"__symbolic":"reference","module":"@angular/cdk/overlay","name":"ViewportRuler","line":129,"character":28},{"__symbolic":"reference","module":"@angular/cdk/bidi","name":"Directionality","line":130,"character":30}]}],"getPlaceholderElement":[{"__symbolic":"method"}],"ngAfterContentInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"_startDragging":[{"__symbolic":"method"}],"_cleanupDragArtifacts":[{"__symbolic":"method"}],"_updateActiveDropContainer":[{"__symbolic":"method"}],"_createPreviewElement":[{"__symbolic":"method"}],"_createPlaceholderElement":[{"__symbolic":"method"}],"_getElementIndexInDom":[{"__symbolic":"method"}],"_getPointerPositionInElement":[{"__symbolic":"method"}],"_animatePreviewToPlaceholder":[{"__symbolic":"method"}],"_setTransform":[{"__symbolic":"method"}],"_removeElement":[{"__symbolic":"method"}],"_removeDocumentEvents":[{"__symbolic":"method"}],"_getPointerPositionOnPage":[{"__symbolic":"method"}],"_isTouchEvent":[{"__symbolic":"method"}],"_destroyPreview":[{"__symbolic":"method"}],"_destroyPlaceholder":[{"__symbolic":"method"}],"_registerMoveListeners":[{"__symbolic":"method"}]}},"CdkDragHandle":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":11,"character":1},"arguments":[{"selector":"[cdkDragHandle]","host":{"class":"cdk-drag-handle","$quoted$":["class"]}}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"ElementRef","module":"@angular/core","arguments":[{"__symbolic":"error","message":"Could not resolve type","line":18,"character":41,"context":{"typeName":"HTMLElement"},"module":"./drag-handle"}]}]}]}},"CdkDragStart":{"__symbolic":"interface"},"CdkDragEnd":{"__symbolic":"interface"},"CdkDragEnter":{"__symbolic":"interface"},"CdkDragExit":{"__symbolic":"interface"},"CdkDragDrop":{"__symbolic":"interface"},"moveItemInArray":{"__symbolic":"function"},"transferArrayItem":{"__symbolic":"function"},"CdkDragPreview":{"__symbolic":"class","arity":1,"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":14,"character":1},"arguments":[{"selector":"ng-template[cdkDragPreview]"}]}],"members":{"data":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":19,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"TemplateRef","module":"@angular/core","arguments":[{"__symbolic":"error","message":"Could not resolve type","line":20,"character":46,"context":{"typeName":"T"},"module":"./drag-preview"}]}]}]}},"CdkDragPlaceholder":{"__symbolic":"class","arity":1,"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":14,"character":1},"arguments":[{"selector":"ng-template[cdkDragPlaceholder]"}]}],"members":{"data":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":19,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"TemplateRef","module":"@angular/core","arguments":[{"__symbolic":"error","message":"Could not resolve type","line":20,"character":46,"context":{"typeName":"T"},"module":"./drag-placeholder"}]}]}]}},"DragDropModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":15,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"CdkDrop"},{"__symbolic":"reference","name":"CdkDrag"},{"__symbolic":"reference","name":"CdkDragHandle"},{"__symbolic":"reference","name":"CdkDragPreview"},{"__symbolic":"reference","name":"CdkDragPlaceholder"}],"exports":[{"__symbolic":"reference","name":"CdkDrop"},{"__symbolic":"reference","name":"CdkDrag"},{"__symbolic":"reference","name":"CdkDragHandle"},{"__symbolic":"reference","name":"CdkDragPreview"},{"__symbolic":"reference","name":"CdkDragPlaceholder"}]}]}],"members":{}},"ɵa":{"__symbolic":"interface"},"ɵb":{"__symbolic":"new","expression":{"__symbolic":"reference","module":"@angular/core","name":"InjectionToken","line":57,"character":38},"arguments":["CDK_DROP_CONTAINER"]}},"origins":{"CdkDrop":"./drop","CdkDrag":"./drag","CdkDragHandle":"./drag-handle","CdkDragStart":"./drag-events","CdkDragEnd":"./drag-events","CdkDragEnter":"./drag-events","CdkDragExit":"./drag-events","CdkDragDrop":"./drag-events","moveItemInArray":"./drag-utils","transferArrayItem":"./drag-utils","CdkDragPreview":"./drag-preview","CdkDragPlaceholder":"./drag-placeholder","DragDropModule":"./drag-drop-module","ɵa":"./drop-container","ɵb":"./drop-container"},"importAs":"@angular/cdk-experimental/drag-drop"}

typings/esm5/index.metadata.json

@@ -1,1 +0,1 @@
-{"__symbolic":"module","version":4,"metadata":{"VERSION":{"__symbolic":"new","expression":{"__symbolic":"reference","module":"@angular/core","name":"Version","line":11,"character":27},"arguments":["6.3.2"]}},"origins":{"VERSION":"./version"},"importAs":"@angular/cdk-experimental"}
+{"__symbolic":"module","version":4,"exports":[{"from":"@angular/cdk-experimental/scrolling"}],"metadata":{"VERSION":{"__symbolic":"new","expression":{"__symbolic":"reference","module":"@angular/core","name":"Version","line":11,"character":27},"arguments":["6.3.3"]}},"origins":{"VERSION":"./version"},"importAs":"@angular/cdk-experimental"}

typings/esm5/public-api.d.ts

@@ -9,1 +9,2 @@ /**
 export * from './version';
+export * from '@angular/cdk-experimental/scrolling';

typings/index.metadata.json

@@ -1,1 +0,1 @@
-{"__symbolic":"module","version":4,"metadata":{"VERSION":{"__symbolic":"new","expression":{"__symbolic":"reference","module":"@angular/core","name":"Version","line":11,"character":27},"arguments":["6.3.2"]}},"origins":{"VERSION":"./version"},"importAs":"@angular/cdk-experimental"}
+{"__symbolic":"module","version":4,"exports":[{"from":"@angular/cdk-experimental/scrolling"}],"metadata":{"VERSION":{"__symbolic":"new","expression":{"__symbolic":"reference","module":"@angular/core","name":"Version","line":11,"character":27},"arguments":["6.3.3"]}},"origins":{"VERSION":"./version"},"importAs":"@angular/cdk-experimental"}

typings/public-api.d.ts

@@ -9,1 +9,2 @@ /**
 export * from './version';
+export * from '@angular/cdk-experimental/scrolling';

New alerts

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1514752

increased by1.67%

Lines of code

15030

increased by1.44%

Worsened metrics

Number of low quality alerts

4

increased by33.33%

No dependency changes