From 8e983c875093d683a36379cc3a148ba84a457f00 Mon Sep 17 00:00:00 2001 From: Radoslav Karaivanov Date: Tue, 10 Oct 2023 13:29:52 +0300 Subject: [PATCH 1/4] Added textarea samples --- samples/inputs/textarea/overview/.prettierrc | 11 +++ samples/inputs/textarea/overview/ReadMe.md | 51 ++++++++++ samples/inputs/textarea/overview/index.html | 25 +++++ samples/inputs/textarea/overview/package.json | 59 ++++++++++++ .../textarea/overview/sandbox.config.json | 6 ++ .../inputs/textarea/overview/src/index.css | 2 + samples/inputs/textarea/overview/src/index.ts | 4 + .../inputs/textarea/overview/tsconfig.json | 15 +++ .../textarea/overview/webpack.config.js | 95 +++++++++++++++++++ samples/inputs/textarea/resize/.prettierrc | 11 +++ samples/inputs/textarea/resize/ReadMe.md | 51 ++++++++++ samples/inputs/textarea/resize/index.html | 33 +++++++ samples/inputs/textarea/resize/package.json | 59 ++++++++++++ .../textarea/resize/sandbox.config.json | 6 ++ samples/inputs/textarea/resize/src/index.css | 2 + samples/inputs/textarea/resize/src/index.ts | 4 + samples/inputs/textarea/resize/tsconfig.json | 15 +++ .../inputs/textarea/resize/webpack.config.js | 95 +++++++++++++++++++ samples/inputs/textarea/slots/.prettierrc | 11 +++ samples/inputs/textarea/slots/ReadMe.md | 51 ++++++++++ samples/inputs/textarea/slots/index.html | 28 ++++++ samples/inputs/textarea/slots/package.json | 59 ++++++++++++ .../inputs/textarea/slots/sandbox.config.json | 6 ++ samples/inputs/textarea/slots/src/index.css | 2 + samples/inputs/textarea/slots/src/index.ts | 15 +++ samples/inputs/textarea/slots/tsconfig.json | 15 +++ .../inputs/textarea/slots/webpack.config.js | 95 +++++++++++++++++++ samples/inputs/textarea/styling/.prettierrc | 11 +++ samples/inputs/textarea/styling/ReadMe.md | 51 ++++++++++ samples/inputs/textarea/styling/index.html | 28 ++++++ samples/inputs/textarea/styling/package.json | 59 ++++++++++++ .../textarea/styling/sandbox.config.json | 6 ++ samples/inputs/textarea/styling/src/index.css | 2 + samples/inputs/textarea/styling/src/index.ts | 16 ++++ .../inputs/textarea/styling/src/textarea.css | 15 +++ samples/inputs/textarea/styling/tsconfig.json | 15 +++ .../inputs/textarea/styling/webpack.config.js | 95 +++++++++++++++++++ 37 files changed, 1124 insertions(+) create mode 100644 samples/inputs/textarea/overview/.prettierrc create mode 100644 samples/inputs/textarea/overview/ReadMe.md create mode 100644 samples/inputs/textarea/overview/index.html create mode 100644 samples/inputs/textarea/overview/package.json create mode 100644 samples/inputs/textarea/overview/sandbox.config.json create mode 100644 samples/inputs/textarea/overview/src/index.css create mode 100644 samples/inputs/textarea/overview/src/index.ts create mode 100644 samples/inputs/textarea/overview/tsconfig.json create mode 100644 samples/inputs/textarea/overview/webpack.config.js create mode 100644 samples/inputs/textarea/resize/.prettierrc create mode 100644 samples/inputs/textarea/resize/ReadMe.md create mode 100644 samples/inputs/textarea/resize/index.html create mode 100644 samples/inputs/textarea/resize/package.json create mode 100644 samples/inputs/textarea/resize/sandbox.config.json create mode 100644 samples/inputs/textarea/resize/src/index.css create mode 100644 samples/inputs/textarea/resize/src/index.ts create mode 100644 samples/inputs/textarea/resize/tsconfig.json create mode 100644 samples/inputs/textarea/resize/webpack.config.js create mode 100644 samples/inputs/textarea/slots/.prettierrc create mode 100644 samples/inputs/textarea/slots/ReadMe.md create mode 100644 samples/inputs/textarea/slots/index.html create mode 100644 samples/inputs/textarea/slots/package.json create mode 100644 samples/inputs/textarea/slots/sandbox.config.json create mode 100644 samples/inputs/textarea/slots/src/index.css create mode 100644 samples/inputs/textarea/slots/src/index.ts create mode 100644 samples/inputs/textarea/slots/tsconfig.json create mode 100644 samples/inputs/textarea/slots/webpack.config.js create mode 100644 samples/inputs/textarea/styling/.prettierrc create mode 100644 samples/inputs/textarea/styling/ReadMe.md create mode 100644 samples/inputs/textarea/styling/index.html create mode 100644 samples/inputs/textarea/styling/package.json create mode 100644 samples/inputs/textarea/styling/sandbox.config.json create mode 100644 samples/inputs/textarea/styling/src/index.css create mode 100644 samples/inputs/textarea/styling/src/index.ts create mode 100644 samples/inputs/textarea/styling/src/textarea.css create mode 100644 samples/inputs/textarea/styling/tsconfig.json create mode 100644 samples/inputs/textarea/styling/webpack.config.js diff --git a/samples/inputs/textarea/overview/.prettierrc b/samples/inputs/textarea/overview/.prettierrc new file mode 100644 index 0000000000..15a7c7c6cf --- /dev/null +++ b/samples/inputs/textarea/overview/.prettierrc @@ -0,0 +1,11 @@ +{ + "printWidth": 250, + "tabWidth": 4, + "useTabs": false, + "semi": true, + "singleQuote": false, + "trailingComma": "none", + "bracketSpacing": true, + "jsxBracketSameLine": false, + "fluid": false +} \ No newline at end of file diff --git a/samples/inputs/textarea/overview/ReadMe.md b/samples/inputs/textarea/overview/ReadMe.md new file mode 100644 index 0000000000..da881f291a --- /dev/null +++ b/samples/inputs/textarea/overview/ReadMe.md @@ -0,0 +1,51 @@ + + + +This folder contains implementation of Web Components application with example of Overview feature using [Input](https://infragistics.com/webcomponentssite/components/general-getting-started.html) component. + + + + + + View Docs + + + View Code + + + Run Sample + + + Run Sample + + + + +## Instructions + +To set up this project locally, execute these commands: + +``` +git clone https://github.com/IgniteUI/igniteui-wc-examples.git +cd ./igniteui-wc-examples +cd ./samples/inputs/input/overview +``` + +open above folder in VS Code or type: +``` +code . +``` + +In terminal window, run: + +``` +npm install +npm run start +``` + +Then open http://localhost:4200/ in your browser + + +## Learn More + +To learn more about **Ignite UI for Web Components**, check out the [Web Components documentation](https://infragistics.com/webcomponentssite/components/general-getting-started.html). diff --git a/samples/inputs/textarea/overview/index.html b/samples/inputs/textarea/overview/index.html new file mode 100644 index 0000000000..738d6e8c21 --- /dev/null +++ b/samples/inputs/textarea/overview/index.html @@ -0,0 +1,25 @@ + + + + Textarea Overview + + + + + + + + + + +
+
+ It was a dark and stormy night... +
+
+ + <% if (false) { %> + + <% } %> + + diff --git a/samples/inputs/textarea/overview/package.json b/samples/inputs/textarea/overview/package.json new file mode 100644 index 0000000000..d11a64a9e2 --- /dev/null +++ b/samples/inputs/textarea/overview/package.json @@ -0,0 +1,59 @@ +{ + "name": "wc-textarea-overview", + "version": "1.0.0", + "description": "This project provides example of textarea overview 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.5.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/textarea/overview/sandbox.config.json b/samples/inputs/textarea/overview/sandbox.config.json new file mode 100644 index 0000000000..2ab51ac3f9 --- /dev/null +++ b/samples/inputs/textarea/overview/sandbox.config.json @@ -0,0 +1,6 @@ +{ + "infiniteLoopProtection": false, + "hardReloadOnChange": false, + "view": "browser", + "template": "parcel" +} diff --git a/samples/inputs/textarea/overview/src/index.css b/samples/inputs/textarea/overview/src/index.css new file mode 100644 index 0000000000..98682b8543 --- /dev/null +++ b/samples/inputs/textarea/overview/src/index.css @@ -0,0 +1,2 @@ +/* shared styles are loaded from: */ +/* https://static.infragistics.com/xplatform/css/samples */ diff --git a/samples/inputs/textarea/overview/src/index.ts b/samples/inputs/textarea/overview/src/index.ts new file mode 100644 index 0000000000..6dd736d713 --- /dev/null +++ b/samples/inputs/textarea/overview/src/index.ts @@ -0,0 +1,4 @@ +import { defineComponents, IgcTextareaComponent } from "igniteui-webcomponents"; +import "igniteui-webcomponents/themes/light/bootstrap.css"; + +defineComponents(IgcTextareaComponent); diff --git a/samples/inputs/textarea/overview/tsconfig.json b/samples/inputs/textarea/overview/tsconfig.json new file mode 100644 index 0000000000..b4a0e0068d --- /dev/null +++ b/samples/inputs/textarea/overview/tsconfig.json @@ -0,0 +1,15 @@ +{ + "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/inputs/textarea/overview/webpack.config.js b/samples/inputs/textarea/overview/webpack.config.js new file mode 100644 index 0000000000..bd525cc131 --- /dev/null +++ b/samples/inputs/textarea/overview/webpack.config.js @@ -0,0 +1,95 @@ +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/textarea/resize/.prettierrc b/samples/inputs/textarea/resize/.prettierrc new file mode 100644 index 0000000000..15a7c7c6cf --- /dev/null +++ b/samples/inputs/textarea/resize/.prettierrc @@ -0,0 +1,11 @@ +{ + "printWidth": 250, + "tabWidth": 4, + "useTabs": false, + "semi": true, + "singleQuote": false, + "trailingComma": "none", + "bracketSpacing": true, + "jsxBracketSameLine": false, + "fluid": false +} \ No newline at end of file diff --git a/samples/inputs/textarea/resize/ReadMe.md b/samples/inputs/textarea/resize/ReadMe.md new file mode 100644 index 0000000000..da881f291a --- /dev/null +++ b/samples/inputs/textarea/resize/ReadMe.md @@ -0,0 +1,51 @@ + + + +This folder contains implementation of Web Components application with example of Overview feature using [Input](https://infragistics.com/webcomponentssite/components/general-getting-started.html) component. + + + + + + View Docs + + + View Code + + + Run Sample + + + Run Sample + + + + +## Instructions + +To set up this project locally, execute these commands: + +``` +git clone https://github.com/IgniteUI/igniteui-wc-examples.git +cd ./igniteui-wc-examples +cd ./samples/inputs/input/overview +``` + +open above folder in VS Code or type: +``` +code . +``` + +In terminal window, run: + +``` +npm install +npm run start +``` + +Then open http://localhost:4200/ in your browser + + +## Learn More + +To learn more about **Ignite UI for Web Components**, check out the [Web Components documentation](https://infragistics.com/webcomponentssite/components/general-getting-started.html). diff --git a/samples/inputs/textarea/resize/index.html b/samples/inputs/textarea/resize/index.html new file mode 100644 index 0000000000..0931abd205 --- /dev/null +++ b/samples/inputs/textarea/resize/index.html @@ -0,0 +1,33 @@ + + + + Textarea Resize + + + + + + + + + + +
+
+ +

This textarea does not resize and uses a scroll bar to show overflow text.

+ + +

This textarea lets the user resize vertically.

+ + +

This textarea shows all the user input at once. Overflow text wraps onto a new line and expands the text area.

+ +
+
+ + <% if (false) { %> + + <% } %> + + diff --git a/samples/inputs/textarea/resize/package.json b/samples/inputs/textarea/resize/package.json new file mode 100644 index 0000000000..bbfc4922f4 --- /dev/null +++ b/samples/inputs/textarea/resize/package.json @@ -0,0 +1,59 @@ +{ + "name": "wc-textarea-resize", + "version": "1.0.0", + "description": "This project provides example of textarea resize 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.5.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/textarea/resize/sandbox.config.json b/samples/inputs/textarea/resize/sandbox.config.json new file mode 100644 index 0000000000..2ab51ac3f9 --- /dev/null +++ b/samples/inputs/textarea/resize/sandbox.config.json @@ -0,0 +1,6 @@ +{ + "infiniteLoopProtection": false, + "hardReloadOnChange": false, + "view": "browser", + "template": "parcel" +} diff --git a/samples/inputs/textarea/resize/src/index.css b/samples/inputs/textarea/resize/src/index.css new file mode 100644 index 0000000000..98682b8543 --- /dev/null +++ b/samples/inputs/textarea/resize/src/index.css @@ -0,0 +1,2 @@ +/* shared styles are loaded from: */ +/* https://static.infragistics.com/xplatform/css/samples */ diff --git a/samples/inputs/textarea/resize/src/index.ts b/samples/inputs/textarea/resize/src/index.ts new file mode 100644 index 0000000000..6dd736d713 --- /dev/null +++ b/samples/inputs/textarea/resize/src/index.ts @@ -0,0 +1,4 @@ +import { defineComponents, IgcTextareaComponent } from "igniteui-webcomponents"; +import "igniteui-webcomponents/themes/light/bootstrap.css"; + +defineComponents(IgcTextareaComponent); diff --git a/samples/inputs/textarea/resize/tsconfig.json b/samples/inputs/textarea/resize/tsconfig.json new file mode 100644 index 0000000000..b4a0e0068d --- /dev/null +++ b/samples/inputs/textarea/resize/tsconfig.json @@ -0,0 +1,15 @@ +{ + "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/inputs/textarea/resize/webpack.config.js b/samples/inputs/textarea/resize/webpack.config.js new file mode 100644 index 0000000000..bd525cc131 --- /dev/null +++ b/samples/inputs/textarea/resize/webpack.config.js @@ -0,0 +1,95 @@ +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/textarea/slots/.prettierrc b/samples/inputs/textarea/slots/.prettierrc new file mode 100644 index 0000000000..15a7c7c6cf --- /dev/null +++ b/samples/inputs/textarea/slots/.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/textarea/slots/ReadMe.md b/samples/inputs/textarea/slots/ReadMe.md new file mode 100644 index 0000000000..da881f291a --- /dev/null +++ b/samples/inputs/textarea/slots/ReadMe.md @@ -0,0 +1,51 @@ + + + +This folder contains implementation of Web Components application with example of Overview feature using [Input](https://infragistics.com/webcomponentssite/components/general-getting-started.html) component. + + + + + + View Docs + + + View Code + + + Run Sample + + + Run Sample + + + + +## Instructions + +To set up this project locally, execute these commands: + +``` +git clone https://github.com/IgniteUI/igniteui-wc-examples.git +cd ./igniteui-wc-examples +cd ./samples/inputs/input/overview +``` + +open above folder in VS Code or type: +``` +code . +``` + +In terminal window, run: + +``` +npm install +npm run start +``` + +Then open http://localhost:4200/ in your browser + + +## Learn More + +To learn more about **Ignite UI for Web Components**, check out the [Web Components documentation](https://infragistics.com/webcomponentssite/components/general-getting-started.html). diff --git a/samples/inputs/textarea/slots/index.html b/samples/inputs/textarea/slots/index.html new file mode 100644 index 0000000000..404dac60a0 --- /dev/null +++ b/samples/inputs/textarea/slots/index.html @@ -0,0 +1,28 @@ + + + + Textarea Slots + + + + + + + + + + +
+
+ + +

Give us a short description of what you liked/disliked

+ +
+
+ + <% if (false) { %> + + <% } %> + + diff --git a/samples/inputs/textarea/slots/package.json b/samples/inputs/textarea/slots/package.json new file mode 100644 index 0000000000..1eb69dd019 --- /dev/null +++ b/samples/inputs/textarea/slots/package.json @@ -0,0 +1,59 @@ +{ + "name": "wc-textarea-slots", + "version": "1.0.0", + "description": "This project provides example of textarea slots overview 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.5.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/textarea/slots/sandbox.config.json b/samples/inputs/textarea/slots/sandbox.config.json new file mode 100644 index 0000000000..2ab51ac3f9 --- /dev/null +++ b/samples/inputs/textarea/slots/sandbox.config.json @@ -0,0 +1,6 @@ +{ + "infiniteLoopProtection": false, + "hardReloadOnChange": false, + "view": "browser", + "template": "parcel" +} diff --git a/samples/inputs/textarea/slots/src/index.css b/samples/inputs/textarea/slots/src/index.css new file mode 100644 index 0000000000..98682b8543 --- /dev/null +++ b/samples/inputs/textarea/slots/src/index.css @@ -0,0 +1,2 @@ +/* shared styles are loaded from: */ +/* https://static.infragistics.com/xplatform/css/samples */ diff --git a/samples/inputs/textarea/slots/src/index.ts b/samples/inputs/textarea/slots/src/index.ts new file mode 100644 index 0000000000..8afbdb9314 --- /dev/null +++ b/samples/inputs/textarea/slots/src/index.ts @@ -0,0 +1,15 @@ +import { IgcIconComponent, IgcTextareaComponent, defineComponents, registerIconFromText } from "igniteui-webcomponents"; +import "igniteui-webcomponents/themes/light/bootstrap.css"; + +defineComponents(IgcIconComponent, IgcTextareaComponent); + +export class IgcTextareaSlot { + constructor() { + registerIconFromText( + "feedback", + `` + ); + } +} + +new IgcTextareaSlot(); diff --git a/samples/inputs/textarea/slots/tsconfig.json b/samples/inputs/textarea/slots/tsconfig.json new file mode 100644 index 0000000000..b4a0e0068d --- /dev/null +++ b/samples/inputs/textarea/slots/tsconfig.json @@ -0,0 +1,15 @@ +{ + "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/inputs/textarea/slots/webpack.config.js b/samples/inputs/textarea/slots/webpack.config.js new file mode 100644 index 0000000000..bd525cc131 --- /dev/null +++ b/samples/inputs/textarea/slots/webpack.config.js @@ -0,0 +1,95 @@ +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/textarea/styling/.prettierrc b/samples/inputs/textarea/styling/.prettierrc new file mode 100644 index 0000000000..15a7c7c6cf --- /dev/null +++ b/samples/inputs/textarea/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/textarea/styling/ReadMe.md b/samples/inputs/textarea/styling/ReadMe.md new file mode 100644 index 0000000000..da881f291a --- /dev/null +++ b/samples/inputs/textarea/styling/ReadMe.md @@ -0,0 +1,51 @@ + + + +This folder contains implementation of Web Components application with example of Overview feature using [Input](https://infragistics.com/webcomponentssite/components/general-getting-started.html) component. + + + + + + View Docs + + + View Code + + + Run Sample + + + Run Sample + + + + +## Instructions + +To set up this project locally, execute these commands: + +``` +git clone https://github.com/IgniteUI/igniteui-wc-examples.git +cd ./igniteui-wc-examples +cd ./samples/inputs/input/overview +``` + +open above folder in VS Code or type: +``` +code . +``` + +In terminal window, run: + +``` +npm install +npm run start +``` + +Then open http://localhost:4200/ in your browser + + +## Learn More + +To learn more about **Ignite UI for Web Components**, check out the [Web Components documentation](https://infragistics.com/webcomponentssite/components/general-getting-started.html). diff --git a/samples/inputs/textarea/styling/index.html b/samples/inputs/textarea/styling/index.html new file mode 100644 index 0000000000..c1c82164ee --- /dev/null +++ b/samples/inputs/textarea/styling/index.html @@ -0,0 +1,28 @@ + + + + Textarea Styling + + + + + + + + + + +
+
+ + +

Provide a detailed description of the steps that led to the issue you experienced

+ +
+
+ + <% if (false) { %> + + <% } %> + + diff --git a/samples/inputs/textarea/styling/package.json b/samples/inputs/textarea/styling/package.json new file mode 100644 index 0000000000..b7705a7758 --- /dev/null +++ b/samples/inputs/textarea/styling/package.json @@ -0,0 +1,59 @@ +{ + "name": "wc-textarea-styling", + "version": "1.0.0", + "description": "This project provides example of textarea 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.5.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/textarea/styling/sandbox.config.json b/samples/inputs/textarea/styling/sandbox.config.json new file mode 100644 index 0000000000..2ab51ac3f9 --- /dev/null +++ b/samples/inputs/textarea/styling/sandbox.config.json @@ -0,0 +1,6 @@ +{ + "infiniteLoopProtection": false, + "hardReloadOnChange": false, + "view": "browser", + "template": "parcel" +} diff --git a/samples/inputs/textarea/styling/src/index.css b/samples/inputs/textarea/styling/src/index.css new file mode 100644 index 0000000000..98682b8543 --- /dev/null +++ b/samples/inputs/textarea/styling/src/index.css @@ -0,0 +1,2 @@ +/* shared styles are loaded from: */ +/* https://static.infragistics.com/xplatform/css/samples */ diff --git a/samples/inputs/textarea/styling/src/index.ts b/samples/inputs/textarea/styling/src/index.ts new file mode 100644 index 0000000000..1ecc3ee5c1 --- /dev/null +++ b/samples/inputs/textarea/styling/src/index.ts @@ -0,0 +1,16 @@ +import { defineComponents, IgcIconComponent, IgcTextareaComponent, registerIconFromText } from "igniteui-webcomponents"; +import "igniteui-webcomponents/themes/light/bootstrap.css"; +import "./textarea.css"; + +defineComponents(IgcIconComponent, IgcTextareaComponent); + +export class IgcTextareaStyling { + constructor() { + registerIconFromText( + "feedback", + `` + ); + } +} + +new IgcTextareaStyling(); diff --git a/samples/inputs/textarea/styling/src/textarea.css b/samples/inputs/textarea/styling/src/textarea.css new file mode 100644 index 0000000000..f8ac50e87e --- /dev/null +++ b/samples/inputs/textarea/styling/src/textarea.css @@ -0,0 +1,15 @@ +igc-textarea::part(input) { + background-color: rgb(169, 214, 229); + border-color: rgb(42, 111, 151); +} + +igc-textarea::part(label) { + color: rgb(1, 42, 74); +} + +igc-textarea::part(prefix), +igc-textarea::part(suffix) { + color: white; + border-color: rgb(42, 111, 151); + background-color: rgb(70, 143, 175); +} diff --git a/samples/inputs/textarea/styling/tsconfig.json b/samples/inputs/textarea/styling/tsconfig.json new file mode 100644 index 0000000000..b4a0e0068d --- /dev/null +++ b/samples/inputs/textarea/styling/tsconfig.json @@ -0,0 +1,15 @@ +{ + "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/inputs/textarea/styling/webpack.config.js b/samples/inputs/textarea/styling/webpack.config.js new file mode 100644 index 0000000000..bd525cc131 --- /dev/null +++ b/samples/inputs/textarea/styling/webpack.config.js @@ -0,0 +1,95 @@ +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 3a7f8be6672849cbdcff19b22ba35e5e873a466a Mon Sep 17 00:00:00 2001 From: Radoslav Karaivanov Date: Tue, 17 Oct 2023 10:32:03 +0300 Subject: [PATCH 2/4] feat: Added form integration sample --- browser/public/index.html | 10 +- .../textarea/form-integration/.prettierrc | 11 +++ .../textarea/form-integration/ReadMe.md | 50 ++++++++++ .../textarea/form-integration/index.html | 32 +++++++ .../textarea/form-integration/package.json | 59 ++++++++++++ .../form-integration/sandbox.config.json | 6 ++ .../textarea/form-integration/src/index.css | 6 ++ .../textarea/form-integration/src/index.ts | 19 ++++ .../textarea/form-integration/tsconfig.json | 15 +++ .../form-integration/webpack.config.js | 95 +++++++++++++++++++ samples/inputs/textarea/overview/ReadMe.md | 11 +-- samples/inputs/textarea/resize/ReadMe.md | 11 +-- samples/inputs/textarea/slots/ReadMe.md | 11 +-- samples/inputs/textarea/styling/ReadMe.md | 11 +-- 14 files changed, 322 insertions(+), 25 deletions(-) create mode 100644 samples/inputs/textarea/form-integration/.prettierrc create mode 100644 samples/inputs/textarea/form-integration/ReadMe.md create mode 100644 samples/inputs/textarea/form-integration/index.html create mode 100644 samples/inputs/textarea/form-integration/package.json create mode 100644 samples/inputs/textarea/form-integration/sandbox.config.json create mode 100644 samples/inputs/textarea/form-integration/src/index.css create mode 100644 samples/inputs/textarea/form-integration/src/index.ts create mode 100644 samples/inputs/textarea/form-integration/tsconfig.json create mode 100644 samples/inputs/textarea/form-integration/webpack.config.js diff --git a/browser/public/index.html b/browser/public/index.html index 1f8e88f1ac..77bd467b27 100644 --- a/browser/public/index.html +++ b/browser/public/index.html @@ -702,6 +702,14 @@ ─Label ─Overview + +
LAYOUTS
@@ -863,4 +871,4 @@ - \ No newline at end of file + diff --git a/samples/inputs/textarea/form-integration/.prettierrc b/samples/inputs/textarea/form-integration/.prettierrc new file mode 100644 index 0000000000..15a7c7c6cf --- /dev/null +++ b/samples/inputs/textarea/form-integration/.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/textarea/form-integration/ReadMe.md b/samples/inputs/textarea/form-integration/ReadMe.md new file mode 100644 index 0000000000..0112329bd4 --- /dev/null +++ b/samples/inputs/textarea/form-integration/ReadMe.md @@ -0,0 +1,50 @@ + + + +This folder contains implementation of Web Components application with example of Overview feature using [Textarea](https://infragistics.com/webcomponentssite/components/general-getting-started.html) component. + + + + + View Docs + + + View Code + + + Run Sample + + + Run Sample + + + + +## Instructions + +To set up this project locally, execute these commands: + +``` +git clone https://github.com/IgniteUI/igniteui-wc-examples.git +cd ./igniteui-wc-examples +cd ./samples/inputs/textarea/form-integration +``` + +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/textarea/form-integration/index.html b/samples/inputs/textarea/form-integration/index.html new file mode 100644 index 0000000000..f30aa12686 --- /dev/null +++ b/samples/inputs/textarea/form-integration/index.html @@ -0,0 +1,32 @@ + + + + Textarea Form Integration + + + + + + + + + + +
+
+
+ +
+ Submit review + Reset +
+ Your review was submitted +
+
+
+ + <% if (false) { %> + + <% } %> + + diff --git a/samples/inputs/textarea/form-integration/package.json b/samples/inputs/textarea/form-integration/package.json new file mode 100644 index 0000000000..e4eaca5ae1 --- /dev/null +++ b/samples/inputs/textarea/form-integration/package.json @@ -0,0 +1,59 @@ +{ + "name": "wc-textarea-form-integration", + "version": "1.0.0", + "description": "This project provides example of textarea form integration 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.5.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/textarea/form-integration/sandbox.config.json b/samples/inputs/textarea/form-integration/sandbox.config.json new file mode 100644 index 0000000000..2ab51ac3f9 --- /dev/null +++ b/samples/inputs/textarea/form-integration/sandbox.config.json @@ -0,0 +1,6 @@ +{ + "infiniteLoopProtection": false, + "hardReloadOnChange": false, + "view": "browser", + "template": "parcel" +} diff --git a/samples/inputs/textarea/form-integration/src/index.css b/samples/inputs/textarea/form-integration/src/index.css new file mode 100644 index 0000000000..7a32d0ee73 --- /dev/null +++ b/samples/inputs/textarea/form-integration/src/index.css @@ -0,0 +1,6 @@ +/* shared styles are loaded from: */ +/* https://static.infragistics.com/xplatform/css/samples */ + +.controls { + margin-top: 1rem; +} diff --git a/samples/inputs/textarea/form-integration/src/index.ts b/samples/inputs/textarea/form-integration/src/index.ts new file mode 100644 index 0000000000..0939b823d3 --- /dev/null +++ b/samples/inputs/textarea/form-integration/src/index.ts @@ -0,0 +1,19 @@ +import { defineComponents, IgcTextareaComponent, IgcButtonComponent, IgcToastComponent } from "igniteui-webcomponents"; +import "igniteui-webcomponents/themes/light/fluent.css"; +import "./index.css"; + +defineComponents(IgcTextareaComponent, IgcButtonComponent, IgcToastComponent); + +export class IgcTextareaFormIntegration { + constructor() { + const toast = document.querySelector("#submitted") as IgcToastComponent; + const form = document.querySelector("#form") as HTMLFormElement; + + form.addEventListener("submit", (e: SubmitEvent) => { + e.preventDefault(); + toast.show(); + }); + } +} + +new IgcTextareaFormIntegration(); diff --git a/samples/inputs/textarea/form-integration/tsconfig.json b/samples/inputs/textarea/form-integration/tsconfig.json new file mode 100644 index 0000000000..b4a0e0068d --- /dev/null +++ b/samples/inputs/textarea/form-integration/tsconfig.json @@ -0,0 +1,15 @@ +{ + "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/inputs/textarea/form-integration/webpack.config.js b/samples/inputs/textarea/form-integration/webpack.config.js new file mode 100644 index 0000000000..bd525cc131 --- /dev/null +++ b/samples/inputs/textarea/form-integration/webpack.config.js @@ -0,0 +1,95 @@ +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/textarea/overview/ReadMe.md b/samples/inputs/textarea/overview/ReadMe.md index da881f291a..15434f39a5 100644 --- a/samples/inputs/textarea/overview/ReadMe.md +++ b/samples/inputs/textarea/overview/ReadMe.md @@ -1,8 +1,7 @@ -This folder contains implementation of Web Components application with example of Overview feature using [Input](https://infragistics.com/webcomponentssite/components/general-getting-started.html) component. - +This folder contains implementation of Web Components application with example of Overview feature using [Textarea](https://infragistics.com/webcomponentssite/components/general-getting-started.html) component. @@ -12,10 +11,10 @@ This folder contains implementation of Web Components application with example o View Code - + Run Sample - + Run Sample @@ -28,10 +27,11 @@ To set up this project locally, execute these commands: ``` git clone https://github.com/IgniteUI/igniteui-wc-examples.git cd ./igniteui-wc-examples -cd ./samples/inputs/input/overview +cd ./samples/inputs/textarea/overview ``` open above folder in VS Code or type: + ``` code . ``` @@ -45,7 +45,6 @@ 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/textarea/resize/ReadMe.md b/samples/inputs/textarea/resize/ReadMe.md index da881f291a..57a4972d7f 100644 --- a/samples/inputs/textarea/resize/ReadMe.md +++ b/samples/inputs/textarea/resize/ReadMe.md @@ -1,8 +1,7 @@ -This folder contains implementation of Web Components application with example of Overview feature using [Input](https://infragistics.com/webcomponentssite/components/general-getting-started.html) component. - +This folder contains implementation of Web Components application with example of Overview feature using [Textarea](https://infragistics.com/webcomponentssite/components/general-getting-started.html) component. @@ -12,10 +11,10 @@ This folder contains implementation of Web Components application with example o View Code - + Run Sample - + Run Sample @@ -28,10 +27,11 @@ To set up this project locally, execute these commands: ``` git clone https://github.com/IgniteUI/igniteui-wc-examples.git cd ./igniteui-wc-examples -cd ./samples/inputs/input/overview +cd ./samples/inputs/textarea/resize ``` open above folder in VS Code or type: + ``` code . ``` @@ -45,7 +45,6 @@ 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/textarea/slots/ReadMe.md b/samples/inputs/textarea/slots/ReadMe.md index da881f291a..d589005245 100644 --- a/samples/inputs/textarea/slots/ReadMe.md +++ b/samples/inputs/textarea/slots/ReadMe.md @@ -1,8 +1,7 @@ -This folder contains implementation of Web Components application with example of Overview feature using [Input](https://infragistics.com/webcomponentssite/components/general-getting-started.html) component. - +This folder contains implementation of Web Components application with example of Overview feature using [Textarea](https://infragistics.com/webcomponentssite/components/general-getting-started.html) component. @@ -12,10 +11,10 @@ This folder contains implementation of Web Components application with example o View Code - + Run Sample - + Run Sample @@ -28,10 +27,11 @@ To set up this project locally, execute these commands: ``` git clone https://github.com/IgniteUI/igniteui-wc-examples.git cd ./igniteui-wc-examples -cd ./samples/inputs/input/overview +cd ./samples/inputs/textarea/slots ``` open above folder in VS Code or type: + ``` code . ``` @@ -45,7 +45,6 @@ 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/textarea/styling/ReadMe.md b/samples/inputs/textarea/styling/ReadMe.md index da881f291a..56bddef315 100644 --- a/samples/inputs/textarea/styling/ReadMe.md +++ b/samples/inputs/textarea/styling/ReadMe.md @@ -1,8 +1,7 @@ -This folder contains implementation of Web Components application with example of Overview feature using [Input](https://infragistics.com/webcomponentssite/components/general-getting-started.html) component. - +This folder contains implementation of Web Components application with example of Overview feature using [Textarea](https://infragistics.com/webcomponentssite/components/general-getting-started.html) component. @@ -12,10 +11,10 @@ This folder contains implementation of Web Components application with example o View Code - + Run Sample - + Run Sample @@ -28,10 +27,11 @@ To set up this project locally, execute these commands: ``` git clone https://github.com/IgniteUI/igniteui-wc-examples.git cd ./igniteui-wc-examples -cd ./samples/inputs/input/overview +cd ./samples/inputs/textarea/styling ``` open above folder in VS Code or type: + ``` code . ``` @@ -45,7 +45,6 @@ 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). From 8101a351e2065b3b50c75891d1f421603ff7fb77 Mon Sep 17 00:00:00 2001 From: Radoslav Karaivanov Date: Tue, 17 Oct 2023 11:00:41 +0300 Subject: [PATCH 3/4] chore: Finalize build --- browser/public/index.html | 18 ++++++++++-------- .../inputs/textarea/form-integration/ReadMe.md | 5 +++-- .../textarea/form-integration/src/index.ts | 6 +++--- samples/inputs/textarea/overview/ReadMe.md | 3 ++- samples/inputs/textarea/overview/src/index.ts | 6 ++++++ samples/inputs/textarea/resize/ReadMe.md | 5 +++-- samples/inputs/textarea/resize/src/index.ts | 6 ++++++ samples/inputs/textarea/slots/ReadMe.md | 5 +++-- samples/inputs/textarea/slots/src/index.ts | 4 ++-- samples/inputs/textarea/styling/ReadMe.md | 5 +++-- samples/inputs/textarea/styling/src/index.ts | 4 ++-- 11 files changed, 43 insertions(+), 24 deletions(-) diff --git a/browser/public/index.html b/browser/public/index.html index 77bd467b27..e41ad3601d 100644 --- a/browser/public/index.html +++ b/browser/public/index.html @@ -445,7 +445,9 @@ ─Conditional Cell Style2 ─Conditional Row Selectors ─Custom Context Menu + ─Custom Filtering ─Data Batch Editing Actions + ─Data Exporting Indicator ─Data Paste Options ─Data Performance Virtualization ─Data Searching @@ -702,13 +704,13 @@ ─Label ─Overview - - - + \ No newline at end of file diff --git a/samples/inputs/textarea/form-integration/ReadMe.md b/samples/inputs/textarea/form-integration/ReadMe.md index 0112329bd4..29ab7f0bb2 100644 --- a/samples/inputs/textarea/form-integration/ReadMe.md +++ b/samples/inputs/textarea/form-integration/ReadMe.md @@ -1,7 +1,8 @@ -This folder contains implementation of Web Components application with example of Overview feature using [Textarea](https://infragistics.com/webcomponentssite/components/general-getting-started.html) component. +This folder contains implementation of Web Components application with example of Form Integration feature using [Textarea](https://infragistics.com/webcomponentssite/components/general-getting-started.html) component. + @@ -31,7 +32,6 @@ cd ./samples/inputs/textarea/form-integration ``` open above folder in VS Code or type: - ``` code . ``` @@ -45,6 +45,7 @@ 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/textarea/form-integration/src/index.ts b/samples/inputs/textarea/form-integration/src/index.ts index 0939b823d3..6d089594b2 100644 --- a/samples/inputs/textarea/form-integration/src/index.ts +++ b/samples/inputs/textarea/form-integration/src/index.ts @@ -1,10 +1,10 @@ import { defineComponents, IgcTextareaComponent, IgcButtonComponent, IgcToastComponent } from "igniteui-webcomponents"; -import "igniteui-webcomponents/themes/light/fluent.css"; +import "igniteui-webcomponents/themes/light/bootstrap.css"; import "./index.css"; defineComponents(IgcTextareaComponent, IgcButtonComponent, IgcToastComponent); -export class IgcTextareaFormIntegration { +export class TextareaFormIntegration { constructor() { const toast = document.querySelector("#submitted") as IgcToastComponent; const form = document.querySelector("#form") as HTMLFormElement; @@ -16,4 +16,4 @@ export class IgcTextareaFormIntegration { } } -new IgcTextareaFormIntegration(); +new TextareaFormIntegration(); diff --git a/samples/inputs/textarea/overview/ReadMe.md b/samples/inputs/textarea/overview/ReadMe.md index 15434f39a5..397574d546 100644 --- a/samples/inputs/textarea/overview/ReadMe.md +++ b/samples/inputs/textarea/overview/ReadMe.md @@ -3,6 +3,7 @@ This folder contains implementation of Web Components application with example of Overview feature using [Textarea](https://infragistics.com/webcomponentssite/components/general-getting-started.html) component. + @@ -31,7 +32,6 @@ cd ./samples/inputs/textarea/overview ``` open above folder in VS Code or type: - ``` code . ``` @@ -45,6 +45,7 @@ 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/textarea/overview/src/index.ts b/samples/inputs/textarea/overview/src/index.ts index 6dd736d713..8dd1e38268 100644 --- a/samples/inputs/textarea/overview/src/index.ts +++ b/samples/inputs/textarea/overview/src/index.ts @@ -2,3 +2,9 @@ import { defineComponents, IgcTextareaComponent } from "igniteui-webcomponents"; import "igniteui-webcomponents/themes/light/bootstrap.css"; defineComponents(IgcTextareaComponent); + +export class TextareaOverview { + constructor() {} +} + +new TextareaOverview(); diff --git a/samples/inputs/textarea/resize/ReadMe.md b/samples/inputs/textarea/resize/ReadMe.md index 57a4972d7f..090583ed41 100644 --- a/samples/inputs/textarea/resize/ReadMe.md +++ b/samples/inputs/textarea/resize/ReadMe.md @@ -1,7 +1,8 @@ -This folder contains implementation of Web Components application with example of Overview feature using [Textarea](https://infragistics.com/webcomponentssite/components/general-getting-started.html) component. +This folder contains implementation of Web Components application with example of Resize feature using [Textarea](https://infragistics.com/webcomponentssite/components/general-getting-started.html) component. + @@ -31,7 +32,6 @@ cd ./samples/inputs/textarea/resize ``` open above folder in VS Code or type: - ``` code . ``` @@ -45,6 +45,7 @@ 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/textarea/resize/src/index.ts b/samples/inputs/textarea/resize/src/index.ts index 6dd736d713..3c7285b6ad 100644 --- a/samples/inputs/textarea/resize/src/index.ts +++ b/samples/inputs/textarea/resize/src/index.ts @@ -2,3 +2,9 @@ import { defineComponents, IgcTextareaComponent } from "igniteui-webcomponents"; import "igniteui-webcomponents/themes/light/bootstrap.css"; defineComponents(IgcTextareaComponent); + +export class TextareaResize { + constructor() {} +} + +new TextareaResize(); diff --git a/samples/inputs/textarea/slots/ReadMe.md b/samples/inputs/textarea/slots/ReadMe.md index d589005245..b3c016318a 100644 --- a/samples/inputs/textarea/slots/ReadMe.md +++ b/samples/inputs/textarea/slots/ReadMe.md @@ -1,7 +1,8 @@ -This folder contains implementation of Web Components application with example of Overview feature using [Textarea](https://infragistics.com/webcomponentssite/components/general-getting-started.html) component. +This folder contains implementation of Web Components application with example of Slots feature using [Textarea](https://infragistics.com/webcomponentssite/components/general-getting-started.html) component. + @@ -31,7 +32,6 @@ cd ./samples/inputs/textarea/slots ``` open above folder in VS Code or type: - ``` code . ``` @@ -45,6 +45,7 @@ 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/textarea/slots/src/index.ts b/samples/inputs/textarea/slots/src/index.ts index 8afbdb9314..cd4b654b70 100644 --- a/samples/inputs/textarea/slots/src/index.ts +++ b/samples/inputs/textarea/slots/src/index.ts @@ -3,7 +3,7 @@ import "igniteui-webcomponents/themes/light/bootstrap.css"; defineComponents(IgcIconComponent, IgcTextareaComponent); -export class IgcTextareaSlot { +export class TextareaSlots { constructor() { registerIconFromText( "feedback", @@ -12,4 +12,4 @@ export class IgcTextareaSlot { } } -new IgcTextareaSlot(); +new TextareaSlots(); diff --git a/samples/inputs/textarea/styling/ReadMe.md b/samples/inputs/textarea/styling/ReadMe.md index 56bddef315..62dfd89144 100644 --- a/samples/inputs/textarea/styling/ReadMe.md +++ b/samples/inputs/textarea/styling/ReadMe.md @@ -1,7 +1,8 @@ -This folder contains implementation of Web Components application with example of Overview feature using [Textarea](https://infragistics.com/webcomponentssite/components/general-getting-started.html) component. +This folder contains implementation of Web Components application with example of Styling feature using [Textarea](https://infragistics.com/webcomponentssite/components/general-getting-started.html) component. + @@ -31,7 +32,6 @@ cd ./samples/inputs/textarea/styling ``` open above folder in VS Code or type: - ``` code . ``` @@ -45,6 +45,7 @@ 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/textarea/styling/src/index.ts b/samples/inputs/textarea/styling/src/index.ts index 1ecc3ee5c1..6a7003d5c9 100644 --- a/samples/inputs/textarea/styling/src/index.ts +++ b/samples/inputs/textarea/styling/src/index.ts @@ -4,7 +4,7 @@ import "./textarea.css"; defineComponents(IgcIconComponent, IgcTextareaComponent); -export class IgcTextareaStyling { +export class TextareaStyling { constructor() { registerIconFromText( "feedback", @@ -13,4 +13,4 @@ export class IgcTextareaStyling { } } -new IgcTextareaStyling(); +new TextareaStyling(); From 714d71af0faa3fb453534a566a28195e8be4a8ba Mon Sep 17 00:00:00 2001 From: Ivan Kitanov Date: Fri, 7 Jun 2024 11:53:07 +0300 Subject: [PATCH 4/4] Decrasing the number of rows to better fit sample frame --- samples/inputs/textarea/form-integration/index.html | 2 +- samples/inputs/textarea/overview/index.html | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/samples/inputs/textarea/form-integration/index.html b/samples/inputs/textarea/form-integration/index.html index f30aa12686..1f338dd0db 100644 --- a/samples/inputs/textarea/form-integration/index.html +++ b/samples/inputs/textarea/form-integration/index.html @@ -15,7 +15,7 @@
- +
Submit review Reset diff --git a/samples/inputs/textarea/overview/index.html b/samples/inputs/textarea/overview/index.html index 738d6e8c21..9b09f6eebe 100644 --- a/samples/inputs/textarea/overview/index.html +++ b/samples/inputs/textarea/overview/index.html @@ -14,7 +14,7 @@
- It was a dark and stormy night... + It was a dark and stormy night...