@progressive-development/pd-forms 0.0.4 → 0.0.6

package/src/squi-checkbox.js

@@ -0,0 +1,290 @@
+import { html, css } from "lit";
+import { classMap } from 'lit/directives/class-map.js';
+
+// import {GestureEventListeners} from '@polymer/polymer/lib/mixins/gesture-event-listeners.js';
+
+import '@progressive-development/pd-icon';
+import { SquiBaseUIInput, INPUT_TYPE_CHECK } from "./squi-base-ui-input.js";
+
+
+// import { installMediaQueryWatcher } from 'pwa-helpers/media-query.js';
+
+export class SquiCheckbox extends SquiBaseUIInput {
+  static get properties() {
+    return {      
+      hasInner: { type: Boolean },
+      // _panX: {type: Number},
+      // _panEnd: {type: Boolean},
+      isSwitch: { type: Boolean }
+    };
+  }
+
+  constructor() {
+    super();
+    this._inputType = INPUT_TYPE_CHECK;    
+    // this._panEnd = false;
+    // this._panX = 0;
+  }
+
+  static get styles() {
+    return [
+      // SharedInputStyles,
+      css`
+      :host {        
+
+        --my-icon-fill: var(--app-primary-color, #177E89); 
+        --my-icon-active-fill: var(--app-primary-color, #177E89); 
+        --my-icon-bg-color: var(--app-primary-color, #fefefe) ; 
+        --my-icon-bg-active-color: var(--app-primary-color, #fefefe); 
+
+        --my-bg-color: var(--squi-bg-color, #177E89);
+        --my-txt-color: var(--squi-bg-color, black);
+
+        --my-font: var(--squi-font-2, Montserrat);
+
+        /* ref copy from shared styles...*/
+        --my-error-color: var(--squi-error-color, #d6242d);        
+        --my-error-background-color: var(--squi-error-background-color, #f6d4d4a1);   
+        --my-border-radius: var(--squi-border-radius, 0rem);
+
+
+
+        /* TODO vars used in squi-icon */
+        --squi-checkbox-checked-color: var(--my-primary);
+        --squi-checkbox-unchecked-color: var(--my-ligth);
+        --squi-checkbox-bg: var(--my-dark);
+        --squi-checkbox-unchecked-bg: var(--my-dark);
+        --squi-checkbox-label-color: var(--my-primary);
+
+        --squi-checkbox-label-disabled-color:  var(--app-copy-color, #303030);
+
+        /* Checkbox squi-icon */
+        --squi-icon-fill: var(--my-icon-bg-color);
+        --squi-icon-bg: var(--my-icon-fill);
+        --squi-icon-fill-active: var(--my-icon-bg-active-color);
+        --squi-icon-bg-active: var(--my-icon-active-fill);
+
+        display: inline-block;
+        font-size: .8rem;
+      }
+      /* Switch squi-icon */
+      :host([isSwitch]) {
+          --squi-icon-fill: var(--my-icon-fill);
+          --squi-icon-bg: var(--my-icon-bg-color);
+          --squi-icon-fill-active: var(--my-icon-active-fill);
+          --squi-icon-bg-active: var(--my-icon-bg-active-color);
+      }
+      div {
+        display: flex;
+        align-items: center;
+        cursor: pointer;
+      }
+      div.disabled {
+        opacity: 0.5;
+        cursor: auto;
+      }
+      div.readonly {
+        cursor: auto;
+      }
+      .checkbox {
+        display: flex;
+        border-radius: 4px;
+        line-height: 0;
+        align-items: center;
+        justify-content: center;
+      }
+      .checkbox squi-icon {
+        margin: .25rem;
+      }
+      .label {
+        margin-left: .5rem;        
+        color: var(--my-txt-color); 
+        font-family: var(--my-font);       
+      }
+      .disabled .label {
+        color: var(--squi-checkbox-label-disabled-color, #6e6c6c);
+      }
+      .readonly .label {
+        color: var(--app-copy-color, var(--squi-checkbox-label-color, #303030));
+      }
+      /* Switch styles */
+      .switch {
+        height: var(--my-input-height); /* noch ohne effekt?*/
+        position: relative;
+        outline: 0;
+        -webkit-user-select: none;
+        -moz-user-select: none;
+        -ms-user-select: none;
+        user-select: none;
+    }
+    .switch-paddle {
+      display: inline-block;
+      vertical-align: baseline;
+      margin: 0;
+      position: relative;
+      min-width: 4rem;
+      max-width: 4rem;
+      height: 2rem;
+      border-radius: 0;
+      background: var(--my-bg-color);
+      font-weight: inherit;
+      color: inherit;
+      cursor: pointer;
+  }
+  .disabled .switch-paddle {
+    cursor: auto;
+  }
+  .readonly .switch-paddle {
+    cursor: auto;
+    max-width: 2rem;
+    min-width: 2rem;
+    background: none;
+
+    --squi-icon-bg: transparent;
+    --squi-icon-fill: var(--card-dark-red);
+    --squi-icon-fill-hover: var(--squi-icon-fill);
+    --squi-icon-fill-active: var(--card-medium-green);
+  }
+  .readonly .isChecked.switch-paddle squi-icon {
+    transform: translate3d(0, 0, 0);
+    left: 0.25rem;
+  }
+  .switch-paddle squi-icon {
+      position: absolute;
+      top: 0.25rem;
+      left: 0.25rem;
+      display: block;
+      width: 1.5rem;
+      height: 1.5rem;
+      -webkit-transform: translate3d(0, 0, 0);
+      transform: translate3d(0, 0, 0);
+      border-radius: 3px;
+      -webkit-transition: all 0.25s ease-out;
+      transition: all 0.25s ease-out;
+      content: '';
+  }
+  .isChecked.switch-paddle squi-icon {
+      left: 2.25rem;
+  }
+
+  /* Copy from SharedINputStyles, not used for select => ref, or exclude error styles and reuse oder something... */
+  .error-box {
+    display: block;
+    color: var(--my-error-color);
+    background: var(--my-error-background-color);
+    border: 1px solid var(--my-error-color);
+    border-radius: var(--my-border-radius);
+  }
+
+  /* Error Msg Div for input, select, area */
+  .error-msg {          
+    padding:0.25rem;        
+    white-space: nowrap;      
+    font-size: .8rem;      
+    max-width: var(--squi-input-width, 250px);        
+  }
+    
+  @media (min-width: 580px) {
+    :host {
+      font-size: 1rem;
+    }
+  }
+    `];
+  }
+
+  firstUpdated() {
+    this.hasInner = !!this.innerHTML.trim().length;
+    // installMediaQueryWatcher(`(min-width: 780px)`, (matches) => matches ? this : this._updateScale(1.5));
+    // const paddle = el.shadowRoot.querySelectorAll('.switch-paddle');
+    // this.isSwitch ? Gestures.addListener(this, 'track', this.handleTrack.bind(this)) : '';
+  }
+
+  render() {
+    const checked = (this.value === 'true');
+    
+    // eslint-disable-next-line lit-a11y/click-events-have-key-events
+    return html`<div @click="${this.onClick}" class="${classMap({'disabled': this.disabled, 'switch': this.isSwitch, 'readonly': this.readonly})}">
+        <a href="#" @click="${this.linkClick}" @keypress="${this.onKeyPress}"
+           class="${classMap({'switch-paddle': this.isSwitch, 'checkbox': !this.isSwitch, 'isChecked': checked, 'isUnchecked': !checked})}">
+           <squi-icon icon="checkBox" class="${classMap({'switch': this.isSwitch, 'checkBox': !this.isSwitch})}" ?activeIcon="${checked}"></squi-icon>           
+        </a>
+        ${this.hasInner
+          ? html`<span class="label">
+              <slot></slot>
+            </span>`
+          : ""}        
+      </div>
+      ${this.errorMsg.length > 0 ? html`
+        <div class="error-box error">
+          <span class="error-msg">${this.errorMsg}</span>
+        </div>
+      ` : ''}
+    `;
+  }
+
+  /*
+  update(changedProperties) {
+    //let { deltaX = 0, isFinal = false } = this._panX;
+    let isFinal = this._panEnd;
+    let deltaX = this._panX || 0;
+    //console.log(this._panData);
+
+    // Guard against an infinite loop by looking for index.
+    if (isFinal) {
+        console.log('deltaX', deltaX);
+        // TODO 250 half screen size?
+        if ( deltaX > 100) {
+          this.onClick(true);
+        } else if(deltaX < -100){
+          this.onClick(false);
+        }
+        this._panEnd = false;
+    }
+    // We don't want the latent deltaX when releasing a pan.
+    deltaX = (isFinal ? 0 : deltaX);
+
+    super.update(changedProperties);
+  }
+
+  handleTrack(e) {
+    switch(e.detail.state) {
+        case 'start':
+          //this.message = 'Tracking started!';
+          break;
+        case 'track':
+          //this.message = 'Tracking in progress... ' + e.detail.x + ', ' + e.detail.y;
+          break;
+        case 'end':
+          this._panX = e.detail.dx;
+          this._panEnd = true;
+          break;
+      }
+  }
+*/
+  onClick() {
+    if (this.disabled || this.readonly) {
+      return;
+    }
+    const checked = (this.value === 'true');
+    this.value = checked ? 'false' : 'true';
+    this.dispatchEvent(
+      new CustomEvent("checkbox-changed", {
+        bubbles: true,
+        composed: true,
+        detail: {check: !checked, name: this.valueName},
+      })
+    );
+  }
+
+  onKeyPress(e) {
+    e.preventDefault();
+    if (e.keyCode === 32 || e.code === "Space") {
+      this.onClick();
+    }
+  }
+  
+  // eslint-disable-next-line class-methods-use-this
+  linkClick(e) {
+    e.preventDefault();
+  }
+}

package/src/squi-form-container.js

@@ -0,0 +1,51 @@
+/**
+ * @license
+ * Copyright (c) 2019 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 {LitElement, html, css} from 'lit';
+
+/**
+ * An example element.
+ *
+ * @slot - This element has a slot
+ * @csspart button - The button
+ */
+export class SquiFormContainer extends LitElement {
+
+  static get styles() {
+    return css`
+    :host {
+        display: flex;        
+        flex-direction: column;                                 
+        align-items: left;        
+        gap: 20px;
+      }
+
+    `;
+  }
+
+  static get properties() {
+    return {
+      // not needed at the moment
+    };
+  }
+
+  render() {
+    return html`  
+      <form>
+        <slot></slot>      
+      </form>    
+    `;
+  }
+
+}

package/src/squi-form-row.js

@@ -0,0 +1,103 @@
+/**
+ * @license
+ * Copyright (c) 2019 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 {LitElement, html, css} from 'lit';
+
+/**
+ * An example element.
+ *
+ * @slot - This element has a slot
+ * @csspart button - The button
+ */
+export class SquiFormRow extends LitElement {
+
+  static get styles() {
+    return css`
+    :host {
+      
+      /* Define size for row, depends on media queries */
+      --my-row-width: 800px;
+      --my-gap: 20px;
+      display: flex;
+      flex: 1 1 100%;
+      /*margin: 0 0 .5rem 0;*/
+      box-sizing: border-box;
+      min-width: var(--my-row-width);        
+      max-width: 100%;      
+      gap: var(--my-gap);           
+      align-items: flex-start;           
+
+      padding-top: var(--row-padding-top, 0px);
+    }
+
+    ::slotted(.quarter1) {      
+      --squi-input-width: calc(var(--my-row-width) * 0.25  - (var(--my-gap) * 0.75));
+      
+    }        
+
+    ::slotted(.quarter2) {      
+      --squi-input-width: calc((var(--my-row-width) * 0.5) - (var(--my-gap) / 2));          
+      
+    }        
+
+    ::slotted(.quarter3) {      
+      --squi-input-width: calc(var(--my-row-width) * 0.75  - (var(--my-gap) * 0.25));          
+    }    
+    /* Area is longer? Scrollbar? */
+    ::slotted(.quarter3-area) {
+      --squi-input-width: calc((var(--my-row-width) - 22px) * 0.75  - (var(--my-gap) * 0.25));          
+    }
+
+    ::slotted(.quarter4) {
+      --squi-input-width: var(--my-row-width);                
+    }   
+    /* Area is longer? Scrollbar? */
+    ::slotted(.quarter4-area) {
+      --squi-input-width: calc(var(--my-row-width) - 22px);                
+    }
+
+    @media (max-width: 930px) {            
+      :host {
+        --my-row-width: 600px;        
+      }      
+    }
+    @media (max-width: 650px) {            
+      :host {
+        --my-row-width: 400px;        
+        --my-gap: 10px;
+      }
+    }
+    @media (max-width: 450px) {
+      :host {
+        --my-row-width: 300px;        
+        --my-gap: 8px;
+      }
+    }
+
+    `;
+  }
+
+  static get properties() {
+    return {
+      // not needed at the moment
+    };
+  }
+
+  render() {
+    return html`      
+        <slot></slot>      
+    `;
+  }
+
+}

package/src/squi-input-area.js

@@ -0,0 +1,185 @@
+import { html, css } from 'lit';
+import { classMap } from 'lit/directives/class-map';
+import { SharedInputStyles } from './shared-input-styles.js';
+
+import { SquiBaseUIInput, INPUT_TYPE_AREA } from './squi-base-ui-input.js';
+
+
+import '@progressive-development/pd-icon/pd-icon.js';
+
+// https://github.com/Victor-Bernabe/lit-input
+// https://levelup.gitconnected.com/build-a-material-like-input-web-component-using-litelement-20e9e0d203b6
+/**
+ * Web component to input text implemented with LitElement.
+ *
+ * ### Styling
+ *
+ * All custom properties should start with `--squi-input`.
+ *
+ * Font and icon size will scale automatically with `squi-input`'s height.
+ *
+ * Custom property | Description | Default
+ * ----------------|-------------|--------
+ * `--squi-input-width` | Width | `250px`
+ * `--my-input-height` | Height | `30px`
+ * `--squi-input-border` | Border | `1px solid black`
+ * `--squi-input-border-focus` | Border when focused | `1px solid #4d90fe`
+ * `--squi-input-background-color` | Background color | `white`
+ * `--squi-input-font-size` | Font size | `calc(var(--my-input-height) / 1.8)`
+ * `--squi-input-text-color` | Text color | `inherit`
+ * `--squi-input-placeholder-color` | Placeholder text color | `#a0a0a0`
+ * `--squi-input-icon-fill-color` | Icon fill color | `currentcolor`
+ * `--squi-input-icon-stroke-color` | Icon stroke color | `none`
+ *
+ * ### Icon and text alignment
+ *
+ * The icon inside `squi-input` is hidden by default. To show it, set the attribute `icon-right` or `icon-left`.
+ *
+ *     <squi-input icon-left></squi-input>
+ *     <squi-input icon-right></squi-input>
+ *
+ *     <squi-input icon-left .icon="${'hardware:headset'}"></squi-input>
+ *
+ * Text can be left or right aligned. Default is left alignment.
+ *
+ *     <squi-input text-right></squi-input>
+ *     <squi-input text-left></squi-input>
+ */
+export class SquiInputArea extends SquiBaseUIInput {
+
+  /**
+   * Fired when `squi-input-area` has focus and the user press `Enter` key.
+   * @event enter-pressed
+   */
+
+  /**
+   * Fired when `squi-input-area` has focus and the user press any key except `Enter`.
+   * @event key-pressed
+   */
+
+  /**
+   * Fire when the `squi-input-area` loses focus.
+   * @event focus-lost
+   */
+
+  /**
+   * Fire when the icon inside `squi-input-area` is clicked.
+   * @event icon-clicked
+   */
+
+  static get styles() {
+    return [      
+      SharedInputStyles,
+      css`      
+        /* 10 py scroll border rigth? => overwrite*/
+        .input-style {
+            width: var(--squi-input-width, 240px);
+        }
+            
+    `];
+  }
+
+  static get properties() {
+    return {
+      /** Placeholder for `squi-input` initial text. */
+      placeHolder: { type: String },
+      /**
+       * Icon to be shown inside `squi-input`.
+       */
+      icon: { type: String },      
+      name: { type: String },      
+      rows: { type: Number },      
+      cols: { type: Number },      
+      minlength: { type: String },      
+      maxlength: { type: String }       // max length for field
+    };
+  }
+
+  constructor() {
+    super();
+    this._inputType = INPUT_TYPE_AREA;
+    this.placeHolder = '';
+    this.icon = 'toggleCollapse';    
+
+    this.maxlength = 500;
+    this.name = '';
+    this.rows = 2;    
+    this.value = '';
+  }
+  
+  render() {
+    return html`
+    <label for="${this.id}InputArea">${this.label}</label>
+    <div class="input ${classMap({'error': this.errorMsg.length > 0})}">
+      <squi-icon icon="toggleCollapse" 
+        @click="${this._onIconClick}"></squi-icon>
+      <textarea
+        id="${this.id}InputArea"        
+        class="input-style ${this.gradient ? 'gradient' : ''}"
+        rows="${this.rows}"
+        cols="${this.cols}"                
+        placeholder="${this.placeHolder}"
+        ?disabled="${this.disabled}"
+        ?readonly="${this.readonly}"        
+        @keyup="${this._onKeyUp}"
+        @blur="${this._onBlur}">${this.value}</textarea>
+        <!-- Sollte erst Clientseitig im Input validiert werden. Meldung verschwindet erst beim Submit nicht mehr zeitgemäß-->
+       ${this.errorMsg.length > 0 ? html`<span class="error-msg">${this.errorMsg}</span>` : ''}
+    </div>
+    `;
+  }
+
+  firstUpdated() {
+    // Save input reference for performance (bind html element to class property)
+    this._input = this.shadowRoot.querySelector('textarea');
+  }
+
+  _onKeyUp(event) {
+
+    // set value (tbd überdenken)
+    this.value = this._input.value;
+
+    // If Enter key pressed, fire 'enter-pressed'
+    if(event.keyCode === 13) {   
+      this.dispatchEvent(new CustomEvent('enter-pressed', {
+        detail: {
+          value: this._input.value
+        },
+        composed: true,
+        bubbles: true
+      }));
+      event.preventDefault();
+    } else {
+      // If any other key, fire 'key-pressed'
+      // this.errorMsg = ''; change with handler now...
+      this.dispatchEvent(new CustomEvent('key-pressed', {
+        detail: {
+          value: this._input.value,
+          name: this.valueName
+        },
+        composed: true,
+        bubbles: true
+      }));
+    }
+  }
+
+  _onBlur() {
+    this.dispatchEvent(new CustomEvent('focus-lost', {
+      detail: {
+        value: this._input.value
+      },
+      composed: true,
+      bubbles: true
+    }));
+  }
+
+  _onIconClick() {
+    this.dispatchEvent(new CustomEvent('icon-clicked', {
+      detail: {
+        value: this._input.value
+      },
+      composed: true,
+      bubbles: true
+    }));
+  }
+}