@progressive-development/pd-forms 0.6.5 → 0.6.8

package/dist/pd-base-ui-input.js

@@ -1,8 +1,10 @@
 import { css, html } from "lit";
 import { property, state } from "lit/decorators.js";
+import { pdIcons } from "@progressive-development/pd-icon";
 import "@progressive-development/pd-icon/pd-icon";
 import { PdBaseUI } from "./pd-base-ui.js";
 import { SharedInputStyles } from "./styles/shared-input-styles.js";
+import { requiredValidator, requiredSelectValidator, requiredRangeValidator, requiredCheckedValidator, emailValidator, numberValidator, phoneValidator, vatValidator } from "./validators.js";
 import "./pd-hover-box.js";
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -22,8 +24,6 @@ const INPUT_TYPE_DATE = 7;
 const INPUT_TYPE_FILE = 8;
 const INPUT_TYPE_TIME = 9;
 const KEY_RETURN = "Enter";
-let delayTimer;
-const DELAY_WAIT_TIME_MS = 400;
 const _PdBaseUIInput = class _PdBaseUIInput extends PdBaseUI {
   constructor() {
     super(...arguments);
@@ -35,11 +35,30 @@ const _PdBaseUIInput = class _PdBaseUIInput extends PdBaseUI {
     this.helperTxt = "";
     this.valueName = "";
     this.defaultRequiredChar = "*";
-    this.defaultValue = "";
     this.label = "";
-    this.value = "";
+    this.fieldType = "text";
+    this.initValue = "";
+    this._valid = false;
+    this._invalid = false;
+    this._dirty = false;
+    this._pristine = true;
+    this._touched = false;
+    this._focused = false;
     this._errorMsg = "";
+    this._value = "";
     this._inputType = -1;
+    this._validators = [];
+  }
+  update(changedProps) {
+    if (changedProps.has("initValue") && this.initValue) {
+      this._value = this.initValue;
+    }
+    super.update(changedProps);
+  }
+  firstUpdated() {
+    this.runValidators(true).then((result) => {
+      this._registerAtContainer(result);
+    });
   }
   get errorMsg() {
     return this._errorMsg;
@@ -47,66 +66,156 @@ const _PdBaseUIInput = class _PdBaseUIInput extends PdBaseUI {
   set errorMsg(msg) {
     this._errorMsg = msg;
   }
-  clear() {
-    this.value = "";
-    this._errorMsg = "";
+  get value() {
+    return this._value;
+  }
+  set value(val) {
+    this._handleChangedValue(val, void 0, true);
   }
   reset() {
-    this.value = this.defaultValue || "";
-    this._errorMsg = "";
+    this._value = this._getInitialValue(true);
+    this.runValidators(true).then((result) => {
+      this._errorMsg = "";
+      this._valid = false;
+      this._invalid = false;
+      this._pristine = true;
+      this._dirty = false;
+      this._touched = false;
+      this._focused = false;
+      this.dispatchEvent(
+        new CustomEvent("pd-form-element-change", {
+          detail: {
+            value: this._value,
+            name: this.valueName || this.id || "field",
+            state: {
+              pristine: this._pristine,
+              dirty: this._dirty,
+              touched: this._touched,
+              focused: this._focused,
+              valid: result,
+              invalid: !result
+            }
+          },
+          bubbles: true,
+          composed: true
+        })
+      );
+    });
+  }
+  clear() {
+    this.reset();
+    this._value = "";
   }
-  _generateValidateEvent() {
+  _registerAtContainer(valid) {
     this.dispatchEvent(
-      new CustomEvent("validate-form", {
+      new CustomEvent("pd-form-element-register", {
         detail: {
-          singleElement: this,
-          errorMap: /* @__PURE__ */ new Map()
+          name: this.valueName || this.id || "field",
+          value: this._getInitialValue(),
+          state: {
+            pristine: this._pristine,
+            dirty: this._dirty,
+            touched: this._touched,
+            focused: this._focused,
+            valid,
+            invalid: !valid
+          }
         },
-        composed: true,
-        bubbles: true
+        bubbles: true,
+        composed: true
       })
     );
   }
-  _handleChangedValue(newValue, event, checkReturn = false, showValidateMsg = false) {
-    const changed = this.value !== newValue;
+  _collectValidators() {
+    const validators = [];
+    if (this.required) {
+      validators.push(requiredValidator);
+      if (this._inputType === INPUT_TYPE_SELECT) {
+        validators.push(requiredSelectValidator);
+      }
+      if (this._inputType === INPUT_TYPE_RANGE) {
+        validators.push(requiredRangeValidator);
+      }
+      if (this._inputType === INPUT_TYPE_CHECK) {
+        validators.push(requiredCheckedValidator);
+      }
+    }
+    if (this.fieldType === "mail") {
+      validators.push(emailValidator);
+    }
+    if (this.fieldType === "number") {
+      validators.push(numberValidator);
+    }
+    if (this.fieldType === "phone") {
+      validators.push(phoneValidator);
+    }
+    if (this.fieldType === "vat") {
+      validators.push(vatValidator);
+    }
+    return [...validators, ...this._validators];
+  }
+  _handleChangedValue(newValue, event, dispatchEvent = false, checkReturn = false) {
+    const changed = this._value !== newValue;
     let keyCode = "-1";
-    if (event instanceof KeyboardEvent) {
+    if (event && event instanceof KeyboardEvent) {
       keyCode = event.key;
     }
-    this.value = newValue;
-    const eventDetail = {
-      value: newValue,
-      name: this.valueName,
-      keyCode,
-      changed
-    };
     if (checkReturn && keyCode === KEY_RETURN) {
       this.dispatchEvent(
         new CustomEvent("enter-pressed", {
-          detail: eventDetail,
-          composed: true,
-          bubbles: true
+          detail: {
+            value: newValue,
+            name: this.valueName || this.id || "field",
+            keyCode,
+            changed
+          },
+          bubbles: true,
+          composed: true
         })
       );
-      event.preventDefault();
+      event == null ? void 0 : event.preventDefault();
     }
     if (changed) {
-      this.dispatchEvent(
-        new CustomEvent("field-change", {
-          detail: eventDetail,
-          composed: true,
-          bubbles: true
-        })
-      );
-    }
-    if (showValidateMsg) {
-      clearTimeout(delayTimer);
-      delayTimer = window.setTimeout(
-        () => this._generateValidateEvent(),
-        DELAY_WAIT_TIME_MS
-      );
+      this._value = newValue;
+      this._pristine = false;
+      this._dirty = true;
+      this.runValidators().then((result) => {
+        if (dispatchEvent) {
+          this._dispatchChange(newValue);
+        }
+      });
     }
   }
+  _dispatchChange(value, eventName) {
+    this.dispatchEvent(
+      new CustomEvent(eventName || "pd-form-element-change", {
+        detail: {
+          value,
+          name: this.valueName || this.id || "field",
+          state: {
+            pristine: this._pristine,
+            dirty: this._dirty,
+            touched: this._touched,
+            focused: this._focused,
+            valid: this._valid,
+            invalid: this._invalid
+          }
+        },
+        bubbles: true,
+        composed: true
+      })
+    );
+  }
+  getClassmap(specific = {}) {
+    return {
+      ...specific,
+      error: this._invalid,
+      valid: this._valid && this._value,
+      focus: this._focused,
+      prestine: this._pristine,
+      dirty: this._dirty
+    };
+  }
   _renderErrorMsg() {
     return this._errorMsg ? html`
           <div class="error-box error">
@@ -125,8 +234,9 @@ const _PdBaseUIInput = class _PdBaseUIInput extends PdBaseUI {
               <pd-hover-box>
                 <pd-icon
                   slot="normal-view"
-                  icon="helpIcon"
+                  icon="${pdIcons.ICON_HELP}"
                   activeIcon
+                  class="help-icon"
                 ></pd-icon>
                 <p slot="info-view">${this.helperTxt}</p>
               </pd-hover-box>
@@ -134,6 +244,52 @@ const _PdBaseUIInput = class _PdBaseUIInput extends PdBaseUI {
       </div>
     `;
   }
+  runValidators(dryRun) {
+    if (!dryRun) {
+      this._errorMsg = "";
+      this._valid = true;
+      this._invalid = false;
+    }
+    const validators = this._collectValidators();
+    const asyncChecks = [];
+    for (const validator of validators) {
+      const result = validator(this._value);
+      if (result instanceof Promise) {
+        asyncChecks.push(result);
+      } else if (result) {
+        if (!dryRun) {
+          this._errorMsg = result;
+          this._valid = false;
+          this._invalid = true;
+        }
+        return Promise.resolve(false);
+      }
+    }
+    if (asyncChecks.length > 0) {
+      return Promise.all(asyncChecks).then((results) => {
+        const firstError = results.find((r) => r !== null);
+        if (firstError) {
+          if (!dryRun) {
+            this._errorMsg = firstError;
+            this._valid = false;
+            this._invalid = true;
+          }
+          return Promise.resolve(false);
+        } else {
+          if (!dryRun) {
+            this._errorMsg = "";
+            this._valid = true;
+            this._invalid = false;
+          }
+        }
+        return Promise.resolve(true);
+      });
+    }
+    return Promise.resolve(true);
+  }
+  _getInitialValue(reset) {
+    return reset ? this.initValue || "" : this.initValue || this._value || "";
+  }
 };
 _PdBaseUIInput.styles = [
   PdBaseUI.styles,
@@ -145,12 +301,11 @@ _PdBaseUIInput.styles = [
         justify-content: space-between;
       }
 
-      .label-header pd-icon {
-        --pd-icon-size: 1.25rem;
+      .help-icon {
+        --pd-icon-size: 20px;
         --pd-icon-col-active: var(--pd-default-col);
         --pd-icon-col-active-hover: var(--pd-default-hover-col);
         --pd-icon-stroke-width: 0;
-        padding-right: 5px;
         cursor: help;
       }
     `
@@ -182,16 +337,37 @@ __decorateClass([
 ], PdBaseUIInput.prototype, "defaultRequiredChar");
 __decorateClass([
   property({ type: String })
-], PdBaseUIInput.prototype, "defaultValue");
+], PdBaseUIInput.prototype, "label");
 __decorateClass([
   property({ type: String })
-], PdBaseUIInput.prototype, "label");
+], PdBaseUIInput.prototype, "fieldType");
 __decorateClass([
   property({ type: String })
-], PdBaseUIInput.prototype, "value");
+], PdBaseUIInput.prototype, "initValue");
+__decorateClass([
+  state()
+], PdBaseUIInput.prototype, "_valid");
+__decorateClass([
+  state()
+], PdBaseUIInput.prototype, "_invalid");
+__decorateClass([
+  state()
+], PdBaseUIInput.prototype, "_dirty");
+__decorateClass([
+  state()
+], PdBaseUIInput.prototype, "_pristine");
+__decorateClass([
+  state()
+], PdBaseUIInput.prototype, "_touched");
+__decorateClass([
+  state()
+], PdBaseUIInput.prototype, "_focused");
 __decorateClass([
   state()
 ], PdBaseUIInput.prototype, "_errorMsg");
+__decorateClass([
+  state()
+], PdBaseUIInput.prototype, "_value");
 __decorateClass([
   state()
 ], PdBaseUIInput.prototype, "_inputType");

package/dist/pd-checkbox.d.ts

@@ -1,14 +1,15 @@
 import { CSSResultGroup } from 'lit';
 import { PdBaseUIInput } from './pd-base-ui-input';
 export declare class PdCheckbox extends PdBaseUIInput {
-    isSwitch: boolean;
-    private _hasInner;
+    checkType: "CHECK" | "RADIO" | "SWITCH";
     static styles: CSSResultGroup;
     constructor();
-    firstUpdated(): void;
+    setCheckedState(newValue: "true" | "false"): void;
     render(): import('lit-html').TemplateResult<1>;
     private _onClick;
     private _onKeyPress;
     private _onLinkClick;
+    protected _getInitialValue(reset?: boolean): string;
+    clear(): void;
 }
 //# sourceMappingURL=pd-checkbox.d.ts.map

package/dist/pd-checkbox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"pd-checkbox.d.ts","sourceRoot":"","sources":["../src/pd-checkbox.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqCG;AAEH,OAAO,EAAa,cAAc,EAAE,MAAM,KAAK,CAAC;AAIhD,OAAO,0CAA0C,CAAC;AAElD,OAAO,EAAE,aAAa,EAAoB,MAAM,oBAAoB,CAAC;AAErE,qBACa,UAAW,SAAQ,aAAa;IAE3C,QAAQ,UAAS;IAGjB,OAAO,CAAC,SAAS,CAAS;IAE1B,OAAgB,MAAM,EAAE,cAAc,CAmKpC;;IAOO,YAAY;IAIZ,MAAM;IAuCf,OAAO,CAAC,QAAQ;IAOhB,OAAO,CAAC,WAAW;IAOnB,OAAO,CAAC,YAAY;CAGrB"}
+{"version":3,"file":"pd-checkbox.d.ts","sourceRoot":"","sources":["../src/pd-checkbox.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqCG;AAEH,OAAO,EAAa,cAAc,EAAE,MAAM,KAAK,CAAC;AAIhD,OAAO,0CAA0C,CAAC;AAElD,OAAO,EAAE,aAAa,EAAoB,MAAM,oBAAoB,CAAC;AAGrE,qBACa,UAAW,SAAQ,aAAa;IAE3C,SAAS,EAAE,OAAO,GAAG,OAAO,GAAG,QAAQ,CAAW;IAElD,OAAgB,MAAM,EAAE,cAAc,CAgMpC;;IAOK,eAAe,CAAC,QAAQ,EAAE,MAAM,GAAG,OAAO,GAAG,IAAI;IAI/C,MAAM;IAuCf,OAAO,CAAC,QAAQ;IAMhB,OAAO,CAAC,WAAW;IAOnB,OAAO,CAAC,YAAY;IAIpB,SAAS,CAAC,gBAAgB,CAAC,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM;IAM5C,KAAK,IAAI,IAAI;CAGrB"}

package/dist/pd-checkbox.js

@@ -1,8 +1,9 @@
 import { css, html } from "lit";
-import { property, state, customElement } from "lit/decorators.js";
+import { property, customElement } from "lit/decorators.js";
 import { classMap } from "lit/directives/class-map.js";
 import "@progressive-development/pd-icon/pd-icon";
 import { PdBaseUIInput, INPUT_TYPE_CHECK } from "./pd-base-ui-input.js";
+import { pdIcons } from "@progressive-development/pd-icon";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -16,52 +17,48 @@ var __decorateClass = (decorators, target, key, kind) => {
 let PdCheckbox = class extends PdBaseUIInput {
   constructor() {
     super();
-    this.isSwitch = false;
-    this._hasInner = false;
+    this.checkType = "CHECK";
     this._inputType = INPUT_TYPE_CHECK;
   }
-  firstUpdated() {
-    this._hasInner = this.innerHTML.trim().length > 0;
+  setCheckedState(newValue) {
+    this._value = newValue;
   }
   render() {
-    const checked = this.value === "true";
+    const checked = this._value === "true";
     const inputId = `${this.id}Check`;
     const classMapVal = {
       disabled: this.disabled,
-      switch: this.isSwitch,
+      switch: this.checkType === "SWITCH",
+      "radio-outer": this.checkType === "RADIO",
       readonly: this.readonly,
       "div-container": true
     };
     const aClassMap = {
-      "switch-paddle": this.isSwitch,
-      checkbox: !this.isSwitch,
+      "switch-paddle": this.checkType === "SWITCH",
+      checkbox: this.checkType === "CHECK",
+      radio: this.checkType === "RADIO",
       isChecked: checked,
       isUnchecked: !checked
     };
     return html`
       ${this._renderLabel(inputId)}
       <div @click=${this._onClick} class=${classMap(classMapVal)}>
-        <a
-          href="#"
-          @click=${this._onLinkClick}
-          @keypress=${this._onKeyPress}
-          class=${classMap(aClassMap)}
-        >
+        <div class=${classMap(aClassMap)}>
           <pd-icon
-            icon=${this.isSwitch ? "checkBox" : "checkBoxOnlyCheck"}
-            class="small"
+            icon=${this.checkType === "SWITCH" ? pdIcons.ICON_CHECKBOX : this.checkType === "RADIO" ? pdIcons.ICON_CIRCLE : pdIcons.ICON_CHECKBOX_ONLY_CHECK}
+            class="${this.checkType === "RADIO" ? "round" : ""}"
             ?activeIcon=${checked}
           ></pd-icon>
-        </a>
-        ${this._hasInner ? html`<span class="label"><slot></slot></span>` : null}
+        </div>
+        <span class="label"><slot></slot></span>
       </div>
       ${this._renderErrorMsg()}
     `;
   }
   _onClick(event) {
     if (this.disabled || this.readonly) return;
-    const checked = this.value === "true";
-    this._handleChangedValue(!checked ? "true" : "false", event);
+    const checked = this._value === "true";
+    this._handleChangedValue(!checked ? "true" : "false", event, true);
   }
   _onKeyPress(event) {
     event.preventDefault();
@@ -72,6 +69,12 @@ let PdCheckbox = class extends PdBaseUIInput {
   _onLinkClick(event) {
     event.preventDefault();
   }
+  _getInitialValue(reset) {
+    return reset ? this.initValue || "false" : this.initValue || this._value || "false";
+  }
+  clear() {
+    this.reset();
+  }
 };
 PdCheckbox.styles = [
   PdBaseUIInput.styles,
@@ -79,23 +82,29 @@ PdCheckbox.styles = [
       :host {
         display: inline-block;
 
-        /* Style for active checkbox => use defaults from pd-icon if no custom properties set */
-        --pd-icon-col-active: var(--pd-cb-col);
-        --pd-icon-col-active-hover: var(--pd-cb-col-hover);
-        --pd-icon-bg-col-active: var(--pd-cb-bg-col);
-        --pd-icon-stroke-col-active: var(--pd-cb-stroke-col);
-        --pd-icon-stroke-col-active-hover: var(--pd-cb-stroke-col-hover);
+        /* active checkbox */
+        --pd-icon-bg-col-active: var(
+          --pd-cb-bg-col,
+          var(--pd-default-light-col)
+        );
+        --pd-icon-col-active: var(--pd-cb-col, var(--pd-default-hover-col));
+        --pd-icon-stroke-col-active: var(
+          --pd-cb-stroke-col,
+          var(--pd-default-col)
+        );
+
+        /* inactive checkbox */
+        --pd-icon-bg-col: var(
+          --pd-cb-unset-bg-col,
+          var(--pd-default-light-col)
+        );
+        --pd-icon-col: var(--pd-cb-col, var(--pd-default-bg-dark-col));
+        --pd-icon-stroke-col: var(--pd-cb-stroke-col, var(--pd-default-col));
 
-        /* Style for inactive checkbox */
-        --pd-icon-col: var(--pd-cb-unset-col);
-        --pd-icon-col-hover: var(--pd-cb-unset-col-hover);
-        --pd-icon-bg-col: var(--pd-cb-unset-bg-col);
-        --pd-icon-stroke-col: var(--pd-cb-unset-stroke-col);
-        --pd-icon-stroke-col-hover: var(--pd-cb-unset-stroke-col-hover);
+        --pd-icon-bg-col-hover: var(--pd-cb-bg-col, var(--pd-default-bg-col));
       }
 
-      /* Switch pd-icon => Prüfen, bei mir musste ich reflect setzten, wird das verwendet? */
-      :host([isSwitch]) {
+      :host([checkType="SWITCH"]) {
         /* derzeit keine Angaben */
       }
 
@@ -106,7 +115,7 @@ PdCheckbox.styles = [
       }
 
       .div-container.disabled {
-        opacity: 0.5;
+        opacity: 0.7;
         cursor: auto;
       }
 
@@ -114,6 +123,22 @@ PdCheckbox.styles = [
         cursor: auto;
       }
 
+      .label {
+        margin-left: 0.1rem;
+        color: var(--pd-cb-font-col, var(--pd-default-font-input-col));
+        font-family: var(--pd-default-font-input-family);
+        text-align: left;
+        font-size: var(--pd-default-font-input-size);
+      }
+
+      .readonly .label {
+        color: var(--pd-cb-font-col-readonly, #4d4d4d);
+      }
+
+      .disabled .label {
+        color: var(--pd-cb-font-col-disabled, #4d4d4d);
+      }
+
       /*
        * Class checkbox for icon and a element (checkbox case)
        */
@@ -123,33 +148,43 @@ PdCheckbox.styles = [
         line-height: 0;
         align-items: center;
         justify-content: center;
-        /*
-        Wurde das hier für Border verwendet? Aktuell border in folgendem Element gesetzt
-        background-color: var(--pd-cb-border-col, var(--pd-primary-col, #067394));
-        */
       }
 
       .checkbox pd-icon {
+        --pd-icon-size: 1.3rem;
         margin-right: 0.2rem;
         margin-bottom: 0.2rem;
         border: 2px solid var(--pd-cb-border-col, var(--pd-default-col));
         border-radius: var(--pd-cb-border-radius, 3px);
       }
 
-      .label {
-        margin-left: 0.1rem;
-        color: var(--pd-cb-font-col, var(--pd-default-font-input-col));
-        font-family: var(--pd-default-font-input-family);
-        text-align: left;
-        font-size: var(--pd-default-font-input-size);
+      .readonly .checkbox pd-icon,
+      .disabled .checkbox pd-icon {
+        border-color: var(--pd-cb-border-col-readonly, darkgrey);
       }
 
-      .readonly .label {
-        color: var(--pd-cb-font-col-readonly, #4d4d4d);
+      /*
+       * Class Radio for icon and a element (radio group case)
+       */
+      .radio-outer .label {
+        margin-left: 0.7rem;
       }
 
-      .readonly .checkbox pd-icon {
-        border-color: var(--pd-cb-border-col-readonly, transparent);
+      .radio {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+
+      .radio pd-icon {
+        --pd-icon-size: 1.5rem;
+        --pd-icon-round-padding: 0.1rem;
+        border: 2px solid var(--pd-cb-border-col, var(--pd-default-col));
+      }
+
+      .readonly .radio pd-icon,
+      .disabled .radio pd-icon {
+        border-color: var(--pd-cb-border-col-readonly, darkgrey);
       }
 
       /* Switch styles */
@@ -172,23 +207,20 @@ PdCheckbox.styles = [
         vertical-align: baseline;
         margin: 0;
         position: relative;
-        min-width: 4rem;
-        max-width: 4rem;
-        height: 2rem;
+        min-width: 4.1rem;
+        max-width: 4.1rem;
+        height: 1.9rem;
         border-radius: 0;
         background: var(--pd-cb-switch-paddle-col, var(--pd-default-col));
-        font-weight: inherit;
-        color: inherit;
         cursor: pointer;
       }
 
       .switch-paddle pd-icon {
+        --pd-icon-size: 1.25rem;
         position: absolute;
         top: 0;
         left: 0;
         display: block;
-        width: 1.5rem;
-        height: 1.5rem;
         -webkit-transform: translate3d(0, 0, 0);
         transform: translate3d(0, 0, 0);
         border: 2px solid var(--pd-cb-border-col, var(--pd-default-col));
@@ -238,11 +270,8 @@ PdCheckbox.styles = [
     `
 ];
 __decorateClass([
-  property({ type: Boolean })
-], PdCheckbox.prototype, "isSwitch", 2);
-__decorateClass([
-  state()
-], PdCheckbox.prototype, "_hasInner", 2);
+  property({ type: String, reflect: true })
+], PdCheckbox.prototype, "checkType", 2);
 PdCheckbox = __decorateClass([
   customElement("pd-checkbox")
 ], PdCheckbox);

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

@@ -1,5 +1,6 @@
 import { CSSResultGroup, TemplateResult } from 'lit';
 import { PdBaseUI } from './pd-base-ui.js';
+import { PdFormElementStatus } from './types.js';
 export declare class PdFormContainer extends PdBaseUI {
     /**
      * If true, display info about required fields
@@ -9,17 +10,20 @@ export declare class PdFormContainer extends PdBaseUI {
      * Optional general error message
      */
     commonError: string;
-    /**
-     * Internal: whether all required fields are valid
-     */
-    private _requiredFieldsValid;
+    private _fields;
     static styles: CSSResultGroup;
     connectedCallback(): void;
     disconnectedCallback(): void;
     render(): TemplateResult;
-    private _validateForm;
-    private static _mailIsValid;
-    private static _vatIsValid;
-    private static _phoneIsValid;
+    private _renderValidationInfo;
+    private _onRegister;
+    private _onChange;
+    private _onBlur;
+    private _onFocus;
+    private _getOverallValidity;
+    triggerValidate(): Promise<void>;
+    getValues(): Record<string, any>;
+    reset(): void;
+    getStatus(): Map<string, PdFormElementStatus>;
 }
 //# sourceMappingURL=pd-form-container.d.ts.map