diff --git a/browser/public/index.html b/browser/public/index.html index 6c29cd72d..00e4afc0e 100644 --- a/browser/public/index.html +++ b/browser/public/index.html @@ -519,6 +519,7 @@ ─Data Validator Service ─Data Validator Service Cross Field ─Data Validator Service Extended + ─Disabled Summaries ─Editing Columns ─Editing Events ─Editing Excel Style @@ -621,6 +622,7 @@ ─Data Summary Options ─Data Summary Options Styling ─Data Summary Template + ─Disabled Summaries ─Editing Columns ─Editing Events ─Editing Lifecycle @@ -729,6 +731,7 @@ ─Data Summary Options ─Data Summary Options Styling ─Data Summary Template + ─Disabled Summaries ─Editing Columns ─Editing Events ─Editing Lifecycle @@ -1024,6 +1027,16 @@ ─Prefix Suffix ─Scrolling + +
MAPS
diff --git a/package-lock.json b/package-lock.json index 019407187..10983c8a9 100644 --- a/package-lock.json +++ b/package-lock.json @@ -21,7 +21,7 @@ "core-js": "^3.6.5", "file-saver": "^2.0.2", "igniteui-dockmanager": "1.16.0", - "igniteui-webcomponents": "5.2.4", + "igniteui-webcomponents": "5.3.0", "igniteui-webcomponents-charts": "5.3.0", "igniteui-webcomponents-core": "5.3.0", "igniteui-webcomponents-dashboards": "5.3.0", @@ -8727,9 +8727,9 @@ "integrity": "sha512-q6thtu+7R6MOB+i9GorFPCcWeOImW43BzCAtKnDAYWwaoueb8Lg1EhBkIhAyfEIH+yZ/9c5lnZdU61/GRPoP+g==" }, "node_modules/igniteui-webcomponents": { - "version": "5.2.4", - "resolved": "https://registry.npmjs.org/igniteui-webcomponents/-/igniteui-webcomponents-5.2.4.tgz", - "integrity": "sha512-EppDLSA0wGX6CFweeF4IVtAjMzcVw6TFDMXVKQQNwXTuSkmWLTGFgwGB7Aj/wryPz8D4bbGe8hF7Mv7sA4xI9w==", + "version": "5.3.0", + "resolved": "https://registry.npmjs.org/igniteui-webcomponents/-/igniteui-webcomponents-5.3.0.tgz", + "integrity": "sha512-K5PPwfT2ECp/W3+mNapt1HW6PRIQK7DkehK4SbsCc513LwTzBL1gfHYax0Hk3eiPJP2M/8ANBJ3yDZdRy6YzXQ==", "license": "SEE LICENSE IN LICENSE", "dependencies": { "@floating-ui/dom": "^1.6.0", diff --git a/package.json b/package.json index 6e0126138..ff4f97f3c 100644 --- a/package.json +++ b/package.json @@ -41,7 +41,7 @@ "core-js": "^3.6.5", "file-saver": "^2.0.2", "igniteui-dockmanager": "1.16.0", - "igniteui-webcomponents": "5.2.4", + "igniteui-webcomponents": "5.3.0", "igniteui-webcomponents-charts": "5.3.0", "igniteui-webcomponents-core": "5.3.0", "igniteui-webcomponents-dashboards": "5.3.0", diff --git a/samples/grids/pivot-grid/state-persistence-main/src/index.ts b/samples/grids/pivot-grid/state-persistence-main/src/index.ts index 55ce5ec33..48e18dc27 100644 --- a/samples/grids/pivot-grid/state-persistence-main/src/index.ts +++ b/samples/grids/pivot-grid/state-persistence-main/src/index.ts @@ -21,7 +21,7 @@ export class Sample { public options: IgcGridStateOptions = { cellSelection: true, - rowSelection: true, + columnSelection: true, filtering: true, sorting: true, expansion: true, @@ -245,13 +245,14 @@ export class Sample { if (action === 'allFeatures') { var allCheckboxes = Array.from(document.getElementsByTagName("igc-checkbox")); allCheckboxes.forEach(cb => { - cb.checked = event.detail; + cb.checked = event.detail.checked; }); + for (const key of Object.keys(this.options)) { - (this.gridState.options as any)[key] = event.detail; - } + (this.gridState.options as any)[key] = event.detail.checked; + } } else { - (this.gridState.options as any)[action] = event.detail; + (this.gridState.options as any)[action] = event.detail.checked; var allFeatures = document.getElementById("allFeatures") as IgcCheckboxComponent; allFeatures.checked = Object.keys(this.options).every(o => (this.gridState.options as any)[o]); } diff --git a/samples/layouts/tile-manager/actions/.prettierrc b/samples/layouts/tile-manager/actions/.prettierrc new file mode 100644 index 000000000..15a7c7c6c --- /dev/null +++ b/samples/layouts/tile-manager/actions/.prettierrc @@ -0,0 +1,11 @@ +{ + "printWidth": 250, + "tabWidth": 4, + "useTabs": false, + "semi": true, + "singleQuote": false, + "trailingComma": "none", + "bracketSpacing": true, + "jsxBracketSameLine": false, + "fluid": false +} \ No newline at end of file diff --git a/samples/layouts/tile-manager/actions/ReadMe.md b/samples/layouts/tile-manager/actions/ReadMe.md new file mode 100644 index 000000000..ba48172e5 --- /dev/null +++ b/samples/layouts/tile-manager/actions/ReadMe.md @@ -0,0 +1,56 @@ + + + +This folder contains implementation of Web Components application with example of Actions feature using [Tile Manager](https://infragistics.com/webcomponentssite/components/general-getting-started.html) component. + + + + + + View Docs + + + View Code + + + Run Sample + + + Run Sample + + + + +## Branches + +> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-angular-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-angular-examples/tree/vnext) branch only when you want to contribute new samples to this repository. + +## Instructions + +To set up this project locally, execute these commands: + +``` +git clone https://github.com/IgniteUI/igniteui-wc-examples.git +git checkout master +cd ./igniteui-wc-examples +cd ./samples/layouts/tile-manager/actions +``` + +open above folder in VS Code or type: +``` +code . +``` + +In terminal window, run: + +``` +npm install +npm run start +``` + +Then open http://localhost:4200/ in your browser + + +## Learn More + +To learn more about **Ignite UI for Web Components**, check out the [Web Components documentation](https://infragistics.com/webcomponentssite/components/general-getting-started.html). diff --git a/samples/layouts/tile-manager/actions/index.html b/samples/layouts/tile-manager/actions/index.html new file mode 100644 index 000000000..c6770f247 --- /dev/null +++ b/samples/layouts/tile-manager/actions/index.html @@ -0,0 +1,56 @@ + + + + + Tile Manager Actions + + + + + + + + + + +
+
+ + +

Default Actions

+

This tile has default actions and title.

+ + +

No Fullscreen Action

+

Fullscreen is disabled via property.

+ + +

Custom Actions

+ +

Replace the default actions with custom ones, and include extra actions when the tile is maximized.

+ + + +

Display only custom actions in the header.

+ + +

Only title

+

Display only title in the header.

+ + +

Content only.

+ + +
+
+ + + <% if (false) { %> + + <% } %> + + + + \ No newline at end of file diff --git a/samples/layouts/tile-manager/actions/package.json b/samples/layouts/tile-manager/actions/package.json new file mode 100644 index 000000000..a74d015e9 --- /dev/null +++ b/samples/layouts/tile-manager/actions/package.json @@ -0,0 +1,59 @@ +{ + "name": "wc-avatar-icon", + "version": "1.0.0", + "description": "This project provides example of Avatar Icon using IgniteUI for Web Components", + "main": "src/index.ts", + "scripts": { + "build": "npm run build:prod", + "build:dev": "webpack --mode development --config ./webpack.config.js --progress --color --display-error-details", + "build:prod": "webpack --env.NODE_ENV=production --mode production --config ./webpack.config.js --progress --color --display-error-details --bail", + "serve:dev": "node --max-old-space-size=8192 node_modules/webpack-dev-server/bin/webpack-dev-server.js --mode development --config ./webpack.config.js --hot --progress --open", + "serve:prod": "webpack-dev-server --env.NODE_ENV=production --mode production --config ./webpack.config.js --port 3000 --host 0.0.0.0 --hot --progress --open --content-base dist/", + "start": "npm run serve:dev", + "build:legacy": "npm run build:prod:legacy", + "build:dev:legacy": "webpack --env.legacy=true --mode development --config ./webpack.config.js --progress --color --display-error-details", + "build:prod:legacy": "webpack --env.NODE_ENV=production --env.legacy=true --mode production --config ./webpack.config.js --progress --color --display-error-details --bail", + "serve:dev:legacy": "node --max-old-space-size=8192 node_modules/webpack-dev-server/bin/webpack-dev-server.js --env.legacy=true --mode development --config ./webpack.config.js --hot --progress --open", + "serve:prod:legacy": "webpack-dev-server --env.NODE_ENV=production --env.legacy=true --mode production --config ./webpack.config.js --port 3000 --host 0.0.0.0 --hot --progress --open --content-base dist/", + "start:legacy": "npm run serve:dev:legacy" + }, + "author": "Infragistics", + "dependencies": { + "@webcomponents/custom-elements": "^1.4.1", + "@webcomponents/template": "^1.4.2", + "babel-runtime": "^6.26.0", + "core-js": "^3.6.5", + "igniteui-webcomponents": "5.3.0-RC.1", + "lit": "^3.2.0", + "lit-html": "^3.2.0", + "tslib": "^2.0.0" + }, + "devDependencies": { + "@babel/cli": "^7.8.3", + "@babel/core": "^7.8.3", + "@babel/plugin-proposal-class-properties": "^7.8.3", + "@babel/plugin-transform-runtime": "^7.10.0", + "@babel/preset-env": "^7.8.3", + "@babel/preset-typescript": "^7.8.3", + "@types/source-map": "^0.5.7", + "babel-loader": "^8.1.0", + "babel-plugin-transform-custom-element-classes": "^0.1.0", + "css-loader": "^1.0.0", + "csv-loader": "^3.0.2", + "file-loader": "^4.2.0", + "fork-ts-checker-webpack-plugin": "^4.1.5", + "html-webpack-plugin": "^4.3.0", + "parcel-bundler": "^1.6.1", + "source-map": "^0.7.3", + "style-loader": "^0.22.1", + "tsconfig-paths-webpack-plugin": "^4.0.0", + "typescript": "^4.4.4", + "webpack": "^5.96.1", + "webpack-cli": "^4.10.0", + "webpack-dev-server": "^4.11.1", + "worker-loader": "^3.0.8", + "xml-loader": "^1.2.1" + }, + "license": "", + "homepage": "." +} diff --git a/samples/layouts/tile-manager/actions/sandbox.config.json b/samples/layouts/tile-manager/actions/sandbox.config.json new file mode 100644 index 000000000..5c5b54fe2 --- /dev/null +++ b/samples/layouts/tile-manager/actions/sandbox.config.json @@ -0,0 +1,7 @@ +{ + "infiniteLoopProtection": false, + "hardReloadOnChange": false, + "view": "browser", + "template": "parcel" +} + \ No newline at end of file diff --git a/samples/layouts/tile-manager/actions/src/index.css b/samples/layouts/tile-manager/actions/src/index.css new file mode 100644 index 000000000..0fe936871 --- /dev/null +++ b/samples/layouts/tile-manager/actions/src/index.css @@ -0,0 +1,2 @@ +/* shared styles are loaded from: */ +/* https://static.infragistics.com/xplatform/css/samples */ \ No newline at end of file diff --git a/samples/layouts/tile-manager/actions/src/index.ts b/samples/layouts/tile-manager/actions/src/index.ts new file mode 100644 index 000000000..4e77a222d --- /dev/null +++ b/samples/layouts/tile-manager/actions/src/index.ts @@ -0,0 +1,95 @@ +import { defineComponents, IgcTileManagerComponent, IgcIconButtonComponent, IgcIconComponent, IgcButtonComponent, registerIconFromText } from 'igniteui-webcomponents'; +import 'igniteui-webcomponents/themes/light/bootstrap.css'; +import './layout.css' + +defineComponents(IgcTileManagerComponent, IgcIconButtonComponent, IgcIconComponent, IgcButtonComponent); + +export class TileManagerActions { + + constructor() { + const northEast = + ''; + registerIconFromText('north_east', northEast, 'material'); + const southWest = + ''; + registerIconFromText('south_west', southWest, 'material'); + const more = + ''; + registerIconFromText('more', more, 'material'); + const chart = + ''; + registerIconFromText('chart', chart, 'material'); + + document.querySelector('#customOne')?.addEventListener('click', (event: Event) => { + + const tile = (event.target as HTMLElement).closest('igc-tile'); + + if (tile) { + tile.maximized = !tile.maximized; + + const actionsSlot = tile.querySelector('[slot="actions"]') as HTMLElement; + const currentBtn = event.target as HTMLElement; + + if (currentBtn) { + if (tile.maximized) { + currentBtn.setAttribute('name', 'south_west'); + currentBtn.setAttribute('aria-label', 'collapse'); + + const chartBtn = document.createElement('igc-icon-button'); + chartBtn.classList.add('additional-action'); + chartBtn.setAttribute('slot', 'actions'); + chartBtn.setAttribute('variant', 'flat'); + chartBtn.setAttribute('collection', 'material'); + chartBtn.setAttribute('name', 'chart'); + chartBtn.setAttribute('aria-label', 'chart'); + + const moreBtn = document.createElement('igc-icon-button'); + moreBtn.classList.add('additional-action'); + moreBtn.setAttribute('slot', 'actions'); + moreBtn.setAttribute('variant', 'flat'); + moreBtn.setAttribute('collection', 'material'); + moreBtn.setAttribute('name', 'more'); + moreBtn.setAttribute('aria-label', 'more'); + + tile.append(chartBtn); + tile.append(moreBtn); + } else { + currentBtn.setAttribute('name', 'north_east'); + currentBtn.setAttribute('aria-label', 'expand'); + + const additionalButtons = + actionsSlot.parentElement?.querySelectorAll('.additional-action'); + additionalButtons?.forEach((btn) => btn.remove()); + } + } + } + }) + + + + document.querySelector('#customTwo')?.addEventListener('click', (event: Event) => { + const tile = (event.target as HTMLElement).closest('igc-tile'); + + if (tile) { + tile.maximized = !tile.maximized; + + const currentBtn = event.target as HTMLElement; + + if (currentBtn) { + if (tile.maximized) { + currentBtn.setAttribute('name', 'south_west'); + currentBtn.setAttribute('aria-label', 'collapse'); + } + else { + currentBtn.setAttribute('name', 'north_east'); + currentBtn.setAttribute('aria-label', 'expand'); + } + } + } + }) + + + } +} + +new TileManagerActions(); diff --git a/samples/layouts/tile-manager/actions/src/layout.css b/samples/layouts/tile-manager/actions/src/layout.css new file mode 100644 index 000000000..eaaa9e641 --- /dev/null +++ b/samples/layouts/tile-manager/actions/src/layout.css @@ -0,0 +1,23 @@ +igc-tile-manager { + margin-bottom: 5px; +} + +igc-tile:nth-child(n + 3):nth-child(-n + 4)::part(actions) { + padding: 13px 16px; +} + +igc-tile:nth-child(n+3)::part(header) { + padding: 0px; +} + +igc-tile:nth-child(5)::part(header) { + padding: 18px 0 18px 0; +} + +p, igc-tile:nth-child(3) h3, igc-tile:nth-child(5) h3 { + margin-left: 20px; +} + +igc-tile:nth-last-child(1) p { + margin-top: 30px; +} \ No newline at end of file diff --git a/samples/layouts/tile-manager/actions/tsconfig.json b/samples/layouts/tile-manager/actions/tsconfig.json new file mode 100644 index 000000000..de23257dd --- /dev/null +++ b/samples/layouts/tile-manager/actions/tsconfig.json @@ -0,0 +1,20 @@ +{ + "compilerOptions": { + "noImplicitReturns": true, + "esModuleInterop": true, + "noImplicitAny": true, + "declarationDir": "dist/types", + "moduleResolution": "node", + "declaration": true, + "target": "es2015", + "module": "es2015", + "strict": true + }, + "include": [ + "src/**/*" + ], + "exclude": [ + "node_modules", + "dist" + ] +} \ No newline at end of file diff --git a/samples/layouts/tile-manager/actions/webpack.config.js b/samples/layouts/tile-manager/actions/webpack.config.js new file mode 100644 index 000000000..9d11a6155 --- /dev/null +++ b/samples/layouts/tile-manager/actions/webpack.config.js @@ -0,0 +1,105 @@ +const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin'); +const HtmlWebpackPlugin = require('html-webpack-plugin'); +const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin'); +const path = require('path'); +const webpack = require('webpack'); + +module.exports = env => { + const nodeEnv = process.env.NODE_ENV || 'development'; + const isProd = nodeEnv === 'production'; + const isLegacy = !!process.env.legacy && !(process.env.legacy == "false"); + console.log(">> webpack nodeEnv=" + nodeEnv); + console.log(">> webpack isProd=" + isProd); + console.log(">> webpack isLegacy=" + isLegacy); + const presets = [ + ["@babel/preset-env", { + "useBuiltIns": "usage", + "corejs": 3, + "targets": { + "browsers": isLegacy ? ["defaults"] : [ + "last 2 Chrome versions", + "last 2 Safari versions", + "last 2 iOS versions", + "last 2 Firefox versions", + "last 2 Edge versions"] + } + }], + "@babel/preset-typescript" + ]; + + return { + entry: isLegacy ? [ + path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'), + path.resolve(__dirname, 'node_modules/@webcomponents/template'), + path.resolve(__dirname, 'src') + ] : path.resolve(__dirname, 'src'), + devtool: isProd ? false : 'source-map', + output: { + filename: isProd ? '[fullhash].bundle.js' : '[fullhash].bundle.js', + globalObject: 'this', + path: path.resolve(__dirname, 'dist'), + }, + + resolve: { + mainFields: ['esm2015', 'module', 'main'], + extensions: ['.ts', '.js', '.json'], + plugins: [new TsconfigPathsPlugin({ + configFile: './tsconfig.json', + extensions: ['.ts', '.js'], + mainFields: ['esm2015', 'module', 'main'] + })] + }, + + module: { + rules: [ + { test: /\.(png|svg|jpg|gif)$/, use: ['file-loader'] }, + { test: /\.(csv|tsv)$/, use: ['csv-loader'] }, + { test: /\.xml$/, use: ['xml-loader'] }, + { test: /\.css$/, sideEffects: true, use: ['style-loader', 'css-loader'] }, + { + test: /worker\.(ts|js)$/, + use: [ + { loader: 'worker-loader' }, + { + loader: 'babel-loader', options: { + "compact": isProd ? true : false, + "presets": presets, + "plugins": [ + "@babel/plugin-proposal-class-properties", + "@babel/plugin-transform-runtime" + ] + } + } + ] + }, + { + test: /\.(ts|js)$/, loader: 'babel-loader', + options: { + "compact": isProd ? true : false, + "presets": presets, + "plugins": [ + "@babel/plugin-proposal-class-properties", + "@babel/plugin-transform-runtime" + ] + }, + exclude: + function (modulePath) { + return /node_modules/.test(modulePath) && + !/igniteui-webcomponents/.test(modulePath) && + !/lit-html/.test(modulePath); + } + }], + }, + + plugins: [ + new webpack.DefinePlugin({ + 'process.env.NODE_ENV': JSON.stringify(nodeEnv) + }), + new HtmlWebpackPlugin({ + title: 'for-cs', + template: 'index.html' + }), + new ForkTsCheckerWebpackPlugin() + ] + }; +}; diff --git a/samples/layouts/tile-manager/columngap/.prettierrc b/samples/layouts/tile-manager/columngap/.prettierrc new file mode 100644 index 000000000..15a7c7c6c --- /dev/null +++ b/samples/layouts/tile-manager/columngap/.prettierrc @@ -0,0 +1,11 @@ +{ + "printWidth": 250, + "tabWidth": 4, + "useTabs": false, + "semi": true, + "singleQuote": false, + "trailingComma": "none", + "bracketSpacing": true, + "jsxBracketSameLine": false, + "fluid": false +} \ No newline at end of file diff --git a/samples/layouts/tile-manager/columngap/ReadMe.md b/samples/layouts/tile-manager/columngap/ReadMe.md new file mode 100644 index 000000000..4cd52c544 --- /dev/null +++ b/samples/layouts/tile-manager/columngap/ReadMe.md @@ -0,0 +1,56 @@ + + + +This folder contains implementation of Web Components application with example of Columngap feature using [Tile Manager](https://infragistics.com/webcomponentssite/components/general-getting-started.html) component. + + + + + + View Docs + + + View Code + + + Run Sample + + + Run Sample + + + + +## Branches + +> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-angular-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-angular-examples/tree/vnext) branch only when you want to contribute new samples to this repository. + +## Instructions + +To set up this project locally, execute these commands: + +``` +git clone https://github.com/IgniteUI/igniteui-wc-examples.git +git checkout master +cd ./igniteui-wc-examples +cd ./samples/layouts/tile-manager/columngap +``` + +open above folder in VS Code or type: +``` +code . +``` + +In terminal window, run: + +``` +npm install +npm run start +``` + +Then open http://localhost:4200/ in your browser + + +## Learn More + +To learn more about **Ignite UI for Web Components**, check out the [Web Components documentation](https://infragistics.com/webcomponentssite/components/general-getting-started.html). diff --git a/samples/layouts/tile-manager/columngap/index.html b/samples/layouts/tile-manager/columngap/index.html new file mode 100644 index 000000000..d2e03eb9b --- /dev/null +++ b/samples/layouts/tile-manager/columngap/index.html @@ -0,0 +1,64 @@ + + + + + Tile Manager Columns + + + + + + + + + + +
+
+
+ + +
+ + +
+ picture +
+ + +
+ picture +
+ + +
+ picture +
+ + +
+ picture +
+ + +
+ picture +
+ + +
+ picture +
+ + +
+
+ + + <% if (false) { %> + + <% } %> + + + + \ No newline at end of file diff --git a/samples/layouts/tile-manager/columngap/package.json b/samples/layouts/tile-manager/columngap/package.json new file mode 100644 index 000000000..a74d015e9 --- /dev/null +++ b/samples/layouts/tile-manager/columngap/package.json @@ -0,0 +1,59 @@ +{ + "name": "wc-avatar-icon", + "version": "1.0.0", + "description": "This project provides example of Avatar Icon using IgniteUI for Web Components", + "main": "src/index.ts", + "scripts": { + "build": "npm run build:prod", + "build:dev": "webpack --mode development --config ./webpack.config.js --progress --color --display-error-details", + "build:prod": "webpack --env.NODE_ENV=production --mode production --config ./webpack.config.js --progress --color --display-error-details --bail", + "serve:dev": "node --max-old-space-size=8192 node_modules/webpack-dev-server/bin/webpack-dev-server.js --mode development --config ./webpack.config.js --hot --progress --open", + "serve:prod": "webpack-dev-server --env.NODE_ENV=production --mode production --config ./webpack.config.js --port 3000 --host 0.0.0.0 --hot --progress --open --content-base dist/", + "start": "npm run serve:dev", + "build:legacy": "npm run build:prod:legacy", + "build:dev:legacy": "webpack --env.legacy=true --mode development --config ./webpack.config.js --progress --color --display-error-details", + "build:prod:legacy": "webpack --env.NODE_ENV=production --env.legacy=true --mode production --config ./webpack.config.js --progress --color --display-error-details --bail", + "serve:dev:legacy": "node --max-old-space-size=8192 node_modules/webpack-dev-server/bin/webpack-dev-server.js --env.legacy=true --mode development --config ./webpack.config.js --hot --progress --open", + "serve:prod:legacy": "webpack-dev-server --env.NODE_ENV=production --env.legacy=true --mode production --config ./webpack.config.js --port 3000 --host 0.0.0.0 --hot --progress --open --content-base dist/", + "start:legacy": "npm run serve:dev:legacy" + }, + "author": "Infragistics", + "dependencies": { + "@webcomponents/custom-elements": "^1.4.1", + "@webcomponents/template": "^1.4.2", + "babel-runtime": "^6.26.0", + "core-js": "^3.6.5", + "igniteui-webcomponents": "5.3.0-RC.1", + "lit": "^3.2.0", + "lit-html": "^3.2.0", + "tslib": "^2.0.0" + }, + "devDependencies": { + "@babel/cli": "^7.8.3", + "@babel/core": "^7.8.3", + "@babel/plugin-proposal-class-properties": "^7.8.3", + "@babel/plugin-transform-runtime": "^7.10.0", + "@babel/preset-env": "^7.8.3", + "@babel/preset-typescript": "^7.8.3", + "@types/source-map": "^0.5.7", + "babel-loader": "^8.1.0", + "babel-plugin-transform-custom-element-classes": "^0.1.0", + "css-loader": "^1.0.0", + "csv-loader": "^3.0.2", + "file-loader": "^4.2.0", + "fork-ts-checker-webpack-plugin": "^4.1.5", + "html-webpack-plugin": "^4.3.0", + "parcel-bundler": "^1.6.1", + "source-map": "^0.7.3", + "style-loader": "^0.22.1", + "tsconfig-paths-webpack-plugin": "^4.0.0", + "typescript": "^4.4.4", + "webpack": "^5.96.1", + "webpack-cli": "^4.10.0", + "webpack-dev-server": "^4.11.1", + "worker-loader": "^3.0.8", + "xml-loader": "^1.2.1" + }, + "license": "", + "homepage": "." +} diff --git a/samples/layouts/tile-manager/columngap/sandbox.config.json b/samples/layouts/tile-manager/columngap/sandbox.config.json new file mode 100644 index 000000000..5c5b54fe2 --- /dev/null +++ b/samples/layouts/tile-manager/columngap/sandbox.config.json @@ -0,0 +1,7 @@ +{ + "infiniteLoopProtection": false, + "hardReloadOnChange": false, + "view": "browser", + "template": "parcel" +} + \ No newline at end of file diff --git a/samples/layouts/tile-manager/columngap/src/index.css b/samples/layouts/tile-manager/columngap/src/index.css new file mode 100644 index 000000000..0fe936871 --- /dev/null +++ b/samples/layouts/tile-manager/columngap/src/index.css @@ -0,0 +1,2 @@ +/* shared styles are loaded from: */ +/* https://static.infragistics.com/xplatform/css/samples */ \ No newline at end of file diff --git a/samples/layouts/tile-manager/columngap/src/index.ts b/samples/layouts/tile-manager/columngap/src/index.ts new file mode 100644 index 000000000..d4c05a522 --- /dev/null +++ b/samples/layouts/tile-manager/columngap/src/index.ts @@ -0,0 +1,25 @@ +import { defineComponents, IgcTileManagerComponent, IgcInputComponent } from 'igniteui-webcomponents'; +import 'igniteui-webcomponents/themes/light/bootstrap.css'; +import './layout.css' + +defineComponents(IgcTileManagerComponent, IgcInputComponent); + +export class TileManagerColumn { + + constructor() { + const tileManager = document.querySelector("igc-tile-manager"); + document.addEventListener('igcChange', (e) => { + const fieldInput = e.target as IgcInputComponent; + if (tileManager) { + switch (fieldInput.label) { + case 'Columns Number': tileManager.columnCount = parseInt(fieldInput.value); + break; + case 'Gap Size': tileManager.gap = fieldInput.value; + break; + } + } + }) + } +} + +new TileManagerColumn(); diff --git a/samples/layouts/tile-manager/columngap/src/layout.css b/samples/layouts/tile-manager/columngap/src/layout.css new file mode 100644 index 000000000..274995b96 --- /dev/null +++ b/samples/layouts/tile-manager/columngap/src/layout.css @@ -0,0 +1,25 @@ +p { + font-size: 20px; + padding: 10px; +} + +.sample { + overflow: auto; +} + +igc-input { + width: min-content; + --ig-size: var(--ig-size-small); + margin-right: 50px; +} + +img { + height: 100%; + width: 100%; +} + +.inputWrapper{ + display: flex; + margin-left: 22px; + margin-bottom: 12px; +} diff --git a/samples/layouts/tile-manager/columngap/tsconfig.json b/samples/layouts/tile-manager/columngap/tsconfig.json new file mode 100644 index 000000000..de23257dd --- /dev/null +++ b/samples/layouts/tile-manager/columngap/tsconfig.json @@ -0,0 +1,20 @@ +{ + "compilerOptions": { + "noImplicitReturns": true, + "esModuleInterop": true, + "noImplicitAny": true, + "declarationDir": "dist/types", + "moduleResolution": "node", + "declaration": true, + "target": "es2015", + "module": "es2015", + "strict": true + }, + "include": [ + "src/**/*" + ], + "exclude": [ + "node_modules", + "dist" + ] +} \ No newline at end of file diff --git a/samples/layouts/tile-manager/columngap/webpack.config.js b/samples/layouts/tile-manager/columngap/webpack.config.js new file mode 100644 index 000000000..9d11a6155 --- /dev/null +++ b/samples/layouts/tile-manager/columngap/webpack.config.js @@ -0,0 +1,105 @@ +const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin'); +const HtmlWebpackPlugin = require('html-webpack-plugin'); +const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin'); +const path = require('path'); +const webpack = require('webpack'); + +module.exports = env => { + const nodeEnv = process.env.NODE_ENV || 'development'; + const isProd = nodeEnv === 'production'; + const isLegacy = !!process.env.legacy && !(process.env.legacy == "false"); + console.log(">> webpack nodeEnv=" + nodeEnv); + console.log(">> webpack isProd=" + isProd); + console.log(">> webpack isLegacy=" + isLegacy); + const presets = [ + ["@babel/preset-env", { + "useBuiltIns": "usage", + "corejs": 3, + "targets": { + "browsers": isLegacy ? ["defaults"] : [ + "last 2 Chrome versions", + "last 2 Safari versions", + "last 2 iOS versions", + "last 2 Firefox versions", + "last 2 Edge versions"] + } + }], + "@babel/preset-typescript" + ]; + + return { + entry: isLegacy ? [ + path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'), + path.resolve(__dirname, 'node_modules/@webcomponents/template'), + path.resolve(__dirname, 'src') + ] : path.resolve(__dirname, 'src'), + devtool: isProd ? false : 'source-map', + output: { + filename: isProd ? '[fullhash].bundle.js' : '[fullhash].bundle.js', + globalObject: 'this', + path: path.resolve(__dirname, 'dist'), + }, + + resolve: { + mainFields: ['esm2015', 'module', 'main'], + extensions: ['.ts', '.js', '.json'], + plugins: [new TsconfigPathsPlugin({ + configFile: './tsconfig.json', + extensions: ['.ts', '.js'], + mainFields: ['esm2015', 'module', 'main'] + })] + }, + + module: { + rules: [ + { test: /\.(png|svg|jpg|gif)$/, use: ['file-loader'] }, + { test: /\.(csv|tsv)$/, use: ['csv-loader'] }, + { test: /\.xml$/, use: ['xml-loader'] }, + { test: /\.css$/, sideEffects: true, use: ['style-loader', 'css-loader'] }, + { + test: /worker\.(ts|js)$/, + use: [ + { loader: 'worker-loader' }, + { + loader: 'babel-loader', options: { + "compact": isProd ? true : false, + "presets": presets, + "plugins": [ + "@babel/plugin-proposal-class-properties", + "@babel/plugin-transform-runtime" + ] + } + } + ] + }, + { + test: /\.(ts|js)$/, loader: 'babel-loader', + options: { + "compact": isProd ? true : false, + "presets": presets, + "plugins": [ + "@babel/plugin-proposal-class-properties", + "@babel/plugin-transform-runtime" + ] + }, + exclude: + function (modulePath) { + return /node_modules/.test(modulePath) && + !/igniteui-webcomponents/.test(modulePath) && + !/lit-html/.test(modulePath); + } + }], + }, + + plugins: [ + new webpack.DefinePlugin({ + 'process.env.NODE_ENV': JSON.stringify(nodeEnv) + }), + new HtmlWebpackPlugin({ + title: 'for-cs', + template: 'index.html' + }), + new ForkTsCheckerWebpackPlugin() + ] + }; +}; diff --git a/samples/layouts/tile-manager/dragndrop/.prettierrc b/samples/layouts/tile-manager/dragndrop/.prettierrc new file mode 100644 index 000000000..15a7c7c6c --- /dev/null +++ b/samples/layouts/tile-manager/dragndrop/.prettierrc @@ -0,0 +1,11 @@ +{ + "printWidth": 250, + "tabWidth": 4, + "useTabs": false, + "semi": true, + "singleQuote": false, + "trailingComma": "none", + "bracketSpacing": true, + "jsxBracketSameLine": false, + "fluid": false +} \ No newline at end of file diff --git a/samples/layouts/tile-manager/dragndrop/ReadMe.md b/samples/layouts/tile-manager/dragndrop/ReadMe.md new file mode 100644 index 000000000..eab96335a --- /dev/null +++ b/samples/layouts/tile-manager/dragndrop/ReadMe.md @@ -0,0 +1,56 @@ + + + +This folder contains implementation of Web Components application with example of Dragndrop feature using [Tile Manager](https://infragistics.com/webcomponentssite/components/general-getting-started.html) component. + + + + + + View Docs + + + View Code + + + Run Sample + + + Run Sample + + + + +## Branches + +> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-angular-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-angular-examples/tree/vnext) branch only when you want to contribute new samples to this repository. + +## Instructions + +To set up this project locally, execute these commands: + +``` +git clone https://github.com/IgniteUI/igniteui-wc-examples.git +git checkout master +cd ./igniteui-wc-examples +cd ./samples/layouts/tile-manager/dragndrop +``` + +open above folder in VS Code or type: +``` +code . +``` + +In terminal window, run: + +``` +npm install +npm run start +``` + +Then open http://localhost:4200/ in your browser + + +## Learn More + +To learn more about **Ignite UI for Web Components**, check out the [Web Components documentation](https://infragistics.com/webcomponentssite/components/general-getting-started.html). diff --git a/samples/layouts/tile-manager/dragndrop/index.html b/samples/layouts/tile-manager/dragndrop/index.html new file mode 100644 index 000000000..1eb272885 --- /dev/null +++ b/samples/layouts/tile-manager/dragndrop/index.html @@ -0,0 +1,53 @@ + + + + + Tile Manager Drag and drop + + + + + + + + + + +
+
+
+ + Tile-header + Tile + None + +
+ + + Tile 1 header +

Content for Tile 1

+ + + Tile 2 header +

Content for Tile 2

+ + + Tile 3 header +

Content for Tile 3

+ + + Tile 4 header +

Content for Tile 4

+ + +
+
+ + + <% if (false) { %> + + <% } %> + + + + \ No newline at end of file diff --git a/samples/layouts/tile-manager/dragndrop/package.json b/samples/layouts/tile-manager/dragndrop/package.json new file mode 100644 index 000000000..a74d015e9 --- /dev/null +++ b/samples/layouts/tile-manager/dragndrop/package.json @@ -0,0 +1,59 @@ +{ + "name": "wc-avatar-icon", + "version": "1.0.0", + "description": "This project provides example of Avatar Icon using IgniteUI for Web Components", + "main": "src/index.ts", + "scripts": { + "build": "npm run build:prod", + "build:dev": "webpack --mode development --config ./webpack.config.js --progress --color --display-error-details", + "build:prod": "webpack --env.NODE_ENV=production --mode production --config ./webpack.config.js --progress --color --display-error-details --bail", + "serve:dev": "node --max-old-space-size=8192 node_modules/webpack-dev-server/bin/webpack-dev-server.js --mode development --config ./webpack.config.js --hot --progress --open", + "serve:prod": "webpack-dev-server --env.NODE_ENV=production --mode production --config ./webpack.config.js --port 3000 --host 0.0.0.0 --hot --progress --open --content-base dist/", + "start": "npm run serve:dev", + "build:legacy": "npm run build:prod:legacy", + "build:dev:legacy": "webpack --env.legacy=true --mode development --config ./webpack.config.js --progress --color --display-error-details", + "build:prod:legacy": "webpack --env.NODE_ENV=production --env.legacy=true --mode production --config ./webpack.config.js --progress --color --display-error-details --bail", + "serve:dev:legacy": "node --max-old-space-size=8192 node_modules/webpack-dev-server/bin/webpack-dev-server.js --env.legacy=true --mode development --config ./webpack.config.js --hot --progress --open", + "serve:prod:legacy": "webpack-dev-server --env.NODE_ENV=production --env.legacy=true --mode production --config ./webpack.config.js --port 3000 --host 0.0.0.0 --hot --progress --open --content-base dist/", + "start:legacy": "npm run serve:dev:legacy" + }, + "author": "Infragistics", + "dependencies": { + "@webcomponents/custom-elements": "^1.4.1", + "@webcomponents/template": "^1.4.2", + "babel-runtime": "^6.26.0", + "core-js": "^3.6.5", + "igniteui-webcomponents": "5.3.0-RC.1", + "lit": "^3.2.0", + "lit-html": "^3.2.0", + "tslib": "^2.0.0" + }, + "devDependencies": { + "@babel/cli": "^7.8.3", + "@babel/core": "^7.8.3", + "@babel/plugin-proposal-class-properties": "^7.8.3", + "@babel/plugin-transform-runtime": "^7.10.0", + "@babel/preset-env": "^7.8.3", + "@babel/preset-typescript": "^7.8.3", + "@types/source-map": "^0.5.7", + "babel-loader": "^8.1.0", + "babel-plugin-transform-custom-element-classes": "^0.1.0", + "css-loader": "^1.0.0", + "csv-loader": "^3.0.2", + "file-loader": "^4.2.0", + "fork-ts-checker-webpack-plugin": "^4.1.5", + "html-webpack-plugin": "^4.3.0", + "parcel-bundler": "^1.6.1", + "source-map": "^0.7.3", + "style-loader": "^0.22.1", + "tsconfig-paths-webpack-plugin": "^4.0.0", + "typescript": "^4.4.4", + "webpack": "^5.96.1", + "webpack-cli": "^4.10.0", + "webpack-dev-server": "^4.11.1", + "worker-loader": "^3.0.8", + "xml-loader": "^1.2.1" + }, + "license": "", + "homepage": "." +} diff --git a/samples/layouts/tile-manager/dragndrop/sandbox.config.json b/samples/layouts/tile-manager/dragndrop/sandbox.config.json new file mode 100644 index 000000000..5c5b54fe2 --- /dev/null +++ b/samples/layouts/tile-manager/dragndrop/sandbox.config.json @@ -0,0 +1,7 @@ +{ + "infiniteLoopProtection": false, + "hardReloadOnChange": false, + "view": "browser", + "template": "parcel" +} + \ No newline at end of file diff --git a/samples/layouts/tile-manager/dragndrop/src/index.css b/samples/layouts/tile-manager/dragndrop/src/index.css new file mode 100644 index 000000000..0fe936871 --- /dev/null +++ b/samples/layouts/tile-manager/dragndrop/src/index.css @@ -0,0 +1,2 @@ +/* shared styles are loaded from: */ +/* https://static.infragistics.com/xplatform/css/samples */ \ No newline at end of file diff --git a/samples/layouts/tile-manager/dragndrop/src/index.ts b/samples/layouts/tile-manager/dragndrop/src/index.ts new file mode 100644 index 000000000..5ce50e0cf --- /dev/null +++ b/samples/layouts/tile-manager/dragndrop/src/index.ts @@ -0,0 +1,23 @@ +import { defineComponents, IgcTileManagerComponent, IgcRadioGroupComponent, IgcRadioComponent } from 'igniteui-webcomponents'; +import 'igniteui-webcomponents/themes/light/bootstrap.css'; +import './layout.css' + +defineComponents(IgcTileManagerComponent, IgcRadioGroupComponent, IgcRadioComponent); + +export class TileManagerDragnDrop { + constructor() { + document.addEventListener('igcChange', (e) => { + const radio = e.target as IgcRadioComponent; + switch (radio.value) { + case 'TileHeader': document.querySelector("igc-tile-manager")?.setAttribute("drag-mode", "tile-header"); + break; + case 'Tile': document.querySelector("igc-tile-manager")?.setAttribute("drag-mode", "tile"); + break; + case 'None': document.querySelector("igc-tile-manager")?.setAttribute("drag-mode", "none"); + break; + } + }) + } +} + +new TileManagerDragnDrop(); diff --git a/samples/layouts/tile-manager/dragndrop/src/layout.css b/samples/layouts/tile-manager/dragndrop/src/layout.css new file mode 100644 index 000000000..27df917d7 --- /dev/null +++ b/samples/layouts/tile-manager/dragndrop/src/layout.css @@ -0,0 +1,30 @@ + span{ + font-size: 30px; +} + +igc-tile::part(header) { + border-bottom: 2px solid var(--ig-primary-700); +} + +p { + font-size: 18px; + margin-left: 20px; + padding-top: 10px; +} + +igc-radio-group { + margin-left: 22px; + width: fit-content; + padding: 4px 15px; + margin-bottom: 8px; + border: 2px solid var(--ig-primary-700); + background-color: var(--ig-gray-300); +} + +igc-tile::part(dragging) { + color: yellow; +} + +.radioWrapper { + display: flex; +} diff --git a/samples/layouts/tile-manager/dragndrop/tsconfig.json b/samples/layouts/tile-manager/dragndrop/tsconfig.json new file mode 100644 index 000000000..de23257dd --- /dev/null +++ b/samples/layouts/tile-manager/dragndrop/tsconfig.json @@ -0,0 +1,20 @@ +{ + "compilerOptions": { + "noImplicitReturns": true, + "esModuleInterop": true, + "noImplicitAny": true, + "declarationDir": "dist/types", + "moduleResolution": "node", + "declaration": true, + "target": "es2015", + "module": "es2015", + "strict": true + }, + "include": [ + "src/**/*" + ], + "exclude": [ + "node_modules", + "dist" + ] +} \ No newline at end of file diff --git a/samples/layouts/tile-manager/dragndrop/webpack.config.js b/samples/layouts/tile-manager/dragndrop/webpack.config.js new file mode 100644 index 000000000..9d11a6155 --- /dev/null +++ b/samples/layouts/tile-manager/dragndrop/webpack.config.js @@ -0,0 +1,105 @@ +const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin'); +const HtmlWebpackPlugin = require('html-webpack-plugin'); +const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin'); +const path = require('path'); +const webpack = require('webpack'); + +module.exports = env => { + const nodeEnv = process.env.NODE_ENV || 'development'; + const isProd = nodeEnv === 'production'; + const isLegacy = !!process.env.legacy && !(process.env.legacy == "false"); + console.log(">> webpack nodeEnv=" + nodeEnv); + console.log(">> webpack isProd=" + isProd); + console.log(">> webpack isLegacy=" + isLegacy); + const presets = [ + ["@babel/preset-env", { + "useBuiltIns": "usage", + "corejs": 3, + "targets": { + "browsers": isLegacy ? ["defaults"] : [ + "last 2 Chrome versions", + "last 2 Safari versions", + "last 2 iOS versions", + "last 2 Firefox versions", + "last 2 Edge versions"] + } + }], + "@babel/preset-typescript" + ]; + + return { + entry: isLegacy ? [ + path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'), + path.resolve(__dirname, 'node_modules/@webcomponents/template'), + path.resolve(__dirname, 'src') + ] : path.resolve(__dirname, 'src'), + devtool: isProd ? false : 'source-map', + output: { + filename: isProd ? '[fullhash].bundle.js' : '[fullhash].bundle.js', + globalObject: 'this', + path: path.resolve(__dirname, 'dist'), + }, + + resolve: { + mainFields: ['esm2015', 'module', 'main'], + extensions: ['.ts', '.js', '.json'], + plugins: [new TsconfigPathsPlugin({ + configFile: './tsconfig.json', + extensions: ['.ts', '.js'], + mainFields: ['esm2015', 'module', 'main'] + })] + }, + + module: { + rules: [ + { test: /\.(png|svg|jpg|gif)$/, use: ['file-loader'] }, + { test: /\.(csv|tsv)$/, use: ['csv-loader'] }, + { test: /\.xml$/, use: ['xml-loader'] }, + { test: /\.css$/, sideEffects: true, use: ['style-loader', 'css-loader'] }, + { + test: /worker\.(ts|js)$/, + use: [ + { loader: 'worker-loader' }, + { + loader: 'babel-loader', options: { + "compact": isProd ? true : false, + "presets": presets, + "plugins": [ + "@babel/plugin-proposal-class-properties", + "@babel/plugin-transform-runtime" + ] + } + } + ] + }, + { + test: /\.(ts|js)$/, loader: 'babel-loader', + options: { + "compact": isProd ? true : false, + "presets": presets, + "plugins": [ + "@babel/plugin-proposal-class-properties", + "@babel/plugin-transform-runtime" + ] + }, + exclude: + function (modulePath) { + return /node_modules/.test(modulePath) && + !/igniteui-webcomponents/.test(modulePath) && + !/lit-html/.test(modulePath); + } + }], + }, + + plugins: [ + new webpack.DefinePlugin({ + 'process.env.NODE_ENV': JSON.stringify(nodeEnv) + }), + new HtmlWebpackPlugin({ + title: 'for-cs', + template: 'index.html' + }), + new ForkTsCheckerWebpackPlugin() + ] + }; +}; diff --git a/samples/layouts/tile-manager/layout/.prettierrc b/samples/layouts/tile-manager/layout/.prettierrc new file mode 100644 index 000000000..15a7c7c6c --- /dev/null +++ b/samples/layouts/tile-manager/layout/.prettierrc @@ -0,0 +1,11 @@ +{ + "printWidth": 250, + "tabWidth": 4, + "useTabs": false, + "semi": true, + "singleQuote": false, + "trailingComma": "none", + "bracketSpacing": true, + "jsxBracketSameLine": false, + "fluid": false +} \ No newline at end of file diff --git a/samples/layouts/tile-manager/layout/ReadMe.md b/samples/layouts/tile-manager/layout/ReadMe.md new file mode 100644 index 000000000..c4728769a --- /dev/null +++ b/samples/layouts/tile-manager/layout/ReadMe.md @@ -0,0 +1,56 @@ + + + +This folder contains implementation of Web Components application with example of Layout feature using [Tile Manager](https://infragistics.com/webcomponentssite/components/general-getting-started.html) component. + + + + + + View Docs + + + View Code + + + Run Sample + + + Run Sample + + + + +## Branches + +> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-angular-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-angular-examples/tree/vnext) branch only when you want to contribute new samples to this repository. + +## Instructions + +To set up this project locally, execute these commands: + +``` +git clone https://github.com/IgniteUI/igniteui-wc-examples.git +git checkout master +cd ./igniteui-wc-examples +cd ./samples/layouts/tile-manager/layout +``` + +open above folder in VS Code or type: +``` +code . +``` + +In terminal window, run: + +``` +npm install +npm run start +``` + +Then open http://localhost:4200/ in your browser + + +## Learn More + +To learn more about **Ignite UI for Web Components**, check out the [Web Components documentation](https://infragistics.com/webcomponentssite/components/general-getting-started.html). diff --git a/samples/layouts/tile-manager/layout/index.html b/samples/layouts/tile-manager/layout/index.html new file mode 100644 index 000000000..6bb5cf018 --- /dev/null +++ b/samples/layouts/tile-manager/layout/index.html @@ -0,0 +1,52 @@ + + + + + Tile Manager Layout + + + + + + + + + + +
+
+
+ Save Layout + Load Layout + Add Tile + Remove Tile +
+ + + Tile 1 header +

Content for Tile 1

+ + + Tile 2 header +

Content for Tile 2

+ + + Tile 3 header +

Content for Tile 3

+ + + Tile 4 header +

Content for Tile 4

+ + +
+
+ + + <% if (false) { %> + + <% } %> + + + + \ No newline at end of file diff --git a/samples/layouts/tile-manager/layout/package.json b/samples/layouts/tile-manager/layout/package.json new file mode 100644 index 000000000..a74d015e9 --- /dev/null +++ b/samples/layouts/tile-manager/layout/package.json @@ -0,0 +1,59 @@ +{ + "name": "wc-avatar-icon", + "version": "1.0.0", + "description": "This project provides example of Avatar Icon using IgniteUI for Web Components", + "main": "src/index.ts", + "scripts": { + "build": "npm run build:prod", + "build:dev": "webpack --mode development --config ./webpack.config.js --progress --color --display-error-details", + "build:prod": "webpack --env.NODE_ENV=production --mode production --config ./webpack.config.js --progress --color --display-error-details --bail", + "serve:dev": "node --max-old-space-size=8192 node_modules/webpack-dev-server/bin/webpack-dev-server.js --mode development --config ./webpack.config.js --hot --progress --open", + "serve:prod": "webpack-dev-server --env.NODE_ENV=production --mode production --config ./webpack.config.js --port 3000 --host 0.0.0.0 --hot --progress --open --content-base dist/", + "start": "npm run serve:dev", + "build:legacy": "npm run build:prod:legacy", + "build:dev:legacy": "webpack --env.legacy=true --mode development --config ./webpack.config.js --progress --color --display-error-details", + "build:prod:legacy": "webpack --env.NODE_ENV=production --env.legacy=true --mode production --config ./webpack.config.js --progress --color --display-error-details --bail", + "serve:dev:legacy": "node --max-old-space-size=8192 node_modules/webpack-dev-server/bin/webpack-dev-server.js --env.legacy=true --mode development --config ./webpack.config.js --hot --progress --open", + "serve:prod:legacy": "webpack-dev-server --env.NODE_ENV=production --env.legacy=true --mode production --config ./webpack.config.js --port 3000 --host 0.0.0.0 --hot --progress --open --content-base dist/", + "start:legacy": "npm run serve:dev:legacy" + }, + "author": "Infragistics", + "dependencies": { + "@webcomponents/custom-elements": "^1.4.1", + "@webcomponents/template": "^1.4.2", + "babel-runtime": "^6.26.0", + "core-js": "^3.6.5", + "igniteui-webcomponents": "5.3.0-RC.1", + "lit": "^3.2.0", + "lit-html": "^3.2.0", + "tslib": "^2.0.0" + }, + "devDependencies": { + "@babel/cli": "^7.8.3", + "@babel/core": "^7.8.3", + "@babel/plugin-proposal-class-properties": "^7.8.3", + "@babel/plugin-transform-runtime": "^7.10.0", + "@babel/preset-env": "^7.8.3", + "@babel/preset-typescript": "^7.8.3", + "@types/source-map": "^0.5.7", + "babel-loader": "^8.1.0", + "babel-plugin-transform-custom-element-classes": "^0.1.0", + "css-loader": "^1.0.0", + "csv-loader": "^3.0.2", + "file-loader": "^4.2.0", + "fork-ts-checker-webpack-plugin": "^4.1.5", + "html-webpack-plugin": "^4.3.0", + "parcel-bundler": "^1.6.1", + "source-map": "^0.7.3", + "style-loader": "^0.22.1", + "tsconfig-paths-webpack-plugin": "^4.0.0", + "typescript": "^4.4.4", + "webpack": "^5.96.1", + "webpack-cli": "^4.10.0", + "webpack-dev-server": "^4.11.1", + "worker-loader": "^3.0.8", + "xml-loader": "^1.2.1" + }, + "license": "", + "homepage": "." +} diff --git a/samples/layouts/tile-manager/layout/sandbox.config.json b/samples/layouts/tile-manager/layout/sandbox.config.json new file mode 100644 index 000000000..5c5b54fe2 --- /dev/null +++ b/samples/layouts/tile-manager/layout/sandbox.config.json @@ -0,0 +1,7 @@ +{ + "infiniteLoopProtection": false, + "hardReloadOnChange": false, + "view": "browser", + "template": "parcel" +} + \ No newline at end of file diff --git a/samples/layouts/tile-manager/layout/src/index.css b/samples/layouts/tile-manager/layout/src/index.css new file mode 100644 index 000000000..0fe936871 --- /dev/null +++ b/samples/layouts/tile-manager/layout/src/index.css @@ -0,0 +1,2 @@ +/* shared styles are loaded from: */ +/* https://static.infragistics.com/xplatform/css/samples */ \ No newline at end of file diff --git a/samples/layouts/tile-manager/layout/src/index.ts b/samples/layouts/tile-manager/layout/src/index.ts new file mode 100644 index 000000000..c87278a4c --- /dev/null +++ b/samples/layouts/tile-manager/layout/src/index.ts @@ -0,0 +1,53 @@ +import { defineComponents, IgcTileManagerComponent, IgcButtonComponent, IgcButtonGroupComponent } from 'igniteui-webcomponents'; +import 'igniteui-webcomponents/themes/light/bootstrap.css'; +import './layout.css' + +defineComponents(IgcTileManagerComponent, IgcButtonComponent, IgcButtonGroupComponent); + +export class TileManagerLayout { + + constructor() { + let serializedData: string; + let index = 4; + var tileManager = document.querySelector('#tile-manager1')!; + + document.querySelector('#saveL')?.addEventListener('click', () => { + const tileManager = + document.querySelector('#tile-manager1')!; + + serializedData = tileManager.saveLayout(); + }) + + document.querySelector('#loadL')?.addEventListener('click', () => { + const tileManager = + document.querySelector('#tile-manager1')!; + + tileManager.loadLayout(serializedData); + }) + + document.querySelector('#addT')?.addEventListener('click', () => { + const tiles = tileManager.querySelectorAll('igc-tile'); + const newTile = document.createElement('igc-tile'); + const contentHeader = document.createElement('span'); + const content = document.createElement('p'); + index++; + contentHeader.textContent = `Tile ${index} header`; + content.textContent = `Content for Tile ${index}`; + contentHeader.setAttribute('slot', 'title'); + newTile.position = 0; + newTile.append(contentHeader); + newTile.append(content); + tileManager.insertBefore(newTile, tiles[3]); + }) + + document.querySelector('#remT')?.addEventListener('click', () => { + const firstTile = tileManager.querySelector('igc-tile:first-of-type'); + + if (firstTile) { + firstTile.remove(); + } + }) + } +} + +new TileManagerLayout(); diff --git a/samples/layouts/tile-manager/layout/src/layout.css b/samples/layouts/tile-manager/layout/src/layout.css new file mode 100644 index 000000000..b6a48ad93 --- /dev/null +++ b/samples/layouts/tile-manager/layout/src/layout.css @@ -0,0 +1,21 @@ +span{ + font-size: 30px; +} + +p { + font-size: 18px; + margin-left: 20px; +} + +.btnWrapper { + margin: 0 0 8px 22px; +} + +igc-button:nth-of-type(-n+3) { + margin-right: 5px;; +} + +.sample { + overflow: auto; +} + \ No newline at end of file diff --git a/samples/layouts/tile-manager/layout/tsconfig.json b/samples/layouts/tile-manager/layout/tsconfig.json new file mode 100644 index 000000000..de23257dd --- /dev/null +++ b/samples/layouts/tile-manager/layout/tsconfig.json @@ -0,0 +1,20 @@ +{ + "compilerOptions": { + "noImplicitReturns": true, + "esModuleInterop": true, + "noImplicitAny": true, + "declarationDir": "dist/types", + "moduleResolution": "node", + "declaration": true, + "target": "es2015", + "module": "es2015", + "strict": true + }, + "include": [ + "src/**/*" + ], + "exclude": [ + "node_modules", + "dist" + ] +} \ No newline at end of file diff --git a/samples/layouts/tile-manager/layout/webpack.config.js b/samples/layouts/tile-manager/layout/webpack.config.js new file mode 100644 index 000000000..9d11a6155 --- /dev/null +++ b/samples/layouts/tile-manager/layout/webpack.config.js @@ -0,0 +1,105 @@ +const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin'); +const HtmlWebpackPlugin = require('html-webpack-plugin'); +const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin'); +const path = require('path'); +const webpack = require('webpack'); + +module.exports = env => { + const nodeEnv = process.env.NODE_ENV || 'development'; + const isProd = nodeEnv === 'production'; + const isLegacy = !!process.env.legacy && !(process.env.legacy == "false"); + console.log(">> webpack nodeEnv=" + nodeEnv); + console.log(">> webpack isProd=" + isProd); + console.log(">> webpack isLegacy=" + isLegacy); + const presets = [ + ["@babel/preset-env", { + "useBuiltIns": "usage", + "corejs": 3, + "targets": { + "browsers": isLegacy ? ["defaults"] : [ + "last 2 Chrome versions", + "last 2 Safari versions", + "last 2 iOS versions", + "last 2 Firefox versions", + "last 2 Edge versions"] + } + }], + "@babel/preset-typescript" + ]; + + return { + entry: isLegacy ? [ + path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'), + path.resolve(__dirname, 'node_modules/@webcomponents/template'), + path.resolve(__dirname, 'src') + ] : path.resolve(__dirname, 'src'), + devtool: isProd ? false : 'source-map', + output: { + filename: isProd ? '[fullhash].bundle.js' : '[fullhash].bundle.js', + globalObject: 'this', + path: path.resolve(__dirname, 'dist'), + }, + + resolve: { + mainFields: ['esm2015', 'module', 'main'], + extensions: ['.ts', '.js', '.json'], + plugins: [new TsconfigPathsPlugin({ + configFile: './tsconfig.json', + extensions: ['.ts', '.js'], + mainFields: ['esm2015', 'module', 'main'] + })] + }, + + module: { + rules: [ + { test: /\.(png|svg|jpg|gif)$/, use: ['file-loader'] }, + { test: /\.(csv|tsv)$/, use: ['csv-loader'] }, + { test: /\.xml$/, use: ['xml-loader'] }, + { test: /\.css$/, sideEffects: true, use: ['style-loader', 'css-loader'] }, + { + test: /worker\.(ts|js)$/, + use: [ + { loader: 'worker-loader' }, + { + loader: 'babel-loader', options: { + "compact": isProd ? true : false, + "presets": presets, + "plugins": [ + "@babel/plugin-proposal-class-properties", + "@babel/plugin-transform-runtime" + ] + } + } + ] + }, + { + test: /\.(ts|js)$/, loader: 'babel-loader', + options: { + "compact": isProd ? true : false, + "presets": presets, + "plugins": [ + "@babel/plugin-proposal-class-properties", + "@babel/plugin-transform-runtime" + ] + }, + exclude: + function (modulePath) { + return /node_modules/.test(modulePath) && + !/igniteui-webcomponents/.test(modulePath) && + !/lit-html/.test(modulePath); + } + }], + }, + + plugins: [ + new webpack.DefinePlugin({ + 'process.env.NODE_ENV': JSON.stringify(nodeEnv) + }), + new HtmlWebpackPlugin({ + title: 'for-cs', + template: 'index.html' + }), + new ForkTsCheckerWebpackPlugin() + ] + }; +}; diff --git a/samples/layouts/tile-manager/overview/.prettierrc b/samples/layouts/tile-manager/overview/.prettierrc new file mode 100644 index 000000000..15a7c7c6c --- /dev/null +++ b/samples/layouts/tile-manager/overview/.prettierrc @@ -0,0 +1,11 @@ +{ + "printWidth": 250, + "tabWidth": 4, + "useTabs": false, + "semi": true, + "singleQuote": false, + "trailingComma": "none", + "bracketSpacing": true, + "jsxBracketSameLine": false, + "fluid": false +} \ No newline at end of file diff --git a/samples/layouts/tile-manager/overview/ReadMe.md b/samples/layouts/tile-manager/overview/ReadMe.md new file mode 100644 index 000000000..c5376311d --- /dev/null +++ b/samples/layouts/tile-manager/overview/ReadMe.md @@ -0,0 +1,56 @@ + + + +This folder contains implementation of Web Components application with example of Overview feature using [Tile Manager](https://infragistics.com/webcomponentssite/components/general-getting-started.html) component. + + + + + + View Docs + + + View Code + + + Run Sample + + + Run Sample + + + + +## Branches + +> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-angular-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-angular-examples/tree/vnext) branch only when you want to contribute new samples to this repository. + +## Instructions + +To set up this project locally, execute these commands: + +``` +git clone https://github.com/IgniteUI/igniteui-wc-examples.git +git checkout master +cd ./igniteui-wc-examples +cd ./samples/layouts/tile-manager/overview +``` + +open above folder in VS Code or type: +``` +code . +``` + +In terminal window, run: + +``` +npm install +npm run start +``` + +Then open http://localhost:4200/ in your browser + + +## Learn More + +To learn more about **Ignite UI for Web Components**, check out the [Web Components documentation](https://infragistics.com/webcomponentssite/components/general-getting-started.html). diff --git a/samples/layouts/tile-manager/overview/index.html b/samples/layouts/tile-manager/overview/index.html new file mode 100644 index 000000000..e3e081e23 --- /dev/null +++ b/samples/layouts/tile-manager/overview/index.html @@ -0,0 +1,189 @@ + + + + + Tile Manager Overview + + + + + + + + + + +
+
+ + + + +

Order info

+ + + + + +
+

OrderID

+

10293

+
+ + + + + +
+

Customer Name

+

Tortuga Restaurante

+
+ + + + + +
+

Order Date

+

August 29, 1996

+
+ + + + + +
+

Shipped Date

+

September 11, 1996

+
+ + + + + +
+

Product Name

+

Carnavon Tigers

+
+ + + + + +
+

Ship Country

+

Mexico

+
+ + + + + +

Order Line Items

+
+ +
+ +
+ + + +
+

Carnavon Tigers

+ + +
+ Quantity 12 +
+
+ Unit Price $50 +
+ +
+ + +
+ +
+ + + +
+

Guarana Fantastica

+ + +
+ Quantity 10 +
+
+ Unit Price $4 +
+ +
+ + +
+ +
+ + + +
+

Vegie-spread

+ + +
+ Quantity 5 +
+
+ Unit Price $35 +
+ +
+ + +
+ +
+ + + +
+

Rhonbrau Klosterbier

+ + +
+ Quantity 7 +
+
+ Unit Price $6 +
+ +
+ +
+ + +

Order Value

+
+

$8.66K

+
+ + +

Item quantity

+
+

4

+
+ + +
+
+ + + <% if (false) { %> + + <% } %> + + + + \ No newline at end of file diff --git a/samples/layouts/tile-manager/overview/package.json b/samples/layouts/tile-manager/overview/package.json new file mode 100644 index 000000000..a74d015e9 --- /dev/null +++ b/samples/layouts/tile-manager/overview/package.json @@ -0,0 +1,59 @@ +{ + "name": "wc-avatar-icon", + "version": "1.0.0", + "description": "This project provides example of Avatar Icon using IgniteUI for Web Components", + "main": "src/index.ts", + "scripts": { + "build": "npm run build:prod", + "build:dev": "webpack --mode development --config ./webpack.config.js --progress --color --display-error-details", + "build:prod": "webpack --env.NODE_ENV=production --mode production --config ./webpack.config.js --progress --color --display-error-details --bail", + "serve:dev": "node --max-old-space-size=8192 node_modules/webpack-dev-server/bin/webpack-dev-server.js --mode development --config ./webpack.config.js --hot --progress --open", + "serve:prod": "webpack-dev-server --env.NODE_ENV=production --mode production --config ./webpack.config.js --port 3000 --host 0.0.0.0 --hot --progress --open --content-base dist/", + "start": "npm run serve:dev", + "build:legacy": "npm run build:prod:legacy", + "build:dev:legacy": "webpack --env.legacy=true --mode development --config ./webpack.config.js --progress --color --display-error-details", + "build:prod:legacy": "webpack --env.NODE_ENV=production --env.legacy=true --mode production --config ./webpack.config.js --progress --color --display-error-details --bail", + "serve:dev:legacy": "node --max-old-space-size=8192 node_modules/webpack-dev-server/bin/webpack-dev-server.js --env.legacy=true --mode development --config ./webpack.config.js --hot --progress --open", + "serve:prod:legacy": "webpack-dev-server --env.NODE_ENV=production --env.legacy=true --mode production --config ./webpack.config.js --port 3000 --host 0.0.0.0 --hot --progress --open --content-base dist/", + "start:legacy": "npm run serve:dev:legacy" + }, + "author": "Infragistics", + "dependencies": { + "@webcomponents/custom-elements": "^1.4.1", + "@webcomponents/template": "^1.4.2", + "babel-runtime": "^6.26.0", + "core-js": "^3.6.5", + "igniteui-webcomponents": "5.3.0-RC.1", + "lit": "^3.2.0", + "lit-html": "^3.2.0", + "tslib": "^2.0.0" + }, + "devDependencies": { + "@babel/cli": "^7.8.3", + "@babel/core": "^7.8.3", + "@babel/plugin-proposal-class-properties": "^7.8.3", + "@babel/plugin-transform-runtime": "^7.10.0", + "@babel/preset-env": "^7.8.3", + "@babel/preset-typescript": "^7.8.3", + "@types/source-map": "^0.5.7", + "babel-loader": "^8.1.0", + "babel-plugin-transform-custom-element-classes": "^0.1.0", + "css-loader": "^1.0.0", + "csv-loader": "^3.0.2", + "file-loader": "^4.2.0", + "fork-ts-checker-webpack-plugin": "^4.1.5", + "html-webpack-plugin": "^4.3.0", + "parcel-bundler": "^1.6.1", + "source-map": "^0.7.3", + "style-loader": "^0.22.1", + "tsconfig-paths-webpack-plugin": "^4.0.0", + "typescript": "^4.4.4", + "webpack": "^5.96.1", + "webpack-cli": "^4.10.0", + "webpack-dev-server": "^4.11.1", + "worker-loader": "^3.0.8", + "xml-loader": "^1.2.1" + }, + "license": "", + "homepage": "." +} diff --git a/samples/layouts/tile-manager/overview/sandbox.config.json b/samples/layouts/tile-manager/overview/sandbox.config.json new file mode 100644 index 000000000..5c5b54fe2 --- /dev/null +++ b/samples/layouts/tile-manager/overview/sandbox.config.json @@ -0,0 +1,7 @@ +{ + "infiniteLoopProtection": false, + "hardReloadOnChange": false, + "view": "browser", + "template": "parcel" +} + \ No newline at end of file diff --git a/samples/layouts/tile-manager/overview/src/index.css b/samples/layouts/tile-manager/overview/src/index.css new file mode 100644 index 000000000..0fe936871 --- /dev/null +++ b/samples/layouts/tile-manager/overview/src/index.css @@ -0,0 +1,2 @@ +/* shared styles are loaded from: */ +/* https://static.infragistics.com/xplatform/css/samples */ \ No newline at end of file diff --git a/samples/layouts/tile-manager/overview/src/index.ts b/samples/layouts/tile-manager/overview/src/index.ts new file mode 100644 index 000000000..c0e0de72d --- /dev/null +++ b/samples/layouts/tile-manager/overview/src/index.ts @@ -0,0 +1,24 @@ +import { defineComponents, IgcAvatarComponent, IgcCardComponent, IgcListComponent, IgcTileManagerComponent, IgcIconComponent, registerIcon, registerIconFromText } from 'igniteui-webcomponents'; +import 'igniteui-webcomponents/themes/light/bootstrap.css'; +import './layout.css' + +defineComponents(IgcTileManagerComponent, IgcListComponent, IgcAvatarComponent, IgcCardComponent, IgcIconComponent); + +export class TileManagerOverview { + constructor() { + const listIcon = + ''; + + const calendarIcon = + '' + + const productIcon = + '' + + registerIconFromText("list", listIcon, "material"); + registerIconFromText("calendar", calendarIcon, "material"); + registerIconFromText("product", productIcon, "material"); + } +} + +new TileManagerOverview(); diff --git a/samples/layouts/tile-manager/overview/src/layout.css b/samples/layouts/tile-manager/overview/src/layout.css new file mode 100644 index 000000000..b8d4ee12d --- /dev/null +++ b/samples/layouts/tile-manager/overview/src/layout.css @@ -0,0 +1,39 @@ +igc-tile-manager { + margin-bottom: 5px; +} + +.group { + display: flex; + flex-direction: row; + flex-wrap: wrap; + margin-top: 15px; + +} + +.card { + min-height: 30px; + width: calc(50% - 30px); + margin: 0 15px 15px 15px +} + +igc-card-content { + color: var(--content-text-color); +} + +.body-content { + width: 100%; + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; +} + +.string { + text-align: center; + margin-top: 50px; + color: var(--ig-gray-800); +} + +.sample { + overflow: auto; +} \ No newline at end of file diff --git a/samples/layouts/tile-manager/overview/tsconfig.json b/samples/layouts/tile-manager/overview/tsconfig.json new file mode 100644 index 000000000..de23257dd --- /dev/null +++ b/samples/layouts/tile-manager/overview/tsconfig.json @@ -0,0 +1,20 @@ +{ + "compilerOptions": { + "noImplicitReturns": true, + "esModuleInterop": true, + "noImplicitAny": true, + "declarationDir": "dist/types", + "moduleResolution": "node", + "declaration": true, + "target": "es2015", + "module": "es2015", + "strict": true + }, + "include": [ + "src/**/*" + ], + "exclude": [ + "node_modules", + "dist" + ] +} \ No newline at end of file diff --git a/samples/layouts/tile-manager/overview/webpack.config.js b/samples/layouts/tile-manager/overview/webpack.config.js new file mode 100644 index 000000000..9d11a6155 --- /dev/null +++ b/samples/layouts/tile-manager/overview/webpack.config.js @@ -0,0 +1,105 @@ +const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin'); +const HtmlWebpackPlugin = require('html-webpack-plugin'); +const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin'); +const path = require('path'); +const webpack = require('webpack'); + +module.exports = env => { + const nodeEnv = process.env.NODE_ENV || 'development'; + const isProd = nodeEnv === 'production'; + const isLegacy = !!process.env.legacy && !(process.env.legacy == "false"); + console.log(">> webpack nodeEnv=" + nodeEnv); + console.log(">> webpack isProd=" + isProd); + console.log(">> webpack isLegacy=" + isLegacy); + const presets = [ + ["@babel/preset-env", { + "useBuiltIns": "usage", + "corejs": 3, + "targets": { + "browsers": isLegacy ? ["defaults"] : [ + "last 2 Chrome versions", + "last 2 Safari versions", + "last 2 iOS versions", + "last 2 Firefox versions", + "last 2 Edge versions"] + } + }], + "@babel/preset-typescript" + ]; + + return { + entry: isLegacy ? [ + path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'), + path.resolve(__dirname, 'node_modules/@webcomponents/template'), + path.resolve(__dirname, 'src') + ] : path.resolve(__dirname, 'src'), + devtool: isProd ? false : 'source-map', + output: { + filename: isProd ? '[fullhash].bundle.js' : '[fullhash].bundle.js', + globalObject: 'this', + path: path.resolve(__dirname, 'dist'), + }, + + resolve: { + mainFields: ['esm2015', 'module', 'main'], + extensions: ['.ts', '.js', '.json'], + plugins: [new TsconfigPathsPlugin({ + configFile: './tsconfig.json', + extensions: ['.ts', '.js'], + mainFields: ['esm2015', 'module', 'main'] + })] + }, + + module: { + rules: [ + { test: /\.(png|svg|jpg|gif)$/, use: ['file-loader'] }, + { test: /\.(csv|tsv)$/, use: ['csv-loader'] }, + { test: /\.xml$/, use: ['xml-loader'] }, + { test: /\.css$/, sideEffects: true, use: ['style-loader', 'css-loader'] }, + { + test: /worker\.(ts|js)$/, + use: [ + { loader: 'worker-loader' }, + { + loader: 'babel-loader', options: { + "compact": isProd ? true : false, + "presets": presets, + "plugins": [ + "@babel/plugin-proposal-class-properties", + "@babel/plugin-transform-runtime" + ] + } + } + ] + }, + { + test: /\.(ts|js)$/, loader: 'babel-loader', + options: { + "compact": isProd ? true : false, + "presets": presets, + "plugins": [ + "@babel/plugin-proposal-class-properties", + "@babel/plugin-transform-runtime" + ] + }, + exclude: + function (modulePath) { + return /node_modules/.test(modulePath) && + !/igniteui-webcomponents/.test(modulePath) && + !/lit-html/.test(modulePath); + } + }], + }, + + plugins: [ + new webpack.DefinePlugin({ + 'process.env.NODE_ENV': JSON.stringify(nodeEnv) + }), + new HtmlWebpackPlugin({ + title: 'for-cs', + template: 'index.html' + }), + new ForkTsCheckerWebpackPlugin() + ] + }; +}; diff --git a/samples/layouts/tile-manager/resize/.prettierrc b/samples/layouts/tile-manager/resize/.prettierrc new file mode 100644 index 000000000..15a7c7c6c --- /dev/null +++ b/samples/layouts/tile-manager/resize/.prettierrc @@ -0,0 +1,11 @@ +{ + "printWidth": 250, + "tabWidth": 4, + "useTabs": false, + "semi": true, + "singleQuote": false, + "trailingComma": "none", + "bracketSpacing": true, + "jsxBracketSameLine": false, + "fluid": false +} \ No newline at end of file diff --git a/samples/layouts/tile-manager/resize/ReadMe.md b/samples/layouts/tile-manager/resize/ReadMe.md new file mode 100644 index 000000000..7f0aac25e --- /dev/null +++ b/samples/layouts/tile-manager/resize/ReadMe.md @@ -0,0 +1,56 @@ + + + +This folder contains implementation of Web Components application with example of Resize feature using [Tile Manager](https://infragistics.com/webcomponentssite/components/general-getting-started.html) component. + + + + + + View Docs + + + View Code + + + Run Sample + + + Run Sample + + + + +## Branches + +> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-angular-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-angular-examples/tree/vnext) branch only when you want to contribute new samples to this repository. + +## Instructions + +To set up this project locally, execute these commands: + +``` +git clone https://github.com/IgniteUI/igniteui-wc-examples.git +git checkout master +cd ./igniteui-wc-examples +cd ./samples/layouts/tile-manager/resize +``` + +open above folder in VS Code or type: +``` +code . +``` + +In terminal window, run: + +``` +npm install +npm run start +``` + +Then open http://localhost:4200/ in your browser + + +## Learn More + +To learn more about **Ignite UI for Web Components**, check out the [Web Components documentation](https://infragistics.com/webcomponentssite/components/general-getting-started.html). diff --git a/samples/layouts/tile-manager/resize/index.html b/samples/layouts/tile-manager/resize/index.html new file mode 100644 index 000000000..6148b017e --- /dev/null +++ b/samples/layouts/tile-manager/resize/index.html @@ -0,0 +1,55 @@ + + + + + Tile Manager Resize + + + + + + + + + + +
+
+
+ + Always + Hover + None + + + +
+ + + Tile 1 header +

Content for Tile 1

+ + + Tile 2 header +

Content for Tile 2

+ + + Tile 3 header +

Content for Tile 3

+ + + Tile 4 header +

Content for Tile 4

+ + +
+
+ + + <% if (false) { %> + + <% } %> + + + + \ No newline at end of file diff --git a/samples/layouts/tile-manager/resize/package.json b/samples/layouts/tile-manager/resize/package.json new file mode 100644 index 000000000..a74d015e9 --- /dev/null +++ b/samples/layouts/tile-manager/resize/package.json @@ -0,0 +1,59 @@ +{ + "name": "wc-avatar-icon", + "version": "1.0.0", + "description": "This project provides example of Avatar Icon using IgniteUI for Web Components", + "main": "src/index.ts", + "scripts": { + "build": "npm run build:prod", + "build:dev": "webpack --mode development --config ./webpack.config.js --progress --color --display-error-details", + "build:prod": "webpack --env.NODE_ENV=production --mode production --config ./webpack.config.js --progress --color --display-error-details --bail", + "serve:dev": "node --max-old-space-size=8192 node_modules/webpack-dev-server/bin/webpack-dev-server.js --mode development --config ./webpack.config.js --hot --progress --open", + "serve:prod": "webpack-dev-server --env.NODE_ENV=production --mode production --config ./webpack.config.js --port 3000 --host 0.0.0.0 --hot --progress --open --content-base dist/", + "start": "npm run serve:dev", + "build:legacy": "npm run build:prod:legacy", + "build:dev:legacy": "webpack --env.legacy=true --mode development --config ./webpack.config.js --progress --color --display-error-details", + "build:prod:legacy": "webpack --env.NODE_ENV=production --env.legacy=true --mode production --config ./webpack.config.js --progress --color --display-error-details --bail", + "serve:dev:legacy": "node --max-old-space-size=8192 node_modules/webpack-dev-server/bin/webpack-dev-server.js --env.legacy=true --mode development --config ./webpack.config.js --hot --progress --open", + "serve:prod:legacy": "webpack-dev-server --env.NODE_ENV=production --env.legacy=true --mode production --config ./webpack.config.js --port 3000 --host 0.0.0.0 --hot --progress --open --content-base dist/", + "start:legacy": "npm run serve:dev:legacy" + }, + "author": "Infragistics", + "dependencies": { + "@webcomponents/custom-elements": "^1.4.1", + "@webcomponents/template": "^1.4.2", + "babel-runtime": "^6.26.0", + "core-js": "^3.6.5", + "igniteui-webcomponents": "5.3.0-RC.1", + "lit": "^3.2.0", + "lit-html": "^3.2.0", + "tslib": "^2.0.0" + }, + "devDependencies": { + "@babel/cli": "^7.8.3", + "@babel/core": "^7.8.3", + "@babel/plugin-proposal-class-properties": "^7.8.3", + "@babel/plugin-transform-runtime": "^7.10.0", + "@babel/preset-env": "^7.8.3", + "@babel/preset-typescript": "^7.8.3", + "@types/source-map": "^0.5.7", + "babel-loader": "^8.1.0", + "babel-plugin-transform-custom-element-classes": "^0.1.0", + "css-loader": "^1.0.0", + "csv-loader": "^3.0.2", + "file-loader": "^4.2.0", + "fork-ts-checker-webpack-plugin": "^4.1.5", + "html-webpack-plugin": "^4.3.0", + "parcel-bundler": "^1.6.1", + "source-map": "^0.7.3", + "style-loader": "^0.22.1", + "tsconfig-paths-webpack-plugin": "^4.0.0", + "typescript": "^4.4.4", + "webpack": "^5.96.1", + "webpack-cli": "^4.10.0", + "webpack-dev-server": "^4.11.1", + "worker-loader": "^3.0.8", + "xml-loader": "^1.2.1" + }, + "license": "", + "homepage": "." +} diff --git a/samples/layouts/tile-manager/resize/sandbox.config.json b/samples/layouts/tile-manager/resize/sandbox.config.json new file mode 100644 index 000000000..5c5b54fe2 --- /dev/null +++ b/samples/layouts/tile-manager/resize/sandbox.config.json @@ -0,0 +1,7 @@ +{ + "infiniteLoopProtection": false, + "hardReloadOnChange": false, + "view": "browser", + "template": "parcel" +} + \ No newline at end of file diff --git a/samples/layouts/tile-manager/resize/src/index.css b/samples/layouts/tile-manager/resize/src/index.css new file mode 100644 index 000000000..0fe936871 --- /dev/null +++ b/samples/layouts/tile-manager/resize/src/index.css @@ -0,0 +1,2 @@ +/* shared styles are loaded from: */ +/* https://static.infragistics.com/xplatform/css/samples */ \ No newline at end of file diff --git a/samples/layouts/tile-manager/resize/src/index.ts b/samples/layouts/tile-manager/resize/src/index.ts new file mode 100644 index 000000000..e7dfcfd5e --- /dev/null +++ b/samples/layouts/tile-manager/resize/src/index.ts @@ -0,0 +1,34 @@ +import { defineComponents, IgcTileManagerComponent, IgcRadioGroupComponent, IgcRadioComponent, IgcInputComponent } from 'igniteui-webcomponents'; +import 'igniteui-webcomponents/themes/light/bootstrap.css'; +import './layout.css' + +defineComponents(IgcTileManagerComponent, IgcRadioGroupComponent, IgcRadioComponent, IgcInputComponent); + +export class TileManagerResize { + constructor() { + const tileManager = document.querySelector("igc-tile-manager"); + document.addEventListener('igcChange', (e) => { + const radio = e.target as IgcRadioComponent; + const fieldInput = e.target as IgcInputComponent; + if (tileManager) { + switch (radio.value) { + case 'Hover': tileManager.setAttribute("resize-mode", "hover"); + break; + case 'Always': tileManager.setAttribute("resize-mode", "always"); + break; + case 'None': tileManager.setAttribute("resize-mode", "none"); + break; + } + + switch (fieldInput.label) { + case 'Minimum Column Width': tileManager.minColumnWidth = fieldInput.value;; + break; + case 'Minimum Row Height': tileManager.minRowHeight = fieldInput.value;; + break; + } + } + }) + } +} + +new TileManagerResize(); diff --git a/samples/layouts/tile-manager/resize/src/layout.css b/samples/layouts/tile-manager/resize/src/layout.css new file mode 100644 index 000000000..b3827fe87 --- /dev/null +++ b/samples/layouts/tile-manager/resize/src/layout.css @@ -0,0 +1,32 @@ +span{ + font-size: 30px; +} + +p { + font-size: 18px; + padding-left: 20px; +} + +igc-radio-group { + margin: 0 50px 0 22px; + width: fit-content; + padding: 4px 15px; + border: 2px solid var(--ig-primary-700); + background-color: var(--ig-gray-300); + align-self: end; +} + +.sample { + overflow: auto; +} + +.inputWrapper{ + display: flex; + margin-bottom: 12px; +} + +igc-input { + width: min-content; + --ig-size: var(--ig-size-small); + margin-right: 50px; +} \ No newline at end of file diff --git a/samples/layouts/tile-manager/resize/tsconfig.json b/samples/layouts/tile-manager/resize/tsconfig.json new file mode 100644 index 000000000..de23257dd --- /dev/null +++ b/samples/layouts/tile-manager/resize/tsconfig.json @@ -0,0 +1,20 @@ +{ + "compilerOptions": { + "noImplicitReturns": true, + "esModuleInterop": true, + "noImplicitAny": true, + "declarationDir": "dist/types", + "moduleResolution": "node", + "declaration": true, + "target": "es2015", + "module": "es2015", + "strict": true + }, + "include": [ + "src/**/*" + ], + "exclude": [ + "node_modules", + "dist" + ] +} \ No newline at end of file diff --git a/samples/layouts/tile-manager/resize/webpack.config.js b/samples/layouts/tile-manager/resize/webpack.config.js new file mode 100644 index 000000000..9d11a6155 --- /dev/null +++ b/samples/layouts/tile-manager/resize/webpack.config.js @@ -0,0 +1,105 @@ +const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin'); +const HtmlWebpackPlugin = require('html-webpack-plugin'); +const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin'); +const path = require('path'); +const webpack = require('webpack'); + +module.exports = env => { + const nodeEnv = process.env.NODE_ENV || 'development'; + const isProd = nodeEnv === 'production'; + const isLegacy = !!process.env.legacy && !(process.env.legacy == "false"); + console.log(">> webpack nodeEnv=" + nodeEnv); + console.log(">> webpack isProd=" + isProd); + console.log(">> webpack isLegacy=" + isLegacy); + const presets = [ + ["@babel/preset-env", { + "useBuiltIns": "usage", + "corejs": 3, + "targets": { + "browsers": isLegacy ? ["defaults"] : [ + "last 2 Chrome versions", + "last 2 Safari versions", + "last 2 iOS versions", + "last 2 Firefox versions", + "last 2 Edge versions"] + } + }], + "@babel/preset-typescript" + ]; + + return { + entry: isLegacy ? [ + path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'), + path.resolve(__dirname, 'node_modules/@webcomponents/template'), + path.resolve(__dirname, 'src') + ] : path.resolve(__dirname, 'src'), + devtool: isProd ? false : 'source-map', + output: { + filename: isProd ? '[fullhash].bundle.js' : '[fullhash].bundle.js', + globalObject: 'this', + path: path.resolve(__dirname, 'dist'), + }, + + resolve: { + mainFields: ['esm2015', 'module', 'main'], + extensions: ['.ts', '.js', '.json'], + plugins: [new TsconfigPathsPlugin({ + configFile: './tsconfig.json', + extensions: ['.ts', '.js'], + mainFields: ['esm2015', 'module', 'main'] + })] + }, + + module: { + rules: [ + { test: /\.(png|svg|jpg|gif)$/, use: ['file-loader'] }, + { test: /\.(csv|tsv)$/, use: ['csv-loader'] }, + { test: /\.xml$/, use: ['xml-loader'] }, + { test: /\.css$/, sideEffects: true, use: ['style-loader', 'css-loader'] }, + { + test: /worker\.(ts|js)$/, + use: [ + { loader: 'worker-loader' }, + { + loader: 'babel-loader', options: { + "compact": isProd ? true : false, + "presets": presets, + "plugins": [ + "@babel/plugin-proposal-class-properties", + "@babel/plugin-transform-runtime" + ] + } + } + ] + }, + { + test: /\.(ts|js)$/, loader: 'babel-loader', + options: { + "compact": isProd ? true : false, + "presets": presets, + "plugins": [ + "@babel/plugin-proposal-class-properties", + "@babel/plugin-transform-runtime" + ] + }, + exclude: + function (modulePath) { + return /node_modules/.test(modulePath) && + !/igniteui-webcomponents/.test(modulePath) && + !/lit-html/.test(modulePath); + } + }], + }, + + plugins: [ + new webpack.DefinePlugin({ + 'process.env.NODE_ENV': JSON.stringify(nodeEnv) + }), + new HtmlWebpackPlugin({ + title: 'for-cs', + template: 'index.html' + }), + new ForkTsCheckerWebpackPlugin() + ] + }; +}; diff --git a/samples/layouts/tile-manager/styling/.prettierrc b/samples/layouts/tile-manager/styling/.prettierrc new file mode 100644 index 000000000..15a7c7c6c --- /dev/null +++ b/samples/layouts/tile-manager/styling/.prettierrc @@ -0,0 +1,11 @@ +{ + "printWidth": 250, + "tabWidth": 4, + "useTabs": false, + "semi": true, + "singleQuote": false, + "trailingComma": "none", + "bracketSpacing": true, + "jsxBracketSameLine": false, + "fluid": false +} \ No newline at end of file diff --git a/samples/layouts/tile-manager/styling/ReadMe.md b/samples/layouts/tile-manager/styling/ReadMe.md new file mode 100644 index 000000000..eac523441 --- /dev/null +++ b/samples/layouts/tile-manager/styling/ReadMe.md @@ -0,0 +1,56 @@ + + + +This folder contains implementation of Web Components application with example of Styling feature using [Tile Manager](https://infragistics.com/webcomponentssite/components/general-getting-started.html) component. + + + + + + View Docs + + + View Code + + + Run Sample + + + Run Sample + + + + +## Branches + +> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-angular-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-angular-examples/tree/vnext) branch only when you want to contribute new samples to this repository. + +## Instructions + +To set up this project locally, execute these commands: + +``` +git clone https://github.com/IgniteUI/igniteui-wc-examples.git +git checkout master +cd ./igniteui-wc-examples +cd ./samples/layouts/tile-manager/styling +``` + +open above folder in VS Code or type: +``` +code . +``` + +In terminal window, run: + +``` +npm install +npm run start +``` + +Then open http://localhost:4200/ in your browser + + +## Learn More + +To learn more about **Ignite UI for Web Components**, check out the [Web Components documentation](https://infragistics.com/webcomponentssite/components/general-getting-started.html). diff --git a/samples/layouts/tile-manager/styling/index.html b/samples/layouts/tile-manager/styling/index.html new file mode 100644 index 000000000..e0f2f72e1 --- /dev/null +++ b/samples/layouts/tile-manager/styling/index.html @@ -0,0 +1,49 @@ + + + + + Tile Manager Styling + + + + + + + + + + +
+
+ + + + + + Tile 1 header +

Content for Tile 1

+ + + Tile 2 header +

Content for Tile 2

+ + + Tile 3 header +

Content for Tile 3

+ + + Tile 4 header +

Content for Tile 4

+ + +
+
+ + + <% if (false) { %> + + <% } %> + + + + \ No newline at end of file diff --git a/samples/layouts/tile-manager/styling/package.json b/samples/layouts/tile-manager/styling/package.json new file mode 100644 index 000000000..a74d015e9 --- /dev/null +++ b/samples/layouts/tile-manager/styling/package.json @@ -0,0 +1,59 @@ +{ + "name": "wc-avatar-icon", + "version": "1.0.0", + "description": "This project provides example of Avatar Icon using IgniteUI for Web Components", + "main": "src/index.ts", + "scripts": { + "build": "npm run build:prod", + "build:dev": "webpack --mode development --config ./webpack.config.js --progress --color --display-error-details", + "build:prod": "webpack --env.NODE_ENV=production --mode production --config ./webpack.config.js --progress --color --display-error-details --bail", + "serve:dev": "node --max-old-space-size=8192 node_modules/webpack-dev-server/bin/webpack-dev-server.js --mode development --config ./webpack.config.js --hot --progress --open", + "serve:prod": "webpack-dev-server --env.NODE_ENV=production --mode production --config ./webpack.config.js --port 3000 --host 0.0.0.0 --hot --progress --open --content-base dist/", + "start": "npm run serve:dev", + "build:legacy": "npm run build:prod:legacy", + "build:dev:legacy": "webpack --env.legacy=true --mode development --config ./webpack.config.js --progress --color --display-error-details", + "build:prod:legacy": "webpack --env.NODE_ENV=production --env.legacy=true --mode production --config ./webpack.config.js --progress --color --display-error-details --bail", + "serve:dev:legacy": "node --max-old-space-size=8192 node_modules/webpack-dev-server/bin/webpack-dev-server.js --env.legacy=true --mode development --config ./webpack.config.js --hot --progress --open", + "serve:prod:legacy": "webpack-dev-server --env.NODE_ENV=production --env.legacy=true --mode production --config ./webpack.config.js --port 3000 --host 0.0.0.0 --hot --progress --open --content-base dist/", + "start:legacy": "npm run serve:dev:legacy" + }, + "author": "Infragistics", + "dependencies": { + "@webcomponents/custom-elements": "^1.4.1", + "@webcomponents/template": "^1.4.2", + "babel-runtime": "^6.26.0", + "core-js": "^3.6.5", + "igniteui-webcomponents": "5.3.0-RC.1", + "lit": "^3.2.0", + "lit-html": "^3.2.0", + "tslib": "^2.0.0" + }, + "devDependencies": { + "@babel/cli": "^7.8.3", + "@babel/core": "^7.8.3", + "@babel/plugin-proposal-class-properties": "^7.8.3", + "@babel/plugin-transform-runtime": "^7.10.0", + "@babel/preset-env": "^7.8.3", + "@babel/preset-typescript": "^7.8.3", + "@types/source-map": "^0.5.7", + "babel-loader": "^8.1.0", + "babel-plugin-transform-custom-element-classes": "^0.1.0", + "css-loader": "^1.0.0", + "csv-loader": "^3.0.2", + "file-loader": "^4.2.0", + "fork-ts-checker-webpack-plugin": "^4.1.5", + "html-webpack-plugin": "^4.3.0", + "parcel-bundler": "^1.6.1", + "source-map": "^0.7.3", + "style-loader": "^0.22.1", + "tsconfig-paths-webpack-plugin": "^4.0.0", + "typescript": "^4.4.4", + "webpack": "^5.96.1", + "webpack-cli": "^4.10.0", + "webpack-dev-server": "^4.11.1", + "worker-loader": "^3.0.8", + "xml-loader": "^1.2.1" + }, + "license": "", + "homepage": "." +} diff --git a/samples/layouts/tile-manager/styling/sandbox.config.json b/samples/layouts/tile-manager/styling/sandbox.config.json new file mode 100644 index 000000000..5c5b54fe2 --- /dev/null +++ b/samples/layouts/tile-manager/styling/sandbox.config.json @@ -0,0 +1,7 @@ +{ + "infiniteLoopProtection": false, + "hardReloadOnChange": false, + "view": "browser", + "template": "parcel" +} + \ No newline at end of file diff --git a/samples/layouts/tile-manager/styling/src/index.css b/samples/layouts/tile-manager/styling/src/index.css new file mode 100644 index 000000000..0fe936871 --- /dev/null +++ b/samples/layouts/tile-manager/styling/src/index.css @@ -0,0 +1,2 @@ +/* shared styles are loaded from: */ +/* https://static.infragistics.com/xplatform/css/samples */ \ No newline at end of file diff --git a/samples/layouts/tile-manager/styling/src/index.ts b/samples/layouts/tile-manager/styling/src/index.ts new file mode 100644 index 000000000..cd61a295b --- /dev/null +++ b/samples/layouts/tile-manager/styling/src/index.ts @@ -0,0 +1,17 @@ +import { defineComponents, IgcTileManagerComponent, registerIconFromText } from 'igniteui-webcomponents'; +import 'igniteui-webcomponents/themes/light/bootstrap.css'; +import './layout.css' +import './styles.css' + +defineComponents(IgcTileManagerComponent); + +export class TileManagerOverview { + constructor() { + const indicatorIcon = + ''; + + registerIconFromText('indicator', indicatorIcon); + } +} + +new TileManagerOverview(); diff --git a/samples/layouts/tile-manager/styling/src/layout.css b/samples/layouts/tile-manager/styling/src/layout.css new file mode 100644 index 000000000..caa19110d --- /dev/null +++ b/samples/layouts/tile-manager/styling/src/layout.css @@ -0,0 +1,12 @@ +span{ + font-size: 30px; +} + +p { + font-size: 18px; + margin: 10px 0 0 20px; +} + +.sample { + overflow: auto; +} \ No newline at end of file diff --git a/samples/layouts/tile-manager/styling/src/styles.css b/samples/layouts/tile-manager/styling/src/styles.css new file mode 100644 index 000000000..81c7f7508 --- /dev/null +++ b/samples/layouts/tile-manager/styling/src/styles.css @@ -0,0 +1,41 @@ +igc-tile-manager::part(base) { + background-color: var(--ig-surface-900); +} + +igc-tile::part(content-container) { + color: var(--ig-secondary-200); +} + +igc-tile::part(header) { + background-color: var(--ig-gray-300); +} + +igc-tile::part(title) { + color: var(--ig-primary-400); +} + +igc-tile:nth-child(n+2)::part(trigger-side), igc-tile:nth-child(n+2)::part(trigger-bottom) { + background-color: var(--ig-success-500); +} + +igc-tile:nth-child(n+2)::part(trigger) { + background-color: var(--ig-error-500); +} + +.side, +.corner, +.bottom { + display: inline; + width: 100%; + height: 100%; +} + +.corner { + transform: rotate(220deg); + bottom: 8px; + right: 8px; +} + +.bottom { + transform: rotate(90deg); +} \ No newline at end of file diff --git a/samples/layouts/tile-manager/styling/tsconfig.json b/samples/layouts/tile-manager/styling/tsconfig.json new file mode 100644 index 000000000..de23257dd --- /dev/null +++ b/samples/layouts/tile-manager/styling/tsconfig.json @@ -0,0 +1,20 @@ +{ + "compilerOptions": { + "noImplicitReturns": true, + "esModuleInterop": true, + "noImplicitAny": true, + "declarationDir": "dist/types", + "moduleResolution": "node", + "declaration": true, + "target": "es2015", + "module": "es2015", + "strict": true + }, + "include": [ + "src/**/*" + ], + "exclude": [ + "node_modules", + "dist" + ] +} \ No newline at end of file diff --git a/samples/layouts/tile-manager/styling/webpack.config.js b/samples/layouts/tile-manager/styling/webpack.config.js new file mode 100644 index 000000000..9d11a6155 --- /dev/null +++ b/samples/layouts/tile-manager/styling/webpack.config.js @@ -0,0 +1,105 @@ +const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin'); +const HtmlWebpackPlugin = require('html-webpack-plugin'); +const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin'); +const path = require('path'); +const webpack = require('webpack'); + +module.exports = env => { + const nodeEnv = process.env.NODE_ENV || 'development'; + const isProd = nodeEnv === 'production'; + const isLegacy = !!process.env.legacy && !(process.env.legacy == "false"); + console.log(">> webpack nodeEnv=" + nodeEnv); + console.log(">> webpack isProd=" + isProd); + console.log(">> webpack isLegacy=" + isLegacy); + const presets = [ + ["@babel/preset-env", { + "useBuiltIns": "usage", + "corejs": 3, + "targets": { + "browsers": isLegacy ? ["defaults"] : [ + "last 2 Chrome versions", + "last 2 Safari versions", + "last 2 iOS versions", + "last 2 Firefox versions", + "last 2 Edge versions"] + } + }], + "@babel/preset-typescript" + ]; + + return { + entry: isLegacy ? [ + path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'), + path.resolve(__dirname, 'node_modules/@webcomponents/template'), + path.resolve(__dirname, 'src') + ] : path.resolve(__dirname, 'src'), + devtool: isProd ? false : 'source-map', + output: { + filename: isProd ? '[fullhash].bundle.js' : '[fullhash].bundle.js', + globalObject: 'this', + path: path.resolve(__dirname, 'dist'), + }, + + resolve: { + mainFields: ['esm2015', 'module', 'main'], + extensions: ['.ts', '.js', '.json'], + plugins: [new TsconfigPathsPlugin({ + configFile: './tsconfig.json', + extensions: ['.ts', '.js'], + mainFields: ['esm2015', 'module', 'main'] + })] + }, + + module: { + rules: [ + { test: /\.(png|svg|jpg|gif)$/, use: ['file-loader'] }, + { test: /\.(csv|tsv)$/, use: ['csv-loader'] }, + { test: /\.xml$/, use: ['xml-loader'] }, + { test: /\.css$/, sideEffects: true, use: ['style-loader', 'css-loader'] }, + { + test: /worker\.(ts|js)$/, + use: [ + { loader: 'worker-loader' }, + { + loader: 'babel-loader', options: { + "compact": isProd ? true : false, + "presets": presets, + "plugins": [ + "@babel/plugin-proposal-class-properties", + "@babel/plugin-transform-runtime" + ] + } + } + ] + }, + { + test: /\.(ts|js)$/, loader: 'babel-loader', + options: { + "compact": isProd ? true : false, + "presets": presets, + "plugins": [ + "@babel/plugin-proposal-class-properties", + "@babel/plugin-transform-runtime" + ] + }, + exclude: + function (modulePath) { + return /node_modules/.test(modulePath) && + !/igniteui-webcomponents/.test(modulePath) && + !/lit-html/.test(modulePath); + } + }], + }, + + plugins: [ + new webpack.DefinePlugin({ + 'process.env.NODE_ENV': JSON.stringify(nodeEnv) + }), + new HtmlWebpackPlugin({ + title: 'for-cs', + template: 'index.html' + }), + new ForkTsCheckerWebpackPlugin() + ] + }; +};