igniteui-cli 12.0.5 → 12.0.6-alpha.0

package/templates/react/igr-ts-es6/projects/top-nav/index.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TopNavIgrTsProject = void 0;
+const path = require("path");
+const _base_1 = require("../_base");
+class TopNavIgrTsProject extends _base_1.BaseIgrTsProject {
+    constructor() {
+        super(...arguments);
+        this.id = "top-nav";
+        this.name = "Default top navigation";
+        this.description = "Project structure with top navigation menu";
+        this.dependencies = [];
+        this.framework = "react";
+        this.projectType = "igr-ts-es6";
+        this.hasExtraConfiguration = false;
+    }
+    get templatePaths() {
+        return [...super.templatePaths, path.join(__dirname, "files")];
+    }
+}
+exports.TopNavIgrTsProject = TopNavIgrTsProject;
+exports.default = new TopNavIgrTsProject();

package/templates/react/igr-ts-es6/radial-gauge/default/files/src/views/__path__/index.test.tsx

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

package/templates/react/igr-ts-es6/radial-gauge/default/files/src/views/__path__/index.tsx

@@ -0,0 +1,61 @@
+import React from 'react';
+import { IgrRadialGaugeModule } from 'igniteui-react-gauges';
+import { IgrRadialGauge } from 'igniteui-react-gauges';
+import style from './style.module.css';
+
+IgrRadialGaugeModule.register();
+
+
+export default function $(ClassName)() {
+    const title = 'Radial 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/radialgauge.html">
+				official documentation page
+				</a>                
+			</div>
+			<div className={style.container}>
+				<div className={style.gauge}>
+					<IgrRadialGauge
+						backingShape="Fitted"
+						backingBrush="#fcfcfc"
+						backingOutline="DodgerBlue"
+						backingOversweep={5}
+						backingCornerRadius={10}
+						backingStrokeThickness={5}
+						backingOuterExtent={0.8}
+						backingInnerExtent={0.15}
+						scaleStartAngle={135} scaleEndAngle={45}
+						height="300px" width="50%"
+						minimumValue={0} value={50}
+						maximumValue={80} interval={10}>
+					</IgrRadialGauge>
+				</div>
+				<div className={style.gauge}>
+					<IgrRadialGauge
+						value={50}
+						isNeedleDraggingEnabled={true}
+						isNeedleDraggingConstrained={true}
+						needleShape="NeedleWithBulb"
+						needleBrush="DodgerBlue"
+						needleOutline="DodgerBlue"
+						needleEndExtent={0.475}
+						needleStrokeThickness={1}
+						needlePivotShape="CircleOverlay"
+						needlePivotBrush="#9f9fa0"
+						needlePivotOutline="#9f9fa0"
+						needlePivotWidthRatio={0.2}
+						needlePivotStrokeThickness={1}
+						height="300px" width="50%"
+						minimumValue={0}
+						maximumValue={80} interval={10}>
+					</IgrRadialGauge>
+				</div>
+			</div>
+		</div>
+	)
+}

package/templates/react/igr-ts-es6/radial-gauge/default/files/src/views/__path__/style.module.css

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

package/templates/react/igr-ts-es6/radial-gauge/default/index.d.ts

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

package/templates/react/igr-ts-es6/radial-gauge/default/index.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const IgniteUIForReactTemplate_1 = require("../../../../../lib/templates/IgniteUIForReactTemplate");
+class IgrTsRadialGaugeTemplate extends IgniteUIForReactTemplate_1.IgniteUIForReactTemplate {
+    constructor() {
+        super(__dirname);
+        this.components = ["Radial Gauge"];
+        this.controlGroup = "Gauges";
+        this.listInComponentTemplates = true;
+        this.id = "radial-gauge";
+        this.projectType = "igr-ts-es6";
+        this.name = "Radial Gauge";
+        this.description = `provides a number of visual elements, like a needle, tick marks, ranges
+							and labels, in order to create a predefined shape and scale.`;
+        this.packages = ["igniteui-react-gauges@~16.15.0"]; // TODO: read version from igniteui-react-core in package.json
+    }
+}
+module.exports = new IgrTsRadialGaugeTemplate();

package/templates/react/igr-ts-es6/radial-gauge/index.d.ts

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

package/templates/react/igr-ts-es6/radial-gauge/index.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const cli_core_1 = require("@igniteui/cli-core");
+class IgrTsRadialGaugeComponent extends cli_core_1.BaseComponent {
+    /**
+     *
+     */
+    constructor() {
+        super(__dirname);
+        this.name = "Radial Gauge";
+        this.group = "Gauges";
+        this.description = `provides a number of visual elements, like a needle, tick marks, ranges
+							and labels, in order to create a predefined shape and scale.`;
+    }
+}
+module.exports = new IgrTsRadialGaugeComponent();

package/templates/react/index.js

@@ -6,6 +6,7 @@ class ReactFramework {
         this.projectLibraries = [];
         this.projectLibraries.push(require("./es6"));
         this.projectLibraries.push(require("./igr-es6"));
+        this.projectLibraries.push(require("./igr-ts-es6"));
     }
 }
 module.exports = new ReactFramework();