@progressive-development/pd-forms 0.0.55 → 0.0.56

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

package/src/PdBaseUi.js

@@ -4,12 +4,13 @@
  */
 
 import { LitElement } from 'lit';
+import { updateWhenLocaleChanges } from '@lit/localize';
 
 export class PdBaseUI extends LitElement {
 
-    static get properties() {
-        return {
-        };
-	}
+    constructor() {
+        super();
+        updateWhenLocaleChanges(this);        
+    }    
 
 }

package/src/PdFormContainer.js

@@ -3,9 +3,12 @@
  * Copyright (c) 2021 PD Progressive Development UG. All rights reserved.
  */
 
-import { LitElement, html, css } from 'lit';
-import {msg, updateWhenLocaleChanges} from '@lit/localize';
+import { html, css } from 'lit';
+import { msg } from '@lit/localize';
 
+import { PdBaseUI } from './PdBaseUi.js';
+
+import { setLocale } from './localization.js';
 
 /**
  * An example element.
@@ -13,7 +16,7 @@ import {msg, updateWhenLocaleChanges} from '@lit/localize';
  * @slot - This element has a slot
  * @csspart button - The button
  */
-export class PdFormContainer extends LitElement {
+export class PdFormContainer extends PdBaseUI {
 
   static get styles() {
     return css`
@@ -37,13 +40,15 @@ export class PdFormContainer extends LitElement {
 
   static get properties() {
     return {
-      requiredFieldInfo: { type: Boolean}
+      requiredFieldInfo: { type: Boolean},
+      locale: { type: String }
     };
   }
 
-  constructor() {
-    super();
-    updateWhenLocaleChanges(this);
+  updated(changedProperties) {
+    if (changedProperties.has("locale") && this.locale) {
+        setLocale(this.locale);
+      }
   }
 
   firstUpdated() {

package/src/PdFormRow.js

@@ -3,7 +3,9 @@
  * Copyright (c) 2021 PD Progressive Development UG. All rights reserved.
  */
 
-import {LitElement, html, css} from 'lit';
+import { html, css } from 'lit';
+
+import { PdBaseUI } from './PdBaseUi.js';
 
 /**
  * An example element.
@@ -11,7 +13,7 @@ import {LitElement, html, css} from 'lit';
  * @slot - This element has a slot
  * @csspart button - The button
  */
-export class PdFormRow extends LitElement {
+export class PdFormRow extends PdBaseUI {
 
   static get styles() {
     return css`

package/src/localization.js

@@ -5,5 +5,5 @@ import {sourceLocale, targetLocales} from './generated/locale-codes.js';
 export const {getLocale, setLocale} = configureLocalization({
   sourceLocale,
   targetLocales,
-  loadLocale: (locale) => import(`/locale/${locale}.js`),
+  loadLocale: (locale) => import(`./generated/locale/${locale}.js`),
 });

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"

package/stories/form-container.stories.js

@@ -12,10 +12,10 @@ export default {
 function Template() {
   return html`
     <h3>Mit Forms</h3>
-    <pd-form-container>
+    <pd-form-container id="testFormContainerId" locale="be">
       <pd-form-row>
-        <pd-input class="quarter2" id="test1Id" label="Label 1"></pd-input>
-        <pd-input class="quarter2" id="test2Id" label="Label 2"></pd-input>
+        <pd-input class="quarter2" id="test1Id" label="Label 1" required></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>
@@ -43,6 +43,17 @@ function Template() {
         <pd-input class="quarter2" id="test15Id" label="Label 6"></pd-input>
       </pd-form-row>
     </pd-form-container>
+
+    <h2>Test Validation</h2>
+      <button
+      @click="${() => {
+        document.getElementById('testFormContainerId').dispatchEvent(
+          new CustomEvent("validate-form", {detail: {errorMap: new Map()}})
+        );
+      }}"
+      >
+        Test Validate
+      </button>
   `;
 }