Skip to content

Commit 9f88351

Browse files
committed
fix(elements): maintain projected children directly under parent
1 parent a9a69e8 commit 9f88351

File tree

9 files changed

+38
-26
lines changed

9 files changed

+38
-26
lines changed

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/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
}

projects/igniteui-angular/src/lib/grids/hierarchical-grid/row-island.component.ts

Lines changed: 20 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -72,10 +72,8 @@ import { IgxPaginatorComponent } from '../../paginator/paginator.component';
7272
changeDetection: ChangeDetectionStrategy.OnPush,
7373
selector: 'igx-row-island',
7474
template: `@if (platform.isElements) {
75-
<div #sink style="display: none;">
76-
<ng-content select="igx-column,igc-column,igx-column-group,igc-column-group,igx-action-strip,igc-action-strip"></ng-content>
77-
<ng-content select="igx-row-island,igc-row-island"></ng-content>
78-
</div>
75+
<ng-content select="igx-column,igc-column,igx-column-group,igc-column-group,igx-action-strip,igc-action-strip"></ng-content>
76+
<ng-content select="igx-row-island,igc-row-island"></ng-content>
7977
}`,
8078
providers: [
8179
IgxRowIslandAPIService,
@@ -283,6 +281,24 @@ export class IgxRowIslandComponent extends IgxHierarchicalGridBaseDirective
283281
return [];
284282
}
285283

284+
//#region inert, not-a-grid component
285+
/** @hidden @internal */
286+
public override tabindex = -1;
287+
288+
/** @hidden @internal */
289+
public override hostRole = null;
290+
291+
protected override baseClass = null;
292+
293+
/** @hidden @internal */
294+
public override get hostWidth(): any {
295+
return null;
296+
}
297+
298+
protected override displayStyle = 'none';
299+
protected override templateRows = null;
300+
//#endregion
301+
286302
private ri_columnListDiffer;
287303
private layout_id = `igx-row-island-`;
288304
private isInit = false;

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

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -221,7 +221,6 @@
221221
</div>
222222

223223
@if (platform.isElements) {
224-
<div #sink style="display: none;">
225-
<ng-content select="igx-grid-state,igc-grid-state"></ng-content>
226-
</div>
224+
<div #sink style="display: none;"></div>
225+
<ng-content select="igx-grid-state,igc-grid-state"></ng-content>
227226
}

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

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -234,8 +234,7 @@
234234
<div class="igx-grid__loading-outlet" #igxLoadingOverlayOutlet igxOverlayOutlet></div>
235235
<div class="igx-grid__outlet" #igxFilteringOverlayOutlet igxOverlayOutlet></div>
236236
@if (platform.isElements) {
237-
<div #sink style="display: none;">
238-
<ng-content select="igx-grid-state,igc-grid-state"></ng-content>
239-
<ng-content select="igx-column,igc-column,igx-column-group,igc-column-group,igx-action-strip,igc-action-strip"></ng-content>
240-
</div>
237+
<div #sink style="display: none;"></div>
238+
<ng-content select="igx-grid-state,igc-grid-state"></ng-content>
239+
<ng-content select="igx-column,igc-column,igx-column-group,igc-column-group,igx-action-strip,igc-action-strip"></ng-content>
241240
}

0 commit comments

Comments
 (0)