@progressive-development/pd-forms 0.2.7 → 0.2.8

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.8",
   "main": "index.js",
   "module": "index.js",
   "scripts": {

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/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/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>