@progressive-development/pd-forms 0.0.60 → 0.0.61

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.0.60",
+  "version": "0.0.61",
   "main": "index.js",
   "module": "index.js",
   "scripts": {
@@ -21,7 +21,7 @@
   "dependencies": {
     "@lit-labs/motion": "^1.0.2",
     "@lit/localize": "^0.11.2",
-    "@progressive-development/pd-icon": "^0.0.9",
+    "@progressive-development/pd-icon": "^0.1.5",
     "lit": "^2.2.0"
   },
   "devDependencies": {

package/src/PdBaseInputElement.js

@@ -0,0 +1,95 @@
+/**
+ * @license
+ * Copyright (c) 2021 PD Progressive Development UG. All rights reserved.
+ *
+ * Abstract base lit class for pd-input elements.
+ *
+ * Used from:
+ * - pd-input
+ * - pd-input-area
+ * - pd-select
+ *
+ * Used to:
+ * - define element specific css
+ * - handle auto completion
+ *
+ * Events:
+ * - TODO
+ *
+ * Custom Properties (shared-input-field-styles):
+ * ... TODO
+ *
+ */
+import {
+  PdBaseUIInput,
+  INPUT_TYPE_AREA,
+  INPUT_TYPE_SELECT,
+  INPUT_TYPE_TEXT,
+} from './PdBaseUiInput.js';
+
+import { SharedInputFieldStyles } from './shared-input-field-styles.js';
+
+export class PdBaseInputElement extends PdBaseUIInput {
+
+  /**
+   * Fire when the `pd-input` loses focus.
+   * @event focus-lost
+   */
+
+  static get styles() {
+    return [PdBaseUIInput.styles, SharedInputFieldStyles];
+  }
+
+  static get properties() {
+    return {
+        placeHolder: { type: String },
+        /* not used at the moment */
+        name: { type: String },
+        autoCompleteName: { type: String },
+        _input: { type: Object, state: true }, // reference for input html element
+    };
+  }
+
+  constructor() {
+    super();    
+    this.placeHolder = '';
+    this.name = '';
+    this._input = {};
+  }
+
+  firstUpdated() {
+    // Save input reference for performance (bind html element to class property)
+    this._input = this.shadowRoot.querySelector(this._getElementName());
+  }
+
+  _onBlur() {
+    this.dispatchEvent(
+      new CustomEvent('focus-lost', {
+        detail: {
+          value: this._input.value,
+        },
+        composed: true,
+        bubbles: true,
+      })
+    );
+  }
+
+  _onKeyUp(event) {
+    // set changed value and generate events (key-pressed, enter-pressed, validateForm)
+    // if neccessary
+    this._handleChangedValue(this._input.value, event, true);
+  }
+
+  _getElementName() {
+    switch (this._inputType) {
+      case INPUT_TYPE_AREA:
+        return 'textarea';
+      case INPUT_TYPE_SELECT:
+        return 'select';
+      case INPUT_TYPE_TEXT:
+        return 'input';
+      default:
+        return '';
+    }
+  }
+}

package/src/PdBaseUi.js

@@ -1,16 +1,35 @@
 /**
  * @license
  * Copyright (c) 2021 PD Progressive Development UG. All rights reserved.
+ *  
+ * Abstract base lit class for all pd-form elements.
+ * Import shared-global-style to make common custom properties available to all components.
+ * 
+ * Used from:
+ * - pd-base-ui-input
+ * 
+ * Used to:
+ * - define css (import shared-global-styles.js)
+ * - define common properties (detailieren, aktuell keine)
+ * - define updateWhenLocaleChanges for all pd-elements (check, aktuell nur für pd-form-container benötigt)
+ * 
+ * Custom Properties (shared-global-styles):
+ * ... TODO
  */
-
+ 
 import { LitElement } from 'lit';
 import { updateWhenLocaleChanges } from '@lit/localize';
 
+import { SharedGlobalStyles } from './shared-global-styles.js';
+
 export class PdBaseUI extends LitElement {
 
-    constructor() {
-        super();
-        updateWhenLocaleChanges(this);        
+    static get styles() {
+        return [SharedGlobalStyles];
     }    
 
+  constructor() {
+    super();
+    updateWhenLocaleChanges(this);
+  }  
 }

package/src/PdBaseUiInput.js

@@ -1,18 +1,83 @@
 /**
  * @license
  * Copyright (c) 2021 PD Progressive Development UG. All rights reserved.
+ * 
+ * Abstract base lit class for pd-input elements.
+ * 
+ * Used from:
+ * - pd-checkbox
+ * - pd-input
+ * - pd-input-area
+ * - pd-radio-group
+ * - pd-range
+ * - pd-select
+ * 
+ * Used to:
+ * - define css (import additional shared-input-styles.js)
+ * - define common properties (detailieren, aktuell zu viele bzw. nicht für alle sub-elemente gültig)
+ * - handle error msg (getter/setter)
+ * - helpers for validation event after change and render label/error elements.
+ * 
+ * Events:
+ *  - validate-form => fired when input element changed its value.
+ *  - enter-pressed => fired when enter pressed.
+ *  - field-change => fired when input element changed its value.
+ * 
+ * Custom Properties (shared-input-styles):
+ * ... TODO 
+ * 
  */
-
+ import { html } from 'lit';
  import { PdBaseUI } from './PdBaseUi.js';
 
+import { SharedInputStyles } from './shared-input-styles.js';
+
+/**
+ * Available input types.
+ * Each input elemt set it's own type during constructor call.
+ * 
+ * Comment: Not really needed/used at the moment.
+ */
  export const INPUT_TYPE_TEXT = 1;
  export const INPUT_TYPE_SELECT = 2;
  export const INPUT_TYPE_CHECK = 3;
  export const INPUT_TYPE_RANGE = 4;
  export const INPUT_TYPE_AREA = 5;
+ export const INPUT_TYPE_CHECK_GROUP = 6;
  
+ /**
+  * Specific key codes for input events.
+  */
+ const KEY_RETURN = 13;
+
+ // timer is used to delay validation event on user typing
+ let delayTimer = 0;
+ const DELAY_WAIT_TIME_MS = 400;
+
  export class PdBaseUIInput extends PdBaseUI {
- 
+
+    /**
+     * Fired when an input element change its values.
+     * @event validate-form 
+     */
+
+    /**
+     * Fired when enter was pressend during focus on input element.
+     * @event enter-pressed
+     */
+
+    /**
+     * Fired when field-value changed.
+     * @event field-change
+     */
+
+    static get styles() {
+        return [
+          PdBaseUI.styles,
+          SharedInputStyles
+        ];
+      }
+
      static get properties() {
          return {            
              gradient: { type: Boolean },        // true for gradient background
@@ -26,8 +91,9 @@
              label: { type: String },            // label text for input
              value: {type: String},              // current value (set from outside) TODO: Typ (Object, Number, Txt, Bool...)
              _errorMsg: {type: String, state: true},           // errorMsg (could set fronm outside for busines validation, internal validation=> todo)
-             _inputType: {type: Number},         // number value for type (text, select, range....), set constructor of sub-class
-             _input: { type: Object }            // reference for input html element            
+             _inputType: {type: Number, state: true},         // number value for type (text, select, range....), set constructor of sub-class
+             // TODO: Nur für input, input-area, select im moment => weiter nach unten
+             _input: { type: Object, state: true }            // reference for input html element            
          };
      }
  
@@ -41,7 +107,6 @@
          this.value = '';
          this._errorMsg = '';        
          this._inputType = -1;
-         this._input = {};
          this.valueName = '';
  
          this.defaultRequiredChar = '*';
@@ -79,5 +144,71 @@
          console.info("Meine Werte nach Set: ", this._value,  this._input.value, newValue);
      }
      */
+
+    _generateValidateEvent () {
+        this.dispatchEvent(
+            new CustomEvent('validate-form', {
+                detail: {
+                singleElement: this,              
+                errorMap: new Map()
+                },
+                composed: true,
+                bubbles: true,
+            })
+        );
+    }
+
+    _handleChangedValue(newValue, event, checkReturn) {
+        const changed = this.value !== newValue;
+
+        this.value = newValue;
+        const keyCode = event.keyCode ? Number(event.keyCode) : -1;
+        const eventDetail = {
+            value: newValue,
+            name: this.valueName,
+            keyCode, changed
+        }
+        const handleReturn = checkReturn && keyCode === KEY_RETURN;        
+        if (handleReturn) {
+            this.dispatchEvent(
+                new CustomEvent('enter-pressed', {
+                    detail: eventDetail,
+                    composed: true,
+                    bubbles: true,
+                })
+            );
+            event.preventDefault();
+
+        } 
+
+        if (changed) {
+            // generate changed event
+            this.dispatchEvent(
+                new CustomEvent('field-change', {
+                    detail: eventDetail,
+                    composed: true,
+                    bubbles: true,
+                })
+            );
+            // generate validation event after delay
+            clearTimeout(delayTimer);
+            delayTimer = setTimeout(this._generateValidateEvent.bind(this),
+                DELAY_WAIT_TIME_MS);
+        }
+    }
+
+    _renderErrorMsg() {
+        return this.errorMsg && this.errorMsg.length > 0 ? html`
+        <div class="error-box error">
+          <p class="error-msg">${this.errorMsg}</p>
+        </div>
+      ` : '';
+    }
+
+    _renderLabel(forParam) {
+        return html`
+            <label for="${forParam}">${this.label}${this.required && this.label ? this.defaultRequiredChar : ''}</label>
+        `;
+    }
+
  }
- 

package/src/PdButton.js

@@ -1,115 +1,113 @@
+/* eslint-disable lit-a11y/anchor-is-valid */
 /**
  * @license
  * Copyright (c) 2021 PD Progressive Development UG. All rights reserved.
  */
 
-import { html, css , LitElement } from 'lit';
+import { html, css } from 'lit';
+import { PdBaseUI } from './PdBaseUi.js';
 
-import { SharedInputStyles } from './shared-input-styles.js';
+export class PdButton extends PdBaseUI {
 
-export class PdButton extends LitElement {
+  /**
+   * @event button-clicked
+   */
 
   static get styles() {
-    return [  
-      // Import Shared Styles for defined styles vars
-      SharedInputStyles,
-      css`      
-
+    return [
+      PdBaseUI.styles,
+      css`
       :host {
+        /*
         --my-primary-color: var(--squi-primary-color, #177E89);
         --my-button-background-color: var(--squi-button-background-color, #ffc857);
         --my-button-background-hover-color: var(--squi-button-background-color, #ffb724);        
         --my-button-text-color: var(--squi-button-text-color, #084c61);
         --my-button-font-family: var(--squi-primary-font-family, Oswald);
 
-        --my-button-width: var(--squi-input-width, 140px);
+        --my-button-width: var(--pd-input-field-width, 140px);
+        */
+
+        display: flex;      
+        justify-content: center;
+        
+        width: var(--pd-button-width, 140px);
+        height: var(--pd-button-height, 2rem);
+        
+        
+        border-radius: var(--pd-border-radius, 1px);
+
+        background-color: var(--pd-button-bg-col, var(--pd-default-third-color));
+        color: var(--pd-button-font-col, var(--pd-default-bg-color));
+
+        font-family: var(--pd-default-font-title-family);
+        font-size: var(--pd-button-font-size, var(--pd-default-font-content-size));
+        font-weight: var(--pd-button-font-weight, normal);        
+        
+        cursor: pointer;
+
+        box-shadow: -1px 1px 2px var(--pd-default-third-color);
+
+        margin: 0.5rem;
 
-        display: block;              
         /*        
         height: 100%;         
         width: 100%; => Ohne diese Angabe eht die % Angaben icht
         */                        
       }
-      
+
+      :host(:not([disabled]):hover) {
+        background-color: var(--pd-button-bg-col-hover, var(--pd-default-hover-color));
+      }
+
+      :host([primary]) {
+        background-color: var(--pd-button-primary-bg-col, var(--pd-default-color));
+        color: var(--pd-button-primary-font-col, var(--pd-default-bg-color));
+      }
+
+      :host([gradient]) {
+        background: linear-gradient(to right, var(--my-background-gradient-color, red) 0%, var(--my-background-color, blue) 100%);      
+      }      
+
+      :host([disabled]) {
+        cursor: auto;            
+        border-color: var(--pd-default-disabled-color);
+        background-color: var(--pd-button-bg-col-disabled, var(--pd-default-disabled-color));
+        color: var(--pd-button-font-col-disabled, var(--pd-default-third-color));
+      }
+
+      :host([disabled]:hover) {
+        box-shadow: -1px 1px 2px #1f2b2a;
+      }    
+
       /* Style for Button */
       a {
         display: inline-block;
         text-decoration: none;
-        font-family: var(--my-button-font-family);
-        font-size: var(--my-font-size);   
-        line-height: 2.3em;     
-        
-        text-align: center;
+        border: none;        
+        white-space: nowrap;
+        margin: 0.5rem;
+
         /*box-shadow:  -2px 2px 4px #999;/* TODO: From var */
         /*border-bottom: 1px solid var(--my-border-color);*/
-
-        background-color: var(--my-button-background-color);
-        border-radius: var(--my-border-radius);
-        border: none;
-        cursor: pointer;
         /*will-change: transform; Dann über Menu bei Scroll...*/
-        
-        color: var(--my-button-text-color); 
+
+        /*
         transition-property: box-shadow, background;
         transition: .2s ease-in;
         box-sizing: border-box;
-        white-space: nowrap;
+        */
         
         /*overflow: hidden;
         text-overflow: ellipsis;*/
-        margin: 1rem auto;
-
         
         /*padding: var(--squi-input-padding, .5rem);*/
-                
-        width: var(--my-button-width);        
-        height: var(--my-input-height);
-
       }
       
       a *{
-        pointer-events: none;
-        cursor: pointer;
+        pointer-events: none;        
       }      
-
-      a[disabled] {        
-        border-color: #5a5858;
-        color: var(--raw-game-color-light-lightest, #4b4848);        
-        background-color: #d3d2d2;
-        text-shadow: 2px 2px 3px var(--raw-game-color-dark-darker,  #999);
-      }
-
-      a:not([disabled]):hover {
-        box-shadow: -1px 1px 2px #1f2b2a;        
-        background: var(--my-button-background-hover-color);
-      }
-
-      a.primary:not([disabled]):hover {
-        /* tbd: at the momment the same definition as without primary style */
-        box-shadow: -1px 1px 2px #1f2b2a;
-        background: var(--my-border-color-hover);
-      }      
-
-      a.primary {
-        background-color: var(--my-primary-color);        
-        color: #fefefe; /* ToDo */
-      }      
-
-      a.primary[disabled] {
-        background-color: #d3d2d2;
-      }
-
-      .b-gradient {
-        background: linear-gradient(to right, var(--my-background-gradient-color) 0%, var(--my-background-color) 100%);      
-      }
-
-      .b-gradient.primary {
-        background: linear-gradient(to right, var(--my-primary-color) 0%, var(--my-background-color) 100%);      
-      }
-
-      .b-gradient[disabled] {
-        background: linear-gradient(to right, lightgrey 0%, grey 100%);      
-      }
+      
 
       /* button icon not integrated at the moment */
       .button-icon {
@@ -183,10 +181,15 @@ export class PdButton extends LitElement {
   }
 
   render() {
-    // eslint-disable-next-line lit-a11y/anchor-is-valid
-    return html`<a class="${this.gradient ? 'b-gradient' : ''} ${this.primary ? 'primary' : ''}" ?disabled="${this.disabled}">      
-        ${this.text}
-      </a>`;
+    return html`
+    <div @onClick="${this._handleClick}">
+      <a ?disabled="${this.disabled}">${this.text}</a>
+    </div>`;
   }
 
+  _handleClick() {
+    if (!this.disabled) {
+      this.dispatchEvent(new CustomEvent("button-clicked"));
+    }
+  }
 }