@ironsource/shared-ui 2.1.12-test.99 → 2.2.0-rc.0

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

@@ -0,0 +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_3b7a3661_lang.css"; //*');
+const p = /* @__PURE__ */ o(e, [["__scopeId", "data-v-3b7a3661"]]);
+export {
+  p as default
+};

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

@@ -0,0 +1,265 @@
+ 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 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 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"], fe = ["onClick"], ce = {
+  key: 5,
+  class: "inline-error"
+}, me = {
+  key: 8,
+  class: "loading-indicator"
+}, ye = {
+  key: 9,
+  class: "icon-container icon-after"
+}, xe = {
+  inheritAttrs: !1
+}, Pe = /* @__PURE__ */ te({
+  ...xe,
+  __name: "TextField",
+  props: {
+    modelValue: { default: "" },
+    placeholder: { default: "" },
+    disabled: { type: Boolean, default: !1 },
+    viewOnly: { type: Boolean, default: !1 },
+    size: { default: "small" },
+    label: { default: "" },
+    labelDirection: { default: "top" },
+    mandatory: { type: Boolean, default: !1 },
+    feedbackVariant: { default: null },
+    feedbackText: { default: "" },
+    feedbackPositionAbsolute: { type: Boolean, default: !1 },
+    showFeedbackTextIcon: { type: Boolean, default: !1 },
+    autoFocus: { type: Boolean, default: !1 },
+    type: { default: "text" },
+    hideNumberArrows: { type: Boolean, default: !1 },
+    step: { default: 1 },
+    hoverHelpText: { default: "" },
+    hoverHelpTextPlacement: { default: "top" },
+    onlyDigits: { type: Boolean, default: !1 },
+    testId: { default: "" },
+    prefix: { default: "" },
+    suffix: { default: "" },
+    maxLength: { default: null },
+    maxLengthCounterPosition: { default: "inside" },
+    showApply: { type: Boolean, default: !1 },
+    inlineError: { type: Boolean, default: !1 },
+    inlineErrorText: { default: "" },
+    inlineErrorTextPlacement: { default: "top" },
+    clearable: { type: Boolean, default: !1 },
+    loading: { type: Boolean, default: !1 }
+  },
+  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: G
+    }), (y, o) => (l(), s("div", d({
+      class: {
+        "input-with-label-container": !0,
+        disabled: t.disabled,
+        [`variant-${e(O)}`]: !0
+      }
+    }, e(m)[e(c).WRAPPER]), [
+      t.label && t.labelDirection !== "inside" ? (l(), f(oe, {
+        key: 0,
+        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": e(I),
+              focused: e(k)
+            })
+          }, [
+            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: b(() => [
+                N($(t.prefix), 1)
+              ]),
+              _: 1
+            })) : n("", !0),
+            V("input", d({
+              ref_key: "inputRef",
+              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", {
+                [e(q)]: !0,
+                "view-only": t.viewOnly,
+                "label-inside": e(I),
+                "hide-arrows": t.hideNumberArrows,
+                "input-type": t.type
+              }],
+              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
+                (...u) => e(w) && e(w)(...u),
+                ["prevent"]
+              ), ["enter"])),
+              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: D(M, ["stop", "prevent"])
+            }, [
+              x(e(h), {
+                name: "check",
+                size: "20px"
+              })
+            ], 8, fe)) : n("", !0),
+            t.suffix ? (l(), f(e(S), {
+              key: 4,
+              class: "suffix-text",
+              variant: "body1"
+            }, {
+              default: b(() => [
+                N($(t.suffix), 1)
+              ]),
+              _: 1
+            })) : 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"])
+            ])) : n("", !0),
+            t.type === "password" ? (l(), s("div", d({
+              key: 6,
+              class: "password-visibility-toggle"
+            }, e(m)[e(c).TOGGLE_PASSWORD], {
+              onClick: o[5] || (o[5] = (u) => v.value = !v.value)
+            }), [
+              v.value ? (l(), f(e(h), {
+                key: 0,
+                name: "eye",
+                size: "16px"
+              })) : (l(), f(e(h), {
+                key: 1,
+                name: "eye-slash",
+                size: "16px"
+              }))
+            ], 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) ? (l(), s("div", {
+        key: 1,
+        class: F(["footer", t.feedbackPositionAbsolute && "footer-absolute"])
+      }, [
+        t.feedbackText ? (l(), f(ie, {
+          key: 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 {
+  Pe as default
+};