Merge pull request #3445 from IgniteUI/vnext

Merging vnext to master

.github/workflows/build-app-crm.yml

@@ -29,7 +29,7 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [18.x, 20.5.x]
+        node-version: [18.x, 20.x]
 
     # Steps represent a sequence of tasks that will be executed as part of the job
     steps:

.github/workflows/build-app-lob.yml

@@ -34,7 +34,7 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [18.x, 20.5.x]
+        node-version: [18.x, 20.x]
 
     # Steps represent a sequence of tasks that will be executed as part of the job
     steps:

ignite-ui-cli.json

@@ -3,7 +3,7 @@
   "project": {
     "defaultPort": 4200,
     "framework": "angular",
-    "projectType": "igx-ts",
+    "projectType": "igx-ts-legacy",
     "projectTemplate": "side-nav",
     "theme": "Custom",
     "isBundle": false,
@@ -16,4 +16,4 @@
   },
   "build": {},
   "packagesInstalled": true
-}
+}

live-editing/configs/GridConfigGenerator.ts

@@ -585,9 +585,9 @@ export class GridConfigGenerator implements IConfigGenerator {
             component: 'GridConditionalCellStyle2Component',
             additionalFiles: ['/src/app/directives/prevent-scroll.directive.ts', '/src/app/data/athletesData.ts'],
             appModuleConfig: new AppModuleConfig({
-                imports: ['IgxGridModule', 'GridConditionalCellStyle2Component', 'IgxPreventDocumentScrollModule'],
+                imports: ['IgxGridModule', 'GridConditionalCellStyle2Component', 'IgxPreventDocumentScrollModule', 'IgxButtonModule', 'IgxInputGroupModule'],
                 ngDeclarations: ['GridConditionalCellStyle2Component'],
-                ngImports: ['IgxPreventDocumentScrollModule', 'IgxGridModule']
+                ngImports: ['IgxPreventDocumentScrollModule', 'IgxGridModule', 'IgxButtonModule', 'IgxInputGroupModule']
             })
         }));
 
@@ -1345,9 +1345,9 @@ export class GridConfigGenerator implements IConfigGenerator {
             component: 'GridRowStylesComponent',
             additionalFiles: ['/src/app/directives/prevent-scroll.directive.ts', '/src/app/services/financial.service.ts', '/src/app/data/financialData.ts'],
             appModuleConfig: new AppModuleConfig({
-                imports: ['IgxGridModule', 'GridRowStylesComponent', 'IgxPreventDocumentScrollModule', 'FinancialDataService'],
+                imports: ['IgxGridModule', 'GridRowStylesComponent', 'IgxPreventDocumentScrollModule', 'IgxBadgeModule', 'FinancialDataService'],
                 ngDeclarations: ['GridRowStylesComponent'],
-                ngImports: ['IgxPreventDocumentScrollModule', 'IgxGridModule'],
+                ngImports: ['IgxPreventDocumentScrollModule', 'IgxGridModule', 'IgxBadgeModule'],
                 ngProviders: ['FinancialDataService']
             })
         }));

live-editing/configs/HierarchicalGridConfigGenerator.ts

@@ -907,9 +907,9 @@ export class HierarchicalGridConfigGenerator implements IConfigGenerator {
                 '/src/app/hierarchical-grid/models.ts'],
             component: 'HGridRowClassesSampleComponent',
             appModuleConfig: new AppModuleConfig({
-                imports: ['IgxPreventDocumentScrollModule', 'IgxHierarchicalGridModule', 'HGridRowClassesSampleComponent'],
+                imports: ['IgxPreventDocumentScrollModule', 'IgxHierarchicalGridModule', 'IgxIconModule', 'IgxButtonModule', 'HGridRowClassesSampleComponent'],
                 ngDeclarations: ['HGridRowClassesSampleComponent'],
-                ngImports: ['IgxPreventDocumentScrollModule', 'IgxHierarchicalGridModule']
+                ngImports: ['IgxPreventDocumentScrollModule', 'IgxHierarchicalGridModule', 'IgxIconModule', 'IgxButtonModule']
             })
         }));
 
@@ -918,9 +918,9 @@ export class HierarchicalGridConfigGenerator implements IConfigGenerator {
                 '/src/app/hierarchical-grid/models.ts'],
             component: 'HGridRowStylesSampleComponent',
             appModuleConfig: new AppModuleConfig({
-                imports: ['IgxPreventDocumentScrollModule', 'IgxHierarchicalGridModule', 'HGridRowStylesSampleComponent'],
+                imports: ['IgxPreventDocumentScrollModule', 'IgxHierarchicalGridModule', 'IgxIconModule', 'IgxButtonModule', 'HGridRowStylesSampleComponent'],
                 ngDeclarations: ['HGridRowStylesSampleComponent'],
-                ngImports: ['IgxPreventDocumentScrollModule', 'IgxHierarchicalGridModule']
+                ngImports: ['IgxPreventDocumentScrollModule', 'IgxHierarchicalGridModule', 'IgxIconModule', 'IgxButtonModule']
             })
         }));
 

live-editing/configs/IconButtonConfigGenerator.ts

@@ -0,0 +1,101 @@
+import {IgxButtonGroupModule,
+    IgxButtonModule,
+    IgxIconButtonDirective,
+    IgxIconModule,
+    IgxRippleModule} from 'igniteui-angular';
+import {AppModuleConfig, Config, IConfigGenerator} from 'igniteui-live-editing'
+export class IconButtonConfigGenerator implements IConfigGenerator {
+    public generateConfigs(): Config[] {
+        const configs = new Array<Config>();
+
+        // icon button overview
+        configs.push(new Config({
+            component: 'IconButtonOverviewComponent',
+            appModuleConfig: new AppModuleConfig({
+                imports: ['IgxButtonModule', 'IgxIconModule', 'IgxRippleModule', 'IgxIconButtonDirective', 'IconButtonOverviewComponent'],
+                ngDeclarations: ['IconButtonOverviewComponent'],
+                ngImports: ['IgxButtonModule', 'IgxIconModule', 'IgxRippleModule', 'IgxIconButtonDirective']
+            }),
+            shortenComponentPathBy: "/data-entries/icon-button/"
+        }));
+
+        // flat icon button
+        configs.push(new Config({
+            component: 'FlatIconButtonComponent',
+            appModuleConfig: new AppModuleConfig({
+                imports: ['IgxButtonModule', 'IgxIconModule', 'IgxRippleModule', 'IgxIconButtonDirective', 'FlatIconButtonComponent'],
+                ngDeclarations: ['FlatIconButtonComponent'],
+                ngImports: ['IgxButtonModule', 'IgxIconModule', 'IgxRippleModule', 'IgxIconButtonDirective']
+            }),
+            shortenComponentPathBy: "/data-entries/icon-button/"
+        }));
+
+        // contained icon button
+        configs.push(new Config({
+            component: 'ContainedIconButtonComponent',
+            appModuleConfig: new AppModuleConfig({
+                imports: ['IgxButtonModule', 'IgxIconModule', 'IgxRippleModule', 'IgxIconButtonDirective', 'ContainedIconButtonComponent'],
+                ngDeclarations: ['ContainedIconButtonComponent'],
+                ngImports: ['IgxButtonModule', 'IgxIconModule', 'IgxRippleModule', 'IgxIconButtonDirective']
+            }),
+            shortenComponentPathBy: "/data-entries/icon-button/"
+        }));
+
+        // outlined icon button
+        configs.push(new Config({
+            component: 'OutlinedIconButtonComponent',
+            appModuleConfig: new AppModuleConfig({
+                imports: ['IgxButtonModule', 'IgxIconModule', 'IgxRippleModule', 'IgxIconButtonDirective', 'OutlinedIconButtonComponent'],
+                ngDeclarations: ['OutlinedIconButtonComponent'],
+                ngImports: ['IgxButtonModule', 'IgxIconModule', 'IgxRippleModule', 'IgxIconButtonDirective']
+            }),
+            shortenComponentPathBy: "/data-entries/icon-button/"
+        }));
+
+        // disabled icon button
+        configs.push(new Config({
+            component: 'DisabledIconButtonComponent',
+            appModuleConfig: new AppModuleConfig({
+                imports: ['IgxButtonModule', 'IgxIconModule', 'IgxRippleModule', 'IgxIconButtonDirective', 'DisabledIconButtonComponent'],
+                ngDeclarations: ['DisabledIconButtonComponent'],
+                ngImports: ['IgxButtonModule', 'IgxIconModule', 'IgxRippleModule', 'IgxIconButtonDirective']
+            }),
+            shortenComponentPathBy: "/data-entries/icon-button/"
+        }));
+
+        // SVG icon button
+        configs.push(new Config({
+            component: 'SVGIconButtonComponent',
+            appModuleConfig: new AppModuleConfig({
+                imports: ['IgxButtonModule', 'IgxIconModule', 'IgxRippleModule', 'IgxIconButtonDirective', 'SVGIconButtonComponent'],
+                ngDeclarations: ['SVGIconButtonComponent'],
+                ngImports: ['IgxButtonModule', 'IgxIconModule', 'IgxRippleModule', 'IgxIconButtonDirective']
+            }),
+            shortenComponentPathBy: "/data-entries/icon-button/"
+        }));
+
+        // icon button styling
+        configs.push(new Config({
+            component: 'IconButtonStylingComponent',
+            appModuleConfig: new AppModuleConfig({
+                imports: ['IgxButtonModule', 'IgxIconModule', 'IgxRippleModule', 'IgxIconButtonDirective', 'IconButtonStylingComponent'],
+                ngDeclarations: ['IconButtonStylingComponent'],
+                ngImports: ['IgxButtonModule', 'IgxIconModule', 'IgxRippleModule', 'IgxIconButtonDirective']
+            }),
+            shortenComponentPathBy: "/data-entries/icon-button/"
+        }));
+
+        // icon button size
+        configs.push(new Config({
+            component: 'IconButtonSizeComponent',
+            appModuleConfig: new AppModuleConfig({
+                imports: ['IgxButtonModule', 'IgxIconModule', 'IgxRippleModule', 'IgxIconButtonDirective', 'IconButtonSizeComponent'],
+                ngDeclarations: ['IconButtonSizeComponent'],
+                ngImports: ['IgxButtonModule', 'IgxIconModule', 'IgxRippleModule', 'IgxIconButtonDirective']
+            }),
+            shortenComponentPathBy: "/data-entries/icon-button/"
+        }));
+
+        return configs;
+    }
+}

live-editing/configs/TreeGridConfigGenerator.ts

@@ -866,9 +866,9 @@ export class TreeGridConfigGenerator implements IConfigGenerator {
             component: 'TreeGridConditionalCellStyle2Component',
             additionalFiles: ['/src/app/directives/prevent-scroll.directive.ts', '/src/app/tree-grid/data/orders.ts'],
             appModuleConfig: new AppModuleConfig({
-                imports: ['IgxPreventDocumentScrollModule', 'IgxTreeGridModule', 'TreeGridConditionalCellStyle2Component'],
+                imports: ['IgxPreventDocumentScrollModule', 'IgxTreeGridModule', 'IgxButtonModule', 'IgxInputGroupModule', 'TreeGridConditionalCellStyle2Component'],
                 ngDeclarations: ['TreeGridConditionalCellStyle2Component'],
-                ngImports: ['IgxPreventDocumentScrollModule', 'IgxTreeGridModule']
+                ngImports: ['IgxPreventDocumentScrollModule', 'IgxTreeGridModule', 'IgxButtonModule', 'IgxInputGroupModule']
             })
         }));
 
@@ -1072,11 +1072,9 @@ export class TreeGridConfigGenerator implements IConfigGenerator {
         configs.push(new Config({
             additionalFiles: ['/src/app/directives/prevent-scroll.directive.ts', '/src/app/tree-grid/data/employees-flat.ts', '/src/app/tree-grid/tree-grid-add-row-sample/employee.ts'],
             appModuleConfig: new AppModuleConfig({
-                imports: ['IgxPreventDocumentScrollModule', 'IgxTreeGridModule', 'TreeGridAddRowSampleComponent', 'IgxButtonModule', 'IgxDialogModule',
-                    'IgxInputGroupModule', 'IgxCheckboxModule', 'IgxDatePickerModule', 'IgxActionStripModule'],
+                imports: ['IgxPreventDocumentScrollModule', 'IgxTreeGridModule', 'TreeGridAddRowSampleComponent', 'IgxIconModule', 'IgxActionStripModule'],
                 ngDeclarations: ['TreeGridAddRowSampleComponent'],
-                ngImports: ['IgxPreventDocumentScrollModule', 'IgxTreeGridModule', 'IgxButtonModule', 'IgxDialogModule',
-                    'IgxInputGroupModule', 'IgxCheckboxModule', 'IgxDatePickerModule', 'IgxActionStripModule']
+                ngImports: ['IgxPreventDocumentScrollModule', 'IgxTreeGridModule', 'IgxIconModule', 'IgxActionStripModule']
             }),
             component: 'TreeGridAddRowSampleComponent',
             shortenComponentPathBy: '/tree-grid/'

live-editing/generators/ConfigGenerators.ts

@@ -28,6 +28,7 @@ import { ForConfigGenerator } from '../configs/ForConfigGenerator';
 import { GridConfigGenerator } from '../configs/GridConfigGenerator';
 import { HierarchicalGridConfigGenerator } from '../configs/HierarchicalGridConfigGenerator';
 import { IconConfigGenerator } from '../configs/IconConfigGenerator';
+import { IconButtonConfigGenerator } from '../configs/IconButtonConfigGenerator';
 import { InputGroupConfigGenerator } from '../configs/InputGroupConfigGenerator';
 import { LayoutConfigGenerator } from '../configs/LayoutConfigGenerator';
 import { LinearProgressbarConfigGenerator } from '../configs/LinearProgressbarConfigGenerator';
@@ -99,6 +100,7 @@ export const CONFIG_GENERATORS =
         DateRangePickerConfigGenerator,
         DateTimeEditorConfigGenerator,
         DropDownConfigGenerator,
+        IconButtonConfigGenerator,
         InputGroupConfigGenerator,
         MaskConfigGenerator,
         MonthPickerConfigGenerator,