@progressive-development/pd-forms 0.1.27 → 0.1.29

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

package/src/PdFormContainer.js

@@ -88,7 +88,7 @@ export class PdFormContainer extends PdBaseUI {
     return html`  
       <form>
         <slot></slot>
-        ${this.requiredFieldInfo ? html`
+        ${this.requiredFieldInfo || this.commonError ? html`
         <div class="validation-info-container">
           <p class="validation-info ${(this._requiredFieldsValid && (!this.commonError || this.commonError === "")) ? 'filled' : 'unfilled'}">
             ${this.commonError || (this._requiredFieldsValid ? msg('* Pflichtfelder ausgefüllt',{desc: '#pd.form.required.valid#'}) 

package/src/PdRange.js

@@ -29,24 +29,24 @@ export class PdRange extends PdBaseUIInput {
     static get styles() {
       return [
         PdBaseUIInput.styles,
-        css`      
+        css`
 
-         /* Link: 
-          * css styling:        - https://css-tricks.com/styling-cross-browser-compatible-range-inputs-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. 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
           */
 
           /****************************************************
-           * Style for SLIDER                                 *           
+           * Style for SLIDER                                 *
            ****************************************************/
 
           :host([disabled]) {
             --pd-range-bg-col: grey;
-            --pd-range-thumb-col: lightgrey;            
+            --pd-range-thumb-col: lightgrey;
           }
-          
+
           input[type=range] {
             -webkit-appearance: none; /* Hides the slider so that custom slider can be made */
             width: var(--pd-input-field-width, 250px); /* Specific width is required for Firefox. */
@@ -61,9 +61,9 @@ export class PdRange extends PdBaseUIInput {
           }
 
           input[type=range]:focus {
-            /* Removes the blue border. 
+            /* Removes the blue border.
              * You should probably do some kind of focus styling for accessibility reasons though. */
-            outline: none; 
+            outline: none;
           }
 
           /****************************************************
@@ -71,7 +71,7 @@ export class PdRange extends PdBaseUIInput {
            * Check: Possible to extract common definitions?   *
            * =>  Note that while we’re repeating code here,   *
            *     that’s necessary as you can’t comma-separate *
-           *     these type of selectors. Browsers will drop  * 
+           *     these type of selectors. Browsers will drop  *
            *     the entire selector if it doesn’t understand *
            *     a part of it.                                *
            ****************************************************/
@@ -81,7 +81,7 @@ export class PdRange extends PdBaseUIInput {
            */
           input[type=range]::-webkit-slider-thumb {
             /* Hide the standard thumb element */
-            -webkit-appearance: none;                                                
+            -webkit-appearance: none;
             /*margin-top: -14px; /* You need to specify a margin in Chrome, but in Firefox and IE it is automatic */
             margin-top: -6px; /* squi.cards value */
 
@@ -137,7 +137,7 @@ 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));            
+            background: var(--pd-range-track-col, var(--pd-default-light-col));
             border: 0.2px solid #010101;
 
             border-radius: 0.75rem;
@@ -172,7 +172,7 @@ export class PdRange extends PdBaseUIInput {
             cursor: pointer;
 
             /* Hides the slider so custom styles can be added */
-            background: transparent; 
+            background: transparent;
             border-color: transparent;
             color: transparent;
 
@@ -180,7 +180,7 @@ 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: 0.2px solid #010101;
             border-radius: 0.75rem;
             box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
           }
@@ -196,6 +196,33 @@ export class PdRange extends PdBaseUIInput {
           input[type=range]:focus::-ms-fill-upper {
             background: #367ebd;
           }
+
+           /*
+           Der Style für ticks ist noch temporär, Bereinigung unf Anpassung.
+           TODO: Fest derzeit 5 Elemente
+           */
+          .ticks {
+            display: flex;
+            justify-content: space-between;
+            padding: 10px 30px;
+          }
+
+          .tick {
+            line-height: 5px;
+            height: 5px;
+            margin-top: -13px;
+            font-size: 8pt;
+            font-weight: bolder;
+          }
+
+          .tick disabled {
+            color: grey;
+          }
+
+          .tick enabled {
+            color: var(--pd-default-col);
+          }
+
           `
         ];
     }
@@ -206,7 +233,7 @@ export class PdRange extends PdBaseUIInput {
       return html`
         ${this._renderLabel(inputId, this.optionValueMapper[this.value] || this.value)}
         <div class="input-range ${classMap({ error: this.errorMsg.length > 0 })}">
-          <input 
+          <input
             id="${inputId}"
             name="${this.name || this.valueName}"
             class="input-range-style ${this.gradient ? 'gradient' : ''}"
@@ -217,7 +244,15 @@ export class PdRange extends PdBaseUIInput {
             min="${this.min}" max="${this.max}" step="1"
             @change="${this._onChange}"
             @input="${this._onChange}"
-          />
+          >
+          <div class="ticks ${this.disabled ? "disabled" : "enabled"}">
+            <span class="tick">|</span>
+            <span class="tick">|</span>
+            <span class="tick">|</span>
+            <span class="tick">|</span>
+            <span class="tick">|</span>
+          </div>
+
         </div>
         ${this._renderErrorMsg()}
         `;
@@ -232,4 +267,4 @@ export class PdRange extends PdBaseUIInput {
       this._handleChangedValue(this._input.value, e, false);
     }
 
-}
+}