@piveau/dpi 0.2.0-alpha.6 → 0.2.0-alpha.61

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

@@ -1,6 +1,6 @@
-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                */
@@ -8,28 +8,28 @@ 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-3dd4351a"]]);
 export {
   Oe as default
 };

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

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