@ironsource/shared-ui 2.1.11-rc.52 → 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,6 +43,7 @@ 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;
@@ -68,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;
@@ -85,6 +88,7 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     optionIconKey: string;
     optionImageKey: string;
     optionIconType: any;
+    loadingOverride: boolean;
 }>>> & {
     onClear?: () => any;
     onClosed?: () => any;
@@ -107,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_2ba23450_lang.css"; //*');
-const n = /* @__PURE__ */ _(o, [["__scopeId", "data-v-2ba23450"]]);
+// 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_2ba23450_lang.css"; import { defineComponent as j, computed as k, ref as s, watch as O, onMounted as W, openBlock as D, createBlock as q, unref as d, withCtx as f, createVNode as g, mergeProps as G, createElementVNode as H, isRef as J, normalizeProps as X, guardReactiveProps as Y, createElementBlock as Z, createTextVNode as _, toDisplayString as ee, createCommentVNode as le } 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 oe from "./ChipDropdownTrigger.vue.js";
+import ae from "./ChipDropdownTrigger.vue.js";
 import "./AppDropdownTrigger.vue.js";
-import ae 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 te from "../../search/v4/SearchV4.vue.js";
-import ne from "../../typography/v4/Typography.vue.js";
-import { useDebounceFn as ie } from "@vueuse/core";
-const ue = { class: "conditional-container" }, re = {
+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"
-}, we = /* @__PURE__ */ j({
+}, Ke = /* @__PURE__ */ W({
   __name: "ConditionalDropdown",
   props: {
     selectedCondition: null,
@@ -37,49 +37,51 @@ const ue = { class: "conditional-container" }, re = {
     optionFlagKey: { default: "" },
     optionIconKey: { default: "" },
     optionImageKey: { default: "" },
-    optionIconType: { default: null }
+    optionIconType: { default: null },
+    loadingOverride: { type: Boolean, default: !1 }
   },
   emits: ["update:selectedCondition", "update:appliedSelections", "clear", "closed"],
-  setup(r, { emit: h }) {
-    const e = r, S = k({
+  setup(u, { emit: h }) {
+    const e = u, S = O({
       get: () => e.appliedSelections,
       set: (l) => {
         h("update:appliedSelections", l);
       }
-    }), n = k({
+    }), n = O({
       get: () => e.selectedCondition || e.conditionalOptions[0],
       set: (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), b = s(!1), i = s(e.searchQuery), L = s(""), m = s(e.label), T = s([]), F = k(() => (!i.value || i.value?.length < e.minCharsToStart) && !a.value.length ? `Enter at least ${e.minCharsToStart} keywords to begin` : "No results found"), U = k(() => {
+    }), 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(
-            ($) => $[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 ue = { class: "conditional-container" }, re = {
       } catch (t) {
         p.value = !1, console.error("Error fetching data:", t);
       }
-    }, M = async () => {
+    }, E = async () => {
       if (e.infiniteLoading)
         try {
-          b.value = !0;
+          C.value = !0;
           const l = await e.loadMoreFn();
-          b.value = !1, Array.isArray(l) && (a.value = [...a.value, ...l]);
+          C.value = !1, Array.isArray(l) && (a.value = [...a.value, ...l]);
         } catch (l) {
-          b.value = !1, console.error("Error fetching data:", l);
+          C.value = !1, console.error("Error fetching data:", l);
         }
-    }, E = ie(
-      I,
+    }, V = ue(
+      A,
       e.fetchDataDebounceTime
-    ), C = (l) => {
-      l.length >= e.minCharsToStart ? (E(l), w.value?.scrollTo(0)) : e.infiniteLoading && n.value.multi ? a.value = T.value || [] : a.value = [];
-    }, V = () => {
+    ), b = (l) => {
+      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,124 +118,129 @@ const ue = { class: "conditional-container" }, re = {
         },
         ...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, () => {
-      C(i.value);
-    }), O([n, a], () => {
-      V();
-    });
-    const x = () => {
-      c.value && u.value.length === 0 ? (n.value = null, S.value = [], n.value = null) : (L.value = i.value, S.value = c.value ? [...u.value] : { ...u.value }, K.value = c.value), A();
+    k(i, () => {
+      b(i.value);
+    }), 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 = [], S.value = [], n.value = null, m.value = e.label, i.value = "", h("clear");
-    }, R = (l) => {
-      l && n.value.multi && e.infiniteLoading && u.value && (a.value = u.value, i.value && C(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));
     };
-    W(() => {
-      (e.searchQuery || !e.infiniteLoading) && C(e.searchQuery), A();
+    q(() => {
+      (e.searchQuery || !e.infiniteLoading || e.minCharsToStart === 0) && b(e.searchQuery), D();
     });
-    const z = () => {
+    const $ = () => {
       h("closed");
     };
-    return (l, t) => (D(), q(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": b.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,
-      onOnsearch: C,
-      onApply: x,
-      onLoadMore: M,
-      onUnsavedSelectionUpdate: P,
-      onClosed: z
+      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: P,
+      onLoadMore: E,
+      onUnsavedSelectionUpdate: Q,
+      onClosed: $
     }, {
       "dropdown-trigger": f(({ defaultTriggerProps: o }) => [
-        g(d(oe), G(o, {
+        y(d(ae), H(o, {
           label: m.value,
           "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(() => [
-        H("div", ue, [
-          g(d(N), {
+        J("div", re, [
+          y(d(N), {
             selected: d(n),
-            "onUpdate:selected": t[0] || (t[0] = (o) => J(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(ae), X(Y(o)), null, 16)
+              y(d(te), Y(Z(o)), null, 16)
             ]),
             _: 1
           }, 8, ["selected", "options", "display-value"])
         ])
       ]),
       "inline-search": f(() => [
-        g(d(te), {
+        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(), Z("div", re, [
-          g(ne, { variant: "body1" }, {
+        !a.value.length && !p.value ? (L(), _("div", se, [
+          y(ie, { variant: "body1" }, {
             default: f(() => [
-              _(ee(d(F)), 1)
+              ee(le(d(U)), 1)
             ]),
             _: 1
           })
-        ])) : le("", !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 {
-  we 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;
@@ -3752,6 +3756,10 @@ declare const DropdownTypes: () => (({
         type: import("vue").PropType<boolean>;
         default: boolean;
     };
+    loadingOverride: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    };
 }>> & {
     onClear?: () => any;
     onClosed?: () => any;
@@ -3778,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;
@@ -22918,6 +22922,10 @@ declare const _default: {
             type: import("vue").PropType<boolean>;
             default: boolean;
         };
+        loadingOverride: {
+            type: import("vue").PropType<boolean>;
+            default: boolean;
+        };
     }>> & {
         onClear?: () => any;
         onClosed?: () => any;
@@ -22944,6 +22952,7 @@ declare const _default: {
         loadMoreFn: () => Promise<any[]>;
         fetchDataDebounceTime: number;
         autoFocusSearch: boolean;
+        loadingOverride: boolean;
     }>)[];
     Option: {
         new (...args: any[]): {
@@ -23986,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;
@@ -24087,6 +24100,10 @@ declare const _default: {
             type: import("vue").PropType<boolean>;
             default: boolean;
         };
+        loadingOverride: {
+            type: import("vue").PropType<boolean>;
+            default: boolean;
+        };
     }>> & {
         onClear?: () => any;
         onClosed?: () => any;
@@ -24113,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.52",
+  "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_2ba23450_lang.css

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