@ironsource/shared-ui 2.1.7-rc.5 → 2.1.7-rc.6

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

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

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

@@ -23,6 +23,7 @@ declare const TextFieldTypes: () => ({
             onlyDigits: boolean;
             prefix: string;
             suffix: string;
+            maxLengthCounterPosition: "inside" | "outside";
             showApply: boolean;
             inlineError: boolean;
             inlineErrorText: string;
@@ -108,6 +109,10 @@ declare const TextFieldTypes: () => ({
                 type: import("vue").PropType<string>;
                 default: string;
             };
+            maxLengthCounterPosition: {
+                type: import("vue").PropType<"inside" | "outside">;
+                default: string;
+            };
             showApply: {
                 type: import("vue").PropType<boolean>;
                 default: boolean;
@@ -143,7 +148,7 @@ declare const TextFieldTypes: () => ({
         }>> & {
             "onUpdate:modelValue"?: (value: string | number) => any;
             onApply?: () => any;
-        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "type" | "label" | "disabled" | "size" | "mandatory" | "testId" | "hoverHelpText" | "hoverHelpTextPlacement" | "maxLength" | "modelValue" | "placeholder" | "viewOnly" | "labelDirection" | "autoFocus" | "hideNumberArrows" | "step" | "onlyDigits" | "prefix" | "suffix" | "showApply" | "inlineError" | "inlineErrorText" | "inlineErrorTextPlacement" | "feedbackText" | "feedbackVariant" | "showFeedbackTextIcon" | "feedbackPositionAbsolute">;
+        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "type" | "label" | "disabled" | "size" | "mandatory" | "testId" | "hoverHelpText" | "hoverHelpTextPlacement" | "maxLength" | "modelValue" | "placeholder" | "viewOnly" | "labelDirection" | "autoFocus" | "hideNumberArrows" | "step" | "onlyDigits" | "prefix" | "suffix" | "maxLengthCounterPosition" | "showApply" | "inlineError" | "inlineErrorText" | "inlineErrorTextPlacement" | "feedbackText" | "feedbackVariant" | "showFeedbackTextIcon" | "feedbackPositionAbsolute">;
         $attrs: {
             [x: string]: unknown;
         };
@@ -234,6 +239,10 @@ declare const TextFieldTypes: () => ({
                 type: import("vue").PropType<string>;
                 default: string;
             };
+            maxLengthCounterPosition: {
+                type: import("vue").PropType<"inside" | "outside">;
+                default: string;
+            };
             showApply: {
                 type: import("vue").PropType<boolean>;
                 default: boolean;
@@ -294,6 +303,7 @@ declare const TextFieldTypes: () => ({
             onlyDigits: boolean;
             prefix: string;
             suffix: string;
+            maxLengthCounterPosition: "inside" | "outside";
             showApply: boolean;
             inlineError: boolean;
             inlineErrorText: string;
@@ -399,6 +409,10 @@ declare const TextFieldTypes: () => ({
             type: import("vue").PropType<string>;
             default: string;
         };
+        maxLengthCounterPosition: {
+            type: import("vue").PropType<"inside" | "outside">;
+            default: string;
+        };
         showApply: {
             type: import("vue").PropType<boolean>;
             default: boolean;
@@ -517,6 +531,10 @@ declare const TextFieldTypes: () => ({
         type: import("vue").PropType<string>;
         default: string;
     };
+    maxLengthCounterPosition: {
+        type: import("vue").PropType<"inside" | "outside">;
+        default: string;
+    };
     showApply: {
         type: import("vue").PropType<boolean>;
         default: boolean;
@@ -577,6 +595,7 @@ declare const TextFieldTypes: () => ({
     onlyDigits: boolean;
     prefix: string;
     suffix: string;
+    maxLengthCounterPosition: "inside" | "outside";
     showApply: boolean;
     inlineError: boolean;
     inlineErrorText: string;

package/components/popover/common/Popover.common.d.ts

@@ -0,0 +1,6 @@
+export declare const popoverCommon: () => {
+    popup: import("vue").Ref<HTMLDivElement>;
+    open: import("vue").Ref<boolean>;
+    toggle: (value?: boolean) => boolean;
+    triggerRef: import("vue").Ref<HTMLDivElement>;
+};

package/components/popover/common/Popover.common.js

@@ -0,0 +1,17 @@
+import { useToggle as p, onClickOutside as g } from "@vueuse/core";
+import { ref as n } from "vue";
+const f = () => {
+  const [o, e] = p(!1), r = n(), t = n();
+  return g(
+    r,
+    () => {
+      o.value && e();
+    },
+    {
+      ignore: [t]
+    }
+  ), { popup: r, open: o, toggle: e, triggerRef: t };
+};
+export {
+  f as popoverCommon
+};

package/components/popover/v3/Popover.vue.js

@@ -0,0 +1,8 @@
+import o from "./Popover.vue2.js";
+/* empty css              *//* empty css              */import e from "../../../_virtual/_plugin-vue_export-helper.js";
+// import "../../../Popover.vue_vue_type_style_index_0_scoped_c607b770_lang.css"; //*');
+// import "../../../Popover.vue_vue_type_style_index_1_lang.css";  //');
+const r = /* @__PURE__ */ e(o, [["__scopeId", "data-v-c607b770"]]);
+export {
+  r as default
+};

package/components/popover/{Popover.vue2.js → v3/Popover.vue2.js}

@@ -1,4 +1,4 @@
- import "../../Popover.vue_vue_type_style_index_0_scoped_25eb53db_lang.css";  import "../../Popover.vue_vue_type_style_index_1_lang.css";  import { defineComponent as n, openBlock as i, createBlock as r, unref as l, withCtx as a, renderSlot as d } from "vue";
+ import "../../../Popover.vue_vue_type_style_index_0_scoped_c607b770_lang.css";  import "../../../Popover.vue_vue_type_style_index_1_lang.css";  import { defineComponent as n, openBlock as i, createBlock as r, unref as l, withCtx as a, renderSlot as d } from "vue";
 import { Dropdown as s } from "floating-vue";
 const f = /* @__PURE__ */ n({
   __name: "Popover",

package/components/popover/v4/PopoverV4.vue.d.ts

@@ -0,0 +1,73 @@
+import { Placement } from 'floating-vue';
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    autoHide?: boolean;
+    trigger?: "touch" | "click" | "focus" | "hover" | "managed";
+    disabled?: boolean;
+    placement?: Placement;
+    distance?: number;
+    skidding?: number;
+    testId?: string;
+    popperClass?: string;
+}>, {
+    trigger: string;
+    autoHide: boolean;
+    disabled: boolean;
+    placement: string;
+    distance: number;
+    skidding: number;
+    testId: string;
+    popperClass: string;
+}>, {}, 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<{
+    autoHide?: boolean;
+    trigger?: "touch" | "click" | "focus" | "hover" | "managed";
+    disabled?: boolean;
+    placement?: Placement;
+    distance?: number;
+    skidding?: number;
+    testId?: string;
+    popperClass?: string;
+}>, {
+    trigger: string;
+    autoHide: boolean;
+    disabled: boolean;
+    placement: string;
+    distance: number;
+    skidding: number;
+    testId: string;
+    popperClass: string;
+}>>>, {
+    disabled: boolean;
+    testId: string;
+    placement: Placement;
+    distance: number;
+    popperClass: string;
+    autoHide: boolean;
+    skidding: number;
+    trigger: "touch" | "click" | "focus" | "hover" | "managed";
+}>, {
+    trigger?(_: {}): any;
+    content?(_: {}): any;
+}>;
+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];
+} & {};
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/components/popover/v4/PopoverV4.vue.js

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

package/components/popover/v4/PopoverV4.vue2.js

@@ -0,0 +1,54 @@
+ import "../../../PopoverV4.vue_vue_type_style_index_0_scoped_c54cd089_lang.css"; import { defineComponent as u, openBlock as d, createBlock as m, unref as t, withCtx as i, createElementBlock as f, renderSlot as n, createCommentVNode as g, createElementVNode as c } from "vue";
+import { Dropdown as k } from "floating-vue";
+import { popoverCommon as v } from "../common/Popover.common.js";
+const w = /* @__PURE__ */ u({
+  __name: "PopoverV4",
+  props: {
+    autoHide: { type: Boolean, default: !1 },
+    trigger: { default: "click" },
+    disabled: { type: Boolean, default: !1 },
+    placement: { default: "bottom-start" },
+    distance: { default: 0 },
+    skidding: { default: 0 },
+    testId: { default: "" },
+    popperClass: { default: "" }
+  },
+  setup(e) {
+    const { popup: p, open: o, toggle: l, triggerRef: s } = v();
+    return (r, a) => (d(), m(t(k), {
+      theme: "custom-popover",
+      placement: e.placement,
+      shown: !!t(o),
+      triggers: e.trigger === "managed" ? [] : [e.trigger],
+      "auto-hide": e.autoHide,
+      distance: e.distance,
+      skidding: e.skidding,
+      "data-testid": e.testId,
+      "popper-class": [e.popperClass, "v4-popover__popper light-theme-v4"]
+    }, {
+      popper: i(() => [
+        t(o) ? (d(), f("div", {
+          key: 0,
+          ref_key: "popup",
+          ref: p,
+          class: "menu-popup"
+        }, [
+          n(r.$slots, "content", {}, void 0, !0)
+        ], 512)) : g("", !0)
+      ]),
+      default: i(() => [
+        c("div", {
+          ref_key: "triggerRef",
+          ref: s,
+          onClick: a[0] || (a[0] = (h) => t(l)(!t(o)))
+        }, [
+          n(r.$slots, "trigger", {}, void 0, !0)
+        ], 512)
+      ]),
+      _: 3
+    }, 8, ["placement", "shown", "triggers", "auto-hide", "distance", "skidding", "data-testid", "popper-class"]));
+  }
+});
+export {
+  w as default
+};