Merge branch 'master' into nalipiev/schema-update

Author: ChronosSF

CHANGELOG.md

@@ -2,6 +2,15 @@
 
 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.
+
 ## 19.2.0
 
 ### General

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

@@ -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/lib/state.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/src/lib/action-strip/action-strip.component.spec.ts

@@ -34,6 +34,7 @@ describe('igxActionStrip', () => {
             fixture = TestBed.createComponent(IgxActionStripComponent);
             actionStrip = fixture.componentInstance as IgxActionStripComponent;
             fixture.detectChanges();
+            expect(actionStrip.hidden).toBeTruthy();
 
             const el = document.createElement('div');
             fixture.debugElement.nativeElement.appendChild(el);
@@ -162,7 +163,7 @@ describe('igxActionStrip', () => {
                 Lorem ipsum dolor sit
             </p>
         </div>
-        <igx-action-strip #actionStrip>
+        <igx-action-strip #actionStrip [hidden]="false">
             <igx-icon class="asIcon" (click)="onIconClick()">alarm</igx-icon>
         </igx-action-strip>
     </div>
@@ -197,7 +198,7 @@ class IgxActionStripTestingComponent {
                 Lorem ipsum dolor sit
             </p>
         </div>
-        <igx-action-strip #actionStrip>
+        <igx-action-strip #actionStrip [hidden]="false">
             <span *igxActionStripMenuItem>Mark</span>
             <span *igxActionStripMenuItem>Favorite</span>
             <span *igxActionStripMenuItem>Download</span>
@@ -219,7 +220,7 @@ class IgxActionStripMenuTestingComponent {
                 Lorem ipsum dolor sit
             </p>
         </div>
-        <igx-action-strip #actionStrip>
+        <igx-action-strip #actionStrip [hidden]="false">
             <span>Mark</span>
             <span *igxActionStripMenuItem>Favorite</span>
             <span *igxActionStripMenuItem>Download</span>

projects/igniteui-angular/src/lib/action-strip/action-strip.component.ts

@@ -134,7 +134,7 @@ export class IgxActionStripComponent implements IgxActionStripToken, AfterConten
      * ```
      */
     @Input({ transform: booleanAttribute })
-    public hidden = false;
+    public hidden = true;
 
 
     /**

projects/igniteui-angular/src/lib/avatar/avatar.component.ts

@@ -9,23 +9,23 @@ import {
     ViewChild
 } from '@angular/core';
 
-import { mkenum, normalizeURI } from '../core/utils';
+import { normalizeURI } from '../core/utils';
 import { IgxIconComponent } from '../icon/icon.component';
 
 let NEXT_ID = 0;
-export const IgxAvatarSize = /*@__PURE__*/mkenum({
+export const IgxAvatarSize = {
     SMALL: 'small',
     MEDIUM: 'medium',
     LARGE: 'large'
-});
+} as const;
 export type IgxAvatarSize = (typeof IgxAvatarSize)[keyof typeof IgxAvatarSize];
 
-export const IgxAvatarType = /*@__PURE__*/mkenum({
+export const IgxAvatarType = {
     INITIALS: 'initials',
     IMAGE: 'image',
     ICON: 'icon',
     CUSTOM: 'custom'
-});
+} as const;
 export type IgxAvatarType = (typeof IgxAvatarType)[keyof typeof IgxAvatarType];
 
 /**

projects/igniteui-angular/src/lib/badge/badge.component.ts

@@ -1,19 +1,18 @@
 import { booleanAttribute, Component, HostBinding, Input } from '@angular/core';
-import { mkenum } from '../core/utils';
 import { IgxIconComponent } from '../icon/icon.component';
 
 let NEXT_ID = 0;
 
 /**
  * Determines the igxBadge type
  */
-export const IgxBadgeType = /*@__PURE__*/mkenum({
+export const IgxBadgeType = {
     PRIMARY: 'primary',
     INFO: 'info',
     SUCCESS: 'success',
     WARNING: 'warning',
     ERROR: 'error'
-});
+} as const;
 export type IgxBadgeType = (typeof IgxBadgeType)[keyof typeof IgxBadgeType];
 /**
  * Badge provides visual notifications used to decorate avatars, menus, etc.

projects/igniteui-angular/src/lib/buttonGroup/buttonGroup.component.ts

@@ -20,16 +20,15 @@ import { IgxRippleDirective } from '../directives/ripple/ripple.directive';
 
 import { takeUntil } from 'rxjs/operators';
 import { IBaseEventArgs } from '../core/utils';
-import { mkenum } from '../core/utils';
 import { IgxIconComponent } from '../icon/icon.component';
 
 /**
  * Determines the Button Group alignment
  */
-export const ButtonGroupAlignment = mkenum({
+export const ButtonGroupAlignment = {
     horizontal: 'horizontal',
     vertical: 'vertical'
-});
+} as const;
 export type ButtonGroupAlignment = typeof ButtonGroupAlignment[keyof typeof ButtonGroupAlignment];
 
 let NEXT_ID = 0;

projects/igniteui-angular/src/lib/calendar/calendar.ts

@@ -1,13 +1,12 @@
-import { mkenum } from '../core/utils';
 
 /**
  * Sets the selection type - single, multi or range.
  */
-export const CalendarSelection = /*@__PURE__*/mkenum({
+export const CalendarSelection = {
     SINGLE: 'single',
     MULTI: 'multi',
     RANGE: 'range'
-});
+} as const;
 export type CalendarSelection = (typeof CalendarSelection)[keyof typeof CalendarSelection];
 
 export const enum ScrollDirection {
@@ -21,11 +20,11 @@ export interface IViewDateChangeEventArgs {
     currentValue: Date;
 }
 
-export const IgxCalendarView = /*@__PURE__*/mkenum({
+export const IgxCalendarView = {
     Month: 'month',
     Year: 'year',
     Decade: 'decade'
-});
+} as const;
 
 /**
  * Determines the Calendar active view - days, months or years.

projects/igniteui-angular/src/lib/card/card.component.ts

@@ -11,8 +11,6 @@ import {
     booleanAttribute
 } from '@angular/core';
 
-import { mkenum } from '../core/utils';
-
 let NEXT_ID = 0;
 
 /**
@@ -269,10 +267,10 @@ export class IgxCardComponent {
     public horizontal = false;
 }
 
-export const IgxCardActionsLayout = /*@__PURE__*/mkenum({
+export const IgxCardActionsLayout = {
     START: 'start',
     JUSTIFY: 'justify'
-});
+} as const;
 export type IgxCardActionsLayout = (typeof IgxCardActionsLayout)[keyof typeof IgxCardActionsLayout];
 
 /**