igniteui-cli 10.0.4 → 10.0.5

package/package.json

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

package/templates/angular/ig-ts/projects/empty/files/package.json

@@ -10,26 +10,26 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "~14.0.0",
-    "@angular/common": "~14.0.0",
-    "@angular/compiler": "~14.0.0",
-    "@angular/core": "~14.0.0",
-    "@angular/forms": "~14.0.0",
-    "@angular/platform-browser": "~14.0.0",
-    "@angular/platform-browser-dynamic": "~14.0.0",
-    "@angular/router": "~14.0.0",
+    "@angular/animations": "~14.1.0",
+    "@angular/common": "~14.1.0",
+    "@angular/compiler": "~14.1.0",
+    "@angular/core": "~14.1.0",
+    "@angular/forms": "~14.1.0",
+    "@angular/platform-browser": "~14.1.0",
+    "@angular/platform-browser-dynamic": "~14.1.0",
+    "@angular/router": "~14.1.0",
     "jquery": ">=1.9.1",
     "jquery-ui": ">=1.10.5",
-    "igniteui-angular-wrappers": "~14.0.0",
+    "igniteui-angular-wrappers": "~14.1.0",
     "ignite-ui": "~21.2",
     "rxjs": "~7.5.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.11.4"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~14.0.0",
-    "@angular/cli": "~14.0.0",
-    "@angular/compiler-cli": "~14.0.0",
+    "@angular-devkit/build-angular": "~14.1.0",
+    "@angular/cli": "~14.1.0",
+    "@angular/compiler-cli": "~14.1.0",
     "@types/jasmine": "~4.0.0",
     "@types/node": "^12.11.1",
     "igniteui-cli": "^$(cliVersion)",

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

@@ -0,0 +1,9 @@
+import { expect } from '@open-wc/testing';
+import $(ClassName) from './$(path).js';
+
+describe('IgcAccordionComponent', () => {
+  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/accordion/default/files/src/app/__path__/__filePrefix__.ts

@@ -0,0 +1,30 @@
+import { html, LitElement } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import {
+  defineComponents,
+  IgcAccordionComponent,
+} from 'igniteui-webcomponents';
+
+defineComponents(IgcAccordionComponent);
+
+@customElement('app-$(path)')
+export default class $(ClassName) extends LitElement {
+    render() {
+        return html`
+        <igc-accordion singleExpand="false" alignment="justify">
+        <igc-expansion-panel>
+            <div slot="title">Ignite UI for Web Components</div>
+            <p>Ignite UI for Web Components is a complete library of UI components, giving you the ability to build modern web applications using encapsulation and the concept of reusable components in a dependency-free approach.</p>
+        </igc-expansion-panel>
+        <igc-expansion-panel>
+            <div slot="title">Ignite UI for Angular</div>
+            <p>Ignite UI for Angular is a complete set of Material-based UI Widgets, Components & Sketch, Adobe XD and Figma UI kits by Infragistics. Ignite UI for Angular is designed to enable developers to build enterprise-ready, high-performance HTML5 & JavaScript apps for modern desktop browsers.</p>
+        </igc-expansion-panel>
+        <igc-expansion-panel>
+            <div slot="title">Ignite UI for jQuery</div>
+            <p>Ignite UI for jQuery helps you build powerful, high-performance web-based applications. Inside Ignite UI for jQuery you'll find user experience controls and components for creating engaging line-of-business web applications which target the browsers for both mobile & desktop environments.</p>
+        </igc-expansion-panel>
+        </igc-accordion>
+        `;
+      }
+}

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

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

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

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

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

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

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

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

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

@@ -2,20 +2,10 @@ import { html, css, LitElement } from 'lit';
 import { customElement } from 'lit/decorators.js';
 import {
   defineComponents,
-  IgcCardActionsComponent,
-  IgcCardContentComponent,
-  IgcCardHeaderComponent,
-  IgcCardMediaComponent,
   IgcCardComponent,
 } from 'igniteui-webcomponents';
 
-defineComponents(
-  IgcCardComponent,
-  IgcCardActionsComponent,
-  IgcCardContentComponent,
-  IgcCardHeaderComponent,
-  IgcCardMediaComponent,
-);
+defineComponents(IgcCardComponent);
 
 @customElement('app-$(path)')
 export default class $(ClassName) extends LitElement {

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

@@ -8,7 +8,12 @@ import {
   IgcButtonComponent,
 } from 'igniteui-webcomponents';
 
-defineComponents(IgcFormComponent, IgcInputComponent, IgcCheckboxComponent, IgcButtonComponent);
+defineComponents(
+  IgcFormComponent,
+  IgcInputComponent,
+  IgcCheckboxComponent,
+  IgcButtonComponent,
+);
 
 @customElement('app-$(path)')
 export default class $(ClassName) extends LitElement {

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

@@ -0,0 +1,9 @@
+import { expect } from '@open-wc/testing';
+import $(ClassName) from './$(path).js';
+
+describe('gcDateTimeInputComponent', () => {
+  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/date-time-input/default/files/src/app/__path__/__filePrefix__.ts

@@ -0,0 +1,38 @@
+import { html, LitElement } from 'lit';
+import { customElement, query } from 'lit/decorators.js';
+import {
+  defineComponents,
+  IgcDateTimeInputComponent,
+  registerIconFromText
+} from 'igniteui-webcomponents';
+
+defineComponents(IgcDateTimeInputComponent);
+const clearIcon =
+'<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0z" fill="none"/><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg>';
+registerIconFromText('clear', clearIcon, 'material');
+
+@customElement('app-$(path)')
+export default class $(ClassName) extends LitElement {
+    @query('igc-date-time-input')
+      _input!: Element
+
+    render() {
+    return html`
+    <igc-date-time-input
+    label="Choose Date"
+    .value=${new Date(2022, 6, 12, 7, 30, 0)}
+    .inputFormat="dd/MM/yyyy"
+    .displayFormat="dd/MM/yyyy"
+    .minValue=${new Date(2022, 6, 2, 7, 30, 0)}
+    .maxValue=${new Date(2022, 6, 27, 7, 30, 0)}
+    .spinDelta={date: 2, year: 10,}>
+        <igc-icon name="clear" collection='material' size='large' slot="suffix" @click=${this.handleClear}></igc-icon>
+        <span slot="helper-text">This is some helper text</span>
+    </igc-date-time-input>
+        `;
+      }
+
+    handleClear() {
+        (this._input as IgcDateTimeInputComponent)!.clear();
+    }
+}

package/templates/webcomponents/igc-ts/date-time-input/default/index.d.ts

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

package/templates/webcomponents/igc-ts/date-time-input/default/index.js

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

package/templates/webcomponents/igc-ts/date-time-input/index.d.ts

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

package/templates/webcomponents/igc-ts/date-time-input/index.js

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

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

@@ -4,15 +4,11 @@ import {
   defineComponents,
   IgcButtonComponent,
   IgcDropdownComponent,
-  IgcDropdownItemComponent,
-  IgcDropdownGroupComponent,
 } from 'igniteui-webcomponents';
 
 defineComponents(
   IgcButtonComponent,
   IgcDropdownComponent,
-  IgcDropdownItemComponent,
-  IgcDropdownGroupComponent,
 );
 
 @customElement('app-$(path)')

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

@@ -5,9 +5,7 @@ import {
   IgcExpansionPanelComponent,
 } from 'igniteui-webcomponents';
 
-defineComponents(
-  IgcExpansionPanelComponent,
-);
+defineComponents(IgcExpansionPanelComponent);
 
 @customElement('app-$(path)')
 export default class $(ClassName) extends LitElement {

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

@@ -3,11 +3,13 @@ import { customElement } from 'lit/decorators.js';
 import {
   defineComponents,
   IgcFormComponent,
-  IgcRadioComponent,
   IgcRadioGroupComponent,
 } from 'igniteui-webcomponents';
 
-defineComponents(IgcFormComponent, IgcRadioComponent, IgcRadioGroupComponent);
+defineComponents(
+  IgcFormComponent,
+  IgcRadioGroupComponent,
+);
 
 @customElement('app-$(path)')
 export default class $(ClassName) extends LitElement {

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

@@ -5,16 +5,12 @@ import {
   IgcAvatarComponent,
   IgcButtonComponent,
   IgcListComponent,
-  IgcListHeaderComponent,
-  IgcListItemComponent,
 } from 'igniteui-webcomponents';
 
 defineComponents(
   IgcAvatarComponent,
   IgcButtonComponent,
   IgcListComponent,
-  IgcListHeaderComponent,
-  IgcListItemComponent,
 );
 
 @customElement('app-$(path)')

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

@@ -9,7 +9,10 @@ import {
   registerIcon,
 } from 'igniteui-webcomponents/components/icon/icon.registry';
 
-defineComponents(IgcIconComponent, IgcNavbarComponent);
+defineComponents(
+  IgcIconComponent,
+  IgcNavbarComponent,
+);
 
 registerIcon(
   'home',

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

@@ -21,7 +21,7 @@
   },
   "dependencies": {
     "@vaadin/router": "^1.7.4",
-    "igniteui-webcomponents": "~3.2.0",
+    "igniteui-webcomponents": "~3.4.0",
     "igniteui-webcomponents-grids": "~3.2.1",
     "igniteui-webcomponents-core": "~3.2.1",
     "igniteui-webcomponents-layouts": "~3.2.1",

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

@@ -4,8 +4,6 @@ import { customElement } from 'lit/decorators.js';
 import {
   defineComponents,
   IgcNavDrawerComponent,
-  IgcNavDrawerItemComponent,
-  IgcNavDrawerHeaderItemComponent,
   IgcRippleComponent,
 } from 'igniteui-webcomponents';
 import { Router } from '@vaadin/router';
@@ -13,8 +11,6 @@ import { routes } from './app-routing.js';
 
 defineComponents(
   IgcNavDrawerComponent,
-  IgcNavDrawerItemComponent,
-  IgcNavDrawerHeaderItemComponent,
   IgcRippleComponent,
 );
 

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

@@ -2,11 +2,10 @@ import { html, LitElement } from 'lit';
 import { customElement } from 'lit/decorators.js';
 import {
   defineComponents,
-  IgcRadioComponent,
   IgcRadioGroupComponent,
 } from 'igniteui-webcomponents';
 
-defineComponents(IgcRadioComponent, IgcRadioGroupComponent);
+defineComponents(IgcRadioGroupComponent);
 
 @customElement('app-$(path)')
 export default class $(ClassName) extends LitElement {

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

@@ -0,0 +1,9 @@
+import { expect } from '@open-wc/testing';
+import $(ClassName) from './$(path).js';
+
+describe('IgcTabsComponent', () => {
+  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/tabs/default/files/src/app/__path__/__filePrefix__.ts

@@ -0,0 +1,56 @@
+import { html, LitElement } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import {
+  defineComponents,
+  IgcTabsComponent,
+  registerIconFromText
+} from 'igniteui-webcomponents';
+
+defineComponents(IgcTabsComponent);
+
+const libraryIcon =
+'<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4v14"/><path d="M19 7.674v-.657a4 4 0 0 0-2.901-3.846l-2.824-.807A1 1 0 0 0 12 3.326V7l5.725 1.636A1 1 0 0 0 19 7.674Z"/><path stroke-linecap="round" stroke-linejoin="round" d="M12 18a3 3 0 1 1-6 0c0-1.657 1.343-2 3-2s3 .343 3 2Z"/></g></svg>';
+registerIconFromText('library', libraryIcon, 'material');
+
+const favoriteIcon =
+'<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>';
+registerIconFromText('favorite', favoriteIcon, 'material');
+
+const infoIcon =
+'<svg xmlns="http://www.w3.org/2000/svg" width="0.38em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 192 512"><path fill="currentColor" d="M20 424.229h20V279.771H20c-11.046 0-20-8.954-20-20V212c0-11.046 8.954-20 20-20h112c11.046 0 20 8.954 20 20v212.229h20c11.046 0 20 8.954 20 20V492c0 11.046-8.954 20-20 20H20c-11.046 0-20-8.954-20-20v-47.771c0-11.046 8.954-20 20-20zM96 0C56.235 0 24 32.235 24 72s32.235 72 72 72s72-32.235 72-72S135.764 0 96 0z"/></svg>';
+registerIconFromText('info', infoIcon, 'material');
+
+@customElement('app-tabs')
+export default class Tabs extends LitElement {
+    render() {
+        return html`
+        <igc-tabs alignment="start" >
+            <igc-tab panel="first">
+                <igc-icon name="library" collection='material' size='large'></igc-icon> Albums
+            </igc-tab>
+            <igc-tab panel="second">
+                <igc-icon name="favorite" collection='material' size='large'></igc-icon> Favourites
+            </igc-tab>
+            <igc-tab panel="third" disabled>
+              <igc-icon name="info" collection='material' size='large'></igc-icon> Info
+            </igc-tab>
+            <igc-tab-panel id="first">
+                <br /><br /><b>
+                Sgt. Peppers Lonely Hearts Club Band <br /><br />
+                The Dark Side of the Moon <br /><br />
+                My Beautiful Dark Twisted Fantasy <br /><br />
+                Led Zeppelin IV <br /><br />
+                It Takes a Nation of Millions to Hold Us Back <br /><br />
+                Thriller <br /><br /></b>
+            </igc-tab-panel>
+            <igc-tab-panel id="second">
+                <br /><br /><b>
+                The Dark Side of the Moon <br /><br />
+                Led Zeppelin IV <br /><br />
+                It Takes a Nation of Millions to Hold Us Back <br /><br />
+                Thriller <br /><br /></b>
+            </igc-tab-panel>
+        </igc-tabs>
+        `;
+      }
+}

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

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

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

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

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

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

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

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

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

@@ -3,10 +3,9 @@ import { customElement } from 'lit/decorators.js';
 import {
   defineComponents,
   IgcTreeComponent,
-  IgcTreeItemComponent,
 } from 'igniteui-webcomponents';
 
-defineComponents(IgcTreeComponent, IgcTreeItemComponent);
+defineComponents(IgcTreeComponent);
 
 @customElement('app-$(path)')
 export default class $(ClassName) extends LitElement {