dd text attribute (before image)

(on request by Jakob)

packages/knowledge-base-web-page-element-view/vpu-kb-wpe-view-demo.js

@@ -38,12 +38,12 @@ class KnowledgeBaseWebPageElementViewDemo extends LitElement {
                 <div class="content">
                     <h2 class="subtitle">Deutsch</h2>
                     Ein Buch ausleihen...
-                    <vpu-knowledge-base-web-page-element-view entry-point-url="${utils.getAPiUrl()}" lang="de" value="bedienstete/bibliothek/buch-ausleihen"></vpu-knowledge-base-web-page-element-view>
+                    <vpu-knowledge-base-web-page-element-view entry-point-url="${utils.getAPiUrl()}" lang="de" value="bedienstete/bibliothek/buch-ausleihen" text="..."></vpu-knowledge-base-web-page-element-view>
                 </div>
                 <div class="content">
                     <h2 class="subtitle">Englisch</h2>
                     Borrow a book...
-                    <vpu-knowledge-base-web-page-element-view entry-point-url="${utils.getAPiUrl()}" lang="en" value="bedienstete/bibliothek/buch-ausleihen"></vpu-knowledge-base-web-page-element-view>
+                    <vpu-knowledge-base-web-page-element-view entry-point-url="${utils.getAPiUrl()}" lang="en" value="bedienstete/bibliothek/buch-ausleihen" text="..."></vpu-knowledge-base-web-page-element-view>
                 </div>
                 <hr>
                 <div class="content">

packages/knowledge-base-web-page-element-view/vpu-kb-wpe-view.js

@@ -21,6 +21,7 @@ class VPUKnowledgeBaseWebPageElementView extends VPULitElement {
         this.eyeClose = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAA1ElEQVQ4ja3SMU5CURCF4c+ejpiILe5DZAGyASuJS5CKEoMGKhdAwWKgMkriKjQWFkAkBizgmckNPEgeJ7nVuee/M3eGI2mCehFAHZ/Hgtygizd84wsjPOHsEMgUqx1njvtd4R7uAmSIMipo4SeAHtLwdTCbG8gHLsOdVlJN9LwEY4nSFsh5AhhHwGtinoY/ySDlPEAjMbvByyDDvBbgOZi/eNxUkrUTp9NJw3CCNhbJS0vcBshgWzjqAn28W899Zr1U1dBObR8kT9nGXhWFTIoA/vUHQydS/iUcHx4AAAAASUVORK5CYII=';
         this.eyeOpen = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAA5UlEQVQ4jc3SvS7EURAF8B+JioSsCokHUFgNiWewQqvzICRew2v4WLFUnoNS/msrazUaFOYm12RlVeIkk9ycM2fmztzLf8U02tiPaAc3EbM4Rh8fKfo4wdxP5nXcV4YhLnGO54p/wEY2b6akHhYqfR7dVHyriMt4qsQRWtiNaw+wFwWHaaQlcc161l4UblIyXKTcM7hL5FUk14tsgsvNumIhb2NG6ISxiXMrtJI3wErZwyHeK/E2DAWLuKn0F2xLOEgdRriOeK34sc9YsIpT37dd4hFHvj7bRMxElw52sIap3xj/Hp9rzGFBhiMSxAAAAABJRU5ErkJggg==';
         //this.css = 'kb.css';
+        this.text = '';
     }
 
     /**
@@ -35,6 +36,7 @@ class VPUKnowledgeBaseWebPageElementView extends VPULitElement {
             id: { type: String, attribute: false},
             error: { type: String, attribute: false},
             //css: { type: String },
+            text: { type: String },
         };
     }
 
@@ -144,8 +146,7 @@ class VPUKnowledgeBaseWebPageElementView extends VPULitElement {
                     display: none;
                 }
             </style>
-
-            <img src='${this.eyeOpen}' @click="${this.toggle}" alt="open/close">
+            <span>${this.text}<img src='${this.eyeOpen}' @click="${this.toggle}" alt="open/close"></span>
             <div class='kb' id="${id}">
                 ${unsafeHTML(this.html)}
                 ${this.error}