@ironsource/shared-ui 2.1.12-rc.16 → 2.1.12-rc.17

package/Chart.vue_vue_type_style_index_0_scoped_82f5b24e_lang.css

@@ -0,0 +1 @@
+.chart-container[data-v-82f5b24e]{border:1px solid var(--common-divider);background:var(--background-paper);display:flex;border-radius:0 0 6px 6px;width:100%}.chart-planes[data-v-82f5b24e]{width:100%;height:100%;overflow-y:auto}.chart-planes.with-legend[data-v-82f5b24e]{width:calc(100% - 221px)}.chart-planes .extra-chart-plane[data-v-82f5b24e]{border-top:1px solid var(--common-divider)}.chart-sidebar[data-v-82f5b24e]{border-left:1px solid var(--common-divider)}

package/ChartHeader.vue_vue_type_style_index_0_scoped_da34b108_lang.css

@@ -0,0 +1 @@
+.chart-header[data-v-da34b108]{display:flex;align-items:center;justify-content:space-between;padding:24px 24px 0}.chart-header--compact[data-v-da34b108]{padding-top:22px}.chart-header--compact .header-texts[data-v-da34b108]{flex-direction:row}.chart-header--compact .header-text[data-v-da34b108]{color:var(--text-secondary)}.header-row[data-v-da34b108]{display:flex;align-items:flex-end;gap:4px}.header-texts[data-v-da34b108]{display:flex;flex-direction:column;color:var(--text-primary);gap:4px;cursor:default}

package/ChartHeaderTrend.vue_vue_type_style_index_0_scoped_79dc2883_lang.css

@@ -0,0 +1 @@
+.chart-trend[data-v-79dc2883]{display:flex}.chart-trend--up[data-v-79dc2883]{color:var(--success-contrast-text)}.chart-trend--up .trend-icon[data-v-79dc2883]{color:var(--success-darker)}.chart-trend--down[data-v-79dc2883]{color:var(--error-contrast-text)}.chart-trend--down .trend-icon[data-v-79dc2883]{color:var(--error-dark)}.chart-trend--right[data-v-79dc2883]{color:var(--warning-contrast-text)}.chart-trend--right .trend-icon[data-v-79dc2883]{color:var(--warning-dark)}.trend-icon[data-v-79dc2883]{display:flex;align-self:normal}.chart-trend-tooltip[data-v-79dc2883]{align-items:normal}.trend-tooltip[data-v-79dc2883]{display:flex;flex-direction:column}.trend-tooltip__header[data-v-79dc2883]{margin-bottom:.375rem}.trend-tooltip__text[data-v-79dc2883]{color:var(--text-secondary)}.separator[data-v-79dc2883]{display:flex;align-items:center;gap:.5rem;justify-content:center;height:1.1875rem}.separator__text[data-v-79dc2883]{display:block;color:var(--text-secondary)}.separator hr[data-v-79dc2883]{width:100%;height:1px;border:0;background:var(--common-divider)}

package/ChartPlane.vue_vue_type_style_index_0_scoped_5c80d8cd_lang.css

@@ -0,0 +1 @@
+.chart-plane-container[data-v-5c80d8cd]{--headerHeight: var(--1ae03326);width:100%;height:var(--42303d50);position:relative}.header-wrapper[data-v-5c80d8cd]{position:absolute;width:100%;height:var(--headerHeight);top:0;z-index:1}.chart-plane[data-v-5c80d8cd]{padding-top:var(--headerHeight);height:100%}.chart[data-v-5c80d8cd]{width:100%;height:100%;position:relative}.chart__canvas[data-v-5c80d8cd]{width:100%;height:100%}.chart__tooltip[data-v-5c80d8cd]{position:absolute;pointer-events:none;transition:all .1s ease;min-width:214px;max-width:270px;z-index:1}

package/ChartTooltip.vue_vue_type_style_index_0_scoped_9e521454_lang.css

@@ -0,0 +1 @@
+.chart-tooltip[data-v-9e521454]{color:var(--text-primary);background:var(--common-white);box-shadow:0 4px 8px -2px #1018281f;border:1px solid var(--common-divider-elevation-0);border-radius:var(--border-radius-md);width:280px;padding:calc(var(--spacing-100) - 1px)}.color-box[data-v-9e521454]{width:12px;height:12px;border-radius:2px;display:inline-block;margin-right:var(--spacing-100)}.color-box+.platform-icon[data-v-9e521454]{margin-left:calc(var(--spacing-50) - var(--spacing-100))}.list[data-v-9e521454]{list-style:none;margin:0;padding:0}.list__item[data-v-9e521454]{display:flex;align-items:center;margin-bottom:var(--spacing-50);color:var(--text-secondary)}.list__item[data-v-9e521454]:last-child{margin-bottom:0}.platform-icon[data-v-9e521454]{color:var(--action-active);margin-right:var(--spacing-50)}.popover-label-wrapper[data-v-9e521454]{display:flex;width:200px;flex-grow:1}.truncated-label[data-v-9e521454]{max-width:90%}.tooltip-footer[data-v-9e521454]{display:flex;align-items:center;margin-top:var(--spacing-100);color:var(--text-primary)}.flex-grow[data-v-9e521454]{flex-grow:1}

package/SubHeader.vue_vue_type_style_index_0_scoped_e6008b6c_lang.css

@@ -0,0 +1 @@
+.header-row[data-v-e6008b6c]{display:flex;align-items:flex-end;gap:4px}.subheader[data-v-e6008b6c]{color:var(--text-secondary)}.subheader-tooltip[data-v-e6008b6c]{display:flex;flex-direction:column;gap:.25rem}.subheader-tooltip__text[data-v-e6008b6c]{color:var(--text-secondary)}

package/TooltipHeader.vue_vue_type_style_index_0_scoped_9f6cf389_lang.css

@@ -0,0 +1 @@
+.tooltip-title-wrapper[data-v-9f6cf389]{display:flex;flex-direction:column;color:var(--text-primary);margin-bottom:var(--spacing-100)}.tooltip-title-wrapper .main-title[data-v-9f6cf389]{display:flex;align-items:center;gap:.25rem}.tooltip-title-wrapper .title-text[data-v-9f6cf389]{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.tooltip-title-wrapper .title-image[data-v-9f6cf389]{width:20px;height:20px;border-radius:4px}.tooltip-title-wrapper .tooltip-sub-title[data-v-9f6cf389]{color:var(--text-secondary)}.tooltip-title-wrapper .platform-icon[data-v-9f6cf389]{color:var(--action-active)}

package/components/chart/Chart.vue.d.ts

@@ -1,4 +1,4 @@
-import { ChartDataSet, ChartParsingConfig, ChartType, ValueFormat } from './types';
+import { ChartDataSet, ChartParsingConfig, ChartType, TooltipOrder, TrendDirection, ValueFormat } from './types';
 import { TotalType } from '@/utils/totals';
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     dataSets: ChartDataSet[];
@@ -14,14 +14,16 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     totalsChart?: boolean;
     tooltipTotalType?: TotalType;
     tooltipTotalCalcFn?: (values: number[], totalType: TotalType) => number;
+    tooltipOrder?: TooltipOrder;
     header?: string;
     subheader?: string;
     subheaderTooltip?: {
         header?: string;
         text?: string;
     };
+    keepSubheaderVisible?: boolean;
     trendValue?: string | number;
-    trendDirection?: "up" | "down";
+    trendDirection?: TrendDirection;
     trendTooltip?: {
         header?: string;
         rangeCurrent?: string;
@@ -54,11 +56,13 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     totalsChart: boolean;
     tooltipTotalType: TotalType;
     tooltipTotalCalcFn: (values: number[], totalType: TotalType) => number;
+    tooltipOrder: TooltipOrder;
     header: string;
     subheader: string;
     subheaderTooltip: any;
+    keepSubheaderVisible: boolean;
     trendValue: any;
-    trendDirection: string;
+    trendDirection: TrendDirection;
     trendTooltip: any;
     noDataIcon: string;
     noDataTitle: string;
@@ -91,14 +95,16 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     totalsChart?: boolean;
     tooltipTotalType?: TotalType;
     tooltipTotalCalcFn?: (values: number[], totalType: TotalType) => number;
+    tooltipOrder?: TooltipOrder;
     header?: string;
     subheader?: string;
     subheaderTooltip?: {
         header?: string;
         text?: string;
     };
+    keepSubheaderVisible?: boolean;
     trendValue?: string | number;
-    trendDirection?: "up" | "down";
+    trendDirection?: TrendDirection;
     trendTooltip?: {
         header?: string;
         rangeCurrent?: string;
@@ -131,11 +137,13 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     totalsChart: boolean;
     tooltipTotalType: TotalType;
     tooltipTotalCalcFn: (values: number[], totalType: TotalType) => number;
+    tooltipOrder: TooltipOrder;
     header: string;
     subheader: string;
     subheaderTooltip: any;
+    keepSubheaderVisible: boolean;
     trendValue: any;
-    trendDirection: string;
+    trendDirection: TrendDirection;
     trendTooltip: any;
     noDataIcon: string;
     noDataTitle: string;
@@ -175,15 +183,17 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     subheader: string;
     subheaderTooltip: any;
     trendValue: string | number;
-    trendDirection: "up" | "down";
+    trendDirection: TrendDirection;
     tickCount: number;
     truncateTickLabels: boolean;
+    keepSubheaderVisible: boolean;
     noDataIcon: string;
     noDataTitle: string;
     noDataSubtitle: string;
     withAnimation: boolean;
     tooltipTotalType: TotalType;
     tooltipTotalCalcFn: (values: number[], totalType: TotalType) => number;
+    tooltipOrder: TooltipOrder;
     fullHeight: boolean;
     withSettingsHeader: boolean;
     extraCharts: Record<string, unknown>[];

package/components/chart/Chart.vue.js

@@ -1,7 +1,7 @@
-import e from "./Chart.vue2.js";
-/* empty css            */import o from "../../_virtual/_plugin-vue_export-helper.js";
-// import "../../Chart.vue_vue_type_style_index_0_scoped_4e9ce62f_lang.css"; //*');
-const c = /* @__PURE__ */ o(e, [["__scopeId", "data-v-4e9ce62f"]]);
+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_82f5b24e_lang.css"; //*');
+const p = /* @__PURE__ */ e(o, [["__scopeId", "data-v-82f5b24e"]]);
 export {
-  c as default
+  p as default
 };

package/components/chart/Chart.vue2.js

@@ -1,17 +1,17 @@
- import "../../Chart.vue_vue_type_style_index_0_scoped_4e9ce62f_lang.css"; import { defineComponent as E, ref as N, computed as n, openBlock as s, createElementBlock as f, Fragment as x, createBlock as I, unref as l, isRef as y, withCtx as d, renderSlot as u, createCommentVNode as L, createElementVNode as k, mergeProps as g, normalizeClass as M, createVNode as D, createSlots as P, renderList as O } from "vue";
+ import "../../Chart.vue_vue_type_style_index_0_scoped_82f5b24e_lang.css"; import { defineComponent as O, ref as E, computed as n, openBlock as s, createElementBlock as m, Fragment as x, createBlock as k, unref as l, isRef as y, withCtx as d, renderSlot as u, createCommentVNode as I, createElementVNode as L, mergeProps as b, normalizeClass as N, createVNode as D, createSlots as P, renderList as M } from "vue";
 import { useVModel as F } from "@vueuse/core";
 import $ from "./ChartLegend.vue.js";
 import K from "./SettingsHeader.vue.js";
-import w from "./ChartPlane.vue.js";
+import V from "./ChartPlane.vue.js";
 import { useColorsMap as z } from "./composables/useColorsMap.js";
 import { DEFAULT_TICK_COUNT as R, DEFAULT_MIN_VISIBLE as X, DEFAULT_MAX_VISIBLE as j } from "./consts.js";
-import { ChartType as q } from "./types.js";
-import { useChartHeight as G } from "./composables/useChartHeight.js";
-import { TotalType as J, calculateTotal as Q } from "../../utils/totals.js";
-const W = {
+import { ChartType as q, TooltipOrder as G, TrendDirection as J } from "./types.js";
+import { useChartHeight as Q } from "./composables/useChartHeight.js";
+import { TotalType as W, calculateTotal as Y } from "../../utils/totals.js";
+const Z = {
   key: 0,
   class: "chart-sidebar"
-}, nt = /* @__PURE__ */ E({
+}, de = /* @__PURE__ */ O({
   __name: "Chart",
   props: {
     dataSets: { default: () => [] },
@@ -25,13 +25,15 @@ const W = {
     loading: { type: Boolean, default: !1 },
     withAnimation: { type: Boolean, default: !0 },
     totalsChart: { type: Boolean, default: !1 },
-    tooltipTotalType: { default: J.Total },
-    tooltipTotalCalcFn: { type: Function, default: Q },
+    tooltipTotalType: { default: W.Total },
+    tooltipTotalCalcFn: { type: Function, default: Y },
+    tooltipOrder: { default: G.Legend },
     header: { default: "" },
     subheader: { default: "" },
     subheaderTooltip: { default: null },
+    keepSubheaderVisible: { type: Boolean, default: !1 },
     trendValue: { default: null },
-    trendDirection: { default: "up" },
+    trendDirection: { default: J.UP },
     trendTooltip: { default: null },
     noDataIcon: { default: "file-search" },
     noDataTitle: { default: "No data to display" },
@@ -49,99 +51,101 @@ const W = {
   },
   emits: ["update:chartType", "update:visibleIds", "update:sortSelected"],
   setup(i, { emit: p }) {
-    const t = i, r = F(t, "chartType", p), c = F(t, "sortSelected", p), h = N(null), T = n(() => ({
-      dataSets: t.dataSets,
-      visibleIds: t.visibleIds,
-      parsing: t.parsing,
-      xAxisFormat: t.xAxisFormat,
-      yAxisFormat: t.yAxisFormat,
-      tickCount: t.tickCount,
-      truncateTickLabels: t.truncateTickLabels,
-      header: t.header,
-      subheader: t.subheader,
-      loading: t.loading,
-      noDataIcon: t.noDataIcon,
-      noDataTitle: t.noDataTitle,
-      noDataSubtitle: t.noDataSubtitle,
-      withAnimation: t.withAnimation,
-      typeSwitcher: !t.withSettingsHeader,
+    const e = i, r = F(e, "chartType", p), h = F(e, "sortSelected", p), c = E(null), g = n(() => ({
+      dataSets: e.dataSets,
+      visibleIds: e.visibleIds,
+      parsing: e.parsing,
+      xAxisFormat: e.xAxisFormat,
+      yAxisFormat: e.yAxisFormat,
+      tickCount: e.tickCount,
+      truncateTickLabels: e.truncateTickLabels,
+      header: e.header,
+      subheader: e.subheader,
+      loading: e.loading,
+      noDataIcon: e.noDataIcon,
+      noDataTitle: e.noDataTitle,
+      noDataSubtitle: e.noDataSubtitle,
+      withAnimation: e.withAnimation,
+      typeSwitcher: !e.withSettingsHeader,
       height: U.value,
       compactHeader: C.value > 1,
-      trendValue: t.trendValue,
-      trendDirection: t.trendDirection,
-      trendTooltip: t.trendTooltip,
-      totalsChart: t.totalsChart,
-      subheaderTooltip: t.subheaderTooltip,
-      colorsMap: m.value,
-      tooltipTotalType: t.tooltipTotalType,
-      tooltipTotalCalcFn: t.tooltipTotalCalcFn,
-      highlightedId: h.value
-    })), A = n(() => t.dataSets), b = n(() => t.visibleIds), v = n(() => t.extraCharts.length), C = n(() => 1 + v.value), B = (e) => e === v.value - 1, { colorsMap: m } = z({
-      dataSets: A,
-      visibleIds: b
-    }), V = n(() => t.dataSets.map((e) => ({
-      id: e.id,
-      label: e.label,
-      caption: e.caption || null,
-      color: m.value[e.id] || null,
-      icon: e.icon || null,
-      iconType: e.iconType || "branded"
-    }))), { containerProps: H, eachPlaneHeight: U } = G({
+      trendValue: e.trendValue,
+      trendDirection: e.trendDirection,
+      trendTooltip: e.trendTooltip,
+      totalsChart: e.totalsChart,
+      subheaderTooltip: e.subheaderTooltip,
+      keepSubheaderVisible: e.keepSubheaderVisible,
+      colorsMap: f.value,
+      tooltipTotalType: e.tooltipTotalType,
+      tooltipTotalCalcFn: e.tooltipTotalCalcFn,
+      tooltipOrder: e.tooltipOrder,
+      highlightedId: c.value
+    })), w = n(() => e.dataSets), T = n(() => e.visibleIds), v = n(() => e.extraCharts.length), C = n(() => 1 + v.value), A = (t) => t === v.value - 1, { colorsMap: f } = z({
+      dataSets: w,
+      visibleIds: T
+    }), B = n(() => e.dataSets.map((t) => ({
+      id: t.id,
+      label: t.label,
+      caption: t.caption || null,
+      color: f.value[t.id] || null,
+      icon: t.icon || null,
+      iconType: t.iconType || "branded"
+    }))), { containerProps: H, eachPlaneHeight: U } = Q({
       chartPlanesCount: C,
-      useFullHeight: t.fullHeight
+      useFullHeight: e.fullHeight
     });
-    return (e, o) => (s(), f(x, null, [
-      i.withSettingsHeader ? (s(), I(K, {
+    return (t, o) => (s(), m(x, null, [
+      i.withSettingsHeader ? (s(), k(K, {
         key: 0,
         "chart-type": l(r),
         "onUpdate:chart-type": o[0] || (o[0] = (a) => y(r) ? r.value = a : null),
         "hide-legend": i.hideLegend
       }, {
         "before-chart-type": d(() => [
-          u(e.$slots, "before-chart-type", {}, void 0, !0)
+          u(t.$slots, "before-chart-type", {}, void 0, !0)
         ]),
         metric: d(() => [
-          u(e.$slots, "metric", {}, void 0, !0)
+          u(t.$slots, "metric", {}, void 0, !0)
         ]),
         breakdowns: d(() => [
-          u(e.$slots, "breakdowns", {}, void 0, !0)
+          u(t.$slots, "breakdowns", {}, void 0, !0)
         ]),
         _: 3
-      }, 8, ["chart-type", "hide-legend"])) : L("", !0),
-      k("div", g({ class: "chart-container" }, l(H)), [
-        k("section", {
-          class: M(["chart-planes", [{ "with-legend": !i.hideLegend }]])
+      }, 8, ["chart-type", "hide-legend"])) : I("", !0),
+      L("div", b({ class: "chart-container" }, l(H)), [
+        L("section", {
+          class: N(["chart-planes", [{ "with-legend": !i.hideLegend }]])
         }, [
-          D(w, g({
+          D(V, b({
             "chart-type": l(r),
             "onUpdate:chart-type": o[1] || (o[1] = (a) => y(r) ? r.value = a : null)
-          }, l(T)), P({ _: 2 }, [
-            e.$slots["subheader-tooltip"] ? {
+          }, l(g)), P({ _: 2 }, [
+            t.$slots["subheader-tooltip"] ? {
               name: "subheader-tooltip",
               fn: d(() => [
-                u(e.$slots, "subheader-tooltip", {}, void 0, !0)
+                u(t.$slots, "subheader-tooltip", {}, void 0, !0)
               ]),
               key: "0"
             } : void 0
           ]), 1040, ["chart-type"]),
-          (s(!0), f(x, null, O(i.extraCharts, (a, S) => (s(), I(w, g({
+          (s(!0), m(x, null, M(i.extraCharts, (a, S) => (s(), k(V, b({
             key: S,
             class: "extra-chart-plane"
-          }, { ...l(T), ...a }, {
+          }, { ...l(g), ...a }, {
             "chart-type": l(r),
-            "colors-map": l(m),
+            "colors-map": l(f),
             "type-switcher": !1,
-            "tooltip-respects-top-edge": !B(S)
+            "tooltip-respects-top-edge": !A(S)
           }), null, 16, ["chart-type", "colors-map", "tooltip-respects-top-edge"]))), 128))
         ], 2),
-        i.hideLegend ? L("", !0) : (s(), f("section", W, [
+        i.hideLegend ? I("", !0) : (s(), m("section", Z, [
           D($, {
-            "sort-selected": l(c),
-            "onUpdate:sort-selected": o[2] || (o[2] = (a) => y(c) ? c.value = a : null),
-            "highlighted-id": h.value,
-            "onUpdate:highlighted-id": o[3] || (o[3] = (a) => h.value = a),
-            items: l(V),
-            "visible-ids": l(b),
+            "sort-selected": l(h),
+            "onUpdate:sort-selected": o[2] || (o[2] = (a) => y(h) ? h.value = a : null),
+            "highlighted-id": c.value,
+            "onUpdate:highlighted-id": o[3] || (o[3] = (a) => c.value = a),
+            items: l(B),
+            "visible-ids": l(T),
             "max-limit-tooltip-text": i.maxLimitTooltipText,
             "sort-options": i.sortOptions,
             "sort-option-name-key": i.sortOptionNameKey,
@@ -153,5 +157,5 @@ const W = {
   }
 });
 export {
-  nt as default
+  de as default
 };

package/components/chart/ChartHeader.vue.d.ts

@@ -1,4 +1,4 @@
-import { ChartType } from '@/components/chart/types';
+import { ChartType, TrendDirection } from '@/components/chart/types';
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     chartType: ChartType;
     typeSwitcher: boolean;
@@ -15,7 +15,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     };
     compact: boolean;
     trendValue?: string | number;
-    trendDirection?: "up" | "down";
+    trendDirection?: TrendDirection;
 }>, {
     chartType: ChartType;
     typeSwitcher: boolean;
@@ -25,7 +25,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     trendTooltip: any;
     compact: boolean;
     trendValue: any;
-    trendDirection: string;
+    trendDirection: TrendDirection;
 }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:chartType": (type: ChartType) => void;
 }, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
@@ -44,7 +44,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     };
     compact: boolean;
     trendValue?: string | number;
-    trendDirection?: "up" | "down";
+    trendDirection?: TrendDirection;
 }>, {
     chartType: ChartType;
     typeSwitcher: boolean;
@@ -54,7 +54,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     trendTooltip: any;
     compact: boolean;
     trendValue: any;
-    trendDirection: string;
+    trendDirection: TrendDirection;
 }>>> & {
     "onUpdate:chartType"?: (type: ChartType) => any;
 }, {
@@ -62,11 +62,11 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     compact: boolean;
     chartType: ChartType;
     trendTooltip: any;
-    typeSwitcher: boolean;
     subheader: string;
     subheaderTooltip: any;
+    typeSwitcher: boolean;
     trendValue: string | number;
-    trendDirection: "up" | "down";
+    trendDirection: TrendDirection;
 }>, {
     "subheader-tooltip"?(_: {}): any;
 }>;

package/components/chart/ChartHeader.vue.js

@@ -1,7 +1,7 @@
 import e from "./ChartHeader.vue2.js";
 /* empty css                  */import o from "../../_virtual/_plugin-vue_export-helper.js";
-// import "../../ChartHeader.vue_vue_type_style_index_0_scoped_1ff0e54f_lang.css"; //*');
-const f = /* @__PURE__ */ o(e, [["__scopeId", "data-v-1ff0e54f"]]);
+// import "../../ChartHeader.vue_vue_type_style_index_0_scoped_da34b108_lang.css"; //*');
+const r = /* @__PURE__ */ o(e, [["__scopeId", "data-v-da34b108"]]);
 export {
-  f as default
+  r as default
 };

package/components/chart/ChartHeader.vue2.js

@@ -1,13 +1,13 @@
- import "../../ChartHeader.vue_vue_type_style_index_0_scoped_1ff0e54f_lang.css"; import { defineComponent as B, useSlots as g, computed as m, openBlock as r, createElementBlock as N, normalizeClass as D, createElementVNode as n, createVNode as f, unref as t, withCtx as o, renderSlot as L, createBlock as d, createTextVNode as u, toDisplayString as c, createCommentVNode as i, normalizeProps as v, mergeProps as V, isRef as P } from "vue";
-import s from "../typography/v4/Typography.vue.js";
-import z from "../switch/v4/SwitchV4.vue.js";
-import { ChartType as h } from "./types.js";
-import E from "../tooltip/v4/TooltipV4.vue.js";
-import k from "./ChartHeaderTrend.vue.js";
-const H = { class: "header-texts" }, O = { class: "header-row" }, R = { class: "subheader-tooltip" }, U = { class: "header-row" }, I = /* @__PURE__ */ B({
+ import "../../ChartHeader.vue_vue_type_style_index_0_scoped_da34b108_lang.css"; import { defineComponent as k, computed as h, openBlock as o, createElementBlock as S, normalizeClass as w, createElementVNode as m, createVNode as p, createSlots as C, withCtx as f, renderSlot as B, unref as a, createTextVNode as g, toDisplayString as x, createBlock as n, normalizeProps as y, mergeProps as T, createCommentVNode as i, isRef as D } from "vue";
+import N from "../typography/v4/Typography.vue.js";
+import P from "../switch/v4/SwitchV4.vue.js";
+import { ChartType as d, TrendDirection as H } from "./types.js";
+import b from "./ChartHeaderTrend.vue.js";
+import L from "./SubHeader.vue.js";
+const z = { class: "header-texts" }, E = { class: "header-row" }, A = /* @__PURE__ */ k({
   __name: "ChartHeader",
   props: {
-    chartType: { default: h.Line },
+    chartType: { default: d.Line },
     typeSwitcher: { type: Boolean, default: !0 },
     header: { default: "" },
     subheader: { default: "" },
@@ -15,97 +15,66 @@ const H = { class: "header-texts" }, O = { class: "header-row" }, R = { class: "
     trendTooltip: { default: null },
     compact: { type: Boolean, default: !1 },
     trendValue: { default: null },
-    trendDirection: { default: "up" }
+    trendDirection: { default: H.UP }
   },
   emits: ["update:chartType"],
-  setup(e, { emit: x }) {
-    const a = e, S = g(), T = [
-      { id: h.Line, icon: "chart-line-up" },
-      { id: h.Bar, icon: "chart-bar" },
-      { id: h.StackedLine, icon: "chart-line" }
-    ], p = m({
+  setup(e, { emit: V }) {
+    const r = e, c = [
+      { id: d.Line, icon: "chart-line-up" },
+      { id: d.Bar, icon: "chart-bar" },
+      { id: d.StackedLine, icon: "chart-line" }
+    ], l = h({
       get() {
-        return T.find(({ id: l }) => l === a.chartType);
+        return c.find(({ id: t }) => t === r.chartType);
       },
-      set(l) {
-        x("update:chartType", l.id);
+      set(t) {
+        V("update:chartType", t.id);
       }
-    }), C = m(() => S["subheader-tooltip"] || a.subheaderTooltip?.text || a.subheaderTooltip?.header), y = m(() => ({
-      value: a.trendValue,
-      direction: a.trendDirection,
-      trendTooltip: a.trendTooltip
+    }), u = h(() => ({
+      value: r.trendValue,
+      direction: r.trendDirection,
+      trendTooltip: r.trendTooltip
     }));
-    return (l, b) => (r(), N("div", {
-      class: D(["chart-header", { "chart-header--compact": e.compact }])
+    return (t, s) => (o(), S("div", {
+      class: w(["chart-header", { "chart-header--compact": e.compact }])
     }, [
-      n("div", H, [
-        n("div", O, [
-          f(t(E), {
-            placement: "right",
-            disabled: !t(C)
-          }, {
-            tooltip: o(() => [
-              L(l.$slots, "subheader-tooltip", {}, () => [
-                n("div", R, [
-                  e.subheaderTooltip?.header ? (r(), d(t(s), {
-                    key: 0,
-                    variant: "h5"
-                  }, {
-                    default: o(() => [
-                      u(c(e.subheaderTooltip.header), 1)
-                    ]),
-                    _: 1
-                  })) : i("", !0),
-                  e.subheaderTooltip?.text ? (r(), d(t(s), {
-                    key: 1,
-                    variant: "body2",
-                    class: "subheader-tooltip__text"
-                  }, {
-                    default: o(() => [
-                      u(c(e.subheaderTooltip.text), 1)
-                    ]),
-                    _: 1
-                  })) : i("", !0)
-                ])
-              ], !0)
-            ]),
-            default: o(() => [
-              f(t(s), {
-                class: "subheader",
-                variant: "h5"
-              }, {
-                default: o(() => [
-                  u(c(e.subheader + (e.compact ? ":" : "")), 1)
-                ]),
-                _: 1
-              })
+      m("div", z, [
+        p(L, {
+          subheader: e.subheader,
+          "subheader-tooltip": e.subheaderTooltip,
+          "show-separator": e.compact && (!!e.header || !!e.trendValue)
+        }, C({ _: 2 }, [
+          t.$slots["subheader-tooltip"] ? {
+            name: "subheader-tooltip",
+            fn: f(() => [
+              B(t.$slots, "subheader-tooltip", {}, void 0, !0)
             ]),
-            _: 3
-          }, 8, ["disabled"])
-        ]),
-        n("div", U, [
-          f(t(s), {
+            key: "0"
+          } : void 0
+        ]), 1032, ["subheader", "subheader-tooltip", "show-separator"]),
+        m("div", E, [
+          p(a(N), {
             class: "header-text",
             variant: e.compact ? "h5" : "chart2"
           }, {
-            default: o(() => [
-              u(c(e.header), 1)
+            default: f(() => [
+              g(x(e.header), 1)
             ]),
             _: 1
           }, 8, ["variant"]),
-          !e.compact && e.trendValue !== null ? (r(), d(k, v(V({ key: 0 }, t(y))), null, 16)) : i("", !0)
+          !e.compact && e.trendValue !== null ? (o(), n(b, y(T({ key: 0 }, a(u))), null, 16)) : i("", !0)
         ]),
-        e.compact && e.trendValue !== null ? (r(), d(k, v(V({ key: 0 }, t(y))), null, 16)) : i("", !0)
+        e.compact && e.trendValue !== null ? (o(), n(b, y(T({ key: 0 }, a(u))), null, 16)) : i("", !0)
       ]),
-      e.typeSwitcher ? (r(), d(t(z), {
+      e.typeSwitcher ? (o(), n(a(P), {
         key: 0,
-        modelValue: t(p),
-        "onUpdate:modelValue": b[0] || (b[0] = (w) => P(p) ? p.value = w : null),
-        options: T
+        modelValue: a(l),
+        "onUpdate:modelValue": s[0] || (s[0] = (v) => D(l) ? l.value = v : null),
+        options: c
       }, null, 8, ["modelValue"])) : i("", !0)
     ], 2));
   }
 });
 export {
-  I as default
+  A as default
 };

package/components/chart/ChartHeaderTrend.vue.d.ts

@@ -1,6 +1,7 @@
+import { TrendDirection } from '@/components/chart/types';
 declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     value?: number | string;
-    direction?: 'up' | 'down';
+    direction?: TrendDirection;
     trendTooltip?: {
         header?: string;
         rangeCurrent?: string;
@@ -8,11 +9,11 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     };
 }>, {
     value: any;
-    direction: string;
+    direction: TrendDirection;
     trendTooltip: any;
 }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     value?: number | string;
-    direction?: 'up' | 'down';
+    direction?: TrendDirection;
     trendTooltip?: {
         header?: string;
         rangeCurrent?: string;
@@ -20,11 +21,11 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     };
 }>, {
     value: any;
-    direction: string;
+    direction: TrendDirection;
     trendTooltip: any;
 }>>>, {
     value: number | string;
-    direction: 'up' | 'down';
+    direction: TrendDirection;
     trendTooltip: any;
 }>;
 export default _default;

package/components/chart/ChartHeaderTrend.vue.js

@@ -1,7 +1,7 @@
 import e from "./ChartHeaderTrend.vue2.js";
 /* empty css                       */import o from "../../_virtual/_plugin-vue_export-helper.js";
-// import "../../ChartHeaderTrend.vue_vue_type_style_index_0_scoped_21ce0774_lang.css"; //*');
-const s = /* @__PURE__ */ o(e, [["__scopeId", "data-v-21ce0774"]]);
+// import "../../ChartHeaderTrend.vue_vue_type_style_index_0_scoped_79dc2883_lang.css"; //*');
+const d = /* @__PURE__ */ o(e, [["__scopeId", "data-v-79dc2883"]]);
 export {
-  s as default
+  d as default
 };