Move all elements specific members from the angular grids into angular-element's source.

angular.json

@@ -360,7 +360,7 @@
                 {
                   "type": "allScript",
                   "maximumWarning": "2.5mb",
-                  "maximumError": "3mb"
+                  "maximumError": "3.5mb"
                 },
                 {
                   "type": "bundle",

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,

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,22 +532,23 @@ 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",
         childType: IgxColumnComponent,
         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",

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);

projects/igniteui-angular-elements/src/index.html

@@ -527,6 +527,9 @@ <h3 class="ig-typography__h6">Flat Grid (MRL column layout)</h3>
             </igc-grid-toolbar-actions>
         </igc-grid-toolbar>
     `;
+    virtualMachinesRowIsland.addEventListener('columnsAutogenerated', (e) => {
+        console.log('columns autogenerated for VirtualMachinesRowIsland', e);
+    });
     </script>
 
     <igc-grid auto-generate="false" id="mergedGrid" cell-merge-mode="always" width="100%" height="570px">