IgniteUI · kacheshmarova · Jun 7, 2024 · Oct 10, 2023 · Oct 10, 2023 · Oct 16, 2023
diff --git a/browser/public/index.html b/browser/public/index.html
@@ -864,6 +864,14 @@
            <a class="nav-link" href="#" data-nav="/samples/inputs/switches/label">─<span>Label</span></a> 
            <a class="nav-link" href="#" data-nav="/samples/inputs/switches/overview">─<span>Overview</span></a> 
        </div>
+       <label id="nav-textarea" class="nav-component">Textarea</label> 
+       <div id="nav-textarea-list" class="nav-list" state="collapsed"> 
+           <a class="nav-link" href="#" data-nav="/samples/inputs/textarea/form-integration">─<span>Form Integration</span></a> 
+           <a class="nav-link" href="#" data-nav="/samples/inputs/textarea/overview">─<span>Overview</span></a> 
+           <a class="nav-link" href="#" data-nav="/samples/inputs/textarea/resize">─<span>Resize</span></a> 
+           <a class="nav-link" href="#" data-nav="/samples/inputs/textarea/slots">─<span>Slots</span></a> 
+           <a class="nav-link" href="#" data-nav="/samples/inputs/textarea/styling">─<span>Styling</span></a> 
+       </div>
 
        <div class="nav-group">LAYOUTS</div> 
        <label id="nav-accordion" class="nav-component">Accordion</label> 

diff --git a/samples/inputs/textarea/form-integration/.prettierrc 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
+}
diff --git a/samples/inputs/textarea/form-integration/ReadMe.md b/samples/inputs/textarea/form-integration/ReadMe.md
@@ -0,0 +1,51 @@
+<!-- NOTE: do not change this file because it's auto re-generated from template: -->
+<!-- https://github.com/IgniteUI/igniteui-wc-examples/tree/vnext/templates/browser/sample/ReadMe.md -->
+
+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.
+
+
+<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
+    <body>
+        <a target="_blank" href="https://infragistics.com/webcomponentssite/components/general-getting-started.html" rel="noopener noreferrer">
+            <img height="40px" style="border-radius: 0rem" alt="View Docs" src="https://github.com/IgniteUI/igniteui-blazor-examples/raw/vnext/templates/sample/images/button-docs.png"/>
+        </a>
+        <a target="_blank" href="./src/index.ts" rel="noopener noreferrer">
+            <img height="40px" style="border-radius: 0rem; max-width: 100%;" alt="View Code" src="https://github.com/IgniteUI/igniteui-blazor-examples/raw/vnext/templates/sample/images/button-code.png"/>
+        </a>
+        <a target="_blank" href="https://www.infragistics.com/webcomponents-demos/samples/inputs/textarea/form-integration" rel="noopener noreferrer">
+            <img height="40px" style="border-radius: 0rem; max-width: 100%;" alt="Run Sample" src="https://github.com/IgniteUI/igniteui-blazor-examples/raw/vnext/templates/sample/images/button-run.png"/>
+        </a>
+        <a target="_blank" href="https://codesandbox.io/s/github/IgniteUI/igniteui-wc-examples/tree/master/samples/inputs/textarea/form-integration?fontsize=14&hidenavigation=1&theme=dark&view=preview&file=/src/{SampleFile}" rel="noopener noreferrer">
+            <img height="40px" style="border-radius: 0rem; max-width: 100%;" alt="Run Sample" src="https://github.com/IgniteUI/igniteui-blazor-examples/raw/vnext/templates/sample/images/button-sandbox.png"/>
+        </a>
+    </body>
+</html>
+
+## 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
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>Textarea Form Integration</title>
+        <meta charset="UTF-8" />
+
+        <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" />
+        <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
+        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
+        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
+        <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v5.css" type="text/css" />
+    </head>
+
+    <body>
+        <div id="root">
+            <div class="container sample center">
+                <form id="form">
+                    <igc-textarea rows="3" name="user_feedback" label="Your review" required></igc-textarea>
+                    <div class="controls">
+                        <igc-button type="submit">Submit review</igc-button>
+                        <igc-button type="reset" variant="outlined">Reset</igc-button>
+                    </div>
+                    <igc-toast id="submitted" position="top" display-time="1e3">Your review was submitted</igc-toast>
+                </form>
+            </div>
+        </div>
+        <!-- This script is needed only for parcel and it will be excluded for webpack -->
+        <% if (false) { %>
+        <script src="src/index.ts"></script>
+        <% } %>
+    </body>
+</html>
diff --git a/samples/inputs/textarea/form-integration/package.json 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
@@ -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
@@ -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
@@ -0,0 +1,19 @@
+import { defineComponents, IgcTextareaComponent, IgcButtonComponent, IgcToastComponent } from "igniteui-webcomponents";
+import "igniteui-webcomponents/themes/light/bootstrap.css";
+import "./index.css";
+
+defineComponents(IgcTextareaComponent, IgcButtonComponent, IgcToastComponent);
+
+export class TextareaFormIntegration {
+    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 TextareaFormIntegration();
diff --git a/samples/inputs/textarea/form-integration/tsconfig.json 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
@@ -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/.prettierrc 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
+}
diff --git a/samples/inputs/textarea/overview/ReadMe.md b/samples/inputs/textarea/overview/ReadMe.md
@@ -0,0 +1,51 @@
+<!-- NOTE: do not change this file because it's auto re-generated from template: -->
+<!-- https://github.com/IgniteUI/igniteui-wc-examples/tree/vnext/templates/browser/sample/ReadMe.md -->
+
+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.
+
+
+<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
+    <body>
+        <a target="_blank" href="https://infragistics.com/webcomponentssite/components/general-getting-started.html" rel="noopener noreferrer">
+            <img height="40px" style="border-radius: 0rem" alt="View Docs" src="https://github.com/IgniteUI/igniteui-blazor-examples/raw/vnext/templates/sample/images/button-docs.png"/>
+        </a>
+        <a target="_blank" href="./src/index.ts" rel="noopener noreferrer">
+            <img height="40px" style="border-radius: 0rem; max-width: 100%;" alt="View Code" src="https://github.com/IgniteUI/igniteui-blazor-examples/raw/vnext/templates/sample/images/button-code.png"/>
+        </a>
+        <a target="_blank" href="https://www.infragistics.com/webcomponents-demos/samples/inputs/textarea/overview" rel="noopener noreferrer">
+            <img height="40px" style="border-radius: 0rem; max-width: 100%;" alt="Run Sample" src="https://github.com/IgniteUI/igniteui-blazor-examples/raw/vnext/templates/sample/images/button-run.png"/>
+        </a>
+        <a target="_blank" href="https://codesandbox.io/s/github/IgniteUI/igniteui-wc-examples/tree/master/samples/inputs/textarea/overview?fontsize=14&hidenavigation=1&theme=dark&view=preview&file=/src/{SampleFile}" rel="noopener noreferrer">
+            <img height="40px" style="border-radius: 0rem; max-width: 100%;" alt="Run Sample" src="https://github.com/IgniteUI/igniteui-blazor-examples/raw/vnext/templates/sample/images/button-sandbox.png"/>
+        </a>
+    </body>
+</html>
+
+## 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/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).