@ironsource/shared-ui 2.1.6-rc.40 → 2.1.6-rc.41

package/Alert.vue_vue_type_style_index_0_scoped_5cdc75dd_lang.css

@@ -0,0 +1 @@
+.alert[data-v-5cdc75dd]{padding:var(--spacing-150) var(--spacing-200);display:flex;align-items:center}.alert--rounded[data-v-5cdc75dd]{border-radius:var(--border-radius-lg)}.alert--success[data-v-5cdc75dd]{outline-color:var(--success-main);background-color:var(--success-lighter)}.alert--success .alert-icon[data-v-5cdc75dd]{color:var(--success-main)}.alert--warning[data-v-5cdc75dd]{outline-color:var(--warning-main);background-color:var(--warning-lighter)}.alert--warning .alert-icon[data-v-5cdc75dd]{color:var(--warning-main)}.alert--danger[data-v-5cdc75dd]{outline-color:var(--error-main);background-color:var(--error-lighter)}.alert--danger .alert-icon[data-v-5cdc75dd]{color:var(--error-main)}.alert--info[data-v-5cdc75dd]{outline-color:var(--info-main);background-color:var(--info-lighter)}.alert--info .alert-icon[data-v-5cdc75dd]{color:var(--info-main)}.alert--standard[data-v-5cdc75dd]{outline:none}.alert--outlined[data-v-5cdc75dd]{background-color:var(--common-white);outline-width:1px;outline-offset:-1px;outline-style:solid}.alert-icon--align-top[data-v-5cdc75dd]{align-self:flex-start}.alert-content[data-v-5cdc75dd]{flex:1;margin:0 var(--spacing-150)}.alert-content--no-icon[data-v-5cdc75dd]{margin-left:var(--spacing-100)}.title-container[data-v-5cdc75dd]{display:flex;align-items:center}.alert-title[data-v-5cdc75dd]{color:var(--text-primary);line-height:20px}.alert-description[data-v-5cdc75dd]{color:var(--text-secondary)}.close-button[data-v-5cdc75dd]{margin-left:var(--spacing-100)}

package/components/alert/Alert.vue.d.ts

@@ -5,8 +5,11 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     variant?: "outlined" | "standard";
     dismissible?: boolean;
     actionText?: string;
+    actionVariant?: "contained" | "outlined";
     actionIconName?: string;
+    actionLoading?: boolean;
     rounded?: boolean;
+    hideIcon?: boolean;
     testId?: string;
 }>, {
     title: string;
@@ -16,7 +19,10 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     dismissible: boolean;
     actionText: string;
     actionIconName: any;
+    actionVariant: string;
+    actionLoading: boolean;
     rounded: boolean;
+    hideIcon: boolean;
     testId: string;
 }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     close: () => void;
@@ -28,8 +34,11 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     variant?: "outlined" | "standard";
     dismissible?: boolean;
     actionText?: string;
+    actionVariant?: "contained" | "outlined";
     actionIconName?: string;
+    actionLoading?: boolean;
     rounded?: boolean;
+    hideIcon?: boolean;
     testId?: string;
 }>, {
     title: string;
@@ -39,7 +48,10 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     dismissible: boolean;
     actionText: string;
     actionIconName: any;
+    actionVariant: string;
+    actionLoading: boolean;
     rounded: boolean;
+    hideIcon: boolean;
     testId: string;
 }>>> & {
     onClose?: () => any;
@@ -52,9 +64,13 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     description: string;
     dismissible: boolean;
     actionText: string;
+    actionVariant: "contained" | "outlined";
     actionIconName: string;
+    actionLoading: boolean;
     rounded: boolean;
+    hideIcon: boolean;
 }>, {
+    "after-title"?(_: {}): any;
     default?(_: {}): any;
 }>;
 export default _default;

package/components/alert/Alert.vue.js

@@ -1,7 +1,7 @@
 import o from "./Alert.vue2.js";
 /* empty css            */import e from "../../_virtual/_plugin-vue_export-helper.js";
-// import "../../Alert.vue_vue_type_style_index_0_scoped_a9f0dfcc_lang.css"; //*');
-const s = /* @__PURE__ */ e(o, [["__scopeId", "data-v-a9f0dfcc"]]);
+// import "../../Alert.vue_vue_type_style_index_0_scoped_5cdc75dd_lang.css"; //*');
+const d = /* @__PURE__ */ e(o, [["__scopeId", "data-v-5cdc75dd"]]);
 export {
-  s as default
+  d as default
 };

package/components/alert/Alert.vue2.js

@@ -1,11 +1,11 @@
- import "../../Alert.vue_vue_type_style_index_0_scoped_a9f0dfcc_lang.css"; import { defineComponent as C, computed as N, openBlock as l, createElementBlock as m, mergeProps as a, unref as t, createVNode as f, normalizeClass as g, createElementVNode as v, createBlock as s, withCtx as T, createTextVNode as x, toDisplayString as k, createCommentVNode as c, renderSlot as A } from "vue";
-import y from "../typography/v4/Typography.vue.js";
+ import "../../Alert.vue_vue_type_style_index_0_scoped_5cdc75dd_lang.css"; import { defineComponent as N, computed as x, openBlock as n, createElementBlock as y, mergeProps as l, unref as e, createBlock as s, normalizeClass as I, createCommentVNode as c, createElementVNode as T, withCtx as d, createTextVNode as g, toDisplayString as u, renderSlot as k, createVNode as A } from "vue";
+import B from "../typography/v4/Typography.vue.js";
 import E from "../icon/v4/IconV4.vue.js";
-import S from "../button/v4/ButtonV4.vue.js";
-import $ from "../button/v4/IconButtonV4.vue.js";
-import { useTestIdAttrs as b } from "../../utils/testIds.js";
-import { AlertTestIdModifiers as n } from "../../testids/index.js";
-const p = { class: "alert-content" }, w = { key: 0 }, R = /* @__PURE__ */ C({
+import h from "../button/v4/ButtonV4.vue.js";
+import V from "../button/v4/IconButtonV4.vue.js";
+import { useTestIdAttrs as $ } from "../../utils/testIds.js";
+import { AlertTestIdModifiers as o } from "../../testids/index.js";
+const S = { class: "title-container" }, b = { key: 0 }, U = /* @__PURE__ */ N({
   __name: "Alert",
   props: {
     title: { default: "" },
@@ -14,78 +14,94 @@ const p = { class: "alert-content" }, w = { key: 0 }, R = /* @__PURE__ */ C({
     variant: { default: "standard" },
     dismissible: { type: Boolean, default: !1 },
     actionText: { default: "" },
+    actionVariant: { default: "outlined" },
     actionIconName: { default: null },
+    actionLoading: { type: Boolean, default: !1 },
     rounded: { type: Boolean, default: !0 },
+    hideIcon: { type: Boolean, default: !1 },
     testId: { default: "" }
   },
   emits: ["close", "actionButtonClick"],
-  setup(e, { emit: d }) {
-    const u = e, B = N(() => {
+  setup(t, { emit: m }) {
+    const f = t, v = x(() => {
       const i = {
         success: "check-circle",
         warning: "warning",
         danger: "warning-octagon",
         info: "info"
       };
-      return i[u.color] || i.success;
-    }), o = b(u.testId, n);
-    return (i, r) => (l(), m("div", a({
+      return i[f.color] || i.success;
+    }), a = $(f.testId, o);
+    return (i, r) => (n(), y("div", l({
       class: ["alert", {
-        [`alert--${e.color}`]: !0,
-        [`alert--${e.variant}`]: !0,
-        "alert--rounded": e.rounded
+        [`alert--${t.color}`]: !0,
+        [`alert--${t.variant}`]: !0,
+        "alert--rounded": t.rounded
       }]
-    }, t(o)[t(n).WRAPPER]), [
-      f(t(E), {
-        name: t(B),
-        class: g(["alert-icon", { "alert-icon--align-top": e.title && e.description }]),
+    }, e(a)[e(o).WRAPPER]), [
+      t.hideIcon ? c("", !0) : (n(), s(e(E), {
+        key: 0,
+        name: e(v),
+        class: I(["alert-icon", { "alert-icon--align-top": t.title && t.description }]),
         type: "fill",
         size: "20px"
-      }, null, 8, ["name", "class"]),
-      v("div", p, [
-        e.title ? (l(), s(t(y), a({
-          key: 0,
-          class: "alert-title",
-          variant: "h4"
-        }, t(o)[t(n).TITLE]), {
-          default: T(() => [
-            x(k(e.title), 1)
-          ]),
-          _: 1
-        }, 16)) : c("", !0),
-        f(t(y), a({
+      }, null, 8, ["name", "class"])),
+      T("div", {
+        class: I(["alert-content", {
+          "alert-content--no-icon": t.hideIcon
+        }])
+      }, [
+        T("div", S, [
+          t.title ? (n(), s(e(B), l({
+            key: 0,
+            class: "alert-title",
+            variant: "h4"
+          }, e(a)[e(o).TITLE]), {
+            default: d(() => [
+              g(u(t.title), 1)
+            ]),
+            _: 1
+          }, 16)) : c("", !0),
+          k(i.$slots, "after-title", {}, void 0, !0)
+        ]),
+        A(e(B), l({
           class: "alert-description",
           variant: "body1"
-        }, t(o)[t(n).MESSAGE]), {
-          default: T(() => [
-            A(i.$slots, "default", {}, () => [
-              e.description ? (l(), m("span", w, k(e.description), 1)) : c("", !0)
+        }, e(a)[e(o).MESSAGE]), {
+          default: d(() => [
+            k(i.$slots, "default", {}, () => [
+              t.description ? (n(), y("span", b, u(t.description), 1)) : c("", !0)
             ], !0)
           ]),
           _: 3
         }, 16)
-      ]),
-      e.actionText ? (l(), s(t(S), a({
-        key: 0,
-        variant: "outlined",
-        content: e.actionText,
-        "end-icon-name": e.actionIconName,
-        color: e.color,
-        size: "small"
-      }, t(o)[t(n).ACTION_BUTTON], {
-        onClick: r[0] || (r[0] = (I) => d("actionButtonClick"))
-      }), null, 16, ["content", "end-icon-name", "color"])) : c("", !0),
-      e.dismissible ? (l(), s(t($), a({
+      ], 2),
+      t.actionText ? (n(), s(e(h), l({
         key: 1,
+        variant: t.actionVariant,
+        "end-icon-name": t.actionIconName,
+        color: t.color,
+        size: "small",
+        loading: t.actionLoading
+      }, e(a)[e(o).ACTION_BUTTON], {
+        onClick: r[0] || (r[0] = (C) => m("actionButtonClick"))
+      }), {
+        default: d(() => [
+          g(u(t.actionText), 1)
+        ]),
+        _: 1
+      }, 16, ["variant", "end-icon-name", "color", "loading"])) : c("", !0),
+      t.dismissible ? (n(), s(e(V), l({
+        key: 2,
         class: "close-button",
         "icon-name": "x",
         size: "small"
-      }, t(o)[t(n).CLOSE_BUTTON], {
-        onClick: r[1] || (r[1] = (I) => d("close"))
+      }, e(a)[e(o).CLOSE_BUTTON], {
+        onClick: r[1] || (r[1] = (C) => m("close"))
       }), null, 16)) : c("", !0)
     ], 16));
   }
 });
 export {
-  R as default
+  U as default
 };

package/components/alert/index.d.ts

@@ -11,8 +11,11 @@ declare const AlertTypes: () => ({
             description: string;
             dismissible: boolean;
             actionText: string;
+            actionVariant: "contained" | "outlined";
             actionIconName: string;
+            actionLoading: boolean;
             rounded: boolean;
+            hideIcon: boolean;
         }> & Omit<Readonly<import("vue").ExtractPropTypes<{
             title: {
                 type: import("vue").PropType<string>;
@@ -42,18 +45,30 @@ declare const AlertTypes: () => ({
                 type: import("vue").PropType<string>;
                 default: string;
             };
+            actionVariant: {
+                type: import("vue").PropType<"contained" | "outlined">;
+                default: string;
+            };
             actionIconName: {
                 type: import("vue").PropType<string>;
                 default: any;
             };
+            actionLoading: {
+                type: import("vue").PropType<boolean>;
+                default: boolean;
+            };
             rounded: {
                 type: import("vue").PropType<boolean>;
                 default: boolean;
             };
+            hideIcon: {
+                type: import("vue").PropType<boolean>;
+                default: boolean;
+            };
         }>> & {
             onClose?: () => any;
             onActionButtonClick?: () => any;
-        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "title" | "variant" | "color" | "testId" | "description" | "dismissible" | "actionText" | "actionIconName" | "rounded">;
+        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "title" | "variant" | "color" | "testId" | "description" | "dismissible" | "actionText" | "actionVariant" | "actionIconName" | "actionLoading" | "rounded" | "hideIcon">;
         $attrs: {
             [x: string]: unknown;
         };
@@ -96,14 +111,26 @@ declare const AlertTypes: () => ({
                 type: import("vue").PropType<string>;
                 default: string;
             };
+            actionVariant: {
+                type: import("vue").PropType<"contained" | "outlined">;
+                default: string;
+            };
             actionIconName: {
                 type: import("vue").PropType<string>;
                 default: any;
             };
+            actionLoading: {
+                type: import("vue").PropType<boolean>;
+                default: boolean;
+            };
             rounded: {
                 type: import("vue").PropType<boolean>;
                 default: boolean;
             };
+            hideIcon: {
+                type: import("vue").PropType<boolean>;
+                default: boolean;
+            };
         }>> & {
             onClose?: () => any;
             onActionButtonClick?: () => any;
@@ -118,8 +145,11 @@ declare const AlertTypes: () => ({
             description: string;
             dismissible: boolean;
             actionText: string;
+            actionVariant: "contained" | "outlined";
             actionIconName: string;
+            actionLoading: boolean;
             rounded: boolean;
+            hideIcon: boolean;
         }, {}, string> & {
             beforeCreate?: (() => void) | (() => void)[];
             created?: (() => void) | (() => void)[];
@@ -169,14 +199,26 @@ declare const AlertTypes: () => ({
             type: import("vue").PropType<string>;
             default: string;
         };
+        actionVariant: {
+            type: import("vue").PropType<"contained" | "outlined">;
+            default: string;
+        };
         actionIconName: {
             type: import("vue").PropType<string>;
             default: any;
         };
+        actionLoading: {
+            type: import("vue").PropType<boolean>;
+            default: boolean;
+        };
         rounded: {
             type: import("vue").PropType<boolean>;
             default: boolean;
         };
+        hideIcon: {
+            type: import("vue").PropType<boolean>;
+            default: boolean;
+        };
     }>> & {
         onClose?: () => any;
         onActionButtonClick?: () => any;
@@ -213,14 +255,26 @@ declare const AlertTypes: () => ({
         type: import("vue").PropType<string>;
         default: string;
     };
+    actionVariant: {
+        type: import("vue").PropType<"contained" | "outlined">;
+        default: string;
+    };
     actionIconName: {
         type: import("vue").PropType<string>;
         default: any;
     };
+    actionLoading: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    };
     rounded: {
         type: import("vue").PropType<boolean>;
         default: boolean;
     };
+    hideIcon: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    };
 }>> & {
     onClose?: () => any;
     onActionButtonClick?: () => any;
@@ -235,10 +289,14 @@ declare const AlertTypes: () => ({
     description: string;
     dismissible: boolean;
     actionText: string;
+    actionVariant: "contained" | "outlined";
     actionIconName: string;
+    actionLoading: boolean;
     rounded: boolean;
+    hideIcon: boolean;
 }, {}, string> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
     $slots: {
+        "after-title"?(_: {}): any;
         default?(_: {}): any;
     };
 }))[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ironsource/shared-ui",
-  "version": "2.1.6-rc.40",
+  "version": "2.1.6-rc.41",
   "engines": {
     "npm": ">=7.0.0",
     "node": ">=16.0.0"

package/Alert.vue_vue_type_style_index_0_scoped_a9f0dfcc_lang.css

@@ -1 +0,0 @@
-.alert[data-v-a9f0dfcc]{padding:var(--spacing-150) var(--spacing-200);display:flex;align-items:center}.alert--rounded[data-v-a9f0dfcc]{border-radius:var(--border-radius-lg)}.alert--success[data-v-a9f0dfcc]{outline-color:var(--success-main);background-color:var(--success-lighter)}.alert--success .alert-icon[data-v-a9f0dfcc]{color:var(--success-main)}.alert--warning[data-v-a9f0dfcc]{outline-color:var(--warning-main);background-color:var(--warning-lighter)}.alert--warning .alert-icon[data-v-a9f0dfcc]{color:var(--warning-main)}.alert--danger[data-v-a9f0dfcc]{outline-color:var(--error-main);background-color:var(--error-lighter)}.alert--danger .alert-icon[data-v-a9f0dfcc]{color:var(--error-main)}.alert--info[data-v-a9f0dfcc]{outline-color:var(--info-main);background-color:var(--info-lighter)}.alert--info .alert-icon[data-v-a9f0dfcc]{color:var(--info-main)}.alert--standard[data-v-a9f0dfcc]{outline:none}.alert--outlined[data-v-a9f0dfcc]{background-color:var(--common-white);outline-width:1px;outline-offset:-1px;outline-style:solid}.alert-icon--align-top[data-v-a9f0dfcc]{align-self:flex-start}.alert-content[data-v-a9f0dfcc]{flex:1;margin:0 var(--spacing-150)}.alert-title[data-v-a9f0dfcc]{color:var(--text-primary);line-height:20px}.alert-description[data-v-a9f0dfcc]{color:var(--text-secondary)}.close-button[data-v-a9f0dfcc]{margin-left:var(--spacing-100)}