@progressive-development/pd-forms 0.6.13 → 0.7.0

package/dist/locales/de.js

@@ -8,7 +8,7 @@ const templates = {
   "pd.form.field.invalid.phone": `Format +49123 123456 verwenden`,
   "pd.form.field.invalid.vat": `Format DE0123456789 verwenden`,
   "pd.form.field.invalid.number": `Nur Zahlen erlaubt`,
-  "pd.form.required.valid": `* Pflichtfelder ausgefüllt`,
+  "pd.form.required.valid": `* Felder ausgefüllt`,
   "pd.form.required.missing": `* Pflichtfeld fehlt oder fehlerhaft`,
   s8a355eeb33f58c5f: str`Mindestens ${0} Zeichen`,
   s512f37f2dba563ec: str`Maximal ${0} Zeichen`

package/dist/pd-form-container.d.ts

@@ -6,6 +6,10 @@ export declare class PdFormContainer extends PdBaseUI {
      * If true, display info about required fields
      */
     requiredFieldInfo: boolean;
+    /**
+     * If true, trim fields when values are returned.
+     */
+    autoTrimm: boolean;
     /**
      * Optional general error message
      */

package/dist/pd-form-container.d.ts.map

@@ -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"}
+{"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

@@ -16,6 +16,7 @@ let PdFormContainer = class extends PdBaseUI {
   constructor() {
     super(...arguments);
     this.requiredFieldInfo = false;
+    this.autoTrimm = false;
     this.commonError = "";
     this._fields = /* @__PURE__ */ new Map();
     this._onRegister = (e) => {
@@ -36,12 +37,14 @@ let PdFormContainer = class extends PdBaseUI {
         });
         this.requestUpdate();
       }
+      e.stopPropagation();
     };
     this._onChange = (e) => {
       const { name, value, state: state2 } = e.detail;
       console.debug("###### _onChange", name, value, state2);
       const field = this._fields.get(name);
       if (field) {
+        const oldValue = field.value;
         field.value = value;
         field.pristine = state2.pristine;
         field.dirty = state2.dirty;
@@ -50,7 +53,17 @@ let PdFormContainer = class extends PdBaseUI {
         field.valid = state2.valid;
         field.invalid = state2.invalid;
         this.requestUpdate();
+        if (value !== oldValue) {
+          this.dispatchEvent(
+            new CustomEvent("pd-form-change", {
+              detail: {
+                overallValidity: this._getOverallValidity()
+              }
+            })
+          );
+        }
       }
+      e.stopPropagation();
     };
     this._onBlur = (e) => {
       const { name } = e.detail;
@@ -59,6 +72,7 @@ let PdFormContainer = class extends PdBaseUI {
         field.touched = true;
         field.focused = false;
       }
+      e.stopPropagation();
     };
     this._onFocus = (e) => {
       const { name } = e.detail;
@@ -66,6 +80,7 @@ let PdFormContainer = class extends PdBaseUI {
       if (field) {
         field.focused = true;
       }
+      e.stopPropagation();
     };
   }
   connectedCallback() {
@@ -147,7 +162,11 @@ let PdFormContainer = class extends PdBaseUI {
   getValues() {
     const result = {};
     this._fields.forEach((field, key) => {
-      result[key] = field.value;
+      let value = field.value;
+      if (this.autoTrimm === true && typeof value === "string") {
+        value = value.trim();
+      }
+      result[key] = value;
     });
     return result;
   }
@@ -177,10 +196,8 @@ PdFormContainer.styles = [
         font-family: var(--pd-default-font-content-family);
         font-size: var(--pd-form-info-font-size, 1em);
         padding-top: 0.8em;
-        border-radius: var(--pd-border-radius, 0);
-        width: 70%;
-        max-width: 780px;
-        min-width: 200px;
+        max-width: 90%;
+
         color: var(--pd-form-container-default-col, var(--pd-default-dark-col));
       }
 
@@ -202,6 +219,9 @@ PdFormContainer.styles = [
 __decorateClass([
   property({ type: Boolean })
 ], PdFormContainer.prototype, "requiredFieldInfo", 2);
+__decorateClass([
+  property({ type: Boolean })
+], PdFormContainer.prototype, "autoTrimm", 2);
 __decorateClass([
   property({ type: String })
 ], PdFormContainer.prototype, "commonError", 2);

package/dist/pd-form-row.d.ts.map

@@ -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"}
+{"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

@@ -94,7 +94,14 @@ PdFormRow.styles = [
 
       @media (max-width: 450px) {
         :host {
-          --my-row-width: 300px;
+          --my-row-width: 320px;
+          --my-gap: 8px;
+        }
+      }
+
+      @media (max-width: 390px) {
+        :host {
+          --my-row-width: 260px;
           --my-gap: 8px;
         }
       }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progressive-development/pd-forms",
-  "version": "0.6.13",
+  "version": "0.7.0",
   "description": "Webcomponent pd-forms for rendering form input elements.",
   "author": "PD Progressive Development",
   "license": "SEE LICENSE IN LICENSE",
@@ -52,7 +52,7 @@
   "dependencies": {
     "@lit-labs/motion": "^1.0.8",
     "@lit/localize": "^0.12.2",
-    "@progressive-development/pd-icon": "^0.7.2",
+    "@progressive-development/pd-icon": "^0.7.3",
     "@progressive-development/pd-shared-styles": "^0.2.4",
     "lit": "^3.3.0"
   },