@ironsource/shared-ui 2.1.12-rc.45 → 2.1.12-rc.46

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

@@ -30,6 +30,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     inlineError?: boolean;
     inlineErrorText?: string;
     inlineErrorTextPlacement?: TooltipPositions;
+    clearable?: boolean;
+    loading?: boolean;
 }>, {
     modelValue: string;
     placeholder: string;
@@ -59,11 +61,14 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     feedbackVariant: any;
     showFeedbackTextIcon: boolean;
     feedbackPositionAbsolute: boolean;
+    clearable: boolean;
+    loading: boolean;
 }>, {
     manualFocus: () => any;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: string | number) => void;
     apply: () => void;
+    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;
@@ -93,6 +98,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     inlineError?: boolean;
     inlineErrorText?: string;
     inlineErrorTextPlacement?: TooltipPositions;
+    clearable?: boolean;
+    loading?: boolean;
 }>, {
     modelValue: string;
     placeholder: string;
@@ -122,8 +129,11 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     feedbackVariant: any;
     showFeedbackTextIcon: boolean;
     feedbackPositionAbsolute: boolean;
+    clearable: boolean;
+    loading: boolean;
 }>>> & {
     "onUpdate:modelValue"?: (value: string | number) => any;
+    onClear?: () => any;
     onApply?: () => any;
 }, {
     type: FieldType;
@@ -132,6 +142,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     disabled: boolean;
     size: FieldSize;
     mandatory: boolean;
+    loading: boolean;
     modelValue: string | number;
     hoverHelpText: string;
     hoverHelpTextPlacement: TooltipPositions;
@@ -154,6 +165,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     feedbackVariant: FeedbackVariant;
     showFeedbackTextIcon: boolean;
     feedbackPositionAbsolute: boolean;
+    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_fce3948c_lang.css"; //*');
-const s = /* @__PURE__ */ o(e, [["__scopeId", "data-v-fce3948c"]]);
+// import "../../../TextField.vue_vue_type_style_index_0_scoped_3b7a3661_lang.css"; //*');
+const p = /* @__PURE__ */ o(e, [["__scopeId", "data-v-3b7a3661"]]);
 export {
-  s as default
+  p as default
 };

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

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

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

@@ -10,6 +10,7 @@ declare const TextFieldTypes: () => ({
             disabled: boolean;
             size: "small" | "medium" | "large";
             mandatory: boolean;
+            loading: boolean;
             modelValue: string | number;
             hoverHelpText: string;
             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";
@@ -32,6 +33,7 @@ declare const TextFieldTypes: () => ({
             feedbackVariant: "success" | "warning" | "error";
             showFeedbackTextIcon: boolean;
             feedbackPositionAbsolute: boolean;
+            clearable: boolean;
         }> & Omit<Readonly<import("vue").ExtractPropTypes<{
             type: {
                 type: import("vue").PropType<"number" | "text" | "password">;
@@ -57,6 +59,10 @@ declare const TextFieldTypes: () => ({
                 type: import("vue").PropType<boolean>;
                 default: boolean;
             };
+            loading: {
+                type: import("vue").PropType<boolean>;
+                default: boolean;
+            };
             modelValue: {
                 type: import("vue").PropType<string | number>;
                 default: string;
@@ -145,10 +151,15 @@ declare const TextFieldTypes: () => ({
                 type: import("vue").PropType<boolean>;
                 default: boolean;
             };
+            clearable: {
+                type: import("vue").PropType<boolean>;
+                default: boolean;
+            };
         }>> & {
             "onUpdate:modelValue"?: (value: string | number) => any;
+            onClear?: () => any;
             onApply?: () => any;
-        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "type" | "label" | "testId" | "disabled" | "size" | "mandatory" | "modelValue" | "hoverHelpText" | "hoverHelpTextPlacement" | "maxLength" | "placeholder" | "viewOnly" | "labelDirection" | "autoFocus" | "hideNumberArrows" | "step" | "onlyDigits" | "prefix" | "suffix" | "maxLengthCounterPosition" | "showApply" | "inlineError" | "inlineErrorText" | "inlineErrorTextPlacement" | "feedbackText" | "feedbackVariant" | "showFeedbackTextIcon" | "feedbackPositionAbsolute">;
+        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "type" | "label" | "testId" | "disabled" | "size" | "mandatory" | "loading" | "modelValue" | "hoverHelpText" | "hoverHelpTextPlacement" | "maxLength" | "placeholder" | "viewOnly" | "labelDirection" | "autoFocus" | "hideNumberArrows" | "step" | "onlyDigits" | "prefix" | "suffix" | "maxLengthCounterPosition" | "showApply" | "inlineError" | "inlineErrorText" | "inlineErrorTextPlacement" | "feedbackText" | "feedbackVariant" | "showFeedbackTextIcon" | "feedbackPositionAbsolute" | "clearable">;
         $attrs: {
             [x: string]: unknown;
         };
@@ -160,7 +171,7 @@ declare const TextFieldTypes: () => ({
         }>;
         $root: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string>, {}>;
         $parent: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string>, {}>;
-        $emit: ((event: "update:modelValue", value: string | number) => void) & ((event: "apply") => void);
+        $emit: ((event: "clear") => void) & ((event: "update:modelValue", value: string | number) => void) & ((event: "apply") => void);
         $el: any;
         $options: import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
             type: {
@@ -187,6 +198,10 @@ declare const TextFieldTypes: () => ({
                 type: import("vue").PropType<boolean>;
                 default: boolean;
             };
+            loading: {
+                type: import("vue").PropType<boolean>;
+                default: boolean;
+            };
             modelValue: {
                 type: import("vue").PropType<string | number>;
                 default: string;
@@ -275,14 +290,20 @@ declare const TextFieldTypes: () => ({
                 type: import("vue").PropType<boolean>;
                 default: boolean;
             };
+            clearable: {
+                type: import("vue").PropType<boolean>;
+                default: boolean;
+            };
         }>> & {
             "onUpdate:modelValue"?: (value: string | number) => any;
+            onClear?: () => any;
             onApply?: () => any;
         }, {
             manualFocus: () => any;
         }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
             "update:modelValue": (value: string | number) => void;
             apply: () => void;
+            clear: () => void;
         }, string, {
             type: "number" | "text" | "password";
             label: string;
@@ -290,6 +311,7 @@ declare const TextFieldTypes: () => ({
             disabled: boolean;
             size: "small" | "medium" | "large";
             mandatory: boolean;
+            loading: boolean;
             modelValue: string | number;
             hoverHelpText: string;
             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";
@@ -312,6 +334,7 @@ declare const TextFieldTypes: () => ({
             feedbackVariant: "success" | "warning" | "error";
             showFeedbackTextIcon: boolean;
             feedbackPositionAbsolute: boolean;
+            clearable: boolean;
         }, {}, string> & {
             beforeCreate?: (() => void) | (() => void)[];
             created?: (() => void) | (() => void)[];
@@ -357,6 +380,10 @@ declare const TextFieldTypes: () => ({
             type: import("vue").PropType<boolean>;
             default: boolean;
         };
+        loading: {
+            type: import("vue").PropType<boolean>;
+            default: boolean;
+        };
         modelValue: {
             type: import("vue").PropType<string | number>;
             default: string;
@@ -445,8 +472,13 @@ declare const TextFieldTypes: () => ({
             type: import("vue").PropType<boolean>;
             default: boolean;
         };
+        clearable: {
+            type: import("vue").PropType<boolean>;
+            default: boolean;
+        };
     }>> & {
         "onUpdate:modelValue"?: (value: string | number) => any;
+        onClear?: () => any;
         onApply?: () => any;
     } & import("vue").ShallowUnwrapRef<{
         manualFocus: () => any;
@@ -479,6 +511,10 @@ declare const TextFieldTypes: () => ({
         type: import("vue").PropType<boolean>;
         default: boolean;
     };
+    loading: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    };
     modelValue: {
         type: import("vue").PropType<string | number>;
         default: string;
@@ -567,14 +603,20 @@ declare const TextFieldTypes: () => ({
         type: import("vue").PropType<boolean>;
         default: boolean;
     };
+    clearable: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    };
 }>> & {
     "onUpdate:modelValue"?: (value: string | number) => any;
+    onClear?: () => any;
     onApply?: () => any;
 }, {
     manualFocus: () => any;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: string | number) => void;
     apply: () => void;
+    clear: () => void;
 }, string, {
     type: "number" | "text" | "password";
     label: string;
@@ -582,6 +624,7 @@ declare const TextFieldTypes: () => ({
     disabled: boolean;
     size: "small" | "medium" | "large";
     mandatory: boolean;
+    loading: boolean;
     modelValue: string | number;
     hoverHelpText: string;
     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";
@@ -604,6 +647,7 @@ declare const TextFieldTypes: () => ({
     feedbackVariant: "success" | "warning" | "error";
     showFeedbackTextIcon: boolean;
     feedbackPositionAbsolute: boolean;
+    clearable: boolean;
 }, {}, string> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
     $slots: {
         iconBefore?(_: {}): any;