@progressive-development/pd-forms 0.0.48 → 0.0.50

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/lit-localize.json +18 -0
  2. package/package.json +10 -8
  3. package/src/PdFormContainer.js +15 -9
package/lit-localize.json ADDED
@@ -0,0 +1,18 @@
1
+ {
2
+ "$schema": "https://raw.githubusercontent.com/lit/lit/main/packages/localize-tools/config.schema.json",
3
+ "sourceLocale": "de",
4
+ "targetLocales": ["en", "be"],
5
+ "inputFiles": [
6
+ "src/**/*.js"
7
+ ],
8
+ "output": {
9
+ "mode": "runtime",
10
+ "localeCodesModule": "src/generated/locale-codes.js",
11
+ "outputDir": "src/generated/locale"
12
+
13
+ },
14
+ "interchange": {
15
+ "format": "xliff",
16
+ "xliffDir": "./xliff/"
17
+ }
18
+ }
package/package.json CHANGED
@@ -3,7 +3,7 @@
3
3
  "description": "Webcomponent pd-forms following open-wc recommendations",
4
4
  "license": "SEE LICENSE IN LICENSE",
5
5
  "author": "PD Progressive Development",
6
- "version": "0.0.48",
6
+ "version": "0.0.50",
7
7
  "main": "index.js",
8
8
  "module": "index.js",
9
9
  "scripts": {
@@ -17,22 +17,24 @@
17
17
  "storybook:build": "npm run analyze -- --exclude dist && build-storybook"
18
18
  },
19
19
  "dependencies": {
20
- "@lit-labs/motion": "^1.0.1",
20
+ "@lit-labs/motion": "^1.0.2",
21
+ "@lit/localize": "^0.11.2",
21
22
  "@progressive-development/pd-icon": "^0.0.9",
22
- "lit": "^2.0.2"
23
+ "lit": "^2.2.0"
23
24
  },
24
25
  "devDependencies": {
25
26
  "@custom-elements-manifest/analyzer": "^0.4.17",
27
+ "@lit/localize-tools": "^0.6.1",
26
28
  "@open-wc/eslint-config": "^4.3.0",
27
- "@open-wc/testing": "^3.0.0-next.5",
28
- "@web/dev-server": "^0.1.28",
29
+ "@open-wc/testing": "^3.0.4",
30
+ "@web/dev-server": "^0.1.29",
29
31
  "@web/dev-server-storybook": "next",
30
- "@web/test-runner": "^0.13.21",
32
+ "@web/test-runner": "^0.13.27",
31
33
  "eslint": "^7.32.0",
32
- "eslint-config-prettier": "^8.3.0",
34
+ "eslint-config-prettier": "^8.4.0",
33
35
  "husky": "^4.3.8",
34
36
  "lint-staged": "^10.5.4",
35
- "prettier": "^2.4.1"
37
+ "prettier": "^2.5.1"
36
38
  },
37
39
  "customElements": "custom-elements.json",
38
40
  "eslintConfig": {
package/src/PdFormContainer.js CHANGED
@@ -3,7 +3,8 @@
3
3
  * Copyright (c) 2021 PD Progressive Development UG. All rights reserved.
4
4
  */
5
5
 
6
- import {LitElement, html, css} from 'lit';
6
+ import { LitElement, html, css } from 'lit';
7
+ import { msg } from '@lit/localize';
7
8
 
8
9
  /**
9
10
  * An example element.
@@ -50,7 +51,7 @@ export class PdFormContainer extends LitElement {
50
51
  <slot></slot>
51
52
  ${this.requiredFieldInfo ? html`
52
53
  <p class="hinweis">
53
- * Pflichtfelder bitte ausfüllen
54
+ ${msg('* verplichte in te vullen',{desc: '#pd.form.required.info#'})}
54
55
  </p>` : ''}
55
56
  <br />
56
57
  </form>
@@ -66,7 +67,8 @@ export class PdFormContainer extends LitElement {
66
67
  reqEl.forEach(el => {
67
68
  const tmpEl = el;
68
69
  if (!el.value || el.value === "") {
69
- tmpEl.errorMsg = el.requiredMsg || "Field is required"; // TODO: msg required field local
70
+ tmpEl.errorMsg = el.requiredMsg ||
71
+ msg('Field is required',{desc: '#pd.form.field.required#'});
70
72
  e.detail.errorMap.set(el.id, tmpEl.errorMsg);
71
73
  } else {
72
74
  tmpEl.errorMsg = "";
@@ -74,7 +76,7 @@ export class PdFormContainer extends LitElement {
74
76
  })
75
77
 
76
78
  // general validate method
77
- const validateByType = (fieldType, validFunc, example) => {
79
+ const validateByType = (fieldType, validFunc, invalidMsgTxt) => {
78
80
 
79
81
  if (e.detail.singleElement &&
80
82
  e.detail.singleElement.getAttribute("field-type") !== fieldType) {
@@ -91,7 +93,7 @@ export class PdFormContainer extends LitElement {
91
93
  if (validFunc(el.value)) {
92
94
  tmpEl.errorMsg = "";
93
95
  } else {
94
- tmpEl.errorMsg = `Format ${example ? `${example} required` : "invalid"}`;
96
+ tmpEl.errorMsg = invalidMsgTxt || `Invalid format for ${fieldType}`;
95
97
  e.detail.errorMap.set(el.id, tmpEl.errorMsg);
96
98
  }
97
99
  }
@@ -99,10 +101,14 @@ export class PdFormContainer extends LitElement {
99
101
  };
100
102
 
101
103
  // validate mail and phone inputs
102
- validateByType("mail", PdFormContainer._mailIsValid, "mail@example.com");
103
- validateByType("phone", PdFormContainer._phoneIsValid, "+32 494 667085");
104
- validateByType("vat", PdFormContainer._vatIsValid, "BE0123456789");
105
- validateByType("number", (val) => !Number.isNaN(val), "only numbers");
104
+ validateByType("mail", PdFormContainer._mailIsValid,
105
+ msg('mail@example.com',{desc: '#pd.form.field.invalid.mail#'}));
106
+ validateByType("phone", PdFormContainer._phoneIsValid,
107
+ msg("+32 494 667085",{desc: '#pd.form.field.invalid.phone#'}));
108
+ validateByType("vat", PdFormContainer._vatIsValid,
109
+ msg("BE0123456789",{desc: '#pd.form.field.invalid.vat#'}));
110
+ validateByType("number", (val) => !Number.isNaN(val),
111
+ msg("Only numbers allowed",{desc: '#pd.form.field.invalid.number#'}));
106
112
 
107
113
  if (e.detail.singleElement) {
108
114
  e.stopPropagation();