diff --git a/packages/knowledge-base-web-page-element-view/assets/index.html b/packages/knowledge-base-web-page-element-view/assets/index.html
index 39dee9eba86c183c6f1068751a0c22e6122e5522..ad12e30e74499a5ccacd3d8579380325be43ce57 100644
--- a/packages/knowledge-base-web-page-element-view/assets/index.html
+++ b/packages/knowledge-base-web-page-element-view/assets/index.html
@@ -4,7 +4,14 @@
<meta charset="UTF-8">
<script type="module" id="vpu-knowledge-base-web-page-element-view-wc-src" src="bundle.js"></script>
</head>
-
+<style>
+ vpu-knowledge-base-web-page-element-view-demo {
+ --KBBorderRadius: 10px;
+ --KBBorder: 2px dashed red;
+ --KBMargin: 20px;
+ --KBPadding: 5px;
+ }
+</style>
<body>
<vpu-knowledge-base-web-page-element-view-demo lang="de"></vpu-knowledge-base-web-page-element-view-demo>
diff --git a/packages/knowledge-base-web-page-element-view/package.json b/packages/knowledge-base-web-page-element-view/package.json
index 6828135742e83e979e636a8920f0a4a2b64c1d26..59e0dfb1630608f05c1c437d04ad6d31b3809eae 100644
--- a/packages/knowledge-base-web-page-element-view/package.json
+++ b/packages/knowledge-base-web-page-element-view/package.json
@@ -3,31 +3,37 @@
"version": "1.0.0",
"main": "src/index.js",
"devDependencies": {
+ "chai": "^4.2.0",
+ "i18next-scanner": "^2.10.2",
"karma": "^4.2.0",
"karma-chai": "^0.1.0",
"karma-chrome-launcher": "^3.0.0",
"karma-mocha": "^1.3.0",
+ "mocha": "^6.2.0",
"node-sass": "^4.12.0",
"puppeteer": "^1.15.0",
- "mocha": "^6.2.0",
- "chai": "^4.2.0",
- "rollup": "^1.11.3",
+ "rollup": "^1.20.0",
"rollup-plugin-commonjs": "^10.0.2",
"rollup-plugin-consts": "^1.0.1",
"rollup-plugin-copy": "^3.1.0",
+ "rollup-plugin-delete": "^1.1.0",
+ "rollup-plugin-json": "^4.0.0",
+ "rollup-plugin-multi-entry": "^2.1.0",
"rollup-plugin-node-resolve": "^5.2.0",
"rollup-plugin-postcss": "^2.0.3",
+ "rollup-plugin-replace": "^2.2.0",
"rollup-plugin-serve": "^1.0.1",
"rollup-plugin-terser": "^5.1.1",
- "rollup-plugin-json": "^4.0.0",
- "rollup-plugin-multi-entry": "^2.1.0",
- "i18next-scanner": "^2.10.2",
+ "rollup-plugin-url": "^2.2.2",
"vpu-auth": "file:./vendor/auth",
"vpu-common": "file:./vendor/common"
},
"dependencies": {
+ "bulma": "^0.7.5",
+ "i18next": "^17.0.3",
"lit-element": "^2.1.0",
- "lit-html": "^1.1.1"
+ "lit-html": "^1.1.1",
+ "material-design-icons-svg": "^3.0.0"
},
"scripts": {
"clean": "rm dist/*",
diff --git a/packages/knowledge-base-web-page-element-view/rollup.config.js b/packages/knowledge-base-web-page-element-view/rollup.config.js
index c225a449152c11b90937dde0a0299114f428e709..386966a736ec952985e0d1ae9b149c4bca95f8dc 100644
--- a/packages/knowledge-base-web-page-element-view/rollup.config.js
+++ b/packages/knowledge-base-web-page-element-view/rollup.config.js
@@ -1,13 +1,14 @@
import path from 'path';
import resolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';
-import postcss from 'rollup-plugin-postcss';
import copy from 'rollup-plugin-copy';
import {terser} from "rollup-plugin-terser";
import json from 'rollup-plugin-json';
import serve from 'rollup-plugin-serve';
import multiEntry from 'rollup-plugin-multi-entry';
+import url from "rollup-plugin-url";
import consts from 'rollup-plugin-consts';
+import del from 'rollup-plugin-delete';
const build = (typeof process.env.BUILD !== 'undefined') ? process.env.BUILD : 'local';
console.log("build: " + build);
@@ -19,6 +20,9 @@ export default {
format: 'esm'
},
plugins: [
+ del({
+ targets: 'dist/*'
+ }),
multiEntry(),
consts({
environment: build,
@@ -33,10 +37,14 @@ export default {
include: 'node_modules/**'
}),
json(),
- postcss({
- inject: false,
- minimize: false,
- plugins: []
+ url({
+ limit: 0,
+ include: [
+ "node_modules/bulma/**/*.css",
+ "node_modules/bulma/**/*.sass",
+ ],
+ emitFiles: true,
+ fileName: 'shared/[name].[hash][extname]'
}),
(build !== 'local' && build !== 'test') ? terser() : false,
copy({
diff --git a/packages/knowledge-base-web-page-element-view/src/demo.js b/packages/knowledge-base-web-page-element-view/src/demo.js
index 0eac7585d206c68dc8890ab2c9ce751ebbde8424..8f60cbf7512749fe4570a825101694c00a554241 100644
--- a/packages/knowledge-base-web-page-element-view/src/demo.js
+++ b/packages/knowledge-base-web-page-element-view/src/demo.js
@@ -1,8 +1,10 @@
-import 'vpu-auth';
-import './vpu-kb-wpe-view.js';
import {i18n} from './i18n';
import {html, LitElement} from 'lit-element';
+import 'vpu-auth';
+import './vpu-kb-wpe-view';
import * as commonUtils from 'vpu-common/utils';
+import bulmaCSSPath from "bulma/css/bulma.min.css";
+import * as utils from "./utils";
class KnowledgeBaseWebPageElementViewDemo extends LitElement {
constructor() {
@@ -27,17 +29,27 @@ class KnowledgeBaseWebPageElementViewDemo extends LitElement {
}
render() {
+ const bulmaCSS = utils.getAssetURL(bulmaCSSPath);
return html`
+ <link rel="stylesheet" href="${bulmaCSS}">
<style>
+ vpu-knowledge-base-web-page-element-view.clean {
+ --KBBorder: initial;
+ --KBBorderRadius: initial;
+ --KBMargin: initial;
+ --KBPadding: initial;
+ }
+ vpu-knowledge-base-web-page-element-view.opt {
+ --KBBorder: 2px solid blue;
+ }
</style>
- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.min.css">
-
+
<section class="section">
<div class="content">
<h1 class="title">KnowledgeBaseWebPageElementView-Demo</h1>
</div>
<div class="content">
- <vpu-auth lang="${this.lang}" client-id="${commonUtils.setting('keyCloakClientId')}" load-person force-login></vpu-auth>
+ <vpu-auth lang="${this.lang}" client-id="${commonUtils.setting('keyCloakClientId')}" load-person remember-login></vpu-auth>
</div>
<div class="content">
<h2 class="subtitle">Deutsch</h2>
@@ -58,7 +70,7 @@ class KnowledgeBaseWebPageElementViewDemo extends LitElement {
<div class="content">
<p>ohne Text in der WebComponent:</p>
Kontaktieren Sie uns unter...
- <vpu-knowledge-base-web-page-element-view lang="${this.lang}" value="abc/def/klm"></vpu-knowledge-base-web-page-element-view>
+ <vpu-knowledge-base-web-page-element-view class="opt" lang="${this.lang}" value="abc/def/klm"></vpu-knowledge-base-web-page-element-view>
</div>
</section>
`;
diff --git a/packages/knowledge-base-web-page-element-view/src/utils.js b/packages/knowledge-base-web-page-element-view/src/utils.js
new file mode 100644
index 0000000000000000000000000000000000000000..d6191ebb798ac5bcead29513e294e84375aaf967
--- /dev/null
+++ b/packages/knowledge-base-web-page-element-view/src/utils.js
@@ -0,0 +1,9 @@
+export const getAssetURL = (path) => {
+ const elm = document.getElementById('vpu-knowledge-base-web-page-element-view-wc-src');
+ if (!elm)
+ return path;
+ const url = elm.src;
+ // newer browsers only
+ //var url = import.meta.url;
+ return new URL(path, url).href;
+};
diff --git a/packages/knowledge-base-web-page-element-view/src/vpu-kb-wpe-view.js b/packages/knowledge-base-web-page-element-view/src/vpu-kb-wpe-view.js
index 03e9618283335fedbe5c50b86f88c9f1f588666a..28f9cec2f363f80f617b7e291f422ac18227194a 100644
--- a/packages/knowledge-base-web-page-element-view/src/vpu-kb-wpe-view.js
+++ b/packages/knowledge-base-web-page-element-view/src/vpu-kb-wpe-view.js
@@ -2,9 +2,11 @@ import {i18n} from './i18n';
import {html} from 'lit-element';
// import JSONLD from 'vpu-common/jsonld';
import VPULitElement from 'vpu-common/vpu-lit-element'
-import * as commonUtils from "vpu-common/utils";
import "vpu-common/vpu-mini-spinner.js";
+import * as commonUtils from "vpu-common/utils";
import {unsafeHTML} from 'lit-html/directives/unsafe-html.js';
+import bulmaCSSPath from "bulma/css/bulma.min.css";
+import * as utils from "./utils";
/**
* KnowledgeBaseWebPageElementView web component
@@ -155,10 +157,17 @@ class VPUKnowledgeBaseWebPageElementView extends VPULitElement {
render() {
//<link rel="stylesheet" href="${this.css}">
+ const bulmaCSS = utils.getAssetURL(bulmaCSSPath);
return html`
- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.min.css">
+ <link rel="stylesheet" href="${bulmaCSS}">
<style>
- .kb {display: none}
+ .kb {
+ display: none;
+ border-radius: var(--KBBorderRadius, 0);
+ border: var(--KBBorder, 0);
+ margin: var(--KBMargin, 0);
+ padding: var(--KBPadding, 0);
+ }
span.has-text img {margin-left: 5px}
span.with-pointer { cursor: pointer; }
</style>
diff --git a/packages/knowledge-base-web-page-element-view/vendor/auth b/packages/knowledge-base-web-page-element-view/vendor/auth
index 6a6413f48e0cd5508546841905f73a9486211bd0..33f040f4a2cedef5ea468f88dbd93210277bb67e 160000
--- a/packages/knowledge-base-web-page-element-view/vendor/auth
+++ b/packages/knowledge-base-web-page-element-view/vendor/auth
@@ -1 +1 @@
-Subproject commit 6a6413f48e0cd5508546841905f73a9486211bd0
+Subproject commit 33f040f4a2cedef5ea468f88dbd93210277bb67e
diff --git a/packages/knowledge-base-web-page-element-view/vendor/common b/packages/knowledge-base-web-page-element-view/vendor/common
index f65096b99b737a046d07ad6616eec31788850422..5e3da6e22fd0d14b95fbc032d385c020ae47fba7 160000
--- a/packages/knowledge-base-web-page-element-view/vendor/common
+++ b/packages/knowledge-base-web-page-element-view/vendor/common
@@ -1 +1 @@
-Subproject commit f65096b99b737a046d07ad6616eec31788850422
+Subproject commit 5e3da6e22fd0d14b95fbc032d385c020ae47fba7