@progressive-development/pd-forms 0.6.4 → 0.6.7

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

@@ -1 +1 @@
-{"version":3,"file":"pd-form-container.d.ts","sourceRoot":"","sources":["../src/pd-form-container.ts"],"names":[],"mappings":"AACA;;;;;;;;;GASG;AAEH,OAAO,EAAa,KAAK,cAAc,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAI1E,OAAO,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAG3C,qBACa,eAAgB,SAAQ,QAAQ;IAC3C;;OAEG;IAEH,iBAAiB,UAAS;IAE1B;;OAEG;IAEH,WAAW,SAAM;IAEjB;;OAEG;IAEH,OAAO,CAAC,oBAAoB,CAAQ;IAEpC,OAAgB,MAAM,EAAE,cAAc,CAuCpC;IAEO,iBAAiB,IAAI,IAAI;IAKzB,oBAAoB,IAAI,IAAI;IAQ5B,MAAM,IAAI,cAAc;IAyBjC,OAAO,CAAC,aAAa,CAwFnB;IAEF,OAAO,CAAC,MAAM,CAAC,YAAY;IAI3B,OAAO,CAAC,MAAM,CAAC,WAAW;IAI1B,OAAO,CAAC,MAAM,CAAC,aAAa;CAG7B"}
+{"version":3,"file":"pd-form-container.d.ts","sourceRoot":"","sources":["../src/pd-form-container.ts"],"names":[],"mappings":"AACA;;;;;;;;;GASG;AAEH,OAAO,EAAa,KAAK,cAAc,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAI1E,OAAO,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAC3C,OAAO,EAAE,mBAAmB,EAAE,MAAM,YAAY,CAAC;AAEjD,qBACa,eAAgB,SAAQ,QAAQ;IAC3C;;OAEG;IAEH,iBAAiB,UAAS;IAE1B;;OAEG;IAEH,WAAW,SAAM;IAGjB,OAAO,CAAC,OAAO,CAA+C;IAE9D,OAAgB,MAAM,EAAE,cAAc,CAwCpC;IAEO,iBAAiB,IAAI,IAAI;IAoBzB,oBAAoB,IAAI,IAAI;IAoB5B,MAAM,IAAI,cAAc;IASjC,OAAO,CAAC,qBAAqB;IAa7B,OAAO,CAAC,WAAW,CAiBjB;IAEF,OAAO,CAAC,SAAS,CAaf;IAEF,OAAO,CAAC,OAAO,CAOb;IAEF,OAAO,CAAC,QAAQ,CAMd;IAEF,OAAO,CAAC,mBAAmB;IASd,eAAe,IAAI,OAAO,CAAC,IAAI,CAAC;IAWtC,SAAS,IAAI,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC;IAQhC,KAAK,IAAI,IAAI;IAMb,SAAS,IAAI,GAAG,CAAC,MAAM,EAAE,mBAAmB,CAAC;CAGrD"}

package/dist/pd-form-container.js

@@ -2,7 +2,6 @@ import { css, html } from "lit";
 import { property, state, customElement } from "lit/decorators.js";
 import { msg } from "@lit/localize";
 import { PdBaseUI } from "./pd-base-ui.js";
-import { INPUT_TYPE_RANGE, INPUT_TYPE_SELECT } from "./pd-base-ui-input.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -18,112 +17,145 @@ let PdFormContainer = class extends PdBaseUI {
     super(...arguments);
     this.requiredFieldInfo = false;
     this.commonError = "";
-    this._requiredFieldsValid = true;
-    this._validateForm = (e) => {
-      const errorMap = e.detail.errorMap;
-      const singleElement = e.detail.singleElement;
-      const requiredElements = this.querySelectorAll("[required]");
-      requiredElements.forEach((el) => {
-        const isEmpty = !el.value || el.value === "false" || el.value === "" || el._inputType === INPUT_TYPE_RANGE && el.value === "0" || el._inputType === INPUT_TYPE_SELECT && el.value === "UNDEF";
-        const isTarget = !singleElement || el === singleElement;
-        if (isEmpty && isTarget) {
-          const msgText = el.requiredMsg || msg("Eingabe erforderlich", { id: "pd.form.field.required" });
-          el.errorMsg = msgText;
-          errorMap.set(el.id, msgText);
-        } else if (typeof el.validate === "function" && isTarget) {
-          const err = el.validate(e);
-          if (err) {
-            el.errorMsg = err;
-            errorMap.set(el.id, err);
-          } else {
-            el.errorMsg = "";
-          }
-        } else if (isTarget) {
-          el.errorMsg = "";
-        }
-      });
-      const validateByType = (type, validator, errMsg) => {
-        const targets = (singleElement == null ? void 0 : singleElement.getAttribute("field-type")) === type ? [singleElement] : Array.from(this.querySelectorAll(`[field-type="${type}"]`));
-        targets.forEach((el) => {
-          var _a;
-          if (!errorMap.has(el.id) && ((_a = el.value) == null ? void 0 : _a.length)) {
-            if (!validator(el.value)) {
-              el.errorMsg = errMsg;
-              errorMap.set(el.id, errMsg);
-            } else {
-              el.errorMsg = "";
-            }
-          }
+    this._fields = /* @__PURE__ */ new Map();
+    this._onRegister = (e) => {
+      const { name, value, state: state2 } = e.detail;
+      if (!this._fields.has(name)) {
+        this._fields.set(name, {
+          name,
+          value,
+          valid: state2.valid,
+          invalid: state2.invalid,
+          pristine: state2.pristine,
+          dirty: state2.dirty,
+          touched: state2.touched,
+          focused: state2.focus,
+          errors: {},
+          element: e.target
         });
-      };
-      validateByType(
-        "mail",
-        PdFormContainer._mailIsValid,
-        msg("Format mail@test.de verwenden", {
-          id: "pd.form.field.invalid.mail"
-        })
-      );
-      validateByType(
-        "phone",
-        PdFormContainer._phoneIsValid,
-        msg("Format +49123 123456 verwenden", {
-          id: "pd.form.field.invalid.phone"
-        })
-      );
-      validateByType(
-        "vat",
-        PdFormContainer._vatIsValid,
-        msg("Format DE0123456789 verwenden", { id: "pd.form.field.invalid.vat" })
-      );
-      validateByType(
-        "number",
-        (val) => !isNaN(parseFloat(val.replaceAll(",", "."))),
-        msg("Nur Zahlen erlaubt", { id: "pd.form.field.invalid.number" })
-      );
-      this._requiredFieldsValid = errorMap.size === 0;
-      if (singleElement) {
-        e.stopPropagation();
+        this.requestUpdate();
+      }
+    };
+    this._onChange = (e) => {
+      const { name, value, state: state2 } = e.detail;
+      const field = this._fields.get(name);
+      if (field) {
+        field.value = value;
+        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();
+      }
+    };
+    this._onBlur = (e) => {
+      const { name } = e.detail;
+      const field = this._fields.get(name);
+      if (field) {
+        field.touched = true;
+        field.focused = false;
+      }
+    };
+    this._onFocus = (e) => {
+      const { name } = e.detail;
+      const field = this._fields.get(name);
+      if (field) {
+        field.focused = true;
       }
     };
   }
   connectedCallback() {
     super.connectedCallback();
-    this.addEventListener("validate-form", this._validateForm);
+    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
+    );
   }
   disconnectedCallback() {
     super.disconnectedCallback();
     this.removeEventListener(
-      "validate-form",
-      this._validateForm
+      "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
     );
   }
   render() {
-    const showValidState = this._requiredFieldsValid && !this.commonError;
     return html`
       <form>
         <slot></slot>
-        ${(this.requiredFieldInfo || this.commonError) && html`
-          <div class="validation-info-container">
-            <p
-              class="validation-info ${showValidState ? "filled" : "unfilled"}"
-            >
-              ${this.commonError || (this._requiredFieldsValid ? msg("* Pflichtfelder ausgefüllt", {
-      id: "pd.form.required.valid"
-    }) : msg("* Pflichtfeld", { id: "pd.form.required.info" }))}
-            </p>
-          </div>
-        `}
+        ${this.requiredFieldInfo ? this._renderValidationInfo() : ""}
       </form>
     `;
   }
-  static _mailIsValid(mail) {
-    return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(mail);
+  _renderValidationInfo() {
+    const allValid = this._getOverallValidity();
+    return html`
+      <p class="${allValid ? "valid" : "invalid"}">
+        ${allValid ? msg("* Pflichtfelder ausgefüllt", { id: "pd.form.required.valid" }) : msg("* Pflichtfeld fehlt oder fehlerhaft", {
+      id: "pd.form.required.missing"
+    })}
+      </p>
+    `;
+  }
+  _getOverallValidity() {
+    for (const field of this._fields.values()) {
+      if (field.invalid) {
+        return false;
+      }
+    }
+    return true;
+  }
+  async triggerValidate() {
+    const validations = [];
+    this._fields.forEach((field) => {
+      var _a;
+      const result = (_a = field.element) == null ? void 0 : _a.runValidators();
+      if (result instanceof Promise) {
+        validations.push(result);
+      }
+    });
+    await Promise.all(validations);
+  }
+  getValues() {
+    const result = {};
+    this._fields.forEach((field, key) => {
+      result[key] = field.value;
+    });
+    return result;
   }
-  static _vatIsValid(vat) {
-    return /^[A-Z]{2}[0-9]{8,12}$/.test(vat);
+  reset() {
+    this._fields.forEach((field) => {
+      var _a;
+      (_a = field.element) == null ? void 0 : _a.reset();
+    });
   }
-  static _phoneIsValid(phone) {
-    return /^\+?[0-9 ]{7,15}$/.test(phone);
+  getStatus() {
+    return this._fields;
   }
 };
 PdFormContainer.styles = [
@@ -133,9 +165,10 @@ PdFormContainer.styles = [
         display: flex;
         flex-direction: column;
         align-items: flex-start;
-        gap: 20px;
       }
 
+      /* Not activated, working state */
+
       .validation-info-container {
         padding-top: var(--pd-form-row-padding-top, 10px);
       }
@@ -174,7 +207,7 @@ __decorateClass([
 ], PdFormContainer.prototype, "commonError", 2);
 __decorateClass([
   state()
-], PdFormContainer.prototype, "_requiredFieldsValid", 2);
+], PdFormContainer.prototype, "_fields", 2);
 PdFormContainer = __decorateClass([
   customElement("pd-form-container")
 ], PdFormContainer);

package/dist/pd-icon-panel-button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"pd-icon-panel-button.d.ts","sourceRoot":"","sources":["../src/pd-icon-panel-button.ts"],"names":[],"mappings":"AACA;;;GAGG;AAEH,OAAO,EAAE,cAAc,EAAa,MAAM,KAAK,CAAC;AAGhD,OAAO,0CAA0C,CAAC;AAClD,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAExC,qBACa,iBAAkB,SAAQ,QAAQ;IAE7C,YAAY,CAAC,EAAE,MAAM,CAAC;IAGtB,UAAU,EAAE,MAAM,CAAQ;IAG1B,KAAK,CAAC,EAAE,MAAM,CAAC;IAGf,WAAW,EAAE,OAAO,CAAS;IAG7B,OAAO,CAAC,UAAU,CAAkB;IAEpC,OAAgB,MAAM,EAAE,cAAc,CAoIpC;IAEF,iBAAiB;IAKjB,oBAAoB;IAKpB,OAAO,CAAC,WAAW,CAEjB;IAGF,MAAM;IAgCN,OAAO,CAAC,UAAU;IAOlB,OAAO,CAAC,cAAc;IAYtB,OAAO,CAAC,YAAY;CAQrB"}
+{"version":3,"file":"pd-icon-panel-button.d.ts","sourceRoot":"","sources":["../src/pd-icon-panel-button.ts"],"names":[],"mappings":"AACA;;;GAGG;AAEH,OAAO,EAAE,cAAc,EAAa,MAAM,KAAK,CAAC;AAGhD,OAAO,0CAA0C,CAAC;AAClD,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAExC,qBACa,iBAAkB,SAAQ,QAAQ;IAE7C,YAAY,CAAC,EAAE,MAAM,CAAC;IAGtB,UAAU,EAAE,MAAM,CAAQ;IAG1B,KAAK,CAAC,EAAE,MAAM,CAAC;IAGf,WAAW,EAAE,OAAO,CAAS;IAG7B,OAAO,CAAC,UAAU,CAAkB;IAEpC,OAAgB,MAAM,EAAE,cAAc,CAuIpC;IAEF,iBAAiB;IAKjB,oBAAoB;IAKpB,OAAO,CAAC,WAAW,CAEjB;IAGF,MAAM;IAgCN,OAAO,CAAC,UAAU;IAOlB,OAAO,CAAC,cAAc;IActB,OAAO,CAAC,YAAY;CAQrB"}

package/dist/pd-icon-panel-button.js

@@ -72,7 +72,9 @@ let PdIconPanelButton = class extends PdBaseUI {
     } else {
       this.dispatchEvent(
         new CustomEvent("button-clicked", {
-          detail: this.value
+          detail: this.value,
+          bubbles: true,
+          composed: true
         })
       );
     }
@@ -100,7 +102,10 @@ PdIconPanelButton.styles = [
 
       .icon-button-style {
         z-index: 6;
-        background: #58a linear-gradient(hsla(0, 0%, 100%, 0.2), transparent);
+        background: var(
+          --pd-icon-button-bg,
+          #58a linear-gradient(hsla(0, 0%, 100%, 0.2), transparent)
+        );
         background-color: var(--pd-icon-button-bgcol, #0c6fc5);
         padding: 0.3em 0.8em;
         border: 1px solid var(--pd-icon-button-bordercol, rgba(0, 0, 0, 0.5));

package/dist/pd-input-area.d.ts

@@ -11,8 +11,10 @@ export declare class PdInputArea extends PdBaseInputElement {
      * Maximum length constraint
      */
     maxlength?: number;
-    constructor();
     static styles: CSSResultGroup;
+    constructor();
+    connectedCallback(): void;
+    private _setupValidators;
     render(): import('lit-html').TemplateResult<1>;
 }
 //# sourceMappingURL=pd-input-area.d.ts.map

package/dist/pd-input-area.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"pd-input-area.d.ts","sourceRoot":"","sources":["../src/pd-input-area.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,OAAO,EAAa,cAAc,EAAE,MAAM,KAAK,CAAC;AAEhD,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAGhE,qBACa,WAAY,SAAQ,kBAAkB;IAEjD,IAAI,SAAK;IAGT,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;OAEG;IAEH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IAEH,SAAS,CAAC,EAAE,MAAM,CAAO;;IAOzB,OAAgB,MAAM,EAAE,cAAc,CAQpC;IAEO,MAAM;CAyBhB"}
+{"version":3,"file":"pd-input-area.d.ts","sourceRoot":"","sources":["../src/pd-input-area.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,OAAO,EAAa,cAAc,EAAE,MAAM,KAAK,CAAC;AAKhD,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAIhE,qBACa,WAAY,SAAQ,kBAAkB;IAEjD,IAAI,SAAK;IAGT,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;OAEG;IAEH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IAEH,SAAS,CAAC,EAAE,MAAM,CAAO;IAEzB,OAAgB,MAAM,EAAE,cAAc,CAQpC;;IAOO,iBAAiB,IAAI,IAAI;IAKlC,OAAO,CAAC,gBAAgB;IAsBf,MAAM;CAgChB"}

package/dist/pd-input-area.js

@@ -1,5 +1,7 @@
 import { css, html } from "lit";
+import { msg, str } from "@lit/localize";
 import { property, customElement } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
 import { PdBaseInputElement } from "./pd-base-input-element.js";
 import { INPUT_TYPE_AREA } from "./pd-base-ui-input.js";
 var __defProp = Object.defineProperty;
@@ -19,11 +21,35 @@ let PdInputArea = class extends PdBaseInputElement {
     this.maxlength = 500;
     this._inputType = INPUT_TYPE_AREA;
   }
+  connectedCallback() {
+    this._setupValidators();
+    super.connectedCallback();
+  }
+  _setupValidators() {
+    const validators = [];
+    if (this.minlength !== void 0) {
+      validators.push(
+        (value) => value.length < this.minlength ? msg(str`Mindestens ${this.minlength} Zeichen`) : null
+      );
+    }
+    if (this.maxlength !== void 0) {
+      validators.push(
+        (value) => value.length > this.maxlength ? msg(str`Maximal ${this.maxlength} Zeichen`) : null
+      );
+    }
+    this._validators = validators;
+  }
   render() {
     const inputAreaId = `${this.id}InputArea`;
     return html`
       ${this._renderLabel(inputAreaId)}
-      <div class="input ${this.errorMsg.length > 0 ? "error" : ""}">
+      <div
+        class="${classMap(
+      this.getClassmap({
+        input: true
+      })
+    )}"
+      >
         <textarea
           id=${inputAreaId}
           name=${this.name || this.valueName || this.autoCompleteName}
@@ -39,6 +65,7 @@ let PdInputArea = class extends PdBaseInputElement {
           .value=${this.value}
           @keyup=${this._onKeyUp}
           @blur=${this._onBlur}
+          @focus=${this._onFocus}
         ></textarea>
       </div>
       ${this._renderErrorMsg()}

package/dist/pd-input-file.d.ts

@@ -4,12 +4,13 @@ export declare class PdInputFile extends PdBaseInputElement {
     icon?: string;
     accept?: string;
     maxlength?: number;
-    constructor();
     static styles: CSSResultGroup;
+    constructor();
     render(): import('lit-html').TemplateResult<1>;
-    _onKeyUp(e: KeyboardEvent): void;
     private _iconClicked;
     private _onChange;
     get files(): FileList | null | undefined;
+    reset(): void;
+    clear(): void;
 }
 //# sourceMappingURL=pd-input-file.d.ts.map

package/dist/pd-input-file.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"pd-input-file.d.ts","sourceRoot":"","sources":["../src/pd-input-file.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,OAAO,EAAa,cAAc,EAAE,MAAM,KAAK,CAAC;AAGhD,OAAO,0CAA0C,CAAC;AAElD,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAGhE,qBACa,WAAY,SAAQ,kBAAkB;IAEjD,IAAI,CAAC,EAAE,MAAM,CAAC;IAGd,MAAM,CAAC,EAAE,MAAM,CAAC;IAGhB,SAAS,CAAC,EAAE,MAAM,CAAC;;IAOnB,OAAgB,MAAM,EAAE,cAAc,CAOpC;IAEO,MAAM;IA6BN,QAAQ,CAAC,CAAC,EAAE,aAAa,GAAG,IAAI;IAIzC,OAAO,CAAC,YAAY;IAIpB,OAAO,CAAC,SAAS;IAYjB,IAAI,KAAK,IAAI,QAAQ,GAAG,IAAI,GAAG,SAAS,CAIvC;CACF"}
+{"version":3,"file":"pd-input-file.d.ts","sourceRoot":"","sources":["../src/pd-input-file.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,OAAO,EAAa,cAAc,EAAE,MAAM,KAAK,CAAC;AAIhD,OAAO,0CAA0C,CAAC;AAElD,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAGhE,qBACa,WAAY,SAAQ,kBAAkB;IAEjD,IAAI,CAAC,EAAE,MAAM,CAAC;IAGd,MAAM,CAAC,EAAE,MAAM,CAAC;IAGhB,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,OAAgB,MAAM,EAAE,cAAc,CAOpC;;IAOO,MAAM;IAqCf,OAAO,CAAC,YAAY;IAIpB,OAAO,CAAC,SAAS;IAKjB,IAAI,KAAK,IAAI,QAAQ,GAAG,IAAI,GAAG,SAAS,CAEvC;IAEM,KAAK;IAKL,KAAK,IAAI,IAAI;CAGrB"}

package/dist/pd-input-file.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 "@progressive-development/pd-icon/pd-icon";
 import { PdBaseInputElement } from "./pd-base-input-element.js";
 import { INPUT_TYPE_FILE } from "./pd-base-ui-input.js";
@@ -22,11 +23,18 @@ let PdInputFile = class extends PdBaseInputElement {
     const inputId = `${this.id}Input`;
     return html`
       ${this._renderLabel(inputId)}
-      <div class="input ${this.errorMsg.length > 0 ? "error" : ""}">
+      <div
+        class="${classMap(
+      this.getClassmap({
+        input: true
+      })
+    )}"
+      >
         ${this.icon ? html`<pd-icon
               icon=${this.icon}
               activeIcon
               @click=${this._iconClicked}
+              class="infield-icon"
             ></pd-icon>` : ""}
         <input
           id=${inputId}
@@ -38,32 +46,29 @@ let PdInputFile = class extends PdBaseInputElement {
           ?disabled=${this.disabled}
           @keyup=${this._onKeyUp}
           @blur=${this._onBlur}
+          @focus=${this._onFocus}
           @change=${this._onChange}
         />
       </div>
       ${this._renderErrorMsg()}
     `;
   }
-  _onKeyUp(e) {
-    super._onKeyUp(e);
-  }
   _iconClicked() {
     this.dispatchEvent(new CustomEvent("input-icon-click"));
   }
-  _onChange() {
-    this.dispatchEvent(
-      new CustomEvent("file-change", {
-        detail: {
-          files: this.files
-        },
-        bubbles: true,
-        composed: true
-      })
-    );
+  _onChange(e) {
+    this._handleChangedValue(this._input.value, e, true);
   }
   get files() {
-    var _a, _b;
-    return (_b = (_a = this.shadowRoot) == null ? void 0 : _a.getElementById(`${this.id}Input`)) == null ? void 0 : _b.files;
+    var _a;
+    return (_a = this._input) == null ? void 0 : _a.files;
+  }
+  reset() {
+    this._input.value = "";
+    super.reset();
+  }
+  clear() {
+    this.reset();
   }
 };
 PdInputFile.styles = [

package/dist/pd-input-time.d.ts

@@ -2,9 +2,10 @@ import { CSSResultGroup } from 'lit';
 import { PdBaseInputElement } from './pd-base-input-element.js';
 export declare class PdInputTime extends PdBaseInputElement {
     icon?: string;
-    constructor();
     static get styles(): CSSResultGroup;
+    constructor();
     render(): import('lit-html').TemplateResult<1>;
+    private _onChange;
     private _iconClicked;
 }
 //# sourceMappingURL=pd-input-time.d.ts.map

package/dist/pd-input-time.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"pd-input-time.d.ts","sourceRoot":"","sources":["../src/pd-input-time.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AACH,OAAO,EAAa,cAAc,EAAE,MAAM,KAAK,CAAC;AAGhD,OAAO,0CAA0C,CAAC;AAElD,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAGhE,qBACa,WAAY,SAAQ,kBAAkB;IAEjD,IAAI,CAAC,EAAE,MAAM,CAAC;;IAOd,WAAoB,MAAM,IAAI,cAAc,CAS3C;IAEQ,MAAM;IA4Bf,OAAO,CAAC,YAAY;CAGrB"}
+{"version":3,"file":"pd-input-time.d.ts","sourceRoot":"","sources":["../src/pd-input-time.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AACH,OAAO,EAAa,cAAc,EAAE,MAAM,KAAK,CAAC;AAIhD,OAAO,0CAA0C,CAAC;AAElD,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAGhE,qBACa,WAAY,SAAQ,kBAAkB;IAEjD,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd,WAAoB,MAAM,IAAI,cAAc,CAS3C;;IAOQ,MAAM;IAqCf,OAAO,CAAC,SAAS;IAIjB,OAAO,CAAC,YAAY;CAGrB"}

package/dist/pd-input-time.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 "@progressive-development/pd-icon/pd-icon";
 import { PdBaseInputElement } from "./pd-base-input-element.js";
 import { INPUT_TYPE_TIME } from "./pd-base-ui-input.js";
@@ -14,10 +15,6 @@ var __decorateClass = (decorators, target, key, kind) => {
   return result;
 };
 let PdInputTime = class extends PdBaseInputElement {
-  constructor() {
-    super();
-    this._inputType = INPUT_TYPE_TIME;
-  }
   static get styles() {
     return [
       PdBaseInputElement.styles,
@@ -28,31 +25,47 @@ let PdInputTime = class extends PdBaseInputElement {
       `
     ];
   }
+  constructor() {
+    super();
+    this._inputType = INPUT_TYPE_TIME;
+  }
   render() {
     const inputId = `${this.id}Input`;
     return html`
       ${this._renderLabel(inputId)}
-      <div class="input ${this.errorMsg.length > 0 ? "error" : ""}">
+      <div
+        class="${classMap(
+      this.getClassmap({
+        input: true
+      })
+    )}"
+      >
         ${this.icon ? html`<pd-icon
               icon=${this.icon}
               activeIcon
               @click=${this._iconClicked}
+              class="infield-icon"
             ></pd-icon>` : ""}
         <input
           id=${inputId}
           name=${this.name || this.valueName || this.autoCompleteName}
           class="input-style ${this.gradient ? "gradient" : ""}"
           type="time"
-          .value=${this.value}
+          .value=${this._value}
           ?readonly=${this.readonly}
           ?disabled=${this.disabled}
           @keyup=${this._onKeyUp}
+          @change=${this._onChange}
           @blur=${this._onBlur}
+          @focus=${this._onFocus}
         />
       </div>
       ${this._renderErrorMsg()}
     `;
   }
+  _onChange(e) {
+    this._handleChangedValue(this._input.value, e, true);
+  }
   _iconClicked() {
     this.dispatchEvent(new CustomEvent("input-icon-click"));
   }

package/dist/pd-input.d.ts

@@ -21,8 +21,10 @@ export declare class PdInput extends PdBaseInputElement {
      * If true, restricts input to numbers only (legacy, use type="number" langfristig)
      */
     onlyNumbers: boolean;
-    constructor();
     static styles: CSSResultGroup;
+    constructor();
+    connectedCallback(): void;
+    private _setupValidators;
     render(): TemplateResult;
     protected _onKeyUp(e: KeyboardEvent): void;
     private _iconClicked;

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

@@ -1 +1 @@
-{"version":3,"file":"pd-input.d.ts","sourceRoot":"","sources":["../src/pd-input.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AAEH,OAAO,EAAa,KAAK,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAGrE,OAAO,0CAA0C,CAAC;AAGlD,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAIhE,qBACa,OAAQ,SAAQ,kBAAkB;IAC7C;;OAEG;IAEH,IAAI,SAAM;IAEV;;OAEG;IAEH,MAAM,UAAS;IAEf;;OAEG;IAEH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IAEH,SAAS,CAAC,EAAE,MAAM,CAAO;IAEzB;;OAEG;IAEH,WAAW,UAAS;;IAOpB,OAAgB,MAAM,EAAE,cAAc,CAOpC;IAEO,MAAM,IAAI,cAAc;cAmCd,QAAQ,CAAC,CAAC,EAAE,aAAa,GAAG,IAAI;IAYnD,OAAO,CAAC,YAAY;CAKrB"}
+{"version":3,"file":"pd-input.d.ts","sourceRoot":"","sources":["../src/pd-input.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AAEH,OAAO,EAAa,KAAK,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAKrE,OAAO,0CAA0C,CAAC;AAGlD,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAKhE,qBACa,OAAQ,SAAQ,kBAAkB;IAC7C;;OAEG;IAEH,IAAI,SAAM;IAEV;;OAEG;IAEH,MAAM,UAAS;IAEf;;OAEG;IAEH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IAEH,SAAS,CAAC,EAAE,MAAM,CAAO;IAEzB;;OAEG;IAEH,WAAW,UAAS;IAEpB,OAAgB,MAAM,EAAE,cAAc,CAOpC;;IAOO,iBAAiB,IAAI,IAAI;IAMlC,OAAO,CAAC,gBAAgB;IAsBf,MAAM,IAAI,cAAc;cA0Cd,QAAQ,CAAC,CAAC,EAAE,aAAa,GAAG,IAAI;IAWnD,OAAO,CAAC,YAAY;CAKrB"}

package/dist/pd-input.js

@@ -1,5 +1,7 @@
 import { css, html } from "lit";
+import { msg, str } from "@lit/localize";
 import { property, customElement } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
 import "@progressive-development/pd-icon/pd-icon";
 import { INPUT_TYPE_TEXT } from "./pd-base-ui-input.js";
 import { PdBaseInputElement } from "./pd-base-input-element.js";
@@ -13,7 +15,7 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (kind && result) __defProp(target, key, result);
   return result;
 };
-const onlyContainsNumbers = (str) => /^\d+$/.test(str);
+const onlyContainsNumbers = (str2) => /^\d+$/.test(str2);
 let PdInput = class extends PdBaseInputElement {
   constructor() {
     super();
@@ -23,16 +25,41 @@ let PdInput = class extends PdBaseInputElement {
     this.onlyNumbers = false;
     this._inputType = INPUT_TYPE_TEXT;
   }
+  connectedCallback() {
+    this._setupValidators();
+    super.connectedCallback();
+  }
+  _setupValidators() {
+    const validators = [];
+    if (this.minlength !== void 0) {
+      validators.push(
+        (value) => value.length < this.minlength ? msg(str`Mindestens ${this.minlength} Zeichen`) : null
+      );
+    }
+    if (this.maxlength !== void 0) {
+      validators.push(
+        (value) => value.length > this.maxlength ? msg(str`Maximal ${this.maxlength} Zeichen`) : null
+      );
+    }
+    this._validators = validators;
+  }
   render() {
     const inputId = `${this.id}Input`;
     return html`
       ${this._renderLabel(inputId)}
-      <div class="input ${this.errorMsg.length > 0 ? "error" : ""}">
+      <div
+        class="${classMap(
+      this.getClassmap({
+        input: true
+      })
+    )}"
+      >
         ${this.icon ? html`
               <pd-icon
                 icon=${this.icon}
                 activeIcon
                 @click=${this._iconClicked}
+                class="infield-icon"
               ></pd-icon>
             ` : ""}
         <input
@@ -42,13 +69,14 @@ let PdInput = class extends PdBaseInputElement {
           class="input-style ${this.gradient ? "gradient" : ""}"
           type=${this.secret ? "password" : "text"}
           placeholder=${this.placeHolder}
-          .value=${this.value}
+          .value=${this._value}
           minlength=${this.minlength ?? ""}
           maxlength=${this.maxlength ?? ""}
           ?readonly=${this.readonly}
           ?disabled=${this.disabled}
           @keyup=${this._onKeyUp}
           @blur=${this._onBlur}
+          @focus=${this._onFocus}
         />
       </div>
       ${this._renderErrorMsg()}
@@ -58,9 +86,8 @@ let PdInput = class extends PdBaseInputElement {
     var _a;
     if (this.onlyNumbers && ((_a = this._input) == null ? void 0 : _a.value) && !onlyContainsNumbers(this._input.value)) {
       this._input.value = this._input.value.replace(/\D/g, "");
-    } else {
-      super._onKeyUp(e);
     }
+    super._onKeyUp(e);
   }
   _iconClicked() {
     this.dispatchEvent(

package/dist/pd-radio-group.d.ts

@@ -4,6 +4,9 @@ export declare class PdRadioGroup extends PdBaseUIInput {
     static styles: CSSResultGroup;
     firstUpdated(): void;
     render(): import('lit-html').TemplateResult<1>;
-    private _dispatchValidation;
+    private _onInternalBlur;
+    private _onInternalFocus;
+    private _onInternalChange;
+    private _onInternalRegister;
 }
 //# sourceMappingURL=pd-radio-group.d.ts.map