@progressive-development/pd-forms 0.0.5 → 0.0.6

package/index.js

@@ -1,5 +1,22 @@
-import { TestEl } from './src/test-el.js';
+import { SquiSelect } from './src/squi-select.js';
+import { SquiButton } from './src/squi-button.js';
+import { SquiCheckbox } from './src/squi-checkbox.js';
+import { SquiFormContainer } from './src/squi-form-container.js';
+import { SquiFormRow } from './src/squi-form-row.js';
+import { SquiInputArea } from './src/squi-input-area.js';
+import { SquiInput } from './src/squi-input.js';
+import { SquiRadioGroup } from './src/squi-radio-group.js';
 
-window.customElements.define('test-el', TestEl);
+window.customElements.define('squi-select', SquiSelect);
+window.customElements.define('squi-button', SquiButton);
+window.customElements.define('squi-checkbox', SquiCheckbox);
+window.customElements.define('squi-form-container', SquiFormContainer);
+window.customElements.define('squi-form-row', SquiFormRow);
+window.customElements.define('squi-input-area', SquiInputArea);
+window.customElements.define('squi-input', SquiInput);
+window.customElements.define('squi-radio-group', SquiRadioGroup);
 
-export { TestEl };
+export { 
+    SquiSelect, SquiButton, SquiCheckbox, SquiFormContainer,
+    SquiFormRow, SquiInputArea, SquiInput, SquiRadioGroup
+};

package/package.json

@@ -3,7 +3,7 @@
   "description": "Webcomponent pd-forms following open-wc recommendations",
   "license": "MIT",
   "author": "PD Progressive Development",
-  "version": "0.0.5",
+  "version": "0.0.6",
   "main": "index.js",
   "module": "index.js",
   "scripts": {
@@ -17,7 +17,8 @@
     "storybook:build": "npm run analyze -- --exclude dist && build-storybook"
   },
   "dependencies": {
-    "lit": "^2.0.0-rc.4"    
+    "@progressive-development/pd-icon": "0.0.2",
+    "lit": "^2.0.0-rc.4"
   },
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "^0.4.17",

package/src/shared-input-styles.js

@@ -0,0 +1,227 @@
+/**
+@license
+Copyright (c) 2018 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+*/
+
+import { css } from 'lit';
+
+export const SharedInputStyles = css`
+  :host {
+    /*
+        display: block;
+        box-sizing: border-box;
+        perspective: none;        
+        */
+
+    /* define color layout for elements depending on customizables vals:
+          squi-primary-color, squi-secondary-color, squi-text-color, squi-highlight-color, 
+          squi-border-radius, squi-error-color, squi-error-background-color, squi-display-font, squi-font-size
+        */
+
+    /* Border for input Elements Select, Input, Input Area */
+    --my-border-color: var(--squi-primary-color, #177e89);
+    --my-border-color-focus: var(--squi-primary-color, #177e89);
+    --my-border-color-hover: var(--squi-highlight-color, #ffc857);
+    --my-border-radius: var(--squi-border-radius, 0rem);
+
+    /* Background color input Elements Select, Input, Input Area */
+    --my-background-color: var(--squi-secondary-color, #fefefe);
+    --my-background-gradient-color: var(--squi-third-color, #8caed8a1);
+    --my-error-background-color: var(--squi-error-background-color, #f6d4d4a1);
+
+    /* Error colors for Elements Select, Input, Input Area */
+    --my-error-color: var(--squi-error-color, #d6242d);
+
+    /* Text color input Elements Select, Input, Input Area */
+    --my-text-color: var(--squi-text-color, #000000);
+    --my-label-color: var(--squi-text-color, #000000);
+    --my-font-family: var(--squi-display-font, 'Montserrat');
+    --my-font-size: var(--squi-font-size, 1rem);
+
+    --my-input-height: var(--squi-input-height, 2.4rem);
+  }
+
+  /* Describe input div (with icon) around input/select/area element */
+  .input {
+    display: inline-block;
+    /*position: relative; Prüfen: Wennd as an ist, felder über scroll-menu?*/
+    /* squi-icon smaller than input */
+    --squi-icon-computed-size: calc(var(--my-input-height) * 0.75); /* calc */
+
+    /* Hack um eine Form Row (input mit Button => Booking) zu bekommen*/
+    padding-top: var(--squi-input-padding, 0.5rem);
+  }
+  .input.error {
+    color: var(--my-error-color);
+  }
+  /* squi icon depends on input styles to fit inside */
+  squi-icon {
+    display: none;
+    position: absolute;
+    --squi-icon-height: var(--squi-icon-computed-size, 2rem);
+    --squi-icon-width: var(--squi-icon-computed-size, 2rem);
+    --squi-icon-fill-color: var(--squi-input-icon-fill-color, currentcolor);
+    --squi-icon-stroke-color: var(--squi-input-icon-stroke-color, none);
+  }
+  squi-icon:hover {
+    cursor: pointer;
+  }
+  /* Display icon if it's positioned */
+  :host([icon-right]) .input squi-icon {
+    display: inline-block;
+    right: 0;
+  }
+  :host([icon-left]) .input squi-icon {
+    display: inline-block;
+    left: 0;
+  }
+
+  /* Padding space for squi-icon => Noch input spezifisch? */
+  :host([icon-right]) > input {
+    padding-right: var(--my-input-height);
+  }
+  :host([icon-left]) > input {
+    padding-left: var(--my-input-height);
+  }
+  /* Text direction */
+  :host([text-right]) > input {
+    text-align: right;
+  }
+  :host([text-left]) > input {
+    text-align: left;
+  }
+
+  /* Label for input, select, area */
+  label {
+    display: block;
+    padding: 0;
+    color: var(--my-label-color);
+    text-align: left;
+    font-size: 0.9rem;
+    margin-bottom: -5px;
+  }
+
+  /* Working progress, used at the moment for radio-group, work out and adapt to others... */
+  .error-box {
+    color: var(--my-error-color);
+  }
+
+  /* Error Msg Div for input, select, area */
+  .error-msg {
+    background: var(--my-error-background-color);
+    border: 1px solid var(--my-error-color);
+    border-radius: var(--my-border-radius);
+    padding: 0.25rem;
+    white-space: nowrap;
+    display: block;
+    font-size: 0.8rem;
+    max-width: var(--squi-input-width, 250px);
+  }
+
+  /* 
+     * Descrive size, style for input, area and select element 
+     * not use iput here => because of own select css...
+     */
+  .input-style {
+    width: var(--squi-input-width, 250px);
+    padding: var(--squi-input-padding, 0.5rem);
+
+    background-color: var(--my-background-color);
+    /*opacity: 80%;*/
+    color: var(--my-text-color);
+    /*font-size: var(--squi-input-font-size, calc(var(--squi-input-height) / 1.8));*/
+    font-size: var(--my-font-size);
+    font-family: var(--my-font-family);
+
+    /* ToDo Border Angaben? (ganz, nur bottom, und variablen dazu) Hier für ontact us fest eingebunden...*/
+    border: 1px solid #cacaca;
+    box-shadow: inset 0 1px 2px rgba(50, 48, 49, 0.1);
+    border-bottom: 2px solid var(--my-border-color);
+    border-radius: var(--my-border-radius);
+  }
+
+  /* Höhe soll nicht für Text Area gelten, daher ausgelagert (überschreibt sonst rows) */
+  input.input-style,
+  select.input-style {
+    height: var(--my-input-height);
+  }
+
+  .gradient {
+    background: linear-gradient(
+      to bottom,
+      var(--my-background-gradient-color) 0%,
+      var(--my-background-color) 100%
+    );
+  }
+
+  /* Hover for input, area, select */
+  .input-style:hover {
+    border-color: var(--my-border-color-hover);
+  }
+
+  /* Fokus for input, area => select with own css.? */
+  .input-style:focus {
+    border: var(--my-border-color-focus) 2px solid;
+    outline: 0;
+  }
+
+  /* error element style for input, area => select has own css.? */
+  .error .input-style {
+    border: 1px solid var(--my-error-color);
+    color: var(--my-error-color);
+    background-color: var(--my-error-background-color);
+  }
+
+  .error .gradient {
+    background: linear-gradient(
+      to bottom,
+      var(--my-background-gradient-color) 10%,
+      #f5979b 100%
+    );
+  }
+
+  /* Error Focus for input, area, select */
+  .error .input-style:focus {
+    border: 2px solid var(--my-error-color);
+  }
+
+  /*
+     * Disabled style for input, select, area
+     */
+  /* Disabled for input, area => select with own css.? */
+  .input-style[disabled] {
+    /* TODO: Angaben nach oben ziehen */
+    --squi-input-placeholder-color: rgba(
+      var(--raw-game-color-light-lighter),
+      1
+    );
+    border-color: #aaa;
+    color: var(--raw-game-color-light-lightest, #7a7777);
+    background-color: #d3d2d2;
+    text-shadow: 2px 2px 3px var(--raw-game-color-dark-darker, #999);
+  }
+
+  .gradient[disabled] {
+    background: linear-gradient(to bottom, #ebebeb 0%, #999 100%);
+  }
+
+  .input-style[disabled]:hover {
+    border-color: #6e6c6c;
+  }
+
+  /* Placeholder color */
+  ::placeholder {
+    color: var(--squi-input-placeholder-color, #474747);
+  }
+  :-ms-input-placeholder {
+    color: var(--squi-input-placeholder-color, #474747);
+  }
+  ::-ms-input-placeholder {
+    color: var(--squi-input-placeholder-color, #474747);
+  }
+`;

package/src/squi-base-ui-input.js

@@ -0,0 +1,68 @@
+/**
+@license squi-licence
+*/
+
+import { SquiBaseUI } from './squi-base-ui.js';
+
+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 class SquiBaseUIInput extends SquiBaseUI {
+
+    static get properties() {
+        return {            
+            gradient: { type: Boolean },        // true for gradient background
+            disabled: { type: Boolean },        // disabled flag for element
+            readonly: { type: Boolean },        // readonly flag for element
+            valueName: { type: String },
+            defaultValue: { type: String },     // default value for input element (used for reset) TODO: Das hier ggf. automatisch mit erstem gesetzten Wert füllen?
+            label: { type: String },            // label text for input
+            value: {type: String},              // current value (set from outside) TODO: Typ (Object, Number, Txt, Bool...)
+            errorMsg: {type: String},           // 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            
+        };
+    }
+
+    constructor() {
+        super();        
+        this.gradient = false;
+        this.disabled = false;
+        this.readonly = false;
+        this.defaultValue = '';
+        this.label = '';
+        this.value = '';
+        this.errorMsg = '';        
+        this._inputType = -1;
+        this._input = {};
+        this.valueName = '';
+    }    
+
+    // Test: Clear input with value => Dann in BasisKlasse und alle leiten von Basis UI Element ab
+    clear() {
+        this.value = '';
+        this._input.value = this.value;
+    }
+
+    // Test: Reset input with value
+    reset() {        
+        this.value = this.defaultValue || '';
+        this._input.value = this.value;
+    }
+    
+    /*
+    get value() {
+        return this._value;
+    }
+
+    set value(newValue) {
+        console.info("Meine Werte vor Set _value, input.value, newValue: ", this._value,  this._input.value, newValue);
+        this._value = newValue;
+        this._input.value = newValue;        
+        console.info("Meine Werte nach Set: ", this._value,  this._input.value, newValue);
+    }
+    */
+}

package/src/squi-base-ui.js

@@ -0,0 +1,14 @@
+/**
+@license squi-licence
+*/
+
+import { LitElement } from 'lit';
+
+export class SquiBaseUI extends LitElement {
+
+    static get properties() {
+        return {
+        };
+	}
+
+}

package/src/squi-button-group.js

@@ -0,0 +1,52 @@
+import { html, css , LitElement } from 'lit';
+
+import { SharedInputStyles } from './shared-input-styles.js';
+import './squi-button.js';
+
+
+class SquiButtonGroup extends LitElement {
+
+  static get styles() {
+    return [  
+      // Import Shared Styles for defined styles vars
+      SharedInputStyles,
+      css`      
+
+      :host {
+        --my-justify-prop: var(--justify-prop, space-around);        
+
+        
+      }
+
+      .button-group {
+        display: flex;           
+        justify-content: var(--my-justify-prop);       
+      }
+
+    `];
+  }
+
+  static get properties() {
+    return {                  
+      buttons: {type: Array}
+    };
+  }
+
+  constructor() {
+    super();  
+    this.buttons = []  
+  }
+
+  render() {
+    return html`
+    <div class="button-group">
+      ${this.buttons.map(entry => html`
+        <squi-button text="${entry.text}" style="visibility: ${entry.visibility};"></squi-button>
+      `)}
+    </div>
+    `;
+  }
+
+}
+
+customElements.define('squi-button-group', SquiButtonGroup);

package/src/squi-button.js

@@ -0,0 +1,187 @@
+import { html, css , LitElement } from 'lit';
+
+import { SharedInputStyles } from './shared-input-styles.js';
+
+export class SquiButton extends LitElement {
+
+  static get styles() {
+    return [  
+      // Import Shared Styles for defined styles vars
+      SharedInputStyles,
+      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);
+
+        display: block;              
+        /*        
+        height: 100%;         
+        width: 100%; => Ohne diese Angabe eht die % Angaben icht
+        */                        
+      }
+      
+      /* 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;
+        /*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;
+      }      
+
+      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 {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        white-space: nowrap;
+        --squi-icon-fill: var(--icon-fill-light);
+        --squi-icon-fill-hover: var(--icon-fill-light);
+      }
+      
+      .button-icon:not([disabled]) {
+        --squi-icon-fill: var(--app-primary-color);
+        --squi-icon-fill-hover: var(--app-primary-color-dark);
+      }
+
+      .button-icon squi-icon {
+        max-width: 1.25rem;
+        height: 1.25rem;
+        width: 1.25rem;
+        margin: 0 .15rem;
+      }
+
+      .button-icon.small squi-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 squi-icon,    
+      .button-icon:hover svg {
+          fill: var(--app-primary-color);
+      }            
+
+      @media (min-width: 580px) {        
+        .button-icon squi-icon {
+            margin: 0 .5rem;
+        }        
+        .button-icon.small squi-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() {
+    // 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>`;
+  }
+
+}