igniteui-cli 8.3.0-beta.1 → 8.3.0-beta.7

package/lib/templates/IgniteUIForWebComponentsTemplate.js

@@ -3,8 +3,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.IgniteUIForWebComponentsTemplate = void 0;
 const cli_core_1 = require("@igniteui/cli-core");
 const path = require("path");
-const TypeScriptFileUpdate_1 = require("../../../cli/templates/webcomponents/TypeScriptFileUpdate");
 const package_resolve_1 = require("../../templates/webcomponents/package-resolve");
+const TypeScriptFileUpdate_1 = require("../../templates/webcomponents/TypeScriptFileUpdate");
 class IgniteUIForWebComponentsTemplate {
     constructor(rootPath) {
         this.rootPath = rootPath;

package/package.json

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

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

@@ -1,11 +1,13 @@
-import 'igniteui-webcomponents';
+import {
+  defineComponents,
+  IgcAvatarComponent,
+} from 'igniteui-webcomponents';
+
+defineComponents(IgcAvatarComponent);
 
 export default class $(ClassName) extends HTMLElement {
   connectedCallback() {
     this.innerHTML = `
-      <div class="description">
-        <p>igc-avatar component</p>
-      </div>
       <igc-avatar
         size="large"
         shape="circle"

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

@@ -1,11 +1,13 @@
-import 'igniteui-webcomponents';
+import {
+  defineComponents,
+  IgcBadgeComponent,
+} from 'igniteui-webcomponents';
+
+defineComponents(IgcBadgeComponent);
 
 export default class $(ClassName) extends HTMLElement {
   connectedCallback() {
     this.innerHTML = `
-      <div class="description">
-        <p>igc-badge component</p>
-      </div>
       <igc-badge> </igc-badge>
     `;
   }

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

@@ -1,11 +1,13 @@
-import 'igniteui-webcomponents';
+import {
+  defineComponents,
+  IgcButtonComponent,
+} from 'igniteui-webcomponents';
+
+defineComponents(IgcButtonComponent);
 
 export default class $(ClassName) extends HTMLElement {
   connectedCallback() {
     this.innerHTML = `
-      <div class="description">
-        <p>igc-button component</p>
-      </div>
       <igc-button
         size='large'>
         Large button

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

@@ -1,12 +1,15 @@
-import 'igniteui-webcomponents';
+import {
+  defineComponents,
+  IgcCalendarComponent,
+} from 'igniteui-webcomponents';
+
+defineComponents(IgcCalendarComponent);
 
 export default class $(ClassName) extends HTMLElement {
   connectedCallback() {
     this.innerHTML = `
-      <div class="description">
-        <p>igc-calendar component</p>
-      </div>
       <igc-calendar
+        style="width:1300px"
         week-start="monday"
       >
         My Calendar

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

@@ -1,11 +1,28 @@
-import 'igniteui-webcomponents';
+import {
+  defineComponents,
+  IgcCardActionsComponent,
+  IgcCardContentComponent,
+  IgcCardHeaderComponent,
+  IgcCardMediaComponent,
+  IgcCardComponent,
+} from 'igniteui-webcomponents';
+
+defineComponents(
+  IgcCardComponent,
+  IgcCardActionsComponent,
+  IgcCardContentComponent,
+  IgcCardHeaderComponent,
+  IgcCardMediaComponent
+);
 
 export default class $(ClassName) extends HTMLElement {
   connectedCallback() {
     this.innerHTML = `
-    <div class="description">
-      <p>igc-card component</p>
-    </div>
+    <style>
+      igc-card {
+        width: 400px
+      }
+    </style>
     <igc-card>
     <igc-card-media style="max-height: 194px">
       <img

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

@@ -1,11 +1,13 @@
-import 'igniteui-webcomponents';
+import {
+  defineComponents,
+  IgcCheckboxComponent,
+} from 'igniteui-webcomponents';
+
+defineComponents(IgcCheckboxComponent);
 
 export default class $(ClassName) extends HTMLElement {
   connectedCallback() {
     this.innerHTML = `
-    <div class="description">
-      <p>igc-checkbox component</p>
-    </div>
     <igc-checkbox
       checked="true"
     >

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

@@ -1,11 +1,15 @@
-import 'igniteui-webcomponents';
+import {
+  defineComponents,
+  IgcFormComponent,
+  IgcRadioComponent,
+  IgcRadioGroupComponent
+} from 'igniteui-webcomponents';
+
+defineComponents(IgcFormComponent, IgcRadioComponent, IgcRadioGroupComponent);
 
 export default class $(ClassName) extends HTMLElement {
   connectedCallback() {
     this.innerHTML = `
-      <div class="description">
-        <p>igc-form component</p>
-      </div>
       <style>
         #form {
           flex-grow: 1;

package/templates/webcomponents/igc-ts/groups.json

@@ -2,7 +2,7 @@
 	"Data Entry & Display": "",
   "Interactions": "",
   "Menus": "",
-  "Grids & Lists": "",
+  "Lists": "",
   "Scheduling": "",
   "Layouts": ""
 }

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

@@ -1,8 +1,13 @@
-import "igniteui-webcomponents/src/components/icon/icon";
+import {
+  defineComponents,
+  IgcIconComponent,
+} from 'igniteui-webcomponents';
 import {
   registerIcon,
   registerIconFromText,
-  } from "igniteui-webcomponents/src/components/icon/icon.registry";
+} from "igniteui-webcomponents/components/icon/icon.registry";
+
+defineComponents(IgcIconComponent);
 
 const searchIcon =
 '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>';
@@ -17,9 +22,6 @@ registerIcon(
 export default class Icon extends HTMLElement {
   connectedCallback() {
     this.innerHTML = `
-      <div class="description">
-        <p>igc-icon component</p>
-      </div>
       <div>
         <label>Search icon: </label>
         <igc-icon

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

@@ -1,7 +1,12 @@
-import "igniteui-webcomponents";
+import {
+  defineComponents,
+  IgcIconButtonComponent,
+} from 'igniteui-webcomponents';
 import {
   registerIcon,
-} from "igniteui-webcomponents/src/components/icon/icon.registry";
+} from "igniteui-webcomponents/components/icon/icon.registry";
+
+defineComponents(IgcIconButtonComponent);
 
 registerIcon(
   "build",
@@ -12,9 +17,6 @@ registerIcon(
 export default class IconButton extends HTMLElement {
   connectedCallback() {
     this.innerHTML = `
-      <div class="description">
-        <p>igc-icon-button component</p>
-      </div>
       <label>Contact Infragistics support: </label>
       <igc-icon-button
         name="build"

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

@@ -1,11 +1,13 @@
-import 'igniteui-webcomponents';
+import {
+  defineComponents,
+  IgcInputComponent,
+} from 'igniteui-webcomponents';
+
+defineComponents(IgcInputComponent);
 
 export default class $(ClassName) extends HTMLElement {
   connectedCallback() {
     this.innerHTML = `
-      <div class="description">
-        <p>igc-input component</p>
-      </div>
       <igc-input>
         <igc-icon name="github" slot="prefix"></igc-icon>
         <igc-icon name="github" slot="suffix"></igc-icon>

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

@@ -1,11 +1,23 @@
-import 'igniteui-webcomponents';
+import {
+  defineComponents,
+  IgcAvatarComponent,
+  IgcButtonComponent,
+  IgcListComponent,
+  IgcListHeaderComponent,
+  IgcListItemComponent,
+} from 'igniteui-webcomponents';
+
+defineComponents(
+  IgcAvatarComponent,
+  IgcButtonComponent,
+  IgcListComponent,
+  IgcListHeaderComponent,
+  IgcListItemComponent
+);
 
 export default class $(ClassName) extends HTMLElement {
   connectedCallback() {
     this.innerHTML = `
-      <div class="description">
-        <p>igc-list component</p>
-      </div>
       <igc-list>
         <igc-list-header>
           <h1>Job Positions</h1>

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

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

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

@@ -1,12 +1,14 @@
-import 'igniteui-webcomponents';
+import {
+  defineComponents,
+  IgcNavbarComponent,
+} from 'igniteui-webcomponents';
+
+defineComponents(IgcNavbarComponent);
 
 export default class $(ClassName) extends HTMLElement {
   connectedCallback() {
     this.innerHTML = `
-      <div class="description">
-        <p>igc-navbar component</p>
-      </div>
-      <igc-navbar style="height:30px">
+      <igc-navbar style="height:30px; width:1300px">
         <igc-icon slot="start" name="home"></igc-icon>
         <h2>Title</h2>
         <igc-icon slot="end" name="search"></igc-icon>

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/src/styles/themes/material.css">
+  <link rel="stylesheet" href="./node_modules/igniteui-webcomponents/themes/bootstrap.css">
   <style>
     body {
       background: #fafafa;

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

@@ -20,7 +20,7 @@
   "dependencies": {
     "@open-wc/testing": "^2.5.33",
     "@vaadin/router": "^1.7.4",
-    "igniteui-webcomponents": "1.0.0-beta",
+    "igniteui-webcomponents": "1.0.0-beta.2",
     "@igniteui/material-icons-extended": "^2.10.0",
     "lit": "^2.0.2"
   },

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

@@ -1,11 +1,25 @@
-import 'igniteui-webcomponents';
+import {
+  defineComponents,
+  IgcNavDrawerComponent,
+  IgcNavDrawerItemComponent,
+  IgcNavDrawerHeaderItemComponent,
+  IgcRippleComponent,
+} from 'igniteui-webcomponents';
 import { routes } from './index.js';
 import './app/home/home.component';
 import './app/not-found/not-found.component';
 
+defineComponents(IgcNavDrawerComponent, IgcNavDrawerItemComponent, IgcNavDrawerHeaderItemComponent, IgcRippleComponent);
+
 export class App extends HTMLElement {
   connectedCallback() {
     this.innerHTML = `
+    <style>
+      igc-nav-drawer-header-item {
+        text-align: center;
+        font-weight: bold;
+      }
+    </style>
     <div id="navigation-outlet">
       <igc-nav-drawer open=true>
         <igc-nav-drawer-header-item>Ignite UI CLI</igc-nav-drawer-header-item>
@@ -13,7 +27,7 @@ export class App extends HTMLElement {
         ${routes.filter((element, index) => index < routes.length - 1).map(i => this.innerHTML = `
           <igc-nav-drawer-item>
             <span slot="content">
-              <a href="${i.path}">${i.name}</a>
+              <a style="text-decoration: none;" href="${i.path}">${i.name}<igc-ripple></igc-ripple></a>
             </span>
           </igc-nav-drawer-item>
         `)}

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

@@ -1,11 +1,14 @@
-import 'igniteui-webcomponents';
+import {
+  defineComponents,
+  IgcRadioComponent,
+  IgcRadioGroupComponent,
+} from 'igniteui-webcomponents';
+
+defineComponents(IgcRadioComponent, IgcRadioGroupComponent);
 
 export default class $(ClassName) extends HTMLElement {
   connectedCallback() {
     this.innerHTML = `
-      <div class="description">
-        <p>igc-radio-group component</p>
-      </div>
       <igc-radio-group>
         <igc-radio name="fruit" value="banana">
           Banana

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

@@ -1,11 +1,13 @@
-import 'igniteui-webcomponents';
+import {
+  defineComponents,
+  IgcRippleComponent,
+} from 'igniteui-webcomponents';
+
+defineComponents(IgcRippleComponent);
 
 export default class $(ClassName) extends HTMLElement {
   connectedCallback() {
     this.innerHTML = `
-    <div class="description">
-      <p>igc-ripple component</p>
-    </div>
     <igc-button>
       <igc-ripple></igc-ripple>
       Button with ripple

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

@@ -1,4 +1,9 @@
-import 'igniteui-webcomponents';
+import {
+  defineComponents,
+  IgcSwitchComponent,
+} from 'igniteui-webcomponents';
+
+defineComponents(IgcSwitchComponent);
 
 export default class $(ClassName) extends HTMLElement {
   connectedCallback() {

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

@@ -1,16 +0,0 @@
-import 'igniteui-webcomponents';
-
-export default class $(ClassName) extends HTMLElement {
-  connectedCallback() {
-    this.innerHTML = `
-      <div class="description">
-        <p>igc-link-button component</p>
-      </div>
-      <igc-link-button>
-        Click me
-      </igc-link-button>
-    `;
-  }
-}
-
-customElements.define('app-$(path)', $(ClassName));

package/templates/webcomponents/igc-ts/link-button/default/index.d.ts

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

package/templates/webcomponents/igc-ts/link-button/default/index.js

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

package/templates/webcomponents/igc-ts/link-button/index.d.ts

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

package/templates/webcomponents/igc-ts/link-button/index.js

@@ -1,15 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const cli_core_1 = require("@igniteui/cli-core");
-class IgcLinkButtonComponent extends cli_core_1.BaseComponent {
-    /**
-     *
-     */
-    constructor() {
-        super(__dirname);
-        this.name = "Link Button";
-        this.group = "Data Entry & Display";
-        this.description = `Customizable link button component`;
-    }
-}
-module.exports = new IgcLinkButtonComponent();

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

@@ -1,16 +0,0 @@
-import 'igniteui-webcomponents';
-
-export default class $(ClassName) extends HTMLElement {
-  connectedCallback() {
-    this.innerHTML = `
-      <div class="description">
-        <p>igc-radio component</p>
-      </div>
-      <igc-radio>
-        Label
-      </igc-radio>
-    `;
-  }
-}
-
-customElements.define('app-$(path)', $(ClassName));

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

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

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

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

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

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

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

@@ -1,15 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const cli_core_1 = require("@igniteui/cli-core");
-class IgcRadioComponent extends cli_core_1.BaseComponent {
-    /**
-     *
-     */
-    constructor() {
-        super(__dirname);
-        this.name = "Radio";
-        this.group = "Data Entry & Display";
-        this.description = `Customizable radio component`;
-    }
-}
-module.exports = new IgcRadioComponent();