@ironsource/shared-ui 2.1.12-rc.2 → 2.1.12-rc.20

package/components/chart/mockData.d.ts

@@ -1,30 +1,53 @@
 export declare const SINGLE_DATASET_DATE: {
+    id: string;
+    label: string;
+    data: {
+        date: string;
+        value: number;
+    }[];
+}[];
+export declare const SINGLE_DATASET_DATE_MONTHLY: {
+    id: string;
     label: string;
     data: {
         date: string;
         value: number;
     }[];
-    color: string;
 }[];
 export declare const SINGLE_DATASET_COUNTRY: {
+    id: string;
+    countryFlag: string;
     label: string;
     data: {
-        country: string;
         value: number;
+        value2: number;
+        value3: number;
     }[];
 }[];
-export declare const MULTIPLE_DATASETS_DATE: ({
+export declare const SINGLE_DATASET_APP: {
     id: string;
     label: string;
+    icon: string;
+    image: string;
+    data: {
+        app: string;
+        value: number;
+    }[];
+}[];
+export declare const MULTIPLE_DATASETS_DATE: ({
+    id: number;
+    label: string;
     caption: string;
     icon: string;
     data: {
         date: string;
         value: number;
+        value2: number;
+        value3: number;
     }[];
     iconType?: undefined;
 } | {
-    id: string;
+    id: number;
     label: string;
     caption: string;
     icon: string;
@@ -32,14 +55,30 @@ export declare const MULTIPLE_DATASETS_DATE: ({
     data: {
         date: string;
         value: number;
+        value2: number;
+        value3: number;
     }[];
 })[];
 export declare const MULTIPLE_DATASETS_SINGLE_DATE: {
-    id: string;
+    id: number;
     label: string;
     data: {
         date: string;
         value: number;
+        value2: number;
+        value3: number;
     }[];
 }[];
 export declare const generateMockData: (numSeries?: number) => any[];
+export declare const metricOptions: {
+    id: string;
+    label: string;
+}[];
+export declare const breakdownsOptions: {
+    id: string;
+    label: string;
+}[];
+export declare const LEGEND_SORTING_OPTIONS: {
+    id: string;
+    label: string;
+}[];

package/components/chart/types.d.ts

@@ -1,22 +1,29 @@
 import { Ref } from 'vue';
 import { UseVirtualListItem } from '@vueuse/core';
 import { IconTypes } from '../icon/v4/Icon.types';
-import { ChartTypeRegistry, TooltipItem } from 'chart.js';
+import { ChartDataset, ChartTypeRegistry, TooltipItem } from 'chart.js';
 export declare enum ChartType {
     Line = "line",
     Bar = "bar",
     StackedLine = "stackedLine",
     StackedBar = "stackedBar"
 }
+export declare enum DateInterval {
+    DAILY = "daily",
+    WEEKLY = "weekly",
+    MONTHLY = "monthly"
+}
 export type ChartDataRecord = Record<string, unknown>;
 export type ChartDataSet = {
     id: string | number;
     label: string;
     data: ChartDataRecord[];
     caption?: string;
-    color?: string;
+    color?: HexColor;
     icon?: string;
     iconType?: IconTypes;
+    countryFlag?: string;
+    image?: string;
 };
 export type ChartParsingConfig = {
     xAxisKey: string;
@@ -32,10 +39,7 @@ export type LegendItem = {
     iconType?: IconTypes;
 };
 export interface MyTooltipItem<T extends keyof ChartTypeRegistry = keyof ChartTypeRegistry> extends TooltipItem<T> {
-    dataset: {
-        icon?: string;
-        iconType?: IconTypes;
-    } & TooltipItem<T>['dataset'];
+    dataset: ChartDataSet & TooltipItem<T>['dataset'];
 }
 export type UseVirtualListResult = {
     list: Ref<UseVirtualListItem<LegendItem>[]>;
@@ -55,3 +59,30 @@ export type DropdownTypeOption = {
     id: ChartType;
     name: string;
 };
+export type UseChartHeightArgs = {
+    chartPlanesCount: Ref<number>;
+    useFullHeight: boolean;
+    bottomSpacing?: number;
+};
+export type HexColor = `#${string}`;
+export type DataSetConfig = ChartDataset<'line'> & ChartDataSet;
+export interface Font {
+    size: number;
+    weight: number;
+    family: string;
+}
+export type PrepareTicksLabelArgs = {
+    label: string;
+    format: ValueFormat;
+    availableSpace: number;
+    truncate?: boolean;
+};
+export declare enum TooltipOrder {
+    Legend = "legend",
+    YAxis = "yAxis"
+}
+export declare enum TrendDirection {
+    UP = "up",
+    DOWN = "down",
+    NEUTRAL = "right"
+}

package/components/chart/types.js

@@ -1,4 +1,7 @@
-var a = /* @__PURE__ */ ((e) => (e.Line = "line", e.Bar = "bar", e.StackedLine = "stackedLine", e.StackedBar = "stackedBar", e))(a || {});
+var e = /* @__PURE__ */ ((L) => (L.Line = "line", L.Bar = "bar", L.StackedLine = "stackedLine", L.StackedBar = "stackedBar", L))(e || {}), r = /* @__PURE__ */ ((L) => (L.DAILY = "daily", L.WEEKLY = "weekly", L.MONTHLY = "monthly", L))(r || {}), a = /* @__PURE__ */ ((L) => (L.Legend = "legend", L.YAxis = "yAxis", L))(a || {}), n = /* @__PURE__ */ ((L) => (L.UP = "up", L.DOWN = "down", L.NEUTRAL = "right", L))(n || {});
 export {
-  a as ChartType
+  e as ChartType,
+  r as DateInterval,
+  a as TooltipOrder,
+  n as TrendDirection
 };

package/components/chart/utils/formatNumber.d.ts

@@ -1,2 +1 @@
 export declare const DEFAULT_FALLBACK = "N/A";
-export declare const formatNumber: (num: number | string, fallback?: string | null) => string;

package/components/chart/utils/highlightUtils.d.ts

@@ -0,0 +1,3 @@
+import { DataSetConfig } from '@/components/chart/types';
+export declare const storeOriginalDatasetColors: (dataset: DataSetConfig) => void;
+export declare const restoreOriginalDatasetColors: (dataset: DataSetConfig) => void;

package/components/chart/utils/highlightUtils.js

@@ -0,0 +1,18 @@
+const _ = [
+  "borderColor",
+  "backgroundColor",
+  "pointBackgroundColor",
+  "pointHoverBorderColor"
+], l = (o) => {
+  _.forEach((r) => {
+    o[`___${r}`] = o[r];
+  });
+}, n = (o) => {
+  _.forEach((r) => {
+    o[`___${r}`] && (o[r] = o[`___${r}`], delete o[`___${r}`]);
+  });
+};
+export {
+  n as restoreOriginalDatasetColors,
+  l as storeOriginalDatasetColors
+};

package/components/chart/utils/utils.d.ts

@@ -1,3 +1,4 @@
-import { ValueFormat } from '@/components/chart/types';
+import { PrepareTicksLabelArgs, ValueFormat } from '@/components/chart/types';
 export declare const calcStepSize: (min: number, max: number, tickCount: number) => number;
-export declare const formatValue: (value: number | string, valueFormat: ValueFormat) => string;
+export declare const formatValue: (value: number | string | Date, valueFormat: ValueFormat) => string;
+export declare const prepareTickLabel: ({ label, format, availableSpace, truncate, }: PrepareTicksLabelArgs) => string | string[];

package/components/chart/utils/utils.js

@@ -1,12 +1,27 @@
-import { format as n } from "date-fns";
-import { formatNumber as d } from "./formatNumber.js";
-const p = (r, t, e) => {
+import { format as f } from "date-fns";
+import { TICK_LABEL_FONT as c } from "../consts.js";
+import { nFormatter as d } from "../../../utils/formatNumbers.js";
+import { truncateTextToFit as E } from "../../../utils/text.js";
+import { REGEX_LINEBREAK as i } from "../../../consts/regex.js";
+const g = (r, t, e) => {
   if (e === 0)
     return 0;
-  const f = t - r, o = f / e * 0.4;
-  return (f + o) / e;
-}, M = (r, t) => t === "day" ? n(new Date(r), "EEEE") : t === "number" ? d(r) : t === "date" ? n(new Date(r), "MMM dd") : t === "dateLong" ? n(new Date(r), "MMM dd, yyyy") : String(r);
+  const n = t - r, o = n / e * 0.4;
+  return (n + o) / e;
+}, a = (r, t) => t === "day" ? f(new Date(r), "EEEE") : t === "number" ? d(r) : t === "date" ? f(new Date(r), "MMM dd") : t === "dateLong" ? f(new Date(r), "MMM dd, yyyy") : String(r), w = ({
+  label: r,
+  format: t,
+  availableSpace: e,
+  truncate: n = !1
+}) => {
+  const s = i.test(r), o = (p) => {
+    const m = a(p, t);
+    return n && e > 0 ? E(m, c, e) : m;
+  };
+  return s ? r.split(i).map(o) : o(r);
+};
 export {
-  p as calcStepSize,
-  M as formatValue
+  g as calcStepSize,
+  a as formatValue,
+  w as prepareTickLabel
 };

package/components/checkbox/v3/Checkbox.vue.d.ts

@@ -2,7 +2,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     isChecked: boolean;
     isIndeterminate?: boolean;
     disabled?: boolean;
-    size?: "sm" | "md" | "lg";
+    size?: "md" | "sm" | "lg";
     label?: string;
     testId?: string;
 }>, {
@@ -16,7 +16,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     isChecked: boolean;
     isIndeterminate?: boolean;
     disabled?: boolean;
-    size?: "sm" | "md" | "lg";
+    size?: "md" | "sm" | "lg";
     label?: string;
     testId?: string;
 }>, {
@@ -29,7 +29,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
 }, {
     label: string;
     testId: string;
-    size: "sm" | "md" | "lg";
+    size: "md" | "sm" | "lg";
 }>, {
     default?(_: {}): any;
 }>;

package/components/checkbox/v3/index.d.ts

@@ -5,7 +5,7 @@ declare const CheckboxTypes: () => ({
         $props: Partial<{
             label: string;
             testId: string;
-            size: "sm" | "md" | "lg";
+            size: "md" | "sm" | "lg";
         }> & Omit<Readonly<import("vue").ExtractPropTypes<{
             label: {
                 type: import("vue").PropType<string>;
@@ -19,7 +19,7 @@ declare const CheckboxTypes: () => ({
                 type: import("vue").PropType<boolean>;
             };
             size: {
-                type: import("vue").PropType<"sm" | "md" | "lg">;
+                type: import("vue").PropType<"md" | "sm" | "lg">;
                 default: string;
             };
             isIndeterminate: {
@@ -59,7 +59,7 @@ declare const CheckboxTypes: () => ({
                 type: import("vue").PropType<boolean>;
             };
             size: {
-                type: import("vue").PropType<"sm" | "md" | "lg">;
+                type: import("vue").PropType<"md" | "sm" | "lg">;
                 default: string;
             };
             isIndeterminate: {
@@ -78,7 +78,7 @@ declare const CheckboxTypes: () => ({
         }, string, {
             label: string;
             testId: string;
-            size: "sm" | "md" | "lg";
+            size: "md" | "sm" | "lg";
         }, {}, string> & {
             beforeCreate?: (() => void) | (() => void)[];
             created?: (() => void) | (() => void)[];
@@ -112,7 +112,7 @@ declare const CheckboxTypes: () => ({
             type: import("vue").PropType<boolean>;
         };
         size: {
-            type: import("vue").PropType<"sm" | "md" | "lg">;
+            type: import("vue").PropType<"md" | "sm" | "lg">;
             default: string;
         };
         isIndeterminate: {
@@ -142,7 +142,7 @@ declare const CheckboxTypes: () => ({
         type: import("vue").PropType<boolean>;
     };
     size: {
-        type: import("vue").PropType<"sm" | "md" | "lg">;
+        type: import("vue").PropType<"md" | "sm" | "lg">;
         default: string;
     };
     isIndeterminate: {
@@ -161,7 +161,7 @@ declare const CheckboxTypes: () => ({
 }, string, {
     label: string;
     testId: string;
-    size: "sm" | "md" | "lg";
+    size: "md" | "sm" | "lg";
 }, {}, string> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
     $slots: {
         default?(_: {}): any;

package/components/dateRange/v4/DateRangeV4.vue.js

@@ -1,7 +1,7 @@
 import e from "./DateRangeV4.vue2.js";
 /* empty css                  */import o from "../../../_virtual/_plugin-vue_export-helper.js";
-// import "../../../DateRangeV4.vue_vue_type_style_index_0_scoped_8a2714eb_lang.css"; //*');
-const s = /* @__PURE__ */ o(e, [["__scopeId", "data-v-8a2714eb"]]);
+// import "../../../DateRangeV4.vue_vue_type_style_index_0_scoped_a849128a_lang.css"; //*');
+const s = /* @__PURE__ */ o(e, [["__scopeId", "data-v-a849128a"]]);
 export {
   s as default
 };

package/components/dateRange/v4/DateRangeV4.vue2.js

@@ -1,4 +1,4 @@
- import "../../../DateRangeV4.vue_vue_type_style_index_0_scoped_8a2714eb_lang.css"; import { defineComponent as J, watch as Q, openBlock as n, createElementBlock as s, unref as e, normalizeClass as r, createElementVNode as d, renderSlot as x, createVNode as i, withDirectives as v, Fragment as k, renderList as C, withCtx as l, createTextVNode as m, toDisplayString as g, createCommentVNode as E, vShow as $, normalizeStyle as X, setBlockTracking as R } from "vue";
+ import "../../../DateRangeV4.vue_vue_type_style_index_0_scoped_a849128a_lang.css"; import { defineComponent as J, watch as Q, openBlock as n, createElementBlock as s, unref as e, normalizeClass as r, createElementVNode as d, renderSlot as x, createVNode as i, withDirectives as v, Fragment as k, renderList as C, withCtx as l, createTextVNode as m, toDisplayString as g, createCommentVNode as E, vShow as $, normalizeStyle as X, setBlockTracking as R } from "vue";
 import Z from "./CalendarMonthV4.vue.js";
 import { typeToName as _, messagePerType as ee } from "../common/consts.common.js";
 import A from "../../button/v4/ButtonV4.vue.js";

package/components/dialog/v4/DialogV4.vue.d.ts

@@ -1,4 +1,5 @@
 import { Reason } from '@/components/dialog/common/Reason';
+import { ButtonColor } from '@/components/button/common/consts';
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     modelValue: boolean;
     content?: string;
@@ -18,7 +19,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     showFooter?: boolean;
     saveButtonLabel?: string;
     saveButtonLoading?: boolean;
-    saveButtonColor?: string;
+    saveButtonColor?: ButtonColor;
     cancelButtonLabel?: string;
     cancelButtonColor?: string;
     testId?: string;
@@ -71,7 +72,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     showFooter?: boolean;
     saveButtonLabel?: string;
     saveButtonLoading?: boolean;
-    saveButtonColor?: string;
+    saveButtonColor?: ButtonColor;
     cancelButtonLabel?: string;
     cancelButtonColor?: string;
     testId?: string;
@@ -124,7 +125,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     showFooter: boolean;
     saveButtonLabel: string;
     saveButtonLoading: boolean;
-    saveButtonColor: string;
+    saveButtonColor: ButtonColor;
     cancelButtonLabel: string;
     cancelButtonColor: string;
     noPadding: boolean;

package/components/dialog/v4/DialogV4.vue.js

@@ -1,7 +1,7 @@
 import o from "./DialogV4.vue2.js";
-/* empty css               */import _ from "../../../_virtual/_plugin-vue_export-helper.js";
-// import "../../../DialogV4.vue_vue_type_style_index_0_scoped_37da643b_lang.css"; //*');
-const a = /* @__PURE__ */ _(o, [["__scopeId", "data-v-37da643b"]]);
+/* empty css               */import e from "../../../_virtual/_plugin-vue_export-helper.js";
+// import "../../../DialogV4.vue_vue_type_style_index_0_scoped_eb226e31_lang.css"; //*');
+const p = /* @__PURE__ */ e(o, [["__scopeId", "data-v-eb226e31"]]);
 export {
-  a as default
+  p as default
 };

package/components/dialog/v4/DialogV4.vue2.js

@@ -1,4 +1,4 @@
- import "../../../DialogV4.vue_vue_type_style_index_0_scoped_37da643b_lang.css"; import { defineComponent as L, openBlock as o, createBlock as u, Teleport as E, createVNode as A, Transition as P, withCtx as i, unref as t, createElementBlock as m, createElementVNode as y, mergeProps as s, renderSlot as k, createTextVNode as f, toDisplayString as B, createCommentVNode as l } from "vue";
+ import "../../../DialogV4.vue_vue_type_style_index_0_scoped_eb226e31_lang.css"; import { defineComponent as L, openBlock as o, createBlock as u, Teleport as E, createVNode as A, Transition as P, withCtx as i, unref as t, createElementBlock as m, createElementVNode as y, mergeProps as s, renderSlot as k, createTextVNode as f, toDisplayString as B, createCommentVNode as l } from "vue";
 import { NOOP as I } from "@vue/shared";
 import b from "../../typography/v4/Typography.vue.js";
 import O from "../../button/v4/ButtonV4.vue.js";

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

@@ -22,7 +22,7 @@ declare const DialogTypes: () => ({
             showFooter: boolean;
             saveButtonLabel: string;
             saveButtonLoading: boolean;
-            saveButtonColor: string;
+            saveButtonColor: import("../../button/common/consts").ButtonColor;
             cancelButtonLabel: string;
             cancelButtonColor: string;
             noPadding: boolean;
@@ -104,7 +104,7 @@ declare const DialogTypes: () => ({
                 default: boolean;
             };
             saveButtonColor: {
-                type: import("vue").PropType<string>;
+                type: import("vue").PropType<import("../../button/common/consts").ButtonColor>;
                 default: string;
             };
             cancelButtonLabel: {
@@ -217,7 +217,7 @@ declare const DialogTypes: () => ({
                 default: boolean;
             };
             saveButtonColor: {
-                type: import("vue").PropType<string>;
+                type: import("vue").PropType<import("../../button/common/consts").ButtonColor>;
                 default: string;
             };
             cancelButtonLabel: {
@@ -263,7 +263,7 @@ declare const DialogTypes: () => ({
             showFooter: boolean;
             saveButtonLabel: string;
             saveButtonLoading: boolean;
-            saveButtonColor: string;
+            saveButtonColor: import("../../button/common/consts").ButtonColor;
             cancelButtonLabel: string;
             cancelButtonColor: string;
             noPadding: boolean;
@@ -365,7 +365,7 @@ declare const DialogTypes: () => ({
             default: boolean;
         };
         saveButtonColor: {
-            type: import("vue").PropType<string>;
+            type: import("vue").PropType<import("../../button/common/consts").ButtonColor>;
             default: string;
         };
         cancelButtonLabel: {
@@ -468,7 +468,7 @@ declare const DialogTypes: () => ({
         default: boolean;
     };
     saveButtonColor: {
-        type: import("vue").PropType<string>;
+        type: import("vue").PropType<import("../../button/common/consts").ButtonColor>;
         default: string;
     };
     cancelButtonLabel: {
@@ -514,7 +514,7 @@ declare const DialogTypes: () => ({
     showFooter: boolean;
     saveButtonLabel: string;
     saveButtonLoading: boolean;
-    saveButtonColor: string;
+    saveButtonColor: import("../../button/common/consts").ButtonColor;
     cancelButtonLabel: string;
     cancelButtonColor: string;
     noPadding: boolean;