@progressive-development/pd-forms 0.1.1 → 0.1.3

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.1",
+  "version": "0.1.3",
   "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.6",
+    "@progressive-development/pd-icon": "^0.1.7",
     "lit": "^2.2.0"
   },
   "devDependencies": {

package/src/PdButton.js

@@ -1,3 +1,4 @@
+/* eslint-disable lit-a11y/click-events-have-key-events */
 /* eslint-disable lit-a11y/anchor-is-valid */
 /**
  * @license
@@ -40,6 +41,7 @@ export class PdButton extends PdBaseUI {
         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%;         
@@ -171,7 +173,7 @@ export class PdButton extends PdBaseUI {
 
   render() {
     return html`
-    <div @onClick="${this._handleClick}">
+    <div @click="${this._handleClick}">
       <a ?disabled="${this.disabled}">${this.text}</a>
     </div>`;
   }

package/src/PdCheckbox.js

@@ -119,7 +119,7 @@ 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-col));;
+        border: 2px solid var(--pd-cb-border-col, var(--pd-default-col));
         border-radius: var(--pd-cb-border-radius, 3px);
       }
 

package/src/PdFormContainer.js

@@ -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}"

package/src/PdRadioGroup.js

@@ -27,6 +27,10 @@ export class PdRadioGroup extends PdBaseUIInput {
         flex-direction: var(--pd-cb-group-direction, row);
       }
 
+      ::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

@@ -31,12 +31,13 @@ export const SharedGlobalStyles = css`
     --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-hover-col: var(--app-hover-col, #f3d7a0);
     --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: #888585;
+    --pd-default-disabled-col: var(--app-disabled-col, #888585);
+    --pd-default-disabled-light-col: var(--app-disabled-light-col, lightgrey);    
   }
 
 `;