i18n API box sample web component

samples/web-components/README.md

@@ -5,4 +5,5 @@
 | 3 | Simple banner  | custom-banner | ![Home](banner/showcase.png) | [View](https://github.com/SoftwareAG/webmethods-developer-portal/tree/main/samples/web-components/banner) |
 | 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) |
 | 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) |
+| 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) |
 

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

@@ -0,0 +1,33 @@
+{
+  "env": {
+    "browser": true,
+    "es2021": true
+  },
+  "extends": [
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended"
+  ],
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "ecmaVersion": 12,
+    "sourceType": "module"
+  },
+  "plugins": [
+    "@typescript-eslint"
+  ],
+  "rules": {
+    "@typescript-eslint/no-explicit-any": "off",
+    "linebreak-style": [
+      "error",
+      "windows"
+    ],
+    "quotes": [
+      "error",
+      "single"
+    ],
+    "semi": [
+      "error",
+      "always"
+    ]
+  }
+}

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

@@ -0,0 +1,2 @@
+# Auto detect text files and perform LF normalization
+* text=auto

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

@@ -0,0 +1,82 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# TypeScript v1 declaration files
+typings/
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+
+# next.js build output
+.next
+
+# nuxt.js build output
+.nuxt
+
+# vuepress build output
+.vuepress/dist
+
+# Serverless directories
+.serverless
+
+# FuseBox cache
+.fusebox/
+
+.idea
+
+public/bundle.js
+
+package-lock.json

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

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

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

@@ -0,0 +1,26 @@
+# About Web Component Samples
+
+
+### Development 
+This project uses `Typescript` and `Webpack` to create and build one or more web components to a single JavaScript file.
+
+
+### Setup
+
+To download and install the packages run the install command <br>
+`npm run install` 
+
+
+To import the web-component into the theme, it needs to be compiled to a single JavaScript file. 
+To build and generate the single JavaScript file, you need to run the build command. <br>
+ `npm run build` 
+
+
+The required JavaScript file will be generated as `bundle.js` and would be available under the folder `public`.
+
+### Examples included
+
+`api-gallery-i18ninfo` 
+
+This element renders an available localization for this API. On click of particular flag the corresponding locale data will be rendered. 
+This element need to be placed inside the API default box.

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

@@ -0,0 +1,35 @@
+{
+  "name": "ts-web-components",
+  "version": "1.0.0",
+  "description": "Webcomponents using typscript + webpack",
+  "main": "index.js",
+  "scripts": {
+    "serve": "webpack serve",
+    "lint": "eslint",
+    "build": "webpack",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/school-coder/ts-web-components.git"
+  },
+  "keywords": [
+    "web-component"
+  ],
+  "author": "Nagarajan Sivaraman",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/school-coder/ts-web-components/issues"
+  },
+  "homepage": "https://github.com/school-coder/ts-web-components#readme",
+  "devDependencies": {
+    "@typescript-eslint/eslint-plugin": "^4.25.0",
+    "@typescript-eslint/parser": "^4.25.0",
+    "eslint": "^7.27.0",
+    "ts-loader": "^9.2.2",
+    "typescript": "^4.2.4",
+    "webpack": "^5.37.1",
+    "webpack-cli": "^4.7.0",
+    "webpack-dev-server": "^4.7.4"
+  }
+}

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

@@ -0,0 +1,60 @@
+import {ContextModel} from './model/context.model';
+
+/**
+ * Developer Portal requires the web-components, created by Administrators, to extend this class AbstractPortalElement
+ *
+ * Developer Portal rendering engine will invoke setContext method to set applicable context data, navigator function and localize function.
+ *
+ * It is recommended to write the rendering logic of the web-components with render() function as the initiator.
+ */
+
+export abstract class AbstractPortalElement extends HTMLElement {
+
+    private context: ContextModel;
+
+    /**
+     * Starting point of the rendering logic. The method will be implemented by extending web-component owned by administrator.
+     */
+    abstract render(): void | Promise<any>;
+
+    /**
+     * This method will be invoked by web-component rendering engine
+     */
+    setContext(context: ContextModel): void {
+        this.context = context;
+        this.render();
+    }
+
+    /**
+     * returns the context data specific to the use-case, if applicable.
+     * @protected
+     */
+    protected getData(): any {
+        if (this.context && this.context.getData) {
+            return this.context.getData();
+        }
+    }
+
+    /**
+     * navigate to the location mentioned.
+     * @param path
+     * @protected
+     */
+    protected navigate(path: string): void {
+        if (this.context && this.context.navigate) {
+            this.context.navigate(path);
+        }
+    }
+
+    /**
+     * Provides the value for the given property key. If the key doesnt exist, key string itself will be returned.
+     * @param key
+     * @protected
+     */
+    protected getLocaleString(key: string): string {
+        if (this.context && this.context.getLocaleString) {
+            return this.context.getLocaleString(key);
+        }
+        return key;
+    }
+}