Merge branch '20.1.x' into didimmova/align-daterange-label

Author: simeonoff

package-lock.json

@@ -75,7 +75,7 @@
     "@types/source-map": "0.5.2",
     "express": "^5.1.0",
     "fflate": "^0.8.1",
-    "igniteui-theming": "^22.0.0",
+    "igniteui-theming": "^23.0.0",
     "igniteui-trial-watermark": "^3.1.0",
     "lodash-es": "^4.17.21",
     "rxjs": "^7.8.2",

package.json

@@ -12,6 +12,8 @@ import {
     IgcPaginatorComponent,
     IgcGridStateComponent,
     IgcColumnLayoutComponent,
+    IgcActionStripComponent,
+    IgcGridEditingActionsComponent,
 } from './components';
 import { defineComponents } from '../utils/register';
 
@@ -27,6 +29,8 @@ describe('Elements: ', () => {
             IgcColumnLayoutComponent,
             IgcPaginatorComponent,
             IgcGridStateComponent,
+            IgcActionStripComponent,
+            IgcGridEditingActionsComponent
         );
     });
 
@@ -230,5 +234,66 @@ describe('Elements: ', () => {
             expect(grid.columns.length).toEqual(6);
             expect(grid.getColumnByVisibleIndex(1).field).toEqual('ProductName');
         });
+
+        it('should not destroy action strip when row it is shown in is destroyed or cached.', async() => {
+            const innerHtml = `
+            <igc-grid id="testGrid" auto-generate>
+            <igc-action-strip id="testStrip">
+                <igc-grid-editing-actions add-row="true"></igc-grid-editing-actions>
+            </igc-action-strip>
+            </igc-grid>`;
+            testContainer.innerHTML = innerHtml;
+
+            // TODO: Better way to wait - potentially expose the queue or observable for update on the strategy
+            await firstValueFrom(timer(10 /* SCHEDULE_DELAY */ * 3));
+
+            const grid = document.querySelector<IgcNgElement & InstanceType<typeof IgcGridComponent>>('#testGrid');
+            const actionStrip = document.querySelector<IgcNgElement & InstanceType<typeof IgcActionStripComponent>>('#testStrip');
+            grid.data = SampleTestData.foodProductData();
+
+            // TODO: Better way to wait - potentially expose the queue or observable for update on the strategy
+            await firstValueFrom(timer(10 /* SCHEDULE_DELAY */ * 3));
+
+            let row = grid.dataRowList.toArray()[0];
+            actionStrip.show(row);
+            await firstValueFrom(timer(10 /* SCHEDULE_DELAY */ * 3));
+
+            expect(actionStrip.hidden).toBeFalse();
+
+            grid.data = [];
+            await firstValueFrom(timer(10 /* SCHEDULE_DELAY */ * 3));
+
+           // row destroyed
+            expect((row.cdr as any).destroyed).toBeTrue();
+            // action strip still in DOM, only hidden.
+            expect(actionStrip.hidden).toBeTrue();
+            expect(actionStrip.isConnected).toBeTrue();
+
+            grid.data = SampleTestData.foodProductData();
+            grid.groupBy({ fieldName: 'InStock', dir: 1, ignoreCase: false });
+
+            // TODO: Better way to wait - potentially expose the queue or observable for update on the strategy
+            await firstValueFrom(timer(10 /* SCHEDULE_DELAY */ * 3));
+
+            row = grid.dataRowList.toArray()[0];
+            actionStrip.show(row);
+            await firstValueFrom(timer(10 /* SCHEDULE_DELAY */ * 3));
+
+            expect(actionStrip.hidden).toBeFalse();
+
+            // collapse all data rows, leave only groups
+            grid.toggleAllGroupRows();
+
+            // TODO: Better way to wait - potentially expose the queue or observable for update on the strategy
+            await firstValueFrom(timer(10 /* SCHEDULE_DELAY */ * 3));
+
+            // row not destroyed, but also not in dom anymore
+            expect((row.cdr as any).destroyed).toBeFalse();
+            expect(row.element.nativeElement.isConnected).toBe(false);
+
+             // action strip still in DOM, only hidden.
+            expect(actionStrip.hidden).toBeTrue();
+            expect(actionStrip.isConnected).toBeTrue();
+        });
     });
 });

projects/igniteui-angular-elements/src/app/custom-strategy.spec.ts

@@ -0,0 +1,111 @@
+# Ignite UI performance project
+
+This project contains sample applications for the grid, tree grid, and pivot grid, with predefined data source sizes of 1,000, 100,000, and 1,000,000 records. These samples are used to measure the performance of different grid features using an internal `PerformanceService`, which is a wrapper around the browser's Performance API.
+
+To run the application:
+
+```sh
+npm run start:performance
+```
+
+## Using the performance service
+
+The performance service is intended to be used as an injectable service inside a component that would be measured. In order to inject it add a private property in the component:
+
+```ts
+private performanceService = inject(PerformanceService);
+```
+
+This will initialize the service and also create a global `$$igcPerformance` variable that can be used for convenience.
+
+### API
+
+```ts
+performanceService.setLogEnabled(true);
+```
+
+- Set whether the service should use `console.debug` to print the performance entries. Defaults to `false`.
+
+```ts
+const end = performanceService.start(name);
+data.sort();
+end();
+```
+
+- Starts a performance measuring. The method returns a function that should be invoked after the code you want to measure has finished executing. This creates a `PerformanceMeasure` entry in the browser's performance timeline.
+
+```ts
+const performanceMeasures: PerformanceEntryList = performanceService.getMeasures(name?);
+```
+
+- Gets list of `PerformanceMeasure` entries. If a name is provided, it returns only the measures with that name.
+
+```ts
+performanceService.clearMeasures(name?);
+```
+
+- Clears all performed measures. If a `name` is provided, it clears only the measures with that name.
+
+> **Note:** The `$$igcPerformance` global object could be used as an alternative to the injected `performanceService` instance.
+
+### Reading results
+
+Let's say that we want to measure the time that the grid's sorting pipeline takes to sort the data. We first go to the `IgxGridSortingPipe` and modify the code to look like this:
+
+```ts
+@Pipe({
+  name: 'gridSort',
+  standalone: true,
+})
+export class IgxGridSortingPipe implements PipeTransform {
+  private performance = inject(PerformanceService);
+
+  constructor(@Inject(IGX_GRID_BASE) private grid: GridType) {}
+
+  public transform(
+    collection: any[],
+    sortExpressions: ISortingExpression[],
+    groupExpressions: IGroupingExpression[],
+    sorting: IGridSortingStrategy,
+    id: string,
+    pipeTrigger: number,
+    pinned?
+  ): any[] {
+    // This is important!
+    this.performance.setLogEnabled(true);
+    const endSorting = this.performance.start('Sorting pipe');
+
+    let result: any[];
+    const expressions = groupExpressions.concat(sortExpressions);
+    if (!expressions.length) {
+      result = collection;
+    } else {
+      result = DataUtil.sort(
+        cloneArray(collection),
+        expressions,
+        sorting,
+        this.grid
+      );
+    }
+    this.grid.setFilteredSortedData(result, pinned);
+
+    // This is important!
+    endSorting();
+
+    return result;
+  }
+}
+```
+
+If you run a sample and sort a column, the performance service will measure the execution time of the sorting pipe. There are two ways to see the results:
+
+1.  If `setLogEnabled` is called with `true` then the service will print the measurement result in the console using `console.debug`.
+<img width="1720" height="863" alt="performance-console" src="https://github.com/user-attachments/assets/000d0bfd-a180-447d-ac27-2f82904e1150" />
+
+2.  The browser's DevTools Performance tab can be used for a more detailed analysis. Before triggering the action (e.g., sorting), start a new performance recording in DevTools.
+
+
+https://github.com/user-attachments/assets/8aa80ead-82d0-48a4-a6d2-1c17b3d099b1
+
+
+You should look at the timings tab in the performance window in dev-tools.

projects/igniteui-angular-performance/README.md

@@ -73,7 +73,7 @@
         "tslib": "^2.3.0",
         "igniteui-trial-watermark": "^3.1.0",
         "lodash-es": "^4.17.21",
-        "igniteui-theming": "^22.0.0",
+        "igniteui-theming": "^23.0.0",
         "@igniteui/material-icons-extended": "^3.1.0"
     },
     "peerDependencies": {

projects/igniteui-angular/package.json

@@ -15,6 +15,7 @@ import { IgxGridPinningActionsComponent } from './grid-pinning-actions.component
 import { IgxActionStripComponent } from '../action-strip.component';
 import { IRowDataCancelableEventArgs, IgxColumnComponent } from '../../grids/public_api';
 import { SampleTestData } from '../../test-utils/sample-test-data.spec';
+import { SortingDirection } from '../../data-operations/sorting-strategy';
 
 describe('igxGridEditingActions #grid ', () => {
     let fixture;
@@ -274,6 +275,59 @@ describe('igxGridEditingActions #grid ', () => {
 
             expect(actionStrip.hidden).toBeTrue();
         });
+
+        it('should auto-hide on delete action click.', () => {
+            const row = grid.rowList.toArray()[0];
+            actionStrip.show(row);
+            fixture.detectChanges();
+
+            expect(actionStrip.hidden).toBeFalse();
+
+            const deleteIcon = fixture.debugElement.queryAll(By.css(`igx-grid-editing-actions igx-icon`))[1];
+            expect(deleteIcon.nativeElement.innerText).toBe('delete');
+            deleteIcon.parent.triggerEventHandler('click', new Event('click'));
+            fixture.detectChanges();
+
+            expect(actionStrip.hidden).toBeTrue();
+
+        });
+
+        it('should auto-hide if context row is destroyed.', () => {
+            const row = grid.rowList.toArray()[0];
+            actionStrip.show(row);
+            fixture.detectChanges();
+
+            expect(actionStrip.hidden).toBeFalse();
+
+            // bind to no data, which removes all rows.
+            grid.data = [];
+            grid.cdr.detectChanges();
+
+            expect((row.cdr as any).destroyed).toBeTrue();
+            expect(actionStrip.hidden).toBeTrue();
+        });
+
+        it('should auto-hide if context row is cached.', () => {
+            // create group rows
+            grid.groupBy({ fieldName: 'ContactTitle', dir: SortingDirection.Desc, ignoreCase: false });
+            fixture.detectChanges();
+
+            // show for first data row
+            const row = grid.dataRowList.toArray()[0];
+            actionStrip.show(row);
+            fixture.detectChanges();
+
+            // collapse all groups to cache data rows
+            grid.toggleAllGroupRows();
+            fixture.detectChanges();
+
+            // not destroyed, but not in DOM anymore
+            expect((row.cdr as any).destroyed).toBeFalse();
+            expect(row.element.nativeElement.isConnected).toBe(false);
+
+            // action strip should be hidden
+            expect(actionStrip.hidden).toBeTrue();
+        });
     });
 
     describe('auto show/hide in HierarchicalGrid', () => {

projects/igniteui-angular/src/lib/action-strip/grid-actions/grid-editing-actions.component.spec.ts

@@ -1,7 +1,7 @@
 # igx-badge
 
 The **igx-badge** component is an absolutely positioned element that can be used in tandem with other components such as avatars, navigation menus, or anywhere else in an app where some active indication is required.
-With the igx-badge you can display active count or an icon in several different predefined styles.  
+With the igx-badge you can display active count or an icon in several different predefined styles and sizes.
 A walkthrough of how to get started can be found [here](https://www.infragistics.com/products/ignite-ui-angular/angular/components/badge.html)
 
 # Usage
@@ -14,9 +14,12 @@ A walkthrough of how to get started can be found [here](https://www.infragistics
 |:----------|:-------------:|:------|
 | `id` | string | Unique identifier of the component. If not provided it will be automatically generated.|
 | `type` | string | Set the type of the badge to either `primary`, `info`, `success`, `warning`, or `error`. This will change the background color of the badge according to the values set in the default theme. |
+| `dot` | boolean | Set whether the badge is displayed as a minimal dot indicator without any content. Default is `false`. |
 | `position` | string | Set the position of the badge relative to its parent container to either `top-right`, `top-left`, `bottom-right`, or `bottom-left`. |
 | `value` | string | Set the value to be displayed inside the badge. |
 | `icon` | string | Set an icon for the badge from the material icons set. Will not be displayed if `value` for the badge is already set. |
+| `outlined` | boolean | Set whether the badge should have an outline. Default is `false`. |
+| `shape` | string | Set the shape of the badge to either `rounded` or `square`. Default is `rounded`. |
 
 # Examples
 
@@ -26,3 +29,18 @@ Using `igx-badge` with the `igx-avatar` component to show active status.
     <igx-badge type="info" value="8"></igx-badge>
 </igx-avatar>
 ```
+
+Using `igx-badge` as a dot indicator for notifications.
+```html
+<igx-badge dot type="success"></igx-badge>
+<igx-badge dot outlined type="error"></igx-badge>
+```
+
+Using different badge types.
+```html
+<igx-badge type="primary" value="1"></igx-badge>
+<igx-badge type="info" value="2"></igx-badge>
+<igx-badge type="success" value="3"></igx-badge>
+<igx-badge type="warning" value="4"></igx-badge>
+<igx-badge type="error" value="5"></igx-badge>
+```

projects/igniteui-angular/src/lib/badge/README.md

@@ -11,7 +11,8 @@ describe('Badge', () => {
                 InitBadgeWithDefaultsComponent,
                 InitBadgeWithIconComponent,
                 IgxBadgeComponent,
-                InitBadgeWithIconARIAComponent
+                InitBadgeWithIconARIAComponent,
+                InitBadgeWithDotComponent
             ]
         }).compileComponents();
     }));
@@ -87,6 +88,26 @@ describe('Badge', () => {
         const container = fixture.nativeElement.querySelectorAll('.igx-badge')[0];
         expect(container.getAttribute('aria-roledescription')).toMatch(expectedDescription);
     });
+
+    it('Initializes badge with dot property', () => {
+        const fixture = TestBed.createComponent(InitBadgeWithDotComponent);
+        fixture.detectChanges();
+        const badge = fixture.componentInstance.badge;
+
+        expect(badge.dot).toBeTruthy();
+        expect(fixture.debugElement.query(By.css('.igx-badge--dot'))).toBeTruthy();
+    });
+
+    it('Initializes success badge as dot', () => {
+        const fixture = TestBed.createComponent(InitBadgeWithDotComponent);
+        fixture.detectChanges();
+        const badge = fixture.componentInstance.badge;
+
+        expect(badge.type).toBe(IgxBadgeType.SUCCESS);
+        expect(badge.dot).toBeTruthy();
+        expect(fixture.debugElement.query(By.css('.igx-badge--dot'))).toBeTruthy();
+        expect(fixture.debugElement.query(By.css('.igx-badge--success'))).toBeTruthy();
+    });
 });
 
 @Component({
@@ -120,3 +141,11 @@ class InitBadgeWithIconComponent {
 class InitBadgeWithIconARIAComponent {
     @ViewChild(IgxBadgeComponent, { static: true }) public badge: IgxBadgeComponent;
 }
+
+@Component({
+    template: `<igx-badge dot type="success"></igx-badge>`,
+    imports: [IgxBadgeComponent]
+})
+class InitBadgeWithDotComponent {
+    @ViewChild(IgxBadgeComponent, { static: true }) public badge: IgxBadgeComponent;
+}