Merge branch 'master' into sivanova/input-read-only

Author: SisIvanova

.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,23 +2,73 @@
 
 All notable changes for each version of this project will be documented in this file.
 
-
 ## 20.1.0
 ### New Features
 - `IgxCarousel`
     - Added `select` method overload accepting index.
     ```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:
+    - Now has a complete set of properties to customize the calendar:
+        - `headerOrientation`
+        - `orientation`
+        - `hideHeader`
+        - `activeDate`
+        - `disabledDates`
+        - `specialDates`
+
+    - As well as the following templates, available to customize the contents of the calendar header in `dialog` mode:
+        - `igxCalendarHeader`
+        - `igxCalendarHeaderTitle`
+        - `igxCalendarSubheader`
+
+    - 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`
+    - **Behavioral Changes**
+        - Added cancel button to the dialog, allowing the user to cancel the selection. 
+        - The calendar is displayed with header in `dialog` mode by default.
+        - The picker remains open when typing (in two-inputs and `dropdown` mode).
+        - The calendar selection is updated with the typed value.
+        - The calendar view is updated as per the typed value.
+        - The picker displays a clear icon by default in single input mode.
+
+    - `IgxPredefinedRangesAreaComponent`
+        - Added new component for rendering the predefined or custom ranges inside the calendar of the `IgxDateRangePicker`
+
+- `IgxDatePicker`
+    - Similar to the `IgxDateRangePicker`, also completes the ability to customize the calendar by introducing the following
+    properties in addition to the existing ones:
+        - `hideHeader`
+        - `orientation`
+        - `activeDate`
+    - **Behavioral Changes**
+        - The calendar selection is updated with the typed value.
+        - The calendar view is updated as per the typed date value.
 
 - `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.

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-i18n/src/i18n/BG/date-range-picker-resources.ts

@@ -7,6 +7,7 @@ import { IDateRangePickerResourceStrings } from 'igniteui-angular';
 export const DateRangePickerResourceStringsBG = {
     igx_date_range_picker_date_separator: 'до',
     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 дни',

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

@@ -7,6 +7,7 @@ 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_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í',

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

@@ -7,6 +7,7 @@ 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_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',

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

@@ -7,6 +7,7 @@ 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_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',

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

@@ -7,6 +7,7 @@ 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_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',

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

@@ -7,6 +7,7 @@ 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_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',

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

@@ -7,6 +7,7 @@ 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_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',