@geotab/zenith 3.14.1 → 3.15.0-beta.1

package/esm/icons/iconToggleLarge.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useId } from "react";
+import { classNames } from "../commonHelpers/classNames/classNames";
+export const IconToggleLarge = ({ className, size, title, description, focusable = false }) => {
+    const uniqueId = useId();
+    const classes = useMemo(() => classNames(["zen-icon", size ? `zen-icon--${size}` : "", className !== null && className !== void 0 ? className : ""]), [size, className]);
+    return (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", focusable: focusable ? "true" : undefined, tabIndex: focusable ? 0 : undefined, role: focusable || title || description ? undefined : "presentation", className: classes, "aria-labelledby": title && focusable ? uniqueId : undefined, "data-name": "IconToggleLarge", children: [title ? _jsx("title", { id: uniqueId, children: title }) : null, description ? _jsx("desc", { children: description }) : null, _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M1 12C1 8.68629 3.68629 6 7 6H17C20.3137 6 23 8.68629 23 12C23 15.3137 20.3137 18 17 18H7C3.68629 18 1 15.3137 1 12ZM17 16C19.2091 16 21 14.2091 21 12C21 9.79086 19.2091 8 17 8C14.7909 8 13 9.79086 13 12C13 14.2091 14.7909 16 17 16ZM12.5278 8C11.5777 9.06151 11 10.4633 11 12C11 13.5367 11.5777 14.9385 12.5278 16H7C4.79086 16 3 14.2091 3 12C3 9.79086 4.79086 8 7 8H12.5278Z" })] }));
+};

package/esm/icons/iconToggleSmall.d.ts

@@ -0,0 +1,3 @@
+import "./icon.less";
+import { IIcon } from "./icon";
+export declare const IconToggleSmall: ({ className, size, title, description, focusable }: IIcon) => import("react/jsx-runtime").JSX.Element;

package/esm/icons/iconToggleSmall.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useId } from "react";
+import { classNames } from "../commonHelpers/classNames/classNames";
+export const IconToggleSmall = ({ className, size, title, description, focusable = false }) => {
+    const uniqueId = useId();
+    const classes = useMemo(() => classNames(["zen-icon", size ? `zen-icon--${size}` : "", className !== null && className !== void 0 ? className : ""]), [size, className]);
+    return (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", focusable: focusable ? "true" : undefined, tabIndex: focusable ? 0 : undefined, role: focusable || title || description ? undefined : "presentation", className: classes, "aria-labelledby": title && focusable ? uniqueId : undefined, "data-name": "IconToggleSmall", children: [title ? _jsx("title", { id: uniqueId, children: title }) : null, description ? _jsx("desc", { children: description }) : null, _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M1 12C1 8.13401 4.13401 5 8 5H16C19.866 5 23 8.13401 23 12C23 15.866 19.866 19 16 19H8C4.13401 19 1 15.866 1 12ZM8 7C5.23858 7 3 9.23858 3 12C3 14.7614 5.23858 17 8 17H16C18.7614 17 21 14.7614 21 12C21 9.23858 18.7614 7 16 7H8ZM12 12C12 9.79086 13.7909 8 16 8C18.2091 8 20 9.79086 20 12C20 14.2091 18.2091 16 16 16C13.7909 16 12 14.2091 12 12ZM16 10C14.8954 10 14 10.8954 14 12C14 13.1046 14.8954 14 16 14C17.1046 14 18 13.1046 18 12C18 10.8954 17.1046 10 16 10Z" })] }));
+};

package/esm/icons/iconTrendNeutral.d.ts

@@ -0,0 +1,3 @@
+import "./icon.less";
+import { IIcon } from "./icon";
+export declare const IconTrendNeutral: ({ className, size, title, description, focusable }: IIcon) => import("react/jsx-runtime").JSX.Element;

package/esm/icons/iconTrendNeutral.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useId } from "react";
+import { classNames } from "../commonHelpers/classNames/classNames";
+export const IconTrendNeutral = ({ className, size, title, description, focusable = false }) => {
+    const uniqueId = useId();
+    const classes = useMemo(() => classNames(["zen-icon", size ? `zen-icon--${size}` : "", className !== null && className !== void 0 ? className : ""]), [size, className]);
+    return (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", focusable: focusable ? "true" : undefined, tabIndex: focusable ? 0 : undefined, role: focusable || title || description ? undefined : "presentation", className: classes, "aria-labelledby": title && focusable ? uniqueId : undefined, "data-name": "IconTrendNeutral", children: [title ? _jsx("title", { id: uniqueId, children: title }) : null, description ? _jsx("desc", { children: description }) : null, _jsx("path", { fillRule: "evenodd", d: "M7 12a1 1 0 0 1 1-1h8a1 1 0 1 1 0 2H8a1 1 0 0 1-1-1", clipRule: "evenodd" })] }));
+};

package/esm/icons/iconTruck.d.ts

@@ -0,0 +1,3 @@
+import "./icon.less";
+import { IIcon } from "./icon";
+export declare const IconTruck: ({ className, size, title, description, focusable }: IIcon) => import("react/jsx-runtime").JSX.Element;

package/esm/icons/iconTruck.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useId } from "react";
+import { classNames } from "../commonHelpers/classNames/classNames";
+export const IconTruck = ({ className, size, title, description, focusable = false }) => {
+    const uniqueId = useId();
+    const classes = useMemo(() => classNames(["zen-icon", size ? `zen-icon--${size}` : "", className !== null && className !== void 0 ? className : ""]), [size, className]);
+    return (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", focusable: focusable ? "true" : undefined, tabIndex: focusable ? 0 : undefined, role: focusable || title || description ? undefined : "presentation", className: classes, "aria-labelledby": title && focusable ? uniqueId : undefined, "data-name": "IconTruck", children: [title ? _jsx("title", { id: uniqueId, children: title }) : null, description ? _jsx("desc", { children: description }) : null, _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8 5C8 4.44772 8.44772 4 9 4H21C21.5523 4 22 4.44772 22 5V16C22 16.5523 21.5523 17 21 17H19.9646C19.7219 18.6961 18.2632 20 16.5 20C14.7368 20 13.2781 18.6961 13.0354 17H10.9646C10.7219 18.6961 9.26324 20 7.5 20C5.73676 20 4.27806 18.6961 4.03544 17H3C2.44772 17 2 16.5523 2 16V10C2 9.80258 2.05844 9.60957 2.16795 9.4453L4.16795 6.4453C4.35342 6.1671 4.66565 6 5 6H8V5ZM8 8H5.53518L4 10.3028V15H4.33682C4.89855 13.8175 6.1038 13 7.5 13C7.66976 13 7.8367 13.0121 8 13.0354V8ZM9.94949 14C10.2424 14.2871 10.4851 14.6252 10.6632 15H13.3368C13.8985 13.8175 15.1038 13 16.5 13C17.8962 13 19.1015 13.8175 19.6632 15H20V6H10V14H9.94949ZM7.5 15C6.67157 15 6 15.6716 6 16.5C6 17.3284 6.67157 18 7.5 18C8.32843 18 9 17.3284 9 16.5C9 15.6716 8.32843 15 7.5 15ZM16.5 15C15.6716 15 15 15.6716 15 16.5C15 17.3284 15.6716 18 16.5 18C17.3284 18 18 17.3284 18 16.5C18 15.6716 17.3284 15 16.5 15Z" })] }));
+};

package/esm/index.d.ts

@@ -174,6 +174,7 @@ export { type IHeaderButton, HeaderButtonDisplayName, HeaderButton } from "./hea
 export { type IHeaderMenu, HeaderMenuDisplayName, HeaderMenu } from "./header/headerMenu";
 export { useCustomMenu } from "./header/hooks/useCustomMenu";
 export { type IIcon } from "./icons/icon";
+export { IconAce } from "./icons/iconAce";
 export { IconActivity } from "./icons/iconActivity";
 export { IconAddPeople } from "./icons/iconAddPeople";
 export { IconAiImages } from "./icons/iconAiImages";
@@ -243,6 +244,7 @@ export { IconBookmarkFill } from "./icons/iconBookmarkFill";
 export { IconBookmarkPlus } from "./icons/iconBookmarkPlus";
 export { IconBookmarkSelectedHover } from "./icons/iconBookmarkSelectedHover";
 export { IconBranches } from "./icons/iconBranches";
+export { IconBreak } from "./icons/iconBreak";
 export { IconBrokenLink } from "./icons/iconBrokenLink";
 export { IconBrowser } from "./icons/iconBrowser";
 export { IconBrush } from "./icons/iconBrush";
@@ -294,6 +296,7 @@ export { IconChevronLeft } from "./icons/iconChevronLeft";
 export { IconChevronLeftSmall } from "./icons/iconChevronLeftSmall";
 export { IconChevronRight } from "./icons/iconChevronRight";
 export { IconChevronRightSmall } from "./icons/iconChevronRightSmall";
+export { IconChevronStepper } from "./icons/iconChevronStepper";
 export { IconChevronTop } from "./icons/iconChevronTop";
 export { IconChevronTopSmall } from "./icons/iconChevronTopSmall";
 export { IconChromecast } from "./icons/iconChromecast";
@@ -567,6 +570,7 @@ export { IconPlusCircle } from "./icons/iconPlusCircle";
 export { IconPlusFile } from "./icons/iconPlusFile";
 export { IconPlusLines } from "./icons/iconPlusLines";
 export { IconPlusSquare } from "./icons/iconPlusSquare";
+export { IconPotato } from "./icons/iconPotato";
 export { IconPound } from "./icons/iconPound";
 export { IconPrinter } from "./icons/iconPrinter";
 export { IconProcessor } from "./icons/iconProcessor";
@@ -647,7 +651,11 @@ export { IconThermograph } from "./icons/iconThermograph";
 export { IconThermometer } from "./icons/iconThermometer";
 export { IconThumbsDown } from "./icons/iconThumbsDown";
 export { IconThumbsUp } from "./icons/iconThumbsUp";
+export { IconToggleLarge } from "./icons/iconToggleLarge";
+export { IconToggleSmall } from "./icons/iconToggleSmall";
 export { IconTrailer } from "./icons/iconTrailer";
+export { IconTrendNeutral } from "./icons/iconTrendNeutral";
+export { IconTruck } from "./icons/iconTruck";
 export { IconUmbrella } from "./icons/iconUmbrella";
 export { IconUnderline } from "./icons/iconUnderline";
 export { IconUndo } from "./icons/iconUndo";

package/esm/index.js

@@ -163,6 +163,7 @@ export { HeaderBackDisplayName, HeaderBack } from "./header/headerBack";
 export { HeaderButtonDisplayName, HeaderButton } from "./header/headerButton";
 export { HeaderMenuDisplayName, HeaderMenu } from "./header/headerMenu";
 export { useCustomMenu } from "./header/hooks/useCustomMenu";
+export { IconAce } from "./icons/iconAce";
 export { IconActivity } from "./icons/iconActivity";
 export { IconAddPeople } from "./icons/iconAddPeople";
 export { IconAiImages } from "./icons/iconAiImages";
@@ -232,6 +233,7 @@ export { IconBookmarkFill } from "./icons/iconBookmarkFill";
 export { IconBookmarkPlus } from "./icons/iconBookmarkPlus";
 export { IconBookmarkSelectedHover } from "./icons/iconBookmarkSelectedHover";
 export { IconBranches } from "./icons/iconBranches";
+export { IconBreak } from "./icons/iconBreak";
 export { IconBrokenLink } from "./icons/iconBrokenLink";
 export { IconBrowser } from "./icons/iconBrowser";
 export { IconBrush } from "./icons/iconBrush";
@@ -283,6 +285,7 @@ export { IconChevronLeft } from "./icons/iconChevronLeft";
 export { IconChevronLeftSmall } from "./icons/iconChevronLeftSmall";
 export { IconChevronRight } from "./icons/iconChevronRight";
 export { IconChevronRightSmall } from "./icons/iconChevronRightSmall";
+export { IconChevronStepper } from "./icons/iconChevronStepper";
 export { IconChevronTop } from "./icons/iconChevronTop";
 export { IconChevronTopSmall } from "./icons/iconChevronTopSmall";
 export { IconChromecast } from "./icons/iconChromecast";
@@ -556,6 +559,7 @@ export { IconPlusCircle } from "./icons/iconPlusCircle";
 export { IconPlusFile } from "./icons/iconPlusFile";
 export { IconPlusLines } from "./icons/iconPlusLines";
 export { IconPlusSquare } from "./icons/iconPlusSquare";
+export { IconPotato } from "./icons/iconPotato";
 export { IconPound } from "./icons/iconPound";
 export { IconPrinter } from "./icons/iconPrinter";
 export { IconProcessor } from "./icons/iconProcessor";
@@ -635,7 +639,11 @@ export { IconThermograph } from "./icons/iconThermograph";
 export { IconThermometer } from "./icons/iconThermometer";
 export { IconThumbsDown } from "./icons/iconThumbsDown";
 export { IconThumbsUp } from "./icons/iconThumbsUp";
+export { IconToggleLarge } from "./icons/iconToggleLarge";
+export { IconToggleSmall } from "./icons/iconToggleSmall";
 export { IconTrailer } from "./icons/iconTrailer";
+export { IconTrendNeutral } from "./icons/iconTrendNeutral";
+export { IconTruck } from "./icons/iconTruck";
 export { IconUmbrella } from "./icons/iconUmbrella";
 export { IconUnderline } from "./icons/iconUnderline";
 export { IconUndo } from "./icons/iconUndo";

package/esm/layout/layout.d.ts

@@ -22,5 +22,6 @@ interface ILayoutComponents {
     FullScreenButton: React.FC<IFullScreenButton>;
 }
 export declare const getContentPaddings: (isMobile: boolean, startWithToolbar: boolean) => number;
-export declare const Layout: (({ id, className, pageScrolling, children }: ILayout) => import("react/jsx-runtime").JSX.Element | null) & ILayoutComponents;
+declare const LayoutInner: ({ id, className, pageScrolling, children }: ILayout) => import("react/jsx-runtime").JSX.Element | null;
+export declare const Layout: typeof LayoutInner & ILayoutComponents;
 export {};

package/esm/layout/layoutBanner.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { IZenComponentProps } from "../commonHelpers/zenComponent";
 export interface ILayoutBanner extends IZenComponentProps {
     children: React.ReactNode;

package/esm/lineChart/lineChart.d.ts

@@ -2,6 +2,7 @@ import { IZenComponentProps } from "../commonHelpers/zenComponent";
 import type { ChartData, ChartOptions, Plugin, PluginOptionsByType } from "chart.js/auto";
 import "../react-chartjs/dateAdapter";
 import { ILegendOptions } from "./plugins/htmlLegend";
+import "./lineChart.less";
 interface ILineChartPluginOptions extends Partial<PluginOptionsByType<"line">> {
     htmlLegend?: ILegendOptions;
 }

package/esm/lineChart/lineChart.js

@@ -1,13 +1,11 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
+import { injectString } from "../utils/localization/translationsDictionary";
+var __rest = this && this.__rest || function (s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
 };
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useContext, useEffect, useMemo } from "react";
@@ -20,73 +18,135 @@ import { LEGEND_PLUGIN_ID } from "./plugins/htmlLegend";
 import { useDrive } from "../utils/theme/useDrive";
 import { useMobile } from "../commonHelpers/hooks/useMobile";
 import { themeContext } from "../utils/theme/themeContext";
+import { useLanguage } from "../utils/localization/useLanguage";
+injectString("cs", "Line chart", "Spojnicov\xFD graf");
+injectString("da-DK", "Line chart", "Linjediagram");
+injectString("de", "Line chart", "Liniendiagramm");
+injectString("en", "Line chart", "Line chart");
+injectString("es", "Line chart", "Gr\xE1fico de l\xEDneas");
+injectString("fi-FI", "Line chart", "Viivakaavio");
+injectString("fr", "Line chart", "Graphique lin\xE9aire");
+injectString("fr-FR", "Line chart", "Graphique lin\xE9aire");
+injectString("hu-HU", "Line chart", "Vonaldiagram");
+injectString("id", "Line chart", "Bagan garis");
+injectString("it", "Line chart", "Grafico a linee");
+injectString("ja", "Line chart", "\u6298\u308C\u7DDA\u30B0\u30E9\u30D5");
+injectString("ko-KR", "Line chart", "\uC120\uD615 \uCC28\uD2B8");
+injectString("ms", "Line chart", "Carta garisan");
+injectString("nb-NO", "Line chart", "Linjediagram");
+injectString("nl", "Line chart", "Lijndiagram");
+injectString("pl", "Line chart", "Wykres liniowy");
+injectString("pt-BR", "Line chart", "Gr\xE1fico de linhas");
+injectString("pt-PT", "Line chart", "Gr\xE1fico de linhas");
+injectString("sk-SK", "Line chart", "\u010Ciarov\xFD graf");
+injectString("sv", "Line chart", "Linjediagram");
+injectString("th", "Line chart", "\u0E41\u0E1C\u0E19\u0E20\u0E39\u0E21\u0E34\u0E40\u0E2A\u0E49\u0E19");
+injectString("tr", "Line chart", "\xC7izgi grafik");
+injectString("zh-Hans", "Line chart", "\u6298\u7EBF\u56FE");
+injectString("zh-TW", "Line chart", "\u6298\u7DDA\u5716");
+injectString("ro-RO", "Line chart", "Grafic liniar");
+injectString("ar", "Line chart", "\u0645\u062E\u0637\u0637 \u062E\u0637\u064A");
+injectString("lt-LT", "Line chart", "Linijin\u0117 diagrama");
+injectString("lv-LV", "Line chart", "L\u012Bniju diagramma");
+injectString("ka-GE", "Line chart", "\u10EE\u10D0\u10D6\u10DD\u10D5\u10D0\u10DC\u10D8 \u10E1\u10E5\u10D4\u10DB\u10D0");
+injectString("el-GR", "Line chart", "\u0393\u03C1\u03AC\u03C6\u03B7\u03BC\u03B1 \u03B3\u03C1\u03B1\u03BC\u03BC\u03CE\u03BD");
+injectString("et-EE", "Line chart", "Joondiagramm");
+injectString("bg-BG", "Line chart", "\u041B\u0438\u043D\u0435\u0439\u043D\u0430 \u0434\u0438\u0430\u0433\u0440\u0430\u043C\u0430");
 ChartJS.register(CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend, Filler, TimeScale);
 const defaultGridStyle = {
-    drawTicks: false,
-    color: "#C0CCD8"
+  drawTicks: false,
+  color: "#C0CCD8"
 };
 const defaultGridBorderStyle = {
-    display: false,
-    dash: [2, 2]
+  display: false,
+  dash: [2, 2]
 };
 const defTicksStyle = {
-    padding: 10
+  padding: 10
 };
-const getDefaultOptions = (fontSize) => {
-    const defTitleStyle = {
-        display: true,
-        font: {
-            size: fontSize,
-            weight: "400"
-        }
-    };
-    return {
-        responsive: true,
-        maintainAspectRatio: false,
-        scales: {
-            x: {
-                grid: defaultGridStyle,
-                border: defaultGridBorderStyle,
-                ticks: defTicksStyle,
-                title: defTitleStyle
-            },
-            y: {
-                grid: defaultGridStyle,
-                border: defaultGridBorderStyle,
-                ticks: defTicksStyle,
-                title: defTitleStyle
-            }
-        },
-        plugins: {
-            legend: {
-                display: false
-            },
-            tooltip: {
-                enabled: true
-            }
-        }
-    };
+const getDefaultOptions = fontSize => {
+  const defTitleStyle = {
+    display: true,
+    font: {
+      size: fontSize,
+      weight: "400"
+    }
+  };
+  return {
+    responsive: true,
+    maintainAspectRatio: false,
+    scales: {
+      x: {
+        grid: defaultGridStyle,
+        border: defaultGridBorderStyle,
+        ticks: defTicksStyle,
+        title: defTitleStyle
+      },
+      y: {
+        grid: defaultGridStyle,
+        border: defaultGridBorderStyle,
+        ticks: defTicksStyle,
+        title: defTitleStyle
+      }
+    },
+    plugins: {
+      legend: {
+        display: false
+      },
+      tooltip: {
+        enabled: true
+      }
+    }
+  };
 };
 /**
  * @deprecated - will be removed in the next releases.
  */
-export const LineChart = (_a) => {
-    var { data, options = {}, plugins, className } = _a, rest = __rest(_a, ["data", "options", "plugins", "className"]);
-    const isDrive = useDrive();
-    const isMobile = useMobile();
-    const memoizedFontSize = useMemo(() => (isDrive ? (isMobile ? 14 : 16) : 12), [isDrive, isMobile]);
-    const { dark } = useContext(themeContext);
-    useEffect(() => {
-        ChartJS.defaults.font = {
-            family: "Roboto",
-            size: memoizedFontSize
-        };
-        ChartJS.defaults.color = dark ? "#FFFFFF" : "#1F2833";
-    }, [memoizedFontSize, dark]);
-    const adaptedData = Object.assign({}, data);
-    const memoizedDefaultOptions = useMemo(() => getDefaultOptions(memoizedFontSize), [memoizedFontSize]);
-    const adaptedOptions = deepMerge(memoizedDefaultOptions, options);
-    adaptedData.datasets = adaptedData.datasets.map((ds, i) => getDefaultDatasetStyle(ds, i));
-    const memoizedPlagins = useMemo(() => plugins === null || plugins === void 0 ? void 0 : plugins.map(el => (el.id === LEGEND_PLUGIN_ID ? Object.assign(Object.assign({}, el), { isDrive: isDrive }) : el)), [isDrive, plugins]);
-    return _jsx(Line, Object.assign({ options: adaptedOptions, data: adaptedData, plugins: memoizedPlagins, className: className }, rest));
-};
+export const LineChart = _a => {
+  var {
+      data,
+      options = {},
+      plugins,
+      className
+    } = _a,
+    rest = __rest(_a, ["data", "options", "plugins", "className"]);
+  const {
+    translate
+  } = useLanguage();
+  const isDrive = useDrive();
+  const isMobile = useMobile();
+  const memoizedFontSize = useMemo(() => isDrive ? isMobile ? 14 : 16 : 12, [isDrive, isMobile]);
+  const {
+    dark
+  } = useContext(themeContext);
+  useEffect(() => {
+    ChartJS.defaults.font = {
+      family: "Roboto",
+      size: memoizedFontSize
+    };
+    ChartJS.defaults.color = dark ? "#FFFFFF" : "#1F2833";
+  }, [memoizedFontSize, dark]);
+  const adaptedData = Object.assign({}, data);
+  const memoizedDefaultOptions = useMemo(() => getDefaultOptions(memoizedFontSize), [memoizedFontSize]);
+  const adaptedOptions = deepMerge(memoizedDefaultOptions, options);
+  adaptedData.datasets = adaptedData.datasets.map((ds, i) => getDefaultDatasetStyle(ds, i));
+  const memoizedPlagins = useMemo(() => plugins === null || plugins === void 0 ? void 0 : plugins.map(el => el.id === LEGEND_PLUGIN_ID ? Object.assign(Object.assign({}, el), {
+    isDrive: isDrive
+  }) : el), [isDrive, plugins]);
+  return _jsx("div", {
+    className: "zen-line-chart",
+    tabIndex: 0,
+    style: {
+      width: "100%",
+      height: "100%"
+    },
+    role: "figure",
+    "aria-label": translate("Line chart"),
+    children: _jsx(Line, Object.assign({
+      options: adaptedOptions,
+      data: adaptedData,
+      plugins: memoizedPlagins,
+      className: className
+    }, rest))
+  });
+};

package/esm/lineChartMini/lineChartMini.d.ts

@@ -1,5 +1,6 @@
 import { IZenComponentProps } from "../commonHelpers/zenComponent";
 import type { ChartData, ChartOptions } from "chart.js/auto";
+import "./lineChartMini.less";
 export interface ILineChartMini extends IZenComponentProps {
     data: ChartData<"line">;
     options?: ChartOptions<"line">;

package/esm/lineChartMini/lineChartMini.js

@@ -1,16 +1,14 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
+import { injectString } from "../utils/localization/translationsDictionary";
+var __rest = this && this.__rest || function (s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
 };
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useContext, useEffect, useMemo } from "react";
+import { useContext, useEffect, useId, useMemo } from "react";
 import { Line } from "../react-chartjs/typedCharts";
 import { Chart as ChartJS, CategoryScale, LinearScale, PointElement, LineElement, Filler } from "chart.js/auto";
 import { deepMerge } from "../commonHelpers/utils";
@@ -20,76 +18,141 @@ import { useMobile } from "../commonHelpers/hooks/useMobile";
 import { themeContext } from "../utils/theme/themeContext";
 import { useIsRTL } from "../utils/localization/useIsRTL";
 import { AccessibleChart } from "../chart/accessibleChart/accessibleChart";
+import { useLanguage } from "../utils/localization/useLanguage";
+injectString("cs", "Line chart", "Spojnicov\xFD graf");
+injectString("da-DK", "Line chart", "Linjediagram");
+injectString("de", "Line chart", "Liniendiagramm");
+injectString("en", "Line chart", "Line chart");
+injectString("es", "Line chart", "Gr\xE1fico de l\xEDneas");
+injectString("fi-FI", "Line chart", "Viivakaavio");
+injectString("fr", "Line chart", "Graphique lin\xE9aire");
+injectString("fr-FR", "Line chart", "Graphique lin\xE9aire");
+injectString("hu-HU", "Line chart", "Vonaldiagram");
+injectString("id", "Line chart", "Bagan garis");
+injectString("it", "Line chart", "Grafico a linee");
+injectString("ja", "Line chart", "\u6298\u308C\u7DDA\u30B0\u30E9\u30D5");
+injectString("ko-KR", "Line chart", "\uC120\uD615 \uCC28\uD2B8");
+injectString("ms", "Line chart", "Carta garisan");
+injectString("nb-NO", "Line chart", "Linjediagram");
+injectString("nl", "Line chart", "Lijndiagram");
+injectString("pl", "Line chart", "Wykres liniowy");
+injectString("pt-BR", "Line chart", "Gr\xE1fico de linhas");
+injectString("pt-PT", "Line chart", "Gr\xE1fico de linhas");
+injectString("sk-SK", "Line chart", "\u010Ciarov\xFD graf");
+injectString("sv", "Line chart", "Linjediagram");
+injectString("th", "Line chart", "\u0E41\u0E1C\u0E19\u0E20\u0E39\u0E21\u0E34\u0E40\u0E2A\u0E49\u0E19");
+injectString("tr", "Line chart", "\xC7izgi grafik");
+injectString("zh-Hans", "Line chart", "\u6298\u7EBF\u56FE");
+injectString("zh-TW", "Line chart", "\u6298\u7DDA\u5716");
+injectString("ro-RO", "Line chart", "Grafic liniar");
+injectString("ar", "Line chart", "\u0645\u062E\u0637\u0637 \u062E\u0637\u064A");
+injectString("lt-LT", "Line chart", "Linijin\u0117 diagrama");
+injectString("lv-LV", "Line chart", "L\u012Bniju diagramma");
+injectString("ka-GE", "Line chart", "\u10EE\u10D0\u10D6\u10DD\u10D5\u10D0\u10DC\u10D8 \u10E1\u10E5\u10D4\u10DB\u10D0");
+injectString("el-GR", "Line chart", "\u0393\u03C1\u03AC\u03C6\u03B7\u03BC\u03B1 \u03B3\u03C1\u03B1\u03BC\u03BC\u03CE\u03BD");
+injectString("et-EE", "Line chart", "Joondiagramm");
+injectString("bg-BG", "Line chart", "\u041B\u0438\u043D\u0435\u0439\u043D\u0430 \u0434\u0438\u0430\u0433\u0440\u0430\u043C\u0430");
 ChartJS.defaults.font = {
-    family: "Roboto",
-    size: 12
+  family: "Roboto",
+  size: 12
 };
 ChartJS.register(CategoryScale, LinearScale, PointElement, LineElement, Filler);
 const defaultGridStyle = {
-    display: false
+  display: false
 };
 const defaultGridBorderStyle = {
-    display: false
+  display: false
 };
-const getDefaultOptions = (isRtl) => ({
-    responsive: true,
-    maintainAspectRatio: false,
-    layout: {
-        padding: {
-            left: isRtl ? 16 : 0,
-            right: isRtl ? 0 : 16
-        }
+const getDefaultOptions = isRtl => ({
+  responsive: true,
+  maintainAspectRatio: false,
+  layout: {
+    padding: {
+      left: isRtl ? 16 : 0,
+      right: isRtl ? 0 : 16
+    }
+  },
+  scales: {
+    x: {
+      grid: defaultGridStyle,
+      border: defaultGridBorderStyle,
+      reverse: isRtl,
+      offset: false
     },
-    scales: {
-        x: {
-            grid: defaultGridStyle,
-            border: defaultGridBorderStyle,
-            reverse: isRtl,
-            offset: false
-        },
-        y: {
-            grid: defaultGridStyle,
-            border: defaultGridBorderStyle,
-            position: isRtl ? "right" : "left",
-            ticks: {
-                display: false
-            }
-        }
+    y: {
+      grid: defaultGridStyle,
+      border: defaultGridBorderStyle,
+      position: isRtl ? "right" : "left",
+      ticks: {
+        display: false
+      }
+    }
+  },
+  plugins: {
+    legend: {
+      display: false
     },
-    plugins: {
-        legend: {
-            display: false
-        },
-        tooltip: {
-            enabled: false
-        }
+    tooltip: {
+      enabled: false
     }
+  }
 });
-export const LineChartMini = (_a) => {
-    var _b, _c;
-    var { data, options = {} } = _a, rest = __rest(_a, ["data", "options"]);
-    const isDrive = useDrive();
-    const isMobile = useMobile();
-    const memoizedFontSize = useMemo(() => (isDrive ? (isMobile ? 14 : 16) : 12), [isDrive, isMobile]);
-    const { dark } = useContext(themeContext);
-    const isRtl = useIsRTL();
-    useEffect(() => {
-        ChartJS.defaults.font = {
-            family: "Roboto",
-            size: memoizedFontSize
-        };
-        ChartJS.defaults.color = dark ? "#FFFFFF" : "#1F2833";
-    }, [memoizedFontSize, dark]);
-    const adaptedData = Object.assign({}, data);
-    const defaultOptions = useMemo(() => getDefaultOptions(isRtl), [isRtl]);
-    const adaptedOptions = deepMerge(defaultOptions, options);
-    if (((_b = adaptedData.labels) === null || _b === void 0 ? void 0 : _b.length) === 2) {
-        const maxLabelsCount = Math.max(...data.datasets.map(ds => ds.data.length));
-        const newLabels = Array(maxLabelsCount).fill("");
-        newLabels[0] = (_c = data.labels) === null || _c === void 0 ? void 0 : _c[0];
-        newLabels[newLabels.length - 1] = data.labels ? data.labels[data.labels.length - 1] : "";
-        adaptedData.labels = newLabels;
-    }
-    adaptedData.datasets = adaptedData.datasets.map((ds, i) => getDefaultDatasetStyle(ds, i, true));
-    return (_jsxs(_Fragment, { children: [_jsx(Line, Object.assign({ options: adaptedOptions, data: adaptedData, "aria-hidden": true }, rest)), _jsx(AccessibleChart, { type: "line-mini", data: adaptedData })] }));
-};
+export const LineChartMini = _a => {
+  var _b, _c;
+  var {
+      data,
+      options = {}
+    } = _a,
+    rest = __rest(_a, ["data", "options"]);
+  const {
+    translate
+  } = useLanguage();
+  const narrativeId = useId();
+  const isDrive = useDrive();
+  const isMobile = useMobile();
+  const memoizedFontSize = useMemo(() => isDrive ? isMobile ? 14 : 16 : 12, [isDrive, isMobile]);
+  const {
+    dark
+  } = useContext(themeContext);
+  const isRtl = useIsRTL();
+  useEffect(() => {
+    ChartJS.defaults.font = {
+      family: "Roboto",
+      size: memoizedFontSize
+    };
+    ChartJS.defaults.color = dark ? "#FFFFFF" : "#1F2833";
+  }, [memoizedFontSize, dark]);
+  const adaptedData = Object.assign({}, data);
+  const defaultOptions = useMemo(() => getDefaultOptions(isRtl), [isRtl]);
+  const adaptedOptions = deepMerge(defaultOptions, options);
+  if (((_b = adaptedData.labels) === null || _b === void 0 ? void 0 : _b.length) === 2) {
+    const maxLabelsCount = Math.max(...data.datasets.map(ds => ds.data.length));
+    const newLabels = Array(maxLabelsCount).fill("");
+    newLabels[0] = (_c = data.labels) === null || _c === void 0 ? void 0 : _c[0];
+    newLabels[newLabels.length - 1] = data.labels ? data.labels[data.labels.length - 1] : "";
+    adaptedData.labels = newLabels;
+  }
+  adaptedData.datasets = adaptedData.datasets.map((ds, i) => getDefaultDatasetStyle(ds, i, true));
+  return _jsxs(_Fragment, {
+    children: [_jsx("div", {
+      className: "zen-line-chart-mini",
+      tabIndex: 0,
+      style: {
+        width: "100%",
+        height: "100%"
+      },
+      role: "figure",
+      "aria-label": translate("Line chart"),
+      "aria-describedby": narrativeId,
+      children: _jsx(Line, Object.assign({
+        options: adaptedOptions,
+        data: adaptedData,
+        "aria-hidden": true
+      }, rest))
+    }), _jsx(AccessibleChart, {
+      type: "line-mini",
+      data: adaptedData,
+      narrativeId: narrativeId
+    })]
+  });
+};