@progressive-development/pd-forms 0.6.14 → 0.7.1

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 (6) hide show
  1. package/dist/pd-form-container.d.ts +4 -0
  2. package/dist/pd-form-container.d.ts.map +1 -1
  3. package/dist/pd-form-container.js +25 -5
  4. package/dist/pd-form-row.d.ts.map +1 -1
  5. package/dist/pd-form-row.js +8 -1
  6. package/package.json +3 -3
package/dist/pd-form-container.d.ts CHANGED
@@ -6,6 +6,10 @@ export declare class PdFormContainer extends PdBaseUI {
6
6
  * If true, display info about required fields
7
7
  */
8
8
  requiredFieldInfo: boolean;
9
+ /**
10
+ * If true, trim fields when values are returned.
11
+ */
12
+ autoTrimm: boolean;
9
13
  /**
10
14
  * Optional general error message
11
15
  */
package/dist/pd-form-container.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"pd-form-container.d.ts","sourceRoot":"","sources":["../src/pd-form-container.ts"],"names":[],"mappings":"AACA;;;;;;;;;GASG;AAEH,OAAO,EAAa,KAAK,cAAc,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAI1E,OAAO,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAC3C,OAAO,EAAE,mBAAmB,EAAE,MAAM,YAAY,CAAC;AAEjD,qBACa,eAAgB,SAAQ,QAAQ;IAC3C;;OAEG;IAEH,iBAAiB,UAAS;IAE1B;;OAEG;IAEH,WAAW,SAAM;IAGjB,OAAO,CAAC,OAAO,CAA+C;IAE9D,OAAgB,MAAM,EAAE,cAAc,CAkCpC;IAEO,iBAAiB,IAAI,IAAI;IAoBzB,oBAAoB,IAAI,IAAI;IAoB5B,MAAM,IAAI,cAAc;IASjC,OAAO,CAAC,qBAAqB;IAc7B,OAAO,CAAC,WAAW,CAoBjB;IAEF,OAAO,CAAC,SAAS,CAgBf;IAEF,OAAO,CAAC,OAAO,CAOb;IAEF,OAAO,CAAC,QAAQ,CAMd;IAEF,OAAO,CAAC,mBAAmB;IASd,eAAe,IAAI,OAAO,CAAC,OAAO,CAAC;IAYzC,SAAS,IAAI,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC;IAQhC,KAAK,IAAI,IAAI;IAMb,SAAS,IAAI,GAAG,CAAC,MAAM,EAAE,mBAAmB,CAAC;IAIpD,IAAI,KAAK,YAER;CACF"}
1
+ {"version":3,"file":"pd-form-container.d.ts","sourceRoot":"","sources":["../src/pd-form-container.ts"],"names":[],"mappings":"AACA;;;;;;;;;GASG;AAEH,OAAO,EAAa,KAAK,cAAc,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAI1E,OAAO,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAC3C,OAAO,EAAE,mBAAmB,EAAE,MAAM,YAAY,CAAC;AAEjD,qBACa,eAAgB,SAAQ,QAAQ;IAC3C;;OAEG;IAEH,iBAAiB,UAAS;IAE1B;;OAEG;IAEH,SAAS,UAAS;IAElB;;OAEG;IAEH,WAAW,SAAM;IAGjB,OAAO,CAAC,OAAO,CAA+C;IAE9D,OAAgB,MAAM,EAAE,cAAc,CAgCpC;IAEO,iBAAiB,IAAI,IAAI;IAoBzB,oBAAoB,IAAI,IAAI;IAoB5B,MAAM,IAAI,cAAc;IASjC,OAAO,CAAC,qBAAqB;IAc7B,OAAO,CAAC,WAAW,CAqBjB;IAEF,OAAO,CAAC,SAAS,CA0Bf;IAEF,OAAO,CAAC,OAAO,CAQb;IAEF,OAAO,CAAC,QAAQ,CAOd;IAEF,OAAO,CAAC,mBAAmB;IASd,eAAe,IAAI,OAAO,CAAC,OAAO,CAAC;IAYzC,SAAS,IAAI,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC;IAYhC,KAAK,IAAI,IAAI;IAMb,SAAS,IAAI,GAAG,CAAC,MAAM,EAAE,mBAAmB,CAAC;IAIpD,IAAI,KAAK,YAER;CACF"}
package/dist/pd-form-container.js CHANGED
@@ -16,6 +16,7 @@ let PdFormContainer = class extends PdBaseUI {
16
16
  constructor() {
17
17
  super(...arguments);
18
18
  this.requiredFieldInfo = false;
19
+ this.autoTrimm = false;
19
20
  this.commonError = "";
20
21
  this._fields = /* @__PURE__ */ new Map();
21
22
  this._onRegister = (e) => {
@@ -36,12 +37,14 @@ let PdFormContainer = class extends PdBaseUI {
36
37
  });
37
38
  this.requestUpdate();
38
39
  }
40
+ e.stopPropagation();
39
41
  };
40
42
  this._onChange = (e) => {
41
43
  const { name, value, state: state2 } = e.detail;
42
44
  console.debug("###### _onChange", name, value, state2);
43
45
  const field = this._fields.get(name);
44
46
  if (field) {
47
+ const oldValue = field.value;
45
48
  field.value = value;
46
49
  field.pristine = state2.pristine;
47
50
  field.dirty = state2.dirty;
@@ -50,7 +53,17 @@ let PdFormContainer = class extends PdBaseUI {
50
53
  field.valid = state2.valid;
51
54
  field.invalid = state2.invalid;
52
55
  this.requestUpdate();
56
+ if (value !== oldValue) {
57
+ this.dispatchEvent(
58
+ new CustomEvent("pd-form-change", {
59
+ detail: {
60
+ overallValidity: this._getOverallValidity()
61
+ }
62
+ })
63
+ );
64
+ }
53
65
  }
66
+ e.stopPropagation();
54
67
  };
55
68
  this._onBlur = (e) => {
56
69
  const { name } = e.detail;
@@ -59,6 +72,7 @@ let PdFormContainer = class extends PdBaseUI {
59
72
  field.touched = true;
60
73
  field.focused = false;
61
74
  }
75
+ e.stopPropagation();
62
76
  };
63
77
  this._onFocus = (e) => {
64
78
  const { name } = e.detail;
@@ -66,6 +80,7 @@ let PdFormContainer = class extends PdBaseUI {
66
80
  if (field) {
67
81
  field.focused = true;
68
82
  }
83
+ e.stopPropagation();
69
84
  };
70
85
  }
71
86
  connectedCallback() {
@@ -147,7 +162,11 @@ let PdFormContainer = class extends PdBaseUI {
147
162
  getValues() {
148
163
  const result = {};
149
164
  this._fields.forEach((field, key) => {
150
- result[key] = field.value;
165
+ let value = field.value;
166
+ if (this.autoTrimm === true && typeof value === "string") {
167
+ value = value.trim();
168
+ }
169
+ result[key] = value;
151
170
  });
152
171
  return result;
153
172
  }
@@ -177,10 +196,8 @@ PdFormContainer.styles = [
177
196
  font-family: var(--pd-default-font-content-family);
178
197
  font-size: var(--pd-form-info-font-size, 1em);
179
198
  padding-top: 0.8em;
180
- border-radius: var(--pd-border-radius, 0);
181
- width: 70%;
182
- max-width: 780px;
183
- min-width: 200px;
199
+ max-width: 90%;
200
+
184
201
  color: var(--pd-form-container-default-col, var(--pd-default-dark-col));
185
202
  }
186
203
 
@@ -202,6 +219,9 @@ PdFormContainer.styles = [
202
219
  __decorateClass([
203
220
  property({ type: Boolean })
204
221
  ], PdFormContainer.prototype, "requiredFieldInfo", 2);
222
+ __decorateClass([
223
+ property({ type: Boolean })
224
+ ], PdFormContainer.prototype, "autoTrimm", 2);
205
225
  __decorateClass([
206
226
  property({ type: String })
207
227
  ], PdFormContainer.prototype, "commonError", 2);
package/dist/pd-form-row.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"pd-form-row.d.ts","sourceRoot":"","sources":["../src/pd-form-row.ts"],"names":[],"mappings":"AACA;;;GAGG;AAEH,OAAO,EAAa,cAAc,EAAE,MAAM,KAAK,CAAC;AAGhD,OAAO,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAE3C;;;;GAIG;AACH,qBACa,SAAU,SAAQ,QAAQ;IACrC,OAAgB,MAAM,EAAE,cAAc,CAqFpC;IAEF,MAAM;CAGP"}
1
+ {"version":3,"file":"pd-form-row.d.ts","sourceRoot":"","sources":["../src/pd-form-row.ts"],"names":[],"mappings":"AACA;;;GAGG;AAEH,OAAO,EAAa,cAAc,EAAE,MAAM,KAAK,CAAC;AAGhD,OAAO,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAE3C;;;;GAIG;AACH,qBACa,SAAU,SAAQ,QAAQ;IACrC,OAAgB,MAAM,EAAE,cAAc,CA4FpC;IAEF,MAAM;CAGP"}
package/dist/pd-form-row.js CHANGED
@@ -94,7 +94,14 @@ PdFormRow.styles = [
94
94
 
95
95
  @media (max-width: 450px) {
96
96
  :host {
97
- --my-row-width: 300px;
97
+ --my-row-width: 320px;
98
+ --my-gap: 8px;
99
+ }
100
+ }
101
+
102
+ @media (max-width: 390px) {
103
+ :host {
104
+ --my-row-width: 260px;
98
105
  --my-gap: 8px;
99
106
  }
100
107
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@progressive-development/pd-forms",
3
- "version": "0.6.14",
3
+ "version": "0.7.1",
4
4
  "description": "Webcomponent pd-forms for rendering form input elements.",
5
5
  "author": "PD Progressive Development",
6
6
  "license": "SEE LICENSE IN LICENSE",
@@ -52,8 +52,8 @@
52
52
  "dependencies": {
53
53
  "@lit-labs/motion": "^1.0.8",
54
54
  "@lit/localize": "^0.12.2",
55
- "@progressive-development/pd-icon": "^0.7.3",
56
- "@progressive-development/pd-shared-styles": "^0.2.4",
55
+ "@progressive-development/pd-icon": "^0.7.4",
56
+ "@progressive-development/pd-shared-styles": "^0.2.5",
57
57
  "lit": "^3.3.0"
58
58
  },
59
59
  "devDependencies": {