diff --git a/CHANGELOG.md b/CHANGELOG.md index dc639b9f4..bc9f46084 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,54 @@ +# [9.0.4](https://github.com/IgniteUI/igniteui-cli/compare/v9.0.3...v9.0.4) (2021-12-15) +## igniteui/cli-core@9.0.4 + +* Note: Version bump only for package igniteui/cli-core + +## igniteui/angular-templates@13.0.904 + +* Note: Version bump only for package igniteui/angular-templates + +## igniteui/angular-schematics@13.0.904 + +* Note: Version bump only for package igniteui/angular-schematics + +## igniteui-cli@9.0.4 + +- `igniteui-webcomponents` - Fix lint for grid templates [PR #965](https://github.com/IgniteUI/igniteui-cli/pull/965) + +# [9.0.3](https://github.com/IgniteUI/igniteui-cli/compare/v9.0.2...v9.0.3) (2021-12-13) +## igniteui/cli-core@9.0.3 + +* Note: Version bump only for package igniteui/cli-core + +## igniteui/angular-templates@13.0.903 + +* Fix home import without placeholder [PR #966](https://github.com/IgniteUI/igniteui-cli/pull/966) + +## igniteui/angular-schematics@13.0.903 + +* Note: Version bump only for package igniteui/angular-schematics + +## igniteui-cli@9.0.3 + +* Note: Version bump only for package igniteui-cli + +# [9.0.2](https://github.com/IgniteUI/igniteui-cli/compare/v9.0.1...v9.0.2) (2021-12-10) +## igniteui/cli-core@9.0.2 + +- `igniteui-webcomponents` - adding more Web components templates & bundling [PR #954](https://github.com/IgniteUI/igniteui-cli/pull/954) + +## igniteui/angular-templates@13.0.902 + +* Update @imports to @use for scss modules [PR #961](https://github.com/IgniteUI/igniteui-cli/pull/961) + +## igniteui/angular-schematics@13.0.902 + +* Note: Version bump only for package igniteui/angular-schematics + +## igniteui-cli@9.0.2 + +* Note: Version bump only for package igniteui-cli@9.0.2 + # [9.0.1](https://github.com/IgniteUI/igniteui-cli/compare/v9.0.0...v9.0.1) (2021-11-25) All packages are configured to use `typescript` version, lower than `4.5.x`, until there is a compatibility with the later `typescript` version. diff --git a/package.json b/package.json index e9a6977f4..c94a01000 100644 --- a/package.json +++ b/package.json @@ -79,7 +79,7 @@ "source-map-support": "^0.5.4", "ts-node": "^6.2.0", "tslint": "^5.11.0", - "typescript": "~4.4.4", + "typescript": "~4.5.2", "typescript-json-schema": "^0.42.0" }, "workspaces": [ diff --git a/packages/cli/migrations/update-4_2_3/index.spec.ts b/packages/cli/migrations/update-4_2_3/index.spec.ts index ee63dad28..f5694bdb2 100644 --- a/packages/cli/migrations/update-4_2_3/index.spec.ts +++ b/packages/cli/migrations/update-4_2_3/index.spec.ts @@ -26,7 +26,7 @@ describe("Update 4.2.3", () => { it("should add Awesome Grid extra paginator style", async done => { const stylesFile = "/src/app/awesome-grid/awesome-grid.component.scss"; appTree.create(stylesFile, -`@import '~igniteui-angular/theming'; +`@use 'igniteui-angular/theming' as *; :host ::ng-deep { @@ -46,7 +46,7 @@ describe("Update 4.2.3", () => { await schematicRunner.runSchematicAsync("migration-04", {}, appTree).toPromise(); expect(appTree.readContent(stylesFile).replace(/\r\n/g, "\n")) .toEqual( -`@import '~igniteui-angular/theming'; +`@use 'igniteui-angular/theming' as *; :host ::ng-deep { diff --git a/packages/cli/package.json b/packages/cli/package.json index 8ba5cfa61..9c9cf993e 100644 --- a/packages/cli/package.json +++ b/packages/cli/package.json @@ -1,6 +1,6 @@ { "name": "igniteui-cli", - "version": "9.0.1", + "version": "9.0.4", "description": "CLI tool for creating Ignite UI projects", "keywords": [ "CLI", @@ -78,8 +78,8 @@ "all": true }, "dependencies": { - "@igniteui/angular-templates": "~13.0.901", - "@igniteui/cli-core": "~9.0.1", + "@igniteui/angular-templates": "~13.0.904", + "@igniteui/cli-core": "~9.0.4", "chalk": "^2.3.2", "fs-extra": "^3.0.1", "glob": "^7.1.2", @@ -87,7 +87,7 @@ "opn": "^5.3.0", "resolve": "^1.6.0", "through2": "^2.0.3", - "typescript": "~4.4.4", + "typescript": "~4.5.2", "yargs": "^8.0.2" }, "devDependencies": { diff --git a/packages/cli/templates/angular/ig-ts/projects/empty/files/package.json b/packages/cli/templates/angular/ig-ts/projects/empty/files/package.json index f14d638c3..acca2af27 100644 --- a/packages/cli/templates/angular/ig-ts/projects/empty/files/package.json +++ b/packages/cli/templates/angular/ig-ts/projects/empty/files/package.json @@ -10,26 +10,26 @@ }, "private": true, "dependencies": { - "@angular/animations": "~13.0.0", - "@angular/common": "~13.0.0", - "@angular/compiler": "~13.0.0", - "@angular/core": "~13.0.0", - "@angular/forms": "~13.0.0", - "@angular/platform-browser": "~13.0.0", - "@angular/platform-browser-dynamic": "~13.0.0", - "@angular/router": "~13.0.0", + "@angular/animations": "~13.1.1", + "@angular/common": "~13.1.1", + "@angular/compiler": "~13.1.1", + "@angular/core": "~13.1.1", + "@angular/forms": "~13.1.1", + "@angular/platform-browser": "~13.1.1", + "@angular/platform-browser-dynamic": "~13.1.1", + "@angular/router": "~13.1.1", "jquery": ">=1.9.1", "jquery-ui": ">=1.10.5", - "igniteui-angular-wrappers": "^13.0.1", - "ignite-ui": "~20.2", + "igniteui-angular-wrappers": "^13.1.0", + "ignite-ui": "~21.2", "rxjs": "~6.6.0", "tslib": "^2.2.0", "zone.js": "~0.11.4" }, "devDependencies": { - "@angular-devkit/build-angular": "~13.0.1", - "@angular/cli": "~13.0.1", - "@angular/compiler-cli": "~13.0.0", + "@angular-devkit/build-angular": "~13.1.2", + "@angular/cli": "~13.1.2", + "@angular/compiler-cli": "~13.1.1", "@types/jasmine": "~3.8.0", "@types/node": "^12.11.1", "igniteui-cli": "^$(cliVersion)", @@ -39,6 +39,6 @@ "karma-coverage": "~2.0.3", "karma-jasmine": "~4.0.0", "karma-jasmine-html-reporter": "~1.7.0", - "typescript": "~4.4.4" + "typescript": "~4.5.2" } } diff --git a/packages/cli/templates/jquery/js/projects/empty/files/package.json b/packages/cli/templates/jquery/js/projects/empty/files/package.json index 93d8181ef..f265a3445 100644 --- a/packages/cli/templates/jquery/js/projects/empty/files/package.json +++ b/packages/cli/templates/jquery/js/projects/empty/files/package.json @@ -7,7 +7,7 @@ "dependencies": { "jquery": ">=1.9.1", "jquery-ui": ">=1.10.5", - "ignite-ui": "~20.1" + "ignite-ui": "~21.2" }, "devDependencies": { "browser-sync": "^2.26.3", diff --git a/packages/cli/templates/quickstart/angular/package.json b/packages/cli/templates/quickstart/angular/package.json index 56d9c69b5..71092bcd4 100644 --- a/packages/cli/templates/quickstart/angular/package.json +++ b/packages/cli/templates/quickstart/angular/package.json @@ -31,7 +31,7 @@ "devDependencies": { "concurrently": "^3.1.0", "lite-server": "^2.5.4", - "typescript": "~4.4.4", + "typescript": "~4.5.2", "canonical-path": "0.0.2", "http-server": "^0.12.1", "tslint": "~6.1.0", diff --git a/packages/cli/templates/quickstart/react/package.json b/packages/cli/templates/quickstart/react/package.json index b34d0c4de..d8de012de 100644 --- a/packages/cli/templates/quickstart/react/package.json +++ b/packages/cli/templates/quickstart/react/package.json @@ -15,7 +15,7 @@ "bin": { }, "dependencies": { - "ignite-ui": "~20.1", + "ignite-ui": "~21.2", "lite-server": "^2.3.0", "babel-runtime": "6.22.0", "react": "15.4.2", diff --git a/packages/cli/templates/react/igr-es6/bullet-graph/default/index.ts b/packages/cli/templates/react/igr-es6/bullet-graph/default/index.ts index 770f7cdf7..b98dca030 100644 --- a/packages/cli/templates/react/igr-es6/bullet-graph/default/index.ts +++ b/packages/cli/templates/react/igr-es6/bullet-graph/default/index.ts @@ -10,7 +10,7 @@ class IgrBulletGraphTemplate extends IgniteUIForReactTemplate { this.projectType = "igr-es6"; this.name = "Bullet Graph"; this.description = `allows for a linear and concise view of measures compared against a scale.`; - this.packages = ["igniteui-react-gauges@~16.12.0"]; // TODO: read version from igniteui-react-core in package.json + this.packages = ["igniteui-react-gauges@~16.15.0"]; // TODO: read version from igniteui-react-core in package.json } } module.exports = new IgrBulletGraphTemplate(); diff --git a/packages/cli/templates/react/igr-es6/category-chart/default/index.ts b/packages/cli/templates/react/igr-es6/category-chart/default/index.ts index 2050fc0f7..8378a3371 100644 --- a/packages/cli/templates/react/igr-es6/category-chart/default/index.ts +++ b/packages/cli/templates/react/igr-es6/category-chart/default/index.ts @@ -11,7 +11,7 @@ class IgrCategoryChartTemplate extends IgniteUIForReactTemplate { this.name = "Category Chart"; this.description = `makes visualizing category data easy. Simplifies the complexities of the data visualization domain into manageable API`; - this.packages = ["igniteui-react-charts@~16.12.0"]; // TODO: read version from igniteui-react-core in package.json + this.packages = ["igniteui-react-charts@~16.15.0"]; // TODO: read version from igniteui-react-core in package.json } } module.exports = new IgrCategoryChartTemplate(); diff --git a/packages/cli/templates/react/igr-es6/doughnut-chart/default/index.ts b/packages/cli/templates/react/igr-es6/doughnut-chart/default/index.ts index 1f4451f7b..86139cded 100644 --- a/packages/cli/templates/react/igr-es6/doughnut-chart/default/index.ts +++ b/packages/cli/templates/react/igr-es6/doughnut-chart/default/index.ts @@ -10,7 +10,7 @@ class IgrDoughnutChartTemplate extends IgniteUIForReactTemplate { this.projectType = "igr-es6"; this.name = "Doughnut Chart"; this.description = `proportionally illustrate the occurrences of variables.`; - this.packages = ["igniteui-react-charts@~16.12.0"]; // TODO: read version from igniteui-react-core in package.json + this.packages = ["igniteui-react-charts@~16.15.0"]; // TODO: read version from igniteui-react-core in package.json } } module.exports = new IgrDoughnutChartTemplate(); diff --git a/packages/cli/templates/react/igr-es6/financial-chart/default/index.ts b/packages/cli/templates/react/igr-es6/financial-chart/default/index.ts index 47ea98ddb..ebd77ebb2 100644 --- a/packages/cli/templates/react/igr-es6/financial-chart/default/index.ts +++ b/packages/cli/templates/react/igr-es6/financial-chart/default/index.ts @@ -12,7 +12,7 @@ class IgrFinancialChartTemplate extends IgniteUIForReactTemplate { this.name = "Financial Chart"; this.description = `charting component that makes it easy to visualize financial data by using a simple and intuitive API.`; - this.packages = ["igniteui-react-charts@~16.12.0"]; // TODO: read version from igniteui-react-core in package.json + this.packages = ["igniteui-react-charts@~16.15.0"]; // TODO: read version from igniteui-react-core in package.json } } module.exports = new IgrFinancialChartTemplate(); diff --git a/packages/cli/templates/react/igr-es6/grid/basic/index.ts b/packages/cli/templates/react/igr-es6/grid/basic/index.ts index e1f635926..979119959 100644 --- a/packages/cli/templates/react/igr-es6/grid/basic/index.ts +++ b/packages/cli/templates/react/igr-es6/grid/basic/index.ts @@ -15,8 +15,8 @@ class GridTemplate extends IgniteUIForReactTemplate { this.components = ["Grid"]; this.controlGroup = "Data Grids"; // TODO: read version from igniteui-react-core in package.json - this.packages = ["igniteui-react-grids@~16.12.0", "igniteui-react-inputs@~16.12.0", - "igniteui-react-layouts@~16.12.0"]; + this.packages = ["igniteui-react-grids@~16.15.0", "igniteui-react-inputs@~16.15.0", + "igniteui-react-layouts@~16.15.0"]; this.hasExtraConfiguration = false; } diff --git a/packages/cli/templates/react/igr-es6/linear-gauge/default/index.ts b/packages/cli/templates/react/igr-es6/linear-gauge/default/index.ts index 31e2b43c9..200cd9a69 100644 --- a/packages/cli/templates/react/igr-es6/linear-gauge/default/index.ts +++ b/packages/cli/templates/react/igr-es6/linear-gauge/default/index.ts @@ -10,7 +10,7 @@ class IgrLinearGaugeTemplate extends IgniteUIForReactTemplate { this.projectType = "igr-es6"; this.name = "Linear Gauge"; this.description = `value compared against a scale and one or more ranges.`; - this.packages = ["igniteui-react-gauges@~16.12.0"]; // TODO: read version from igniteui-react-core in package.json + this.packages = ["igniteui-react-gauges@~16.15.0"]; // TODO: read version from igniteui-react-core in package.json } } module.exports = new IgrLinearGaugeTemplate(); diff --git a/packages/cli/templates/react/igr-es6/pie-chart/default/index.ts b/packages/cli/templates/react/igr-es6/pie-chart/default/index.ts index 15d1577c1..5f279cc8b 100644 --- a/packages/cli/templates/react/igr-es6/pie-chart/default/index.ts +++ b/packages/cli/templates/react/igr-es6/pie-chart/default/index.ts @@ -10,7 +10,7 @@ class IgrPieChartTemplate extends IgniteUIForReactTemplate { this.projectType = "igr-es6"; this.name = "Pie Chart"; this.description = `easily illustate the proportions of data entries`; - this.packages = ["igniteui-react-charts@~16.12.0"]; // TODO: read version from igniteui-react-core in package.json + this.packages = ["igniteui-react-charts@~16.15.0"]; // TODO: read version from igniteui-react-core in package.json } } module.exports = new IgrPieChartTemplate(); diff --git a/packages/cli/templates/react/igr-es6/projects/_base/files/package.json b/packages/cli/templates/react/igr-es6/projects/_base/files/package.json index bec106fc5..d16f609d8 100644 --- a/packages/cli/templates/react/igr-es6/projects/_base/files/package.json +++ b/packages/cli/templates/react/igr-es6/projects/_base/files/package.json @@ -3,7 +3,7 @@ "version": "0.1.0", "private": true, "dependencies": { - "igniteui-react-core": "~16.12.0", + "igniteui-react-core": "~16.15.0", "react": "^16.8.2", "react-app-polyfill": "^0.2.0", "react-dom": "^16.8.2", diff --git a/packages/cli/templates/react/igr-es6/radial-gauge/default/index.ts b/packages/cli/templates/react/igr-es6/radial-gauge/default/index.ts index 5fd548737..287fb7d35 100644 --- a/packages/cli/templates/react/igr-es6/radial-gauge/default/index.ts +++ b/packages/cli/templates/react/igr-es6/radial-gauge/default/index.ts @@ -11,7 +11,7 @@ class IgrRadialGaugeTemplate extends IgniteUIForReactTemplate { 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.12.0"]; // TODO: read version from igniteui-react-core in package.json + this.packages = ["igniteui-react-gauges@~16.15.0"]; // TODO: read version from igniteui-react-core in package.json } } module.exports = new IgrRadialGaugeTemplate(); diff --git a/packages/cli/templates/webcomponents/TypeScriptFileUpdate.ts b/packages/cli/templates/webcomponents/TypeScriptFileUpdate.ts index ba2123dd6..e9b09b33f 100644 --- a/packages/cli/templates/webcomponents/TypeScriptFileUpdate.ts +++ b/packages/cli/templates/webcomponents/TypeScriptFileUpdate.ts @@ -114,11 +114,11 @@ export class TypeScriptFileUpdate { .concat(newObject); } - const elements = ts.createNodeArray([ + const elements = ts.factory.createNodeArray([ ...resultNodes ]); - return ts.updateArrayLiteral(array, elements); + return ts.factory.updateArrayLiteralExpression(array, elements); } else { return ts.visitEachChild(node, conditionalVisitor, context); } @@ -161,22 +161,22 @@ export class TypeScriptFileUpdate { return; } - const newStatements = ts.createNodeArray([ + const newStatements = ts.factory.createNodeArray([ ...this.targetSource.statements.slice(0, this.importsMeta.lastIndex), ...newImports.map(x => this.createIdentifierImport(x.from)), ...this.targetSource.statements.slice(this.importsMeta.lastIndex) ]); newImports.forEach(x => this.createdStringLiterals.push(x.from)); - this.targetSource = ts.updateSourceFileNode(this.targetSource, newStatements); + this.targetSource = ts.factory.updateSourceFile(this.targetSource, newStatements); } protected createIdentifierImport(importPath: string): ts.ImportDeclaration { - const importDeclaration = ts.createImportDeclaration( + const importDeclaration = ts.factory.createImportDeclaration( undefined, undefined, undefined, - ts.createLiteral(importPath)); + ts.factory.createStringLiteral(importPath)); return importDeclaration; } @@ -357,9 +357,9 @@ export class TypeScriptFileUpdate { } private createRouteEntry(filePath: string, className: string, linkText: string): ts.ObjectLiteralExpression { - const routePath = ts.createPropertyAssignment("path", ts.createLiteral(filePath)); - const routeComponent = ts.createPropertyAssignment("component", ts.createLiteral(className)); - const routeData = ts.createPropertyAssignment("name", ts.createLiteral(linkText)); - return ts.createObjectLiteral([routePath, routeComponent, routeData]); + const routePath = ts.factory.createPropertyAssignment("path", ts.factory.createStringLiteral(filePath)); + const routeComponent = ts.factory.createPropertyAssignment("component", ts.factory.createStringLiteral(className)); + const routeData = ts.factory.createPropertyAssignment("name", ts.factory.createStringLiteral(linkText)); + return ts.factory.createObjectLiteralExpression([routePath, routeComponent, routeData]); } } diff --git a/packages/cli/templates/webcomponents/igc-ts/custom-templates/subscription-form/files/src/app/__path__/__filePrefix__.ts b/packages/cli/templates/webcomponents/igc-ts/custom-templates/subscription-form/files/src/app/__path__/__filePrefix__.ts new file mode 100644 index 000000000..c93852df1 --- /dev/null +++ b/packages/cli/templates/webcomponents/igc-ts/custom-templates/subscription-form/files/src/app/__path__/__filePrefix__.ts @@ -0,0 +1,61 @@ +import { + defineComponents, + IgcFormComponent, + IgcInputComponent, + IgcCheckboxComponent, + IgcButtonComponent +} from 'igniteui-webcomponents'; + +defineComponents(IgcFormComponent, IgcInputComponent, IgcCheckboxComponent, IgcButtonComponent); + +export default class $(ClassName) extends HTMLElement { + connectedCallback() { + this.innerHTML = ` + + +
+ +
Subscribe
+ + + I accept the license agreement +
+
+ Reset + Submit +
+ +
+ `; + + document.addEventListener('igcSubmit', function (event) { + const customEvent = event as CustomEvent; + const formData = customEvent.detail; + const formKeys = formData.keys(); + const formEntries = formData.entries(); + let result = ''; + do { + const pair = formEntries.next().value; + if (pair) { + result += pair[0] + '=' + pair[1] + ';'; + } + } while (!formKeys.next().done) + console.log(result); + alert(result); + }); + } +} + +customElements.define('app-$(path)', $(ClassName)); diff --git a/packages/cli/templates/webcomponents/igc-ts/custom-templates/subscription-form/index.ts b/packages/cli/templates/webcomponents/igc-ts/custom-templates/subscription-form/index.ts new file mode 100644 index 000000000..7f27ed319 --- /dev/null +++ b/packages/cli/templates/webcomponents/igc-ts/custom-templates/subscription-form/index.ts @@ -0,0 +1,18 @@ +import { TypeScriptFileUpdate } from "@igniteui/cli-core"; +import { IgniteUIForWebComponentsTemplate } from "../../../../../lib/templates/IgniteUIForWebComponentsTemplate"; + +class IgcSubscriptionFormTemplate extends IgniteUIForWebComponentsTemplate { + constructor() { + super(__dirname); + this.listInComponentTemplates = false; + this.listInCustomTemplates = true; + this.id = "subscription-form"; + this.projectType = "igc-ts"; + this.name = "Subscription Form"; + this.description = "Subscription form with inputs, buttons and a checkbox inside"; + } + protected addClassDeclaration(mainModule: TypeScriptFileUpdate, projPath: string, name: string, modulePath: string) { + // not applicable with custom module + } +} +module.exports = new IgcSubscriptionFormTemplate(); diff --git a/packages/cli/templates/webcomponents/igc-ts/financial-chart/default/files/src/app/__path__/StockIndexData.ts b/packages/cli/templates/webcomponents/igc-ts/financial-chart/default/files/src/app/__path__/StockIndexData.ts new file mode 100644 index 000000000..2010c93b2 --- /dev/null +++ b/packages/cli/templates/webcomponents/igc-ts/financial-chart/default/files/src/app/__path__/StockIndexData.ts @@ -0,0 +1,130 @@ +export class StockIndexData { + public static getData(): any[] { + return [ +{ 'Date': new Date(2020, 2, 3), 'Open': 3235, 'High': 3268, 'Low': 3235, 'Close': 3248, 'Volume': 3757910000 }, +{ 'Date': new Date(2020, 2, 4), 'Open': 3280, 'High': 3306, 'Low': 3280, 'Close': 3297, 'Volume': 3995320000 }, +{ 'Date': new Date(2020, 2, 5), 'Open': 3324, 'High': 3337, 'Low': 3313, 'Close': 3334, 'Volume': 4117730000 }, +{ 'Date': new Date(2020, 2, 6), 'Open': 3344, 'High': 3347, 'Low': 3334, 'Close': 3345, 'Volume': 3868370000 }, +{ 'Date': new Date(2020, 2, 7), 'Open': 3335, 'High': 3341, 'Low': 3322, 'Close': 3327, 'Volume': 3730650000 }, +{ 'Date': new Date(2020, 2, 10), 'Open': 3318, 'High': 3352, 'Low': 3317, 'Close': 3352, 'Volume': 3450350000 }, +{ 'Date': new Date(2020, 2, 11), 'Open': 3365, 'High': 3375, 'Low': 3352, 'Close': 3357, 'Volume': 3760550000 }, +{ 'Date': new Date(2020, 2, 12), 'Open': 3370, 'High': 3381, 'Low': 3369, 'Close': 3379, 'Volume': 3926380000 }, +{ 'Date': new Date(2020, 2, 13), 'Open': 3365, 'High': 3385, 'Low': 3360, 'Close': 3373, 'Volume': 3498240000 }, +{ 'Date': new Date(2020, 2, 14), 'Open': 3378, 'High': 3380, 'Low': 3366, 'Close': 3380, 'Volume': 3398040000 }, +{ 'Date': new Date(2020, 2, 18), 'Open': 3369, 'High': 3375, 'Low': 3355, 'Close': 3370, 'Volume': 3746720000 }, +{ 'Date': new Date(2020, 2, 19), 'Open': 3380, 'High': 3393, 'Low': 3378, 'Close': 3386, 'Volume': 3600150000 }, +{ 'Date': new Date(2020, 2, 20), 'Open': 3380, 'High': 3389, 'Low': 3341, 'Close': 3373, 'Volume': 4007320000 }, +{ 'Date': new Date(2020, 2, 21), 'Open': 3360, 'High': 3360, 'Low': 3328, 'Close': 3337, 'Volume': 3899270000 }, +{ 'Date': new Date(2020, 2, 24), 'Open': 3257, 'High': 3259, 'Low': 3214, 'Close': 3225, 'Volume': 4842960000 }, +{ 'Date': new Date(2020, 2, 25), 'Open': 3238, 'High': 3246, 'Low': 3118, 'Close': 3128, 'Volume': 5591510000 }, +{ 'Date': new Date(2020, 2, 26), 'Open': 3139, 'High': 3182, 'Low': 3108, 'Close': 3116, 'Volume': 5478110000 }, +{ 'Date': new Date(2020, 2, 27), 'Open': 3062, 'High': 3097, 'Low': 2977, 'Close': 2978, 'Volume': 7058840000 }, +{ 'Date': new Date(2020, 2, 28), 'Open': 2916, 'High': 2959, 'Low': 2855, 'Close': 2954, 'Volume': 8563850000 }, +{ 'Date': new Date(2020, 3, 2), 'Open': 2974, 'High': 3090, 'Low': 2945, 'Close': 3090, 'Volume': 6376400000 }, +{ 'Date': new Date(2020, 3, 3), 'Open': 3096, 'High': 3136, 'Low': 2976, 'Close': 3003, 'Volume': 6355940000 }, +{ 'Date': new Date(2020, 3, 4), 'Open': 3045, 'High': 3130, 'Low': 3034, 'Close': 3130, 'Volume': 5035480000 }, +{ 'Date': new Date(2020, 3, 5), 'Open': 3075, 'High': 3083, 'Low': 2999, 'Close': 3023, 'Volume': 5575550000 }, +{ 'Date': new Date(2020, 3, 6), 'Open': 2954, 'High': 2985, 'Low': 2901, 'Close': 2972, 'Volume': 6552140000 }, +{ 'Date': new Date(2020, 3, 9), 'Open': 2863, 'High': 2863, 'Low': 2734, 'Close': 2746, 'Volume': 8423050000 }, +{ 'Date': new Date(2020, 3, 10), 'Open': 2813, 'High': 2882, 'Low': 2734, 'Close': 2882, 'Volume': 7635960000 }, +{ 'Date': new Date(2020, 3, 11), 'Open': 2825, 'High': 2825, 'Low': 2707, 'Close': 2741, 'Volume': 7374110000 }, +{ 'Date': new Date(2020, 3, 12), 'Open': 2630, 'High': 2660, 'Low': 2478, 'Close': 2480, 'Volume': 8829380000 }, +{ 'Date': new Date(2020, 3, 13), 'Open': 2569, 'High': 2711, 'Low': 2492, 'Close': 2711, 'Volume': 8258670000 }, +{ 'Date': new Date(2020, 3, 16), 'Open': 2508, 'High': 2562, 'Low': 2380, 'Close': 2386, 'Volume': 7781540000 }, +{ 'Date': new Date(2020, 3, 17), 'Open': 2425, 'High': 2553, 'Low': 2367, 'Close': 2529, 'Volume': 8358500000 }, +{ 'Date': new Date(2020, 3, 18), 'Open': 2436, 'High': 2453, 'Low': 2280, 'Close': 2398, 'Volume': 8755780000 }, +{ 'Date': new Date(2020, 3, 19), 'Open': 2393, 'High': 2466, 'Low': 2319, 'Close': 2409, 'Volume': 7946710000 }, +{ 'Date': new Date(2020, 3, 20), 'Open': 2431, 'High': 2453, 'Low': 2295, 'Close': 2304, 'Volume': 9044690000 }, +{ 'Date': new Date(2020, 3, 23), 'Open': 2290, 'High': 2300, 'Low': 2191, 'Close': 2237, 'Volume': 7402180000 }, +{ 'Date': new Date(2020, 3, 24), 'Open': 2344, 'High': 2449, 'Low': 2344, 'Close': 2447, 'Volume': 7547350000 }, +{ 'Date': new Date(2020, 3, 25), 'Open': 2457, 'High': 2571, 'Low': 2407, 'Close': 2475, 'Volume': 8285670000 }, +{ 'Date': new Date(2020, 3, 26), 'Open': 2501, 'High': 2637, 'Low': 2500, 'Close': 2630, 'Volume': 7753160000 }, +{ 'Date': new Date(2020, 3, 27), 'Open': 2555, 'High': 2615, 'Low': 2520, 'Close': 2541, 'Volume': 6194330000 }, +{ 'Date': new Date(2020, 3, 30), 'Open': 2558, 'High': 2631, 'Low': 2545, 'Close': 2626, 'Volume': 5746220000 }, +{ 'Date': new Date(2020, 3, 31), 'Open': 2614, 'High': 2641, 'Low': 2571, 'Close': 2584, 'Volume': 6568290000 }, +{ 'Date': new Date(2020, 4, 1), 'Open': 2498, 'High': 2522, 'Low': 2447, 'Close': 2470, 'Volume': 5947900000 }, +{ 'Date': new Date(2020, 4, 2), 'Open': 2458, 'High': 2533, 'Low': 2455, 'Close': 2526, 'Volume': 6454990000 }, +{ 'Date': new Date(2020, 4, 3), 'Open': 2514, 'High': 2538, 'Low': 2459, 'Close': 2488, 'Volume': 6087190000 }, +{ 'Date': new Date(2020, 4, 6), 'Open': 2578, 'High': 2676, 'Low': 2574, 'Close': 2663, 'Volume': 6391860000 }, +{ 'Date': new Date(2020, 4, 7), 'Open': 2738, 'High': 2756, 'Low': 2657, 'Close': 2659, 'Volume': 7040720000 }, +{ 'Date': new Date(2020, 4, 8), 'Open': 2685, 'High': 2760, 'Low': 2663, 'Close': 2749, 'Volume': 5856370000 }, +{ 'Date': new Date(2020, 4, 9), 'Open': 2776, 'High': 2818, 'Low': 2762, 'Close': 2789, 'Volume': 7880140000 }, +{ 'Date': new Date(2020, 4, 13), 'Open': 2782, 'High': 2782, 'Low': 2721, 'Close': 2761, 'Volume': 5274310000 }, +{ 'Date': new Date(2020, 4, 14), 'Open': 2805, 'High': 2851, 'Low': 2805, 'Close': 2846, 'Volume': 5567400000 }, +{ 'Date': new Date(2020, 4, 15), 'Open': 2795, 'High': 2801, 'Low': 2761, 'Close': 2783, 'Volume': 5203390000 }, +{ 'Date': new Date(2020, 4, 16), 'Open': 2799, 'High': 2806, 'Low': 2764, 'Close': 2799, 'Volume': 5179990000 }, +{ 'Date': new Date(2020, 4, 17), 'Open': 2842, 'High': 2879, 'Low': 2830, 'Close': 2874, 'Volume': 5792140000 }, +{ 'Date': new Date(2020, 4, 20), 'Open': 2845, 'High': 2868, 'Low': 2820, 'Close': 2823, 'Volume': 5220160000 }, +{ 'Date': new Date(2020, 4, 21), 'Open': 2784, 'High': 2785, 'Low': 2727, 'Close': 2736, 'Volume': 5075830000 }, +{ 'Date': new Date(2020, 4, 22), 'Open': 2787, 'High': 2815, 'Low': 2775, 'Close': 2799, 'Volume': 5049660000 }, +{ 'Date': new Date(2020, 4, 23), 'Open': 2810, 'High': 2844, 'Low': 2794, 'Close': 2797, 'Volume': 5756520000 }, +{ 'Date': new Date(2020, 4, 24), 'Open': 2812, 'High': 2842, 'Low': 2791, 'Close': 2836, 'Volume': 5374480000 }, +{ 'Date': new Date(2020, 4, 27), 'Open': 2854, 'High': 2887, 'Low': 2852, 'Close': 2878, 'Volume': 5194260000 }, +{ 'Date': new Date(2020, 4, 28), 'Open': 2909, 'High': 2921, 'Low': 2860, 'Close': 2863, 'Volume': 5672880000 }, +{ 'Date': new Date(2020, 4, 29), 'Open': 2918, 'High': 2954, 'Low': 2912, 'Close': 2939, 'Volume': 6620140000 }, +{ 'Date': new Date(2020, 4, 30), 'Open': 2930, 'High': 2930, 'Low': 2892, 'Close': 2912, 'Volume': 6523120000 }, +{ 'Date': new Date(2020, 5, 1), 'Open': 2869, 'High': 2869, 'Low': 2821, 'Close': 2830, 'Volume': 4753160000 }, +{ 'Date': new Date(2020, 5, 4), 'Open': 2815, 'High': 2844, 'Low': 2797, 'Close': 2842, 'Volume': 4723140000 }, +{ 'Date': new Date(2020, 5, 5), 'Open': 2868, 'High': 2898, 'Low': 2863, 'Close': 2868, 'Volume': 5129590000 }, +{ 'Date': new Date(2020, 5, 6), 'Open': 2883, 'High': 2891, 'Low': 2847, 'Close': 2848, 'Volume': 4861920000 }, +{ 'Date': new Date(2020, 5, 7), 'Open': 2878, 'High': 2901, 'Low': 2876, 'Close': 2881, 'Volume': 5164640000 }, +{ 'Date': new Date(2020, 5, 8), 'Open': 2908, 'High': 2932, 'Low': 2902, 'Close': 2929, 'Volume': 4857160000 }, +{ 'Date': new Date(2020, 5, 11), 'Open': 2915, 'High': 2944, 'Low': 2903, 'Close': 2930, 'Volume': 4807320000 }, +{ 'Date': new Date(2020, 5, 12), 'Open': 2939, 'High': 2945, 'Low': 2869, 'Close': 2870, 'Volume': 5107710000 }, +{ 'Date': new Date(2020, 5, 13), 'Open': 2865, 'High': 2874, 'Low': 2793, 'Close': 2820, 'Volume': 6143130000 }, +{ 'Date': new Date(2020, 5, 14), 'Open': 2794, 'High': 2852, 'Low': 2766, 'Close': 2852, 'Volume': 5641920000 }, +{ 'Date': new Date(2020, 5, 15), 'Open': 2829, 'High': 2865, 'Low': 2816, 'Close': 2863, 'Volume': 5477040000 }, +{ 'Date': new Date(2020, 5, 18), 'Open': 2913, 'High': 2968, 'Low': 2913, 'Close': 2953, 'Volume': 6364290000 }, +{ 'Date': new Date(2020, 5, 19), 'Open': 2948, 'High': 2964, 'Low': 2922, 'Close': 2922, 'Volume': 4969330000 }, +{ 'Date': new Date(2020, 5, 20), 'Open': 2953, 'High': 2980, 'Low': 2953, 'Close': 2971, 'Volume': 4992970000 }, +{ 'Date': new Date(2020, 5, 21), 'Open': 2969, 'High': 2978, 'Low': 2938, 'Close': 2948, 'Volume': 4966940000 }, +{ 'Date': new Date(2020, 5, 22), 'Open': 2948, 'High': 2956, 'Low': 2933, 'Close': 2955, 'Volume': 3952800000 }, +{ 'Date': new Date(2020, 5, 26), 'Open': 3004, 'High': 3021, 'Low': 2988, 'Close': 2991, 'Volume': 5837060000 }, +{ 'Date': new Date(2020, 5, 27), 'Open': 3015, 'High': 3036, 'Low': 2969, 'Close': 3036, 'Volume': 6371230000 }, +{ 'Date': new Date(2020, 5, 28), 'Open': 3046, 'High': 3068, 'Low': 3023, 'Close': 3029, 'Volume': 5402670000 }, +{ 'Date': new Date(2020, 5, 29), 'Open': 3025, 'High': 3049, 'Low': 2998, 'Close': 3044, 'Volume': 7275080000 }, +{ 'Date': new Date(2020, 6, 1), 'Open': 3038, 'High': 3062, 'Low': 3031, 'Close': 3055, 'Volume': 4673410000 }, +{ 'Date': new Date(2020, 6, 2), 'Open': 3064, 'High': 3081, 'Low': 3051, 'Close': 3080, 'Volume': 5187230000 }, +{ 'Date': new Date(2020, 6, 3), 'Open': 3098, 'High': 3130, 'Low': 3098, 'Close': 3122, 'Volume': 5989560000 }, +{ 'Date': new Date(2020, 6, 4), 'Open': 3111, 'High': 3128, 'Low': 3090, 'Close': 3112, 'Volume': 6428130000 }, +{ 'Date': new Date(2020, 6, 5), 'Open': 3163, 'High': 3211, 'Low': 3163, 'Close': 3193, 'Volume': 8617590000 }, +{ 'Date': new Date(2020, 6, 8), 'Open': 3199, 'High': 3233, 'Low': 3196, 'Close': 3232, 'Volume': 8437380000 }, +{ 'Date': new Date(2020, 6, 9), 'Open': 3213, 'High': 3222, 'Low': 3193, 'Close': 3207, 'Volume': 6382620000 }, +{ 'Date': new Date(2020, 6, 10), 'Open': 3213, 'High': 3223, 'Low': 3181, 'Close': 3190, 'Volume': 6570840000 }, +{ 'Date': new Date(2020, 6, 11), 'Open': 3123, 'High': 3123, 'Low': 2999, 'Close': 3002, 'Volume': 7018890000 }, +{ 'Date': new Date(2020, 6, 12), 'Open': 3071, 'High': 3088, 'Low': 2984, 'Close': 3041, 'Volume': 5832250000 }, +{ 'Date': new Date(2020, 6, 15), 'Open': 2993, 'High': 3079, 'Low': 2965, 'Close': 3066, 'Volume': 5740660000 }, +{ 'Date': new Date(2020, 6, 16), 'Open': 3131, 'High': 3153, 'Low': 3076, 'Close': 3124, 'Volume': 5829240000 }, +{ 'Date': new Date(2020, 6, 17), 'Open': 3136, 'High': 3141, 'Low': 3108, 'Close': 3113, 'Volume': 4549390000 }, +{ 'Date': new Date(2020, 6, 18), 'Open': 3101, 'High': 3120, 'Low': 3093, 'Close': 3115, 'Volume': 4429030000 }, +{ 'Date': new Date(2020, 6, 19), 'Open': 3140, 'High': 3155, 'Low': 3083, 'Close': 3097, 'Volume': 8327780000 }, +{ 'Date': new Date(2020, 6, 22), 'Open': 3094, 'High': 3120, 'Low': 3079, 'Close': 3117, 'Volume': 4665380000 }, +{ 'Date': new Date(2020, 6, 23), 'Open': 3138, 'High': 3154, 'Low': 3127, 'Close': 3131, 'Volume': 4704830000 }, +{ 'Date': new Date(2020, 6, 24), 'Open': 3114, 'High': 3115, 'Low': 3032, 'Close': 3050, 'Volume': 5587200000 }, +{ 'Date': new Date(2020, 6, 25), 'Open': 3046, 'High': 3086, 'Low': 3024, 'Close': 3083, 'Volume': 4815420000 }, +{ 'Date': new Date(2020, 6, 26), 'Open': 3073, 'High': 3073, 'Low': 3004, 'Close': 3009, 'Volume': 8098120000 }, +{ 'Date': new Date(2020, 6, 29), 'Open': 3018, 'High': 3053, 'Low': 2999, 'Close': 3053, 'Volume': 4462770000 }, +{ 'Date': new Date(2020, 6, 30), 'Open': 3050, 'High': 3111, 'Low': 3047, 'Close': 3100, 'Volume': 4696280000 }, +{ 'Date': new Date(2020, 7, 1), 'Open': 3105, 'High': 3128, 'Low': 3101, 'Close': 3115, 'Volume': 4443130000 }, +{ 'Date': new Date(2020, 7, 2), 'Open': 3143, 'High': 3165, 'Low': 3124, 'Close': 3130, 'Volume': 4190830000 }, +{ 'Date': new Date(2020, 7, 6), 'Open': 3155, 'High': 3182, 'Low': 3155, 'Close': 3179, 'Volume': 4736450000 }, +{ 'Date': new Date(2020, 7, 7), 'Open': 3166, 'High': 3184, 'Low': 3142, 'Close': 3145, 'Volume': 4563700000 }, +{ 'Date': new Date(2020, 7, 8), 'Open': 3153, 'High': 3171, 'Low': 3136, 'Close': 3169, 'Volume': 4927700000 }, +{ 'Date': new Date(2020, 7, 9), 'Open': 3176, 'High': 3179, 'Low': 3115, 'Close': 3152, 'Volume': 4829020000 }, +{ 'Date': new Date(2020, 7, 10), 'Open': 3152, 'High': 3186, 'Low': 3136, 'Close': 3185, 'Volume': 4515340000 }, +{ 'Date': new Date(2020, 7, 13), 'Open': 3205, 'High': 3235, 'Low': 3149, 'Close': 3155, 'Volume': 4890780000 }, +{ 'Date': new Date(2020, 7, 14), 'Open': 3141, 'High': 3200, 'Low': 3127, 'Close': 3197, 'Volume': 4476170000 }, +{ 'Date': new Date(2020, 7, 15), 'Open': 3225, 'High': 3238, 'Low': 3200, 'Close': 3226, 'Volume': 4669760000 }, +{ 'Date': new Date(2020, 7, 16), 'Open': 3208, 'High': 3220, 'Low': 3198, 'Close': 3215, 'Volume': 3961230000 }, +{ 'Date': new Date(2020, 7, 17), 'Open': 3224, 'High': 3233, 'Low': 3205, 'Close': 3224, 'Volume': 3993830000 }, +{ 'Date': new Date(2020, 7, 20), 'Open': 3224, 'High': 3258, 'Low': 3215, 'Close': 3251, 'Volume': 3971200000 }, +{ 'Date': new Date(2020, 7, 21), 'Open': 3268, 'High': 3277, 'Low': 3247, 'Close': 3257, 'Volume': 4547960000 }, +{ 'Date': new Date(2020, 7, 22), 'Open': 3254, 'High': 3279, 'Low': 3253, 'Close': 3276, 'Volume': 4255190000 }, +{ 'Date': new Date(2020, 7, 23), 'Open': 3271, 'High': 3279, 'Low': 3222, 'Close': 3235, 'Volume': 4290460000 }, +{ 'Date': new Date(2020, 7, 24), 'Open': 3218, 'High': 3227, 'Low': 3200, 'Close': 3215, 'Volume': 3894900000 }, +{ 'Date': new Date(2020, 7, 27), 'Open': 3219, 'High': 3241, 'Low': 3214, 'Close': 3239, 'Volume': 3963910000 }, +{ 'Date': new Date(2020, 7, 28), 'Open': 3234, 'High': 3243, 'Low': 3216, 'Close': 3218, 'Volume': 4027890000 }, +{ 'Date': new Date(2020, 7, 29), 'Open': 3227, 'High': 3264, 'Low': 3227, 'Close': 3258, 'Volume': 4676300000 } +]; + } +} diff --git a/packages/cli/templates/webcomponents/igc-ts/financial-chart/default/files/src/app/__path__/__filePrefix__.ts b/packages/cli/templates/webcomponents/igc-ts/financial-chart/default/files/src/app/__path__/__filePrefix__.ts new file mode 100644 index 000000000..602015bc5 --- /dev/null +++ b/packages/cli/templates/webcomponents/igc-ts/financial-chart/default/files/src/app/__path__/__filePrefix__.ts @@ -0,0 +1,53 @@ +import { StockIndexData } from './StockIndexData'; +import { + IgcFinancialChartComponent , + IgcFinancialChartModule, + FinancialChartXAxisMode, + FinancialChartYAxisMode , +} from 'igniteui-webcomponents-charts'; +import { ModuleManager } from 'igniteui-webcomponents-core'; + +ModuleManager.register(IgcFinancialChartModule); + +export default class $(ClassName) extends HTMLElement { + constructor() { + super(); + this.attachShadow({ mode: 'open' }); + this.shadowRoot!.innerHTML = ` + + + + `; + } + + connectedCallback() { + const chart = document.getElementsByTagName('app-$(path)')[0].shadowRoot!.getElementById('chart') as IgcFinancialChartComponent; + chart.dataSource = StockIndexData.getData(); + chart.yAxisMode = FinancialChartYAxisMode.Numeric; + } +} + +customElements.define('app-$(path)', $(ClassName)); diff --git a/packages/cli/templates/webcomponents/igc-ts/financial-chart/default/index.ts b/packages/cli/templates/webcomponents/igc-ts/financial-chart/default/index.ts new file mode 100644 index 000000000..06c596dcf --- /dev/null +++ b/packages/cli/templates/webcomponents/igc-ts/financial-chart/default/index.ts @@ -0,0 +1,19 @@ +import { TypeScriptFileUpdate } from "@igniteui/cli-core"; +import { IgniteUIForWebComponentsTemplate } from "../../../../../lib/templates/IgniteUIForWebComponentsTemplate"; + +class IgcFinancialChartTemplate extends IgniteUIForWebComponentsTemplate { + constructor() { + super(__dirname); + this.components = ["FinancialChart"]; + this.controlGroup = "Charts"; + this.listInComponentTemplates = true; + this.id = "financial-chart"; + this.projectType = "igc-ts"; + this.name = "Financial Chart"; + this.description = "IgcFinancialChart"; + } + protected addClassDeclaration(mainModule: TypeScriptFileUpdate, projPath: string, name: string, modulePath: string) { + // not applicable with custom module + } +} +module.exports = new IgcFinancialChartTemplate(); diff --git a/packages/cli/templates/webcomponents/igc-ts/financial-chart/index.ts b/packages/cli/templates/webcomponents/igc-ts/financial-chart/index.ts new file mode 100644 index 000000000..03af74445 --- /dev/null +++ b/packages/cli/templates/webcomponents/igc-ts/financial-chart/index.ts @@ -0,0 +1,11 @@ +import { BaseComponent } from "@igniteui/cli-core"; + +class IgcFinancialChartComponent extends BaseComponent { + constructor() { + super(__dirname); + this.name = "Financial Chart"; + this.group = "Charts"; + this.description = "pick from different chart views"; + } +} +module.exports = new IgcFinancialChartComponent(); diff --git a/packages/cli/templates/webcomponents/igc-ts/grid/default/files/src/app/__path__/__filePrefix__.ts b/packages/cli/templates/webcomponents/igc-ts/grid/default/files/src/app/__path__/__filePrefix__.ts index 69f492943..b3b837b33 100644 --- a/packages/cli/templates/webcomponents/igc-ts/grid/default/files/src/app/__path__/__filePrefix__.ts +++ b/packages/cli/templates/webcomponents/igc-ts/grid/default/files/src/app/__path__/__filePrefix__.ts @@ -2,17 +2,13 @@ import { IgcDataGridModule, IgcGridColumnOptionsModule, IgcDataGridComponent, - IgcImageColumnComponent, - IgcTextColumnComponent, - IgcNumericColumnComponent, - IgcDateTimeColumnComponent, - IgcColumnGroupDescription + IgcColumnGroupDescription, } from 'igniteui-webcomponents-grids'; import { ModuleManager } from 'igniteui-webcomponents-core'; ModuleManager.register( IgcDataGridModule, - IgcGridColumnOptionsModule + IgcGridColumnOptionsModule, ); export default class $(ClassName) extends HTMLElement { @@ -43,13 +39,14 @@ export default class $(ClassName) extends HTMLElement { constructor() { super(); - this.attachShadow({mode: 'open'}); + this.attachShadow({ mode: 'open' }); this.shadowRoot!.innerHTML = ` diff --git a/packages/cli/templates/webcomponents/igc-ts/grid/default/index.ts b/packages/cli/templates/webcomponents/igc-ts/grid/default/index.ts index 475290d01..b8566e6e0 100644 --- a/packages/cli/templates/webcomponents/igc-ts/grid/default/index.ts +++ b/packages/cli/templates/webcomponents/igc-ts/grid/default/index.ts @@ -5,7 +5,7 @@ class IgcGridTemplate extends IgniteUIForWebComponentsTemplate { constructor() { super(__dirname); this.components = ["Grid"]; - this.controlGroup = "Hidden"; + this.controlGroup = "Grids & Lists"; this.listInComponentTemplates = true; this.id = "grid"; this.projectType = "igc-ts"; diff --git a/packages/cli/templates/webcomponents/igc-ts/grid/grid-editing/files/src/app/__path__/DataGridSharedData.ts b/packages/cli/templates/webcomponents/igc-ts/grid/grid-editing/files/src/app/__path__/DataGridSharedData.ts new file mode 100644 index 000000000..8c84a3600 --- /dev/null +++ b/packages/cli/templates/webcomponents/igc-ts/grid/grid-editing/files/src/app/__path__/DataGridSharedData.ts @@ -0,0 +1,297 @@ +/* eslint-disable no-param-reassign */ +export class DataGridSharedData { + public static getEmployees(count?: number): any[] { + if (count === undefined) { + count = 250; + } + + const employees: any[] = []; + let maleCount: number = 0; + let femaleCount: number = 0; + for (let i = 0; i < count; i += 1) { + const age: number = Math.round(this.getRandomNumber(20, 40)); + const gender: string = this.getRandomGender(); + const firstName: string = this.getRandomNameFirst(gender); + const lastName: string = this.getRandomNameLast(); + const street: string = this.getRandomStreet(); + const country: string = this.getRandomItem(this.countries); + const city: string = this.getRandomCity(country); + const generation = `${Math.floor(age / 10) * 10}s`; + const email: string = `${firstName.toLowerCase()}@${this.getRandomItem(this.emails)}`; + const website: string = `${firstName.toLowerCase()}-${this.getRandomItem(this.websites)}`; + let photoPath: any; + + if (gender === 'male') { + maleCount += 1; + if (maleCount > 26) { + maleCount = 1; + } + photoPath = this.getPhotoMale(maleCount); + } else { + femaleCount += 1; + if (femaleCount > 24) { + femaleCount = 1; + } + photoPath = this.getPhotoFemale(femaleCount); + } + + const person: any = {}; + person.Address = `${street},${city}`; + person.Age = age; + person.Birthday = this.getBirthday(age); + person.City = city; + person.Country = country; + person.CountryFlag = this.getCountryFlag(country); + person.Email = email; + person.FirstName = firstName; + person.Gender = this.getGenderPhoto(gender); + person.Generation = generation; + person.ID = this.pad(i + 1, 5); + person.LastName = lastName; + person.Name = `${firstName} ${lastName}`; + person.Phone = this.getRandomPhone(); + person.Photo = photoPath; + person.Street = street; + person.Salary = this.getRandomNumber(40, 200) * 1000; + person.Sales = this.getRandomNumber(200, 980) * 1000; + person.Website = website; + person.Productivity = this.getProductivity(); + + if (person.Salary < 50000) { + person.Income = 'Low'; + } else if (person.Salary < 100000) { + person.Income = 'Average'; + } else { + person.Income = 'High'; + } + + employees.push(person); + } + return employees; + } + + public static getProductivity(weekCount?: number): any[] { + if (weekCount === undefined) { + weekCount = 52; + } + const productivity: any[] = []; + for (let w = 0; w < weekCount; w += 1) { + const value = this.getRandomNumber(-50, 50); + productivity.push({ Value: value, Week: w }); + } + return productivity; + } + + public static getSales(count?: number): any[] { + if (count === undefined) { + count = 250; + } + + const names: string[] = [ + 'Intel CPU', 'AMD CPU', + 'NVIDIA GPU', 'GIGABYTE GPU', 'Asus GPU', 'AMD GPU', 'MSI GPU', + 'Corsair Memory', 'Patriot Memory', 'Skill Memory', + 'Samsung HDD', 'WD HDD', 'Seagate HDD', 'Intel HDD', + 'Samsung SSD', 'WD SSD', 'Seagate SSD', 'Intel SSD', + 'Samsung Monitor', 'Asus Monitor', 'LG Monitor', 'HP Monitor']; + const countries: string[] = ['USA', 'UK', 'France', 'Canada', 'Poland', 'Japan', 'Germany']; + const status: string[] = ['Packing', 'Shipped', 'Delivered']; + const sales: any[] = []; + + for (let i = 0; i < count; i += 1) { + const price = this.getRandomNumber(100, 900); + const items = this.getRandomNumber(10, 80); + const value = price * items; + const margin = this.getRandomNumber(3, 10); + const profit = Math.round((price * (margin / 100)) * items); + const country = this.getRandomItem(countries); + sales.push({ + BundlePrice: price, + ProductPrice: price, + Margin: margin, + OrderDate: this.getRandomDate(new Date(2012, 0, 1), new Date()), + OrderItems: items, + OrderValue: value, // Math.round(value / 1000) + ',' + Math.round(value % 1000), + ProductID: 1001 + i, + ProductName: this.getRandomItem(names), + Profit: profit, + Countries: country, + CountryFlag: this.getCountryFlag(country), + Status: this.getRandomItem(status), + }); + } + return sales; + } + + public static getHouses(count?: number): any[] { + if (count === undefined) { + count = 250; + } + + const houses: any[] = []; + const property: string[] = ['Townhouse', 'Single', 'Condo', 'Villa']; + const emails: string[] = ['estates.com', 'remax.com', 'zillow.com', 'realtor.com', 'coldwell.com']; + const countries: string[] = ['USA', 'UK', 'France', 'Canada', 'Poland', 'Japan', 'Germany']; + + for (let i = 0; i < count; i += 1) { + const year: number = this.getRandomNumber(1950, 2015); + const age: number = 2020 - year; + + const gender: string = this.getRandomGender(); + const firstName: string = this.getRandomNameFirst(gender); + const lastName: string = this.getRandomNameLast(); + const initials = firstName.substr(0, 1).toLowerCase(); + const email: string = `${initials + lastName.toLowerCase()}@${this.getRandomItem(emails)}`; + + const street: string = this.getRandomStreet(); + const country: string = this.getRandomItem(countries); + const city: string = this.getRandomCity(country); + + houses.push({ + Address: `${street},${city}`, + Age: age, + Agent: `${firstName} ${lastName}`, + Area: this.getRandomNumber(50, 300), + Baths: this.getRandomNumber(1, 3), + Built: year, + City: city, + Country: country, + CountryFlag: this.getCountryFlag(country), + Email: email, + ID: this.pad(i + 1, 5), + Phone: this.getRandomPhone(), + Price: this.getRandomNumber(210, 900) * 1000, + Property: this.getRandomItem(property), + Rooms: this.getRandomNumber(2, 5), + SaleDate: this.getRandomDate(new Date(2015, 0, 1), new Date()), + Street: street, + }); + } + return houses; + } + + private static websites: string[] = ['.com', '.gov', '.edu', '.org']; + + private static emails: string[] = ['gmail.com', 'yahoo.com', 'twitter.com']; + + private static genders: string[] = ['male', 'female']; + + private static maleNames: string[] = ['Kyle', 'Oscar', 'Ralph', 'Mike', 'Bill', 'Frank', 'Howard', 'Jack', 'Larry', 'Pete', 'Steve', 'Vince', 'Mark', 'Alex', 'Max', 'Brian', 'Chris', 'Andrew', 'Martin', 'Mike', 'Steve', 'Glenn', 'Bruce']; + + private static femaleNames: string[] = ['Gina', 'Irene', 'Katie', 'Brenda', 'Casey', 'Fiona', 'Holly', 'Kate', 'Liz', 'Pamela', 'Nelly', 'Marisa', 'Monica', 'Anna', 'Jessica', 'Sofia', 'Isabella', 'Margo', 'Jane', 'Audrey', 'Sally', 'Melanie', 'Greta', 'Aurora', 'Sally']; + + private static lastNames: string[] = ['Adams', 'Crowley', 'Ellis', 'Martinez', 'Irvine', 'Maxwell', 'Clark', 'Owens', 'Rooney', 'Lincoln', 'Thomas', 'Spacey', 'MOrgan', 'King', 'Newton', 'Fitzgerald', 'Holmes', 'Jefferson', 'Landry', 'Berry', 'Perez', 'Spencer', 'Starr', 'Carter', 'Edwards', 'Stark', 'Johnson', 'Fitz', 'Chief', 'Blanc', 'Perry', 'Stone', 'Williams', 'Lane', 'Jobs', 'Adams', 'Power', 'Tesla']; + + private static countries: string[] = ['USA', 'UK', 'France', 'Canada', 'Poland']; + + private static citiesUS: string[] = ['New York', 'Los Angeles', 'Miami', 'San Francisco', 'San Diego', 'Las Vegas']; + + private static citiesUK: string[] = ['London', 'Liverpool', 'Manchester']; + + private static citiesFR: string[] = ['Paris', 'Marseille', 'Lyon']; + + private static citiesCA: string[] = ['Toronto', 'Vancouver', 'Montreal']; + + private static citiesPL: string[] = ['Krakow', 'Warsaw', 'Wroclaw', 'Gdansk']; + + private static citiesJP: string[] = ['Tokyo', 'Osaka', 'Kyoto', 'Yokohama']; + + private static citiesGR: string[] = ['Berlin', 'Bonn', 'Cologne', 'Munich', 'Hamburg']; + + private static roadSuffixes: string[] = ['Road', 'Street', 'Way']; + + private static roadNames: string[] = ['Main', 'Garden', 'Broad', 'Oak', 'Cedar', 'Park', 'Pine', 'Elm', 'Market', 'Hill']; + + private static getRandomNumber(min: number, max: number): number { + return Math.round(min + Math.random() * (max - min)); + } + + private static getRandomItem(array: any[]): any { + const index = Math.round(this.getRandomNumber(0, array.length - 1)); + return array[index]; + } + + private static getRandomDate(start: Date, end: Date) { + return new Date(start.getTime() + Math.random() * (end.getTime() - start.getTime())); + } + + private static getRandomPhone(): string { + const phoneCode = this.getRandomNumber(100, 900); + const phoneNum1 = this.getRandomNumber(100, 900); + const phoneNum2 = this.getRandomNumber(1000, 9000); + const phone = `${phoneCode}-${phoneNum1}-${phoneNum2}`; + return phone; + } + + private static getRandomGender(): string { + return this.getRandomItem(this.genders); + } + + private static getRandomNameLast(): string { + return this.getRandomItem(this.lastNames); + } + + private static getRandomNameFirst(gender: string): string { + if (gender === 'male') { + return this.getRandomItem(this.maleNames); + } + + return this.getRandomItem(this.femaleNames); + } + + private static getRandomCity(country: string): string { + if (country === 'Canada') { + return this.getRandomItem(this.citiesCA); + } if (country === 'France') { + return this.getRandomItem(this.citiesFR); + } if (country === 'Poland') { + return this.getRandomItem(this.citiesPL); + } if (country === 'USA') { + return this.getRandomItem(this.citiesUS); + } if (country === 'Japan') { + return this.getRandomItem(this.citiesJP); + } if (country === 'Germany') { + return this.getRandomItem(this.citiesGR); + } // if (country === 'United Kingdom') + return this.getRandomItem(this.citiesUK); + } + + private static getRandomStreet(): string { + const num = Math.round(this.getRandomNumber(100, 300)).toString(); + const road = this.getRandomItem(this.roadNames); + const suffix = this.getRandomItem(this.roadSuffixes); + return `${num} ${road} ${suffix}`; + } + + private static getBirthday(age: number): Date { + const today: Date = new Date(); + const year: number = today.getFullYear() - age; + const month: number = this.getRandomNumber(0, 8); + const day: number = this.getRandomNumber(10, 27); + return new Date(year, month, day); + } + + private static getPhotoMale(id: number): string { + return `https://static.infragistics.com/xplatform/images/people//GUY${this.pad(id, 2)}.png`; + } + + private static getPhotoFemale(id: number): string { + return `https://static.infragistics.com/xplatform/images/people/GIRL${this.pad(id, 2)}.png`; + } + + private static getGenderPhoto(gender: string): string { + return `https://static.infragistics.com/xplatform/images/genders/${gender}.png`; + } + + private static getCountryFlag(country: string): string { + return `https://static.infragistics.com/xplatform/images/flags/${country}.png`; + } + + private static pad(num: number, size: number) { + let s = `${num}`; + while (s.length < size) { + s = `0${s}`; + } + return s; + } +} diff --git a/packages/cli/templates/webcomponents/igc-ts/grid/grid-editing/files/src/app/__path__/__filePrefix__.ts b/packages/cli/templates/webcomponents/igc-ts/grid/grid-editing/files/src/app/__path__/__filePrefix__.ts new file mode 100644 index 000000000..4124c3beb --- /dev/null +++ b/packages/cli/templates/webcomponents/igc-ts/grid/grid-editing/files/src/app/__path__/__filePrefix__.ts @@ -0,0 +1,218 @@ +/* eslint-disable import/extensions */ +import { + IgcDataGridModule, + IgcGridColumnOptionsModule, + IgcDataGridComponent, + IgcGridCellValueChangingEventArgs, + IgcTemplateCellUpdatingEventArgs, + IgcTemplateColumnComponent, + GridActivationMode, + GridSelectionMode, + EditModeType, +} from 'igniteui-webcomponents-grids'; +import { ModuleManager } from 'igniteui-webcomponents-core'; +import { DataGridSharedData } from './DataGridSharedData'; + +ModuleManager.register( + IgcDataGridModule, + IgcGridColumnOptionsModule, +); + +export default class $(ClassName) extends HTMLElement { + data: any[] = DataGridSharedData.getEmployees(); + + constructor() { + super(); + this.attachShadow({ mode: 'open' }); + this.shadowRoot!.innerHTML = ` + +
+
+ + + + Edit Mode: + + + Edit Mode: + +
+ + + + + + + + + + + + +
+ `; + } + + connectedCallback() { + const grid = document.getElementsByTagName('app-grid-editing')[0].shadowRoot!.getElementById('grid') as IgcDataGridComponent; + const commitButton = document.getElementsByTagName('app-grid-editing')[0].shadowRoot!.getElementById('commitClick') as HTMLButtonElement; + const undoButton = document.getElementsByTagName('app-grid-editing')[0].shadowRoot!.getElementById('undoClick') as HTMLButtonElement; + const redoButton = document.getElementsByTagName('app-grid-editing')[0].shadowRoot!.getElementById('redoClick') as HTMLButtonElement; + + const onCommitClick = () => { + grid.commitEdits(); + commitButton.disabled = true; + undoButton.disabled = !grid.canUndo; + }; + + const onUndoClick = () => { + grid.undo(); + undoButton.disabled = !grid.canUndo; + if (!grid.canUndo) { + commitButton.disabled = grid.canCommit; + } else { + commitButton.disabled = !grid.canCommit; + } + + redoButton.disabled = !grid.canRedo; + }; + + const onRedoClick = () => { + grid.redo(); + + if (grid.editMode === EditModeType.Cell || grid.editMode === EditModeType.None) { + commitButton.disabled = !grid.canCommit; + } + if (grid.editMode === EditModeType.CellBatch || grid.editMode === EditModeType.Row) { + redoButton.disabled = !grid.canRedo; + undoButton.disabled = !grid.canUndo; + if (!grid.canUndo) { + commitButton.disabled = grid.canCommit; + } else { + commitButton.disabled = !grid.canCommit; + } + } + }; + + if (commitButton !== null) { + commitButton.onclick = onCommitClick; + } + if (undoButton !== null) { + undoButton.onclick = onUndoClick; + } + + if (redoButton !== null) { + redoButton.onclick = onRedoClick; + } + + const onDeleteRowClick = (e: MouseEvent) => { + const button = e.srcElement as HTMLButtonElement; + const viewIndex = parseInt(button.id, 10); + const rowItem = grid.actualDataSource.getItemAtIndex(viewIndex); + + if (grid.editMode === EditModeType.CellBatch || grid.editMode === EditModeType.Row) { + grid.removeItem(rowItem); + commitButton.disabled = !grid.canCommit; + redoButton.disabled = !grid.canRedo; + undoButton.disabled = !grid.canUndo; + } else if (grid.editMode === EditModeType.Cell) { + // delete grid row immediately + grid.removeItem(rowItem); + } + }; + + const onDeleteCellUpdating = (s: IgcTemplateColumnComponent, + e: IgcTemplateCellUpdatingEventArgs) => { + const content = e.content as HTMLDivElement; + if (content.childElementCount === 0) { + const button = document.createElement('button') as HTMLButtonElement; + button.innerText = 'Delete'; + button.onclick = onDeleteRowClick; + content.appendChild(button); + } + + const button = content.children[0] as HTMLButtonElement; + button.disabled = e.cellInfo.isDeleted; + button.id = e.cellInfo.dataRow.toString(); + }; + + const editModeChanged = (event: any) => { + grid.cancelEdits(); + grid.editMode = event.target.value; + if (grid.editMode === EditModeType.None || grid.editMode === EditModeType.Cell) { + commitButton.disabled = true; + undoButton.disabled = !grid.canUndo; + redoButton.disabled = !grid.canRedo; + } + }; + + const editModeClickActionChanged = (event: any) => { + grid.editModeClickAction = event.target.value; + }; + + const onCellValueChanging = (s: IgcDataGridComponent, e: IgcGridCellValueChangingEventArgs) => { + if (s.editMode === EditModeType.CellBatch || grid.editMode === EditModeType.Row) { + commitButton.disabled = !grid.canCommit; + undoButton.disabled = false; + } else if (grid.editMode === EditModeType.Cell || grid.editMode === EditModeType.None) { + commitButton.disabled = grid.canCommit; + } + if (e.newValue === '') { + commitButton.disabled = true; + s.setEditError(e.editID, 'Error, cell is empty'); + } + }; + + if (grid !== null) { + grid.dataSource = this.data; + grid.activationMode = GridActivationMode.Cell; + grid.selectionMode = GridSelectionMode.SingleCell; + grid.editMode = EditModeType.Cell; + grid.cellValueChanging = onCellValueChanging; + } + + const dropDown = document.getElementsByTagName('app-grid-editing')[0].shadowRoot!.getElementById('editModeDropBox'); + if (dropDown !== null) { + dropDown.onchange = editModeChanged; + } + + const dropDown2 = document.getElementsByTagName('app-grid-editing')[0].shadowRoot!.getElementById('editModeClickActionDropBox'); + if (dropDown2 !== null) { + dropDown2.onchange = editModeClickActionChanged; + } + + const deleteRowColumn = document.getElementsByTagName('app-grid-editing')[0].shadowRoot!.getElementById('deleteRowColumn') as IgcTemplateColumnComponent; + if (deleteRowColumn !== null) { + deleteRowColumn.cellUpdating = onDeleteCellUpdating; + } + } +} + +customElements.define('app-$(path)', $(ClassName)); diff --git a/packages/cli/templates/webcomponents/igc-ts/grid/grid-editing/index.ts b/packages/cli/templates/webcomponents/igc-ts/grid/grid-editing/index.ts new file mode 100644 index 000000000..1365f580d --- /dev/null +++ b/packages/cli/templates/webcomponents/igc-ts/grid/grid-editing/index.ts @@ -0,0 +1,19 @@ +import { TypeScriptFileUpdate } from "@igniteui/cli-core"; +import { IgniteUIForWebComponentsTemplate } from "../../../../../lib/templates/IgniteUIForWebComponentsTemplate"; + +class IgcGridEditingTemplate extends IgniteUIForWebComponentsTemplate { + constructor() { + super(__dirname); + this.components = ["Grid"]; + this.controlGroup = "Grids & Lists"; + this.listInComponentTemplates = true; + this.id = "grid-editing"; + this.projectType = "igc-ts"; + this.name = "Grid Editing"; + this.description = "IgcGrid with editing enabled"; + } + protected addClassDeclaration(mainModule: TypeScriptFileUpdate, projPath: string, name: string, modulePath: string) { + // not applicable with custom module + } +} +module.exports = new IgcGridEditingTemplate(); diff --git a/packages/cli/templates/webcomponents/igc-ts/grid/grid-summaries/files/src/app/__path__/DataGridSharedData.ts b/packages/cli/templates/webcomponents/igc-ts/grid/grid-summaries/files/src/app/__path__/DataGridSharedData.ts new file mode 100644 index 000000000..8c84a3600 --- /dev/null +++ b/packages/cli/templates/webcomponents/igc-ts/grid/grid-summaries/files/src/app/__path__/DataGridSharedData.ts @@ -0,0 +1,297 @@ +/* eslint-disable no-param-reassign */ +export class DataGridSharedData { + public static getEmployees(count?: number): any[] { + if (count === undefined) { + count = 250; + } + + const employees: any[] = []; + let maleCount: number = 0; + let femaleCount: number = 0; + for (let i = 0; i < count; i += 1) { + const age: number = Math.round(this.getRandomNumber(20, 40)); + const gender: string = this.getRandomGender(); + const firstName: string = this.getRandomNameFirst(gender); + const lastName: string = this.getRandomNameLast(); + const street: string = this.getRandomStreet(); + const country: string = this.getRandomItem(this.countries); + const city: string = this.getRandomCity(country); + const generation = `${Math.floor(age / 10) * 10}s`; + const email: string = `${firstName.toLowerCase()}@${this.getRandomItem(this.emails)}`; + const website: string = `${firstName.toLowerCase()}-${this.getRandomItem(this.websites)}`; + let photoPath: any; + + if (gender === 'male') { + maleCount += 1; + if (maleCount > 26) { + maleCount = 1; + } + photoPath = this.getPhotoMale(maleCount); + } else { + femaleCount += 1; + if (femaleCount > 24) { + femaleCount = 1; + } + photoPath = this.getPhotoFemale(femaleCount); + } + + const person: any = {}; + person.Address = `${street},${city}`; + person.Age = age; + person.Birthday = this.getBirthday(age); + person.City = city; + person.Country = country; + person.CountryFlag = this.getCountryFlag(country); + person.Email = email; + person.FirstName = firstName; + person.Gender = this.getGenderPhoto(gender); + person.Generation = generation; + person.ID = this.pad(i + 1, 5); + person.LastName = lastName; + person.Name = `${firstName} ${lastName}`; + person.Phone = this.getRandomPhone(); + person.Photo = photoPath; + person.Street = street; + person.Salary = this.getRandomNumber(40, 200) * 1000; + person.Sales = this.getRandomNumber(200, 980) * 1000; + person.Website = website; + person.Productivity = this.getProductivity(); + + if (person.Salary < 50000) { + person.Income = 'Low'; + } else if (person.Salary < 100000) { + person.Income = 'Average'; + } else { + person.Income = 'High'; + } + + employees.push(person); + } + return employees; + } + + public static getProductivity(weekCount?: number): any[] { + if (weekCount === undefined) { + weekCount = 52; + } + const productivity: any[] = []; + for (let w = 0; w < weekCount; w += 1) { + const value = this.getRandomNumber(-50, 50); + productivity.push({ Value: value, Week: w }); + } + return productivity; + } + + public static getSales(count?: number): any[] { + if (count === undefined) { + count = 250; + } + + const names: string[] = [ + 'Intel CPU', 'AMD CPU', + 'NVIDIA GPU', 'GIGABYTE GPU', 'Asus GPU', 'AMD GPU', 'MSI GPU', + 'Corsair Memory', 'Patriot Memory', 'Skill Memory', + 'Samsung HDD', 'WD HDD', 'Seagate HDD', 'Intel HDD', + 'Samsung SSD', 'WD SSD', 'Seagate SSD', 'Intel SSD', + 'Samsung Monitor', 'Asus Monitor', 'LG Monitor', 'HP Monitor']; + const countries: string[] = ['USA', 'UK', 'France', 'Canada', 'Poland', 'Japan', 'Germany']; + const status: string[] = ['Packing', 'Shipped', 'Delivered']; + const sales: any[] = []; + + for (let i = 0; i < count; i += 1) { + const price = this.getRandomNumber(100, 900); + const items = this.getRandomNumber(10, 80); + const value = price * items; + const margin = this.getRandomNumber(3, 10); + const profit = Math.round((price * (margin / 100)) * items); + const country = this.getRandomItem(countries); + sales.push({ + BundlePrice: price, + ProductPrice: price, + Margin: margin, + OrderDate: this.getRandomDate(new Date(2012, 0, 1), new Date()), + OrderItems: items, + OrderValue: value, // Math.round(value / 1000) + ',' + Math.round(value % 1000), + ProductID: 1001 + i, + ProductName: this.getRandomItem(names), + Profit: profit, + Countries: country, + CountryFlag: this.getCountryFlag(country), + Status: this.getRandomItem(status), + }); + } + return sales; + } + + public static getHouses(count?: number): any[] { + if (count === undefined) { + count = 250; + } + + const houses: any[] = []; + const property: string[] = ['Townhouse', 'Single', 'Condo', 'Villa']; + const emails: string[] = ['estates.com', 'remax.com', 'zillow.com', 'realtor.com', 'coldwell.com']; + const countries: string[] = ['USA', 'UK', 'France', 'Canada', 'Poland', 'Japan', 'Germany']; + + for (let i = 0; i < count; i += 1) { + const year: number = this.getRandomNumber(1950, 2015); + const age: number = 2020 - year; + + const gender: string = this.getRandomGender(); + const firstName: string = this.getRandomNameFirst(gender); + const lastName: string = this.getRandomNameLast(); + const initials = firstName.substr(0, 1).toLowerCase(); + const email: string = `${initials + lastName.toLowerCase()}@${this.getRandomItem(emails)}`; + + const street: string = this.getRandomStreet(); + const country: string = this.getRandomItem(countries); + const city: string = this.getRandomCity(country); + + houses.push({ + Address: `${street},${city}`, + Age: age, + Agent: `${firstName} ${lastName}`, + Area: this.getRandomNumber(50, 300), + Baths: this.getRandomNumber(1, 3), + Built: year, + City: city, + Country: country, + CountryFlag: this.getCountryFlag(country), + Email: email, + ID: this.pad(i + 1, 5), + Phone: this.getRandomPhone(), + Price: this.getRandomNumber(210, 900) * 1000, + Property: this.getRandomItem(property), + Rooms: this.getRandomNumber(2, 5), + SaleDate: this.getRandomDate(new Date(2015, 0, 1), new Date()), + Street: street, + }); + } + return houses; + } + + private static websites: string[] = ['.com', '.gov', '.edu', '.org']; + + private static emails: string[] = ['gmail.com', 'yahoo.com', 'twitter.com']; + + private static genders: string[] = ['male', 'female']; + + private static maleNames: string[] = ['Kyle', 'Oscar', 'Ralph', 'Mike', 'Bill', 'Frank', 'Howard', 'Jack', 'Larry', 'Pete', 'Steve', 'Vince', 'Mark', 'Alex', 'Max', 'Brian', 'Chris', 'Andrew', 'Martin', 'Mike', 'Steve', 'Glenn', 'Bruce']; + + private static femaleNames: string[] = ['Gina', 'Irene', 'Katie', 'Brenda', 'Casey', 'Fiona', 'Holly', 'Kate', 'Liz', 'Pamela', 'Nelly', 'Marisa', 'Monica', 'Anna', 'Jessica', 'Sofia', 'Isabella', 'Margo', 'Jane', 'Audrey', 'Sally', 'Melanie', 'Greta', 'Aurora', 'Sally']; + + private static lastNames: string[] = ['Adams', 'Crowley', 'Ellis', 'Martinez', 'Irvine', 'Maxwell', 'Clark', 'Owens', 'Rooney', 'Lincoln', 'Thomas', 'Spacey', 'MOrgan', 'King', 'Newton', 'Fitzgerald', 'Holmes', 'Jefferson', 'Landry', 'Berry', 'Perez', 'Spencer', 'Starr', 'Carter', 'Edwards', 'Stark', 'Johnson', 'Fitz', 'Chief', 'Blanc', 'Perry', 'Stone', 'Williams', 'Lane', 'Jobs', 'Adams', 'Power', 'Tesla']; + + private static countries: string[] = ['USA', 'UK', 'France', 'Canada', 'Poland']; + + private static citiesUS: string[] = ['New York', 'Los Angeles', 'Miami', 'San Francisco', 'San Diego', 'Las Vegas']; + + private static citiesUK: string[] = ['London', 'Liverpool', 'Manchester']; + + private static citiesFR: string[] = ['Paris', 'Marseille', 'Lyon']; + + private static citiesCA: string[] = ['Toronto', 'Vancouver', 'Montreal']; + + private static citiesPL: string[] = ['Krakow', 'Warsaw', 'Wroclaw', 'Gdansk']; + + private static citiesJP: string[] = ['Tokyo', 'Osaka', 'Kyoto', 'Yokohama']; + + private static citiesGR: string[] = ['Berlin', 'Bonn', 'Cologne', 'Munich', 'Hamburg']; + + private static roadSuffixes: string[] = ['Road', 'Street', 'Way']; + + private static roadNames: string[] = ['Main', 'Garden', 'Broad', 'Oak', 'Cedar', 'Park', 'Pine', 'Elm', 'Market', 'Hill']; + + private static getRandomNumber(min: number, max: number): number { + return Math.round(min + Math.random() * (max - min)); + } + + private static getRandomItem(array: any[]): any { + const index = Math.round(this.getRandomNumber(0, array.length - 1)); + return array[index]; + } + + private static getRandomDate(start: Date, end: Date) { + return new Date(start.getTime() + Math.random() * (end.getTime() - start.getTime())); + } + + private static getRandomPhone(): string { + const phoneCode = this.getRandomNumber(100, 900); + const phoneNum1 = this.getRandomNumber(100, 900); + const phoneNum2 = this.getRandomNumber(1000, 9000); + const phone = `${phoneCode}-${phoneNum1}-${phoneNum2}`; + return phone; + } + + private static getRandomGender(): string { + return this.getRandomItem(this.genders); + } + + private static getRandomNameLast(): string { + return this.getRandomItem(this.lastNames); + } + + private static getRandomNameFirst(gender: string): string { + if (gender === 'male') { + return this.getRandomItem(this.maleNames); + } + + return this.getRandomItem(this.femaleNames); + } + + private static getRandomCity(country: string): string { + if (country === 'Canada') { + return this.getRandomItem(this.citiesCA); + } if (country === 'France') { + return this.getRandomItem(this.citiesFR); + } if (country === 'Poland') { + return this.getRandomItem(this.citiesPL); + } if (country === 'USA') { + return this.getRandomItem(this.citiesUS); + } if (country === 'Japan') { + return this.getRandomItem(this.citiesJP); + } if (country === 'Germany') { + return this.getRandomItem(this.citiesGR); + } // if (country === 'United Kingdom') + return this.getRandomItem(this.citiesUK); + } + + private static getRandomStreet(): string { + const num = Math.round(this.getRandomNumber(100, 300)).toString(); + const road = this.getRandomItem(this.roadNames); + const suffix = this.getRandomItem(this.roadSuffixes); + return `${num} ${road} ${suffix}`; + } + + private static getBirthday(age: number): Date { + const today: Date = new Date(); + const year: number = today.getFullYear() - age; + const month: number = this.getRandomNumber(0, 8); + const day: number = this.getRandomNumber(10, 27); + return new Date(year, month, day); + } + + private static getPhotoMale(id: number): string { + return `https://static.infragistics.com/xplatform/images/people//GUY${this.pad(id, 2)}.png`; + } + + private static getPhotoFemale(id: number): string { + return `https://static.infragistics.com/xplatform/images/people/GIRL${this.pad(id, 2)}.png`; + } + + private static getGenderPhoto(gender: string): string { + return `https://static.infragistics.com/xplatform/images/genders/${gender}.png`; + } + + private static getCountryFlag(country: string): string { + return `https://static.infragistics.com/xplatform/images/flags/${country}.png`; + } + + private static pad(num: number, size: number) { + let s = `${num}`; + while (s.length < size) { + s = `0${s}`; + } + return s; + } +} diff --git a/packages/cli/templates/webcomponents/igc-ts/grid/grid-summaries/files/src/app/__path__/__filePrefix__.ts b/packages/cli/templates/webcomponents/igc-ts/grid/grid-summaries/files/src/app/__path__/__filePrefix__.ts new file mode 100644 index 000000000..ce1ee4bd4 --- /dev/null +++ b/packages/cli/templates/webcomponents/igc-ts/grid/grid-summaries/files/src/app/__path__/__filePrefix__.ts @@ -0,0 +1,188 @@ +/* eslint-disable import/extensions, max-classes-per-file, class-methods-use-this */ +import { + IgcDataGridModule, + IgcGridColumnOptionsModule, + IgcDataGridComponent, + IgcColumnGroupDescription, + IgcColumnSummaryDescription, +} from 'igniteui-webcomponents-grids'; +import { + ModuleManager, IgcProvideCalculatorEventArgs, SummaryOperand, SummaryCalculator, + DefaultSummaryResult, IDataSource, ISummaryResult, +} from 'igniteui-webcomponents-core'; +import { DataGridSharedData } from './DataGridSharedData'; + +ModuleManager.register( + IgcDataGridModule, + IgcGridColumnOptionsModule, +); + +export default class $(ClassName) extends HTMLElement { + data: any[] = DataGridSharedData.getEmployees(); + + constructor() { + super(); + this.attachShadow({ mode: 'open' }); + this.shadowRoot!.innerHTML = ` + +
+ + + + + + + + + + +
+ `; + } + + connectedCallback() { + const grid = document.getElementsByTagName('app-grid-summaries')[0].shadowRoot!.getElementById('grid') as IgcDataGridComponent; + + // Custom Calculator - calculates the count for all USA. + class CustomDomestic extends SummaryCalculator { + get displayName(): string { + return 'USA'; + } + + public usCountries: number = 0; + + public beginCalculation(a: IDataSource, b: string): void { + super.beginCalculation(a, b); + this.usCountries = 0; + } + + public endCalculation(): ISummaryResult { + return new DefaultSummaryResult(this.propertyName, SummaryOperand.Custom, this.usCountries); + } + + public aggregate(a: any): void { + if (a.Countries === 'USA') { + this.usCountries += 1; + } + } + } + + const onProvideCalculator = (s: IgcColumnSummaryDescription, + e: IgcProvideCalculatorEventArgs) => { + e.calculator = new CustomDomestic(); + }; + + const onLoad = () => { + const productGroup = new IgcColumnGroupDescription(); + productGroup.field = 'ProductName'; + productGroup.displayName = 'ProductName'; + grid.groupDescriptions.add(productGroup); + + const productCount = new IgcColumnSummaryDescription(); + productCount.field = 'ProductName'; + productCount.operand = SummaryOperand.Count; + grid.summaryDescriptions.add(productCount); + + const priceMin = new IgcColumnSummaryDescription(); + priceMin.field = 'BundlePrice'; + priceMin.operand = SummaryOperand.Min; + priceMin.formatOverride = new Intl.NumberFormat('en-EN', { + style: 'currency', currency: 'USD', minimumFractionDigits: 0, maximumFractionDigits: 0, + }); + grid.summaryDescriptions.add(priceMin); + + const priceMax = new IgcColumnSummaryDescription(); + priceMax.field = 'BundlePrice'; + priceMax.operand = SummaryOperand.Max; + priceMax.formatOverride = new Intl.NumberFormat('en-EN', { + style: 'currency', currency: 'USD', minimumFractionDigits: 0, maximumFractionDigits: 0, + }); + grid.summaryDescriptions.add(priceMax); + + const orderSum = new IgcColumnSummaryDescription(); + orderSum.field = 'OrderItems'; + orderSum.operand = SummaryOperand.Sum; + grid.summaryDescriptions.add(orderSum); + + const orderValueSum = new IgcColumnSummaryDescription(); + orderValueSum.field = 'OrderValue'; + orderValueSum.operand = SummaryOperand.Sum; + orderValueSum.formatOverride = new Intl.NumberFormat('en-EN', { + style: 'currency', currency: 'USD', minimumFractionDigits: 0, maximumFractionDigits: 0, + }); + grid.summaryDescriptions.add(orderValueSum); + + const orderValueAvg = new IgcColumnSummaryDescription(); + orderValueAvg.field = 'OrderValue'; + orderValueAvg.operand = SummaryOperand.Average; + orderValueAvg.formatOverride = new Intl.NumberFormat('en-EN', { + style: 'currency', currency: 'USD', minimumFractionDigits: 0, maximumFractionDigits: 0, + }); + grid.summaryDescriptions.add(orderValueAvg); + + const orderDateMin = new IgcColumnSummaryDescription(); + orderDateMin.field = 'OrderDate'; + orderDateMin.operand = SummaryOperand.Min; + orderDateMin.calculatorDisplayName = 'First'; + orderDateMin.formatOverride = new Intl.DateTimeFormat('en-EN'); + grid.summaryDescriptions.add(orderDateMin); + + const orderDateMax = new IgcColumnSummaryDescription(); + orderDateMax.field = 'OrderDate'; + orderDateMax.operand = SummaryOperand.Max; + orderDateMax.calculatorDisplayName = 'Last'; + orderDateMax.formatOverride = new Intl.DateTimeFormat('en-EN'); + grid.summaryDescriptions.add(orderDateMax); + + const sum1 = new IgcColumnSummaryDescription(); + sum1.field = 'Profit'; + sum1.operand = SummaryOperand.Sum; + sum1.formatOverride = new Intl.NumberFormat('en-EN', { + style: 'currency', currency: 'USD', minimumFractionDigits: 0, maximumFractionDigits: 0, + }); + grid.summaryDescriptions.add(sum1); + + const avg2 = new IgcColumnSummaryDescription(); + avg2.field = 'Profit'; + avg2.operand = SummaryOperand.Average; + avg2.formatOverride = new Intl.NumberFormat('en-EN', { + style: 'currency', currency: 'USD', minimumFractionDigits: 0, maximumFractionDigits: 0, + }); + grid.summaryDescriptions.add(avg2); + + const countries = new IgcColumnSummaryDescription(); + countries.field = 'Countries'; + countries.operand = SummaryOperand.Custom; + countries.provideCalculator = onProvideCalculator; + grid.summaryDescriptions.add(countries); + }; + + grid.dataSource = DataGridSharedData.getSales(); + + onLoad(); + } +} + +customElements.define('app-$(path)', $(ClassName)); diff --git a/packages/cli/templates/webcomponents/igc-ts/grid/grid-summaries/index.ts b/packages/cli/templates/webcomponents/igc-ts/grid/grid-summaries/index.ts new file mode 100644 index 000000000..678b5c452 --- /dev/null +++ b/packages/cli/templates/webcomponents/igc-ts/grid/grid-summaries/index.ts @@ -0,0 +1,19 @@ +import { TypeScriptFileUpdate } from "@igniteui/cli-core"; +import { IgniteUIForWebComponentsTemplate } from "../../../../../lib/templates/IgniteUIForWebComponentsTemplate"; + +class IgcGridSummariesTemplate extends IgniteUIForWebComponentsTemplate { + constructor() { + super(__dirname); + this.components = ["Grid"]; + this.controlGroup = "Grids & Lists"; + this.listInComponentTemplates = true; + this.id = "grid-summaries"; + this.projectType = "igc-ts"; + this.name = "Grid Summaries"; + this.description = "IgcGrid with column summaries"; + } + protected addClassDeclaration(mainModule: TypeScriptFileUpdate, projPath: string, name: string, modulePath: string) { + // not applicable with custom module + } +} +module.exports = new IgcGridSummariesTemplate(); diff --git a/packages/cli/templates/webcomponents/igc-ts/grid/index.ts b/packages/cli/templates/webcomponents/igc-ts/grid/index.ts index eb34851cd..0a32bacb0 100644 --- a/packages/cli/templates/webcomponents/igc-ts/grid/index.ts +++ b/packages/cli/templates/webcomponents/igc-ts/grid/index.ts @@ -4,7 +4,7 @@ class IgcGridComponent extends BaseComponent { constructor() { super(__dirname); this.name = "Grid"; - this.group = "Hidden"; + this.group = "Grids & Lists"; this.description = "pick from different grid views"; //this.groupPriority = 10; } diff --git a/packages/cli/templates/webcomponents/igc-ts/groups.json b/packages/cli/templates/webcomponents/igc-ts/groups.json index 2459488c7..7279894b0 100644 --- a/packages/cli/templates/webcomponents/igc-ts/groups.json +++ b/packages/cli/templates/webcomponents/igc-ts/groups.json @@ -2,9 +2,10 @@ "Data Entry & Display": "", "Interactions": "", "Menus": "", - "Lists": "", + "Grids & Lists": "", "Scheduling": "", "Layouts": "", - "Charts": "" + "Charts": "", + "Gauges": "" } diff --git a/packages/cli/templates/webcomponents/igc-ts/linear-gauge/default/files/src/app/__path__/__filePrefix__.ts b/packages/cli/templates/webcomponents/igc-ts/linear-gauge/default/files/src/app/__path__/__filePrefix__.ts new file mode 100644 index 000000000..84b9798e3 --- /dev/null +++ b/packages/cli/templates/webcomponents/igc-ts/linear-gauge/default/files/src/app/__path__/__filePrefix__.ts @@ -0,0 +1,43 @@ +import { + IgcLinearGaugeModule, +} from 'igniteui-webcomponents-gauges'; +import { ModuleManager } from 'igniteui-webcomponents-core'; + +ModuleManager.register( + IgcLinearGaugeModule, +); + +export default class $(ClassName) extends HTMLElement { + constructor() { + super(); + this.attachShadow({ mode: 'open' }); + this.shadowRoot!.innerHTML = ` + + + + + + + + + + `; + } +} + +customElements.define('app-$(path)', $(ClassName)); diff --git a/packages/cli/templates/webcomponents/igc-ts/linear-gauge/default/index.ts b/packages/cli/templates/webcomponents/igc-ts/linear-gauge/default/index.ts new file mode 100644 index 000000000..8334d8826 --- /dev/null +++ b/packages/cli/templates/webcomponents/igc-ts/linear-gauge/default/index.ts @@ -0,0 +1,19 @@ +import { TypeScriptFileUpdate } from "@igniteui/cli-core"; +import { IgniteUIForWebComponentsTemplate } from "../../../../../lib/templates/IgniteUIForWebComponentsTemplate"; + +class IgcLinearGaugeTemplate extends IgniteUIForWebComponentsTemplate { + constructor() { + super(__dirname); + this.components = ["LinearGauge"]; + this.controlGroup = "Gauges"; + this.listInComponentTemplates = true; + this.id = "linear-gauge"; + this.projectType = "igc-ts"; + this.name = "Linear Gauge"; + this.description = "IgcLinearGauge"; + } + protected addClassDeclaration(mainModule: TypeScriptFileUpdate, projPath: string, name: string, modulePath: string) { + // not applicable with custom module + } +} +module.exports = new IgcLinearGaugeTemplate(); diff --git a/packages/cli/templates/webcomponents/igc-ts/linear-gauge/index.ts b/packages/cli/templates/webcomponents/igc-ts/linear-gauge/index.ts new file mode 100644 index 000000000..172ddbaed --- /dev/null +++ b/packages/cli/templates/webcomponents/igc-ts/linear-gauge/index.ts @@ -0,0 +1,11 @@ +import { BaseComponent } from "@igniteui/cli-core"; + +class IgcLinearGaugeComponent extends BaseComponent { + constructor() { + super(__dirname); + this.name = "Linear Gauge"; + this.group = "Gauges"; + this.description = "pick from different gauge views"; + } +} +module.exports = new IgcLinearGaugeComponent(); diff --git a/packages/cli/templates/webcomponents/igc-ts/list/default/index.ts b/packages/cli/templates/webcomponents/igc-ts/list/default/index.ts index 1d9275695..21f052ecb 100644 --- a/packages/cli/templates/webcomponents/igc-ts/list/default/index.ts +++ b/packages/cli/templates/webcomponents/igc-ts/list/default/index.ts @@ -5,7 +5,7 @@ class IgcListTemplate extends IgniteUIForWebComponentsTemplate { constructor() { super(__dirname); this.components = ["List"]; - this.controlGroup = "Lists"; + this.controlGroup = "Grids & Lists"; this.listInComponentTemplates = true; this.id = "list"; this.projectType = "igc-ts"; diff --git a/packages/cli/templates/webcomponents/igc-ts/list/index.ts b/packages/cli/templates/webcomponents/igc-ts/list/index.ts index 33cd556fe..1db823862 100644 --- a/packages/cli/templates/webcomponents/igc-ts/list/index.ts +++ b/packages/cli/templates/webcomponents/igc-ts/list/index.ts @@ -7,7 +7,7 @@ class IgcListComponent extends BaseComponent { constructor() { super(__dirname); this.name = "List"; - this.group = "Lists"; + this.group = "Grids & Lists"; this.description = `Customizable list component`; } } diff --git a/packages/cli/templates/webcomponents/igc-ts/pie-chart/default/files/src/app/__path__/__filePrefix__.ts b/packages/cli/templates/webcomponents/igc-ts/pie-chart/default/files/src/app/__path__/__filePrefix__.ts index 947f209dc..fce2ab47e 100644 --- a/packages/cli/templates/webcomponents/igc-ts/pie-chart/default/files/src/app/__path__/__filePrefix__.ts +++ b/packages/cli/templates/webcomponents/igc-ts/pie-chart/default/files/src/app/__path__/__filePrefix__.ts @@ -1,4 +1,4 @@ -import { DataItem, Data } from './sampleData'; +import { Data } from './sampleData'; import { IgcItemLegendComponent, IgcItemLegendModule, diff --git a/packages/cli/templates/webcomponents/igc-ts/projects/empty/files/index.html b/packages/cli/templates/webcomponents/igc-ts/projects/empty/files/index.html index af4c8a62c..02cfe3f0d 100644 --- a/packages/cli/templates/webcomponents/igc-ts/projects/empty/files/index.html +++ b/packages/cli/templates/webcomponents/igc-ts/projects/empty/files/index.html @@ -15,7 +15,6 @@ :host { display: block; padding: 25px; - color: var(--test-component-test-text-color, #000); } #outlet { diff --git a/packages/cli/templates/webcomponents/igc-ts/projects/empty/files/package.json b/packages/cli/templates/webcomponents/igc-ts/projects/empty/files/package.json index 91cf269b9..02748d6b6 100644 --- a/packages/cli/templates/webcomponents/igc-ts/projects/empty/files/package.json +++ b/packages/cli/templates/webcomponents/igc-ts/projects/empty/files/package.json @@ -7,13 +7,14 @@ "author": "Infragistics", "main": "dist/src/index.js", "module": "dist/src/index.js", + "type": "module", "exports": { ".": "./dist/src/index.js", "./$(dash-name).js": "./dist/src/$(dash-name).js" }, "scripts": { "start": "tsc && wds", - "build": "tsc", + "build": "webpack --mode production", "lint": "eslint --ext .js,.ts,.html . --ignore-path .gitignore", "test": "tsc && wtr" }, @@ -21,14 +22,16 @@ "@open-wc/testing": "^2.5.33", "@vaadin/router": "^1.7.4", "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-webcomponents-grids": "~1.4.1", + "igniteui-webcomponents-core": "~1.4.1", + "igniteui-webcomponents-layouts": "~1.4.1", + "igniteui-webcomponents-inputs": "~1.4.1", + "igniteui-webcomponents-charts": "~1.4.1", + "igniteui-webcomponents-gauges": "~1.4.1", "igniteui-dockmanager": "~1.6.0", "@igniteui/material-icons-extended": "^2.10.0", - "lit": "^2.0.2" + "lit": "^2.0.2", + "babel-runtime": "^6.26.0" }, "devDependencies": { "@open-wc/eslint-config": "^4.3.0", @@ -39,7 +42,21 @@ "igniteui-cli": "$(cliVersion)", "eslint": "^7.32.0", "tslib": "^2.3.1", - "typescript": "~4.4.4" + "typescript": "^4.5.2", + "@babel/cli": "^7.16.0", + "@babel/core": "^7.16.0", + "@babel/plugin-proposal-class-properties": "^7.16.0", + "@babel/plugin-transform-runtime": "^7.16.4", + "@babel/preset-env": "^7.16.4", + "@babel/preset-typescript": "^7.16.0", + "@types/source-map": "^0.5.7", + "babel-loader": "^8.2.3", + "babel-plugin-transform-custom-element-classes": "^0.1.0", + "fork-ts-checker-webpack-plugin": "^6.4.2", + "html-webpack-plugin": "^5.5.0", + "source-map": "^0.7.3", + "webpack": "^5.64.2", + "webpack-cli": "^4.9.1" }, "eslintConfig": { "parser": "@typescript-eslint/parser", diff --git a/packages/cli/templates/webcomponents/igc-ts/projects/empty/files/src/app.ts b/packages/cli/templates/webcomponents/igc-ts/projects/empty/files/src/app.ts index f5f1b2220..6225ce1f8 100644 --- a/packages/cli/templates/webcomponents/igc-ts/projects/empty/files/src/app.ts +++ b/packages/cli/templates/webcomponents/igc-ts/projects/empty/files/src/app.ts @@ -1,3 +1,4 @@ +/* eslint-disable no-return-assign */ import { defineComponents, IgcNavDrawerComponent, @@ -9,7 +10,12 @@ import { routes } from './index.js'; import './app/home/home.component'; import './app/not-found/not-found.component'; -defineComponents(IgcNavDrawerComponent, IgcNavDrawerItemComponent, IgcNavDrawerHeaderItemComponent, IgcRippleComponent); +defineComponents( + IgcNavDrawerComponent, + IgcNavDrawerItemComponent, + IgcNavDrawerHeaderItemComponent, + IgcRippleComponent, +); export class App extends HTMLElement { connectedCallback() { diff --git a/packages/cli/templates/webcomponents/igc-ts/projects/empty/files/src/app/home/home.component.test.ts b/packages/cli/templates/webcomponents/igc-ts/projects/empty/files/src/app/home/home.component.test.ts index 5d466a7a0..b1b7306e8 100644 --- a/packages/cli/templates/webcomponents/igc-ts/projects/empty/files/src/app/home/home.component.test.ts +++ b/packages/cli/templates/webcomponents/igc-ts/projects/empty/files/src/app/home/home.component.test.ts @@ -3,7 +3,7 @@ import { HomeComponent } from './home.component.js'; describe('HomeComponent', () => { it(' is an instance of MyElement', async () => { - const element = document.createElement('lit-home'); + const element = document.createElement('app-home'); expect(element).to.be.instanceOf(HomeComponent); }); }); diff --git a/packages/cli/templates/webcomponents/igc-ts/projects/empty/files/src/index.ts b/packages/cli/templates/webcomponents/igc-ts/projects/empty/files/src/index.ts index 13f0145d3..ee5ce9c3b 100644 --- a/packages/cli/templates/webcomponents/igc-ts/projects/empty/files/src/index.ts +++ b/packages/cli/templates/webcomponents/igc-ts/projects/empty/files/src/index.ts @@ -1,4 +1,8 @@ -import { Commands, Context, Route, Router } from '@vaadin/router'; +/* eslint-disable import/extensions, quotes, no-tabs, indent, comma-dangle */ +import { + Route, + Router +} from '@vaadin/router'; import './app/home/home.component'; export const routes: Route[] = [ diff --git a/packages/cli/templates/webcomponents/igc-ts/projects/empty/files/tsconfig.json b/packages/cli/templates/webcomponents/igc-ts/projects/empty/files/tsconfig.json index e331baf09..653226552 100644 --- a/packages/cli/templates/webcomponents/igc-ts/projects/empty/files/tsconfig.json +++ b/packages/cli/templates/webcomponents/igc-ts/projects/empty/files/tsconfig.json @@ -6,7 +6,8 @@ "noEmitOnError": true, "lib": [ "es2017", - "dom" + "dom", + "dom.iterable" ], "strict": true, "skipLibCheck": true, diff --git a/packages/cli/templates/webcomponents/igc-ts/projects/empty/files/webpack.config.mjs b/packages/cli/templates/webcomponents/igc-ts/projects/empty/files/webpack.config.mjs new file mode 100644 index 000000000..f38e12426 --- /dev/null +++ b/packages/cli/templates/webcomponents/igc-ts/projects/empty/files/webpack.config.mjs @@ -0,0 +1,67 @@ +import ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin'; +import HtmlWebpackPlugin from 'html-webpack-plugin'; +import path from 'path'; + +const __dirname = path.resolve(); + +export default ({ + + entry: path.resolve(__dirname, 'src'), + devtool: false, + output: { + filename: '[chunkhash].bundle.js', + }, + + resolve: { + mainFields: ['fesm2015', 'module', 'main'], + extensions: ['.ts', '.js', '.json'], + }, + module: { + rules: [{ + test: /\.m?js/, + type: "javascript/auto", + }, + { + test: /\.m?js/, + resolve: { + fullySpecified: false, + }, + }, + { + test: /\.(ts|js)$/, + exclude: /node_modules/, + loader: 'babel-loader', + options: { + "compact": true, + "presets": [ + ["@babel/preset-env", { + "useBuiltIns": "usage", + "corejs": 3, + "targets": { + "browsers": [ + "last 2 Chrome versions", + "last 2 Safari versions", + "last 2 iOS versions", + "last 2 Firefox versions", + "last 2 Edge versions" + ] + } + }], + "@babel/preset-typescript" + ], + "plugins": [ + "@babel/plugin-proposal-class-properties", + "@babel/plugin-transform-runtime" + ] + }, + }], + }, + + plugins: [ + new HtmlWebpackPlugin({ + title: '@@AppName', + template: './index.html', + }), + new ForkTsCheckerWebpackPlugin(), + ], +}); diff --git a/packages/cli/templates/webcomponents/igc-ts/radial-gauge/default/files/src/app/__path__/__filePrefix__.ts b/packages/cli/templates/webcomponents/igc-ts/radial-gauge/default/files/src/app/__path__/__filePrefix__.ts new file mode 100644 index 000000000..f2804ba73 --- /dev/null +++ b/packages/cli/templates/webcomponents/igc-ts/radial-gauge/default/files/src/app/__path__/__filePrefix__.ts @@ -0,0 +1,43 @@ +import { + IgcRadialGaugeModule, +} from 'igniteui-webcomponents-gauges'; +import { ModuleManager } from 'igniteui-webcomponents-core'; + +ModuleManager.register( + IgcRadialGaugeModule, +); + +export default class $(ClassName) extends HTMLElement { + constructor() { + super(); + this.attachShadow({ mode: 'open' }); + this.shadowRoot!.innerHTML = ` + + + + + + + + `; + } +} + +customElements.define('app-$(path)', $(ClassName)); diff --git a/packages/cli/templates/webcomponents/igc-ts/radial-gauge/default/index.ts b/packages/cli/templates/webcomponents/igc-ts/radial-gauge/default/index.ts new file mode 100644 index 000000000..98dc8f2ac --- /dev/null +++ b/packages/cli/templates/webcomponents/igc-ts/radial-gauge/default/index.ts @@ -0,0 +1,19 @@ +import { TypeScriptFileUpdate } from "@igniteui/cli-core"; +import { IgniteUIForWebComponentsTemplate } from "../../../../../lib/templates/IgniteUIForWebComponentsTemplate"; + +class IgcradialGaugeTemplate extends IgniteUIForWebComponentsTemplate { + constructor() { + super(__dirname); + this.components = ["RadialGauge"]; + this.controlGroup = "Gauges"; + this.listInComponentTemplates = true; + this.id = "radial-gauge"; + this.projectType = "igc-ts"; + this.name = "Radial Gauge"; + this.description = "IgcRadialGauge"; + } + protected addClassDeclaration(mainModule: TypeScriptFileUpdate, projPath: string, name: string, modulePath: string) { + // not applicable with custom module + } +} +module.exports = new IgcradialGaugeTemplate(); diff --git a/packages/cli/templates/webcomponents/igc-ts/radial-gauge/index.ts b/packages/cli/templates/webcomponents/igc-ts/radial-gauge/index.ts new file mode 100644 index 000000000..bbcbbe9a9 --- /dev/null +++ b/packages/cli/templates/webcomponents/igc-ts/radial-gauge/index.ts @@ -0,0 +1,11 @@ +import { BaseComponent } from "@igniteui/cli-core"; + +class IgcRadialGaugeComponent extends BaseComponent { + constructor() { + super(__dirname); + this.name = "Radial Gauge"; + this.group = "Gauges"; + this.description = "pick from different gauge views"; + } +} +module.exports = new IgcRadialGaugeComponent(); diff --git a/packages/core/package.json b/packages/core/package.json index dbc65f11d..bdcc51d3c 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -1,6 +1,6 @@ { "name": "@igniteui/cli-core", - "version": "9.0.1", + "version": "9.0.4", "description": "Base types and functionality for Ignite UI CLI", "repository": { "type": "git", @@ -16,7 +16,7 @@ "glob": "^7.1.2", "inquirer": "^6.2.2", "through2": "^2.0.3", - "typescript": "~4.4.4" + "typescript": "~4.5.2" }, "devDependencies": { "@angular-devkit/schematics": "~13.0.0" diff --git a/packages/core/typescript/TypeScriptFileUpdate.ts b/packages/core/typescript/TypeScriptFileUpdate.ts index 2b24aef4b..8df158b1c 100644 --- a/packages/core/typescript/TypeScriptFileUpdate.ts +++ b/packages/core/typescript/TypeScriptFileUpdate.ts @@ -221,11 +221,11 @@ export class TypeScriptFileUpdate { .concat(newObject); } - const elements = ts.createNodeArray([ + const elements = ts.factory.createNodeArray([ ...resultNodes ]); - return ts.updateArrayLiteral(array, elements); + return ts.factory.updateArrayLiteralExpression(array, elements); } else { return ts.visitEachChild(node, conditionalVisitor, context); } @@ -267,9 +267,9 @@ export class TypeScriptFileUpdate { if (childrenProperty) { childrenArray = childrenProperty.getChildren() .filter(element => element.kind === ts.SyntaxKind.ArrayLiteralExpression)[0] as ts.ArrayLiteralExpression - || ts.createArrayLiteral(); + || ts.factory.createArrayLiteralExpression(); } else { - childrenArray = ts.createArrayLiteral(); + childrenArray = ts.factory.createArrayLiteralExpression(); } let existingProperties = syntaxList.getChildren() @@ -277,8 +277,8 @@ export class TypeScriptFileUpdate { const newArrayValues = childrenArray.elements.concat(newObject); if (!childrenProperty) { const propertyName = "children"; - const propertyValue = ts.createArrayLiteral([...newArrayValues]); - childrenProperty = ts.createPropertyAssignment(propertyName, propertyValue); + const propertyValue = ts.factory.createArrayLiteralExpression([...newArrayValues]); + childrenProperty = ts.factory.createPropertyAssignment(propertyName, propertyValue); existingProperties = existingProperties .concat(childrenProperty); } else { @@ -288,7 +288,7 @@ export class TypeScriptFileUpdate { ts.updatePropertyAssignment( childrenProperty, childrenPropertyName, - ts.createArrayLiteral([...newArrayValues]) + ts.factory.createArrayLiteralExpression([...newArrayValues]) ); existingProperties .splice(index, 1, childrenProperty); @@ -347,14 +347,14 @@ export class TypeScriptFileUpdate { return; } - const newStatements = ts.createNodeArray([ + const newStatements = ts.factory.createNodeArray([ ...this.targetSource.statements.slice(0, this.importsMeta.lastIndex), ...newImports.map(x => TsUtils.createIdentifierImport(x.imports, x.from)), ...this.targetSource.statements.slice(this.importsMeta.lastIndex) ]); newImports.forEach(x => this.createdStringLiterals.push(x.from)); - this.targetSource = ts.updateSourceFileNode(this.targetSource, newStatements); + this.targetSource = ts.factory.updateSourceFile(this.targetSource, newStatements); } //#region ts.TransformerFactory @@ -387,9 +387,9 @@ export class TypeScriptFileUpdate { const editImport = editImports.find(x => x.from === moduleSpecifier); const newImports = editImport.imports.filter(x => alreadyImported.indexOf(x) === -1); - node = ts.updateNamedImports(namedImports, [ + node = ts.factory.updateNamedImports(namedImports, [ ...existing, - ...newImports.map(x => ts.createImportSpecifier(undefined, ts.createIdentifier(x))) + ...newImports.map(x => ts.factory.createImportSpecifier(false, undefined, ts.factory.createIdentifier(x))) ]); } else { node = ts.visitEachChild(node, visitImport, context); @@ -434,19 +434,19 @@ export class TypeScriptFileUpdate { switch (prop) { case "imports": const importDeps = this.ngMetaEdits.imports; - arrayExpr = ts.createArrayLiteral( + arrayExpr = ts.factory.createArrayLiteralExpression( importDeps.map(x => TsUtils.createIdentifier(x.name, x.root ? "forRoot" : "")) ); break; case "declarations": case "providers": case "exports": - arrayExpr = ts.createArrayLiteral( - this.ngMetaEdits[prop].map(x => ts.createIdentifier(x)) + arrayExpr = ts.factory.createArrayLiteralExpression( + this.ngMetaEdits[prop].map(x => ts.factory.createIdentifier(x)) ); break; } - newProps.push(ts.createPropertyAssignment(prop, arrayExpr)); + newProps.push(ts.factory.createPropertyAssignment(prop, arrayExpr)); } return ts.updateObjectLiteral(obj, [ @@ -473,15 +473,15 @@ export class TypeScriptFileUpdate { case "exports": identifiers = this.ngMetaEdits[prop] .filter(x => alreadyImported.indexOf(x) === -1) - .map(x => ts.createIdentifier(x)); + .map(x => ts.factory.createIdentifier(x)); break; } - const elements = ts.createNodeArray([ + const elements = ts.factory.createNodeArray([ ...props, ...identifiers ]); - return ts.updateArrayLiteral(initializer, elements); + return ts.factory.updateArrayLiteralExpression(initializer, elements); } else { node = ts.visitEachChild(node, visitNgModule, context); } @@ -650,11 +650,12 @@ export class TypeScriptFileUpdate { } private createRouteEntry(linkPath: string, className: string, linkText: string): ts.ObjectLiteralExpression { - const routePath = ts.createPropertyAssignment("path", ts.createLiteral(linkPath)); - const routeComponent = ts.createPropertyAssignment("component", ts.createIdentifier(className)); - const routeDataInner = ts.createPropertyAssignment("text", ts.createLiteral(linkText)); - const routeData = ts.createPropertyAssignment("data", ts.createObjectLiteral([routeDataInner])); - return ts.createObjectLiteral([routePath, routeComponent, routeData]); + const routePath = ts.factory.createPropertyAssignment("path", ts.factory.createStringLiteral(linkPath)); + const routeComponent = ts.factory.createPropertyAssignment("component", ts.factory.createIdentifier(className)); + const routeDataInner = ts.factory.createPropertyAssignment("text", ts.factory.createStringLiteral(linkText)); + const routeData = ts.factory.createPropertyAssignment( + "data", ts.factory.createObjectLiteralExpression([routeDataInner])); + return ts.factory.createObjectLiteralExpression([routePath, routeComponent, routeData]); } } diff --git a/packages/core/typescript/TypeScriptUtils.ts b/packages/core/typescript/TypeScriptUtils.ts index 05fe792c3..11ef719c5 100644 --- a/packages/core/typescript/TypeScriptUtils.ts +++ b/packages/core/typescript/TypeScriptUtils.ts @@ -17,15 +17,15 @@ export class TypeScriptUtils { */ public static createIdentifierImport(identifierNames: string[], importPath: string): ts.ImportDeclaration { // started from createImportDeclaration, now we here... - const namedImport = ts.createNamedImports( - identifierNames.map(x => ts.createImportSpecifier(undefined, ts.createIdentifier(x))) + const namedImport = ts.factory.createNamedImports( + identifierNames.map(x => ts.factory.createImportSpecifier(false, undefined, ts.factory.createIdentifier(x))) ); - const importClause = ts.createImportClause(undefined, namedImport); - const importDeclaration = ts.createImportDeclaration( + const importClause = ts.factory.createImportClause(false, undefined, namedImport); + const importDeclaration = ts.factory.createImportDeclaration( undefined, undefined, importClause, - ts.createLiteral(importPath)); + ts.factory.createStringLiteral(importPath)); return importDeclaration; } @@ -36,16 +36,16 @@ export class TypeScriptUtils { */ public static createIdentifier(x: string, call?: string) { if (call) { - return ts.createCall( - ts.createPropertyAccess( - ts.createIdentifier(x), + return ts.factory.createCallExpression( + ts.factory.createPropertyAccessExpression( + ts.factory.createIdentifier(x), call ), /*typeArgs*/undefined, /*argsArgs*/[] ); } else { - return ts.createIdentifier(x); + return ts.factory.createIdentifier(x); } } diff --git a/packages/igx-templates/Update.spec.ts b/packages/igx-templates/Update.spec.ts index 858ce57d4..8b2396f27 100644 --- a/packages/igx-templates/Update.spec.ts +++ b/packages/igx-templates/Update.spec.ts @@ -118,17 +118,13 @@ export class HomeComponent { }`}, { path: "src/home.component.scss", content: -`@import '~igniteui-angular/theming'; -@import '~igniteui-dockmanager/styles/themes/test'; -@use 'igniteui-angular/theming'; -@forward 'igniteui-angular/theming'; +`@use 'igniteui-angular/theming' as *; +@use 'igniteui-dockmanager/styles/themes/test' as *; @include igx-core(); `, expected: -`@import '~@infragistics/igniteui-angular/theming'; -@import '~@infragistics/igniteui-dockmanager/styles/themes/test'; -@use '@infragistics/igniteui-angular/theming'; -@forward '@infragistics/igniteui-angular/theming'; +`@use '@infragistics/igniteui-angular/theming' as *; +@use '@infragistics/igniteui-dockmanager/styles/themes/test' as *; @include igx-core(); `}, { path: "angular.json", diff --git a/packages/igx-templates/igx-ts/bullet-graph/default/index.ts b/packages/igx-templates/igx-ts/bullet-graph/default/index.ts index 61aa59d12..de853bb17 100644 --- a/packages/igx-templates/igx-ts/bullet-graph/default/index.ts +++ b/packages/igx-templates/igx-ts/bullet-graph/default/index.ts @@ -14,7 +14,7 @@ class IgxBulletGraphTemplate extends IgniteUIForAngularTemplate { import: ["IgxBulletGraphModule"], from: "igniteui-angular-gauges" }]; - this.packages = ["igniteui-angular-core@~13.0.0", "igniteui-angular-gauges@~13.0.0"]; + this.packages = ["igniteui-angular-core@~13.1.0", "igniteui-angular-gauges@~13.1.0"]; } } module.exports = new IgxBulletGraphTemplate(); diff --git a/packages/igx-templates/igx-ts/category-chart/default/index.ts b/packages/igx-templates/igx-ts/category-chart/default/index.ts index 04fc8e462..0a25c650d 100644 --- a/packages/igx-templates/igx-ts/category-chart/default/index.ts +++ b/packages/igx-templates/igx-ts/category-chart/default/index.ts @@ -14,7 +14,7 @@ class IgxCategoryChartTemplate extends IgniteUIForAngularTemplate { { import: "IgxCategoryChartModule", from: "igniteui-angular-charts" }, { import: "FormsModule", from: "@angular/forms" } ]; - this.packages = ["igniteui-angular-core@~13.0.0", "igniteui-angular-charts@~13.0.0"]; + this.packages = ["igniteui-angular-core@~13.1.0", "igniteui-angular-charts@~13.1.0"]; } } module.exports = new IgxCategoryChartTemplate(); diff --git a/packages/igx-templates/igx-ts/custom-templates/awesome-grid/files/src/app/__path__/__filePrefix__.component.scss b/packages/igx-templates/igx-ts/custom-templates/awesome-grid/files/src/app/__path__/__filePrefix__.component.scss index 28762d1ab..50249312b 100644 --- a/packages/igx-templates/igx-ts/custom-templates/awesome-grid/files/src/app/__path__/__filePrefix__.component.scss +++ b/packages/igx-templates/igx-ts/custom-templates/awesome-grid/files/src/app/__path__/__filePrefix__.component.scss @@ -1,5 +1,4 @@ -@import '~<%=igxPackage%>/theming'; - +@use '<%=igxPackage%>/theming' as *; $grid-sample-theme: igx-grid-theme( $row-selected-background: #333, $row-selected-text-color: #ddd, diff --git a/packages/igx-templates/igx-ts/custom-templates/awesome-grid/index.ts b/packages/igx-templates/igx-ts/custom-templates/awesome-grid/index.ts index 81c10b2ae..f2313db47 100644 --- a/packages/igx-templates/igx-ts/custom-templates/awesome-grid/index.ts +++ b/packages/igx-templates/igx-ts/custom-templates/awesome-grid/index.ts @@ -32,7 +32,7 @@ class IgxGridAwesomeTemplate extends IgniteUIForAngularTemplate { }, { import: "FormsModule", from: "@angular/forms" } ]; - this.packages = ["igniteui-angular-core@~13.0.0", "igniteui-angular-charts@~13.0.0"]; + this.packages = ["igniteui-angular-core@~13.1.0", "igniteui-angular-charts@~13.1.0"]; } } module.exports = new IgxGridAwesomeTemplate(); diff --git a/packages/igx-templates/igx-ts/custom-templates/crm-grid/files/src/app/__path__/__filePrefix__.component.scss b/packages/igx-templates/igx-ts/custom-templates/crm-grid/files/src/app/__path__/__filePrefix__.component.scss index 696136480..686f86f9b 100644 --- a/packages/igx-templates/igx-ts/custom-templates/crm-grid/files/src/app/__path__/__filePrefix__.component.scss +++ b/packages/igx-templates/igx-ts/custom-templates/crm-grid/files/src/app/__path__/__filePrefix__.component.scss @@ -1,8 +1,7 @@ +@use '<%=igxPackage%>/theming' as *; @import url("https://unpkg.com/@fortawesome/fontawesome-free-webfonts@^1.0.9/css/fontawesome.css"); @import url("https://unpkg.com/@fortawesome/fontawesome-free-webfonts@^1.0.9/css/fa-regular.css"); @import url("https://unpkg.com/@fortawesome/fontawesome-free-webfonts@^1.0.9/css/fa-solid.css"); -@import '~<%=igxPackage%>/theming'; - :host ::ng-deep { $crm-grid-palette: igx-palette( diff --git a/packages/igx-templates/igx-ts/custom-templates/crm-grid/index.ts b/packages/igx-templates/igx-ts/custom-templates/crm-grid/index.ts index 243457585..c7af9ee99 100644 --- a/packages/igx-templates/igx-ts/custom-templates/crm-grid/index.ts +++ b/packages/igx-templates/igx-ts/custom-templates/crm-grid/index.ts @@ -41,7 +41,7 @@ class IgxGridCRMTemplate extends IgniteUIForAngularTemplate { }, { import: "FormsModule", from: "@angular/forms" } ]; - this.packages = ["igniteui-angular-core@~13.0.0", "igniteui-angular-charts@~13.0.0"]; + this.packages = ["igniteui-angular-core@~13.1.0", "igniteui-angular-charts@~13.1.0"]; } } module.exports = new IgxGridCRMTemplate(); diff --git a/packages/igx-templates/igx-ts/custom-templates/fintech-grid/files/src/app/__path__/__filePrefix__.component.scss b/packages/igx-templates/igx-ts/custom-templates/fintech-grid/files/src/app/__path__/__filePrefix__.component.scss index efd8203f7..a0c743318 100644 --- a/packages/igx-templates/igx-ts/custom-templates/fintech-grid/files/src/app/__path__/__filePrefix__.component.scss +++ b/packages/igx-templates/igx-ts/custom-templates/fintech-grid/files/src/app/__path__/__filePrefix__.component.scss @@ -1,3 +1,6 @@ +@use '<%=igxPackage%>/theming' as *; +@use './themes/_mixins' as *; + :host { display: block; width: 100%; @@ -224,12 +227,10 @@ height: 100%; } -@import '~<%=igxPackage%>/theming'; @include igx-core(); @include igx-typography($font-family: $material-typeface, $type-scale: $material-type-scale); @include igx-theme($default-palette); -@import './themes/_mixins'; @include scrollbar-love(); diff --git a/packages/igx-templates/igx-ts/custom-templates/fintech-grid/files/src/app/__path__/themes/_mixins.scss b/packages/igx-templates/igx-ts/custom-templates/fintech-grid/files/src/app/__path__/themes/_mixins.scss index 062c4b247..3a03c7a21 100644 --- a/packages/igx-templates/igx-ts/custom-templates/fintech-grid/files/src/app/__path__/themes/_mixins.scss +++ b/packages/igx-templates/igx-ts/custom-templates/fintech-grid/files/src/app/__path__/themes/_mixins.scss @@ -1,7 +1,9 @@ +@use '<%=igxPackage%>/theming' as *; + @mixin scrollbar-love($scrollbar-color: null) { $scrollbar-track: hexrgba(igx-color($default-palette, 'grays', 200)); $scrollbar-thumb: hexrgba(igx-color($default-palette, 'grays', 400)); - + @if $scrollbar-color and luminance($scrollbar-color) < .5 { $scrollbar-track: darken($scrollbar-color, 8%); $scrollbar-thumb: lighten($scrollbar-color, 20%); diff --git a/packages/igx-templates/igx-ts/custom-templates/fintech-grid/index.ts b/packages/igx-templates/igx-ts/custom-templates/fintech-grid/index.ts index 54e5d8423..e72d9d218 100644 --- a/packages/igx-templates/igx-ts/custom-templates/fintech-grid/index.ts +++ b/packages/igx-templates/igx-ts/custom-templates/fintech-grid/index.ts @@ -28,7 +28,7 @@ class IgxFinTechGridTemplate extends IgniteUIForAngularTemplate { }, { import: "FormsModule", from: "@angular/forms" } ]; - this.packages = ["igniteui-angular-core@~13.0.0", "igniteui-angular-charts@~13.0.0"]; + this.packages = ["igniteui-angular-core@~13.1.0", "igniteui-angular-charts@~13.1.0"]; } } module.exports = new IgxFinTechGridTemplate(); diff --git a/packages/igx-templates/igx-ts/custom-templates/fintech-tree-grid/files/src/app/__path__/__filePrefix__.component.scss b/packages/igx-templates/igx-ts/custom-templates/fintech-tree-grid/files/src/app/__path__/__filePrefix__.component.scss index e2165b334..db846ba0a 100644 --- a/packages/igx-templates/igx-ts/custom-templates/fintech-tree-grid/files/src/app/__path__/__filePrefix__.component.scss +++ b/packages/igx-templates/igx-ts/custom-templates/fintech-tree-grid/files/src/app/__path__/__filePrefix__.component.scss @@ -1,3 +1,6 @@ +@use '<%=igxPackage%>/theming' as *; +@use './themes/_mixins' as *; + :host ::ng-deep { .finjs-icons { display: flex; @@ -202,12 +205,10 @@ // Custom Dark Theme // Import the theme utilities first -@import '~<%=igxPackage%>/theming'; @include igx-core(); @include igx-typography($font-family: $material-typeface, $type-scale: $material-type-scale); @include igx-theme($default-palette); -@import './themes/_mixins'; $green-palette: igx-palette($primary: #09f,$secondary: #72da67, $surface: #333); diff --git a/packages/igx-templates/igx-ts/custom-templates/fintech-tree-grid/files/src/app/__path__/themes/_mixins.scss b/packages/igx-templates/igx-ts/custom-templates/fintech-tree-grid/files/src/app/__path__/themes/_mixins.scss index 42e447ac9..7591ca3fb 100644 --- a/packages/igx-templates/igx-ts/custom-templates/fintech-tree-grid/files/src/app/__path__/themes/_mixins.scss +++ b/packages/igx-templates/igx-ts/custom-templates/fintech-tree-grid/files/src/app/__path__/themes/_mixins.scss @@ -1,3 +1,5 @@ +@use '<%=igxPackage%>/theming' as *; + @mixin scrollbar-love($scrollbar-color: null) { $scrollbar-track: hexrgba(igx-color($default-palette, 'grays', 200)); $scrollbar-thumb: hexrgba(igx-color($default-palette, 'grays', 400)); @@ -16,4 +18,4 @@ ::-webkit-scrollbar-thumb { background-color: $scrollbar-thumb; } -} \ No newline at end of file +} diff --git a/packages/igx-templates/igx-ts/dock-manager/default/index.ts b/packages/igx-templates/igx-ts/dock-manager/default/index.ts index 83d47f6bc..e928849e1 100644 --- a/packages/igx-templates/igx-ts/dock-manager/default/index.ts +++ b/packages/igx-templates/igx-ts/dock-manager/default/index.ts @@ -16,7 +16,7 @@ class IgcDockManagerTemplate extends IgniteUIForAngularTemplate { { import: "<%=ClassName%>Module", from: "./src/app/<%=path%>/<%=filePrefix%>.module.ts" } ]; // "igniteui-dockmanager@~1.0.0": - this.packages = [ `${resolveIgxPackage(NPM_DOCK_MANAGER)}@~1.0.0` ]; + this.packages = [ `${resolveIgxPackage(NPM_DOCK_MANAGER)}@~1.6.0` ]; } protected addClassDeclaration(mainModule: TypeScriptFileUpdate, projPath: string, name: string, modulePath: string) { // not applicable with custom module diff --git a/packages/igx-templates/igx-ts/financial-chart/default/index.ts b/packages/igx-templates/igx-ts/financial-chart/default/index.ts index 1612965b4..88700f2c5 100644 --- a/packages/igx-templates/igx-ts/financial-chart/default/index.ts +++ b/packages/igx-templates/igx-ts/financial-chart/default/index.ts @@ -12,7 +12,7 @@ class IgxFinancialChartTemplate extends IgniteUIForAngularTemplate { this.dependencies = [ { import: "IgxFinancialChartModule", from: "igniteui-angular-charts" } ]; - this.packages = ["igniteui-angular-core@~13.0.0", "igniteui-angular-charts@~13.0.0"]; + this.packages = ["igniteui-angular-core@~13.1.0", "igniteui-angular-charts@~13.1.0"]; } } module.exports = new IgxFinancialChartTemplate(); diff --git a/packages/igx-templates/igx-ts/linear-gauge/default/index.ts b/packages/igx-templates/igx-ts/linear-gauge/default/index.ts index 3999b9ed1..a31188b86 100644 --- a/packages/igx-templates/igx-ts/linear-gauge/default/index.ts +++ b/packages/igx-templates/igx-ts/linear-gauge/default/index.ts @@ -16,7 +16,7 @@ class IgxLinearGaugeTemplate extends IgniteUIForAngularTemplate { from: "igniteui-angular-gauges" } ]; - this.packages = ["igniteui-angular-core@~13.0.0", "igniteui-angular-gauges@~13.0.0"]; + this.packages = ["igniteui-angular-core@~13.1.0", "igniteui-angular-gauges@~13.1.0"]; } } module.exports = new IgxLinearGaugeTemplate(); diff --git a/packages/igx-templates/igx-ts/map/default/index.ts b/packages/igx-templates/igx-ts/map/default/index.ts index 2a8b5003c..b43b3b218 100644 --- a/packages/igx-templates/igx-ts/map/default/index.ts +++ b/packages/igx-templates/igx-ts/map/default/index.ts @@ -20,7 +20,7 @@ class IgxGeographicMapTemplate extends IgniteUIForAngularTemplate { from: "igniteui-angular-charts" } ]; - this.packages = ["igniteui-angular-core@~13.0.0", "igniteui-angular-charts@~13.0.0", "igniteui-angular-maps@~13.0.0"]; + this.packages = ["igniteui-angular-core@~13.1.0", "igniteui-angular-charts@~13.1.0", "igniteui-angular-maps@~13.1.0"]; } } module.exports = new IgxGeographicMapTemplate(); diff --git a/packages/igx-templates/igx-ts/projects/_base/files/package.json b/packages/igx-templates/igx-ts/projects/_base/files/package.json index 2bdb39055..a53902eb2 100644 --- a/packages/igx-templates/igx-ts/projects/_base/files/package.json +++ b/packages/igx-templates/igx-ts/projects/_base/files/package.json @@ -10,16 +10,16 @@ }, "private": true, "dependencies": { - "@angular/animations": "~13.0.0", - "@angular/common": "~13.0.0", - "@angular/compiler": "~13.0.0", - "@angular/core": "~13.0.0", - "@angular/forms": "~13.0.0", - "@angular/platform-browser": "~13.0.0", - "@angular/platform-browser-dynamic": "~13.0.0", - "@angular/router": "~13.0.0", + "@angular/animations": "~13.1.1", + "@angular/common": "~13.1.1", + "@angular/compiler": "~13.1.1", + "@angular/core": "~13.1.1", + "@angular/forms": "~13.1.1", + "@angular/platform-browser": "~13.1.1", + "@angular/platform-browser-dynamic": "~13.1.1", + "@angular/router": "~13.1.1", "hammerjs": "^2.0.8", - "igniteui-angular": "~13.0.0", + "igniteui-angular": "~13.1.0-alpha.1", "core-js": "^3.6.5", "jszip": "^3.5.0", "minireset.css": "~0.0.4", @@ -28,14 +28,14 @@ "zone.js": "~0.11.4" }, "devDependencies": { - "@angular-devkit/build-angular": "~13.0.1", + "@angular-devkit/build-angular": "~13.1.2", "@angular-eslint/builder": "13.0.1", "@angular-eslint/eslint-plugin": "13.0.1", "@angular-eslint/eslint-plugin-template": "13.0.1", "@angular-eslint/schematics": "13.0.1", "@angular-eslint/template-parser": "13.0.1", - "@angular/cli": "~13.0.1", - "@angular/compiler-cli": "~13.0.0", + "@angular/cli": "~13.1.2", + "@angular/compiler-cli": "~13.1.1", "@types/jasmine": "~3.8.0", "@types/node": "^12.11.1", "@typescript-eslint/eslint-plugin": "5.3.0", @@ -52,6 +52,6 @@ "karma-jasmine-html-reporter": "~1.7.0", "protractor": "~7.0.0", "ts-node": "~9.1.1", - "typescript": "~4.4.4" + "typescript": "~4.5.2" } } diff --git a/packages/igx-templates/igx-ts/projects/_base/files/src/styles.scss b/packages/igx-templates/igx-ts/projects/_base/files/src/styles.scss index 1efd5d95e..bc3145113 100644 --- a/packages/igx-templates/igx-ts/projects/_base/files/src/styles.scss +++ b/packages/igx-templates/igx-ts/projects/_base/files/src/styles.scss @@ -1,6 +1,7 @@ /* You can add global styles to this file, and also import other style files */ // Standard CSS normalize, comment out if not required or using a different module -@import "~minireset.css/minireset"; +@use "~minireset.css/minireset" as *; +@forward "~minireset.css/minireset"; <%=CustomTheme%> html, body { diff --git a/packages/igx-templates/igx-ts/projects/_base/index.ts b/packages/igx-templates/igx-ts/projects/_base/index.ts index 89c03c616..478794a7b 100644 --- a/packages/igx-templates/igx-ts/projects/_base/index.ts +++ b/packages/igx-templates/igx-ts/projects/_base/index.ts @@ -23,7 +23,7 @@ export class BaseIgxProject implements ProjectTemplate { private CUSTOM_THEME = `/* See: https://www.infragistics.com/products/ignite-ui-angular/angular/components/themes/sass/index */ -@import "~igniteui-angular/theming"; +@use "igniteui-angular/theming" as *; $primary: #731963 !default; $secondary: #ce5712 !default; diff --git a/packages/igx-templates/igx-ts/projects/empty/files/src/app/home/home.component.scss b/packages/igx-templates/igx-ts/projects/empty/files/src/app/home/home.component.scss index de4cd7eea..7a8bb7edf 100644 --- a/packages/igx-templates/igx-ts/projects/empty/files/src/app/home/home.component.scss +++ b/packages/igx-templates/igx-ts/projects/empty/files/src/app/home/home.component.scss @@ -1,4 +1,4 @@ -@import "~igniteui-angular/theming"; +@use 'igniteui-angular/theming' as *; %content-display { width: 100%; diff --git a/packages/igx-templates/igx-ts/projects/side-nav-auth/files/package.json b/packages/igx-templates/igx-ts/projects/side-nav-auth/files/package.json index 2372810ac..ab0ae392b 100644 --- a/packages/igx-templates/igx-ts/projects/side-nav-auth/files/package.json +++ b/packages/igx-templates/igx-ts/projects/side-nav-auth/files/package.json @@ -10,17 +10,17 @@ }, "private": true, "dependencies": { - "@angular/animations": "~13.0.0", - "@angular/common": "~13.0.0", - "@angular/compiler": "~13.0.0", - "@angular/core": "~13.0.0", - "@angular/forms": "~13.0.0", - "@angular/platform-browser": "~13.0.0", - "@angular/platform-browser-dynamic": "~13.0.0", - "@angular/router": "~13.0.0", + "@angular/animations": "~13.1.1", + "@angular/common": "~13.1.1", + "@angular/compiler": "~13.1.1", + "@angular/core": "~13.1.1", + "@angular/forms": "~13.1.1", + "@angular/platform-browser": "~13.1.1", + "@angular/platform-browser-dynamic": "~13.1.1", + "@angular/router": "~13.1.1", "angular-auth-oidc-client": "^9.0.3", "hammerjs": "^2.0.8", - "igniteui-angular": "~13.0.0", + "igniteui-angular": "~13.1.0-alpha.1", "core-js": "^3.6.5", "jszip": "^3.5.0", "minireset.css": "~0.0.4", @@ -29,15 +29,15 @@ "zone.js": "~0.11.4" }, "devDependencies": { - "@angular-devkit/build-angular": "~13.0.1", + "@angular-devkit/build-angular": "~13.1.2", "@angular-eslint/builder": "13.0.1", "@angular-eslint/eslint-plugin": "13.0.1", "@angular-eslint/eslint-plugin-template": "13.0.1", "@angular-eslint/schematics": "13.0.1", "@angular-eslint/template-parser": "13.0.1", - "@angular/cli": "~13.0.1", - "@angular/compiler-cli": "~13.0.0", - "@angular/language-service": "~13.0.0", + "@angular/cli": "~13.1.2", + "@angular/compiler-cli": "~13.1.1", + "@angular/language-service": "~13.1.1", "@types/facebook-js-sdk": "^2.8.6", "@types/hammerjs": "^2.0.35", "@types/jasmine": "~3.8.0", @@ -57,6 +57,6 @@ "karma-jasmine-html-reporter": "~1.7.0", "protractor": "~7.0.0", "ts-node": "~9.1.1", - "typescript": "~4.4.4" + "typescript": "~4.5.2" } } diff --git a/packages/igx-templates/igx-ts/radial-gauge/default/index.ts b/packages/igx-templates/igx-ts/radial-gauge/default/index.ts index 39b01b104..f6da7a149 100644 --- a/packages/igx-templates/igx-ts/radial-gauge/default/index.ts +++ b/packages/igx-templates/igx-ts/radial-gauge/default/index.ts @@ -16,7 +16,7 @@ class IgxRadialGaugeTemplate extends IgniteUIForAngularTemplate { from: "igniteui-angular-gauges" } ]; - this.packages = ["igniteui-angular-core@~13.0.0", "igniteui-angular-gauges@~13.0.0"]; + this.packages = ["igniteui-angular-core@~13.1.0", "igniteui-angular-gauges@~13.1.0"]; } } module.exports = new IgxRadialGaugeTemplate(); diff --git a/packages/igx-templates/igx-ts/tree/default/files/src/app/__path__/__filePrefix__.component.scss b/packages/igx-templates/igx-ts/tree/default/files/src/app/__path__/__filePrefix__.component.scss index 4ece6c93d..f48dd8931 100644 --- a/packages/igx-templates/igx-ts/tree/default/files/src/app/__path__/__filePrefix__.component.scss +++ b/packages/igx-templates/igx-ts/tree/default/files/src/app/__path__/__filePrefix__.component.scss @@ -12,7 +12,7 @@ igx-tree { .node-refresh { cursor: pointer; padding: 0px 4px; - color: var(--igx-success-500); + color: hsla(var(--igx-success-500)); } .node { diff --git a/packages/igx-templates/package.json b/packages/igx-templates/package.json index 1a8de7e69..e32f92e40 100644 --- a/packages/igx-templates/package.json +++ b/packages/igx-templates/package.json @@ -1,6 +1,6 @@ { "name": "@igniteui/angular-templates", - "version": "13.0.901", + "version": "13.0.904", "description": "Templates for Ignite UI for Angular projects and components", "repository": { "type": "git", @@ -12,7 +12,7 @@ "author": "Infragistics", "license": "MIT", "dependencies": { - "@igniteui/cli-core": "~9.0.1", - "typescript": "~4.4.4" + "@igniteui/cli-core": "~9.0.4", + "typescript": "~4.5.2" } } diff --git a/packages/ng-schematics/package.json b/packages/ng-schematics/package.json index c67c1aead..f367515ca 100644 --- a/packages/ng-schematics/package.json +++ b/packages/ng-schematics/package.json @@ -1,6 +1,6 @@ { "name": "@igniteui/angular-schematics", - "version": "13.0.901", + "version": "13.0.904", "description": "Ignite UI for Angular Schematics for ng new and ng generate", "repository": { "type": "git", @@ -20,8 +20,8 @@ "dependencies": { "@angular-devkit/core": "~13.0.0", "@angular-devkit/schematics": "~13.0.0", - "@igniteui/angular-templates": "~13.0.901", - "@igniteui/cli-core": "~9.0.1", + "@igniteui/angular-templates": "~13.0.904", + "@igniteui/cli-core": "~9.0.4", "@schematics/angular": "~13.0.0", "rxjs": "^6.6.3" }, @@ -29,7 +29,7 @@ "@types/jasmine": "3.3.9", "@types/node": "^8.0.31", "jasmine": "3.5.0", - "typescript": "~4.4.4" + "typescript": "~4.5.2" }, "ng-update": { "migrations": "./src/migrations/migration-collection.json", diff --git a/spec/unit/PromptSession-spec.ts b/spec/unit/PromptSession-spec.ts index f8528dd14..c05df4cd5 100644 --- a/spec/unit/PromptSession-spec.ts +++ b/spec/unit/PromptSession-spec.ts @@ -690,7 +690,7 @@ describe("Unit - PromptSession", () => { await mockSession.start(); const CUSTOM_THEME = ` /* See: https://www.infragistics.com/products/ignite-ui-angular/angular/components/themes/sass/index */ - @import "~igniteui-angular/theming"; + @use "igniteui-angular/theming" as *; $primary: #731963 !default; $secondary: #ce5712 !default; $app-palette: igx-palette($primary, $secondary); diff --git a/yarn.lock b/yarn.lock index bcb6d2917..d9d34be4b 100644 --- a/yarn.lock +++ b/yarn.lock @@ -7029,10 +7029,10 @@ typescript@^3.5.3: resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.7.5.tgz#0692e21f65fd4108b9330238aac11dd2e177a1ae" integrity sha512-/P5lkRXkWHNAbcJIiHPfRoKqyd7bsyCma1hZNUGfn20qm64T6ZBlrzprymeu918H+mB/0rIg2gGK/BXkhhYgBw== -typescript@~4.4.4: - version "4.4.4" - resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.4.4.tgz#2cd01a1a1f160704d3101fd5a58ff0f9fcb8030c" - integrity sha512-DqGhF5IKoBl8WNf8C1gu8q0xZSInh9j1kJJMqT3a94w1JzVaBU4EXOSMrz9yDqMT0xt3selp83fuFMQ0uzv6qA== +typescript@~4.5.2: + version "4.5.2" + resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.5.2.tgz#8ac1fba9f52256fdb06fb89e4122fa6a346c2998" + integrity sha512-5BlMof9H1yGt0P8/WF+wPNw6GfctgGjXp5hkblpyT+8rkASSmkUKMXrxR0Xg8ThVCi/JnHQiKXeBaEwCeQwMFw== ua-parser-js@1.0.2: version "1.0.2"