@progressive-development/pd-forms 0.0.60 → 0.0.61

package/src/PdSelect.js

@@ -4,13 +4,12 @@
  */
 
 import { html, css } from 'lit';
-import { classMap } from 'lit/directives/class-map.js';
-import { SharedInputStyles } from './shared-input-styles.js';
-
-import { PdBaseUIInput, INPUT_TYPE_SELECT } from './PdBaseUiInput.js';
 
 import '@progressive-development/pd-icon/pd-icon.js';
 
+import { INPUT_TYPE_SELECT } from './PdBaseUiInput.js';
+import { PdBaseInputElement } from './PdBaseInputElement.js';
+
 // https://github.com/Victor-Bernabe/lit-input
 // https://levelup.gitconnected.com/build-a-material-like-input-web-component-using-litelement-20e9e0d203b6
 /**
@@ -24,7 +23,7 @@ import '@progressive-development/pd-icon/pd-icon.js';
  *
  * Custom property | Description | Default
  * ----------------|-------------|--------
- * `--squi-input-width` | Width | `250px`
+ * `--pd-input-field-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`
@@ -49,35 +48,11 @@ import '@progressive-development/pd-icon/pd-icon.js';
  *     <pd-input text-right></pd-input>
  *     <pd-input text-left></pd-input>
  */
-export class PdSelect extends PdBaseUIInput {
-  /**
-   * Fired when `squi-input` has focus and the user press `Enter` key.
-   * @event enter-pressed
-   */
-
-  /**
-   * Fired when `squi-input` has focus and the user press any key except `Enter`.
-   * @event key-pressed
-   */
-
-  /**
-   * Fired when value is changed
-   * @event change-value
-   */
-
-  /**
-   * Fire when the `squi-input` loses focus.
-   * @event focus-lost
-   */
-
-  /**
-   * Fire when the icon inside `squi-input` is clicked.
-   * @event icon-clicked
-   */
+export class PdSelect extends PdBaseInputElement {
 
   static get styles() {
     return [
-      SharedInputStyles,
+      PdBaseInputElement.styles,
       css`
         /* Select style */
         /* https://css-tricks.com/styling-a-select-like-its-2019/
@@ -88,19 +63,30 @@ export class PdSelect extends PdBaseUIInput {
           -moz-appearance: none;
           -webkit-appearance: none;
           appearance: none;
-          color: var(--my-input-placeholder-color);
+          padding: 5px;
 
-          /* Define color */
           background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E');
           background-repeat: no-repeat, repeat;
           /* arrow icon position (1em from the right, 50% vertical) , then gradient position*/
           background-position: right 0.5em top 50%, 0 0;
           /* icon size, then gradient */
           background-size: 0.65em auto, 100%;
-
           max-width: 100%; /* useful when width is set to anything other than 100% */
         }
 
+        /* Hide arrow icon in IE browsers */
+        .select-css::-ms-expand {
+          display: none;
+        }
+
+        /* Set options to normal weight */
+        .select-css option {
+          font-weight: normal;
+          text-indent: 5px;
+        }
+
+        /* [aria-disabled='true'] */
+
         .gradient {
           /* Define color */
           background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'),
@@ -112,34 +98,6 @@ export class PdSelect extends PdBaseUIInput {
           background-color: var(--my-background-color);
         }
 
-        /* Hide arrow icon in IE browsers */
-        .select-css::-ms-expand {
-          display: none;
-        }
-
-        /* Focus style */
-        .select-css:focus {
-          border-color: var(--my-border-color-focus);
-          /* It'd be nice to use -webkit-focus-ring-color here but it doesn't work on box-shadow */
-          
-          /* Angaben nach MF DJK Umstellung entfernt
-          box-shadow: 0 0 1px 3px rgba(59, 153, 252, 0.7);
-          box-shadow: 0 0 0 3px -moz-mac-focusring;
-          color: #222;
-          outline: none;
-          */
-        }
-
-        .error .select-css {
-          background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22graytext%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E');
-          /* repeat instructions because of setted background in shared-styles */
-          background-repeat: no-repeat, repeat;
-          /* arrow icon position (1em from the right, 50% vertical) , then gradient position*/
-          background-position: right 0.5em top 50%, 0 0;
-          /* icon size, then gradient */
-          background-size: 0.65em auto, 100%;
-        }
-
         .error .gradient {
           background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22graytext%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'),
             linear-gradient(
@@ -155,42 +113,12 @@ export class PdSelect extends PdBaseUIInput {
           background-size: 0.65em auto, 100%;
           background-color: var(--my-error-background-color);
         }
-
-        /* Set options to normal weight */
-        .select-css option {
-          font-weight: normal;
-        }
-
-        /* Disabled styles */
-        .select-css:disabled,
-        .select-css[aria-disabled='true'] {
-          background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22graytext%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E');
-          /* repeat instructions because of setted background in shared-styles */
-          background-repeat: no-repeat, repeat;
-          /* arrow icon position (1em from the right, 50% vertical) , then gradient position*/
-          background-position: right 0.5em top 50%, 0 0;
-          /* icon size, then gradient */
-          background-size: 0.65em auto, 100%;
-        }
-
-        .gradient:disabled,
-        .gradient[aria-disabled='true'] {
-          background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22graytext%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'),
-            linear-gradient(to bottom, #ebebeb 0%, #999 100%);
-          /* repeat instructions because of setted background in shared-styles */
-          background-repeat: no-repeat, repeat;
-          /* arrow icon position (1em from the right, 50% vertical) , then gradient position*/
-          background-position: right 0.5em top 50%, 0 0;
-          /* icon size, then gradient */
-          background-size: 0.65em auto, 100%;
-        }
       `,
     ];
   }
 
   static get properties() {
     return {
-      icon: { type: String },
       values: { type: Array },
     };
   }
@@ -198,24 +126,22 @@ export class PdSelect extends PdBaseUIInput {
   constructor() {
     super();
     this._inputType = INPUT_TYPE_SELECT;
-    this.icon = 'toggleCollapse';
     this.values = [];
   }
 
   render() {
+    const selectId = `${this.id}Select`;
     return html`
-      <label for="${this.id}Select">${this.label}${this.required && this.label ? this.defaultRequiredChar : ''}</label>
-      <div class="input ${classMap({ error: this.errorMsg.length > 0 })}">
-        <pd-icon
-          icon="toggleCollapse"
-          @click="${this._onIconClick}"
-        ></pd-icon>
+      ${this._renderLabel(selectId)}
+      <div class="input ${this.errorMsg.length > 0 ? 'error' : ''}">
         <select
-          id="${this.id}Select"
-          class="select-css input-style ${this.gradient ? 'gradient' : ''}"
+          id="${selectId}"
+          class="input-style select-css ${this.gradient ? 'gradient' : ''}"
           ?disabled="${this.disabled}"
-          @change="${this._onChange}"
-          @keyup="${this._onKeyUp}"
+          name="${this.autoCompleteName}"
+          autocomplete=${this.autoCompleteName}
+          @change="${this._onKeyUp}"
+          @keyup="${this._onSelectKeyUp}"
           @blur="${this._onBlur}"
         >
           ${this.values.map(
@@ -232,97 +158,17 @@ export class PdSelect extends PdBaseUIInput {
             `
           )}
         </select>
-        <!-- 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>
+      ${this._renderErrorMsg()}
     `;
   }
 
-  firstUpdated() {
-    // Save input reference for performance (bind html element to class property)
-    this._input = this.shadowRoot.querySelector('select');
-  }
-
-  _onKeyUp(event) {
-    // set value (tbd überdenken)
-    this.value = this._input.value;
-
-    // If Enter key pressed, fire 'enter-pressed'
-    // eslint-disable-next-line eqeqeq
-    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.dispatchEvent(
-        new CustomEvent('key-pressed', {
-          detail: {
-            value: this._input.value,
-          },
-          composed: true,
-          bubbles: true,
-        })
-      );
-    }
-  }
-
-  _onChange() {
-    this.value = this._input.value;
-    
-    this.dispatchEvent(
-      new CustomEvent('validate-form', {
-        detail: {
-          singleElement: this,              
-          errorMap: new Map()
-        },
-        composed: true,
-        bubbles: true,
-      })
-    );
-
-    this.dispatchEvent(
-      new CustomEvent('change-value', {
-        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,
-      })
-    );
+  /**
+   * At the moment specific for select.
+   */
+  // eslint-disable-next-line class-methods-use-this
+  _onSelectKeyUp() {    
+    // this._handleChangedValue(this._input.value, event, true);
   }
 
-  _onIconClick() {
-    this.dispatchEvent(
-      new CustomEvent('icon-clicked', {
-        detail: {
-          value: this._input.value,
-        },
-        composed: true,
-        bubbles: true,
-      })
-    );
-  }
 }

package/src/shared-global-styles.js

@@ -0,0 +1,38 @@
+/**
+ * @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, 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-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-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;
+  }
+
+`;

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

@@ -0,0 +1,147 @@
+/**
+ * @license
+ * Copyright (c) 2021 PD Progressive Development UG. All rights reserved.
+ */
+
+import { css } from 'lit';
+
+/**
+ * Shared styles for pd-input, pd-input-area and pd-select.
+ */
+export const SharedInputFieldStyles = css`
+
+  /* Describe input div (with icon) around input/select/area element */  
+  .input {
+    display: inline-block;
+    /*position: relative; Prüfen: Wenn das an ist, felder über scroll-menu?*/
+    /* pd-icon smaller than input 
+    --pd-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); */
+  }
+
+  /* check,not work at the moment => in any case left aligned */
+  :host([text-right]) > input {
+    text-align: right;
+  }
+  :host([text-left]) > input {
+    text-align: left;
+  }
+
+  /* 
+   * Class input style used for input, select and text-area element.
+   * Not use iput here => because of own select css... => Nachtrag: Aber ein paar allgemeine Angaben rausziehen
+   */
+  .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));
+    /*opacity: 80%;*/
+    color: var(--pd-input-field-font-col, 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));
+    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));
+    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));
+  }
+
+  /* Fokus for input, area => select with own css.? */
+  .input-style:focus {
+    border: var(--pd-input-field-border-focus, 2px solid var(--pd-default-color));
+    outline: 0;
+  }
+
+  /* Höhe soll nicht für Text Area gelten, daher ausgelagert (überschreibt sonst rows) */
+  input.input-style,
+  select.input-style {
+    height: var(--pd-input-field-height, 2.2rem);
+  }
+
+  /* Disabled for input, area => select with own css.? */
+  .input-style[disabled] {
+    opacity: 0.5;
+    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));
+  }
+
+  .input-style[readonly]:hover,
+  .input-style[disabled]:hover {
+    border-color: var(--pd-default-disabled-color);
+  }
+
+  /* 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));
+  }
+  
+  /* 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);
+  }
+
+  /* Error Focus for input, area, select */
+  .error .input-style:focus {
+    border: 2px solid var(--pd-default-error-color);
+  }
+
+  /* Placeholder color for input and input-area */
+  ::placeholder {
+    color: var(--pd-input-placeholder-color, #474747e4);
+  }
+  :-ms-input-placeholder {
+    color: var(--pd-input-placeholder-color, #474747e4);
+  }
+  ::-ms-input-placeholder {
+    color: var(--pd-input-placeholder-color, #474747e4);
+  }
+
+  /**
+   * Folgender Part noch nicht in benutzug, einbau wenn Icon integriert wird */
+ 
+  /* squi icon depends on input styles to fit inside */
+  pd-icon {
+    display: none;
+    position: absolute;
+    --pd-icon-height: var(--pd-icon-computed-size, 2rem);
+    --pd-icon-width: var(--pd-icon-computed-size, 2rem);
+    --pd-icon-fill-color: var(--squi-input-icon-fill-color, currentcolor);
+    --pd-icon-stroke-color: var(--squi-input-icon-stroke-color, none);
+  }
+  pd-icon:hover {
+    cursor: pointer;
+  }
+  /* Display icon if it's positioned */
+  :host([icon-right]) .input pd-icon {
+    display: inline-block;
+    right: 0;
+  }
+  :host([icon-left]) .input pd-icon {
+    display: inline-block;
+    left: 0;
+  }
+
+  /* Padding space for pd-icon => Noch input spezifisch? */
+  :host([icon-right]) > input {
+    padding-right: var(--my-input-height);
+  }
+  :host([icon-left]) > input {
+    padding-left: var(--my-input-height);
+  }
+ 
+
+`;