Skip to content

Commit 9c31d23

Browse files
damyanpetevdamyanpetev
authored
Merge pull request #15877 from IgniteUI/dpetev/elements-projection-fix
Elements child component projection & DOM manipulation
2 parents bb28024 + 42417a2 commit 9c31d23

File tree

14 files changed

+100
-30
lines changed

14 files changed

+100
-30
lines changed

‎CHANGELOG.md

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,13 @@
22

33
All notable changes for each version of this project will be documented in this file.
44

5+
## 20.0.0
6+
7+
### General
8+
- **Angular 20 Compatibility** - Ignite UI for Angular now plays nice with Angular 20! Upgrade your apps and enjoy the latest features.
9+
- `IgxActionStrip`
10+
- **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`.
11+
512
## 19.2.0
613

714
### General

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

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import {
1111
IgcColumnComponent,
1212
IgcPaginatorComponent,
1313
IgcGridStateComponent,
14+
IgcColumnLayoutComponent,
1415
} from './components';
1516
import { defineComponents } from '../utils/register';
1617

@@ -23,6 +24,7 @@ describe('Elements: ', () => {
2324
IgcHierarchicalGridComponent,
2425
IgcPivotGridComponent,
2526
IgcColumnComponent,
27+
IgcColumnLayoutComponent,
2628
IgcPaginatorComponent,
2729
IgcGridStateComponent,
2830
);
@@ -181,5 +183,52 @@ describe('Elements: ', () => {
181183
await firstValueFrom(timer(10 /* SCHEDULE_DELAY */ * 2));
182184
expect(() => stateComponent.getStateAsString()).not.toThrow();
183185
});
186+
187+
it(`should allow manipulating projected columns through the DOM`, async () => {
188+
const innerHtml = `
189+
<igc-grid id="testGrid" primary-key="ProductID">
190+
<igc-column-layout header="Product ID">
191+
<igc-column row-start="1" col-start="1" row-end="3" field="ProductID" header="Product ID" width="25%"></igc-column>
192+
</igc-column-layout>
193+
<igc-column-layout header="Product Details">
194+
<igc-column row-start="1" col-start="1" col-end="3" field="ProductName" header="Product Name"></igc-column>
195+
<igc-column row-start="2" col-start="1" col-end="2" field="CategoryName" header="Category Name" groupable="true"></igc-column>
196+
<igc-column row-start="2" col-start="2" col-end="3" field="ImageUrl"></igc-column>
197+
</igc-column-layout>
198+
<igc-column-layout header="Product Stock">
199+
<igc-column row-start="1" col-start="1" col-end="3" field="InStock" header="In Stock" width="25%"></igc-column>
200+
</igc-column-layout>
201+
</igc-grid>`;
202+
testContainer.innerHTML = innerHtml;
203+
204+
// TODO: Better way to wait - potentially expose the queue or observable for update on the strategy
205+
await firstValueFrom(timer(10 /* SCHEDULE_DELAY */ * 3));
206+
207+
const grid = document.querySelector<IgcNgElement & InstanceType<typeof IgcGridComponent>>('#testGrid');
208+
const thirdGroup = document.querySelector<IgcNgElement>('igc-column-layout[header="Product Stock"]');
209+
const secondGroup = document.querySelector<IgcNgElement>('igc-column-layout[header="Product Details"]');
210+
211+
expect(grid.columns.length).toEqual(8);
212+
expect(grid.getColumnByName('ProductID')).toBeTruthy();
213+
expect(grid.getColumnByVisibleIndex(1).field).toEqual('ProductName');
214+
215+
grid.removeChild(secondGroup);
216+
await firstValueFrom(timer(10 /* SCHEDULE_DELAY */ * 3));
217+
218+
expect(grid.columns.length).toEqual(4);
219+
expect(grid.getColumnByName('ProductID')).toBeTruthy();
220+
expect(grid.getColumnByVisibleIndex(1).field).toEqual('InStock');
221+
222+
// TODO: secondGroup can't be re-used
223+
const newGroup = document.createElement('igc-column-layout');
224+
const newColumn = document.createElement('igc-column');
225+
newColumn.setAttribute('field', 'ProductName');
226+
newGroup.appendChild(newColumn);
227+
grid.insertBefore(newGroup, thirdGroup);
228+
await firstValueFrom(timer(10 /* SCHEDULE_DELAY */ * 3));
229+
230+
expect(grid.columns.length).toEqual(6);
231+
expect(grid.getColumnByVisibleIndex(1).field).toEqual('ProductName');
232+
});
184233
});
185234
});

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,7 @@ export interface IGridStateInfo {
4646
@Component({
4747
selector: 'igx-grid-state',
4848
template: ``,
49+
styles: `:host { display: none }`,
4950
standalone: true
5051
})
5152
export class IgxGridStateComponent extends IgxGridStateBaseDirective {

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

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@ describe('igxActionStrip', () => {
3434
fixture = TestBed.createComponent(IgxActionStripComponent);
3535
actionStrip = fixture.componentInstance as IgxActionStripComponent;
3636
fixture.detectChanges();
37+
expect(actionStrip.hidden).toBeTruthy();
3738

3839
const el = document.createElement('div');
3940
fixture.debugElement.nativeElement.appendChild(el);
@@ -162,7 +163,7 @@ describe('igxActionStrip', () => {
162163
Lorem ipsum dolor sit
163164
</p>
164165
</div>
165-
<igx-action-strip #actionStrip>
166+
<igx-action-strip #actionStrip [hidden]="false">
166167
<igx-icon class="asIcon" (click)="onIconClick()">alarm</igx-icon>
167168
</igx-action-strip>
168169
</div>
@@ -197,7 +198,7 @@ class IgxActionStripTestingComponent {
197198
Lorem ipsum dolor sit
198199
</p>
199200
</div>
200-
<igx-action-strip #actionStrip>
201+
<igx-action-strip #actionStrip [hidden]="false">
201202
<span *igxActionStripMenuItem>Mark</span>
202203
<span *igxActionStripMenuItem>Favorite</span>
203204
<span *igxActionStripMenuItem>Download</span>
@@ -219,7 +220,7 @@ class IgxActionStripMenuTestingComponent {
219220
Lorem ipsum dolor sit
220221
</p>
221222
</div>
222-
<igx-action-strip #actionStrip>
223+
<igx-action-strip #actionStrip [hidden]="false">
223224
<span>Mark</span>
224225
<span *igxActionStripMenuItem>Favorite</span>
225226
<span *igxActionStripMenuItem>Download</span>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -134,7 +134,7 @@ export class IgxActionStripComponent implements IgxActionStripToken, AfterConten
134134
* ```
135135
*/
136136
@Input({ transform: booleanAttribute })
137-
public hidden = false;
137+
public hidden = true;
138138

139139

140140
/**

‎projects/igniteui-angular/src/lib/grids/columns/column-group.component.ts

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -31,10 +31,9 @@ import { CellType, ColumnType, IgxColumnTemplateContext } from '../common/grid.i
3131
providers: [{ provide: IgxColumnComponent, useExisting: forwardRef(() => IgxColumnGroupComponent) }],
3232
selector: 'igx-column-group',
3333
template: `@if (platform.isElements) {
34-
<div #sink style="display: none;">
35-
<ng-content select="igx-column,igc-column,igx-column-group,igc-column-group"></ng-content>
36-
</div>
34+
<ng-content select="igx-column,igc-column,igx-column-group,igc-column-group"></ng-content>
3735
}`,
36+
styles: `:host { display: none }`,
3837
standalone: true
3938
})
4039
export class IgxColumnGroupComponent extends IgxColumnComponent implements AfterContentInit {

‎projects/igniteui-angular/src/lib/grids/columns/column-layout.component.ts

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -25,10 +25,9 @@ import { IgxColumnGroupComponent } from './column-group.component';
2525
providers: [{ provide: IgxColumnComponent, useExisting: forwardRef(() => IgxColumnLayoutComponent) }],
2626
selector: 'igx-column-layout',
2727
template: `@if (platform.isElements) {
28-
<div #sink style="display: none;">
29-
<ng-content select="igx-column,igc-column"></ng-content>
30-
</div>
28+
<ng-content select="igx-column,igc-column"></ng-content>
3129
}`,
30+
styles: `:host { display: none }`,
3231
standalone: true
3332
})
3433
export class IgxColumnLayoutComponent extends IgxColumnGroupComponent implements AfterContentInit {

‎projects/igniteui-angular/src/lib/grids/columns/column.component.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -83,6 +83,7 @@ const DEFAULT_DIGITS_INFO = '1.0-3';
8383
changeDetection: ChangeDetectionStrategy.OnPush,
8484
selector: 'igx-column',
8585
template: ``,
86+
styles: `:host { display: none }`,
8687
standalone: true
8788
})
8889
export class IgxColumnComponent implements AfterContentInit, OnDestroy, ColumnType {

‎projects/igniteui-angular/src/lib/grids/grid/grid.component.html

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -300,8 +300,7 @@
300300
}
301301
<div class="igx-grid__outlet" #igxFilteringOverlayOutlet igxOverlayOutlet></div>
302302
@if (platform.isElements) {
303-
<div #sink style="display: none;">
304-
<ng-content select="igx-grid-state,igc-grid-state"></ng-content>
305-
<ng-content select="igx-column,igc-column,igx-column-group,igc-column-group,igx-column-layout,igc-column-layout,igx-action-strip,igc-action-strip"></ng-content>
306-
</div>
303+
<div #sink style="display: none;"></div>
304+
<ng-content select="igx-grid-state,igc-grid-state"></ng-content>
305+
<ng-content select="igx-column,igc-column,igx-column-group,igc-column-group,igx-column-layout,igc-column-layout,igx-action-strip,igc-action-strip"></ng-content>
307306
}

‎projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.html

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -257,9 +257,8 @@
257257
<div class="igx-grid__loading-outlet" #igxLoadingOverlayOutlet igxOverlayOutlet></div>
258258
<div class="igx-grid__outlet" #igxFilteringOverlayOutlet igxOverlayOutlet></div>
259259
@if (platform.isElements) {
260-
<div #sink style="display: none;">
261-
<ng-content select="igx-grid-state,igc-grid-state"></ng-content>
262-
<ng-content select="igx-column,igc-column,igx-column-group,igc-column-group,igx-action-strip,igc-action-strip"></ng-content>
263-
<ng-content select="igx-row-island,igc-row-island"></ng-content>
264-
</div>
260+
<div #sink style="display: none;"></div>
261+
<ng-content select="igx-grid-state,igc-grid-state"></ng-content>
262+
<ng-content select="igx-column,igc-column,igx-column-group,igc-column-group,igx-action-strip,igc-action-strip"></ng-content>
263+
<ng-content select="igx-row-island,igc-row-island"></ng-content>
265264
}

0 commit comments

Comments
 (0)