@progressive-development/pd-forms 0.0.60 → 0.0.61

package/stories/radio-group.stories.js

@@ -1,6 +1,7 @@
 import { html } from 'lit';
 import '../pd-checkbox.js';
 import '../pd-radio-group.js';
+import '../pd-form-container.js';
 
 export default {
   title: 'PdForms/Radio Group',
@@ -8,38 +9,46 @@ export default {
   argTypes: {},
 };
 
-function Template({ errorMsg }) {
+function Template() {
   return html`
     <h1>Radio Group</h1>
     <p style="color: red;">
       Working progress, checkbox style not suitable here
     </p>
 
-    <p>Enter error message in custom properties to show error style</p>
+    <pd-form-container id="testGroupboxContainerId">
+      
+      <h3>Radio Group Horiz.</h3>
+        <pd-radio-group required>
+          <pd-checkbox name="Test1" value="false" valueName="Test1">Label zur Checkbox</pd-checkbox>
+          <pd-checkbox name="Test2" value="false" valueName="Test2">Label zur Checkbox</pd-checkbox>
+        </pd-radio-group>
 
-    <h3>Radio Group Horiz.</h3>
-    <pd-radio-group errorMsg="${errorMsg}">
-      <pd-checkbox name="Test1" value="true"
-        >Label zur Checkbox</pd-checkbox
-      >
-      <pd-checkbox name="Test2" value="false"
-        >Label zur Checkbox</pd-checkbox
-      >
-    </pd-radio-group>
+      <h3>Radio Group Vert.</h3>
+        <pd-radio-group style="--group-direction: column;" required>
+          <pd-checkbox name="Test3" value="false" valueName="Test12">Label zur Checkbox</pd-checkbox>
+          <pd-checkbox name="Test4" value="false" valueName="Test13">Label zur Checkbox</pd-checkbox>
+        </pd-radio-group>
+    </pd-form-container>
 
-    <h3>Radio Group Vert.</h3>
-    <pd-radio-group style="--group-direction: column;" errorMsg="${errorMsg}">
-      <pd-checkbox name="Test3" value="true"
-        >Label zur Checkbox</pd-checkbox
-      >
-      <pd-checkbox name="Test4" value="false"
-        >Label zur Checkbox</pd-checkbox
-      >
-    </pd-radio-group>
+    <h2>Test Validation</h2>
+    <button
+      @click="${() => {
+        document
+          .getElementById('testGroupboxContainerId')
+          .dispatchEvent(
+            new CustomEvent('validate-form', {
+              detail: { errorMap: new Map() },
+            })
+          );
+      }}"
+    >
+      Test Validate
+    </button>
   `;
 }
 
 export const RadioGroup = Template.bind({});
 RadioGroup.args = {
-  errorMsg: '',
+  
 };

package/stories/select.stories.js

@@ -1,5 +1,7 @@
 import { html } from 'lit';
 import '../pd-select.js';
+import '../pd-form-container.js';
+import '../pd-form-row.js';
 
 export default {
   title: 'PdForms/Select',
@@ -19,16 +21,8 @@ export default {
 
 function Template({
   selectVals,
-  primaryColor,
-  secondaryColor,
-  textColor,
-  highlightColor,
-  errorColor,
-  errorBackgroundColor,
-  borderRadius,
-  displayFont,
-  fontSize,
 }) {
+  /*
   let style = '';
   if (primaryColor) {
     style += `--squi-primary-color:${primaryColor};`;
@@ -57,21 +51,20 @@ function Template({
   if (fontSize) {
     style += `--squi-font-size:${fontSize};`;
   }
+  */
 
   return html`
     <h3>Select default</h3>
     <pd-select
       id="testId1"
-      .values="${selectVals}"
-      style="${style}"
+      .values="${selectVals}"      
     ></pd-select>
 
     <h3>Select with label</h3>
     <pd-select
       id="testId2"
       .values="${selectVals}"
-      label="Label for Select"
-      style="${style}"
+      label="Label for Select"    
     ></pd-select>
 
     <h3>Select with label - disabled</h3>
@@ -79,24 +72,43 @@ function Template({
       id="testId2"
       .values="${selectVals}"
       label="Label for Select"
-      ?disabled="${true}"
-      style="${style}"
+      ?disabled="${true}"      
     ></pd-select>
 
     <h3>Select with label - error</h3>
-    <pd-select
-      id="testId2"
-      .values="${selectVals}"
-      label="Label for Select"
-      errorMsg="Fehler aufgetreten"
-      style="${style}"
-    ></pd-select>
+    <pd-form-container id="testSelectContainerId">
+
+      <pd-form-row>
+        <pd-select
+          id="testId2"
+          .values="${selectVals}"
+          label="Label for Select"
+          required
+        ></pd-select>
+      </pd-form-row>
+    </pd-form-container>
+
+    <h2>Test Validation</h2>
+    <button
+      @click="${() => {
+        document
+          .getElementById('testSelectContainerId')
+          .dispatchEvent(
+            new CustomEvent('validate-form', {
+              detail: { errorMap: new Map() },
+            })
+          );
+      }}"
+    >
+      Test Validate
+    </button>
   `;
 }
 
 export const Select = Template.bind({});
 Select.args = {
   selectVals: [
+    { name: 'Auswahl treffen', value: undefined },
     { name: 'Option 1', value: 1 },
     { name: 'Option 2', value: 2 },
     { name: 'Option 3', value: 3 },

package/pd-button-goup.js

@@ -1,3 +0,0 @@
-import { PdButtonGroup } from './src/PdButtonGroup.js';
-
-customElements.define('pd-button-group', PdButtonGroup);

package/pd-label-value.js

@@ -1,3 +0,0 @@
-import { PdLabelValue } from './src/PdLabelValue.js';
-
-window.customElements.define('pd-label-value', PdLabelValue);

package/src/PdButtonGroup.js

@@ -1,54 +0,0 @@
-/**
- * @license
- * Copyright (c) 2021 PD Progressive Development UG. All rights reserved.
- */
-
-import { html, css , LitElement } from 'lit';
-
-import { SharedInputStyles } from './shared-input-styles.js';
-import '../pd-button.js';
-
-
-export class PdButtonGroup extends LitElement {
-
-  static get styles() {
-    return [  
-      // Import Shared Styles for defined styles vars
-      SharedInputStyles,
-      css`      
-
-      :host {
-        --my-justify-prop: var(--justify-prop, space-around);        
-
-        
-      }
-
-      .button-group {
-        display: flex;           
-        justify-content: var(--my-justify-prop);       
-      }
-
-    `];
-  }
-
-  static get properties() {
-    return {                  
-      buttons: {type: Array}
-    };
-  }
-
-  constructor() {
-    super();  
-    this.buttons = []  
-  }
-
-  render() {
-    return html`
-    <div class="button-group">
-      ${this.buttons.map(entry => html`
-        <pd-button text="${entry.text}" style="visibility: ${entry.visibility};"></pd-button>
-      `)}
-    </div>
-    `;
-  }
-}

package/src/PdLabelValue.js

@@ -1,75 +0,0 @@
-/**
- * @license
- * Copyright (c) 2019 The Polymer Project Authors. All rights reserved.
- * This code may only be used under the BSD style license found at
- * http://polymer.github.io/LICENSE.txt
- * The complete set of authors may be found at
- * http://polymer.github.io/AUTHORS.txt
- * The complete set of contributors may be found at
- * http://polymer.github.io/CONTRIBUTORS.txt
- * Code distributed by Google as part of the polymer project is also
- * subject to an additional IP rights grant found at
- * http://polymer.github.io/PATENTS.txt
- */
-
-import {LitElement, html, css} from 'lit';
-
-/**
- * An example element.
- *
- * @slot - This element has a slot
- * @csspart button - The button
- */
-export class PdLabelValue extends LitElement {
-
-  static get styles() {
-    return css`
-    :host {
-
-      --my-label-color: var(--squi-background-color, #24a3b9);
-      --my-label-font: var(--squi-background-color, #24a3b9);
-      
-      --my-value-color: var(--squi-background-hover-color, #23636e);
-      --my-value-font: var(--squi-background-hover-color, #23636e);
-
-        display: block;        
-      }
-
-      .container {
-
-      }
-
-      .label {
-
-      }
-
-      .value {
-
-      }
-
-    `;
-  }
-
-  static get properties() {
-    return {
-      label: {type: String},
-      value: {type: String}
-    };
-  }
-
-  constructor() {
-    super();
-    this.label = '';
-    this.value = '';
-  }
-
-  render() {
-    return html`
-      <div class="container">
-        <span class="label">${this.label}</span>
-        <span class="value">${this.value}</span>
-      </div>
-    `;
-  }
-
-}

package/stories/label-value.stories.js

@@ -1,32 +0,0 @@
-import { html } from 'lit';
-import '../pd-label-value.js';
-
-export default {
-  title: 'PdForms/Label Value',
-  component: 'pd-label-value',
-  argTypes: {
-    
-  },
-};
-
-function Template() {  
-  return html`
-    <h1>Label Value Story</h1>
-    <p>Component not used at the moment.</p>
-    <pd-label-value label="Test" value="Mein Wert"></pd-label-value>
-    
-
-    <p>DL Test</p>
-    <dl>
-      <dt>Coffee</dt>
-      <dd>Black hot drink</dd>      
-      <dt>Milk</dt>
-      <dd>White cold drink</dd>
-    </dl> 
-  `;
-}
-
-export const LabelValue = Template.bind({});
-LabelValue.args = {  
-};
-