diff --git a/samples/layouts/icon/references/.prettierrc b/samples/layouts/icon/references/.prettierrc new file mode 100644 index 0000000000..15a7c7c6cf --- /dev/null +++ b/samples/layouts/icon/references/.prettierrc @@ -0,0 +1,11 @@ +{ + "printWidth": 250, + "tabWidth": 4, + "useTabs": false, + "semi": true, + "singleQuote": false, + "trailingComma": "none", + "bracketSpacing": true, + "jsxBracketSameLine": false, + "fluid": false +} \ No newline at end of file diff --git a/samples/layouts/icon/references/ReadMe.md b/samples/layouts/icon/references/ReadMe.md new file mode 100644 index 0000000000..6cc890bc77 --- /dev/null +++ b/samples/layouts/icon/references/ReadMe.md @@ -0,0 +1,56 @@ + + + +This folder contains implementation of Web Components application with example of Sizing feature using [Icon](https://infragistics.com/webcomponentssite/components/general-getting-started.html) component. + + + + + + View Docs + + + View Code + + + Run Sample + + + Run Sample + + + + +## Branches + +> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-angular-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-angular-examples/tree/vnext) branch only when you want to contribute new samples to this repository. + +## Instructions + +To set up this project locally, execute these commands: + +``` +git clone https://github.com/IgniteUI/igniteui-wc-examples.git +git checkout master +cd ./igniteui-wc-examples +cd ./samples/layouts/icon/sizing +``` + +open above folder in VS Code or type: +``` +code . +``` + +In terminal window, run: + +``` +npm install +npm run start +``` + +Then open http://localhost:4200/ in your browser + + +## Learn More + +To learn more about **Ignite UI for Web Components**, check out the [Web Components documentation](https://infragistics.com/webcomponentssite/components/general-getting-started.html). diff --git a/samples/layouts/icon/references/index.html b/samples/layouts/icon/references/index.html new file mode 100644 index 0000000000..1e3c9477d9 --- /dev/null +++ b/samples/layouts/icon/references/index.html @@ -0,0 +1,29 @@ + + + + Icon References + + + + + + + + + + +
+
+
+ + + +
+
+
+ + <% if (false) { %> + + <% } %> + + diff --git a/samples/layouts/icon/references/package.json b/samples/layouts/icon/references/package.json new file mode 100644 index 0000000000..b35b471fe2 --- /dev/null +++ b/samples/layouts/icon/references/package.json @@ -0,0 +1,60 @@ +{ + "name": "example-ignite-ui-web-components", + "description": "This project provides example of using Ignite UI 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": "file:../../../../../igniteui-webcomponents/dist/igniteui-webcomponents-0.0.0.tgz", + "lit": "^2.0.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/layouts/icon/references/sandbox.config.json b/samples/layouts/icon/references/sandbox.config.json new file mode 100644 index 0000000000..52c7875103 --- /dev/null +++ b/samples/layouts/icon/references/sandbox.config.json @@ -0,0 +1,6 @@ +{ + "infiniteLoopProtection": false, + "hardReloadOnChange": false, + "view": "browser", + "template": "parcel" +} \ No newline at end of file diff --git a/samples/layouts/icon/references/src/index.css b/samples/layouts/icon/references/src/index.css new file mode 100644 index 0000000000..edb96af068 --- /dev/null +++ b/samples/layouts/icon/references/src/index.css @@ -0,0 +1,50 @@ +/* shared styles are loaded from: */ +/* https://static.infragistics.com/xplatform/css/samples */ +.controls { + display: flex; + gap: 1rem; + flex-direction: row; + border: 1px solid hsl(var(--ig-gray-300)); + justify-items: center; + justify-content: center; +} + +igc-icon { + --size: 3rem; + color: hsl(var(--ig-gray-600)); +} + +igc-icon[name="control"] { + position: relative; + --size: 4rem; + cursor: pointer; + color: hsl(var(--ig-gray-800)); + z-index: 0; + + &::after { + position: absolute; + content: ''; + inset: 0; + background: hsl(var(--ig-warn-500)); + border-radius: 50%; + animation: pulse 1.25s ease-in-out infinite both; + z-index: -1; + } +} + +@keyframes pulse { + 0% { + transform: scale(.5); + opacity: 0; + } + + 50% { + transform: scale(1); + opacity: .5; + } + + 100% { + transform: scale(.5); + opacity: 0; + } +} diff --git a/samples/layouts/icon/references/src/index.ts b/samples/layouts/icon/references/src/index.ts new file mode 100644 index 0000000000..b22d82adf1 --- /dev/null +++ b/samples/layouts/icon/references/src/index.ts @@ -0,0 +1,50 @@ +import { defineComponents, IgcIconComponent, registerIcon, setIconRef } from "igniteui-webcomponents"; +import "igniteui-webcomponents/themes/light/bootstrap.css"; +import "./index.css"; + +defineComponents(IgcIconComponent); + +export class IconReferences { + private playing = false; + + constructor() { + const icon = document.querySelector("igc-icon[name='control']"); + icon?.addEventListener("click", this.togglePlayer.bind(this)); + this.setIcon(); + } + + public static async build() { + await registerIcon("rewind", "https://cdn.jsdelivr.net/npm/material-design-icons@3.0.1/av/svg/production/ic_fast_rewind_24px.svg", "material"); + await registerIcon("forward", "https://cdn.jsdelivr.net/npm/material-design-icons@3.0.1/av/svg/production/ic_fast_forward_24px.svg", "material"); + await registerIcon("play", "https://cdn.jsdelivr.net/npm/material-design-icons@3.0.1/av/svg/production/ic_play_circle_filled_24px.svg", "material"); + await registerIcon("pause", "https://cdn.jsdelivr.net/npm/material-design-icons@3.0.1/av/svg/production/ic_pause_circle_filled_24px.svg", "material"); + + setIconRef("rewind", "player", { + name: "rewind", + collection: "material" + }); + + setIconRef("forward", "player", { + name: "forward", + collection: "material" + }); + + return new IconReferences(); + } + + private setIcon() { + setIconRef("control", "player", { + name: this.playing ? "pause" : "play", + collection: "material" + }); + } + + private togglePlayer() { + this.playing = !this.playing; + this.setIcon(); + } +} + +(async () => { + await IconReferences.build(); +})(); diff --git a/samples/layouts/icon/references/tsconfig.json b/samples/layouts/icon/references/tsconfig.json new file mode 100644 index 0000000000..7c639d7f0c --- /dev/null +++ b/samples/layouts/icon/references/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" + ] +} diff --git a/samples/layouts/icon/references/tslint.json b/samples/layouts/icon/references/tslint.json new file mode 100644 index 0000000000..18e202b1f9 --- /dev/null +++ b/samples/layouts/icon/references/tslint.json @@ -0,0 +1,53 @@ +{ + "extends": ["tslint:recommended", "tslint-react", "tslint-config-prettier"], + "linterOptions": { + "exclude": [ + "node_modules/**/*.ts", + "**/odatajs-4.0.0.js", + "src/images/*.*" + ] + }, + "rules": { + "only-arrow-functions": false, + "jsx-self-close": false, + "jsx-wrap-multiline": false, + "no-var-requires": false, + "no-var": false, + "no-var-keyword": false, + "no-console": false, + "no-string-literal": false, + "no-unused-vars": false, + "@typescript-eslint/no-unused-vars": "off", + "jsx-no-lambda": false, + "ordered-imports": false, + "object-literal-sort-keys": false, + "object-literal-shorthand": false, + "member-ordering": false, + "curly": [false, "ignore-same-line"], + "max-classes-per-file": [true, 10], + "prefer-const": false, + "prefer-for-of": false, + "no-useless-constructor": false, + "@typescript-eslint/no-useless-constructor": "off", + "@typescript-eslint/type-annotation-spacing": "off" + }, + "jsRules": { + "only-arrow-functions": false, + "jsx-self-close": false, + "jsx-wrap-multiline": false, + "no-var-requires": false, + "no-console": false, + "no-unused-vars": false, + "@typescript-eslint/no-unused-vars": "off", + "jsx-no-lambda": false, + "ordered-imports": false, + "object-literal-sort-keys": false, + "object-literal-shorthand": false, + "curly": [false, "ignore-same-line"], + "max-classes-per-file": [true, 10], + "prefer-const": false, + "prefer-for-of": false, + "no-useless-constructor": false, + "@typescript-eslint/no-useless-constructor": "off" + } + } \ No newline at end of file diff --git a/samples/layouts/icon/references/webpack.config.js b/samples/layouts/icon/references/webpack.config.js new file mode 100644 index 0000000000..9d11a6155c --- /dev/null +++ b/samples/layouts/icon/references/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() + ] + }; +};