@progressive-development/pd-forms 0.0.57 → 0.0.59

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

package/src/PdFormContainer.js

@@ -25,11 +25,17 @@ export class PdFormContainer extends PdBaseUI {
         gap: 20px;
       }
       .hinweis {
-        background-color:#ffaa71;
+        font-family: 'Poppins', serif;
+        font-size:0.95rem;
+        border-left:4px solid #cc2029;
+        border-right:4px solid #cc2029;
+        border-top:1px solid #cc2029;
+        border-bottom:1px solid #cc2029;
+        background-color:#ffe8e8;
         padding:10px;
         color:#58585a;
-        border-radius: 1rem;
-        -moz-border-radius: 1rem;
+        border-radius: 0.5rem;
+        -moz-border-radius: 0.5rem;
         width:50%;
         min-width:300px;
       }
@@ -39,16 +45,9 @@ export class PdFormContainer extends PdBaseUI {
   static get properties() {
     return {
       requiredFieldInfo: { type: Boolean},
-      locale: { type: String }
     };
   }
 
-  updated(changedProperties) {
-    if (changedProperties.has("locale") && this.locale) {
-        // setLocale(this.locale);
-      }
-  }
-
   firstUpdated() {
     // add validation event listener
     this.addEventListener('validate-form', this._validateForm);

package/src/PdSelect.js

@@ -88,6 +88,7 @@ export class PdSelect extends PdBaseUIInput {
           -moz-appearance: none;
           -webkit-appearance: none;
           appearance: none;
+          color: var(--my-input-placeholder-color);
 
           /* 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');
@@ -120,10 +121,13 @@ export class PdSelect extends PdBaseUIInput {
         .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 {

package/src/shared-input-styles.js

@@ -30,19 +30,20 @@ export const SharedInputStyles = css`
     --my-lighter-background-color: var(--squi-lighter-color, #8caed8a1);
     --my-darker-background-color: var(--squi-darker-color, #012e649f);
     --my-background-gradient-color: var(--squi-third-color, #8caed8a1);
-    --my-error-background-color: var(--squi-error-background-color, #f6d4d4a1);
+    --my-error-background-color: var(--squi-error-background-color, #ffe8e8);
 
     /* Error colors for Elements Select, Input, Input Area */
-    --my-error-color: var(--squi-error-color, #d6242d);
+    --my-error-color: var(--squi-error-color, #cc2029);
 
     /* Text color input Elements Select, Input, Input Area */
     --my-text-color: var(--squi-text-color, #000000);
     --my-label-color: var(--squi-text-lable-color, #58585a);
+    --my-input-placeholder-color: var(--squi-input-placeholder-color:#474747);
+
     --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 */
@@ -167,7 +168,7 @@ export const SharedInputStyles = css`
 
   /* Fokus for input, area => select with own css.? */
   .input-style:focus {
-    border: var(--my-border-color-focus) 2px solid;
+    border: var(--my-border-color-focus) 3px solid;
     outline: 0;
   }
 

package/stories/01_index.stories.js

@@ -82,7 +82,7 @@ return html`
     <h3>Defaults Inputs with labels</h3>
     <div
       style="display: flex; justify-content: space-between; max-width: 800px"
-    >     
+    >
       <pd-select
         id="testId1"
         ?gradient="${gradient}"
@@ -100,8 +100,8 @@ return html`
         ?gradient="${gradient}"
         style="${style}"
         label="Input Area Label"
-      ></pd-input-area>      
-    </div>    
+      ></pd-input-area>
+    </div>
 
     <div
       style="display: flex; justify-content: space-between; max-width: 800px"