diff --git a/angular.json b/angular.json index a8157cba8d9..a095141d2af 100644 --- a/angular.json +++ b/angular.json @@ -360,7 +360,7 @@ { "type": "allScript", "maximumWarning": "2.5mb", - "maximumError": "3mb" + "maximumError": "3.5mb" }, { "type": "bundle", diff --git a/package-lock.json b/package-lock.json index 919ed175033..95f69ce683b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -4730,6 +4730,7 @@ "cpu": [ "arm64" ], + "dev": true, "license": "MIT", "optional": true, "os": [ @@ -4750,6 +4751,7 @@ "cpu": [ "arm64" ], + "dev": true, "license": "MIT", "optional": true, "os": [ @@ -4770,6 +4772,7 @@ "cpu": [ "x64" ], + "dev": true, "license": "MIT", "optional": true, "os": [ @@ -4790,6 +4793,7 @@ "cpu": [ "x64" ], + "dev": true, "license": "MIT", "optional": true, "os": [ @@ -4810,6 +4814,7 @@ "cpu": [ "arm" ], + "dev": true, "license": "MIT", "optional": true, "os": [ @@ -4830,6 +4835,7 @@ "cpu": [ "arm" ], + "dev": true, "license": "MIT", "optional": true, "os": [ @@ -4850,6 +4856,7 @@ "cpu": [ "arm64" ], + "dev": true, "license": "MIT", "optional": true, "os": [ @@ -4870,6 +4877,7 @@ "cpu": [ "arm64" ], + "dev": true, "license": "MIT", "optional": true, "os": [ @@ -4890,6 +4898,7 @@ "cpu": [ "x64" ], + "dev": true, "license": "MIT", "optional": true, "os": [ @@ -4910,6 +4919,7 @@ "cpu": [ "x64" ], + "dev": true, "license": "MIT", "optional": true, "os": [ @@ -4930,6 +4940,7 @@ "cpu": [ "arm64" ], + "dev": true, "license": "MIT", "optional": true, "os": [ @@ -4950,6 +4961,7 @@ "cpu": [ "ia32" ], + "dev": true, "license": "MIT", "optional": true, "os": [ @@ -4970,6 +4982,7 @@ "cpu": [ "x64" ], + "dev": true, "license": "MIT", "optional": true, "os": [ @@ -22372,8 +22385,10 @@ "version": "3.6.0", "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz", "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==", - "extraneous": true, + "dev": true, "license": "MIT", + "optional": true, + "peer": true, "dependencies": { "anymatch": "~3.1.2", "braces": "~3.0.2", @@ -22425,8 +22440,10 @@ "version": "5.1.2", "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz", "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==", - "extraneous": true, + "dev": true, "license": "ISC", + "optional": true, + "peer": true, "dependencies": { "is-glob": "^4.0.1" }, @@ -22474,8 +22491,10 @@ "version": "2.3.2", "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.2.tgz", "integrity": "sha512-V7+vQEJ06Z+c5tSye8S+nHUfI51xoXIXjHQ99cQtKUkQqqO1kO/KCJUfZXuB47h/YBlDhah2H3hdUGXn8ie0oA==", - "extraneous": true, + "dev": true, "license": "MIT", + "optional": true, + "peer": true, "engines": { "node": ">=8.6" }, @@ -22487,8 +22506,10 @@ "version": "3.6.0", "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz", "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==", - "extraneous": true, + "dev": true, "license": "MIT", + "optional": true, + "peer": true, "dependencies": { "picomatch": "^2.2.1" }, diff --git a/projects/igniteui-angular-elements/src/analyzer/config.template.ts b/projects/igniteui-angular-elements/src/analyzer/config.template.ts index ecde0f764ba..5940c4e5bd5 100644 --- a/projects/igniteui-angular-elements/src/analyzer/config.template.ts +++ b/projects/igniteui-angular-elements/src/analyzer/config.template.ts @@ -1,8 +1,8 @@ import { IgxQueryBuilderComponent } from '../../../igniteui-angular/query-builder'; -import { IgxGridComponent } from '../../../igniteui-angular/grids/grid'; -import { IgxHierarchicalGridComponent } from '../../../igniteui-angular/grids/hierarchical-grid'; import { IgxPivotDataSelectorComponent, IgxPivotGridComponent } from '../../../igniteui-angular/grids/pivot-grid'; -import { IgxTreeGridComponent } from '../../../igniteui-angular/grids/tree-grid'; +import { IgxGridComponent } from '../lib/grids/grid.component'; +import { IgxHierarchicalGridComponent } from '../lib/grids/hierarchical-grid.component'; +import { IgxTreeGridComponent } from '../lib/grids/tree-grid.component'; export const registerComponents = [ IgxGridComponent, diff --git a/projects/igniteui-angular-elements/src/analyzer/elements.config.ts b/projects/igniteui-angular-elements/src/analyzer/elements.config.ts index 50b8d95295b..9ec24bcf15e 100644 --- a/projects/igniteui-angular-elements/src/analyzer/elements.config.ts +++ b/projects/igniteui-angular-elements/src/analyzer/elements.config.ts @@ -1,11 +1,11 @@ import { IgxQueryBuilderComponent } from "../../../igniteui-angular/query-builder"; -import { IgxGridComponent } from "../../../igniteui-angular/grids/grid"; -import { IgxHierarchicalGridComponent } from "../../../igniteui-angular/grids/hierarchical-grid"; import { IgxPivotDataSelectorComponent, IgxPivotGridComponent, } from "../../../igniteui-angular/grids/pivot-grid"; -import { IgxTreeGridComponent } from "../../../igniteui-angular/grids/tree-grid"; +import { IgxGridComponent } from "../lib/grids/grid.component"; +import { IgxHierarchicalGridComponent } from "../lib/grids/hierarchical-grid.component"; +import { IgxTreeGridComponent } from "../lib/grids/tree-grid.component"; import { IgxActionStripComponent } from "../../../igniteui-angular/action-strip/src/action-strip/action-strip.component"; import { IgxActionStripToken } from "../../../igniteui-angular/core/src/grid-column-actions/token"; import { IgxPaginatorComponent } from "../../../igniteui-angular/paginator/src/paginator/paginator.component"; @@ -25,7 +25,7 @@ import { IgxToolbarToken } from "../../../igniteui-angular/grids/core/src/toolba import { IgxGridToolbarExporterComponent } from "../../../igniteui-angular/grids/core/src/toolbar/grid-toolbar-exporter.component"; import { IgxGridToolbarHidingComponent } from "../../../igniteui-angular/grids/core/src/toolbar/grid-toolbar-hiding.component"; import { IgxGridToolbarPinningComponent } from "../../../igniteui-angular/grids/core/src/toolbar/grid-toolbar-pinning.component"; -import { IgxRowIslandComponent } from "../../../igniteui-angular/grids/hierarchical-grid/src/row-island.component"; +import { IgxRowIslandComponent } from "../lib/grids/row-island.component"; import { IgxGridStateComponent } from "../lib/state.component"; export const registerComponents = [ @@ -44,8 +44,8 @@ export var registerConfig = [ selector: "igc-action-strip", parents: [ IgxGridComponent, - IgxTreeGridComponent, IgxHierarchicalGridComponent, + IgxTreeGridComponent, IgxRowIslandComponent, ], contentQueries: [ @@ -65,8 +65,8 @@ export var registerConfig = [ selector: "igc-column", parents: [ IgxGridComponent, - IgxTreeGridComponent, IgxHierarchicalGridComponent, + IgxTreeGridComponent, IgxPivotGridComponent, IgxRowIslandComponent, IgxColumnGroupComponent, @@ -122,8 +122,8 @@ export var registerConfig = [ selector: "igc-column-group", parents: [ IgxGridComponent, - IgxTreeGridComponent, IgxHierarchicalGridComponent, + IgxTreeGridComponent, IgxColumnGroupComponent, IgxRowIslandComponent, ], @@ -241,16 +241,17 @@ export var registerConfig = [ parents: [], contentQueries: [ { - property: "columnList", - childType: IgxColumnComponent, + property: "actionStripComponents", + childType: IgxActionStripToken, isQueryList: true, - descendants: true, }, { - property: "actionStripComponents", - childType: IgxActionStripToken, + property: "columnList", + childType: IgxColumnComponent, isQueryList: true, + descendants: true, }, + { property: "actionStripComponent", childType: IgxActionStripToken }, { property: "toolbar", childType: IgxToolbarToken, isQueryList: true }, { property: "paginationComponents", @@ -465,8 +466,8 @@ export var registerConfig = [ selector: "igc-grid-toolbar", parents: [ IgxGridComponent, - IgxTreeGridComponent, IgxHierarchicalGridComponent, + IgxTreeGridComponent, IgxPivotGridComponent, ], contentQueries: [ @@ -531,15 +532,15 @@ export var registerConfig = [ descendants: true, }, { - property: "paginatorList", - childType: IgxPaginatorToken, + property: "actionStripComponents", + childType: IgxActionStripToken, isQueryList: true, - descendants: true, }, { - property: "actionStripComponents", - childType: IgxActionStripToken, + property: "paginatorList", + childType: IgxPaginatorToken, isQueryList: true, + descendants: true, }, { property: "columnList", @@ -547,6 +548,7 @@ export var registerConfig = [ isQueryList: true, descendants: true, }, + { property: "actionStripComponent", childType: IgxActionStripToken }, { property: "toolbar", childType: IgxToolbarToken, isQueryList: true }, { property: "paginationComponents", @@ -694,6 +696,7 @@ export var registerConfig = [ selector: "igc-paginator", parents: [ IgxGridComponent, + IgxHierarchicalGridComponent, IgxTreeGridComponent, IgxHierarchicalGridComponent, IgxPivotGridComponent, @@ -873,23 +876,23 @@ export var registerConfig = [ parents: [IgxHierarchicalGridComponent, IgxRowIslandComponent], contentQueries: [ { - property: "children", + property: "childLayoutList", childType: IgxRowIslandComponent, isQueryList: true, }, { - property: "childLayoutList", + property: "children", childType: IgxRowIslandComponent, isQueryList: true, }, { - property: "childColumns", - childType: IgxColumnComponent, + property: "actionStripComponents", + childType: IgxActionStripToken, isQueryList: true, }, { - property: "actionStripComponents", - childType: IgxActionStripToken, + property: "childColumns", + childType: IgxColumnComponent, isQueryList: true, }, { @@ -898,8 +901,10 @@ export var registerConfig = [ isQueryList: true, descendants: true, }, + { property: "actionStripComponent", childType: IgxActionStripToken }, ], additionalProperties: [ + { name: "childLayoutList", writable: true }, { name: "rowIslandAPI", writable: true }, { name: "gridAPI", writable: true }, { name: "navigation", writable: true }, @@ -1022,16 +1027,17 @@ export var registerConfig = [ parents: [], contentQueries: [ { - property: "columnList", - childType: IgxColumnComponent, + property: "actionStripComponents", + childType: IgxActionStripToken, isQueryList: true, - descendants: true, }, { - property: "actionStripComponents", - childType: IgxActionStripToken, + property: "columnList", + childType: IgxColumnComponent, isQueryList: true, + descendants: true, }, + { property: "actionStripComponent", childType: IgxActionStripToken }, { property: "toolbar", childType: IgxToolbarToken, isQueryList: true }, { property: "paginationComponents", diff --git a/projects/igniteui-angular-elements/src/app/components.ts b/projects/igniteui-angular-elements/src/app/components.ts index 3b853b250b1..bf03a9a84c0 100644 --- a/projects/igniteui-angular-elements/src/app/components.ts +++ b/projects/igniteui-angular-elements/src/app/components.ts @@ -2,17 +2,18 @@ import { NgElement, WithProperties } from '@angular/elements'; import { registerConfig } from "../analyzer/elements.config"; import { createIgxCustomElement, withRegister } from './create-custom-element'; import { IgxGridStateComponent } from '../lib/state.component'; +import { IgxGridComponent } from '../lib/grids/grid.component'; import { IgxIconBroadcastService } from '../lib/icon.broadcast.service'; import { injector } from '../utils/injector-ref'; import { registerComponent } from '../utils/register'; import { IgxPaginatorComponent } from 'igniteui-angular/paginator'; import { IgxActionStripComponent } from 'igniteui-angular/action-strip'; -import { IgxGridComponent } from 'igniteui-angular/grids/grid'; -import { IgxTreeGridComponent } from 'igniteui-angular/grids/tree-grid'; -import { IgxHierarchicalGridComponent, IgxRowIslandComponent } from 'igniteui-angular/grids/hierarchical-grid'; import { IgxPivotDataSelectorComponent, IgxPivotGridComponent } from 'igniteui-angular/grids/pivot-grid'; import { GridType, IgxColumnComponent, IgxColumnGroupComponent, IgxColumnLayoutComponent, IgxGridEditingActionsComponent, IgxGridPinningActionsComponent, IgxGridToolbarActionsComponent, IgxGridToolbarAdvancedFilteringComponent, IgxGridToolbarComponent, IgxGridToolbarExporterComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent, IgxGridToolbarTitleComponent } from 'igniteui-angular/grids/core'; import { IgxQueryBuilderComponent, IgxQueryBuilderHeaderComponent } from 'igniteui-angular/query-builder'; +import { IgxHierarchicalGridComponent } from '../lib/grids/hierarchical-grid.component'; +import { IgxRowIslandComponent } from '../lib/grids/row-island.component'; +import { IgxTreeGridComponent } from '../lib/grids/tree-grid.component'; // force-create icon service, TODO: move to initializer or register/define mechanic to avoid side-effect? const _iconBroadcast: IgxIconBroadcastService = injector.get(IgxIconBroadcastService); diff --git a/projects/igniteui-angular-elements/src/index.html b/projects/igniteui-angular-elements/src/index.html index 8985cbd96a1..b5ef372b9a0 100644 --- a/projects/igniteui-angular-elements/src/index.html +++ b/projects/igniteui-angular-elements/src/index.html @@ -527,6 +527,9 @@

Flat Grid (MRL column layout)

`; + virtualMachinesRowIsland.addEventListener('columnsAutogenerated', (e) => { + console.log('columns autogenerated for VirtualMachinesRowIsland', e); + }); diff --git a/projects/igniteui-angular-elements/src/lib/grids/events.ts b/projects/igniteui-angular-elements/src/lib/grids/events.ts new file mode 100644 index 00000000000..e08a89fb913 --- /dev/null +++ b/projects/igniteui-angular-elements/src/lib/grids/events.ts @@ -0,0 +1,7 @@ +import { ColumnType, IBaseEventArgs } from 'igniteui-angular/core'; + +export interface IColumnsAutoGeneratedEventArgs extends IBaseEventArgs { + /* blazorTreatAsCollection */ + /* blazorCollectionName: ColumnCollection */ + columns?: ColumnType[] +} diff --git a/projects/igniteui-angular-elements/src/lib/grids/grid.component.ts b/projects/igniteui-angular-elements/src/lib/grids/grid.component.ts new file mode 100644 index 00000000000..c8ff0a578b0 --- /dev/null +++ b/projects/igniteui-angular-elements/src/lib/grids/grid.component.ts @@ -0,0 +1,167 @@ +import { + Component, ChangeDetectionStrategy, Output, EventEmitter, + QueryList, ContentChildren, CUSTOM_ELEMENTS_SCHEMA +} from '@angular/core'; +import { NgTemplateOutlet, NgClass, NgStyle } from '@angular/common'; +import { + IGX_GRID_BASE, + IGX_GRID_SERVICE_BASE, + IgxColumnMovingDropDirective, + IgxColumnResizingService, + IgxFilteringService, + IgxGridAddRowPipe, + IgxGridBodyDirective, + IgxGridColumnResizerComponent, + IgxGridCRUDService, + IgxGridDragSelectDirective, + IgxGridHeaderRowComponent, + IgxGridNavigationService, + IgxGridRowClassesPipe, + IgxGridRowPinningPipe, + IgxGridRowStylesPipe, + IgxGridSelectionService, + IgxGridSummaryService, + IgxGridTransactionPipe, + IgxGridValidationService, + IgxHasVisibleColumnsPipe, + IgxRowEditTabStopDirective, + IgxStringReplacePipe, + IgxSummaryDataPipe, + IgxSummaryRowComponent, +} from 'igniteui-angular/grids/core'; +import { IgxGridAPIService } from 'igniteui-angular/grids/grid/src/grid-api.service'; +import { IgxGridGroupByRowComponent } from 'igniteui-angular/grids/grid/src/groupby-row.component'; +import { IgxGridGroupByAreaComponent } from 'igniteui-angular/grids/grid/src/grouping/grid-group-by-area.component'; +import { IgxActionStripToken, IgxOverlayOutletDirective } from 'igniteui-angular/core'; +import { IgxGridDetailsPipe } from 'igniteui-angular/grids/grid/src/grid.details.pipe'; +import { IgxGridSummaryPipe } from 'igniteui-angular/grids/grid/src/grid.summary.pipe'; +import { IgxGridGroupingPipe, IgxGridPagingPipe, IgxGridSortingPipe, IgxGridFilteringPipe, IgxGridCellMergePipe, IgxGridUnmergeActivePipe } from 'igniteui-angular/grids/grid/src/grid.pipes'; +import { IgxGridRowComponent } from 'igniteui-angular/grids/grid/src/grid-row.component'; +import { IgxButtonDirective, IgxForOfScrollSyncService, IgxForOfSyncService, IgxGridForOfDirective, IgxRippleDirective, IgxScrollInertiaDirective, IgxTemplateOutletDirective, IgxToggleDirective } from 'igniteui-angular/directives'; +import { IgxCircularProgressBarComponent } from 'igniteui-angular/progressbar'; +import { IgxSnackbarComponent } from 'igniteui-angular/snackbar'; +import { IgxIconComponent } from 'igniteui-angular/icon'; +import { IColumnsAutoGeneratedEventArgs } from './events'; +import { IgxGridComponent as IgxGrid } from 'igniteui-angular/grids/grid/src/grid.component'; +import { takeUntil } from 'rxjs'; + +/* blazorAdditionalDependency: Column */ +/* blazorAdditionalDependency: ColumnGroup */ +/* blazorAdditionalDependency: ColumnLayout */ +/* blazorAdditionalDependency: GridToolbar */ +/* blazorAdditionalDependency: GridToolbarActions */ +/* blazorAdditionalDependency: GridToolbarTitle */ +/* blazorAdditionalDependency: GridToolbarAdvancedFiltering */ +/* blazorAdditionalDependency: GridToolbarExporter */ +/* blazorAdditionalDependency: GridToolbarHiding */ +/* blazorAdditionalDependency: GridToolbarPinning */ +/* blazorAdditionalDependency: ActionStrip */ +/* blazorAdditionalDependency: GridActionsBaseDirective */ +/* blazorAdditionalDependency: GridEditingActions */ +/* blazorAdditionalDependency: GridPinningActions */ +/* blazorIndirectRender */ +/** + * Grid provides a way to present and manipulate tabular data. + * + * @igxModule IgxGridModule + * @igxGroup Grids & Lists + * @igxKeywords grid, table + * @igxTheme igx-grid-theme + * @remarks + * The Ignite UI Grid is used for presenting and manipulating tabular data in the simplest way possible. Once data + * has been bound, it can be manipulated through filtering, sorting & editing operations. + */ +@Component({ + changeDetection: ChangeDetectionStrategy.OnPush, + preserveWhitespaces: false, + providers: [ + IgxGridCRUDService, + IgxGridNavigationService, + IgxGridSummaryService, + IgxGridSelectionService, + IgxGridValidationService, + { provide: IGX_GRID_SERVICE_BASE, useClass: IgxGridAPIService }, + { provide: IGX_GRID_BASE, useExisting: IgxGridComponent }, + IgxFilteringService, + IgxColumnResizingService, + IgxForOfSyncService, + IgxForOfScrollSyncService, + ], + imports: [ + NgClass, + NgStyle, + NgTemplateOutlet, + IgxGridGroupByAreaComponent, + IgxGridHeaderRowComponent, + IgxGridBodyDirective, + IgxGridDragSelectDirective, + IgxColumnMovingDropDirective, + IgxGridForOfDirective, + IgxTemplateOutletDirective, + IgxGridRowComponent, + IgxGridGroupByRowComponent, + IgxSummaryRowComponent, + IgxOverlayOutletDirective, + IgxToggleDirective, + IgxCircularProgressBarComponent, + IgxSnackbarComponent, + IgxButtonDirective, + IgxRippleDirective, + IgxIconComponent, + IgxRowEditTabStopDirective, + IgxGridColumnResizerComponent, + IgxGridTransactionPipe, + IgxHasVisibleColumnsPipe, + IgxGridRowPinningPipe, + IgxGridAddRowPipe, + IgxGridRowClassesPipe, + IgxGridRowStylesPipe, + IgxSummaryDataPipe, + IgxGridGroupingPipe, + IgxGridPagingPipe, + IgxGridSortingPipe, + IgxGridFilteringPipe, + IgxGridSummaryPipe, + IgxGridDetailsPipe, + IgxStringReplacePipe, + IgxGridCellMergePipe, + IgxGridUnmergeActivePipe, + IgxScrollInertiaDirective + ], + selector: 'igx-grid', + templateUrl: '../../../../igniteui-angular/grids/grid/src/grid.component.html', + schemas: [CUSTOM_ELEMENTS_SCHEMA] +}) +export class IgxGridComponent extends IgxGrid { + + constructor() { + super(); + this.selectionService.selectedRowsChange.pipe(takeUntil(this.destroy$)).subscribe((args: any[]) => { + this.selectedRowsChange.emit(args); + }); + } + + @Output() + public columnsAutogenerated = new EventEmitter(); + + /** + * Emitted when content children are resolved and collections in grid are updated. + */ + @Output() + public childrenResolved = new EventEmitter(); + + /** @hidden @internal */ + /* blazorInclude */ + /* contentChildren */ + /* blazorTreatAsCollection */ + /* blazorCollectionName: ActionStripCollection */ + /* blazorCollectionItemName: ActionStrip */ + /* ngQueryListName: actionStripComponents */ + @ContentChildren(IgxActionStripToken) + public override actionStripComponents: QueryList; + + protected override autogenerateColumns() { + super.autogenerateColumns(); + this.columnsAutogenerated.emit({ columns: this._autoGeneratedCols }); + } +} diff --git a/projects/igniteui-angular-elements/src/lib/grids/hierarchical-grid.component.ts b/projects/igniteui-angular-elements/src/lib/grids/hierarchical-grid.component.ts new file mode 100644 index 00000000000..17e728b54df --- /dev/null +++ b/projects/igniteui-angular-elements/src/lib/grids/hierarchical-grid.component.ts @@ -0,0 +1,245 @@ + +import { ChangeDetectionStrategy, Component, ContentChildren, CUSTOM_ELEMENTS_SCHEMA, EventEmitter, Output, QueryList, reflectComponentType, ViewChildren } from '@angular/core'; +import { NgClass, NgTemplateOutlet, NgStyle } from '@angular/common'; + +import { IgxHierarchicalGridAPIService } from 'igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid-api.service'; +import { IgxFilteringService, IgxGridNavigationService, IgxGridValidationService } from 'igniteui-angular/grids/core'; +import { IgxHierarchicalGridNavigationService } from 'igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid-navigation.service'; +import { IgxGridSummaryService } from 'igniteui-angular/grids/core'; +import { takeUntil } from 'rxjs/operators'; +import { IGX_GRID_BASE, IGX_GRID_SERVICE_BASE } from 'igniteui-angular/grids/core'; +import { IgxRowIslandAPIService } from 'igniteui-angular/grids/hierarchical-grid/src/row-island-api.service'; +import { IgxGridCRUDService } from 'igniteui-angular/grids/core'; +import { IgxColumnResizingService } from 'igniteui-angular/grids/core'; +import { IgxGridHierarchicalPipe, IgxGridHierarchicalPagingPipe } from 'igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.pipes'; +import { IgxSummaryDataPipe } from 'igniteui-angular/grids/core'; +import { IgxGridTransactionPipe, IgxHasVisibleColumnsPipe, IgxGridRowPinningPipe, IgxGridAddRowPipe, IgxGridRowClassesPipe, IgxGridRowStylesPipe, IgxStringReplacePipe } from 'igniteui-angular/grids/core'; +import { IgxGridColumnResizerComponent } from 'igniteui-angular/grids/core'; +import { IgxRowEditTabStopDirective } from 'igniteui-angular/grids/core'; +import { IgxSummaryRowComponent } from 'igniteui-angular/grids/core'; +import { IgxHierarchicalRowComponent } from 'igniteui-angular/grids/hierarchical-grid/src/hierarchical-row.component'; +import { IgxColumnMovingDropDirective } from 'igniteui-angular/grids/core'; +import { IgxGridDragSelectDirective } from 'igniteui-angular/grids/core'; +import { IgxGridBodyDirective } from 'igniteui-angular/grids/core'; +import { IgxGridHeaderRowComponent } from 'igniteui-angular/grids/core'; +import { IgxGridSelectionService } from 'igniteui-angular/grids/core'; +import { IgxButtonDirective, IgxForOfScrollSyncService, IgxForOfSyncService, IgxGridForOfDirective, IgxRippleDirective, IgxScrollInertiaDirective, IgxTemplateOutletDirective, IgxToggleDirective } from 'igniteui-angular/directives'; +import { IgxCircularProgressBarComponent } from 'igniteui-angular/progressbar'; +import { IgxSnackbarComponent } from 'igniteui-angular/snackbar'; +import { IgxIconComponent } from 'igniteui-angular/icon'; +import { IgxActionStripToken, IgxOverlayOutletDirective } from 'igniteui-angular/core'; +import { IgxGridCellMergePipe, IgxGridFilteringPipe, IgxGridSortingPipe, IgxGridUnmergeActivePipe } from 'igniteui-angular/grids/grid'; +import { IgxChildGridRowComponent as IgxChildGridRow, IgxHierarchicalGridComponent as IgxHierarchicalGrid } from 'igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.component'; +import { IgxRowIslandComponent } from './row-island.component'; +import { IColumnsAutoGeneratedEventArgs } from './events'; + + +/** + * @hidden @internal + */ +@Component({ + changeDetection: ChangeDetectionStrategy.OnPush, + selector: 'igx-child-grid-row', + templateUrl: '../../../../igniteui-angular/grids/hierarchical-grid/src/child-grid-row.component.html', + imports: [NgClass] +}) +export class IgxChildGridRowComponent extends IgxChildGridRow { + + /** + * @hidden + */ + public override hGrid: IgxHierarchicalGridComponent; + + /** + * @hidden + */ + public override ngOnInit() { + const ref = this.container.createComponent(IgxHierarchicalGridComponent, { injector: this.container.injector }); + this.hGrid = ref.instance; + this.hGrid.setDataInternal(this.data.childGridsData[this.layout.key]); + this.hGrid.nativeElement["__componentRef"] = ref; + this.layout.layoutChange.subscribe((ch) => { + this._handleLayoutChanges(ch); + }); + const changes = this.layout.initialChanges; + changes.forEach(change => { + this._handleLayoutChanges(change); + }); + this.hGrid.parent = this.parentGrid; + this.hGrid.parentIsland = this.layout; + this.hGrid.childRow = this; + // handler logic that re-emits hgrid events on the row island + this.setupEventEmitters(); + this.layout.gridCreated.emit({ + owner: this.layout, + parentID: this.data.rowID, + grid: this.hGrid, + parentRowData: this.data.parentRowData, + }); + } + + protected override setupEventEmitters() { + const destructor = takeUntil(this.hGrid.destroy$); + // use wc type so that it includes elements specific events: childrenResolved, columnsAutogenerated, etc. + const mirror = reflectComponentType(IgxHierarchicalGridComponent); + // exclude outputs related to two-way binding functionality + const inputNames = mirror.inputs.map(input => input.propName); + const outputs = mirror.outputs.filter(o => { + const matchingInputPropName = o.propName.slice(0, o.propName.indexOf('Change')); + return inputNames.indexOf(matchingInputPropName) === -1; + }); + + // TODO: Skip the `rendered` output. Rendered should be called once per grid. + outputs.filter(o => o.propName !== 'rendered').forEach(output => { + if (this.hGrid[output.propName]) { + this.hGrid[output.propName].pipe(destructor).subscribe((args) => { + if (!args) { + args = {}; + } + args.owner = this.hGrid; + this.layout[output.propName].emit(args); + }); + } + }); + } + +} + +/* blazorAdditionalDependency: Column */ +/* blazorAdditionalDependency: ColumnGroup */ +/* blazorAdditionalDependency: ColumnLayout */ +/* blazorAdditionalDependency: GridToolbar */ +/* blazorAdditionalDependency: GridToolbarActions */ +/* blazorAdditionalDependency: GridToolbarTitle */ +/* blazorAdditionalDependency: GridToolbarAdvancedFiltering */ +/* blazorAdditionalDependency: GridToolbarExporter */ +/* blazorAdditionalDependency: GridToolbarHiding */ +/* blazorAdditionalDependency: GridToolbarPinning */ +/* blazorAdditionalDependency: ActionStrip */ +/* blazorAdditionalDependency: GridActionsBaseDirective */ +/* blazorAdditionalDependency: GridEditingActions */ +/* blazorAdditionalDependency: GridPinningActions */ +/* blazorAdditionalDependency: RowIsland */ +/* blazorIndirectRender */ +/** + * Hierarchical grid + * + * @igxModule IgxHierarchicalGridModule + * + */ +@Component({ + changeDetection: ChangeDetectionStrategy.OnPush, + selector: 'igx-hierarchical-grid', + templateUrl: '../../../../igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.component.html', + providers: [ + IgxGridCRUDService, + IgxGridValidationService, + IgxGridSelectionService, + { provide: IGX_GRID_SERVICE_BASE, useClass: IgxHierarchicalGridAPIService }, + { provide: IGX_GRID_BASE, useExisting: IgxHierarchicalGridComponent }, + IgxGridSummaryService, + IgxFilteringService, + IgxGridNavigationService, + IgxHierarchicalGridNavigationService, + IgxColumnResizingService, + IgxForOfSyncService, + IgxForOfScrollSyncService, + IgxRowIslandAPIService + ], + imports: [ + NgClass, + NgTemplateOutlet, + NgStyle, + IgxGridHeaderRowComponent, + IgxGridBodyDirective, + IgxGridDragSelectDirective, + IgxColumnMovingDropDirective, + IgxGridForOfDirective, + IgxTemplateOutletDirective, + IgxHierarchicalRowComponent, + IgxOverlayOutletDirective, + IgxToggleDirective, + IgxCircularProgressBarComponent, + IgxSnackbarComponent, + IgxSummaryRowComponent, + IgxButtonDirective, + IgxRippleDirective, + IgxIconComponent, + IgxRowEditTabStopDirective, + IgxGridColumnResizerComponent, + IgxChildGridRowComponent, + IgxGridSortingPipe, + IgxGridFilteringPipe, + IgxGridTransactionPipe, + IgxHasVisibleColumnsPipe, + IgxGridRowPinningPipe, + IgxGridAddRowPipe, + IgxGridRowClassesPipe, + IgxGridRowStylesPipe, + IgxSummaryDataPipe, + IgxGridHierarchicalPipe, + IgxGridHierarchicalPagingPipe, + IgxStringReplacePipe, + IgxGridCellMergePipe, + IgxScrollInertiaDirective, + IgxGridUnmergeActivePipe + ], + schemas: [CUSTOM_ELEMENTS_SCHEMA] +}) +export class IgxHierarchicalGridComponent extends IgxHierarchicalGrid { + + constructor() { + super(); + this.selectionService.selectedRowsChange.pipe(takeUntil(this.destroy$)).subscribe((args: any[]) => { + this.selectedRowsChange.emit(args); + }); + } + + /** + * @hidden + */ + @ViewChildren(IgxChildGridRowComponent) + public override hierarchicalRows: QueryList; + + /** + * @hidden + * @internal + */ + /* blazorInclude */ + /* contentChildren */ + /* blazorTreatAsCollection */ + /* blazorCollectionName: RowIslandCollection */ + /* ngQueryListName: childLayoutList */ + @ContentChildren(IgxRowIslandComponent, { read: IgxRowIslandComponent, descendants: false }) + public override childLayoutList: QueryList; + + /** + * @hidden + */ + @ContentChildren(IgxRowIslandComponent, { read: IgxRowIslandComponent, descendants: true }) + public override allLayoutList: QueryList; + + @Output() + public columnsAutogenerated = new EventEmitter(); + + /** + * Emitted when content children are resolved and collections in grid are updated. + */ + @Output() + public childrenResolved = new EventEmitter(); + + /** @hidden @internal */ + /* blazorInclude */ + /* contentChildren */ + /* blazorTreatAsCollection */ + /* blazorCollectionName: ActionStripCollection */ + /* blazorCollectionItemName: ActionStrip */ + /* ngQueryListName: actionStripComponents */ + @ContentChildren(IgxActionStripToken) + public override actionStripComponents: QueryList; + + protected override autogenerateColumns() { + super.autogenerateColumns(); + this.columnsAutogenerated.emit({ columns: this._autoGeneratedCols }); + } +} diff --git a/projects/igniteui-angular-elements/src/lib/grids/row-island.component.ts b/projects/igniteui-angular-elements/src/lib/grids/row-island.component.ts new file mode 100644 index 00000000000..11d7e8eef3e --- /dev/null +++ b/projects/igniteui-angular-elements/src/lib/grids/row-island.component.ts @@ -0,0 +1,85 @@ +import { ChangeDetectionStrategy, Component, ContentChildren, EventEmitter, forwardRef, Input, Output, QueryList } from '@angular/core'; +import { IgxRowIslandComponent as IgxRowIsland } from 'igniteui-angular/grids/hierarchical-grid/src/row-island.component'; +import { IgxFilteringService } from 'igniteui-angular/grids/core'; +import { IgxRowIslandAPIService } from 'igniteui-angular/grids/hierarchical-grid/src/row-island-api.service'; +import { IgxGridSelectionService } from 'igniteui-angular/grids/core'; +import { IColumnsAutoGeneratedEventArgs } from './events'; +import { IgxActionStripToken } from 'igniteui-angular/core'; + +/* blazorCopyInheritedMembers */ +/* blazorElement */ +/* wcElementTag: igc-row-island */ +/* blazorIndirectRender */ +/* jsonAPIManageCollectionInMarkup */ +/* jsonAPIManageItemInMarkup */ +/* mustUseNGParentAnchor */ +/* additionalIdentifier: ChildDataKey */ +/* contentParent: RowIsland */ +/* contentParent: HierarchicalGrid */ +/** + * Row island + * + * @igxModule IgxHierarchicalGridModule + * @igxParent IgxHierarchicalGridComponent, IgxRowIslandComponent + * + */ +@Component({ + changeDetection: ChangeDetectionStrategy.OnPush, + selector: 'igx-row-island', + template: `
+ + +
`, + providers: [ + IgxRowIslandAPIService, + IgxFilteringService, + IgxGridSelectionService + ], + standalone: true +}) +export class IgxRowIslandComponent extends IgxRowIsland { + + /* contentChildren */ + /* blazorTreatAsCollection */ + /* blazorCollectionName: RowIslandCollection */ + /* ngQueryListName: childLayoutList */ + @ContentChildren(IgxRowIslandComponent, { read: IgxRowIslandComponent, descendants: false }) + public override childLayoutList: QueryList; + + /** + * @hidden + */ + @ContentChildren(forwardRef(() => IgxRowIslandComponent), { read: IgxRowIslandComponent, descendants: false }) + public override children = new QueryList(); + + @Output() + public columnsAutogenerated = new EventEmitter(); + + /** @hidden @internal */ + /* blazorInclude */ + // TODO(api-analyzer): Shouldn't need all tags to copy from base or hidden/internal due to include tag + /* contentChildren */ + /* blazorTreatAsCollection */ + /* blazorCollectionName: ActionStripCollection */ + /* blazorCollectionItemName: ActionStrip */ + /* ngQueryListName: actionStripComponents */ + @ContentChildren(IgxActionStripToken, { read: IgxActionStripToken, descendants: false }) + public override actionStripComponents: QueryList; + + protected override autogenerateColumns() { + super.autogenerateColumns(); + this.columnsAutogenerated.emit({ columns: this._autoGeneratedCols }); + } + + /** + * Sets the key of the row island by which child data would be taken from the row data if such is provided. + */ + @Input() + public get childDataKey() { + return this.key; + } + + public set childDataKey(value: string) { + this.key = value; + } +} diff --git a/projects/igniteui-angular-elements/src/lib/grids/tree-grid.component.ts b/projects/igniteui-angular-elements/src/lib/grids/tree-grid.component.ts new file mode 100644 index 00000000000..f058ddd0af2 --- /dev/null +++ b/projects/igniteui-angular-elements/src/lib/grids/tree-grid.component.ts @@ -0,0 +1,164 @@ +import { NgClass, NgStyle, NgTemplateOutlet } from '@angular/common'; +import { ChangeDetectionStrategy, Component, ContentChildren, CUSTOM_ELEMENTS_SCHEMA, EventEmitter, Output, QueryList } from '@angular/core'; +import { IgxTreeGridAPIService } from 'igniteui-angular/grids/tree-grid/src/tree-grid-api.service'; +import { IgxGridCellMergePipe, IgxGridUnmergeActivePipe } from 'igniteui-angular/grids/grid'; +import { + IGX_GRID_BASE, + IGX_GRID_SERVICE_BASE, + IgxColumnMovingDropDirective, + IgxColumnResizingService, + IgxFilteringService, + IgxGridBodyDirective, + IgxGridColumnResizerComponent, + IgxGridCRUDService, + IgxGridDragSelectDirective, + IgxGridHeaderRowComponent, + IgxGridNavigationService, + IgxGridRowClassesPipe, + IgxGridRowPinningPipe, + IgxGridRowStylesPipe, + IgxGridSelectionService, + IgxGridSummaryService, + IgxGridValidationService, + IgxHasVisibleColumnsPipe, + IgxRowEditTabStopDirective, + IgxStringReplacePipe, + IgxSummaryDataPipe, + IgxSummaryRowComponent, +} from 'igniteui-angular/grids/core'; +import { IgxTreeGridSelectionService } from 'igniteui-angular/grids/tree-grid/src/tree-grid-selection.service'; +import { IgxActionStripToken, IgxOverlayOutletDirective } from 'igniteui-angular/core'; +import { IgxTreeGridSummaryPipe } from 'igniteui-angular/grids/tree-grid/src/tree-grid.summary.pipe'; +import { IgxTreeGridFilteringPipe } from 'igniteui-angular/grids/tree-grid/src/tree-grid.filtering.pipe'; +import { IgxTreeGridHierarchizingPipe, IgxTreeGridFlatteningPipe, IgxTreeGridSortingPipe, IgxTreeGridPagingPipe, IgxTreeGridTransactionPipe, IgxTreeGridNormalizeRecordsPipe, IgxTreeGridAddRowPipe } from 'igniteui-angular/grids/tree-grid/src/tree-grid.pipes'; +import { IgxTreeGridRowComponent } from 'igniteui-angular/grids/tree-grid/src/tree-grid-row.component'; +import { IgxButtonDirective, IgxForOfScrollSyncService, IgxForOfSyncService, IgxGridForOfDirective, IgxRippleDirective, IgxScrollInertiaDirective, IgxTemplateOutletDirective, IgxToggleDirective } from 'igniteui-angular/directives'; +import { IgxCircularProgressBarComponent } from 'igniteui-angular/progressbar'; +import { IgxSnackbarComponent } from 'igniteui-angular/snackbar'; +import { IgxIconComponent } from 'igniteui-angular/icon'; +import { IgxTreeGridComponent as IgxTreeGrid } from 'igniteui-angular/grids/tree-grid/src/tree-grid.component'; +import { IColumnsAutoGeneratedEventArgs } from './events'; +import { takeUntil } from 'rxjs'; + +/* blazorAdditionalDependency: Column */ +/* blazorAdditionalDependency: ColumnGroup */ +/* blazorAdditionalDependency: ColumnLayout */ +/* blazorAdditionalDependency: GridToolbar */ +/* blazorAdditionalDependency: GridToolbarActions */ +/* blazorAdditionalDependency: GridToolbarTitle */ +/* blazorAdditionalDependency: GridToolbarAdvancedFiltering */ +/* blazorAdditionalDependency: GridToolbarExporter */ +/* blazorAdditionalDependency: GridToolbarHiding */ +/* blazorAdditionalDependency: GridToolbarPinning */ +/* blazorAdditionalDependency: ActionStrip */ +/* blazorAdditionalDependency: GridActionsBaseDirective */ +/* blazorAdditionalDependency: GridEditingActions */ +/* blazorAdditionalDependency: GridPinningActions */ +/* blazorIndirectRender */ +/** + * **Ignite UI for Angular Tree Grid** - + * [Documentation](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/grid) + * + * The Ignite UI Tree Grid displays and manipulates hierarchical data with consistent schema formatted as a table and + * provides features such as sorting, filtering, editing, column pinning, paging, column moving and hiding. + * + * Example: + * ```html + * + * + * + * + * + * ``` + */ +@Component({ + changeDetection: ChangeDetectionStrategy.OnPush, + selector: 'igx-tree-grid', + templateUrl: '../../../../igniteui-angular/grids/tree-grid/src/tree-grid.component.html', + providers: [ + IgxGridCRUDService, + IgxGridValidationService, + IgxGridSummaryService, + IgxGridNavigationService, + { provide: IgxGridSelectionService, useClass: IgxTreeGridSelectionService }, + { provide: IGX_GRID_SERVICE_BASE, useClass: IgxTreeGridAPIService }, + { provide: IGX_GRID_BASE, useExisting: IgxTreeGridComponent }, + IgxFilteringService, + IgxColumnResizingService, + IgxForOfSyncService, + IgxForOfScrollSyncService + ], + imports: [ + NgClass, + NgStyle, + NgTemplateOutlet, + IgxGridHeaderRowComponent, + IgxGridBodyDirective, + IgxGridDragSelectDirective, + IgxColumnMovingDropDirective, + IgxGridForOfDirective, + IgxTemplateOutletDirective, + IgxTreeGridRowComponent, + IgxSummaryRowComponent, + IgxOverlayOutletDirective, + IgxToggleDirective, + IgxCircularProgressBarComponent, + IgxSnackbarComponent, + IgxButtonDirective, + IgxRippleDirective, + IgxRowEditTabStopDirective, + IgxIconComponent, + IgxGridColumnResizerComponent, + IgxHasVisibleColumnsPipe, + IgxGridRowPinningPipe, + IgxGridRowClassesPipe, + IgxGridRowStylesPipe, + IgxSummaryDataPipe, + IgxTreeGridHierarchizingPipe, + IgxTreeGridFlatteningPipe, + IgxTreeGridSortingPipe, + IgxTreeGridFilteringPipe, + IgxTreeGridPagingPipe, + IgxTreeGridTransactionPipe, + IgxTreeGridSummaryPipe, + IgxTreeGridNormalizeRecordsPipe, + IgxTreeGridAddRowPipe, + IgxStringReplacePipe, + IgxGridCellMergePipe, + IgxScrollInertiaDirective, + IgxGridUnmergeActivePipe + ], + schemas: [CUSTOM_ELEMENTS_SCHEMA] +}) +export class IgxTreeGridComponent extends IgxTreeGrid { + constructor() { + super(); + this.selectionService.selectedRowsChange.pipe(takeUntil(this.destroy$)).subscribe((args: any[]) => { + this.selectedRowsChange.emit(args); + }); + } + + @Output() + public columnsAutogenerated = new EventEmitter(); + + /** + * Emitted when content children are resolved and collections in grid are updated. + */ + @Output() + public childrenResolved = new EventEmitter(); + + /** @hidden @internal */ + /* blazorInclude */ + /* contentChildren */ + /* blazorTreatAsCollection */ + /* blazorCollectionName: ActionStripCollection */ + /* blazorCollectionItemName: ActionStrip */ + /* ngQueryListName: actionStripComponents */ + @ContentChildren(IgxActionStripToken) + public override actionStripComponents: QueryList; + + protected override autogenerateColumns() { + super.autogenerateColumns(); + this.columnsAutogenerated.emit({ columns: this._autoGeneratedCols }); + } +} diff --git a/projects/igniteui-angular/action-strip/src/action-strip/action-strip.component.ts b/projects/igniteui-angular/action-strip/src/action-strip/action-strip.component.ts index d56215f99d8..ce8a22d23b4 100644 --- a/projects/igniteui-angular/action-strip/src/action-strip/action-strip.component.ts +++ b/projects/igniteui-angular/action-strip/src/action-strip/action-strip.component.ts @@ -65,7 +65,7 @@ export class IgxActionStripMenuItemDirective { * * @igxGroup Data Entry & Display * - * @igxParent IgxGridComponent, IgxTreeGridComponent, IgxHierarchicalGridComponent, IgxRowIslandComponent, * + * @igxParent IgxGridComponent, IgxHierarchicalGridComponent, IgxTreeGridComponent, IgxRowIslandComponent, * * * @remarks * The Ignite UI Action Strip is a container, overlaying its parent container, diff --git a/projects/igniteui-angular/grids/core/src/columns/column-group.component.ts b/projects/igniteui-angular/grids/core/src/columns/column-group.component.ts index 32899668f9f..669c4ee995b 100644 --- a/projects/igniteui-angular/grids/core/src/columns/column-group.component.ts +++ b/projects/igniteui-angular/grids/core/src/columns/column-group.component.ts @@ -24,7 +24,7 @@ import { CellType, IgxColumnTemplateContext } from '../common/grid.interface'; /** * **Ignite UI for Angular Column Group** * - * @igxParent IgxGridComponent, IgxTreeGridComponent, IgxHierarchicalGridComponent, IgxColumnGroupComponent, IgxRowIslandComponent + * @igxParent IgxGridComponent, IgxHierarchicalGridComponent, IgxTreeGridComponent, IgxColumnGroupComponent, IgxRowIslandComponent */ @Component({ changeDetection: ChangeDetectionStrategy.OnPush, diff --git a/projects/igniteui-angular/grids/core/src/columns/column.component.ts b/projects/igniteui-angular/grids/core/src/columns/column.component.ts index 81761595326..668f7d32222 100644 --- a/projects/igniteui-angular/grids/core/src/columns/column.component.ts +++ b/projects/igniteui-angular/grids/core/src/columns/column.component.ts @@ -45,7 +45,7 @@ const DEFAULT_DIGITS_INFO = '1.0-3'; * filtering & editing are enabled at the column level. You can also provide a template containing custom content inside * the column using `ng-template` which will be used for all cells within the column. * - * @igxParent IgxGridComponent, IgxTreeGridComponent, IgxHierarchicalGridComponent, IgxPivotGridComponent, IgxRowIslandComponent, IgxColumnGroupComponent, IgxColumnLayoutComponent + * @igxParent IgxGridComponent, IgxHierarchicalGridComponent, IgxTreeGridComponent, IgxPivotGridComponent, IgxRowIslandComponent, IgxColumnGroupComponent, IgxColumnLayoutComponent, */ @Component({ changeDetection: ChangeDetectionStrategy.OnPush, diff --git a/projects/igniteui-angular/grids/core/src/common/events.ts b/projects/igniteui-angular/grids/core/src/common/events.ts index f1e9b6d4d9c..40a7c1c6c0e 100644 --- a/projects/igniteui-angular/grids/core/src/common/events.ts +++ b/projects/igniteui-angular/grids/core/src/common/events.ts @@ -509,14 +509,6 @@ export interface ISortingEventArgs extends IBaseEventArgs, CancelableEventArgs { groupingExpressions?: IGroupingExpression | Array; } -/* blazorInclude */ -/** @hidden @internal */ -export interface IColumnsAutoGeneratedEventArgs extends IBaseEventArgs { - /* blazorTreatAsCollection */ - /* blazorCollectionName: ColumnCollection */ - columns?: ColumnType[] -} - /** * Represents event arguments related to filtering operations * The event is cancelable diff --git a/projects/igniteui-angular/grids/core/src/toolbar/grid-toolbar.component.ts b/projects/igniteui-angular/grids/core/src/toolbar/grid-toolbar.component.ts index 57ea58f5add..9b94dde5e1f 100644 --- a/projects/igniteui-angular/grids/core/src/toolbar/grid-toolbar.component.ts +++ b/projects/igniteui-angular/grids/core/src/toolbar/grid-toolbar.component.ts @@ -22,7 +22,7 @@ import { IgxIconService } from 'igniteui-angular/icon'; * Provides a context-aware container component for UI operations for the grid components. * * @igxModule IgxGridToolbarModule - * @igxParent IgxGridComponent, IgxTreeGridComponent, IgxHierarchicalGridComponent, IgxPivotGridComponent + * @igxParent IgxGridComponent, IgxHierarchicalGridComponent, IgxTreeGridComponent, IgxPivotGridComponent, * */ @Component({ diff --git a/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts b/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts index e83e4f0e266..5850cfa314e 100644 --- a/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts +++ b/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts @@ -108,7 +108,7 @@ import { IgxGridRowComponent } from './grid-row.component'; import { IgxGridGroupByAreaComponent } from './grouping/grid-group-by-area.component'; import { IgxPaginatorToken, type IgxPaginatorComponent } from 'igniteui-angular/paginator'; import { IgxSnackbarComponent } from 'igniteui-angular/snackbar'; -import { CharSeparatedValueData, DropPosition, FilterMode, getUUID, GridCellMergeMode, GridKeydownTargetType, GridPagingMode, GridSelectionMode, GridSelectionRange, GridServiceType, GridSummaryPosition, GridType, GridValidationTrigger, IActiveNode, IActiveNodeChangeEventArgs, ICellPosition, IClipboardOptions, IColumnMovingEndEventArgs, IColumnMovingEventArgs, IColumnMovingStartEventArgs, IColumnResizeEventArgs, IColumnsAutoGeneratedEventArgs, IColumnSelectionEventArgs, IColumnVisibilityChangedEventArgs, IColumnVisibilityChangingEventArgs, IFilteringEventArgs, IGridCellEventArgs, IGridClipboardEvent, IGridContextMenuEventArgs, IGridEditDoneEventArgs, IGridEditEventArgs, IGridFormGroupCreatedEventArgs, IGridKeydownEventArgs, IGridRowEventArgs, IGridScrollEventArgs, IGridToolbarExportEventArgs, IGridValidationStatusEventArgs, IGX_GRID_SERVICE_BASE, IgxAdvancedFilteringDialogComponent, IgxCell, IgxColumnComponent, IgxColumnGroupComponent, IgxColumnResizingService, IgxDragIndicatorIconDirective, IgxEditRow, IgxExcelStyleHeaderIconDirective, IgxExcelStyleLoadingValuesTemplateDirective, IgxFilteringService, IgxGridBodyDirective, IgxGridCellComponent, IgxGridColumnResizerComponent, IgxGridEmptyTemplateContext, IgxGridEmptyTemplateDirective, IgxGridExcelStyleFilteringComponent, IgxGridFilteringCellComponent, IgxGridFilteringRowComponent, IgxGridHeaderComponent, IgxGridHeaderGroupComponent, IgxGridHeaderRowComponent, IgxGridHeaderTemplateContext, IgxGridLoadingTemplateDirective, IgxGridNavigationService, IgxGridPinningActionsComponent, IgxGridRowDragGhostContext, IgxGridRowEditActionsTemplateContext, IgxGridRowEditTemplateContext, IgxGridRowEditTextTemplateContext, IgxGridRowTemplateContext, IgxGridSelectionService, IgxGridSummaryService, IgxGridTemplateContext, IgxGridToolbarComponent, IgxGridTransaction, IgxGridValidationService, IgxHeaderCollapsedIndicatorDirective, IgxHeaderExpandedIndicatorDirective, IgxHeadSelectorDirective, IgxHeadSelectorTemplateContext, IgxRowAddTextDirective, IgxRowCollapsedIndicatorDirective, IgxRowDirective, IgxRowDragGhostDirective, IgxRowEditActionsDirective, IgxRowEditTabStopDirective, IgxRowEditTemplateDirective, IgxRowEditTextDirective, IgxRowExpandedIndicatorDirective, IgxRowSelectorDirective, IgxRowSelectorTemplateContext, IgxSortAscendingHeaderIconDirective, IgxSortDescendingHeaderIconDirective, IgxSortHeaderIconDirective, IgxSummaryRowComponent, IgxToolbarToken, IPinColumnCancellableEventArgs, IPinColumnEventArgs, IPinningConfig, IPinRowEventArgs, IRowDataCancelableEventArgs, IRowDataEventArgs, IRowDragEndEventArgs, IRowDragStartEventArgs, IRowSelectionEventArgs, IRowToggleEventArgs, ISearchInfo, ISizeInfo, ISortingEventArgs, RowEditPositionStrategy, RowPinningPosition, RowType, WatchChanges } from 'igniteui-angular/grids/core'; +import { CharSeparatedValueData, DropPosition, FilterMode, getUUID, GridCellMergeMode, GridKeydownTargetType, GridPagingMode, GridSelectionMode, GridSelectionRange, GridServiceType, GridSummaryPosition, GridType, GridValidationTrigger, IActiveNode, IActiveNodeChangeEventArgs, ICellPosition, IClipboardOptions, IColumnMovingEndEventArgs, IColumnMovingEventArgs, IColumnMovingStartEventArgs, IColumnResizeEventArgs, IColumnSelectionEventArgs, IColumnVisibilityChangedEventArgs, IColumnVisibilityChangingEventArgs, IFilteringEventArgs, IGridCellEventArgs, IGridClipboardEvent, IGridContextMenuEventArgs, IGridEditDoneEventArgs, IGridEditEventArgs, IGridFormGroupCreatedEventArgs, IGridKeydownEventArgs, IGridRowEventArgs, IGridScrollEventArgs, IGridToolbarExportEventArgs, IGridValidationStatusEventArgs, IGX_GRID_SERVICE_BASE, IgxAdvancedFilteringDialogComponent, IgxCell, IgxColumnComponent, IgxColumnGroupComponent, IgxColumnResizingService, IgxDragIndicatorIconDirective, IgxEditRow, IgxExcelStyleHeaderIconDirective, IgxExcelStyleLoadingValuesTemplateDirective, IgxFilteringService, IgxGridBodyDirective, IgxGridCellComponent, IgxGridColumnResizerComponent, IgxGridEmptyTemplateContext, IgxGridEmptyTemplateDirective, IgxGridExcelStyleFilteringComponent, IgxGridFilteringCellComponent, IgxGridFilteringRowComponent, IgxGridHeaderComponent, IgxGridHeaderGroupComponent, IgxGridHeaderRowComponent, IgxGridHeaderTemplateContext, IgxGridLoadingTemplateDirective, IgxGridNavigationService, IgxGridPinningActionsComponent, IgxGridRowDragGhostContext, IgxGridRowEditActionsTemplateContext, IgxGridRowEditTemplateContext, IgxGridRowEditTextTemplateContext, IgxGridRowTemplateContext, IgxGridSelectionService, IgxGridSummaryService, IgxGridTemplateContext, IgxGridToolbarComponent, IgxGridTransaction, IgxGridValidationService, IgxHeaderCollapsedIndicatorDirective, IgxHeaderExpandedIndicatorDirective, IgxHeadSelectorDirective, IgxHeadSelectorTemplateContext, IgxRowAddTextDirective, IgxRowCollapsedIndicatorDirective, IgxRowDirective, IgxRowDragGhostDirective, IgxRowEditActionsDirective, IgxRowEditTabStopDirective, IgxRowEditTemplateDirective, IgxRowEditTextDirective, IgxRowExpandedIndicatorDirective, IgxRowSelectorDirective, IgxRowSelectorTemplateContext, IgxSortAscendingHeaderIconDirective, IgxSortDescendingHeaderIconDirective, IgxSortHeaderIconDirective, IgxSummaryRowComponent, IgxToolbarToken, IPinColumnCancellableEventArgs, IPinColumnEventArgs, IPinningConfig, IPinRowEventArgs, IRowDataCancelableEventArgs, IRowDataEventArgs, IRowDragEndEventArgs, IRowDragStartEventArgs, IRowSelectionEventArgs, IRowToggleEventArgs, ISearchInfo, ISizeInfo, ISortingEventArgs, RowEditPositionStrategy, RowPinningPosition, RowType, WatchChanges } from 'igniteui-angular/grids/core'; import { getCurrentI18n, getNumberFormatter, IResourceChangeEventArgs, } from 'igniteui-i18n-core'; import { I18N_FORMATTER } from 'igniteui-angular/core'; @@ -731,12 +731,6 @@ export abstract class IgxGridBaseDirective implements GridType, @Output() public columnInit = new EventEmitter(); - /* blazorInclude */ - /** - * @hidden @internal - */ - @Output() - public columnsAutogenerated = new EventEmitter(); /** * Emitted before sorting expressions are applied. @@ -1014,14 +1008,6 @@ export abstract class IgxGridBaseDirective implements GridType, @Output() public selectedRowsChange = new EventEmitter(); - /* blazorInclude */ - /** @hidden @internal */ - /** - * Emitted when content children are resolved and collections in grid are updated. - */ - @Output() - public childrenResolved = new EventEmitter(); - /** * Emitted when the expanded state of a row gets changed. * @@ -1172,19 +1158,13 @@ export abstract class IgxGridBaseDirective implements GridType, @ContentChildren(IgxColumnComponent, { read: IgxColumnComponent, descendants: true }) public columnList: QueryList = new QueryList(); - /* contentChildren */ - /* blazorInclude */ - /* blazorTreatAsCollection */ - /* blazorCollectionName: ActionStripCollection */ - /* blazorCollectionItemName: ActionStrip */ - /* ngQueryListName: actionStripComponents */ /** @hidden @internal */ - @ContentChildren(IgxActionStripToken) - protected actionStripComponents: QueryList; + @ContentChild(IgxActionStripToken) + protected actionStripComponent: IgxActionStripToken; /** @hidden @internal */ public get actionStrip() { - return this.actionStripComponents?.first; + return this.actionStripComponent; } /** @@ -1632,6 +1612,10 @@ export abstract class IgxGridBaseDirective implements GridType, return this._sortAscendingHeaderIconTemplate; } + /** @hidden @internal */ + @ContentChildren(IgxActionStripToken) + public actionStripComponents: QueryList; + /** * Sets a custom template that should be used when rendering a header sorting indicator when columns are sorted in asc order. *```html @@ -3514,9 +3498,6 @@ export abstract class IgxGridBaseDirective implements GridType, this._transactions = this.transactionFactory.create(TRANSACTION_TYPE.None); this._transactions.cloneStrategy = this.dataCloneStrategy; this.cdr.detach(); - this.selectionService.selectedRowsChange.pipe(takeUntil(this.destroy$)).subscribe((args: any[]) => { - this.selectedRowsChange.emit(args); - }); IgcTrialWatermark.register(); } @@ -7401,7 +7382,6 @@ export abstract class IgxGridBaseDirective implements GridType, this._autoGeneratedCols = columns; this.updateColumns(columns); - this.columnsAutogenerated.emit({ columns: this._autoGeneratedCols }); } protected generateDataFields(data: any[]): string[] { diff --git a/projects/igniteui-angular/grids/grid/src/grid.component.ts b/projects/igniteui-angular/grids/grid/src/grid.component.ts index 602070787a0..5395e287d0f 100644 --- a/projects/igniteui-angular/grids/grid/src/grid.component.ts +++ b/projects/igniteui-angular/grids/grid/src/grid.component.ts @@ -70,21 +70,11 @@ export interface IGroupingDoneEventArgs extends IBaseEventArgs { ungroupedColumns: Array | IgxColumnComponent; } -/* blazorAdditionalDependency: Column */ -/* blazorAdditionalDependency: ColumnGroup */ -/* blazorAdditionalDependency: ColumnLayout */ -/* blazorAdditionalDependency: GridToolbar */ -/* blazorAdditionalDependency: GridToolbarActions */ -/* blazorAdditionalDependency: GridToolbarTitle */ -/* blazorAdditionalDependency: GridToolbarAdvancedFiltering */ -/* blazorAdditionalDependency: GridToolbarExporter */ -/* blazorAdditionalDependency: GridToolbarHiding */ -/* blazorAdditionalDependency: GridToolbarPinning */ -/* blazorAdditionalDependency: ActionStrip */ -/* blazorAdditionalDependency: GridActionsBaseDirective */ -/* blazorAdditionalDependency: GridEditingActions */ -/* blazorAdditionalDependency: GridPinningActions */ -/* blazorIndirectRender */ +/* wcAlternateName: GridBase */ +/* blazorIndirectRender + blazorComponent + omitModule + wcSkipComponentSuffix */ /** * Grid provides a way to present and manipulate tabular data. * diff --git a/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.component.ts b/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.component.ts index 96951a552b1..2523a22b414 100644 --- a/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.component.ts +++ b/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.component.ts @@ -211,7 +211,7 @@ export class IgxChildGridRowComponent implements AfterViewInit, OnInit { this.hGrid.cdr.detectChanges(); } - private setupEventEmitters() { + protected setupEventEmitters() { const destructor = takeUntil(this.hGrid.destroy$); const mirror = reflectComponentType(IgxGridComponent); @@ -237,7 +237,7 @@ export class IgxChildGridRowComponent implements AfterViewInit, OnInit { } - private _handleLayoutChanges(changes: SimpleChanges) { + protected _handleLayoutChanges(changes: SimpleChanges) { for (const change in changes) { if (changes.hasOwnProperty(change)) { this.hGrid[change] = changes[change].currentValue; @@ -246,23 +246,11 @@ export class IgxChildGridRowComponent implements AfterViewInit, OnInit { } } - -/* blazorAdditionalDependency: Column */ -/* blazorAdditionalDependency: ColumnGroup */ -/* blazorAdditionalDependency: ColumnLayout */ -/* blazorAdditionalDependency: GridToolbar */ -/* blazorAdditionalDependency: GridToolbarActions */ -/* blazorAdditionalDependency: GridToolbarTitle */ -/* blazorAdditionalDependency: GridToolbarAdvancedFiltering */ -/* blazorAdditionalDependency: GridToolbarExporter */ -/* blazorAdditionalDependency: GridToolbarHiding */ -/* blazorAdditionalDependency: GridToolbarPinning */ -/* blazorAdditionalDependency: ActionStrip */ -/* blazorAdditionalDependency: GridActionsBaseDirective */ -/* blazorAdditionalDependency: GridEditingActions */ -/* blazorAdditionalDependency: GridPinningActions */ -/* blazorAdditionalDependency: RowIsland */ -/* blazorIndirectRender */ +/* wcAlternateName: HierarchicalGridBase */ +/* blazorIndirectRender + blazorComponent + omitModule + wcSkipComponentSuffix */ /** * Hierarchical grid * @@ -416,9 +404,6 @@ export class IgxHierarchicalGridComponent extends IgxHierarchicalGridBaseDirecti */ public childRow: IgxChildGridRowComponent; - @ContentChildren(IgxActionStripToken, { read: IgxActionStripToken, descendants: false }) - protected override actionStripComponents: QueryList; - /** @hidden @internal */ public override get actionStrip() { return this.parentIsland ? this.parentIsland.actionStrip : super.actionStrip; diff --git a/projects/igniteui-angular/grids/hierarchical-grid/src/row-island.component.ts b/projects/igniteui-angular/grids/hierarchical-grid/src/row-island.component.ts index 9f605bf95f1..44bbb538807 100644 --- a/projects/igniteui-angular/grids/hierarchical-grid/src/row-island.component.ts +++ b/projects/igniteui-angular/grids/hierarchical-grid/src/row-island.component.ts @@ -36,16 +36,11 @@ import { IGridCreatedEventArgs } from './events'; import { IgxPaginatorComponent, IgxPaginatorDirective } from 'igniteui-angular/paginator'; import { IForOfState } from 'igniteui-angular/directives'; -/* blazorCopyInheritedMembers */ -/* blazorElement */ -/* wcElementTag: igc-row-island */ -/* blazorIndirectRender */ -/* jsonAPIManageCollectionInMarkup */ -/* jsonAPIManageItemInMarkup */ -/* mustUseNGParentAnchor */ -/* additionalIdentifier: ChildDataKey */ -/* contentParent: RowIsland */ -/* contentParent: HierarchicalGrid */ +/* wcAlternateName: RowIslandBase */ +/* blazorIndirectRender + blazorComponent + omitModule + wcSkipComponentSuffix */ /** * Row island * @@ -56,10 +51,7 @@ import { IForOfState } from 'igniteui-angular/directives'; @Component({ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'igx-row-island', - template: `@if (platform.isElements) { - - - }`, + template: ``, providers: [ IgxRowIslandAPIService, IgxFilteringService, @@ -89,20 +81,6 @@ export class IgxRowIslandComponent extends IgxHierarchicalGridBaseDirective @Input() public key: string; - /* blazorInclude,wcInclude TODO: Move to Elements-only component */ - /** - * Sets the key of the row island by which child data would be taken from the row data if such is provided. - * @hidden @internal - */ - @Input() - public get childDataKey() { - return this.key; - } - /* blazorInclude,wcInclude */ - public set childDataKey(value: string) { - this.key = value; - } - /** * Gets/Sets the resource strings. * @@ -174,17 +152,6 @@ export class IgxRowIslandComponent extends IgxHierarchicalGridBaseDirective this._paginatorTemplate = template; } - // TODO(api-analyzer): Shouldn't need all tags to copy from base or hidden/internal due to include tag - /* contentChildren */ - /* blazorInclude */ - /* blazorTreatAsCollection */ - /* blazorCollectionName: ActionStripCollection */ - /* blazorCollectionItemName: ActionStrip */ - /* ngQueryListName: actionStripComponents */ - /** @hidden @internal */ - @ContentChildren(IgxActionStripToken, { read: IgxActionStripToken, descendants: false }) - protected override actionStripComponents: QueryList; - /** * @hidden */ diff --git a/projects/igniteui-angular/grids/tree-grid/src/tree-grid.component.ts b/projects/igniteui-angular/grids/tree-grid/src/tree-grid.component.ts index 111e589abb0..e98274769d5 100644 --- a/projects/igniteui-angular/grids/tree-grid/src/tree-grid.component.ts +++ b/projects/igniteui-angular/grids/tree-grid/src/tree-grid.component.ts @@ -54,21 +54,11 @@ import { IgxTreeGridGroupByAreaComponent } from './tree-grid-group-by-area.compo let NEXT_ID = 0; -/* blazorAdditionalDependency: Column */ -/* blazorAdditionalDependency: ColumnGroup */ -/* blazorAdditionalDependency: ColumnLayout */ -/* blazorAdditionalDependency: GridToolbar */ -/* blazorAdditionalDependency: GridToolbarActions */ -/* blazorAdditionalDependency: GridToolbarTitle */ -/* blazorAdditionalDependency: GridToolbarAdvancedFiltering */ -/* blazorAdditionalDependency: GridToolbarExporter */ -/* blazorAdditionalDependency: GridToolbarHiding */ -/* blazorAdditionalDependency: GridToolbarPinning */ -/* blazorAdditionalDependency: ActionStrip */ -/* blazorAdditionalDependency: GridActionsBaseDirective */ -/* blazorAdditionalDependency: GridEditingActions */ -/* blazorAdditionalDependency: GridPinningActions */ -/* blazorIndirectRender */ +/* wcAlternateName: TreeGridBase */ +/* blazorIndirectRender + blazorComponent + omitModule + wcSkipComponentSuffix */ /** * **Ignite UI for Angular Tree Grid** - * [Documentation](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/grid) diff --git a/projects/igniteui-angular/paginator/src/paginator/paginator.component.ts b/projects/igniteui-angular/paginator/src/paginator/paginator.component.ts index ea384e6f111..f9fd576d133 100644 --- a/projects/igniteui-angular/paginator/src/paginator/paginator.component.ts +++ b/projects/igniteui-angular/paginator/src/paginator/paginator.component.ts @@ -37,7 +37,7 @@ export class IgxPaginatorContentDirective { /* jsonAPIManageCollectionInMarkup */ /** * Paginator component description - * @igxParent IgxGridComponent, IgxTreeGridComponent, IgxHierarchicalGridComponent, IgxPivotGridComponent, * + * @igxParent IgxGridComponent, IgxHierarchicalGridComponent, IgxTreeGridComponent, IgxHierarchicalGridComponent, IgxPivotGridComponent, * */ @Component({ selector: 'igx-paginator',