@progressive-development/pd-forms 0.0.59 → 0.0.61

package/src/shared-input-styles.js

@@ -5,154 +5,44 @@
 
 import { css } from 'lit';
 
+/**
+ * Shared styles for all input elements:
+ * Used from pd-input, pd-select, pd-input-area, pd-range, pd-checkbox and pd-radio-group.
+ */
 export const SharedInputStyles = css`
-  :host {
-    /*
-        display: block;
-        box-sizing: border-box;
-        perspective: none;        
-        */
-
-    /* define color layout for elements depending on customizables vals:
-          squi-primary-color, squi-secondary-color, squi-text-color, squi-highlight-color, 
-          squi-border-radius, squi-error-color, squi-error-background-color, squi-display-font, squi-font-size
-        */
-
-    /* Border for input Elements Select, Input, Input Area */
-    --my-border-color: var(--squi-primary-color, #177e89);
-    --my-border-color-focus: var(--squi-primary-color, #177e89);
-    --my-border-color-hover: var(--squi-highlight-color, #ffc857);
-    --my-border-radius: var(--squi-border-radius, 0rem);
-
-    /* Background color input Elements Select, Input, Input Area */
-    --my-primary-color: var(--squi-primary-color, #177e89);
-    --my-background-color: var(--squi-secondary-color, #fefefe);
-    --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, #ffe8e8);
-
-    /* Error colors for Elements Select, Input, Input Area */
-    --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 */
-  .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);
-  }
-  .input.error {
-    color: var(--my-error-color);
-  }
-  /* 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);
-  }
-  /* Text direction */
-  :host([text-right]) > input {
-    text-align: right;
-  }
-  :host([text-left]) > input {
-    text-align: left;
-  }
-
-  /* Label for input, select, area */
+  
+  /**
+   * Label used for input, select, input-area, range and radio-group.
+   * Not used in button, button-group, checkbox (may have a label...?), form-row, form-container 
+   */   
   label {
     display: block;
-    padding: var(--pd-form-label-padding, 0 0 0 0.5rem);
-    color: var(--my-label-color);
-    text-align: left;
-    font-size: 0.9rem;
-    margin-bottom: -5px;
-    font-family: var(--pd-input-lable-font);
+    padding: var(--pd-input-label-padding, 0);
+    color: var(--pd-input-lable-col, #58585a);
+    text-align: var(--pd-input-label-align, left);
+    font-size: var(--pd-input-lable-font-size, 0.8rem);
+    font-family: var(--pd-input-lable-font-family);
   }
 
-  /* Working progress, used at the moment for radio-group, work out and adapt to others... */
+  /**
+   * Error box for input elements. Used for checkbox, radio-group, input, input-area, select, range
+   */
   .error-box {
-    color: var(--my-error-color);
-  }
-
-  /* Error Msg Div for input, select, area */
-  .error-msg {
-    background: var(--my-error-background-color);
-    border: 1px solid var(--my-error-color);
-    border-radius: var(--my-border-radius);
-    padding: 0.25rem 0 0.25rem 0.5rem;
-    white-space: nowrap;
     display: block;
-    font-size: 0.8rem;
-    margin-top:0.1rem;
-    max-width: var(--squi-input-width, 250px);
-  }
-
-  /* 
-     * Descrive size, style for input, area and select element 
-     * not use iput here => because of own select css...
-     */
-  .input-style {
-    width: var(--squi-input-width, 250px);
-    padding: var(--squi-input-padding, 0.5rem);
-
-    background-color: var(--my-background-color);
-    /*opacity: 80%;*/
-    color: var(--my-text-color);
-    /*font-size: var(--squi-input-font-size, calc(var(--squi-input-height) / 1.8));*/
-    font-size: var(--my-font-size);
-    font-family: var(--my-font-family);
-
-    /* ToDo Border Angaben? (ganz, nur bottom, und variablen dazu) Hier für Contact us fest eingebunden...*/
-    border: 1px solid #cacaca;
-    box-shadow: inset 0 1px 2px rgba(50, 48, 49, 0.1);
-    border-bottom: 2px solid var(--my-border-color);
-    border-radius: var(--my-border-radius);
+    color: var(--pd-default-error-color);
+    background: var(--pd-error-bg-col, #ffe8e8);
+    border: 1px solid var(--pd-default-error-color);
+    border-radius: var(--pd-border-radius, 0);
+    max-width: var(--pd-input-field-width);
   }
-
-  /* Höhe soll nicht für Text Area gelten, daher ausgelagert (überschreibt sonst rows) */
-  input.input-style,
-  select.input-style {
-    height: var(--my-input-height);
+  .error-box p {
+    margin: 0;
+    padding: 0.25rem 0.25rem 0.25rem 0.5rem;
+    font-size: .8rem;          
   }
 
+  /* gradient noch aufräumen */
+  
   .gradient {
     background: linear-gradient(
       to bottom,
@@ -161,24 +51,6 @@ export const SharedInputStyles = css`
     );
   }
 
-  /* Hover for input, area, select */
-  .input-style:hover {
-    border-color: var(--my-border-color-hover);
-  }
-
-  /* Fokus for input, area => select with own css.? */
-  .input-style:focus {
-    border: var(--my-border-color-focus) 3px solid;
-    outline: 0;
-  }
-
-  /* error element style for input, area => select has own css.? */
-  .error .input-style {
-    border: 1px solid var(--my-error-color);
-    color: var(--my-error-color);
-    background-color: var(--my-error-background-color);
-  }
-
   .error .gradient {
     background: linear-gradient(
       to bottom,
@@ -187,43 +59,8 @@ export const SharedInputStyles = css`
     );
   }
 
-  /* Error Focus for input, area, select */
-  .error .input-style:focus {
-    border: 2px solid var(--my-error-color);
-  }
-
-  /*
-     * Disabled style for input, select, area
-     */
-  /* Disabled for input, area => select with own css.? */
-  .input-style[disabled] {
-    /* TODO: Angaben nach oben ziehen */
-    --squi-input-placeholder-color: rgba(
-      var(--raw-game-color-light-lighter),
-      1
-    );
-    border-color: #aaa;
-    color: var(--raw-game-color-light-lightest, #7a7777);
-    background-color: #d3d2d2;
-    text-shadow: 2px 2px 3px var(--raw-game-color-dark-darker, #999);
-  }
-
   .gradient[disabled] {
     background: linear-gradient(to bottom, #ebebeb 0%, #999 100%);
   }
 
-  .input-style[disabled]:hover {
-    border-color: #6e6c6c;
-  }
-
-  /* Placeholder color */
-  ::placeholder {
-    color: var(--squi-input-placeholder-color, #474747);
-  }
-  :-ms-input-placeholder {
-    color: var(--squi-input-placeholder-color, #474747);
-  }
-  ::-ms-input-placeholder {
-    color: var(--squi-input-placeholder-color, #474747);
-  }
 `;

package/stories/01_index.stories.js

@@ -1,7 +1,6 @@
 import { html } from 'lit';
 
 import '../pd-button.js';
-import '../pd-button-goup.js';
 import '../pd-checkbox.js';
 import '../pd-input.js';
 import '../pd-input-area.js';
@@ -75,7 +74,7 @@ function Template({
     style += `--squi-font-size:${fontSize};`;
   }
   if (inputHeigth) {
-    style += `--squi-input-height:${inputHeigth};`;
+    style += `--pd-input-field-height:${inputHeigth};`;
   }
 
 return html`
@@ -85,20 +84,17 @@ return html`
     >
       <pd-select
         id="testId1"
-        ?gradient="${gradient}"
-        style="${style}"
+        ?gradient="${gradient}"        
         label="Select Label"
       ></pd-select>
       <pd-input
         id="testId1"
-        ?gradient="${gradient}"
-        style="${style}"
+        ?gradient="${gradient}"        
         label="Input Label"
       ></pd-input>
       <pd-input-area
         id="testId2"
-        ?gradient="${gradient}"
-        style="${style}"
+        ?gradient="${gradient}"        
         label="Input Area Label"
       ></pd-input-area>
     </div>
@@ -109,21 +105,18 @@ return html`
       <pd-select
         id="testId1"
         ?gradient="${gradient}"
-        .values="${selectVals}"
-        style="${style}"
+        .values="${selectVals}"        
         label="Select Label"
       ></pd-select>
       <pd-input
         id="testId1"
-        ?gradient="${gradient}"
-        style="${style}"
+        ?gradient="${gradient}"        
         label="Input Label"
         value="My Value"
       ></pd-input>
       <pd-input-area
         id="testId2"
-        ?gradient="${gradient}"
-        style="${style}"
+        ?gradient="${gradient}"        
         label="Input Area Label"
         value="My Value Area Text and ..."
       ></pd-input-area>
@@ -135,25 +128,19 @@ return html`
       <pd-select
         id="testId1"
         .values="${selectVals}"
-        ?gradient="${gradient}"
-        style="${style}"
-        label="Select Label"
-        errorMsg="Fehler 1"
+        ?gradient="${gradient}"      
+        label="Select Label"      
       ></pd-select>
       <pd-input
         id="testId1"
-        style="${style}"
         ?gradient="${gradient}"
         label="Input Label"
-        value="My Value"
-        errorMsg="Fehler 2"
+        value="My Value"        
       ></pd-input>
       <pd-input-area
-        id="testId2"
-        style="${style}"
+        id="testId2"        
         ?gradient="${gradient}"
-        label="Input Area Label"
-        errorMsg="Fehler 3"
+        label="Input Area Label"        
         value="My Value Area Text and ..."
       ></pd-input-area>
     </div>
@@ -164,22 +151,19 @@ return html`
       <pd-select
         id="testId1"
         .values="${selectVals}"
-        ?gradient="${gradient}"
-        style="${style}"
+        ?gradient="${gradient}"        
         ?disabled="${true}"
         label="Select Label"
       ></pd-select>
       <pd-input
-        id="testId1"
-        style="${style}"
+        id="testId1"        
         ?gradient="${gradient}"
         label="Input Label"
         ?disabled="${true}"
         value="My Value"
       ></pd-input>
       <pd-input-area
-        id="testId2"
-        style="${style}"
+        id="testId2"        
         ?gradient="${gradient}"
         label="Input Area Label"
         ?disabled="${true}"
@@ -193,21 +177,18 @@ return html`
       <pd-select
         id="testId1"
         .values="${selectVals}"
-        ?gradient="${gradient}"
-        style="${style}"
+        ?gradient="${gradient}"        
         ?disabled="${true}"
         label="Select ohne Placeholder"
       ></pd-select>
       <pd-input
-        id="testId1"
-        style="${style}"
+        id="testId1"        
         ?gradient="${gradient}"
         label="Input Label"
         placeHolder="Placeholder Text"
       ></pd-input>
       <pd-input-area
-        id="testId2"
-        style="${style}"
+        id="testId2"        
         ?gradient="${gradient}"
         label="Input Area Label"
         placeHolder="Placeholder Text"
@@ -252,51 +233,26 @@ return html`
 
     <h3>Buttons</h3>
     <pd-button
-      ?gradient="${gradient}"
-      style="${style}"
-      text="Primary"
+      ?gradient="${gradient}"      
+      text="Primary Button"
       ?primary="${true}"
     ></pd-button>
     <pd-button
-      ?gradient="${gradient}"
-      style="${style}"
-      text="Normal"
+      ?gradient="${gradient}"      
+      text="Secondary Button"
     ></pd-button>
     <pd-button
-      ?gradient="${gradient}"
-      style="${style}"
+      ?gradient="${gradient}"      
       ?disabled="${true}"
-      text="Disabled"
+      text="Disabled Button"
     ></pd-button>
     <pd-button
-      ?gradient="${gradient}"
-      style="${style}"
+      ?gradient="${gradient}"      
       text="Primary Disabled"
       ?disabled="${true}"
       ?primary="${true}"
     ></pd-button>
 
-    <h3>Button Group</h3>
-    <pd-button-group
-      @button-click="${e => alert('Button click:', e)}"
-      .buttons="${[
-        { text: 'Button 1' },
-        { text: 'Button 2' },
-        { text: 'Button 3' },
-        { text: 'Button 4' },
-      ]}"
-    >
-    </pd-button-group>
-
-    <pd-button-group
-      .buttons="${[
-        { text: 'Button 1' },
-        { text: 'Button 2', visibility: 'hidden' },
-        { text: 'Button 3' },
-        { text: 'Button 4' },
-      ]}"
-    >
-    </pd-button-group>
   `;
 }
 

package/stories/checkbox.stories.js

@@ -1,5 +1,6 @@
 import { html } from 'lit';
 import '../pd-checkbox.js';
+import '../pd-form-container.js';
 
 export default {
   title: 'PdForms/Checkbox',
@@ -14,14 +15,48 @@ export default {
 function Template({ errorMsg }) {
   return html`
     <h3>Checkbox selected</h3>
-    <pd-checkbox name="Test1" value="true" errorMsg="${errorMsg}"
-      >Label zur Checkbox</pd-checkbox
-    >
+    <pd-checkbox valueName="Test1" value="true">
+      Label zur Checkbox
+    </pd-checkbox>
 
     <h3>Checkbox unselected</h3>
-    <pd-checkbox name="Test2" value="false" errorMsg="${errorMsg}"
-      >Label zur Checkbox</pd-checkbox
+    <pd-checkbox valueName="Test2" value="false">
+      Label zur Checkbox
+    </pd-checkbox>    
+
+    <h3>Checkbox readonly</h3>
+    <pd-checkbox valueName="Test3" value="false" readonly>
+      Label zur Checkbox
+    </pd-checkbox>
+    <pd-checkbox valueName="Test4" value="true" readonly>
+      Label zur Checkbox
+    </pd-checkbox>    
+
+    <h3>Checkbox disabled</h3>
+    <pd-checkbox valueName="Test5" value="false" disabled>
+      Label zur Checkbox
+    </pd-checkbox>
+    <pd-checkbox valueName="Test6" value="true" disabled>
+      Label zur Checkbox
+    </pd-checkbox>
+    
+    <h3>Checkbox required</h3>
+    <pd-form-container id="testCheckboxContainerId">
+      <pd-checkbox valueName="Test7" required>
+        Label zur Checkbox
+      </pd-checkbox>
+    </pd-form-container>
+
+    <h2>Test Validation</h2>
+    <button
+      @click="${() => {
+        document.getElementById('testCheckboxContainerId').dispatchEvent(
+          new CustomEvent("validate-form", {detail: {errorMap: new Map()}})
+        );
+      }}"
     >
+      Test Validate
+    </button>
   `;
 }
 

package/stories/form-container.stories.js

@@ -12,13 +12,13 @@ export default {
 function Template() {
   return html`
     <h3>Mit Forms</h3>
-    <pd-form-container id="testFormContainerId" locale="be">
+    <pd-form-container id="testFormContainerId" requiredFieldInfo>
       <pd-form-row>
-        <pd-input class="quarter2" id="test1Id" label="Label 1" required></pd-input>
+        <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-form-row>
       <pd-form-row>
-        <pd-input class="quarter4" id="test3Id" label="Label 3"></pd-input>
+        <pd-input class="quarter4" id="test3Id" label="Label 3" required></pd-input>
       </pd-form-row>
       <pd-form-row>
         <pd-input class="quarter3" id="test4Id" label="Label 4"></pd-input>
@@ -33,15 +33,29 @@ function Template() {
         <pd-input class="quarter3" id="test9Id" label="Label 5"></pd-input>
         <pd-input class="quarter1" id="test10Id" label="Label 6"></pd-input>
       </pd-form-row>
+      <pd-form-row>
+        <pd-input-area class="quarter3-area" id="test19Id" label="Label Area" required></pd-input-area>          
+        <pd-input-area class="quarter1-area" id="test20Id" label="Label Area" required
+          requiredMsg="Das ist eine richtig lange Fehlermeldung. Diese kann per Parameter für spezielle Felder wie die AGB Checkbox gesetzt werden.">
+        </pd-input-area>        
+      </pd-form-row>
       <pd-form-row>
         <pd-input class="quarter1" id="test11Id" label="Label 5"></pd-input>
         <pd-input class="quarter3" id="test12Id" label="Label 6"></pd-input>
-      </pd-form-row>
+      </pd-form-row>      
       <pd-form-row>
         <pd-input class="quarter1" id="test13Id" label="Label 5"></pd-input>
         <pd-input class="quarter1" id="test14Id" label="Label 5"></pd-input>
         <pd-input class="quarter2" id="test15Id" label="Label 6"></pd-input>
       </pd-form-row>
+      <pd-form-row>
+        <pd-input-area class="quarter4-area" id="test16Id" label="Label Area" required></pd-input-area>        
+      </pd-form-row>
+      <pd-form-row>
+        <pd-input-area class="quarter2-area" id="test17Id" label="Label Area" required></pd-input-area>
+        <pd-input-area class="quarter2-area" id="test18Id" label="Label Area" required
+          requiredMsg="Das ist eine richtig lange Fehlermeldung. Diese kann per Parameter für spezielle Felder wie die AGB Checkbox gesetzt werden."></pd-input-area>
+      </pd-form-row>      
     </pd-form-container>
 
     <h2>Test Validation</h2>

package/stories/input.stories.js

@@ -63,38 +63,34 @@ function Template({
     <h3>Default Input with place holder</h3>
     <pd-input
       id="test2Id"
-      placeHolder="Placeholder Text"
-      style="${style}"
+      placeHolder="Placeholder Text"      
     ></pd-input>
 
     <h3>Default Input with value</h3>
     <pd-input
       id="test3Id"
-      value="My input value"
-      style="${style}"
+      value="My input value"      
     ></pd-input>
 
     <h3>Input with value - Error</h3>
     <pd-input
       id="test4Id"
       value="My input value"
-      errorMsg="Fehler aufgetreten"
-      style="${style}"
+      errorMsg="Fehler aufgetreten"      
     ></pd-input>
 
     <h3>Input with max lenth and size</h3>
     <pd-input
       id="test5Id"
       maxlength="4"
-      style="${`${style}--squi-input-width: 80px;`}"
+      style="${`--pd-input-field-width: 80px;`}"
     ></pd-input>
 
     <h3>Input with place holder and label</h3>
     <pd-input
       id="test6Id"
       label="Input Label 1"
-      placeHolder="Placeholder Text"
-      style="${style}"
+      placeHolder="Placeholder Text"      
     ></pd-input>
 
     <h3>Input with place holder and label - disabled</h3>
@@ -102,8 +98,7 @@ function Template({
       id="test7Id"
       label="Input Label 1"
       placeHolder="Placeholder Text"
-      ?disabled="${true}"
-      style="${style}"
+      disabled
     ></pd-input>
 
     <h3>Input with value and label - disabled</h3>
@@ -111,8 +106,23 @@ function Template({
       id="test8Id"
       label="Input Label 1"
       value="My Value"
-      ?disabled="${true}"
-      style="${style}"
+      disabled
+    ></pd-input>
+
+    <h3>Input with place holder and label - readonly</h3>
+    <pd-input
+      id="test7Id"
+      label="Input Label 1"
+      placeHolder="Placeholder Text"
+      readonly
+    ></pd-input>
+
+    <h3>Input with value and label - readonly</h3>
+    <pd-input
+      id="test8Id"
+      label="Input Label 1"
+      value="My Value"
+      readonly
     ></pd-input>
 
     <h3>Input with value and label - error</h3>
@@ -120,8 +130,6 @@ function Template({
       id="test4Id"
       label="Test Label"
       value="My input value"
-      errorMsg="Fehler aufgetreten"
-      style="${style}"
     ></pd-input>
   `;
 }