@geotab/zenith 1.26.5 → 1.26.6-beta.1

package/dist/index.css

@@ -2558,10 +2558,6 @@
   background-color: var(--backgrounds-hover);
   border-color: var(--borders-form-field--active);
 }
-.zen-dropdown-searchable-trigger__search-container:focus-within {
-  z-index: 1;
-  border-color: var(--borders-form-field--active);
-}
 .zen-dropdown-searchable-trigger__input-container {
   width: 100%;
   min-height: 24px;
@@ -2773,6 +2769,13 @@
 .zen-dropdown-searchable-trigger--error .zen-dropdown-searchable-trigger__search-container {
   border-right: 1px solid var(--text-error-message);
 }
+.zen-dropdown-searchable-trigger:focus-within .zen-dropdown-searchable-trigger__search-container {
+  z-index: 1;
+  border-color: var(--borders-form-field--active);
+}
+.zen-dropdown-searchable-trigger:focus-within .zen-dropdown-searchable-trigger__popup-trigger {
+  border-color: var(--borders-form-field--active);
+}
 .zen-text-input-disabled-mixin {
   cursor: not-allowed;
   color: var(--text-placeholder);
@@ -4528,6 +4531,73 @@
 .zen-pill-new.zen-pill-new--drive {
   border-radius: 50px;
 }
+.zen-pill-box-item__icon.zen-pill-box-item__icon {
+  padding: 0;
+  color: var(--text-primary);
+  fill: var(--text-primary);
+  width: 16px;
+  height: 16px;
+}
+.zen-pill-box-item__icon.zen-pill-box-item__icon:active {
+  border-radius: 50%;
+  color: var(--text-reverse-primary);
+  fill: var(--text-reverse-primary);
+  stroke: var(--text-reverse-primary);
+  border-color: var(--borders-form-field--hover);
+  background-color: var(--borders-form-field--hover);
+}
+.zen-pill-box-item__icon.zen-pill-box-item__icon:hover:not(:active),
+.zen-pill-box-item__icon.zen-pill-box-item__icon:focus:not(:active) {
+  border-radius: 50%;
+  border: 1px solid var(--action-tertiary--hover);
+  color: var(--text-primary);
+  fill: var(--text-primary);
+  background-color: var(--action-tertiary--hover);
+}
+.zen-pill-box {
+  box-sizing: border-box;
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+}
+.zen-pill-box * {
+  box-sizing: border-box;
+}
+.zen-pill-box__pills {
+  display: flex;
+  align-items: center;
+  align-content: center;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+.zen-pill-box__label {
+  font-family: var(--main-font);
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 400;
+  letter-spacing: 0.32px;
+  line-height: 16px;
+  text-transform: none;
+  color: var(--text-secondary);
+}
+.zen-pill-box.zen-pill-box--drive {
+  font-family: var(--main-font);
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  letter-spacing: 0;
+  line-height: 26px;
+  text-transform: none;
+}
+.zen-pill-box.zen-pill-box--drive-tablet {
+  font-family: var(--main-font);
+  font-size: 18px;
+  font-style: normal;
+  font-weight: 400;
+  letter-spacing: 0;
+  line-height: 28px;
+  text-transform: none;
+}
 .zen-modal {
   box-sizing: border-box;
   box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, 0.2);
@@ -5512,6 +5582,9 @@
   fill: var(--accents-error--detail);
   color: var(--accents-error--detail);
 }
+.zen-status-pill__icon--standalone {
+  margin-right: 0;
+}
 .zen-status-pill-popup__main-pill {
   display: flex;
   align-items: center;
@@ -6429,6 +6502,7 @@
   align-items: center;
   padding: 4px 0;
   width: 100%;
+  max-height: 32px;
 }
 .zen-card__secondary {
   font-family: var(--main-font);
@@ -7390,7 +7464,7 @@ button.zen-summary__clickable {
     transform: rotate(0deg);
   }
   to {
-    transform: rotate(-360deg);
+    transform: rotate(360deg);
   }
 }
 .zen-waiting {
@@ -10120,6 +10194,7 @@ button.zen-summary__clickable {
   overflow: hidden;
   height: 100%;
   align-items: center;
+  position: relative;
 }
 .zen-filters-toolbar__filters-container--none .zen-filters-toolbar__filters {
   margin-left: 4px;
@@ -10138,18 +10213,39 @@ button.zen-summary__clickable {
   height: 100%;
   scrollbar-width: none;
   -ms-overflow-style: none;
+  transition: margin-left 300ms ease-in-out, margin-right 300ms ease-in-out;
+  margin-left: 0;
+  margin-right: 0;
+}
+.zen-filters-toolbar__scrollable.has-left-scroller {
+  margin-left: 48px;
+}
+.zen-filters-toolbar__scrollable.has-right-scroller {
+  margin-right: 48px;
 }
 .zen-filters-toolbar__scrollable::-webkit-scrollbar {
   display: none;
 }
 .zen-filters-toolbar__scroller {
-  display: none;
   flex: 0 0 auto;
   align-items: center;
   justify-content: center;
   width: 32px;
   height: 32px;
   padding: 8px;
+  opacity: 0;
+  transition: opacity 300ms ease;
+  position: absolute;
+}
+.zen-filters-toolbar__scroller--visible {
+  opacity: 1;
+}
+.zen-filters-toolbar__scroller--hidden {
+  display: none !important;
+}
+.zen-filters-toolbar__gradient {
+  opacity: 0;
+  transition: opacity 300ms ease;
 }
 .zen-filters-toolbar__gradient--right::before {
   position: absolute;
@@ -10169,9 +10265,17 @@ button.zen-summary__clickable {
   width: 40px;
   background: linear-gradient(270deg, rgba(255, 255, 255, 0) 0%, var(--backgrounds-content-0) 100%);
 }
+.zen-filters-toolbar__gradient--visible {
+  display: block;
+  opacity: 1;
+}
+.zen-filters-toolbar__gradient--hidden {
+  display: none;
+}
 .zen-filters-toolbar__start {
   margin-inline-end: 8px;
   margin-left: 4px;
+  left: 0;
 }
 .zen-filters-toolbar__start-icon {
   transform: rotate(180deg);
@@ -10179,6 +10283,7 @@ button.zen-summary__clickable {
 .zen-filters-toolbar__end {
   margin-inline-start: 8px;
   margin-right: 4px;
+  right: 0;
 }
 .zen-filters-toolbar__filters {
   display: flex;
@@ -10311,73 +10416,6 @@ button.zen-summary__clickable {
 .zen-side-panel-checkbox-group .zen-checkbox__label-text {
   margin-left: 8px;
 }
-.zen-pill-box-item__icon.zen-pill-box-item__icon {
-  padding: 0;
-  color: var(--text-primary);
-  fill: var(--text-primary);
-  width: 16px;
-  height: 16px;
-}
-.zen-pill-box-item__icon.zen-pill-box-item__icon:active {
-  border-radius: 50%;
-  color: var(--text-reverse-primary);
-  fill: var(--text-reverse-primary);
-  stroke: var(--text-reverse-primary);
-  border-color: var(--borders-form-field--hover);
-  background-color: var(--borders-form-field--hover);
-}
-.zen-pill-box-item__icon.zen-pill-box-item__icon:hover:not(:active),
-.zen-pill-box-item__icon.zen-pill-box-item__icon:focus:not(:active) {
-  border-radius: 50%;
-  border: 1px solid var(--action-tertiary--hover);
-  color: var(--text-primary);
-  fill: var(--text-primary);
-  background-color: var(--action-tertiary--hover);
-}
-.zen-pill-box {
-  box-sizing: border-box;
-  display: flex;
-  align-items: baseline;
-  gap: 8px;
-}
-.zen-pill-box * {
-  box-sizing: border-box;
-}
-.zen-pill-box__pills {
-  display: flex;
-  align-items: center;
-  align-content: center;
-  gap: 8px;
-  flex-wrap: wrap;
-}
-.zen-pill-box__label {
-  font-family: var(--main-font);
-  font-size: 12px;
-  font-style: normal;
-  font-weight: 400;
-  letter-spacing: 0.32px;
-  line-height: 16px;
-  text-transform: none;
-  color: var(--text-secondary);
-}
-.zen-pill-box.zen-pill-box--drive {
-  font-family: var(--main-font);
-  font-size: 16px;
-  font-style: normal;
-  font-weight: 400;
-  letter-spacing: 0;
-  line-height: 26px;
-  text-transform: none;
-}
-.zen-pill-box.zen-pill-box--drive-tablet {
-  font-family: var(--main-font);
-  font-size: 18px;
-  font-style: normal;
-  font-weight: 400;
-  letter-spacing: 0;
-  line-height: 28px;
-  text-transform: none;
-}
 .zen-filters-bar-groups-filter--side-panel .zen-side-panel-cell__content {
   max-width: 420px;
 }
@@ -10486,6 +10524,12 @@ button.zen-summary__clickable {
   outline: none;
   background-color: var(--action-secondary--default);
 }
+.zen-groups-filter-menu__item--interactive:active .zen-groups-filter-menu__action-label {
+  color: var(--text-reverse-primary);
+}
+.zen-groups-filter-menu__item--interactive:active .zen-groups-filter-menu__action-label .zen-groups-filter__label-element {
+  color: var(--text-reverse-primary);
+}
 .zen-groups-filter-menu__item--stretched {
   justify-content: space-between;
 }
@@ -13589,7 +13633,8 @@ button.zen-summary__clickable {
 .zen-nav {
   --nav-gap: 16px;
   --nav-top-bottom-padding: 16px;
-  --nav-left-right-padding: 8px;
+  --nav-left-right-padding: 12px;
+  --nav-left-right-collapsed-padding: 8px;
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
@@ -13597,7 +13642,6 @@ button.zen-summary__clickable {
   height: 100%;
   padding: var(--nav-top-bottom-padding) var(--nav-left-right-padding);
   background-color: var(--backgrounds-content-0);
-  box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, 0.2);
 }
 .zen-nav__header {
   flex: 0 0 auto;
@@ -13664,6 +13708,43 @@ button.zen-summary__clickable {
   overflow: initial;
   flex-grow: 0;
 }
+.zen-nav--collapsed {
+  padding-left: var(--nav-left-right-collapsed-padding);
+  padding-right: var(--nav-left-right-collapsed-padding);
+}
+.zen-nav--collapsed .zen-nav__content--has-scrollbar {
+  margin-right: calc(-1 * var(--nav-left-right-collapsed-padding));
+}
+.zen-nav-l2-popup.zen-nav-l2-popup:not(.zen-nav-l2-popup .zen-nav-l2-popup):not(.zen-nav-l2-popup--mobile) {
+  font-family: var(--main-font);
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  letter-spacing: 0;
+  line-height: 16px;
+  text-transform: none;
+  box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, 0.2);
+  border-radius: var(--border-radius-default);
+  box-sizing: border-box;
+  max-height: 800px;
+  border: 0px;
+  min-height: 30px;
+  min-width: 170px;
+  max-width: 232px;
+  background-color: var(--backgrounds-content-0);
+  padding: 8px;
+}
+.zen-nav-l2-popup.zen-nav-l2-popup:not(.zen-nav-l2-popup .zen-nav-l2-popup):not(.zen-nav-l2-popup--mobile).zen-nav-l2-popup--narrow {
+  width: 160px;
+  min-width: 160px;
+}
+.zen-nav-l2-popup.zen-nav-l2-popup:not(.zen-nav-l2-popup .zen-nav-l2-popup):not(.zen-nav-l2-popup--mobile) .zen-nav-l2-popup__list:not(.zen-nav-l2-popup__list--mobile) {
+  padding: 0;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
 .zen-nav-footer {
   display: flex;
   flex-direction: column;
@@ -13723,7 +13804,7 @@ button.zen-summary__clickable {
   flex: 0 0 auto;
 }
 .zen-nav-item__icon {
-  padding: 6px;
+  padding: 4px;
   display: flex;
   align-items: center;
   border-radius: var(--border-radius-default);
@@ -13779,7 +13860,8 @@ button.zen-summary__clickable {
   text-align: left;
 }
 .zen-nav-item:hover,
-.zen-nav-item:focus-visible {
+.zen-nav-item:focus-visible,
+.zen-nav-item:focus {
   outline: none;
   background-color: var(--backgrounds-hover);
   text-decoration: none;
@@ -13796,6 +13878,8 @@ button.zen-summary__clickable {
 .zen-nav-item--active .zen-nav-item__title {
   color: var(--text-nav-highlight);
   fill: var(--text-nav-highlight);
+}
+.zen-nav-item--active .zen-nav-item__title-text {
   font-family: var(--main-font);
   font-size: 14px;
   font-style: normal;
@@ -13814,6 +13898,7 @@ button.zen-summary__clickable {
   justify-content: center;
 }
 .zen-nav-item--collapsed .zen-nav-item__icon {
+  padding: 6px;
   border-radius: 8px;
   position: relative;
 }
@@ -13835,6 +13920,14 @@ button.zen-summary__clickable {
   color: var(--text-primary);
   fill: var(--text-primary);
 }
+.zen-nav-item--level-2.zen-nav-item--level-2:not(.zen-nav-item--level-2--mobile) {
+  min-height: 32px;
+  border-radius: 4px;
+  padding: 4px;
+}
+.zen-nav-item--level-2--mobile {
+  border-radius: 0;
+}
 .nav-footer-action {
   display: flex;
   flex-direction: column;
@@ -13842,10 +13935,16 @@ button.zen-summary__clickable {
 .zen-nav-header {
   box-sizing: border-box;
   display: flex;
-  gap: 16px;
+  gap: 8px;
   justify-content: space-between;
   align-items: center;
 }
+.zen-nav-header__controls {
+  display: flex;
+  gap: 8px;
+  flex: 0 0 auto;
+  align-items: center;
+}
 .zen-nav-header__actions-icon {
   border-radius: 50%;
   padding: 7px;
@@ -13853,13 +13952,34 @@ button.zen-summary__clickable {
 .zen-nav-header__actions {
   display: flex;
   flex-direction: column;
+  flex: 0 0 auto;
 }
 .zen-nav-header__action {
   display: flex;
 }
+.zen-nav-header__logo-link {
+  display: flex;
+  align-items: center;
+}
 .zen-nav-header--collapsed {
   align-items: center;
   flex-direction: column;
+  gap: 16px;
+}
+.zen-nav-header--collapsed .zen-nav-header__controls {
+  flex-direction: column;
+}
+.zen-nav-header--mode-search .zen-nav-header__controls {
+  flex: 1 1 100%;
+}
+.zen-nav-header-search {
+  flex: 1 1 auto;
+}
+.zen-nav-header-search__button {
+  border-radius: 50%;
+}
+.zen-nav-header-search__input {
+  flex: 1 1 auto;
 }
 .zen-nav-section {
   display: flex;

package/dist/lineChart/utils.d.ts

@@ -1,96 +1,2 @@
 import { ChartDataset, Point } from "chart.js/auto";
-export declare const getDefaultDatasetStyle: (dataSet: ChartDataset<"line", (number | Point | null)[]>, dsIndex: number, useThinLines?: boolean) => {
-    type?: "line" | undefined;
-    xAxisID?: string | undefined;
-    yAxisID?: string | undefined;
-    spanGaps?: number | boolean | undefined;
-    showLine?: boolean | undefined;
-    indexAxis?: "x" | "y" | undefined;
-    clip?: number | false | import("chart.js/dist/types/utils")._DeepPartialObject<import("chart.js/auto").ChartArea> | undefined;
-    label?: string | undefined;
-    order?: number | undefined;
-    stack?: string | undefined;
-    hidden?: boolean | undefined;
-    parsing?: false | import("chart.js/dist/types/utils")._DeepPartialObject<{
-        [key: string]: string;
-    }> | undefined;
-    normalized?: boolean | undefined;
-    pointBackgroundColor?: string | import("chart.js/dist/types/utils")._DeepPartialObject<CanvasGradient> | import("chart.js/dist/types/utils")._DeepPartialObject<CanvasPattern> | ((ctx: import("chart.js/auto").ScriptableContext<"line">, options: import("chart.js/dist/types/basic").AnyObject) => import("chart.js/auto").Color | undefined) | readonly (string | import("chart.js/dist/types/utils")._DeepPartialObject<CanvasGradient> | import("chart.js/dist/types/utils")._DeepPartialObject<CanvasPattern> | undefined)[] | undefined;
-    pointBorderColor?: string | import("chart.js/dist/types/utils")._DeepPartialObject<CanvasGradient> | import("chart.js/dist/types/utils")._DeepPartialObject<CanvasPattern> | ((ctx: import("chart.js/auto").ScriptableContext<"line">, options: import("chart.js/dist/types/basic").AnyObject) => import("chart.js/auto").Color | undefined) | readonly (string | import("chart.js/dist/types/utils")._DeepPartialObject<CanvasGradient> | import("chart.js/dist/types/utils")._DeepPartialObject<CanvasPattern> | undefined)[] | undefined;
-    pointBorderWidth?: number | ((ctx: import("chart.js/auto").ScriptableContext<"line">, options: import("chart.js/dist/types/basic").AnyObject) => number | undefined) | readonly (number | undefined)[] | undefined;
-    pointHitRadius?: number | ((ctx: import("chart.js/auto").ScriptableContext<"line">, options: import("chart.js/dist/types/basic").AnyObject) => number | undefined) | readonly (number | undefined)[] | undefined;
-    pointRadius?: number | ((ctx: import("chart.js/auto").ScriptableContext<"line">, options: import("chart.js/dist/types/basic").AnyObject) => number | undefined) | readonly (number | undefined)[] | undefined;
-    pointRotation?: number | ((ctx: import("chart.js/auto").ScriptableContext<"line">, options: import("chart.js/dist/types/basic").AnyObject) => number | undefined) | readonly (number | undefined)[] | undefined;
-    pointStyle?: false | "circle" | "line" | "rect" | "triangle" | "cross" | "crossRot" | "dash" | "rectRounded" | "rectRot" | "star" | import("chart.js/dist/types/utils")._DeepPartialObject<HTMLCanvasElement> | import("chart.js/dist/types/utils")._DeepPartialObject<HTMLImageElement> | ((ctx: import("chart.js/auto").ScriptableContext<"line">, options: import("chart.js/dist/types/basic").AnyObject) => import("chart.js/auto").PointStyle | undefined) | readonly (false | "circle" | "line" | "rect" | "triangle" | "cross" | "crossRot" | "dash" | "rectRounded" | "rectRot" | "star" | import("chart.js/dist/types/utils")._DeepPartialObject<HTMLCanvasElement> | import("chart.js/dist/types/utils")._DeepPartialObject<HTMLImageElement> | undefined)[] | undefined;
-    pointHoverBackgroundColor?: string | import("chart.js/dist/types/utils")._DeepPartialObject<CanvasGradient> | import("chart.js/dist/types/utils")._DeepPartialObject<CanvasPattern> | ((ctx: import("chart.js/auto").ScriptableContext<"line">, options: import("chart.js/dist/types/basic").AnyObject) => import("chart.js/auto").Color | undefined) | readonly (string | import("chart.js/dist/types/utils")._DeepPartialObject<CanvasGradient> | import("chart.js/dist/types/utils")._DeepPartialObject<CanvasPattern> | undefined)[] | undefined;
-    pointHoverBorderColor?: string | import("chart.js/dist/types/utils")._DeepPartialObject<CanvasGradient> | import("chart.js/dist/types/utils")._DeepPartialObject<CanvasPattern> | ((ctx: import("chart.js/auto").ScriptableContext<"line">, options: import("chart.js/dist/types/basic").AnyObject) => import("chart.js/auto").Color | undefined) | readonly (string | import("chart.js/dist/types/utils")._DeepPartialObject<CanvasGradient> | import("chart.js/dist/types/utils")._DeepPartialObject<CanvasPattern> | undefined)[] | undefined;
-    pointHoverBorderWidth?: number | ((ctx: import("chart.js/auto").ScriptableContext<"line">, options: import("chart.js/dist/types/basic").AnyObject) => number | undefined) | readonly (number | undefined)[] | undefined;
-    pointHoverRadius?: number | ((ctx: import("chart.js/auto").ScriptableContext<"line">, options: import("chart.js/dist/types/basic").AnyObject) => number | undefined) | readonly (number | undefined)[] | undefined;
-    fill?: string | number | boolean | (((ctx: import("chart.js/auto").ScriptableContext<"line">, options: import("chart.js/dist/types/basic").AnyObject) => import("chart.js/auto").FillTarget | import("chart.js/auto").ComplexFillTarget | undefined) & string) | (((ctx: import("chart.js/auto").ScriptableContext<"line">, options: import("chart.js/dist/types/basic").AnyObject) => import("chart.js/auto").FillTarget | import("chart.js/auto").ComplexFillTarget | undefined) & number) | (((ctx: import("chart.js/auto").ScriptableContext<"line">, options: import("chart.js/dist/types/basic").AnyObject) => import("chart.js/auto").FillTarget | import("chart.js/auto").ComplexFillTarget | undefined) & false) | (((ctx: import("chart.js/auto").ScriptableContext<"line">, options: import("chart.js/dist/types/basic").AnyObject) => import("chart.js/auto").FillTarget | import("chart.js/auto").ComplexFillTarget | undefined) & true) | (((ctx: import("chart.js/auto").ScriptableContext<"line">, options: import("chart.js/dist/types/basic").AnyObject) => import("chart.js/auto").FillTarget | import("chart.js/auto").ComplexFillTarget | undefined) & {
-        value: number;
-    }) | (((ctx: import("chart.js/auto").ScriptableContext<"line">, options: import("chart.js/dist/types/basic").AnyObject) => import("chart.js/auto").FillTarget | import("chart.js/auto").ComplexFillTarget | undefined) & import("chart.js/auto").ComplexFillTarget) | import("chart.js/dist/types/utils")._DeepPartialObject<{
-        value: number;
-    }> | import("chart.js/dist/types/utils")._DeepPartialObject<import("chart.js/auto").ComplexFillTarget> | import("chart.js/dist/types/utils")._DeepPartialObject<string & {
-        value: number;
-    }> | import("chart.js/dist/types/utils")._DeepPartialObject<string & import("chart.js/auto").ComplexFillTarget> | import("chart.js/dist/types/utils")._DeepPartialObject<number & {
-        value: number;
-    }> | import("chart.js/dist/types/utils")._DeepPartialObject<number & import("chart.js/auto").ComplexFillTarget> | import("chart.js/dist/types/utils")._DeepPartialObject<false & {
-        value: number;
-    }> | import("chart.js/dist/types/utils")._DeepPartialObject<false & import("chart.js/auto").ComplexFillTarget> | import("chart.js/dist/types/utils")._DeepPartialObject<true & {
-        value: number;
-    }> | import("chart.js/dist/types/utils")._DeepPartialObject<true & import("chart.js/auto").ComplexFillTarget> | import("chart.js/dist/types/utils")._DeepPartialObject<{
-        value: number;
-    } & string> | import("chart.js/dist/types/utils")._DeepPartialObject<{
-        value: number;
-    } & number> | import("chart.js/dist/types/utils")._DeepPartialObject<{
-        value: number;
-    } & false> | import("chart.js/dist/types/utils")._DeepPartialObject<{
-        value: number;
-    } & true> | import("chart.js/dist/types/utils")._DeepPartialObject<{
-        value: number;
-    } & import("chart.js/auto").ComplexFillTarget> | import("chart.js/dist/types/utils")._DeepPartialObject<import("chart.js/auto").ComplexFillTarget & string> | import("chart.js/dist/types/utils")._DeepPartialObject<import("chart.js/auto").ComplexFillTarget & number> | import("chart.js/dist/types/utils")._DeepPartialObject<import("chart.js/auto").ComplexFillTarget & false> | import("chart.js/dist/types/utils")._DeepPartialObject<import("chart.js/auto").ComplexFillTarget & true> | import("chart.js/dist/types/utils")._DeepPartialObject<import("chart.js/auto").ComplexFillTarget & {
-        value: number;
-    }> | undefined;
-    borderCapStyle?: "round" | "butt" | "square" | ((ctx: import("chart.js/auto").ScriptableContext<"line">, options: import("chart.js/dist/types/basic").AnyObject) => CanvasLineCap | undefined) | undefined;
-    borderDash?: ((ctx: import("chart.js/auto").ScriptableContext<"line">, options: import("chart.js/dist/types/basic").AnyObject) => number[] | undefined) | import("chart.js/dist/types/utils")._DeepPartialArray<number> | undefined;
-    borderDashOffset?: number | ((ctx: import("chart.js/auto").ScriptableContext<"line">, options: import("chart.js/dist/types/basic").AnyObject) => number | undefined) | undefined;
-    borderJoinStyle?: "round" | "bevel" | "miter" | ((ctx: import("chart.js/auto").ScriptableContext<"line">, options: import("chart.js/dist/types/basic").AnyObject) => CanvasLineJoin | undefined) | undefined;
-    capBezierPoints?: boolean | ((ctx: import("chart.js/auto").ScriptableContext<"line">, options: import("chart.js/dist/types/basic").AnyObject) => boolean | undefined) | undefined;
-    cubicInterpolationMode?: "default" | "monotone" | ((ctx: import("chart.js/auto").ScriptableContext<"line">, options: import("chart.js/dist/types/basic").AnyObject) => "default" | "monotone" | undefined) | undefined;
-    tension?: number | ((ctx: import("chart.js/auto").ScriptableContext<"line">, options: import("chart.js/dist/types/basic").AnyObject) => number | undefined) | undefined;
-    stepped?: boolean | "before" | "after" | "middle" | ((ctx: import("chart.js/auto").ScriptableContext<"line">, options: import("chart.js/dist/types/basic").AnyObject) => boolean | "before" | "after" | "middle" | undefined) | undefined;
-    segment?: ((ctx: import("chart.js/auto").ScriptableContext<"line">, options: import("chart.js/dist/types/basic").AnyObject) => {
-        backgroundColor: import("chart.js/auto").Scriptable<import("chart.js/auto").Color | undefined, import("chart.js/auto").ScriptableLineSegmentContext>;
-        borderColor: import("chart.js/auto").Scriptable<import("chart.js/auto").Color | undefined, import("chart.js/auto").ScriptableLineSegmentContext>;
-        borderCapStyle: import("chart.js/auto").Scriptable<CanvasLineCap | undefined, import("chart.js/auto").ScriptableLineSegmentContext>;
-        borderDash: import("chart.js/auto").Scriptable<number[] | undefined, import("chart.js/auto").ScriptableLineSegmentContext>;
-        borderDashOffset: import("chart.js/auto").Scriptable<number | undefined, import("chart.js/auto").ScriptableLineSegmentContext>;
-        borderJoinStyle: import("chart.js/auto").Scriptable<CanvasLineJoin | undefined, import("chart.js/auto").ScriptableLineSegmentContext>;
-        borderWidth: import("chart.js/auto").Scriptable<number | undefined, import("chart.js/auto").ScriptableLineSegmentContext>;
-    } | undefined) | import("chart.js/dist/types/utils")._DeepPartialObject<{
-        backgroundColor: import("chart.js/auto").Scriptable<import("chart.js/auto").Color | undefined, import("chart.js/auto").ScriptableLineSegmentContext>;
-        borderColor: import("chart.js/auto").Scriptable<import("chart.js/auto").Color | undefined, import("chart.js/auto").ScriptableLineSegmentContext>;
-        borderCapStyle: import("chart.js/auto").Scriptable<CanvasLineCap | undefined, import("chart.js/auto").ScriptableLineSegmentContext>;
-        borderDash: import("chart.js/auto").Scriptable<number[] | undefined, import("chart.js/auto").ScriptableLineSegmentContext>;
-        borderDashOffset: import("chart.js/auto").Scriptable<number | undefined, import("chart.js/auto").ScriptableLineSegmentContext>;
-        borderJoinStyle: import("chart.js/auto").Scriptable<CanvasLineJoin | undefined, import("chart.js/auto").ScriptableLineSegmentContext>;
-        borderWidth: import("chart.js/auto").Scriptable<number | undefined, import("chart.js/auto").ScriptableLineSegmentContext>;
-    }> | undefined;
-    borderWidth?: number | ((ctx: import("chart.js/auto").ScriptableContext<"line">, options: import("chart.js/dist/types/basic").AnyObject) => number | undefined) | readonly (number | undefined)[] | undefined;
-    borderColor?: string | import("chart.js/dist/types/utils")._DeepPartialObject<CanvasGradient> | import("chart.js/dist/types/utils")._DeepPartialObject<CanvasPattern> | ((ctx: import("chart.js/auto").ScriptableContext<"line">, options: import("chart.js/dist/types/basic").AnyObject) => import("chart.js/auto").Color | undefined) | readonly (string | import("chart.js/dist/types/utils")._DeepPartialObject<CanvasGradient> | import("chart.js/dist/types/utils")._DeepPartialObject<CanvasPattern> | undefined)[] | undefined;
-    backgroundColor?: string | import("chart.js/dist/types/utils")._DeepPartialObject<CanvasGradient> | import("chart.js/dist/types/utils")._DeepPartialObject<CanvasPattern> | ((ctx: import("chart.js/auto").ScriptableContext<"line">, options: import("chart.js/dist/types/basic").AnyObject) => import("chart.js/auto").Color | undefined) | readonly (string | import("chart.js/dist/types/utils")._DeepPartialObject<CanvasGradient> | import("chart.js/dist/types/utils")._DeepPartialObject<CanvasPattern> | undefined)[] | undefined;
-    hoverBorderCapStyle?: "round" | "butt" | "square" | ((ctx: import("chart.js/auto").ScriptableContext<"line">, options: import("chart.js/dist/types/basic").AnyObject) => CanvasLineCap | undefined) | undefined;
-    hoverBorderDash?: ((ctx: import("chart.js/auto").ScriptableContext<"line">, options: import("chart.js/dist/types/basic").AnyObject) => number[] | undefined) | import("chart.js/dist/types/utils")._DeepPartialArray<number> | undefined;
-    hoverBorderDashOffset?: number | ((ctx: import("chart.js/auto").ScriptableContext<"line">, options: import("chart.js/dist/types/basic").AnyObject) => number | undefined) | undefined;
-    hoverBorderJoinStyle?: "round" | "bevel" | "miter" | ((ctx: import("chart.js/auto").ScriptableContext<"line">, options: import("chart.js/dist/types/basic").AnyObject) => CanvasLineJoin | undefined) | undefined;
-    hoverBorderWidth?: number | ((ctx: import("chart.js/auto").ScriptableContext<"line">, options: import("chart.js/dist/types/basic").AnyObject) => number | undefined) | readonly (number | undefined)[] | undefined;
-    hoverBorderColor?: string | import("chart.js/dist/types/utils")._DeepPartialObject<CanvasGradient> | import("chart.js/dist/types/utils")._DeepPartialObject<CanvasPattern> | ((ctx: import("chart.js/auto").ScriptableContext<"line">, options: import("chart.js/dist/types/basic").AnyObject) => import("chart.js/auto").Color | undefined) | readonly (string | import("chart.js/dist/types/utils")._DeepPartialObject<CanvasGradient> | import("chart.js/dist/types/utils")._DeepPartialObject<CanvasPattern> | undefined)[] | undefined;
-    hoverBackgroundColor?: string | import("chart.js/dist/types/utils")._DeepPartialObject<CanvasGradient> | import("chart.js/dist/types/utils")._DeepPartialObject<CanvasPattern> | ((ctx: import("chart.js/auto").ScriptableContext<"line">, options: import("chart.js/dist/types/basic").AnyObject) => import("chart.js/auto").Color | undefined) | readonly (string | import("chart.js/dist/types/utils")._DeepPartialObject<CanvasGradient> | import("chart.js/dist/types/utils")._DeepPartialObject<CanvasPattern> | undefined)[] | undefined;
-    animation?: false | import("chart.js/dist/types/utils")._DeepPartialObject<import("chart.js/auto").AnimationSpec<"line"> & {
-        onProgress?: ((this: import("chart.js/auto").default<keyof import("chart.js/auto").ChartTypeRegistry, (number | Point | [number, number] | import("chart.js/auto").BubbleDataPoint | null)[], unknown>, event: import("chart.js/auto").AnimationEvent) => void) | undefined;
-        onComplete?: ((this: import("chart.js/auto").default<keyof import("chart.js/auto").ChartTypeRegistry, (number | Point | [number, number] | import("chart.js/auto").BubbleDataPoint | null)[], unknown>, event: import("chart.js/auto").AnimationEvent) => void) | undefined;
-    }> | undefined;
-    animations?: import("chart.js/dist/types/utils")._DeepPartialObject<import("chart.js/auto").AnimationsSpec<"line">> | undefined;
-    transitions?: import("chart.js/dist/types/utils")._DeepPartialObject<import("chart.js/auto").TransitionsSpec<"line">> | undefined;
-    data: (number | Point | null)[];
-};
+export declare const getDefaultDatasetStyle: (dataSet: ChartDataset<"line", (number | Point | null)[]>, dsIndex: number, useThinLines?: boolean) => ChartDataset<"line", (number | Point | null)[]>;

package/dist/list/itemCompact/itemCompact.d.ts

@@ -14,5 +14,6 @@ export interface IItemCompact extends IZenComponentProps {
     data?: ReactNode;
     isDrive?: boolean;
     isMobile?: boolean;
+    target?: React.HTMLAttributeAnchorTarget;
 }
-export declare const ItemCompact: ({ className, iconLeft, iconLeftType, name, link, iconRight, iconRightType, status, data }: IItemCompact) => import("react/jsx-runtime").JSX.Element;
+export declare const ItemCompact: ({ className, iconLeft, iconLeftType, name, link, iconRight, iconRightType, status, data, target }: IItemCompact) => import("react/jsx-runtime").JSX.Element;

package/dist/list/itemCompact/itemCompact.js

@@ -6,7 +6,7 @@ const react_1 = require("react");
 const classNames_1 = require("../../commonHelpers/classNames/classNames");
 const useDriveClassName_1 = require("../../utils/theme/useDriveClassName");
 const useIconSize_1 = require("../../utils/theme/useIconSize");
-const ItemCompact = ({ className, iconLeft, iconLeftType, name, link, iconRight, iconRightType, status, data }) => {
+const ItemCompact = ({ className, iconLeft, iconLeftType, name, link, iconRight, iconRightType, status, data, target }) => {
     const listClassName = (0, useDriveClassName_1.useDriveClassName)("zen-list-item-compact");
     const iconSize = (0, useIconSize_1.useIconSize)();
     const renderIcon = (0, react_1.useCallback)((icon, type) => {
@@ -19,6 +19,6 @@ const ItemCompact = ({ className, iconLeft, iconLeftType, name, link, iconRight,
         }
         return icon;
     }, [iconSize]);
-    return (0, jsx_runtime_1.jsxs)("li", { className: (0, classNames_1.classNames)(["zen-list-item-compact", listClassName || "", className || ""]), children: [iconLeft ? (0, jsx_runtime_1.jsx)("div", { className: "zen-list-item-compact__left-icon", children: renderIcon(iconLeft, iconLeftType) }) : null, name ? (0, jsx_runtime_1.jsx)("div", { className: "zen-list-item-compact__name", children: link ? (0, jsx_runtime_1.jsx)("a", { href: link, className: "zen-link zen-link--light zen-link--inline", children: name }) : name }) : null, iconRight ? (0, jsx_runtime_1.jsx)("div", { className: "zen-list-item-compact__right-icon", children: renderIcon(iconRight, iconRightType) }) : null, status ? (0, jsx_runtime_1.jsx)("div", { className: "zen-list-item-compact__status", children: status }) : null, data ? (0, jsx_runtime_1.jsx)("div", { className: "zen-list-item-compact__data", children: data }) : null] });
+    return (0, jsx_runtime_1.jsxs)("li", { className: (0, classNames_1.classNames)(["zen-list-item-compact", listClassName || "", className || ""]), children: [iconLeft ? (0, jsx_runtime_1.jsx)("div", { className: "zen-list-item-compact__left-icon", children: renderIcon(iconLeft, iconLeftType) }) : null, name ? (0, jsx_runtime_1.jsx)("div", { className: "zen-list-item-compact__name", children: link ? (0, jsx_runtime_1.jsx)("a", { href: link, target: target, className: "zen-link zen-link--light zen-link--inline", children: name }) : name }) : null, iconRight ? (0, jsx_runtime_1.jsx)("div", { className: "zen-list-item-compact__right-icon", children: renderIcon(iconRight, iconRightType) }) : null, status ? (0, jsx_runtime_1.jsx)("div", { className: "zen-list-item-compact__status", children: status }) : null, data ? (0, jsx_runtime_1.jsx)("div", { className: "zen-list-item-compact__data", children: data }) : null] });
 };
 exports.ItemCompact = ItemCompact;

package/dist/list/itemData/itemData.d.ts

@@ -25,6 +25,7 @@ export interface IItemData {
     onCheck?: (checked: boolean) => void;
     isMobile?: boolean;
     isDrive?: boolean;
+    target?: React.HTMLAttributeAnchorTarget;
 }
 export declare const ItemData: ({ id, ...rest }: IItemData) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/list/itemData/itemDataInternal.d.ts

@@ -24,6 +24,7 @@ export interface IItemData {
     onCheck?: (checked: boolean) => void;
     isMobile?: boolean;
     isDrive?: boolean;
+    target?: React.HTMLAttributeAnchorTarget;
 }
-export declare const ItemDataInternal: ({ id, visible, icon, iconClassName, name, link, secondary, status, actions, data, onClick, checked, onCheck, isDrive, isMobile }: IItemData) => import("react/jsx-runtime").JSX.Element;
+export declare const ItemDataInternal: ({ id, visible, icon, iconClassName, name, link, secondary, status, actions, data, onClick, checked, onCheck, isDrive, isMobile, target }: IItemData) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/list/itemData/itemDataInternal.js

@@ -12,7 +12,7 @@ const iconDotVertical_1 = require("../../icons/iconDotVertical");
 const menu_1 = require("../../menu/menu");
 const isActiveElement_1 = require("../utils/isActiveElement");
 const checkbox_1 = require("../../checkbox/checkbox");
-const ItemDataInternalInner = ({ id, visible, icon, iconClassName, name, link, secondary, status, actions, data, onClick, checked, onCheck, isDrive, isMobile }) => {
+const ItemDataInternalInner = ({ id, visible, icon, iconClassName, name, link, secondary, status, actions, data, onClick, checked, onCheck, isDrive, isMobile, target }) => {
     const { translate } = (0, useLanguage_1.useLanguage)();
     const driveClassName = (0, react_1.useMemo)(() => isDrive
         ? isMobile ? "zen-item-data-drive" : "zen-item-data-drive-tablet"
@@ -56,10 +56,10 @@ const ItemDataInternalInner = ({ id, visible, icon, iconClassName, name, link, s
         return (0, jsx_runtime_1.jsx)("li", { style: placeholderHeight, className: classNamesList, "data-list-item-id": id }, id);
     }
     return (0, jsx_runtime_1.jsxs)("li", { className: (0, classNames_1.classNames)(["zen-item-data", driveClassName || ""]), "data-list-item-id": id, onClick: handleClick, children: [(0, jsx_runtime_1.jsxs)("div", { className: "zen-item-data__main", children: [hasCheckbox && (0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { className: "zen-item-data__checkbox", checked: checked, onChange: handleCheck, title: name }), icon ? (0, jsx_runtime_1.jsx)("div", { className: (0, classNames_1.classNames)(["zen-item-data__icon", iconClassName || ""]), children: renderIcon(icon) }) : null, (0, jsx_runtime_1.jsxs)("div", { className: "zen-item-data__main-data", children: [(0, jsx_runtime_1.jsxs)("div", { className: "zen-item-data__identifier", children: [link
-                                        ? (0, jsx_runtime_1.jsx)("a", { href: link, className: "zen-item-data__link zen-link zen-link--light zen-link--inline", children: name })
+                                        ? (0, jsx_runtime_1.jsx)("a", { href: link, target: target, className: "zen-item-data__link zen-link zen-link--light zen-link--inline", children: name })
                                         : (0, jsx_runtime_1.jsx)("div", { className: "zen-item-data__name", children: name }), secondary ? (0, jsx_runtime_1.jsx)("div", { className: "zen-item-data__secondary", children: secondary }) : null] }), status ? (0, jsx_runtime_1.jsx)("div", { className: "zen-item-data__status", children: status }) : null, renderActions(), onClick ? (0, jsx_runtime_1.jsx)(button_1.Button, { type: "tertiary-black", className: "zen-item-data__click", onClick: onClick, title: translate("Open"), "aria-label": translate("Open"), children: (0, jsx_runtime_1.jsx)(iconChevronRight_1.IconChevronRight, { size: "large", className: "zen-item-data__click-icon" }) }) : null] })] }), data && data.length > 0
                 ? (0, jsx_runtime_1.jsxs)("div", { className: "zen-item-data__secondary-data", children: [hasCheckbox ? (0, jsx_runtime_1.jsx)("div", { className: "zen-item-data__checkbox-placeholder" }) : null, icon ? (0, jsx_runtime_1.jsx)("div", { className: "zen-item-data__icon-placeholder" }) : null, (0, jsx_runtime_1.jsx)("div", { className: "zen-item-data__data", children: data.map((item, index) => ((0, jsx_runtime_1.jsxs)("div", { className: "zen-item-data__data-row", children: [item.label ? (0, jsx_runtime_1.jsx)("span", { className: "zen-item-data__data-label", children: item.label }) : null, (0, jsx_runtime_1.jsxs)("span", { className: "zen-item-data__data-value", children: [item.icon ? renderIcon(item.icon, item.iconClassName, "zen-item-data__data-value-icon") : null, item.link
-                                                ? (0, jsx_runtime_1.jsx)("a", { className: "zen-link zen-link--inline zen-link--light", href: item.link, children: item.value })
+                                                ? (0, jsx_runtime_1.jsx)("a", { className: "zen-link zen-link--inline zen-link--light", href: item.link, target: target, children: item.value })
                                                 : (0, jsx_runtime_1.jsx)("span", { className: "zen-item-data__data-value-text", children: item.value })] })] }, index))) })] })
                 : null] }, id);
 };

package/dist/list/listItem/listItem.d.ts

@@ -11,6 +11,7 @@ export interface IListItem extends IZenComponentProps {
     actions?: TListItemAction[];
     onClick?: () => void;
     link?: string;
+    target?: React.HTMLAttributeAnchorTarget;
     onDragStart?: (e: React.PointerEvent<HTMLElement>) => void;
 }
-export declare const ListItem: ({ id, className, image, name, secondary, status, actions, onClick, link, onDragStart }: IListItem) => import("react/jsx-runtime").JSX.Element;
+export declare const ListItem: ({ id, className, image, name, secondary, status, actions, onClick, link, target, onDragStart }: IListItem) => import("react/jsx-runtime").JSX.Element;