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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (13) hide show
  1. package/Alert.vue_vue_type_style_index_0_scoped_06e0871a_lang.css +1 -0
  2. package/{FormCard.vue_vue_type_style_index_0_scoped_52ade67c_lang.css → FormCard.vue_vue_type_style_index_0_scoped_c7965a69_lang.css} +1 -1
  3. package/README.md +35 -0
  4. package/components/alert/Alert.vue.d.ts +5 -0
  5. package/components/alert/Alert.vue.js +5 -5
  6. package/components/alert/Alert.vue2.js +25 -24
  7. package/components/alert/index.d.ts +20 -1
  8. package/components/forms/FormCard.vue.d.ts +5 -0
  9. package/components/forms/FormCard.vue.js +3 -3
  10. package/components/forms/FormCard.vue2.js +23 -22
  11. package/components/forms/index.d.ts +20 -1
  12. package/package.json +1 -1
  13. package/Alert.vue_vue_type_style_index_0_scoped_5cdc75dd_lang.css +0 -1
package/Alert.vue_vue_type_style_index_0_scoped_06e0871a_lang.css ADDED
@@ -0,0 +1 @@
1
+ .alert[data-v-06e0871a]{padding:var(--spacing-150) var(--spacing-200);display:flex;align-items:center}.alert--rounded[data-v-06e0871a]{border-radius:var(--border-radius-lg)}.alert--success[data-v-06e0871a]{outline-color:var(--success-main);background-color:var(--success-lighter)}.alert--success .alert-icon[data-v-06e0871a]{color:var(--success-main)}.alert--warning[data-v-06e0871a]{outline-color:var(--warning-main);background-color:var(--warning-lighter)}.alert--warning .alert-icon[data-v-06e0871a]{color:var(--warning-main)}.alert--danger[data-v-06e0871a]{outline-color:var(--error-main);background-color:var(--error-lighter)}.alert--danger .alert-icon[data-v-06e0871a]{color:var(--error-main)}.alert--info[data-v-06e0871a]{outline-color:var(--info-main);background-color:var(--info-lighter)}.alert--info .alert-icon[data-v-06e0871a]{color:var(--info-main)}.alert--standard[data-v-06e0871a]{outline:none}.alert--outlined[data-v-06e0871a]{background-color:var(--common-white);outline-width:1px;outline-offset:-1px;outline-style:solid}.alert-icon--align-top[data-v-06e0871a]{align-self:flex-start}.alert-content[data-v-06e0871a]{flex:1;margin:0 var(--spacing-150)}.alert-content--no-icon[data-v-06e0871a]{margin-left:var(--spacing-100)}.title-container[data-v-06e0871a]{display:flex;align-items:center}.alert-title[data-v-06e0871a]{color:var(--text-primary);line-height:20px}.alert-description[data-v-06e0871a]{color:var(--text-secondary)}.close-button[data-v-06e0871a]{margin-left:var(--spacing-100)}
package/{FormCard.vue_vue_type_style_index_0_scoped_52ade67c_lang.css → FormCard.vue_vue_type_style_index_0_scoped_c7965a69_lang.css} RENAMED
@@ -1 +1 @@
1
- .form-card[data-v-52ade67c]{border-radius:var(--border-radius-sm);border:1px solid var(--common-divider);background:var(--background-paper)}.card-header[data-v-52ade67c]{display:flex;flex-direction:row;align-items:center;min-height:var(--spacing-600);border-radius:calc(var(--border-radius-sm) - 1px) calc(var(--border-radius-sm) - 1px) 0 0;color:var(--text-primary);background:var(--background-paper-elevation-0);padding:0 var(--spacing-300);border-bottom:1px solid var(--common-divider)}.card-header .skeleton-header[data-v-52ade67c]{width:220px;height:20px}.card-content[data-v-52ade67c]{padding:var(--spacing-400) var(--spacing-500) var(--spacing-500) var(--spacing-500)}.card-content--no-padding[data-v-52ade67c]{padding:0}.form-actions[data-v-52ade67c]{display:flex;flex-direction:row;justify-content:flex-end;align-items:center;min-height:var(--spacing-700)}.form-action[data-v-52ade67c]{margin-left:var(--spacing-100)}.content-skeleton-container[data-v-52ade67c]{display:flex;flex-direction:column}.content-skeleton-container .skeleton-long[data-v-52ade67c]{margin-bottom:24px;width:100%;max-width:896px;height:16px}.content-skeleton-container .skeleton-short[data-v-52ade67c]{margin-bottom:24px;width:100%;max-width:436px;height:16px}
1
+ .form-card[data-v-c7965a69]{border-radius:var(--border-radius-sm);border:1px solid var(--common-divider);background:var(--background-paper)}.card-header[data-v-c7965a69]{display:flex;flex-direction:row;align-items:center;min-height:var(--spacing-600);border-radius:calc(var(--border-radius-sm) - 1px) calc(var(--border-radius-sm) - 1px) 0 0;color:var(--text-primary);background:var(--background-paper-elevation-0);padding:0 var(--spacing-300);border-bottom:1px solid var(--common-divider)}.card-header .skeleton-header[data-v-c7965a69]{width:220px;height:20px}.card-content[data-v-c7965a69]{padding:var(--spacing-400) var(--spacing-500) var(--spacing-500) var(--spacing-500)}.card-content--no-padding[data-v-c7965a69]{padding:0}.form-actions[data-v-c7965a69]{display:flex;flex-direction:row;justify-content:flex-end;align-items:center;min-height:var(--spacing-700)}.form-action[data-v-c7965a69]{margin-left:var(--spacing-100)}.content-skeleton-container[data-v-c7965a69]{display:flex;flex-direction:column}.content-skeleton-container .skeleton-long[data-v-c7965a69]{margin-bottom:24px;width:100%;max-width:896px;height:16px}.content-skeleton-container .skeleton-short[data-v-c7965a69]{margin-bottom:24px;width:100%;max-width:436px;height:16px}
package/README.md CHANGED
@@ -130,3 +130,38 @@ npm run pw:ui:local
130
130
  ```
131
131
 
132
132
  Read more about this project <a href="https://github.com/ironsource-mobile/shared-ui-ssp/blob/main/e2e/playwright/README.md">here</a>
133
+
134
+ ## Upload custom icons
135
+
136
+ For uploading a new custom icon like 'ad-network' icon type, follow the next steps:
137
+
138
+ - Compress your SVG
139
+ - Go to <a href="https://svgomg.net/">SVGOMG tool</a> and past your SVG icon
140
+ - Then download the new compressed icon
141
+
142
+ - Validate your SVG
143
+ - Open the SVG file with your editor
144
+ - Make sure the it has `fill="currentColor"` wherever the color should be changeable
145
+ - Make sure it has no width & height hardcoded properties
146
+ - Make sure it has no ids like 'a' or 'b' which possibly won't be unique (change `id="a"` to `id="applovin_a"` for example)
147
+
148
+ - Upload to S3
149
+ - Connect to AWS through Okta
150
+ - Go to S3
151
+ - Search Bucket named 'fusion-assets'
152
+ - Go to the 'fusion-assets/assets/icons/...'
153
+ - Go to the right folder for you
154
+ - Drag your SVG files to the table in order to upload them
155
+
156
+ - Invalidate Cache
157
+ - Connect to AWS through Okta
158
+ - Go to CloudFront
159
+ - Search a distribution named 'fusion.ironsrc.net'
160
+ - Go to the 'Invalidations' tab
161
+ - Create the correct invalidation according to what you've uploaded earlier (example: '/assets/icons/v4/ad-networks/*')
162
+ - Note: you can use the old invalidations by clicking 'Copy to new'
163
+
164
+ - Clear your browser cache
165
+ - Go to your StoryBook link
166
+ - Clear your browser cache
167
+ - New icons should be displayed!!
package/components/alert/Alert.vue.d.ts CHANGED
@@ -8,6 +8,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
8
8
  actionVariant?: "contained" | "outlined";
9
9
  actionIconName?: string;
10
10
  actionLoading?: boolean;
11
+ actionSize?: "small" | "medium";
11
12
  rounded?: boolean;
12
13
  hideIcon?: boolean;
13
14
  testId?: string;
@@ -21,6 +22,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
21
22
  actionIconName: any;
22
23
  actionVariant: string;
23
24
  actionLoading: boolean;
25
+ actionSize: string;
24
26
  rounded: boolean;
25
27
  hideIcon: boolean;
26
28
  testId: string;
@@ -37,6 +39,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
37
39
  actionVariant?: "contained" | "outlined";
38
40
  actionIconName?: string;
39
41
  actionLoading?: boolean;
42
+ actionSize?: "small" | "medium";
40
43
  rounded?: boolean;
41
44
  hideIcon?: boolean;
42
45
  testId?: string;
@@ -50,6 +53,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
50
53
  actionIconName: any;
51
54
  actionVariant: string;
52
55
  actionLoading: boolean;
56
+ actionSize: string;
53
57
  rounded: boolean;
54
58
  hideIcon: boolean;
55
59
  testId: string;
@@ -67,6 +71,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
67
71
  actionVariant: "contained" | "outlined";
68
72
  actionIconName: string;
69
73
  actionLoading: boolean;
74
+ actionSize: "small" | "medium";
70
75
  rounded: boolean;
71
76
  hideIcon: boolean;
72
77
  }>, {
package/components/alert/Alert.vue.js CHANGED
@@ -1,7 +1,7 @@
1
- import o from "./Alert.vue2.js";
2
- /* empty css */import e from "../../_virtual/_plugin-vue_export-helper.js";
3
- // import "../../Alert.vue_vue_type_style_index_0_scoped_5cdc75dd_lang.css"; //*');
4
- const d = /* @__PURE__ */ e(o, [["__scopeId", "data-v-5cdc75dd"]]);
1
+ import e from "./Alert.vue2.js";
2
+ /* empty css */import o from "../../_virtual/_plugin-vue_export-helper.js";
3
+ // import "../../Alert.vue_vue_type_style_index_0_scoped_06e0871a_lang.css"; //*');
4
+ const p = /* @__PURE__ */ o(e, [["__scopeId", "data-v-06e0871a"]]);
5
5
  export {
6
- d as default
6
+ p as default
7
7
  };
package/components/alert/Alert.vue2.js CHANGED
@@ -1,11 +1,11 @@
1
- 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";
1
+ import "../../Alert.vue_vue_type_style_index_0_scoped_06e0871a_lang.css"; import { defineComponent as N, computed as x, openBlock as n, createElementBlock as y, mergeProps as l, unref as e, createBlock as d, normalizeClass as I, createCommentVNode as c, createElementVNode as T, withCtx as s, createTextVNode as g, toDisplayString as u, renderSlot as k, createVNode as z } from "vue";
2
2
  import B from "../typography/v4/Typography.vue.js";
3
- import E from "../icon/v4/IconV4.vue.js";
4
- import h from "../button/v4/ButtonV4.vue.js";
5
- import V from "../button/v4/IconButtonV4.vue.js";
6
- import { useTestIdAttrs as $ } from "../../utils/testIds.js";
3
+ import A from "../icon/v4/IconV4.vue.js";
4
+ import E from "../button/v4/ButtonV4.vue.js";
5
+ import S from "../button/v4/IconButtonV4.vue.js";
6
+ import { useTestIdAttrs as h } from "../../utils/testIds.js";
7
7
  import { AlertTestIdModifiers as o } from "../../testids/index.js";
8
- const S = { class: "title-container" }, b = { key: 0 }, U = /* @__PURE__ */ N({
8
+ const V = { class: "title-container" }, $ = { key: 0 }, U = /* @__PURE__ */ N({
9
9
  __name: "Alert",
10
10
  props: {
11
11
  title: { default: "" },
@@ -17,21 +17,22 @@ const S = { class: "title-container" }, b = { key: 0 }, U = /* @__PURE__ */ N({
17
17
  actionVariant: { default: "outlined" },
18
18
  actionIconName: { default: null },
19
19
  actionLoading: { type: Boolean, default: !1 },
20
+ actionSize: { default: "small" },
20
21
  rounded: { type: Boolean, default: !0 },
21
22
  hideIcon: { type: Boolean, default: !1 },
22
23
  testId: { default: "" }
23
24
  },
24
25
  emits: ["close", "actionButtonClick"],
25
- setup(t, { emit: m }) {
26
- const f = t, v = x(() => {
26
+ setup(t, { emit: f }) {
27
+ const m = t, v = x(() => {
27
28
  const i = {
28
29
  success: "check-circle",
29
30
  warning: "warning",
30
31
  danger: "warning-octagon",
31
32
  info: "info"
32
33
  };
33
- return i[f.color] || i.success;
34
- }), a = $(f.testId, o);
34
+ return i[m.color] || i.success;
35
+ }), a = h(m.testId, o);
35
36
  return (i, r) => (n(), y("div", l({
36
37
  class: ["alert", {
37
38
  [`alert--${t.color}`]: !0,
@@ -39,7 +40,7 @@ const S = { class: "title-container" }, b = { key: 0 }, U = /* @__PURE__ */ N({
39
40
  "alert--rounded": t.rounded
40
41
  }]
41
42
  }, e(a)[e(o).WRAPPER]), [
42
- t.hideIcon ? c("", !0) : (n(), s(e(E), {
43
+ t.hideIcon ? c("", !0) : (n(), d(e(A), {
43
44
  key: 0,
44
45
  name: e(v),
45
46
  class: I(["alert-icon", { "alert-icon--align-top": t.title && t.description }]),
@@ -51,53 +52,53 @@ const S = { class: "title-container" }, b = { key: 0 }, U = /* @__PURE__ */ N({
51
52
  "alert-content--no-icon": t.hideIcon
52
53
  }])
53
54
  }, [
54
- T("div", S, [
55
- t.title ? (n(), s(e(B), l({
55
+ T("div", V, [
56
+ t.title ? (n(), d(e(B), l({
56
57
  key: 0,
57
58
  class: "alert-title",
58
59
  variant: "h4"
59
60
  }, e(a)[e(o).TITLE]), {
60
- default: d(() => [
61
+ default: s(() => [
61
62
  g(u(t.title), 1)
62
63
  ]),
63
64
  _: 1
64
65
  }, 16)) : c("", !0),
65
66
  k(i.$slots, "after-title", {}, void 0, !0)
66
67
  ]),
67
- A(e(B), l({
68
+ z(e(B), l({
68
69
  class: "alert-description",
69
70
  variant: "body1"
70
71
  }, e(a)[e(o).MESSAGE]), {
71
- default: d(() => [
72
+ default: s(() => [
72
73
  k(i.$slots, "default", {}, () => [
73
- t.description ? (n(), y("span", b, u(t.description), 1)) : c("", !0)
74
+ t.description ? (n(), y("span", $, u(t.description), 1)) : c("", !0)
74
75
  ], !0)
75
76
  ]),
76
77
  _: 3
77
78
  }, 16)
78
79
  ], 2),
79
- t.actionText ? (n(), s(e(h), l({
80
+ t.actionText ? (n(), d(e(E), l({
80
81
  key: 1,
81
82
  variant: t.actionVariant,
82
83
  "end-icon-name": t.actionIconName,
83
84
  color: t.color,
84
- size: "small",
85
+ size: t.actionSize,
85
86
  loading: t.actionLoading
86
87
  }, e(a)[e(o).ACTION_BUTTON], {
87
- onClick: r[0] || (r[0] = (C) => m("actionButtonClick"))
88
+ onClick: r[0] || (r[0] = (C) => f("actionButtonClick"))
88
89
  }), {
89
- default: d(() => [
90
+ default: s(() => [
90
91
  g(u(t.actionText), 1)
91
92
  ]),
92
93
  _: 1
93
- }, 16, ["variant", "end-icon-name", "color", "loading"])) : c("", !0),
94
- t.dismissible ? (n(), s(e(V), l({
94
+ }, 16, ["variant", "end-icon-name", "color", "size", "loading"])) : c("", !0),
95
+ t.dismissible ? (n(), d(e(S), l({
95
96
  key: 2,
96
97
  class: "close-button",
97
98
  "icon-name": "x",
98
99
  size: "small"
99
100
  }, e(a)[e(o).CLOSE_BUTTON], {
100
- onClick: r[1] || (r[1] = (C) => m("close"))
101
+ onClick: r[1] || (r[1] = (C) => f("close"))
101
102
  }), null, 16)) : c("", !0)
102
103
  ], 16));
103
104
  }
package/components/alert/index.d.ts CHANGED
@@ -14,6 +14,7 @@ declare const AlertTypes: () => ({
14
14
  actionVariant: "contained" | "outlined";
15
15
  actionIconName: string;
16
16
  actionLoading: boolean;
17
+ actionSize: "small" | "medium";
17
18
  rounded: boolean;
18
19
  hideIcon: boolean;
19
20
  }> & Omit<Readonly<import("vue").ExtractPropTypes<{
@@ -57,6 +58,10 @@ declare const AlertTypes: () => ({
57
58
  type: import("vue").PropType<boolean>;
58
59
  default: boolean;
59
60
  };
61
+ actionSize: {
62
+ type: import("vue").PropType<"small" | "medium">;
63
+ default: string;
64
+ };
60
65
  rounded: {
61
66
  type: import("vue").PropType<boolean>;
62
67
  default: boolean;
@@ -68,7 +73,7 @@ declare const AlertTypes: () => ({
68
73
  }>> & {
69
74
  onClose?: () => any;
70
75
  onActionButtonClick?: () => any;
71
- } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "title" | "variant" | "color" | "testId" | "description" | "dismissible" | "actionText" | "actionVariant" | "actionIconName" | "actionLoading" | "rounded" | "hideIcon">;
76
+ } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "title" | "variant" | "color" | "testId" | "description" | "dismissible" | "actionText" | "actionVariant" | "actionIconName" | "actionLoading" | "actionSize" | "rounded" | "hideIcon">;
72
77
  $attrs: {
73
78
  [x: string]: unknown;
74
79
  };
@@ -123,6 +128,10 @@ declare const AlertTypes: () => ({
123
128
  type: import("vue").PropType<boolean>;
124
129
  default: boolean;
125
130
  };
131
+ actionSize: {
132
+ type: import("vue").PropType<"small" | "medium">;
133
+ default: string;
134
+ };
126
135
  rounded: {
127
136
  type: import("vue").PropType<boolean>;
128
137
  default: boolean;
@@ -148,6 +157,7 @@ declare const AlertTypes: () => ({
148
157
  actionVariant: "contained" | "outlined";
149
158
  actionIconName: string;
150
159
  actionLoading: boolean;
160
+ actionSize: "small" | "medium";
151
161
  rounded: boolean;
152
162
  hideIcon: boolean;
153
163
  }, {}, string> & {
@@ -211,6 +221,10 @@ declare const AlertTypes: () => ({
211
221
  type: import("vue").PropType<boolean>;
212
222
  default: boolean;
213
223
  };
224
+ actionSize: {
225
+ type: import("vue").PropType<"small" | "medium">;
226
+ default: string;
227
+ };
214
228
  rounded: {
215
229
  type: import("vue").PropType<boolean>;
216
230
  default: boolean;
@@ -267,6 +281,10 @@ declare const AlertTypes: () => ({
267
281
  type: import("vue").PropType<boolean>;
268
282
  default: boolean;
269
283
  };
284
+ actionSize: {
285
+ type: import("vue").PropType<"small" | "medium">;
286
+ default: string;
287
+ };
270
288
  rounded: {
271
289
  type: import("vue").PropType<boolean>;
272
290
  default: boolean;
@@ -292,6 +310,7 @@ declare const AlertTypes: () => ({
292
310
  actionVariant: "contained" | "outlined";
293
311
  actionIconName: string;
294
312
  actionLoading: boolean;
313
+ actionSize: "small" | "medium";
295
314
  rounded: boolean;
296
315
  hideIcon: boolean;
297
316
  }, {}, string> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
package/components/forms/FormCard.vue.d.ts CHANGED
@@ -5,6 +5,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
5
5
  saveLabel?: string;
6
6
  cancelLabel?: string;
7
7
  saveLoading?: boolean;
8
+ saveDisabled?: boolean;
8
9
  testId?: string;
9
10
  isLoading?: boolean;
10
11
  }>, {
@@ -14,6 +15,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
14
15
  cancelLabel: string;
15
16
  saveLabel: string;
16
17
  saveLoading: boolean;
18
+ saveDisabled: boolean;
17
19
  testId: string;
18
20
  isLoading: boolean;
19
21
  }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
@@ -26,6 +28,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
26
28
  saveLabel?: string;
27
29
  cancelLabel?: string;
28
30
  saveLoading?: boolean;
31
+ saveDisabled?: boolean;
29
32
  testId?: string;
30
33
  isLoading?: boolean;
31
34
  }>, {
@@ -35,6 +38,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
35
38
  cancelLabel: string;
36
39
  saveLabel: string;
37
40
  saveLoading: boolean;
41
+ saveDisabled: boolean;
38
42
  testId: string;
39
43
  isLoading: boolean;
40
44
  }>>> & {
@@ -49,6 +53,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
49
53
  saveLabel: string;
50
54
  cancelLabel: string;
51
55
  saveLoading: boolean;
56
+ saveDisabled: boolean;
52
57
  }>, {
53
58
  header?(_: {}): any;
54
59
  default?(_: {}): any;
package/components/forms/FormCard.vue.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import o from "./FormCard.vue2.js";
2
- /* empty css */import e from "../../_virtual/_plugin-vue_export-helper.js";
3
- // import "../../FormCard.vue_vue_type_style_index_0_scoped_52ade67c_lang.css"; //*');
4
- const t = /* @__PURE__ */ e(o, [["__scopeId", "data-v-52ade67c"]]);
2
+ /* empty css */import _ from "../../_virtual/_plugin-vue_export-helper.js";
3
+ // import "../../FormCard.vue_vue_type_style_index_0_scoped_c7965a69_lang.css"; //*');
4
+ const t = /* @__PURE__ */ _(o, [["__scopeId", "data-v-c7965a69"]]);
5
5
  export {
6
6
  t as default
7
7
  };
package/components/forms/FormCard.vue2.js CHANGED
@@ -1,14 +1,14 @@
1
- import "../../FormCard.vue_vue_type_style_index_0_scoped_52ade67c_lang.css"; import { defineComponent as T, openBlock as d, createElementBlock as c, createElementVNode as f, mergeProps as l, unref as e, renderSlot as u, createVNode as a, withCtx as m, createTextVNode as g, toDisplayString as v, createBlock as B, createCommentVNode as C } from "vue";
2
- import N from "../typography/v4/Typography.vue.js";
3
- import y from "../button/v4/ButtonV4.vue.js";
1
+ import "../../FormCard.vue_vue_type_style_index_0_scoped_c7965a69_lang.css"; import { defineComponent as B, openBlock as d, createElementBlock as c, createElementVNode as f, mergeProps as n, unref as e, renderSlot as u, createVNode as a, withCtx as m, createTextVNode as g, toDisplayString as v, createBlock as T, createCommentVNode as C } from "vue";
2
+ import b from "../typography/v4/Typography.vue.js";
3
+ import k from "../button/v4/ButtonV4.vue.js";
4
4
  import "../button/v4/IconButtonV4.vue.js";
5
5
  import { FormCardTestIdModifiers as o } from "../../testids/index.js";
6
- import { useTestIdAttrs as b } from "../../utils/testIds.js";
6
+ import { useTestIdAttrs as N } from "../../utils/testIds.js";
7
7
  import i from "../skeleton/v4/SkeletonV4.vue.js";
8
8
  const h = { class: "form-card" }, p = {
9
9
  key: 1,
10
10
  class: "content-skeleton-container"
11
- }, z = /* @__PURE__ */ T({
11
+ }, P = /* @__PURE__ */ B({
12
12
  __name: "FormCard",
13
13
  props: {
14
14
  title: { default: "" },
@@ -17,22 +17,23 @@ const h = { class: "form-card" }, p = {
17
17
  saveLabel: { default: "Save" },
18
18
  cancelLabel: { default: "Cancel" },
19
19
  saveLoading: { type: Boolean, default: !1 },
20
+ saveDisabled: { type: Boolean, default: !1 },
20
21
  testId: { default: "" },
21
22
  isLoading: { type: Boolean, default: !1 }
22
23
  },
23
24
  emits: ["save", "cancel"],
24
- setup(t, { emit: k }) {
25
- const n = b(t.testId, o);
25
+ setup(t, { emit: y }) {
26
+ const l = N(t.testId, o);
26
27
  return (r, s) => (d(), c("div", null, [
27
28
  f("div", h, [
28
- f("header", l({ class: "card-header" }, e(n)[e(o).TITLE]), [
29
- t.isLoading ? (d(), B(e(i), {
29
+ f("header", n({ class: "card-header" }, e(l)[e(o).TITLE]), [
30
+ t.isLoading ? (d(), T(e(i), {
30
31
  key: 1,
31
32
  type: "rectangle",
32
33
  size: 20,
33
34
  class: "skeleton-header"
34
35
  })) : u(r.$slots, "header", { key: 0 }, () => [
35
- a(e(N), { variant: "h3" }, {
36
+ a(e(b), { variant: "h3" }, {
36
37
  default: m(() => [
37
38
  g(v(t.title), 1)
38
39
  ]),
@@ -40,9 +41,9 @@ const h = { class: "form-card" }, p = {
40
41
  })
41
42
  ], !0)
42
43
  ], 16),
43
- f("div", l({
44
+ f("div", n({
44
45
  class: ["card-content", { "card-content--no-padding": t.noPadding }]
45
- }, e(n)[e(o).CONTENT]), [
46
+ }, e(l)[e(o).CONTENT]), [
46
47
  t.isLoading ? (d(), c("div", p, [
47
48
  a(e(i), {
48
49
  type: "rectangle",
@@ -60,30 +61,30 @@ const h = { class: "form-card" }, p = {
60
61
  ])) : u(r.$slots, "default", { key: 0 }, void 0, !0)
61
62
  ], 16)
62
63
  ]),
63
- t.actionButtons ? (d(), c("div", l({
64
+ t.actionButtons ? (d(), c("div", n({
64
65
  key: 0,
65
66
  class: "form-actions"
66
- }, e(n)[e(o).ACTIONS]), [
67
+ }, e(l)[e(o).ACTIONS]), [
67
68
  u(r.$slots, "footer", {}, () => [
68
- a(e(y), l({
69
+ a(e(k), n({
69
70
  class: "form-action",
70
71
  variant: "outlined",
71
72
  color: "default"
72
- }, e(n)[e(o).CANCEL_BUTTON], {
73
+ }, e(l)[e(o).CANCEL_BUTTON], {
73
74
  disabled: t.isLoading || t.saveLoading,
74
- onClick: s[0] || (s[0] = (L) => k("cancel"))
75
+ onClick: s[0] || (s[0] = (L) => y("cancel"))
75
76
  }), {
76
77
  default: m(() => [
77
78
  g(v(t.cancelLabel), 1)
78
79
  ]),
79
80
  _: 1
80
81
  }, 16, ["disabled"]),
81
- a(e(y), l({
82
+ a(e(k), n({
82
83
  class: "form-action",
83
84
  loading: t.saveLoading
84
- }, e(n)[e(o).SAVE_BUTTON], {
85
- disabled: t.isLoading,
86
- onClick: s[1] || (s[1] = (L) => k("save"))
85
+ }, e(l)[e(o).SAVE_BUTTON], {
86
+ disabled: t.saveDisabled || t.isLoading,
87
+ onClick: s[1] || (s[1] = (L) => y("save"))
87
88
  }), {
88
89
  default: m(() => [
89
90
  g(v(t.saveLabel), 1)
@@ -96,5 +97,5 @@ const h = { class: "form-card" }, p = {
96
97
  }
97
98
  });
98
99
  export {
99
- z as default
100
+ P as default
100
101
  };
package/components/forms/index.d.ts CHANGED
@@ -163,6 +163,7 @@ declare const FormCardTypes: () => (({
163
163
  saveLabel: string;
164
164
  cancelLabel: string;
165
165
  saveLoading: boolean;
166
+ saveDisabled: boolean;
166
167
  }> & Omit<Readonly<import("vue").ExtractPropTypes<{
167
168
  title: {
168
169
  type: import("vue").PropType<string>;
@@ -196,10 +197,14 @@ declare const FormCardTypes: () => (({
196
197
  type: import("vue").PropType<boolean>;
197
198
  default: boolean;
198
199
  };
200
+ saveDisabled: {
201
+ type: import("vue").PropType<boolean>;
202
+ default: boolean;
203
+ };
199
204
  }>> & {
200
205
  onCancel?: () => any;
201
206
  onSave?: () => any;
202
- } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "title" | "testId" | "actionButtons" | "isLoading" | "noPadding" | "saveLabel" | "cancelLabel" | "saveLoading">;
207
+ } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "title" | "testId" | "actionButtons" | "isLoading" | "noPadding" | "saveLabel" | "cancelLabel" | "saveLoading" | "saveDisabled">;
203
208
  $attrs: {
204
209
  [x: string]: unknown;
205
210
  };
@@ -246,6 +251,10 @@ declare const FormCardTypes: () => (({
246
251
  type: import("vue").PropType<boolean>;
247
252
  default: boolean;
248
253
  };
254
+ saveDisabled: {
255
+ type: import("vue").PropType<boolean>;
256
+ default: boolean;
257
+ };
249
258
  }>> & {
250
259
  onCancel?: () => any;
251
260
  onSave?: () => any;
@@ -261,6 +270,7 @@ declare const FormCardTypes: () => (({
261
270
  saveLabel: string;
262
271
  cancelLabel: string;
263
272
  saveLoading: boolean;
273
+ saveDisabled: boolean;
264
274
  }, {}, string> & {
265
275
  beforeCreate?: (() => void) | (() => void)[];
266
276
  created?: (() => void) | (() => void)[];
@@ -314,6 +324,10 @@ declare const FormCardTypes: () => (({
314
324
  type: import("vue").PropType<boolean>;
315
325
  default: boolean;
316
326
  };
327
+ saveDisabled: {
328
+ type: import("vue").PropType<boolean>;
329
+ default: boolean;
330
+ };
317
331
  }>> & {
318
332
  onCancel?: () => any;
319
333
  onSave?: () => any;
@@ -354,6 +368,10 @@ declare const FormCardTypes: () => (({
354
368
  type: import("vue").PropType<boolean>;
355
369
  default: boolean;
356
370
  };
371
+ saveDisabled: {
372
+ type: import("vue").PropType<boolean>;
373
+ default: boolean;
374
+ };
357
375
  }>> & {
358
376
  onCancel?: () => any;
359
377
  onSave?: () => any;
@@ -369,6 +387,7 @@ declare const FormCardTypes: () => (({
369
387
  saveLabel: string;
370
388
  cancelLabel: string;
371
389
  saveLoading: boolean;
390
+ saveDisabled: boolean;
372
391
  }, {}, string> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
373
392
  $slots: {
374
393
  header?(_: {}): any;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ironsource/shared-ui",
3
- "version": "2.1.6-rc.41",
3
+ "version": "2.1.6-rc.43",
4
4
  "engines": {
5
5
  "npm": ">=7.0.0",
6
6
  "node": ">=16.0.0"
package/Alert.vue_vue_type_style_index_0_scoped_5cdc75dd_lang.css DELETED
@@ -1 +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)}