@ironsource/shared-ui 2.1.3-rc.1 → 2.1.3-rc.10

package/components/table-cells/common/Editable.common.js

@@ -2,38 +2,38 @@ import { ref as a, provide as v } from "vue";
 import { useTableContext as s } from "../../table/common/TableContext.js";
 import { EditableContext as d } from "./EditableContext.js";
 import { onClickOutside as f } from "@vueuse/core";
-const E = (e) => {
-  const l = a(!1), o = a(e.cell), r = a(null), u = s("Editable"), t = a(null);
+const g = (e) => {
+  const l = a(!1), n = a(e.cell), u = a(null), r = s("Editable"), o = a(null);
   v(d, {
     focusable: !0,
-    value: o,
-    error: t,
+    value: n,
+    error: o,
     confirmable: !0,
-    onChange(n) {
-      o.value = n, t.value = e.validateFunction?.(o.value);
+    onChange(t) {
+      n.value = t, o.value = e.validateFunction?.(n.value);
     },
     onClose: () => {
-      const n = e.validateFunction?.(o.value);
-      t.value = n, !n && (u.onClose({
+      const t = e.validateFunction?.(n.value);
+      o.value = t, !t && (r.onClose({
         rowIndex: e.rowIndex,
         cellIndex: e.cellIndex,
-        value: o.value
+        value: n.value
       }), l.value = !1);
     }
   });
   const i = () => {
-    l.value || (l.value = !l.value);
+    l.value || e.isLoading || (l.value = !l.value);
   }, c = () => {
-    o.value = e.cell, t.value = null;
+    n.value = e.cell, o.value = null;
   };
-  return f(r, () => {
-    l.value = !1, c(), u.onClose();
+  return f(u, () => {
+    l.value = !1, c(), r.onClose();
   }), {
     onEdit: i,
-    target: r,
+    target: u,
     isEditing: l
   };
 };
 export {
-  E as editableCommon
+  g as editableCommon
 };

package/components/table-cells/v4/EditableV4.vue.d.ts

@@ -3,23 +3,33 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     isLoading?: boolean;
     rowIndex: number;
     cellIndex: number;
+    type: "input" | "dropdown";
     validateFunction?: (value: unknown) => string | boolean;
+    displayValue?: (option: unknown) => unknown;
 }>, {
     cell: string;
     isLoading: boolean;
+    type: string;
     validateFunction: () => false;
+    displayValue: (cell: unknown) => unknown;
 }>, {}, 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<{
     cell?: string;
     isLoading?: boolean;
     rowIndex: number;
     cellIndex: number;
+    type: "input" | "dropdown";
     validateFunction?: (value: unknown) => string | boolean;
+    displayValue?: (option: unknown) => unknown;
 }>, {
     cell: string;
     isLoading: boolean;
+    type: string;
     validateFunction: () => false;
+    displayValue: (cell: unknown) => unknown;
 }>>>, {
+    type: "input" | "dropdown";
     cell: string;
+    displayValue: (option: unknown) => unknown;
     validateFunction: (value: unknown) => string | boolean;
     isLoading: boolean;
 }>, {

package/components/table-cells/v4/EditableV4.vue.js

@@ -1,7 +1,7 @@
 import o from "./EditableV4.vue2.js";
 /* empty css                 */import e from "../../../_virtual/_plugin-vue_export-helper.js";
-// import "../../../EditableV4.vue_vue_type_style_index_0_scoped_df325b51_lang.css"; //*');
-const d = /* @__PURE__ */ e(o, [["__scopeId", "data-v-df325b51"]]);
+// import "../../../EditableV4.vue_vue_type_style_index_0_scoped_31bfb722_lang.css"; //*');
+const p = /* @__PURE__ */ e(o, [["__scopeId", "data-v-31bfb722"]]);
 export {
-  d as default
+  p as default
 };

package/components/table-cells/v4/EditableV4.vue2.js

@@ -1,39 +1,48 @@
- import "../../../EditableV4.vue_vue_type_style_index_0_scoped_df325b51_lang.css"; import { defineComponent as u, openBlock as r, createElementBlock as a, unref as e, createElementVNode as m, renderSlot as i, createVNode as d, withCtx as y, createTextVNode as b, toDisplayString as g } from "vue";
-import { editableCommon as k } from "../common/Editable.common.js";
-import _ from "../../typography/v4/Typography.vue.js";
-import v from "../../input/v4/TextField.vue.js";
-const x = { class: "editable-wrapper" }, E = {
+ import "../../../EditableV4.vue_vue_type_style_index_0_scoped_31bfb722_lang.css"; import { defineComponent as m, openBlock as o, createElementBlock as i, unref as t, createElementVNode as f, renderSlot as r, createVNode as d, withCtx as y, createTextVNode as k, toDisplayString as V, createBlock as b, createCommentVNode as g } from "vue";
+import { editableCommon as x } from "../common/Editable.common.js";
+import v from "../../typography/v4/Typography.vue.js";
+import w from "../../input/v4/TextField.vue.js";
+import C from "../../icon/v4/IconV4.vue.js";
+const E = { class: "editable-wrapper" }, B = {
   key: 1,
   class: "editable-content"
-}, B = /* @__PURE__ */ u({
+}, S = /* @__PURE__ */ m({
   __name: "EditableV4",
   props: {
     cell: { default: "" },
     isLoading: { type: Boolean, default: !1 },
     rowIndex: null,
     cellIndex: null,
-    validateFunction: { type: Function, default: () => !1 }
+    type: { default: "input" },
+    validateFunction: { type: Function, default: () => !1 },
+    displayValue: { type: Function, default: (e) => e }
   },
-  setup(t) {
-    const s = t, { onEdit: o, target: c, isEditing: p } = k(s);
-    return (n, l) => (r(), a("div", {
+  setup(e) {
+    const c = e, { onEdit: n, target: s, isEditing: p } = x(c);
+    return (l, a) => (o(), i("div", {
       ref_key: "target",
-      ref: c,
+      ref: s,
       class: "editable",
-      onClick: l[0] || (l[0] = //@ts-ignore
-      (...f) => e(o) && e(o)(...f))
+      onClick: a[0] || (a[0] = //@ts-ignore
+      (...u) => t(n) && t(n)(...u))
     }, [
-      m("div", x, [
-        e(p) ? i(n.$slots, "input", { key: 0 }, () => [
-          d(e(v))
-        ], !0) : (r(), a("div", E, [
-          i(n.$slots, "content", {}, () => [
-            d(e(_), { variant: "body1" }, {
+      f("div", E, [
+        t(p) ? r(l.$slots, "input", { key: 0 }, () => [
+          d(t(w))
+        ], !0) : (o(), i("div", B, [
+          r(l.$slots, "content", {}, () => [
+            d(t(v), { variant: "body1" }, {
               default: y(() => [
-                b(g(t.cell), 1)
+                k(V(e.displayValue(e.cell)), 1)
               ]),
               _: 1
-            })
+            }),
+            e.type === "dropdown" ? (o(), b(t(C), {
+              key: 0,
+              class: "caret-icon",
+              name: "caret-down",
+              size: "20px"
+            })) : g("", !0)
           ], !0)
         ]))
       ])
@@ -41,5 +50,5 @@ const x = { class: "editable-wrapper" }, E = {
   }
 });
 export {
-  B as default
+  S as default
 };

package/components/table-cells/v4/index.d.ts

@@ -4,14 +4,25 @@ declare const EditableTypes: () => ({
         $: import("vue").ComponentInternalInstance;
         $data: {};
         $props: Partial<{
+            type: "input" | "dropdown";
             cell: string;
+            displayValue: (option: unknown) => unknown;
             validateFunction: (value: unknown) => string | boolean;
             isLoading: boolean;
         }> & Omit<Readonly<import("vue").ExtractPropTypes<{
+            type: {
+                type: import("vue").PropType<"input" | "dropdown">;
+                required: true;
+                default: string;
+            };
             cell: {
                 type: import("vue").PropType<string>;
                 default: string;
             };
+            displayValue: {
+                type: import("vue").PropType<(option: unknown) => unknown>;
+                default: (cell: unknown) => unknown;
+            };
             validateFunction: {
                 type: import("vue").PropType<(value: unknown) => string | boolean>;
                 default: () => false;
@@ -28,7 +39,7 @@ declare const EditableTypes: () => ({
                 type: import("vue").PropType<number>;
                 required: true;
             };
-        }>> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "cell" | "validateFunction" | "isLoading">;
+        }>> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "type" | "cell" | "displayValue" | "validateFunction" | "isLoading">;
         $attrs: {
             [x: string]: unknown;
         };
@@ -43,10 +54,19 @@ declare const EditableTypes: () => ({
         $emit: (event: string, ...args: any[]) => void;
         $el: any;
         $options: import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
+            type: {
+                type: import("vue").PropType<"input" | "dropdown">;
+                required: true;
+                default: string;
+            };
             cell: {
                 type: import("vue").PropType<string>;
                 default: string;
             };
+            displayValue: {
+                type: import("vue").PropType<(option: unknown) => unknown>;
+                default: (cell: unknown) => unknown;
+            };
             validateFunction: {
                 type: import("vue").PropType<(value: unknown) => string | boolean>;
                 default: () => false;
@@ -64,7 +84,9 @@ declare const EditableTypes: () => ({
                 required: true;
             };
         }>>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {
+            type: "input" | "dropdown";
             cell: string;
+            displayValue: (option: unknown) => unknown;
             validateFunction: (value: unknown) => string | boolean;
             isLoading: boolean;
         }, {}, string> & {
@@ -88,10 +110,19 @@ declare const EditableTypes: () => ({
         $nextTick: typeof import("vue").nextTick;
         $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (args_0: R, args_1: R) => any : (...args: any) => any, options?: import("vue").WatchOptions<boolean>): import("vue").WatchStopHandle;
     } & Readonly<import("vue").ExtractPropTypes<{
+        type: {
+            type: import("vue").PropType<"input" | "dropdown">;
+            required: true;
+            default: string;
+        };
         cell: {
             type: import("vue").PropType<string>;
             default: string;
         };
+        displayValue: {
+            type: import("vue").PropType<(option: unknown) => unknown>;
+            default: (cell: unknown) => unknown;
+        };
         validateFunction: {
             type: import("vue").PropType<(value: unknown) => string | boolean>;
             default: () => false;
@@ -113,10 +144,19 @@ declare const EditableTypes: () => ({
     __isTeleport?: never;
     __isSuspense?: never;
 } & import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
+    type: {
+        type: import("vue").PropType<"input" | "dropdown">;
+        required: true;
+        default: string;
+    };
     cell: {
         type: import("vue").PropType<string>;
         default: string;
     };
+    displayValue: {
+        type: import("vue").PropType<(option: unknown) => unknown>;
+        default: (cell: unknown) => unknown;
+    };
     validateFunction: {
         type: import("vue").PropType<(value: unknown) => string | boolean>;
         default: () => false;
@@ -134,7 +174,9 @@ declare const EditableTypes: () => ({
         required: true;
     };
 }>>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {
+    type: "input" | "dropdown";
     cell: string;
+    displayValue: (option: unknown) => unknown;
     validateFunction: (value: unknown) => string | boolean;
     isLoading: boolean;
 }, {}, string> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {

package/components/tabs/v3/Tabs.vue.d.ts

@@ -26,8 +26,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
 }>>> & {
     "onUpdate:selectedTab"?: (tabId: string | number) => any;
 }, {
-    size: "sm" | "md" | "lg" | "xl";
     variant: "fill" | "fix";
+    size: "sm" | "md" | "lg" | "xl";
     testId: string;
     tabsList: Tab[];
 }>, {

package/components/tabs/v3/index.d.ts

@@ -3,19 +3,19 @@ declare const TabsTypes: () => ({
         $: import("vue").ComponentInternalInstance;
         $data: {};
         $props: Partial<{
-            size: "sm" | "md" | "lg" | "xl";
             variant: "fill" | "fix";
+            size: "sm" | "md" | "lg" | "xl";
             testId: string;
             tabsList: import("../common/Tabs.types").Tab[];
         }> & Omit<Readonly<import("vue").ExtractPropTypes<{
-            size: {
-                type: import("vue").PropType<"sm" | "md" | "lg" | "xl">;
-                default: string;
-            };
             variant: {
                 type: import("vue").PropType<"fill" | "fix">;
                 default: string;
             };
+            size: {
+                type: import("vue").PropType<"sm" | "md" | "lg" | "xl">;
+                default: string;
+            };
             testId: {
                 type: import("vue").PropType<string>;
                 default: string;
@@ -31,7 +31,7 @@ declare const TabsTypes: () => ({
             };
         }>> & {
             "onUpdate:selectedTab"?: (tabId: string | number) => any;
-        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "size" | "variant" | "testId" | "tabsList">;
+        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "variant" | "size" | "testId" | "tabsList">;
         $attrs: {
             [x: string]: unknown;
         };
@@ -46,14 +46,14 @@ declare const TabsTypes: () => ({
         $emit: (event: "update:selectedTab", tabId: string | number) => void;
         $el: any;
         $options: import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
-            size: {
-                type: import("vue").PropType<"sm" | "md" | "lg" | "xl">;
-                default: string;
-            };
             variant: {
                 type: import("vue").PropType<"fill" | "fix">;
                 default: string;
             };
+            size: {
+                type: import("vue").PropType<"sm" | "md" | "lg" | "xl">;
+                default: string;
+            };
             testId: {
                 type: import("vue").PropType<string>;
                 default: string;
@@ -72,8 +72,8 @@ declare const TabsTypes: () => ({
         }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
             "update:selectedTab": (tabId: string | number) => void;
         }, string, {
-            size: "sm" | "md" | "lg" | "xl";
             variant: "fill" | "fix";
+            size: "sm" | "md" | "lg" | "xl";
             testId: string;
             tabsList: import("../common/Tabs.types").Tab[];
         }, {}, string> & {
@@ -97,14 +97,14 @@ declare const TabsTypes: () => ({
         $nextTick: typeof import("vue").nextTick;
         $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (args_0: R, args_1: R) => any : (...args: any) => any, options?: import("vue").WatchOptions<boolean>): import("vue").WatchStopHandle;
     } & Readonly<import("vue").ExtractPropTypes<{
-        size: {
-            type: import("vue").PropType<"sm" | "md" | "lg" | "xl">;
-            default: string;
-        };
         variant: {
             type: import("vue").PropType<"fill" | "fix">;
             default: string;
         };
+        size: {
+            type: import("vue").PropType<"sm" | "md" | "lg" | "xl">;
+            default: string;
+        };
         testId: {
             type: import("vue").PropType<string>;
             default: string;
@@ -125,14 +125,14 @@ declare const TabsTypes: () => ({
     __isTeleport?: never;
     __isSuspense?: never;
 } & import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
-    size: {
-        type: import("vue").PropType<"sm" | "md" | "lg" | "xl">;
-        default: string;
-    };
     variant: {
         type: import("vue").PropType<"fill" | "fix">;
         default: string;
     };
+    size: {
+        type: import("vue").PropType<"sm" | "md" | "lg" | "xl">;
+        default: string;
+    };
     testId: {
         type: import("vue").PropType<string>;
         default: string;
@@ -151,8 +151,8 @@ declare const TabsTypes: () => ({
 }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:selectedTab": (tabId: string | number) => void;
 }, string, {
-    size: "sm" | "md" | "lg" | "xl";
     variant: "fill" | "fix";
+    size: "sm" | "md" | "lg" | "xl";
     testId: string;
     tabsList: import("../common/Tabs.types").Tab[];
 }, {}, string> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {

package/components/textArea/v3/TextArea.vue.js

@@ -0,0 +1,7 @@
+import e from "./TextArea.vue2.js";
+/* empty css               */import o from "../../../_virtual/_plugin-vue_export-helper.js";
+// import "../../../TextArea.vue_vue_type_style_index_0_scoped_eb62e4c0_lang.css"; //*');
+const c = /* @__PURE__ */ o(e, [["__scopeId", "data-v-eb62e4c0"]]);
+export {
+  c as default
+};

package/components/textArea/{TextArea.vue2.js → v3/TextArea.vue2.js}

@@ -1,7 +1,7 @@
- import "../../TextArea.vue_vue_type_style_index_0_scoped_889b62ac_lang.css"; import { defineComponent as x, openBlock as d, createElementBlock as l, normalizeClass as s, unref as t, createVNode as i, withCtx as c, createTextVNode as o, toDisplayString as n, createCommentVNode as u, createElementVNode as T } from "vue";
-import "../typography/Heading.vue.js";
-import f from "../typography/Text.vue.js";
-import { TextAreaTestIdModifiers as a } from "../../testids/index.js";
+ import "../../../TextArea.vue_vue_type_style_index_0_scoped_eb62e4c0_lang.css"; import { defineComponent as x, openBlock as d, createElementBlock as l, normalizeClass as s, unref as t, createVNode as i, withCtx as c, createTextVNode as o, toDisplayString as n, createCommentVNode as u, createElementVNode as T } from "vue";
+import "../../typography/Heading.vue.js";
+import f from "../../typography/Text.vue.js";
+import { TextAreaTestIdModifiers as a } from "../../../testids/index.js";
 const h = ["data-testid"], k = ["data-testid"], E = ["value", "placeholder", "disabled", "data-testid"], I = {
   key: 1,
   class: "extra-text-container"

package/components/textArea/v4/TextAreaV4.vue.d.ts

@@ -0,0 +1,100 @@
+import { TooltipPositions } from '@/components/tooltip/common/Tooltip.types';
+import { FeedbackVariant } from '@/components/shared/commonTypes';
+declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    modelValue?: string;
+    placeholder?: string;
+    disabled?: boolean;
+    label?: string;
+    maxLength?: number;
+    mandatory?: boolean;
+    hoverHelpText?: string;
+    hoverHelpTextPlacement?: TooltipPositions;
+    feedbackVariant?: FeedbackVariant;
+    feedbackText?: string;
+    showFeedbackTextIcon?: boolean;
+    resize?: 'none' | 'vertical' | 'horizontal' | 'both';
+    height?: string;
+    testId?: string;
+}>, {
+    modelValue: string;
+    placeholder: string;
+    disabled: boolean;
+    label: string;
+    maxLength: any;
+    mandatory: boolean;
+    hoverHelpText: string;
+    hoverHelpTextPlacement: string;
+    feedbackText: string;
+    feedbackVariant: any;
+    showFeedbackTextIcon: boolean;
+    resize: string;
+    testId: string;
+    height: any;
+}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string) => void;
+}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    modelValue?: string;
+    placeholder?: string;
+    disabled?: boolean;
+    label?: string;
+    maxLength?: number;
+    mandatory?: boolean;
+    hoverHelpText?: string;
+    hoverHelpTextPlacement?: TooltipPositions;
+    feedbackVariant?: FeedbackVariant;
+    feedbackText?: string;
+    showFeedbackTextIcon?: boolean;
+    resize?: 'none' | 'vertical' | 'horizontal' | 'both';
+    height?: string;
+    testId?: string;
+}>, {
+    modelValue: string;
+    placeholder: string;
+    disabled: boolean;
+    label: string;
+    maxLength: any;
+    mandatory: boolean;
+    hoverHelpText: string;
+    hoverHelpTextPlacement: string;
+    feedbackText: string;
+    feedbackVariant: any;
+    showFeedbackTextIcon: boolean;
+    resize: string;
+    testId: string;
+    height: any;
+}>>> & {
+    "onUpdate:modelValue"?: (value: string) => any;
+}, {
+    label: string;
+    disabled: boolean;
+    height: string;
+    resize: 'none' | 'vertical' | 'horizontal' | 'both';
+    mandatory: boolean;
+    testId: string;
+    modelValue: string;
+    placeholder: string;
+    hoverHelpText: string;
+    hoverHelpTextPlacement: TooltipPositions;
+    feedbackText: string;
+    feedbackVariant: FeedbackVariant;
+    maxLength: number;
+    showFeedbackTextIcon: boolean;
+}>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};

package/components/textArea/v4/TextAreaV4.vue.js

@@ -0,0 +1,7 @@
+import e from "./TextAreaV4.vue2.js";
+/* empty css                 */import o from "../../../_virtual/_plugin-vue_export-helper.js";
+// import "../../../TextAreaV4.vue_vue_type_style_index_0_scoped_0336a92f_lang.css"; //*');
+const a = /* @__PURE__ */ o(e, [["__scopeId", "data-v-0336a92f"]]);
+export {
+  a as default
+};

package/components/textArea/v4/TextAreaV4.vue2.js

@@ -0,0 +1,74 @@
+ import "../../../TextAreaV4.vue_vue_type_style_index_0_scoped_0336a92f_lang.css"; import { defineComponent as s, computed as b, openBlock as t, createElementBlock as i, mergeProps as c, unref as a, createBlock as n, createCommentVNode as l, createElementVNode as g } from "vue";
+import v from "../../shared/FieldLabel.vue.js";
+import k from "../../shared/FieldMaxLength.vue.js";
+import T from "../../shared/FieldHelpText.vue.js";
+import { TextAreaTestIdModifiers as u } from "../../../testids/index.js";
+import { useTestIdAttrs as V } from "../../../utils/testIds.js";
+const y = ["value", "placeholder", "disabled", "maxlength"], I = {
+  key: 1,
+  class: "footer"
+}, w = /* @__PURE__ */ s({
+  __name: "TextAreaV4",
+  props: {
+    modelValue: { default: "" },
+    placeholder: { default: "" },
+    disabled: { type: Boolean, default: !1 },
+    label: { default: "" },
+    maxLength: { default: null },
+    mandatory: { type: Boolean, default: !1 },
+    hoverHelpText: { default: "" },
+    hoverHelpTextPlacement: { default: "top" },
+    feedbackVariant: { default: null },
+    feedbackText: { default: "" },
+    showFeedbackTextIcon: { type: Boolean, default: !0 },
+    resize: { default: "none" },
+    height: { default: null },
+    testId: { default: "" }
+  },
+  emits: ["update:modelValue"],
+  setup(e, { emit: h }) {
+    const o = e, m = (d) => {
+      h("update:modelValue", d.target.value);
+    }, x = b(() => (o.modelValue || "").length), r = V(o.testId, u);
+    return (d, f) => (t(), i("div", c({ class: "textarea-field" }, a(r)[a(u).WRAPPER]), [
+      e.label ? (t(), n(v, {
+        key: 0,
+        class: "textarea-label",
+        label: e.label,
+        mandatory: e.mandatory,
+        "hover-help-text": e.hoverHelpText,
+        "hover-help-text-placement": e.hoverHelpTextPlacement,
+        disabled: e.disabled,
+        "test-id": e.testId
+      }, null, 8, ["label", "mandatory", "hover-help-text", "hover-help-text-placement", "disabled", "test-id"])) : l("", !0),
+      g("textarea", c({
+        class: ["textarea", {
+          "textarea--disabled": e.disabled,
+          [`textarea--variant-${e.feedbackVariant}`]: !0
+        }],
+        style: { resize: e.resize, height: e.height },
+        value: e.modelValue,
+        placeholder: e.placeholder,
+        disabled: e.disabled,
+        maxlength: e.maxLength
+      }, a(r)[a(u).FIELD], { onInput: m }), null, 16, y),
+      e.feedbackText || e.maxLength ? (t(), i("div", I, [
+        e.feedbackText ? (t(), n(T, {
+          key: 0,
+          text: e.feedbackText,
+          variant: e.feedbackVariant,
+          "show-icon": e.showFeedbackTextIcon,
+          "test-id": e.testId
+        }, null, 8, ["text", "variant", "show-icon", "test-id"])) : l("", !0),
+        e.maxLength ? (t(), n(k, {
+          key: 1,
+          "current-length": a(x),
+          "max-length": e.maxLength
+        }, null, 8, ["current-length", "max-length"])) : l("", !0)
+      ])) : l("", !0)
+    ], 16));
+  }
+});
+export {
+  w as default
+};