diff --git a/samples/inputs/action-strip/action-strip-paragraph-menu/.prettierrc b/samples/inputs/action-strip/action-strip-paragraph-menu/.prettierrc new file mode 100644 index 0000000000..15a7c7c6cf --- /dev/null +++ b/samples/inputs/action-strip/action-strip-paragraph-menu/.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/inputs/action-strip/action-strip-paragraph-menu/ReadMe.md b/samples/inputs/action-strip/action-strip-paragraph-menu/ReadMe.md new file mode 100644 index 0000000000..0ad74d2a33 --- /dev/null +++ b/samples/inputs/action-strip/action-strip-paragraph-menu/ReadMe.md @@ -0,0 +1,56 @@ + + + +This folder contains implementation of Web Components application with example of Outlined feature using [Button](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/inputs/button/outlined +``` + +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/inputs/action-strip/action-strip-paragraph-menu/index.html b/samples/inputs/action-strip/action-strip-paragraph-menu/index.html new file mode 100644 index 0000000000..3e44f10504 --- /dev/null +++ b/samples/inputs/action-strip/action-strip-paragraph-menu/index.html @@ -0,0 +1,53 @@ + + + + Action Strip Paragraph Menu + + + + + + + + + + +
+
+
+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi non nibh eu libero commodo posuere at id augue. Morbi nec justo enim. Sed placerat fringilla quam in pharetra. Pellentesque imperdiet lorem quis sem bibendum + molestie. Aliquam fringilla tellus nec convallis sodales. Suspendisse a eros accumsan, mattis mauris id, malesuada nibh. Maecenas eget augue faucibus, euismod arcu sit amet, tempus nisi. Sed tellus nisl, luctus vitae + vestibulum ac, vehicula non ex. Donec condimentum rhoncus enim, et efficitur tortor faucibus sed. Integer at mauris facilisis mauris condimentum bibendum. Maecenas eget lacus dolor. Etiam pulvinar, sapien vitae fermentum + interdum, nunc justo facilisis est, eu ullamcorper dolor lectus sit amet nisl. Quisque aliquam urna ut leo mollis luctus. Morbi lacinia orci augue, sed blandit est ornare placerat. Cras a ante nec mauris euismod aliquam vel + pulvinar urna. Morbi tincidunt fringilla tortor, at ultricies neque rhoncus ac. +

+ + +
+
+
+ + <% if (false) { %> + + <% } %> + + diff --git a/samples/inputs/action-strip/action-strip-paragraph-menu/package.json b/samples/inputs/action-strip/action-strip-paragraph-menu/package.json new file mode 100644 index 0000000000..789757b1a2 --- /dev/null +++ b/samples/inputs/action-strip/action-strip-paragraph-menu/package.json @@ -0,0 +1,60 @@ +{ + "name": "wc-action-strip-paragraph-menu", + "version": "1.0.0", + "description": "This project provides example of paragraph with action strip menu 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": "4.8.0", + "igniteui-webcomponents-grids": "4.8.1-alpha.0", + "lit": "^2.0.2", + "lit-html": "^2.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.74.0", + "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/inputs/action-strip/action-strip-paragraph-menu/sandbox.config.json b/samples/inputs/action-strip/action-strip-paragraph-menu/sandbox.config.json new file mode 100644 index 0000000000..5c5b54fe21 --- /dev/null +++ b/samples/inputs/action-strip/action-strip-paragraph-menu/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/inputs/action-strip/action-strip-paragraph-menu/src/ActionStripParagraphMenu.css b/samples/inputs/action-strip/action-strip-paragraph-menu/src/ActionStripParagraphMenu.css new file mode 100644 index 0000000000..510df5dfdc --- /dev/null +++ b/samples/inputs/action-strip/action-strip-paragraph-menu/src/ActionStripParagraphMenu.css @@ -0,0 +1,65 @@ +igc-action-strip { + display: block; + position: absolute; + top: 4rem; + z-index: 2; + background-color: transparent; + border-radius: 0.5rem; +} + +igc-action-strip igc-button { + display: block; + margin-bottom: 0.2rem; +} + +igc-action-strip igc-button::part(base) { + padding: 20px; + width: 100%; +} + +.more { + visibility: hidden; + cursor: pointer; + padding: 1rem 0; + position: absolute; + top: 0.1rem; + z-index: 2; +} + +.parent { + padding: 4rem 1rem 1rem 1rem; + margin: auto; + min-width: 700px; + max-width: 1000px; + height: 250px; + position: relative; +} + +.parent::before { + content: ""; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: rgba(236, 236, 236, 0.404); + opacity: 0; + transition: opacity 0.3s ease; + z-index: 1; +} + +.parent:hover::before { + opacity: 1; +} + +.text-align-left { + text-align: left; +} + +.text-align-center { + text-align: center; +} + +.text-align-right { + text-align: right; +} diff --git a/samples/inputs/action-strip/action-strip-paragraph-menu/src/index.css b/samples/inputs/action-strip/action-strip-paragraph-menu/src/index.css new file mode 100644 index 0000000000..0fe9368715 --- /dev/null +++ b/samples/inputs/action-strip/action-strip-paragraph-menu/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/inputs/action-strip/action-strip-paragraph-menu/src/index.ts b/samples/inputs/action-strip/action-strip-paragraph-menu/src/index.ts new file mode 100644 index 0000000000..4f4f0bbcf2 --- /dev/null +++ b/samples/inputs/action-strip/action-strip-paragraph-menu/src/index.ts @@ -0,0 +1,104 @@ +import { defineComponents, IgcIconComponent, IgcRippleComponent, IgcButtonComponent, registerIconFromText } from "igniteui-webcomponents"; +import { IgcActionStripComponent } from "igniteui-webcomponents-grids/grids"; +import "igniteui-webcomponents/themes/light/bootstrap.css"; +import "igniteui-webcomponents-grids/grids/combined"; +import "./ActionStripParagraphMenu.css"; + +defineComponents(IgcIconComponent); +defineComponents(IgcRippleComponent); +defineComponents(IgcButtonComponent); + +const icons = [ + { + name: "more", + iconText: + '' + }, + { + name: "left", + iconText: '' + }, + { + name: "center", + iconText: '' + }, + { + name: "right", + iconText: '' + } +]; + +export class ActionStripParagraphMenu { + private actionStrip: IgcActionStripComponent; + + private more: HTMLElement; + + private left: HTMLElement; + private center: HTMLElement; + private right: HTMLElement; + + private parent: HTMLElement; + + private isActionStripShown = false; + + constructor() { + icons.forEach((icon) => { + registerIconFromText(icon.name, icon.iconText, "material"); + }); + + this.actionStrip = document.querySelector("igc-action-strip") as IgcActionStripComponent; + + this.more = document.querySelector(".more") as IgcButtonComponent; + + this.left = document.querySelector(".left") as IgcButtonComponent; + this.center = document.getElementById("center") as IgcButtonComponent; + this.right = document.querySelector(".right") as IgcButtonComponent; + + this.parent = document.querySelector(".parent") as HTMLElement; + + this.parent.addEventListener("mouseenter", () => this.show()); + this.parent.addEventListener("mouseleave", () => this.hide()); + + let paragraph = document.querySelector(".paragraph") as HTMLElement; + + this.more.addEventListener("click", (e) => { + if (!this.isActionStripShown) { + this.actionStrip.show(); + this.isActionStripShown = true; + } else { + this.actionStrip.hide(); + this.isActionStripShown = false; + } + }); + + this.left.addEventListener("click", (e) => { + paragraph.classList.add("text-align-left"); + paragraph.classList.remove("text-align-center"); + paragraph.classList.remove("text-align-right"); + }); + + this.center.addEventListener("click", (e) => { + paragraph.classList.remove("text-align-left"); + paragraph.classList.add("text-align-center"); + paragraph.classList.remove("text-align-right"); + }); + + this.right.addEventListener("click", (e) => { + paragraph.classList.remove("text-align-left"); + paragraph.classList.remove("text-align-center"); + paragraph.classList.add("text-align-right"); + }); + } + + private show() { + this.more.style.visibility = "visible" + } + + private hide() { + this.more.style.visibility = "hidden" + this.actionStrip.hide(); + this.isActionStripShown = false; + } +} + +new ActionStripParagraphMenu(); diff --git a/samples/inputs/action-strip/action-strip-paragraph-menu/tsconfig.json b/samples/inputs/action-strip/action-strip-paragraph-menu/tsconfig.json new file mode 100644 index 0000000000..de23257dd8 --- /dev/null +++ b/samples/inputs/action-strip/action-strip-paragraph-menu/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/inputs/action-strip/action-strip-paragraph-menu/webpack.config.js b/samples/inputs/action-strip/action-strip-paragraph-menu/webpack.config.js new file mode 100644 index 0000000000..9d11a6155c --- /dev/null +++ b/samples/inputs/action-strip/action-strip-paragraph-menu/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/inputs/action-strip/action-strip-paragraph/.prettierrc b/samples/inputs/action-strip/action-strip-paragraph/.prettierrc new file mode 100644 index 0000000000..15a7c7c6cf --- /dev/null +++ b/samples/inputs/action-strip/action-strip-paragraph/.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/inputs/action-strip/action-strip-paragraph/ReadMe.md b/samples/inputs/action-strip/action-strip-paragraph/ReadMe.md new file mode 100644 index 0000000000..0ad74d2a33 --- /dev/null +++ b/samples/inputs/action-strip/action-strip-paragraph/ReadMe.md @@ -0,0 +1,56 @@ + + + +This folder contains implementation of Web Components application with example of Outlined feature using [Button](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/inputs/button/outlined +``` + +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/inputs/action-strip/action-strip-paragraph/index.html b/samples/inputs/action-strip/action-strip-paragraph/index.html new file mode 100644 index 0000000000..b6c24a7f6e --- /dev/null +++ b/samples/inputs/action-strip/action-strip-paragraph/index.html @@ -0,0 +1,48 @@ + + + + Action Strip Paragraph + + + + + + + + + + +
+
+
+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi non nibh eu libero commodo posuere at id augue. Morbi nec justo enim. Sed placerat fringilla quam in pharetra. Pellentesque imperdiet lorem quis sem bibendum + molestie. Aliquam fringilla tellus nec convallis sodales. Suspendisse a eros accumsan, mattis mauris id, malesuada nibh. Maecenas eget augue faucibus, euismod arcu sit amet, tempus nisi. Sed tellus nisl, luctus vitae + vestibulum ac, vehicula non ex. Donec condimentum rhoncus enim, et efficitur tortor faucibus sed. Integer at mauris facilisis mauris condimentum bibendum. Maecenas eget lacus dolor. Etiam pulvinar, sapien vitae fermentum + interdum, nunc justo facilisis est, eu ullamcorper dolor lectus sit amet nisl. Quisque aliquam urna ut leo mollis luctus. Morbi lacinia orci augue, sed blandit est ornare placerat. Cras a ante nec mauris euismod aliquam vel + pulvinar urna. Morbi tincidunt fringilla tortor, at ultricies neque rhoncus ac. +

+ +
+
+
+ + <% if (false) { %> + + <% } %> + + diff --git a/samples/inputs/action-strip/action-strip-paragraph/package.json b/samples/inputs/action-strip/action-strip-paragraph/package.json new file mode 100644 index 0000000000..c033ac86d2 --- /dev/null +++ b/samples/inputs/action-strip/action-strip-paragraph/package.json @@ -0,0 +1,60 @@ +{ + "name": "wc-action-strip-paragraph", + "version": "1.0.0", + "description": "This project provides example of paragraph with action strip 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": "4.8.0", + "igniteui-webcomponents-grids": "4.8.1-alpha.0", + "lit": "^2.0.2", + "lit-html": "^2.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.74.0", + "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/inputs/action-strip/action-strip-paragraph/sandbox.config.json b/samples/inputs/action-strip/action-strip-paragraph/sandbox.config.json new file mode 100644 index 0000000000..5c5b54fe21 --- /dev/null +++ b/samples/inputs/action-strip/action-strip-paragraph/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/inputs/action-strip/action-strip-paragraph/src/ActionStripParagraph.css b/samples/inputs/action-strip/action-strip-paragraph/src/ActionStripParagraph.css new file mode 100644 index 0000000000..87c7911f19 --- /dev/null +++ b/samples/inputs/action-strip/action-strip-paragraph/src/ActionStripParagraph.css @@ -0,0 +1,48 @@ +igc-action-strip { + display: flex; + align-items: flex-start; + justify-content: center; + width: 100%; + padding: 1rem 0; + position: absolute; + top: 1rem; + z-index: 2; +} + +.parent { + padding: 5rem 1rem 1rem 1rem; + margin: auto; + min-width: 700px; + max-width: 1000px; + height: 250px; + position: relative; +} + +.parent::before { + content: ""; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: rgba(236, 236, 236, 0.404); + opacity: 0; + transition: opacity 0.3s ease; + z-index: 1; +} + +.parent:hover::before { + opacity: 1; +} + +.font-bold { + font-weight: bold; +} + +.font-italic { + font-style: italic; +} + +.font-underlined { + text-decoration: underline; +} diff --git a/samples/inputs/action-strip/action-strip-paragraph/src/index.css b/samples/inputs/action-strip/action-strip-paragraph/src/index.css new file mode 100644 index 0000000000..0fe9368715 --- /dev/null +++ b/samples/inputs/action-strip/action-strip-paragraph/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/inputs/action-strip/action-strip-paragraph/src/index.ts b/samples/inputs/action-strip/action-strip-paragraph/src/index.ts new file mode 100644 index 0000000000..3d5c7b1d63 --- /dev/null +++ b/samples/inputs/action-strip/action-strip-paragraph/src/index.ts @@ -0,0 +1,89 @@ +import { defineComponents, IgcButtonGroupComponent, IgcIconComponent, IgcToggleButtonComponent, registerIconFromText } from "igniteui-webcomponents"; +import { IgcActionStripComponent } from "igniteui-webcomponents-grids/grids"; +import "igniteui-webcomponents/themes/light/bootstrap.css"; +import "igniteui-webcomponents-grids/grids/combined"; +import "./ActionStripParagraph.css"; + +defineComponents(IgcButtonGroupComponent); +defineComponents(IgcIconComponent); + +const icons = [ + { + name: "bold", + iconText: + '' + }, + { + name: "italic", + iconText: '' + }, + { + name: "underlined", + iconText: '' + } +]; + +export class ActionStripParagraph { + private actionStrip: IgcActionStripComponent; + + private bold: IgcToggleButtonComponent; + private italic: IgcToggleButtonComponent; + private underlined: IgcToggleButtonComponent; + + private parent: HTMLElement; + + private isBold = false; + private isItalic = false; + private isUnderlined = false; + + constructor() { + icons.forEach((icon) => { + registerIconFromText(icon.name, icon.iconText, "material"); + }); + + this.actionStrip = document.querySelector("igc-action-strip") as IgcActionStripComponent; + + this.bold = document.querySelector(".bold") as IgcToggleButtonComponent; + this.italic = document.querySelector(".italic") as IgcToggleButtonComponent; + this.underlined = document.querySelector(".underlined") as IgcToggleButtonComponent; + + this.parent = document.querySelector(".parent") as HTMLElement; + + this.parent.addEventListener("mouseenter", () => this.actionStrip.show()); + this.parent.addEventListener("mouseleave", () => this.actionStrip.hide()); + + let paragraph = document.querySelector(".paragraph") as HTMLElement; + + this.bold.addEventListener("click", (e) => { + if (!this.isBold) { + paragraph.classList.add("font-bold"); + this.isBold = true; + } else { + paragraph.classList.remove("font-bold"); + this.isBold = false; + } + }); + + this.italic.addEventListener("click", (e) => { + if (!this.isItalic) { + paragraph.classList.add("font-italic"); + this.isItalic = true; + } else { + paragraph.classList.remove("font-italic"); + this.isItalic = false; + } + }); + + this.underlined.addEventListener("click", (e) => { + if (!this.isUnderlined) { + paragraph.classList.add("font-underlined"); + this.isUnderlined = true; + } else { + paragraph.classList.remove("font-underlined"); + this.isUnderlined = false; + } + }); + } +} + +new ActionStripParagraph(); diff --git a/samples/inputs/action-strip/action-strip-paragraph/tsconfig.json b/samples/inputs/action-strip/action-strip-paragraph/tsconfig.json new file mode 100644 index 0000000000..de23257dd8 --- /dev/null +++ b/samples/inputs/action-strip/action-strip-paragraph/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/inputs/action-strip/action-strip-paragraph/webpack.config.js b/samples/inputs/action-strip/action-strip-paragraph/webpack.config.js new file mode 100644 index 0000000000..9d11a6155c --- /dev/null +++ b/samples/inputs/action-strip/action-strip-paragraph/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/inputs/action-strip/action-strip-styling/.prettierrc b/samples/inputs/action-strip/action-strip-styling/.prettierrc new file mode 100644 index 0000000000..15a7c7c6cf --- /dev/null +++ b/samples/inputs/action-strip/action-strip-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/inputs/action-strip/action-strip-styling/ReadMe.md b/samples/inputs/action-strip/action-strip-styling/ReadMe.md new file mode 100644 index 0000000000..0ad74d2a33 --- /dev/null +++ b/samples/inputs/action-strip/action-strip-styling/ReadMe.md @@ -0,0 +1,56 @@ + + + +This folder contains implementation of Web Components application with example of Outlined feature using [Button](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/inputs/button/outlined +``` + +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/inputs/action-strip/action-strip-styling/index.html b/samples/inputs/action-strip/action-strip-styling/index.html new file mode 100644 index 0000000000..7c6cf3f7be --- /dev/null +++ b/samples/inputs/action-strip/action-strip-styling/index.html @@ -0,0 +1,37 @@ + + + + Action Strip Styling + + + + + + + + + + +
+
+
+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi non nibh eu libero commodo posuere at id augue. Morbi nec justo enim. Sed placerat fringilla quam in pharetra. Pellentesque imperdiet lorem quis sem bibendum + molestie. Aliquam fringilla tellus nec convallis sodales. Suspendisse a eros accumsan, mattis mauris id, malesuada nibh. Maecenas eget augue faucibus, euismod arcu sit amet, tempus nisi. Sed tellus nisl, luctus vitae + vestibulum ac, vehicula non ex. Donec condimentum rhoncus enim, et efficitur tortor faucibus sed. Integer at mauris facilisis mauris condimentum bibendum. Maecenas eget lacus dolor. Etiam pulvinar, sapien vitae fermentum + interdum, nunc justo facilisis est, eu ullamcorper dolor lectus sit amet nisl. Quisque aliquam urna ut leo mollis luctus. Morbi lacinia orci augue, sed blandit est ornare placerat. Cras a ante nec mauris euismod aliquam vel + pulvinar urna. Morbi tincidunt fringilla tortor, at ultricies neque rhoncus ac. +

+ + + + +
+
+
+ + <% if (false) { %> + + <% } %> + + diff --git a/samples/inputs/action-strip/action-strip-styling/package.json b/samples/inputs/action-strip/action-strip-styling/package.json new file mode 100644 index 0000000000..2f8a76b5d5 --- /dev/null +++ b/samples/inputs/action-strip/action-strip-styling/package.json @@ -0,0 +1,60 @@ +{ + "name": "wc-action-strip-styling", + "version": "1.0.0", + "description": "This project provides example of action strip 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": "4.8.0", + "igniteui-webcomponents-grids": "4.8.1-alpha.0", + "lit": "^2.0.2", + "lit-html": "^2.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.74.0", + "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/inputs/action-strip/action-strip-styling/sandbox.config.json b/samples/inputs/action-strip/action-strip-styling/sandbox.config.json new file mode 100644 index 0000000000..5c5b54fe21 --- /dev/null +++ b/samples/inputs/action-strip/action-strip-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/inputs/action-strip/action-strip-styling/src/ActionStripStyling.css b/samples/inputs/action-strip/action-strip-styling/src/ActionStripStyling.css new file mode 100644 index 0000000000..2114c46cf3 --- /dev/null +++ b/samples/inputs/action-strip/action-strip-styling/src/ActionStripStyling.css @@ -0,0 +1,40 @@ +.igx-action-strip__actions { + display: flex; + flex-direction: column; + max-height: 72px; +} + +igc-action-strip { + display: flex; + justify-content: center; + width: 100%; + height: 100%; + align-items: flex-end; + --ig-action-strip-background: rgba(236, 236, 236, 0.4); + --ig-action-strip-actions-background: rgba(255, 255, 255, 0.8); + --ig-action-strip-actions-border-radius: 0; +} + +igc-button::part(base) { + background-color: rgb(233, 233, 233); + color: #005EEC; +} + +igc-button::part(base):hover { + background-color: rgb(240, 240, 240); +} + +.parent { + display: flex; + align-items: center; + justify-content: center; + padding: 1rem; + margin: auto; + min-width: 700px; + max-width: 1000px; + position: relative; +} + +.text-strike-through { + text-decoration: line-through; +} diff --git a/samples/inputs/action-strip/action-strip-styling/src/index.css b/samples/inputs/action-strip/action-strip-styling/src/index.css new file mode 100644 index 0000000000..0fe9368715 --- /dev/null +++ b/samples/inputs/action-strip/action-strip-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/inputs/action-strip/action-strip-styling/src/index.ts b/samples/inputs/action-strip/action-strip-styling/src/index.ts new file mode 100644 index 0000000000..648af98918 --- /dev/null +++ b/samples/inputs/action-strip/action-strip-styling/src/index.ts @@ -0,0 +1,60 @@ +import { defineComponents, IgcIconComponent, IgcRippleComponent, IgcButtonComponent, registerIconFromText } from "igniteui-webcomponents"; +import { IgcActionStripComponent } from "igniteui-webcomponents-grids/grids"; +import "igniteui-webcomponents/themes/light/bootstrap.css"; +import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css"; +import "igniteui-webcomponents-grids/grids/combined"; +import "./ActionStripStyling.css"; + +defineComponents(IgcIconComponent); +defineComponents(IgcRippleComponent); +defineComponents(IgcButtonComponent); + +const icons = [ + { + name: "restore", + iconText: + '' + }, + { + name: "delete", + iconText: + '' + } +]; + +export class ActionStripStyling { + private actionStrip: IgcActionStripComponent; + + private restore: HTMLElement; + private delete: HTMLElement; + + private parent: HTMLElement; + + constructor() { + icons.forEach((icon) => { + registerIconFromText(icon.name, icon.iconText, "material"); + }); + + this.actionStrip = document.querySelector("igc-action-strip") as IgcActionStripComponent; + + this.restore = document.querySelector(".restore") as IgcButtonComponent; + this.delete = document.querySelector(".delete") as IgcButtonComponent; + + this.parent = document.querySelector(".parent") as HTMLElement; + + this.parent.addEventListener("mouseenter", () => this.actionStrip.show()); + this.parent.addEventListener("mouseleave", () => this.actionStrip.hide()); + + let paragraph = document.querySelector(".paragraph") as HTMLElement; + + this.restore.addEventListener("click", (e) => { + paragraph.classList.remove("text-strike-through"); + }); + + this.delete.addEventListener("click", (e) => { + paragraph.classList.add("text-strike-through"); + }); + } +} + +new ActionStripStyling(); diff --git a/samples/inputs/action-strip/action-strip-styling/tsconfig.json b/samples/inputs/action-strip/action-strip-styling/tsconfig.json new file mode 100644 index 0000000000..de23257dd8 --- /dev/null +++ b/samples/inputs/action-strip/action-strip-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/inputs/action-strip/action-strip-styling/webpack.config.js b/samples/inputs/action-strip/action-strip-styling/webpack.config.js new file mode 100644 index 0000000000..9d11a6155c --- /dev/null +++ b/samples/inputs/action-strip/action-strip-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() + ] + }; +}; diff --git a/samples/inputs/action-strip/grid-action-strip/.prettierrc b/samples/inputs/action-strip/grid-action-strip/.prettierrc new file mode 100644 index 0000000000..15a7c7c6cf --- /dev/null +++ b/samples/inputs/action-strip/grid-action-strip/.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/inputs/action-strip/grid-action-strip/ReadMe copy.md b/samples/inputs/action-strip/grid-action-strip/ReadMe copy.md new file mode 100644 index 0000000000..0ad74d2a33 --- /dev/null +++ b/samples/inputs/action-strip/grid-action-strip/ReadMe copy.md @@ -0,0 +1,56 @@ + + + +This folder contains implementation of Web Components application with example of Outlined feature using [Button](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/inputs/button/outlined +``` + +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/inputs/action-strip/grid-action-strip/ReadMe.md b/samples/inputs/action-strip/grid-action-strip/ReadMe.md new file mode 100644 index 0000000000..0ad74d2a33 --- /dev/null +++ b/samples/inputs/action-strip/grid-action-strip/ReadMe.md @@ -0,0 +1,56 @@ + + + +This folder contains implementation of Web Components application with example of Outlined feature using [Button](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/inputs/button/outlined +``` + +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/inputs/action-strip/grid-action-strip/index.html b/samples/inputs/action-strip/grid-action-strip/index.html new file mode 100644 index 0000000000..7991700a31 --- /dev/null +++ b/samples/inputs/action-strip/grid-action-strip/index.html @@ -0,0 +1,40 @@ + + + + Grid Action Strip + + + + + + + + + + +
+
+
+ + + + + + + + + + + + + +
+
+
+ + + <% if (false) { %> + + <% } %> + + diff --git a/samples/inputs/action-strip/grid-action-strip/package.json b/samples/inputs/action-strip/grid-action-strip/package.json new file mode 100644 index 0000000000..9ebcf7eac6 --- /dev/null +++ b/samples/inputs/action-strip/grid-action-strip/package.json @@ -0,0 +1,62 @@ +{ + "name": "wc-grid-action-strip", + "description": "This project provides example of grid with action strip using IgniteUI for Web Components", + "author": "Infragistics", + "version": "1.0.0", + "license": "", + "private": true, + "homepage": ".", + "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" + }, + "dependencies": { + "@webcomponents/custom-elements": "^1.4.1", + "@webcomponents/template": "^1.4.2", + "babel-runtime": "^6.26.0", + "core-js": "^3.6.5", + "igniteui-webcomponents-core": "4.8.1-alpha.0", + "igniteui-webcomponents-grids": "4.8.1-alpha.0", + "igniteui-webcomponents-inputs": "4.8.1-alpha.0", + "igniteui-webcomponents-layouts": "4.8.1-alpha.0", + "lit-html": "^2.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.74.0", + "webpack-cli": "^4.10.0", + "webpack-dev-server": "^4.11.1", + "worker-loader": "^3.0.8", + "xml-loader": "^1.2.1" + } +} diff --git a/samples/inputs/action-strip/grid-action-strip/sandbox.config.json b/samples/inputs/action-strip/grid-action-strip/sandbox.config.json new file mode 100644 index 0000000000..5c5b54fe21 --- /dev/null +++ b/samples/inputs/action-strip/grid-action-strip/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/inputs/action-strip/grid-action-strip/src/NwindData.ts b/samples/inputs/action-strip/grid-action-strip/src/NwindData.ts new file mode 100644 index 0000000000..54742f27c9 --- /dev/null +++ b/samples/inputs/action-strip/grid-action-strip/src/NwindData.ts @@ -0,0 +1,550 @@ +export class NwindDataItem { + public constructor(init: Partial) { + Object.assign(this, init); + } + + public ProductID: number; + public ProductName: string; + public SupplierID: number; + public CategoryID: number; + public QuantityPerUnit: string; + public UnitPrice: number; + public UnitsInStock: number; + public UnitsOnOrder: number; + public ReorderLevel: number; + public Discontinued: boolean; + public OrderDate: string; + public Rating: number; + public Locations: NwindDataItem_LocationsItem[]; + +} +export class NwindDataItem_LocationsItem { + public constructor(init: Partial) { + Object.assign(this, init); + } + + public Shop: string; + public LastInventory: string; + +} +export class NwindData extends Array { + public constructor(items: Array | number = -1) { + if (Array.isArray(items)) { + super(...items); + } else { + const newItems = [ + new NwindDataItem( + { + ProductID: 1, + ProductName: `Chai`, + SupplierID: 1, + CategoryID: 1, + QuantityPerUnit: `10 boxes x 20 bags`, + UnitPrice: 18, + UnitsInStock: 39, + UnitsOnOrder: 30, + ReorderLevel: 10, + Discontinued: false, + OrderDate: `2012-02-12`, + Rating: 5, + Locations: [ + new NwindDataItem_LocationsItem( + { + Shop: `Fun-Tasty Co.`, + LastInventory: `2018-06-12` + }), + new NwindDataItem_LocationsItem( + { + Shop: `Farmer Market`, + LastInventory: `2018-04-04` + })] + + }), + new NwindDataItem( + { + ProductID: 2, + ProductName: `Chang`, + SupplierID: 1, + CategoryID: 1, + QuantityPerUnit: `24 - 12 oz bottles`, + UnitPrice: 19, + UnitsInStock: 17, + UnitsOnOrder: 40, + ReorderLevel: 25, + Discontinued: true, + OrderDate: `2003-03-17`, + Rating: 5, + Locations: [ + new NwindDataItem_LocationsItem( + { + Shop: `Super Market`, + LastInventory: `2018-09-09` + })] + + }), + new NwindDataItem( + { + ProductID: 3, + ProductName: `Aniseed Syrup`, + SupplierID: 1, + CategoryID: 2, + QuantityPerUnit: `12 - 550 ml bottles`, + UnitPrice: 10, + UnitsInStock: 13, + UnitsOnOrder: 70, + ReorderLevel: 25, + Discontinued: false, + OrderDate: `2006-03-17`, + Rating: 3, + Locations: [ + new NwindDataItem_LocationsItem( + { + Shop: `Farmer Market`, + LastInventory: `2018-04-04` + }), + new NwindDataItem_LocationsItem( + { + Shop: `Street Market`, + LastInventory: `2018-12-12` + }), + new NwindDataItem_LocationsItem( + { + Shop: `24/7 Market`, + LastInventory: `2018-11-11` + })] + + }), + new NwindDataItem( + { + ProductID: 4, + ProductName: `Chef Antons Cajun Seasoning`, + SupplierID: 2, + CategoryID: 2, + QuantityPerUnit: `48 - 6 oz jars`, + UnitPrice: 22, + UnitsInStock: 53, + UnitsOnOrder: 30, + ReorderLevel: 0, + Discontinued: false, + OrderDate: `2016-03-17`, + Rating: 3, + Locations: [ + new NwindDataItem_LocationsItem( + { + Shop: `Fun-Tasty Co.`, + LastInventory: `2018-06-12` + }), + new NwindDataItem_LocationsItem( + { + Shop: `Farmer Market`, + LastInventory: `2018-04-04` + }), + new NwindDataItem_LocationsItem( + { + Shop: `Street Market`, + LastInventory: `2018-12-12` + })] + + }), + new NwindDataItem( + { + ProductID: 5, + ProductName: `Chef Antons Gumbo Mix`, + SupplierID: 2, + CategoryID: 2, + QuantityPerUnit: `36 boxes`, + UnitPrice: 21.35, + UnitsInStock: 0, + UnitsOnOrder: 30, + ReorderLevel: 0, + Discontinued: true, + OrderDate: `2011-11-11`, + Rating: 5, + Locations: [ + new NwindDataItem_LocationsItem( + { + Shop: `Super Market`, + LastInventory: `2018-09-09` + })] + + }), + new NwindDataItem( + { + ProductID: 6, + ProductName: `Grandmas Boysenberry Spread`, + SupplierID: 3, + CategoryID: 2, + QuantityPerUnit: `12 - 8 oz jars`, + UnitPrice: 25, + UnitsInStock: 0, + UnitsOnOrder: 30, + ReorderLevel: 25, + Discontinued: false, + OrderDate: `2017-12-17`, + Rating: 4, + Locations: [ + new NwindDataItem_LocationsItem( + { + Shop: `Super Market`, + LastInventory: `2018-09-09` + })] + + }), + new NwindDataItem( + { + ProductID: 7, + ProductName: `Uncle Bobs Organic Dried Pears`, + SupplierID: 3, + CategoryID: 7, + QuantityPerUnit: `12 - 1 lb pkgs.`, + UnitPrice: 30, + UnitsInStock: 150, + UnitsOnOrder: 30, + ReorderLevel: 10, + Discontinued: false, + OrderDate: `2016-07-17`, + Rating: 5, + Locations: [ + new NwindDataItem_LocationsItem( + { + Shop: `Fun-Tasty Co.`, + LastInventory: `2018-06-12` + }), + new NwindDataItem_LocationsItem( + { + Shop: `Farmer Market`, + LastInventory: `2018-04-04` + }), + new NwindDataItem_LocationsItem( + { + Shop: `Street Market`, + LastInventory: `2018-12-12` + })] + + }), + new NwindDataItem( + { + ProductID: 8, + ProductName: `Northwoods Cranberry Sauce`, + SupplierID: 3, + CategoryID: 2, + QuantityPerUnit: `12 - 12 oz jars`, + UnitPrice: 40, + UnitsInStock: 6, + UnitsOnOrder: 30, + ReorderLevel: 0, + Discontinued: false, + OrderDate: `2018-01-17`, + Rating: 4, + Locations: [ + new NwindDataItem_LocationsItem( + { + Shop: `Fun-Tasty Co.`, + LastInventory: `2018-06-12` + }), + new NwindDataItem_LocationsItem( + { + Shop: `Farmer Market`, + LastInventory: `2018-04-04` + })] + + }), + new NwindDataItem( + { + ProductID: 9, + ProductName: `Mishi Kobe Niku`, + SupplierID: 4, + CategoryID: 6, + QuantityPerUnit: `18 - 500 g pkgs.`, + UnitPrice: 97, + UnitsInStock: 29, + UnitsOnOrder: 30, + ReorderLevel: 0, + Discontinued: true, + OrderDate: `2010-02-17`, + Rating: 4, + Locations: [ + new NwindDataItem_LocationsItem( + { + Shop: `Farmer Market`, + LastInventory: `2018-04-04` + })] + + }), + new NwindDataItem( + { + ProductID: 10, + ProductName: `Ikura`, + SupplierID: 4, + CategoryID: 8, + QuantityPerUnit: `12 - 200 ml jars`, + UnitPrice: 31, + UnitsInStock: 31, + UnitsOnOrder: 30, + ReorderLevel: 0, + Discontinued: false, + OrderDate: `2008-05-17`, + Rating: 3, + Locations: [ + new NwindDataItem_LocationsItem( + { + Shop: `Wall Market`, + LastInventory: `2018-12-06` + })] + + }), + new NwindDataItem( + { + ProductID: 11, + ProductName: `Queso Cabrales`, + SupplierID: 5, + CategoryID: 4, + QuantityPerUnit: `1 kg pkg.`, + UnitPrice: 21, + UnitsInStock: 22, + UnitsOnOrder: 30, + ReorderLevel: 30, + Discontinued: false, + OrderDate: `2009-01-17`, + Rating: 5, + Locations: [ + new NwindDataItem_LocationsItem( + { + Shop: `Fun-Tasty Co.`, + LastInventory: `2018-06-12` + }), + new NwindDataItem_LocationsItem( + { + Shop: `Farmer Market`, + LastInventory: `2018-04-04` + })] + + }), + new NwindDataItem( + { + ProductID: 12, + ProductName: `Queso Manchego La Pastora`, + SupplierID: 5, + CategoryID: 4, + QuantityPerUnit: `10 - 500 g pkgs.`, + UnitPrice: 38, + UnitsInStock: 86, + UnitsOnOrder: 30, + ReorderLevel: 0, + Discontinued: false, + OrderDate: `2015-11-17`, + Rating: 3, + Locations: [ + new NwindDataItem_LocationsItem( + { + Shop: `Farmer Market`, + LastInventory: `2018-04-04` + })] + + }), + new NwindDataItem( + { + ProductID: 13, + ProductName: `Konbu`, + SupplierID: 6, + CategoryID: 8, + QuantityPerUnit: `2 kg box`, + UnitPrice: 6, + UnitsInStock: 24, + UnitsOnOrder: 30, + ReorderLevel: 5, + Discontinued: false, + OrderDate: `2015-03-17`, + Rating: 2, + Locations: [ + new NwindDataItem_LocationsItem( + { + Shop: `Super Market`, + LastInventory: `2018-09-09` + })] + + }), + new NwindDataItem( + { + ProductID: 14, + ProductName: `Tofu`, + SupplierID: 6, + CategoryID: 7, + QuantityPerUnit: `40 - 100 g pkgs.`, + UnitPrice: 23.25, + UnitsInStock: 35, + UnitsOnOrder: 30, + ReorderLevel: 0, + Discontinued: false, + OrderDate: `2017-06-17`, + Rating: 4, + Locations: [ + new NwindDataItem_LocationsItem( + { + Shop: `Farmer Market`, + LastInventory: `2018-04-04` + }), + new NwindDataItem_LocationsItem( + { + Shop: `Street Market`, + LastInventory: `2018-12-12` + })] + + }), + new NwindDataItem( + { + ProductID: 15, + ProductName: `Genen Shouyu`, + SupplierID: 6, + CategoryID: 2, + QuantityPerUnit: `24 - 250 ml bottles`, + UnitPrice: 15.5, + UnitsInStock: 39, + UnitsOnOrder: 30, + ReorderLevel: 5, + Discontinued: false, + OrderDate: `2014-03-17`, + Rating: 4, + Locations: [ + new NwindDataItem_LocationsItem( + { + Shop: `Local Market`, + LastInventory: `2018-07-03` + }), + new NwindDataItem_LocationsItem( + { + Shop: `Wall Market`, + LastInventory: `2018-12-06` + })] + + }), + new NwindDataItem( + { + ProductID: 16, + ProductName: `Pavlova`, + SupplierID: 7, + CategoryID: 3, + QuantityPerUnit: `32 - 500 g boxes`, + UnitPrice: 17.45, + UnitsInStock: 29, + UnitsOnOrder: 30, + ReorderLevel: 10, + Discontinued: false, + OrderDate: `2018-03-28`, + Rating: 2, + Locations: [ + new NwindDataItem_LocationsItem( + { + Shop: `Farmer Market`, + LastInventory: `2018-04-04` + }), + new NwindDataItem_LocationsItem( + { + Shop: `Street Market`, + LastInventory: `2018-12-12` + }), + new NwindDataItem_LocationsItem( + { + Shop: `24/7 Market`, + LastInventory: `2018-11-11` + })] + + }), + new NwindDataItem( + { + ProductID: 17, + ProductName: `Alice Mutton`, + SupplierID: 7, + CategoryID: 6, + QuantityPerUnit: `20 - 1 kg tins`, + UnitPrice: 39, + UnitsInStock: 0, + UnitsOnOrder: 30, + ReorderLevel: 0, + Discontinued: true, + OrderDate: `2015-08-17`, + Rating: 2, + Locations: [ + new NwindDataItem_LocationsItem( + { + Shop: `Farmer Market`, + LastInventory: `2018-04-04` + })] + + }), + new NwindDataItem( + { + ProductID: 18, + ProductName: `Carnarvon Tigers`, + SupplierID: 7, + CategoryID: 8, + QuantityPerUnit: `16 kg pkg.`, + UnitPrice: 62.5, + UnitsInStock: 42, + UnitsOnOrder: 30, + ReorderLevel: 0, + Discontinued: false, + OrderDate: `2005-09-27`, + Rating: 2, + Locations: [ + new NwindDataItem_LocationsItem( + { + Shop: `24/7 Market`, + LastInventory: `2018-11-11` + }), + new NwindDataItem_LocationsItem( + { + Shop: `Super Market`, + LastInventory: `2018-09-09` + })] + + }), + new NwindDataItem( + { + ProductID: 19, + ProductName: `Teatime Chocolate Biscuits`, + SupplierID: 8, + CategoryID: 3, + QuantityPerUnit: ``, + UnitPrice: 9.2, + UnitsInStock: 25, + UnitsOnOrder: 30, + ReorderLevel: 5, + Discontinued: false, + OrderDate: `2001-03-17`, + Rating: 2, + Locations: [ + new NwindDataItem_LocationsItem( + { + Shop: `Local Market`, + LastInventory: `2018-07-03` + })] + + }), + new NwindDataItem( + { + ProductID: 20, + ProductName: `Sir Rodneys Marmalade`, + SupplierID: 8, + CategoryID: 3, + QuantityPerUnit: `4 - 100 ml jars`, + UnitPrice: 4.5, + UnitsInStock: 40, + UnitsOnOrder: 30, + ReorderLevel: 0, + Discontinued: false, + OrderDate: `2005-03-17`, + Rating: 5, + Locations: [ + new NwindDataItem_LocationsItem( + { + Shop: `Super Market`, + LastInventory: `2018-09-09` + })] + + }), + ]; + super(...(newItems.slice(0, items))); + } + } +} diff --git a/samples/inputs/action-strip/grid-action-strip/src/index.css b/samples/inputs/action-strip/grid-action-strip/src/index.css new file mode 100644 index 0000000000..0fe9368715 --- /dev/null +++ b/samples/inputs/action-strip/grid-action-strip/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/inputs/action-strip/grid-action-strip/src/index.ts b/samples/inputs/action-strip/grid-action-strip/src/index.ts new file mode 100644 index 0000000000..9c7361f395 --- /dev/null +++ b/samples/inputs/action-strip/grid-action-strip/src/index.ts @@ -0,0 +1,75 @@ +import { IgcPropertyEditorPanelModule } from 'igniteui-webcomponents-layouts'; +import { ComponentRenderer, PropertyEditorPanelDescriptionModule, WebGridDescriptionModule } from 'igniteui-webcomponents-core'; +import { IgcGridComponent, IgcPinningConfig, RowPinningPosition, IgcActionStripComponent, IgcColumnComponent } from 'igniteui-webcomponents-grids/grids'; +import { NwindDataItem, NwindDataItem_LocationsItem, NwindData } from './NwindData'; +import 'igniteui-webcomponents-grids/grids/combined'; +import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css"; +import { ModuleManager } from 'igniteui-webcomponents-core'; +import "./index.css"; + +ModuleManager.register( + IgcPropertyEditorPanelModule +); + +export class GridActionStrip { + + private grid: IgcGridComponent + private _pinningConfig1: IgcPinningConfig | null = null; + public get pinningConfig1(): IgcPinningConfig { + if (this._pinningConfig1 == null) + { + var pinningConfig1: IgcPinningConfig = {} as IgcPinningConfig; + pinningConfig1.rows = RowPinningPosition.Top; + + this._pinningConfig1 = pinningConfig1; + } + return this._pinningConfig1; + } + private actionStrip: IgcActionStripComponent + private productName: IgcColumnComponent + private unitPrice: IgcColumnComponent + private unitsOnOrder: IgcColumnComponent + private unitsInStock: IgcColumnComponent + private quantityPerUnit: IgcColumnComponent + private reorderLevel: IgcColumnComponent + private discontinued: IgcColumnComponent + private _bind: () => void; + + constructor() { + var grid = this.grid = document.getElementById('grid') as IgcGridComponent; + var actionStrip = this.actionStrip = document.getElementById('actionStrip') as IgcActionStripComponent; + var productName = this.productName = document.getElementById('ProductName') as IgcColumnComponent; + var unitPrice = this.unitPrice = document.getElementById('UnitPrice') as IgcColumnComponent; + var unitsOnOrder = this.unitsOnOrder = document.getElementById('UnitsOnOrder') as IgcColumnComponent; + var unitsInStock = this.unitsInStock = document.getElementById('UnitsInStock') as IgcColumnComponent; + var quantityPerUnit = this.quantityPerUnit = document.getElementById('QuantityPerUnit') as IgcColumnComponent; + var reorderLevel = this.reorderLevel = document.getElementById('ReorderLevel') as IgcColumnComponent; + var discontinued = this.discontinued = document.getElementById('Discontinued') as IgcColumnComponent; + + this._bind = () => { + grid.data = this.nwindData; + grid.pinning = this.pinningConfig1; + } + this._bind(); + + } + + private _nwindData: NwindData = new NwindData(); + public get nwindData(): NwindData { + return this._nwindData; + } + + private _componentRenderer: ComponentRenderer = null; + public get renderer(): ComponentRenderer { + if (this._componentRenderer == null) { + this._componentRenderer = new ComponentRenderer(); + var context = this._componentRenderer.context; + PropertyEditorPanelDescriptionModule.register(context); + WebGridDescriptionModule.register(context); + } + return this._componentRenderer; + } + +} + +new GridActionStrip(); diff --git a/samples/inputs/action-strip/grid-action-strip/tsconfig.json b/samples/inputs/action-strip/grid-action-strip/tsconfig.json new file mode 100644 index 0000000000..de23257dd8 --- /dev/null +++ b/samples/inputs/action-strip/grid-action-strip/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/inputs/action-strip/grid-action-strip/webpack.config.js b/samples/inputs/action-strip/grid-action-strip/webpack.config.js new file mode 100644 index 0000000000..9d11a6155c --- /dev/null +++ b/samples/inputs/action-strip/grid-action-strip/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() + ] + }; +};