igniteui-cli 9.0.6 → 9.1.0-beta.0

package/lib/commands/start.js

@@ -13,6 +13,13 @@ const cli_core_1 = require("@igniteui/cli-core");
 const path = require("path");
 const resolve = require("resolve");
 const build_1 = require("./build");
+const execSyncNpmStart = (port, options) => {
+    if (port) {
+        cli_core_1.Util.execSync(`npm start -- --port=${port}`, options);
+        return;
+    }
+    cli_core_1.Util.execSync(`npm start`, options);
+};
 let command;
 // tslint:disable:object-literal-sort-keys
 command = {
@@ -57,6 +64,9 @@ command = {
                 cd14: config.project.theme
             });
             let port = Number(argv.port) || defaultPort;
+            // TODO: consider piping the stdin so that we handle the cp's termination
+            // this may require additional logic to be implemented if the cp asks for input
+            const options = { stdio: "inherit", killSignal: "SIGINT" };
             switch (framework.toLowerCase()) {
                 case "jquery":
                     // browser-sync installed per project
@@ -80,16 +90,8 @@ command = {
                     }
                 /* falls through */
                 case "angular":
-                    const options = { stdio: "inherit", killSignal: "SIGINT" };
-                    if (port) {
-                        cli_core_1.Util.execSync(`npm start -- --port=` + port, options);
-                    }
-                    else {
-                        cli_core_1.Util.execSync(`npm start`, options);
-                    }
-                    break;
                 case "webcomponents":
-                    cli_core_1.Util.execSync(`npm start`);
+                    execSyncNpmStart(port, options);
                 default:
                     break;
             }

package/lib/templates/IgniteUIForWebComponentsTemplate.js

@@ -28,8 +28,9 @@ class IgniteUIForWebComponentsTemplate {
         return Object.assign({}, options["extraConfig"], this.getBaseVariables(name));
     }
     registerInProject(projectPath, fullName, options) {
-        if (!(options && options.skipRoute) && cli_core_1.App.container.get(cli_core_1.FS_TOKEN).fileExists("src/index.ts")) {
-            const routingModule = new TypeScriptFileUpdate_1.TypeScriptFileUpdate(path.join(projectPath, "src/index.ts"));
+        if (!(options && options.skipRoute) && cli_core_1.App.container.get(cli_core_1.FS_TOKEN)
+            .fileExists("src/app/app-routing.ts")) {
+            const routingModule = new TypeScriptFileUpdate_1.TypeScriptFileUpdate(path.join(projectPath, "src/app/app-routing.ts"));
             routingModule.addRoute(path.join(projectPath, `src/app/${this.folderName(fullName)}/${this.fileName(fullName)}.component.ts`), this.fileName(fullName), cli_core_1.Util.nameFromPath(fullName));
         }
     }

package/package.json

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

package/templates/webcomponents/TypeScriptFileUpdate.js

@@ -84,7 +84,7 @@ class TypeScriptFileUpdate {
     //#endregion File state
     addRouteModuleEntry(targetPath, filePath, linkText, linkPath, routesVariable = DEFAULT_ROUTES_VARIABLE, parentRoutePath) {
         let className;
-        const relativePath = "./app/" + filePath + "/" + filePath;
+        const relativePath = "./" + filePath + "/" + filePath;
         className = "app-" + filePath;
         this.requestImport(relativePath);
         // https://github.com/Microsoft/TypeScript/issues/14419#issuecomment-307256171

package/templates/webcomponents/igc-ts/avatar/default/files/src/app/__path__/{__filePrefix__.component.test.ts → __filePrefix__.test.ts}

@@ -1,5 +1,5 @@
 import { expect } from '@open-wc/testing';
-import $(ClassName) from './$(path)';
+import $(ClassName) from './$(path).js';
 
 describe('IgcAvatarComponent', () => {
   it('<app-$(path)> is an instance of $(ClassName)', async () => {

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

@@ -1,3 +1,5 @@
+import { html, LitElement } from 'lit';
+import { customElement } from 'lit/decorators.js';
 import {
   defineComponents,
   IgcAvatarComponent,
@@ -5,9 +7,10 @@ import {
 
 defineComponents(IgcAvatarComponent);
 
-export default class $(ClassName) extends HTMLElement {
-  connectedCallback() {
-    this.innerHTML = `
+@customElement('app-$(path)')
+export default class $(ClassName) extends LitElement {
+  render() {
+    return html`
       <igc-avatar
         size="large"
         shape="circle"
@@ -18,5 +21,3 @@ export default class $(ClassName) extends HTMLElement {
     `;
   }
 }
-
-customElements.define('app-$(path)', $(ClassName));

package/templates/webcomponents/igc-ts/badge/default/files/src/app/__path__/{__filePrefix__.component.test.ts → __filePrefix__.test.ts}

@@ -1,5 +1,5 @@
 import { expect } from '@open-wc/testing';
-import $(ClassName) from './$(path)';
+import $(ClassName) from './$(path).js';
 
 describe('IgcBadgeComponent', () => {
   it('<app-$(path)> is an instance of $(ClassName)', async () => {
@@ -7,4 +7,3 @@ describe('IgcBadgeComponent', () => {
     expect(element).to.be.instanceOf($(ClassName));
   });
 });
-

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

@@ -1,3 +1,5 @@
+import { html, css, LitElement } from 'lit';
+import { customElement } from 'lit/decorators.js';
 import {
   defineComponents,
   IgcBadgeComponent,
@@ -5,23 +7,25 @@ import {
 
 defineComponents(IgcBadgeComponent);
 
-export default class $(ClassName) extends HTMLElement {
-  connectedCallback() {
-    this.innerHTML = `
-      <style>
-        #labels {
-          flex-grow: 1;
-          display: flex;
-          flex-direction: column;
-          border-style: groove;
-        }
-        igc-badge {
-          padding: 3px;
-        }
-        label {
-          padding: 5px;
-        }
-      </style>
+@customElement('app-$(path)')
+export default class $(ClassName) extends LitElement {
+  static styles = css`
+    #labels {
+      flex-grow: 1;
+      display: flex;
+      flex-direction: column;
+      border-style: groove;
+    }
+    igc-badge {
+      padding: 3px;
+    }
+    label {
+      padding: 5px;
+    }
+  `;
+
+  render() {
+    return html`
       <div id='labels'>
         <label>Labels</label>
         <igc-badge
@@ -42,5 +46,3 @@ export default class $(ClassName) extends HTMLElement {
     `;
   }
 }
-
-customElements.define('app-$(path)', $(ClassName));

package/templates/webcomponents/igc-ts/button/default/files/src/app/__path__/{__filePrefix__.component.test.ts → __filePrefix__.test.ts}

@@ -1,5 +1,5 @@
 import { expect } from '@open-wc/testing';
-import $(ClassName) from './$(path)';
+import $(ClassName) from './$(path).js';
 
 describe('IgcButtonComponent', () => {
   it('<app-$(path)> is an instance of $(ClassName)', async () => {
@@ -7,4 +7,3 @@ describe('IgcButtonComponent', () => {
     expect(element).to.be.instanceOf($(ClassName));
   });
 });
-

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

@@ -1,3 +1,5 @@
+import { html, LitElement } from 'lit';
+import { customElement } from 'lit/decorators.js';
 import {
   defineComponents,
   IgcButtonComponent,
@@ -5,9 +7,10 @@ import {
 
 defineComponents(IgcButtonComponent);
 
-export default class $(ClassName) extends HTMLElement {
-  connectedCallback() {
-    this.innerHTML = `
+@customElement('app-$(path)')
+export default class $(ClassName) extends LitElement {
+  render() {
+    return html`
       <igc-button
         size='large'>
         Large button
@@ -15,5 +18,3 @@ export default class $(ClassName) extends HTMLElement {
     `;
   }
 }
-
-customElements.define('app-$(path)', $(ClassName));

package/templates/webcomponents/igc-ts/calendar/default/files/src/app/__path__/{__filePrefix__.component.test.ts → __filePrefix__.test.ts}

@@ -1,5 +1,5 @@
 import { expect } from '@open-wc/testing';
-import $(ClassName) from './$(path)';
+import $(ClassName) from './$(path).js';
 
 describe('IgcCalendarComponent', () => {
   it('<app-$(path)> is an instance of $(ClassName)', async () => {

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

@@ -1,3 +1,5 @@
+import { html, LitElement } from 'lit';
+import { customElement } from 'lit/decorators.js';
 import {
   defineComponents,
   IgcCalendarComponent,
@@ -5,9 +7,10 @@ import {
 
 defineComponents(IgcCalendarComponent);
 
-export default class $(ClassName) extends HTMLElement {
-  connectedCallback() {
-    this.innerHTML = `
+@customElement('app-$(path)')
+export default class $(ClassName) extends LitElement {
+  render() {
+    return html`
       <igc-calendar
         style="width:1300px"
         week-start="monday"
@@ -17,5 +20,3 @@ export default class $(ClassName) extends HTMLElement {
     `;
   }
 }
-
-customElements.define('app-$(path)', $(ClassName));

package/templates/webcomponents/igc-ts/card/default/files/src/app/__path__/{__filePrefix__.component.test.ts → __filePrefix__.test.ts}

@@ -1,5 +1,5 @@
 import { expect } from '@open-wc/testing';
-import $(ClassName) from './$(path)';
+import $(ClassName) from './$(path).js';
 
 describe('IgcCardComponent', () => {
   it('<app-$(path)> is an instance of $(ClassName)', async () => {

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

@@ -1,3 +1,5 @@
+import { html, css, LitElement } from 'lit';
+import { customElement } from 'lit/decorators.js';
 import {
   defineComponents,
   IgcCardActionsComponent,
@@ -12,53 +14,53 @@ defineComponents(
   IgcCardActionsComponent,
   IgcCardContentComponent,
   IgcCardHeaderComponent,
-  IgcCardMediaComponent
+  IgcCardMediaComponent,
 );
 
-export default class $(ClassName) extends HTMLElement {
-  connectedCallback() {
-    this.innerHTML = `
-    <style>
-      igc-card {
-        width: 400px
-      }
-    </style>
-    <igc-card>
-    <igc-card-media style="max-height: 194px">
-      <img
-        src="https://images.unsplash.com/photo-1518235506717-e1ed3306a89b?ixlib=rb-1.2.1&auto=format&fit=crop&w=320&q=180"
-      />
-    </igc-card-media>
-    <igc-card-header>
-      <igc-avatar
-        slot="thumbnail"
-        size="small"
-        shape="rounded"
-        src="https://www.infragistics.com/angular-demos/assets/images/men/1.jpg"
-      >
-      </igc-avatar>
-      <h3 slot="title">Title</h3>
-      <h5 slot="subtitle">Subtitle</h5>
-    </igc-card-header>
-    <igc-card-content>
-      <p>
-        New York City comprises 5 boroughs sitting where the Hudson River
-        meets the Atlantic Ocean. At its core is Manhattan, a densely
-        populated borough that’s among the world’s major commercial,
-        financial and cultural centers.
-      </p>
-    </igc-card-content>
-    <hr
-      style="height: 1px; margin: 0 0 8px 0; background-color: rgba(0,0,0, 0.2); border: 0px"
-    />
-    <igc-card-actions>
-      <igc-button slot="start" variant="flat">Like</igc-button>
-      <igc-button slot="start" variant="flat">Learn More</igc-button>
-      <igc-icon slot="end" name="home" collection="default"></igc-icon>
-    </igc-card-actions>
-  </igc-card>
+@customElement('app-$(path)')
+export default class $(ClassName) extends LitElement {
+  static styles = css`
+    igc-card {
+      width: 400px;
+    }
+  `;
+
+  render() {
+    return html`
+      <igc-card>
+        <igc-card-media style="max-height: 194px">
+          <img
+            src="https://images.unsplash.com/photo-1518235506717-e1ed3306a89b?ixlib=rb-1.2.1&auto=format&fit=crop&w=320&q=180"
+          />
+        </igc-card-media>
+        <igc-card-header>
+          <igc-avatar
+            slot="thumbnail"
+            size="small"
+            shape="rounded"
+            src="https://www.infragistics.com/angular-demos/assets/images/men/1.jpg"
+          >
+          </igc-avatar>
+          <h3 slot="title">Title</h3>
+          <h5 slot="subtitle">Subtitle</h5>
+        </igc-card-header>
+        <igc-card-content>
+          <p>
+            New York City comprises 5 boroughs sitting where the Hudson River
+            meets the Atlantic Ocean. At its core is Manhattan, a densely
+            populated borough that’s among the world’s major commercial,
+            financial and cultural centers.
+          </p>
+        </igc-card-content>
+        <hr
+          style="height: 1px; margin: 0 0 8px 0; background-color: rgba(0,0,0, 0.2); border: 0px"
+        />
+        <igc-card-actions>
+          <igc-button slot="start" variant="flat">Like</igc-button>
+          <igc-button slot="start" variant="flat">Learn More</igc-button>
+          <igc-icon slot="end" name="home" collection="default"></igc-icon>
+        </igc-card-actions>
+      </igc-card>
     `;
   }
 }
-
-customElements.define('app-$(path)', $(ClassName));

package/templates/webcomponents/igc-ts/checkbox/default/files/src/app/__path__/{__filePrefix__.component.test.ts → __filePrefix__.test.ts}

@@ -1,5 +1,5 @@
 import { expect } from '@open-wc/testing';
-import $(ClassName) from './$(path)';
+import $(ClassName) from './$(path).js';
 
 describe('IgcCheckboxComponent', () => {
   it('<app-$(path)> is an instance of $(ClassName)', async () => {

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

@@ -1,3 +1,5 @@
+import { html, LitElement } from 'lit';
+import { customElement } from 'lit/decorators.js';
 import {
   defineComponents,
   IgcCheckboxComponent,
@@ -5,16 +7,15 @@ import {
 
 defineComponents(IgcCheckboxComponent);
 
-export default class $(ClassName) extends HTMLElement {
-  connectedCallback() {
-    this.innerHTML = `
-    <igc-checkbox
-      checked="true"
-    >
-      Label
-    </igc-checkbox>
+@customElement('app-$(path)')
+export default class $(ClassName) extends LitElement {
+  render() {
+    return html`
+      <igc-checkbox
+        checked="true"
+      >
+        Label
+      </igc-checkbox>
     `;
   }
 }
-
-customElements.define('app-$(path)', $(ClassName));

package/templates/webcomponents/igc-ts/custom-templates/subscription-form/files/src/app/__path__/{__filePrefix__.component.test.ts → __filePrefix__.test.ts}

@@ -1,5 +1,5 @@
 import { expect } from '@open-wc/testing';
-import $(ClassName) from './$(path)';
+import $(ClassName) from './$(path).js';
 
 describe('IgcSubscriptionFormComponent', () => {
   it('<app-$(path)> is an instance of $(ClassName)', async () => {

package/templates/webcomponents/igc-ts/custom-templates/subscription-form/files/src/app/__path__/__filePrefix__.ts

@@ -1,32 +1,50 @@
+import { html, css, LitElement } from 'lit';
+import { customElement } from 'lit/decorators.js';
 import {
   defineComponents,
   IgcFormComponent,
   IgcInputComponent,
   IgcCheckboxComponent,
-  IgcButtonComponent
+  IgcButtonComponent,
 } from 'igniteui-webcomponents';
 
 defineComponents(IgcFormComponent, IgcInputComponent, IgcCheckboxComponent, IgcButtonComponent);
 
-export default class $(ClassName) extends HTMLElement {
-  connectedCallback() {
-    this.innerHTML = `
-      <style>
-        #form {
-          flex-grow: 1;
-          display: flex;
-          flex-direction: column;
-        }
-        .buttonContainer {
-          display: flex;
-        }
-        .buttonContainer > igc-button {
-          flex: 1;
-        }
-      </style>
+@customElement('app-$(path)')
+export default class $(ClassName) extends LitElement {
+  static styles = css`
+    #form {
+      flex-grow: 1;
+      display: flex;
+      flex-direction: column;
+    }
+    .buttonContainer {
+      display: flex;
+    }
+    .buttonContainer > igc-button {
+      flex: 1;
+    }
+  `;
 
+  private handleSubmit = (event:any) => {
+    const customEvent = event as CustomEvent<FormData>;
+    const formData = customEvent.detail;
+    const formKeys = formData.keys();
+    const formEntries = formData.entries();
+    let result = '';
+    do {
+      const pair = formEntries.next().value;
+      if (pair) {
+        result += `${pair[0]}=${pair[1]};`;
+      }
+    } while (!formKeys.next().done);
+    alert(result);
+  }
+
+  render() {
+    return html`
       <div class="container sample">
-        <igc-form id="form">
+        <igc-form id="form" @igcSubmit="${this.handleSubmit}">
           <div>Subscribe</div>
           <igc-input required name="name" type="text" label="Your Name"></igc-input>
           <igc-input required name="email" type="email" label="Your E-mail"></igc-input>
@@ -39,23 +57,5 @@ export default class $(ClassName) extends HTMLElement {
         </igc-form>
       </div>
     `;
-
-    document.addEventListener('igcSubmit', function (event) {
-      const customEvent = event as CustomEvent<FormData>;
-      const formData = customEvent.detail;
-      const formKeys = formData.keys();
-      const formEntries = formData.entries();
-      let result = '';
-      do {
-          const pair = formEntries.next().value;
-          if (pair) {
-              result += pair[0] + '=' + pair[1] + ';';
-          }
-        } while (!formKeys.next().done)
-      console.log(result);
-      alert(result);
-    });
   }
 }
-
-customElements.define('app-$(path)', $(ClassName));

package/templates/webcomponents/igc-ts/dock-manager/default/files/src/app/__path__/{__filePrefix__.component.test.ts → __filePrefix__.test.ts}

@@ -1,5 +1,5 @@
 import { expect } from '@open-wc/testing';
-import $(ClassName) from './$(path)';
+import $(ClassName) from './$(path).js';
 
 describe('IgcDockManagerComponent', () => {
   it('<app-$(path)> is an instance of $(ClassName)', async () => {

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

@@ -1,3 +1,5 @@
+import { html, css, LitElement } from 'lit';
+import { customElement } from 'lit/decorators.js';
 import {
   IgcDockManagerComponent,
   IgcDockManagerPaneType,
@@ -7,59 +9,59 @@ import { defineCustomElements } from 'igniteui-dockmanager/loader';
 
 defineCustomElements();
 
-export default class $(ClassName) extends HTMLElement {
-  constructor() {
-    super();
-    this.attachShadow({ mode: 'open' });
-    this.shadowRoot!.innerHTML = `
-    <style>
-      :host, igc-dockmanager {
-        height: 100%;
-        margin: 0px;
-        padding-left: 275px;
-        width: calc(100% - 275px);
-      }
+@customElement('app-$(path)')
+export default class $(ClassName) extends LitElement {
+  static styles = css`
+    :host, igc-dockmanager {
+      height: 100%;
+      margin: 0px;
+      padding-left: 275px;
+      width: calc(100% - 275px);
+    }
 
-      .dockManagerContent {
-        padding: 0.5rem;
-        height: calc(100% - 1rem);
-        width: calc(100% - 1rem);
-        display: flex;
-        flex-direction: column;
-        /* background: orange; */
-      }
+    .dockManagerContent {
+      padding: 0.5rem;
+      height: calc(100% - 1rem);
+      width: calc(100% - 1rem);
+      display: flex;
+      flex-direction: column;
+      /* background: orange; */
+    }
 
-      .dockManagerFull {
-        padding: 0rem;
-        margin: 0rem;
-        height: 100%;
-        width: 100%;
-        display: flex;
-        flex-direction: column;
-        overflow: hidden;
-      }
+    .dockManagerFull {
+      padding: 0rem;
+      margin: 0rem;
+      height: 100%;
+      width: 100%;
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+    }
 
-      .dockManagerFrame {
-        padding: 0rem;
-        margin: 0rem;
-        height: 100%;
-        width: 100%;
-        display: flex;
-        flex-direction: column;
-        overflow: hidden;
-      }
+    .dockManagerFrame {
+      padding: 0rem;
+      margin: 0rem;
+      height: 100%;
+      width: 100%;
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+    }
 
-      .employeesDetailsRow {
-        height: 4rem;
-        display: flex;
-        flex-direction: row;
-        padding-left: 0.5rem;
-        padding-right: 0.5rem;
-        padding-top: 0.5rem;
-        padding-bottom: 0.5rem;
-        align-items: center;
-      }
-    </style>
+    .employeesDetailsRow {
+      height: 4rem;
+      display: flex;
+      flex-direction: row;
+      padding-left: 0.5rem;
+      padding-right: 0.5rem;
+      padding-top: 0.5rem;
+      padding-bottom: 0.5rem;
+      align-items: center;
+    }
+  `;
+
+  render() {
+    return html`
     <igc-dockmanager id="dockManager">
       <div slot="content1" class="dockManagerContent">Content 1</div>
       <div slot="content2" class="dockManagerContent">Content 2</div>
@@ -77,8 +79,8 @@ export default class $(ClassName) extends HTMLElement {
   `;
   }
 
-  connectedCallback() {
-    const dockManager = document.getElementsByTagName('app-$(path)')[0].shadowRoot!.getElementById('dockManager') as IgcDockManagerComponent;
+  firstUpdated() {
+    const dockManager = this.shadowRoot?.getElementById('dockManager') as IgcDockManagerComponent;
     dockManager.layout = {
       rootPane: {
         type: IgcDockManagerPaneType.splitPane,
@@ -202,5 +204,3 @@ export default class $(ClassName) extends HTMLElement {
     };
   }
 }
-
-customElements.define('app-$(path)', $(ClassName));