@ironsource/shared-ui 2.1.6-rc.25 → 2.1.6-rc.28

package/Alert.vue_vue_type_style_index_0_scoped_a9f0dfcc_lang.css

@@ -0,0 +1 @@
+.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)}

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

@@ -5,6 +5,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     variant?: "outlined" | "standard";
     dismissible?: boolean;
     actionText?: string;
+    actionIconName?: string;
     rounded?: boolean;
     testId?: string;
 }>, {
@@ -14,10 +15,12 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     color: string;
     dismissible: boolean;
     actionText: string;
+    actionIconName: any;
     rounded: boolean;
     testId: string;
 }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     close: () => void;
+    actionButtonClick: () => void;
 }, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     title?: string;
     description?: string;
@@ -25,6 +28,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     variant?: "outlined" | "standard";
     dismissible?: boolean;
     actionText?: string;
+    actionIconName?: string;
     rounded?: boolean;
     testId?: string;
 }>, {
@@ -34,10 +38,12 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     color: string;
     dismissible: boolean;
     actionText: string;
+    actionIconName: any;
     rounded: boolean;
     testId: string;
 }>>> & {
     onClose?: () => any;
+    onActionButtonClick?: () => any;
 }, {
     title: string;
     variant: "outlined" | "standard";
@@ -46,6 +52,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     description: string;
     dismissible: boolean;
     actionText: string;
+    actionIconName: string;
     rounded: boolean;
 }>, {
     default?(_: {}): any;

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_d6680a72_lang.css"; //*');
-const p = /* @__PURE__ */ e(o, [["__scopeId", "data-v-d6680a72"]]);
+// import "../../Alert.vue_vue_type_style_index_0_scoped_a9f0dfcc_lang.css"; //*');
+const s = /* @__PURE__ */ e(o, [["__scopeId", "data-v-a9f0dfcc"]]);
 export {
-  p as default
+  s as default
 };

package/components/alert/Alert.vue2.js

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

package/components/alert/index.d.ts

@@ -11,6 +11,7 @@ declare const AlertTypes: () => ({
             description: string;
             dismissible: boolean;
             actionText: string;
+            actionIconName: string;
             rounded: boolean;
         }> & Omit<Readonly<import("vue").ExtractPropTypes<{
             title: {
@@ -41,13 +42,18 @@ declare const AlertTypes: () => ({
                 type: import("vue").PropType<string>;
                 default: string;
             };
+            actionIconName: {
+                type: import("vue").PropType<string>;
+                default: any;
+            };
             rounded: {
                 type: import("vue").PropType<boolean>;
                 default: boolean;
             };
         }>> & {
             onClose?: () => any;
-        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "title" | "variant" | "color" | "testId" | "description" | "dismissible" | "actionText" | "rounded">;
+            onActionButtonClick?: () => any;
+        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "title" | "variant" | "color" | "testId" | "description" | "dismissible" | "actionText" | "actionIconName" | "rounded">;
         $attrs: {
             [x: string]: unknown;
         };
@@ -59,7 +65,7 @@ declare const AlertTypes: () => ({
         }>;
         $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: "close") => void;
+        $emit: ((event: "close") => void) & ((event: "actionButtonClick") => void);
         $el: any;
         $options: import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
             title: {
@@ -90,14 +96,20 @@ declare const AlertTypes: () => ({
                 type: import("vue").PropType<string>;
                 default: string;
             };
+            actionIconName: {
+                type: import("vue").PropType<string>;
+                default: any;
+            };
             rounded: {
                 type: import("vue").PropType<boolean>;
                 default: boolean;
             };
         }>> & {
             onClose?: () => any;
+            onActionButtonClick?: () => any;
         }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
             close: () => void;
+            actionButtonClick: () => void;
         }, string, {
             title: string;
             variant: "outlined" | "standard";
@@ -106,6 +118,7 @@ declare const AlertTypes: () => ({
             description: string;
             dismissible: boolean;
             actionText: string;
+            actionIconName: string;
             rounded: boolean;
         }, {}, string> & {
             beforeCreate?: (() => void) | (() => void)[];
@@ -156,12 +169,17 @@ declare const AlertTypes: () => ({
             type: import("vue").PropType<string>;
             default: string;
         };
+        actionIconName: {
+            type: import("vue").PropType<string>;
+            default: any;
+        };
         rounded: {
             type: import("vue").PropType<boolean>;
             default: boolean;
         };
     }>> & {
         onClose?: () => any;
+        onActionButtonClick?: () => any;
     } & import("vue").ShallowUnwrapRef<{}> & {} & import("vue").ComponentCustomProperties & {};
     __isFragment?: never;
     __isTeleport?: never;
@@ -195,14 +213,20 @@ declare const AlertTypes: () => ({
         type: import("vue").PropType<string>;
         default: string;
     };
+    actionIconName: {
+        type: import("vue").PropType<string>;
+        default: any;
+    };
     rounded: {
         type: import("vue").PropType<boolean>;
         default: boolean;
     };
 }>> & {
     onClose?: () => any;
+    onActionButtonClick?: () => any;
 }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     close: () => void;
+    actionButtonClick: () => void;
 }, string, {
     title: string;
     variant: "outlined" | "standard";
@@ -211,6 +235,7 @@ declare const AlertTypes: () => ({
     description: string;
     dismissible: boolean;
     actionText: string;
+    actionIconName: string;
     rounded: boolean;
 }, {}, string> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
     $slots: {

package/package.json

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

package/Alert.vue_vue_type_style_index_0_scoped_d6680a72_lang.css

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