igniteui-cli 13.1.11 → 13.1.12-beta.2

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>
+  );
 }

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

@@ -1,46 +1,46 @@
 export default [{
-    Discontinued: false,
-    OrderDate: new Date('2012-02-12'),
-    ProductID: 1,
-    ProductName: 'Chai',
-    QuantityPerUnit: '10 boxes x 20 bags',
-    ReorderLevel: 10,
-    UnitPrice: 18.0000,
-    UnitsInStock: 39
+  Discontinued: false,
+  OrderDate: new Date('2012-02-12'),
+  ProductID: 1,
+  ProductName: 'Chai',
+  QuantityPerUnit: '10 boxes x 20 bags',
+  ReorderLevel: 10,
+  UnitPrice: 18.0000,
+  UnitsInStock: 39
 }, {
-    Discontinued: false,
-    OrderDate: new Date('2003-03-17'),
-    ProductID: 2,
-    ProductName: 'Chang',
-    QuantityPerUnit: '24 - 12 oz bottles',
-    ReorderLevel: 25,
-    UnitPrice: 19.0000,
-    UnitsInStock: 17
+  Discontinued: false,
+  OrderDate: new Date('2003-03-17'),
+  ProductID: 2,
+  ProductName: 'Chang',
+  QuantityPerUnit: '24 - 12 oz bottles',
+  ReorderLevel: 25,
+  UnitPrice: 19.0000,
+  UnitsInStock: 17
 }, {
-    Discontinued: false,
-    OrderDate: new Date('2006-03-17'),
-    ProductID: 3,
-    ProductName: 'Aniseed Syrup',
-    QuantityPerUnit: '12 - 550 ml bottles',
-    ReorderLevel: 25,
-    UnitPrice: 10.0000,
-    UnitsInStock: 13
+  Discontinued: false,
+  OrderDate: new Date('2006-03-17'),
+  ProductID: 3,
+  ProductName: 'Aniseed Syrup',
+  QuantityPerUnit: '12 - 550 ml bottles',
+  ReorderLevel: 25,
+  UnitPrice: 10.0000,
+  UnitsInStock: 13
 }, {
-    Discontinued: false,
-    OrderDate: new Date('2016-03-17'),
-    ProductID: 4,
-    ProductName: 'Chef Antons Cajun Seasoning',
-    QuantityPerUnit: '48 - 6 oz jars',
-    ReorderLevel: 0,
-    UnitPrice: 22.0000,
-    UnitsInStock: 53
+  Discontinued: false,
+  OrderDate: new Date('2016-03-17'),
+  ProductID: 4,
+  ProductName: 'Chef Antons Cajun Seasoning',
+  QuantityPerUnit: '48 - 6 oz jars',
+  ReorderLevel: 0,
+  UnitPrice: 22.0000,
+  UnitsInStock: 53
 }, {
-    Discontinued: true,
-    OrderDate: new Date('2011-11-11'),
-    ProductID: 5,
-    ProductName: 'Chef Antons Gumbo Mix',
-    QuantityPerUnit: '36 boxes',
-    ReorderLevel: 0,
-    UnitPrice: 21.3500,
-    UnitsInStock: 0
+  Discontinued: true,
+  OrderDate: new Date('2011-11-11'),
+  ProductID: 5,
+  ProductName: 'Chef Antons Gumbo Mix',
+  QuantityPerUnit: '36 boxes',
+  ReorderLevel: 0,
+  UnitPrice: 21.3500,
+  UnitsInStock: 0
 }];

package/templates/react/igr-ts/grid/basic/files/src/app/__path__/style.module.css

@@ -1,17 +1,17 @@
 :local(.container) {
-	padding-top: 24px;
-	display: flex;
-	flex-flow: column;
-	justify-content: center;
-	align-items: center;
+  padding-top: 24px;
+  display: flex;
+  flex-flow: column;
+  justify-content: center;
+  align-items: center;
 }
 
 :local(.title) {
-	color: rgb(0, 153, 255);
+  color: rgb(0, 153, 255);
 }
 
 :local(.grid) {
-	width: 80%;
-	margin-bottom: 24px;
-	border: 1px solid rgb(0, 153, 255);
+  width: 80%;
+  margin-bottom: 24px;
+  border: 1px solid rgb(0, 153, 255);
 }

package/templates/react/igr-ts/linear-gauge/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/linear-gauge/default/files/src/app/__path__/__filePrefix__.tsx

@@ -5,55 +5,56 @@ import { IgrLinearGauge } from 'igniteui-react-gauges';
 IgrLinearGaugeModule.register();
 
 export default function $(ClassName)() {
-    const title = 'Linear Gauge';
-	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/lineargauge.html">
-					official documentation page
-				</a>
-			</div>
-			<div className={style.container}>
-				<div className={style.gauge}>
-					<IgrLinearGauge
-						height="80px" width="400px"
-						minimumValue={0}
-						maximumValue={100} interval={10}
-						value={50}
-						isNeedleDraggingEnabled={true}
-						needleShape="Custom"
-						needleBrush="DodgerBlue"
-						needleOutline="DodgerBlue"
-						needleStrokeThickness={1}
-						needleBreadth={15}
-						needleInnerExtent={0.35}
-						needleOuterExtent={0.65}
-						needleOuterPointExtent={0.8}
-						needleInnerPointExtent={0.325}
-						needleInnerPointWidth={0}
-						needleOuterPointWidth={0.3}
-						needleInnerBaseWidth={0}
-						needleOuterBaseWidth={0.07}>
-					</IgrLinearGauge>
-				</div>
-				<div className={style.gauge}>
-					<IgrLinearGauge
-						height="80px" width="400px"
-						minimumValue={0} value={50}
-						maximumValue={100} interval={10}
-						isScaleInverted={false}
-						scaleBrush="DodgerBlue"
-						scaleOutline="DarkViolet"
-						scaleStrokeThickness={1}
-						scaleInnerExtent={0.05}
-						scaleOuterExtent={0.65}
-						scaleStartExtent={0.05}
-						scaleEndExtent={0.95}>
-					</IgrLinearGauge>
-				</div>
-			</div>
-		</div>
-	)
+  const title = 'Linear Gauge';
+
+  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/lineargauge.html">
+          official documentation page
+        </a>
+      </div>
+      <div className={style.container}>
+        <div className={style.gauge}>
+          <IgrLinearGauge
+            height="80px" width="400px"
+            minimumValue={0}
+            maximumValue={100} interval={10}
+            value={50}
+            isNeedleDraggingEnabled={true}
+            needleShape="Custom"
+            needleBrush="DodgerBlue"
+            needleOutline="DodgerBlue"
+            needleStrokeThickness={1}
+            needleBreadth={15}
+            needleInnerExtent={0.35}
+            needleOuterExtent={0.65}
+            needleOuterPointExtent={0.8}
+            needleInnerPointExtent={0.325}
+            needleInnerPointWidth={0}
+            needleOuterPointWidth={0.3}
+            needleInnerBaseWidth={0}
+            needleOuterBaseWidth={0.07}>
+          </IgrLinearGauge>
+        </div>
+        <div className={style.gauge}>
+          <IgrLinearGauge
+            height="80px" width="400px"
+            minimumValue={0} value={50}
+            maximumValue={100} interval={10}
+            isScaleInverted={false}
+            scaleBrush="DodgerBlue"
+            scaleOutline="DarkViolet"
+            scaleStrokeThickness={1}
+            scaleInnerExtent={0.05}
+            scaleOuterExtent={0.65}
+            scaleStartExtent={0.05}
+            scaleEndExtent={0.95}>
+          </IgrLinearGauge>
+        </div>
+      </div>
+    </div>
+  )
 }

package/templates/react/igr-ts/linear-gauge/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(.gauge) {
-    width: 50%;
+  width: 50%;
 }

package/templates/react/igr-ts/pie-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/pie-chart/default/files/src/app/__path__/__filePrefix__.tsx

@@ -9,49 +9,48 @@ IgrPieChartModule.register();
 IgrItemLegendModule.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 = 'Pie Chart';
-    const [chartData, setChartData] = useState([]);
-	let legendRef = useRef();
-    let chartRef = useRef();
+  const title = 'Pie Chart';
+  const [chartData, setChartData] = useState([]);
+  let legendRef = useRef();
+  let 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/piechart.html">
-					official documentation page
-				</a>
-			</div>
-			<div className={style.container}>
-				<div className={style.legend}>
-					<IgrItemLegend ref={legendRef} />
-				</div>
-				<div className={style.chart}>
-					<IgrPieChart dataSource={chartData}
-						labelMemberPath="Company"
-						valueMemberPath="MarketShare"
-						width="500px"
-						height="500px"
-						ref={chartRef}
-						legendLabelMemberPath="Label"
-						legend={legendRef.current}
-						/>
-
-				</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/piechart.html">
+          official documentation page
+        </a>
+      </div>
+      <div className={style.container}>
+        <div className={style.legend}>
+          <IgrItemLegend ref={legendRef} />
+        </div>
+        <div className={style.chart}>
+          <IgrPieChart dataSource={chartData}
+            labelMemberPath="Company"
+            valueMemberPath="MarketShare"
+            width="500px"
+            height="500px"
+            ref={chartRef}
+            legendLabelMemberPath="Label"
+            legend={legendRef.current}
+          />
+        </div>
+      </div>
+    </div>
+  )
 }

package/templates/react/igr-ts/pie-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/projects/_base/files/package.json

@@ -6,7 +6,9 @@
   "dependencies": {
     "@testing-library/jest-dom": "^6.1.3",
     "@testing-library/react": "^14.0.0",
+    "element-internals-polyfill": "^1.3.10",
     "functions-have-names": "^1.2.3",
+    "igniteui-dockmanager": "^1.13.0",
     "igniteui-react": "18.3.0",
     "igniteui-react-core": "18.3.0",
     "react": "^18.2.0",
@@ -14,8 +16,7 @@
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.16.0",
     "resize-observer-polyfill": "^1.5.1",
-    "vitest": "^0.34.4",
-    "igniteui-dockmanager": "^1.13.0"
+    "vitest": "^0.34.4"
   },
   "devDependencies": {
     "@types/react": "^18.2.15",

package/templates/react/igr-ts/projects/_base/files/src/app/app.test.tsx

@@ -1,6 +1,7 @@
 import { expect, test } from 'vitest';
 import { render } from '@testing-library/react';
 import App from './app';
+import 'element-internals-polyfill';
 
 test('renders without crashing', () => {
   const wrapper = render(<App />);

package/templates/react/igr-ts/projects/_base/files/src/app/style-utils.ts

@@ -2,7 +2,7 @@
  * Creates a class transformer function that maps matches from a module object
  * @param styles Object map of classes and their scoped name, normally from a CSS Module import
  */
-export default function createClassTransformer(styles: any) {
+export default function createClassTransformer(styles: CSSModuleClasses) {
   return (classes: string) => {
     return classes
       .split(' ')

package/templates/react/igr-ts/projects/_base/files/src/main.tsx

@@ -7,7 +7,7 @@ import 'react-app-polyfill/ie11';
 
 /** Required in IE11 for Charts */
 Number.isNaN = Number.isNaN || function(value) {
-    return value !== value;
+  return value !== value;
 }
 
 const router = createBrowserRouter([