igniteui-cli 10.0.1 → 10.0.2-beta.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "igniteui-cli",
-  "version": "10.0.1",
+  "version": "10.0.2-beta.1",
   "description": "CLI tool for creating Ignite UI projects",
   "keywords": [
     "CLI",
@@ -72,8 +72,8 @@
     "all": true
   },
   "dependencies": {
-    "@igniteui/angular-templates": "~14.0.1001",
-    "@igniteui/cli-core": "~10.0.1",
+    "@igniteui/angular-templates": "~14.0.1002-beta.1",
+    "@igniteui/cli-core": "~10.0.2-beta.1",
     "chalk": "^2.3.2",
     "fs-extra": "^3.0.1",
     "glob": "^7.1.2",
@@ -85,9 +85,9 @@
     "yargs": "^8.0.2"
   },
   "devDependencies": {
-    "@angular-devkit/core": "~13.0.0",
-    "@angular-devkit/schematics": "~13.0.0",
-    "@schematics/angular": "~13.0.0",
+    "@angular-devkit/core": "~14.0.0",
+    "@angular-devkit/schematics": "~14.0.0",
+    "@schematics/angular": "~14.0.0",
     "@types/fs-extra": "^3.0.3",
     "@types/inquirer": "0.0.35",
     "@types/jasmine": "~3.5.0",

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

@@ -0,0 +1,9 @@
+import { expect } from '@open-wc/testing';
+import $(ClassName) from './$(path).js';
+
+describe('IgcDropdownComponent', () => {
+  it('<app-$(path)> is an instance of $(ClassName)', async () => {
+    const element = document.createElement('app-$(path)');
+    expect(element).to.be.instanceOf($(ClassName));
+  });
+});

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

@@ -0,0 +1,58 @@
+import { html, LitElement } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import {
+  defineComponents,
+  IgcButtonComponent,
+  IgcDropdownComponent,
+  IgcDropdownItemComponent,
+  IgcDropdownGroupComponent,
+} from 'igniteui-webcomponents';
+
+defineComponents(
+  IgcButtonComponent,
+  IgcDropdownComponent,
+  IgcDropdownItemComponent,
+  IgcDropdownGroupComponent,
+);
+
+@customElement('app-$(path)')
+export default class $(ClassName) extends LitElement {
+  render() {
+    return html`
+      <igc-dropdown>
+        <igc-button slot="target">Countries</igc-button>
+        <igc-dropdown-group>
+          <span slot="label">Europe</span>
+          <igc-dropdown-item>
+            Germany
+            <span slot="suffix">DE</span>
+          </igc-dropdown-item>
+          <igc-dropdown-item>
+            France
+            <span slot="suffix">FR</span>
+          </igc-dropdown-item>
+          <igc-dropdown-item>
+            Spain
+            <span slot="suffix">ES</span>
+          </igc-dropdown-item>
+        </igc-dropdown-group>
+
+        <igc-dropdown-group>
+          <span slot="label">North America</span>
+          <igc-dropdown-item>
+            USA
+            <span slot="suffix">US</span>
+          </igc-dropdown-item>
+          <igc-dropdown-item disabled>
+            Canada
+            <span slot="suffix">CA</span>
+          </igc-dropdown-item>
+          <igc-dropdown-item>
+            Mexico
+            <span slot="suffix">MX</span>
+          </igc-dropdown-item>
+        </igc-dropdown-group>
+      </igc-dropdown>
+    `;
+  }
+}

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

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

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

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const IgniteUIForWebComponentsTemplate_1 = require("../../../../../lib/templates/IgniteUIForWebComponentsTemplate");
+class IgcDropdownTemplate extends IgniteUIForWebComponentsTemplate_1.IgniteUIForWebComponentsTemplate {
+    constructor() {
+        super(__dirname);
+        this.components = ["Dropdown"];
+        this.controlGroup = "Data Entry & Display";
+        this.listInComponentTemplates = true;
+        this.id = "dropdown";
+        this.projectType = "igc-ts";
+        this.name = "Dropdown";
+        this.description = "IgcDropdown with groups and disabled items";
+    }
+    addClassDeclaration(mainModule, projPath, name, modulePath) {
+        // not applicable with custom module
+    }
+}
+module.exports = new IgcDropdownTemplate();

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

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

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

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const cli_core_1 = require("@igniteui/cli-core");
+class IgcDropdownComponent extends cli_core_1.BaseComponent {
+    /**
+     *
+     */
+    constructor() {
+        super(__dirname);
+        this.name = "Dropdown";
+        this.group = "Data Entry & Display";
+        this.description = `Displays a toggleable list of predefined values`;
+    }
+}
+module.exports = new IgcDropdownComponent();

package/templates/webcomponents/igc-ts/expansion-panel/default/files/src/app/__path__/__filePrefix__.test.ts

@@ -0,0 +1,9 @@
+import { expect } from '@open-wc/testing';
+import $(ClassName) from './$(path).js';
+
+describe('IgcExpansionPanelComponent', () => {
+  it('<app-$(path)> is an instance of $(ClassName)', async () => {
+    const element = document.createElement('app-$(path)');
+    expect(element).to.be.instanceOf($(ClassName));
+  });
+});

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

@@ -0,0 +1,44 @@
+import { html, css, LitElement } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import {
+  defineComponents,
+  IgcExpansionPanelComponent,
+} from 'igniteui-webcomponents';
+
+defineComponents(
+  IgcExpansionPanelComponent,
+);
+
+@customElement('app-$(path)')
+export default class $(ClassName) extends LitElement {
+  static styles = css`
+    :host, igc-expansion-panel{
+      width: 100%;
+    }
+  `;
+
+  render() {
+    return html`
+      <igc-expansion-panel>
+        <h1 slot="title">Golden Retriever</h1>
+        <h3 slot="subtitle">Medium-large gun dog</h3>
+        <span>
+          The Golden Retriever is a medium-large gun dog that retrieves shot waterfowl, such as ducks
+          and upland game birds, during hunting and shooting parties.[3] The name "retriever" refers to the breed's ability
+          to retrieve shot game undamaged due to their soft mouth. Golden retrievers have an instinctive love of water, and
+          are easy to train to basic or advanced obedience standards.
+        </span>
+      </igc-expansion-panel>
+      <igc-expansion-panel>
+        <h1 slot="title">Dobermann</h1>
+        <h3 slot="subtitle">Medium-large domestic dog</h3>
+        <span>
+          Dobermanns are known to be intelligent, alert, and tenaciously loyal companions and guard dogs.
+          Personality varies a great deal between each individual but, if taken care of and properly trained, they are generally
+          considered to be loving and devoted companions. The Dobermann is driven, strong, and sometimes stubborn.
+          With a consistent approach, they can be easy to train and will learn very quickly.
+        </span>
+      </igc-expansion-panel>
+    `;
+  }
+}

package/templates/webcomponents/igc-ts/expansion-panel/default/index.d.ts

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

package/templates/webcomponents/igc-ts/expansion-panel/default/index.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const IgniteUIForWebComponentsTemplate_1 = require("../../../../../lib/templates/IgniteUIForWebComponentsTemplate");
+class IgcDropdownTemplate extends IgniteUIForWebComponentsTemplate_1.IgniteUIForWebComponentsTemplate {
+    constructor() {
+        super(__dirname);
+        this.components = ["Expansion Panel"];
+        this.controlGroup = "Layouts";
+        this.listInComponentTemplates = true;
+        this.id = "expansion-panel";
+        this.projectType = "igc-ts";
+        this.name = "Expansion Panel";
+        this.description = "A lightweight accordion component";
+    }
+    addClassDeclaration(mainModule, projPath, name, modulePath) {
+        // not applicable with custom module
+    }
+}
+module.exports = new IgcDropdownTemplate();

package/templates/webcomponents/igc-ts/expansion-panel/index.d.ts

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

package/templates/webcomponents/igc-ts/expansion-panel/index.js

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

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

@@ -3,11 +3,9 @@ import { customElement } from 'lit/decorators.js';
 import {
   defineComponents,
   IgcIconComponent,
-} from 'igniteui-webcomponents';
-import {
   registerIcon,
   registerIconFromText,
-} from 'igniteui-webcomponents/components/icon/icon.registry';
+} from 'igniteui-webcomponents';
 
 defineComponents(IgcIconComponent);
 

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

@@ -3,16 +3,16 @@ import { customElement } from 'lit/decorators.js';
 import {
   defineComponents,
   IgcIconButtonComponent,
+  registerIconFromText,
 } from 'igniteui-webcomponents';
-import {
-  registerIcon,
-} from 'igniteui-webcomponents/components/icon/icon.registry';
 
 defineComponents(IgcIconButtonComponent);
+const buildIcon =
+  '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M22.7 19l-9.1-9.1c.9-2.3.4-5-1.5-6.9-2-2-5-2.4-7.4-1.3L9 6 6 9 1.6 4.7C.4 7.1.9 10.1 2.9 12.1c1.9 1.9 4.6 2.4 6.9 1.5l9.1 9.1c.4.4 1 .4 1.4 0l2.3-2.3c.5-.4.5-1.1.1-1.4z"/></svg>';
 
-registerIcon(
+registerIconFromText(
   'build',
-  'https://unpkg.com/material-design-icons@3.0.1/action/svg/production/ic_build_24px.svg',
+  buildIcon,
   'material',
 );
 

package/templates/webcomponents/igc-ts/projects/_base/files/README.md

@@ -0,0 +1,39 @@
+# $(dashName)
+
+This project was generated with [Ignite UI CLI](https://github.com/IgniteUI/igniteui-cli) version $(cliVersion).
+
+## Development server
+
+Run `ig start` to build the application, start a web server and open the application in the default browser. Then navigate to `http://localhost:8000/`. Default serving port can be configured in `ignite-ui-cli.json` via `defaultPort` property.
+
+## Build
+
+Run `ig build` to build the application into an output directory.
+
+## Step by step mode
+
+If you want to get a guided experience through the available options, you can initialize the step by step mode that will help you to create and setup your new application, as well as update project previously created with the Ignite UI CLI. To start the guide, simply run the `ig` command.
+
+## List templates
+
+The `ig list` lists all available templates. When you run the command within a project folder it will list all available templates, even if you have provided different ones.
+
+## Adding components
+
+Add a new component or template to the project passing component ID and choosing a name.
+
+`ig add <component/template> <component_name>`
+
+The ID matches either a component ("grid", "dropdown", etc) or a predefined template. Predefined templates can provide either multiple components or fulfilling a specific use case like "subscription-form".
+
+## Running unit tests
+
+Run `ig test` to execute the unit tests via [@web/test-runner](https://modern-web.dev/docs/test-runner/overview). Runs all `.test.ts` files.
+
+## Help
+
+`ig help` lists the available commands and provides a brief description of what they do.
+
+### Further help
+
+To get more help on the IgniteUI CLI go check out the [IgniteUI CLI Wiki](https://github.com/IgniteUI/igniteui-cli/wiki).

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

@@ -21,15 +21,15 @@
   },
   "dependencies": {
     "@vaadin/router": "^1.7.4",
-    "igniteui-webcomponents": "2.1.0",
-    "igniteui-webcomponents-grids": "~1.4.1",
-    "igniteui-webcomponents-core": "~1.4.1",
-    "igniteui-webcomponents-layouts": "~1.4.1",
-    "igniteui-webcomponents-inputs": "~1.4.1",
-    "igniteui-webcomponents-charts": "~1.4.1",
-    "igniteui-webcomponents-gauges": "~1.4.1",
-    "igniteui-dockmanager": "~1.6.0",
-    "@igniteui/material-icons-extended": "^2.10.0",
+    "igniteui-webcomponents": "~3.2.0",
+    "igniteui-webcomponents-grids": "~3.2.1",
+    "igniteui-webcomponents-core": "~3.2.1",
+    "igniteui-webcomponents-layouts": "~3.2.1",
+    "igniteui-webcomponents-inputs": "~3.2.1",
+    "igniteui-webcomponents-charts": "~3.2.1",
+    "igniteui-webcomponents-gauges": "~3.2.1",
+    "igniteui-dockmanager": "~1.8.0",
+    "@igniteui/material-icons-extended": "^2.11.0",
     "lit": "^2.0.2",
     "typescript": "^4.5.2"
   },

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

@@ -7,7 +7,6 @@ import { routes } from './app-routing.js';
 export class App extends LitElement {
   static styles = css`
     router-outlet {
-      width: 100%;
       height: 100%;
       display: flex;
       text-align: center;

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

@@ -22,7 +22,6 @@ defineComponents(
 export class App extends LitElement {
   static styles = css`
     router-outlet {
-      width: 100%;
       height: 100%;
       display: flex;
       text-align: center;
@@ -31,11 +30,15 @@ export class App extends LitElement {
       align-items: center;
       overflow: inherit;
     }
+
+    igc-nav-drawer {
+      float: left;
+    }
   `;
 
   render() {
     return html`
-      <igc-nav-drawer open=true>
+      <igc-nav-drawer open="true" position="relative">
         <igc-nav-drawer-header-item>Ignite UI CLI</igc-nav-drawer-header-item>
         ${routes.filter((element, index) => index < routes.length - 1).map(i => html`
           <igc-nav-drawer-item>

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

@@ -0,0 +1,9 @@
+import { expect } from '@open-wc/testing';
+import $(ClassName) from './$(path).js';
+
+describe('IgcTreeComponent', () => {
+  it('<app-$(path)> is an instance of $(ClassName)', async () => {
+    const element = document.createElement('app-$(path)');
+    expect(element).to.be.instanceOf($(ClassName));
+  });
+});

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

@@ -0,0 +1,33 @@
+import { html, LitElement } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import {
+  defineComponents,
+  IgcTreeComponent,
+  IgcTreeItemComponent,
+} from 'igniteui-webcomponents';
+
+defineComponents(IgcTreeComponent, IgcTreeItemComponent);
+
+@customElement('app-$(path)')
+export default class $(ClassName) extends LitElement {
+  render() {
+    return html`
+      <igc-tree>
+        <igc-tree-item label="North America">
+          <igc-tree-item label="United States"></igc-tree-item>
+          <igc-tree-item label="Canada"></igc-tree-item>
+          <igc-tree-item label="Mexico"></igc-tree-item>
+        </igc-tree-item>
+        <igc-tree-item label="South America">
+          <igc-tree-item label="Brazil"></igc-tree-item>
+          <igc-tree-item label="Uruguay"></igc-tree-item>
+        </igc-tree-item>
+        <igc-tree-item label="Europe">
+          <igc-tree-item label="United Kingdom"></igc-tree-item>
+          <igc-tree-item label="Germany"></igc-tree-item>
+          <igc-tree-item label="Bulgaria"></igc-tree-item>
+        </igc-tree-item>
+      </igc-tree>
+    `;
+  }
+}

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

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

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

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const IgniteUIForWebComponentsTemplate_1 = require("../../../../../lib/templates/IgniteUIForWebComponentsTemplate");
+class IgcTreeTemplate extends IgniteUIForWebComponentsTemplate_1.IgniteUIForWebComponentsTemplate {
+    constructor() {
+        super(__dirname);
+        this.components = ["Tree"];
+        this.controlGroup = "Grids & Lists";
+        this.listInComponentTemplates = true;
+        this.id = "tree";
+        this.projectType = "igc-ts";
+        this.name = "Tree";
+        this.description = "basic IgcTree";
+    }
+    addClassDeclaration(mainModule, projPath, name, modulePath) {
+        // not applicable with custom module
+    }
+}
+module.exports = new IgcTreeTemplate();

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

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

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

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