@progressive-development/pd-forms 0.9.2 → 1.0.0

package/LICENSE

@@ -1,2 +1,21 @@
-No License, all rights reserved
-@2021 - PD Progressive Development UG
+MIT License
+
+Copyright (c) 2021-present PD Progressive Development UG
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,76 +1,70 @@
-# \<pd-forms>
+# @progressive-development/pd-forms
 
-This webcomponent follows the [open-wc](https://github.com/open-wc/open-wc) recommendation.
+[![npm version](https://img.shields.io/npm/v/@progressive-development/pd-forms.svg)](https://www.npmjs.com/package/@progressive-development/pd-forms)
+[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](LICENSE)
+
+Accessible, themeable form components built with Lit.
+
+## Features
+
+- **Lit 3 & TypeScript** – Modern, type-safe web components
+- **Accessible** – WCAG 2.1 compliant, keyboard navigation, ARIA support
+- **Themeable** – CSS Custom Properties for easy customization
+- **Localized** – Built-in i18n support (EN, DE, BE)
+- **Lightweight** – No heavy dependencies, tree-shakeable
+- **Framework-agnostic** – Works with React, Vue, Angular, or vanilla JS
+- **Complete Form Toolkit** – All form elements covered: inputs, selects, checkboxes, radios, file uploads, ranges, and autocomplete
+- **Flexible Layout System** – Nested containers, rows, fieldsets, and form-fields with 12-column grid alignment
+- **Async Validation** – Promise-based validators for backend checks like email uniqueness
+- **Centralized Form State** – Auto-tracked validity, dirty/pristine, and touched states via `<pd-form-container>`
+- **Consistent Cross-Browser UI** – Custom-styled checkboxes, radios, and selects that look identical everywhere
+- **Rich Helper Text** – Descriptions, hints, error messages, and character counts per field
 
 ## Installation
 
 ```bash
-npm i pd-forms
+npm install @progressive-development/pd-forms
 ```
 
-## Usage
+## Quick Start
 
 ```html
 <script type="module">
-  import 'pd-forms/pd-forms.js';
+  import '@progressive-development/pd-forms';
 </script>
 
-<pd-forms></pd-forms>
-```
-
-## Linting and formatting
-
-To scan the project for linting and formatting errors, run
-
-```bash
-npm run lint
-```
-
-To automatically fix linting and formatting errors, run
-
-```bash
-npm run format
-```
-
-## Testing with Web Test Runner
-
-To execute a single test run:
-
-```bash
-npm run test
-```
-
-To run the tests in interactive watch mode run:
-
-```bash
-npm run test:watch
-```
-
-## Demoing with Storybook
-
-To run a local instance of Storybook for your component, run
-
-```bash
-npm run storybook
-```
-
-To build a production version of Storybook, run
-
-```bash
-npm run storybook:build
-```
-
-
-## Tooling configs
-
-For most of the tools, the configuration is in the `package.json` to minimize the amount of files in your project.
-
-If you customize the configuration a lot, you can consider moving them to individual files.
-
-## Local Demo with `web-dev-server`
-
-```bash
-npm start
+<pd-form-container>
+  <pd-input label="Name" required></pd-input>
+  <pd-button type="submit">Submit</pd-button>
+</pd-form-container>
 ```
 
-To run a local development server that serves the basic demo located in `demo/index.html`
+## Components
+
+| Component | Description |
+|-----------|-------------|
+| `<pd-button>` | Button with variants and states |
+| `<pd-button-group>` | Group multiple buttons |
+| `<pd-button-select-group>` | Toggle button selection group |
+| `<pd-panel-button>` | Large panel-style button |
+| `<pd-checkbox>` | Checkbox with label |
+| `<pd-radio-group>` | Radio button group |
+| `<pd-input>` | Text input with validation |
+| `<pd-input-area>` | Multi-line text input |
+| `<pd-input-file>` | File upload input |
+| `<pd-input-time>` | Time picker input |
+| `<pd-select>` | Dropdown select |
+| `<pd-range>` | Range slider |
+| `<pd-suggestion-box>` | Autocomplete input |
+| `<pd-form-container>` | Form layout container |
+| `<pd-form-field>` | Form field wrapper |
+| `<pd-form-row>` | Form row layout |
+| `<pd-hover-box>` | Hover-triggered content box |
+
+## Documentation
+
+📖 **Full documentation:** [pd-components.web.app](https://pd-components.web.app/)
+
+## License
+
+MIT © [PD Progressive Development UG](https://progressive-development.com)

package/dist/base/pd-base-input-element.d.ts

@@ -2,24 +2,24 @@ import { CSSResultGroup } from 'lit';
 import { PdBaseUIInput } from './pd-base-ui-input.js';
 import { PdAutocomplete } from '../types.js';
 /**
- * Abstraktes Basiselement für pd-input-Komponenten (Input, Area, Select).
+ * Abstract base class for pd-input components (Input, Area, Select).
+ *
+ * @event pd-form-element-blur - Fired when input loses focus.
+ * @event pd-form-element-focus - Fired when input gains focus.
  */
 export declare abstract class PdBaseInputElement extends PdBaseUIInput {
-    /**
-     * Placeholder für Eingabefeld.
-     */
+    /** Placeholder text for the input field. */
     placeHolder: string;
-    /**
-     * Interner Name des Eingabefelds (nicht verwendet), Backup für Autocomplete.
-     */
+    /** Internal field name for autocomplete fallback. */
     name: string;
-    /**
-     * Attribut für native Autocomplete-Unterstützung.
-     */
+    /** Native autocomplete attribute value. */
     autoCompleteName: PdAutocomplete;
+    /** @ignore */
     protected _input: HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement | PdBaseInputElement;
+    /** @ignore */
     private _delayTimerId?;
     static styles: CSSResultGroup;
+    disconnectedCallback(): void;
     firstUpdated(): void;
     focus(): void;
     protected _onBlur(event: Event): void;

package/dist/base/pd-base-input-element.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"pd-base-input-element.d.ts","sourceRoot":"","sources":["../../src/base/pd-base-input-element.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAErC,OAAO,EACL,aAAa,EAOd,MAAM,uBAAuB,CAAC;AAG/B,OAAO,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAK7C;;GAEG;AACH,8BAAsB,kBAAmB,SAAQ,aAAa;IAC5D;;OAEG;IAEH,WAAW,SAAM;IAEjB;;OAEG;IAEH,IAAI,SAAM;IAEV;;OAEG;IAEH,gBAAgB,EAAE,cAAc,CAAS;IAEzC,SAAS,CAAC,MAAM,EACZ,gBAAgB,GAChB,mBAAmB,GACnB,iBAAiB,GACjB,kBAAkB,CAAC;IAEvB,OAAO,CAAC,aAAa,CAAC,CAAS;IAE/B,OAAgB,MAAM,EAAE,cAAc,CAGpC;IAEO,YAAY,IAAI,IAAI;IAO7B,KAAK,IAAI,IAAI;IAIb,SAAS,CAAC,OAAO,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI;IAuBrC,SAAS,CAAC,QAAQ,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI;IActC,SAAS,CAAC,QAAQ,CAAC,KAAK,EAAE,aAAa,GAAG,IAAI;IAWrC,iCAAiC,CAAC,MAAM,EAAE,OAAO;IAO1D,SAAS,CAAC,eAAe,IAAI,MAAM;IAiB1B,eAAe;CAezB"}
+{"version":3,"file":"pd-base-input-element.d.ts","sourceRoot":"","sources":["../../src/base/pd-base-input-element.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAErC,OAAO,EACL,aAAa,EAOd,MAAM,uBAAuB,CAAC;AAG/B,OAAO,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAK7C;;;;;GAKG;AACH,8BAAsB,kBAAmB,SAAQ,aAAa;IAC5D,4CAA4C;IAE5C,WAAW,SAAM;IAEjB,qDAAqD;IAErD,IAAI,SAAM;IAEV,2CAA2C;IAE3C,gBAAgB,EAAE,cAAc,CAAS;IAEzC,cAAc;IACd,SAAS,CAAC,MAAM,EACZ,gBAAgB,GAChB,mBAAmB,GACnB,iBAAiB,GACjB,kBAAkB,CAAC;IAEvB,cAAc;IACd,OAAO,CAAC,aAAa,CAAC,CAAS;IAE/B,OAAgB,MAAM,EAAE,cAAc,CAGpC;IAEO,oBAAoB,IAAI,IAAI;IAQ5B,YAAY,IAAI,IAAI;IAO7B,KAAK,IAAI,IAAI;IAIb,SAAS,CAAC,OAAO,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI;IAuBrC,SAAS,CAAC,QAAQ,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI;IActC,SAAS,CAAC,QAAQ,CAAC,KAAK,EAAE,aAAa,GAAG,IAAI;IAWrC,iCAAiC,CAAC,MAAM,EAAE,OAAO;IAO1D,SAAS,CAAC,eAAe,IAAI,MAAM;IAiB1B,eAAe;CAezB"}

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

@@ -25,6 +25,13 @@ class PdBaseInputElement extends PdBaseUIInput {
       SharedInputFieldStyles
     ];
   }
+  disconnectedCallback() {
+    if (this._delayTimerId) {
+      clearTimeout(this._delayTimerId);
+      this._delayTimerId = void 0;
+    }
+    super.disconnectedCallback();
+  }
   firstUpdated() {
     this._input = this.shadowRoot?.querySelector(
       this._getElementName()
@@ -103,7 +110,7 @@ class PdBaseInputElement extends PdBaseUIInput {
         return this.fieldType === "number" ? Number(this._value) : this._value;
       }
     } catch (e) {
-      console.warn("Invalid validation", e);
+      return null;
     }
     return this._value;
   }

package/dist/base/pd-base-ui-input.d.ts

@@ -1,4 +1,4 @@
-import { CSSResultGroup, PropertyValues } from 'lit';
+import { CSSResultGroup, PropertyValues, nothing } from 'lit';
 import { PdBaseUI } from './pd-base-ui';
 import { PdFieldType, PdFormValidatorFn } from '../types';
 /**
@@ -16,51 +16,76 @@ export declare const INPUT_TYPE_CHECK_GROUP = 6;
 export declare const INPUT_TYPE_DATE = 7;
 export declare const INPUT_TYPE_FILE = 8;
 export declare const INPUT_TYPE_TIME = 9;
+/**
+ * Abstract base class for pd-input elements.
+ *
+ *
+ * @event validate-form - Fired when input value changes for form validation.
+ * @event enter-pressed - Fired when Enter key pressed during focus.
+ * @event pd-form-element-change - Fired when field value changes with state details.
+ */
 export declare abstract class PdBaseUIInput extends PdBaseUI {
-    /**
-     * Fired when an input element change its values.
-     * @event validate-form
-     */
-    /**
-     * Fired when enter was pressend during focus on input element.
-     * @event enter-pressed
-     */
-    /**
-     * Fired when field-value changed.
-     * @event pd-form-element-change
-     */
+    /** Apply gradient styling. */
     gradient: boolean;
+    /** Disable the input. */
     disabled: boolean;
+    /** Make the input read-only. */
     readonly: boolean;
+    /** Mark the input as required. */
     required: boolean;
+    /** Custom error message for required validation. */
     requiredMsg: string;
+    /** Helper text shown via hover icon. */
     helperTxt: string;
+    /** Field name for form submission. */
     valueName: string;
+    /** Character shown after required field labels. */
     defaultRequiredChar: string;
+    /** Label text for the input. */
     label: string;
+    /** Field type for validation (text, mail, number, phone, vat). */
     fieldType: PdFieldType;
+    /** Initial value for the input. */
     initValue: string;
+    /** Mark as internal element (used by composite components). */
     internalElement: boolean;
+    /** Dispatch change event when initValue changes. */
     handleChangeForInitVal: boolean;
+    /** Grid span for width control within pd-form-row. */
+    span: string;
+    /** @ignore */
     protected _valid: boolean;
+    /** @ignore */
     protected _invalid: boolean;
+    /** @ignore */
     protected _dirty: boolean;
+    /** @ignore */
     protected _pristine: boolean;
+    /** @ignore */
     protected _touched: boolean;
+    /** @ignore */
     protected _focused: boolean;
+    /** @ignore */
     protected _errorMsg: string;
+    /** @ignore */
     protected _value: string;
+    /** Internal input type identifier (set by subclass constructor). */
     protected _inputType: number;
+    /** @ignore */
     protected _validators: PdFormValidatorFn[];
     static styles: CSSResultGroup;
     update(changedProps: PropertyValues<this>): void;
     firstUpdated(): void;
     disconnectedCallback(): void;
+    /** Current validation error message. */
     get errorMsg(): string;
     set errorMsg(msg: string);
+    /** Current input value. */
     get value(): string;
     set value(val: string);
+    /** Set error state manually. */
     set error(val: boolean);
+    /** Set valid state manually. */
     set valid(isValid: boolean);
     reset(): void;
     clear(): void;
@@ -71,13 +96,13 @@ export declare abstract class PdBaseUIInput extends PdBaseUI {
     protected _dispatchChange(value: string, eventName?: string): void;
     protected getClassmap(specific?: Record<string, boolean>): {
         error: boolean;
-        valid: string | false;
+        valid: boolean | "";
         focus: boolean;
         prestine: boolean;
         dirty: boolean;
     };
-    protected _renderErrorMsg(): import('lit').TemplateResult<1> | "";
-    protected _renderLabel(forParam: string, additionalValue?: string): import('lit').TemplateResult<1>;
+    protected _renderErrorMsg(errorId?: string): import('lit').TemplateResult<1> | "";
+    protected _renderLabel(forParam: string, additionalValue?: string): typeof nothing | import('lit').TemplateResult<1>;
     runValidators(dryRun?: boolean): Promise<boolean>;
     protected _handleStatusForInnerInputElement(status: boolean): void;
     protected _getInitialValue(reset?: boolean): string;

package/dist/base/pd-base-ui-input.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"pd-base-ui-input.d.ts","sourceRoot":"","sources":["../../src/base/pd-base-ui-input.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"pd-base-ui-input.d.ts","sourceRoot":"","sources":["../../src/base/pd-base-ui-input.ts"],"names":[],"mappings":"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"}

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

@@ -1,9 +1,10 @@
-import { css, html } from 'lit';
+import { css, html, nothing } 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 { UNDEF } from '../types.js';
 import { requiredValidator, requiredSelectValidator, requiredRangeValidator, requiredCheckedValidator, emailValidator, numberValidator, phoneValidator, vatValidator } from '../validators.js';
 import '../pd-hover-box.js';
 
@@ -41,6 +42,7 @@ class PdBaseUIInput extends PdBaseUI {
     this.initValue = "";
     this.internalElement = false;
     this.handleChangeForInitVal = false;
+    this.span = "full";
     this._valid = false;
     this._invalid = false;
     this._dirty = false;
@@ -50,6 +52,7 @@ class PdBaseUIInput extends PdBaseUI {
     this._errorMsg = "";
     this._value = "";
     this._inputType = -1;
+    /** @ignore */
     this._validators = [];
   }
   static {
@@ -61,6 +64,10 @@ class PdBaseUIInput extends PdBaseUI {
         display: flex;
         align-items: end;
         justify-content: space-between;
+        width: var(--pd-input-field-width, 250px);
+        max-width: 100%;
+        min-width: 150px;
+        box-sizing: border-box;
       }
 
       .help-icon {
@@ -71,8 +78,10 @@ class PdBaseUIInput extends PdBaseUI {
     ];
   }
   update(changedProps) {
-    if (changedProps.has("initValue") && (this.initValue || changedProps.get("initValue"))) {
-      if (this.handleChangeForInitVal) {
+    const hasInitValueChange = changedProps.has("initValue");
+    const condition = this.initValue || changedProps.get("initValue");
+    if (hasInitValueChange && condition) {
+      if (this.handleChangeForInitVal && this.initValue && this.initValue !== UNDEF) {
         this._handleChangedValue(this.initValue, void 0, true);
       } else {
         this._value = this.initValue;
@@ -89,21 +98,25 @@ class PdBaseUIInput extends PdBaseUI {
     this._unRegisterAtContainer();
     super.disconnectedCallback();
   }
+  /** Current validation error message. */
   get errorMsg() {
     return this._errorMsg;
   }
   set errorMsg(msg) {
     this._errorMsg = msg;
   }
+  /** Current input value. */
   get value() {
     return this._value;
   }
   set value(val) {
     this._handleChangedValue(val, void 0, true);
   }
+  /** Set error state manually. */
   set error(val) {
     this._invalid = val;
   }
+  /** Set valid state manually. */
   set valid(isValid) {
     this._valid = isValid;
   }
@@ -261,20 +274,23 @@ class PdBaseUIInput extends PdBaseUI {
     return {
       ...specific,
       error: this._invalid,
-      valid: this._valid && this._value,
+      valid: this._valid && this._value && this._value !== UNDEF,
       focus: this._focused,
       prestine: this._pristine,
       dirty: this._dirty
     };
   }
-  _renderErrorMsg() {
+  _renderErrorMsg(errorId) {
     return this._errorMsg ? html`
-          <div class="error-box error">
+          <div id="${errorId || ""}" class="error-box error">
             <p class="error-msg">${this._errorMsg}</p>
           </div>
         ` : "";
   }
   _renderLabel(forParam, additionalValue) {
+    if (!this.label && !this.helperTxt && !additionalValue) {
+      return nothing;
+    }
     return html`
       <div class="label-header">
         <label for="${forParam}">
@@ -402,6 +418,9 @@ __decorateClass([
 __decorateClass([
   property({ type: Boolean })
 ], PdBaseUIInput.prototype, "handleChangeForInitVal");
+__decorateClass([
+  property({ type: String, reflect: true })
+], PdBaseUIInput.prototype, "span");
 __decorateClass([
   state()
 ], PdBaseUIInput.prototype, "_valid");

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

@@ -1,23 +1,5 @@
 import { LitElement } from 'lit';
 
-/**
- * @license
- * Copyright (c) 2021 PD Progressive Development UG. All rights reserved.
- *
- * Abstract base lit class for all pd-form elements.
- * Import shared-global-style to make common custom properties available to all components.
- *
- * Used from:
- * - pd-base-ui-input
- *
- * Used to:
- * - define css (import shared-global-styles.js)
- * - define common properties (detailieren, aktuell keine)
- * - define updateWhenLocaleChanges for all pd-elements (check, aktuell nur für pd-form-container benötigt)
- *
- * Custom Properties (shared-global-styles):
- * ... TODO
- */
 class PdBaseUI extends LitElement {
   static {
     this.styles = [];

package/dist/generated/locales/be.d.ts

@@ -11,5 +11,8 @@ export declare const templates: {
     "pd.form.required.valid": string;
     s512f37f2dba563ec: import('@lit/localize').StrResult;
     s8a355eeb33f58c5f: import('@lit/localize').StrResult;
+    "pd.suggestion.box.load.data": string;
+    "pd.suggestion.box.error.txt": string;
+    "pd.suggestion.box.add.new": import('@lit/localize').StrResult;
 };
 //# sourceMappingURL=be.d.ts.map

package/dist/generated/locales/be.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"be.d.ts","sourceRoot":"","sources":["../../../src/generated/locales/be.ts"],"names":[],"mappings":"AAQA,eAAO,MAAM,SAAS;;;;;;;;;;;;;CAarB,CAAC"}
+{"version":3,"file":"be.d.ts","sourceRoot":"","sources":["../../../src/generated/locales/be.ts"],"names":[],"mappings":"AAQA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;CAgBrB,CAAC"}

package/dist/generated/locales/de.d.ts

@@ -11,5 +11,8 @@ export declare const templates: {
     "pd.form.required.missing": string;
     s8a355eeb33f58c5f: import('@lit/localize').StrResult;
     s512f37f2dba563ec: import('@lit/localize').StrResult;
+    "pd.suggestion.box.load.data": string;
+    "pd.suggestion.box.error.txt": string;
+    "pd.suggestion.box.add.new": import('@lit/localize').StrResult;
 };
 //# sourceMappingURL=de.d.ts.map

package/dist/generated/locales/de.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"de.d.ts","sourceRoot":"","sources":["../../../src/generated/locales/de.ts"],"names":[],"mappings":"AAQA,eAAO,MAAM,SAAS;;;;;;;;;;;;;CAarB,CAAC"}
+{"version":3,"file":"de.d.ts","sourceRoot":"","sources":["../../../src/generated/locales/de.ts"],"names":[],"mappings":"AAQA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;CAgBrB,CAAC"}

package/dist/generated/locales/en.d.ts

@@ -11,5 +11,8 @@ export declare const templates: {
     "pd.form.required.valid": string;
     s512f37f2dba563ec: import('@lit/localize').StrResult;
     s8a355eeb33f58c5f: import('@lit/localize').StrResult;
+    "pd.suggestion.box.load.data": string;
+    "pd.suggestion.box.error.txt": string;
+    "pd.suggestion.box.add.new": import('@lit/localize').StrResult;
 };
 //# sourceMappingURL=en.d.ts.map

package/dist/generated/locales/en.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"en.d.ts","sourceRoot":"","sources":["../../../src/generated/locales/en.ts"],"names":[],"mappings":"AAQA,eAAO,MAAM,SAAS;;;;;;;;;;;;;CAarB,CAAC"}
+{"version":3,"file":"en.d.ts","sourceRoot":"","sources":["../../../src/generated/locales/en.ts"],"names":[],"mappings":"AAQA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;CAgBrB,CAAC"}

package/dist/index.d.ts

@@ -1,4 +1,6 @@
 export { PdFormRow } from './pd-form-row/pd-form-row.js';
+export { PdFormField } from './pd-form-field/pd-form-field.js';
+export { PdFormFieldset } from './pd-form-fieldset/pd-form-fieldset.js';
 export { PdButton } from './pd-button/pd-button.js';
 export { PdCheckbox } from './pd-checkbox/pd-checkbox.js';
 export { PdFormContainer } from './pd-form-container/pd-form-container.js';
@@ -9,7 +11,8 @@ export { PdInputFile } from './pd-input-file/pd-input-file.js';
 export { PdInputTime } from './pd-input-time/pd-input-time.js';
 export { PdRadioGroup } from './pd-radio-group/pd-radio-group.js';
 export { PdBaseInputElement } from './base/pd-base-input-element.js';
-export type { PdAutocomplete, PdSelectOption, PdFieldType, PdFormElementStatus, PdFormValidatorFn, ButtonData, } from './types.js';
+export { PdGenericForm } from './pd-generic-form/pd-generic-form.js';
+export type { PdAutocomplete, PdSelectOption, PdFieldType, PdFormElementStatus, PdFormValidatorFn, ButtonData, SuggestedElement, } from './types.js';
 export { UNDEF } from './types.js';
 export * as pdValidator from './validators.js';
 export { templates as beTemplates } from './generated/locales/be.js';

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AACzD,OAAO,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAC;AACpD,OAAO,EAAE,UAAU,EAAE,MAAM,8BAA8B,CAAC;AAC1D,OAAO,EAAE,eAAe,EAAE,MAAM,0CAA0C,CAAC;AAE3E,OAAO,EAAE,UAAU,EAAE,MAAM,gCAAgC,CAAC;AAC5D,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AACjD,OAAO,EAAE,WAAW,EAAE,MAAM,kCAAkC,CAAC;AAC/D,OAAO,EAAE,WAAW,EAAE,MAAM,kCAAkC,CAAC;AAC/D,OAAO,EAAE,WAAW,EAAE,MAAM,kCAAkC,CAAC;AAC/D,OAAO,EAAE,YAAY,EAAE,MAAM,oCAAoC,CAAC;AAClE,OAAO,EAAE,kBAAkB,EAAE,MAAM,iCAAiC,CAAC;AAErE,YAAY,EACV,cAAc,EACd,cAAc,EACd,WAAW,EACX,mBAAmB,EACnB,iBAAiB,EACjB,UAAU,GACX,MAAM,YAAY,CAAC;AAEpB,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AAEnC,OAAO,KAAK,WAAW,MAAM,iBAAiB,CAAC;AAE/C,OAAO,EAAE,SAAS,IAAI,WAAW,EAAE,MAAM,2BAA2B,CAAC;AACrE,OAAO,EAAE,SAAS,IAAI,WAAW,EAAE,MAAM,2BAA2B,CAAC;AACrE,OAAO,EAAE,SAAS,IAAI,WAAW,EAAE,MAAM,2BAA2B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AACzD,OAAO,EAAE,WAAW,EAAE,MAAM,kCAAkC,CAAC;AAC/D,OAAO,EAAE,cAAc,EAAE,MAAM,wCAAwC,CAAC;AACxE,OAAO,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAC;AACpD,OAAO,EAAE,UAAU,EAAE,MAAM,8BAA8B,CAAC;AAC1D,OAAO,EAAE,eAAe,EAAE,MAAM,0CAA0C,CAAC;AAE3E,OAAO,EAAE,UAAU,EAAE,MAAM,gCAAgC,CAAC;AAC5D,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AACjD,OAAO,EAAE,WAAW,EAAE,MAAM,kCAAkC,CAAC;AAC/D,OAAO,EAAE,WAAW,EAAE,MAAM,kCAAkC,CAAC;AAC/D,OAAO,EAAE,WAAW,EAAE,MAAM,kCAAkC,CAAC;AAC/D,OAAO,EAAE,YAAY,EAAE,MAAM,oCAAoC,CAAC;AAClE,OAAO,EAAE,kBAAkB,EAAE,MAAM,iCAAiC,CAAC;AACrE,OAAO,EAAE,aAAa,EAAE,MAAM,sCAAsC,CAAC;AAErE,YAAY,EACV,cAAc,EACd,cAAc,EACd,WAAW,EACX,mBAAmB,EACnB,iBAAiB,EACjB,UAAU,EACV,gBAAgB,GACjB,MAAM,YAAY,CAAC;AAEpB,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AAEnC,OAAO,KAAK,WAAW,MAAM,iBAAiB,CAAC;AAE/C,OAAO,EAAE,SAAS,IAAI,WAAW,EAAE,MAAM,2BAA2B,CAAC;AACrE,OAAO,EAAE,SAAS,IAAI,WAAW,EAAE,MAAM,2BAA2B,CAAC;AACrE,OAAO,EAAE,SAAS,IAAI,WAAW,EAAE,MAAM,2BAA2B,CAAC"}

package/dist/index.js

@@ -1,4 +1,6 @@
 import './pd-form-row.js';
+import './pd-form-field.js';
+import './pd-form-fieldset/pd-form-fieldset.js';
 import './pd-button.js';
 import './pd-checkbox.js';
 import './pd-form-container.js';
@@ -9,6 +11,7 @@ import './pd-input-file.js';
 import './pd-input-time.js';
 import './pd-radio-group.js';
 export { PdBaseInputElement } from './base/pd-base-input-element.js';
+import './pd-generic-form.js';
 export { UNDEF } from './types.js';
 import * as validators from './validators.js';
 export { validators as pdValidator };
@@ -16,6 +19,8 @@ export { templates as beTemplates } from './locales/be.js';
 export { templates as deTemplates } from './locales/de.js';
 export { templates as enTemplates } from './locales/en.js';
 export { PdFormRow } from './pd-form-row/PdFormRow.js';
+export { PdFormField } from './pd-form-field/PdFormField.js';
+export { PdFormFieldset } from './pd-form-fieldset/PdFormFieldset.js';
 export { PdButton } from './pd-button/PdButton.js';
 export { PdCheckbox } from './pd-checkbox/PdCheckbox.js';
 export { PdFormContainer } from './pd-form-container/PdFormContainer.js';
@@ -25,3 +30,4 @@ export { PdInputArea } from './pd-input-area/PdInputArea.js';
 export { PdInputFile } from './pd-input-file/PdInputFile.js';
 export { PdInputTime } from './pd-input-time/PdInputTime.js';
 export { PdRadioGroup } from './pd-radio-group/PdRadioGroup.js';
+export { PdGenericForm } from './pd-generic-form/PdGenericForm.js';

package/dist/locales/be.js

@@ -12,7 +12,10 @@ const templates = {
   "pd.form.required.missing": `* Verplicht veld ontbreekt of is onjuist ingevuld`,
   "pd.form.required.valid": `* Verplichte velden ingevuld`,
   s512f37f2dba563ec: str`Maximaal ${0} tekens`,
-  s8a355eeb33f58c5f: str`Minimaal ${0} tekens`
+  s8a355eeb33f58c5f: str`Minimaal ${0} tekens`,
+  "pd.suggestion.box.load.data": `Daten werden geladen`,
+  "pd.suggestion.box.error.txt": `Technischer Fehler bei der Suche`,
+  "pd.suggestion.box.add.new": str`"${0}" neu anlegen`
 };
 
 export { templates };

package/dist/locales/de.js

@@ -12,7 +12,10 @@ const templates = {
   "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`
+  s512f37f2dba563ec: str`Maximal ${0} Zeichen`,
+  "pd.suggestion.box.load.data": `Daten werden geladen`,
+  "pd.suggestion.box.error.txt": `Technischer Fehler bei der Suche`,
+  "pd.suggestion.box.add.new": str`"${0}" neu anlegen`
 };
 
 export { templates };

package/dist/locales/en.js

@@ -12,7 +12,10 @@ const templates = {
   "pd.form.required.missing": `* Required field missing or invalid`,
   "pd.form.required.valid": `* Required fields filled`,
   s512f37f2dba563ec: str`Maximum ${0} characters`,
-  s8a355eeb33f58c5f: str`At least ${0} characters`
+  s8a355eeb33f58c5f: str`At least ${0} characters`,
+  "pd.suggestion.box.load.data": `Daten werden geladen`,
+  "pd.suggestion.box.error.txt": `Technischer Fehler bei der Suche`,
+  "pd.suggestion.box.add.new": str`"${0}" neu anlegen`
 };
 
 export { templates };