@progressive-development/pd-forms 0.0.60 → 0.1.1

package/src/PdCheckbox.js

@@ -1,291 +1,268 @@
+/* eslint-disable lit-a11y/click-events-have-key-events */
 /**
  * @license
  * Copyright (c) 2021 PD Progressive Development UG. All rights reserved.
  */
-
-
-// Änderungen an den Klassen aus node_modules übernommen, nicht deployed und verwendet => offen
-
 import { html, css } from "lit";
 import { classMap } from 'lit/directives/class-map.js';
 
-// import {GestureEventListeners} from '@polymer/polymer/lib/mixins/gesture-event-listeners.js';
-
 import '@progressive-development/pd-icon';
-import { PdBaseUIInput, INPUT_TYPE_CHECK } from "./PdBaseUiInput.js";
 
+import { PdBaseUIInput, INPUT_TYPE_CHECK } from "./PdBaseUiInput.js";
 
-// import { installMediaQueryWatcher } from 'pwa-helpers/media-query.js';
 
+/**
+ * Lit Checkbox Element.
+ * Could displayed as switch (set isSwitch to true) or checkbox implementation.
+ * 
+ * Styling is wrapped inside the checkbox element, which uses the styling properties from 
+ * pd-icon (detailed).
+ * 
+### Custom Properties: #######################################
+# Style for checked checkbox:       Default values           #
+############################################################## 
+ * --pd-cb-col                      unset, pd-icon default
+ * --pd-cb-col-hover                unset, pd-icon default
+ * --pd-cb-bg-col                   unset, pd-icon default
+ * --pd-cb-stroke-col               unset, pd-icon default
+ * --pd-cb-stroke-col-hover         unset, pd-icon default
+ * 
+ * Style for unchecked checkbox:  
+ * --pd-cb-unset-col                unset, pd-icon default
+ * --pd-cb-unset-col-hover          unset, pd-icon default
+ * --pd-cb-unset-bg-col             unset, pd-icon default
+ * --pd-cb-unset-stroke-col         unset, pd-icon default
+ * --pd-cb-unset-stroke-col-hover   unset, pd-icon default
+ * 
+ * --pd-cb-border-col               --pd-default-col
+ * --pd-cb-border-radius            4px (not border for rounded elements, cb specific)
+ * --pd-cb-font-col                 --pd-default-font-input-col
+ * --pd-default-font-input-family
+ * --pd-default-font-input-size
+ * --pd-cb-txt-col-readonly         #4d4d4d
+ * --pd-cb-switch-height            not set
+ * --pd-cb-switch-paddle-col        --pd-default-col
+ * 
+ */
 export class PdCheckbox extends PdBaseUIInput {
+  
   static get properties() {
-    return {      
-      hasInner: { type: Boolean },
-      // _panX: {type: Number},
-      // _panEnd: {type: Boolean},
-      isSwitch: { type: Boolean }
+    return {            
+      isSwitch: { type: Boolean },
+      _hasInner: { type: Boolean, state: true },
     };
   }
 
   constructor() {
     super();
     this._inputType = INPUT_TYPE_CHECK;    
-    // this._panEnd = false;
-    // this._panX = 0;
   }
 
   static get styles() {
     return [
-      // SharedInputStyles,
+      PdBaseUIInput.styles,
       css`
-      :host {        
-
-        /*
-        --my-icon-fill: var(--pd-app-light-background, #fefefe); 
-        --my-icon-active-fill: var(--pd-app-primary-color, #067394); 
-        --my-icon-inactive-fill: var(--pd-app-primary-color, darkgrey); 
-        
-        --my-icon-bg-active-color: var(--app-primary-color, #fefefe); 
-
-        --my-bg-color: var(--squi-bg-color, #177E89);
-        --my-txt-color: var(--squi-bg-color, black);
+      :host {
+        display: inline-block;        
 
-        --my-font: var(--squi-font-2, Montserrat);
+        /* Style for active checkbox => use defaults from pd-icon if no custom properties set */
+        --pd-icon-col-active: var(--pd-cb-col);
+        --pd-icon-col-active-hover: var(--pd-cb-col-hover);
+        --pd-icon-bg-col-active: var(--pd-cb-bg-col);
+        --pd-icon-stroke-col-active: var(--pd-cb-stroke-col);
+        --pd-icon-stroke-col-active-hover: var(--pd-cb-stroke-col-hover);                        
 
-         ref copy from shared styles...*
-        --my-error-color: var(--squi-error-color, #d6242d);        
-        --my-error-background-color: var(--squi-error-background-color, #f6d4d4a1);   
-        --my-border-radius: var(--squi-border-radius, 0rem);
-
-
-
-        * TODO vars used in pd-icon *
-        --squi-checkbox-checked-color: var(--my-primary);
-        --squi-checkbox-unchecked-color: var(--my-ligth);
-        --squi-checkbox-bg: var(--my-dark);
-        --squi-checkbox-unchecked-bg: var(--my-dark);
-        --squi-checkbox-label-color: var(--my-primary);
-
-        --squi-checkbox-label-disabled-color:  var(--app-copy-color, #303030);
-
-        * Checkbox pd-icon 
-        --pd-icon-fill: red;
-        --pd-icon-bg: red;
-        --pd-icon-fill-active: var(--my-icon-bg-active-color);
-        --pd-icon-bg-active: var(--my-icon-active-fill);
-        */
-
-        --pd-icon-fill-active: var(--pd-app-primary-col, #067394);
-        --pd-icon-fill: var(--pd-checkbox-inactive-col, darkgrey);        
-        --pd-icon-bg: var(--pd-checkbox-bg-col, #fefefe);
-
-        display: inline-block;
-        font-size: .8rem;
+        /* Style for inactive checkbox */
+        --pd-icon-col: var(--pd-cb-unset-col);
+        --pd-icon-col-hover: var(--pd-cb-unset-col-hover);
+        --pd-icon-bg-col: var(--pd-cb-unset-bg-col);
+        --pd-icon-stroke-col: var(--pd-cb-unset-stroke-col);
+        --pd-icon-stroke-col-hover: var(--pd-cb-unset-stroke-col-hover);
       }
-      /* Switch pd-icon */
-      :host([isSwitch]) {
-          --pd-icon-fill-active: var(--my-icon-active-fill);  
-          --pd-icon-fill: var(--my-icon-fill);
-          --pd-icon-bg: var(--my-icon-bg-color);          
-          --pd-icon-bg-active: var(--my-icon-bg-active-color);
+
+      /* Switch pd-icon => Prüfen, bei mir musste ich reflect setzten, wird das verwendet? */
+      :host([isSwitch]) {          
+        /* derzeit keine Angaben */
       }
-      div {
+
+      .div-container {
         display: flex;
         align-items: center;
         cursor: pointer;
       }
-      div.disabled {
+
+      .div-container.disabled {
         opacity: 0.5;
         cursor: auto;
       }
-      div.readonly {
+
+      .div-container.readonly {
         cursor: auto;
       }
+
+      /* 
+       * Class checkbox for icon and a element (checkbox case)       
+       */
       .checkbox {
         display: flex;
         border-radius: 4px;
         line-height: 0;
         align-items: center;
         justify-content: center;
-      }
+        /* 
+        Wurde das hier für Border verwendet? Aktuell border in folgendem Element gesetzt
+        background-color: var(--pd-cb-border-col, var(--pd-primary-col, #067394)); 
+        */ 
+
+      }    
+
       .checkbox pd-icon {
-        margin: .25rem;
+        margin-right: .2rem;
+        margin-bottom: .2rem;
+        border: 2px solid var(--pd-cb-border-col, var(--pd-default-col));;
+        border-radius: var(--pd-cb-border-radius, 3px);
       }
+
       .label {
-        margin-left: .5rem;        
-        color: var(--squi-text-lable-color); 
-        font-family: var(--pd-input-lable-font);
+        margin-left: 0.1rem;
+        color: var(--pd-cb-font-col, var(--pd-default-font-input-col)); 
+        font-family: var(--pd-default-font-input-family);
         text-align: left;
-        font-size: 0.9rem;
-      }
-      .disabled .label {
-        color: var(--squi-checkbox-label-disabled-color, #6e6c6c);
+        font-size: var(--pd-default-font-input-size);
       }
+
       .readonly .label {
-        color: var(--app-copy-color, var(--squi-checkbox-label-color, #303030));
+        color: var(--pd-cb-font-col-readonly, #4d4d4d);
+      }
+
+      .readonly .checkbox pd-icon {
+        border-color: var(--pd-cb-border-col-readonly, transparent);
       }
+
       /* Switch styles */
       .switch {
-        height: var(--my-input-height); /* noch ohne effekt?*/
+        height: var(--pd-cb-switch-height);
         position: relative;
         outline: 0;
         -webkit-user-select: none;
         -moz-user-select: none;
         -ms-user-select: none;
         user-select: none;
-    }
-    .switch-paddle {
-      display: inline-block;
-      vertical-align: baseline;
-      margin: 0;
-      position: relative;
-      min-width: 4rem;
-      max-width: 4rem;
-      height: 2rem;
-      border-radius: 0;
-      background: var(--my-bg-color);
-      font-weight: inherit;
-      color: inherit;
-      cursor: pointer;
-  }
-  .disabled .switch-paddle {
-    cursor: auto;
-  }
-  .readonly .switch-paddle {
-    cursor: auto;
-    max-width: 2rem;
-    min-width: 2rem;
-    background: none;
-
-    /* Prüfen TODO
-    --pd-icon-bg: transparent;
-    --pd-icon-fill: var(--card-dark-red);
-    --pd-icon-fill-hover: var(--pd-icon-fill);
-    --pd-icon-fill-active: var(--card-medium-green);
-    */
-  }
-  .readonly .isChecked.switch-paddle pd-icon {
-    transform: translate3d(0, 0, 0);
-    left: 0.25rem;
-  }
-  .switch-paddle pd-icon {
-      position: absolute;
-      top: 0.25rem;
-      left: 0.25rem;
-      display: block;
-      width: 1.5rem;
-      height: 1.5rem;
-      -webkit-transform: translate3d(0, 0, 0);
-      transform: translate3d(0, 0, 0);
-      border-radius: 3px;
-      -webkit-transition: all 0.25s ease-out;
-      transition: all 0.25s ease-out;
-      content: '';
-  }
-  .isChecked.switch-paddle pd-icon {
-      left: 2.25rem;
-  }
+      }
 
-  /* Copy from SharedINputStyles, not used for select => ref, or exclude error styles and reuse oder something... */
-  .error-box {
-    display: block;
-    color: var(--my-error-color);
-    background: var(--my-error-background-color);
-    border: 1px solid var(--my-error-color);
-    border-radius: var(--my-border-radius);
-  }
+      .switch .label {
+        margin-left: 0.5rem;
+      }
 
-  /* Error Msg Div for input, select, area */
-  .error-msg {          
-    padding:0.25rem;        
-    white-space: nowrap;      
-    font-size: .8rem;      
-    max-width: var(--squi-input-width, 250px);        
-  }
+      .switch-paddle {
+        display: inline-block;
+        vertical-align: baseline;
+        margin: 0;
+        position: relative;
+        min-width: 4rem;
+        max-width: 4rem;
+        height: 2rem;
+        border-radius: 0;
+        background: var(--pd-cb-switch-paddle-col, var(--pd-default-col));
+        font-weight: inherit;
+        color: inherit;
+        cursor: pointer;
+      }
+
+      .switch-paddle pd-icon {
+        position: absolute;
+        top: 0;
+        left: 0;
+        display: block;
+        width: 1.5rem;
+        height: 1.5rem;
+        -webkit-transform: translate3d(0, 0, 0);
+        transform: translate3d(0, 0, 0);
+        border: 2px solid var(--pd-cb-border-col, var(--pd-default-col));
+        box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
+        border-radius: var(--pd-cb-border-radius, 4px);        
+        -webkit-transition: all 0.25s ease-out;
+        transition: all 0.25s ease-out;
+        content: '';
+      }      
+
+      .disabled .switch-paddle {
+        cursor: auto;
+      }
+
+      .readonly .switch-paddle {
+        cursor: auto;
+        max-width: 2rem;
+        min-width: 2rem;
+        background: none;
+
+        /* Prüfen TODO
+        --pd-icon-bg: transparent;
+        --pd-icon-fill: var(--card-dark-red);
+        --pd-icon-fill-hover: var(--pd-icon-fill);
+        --pd-icon-fill-active: var(--card-medium-green);
+        */
+      }
+
+      .readonly .switch-paddle pd-icon {        
+        border-color: var(--pd-cb-border-col-readonly, transparent);
+      }
+
+      .readonly .isChecked.switch-paddle pd-icon {
+        transform: translate3d(0, 0, 0);
+        left: 0rem;
+      }
+  
+      .isChecked.switch-paddle pd-icon {
+          left: 2.25rem;
+      }
     
-  @media (min-width: 580px) {
-    :host {
-      font-size: 1rem;
-    }
-  }
+      @media (min-width: 580px) {
+        :host {
+          font-size: 1rem;
+        }
+      }
     `];
   }
 
-  firstUpdated() {
-    this.hasInner = !!this.innerHTML.trim().length;
-    // installMediaQueryWatcher(`(min-width: 780px)`, (matches) => matches ? this : this._updateScale(1.5));
-    // const paddle = el.shadowRoot.querySelectorAll('.switch-paddle');
-    // this.isSwitch ? Gestures.addListener(this, 'track', this.handleTrack.bind(this)) : '';
-  }
-
   render() {
-    const checked = (this.value === 'true');
+
+    // set inner for the first time (avoid upddate cycle in firstupdated (in real avoid log here...))
+    if (!this._hasInnerSet) {
+      this._hasInnerSet = true;
+      this._hasInner = !!this.innerHTML.trim().length;
+    }
     
-    // eslint-disable-next-line lit-a11y/click-events-have-key-events
-    return html`<div @click="${this.onClick}" class="${classMap({'disabled': this.disabled, 'switch': this.isSwitch, 'readonly': this.readonly})}">
-        <a href="#" @click="${this.linkClick}" @keypress="${this.onKeyPress}"
-           class="${classMap({'switch-paddle': this.isSwitch, 'checkbox': !this.isSwitch, 'isChecked': checked, 'isUnchecked': !checked})}">
-           <pd-icon icon="checkBox" class="${classMap({'switch': this.isSwitch, 'checkBox': !this.isSwitch})}" ?activeIcon="${checked}"></pd-icon>           
+    const checked = (this.value === 'true');
+    const classMapVal = {'disabled': this.disabled, 'switch': this.isSwitch, 'readonly': this.readonly, 'div-container': true};
+    const aClassMap = {'switch-paddle': this.isSwitch, 'checkbox': !this.isSwitch, 'isChecked': checked, 'isUnchecked': !checked};    
+
+    return html`
+      <div @click="${this.onClick}" class="${classMap(classMapVal)}">
+        <a href="#" @click="${this.linkClick}" @keypress="${this.onKeyPress}" class="${classMap(aClassMap)}">
+          <pd-icon icon="checkBox" class="small" ?activeIcon="${checked}"></pd-icon>
         </a>
-        ${this.hasInner
-          ? html`<span class="label">
-              <slot></slot>
-            </span>`
-          : ""}        
+        ${this._hasInner ? html`
+          <span class="label">
+            <slot></slot>
+          </span>` : ""}
       </div>
-      ${this.errorMsg.length > 0 ? html`
-        <div class="error-box error">
-          <span class="error-msg">${this.errorMsg}</span>
-        </div>
-      ` : ''}
+      ${this._renderErrorMsg()}
     `;
   }
 
-  /*
-  update(changedProperties) {
-    //let { deltaX = 0, isFinal = false } = this._panX;
-    let isFinal = this._panEnd;
-    let deltaX = this._panX || 0;
-    //console.log(this._panData);
-
-    // Guard against an infinite loop by looking for index.
-    if (isFinal) {
-        console.log('deltaX', deltaX);
-        // TODO 250 half screen size?
-        if ( deltaX > 100) {
-          this.onClick(true);
-        } else if(deltaX < -100){
-          this.onClick(false);
-        }
-        this._panEnd = false;
-    }
-    // We don't want the latent deltaX when releasing a pan.
-    deltaX = (isFinal ? 0 : deltaX);
-
-    super.update(changedProperties);
-  }
-
-  handleTrack(e) {
-    switch(e.detail.state) {
-        case 'start':
-          //this.message = 'Tracking started!';
-          break;
-        case 'track':
-          //this.message = 'Tracking in progress... ' + e.detail.x + ', ' + e.detail.y;
-          break;
-        case 'end':
-          this._panX = e.detail.dx;
-          this._panEnd = true;
-          break;
-      }
-  }
-*/
-  onClick() {
+  onClick(e) {
     if (this.disabled || this.readonly) {
       return;
     }
-    const checked = (this.value === 'true');
-    this.value = checked ? 'false' : 'true';
+    const checked = (this.value === 'true');    
+    
+    // set changed value and generate events (key-pressed, enter-pressed, validateForm) 
+    // if neccessary
+    this._handleChangedValue(checked ? 'false' : 'true', e);
+
+    // TODO: Idee, alle input elemente haben gleichen event!
+    /*
     this.dispatchEvent(
       new CustomEvent("checkbox-changed", {
         bubbles: true,
@@ -293,12 +270,13 @@ export class PdCheckbox extends PdBaseUIInput {
         detail: {check: !checked, name: this.valueName},
       })
     );
+    */
   }
 
-  onKeyPress(e) {
+  onKeyPress(e) {    
     e.preventDefault();
     if (e.keyCode === 32 || e.code === "Space") {
-      this.onClick();
+      this.onClick(e);
     }
   }
   

package/src/PdFormContainer.js

@@ -1,6 +1,12 @@
 /**
  * @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';
@@ -17,42 +23,44 @@ import { PdBaseUI } from './PdBaseUi.js';
 export class PdFormContainer extends PdBaseUI {
 
   static get styles() {
-    return css`
-    :host {
-        display: flex;        
-        flex-direction: column;                                 
-        align-items: left;        
+    return [
+    PdBaseUI.styles,
+    css`
+      :host {
+        display: flex;
+        flex-direction: column;
+        align-items: left;
         gap: 20px;
       }
-      .hinweis {
-        font-family: var(--pd-font-content);
-        font-size:0.95rem;
-        
-        padding:10px;
+
+      .validation-info {
+        font-family: var(--pd-default-font-content-family);
+        font-size: var(--pd-form-info-font-size, 0.8rem);
+        padding: 10px;
         color:#58585a;
-        border-radius: var(--squi-border-radius, 0);
-        -moz-border-radius: var(--squi-border-radius, 0);
-        width:50%;
-        min-width:300px;
+        border-radius: var(--pd-border-radius, 0);
+        -moz-border-radius: var(--pd-border-radius, 0);
+        width:40%;
+        min-width:250px;
       }
 
-      .filled {
-        border-left:4px solid #42a01c;
-        border-right:4px solid #42a01c;
-        border-top:1px solid #42a01c;
-        border-bottom:1px solid #42a01c;
-        background-color:#f5ffe8;
+      .filled {                
+        border-left: 4px solid var(--pd-default-success-col);
+        border-right: 4px solid var(--pd-default-success-col);
+        border-top: 1px solid var(--pd-default-success-col);
+        border-bottom: 1px solid var(--pd-default-success-col);
+        background-color: var(--pd-default-success-light-col);
       }
 
-      .unfilled {
-        border-left:4px solid #cc2029;
-        border-right:4px solid #cc2029;
-        border-top:1px solid #cc2029;
-        border-bottom:1px solid #cc2029;
-        background-color:#ffe8e8;
+      .unfilled {                
+        border-left: 4px solid var(--pd-default-error-col);
+        border-right: 4px solid var(--pd-default-error-col);
+        border-top: 1px solid var(--pd-default-error-col);
+        border-bottom: 1px solid var(--pd-default-error-col);
+        background-color: var(--pd-default-error-light-col);
       }
 
-    `;
+    `];
   }
 
   static get properties() {
@@ -72,33 +80,32 @@ export class PdFormContainer extends PdBaseUI {
       <form>
         <slot></slot>
         ${this.requiredFieldInfo ? html` 
-        <p class="hinweis ${this._requiredFieldsValid ? 'filled' : 'unfilled'}">
+        <p class="validation-info ${this._requiredFieldsValid ? 'filled' : 'unfilled'}">
           ${msg('* Pflichtfeld',{desc: '#pd.form.required.info#'})}
         </p>` : ''}
         <br />
-      </form>    
+      </form>
     `;
   }
 
-  _validateForm(e) {
+  _validateForm(e) {    
     
     const reqEl = this.querySelectorAll("[required]");
 
     // validate required fields TODO: Auf PdInputxxx beschränken
     reqEl.forEach(el => {
       const tmpEl = el;
-      if (!el.value || el.value === "") {        
+
+      if (!el.value || el.value === "" || el.value === "false") {
         const erMsg = el.requiredMsg || msg('Eingabe erforderlich',{desc: '#pd.form.field.required#'});
         if (!e.detail.singleElement || e.detail.singleElement === el) {
           tmpEl.errorMsg = erMsg;
         }
         e.detail.errorMap.set(el.id, erMsg);
-      } else {
-        if (!e.detail.singleElement || e.detail.singleElement === el) {
+      } else if (!e.detail.singleElement || e.detail.singleElement === el) {
           tmpEl.errorMsg = "";
-        }
       }
-    })
+    });
 
     this._requiredFieldsValid = e.detail.errorMap.size === 0;