Merge branch 'master' into vslavov/combo-remote-clear

Author: kdinev

CHANGELOG.md

@@ -32,12 +32,26 @@ For more information about the theming please read our [documentation](https://w
     - `uniqueColumnValuesStrategy` input is added. This property provides a callback for loading unique column values on demand. If this property is provided, the unique values it generates will be used by the Excel Style Filtering (instead of using the unique values from the data that is bound to the grid).
     - `igxExcelStyleLoading` directive is added, which can be used to provide a custom loading template for the Excel Style Filtering. If this property is not provided, a default loading template will be used instead.
     - introduced new properties `cellSelection` and `rowSelection` which accept GridSelection mode enumeration. Grid selection mode could be none, single or multiple. Also `hideRowSelectors` property is added, which allows you to show and hide row selectors when row selection is enabled.
+    - introduced functionality for templating row and header selectors - [spec](https://github.com/IgniteUI/igniteui-angular/wiki/Row-Selection-Templating-(Grid-feature))
+    ```html
+    <igx-grid [data]="data", [rowSelection]="'multiple'" primaryKey="ID">
+        <igx-column field="Name"></igx-column>
+        <igx-column field="Age"></igx-column>
+
+        <ng-template igxHeadSelector let-headSelector>
+            <igx-icon>done_all</igx-icon>
+        </ng-template>
+        <ng-template igxRowSelector let-rowContext>
+            <igx-switch [checked]="rowContext.selected"></igx-switch>
+        </ng-template>
+    </igx-grid>
+    ```
 - `IgxHierarchicalGrid`
     - Row Islands now emit child grid events with an additional argument - `owner`, which holds reference to the related child grid component instance.
 - `IgxDrag`
     - Dragging without ghost. Now it is possible to drag the base element `igxDrag` is instanced on by setting the new input `ghost` to false.
     - Ghost template. A custom ghost template reference can be provided on the new `ghostTemplate` input.
-    - Dragging using a single or multiple handles. New `igxDragHandle` directive is exposed to specify a handle by which and element can be interacted with instead of the whole element `igxDrag` is instanced on.
+    - Dragging using a single or multiple handles. New `igxDragHandle` directive is exposed to specify a handle by which an element can be interacted with instead of the whole element `igxDrag` is instanced on.
     - Linking of drag and drop elements. This can be achieved by using the new provided `dragChannel` input, specifying each element to which channel it corresponds.
     - Drag animation improvements. Three new methods have been exposed in place of the old `animateToOrigin` input in order to provide more flexibility when wanting to have transition animation to specific position when dropping. `setLocation`, `transitionToOrigin` and `transitionTo` are all methods that provide a various way to animate a transition to a specific location for the dragged element.
     - New getters - `location` and `originLocation` to aid in applying transition animations.
@@ -47,6 +61,8 @@ For more information about the theming please read our [documentation](https://w
     - Drop strategies. Three new drop strategies have been provided - Append, Prepend and Insert.  Also an input `dropStrategy` to the `igxDrop` which specify which strategy should be used when dropping an element inside the drop area. Custom one can be specified as well.
 - `IgxCheckbox`
     - introduced a new `readonly` property that doesn't allow user interaction to change the state, but keeps the default active style. Intended for integration in complex controls that handle the interaction and control the checkbox instead through binding.
+- `IgxOverlay`
+    - introduced a new `ContainerPositionStrategy`. The new strategy positions the element inside the containing outlet based on the directions passed in trough PositionSettings.
 
 ### General
 - `IgxGrid`, `IgxTreeGrid`, `IgxHierarchicalGrid`
@@ -78,10 +94,6 @@ For more information about the theming please read our [documentation](https://w
     ```
    - **Breaking Change** When using `[valueKey]`, combo methods, events and outputs **cannot** be handled with *data item references*.
    - For more information, visit the component's [readme](https://github.com/IgniteUI/igniteui-angular/tree/master/projects/igniteui-angular/src/lib/combo/README.md)
-
-## 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.
-
 - `IgxDrag`
     - Deprecated inputs - `hideBaseOnDrag`, `animateOnRelease`, `visible`.
     - Deprecated methods - `dropFinished`.
@@ -97,10 +109,13 @@ For more information about the theming please read our [documentation](https://w
     - **Breaking Change** `onOver` output is renamed to `over`.
     - **Breaking Change** `onLeave` output is renamed to `leave`.
     - **Breaking Change** `onDrop` output is renamed to `dropped`.
-    - **Breaking Change** Interfaces `IgxDropEnterEventArgs`, `IgxDropLeaveEventArgs` are both now called `IDragBaseEventArgs`.
+    - **Breaking Change** Interfaces `IgxDropEnterEventArgs`, `IgxDropLeaveEventArgs` are both now called `IDropBaseEventArgs`.
     - **Breaking Change** Interfaces `IgxDropEventArgs` is renamed to `IDropDroppedEventArgs`.
     - **Breaking Change** Outputs `enter`, `over`, `leave`(former `onEnter`, `onOver`, `onLeave`) now have arguments of type `IDropBaseEventArgs`
     - **Breaking Change** Output `dropped` (former `onDrop`) now have arguments of type `IDropDroppedEventArgs`
+    
+## 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`

ROADMAP.md

@@ -5,9 +5,9 @@
 ## Milestone 9 (Due by September, 2019) 
 
 1. IgxGrid Advanced Filtering [#5496](https://github.com/IgniteUI/igniteui-angular/issues/5496)
-2. IgxGrid row and cell selection modes [#4989](https://github.com/IgniteUI/igniteui-angular/issues/4989)
-3. Fluent Theme [#5335](https://github.com/IgniteUI/igniteui-angular/issues/5335)
-4. Drag and Drop enhancements [#5319](https://github.com/IgniteUI/igniteui-angular/issues/5319)
+2. **[DONE]** IgxGrid row and cell selection modes [#4989](https://github.com/IgniteUI/igniteui-angular/issues/4989)
+3. **[DONE]** Fluent Theme [#5335](https://github.com/IgniteUI/igniteui-angular/issues/5335)
+4. **[DONE]** Drag and Drop enhancements [#5319](https://github.com/IgniteUI/igniteui-angular/issues/5319)
 5. Multi-View Calendar + Range DatePicker [#4282](https://github.com/IgniteUI/igniteui-angular/issues/4282)
 6. Custom grid row selector templates [#4998](https://github.com/IgniteUI/igniteui-angular/issues/4998)
 7. Per-column Filtering Strategies [#5323](https://github.com/IgniteUI/igniteui-angular/issues/5323)
@@ -25,7 +25,7 @@
 1. **[DONE]** Grid Multi-Row Layout keyboard nav [#4708](https://github.com/IgniteUI/igniteui-angular/issues/4708) Released in [8.0.0](https://github.com/IgniteUI/igniteui-angular/releases/tag/8.0.0), [7.3.4](https://github.com/IgniteUI/igniteui-angular/releases/tag/7.3.4)
 2. **[DONE]** Angular 8 compatibility [#4908](https://github.com/IgniteUI/igniteui-angular/issues/4908) Released in [8.0.0](https://github.com/IgniteUI/igniteui-angular/releases/tag/8.0.0)
 3. **[DONE]** Display density for Drop Downs [#2960](https://github.com/IgniteUI/igniteui-angular/issues/2960) Released in [8.0.1](https://github.com/IgniteUI/igniteui-angular/releases/tag/8.0.1), [7.3.4](https://github.com/IgniteUI/igniteui-angular/releases/tag/7.3.4), [7.2.12](https://github.com/IgniteUI/igniteui-angular/releases/tag/7.2.12)
-4. **[DONE]** Slider custom labels [#4594](https://github.com/IgniteUI/igniteui-angular/issues/4594)
+4. **[DONE]** Slider custom thumb labels [#3449](https://github.com/IgniteUI/igniteui-angular/issues/3449)
 5. **[DONE]** Copy data from the igxGrid [#4907](https://github.com/IgniteUI/igniteui-angular/issues/4907)
 6. **[DONE]** BottomNav and Tabs integration with router outlet container [#4297](https://github.com/IgniteUI/igniteui-angular/issues/4297)
 7. **[DONE]** Date/Time pickers action buttons customization [#4647](https://github.com/IgniteUI/igniteui-angular/issues/4647) Released in [8.0.0](https://github.com/IgniteUI/igniteui-angular/releases/tag/8.0.0)

projects/igniteui-angular/migrations/update-8_2_0/changes/classes.json

@@ -0,0 +1,17 @@
+{
+    "$schema": "../../common/schema/class.schema.json",
+    "changes": [
+        {
+            "name": "IgxDropEnterEventArgs",
+            "replaceWith": "IDropBaseEventArgs"
+        },
+        {
+            "name": "IgxDropLeaveEventArgs",
+            "replaceWith": "IDropBaseEventArgs"
+        },
+        {
+            "name": "IgxDropEventArgs",
+            "replaceWith": "IDropDroppedEventArgs"
+        }
+    ]
+}

projects/igniteui-angular/migrations/update-8_2_0/index.spec.ts

@@ -66,16 +66,52 @@ describe('Update 8.2.0', () => {
     it('should update igxDrag and igxDrop outputs bindings', done => {
         appTree.create(
             '/testSrc/appPrefix/component/custom.component.html',
-            `<div igxDrag (onGhostCreate)="ghostCreateHandler($event)" (onGhostDestroy)="ghostDestroyHandler($event)" (returnMoveEnd)="moveEndHandler($event)" (dragClicked)="clickHandler($event)">Drag me</div>
+            `<div igxDrag (onGhostCreate)="ghostCreateHandler($event)"
+                (onGhostDestroy)="ghostDestroyHandler($event)"
+                (returnMoveEnd)="moveEndHandler($event)"
+                (dragClicked)="clickHandler($event)">
+                Drag me
+            </div>
             <div igxDrop (onEnter)="enterHandler($event)" (onLeave)="leaveHandler($event)" (onDrop)="dropHandler($event)">drop area</div>
             `);
-        const tree = schematicRunner.runSchematic('migration-10', {}, appTree);
 
+        const tree = schematicRunner.runSchematic('migration-10', {}, appTree);
         expect(tree.readContent('/testSrc/appPrefix/component/custom.component.html'))
             .toEqual(
-            `<div igxDrag (ghostCreate)="ghostCreateHandler($event)" (ghostDestroy)="ghostDestroyHandler($event)" (transitioned)="moveEndHandler($event)" (click)="clickHandler($event)">Drag me</div>
+            `<div igxDrag (ghostCreate)="ghostCreateHandler($event)"
+                (ghostDestroy)="ghostDestroyHandler($event)"
+                (transitioned)="moveEndHandler($event)"
+                (click)="clickHandler($event)">
+                Drag me
+            </div>
             <div igxDrop (enter)="enterHandler($event)" (leave)="leaveHandler($event)" (dropped)="dropHandler($event)">drop area</div>
             `);
         done();
     });
+
+    it('should update igxDrag and igxDrop event argument interfaces', done => {
+        appTree.create(
+            '/testSrc/appPrefix/component/test.component.ts',
+            `import { IgxDragDirective, IgxDropDirective, IgxDropEnterEventArgs,
+                IgxDropLeaveEventArgs, IgxDropEventArgs } from 'igniteui-angular';
+
+            export class DragDropSampleComponent {
+                public onEnterHandler(event: IgxDropEnterEventArgs) {}
+                public onLeaveHandler(event: IgxDropLeaveEventArgs) {}
+                public onDropHandler(event: IgxDropEventArgs) {}
+            }`);
+
+        const tree = schematicRunner.runSchematic('migration-10', {}, appTree);
+        expect(tree.readContent('/testSrc/appPrefix/component/test.component.ts'))
+            .toEqual(
+            `import { IgxDragDirective, IgxDropDirective, IDropBaseEventArgs,
+                IDropBaseEventArgs, IDropDroppedEventArgs } from 'igniteui-angular';
+
+            export class DragDropSampleComponent {
+                public onEnterHandler(event: IDropBaseEventArgs) {}
+                public onLeaveHandler(event: IDropBaseEventArgs) {}
+                public onDropHandler(event: IDropDroppedEventArgs) {}
+            }`);
+        done();
+    });
 });

projects/igniteui-angular/src/lib/core/grid-selection.ts

@@ -272,11 +272,11 @@ export class IgxGridSelectionService {
      * Adds a single node.
      * Single clicks | Ctrl + single clicks on cells is the usual case.
      */
-    add(node: ISelectionNode): void {
+    add(node: ISelectionNode, addToRange = true): void {
         this.selection.has(node.row) ? this.selection.get(node.row).add(node.column) :
             this.selection.set(node.row, new Set<number>()).get(node.row).add(node.column);
 
-        this._ranges.add(JSON.stringify(this.generateRange(node)));
+        if (addToRange) { this._ranges.add(JSON.stringify(this.generateRange(node))); }
     }
 
     /**
@@ -307,10 +307,10 @@ export class IgxGridSelectionService {
         return (this.isActiveNode(node) && this.grid.isCellSelectable) || this.isInMap(node);
     }
 
-    isActiveNode(node: ISelectionNode, mrl = false): boolean {
+    isActiveNode(node: ISelectionNode): boolean {
         if (this.activeElement) {
             const isActive = this.activeElement.column === node.column && this.activeElement.row === node.row;
-            if (mrl) {
+            if (this.grid.hasColumnLayouts) {
                 const layout = this.activeElement.layout;
                 return isActive && this.isActiveLayout(layout, node.layout);
             }
@@ -635,6 +635,12 @@ export class IgxGridSelectionService {
         return this.rowSelection.size > 0 && filteredData && !this.areAllRowSelected();
     }
 
+    public get filteredSelectedRowIds(): any[] {
+        return this.isFilteringApplied() ?
+            this.getRowIDs(this.allData).filter(rowID => this.isRowSelected(rowID)) :
+            this.getSelectedRows().filter(rowID => !this.isRowDeleted(rowID));
+    }
+
     public emitRowSelectionEvent(newSelection, added, removed, event?): boolean {
         const currSelection = this.getSelectedRows();
         if (this.areEqualCollections(currSelection, newSelection)) { return; }

projects/igniteui-angular/src/lib/core/styles/components/overlay/_overlay-component.scss

@@ -25,6 +25,11 @@
         @extend %overlay-wrapper--flex !optional;
     }
 
+    @include e(wrapper, $m: flex-container) {
+        @extend %overlay-wrapper !optional;
+        @extend %overlay-wrapper--flex-container !optional;
+    }
+
     @include e(content) {
         @extend %overlay-content !optional;
     }

projects/igniteui-angular/src/lib/core/styles/components/overlay/_overlay-theme.scss

@@ -70,6 +70,11 @@
         display: flex;
     }
 
+    %overlay-wrapper--flex-container {
+        display: flex;
+        position: absolute;
+    }
+
     %overlay-content {
         position: absolute;
         pointer-events: all;

projects/igniteui-angular/src/lib/directives/drag-drop/README.md

@@ -61,7 +61,7 @@ The `ghost` input is set to `true` by default which means that the base element
 
 #### Dragging without ghost
 
-If `renderGhost` input is set to false the dragging logic for the `igxDrag` provides dragging ability for the initialized element itself. This means that it can freely move an element around by click and hold and when released it will keep its position where it was dragged.
+If `ghost` input is set to false the dragging logic for the `igxDrag` provides dragging ability for the initialized element itself. This means that it can freely move an element around by click and hold and when released it will keep its position where it was dragged.
 
 #### Dragging using a handle
 
@@ -119,11 +119,10 @@ If the user want to have other types of animations that involve element transfor
 
 | Name | Type | Default Value | Description |
 | :--- | :--- | :--- | :--- |
-| igxDrag          | any | - | Input used to save data inside the `igxDrag` directive. This can be set when instancing `igxDrag` on an element. |
-| dragTolerance    | number | 5 | Indicates when the drag should start (in pixels). By default the drag starts after the draggable element is moved by 5px |
-| dragGhostHost | any | null | Sets the element to which the dragged element will be appended.
-| ghostImageClass  | string | '' | Sets a custom class that will be added to the `dragGhost` element. |
-| animateOnRelease | boolean | false | Enables/disables the draggable element animation when the element is released. |
+| `igxDrag`          | any | - | Input used to save data inside the `igxDrag` directive. This can be set when instancing `igxDrag` on an element. |
+| `dragTolerance`    | number | 5 | Indicates when the drag should start (in pixels). By default the drag starts after the draggable element is moved by 5px |
+| `ghostHost` | any | null | Sets the element to which the dragged element will be appended.
+| `ghostClass`  | string | '' | Sets a custom class that will be added to the `igxDrag` element. |
 
 ### Outputs
 
@@ -185,7 +184,7 @@ public onAreaLeave() {
 
 For achieving a drop functionality with the `igxDrag` directive the `igxDrop` directive should be used. It can be applied on any kind of element and it specifies an area where the `igxDrag` can be dropped. 
 
-By default the `igxDrop` does not apply any logic to the dragged element when it is dropped onto it. The user could choose between a few different drop strategies if he would like the `igxDrop` to perform some action or he could implement his own drop logic using the provided `onDragDrop` events.
+By default the `igxDrop` does not apply any logic to the dragged element when it is dropped onto it. The user could choose between a few different drop strategies if he would like the `igxDrop` to perform some action or he could implement his own drop logic using the provided `dropped` event.
 
 #### Drop Strategies
 
@@ -215,7 +214,7 @@ HTML:
 
 #### Canceling a Drop Strategy
 
-When using a specific drop strategy, its behavior can be canceled in the `onDrop` or `onDragDrop` events by setting the cancel property to true. The `onDrop` event is specific to the `igxDrag` and the `onDragDrop` event to the `igxDrop`. If the user does not have drop strategy applied to the `igxDrop` canceling the event would have no side effects.
+When using a specific drop strategy, its behavior can be canceled in the [`dropped`]({environment:angularApiUrl}/classes/igxdropdirective.html#dropped) events by setting the `cancel` property to true. The `dropped` event is specific to the `igxDrop`. If you does not have drop strategy applied to the `igxDrop` canceling the event would have no side effects.
 
 *Example:*
 

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

@@ -1459,6 +1459,31 @@ export class IgxDropDirective implements OnInit, OnDestroy {
     @Input()
     public dropChannel: number | string | number[] | string[];
 
+    /**
+     * An @Input property that specifies a drop strategy type that will be executed when an `IgxDrag` element is released inside
+     *  the current drop area. The provided strategies are:
+     *  - IgxDefaultDropStrategy - This is the default base strategy and it doesn't perform any actions.
+     *  - IgxAppendDropStrategy - Appends the dropped element to last position as a direct child to the `igxDrop`.
+     *  - IgxPrependDropStrategy - Prepends the dropped element to first position as a direct child to the `igxDrop`.
+     *  - IgxInsertDropStrategy - If the dropped element is released above a child element of the `igxDrop`, it will be inserted
+     *      at that position. Otherwise the dropped element will be appended if released outside any child of the `igxDrop`.
+     * ```html
+     * <div igxDrag>
+     *      <span>DragMe</span>
+     * </div>
+     * <div igxDrop [dropStrategy]="myDropStrategy">
+     *         <span>Numbers drop area!</span>
+     * </div>
+     * ```
+     * ```typescript
+     * import { IgxAppendDropStrategy } from 'igniteui-angular';
+     *
+     * export class App {
+     *      public myDropStrategy = IgxAppendDropStrategy;
+     * }
+     * ```
+     * @memberof IgxDropDirective
+     */
     @Input()
     public set dropStrategy(classRef: any) {
         this._dropStrategy = new classRef(this._renderer);