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

package/Chart.vue_vue_type_style_index_0_scoped_03771fa3_lang.css

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

package/ChartHeaderTrend.vue_vue_type_style_index_0_scoped_ebc0c582_lang.css

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

package/DataGrid.vue_vue_type_style_index_0_scoped_086c5b0d_lang.css

@@ -0,0 +1 @@
+.sticky[data-v-086c5b0d]{position:sticky}.table-container[data-v-086c5b0d]{width:100%;position:relative;display:flex;flex-direction:column}.table-header[data-v-086c5b0d]{display:flex;align-items:center;height:calc(var(--spacing-800) - 1px);border-bottom:1px solid var(--common-divider);background-color:var(--background-paper-elevation-0);position:sticky;left:0;padding:var(--spacing-300)}.table-header .table-title[data-v-086c5b0d]{display:flex;flex:1;align-items:center;justify-content:flex-start;height:100%;color:var(--text-primary)}.table-header .table-header-right[data-v-086c5b0d]{display:flex;align-items:center;height:100%}.table-header .search-wrapper[data-v-086c5b0d]{width:13.75rem}.table-header.isStickyHeader[data-v-086c5b0d]{z-index:calc(var(--93d4ced6) + 3);top:0}.table-head-container[data-v-086c5b0d]{display:flex;align-items:center;white-space:nowrap;color:var(--text-primary)}.table-footer[data-v-086c5b0d]{color:var(--text-primary);background-color:var(--background-paper-elevation-0);padding:0 var(--spacing-300);display:flex;align-items:center;min-height:var(--spacing-600);border:1px solid var(--common-divider);border-radius:var(--border-radius-md);border-top-right-radius:0;border-top-left-radius:0}.table-body-wrapper[data-v-086c5b0d]{display:inline-table}.table-header-pre-search-content[data-v-086c5b0d]{margin-right:var(--spacing-100);display:flex;align-items:center}.table-header-actions[data-v-086c5b0d]{margin-left:var(--spacing-100);display:flex;align-items:center}.table-row[data-v-086c5b0d]{position:relative}.table-row.loading[data-v-086c5b0d]{opacity:.7}.table-row:not(.expanded):last-child>td[data-v-086c5b0d]{border-bottom:none}.table-row.expanded:last-child>.expanded-row[data-v-086c5b0d]{border-bottom:none}.expanded-row[data-v-086c5b0d]{grid-column:var(--1799c749);border-bottom:1px solid var(--common-divider);background-color:var(--background-default)}table[data-v-086c5b0d]{position:relative;display:block;overflow:auto;background:var(--background-paper-elevation-0);border:1px solid var(--common-divider);color:var(--text-primary);text-align:left;table-layout:fixed;width:100%;max-height:100%;border-radius:var(--border-radius-md);border-collapse:collapse;border-spacing:0}table.hasFooter[data-v-086c5b0d]{border-bottom-left-radius:0;border-bottom-right-radius:0;border-bottom:none}table td[data-v-086c5b0d],table th[data-v-086c5b0d]{line-height:normal;padding:0 var(--spacing-200)}table td[data-v-086c5b0d]:first-of-type,table th[data-v-086c5b0d]:first-of-type{padding-left:var(--spacing-300)}table td[data-v-086c5b0d]:last-of-type,table th[data-v-086c5b0d]:last-of-type{padding-right:var(--spacing-300)}table td.expand-toggle-cell[data-v-086c5b0d],table th.expand-toggle-cell[data-v-086c5b0d]{padding-left:var(--spacing-150);padding-right:var(--spacing-75)}table>thead[data-v-086c5b0d]{border-bottom:none;z-index:calc(var(--93d4ced6) + 1);display:inline-table;min-width:100%}table>thead>tr[data-v-086c5b0d]{color:var(--text-primary);border-bottom:1px solid var(--common-divider);height:var(--spacing-500);display:grid;grid-template-columns:var(--60112c02)}table>thead>tr>th[data-v-086c5b0d]{background:var(--background-paper-elevation-0);width:100%;display:flex;align-items:center;cursor:default}table>thead>tr>th.isSortable[data-v-086c5b0d]{cursor:pointer}table>thead>tr>td[data-v-086c5b0d]{display:flex;align-items:center}table>thead>tr>th.bordered[data-v-086c5b0d],table>thead>tr>td.bordered[data-v-086c5b0d]{border-right:1px solid var(--common-divider)}table>thead>tr>th.bordered.isStickyRight[data-v-086c5b0d],table>thead>tr>td.bordered.isStickyRight[data-v-086c5b0d]{border-right:none;border-left:1px solid var(--common-divider)}table>thead>tr>th.isTextRight[data-v-086c5b0d],table>thead>tr>td.isTextRight[data-v-086c5b0d]{justify-content:flex-end}table>thead.sticky[data-v-086c5b0d]{position:sticky;top:0;background:var(--background-default)}table>thead.isStickyHeader[data-v-086c5b0d]{z-index:calc(var(--93d4ced6) + 2);top:calc(var(--spacing-800) - 1px)}table .totals-row[data-v-086c5b0d]{height:40px}table .totals-row[data-v-086c5b0d]:hover{background:var(--background-paper-elevation-1)}table>tbody[data-v-086c5b0d]{display:block}table>tbody>*>tr[data-v-086c5b0d]{background-color:var(--background-default);height:auto;display:grid;align-items:center;grid-template-columns:var(--60112c02)}table>tbody>*>tr:nth-of-type(2n)>td[data-v-086c5b0d]{background-color:var(--background-default)}table>tbody>*>tr:hover:not(.loading)>td[data-v-086c5b0d],table>tbody>*>tr.activeMenu>td[data-v-086c5b0d]{background-color:var(--background-paper-elevation-1)}table>tbody td[data-v-086c5b0d]{background-color:var(--background-default);border:none;min-width:0;display:flex;height:auto;width:100%;place-items:center;border-bottom:1px solid var(--common-divider);justify-content:start}table>tbody td.bordered[data-v-086c5b0d]{border-right:1px solid var(--common-divider)}table>tbody td.bordered.isStickyRight[data-v-086c5b0d]{border-right:none;border-left:1px solid var(--common-divider)}table>tbody td.isTextRight[data-v-086c5b0d]{justify-content:flex-end;text-align:right}.underlined[data-v-086c5b0d]{border-bottom:.0625rem dashed var(--common-divider)}.underlined[data-v-086c5b0d]:hover{cursor:help}.section-container[data-v-086c5b0d]{left:0}.sections[data-v-086c5b0d]{display:flex}.section[data-v-086c5b0d]{padding:0 1.5rem;background:var(--background-default);left:0;height:32px;display:flex;align-items:flex-end;border-right:1px solid var(--common-divider)}.table-cell[data-v-086c5b0d]{width:100%}.empty-state[data-v-086c5b0d]{min-height:250px}.floating-row[data-v-086c5b0d]{display:flex;inset:0;pointer-events:none;position:absolute;z-index:calc(var(--93d4ced6) + 1)}.floating-row *[data-v-086c5b0d-s]{pointer-events:auto}.bg[data-v-086c5b0d]{background:var(--background-default)}

package/DropdownV4.vue_vue_type_style_index_0_scoped_86b82f0c_lang.css

@@ -0,0 +1 @@
+.v-enter-active[data-v-86b82f0c],.v-leave-active[data-v-86b82f0c]{transition:opacity .25s ease}ol[data-v-86b82f0c],ul[data-v-86b82f0c],menu[data-v-86b82f0c]{list-style:none;margin:0;padding:0}.dropdown.full-width[data-v-86b82f0c],.dropdown.full-width .button__container[data-v-86b82f0c]{width:100%}.dropdown-list-wrapper[data-v-86b82f0c]{display:flex;flex-direction:column;padding:.5rem .5rem .25rem}.dropdown-list-wrapper--multi[data-v-86b82f0c]{padding:.5rem}.list-container--multi[data-v-86b82f0c]{margin-bottom:0}.inline-search .inline-search-wrapper[data-v-86b82f0c]{display:flex;gap:4px;padding-bottom:.25rem}.inline-search .inline-search-wrapper .search-container[data-v-86b82f0c]{width:100%}.inline-search .list-container[data-v-86b82f0c]{padding-top:0}.no-result-container[data-v-86b82f0c]{height:100%;display:flex;align-items:center;padding:.375rem .5rem;color:var(--text-disabled)}.no-result[data-v-86b82f0c]{color:var(--text-disabled);padding-left:.5rem}.list[data-v-86b82f0c]{outline:none;display:flex;flex-direction:column;width:100%;min-height:2rem}.list--multi[data-v-86b82f0c]{margin-bottom:.5rem;border-bottom-left-radius:0;border-bottom-right-radius:0}.list--with-conditions[data-v-86b82f0c]{min-height:0;margin-bottom:0}.image-slot[data-v-86b82f0c]{margin-right:.5rem}.actions-wrapper[data-v-86b82f0c]{display:flex;width:100%;padding:.5rem .5rem .5rem .125rem;padding-bottom:0;border-top:1px solid var(--common-divider);justify-content:space-between;margin-top:.25rem}.apply-button[data-v-86b82f0c]{margin-left:.5rem}

package/OptionV4.vue_vue_type_style_index_0_scoped_3dc741c1_lang.css

@@ -0,0 +1 @@
+.label[data-v-3dc741c1]{color:#41454d}.item-container[data-v-3dc741c1]{width:100%;display:flex;align-items:center;cursor:pointer;border-radius:var(--border-radius-lg);margin-bottom:.25rem;color:var(--text-primary);padding:6px 8px}.item-container--disabled[data-v-3dc741c1]{cursor:initial;color:var(--text-disabled)}.item-container[data-v-3dc741c1]:hover:not(.item-container--disabled){background-color:var(--action-hover)}.item-container--active[data-v-3dc741c1],.item-container[data-v-3dc741c1]:active{background-color:var(--action-selected)}.item-container:not(.item-container--multi).item-container--selected[data-v-3dc741c1]{background-color:var(--action-selected)}.subtitle[data-v-3dc741c1]{color:#7b838c;line-height:1rem}.clear-button[data-v-3dc741c1]{display:flex;padding:0 4px;color:#7b838c;align-items:center;height:auto;background-image:none;min-width:auto;border:none;background-color:transparent}.clear-button[data-v-3dc741c1]:hover{color:#3083ff}.item[data-v-3dc741c1]{width:100%;display:flex;gap:.5rem;align-items:center}.item--with-icon[data-v-3dc741c1],.item--multi[data-v-3dc741c1]{display:flex;flex-direction:row;align-items:center;justify-content:start}.item .image[data-v-3dc741c1]{width:20px;height:20px;flex:none}.item .image img[data-v-3dc741c1]{width:20px;height:20px;border-radius:4px}.item .flag[data-v-3dc741c1]{width:16px;height:16px}.item .flag img[data-v-3dc741c1]{width:16px;height:16px;border-radius:50%}.item .start-icon[data-v-3dc741c1],.item .end-icon[data-v-3dc741c1]{display:flex;color:var(--action-active)}.item .end-text-icon[data-v-3dc741c1]{display:inline-flex}.item .option-text[data-v-3dc741c1]{line-height:1.1875rem}.text-container[data-v-3dc741c1]{width:100%;text-overflow:ellipsis;overflow:hidden}.v4-tooltip.tooltip-option[data-v-3dc741c1]{display:block}.tooltip-option[data-v-3dc741c1] .container{width:100%}.app-trigger--icon[data-v-3dc741c1]{color:var(--action-active);transform:rotate(-90deg);transition:transform .2s}.app-trigger--icon.expanded[data-v-3dc741c1]{transform:rotate(0)}.option-warning[data-v-3dc741c1]{display:flex}.option-warning__icon[data-v-3dc741c1]{color:var(--warning-main)}.option-content[data-v-3dc741c1]{display:flex}.option-content[data-v-3dc741c1]:not(.option-content-vertical){gap:.5rem;align-items:center}.option-content-horizontal[data-v-3dc741c1]{justify-content:space-between;gap:.5rem}.option-content-vertical[data-v-3dc741c1]{flex-direction:column}.option-text .main-text[data-v-3dc741c1]{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-align:left}.option-text .main-text .conditional-option-label[data-v-3dc741c1]{color:var(--text-secondary);display:inline-flex}.option-text .main-text .conditional-option-value[data-v-3dc741c1]{margin-left:4px;display:inline-flex;color:var(--primary-main)}.option-text .caption-text[data-v-3dc741c1]{color:var(--text-secondary)}.multiline-tooltip[data-v-3dc741c1]{display:flex;flex-direction:column}

package/SwitchV4.vue_vue_type_style_index_0_scoped_fa120cf6_lang.css

@@ -0,0 +1 @@
+.switch[data-v-fa120cf6]{position:relative;display:inline-flex;background:var(--default-main);border-radius:var(--border-radius-md);border:1px solid var(--default-outlined-border);overflow:hidden}.switch--variant-primary .option--selected[data-v-fa120cf6]{background:var(--primary-main-8-p)}.switch--variant-default .option--selected[data-v-fa120cf6]{background:var(--action-selected)}.switch--variant-default .option--selected[data-v-fa120cf6] .icon{color:var(--text-primary)}.option[data-v-fa120cf6]{border-radius:0;padding:3px}.option[data-v-fa120cf6]:not(:last-child){border-right:1px solid var(--default-outlined-border)}

package/components/chart/Chart.vue.js

@@ -1,7 +1,7 @@
 import o from "./Chart.vue2.js";
 /* empty css            */import _ from "../../_virtual/_plugin-vue_export-helper.js";
-// import "../../Chart.vue_vue_type_style_index_0_scoped_64205c96_lang.css"; //*');
-const c = /* @__PURE__ */ _(o, [["__scopeId", "data-v-64205c96"]]);
+// import "../../Chart.vue_vue_type_style_index_0_scoped_03771fa3_lang.css"; //*');
+const a = /* @__PURE__ */ _(o, [["__scopeId", "data-v-03771fa3"]]);
 export {
-  c as default
+  a as default
 };

package/components/chart/Chart.vue2.js

@@ -1,8 +1,8 @@
- import "../../Chart.vue_vue_type_style_index_0_scoped_64205c96_lang.css"; import { defineComponent as U, ref as O, computed as n, openBlock as s, createElementBlock as m, Fragment as C, createBlock as I, unref as i, isRef as b, withCtx as d, renderSlot as u, createCommentVNode as D, createElementVNode as k, mergeProps as y, normalizeClass as E, createVNode as L, createSlots as N, renderList as M } from "vue";
+ import "../../Chart.vue_vue_type_style_index_0_scoped_03771fa3_lang.css"; import { defineComponent as U, ref as O, computed as n, openBlock as s, createElementBlock as m, Fragment as C, createBlock as I, unref as i, isRef as b, withCtx as d, renderSlot as u, createCommentVNode as D, createElementVNode as k, mergeProps as g, normalizeClass as E, createVNode as L, createSlots as N, renderList as M } from "vue";
 import { useVModel as A } from "@vueuse/core";
 import $ from "./ChartLegend.vue.js";
 import K from "./SettingsHeader.vue.js";
-import V from "./ChartPlane.vue.js";
+import B 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 Y } from "./consts.js";
 import { ChartType as j, DateInterval as q, TooltipOrder as G, TrendDirection as J } from "./types.js";
@@ -56,7 +56,7 @@ const _ = {
   },
   emits: ["update:chartType", "update:visibleIds", "update:sortSelected"],
   setup(a, { emit: p }) {
-    const e = a, r = A(e, "chartType", p), h = A(e, "sortSelected", p), c = O(null), g = n(() => ({
+    const e = a, r = A(e, "chartType", p), c = A(e, "sortSelected", p), h = O(null), y = n(() => ({
       dataSets: e.dataSets,
       visibleIds: e.visibleIds,
       parsing: e.parsing,
@@ -86,11 +86,11 @@ const _ = {
       tooltipTotalType: e.tooltipTotalType,
       tooltipTotalCalcFn: e.tooltipTotalCalcFn,
       tooltipOrder: e.tooltipOrder,
-      highlightedId: c.value,
+      highlightedId: h.value,
       valueSuffix: e.valueSuffix,
       valuePrefix: e.valuePrefix
-    })), B = n(() => e.dataSets), v = n(() => e.visibleIds), T = n(() => e.extraCharts.length), x = n(() => 1 + T.value), F = (t) => t === T.value - 1, { colorsMap: f } = z({
-      dataSets: B,
+    })), V = n(() => e.dataSets), v = n(() => e.visibleIds), T = n(() => e.extraCharts.length), x = n(() => 1 + T.value), F = (t) => t === T.value - 1, { colorsMap: f } = z({
+      dataSets: V,
       visibleIds: v
     }), w = n(() => e.dataSets.map((t) => ({
       id: t.id,
@@ -101,7 +101,8 @@ const _ = {
       iconType: t.iconType || "branded"
     }))), { containerProps: H, eachPlaneHeight: P } = Q({
       chartPlanesCount: x,
-      useFullHeight: e.fullHeight
+      useFullHeight: e.fullHeight,
+      bottomSpacing: e.fullHeightBottomSpacing
     });
     return (t, o) => (s(), m(C, null, [
       a.withSettingsHeader ? (s(), I(K, {
@@ -121,14 +122,14 @@ const _ = {
         ]),
         _: 3
       }, 8, ["chart-type", "hide-legend"])) : D("", !0),
-      k("div", y({ class: "chart-container" }, i(H)), [
+      k("div", g({ class: "chart-container" }, i(H)), [
         k("section", {
           class: E(["chart-planes", [{ "with-legend": !a.hideLegend }]])
         }, [
-          L(V, y({
+          L(B, g({
             "chart-type": i(r),
             "onUpdate:chart-type": o[1] || (o[1] = (l) => b(r) ? r.value = l : null)
-          }, i(g)), N({ _: 2 }, [
+          }, i(y)), N({ _: 2 }, [
             t.$slots["subheader-tooltip"] ? {
               name: "subheader-tooltip",
               fn: d(() => [
@@ -137,10 +138,10 @@ const _ = {
               key: "0"
             } : void 0
           ]), 1040, ["chart-type"]),
-          (s(!0), m(C, null, M(a.extraCharts, (l, S) => (s(), I(V, y({
+          (s(!0), m(C, null, M(a.extraCharts, (l, S) => (s(), I(B, g({
             key: S,
             class: "extra-chart-plane"
-          }, { ...i(g), ...l }, {
+          }, { ...i(y), ...l }, {
             "chart-type": i(r),
             "colors-map": i(f),
             "type-switcher": !1,
@@ -149,10 +150,10 @@ const _ = {
         ], 2),
         a.hideLegend ? D("", !0) : (s(), m("section", _, [
           L($, {
-            "sort-selected": i(h),
-            "onUpdate:sort-selected": o[2] || (o[2] = (l) => b(h) ? h.value = l : null),
-            "highlighted-id": c.value,
-            "onUpdate:highlighted-id": o[3] || (o[3] = (l) => c.value = l),
+            "sort-selected": i(c),
+            "onUpdate:sort-selected": o[2] || (o[2] = (l) => b(c) ? c.value = l : null),
+            "highlighted-id": h.value,
+            "onUpdate:highlighted-id": o[3] || (o[3] = (l) => h.value = l),
             items: i(w),
             "visible-ids": i(v),
             "max-limit-tooltip-text": a.maxLimitTooltipText,

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_79dc2883_lang.css"; //*');
-const d = /* @__PURE__ */ o(e, [["__scopeId", "data-v-79dc2883"]]);
+// import "../../ChartHeaderTrend.vue_vue_type_style_index_0_scoped_ebc0c582_lang.css"; //*');
+const c = /* @__PURE__ */ o(e, [["__scopeId", "data-v-ebc0c582"]]);
 export {
-  d as default
+  c as default
 };

package/components/chart/ChartHeaderTrend.vue2.js

@@ -1,86 +1,87 @@
- import "../../ChartHeaderTrend.vue_vue_type_style_index_0_scoped_79dc2883_lang.css"; import { defineComponent as f, computed as T, openBlock as r, createElementBlock as p, normalizeClass as v, createVNode as l, unref as t, withCtx as o, createElementVNode as u, createBlock as s, createTextVNode as a, toDisplayString as d, createCommentVNode as i, pushScopeId as g, popScopeId as y } from "vue";
-import n from "../typography/v4/Typography.vue.js";
-import C from "../icon/v4/IconV4.vue.js";
+ import "../../ChartHeaderTrend.vue_vue_type_style_index_0_scoped_ebc0c582_lang.css"; import { defineComponent as f, computed as v, openBlock as r, createElementBlock as p, normalizeClass as y, createVNode as u, unref as t, withCtx as o, createElementVNode as s, createBlock as i, createTextVNode as n, toDisplayString as d, createCommentVNode as a, pushScopeId as g, popScopeId as C } from "vue";
+import l from "../typography/v4/Typography.vue.js";
+import b from "../icon/v4/IconV4.vue.js";
 import "../icon/v4/IconFlag.vue.js";
-import x from "../tooltip/v4/TooltipV4.vue.js";
-import { TrendDirection as b } from "./types.js";
-const m = (e) => (g("data-v-79dc2883"), e = e(), y(), e), k = { class: "trend-tooltip" }, _ = {
+import k from "../tooltip/v4/TooltipV4.vue.js";
+import { TrendDirection as m } from "./types.js";
+const h = (e) => (g("data-v-ebc0c582"), e = e(), C(), e), x = { class: "trend-tooltip" }, N = {
   key: 2,
   class: "separator"
-}, P = /* @__PURE__ */ m(() => /* @__PURE__ */ u("hr", null, null, -1)), I = /* @__PURE__ */ m(() => /* @__PURE__ */ u("hr", null, null, -1)), $ = /* @__PURE__ */ f({
+}, P = /* @__PURE__ */ h(() => /* @__PURE__ */ s("hr", null, null, -1)), _ = /* @__PURE__ */ h(() => /* @__PURE__ */ s("hr", null, null, -1)), L = /* @__PURE__ */ f({
   __name: "ChartHeaderTrend",
   props: {
     value: { default: null },
-    direction: { default: b.UP },
+    direction: { default: m.UP },
     trendTooltip: { default: null }
   },
   setup(e) {
-    const c = e, h = T(
+    const c = e, T = v(
       () => c.trendTooltip?.header || c.trendTooltip?.rangeCurrent || c.trendTooltip?.rangePrevious
     );
-    return (N, S) => (r(), p("div", {
-      class: v(["chart-trend", [`chart-trend--${e.direction}`]])
+    return (I, S) => (r(), p("div", {
+      class: y(["chart-trend", [`chart-trend--${e.direction}`]])
     }, [
-      l(t(x), {
-        disabled: !t(h)
+      u(t(k), {
+        disabled: !t(T)
       }, {
         tooltip: o(() => [
-          u("div", k, [
-            e.trendTooltip?.header ? (r(), s(t(n), {
+          s("div", x, [
+            e.trendTooltip?.header ? (r(), i(t(l), {
               key: 0,
               class: "trend-tooltip__header",
               variant: "subtitle2"
             }, {
               default: o(() => [
-                a(d(e.trendTooltip.header), 1)
+                n(d(e.trendTooltip.header), 1)
               ]),
               _: 1
-            })) : i("", !0),
-            e.trendTooltip?.rangeCurrent ? (r(), s(t(n), {
+            })) : a("", !0),
+            e.trendTooltip?.rangeCurrent ? (r(), i(t(l), {
               key: 1,
               variant: "body2",
               class: "trend-tooltip__text"
             }, {
               default: o(() => [
-                a(d(e.trendTooltip.rangeCurrent), 1)
+                n(d(e.trendTooltip.rangeCurrent), 1)
               ]),
               _: 1
-            })) : i("", !0),
-            e.trendTooltip?.rangeCurrent && e.trendTooltip?.rangePrevious ? (r(), p("div", _, [
+            })) : a("", !0),
+            e.trendTooltip?.rangeCurrent && e.trendTooltip?.rangePrevious ? (r(), p("div", N, [
               P,
-              l(t(n), {
+              u(t(l), {
                 class: "separator__text",
                 variant: "caption"
               }, {
                 default: o(() => [
-                  a(" vs. ")
+                  n(" vs. ")
                 ]),
                 _: 1
               }),
-              I
-            ])) : i("", !0),
-            e.trendTooltip?.rangePrevious ? (r(), s(t(n), {
+              _
+            ])) : a("", !0),
+            e.trendTooltip?.rangePrevious ? (r(), i(t(l), {
               key: 3,
               variant: "body2",
               class: "trend-tooltip__text"
             }, {
               default: o(() => [
-                a(d(e.trendTooltip.rangePrevious), 1)
+                n(d(e.trendTooltip.rangePrevious), 1)
               ]),
               _: 1
-            })) : i("", !0)
+            })) : a("", !0)
           ])
         ]),
         default: o(() => [
-          l(t(C), {
+          e.direction !== t(m).NEUTRAL ? (r(), i(t(b), {
+            key: 0,
             class: "trend-icon",
             type: "bold",
             name: `arrow-${e.direction}`,
             size: "13px"
-          }, null, 8, ["name"]),
-          l(t(n), { variant: "chipLabel" }, {
+          }, null, 8, ["name"])) : a("", !0),
+          u(t(l), { variant: "chipLabel" }, {
             default: o(() => [
-              a(d(e.value), 1)
+              n(d(e.value), 1)
             ]),
             _: 1
           })
@@ -91,5 +92,5 @@ const m = (e) => (g("data-v-79dc2883"), e = e(), y(), e), k = { class: "trend-to
   }
 });
 export {
-  $ as default
+  L as default
 };

package/components/chart/ChartStoryArgs.d.ts

@@ -98,8 +98,8 @@ export declare const chartStoryArgs: {
         description: string;
         control: {
             type: string;
-            options: TrendDirection[];
         };
+        options: TrendDirection[];
     };
     tickCount: {
         description: string;

package/components/dateRange/common/DateServices.common.d.ts

@@ -117,6 +117,12 @@ declare class DateServices {
                 to?: Date;
             };
         };
+        last9months: {
+            dates(): {
+                from?: Date;
+                to?: Date;
+            };
+        };
         last12months: {
             dates(): {
                 from?: Date;

package/components/dateRange/common/DateServices.common.js

@@ -1,6 +1,6 @@
-import { isSameDay as C, format as l } from "date-fns";
-const m = "MMM d, yyyy", u = 7;
-class c {
+import { isSameDay as g, format as m } from "date-fns";
+const y = "MMM d, yyyy", D = 7;
+class C {
   // eslint-disable-next-line class-methods-use-this
   getCurrentTimeUTC() {
     const n = /* @__PURE__ */ new Date();
@@ -12,23 +12,23 @@ class c {
   }
   // eslint-disable-next-line consistent-return
   getDateRangeString(n) {
-    if (C(n.fromStart, n.toEnd))
-      return l(n.fromStart, m);
+    if (g(n.fromStart, n.toEnd))
+      return m(n.fromStart, y);
     if (n.fromStart && n.toEnd)
-      return `${l(n.fromStart, m)} - ${l(
+      return `${m(n.fromStart, y)} - ${m(
         n.toEnd,
-        m
+        y
       )}`;
   }
   // eslint-disable-next-line class-methods-use-this
   getFirstDayOfWeek(n) {
-    const a = new Date(n), r = a.getDay(), s = a.getDate() - r;
-    return a.setDate(s), a;
+    const a = new Date(n), r = a.getDay(), e = a.getDate() - r;
+    return a.setDate(e), a;
   }
   getLastDayOfWeek(n) {
     let a = new Date(n);
-    const r = a.getDay(), s = a.getDate() + (6 - r);
-    a.setDate(s);
+    const r = a.getDay(), e = a.getDate() + (6 - r);
+    a.setDate(e);
     const t = this.getCurrentTimeUTC();
     return a > t && (a = t), a;
   }
@@ -37,33 +37,40 @@ class c {
     let r = new Date(n.getFullYear(), n.getMonth() + 1, 0);
     return r > a && (r = a), r;
   }
-  createMonth(n, a, r = !0, e = !0) {
-    const s = {
+  createMonth(n, a, r = !0, o = !0) {
+    const e = {
       weeks: [],
       days: {},
       month: n,
       year: a
     };
-    let t, o;
-    const T = new Date(a, n, 1).getDay();
-    let D = 1;
-    const i = /* @__PURE__ */ new Date();
-    i.setHours(0, 0, 0, 0);
-    const g = this.daysInMonth(n, a);
-    for (let d = 0; d < 6; d++) {
-      o = [];
-      for (let f = 0; f < 7; f++)
-        t = {}, d === 0 && T > 0 && f < T && (t.value = 0), D > g && (t.value = 0), !t.value && t.value !== 0 && (t.value = D, D += 1, s.days[t.value] = t, t.date = new Date(a, n, t.value), i < t.date && e ? t.isFuture = !0 : t.date.getTime() === i.getTime() && (t.isToday = !0, r || (t.disabled = !0))), o.push(t);
-      this.isWeekEmpty(o) || s.weeks.push(o);
+    let t, s;
+    const c = new Date(a, n, 1).getDay();
+    let i = 1;
+    const d = /* @__PURE__ */ new Date();
+    d.setHours(0, 0, 0, 0);
+    const T = this.daysInMonth(n, a);
+    for (let f = 0; f < 6; f++) {
+      s = [];
+      for (let l = 0; l < 7; l++)
+        t = {}, f === 0 && c > 0 && l < c && (t.value = 0), i > T && (t.value = 0), !t.value && t.value !== 0 && (t.value = i, i += 1, e.days[t.value] = t, t.date = new Date(a, n, t.value), d < t.date && o ? t.isFuture = !0 : t.date.getTime() === d.getTime() && (t.isToday = !0, r || (t.disabled = !0))), s.push(t);
+      this.isWeekEmpty(s) || e.weeks.push(s);
     }
-    return s;
+    return e;
   }
   isWeekEmpty(n) {
     return n.every((a) => !a.value);
   }
   // eslint-disable-next-line class-methods-use-this
   getPresetsFunctions(n = !0) {
-    const a = n, r = this;
+    const a = n, r = this, o = (e) => {
+      const t = {}, s = r.getCurrentTimeUTC(), u = new Date(
+        s.getFullYear(),
+        s.getMonth() - (e - 1),
+        1
+      );
+      return (t.to = r.getCurrentTimeUTC()).setHours(0, 0, 0, 0), t.from = u, t;
+    };
     return {
       today: {
         dates() {
@@ -82,167 +89,155 @@ class c {
       last7days: {
         dates() {
           const e = {};
-          let s = 0, t = 6 * 24 * 3600 * 1e3;
-          return a || (s = 24 * 3600 * 1e3, t = 7 * 24 * 3600 * 1e3), e.from = new Date(
-            r.getCurrentTimeUTC() - t
+          let t = 0, s = 6 * 24 * 3600 * 1e3;
+          return a || (t = 24 * 3600 * 1e3, s = 7 * 24 * 3600 * 1e3), e.from = new Date(
+            r.getCurrentTimeUTC() - s
           ), e.to = new Date(
-            r.getCurrentTimeUTC().setHours(23, 59, 59, 0) - s
+            r.getCurrentTimeUTC().setHours(23, 59, 59, 0) - t
           ), e;
         }
       },
       last14days: {
         dates() {
           const e = {};
-          let s = 0, t = 13 * 24 * 3600 * 1e3;
-          return a || (s = 24 * 3600 * 1e3, t = 14 * 24 * 3600 * 1e3), e.from = new Date(
-            r.getCurrentTimeUTC() - t
+          let t = 0, s = 13 * 24 * 3600 * 1e3;
+          return a || (t = 24 * 3600 * 1e3, s = 14 * 24 * 3600 * 1e3), e.from = new Date(
+            r.getCurrentTimeUTC() - s
           ), e.to = new Date(
-            r.getCurrentTimeUTC().setHours(23, 59, 59, 0) - s
+            r.getCurrentTimeUTC().setHours(23, 59, 59, 0) - t
           ), e;
         }
       },
       last30days: {
         dates() {
           const e = {};
-          let s = 0, t = 29 * 24 * 3600 * 1e3;
-          return a || (s = 24 * 3600 * 1e3, t = 30 * 24 * 3600 * 1e3), e.from = new Date(
-            r.getCurrentTimeUTC() - t
+          let t = 0, s = 29 * 24 * 3600 * 1e3;
+          return a || (t = 24 * 3600 * 1e3, s = 30 * 24 * 3600 * 1e3), e.from = new Date(
+            r.getCurrentTimeUTC() - s
           ), e.to = new Date(
-            r.getCurrentTimeUTC().setHours(23, 59, 59, 0) - s
+            r.getCurrentTimeUTC().setHours(23, 59, 59, 0) - t
           ), e;
         }
       },
       last31days: {
         dates() {
           const e = {};
-          let s = 0, t = 30 * 24 * 3600 * 1e3;
-          return a || (s = 24 * 3600 * 1e3, t = 31 * 24 * 3600 * 1e3), e.from = new Date(
-            r.getCurrentTimeUTC() - t
+          let t = 0, s = 30 * 24 * 3600 * 1e3;
+          return a || (t = 24 * 3600 * 1e3, s = 31 * 24 * 3600 * 1e3), e.from = new Date(
+            r.getCurrentTimeUTC() - s
           ), e.to = new Date(
-            r.getCurrentTimeUTC().setHours(23, 59, 59, 0) - s
+            r.getCurrentTimeUTC().setHours(23, 59, 59, 0) - t
           ), e;
         }
       },
       last60days: {
         dates() {
           const e = {};
-          let s = 0, t = 59 * 24 * 3600 * 1e3;
-          return a || (s = 24 * 3600 * 1e3, t = 60 * 24 * 3600 * 1e3), e.from = new Date(
-            r.getCurrentTimeUTC() - t
+          let t = 0, s = 59 * 24 * 3600 * 1e3;
+          return a || (t = 24 * 3600 * 1e3, s = 60 * 24 * 3600 * 1e3), e.from = new Date(
+            r.getCurrentTimeUTC() - s
           ), e.to = new Date(
-            r.getCurrentTimeUTC().setHours(23, 59, 59, 0) - s
+            r.getCurrentTimeUTC().setHours(23, 59, 59, 0) - t
           ), e;
         }
       },
       last90days: {
         dates() {
           const e = {};
-          let s = 0, t = 89 * 24 * 3600 * 1e3;
-          return a || (s = 24 * 3600 * 1e3, t = 90 * 24 * 3600 * 1e3), e.from = new Date(
-            r.getCurrentTimeUTC() - t
+          let t = 0, s = 89 * 24 * 3600 * 1e3;
+          return a || (t = 24 * 3600 * 1e3, s = 90 * 24 * 3600 * 1e3), e.from = new Date(
+            r.getCurrentTimeUTC() - s
           ), e.to = new Date(
-            r.getCurrentTimeUTC().setHours(23, 59, 59, 0) - s
+            r.getCurrentTimeUTC().setHours(23, 59, 59, 0) - t
           ), e;
         }
       },
       thisMonth: {
         dates() {
-          const e = {}, s = /* @__PURE__ */ new Date(), t = new Date(s.getFullYear(), s.getMonth(), 1);
+          const e = {}, t = /* @__PURE__ */ new Date(), s = new Date(t.getFullYear(), t.getMonth(), 1);
           if (a)
             (e.to = r.getCurrentTimeUTC()).setHours(0, 0, 0, 0);
           else {
-            const o = new Date(
+            const u = new Date(
               r.getCurrentTimeUTC().setHours(0, 0, 0, 0) - 864e5
             );
-            o < t ? e.to = t : e.to = o;
+            u < s ? e.to = s : e.to = u;
           }
-          return e.from = t, e;
+          return e.from = s, e;
         }
       },
       lastMonth: {
         dates() {
-          const e = {}, s = /* @__PURE__ */ new Date();
-          return e.from = new Date(s.getFullYear(), s.getMonth() - 1, 1), e.to = new Date(s.getFullYear(), s.getMonth(), 0), e;
+          const e = {}, t = /* @__PURE__ */ new Date();
+          return e.from = new Date(t.getFullYear(), t.getMonth() - 1, 1), e.to = new Date(t.getFullYear(), t.getMonth(), 0), e;
         }
       },
       last4weeks: {
         dates() {
-          const e = {}, s = r.getCurrentTimeUTC(), t = r.getFirstDayOfWeek(s);
+          const e = {}, t = r.getCurrentTimeUTC(), s = r.getFirstDayOfWeek(t);
           return e.from = new Date(
-            t.setDate(t.getDate() - u * 3)
-          ), e.to = new Date(s.setHours(23, 59, 59, 0)), e;
+            s.setDate(s.getDate() - D * 3)
+          ), e.to = new Date(t.setHours(23, 59, 59, 0)), e;
         }
       },
       last12weeks: {
         dates() {
-          const e = {}, s = r.getCurrentTimeUTC(), t = r.getFirstDayOfWeek(s);
+          const e = {}, t = r.getCurrentTimeUTC(), s = r.getFirstDayOfWeek(t);
           return e.from = new Date(
-            t.setDate(t.getDate() - u * 11)
-          ), e.to = new Date(s.setHours(23, 59, 59, 0)), e;
+            s.setDate(s.getDate() - D * 11)
+          ), e.to = new Date(t.setHours(23, 59, 59, 0)), e;
         }
       },
       last26weeks: {
         dates() {
-          const e = {}, s = r.getCurrentTimeUTC(), t = r.getFirstDayOfWeek(s);
+          const e = {}, t = r.getCurrentTimeUTC(), s = r.getFirstDayOfWeek(t);
           return e.from = new Date(
-            t.setDate(t.getDate() - u * 25)
-          ), e.to = new Date(s.setHours(23, 59, 59, 0)), e;
+            s.setDate(s.getDate() - D * 25)
+          ), e.to = new Date(t.setHours(23, 59, 59, 0)), e;
         }
       },
       last52weeks: {
         dates() {
-          const e = {}, s = r.getCurrentTimeUTC(), t = r.getFirstDayOfWeek(s);
+          const e = {}, t = r.getCurrentTimeUTC(), s = r.getFirstDayOfWeek(t);
           return e.from = new Date(
-            t.setDate(t.getDate() - u * 51)
-          ), e.to = new Date(s.setHours(23, 59, 59, 0)), e;
+            s.setDate(s.getDate() - D * 51)
+          ), e.to = new Date(t.setHours(23, 59, 59, 0)), e;
         }
       },
       last3months: {
         dates() {
-          const e = {}, s = r.getCurrentTimeUTC(), t = new Date(s.getFullYear(), s.getMonth() - 2, 1);
-          return (e.to = r.getCurrentTimeUTC()).setHours(0, 0, 0, 0), e.from = t, e;
+          return o(3);
         }
       },
       last6months: {
         dates() {
-          const e = {}, s = r.getCurrentTimeUTC(), t = new Date(s.getFullYear(), s.getMonth() - 5, 1);
-          return (e.to = r.getCurrentTimeUTC()).setHours(0, 0, 0, 0), e.from = t, e;
+          return o(6);
+        }
+      },
+      last9months: {
+        dates() {
+          return o(9);
         }
       },
       last12months: {
         dates() {
-          const e = {}, s = r.getCurrentTimeUTC(), t = new Date(
-            s.getFullYear(),
-            s.getMonth() - 11,
-            1
-          );
-          return (e.to = r.getCurrentTimeUTC()).setHours(0, 0, 0, 0), e.from = t, e;
+          return o(12);
         }
       },
       last24months: {
         dates() {
-          const e = {}, s = r.getCurrentTimeUTC(), t = new Date(
-            s.getFullYear(),
-            s.getMonth() - 23,
-            1
-          );
-          return (e.to = r.getCurrentTimeUTC()).setHours(0, 0, 0, 0), e.from = t, e;
+          return o(24);
         }
       },
       last36months: {
         dates() {
-          const e = {}, s = r.getCurrentTimeUTC(), t = new Date(
-            s.getFullYear(),
-            s.getMonth() - 35,
-            1
-          );
-          return (e.to = r.getCurrentTimeUTC()).setHours(0, 0, 0, 0), e.from = t, e;
+          return o(36);
         }
       }
     };
   }
 }
-const h = new c();
+const U = new C();
 export {
-  h as default
+  U as default
 };

package/components/dateRange/common/consts.common.d.ts

@@ -51,4 +51,9 @@ export declare const presetsList: {
         id: string;
         numid: number;
     }[];
+    'month-3-6-9-12': {
+        name: string;
+        id: string;
+        numid: number;
+    }[];
 };