igniteui-cli 13.1.10 → 13.1.12-beta.1

package/package.json

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

package/templates/react/igr-ts/bullet-graph/default/files/src/app/__path__/__filePrefix__.test.tsx

@@ -1,8 +1,8 @@
 import { expect, test } from 'vitest';
 import { render } from '@testing-library/react';
-import $(ClassName) from './index';
+import $(ClassName) from './$(path)';
 
 test('renders $(ClassName) component', () => {
-    const wrapper = render(<$(ClassName) />);
-    expect(wrapper).toBeTruthy();
+  const wrapper = render(<$(ClassName) />);
+  expect(wrapper).toBeTruthy();
 });

package/templates/react/igr-ts/bullet-graph/default/files/src/app/__path__/__filePrefix__.tsx

@@ -6,51 +6,51 @@ IgrBulletGraphModule.register();
 
 
 export default function $(ClassName)() {
-    const title = 'Bullet Graph';
+  const title = 'Bullet Graph';
 
-    return (
-		<div>
-			<h1 className={style.title}>{title}</h1>
-			<div>
-				Read more on the&nbsp;
-				<a href="https://www.infragistics.com/products/ignite-ui-react/react/components/bulletgraph.html">
-					official documentation page
-				</a>
-			</div>
-			<div className={style.container}>
-				<div className={style.graph}>
-					<IgrBulletGraph
-						height="80px" width="400px"
-						minimumValue={0} value={70} interval={10}
-						maximumValue={100} targetValue={90}
-						isScaleInverted={false}
-						scaleBackgroundBrush="DodgerBlue"
-						scaleBackgroundOutline="DarkViolet"
-						scaleBackgroundThickness={2}
-						scaleStartExtent={0.05}
-						scaleEndExtent={0.95}>
-					</IgrBulletGraph>
-				</div>
-				<div className={style.graph}>
-					<IgrBulletGraph
-						value={50}
-						valueBrush="DodgerBlue"
-						valueStrokeThickness={1}
-						valueInnerExtent={0.5}
-						valueOuterExtent={0.65}
-						targetValue={80}
-						targetValueBreadth={10}
-						targetValueBrush="LimeGreen"
-						targetValueOutline="LimeGreen"
-						targetValueStrokeThickness={1}
-						targetValueInnerExtent={0.3}
-						targetValueOuterExtent={0.85}
-						height="80px" width="400px"
-						minimumValue={0}
-						maximumValue={100}>
-					</IgrBulletGraph>
-				</div>
-			</div>
-		</div>
-	)
+  return (
+    <div>
+      <h1 className={style.title}>{title}</h1>
+      <div>
+        Read more on the&nbsp;
+        <a href="https://www.infragistics.com/products/ignite-ui-react/react/components/bulletgraph.html">
+          official documentation page
+        </a>
+      </div>
+      <div className={style.container}>
+        <div className={style.graph}>
+          <IgrBulletGraph
+            height="80px" width="400px"
+            minimumValue={0} value={70} interval={10}
+            maximumValue={100} targetValue={90}
+            isScaleInverted={false}
+            scaleBackgroundBrush="DodgerBlue"
+            scaleBackgroundOutline="DarkViolet"
+            scaleBackgroundThickness={2}
+            scaleStartExtent={0.05}
+            scaleEndExtent={0.95}>
+          </IgrBulletGraph>
+        </div>
+        <div className={style.graph}>
+          <IgrBulletGraph
+            value={50}
+            valueBrush="DodgerBlue"
+            valueStrokeThickness={1}
+            valueInnerExtent={0.5}
+            valueOuterExtent={0.65}
+            targetValue={80}
+            targetValueBreadth={10}
+            targetValueBrush="LimeGreen"
+            targetValueOutline="LimeGreen"
+            targetValueStrokeThickness={1}
+            targetValueInnerExtent={0.3}
+            targetValueOuterExtent={0.85}
+            height="80px" width="400px"
+            minimumValue={0}
+            maximumValue={100}>
+          </IgrBulletGraph>
+        </div>
+      </div>
+    </div>
+  )
 }

package/templates/react/igr-ts/bullet-graph/default/files/src/app/__path__/style.module.css

@@ -1,12 +1,12 @@
 :local(.container) {
-    padding-top: 24px;
-    display: flex;
-    flex-flow: row;
-    justify-content: space-around;
+  padding-top: 24px;
+  display: flex;
+  flex-flow: row;
+  justify-content: space-around;
 }
 :local(.title) {
-    color: rgb(0, 153, 255);
+  color: rgb(0, 153, 255);
 }
 :local(.graph) {
-    width: 50%;
+  width: 50%;
 }

package/templates/react/igr-ts/category-chart/default/files/src/app/__path__/__filePrefix__.test.tsx

@@ -1,8 +1,8 @@
 import { expect, test } from 'vitest';
 import { render } from '@testing-library/react';
-import $(ClassName) from './index';
+import $(ClassName) from './$(path)';
 
 test('renders $(ClassName) component', () => {
-    const wrapper = render(<$(ClassName) />);
-    expect(wrapper).toBeTruthy();
+  const wrapper = render(<$(ClassName) />);
+  expect(wrapper).toBeTruthy();
 });

package/templates/react/igr-ts/category-chart/default/files/src/app/__path__/__filePrefix__.tsx

@@ -6,36 +6,36 @@ import style from './style.module.css';
 IgrCategoryChartModule.register();
 
 const data = [
-    { 'CountryName': 'China', 'Pop1995': 1216, 'Pop2005': 1297, 'Pop2015': 1361, 'Pop2025': 1394 },
-    { 'CountryName': 'India', 'Pop1995': 920, 'Pop2005': 1090, 'Pop2015': 1251, 'Pop2025': 1396 },
-    { 'CountryName': 'United States', 'Pop1995': 266, 'Pop2005': 295, 'Pop2015': 322, 'Pop2025': 351 },
-    { 'CountryName': 'Indonesia', 'Pop1995': 197, 'Pop2005': 229, 'Pop2015': 256, 'Pop2025': 277 },
-    { 'CountryName': 'Brazil', 'Pop1995': 161, 'Pop2005': 186, 'Pop2015': 204, 'Pop2025': 218 }
+  { 'CountryName': 'China', 'Pop1995': 1216, 'Pop2005': 1297, 'Pop2015': 1361, 'Pop2025': 1394 },
+  { 'CountryName': 'India', 'Pop1995': 920, 'Pop2005': 1090, 'Pop2015': 1251, 'Pop2025': 1396 },
+  { 'CountryName': 'United States', 'Pop1995': 266, 'Pop2005': 295, 'Pop2015': 322, 'Pop2025': 351 },
+  { 'CountryName': 'Indonesia', 'Pop1995': 197, 'Pop2005': 229, 'Pop2015': 256, 'Pop2025': 277 },
+  { 'CountryName': 'Brazil', 'Pop1995': 161, 'Pop2005': 186, 'Pop2015': 204, 'Pop2025': 218 }
 ];
 
 export default function $(ClassName)() {
-    const title = 'Category Chart';
-	const [chartData, setChartData] = useState([]);
+  const title = 'Category Chart';
+  const [chartData, setChartData] = useState([]);
 
-	useEffect(() => {
-		setChartData(data);
-	}, []);
+  useEffect(() => {
+    setChartData(data);
+  }, []);
 
-	return (
-		<div>
-			<h1 className={style.title}>{title}</h1>
-			<div>
-				Read more on the&nbsp;
-				<a href="https://www.infragistics.com/products/ignite-ui-react/react/components/categorychart.html">
-					official documentation page
-				</a>
-			</div>
-			<div className={style.container}>
-				<IgrCategoryChart dataSource={chartData}
-					width="100%"
-					height="500px">
-				</IgrCategoryChart>
-			</div>
-		</div>
-	)
+  return (
+    <div>
+      <h1 className={style.title}>{title}</h1>
+      <div>
+        Read more on the&nbsp;
+        <a href="https://www.infragistics.com/products/ignite-ui-react/react/components/categorychart.html">
+          official documentation page
+        </a>
+      </div>
+      <div className={style.container}>
+        <IgrCategoryChart dataSource={chartData}
+          width="100%"
+          height="500px">
+        </IgrCategoryChart>
+      </div>
+    </div>
+  )
 }

package/templates/react/igr-ts/category-chart/default/files/src/app/__path__/style.module.css

@@ -1,9 +1,9 @@
 :local(.container) {
-    padding-top: 24px;
-    display: flex;
-    flex-flow: row;
-    justify-content: center;
+  padding-top: 24px;
+  display: flex;
+  flex-flow: row;
+  justify-content: center;
 }
 :local(.title) {
-    color: rgb(0, 153, 255);
+  color: rgb(0, 153, 255);
 }

package/templates/react/igr-ts/category-chart/index.js

@@ -10,7 +10,7 @@ class IgrTsCategoryChartComponent extends cli_core_1.BaseComponent {
         this.name = "Category Chart";
         this.group = "Charts";
         this.description = `makes visualizing category data easy. Simplifies the complexities
-							of the data visualization domain into manageable API`;
+			of the data visualization domain into manageable API`;
     }
 }
 module.exports = new IgrTsCategoryChartComponent();

package/templates/react/igr-ts/doughnut-chart/default/files/src/app/__path__/__filePrefix__.test.tsx

@@ -1,8 +1,8 @@
 import { expect, test } from 'vitest';
 import { render } from '@testing-library/react';
-import $(ClassName) from './index';
+import $(ClassName) from './$(path)';
 
 test('renders $(ClassName) component', () => {
-    const wrapper = render(<$(ClassName) />);
-    expect(wrapper).toBeTruthy();
+  const wrapper = render(<$(ClassName) />);
+  expect(wrapper).toBeTruthy();
 });

package/templates/react/igr-ts/doughnut-chart/default/files/src/app/__path__/__filePrefix__.tsx

@@ -14,50 +14,50 @@ IgrRingSeriesModule.register();
 
 
 const data = [
-    { MarketShare: 30, Company: "Google", },
-    { MarketShare: 15, Company: "Microsoft", },
-    { MarketShare: 30, Company: "Apple", },
-    { MarketShare: 15, Company: "Samsung", },
-    { MarketShare: 10, Company: "Other", },
+  { MarketShare: 30, Company: "Google", },
+  { MarketShare: 15, Company: "Microsoft", },
+  { MarketShare: 30, Company: "Apple", },
+  { MarketShare: 15, Company: "Samsung", },
+  { MarketShare: 10, Company: "Other", }
 ];
 
 export default function $(ClassName)() {
-    const title = 'Doughnut Chart';
-    const [chartData, setChartData] = useState([]);
-    const legendRef = useRef();
-    const chartRef = useRef();
+  const title = 'Doughnut Chart';
+  const [chartData, setChartData] = useState([]);
+  const legendRef = useRef();
+  const chartRef = useRef();
 
-    useEffect(() => {
-		setChartData(data);
-	}, []);
+  useEffect(() => {
+    setChartData(data);
+  }, []);
 
-	return (
-		<div>
-			<h1 className={style.title}>{title}</h1>
-			<div>
-				Read more on the&nbsp;
-				<a href="https://www.infragistics.com/products/ignite-ui-react/react/components/doughnutchart.html">
-					official documentation page
-				</a>
-			</div>
-			<div className={style.container}>
-				<div className={style.legend}>
-					<IgrItemLegend ref={legendRef} />
-				</div>
-				<div className={style.chart}>
-					<IgrDoughnutChart ref={chartRef}
-						width="300px"
-						height="300px">
-						<IgrRingSeries
-							name="ring1"
-							dataSource={chartData}
-							labelMemberPath="Company"
-							valueMemberPath="MarketShare"
-							legend={legendRef.current}
-							/>
-					</IgrDoughnutChart>
-				</div>
-			</div>
-		</div>
-	)
+  return (
+    <div>
+      <h1 className={style.title}>{title}</h1>
+      <div>
+        Read more on the&nbsp;
+        <a href="https://www.infragistics.com/products/ignite-ui-react/react/components/doughnutchart.html">
+          official documentation page
+        </a>
+      </div>
+      <div className={style.container}>
+        <div className={style.legend}>
+          <IgrItemLegend ref={legendRef} />
+        </div>
+        <div className={style.chart}>
+          <IgrDoughnutChart ref={chartRef}
+            width="300px"
+            height="300px">
+            <IgrRingSeries
+              name="ring1"
+              dataSource={chartData}
+              labelMemberPath="Company"
+              valueMemberPath="MarketShare"
+              legend={legendRef.current}
+              />
+          </IgrDoughnutChart>
+        </div>
+      </div>
+    </div>
+  )
 }

package/templates/react/igr-ts/doughnut-chart/default/files/src/app/__path__/style.module.css

@@ -1,9 +1,9 @@
 :local(.container) {
-    display: flex;
-    flex-flow: row;
-    justify-content: center;
-    padding-top: 24px;
+  display: flex;
+  flex-flow: row;
+  justify-content: center;
+  padding-top: 24px;
 }
 :local(.title) {
-    color: rgb(0, 153, 255);
+  color: rgb(0, 153, 255);
 }

package/templates/react/igr-ts/financial-chart/default/files/src/app/__path__/__filePrefix__.test.tsx

@@ -1,8 +1,8 @@
 import { expect, test } from 'vitest';
 import { render } from '@testing-library/react';
-import $(ClassName) from './index';
+import $(ClassName) from './$(path)';
 
 test('renders $(ClassName) component', () => {
-    const wrapper = render(<$(ClassName) />);
-    expect(wrapper).toBeTruthy();
+  const wrapper = render(<$(ClassName) />);
+  expect(wrapper).toBeTruthy();
 });

package/templates/react/igr-ts/financial-chart/default/files/src/app/__path__/__filePrefix__.tsx

@@ -6,44 +6,44 @@ import style from './style.module.css';
 IgrFinancialChartModule.register();
 
 const data = [
-	{ time: new Date(2013, 1, 1), open: 268.93, high: 268.93, low: 262.80, close: 265.00, volume: 6118146 },
-	{ time: new Date(2013, 1, 4), open: 262.78, high: 264.68, low: 259.07, close: 259.98, volume: 3723793 },
-	{ time: new Date(2013, 1, 5), open: 262.00, high: 268.03, low: 261.46, close: 266.89, volume: 4013780 },
-	{ time: new Date(2013, 1, 6), open: 265.16, high: 266.89, low: 261.11, close: 262.22, volume: 2772204 },
-	{ time: new Date(2013, 1, 7), open: 264.10, high: 264.10, low: 255.11, close: 260.23, volume: 3977065 },
-	{ time: new Date(2013, 1, 8), open: 261.40, high: 265.25, low: 260.56, close: 261.95, volume: 3879628 },
-	{ time: new Date(2013, 1, 11), open: 263.20, high: 263.25, low: 256.60, close: 257.21, volume: 3407457 },
-	{ time: new Date(2013, 1, 12), open: 259.19, high: 260.16, low: 257.00, close: 258.70, volume: 2944730 },
-	{ time: new Date(2013, 1, 13), open: 261.53, high: 269.96, low: 260.30, close: 269.47, volume: 5295786 },
-	{ time: new Date(2013, 1, 14), open: 267.37, high: 270.65, low: 265.40, close: 269.24, volume: 3464080 },
-	{ time: new Date(2013, 1, 15), open: 267.63, high: 268.92, low: 263.11, close: 265.09, volume: 3981233 }
+  { time: new Date(2013, 1, 1), open: 268.93, high: 268.93, low: 262.80, close: 265.00, volume: 6118146 },
+  { time: new Date(2013, 1, 4), open: 262.78, high: 264.68, low: 259.07, close: 259.98, volume: 3723793 },
+  { time: new Date(2013, 1, 5), open: 262.00, high: 268.03, low: 261.46, close: 266.89, volume: 4013780 },
+  { time: new Date(2013, 1, 6), open: 265.16, high: 266.89, low: 261.11, close: 262.22, volume: 2772204 },
+  { time: new Date(2013, 1, 7), open: 264.10, high: 264.10, low: 255.11, close: 260.23, volume: 3977065 },
+  { time: new Date(2013, 1, 8), open: 261.40, high: 265.25, low: 260.56, close: 261.95, volume: 3879628 },
+  { time: new Date(2013, 1, 11), open: 263.20, high: 263.25, low: 256.60, close: 257.21, volume: 3407457 },
+  { time: new Date(2013, 1, 12), open: 259.19, high: 260.16, low: 257.00, close: 258.70, volume: 2944730 },
+  { time: new Date(2013, 1, 13), open: 261.53, high: 269.96, low: 260.30, close: 269.47, volume: 5295786 },
+  { time: new Date(2013, 1, 14), open: 267.37, high: 270.65, low: 265.40, close: 269.24, volume: 3464080 },
+  { time: new Date(2013, 1, 15), open: 267.63, high: 268.92, low: 263.11, close: 265.09, volume: 3981233 }
 ];
 
 
 export default function $(ClassName)() {
-	const title = 'Financial Chart';
-	const [chartData, setChartData] = useState([]);
+  const title = 'Financial Chart';
+  const [chartData, setChartData] = useState([]);
 
-	useEffect(() => {
-		setChartData(data);
-	}, []);
+  useEffect(() => {
+    setChartData(data);
+  }, []);
 
-	return (
-		<div>
-			<h1 className={style.title}>{title}</h1>
-			<div>
-				Read more on the&nbsp;
-				<a href="https://www.infragistics.com/products/ignite-ui-react/react/components/financialchart.html">
-					official documentation page
-				</a>
-			</div>
-			<div className={style.container}>
-				<IgrFinancialChart
-					width="700px"
-					height="500px"
-					dataSource={chartData}>
-				</IgrFinancialChart>
-			</div>
-		</div>
-	)
+  return (
+    <div>
+      <h1 className={style.title}>{title}</h1>
+      <div>
+        Read more on the&nbsp;
+        <a href="https://www.infragistics.com/products/ignite-ui-react/react/components/financialchart.html">
+          official documentation page
+        </a>
+      </div>
+      <div className={style.container}>
+        <IgrFinancialChart
+          width="700px"
+          height="500px"
+          dataSource={chartData}>
+        </IgrFinancialChart>
+      </div>
+    </div>
+  )
 }

package/templates/react/igr-ts/financial-chart/default/files/src/app/__path__/style.module.css

@@ -1,10 +1,11 @@
 :local(.container) {
-    padding-top: 24px;
-    display: flex;
-    flex-flow: row;
-	justify-content: center;
-	text-align: left;
+  padding-top: 24px;
+  display: flex;
+  flex-flow: row;
+  justify-content: center;
+  text-align: left;
 }
+
 :local(.title) {
-    color: rgb(0, 153, 255);
+  color: rgb(0, 153, 255);
 }

package/templates/react/igr-ts/financial-chart/index.js

@@ -10,7 +10,7 @@ class IgrTsFinancialChartComponent extends cli_core_1.BaseComponent {
         this.name = "Financial Chart";
         this.group = "Charts";
         this.description = `charting component that makes it easy to visualize financial data by
-							using a simple and intuitive API.`;
+			using a simple and intuitive API.`;
     }
 }
 module.exports = new IgrTsFinancialChartComponent();

package/templates/react/igr-ts/grid/basic/files/src/app/__path__/__filePrefix__.test.tsx

@@ -1,8 +1,8 @@
 import { expect, test } from 'vitest';
 import { render } from '@testing-library/react';
-import $(ClassName) from './index';
+import $(ClassName) from './$(path)';
 
 test('renders $(ClassName) component', () => {
-    const wrapper = render(<$(ClassName) />);
-    expect(wrapper).toBeTruthy();
+  const wrapper = render(<$(ClassName) />);
+  expect(wrapper).toBeTruthy();
 });

package/templates/react/igr-ts/grid/basic/files/src/app/__path__/__filePrefix__.tsx

@@ -8,51 +8,51 @@ import data from './data';
 IgrGridModule.register();
 
 export default function $(ClassName)() {
-	const title = 'Grid';
+  const title = 'Grid';
 
-    return (
-        <div>
-            <h1 className={style.title}>{title}</h1>
-            <div>
-                Read more on the&nbsp;
-                <a href="https://www.infragistics.com/products/ignite-ui-react/react/components/grid.html">
-                    official documentation page
-                </a>
-            </div>
-            <div className={style.container}>
-                <div className={style.grid}>
-                    <IgrGrid autoGenerate="false" data={data}>
-                        <IgrColumn
-                            field="ProductID"
-                            header="Product ID"
-                            dataType="Number"
-                        ></IgrColumn>
-                        <IgrColumn
-                            field="ProductName"
-                            header="Product Name"
-                            dataType="String"
-                        ></IgrColumn>
-                        <IgrColumn
-                            field="QuantityPerUnit"
-                            header="Quantity Per Unit"
-                            dataType="String"
-                        ></IgrColumn>
-                        <IgrColumn
-                            field="UnitsInStock"
-                            header="Units In Stock"
-                            dataType="Number"
-                        ></IgrColumn>
-                        <IgrColumn
-                            field="OrderDate"
-                            header="Order Date"
-                            dataType="Date"
-                        ></IgrColumn>
-                    </IgrGrid>
-                </div>
-                <div className={style.grid}>
-                    <IgrGrid autoGenerate="true" data={data} />
-                </div>
-            </div>
+  return (
+    <div>
+      <h1 className={style.title}>{title}</h1>
+      <div>
+        Read more on the&nbsp;
+        <a href="https://www.infragistics.com/products/ignite-ui-react/react/components/grid.html">
+          official documentation page
+        </a>
+      </div>
+      <div className={style.container}>
+        <div className={style.grid}>
+          <IgrGrid autoGenerate="false" data={data}>
+            <IgrColumn
+              field="ProductID"
+              header="Product ID"
+              dataType="Number">
+            </IgrColumn>
+            <IgrColumn
+              field="ProductName"
+              header="Product Name"
+              dataType="String">
+            </IgrColumn>
+            <IgrColumn
+              field="QuantityPerUnit"
+              header="Quantity Per Unit"
+              dataType="String">
+            </IgrColumn>
+            <IgrColumn
+              field="UnitsInStock"
+              header="Units In Stock"
+              dataType="Number">
+            </IgrColumn>
+            <IgrColumn
+              field="OrderDate"
+              header="Order Date"
+              dataType="Date">
+            </IgrColumn>
+          </IgrGrid>
         </div>
-    );
+        <div className={style.grid}>
+          <IgrGrid autoGenerate="true" data={data} />
+        </div>
+      </div>
+    </div>
+  );
 }