@progressive-development/pd-forms 0.0.61 → 0.1.2

package/.storybook/preview-head.html

@@ -0,0 +1,4 @@
+<link rel="preconnect" href="https://fonts.gstatic.com">
+<link href="https://family=Roboto:wght@300;400&display=swap" rel="stylesheet">
+<link href="https://webfonts.ffonts.net/Gidolinya-Regular.font" rel="stylesheet">
+

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.61",
+  "version": "0.1.2",
   "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.1.5",
+    "@progressive-development/pd-icon": "^0.1.6",
     "lit": "^2.2.0"
   },
   "devDependencies": {

package/src/PdBaseInputElement.js

@@ -46,7 +46,6 @@ export class PdBaseInputElement extends PdBaseUIInput {
         /* not used at the moment */
         name: { type: String },
         autoCompleteName: { type: String },
-        _input: { type: Object, state: true }, // reference for input html element
     };
   }
 

package/src/PdBaseUiInput.js

@@ -92,8 +92,6 @@ import { SharedInputStyles } from './shared-input-styles.js';
              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, 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            
          };
      }
  
@@ -115,13 +113,13 @@ import { SharedInputStyles } from './shared-input-styles.js';
      // Test: Clear input with value => Dann in BasisKlasse und alle leiten von Basis UI Element ab
      clear() {
          this.value = '';
-         this._input.value = this.value;
+         // this._input.value = this.value;
      }
  
      // Test: Reset input with value
      reset() {        
          this.value = this.defaultValue || '';
-         this._input.value = this.value;
+         // this._input.value = this.value;
      }
  
      get errorMsg() {

package/src/PdButton.js

@@ -18,15 +18,6 @@ export class PdButton extends PdBaseUI {
       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(--pd-input-field-width, 140px);
-        */
 
         display: flex;      
         justify-content: center;
@@ -37,18 +28,19 @@ export class PdButton extends PdBaseUI {
         
         border-radius: var(--pd-border-radius, 1px);
 
-        background-color: var(--pd-button-bg-col, var(--pd-default-third-color));
+        background-color: var(--pd-button-bg-col, var(--pd-default-dark-col));
         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);        
-        
+        font-weight: var(--pd-button-font-weight, normal);
+
         cursor: pointer;
 
-        box-shadow: -1px 1px 2px var(--pd-default-third-color);
+        box-shadow: var(--pd-button-box-shadow, -1px 1px 2px var(--pd-default-dark-col));
 
         margin: 0.5rem;
+        margin-left: 0; /* Um gleich zum input field zu sein */
 
         /*        
         height: 100%;         
@@ -57,11 +49,13 @@ export class PdButton extends PdBaseUI {
       }
 
       :host(:not([disabled]):hover) {
-        background-color: var(--pd-button-bg-col-hover, var(--pd-default-hover-color));
+        background-color: var(--pd-button-bg-col-hover, var(--pd-default-hover-col));
+        color: var(--pd-button-font-col-hover, var(--pd-default-dark-col));
+        transition: background-color 0.4s ease 0s;        
       }
 
       :host([primary]) {
-        background-color: var(--pd-button-primary-bg-col, var(--pd-default-color));
+        background-color: var(--pd-button-primary-bg-col, var(--pd-default-col));
         color: var(--pd-button-primary-font-col, var(--pd-default-bg-color));
       }
 
@@ -71,15 +65,11 @@ export class PdButton extends PdBaseUI {
 
       :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));
+        border-color: var(--pd-default-disabled-col);
+        background-color: var(--pd-button-bg-col-disabled, var(--pd-default-disabled-col));
+        color: var(--pd-button-font-col-disabled, black);
       }
 
-      :host([disabled]:hover) {
-        box-shadow: -1px 1px 2px #1f2b2a;
-      }    
-
       /* Style for Button */
       a {
         display: inline-block;

package/src/PdCheckbox.js

@@ -34,14 +34,14 @@ import { PdBaseUIInput, INPUT_TYPE_CHECK } from "./PdBaseUiInput.js";
  * --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-color
+ * --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-color
+ * --pd-cb-switch-paddle-col        --pd-default-col
  * 
  */
 export class PdCheckbox extends PdBaseUIInput {
@@ -119,12 +119,12 @@ export class PdCheckbox extends PdBaseUIInput {
       .checkbox pd-icon {
         margin-right: .2rem;
         margin-bottom: .2rem;
-        border: 2px solid var(--pd-cb-border-col, var(--pd-default-color));;
-        border-radius: var(--pd-cb-border-radius, 4px);
+        border: 2px solid var(--pd-cb-border-col, var(--pd-default-col));
+        border-radius: var(--pd-cb-border-radius, 3px);
       }
 
       .label {
-        margin-left: .5rem;
+        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;
@@ -132,7 +132,11 @@ export class PdCheckbox extends PdBaseUIInput {
       }
 
       .readonly .label {
-        color: var(--pd-cb-txt-col-readonly, #4d4d4d);
+        color: var(--pd-cb-font-col-readonly, #4d4d4d);
+      }
+
+      .readonly .checkbox pd-icon {
+        border-color: var(--pd-cb-border-col-readonly, transparent);
       }
 
       /* Switch styles */
@@ -146,6 +150,10 @@ export class PdCheckbox extends PdBaseUIInput {
         user-select: none;
       }
 
+      .switch .label {
+        margin-left: 0.5rem;
+      }
+
       .switch-paddle {
         display: inline-block;
         vertical-align: baseline;
@@ -155,7 +163,7 @@ export class PdCheckbox extends PdBaseUIInput {
         max-width: 4rem;
         height: 2rem;
         border-radius: 0;
-        background: var(--pd-cb-switch-paddle-col, var(--pd-default-color));
+        background: var(--pd-cb-switch-paddle-col, var(--pd-default-col));
         font-weight: inherit;
         color: inherit;
         cursor: pointer;
@@ -170,7 +178,7 @@ export class PdCheckbox extends PdBaseUIInput {
         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-color));
+        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;
@@ -196,9 +204,13 @@ export class PdCheckbox extends PdBaseUIInput {
         */
       }
 
+      .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: 0.25rem;
+        left: 0rem;
       }
   
       .isChecked.switch-paddle pd-icon {
@@ -213,11 +225,14 @@ export class PdCheckbox extends PdBaseUIInput {
     `];
   }
 
-  firstUpdated() {
-    this._hasInner = !!this.innerHTML.trim().length;
-  }
-
   render() {
+
+    // 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;
+    }
+    
     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};    

package/src/PdFormContainer.js

@@ -41,23 +41,23 @@ export class PdFormContainer extends PdBaseUI {
         border-radius: var(--pd-border-radius, 0);
         -moz-border-radius: var(--pd-border-radius, 0);
         width:40%;
-        min-width:300px;
+        min-width:250px;
       }
 
       .filled {                
-        border-left: 4px solid var(--pd-form-filled-col, var(--pd-default-success-color));
-        border-right: 4px solid var(--pd-form-filled-col, var(--pd-default-success-color));
-        border-top: 1px solid var(--pd-form-filled-col, var(--pd-default-success-color));
-        border-bottom: 1px solid var(--pd-form-filled-col, var(--pd-default-success-color));
-        background-color: var(--pd-form-suc-bg-col, #f5ffe8);
+        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 var(--pd-form-err-col, var(--pd-default-error-color));
-        border-right: 4px solid var(--pd-form-err-col, var(--pd-default-error-color));
-        border-top: 1px solid var(--pd-form-err-col, var(--pd-default-error-color));
-        border-bottom: 1px solid var(--pd-form-err-col, var(--pd-default-error-color));
-        background-color: var(--pd-form-er-bg-col, #ffe8e8);
+        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);
       }
 
     `];
@@ -141,7 +141,7 @@ export class PdFormContainer extends PdBaseUI {
       msg("Format +49123 123456 verwenden",{desc: '#pd.form.field.invalid.phone#'}));
     validateByType("vat", PdFormContainer._vatIsValid,  
       msg("Format DE0123456789 verwenden",{desc: '#pd.form.field.invalid.vat#'}));
-    validateByType("number", (val) => !Number.isNaN(val),   
+    validateByType("number", (val) => !isNaN(val),   
       msg("Nur Zahlen erlaubt",{desc: '#pd.form.field.invalid.number#'}));
 
     if (e.detail.singleElement) {

package/src/PdInput.js

@@ -85,7 +85,7 @@ export class PdInput extends PdBaseInputElement {
       <div class="input ${this.errorMsg.length > 0 ? 'error' : ''}">
         <input
           id="${inputId}"
-          name="${this.autoCompleteName}"
+          name="${this.namne || this.valueName || this.autoCompleteName}"
           autocomplete=${this.autoCompleteName}
           class="input-style ${this.gradient ? 'gradient' : ''}"
           type="${this.secret ? 'password' : 'text'}"

package/src/PdInputArea.js

@@ -84,7 +84,7 @@ export class PdInputArea extends PdBaseInputElement {
       <div class="input ${this.errorMsg.length > 0 ? 'error' : ''}">
         <textarea
           id="${inputAreaId}"
-          name="${this.autoCompleteName}"
+          name="${this.namne || this.valueName || this.autoCompleteName}"
           autocomplete=${this.autoCompleteName}
           class="input-style ${this.gradient ? 'gradient' : ''}"
           rows="${this.rows}"
@@ -92,9 +92,10 @@ export class PdInputArea extends PdBaseInputElement {
           placeholder="${this.placeHolder}"
           ?disabled="${this.disabled}"
           ?readonly="${this.readonly}"
+          .value="${this.value || ''}"
           @keyup="${this._onKeyUp}"
           @blur="${this._onBlur}"
-        >${this.value}</textarea>
+        ></textarea>
       </div>
       ${this._renderErrorMsg()}
     `;

package/src/PdRadioGroup.js

@@ -27,9 +27,8 @@ export class PdRadioGroup extends PdBaseUIInput {
         flex-direction: var(--pd-cb-group-direction, row);
       }
 
-      /* Overwrite width for radio group */
-      .error-box {      
-        max-width: var(--pd-input-field-width, 500px);
+      ::slotted(pd-checkbox) {
+        --pd-cb-border-col-readonly: var(--pd-cb-border-col, var(--pd-default-col));
       }
 
     `];

package/src/PdSelect.js

@@ -138,7 +138,7 @@ export class PdSelect extends PdBaseInputElement {
           id="${selectId}"
           class="input-style select-css ${this.gradient ? 'gradient' : ''}"
           ?disabled="${this.disabled}"
-          name="${this.autoCompleteName}"
+          name="${this.namne || this.valueName || this.autoCompleteName}"
           autocomplete=${this.autoCompleteName}
           @change="${this._onKeyUp}"
           @keyup="${this._onSelectKeyUp}"

package/src/shared-global-styles.js

@@ -8,31 +8,36 @@ import { css } from 'lit';
 export const SharedGlobalStyles = css`
 
   :host {
-
-    /* set default fonts for all pd-components.
+    /** 
+     * Set default fonts for all pd-components.
      * Use content, title and input categories for fonts.
      */
-    --pd-default-font-title-family: var(--app-font-title-family, Gidolinya Regular);    
-    --pd-default-font-content-family: var(--app-font-content-family, Roboto);
-    --pd-default-font-input-family: var(--app-font-input-family, Roboto);
-    
+    --pd-default-font-title-family: var(--app-font-title-family);
+    --pd-default-font-content-family: var(--app-font-content-family);
+    --pd-default-font-input-family: var(--app-font-input-family);
+
     --pd-default-font-title-col: var(--app-font-title-col, #0A3A48);    
-    --pd-default-font-content-col: var(--app-font-content-col, #0A3A48);
-    --pd-default-font-input-col: var(--app-font-input-col, #0A3A48);
-    
+    --pd-default-font-content-col: var(--app-font-content-col, #353738);
+    --pd-default-font-input-col: var(--app-font-input-col, #353738);
+
     --pd-default-font-content-size: var(--app-font-content-size, 1em);
     --pd-default-font-input-size: var(--app-font-input-size, 1em);
-    
-    /* set default colors for all pd-components */
-    --pd-default-color: var(--app-primary-col, #067394);
-    --pd-default-primary-color: var(--app-primary-element-col, #0A3A48);
-    --pd-default-secondary-color: var(--app-secondary-element-col, #AFC1D2);
-    --pd-default-third-color: var(--app-third-element-col, #353738);
-    --pd-default-bg-color: var(--app-primary-col, #fefefe);    
-    --pd-default-hover-color: var(--app-hover-col, #E1E03D);
-    --pd-default-error-color: #cc2029;
-    --pd-default-disabled-color: #7a7777;        
-    --pd-default-success-color: #42a01c;
+
+    /**
+     * Set default colors for all pd-components 
+     */
+    --pd-default-col: var(--app-primary-col, #067394);
+    --pd-default-light-col: var(--app-primary-light-col, #AFC1D2);
+    --pd-default-dark-col: var(--app-primary-dark-col, #0A3A48);
+    --pd-default-bg-color: var(--app-primary-bg-col, #fefefe);
+
+    --pd-default-hover-col: var(--app-hover-col, #E1E03D);
+    --pd-default-error-col: var(--app-error-col, #cc2029);
+    --pd-default-error-light-col: var(--app-error-light-col, #ffe8e8);
+    --pd-default-success-col: var(--app-success-col, #42a01c);
+    --pd-default-success-light-col: var(--app-success-light-col, #f5ffe8);    
+    --pd-default-disabled-col: var(--app-disabled-col, #888585);
+    --pd-default-disabled-light-col: var(--app-disabled-light-col, lightgrey);    
   }
 
 `;

package/src/shared-input-field-styles.js

@@ -38,26 +38,26 @@ export const SharedInputFieldStyles = css`
     /* padding: var(--squi-input-padding, 0.5rem); */
     background-color: var(--pd-input-field-bg-col, var(--pd-default-bg-color));
     /*opacity: 80%;*/
-    color: var(--pd-input-field-font-col, var(--pd-default-font-input-col));
+    color: var(--pd-default-font-input-col);
     /*font-size: var(--squi-input-font-size, calc(var(--squi-input-height) / 1.8));*/
     font-size: var(--pd-default-font-input-size);
     font-family: var(--pd-default-font-input-family);
     
-    border: var(--pd-input-field-border, 1px solid var(--pd-default-secondary-color));
+    border: var(--pd-input-field-border, 1px solid var(--pd-default-light-col));
     box-shadow: inset 0 1px 2px rgba(50, 48, 49, 0.1);
     border-bottom: var(--pd-input-field-border-bottom, 
-      2px solid var(--pd-default-color));
+      2px solid var(--pd-default-col));
     border-radius: var(--pd-border-radius, 0);
   }
 
   /* Hover for input, area, select */
   .input-style:hover {
-    border-color: var(--pd-input-field-border-col-hover, var(--pd-default-hover-color));
+    border-color: var(--pd-input-field-border-col-hover, var(--pd-default-hover-col));
   }
 
   /* Fokus for input, area => select with own css.? */
   .input-style:focus {
-    border: var(--pd-input-field-border-focus, 2px solid var(--pd-default-color));
+    border: var(--pd-input-field-border-focus, 2px solid var(--pd-default-col));
     outline: 0;
   }
 
@@ -73,30 +73,30 @@ export const SharedInputFieldStyles = css`
     cursor: auto;    
     background-color: var(--pd-input-field-bg-col-disabled, #e9e9e9);
     border-bottom: var(--pd-input-field-border-bottom-disabled, 
-      2px solid var(--pd-default-disabled-color));
+      2px solid var(--pd-default-disabled-col));
   }
 
   .input-style[readonly]:hover,
   .input-style[disabled]:hover {
-    border-color: var(--pd-default-disabled-color);
+    border-color: var(--pd-default-disabled-col);
   }
 
   /* Disabled for input, area => select with own css.? */
   .input-style[readonly] {
     border-bottom: var(--pd-input-field-border-bottom-disabled, 
-      2px solid var(--pd-default-disabled-color));
+      2px solid var(--pd-default-disabled-col));
   }
   
   /* error element style for input, area => select has own css.? */
   .error .input-style {
-    border: 1px solid var(--pd-default-error-color);
-    color: var(--pd-default-error-color);
-    background-color: var(--pd-error-bg-col, #ffe8e8);
+    border: 1px solid var(--pd-default-error-col);
+    color: var(--pd-default-error-col);
+    background-color: var(--pd-default-error-light-col);
   }
 
   /* Error Focus for input, area, select */
   .error .input-style:focus {
-    border: 2px solid var(--pd-default-error-color);
+    border: 2px solid var(--pd-default-error-col);
   }
 
   /* Placeholder color for input and input-area */

package/src/shared-input-styles.js

@@ -18,10 +18,10 @@ export const SharedInputStyles = css`
   label {
     display: block;
     padding: var(--pd-input-label-padding, 0);
-    color: var(--pd-input-lable-col, #58585a);
+    color: var(--pd-input-lable-col, var(--pd-default-dark-col));
     text-align: var(--pd-input-label-align, left);
     font-size: var(--pd-input-lable-font-size, 0.8rem);
-    font-family: var(--pd-input-lable-font-family);
+    font-family: var(--pd-input-lable-font-family, var(--pd-default-font-title-family));
   }
 
   /**
@@ -29,11 +29,11 @@ export const SharedInputStyles = css`
    */
   .error-box {
     display: block;
-    color: var(--pd-default-error-color);
-    background: var(--pd-error-bg-col, #ffe8e8);
-    border: 1px solid var(--pd-default-error-color);
+    color: var(--pd-default-error-col);
+    background: var(--pd-default-error-light-col);
+    border: 1px solid var(--pd-default-error-col);
     border-radius: var(--pd-border-radius, 0);
-    max-width: var(--pd-input-field-width);
+    max-width: var(--pd-input-field-width, 350px);
   }
   .error-box p {
     margin: 0;

package/stories/checkbox.stories.js

@@ -63,12 +63,30 @@ function Template({ errorMsg }) {
 function SwitchTemplate({ errorMsg }) {
   return html`
     <h3>Switch selected</h3>
-    <pd-checkbox name="Test1" isSwitch value="true" errorMsg="${errorMsg}"
+    <pd-checkbox name="Test1" isSwitch value="true" 
       >Label zur Checkbox</pd-checkbox
     >
 
     <h3>Switch unselected</h3>
-    <pd-checkbox name="Test2" isSwitch value="false" errorMsg="${errorMsg}"
+    <pd-checkbox name="Test2" isSwitch value="false" 
+      >Label zur Checkbox</pd-checkbox
+    >
+
+    <h3>Switch disabled</h3>
+    <pd-checkbox name="Test2" isSwitch value="false" disabled 
+      >Label zur Checkbox</pd-checkbox
+    >
+    <h3>Switch disabled</h3>
+    <pd-checkbox name="Test2" isSwitch value="true" disabled 
+      >Label zur Checkbox</pd-checkbox
+    >
+
+    <h3>Switch readonly</h3>
+    <pd-checkbox name="Test2" isSwitch value="false" readonly
+      >Label zur Checkbox</pd-checkbox
+    >
+    <h3>Switch readonly</h3>
+    <pd-checkbox name="Test2" isSwitch value="true" readonly
       >Label zur Checkbox</pd-checkbox
     >
   `;