@progressive-development/pd-forms 0.0.49 → 0.0.51

package/lit-localize.json

@@ -0,0 +1,18 @@
+{
+    "$schema": "https://raw.githubusercontent.com/lit/lit/main/packages/localize-tools/config.schema.json",
+    "sourceLocale": "de",
+    "targetLocales": ["en", "be"],
+    "inputFiles": [
+      "src/**/*.js"
+    ],
+    "output": {
+        "mode": "runtime",
+        "localeCodesModule": "src/generated/locale-codes.js",
+        "outputDir": "src/generated/locale"
+        
+    },
+    "interchange": {
+      "format": "xliff",
+      "xliffDir": "./xliff/"
+    }
+  }

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.49",
+  "version": "0.0.51",
   "main": "index.js",
   "module": "index.js",
   "scripts": {
@@ -14,25 +14,29 @@
     "test": "web-test-runner --coverage",
     "test:watch": "web-test-runner --watch",
     "storybook": "npm run analyze -- --exclude dist && web-dev-server -c .storybook/server.mjs",
-    "storybook:build": "npm run analyze -- --exclude dist && build-storybook"
+    "storybook:build": "npm run analyze -- --exclude dist && build-storybook",
+    "localizeExtract": "lit-localize extract",
+    "localizeBuild": "lit-localize build"
   },
   "dependencies": {
-    "@lit-labs/motion": "^1.0.1",
+    "@lit-labs/motion": "^1.0.2",
+    "@lit/localize": "^0.11.2",
     "@progressive-development/pd-icon": "^0.0.9",
-    "lit": "^2.0.2"
+    "lit": "^2.2.0"
   },
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "^0.4.17",
+    "@lit/localize-tools": "^0.6.1",
     "@open-wc/eslint-config": "^4.3.0",
-    "@open-wc/testing": "^3.0.0-next.5",
-    "@web/dev-server": "^0.1.28",
+    "@open-wc/testing": "^3.0.4",
+    "@web/dev-server": "^0.1.29",
     "@web/dev-server-storybook": "next",
-    "@web/test-runner": "^0.13.21",
+    "@web/test-runner": "^0.13.27",
     "eslint": "^7.32.0",
-    "eslint-config-prettier": "^8.3.0",
+    "eslint-config-prettier": "^8.4.0",
     "husky": "^4.3.8",
     "lint-staged": "^10.5.4",
-    "prettier": "^2.4.1"
+    "prettier": "^2.5.1"
   },
   "customElements": "custom-elements.json",
   "eslintConfig": {

package/src/PdFormContainer.js

@@ -3,7 +3,8 @@
  * Copyright (c) 2021 PD Progressive Development UG. All rights reserved.
  */
 
-import {LitElement, html, css} from 'lit';
+import { LitElement, html, css } from 'lit';
+import { msg } from '@lit/localize';
 
 /**
  * An example element.
@@ -50,7 +51,7 @@ export class PdFormContainer extends LitElement {
         <slot></slot>
         ${this.requiredFieldInfo ? html` 
         <p class="hinweis">
-          * Pflichtfelder bitte ausfüllen
+          ${msg('* Pflichtfeld',{desc: '#pd.form.required.info#'})}
         </p>` : ''}
         <br />
       </form>    
@@ -66,7 +67,8 @@ export class PdFormContainer extends LitElement {
     reqEl.forEach(el => {
       const tmpEl = el;
       if (!el.value || el.value === "") {
-        tmpEl.errorMsg = el.requiredMsg || "Field is required"; // TODO: msg required field local
+        tmpEl.errorMsg = el.requiredMsg ||
+          msg('Eingabe erforderlich',{desc: '#pd.form.field.required#'});
         e.detail.errorMap.set(el.id, tmpEl.errorMsg);
       } else {
         tmpEl.errorMsg = "";
@@ -74,7 +76,7 @@ export class PdFormContainer extends LitElement {
     })
 
     // general validate method
-    const validateByType = (fieldType, validFunc, example) => {
+    const validateByType = (fieldType, validFunc, invalidMsgTxt) => {
 
       if (e.detail.singleElement &&
         e.detail.singleElement.getAttribute("field-type") !== fieldType) {
@@ -91,7 +93,7 @@ export class PdFormContainer extends LitElement {
           if (validFunc(el.value)) {
             tmpEl.errorMsg =  "";
           } else {
-            tmpEl.errorMsg = `Format ${example ? `${example} required` : "invalid"}`;
+            tmpEl.errorMsg = invalidMsgTxt || `Invalid format for ${fieldType}`;
             e.detail.errorMap.set(el.id, tmpEl.errorMsg);
           }
         }
@@ -99,10 +101,14 @@ export class PdFormContainer extends LitElement {
     };
 
     // validate mail and phone inputs
-    validateByType("mail", PdFormContainer._mailIsValid, "mail@example.com");
-    validateByType("phone", PdFormContainer._phoneIsValid, "+32 494 667085");
-    validateByType("vat", PdFormContainer._vatIsValid, "BE0123456789");
-    validateByType("number", (val) => !Number.isNaN(val), "only numbers");
+    validateByType("mail", PdFormContainer._mailIsValid, 
+      msg('Format mail@test.de verwenden',{desc: '#pd.form.field.invalid.mail#'}));
+    validateByType("phone", PdFormContainer._phoneIsValid,
+      msg("Format +49123 123456 verwenden",{desc: '#pd.form.field.invalid.phone#'}));
+    validateByType("vat", PdFormContainer._vatIsValid,  
+      msg("Format DE0123456789 verwenden",{desc: '#pd.form.field.invalid.vat#'}));
+    validateByType("number", (val) => !Number.isNaN(val),   
+      msg("Nur Zahlen erlaubt",{desc: '#pd.form.field.invalid.number#'}));
 
     if (e.detail.singleElement) {
       e.stopPropagation();

package/src/generated/locale/be.js

@@ -0,0 +1,19 @@
+
+    // Do not modify this file by hand!
+    // Re-generate this file by running lit-localize
+
+    
+    
+
+    /* eslint-disable no-irregular-whitespace */
+    /* eslint-disable @typescript-eslint/no-explicit-any */
+
+    export const templates = {
+      's369cb9ac30f626a2': `* Verplichte in te vullen`,
+'s441bc7f34cdb5af3': `Vul dit veld in`,
+'s570d46ddb2a278ce': `Ongeldig VAT, gebruik BE0123456789`,
+'s5b7e33463603827f': `Ongeldig telefoonnummer, gebruik +32 494 667085`,
+'s82000595de0f83d0': `Ongeldig e-mailadres, gebruik mail@test.be`,
+'s8716290d3f8456dd': `Alleen nummers toegestaan`,
+    };
+  

package/src/generated/locale/en.js

@@ -0,0 +1,19 @@
+
+    // Do not modify this file by hand!
+    // Re-generate this file by running lit-localize
+
+    
+    
+
+    /* eslint-disable no-irregular-whitespace */
+    /* eslint-disable @typescript-eslint/no-explicit-any */
+
+    export const templates = {
+      's369cb9ac30f626a2': `* Pflichtfeld`,
+'s441bc7f34cdb5af3': `Eingabe erforderlich`,
+'s82000595de0f83d0': `Format mail@test.de verwenden`,
+'s5b7e33463603827f': `Format +49123 123456 verwenden`,
+'s570d46ddb2a278ce': `Format DE0123456789 verwenden`,
+'s8716290d3f8456dd': `Nur Zahlen erlaubt`,
+    };
+  

package/src/generated/locale-codes.js

@@ -0,0 +1,25 @@
+// Do not modify this file by hand!
+// Re-generate this file by running lit-localize.
+
+/**
+ * The locale code that templates in this source code are written in.
+ */
+export const sourceLocale = `de`;
+
+/**
+ * The other locale codes that this application is localized into. Sorted
+ * lexicographically.
+ */
+export const targetLocales = [
+  `be`,
+  `en`,
+];
+
+/**
+ * All valid project locale codes. Sorted lexicographically.
+ */
+export const allLocales = [
+  `be`,
+  `de`,
+  `en`,
+];

package/xliff/be.xlf

@@ -0,0 +1,37 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<xliff version="1.2" xmlns="urn:oasis:names:tc:xliff:document:1.2">
+<file target-language="be" source-language="de" original="lit-localize-inputs" datatype="plaintext">
+<body>
+<trans-unit id="s82000595de0f83d0">
+  <source>Format mail@test.de verwenden</source>
+  <target>Ongeldig e-mailadres, gebruik mail@test.be</target>
+  <note>#pd.form.field.invalid.mail#</note>
+</trans-unit>
+<trans-unit id="s8716290d3f8456dd">
+  <source>Nur Zahlen erlaubt</source>
+  <target>Alleen nummers toegestaan</target>
+  <note>#pd.form.field.invalid.number#</note>
+</trans-unit>
+<trans-unit id="s5b7e33463603827f">
+  <source>Format +49123 123456 verwenden</source>
+  <target>Ongeldig telefoonnummer, gebruik +32 494 667085</target>
+  <note>#pd.form.field.invalid.phone#</note>
+</trans-unit>
+<trans-unit id="s570d46ddb2a278ce">
+  <source>Format DE0123456789 verwenden</source>
+  <target>Ongeldig VAT, gebruik BE0123456789</target>
+  <note>#pd.form.field.invalid.vat#</note>
+</trans-unit>
+<trans-unit id="s441bc7f34cdb5af3">
+  <source>Eingabe erforderlich</source>
+  <target>Vul dit veld in</target>
+  <note>#pd.form.field.required#</note>
+</trans-unit>
+<trans-unit id="s369cb9ac30f626a2">
+  <source>* Pflichtfeld</source>
+  <target>* Verplichte in te vullen</target>
+  <note>#pd.form.required.info#</note>
+</trans-unit>
+</body>
+</file>
+</xliff>

package/xliff/en.xlf

@@ -0,0 +1,31 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<xliff version="1.2" xmlns="urn:oasis:names:tc:xliff:document:1.2">
+<file target-language="en" source-language="de" original="lit-localize-inputs" datatype="plaintext">
+<body>
+<trans-unit id="s82000595de0f83d0">
+  <source>Format mail@test.de verwenden</source>
+  <note>#pd.form.field.invalid.mail#</note>
+</trans-unit>
+<trans-unit id="s8716290d3f8456dd">
+  <source>Nur Zahlen erlaubt</source>
+  <note>#pd.form.field.invalid.number#</note>
+</trans-unit>
+<trans-unit id="s5b7e33463603827f">
+  <source>Format +49123 123456 verwenden</source>
+  <note>#pd.form.field.invalid.phone#</note>
+</trans-unit>
+<trans-unit id="s570d46ddb2a278ce">
+  <source>Format DE0123456789 verwenden</source>
+  <note>#pd.form.field.invalid.vat#</note>
+</trans-unit>
+<trans-unit id="s441bc7f34cdb5af3">
+  <source>Eingabe erforderlich</source>
+  <note>#pd.form.field.required#</note>
+</trans-unit>
+<trans-unit id="s369cb9ac30f626a2">
+  <source>* Pflichtfeld</source>
+  <note>#pd.form.required.info#</note>
+</trans-unit>
+</body>
+</file>
+</xliff>