Merge master into skrastev/localization

Author: skrustev

CHANGELOG.md

@@ -4,59 +4,111 @@ All notable changes for each version of this project will be documented in this
 
 
 ## 20.1.0
+
 ### New Features
 - `Internationalization`
   - Old api is being marked as deprecated but it should remain working the same without any breaking change.
   - New localization and locale implementation based on Intl. for all components with new public API and package named 'igniteui-i18n-resources' containing now the resources.
   - With the new implementation locales no longer need to be registered, only language resources for components.
 
-- `IgxDateRangePicker`
-  - Added cancel button to the dialog, allowing the user to cancel the selection. 
-
-- `IgxCarousel`
-    - Added `select` method overload accepting index.
-    ```ts
-    this.carousel.select(2, Direction.NEXT);
-    ```
 - `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.
+
+        ```html
+        <igx-grid [cellMergeMode]="'always'">
+        </igx-grid>
+        ```
+
+        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.
+
+        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>
-    ```
+        ```html
+        <igx-column [field]="'Col1'" [pinned]='true' [pinningPosition]='pinningPosition'>
+        </igx-column>
+        ```
 
-    ```ts
-      public pinningPosition = ColumnPinningPosition.End;
-    ```
+        ```ts
+        public pinningPosition = ColumnPinningPosition.End;
+        ```
 
-    Or with the API, via optional parameter:
+        Or with the API, via optional parameter:
 
-    ```ts
+        ```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`.
+        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`.
+
+- `IgxCarousel`
+    - Added `select` method overload accepting index.
+    ```ts
+    this.carousel.select(2, Direction.NEXT);
+    ```
 
 - `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.
 
 - `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`.
 
@@ -66,6 +118,14 @@ All notable changes for each version of this project will be documented in this
         - The `hideDelay` input property now defaults to `300`.
         - The `showTooltip` and `hideTooltip` methods do not take `showDelay`/`hideDelay` into account.
 
+- `IgxGrid`, `IgxTreeGrid`, `IgxHierarchicalGrid`, `IgxPivotGrid`
+  - **Sorting improvements**
+    - Improved sorting algorithm efficiency using Schwartzian transformation. This is a technique, also known as decorate-sort-undecorate, which avoids recomputing the sort keys by temporarily associating them with the original data records.
+    - Refactored sorting algorithms from recursive to iterative.
+  - **Groupby improvements**
+    - Refactored grouping algorithm from recursive to iterative.
+    - Optimized grouping operations.
+  
 ## 20.0.6
 ### General
 - `IgxSimpleCombo`
@@ -157,24 +217,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**
@@ -256,9 +316,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));
@@ -269,7 +329,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, ...);
@@ -309,7 +369,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`.

angular.json

@@ -478,6 +478,97 @@
           }
         }
       }
+    },
+    "igniteui-angular-performance": {
+      "projectType": "application",
+      "schematics": {
+        "@schematics/angular:component": {
+          "style": "scss"
+        }
+      },
+      "root": "projects/igniteui-angular-performance",
+      "sourceRoot": "projects/igniteui-angular-performance/src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular/build:application",
+          "options": {
+            "browser": "projects/igniteui-angular-performance/src/main.ts",
+            "polyfills": [
+              "zone.js"
+            ],
+            "tsConfig": "projects/igniteui-angular-performance/tsconfig.app.json",
+            "inlineStyleLanguage": "scss",
+            "assets": [
+              "projects/igniteui-angular-performance/src/assets"
+            ],
+            "styles": [
+              "projects/igniteui-angular-performance/src/styles.scss"
+            ],
+            "stylePreprocessorOptions": {
+              "includePaths": ["node_modules"]
+            }
+          },
+          "configurations": {
+            "production": {
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "500kB",
+                  "maximumError": "1MB"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "4kB",
+                  "maximumError": "8kB"
+                }
+              ],
+              "outputHashing": "all"
+            },
+            "development": {
+              "optimization": false,
+              "extractLicenses": false,
+              "sourceMap": true
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "serve": {
+          "builder": "@angular/build:dev-server",
+          "configurations": {
+            "production": {
+              "buildTarget": "igniteui-angular-performance:build:production"
+            },
+            "development": {
+              "buildTarget": "igniteui-angular-performance:build:development"
+            }
+          },
+          "defaultConfiguration": "development"
+        },
+        "extract-i18n": {
+          "builder": "@angular/build:extract-i18n"
+        },
+        "test": {
+          "builder": "@angular/build:karma",
+          "options": {
+            "polyfills": [
+              "zone.js",
+              "zone.js/testing"
+            ],
+            "tsConfig": "projects/igniteui-angular-performance/tsconfig.spec.json",
+            "inlineStyleLanguage": "scss",
+            "assets": [
+              {
+                "glob": "**/*",
+                "input": "projects/igniteui-angular-performance/public"
+              }
+            ],
+            "styles": [
+              "projects/igniteui-angular-performance/src/styles.scss"
+            ]
+          }
+        }
+      }
     }
   },
   "cli": {

package.json

@@ -5,6 +5,7 @@
     "ng": "ng",
     "start": "ng serve --open --hmr",
     "start:elements": "ng serve --project igniteui-angular-elements",
+    "start:performance": "ng serve --project igniteui-angular-performance",
     "build": "ng build --configuration production",
     "test": "ng test igniteui-angular",
     "lint": "ng lint",

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

@@ -95,6 +95,7 @@ export var registerConfig = [
     ],
     numericProps: ["rowEnd", "colEnd", "rowStart", "colStart"],
     boolProps: [
+      "merge",
       "sortable",
       "selectable",
       "groupable",
@@ -158,6 +159,7 @@ export var registerConfig = [
       "expanded",
       "searchable",
       "hidden",
+      "merge",
       "sortable",
       "groupable",
       "editable",
@@ -213,6 +215,7 @@ export var registerConfig = [
       "collapsible",
       "expanded",
       "searchable",
+      "merge",
       "sortable",
       "groupable",
       "editable",

projects/igniteui-angular-elements/src/public_api.ts

@@ -13,7 +13,7 @@ import { IgxPivotDateDimension } from 'projects/igniteui-angular/src/lib/grids/p
 import { PivotDimensionType } from 'projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.interface';
 import { IgxDateSummaryOperand, IgxNumberSummaryOperand, IgxSummaryOperand, IgxTimeSummaryOperand } from 'projects/igniteui-angular/src/lib/grids/summaries/grid-summary';
 import { HorizontalAlignment, VerticalAlignment } from 'projects/igniteui-angular/src/lib/services/overlay/utilities';
-
+import { ByLevelTreeGridMergeStrategy } from 'projects/igniteui-angular/src/lib/data-operations/merge-strategy';
 
 /** Export Public API, TODO: reorganize, Generate all w/ renames? */
 export {
@@ -36,6 +36,7 @@ export {
 
     NoopSortingStrategy as IgcNoopSortingStrategy,
     NoopFilteringStrategy as IgcNoopFilteringStrategy,
+    ByLevelTreeGridMergeStrategy as IgcByLevelTreeGridMergeStrategy,
 
     // Pivot API
     IgxPivotDateDimension as IgcPivotDateDimension,

projects/igniteui-angular-performance/public/favicon.ico

@@ -0,0 +1,10 @@
+<main class="wrapper">
+  <div class="routes">
+    @for (route of routes; track $index) {
+      <button igxButton="contained" routerLink="/{{ route.path }}">
+        {{ route.title }}
+      </button>
+    }
+  </div>
+  <router-outlet />
+</main>

projects/igniteui-angular-performance/src/app/app.component.html

@@ -0,0 +1,18 @@
+:host {
+    width: 100%;
+    height: 100%;
+    display: flex;
+}
+
+.wrapper {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+}
+
+.routes {
+    padding: 1rem;
+    display: flex;
+    gap: 1rem;
+}