Merge pull request #16176 from IgniteUI/sstoychev/merge-pinning-cellmerging

chore(*): merging pinning with cell merging

Author: ChronosSF

.github/workflows/nodejs.yml

@@ -16,7 +16,7 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [20.x, 22.x]
+        node-version: [20.x, 22.17.1]
 
     steps:
       - name: Checkout

CHANGELOG.md

@@ -2,42 +2,90 @@
 
 All notable changes for each version of this project will be documented in this file.
 
+
 ## 20.1.0
 
 ### New Features
 
 - `IgxGrid`, `IgxTreeGrid`, `IgxHierarchicalGrid`
     - Introduced a new cell merging feature that allows you to configure and merge cells in a column based on same data or other custom condition, into a single cell.
-    
-     It can be enabled on the individual columns:
 
-    ```html
-            <igx-column field="field" [merge]="true"></igx-column>
-    ```
-    The merging can be configured on the grid level to apply either:
-    - `onSort` - only when the column is sorted.
-    - `always` - always, regardless of data operations.
+        It can be enabled on the individual columns:
 
-    ```html
+        ```html
+        <igx-column field="field" [merge]="true"></igx-column>
+        ```
+        The merging can be configured on the grid level to apply either:
+        - `onSort` - only when the column is sorted.
+        - `always` - always, regardless of data operations.
+
+        ```html
         <igx-grid [cellMergeMode]="'always'">
         </igx-grid>
-    ```
+        ```
 
-    The default `cellMergeMode` is `onSort`.
+        The default `cellMergeMode` is `onSort`.
 
-    The functionality can be modified by setting a custom `mergeStrategy` on the grid, in case some other merge conditions or logic is needed for a custom scenario.
+        The functionality can be modified by setting a custom `mergeStrategy` on the grid, in case some other merge conditions or logic is needed for a custom scenario.
+
+        It's possible also to set a `mergeComparer` on the individual columns, in case some custom handling is needed for a particular data field.
+
+    - 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 cancel button to the dialog, allowing the user to cancel the selection.
 
-    It's possible also to set a `mergeComparer` on the individual columns, in case some custom handling is needed for a particular data field.
 
 - `IgxCarousel`
     - Added `select` method overload accepting index.
     ```ts
     this.carousel.select(2, Direction.NEXT);
     ```
 
+- `IgxDateRangePicker`
+  - Added new properties:
+      - `usePredefinedRanges` - Whether to render built-in predefined ranges
+      - `customRanges` - Allows the user to provide custom ranges rendered as chips
+      - `resourceStrings` - Allows the user to provide set of resource strings
+
+- `IgxPredefinedRangesAreaComponent`
+  - Added new component for rendering the predefined or custom ranges inside the calendar of the `IgxDateRangePicker`
+
+- `IgxOverlay`
+    - Position Settings now accept a new optional `offset` input property of type `number`. Used to set the offset of the element from the target in pixels.
+
+- `IgxTooltip`
+    - The tooltip now remains open while interacting with it.
+- `IgxTooltipTarget`
+    - Introduced several new properties to enhance customization of tooltip content and behavior. Those include `positionSettings`, `hasArrow`, `sticky`, `closeButtonTemplate`. For detailed usage and examples, please refer to the Tooltip [README](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/directives/tooltip/README.md).
+
+
 ### General
 - `IgxDropDown` now exposes a `role` input property, allowing users to customize the role attribute based on the use case. The default is `listbox`.
 
+- `IgxTooltipTarget`
+    - **Behavioral Changes**
+        - The `showDelay` input property now defaults to `200`.
+        - The `hideDelay` input property now defaults to `300`.
+        - The `showTooltip` and `hideTooltip` methods do not take `showDelay`/`hideDelay` into account.
 
 ## 20.0.6
 ### General
@@ -130,24 +178,24 @@ All notable changes for each version of this project will be documented in this
         - Added the `canCommit`, `commit` and `discard` public methods that allows the user to save/discard the current state of the expression tree.
         - Added option to template the search value input:
             ```
-            <ng-template igxQueryBuilderSearchValue 
+            <ng-template igxQueryBuilderSearchValue
                         let-searchValue
-                        let-selectedField = "selectedField" 
+                        let-selectedField = "selectedField"
                         let-selectedCondition = "selectedCondition"
                         let-defaultSearchValueTemplate = "defaultSearchValueTemplate">
                 @if (selectedField?.field === 'Id' && selectedCondition === 'equals'){
                     <input type="text" required [(ngModel)]="searchValue.value"/>
-                } @else {  
+                } @else {
                     <ng-container #defaultTemplate *ngTemplateOutlet="defaultSearchValueTemplate"></    ng-container>
                 }
-            </ng-template> 
+            </ng-template>
             ```
-        - **Behavioral Changes** 
+        - **Behavioral Changes**
         - Expression enters edit mode on single click, `Enter` or `Space`.
         - Selecting conditions inside the `IgxQueryBuilderComponent` is no longer supported. Grouping/ungrouping expressions is now achieved via the newly exposed Drag & Drop functionality.
         - Deleting multiple expressions through the context menu is no longer supported.
     - `IgxQueryBuilderHeaderComponent`
-        - **Behavioral Change** 
+        - **Behavioral Change**
         - Legend is no longer shown.
         - If the `title` input property is not set, by default it would be empty string.
         - **Deprecation**
@@ -229,9 +277,9 @@ All notable changes for each version of this project will be documented in this
 
 ### Themes
 - **Breaking Change** `Palettes`
-    - All palette colors have been migrated to the [CSS relative colors syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_colors/Relative_colors). This means that color consumed as CSS variables no longer need to be wrapped in an `hsl` function. 
+    - All palette colors have been migrated to the [CSS relative colors syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_colors/Relative_colors). This means that color consumed as CSS variables no longer need to be wrapped in an `hsl` function.
 
-    Example: 
+    Example:
     ```css
     /* 18.1.x and before: */
     background: hsl(var(--ig-primary-600));
@@ -242,7 +290,7 @@ All notable changes for each version of this project will be documented in this
 
     This change also opens up the door for declaring the base (500) variants of each color in CSS from any color, including other CSS variables, whereas before the Sass `palette` function was needed to generate color shades from a base color.
 
-    Example: 
+    Example:
     ```scss
     /* 18.1.x and before: */
     $my-palette: palette($primary: #09f, ...);
@@ -282,7 +330,7 @@ For Firefox users, we provide limited scrollbar styling options through the foll
     - `animationType` input property is now of type `CarouselAnimationType`. `HorizontalAnimationType` can also be used, however, to accommodate the new vertical mode, which supports vertical slide animations, it is recommended to use `CarouselAnimationType`.
 
     - **Behavioral Changes** - the `keyboardSupport` input property now defaults to `false`.
-    - **Deprecation** - the `keyboardSupport` input property has been deprecated and will be removed in a future version. Keyboard navigation with `ArrowLeft`, `ArrowRight`, `Home`, and `End` keys will be supported when focusing the indicators' container via ` Tab`/`Shift+Tab`. 
+    - **Deprecation** - the `keyboardSupport` input property has been deprecated and will be removed in a future version. Keyboard navigation with `ArrowLeft`, `ArrowRight`, `Home`, and `End` keys will be supported when focusing the indicators' container via ` Tab`/`Shift+Tab`.
 
 - `IgxCombo`:
     - **Breaking Change** The deprecated `filterable` property is replaced with `disableFiltering`.

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

@@ -277,6 +277,8 @@ export var registerConfig = [
       { name: "defaultHeaderGroupMinWidth" },
       { name: "columns" },
       { name: "pinnedColumns" },
+      { name: "pinnedStartColumns" },
+      { name: "pinnedEndColumns" },
       { name: "pinnedRows" },
       { name: "unpinnedColumns" },
       { name: "visibleColumns" },
@@ -330,7 +332,8 @@ export var registerConfig = [
       "findPrev",
       "refreshSearch",
       "clearSearch",
-      "getPinnedWidth",
+      "getPinnedStartWidth",
+      "getPinnedEndWidth",
       "selectRows",
       "deselectRows",
       "selectAllRows",
@@ -571,6 +574,8 @@ export var registerConfig = [
       { name: "defaultHeaderGroupMinWidth" },
       { name: "columns" },
       { name: "pinnedColumns" },
+      { name: "pinnedStartColumns" },
+      { name: "pinnedEndColumns" },
       { name: "pinnedRows" },
       { name: "unpinnedColumns" },
       { name: "visibleColumns" },
@@ -616,7 +621,8 @@ export var registerConfig = [
       "findPrev",
       "refreshSearch",
       "clearSearch",
-      "getPinnedWidth",
+      "getPinnedStartWidth",
+      "getPinnedEndWidth",
       "selectRows",
       "deselectRows",
       "selectAllRows",
@@ -751,6 +757,8 @@ export var registerConfig = [
       { name: "defaultRowHeight" },
       { name: "defaultHeaderGroupMinWidth" },
       { name: "columns" },
+      { name: "pinnedStartColumns" },
+      { name: "pinnedEndColumns" },
       { name: "visibleColumns" },
       { name: "dataView" },
     ],
@@ -783,6 +791,7 @@ export var registerConfig = [
       "clearFilter",
       "clearSort",
       "reflow",
+      "getPinnedEndWidth",
       "selectRows",
       "deselectRows",
       "selectAllRows",
@@ -875,6 +884,8 @@ export var registerConfig = [
       { name: "defaultRowHeight" },
       { name: "defaultHeaderGroupMinWidth" },
       { name: "columns" },
+      { name: "pinnedStartColumns" },
+      { name: "pinnedEndColumns" },
       { name: "pinnedRows" },
     ],
     methods: [
@@ -911,7 +922,8 @@ export var registerConfig = [
       "findPrev",
       "refreshSearch",
       "clearSearch",
-      "getPinnedWidth",
+      "getPinnedStartWidth",
+      "getPinnedEndWidth",
       "selectRows",
       "deselectRows",
       "selectAllRows",
@@ -1025,6 +1037,8 @@ export var registerConfig = [
       { name: "defaultHeaderGroupMinWidth" },
       { name: "columns" },
       { name: "pinnedColumns" },
+      { name: "pinnedStartColumns" },
+      { name: "pinnedEndColumns" },
       { name: "pinnedRows" },
       { name: "unpinnedColumns" },
       { name: "visibleColumns" },
@@ -1072,7 +1086,8 @@ export var registerConfig = [
       "findPrev",
       "refreshSearch",
       "clearSearch",
-      "getPinnedWidth",
+      "getPinnedStartWidth",
+      "getPinnedEndWidth",
       "selectRows",
       "deselectRows",
       "selectAllRows",

projects/igniteui-angular-i18n/src/i18n/BG/date-range-picker-resources.ts

@@ -6,5 +6,10 @@ import { IDateRangePickerResourceStrings } from 'igniteui-angular';
  */
 export const DateRangePickerResourceStringsBG = {
     igx_date_range_picker_date_separator: 'до',
-    igx_date_range_picker_done_button: 'Завърши'
+    igx_date_range_picker_done_button: 'Завърши',
+    igx_date_range_picker_cancel_button: 'Отмени',
+    igx_date_range_picker_last7Days: 'Последните 7 дни',
+    igx_date_range_picker_currentMonth: 'Текущ месец',
+    igx_date_range_picker_last30Days: 'Последните 30 дни',
+    igx_date_range_picker_yearToDate: 'От началото на годината'
 } satisfies MakeRequired<IDateRangePickerResourceStrings>;

projects/igniteui-angular-i18n/src/i18n/CS/date-range-picker-resources.ts

@@ -6,5 +6,10 @@ import { IDateRangePickerResourceStrings } from 'igniteui-angular';
  */
 export const DateRangePickerResourceStringsCS = {
     igx_date_range_picker_date_separator: 'na',
-    igx_date_range_picker_done_button: 'Hotovo'
+    igx_date_range_picker_done_button: 'Hotovo',
+    igx_date_range_picker_cancel_button: 'Zrušit',
+    igx_date_range_picker_last7Days: 'Posledních 7 dní',
+    igx_date_range_picker_currentMonth: 'Tento měsíc',
+    igx_date_range_picker_last30Days: 'Posledních 30 dní',
+    igx_date_range_picker_yearToDate: 'Od začátku roku',
 } satisfies MakeRequired<IDateRangePickerResourceStrings>;

projects/igniteui-angular-i18n/src/i18n/DA/date-range-picker-resources.ts

@@ -6,5 +6,10 @@ import { IDateRangePickerResourceStrings } from 'igniteui-angular';
  */
 export const DateRangePickerResourceStringsDA = {
     igx_date_range_picker_date_separator: 'till',
-    igx_date_range_picker_done_button: 'Færdigt'
+    igx_date_range_picker_done_button: 'Færdigt',
+    igx_date_range_picker_cancel_button: 'Annuller',
+    igx_date_range_picker_last7Days: 'Sidste 7 dage',
+    igx_date_range_picker_currentMonth: 'Denne måned',
+    igx_date_range_picker_last30Days: 'Sidste 30 dage',
+    igx_date_range_picker_yearToDate: 'Året til dato',
 } satisfies MakeRequired<IDateRangePickerResourceStrings>;

projects/igniteui-angular-i18n/src/i18n/DE/date-range-picker-resources.ts

@@ -6,5 +6,10 @@ import { IDateRangePickerResourceStrings } from 'igniteui-angular';
  */
 export const DateRangePickerResourceStringsDE = {
     igx_date_range_picker_date_separator: 'bis',
-    igx_date_range_picker_done_button: 'Fertig'
+    igx_date_range_picker_done_button: 'Fertig',
+    igx_date_range_picker_cancel_button: 'Abbrechen',
+    igx_date_range_picker_last7Days: 'Letzte 7 Tage',
+    igx_date_range_picker_currentMonth: 'Aktueller Monat',
+    igx_date_range_picker_last30Days: 'Letzte 30 Tage',
+    igx_date_range_picker_yearToDate: 'Jahr bis heute',
 } satisfies MakeRequired<IDateRangePickerResourceStrings>;

projects/igniteui-angular-i18n/src/i18n/ES/date-range-picker-resources.ts

@@ -6,5 +6,10 @@ import { IDateRangePickerResourceStrings } from 'igniteui-angular';
  */
 export const DateRangePickerResourceStringsES = {
     igx_date_range_picker_date_separator: 'a',
-    igx_date_range_picker_done_button: 'Listo'
+    igx_date_range_picker_done_button: 'Listo',
+    igx_date_range_picker_cancel_button: 'Cancelar',
+    igx_date_range_picker_last7Days: 'Últimos 7 días',
+    igx_date_range_picker_currentMonth: 'Mes actual',
+    igx_date_range_picker_last30Days: 'Últimos 30 días',
+    igx_date_range_picker_yearToDate: 'Año hasta la fecha',
 } satisfies MakeRequired<IDateRangePickerResourceStrings>;

projects/igniteui-angular-i18n/src/i18n/FR/date-range-picker-resources.ts

@@ -6,5 +6,10 @@ import { IDateRangePickerResourceStrings } from 'igniteui-angular';
  */
 export const DateRangePickerResourceStringsFR = {
     igx_date_range_picker_date_separator: 'à',
-    igx_date_range_picker_done_button: 'Terminée'
+    igx_date_range_picker_done_button: 'Terminée',
+    igx_date_range_picker_cancel_button: 'Annuler',
+    igx_date_range_picker_last7Days: '7 derniers jours',
+    igx_date_range_picker_currentMonth: 'Mois en cours',
+    igx_date_range_picker_last30Days: '30 derniers jours',
+    igx_date_range_picker_yearToDate: 'Année à ce jour',
 } satisfies MakeRequired<IDateRangePickerResourceStrings>;

projects/igniteui-angular-i18n/src/i18n/HU/date-range-picker-resources.ts

@@ -6,5 +6,10 @@ import { IDateRangePickerResourceStrings } from 'igniteui-angular';
  */
 export const DateRangePickerResourceStringsHU = {
     igx_date_range_picker_date_separator: '-',
-    igx_date_range_picker_done_button: 'Kész'
+    igx_date_range_picker_done_button: 'Kész',
+    igx_date_range_picker_cancel_button: 'Mégse',
+    igx_date_range_picker_last7Days: 'Az elmúlt 7 nap',
+    igx_date_range_picker_currentMonth: 'Aktuális hónap',
+    igx_date_range_picker_last30Days: 'Az elmúlt 30 nap',
+    igx_date_range_picker_yearToDate: 'Év elejétől napjainkig',
 } satisfies MakeRequired<IDateRangePickerResourceStrings>;