Skip to content

Commit 404ad12

Browse files
authored
Merge pull request #1114 from IgniteUI/sivanova/badge-dot
feat(badge): add dot type sample
2 parents 3fc66da + 68adde6 commit 404ad12

File tree

10 files changed

+304
-0
lines changed

10 files changed

+304
-0
lines changed

browser/public/index.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -821,6 +821,7 @@
821821
<div class="nav-group">INPUTS</div>
822822
<label id="nav-badge" class="nav-component">Badge</label>
823823
<div id="nav-badge-list" class="nav-list" state="collapsed">
824+
<a class="nav-link" href="#" data-nav="/samples/inputs/badge/dot"><span>Dot</span></a>
824825
<a class="nav-link" href="#" data-nav="/samples/inputs/badge/outlined"><span>Outlined</span></a>
825826
<a class="nav-link" href="#" data-nav="/samples/inputs/badge/shape"><span>Shape</span></a>
826827
<a class="nav-link" href="#" data-nav="/samples/inputs/badge/styling"><span>Styling</span></a>
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/badge/dot/ReadMe.md

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
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 Dot feature using [Badge](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://dl.infragistics.com/x/img/browsers/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://dl.infragistics.com/x/img/browsers/button-code.png"/>
14+
</a>
15+
<a target="_blank" href="https://www.infragistics.com/webcomponents-demos/samples/inputs/badge/dot" rel="noopener noreferrer">
16+
<img height="40px" style="border-radius: 0rem; max-width: 100%;" alt="Run Sample" src="https://dl.infragistics.com/x/img/browsers/button-run.png"/>
17+
</a>
18+
<a target="_blank" href="https://codesandbox.io/s/github/IgniteUI/igniteui-wc-examples/tree/master/samples/inputs/badge/dot?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://dl.infragistics.com/x/img/browsers/button-sandbox.png"/>
20+
</a>
21+
</body>
22+
</html>
23+
24+
## Branches
25+
26+
> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-angular-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-angular-examples/tree/vnext) branch only when you want to contribute new samples to this repository.
27+
28+
## Instructions
29+
30+
To set up this project locally, execute these commands:
31+
32+
```
33+
git clone https://github.com/IgniteUI/igniteui-wc-examples.git
34+
git checkout master
35+
cd ./igniteui-wc-examples
36+
cd ./samples/inputs/badge/dot
37+
```
38+
39+
open above folder in VS Code or type:
40+
```
41+
code .
42+
```
43+
44+
In terminal window, run:
45+
46+
```
47+
npm install
48+
npm run start
49+
```
50+
51+
Then open http://localhost:4200/ in your browser
52+
53+
54+
## Learn More
55+
56+
To learn more about **Ignite UI for Web Components**, check out the [Web Components documentation](https://infragistics.com/webcomponentssite/components/general-getting-started.html).
Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
<title>Badge Dot</title>
6+
<meta charset="UTF-8" />
7+
8+
<link rel="shortcut icon" href="https://dl.infragistics.com/x/img/browsers/wc.png">
9+
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
10+
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
11+
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
12+
<link rel="stylesheet" href="https://dl.infragistics.com/x/css/samples/shared.v8.css" type="text/css" />
13+
</head>
14+
15+
<body>
16+
<div id="root">
17+
<div class="sample center">
18+
<igc-badge dot></igc-badge>
19+
</div>
20+
</div>
21+
22+
<!-- This script is needed only for parcel and it will be excluded for webpack -->
23+
<% if (false) { %>
24+
<script src="src/index.ts"></script>
25+
<% } %>
26+
27+
</body>
28+
29+
</html>
Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
{
2+
"name": "wc-badge-dot",
3+
"version": "1.0.0",
4+
"description": "This project provides example of Badge Dot 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-i18n-core": "^0.7.0-alpha.8",
27+
"igniteui-webcomponents": "^6.4.0-alpha.4",
28+
"lit": "^3.2.0",
29+
"lit-html": "^3.3.1",
30+
"tslib": "^2.8.1"
31+
},
32+
"devDependencies": {
33+
"@babel/cli": "^7.28.3",
34+
"@babel/core": "^7.28.4",
35+
"@babel/plugin-transform-class-properties": "^7.27.1",
36+
"@babel/plugin-transform-class-static-block": "^7.28.3",
37+
"@babel/plugin-transform-runtime": "^7.28.3",
38+
"@babel/preset-env": "^7.28.3",
39+
"@babel/preset-typescript": "^7.27.1",
40+
"@types/source-map": "^0.5.7",
41+
"babel-loader": "^10.0.0",
42+
"babel-plugin-transform-custom-element-classes": "^0.1.0",
43+
"css-loader": "^7.1.2",
44+
"csv-loader": "^3.0.5",
45+
"file-loader": "^6.2.0",
46+
"fork-ts-checker-webpack-plugin": "^9.1.0",
47+
"html-webpack-plugin": "^5.6.4",
48+
"parcel-bundler": "^1.12.5",
49+
"source-map": "^0.7.6",
50+
"style-loader": "^4.0.0",
51+
"tsconfig-paths-webpack-plugin": "^4.2.0",
52+
"typescript": "^5.9.2",
53+
"webpack": "^5.101.3",
54+
"webpack-cli": "^6.0.1",
55+
"webpack-dev-server": "^5.2.2",
56+
"worker-loader": "^3.0.8",
57+
"xml-loader": "^1.2.1"
58+
},
59+
"license": "",
60+
"homepage": "."
61+
}
Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"infiniteLoopProtection": false,
3+
"hardReloadOnChange": false,
4+
"view": "browser",
5+
"template": "parcel"
6+
}
7+
Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
/* shared styles are loaded from: */
2+
/* https://dl.infragistics.com/x/css/samples/shared.v8.css */
Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import { defineComponents, IgcBadgeComponent } from 'igniteui-webcomponents';
2+
import 'igniteui-webcomponents/themes/light/bootstrap.css';
3+
4+
defineComponents(IgcBadgeComponent);
5+
export class BadgeDot {
6+
constructor() {
7+
}
8+
}
9+
10+
new BadgeDot();
Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
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": [
14+
"src/**/*"
15+
],
16+
"exclude": [
17+
"node_modules",
18+
"dist"
19+
]
20+
}
Lines changed: 107 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
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+
["@babel/preset-env", {
16+
"useBuiltIns": "usage",
17+
"corejs": 3,
18+
"targets": {
19+
"browsers": isLegacy ? ["defaults"] : [
20+
"last 2 Chrome versions",
21+
"last 2 Safari versions",
22+
"last 2 iOS versions",
23+
"last 2 Firefox versions",
24+
"last 2 Edge versions"]
25+
}
26+
}],
27+
"@babel/preset-typescript"
28+
];
29+
30+
return {
31+
entry: isLegacy ? [
32+
path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
33+
path.resolve(__dirname, 'node_modules/@webcomponents/template'),
34+
path.resolve(__dirname, 'src')
35+
] : path.resolve(__dirname, 'src'),
36+
devtool: isProd ? false : 'source-map',
37+
output: {
38+
filename: isProd ? '[fullhash].bundle.js' : '[fullhash].bundle.js',
39+
globalObject: 'this',
40+
path: path.resolve(__dirname, 'dist'),
41+
},
42+
43+
resolve: {
44+
mainFields: ['esm2015', 'module', 'main'],
45+
extensions: ['.ts', '.js', '.json'],
46+
plugins: [new TsconfigPathsPlugin({
47+
configFile: './tsconfig.json',
48+
extensions: ['.ts', '.js'],
49+
mainFields: ['esm2015', 'module', 'main']
50+
})]
51+
},
52+
53+
module: {
54+
rules: [
55+
{ test: /\.(png|svg|jpg|gif)$/, use: ['file-loader'] },
56+
{ test: /\.(csv|tsv)$/, use: ['csv-loader'] },
57+
{ test: /\.xml$/, use: ['xml-loader'] },
58+
{ test: /\.css$/, sideEffects: true, use: ['style-loader', 'css-loader'] },
59+
{
60+
test: /worker\.(ts|js)$/,
61+
use: [
62+
{ loader: 'worker-loader' },
63+
{
64+
loader: 'babel-loader', options: {
65+
"compact": isProd ? true : false,
66+
"presets": presets,
67+
"plugins": [
68+
"@babel/plugin-transform-class-static-block",
69+
"@babel/plugin-transform-class-properties",
70+
"@babel/plugin-transform-runtime"
71+
]
72+
}
73+
}
74+
]
75+
},
76+
{
77+
test: /\.(ts|js)$/, loader: 'babel-loader',
78+
options: {
79+
"compact": isProd ? true : false,
80+
"presets": presets,
81+
"plugins": [
82+
"@babel/plugin-transform-class-static-block",
83+
"@babel/plugin-transform-class-properties",
84+
"@babel/plugin-transform-runtime"
85+
]
86+
},
87+
exclude:
88+
function (modulePath) {
89+
return /node_modules/.test(modulePath) &&
90+
!/igniteui-webcomponents/.test(modulePath) &&
91+
!/lit-html/.test(modulePath);
92+
}
93+
}],
94+
},
95+
96+
plugins: [
97+
new webpack.DefinePlugin({
98+
'process.env.NODE_ENV': JSON.stringify(nodeEnv)
99+
}),
100+
new HtmlWebpackPlugin({
101+
title: 'for-cs',
102+
template: 'index.html'
103+
}),
104+
new ForkTsCheckerWebpackPlugin()
105+
]
106+
};
107+
};

0 commit comments

Comments
 (0)