Skip to content

Commit 0660e49

Browse files
kacheshmarovakacheshmarova
authored
Merge branch 'vnext' into mkirkova/date-picker-samples
2 parents eab0fa5 + d3eb62b commit 0660e49

Some content is hidden

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

45 files changed

+1720
-145
lines changed

‎browser/public/index.html‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1010,6 +1010,13 @@
10101010
</div>
10111011

10121012
<div class="nav-group">NOTIFICATIONS</div>
1013+
<label id="nav-banner" class="nav-component">Banner</label>
1014+
<div id="nav-banner-list" class="nav-list" state="collapsed">
1015+
<a class="nav-link" href="#" data-nav="/samples/notifications/banner/banner-advanced-sample">─<span>Advanced Sample</span></a>
1016+
<a class="nav-link" href="#" data-nav="/samples/notifications/banner/banner-sample-1">─<span>Sample1</span></a>
1017+
<a class="nav-link" href="#" data-nav="/samples/notifications/banner/banner-sample-2">─<span>Sample2</span></a>
1018+
<a class="nav-link" href="#" data-nav="/samples/notifications/banner/banner-styling">─<span>Styling</span></a>
1019+
</div>
10131020
<label id="nav-dialog" class="nav-component">Dialog</label>
10141021
<div id="nav-dialog-list" class="nav-list" state="collapsed">
10151022
<a class="nav-link" href="#" data-nav="/samples/notifications/dialog/closing-variations">─<span>Closing Variations</span></a>

‎samples/grids/grid/column-sorting-options/src/ProductSales.ts‎

Lines changed: 66 additions & 66 deletions
Large diffs are not rendered by default.

‎samples/grids/grid/column-sorting-style/src/ProductSales.ts‎

Lines changed: 66 additions & 66 deletions
Large diffs are not rendered by default.

‎samples/grids/grid/data-searching/index.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@
2020
<div class="container vertical">
2121
<div style="margin-bottom: 1rem">
2222
<igc-input id="searchBox" name="searchBox">
23-
<igc-icon id="clearIcon" slot="prefix" name="clear" collection="material"></igc-icon>
23+
<igc-icon id="searchIcon" slot="prefix" name="search" collection="material"></igc-icon>
2424
<div slot="suffix">
2525
<igc-chip selectable="true" id="caseSensitiveChip">Case Sensitive</igc-chip>
2626
<igc-chip selectable="true" id="exactMatchChip">Exact Match</igc-chip>
@@ -32,7 +32,7 @@
3232
</igc-input>
3333
</div>
3434

35-
<igc-grid auto-generate="false" id="grid" name="grid" allow-filtering="true" display-density="compact">
35+
<igc-grid auto-generate="false" id="grid" name="grid" allow-filtering="true" display-density="compact" height="100%" width="100%">
3636
<igc-column field="IndustrySector" data-type="string" sortable="true"></igc-column>
3737
<igc-column field="IndustryGroup" data-type="string" sortable="true"></igc-column>
3838
<igc-column field="SectorType" data-type="string" sortable="true"></igc-column>

‎samples/grids/grid/data-searching/src/index.ts‎

Lines changed: 16 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -3,44 +3,44 @@ import 'igniteui-webcomponents/themes/light/bootstrap.css';
33
import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
44

55
import { IgcGridComponent } from 'igniteui-webcomponents-grids/grids';
6-
import { defineComponents, IgcInputComponent, IgcChipComponent, IgcIconComponent, IgcIconButtonComponent, registerIconFromText } from 'igniteui-webcomponents';
6+
import { defineComponents, IgcInputComponent, IgcChipComponent, IgcIconComponent, IgcIconButtonComponent, registerIconFromText } from 'igniteui-webcomponents';
77
import { MarketData } from './MarketData';
88

99
defineComponents(IgcInputComponent, IgcChipComponent, IgcIconComponent, IgcIconButtonComponent);
1010

1111
export class Sample {
1212

1313
private grid: IgcGridComponent;
14-
1514
private searchBox: IgcInputComponent;
16-
15+
private searchIcon: IgcIconComponent;
1716
private clearIcon: IgcIconComponent;
1817
private nextIconButton: IgcIconButtonComponent;
1918
private prevIconButton: IgcIconButtonComponent;
20-
2119
private caseSensitiveChip: IgcChipComponent;
2220
private exactMatchChip: IgcChipComponent;
23-
2421
private data: MarketData;
25-
2622
private _bind: () => void;
2723

2824
constructor() {
2925
var grid = this.grid = document.getElementById('grid') as IgcGridComponent;
30-
26+
3127
this.nextSearch = this.nextSearch.bind(this);
3228
this.prevSearch = this.prevSearch.bind(this);
3329
this.clearSearch = this.clearSearch.bind(this);
30+
3431

3532
const prevIconText = "<svg width='24' height='24' viewBox='0 0 24 24'><path d='M15.41 7.41 14 6l-6 6 6 6 1.41-1.41L10.83 12z'></path></svg>";
3633
const nextIconText = "<svg width='24' height='24' viewBox='0 0 24 24'><path d='M10 6 8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z'></path></svg>";
3734
const clearIconText = "<svg width='24' height='24' viewBox='0 0 24 24' title='Clear'><path d='M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'></path></svg>";
38-
35+
const searchIconText = "<svg width='24' height='24' viewBox='0 0 24 24'><path d='M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z' /></svg>";
36+
3937
registerIconFromText("prev", prevIconText, "material");
4038
registerIconFromText("next", nextIconText, "material");
4139
registerIconFromText("clear", clearIconText, "material");
40+
registerIconFromText("search", searchIconText, "material");
41+
42+
var searchIcon = this.searchIcon = document.getElementById('searchIcon') as IgcIconComponent;
4243

43-
var clearIcon = this.clearIcon = document.getElementById('clearIcon') as IgcIconComponent;
4444

4545
var nextIconButton = this.nextIconButton = document.getElementById('nextIconBtn') as IgcIconButtonComponent;
4646
var prevIconButton = this.prevIconButton = document.getElementById('prevIconBtn') as IgcIconButtonComponent;
@@ -56,9 +56,13 @@ export class Sample {
5656
grid.data = this.data;
5757

5858
searchBox.addEventListener("keydown", (evt) => { this.onSearchKeydown(evt); });
59+
this.searchBox.addEventListener("igcInput", (evt) => {
60+
this.searchIcon.name = evt.detail ? 'clear' : 'search';
61+
this.grid.findNext(evt.detail, this.caseSensitiveChip.selected, this.exactMatchChip.selected);
62+
});
5963
nextIconButton.addEventListener("click", this.nextSearch);
6064
prevIconButton.addEventListener("click", this.prevSearch);
61-
clearIcon.addEventListener("click", this.clearSearch);
65+
searchIcon.addEventListener("click", this.clearSearch);
6266
}
6367
this._bind();
6468
}
@@ -83,7 +87,8 @@ export class Sample {
8387

8488
public clearSearch() {
8589
this.searchBox.value = "";
86-
this.grid.clearSearch();
90+
this.grid.clearSearch();
91+
this.searchIcon.name = 'search';
8792
}
8893
}
8994

‎samples/notifications/banner/banner-advanced-sample/.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/notifications/banner/banner-advanced-sample/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 Advanced Sample feature using [Banner](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/notifications/banner/banner-advanced-sample" 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/notifications/banner/banner-advanced-sample?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+
## 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/notifications/banner/banner-advanced-sample
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).

‎samples/notifications/banner/banner-advanced-sample/index.html‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
<html>
2+
3+
<head>
4+
<title>Banner Advanced Sample</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.v8.css" type="text/css" />
12+
</head>
13+
14+
<body>
15+
<div id="root">
16+
<div class="gallery__wrapper">
17+
<div class="gallery__content">
18+
<igc-navbar>
19+
<h1>Gallery</h1>
20+
<igc-icon id="icon" name="signal_wifi_off" slot="end" size="large"></igc-icon>
21+
</igc-navbar>
22+
23+
<igc-banner id="banner" class="offline-banner">
24+
<igc-icon name="signal_wifi_off" slot="prefix" size="large"></igc-icon>
25+
You have lost connection to the internet. This app is offline.
26+
<div slot="actions">
27+
<igc-button variant="flat" onclick="banner.hide()">
28+
<igc-ripple></igc-ripple>
29+
Continue Offline
30+
</igc-button>
31+
<igc-button id="button" variant="flat">
32+
<igc-ripple></igc-ripple>
33+
Turn On Wifi
34+
</igc-button>
35+
</div>
36+
</igc-banner>
37+
38+
<igc-card class="gallery__item" elevated>
39+
<div>
40+
<img src="https://www.infragistics.com/angular-demos-lob/assets/images/card/media/the_red_ice_forest.jpg">
41+
</div>
42+
</igc-card>
43+
<igc-card class="gallery__item" elevated>
44+
<div>
45+
<img src="https://www.infragistics.com/angular-demos-lob/assets/images/card/media/yosemite.jpg">
46+
</div>
47+
</igc-card>
48+
49+
<igc-toast id="toast" position="middle"></igc-toast>
50+
</div>
51+
</div>
52+
53+
</div>
54+
55+
<!-- This script is needed only for parcel and it will be excluded for webpack -->
56+
<% if (false) { %>
57+
<script src="src/index.ts"></script>
58+
<% } %>
59+
60+
</body>
61+
62+
</html>

‎samples/notifications/banner/banner-advanced-sample/package.json‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
{
2+
"name": "wc-banner-advanced-sample",
3+
"version": "1.0.0",
4+
"description": "This project provides example of Banner Advanced Sample 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.11.1",
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/notifications/banner/banner-advanced-sample/sandbox.config.json‎

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+

0 commit comments

Comments
 (0)