@progressive-development/pd-forms 0.2.7 → 0.2.9

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.2.7",
+  "version": "0.2.9",
   "main": "index.js",
   "module": "index.js",
   "scripts": {

package/pd-input-file.js

@@ -0,0 +1,3 @@
+import { PdInputFile } from './src/PdInputFile.js';
+
+window.customElements.define('pd-input-file', PdInputFile);

package/src/PdBaseInputElement.js

@@ -26,6 +26,7 @@ import {
   INPUT_TYPE_SELECT,
   INPUT_TYPE_TEXT,
   INPUT_TYPE_DATE,
+  INPUT_TYPE_FILE
 } from './PdBaseUiInput.js';
 
 import { SharedInputFieldStyles } from './shared-input-field-styles.js';
@@ -92,6 +93,7 @@ export class PdBaseInputElement extends PdBaseUIInput {
         return 'textarea';
       case INPUT_TYPE_SELECT:
         return 'select';
+      case INPUT_TYPE_FILE:
       case INPUT_TYPE_TEXT:
         return 'input';
       case INPUT_TYPE_DATE:

package/src/PdBaseUiInput.js

@@ -49,6 +49,7 @@ import '../pd-hover-box.js';
  export const INPUT_TYPE_AREA = 5;
  export const INPUT_TYPE_CHECK_GROUP = 6;
  export const INPUT_TYPE_DATE = 7;
+ export const INPUT_TYPE_FILE = 8;
 
  /**
   * Specific key codes for input events.

package/src/PdFormContainer.js

@@ -12,7 +12,7 @@
 import { html, css } from 'lit';
 import { msg } from '@lit/localize';
 
-import { INPUT_TYPE_RANGE } from './PdBaseUiInput.js';
+import { INPUT_TYPE_RANGE, INPUT_TYPE_SELECT } from './PdBaseUiInput.js';
 
 import { PdBaseUI } from './PdBaseUi.js';
 
@@ -114,7 +114,7 @@ export class PdFormContainer extends PdBaseUI {
     reqEl.forEach(el => {
       const tmpEl = el;
       if (!el.value || el.value === "" || el.value === "false" || 
-          (el._inputType === INPUT_TYPE_RANGE && el.value === '0')) {
+          (el._inputType === INPUT_TYPE_RANGE && el.value === '0') || (el._inputType === INPUT_TYPE_SELECT && el.value === 'UNDEF')) {
         const erMsg = el.requiredMsg || msg('Eingabe erforderlich',{desc: '#pd.form.field.required#'});
         if (!e.detail.singleElement || e.detail.singleElement === el) {
           tmpEl.errorMsg = erMsg;

package/src/PdInput.js

@@ -85,7 +85,7 @@ export class PdInput extends PdBaseInputElement {
     return html`
       ${this._renderLabel(inputId)}
       <div class="input ${this.errorMsg.length > 0 ? 'error' : ''}">
-        ${this.icon ? html`<pd-icon icon="${this.icon}" @click="${this._iconClicked}"></pd-icon>` : ''}
+        ${this.icon ? html`<pd-icon icon="${this.icon}" activeIcon @click="${this._iconClicked}"></pd-icon>` : ''}
         <input
           id="${inputId}"
           name="${this.name || this.valueName || this.autoCompleteName}"

package/src/PdInputFile.js

@@ -0,0 +1,111 @@
+/**
+ * @license
+ * Copyright (c) 2021 PD Progressive Development UG. All rights reserved.
+ */
+
+import { html, css } from 'lit';
+import '@progressive-development/pd-icon/pd-icon.js';
+
+import { INPUT_TYPE_FILE } 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
+/**
+ * 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
+ * ----------------|-------------|--------
+ * `--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`
+ * `--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`.
+ *
+ *     <pd-input icon-left></pd-input>
+ *     <pd-input icon-right></pd-input>
+ *
+ *     <pd-input icon-left .icon="${'hardware:headset'}"></pd-input>
+ *
+ * Text can be left or right aligned. Default is left alignment.
+ *
+ *     <pd-input text-right></pd-input>
+ *     <pd-input text-left></pd-input>
+ */
+export class PdInputFile extends PdBaseInputElement {
+
+  static get styles() {
+    return [
+      PdBaseInputElement.styles,
+      css`
+        * {
+          box-sizing: border-box;
+        }
+      `,
+    ];
+  }
+
+  static get properties() {
+    return {      
+      /**
+       * Icon to be shown inside `pd-input`.
+       */
+      icon: { type: String },      
+      accept: { type: String },      
+      maxlength: { type: String }, // max length for field,
+    };
+  }
+
+  constructor() {
+    super();
+    this._inputType = INPUT_TYPE_FILE;
+  }
+
+  render() {
+    const inputId = `${this.id}Input`;
+    return html`
+      ${this._renderLabel(inputId)}
+      <div class="input ${this.errorMsg.length > 0 ? 'error' : ''}">
+        ${this.icon ? html`<pd-icon icon="${this.icon}" activeIcon @click="${this._iconClicked}"></pd-icon>` : ''}
+        <input
+          id="${inputId}"
+          name="${this.name || this.valueName || this.autoCompleteName}"
+          class="input-style ${this.gradient ? 'gradient' : ''}"
+          type="file"
+          maxlength="${this.maxlength}"
+          accept="${this.accept}"
+          ?disabled="${this.disabled}"
+          @keyup="${this._onKeyUp}"
+          @blur="${this._onBlur}"
+          
+        />
+      </div>
+      ${this._renderErrorMsg()}
+    `;
+  }
+
+  _onKeyUp(e) {
+    super._onKeyUp(e);
+  }
+
+  _iconClicked() {
+    this.dispatchEvent(new CustomEvent("input-icon-click"))
+  }
+
+}

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

@@ -37,7 +37,7 @@ export const SharedInputFieldStyles = css`
   }
 
   :host([icon-left]) .input > input {
-    padding-left: calc((var(--pd-input-field-height, 2rem) * 0.85) + 5px);
+    padding-left: calc(var(--pd-input-field-height, 2rem) + 5px);
   }
 
   :host([icon-right]) .input pd-icon {
@@ -46,7 +46,7 @@ export const SharedInputFieldStyles = css`
   }
 
   :host([icon-right]) .input > input {    
-    padding-right: calc((var(--pd-input-field-height, 2rem) * 0.85) + 5px);
+    padding-right: calc(var(--pd-input-field-height, 2rem) + 5px);
   }
 
   /* relative hack => see comment above in .input class, do it only for icon fiels relative for the moment*/  
@@ -60,10 +60,10 @@ export const SharedInputFieldStyles = css`
   pd-icon {    
     display: none;
     position: absolute;
-    top: 5px;
-    --pd-icon-size: calc(var(--pd-input-field-height, 2rem) * 0.85);
-    --pd-icon-fill-color: var(--squi-input-icon-fill-color, currentcolor);
-    --pd-icon-stroke-color: var(--squi-input-icon-stroke-color, none);
+    --pd-icon-size: var(--pd-input-icon-size, calc(var(--pd-input-field-height, 2rem) * 0.9));
+    --pd-icon-col-active: var(--pd-input-icon-color, #edf7fd);
+    --pd-icon-stroke-col-active: var(--pd-input-icon-stroke-color, var(--pd-default-color));
+    top: 2px;
   }
 
   pd-icon:hover {

package/src/stories/form-container.stories.js

@@ -2,6 +2,7 @@ import { html } from 'lit';
 import '../../pd-form-container.js';
 import '../../pd-form-row.js';
 import '../../pd-input.js';
+import '../../pd-input-file.js';
 import '../../pd-range.js';
 
 export default {
@@ -24,7 +25,7 @@ function Template() {
     <pd-form-container id="testFormContainerId" requiredFieldInfo>
       <pd-form-row>
         <pd-input class="quarter2" id="test1Id" label="Label 1" required autoCompleteName="email"></pd-input>
-        <pd-input class="quarter2" id="test2Id" label="Label 2" required></pd-input>
+        <pd-input-file class="quarter2" id="test2Id" label="Label 2" required></pd-input-file>
       </pd-form-row>
       <pd-form-row>
         <pd-input class="quarter4" id="test3Id" label="Label 3" required></pd-input>

package/src/stories/input-file.stories.js

@@ -0,0 +1,111 @@
+import { html } from 'lit';
+import '../../pd-input-file.js';
+import { ICON_DATE } from '@progressive-development/pd-icon/src/PdIcon.js';
+
+export default {
+  title: 'PdForms/InputFile',
+  component: 'pd-input-file',
+  argTypes: {
+    primaryColor: { control: 'color' },
+    secondaryColor: { control: 'color' },
+    textColor: { control: 'color' },
+    highlightColor: { control: 'color' },
+    errorColor: { control: 'color' },
+    errorBackgroundColor: { control: 'color' },
+    borderRadius: { control: 'text' },
+    displayFont: { control: 'text' },
+    fontSize: { control: 'text' },
+  },
+};
+
+function Template({
+  primaryColor,
+  secondaryColor,
+  textColor,
+  highlightColor,
+  errorColor,
+  errorBackgroundColor,
+  borderRadius,
+  displayFont,
+  fontSize,
+  accept
+}) {
+  let style = '';
+  if (primaryColor) {
+    style += `--squi-primary-color:${primaryColor};`;
+  }
+  if (secondaryColor) {
+    style += `--squi-secondary-color:${secondaryColor};`;
+  }
+  if (textColor) {
+    style += `--squi-text-color:${textColor};`;
+  }
+  if (highlightColor) {
+    style += `--squi-highlight-color:${highlightColor};`;
+  }
+  if (errorColor) {
+    style += `--squi-error-color:${errorColor};`;
+  }
+  if (errorBackgroundColor) {
+    style += `--squi-error-background-color:${errorBackgroundColor};`;
+  }
+  if (borderRadius) {
+    style += `--squi-border-radius:${borderRadius};`;
+  }
+  if (displayFont) {
+    style += `--squi-display-font:${displayFont};`;
+  }
+  if (fontSize) {
+    style += `--squi-font-size:${fontSize};`;
+  }
+  return html`
+    <h3>Default Input</h3>
+    <pd-input-file id="test1Id" style="${style}"></pd-input-file>
+
+    <h3>Input with Icon</h3>
+    <pd-input-file
+      icon-right
+      id="testIconId"
+      icon="${ICON_DATE}"
+    ></pd-input-file>
+
+    <h3>Input with left Icon</h3>
+    <pd-input-file
+      icon-left
+      id="testIcon2Id"
+      icon="${ICON_DATE}"
+    ></pd-input-file>
+
+    <h3>Input with max lenth</h3>
+    <pd-input-file
+      id="test5Id"
+      maxlength="4"
+    ></pd-input-file>    
+
+    <h3>Input with accept</h3>
+    <pd-input-file
+      id="test5Id"
+      maxlength="4"
+      accept="${accept}"
+    ></pd-input-file>    
+
+    <h3>Input with label</h3>
+    <pd-input-file
+      id="test6Id"
+      label="Input Label 1"
+    ></pd-input-file>
+
+    <h3>Input with label - disabled</h3>
+    <pd-input-file
+      id="test7Id"
+      label="Input Label 1"
+      disabled
+    ></pd-input-file>
+
+  `;
+}
+
+export const InputFile = Template.bind({});
+InputFile.args = {
+  accept: "text/*"
+};

package/src/stories/input.stories.js

@@ -1,6 +1,6 @@
 import { html } from 'lit';
 import '../../pd-input.js';
-import { ICON_CAMERA } from '@progressive-development/pd-icon/src/PdIcon.js';
+import { ICON_CAMERA, ICON_DATE } from '@progressive-development/pd-icon/src/PdIcon.js';
 
 export default {
   title: 'PdForms/Input',
@@ -99,7 +99,7 @@ function Template({
       id="testRightTextId"  
       text-right
       icon-right
-      icon="${ICON_CAMERA}"      
+      icon="${ICON_DATE}"      
       value="Right Text"
     ></pd-input>
 
@@ -108,7 +108,7 @@ function Template({
       icon-right
       id="testIconId"
       value="Input value"
-      icon="${ICON_CAMERA}"
+      icon="${ICON_DATE}"
     ></pd-input>
 
     <h3>Big Input with left Icon</h3>
@@ -117,7 +117,7 @@ function Template({
       icon-left
       id="testIcon2Id"
       value="Input value"
-      icon="${ICON_CAMERA}"
+      icon="${ICON_DATE}"
     ></pd-input>
 
     <h3>Input with max lenth and size</h3>