Merge branch 'master' of https://github.com/IgniteUI/igniteui-angular into ha-mutliview-calendar-2

Author: hanastasov

CHANGELOG.md

@@ -14,6 +14,8 @@ All notable changes for each version of this project will be documented in this
     - **Breaking Change** `igxExcelStyleMovingTemplate` directive is renamed to `igxExcelStyleMoving`.
     - **Breaking Change** `igxExcelStyleHidingTemplate` directive is renamed to `igxExcelStyleHiding`.
     - **Breaking Change** `igxExcelStylePinningTemplate` directive is renamed to `igxExcelStylePinning`.
+## 8.1.4
+- `IgxDialog` new @Input `positionSettings` is now available. It provides the ability to get/set both position and animation settings of the Dialog component. 
 
 ## 8.1.3
 - `IgxCombo`

projects/igniteui-angular/src/lib/core/styles/components/navdrawer/_navdrawer-theme.scss

@@ -209,6 +209,10 @@
     %aside--mini {
         width: rem(60px);
         transition-duration: .2s, .2s;
+
+        %item {
+            justify-content: center;
+        }
     }
 
     %aside--normal {
@@ -251,17 +255,18 @@
     %item {
         position: relative;
         display: flex;
+        align-items: center;
         flex-flow: row nowrap;
         color: --var($theme, 'item-text-color');
         max-height: rem(48px);
-        padding: rem(12px) rem(16px);
+        min-width: rem(32px);
+        padding: rem(12px) rem(8px);
         cursor: pointer;
-        align-items: center;
         user-select: none;
         outline: transparent;
         white-space: nowrap;
         border-radius: --var($theme, 'item-border-radius');
-        margin: 8px;
+        margin: rem(8px) rem(8px);
 
         > igx-icon + span {
             margin-left: rem(32px);

projects/igniteui-angular/src/lib/dialog/README.md

@@ -93,3 +93,23 @@ or
         <div igxDialogActions>BUTTONS</div>
     </igx-dialog>
 ```
+
+You can now set set the position and animation settings used by the dialog by using `positionSettings` @Input
+
+```typescript
+import { slideInLeft, slideOutRight } from 'igniteui-angular';
+...
+@ViewChild('alert', { static: true }) public alert: IgxDialogComponent;
+ public newPositionSettings: PositionSettings = {
+     openAnimation: useAnimation(slideInTop, { params: { duration: '2000ms' } }),
+     closeAnimation: useAnimation(slideOutBottom, { params: { duration: '2000ms'} }),
+     horizontalDirection: HorizontalAlignment.Left,
+     verticalDirection: VerticalAlignment.Middle,
+     horizontalStartPoint: HorizontalAlignment.Left,
+     verticalStartPoint: VerticalAlignment.Middle,
+     minSize: { height: 100, width: 100 }
+ };
+
+this.alert.positionSettings = this.newPositionSettings;
+```
+

projects/igniteui-angular/src/lib/dialog/dialog.component.spec.ts

@@ -1,14 +1,17 @@
-import { Component, DebugElement, ElementRef, ViewChild } from '@angular/core';
-import { async, ComponentFixture, TestBed, fakeAsync, tick } from '@angular/core/testing';
+import { Component, ViewChild } from '@angular/core';
+import { async, TestBed, fakeAsync, tick } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { BrowserAnimationsModule, NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { UIInteractions, wait } from '../test-utils/ui-interactions.spec';
 import { IDialogEventArgs, IgxDialogComponent, IgxDialogModule } from './dialog.component';
 import { configureTestSuite } from '../test-utils/configure-suite';
+import { PositionSettings, slideInTop, slideOutBottom, HorizontalAlignment, VerticalAlignment } from 'igniteui-angular';
+import { useAnimation } from '@angular/animations';
 
 const OVERLAY_MAIN_CLASS = 'igx-overlay';
 const OVERLAY_WRAPPER_CLASS = `${OVERLAY_MAIN_CLASS}__wrapper`;
 const OVERLAY_MODAL_WRAPPER_CLASS = `${OVERLAY_WRAPPER_CLASS}--modal`;
+const CLASS_OVERLAY_CONTENT_MODAL = `${OVERLAY_MAIN_CLASS}__content--modal`;
 
 describe('Dialog', () => {
     configureTestSuite();
@@ -21,7 +24,8 @@ describe('Dialog', () => {
                 NestedDialogsComponent,
                 CustomTemplates1DialogComponent,
                 CustomTemplates2DialogComponent,
-                DialogSampleComponent
+                DialogSampleComponent,
+                PositionSettingsDialogComponent
             ],
             imports: [BrowserAnimationsModule, NoopAnimationsModule, IgxDialogModule]
         }).compileComponents();
@@ -322,6 +326,78 @@ describe('Dialog', () => {
         expect(dialog.isOpen).toEqual(false);
     }));
 
+    describe('Position settings', () => {
+        let fix;
+        let dialog;
+        let detect;
+
+        beforeEach( fakeAsync(() => {
+            fix = TestBed.createComponent(PositionSettingsDialogComponent);
+            fix.detectChanges();
+            dialog = fix.componentInstance.dialog;
+            detect = () => dialog.cdr.detectChanges();
+        }));
+
+        it('Define different position settings ', (async() => {
+            const currentElement = fix.componentInstance;
+            dialog.open();
+            fix.detectChanges();
+            await wait(16);
+
+            expect(dialog.isOpen).toEqual(true);
+            const firstContentRect = document.getElementsByClassName(CLASS_OVERLAY_CONTENT_MODAL)[0].getBoundingClientRect();
+            const middleDialogPosition = document.documentElement.offsetHeight / 2 - firstContentRect.height / 2;
+            expect(firstContentRect.left).toEqual(0, 'OffsetLeft position check');
+            expect(firstContentRect.top).toBeGreaterThanOrEqual(middleDialogPosition - 2, 'OffsetTop position check');
+            expect(firstContentRect.top).toBeLessThanOrEqual(middleDialogPosition + 2, 'OffsetTop position check');
+
+            dialog.close();
+            fix.detectChanges();
+            await wait(16);
+
+            expect(dialog.isOpen).toEqual(false);
+            dialog.positionSettings = currentElement.newPositionSettings;
+            fix.detectChanges();
+            await wait(16);
+
+            dialog.open();
+            fix.detectChanges();
+            await wait(16);
+
+            expect(dialog.isOpen).toEqual(true);
+            const secondContentRect = document.getElementsByClassName(CLASS_OVERLAY_CONTENT_MODAL)[0].getBoundingClientRect();
+            const topDialogPosition = document.documentElement.offsetWidth / 2 - secondContentRect.width / 2;
+            expect(secondContentRect.top).toEqual(0, 'OffsetTop position check');
+            expect(secondContentRect.left).toBeGreaterThanOrEqual(topDialogPosition - 2, 'OffsetLeft position check');
+            expect(secondContentRect.left).toBeLessThanOrEqual(topDialogPosition + 2, 'OffsetLeft position check');
+
+            dialog.close();
+            fix.detectChanges();
+            await wait(16);
+
+            expect(dialog.isOpen).toEqual(false);
+        }));
+
+        it('Set animation settings', (async() => {
+            const currentElement = fix.componentInstance;
+
+            // Check initial animation settings
+            expect(dialog.positionSettings.openAnimation.animation.type).toEqual(8, 'Animation type is set');
+            expect(dialog.positionSettings.openAnimation.options.params.duration).toEqual('200ms', 'Animation duration is set to 200ms');
+
+            expect(dialog.positionSettings.closeAnimation.animation.type).toEqual(8, 'Animation type is set');
+            expect(dialog.positionSettings.closeAnimation.options.params.duration).toEqual('200ms', 'Animation duration is set to 200ms');
+
+            dialog.positionSettings = currentElement.animationSettings;
+            fix.detectChanges();
+            await wait(16);
+
+            // Check the new animation settings
+            expect(dialog.positionSettings.openAnimation.options.params.duration).toEqual('800ms', 'Animation duration is set to 800ms');
+            expect(dialog.positionSettings.closeAnimation.options.params.duration).toEqual('700ms', 'Animation duration is set to 700ms');
+        }));
+    });
+
     function dispatchEvent(element: HTMLElement, eventType: string) {
         const event = new Event(eventType);
         element.dispatchEvent(event);
@@ -436,3 +512,32 @@ class CustomTemplates1DialogComponent {
 class CustomTemplates2DialogComponent {
     @ViewChild('dialog', { static: true }) public dialog: IgxDialogComponent;
 }
+
+
+@Component({
+    template: `<igx-dialog #dialog title="Notification" message="Your email has been sent successfully!" leftButtonLabel="OK"
+        [positionSettings]="positionSettings" >
+    </igx-dialog>` })
+class PositionSettingsDialogComponent {
+    @ViewChild('dialog', { static: true }) public dialog: IgxDialogComponent;
+
+    public positionSettings: PositionSettings = {
+        horizontalDirection: HorizontalAlignment.Left,
+        verticalDirection: VerticalAlignment.Middle,
+        horizontalStartPoint: HorizontalAlignment.Left,
+        verticalStartPoint: VerticalAlignment.Middle,
+        openAnimation: useAnimation(slideInTop, { params: { duration: '200ms' } }),
+        closeAnimation: useAnimation(slideOutBottom, { params: { duration: '200ms'} })
+    };
+
+    public newPositionSettings: PositionSettings = {
+        horizontalDirection: HorizontalAlignment.Center,
+        verticalDirection: VerticalAlignment.Top
+    };
+
+    public animationSettings: PositionSettings = {
+        openAnimation: useAnimation(slideInTop, { params: { duration: '800ms' } }),
+        closeAnimation: useAnimation(slideOutBottom, { params: { duration: '700ms'} })
+    };
+
+}

projects/igniteui-angular/src/lib/dialog/dialog.component.ts

@@ -216,6 +216,41 @@ export class IgxDialogComponent implements IToggleView, OnInit, OnDestroy, After
         this._closeOnOutsideSelect = val;
     }
 
+    /**
+     * Get the position and animation settings used by the dialog.
+     * ```typescript
+     * @ViewChild('alert', { static: true }) public alert: IgxDialogComponent;
+     * let currentPosition: PositionSettings = this.alert.positionSettings
+     * ```
+     */
+    @Input()
+    public get positionSettings(): PositionSettings {
+        return this._positionSettings;
+    }
+
+    /**
+     * Set the position and animation settings used by the dialog.
+     * ```typescript
+     * import { slideInLeft, slideOutRight } from 'igniteui-angular';
+     * ...
+     * @ViewChild('alert', { static: true }) public alert: IgxDialogComponent;
+     *  public newPositionSettings: PositionSettings = {
+     *      openAnimation: useAnimation(slideInTop, { params: { duration: '2000ms' } }),
+     *      closeAnimation: useAnimation(slideOutBottom, { params: { duration: '2000ms'} }),
+     *      horizontalDirection: HorizontalAlignment.Left,
+     *      verticalDirection: VerticalAlignment.Middle,
+     *      horizontalStartPoint: HorizontalAlignment.Left,
+     *      verticalStartPoint: VerticalAlignment.Middle,
+     *      minSize: { height: 100, width: 100 }
+     *  };
+     * this.alert.positionSettings = this.newPositionSettings;
+     * ```
+     */
+    public set positionSettings(settings: PositionSettings) {
+        this._positionSettings = settings;
+        this._overlayDefaultSettings.positionStrategy = new GlobalPositionStrategy(this._positionSettings);
+    }
+
     /**
      * An event that is emitted when the dialog is opened.
      *```html
@@ -258,7 +293,7 @@ export class IgxDialogComponent implements IToggleView, OnInit, OnDestroy, After
     @Output()
     public onRightButtonSelect = new EventEmitter<IDialogEventArgs>();
 
-    private _animaitonSettings: PositionSettings = {
+    private _positionSettings: PositionSettings = {
         openAnimation: useAnimation(slideInBottom, { params: { fromPosition: 'translateY(100%)' } }),
         closeAnimation: useAnimation(slideOutTop, { params: { toPosition: 'translateY(-100%)' } })
     };
@@ -365,7 +400,7 @@ export class IgxDialogComponent implements IToggleView, OnInit, OnDestroy, After
         this._titleId = IgxDialogComponent.NEXT_ID++ + '_title';
 
         this._overlayDefaultSettings = {
-            positionStrategy: new GlobalPositionStrategy(this._animaitonSettings),
+            positionStrategy: new GlobalPositionStrategy(this._positionSettings),
             scrollStrategy: new NoOpScrollStrategy(),
             modal: this.isModal,
             closeOnOutsideClick: this.closeOnOutsideSelect

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

@@ -942,8 +942,8 @@ export class IgxDragDirective implements AfterContentInit, OnDestroy {
 
         const totalMovedX = pageX - this._startX;
         const totalMovedY = pageY - this._startY;
-        this._dragGhostHostX = this.dragGhostHost ? this.getdragGhostHostOffsetLeft(this.dragGhostHost) : 0;
-        this._dragGhostHostY = this.dragGhostHost ? this.getdragGhostHostOffsetTop(this.dragGhostHost) : 0;
+        this._dragGhostHostX = this.dragGhostHost ? this.getDragGhostHostOffsetLeft(this.dragGhostHost) : 0;
+        this._dragGhostHostY = this.dragGhostHost ? this.getDragGhostHostOffsetTop(this.dragGhostHost) : 0;
 
         this.dragGhost.style.transitionDuration = '0.0s';
         this.dragGhost.style.position = 'absolute';
@@ -1220,21 +1220,21 @@ export class IgxDragDirective implements AfterContentInit, OnDestroy {
         return window.scrollX ? window.scrollX : (window.pageXOffset ? window.pageXOffset : 0);
     }
 
-    protected getdragGhostHostOffsetLeft(dragGhostHost: any) {
-        if (dragGhostHost.computedStyleMap().get('position').value === 'static' &&
-                dragGhostHost.offsetParent && dragGhostHost.offsetParent === document.body) {
+    protected getDragGhostHostOffsetLeft(dragGhostHost: any) {
+        const ghostPosition = document.defaultView.getComputedStyle(dragGhostHost).getPropertyValue('position');
+        if (ghostPosition === 'static' && dragGhostHost.offsetParent && dragGhostHost.offsetParent === document.body) {
             return 0;
-        } else if (dragGhostHost.computedStyleMap().get('position').value === 'static' && dragGhostHost.offsetParent) {
+        } else if (ghostPosition === 'static' && dragGhostHost.offsetParent) {
             return dragGhostHost.offsetParent.getBoundingClientRect().left;
         }
         return dragGhostHost.getBoundingClientRect().left;
     }
 
-    protected getdragGhostHostOffsetTop(dragGhostHost: any) {
-        if (dragGhostHost.computedStyleMap().get('position').value === 'static' &&
-                dragGhostHost.offsetParent && dragGhostHost.offsetParent === document.body) {
+    protected getDragGhostHostOffsetTop(dragGhostHost: any) {
+        const ghostPosition = document.defaultView.getComputedStyle(dragGhostHost).getPropertyValue('position');
+        if (ghostPosition === 'static' && dragGhostHost.offsetParent && dragGhostHost.offsetParent === document.body) {
             return 0;
-        } else if (dragGhostHost.computedStyleMap().get('position').value === 'static' && dragGhostHost.offsetParent) {
+        } else if (ghostPosition === 'static' && dragGhostHost.offsetParent) {
             return dragGhostHost.offsetParent.getBoundingClientRect().top;
         }
         return dragGhostHost.getBoundingClientRect().top;

projects/igniteui-angular/src/lib/grids/column.component.ts

@@ -2003,8 +2003,6 @@ export class IgxColumnLayoutComponent extends IgxColumnGroupComponent implements
         }
 
         this.children.forEach(child => {
-            child.disableHiding = true;
-            child.disablePinning = true;
             child.movable = false;
         });
     }

projects/igniteui-angular/src/lib/grids/grid-toolbar.component.ts

@@ -21,6 +21,7 @@ import {
     AbsoluteScrollStrategy
 } from '../services/index';
 import { GridBaseAPIService } from './api.service';
+import { IgxButtonDirective } from '../directives/button/button.directive';
 import { IgxGridBaseComponent, IGridDataBindable } from './grid-base.component';
 import { IgxDropDownComponent } from '../drop-down/drop-down.component';
 import { IgxColumnHidingComponent } from './column-hiding.component';
@@ -104,8 +105,8 @@ export class IgxGridToolbarComponent extends DisplayDensityBase {
      * const hidingButton = this.grid.toolbar.columnHidingButton;
      * ```
      */
-    @ViewChild('columnHidingButton', { static: false })
-    public columnHidingButton;
+    @ViewChild('columnHidingButton', { read: IgxButtonDirective, static: false })
+    public columnHidingButton: IgxButtonDirective;
 
     /**
      * Provides a reference to the `IgxDropDownComponent` of the Export button.
@@ -122,8 +123,8 @@ export class IgxGridToolbarComponent extends DisplayDensityBase {
      * const exportBtn = this.grid.toolbar.exportButton;
      * ```
      */
-    @ViewChild('btnExport', { static: false })
-    public exportButton;
+    @ViewChild('btnExport', { read: IgxButtonDirective, static: false })
+    public exportButton: IgxButtonDirective;
 
     /**
      * Provides a reference to the `IgxDropDownComponent` of the Column Pinning UI.
@@ -149,8 +150,8 @@ export class IgxGridToolbarComponent extends DisplayDensityBase {
      * const pinningButton = this.grid.toolbar.columnPinningButton;
      * ```
      */
-    @ViewChild('columnPinningButton', { static: false })
-    public columnPinningButton;
+    @ViewChild('columnPinningButton', { read: IgxButtonDirective, static: false })
+    public columnPinningButton: IgxButtonDirective;
 
     /**
      * Returns a reference to the `IgxGridComponent` component, hosting the `IgxGridToolbarComponent`.

projects/igniteui-angular/src/lib/grids/grid/grid-toolbar.spec.ts

@@ -4,6 +4,7 @@ import { By } from '@angular/platform-browser';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { first } from 'rxjs/operators';
 import { IgxCsvExporterOptions, IgxCsvExporterService, IgxExcelExporterOptions, IgxExcelExporterService } from '../../services/index';
+import { IgxButtonDirective } from '../../directives/button/button.directive';
 import { IgxGridComponent } from './grid.component';
 import { IgxGridModule } from './index';
 import { DisplayDensity } from '../../core/displayDensity';
@@ -582,6 +583,28 @@ describe('IgxGrid - Grid Toolbar Custom Content', () => {
         expect(customContainer).not.toBe(null);
     });
 
+    it('should expose the toolbar buttons with their correct type', () => {
+        fixture = TestBed.createComponent(GridToolbarTestPage1Component);
+        fixture.detectChanges();
+        grid = fixture.componentInstance.grid1;
+
+        grid.showToolbar = true;
+        grid.columnHiding = true;
+        grid.columnPinning = true;
+        grid.exportExcel = true;
+        grid.exportCsv = true;
+        fixture.detectChanges();
+
+        let aButton = grid.toolbar.columnHidingButton;
+        expect(aButton instanceof IgxButtonDirective).toBe(true, 'column hiding button has wrong type');
+
+        aButton = grid.toolbar.columnPinningButton;
+        expect(aButton instanceof IgxButtonDirective).toBe(true, 'column pinning button has wrong type');
+
+        aButton = grid.toolbar.exportButton;
+        expect(aButton instanceof IgxButtonDirective).toBe(true, 'export button has wrong type');
+    });
+
 });
 
 function getToolbar(fixture) {