igniteui-cli 9.0.2 → 9.0.5-beta.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "igniteui-cli",
-  "version": "9.0.2",
+  "version": "9.0.5-beta.1",
   "description": "CLI tool for creating Ignite UI projects",
   "keywords": [
     "CLI",
@@ -72,8 +72,8 @@
     "all": true
   },
   "dependencies": {
-    "@igniteui/angular-templates": "~13.0.902",
-    "@igniteui/cli-core": "~9.0.2",
+    "@igniteui/angular-templates": "~13.0.905-beta.1",
+    "@igniteui/cli-core": "~9.0.5-beta.1",
     "chalk": "^2.3.2",
     "fs-extra": "^3.0.1",
     "glob": "^7.1.2",

package/templates/webcomponents/igc-ts/dock-manager/default/files/src/app/__path__/__filePrefix__.ts

@@ -91,15 +91,15 @@ export default class $(ClassName) extends HTMLElement {
               {
                 type: IgcDockManagerPaneType.contentPane,
                 contentId: 'content1',
-                header: 'Content Pane 1'
+                header: 'Content Pane 1',
               },
               {
                 type: IgcDockManagerPaneType.contentPane,
                 contentId: 'content2',
                 header: 'Unpinned Pane 1',
-                isPinned: false
-              }
-            ]
+                isPinned: false,
+              },
+            ],
           },
           {
             type: IgcDockManagerPaneType.splitPane,
@@ -119,25 +119,25 @@ export default class $(ClassName) extends HTMLElement {
                         {
                           type: IgcDockManagerPaneType.contentPane,
                           header: 'Document 1',
-                          contentId: 'content3'
+                          contentId: 'content3',
                         },
                         {
                           type: IgcDockManagerPaneType.contentPane,
                           header: 'Document 2',
-                          contentId: 'content4'
-                        }
-                      ]
-                    }
-                  ]
-                }
+                          contentId: 'content4',
+                        },
+                      ],
+                    },
+                  ],
+                },
               },
               {
                 type: IgcDockManagerPaneType.contentPane,
                 contentId: 'content5',
                 header: 'Unpinned Pane 2',
-                isPinned: false
-              }
-            ]
+                isPinned: false,
+              },
+            ],
           },
           {
             type: IgcDockManagerPaneType.splitPane,
@@ -150,38 +150,38 @@ export default class $(ClassName) extends HTMLElement {
                   {
                     type: IgcDockManagerPaneType.contentPane,
                     contentId: 'content6',
-                    header: 'Tab 1'
+                    header: 'Tab 1',
                   },
                   {
                     type: IgcDockManagerPaneType.contentPane,
                     contentId: 'content7',
-                    header: 'Tab 2'
+                    header: 'Tab 2',
                   },
                   {
                     type: IgcDockManagerPaneType.contentPane,
                     contentId: 'content8',
-                    header: 'Tab 3'
+                    header: 'Tab 3',
                   },
                   {
                     type: IgcDockManagerPaneType.contentPane,
                     contentId: 'content9',
-                    header: 'Tab 4'
+                    header: 'Tab 4',
                   },
                   {
                     type: IgcDockManagerPaneType.contentPane,
                     contentId: 'content10',
-                    header: 'Tab 5'
-                  }
-                ]
+                    header: 'Tab 5',
+                  },
+                ],
               },
               {
                 type: IgcDockManagerPaneType.contentPane,
                 contentId: 'content11',
-                header: 'Content Pane 2'
-              }
-            ]
-          }
-        ]
+                header: 'Content Pane 2',
+              },
+            ],
+          },
+        ],
       },
       floatingPanes: [
         {
@@ -194,11 +194,11 @@ export default class $(ClassName) extends HTMLElement {
             {
               type: IgcDockManagerPaneType.contentPane,
               contentId: 'content12',
-              header: 'Floating Pane'
-            }
-          ]
-        }
-      ]
+              header: 'Floating Pane',
+            },
+          ],
+        },
+      ],
     };
   }
 }

package/templates/webcomponents/igc-ts/grid/grid-editing/files/src/app/__path__/DataGridSharedData.ts

@@ -1,3 +1,4 @@
+/* eslint-disable no-param-reassign */
 export class DataGridSharedData {
   public static getEmployees(count?: number): any[] {
     if (count === undefined) {
@@ -102,7 +103,7 @@ export class DataGridSharedData {
       const items = this.getRandomNumber(10, 80);
       const value = price * items;
       const margin = this.getRandomNumber(3, 10);
-      const profit = Math.round((price * margin / 100) * items);
+      const profit = Math.round((price * (margin / 100)) * items);
       const country = this.getRandomItem(countries);
       sales.push({
         BundlePrice: price,

package/templates/webcomponents/igc-ts/grid/grid-editing/files/src/app/__path__/__filePrefix__.ts

@@ -1,3 +1,4 @@
+/* eslint-disable import/extensions */
 import {
   IgcDataGridModule,
   IgcGridColumnOptionsModule,
@@ -80,6 +81,11 @@ export default class $(ClassName) extends HTMLElement {
   }
 
   connectedCallback() {
+    const grid = document.getElementsByTagName('app-grid-editing')[0].shadowRoot!.getElementById('grid') as IgcDataGridComponent;
+    const commitButton = document.getElementsByTagName('app-grid-editing')[0].shadowRoot!.getElementById('commitClick') as HTMLButtonElement;
+    const undoButton = document.getElementsByTagName('app-grid-editing')[0].shadowRoot!.getElementById('undoClick') as HTMLButtonElement;
+    const redoButton = document.getElementsByTagName('app-grid-editing')[0].shadowRoot!.getElementById('redoClick') as HTMLButtonElement;
+
     const onCommitClick = () => {
       grid.commitEdits();
       commitButton.disabled = true;
@@ -115,7 +121,35 @@ export default class $(ClassName) extends HTMLElement {
       }
     };
 
-    const onDeleteCellUpdating = (s: IgcTemplateColumnComponent, e: IgcTemplateCellUpdatingEventArgs) => {
+    if (commitButton !== null) {
+      commitButton.onclick = onCommitClick;
+    }
+    if (undoButton !== null) {
+      undoButton.onclick = onUndoClick;
+    }
+
+    if (redoButton !== null) {
+      redoButton.onclick = onRedoClick;
+    }
+
+    const onDeleteRowClick = (e: MouseEvent) => {
+      const button = e.srcElement as HTMLButtonElement;
+      const viewIndex = parseInt(button.id, 10);
+      const rowItem = grid.actualDataSource.getItemAtIndex(viewIndex);
+
+      if (grid.editMode === EditModeType.CellBatch || grid.editMode === EditModeType.Row) {
+        grid.removeItem(rowItem);
+        commitButton.disabled = !grid.canCommit;
+        redoButton.disabled = !grid.canRedo;
+        undoButton.disabled = !grid.canUndo;
+      } else if (grid.editMode === EditModeType.Cell) {
+        // delete grid row immediately
+        grid.removeItem(rowItem);
+      }
+    };
+
+    const onDeleteCellUpdating = (s: IgcTemplateColumnComponent,
+      e: IgcTemplateCellUpdatingEventArgs) => {
       const content = e.content as HTMLDivElement;
       if (content.childElementCount === 0) {
         const button = document.createElement('button') as HTMLButtonElement;
@@ -143,22 +177,6 @@ export default class $(ClassName) extends HTMLElement {
       grid.editModeClickAction = event.target.value;
     };
 
-    const onDeleteRowClick = (e: MouseEvent) => {
-      const button = e.srcElement as HTMLButtonElement;
-      const viewIndex = parseInt(button.id);
-      const rowItem = grid.actualDataSource.getItemAtIndex(viewIndex);
-
-      if (grid.editMode === EditModeType.CellBatch || grid.editMode === EditModeType.Row) {
-        grid.removeItem(rowItem);
-        commitButton.disabled = !grid.canCommit;
-        redoButton.disabled = !grid.canRedo;
-        undoButton.disabled = !grid.canUndo;
-      } else if (grid.editMode === EditModeType.Cell) {
-        //delete grid row immediately
-        grid.removeItem(rowItem);
-      }
-    };
-
     const onCellValueChanging = (s: IgcDataGridComponent, e: IgcGridCellValueChangingEventArgs) => {
       if (s.editMode === EditModeType.CellBatch || grid.editMode === EditModeType.Row) {
         commitButton.disabled = !grid.canCommit;
@@ -170,9 +188,8 @@ export default class $(ClassName) extends HTMLElement {
         commitButton.disabled = true;
         s.setEditError(e.editID, 'Error, cell is empty');
       }
-  };
+    };
 
-    const grid = document.getElementsByTagName('app-$(path)')[0].shadowRoot!.getElementById('grid') as IgcDataGridComponent;
     if (grid !== null) {
       grid.dataSource = this.data;
       grid.activationMode = GridActivationMode.Cell;
@@ -181,32 +198,17 @@ export default class $(ClassName) extends HTMLElement {
       grid.cellValueChanging = onCellValueChanging;
     }
 
-    const dropDown = document.getElementsByTagName('app-$(path)')[0].shadowRoot!.getElementById('editModeDropBox');
+    const dropDown = document.getElementsByTagName('app-grid-editing')[0].shadowRoot!.getElementById('editModeDropBox');
     if (dropDown !== null) {
       dropDown.onchange = editModeChanged;
     }
 
-    const dropDown2 = document.getElementsByTagName('app-$(path)')[0].shadowRoot!.getElementById('editModeClickActionDropBox');
+    const dropDown2 = document.getElementsByTagName('app-grid-editing')[0].shadowRoot!.getElementById('editModeClickActionDropBox');
     if (dropDown2 !== null) {
       dropDown2.onchange = editModeClickActionChanged;
     }
 
-    let commitButton = document.getElementsByTagName('app-$(path)')[0].shadowRoot!.getElementById('commitClick') as HTMLButtonElement;
-    if (commitButton !== null) {
-      commitButton.onclick = onCommitClick;
-    }
-
-    let undoButton = document.getElementsByTagName('app-$(path)')[0].shadowRoot!.getElementById('undoClick') as HTMLButtonElement;
-    if (undoButton !== null) {
-      undoButton.onclick = onUndoClick;
-    }
-
-    let redoButton = document.getElementsByTagName('app-$(path)')[0].shadowRoot!.getElementById('redoClick') as HTMLButtonElement;
-    if (redoButton !== null) {
-      redoButton.onclick = onRedoClick;
-    }
-
-    const deleteRowColumn = document.getElementsByTagName('app-$(path)')[0].shadowRoot!.getElementById('deleteRowColumn') as IgcTemplateColumnComponent;
+    const deleteRowColumn = document.getElementsByTagName('app-grid-editing')[0].shadowRoot!.getElementById('deleteRowColumn') as IgcTemplateColumnComponent;
     if (deleteRowColumn !== null) {
       deleteRowColumn.cellUpdating = onDeleteCellUpdating;
     }

package/templates/webcomponents/igc-ts/grid/grid-summaries/files/src/app/__path__/DataGridSharedData.ts

@@ -1,3 +1,4 @@
+/* eslint-disable no-param-reassign */
 export class DataGridSharedData {
   public static getEmployees(count?: number): any[] {
     if (count === undefined) {
@@ -102,7 +103,7 @@ export class DataGridSharedData {
       const items = this.getRandomNumber(10, 80);
       const value = price * items;
       const margin = this.getRandomNumber(3, 10);
-      const profit = Math.round((price * margin / 100) * items);
+      const profit = Math.round((price * (margin / 100)) * items);
       const country = this.getRandomItem(countries);
       sales.push({
         BundlePrice: price,

package/templates/webcomponents/igc-ts/grid/grid-summaries/files/src/app/__path__/__filePrefix__.ts

@@ -1,3 +1,4 @@
+/* eslint-disable import/extensions, max-classes-per-file, class-methods-use-this */
 import {
   IgcDataGridModule,
   IgcGridColumnOptionsModule,
@@ -62,6 +63,8 @@ export default class $(ClassName) extends HTMLElement {
   }
 
   connectedCallback() {
+    const grid = document.getElementsByTagName('app-grid-summaries')[0].shadowRoot!.getElementById('grid') as IgcDataGridComponent;
+
     // Custom Calculator - calculates the count for all USA.
     class CustomDomestic extends SummaryCalculator {
       get displayName(): string {
@@ -81,13 +84,14 @@ export default class $(ClassName) extends HTMLElement {
 
       public aggregate(a: any): void {
         if (a.Countries === 'USA') {
-            this.usCountries += 1;
+          this.usCountries += 1;
         }
       }
     }
 
-    const onProvideCalculator = (s: IgcColumnSummaryDescription, e: IgcProvideCalculatorEventArgs) => {
-        e.calculator = new CustomDomestic();
+    const onProvideCalculator = (s: IgcColumnSummaryDescription,
+      e: IgcProvideCalculatorEventArgs) => {
+      e.calculator = new CustomDomestic();
     };
 
     const onLoad = () => {
@@ -175,7 +179,6 @@ export default class $(ClassName) extends HTMLElement {
       grid.summaryDescriptions.add(countries);
     };
 
-    const grid = document.getElementsByTagName('app-grid-summaries')[0].shadowRoot!.getElementById('grid') as IgcDataGridComponent;
     grid.dataSource = DataGridSharedData.getSales();
 
     onLoad();

package/templates/webcomponents/igc-ts/projects/empty/files/index.html

@@ -4,7 +4,7 @@
 <head>
   <meta charset="utf-8">
   <base href="/">
-  <link rel="stylesheet" href="./node_modules/igniteui-webcomponents/themes/bootstrap.css">
+  <link rel="stylesheet" href="./node_modules/igniteui-webcomponents/themes/light/bootstrap.css">
   <style>
     html, body {
       height: 100%;

package/templates/webcomponents/igc-ts/projects/empty/files/package.json

@@ -21,7 +21,7 @@
   "dependencies": {
     "@open-wc/testing": "^2.5.33",
     "@vaadin/router": "^1.7.4",
-    "igniteui-webcomponents": "1.0.0",
+    "igniteui-webcomponents": "2.0.0-beta.1",
     "igniteui-webcomponents-grids": "~1.4.1",
     "igniteui-webcomponents-core": "~1.4.1",
     "igniteui-webcomponents-layouts": "~1.4.1",

package/templates/webcomponents/igc-ts/projects/empty/files/src/app.ts

@@ -1,3 +1,4 @@
+/* eslint-disable no-return-assign */
 import {
   defineComponents,
   IgcNavDrawerComponent,
@@ -29,13 +30,13 @@ export class App extends HTMLElement {
       <igc-nav-drawer open=true>
         <igc-nav-drawer-header-item>Ignite UI CLI</igc-nav-drawer-header-item>
 
-        ${routes.filter((element, index) => index < routes.length - 1).map(i => this.innerHTML = `
+        ${routes.filter((element, index) => index < routes.length - 1).map(i => `
           <igc-nav-drawer-item>
             <span slot="content">
               <a style="text-decoration: none;" href="${i.path}">${i.name}<igc-ripple></igc-ripple></a>
             </span>
           </igc-nav-drawer-item>
-        `)}
+        `).join('')}
       </igc-nav-drawer>
     </div>
     `;

package/templates/webcomponents/igc-ts/projects/empty/files/src/index.ts

@@ -1,3 +1,4 @@
+/* eslint-disable import/extensions, quotes, no-tabs, indent, comma-dangle */
 import {
   Route,
   Router

package/templates/webcomponents/igc-ts/slider/default/files/src/app/__path__/__filePrefix__.ts

@@ -0,0 +1,23 @@
+import {
+  defineComponents,
+  IgcSliderComponent,
+} from 'igniteui-webcomponents';
+
+defineComponents(IgcSliderComponent);
+
+export default class $(ClassName) extends HTMLElement {
+  connectedCallback() {
+    this.innerHTML = `
+    <igc-slider
+      style="margin: 40px 20px; width: 200px;"
+      min="0"
+      max="2"
+      primary-ticks="3"
+    >
+    Label
+  </igc-slider>
+    `;
+  }
+}
+
+customElements.define('app-$(path)', $(ClassName));

package/templates/webcomponents/igc-ts/slider/default/index.d.ts

@@ -0,0 +1 @@
+export {};

package/templates/webcomponents/igc-ts/slider/default/index.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const IgniteUIForWebComponentsTemplate_1 = require("../../../../../lib/templates/IgniteUIForWebComponentsTemplate");
+class IgcSliderComponent extends IgniteUIForWebComponentsTemplate_1.IgniteUIForWebComponentsTemplate {
+    constructor() {
+        super(__dirname);
+        this.components = ["Slider"];
+        this.controlGroup = "Interactions";
+        this.listInComponentTemplates = true;
+        this.id = "slider";
+        this.projectType = "igc-ts";
+        this.name = "Slider";
+        this.description = `Basic slider component`;
+    }
+    addClassDeclaration(mainModule, projPath, name, modulePath) {
+        // not applicable with custom module
+    }
+}
+module.exports = new IgcSliderComponent();

package/templates/webcomponents/igc-ts/slider/index.d.ts

@@ -0,0 +1 @@
+export {};

package/templates/webcomponents/igc-ts/slider/index.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const cli_core_1 = require("@igniteui/cli-core");
+class IgcSliderComponent extends cli_core_1.BaseComponent {
+    /**
+     *
+     */
+    constructor() {
+        super(__dirname);
+        this.name = "Slider";
+        this.group = "Interactions";
+        this.description = `Basic slider component`;
+    }
+}
+module.exports = new IgcSliderComponent();