@progressive-development/pd-forms 0.1.35 → 0.1.37

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.37",
   "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="normal-view" icon="helpIcon" activeIcon></pd-icon>                    
+                    <p slot="info-view">${this.helperTxt}</p>
+                </pd-hover-box>
+                
+                ` : ""}
           </div>
         `;
     }
 
- }
+ } 

package/src/PdHoverBox.js

@@ -0,0 +1,130 @@
+/* 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},
+      _toBottom: { type: Boolean},
+    };
+  }
+
+  static get styles() {
+    return [    
+    PdBaseUI.styles,  
+    css`
+
+      :host {        
+        
+      }
+
+      .hover-box {
+        position: relative;
+      }
+
+      .info-view {
+        position: absolute;                
+        z-index: 100;        
+        background-color: var(--pd-hover-box-bg-col, var(--pd-default-dark-col));
+                
+        border: 1px solid var(--pd-hover-box-border-col, var(--pd-default-col));
+        
+        text-align: center;
+        padding: 10px;
+        width: 240px;                        
+
+        color: var(--pd-hover-box-font-col, white);
+        font-size: var(--pd-hover-box-font-size, 0.8em);  
+
+        transition: opacity 0.2s ease-in;
+      }
+
+      .visible {
+        visibility: visible;
+        opacity: 1;
+      }
+
+      .hidden {
+        visibility: hidden;
+        opacity: 0;
+      }
+
+      .to-bottom {
+        right: -3px;
+        top: -3px;
+      }
+
+      .to-top {
+        right: -3px;
+        bottom: -3px;
+      }
+
+      @media (max-width: 640px) {
+        .info-view-visible {        
+          width: 190px;          
+        }
+      }
+
+    `];
+  }      
+
+  render() {    
+
+    return html`  
+      <div class="hover-box">
+        
+          <div @click="${this._activateInfo}">
+            <slot name="normal-view"></slot>
+          </div>
+
+          <div id="infoViewId" @click="${this._closeInfo}" class="info-view ${this._visible ? "visible" : "hidden"} ${this._toBottom ? "to-bottom" : "to-top"}">
+            <slot name="info-view"></slot>
+          </div>
+
+      </div>
+    `;
+  }
+
+  // eslint-disable-next-line class-methods-use-this
+  _activateInfo(e) {    
+
+    const modal = this.shadowRoot.getElementById('infoViewId');    
+    const rect = modal.getBoundingClientRect();
+    
+    this._toBottom = !((modal.offsetHeight + rect.top + 50) > window.innerHeight);    
+    this._visible = true;    
+
+    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";      
+    }; */
+  }
+
+  _closeInfo() {
+    this._visible = false;
+  }
+
+}

package/stories/range.stories.js

@@ -46,7 +46,40 @@ function Template() {
         <pd-range id="range5060Id"
               class="quarter4"
               label="50er/60er" 
-              helperTxt="Hier steht ein Hilfstext"
+              helperTxt="Absolut kurz."
+              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, mit etwas Text."
+              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 genau."
+              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 genau. Aber jetzt mal etwas länger. Man weiß ja nie was hier so alles geschrieben wird."
               required
               max="4"
               value="0"