@progressive-development/pd-forms 0.6.5 → 0.6.7

package/dist/pd-radio-group.js

@@ -12,26 +12,11 @@ var __decorateClass = (decorators, target, key, kind) => {
 };
 let PdRadioGroup = class extends PdBaseUIInput {
   firstUpdated() {
-    this.addEventListener("field-change", (e) => {
-      const target = e.target;
-      const checkboxes2 = this.querySelectorAll("pd-checkbox");
-      checkboxes2.forEach((el) => {
-        const isActive = el === target;
-        el.value = isActive ? "true" : "false";
-        el.readonly = isActive;
-        if (isActive) {
-          this.value = el.valueName;
-        }
-      });
-      this._dispatchValidation();
-    });
-    const checkboxes = this.querySelectorAll("pd-checkbox");
-    checkboxes.forEach((el) => {
-      if (el.value === "true") {
-        el.readonly = true;
-        this.value = el.valueName;
-      }
-    });
+    this.addEventListener("pd-form-element-register", this._onInternalRegister);
+    this.addEventListener("pd-form-element-change", this._onInternalChange);
+    this.addEventListener("pd-form-element-focus", this._onInternalFocus);
+    this.addEventListener("pd-form-element-blur", this._onInternalBlur);
+    super.firstUpdated();
   }
   render() {
     const radioInputId = `${this.id}RadioGroup`;
@@ -39,27 +24,62 @@ let PdRadioGroup = class extends PdBaseUIInput {
       ${this._renderLabel(radioInputId)}
       <div
         id=${radioInputId}
-        class="group-style input ${classMap({
-      error: this.errorMsg.length > 0
-    })}"
+        class="${classMap(
+      this.getClassmap({
+        "group-style": true,
+        input: true
+      })
+    )}"
       >
         <slot></slot>
       </div>
       ${this._renderErrorMsg()}
     `;
   }
-  _dispatchValidation() {
-    this.dispatchEvent(
-      new CustomEvent("validate-form", {
-        detail: {
-          singleElement: this,
-          errorMap: /* @__PURE__ */ new Map()
-        },
-        composed: true,
-        bubbles: true
-      })
-    );
+  _onInternalBlur(e) {
+    e.stopPropagation();
+  }
+  _onInternalFocus(e) {
+    e.stopPropagation();
   }
+  _onInternalChange(e) {
+    if (e.target !== this) {
+      e.stopPropagation();
+      const target = e.target;
+      const checkboxes = this.querySelectorAll("pd-checkbox");
+      let newValue;
+      checkboxes.forEach((el) => {
+        const isActive = el === target;
+        el.readonly = isActive;
+        el.setCheckedState(isActive ? "true" : "false");
+        if (isActive) {
+          newValue = el.valueName;
+        }
+      });
+      this.value = newValue || "";
+    }
+  }
+  _onInternalRegister(e) {
+    if (e.target !== this) {
+      e.stopPropagation();
+      if (e.detail.value === "true") {
+        this.value = e.detail.name;
+      }
+    }
+  }
+  /*
+    public reset(): void {
+      const checkboxes = this.querySelectorAll("pd-checkbox");
+      checkboxes.forEach((el) => {                  
+        (el as any).reset();
+      });
+      super.reset();
+    }
+  
+    public clear(): void {
+      this.reset();
+    }
+    */
 };
 PdRadioGroup.styles = [
   PdBaseUIInput.styles,

package/dist/pd-range.d.ts

@@ -1,4 +1,4 @@
-import { CSSResultGroup } from 'lit';
+import { CSSResultGroup, PropertyValues } from 'lit';
 import { PdBaseUIInput } from './pd-base-ui-input.js';
 export declare class PdRange extends PdBaseUIInput {
     min: number;
@@ -9,8 +9,14 @@ export declare class PdRange extends PdBaseUIInput {
     protected _input: HTMLInputElement | null | undefined;
     static styles: CSSResultGroup;
     constructor();
-    protected firstUpdated(): void;
+    update(changedProps: PropertyValues<this>): void;
+    firstUpdated(): void;
     protected _onChange(e: Event): void;
+    protected _onBlur(event: Event): void;
+    protected _onFocus(event: Event): void;
+    focus(): void;
     render(): import('lit-html').TemplateResult<1>;
+    _getInitialValue(): string;
+    clear(): void;
 }
 //# sourceMappingURL=pd-range.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"pd-range.d.ts","sourceRoot":"","sources":["../src/pd-range.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAa,cAAc,EAAE,MAAM,KAAK,CAAC;AAIhD,OAAO,EAAE,aAAa,EAAoB,MAAM,uBAAuB,CAAC;AAExE,qBACa,OAAQ,SAAQ,aAAa;IAExC,GAAG,EAAE,MAAM,CAAK;IAGhB,GAAG,EAAE,MAAM,CAAM;IAGjB,IAAI,SAAK;IAGT,iBAAiB,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAM;IAG/C,IAAI,SAAM;IAEV,SAAS,CAAC,MAAM,EAAG,gBAAgB,GAAG,IAAI,GAAG,SAAS,CAAC;IAEvD,OAAgB,MAAM,EAAE,cAAc,CAqJpC;;cAOiB,YAAY,IAAI,IAAI;IAIvC,SAAS,CAAC,SAAS,CAAC,CAAC,EAAE,KAAK,GAAG,IAAI;IAI1B,MAAM;CA8BhB"}
+{"version":3,"file":"pd-range.d.ts","sourceRoot":"","sources":["../src/pd-range.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAa,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAIhE,OAAO,EAAE,aAAa,EAAoB,MAAM,uBAAuB,CAAC;AAExE,qBACa,OAAQ,SAAQ,aAAa;IAExC,GAAG,EAAE,MAAM,CAAK;IAGhB,GAAG,EAAE,MAAM,CAAM;IAGjB,IAAI,SAAK;IAGT,iBAAiB,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAM;IAG/C,IAAI,SAAM;IAEV,SAAS,CAAC,MAAM,EAAG,gBAAgB,GAAG,IAAI,GAAG,SAAS,CAAC;IAEvD,OAAgB,MAAM,EAAE,cAAc,CAqJpC;;IAOO,MAAM,CAAC,YAAY,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAOhD,YAAY,IAAI,IAAI;IAK7B,SAAS,CAAC,SAAS,CAAC,CAAC,EAAE,KAAK,GAAG,IAAI;IAInC,SAAS,CAAC,OAAO,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI;IAgBrC,SAAS,CAAC,QAAQ,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI;IActC,KAAK,IAAI,IAAI;IAIJ,MAAM;IAuCN,gBAAgB,IAAI,MAAM;IAI5B,KAAK,IAAI,IAAI;CAGrB"}

package/dist/pd-range.js

@@ -22,26 +22,72 @@ let PdRange = class extends PdBaseUIInput {
     this.name = "";
     this._inputType = INPUT_TYPE_RANGE;
   }
+  update(changedProps) {
+    if (changedProps.has("optionValueMapper") && !this.initValue) {
+      this._value = Object.keys(this.optionValueMapper)[0];
+    }
+    super.update(changedProps);
+  }
   firstUpdated() {
     var _a;
     this._input = (_a = this.shadowRoot) == null ? void 0 : _a.querySelector("input");
+    super.firstUpdated();
   }
   _onChange(e) {
     var _a;
-    this._handleChangedValue(((_a = this._input) == null ? void 0 : _a.value) ?? "", e, false);
+    this._handleChangedValue(((_a = this._input) == null ? void 0 : _a.value) ?? "", e, true);
+  }
+  _onBlur(event) {
+    var _a;
+    this._focused = false;
+    this._touched = true;
+    this.dispatchEvent(
+      new CustomEvent("pd-form-element-blur", {
+        detail: {
+          name: this.valueName || this.id || "field",
+          value: (_a = this._input) == null ? void 0 : _a.value
+        },
+        bubbles: true,
+        composed: true
+      })
+    );
+  }
+  _onFocus(event) {
+    var _a;
+    this._focused = true;
+    this.dispatchEvent(
+      new CustomEvent("pd-form-element-focus", {
+        detail: {
+          name: this.valueName || this.id || "field",
+          value: (_a = this._input) == null ? void 0 : _a.value
+        },
+        bubbles: true,
+        composed: true
+      })
+    );
+  }
+  focus() {
+    var _a;
+    (_a = this._input) == null ? void 0 : _a.focus();
   }
   render() {
     const inputId = `${this.id}Range`;
-    const labelDetail = this.optionValueMapper[this.value] || this.value;
+    const labelDetail = this.optionValueMapper[this._value] || this._value;
     return html`
       ${this._renderLabel(inputId, labelDetail)}
-      <div class="input-range ${classMap({ error: this.errorMsg.length > 0 })}">
+      <div
+        class="${classMap(
+      this.getClassmap({
+        "input-range": true
+      })
+    )}"
+      >
         <input
           id=${inputId}
           name=${this.name || this.valueName || ""}
           class="input-range-style ${this.gradient ? "gradient" : ""}"
           type="range"
-          .value=${this.value}
+          .value=${this._value}
           ?readonly=${this.readonly}
           ?disabled=${this.disabled}
           min=${this.min}
@@ -49,9 +95,11 @@ let PdRange = class extends PdBaseUIInput {
           step=${this.step}
           @change=${this._onChange}
           @input=${this._onChange}
+          @blur=${this._onBlur}
+          @focus=${this._onFocus}
         />
         <div class="ticks ${this.disabled ? "disabled" : "enabled"}">
-          ${Array.from({ length: 5 }).map(
+          ${Array.from({ length: this.max - this.min + 1 }).map(
       () => html`<span class="tick">|</span>`
     )}
         </div>
@@ -59,6 +107,12 @@ let PdRange = class extends PdBaseUIInput {
       ${this._renderErrorMsg()}
     `;
   }
+  _getInitialValue() {
+    return this.initValue || Object.keys(this.optionValueMapper)[0] || "0";
+  }
+  clear() {
+    this.reset();
+  }
 };
 PdRange.styles = [
   PdBaseUIInput.styles,

package/dist/pd-select.d.ts

@@ -1,14 +1,18 @@
-import { CSSResultGroup } from 'lit';
+import { CSSResultGroup, PropertyValues } from 'lit';
 import { PdBaseInputElement } from './pd-base-input-element.js';
 import { PdSelectOption } from './types.js';
 export declare class PdSelect extends PdBaseInputElement {
     values: PdSelectOption[];
-    constructor();
     static styles: CSSResultGroup;
+    constructor();
+    update(changedProps: PropertyValues<this>): void;
     render(): import('lit-html').TemplateResult<1>;
+    protected _onSelectChange(event: Event): void;
     /**
      * Empty, reserved for possible future enhancements on keyup for select.
      */
     protected _onSelectKeyUp(): void;
+    _getInitialValue(): string;
+    clear(): void;
 }
 //# sourceMappingURL=pd-select.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"pd-select.d.ts","sourceRoot":"","sources":["../src/pd-select.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAa,cAAc,EAAE,MAAM,KAAK,CAAC;AAIhD,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAE5C,qBACa,QAAS,SAAQ,kBAAkB;IAE9C,MAAM,EAAE,cAAc,EAAE,CAAM;;IAO9B,OAAgB,MAAM,EAAE,cAAc,CA0DpC;IAEO,MAAM;IA6Bf;;OAEG;IACH,SAAS,CAAC,cAAc,IAAI,IAAI;CAGjC"}
+{"version":3,"file":"pd-select.d.ts","sourceRoot":"","sources":["../src/pd-select.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAa,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAKhE,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAE5C,qBACa,QAAS,SAAQ,kBAAkB;IAE9C,MAAM,EAAE,cAAc,EAAE,CAAM;IAE9B,OAAgB,MAAM,EAAE,cAAc,CA0DpC;;IAOO,MAAM,CAAC,YAAY,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAOhD,MAAM;IAoCf,SAAS,CAAC,eAAe,CAAC,KAAK,EAAE,KAAK;IAItC;;OAEG;IACH,SAAS,CAAC,cAAc,IAAI,IAAI;IAIvB,gBAAgB,IAAI,MAAM;IAI5B,KAAK,IAAI,IAAI;CAGrB"}

package/dist/pd-select.js

@@ -1,5 +1,6 @@
 import { css, html } from "lit";
 import { property, customElement } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
 import { INPUT_TYPE_SELECT } from "./pd-base-ui-input.js";
 import { PdBaseInputElement } from "./pd-base-input-element.js";
 var __defProp = Object.defineProperty;
@@ -18,24 +19,37 @@ let PdSelect = class extends PdBaseInputElement {
     this.values = [];
     this._inputType = INPUT_TYPE_SELECT;
   }
+  update(changedProps) {
+    if (changedProps.has("values") && !this.initValue) {
+      this._value = this.values[0].value;
+    }
+    super.update(changedProps);
+  }
   render() {
     const selectId = `${this.id}Select`;
     return html`
       ${this._renderLabel(selectId)}
-      <div class="input ${this.errorMsg.length > 0 ? "error" : ""}">
+      <div
+        class="${classMap(
+      this.getClassmap({
+        input: true
+      })
+    )}"
+      >
         <select
           id=${selectId}
           class="input-style select-css ${this.gradient ? "gradient" : ""}"
           ?disabled=${this.disabled}
           name=${this.name || this.valueName || this.autoCompleteName}
           autocomplete=${this.autoCompleteName ?? "off"}
-          @change=${this._onKeyUp}
+          @change=${this._onSelectChange}
           @keyup=${this._onSelectKeyUp}
           @blur=${this._onBlur}
+          @focus=${this._onFocus}
         >
           ${this.values.map(
       (val) => html`
-              <option value=${val.value} ?selected=${this.value == val.value}>
+              <option value=${val.value} ?selected=${this._value == val.value}>
                 ${val.name}
               </option>
             `
@@ -45,11 +59,21 @@ let PdSelect = class extends PdBaseInputElement {
       ${this._renderErrorMsg()}
     `;
   }
+  _onSelectChange(event) {
+    this._handleChangedValue(this._input.value, event, true);
+  }
   /**
    * Empty, reserved for possible future enhancements on keyup for select.
    */
   _onSelectKeyUp() {
   }
+  _getInitialValue() {
+    var _a;
+    return this.initValue || ((_a = this.values[0]) == null ? void 0 : _a.value) || "";
+  }
+  clear() {
+    this.reset();
+  }
 };
 PdSelect.styles = [
   PdBaseInputElement.styles,

package/dist/stories/checkbox.stories.d.ts

@@ -25,4 +25,5 @@ export default meta;
 type Story = StoryObj;
 export declare const Checkbox: Story;
 export declare const SwitchTemplate: Story;
+export declare const RadioTemplate: Story;
 //# sourceMappingURL=checkbox.stories.d.ts.map

package/dist/stories/checkbox.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox.stories.d.ts","sourceRoot":"","sources":["../../src/stories/checkbox.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAQ,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAE3D,OAAO,mBAAmB,CAAC;AAC3B,OAAO,yBAAyB,CAAC;AAGjC,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;CAeM,CAAC;AAEjB,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,QAAQ,EAAE,KA8CtB,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KA8B5B,CAAC"}
+{"version":3,"file":"checkbox.stories.d.ts","sourceRoot":"","sources":["../../src/stories/checkbox.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAQ,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAE3D,OAAO,mBAAmB,CAAC;AAC3B,OAAO,yBAAyB,CAAC;AAGjC,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;CAeM,CAAC;AAEjB,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,QAAQ,EAAE,KA8CtB,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KA8B5B,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KA4B3B,CAAC"}

package/dist/stories/form-container2.stories.d.ts

@@ -0,0 +1,8 @@
+import { StoryObj } from '@storybook/web-components';
+declare const meta: {
+    title: string;
+};
+export default meta;
+type Story = StoryObj;
+export declare const FormContainerFullTest: Story;
+//# sourceMappingURL=form-container2.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"form-container2.stories.d.ts","sourceRoot":"","sources":["../../src/stories/form-container2.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAQ,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAM3D,OAAO,yBAAyB,CAAC;AACjC,OAAO,mBAAmB,CAAC;AAC3B,OAAO,gBAAgB,CAAC;AACxB,OAAO,qBAAqB,CAAC;AAC7B,OAAO,gBAAgB,CAAC;AACxB,OAAO,iBAAiB,CAAC;AACzB,OAAO,sBAAsB,CAAC;AAC9B,OAAO,mBAAmB,CAAC;AAC3B,OAAO,qBAAqB,CAAC;AAC7B,OAAO,qBAAqB,CAAC;AAE7B,QAAA,MAAM,IAAI;;CAEM,CAAC;AAEjB,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAStB,eAAO,MAAM,qBAAqB,EAAE,KA0RnC,CAAC"}

package/dist/stories/form-container3.stories.d.ts

@@ -0,0 +1,8 @@
+import { StoryObj } from '@storybook/web-components';
+declare const meta: {
+    title: string;
+};
+export default meta;
+type Story = StoryObj;
+export declare const FormContainerValidStory: Story;
+//# sourceMappingURL=form-container3.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"form-container3.stories.d.ts","sourceRoot":"","sources":["../../src/stories/form-container3.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAQ,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAM3D,OAAO,yBAAyB,CAAC;AACjC,OAAO,mBAAmB,CAAC;AAC3B,OAAO,gBAAgB,CAAC;AACxB,OAAO,qBAAqB,CAAC;AAC7B,OAAO,gBAAgB,CAAC;AACxB,OAAO,iBAAiB,CAAC;AACzB,OAAO,sBAAsB,CAAC;AAC9B,OAAO,mBAAmB,CAAC;AAC3B,OAAO,qBAAqB,CAAC;AAC7B,OAAO,qBAAqB,CAAC;AAE7B,QAAA,MAAM,IAAI;;CAEM,CAAC;AAEjB,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAStB,eAAO,MAAM,uBAAuB,EAAE,KAqDrC,CAAC"}

package/dist/stories/pd-hover-box.stories.d.ts

@@ -0,0 +1,8 @@
+import { StoryObj } from '@storybook/web-components';
+declare const meta: {
+    title: string;
+};
+export default meta;
+type Story = StoryObj;
+export declare const HoverBoxContainer: Story;
+//# sourceMappingURL=pd-hover-box.stories.d.ts.map

package/dist/stories/pd-hover-box.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pd-hover-box.stories.d.ts","sourceRoot":"","sources":["../../src/stories/pd-hover-box.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAQ,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAI3D,OAAO,yBAAyB,CAAC;AACjC,OAAO,mBAAmB,CAAC;AAC3B,OAAO,gBAAgB,CAAC;AACxB,OAAO,qBAAqB,CAAC;AAC7B,OAAO,gBAAgB,CAAC;AACxB,OAAO,iBAAiB,CAAC;AACzB,OAAO,sBAAsB,CAAC;AAC9B,OAAO,mBAAmB,CAAC;AAC3B,OAAO,qBAAqB,CAAC;AAC7B,OAAO,qBAAqB,CAAC;AAE7B,QAAA,MAAM,IAAI;;CAEM,CAAC;AAEjB,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAStB,eAAO,MAAM,iBAAiB,EAAE,KA4J/B,CAAC"}

package/dist/styles/shared-input-field-styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"shared-input-field-styles.d.ts","sourceRoot":"","sources":["../../src/styles/shared-input-field-styles.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAIH;;GAEG;AACH,eAAO,MAAM,sBAAsB,yBA2JlC,CAAC"}
+{"version":3,"file":"shared-input-field-styles.d.ts","sourceRoot":"","sources":["../../src/styles/shared-input-field-styles.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAIH;;GAEG;AACH,eAAO,MAAM,sBAAsB,yBAuKlC,CAAC"}

package/dist/styles/shared-input-field-styles.js

@@ -50,7 +50,7 @@ const SharedInputFieldStyles = css`
     position: relative;
   }
 
-  pd-icon {
+  .infield-icon {
     display: none;
     position: absolute;
     --pd-icon-size: var(
@@ -65,7 +65,7 @@ const SharedInputFieldStyles = css`
     top: 2px;
   }
 
-  pd-icon:hover {
+  .infield-icon:hover {
     cursor: pointer;
   }
 
@@ -100,12 +100,6 @@ const SharedInputFieldStyles = css`
     );
   }
 
-  /* Fokus for input, area => select with own css.? */
-  .input-style:focus {
-    border: var(--pd-input-field-border-focus, 2px solid var(--pd-default-col));
-    outline: 0;
-  }
-
   /* Höhe soll nicht für Text Area gelten, daher ausgelagert (überschreibt sonst rows) */
   input.input-style,
   select.input-style {
@@ -136,6 +130,12 @@ const SharedInputFieldStyles = css`
     );
   }
 
+  /* Fokus for input, area => select with own css.? */
+  .focus .input-style {
+    border: var(--pd-input-field-border-focus, 2px solid var(--pd-default-col));
+    outline: 0;
+  }
+
   /* error element style for input, area => select has own css.? */
   .error .input-style {
     border: 1px solid var(--pd-default-error-col);
@@ -144,10 +144,22 @@ const SharedInputFieldStyles = css`
   }
 
   /* Error Focus for input, area, select */
-  .error .input-style:focus {
+  .focus.error .input-style {
     border: 2px solid var(--pd-default-error-col);
   }
 
+  /* valid element style for input, area => select has own css.? */
+  .valid .input-style {
+    border: 1px solid var(--pd-default-success-col);
+    /*color: var(--pd-default-success-col);*/
+    background-color: var(--pd-default-success-light-col);
+  }
+
+  /* Error Focus for input, area, select */
+  .focus.valid .input-style {
+    border: 2px solid var(--pd-default-success-col);
+  }
+
   /* Placeholder color for input and input-area */
   ::placeholder {
     color: var(--pd-input-placeholder-color, #474747e4);

package/dist/types.d.ts

@@ -2,6 +2,21 @@ export interface PdSelectOption {
     name: string;
     value: string;
 }
+export interface PdFormElementStatus {
+    name: string;
+    value: any;
+    valid: boolean;
+    invalid: boolean;
+    pristine: boolean;
+    dirty: boolean;
+    touched: boolean;
+    focused: boolean;
+    errors: Record<string, string>;
+    element: HTMLElement;
+}
+export type PdFormValidatorFn = (value: any) => string | null | Promise<string | null>;
+export type PdFieldType = "text" | "number" | "mail" | "vat" | "phone";
+export declare const UNDEF = "UNDEF";
 /**
  * MDN-konforme Autocomplete-Werte.
  * https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete

package/dist/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,cAAc;IAC7B,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;CACf;AAED;;;GAGG;AACH,MAAM,MAAM,cAAc,GACtB,IAAI,GACJ,KAAK,GACL,MAAM,GACN,kBAAkB,GAClB,YAAY,GACZ,iBAAiB,GACjB,aAAa,GACb,kBAAkB,GAClB,UAAU,GACV,UAAU,GACV,cAAc,GACd,kBAAkB,GAClB,OAAO,GACP,oBAAoB,GACpB,cAAc,GACd,gBAAgB,GAChB,eAAe,GACf,eAAe,GACf,eAAe,GACf,gBAAgB,GAChB,gBAAgB,GAChB,gBAAgB,GAChB,gBAAgB,GAChB,SAAS,GACT,cAAc,GACd,aAAa,GACb,KAAK,GACL,kBAAkB,GAClB,cAAc,GACd,eAAe,GACf,WAAW,GACX,MAAM,GACN,UAAU,GACV,YAAY,GACZ,WAAW,GACX,KAAK,GACL,KAAK,GACL,OAAO,GACP,SAAS,GACT,eAAe,GACf,oBAAoB,GACpB,gBAAgB,GAChB,WAAW,GACX,QAAQ,GACR,cAAc,GACd,aAAa,GACb,QAAQ,GACR,SAAS,GACT,sBAAsB,GACtB,oBAAoB,GACpB,UAAU,GACV,eAAe,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,cAAc;IAC7B,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,mBAAmB;IAClC,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,GAAG,CAAC;IACX,KAAK,EAAE,OAAO,CAAC;IACf,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,OAAO,CAAC;IAClB,KAAK,EAAE,OAAO,CAAC;IACf,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,EAAE,OAAO,CAAC;IACjB,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC/B,OAAO,EAAE,WAAW,CAAC;CACtB;AAED,MAAM,MAAM,iBAAiB,GAAG,CAC9B,KAAK,EAAE,GAAG,KACP,MAAM,GAAG,IAAI,GAAG,OAAO,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;AAE5C,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG,QAAQ,GAAG,MAAM,GAAG,KAAK,GAAG,OAAO,CAAC;AAEvE,eAAO,MAAM,KAAK,UAAU,CAAC;AAE7B;;;GAGG;AACH,MAAM,MAAM,cAAc,GACtB,IAAI,GACJ,KAAK,GACL,MAAM,GACN,kBAAkB,GAClB,YAAY,GACZ,iBAAiB,GACjB,aAAa,GACb,kBAAkB,GAClB,UAAU,GACV,UAAU,GACV,cAAc,GACd,kBAAkB,GAClB,OAAO,GACP,oBAAoB,GACpB,cAAc,GACd,gBAAgB,GAChB,eAAe,GACf,eAAe,GACf,eAAe,GACf,gBAAgB,GAChB,gBAAgB,GAChB,gBAAgB,GAChB,gBAAgB,GAChB,SAAS,GACT,cAAc,GACd,aAAa,GACb,KAAK,GACL,kBAAkB,GAClB,cAAc,GACd,eAAe,GACf,WAAW,GACX,MAAM,GACN,UAAU,GACV,YAAY,GACZ,WAAW,GACX,KAAK,GACL,KAAK,GACL,OAAO,GACP,SAAS,GACT,eAAe,GACf,oBAAoB,GACpB,gBAAgB,GAChB,WAAW,GACX,QAAQ,GACR,cAAc,GACd,aAAa,GACb,QAAQ,GACR,SAAS,GACT,sBAAsB,GACtB,oBAAoB,GACpB,UAAU,GACV,eAAe,CAAC"}

package/dist/types.js

@@ -0,0 +1,4 @@
+const UNDEF = "UNDEF";
+export {
+  UNDEF
+};

package/dist/validators.d.ts

@@ -0,0 +1,10 @@
+import { PdFormValidatorFn } from './types';
+export declare const requiredValidator: PdFormValidatorFn;
+export declare const requiredSelectValidator: PdFormValidatorFn;
+export declare const requiredCheckedValidator: PdFormValidatorFn;
+export declare const requiredRangeValidator: PdFormValidatorFn;
+export declare const emailValidator: PdFormValidatorFn;
+export declare const phoneValidator: PdFormValidatorFn;
+export declare const vatValidator: PdFormValidatorFn;
+export declare const numberValidator: PdFormValidatorFn;
+//# sourceMappingURL=validators.d.ts.map

package/dist/validators.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"validators.d.ts","sourceRoot":"","sources":["../src/validators.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,iBAAiB,EAAS,MAAM,SAAS,CAAC;AAGnD,eAAO,MAAM,iBAAiB,EAAE,iBAI/B,CAAC;AAEF,eAAO,MAAM,uBAAuB,EAAE,iBAIrC,CAAC;AAEF,eAAO,MAAM,wBAAwB,EAAE,iBAItC,CAAC;AAEF,eAAO,MAAM,sBAAsB,EAAE,iBAIpC,CAAC;AAGF,eAAO,MAAM,cAAc,EAAE,iBAM5B,CAAC;AAGF,eAAO,MAAM,cAAc,EAAE,iBAM5B,CAAC;AAGF,eAAO,MAAM,YAAY,EAAE,iBAI1B,CAAC;AAGF,eAAO,MAAM,eAAe,EAAE,iBAM7B,CAAC"}

package/dist/validators.js

@@ -0,0 +1,41 @@
+import { msg } from "@lit/localize";
+import { UNDEF } from "./types.js";
+const requiredValidator = (value) => {
+  return value === null || value === void 0 || value === "" ? msg("Eingabe erforderlich", { id: "pd.form.field.required" }) : null;
+};
+const requiredSelectValidator = (value) => {
+  return value === UNDEF ? msg("Eingabe erforderlich", { id: "pd.form.field.selectRequired" }) : null;
+};
+const requiredCheckedValidator = (value) => {
+  return value === "false" ? msg("Eingabe erforderlich", { id: "pd.form.field.checkRequired" }) : null;
+};
+const requiredRangeValidator = (value) => {
+  return value === "0" ? msg("Eingabe erforderlich", { id: "pd.form.field.rangeRequired" }) : null;
+};
+const emailValidator = (value) => {
+  return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value) ? null : msg("Format mail@test.de verwenden", {
+    id: "pd.form.field.invalid.mail"
+  });
+};
+const phoneValidator = (value) => {
+  return /^\+?[0-9 ]{7,15}$/.test(value) ? null : msg("Format +49123 123456 verwenden", {
+    id: "pd.form.field.invalid.phone"
+  });
+};
+const vatValidator = (value) => {
+  return /^[A-Z]{2}[0-9]{8,12}$/.test(value) ? null : msg("Format DE0123456789 verwenden", { id: "pd.form.field.invalid.vat" });
+};
+const numberValidator = (value) => {
+  const normalized = typeof value === "string" ? value.replaceAll(",", ".") : value;
+  return !isNaN(parseFloat(normalized)) && isFinite(normalized) ? null : msg("Nur Zahlen erlaubt", { id: "pd.form.field.invalid.number" });
+};
+export {
+  emailValidator,
+  numberValidator,
+  phoneValidator,
+  requiredCheckedValidator,
+  requiredRangeValidator,
+  requiredSelectValidator,
+  requiredValidator,
+  vatValidator
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progressive-development/pd-forms",
-  "version": "0.6.5",
+  "version": "0.6.7",
   "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.6.2",
+    "@progressive-development/pd-icon": "^0.7.1",
     "@progressive-development/pd-shared-styles": "^0.2.1",
     "lit": "^3.3.0"
   },