@progressive-development/pd-forms 0.8.6 → 0.9.1

package/dist/pd-checkbox.js

@@ -1,281 +1,8 @@
-import { css, html } from "lit";
-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) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp(target, key, result);
-  return result;
-};
-let PdCheckbox = class extends PdBaseUIInput {
-  constructor() {
-    super();
-    this.checkType = "CHECK";
-    this._inputType = INPUT_TYPE_CHECK;
-  }
-  setCheckedState(newValue) {
-    this._value = newValue;
-  }
-  render() {
-    const checked = this._value === "true";
-    const inputId = `${this.id}Check`;
-    const classMapVal = {
-      disabled: this.disabled,
-      switch: this.checkType === "SWITCH",
-      "radio-outer": this.checkType === "RADIO",
-      readonly: this.readonly,
-      "div-container": true
-    };
-    const aClassMap = {
-      "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)}>
-        <div class=${classMap(aClassMap)}>
-          <pd-icon
-            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>
-        </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, true);
-  }
-  _onKeyPress(event) {
-    event.preventDefault();
-    if (event.key === " " || event.code === "Space") {
-      this._onClick(event);
-    }
-  }
-  _onLinkClick(event) {
-    event.preventDefault();
-  }
-  _getInitialValue(reset) {
-    return reset ? this.initValue || "false" : this.initValue || this._value || "false";
-  }
-  clear() {
-    this.reset();
-  }
-};
-PdCheckbox.styles = [
-  PdBaseUIInput.styles,
-  css`
-      :host {
-        display: inline-block;
+import { PdCheckbox } from './pd-checkbox/PdCheckbox.js';
 
-        /* active checkbox */
-        --pd-icon-bg-col-active: var(
-          --pd-cb-bg-col,
-          var(--pd-default-lightest-col)
-        );
-        --pd-icon-col-active: var(
-          --pd-cb-col,
-          var(--pd-default-success-dark-col)
-        );
+const tag = "pd-checkbox";
+if (!customElements.get(tag)) {
+  customElements.define(tag, PdCheckbox);
+}
 
-        /* inactive checkbox */
-        --pd-icon-bg-col: var(
-          --pd-cb-unset-bg-col,
-          var(--pd-default-lightest-col)
-        );
-        --pd-icon-col: var(--pd-cb-col, var(--pd-default-error-dark-col));
-
-        --pd-icon-bg-col-hover: var(
-          --pd-cb-bg-col,
-          var(--pd-default-light-col)
-        );
-      }
-
-      :host([checkType="SWITCH"]) {
-        /* derzeit keine Angaben */
-      }
-
-      .div-container {
-        display: flex;
-        align-items: center;
-        cursor: pointer;
-      }
-
-      .div-container.disabled {
-        opacity: 0.7;
-        cursor: auto;
-      }
-
-      .div-container.readonly {
-        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)
-       */
-      .checkbox {
-        display: flex;
-        border-radius: 4px;
-        line-height: 0;
-        align-items: center;
-        justify-content: center;
-      }
-
-      .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);
-      }
-
-      .readonly .checkbox pd-icon,
-      .disabled .checkbox pd-icon {
-        border-color: var(--pd-cb-border-col-readonly, darkgrey);
-      }
-
-      /*
-       * Class Radio for icon and a element (radio group case)
-       */
-      .radio-outer .label {
-        margin-left: 0.7rem;
-      }
-
-      .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 */
-      .switch {
-        height: var(--pd-cb-switch-height);
-        position: relative;
-        outline: 0;
-        -webkit-user-select: none;
-        -moz-user-select: none;
-        -ms-user-select: none;
-        user-select: none;
-      }
-
-      .switch .label {
-        margin-left: 0.5rem;
-      }
-
-      .switch-paddle {
-        display: inline-block;
-        vertical-align: baseline;
-        margin: 0;
-        position: relative;
-        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));
-        cursor: pointer;
-      }
-
-      .switch-paddle pd-icon {
-        --pd-icon-size: 1.25rem;
-        position: absolute;
-        top: 0;
-        left: 0;
-        display: block;
-        -webkit-transform: translate3d(0, 0, 0);
-        transform: translate3d(0, 0, 0);
-        border: 2px solid var(--pd-cb-border-col, var(--pd-default-col));
-        box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
-        border-radius: var(--pd-cb-border-radius, 4px);
-        -webkit-transition: all 0.25s ease-out;
-        transition: all 0.25s ease-out;
-        content: "";
-      }
-
-      .disabled .switch-paddle {
-        cursor: auto;
-      }
-
-      .readonly .switch-paddle {
-        cursor: auto;
-        max-width: 2rem;
-        min-width: 2rem;
-        background: none;
-
-        /* Prüfen TODO
-        --pd-icon-bg: transparent;
-        --pd-icon-fill: var(--card-dark-red);
-        --pd-icon-fill-hover: var(--pd-icon-fill);
-        --pd-icon-fill-active: var(--card-medium-green);
-        */
-      }
-
-      .readonly .switch-paddle pd-icon {
-        border-color: var(--pd-cb-border-col-readonly, transparent);
-      }
-
-      .readonly .isChecked.switch-paddle pd-icon {
-        transform: translate3d(0, 0, 0);
-        left: 0rem;
-      }
-
-      .isChecked.switch-paddle pd-icon {
-        left: 2.25rem;
-      }
-
-      @media (min-width: 580px) {
-        :host {
-          font-size: 1rem;
-        }
-      }
-    `
-];
-__decorateClass([
-  property({ type: String, reflect: true })
-], PdCheckbox.prototype, "checkType", 2);
-PdCheckbox = __decorateClass([
-  customElement("pd-checkbox")
-], PdCheckbox);
-export {
-  PdCheckbox
-};
+export { PdCheckbox };

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

@@ -0,0 +1,42 @@
+import { CSSResultGroup, TemplateResult } from 'lit';
+import { PdBaseUI } from '../base/pd-base-ui.js';
+import { PdFormElementStatus } from '../types.js';
+/**
+ * @tagname pd-form-container
+ */
+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
+     */
+    commonError: string;
+    private _fields;
+    static styles: CSSResultGroup;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    render(): TemplateResult;
+    private _renderValidationInfo;
+    private _onRegister;
+    private _onUnRegister;
+    private _onUnRegisterBound;
+    private _onChange;
+    private _onBlur;
+    private _onFocus;
+    private _getOverallValidity;
+    triggerValidate(): Promise<boolean>;
+    getValues(): {
+        origin: Record<string, any>;
+        parsed: Record<string, any>;
+    };
+    reset(): void;
+    getStatus(): Map<string, PdFormElementStatus>;
+    get valid(): boolean;
+}
+//# sourceMappingURL=PdFormContainer.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PdFormContainer.d.ts","sourceRoot":"","sources":["../../src/pd-form-container/PdFormContainer.ts"],"names":[],"mappings":"AACA;;;;;;;;;GASG;AAEH,OAAO,EAAa,KAAK,cAAc,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAI1E,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjD,OAAO,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AAElD;;GAEG;AACH,qBAAa,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,CA8BpC;IAEO,iBAAiB,IAAI,IAAI;IA0BzB,oBAAoB,IAAI,IAAI;IA0B5B,MAAM,IAAI,cAAc;IAWjC,OAAO,CAAC,qBAAqB;IAc7B,OAAO,CAAC,WAAW,CA8BjB;IAEF,OAAO,CAAC,aAAa,CAkBnB;IAEF,OAAO,CAAC,kBAAkB,CAAiC;IAE3D,OAAO,CAAC,SAAS,CA2Bf;IAEF,OAAO,CAAC,OAAO,CAQb;IAEF,OAAO,CAAC,QAAQ,CAOd;IAEF,OAAO,CAAC,mBAAmB;IAad,eAAe,IAAI,OAAO,CAAC,OAAO,CAAC;IAYzC,SAAS,IAAI;QAClB,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;QAC5B,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;KAC7B;IAcM,KAAK,IAAI,IAAI;IAMb,SAAS,IAAI,GAAG,CAAC,MAAM,EAAE,mBAAmB,CAAC;IAIpD,IAAI,KAAK,YAER;CACF"}

package/dist/pd-form-container/PdFormContainer.js

@@ -0,0 +1,269 @@
+import { css, html } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import { msg } from '@lit/localize';
+import { PdBaseUI } from '../base/pd-base-ui.js';
+
+var __defProp = Object.defineProperty;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = void 0 ;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (decorator(target, key, result) ) || result;
+  if (result) __defProp(target, key, result);
+  return result;
+};
+class PdFormContainer extends PdBaseUI {
+  constructor() {
+    super(...arguments);
+    this.requiredFieldInfo = false;
+    this.autoTrimm = false;
+    this.commonError = "";
+    this._fields = /* @__PURE__ */ new Map();
+    this._onRegister = (e) => {
+      const { name, value, parsedValue, state: state2 } = e.detail;
+      console.debug("###### _onRegister", name, value, state2);
+      if (!this._fields.has(name)) {
+        this._fields.set(name, {
+          name,
+          value,
+          parsedValue,
+          valid: state2.valid,
+          invalid: state2.invalid,
+          pristine: state2.pristine,
+          dirty: state2.dirty,
+          touched: state2.touched,
+          focused: state2.focus,
+          errors: {},
+          element: e.target
+        });
+        this.requestUpdate();
+        this.dispatchEvent(
+          new CustomEvent("pd-form-change", {
+            detail: {
+              overallValidity: this._getOverallValidity()
+            }
+          })
+        );
+      }
+      e.stopPropagation();
+    };
+    this._onUnRegister = (e) => {
+      const { name, value } = e.detail;
+      console.debug("###### _onUnRegister", name, value);
+      if (this._fields.has(name)) {
+        this._fields.delete(name);
+        this.requestUpdate();
+        this.dispatchEvent(
+          new CustomEvent("pd-form-change", {
+            detail: {
+              overallValidity: this._getOverallValidity()
+            }
+          })
+        );
+      }
+      e.stopPropagation();
+    };
+    this._onUnRegisterBound = this._onUnRegister.bind(this);
+    this._onChange = (e) => {
+      const { name, value, parsedValue, 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.parsedValue = parsedValue;
+        field.pristine = state2.pristine;
+        field.dirty = state2.dirty;
+        field.touched = state2.touched;
+        field.focused = state2.focused;
+        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;
+      const field = this._fields.get(name);
+      if (field) {
+        field.touched = true;
+        field.focused = false;
+      }
+      e.stopPropagation();
+    };
+    this._onFocus = (e) => {
+      const { name } = e.detail;
+      const field = this._fields.get(name);
+      if (field) {
+        field.focused = true;
+      }
+      e.stopPropagation();
+    };
+  }
+  static {
+    this.styles = [
+      PdBaseUI.styles,
+      css`
+      :host {
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+      }
+
+      .validation-info {
+        font-family: var(--pd-default-font-content-family);
+        font-size: var(--pd-form-info-font-size, 0.8em);
+        padding-top: 0.8em;
+        color: var(--pd-form-container-default-col, var(--pd-default-dark-col));
+      }
+
+      .valid {
+        color: var(
+          --pd-form-container-valid-col,
+          var(--pd-default-success-dark-col)
+        );
+      }
+
+      .invalid {
+        color: var(
+          --pd-form-container-invalid-col,
+          var(--pd-default-error-dark-col)
+        );
+      }
+    `
+    ];
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.addEventListener(
+      "pd-form-element-register",
+      this._onRegister
+    );
+    this.addEventListener(
+      "pd-form-element-change",
+      this._onChange
+    );
+    this.addEventListener(
+      "pd-form-element-blur",
+      this._onBlur
+    );
+    this.addEventListener(
+      "pd-form-element-focus",
+      this._onFocus
+    );
+    document.addEventListener(
+      "pd-form-element-unregister",
+      this._onUnRegisterBound
+    );
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeEventListener(
+      "pd-form-element-register",
+      this._onRegister
+    );
+    this.removeEventListener(
+      "pd-form-element-change",
+      this._onChange
+    );
+    this.removeEventListener(
+      "pd-form-element-blur",
+      this._onBlur
+    );
+    this.removeEventListener(
+      "pd-form-element-focus",
+      this._onFocus
+    );
+    document.removeEventListener(
+      "pd-form-element-unregister",
+      this._onUnRegisterBound
+    );
+  }
+  render() {
+    return html`
+      <form>
+        <slot></slot>
+        ${this.requiredFieldInfo || this.commonError ? this._renderValidationInfo() : ""}
+      </form>
+    `;
+  }
+  _renderValidationInfo() {
+    const allValid = this._getOverallValidity() && !this.commonError;
+    return html`
+      <p class="validation-info ${allValid ? "valid" : "invalid"}">
+        ${allValid ? msg("* Felder ausgefüllt", { id: "pd.form.required.valid" }) : this.commonError || msg("* Pflichtfeld fehlt oder fehlerhaft", {
+      id: "pd.form.required.missing"
+    })}
+      </p>
+    `;
+  }
+  _getOverallValidity() {
+    if (this._fields.size === 0) {
+      return false;
+    }
+    for (const field of this._fields.values()) {
+      if (field.invalid) {
+        return false;
+      }
+    }
+    return true;
+  }
+  async triggerValidate() {
+    const validations = [];
+    this._fields.forEach((field) => {
+      const result = field.element?.runValidators();
+      if (result instanceof Promise) {
+        validations.push(result);
+      }
+    });
+    await Promise.all(validations);
+    return this._getOverallValidity();
+  }
+  getValues() {
+    const origin = {};
+    const parsed = {};
+    this._fields.forEach((field, key) => {
+      let value = field.value;
+      if (this.autoTrimm === true && typeof value === "string") {
+        value = value.trim();
+      }
+      origin[key] = value;
+      parsed[key] = field.parsedValue;
+    });
+    return { origin, parsed };
+  }
+  reset() {
+    this._fields.forEach((field) => {
+      field.element?.reset();
+    });
+  }
+  getStatus() {
+    return this._fields;
+  }
+  get valid() {
+    return this._getOverallValidity();
+  }
+}
+__decorateClass([
+  property({ type: Boolean })
+], PdFormContainer.prototype, "requiredFieldInfo");
+__decorateClass([
+  property({ type: Boolean })
+], PdFormContainer.prototype, "autoTrimm");
+__decorateClass([
+  property({ type: String })
+], PdFormContainer.prototype, "commonError");
+__decorateClass([
+  state()
+], PdFormContainer.prototype, "_fields");
+
+export { PdFormContainer };

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

@@ -0,0 +1 @@
+{"version":3,"file":"form-container.stories.d.ts","sourceRoot":"","sources":["../../src/pd-form-container/form-container.stories.ts"],"names":[],"mappings":"AAEA,OAAO,EAAQ,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAE3D,OAAO,wBAAwB,CAAC;AAChC,OAAO,+BAA+B,CAAC;AACvC,OAAO,yBAAyB,CAAC;AACjC,OAAO,mCAAmC,CAAC;AAC3C,OAAO,mCAAmC,CAAC;AAC3C,OAAO,yBAAyB,CAAC;AAGjC,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;CAeM,CAAC;AAEjB,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAUtB,eAAO,MAAM,aAAa,EAAE,KAwI3B,CAAC;AAEF,eAAO,MAAM,4BAA4B,EAAE,KAiH1C,CAAC"}

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

@@ -0,0 +1 @@
+{"version":3,"file":"form-container2.stories.d.ts","sourceRoot":"","sources":["../../src/pd-form-container/form-container2.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAQ,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAM3D,OAAO,wBAAwB,CAAC;AAChC,OAAO,+BAA+B,CAAC;AACvC,OAAO,yBAAyB,CAAC;AACjC,OAAO,mCAAmC,CAAC;AAC3C,OAAO,yBAAyB,CAAC;AACjC,OAAO,2BAA2B,CAAC;AACnC,OAAO,qCAAqC,CAAC;AAC7C,OAAO,+BAA+B,CAAC;AACvC,OAAO,mCAAmC,CAAC;AAC3C,OAAO,mCAAmC,CAAC;AAE3C,QAAA,MAAM,IAAI;;CAEM,CAAC;AAEjB,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAStB,eAAO,MAAM,qBAAqB,EAAE,KA0RnC,CAAC"}

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

@@ -0,0 +1 @@
+{"version":3,"file":"form-container3.stories.d.ts","sourceRoot":"","sources":["../../src/pd-form-container/form-container3.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAQ,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAK3D,OAAO,wBAAwB,CAAC;AAChC,OAAO,+BAA+B,CAAC;AACvC,OAAO,yBAAyB,CAAC;AACjC,OAAO,mCAAmC,CAAC;AAC3C,OAAO,yBAAyB,CAAC;AACjC,OAAO,2BAA2B,CAAC;AACnC,OAAO,qCAAqC,CAAC;AAC7C,OAAO,+BAA+B,CAAC;AACvC,OAAO,mCAAmC,CAAC;AAC3C,OAAO,mCAAmC,CAAC;AAE3C,QAAA,MAAM,IAAI;;CAEM,CAAC;AAEjB,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAStB,eAAO,MAAM,uBAAuB,EAAE,KA8DrC,CAAC;AAEF,eAAO,MAAM,2BAA2B,EAAE,KAiEzC,CAAC;AAEF,eAAO,MAAM,iCAAiC,EAAE,KAiF/C,CAAC;AAEF,eAAO,MAAM,4BAA4B,EAAE,KA4D1C,CAAC"}

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

@@ -0,0 +1,3 @@
+import { PdFormContainer } from './PdFormContainer.js';
+export { PdFormContainer };
+//# sourceMappingURL=pd-form-container.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pd-form-container.d.ts","sourceRoot":"","sources":["../../src/pd-form-container/pd-form-container.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAOvD,OAAO,EAAE,eAAe,EAAE,CAAC"}

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

@@ -1,36 +1,2 @@
-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
-     */
-    requiredFieldInfo: boolean;
-    /**
-     * If true, trim fields when values are returned.
-     */
-    autoTrimm: boolean;
-    /**
-     * Optional general error message
-     */
-    commonError: string;
-    private _fields;
-    static styles: CSSResultGroup;
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-    render(): TemplateResult;
-    private _renderValidationInfo;
-    private _onRegister;
-    private _onUnRegister;
-    private _onUnRegisterBound;
-    private _onChange;
-    private _onBlur;
-    private _onFocus;
-    private _getOverallValidity;
-    triggerValidate(): Promise<boolean>;
-    getValues(): Record<string, any>;
-    reset(): void;
-    getStatus(): Map<string, PdFormElementStatus>;
-    get valid(): boolean;
-}
-//# sourceMappingURL=pd-form-container.d.ts.map
+export * from './pd-form-container/pd-form-container'
+export {}