@piveau/dpi 0.2.0-alpha.4 → 0.2.0-alpha.41

package/dist/{data-provider-interface → packages/dpi/src/data-provider-interface}/HappyFlowComponents/ui/InputField.vue.js

@@ -1,35 +1,35 @@
-import { ref as c, watch as N, createElementBlock as u, openBlock as o, createCommentVNode as i, createElementVNode as d, createBlock as v, toDisplayString as h, unref as n, normalizeStyle as S, normalizeClass as x, withDirectives as M, vModelDynamic as F, createVNode as W, withKeys as w, withModifiers as T, isRef as r } from "vue";
-import { PhInfo as q, PhMagnifyingGlass as X, PhQuestion as O, PhWarningCircle as H, PhCaretDown as Y, PhCaretUp as Z, PhCalendar as _, PhClock as ee } from "@phosphor-icons/vue";
-import G from "./TextButtonSmall.vue.js";
+import { ref as f, watch as N, createElementBlock as u, openBlock as i, createCommentVNode as o, createElementVNode as d, createBlock as v, toDisplayString as h, unref as n, normalizeStyle as S, normalizeClass as p, withDirectives as M, vModelDynamic as F, createVNode as W, withKeys as w, withModifiers as k, isRef as r } from "vue";
+import { PhInfo as j, PhMagnifyingGlass as X, PhQuestion as O, PhWarningCircle as H, PhCaretDown as Y, PhCaretUp as Z, PhCalendar as _, PhClock as ee } from "@phosphor-icons/vue";
+import q from "./TextButtonSmall.vue.js";
 /* empty css                                */
 /* empty css                                 */
 /* empty css                */
-import te from "../../../_virtual/_plugin-vue_export-helper.js";
+import te from "../../../../../../_virtual/_plugin-vue_export-helper.js";
 const le = { class: "dpiV3_input-field" }, ne = {
   key: 0,
   class: "dpiV3_InputFieldBase"
-}, oe = { class: "dpiV3_Top" }, ie = { class: "dpiV3_Lebel" }, ae = {
+}, ie = { class: "dpiV3_Top" }, oe = { class: "dpiV3_Lebel" }, ae = {
   key: 0,
   class: "dpiV3_label"
 }, de = { class: "dpiV3_Tooltip_Wrapper" }, se = {
   key: 1,
   class: "dpiV3_toolTip copy-mini-regular"
-}, ue = { class: "dpiV3_Content" }, re = ["type", "disabled", "placeholder"], ve = ["type", "disabled", "placeholder"], ce = {
+}, ue = { class: "dpiV3_Content" }, re = ["type", "disabled", "placeholder"], ve = ["type", "disabled", "placeholder"], fe = {
   key: 0,
   class: "dpiV3_inputButton"
-}, fe = {
+}, ce = {
   key: 1,
   class: "dpiV3_inputButton"
 }, pe = {
   key: 0,
   class: "dpiV3_hintText"
-}, xe = {
+}, ye = {
   key: 1,
   class: "dpiV3_errorText"
-}, ye = {
+}, xe = {
   key: 1,
   class: "dpiV3_InputFieldBase"
-}, Ve = { class: "dpiV3_Top_leading_text" }, be = { class: "dpiV3_Lebel" }, he = { class: "dpiV3_label" }, we = { class: "dpiV3_Input" }, ge = { class: "dpiV3_Text-Add-On" }, Te = { class: "dpiV3_Content-leading-Text" }, ke = ["type", "disabled", "placeholder"], me = { class: "dpiV3_Content-leading-Text" }, Ee = ["type", "disabled", "placeholder"], Be = { class: "dpiV3_Text-Add-On" }, Ie = {
+}, Ve = { class: "dpiV3_Top_leading_text" }, be = { class: "dpiV3_Lebel" }, he = { class: "dpiV3_label" }, we = { class: "dpiV3_Input" }, ge = { class: "dpiV3_Text-Add-On" }, ke = { class: "dpiV3_Content-leading-Text" }, Te = ["type", "disabled", "placeholder"], me = { class: "dpiV3_Content-leading-Text" }, Ee = ["type", "disabled", "placeholder"], Be = { class: "dpiV3_Text-Add-On" }, Ie = {
   key: 0,
   class: "dpiV3_hintText"
 }, De = {
@@ -127,50 +127,64 @@ const le = { class: "dpiV3_input-field" }, ne = {
     error_message: {
       type: String,
       default: "error"
+    },
+    inputStyle: {
+      type: Object,
+      default: () => ({})
     }
   },
   emits: ["update:modelValue", "deleteButtonClicked"],
-  setup(e, { emit: Q }) {
-    let L = c("var(--neutral-60)"), y = c(!1), l = c(!1), g = c(!1);
-    const f = c(null);
-    let k = c(!1), s = c("inset 0 0 0 1px var(--neutral-30, #687178)"), m = c(!1), C = c(!1), b = c();
-    const $ = c(!1), p = e, K = Q, V = c(p.modelValue);
+  setup(e, { emit: G }) {
+    const c = e, L = G;
+    let K = f("var(--neutral-60)"), y = f(!1), l = f(!1), g = f(!1);
+    const V = f(null);
+    let T = f(!1), s = f("inset 0 0 0 1px var(--neutral-30, #687178)"), m = f(!1), C = f(!1), b = f();
+    const $ = f(!1), x = f(c.modelValue);
     N(
-      () => p.modelValue,
+      () => c.modelValue,
       (D) => {
-        V.value = D;
+        x.value = D;
       }
-    ), N(V, (D) => {
-      K("update:modelValue", D);
+    ), N(x, (D) => {
+      L("update:modelValue", D);
     });
-    const j = () => {
-      f.value && f.value.showPicker();
-    }, J = () => {
-      f.value && f.value.showPicker();
-    }, U = () => {
-      K("deleteButtonClicked");
-    }, E = () => {
-      k.value = !1, m.value = !0, y.value = !0, s.value = "0 0 0 2px var(--Focused)", p.addOnText && (s.value = "0 0 0 2px var(--blue-60, #009FE3)", b = "none"), f.value && (f.value.selectionStart = f.value.selectionEnd);
-    }, B = () => {
+    function Q() {
+      V.value && V.value.showPicker();
+    }
+    function J() {
+      V.value && V.value.showPicker();
+    }
+    function U() {
+      L("deleteButtonClicked");
+    }
+    function E() {
+      T.value = !1, m.value = !0, y.value = !0, s.value = "0 0 0 2px var(--Focused)", c.addOnText && (s.value = "0 0 0 2px var(--blue-60, #009FE3)", b.value = "none"), V.value;
+    }
+    function B() {
       m.value = !1, y.value = !1, s.value = "inset 0 0 0 1px var(--neutral-30, #687178)";
-    }, A = () => {
-      k.value = !0, y.value = !1, C.value && (s.value = "inset 0 0 0 1px var(--neutral-60, #687178)");
-    }, P = () => {
-      C.value = !0, s.value = "inset 0 0 0 1px var(--neutral-60, #687178)", p.addOnText && (b = "none"), m.value && (s.value = "0 0 0 2px var(--Focused)", p.addOnText && (s.value = "0 0 0 2px var(--blue-blue-60, #009FE3)", b = "none"));
-    }, z = () => {
-      C.value = !1, s.value = "inset 0 0 0 1px var(--neutral-30, #687178)", p.addOnText && (b = "none"), m.value && (s.value = "0 0 0 2px var(--Focused, #687178)", p.addOnText && (s.value = "0 0 0 2px var(--blue-blue-60, #009FE3)", b = "none"));
-    }, R = () => {
-      y.value && (s.value = "0 0 0 2px var(--Focused)", p.addOnText && (s.value = "0 0 0 2px var(--blue-blue-60, #009FE3)", b = "none"));
-    }, I = () => {
-      s.value = "0 0 0 2px var(--Focused)", p.addOnText && (s.value = "0 0 0 2px var(--blue-blue-60, #009FE3)", b = "none");
-    };
-    return (D, t) => (o(), u("div", le, [
-      e.addOnText ? i("", !0) : (o(), u("div", ne, [
-        d("div", oe, [
-          d("div", ie, [
-            e.label ? (o(), u("label", ae, h(e.label), 1)) : i("", !0),
+    }
+    function A() {
+      T.value = !0, y.value = !1, C.value && (s.value = "inset 0 0 0 1px var(--neutral-60, #687178)");
+    }
+    function P() {
+      C.value = !0, s.value = "inset 0 0 0 1px var(--neutral-60, #687178)", c.addOnText && (b.value = "none"), m.value && (s.value = "0 0 0 2px var(--Focused)", c.addOnText && (s.value = "0 0 0 2px var(--blue-blue-60, #009FE3)", b.value = "none"));
+    }
+    function z() {
+      C.value = !1, s.value = "inset 0 0 0 1px var(--neutral-30, #687178)", c.addOnText && (b.value = "none"), m.value && (s.value = "0 0 0 2px var(--Focused, #687178)", c.addOnText && (s.value = "0 0 0 2px var(--blue-blue-60, #009FE3)", b.value = "none"));
+    }
+    function R() {
+      y.value && (s.value = "0 0 0 2px var(--Focused)", c.addOnText && (s.value = "0 0 0 2px var(--blue-blue-60, #009FE3)", b.value = "none"));
+    }
+    function I() {
+      s.value = "0 0 0 2px var(--Focused)", c.addOnText && (s.value = "0 0 0 2px var(--blue-blue-60, #009FE3)", b.value = "none");
+    }
+    return (D, t) => (i(), u("div", le, [
+      e.addOnText ? o("", !0) : (i(), u("div", ne, [
+        d("div", ie, [
+          d("div", oe, [
+            e.label ? (i(), u("label", ae, h(e.label), 1)) : o("", !0),
             d("span", de, [
-              e.infoIcon ? (o(), v(n(q), {
+              e.infoIcon ? (i(), v(n(j), {
                 key: 0,
                 weight: "fill",
                 class: "dpiV3_labelIcon",
@@ -178,22 +192,22 @@ const le = { class: "dpiV3_input-field" }, ne = {
                 color: "var(--neutral-60, #3D4952)",
                 onMouseenter: t[0] || (t[0] = (a) => $.value = !0),
                 onMouseleave: t[1] || (t[1] = (a) => $.value = !1)
-              })) : i("", !0),
-              $.value ? (o(), u("span", se, h(e.tooltip_text), 1)) : i("", !0)
+              })) : o("", !0),
+              $.value ? (i(), u("span", se, h(e.tooltip_text), 1)) : o("", !0)
             ])
           ]),
-          e.defaultInput ? i("", !0) : (o(), v(G, {
+          e.defaultInput ? o("", !0) : (i(), v(q, {
             key: 0,
-            buttonText: "löschen",
-            onClick: t[2] || (t[2] = (a) => U()),
+            "button-text": "löschen",
             class: "dpiV3_deleteButton",
-            tabindex: "0"
+            tabindex: "0",
+            onClick: t[2] || (t[2] = (a) => U())
           }))
         ]),
         d("div", {
-          class: x(["dpiV3_Input_box", {
+          class: p(["dpiV3_Input_box", {
             dpiV3_disabled: e.isDisabled,
-            "calendar-focused": n(k),
+            "calendar-focused": n(T),
             "error-state": e.showError && !n(y) && !n(g),
             "focused-error-state": e.showError && n(y),
             "filled-error-state": e.showError && n(g)
@@ -204,19 +218,19 @@ const le = { class: "dpiV3_input-field" }, ne = {
           onMousedown: R
         }, [
           d("div", ue, [
-            e.preIcon ? (o(), v(n(X), {
+            e.preIcon ? (i(), v(n(X), {
               key: 0,
               class: "dpiV3_iconLeft",
               size: 24,
               color: "var(--neutral-60, #3D4952)"
-            })) : i("", !0),
-            e.dropdown_dpiV3 ? i("", !0) : M((o(), u("input", {
+            })) : o("", !0),
+            e.dropdown_dpiV3 ? o("", !0) : M((i(), u("input", {
               key: 1,
               ref_key: "inputRef",
-              ref: f,
-              "onUpdate:modelValue": t[3] || (t[3] = (a) => V.value = a),
+              ref: V,
+              "onUpdate:modelValue": t[3] || (t[3] = (a) => x.value = a),
               type: e.inputType,
-              class: x(["dpiV3_Text", {
+              class: p(["dpiV3_Text", {
                 "error-state": e.showError,
                 dpiV3_input_disabled: e.isDisabled
               }]),
@@ -226,15 +240,15 @@ const le = { class: "dpiV3_input-field" }, ne = {
               onBlur: B,
               onMousedown: I
             }, null, 42, re)), [
-              [F, V.value]
+              [F, x.value]
             ]),
-            e.dropdown_dpiV3 ? M((o(), u("input", {
+            e.dropdown_dpiV3 ? M((i(), u("input", {
               key: 2,
               ref_key: "inputRef",
-              ref: f,
-              "onUpdate:modelValue": t[4] || (t[4] = (a) => V.value = a),
+              ref: V,
+              "onUpdate:modelValue": t[4] || (t[4] = (a) => x.value = a),
               type: e.inputType,
-              class: x(["dpiV3_Text", {
+              class: p(["dpiV3_Text", {
                 "error-state": e.showError,
                 dpiV3_input_disabled: e.isDisabled,
                 "no-cursor": e.dropdown_dpiV3 && !e.autocomplete
@@ -245,121 +259,121 @@ const le = { class: "dpiV3_input-field" }, ne = {
               onBlur: B,
               onMousedown: I
             }, null, 42, ve)), [
-              [F, V.value]
-            ]) : i("", !0),
-            e.showEndIcon && !e.showError && !e.dropdown_dpiV3 ? (o(), v(n(O), {
+              [F, x.value]
+            ]) : o("", !0),
+            e.showEndIcon && !e.showError && !e.dropdown_dpiV3 ? (i(), v(n(O), {
               key: 3,
               class: "dpiV3_iconRight",
               size: 24,
               color: "var(--neutral-60, #3D4952)"
-            })) : i("", !0),
-            e.showError ? (o(), v(n(H), {
+            })) : o("", !0),
+            e.showError ? (i(), v(n(H), {
               key: 4,
               class: "dpiV3_iconRight",
               size: 24,
               color: "var(--fill-error, #E53B46)"
-            })) : i("", !0),
-            e.showEndIcon && e.dropdown_dpiV3 && !e.dropDownExpanded ? (o(), v(n(Y), {
+            })) : o("", !0),
+            e.showEndIcon && e.dropdown_dpiV3 && !e.dropDownExpanded ? (i(), v(n(Y), {
               key: 5,
               class: "dpiV3_iconRight",
               color: "var(--neutral-60, #3D4952)",
               size: 24
-            })) : i("", !0),
-            e.showEndIcon && e.dropdown_dpiV3 && e.dropDownExpanded ? (o(), v(n(Z), {
+            })) : o("", !0),
+            e.showEndIcon && e.dropdown_dpiV3 && e.dropDownExpanded ? (i(), v(n(Z), {
               key: 6,
               class: "dpiV3_iconRight",
               color: "var(--neutral-60, #3D4952)",
               size: 24
-            })) : i("", !0)
+            })) : o("", !0)
           ]),
-          p.datePicker ? (o(), u("div", ce, [
+          c.datePicker ? (i(), u("div", fe, [
             W(n(_), {
               class: "dpiV3_calendarIcon",
               size: 24,
-              color: n(L)
+              color: n(K)
             }, null, 8, ["color"]),
             d("div", {
-              onClick: j,
-              class: x(["dpiV3_Rectangle1", { dpiV3_Pressed: n(l) }]),
-              onFocus: T(A, ["stop"]),
+              class: p(["dpiV3_Rectangle1", { dpiV3_Pressed: n(l) }]),
+              onClick: Q,
+              onFocus: k(A, ["stop"]),
               onMousedown: t[5] || (t[5] = (a) => r(l) ? l.value = !0 : l = !0),
               onMouseup: t[6] || (t[6] = (a) => r(l) ? l.value = !1 : l = !1),
               onMouseleave: t[7] || (t[7] = (a) => r(l) ? l.value = !1 : l = !1),
               onKeydown: [
-                t[8] || (t[8] = w(T((a) => r(l) ? l.value = !0 : l = !0, ["prevent"]), ["space"])),
-                t[10] || (t[10] = w(T((a) => r(l) ? l.value = !0 : l = !0, ["prevent"]), ["enter"]))
+                t[8] || (t[8] = w(k((a) => r(l) ? l.value = !0 : l = !0, ["prevent"]), ["space"])),
+                t[10] || (t[10] = w(k((a) => r(l) ? l.value = !0 : l = !0, ["prevent"]), ["enter"]))
               ],
               onKeyup: [
                 t[9] || (t[9] = w((a) => r(l) ? l.value = !1 : l = !1, ["space"])),
                 t[11] || (t[11] = w((a) => r(l) ? l.value = !1 : l = !1, ["enter"]))
               ]
             }, null, 34)
-          ])) : i("", !0),
-          p.timePicker ? (o(), u("div", fe, [
+          ])) : o("", !0),
+          c.timePicker ? (i(), u("div", ce, [
             W(n(ee), {
               class: "dpiV3_calendarIcon",
               size: 24,
-              color: n(L)
+              color: n(K)
             }, null, 8, ["color"]),
             d("div", {
+              class: p(["dpiV3_Rectangle1", { dpiV3_Pressed: n(l) }]),
               onClick: J,
-              class: x(["dpiV3_Rectangle1", { dpiV3_Pressed: n(l) }]),
-              onFocus: T(A, ["stop"]),
+              onFocus: k(A, ["stop"]),
               onMousedown: t[12] || (t[12] = (a) => r(l) ? l.value = !0 : l = !0),
               onMouseup: t[13] || (t[13] = (a) => r(l) ? l.value = !1 : l = !1),
               onMouseleave: t[14] || (t[14] = (a) => r(l) ? l.value = !1 : l = !1),
               onKeydown: [
-                t[15] || (t[15] = w(T((a) => r(l) ? l.value = !0 : l = !0, ["prevent"]), ["space"])),
-                t[17] || (t[17] = w(T((a) => r(l) ? l.value = !0 : l = !0, ["prevent"]), ["enter"]))
+                t[15] || (t[15] = w(k((a) => r(l) ? l.value = !0 : l = !0, ["prevent"]), ["space"])),
+                t[17] || (t[17] = w(k((a) => r(l) ? l.value = !0 : l = !0, ["prevent"]), ["enter"]))
               ],
               onKeyup: [
                 t[16] || (t[16] = w((a) => r(l) ? l.value = !1 : l = !1, ["space"])),
                 t[18] || (t[18] = w((a) => r(l) ? l.value = !1 : l = !1, ["enter"]))
               ]
             }, null, 34)
-          ])) : i("", !0)
+          ])) : o("", !0)
         ], 38),
-        !e.showError && e.initialHintText ? (o(), u("div", pe, [
+        !e.showError && e.initialHintText ? (i(), u("div", pe, [
           d("span", null, h(e.supportingHintMessage), 1)
-        ])) : i("", !0),
-        e.showError && e.initialHintText ? (o(), u("div", xe, [
+        ])) : o("", !0),
+        e.showError && e.initialHintText ? (i(), u("div", ye, [
           d("span", null, h(e.error_message), 1)
-        ])) : i("", !0)
+        ])) : o("", !0)
       ])),
-      e.addOnText ? (o(), u("div", ye, [
+      e.addOnText ? (i(), u("div", xe, [
         d("div", Ve, [
           d("div", be, [
             d("label", he, h(e.label), 1),
-            e.infoIcon ? (o(), v(n(q), {
+            e.infoIcon ? (i(), v(n(j), {
               key: 0,
               weight: "fill",
               class: "dpiV3_labelIcon",
               size: 16,
               color: "var(--neutral-60, #3D4952)"
-            })) : i("", !0)
+            })) : o("", !0)
           ]),
-          e.defaultInput ? i("", !0) : (o(), v(G, {
+          e.defaultInput ? o("", !0) : (i(), v(q, {
             key: 0,
-            buttonText: "löschen",
-            onClick: t[19] || (t[19] = (a) => U()),
+            "button-text": "löschen",
             class: "dpiV3_deleteButton",
-            tabindex: "0"
+            tabindex: "0",
+            onClick: t[19] || (t[19] = (a) => U())
           }))
         ]),
         d("div", we, [
-          e.trailingText ? i("", !0) : (o(), u("div", {
+          e.trailingText ? o("", !0) : (i(), u("div", {
             key: 0,
-            class: x(["dpiV3_Add-on", {
+            class: p(["dpiV3_Add-on", {
               dpiV3_input_disabled: e.isDisabled
             }])
           }, [
             d("div", ge, h(e.addOnLeadingText), 1)
           ], 2)),
-          e.trailingText ? i("", !0) : (o(), u("div", {
+          e.trailingText ? o("", !0) : (i(), u("div", {
             key: 1,
-            class: x(["dpiV3_Text_input", {
+            class: p(["dpiV3_Text_input", {
               dpiV3_input_disabled: e.isDisabled,
-              "calendar-focused": n(k),
+              "calendar-focused": n(T),
               "error-state": e.showError && !n(y) && !n(g),
               "focused-error-state": e.showError && n(y),
               "filled-error-state": e.showError && n(g)
@@ -372,13 +386,13 @@ const le = { class: "dpiV3_input-field" }, ne = {
             onMouseleave: z,
             onMousedown: R
           }, [
-            d("div", Te, [
+            d("div", ke, [
               M(d("input", {
                 ref_key: "inputRef",
-                ref: f,
-                "onUpdate:modelValue": t[20] || (t[20] = (a) => V.value = a),
+                ref: V,
+                "onUpdate:modelValue": t[20] || (t[20] = (a) => x.value = a),
                 type: e.inputType,
-                class: x(["dpiV3_Text", {
+                class: p(["dpiV3_Text", {
                   "error-state": e.showError,
                   dpiV3_input_disabled: e.isDisabled
                 }]),
@@ -387,28 +401,28 @@ const le = { class: "dpiV3_input-field" }, ne = {
                 onFocus: E,
                 onBlur: B,
                 onMousedown: I
-              }, null, 42, ke), [
-                [F, V.value]
+              }, null, 42, Te), [
+                [F, x.value]
               ])
             ]),
-            e.showError ? (o(), v(n(H), {
+            e.showError ? (i(), v(n(H), {
               key: 0,
               class: "dpiV3_iconRight",
               size: 24,
               color: "var(--fill-error, #E53B46)"
-            })) : i("", !0),
-            e.showEndIcon && !e.showError ? (o(), v(n(O), {
+            })) : o("", !0),
+            e.showEndIcon && !e.showError ? (i(), v(n(O), {
               key: 1,
               class: "dpiV3_iconRight",
               size: 24,
               color: "var(--neutral-60, #3D4952)"
-            })) : i("", !0)
+            })) : o("", !0)
           ], 38)),
-          e.trailingText ? (o(), u("div", {
+          e.trailingText ? (i(), u("div", {
             key: 2,
-            class: x(["dpiV3_Text_input-trailing", {
+            class: p(["dpiV3_Text_input-trailing", {
               dpiV3_input_disabled: e.isDisabled,
-              "calendar-focused": n(k),
+              "calendar-focused": n(T),
               "error-state": e.showError && !n(y) && !n(g),
               "focused-error-state": e.showError && n(y),
               "filled-error-state": e.showError && n(g)
@@ -424,10 +438,10 @@ const le = { class: "dpiV3_input-field" }, ne = {
             d("div", me, [
               M(d("input", {
                 ref_key: "inputRef",
-                ref: f,
-                "onUpdate:modelValue": t[21] || (t[21] = (a) => V.value = a),
+                ref: V,
+                "onUpdate:modelValue": t[21] || (t[21] = (a) => x.value = a),
                 type: e.inputType,
-                class: x(["dpiV3_Text", {
+                class: p(["dpiV3_Text", {
                   "error-state": e.showError,
                   dpiV3_input_disabled: e.isDisabled
                 }]),
@@ -437,41 +451,41 @@ const le = { class: "dpiV3_input-field" }, ne = {
                 onBlur: B,
                 onMousedown: I
               }, null, 42, Ee), [
-                [F, V.value]
+                [F, x.value]
               ])
             ]),
-            e.showError ? (o(), v(n(H), {
+            e.showError ? (i(), v(n(H), {
               key: 0,
               class: "dpiV3_iconRight",
               size: 24,
               color: "var(--fill-error, #E53B46)"
-            })) : i("", !0),
-            e.showEndIcon && !e.showError ? (o(), v(n(O), {
+            })) : o("", !0),
+            e.showEndIcon && !e.showError ? (i(), v(n(O), {
               key: 1,
               class: "dpiV3_iconRight",
               size: 24,
               color: "var(--neutral-60, #3D4952)"
-            })) : i("", !0)
-          ], 38)) : i("", !0),
-          e.trailingText ? (o(), u("div", {
+            })) : o("", !0)
+          ], 38)) : o("", !0),
+          e.trailingText ? (i(), u("div", {
             key: 3,
-            class: x(["dpiV3_Add-on-trailing", {
+            class: p(["dpiV3_Add-on-trailing", {
               dpiV3_input_disabled: e.isDisabled
             }])
           }, [
             d("div", Be, h(e.trailing_text), 1)
-          ], 2)) : i("", !0)
+          ], 2)) : o("", !0)
         ]),
-        !e.showError && e.initialHintText ? (o(), u("div", Ie, t[22] || (t[22] = [
+        !e.showError && e.initialHintText ? (i(), u("div", Ie, t[22] || (t[22] = [
           d("span", null, "This is a supporting message.", -1)
-        ]))) : i("", !0),
-        e.showError && e.initialHintText ? (o(), u("div", De, [
+        ]))) : o("", !0),
+        e.showError && e.initialHintText ? (i(), u("div", De, [
           d("span", null, h(e.error_message), 1)
-        ])) : i("", !0)
-      ])) : i("", !0)
+        ])) : o("", !0)
+      ])) : o("", !0)
     ]));
   }
-}, Oe = /* @__PURE__ */ te(Me, [["__scopeId", "data-v-31b5c8b4"]]);
+}, Oe = /* @__PURE__ */ te(Me, [["__scopeId", "data-v-6d2518f0"]]);
 export {
   Oe as default
 };

package/dist/{data-provider-interface → packages/dpi/src/data-provider-interface}/HappyFlowComponents/ui/InputV3.vue.js

@@ -4,7 +4,7 @@ import W from "../img/iconRight.svg.js";
 import $ from "./TextButtonSmall.vue.js";
 import { PhInfo as j, PhMagnifyingGlass as q, PhCaretDown as M, PhQuestion as N, PhCalendar as S } from "@phosphor-icons/vue";
 /* empty css             */
-import A from "../../../_virtual/_plugin-vue_export-helper.js";
+import A from "../../../../../../_virtual/_plugin-vue_export-helper.js";
 const E = { for: "input-container" }, G = { class: "stretch" }, R = { class: "labelWrap" }, U = { class: "lebel" }, Z = { class: "inputFieldWrapper" }, H = { class: "preWrap" }, Q = {
   key: 1,
   class: "ddWrap"

package/dist/{data-provider-interface → packages/dpi/src/data-provider-interface}/HappyFlowComponents/ui/LandingProjectStep/LandingProjectStep.vue.js

@@ -1,6 +1,6 @@
 import o from "./LandingProjectStep.vue2.js";
 /* empty css                        */
-import t from "../../../../_virtual/_plugin-vue_export-helper.js";
+import t from "../../../../../../../_virtual/_plugin-vue_export-helper.js";
 const e = /* @__PURE__ */ t(o, [["__scopeId", "data-v-ea3c97cd"]]);
 export {
   e as default

package/dist/packages/dpi/src/data-provider-interface/HappyFlowComponents/ui/ListBox/ListBoxDefinition.js

@@ -0,0 +1,19 @@
+import o from "./ListBoxFormKit.vue.js";
+const t = {
+  type: "text",
+  schema: [],
+  component: o,
+  props: [
+    "label",
+    "options",
+    "placeholder",
+    // pass-through customization hooks & flags
+    "optionLabel",
+    "optionValue",
+    "optionDisabled",
+    "disabled"
+  ]
+};
+export {
+  t as default
+};

package/dist/packages/dpi/src/data-provider-interface/HappyFlowComponents/ui/ListBox/ListBoxFormKit.vue.js

@@ -0,0 +1,82 @@
+import { defineComponent as B, computed as n, createBlock as L, openBlock as V } from "vue";
+import _ from "./Listbox.vue.js";
+const j = /* @__PURE__ */ B({
+  __name: "ListBoxFormKit",
+  props: {
+    context: {}
+  },
+  setup(p) {
+    const t = p, s = n({
+      get: () => {
+        var o;
+        return String(((o = t.context) == null ? void 0 : o._value) || "");
+      },
+      set: (o) => {
+        var e;
+        (e = t.context) == null || e.node.input(o);
+      }
+    }), d = n(() => {
+      var o;
+      return String(((o = t.context) == null ? void 0 : o.label) || "");
+    }), m = n(() => {
+      var o;
+      return String(((o = t.context) == null ? void 0 : o.name) || "");
+    }), l = n(() => {
+      var e;
+      const o = ((e = t.context) == null ? void 0 : e.options) || [];
+      return Array.isArray(o) ? o : [];
+    }), v = n(() => {
+      var o;
+      return String(((o = t.context) == null ? void 0 : o.placeholder) || "");
+    }), b = n(() => {
+      var o;
+      return Object.keys(((o = t.context) == null ? void 0 : o.messages) || {}).length > 0;
+    }), x = n(() => {
+      var e, a, i, u, c;
+      if (!b.value)
+        return "";
+      const o = (a = Object.keys(((e = t.context) == null ? void 0 : e.messages) || {})) == null ? void 0 : a[0];
+      return String(((c = (u = (i = t.context) == null ? void 0 : i.messages) == null ? void 0 : u[o]) == null ? void 0 : c.value) || "");
+    }), g = n(() => {
+      var o;
+      return (o = t.context) == null ? void 0 : o.optionLabel;
+    }), f = n(() => {
+      var o;
+      return (o = t.context) == null ? void 0 : o.optionValue;
+    }), h = n(() => {
+      var o;
+      return (o = t.context) == null ? void 0 : o.optionDisabled;
+    }), y = n(() => {
+      var o;
+      return !!((o = t.context) != null && o.disabled);
+    }), r = n({
+      get: () => {
+        const o = s.value;
+        return o ? l.value.find((a) => String(a.id) === String(o)) ?? o : "";
+      },
+      set: (o) => {
+        if (typeof o == "string") {
+          s.value = o;
+          return;
+        }
+        s.value = String((o == null ? void 0 : o.id) ?? "");
+      }
+    });
+    return (o, e) => (V(), L(_, {
+      modelValue: r.value,
+      "onUpdate:modelValue": e[0] || (e[0] = (a) => r.value = a),
+      options: l.value,
+      label: d.value,
+      name: m.value,
+      "error-message": x.value,
+      placeholder: v.value,
+      "option-label": g.value,
+      "option-value": f.value,
+      "option-disabled": h.value,
+      disabled: y.value
+    }, null, 8, ["modelValue", "options", "label", "name", "error-message", "placeholder", "option-label", "option-value", "option-disabled", "disabled"]));
+  }
+});
+export {
+  j as default
+};

package/dist/packages/dpi/src/data-provider-interface/HappyFlowComponents/ui/ListBox/Listbox.vue.js

@@ -0,0 +1,7 @@
+import o from "./Listbox.vue2.js";
+/* empty css             */
+import t from "../../../../../../../_virtual/_plugin-vue_export-helper.js";
+const p = /* @__PURE__ */ t(o, [["__scopeId", "data-v-0071f1d0"]]);
+export {
+  p as default
+};