Merge branch 'master' into didimmova/fix-textarea-8078-master

Author: simeonoff

CHANGELOG.md

@@ -31,6 +31,7 @@ All notable changes for each version of this project will be documented in this
     - **Breaking Change** - The `selectedRows` method is now an `@Input` property. Setting it to an array of Row IDs will update the grid's selection state, any previous selection will be cleared. Setting it to an empty array will clear the selection entirely.
     - **Breaking Change** - Removed `IgxExcelStyleSortingTemplateDirective`, `IgxExcelStyleHidingTemplateDirective`, `IgxExcelStyleMovingTemplateDirective`, `IgxExcelStylePinningTemplateDirective` and `IgxExcelStyleSelectingTemplateDirective` directives for re-templating the Excel style filter menu. Added two new directives for re-templating the column operations and filter operations areas - `IgxExcelStyleColumnOperationsTemplateDirective` and `IgxExcelStyleFilterOperationsTemplateDirective`. Exposed all internal components of the Excel style filter menu in order to be used inside the templates.
     - **Breaking Change** - `IgxColumnHiding` and `IgxColumnPinning` components have been deprecated in favor of a component combining the their functionality - `IgxColumnActions` which is used with either of the new `IgxColumnPinning` and `IgxColumnHiding` directives that specify the action to be triggered through the UI.
+    - Added `move` method which allows to move a column to a specified visible index. The method is exposed off the `IgxColumnComponent`.
 - `igxGrid`
     - **Behavioral Change** - For numeric columns, the onCellEdit arguments' newValue will now contain the numeric value that will be committed instead of the string input.
     - Added `onScroll` event, which is emitted when the grid is scrolled vertically or horizontally.

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

@@ -87,7 +87,7 @@ export class IgxBadgeComponent {
     * ```
     */
     @Input()
-    public value = '';
+    public value: string | number = '';
 
     /**
      * Sets/gets an icon for the badge from the material icons set.
@@ -154,18 +154,13 @@ export class IgxBadgeComponent {
      * @internal
      */
     get roleDescription() {
-        let message: string;
-
         // tslint:disable-next-line:prefer-conditional-expression
         if (this.icon) {
-            message = this.type + ' type badge with icon type ' + this.icon;
-        } else if (this.value) {
-            message = this.type + ' badge type with value ' + this.value;
-        } else {
-            message = this.type + ' badge type without value';
+            return this.type + ' type badge with icon type ' + this.icon;
+        } else if (this.value || this.value === 0) {
+            return this.type + ' badge type with value ' + this.value;
         }
-
-        return message;
+        return this.type + ' badge type without value';
     }
 
     /**

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

@@ -364,6 +364,7 @@ Here is a list of all public methods exposed by **IgxGridColumnComponent**:
 |--- |--- |
 |`pin(): boolean`|Pins the column. Returns if the operation is successful.|
 |`unpin(): boolean`|Unpins the column. Returns if the operation is successful.|
+|`move(index): boolean`|Moves the column to the specified visible index.|
 
 
 ### Getters/Setters

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

@@ -357,4 +357,15 @@ export class IgxColumnGroupComponent extends IgxColumnComponent implements After
     //     // D.P. constructor duplication due to es6 compilation, might be obsolete in the future
     //     super(gridAPI, cdr);
     // }
+
+    /**
+     * @hidden
+     * Calculates the number of visible columns, based on indexes of first and last visible columns.
+     */
+    public calcChildren(): number {
+        const visibleChildren = this.allChildren.filter(c => c.visibleIndex > -1);
+        const fi = visibleChildren[0].visibleIndex;
+        const li = visibleChildren[visibleChildren.length - 1].visibleIndex;
+        return li - fi + 1;
+    }
 }

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

@@ -44,6 +44,8 @@ import {
     IgxFilterCellTemplateDirective
 } from './templates.directive';
 import { MRLResizeColumnInfo, MRLColumnSizeInfo } from './interfaces';
+import { DropPosition } from '../moving/moving.service';
+import { IgxColumnGroupComponent } from './column-group.component';
 
 /**
  * **Ignite UI for Angular Column** -
@@ -1762,6 +1764,65 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy {
 
         return true;
     }
+
+    /**
+     * Moves a column to the specified visible index.
+     * If passed index is invalid, or if column would receive a different visible index after moving, moving is not performed.
+     * If passed index would move the column to a different column group. moving is not performed.
+     * @example
+     * ```typescript
+     * column.move(index);
+     * ```
+     * @memberof IgxColumnComponent
+     */
+    public move(index: number) {
+        let target;
+        const grid = (this.grid as IgxGridBaseDirective);
+        let columns: Array<IgxColumnComponent | IgxColumnGroupComponent> = grid.columnList.filter(c => c.visibleIndex > -1);
+        // grid last visible index
+        const li = columns.map(c => c.visibleIndex).reduce(function(a, b) {
+            return Math.max(a, b);
+        });
+        const parent = this.parent;
+        const isPreceding = this.visibleIndex < index;
+
+        if (index === this.visibleIndex || index < 0 || index > li) {
+            return;
+        }
+
+        if (parent) {
+            columns = columns.filter(c => c.level >= this.level && c !== this && c.parent !== this &&
+                c.topLevelParent === this.topLevelParent);
+        }
+        // tslint:disable:max-line-length
+        // If isPreceding, find a target such that when the current column is placed after it, current colummn will receive a visibleIndex === index. This takes into account visible children of the columns.
+        // If !isPreceding, finds a column of the same level and visible index that equals the passed index agument (c.visibleIndex === index). No need to consider the children here.
+        // tslint:enable:max-line-length
+        if (isPreceding) {
+            columns = columns.filter(c => c.visibleIndex > this.visibleIndex);
+            target = columns.find(c => c.level === this.level && c.visibleIndex + c.calcChildren() - this.calcChildren() === index);
+        } else {
+            columns = columns.filter(c => c.visibleIndex < this.visibleIndex);
+            target = columns.find(c => c.level === this.level && c.visibleIndex === index);
+        }
+
+        if (!target || (target.pinned && this.disablePinning)) {
+            return;
+        }
+
+        const pos = isPreceding ? DropPosition.AfterDropTarget : DropPosition.BeforeDropTarget;
+        grid.moveColumn(this, target as IgxColumnComponent, pos);
+    }
+
+    /**
+     * No children for the column, so will returns 1 or 0, if the column is hidden.
+     * @hidden
+     */
+    public calcChildren(): number {
+        const children = this.hidden ? 0 : 1;
+        return children;
+    }
+
     /**
      * Returns a reference to the top level parent column.
      * ```typescript

projects/igniteui-angular/src/lib/grids/grid-base.directive.ts

@@ -3909,7 +3909,7 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
      * Moves a column to the specified drop target.
      * @example
      * ```typescript
-     * grid.moveColumn(compName, persDetails);
+     * grid.moveColumn(column, dropTarget);
      * ```
      */
     public moveColumn(column: IgxColumnComponent, dropTarget: IgxColumnComponent, pos: DropPosition = DropPosition.AfterDropTarget) {