Merge branch 'drop-down-border-radius' of https://github.com/IgniteUI/igniteui-angular into drop-down-border-radius

Author: IvayloG

ROADMAP.md

@@ -6,21 +6,20 @@
 1. Dock Manger [#5980](https://github.com/IgniteUI/igniteui-angular/issues/5980)
 2. Theming service for Ignite UI for Angular [#5999](https://github.com/IgniteUI/igniteui-angular/issues/5999)
 3. Range Date Picker [#5732](https://github.com/IgniteUI/igniteui-angular/issues/5732)
-4. igxGrid overlay components exposed for instantiation in arbitrary container [#5878](https://github.com/IgniteUI/igniteui-angular/issues/5878)
+4. **[DONE]** igxGrid overlay components exposed for instantiation in arbitrary container [#5878](https://github.com/IgniteUI/igniteui-angular/issues/5878)
 5. RTL Support across Ignite UI for Angular components [#5958](https://github.com/IgniteUI/igniteui-angular/issues/5958)
-6. Carousel slide animations/transitions [#4268](https://github.com/IgniteUI/igniteui-angular/issues/4268)
-7. Access all data when calculating summary per column [#5754](https://github.com/IgniteUI/igniteui-angular/issues/5754)
+6. **[DONE]** Carousel slide animations/transitions [#4268](https://github.com/IgniteUI/igniteui-angular/issues/4268)
+7. **[DONE]** Access all data when calculating summary per column [#5754](https://github.com/IgniteUI/igniteui-angular/issues/5754)
 8. Angular 9 support [#5998](https://github.com/IgniteUI/igniteui-angular/issues/5998)
-9. Allow master-detail style visualization with igxHierarchicalGrid [#5880](https://github.com/IgniteUI/igniteui-angular/issues/5880)
-10. Collapsible column groups (column expansion state templates) [#3343](https://github.com/IgniteUI/igniteui-angular/issues/3343) 
+9. **[DONE]** Allow master-detail style visualization with igxHierarchicalGrid [#5880](https://github.com/IgniteUI/igniteui-angular/issues/5880)
+10. **[DONE]** Collapsible column groups (column expansion state templates) [#3343](https://github.com/IgniteUI/igniteui-angular/issues/3343) 
 
 ## Going down the road
 
 1. Row-pinning
-2. Column Groups expand/collapse, with column grouping templates
-3. Visual Cell merging
-4. Splitter
-5. PDF Integration
+2. Visual Cell merging
+3. Splitter
+4. PDF Integration
 
 # Previous Milestones 
 

package-lock.json

@@ -45,14 +45,14 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^9.0.0-rc.5",
-    "@angular/common": "^9.0.0-rc.5",
-    "@angular/compiler": "^9.0.0-rc.5",
-    "@angular/core": "^9.0.0-rc.5",
-    "@angular/forms": "^9.0.0-rc.5",
-    "@angular/platform-browser": "^9.0.0-rc.5",
-    "@angular/platform-browser-dynamic": "^9.0.0-rc.5",
-    "@angular/router": "^9.0.0-rc.5",
+    "@angular/animations": "^9.0.0-rc.7",
+    "@angular/common": "^9.0.0-rc.7",
+    "@angular/compiler": "^9.0.0-rc.7",
+    "@angular/core": "^9.0.0-rc.7",
+    "@angular/forms": "^9.0.0-rc.7",
+    "@angular/platform-browser": "^9.0.0-rc.7",
+    "@angular/platform-browser-dynamic": "^9.0.0-rc.7",
+    "@angular/router": "^9.0.0-rc.7",
     "@types/hammerjs": "^2.0.36",
     "@types/source-map": "0.5.2",
     "classlist.js": "^1.1.20150312",
@@ -66,12 +66,12 @@
     "zone.js": "~0.10.2"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~0.900.0-rc.5",
-    "@angular-devkit/build-ng-packagr": "~0.900.0-rc.5",
+    "@angular-devkit/build-angular": "~0.900.0-rc.7",
+    "@angular-devkit/build-ng-packagr": "~0.900.0-rc.7",
     "@angular-devkit/schematics": "^7.2.1",
-    "@angular/cli": "~9.0.0-rc.5",
-    "@angular/compiler-cli": "^9.0.0-rc.5",
-    "@angular/language-service": "^9.0.0-rc.5",
+    "@angular/cli": "~9.0.0-rc.7",
+    "@angular/compiler-cli": "^9.0.0-rc.7",
+    "@angular/language-service": "^9.0.0-rc.7",
     "@angularclass/hmr": "^2.1.3",
     "@types/jasmine": "~3.3.5",
     "@types/jasminewd2": "~2.0.6",

package.json

@@ -42,7 +42,7 @@ module.exports = function (config) {
     colors: true,
     logLevel: config.LOG_INFO,
     autoWatch: true,
-    browsers: ['Chrome'],
+    browsers: ['ChromeHeadless'],
     singleRun: false
   });
 };

projects/igniteui-angular/karma.grid.conf.js

@@ -41,7 +41,7 @@ module.exports = function (config) {
     colors: true,
     logLevel: config.LOG_INFO,
     autoWatch: true,
-    browsers: ['Chrome'],
+    browsers: ['ChromeHeadless'],
     singleRun: false
   });
 };

projects/igniteui-angular/karma.hierarchical-grid.conf.js

@@ -41,7 +41,7 @@ module.exports = function (config) {
     colors: true,
     logLevel: config.LOG_INFO,
     autoWatch: true,
-    browsers: ['Chrome'],
+    browsers: ['ChromeHeadless'],
     singleRun: false
   });
 };

projects/igniteui-angular/karma.non-grid.conf.js

@@ -35,8 +35,7 @@ module.exports = function (config) {
       colors: true,
       logLevel: config.LOG_INFO,
       autoWatch: true,
-      browsers: ['Chrome'],
+      browsers: ['ChromeHeadless'],
       singleRun: false
     });
   };
-  

projects/igniteui-angular/karma.test-perf.conf.js

@@ -41,7 +41,7 @@ module.exports = function (config) {
     colors: true,
     logLevel: config.LOG_INFO,
     autoWatch: true,
-    browsers: ['Chrome'],
+    browsers: ['ChromeHeadless'],
     singleRun: false
   });
 };

projects/igniteui-angular/karma.tree-grid.conf.js

@@ -563,33 +563,25 @@ export class IgxDragDirective implements AfterContentInit, OnDestroy {
     }
 
     protected set ghostLeft(pageX: number) {
-        // To Do: Remove requestAnimationFrame when deprecated animations inputs are removed as well.
-        // We use requestAnimationFrame for the old drop animations in combination with updateDragRelativePos.
-        requestAnimationFrame(() => {
-            if (this.ghostElement) {
-                // We need to take into account marginLeft, since top style does not include margin, but pageX includes the margin.
-                const ghostMarginLeft = parseInt(document.defaultView.getComputedStyle(this.ghostElement)['margin-left'], 10);
-                // If ghost host is defined it needs to be taken into account.
-                this.ghostElement.style.left = (pageX - ghostMarginLeft - this._ghostHostX) + 'px';
-            }
-        });
+        if (this.ghostElement) {
+            // We need to take into account marginLeft, since top style does not include margin, but pageX includes the margin.
+            const ghostMarginLeft = parseInt(document.defaultView.getComputedStyle(this.ghostElement)['margin-left'], 10);
+            // If ghost host is defined it needs to be taken into account.
+            this.ghostElement.style.left = (pageX - ghostMarginLeft - this._ghostHostX) + 'px';
+        }
     }
 
     protected get ghostLeft() {
         return parseInt(this.ghostElement.style.left, 10) + this._ghostHostX;
     }
 
     protected set ghostTop(pageY: number) {
-        // To Do: Remove requestAnimationFrame when deprecated animations inputs are removed as well.
-        // We use requestAnimationFrame for the old drop animations in combination with updateDragRelativePos.
-        requestAnimationFrame(() => {
-            if (this.ghostElement) {
-                // We need to take into account marginTop, since top style does not include margin, but pageY includes the margin.
-                const ghostMarginTop = parseInt(document.defaultView.getComputedStyle(this.ghostElement)['margin-top'], 10);
-                // If ghost host is defined it needs to be taken into account.
-                this.ghostElement.style.top = (pageY - ghostMarginTop - this._ghostHostY) + 'px';
-            }
-        });
+        if (this.ghostElement) {
+            // We need to take into account marginTop, since top style does not include margin, but pageY includes the margin.
+            const ghostMarginTop = parseInt(document.defaultView.getComputedStyle(this.ghostElement)['margin-top'], 10);
+            // If ghost host is defined it needs to be taken into account.
+            this.ghostElement.style.top = (pageY - ghostMarginTop - this._ghostHostY) + 'px';
+        }
     }
 
     protected get ghostTop() {
@@ -611,10 +603,6 @@ export class IgxDragDirective implements AfterContentInit, OnDestroy {
      */
     public animInProgress = false;
 
-    protected _baseMarginLeft = 0;
-    protected _baseMarginTop = 0;
-    protected _baseOriginX;
-    protected _baseOriginY;
     protected _startX = 0;
     protected _startY = 0;
     protected _lastX = 0;
@@ -712,12 +700,6 @@ export class IgxDragDirective implements AfterContentInit, OnDestroy {
             });
         });
 
-        this._baseMarginLeft = parseInt(document.defaultView.getComputedStyle(this.element.nativeElement)['margin-left'], 10);
-        this._baseMarginTop = parseInt(document.defaultView.getComputedStyle(this.element.nativeElement)['margin-top'], 10);
-        this._baseOriginX = this.baseLeft;
-        this._baseOriginY = this.baseTop;
-        this._ghostStartX = this.baseLeft;
-        this._ghostStartY = this.baseTop;
         // Set transition duration to 0s. This also helps with setting `visibility: hidden` to the base to not lag.
         this.element.nativeElement.style.transitionDuration = '0.0s';
     }
@@ -877,11 +859,6 @@ export class IgxDragDirective implements AfterContentInit, OnDestroy {
             event.preventDefault();
         }
 
-        if (!this._baseOriginX && !this._baseOriginY) {
-            this._baseOriginX = this.baseLeft;
-            this._baseOriginY = this.baseTop;
-        }
-
         if (this.pointerEventsEnabled || !this.touchEventsEnabled) {
             // Check first for pointer events or non touch, because we can have pointer events and touch events at once.
             this._startX = event.pageX;
@@ -1239,57 +1216,6 @@ export class IgxDragDirective implements AfterContentInit, OnDestroy {
         this._lastDropArea = null;
     }
 
-    /**
-     * @hidden
-     * Update relative positions
-     */
-    public updateDragRelativePos() {
-        let newPosX, newPosY;
-        if (this.ghost && this.ghostElement) {
-            // Calculate the new ghostElement position to remain where the mouse is, so it doesn't jump
-            const totalDraggedX = this.ghostLeft - this._ghostStartX;
-            const totalDraggedY = this.ghostTop - this._ghostStartY;
-            newPosX = this.baseLeft;
-            newPosY = this.baseTop;
-            const diffStartX = this._ghostStartX - newPosX;
-            const diffStartY = this._ghostStartY - newPosY;
-            this.ghostTop = newPosX + totalDraggedX - diffStartX;
-            this.ghostLeft = newPosY + totalDraggedY - diffStartY;
-        } else if (!this.ghost) {
-            const totalDraggedX = this.getTransformX(this.element.nativeElement);
-            const totalDraggedY = this.getTransformY(this.element.nativeElement);
-            newPosX = this.baseLeft - totalDraggedX;
-            newPosY = this.baseTop - totalDraggedY;
-            const deltaX = this._baseOriginX - newPosX;
-            const deltaY = this._baseOriginY - newPosY;
-            this.setTransformXY(totalDraggedX + deltaX, totalDraggedY + deltaY);
-        }
-        this._baseOriginX = newPosX !== undefined ? newPosX : this._baseOriginX;
-        this._baseOriginY = newPosY !== undefined ? newPosY : this._baseOriginY;
-    }
-
-    /**
-     * @deprecated This method will be removed in future major version. Please use `transitionToOrigin` or `transitionTo`.
-     * Informs the `igxDrag` directive that it has been dropped/released.
-     * This should usually be called when `animateOnRelease` is set to `true`.
-     * When canceling or defining custom drop logic this tells the igxDrag to update it's positions and
-     * animate correctly to the new position.
-     * ```typescript
-     * public onDropElem(event) {
-     *     // Function bound to the igxDrop directive event `onDrop`
-     *     // This cancels the default drop logic of the `igxDrop`
-     *     event.cancel = true;
-     *     event.drag.dropFinished();
-     * }
-     * ```
-    */
-    public dropFinished() {
-        this.updateDragRelativePos();
-        if (this.animateOnRelease && this.ghostElement) {
-            this.transitionToOrigin();
-        }
-    }
-
     /**
      * @hidden
      */

projects/igniteui-angular/src/lib/directives/drag-drop/drag-drop.directive.ts

@@ -1175,106 +1175,6 @@ describe('General igxDrag/igxDrop', () => {
         expect(dragDirsRects[0].top + 50).toBeLessThan(currTop);
         expect(currTop).toBeLessThanOrEqual(dragDirsRects[0].top + 100);
     }));
-
-    it('should keep same base element page position when element is moved in the DOM after executing updateDragRelativePos.', (async() => {
-        const firstDrag = fix.componentInstance.dragElems.first;
-        const firstElement = firstDrag.element.nativeElement;
-        const startingX = (dragDirsRects[0].left + dragDirsRects[0].right) / 2;
-        const startingY = (dragDirsRects[0].top + dragDirsRects[0].bottom) / 2;
-        firstDrag.ghost = false;
-
-        // Step 1.
-        UIInteractions.simulatePointerEvent('pointerdown', firstElement, startingX, startingY);
-        fix.detectChanges();
-        await wait();
-
-        // Step 2.
-        UIInteractions.simulatePointerEvent('pointermove', firstElement, startingX + 10, startingY + 10);
-        fix.detectChanges();
-        await wait(100);
-
-        // Step 3.
-        UIInteractions.simulatePointerEvent('pointermove', firstElement, startingX + 20, startingY + 20);
-        fix.detectChanges();
-        await wait(100);
-
-        expect(firstDrag.element.nativeElement.getBoundingClientRect().left).toEqual(dragDirsRects[0].left + 20);
-        expect(firstDrag.element.nativeElement.getBoundingClientRect().top).toEqual(dragDirsRects[0].top + 20);
-
-        fix.componentInstance.renderer.removeChild(firstElement.parentNode, firstElement);
-        fix.componentInstance.renderer.appendChild(dropArea.element.nativeElement, firstElement);
-        fix.detectChanges();
-
-        firstDrag.updateDragRelativePos();
-        fix.detectChanges();
-
-        expect(firstDrag.element.nativeElement.getBoundingClientRect().left).toEqual(dragDirsRects[0].left + 20);
-        expect(firstDrag.element.nativeElement.getBoundingClientRect().top).toEqual(dragDirsRects[0].top + 20);
-
-        // Step 4.
-        UIInteractions.simulatePointerEvent('pointermove', firstElement, startingX + 30, startingY + 30);
-        fix.detectChanges();
-        await wait(100);
-
-        expect(firstDrag.element.nativeElement.getBoundingClientRect().left).toEqual(dragDirsRects[0].left + 30);
-        expect(firstDrag.element.nativeElement.getBoundingClientRect().top.toFixed(2)).toEqual((dragDirsRects[0].top + 30).toFixed(2));
-
-        // Step 5.
-        UIInteractions.simulatePointerEvent('pointerup', firstElement, startingX + 30, startingY + 30);
-        fix.detectChanges();
-        await wait();
-
-        expect(firstDrag.element.nativeElement.getBoundingClientRect().left).toEqual(dragDirsRects[0].left + 30);
-        expect(firstDrag.element.nativeElement.getBoundingClientRect().top.toFixed(2)).toEqual((dragDirsRects[0].top + 30).toFixed(2));
-    }));
-
-    it('should keep same ghost page position when element is moved in the DOM after executing updateDragRelativePos.', (async() => {
-        const firstDrag = fix.componentInstance.dragElems.first;
-        const firstElement = firstDrag.element.nativeElement;
-        const startingX = (dragDirsRects[0].left + dragDirsRects[0].right) / 2;
-        const startingY = (dragDirsRects[0].top + dragDirsRects[0].bottom) / 2;
-
-        // Step 1.
-        UIInteractions.simulatePointerEvent('pointerdown', firstElement, startingX, startingY);
-        fix.detectChanges();
-        await wait();
-
-        // Step 2.
-        UIInteractions.simulatePointerEvent('pointermove', firstElement, startingX + 10, startingY + 10);
-        fix.detectChanges();
-        await wait(100);
-
-        // Step 3.
-        UIInteractions.simulatePointerEvent('pointermove', firstDrag.ghostElement, startingX + 20, startingY + 20);
-        fix.detectChanges();
-        await wait(100);
-
-        expect(firstDrag.ghostElement.getBoundingClientRect().left).toEqual(dragDirsRects[0].left + 20);
-        expect(firstDrag.ghostElement.getBoundingClientRect().top).toEqual(dragDirsRects[0].top + 20);
-
-        fix.componentInstance.renderer.removeChild(firstDrag.ghostElement.parentNode, firstDrag.ghostElement);
-        fix.componentInstance.renderer.appendChild(dropArea.element.nativeElement, firstDrag.ghostElement);
-        fix.detectChanges();
-
-        firstDrag.updateDragRelativePos();
-        fix.detectChanges();
-
-        expect(firstDrag.ghostElement.getBoundingClientRect().left).toEqual(dragDirsRects[0].left + 20);
-        expect(firstDrag.ghostElement.getBoundingClientRect().top).toEqual(dragDirsRects[0].top + 20);
-
-        // Step 4.
-        UIInteractions.simulatePointerEvent('pointermove', firstDrag.ghostElement, startingX + 30, startingY + 30);
-        fix.detectChanges();
-        await wait(100);
-
-        expect(firstDrag.ghostElement.getBoundingClientRect().left).toEqual(dragDirsRects[0].left + 30);
-        expect(firstDrag.ghostElement.getBoundingClientRect().top).toEqual((dragDirsRects[0].top + 30));
-
-        // Step 5.
-        UIInteractions.simulatePointerEvent('pointerup', firstElement, startingX + 30, startingY + 30);
-        fix.detectChanges();
-        await wait();
-    }));
 });
 
 describe('Linked igxDrag/igxDrop ', () => {