@progressive-development/pd-forms 0.1.14 → 0.1.16

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.14",
+  "version": "0.1.16",
   "main": "index.js",
   "module": "index.js",
   "scripts": {

package/src/PdBaseUiInput.js

@@ -205,7 +205,7 @@ import { SharedInputStyles } from './shared-input-styles.js';
 
     _renderLabel(forParam, additionalValue) {
         return html`
-            <label for="${forParam}">${this.label}${this.required && this.label ? this.defaultRequiredChar : ''}${additionalValue ? ` - ${additionalValue}` : ''}</label>
+            <label for="${forParam}">${this.label}${this.required && this.label ? this.defaultRequiredChar : ''}${additionalValue ? html` - <b>${additionalValue}</b>` : ''}</label>
         `;
     }
 

package/src/PdFormContainer.js

@@ -12,6 +12,8 @@
 import { html, css } from 'lit';
 import { msg } from '@lit/localize';
 
+import { INPUT_TYPE_RANGE } from './PdBaseUiInput.js';
+
 import { PdBaseUI } from './PdBaseUi.js';
 
 /**
@@ -101,8 +103,8 @@ export class PdFormContainer extends PdBaseUI {
     // validate required fields TODO: Auf PdInputxxx beschränken
     reqEl.forEach(el => {
       const tmpEl = el;
-
-      if (!el.value || el.value === "" || el.value === "false") {
+      if (!el.value || el.value === "" || el.value === "false" || 
+          (el._inputType === INPUT_TYPE_RANGE && el.value === '0')) {
         const erMsg = el.requiredMsg || msg('Eingabe erforderlich',{desc: '#pd.form.field.required#'});
         if (!e.detail.singleElement || e.detail.singleElement === el) {
           tmpEl.errorMsg = erMsg;

package/src/PdRange.js

@@ -15,13 +15,15 @@ export class PdRange extends PdBaseUIInput {
           min: { type: String },
           max: { type: String },
           step: { type: Number},
+          optionValueMapper: { type: Object },
         };
     }
 
     constructor() {
       super();
       this._inputType = INPUT_TYPE_RANGE;
-      this.step = 0.1;
+      this.step = 1;
+      this.optionValueMapper = {};
     }
 
     static get styles() {
@@ -30,9 +32,10 @@ export class PdRange extends PdBaseUIInput {
         css`      
 
          /* Link: 
-          * css styling:     - https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/ 
-          * no-empty-default - https://stackoverflow.com/questions/40302515/is-there-a-way-to-set-default-value-of-range-input-to-be-empty
-          * => Könnte ich vlt. mit dummy element lösen => Kein Wert => Dummy wird angezeigt => Bei Klick wird Wert gesetzt und PdRange angezeigt.
+          * css styling:        - https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/ 
+          * no-empty-default    - https://stackoverflow.com/questions/40302515/is-there-a-way-to-set-default-value-of-range-input-to-be-empty
+          * => Könnte ich vlt. mit dummy element lösen => Kein Wert => Dummy wird angezeigt => Bei Klick wird Wert gesetzt und PdRange angezeigt. Oder doch Vorschlag aus StackOverflow => -1 als default Wert => Kein gesetzer Wert
+          * Style Ticks/Lables: - https://stackoverflow.com/questions/26612700/ticks-for-type-range-html-input
           */
 
           /****************************************************
@@ -48,6 +51,8 @@ export class PdRange extends PdBaseUIInput {
             padding: 0.5rem;
             height: var(--pd-input-field-height, 2.2rem);
             box-sizing: border-box;
+
+            border-radius: 0.75rem;
           }
 
           input[type=range]:focus {
@@ -127,9 +132,10 @@ export class PdRange extends PdBaseUIInput {
             height: 8.4px;
             cursor: pointer;
             box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
-            background: var(--pd-range-track-col, var(--pd-default-light-col));
-            border-radius: 1.3px;
+            background: var(--pd-range-track-col, var(--pd-default-light-col));            
             border: 0.2px solid #010101;
+
+            border-radius: 0.75rem;
           }
 
           input[type=range]:focus::-webkit-slider-runnable-track {
@@ -146,7 +152,7 @@ export class PdRange extends PdBaseUIInput {
             cursor: pointer;
             box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
             background: var(--pd-range-track-col, var(--pd-default-light-col));
-            border-radius: 1.3px;
+            border-radius: 0.75rem;
             border: 0.2px solid #010101;
           }
 
@@ -169,8 +175,8 @@ export class PdRange extends PdBaseUIInput {
           }
           input[type=range]::-ms-fill-lower {
             background: var(--pd-range-track-col, var(--pd-default-light-col));
-            border: 0.2px solid #010101;
-            border-radius: 2.6px;
+            border: 0.2px solid #010101;            
+            border-radius: 0.75rem;
             box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
           }
           input[type=range]:focus::-ms-fill-lower {
@@ -179,7 +185,7 @@ export class PdRange extends PdBaseUIInput {
           input[type=range]::-ms-fill-upper {
             background: var(--pd-range-track-col, var(--pd-default-light-col));
             border: 0.2px solid #010101;
-            border-radius: 2.6px;
+            border-radius: 0.75rem;
             box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
           }
           input[type=range]:focus::-ms-fill-upper {
@@ -193,16 +199,19 @@ export class PdRange extends PdBaseUIInput {
       const inputId = `${this.id}Range`;
       // TODO: step kann hier nicht übergeben werden, wird dann initial nicht immer richtig angezeigt (bei komma rundungen)???
       return html`
-        ${this._renderLabel(inputId, this.value)}
-        <div class="input ${classMap({ error: this.errorMsg.length > 0 })}">
+        ${this._renderLabel(inputId, this.optionValueMapper[this.value] || this.value)}
+        <div class="input-range ${classMap({ error: this.errorMsg.length > 0 })}">
           <input 
             id="${inputId}"
-            ?disabled=${this.disabled} 
-            type="range" 
             name="${this.name || this.valueName}"
-            @change="${this._onChange}"             
-            min="${this.min}" max="${this.max}" step="${this.step}"
-            .value="${this.value}" 
+            class="input-range-style ${this.gradient ? 'gradient' : ''}"
+            type="range"
+            .value="${this.value}"
+            ?readonly="${this.readonly}"
+            ?disabled="${this.disabled}"
+            min="0" max="${this.max}" step="1"
+            @change="${this._onChange}"
+            @input="${this._onChange}"
           />
         </div>
         ${this._renderErrorMsg()}
@@ -214,15 +223,8 @@ export class PdRange extends PdBaseUIInput {
       this._input = this.shadowRoot.querySelector('input');
     }
 
-    _onChange() {
-      this.value = this._input.value;
-      this.dispatchEvent(new CustomEvent('changed', {
-        detail: { 
-          value: this._input.value
-        },
-        composed: true,
-        bubbles: true
-      }));
+    _onChange(e) {
+      this._handleChangedValue(this._input.value, e, false);
     }
 
 }

package/stories/form-container.stories.js

@@ -2,6 +2,7 @@ import { html } from 'lit';
 import '../pd-form-container.js';
 import '../pd-form-row.js';
 import '../pd-input.js';
+import '../pd-range.js';
 
 export default {
   title: 'PdForms/Form Container',
@@ -9,6 +10,14 @@ export default {
   argTypes: {},
 };
 
+const OPTIONS_GENRE = {
+  0: "Keine Auswahl",
+  1: "No-Go",
+  2: "Wenig",
+  3: "Mittel",
+  4: "Viel",
+};
+
 function Template() {
   return html`
     <h3>Mit Forms</h3>
@@ -55,7 +64,14 @@ function Template() {
         <pd-input-area class="quarter2-area" id="test17Id" label="Label Area" required></pd-input-area>
         <pd-input-area class="quarter2-area" id="test18Id" label="Label Area" required
           requiredMsg="Das ist eine richtig lange Fehlermeldung. Diese kann per Parameter für spezielle Felder wie die AGB Checkbox gesetzt werden."></pd-input-area>
-      </pd-form-row>      
+      </pd-form-row>
+      <pd-form-row>
+        <pd-range id="testRangeId"
+          label="Range Label" 
+          max="12"
+          value="0" .optionValueMapper="${OPTIONS_GENRE}" required>
+        </pd-range>
+      </pd-form-row>
     </pd-form-container>
 
     <h2>Test Validation</h2>

package/stories/range.stories.js

@@ -1,5 +1,7 @@
 import { html } from 'lit';
 import '../pd-range.js';
+import '../pd-form-container.js';
+import '../pd-form-row.js';
 
 export default {
   title: 'PdForms/Range',
@@ -17,15 +19,41 @@ export default {
   },
 };
 
+const OPTIONS_GENRE = {
+  0: "Keine Auswahl",
+  1: "No-Go",
+  2: "Wenig",
+  3: "Mittel",
+  4: "Viel",
+};
+
+
 function Template() {
   return html`
     <h3>Default Input Range</h3>  
-    <pd-range id="testRangeId"
-      label="Range Label" 
-      min="1" max="12" step="1"
-      defaultValue="6"
-      showLegend>
-    </pd-range>
+    <pd-form-container id="testFormContainerId" requiredFieldInfo>
+      <pd-form-row>
+        <pd-range id="range5060Id"
+              class="quarter4"
+              label="50er/60er" 
+              required
+              max="4"
+              value="0"
+              .optionValueMapper="${OPTIONS_GENRE}">
+        </pd-range>
+      </pd-form-row>
+    </pd-form-container>
+
+    <h2>Test Validation</h2>
+      <button
+      @click="${() => {
+        document.getElementById('testFormContainerId').dispatchEvent(
+          new CustomEvent("validate-form", {detail: {errorMap: new Map()}})
+        );
+      }}"
+      >
+        Test Validate
+      </button>
   `;
 }