Merge branch 'master' into mpopov/fix/button/fix-for-14759

Author: simeonoff

CHANGELOG.md

@@ -10,6 +10,26 @@ All notable changes for each version of this project will be documented in this
     ```ts
     this.carousel.select(2, Direction.NEXT);
     ```
+- `IgxGrid`, `IgxTreeGrid`, `IgxHierarchicalGrid`
+    - Added ability to pin individual columns to a specific side (start or end of the grid), so that you can now have pinning from both sides. This can be done either declaratively by setting the `pinningPosition` property on the column:
+
+    ```html
+    <igx-column [field]="'Col1'" [pinned]='true' [pinningPosition]='pinningPosition'>
+    </igx-column>
+    ```
+
+    ```ts
+      public pinningPosition = ColumnPinningPosition.End;
+    ```
+
+    Or with the API, via optional parameter:
+
+    ```ts
+        grid.pinColumn('Col1', 0, ColumnPinningPosition.End);
+        grid.pinColumn('Col2', 0, ColumnPinningPosition.Start);
+    ```
+
+    If property `pinningPosition` is not set on a column, the column will default to the position specified on the grid's `pinning` options for `columns`.
 
 - `IgxDateRangePicker`
   - Added new properties:

projects/igniteui-angular-elements/src/analyzer/elements.config.ts

@@ -274,6 +274,8 @@ export var registerConfig = [
       { name: "defaultHeaderGroupMinWidth" },
       { name: "columns" },
       { name: "pinnedColumns" },
+      { name: "pinnedStartColumns" },
+      { name: "pinnedEndColumns" },
       { name: "pinnedRows" },
       { name: "unpinnedColumns" },
       { name: "visibleColumns" },
@@ -327,7 +329,8 @@ export var registerConfig = [
       "findPrev",
       "refreshSearch",
       "clearSearch",
-      "getPinnedWidth",
+      "getPinnedStartWidth",
+      "getPinnedEndWidth",
       "selectRows",
       "deselectRows",
       "selectAllRows",
@@ -568,6 +571,8 @@ export var registerConfig = [
       { name: "defaultHeaderGroupMinWidth" },
       { name: "columns" },
       { name: "pinnedColumns" },
+      { name: "pinnedStartColumns" },
+      { name: "pinnedEndColumns" },
       { name: "pinnedRows" },
       { name: "unpinnedColumns" },
       { name: "visibleColumns" },
@@ -613,7 +618,8 @@ export var registerConfig = [
       "findPrev",
       "refreshSearch",
       "clearSearch",
-      "getPinnedWidth",
+      "getPinnedStartWidth",
+      "getPinnedEndWidth",
       "selectRows",
       "deselectRows",
       "selectAllRows",
@@ -748,6 +754,8 @@ export var registerConfig = [
       { name: "defaultRowHeight" },
       { name: "defaultHeaderGroupMinWidth" },
       { name: "columns" },
+      { name: "pinnedStartColumns" },
+      { name: "pinnedEndColumns" },
       { name: "visibleColumns" },
       { name: "dataView" },
     ],
@@ -780,6 +788,7 @@ export var registerConfig = [
       "clearFilter",
       "clearSort",
       "reflow",
+      "getPinnedEndWidth",
       "selectRows",
       "deselectRows",
       "selectAllRows",
@@ -872,6 +881,8 @@ export var registerConfig = [
       { name: "defaultRowHeight" },
       { name: "defaultHeaderGroupMinWidth" },
       { name: "columns" },
+      { name: "pinnedStartColumns" },
+      { name: "pinnedEndColumns" },
       { name: "pinnedRows" },
     ],
     methods: [
@@ -908,7 +919,8 @@ export var registerConfig = [
       "findPrev",
       "refreshSearch",
       "clearSearch",
-      "getPinnedWidth",
+      "getPinnedStartWidth",
+      "getPinnedEndWidth",
       "selectRows",
       "deselectRows",
       "selectAllRows",
@@ -1022,6 +1034,8 @@ export var registerConfig = [
       { name: "defaultHeaderGroupMinWidth" },
       { name: "columns" },
       { name: "pinnedColumns" },
+      { name: "pinnedStartColumns" },
+      { name: "pinnedEndColumns" },
       { name: "pinnedRows" },
       { name: "unpinnedColumns" },
       { name: "visibleColumns" },
@@ -1069,7 +1083,8 @@ export var registerConfig = [
       "findPrev",
       "refreshSearch",
       "clearSearch",
-      "getPinnedWidth",
+      "getPinnedStartWidth",
+      "getPinnedEndWidth",
       "selectRows",
       "deselectRows",
       "selectAllRows",

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

@@ -82,15 +82,10 @@ export class IgxColumnLayoutComponent extends IgxColumnGroupComponent implements
         }
 
         const unpinnedColumns = this.grid.unpinnedColumns.filter(c => c.columnLayout && !c.hidden);
-        const pinnedColumns = this.grid.pinnedColumns.filter(c => c.columnLayout && !c.hidden);
-        let vIndex = -1;
-
-        if (!this.pinned) {
-            const indexInCollection = unpinnedColumns.indexOf(this);
-            vIndex = indexInCollection === -1 ? -1 : pinnedColumns.length + indexInCollection;
-        } else {
-            vIndex = pinnedColumns.indexOf(this);
-        }
+        const pinnedStart = this.grid.pinnedStartColumns.filter(c => c.columnLayout && !c.hidden);
+        const pinnedEndColumns = this.grid.pinnedEndColumns.filter(c => c.columnLayout && !c.hidden);
+        const ordered = pinnedStart.concat(unpinnedColumns, pinnedEndColumns);
+        let vIndex = ordered.indexOf(this);
         this._vIndex = vIndex;
         return vIndex;
     }
@@ -158,7 +153,7 @@ export class IgxColumnLayoutComponent extends IgxColumnGroupComponent implements
     public override populateVisibleIndexes() {
         this.childrenVisibleIndexes = [];
         const columns = this.grid?.pinnedColumns && this.grid?.unpinnedColumns
-            ? this.grid.pinnedColumns.concat(this.grid.unpinnedColumns)
+            ? this.grid.pinnedStartColumns.concat(this.grid.unpinnedColumns, this.grid.pinnedEndColumns)
             : [];
         const orderedCols = columns
             .filter(x => !x.columnGroup && !x.hidden)