diff --git a/projects/igniteui-angular-elements/src/analyzer/config.template.ts b/projects/igniteui-angular-elements/src/analyzer/config.template.ts index 59a992dbfe6..f0130422677 100644 --- a/projects/igniteui-angular-elements/src/analyzer/config.template.ts +++ b/projects/igniteui-angular-elements/src/analyzer/config.template.ts @@ -1,15 +1,15 @@ import { - IgxGridComponent, - IgxHierarchicalGridComponent, IgxPivotDataSelectorComponent, - IgxPivotGridComponent, - IgxTreeGridComponent + IgxPivotGridComponent } from '../../../igniteui-angular/src/public_api'; +import { IgxGridElementsComponent } from '../lib/grids/grid.component'; +import { IgxHierarchicalGridElementsComponent } from '../lib/grids/hierarchical-grid.component'; +import { IgxTreeGridElementsComponent } from '../lib/grids/tree-grid.component'; export const registerComponents = [ - IgxGridComponent, - IgxHierarchicalGridComponent, - IgxTreeGridComponent, + IgxGridElementsComponent, + IgxHierarchicalGridElementsComponent, + IgxTreeGridElementsComponent, IgxPivotGridComponent, IgxPivotDataSelectorComponent ]; diff --git a/projects/igniteui-angular-elements/src/analyzer/elements.config.ts b/projects/igniteui-angular-elements/src/analyzer/elements.config.ts index 1873b1de146..9003a81632b 100644 --- a/projects/igniteui-angular-elements/src/analyzer/elements.config.ts +++ b/projects/igniteui-angular-elements/src/analyzer/elements.config.ts @@ -1,10 +1,10 @@ import { - IgxGridComponent, - IgxHierarchicalGridComponent, IgxPivotDataSelectorComponent, IgxPivotGridComponent, - IgxTreeGridComponent, } from "../../../igniteui-angular/src/public_api"; +import { IgxGridElementsComponent } from "../lib/grids/grid.component"; +import { IgxHierarchicalGridElementsComponent } from "../lib/grids/hierarchical-grid.component"; +import { IgxTreeGridElementsComponent } from "../lib/grids/tree-grid.component"; import { IgxPaginatorComponent } from "../../../igniteui-angular/src/lib/paginator/paginator.component"; import { IgxPaginatorToken } from "../../../igniteui-angular/src/lib/paginator/token"; import { IgxActionStripComponent } from "../../../igniteui-angular/src/lib/action-strip/action-strip.component"; @@ -24,12 +24,13 @@ import { IgxRowIslandComponent } from "../../../igniteui-angular/src/lib/grids/h import { IgxGridToolbarExporterComponent } from "../../../igniteui-angular/src/lib/grids/toolbar/grid-toolbar-exporter.component"; import { IgxGridToolbarHidingComponent } from "../../../igniteui-angular/src/lib/grids/toolbar/grid-toolbar-hiding.component"; import { IgxGridToolbarPinningComponent } from "../../../igniteui-angular/src/lib/grids/toolbar/grid-toolbar-pinning.component"; +import { IgxRowIslandElementsComponent } from "../lib/grids/row-island.component"; import { IgxGridStateComponent } from "../lib/state.component"; export const registerComponents = [ - IgxGridComponent, - IgxHierarchicalGridComponent, - IgxTreeGridComponent, + IgxGridElementsComponent, + IgxHierarchicalGridElementsComponent, + IgxTreeGridElementsComponent, IgxPivotGridComponent, IgxPivotDataSelectorComponent, ]; @@ -40,10 +41,10 @@ export var registerConfig = [ component: IgxActionStripComponent, selector: "igc-action-strip", parents: [ - IgxGridComponent, - IgxTreeGridComponent, - IgxHierarchicalGridComponent, - IgxRowIslandComponent, + IgxGridElementsComponent, + IgxHierarchicalGridElementsComponent, + IgxTreeGridElementsComponent, + IgxRowIslandElementsComponent, ], contentQueries: [ { @@ -61,11 +62,11 @@ export var registerConfig = [ component: IgxColumnComponent, selector: "igc-column", parents: [ - IgxGridComponent, - IgxTreeGridComponent, - IgxHierarchicalGridComponent, + IgxGridElementsComponent, + IgxHierarchicalGridElementsComponent, + IgxTreeGridElementsComponent, IgxPivotGridComponent, - IgxRowIslandComponent, + IgxRowIslandElementsComponent, IgxColumnGroupComponent, IgxColumnLayoutComponent, ], @@ -117,11 +118,11 @@ export var registerConfig = [ component: IgxColumnGroupComponent, selector: "igc-column-group", parents: [ - IgxGridComponent, - IgxTreeGridComponent, - IgxHierarchicalGridComponent, + IgxGridElementsComponent, + IgxHierarchicalGridElementsComponent, + IgxTreeGridElementsComponent, IgxColumnGroupComponent, - IgxRowIslandComponent, + IgxRowIslandElementsComponent, ], contentQueries: [ { @@ -177,7 +178,7 @@ export var registerConfig = [ { component: IgxColumnLayoutComponent, selector: "igc-column-layout", - parents: [IgxGridComponent], + parents: [IgxGridElementsComponent], contentQueries: [ { property: "children", @@ -230,21 +231,32 @@ export var registerConfig = [ provideAs: IgxColumnComponent, }, { - component: IgxGridComponent, + component: IgxGridEditingActionsComponent, + selector: "igc-grid-editing-actions", + parents: [IgxActionStripComponent], + contentQueries: [], + additionalProperties: [{ name: "hasChildren" }], + methods: ["startEdit"], + boolProps: ["addRow", "editRow", "deleteRow", "addChild", "asMenuItems"], + provideAs: IgxGridActionsBaseDirective, + }, + { + component: IgxGridElementsComponent, selector: "igc-grid", 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", @@ -253,6 +265,11 @@ export var registerConfig = [ }, ], additionalProperties: [ + { name: "validation" }, + { name: "gridAPI" }, + { name: "cdr" }, + { name: "navigation", writable: true }, + { name: "actionStripComponents", writable: true }, { name: "groupsRecords" }, { name: "selectedCells" }, { name: "shouldGenerate", writable: true }, @@ -264,10 +281,6 @@ export var registerConfig = [ { name: "lastSearchInfo" }, { name: "filteredData" }, { name: "filteredSortedData" }, - { name: "validation" }, - { name: "gridAPI" }, - { name: "cdr" }, - { name: "navigation", writable: true }, { name: "virtualizationState" }, { name: "nativeElement" }, { name: "defaultRowHeight" }, @@ -398,16 +411,6 @@ export var registerConfig = [ "selectRowOnClick", ], }, - { - component: IgxGridEditingActionsComponent, - selector: "igc-grid-editing-actions", - parents: [IgxActionStripComponent], - contentQueries: [], - additionalProperties: [{ name: "hasChildren" }], - methods: ["startEdit"], - boolProps: ["addRow", "editRow", "deleteRow", "addChild", "asMenuItems"], - provideAs: IgxGridActionsBaseDirective, - }, { component: IgxGridPinningActionsComponent, selector: "igc-grid-pinning-actions", @@ -422,9 +425,9 @@ export var registerConfig = [ component: IgxGridStateComponent, selector: "igc-grid-state", parents: [ - IgxGridComponent, - IgxTreeGridComponent, - IgxHierarchicalGridComponent, + IgxGridElementsComponent, + IgxTreeGridElementsComponent, + IgxHierarchicalGridElementsComponent, IgxPivotGridComponent, ], contentQueries: [], @@ -456,9 +459,9 @@ export var registerConfig = [ component: IgxGridToolbarComponent, selector: "igc-grid-toolbar", parents: [ - IgxGridComponent, - IgxTreeGridComponent, - IgxHierarchicalGridComponent, + IgxGridElementsComponent, + IgxHierarchicalGridElementsComponent, + IgxTreeGridElementsComponent, IgxPivotGridComponent, ], contentQueries: [ @@ -507,31 +510,31 @@ export var registerConfig = [ methods: [], }, { - component: IgxHierarchicalGridComponent, + component: IgxHierarchicalGridElementsComponent, selector: "igc-hierarchical-grid", parents: [], contentQueries: [ { property: "childLayoutList", - childType: IgxRowIslandComponent, + childType: IgxRowIslandElementsComponent, isQueryList: true, }, { property: "allLayoutList", - childType: IgxRowIslandComponent, + childType: IgxRowIslandElementsComponent, isQueryList: true, 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", @@ -539,6 +542,7 @@ export var registerConfig = [ isQueryList: true, descendants: true, }, + { property: "actionStripComponent", childType: IgxActionStripToken }, { property: "toolbar", childType: IgxToolbarToken, isQueryList: true }, { property: "paginationComponents", @@ -547,9 +551,14 @@ export var registerConfig = [ }, ], additionalProperties: [ + { name: "validation" }, + { name: "gridAPI" }, + { name: "cdr" }, + { name: "navigation", writable: true }, + { name: "childLayoutList", writable: true }, + { name: "actionStripComponents", writable: true }, { name: "foreignKey" }, { name: "selectedCells" }, - { name: "gridAPI", writable: true }, { name: "shouldGenerate", writable: true }, { name: "rowList" }, { name: "dataRowList" }, @@ -559,9 +568,6 @@ export var registerConfig = [ { name: "lastSearchInfo" }, { name: "filteredData" }, { name: "filteredSortedData" }, - { name: "validation" }, - { name: "cdr" }, - { name: "navigation", writable: true }, { name: "virtualizationState" }, { name: "nativeElement" }, { name: "defaultRowHeight" }, @@ -683,9 +689,9 @@ export var registerConfig = [ component: IgxPaginatorComponent, selector: "igc-paginator", parents: [ - IgxGridComponent, - IgxTreeGridComponent, - IgxHierarchicalGridComponent, + IgxGridElementsComponent, + IgxHierarchicalGridElementsComponent, + IgxTreeGridElementsComponent, IgxPivotGridComponent, ], contentQueries: [], @@ -829,21 +835,146 @@ export var registerConfig = [ { component: IgxRowIslandComponent, selector: "igc-row-island", - parents: [IgxHierarchicalGridComponent, IgxRowIslandComponent], + parents: [ + IgxGridElementsComponent, + IgxHierarchicalGridElementsComponent, + IgxRowIslandElementsComponent, + ], + contentQueries: [], + additionalProperties: [ + { name: "rowIslandAPI", writable: true }, + { name: "gridAPI", writable: true }, + { name: "shouldGenerate", writable: true }, + { name: "rowList" }, + { name: "dataRowList" }, + { name: "transactions" }, + { name: "validation" }, + { name: "cdr" }, + { name: "navigation", writable: true }, + { name: "nativeElement" }, + { name: "defaultRowHeight" }, + { name: "defaultHeaderGroupMinWidth" }, + { name: "columns" }, + { name: "pinnedRows" }, + ], + methods: [ + "isRecordPinnedByIndex", + "toggleColumnVisibility", + "expandAll", + "collapseAll", + "expandRow", + "collapseRow", + "toggleRow", + "getHeaderGroupWidth", + "getColumnByName", + "getColumnByVisibleIndex", + "recalculateAutoSizes", + "moveColumn", + "markForCheck", + "addRow", + "deleteRow", + "updateCell", + "updateRow", + "getRowData", + "sort", + "filter", + "filterGlobal", + "enableSummaries", + "disableSummaries", + "clearFilter", + "clearSort", + "pinColumn", + "unpinColumn", + "pinRow", + "unpinRow", + "findNext", + "findPrev", + "refreshSearch", + "clearSearch", + "getPinnedWidth", + "selectRows", + "deselectRows", + "selectAllRows", + "deselectAllRows", + "clearCellSelection", + "selectRange", + "getSelectedRanges", + "getSelectedData", + "selectedColumns", + "selectColumns", + "deselectColumns", + "deselectAllColumns", + "selectAllColumns", + "getSelectedColumnsData", + "navigateTo", + "getNextCell", + "getPreviousCell", + "openAdvancedFilteringDialog", + "closeAdvancedFilteringDialog", + "endEdit", + "beginAddRowById", + "beginAddRowByIndex", + ], + templateProps: [ + "toolbarTemplate", + "paginatorTemplate", + "emptyGridTemplate", + "addRowEmptyTemplate", + "loadingGridTemplate", + "dragGhostCustomTemplate", + "rowEditTextTemplate", + "rowAddTextTemplate", + "rowEditActionsTemplate", + "rowExpandedIndicatorTemplate", + "rowCollapsedIndicatorTemplate", + "headerExpandedIndicatorTemplate", + "headerCollapsedIndicatorTemplate", + "excelStyleHeaderIconTemplate", + "sortAscendingHeaderIconTemplate", + "sortDescendingHeaderIconTemplate", + "sortHeaderIconTemplate", + "headSelectorTemplate", + "rowSelectorTemplate", + "dragIndicatorIconTemplate", + ], + numericProps: [ + "snackbarDisplayTime", + "summaryRowHeight", + "rowHeight", + "totalRecords", + ], + boolProps: [ + "expandChildren", + "showExpandAll", + "autoGenerate", + "moving", + "hideRowSelectors", + "rowDraggable", + "rowEditable", + "isLoading", + "allowFiltering", + "allowAdvancedFiltering", + "showSummaryOnCollapse", + "selectRowOnClick", + ], + }, + { + component: IgxRowIslandElementsComponent, + selector: "igc-row-island", + parents: [ + IgxGridElementsComponent, + IgxHierarchicalGridElementsComponent, + IgxRowIslandElementsComponent, + ], contentQueries: [ - { - property: "children", - childType: IgxRowIslandComponent, - isQueryList: true, - }, { property: "childLayoutList", - childType: IgxRowIslandComponent, + childType: IgxRowIslandElementsComponent, isQueryList: true, }, { - property: "childColumns", - childType: IgxColumnComponent, + property: "children", + childType: IgxRowIslandElementsComponent, isQueryList: true, }, { @@ -851,15 +982,22 @@ export var registerConfig = [ childType: IgxActionStripToken, isQueryList: true, }, + { + property: "childColumns", + childType: IgxColumnComponent, + isQueryList: true, + }, { property: "columnList", childType: IgxColumnComponent, isQueryList: true, descendants: true, }, + { property: "actionStripComponent", childType: IgxActionStripToken }, ], additionalProperties: [ { name: "rowIslandAPI", writable: true }, + { name: "childLayoutList", writable: true }, { name: "gridAPI", writable: true }, { name: "shouldGenerate", writable: true }, { name: "rowList" }, @@ -976,21 +1114,22 @@ export var registerConfig = [ ], }, { - component: IgxTreeGridComponent, + component: IgxTreeGridElementsComponent, selector: "igc-tree-grid", 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", @@ -999,6 +1138,7 @@ export var registerConfig = [ }, ], additionalProperties: [ + { name: "actionStripComponents", writable: true }, { name: "rootRecords", writable: true }, { name: "records", writable: true }, { name: "processedRootRecords", writable: true }, diff --git a/projects/igniteui-angular-elements/src/app/components.ts b/projects/igniteui-angular-elements/src/app/components.ts index d3f0eb47270..03fa40e598e 100644 --- a/projects/igniteui-angular-elements/src/app/components.ts +++ b/projects/igniteui-angular-elements/src/app/components.ts @@ -4,7 +4,6 @@ import { IgxColumnComponent, IgxColumnGroupComponent, IgxColumnLayoutComponent, - IgxGridComponent, IgxGridEditingActionsComponent, IgxGridPinningActionsComponent, IgxGridToolbarActionsComponent, @@ -14,11 +13,8 @@ import { IgxGridToolbarPinningComponent, IgxGridToolbarAdvancedFilteringComponent, IgxGridToolbarTitleComponent, - IgxHierarchicalGridComponent, IgxPaginatorComponent, IgxPivotGridComponent, - IgxRowIslandComponent, - IgxTreeGridComponent, IgxPivotDataSelectorComponent } from 'igniteui-angular'; import { GridType } from 'projects/igniteui-angular/src/lib/grids/common/grid.interface'; @@ -26,20 +22,24 @@ import { GridType } from 'projects/igniteui-angular/src/lib/grids/common/grid.in import { registerConfig } from "../analyzer/elements.config"; import { createIgxCustomElement, withRegister } from './create-custom-element'; import { IgxGridStateComponent } from '../lib/state.component'; +import { IgxGridElementsComponent } from '../lib/grids/grid.component'; import { IgxIconBroadcastService } from '../lib/icon.broadcast.service'; import { injector } from '../utils/injector-ref'; import { registerComponent } from '../utils/register'; +import { IgxHierarchicalGridElementsComponent } from '../lib/grids/hierarchical-grid.component'; +import { IgxRowIslandElementsComponent } from '../lib/grids/row-island.component'; +import { IgxTreeGridElementsComponent } 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); -const grid = createIgxCustomElement(IgxGridComponent, { injector, registerConfig }); +const grid = createIgxCustomElement(IgxGridElementsComponent, { injector, registerConfig }); const IgcGridComponent = withRegister(grid, () => { registerComponent(IgcGridComponent) }); -const treeGrid = createIgxCustomElement(IgxTreeGridComponent, { injector, registerConfig }); +const treeGrid = createIgxCustomElement(IgxTreeGridElementsComponent, { injector, registerConfig }); const IgcTreeGridComponent = withRegister(treeGrid, () => { registerComponent(IgcTreeGridComponent) }); -const hGrid = createIgxCustomElement(IgxHierarchicalGridComponent, { injector, registerConfig }); +const hGrid = createIgxCustomElement(IgxHierarchicalGridElementsComponent, { injector, registerConfig }); const IgcHierarchicalGridComponent = withRegister(hGrid, () => { registerComponent(IgcHierarchicalGridComponent) }); const pivot = createIgxCustomElement(IgxPivotGridComponent, { injector, registerConfig }); @@ -48,7 +48,7 @@ const IgcPivotGridComponent = withRegister(pivot, () => { registerComponent(IgcP const pivotDataSelector = createIgxCustomElement(IgxPivotDataSelectorComponent, { injector, registerConfig }); const IgcPivotDataSelectorComponent = withRegister(pivotDataSelector, () => { registerComponent(IgcPivotDataSelectorComponent) }); -const rowIsland = createIgxCustomElement(IgxRowIslandComponent, { injector, registerConfig }); +const rowIsland = createIgxCustomElement(IgxRowIslandElementsComponent, { injector, registerConfig }); const IgcRowIslandComponent = withRegister(rowIsland, () => { registerComponent(IgcRowIslandComponent) }); const columnGroup = createIgxCustomElement(IgxColumnGroupComponent, { injector, registerConfig }); @@ -122,7 +122,7 @@ export { // TODO: Custom elements JSON as well declare global { type IgxGridElement = NgElement & WithProperties; - type IgxTreeGridElement = NgElement & WithProperties; + type IgxTreeGridElement = NgElement & WithProperties; interface HTMLElementTagNameMap { 'igc-grid': NgElement & WithProperties; 'igc-tree-grid': NgElement & WithProperties; 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..d1bce6a0c25 --- /dev/null +++ b/projects/igniteui-angular-elements/src/lib/grids/events.ts @@ -0,0 +1,8 @@ +import { ColumnType } from '../../../../igniteui-angular/src/lib/grids/common/grid.interface'; +import { IBaseEventArgs } from 'igniteui-angular/src/lib/core/utils'; + +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..ce23db97f31 --- /dev/null +++ b/projects/igniteui-angular-elements/src/lib/grids/grid.component.ts @@ -0,0 +1,182 @@ +import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ContentChildren, CUSTOM_ELEMENTS_SCHEMA, ElementRef, EnvironmentInjector, EventEmitter, Inject, Injector, IterableDiffers, LOCALE_ID, NgZone, Optional, Output, QueryList, ViewContainerRef } from '@angular/core'; +import { IgxGridComponent } from '../../../../igniteui-angular/src/lib/grids/grid/grid.component'; +import { IColumnsAutoGeneratedEventArgs } from './events'; +import { IgxGridCRUDService } from '../../../../igniteui-angular/src/lib/grids/common/crud.service'; +import { IgxGridNavigationService } from '../../../../igniteui-angular/src/lib/grids/grid-navigation.service'; +import { IgxGridSummaryService } from '../../../../igniteui-angular/src/lib/grids/summaries/grid-summary.service'; +import { IgxGridSelectionService } from '../../../../igniteui-angular/src/lib/grids/selection/selection.service'; +import { IgxGridValidationService } from '../../../../igniteui-angular/src/lib/grids/grid/grid-validation.service'; +import { GridServiceType, IGX_GRID_BASE, IGX_GRID_SERVICE_BASE, IgxButtonDirective, IgxCircularProgressBarComponent, IgxColumnComponent, IgxFlatTransactionFactory, IgxGridForOfDirective, IgxGridHeaderRowComponent, IgxGridToolbarComponent, IgxGridTransaction, IgxIconComponent, IgxOverlayOutletDirective, IgxOverlayService, IgxPaginatorComponent, IgxRippleDirective, IgxRowEditTabStopDirective, IgxSnackbarComponent, IgxTemplateOutletDirective, IgxTextHighlightService, IgxToggleDirective, State, Transaction, TransactionService } from 'igniteui-angular'; +import { IgxGridAPIService } from '../../../../igniteui-angular/src/lib/grids/grid/grid-api.service'; +import { IgxFilteringService } from '../../../../igniteui-angular/src/lib/grids/filtering/grid-filtering.service'; +import { IgxColumnResizingService } from '../../../../igniteui-angular/src/lib/grids/resizing/resizing.service'; +import { IgxForOfScrollSyncService, IgxForOfSyncService } from '../../../../igniteui-angular/src/lib/directives/for-of/for_of.sync.service'; +import { IgxActionStripToken } from '../../../../igniteui-angular/src/lib/action-strip/token'; +import { takeUntil } from 'rxjs'; +import { DOCUMENT, NgClass, NgFor, NgIf, NgStyle, NgTemplateOutlet } from '@angular/common'; +import { PlatformUtil } from '../../../../igniteui-angular/src/lib/core/utils'; +import { IgxGridGroupByAreaComponent } from '../../../../igniteui-angular/src/lib/grids/grouping/grid-group-by-area.component'; +import { IgxGridBodyDirective } from '../../../../igniteui-angular/src/lib/grids/grid.common'; +import { IgxGridDragSelectDirective } from '../../../../igniteui-angular/src/lib/grids/selection/drag-select.directive'; +import { IgxColumnMovingDropDirective } from '../../../../igniteui-angular/src/lib/grids/moving/moving.drop.directive'; +import { IgxGridRowComponent } from '../../../../igniteui-angular/src/lib/grids/grid/grid-row.component'; +import { IgxGridGroupByRowComponent } from '../../../../igniteui-angular/src/lib/grids/grid/groupby-row.component'; +import { IgxSummaryRowComponent } from '../../../../igniteui-angular/src/lib/grids/summaries/summary-row.component'; +import { IgxGridColumnResizerComponent } from '../../../../igniteui-angular/src/lib/grids/resizing/resizer.component'; +import { IgxGridAddRowPipe, IgxGridRowClassesPipe, IgxGridRowPinningPipe, IgxGridRowStylesPipe, IgxGridTransactionPipe, IgxHasVisibleColumnsPipe, IgxStringReplacePipe } from '../../../../igniteui-angular/src/lib/grids/common/pipes'; +import { IgxSummaryDataPipe } from '../../../../igniteui-angular/src/lib/grids/summaries/grid-root-summary.pipe'; +import { IgxGridFilteringPipe, IgxGridGroupingPipe, IgxGridPagingPipe, IgxGridSortingPipe } from '../../../../igniteui-angular/src/lib/grids/grid/grid.pipes'; +import { IgxGridSummaryPipe } from '../../../../igniteui-angular/src/lib/grids/grid/grid.summary.pipe'; +import { IgxGridDetailsPipe } from '../../../../igniteui-angular/src/lib/grids/grid/grid.details.pipe'; + +/* 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. + * @example + * ```html + * + * + * + * + * + * ``` + */ +@Component({ + changeDetection: ChangeDetectionStrategy.OnPush, + preserveWhitespaces: false, + providers: [ + IgxGridCRUDService, + IgxGridNavigationService, + IgxGridSummaryService, + IgxGridSelectionService, + IgxGridValidationService, + { provide: IGX_GRID_SERVICE_BASE, useClass: IgxGridAPIService }, + { provide: IGX_GRID_BASE, useExisting: IgxGridElementsComponent }, + IgxFilteringService, + IgxColumnResizingService, + IgxForOfSyncService, + IgxForOfScrollSyncService, + ], + imports: [ + NgIf, + NgClass, + NgFor, + 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, + ], + selector: 'igx-grid', + templateUrl: '../../../../igniteui-angular/src/lib/grids/grid/grid.component.html', + schemas: [CUSTOM_ELEMENTS_SCHEMA] +}) +export class IgxGridElementsComponent extends IgxGridComponent { + + constructor( + public override readonly validation: IgxGridValidationService, + /** @hidden @internal */ + public override readonly selectionService: IgxGridSelectionService, + protected override colResizingService: IgxColumnResizingService, + @Inject(IGX_GRID_SERVICE_BASE) public override readonly gridAPI: GridServiceType, + protected override transactionFactory: IgxFlatTransactionFactory, + private elementRef1: ElementRef, + protected override zone: NgZone, + /** @hidden @internal */ + @Inject(DOCUMENT) public override document: any, + public override readonly cdr: ChangeDetectorRef, + protected override differs: IterableDiffers, + protected override viewRef: ViewContainerRef, + protected override injector: Injector, + protected override envInjector: EnvironmentInjector, + public override navigation: IgxGridNavigationService, + /** @hidden @internal */ + public override filteringService: IgxFilteringService, + protected override textHighlightService: IgxTextHighlightService, + @Inject(IgxOverlayService) protected override overlayService: IgxOverlayService, + /** @hidden @internal */ + public override summaryService: IgxGridSummaryService, + @Inject(LOCALE_ID) private localeId1: string, + protected override platform: PlatformUtil, + @Optional() @Inject(IgxGridTransaction) protected override _diTransactions?: TransactionService, + ) { + super(validation, selectionService,colResizingService, gridAPI, transactionFactory, elementRef1, zone, + document, cdr, differs, viewRef,injector, envInjector, navigation, filteringService, textHighlightService, overlayService, + summaryService, localeId1, platform, _diTransactions + ); + this.selectionService.selectedRowsChange.pipe(takeUntil(this.destroy$)).subscribe((args: any[]) => { + this.selectedRowsChange.emit(args); + }); + } + + @Output() + public columnsAutogenerated = new EventEmitter(); + + @Output() + public selectedRowsChange = new EventEmitter(); + + /* contentChildren */ + /* blazorTreatAsCollection */ + /* blazorCollectionName: ActionStripCollection */ + /* blazorCollectionItemName: ActionStrip */ + /* ngQueryListName: actionStripComponents */ + @ContentChildren(IgxActionStripToken) + public 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..9f5a3cfdd72 --- /dev/null +++ b/projects/igniteui-angular-elements/src/lib/grids/hierarchical-grid.component.ts @@ -0,0 +1,181 @@ + +import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ContentChildren, CUSTOM_ELEMENTS_SCHEMA, ElementRef, EnvironmentInjector, EventEmitter, Inject, Injector, IterableDiffers, LOCALE_ID, NgZone, Optional, Output, QueryList, ViewContainerRef } from '@angular/core'; +import { IgxChildGridRowComponent, IgxHierarchicalGridComponent } from '../../../../igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component'; +import { IgxGridCRUDService } from '../../../../igniteui-angular/src/lib/grids/common/crud.service'; +import { IgxGridValidationService } from '../../../../igniteui-angular/src/lib/grids/grid/grid-validation.service'; +import { IgxGridSelectionService } from '../../../../igniteui-angular/src/lib/grids/selection/selection.service'; +import { IGX_GRID_BASE, IGX_GRID_SERVICE_BASE, IgxButtonDirective, IgxCircularProgressBarComponent, IgxFlatTransactionFactory, IgxGridForOfDirective, IgxGridHeaderRowComponent, IgxGridTransaction, IgxIconComponent, IgxOverlayOutletDirective, IgxOverlayService, IgxRippleDirective, IgxRowEditTabStopDirective, IgxSnackbarComponent, IgxTemplateOutletDirective, IgxTextHighlightService, IgxToggleDirective, State, Transaction, TransactionService } from 'igniteui-angular'; +import { IgxHierarchicalGridAPIService } from '../../../../igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid-api.service'; +import { IgxGridSummaryService } from '../../../../igniteui-angular/src/lib/grids/summaries/grid-summary.service'; +import { IgxFilteringService } from '../../../../igniteui-angular/src/lib/grids/filtering/grid-filtering.service'; +import { IgxHierarchicalGridNavigationService } from '../../../../igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid-navigation.service'; +import { IgxColumnResizingService } from '../../../../igniteui-angular/src/lib/grids/resizing/resizing.service'; +import { IgxForOfScrollSyncService, IgxForOfSyncService } from '../../../../igniteui-angular/src/lib/directives/for-of/for_of.sync.service'; +import { IgxRowIslandAPIService } from '../../../../igniteui-angular/src/lib/grids/hierarchical-grid/row-island-api.service'; +import { DOCUMENT, NgClass, NgFor, NgIf, NgStyle, NgTemplateOutlet } from '@angular/common'; +import { IgxGridBodyDirective } from '../../../../igniteui-angular/src/lib/grids/grid.common'; +import { IgxGridDragSelectDirective } from '../../../../igniteui-angular/src/lib/grids/selection/drag-select.directive'; +import { IgxColumnMovingDropDirective } from '../../../../igniteui-angular/src/lib/grids/moving/moving.drop.directive'; +import { IgxHierarchicalRowComponent } from '../../../../igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-row.component'; +import { IgxSummaryRowComponent } from '../../../../igniteui-angular/src/lib/grids/summaries/summary-row.component'; +import { IgxGridColumnResizerComponent } from '../../../../igniteui-angular/src/lib/grids/resizing/resizer.component'; +import { IgxGridFilteringPipe, IgxGridSortingPipe } from '../../../../igniteui-angular/src/lib/grids/grid/grid.pipes'; +import { IgxGridAddRowPipe, IgxGridRowClassesPipe, IgxGridRowPinningPipe, IgxGridRowStylesPipe, IgxGridTransactionPipe, IgxHasVisibleColumnsPipe, IgxStringReplacePipe } from '../../../../igniteui-angular/src/lib/grids/common/pipes'; +import { IgxSummaryDataPipe } from '../../../../igniteui-angular/src/lib/grids/summaries/grid-root-summary.pipe'; +import { IgxGridHierarchicalPagingPipe, IgxGridHierarchicalPipe } from '../../../../igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.pipes'; +import { PlatformUtil } from '../../../../igniteui-angular/src/lib/core/utils'; +import { takeUntil } from 'rxjs'; +import { IColumnsAutoGeneratedEventArgs } from './events'; +import { IgxActionStripToken } from '../../../../igniteui-angular/src/lib/action-strip/token'; +import { IgxRowIslandElementsComponent } from './row-island.component'; + + +/* 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/src/lib/grids/hierarchical-grid/hierarchical-grid.component.html', + providers: [ + IgxGridCRUDService, + IgxGridValidationService, + IgxGridSelectionService, + { provide: IGX_GRID_SERVICE_BASE, useClass: IgxHierarchicalGridAPIService }, + { provide: IGX_GRID_BASE, useExisting: IgxHierarchicalGridElementsComponent }, + IgxGridSummaryService, + IgxFilteringService, + IgxHierarchicalGridNavigationService, + IgxColumnResizingService, + IgxForOfSyncService, + IgxForOfScrollSyncService, + IgxRowIslandAPIService + ], + imports: [ + NgIf, + NgClass, + NgFor, + 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 + ], + schemas: [CUSTOM_ELEMENTS_SCHEMA] +}) +export class IgxHierarchicalGridElementsComponent extends IgxHierarchicalGridComponent { + + constructor( + public override readonly validation: IgxGridValidationService, + /** @hidden @internal */ + public override readonly selectionService: IgxGridSelectionService, + protected override colResizingService: IgxColumnResizingService, + @Inject(IGX_GRID_SERVICE_BASE) public override readonly gridAPI: IgxHierarchicalGridAPIService, + protected override transactionFactory: IgxFlatTransactionFactory, + private elementRef1: ElementRef, + protected override zone: NgZone, + /** @hidden @internal */ + @Inject(DOCUMENT) public override document: any, + public override readonly cdr: ChangeDetectorRef, + protected override differs: IterableDiffers, + protected override viewRef: ViewContainerRef, + protected override injector: Injector, + protected override envInjector: EnvironmentInjector, + public override navigation: IgxHierarchicalGridNavigationService, + /** @hidden @internal */ + public override filteringService: IgxFilteringService, + protected override textHighlightService: IgxTextHighlightService, + @Inject(IgxOverlayService) protected override overlayService: IgxOverlayService, + /** @hidden @internal */ + public override summaryService: IgxGridSummaryService, + @Inject(LOCALE_ID) private localeId1: string, + protected override platform: PlatformUtil, + @Optional() @Inject(IgxGridTransaction) protected override _diTransactions?: TransactionService, + ) { + super(validation, selectionService,colResizingService, gridAPI, transactionFactory, elementRef1, zone, + document, cdr, differs, viewRef,injector, envInjector, navigation, filteringService, textHighlightService, overlayService, + summaryService, localeId1, platform, _diTransactions + ); + this.selectionService.selectedRowsChange.pipe(takeUntil(this.destroy$)).subscribe((args: any[]) => { + this.selectedRowsChange.emit(args); + }); + } + + /* contentChildren */ + /* blazorTreatAsCollection */ + /* blazorCollectionName: RowIslandCollection */ + /* ngQueryListName: childLayoutList */ + @ContentChildren(IgxRowIslandElementsComponent, { read: IgxRowIslandElementsComponent, descendants: false }) + public override childLayoutList: QueryList; + + /** + * @hidden + */ + @ContentChildren(IgxRowIslandElementsComponent, { read: IgxRowIslandElementsComponent, descendants: true }) + public override allLayoutList: QueryList; + + @Output() + public columnsAutogenerated = new EventEmitter(); + + @Output() + public selectedRowsChange = new EventEmitter(); + + /* contentChildren */ + /* blazorTreatAsCollection */ + /* blazorCollectionName: ActionStripCollection */ + /* blazorCollectionItemName: ActionStrip */ + /* ngQueryListName: actionStripComponents */ + @ContentChildren(IgxActionStripToken) + public 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..136495537e5 --- /dev/null +++ b/projects/igniteui-angular-elements/src/lib/grids/row-island.component.ts @@ -0,0 +1,145 @@ +/* blazorCopyInheritedMembers */ +/* blazorElement */ +/* wcElementTag: igc-row-island */ +/* blazorIndirectRender */ +/* jsonAPIManageCollectionInMarkup */ +/* jsonAPIManageItemInMarkup */ +/* mustUseNGParentAnchor */ +/* additionalIdentifier: ChildDataKey */ +/* contentParent: RowIsland */ +/* contentParent: HierarchicalGrid */ + +import { DOCUMENT } from '@angular/common'; +import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ContentChildren, ElementRef, EnvironmentInjector, EventEmitter, forwardRef, Inject, Injector, Input, IterableDiffers, LOCALE_ID, NgZone, Optional, Output, QueryList, ViewContainerRef } from '@angular/core'; +import { IGX_GRID_SERVICE_BASE, IgxFlatTransactionFactory, IgxGridTransaction, IgxOverlayService, IgxRowIslandComponent, IgxTextHighlightService, State, Transaction, TransactionService } from 'igniteui-angular'; +import { PlatformUtil } from 'igniteui-angular/src/lib/core/utils'; +import { IgxFilteringService } from 'igniteui-angular/src/lib/grids/filtering/grid-filtering.service'; +import { IgxGridValidationService } from 'igniteui-angular/src/lib/grids/grid/grid-validation.service'; +import { IgxHierarchicalGridAPIService } from 'igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid-api.service'; +import { IgxHierarchicalGridNavigationService } from 'igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid-navigation.service'; +import { IgxRowIslandAPIService } from 'igniteui-angular/src/lib/grids/hierarchical-grid/row-island-api.service'; +import { IgxColumnResizingService } from 'igniteui-angular/src/lib/grids/resizing/resizing.service'; +import { IgxGridSelectionService } from 'igniteui-angular/src/lib/grids/selection/selection.service'; +import { IgxGridSummaryService } from 'igniteui-angular/src/lib/grids/summaries/grid-summary.service'; +import { takeUntil } from 'rxjs'; +import { IColumnsAutoGeneratedEventArgs } from './events'; +import { IgxActionStripToken } from 'igniteui-angular/src/lib/action-strip/token'; + +/** + * Row island + * + * @igxModule IgxHierarchicalGridModule + * @igxParent IgxGridElementsComponent, IgxHierarchicalGridElementsComponent, IgxRowIslandElementsComponent + * + */ +@Component({ + changeDetection: ChangeDetectionStrategy.OnPush, + selector: 'igx-row-island', + template: `
+ + +
`, + providers: [ + IgxRowIslandAPIService, + IgxFilteringService, + IgxGridSelectionService + ], + standalone: true +}) +export class IgxRowIslandElementsComponent extends IgxRowIslandComponent { + + constructor( + validationService: IgxGridValidationService, + selectionService: IgxGridSelectionService, + colResizingService: IgxColumnResizingService, + @Inject(IGX_GRID_SERVICE_BASE) gridAPI: IgxHierarchicalGridAPIService, + transactionFactory: IgxFlatTransactionFactory, + elementRef: ElementRef, + zone: NgZone, + @Inject(DOCUMENT) document, + cdr: ChangeDetectorRef, + differs: IterableDiffers, + viewRef: ViewContainerRef, + injector: Injector, + envInjector: EnvironmentInjector, + navigation: IgxHierarchicalGridNavigationService, + filteringService: IgxFilteringService, + textHighlightService: IgxTextHighlightService, + @Inject(IgxOverlayService) overlayService: IgxOverlayService, + summaryService: IgxGridSummaryService, + public override rowIslandAPI: IgxRowIslandAPIService, + @Inject(LOCALE_ID) localeId: string, + platform: PlatformUtil) { + super( + validationService, + selectionService, + colResizingService, + gridAPI, + transactionFactory, + elementRef, + zone, + document, + cdr, + differs, + viewRef, + injector, + envInjector, + navigation, + filteringService, + textHighlightService, + overlayService, + summaryService, + rowIslandAPI, + localeId, + platform + ); + this.selectionService.selectedRowsChange.pipe(takeUntil(this.destroy$)).subscribe((args: any[]) => { + this.selectedRowsChange.emit(args); + }); + } + + /* contentChildren */ + /* blazorTreatAsCollection */ + /* blazorCollectionName: RowIslandCollection */ + /* ngQueryListName: childLayoutList */ + @ContentChildren(IgxRowIslandElementsComponent, { read: IgxRowIslandElementsComponent, descendants: false }) + public override childLayoutList: QueryList; + + /** + * @hidden + */ + @ContentChildren(forwardRef(() => IgxRowIslandElementsComponent), { read: IgxRowIslandElementsComponent, descendants: false }) + public override children = new QueryList(); + + @Output() + public columnsAutogenerated = new EventEmitter(); + + @Output() + public selectedRowsChange = new EventEmitter(); + + // 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 }) + protected 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..8b99c2fe7ae --- /dev/null +++ b/projects/igniteui-angular-elements/src/lib/grids/tree-grid.component.ts @@ -0,0 +1,192 @@ +import { DOCUMENT, NgClass, NgFor, NgIf, NgStyle, NgTemplateOutlet } from '@angular/common'; +import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ContentChildren, CUSTOM_ELEMENTS_SCHEMA, ElementRef, EnvironmentInjector, EventEmitter, Inject, Injector, IterableDiffers, LOCALE_ID, NgZone, Optional, Output, QueryList, ViewContainerRef } from '@angular/core'; +import { GridServiceType, HierarchicalState, HierarchicalTransaction, HierarchicalTransactionService, IGX_GRID_BASE, IGX_GRID_SERVICE_BASE, IgxButtonDirective, IgxCircularProgressBarComponent, IgxGridForOfDirective, IgxGridHeaderRowComponent, IgxGridTransaction, IgxHierarchicalTransactionFactory, IgxIconComponent, IgxOverlayOutletDirective, IgxOverlayService, IgxRippleDirective, IgxRowEditTabStopDirective, IgxSnackbarComponent, IgxTemplateOutletDirective, IgxTextHighlightService, IgxToggleDirective, IgxTreeGridComponent } from 'igniteui-angular'; +import { PlatformUtil } from 'igniteui-angular/src/lib/core/utils'; +import { IgxForOfScrollSyncService, IgxForOfSyncService } from 'igniteui-angular/src/lib/directives/for-of/for_of.sync.service'; +import { IgxGridCRUDService } from 'igniteui-angular/src/lib/grids/common/crud.service'; +import { IgxGridRowClassesPipe, IgxGridRowPinningPipe, IgxGridRowStylesPipe, IgxHasVisibleColumnsPipe, IgxStringReplacePipe } from 'igniteui-angular/src/lib/grids/common/pipes'; +import { IgxFilteringService } from 'igniteui-angular/src/lib/grids/filtering/grid-filtering.service'; +import { IgxGridNavigationService } from 'igniteui-angular/src/lib/grids/grid-navigation.service'; +import { IgxGridBodyDirective } from 'igniteui-angular/src/lib/grids/grid.common'; +import { IgxGridValidationService } from 'igniteui-angular/src/lib/grids/grid/grid-validation.service'; +import { IgxColumnMovingDropDirective } from 'igniteui-angular/src/lib/grids/moving/moving.drop.directive'; +import { IgxGridColumnResizerComponent } from 'igniteui-angular/src/lib/grids/resizing/resizer.component'; +import { IgxColumnResizingService } from 'igniteui-angular/src/lib/grids/resizing/resizing.service'; +import { IgxGridDragSelectDirective } from 'igniteui-angular/src/lib/grids/selection/drag-select.directive'; +import { IgxGridSelectionService } from 'igniteui-angular/src/lib/grids/selection/selection.service'; +import { IgxSummaryDataPipe } from 'igniteui-angular/src/lib/grids/summaries/grid-root-summary.pipe'; +import { IgxGridSummaryService } from 'igniteui-angular/src/lib/grids/summaries/grid-summary.service'; +import { IgxSummaryRowComponent } from 'igniteui-angular/src/lib/grids/summaries/summary-row.component'; +import { IgxTreeGridAPIService } from 'igniteui-angular/src/lib/grids/tree-grid/tree-grid-api.service'; +import { IgxTreeGridRowComponent } from 'igniteui-angular/src/lib/grids/tree-grid/tree-grid-row.component'; +import { IgxTreeGridSelectionService } from 'igniteui-angular/src/lib/grids/tree-grid/tree-grid-selection.service'; +import { IgxTreeGridFilteringPipe } from 'igniteui-angular/src/lib/grids/tree-grid/tree-grid.filtering.pipe'; +import { IgxTreeGridAddRowPipe, IgxTreeGridFlatteningPipe, IgxTreeGridHierarchizingPipe, IgxTreeGridNormalizeRecordsPipe, IgxTreeGridPagingPipe, IgxTreeGridSortingPipe, IgxTreeGridTransactionPipe } from 'igniteui-angular/src/lib/grids/tree-grid/tree-grid.pipes'; +import { IgxTreeGridSummaryPipe } from 'igniteui-angular/src/lib/grids/tree-grid/tree-grid.summary.pipe'; +import { takeUntil } from 'rxjs'; +import { IColumnsAutoGeneratedEventArgs } from './events'; +import { IgxActionStripToken } from 'igniteui-angular/src/lib/action-strip/token'; + + +/* 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/src/lib/grids/tree-grid/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: IgxTreeGridElementsComponent }, + IgxFilteringService, + IgxColumnResizingService, + IgxForOfSyncService, + IgxForOfScrollSyncService + ], + imports: [ + NgIf, + NgFor, + 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 + ], + schemas: [CUSTOM_ELEMENTS_SCHEMA] +}) +export class IgxTreeGridElementsComponent extends IgxTreeGridComponent { + constructor( + validationService: IgxGridValidationService, + selectionService: IgxGridSelectionService, + colResizingService: IgxColumnResizingService, + @Inject(IGX_GRID_SERVICE_BASE) gridAPI: GridServiceType, + // public gridAPI: GridBaseAPIService, + transactionFactory: IgxHierarchicalTransactionFactory, + _elementRef: ElementRef, + _zone: NgZone, + @Inject(DOCUMENT) document: any, + cdr: ChangeDetectorRef, + differs: IterableDiffers, + viewRef: ViewContainerRef, + injector: Injector, + envInjector: EnvironmentInjector, + navigation: IgxGridNavigationService, + filteringService: IgxFilteringService, + textHighlightService: IgxTextHighlightService, + @Inject(IgxOverlayService) overlayService: IgxOverlayService, + summaryService: IgxGridSummaryService, + @Inject(LOCALE_ID) localeId: string, + platform: PlatformUtil, + @Optional() @Inject(IgxGridTransaction) protected override _diTransactions?: + HierarchicalTransactionService, + ) { + super( + validationService, + selectionService, + colResizingService, + gridAPI, + transactionFactory, + _elementRef, + _zone, + document, + cdr, + differs, + viewRef, + injector, + envInjector, + navigation, + filteringService, + textHighlightService, + overlayService, + summaryService, + localeId, + platform, + _diTransactions, + ); + this.selectionService.selectedRowsChange.pipe(takeUntil(this.destroy$)).subscribe((args: any[]) => { + this.selectedRowsChange.emit(args); + }); + } + + @Output() + public columnsAutogenerated = new EventEmitter(); + + @Output() + public selectedRowsChange = new EventEmitter(); + + /* contentChildren */ + /* blazorTreatAsCollection */ + /* blazorCollectionName: ActionStripCollection */ + /* blazorCollectionItemName: ActionStrip */ + /* ngQueryListName: actionStripComponents */ + @ContentChildren(IgxActionStripToken) + public actionStripComponents: QueryList; + + protected override autogenerateColumns() { + super.autogenerateColumns(); + this.columnsAutogenerated.emit({ columns: this._autoGeneratedCols }); + } +} diff --git a/projects/igniteui-angular-elements/src/lib/state.component.ts b/projects/igniteui-angular-elements/src/lib/state.component.ts index ddf53d77efb..f1866071eaf 100644 --- a/projects/igniteui-angular-elements/src/lib/state.component.ts +++ b/projects/igniteui-angular-elements/src/lib/state.component.ts @@ -41,7 +41,7 @@ export interface IGridStateInfo { /* jsonAPIManageCollectionInMarkup */ /** * State component allows saving and restoring the state of the grid features. - * @igxParent IgxGridComponent, IgxTreeGridComponent, IgxHierarchicalGridComponent, IgxPivotGridComponent, * + * @igxParent IgxGridElementsComponent, IgxTreeGridElementsComponent, IgxHierarchicalGridElementsComponent, IgxPivotGridComponent, * */ @Component({ selector: 'igx-grid-state', diff --git a/projects/igniteui-angular/src/lib/action-strip/action-strip.component.ts b/projects/igniteui-angular/src/lib/action-strip/action-strip.component.ts index 5c407a0f3f0..db75e2346db 100644 --- a/projects/igniteui-angular/src/lib/action-strip/action-strip.component.ts +++ b/projects/igniteui-angular/src/lib/action-strip/action-strip.component.ts @@ -58,7 +58,7 @@ export class IgxActionStripMenuItemDirective { * * @igxGroup Data Entry & Display * - * @igxParent IgxGridComponent, IgxTreeGridComponent, IgxHierarchicalGridComponent, IgxRowIslandComponent, * + * @igxParent IgxGridElementsComponent, IgxHierarchicalGridElementsComponent, IgxTreeGridElementsComponent, IgxRowIslandElementsComponent, * * * @remarks * The Ignite UI Action Strip is a container, overlaying its parent container, diff --git a/projects/igniteui-angular/src/lib/grids/columns/column-group.component.ts b/projects/igniteui-angular/src/lib/grids/columns/column-group.component.ts index 0dc61063adf..d4f08d3a3cb 100644 --- a/projects/igniteui-angular/src/lib/grids/columns/column-group.component.ts +++ b/projects/igniteui-angular/src/lib/grids/columns/column-group.component.ts @@ -24,7 +24,7 @@ import { CellType, ColumnType, IgxColumnTemplateContext } from '../common/grid.i /** * **Ignite UI for Angular Column Group** * - * @igxParent IgxGridComponent, IgxTreeGridComponent, IgxHierarchicalGridComponent, IgxColumnGroupComponent, IgxRowIslandComponent + * @igxParent IgxGridElementsComponent, IgxHierarchicalGridElementsComponent, IgxTreeGridElementsComponent, IgxColumnGroupComponent, IgxRowIslandElementsComponent */ @Component({ changeDetection: ChangeDetectionStrategy.OnPush, diff --git a/projects/igniteui-angular/src/lib/grids/columns/column-layout.component.ts b/projects/igniteui-angular/src/lib/grids/columns/column-layout.component.ts index 2580d4f927a..0637969deb0 100644 --- a/projects/igniteui-angular/src/lib/grids/columns/column-layout.component.ts +++ b/projects/igniteui-angular/src/lib/grids/columns/column-layout.component.ts @@ -18,7 +18,7 @@ import { IgxColumnGroupComponent } from './column-group.component'; /** * Column layout for declaration of Multi-row Layout * - * @igxParent IgxGridComponent + * @igxParent IgxGridElementsComponent */ @Component({ changeDetection: ChangeDetectionStrategy.OnPush, diff --git a/projects/igniteui-angular/src/lib/grids/columns/column.component.ts b/projects/igniteui-angular/src/lib/grids/columns/column.component.ts index 9cffef0cb57..c522fb343cd 100644 --- a/projects/igniteui-angular/src/lib/grids/columns/column.component.ts +++ b/projects/igniteui-angular/src/lib/grids/columns/column.component.ts @@ -76,7 +76,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 IgxGridElementsComponent, IgxHierarchicalGridElementsComponent, IgxTreeGridElementsComponent, IgxPivotGridComponent, IgxRowIslandElementsComponent, IgxColumnGroupComponent, IgxColumnLayoutComponent, */ @Component({ changeDetection: ChangeDetectionStrategy.OnPush, @@ -1437,7 +1437,7 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy, ColumnTy } const unpinnedColumns = this.grid.unpinnedColumns.filter(c => !c.columnGroup); const pinnedColumns = this.grid.pinnedColumns.filter(c => !c.columnGroup); - + let col = this; let vIndex = -1; @@ -2326,10 +2326,10 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy, ColumnTy columns = columns.filter(c => c.level >= this.level && c !== this && c.parent !== this && c.topLevelParent === this.topLevelParent); } - + // If isPreceding, find a target such that when the current column is placed after it, current colummn will receive a visibleIndex === index. This takes into account visible children of the columns. // If !isPreceding, finds a column of the same level and visible index that equals the passed index agument (c.visibleIndex === index). No need to consider the children here. - + if (isPreceding) { columns = columns.filter(c => c.visibleIndex > this.visibleIndex); target = columns.find(c => c.level === this.level && c.visibleIndex + (c as any).calcChildren() - this.calcChildren() === index); diff --git a/projects/igniteui-angular/src/lib/grids/common/events.ts b/projects/igniteui-angular/src/lib/grids/common/events.ts index 93ece9f277a..e00bdab243a 100644 --- a/projects/igniteui-angular/src/lib/grids/common/events.ts +++ b/projects/igniteui-angular/src/lib/grids/common/events.ts @@ -512,14 +512,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/src/lib/grids/grid-base.directive.ts b/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts index f766a5d6b29..78ed49fa129 100644 --- a/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts +++ b/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts @@ -122,8 +122,7 @@ import { IRowDataCancelableEventArgs, IGridEditDoneEventArgs, IGridRowEventArgs, - IGridContextMenuEventArgs, - IColumnsAutoGeneratedEventArgs + IGridContextMenuEventArgs } from './common/events'; import { IgxAdvancedFilteringDialogComponent } from './filtering/advanced-filtering/advanced-filtering-dialog.component'; import { @@ -730,12 +729,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. @@ -995,11 +988,6 @@ export abstract class IgxGridBaseDirective implements GridType, @Output() public expansionStatesChange = new EventEmitter>(); - /* blazorInclude */ - /** @hidden @internal */ - @Output() - public selectedRowsChange = new EventEmitter(); - /** * Emitted when the expanded state of a row gets changed. * @@ -1150,19 +1138,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) + public actionStripComponent: IgxActionStripToken; /** @hidden @internal */ public get actionStrip() { - return this.actionStripComponents?.first; + return this.actionStripComponent; } /** @@ -3422,9 +3404,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(); } @@ -4930,7 +4909,7 @@ export abstract class IgxGridBaseDirective implements GridType, * @param value * @param condition * @param ignoreCase - * @deprecated in version 19.0.0. + * @deprecated in version 19.0.0. */ public filterGlobal(value: any, condition, ignoreCase?) { this.filteringService.filterGlobal(value, condition, ignoreCase); @@ -7081,7 +7060,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/src/lib/grids/hierarchical-grid/hierarchical-grid.component.ts b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.ts index 7e23eff7060..58219781f9c 100644 --- a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.ts +++ b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.ts @@ -440,9 +440,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/src/lib/grids/hierarchical-grid/row-island.component.ts b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/row-island.component.ts index c1ff8761a48..dce63544bdc 100644 --- a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/row-island.component.ts +++ b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/row-island.component.ts @@ -65,18 +65,13 @@ import { IgxPaginatorComponent } from '../../paginator/paginator.component'; * Row island * * @igxModule IgxHierarchicalGridModule - * @igxParent IgxHierarchicalGridComponent, IgxRowIslandComponent + * @igxParent IgxGridElementsComponent, IgxHierarchicalGridElementsComponent, IgxRowIslandElementsComponent * */ @Component({ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'igx-row-island', - template: `@if (platform.isElements) { -
- - -
- }`, + template: ``, providers: [ IgxRowIslandAPIService, IgxFilteringService, @@ -103,20 +98,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; - } - /** * @hidden */ @@ -172,17 +153,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/src/lib/grids/toolbar/grid-toolbar.component.ts b/projects/igniteui-angular/src/lib/grids/toolbar/grid-toolbar.component.ts index 3d98ac1d799..7dcfc8fc5c9 100644 --- a/projects/igniteui-angular/src/lib/grids/toolbar/grid-toolbar.component.ts +++ b/projects/igniteui-angular/src/lib/grids/toolbar/grid-toolbar.component.ts @@ -31,7 +31,7 @@ import { NgIf, NgTemplateOutlet } from '@angular/common'; * Provides a context-aware container component for UI operations for the grid components. * * @igxModule IgxGridToolbarModule - * @igxParent IgxGridComponent, IgxTreeGridComponent, IgxHierarchicalGridComponent, IgxPivotGridComponent + * @igxParent IgxGridElementsComponent, IgxHierarchicalGridElementsComponent, IgxTreeGridElementsComponent, IgxPivotGridComponent, * */ @Component({ diff --git a/projects/igniteui-angular/src/lib/paginator/paginator.component.ts b/projects/igniteui-angular/src/lib/paginator/paginator.component.ts index 9214a7d6761..21a6095123b 100644 --- a/projects/igniteui-angular/src/lib/paginator/paginator.component.ts +++ b/projects/igniteui-angular/src/lib/paginator/paginator.component.ts @@ -38,7 +38,7 @@ export class IgxPaginatorContentDirective { /* jsonAPIManageCollectionInMarkup */ /** * Paginator component description - * @igxParent IgxGridComponent, IgxTreeGridComponent, IgxHierarchicalGridComponent, IgxPivotGridComponent, * + * @igxParent IgxGridElementsComponent, IgxHierarchicalGridElementsComponent, IgxTreeGridElementsComponent, IgxHierarchicalGridComponent, IgxPivotGridComponent, * */ @Component({ selector: 'igx-paginator',