Merge branch 'master' into mkirova/feat-15235

Author: MKirova

CHANGELOG.md

@@ -2,6 +2,34 @@
 
 All notable changes for each version of this project will be documented in this file.
 
+## 20.0.0
+
+### General
+- **Angular 20 Compatibility** - Ignite UI for Angular now plays nice with Angular 20! Upgrade your apps and enjoy the latest features.
+- `IgxActionStrip`
+    - **Behavioral Changes** - When using the Action Strip standalone, outside of Grid, scenarios the component is no longer initially visible and the `hidden` property now defaults to `true`.
+- `IgxChip`
+    - **Behavioral Change** The `variant` is now strictly typed with the union of supported options and no longer accepts invalid values for the default state, provide no value (nullish) instead is needed.
+
+### New Features
+- `IgxGrid`, `IgxTreeGrid`, `IgxHierarchicalGrid`, `IgxPivotGrid`
+  - Added a new `igxGridEmpty` template directive that allows assigning the `emptyGridTemplate` declaratively, without the need to get and assign reference, like other grid templates like:
+    ```html
+    <igx-grid>
+      <ng-template igxGridEmpty>
+        <!-- content to show when the grid is empty -->
+      </ng-template>
+    </igx-grid>
+    ```
+  - Added a new `igxGridLoading` template directive that allows assigning the `loadingGridTemplate` declaratively, without the need to get and assign reference, like other grid templates like:
+    ```html
+    <igx-grid>
+      <ng-template igxGridLoading>
+        <!-- content to show when the grid is loading -->
+      </ng-template>
+    </igx-grid>
+    ```
+
 ## 19.2.0
 
 ### General

angular.json

@@ -323,7 +323,7 @@
               ],
               "outputHashing": "none",
               "optimization": true,
-              "externalDependencies": ["lit-html"]
+              "externalDependencies": ["lit"]
             },
             "development": {
               "optimization": false,

package-lock.json

@@ -75,7 +75,7 @@
     "express": "^5.1.0",
     "fflate": "^0.8.1",
     "igniteui-theming": "^18.0.1",
-    "igniteui-trial-watermark": "^3.0.2",
+    "igniteui-trial-watermark": "^3.1.0",
     "lodash-es": "^4.17.21",
     "rxjs": "^7.8.2",
     "tslib": "^2.3.0",

package.json

@@ -8,7 +8,7 @@ const config = {
     minify: false, // temporary disabled due to Webpack issues https://github.com/webpack/webpack/issues/16262
     outfile: `${ROOT}/elements.js`,
     format: 'esm',
-    external: ['lit-html'],
+    external: ['lit'],
     target: 'es2022',
     metafile: true,
     treeShaking: true

projects/igniteui-angular-elements/esbuild.mjs

@@ -1,5 +1,5 @@
 import { IgxColumnComponent, IgxGridComponent, IgxHierarchicalGridComponent } from 'igniteui-angular';
-import { html } from 'lit-html';
+import { html } from 'lit';
 import { firstValueFrom, fromEvent, skip, timer } from 'rxjs';
 import { ComponentRefKey, IgcNgElement } from './custom-strategy';
 import hgridData from '../assets/data/projects-hgrid.js';
@@ -11,6 +11,7 @@ import {
     IgcColumnComponent,
     IgcPaginatorComponent,
     IgcGridStateComponent,
+    IgcColumnLayoutComponent,
 } from './components';
 import { defineComponents } from '../utils/register';
 
@@ -23,6 +24,7 @@ describe('Elements: ', () => {
             IgcHierarchicalGridComponent,
             IgcPivotGridComponent,
             IgcColumnComponent,
+            IgcColumnLayoutComponent,
             IgcPaginatorComponent,
             IgcGridStateComponent,
         );
@@ -181,5 +183,52 @@ describe('Elements: ', () => {
             await firstValueFrom(timer(10 /* SCHEDULE_DELAY */ * 2));
             expect(() => stateComponent.getStateAsString()).not.toThrow();
         });
+
+        it(`should allow manipulating projected columns through the DOM`, async () => {
+            const innerHtml = `
+            <igc-grid id="testGrid" primary-key="ProductID">
+                <igc-column-layout header="Product ID">
+                    <igc-column row-start="1" col-start="1" row-end="3" field="ProductID" header="Product ID" width="25%"></igc-column>
+                </igc-column-layout>
+                <igc-column-layout header="Product Details">
+                    <igc-column row-start="1" col-start="1" col-end="3" field="ProductName" header="Product Name"></igc-column>
+                    <igc-column row-start="2" col-start="1" col-end="2" field="CategoryName" header="Category Name" groupable="true"></igc-column>
+                    <igc-column row-start="2" col-start="2" col-end="3" field="ImageUrl"></igc-column>
+                </igc-column-layout>
+                <igc-column-layout header="Product Stock">
+                    <igc-column row-start="1" col-start="1" col-end="3" field="InStock" header="In Stock" width="25%"></igc-column>
+                </igc-column-layout>
+            </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 thirdGroup = document.querySelector<IgcNgElement>('igc-column-layout[header="Product Stock"]');
+            const secondGroup = document.querySelector<IgcNgElement>('igc-column-layout[header="Product Details"]');
+
+            expect(grid.columns.length).toEqual(8);
+            expect(grid.getColumnByName('ProductID')).toBeTruthy();
+            expect(grid.getColumnByVisibleIndex(1).field).toEqual('ProductName');
+
+            grid.removeChild(secondGroup);
+            await firstValueFrom(timer(10 /* SCHEDULE_DELAY */ * 3));
+
+            expect(grid.columns.length).toEqual(4);
+            expect(grid.getColumnByName('ProductID')).toBeTruthy();
+            expect(grid.getColumnByVisibleIndex(1).field).toEqual('InStock');
+
+            // TODO: secondGroup can't be re-used
+            const newGroup = document.createElement('igc-column-layout');
+            const newColumn = document.createElement('igc-column');
+            newColumn.setAttribute('field', 'ProductName');
+            newGroup.appendChild(newColumn);
+            grid.insertBefore(newGroup, thirdGroup);
+            await firstValueFrom(timer(10 /* SCHEDULE_DELAY */ * 3));
+
+            expect(grid.columns.length).toEqual(6);
+            expect(grid.getColumnByVisibleIndex(1).field).toEqual('ProductName');
+        });
     });
 });

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

@@ -1,5 +1,5 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { html } from 'lit-html';
+import { html } from 'lit';
 import { AsyncDirective, directive } from 'lit/async-directive.js';
 import { TemplateWrapperComponent } from './wrapper.component';
 

projects/igniteui-angular-elements/src/app/wrapper/wrapper.component.spec.ts

@@ -2,7 +2,7 @@ import { ChangeDetectorRef, Component, QueryList, TemplateRef, ViewChildren } fr
 import { Subject } from 'rxjs';
 import { TemplateRefWrapper } from './template-ref-wrapper';
 
-import { render, type RootPart, type TemplateResult } from 'lit-html';
+import { render, type RootPart, type TemplateResult } from 'lit';
 
 type TemplateFunction = (arg: any) => TemplateResult;
 

projects/igniteui-angular-elements/src/app/wrapper/wrapper.component.ts

@@ -46,6 +46,7 @@ export interface IGridStateInfo {
 @Component({
     selector: 'igx-grid-state',
     template: ``,
+    styles: `:host { display: none }`,
     standalone: true
 })
 export class IgxGridStateComponent extends IgxGridStateBaseDirective {

projects/igniteui-angular-elements/src/lib/state.component.ts

@@ -71,7 +71,7 @@
     "dependencies": {
         "fflate": "^0.8.1",
         "tslib": "^2.3.0",
-        "igniteui-trial-watermark": "^3.0.2",
+        "igniteui-trial-watermark": "^3.1.0",
         "lodash-es": "^4.17.21",
         "igniteui-theming": "^18.0.1",
         "@igniteui/material-icons-extended": "^3.1.0"
@@ -93,7 +93,7 @@
         }
     },
     "igxDevDependencies": {
-        "@igniteui/angular-schematics": "~19.2.1440"
+        "@igniteui/angular-schematics": "~20.0.1450"
     },
     "ng-update": {
         "migrations": "./migrations/migration-collection.json",