@ironsource/shared-ui 2.1.7-test.1 → 2.1.7-test.10

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

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

package/components/table-cells/common/EditableContext.d.ts

@@ -6,6 +6,7 @@ export interface EditableContextProps {
     error?: Ref<string>;
     value?: Ref<unknown>;
     confirmable?: boolean;
+    saveOnClickOutside?: boolean;
 }
 export declare const EditableContext: InjectionKey<EditableContextProps>;
 export declare function useEditableContext(): EditableContextProps;

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

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

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_31bfb722_lang.css"; //*');
-const p = /* @__PURE__ */ e(o, [["__scopeId", "data-v-31bfb722"]]);
+import e from "./EditableV4.vue2.js";
+/* empty css                 */import o from "../../../_virtual/_plugin-vue_export-helper.js";
+// import "../../../EditableV4.vue_vue_type_style_index_0_scoped_e0c047b4_lang.css"; //*');
+const c = /* @__PURE__ */ o(e, [["__scopeId", "data-v-e0c047b4"]]);
 export {
-  p as default
+  c as default
 };

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

@@ -1,13 +1,13 @@
- 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";
+ import "../../../EditableV4.vue_vue_type_style_index_0_scoped_e0c047b4_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 v } from "../common/Editable.common.js";
+import x from "../../typography/v4/Typography.vue.js";
+import C from "../../input/v4/TextField.vue.js";
+import w from "../../icon/v4/IconV4.vue.js";
 import "../../icon/v4/IconFlag.vue.js";
-const E = { class: "editable-wrapper" }, B = {
+const B = { class: "editable-wrapper" }, E = {
   key: 1,
   class: "editable-content"
-}, _ = /* @__PURE__ */ m({
+}, S = /* @__PURE__ */ m({
   __name: "EditableV4",
   props: {
     cell: { default: "" },
@@ -15,30 +15,31 @@ const E = { class: "editable-wrapper" }, B = {
     rowIndex: null,
     cellIndex: null,
     type: { default: "input" },
+    saveOnClickOutside: { type: Boolean, default: !0 },
     validateFunction: { type: Function, default: () => !1 },
     displayValue: { type: Function, default: (e) => e }
   },
   setup(e) {
-    const c = e, { onEdit: n, target: s, isEditing: p } = x(c);
+    const s = e, { onEdit: n, target: c, isEditing: u } = v(s);
     return (l, a) => (o(), i("div", {
       ref_key: "target",
-      ref: s,
+      ref: c,
       class: "editable",
       onClick: a[0] || (a[0] = //@ts-ignore
-      (...u) => t(n) && t(n)(...u))
+      (...p) => t(n) && t(n)(...p))
     }, [
-      f("div", E, [
-        t(p) ? r(l.$slots, "input", { key: 0 }, () => [
-          d(t(w))
-        ], !0) : (o(), i("div", B, [
+      f("div", B, [
+        t(u) ? r(l.$slots, "input", { key: 0 }, () => [
+          d(t(C))
+        ], !0) : (o(), i("div", E, [
           r(l.$slots, "content", {}, () => [
-            d(t(v), { variant: "body1" }, {
+            d(t(x), { variant: "body1" }, {
               default: y(() => [
                 k(V(e.displayValue(e.cell)), 1)
               ]),
               _: 1
             }),
-            e.type === "dropdown" ? (o(), b(t(C), {
+            e.type === "dropdown" ? (o(), b(t(w), {
               key: 0,
               class: "caret-icon",
               name: "caret-down",
@@ -51,5 +52,5 @@ const E = { class: "editable-wrapper" }, B = {
   }
 });
 export {
-  _ as default
+  S as default
 };

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

@@ -6,6 +6,7 @@ declare const EditableTypes: () => ({
         $props: Partial<{
             type: "input" | "dropdown";
             cell: string;
+            saveOnClickOutside: boolean;
             validateFunction: (value: unknown) => string | boolean;
             isLoading: boolean;
             displayValue: (option: unknown) => unknown;
@@ -19,6 +20,10 @@ declare const EditableTypes: () => ({
                 type: import("vue").PropType<string>;
                 default: string;
             };
+            saveOnClickOutside: {
+                type: import("vue").PropType<boolean>;
+                default: boolean;
+            };
             validateFunction: {
                 type: import("vue").PropType<(value: unknown) => string | boolean>;
                 default: () => false;
@@ -39,7 +44,7 @@ declare const EditableTypes: () => ({
                 type: import("vue").PropType<(option: unknown) => unknown>;
                 default: (cell: unknown) => unknown;
             };
-        }>> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "type" | "cell" | "validateFunction" | "isLoading" | "displayValue">;
+        }>> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "type" | "cell" | "saveOnClickOutside" | "validateFunction" | "isLoading" | "displayValue">;
         $attrs: {
             [x: string]: unknown;
         };
@@ -63,6 +68,10 @@ declare const EditableTypes: () => ({
                 type: import("vue").PropType<string>;
                 default: string;
             };
+            saveOnClickOutside: {
+                type: import("vue").PropType<boolean>;
+                default: boolean;
+            };
             validateFunction: {
                 type: import("vue").PropType<(value: unknown) => string | boolean>;
                 default: () => false;
@@ -86,6 +95,7 @@ declare const EditableTypes: () => ({
         }>>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {
             type: "input" | "dropdown";
             cell: string;
+            saveOnClickOutside: boolean;
             validateFunction: (value: unknown) => string | boolean;
             isLoading: boolean;
             displayValue: (option: unknown) => unknown;
@@ -119,6 +129,10 @@ declare const EditableTypes: () => ({
             type: import("vue").PropType<string>;
             default: string;
         };
+        saveOnClickOutside: {
+            type: import("vue").PropType<boolean>;
+            default: boolean;
+        };
         validateFunction: {
             type: import("vue").PropType<(value: unknown) => string | boolean>;
             default: () => false;
@@ -153,6 +167,10 @@ declare const EditableTypes: () => ({
         type: import("vue").PropType<string>;
         default: string;
     };
+    saveOnClickOutside: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    };
     validateFunction: {
         type: import("vue").PropType<(value: unknown) => string | boolean>;
         default: () => false;
@@ -176,6 +194,7 @@ declare const EditableTypes: () => ({
 }>>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {
     type: "input" | "dropdown";
     cell: string;
+    saveOnClickOutside: boolean;
     validateFunction: (value: unknown) => string | boolean;
     isLoading: boolean;
     displayValue: (option: unknown) => unknown;

package/components/tabs/v4/TabsV4.vue.js

@@ -1,7 +1,7 @@
 import o from "./TabsV4.vue2.js";
-/* empty css             */import e from "../../../_virtual/_plugin-vue_export-helper.js";
-// import "../../../TabsV4.vue_vue_type_style_index_0_scoped_bab40cfe_lang.css"; //*');
-const a = /* @__PURE__ */ e(o, [["__scopeId", "data-v-bab40cfe"]]);
+/* empty css             */import _ from "../../../_virtual/_plugin-vue_export-helper.js";
+// import "../../../TabsV4.vue_vue_type_style_index_0_scoped_f9433b11_lang.css"; //*');
+const p = /* @__PURE__ */ _(o, [["__scopeId", "data-v-f9433b11"]]);
 export {
-  a as default
+  p as default
 };

package/components/tabs/v4/TabsV4.vue2.js

@@ -1,9 +1,9 @@
- import "../../../TabsV4.vue_vue_type_style_index_0_scoped_bab40cfe_lang.css"; import { defineComponent as h, useCssVars as C, ref as v, watch as w, nextTick as $, openBlock as r, createElementBlock as l, mergeProps as y, unref as s, Fragment as S, renderList as g, normalizeClass as A, renderSlot as N, createBlock as V, withCtx as B, createTextVNode as M, toDisplayString as E, createCommentVNode as P, pushScopeId as W, popScopeId as _, createElementVNode as H } from "vue";
-import R from "../../typography/v4/Typography.vue.js";
-import { TabsTestIdModifiers as c } from "../../../testids/index.js";
+ import "../../../TabsV4.vue_vue_type_style_index_0_scoped_f9433b11_lang.css"; import { defineComponent as x, useCssVars as y, ref as l, watch as C, nextTick as $, openBlock as o, createElementBlock as c, mergeProps as w, unref as s, Fragment as A, renderList as S, normalizeClass as g, renderSlot as V, createBlock as B, withCtx as M, createTextVNode as N, toDisplayString as R, createCommentVNode as _, pushScopeId as E, popScopeId as P, createElementVNode as W } from "vue";
+import H from "../../typography/v4/Typography.vue.js";
+import { TabsTestIdModifiers as m } from "../../../testids/index.js";
 import { tabsCommon as z } from "../common/tabsCommon.js";
 import { useTestIdAttrs as D } from "../../../utils/testIds.js";
-const F = (t) => (W("data-v-bab40cfe"), t = t(), _(), t), U = ["data-testid", "onClick", "onMouseover"], j = /* @__PURE__ */ F(() => /* @__PURE__ */ H("div", { class: "tabs-border-line" }, null, -1)), Q = /* @__PURE__ */ h({
+const F = (t) => (E("data-v-f9433b11"), t = t(), P(), t), U = ["data-testid", "onClick", "onMouseover"], j = /* @__PURE__ */ F(() => /* @__PURE__ */ W("div", { class: "tabs-border-line" }, null, -1)), Q = /* @__PURE__ */ x({
   __name: "TabsV4",
   props: {
     tabsList: { default: () => [] },
@@ -12,59 +12,56 @@ const F = (t) => (W("data-v-bab40cfe"), t = t(), _(), t), U = ["data-testid", "o
     testId: { default: "" }
   },
   emits: ["update:selectedTab"],
-  setup(t, { emit: f }) {
-    const a = t;
-    C((o) => ({
-      "57c21ae0": b.value,
-      bdc3e3e6: m.value
+  setup(t, { emit: p }) {
+    const r = t;
+    y((a) => ({
+      "167b065e": v.value,
+      "8cfadb62": b.value
     }));
-    const {
-      skipUnwrap: p,
-      selectTab: T,
-      setHover: I,
-      clearHover: u,
-      tabsNewList: L,
-      getSelectedTabIndex: k
-    } = z(a, f), x = D(a.testId, c), d = (o) => o.id === a.selectedTab, m = v(), b = v();
-    return w(
-      [() => a.variant, () => a.selectedTab, () => a.tabsList],
+    const { skipUnwrap: T, selectTab: I, setHover: L, clearHover: u, getSelectedTabIndex: k } = z(r, p), f = l(null), h = D(r.testId, m), i = (a) => a.id === r.selectedTab, b = l(), v = l();
+    return C(
+      [() => r.variant, () => r.selectedTab, () => r.tabsList],
       async () => {
-        const o = k();
+        const a = k();
+        if (a === -1)
+          return;
         await $();
-        const i = L.value[o];
-        m.value = i?.clientWidth + "px", b.value = i?.offsetLeft + "px";
+        const e = Array.from(f.value?.children || []).at(a);
+        b.value = e?.clientWidth + "px", v.value = e?.offsetLeft + "px";
       },
       { immediate: !0 }
-    ), (o, i) => (r(), l("ul", y({
+    ), (a, n) => (o(), c("ul", w({
+      ref_key: "tabsListRef",
+      ref: f,
       class: ["tabs-list", [`tabs-list--${t.variant}`]]
-    }, s(x)[s(c).WRAPPER]), [
-      (r(!0), l(S, null, g(t.tabsList, (e) => (r(), l("li", {
+    }, s(h)[s(m).WRAPPER]), [
+      (o(!0), c(A, null, S(t.tabsList, (e) => (o(), c("li", {
         ref_for: !0,
-        ref: s(p).tabsNewList,
+        ref: s(T).tabsNewList,
         key: e.id,
-        class: A(["tab-item", {
+        class: g(["tab-item", {
           "tab-item--disabled": e.disabled,
-          "tab-item--active": d(e)
+          "tab-item--active": i(e)
         }]),
-        "data-testid": t.testId ? `${t.testId}-${s(c).TAB}-${e.id}` : void 0,
-        onClick: (n) => s(T)(e),
-        onMouseover: (n) => s(I)(e),
-        onMouseleave: i[0] || (i[0] = //@ts-ignore
-        (...n) => s(u) && s(u)(...n))
+        "data-testid": t.testId ? `${t.testId}-${s(m).TAB}-${e.id}` : void 0,
+        onClick: (d) => s(I)(e),
+        onMouseover: (d) => s(L)(e),
+        onMouseleave: n[0] || (n[0] = //@ts-ignore
+        (...d) => s(u) && s(u)(...d))
       }, [
-        N(o.$slots, "tab-icon", {
+        V(a.$slots, "tab-icon", {
           tab: e,
-          active: d(e)
+          active: i(e)
         }, void 0, !0),
-        e.name ? (r(), V(s(R), {
+        e.name ? (o(), B(s(H), {
           key: 0,
-          variant: d(e) ? "tabLabel2" : "tabLabel1"
+          variant: i(e) ? "tabLabel2" : "tabLabel1"
         }, {
-          default: B(() => [
-            M(E(e.name), 1)
+          default: M(() => [
+            N(R(e.name), 1)
           ]),
           _: 2
-        }, 1032, ["variant"])) : P("", !0)
+        }, 1032, ["variant"])) : _("", !0)
       ], 42, U))), 128)),
       j
     ], 16));

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

@@ -1,11 +1,12 @@
 import { TooltipPositions } from '@/components/tooltip/common/Tooltip.types';
-import { FeedbackVariant } from '@/components/shared/commonTypes';
+import { FeedbackVariant, MaxLengthCounterPositions } from '@/components/shared/commonTypes';
 declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     modelValue?: string;
     placeholder?: string;
     disabled?: boolean;
     label?: string;
     maxLength?: number;
+    maxLengthCounterPosition?: MaxLengthCounterPositions;
     mandatory?: boolean;
     hoverHelpText?: string;
     hoverHelpTextPlacement?: TooltipPositions;
@@ -21,6 +22,7 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     disabled: boolean;
     label: string;
     maxLength: any;
+    maxLengthCounterPosition: string;
     mandatory: boolean;
     hoverHelpText: string;
     hoverHelpTextPlacement: string;
@@ -38,6 +40,7 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     disabled?: boolean;
     label?: string;
     maxLength?: number;
+    maxLengthCounterPosition?: MaxLengthCounterPositions;
     mandatory?: boolean;
     hoverHelpText?: string;
     hoverHelpTextPlacement?: TooltipPositions;
@@ -53,6 +56,7 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     disabled: boolean;
     label: string;
     maxLength: any;
+    maxLengthCounterPosition: string;
     mandatory: boolean;
     hoverHelpText: string;
     hoverHelpTextPlacement: string;
@@ -76,6 +80,7 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     maxLength: number;
     modelValue: string;
     placeholder: string;
+    maxLengthCounterPosition: MaxLengthCounterPositions;
     feedbackText: string;
     feedbackVariant: FeedbackVariant;
     showFeedbackTextIcon: boolean;

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

@@ -1,7 +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_f3b2c01d_lang.css"; //*');
-const c = /* @__PURE__ */ o(e, [["__scopeId", "data-v-f3b2c01d"]]);
+// import "../../../TextAreaV4.vue_vue_type_style_index_0_scoped_4114ef89_lang.css"; //*');
+const p = /* @__PURE__ */ o(e, [["__scopeId", "data-v-4114ef89"]]);
 export {
-  c as default
+  p as default
 };

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

@@ -1,13 +1,13 @@
- import "../../../TextAreaV4.vue_vue_type_style_index_0_scoped_f3b2c01d_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 "../../../TextAreaV4.vue_vue_type_style_index_0_scoped_4114ef89_lang.css"; import { defineComponent as f, computed as b, openBlock as t, createElementBlock as r, mergeProps as c, unref as a, createBlock as d, 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 { TextAreaTestIdModifiers as i } 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({
+}, w = /* @__PURE__ */ f({
   __name: "TextAreaV4",
   props: {
     modelValue: { default: "" },
@@ -15,6 +15,7 @@ const y = ["value", "placeholder", "disabled", "maxlength"], I = {
     disabled: { type: Boolean, default: !1 },
     label: { default: "" },
     maxLength: { default: null },
+    maxLengthCounterPosition: { default: "inside" },
     mandatory: { type: Boolean, default: !1 },
     hoverHelpText: { default: "" },
     hoverHelpTextPlacement: { default: "top" },
@@ -27,11 +28,15 @@ const y = ["value", "placeholder", "disabled", "maxlength"], I = {
   },
   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, {
+    const u = e, m = (n) => {
+      h("update:modelValue", n.target.value);
+    }, x = b(() => (u.modelValue || "").length), o = V(u.testId, i);
+    return (n, s) => (t(), r("div", c({
+      class: ["textarea-field", {
+        "textarea-field--counter-inside": e.maxLength && e.maxLengthCounterPosition === "inside"
+      }]
+    }, a(o)[a(i).WRAPPER]), [
+      e.label ? (t(), d(v, {
         key: 0,
         class: "textarea-label",
         label: e.label,
@@ -51,17 +56,18 @@ const y = ["value", "placeholder", "disabled", "maxlength"], I = {
         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, {
+      }, a(o)[a(i).FIELD], { onInput: m }), null, 16, y),
+      e.feedbackText || e.maxLength ? (t(), r("div", I, [
+        e.feedbackText ? (t(), d(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, {
+        e.maxLength ? (t(), d(k, {
           key: 1,
+          class: "max-length-counter",
           "current-length": a(x),
           "max-length": e.maxLength
         }, null, 8, ["current-length", "max-length"])) : l("", !0)

package/components/textArea/v4/index.d.ts

@@ -43,6 +43,10 @@ declare const TextAreaTypes: () => import("vue").DefineComponent<{
         type: import("vue").PropType<string>;
         default: string;
     };
+    maxLengthCounterPosition: {
+        type: import("vue").PropType<"inside" | "outside">;
+        default: string;
+    };
     feedbackText: {
         type: import("vue").PropType<string>;
         default: string;
@@ -102,6 +106,10 @@ declare const TextAreaTypes: () => import("vue").DefineComponent<{
         type: import("vue").PropType<string>;
         default: string;
     };
+    maxLengthCounterPosition: {
+        type: import("vue").PropType<"inside" | "outside">;
+        default: string;
+    };
     feedbackText: {
         type: import("vue").PropType<string>;
         default: string;
@@ -128,6 +136,7 @@ declare const TextAreaTypes: () => import("vue").DefineComponent<{
     maxLength: number;
     modelValue: string;
     placeholder: string;
+    maxLengthCounterPosition: "inside" | "outside";
     feedbackText: string;
     feedbackVariant: "success" | "warning" | "error";
     showFeedbackTextIcon: boolean;

package/design-foundation.stories/icons/iconsData.d.ts

@@ -15,8 +15,12 @@ declare const iconsAdNetworks: {
     name: string;
     path: string;
 }[];
-declare const iconsContentRateData: {
+declare const iconsIosContentRateData: {
     name: string;
     path: string;
 }[];
-export { assetsPath, iconsBrandedData, iconsADUnitData, iconsABTestData, iconsAdNetworks, iconsContentRateData, };
+declare const iconsAndroidContentRateData: {
+    name: string;
+    path: string;
+}[];
+export { assetsPath, iconsBrandedData, iconsADUnitData, iconsABTestData, iconsAdNetworks, iconsIosContentRateData, iconsAndroidContentRateData, };