@progressive-development/pd-forms 0.1.35 → 0.1.36

package/package.json

@@ -3,7 +3,7 @@
   "description": "Webcomponent pd-forms following open-wc recommendations",
   "license": "SEE LICENSE IN LICENSE",
   "author": "PD Progressive Development",
-  "version": "0.1.35",
+  "version": "0.1.36",
   "main": "index.js",
   "module": "index.js",
   "scripts": {

package/pd-hover-box.js

@@ -0,0 +1,3 @@
+import { PdHoverBox } from './src/PdHoverBox.js';
+
+window.customElements.define('pd-hover-box', PdHoverBox);

package/src/PdBaseUiInput.js

@@ -34,6 +34,8 @@ import { PdBaseUI } from './PdBaseUi.js';
 
 import { SharedInputStyles } from './shared-input-styles.js';
 
+import '../pd-hover-box.js';
+
 /**
  * Available input types.
  * Each input elemt set it's own type during constructor call.
@@ -230,9 +232,16 @@ import { SharedInputStyles } from './shared-input-styles.js';
         return html`
           <div class="label-header">
             <label for="${forParam}">${this.label}${this.required && this.label ? this.defaultRequiredChar : ''}${additionalValue ? html` - <b>${additionalValue}</b>` : ''}</label>
-            ${this.helperTxt ? html`<pd-icon title="${this.helperTxt}" icon="helpIcon" activeIcon></pd-icon>` : ""}
+            ${this.helperTxt ? html`
+                
+                <pd-hover-box>
+                    <pd-icon slot="small-view" icon="helpIcon" activeIcon></pd-icon>                    
+                    <p slot="extended-view">${this.helperTxt}</p>
+                </pd-hover-box>
+                
+                ` : ""}
           </div>
         `;
     }
 
- }
+ } 

package/src/PdHoverBox.js

@@ -0,0 +1,108 @@
+/* eslint-disable lit-a11y/click-events-have-key-events */
+/**
+ * @license
+ * Copyright (c) 2021 PD Progressive Development UG. All rights reserved.
+ * 
+ * Lit element container for pd input elements.
+ * 
+ * Used to:
+ * - Automatically validation of form content
+ * - Success/NotReady information for form-container
+ */
+
+import { html, css } from 'lit';
+import { PdBaseUI } from './PdBaseUi.js';
+
+/**
+ * An example element.
+ *
+ * @slot - This element has a slot
+ * @csspart button - The button
+ */
+export class PdHoverBox extends PdBaseUI {
+
+  static get properties() {
+    return {      
+      _visible: { type: Boolean, state: true},      
+    };
+  }
+
+  static get styles() {
+    return [    
+    PdBaseUI.styles,  
+    css`
+
+      :host {        
+        
+      }
+
+      .hover-box {
+        position: relative;
+      }
+
+      .small-view {
+        
+      }
+
+      .extended-view {
+        position: absolute;                
+        z-index: 100;
+        right: -3px;
+        top: -3px;
+        background-color: var(--pd-hover-box-bg-col, var(--pd-default-dark-col));
+        visibility: hidden; /* Hidden by default */
+        opacity: 0;
+        border: 1px solid var(--pd-hover-box-border-col, var(--pd-default-col));
+        color: var(--pd-hover-box-font-col, white);
+        text-align: center;
+        padding: 5px;
+
+        min-width: 160px;
+        max-width: 400px;   
+        
+        transition: opacity 0.2s ease-in;
+      }
+
+    `];
+  }    
+
+  render() {
+    return html`  
+      <div class="hover-box">
+        
+          <div class="small-view" @click="${this._activateInfo}">
+            <slot name="small-view"></slot>
+          </div>
+
+          <div id="extendedViewId" class="extended-view">
+            <slot name="extended-view"></slot>
+          </div>
+
+      </div>
+    `;
+  }
+
+  // eslint-disable-next-line class-methods-use-this
+  _activateInfo(e) {    
+    const modal = this.shadowRoot.getElementById('extendedViewId');    
+    modal.style.visibility = 'visible';
+    modal.style.opacity = '1';    
+    this.addEventListener('click', this._clickHandler);
+    e.stopPropagation();
+
+    // Nachteil: Wird immer bei jedem Click nach erstmaligem aktvieren ausgeführt. Der Code unten
+    // aber nur bei KLick auf das Fenster, daher zunächst so belassen.
+    // Nachtrag: Allerdings geht es nicht für mehrere Hilfetexte gleichzeitig. Zunächst zurückgenommen.
+    /* window.onclick = () => {      
+      modal.style.display = "none";      
+    }; */
+  }
+
+  _clickHandler() {
+    this.removeEventListener('click', PdHoverBox._clickHandler);
+    const modal = this.shadowRoot.getElementById('extendedViewId');    
+    modal.style.visibility = 'hidden';
+    modal.style.opacity = '0';    
+  }
+
+}

package/stories/range.stories.js

@@ -46,7 +46,18 @@ function Template() {
         <pd-range id="range5060Id"
               class="quarter4"
               label="50er/60er" 
-              helperTxt="Hier steht ein Hilfstext"
+              helperTxt="Hier steht ein Hilfstext."
+              required
+              max="4"
+              value="0"
+              .optionValueMapper="${OPTIONS_GENRE}">
+        </pd-range>
+      </pd-form-row>
+      <pd-form-row>
+        <pd-range id="range5060Id"
+              class="quarter4"
+              label="50er/60er" 
+              helperTxt="Hier steht ein Hilfstext, oder aber auch ein etwas längeres Element. Mit mehr als nur etwas Text. Man weiß es nicht genaut"
               required
               max="4"
               value="0"