Skip to content

Commit 9280a17

Browse files
ArulPrakasArulPrakas
authored
Merge pull request #4 from Jeyvr/main
i18n API box sample web component
2 parents a7e8ebf + dcd8a56 commit 9280a17

File tree

16 files changed

+741
-0
lines changed

16 files changed

+741
-0
lines changed

‎samples/web-components/README.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,4 +5,5 @@
55
| 3 | Simple banner | custom-banner | ![Home](banner/showcase.png) | [View](https://github.com/SoftwareAG/webmethods-developer-portal/tree/main/samples/web-components/banner) |
66
| 4 | Customized gallery | api-gallery-with-filter | ![Home](api-gallery-with-filter/showcase.png) | [View](https://github.com/SoftwareAG/webmethods-developer-portal/tree/main/samples/web-components/api-gallery-with-filter) |
77
| 5 | Customized API box | api-gallery-box | ![Home](api-gallery-box/showcase.png) | [View](https://github.com/SoftwareAG/webmethods-developer-portal/tree/main/samples/web-components/api-gallery-box) |
8+
| 6 | API box with i18n switch | api-gallery-i18ninfo | ![Home](api-gallery-i18n/sample.png) | [View](https://github.com/SoftwareAG/webmethods-developer-portal/tree/main/samples/web-components/api-gallery-i18n) |
89

‎samples/web-components/api-gallery-i18n/.eslintrc.json‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
{
2+
"env": {
3+
"browser": true,
4+
"es2021": true
5+
},
6+
"extends": [
7+
"eslint:recommended",
8+
"plugin:@typescript-eslint/recommended"
9+
],
10+
"parser": "@typescript-eslint/parser",
11+
"parserOptions": {
12+
"ecmaVersion": 12,
13+
"sourceType": "module"
14+
},
15+
"plugins": [
16+
"@typescript-eslint"
17+
],
18+
"rules": {
19+
"@typescript-eslint/no-explicit-any": "off",
20+
"linebreak-style": [
21+
"error",
22+
"windows"
23+
],
24+
"quotes": [
25+
"error",
26+
"single"
27+
],
28+
"semi": [
29+
"error",
30+
"always"
31+
]
32+
}
33+
}

‎samples/web-components/api-gallery-i18n/.gitattributes‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
# Auto detect text files and perform LF normalization
2+
* text=auto

‎samples/web-components/api-gallery-i18n/.gitignore‎

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
# Logs
2+
logs
3+
*.log
4+
npm-debug.log*
5+
yarn-debug.log*
6+
yarn-error.log*
7+
8+
# Runtime data
9+
pids
10+
*.pid
11+
*.seed
12+
*.pid.lock
13+
14+
# Directory for instrumented libs generated by jscoverage/JSCover
15+
lib-cov
16+
17+
# Coverage directory used by tools like istanbul
18+
coverage
19+
20+
# nyc test coverage
21+
.nyc_output
22+
23+
# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
24+
.grunt
25+
26+
# Bower dependency directory (https://bower.io/)
27+
bower_components
28+
29+
# node-waf configuration
30+
.lock-wscript
31+
32+
# Compiled binary addons (https://nodejs.org/api/addons.html)
33+
build/Release
34+
35+
# Dependency directories
36+
node_modules/
37+
jspm_packages/
38+
39+
# TypeScript v1 declaration files
40+
typings/
41+
42+
# Optional npm cache directory
43+
.npm
44+
45+
# Optional eslint cache
46+
.eslintcache
47+
48+
# Optional REPL history
49+
.node_repl_history
50+
51+
# Output of 'npm pack'
52+
*.tgz
53+
54+
# Yarn Integrity file
55+
.yarn-integrity
56+
57+
# dotenv environment variables file
58+
.env
59+
60+
# parcel-bundler cache (https://parceljs.org/)
61+
.cache
62+
63+
# next.js build output
64+
.next
65+
66+
# nuxt.js build output
67+
.nuxt
68+
69+
# vuepress build output
70+
.vuepress/dist
71+
72+
# Serverless directories
73+
.serverless
74+
75+
# FuseBox cache
76+
.fusebox/
77+
78+
.idea
79+
80+
public/bundle.js
81+
82+
package-lock.json

‎samples/web-components/api-gallery-i18n/LICENSE‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
MIT License
2+
3+
Copyright (c) 2021 Nagarajan Sivaraman
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in all
13+
copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21+
SOFTWARE.

‎samples/web-components/api-gallery-i18n/README.md‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
# About Web Component Samples
2+
3+
4+
### Development
5+
This project uses `Typescript` and `Webpack` to create and build one or more web components to a single JavaScript file.
6+
7+
8+
### Setup
9+
10+
To download and install the packages run the install command <br>
11+
`npm run install`
12+
13+
14+
To import the web-component into the theme, it needs to be compiled to a single JavaScript file.
15+
To build and generate the single JavaScript file, you need to run the build command. <br>
16+
`npm run build`
17+
18+
19+
The required JavaScript file will be generated as `bundle.js` and would be available under the folder `public`.
20+
21+
### Examples included
22+
23+
`api-gallery-i18ninfo`
24+
25+
This element renders an available localization for this API. On click of particular flag the corresponding locale data will be rendered.
26+
This element need to be placed inside the API default box.

‎samples/web-components/api-gallery-i18n/package.json‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
{
2+
"name": "ts-web-components",
3+
"version": "1.0.0",
4+
"description": "Webcomponents using typscript + webpack",
5+
"main": "index.js",
6+
"scripts": {
7+
"serve": "webpack serve",
8+
"lint": "eslint",
9+
"build": "webpack",
10+
"test": "echo \"Error: no test specified\" && exit 1"
11+
},
12+
"repository": {
13+
"type": "git",
14+
"url": "git+https://github.com/school-coder/ts-web-components.git"
15+
},
16+
"keywords": [
17+
"web-component"
18+
],
19+
"author": "Nagarajan Sivaraman",
20+
"license": "MIT",
21+
"bugs": {
22+
"url": "https://github.com/school-coder/ts-web-components/issues"
23+
},
24+
"homepage": "https://github.com/school-coder/ts-web-components#readme",
25+
"devDependencies": {
26+
"@typescript-eslint/eslint-plugin": "^4.25.0",
27+
"@typescript-eslint/parser": "^4.25.0",
28+
"eslint": "^7.27.0",
29+
"ts-loader": "^9.2.2",
30+
"typescript": "^4.2.4",
31+
"webpack": "^5.37.1",
32+
"webpack-cli": "^4.7.0",
33+
"webpack-dev-server": "^4.7.4"
34+
}
35+
}

‎samples/web-components/api-gallery-i18n/sample.png‎

56.7 KB
Loading

‎samples/web-components/api-gallery-i18n/src/abstract.portal.element.ts‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
import {ContextModel} from './model/context.model';
2+
3+
/**
4+
* Developer Portal requires the web-components, created by Administrators, to extend this class AbstractPortalElement
5+
*
6+
* Developer Portal rendering engine will invoke setContext method to set applicable context data, navigator function and localize function.
7+
*
8+
* It is recommended to write the rendering logic of the web-components with render() function as the initiator.
9+
*/
10+
11+
export abstract class AbstractPortalElement extends HTMLElement {
12+
13+
private context: ContextModel;
14+
15+
/**
16+
* Starting point of the rendering logic. The method will be implemented by extending web-component owned by administrator.
17+
*/
18+
abstract render(): void | Promise<any>;
19+
20+
/**
21+
* This method will be invoked by web-component rendering engine
22+
*/
23+
setContext(context: ContextModel): void {
24+
this.context = context;
25+
this.render();
26+
}
27+
28+
/**
29+
* returns the context data specific to the use-case, if applicable.
30+
* @protected
31+
*/
32+
protected getData(): any {
33+
if (this.context && this.context.getData) {
34+
return this.context.getData();
35+
}
36+
}
37+
38+
/**
39+
* navigate to the location mentioned.
40+
* @param path
41+
* @protected
42+
*/
43+
protected navigate(path: string): void {
44+
if (this.context && this.context.navigate) {
45+
this.context.navigate(path);
46+
}
47+
}
48+
49+
/**
50+
* Provides the value for the given property key. If the key doesnt exist, key string itself will be returned.
51+
* @param key
52+
* @protected
53+
*/
54+
protected getLocaleString(key: string): string {
55+
if (this.context && this.context.getLocaleString) {
56+
return this.context.getLocaleString(key);
57+
}
58+
return key;
59+
}
60+
}

0 commit comments

Comments
 (0)