Skip to content

Commit fcb1a25

Browse files
kacheshmarovakacheshmarova
authored
Merge pull request #558 from IgniteUI/rkaraivanov/textarea-samples
Added textarea samples
2 parents 44e84c2 + 714d71a commit fcb1a25

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

47 files changed

+1438
-0
lines changed

‎browser/public/index.html‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -864,6 +864,14 @@
864864
<a class="nav-link" href="#" data-nav="/samples/inputs/switches/label">─<span>Label</span></a>
865865
<a class="nav-link" href="#" data-nav="/samples/inputs/switches/overview">─<span>Overview</span></a>
866866
</div>
867+
<label id="nav-textarea" class="nav-component">Textarea</label>
868+
<div id="nav-textarea-list" class="nav-list" state="collapsed">
869+
<a class="nav-link" href="#" data-nav="/samples/inputs/textarea/form-integration">─<span>Form Integration</span></a>
870+
<a class="nav-link" href="#" data-nav="/samples/inputs/textarea/overview">─<span>Overview</span></a>
871+
<a class="nav-link" href="#" data-nav="/samples/inputs/textarea/resize">─<span>Resize</span></a>
872+
<a class="nav-link" href="#" data-nav="/samples/inputs/textarea/slots">─<span>Slots</span></a>
873+
<a class="nav-link" href="#" data-nav="/samples/inputs/textarea/styling">─<span>Styling</span></a>
874+
</div>
867875

868876
<div class="nav-group">LAYOUTS</div>
869877
<label id="nav-accordion" class="nav-component">Accordion</label>

‎samples/inputs/textarea/form-integration/.prettierrc‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
{
2+
"printWidth": 250,
3+
"tabWidth": 4,
4+
"useTabs": false,
5+
"semi": true,
6+
"singleQuote": false,
7+
"trailingComma": "none",
8+
"bracketSpacing": true,
9+
"jsxBracketSameLine": false,
10+
"fluid": false
11+
}

‎samples/inputs/textarea/form-integration/ReadMe.md‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
<!-- NOTE: do not change this file because it's auto re-generated from template: -->
2+
<!-- https://github.com/IgniteUI/igniteui-wc-examples/tree/vnext/templates/browser/sample/ReadMe.md -->
3+
4+
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.
5+
6+
7+
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
8+
<body>
9+
<a target="_blank" href="https://infragistics.com/webcomponentssite/components/general-getting-started.html" rel="noopener noreferrer">
10+
<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"/>
11+
</a>
12+
<a target="_blank" href="./src/index.ts" rel="noopener noreferrer">
13+
<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"/>
14+
</a>
15+
<a target="_blank" href="https://www.infragistics.com/webcomponents-demos/samples/inputs/textarea/form-integration" rel="noopener noreferrer">
16+
<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"/>
17+
</a>
18+
<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">
19+
<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"/>
20+
</a>
21+
</body>
22+
</html>
23+
24+
## Instructions
25+
26+
To set up this project locally, execute these commands:
27+
28+
```
29+
git clone https://github.com/IgniteUI/igniteui-wc-examples.git
30+
cd ./igniteui-wc-examples
31+
cd ./samples/inputs/textarea/form-integration
32+
```
33+
34+
open above folder in VS Code or type:
35+
```
36+
code .
37+
```
38+
39+
In terminal window, run:
40+
41+
```
42+
npm install
43+
npm run start
44+
```
45+
46+
Then open http://localhost:4200/ in your browser
47+
48+
49+
## Learn More
50+
51+
To learn more about **Ignite UI for Web Components**, check out the [Web Components documentation](https://infragistics.com/webcomponentssite/components/general-getting-started.html).

‎samples/inputs/textarea/form-integration/index.html‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Textarea Form Integration</title>
5+
<meta charset="UTF-8" />
6+
7+
<link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" />
8+
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
9+
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
10+
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
11+
<link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v5.css" type="text/css" />
12+
</head>
13+
14+
<body>
15+
<div id="root">
16+
<div class="container sample center">
17+
<form id="form">
18+
<igc-textarea rows="3" name="user_feedback" label="Your review" required></igc-textarea>
19+
<div class="controls">
20+
<igc-button type="submit">Submit review</igc-button>
21+
<igc-button type="reset" variant="outlined">Reset</igc-button>
22+
</div>
23+
<igc-toast id="submitted" position="top" display-time="1e3">Your review was submitted</igc-toast>
24+
</form>
25+
</div>
26+
</div>
27+
<!-- This script is needed only for parcel and it will be excluded for webpack -->
28+
<% if (false) { %>
29+
<script src="src/index.ts"></script>
30+
<% } %>
31+
</body>
32+
</html>

‎samples/inputs/textarea/form-integration/package.json‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
{
2+
"name": "wc-textarea-form-integration",
3+
"version": "1.0.0",
4+
"description": "This project provides example of textarea form integration using IgniteUI for Web Components",
5+
"main": "src/index.ts",
6+
"scripts": {
7+
"build": "npm run build:prod",
8+
"build:dev": "webpack --mode development --config ./webpack.config.js --progress --color --display-error-details",
9+
"build:prod": "webpack --env.NODE_ENV=production --mode production --config ./webpack.config.js --progress --color --display-error-details --bail",
10+
"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",
11+
"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/",
12+
"start": "npm run serve:dev",
13+
"build:legacy": "npm run build:prod:legacy",
14+
"build:dev:legacy": "webpack --env.legacy=true --mode development --config ./webpack.config.js --progress --color --display-error-details",
15+
"build:prod:legacy": "webpack --env.NODE_ENV=production --env.legacy=true --mode production --config ./webpack.config.js --progress --color --display-error-details --bail",
16+
"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",
17+
"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/",
18+
"start:legacy": "npm run serve:dev:legacy"
19+
},
20+
"author": "Infragistics",
21+
"dependencies": {
22+
"@webcomponents/custom-elements": "^1.4.1",
23+
"@webcomponents/template": "^1.4.2",
24+
"babel-runtime": "^6.26.0",
25+
"core-js": "^3.6.5",
26+
"igniteui-webcomponents": "^4.5.0",
27+
"lit": "^2.0.2",
28+
"lit-html": "^2.2.0",
29+
"tslib": "^2.0.0"
30+
},
31+
"devDependencies": {
32+
"@babel/cli": "^7.8.3",
33+
"@babel/core": "^7.8.3",
34+
"@babel/plugin-proposal-class-properties": "^7.8.3",
35+
"@babel/plugin-transform-runtime": "^7.10.0",
36+
"@babel/preset-env": "^7.8.3",
37+
"@babel/preset-typescript": "^7.8.3",
38+
"@types/source-map": "^0.5.7",
39+
"babel-loader": "^8.1.0",
40+
"babel-plugin-transform-custom-element-classes": "^0.1.0",
41+
"css-loader": "^1.0.0",
42+
"csv-loader": "^3.0.2",
43+
"file-loader": "^4.2.0",
44+
"fork-ts-checker-webpack-plugin": "^4.1.5",
45+
"html-webpack-plugin": "^4.3.0",
46+
"parcel-bundler": "^1.6.1",
47+
"source-map": "^0.7.3",
48+
"style-loader": "^0.22.1",
49+
"tsconfig-paths-webpack-plugin": "^4.0.0",
50+
"typescript": "^4.4.4",
51+
"webpack": "^5.74.0",
52+
"webpack-cli": "^4.10.0",
53+
"webpack-dev-server": "^4.11.1",
54+
"worker-loader": "^3.0.8",
55+
"xml-loader": "^1.2.1"
56+
},
57+
"license": "",
58+
"homepage": "."
59+
}

‎samples/inputs/textarea/form-integration/sandbox.config.json‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
{
2+
"infiniteLoopProtection": false,
3+
"hardReloadOnChange": false,
4+
"view": "browser",
5+
"template": "parcel"
6+
}

‎samples/inputs/textarea/form-integration/src/index.css‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
/* shared styles are loaded from: */
2+
/* https://static.infragistics.com/xplatform/css/samples */
3+
4+
.controls {
5+
margin-top: 1rem;
6+
}

‎samples/inputs/textarea/form-integration/src/index.ts‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import { defineComponents, IgcTextareaComponent, IgcButtonComponent, IgcToastComponent } from "igniteui-webcomponents";
2+
import "igniteui-webcomponents/themes/light/bootstrap.css";
3+
import "./index.css";
4+
5+
defineComponents(IgcTextareaComponent, IgcButtonComponent, IgcToastComponent);
6+
7+
export class TextareaFormIntegration {
8+
constructor() {
9+
const toast = document.querySelector("#submitted") as IgcToastComponent;
10+
const form = document.querySelector("#form") as HTMLFormElement;
11+
12+
form.addEventListener("submit", (e: SubmitEvent) => {
13+
e.preventDefault();
14+
toast.show();
15+
});
16+
}
17+
}
18+
19+
new TextareaFormIntegration();

‎samples/inputs/textarea/form-integration/tsconfig.json‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
{
2+
"compilerOptions": {
3+
"noImplicitReturns": true,
4+
"esModuleInterop": true,
5+
"noImplicitAny": true,
6+
"declarationDir": "dist/types",
7+
"moduleResolution": "node",
8+
"declaration": true,
9+
"target": "es2015",
10+
"module": "es2015",
11+
"strict": true
12+
},
13+
"include": ["src/**/*"],
14+
"exclude": ["node_modules", "dist"]
15+
}

‎samples/inputs/textarea/form-integration/webpack.config.js‎

Lines changed: 95 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
const ForkTsCheckerWebpackPlugin = require("fork-ts-checker-webpack-plugin");
2+
const HtmlWebpackPlugin = require("html-webpack-plugin");
3+
const TsconfigPathsPlugin = require("tsconfig-paths-webpack-plugin");
4+
const path = require("path");
5+
const webpack = require("webpack");
6+
7+
module.exports = (env) => {
8+
const nodeEnv = process.env.NODE_ENV || "development";
9+
const isProd = nodeEnv === "production";
10+
const isLegacy = !!process.env.legacy && !(process.env.legacy == "false");
11+
console.log(">> webpack nodeEnv=" + nodeEnv);
12+
console.log(">> webpack isProd=" + isProd);
13+
console.log(">> webpack isLegacy=" + isLegacy);
14+
const presets = [
15+
[
16+
"@babel/preset-env",
17+
{
18+
useBuiltIns: "usage",
19+
corejs: 3,
20+
targets: {
21+
browsers: isLegacy ? ["defaults"] : ["last 2 Chrome versions", "last 2 Safari versions", "last 2 iOS versions", "last 2 Firefox versions", "last 2 Edge versions"]
22+
}
23+
}
24+
],
25+
"@babel/preset-typescript"
26+
];
27+
28+
return {
29+
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"),
30+
devtool: isProd ? false : "source-map",
31+
output: {
32+
filename: isProd ? "[fullhash].bundle.js" : "[fullhash].bundle.js",
33+
globalObject: "this",
34+
path: path.resolve(__dirname, "dist")
35+
},
36+
37+
resolve: {
38+
mainFields: ["esm2015", "module", "main"],
39+
extensions: [".ts", ".js", ".json"],
40+
plugins: [
41+
new TsconfigPathsPlugin({
42+
configFile: "./tsconfig.json",
43+
extensions: [".ts", ".js"],
44+
mainFields: ["esm2015", "module", "main"]
45+
})
46+
]
47+
},
48+
49+
module: {
50+
rules: [
51+
{ test: /\.(png|svg|jpg|gif)$/, use: ["file-loader"] },
52+
{ test: /\.(csv|tsv)$/, use: ["csv-loader"] },
53+
{ test: /\.xml$/, use: ["xml-loader"] },
54+
{ test: /\.css$/, sideEffects: true, use: ["style-loader", "css-loader"] },
55+
{
56+
test: /worker\.(ts|js)$/,
57+
use: [
58+
{ loader: "worker-loader" },
59+
{
60+
loader: "babel-loader",
61+
options: {
62+
compact: isProd ? true : false,
63+
presets: presets,
64+
plugins: ["@babel/plugin-proposal-class-properties", "@babel/plugin-transform-runtime"]
65+
}
66+
}
67+
]
68+
},
69+
{
70+
test: /\.(ts|js)$/,
71+
loader: "babel-loader",
72+
options: {
73+
compact: isProd ? true : false,
74+
presets: presets,
75+
plugins: ["@babel/plugin-proposal-class-properties", "@babel/plugin-transform-runtime"]
76+
},
77+
exclude: function (modulePath) {
78+
return /node_modules/.test(modulePath) && !/igniteui-webcomponents/.test(modulePath) && !/lit-html/.test(modulePath);
79+
}
80+
}
81+
]
82+
},
83+
84+
plugins: [
85+
new webpack.DefinePlugin({
86+
"process.env.NODE_ENV": JSON.stringify(nodeEnv)
87+
}),
88+
new HtmlWebpackPlugin({
89+
title: "for-cs",
90+
template: "index.html"
91+
}),
92+
new ForkTsCheckerWebpackPlugin()
93+
]
94+
};
95+
};

0 commit comments

Comments
 (0)