@progressive-development/pd-forms 0.1.3 → 0.1.5

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.3",
+  "version": "0.1.5",
   "main": "index.js",
   "module": "index.js",
   "scripts": {
@@ -21,7 +21,8 @@
   "dependencies": {
     "@lit-labs/motion": "^1.0.2",
     "@lit/localize": "^0.11.2",
-    "@progressive-development/pd-icon": "^0.1.7",
+    "@progressive-development/pd-icon": "^0.1.9",
+    "@progressive-development/pd-shared-styles": "0.1.1",
     "lit": "^2.2.0"
   },
   "devDependencies": {

package/src/PdBaseUi.js

@@ -20,12 +20,12 @@
 import { LitElement } from 'lit';
 import { updateWhenLocaleChanges } from '@lit/localize';
 
-import { SharedGlobalStyles } from './shared-global-styles.js';
+import { PDColorStyles, PDFontStyles } from '@progressive-development/pd-shared-styles';
 
 export class PdBaseUI extends LitElement {
 
     static get styles() {
-        return [SharedGlobalStyles];
+        return [PDColorStyles, PDFontStyles];
     }    
 
   constructor() {

package/src/PdButton.js

@@ -5,182 +5,183 @@
  * Copyright (c) 2021 PD Progressive Development UG. All rights reserved.
  */
 
-import { html, css } from 'lit';
-import { PdBaseUI } from './PdBaseUi.js';
-
-export class PdButton extends PdBaseUI {
-
-  /**
-   * @event button-clicked
-   */
-
-  static get styles() {
-    return [
-      PdBaseUI.styles,
-      css`
-      :host {
-
-        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-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);
-
-        cursor: pointer;
-
-        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%;         
-        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-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-col));
-        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-col);
-        background-color: var(--pd-button-bg-col-disabled, var(--pd-default-disabled-col));
-        color: var(--pd-button-font-col-disabled, black);
-      }
-
-      /* Style for Button */
-      a {
-        display: inline-block;
-        text-decoration: none;
-        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);*/
-        /*will-change: transform; Dann über Menu bei Scroll...*/
-
-        /*
-        transition-property: box-shadow, background;
-        transition: .2s ease-in;
-        box-sizing: border-box;
-        */
-        
-        /*overflow: hidden;
-        text-overflow: ellipsis;*/
-        
-        /*padding: var(--squi-input-padding, .5rem);*/
-      }
-      
-      a *{
-        pointer-events: none;        
-      }      
-      
-
-      /* button icon not integrated at the moment */
-      .button-icon {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        white-space: nowrap;
-        --pd-icon-fill: var(--icon-fill-light);
-        --pd-icon-fill-hover: var(--icon-fill-light);
-      }
-      
-      .button-icon:not([disabled]) {
-        --pd-icon-fill: var(--app-primary-color);
-        --pd-icon-fill-hover: var(--app-primary-color-dark);
-      }
-
-      .button-icon pd-icon {
-        max-width: 1.25rem;
-        height: 1.25rem;
-        width: 1.25rem;
-        margin: 0 .15rem;
-      }
-
-      .button-icon.small pd-icon {
-        max-width: 1.25rem;
-        height: 1.25rem;
-        width: 1.25rem;
-        padding-right: .15rem;
-      }
-
-      .button-icon svg {
-          max-width: 1rem;
-          height: 1rem;
-          width: 1rem;
-          padding-right: .5rem;
-          fill: var(--app-primary-color);
-      }
-      
-      .button-icon:hover pd-icon,    
-      .button-icon:hover svg {
-          fill: var(--app-primary-color);
-      }            
-
-      @media (min-width: 580px) {        
-        .button-icon pd-icon {
-            margin: 0 .5rem;
-        }        
-        .button-icon.small pd-icon {
-            padding-right: .5rem;
-        }
-      }
-
-    `];
-  }
-
-  static get properties() {
-    return {                  
-      primary: {type: Boolean},
-      gradient: {type: Boolean},
-      disabled: {type: Boolean},
-      text: {type: String}
-    };
-  }
-
-  constructor() {
-    super();    
-    this.primary = false;
-    this.gradient = false;
-    this.disabled = false;
-    this.text = 'Ok';
-  }
-
-  render() {
-    return html`
-    <div @click="${this._handleClick}">
-      <a ?disabled="${this.disabled}">${this.text}</a>
-    </div>`;
-  }
-
-  _handleClick() {
-    if (!this.disabled) {
-      this.dispatchEvent(new CustomEvent("button-clicked"));
-    }
-  }
-}
+ import { html, css } from 'lit';
+ import { PdBaseUI } from './PdBaseUi.js';
+ 
+ export class PdButton extends PdBaseUI {
+ 
+   /**
+    * @event button-clicked
+    */
+ 
+   static get styles() {
+     return [
+       PdBaseUI.styles,
+       css`
+       :host {        
+         
+         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);
+         
+         /*        
+         height: 100%;         
+         width: 100%; => Ohne diese Angabe eht die % Angaben icht
+         */                    
+         margin: 0.5rem;
+         margin-left: 0; /* Um gleich zum input field zu sein */
+ 
+         pointer-events: none;
+       }
+ 
+       .button-div {
+ 
+         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-dark-col));
+         color: var(--pd-button-font-col, var(--pd-default-bg-col));
+ 
+         cursor: pointer;
+ 
+         box-shadow: var(--pd-button-box-shadow, -1px 1px 2px var(--pd-default-dark-col));
+ 
+         pointer-events: all;
+       }
+ 
+       :host(:not([disabled]):hover) .button-div {
+         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]) .button-div {
+         background-color: var(--pd-button-primary-bg-col, var(--pd-default-col));
+         color: var(--pd-button-primary-font-col, var(--pd-default-bg-col));
+       }
+ 
+       :host([gradient]) .button-div {
+         background: linear-gradient(to right, var(--my-background-gradient-color, red) 0%, var(--my-background-color, blue) 100%);      
+       }      
+ 
+       :host([disabled]) .button-div {
+         cursor: auto;            
+         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);
+       }
+ 
+       /* Style for Button */
+       a {
+         display: inline-block;
+         text-decoration: none;
+         border: none;        
+         white-space: nowrap;
+         margin: 0.5rem;
+         pointer-events: none;        
+ 
+         /*box-shadow:  -2px 2px 4px #999;/* TODO: From var */
+         /*border-bottom: 1px solid var(--my-border-color);*/
+         /*will-change: transform; Dann über Menu bei Scroll...*/
+ 
+         /*
+         transition-property: box-shadow, background;
+         transition: .2s ease-in;
+         box-sizing: border-box;
+         */
+         
+         /*overflow: hidden;
+         text-overflow: ellipsis;*/
+         
+         /*padding: var(--squi-input-padding, .5rem);*/
+       }
+             
+ 
+       /* button icon not integrated at the moment */
+       .button-icon {
+         display: flex;
+         align-items: center;
+         justify-content: center;
+         white-space: nowrap;
+         --pd-icon-fill: var(--icon-fill-light);
+         --pd-icon-fill-hover: var(--icon-fill-light);
+       }
+       
+       .button-icon:not([disabled]) {
+         --pd-icon-fill: var(--app-primary-color);
+         --pd-icon-fill-hover: var(--app-primary-color-dark);
+       }
+ 
+       .button-icon pd-icon {
+         max-width: 1.25rem;
+         height: 1.25rem;
+         width: 1.25rem;
+         margin: 0 .15rem;
+       }
+ 
+       .button-icon.small pd-icon {
+         max-width: 1.25rem;
+         height: 1.25rem;
+         width: 1.25rem;
+         padding-right: .15rem;
+       }
+ 
+       .button-icon svg {
+           max-width: 1rem;
+           height: 1rem;
+           width: 1rem;
+           padding-right: .5rem;
+           fill: var(--app-primary-color);
+       }
+       
+       .button-icon:hover pd-icon,    
+       .button-icon:hover svg {
+           fill: var(--app-primary-color);
+       }            
+ 
+       @media (min-width: 580px) {        
+         .button-icon pd-icon {
+             margin: 0 .5rem;
+         }        
+         .button-icon.small pd-icon {
+             padding-right: .5rem;
+         }
+       }
+ 
+     `];
+   }
+ 
+   static get properties() {
+     return {                  
+       primary: {type: Boolean},
+       gradient: {type: Boolean},
+       disabled: {type: Boolean},
+       text: {type: String}
+     };
+   }
+ 
+   constructor() {
+     super();    
+     this.primary = false;
+     this.gradient = false;
+     this.disabled = false;
+     this.text = 'Ok';
+   }
+ 
+   render() {
+     return html`
+     <div @click="${this._handleClick}" class="button-div">
+       <a ?disabled="${this.disabled}">${this.text}</a>
+     </div>`;
+   }
+ 
+   _handleClick() {
+     if (!this.disabled) {
+       this.dispatchEvent(new CustomEvent("button-clicked"));
+     }
+   }
+ }

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.namne || this.valueName || this.autoCompleteName}"
+          name="${this.name || 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.namne || this.valueName || this.autoCompleteName}"
+          name="${this.name || this.valueName || this.autoCompleteName}"
           autocomplete=${this.autoCompleteName}
           class="input-style ${this.gradient ? 'gradient' : ''}"
           rows="${this.rows}"

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.namne || this.valueName || this.autoCompleteName}"
+          name="${this.name || this.valueName || this.autoCompleteName}"
           autocomplete=${this.autoCompleteName}
           @change="${this._onKeyUp}"
           @keyup="${this._onSelectKeyUp}"

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

@@ -36,7 +36,7 @@ export const SharedInputFieldStyles = css`
   .input-style {
     width: var(--pd-input-field-width, 250px);
     /* padding: var(--squi-input-padding, 0.5rem); */
-    background-color: var(--pd-input-field-bg-col, var(--pd-default-bg-color));
+    background-color: var(--pd-input-field-bg-col, var(--pd-default-bg-col));
     /*opacity: 80%;*/
     color: var(--pd-default-font-input-col);
     /*font-size: var(--squi-input-font-size, calc(var(--squi-input-height) / 1.8));*/

package/src/shared-global-styles.js

@@ -1,43 +0,0 @@
-/**
- * @license
- * Copyright (c) 2021 PD Progressive Development UG. All rights reserved.
- */
-
-import { css } from 'lit';
-
-export const SharedGlobalStyles = css`
-
-  :host {
-    /** 
-     * 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);
-    --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, #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-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, #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: var(--app-disabled-col, #888585);
-    --pd-default-disabled-light-col: var(--app-disabled-light-col, lightgrey);    
-  }
-
-`;