@ironsource/shared-ui 2.1.11-rc.51 → 2.1.11-rc.53

package/Chart.vue_vue_type_style_index_0_scoped_026d82c5_lang.css

@@ -0,0 +1 @@
+.chart-container[data-v-026d82c5]{border:1px solid var(--common-divider);background:var(--background-paper);display:flex;height:388px;border-radius:0 0 6px 6px;width:100%}.header-wrapper[data-v-026d82c5]{height:76px}.chart-content[data-v-026d82c5]{width:100%}.chart-content.with-legend[data-v-026d82c5]{width:calc(100% - 221px)}.chart-sidebar[data-v-026d82c5]{border-left:1px solid var(--common-divider)}.chart[data-v-026d82c5]{width:100%;height:312px;position:relative}.chart__canvas[data-v-026d82c5]{width:100%;height:100%}.chart__tooltip[data-v-026d82c5]{position:absolute;pointer-events:none;transition:all .1s ease;min-width:214px;max-width:270px}

package/ConditionalDropdown.vue_vue_type_style_index_0_scoped_03022bc9_lang.css

@@ -0,0 +1 @@
+.custom-list-area[data-v-03022bc9]{color:var(--text-secondary);width:100%;text-align:center;box-sizing:border-box;padding:63px 43px}.inline-search[data-v-03022bc9]{width:100%}.contain-accept[data-v-03022bc9]{padding:6px 8px;margin-bottom:4px;cursor:pointer}.contain-accept[data-v-03022bc9]:hover{background-color:var(--action-hover);border-radius:.5rem}.contain-accept--query[data-v-03022bc9]{margin-left:4px;display:inline-flex;color:var(--primary-main)}

package/components/chart/Chart.vue.js

@@ -1,7 +1,7 @@
 import o from "./Chart.vue2.js";
-/* empty css            */import e from "../../_virtual/_plugin-vue_export-helper.js";
-// import "../../Chart.vue_vue_type_style_index_0_scoped_277fde76_lang.css"; //*');
-const p = /* @__PURE__ */ e(o, [["__scopeId", "data-v-277fde76"]]);
+/* empty css            */import _ from "../../_virtual/_plugin-vue_export-helper.js";
+// import "../../Chart.vue_vue_type_style_index_0_scoped_026d82c5_lang.css"; //*');
+const c = /* @__PURE__ */ _(o, [["__scopeId", "data-v-026d82c5"]]);
 export {
-  p as default
+  c as default
 };

package/components/chart/Chart.vue2.js

@@ -1,23 +1,23 @@
- import "../../Chart.vue_vue_type_style_index_0_scoped_277fde76_lang.css"; import { defineComponent as q, computed as l, ref as g, onMounted as J, watch as T, nextTick as Q, openBlock as d, createElementBlock as C, Fragment as O, createBlock as f, unref as u, isRef as D, withCtx as k, renderSlot as x, createCommentVNode as v, createElementVNode as p, normalizeClass as Y, createVNode as F, normalizeStyle as _ } from "vue";
-import { useVModel as ee } from "@vueuse/core";
-import { Chart as N, ArcElement as te, LineElement as ae, BarElement as oe, PointElement as ie, LineController as le, BarController as re, PieController as ne, ScatterController as se, CategoryScale as de, LinearScale as ue, Filler as ce, Tooltip as pe } from "chart.js";
+ import "../../Chart.vue_vue_type_style_index_0_scoped_026d82c5_lang.css"; import { defineComponent as J, computed as i, ref as T, onMounted as Q, watch as C, nextTick as Y, openBlock as d, createElementBlock as k, Fragment as F, createBlock as v, unref as u, isRef as N, withCtx as x, renderSlot as L, createCommentVNode as y, createElementVNode as p, normalizeClass as _, createVNode as H, normalizeStyle as ee } from "vue";
+import { useVModel as te } from "@vueuse/core";
+import { Chart as P, ArcElement as ae, LineElement as oe, BarElement as ie, PointElement as le, LineController as re, BarController as ne, PieController as se, ScatterController as de, CategoryScale as ue, LinearScale as ce, Filler as pe, Tooltip as he } from "chart.js";
 import { HoverVerticalLine as me } from "./plugins/HoverVerticalLine.js";
-import { formatValue as H, calcStepSize as he } from "./utils/utils.js";
-import { DEFAULT_TICK_COUNT as fe, DEFAULT_MIN_VISIBLE as ve, DEFAULT_MAX_VISIBLE as ye, COLOR_PALETTE as be, POINT_BORDER_COLOR as ge, TICK_LABEL_COLOR as U, TICK_LABEL_FONT as P, GRID_LINE_COLOR as z } from "./consts.js";
+import { formatValue as U, calcStepSize as fe } from "./utils/utils.js";
+import { DEFAULT_TICK_COUNT as ve, DEFAULT_MIN_VISIBLE as ye, DEFAULT_MAX_VISIBLE as be, COLOR_PALETTE as ge, POINT_BORDER_COLOR as Te, TICK_LABEL_COLOR as z, TICK_LABEL_FONT as M, GRID_LINE_COLOR as $ } from "./consts.js";
 import { ChartType as n } from "./types.js";
-import { useTooltipPosition as Te } from "./composables/useTooltipPosition.js";
-import Ce from "./ChartTooltip.vue.js";
-import ke from "./ChartLegend.vue.js";
-import xe from "./ChartHeader.vue.js";
-import { hexColorToRgba as Le } from "../../utils/color.js";
-import { useChartValues as Se } from "./composables/useChartValues.js";
-import we from "./ChartLoader.vue.js";
-import Be from "../emptyState/v4/EmptyStateV4.vue.js";
-import Ie from "./SettingsHeader.vue.js";
-const Ae = { class: "chart-container" }, Ee = { class: "header-wrapper" }, Ve = { class: "chart" }, Re = {
+import { useTooltipPosition as Ce } from "./composables/useTooltipPosition.js";
+import ke from "./ChartTooltip.vue.js";
+import xe from "./ChartLegend.vue.js";
+import Le from "./ChartHeader.vue.js";
+import { hexColorToRgba as Se } from "../../utils/color.js";
+import { useChartValues as we } from "./composables/useChartValues.js";
+import Be from "./ChartLoader.vue.js";
+import Ie from "../emptyState/v4/EmptyStateV4.vue.js";
+import Ae from "./SettingsHeader.vue.js";
+const Ee = { class: "chart-container" }, Ve = { class: "header-wrapper" }, Re = { class: "chart" }, De = {
   key: 0,
   class: "chart-sidebar"
-}, qe = /* @__PURE__ */ q({
+}, Je = /* @__PURE__ */ J({
   __name: "Chart",
   props: {
     dataSets: { default: () => [] },
@@ -26,13 +26,13 @@ const Ae = { class: "chart-container" }, Ee = { class: "header-wrapper" }, Ve =
     parsing: { default: void 0 },
     xAxisFormat: { default: "string" },
     yAxisFormat: { default: "number" },
-    tickCount: { default: fe },
+    tickCount: { default: ve },
     header: { default: "" },
     subheader: { default: "" },
     withSubheaderTooltip: { type: Boolean, default: !1 },
     hideLegend: { type: Boolean, default: !1 },
-    minVisible: { default: ve },
-    maxVisible: { default: ye },
+    minVisible: { default: ye },
+    maxVisible: { default: be },
     loading: { type: Boolean, default: !1 },
     noDataIcon: { default: "file-x" },
     noDataTitle: { default: "No data to display" },
@@ -42,10 +42,9 @@ const Ae = { class: "chart-container" }, Ee = { class: "header-wrapper" }, Ve =
     withAnimation: { type: Boolean, default: !0 }
   },
   emits: ["update:chartType", "update:visibleIds"],
-  setup(a, { emit: L }) {
+  setup(a, { emit: S }) {
     const t = a;
-    N.register(
-      te,
+    P.register(
       ae,
       oe,
       ie,
@@ -57,50 +56,55 @@ const Ae = { class: "chart-container" }, Ee = { class: "header-wrapper" }, Ve =
       ue,
       ce,
       pe,
+      he,
       me
     );
-    const c = ee(t, "chartType", L), M = l(
+    const c = te(t, "chartType", S), K = i(
       () => t.withAnimation ? "" : "none"
-    ), m = g(null);
+    ), h = T(null);
     let s = null;
-    const S = l(() => t.dataSets.length === 0), w = l(() => !t.loading && !S.value), y = () => {
-      m.value && (s && s.destroy(), s = new N(m.value, I.value));
-    }, $ = () => {
-      s && (s.data.datasets = b.value, s.options = I.value.options, s.update(M.value));
+    const w = i(() => t.dataSets.length === 0), B = i(() => !t.loading && !w.value), b = () => {
+      h.value && (s && s.destroy(), s = new P(h.value, E.value));
+    }, W = () => {
+      s && (s.data.datasets = g.value, s.options = E.value.options, s.update(K.value));
     };
-    J(y), T(() => t.chartType, y), T(w, async (e) => {
-      e && (await Q(), y());
-    }), T([() => t.visibleIds, () => t.dataSets], $);
-    const h = l(
+    Q(b), C(() => t.chartType, b), C(B, async (e) => {
+      e && (await Y(), b());
+    }), C([() => t.visibleIds, () => t.dataSets], W);
+    const m = i(
       () => t.chartType === n.StackedLine || t.chartType === n.StackedBar
-    ), K = l(
+    ), I = i(
       () => t.chartType === n.Line || t.chartType === n.StackedLine
-    ), B = l(
+    ), f = i(
       () => t.dataSets.filter((e) => t.visibleIds.includes(e.id))
-    ), b = l(() => B.value.map((e, o) => {
-      const i = e.color || be[o] || "#000000";
+    ), g = i(() => f.value.map((e, o) => {
+      const l = e.color || ge[o] || "#000000";
       return {
         ...e,
-        fill: h.value ? "start" : void 0,
-        backgroundColor: Le(
-          i,
+        fill: m.value ? "start" : void 0,
+        backgroundColor: Se(
+          l,
           t.chartType === n.StackedLine ? 10 : 70
         ),
-        borderColor: i,
-        pointBackgroundColor: i,
-        pointHoverBorderColor: i,
+        borderColor: l,
+        pointBackgroundColor: l,
+        pointHoverBorderColor: l,
         maxBarThickness: 50,
         clip: 5,
         // draw a bit outside the chart area
         icon: e.icon || null,
         iconType: e.iconType || "branded"
       };
-    })), I = l(
+    })), A = i(
+      () => f.value.length && f.value.every(
+        (e) => e.data.length === 1
+      )
+    ), E = i(
       () => ({
         type: t.chartType == n.Bar || t.chartType === n.StackedBar ? "bar" : "line",
         // Chart Data
         data: {
-          datasets: b.value
+          datasets: g.value
         },
         // Chart Options
         options: {
@@ -114,7 +118,7 @@ const Ae = { class: "chart-container" }, Ee = { class: "header-wrapper" }, Ve =
           plugins: {
             legend: { display: !1 },
             title: { display: !1 },
-            hoverVerticalLine: K.value,
+            hoverVerticalLine: I.value,
             // tooltip
             tooltip: {
               enabled: !1,
@@ -124,7 +128,7 @@ const Ae = { class: "chart-container" }, Ee = { class: "header-wrapper" }, Ve =
               },
               callbacks: {
                 footer: (e) => {
-                  const o = e.reduce((i, j) => i + (j.parsed.y || 0), 0);
+                  const o = e.reduce((l, q) => l + (q.parsed.y || 0), 0);
                   return ["Total", String(o)];
                 }
               }
@@ -147,12 +151,12 @@ const Ae = { class: "chart-container" }, Ee = { class: "header-wrapper" }, Ve =
               tension: 0.3
             },
             point: {
-              radius: 1,
+              radius: A.value ? 3 : 1,
               hitRadius: 8,
               borderWidth: 0,
               hoverRadius: 4,
               hoverBorderWidth: 2,
-              pointHoverBackgroundColor: ge
+              pointHoverBackgroundColor: Te
             },
             bar: {
               borderRadius: 4
@@ -162,16 +166,17 @@ const Ae = { class: "chart-container" }, Ee = { class: "header-wrapper" }, Ve =
             // Horizontal Axis (X)
             x: {
               beginAtZero: !0,
+              offset: !I.value || A.value,
               border: { display: !1 },
-              stacked: h.value,
+              stacked: m.value,
               // stack on top of each other
               // ticks
               ticks: {
-                color: U,
-                font: P,
+                color: z,
+                font: M,
                 padding: 4,
                 callback: function(e) {
-                  return H(
+                  return U(
                     this.getLabelForValue(e),
                     t.xAxisFormat
                   );
@@ -179,7 +184,7 @@ const Ae = { class: "chart-container" }, Ee = { class: "header-wrapper" }, Ve =
               },
               // grid lines
               grid: {
-                color: z,
+                color: $,
                 drawOnChartArea: !1,
                 drawTicks: !0,
                 drawBorder: !1,
@@ -191,21 +196,21 @@ const Ae = { class: "chart-container" }, Ee = { class: "header-wrapper" }, Ve =
               beginAtZero: !0,
               border: { display: !1 },
               // hide left borderline
-              stacked: h.value,
+              stacked: m.value,
               // stack on top of each other
               // ticks
               ticks: {
-                color: U,
-                font: P,
+                color: z,
+                font: M,
                 padding: 8,
-                stepSize: R.value,
-                min: V.value,
-                max: R.value * t.tickCount,
-                callback: (e) => H(e, t.yAxisFormat)
+                stepSize: O.value,
+                min: D.value,
+                max: O.value * t.tickCount,
+                callback: (e) => U(e, t.yAxisFormat)
               },
               // grid lines
               grid: {
-                color: z,
+                color: $,
                 drawOnChartArea: !0,
                 drawTicks: !1
               }
@@ -213,78 +218,78 @@ const Ae = { class: "chart-container" }, Ee = { class: "header-wrapper" }, Ve =
           }
         }
       })
-    ), W = l(
-      () => b.value.reduce((e, o) => (e[o.id] = o.borderColor, e), {})
-    ), Z = l(() => t.dataSets.map((e) => ({
+    ), Z = i(
+      () => g.value.reduce((e, o) => (e[o.id] = o.borderColor, e), {})
+    ), G = i(() => t.dataSets.map((e) => ({
       id: e.id,
       label: e.label,
       caption: e.caption || null,
-      color: W.value[e.id] || null,
+      color: Z.value[e.id] || null,
       icon: e.icon || null,
       iconType: e.iconType || "branded"
-    }))), A = g(null), r = g(null), { position: E } = Te(
-      m,
-      A,
+    }))), V = T(null), r = T(null), { position: R } = Ce(
+      h,
+      V,
       r
-    ), G = l(() => ({
-      left: `${E.value.left}px`,
-      top: `${E.value.top}px`,
+    ), X = i(() => ({
+      left: `${R.value.left}px`,
+      top: `${R.value.top}px`,
       opacity: r.value?.opacity || 0
-    })), { minValue: V, maxValue: X } = Se({
+    })), { minValue: D, maxValue: j } = we({
       parsingConfig: t.parsing,
-      dataSets: B,
-      isStacked: h
-    }), R = l(
-      () => he(V.value, X.value, t.tickCount)
+      dataSets: f,
+      isStacked: m
+    }), O = i(
+      () => fe(D.value, j.value, t.tickCount)
     );
-    return (e, o) => (d(), C(O, null, [
-      a.withSettingsHeader ? (d(), f(Ie, {
+    return (e, o) => (d(), k(F, null, [
+      a.withSettingsHeader ? (d(), v(Ae, {
         key: 0,
         "chart-type": u(c),
-        "onUpdate:chart-type": o[0] || (o[0] = (i) => D(c) ? c.value = i : null),
+        "onUpdate:chart-type": o[0] || (o[0] = (l) => N(c) ? c.value = l : null),
         "hide-legend": a.hideLegend
       }, {
-        metric: k(() => [
-          x(e.$slots, "metric", {}, void 0, !0)
+        metric: x(() => [
+          L(e.$slots, "metric", {}, void 0, !0)
         ]),
-        breakdowns: k(() => [
-          x(e.$slots, "breakdowns", {}, void 0, !0)
+        breakdowns: x(() => [
+          L(e.$slots, "breakdowns", {}, void 0, !0)
         ]),
         _: 3
-      }, 8, ["chart-type", "hide-legend"])) : v("", !0),
-      p("div", Ae, [
-        u(w) ? (d(), C(O, { key: 0 }, [
+      }, 8, ["chart-type", "hide-legend"])) : y("", !0),
+      p("div", Ee, [
+        u(B) ? (d(), k(F, { key: 0 }, [
           p("section", {
-            class: Y(["chart-content", [{ "with-legend": !a.hideLegend }]])
+            class: _(["chart-content", [{ "with-legend": !a.hideLegend }]])
           }, [
-            p("div", Ee, [
-              F(xe, {
+            p("div", Ve, [
+              H(Le, {
                 "chart-type": u(c),
-                "onUpdate:chart-type": o[1] || (o[1] = (i) => D(c) ? c.value = i : null),
+                "onUpdate:chart-type": o[1] || (o[1] = (l) => N(c) ? c.value = l : null),
                 "with-settings-header": a.withSettingsHeader,
                 header: a.header,
                 subheader: a.subheader,
                 "with-subheader-tooltip": a.withSubheaderTooltip
               }, {
-                "subheader-tooltip": k(() => [
-                  x(e.$slots, "subheader-tooltip", {}, void 0, !0)
+                "subheader-tooltip": x(() => [
+                  L(e.$slots, "subheader-tooltip", {}, void 0, !0)
                 ]),
                 _: 3
               }, 8, ["chart-type", "with-settings-header", "header", "subheader", "with-subheader-tooltip"])
             ]),
-            p("div", Ve, [
+            p("div", Re, [
               p("canvas", {
                 ref_key: "chartRef",
-                ref: m,
+                ref: h,
                 class: "chart__canvas"
               }, null, 512),
               p("div", {
                 ref_key: "tooltipRef",
-                ref: A,
+                ref: V,
                 class: "chart__tooltip",
-                style: _(u(G))
+                style: ee(u(X))
               }, [
-                r.value ? (d(), f(Ce, {
+                r.value ? (d(), v(ke, {
                   key: 0,
                   title: String(r.value.title),
                   "data-points": r.value.dataPoints,
@@ -292,28 +297,28 @@ const Ae = { class: "chart-container" }, Ee = { class: "header-wrapper" }, Ve =
                   "y-axis-format": a.yAxisFormat,
                   "total-label": r.value.footer[0],
                   "total-value": Number(r.value.footer[1])
-                }, null, 8, ["title", "data-points", "x-axis-format", "y-axis-format", "total-label", "total-value"])) : v("", !0)
+                }, null, 8, ["title", "data-points", "x-axis-format", "y-axis-format", "total-label", "total-value"])) : y("", !0)
               ], 4)
             ])
           ], 2),
-          a.hideLegend ? v("", !0) : (d(), C("section", Re, [
-            F(ke, {
-              items: u(Z),
+          a.hideLegend ? y("", !0) : (d(), k("section", De, [
+            H(xe, {
+              items: u(G),
               "visible-ids": a.visibleIds,
               "max-limit-tooltip-text": a.maxLimitTooltipText,
-              "onUpdate:visibleIds": o[2] || (o[2] = (i) => L("update:visibleIds", i))
+              "onUpdate:visibleIds": o[2] || (o[2] = (l) => S("update:visibleIds", l))
             }, null, 8, ["items", "visible-ids", "max-limit-tooltip-text"])
           ]))
-        ], 64)) : a.loading ? (d(), f(we, { key: 1 })) : u(S) ? (d(), f(u(Be), {
+        ], 64)) : a.loading ? (d(), v(Be, { key: 1 })) : u(w) ? (d(), v(u(Ie), {
           key: 2,
           title: a.noDataTitle,
           subtitle: a.noDataSubtitle,
           "icon-name": a.noDataIcon
-        }, null, 8, ["title", "subtitle", "icon-name"])) : v("", !0)
+        }, null, 8, ["title", "subtitle", "icon-name"])) : y("", !0)
       ])
     ], 64));
   }
 });
 export {
-  qe as default
+  Je as default
 };

package/components/chart/mockData.d.ts

@@ -34,4 +34,12 @@ export declare const MULTIPLE_DATASETS_DATE: ({
         value: number;
     }[];
 })[];
+export declare const MULTIPLE_DATASETS_SINGLE_DATE: {
+    id: string;
+    label: string;
+    data: {
+        date: string;
+        value: number;
+    }[];
+}[];
 export declare const generateMockData: (numSeries?: number) => any[];

package/components/dropdown/v4/ConditionalDropdown.vue.d.ts

@@ -25,6 +25,7 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     optionIconKey?: string;
     optionImageKey?: string;
     optionIconType?: IconTypes;
+    loadingOverride?: boolean;
 }>, {
     label: string;
     testId: string;
@@ -42,10 +43,12 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     optionIconKey: string;
     optionImageKey: string;
     optionIconType: any;
+    loadingOverride: boolean;
 }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:selectedCondition": (value: SelectedCondition) => void;
     "update:appliedSelections": (value: unknown) => void;
     clear: () => void;
+    closed: () => void;
 }, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     selectedCondition: SelectedCondition | null;
     appliedSelections: unknown | unknown[];
@@ -67,6 +70,7 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     optionIconKey?: string;
     optionImageKey?: string;
     optionIconType?: IconTypes;
+    loadingOverride?: boolean;
 }>, {
     label: string;
     testId: string;
@@ -84,8 +88,10 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     optionIconKey: string;
     optionImageKey: string;
     optionIconType: any;
+    loadingOverride: boolean;
 }>>> & {
     onClear?: () => any;
+    onClosed?: () => any;
     "onUpdate:selectedCondition"?: (value: SelectedCondition) => any;
     "onUpdate:appliedSelections"?: (value: unknown) => any;
 }, {
@@ -105,6 +111,7 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     loadMoreFn: () => Promise<any[]>;
     fetchDataDebounceTime: number;
     autoFocusSearch: boolean;
+    loadingOverride: boolean;
 }>;
 export default _default;
 type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;

package/components/dropdown/v4/ConditionalDropdown.vue.js

@@ -1,7 +1,7 @@
 import o from "./ConditionalDropdown.vue2.js";
 /* empty css                          */import _ from "../../../_virtual/_plugin-vue_export-helper.js";
-// import "../../../ConditionalDropdown.vue_vue_type_style_index_0_scoped_2c6a03f9_lang.css"; //*');
-const n = /* @__PURE__ */ _(o, [["__scopeId", "data-v-2c6a03f9"]]);
+// import "../../../ConditionalDropdown.vue_vue_type_style_index_0_scoped_03022bc9_lang.css"; //*');
+const n = /* @__PURE__ */ _(o, [["__scopeId", "data-v-03022bc9"]]);
 export {
   n as default
 };

package/components/dropdown/v4/ConditionalDropdown.vue2.js

@@ -1,21 +1,21 @@
- import "../../../ConditionalDropdown.vue_vue_type_style_index_0_scoped_2c6a03f9_lang.css"; import { defineComponent as $, computed as C, ref as s, watch as O, onMounted as j, openBlock as D, createBlock as W, unref as d, withCtx as f, createVNode as g, mergeProps as q, createElementVNode as G, isRef as H, normalizeProps as J, guardReactiveProps as X, createElementBlock as Y, createTextVNode as Z, toDisplayString as _, createCommentVNode as ee } from "vue";
+ import "../../../ConditionalDropdown.vue_vue_type_style_index_0_scoped_03022bc9_lang.css"; import { defineComponent as W, computed as O, ref as s, watch as k, onMounted as q, openBlock as L, createBlock as G, unref as d, withCtx as f, createVNode as y, mergeProps as H, createElementVNode as J, isRef as X, normalizeProps as Y, guardReactiveProps as Z, createElementBlock as _, createTextVNode as ee, toDisplayString as le, createCommentVNode as oe } from "vue";
 import N from "./DropdownV4.vue.js";
 import "./DefaultDropdownTrigger.vue.js";
 import "./IconButtonDropdownTrigger.vue.js";
-import le from "./ChipDropdownTrigger.vue.js";
+import ae from "./ChipDropdownTrigger.vue.js";
 import "./AppDropdownTrigger.vue.js";
-import oe from "./ButtonDropdownTrigger.vue.js";
+import te from "./ButtonDropdownTrigger.vue.js";
 import "./ButtonFilterDropdownTrigger.vue.js";
 import "./TreeDropdown.vue.js";
 import "./OptionV4.vue.js";
 import "./ConditionalDropdown.vue.js";
-import ae from "../../search/v4/SearchV4.vue.js";
-import te from "../../typography/v4/Typography.vue.js";
-import { useDebounceFn as ne } from "@vueuse/core";
-const ie = { class: "conditional-container" }, ue = {
+import ne from "../../search/v4/SearchV4.vue.js";
+import ie from "../../typography/v4/Typography.vue.js";
+import { useDebounceFn as ue } from "@vueuse/core";
+const re = { class: "conditional-container" }, se = {
   key: 0,
   class: "custom-list-area"
-}, Oe = /* @__PURE__ */ $({
+}, Ke = /* @__PURE__ */ W({
   __name: "ConditionalDropdown",
   props: {
     selectedCondition: null,
@@ -37,49 +37,51 @@ const ie = { class: "conditional-container" }, ue = {
     optionFlagKey: { default: "" },
     optionIconKey: { default: "" },
     optionImageKey: { default: "" },
-    optionIconType: { default: null }
+    optionIconType: { default: null },
+    loadingOverride: { type: Boolean, default: !1 }
   },
-  emits: ["update:selectedCondition", "update:appliedSelections", "clear"],
-  setup(r, { emit: k }) {
-    const e = r, h = C({
+  emits: ["update:selectedCondition", "update:appliedSelections", "clear", "closed"],
+  setup(u, { emit: h }) {
+    const e = u, S = O({
       get: () => e.appliedSelections,
       set: (l) => {
-        k("update:appliedSelections", l);
+        h("update:appliedSelections", l);
       }
-    }), n = C({
+    }), n = O({
       get: () => e.selectedCondition || e.conditionalOptions[0],
       set: (l) => {
-        k("update:selectedCondition", l);
+        h("update:selectedCondition", l);
       }
-    }), w = s(null), c = s(!0), a = s([]), u = s(
-      Array.isArray(e.appliedSelections) ? e.appliedSelections : [e.appliedSelections]
-    ), K = s(!0), p = s(!1), S = s(!1), i = s(e.searchQuery), L = s(""), m = s(e.label), T = s([]), F = C(() => (!i.value || i.value?.length < e.minCharsToStart) && !a.value.length ? `Enter at least ${e.minCharsToStart} keywords to begin` : "No results found"), U = C(() => {
+    }), F = () => {
+      const { appliedSelections: l } = e;
+      return l ? Array.isArray(l) ? l : [l] : [];
+    }, w = s(null), c = s(!0), a = s([]), r = s(F()), K = s(!0), p = s(!1), C = s(!1), i = s(e.searchQuery), B = s(""), m = s(e.label), T = s([]), U = O(() => (!i.value || i.value?.length < e.minCharsToStart) && !a.value.length ? `Enter at least ${e.minCharsToStart} keywords to begin` : "No results found"), I = O(() => {
       const l = c.value ? 4 : 4.5, t = a.value.length > 4 ? a.value.length : l;
       if (e.groupedOptions) {
         let o = 0;
-        return a.value.forEach((y) => {
-          y.options && (o = o + y.options.length);
+        return a.value.forEach((g) => {
+          g.options && (o = o + g.options.length);
         }), o > 4 ? o : l;
       }
       return t > l ? t : l;
-    }), B = (l, t) => {
-      if (e.infiniteLoading && n.value.multi && Array.isArray(u.value) && u.value.length && l && t.length) {
-        const o = [], y = u.value.filter(
+    }), M = (l, t) => {
+      if (e.infiniteLoading && n.value.multi && Array.isArray(r.value) && r.value.length && l && t.length) {
+        const o = [], g = r.value.filter(
           (v) => v[e.optionNameKey].includes(l)
         );
         return t.forEach((v) => {
-          y.find(
-            (z) => z[e.comparingKey] === v[e.comparingKey]
+          g.find(
+            (j) => j[e.comparingKey] === v[e.comparingKey]
           ) && o.push(v[e.comparingKey]);
-        }), y.filter(
+        }), g.filter(
           (v) => !o.includes(v[e.comparingKey])
         );
       }
       return [];
-    }, I = async (l) => {
+    }, A = async (l) => {
       try {
         p.value = !0;
-        const t = await e.fetchFnCallback(l), o = B(
+        const t = await e.fetchFnCallback(l), o = M(
           l,
           t
         );
@@ -87,21 +89,21 @@ const ie = { class: "conditional-container" }, ue = {
       } catch (t) {
         p.value = !1, console.error("Error fetching data:", t);
       }
-    }, M = async () => {
+    }, E = async () => {
       if (e.infiniteLoading)
         try {
-          S.value = !0;
+          C.value = !0;
           const l = await e.loadMoreFn();
-          S.value = !1, Array.isArray(l) && (a.value = [...a.value, ...l]);
+          C.value = !1, Array.isArray(l) && (a.value = [...a.value, ...l]);
         } catch (l) {
-          S.value = !1, console.error("Error fetching data:", l);
+          C.value = !1, console.error("Error fetching data:", l);
         }
-    }, E = ne(
-      I,
+    }, V = ue(
+      A,
       e.fetchDataDebounceTime
     ), b = (l) => {
-      l.length >= e.minCharsToStart ? (E(l), w.value?.scrollTo(0)) : e.infiniteLoading && n.value.multi ? a.value = T.value || [] : a.value = [];
-    }, V = () => {
+      l.length >= e.minCharsToStart ? (V(l), w.value?.scrollTo(0)) : e.infiniteLoading && n.value.multi ? a.value = T.value || [] : a.value = [];
+    }, x = () => {
       i.value && a.value.length && !p.value && !n.value.multi ? a.value[0].conditionalOptions ? a.value[0] = {
         name: i.value,
         conditionalOptions: !0,
@@ -116,119 +118,129 @@ const ie = { class: "conditional-container" }, ue = {
         },
         ...a.value
       ] : a.value.length && a.value[0].conditionalOptions && a.value.shift();
-    }, A = () => {
-      c.value && u.value.length === 0 ? m.value = e.label : m.value = `${e.label} ${n.value.label.toLowerCase()}`;
+    }, D = () => {
+      c.value && r.value.length === 0 ? m.value = e.label : m.value = `${e.label} ${n.value.label.toLowerCase()}`;
     };
-    O(i, () => {
+    k(i, () => {
       b(i.value);
-    }), O([n, a], () => {
-      V();
-    });
-    const x = () => {
-      c.value && u.value.length === 0 ? (n.value = null, h.value = [], n.value = null) : (L.value = i.value, h.value = c.value ? [...u.value] : { ...u.value }, K.value = c.value), A();
+    }), k([n, a], () => {
+      x();
+    }), k(
+      () => e.loadingOverride,
+      (l, t) => {
+        !l && t && !e.infiniteLoading && A(e.searchQuery);
+      }
+    );
+    const P = () => {
+      c.value && r.value.length === 0 ? (n.value = null, S.value = [], n.value = null) : (B.value = i.value, S.value = c.value ? [...r.value] : { ...r.value }, K.value = c.value), D();
     };
-    O(n, (l, t) => {
-      n.value.multi ? (p.value = !0, !t.multi && l.multi && Array.isArray(e.appliedSelections) && (u.value = e.appliedSelections), setTimeout(() => {
+    k(n, (l, t) => {
+      n.value.multi ? (p.value = !0, !t.multi && l.multi && Array.isArray(e.appliedSelections) && (r.value = e.appliedSelections), setTimeout(() => {
         p.value = !1, c.value = !0;
       }, 100)) : setTimeout(() => {
         c.value = !1;
       }, 100);
     });
-    const P = (l) => {
+    const Q = (l) => {
       T.value = l;
-    }, Q = () => {
-      u.value = [], h.value = [], n.value = null, m.value = e.label, i.value = "", k("clear");
-    }, R = (l) => {
-      l && n.value.multi && e.infiniteLoading && u.value && (a.value = u.value, i.value && b(i.value));
+    }, R = () => {
+      r.value = [], S.value = [], n.value = null, m.value = e.label, i.value = "", h("clear");
+    }, z = (l) => {
+      l && n.value.multi && e.infiniteLoading && r.value && (a.value = r.value, i.value && b(i.value));
+    };
+    q(() => {
+      (e.searchQuery || !e.infiniteLoading || e.minCharsToStart === 0) && b(e.searchQuery), D();
+    });
+    const $ = () => {
+      h("closed");
     };
-    return j(() => {
-      (e.searchQuery || !e.infiniteLoading) && b(e.searchQuery), A();
-    }), (l, t) => (D(), W(d(N), {
+    return (l, t) => (L(), G(d(N), {
       ref_key: "dropdownRef",
       ref: w,
-      selected: u.value,
-      "onUpdate:selected": t[2] || (t[2] = (o) => u.value = o),
+      selected: r.value,
+      "onUpdate:selected": t[2] || (t[2] = (o) => r.value = o),
       "predefined-trigger": "chip",
-      "display-value": (o) => o?.[r.optionNameKey],
+      "display-value": (o) => o?.[u.optionNameKey],
       multi: c.value,
       options: a.value,
       placeholder: m.value,
       "search-placeholder": "Search",
-      "option-name-key": r.optionNameKey,
+      "option-name-key": u.optionNameKey,
       "with-conditions": "",
       "inline-search": "",
-      "custom-number-of-displayed-options": d(U),
+      "custom-number-of-displayed-options": d(I),
       "options-list-width": "330px",
-      loading: p.value,
-      "load-more-loading": S.value,
-      "comparing-key": r.comparingKey,
-      "is-open": r.isOpen,
-      "infinite-loading": r.infiniteLoading,
-      "show-select-all": !r.infiniteLoading && !i.value,
-      "grouped-options": r.groupedOptions,
-      "option-flag-key": r.optionFlagKey,
-      "option-image-key": r.optionImageKey,
-      "option-icon-key": r.optionIconKey,
-      "option-icon-type": r.optionIconType,
-      "onUpdate:isOpen": R,
+      loading: p.value || u.loadingOverride,
+      "load-more-loading": C.value,
+      "comparing-key": u.comparingKey,
+      "is-open": u.isOpen,
+      "infinite-loading": u.infiniteLoading,
+      "show-select-all": !u.infiniteLoading && !i.value,
+      "grouped-options": u.groupedOptions,
+      "option-flag-key": u.optionFlagKey,
+      "option-image-key": u.optionImageKey,
+      "option-icon-key": u.optionIconKey,
+      "option-icon-type": u.optionIconType,
+      "onUpdate:isOpen": z,
       onOnsearch: b,
-      onApply: x,
-      onLoadMore: M,
-      onUnsavedSelectionUpdate: P
+      onApply: P,
+      onLoadMore: E,
+      onUnsavedSelectionUpdate: Q,
+      onClosed: $
     }, {
       "dropdown-trigger": f(({ defaultTriggerProps: o }) => [
-        g(d(le), q(o, {
+        y(d(ae), H(o, {
           label: m.value,
-          "selected-option": d(h),
+          "selected-option": d(S),
           multi: K.value,
           "cancel-all-selected-display": "",
-          "display-value-in-quotes": !Array.isArray(u.value) && u.value.conditionalOptions,
-          onClear: Q
+          "display-value-in-quotes": !Array.isArray(r.value) && r.value.conditionalOptions,
+          onClear: R
         }), null, 16, ["label", "selected-option", "multi", "display-value-in-quotes"])
       ]),
       "dropdown-conditions": f(() => [
-        G("div", ie, [
-          g(d(N), {
+        J("div", re, [
+          y(d(N), {
             selected: d(n),
-            "onUpdate:selected": t[0] || (t[0] = (o) => H(n) ? n.value = o : null),
-            options: r.conditionalOptions,
+            "onUpdate:selected": t[0] || (t[0] = (o) => X(n) ? n.value = o : null),
+            options: u.conditionalOptions,
             "option-name-key": "label",
             "display-value": (o) => o?.label,
             container: ".conditional-container",
             size: "small"
           }, {
             "dropdown-trigger": f(({ buttonTriggerProps: o }) => [
-              g(d(oe), J(X(o)), null, 16)
+              y(d(te), Y(Z(o)), null, 16)
             ]),
             _: 1
           }, 8, ["selected", "options", "display-value"])
         ])
       ]),
       "inline-search": f(() => [
-        g(d(ae), {
+        y(d(ne), {
           modelValue: i.value,
           "onUpdate:modelValue": t[1] || (t[1] = (o) => i.value = o),
           class: "inline-search",
           placeholder: "Search",
           variant: "transparent",
           size: "md",
-          "auto-focus": r.autoFocusSearch
+          "auto-focus": u.autoFocusSearch
         }, null, 8, ["modelValue", "auto-focus"])
       ]),
       "custom-list-area": f(() => [
-        !a.value.length && !p.value ? (D(), Y("div", ue, [
-          g(te, { variant: "body1" }, {
+        !a.value.length && !p.value ? (L(), _("div", se, [
+          y(ie, { variant: "body1" }, {
             default: f(() => [
-              Z(_(d(F)), 1)
+              ee(le(d(U)), 1)
             ]),
             _: 1
           })
-        ])) : ee("", !0)
+        ])) : oe("", !0)
       ]),
       _: 1
     }, 8, ["selected", "display-value", "multi", "options", "placeholder", "option-name-key", "custom-number-of-displayed-options", "loading", "load-more-loading", "comparing-key", "is-open", "infinite-loading", "show-select-all", "grouped-options", "option-flag-key", "option-image-key", "option-icon-key", "option-icon-type"]));
   }
 });
 export {
-  Oe as default
+  Ke as default
 };

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

@@ -3651,6 +3651,10 @@ declare const DropdownTypes: () => (({
         type: import("vue").PropType<boolean>;
         default: boolean;
     };
+    loadingOverride: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    };
 }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:selectedCondition": (value: {
         label: string;
@@ -3659,6 +3663,7 @@ declare const DropdownTypes: () => (({
     }) => void;
     "update:appliedSelections": (value: unknown) => void;
     clear: () => void;
+    closed: () => void;
 }, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     label: {
         type: import("vue").PropType<string>;
@@ -3751,8 +3756,13 @@ declare const DropdownTypes: () => (({
         type: import("vue").PropType<boolean>;
         default: boolean;
     };
+    loadingOverride: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    };
 }>> & {
     onClear?: () => any;
+    onClosed?: () => any;
     "onUpdate:selectedCondition"?: (value: {
         label: string;
         value: string;
@@ -3776,5 +3786,6 @@ declare const DropdownTypes: () => (({
     loadMoreFn: () => Promise<any[]>;
     fetchDataDebounceTime: number;
     autoFocusSearch: boolean;
+    loadingOverride: boolean;
 }>)[];
 export { Dropdown, DefaultDropdownTrigger, IconButtonDropdownTrigger, ChipDropdownTrigger, ButtonDropdownTrigger, ButtonFilterDropdownTrigger, AppDropdownTrigger, DropdownTypes, Option, TreeDropdown, ConditionalDropdown, };

package/index.d.ts

@@ -22817,6 +22817,10 @@ declare const _default: {
             type: import("vue").PropType<boolean>;
             default: boolean;
         };
+        loadingOverride: {
+            type: import("vue").PropType<boolean>;
+            default: boolean;
+        };
     }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
         "update:selectedCondition": (value: {
             label: string;
@@ -22825,6 +22829,7 @@ declare const _default: {
         }) => void;
         "update:appliedSelections": (value: unknown) => void;
         clear: () => void;
+        closed: () => void;
     }, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
         label: {
             type: import("vue").PropType<string>;
@@ -22917,8 +22922,13 @@ declare const _default: {
             type: import("vue").PropType<boolean>;
             default: boolean;
         };
+        loadingOverride: {
+            type: import("vue").PropType<boolean>;
+            default: boolean;
+        };
     }>> & {
         onClear?: () => any;
+        onClosed?: () => any;
         "onUpdate:selectedCondition"?: (value: {
             label: string;
             value: string;
@@ -22942,6 +22952,7 @@ declare const _default: {
         loadMoreFn: () => Promise<any[]>;
         fetchDataDebounceTime: number;
         autoFocusSearch: boolean;
+        loadingOverride: boolean;
     }>)[];
     Option: {
         new (...args: any[]): {
@@ -23984,6 +23995,10 @@ declare const _default: {
             type: import("vue").PropType<boolean>;
             default: boolean;
         };
+        loadingOverride: {
+            type: import("vue").PropType<boolean>;
+            default: boolean;
+        };
     }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
         "update:selectedCondition": (value: {
             label: string;
@@ -23992,6 +24007,7 @@ declare const _default: {
         }) => void;
         "update:appliedSelections": (value: unknown) => void;
         clear: () => void;
+        closed: () => void;
     }, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
         label: {
             type: import("vue").PropType<string>;
@@ -24084,8 +24100,13 @@ declare const _default: {
             type: import("vue").PropType<boolean>;
             default: boolean;
         };
+        loadingOverride: {
+            type: import("vue").PropType<boolean>;
+            default: boolean;
+        };
     }>> & {
         onClear?: () => any;
+        onClosed?: () => any;
         "onUpdate:selectedCondition"?: (value: {
             label: string;
             value: string;
@@ -24109,6 +24130,7 @@ declare const _default: {
         loadMoreFn: () => Promise<any[]>;
         fetchDataDebounceTime: number;
         autoFocusSearch: boolean;
+        loadingOverride: boolean;
     }>;
     Label: {
         new (...args: any[]): {

package/index.js

@@ -1,4 +1,4 @@
-import './AutocompleteDropdown.vue_vue_type_style_index_0_scoped_214ddaf4_lang.css';
+import './IncludeExclude.vue_vue_type_style_index_0_scoped_cc2adbf5_lang.css';
 import { AppTriggerTypes as ro } from "./components/appTrigger/index.js";
 import { AutocompleteDropdownTypes as mo } from "./components/autocompleteDropdown/index.js";
 import { MenuItemTypes as po } from "./components/menuItem/index.js";

package/package.json

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

package/Chart.vue_vue_type_style_index_0_scoped_277fde76_lang.css

@@ -1 +0,0 @@
-.chart-container[data-v-277fde76]{border:1px solid var(--common-divider);background:var(--background-paper);display:flex;height:388px;border-radius:0 0 6px 6px;width:100%}.header-wrapper[data-v-277fde76]{height:76px}.chart-content[data-v-277fde76]{width:100%}.chart-content.with-legend[data-v-277fde76]{width:calc(100% - 221px)}.chart-sidebar[data-v-277fde76]{border-left:1px solid var(--common-divider)}.chart[data-v-277fde76]{width:100%;height:312px;position:relative}.chart__canvas[data-v-277fde76]{width:100%;height:100%}.chart__tooltip[data-v-277fde76]{position:absolute;pointer-events:none;transition:all .1s ease;min-width:214px;max-width:270px}

package/ConditionalDropdown.vue_vue_type_style_index_0_scoped_2c6a03f9_lang.css

@@ -1 +0,0 @@
-.custom-list-area[data-v-2c6a03f9]{color:var(--text-secondary);width:100%;text-align:center;box-sizing:border-box;padding:63px 43px}.inline-search[data-v-2c6a03f9]{width:100%}.contain-accept[data-v-2c6a03f9]{padding:6px 8px;margin-bottom:4px;cursor:pointer}.contain-accept[data-v-2c6a03f9]:hover{background-color:var(--action-hover);border-radius:.5rem}.contain-accept--query[data-v-2c6a03f9]{margin-left:4px;display:inline-flex;color:var(--primary-main)}