@ironsource/shared-ui 2.1.12-test.50 → 2.1.12-test.53

package/components/input/v4/TextField.vue.d.ts

@@ -1,7 +1,7 @@
 import { TooltipPositions } from '@/components/tooltip/common/Tooltip.types';
 import { LabelDirection, FieldSize, FieldType } from './TextField.types';
 import { FeedbackVariant, MaxLengthCounterPositions } from '@/components/shared/commonTypes';
-declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     modelValue?: string | number;
     placeholder?: string;
     disabled?: boolean;
@@ -30,6 +30,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<im
     inlineError?: boolean;
     inlineErrorText?: string;
     inlineErrorTextPlacement?: TooltipPositions;
+    clearable?: boolean;
+    loading?: boolean;
 }>, {
     modelValue: string;
     placeholder: string;
@@ -59,12 +61,15 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<im
     feedbackVariant: any;
     showFeedbackTextIcon: boolean;
     feedbackPositionAbsolute: boolean;
-}>>, {
+    clearable: boolean;
+    loading: boolean;
+}>, {
     manualFocus: () => any;
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: string | number) => void;
     apply: () => void;
-}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    clear: () => void;
+}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     modelValue?: string | number;
     placeholder?: string;
     disabled?: boolean;
@@ -93,6 +98,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<im
     inlineError?: boolean;
     inlineErrorText?: string;
     inlineErrorTextPlacement?: TooltipPositions;
+    clearable?: boolean;
+    loading?: boolean;
 }>, {
     modelValue: string;
     placeholder: string;
@@ -122,17 +129,21 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<im
     feedbackVariant: any;
     showFeedbackTextIcon: boolean;
     feedbackPositionAbsolute: boolean;
-}>>> & Readonly<{
+    clearable: boolean;
+    loading: boolean;
+}>>> & {
     "onUpdate:modelValue"?: (value: string | number) => any;
+    onClear?: () => any;
     onApply?: () => any;
-}>, {
+}, {
     type: FieldType;
     label: string;
     testId: string;
     disabled: boolean;
     size: FieldSize;
-    modelValue: string | number;
     mandatory: boolean;
+    loading: boolean;
+    modelValue: string | number;
     hoverHelpText: string;
     hoverHelpTextPlacement: TooltipPositions;
     maxLength: number;
@@ -154,7 +165,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<im
     feedbackVariant: FeedbackVariant;
     showFeedbackTextIcon: boolean;
     feedbackPositionAbsolute: boolean;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, {
+    clearable: boolean;
+}>, {
     iconBefore?(_: {}): any;
     iconAfter?(_: {}): any;
 }>;

package/components/input/v4/TextField.vue.js

@@ -1,7 +1,7 @@
 import e from "./TextField.vue2.js";
 /* empty css                */import o from "../../../_virtual/_plugin-vue_export-helper.js";
-// import "../../../TextField.vue_vue_type_style_index_0_scoped_81fb8297_lang.css"; //*');
-const p = /* @__PURE__ */ o(e, [["__scopeId", "data-v-81fb8297"]]);
+// import "../../../TextField.vue_vue_type_style_index_0_scoped_3b7a3661_lang.css"; //*');
+const p = /* @__PURE__ */ o(e, [["__scopeId", "data-v-3b7a3661"]]);
 export {
   p as default
 };

package/components/input/v4/TextField.vue2.js

@@ -1,27 +1,31 @@
- import "../../../TextField.vue_vue_type_style_index_0_scoped_81fb8297_lang.css"; import { defineComponent as te, computed as n, ref as le, openBlock as o, createElementBlock as d, mergeProps as p, unref as t, createBlock as u, createCommentVNode as r, createVNode as y, withCtx as c, createElementVNode as F, normalizeClass as O, renderSlot as V, createTextVNode as $, toDisplayString as z, withKeys as oe, withModifiers as D, normalizeProps as N } from "vue";
+ import "../../../TextField.vue_vue_type_style_index_0_scoped_3b7a3661_lang.css"; import { defineComponent as te, computed as i, ref as le, openBlock as l, createElementBlock as s, mergeProps as d, unref as e, createBlock as f, createCommentVNode as n, createVNode as x, withCtx as b, createElementVNode as V, normalizeClass as F, renderSlot as z, createTextVNode as N, toDisplayString as $, withKeys as ae, withModifiers as D, normalizeProps as H } from "vue";
 import h from "../../icon/v4/IconV4.vue.js";
 import "../../icon/v4/IconFlag.vue.js";
-import H from "../../tooltip/v4/TooltipV4.vue.js";
+import R from "../../tooltip/v4/TooltipV4.vue.js";
 import S from "../../typography/v4/Typography.vue.js";
-import { InputTestIdModifiers as f } from "../../../testids/index.js";
-import { inputCommon as ae } from "../common/Input.common.js";
-import ne from "../../shared/FieldLabel.vue.js";
-import re from "../../shared/FieldHelpText.vue.js";
-import R from "../../shared/FieldMaxLength.vue.js";
-import { useTestIdAttrs as ie } from "../../../utils/testIds.js";
-const se = {
+import { InputTestIdModifiers as c } from "../../../testids/index.js";
+import { inputCommon as ne } from "../common/Input.common.js";
+import oe from "../../shared/FieldLabel.vue.js";
+import ie from "../../shared/FieldHelpText.vue.js";
+import W from "../../shared/FieldMaxLength.vue.js";
+import { useTestIdAttrs as re } from "../../../utils/testIds.js";
+import se from "../../loader/v4/Loader.vue.js";
+const de = {
   key: 0,
   class: "icon-container icon-before"
-}, ue = ["maxlength", "value", "placeholder", "disabled", "type", "step"], de = {
+}, ue = ["maxlength", "value", "placeholder", "disabled", "type", "step"], fe = ["onClick"], ce = {
   key: 5,
   class: "inline-error"
-}, pe = {
-  key: 7,
+}, me = {
+  key: 8,
+  class: "loading-indicator"
+}, ye = {
+  key: 9,
   class: "icon-container icon-after"
-}, fe = {
+}, xe = {
   inheritAttrs: !1
-}, Ie = /* @__PURE__ */ te({
-  ...fe,
+}, Pe = /* @__PURE__ */ te({
+  ...xe,
   __name: "TextField",
   props: {
     modelValue: { default: "" },
@@ -51,191 +55,211 @@ const se = {
     showApply: { type: Boolean, default: !1 },
     inlineError: { type: Boolean, default: !1 },
     inlineErrorText: { default: "" },
-    inlineErrorTextPlacement: { default: "top" }
+    inlineErrorTextPlacement: { default: "top" },
+    clearable: { type: Boolean, default: !1 },
+    loading: { type: Boolean, default: !1 }
   },
-  emits: ["update:modelValue", "apply"],
-  setup(W, { expose: K, emit: M }) {
-    const l = W, k = M, m = ie(l.testId, f), G = () => {
-      l.showApply ? k("apply") : i?.confirmable && j();
-    }, U = () => w.value.focus(), {
-      onConfirm: j,
-      onEnter: x,
-      inputRef: w,
-      isFocused: b,
-      showLabelInside: g,
-      api: i,
-      labelText: q,
-      sizeClass: J,
-      handleInput: I,
-      handleKeypress: L
-    } = ae(l, k), P = n(() => i.value?.value ?? l.modelValue), Q = n(() => (P.value || "").length), E = n(() => ({
-      currentLength: Q.value,
-      maxLength: l.maxLength
-    })), A = n(
-      () => l.maxLength && l.maxLengthCounterPosition === "outside"
-    ), X = n(
-      () => l.feedbackText || A.value
-    ), T = n(
-      () => !l.inlineErrorText && !i?.error?.value
-    ), B = n(
-      () => l.inlineErrorText || i?.error?.value
-    ), Y = n(
-      () => (l.inlineError || i?.withIcons) && !T.value
-    ), Z = n(
-      () => !l.inlineError && !i?.withIcons && !T.value
-    ), _ = n(
-      () => l.showApply || i?.confirmable && i?.withIcons && !i?.error?.value
-    ), C = n(
-      () => i?.error?.value ? "error" : l.feedbackVariant
-    ), v = le(!1), ee = n(() => v.value && l.type === "password" ? "text" : l.type);
+  emits: ["update:modelValue", "apply", "clear"],
+  setup(t, { expose: K, emit: p }) {
+    const a = t, m = re(a.testId, c), M = () => {
+      a.showApply ? p("apply") : r?.confirmable && U();
+    }, G = () => g.value.focus(), {
+      onConfirm: U,
+      onEnter: w,
+      inputRef: g,
+      isFocused: k,
+      showLabelInside: I,
+      api: r,
+      labelText: j,
+      sizeClass: q,
+      handleInput: L,
+      handleKeypress: C
+    } = ne(a, p), B = i(() => r.value?.value ?? a.modelValue), J = i(() => (B.value || "").length), P = i(() => ({
+      currentLength: J.value,
+      maxLength: a.maxLength
+    })), A = i(
+      () => a.maxLength && a.maxLengthCounterPosition === "outside"
+    ), Q = i(
+      () => a.feedbackText || A.value
+    ), T = i(
+      () => !a.inlineErrorText && !r?.error?.value
+    ), E = i(
+      () => a.inlineErrorText || r?.error?.value
+    ), X = i(
+      () => (a.inlineError || r?.withIcons) && !T.value
+    ), Y = i(
+      () => !a.inlineError && !r?.withIcons && !T.value
+    ), Z = i(
+      () => a.showApply || r?.confirmable && r?.withIcons && !r?.error?.value
+    ), O = i(
+      () => r?.error?.value ? "error" : a.feedbackVariant
+    ), v = le(!1), _ = i(() => v.value && a.type === "password" ? "text" : a.type), ee = () => {
+      p("update:modelValue", ""), p("clear");
+    };
     return K({
-      manualFocus: U
-    }), (e, a) => (o(), d("div", p({
+      manualFocus: G
+    }), (y, o) => (l(), s("div", d({
       class: {
         "input-with-label-container": !0,
-        disabled: e.disabled,
-        [`variant-${C.value}`]: !0
+        disabled: t.disabled,
+        [`variant-${e(O)}`]: !0
       }
-    }, t(m)[t(f).WRAPPER]), [
-      e.label && e.labelDirection !== "inside" ? (o(), u(ne, {
+    }, e(m)[e(c).WRAPPER]), [
+      t.label && t.labelDirection !== "inside" ? (l(), f(oe, {
         key: 0,
-        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"])) : r("", !0),
-      y(t(H), p({
-        disabled: !Z.value,
-        text: B.value,
-        placement: e.inlineErrorTextPlacement
-      }, t(m)[t(f).TOOLTIP_WITHOUT_ICON]), {
-        default: c(() => [
-          F("div", {
-            class: O({
+        label: t.label,
+        mandatory: t.mandatory,
+        "hover-help-text": t.hoverHelpText,
+        "hover-help-text-placement": t.hoverHelpTextPlacement,
+        disabled: t.disabled,
+        "test-id": t.testId
+      }, null, 8, ["label", "mandatory", "hover-help-text", "hover-help-text-placement", "disabled", "test-id"])) : n("", !0),
+      x(e(R), d({
+        disabled: !e(Y),
+        text: e(E),
+        placement: t.inlineErrorTextPlacement
+      }, e(m)[e(c).TOOLTIP_WITHOUT_ICON]), {
+        default: b(() => [
+          V("div", {
+            class: F({
               "input-container": !0,
-              "label-inside": t(g),
-              focused: t(b)
+              "label-inside": e(I),
+              focused: e(k)
             })
           }, [
-            e.$slots.iconBefore ? (o(), d("div", se, [
-              V(e.$slots, "iconBefore", {}, void 0, !0)
-            ])) : r("", !0),
-            e.prefix ? (o(), u(t(S), {
+            y.$slots.iconBefore ? (l(), s("div", de, [
+              z(y.$slots, "iconBefore", {}, void 0, !0)
+            ])) : n("", !0),
+            t.prefix ? (l(), f(e(S), {
               key: 1,
               class: "prefix-text",
               variant: "body1"
             }, {
-              default: c(() => [
-                $(z(e.prefix), 1)
+              default: b(() => [
+                N($(t.prefix), 1)
               ]),
               _: 1
-            })) : r("", !0),
-            F("input", p({
+            })) : n("", !0),
+            V("input", d({
               ref_key: "inputRef",
-              ref: w,
-              maxlength: e.maxLength
-            }, { ...e.$attrs, ...t(m)[t(f).FIELD] }, {
-              value: P.value,
-              placeholder: t(q),
-              disabled: e.disabled || e.viewOnly,
-              type: ee.value,
+              ref: g,
+              maxlength: t.maxLength
+            }, { ...y.$attrs, ...e(m)[e(c).FIELD] }, {
+              value: e(B),
+              placeholder: e(j),
+              disabled: t.disabled || t.viewOnly,
+              type: e(_),
               class: ["input", {
-                [t(J)]: !0,
-                "view-only": e.viewOnly,
-                "label-inside": t(g),
-                "hide-arrows": e.hideNumberArrows,
-                "input-type": e.type
+                [e(q)]: !0,
+                "view-only": t.viewOnly,
+                "label-inside": e(I),
+                "hide-arrows": t.hideNumberArrows,
+                "input-type": t.type
               }],
-              step: e.step,
-              onInput: a[0] || (a[0] = //@ts-ignore
-              (...s) => t(I) && t(I)(...s)),
-              onFocus: a[1] || (a[1] = (s) => b.value = !0),
-              onBlur: a[2] || (a[2] = (s) => b.value = !1),
-              onKeyup: a[3] || (a[3] = oe(D(
+              step: t.step,
+              onInput: o[0] || (o[0] = //@ts-ignore
+              (...u) => e(L) && e(L)(...u)),
+              onFocus: o[1] || (o[1] = (u) => k.value = !0),
+              onBlur: o[2] || (o[2] = (u) => k.value = !1),
+              onKeyup: o[3] || (o[3] = ae(D(
                 //@ts-ignore
-                (...s) => t(x) && t(x)(...s),
+                (...u) => e(w) && e(w)(...u),
                 ["prevent"]
               ), ["enter"])),
-              onKeypress: a[4] || (a[4] = //@ts-ignore
-              (...s) => t(L) && t(L)(...s))
+              onKeypress: o[4] || (o[4] = //@ts-ignore
+              (...u) => e(C) && e(C)(...u))
             }), null, 16, ue),
-            e.maxLength && e.maxLengthCounterPosition === "inside" ? (o(), u(R, N(p({ key: 2 }, E.value)), null, 16)) : r("", !0),
-            _.value ? (o(), d("div", {
+            t.maxLength && t.maxLengthCounterPosition === "inside" ? (l(), f(W, H(d({ key: 2 }, e(P))), null, 16)) : n("", !0),
+            e(Z) ? (l(), s("div", {
               key: 3,
               class: "apply-button",
-              onClick: D(G, ["stop", "prevent"])
+              onClick: D(M, ["stop", "prevent"])
             }, [
-              y(t(h), {
+              x(e(h), {
                 name: "check",
                 size: "20px"
               })
-            ])) : r("", !0),
-            e.suffix ? (o(), u(t(S), {
+            ], 8, fe)) : n("", !0),
+            t.suffix ? (l(), f(e(S), {
               key: 4,
               class: "suffix-text",
               variant: "body1"
             }, {
-              default: c(() => [
-                $(z(e.suffix), 1)
+              default: b(() => [
+                N($(t.suffix), 1)
               ]),
               _: 1
-            })) : r("", !0),
-            Y.value ? (o(), d("div", de, [
-              y(t(H), p({
-                disabled: T.value,
-                text: B.value,
-                placement: e.inlineErrorTextPlacement
-              }, t(m)[t(f).TOOLTIP]), {
-                default: c(() => [
-                  y(t(h), {
+            })) : n("", !0),
+            e(X) ? (l(), s("div", ce, [
+              x(e(R), d({
+                disabled: e(T),
+                text: e(E),
+                placement: t.inlineErrorTextPlacement
+              }, e(m)[e(c).TOOLTIP]), {
+                default: b(() => [
+                  x(e(h), {
                     name: "warning-circle",
                     size: "16px"
                   })
                 ]),
                 _: 1
               }, 16, ["disabled", "text", "placement"])
-            ])) : r("", !0),
-            e.type === "password" ? (o(), d("div", p({
+            ])) : n("", !0),
+            t.type === "password" ? (l(), s("div", d({
               key: 6,
               class: "password-visibility-toggle"
-            }, t(m)[t(f).TOGGLE_PASSWORD], {
-              onClick: a[5] || (a[5] = (s) => v.value = !v.value)
+            }, e(m)[e(c).TOGGLE_PASSWORD], {
+              onClick: o[5] || (o[5] = (u) => v.value = !v.value)
             }), [
-              v.value ? (o(), u(t(h), {
+              v.value ? (l(), f(e(h), {
                 key: 0,
                 name: "eye",
                 size: "16px"
-              })) : (o(), u(t(h), {
+              })) : (l(), f(e(h), {
                 key: 1,
                 name: "eye-slash",
                 size: "16px"
               }))
-            ], 16)) : r("", !0),
-            e.$slots.iconAfter ? (o(), d("div", pe, [
-              V(e.$slots, "iconAfter", {}, void 0, !0)
-            ])) : r("", !0)
+            ], 16)) : n("", !0),
+            t.clearable && t.modelValue && !t.loading ? (l(), s("div", d({
+              key: 7,
+              class: "clear-button"
+            }, e(m)[e(c).CLEAR_BUTTON], { onClick: ee }), [
+              x(e(h), {
+                name: "x-circle",
+                size: "16px",
+                type: "fill"
+              })
+            ], 16)) : n("", !0),
+            t.loading ? (l(), s("div", me, [
+              x(e(se), d({
+                "max-width": 16,
+                "stroke-width": 1
+              }, e(m)[e(c).LOADING]), null, 16)
+            ])) : n("", !0),
+            y.$slots.iconAfter ? (l(), s("div", ye, [
+              z(y.$slots, "iconAfter", {}, void 0, !0)
+            ])) : n("", !0)
           ], 2)
         ]),
         _: 3
       }, 16, ["disabled", "text", "placement"]),
-      X.value ? (o(), d("div", {
+      e(Q) ? (l(), s("div", {
         key: 1,
-        class: O(["footer", e.feedbackPositionAbsolute && "footer-absolute"])
+        class: F(["footer", t.feedbackPositionAbsolute && "footer-absolute"])
       }, [
-        e.feedbackText ? (o(), u(re, {
+        t.feedbackText ? (l(), f(ie, {
           key: 0,
-          text: e.feedbackText,
-          variant: C.value,
-          "show-icon": e.showFeedbackTextIcon,
-          "test-id": e.testId
-        }, null, 8, ["text", "variant", "show-icon", "test-id"])) : r("", !0),
-        A.value ? (o(), u(R, N(p({ key: 1 }, E.value)), null, 16)) : r("", !0)
-      ], 2)) : r("", !0)
+          text: t.feedbackText,
+          variant: e(O),
+          "show-icon": t.showFeedbackTextIcon,
+          "test-id": t.testId
+        }, null, 8, ["text", "variant", "show-icon", "test-id"])) : n("", !0),
+        e(A) ? (l(), f(W, H(d({ key: 1 }, e(P))), null, 16)) : n("", !0)
+      ], 2)) : n("", !0)
     ], 16));
   }
 });
 export {
-  Ie as default
+  Pe as default
 };