@ironsource/shared-ui 2.2.0-rc.1 → 2.2.0-rc.3

package/components/snackbar/v4/SnackbarV4.vue2.js

@@ -1,18 +1,22 @@
- import "../../../SnackbarV4.vue_vue_type_style_index_0_scoped_1b650c39_lang.css"; import { defineComponent as $, computed as A, openBlock as n, createBlock as d, Transition as O, withCtx as f, withDirectives as I, createElementVNode as a, mergeProps as l, unref as t, createVNode as z, createTextVNode as T, toDisplayString as h, createCommentVNode as u, renderSlot as B, vShow as N, createElementBlock as S, Fragment as V, renderList as x, withModifiers as U } from "vue";
-import D from "../../icon/v4/IconV4.vue.js";
+ import "../../../SnackbarV4.vue_vue_type_style_index_0_scoped_35c79635_lang.css"; import { defineComponent as $, computed as O, onMounted as x, nextTick as z, openBlock as s, createBlock as l, Transition as V, withCtx as y, withDirectives as I, createElementVNode as r, mergeProps as c, unref as e, createElementBlock as g, createVNode as U, createTextVNode as b, toDisplayString as B, createCommentVNode as u, renderSlot as N, vShow as S, Fragment as D, renderList as H, withModifiers as q } from "vue";
+import F from "../../icon/v4/IconV4.vue.js";
 import "../../icon/v4/IconFlag.vue.js";
-import H from "../../button/v4/ButtonV4.vue.js";
-import F from "../../button/v4/IconButtonV4.vue.js";
+import G from "../../button/v4/ButtonV4.vue.js";
+import P from "../../button/v4/IconButtonV4.vue.js";
 import "../../button/v4/ButtonGroup.vue.js";
 import "../../button/v4/ToggleButtonGroupAB.vue.js";
-import b from "../../typography/v4/Typography.vue.js";
-import { snackbarCommon as G } from "../common/snackbar.common.js";
-import { useTestIdAttrs as P } from "../../../utils/testIds.js";
+import p from "../../typography/v4/Typography.vue.js";
+import { snackbarCommon as R } from "../common/snackbar.common.js";
+import { useTestIdAttrs as j } from "../../../utils/testIds.js";
 import { SnackbarTestIdModifiers as i } from "../../../testids/index.js";
-const R = ["id"], j = { class: "container" }, q = { class: "texts" }, J = { class: "message" }, K = { class: "action-wrapper" }, Q = {
+import J from "../../loader/v4/Loader.vue.js";
+const K = ["id"], Q = { class: "container" }, W = { class: "texts" }, X = {
+  key: 0,
+  class: "snackbar-icon-loading"
+}, Y = { class: "message" }, Z = { class: "action-wrapper" }, _ = {
   key: 0,
   class: "actions"
-}, W = { class: "close-button-wrapper" }, lt = /* @__PURE__ */ $({
+}, ee = { class: "close-button-wrapper" }, fe = /* @__PURE__ */ $({
   __name: "SnackbarV4",
   props: {
     customClass: null,
@@ -29,18 +33,19 @@ const R = ["id"], j = { class: "container" }, q = { class: "texts" }, J = { clas
     title: { default: "" },
     zIndex: { default: 0 },
     actionButtons: null,
-    testId: { default: "" }
+    testId: { default: "" },
+    isLoading: { type: Boolean, default: !1 }
   },
   emits: ["destroy"],
-  setup(e) {
-    const m = e, {
-      visible: p,
-      horizontalClass: w,
-      positionStyle: L,
-      clearTimer: k,
-      startTimer: C,
-      close: y
-    } = G(m), E = {
+  setup(t, { expose: w }) {
+    const m = t, {
+      visible: L,
+      horizontalClass: A,
+      positionStyle: E,
+      clearTimer: C,
+      startTimer: v,
+      close: f
+    } = R(m), h = {
       info: {
         iconName: "info",
         class: "snackbar-icon-info"
@@ -52,86 +57,102 @@ const R = ["id"], j = { class: "container" }, q = { class: "texts" }, J = { clas
       success: {
         iconName: "check-circle",
         class: "snackbar-icon-success"
+      },
+      loading: {
+        iconName: "circle-notch"
       }
-    }, v = A(() => E[m.type]), r = P(m.testId, i), M = ({ closeOnClick: c, onClick: o }) => () => {
-      c && y(), o && o();
+    }, k = O(() => h[m.type]), d = j(m.testId, i);
+    x(() => {
+      z(() => {
+        document.querySelectorAll(".snackbar-icon-loading circle").forEach((o) => {
+          o.setAttribute("r", "45%");
+        });
+      });
+    });
+    const M = ({ closeOnClick: a, onClick: o }) => () => {
+      a && f(), o && o();
     };
-    return (c, o) => (n(), d(O, {
+    return w({
+      close: f
+    }), (a, o) => (s(), l(V, {
       name: "snackbar",
-      onBeforeLeave: e.onClose,
-      onAfterLeave: o[3] || (o[3] = (s) => c.$emit("destroy"))
+      onBeforeLeave: t.onClose,
+      onAfterLeave: o[3] || (o[3] = (n) => a.$emit("destroy"))
     }, {
-      default: f(() => [
-        I(a("div", l({
-          id: e.id,
-          class: ["snackbar light-theme-v4", [e.customClass, t(w)]],
-          style: t(L),
+      default: y(() => [
+        I(r("div", c({
+          id: t.id,
+          class: ["snackbar light-theme-v4", [t.customClass, e(A)]],
+          style: e(E),
           role: "alert"
-        }, t(r)[t(i).CONTAINER], {
+        }, e(d)[e(i).CONTAINER], {
           onMouseenter: o[0] || (o[0] = //@ts-ignore
-          (...s) => t(k) && t(k)(...s)),
+          (...n) => e(C) && e(C)(...n)),
           onMouseleave: o[1] || (o[1] = //@ts-ignore
-          (...s) => t(C) && t(C)(...s)),
+          (...n) => e(v) && e(v)(...n)),
           onClick: o[2] || (o[2] = //@ts-ignore
-          (...s) => e.onClick && e.onClick(...s))
+          (...n) => t.onClick && t.onClick(...n))
         }), [
-          a("div", j, [
-            a("div", q, [
-              e.title ? (n(), d(t(b), l({
+          r("div", Q, [
+            r("div", W, [
+              t.title ? (s(), l(e(p), c({
                 key: 0,
                 variant: "h4",
                 class: "title"
-              }, t(r)[t(i).TITLE]), {
-                default: f(() => [
-                  z(t(D), l({
-                    name: t(v).iconName,
+              }, e(d)[e(i).TITLE]), {
+                default: y(() => [
+                  e(k) === h.loading ? (s(), g("div", X, [
+                    U(J, { "stroke-width": 1 })
+                  ])) : (s(), l(e(F), c({
+                    key: 1,
+                    name: e(k).iconName,
                     type: "fill",
                     size: "20px",
-                    class: [t(v).class, "icon-container"]
-                  }, t(r)[t(i).ICON]), null, 16, ["name", "class"]),
-                  T(" " + h(e.title), 1)
+                    class: [e(k).class, "icon-container"]
+                  }, e(d)[e(i).ICON]), null, 16, ["name", "class"])),
+                  b(" " + B(t.title), 1)
                 ]),
                 _: 1
               }, 16)) : u("", !0),
-              I(a("div", J, [
-                B(c.$slots, "default", {}, () => [
-                  e.dangerouslyUseHTMLString ? u("", !0) : (n(), d(t(b), l({
+              I(r("div", Y, [
+                N(a.$slots, "default", {}, () => [
+                  t.dangerouslyUseHTMLString ? u("", !0) : (s(), l(e(p), c({
                     key: 0,
                     variant: "body2"
-                  }, t(r)[t(i).MESSAGE]), {
-                    default: f(() => [
-                      T(h(e.message), 1)
+                  }, e(d)[e(i).MESSAGE]), {
+                    default: y(() => [
+                      b(B(t.message), 1)
                     ]),
                     _: 1
                   }, 16))
                 ], !0)
               ], 512), [
-                [N, e.message]
+                [S, t.message]
               ]),
-              a("div", K, [
-                B(c.$slots, "actions", {}, () => [
-                  e.actionButtons ? (n(), S("div", Q, [
-                    (n(!0), S(V, null, x(e.actionButtons, (s, g) => (n(), d(t(H), l({
-                      key: g,
-                      "data-testid": e.testId ? `${e.testId}-${t(i).ACTION_BUTTON}-${g}` : "",
+              r("div", Z, [
+                N(a.$slots, "actions", {}, () => [
+                  t.actionButtons ? (s(), g("div", _, [
+                    (s(!0), g(D, null, H(t.actionButtons, (n, T) => (s(), l(e(G), c({
+                      key: T,
+                      "data-testid": t.testId ? `${t.testId}-${e(i).ACTION_BUTTON}-${T}` : "",
                       size: "small"
-                    }, { ...s, onClick: M(s) }), null, 16, ["data-testid"]))), 128))
+                    }, { ...n, onClick: M(n) }), null, 16, ["data-testid"]))), 128))
                   ])) : u("", !0)
                 ], !0)
               ])
             ]),
-            a("div", W, [
-              e.showClose ? (n(), d(t(F), l({
+            r("div", ee, [
+              t.showClose ? (s(), l(e(P), c({
                 key: 0,
                 "icon-name": "x",
                 size: "small"
-              }, t(r)[t(i).CLOSE], {
-                onClick: U(t(y), ["stop"])
+              }, e(d)[e(i).CLOSE], {
+                onClick: q(e(f), ["stop"])
               }), null, 16, ["onClick"])) : u("", !0)
             ])
           ])
-        ], 16, R), [
-          [N, t(p)]
+        ], 16, K), [
+          [S, e(L)]
         ])
       ]),
       _: 3
@@ -139,5 +160,5 @@ const R = ["id"], j = { class: "container" }, q = { class: "texts" }, J = { clas
   }
 });
 export {
-  lt as default
+  fe as default
 };

package/components/table-cells/v3/Editable.vue.d.ts

@@ -24,9 +24,9 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     validateFunction: () => false;
 }>>>, {
     cell: string;
+    isLoading: boolean;
     isEditing: boolean;
     validateFunction: (value: unknown) => string | boolean;
-    isLoading: boolean;
 }>, {
     input?(_: {}): any;
     content?(_: {}): any;

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

@@ -4,14 +4,18 @@ declare const EditableTypes: () => (import("vue").InjectionKey<import("../common
         $data: {};
         $props: Partial<{
             cell: string;
+            isLoading: boolean;
             isEditing: boolean;
             validateFunction: (value: unknown) => string | boolean;
-            isLoading: boolean;
         }> & Omit<Readonly<import("vue").ExtractPropTypes<{
             cell: {
                 type: import("vue").PropType<string>;
                 default: string;
             };
+            isLoading: {
+                type: import("vue").PropType<boolean>;
+                default: boolean;
+            };
             isEditing: {
                 type: import("vue").PropType<boolean>;
                 default: boolean;
@@ -20,10 +24,6 @@ declare const EditableTypes: () => (import("vue").InjectionKey<import("../common
                 type: import("vue").PropType<(value: unknown) => string | boolean>;
                 default: () => false;
             };
-            isLoading: {
-                type: import("vue").PropType<boolean>;
-                default: boolean;
-            };
             rowIndex: {
                 type: import("vue").PropType<number>;
                 required: true;
@@ -32,7 +32,7 @@ declare const EditableTypes: () => (import("vue").InjectionKey<import("../common
                 type: import("vue").PropType<number>;
                 required: true;
             };
-        }>> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "cell" | "isEditing" | "validateFunction" | "isLoading">;
+        }>> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "cell" | "isLoading" | "isEditing" | "validateFunction">;
         $attrs: {
             [x: string]: unknown;
         };
@@ -51,6 +51,10 @@ declare const EditableTypes: () => (import("vue").InjectionKey<import("../common
                 type: import("vue").PropType<string>;
                 default: string;
             };
+            isLoading: {
+                type: import("vue").PropType<boolean>;
+                default: boolean;
+            };
             isEditing: {
                 type: import("vue").PropType<boolean>;
                 default: boolean;
@@ -59,10 +63,6 @@ declare const EditableTypes: () => (import("vue").InjectionKey<import("../common
                 type: import("vue").PropType<(value: unknown) => string | boolean>;
                 default: () => false;
             };
-            isLoading: {
-                type: import("vue").PropType<boolean>;
-                default: boolean;
-            };
             rowIndex: {
                 type: import("vue").PropType<number>;
                 required: true;
@@ -73,9 +73,9 @@ declare const EditableTypes: () => (import("vue").InjectionKey<import("../common
             };
         }>>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {
             cell: string;
+            isLoading: boolean;
             isEditing: boolean;
             validateFunction: (value: unknown) => string | boolean;
-            isLoading: boolean;
         }, {}, string> & {
             beforeCreate?: (() => void) | (() => void)[];
             created?: (() => void) | (() => void)[];
@@ -101,6 +101,10 @@ declare const EditableTypes: () => (import("vue").InjectionKey<import("../common
             type: import("vue").PropType<string>;
             default: string;
         };
+        isLoading: {
+            type: import("vue").PropType<boolean>;
+            default: boolean;
+        };
         isEditing: {
             type: import("vue").PropType<boolean>;
             default: boolean;
@@ -109,10 +113,6 @@ declare const EditableTypes: () => (import("vue").InjectionKey<import("../common
             type: import("vue").PropType<(value: unknown) => string | boolean>;
             default: () => false;
         };
-        isLoading: {
-            type: import("vue").PropType<boolean>;
-            default: boolean;
-        };
         rowIndex: {
             type: import("vue").PropType<number>;
             required: true;
@@ -130,6 +130,10 @@ declare const EditableTypes: () => (import("vue").InjectionKey<import("../common
         type: import("vue").PropType<string>;
         default: string;
     };
+    isLoading: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    };
     isEditing: {
         type: import("vue").PropType<boolean>;
         default: boolean;
@@ -138,10 +142,6 @@ declare const EditableTypes: () => (import("vue").InjectionKey<import("../common
         type: import("vue").PropType<(value: unknown) => string | boolean>;
         default: () => false;
     };
-    isLoading: {
-        type: import("vue").PropType<boolean>;
-        default: boolean;
-    };
     rowIndex: {
         type: import("vue").PropType<number>;
         required: true;
@@ -152,9 +152,9 @@ declare const EditableTypes: () => (import("vue").InjectionKey<import("../common
     };
 }>>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {
     cell: string;
+    isLoading: boolean;
     isEditing: boolean;
     validateFunction: (value: unknown) => string | boolean;
-    isLoading: boolean;
 }, {}, string> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
     $slots: {
         input?(_: {}): any;

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

@@ -37,10 +37,10 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
 }>>>, {
     type: "input" | "dropdown";
     cell: string;
+    isLoading: boolean;
     withIcons: boolean;
     saveOnClickOutside: boolean;
     validateFunction: (value: unknown) => string | boolean;
-    isLoading: boolean;
     displayValue: (option: unknown) => unknown;
 }>, {
     input?(_: {}): any;

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

@@ -6,10 +6,10 @@ declare const EditableTypes: () => ({
         $props: Partial<{
             type: "input" | "dropdown";
             cell: string;
+            isLoading: boolean;
             withIcons: boolean;
             saveOnClickOutside: boolean;
             validateFunction: (value: unknown) => string | boolean;
-            isLoading: boolean;
             displayValue: (option: unknown) => unknown;
         }> & Omit<Readonly<import("vue").ExtractPropTypes<{
             type: {
@@ -21,6 +21,10 @@ declare const EditableTypes: () => ({
                 type: import("vue").PropType<string>;
                 default: string;
             };
+            isLoading: {
+                type: import("vue").PropType<boolean>;
+                default: boolean;
+            };
             withIcons: {
                 type: import("vue").PropType<boolean>;
                 default: boolean;
@@ -33,10 +37,6 @@ declare const EditableTypes: () => ({
                 type: import("vue").PropType<(value: unknown) => string | boolean>;
                 default: () => false;
             };
-            isLoading: {
-                type: import("vue").PropType<boolean>;
-                default: boolean;
-            };
             rowIndex: {
                 type: import("vue").PropType<number>;
                 required: true;
@@ -49,7 +49,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" | "withIcons" | "saveOnClickOutside" | "validateFunction" | "isLoading" | "displayValue">;
+        }>> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "type" | "cell" | "isLoading" | "withIcons" | "saveOnClickOutside" | "validateFunction" | "displayValue">;
         $attrs: {
             [x: string]: unknown;
         };
@@ -73,6 +73,10 @@ declare const EditableTypes: () => ({
                 type: import("vue").PropType<string>;
                 default: string;
             };
+            isLoading: {
+                type: import("vue").PropType<boolean>;
+                default: boolean;
+            };
             withIcons: {
                 type: import("vue").PropType<boolean>;
                 default: boolean;
@@ -85,10 +89,6 @@ declare const EditableTypes: () => ({
                 type: import("vue").PropType<(value: unknown) => string | boolean>;
                 default: () => false;
             };
-            isLoading: {
-                type: import("vue").PropType<boolean>;
-                default: boolean;
-            };
             rowIndex: {
                 type: import("vue").PropType<number>;
                 required: true;
@@ -104,10 +104,10 @@ declare const EditableTypes: () => ({
         }>>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {
             type: "input" | "dropdown";
             cell: string;
+            isLoading: boolean;
             withIcons: boolean;
             saveOnClickOutside: boolean;
             validateFunction: (value: unknown) => string | boolean;
-            isLoading: boolean;
             displayValue: (option: unknown) => unknown;
         }, {}, string> & {
             beforeCreate?: (() => void) | (() => void)[];
@@ -139,6 +139,10 @@ declare const EditableTypes: () => ({
             type: import("vue").PropType<string>;
             default: string;
         };
+        isLoading: {
+            type: import("vue").PropType<boolean>;
+            default: boolean;
+        };
         withIcons: {
             type: import("vue").PropType<boolean>;
             default: boolean;
@@ -151,10 +155,6 @@ declare const EditableTypes: () => ({
             type: import("vue").PropType<(value: unknown) => string | boolean>;
             default: () => false;
         };
-        isLoading: {
-            type: import("vue").PropType<boolean>;
-            default: boolean;
-        };
         rowIndex: {
             type: import("vue").PropType<number>;
             required: true;
@@ -181,6 +181,10 @@ declare const EditableTypes: () => ({
         type: import("vue").PropType<string>;
         default: string;
     };
+    isLoading: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    };
     withIcons: {
         type: import("vue").PropType<boolean>;
         default: boolean;
@@ -193,10 +197,6 @@ declare const EditableTypes: () => ({
         type: import("vue").PropType<(value: unknown) => string | boolean>;
         default: () => false;
     };
-    isLoading: {
-        type: import("vue").PropType<boolean>;
-        default: boolean;
-    };
     rowIndex: {
         type: import("vue").PropType<number>;
         required: true;
@@ -212,10 +212,10 @@ declare const EditableTypes: () => ({
 }>>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {
     type: "input" | "dropdown";
     cell: string;
+    isLoading: boolean;
     withIcons: boolean;
     saveOnClickOutside: boolean;
     validateFunction: (value: unknown) => string | boolean;
-    isLoading: boolean;
     displayValue: (option: unknown) => unknown;
 }, {}, string> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
     $slots: {