@piveau/dpi 0.1.0-twinby.0 → 0.2.0-alpha.0

package/dist/data-provider-interface/HappyFlowComponents/ui/BasicInfosStep/ProjectDescriptionStep.vue.js

@@ -0,0 +1,70 @@
+import { ref as p, computed as d, createElementBlock as m, openBlock as h, createElementVNode as e, createVNode as s, unref as r, withCtx as i, createTextVNode as g } from "vue";
+import { FormKit as f } from "@formkit/vue";
+import { PhLightbulb as v } from "@phosphor-icons/vue";
+import _ from "../../../components/StepActionsSection.vue.js";
+import b from "../Card.vue.js";
+import z from "../TextArea/TextAreaDefinition.js";
+/* empty css                            */
+import k from "../../../../_virtual/_plugin-vue_export-helper.js";
+const y = { class: "dpiV3_page V3-typography" }, w = { class: "funny-section" }, x = { class: "funny-flex" }, P = { class: "funny-section" }, j = { class: "funny-section" }, l = 500, S = {
+  __name: "ProjectDescriptionStep",
+  setup(V) {
+    const n = p(""), a = d(() => n.value.length);
+    function u(o) {
+      n.value = o.slice(0, l);
+    }
+    return (o, t) => (h(), m("div", y, [
+      e("section", w, [
+        e("div", x, [
+          t[1] || (t[1] = e("h4", null, "Beschreiben Sie Ihr Projekt", -1)),
+          t[2] || (t[2] = e("span", { class: "copy-large-regular" }, " Beschreiben Sie die wichtigsten Inhalte Ihres Projekts in wenigen, klaren Sätzen, damit interessierte Personen schnell einschätzen können, ob das Projekt für sie relevant ist. ", -1)),
+          s(r(f), {
+            id: "projectDescription",
+            modelValue: n.value,
+            "onUpdate:modelValue": t[0] || (t[0] = (c) => n.value = c),
+            label: "Beschreibung",
+            type: r(z),
+            name: "project_description",
+            "text-label": "Name",
+            placeholder: "Geben Sie Ihrem Projekt einen Namen.",
+            validation: "required|length:0,500",
+            "validation-visibility": "live",
+            hint: "true",
+            help: `${a.value} von ${l} Zeichen`,
+            "count-hint": !0,
+            onInput: u
+          }, null, 8, ["modelValue", "type", "help"])
+        ])
+      ]),
+      e("section", P, [
+        s(_)
+      ]),
+      e("section", j, [
+        s(b, { variant: "default" }, {
+          icon: i(() => [
+            s(r(v), {
+              size: 32,
+              color: "#009fe3"
+            })
+          ]),
+          title: i(() => t[3] || (t[3] = [
+            g(" Beispiel ", -1)
+          ])),
+          default: i(() => [
+            t[4] || (t[4] = e("div", { class: "copy-large-regular" }, [
+              e("p", { class: "copy-large-semi-bold" }, " Name "),
+              e("p", null, "Hochwasserschutzprogramm mit Prognosen"),
+              e("p", { class: "copy-large-semi-bold" }, " Beschreibung "),
+              e("p", null, "Im Rahmen dieses Projekts wurde ein digitaler Zwilling zur Unterstützung des Hochwasserschutzes in Musterstadt aufgebaut. Das System nutzt aktuelle Wetterdaten und Flusspegelmessungen, um Überschwemmungsrisiken frühzeitig zu erkennen. Durch die Echtzeit-Auswertung verschiedener Datensätze können Einsatzkräfte und Verwaltung rechtzeitig Maßnahmen planen und umsetzen.")
+            ], -1))
+          ]),
+          _: 1,
+          __: [4]
+        })
+      ])
+    ]));
+  }
+}, H = /* @__PURE__ */ k(S, [["__scopeId", "data-v-cca9e655"]]);
+export {
+  H as default
+};

package/dist/data-provider-interface/HappyFlowComponents/ui/BasicInfosStep/ProjectNameStep.vue.js

@@ -1,18 +1,21 @@
-import { createElementBlock as r, openBlock as o, createElementVNode as t, createVNode as i, unref as n } from "vue";
-import { FormKit as a } from "@formkit/vue";
-import s from "../InputField/InputFieldDefinition.js";
+import { createElementBlock as i, openBlock as o, createElementVNode as e, createVNode as n, unref as s, withCtx as r, createTextVNode as a } from "vue";
+import { FormKit as l } from "@formkit/vue";
+import { PhLightbulb as u } from "@phosphor-icons/vue";
+import m from "../../../components/StepActionsSection.vue.js";
+import c from "../Card.vue.js";
+import d from "../InputField/InputFieldDefinition.js";
 /* empty css                     */
-import l from "../../../../_virtual/_plugin-vue_export-helper.js";
-const m = { class: "dpiV3_page V3-typography" }, p = { class: "funny-section" }, d = { class: "funny-flex" }, c = {
+import p from "../../../../_virtual/_plugin-vue_export-helper.js";
+const f = { class: "dpiV3_page V3-typography" }, g = { class: "funny-section" }, h = { class: "funny-flex" }, _ = { class: "funny-section" }, k = { class: "funny-section" }, b = {
   __name: "ProjectNameStep",
-  setup(f) {
-    return (u, e) => (o(), r("div", m, [
-      t("section", p, [
-        t("div", d, [
-          e[0] || (e[0] = t("h4", null, " Geben Sie Ihrem Projekt einen Namen ", -1)),
-          e[1] || (e[1] = t("span", { class: "copy-large-regular" }, "Ein aussagekräftiger Projektname bildet den ersten Grundstein für eine gute Auffindbarkeit Ihres Projekts.", -1)),
-          i(n(a), {
-            type: n(s),
+  setup(y) {
+    return (z, t) => (o(), i("div", f, [
+      e("section", g, [
+        e("div", h, [
+          t[0] || (t[0] = e("h4", null, " Geben Sie Ihrem Projekt einen Namen ", -1)),
+          t[1] || (t[1] = e("span", { class: "copy-large-regular" }, "Ein aussagekräftiger Projektname bildet den ersten Grundstein für eine gute Auffindbarkeit Ihres Projekts.", -1)),
+          n(s(l), {
+            type: s(d),
             name: "projectName",
             "text-label": "Name",
             placeholder: "Geben Sie Ihrem Projekt einen Namen.",
@@ -20,10 +23,36 @@ const m = { class: "dpiV3_page V3-typography" }, p = { class: "funny-section" },
             "validation-label": "Name"
           }, null, 8, ["type"])
         ])
+      ]),
+      e("section", _, [
+        n(m)
+      ]),
+      e("section", k, [
+        n(c, { variant: "default" }, {
+          icon: r(() => [
+            n(s(u), {
+              size: 32,
+              color: "#009fe3"
+            })
+          ]),
+          title: r(() => t[2] || (t[2] = [
+            a(" Beispiel ", -1)
+          ])),
+          default: r(() => [
+            t[3] || (t[3] = e("div", { class: "copy-large-regular" }, [
+              e("p", { class: "copy-large-semi-bold" }, " Name "),
+              e("p", null, "Hochwasserschutzprogramm mit Prognosen"),
+              e("p", { class: "copy-large-semi-bold" }, " Beschreibung "),
+              e("p", null, "Im Rahmen dieses Projekts wurde ein digitaler Zwilling zur Unterstützung des Hochwasserschutzes in Musterstadt aufgebaut. Das System nutzt aktuelle Wetterdaten und Flusspegelmessungen, um Überschwemmungsrisiken frühzeitig zu erkennen. Durch die Echtzeit-Auswertung verschiedener Datensätze können Einsatzkräfte und Verwaltung rechtzeitig Maßnahmen planen und umsetzen.")
+            ], -1))
+          ]),
+          _: 1,
+          __: [3]
+        })
       ])
     ]));
   }
-}, y = /* @__PURE__ */ l(c, [["__scopeId", "data-v-7f91d514"]]);
+}, E = /* @__PURE__ */ p(b, [["__scopeId", "data-v-c8a3aa03"]]);
 export {
-  y as default
+  E as default
 };

package/dist/data-provider-interface/HappyFlowComponents/ui/BasicInfosStep/ProjectOrganisationStep.vue.js

@@ -1,7 +1,7 @@
 import o from "./ProjectOrganisationStep.vue2.js";
 /* empty css                             */
 import t from "../../../../_virtual/_plugin-vue_export-helper.js";
-const i = /* @__PURE__ */ t(o, [["__scopeId", "data-v-16f7d526"]]);
+const e = /* @__PURE__ */ t(o, [["__scopeId", "data-v-a327036a"]]);
 export {
-  i as default
+  e as default
 };

package/dist/data-provider-interface/HappyFlowComponents/ui/BasicInfosStep/ProjectOrganisationStep.vue2.js

@@ -1,8 +1,8 @@
-import { defineComponent as l, createElementBlock as s, openBlock as d, createElementVNode as e, createVNode as a, withCtx as o, unref as n } from "vue";
-import { FormKit as i } from "@formkit/vue";
-import m from "../../../../stories/components/PartnerCard.vue.js";
-import r from "../InputField/InputFieldDefinition.js";
-const u = { class: "dpiV3_page V3-typography" }, p = { class: "funny-section" }, c = { class: "funny-flex" }, N = /* @__PURE__ */ l({
+import { defineComponent as l, createElementBlock as d, openBlock as m, createElementVNode as n, renderSlot as u, createVNode as i, withCtx as r, unref as t } from "vue";
+import { FormKit as a } from "@formkit/vue";
+import p from "../../../../stories/components/PartnerCard.vue.js";
+import o from "../InputField/InputFieldDefinition.js";
+const g = { class: "dpiV3_page V3-typography" }, f = { class: "funny-section" }, c = { class: "funny-flex" }, h = { class: "funny-section" }, b = { class: "funny-flex" }, P = /* @__PURE__ */ l({
   __name: "ProjectOrganisationStep",
   props: {
     icon: {},
@@ -10,44 +10,46 @@ const u = { class: "dpiV3_page V3-typography" }, p = { class: "funny-section" },
     phone: {},
     mail: {}
   },
-  setup(f) {
-    return (g, t) => (d(), s("div", u, [
-      t[2] || (t[2] = e("section", { class: "funny-section" }, [
-        e("div", { class: "funny-flex" }, [
-          e("h4", null, " Informationen zu Ihrer Organisation "),
-          e("span", { class: "copy-large-regular" }, "Die Angaben zur durchführenden Organisation werden nicht hier bei der Projektdokumentation erfasst. Diese Daten werden automatisch aus den Kontoinformationen übernommen, die bei uns hinterlegt sind. So wird sichergestellt, dass die Angaben zu Ihrer Organisation stets konsistent und aktuell bleiben, ohne dass sie mehrfach eingegeben werden müssen."),
-          e("div", { class: "organisation-badge-container" }, " layout ")
+  setup(k) {
+    return (s, e) => (m(), d("div", g, [
+      n("section", f, [
+        n("div", c, [
+          e[1] || (e[1] = n("h4", null, " Informationen zu Ihrer Organisation ", -1)),
+          e[2] || (e[2] = n("span", { class: "copy-large-regular" }, "Die Angaben zur durchführenden Organisation werden nicht hier bei der Projektdokumentation erfasst. Diese Daten werden automatisch aus den Kontoinformationen übernommen, die bei uns hinterlegt sind. So wird sichergestellt, dass die Angaben zu Ihrer Organisation stets konsistent und aktuell bleiben, ohne dass sie mehrfach eingegeben werden müssen.", -1)),
+          u(s.$slots, "organization", {}, () => [
+            e[0] || (e[0] = n("div", { class: "organisation-container" }, " Organization ", -1))
+          ], !0)
         ])
-      ], -1)),
-      e("section", p, [
-        e("div", c, [
-          t[0] || (t[0] = e("h5", null, " Projektkontakt (optional) ", -1)),
-          t[1] || (t[1] = e("span", { class: "copy-large-regular" }, "Bitte nennen Sie eine allgemeine E-Mail-Adresse oder Funktionsadresse, unter der interessierte Personen Rückfragen zum Projekt stellen können. Bitte geben Sie keine personenbezogenen Daten an.", -1)),
-          a(m, null, {
-            default: o(() => [
-              a(n(i), {
+      ]),
+      n("section", h, [
+        n("div", b, [
+          e[3] || (e[3] = n("h5", null, " Projektkontakt (optional) ", -1)),
+          e[4] || (e[4] = n("span", { class: "copy-large-regular" }, "Bitte nennen Sie eine allgemeine E-Mail-Adresse oder Funktionsadresse, unter der interessierte Personen Rückfragen zum Projekt stellen können. Bitte geben Sie keine personenbezogenen Daten an.", -1)),
+          i(p, null, {
+            default: r(() => [
+              i(t(a), {
                 type: "group",
                 name: "contact"
               }, {
-                default: o(() => [
-                  a(n(i), {
-                    type: n(r),
+                default: r(() => [
+                  i(t(a), {
+                    type: t(o),
                     name: "name",
                     "text-label": "Name",
                     placeholder: "Geben Sie Ihrem Projekt einen Namen.",
                     validation: "required",
                     "validation-label": "Name"
                   }, null, 8, ["type"]),
-                  a(n(i), {
-                    type: n(r),
+                  i(t(a), {
+                    type: t(o),
                     name: "mail",
                     "text-label": "Name",
                     placeholder: "Geben Sie Ihrem Projekt einen Namen.",
                     validation: "required",
                     "validation-label": "Name"
                   }, null, 8, ["type"]),
-                  a(n(i), {
-                    type: n(r),
+                  i(t(a), {
+                    type: t(o),
                     name: "phone",
                     "text-label": "Name",
                     placeholder: "Geben Sie Ihrem Projekt einen Namen.",
@@ -66,5 +68,5 @@ const u = { class: "dpiV3_page V3-typography" }, p = { class: "funny-section" },
   }
 });
 export {
-  N as default
+  P as default
 };

package/dist/data-provider-interface/HappyFlowComponents/ui/Card.vue.js

@@ -0,0 +1,7 @@
+import o from "./Card.vue2.js";
+/* empty css          */
+import a from "../../../_virtual/_plugin-vue_export-helper.js";
+const m = /* @__PURE__ */ a(o, [["__scopeId", "data-v-8fa2a1de"]]);
+export {
+  m as default
+};

package/dist/data-provider-interface/HappyFlowComponents/ui/Card.vue2.js

@@ -0,0 +1,36 @@
+import { defineComponent as l, computed as n, createElementBlock as t, openBlock as o, normalizeClass as c, createCommentVNode as a, createElementVNode as _, renderSlot as r } from "vue";
+const p = {
+  key: 0,
+  class: "dpiV3_Card_Icon_Title"
+}, u = {
+  key: 0,
+  class: "dpiV3_Card_Info_Text copy-large-semi-bold"
+}, m = { class: "dpiV3_Card_Content" }, f = /* @__PURE__ */ l({
+  __name: "Card",
+  props: {
+    variant: { default: "default" }
+  },
+  setup(d) {
+    const s = d, i = n(() => ({
+      dpiV3_Card: !0,
+      "dpiV3_Card--default": s.variant === "default",
+      "dpiV3_Card--error": s.variant === "error"
+    }));
+    return (e, C) => (o(), t("div", {
+      class: c(i.value)
+    }, [
+      e.$slots.icon ? (o(), t("div", p, [
+        r(e.$slots, "icon", {}, void 0, !0),
+        e.$slots.title ? (o(), t("div", u, [
+          r(e.$slots, "title", {}, void 0, !0)
+        ])) : a("", !0)
+      ])) : a("", !0),
+      _("div", m, [
+        r(e.$slots, "default", {}, void 0, !0)
+      ])
+    ], 2));
+  }
+});
+export {
+  f as default
+};

package/dist/data-provider-interface/HappyFlowComponents/ui/TextArea/TextAreaDefinition.js

@@ -0,0 +1,20 @@
+import t from "./TextAreaFormKit.vue.js";
+const o = {
+  type: "text",
+  schema: [],
+  component: t,
+  props: [
+    "label",
+    "placeholder",
+    "disabled",
+    "showDeleteButton",
+    "hint",
+    "maxlength",
+    "help",
+    "countHint"
+  ],
+  inheritAttrs: !0
+};
+export {
+  o as default
+};

package/dist/data-provider-interface/HappyFlowComponents/ui/TextArea/TextAreaFormKit.vue.js

@@ -0,0 +1,78 @@
+import { defineComponent as k, computed as o, createBlock as B, openBlock as y } from "vue";
+import E from "../TextAreaV3.vue.js";
+const _ = /* @__PURE__ */ k({
+  __name: "TextAreaFormKit",
+  props: {
+    context: {},
+    maxlength: {}
+  },
+  setup(d) {
+    const t = d, a = t.maxlength || 500, s = o({
+      get: () => {
+        var e;
+        return ((e = t.context) == null ? void 0 : e._value) || "";
+      },
+      // set: (newValue: string) => {
+      //   props.context?.node.input(newValue)
+      // },
+      set: (e) => {
+        var n;
+        const l = e.slice(0, a);
+        (n = t.context) == null || n.node.input(l);
+      }
+    }), p = o(() => {
+      var e;
+      return ((e = t.context) == null ? void 0 : e.label) || "";
+    }), x = o(() => {
+      var e;
+      return ((e = t.context) == null ? void 0 : e.placeholder) || "Enter text here...";
+    }), r = o(() => {
+      var e;
+      return ((e = t.context) == null ? void 0 : e.help) || "";
+    }), m = o(() => {
+      var e;
+      return ((e = t.context) == null ? void 0 : e.countHint) || "";
+    }), c = o(() => {
+      var e;
+      return Object.keys(((e = t.context) == null ? void 0 : e.messages) || {}).length > 0;
+    }), v = o(() => {
+      var l, n, u, i, h;
+      if (!c.value)
+        return "";
+      const e = (n = Object.keys(((l = t.context) == null ? void 0 : l.messages) || {})) == null ? void 0 : n[0];
+      return ((h = (i = (u = t.context) == null ? void 0 : u.messages) == null ? void 0 : i[e]) == null ? void 0 : h.value) || "";
+    }), g = o(() => {
+      var e;
+      return ((e = t.context) == null ? void 0 : e.disabled) || !1;
+    }), f = o(() => {
+      var e;
+      return ((e = t.context) == null ? void 0 : e.showDeleteButton) || !1;
+    }), b = o(() => {
+      var e;
+      return ((e = t.context) == null ? void 0 : e.hint) || !1;
+    }), w = () => {
+      s.value = "";
+    }, D = (e) => {
+      !["Backspace", "Delete", "ArrowLeft", "ArrowRight", "Tab"].includes(e.key) && s.value.length >= a && e.preventDefault();
+    };
+    return (e, l) => (y(), B(E, {
+      modelValue: s.value,
+      "onUpdate:modelValue": l[0] || (l[0] = (n) => s.value = n),
+      label: p.value,
+      placeholder: x.value,
+      help: r.value,
+      isDisabled: g.value,
+      showError: c.value,
+      errorMessage: v.value,
+      showDeleteButton: f.value,
+      hint: b.value,
+      hintMessage: r.value,
+      countHint: m.value,
+      onDeleteClicked: w,
+      onKeydown: D
+    }, null, 8, ["modelValue", "label", "placeholder", "help", "isDisabled", "showError", "errorMessage", "showDeleteButton", "hint", "hintMessage", "countHint"]));
+  }
+});
+export {
+  _ as default
+};

package/dist/data-provider-interface/HappyFlowComponents/ui/TextArea/TextAreaFormKit.vue2.js

@@ -0,0 +1,4 @@
+import f from "./TextAreaFormKit.vue.js";
+export {
+  f as default
+};

package/dist/data-provider-interface/HappyFlowComponents/ui/TextAreaV3.vue.js

@@ -1,13 +1,14 @@
-import { ref as l, watch as h, createElementBlock as x, openBlock as c, createElementVNode as a, createCommentVNode as b, createBlock as M, toDisplayString as T, normalizeStyle as C, normalizeClass as m, unref as s, withDirectives as S, vModelText as A } from "vue";
+import { ref as a, watch as y, createElementBlock as c, openBlock as d, createElementVNode as l, createCommentVNode as p, createBlock as T, toDisplayString as v, normalizeStyle as C, normalizeClass as f, unref as n, withDirectives as S, vModelText as A } from "vue";
 /* empty css                                */
 /* empty css                                 */
-import L from "./TextButtonSmall.vue.js";
+import H from "./TextButtonSmall.vue.js";
+import { boolean as L } from "zod";
 /* empty css                */
-import z from "../../../_virtual/_plugin-vue_export-helper.js";
-const N = { class: "dpiV3_input-field V3-typography" }, R = { class: "dpiV3_InputFieldBase" }, j = { class: "dpiV3_InputWithLabel" }, O = { class: "dpiV3_Top" }, U = { class: "dpiV3_Label" }, W = { class: "dpiV3_label copy-small-regular" }, q = ["disabled", "placeholder"], G = {
-  key: 0,
-  class: "dpiV3_hintText copy-small-regular"
-}, H = {
+import j from "../../../_virtual/_plugin-vue_export-helper.js";
+const z = { class: "dpiV3_input-field V3-typography" }, N = { class: "dpiV3_InputFieldBase" }, R = { class: "dpiV3_InputWithLabel" }, O = { class: "dpiV3_Top" }, U = { class: "dpiV3_Label" }, W = { class: "dpiV3_label copy-small-regular" }, q = ["disabled", "placeholder"], G = {
+  key: 1,
+  class: "dpiV3_errorText copy-small-regular"
+}, J = {
   __name: "TextAreaV3",
   props: {
     text: {
@@ -27,89 +28,107 @@ const N = { class: "dpiV3_input-field V3-typography" }, R = { class: "dpiV3_Inpu
     placeholder: {},
     hint: {},
     modelValue: { type: String, default: "" },
-    showDeleteButton: { type: Boolean, default: !1 }
+    showDeleteButton: { type: Boolean, default: !1 },
+    errorMessage: {
+      type: String,
+      default: ""
+    },
+    hintMessage: {
+      type: String,
+      default: ""
+    },
+    countHint: {
+      type: L,
+      default: !1
+    }
   },
   emits: ["update:modelValue", "deleteClicked"],
   setup(e, { emit: V }) {
-    let o = l(!1), p = l(!1);
-    const _ = l(null);
-    let y = l(!1), t = l("inset 0 0 0 1px var(--neutral-30, #687178)"), n = l(!1), v = l(!1);
-    const d = e, u = l(d.modelValue), f = V;
-    h(
-      () => d.modelValue,
+    let o = a(!1), h = a(!1);
+    const _ = a(null);
+    let w = a(!1), t = a("inset 0 0 0 1px var(--neutral-30, #687178)"), u = a(!1), m = a(!1);
+    const s = e, r = a(s.modelValue), x = V;
+    y(
+      () => s.modelValue,
       (i) => {
-        u.value = i;
+        r.value = i;
       }
-    ), h(u, (i) => {
-      f("update:modelValue", i);
+    ), y(r, (i) => {
+      x("update:modelValue", i);
     });
-    const w = () => {
-      f("deleteClicked");
-    }, B = () => {
-      y.value = !1, n.value = !0, o.value = !0, t.value = "0 0 0 2px var(--blue-70, #009FE3)";
+    const g = () => {
+      x("deleteClicked");
     }, E = () => {
-      n.value = !1, o.value = !1, t.value = "inset 0 0 0 1px var(--neutral-30, #687178)";
+      w.value = !1, u.value = !0, o.value = !0, t.value = "0 0 0 2px var(--blue-70, #009FE3)";
+    }, B = () => {
+      u.value = !1, o.value = !1, t.value = "inset 0 0 0 1px var(--neutral-30, #687178)";
     }, I = () => {
-      v.value = !0, t.value = "inset 0 0 0 1px var(--neutral-60, #687178)", n.value && (t.value = "0 0 0 2px var(--blue-70, #009FE3)");
+      m.value = !0, t.value = "inset 0 0 0 1px var(--neutral-60, #687178)", u.value && (t.value = "0 0 0 2px var(--blue-70, #009FE3)");
+    }, M = () => {
+      m.value = !1, t.value = "inset 0 0 0 1px var(--neutral-30, #687178)", u.value && (t.value = "0 0 0 2px var(--blue-70, #009FE3)");
     }, F = () => {
-      v.value = !1, t.value = "inset 0 0 0 1px var(--neutral-30, #687178)", n.value && (t.value = "0 0 0 2px var(--blue-70, #009FE3)");
-    }, D = () => {
       o.value && (t.value = "0 0 0 2px var(--blue-70, #009FE3)");
-    }, g = () => {
+    }, k = () => {
       t.value = "inset 0 0 0 2px var(--Focused)";
     };
-    return (i, r) => (c(), x("div", N, [
-      a("div", R, [
-        a("div", j, [
-          a("div", O, [
-            a("div", U, [
-              a("label", W, T(d.label), 1),
-              e.showDeleteButton ? (c(), M(L, {
+    return (i, b) => (d(), c("div", z, [
+      l("div", N, [
+        l("div", R, [
+          l("div", O, [
+            l("div", U, [
+              l("label", W, v(s.label), 1),
+              e.showDeleteButton ? (d(), T(H, {
                 key: 0,
                 buttonText: "löschen",
-                onClick: w,
+                onClick: g,
                 tabindex: "0"
-              })) : b("", !0)
+              })) : p("", !0)
             ])
           ]),
-          a("div", {
-            class: m(["dpiV3_Input", {
+          l("div", {
+            class: f(["dpiV3_Input", {
               dpiV3_disabled: e.isDisabled,
-              "error-state": e.showError && !s(o) && !s(p),
-              "focused-error-state": e.showError && s(o),
-              "filled-error-state": e.showError && s(p)
+              "error-state": e.showError && !n(o) && !n(h),
+              "focused-error-state": e.showError && n(o),
+              "filled-error-state": e.showError && n(h)
             }]),
             onMouseenter: I,
-            onMouseleave: F,
-            onMousedown: D,
-            style: C({ "box-shadow": s(t) })
+            onMouseleave: M,
+            onMousedown: F,
+            style: C({ "box-shadow": n(t) })
           }, [
-            S(a("textarea", {
+            S(l("textarea", {
               ref_key: "inputRef",
               ref: _,
-              "onUpdate:modelValue": r[0] || (r[0] = (k) => u.value = k),
+              "onUpdate:modelValue": b[0] || (b[0] = (D) => r.value = D),
               type: "text",
-              class: m(["dpiV3_textArea copy-large-regular", {
+              class: f(["dpiV3_textArea copy-large-regular", {
                 "error-state": e.showError,
                 dpiV3_input_disabled: e.isDisabled
               }]),
               disabled: e.isDisabled,
               placeholder: e.placeholder,
-              onFocus: B,
-              onBlur: E,
-              onMousedown: g
+              onFocus: E,
+              onBlur: B,
+              onMousedown: k
             }, null, 42, q), [
-              [A, u.value]
+              [A, r.value]
             ])
           ], 38)
         ]),
-        e.hint && !e.showError ? (c(), x("div", G, r[1] || (r[1] = [
-          a("span", null, "This is a supporting message.", -1)
-        ]))) : b("", !0)
+        e.hint && !e.showError ? (d(), c("div", {
+          key: 0,
+          class: f(["dpiV3_hintText", { "copy-large-semi-bold justify-content-end": s.countHint, "copy-small-regular": !s.countHint }])
+        }, [
+          l("span", null, v(e.hintMessage), 1)
+        ], 2)) : p("", !0),
+        e.showError ? (d(), c("div", G, [
+          l("span", null, v(e.errorMessage), 1)
+        ])) : p("", !0)
       ])
     ]));
   }
-}, Z = /* @__PURE__ */ z(H, [["__scopeId", "data-v-7248be35"]]);
+}, ee = /* @__PURE__ */ j(J, [["__scopeId", "data-v-8222d1e6"]]);
 export {
-  Z as default
+  ee as default
 };