@ironsource/shared-ui 2.1.12-rc.4 → 2.1.12-rc.41

package/components/shared/FieldLabel.vue.d.ts

@@ -1,11 +1,12 @@
-import { TooltipPositions } from '@/components/tooltip/common/Tooltip.types';
-declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+import { TooltipTriggers } from '@/components/tooltip/common/Tooltip.types';
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     label: string;
     description?: string;
     mandatory?: boolean;
     disabled?: boolean;
     hoverHelpText?: string;
-    hoverHelpTextPlacement?: TooltipPositions;
+    hoverHelpTextPlacement?: "top" | "auto" | "auto-start" | "auto-end" | "top-start" | "top-end" | "right" | "right-start" | "right-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "left-start" | "left-end";
+    helpTextIconTooltipTrigger?: TooltipTriggers[];
     testId?: string;
 }>, {
     label: string;
@@ -13,15 +14,17 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     testId: string;
     mandatory: boolean;
     disabled: boolean;
-    hoverHelpText: string;
+    hoverHelpText: any;
     hoverHelpTextPlacement: string;
+    helpTextIconTooltipTrigger: () => string[];
 }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     label: string;
     description?: string;
     mandatory?: boolean;
     disabled?: boolean;
     hoverHelpText?: string;
-    hoverHelpTextPlacement?: TooltipPositions;
+    hoverHelpTextPlacement?: "top" | "auto" | "auto-start" | "auto-end" | "top-start" | "top-end" | "right" | "right-start" | "right-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "left-start" | "left-end";
+    helpTextIconTooltipTrigger?: TooltipTriggers[];
     testId?: string;
 }>, {
     label: string;
@@ -29,8 +32,9 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     testId: string;
     mandatory: boolean;
     disabled: boolean;
-    hoverHelpText: string;
+    hoverHelpText: any;
     hoverHelpTextPlacement: string;
+    helpTextIconTooltipTrigger: () => string[];
 }>>>, {
     label: string;
     testId: string;
@@ -38,7 +42,10 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     mandatory: boolean;
     description: string;
     hoverHelpText: string;
-    hoverHelpTextPlacement: TooltipPositions;
+    hoverHelpTextPlacement: "top" | "auto" | "auto-start" | "auto-end" | "top-start" | "top-end" | "right" | "right-start" | "right-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "left-start" | "left-end";
+    helpTextIconTooltipTrigger: TooltipTriggers[];
+}>, {
+    "icon-tooltip-content"?(_: {}): any;
 }>;
 export default _default;
 type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
@@ -58,3 +65,8 @@ type __VLS_WithDefaults<P, D> = {
 type __VLS_Prettify<T> = {
     [K in keyof T]: T[K];
 } & {};
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/components/shared/FieldLabel.vue.js

@@ -1,7 +1,7 @@
 import e from "./FieldLabel.vue2.js";
 /* empty css                 */import o from "../../_virtual/_plugin-vue_export-helper.js";
-// import "../../FieldLabel.vue_vue_type_style_index_0_scoped_96ee1c98_lang.css"; //*');
-const c = /* @__PURE__ */ o(e, [["__scopeId", "data-v-96ee1c98"]]);
+// import "../../FieldLabel.vue_vue_type_style_index_0_scoped_921d4087_lang.css"; //*');
+const d = /* @__PURE__ */ o(e, [["__scopeId", "data-v-921d4087"]]);
 export {
-  c as default
+  d as default
 };

package/components/shared/FieldLabel.vue2.js

@@ -1,79 +1,92 @@
- import "../../FieldLabel.vue_vue_type_style_index_0_scoped_96ee1c98_lang.css"; import { defineComponent as p, openBlock as o, createElementBlock as m, Fragment as T, createElementVNode as b, mergeProps as d, unref as e, createVNode as r, withCtx as i, createTextVNode as n, toDisplayString as f, createBlock as u, createCommentVNode as s } from "vue";
-import h from "../icon/v4/IconV4.vue.js";
+ import "../../FieldLabel.vue_vue_type_style_index_0_scoped_921d4087_lang.css"; import { defineComponent as I, useSlots as y, computed as s, openBlock as i, createElementBlock as p, Fragment as k, createElementVNode as N, mergeProps as n, unref as e, createVNode as d, withCtx as l, createTextVNode as c, toDisplayString as T, createBlock as h, createCommentVNode as m, createSlots as C, normalizeClass as A, renderSlot as B } from "vue";
+import H from "../icon/v4/IconV4.vue.js";
 import "../icon/v4/IconFlag.vue.js";
-import x from "../tooltip/v4/TooltipV4.vue.js";
-import c from "../typography/v4/Typography.vue.js";
-import { FieldLabelTestIdModifiers as a } from "../../testids/index.js";
-import { useTestIdAttrs as y } from "../../utils/testIds.js";
-const v = {
+import S from "../tooltip/v4/TooltipV4.vue.js";
+import f from "../typography/v4/Typography.vue.js";
+import { FieldLabelTestIdModifiers as o } from "../../testids/index.js";
+import { useTestIdAttrs as E } from "../../utils/testIds.js";
+const L = {
   key: 0,
   class: "description"
-}, O = /* @__PURE__ */ p({
+}, R = /* @__PURE__ */ I({
   __name: "FieldLabel",
   props: {
     label: { default: "" },
     description: { default: "" },
     mandatory: { type: Boolean, default: !1 },
     disabled: { type: Boolean, default: !1 },
-    hoverHelpText: { default: "" },
+    hoverHelpText: { default: null },
     hoverHelpTextPlacement: { default: "top" },
+    helpTextIconTooltipTrigger: { default: () => ["hover"] },
     testId: { default: "" }
   },
   setup(t) {
-    const l = y(t.testId, a);
-    return (N, g) => (o(), m(T, null, [
-      b("div", d({
+    const r = t, b = y(), a = E(r.testId, o), u = s(() => !!b["icon-tooltip-content"]), g = s(
+      () => r.helpTextIconTooltipTrigger.includes("click")
+    ), v = s(
+      () => !!r.hoverHelpText || u.value
+    );
+    return (x, O) => (i(), p(k, null, [
+      N("div", n({
         class: ["field-label", {
           "field-label--disabled": t.disabled,
           "field-label--with-description": !!t.description
         }]
-      }, e(l)[e(a).CONTAINER]), [
-        r(e(c), d({
+      }, e(a)[e(o).CONTAINER]), [
+        d(e(f), n({
           class: "label",
           variant: "inputLabel"
-        }, e(l)[e(a).TEXT]), {
-          default: i(() => [
-            n(f(t.label), 1)
+        }, e(a)[e(o).TEXT]), {
+          default: l(() => [
+            c(T(t.label), 1)
           ]),
           _: 1
         }, 16),
-        t.mandatory ? (o(), u(e(c), d({
+        t.mandatory ? (i(), h(e(f), n({
           key: 0,
           variant: "h3",
           class: "mandatory"
-        }, e(l)[e(a).MANDATORY]), {
-          default: i(() => [
-            n("*")
+        }, e(a)[e(o).MANDATORY]), {
+          default: l(() => [
+            c("*")
           ]),
           _: 1
-        }, 16)) : s("", !0),
-        t.hoverHelpText ? (o(), u(e(x), d({
+        }, 16)) : m("", !0),
+        e(v) ? (i(), h(e(S), n({
           key: 1,
-          triggers: ["hover"],
+          triggers: t.helpTextIconTooltipTrigger,
           text: t.hoverHelpText,
           placement: t.hoverHelpTextPlacement
-        }, e(l)[e(a).TOOLTIP], { "test-id": t.testId }), {
-          default: i(() => [
-            r(e(h), {
-              class: "info-icon",
+        }, e(a)[e(o).TOOLTIP], { "test-id": t.testId }), C({
+          default: l(() => [
+            d(e(H), {
+              class: A(["info-icon", { "clickable-icon": e(g) }]),
               name: "question",
               size: "16px"
-            })
+            }, null, 8, ["class"])
           ]),
-          _: 1
-        }, 16, ["text", "placement", "test-id"])) : s("", !0)
+          _: 2
+        }, [
+          e(u) ? {
+            name: "tooltip",
+            fn: l(() => [
+              B(x.$slots, "icon-tooltip-content", {}, void 0, !0)
+            ]),
+            key: "0"
+          } : void 0
+        ]), 1040, ["triggers", "text", "placement", "test-id"])) : m("", !0)
       ], 16),
-      t.description ? (o(), m("div", v, [
-        r(e(c), { variant: "body2" }, {
-          default: i(() => [
-            n(f(t.description), 1)
+      t.description ? (i(), p("div", L, [
+        d(e(f), { variant: "body2" }, {
+          default: l(() => [
+            c(T(t.description), 1)
           ]),
           _: 1
         })
-      ])) : s("", !0)
+      ])) : m("", !0)
     ], 64));
   }
 });
 export {
-  O as default
+  R as default
 };

package/components/sortableList/SortableItem.vue.d.ts

@@ -4,20 +4,26 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     index?: number;
     isOpen?: boolean;
     isSelected?: boolean;
+    isDisabled?: boolean;
     selectedChildId?: string | number;
     searchQuery?: string;
-    childListMaxHeight: string;
+    childListMaxHeight?: string;
     searchHandler?: (item: SortableListItem, searchQuery: string) => boolean;
     displayValue: (item: SortableListItem) => string;
+    variant?: "default" | "compact";
+    draggableArea?: "handle" | "full";
 }>, {
     text: string;
     isOpen: boolean;
     isSelected: boolean;
+    isDisabled: boolean;
     selectedChildId: any;
     searchQuery: any;
     index: any;
     childListMaxHeight: string;
     searchHandler: any;
+    variant: string;
+    draggableArea: string;
 }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     toggle: (value: boolean) => void;
     select: () => void;
@@ -27,32 +33,41 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     index?: number;
     isOpen?: boolean;
     isSelected?: boolean;
+    isDisabled?: boolean;
     selectedChildId?: string | number;
     searchQuery?: string;
-    childListMaxHeight: string;
+    childListMaxHeight?: string;
     searchHandler?: (item: SortableListItem, searchQuery: string) => boolean;
     displayValue: (item: SortableListItem) => string;
+    variant?: "default" | "compact";
+    draggableArea?: "handle" | "full";
 }>, {
     text: string;
     isOpen: boolean;
     isSelected: boolean;
+    isDisabled: boolean;
     selectedChildId: any;
     searchQuery: any;
     index: any;
     childListMaxHeight: string;
     searchHandler: any;
+    variant: string;
+    draggableArea: string;
 }>>> & {
     onSelect?: () => any;
     onToggle?: (value: boolean) => any;
     onSelectChild?: (childItem: SortableListItem) => any;
 }, {
+    variant: "default" | "compact";
     isOpen: boolean;
     index: number;
     isSelected: boolean;
     searchQuery: string;
+    isDisabled: boolean;
     selectedChildId: string | number;
     childListMaxHeight: string;
     searchHandler: (item: SortableListItem, searchQuery: string) => boolean;
+    draggableArea: "handle" | "full";
 }>, {
     menu?(_: {}): any;
 }>;

package/components/sortableList/SortableItem.vue.js

@@ -1,7 +1,7 @@
 import o from "./SortableItem.vue2.js";
 /* empty css                   */import e from "../../_virtual/_plugin-vue_export-helper.js";
-// import "../../SortableItem.vue_vue_type_style_index_0_scoped_48542664_lang.css"; //*');
-const p = /* @__PURE__ */ e(o, [["__scopeId", "data-v-48542664"]]);
+// import "../../SortableItem.vue_vue_type_style_index_0_scoped_800cd503_lang.css"; //*');
+const c = /* @__PURE__ */ e(o, [["__scopeId", "data-v-800cd503"]]);
 export {
-  p as default
+  c as default
 };

package/components/sortableList/SortableItem.vue2.js

@@ -1,156 +1,172 @@
- import "../../SortableItem.vue_vue_type_style_index_0_scoped_48542664_lang.css"; import { defineComponent as P, useCssVars as E, useSlots as $, computed as C, watch as I, ref as R, openBlock as l, createElementBlock as n, normalizeClass as f, unref as t, withModifiers as u, createElementVNode as c, createVNode as h, createBlock as a, withCtx as b, createTextVNode as S, toDisplayString as V, createCommentVNode as d, renderSlot as D, mergeProps as F, normalizeProps as j, Fragment as q, renderList as A } from "vue";
+ import "../../SortableItem.vue_vue_type_style_index_0_scoped_800cd503_lang.css"; import { defineComponent as P, useCssVars as A, useSlots as E, computed as h, watch as $, ref as I, openBlock as l, createElementBlock as o, normalizeClass as d, unref as e, withModifiers as y, createElementVNode as c, createVNode as b, createBlock as n, withCtx as S, createTextVNode as V, toDisplayString as F, createCommentVNode as u, renderSlot as R, mergeProps as H, normalizeProps as j, Fragment as q, renderList as G } from "vue";
 import L from "../typography/v4/Typography.vue.js";
-import m from "../icon/v4/IconV4.vue.js";
+import f from "../icon/v4/IconV4.vue.js";
 import w from "../icon/v4/IconFlag.vue.js";
-import G from "./SortableItemLabel.vue.js";
-import { useVirtualList as J } from "@vueuse/core";
-import { matchString as K } from "../../utils/search.js";
-import { useHoverEffect as U } from "./composables/useHoverEffect.js";
-const W = { class: "draggable-handle" }, X = { class: "item__prefix" }, Y = ["onClick"], Z = { class: "item__text" }, _ = ["onClick"], ce = /* @__PURE__ */ P({
+import J from "./SortableItemLabel.vue.js";
+import { useVirtualList as K } from "@vueuse/core";
+import { matchString as U } from "../../utils/search.js";
+import { useHoverEffect as W } from "./composables/useHoverEffect.js";
+const X = { class: "item__prefix" }, Y = ["onClick"], Z = ["onClick"], re = /* @__PURE__ */ P({
   __name: "SortableItem",
   props: {
     item: null,
     index: { default: null },
     isOpen: { type: Boolean, default: !1 },
     isSelected: { type: Boolean, default: !1 },
+    isDisabled: { type: Boolean, default: !1 },
     selectedChildId: { default: null },
     searchQuery: { default: null },
     childListMaxHeight: { default: "530px" },
     searchHandler: { type: Function, default: null },
-    displayValue: null
+    displayValue: null,
+    variant: { default: "default" },
+    draggableArea: { default: "handle" }
   },
   emits: ["toggle", "select", "selectChild"],
-  setup(e, { emit: y }) {
-    const s = e;
-    E((r) => ({
-      "480cd4cc": e.childListMaxHeight
+  setup(t, { emit: g }) {
+    const s = t;
+    A((r) => ({
+      "41d9b134": t.childListMaxHeight
     }));
-    const H = $(), M = () => {
-      y("toggle", !s.isOpen);
-    }, g = C(() => (s.item.children || []).filter(
-      (o) => s.searchHandler ? s.searchHandler(o, s.searchQuery) : K(o.displayText, s.searchQuery)
-    )), k = C(() => g.value.length > 0), z = (r) => r.id === s.selectedChildId, {
+    const M = E(), z = () => {
+      g("toggle", !s.isOpen);
+    }, k = h(() => (s.item.children || []).filter(
+      (a) => s.searchHandler ? s.searchHandler(a, s.searchQuery) : U(a.displayText, s.searchQuery)
+    )), v = h(() => k.value.length > 0), m = h(() => s.draggableArea === "full"), B = (r) => r.id === s.selectedChildId, {
       list: Q,
-      containerProps: B,
-      wrapperProps: T,
+      containerProps: T,
+      wrapperProps: D,
       scrollTo: N
-    } = J(g, {
+    } = K(k, {
       itemHeight: 34
     });
-    I(
+    $(
       () => s.searchQuery,
       () => N(0)
     );
-    const p = R(null), { handleMouseout: v, handleMouseover: x } = U(
+    const p = I(null), { handleMouseout: x, handleMouseover: C } = W(
       p,
       "sortable-item--hovered"
     );
-    return (r, o) => (l(), n("div", {
+    return (r, a) => (l(), o("div", {
       ref_key: "itemRef",
       ref: p,
-      class: f(["sortable-item", { "sortable-item--selected": e.isSelected }]),
-      onMouseover: o[1] || (o[1] = //@ts-ignore
-      (...i) => t(x) && t(x)(...i)),
-      onMouseout: o[2] || (o[2] = //@ts-ignore
-      (...i) => t(v) && t(v)(...i)),
-      onClick: o[3] || (o[3] = u((i) => y("select"), ["stop"]))
+      class: d(["sortable-item", {
+        "sortable-item--fully-draggable": e(m),
+        "sortable-item--selected": t.isSelected,
+        "sortable-item--compact": t.variant === "compact",
+        "sortable-item--disabled": t.item.isDisabled
+      }]),
+      onMouseover: a[1] || (a[1] = //@ts-ignore
+      (...i) => e(C) && e(C)(...i)),
+      onMouseout: a[2] || (a[2] = //@ts-ignore
+      (...i) => e(x) && e(x)(...i)),
+      onClick: a[3] || (a[3] = y((i) => g("select"), ["stop"]))
     }, [
       c("div", {
-        class: f(["item", {
-          "drag-allowed": !e.item.isLocked && !e.searchQuery,
-          "item--selected": e.isSelected && !e.selectedChildId
+        class: d(["item", {
+          "item--fully-draggable": e(m),
+          "drag-allowed": !t.item.isLocked && !t.searchQuery,
+          "item--selected": t.isSelected && !t.selectedChildId
         }])
       }, [
-        c("div", W, [
-          h(t(m), {
+        c("div", {
+          class: d(["draggable-handle", {
+            "handle-area": e(m),
+            "draggable-handle--disabled": t.item.isDisabled
+          }])
+        }, [
+          b(e(f), {
             name: "dots-six-vertical",
             size: "20px",
             type: "bold"
           })
-        ]),
+        ], 2),
         c("div", X, [
-          e.item.isLocked ? (l(), a(t(m), {
+          t.item.isLocked ? (l(), n(e(f), {
             key: 1,
             class: "locked-icon",
             name: "lock",
             size: "16px"
-          })) : (l(), a(t(L), {
+          })) : (l(), n(e(L), {
             key: 0,
             class: "order-num",
             variant: "subtitle2"
           }, {
-            default: b(() => [
-              S(V(e.index + 1) + ". ", 1)
+            default: S(() => [
+              V(F(t.index + 1) + ". ", 1)
             ]),
             _: 1
           }))
         ]),
-        t(k) && !e.searchQuery ? (l(), n("div", {
+        e(v) && !t.searchQuery ? (l(), o("div", {
           key: 0,
           class: "expand-icon",
-          onClick: u(M, ["stop"])
+          onClick: y(z, ["stop"])
         }, [
-          e.isOpen ? (l(), a(t(m), {
+          t.isOpen ? (l(), n(e(f), {
             key: 0,
             name: "caret-down",
             size: "16px"
-          })) : (l(), a(t(m), {
+          })) : (l(), n(e(f), {
             key: 1,
             name: "caret-right",
             size: "16px"
           }))
-        ], 8, Y)) : d("", !0),
-        c("div", Z, [
-          e.item.countryFlag ? (l(), a(t(w), {
+        ], 8, Y)) : u("", !0),
+        c("div", {
+          class: d(["item__text", { "handle-area": e(m) }])
+        }, [
+          t.item.countryFlag ? (l(), n(e(w), {
             key: 0,
             class: "country-flag",
-            "country-code": e.item.countryFlag
-          }, null, 8, ["country-code"])) : d("", !0),
-          h(G, {
-            "display-value": e.displayValue,
-            item: e.item
+            "country-code": t.item.countryFlag
+          }, null, 8, ["country-code"])) : u("", !0),
+          b(J, {
+            "display-value": t.displayValue,
+            item: t.item
           }, null, 8, ["display-value", "item"])
-        ]),
-        t(H).menu ? (l(), n("div", {
+        ], 2),
+        e(M).menu ? (l(), o("div", {
           key: 1,
           class: "item__menu",
-          onClick: o[0] || (o[0] = u(() => {
+          onClick: a[0] || (a[0] = y(() => {
           }, ["stop"]))
         }, [
-          D(r.$slots, "menu", {}, void 0, !0)
-        ])) : d("", !0)
+          R(r.$slots, "menu", {}, void 0, !0)
+        ])) : u("", !0)
       ], 2),
-      c("div", F(t(B), { class: "child-list" }), [
-        t(k) && e.isOpen ? (l(), n("ul", j(F({ key: 0 }, t(T))), [
-          (l(!0), n(q, null, A(t(Q), ({ data: i, index: O }) => (l(), n("li", {
+      c("div", H(e(T), { class: "child-list" }), [
+        e(v) && t.isOpen ? (l(), o("ul", j(H({ key: 0 }, e(D))), [
+          (l(!0), o(q, null, G(e(Q), ({ data: i, index: O }) => (l(), o("li", {
             key: O,
-            class: f({ selected: z(i) }),
-            onClick: u((ee) => y("selectChild", i), ["stop"])
+            class: d({ selected: B(i) }),
+            onClick: y((_) => g("selectChild", i), ["stop"])
           }, [
-            i.countryFlag ? (l(), a(t(w), {
+            i.countryFlag ? (l(), n(e(w), {
               key: 0,
               class: "country-flag",
               "country-code": i.countryFlag
-            }, null, 8, ["country-code"])) : d("", !0),
-            h(t(L), {
+            }, null, 8, ["country-code"])) : u("", !0),
+            b(e(L), {
               class: "country-title",
               variant: "body2",
               "tooltip-placement": "top",
-              "tooltip-text": e.displayValue(i),
+              "tooltip-text": t.displayValue(i),
               "is-truncated": "",
               "with-tooltip": ""
             }, {
-              default: b(() => [
-                S(V(e.displayValue(i)), 1)
+              default: S(() => [
+                V(F(t.displayValue(i)), 1)
               ]),
               _: 2
             }, 1032, ["tooltip-text"])
-          ], 10, _))), 128))
-        ], 16)) : d("", !0)
+          ], 10, Z))), 128))
+        ], 16)) : u("", !0)
       ], 16)
     ], 34));
   }
 });
 export {
-  ce as default
+  re as default
 };

package/components/sortableList/SortableItemLabel.vue.js

@@ -1,7 +1,7 @@
 import e from "./SortableItemLabel.vue2.js";
 /* empty css                        */import o from "../../_virtual/_plugin-vue_export-helper.js";
-// import "../../SortableItemLabel.vue_vue_type_style_index_0_scoped_f2ced2f4_lang.css"; //*');
-const a = /* @__PURE__ */ o(e, [["__scopeId", "data-v-f2ced2f4"]]);
+// import "../../SortableItemLabel.vue_vue_type_style_index_0_scoped_a534c7af_lang.css"; //*');
+const s = /* @__PURE__ */ o(e, [["__scopeId", "data-v-a534c7af"]]);
 export {
-  a as default
+  s as default
 };

package/components/sortableList/SortableItemLabel.vue2.js

@@ -1,57 +1,60 @@
- import "../../SortableItemLabel.vue_vue_type_style_index_0_scoped_f2ced2f4_lang.css"; import { defineComponent as m, openBlock as a, createBlock as p, unref as l, withCtx as e, createElementVNode as u, createElementBlock as d, Fragment as f, renderList as h, createVNode as i, createTextVNode as o, toDisplayString as r } from "vue";
-import n from "../typography/v4/Typography.vue.js";
-import _ from "../tooltip/v4/TooltipV4.vue.js";
-const x = { class: "tooltip-content" }, g = /* @__PURE__ */ m({
+ import "../../SortableItemLabel.vue_vue_type_style_index_0_scoped_a534c7af_lang.css"; import { defineComponent as m, openBlock as a, createBlock as u, unref as l, withCtx as t, createElementVNode as p, createElementBlock as d, Fragment as f, renderList as h, createVNode as i, createTextVNode as o, toDisplayString as r, normalizeClass as x } from "vue";
+import s from "../typography/v4/Typography.vue.js";
+import b from "../tooltip/v4/TooltipV4.vue.js";
+const y = { class: "tooltip-content" }, k = /* @__PURE__ */ m({
   __name: "SortableItemLabel",
   props: {
     item: null,
     displayValue: null
   },
-  setup(t) {
-    return (y, b) => (a(), p(l(_), {
+  setup(e) {
+    return (_, v) => (a(), u(l(b), {
       class: "item-label",
       placement: "right",
-      disabled: !t.item.helpText
+      disabled: !e.item.helpText
     }, {
-      tooltip: e(() => [
-        u("div", x, [
-          (a(!0), d(f, null, h(t.item.helpText, (c, s) => (a(), d("div", {
-            key: s,
+      tooltip: t(() => [
+        p("div", y, [
+          (a(!0), d(f, null, h(e.item.helpText, (n, c) => (a(), d("div", {
+            key: c,
             class: "help"
           }, [
-            i(l(n), {
+            i(l(s), {
               class: "help__title",
               variant: "h5"
             }, {
-              default: e(() => [
-                o(r(c.title), 1)
+              default: t(() => [
+                o(r(n.title), 1)
               ]),
               _: 2
             }, 1024),
-            i(l(n), {
+            i(l(s), {
               class: "help__text",
               variant: "body2"
             }, {
-              default: e(() => [
-                o(r(c.text), 1)
+              default: t(() => [
+                o(r(n.text), 1)
               ]),
               _: 2
             }, 1024)
           ]))), 128))
         ])
       ]),
-      default: e(() => [
-        i(l(n), { variant: "body2" }, {
-          default: e(() => [
-            o(r(t.displayValue(t.item)), 1)
+      default: t(() => [
+        i(l(s), {
+          variant: "body2",
+          class: x(["item-text", { "item-text--disabled": e.item.isDisabled }])
+        }, {
+          default: t(() => [
+            o(r(e.displayValue(e.item)), 1)
           ]),
           _: 1
-        })
+        }, 8, ["class"])
       ]),
       _: 1
     }, 8, ["disabled"]));
   }
 });
 export {
-  g as default
+  k as default
 };

package/components/sortableList/SortableList.types.d.ts

@@ -10,6 +10,7 @@ export type SortableListItem = {
         title: string;
         text: string;
     }[];
+    isDisabled?: boolean;
 };
 export type VirtualListResult = {
     list: Ref<UseVirtualListItem<SortableListItem>[]>;