Merge branch 'master' into dmdimitrov/issue6845-master

Author: igdmdimitrov

CHANGELOG.md

@@ -4,27 +4,53 @@ All notable changes for each version of this project will be documented in this
 
 ## 9.1.0
 
+### General
+- `IgxGrid`, `IgxTreeGrid`, `IgxHierarchicalGrid`
+    - **Behavioral Change** - When a column is sortable sort indicator is always visible. The column is sorted when click on it.
+
 ### Themes
 - **Breaking Change**  Change the default `$legacy-support` value to false in the `igx-theme` function.
 
 ### New Features
 
 - `IgxGrid`, `IgxTreeGrid`, `IgxHierarchicalGrid`
+    - Added ability to pin rows to top or bottom depending on the new `pinning` input.
+    And new API methods `pinRow` and `unpinRow`.
+    ```html
+    <igx-grid [data]="data" [pinning]="pinningConfiguration"></igx-grid>
+    ```
+    ```typescript
+    public pinningConfiguration: IPinningConfig = { rows: RowPinningPosition.Bottom };
+    ```
+    ```typescript
+    this.grid.pinRow(rowID);
+    ```
     - Added support for pinning columns on the right. Change the position of pinning using the new `pinning` input.
     ```html
     <igx-grid [data]="data" [pinning]="pinningConfiguration"></igx-grid>
     ```
     ```typescript
     public pinningConfiguration: IPinningConfig = { columns: ColumnPinningPosition.End };
     ```
+    - Added functionality for column selection.
+    - `selected` property has been added to the IgxColumnComponent; Allows you to set whether the column is selected.
+    - `selectable` property has been added to the IgxColumnComponent; Allows you to set whether the column is selectable.
+    - `onColumnSelectionChange` event is added for the `IgxGrid`. It is emitted when the column selection is changed.
+    - `excelStyleSelectingTemplate` property is introduced to IgxGrid, which allows you to set a custom template for the selecting a column in the Excel Style Filter.
+    - `selectedColumns` API method is added for the `IgxGrid`. It allows to get all selected columns.
+    - `selectColumns` API method is added for the `IgxGrid`. It allows to select columns by passing array of IgxColumnComponent or column fields.
+    - `deselectColumns` API method is added for the `IgxGrid`. It allows to deselect columns by passing array of IgxColumnComponent or column fields.
+    - `deselectAllColumns` API method is added for the `IgxGrid`. It allows to deselect all columns.
+    - `getSelectedColumnsData` API method is added for the `IgxGrid`. It allows to get the selected columns data.
+
 - `IgxCombo`:
     - Added `autoFocusSearch` input that allows to manipulate the combo's opening behavior. When the property is `true` (by default), the combo's search input is focused on open. When set to `false`, the focus goes to the combo items container, which can be used to prevent the software keyboard from activating on mobile devices when opening the combo.
 
 ### RTL Support
 - `igxSlider` have full right-to-left (RTL) support.
 
 ## 9.0.1
-- **Breaking Changes** 
+- **Breaking Changes**
     - Remove `$base-color` from igx-typography. The igx-typography class now inherits the parent color.
 
 ## 9.0.0
@@ -108,10 +134,6 @@ All notable changes for each version of this project will be documented in this
     - `IgxGridExcelStyleFilteringComponent` and `IgxAdvancedFilteringDialogComponent` can now be hosted outside of the grid in order to provide the same experience as the built-in filtering UI.
     - `expandRow(rowID)`/`collapseRow(rowID)`/`toggleRow(rowID)` API methods are added for the `igxHierarchicalGrid`. They allow expanding/collapsing a row by its id.
     - `onRowToggle` event is added for the `igxHierarchicalGrid`. It is emitted when the expanded state of a row is changed.
-    - `IgxOverlayService`:
-        - `setOffset` method added. It offsets the content along the corresponding axis by the provided amount.
-    - `IgxToggleDirective`:
-        - `setOffset` method added. It offsets the content along the corresponding axis by the provided amount.
     - `IgxRowDragGhost` directive is added. It allows providing a custom template for the drag ghost when dragging a row.
     ```html
     <igx-grid #grid1 [data]="remote | async" primaryKey="ProductID"
@@ -171,6 +193,12 @@ All notable changes for each version of this project will be documented in this
 - `IgxDropDown`:
     - `clearSelection` method is added, which can be used to deselect the selected dropdown item
 
+- `IgxToggleDirective`:
+    - `setOffset` method added. It offsets the content along the corresponding axis by the provided amount.
+
+- `IgxOverlayService`:
+    - `setOffset` method added. It offsets the content along the corresponding axis by the provided amount.
+
 - `IgxCircularProgressBar`:
     - added `IgxProgressBarGradientDirective` to allow providing custom circular progress SVG gradients. Providing a custom gradient via a template is as easy as writing:
     ```html

projects/igniteui-angular/src/lib/buttonGroup/buttongroup-content.component.html

@@ -11,10 +11,10 @@
         [igxLabel]="button.label"
         [igxRipple]="button.ripple"
     >
-        <div class="igx-button-group__item-content {{ itemContentCssClass }}">
+        <span class="igx-button-group__item-content {{ itemContentCssClass }}">
             <igx-icon *ngIf="button.icon" fontSet="material">{{button.icon}}</igx-icon>
-            <span *ngIf="button.label">{{button.label}}</span>
-        </div>
+            <span class="igx-button-group__button-text" *ngIf="button.label">{{button.label}}</span>
+        </span>
     </button>
     <ng-content></ng-content>
 </div>

projects/igniteui-angular/src/lib/core/i18n/grid-resources.ts

@@ -69,6 +69,7 @@ export interface IGridResourceStrings {
     igx_grid_excel_show?: string;
     igx_grid_excel_pin?: string;
     igx_grid_excel_unpin?: string;
+    igx_grid_excel_select?: string;
     igx_grid_excel_text_filter?: string;
     igx_grid_excel_number_filter?: string;
     igx_grid_excel_date_filter?: string;
@@ -162,6 +163,7 @@ export const GridResourceStringsEN: IGridResourceStrings = {
     igx_grid_excel_show: 'Show column',
     igx_grid_excel_pin: 'Pin column',
     igx_grid_excel_unpin: 'Unpin column',
+    igx_grid_excel_select: 'Select column',
     igx_grid_excel_text_filter: 'Text filter',
     igx_grid_excel_number_filter: 'Number filter',
     igx_grid_excel_date_filter: 'Date filter',

projects/igniteui-angular/src/lib/core/styles/components/_common/_igx-display-container.scss

@@ -1,4 +1,4 @@
-%display-container {
+%display-container {
     display: inherit;
     position: relative;
     width: 100%;

projects/igniteui-angular/src/lib/core/styles/components/_common/_igx-vhelper.scss

@@ -12,7 +12,6 @@
 
     %vhelper--vertical {
         position: absolute;
-        width: 18px;
         top: 0;
         #{$right}: 0;
     }

projects/igniteui-angular/src/lib/core/styles/components/button-group/_button-group-component.scss

@@ -15,6 +15,10 @@
         @extend %igx-group-item !optional;
     }
 
+    @include e(button-text) {
+        @extend %igx-button-group__button-text !optional;
+    }
+
     @include e(item, $m: selected) {
         @extend %igx-group-item !optional;
         @extend %igx-group-item-selected !optional;

projects/igniteui-angular/src/lib/core/styles/components/button-group/_button-group-theme.scss

@@ -186,11 +186,10 @@
         display: flex;
         box-shadow: --var($theme, 'shadow');
         transition: $transition;
-        border-radius: --var($theme, 'border-radius')
+        border-radius: --var($theme, 'border-radius');
     }
 
     %igx-group-item {
-        @include ellipsis();
         border: $group-item-border-thickness solid --var($theme, 'item-border-color');
         color: --var($theme, 'item-text-color');
         background: --var($theme, 'item-background');
@@ -308,13 +307,16 @@
     %igx-group-item-content {
         display: flex;
         flex-flow: row nowrap;
-        justify-content: center;
-        align-items: center;
-        text-align: center;
+        min-width: 0;
 
         * ~ * {
             margin-#{$left}: $group-items-margin;
         }
     }
+
+    %igx-button-group__button-text {
+        width: 100%;
+        @include ellipsis();
+    }
 }
 

projects/igniteui-angular/src/lib/core/styles/components/grid/_excel-filtering-component.scss

@@ -85,6 +85,15 @@
             @extend %grid-excel-actions__action !optional;
         }
 
+        @include e(actions-select) {
+            @extend %grid-excel-actions__action !optional;
+        }
+
+        @include e(actions-selected) {
+            @extend %grid-excel-actions__action !optional;
+            @extend %grid-excel-actions--selected !optional;
+        }
+
         @include e(actions-filter) {
             @extend %grid-excel-actions__action !optional;
         }

projects/igniteui-angular/src/lib/core/styles/components/grid/_excel-filtering-theme.scss

@@ -144,6 +144,12 @@
         padding: rem(8px) rem(16px);
     }
 
+    %grid-excel-actions--selected {
+        igx-icon {
+            color: igx-color($palette, 'secondary');
+        }
+    }
+
     %grid-excel-move {
         margin-bottom: rem(8px);
 

projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-component.scss

@@ -78,6 +78,18 @@
         @extend %grid-tbody-scrollbar !optional;
     }
 
+    @include e(tbody-scrollbar-main) {
+        @extend %grid-tbody-scrollbar-main !optional;
+    }
+
+    @include e(tbody-scrollbar-start) {
+        @extend %grid-tbody-scrollbar-start !optional;
+    }
+
+    @include e(tbody-scrollbar-end) {
+        @extend %grid-tbody-scrollbar-end !optional;
+    }
+
     @include e(scroll) {
         @extend %grid-scroll !optional;
     }
@@ -221,6 +233,10 @@
         @extend %igx-grid__th--sortable !optional;
     }
 
+    @include e(th, $m: selectable) {
+        @extend %igx-grid__th--selectable !optional;
+    }
+
     @include e(th, $m: filtrable) {
         @extend %igx-grid__th--filtrable !optional;
     }
@@ -233,6 +249,10 @@
         @extend %igx-grid__th--sorted !optional;
     }
 
+    @include e(th, $m: selected) {
+        @extend %igx-grid__th--selected !optional;
+    }
+
     @include e(th, $m: number) {
         @extend %grid-cell-number !optional;
     }
@@ -289,6 +309,14 @@
         @extend %grid-cell--selected !optional;
     }
 
+    @include e(td, $m: column-selected) {
+        @extend %grid-cell--column-selected !optional;
+    }
+
+    @include e(td, $mods: (selected, column-selected)) {
+        @extend %grid-cell--cross-selected !optional;
+    }
+
     @include e(tr, $mods: (selected, filtered)) {
         @extend %grid-row--selected--filtered !optional;
     }
@@ -301,6 +329,18 @@
         @extend %igx-grid__tr--expanded !optional;
     }
 
+    @include e(tr, $m: pinned) {
+        @extend %igx-grid__tr--pinned !optional;
+    }
+
+    @include e(tr, $m: pinned-top) {
+        @extend %igx-grid__tr--pinned-top !optional;
+    }
+
+    @include e(tr, $m: pinned-bottom) {
+        @extend %igx-grid__tr--pinned-bottom !optional;
+    }
+
     @include e(tree-grouping-indicator) {
         @extend %igx-grid__tree-grouping-indicator !optional;
     }
@@ -348,6 +388,10 @@
         @extend %grid-cell--pinned-selected !optional;
     }
 
+    @include e(td, $mods: (pinned, column-selected)) {
+        @extend %grid-cell--pinned--column-selected !optional;
+    }
+
     @include e(td-text) {
         @extend %grid-cell-text !optional;
     }