From 92cb129bf9addfeb5d47883efbaa4543143d4467 Mon Sep 17 00:00:00 2001 From: Georgi Anastasov Date: Fri, 31 May 2024 13:51:58 +0300 Subject: [PATCH 1/3] feat(action-atrip): Add action strip samples for Web Components --- .../action-strip-paragraph-menu/.prettierrc | 11 + .../action-strip-paragraph-menu/ReadMe.md | 56 ++ .../action-strip-paragraph-menu/index.html | 53 ++ .../action-strip-paragraph-menu/package.json | 60 ++ .../sandbox.config.json | 7 + .../src/ActionStripParagraphMenu.css | 65 +++ .../action-strip-paragraph-menu/src/index.css | 2 + .../action-strip-paragraph-menu/src/index.ts | 104 ++++ .../action-strip-paragraph-menu/tsconfig.json | 20 + .../webpack.config.js | 105 ++++ .../action-strip-paragraph/.prettierrc | 11 + .../action-strip-paragraph/ReadMe.md | 56 ++ .../action-strip-paragraph/index.html | 48 ++ .../action-strip-paragraph/package.json | 60 ++ .../sandbox.config.json | 7 + .../src/ActionStripParagraph.css | 48 ++ .../action-strip-paragraph/src/index.css | 2 + .../action-strip-paragraph/src/index.ts | 89 +++ .../action-strip-paragraph/tsconfig.json | 20 + .../action-strip-paragraph/webpack.config.js | 105 ++++ .../action-strip-styling/.prettierrc | 11 + .../action-strip-styling/ReadMe.md | 56 ++ .../action-strip-styling/index.html | 37 ++ .../action-strip-styling/package.json | 60 ++ .../action-strip-styling/sandbox.config.json | 7 + .../src/ActionStripStyling.css | 51 ++ .../action-strip-styling/src/index.css | 2 + .../action-strip-styling/src/index.ts | 59 ++ .../action-strip-styling/tsconfig.json | 20 + .../action-strip-styling/webpack.config.js | 105 ++++ .../grid-action-strip/.prettierrc | 11 + .../grid-action-strip/ReadMe copy.md | 56 ++ .../action-strip/grid-action-strip/ReadMe.md | 56 ++ .../action-strip/grid-action-strip/index.html | 40 ++ .../grid-action-strip/package.json | 62 ++ .../grid-action-strip/sandbox.config.json | 7 + .../grid-action-strip/src/NwindData.ts | 550 ++++++++++++++++++ .../grid-action-strip/src/index.css | 2 + .../grid-action-strip/src/index.ts | 75 +++ .../grid-action-strip/tsconfig.json | 20 + .../grid-action-strip/webpack.config.js | 105 ++++ 41 files changed, 2321 insertions(+) create mode 100644 samples/inputs/action-strip/action-strip-paragraph-menu/.prettierrc create mode 100644 samples/inputs/action-strip/action-strip-paragraph-menu/ReadMe.md create mode 100644 samples/inputs/action-strip/action-strip-paragraph-menu/index.html create mode 100644 samples/inputs/action-strip/action-strip-paragraph-menu/package.json create mode 100644 samples/inputs/action-strip/action-strip-paragraph-menu/sandbox.config.json create mode 100644 samples/inputs/action-strip/action-strip-paragraph-menu/src/ActionStripParagraphMenu.css create mode 100644 samples/inputs/action-strip/action-strip-paragraph-menu/src/index.css create mode 100644 samples/inputs/action-strip/action-strip-paragraph-menu/src/index.ts create mode 100644 samples/inputs/action-strip/action-strip-paragraph-menu/tsconfig.json create mode 100644 samples/inputs/action-strip/action-strip-paragraph-menu/webpack.config.js create mode 100644 samples/inputs/action-strip/action-strip-paragraph/.prettierrc create mode 100644 samples/inputs/action-strip/action-strip-paragraph/ReadMe.md create mode 100644 samples/inputs/action-strip/action-strip-paragraph/index.html create mode 100644 samples/inputs/action-strip/action-strip-paragraph/package.json create mode 100644 samples/inputs/action-strip/action-strip-paragraph/sandbox.config.json create mode 100644 samples/inputs/action-strip/action-strip-paragraph/src/ActionStripParagraph.css create mode 100644 samples/inputs/action-strip/action-strip-paragraph/src/index.css create mode 100644 samples/inputs/action-strip/action-strip-paragraph/src/index.ts create mode 100644 samples/inputs/action-strip/action-strip-paragraph/tsconfig.json create mode 100644 samples/inputs/action-strip/action-strip-paragraph/webpack.config.js create mode 100644 samples/inputs/action-strip/action-strip-styling/.prettierrc create mode 100644 samples/inputs/action-strip/action-strip-styling/ReadMe.md create mode 100644 samples/inputs/action-strip/action-strip-styling/index.html create mode 100644 samples/inputs/action-strip/action-strip-styling/package.json create mode 100644 samples/inputs/action-strip/action-strip-styling/sandbox.config.json create mode 100644 samples/inputs/action-strip/action-strip-styling/src/ActionStripStyling.css create mode 100644 samples/inputs/action-strip/action-strip-styling/src/index.css create mode 100644 samples/inputs/action-strip/action-strip-styling/src/index.ts create mode 100644 samples/inputs/action-strip/action-strip-styling/tsconfig.json create mode 100644 samples/inputs/action-strip/action-strip-styling/webpack.config.js create mode 100644 samples/inputs/action-strip/grid-action-strip/.prettierrc create mode 100644 samples/inputs/action-strip/grid-action-strip/ReadMe copy.md create mode 100644 samples/inputs/action-strip/grid-action-strip/ReadMe.md create mode 100644 samples/inputs/action-strip/grid-action-strip/index.html create mode 100644 samples/inputs/action-strip/grid-action-strip/package.json create mode 100644 samples/inputs/action-strip/grid-action-strip/sandbox.config.json create mode 100644 samples/inputs/action-strip/grid-action-strip/src/NwindData.ts create mode 100644 samples/inputs/action-strip/grid-action-strip/src/index.css create mode 100644 samples/inputs/action-strip/grid-action-strip/src/index.ts create mode 100644 samples/inputs/action-strip/grid-action-strip/tsconfig.json create mode 100644 samples/inputs/action-strip/grid-action-strip/webpack.config.js 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..d9ad770cbe --- /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 parentElement: 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.parentElement = document.querySelector(".parent") as HTMLElement; + + this.parentElement.addEventListener("mouseenter", () => this.show()); + this.parentElement.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..72ce83e7f5 --- /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 parentElement: 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.parentElement = document.querySelector(".parent") as HTMLElement; + + this.parentElement.addEventListener("mouseenter", () => this.actionStrip.show()); + this.parentElement.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..c4720a16a2 --- /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..74bf934302 --- /dev/null +++ b/samples/inputs/action-strip/action-strip-styling/src/ActionStripStyling.css @@ -0,0 +1,51 @@ +igc-action-strip { + display: flex; + align-items: flex-start; + justify-content: center; + padding: 0.5rem 0.5rem; + position: absolute; + top: 9rem; + left: 57rem; + z-index: 2; + background-color: white; +} + +igc-button { + display: block; + margin-bottom: 0.3rem; +} + +igc-button::part(base) { + background-color: rgb(233, 233, 233); + color: #005EEC; +} + +igc-button::part(base):hover { + background-color: rgb(240, 240, 240); +} + +.parent { + padding: 6rem 1rem 1rem 1rem; + margin: auto; + min-width: 700px; + max-width: 1000px; + height: 300px; + 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; +} + +.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..a5bc44840c --- /dev/null +++ b/samples/inputs/action-strip/action-strip-styling/src/index.ts @@ -0,0 +1,59 @@ +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 "./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 parentElement: 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.parentElement = document.querySelector(".parent") as HTMLElement; + + this.parentElement.addEventListener("mouseenter", () => this.actionStrip.show()); + this.parentElement.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() + ] + }; +}; From 5b0d6ca5930b5ad1a2f5098de141c6e72fbdb7f4 Mon Sep 17 00:00:00 2001 From: Georgi Anastasov Date: Fri, 31 May 2024 14:03:34 +0300 Subject: [PATCH 2/3] fix(action-strip): Change the name of the parent element --- .../action-strip/action-strip-paragraph-menu/src/index.ts | 8 ++++---- .../action-strip/action-strip-paragraph/src/index.ts | 8 ++++---- .../inputs/action-strip/action-strip-styling/src/index.ts | 8 ++++---- 3 files changed, 12 insertions(+), 12 deletions(-) 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 index d9ad770cbe..4f4f0bbcf2 100644 --- a/samples/inputs/action-strip/action-strip-paragraph-menu/src/index.ts +++ b/samples/inputs/action-strip/action-strip-paragraph-menu/src/index.ts @@ -37,7 +37,7 @@ export class ActionStripParagraphMenu { private center: HTMLElement; private right: HTMLElement; - private parentElement: HTMLElement; + private parent: HTMLElement; private isActionStripShown = false; @@ -54,10 +54,10 @@ export class ActionStripParagraphMenu { this.center = document.getElementById("center") as IgcButtonComponent; this.right = document.querySelector(".right") as IgcButtonComponent; - this.parentElement = document.querySelector(".parent") as HTMLElement; + this.parent = document.querySelector(".parent") as HTMLElement; - this.parentElement.addEventListener("mouseenter", () => this.show()); - this.parentElement.addEventListener("mouseleave", () => this.hide()); + this.parent.addEventListener("mouseenter", () => this.show()); + this.parent.addEventListener("mouseleave", () => this.hide()); let paragraph = document.querySelector(".paragraph") as HTMLElement; diff --git a/samples/inputs/action-strip/action-strip-paragraph/src/index.ts b/samples/inputs/action-strip/action-strip-paragraph/src/index.ts index 72ce83e7f5..3d5c7b1d63 100644 --- a/samples/inputs/action-strip/action-strip-paragraph/src/index.ts +++ b/samples/inputs/action-strip/action-strip-paragraph/src/index.ts @@ -30,7 +30,7 @@ export class ActionStripParagraph { private italic: IgcToggleButtonComponent; private underlined: IgcToggleButtonComponent; - private parentElement: HTMLElement; + private parent: HTMLElement; private isBold = false; private isItalic = false; @@ -47,10 +47,10 @@ export class ActionStripParagraph { this.italic = document.querySelector(".italic") as IgcToggleButtonComponent; this.underlined = document.querySelector(".underlined") as IgcToggleButtonComponent; - this.parentElement = document.querySelector(".parent") as HTMLElement; + this.parent = document.querySelector(".parent") as HTMLElement; - this.parentElement.addEventListener("mouseenter", () => this.actionStrip.show()); - this.parentElement.addEventListener("mouseleave", () => this.actionStrip.hide()); + this.parent.addEventListener("mouseenter", () => this.actionStrip.show()); + this.parent.addEventListener("mouseleave", () => this.actionStrip.hide()); let paragraph = document.querySelector(".paragraph") as HTMLElement; diff --git a/samples/inputs/action-strip/action-strip-styling/src/index.ts b/samples/inputs/action-strip/action-strip-styling/src/index.ts index a5bc44840c..c092e8db7e 100644 --- a/samples/inputs/action-strip/action-strip-styling/src/index.ts +++ b/samples/inputs/action-strip/action-strip-styling/src/index.ts @@ -27,7 +27,7 @@ export class ActionStripStyling { private restore: HTMLElement; private delete: HTMLElement; - private parentElement: HTMLElement; + private parent: HTMLElement; constructor() { icons.forEach((icon) => { @@ -39,10 +39,10 @@ export class ActionStripStyling { this.restore = document.querySelector(".restore") as IgcButtonComponent; this.delete = document.querySelector(".delete") as IgcButtonComponent; - this.parentElement = document.querySelector(".parent") as HTMLElement; + this.parent = document.querySelector(".parent") as HTMLElement; - this.parentElement.addEventListener("mouseenter", () => this.actionStrip.show()); - this.parentElement.addEventListener("mouseleave", () => this.actionStrip.hide()); + this.parent.addEventListener("mouseenter", () => this.actionStrip.show()); + this.parent.addEventListener("mouseleave", () => this.actionStrip.hide()); let paragraph = document.querySelector(".paragraph") as HTMLElement; From 2fff5571c7b2752d6e43ca6227c92f5749200ff6 Mon Sep 17 00:00:00 2001 From: Georgi Anastasov Date: Thu, 6 Jun 2024 10:34:26 +0300 Subject: [PATCH 3/3] fix(action-strip): Update styling sample to work --- .../action-strip-styling/index.html | 2 +- .../src/ActionStripStyling.css | 43 +++++++------------ .../action-strip-styling/src/index.ts | 1 + 3 files changed, 18 insertions(+), 28 deletions(-) diff --git a/samples/inputs/action-strip/action-strip-styling/index.html b/samples/inputs/action-strip/action-strip-styling/index.html index c4720a16a2..7c6cf3f7be 100644 --- a/samples/inputs/action-strip/action-strip-styling/index.html +++ b/samples/inputs/action-strip/action-strip-styling/index.html @@ -22,7 +22,7 @@ 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.

-