igniteui-cli 9.0.0-rc.0 → 9.0.0

package/migrations/update-3/index.js

@@ -56,7 +56,7 @@ function updateConfig(host) {
 function default_1() {
     return (host, context) => {
         context.logger.info("Updating project to Ignite UI CLI 3.0.0");
-        (0, cli_core_1.addTypography)(host);
+        (0, cli_core_1.addClassToBody)(host, "igx-typography");
         addHomeHeaderStyles(host);
         removeGridForRoot(host);
         updateConfig(host);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "igniteui-cli",
-  "version": "9.0.0-rc.0",
+  "version": "9.0.0",
   "description": "CLI tool for creating Ignite UI projects",
   "keywords": [
     "CLI",
@@ -72,8 +72,8 @@
     "all": true
   },
   "dependencies": {
-    "@igniteui/angular-templates": "~13.0.900-rc.0",
-    "@igniteui/cli-core": "~9.0.0-rc.0",
+    "@igniteui/angular-templates": "~13.0.900",
+    "@igniteui/cli-core": "~9.0.0",
     "chalk": "^2.3.2",
     "fs-extra": "^3.0.1",
     "glob": "^7.1.2",
@@ -81,7 +81,7 @@
     "opn": "^5.3.0",
     "resolve": "^1.6.0",
     "through2": "^2.0.3",
-    "typescript": "^4.4.4",
+    "typescript": "~4.4.4",
     "yargs": "^8.0.2"
   },
   "devDependencies": {

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

@@ -0,0 +1,206 @@
+import {
+  IgcDockManagerComponent,
+  IgcDockManagerPaneType,
+  IgcSplitPaneOrientation,
+} from 'igniteui-dockmanager';
+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);
+      }
+
+      .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;
+      }
+
+      .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>
+    <igc-dockmanager id="dockManager">
+      <div slot="content1" class="dockManagerContent">Content 1</div>
+      <div slot="content2" class="dockManagerContent">Content 2</div>
+      <div slot="content3" class="dockManagerContent">Content 3</div>
+      <div slot="content4" class="dockManagerContent">Content 4</div>
+      <div slot="content5" class="dockManagerContent">Content 5</div>
+      <div slot="content6" class="dockManagerContent">Content 6</div>
+      <div slot="content7" class="dockManagerContent">Content 7</div>
+      <div slot="content8" class="dockManagerContent">Content 8</div>
+      <div slot="content9" class="dockManagerContent">Content 9</div>
+      <div slot="content10" class="dockManagerContent">Content 10</div>
+      <div slot="content11" class="dockManagerContent">Content 11</div>
+      <div slot="content12" class="dockManagerContent">Content 12</div>
+    </igc-dockmanager>
+  `;
+  }
+
+  connectedCallback() {
+    const dockManager = document.getElementsByTagName('app-$(path)')[0].shadowRoot!.getElementById('dockManager') as IgcDockManagerComponent;
+    dockManager.layout = {
+      rootPane: {
+        type: IgcDockManagerPaneType.splitPane,
+        orientation: IgcSplitPaneOrientation.horizontal,
+        panes: [
+          {
+            type: IgcDockManagerPaneType.splitPane,
+            orientation: IgcSplitPaneOrientation.vertical,
+            panes: [
+              {
+                type: IgcDockManagerPaneType.contentPane,
+                contentId: 'content1',
+                header: 'Content Pane 1'
+              },
+              {
+                type: IgcDockManagerPaneType.contentPane,
+                contentId: 'content2',
+                header: 'Unpinned Pane 1',
+                isPinned: false
+              }
+            ]
+          },
+          {
+            type: IgcDockManagerPaneType.splitPane,
+            orientation: IgcSplitPaneOrientation.vertical,
+            size: 200,
+            panes: [
+              {
+                type: IgcDockManagerPaneType.documentHost,
+                size: 200,
+                rootPane: {
+                  type: IgcDockManagerPaneType.splitPane,
+                  orientation: IgcSplitPaneOrientation.horizontal,
+                  panes: [
+                    {
+                      type: IgcDockManagerPaneType.tabGroupPane,
+                      panes: [
+                        {
+                          type: IgcDockManagerPaneType.contentPane,
+                          header: 'Document 1',
+                          contentId: 'content3'
+                        },
+                        {
+                          type: IgcDockManagerPaneType.contentPane,
+                          header: 'Document 2',
+                          contentId: 'content4'
+                        }
+                      ]
+                    }
+                  ]
+                }
+              },
+              {
+                type: IgcDockManagerPaneType.contentPane,
+                contentId: 'content5',
+                header: 'Unpinned Pane 2',
+                isPinned: false
+              }
+            ]
+          },
+          {
+            type: IgcDockManagerPaneType.splitPane,
+            orientation: IgcSplitPaneOrientation.vertical,
+            panes: [
+              {
+                type: IgcDockManagerPaneType.tabGroupPane,
+                size: 200,
+                panes: [
+                  {
+                    type: IgcDockManagerPaneType.contentPane,
+                    contentId: 'content6',
+                    header: 'Tab 1'
+                  },
+                  {
+                    type: IgcDockManagerPaneType.contentPane,
+                    contentId: 'content7',
+                    header: 'Tab 2'
+                  },
+                  {
+                    type: IgcDockManagerPaneType.contentPane,
+                    contentId: 'content8',
+                    header: 'Tab 3'
+                  },
+                  {
+                    type: IgcDockManagerPaneType.contentPane,
+                    contentId: 'content9',
+                    header: 'Tab 4'
+                  },
+                  {
+                    type: IgcDockManagerPaneType.contentPane,
+                    contentId: 'content10',
+                    header: 'Tab 5'
+                  }
+                ]
+              },
+              {
+                type: IgcDockManagerPaneType.contentPane,
+                contentId: 'content11',
+                header: 'Content Pane 2'
+              }
+            ]
+          }
+        ]
+      },
+      floatingPanes: [
+        {
+          type: IgcDockManagerPaneType.splitPane,
+          orientation: IgcSplitPaneOrientation.horizontal,
+          floatingHeight: 150,
+          floatingWidth: 250,
+          floatingLocation: { x: 300, y: 200 },
+          panes: [
+            {
+              type: IgcDockManagerPaneType.contentPane,
+              contentId: 'content12',
+              header: 'Floating Pane'
+            }
+          ]
+        }
+      ]
+    };
+  }
+}
+
+customElements.define('app-$(path)', $(ClassName));

package/templates/webcomponents/igc-ts/dock-manager/default/index.d.ts

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

package/templates/webcomponents/igc-ts/dock-manager/default/index.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const IgniteUIForWebComponentsTemplate_1 = require("../../../../../lib/templates/IgniteUIForWebComponentsTemplate");
+class IgcDockManagerTemplate extends IgniteUIForWebComponentsTemplate_1.IgniteUIForWebComponentsTemplate {
+    constructor() {
+        super(__dirname);
+        this.components = ["DockManager"];
+        this.controlGroup = "Layouts";
+        this.listInComponentTemplates = true;
+        this.id = "dock-manager";
+        this.projectType = "igc-ts";
+        this.name = "Dock Manager";
+        this.description = "Dock Manager with most functionalities and docking options";
+    }
+    addClassDeclaration(mainModule, projPath, name, modulePath) {
+        // not applicable with custom module
+    }
+}
+module.exports = new IgcDockManagerTemplate();

package/templates/webcomponents/igc-ts/dock-manager/index.d.ts

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

package/templates/webcomponents/igc-ts/dock-manager/index.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const cli_core_1 = require("@igniteui/cli-core");
+class IgcDockManagerComponent extends cli_core_1.BaseComponent {
+    constructor() {
+        super(__dirname);
+        this.name = "Dock Manager";
+        this.group = "Layouts";
+        this.description = "Dock Manager with most functionalities and docking options";
+    }
+}
+module.exports = new IgcDockManagerComponent();

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

@@ -5,7 +5,7 @@ class IgcGridTemplate extends IgniteUIForWebComponentsTemplate_1.IgniteUIForWebC
     constructor() {
         super(__dirname);
         this.components = ["Grid"];
-        this.controlGroup = "Grids & Lists";
+        this.controlGroup = "Hidden";
         this.listInComponentTemplates = true;
         this.id = "grid";
         this.projectType = "igc-ts";

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

@@ -5,7 +5,7 @@ class IgcGridComponent extends cli_core_1.BaseComponent {
     constructor() {
         super(__dirname);
         this.name = "Grid";
-        this.group = "Grids & Lists";
+        this.group = "Hidden";
         this.description = "pick from different grid views";
         //this.groupPriority = 10;
     }

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

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

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

@@ -5,7 +5,7 @@ class IgcListTemplate extends IgniteUIForWebComponentsTemplate_1.IgniteUIForWebC
     constructor() {
         super(__dirname);
         this.components = ["List"];
-        this.controlGroup = "Grids & Lists";
+        this.controlGroup = "Lists";
         this.listInComponentTemplates = true;
         this.id = "list";
         this.projectType = "igc-ts";

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

@@ -8,7 +8,7 @@ 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`;
     }
 }

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

@@ -0,0 +1,58 @@
+import { DataItem, Data } from './sampleData';
+import {
+  IgcItemLegendComponent,
+  IgcItemLegendModule,
+  IgcPieChartComponent,
+  IgcPieChartModule,
+} from 'igniteui-webcomponents-charts';
+import { ModuleManager } from 'igniteui-webcomponents-core';
+
+ModuleManager.register(
+  IgcItemLegendModule,
+  IgcPieChartModule,
+);
+
+export default class $(ClassName) extends HTMLElement {
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot!.innerHTML = `
+    <style>
+      :host, igc-pie-chart {
+        height: 100%;
+      }
+      .container {
+        height: 60%;
+      }
+    </style>
+    <div class="legend-title">
+      Global Electricity Demand by Energy Use
+    </div>
+    <div class="legend">
+      <igc-item-legend
+        orientation="Horizontal"
+        name="legend"
+        id ="legend">
+      </igc-item-legend>
+    </div>
+    <div class="container">
+      <igc-pie-chart
+        value-member-path="marketShare"
+        label-member-path="category"
+        labels-position="BestFit"
+        radius-factor="0.7"
+        name="chart"
+        id ="chart">
+      </igc-pie-chart>
+    </div>
+  `;
+  }
+
+  connectedCallback() {
+    const chart = document.getElementsByTagName('app-$(path)')[0].shadowRoot!.getElementById('chart') as IgcPieChartComponent;
+    chart.dataSource = new Data();
+    chart.legend = document.getElementsByTagName('app-$(path)')[0].shadowRoot!.getElementById('legend') as IgcItemLegendComponent;
+  }
+}
+
+customElements.define('app-$(path)', $(ClassName));

package/templates/webcomponents/igc-ts/pie-chart/default/files/src/app/__path__/sampleData.ts

@@ -0,0 +1,39 @@
+export class DataItem {
+  public constructor(init: Partial<DataItem>) {
+      Object.assign(this, init);
+  }
+
+  public marketShare: number = 0;
+  public category: string = '';
+
+}
+export class Data extends Array<DataItem> {
+  public constructor() {
+      super();
+      this.push(new DataItem(
+      {
+          marketShare: 37,
+          category: `Cooling`
+      }));
+      this.push(new DataItem(
+      {
+          marketShare: 25,
+          category: `Residential`
+      }));
+      this.push(new DataItem(
+      {
+          marketShare: 12,
+          category: `Heating`
+      }));
+      this.push(new DataItem(
+      {
+          marketShare: 11,
+          category: `Lighting`
+      }));
+      this.push(new DataItem(
+      {
+          marketShare: 15,
+          category: `Other`
+      }));
+  }
+}

package/templates/webcomponents/igc-ts/pie-chart/default/index.d.ts

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

package/templates/webcomponents/igc-ts/pie-chart/default/index.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const IgniteUIForWebComponentsTemplate_1 = require("../../../../../lib/templates/IgniteUIForWebComponentsTemplate");
+class IgcPieChartTemplate extends IgniteUIForWebComponentsTemplate_1.IgniteUIForWebComponentsTemplate {
+    constructor() {
+        super(__dirname);
+        this.components = ["PieChart"];
+        this.controlGroup = "Charts";
+        this.listInComponentTemplates = true;
+        this.id = "pie-chart";
+        this.projectType = "igc-ts";
+        this.name = "Pie Chart";
+        this.description = "IgcPieChart with local data";
+    }
+    addClassDeclaration(mainModule, projPath, name, modulePath) {
+        // not applicable with custom module
+    }
+}
+module.exports = new IgcPieChartTemplate();

package/templates/webcomponents/igc-ts/pie-chart/index.d.ts

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

package/templates/webcomponents/igc-ts/pie-chart/index.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const cli_core_1 = require("@igniteui/cli-core");
+class IgcPieChartComponent extends cli_core_1.BaseComponent {
+    constructor() {
+        super(__dirname);
+        this.name = "Pie Chart";
+        this.group = "Charts";
+        this.description = "pick from different chart views";
+    }
+}
+module.exports = new IgcPieChartComponent();

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

@@ -20,11 +20,13 @@
   "dependencies": {
     "@open-wc/testing": "^2.5.33",
     "@vaadin/router": "^1.7.4",
-    "igniteui-webcomponents": "1.0.0-beta.2",
+    "igniteui-webcomponents": "1.0.0",
     "igniteui-webcomponents-grids": "~1.3.3",
     "igniteui-webcomponents-core": "~1.3.3",
     "igniteui-webcomponents-layouts": "~1.3.3",
     "igniteui-webcomponents-inputs": "~1.3.3",
+    "igniteui-webcomponents-charts": "~1.3.3",
+    "igniteui-dockmanager": "~1.6.0",
     "@igniteui/material-icons-extended": "^2.10.0",
     "lit": "^2.0.2"
   },
@@ -34,7 +36,7 @@
     "@typescript-eslint/parser": "^4.30.0",
     "@web/dev-server": "^0.1.22",
     "@web/test-runner": "next",
-    "igniteui-cli": "~<%=cliVersion%>",
+    "igniteui-cli": "$(cliVersion)",
     "eslint": "^7.32.0",
     "tslib": "^2.3.1",
     "typescript": "^4.4.2"