+
+
+ 
+
+
+ 
+
+
+ 
+
+
+
+
+## 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/charts/data-chart/trendline-layer
+```
+
+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/other/chat/features/.prettierrc b/samples/other/chat/features/.prettierrc
new file mode 100644
index 0000000000..15a7c7c6cf
--- /dev/null
+++ b/samples/other/chat/features/.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/other/chat/features/ReadMe.md b/samples/other/chat/features/ReadMe.md
new file mode 100644
index 0000000000..f2799a42b8
--- /dev/null
+++ b/samples/other/chat/features/ReadMe.md
@@ -0,0 +1,56 @@
+
+
+
+This folder contains implementation of Web Components application with example of Features feature using [Chat](https://infragistics.com/webcomponentssite/components/general-getting-started.html) component.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## 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/other/chat/features
+```
+
+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/other/chat/features/index.html b/samples/other/chat/features/index.html
new file mode 100644
index 0000000000..9295833561
--- /dev/null
+++ b/samples/other/chat/features/index.html
@@ -0,0 +1,33 @@
+
+
+
+
+
+
+
+
+ <% if (false) { %>
+
+ <% } %>
+
+
+
+
\ No newline at end of file
diff --git a/samples/other/chat/features/package.json b/samples/other/chat/features/package.json
new file mode 100644
index 0000000000..b80667c864
--- /dev/null
+++ b/samples/other/chat/features/package.json
@@ -0,0 +1,63 @@
+{
+ "name": "wc-chat-features",
+ "version": "1.0.0",
+ "description": "This project provides example of Chat 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",
+ "igniteui-webcomponents": "6.3.0-beta.1",
+ "babel-runtime": "^6.26.0",
+ "core-js": "^3.6.5",
+ "lit": "^3.2.0",
+ "lit-html": "^3.2.0",
+ "tslib": "^2.0.0",
+ "dompurify": "^3.2.6",
+ "marked": "^12.0.0",
+ "marked-shiki": "^1.2.0",
+ "shiki": "^3.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/other/chat/features/sandbox.config.json b/samples/other/chat/features/sandbox.config.json
new file mode 100644
index 0000000000..5c5b54fe21
--- /dev/null
+++ b/samples/other/chat/features/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/other/chat/features/src/index.css b/samples/other/chat/features/src/index.css
new file mode 100644
index 0000000000..0fe9368715
--- /dev/null
+++ b/samples/other/chat/features/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/other/chat/features/src/index.ts b/samples/other/chat/features/src/index.ts
new file mode 100644
index 0000000000..906d7451e5
--- /dev/null
+++ b/samples/other/chat/features/src/index.ts
@@ -0,0 +1,119 @@
+import { defineComponents, IgcChatComponent } from 'igniteui-webcomponents';
+import { createMarkdownRenderer } from 'igniteui-webcomponents/extras';
+import 'igniteui-webcomponents/themes/light/bootstrap.css';
+import './layout.css'
+import { html } from 'lit-html';
+
+defineComponents(IgcChatComponent);
+
+export class ChatOverview {
+ private chat: IgcChatComponent;
+ private markdownRenderer: any;
+
+ private messages = [
+ {
+ id: '1',
+ text: `Hello. How can we assist you today?`,
+ sender: 'support',
+ timestamp: new Date(Date.now() - 3500000)
+ },
+ {
+ id: '2',
+ text: `Hello. I have problem with styling IgcAvatarComponent. Can you take a look at the attached file and help me?`,
+ sender: 'user',
+ timestamp: new Date(Date.now() - 3400000),
+ attachments: [
+ {
+ id: 'AvatarStyles.css',
+ name: 'AvatarStyles.css',
+ url: './styles/AvatarStyles.css',
+ type: 'text/css'
+ },
+ ],
+ },
+ {
+ id: '3',
+ text: `Sure, give me a moment to check the file.`,
+ sender: 'support',
+ timestamp: new Date(Date.now() - 3300000)
+ },
+ {
+ id: '4',
+ text:
+ `
+Thank you for your patience. It seems that the issue is the name of the CSS part. Here is the fixed code:
+\`\`\`css
+igc-avatar::part(base) {
+ --size: 60px;
+ color: var(--ig-success-500-contrast);
+ background: var(--ig-success-500);;
+ border-radius: 20px;
+}
+\`\`\`
+ `,
+ sender: 'support',
+ timestamp: new Date(Date.now() - 3200000)
+ }
+ ];
+
+ private options = {
+ disableAutoScroll: false,
+ disableInputAttachments: false,
+ inputPlaceholder: 'Type your message here...',
+ headerText: 'Developer Support',
+ suggestionsPosition: 'below-input',
+ renderers: {
+ messageHeader: (ctx: any) => this.messageHeaderTemplate(ctx.param, ctx),
+ messageContent: async (ctx: any) => this.markdownRenderer(ctx.param),
+ suggestionPrefix: () => this.suggestionPrefixTemplate()
+ },
+ suggestions: [ 'Send me an e-mail when support is available.' ]
+ };
+
+
+ private messageHeaderTemplate = (msg: any, ctx: any) => {
+ return msg.sender !== 'user'
+ ? html`
+
+
+ 
+ Get Priority Support
+
+
+
+ Suggested Actions
+
+ Developer Support
+
+ `
+ : ctx.defaults.messageHeader(ctx);
+ };
+
+ private suggestionPrefixTemplate = () => {
+ return html`💡 `;
+ }
+
+ constructor() {
+ this.chat = document.querySelector('igc-chat') as IgcChatComponent;
+ this.init();
+ }
+
+ private async init() {
+ this.markdownRenderer = await createMarkdownRenderer();
+ this.chat.messages = this.messages;
+ this.chat.options = this.options;
+ this.chat.addEventListener('igcMessageCreated', this.onMessageCreated);
+ }
+
+ public onMessageCreated = (e: CustomEvent) => {
+ const newMessage = e.detail;
+ this.messages.push(newMessage);
+
+ const responseMessage = {
+ id: Date.now().toString(),
+ text: `Our support team is currently unavailable. We'll get back to you as soon as possible.`,
+ sender: 'support',
+ timestamp: new Date()
+ };
+ this.messages.push(responseMessage);
+ this.chat.messages = [...this.messages];
+ this.chat.options = { ...this.chat.options, suggestions: [] };
+ }
+}
+
+new ChatOverview();
diff --git a/samples/other/chat/features/src/layout.css b/samples/other/chat/features/src/layout.css
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/samples/other/chat/features/tsconfig.json b/samples/other/chat/features/tsconfig.json
new file mode 100644
index 0000000000..de23257dd8
--- /dev/null
+++ b/samples/other/chat/features/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/other/chat/features/webpack.config.js b/samples/other/chat/features/webpack.config.js
new file mode 100644
index 0000000000..9d11a6155c
--- /dev/null
+++ b/samples/other/chat/features/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/other/chat/overview/.prettierrc b/samples/other/chat/overview/.prettierrc
new file mode 100644
index 0000000000..15a7c7c6cf
--- /dev/null
+++ b/samples/other/chat/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/other/chat/overview/ReadMe.md b/samples/other/chat/overview/ReadMe.md
new file mode 100644
index 0000000000..64983e2bd5
--- /dev/null
+++ b/samples/other/chat/overview/ReadMe.md
@@ -0,0 +1,56 @@
+
+
+
+This folder contains implementation of Web Components application with example of Overview feature using [Chat](https://infragistics.com/webcomponentssite/components/general-getting-started.html) component.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## 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/other/chat/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/other/chat/overview/index.html b/samples/other/chat/overview/index.html
new file mode 100644
index 0000000000..0186f146b2
--- /dev/null
+++ b/samples/other/chat/overview/index.html
@@ -0,0 +1,30 @@
+
+
+
+
+
+
+
+
+ <% if (false) { %>
+
+ <% } %>
+
+
+
+
\ No newline at end of file
diff --git a/samples/other/chat/overview/package.json b/samples/other/chat/overview/package.json
new file mode 100644
index 0000000000..4b0f03db67
--- /dev/null
+++ b/samples/other/chat/overview/package.json
@@ -0,0 +1,63 @@
+{
+ "name": "wc-chat-overview",
+ "version": "1.0.0",
+ "description": "This project provides example of Chat 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",
+ "igniteui-webcomponents": "6.3.0-beta.1",
+ "babel-runtime": "^6.26.0",
+ "core-js": "^3.6.5",
+ "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",
+ "dompurify": "^3.2.6",
+ "file-loader": "^4.2.0",
+ "fork-ts-checker-webpack-plugin": "^4.1.5",
+ "html-webpack-plugin": "^4.3.0",
+ "marked": "^12.0.0",
+ "marked-shiki": "^1.2.0",
+ "parcel-bundler": "^1.6.1",
+ "shiki": "^3.0.0",
+ "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/other/chat/overview/sandbox.config.json b/samples/other/chat/overview/sandbox.config.json
new file mode 100644
index 0000000000..5c5b54fe21
--- /dev/null
+++ b/samples/other/chat/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/other/chat/overview/src/assets/delivery.png b/samples/other/chat/overview/src/assets/delivery.png
new file mode 100644
index 0000000000..2cc6983932
Binary files /dev/null and b/samples/other/chat/overview/src/assets/delivery.png differ
diff --git a/samples/other/chat/overview/src/index.css b/samples/other/chat/overview/src/index.css
new file mode 100644
index 0000000000..0fe9368715
--- /dev/null
+++ b/samples/other/chat/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/other/chat/overview/src/index.ts b/samples/other/chat/overview/src/index.ts
new file mode 100644
index 0000000000..ad64b7283e
--- /dev/null
+++ b/samples/other/chat/overview/src/index.ts
@@ -0,0 +1,99 @@
+import { defineComponents, IgcAvatarComponent, IgcChatComponent } from 'igniteui-webcomponents';
+import 'igniteui-webcomponents/themes/light/bootstrap.css';
+import './layout.css'
+import { html } from 'lit-html';
+
+defineComponents(IgcAvatarComponent, IgcChatComponent);
+
+export class ChatOverview {
+ private chat: IgcChatComponent;
+
+ private messages = [
+ {
+ id: '1',
+ text: `Hi, I have a question about my recent order, #7890.`,
+ sender: 'user',
+ timestamp: new Date(Date.now() - 3500000)
+ },
+ {
+ id: '2',
+ text: `Hello! I can help with that. What is your question regarding order #7890?`,
+ sender: 'support',
+ timestamp: new Date(Date.now() - 3400000)
+ },
+ {
+ id: '3',
+ text: `The tracking status shows 'delivered', but I haven't received it yet. Can you confirm the delivery location?`,
+ sender: 'user',
+ timestamp: new Date(Date.now() - 3300000)
+ },
+ {
+ id: '4',
+ text: `I've reviewed the delivery details. It seems the package was left in a different spot. Here's a photo from our delivery driver showing where it was placed. Please check your porch and side door.`,
+ sender: 'support',
+ timestamp: new Date(Date.now() - 3200000),
+ attachments: [
+ {
+ id: 'delivery-location-image',
+ name: 'Delivery location',
+ url: 'https://media.istockphoto.com/id/1207972183/photo/merchandise-delivery-from-online-ordering.jpg?s=612x612&w=0&k=20&c=cGcMqd_8FALv4Tueh7sllYZuDXurkfkqoJf6IAIWhJk=',
+ type: 'image'
+ },
+ ],
+ },
+ ];
+
+ private options = {
+ disableAutoScroll: false,
+ disableInputAttachments: false,
+ suggestions: [`It's there. Thanks.`, `It's not there.`],
+ inputPlaceholder: 'Type your message here...',
+ headerText: 'Customer Support',
+ renderers: {
+ messageHeader: (ctx: any) => this.messageHeaderTemplate(ctx.param, ctx),
+ }
+ };
+
+ private messageHeaderTemplate = (msg: any, ctx: any) => {
+ return msg.sender !== 'user'
+ ? html`
+
+
+
+
+
+
+
+ Customer Support
+
+ `
+ : ctx.defaults.messageHeader(ctx);
+ };
+
+ constructor() {
+ this.chat = document.querySelector('igc-chat') as IgcChatComponent;
+ this.chat.messages = this.messages;
+ this.chat.options = this.options;
+ this.chat.addEventListener('igcMessageCreated', this.onMessageCreated)
+ }
+
+ public onMessageCreated = (e: CustomEvent) => {
+ const newMessage = e.detail;
+ this.messages.push(newMessage);
+ this.chat.options = { ...this.chat.options, suggestions: [] };
+
+ const responseMessage = {
+ id: Date.now().toString(),
+ text: `Our support team is currently unavailable. We'll get back to you as soon as possible.`,
+ sender: 'support',
+ timestamp: new Date()
+ };
+ this.messages.push(responseMessage);
+ this.chat.messages = [...this.chat.messages];
+ }
+}
+
+new ChatOverview();
diff --git a/samples/other/chat/overview/src/layout.css b/samples/other/chat/overview/src/layout.css
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/samples/other/chat/overview/tsconfig.json b/samples/other/chat/overview/tsconfig.json
new file mode 100644
index 0000000000..de23257dd8
--- /dev/null
+++ b/samples/other/chat/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/other/chat/overview/webpack.config.js b/samples/other/chat/overview/webpack.config.js
new file mode 100644
index 0000000000..9d11a6155c
--- /dev/null
+++ b/samples/other/chat/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/other/chat/styling/.prettierrc b/samples/other/chat/styling/.prettierrc
new file mode 100644
index 0000000000..15a7c7c6cf
--- /dev/null
+++ b/samples/other/chat/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/other/chat/styling/ReadMe.md b/samples/other/chat/styling/ReadMe.md
new file mode 100644
index 0000000000..7d10150699
--- /dev/null
+++ b/samples/other/chat/styling/ReadMe.md
@@ -0,0 +1,56 @@
+
+
+
+This folder contains implementation of Web Components application with example of Styling feature using [Chat](https://infragistics.com/webcomponentssite/components/general-getting-started.html) component.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## 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/other/chat/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/other/chat/styling/index.html b/samples/other/chat/styling/index.html
new file mode 100644
index 0000000000..0186f146b2
--- /dev/null
+++ b/samples/other/chat/styling/index.html
@@ -0,0 +1,30 @@
+
+
+
+
+
+
+
+
+ <% if (false) { %>
+
+ <% } %>
+
+
+
+
\ No newline at end of file
diff --git a/samples/other/chat/styling/package.json b/samples/other/chat/styling/package.json
new file mode 100644
index 0000000000..f5f95120c7
--- /dev/null
+++ b/samples/other/chat/styling/package.json
@@ -0,0 +1,63 @@
+{
+ "name": "wc-chat-styling",
+ "version": "1.0.0",
+ "description": "This project provides example of Chat Styling 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": "6.3.0-beta.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",
+ "dompurify": "^3.2.6",
+ "file-loader": "^4.2.0",
+ "fork-ts-checker-webpack-plugin": "^4.1.5",
+ "html-webpack-plugin": "^4.3.0",
+ "marked": "^12.0.0",
+ "marked-shiki": "^1.2.0",
+ "parcel-bundler": "^1.6.1",
+ "shiki": "^3.0.0",
+ "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/other/chat/styling/sandbox.config.json b/samples/other/chat/styling/sandbox.config.json
new file mode 100644
index 0000000000..5c5b54fe21
--- /dev/null
+++ b/samples/other/chat/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/other/chat/styling/src/ChatStyle.css b/samples/other/chat/styling/src/ChatStyle.css
new file mode 100644
index 0000000000..ddffb52613
--- /dev/null
+++ b/samples/other/chat/styling/src/ChatStyle.css
@@ -0,0 +1,72 @@
+ /*
+ * @csspart header - Styles the header container.
+ * @csspart prefix - Styles the element before the title (e.g., avatar).
+ * @csspart title - Styles the chat header title.
+ * @csspart suggestions - Styles the suggestion container.
+ * @csspart suggestion - Styles each suggestion item.
+ */
+
+ igc-chat {
+ border: 2px solid var(--ig-gray-300);
+ }
+
+igc-chat::part(header) {
+ display: flex;
+ align-items: center;
+ padding: 10px;
+ border-bottom: 1px solid var(--ig-gray-300);
+ background-color: var(--ig-gray-200);
+}
+
+igc-chat::part(prefix) {
+ margin-right: 10px;
+}
+
+igc-chat::part(message-container) {
+ background: var(--igc-chat-bubble-bg, #eee);
+ color: var(--igc-chat-text-color, #222);
+ padding: 12px;
+ border-radius: 8px;
+ transition: background .15s;
+}
+
+igc-chat::part(sent) {
+ background: var(--igc-chat-sent-bubble-bg, #e6f4ff);
+ color: var(--igc-chat-sent-text-color, #03396b);
+}
+
+igc-chat::part(message-actions) {
+ border-top: 1px solid var(--ig-gray-300);
+}
+
+igc-chat::part(title) {
+ font-family: 'Franklin Gothic Medium';
+ color: var(--ig-gray-700);
+}
+
+igc-chat::part(suggestions) {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 10px;
+ padding: 10px;
+ background-color: var(--ig-gray-50);
+}
+
+igc-chat::part(suggestion) {
+ background-color: var(--ig-primary-100);
+ color: var(--ig-primary-800);
+ padding: 8px 12px;
+ border-radius: 20px;
+ cursor: pointer;
+ transition: background-color 0.3s, color 0.3s;
+}
+
+/* TODO: Change after parts are fixed */
+igc-message-attachments::part(attachment) {
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
+}
+
+/* TODO: Change after parts are fixed */
+igc-chat::part(input-attachments-container) {
+ border: 5px solid var(--ig-gray-300);
+}
\ No newline at end of file
diff --git a/samples/other/chat/styling/src/assets/delivery.png b/samples/other/chat/styling/src/assets/delivery.png
new file mode 100644
index 0000000000..2030ee4eb5
Binary files /dev/null and b/samples/other/chat/styling/src/assets/delivery.png differ
diff --git a/samples/other/chat/styling/src/index.css b/samples/other/chat/styling/src/index.css
new file mode 100644
index 0000000000..0fe9368715
--- /dev/null
+++ b/samples/other/chat/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/other/chat/styling/src/index.ts b/samples/other/chat/styling/src/index.ts
new file mode 100644
index 0000000000..98faba37ba
--- /dev/null
+++ b/samples/other/chat/styling/src/index.ts
@@ -0,0 +1,100 @@
+import { defineComponents, IgcAvatarComponent, IgcChatComponent } from 'igniteui-webcomponents';
+import 'igniteui-webcomponents/themes/light/bootstrap.css';
+import './layout.css'
+import { html } from 'lit-html';
+import './ChatStyle.css';
+
+defineComponents(IgcAvatarComponent, IgcChatComponent);
+
+export class ChatOverview {
+ private chat: IgcChatComponent;
+
+ private messages = [
+ {
+ id: '1',
+ text: `Hi, I have a question about my recent order, #7890.`,
+ sender: 'user',
+ timestamp: new Date(Date.now() - 3500000)
+ },
+ {
+ id: '2',
+ text: `Hello! I can help with that. What is your question regarding order #7890?`,
+ sender: 'support',
+ timestamp: new Date(Date.now() - 3400000)
+ },
+ {
+ id: '3',
+ text: `The tracking status shows 'delivered', but I haven't received it yet. Can you confirm the delivery location?`,
+ sender: 'user',
+ timestamp: new Date(Date.now() - 3300000)
+ },
+ {
+ id: '4',
+ text: `I've reviewed the delivery details. It seems the package was left in a different spot. Here's a photo from our delivery driver showing where it was placed. Please check your porch and side door.`,
+ sender: 'support',
+ timestamp: new Date(Date.now() - 3200000),
+ attachments: [
+ {
+ id: 'delivery-location-image',
+ name: 'Delivery location',
+ url: 'https://media.istockphoto.com/id/1207972183/photo/merchandise-delivery-from-online-ordering.jpg?s=612x612&w=0&k=20&c=cGcMqd_8FALv4Tueh7sllYZuDXurkfkqoJf6IAIWhJk=',
+ type: 'image'
+ },
+ ],
+ },
+ ];
+
+ private options = {
+ disableAutoScroll: false,
+ disableInputAttachments: false,
+ suggestions: [`It's there. Thanks.`, `It's not there.`],
+ inputPlaceholder: 'Type your message here...',
+ headerText: 'Customer Support',
+ renderers: {
+ messageHeader: (ctx: any) => this.messageHeaderTemplate(ctx.param, ctx),
+ }
+ };
+
+ private messageHeaderTemplate = (msg: any, ctx: any) => {
+ return msg.sender !== 'user'
+ ? html`
+
+
+
+
+
+
+
+ Customer Support
+
+ `
+ : ctx.defaults.messageHeader(ctx);
+ };
+
+ constructor() {
+ this.chat = document.querySelector('igc-chat') as IgcChatComponent;
+ this.chat.messages = this.messages;
+ this.chat.options = this.options;
+ this.chat.addEventListener('igcMessageCreated', this.onMessageCreated)
+ }
+
+ public onMessageCreated = (e: CustomEvent) => {
+ const newMessage = e.detail;
+ this.messages.push(newMessage);
+ this.chat.options = { ...this.chat.options, suggestions: [] };
+
+ const responseMessage = {
+ id: Date.now().toString(),
+ text: `Our support team is currently unavailable. We'll get back to you as soon as possible.`,
+ sender: 'support',
+ timestamp: new Date()
+ };
+ this.messages.push(responseMessage);
+ this.chat.messages = [...this.chat.messages];
+ }
+}
+
+new ChatOverview();
diff --git a/samples/other/chat/styling/src/layout.css b/samples/other/chat/styling/src/layout.css
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/samples/other/chat/styling/tsconfig.json b/samples/other/chat/styling/tsconfig.json
new file mode 100644
index 0000000000..de23257dd8
--- /dev/null
+++ b/samples/other/chat/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/other/chat/styling/webpack.config.js b/samples/other/chat/styling/webpack.config.js
new file mode 100644
index 0000000000..9d11a6155c
--- /dev/null
+++ b/samples/other/chat/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()
+ ]
+ };
+};