@trackunit/react-widgets 2.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (58) hide show
  1. package/README.md +19 -0
  2. package/index.cjs.js +354 -0
  3. package/index.d.ts +1 -0
  4. package/index.esm.js +343 -0
  5. package/package.json +24 -0
  6. package/src/EmptyStates/Error/WidgetError.d.ts +10 -0
  7. package/src/EmptyStates/MissingConfiguration/WidgetMissingConfiguration.d.ts +8 -0
  8. package/src/EmptyStates/NoData/WidgetNoData.d.ts +12 -0
  9. package/src/HorizontalWidgetLayout/HorizontalWidgetLayout.d.ts +13 -0
  10. package/src/HorizontalWidgetLayout/HorizontalWidgetLayout.variants.d.ts +4 -0
  11. package/src/VerticalSplitWidgetLayout/VerticalSplitWidgetLayout.d.ts +12 -0
  12. package/src/VerticalSplitWidgetLayout/VerticalSplitWidgetLayout.variants.d.ts +2 -0
  13. package/src/Widget/WidgetBody.d.ts +25 -0
  14. package/src/Widget/WidgetBody.variants.d.ts +4 -0
  15. package/src/Widget/WidgetEditBody.d.ts +33 -0
  16. package/src/Widget/WidgetEditBody.variants.d.ts +4 -0
  17. package/src/WidgetKPI/WidgetKPI.d.ts +67 -0
  18. package/src/WidgetKPI/WidgetKPI.variants.d.ts +13 -0
  19. package/src/WidgetList/WidgetList.d.ts +35 -0
  20. package/src/WidgetList/WidgetList.variants.d.ts +2 -0
  21. package/src/WidgetListItem/WidgetListItem.d.ts +16 -0
  22. package/src/WidgetListItem/WidgetListItem.variants.d.ts +1 -0
  23. package/src/index.d.ts +10 -0
  24. package/src/translation.d.ts +33 -0
  25. package/translation.cjs.js +12 -0
  26. package/translation.cjs10.js +12 -0
  27. package/translation.cjs11.js +12 -0
  28. package/translation.cjs12.js +12 -0
  29. package/translation.cjs13.js +12 -0
  30. package/translation.cjs14.js +12 -0
  31. package/translation.cjs15.js +12 -0
  32. package/translation.cjs16.js +12 -0
  33. package/translation.cjs17.js +12 -0
  34. package/translation.cjs2.js +12 -0
  35. package/translation.cjs3.js +12 -0
  36. package/translation.cjs4.js +12 -0
  37. package/translation.cjs5.js +12 -0
  38. package/translation.cjs6.js +12 -0
  39. package/translation.cjs7.js +12 -0
  40. package/translation.cjs8.js +12 -0
  41. package/translation.cjs9.js +12 -0
  42. package/translation.esm.js +10 -0
  43. package/translation.esm10.js +10 -0
  44. package/translation.esm11.js +10 -0
  45. package/translation.esm12.js +10 -0
  46. package/translation.esm13.js +10 -0
  47. package/translation.esm14.js +10 -0
  48. package/translation.esm15.js +10 -0
  49. package/translation.esm16.js +10 -0
  50. package/translation.esm17.js +10 -0
  51. package/translation.esm2.js +10 -0
  52. package/translation.esm3.js +10 -0
  53. package/translation.esm4.js +10 -0
  54. package/translation.esm5.js +10 -0
  55. package/translation.esm6.js +10 -0
  56. package/translation.esm7.js +10 -0
  57. package/translation.esm8.js +10 -0
  58. package/translation.esm9.js +10 -0
package/README.md ADDED
@@ -0,0 +1,19 @@
1
+ # Trackunit React Widgets
2
+ The `@trackunit/react-widgets` package contains basic react widgets, meant for our canvas as part of Trackunits design system.
3
+
4
+ This library is exposed publicly for use in the the Trackunit [Iris App SDK](https://www.npmjs.com/package/@trackunit/iris-app).
5
+
6
+ To browse all available components visit the [Design System](https://design.iris.trackunit.com/).
7
+
8
+ For more info and a full guide on Iris App SDK Development, please visit our [Developer Hub](https://developers.trackunit.com/).
9
+
10
+ ## Development
11
+ At this point this library is only developed by Trackunit Employees.
12
+ For development related information see the [development readme](https://github.com/Trackunit/manager/blob/master/libs/react/components/DEVELOPMENT.md).
13
+
14
+ ## Trackunit
15
+ This package was developed by Trackunit ApS.
16
+ Trackunit is the leading SaaS-based IoT solution for the construction industry, offering an ecosystem of hardware, fleet management software & telematics.
17
+
18
+ ![The Trackunit logo](https://trackunit.com/wp-content/uploads/2022/03/top-logo.svg)
19
+
package/index.cjs.js ADDED
@@ -0,0 +1,354 @@
1
+ 'use strict';
2
+
3
+ var jsxRuntime = require('react/jsx-runtime');
4
+ var i18nLibraryTranslation = require('@trackunit/i18n-library-translation');
5
+ var reactComponents = require('@trackunit/react-components');
6
+ var React = require('react');
7
+ var irisAppRuntimeCore = require('@trackunit/iris-app-runtime-core');
8
+ var cssClassVarianceUtilities = require('@trackunit/css-class-variance-utilities');
9
+
10
+ var defaultTranslations = {
11
+ "widget.edit.cancel": "Cancel",
12
+ "widget.edit.save": "Save",
13
+ "widget.edit.title": "Configure",
14
+ "widget.emptystate.configure": "Configure",
15
+ "widget.emptystate.error": "Something went wrong. Try refreshing the page. If the error persists, contact our support team.",
16
+ "widget.emptystate.missingdata": "This widget needs a quick setup before it can show your data."
17
+ };
18
+
19
+ /** The translation namespace for this library */
20
+ const namespace = "react.widgets";
21
+ /**
22
+ * The TranslationResource for this Library.
23
+ * Holds lazy loaded imports for all languages supported by the library.
24
+ *
25
+ * This is used to register the translations for this library before initializing i18next.
26
+ */
27
+ const translations = {
28
+ ns: namespace,
29
+ default: defaultTranslations,
30
+ languages: {
31
+ de: () => Promise.resolve().then(function () { return require('./translation.cjs.js'); }),
32
+ da: () => Promise.resolve().then(function () { return require('./translation.cjs2.js'); }),
33
+ cs: () => Promise.resolve().then(function () { return require('./translation.cjs3.js'); }),
34
+ nl: () => Promise.resolve().then(function () { return require('./translation.cjs4.js'); }),
35
+ fr: () => Promise.resolve().then(function () { return require('./translation.cjs5.js'); }),
36
+ fi: () => Promise.resolve().then(function () { return require('./translation.cjs6.js'); }),
37
+ hu: () => Promise.resolve().then(function () { return require('./translation.cjs7.js'); }),
38
+ it: () => Promise.resolve().then(function () { return require('./translation.cjs8.js'); }),
39
+ nb: () => Promise.resolve().then(function () { return require('./translation.cjs9.js'); }),
40
+ pl: () => Promise.resolve().then(function () { return require('./translation.cjs10.js'); }),
41
+ pt: () => Promise.resolve().then(function () { return require('./translation.cjs11.js'); }),
42
+ ru: () => Promise.resolve().then(function () { return require('./translation.cjs12.js'); }),
43
+ ro: () => Promise.resolve().then(function () { return require('./translation.cjs13.js'); }),
44
+ es: () => Promise.resolve().then(function () { return require('./translation.cjs14.js'); }),
45
+ sv: () => Promise.resolve().then(function () { return require('./translation.cjs15.js'); }),
46
+ ja: () => Promise.resolve().then(function () { return require('./translation.cjs16.js'); }),
47
+ th: () => Promise.resolve().then(function () { return require('./translation.cjs17.js'); }),
48
+ },
49
+ };
50
+ /**
51
+ * Local useTranslation for this specific library
52
+ */
53
+ const useTranslation = () => i18nLibraryTranslation.useNamespaceTranslation(namespace);
54
+ /**
55
+ * Registers the translations for this library
56
+ */
57
+ const setupLibraryTranslations = () => {
58
+ i18nLibraryTranslation.registerTranslations(translations);
59
+ };
60
+
61
+ var widgetError = "data:image/svg+xml,%3Csvg%20width%3D%22200%22%20height%3D%22200%22%20viewBox%3D%220%200%20200%20200%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M100%20180C144.183%20180%20180%20144.183%20180%20100C180%2055.8172%20144.183%2020%20100%2020C55.8172%2020%2020%2055.8172%2020%20100C20%20144.183%2055.8172%20180%20100%20180Z%22%20fill%3D%22%23F1F5F9%22%2F%3E%3Cpath%20d%3D%22M100.296%20165.188C118.685%20165.188%20133.592%20163.325%20133.592%20161.026C133.592%20158.728%20118.685%20156.864%20100.296%20156.864C81.9071%20156.864%2067%20158.728%2067%20161.026C67%20163.325%2081.9071%20165.188%20100.296%20165.188Z%22%20fill%3D%22%23E2E8F0%22%2F%3E%3Cpath%20d%3D%22M147.348%2063H53.2C49.7758%2063%2047%2065.7758%2047%2069.2V136.494C47%20139.918%2049.7758%20142.694%2053.2%20142.694H147.348C150.772%20142.694%20153.548%20139.918%20153.548%20136.494V69.2C153.548%2065.7758%20150.772%2063%20147.348%2063Z%22%20fill%3D%22%23E2E8F0%22%20stroke%3D%22%23334155%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M147.348%2063H53.2078C51.5635%2063%2049.9865%2063.6532%2048.8238%2064.8159C47.661%2065.9787%2047.0078%2067.5557%2047.0078%2069.2V77.75H153.548V69.2C153.548%2067.5557%20152.895%2065.9787%20151.732%2064.8159C150.569%2063.6532%20148.992%2063%20147.348%2063Z%22%20fill%3D%22white%22%20stroke%3D%22%23334155%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M56.3002%2073.4363C58.0123%2073.4363%2059.4002%2072.0484%2059.4002%2070.3363C59.4002%2068.6242%2058.0123%2067.2363%2056.3002%2067.2363C54.5881%2067.2363%2053.2002%2068.6242%2053.2002%2070.3363C53.2002%2072.0484%2054.5881%2073.4363%2056.3002%2073.4363Z%22%20fill%3D%22%23E2E8F0%22%20stroke%3D%22%23334155%22%20stroke-width%3D%222%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M111.778%20125.45C111.063%20125.451%20110.354%20125.31%20109.693%20125.036C109.032%20124.761%20108.432%20124.358%20107.928%20123.85L100.272%20116.2L92.6062%20123.854C92.1005%20124.359%2091.5002%20124.76%2090.8395%20125.034C90.1789%20125.307%2089.4708%20125.448%2088.7558%20125.448C87.3118%20125.447%2085.927%20124.873%2084.9062%20123.852C83.8854%20122.831%2083.3121%20121.446%2083.3125%20120.002C83.3129%20118.558%2083.8869%20117.173%2084.9082%20116.152L92.5642%20108.498L84.9082%20100.842C83.8869%2099.8211%2083.3129%2098.4364%2083.3125%2096.9924C83.3121%2095.5483%2083.8854%2094.1633%2084.9062%2093.1419C85.927%2092.1206%2087.3118%2091.5466%2088.7558%2091.5462C90.1998%2091.5459%2091.5849%2092.1191%2092.6062%2093.1399L100.272%20100.8L107.928%2093.1419C108.431%2092.6243%20109.032%2092.2118%20109.696%2091.9284C110.36%2091.645%20111.073%2091.4965%20111.795%2091.4913C112.517%2091.4862%20113.233%2091.6246%20113.9%2091.8985C114.568%2092.1724%20115.175%2092.5763%20115.685%2093.0868C116.196%2093.5973%20116.599%2094.2041%20116.873%2094.872C117.147%2095.5399%20117.285%2096.2555%20117.28%2096.9773C117.275%2097.6991%20117.126%2098.4127%20116.842%2099.0765C116.559%2099.7402%20116.146%20100.341%20115.628%20100.844L107.972%20108.5L115.628%20116.154C116.389%20116.916%20116.907%20117.886%20117.117%20118.942C117.327%20119.999%20117.219%20121.093%20116.807%20122.088C116.395%20123.083%20115.698%20123.934%20114.803%20124.532C113.907%20125.131%20112.855%20125.449%20111.778%20125.45Z%22%20fill%3D%22white%22%20stroke%3D%22%23334155%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E";
62
+
63
+ /**
64
+ * Use when you want to show an error state in a widget.
65
+ *
66
+ * @param {WidgetErrorProps} props - The props for the WidgetErrorProps component
67
+ * @returns {ReactNode} WidgetMissingConfiguration component
68
+ */
69
+ const WidgetError = ({ description }) => {
70
+ const [t] = useTranslation();
71
+ return (jsxRuntime.jsx("div", { className: "flex h-full w-full flex-col items-center justify-center", children: jsxRuntime.jsx(reactComponents.EmptyState, { customImageSrc: widgetError, description: description || t("widget.emptystate.error") }) }));
72
+ };
73
+
74
+ var widgetMissingConfiguration = "data:image/svg+xml,%3Csvg%20width%3D%22200%22%20height%3D%22200%22%20viewBox%3D%220%200%20200%20200%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M100%20180C144.183%20180%20180%20144.183%20180%20100C180%2055.8172%20144.183%2020%20100%2020C55.8172%2020%2020%2055.8172%2020%20100C20%20144.183%2055.8172%20180%20100%20180Z%22%20fill%3D%22%23F1F5F9%22%2F%3E%3Cpath%20d%3D%22M100.296%20165.188C118.685%20165.188%20133.592%20163.325%20133.592%20161.026C133.592%20158.728%20118.685%20156.864%20100.296%20156.864C81.9071%20156.864%2067%20158.728%2067%20161.026C67%20163.325%2081.9071%20165.188%20100.296%20165.188Z%22%20fill%3D%22%23E2E8F0%22%2F%3E%3Cpath%20d%3D%22M147.348%2063H53.2C49.7758%2063%2047%2065.7758%2047%2069.2V136.494C47%20139.918%2049.7758%20142.694%2053.2%20142.694H147.348C150.772%20142.694%20153.548%20139.918%20153.548%20136.494V69.2C153.548%2065.7758%20150.772%2063%20147.348%2063Z%22%20fill%3D%22%23E2E8F0%22%20stroke%3D%22%23334155%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M123.038%20107.578H119.01C118.523%20105.078%20117.538%20102.701%20116.113%20100.59L118.964%2097.7352C119.239%2097.4593%20119.394%2097.0853%20119.394%2096.6954C119.394%2096.3054%20119.239%2095.9314%20118.964%2095.6556L115.844%2092.5414C115.708%2092.4045%20115.546%2092.2958%20115.368%2092.2217C115.189%2092.1475%20114.998%2092.1093%20114.805%2092.1093C114.612%2092.1093%20114.421%2092.1475%20114.242%2092.2217C114.064%2092.2958%20113.902%2092.4045%20113.766%2092.5414L110.916%2095.3906C108.804%2093.9684%20106.428%2092.9852%20103.928%2092.4995V88.466C103.928%2088.0772%20103.773%2087.7043%20103.499%2087.4294C103.224%2087.1545%20102.851%2087%20102.462%2087H98.0473C97.6585%2087%2097.2856%2087.1545%2097.0107%2087.4294C96.7357%2087.7043%2096.5813%2088.0772%2096.5813%2088.466V92.4995C94.0812%2092.9863%2091.7046%2093.9709%2089.5928%2095.3948L86.7383%2092.5414C86.6021%2092.4045%2086.4401%2092.2958%2086.2618%2092.2217C86.0834%2092.1475%2085.8922%2092.1093%2085.699%2092.1093C85.5059%2092.1093%2085.3146%2092.1475%2085.1363%2092.2217C84.9579%2092.2958%2084.796%2092.4045%2084.6597%2092.5414L81.5414%2095.6597C81.4043%2095.796%2081.2955%2095.958%2081.2213%2096.1364C81.147%2096.3149%2081.1088%2096.5063%2081.1088%2096.6995C81.1088%2096.8928%2081.147%2097.0842%2081.2213%2097.2626C81.2955%2097.4411%2081.4043%2097.6031%2081.5414%2097.7393L84.3906%20100.589C82.9669%20102.701%2081.982%20105.078%2081.4943%20107.578H77.466C77.0772%20107.578%2076.7043%20107.733%2076.4294%20108.008C76.1545%20108.282%2076%20108.655%2076%20109.044V113.455C76%20113.843%2076.1545%20114.216%2076.4294%20114.491C76.7043%20114.766%2077.0772%20114.921%2077.466%20114.921H81.4943C81.9821%20117.421%2082.967%20119.797%2084.3906%20121.909L81.5414%20124.758C81.4045%20124.895%2081.2958%20125.057%2081.2217%20125.235C81.1475%20125.413%2081.1093%20125.604%2081.1093%20125.798C81.1093%20125.991%2081.1475%20126.182%2081.2217%20126.36C81.2958%20126.539%2081.4045%20126.701%2081.5414%20126.837L84.6597%20129.956C84.796%20130.093%2084.9579%20130.202%2085.1363%20130.276C85.3146%20130.35%2085.5059%20130.388%2085.699%20130.388C85.8922%20130.388%2086.0834%20130.35%2086.2618%20130.276C86.4401%20130.202%2086.6021%20130.093%2086.7383%20129.956L89.5886%20127.106C91.7004%20128.53%2094.077%20129.515%2096.5771%20130.002V134.031C96.5771%20134.223%2096.615%20134.414%2096.6887%20134.592C96.7624%20134.77%2096.8703%20134.931%2097.0065%20135.067C97.1426%20135.203%2097.3042%20135.311%2097.4821%20135.385C97.6599%20135.459%2097.8506%20135.497%2098.0431%20135.497H102.458C102.65%20135.497%20102.841%20135.459%20103.019%20135.385C103.197%20135.311%20103.358%20135.203%20103.494%20135.067C103.631%20134.931%20103.738%20134.77%20103.812%20134.592C103.886%20134.414%20103.924%20134.223%20103.924%20134.031V130.01C106.424%20129.522%20108.8%20128.537%20110.912%20127.113L113.762%20129.964C113.898%20130.101%20114.06%20130.209%20114.238%20130.283C114.416%20130.358%20114.608%20130.396%20114.801%20130.396C114.994%20130.396%20115.185%20130.358%20115.364%20130.283C115.542%20130.209%20115.704%20130.101%20115.84%20129.964L118.964%20126.845C119.101%20126.709%20119.209%20126.547%20119.283%20126.369C119.358%20126.19%20119.396%20125.999%20119.396%20125.806C119.396%20125.613%20119.358%20125.422%20119.283%20125.243C119.209%20125.065%20119.101%20124.903%20118.964%20124.767L116.113%20121.918C117.538%20119.806%20118.523%20117.429%20119.01%20114.929H123.038C123.427%20114.929%20123.8%20114.775%20124.075%20114.5C124.35%20114.225%20124.504%20113.852%20124.504%20113.463V109.044C124.504%20108.655%20124.35%20108.282%20124.075%20108.008C123.8%20107.733%20123.427%20107.578%20123.038%20107.578ZM100.253%20122.278C98.0718%20122.278%2095.9399%20121.632%2094.1264%20120.421C92.3129%20119.21%2090.8993%20117.488%2090.0643%20115.474C89.2294%20113.459%2089.0106%20111.242%2089.4356%20109.104C89.8607%20106.965%2090.9105%20105%2092.4523%20103.458C93.994%20101.915%2095.9585%20100.865%2098.0973%20100.439C100.236%20100.014%20102.453%20100.232%20104.468%20101.066C106.483%20101.901%20108.205%20103.314%20109.416%20105.127C110.628%20106.94%20111.275%20109.072%20111.275%20111.253C111.274%20114.176%20110.113%20116.98%20108.046%20119.047C105.979%20121.115%20103.176%20122.277%20100.253%20122.278Z%22%20fill%3D%22white%22%2F%3E%3Cpath%20d%3D%22M100.253%20122.278C98.0722%20122.279%2095.9403%20121.632%2094.1268%20120.421C92.3133%20119.21%2090.8997%20117.489%2090.0648%20115.474C89.2298%20113.46%2089.011%20111.243%2089.4361%20109.104C89.8611%20106.965%2090.9109%20105%2092.4527%20103.458C93.9945%20101.916%2095.959%20100.865%2098.0978%20100.44C100.237%20100.014%20102.453%20100.232%20104.468%20101.066C106.483%20101.901%20108.205%20103.314%20109.417%20105.127C110.628%20106.94%20111.275%20109.072%20111.275%20111.253C111.275%20114.176%20110.114%20116.98%20108.047%20119.047C105.98%20121.115%20103.176%20122.277%20100.253%20122.278Z%22%20stroke%3D%22%23334155%22%20stroke-width%3D%222.236%22%20stroke-miterlimit%3D%2210%22%2F%3E%3Cpath%20d%3D%22M123.038%20107.578H119.01C118.523%20105.078%20117.538%20102.701%20116.113%20100.59L118.964%2097.7352C119.239%2097.4593%20119.394%2097.0853%20119.394%2096.6954C119.394%2096.3054%20119.239%2095.9314%20118.964%2095.6556L115.844%2092.5414C115.708%2092.4045%20115.546%2092.2958%20115.368%2092.2217C115.189%2092.1475%20114.998%2092.1093%20114.805%2092.1093C114.612%2092.1093%20114.421%2092.1475%20114.242%2092.2217C114.064%2092.2958%20113.902%2092.4045%20113.766%2092.5414L110.916%2095.3906C108.804%2093.9684%20106.428%2092.9852%20103.928%2092.4995V88.466C103.928%2088.0772%20103.773%2087.7043%20103.499%2087.4294C103.224%2087.1545%20102.851%2087%20102.462%2087H98.0473C97.6585%2087%2097.2856%2087.1545%2097.0107%2087.4294C96.7357%2087.7043%2096.5813%2088.0772%2096.5813%2088.466V92.4995C94.0812%2092.9863%2091.7046%2093.9709%2089.5928%2095.3948L86.7383%2092.5414C86.6021%2092.4045%2086.4401%2092.2958%2086.2618%2092.2217C86.0834%2092.1475%2085.8922%2092.1093%2085.699%2092.1093C85.5059%2092.1093%2085.3146%2092.1475%2085.1363%2092.2217C84.9579%2092.2958%2084.796%2092.4045%2084.6597%2092.5414L81.5414%2095.6597C81.4043%2095.796%2081.2955%2095.958%2081.2213%2096.1364C81.147%2096.3149%2081.1088%2096.5063%2081.1088%2096.6995C81.1088%2096.8928%2081.147%2097.0842%2081.2213%2097.2626C81.2955%2097.4411%2081.4043%2097.6031%2081.5414%2097.7393L84.3906%20100.589C82.9669%20102.701%2081.982%20105.078%2081.4943%20107.578H77.466C77.0772%20107.578%2076.7043%20107.733%2076.4294%20108.008C76.1545%20108.282%2076%20108.655%2076%20109.044V113.455C76%20113.843%2076.1545%20114.216%2076.4294%20114.491C76.7043%20114.766%2077.0772%20114.921%2077.466%20114.921H81.4943C81.9821%20117.421%2082.967%20119.797%2084.3906%20121.909L81.5414%20124.758C81.4045%20124.895%2081.2958%20125.057%2081.2217%20125.235C81.1475%20125.413%2081.1093%20125.604%2081.1093%20125.798C81.1093%20125.991%2081.1475%20126.182%2081.2217%20126.36C81.2958%20126.539%2081.4045%20126.701%2081.5414%20126.837L84.6597%20129.956C84.796%20130.093%2084.9579%20130.202%2085.1363%20130.276C85.3146%20130.35%2085.5059%20130.388%2085.699%20130.388C85.8922%20130.388%2086.0834%20130.35%2086.2618%20130.276C86.4401%20130.202%2086.6021%20130.093%2086.7383%20129.956L89.5886%20127.106C91.7004%20128.53%2094.077%20129.515%2096.5771%20130.002V134.031C96.5771%20134.223%2096.615%20134.414%2096.6887%20134.592C96.7624%20134.77%2096.8704%20134.931%2097.0065%20135.067C97.1426%20135.203%2097.3042%20135.311%2097.4821%20135.385C97.6599%20135.459%2097.8506%20135.497%2098.0431%20135.497H102.458C102.65%20135.497%20102.841%20135.459%20103.019%20135.385C103.197%20135.311%20103.358%20135.203%20103.494%20135.067C103.631%20134.931%20103.738%20134.77%20103.812%20134.592C103.886%20134.414%20103.924%20134.223%20103.924%20134.031V130.01C106.424%20129.522%20108.8%20128.537%20110.912%20127.113L113.762%20129.964C113.898%20130.101%20114.06%20130.209%20114.238%20130.283C114.416%20130.358%20114.608%20130.396%20114.801%20130.396C114.994%20130.396%20115.185%20130.358%20115.364%20130.283C115.542%20130.209%20115.704%20130.101%20115.84%20129.964L118.964%20126.845C119.101%20126.709%20119.209%20126.547%20119.283%20126.369C119.358%20126.19%20119.396%20125.999%20119.396%20125.806C119.396%20125.613%20119.358%20125.422%20119.283%20125.243C119.209%20125.065%20119.101%20124.903%20118.964%20124.767L116.113%20121.918C117.538%20119.806%20118.523%20117.429%20119.01%20114.929H123.038C123.427%20114.929%20123.8%20114.775%20124.075%20114.5C124.35%20114.225%20124.504%20113.852%20124.504%20113.463V109.044C124.504%20108.655%20124.35%20108.282%20124.075%20108.008C123.8%20107.733%20123.427%20107.578%20123.038%20107.578ZM100.253%20122.278C98.0718%20122.278%2095.9399%20121.632%2094.1264%20120.421C92.3129%20119.21%2090.8993%20117.488%2090.0643%20115.474C89.2294%20113.459%2089.0106%20111.242%2089.4356%20109.104C89.8607%20106.965%2090.9105%20105%2092.4523%20103.458C93.9941%20101.915%2095.9585%20100.865%2098.0973%20100.439C100.236%20100.014%20102.453%20100.232%20104.468%20101.066C106.483%20101.901%20108.205%20103.314%20109.416%20105.127C110.628%20106.94%20111.275%20109.072%20111.275%20111.253C111.274%20114.176%20110.113%20116.98%20108.046%20119.047C105.979%20121.115%20103.176%20122.277%20100.253%20122.278Z%22%20stroke%3D%22%23334155%22%20stroke-width%3D%222.236%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M147.348%2063H53.2078C51.5635%2063%2049.9865%2063.6532%2048.8238%2064.8159C47.661%2065.9787%2047.0078%2067.5557%2047.0078%2069.2V77.75H153.548V69.2C153.548%2067.5557%20152.895%2065.9787%20151.732%2064.8159C150.569%2063.6532%20148.992%2063%20147.348%2063Z%22%20fill%3D%22white%22%20stroke%3D%22%23334155%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M56.3002%2073.4363C58.0123%2073.4363%2059.4002%2072.0484%2059.4002%2070.3363C59.4002%2068.6242%2058.0123%2067.2363%2056.3002%2067.2363C54.5881%2067.2363%2053.2002%2068.6242%2053.2002%2070.3363C53.2002%2072.0484%2054.5881%2073.4363%2056.3002%2073.4363Z%22%20fill%3D%22%23E2E8F0%22%20stroke%3D%22%23334155%22%20stroke-width%3D%222%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E";
75
+
76
+ /**
77
+ * Use when you want to show a missing configuration state of a widget.
78
+ *
79
+ * This will open the configuration modal when the user clicks the "Configure" button.
80
+ *
81
+ * @returns {ReactNode} WidgetMissingConfiguration component
82
+ */
83
+ const WidgetMissingConfiguration = () => {
84
+ const [t] = useTranslation();
85
+ return (jsxRuntime.jsx("div", { className: "flex h-full w-full flex-col items-center justify-center", children: jsxRuntime.jsx(reactComponents.EmptyState, { customImageSrc: widgetMissingConfiguration, description: t("widget.emptystate.missingdata"), secondaryAction: { title: t("widget.emptystate.configure"), onClick: () => irisAppRuntimeCore.WidgetConfigRuntime.openEditMode() } }) }));
86
+ };
87
+
88
+ var widgetNoDataGood = "data:image/svg+xml,%3Csvg%20width%3D%22200%22%20height%3D%22200%22%20viewBox%3D%220%200%20200%20200%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M100%20180C144.183%20180%20180%20144.183%20180%20100C180%2055.8172%20144.183%2020%20100%2020C55.8172%2020%2020%2055.8172%2020%20100C20%20144.183%2055.8172%20180%20100%20180Z%22%20fill%3D%22%23F1F5F9%22%2F%3E%3Cpath%20d%3D%22M100.296%20165.188C118.685%20165.188%20133.592%20163.325%20133.592%20161.026C133.592%20158.728%20118.685%20156.864%20100.296%20156.864C81.9071%20156.864%2067%20158.728%2067%20161.026C67%20163.325%2081.9071%20165.188%20100.296%20165.188Z%22%20fill%3D%22%23E2E8F0%22%2F%3E%3Cpath%20d%3D%22M147.348%2063H53.2C49.7758%2063%2047%2065.7758%2047%2069.2V136.494C47%20139.918%2049.7758%20142.694%2053.2%20142.694H147.348C150.772%20142.694%20153.548%20139.918%20153.548%20136.494V69.2C153.548%2065.7758%20150.772%2063%20147.348%2063Z%22%20fill%3D%22%23E2E8F0%22%20stroke%3D%22%23334155%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M147.348%2063H53.2078C51.5635%2063%2049.9865%2063.6532%2048.8238%2064.8159C47.661%2065.9787%2047.0078%2067.5557%2047.0078%2069.2V77.75H153.548V69.2C153.548%2067.5557%20152.895%2065.9787%20151.732%2064.8159C150.569%2063.6532%20148.992%2063%20147.348%2063Z%22%20fill%3D%22white%22%20stroke%3D%22%23334155%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M56.3002%2073.4363C58.0123%2073.4363%2059.4002%2072.0484%2059.4002%2070.3363C59.4002%2068.6242%2058.0123%2067.2363%2056.3002%2067.2363C54.5881%2067.2363%2053.2002%2068.6242%2053.2002%2070.3363C53.2002%2072.0484%2054.5881%2073.4363%2056.3002%2073.4363Z%22%20fill%3D%22%23E2E8F0%22%20stroke%3D%22%23334155%22%20stroke-width%3D%222%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M95.4118%20126C94.7838%20126.001%2094.1618%20125.879%2093.5817%20125.641C93.0015%20125.404%2092.4745%20125.055%2092.031%20124.615L82.4616%20115.156C82.0044%20114.72%2081.6398%20114.198%2081.3888%20113.621C81.1379%20113.044%2081.0058%20112.423%2081.0002%20111.795C80.9946%20111.167%2081.1155%20110.544%2081.3561%20109.962C81.5966%20109.381%2081.9518%20108.853%2082.4011%20108.409C82.8503%20107.964%2083.3845%20107.613%2083.9726%20107.375C84.5606%20107.138%2085.1907%20107.018%2085.826%20107.024C86.4613%20107.029%2087.0891%20107.16%2087.6727%20107.408C88.2564%20107.656%2088.7843%20108.016%2089.2255%20108.468L95.4141%20114.587L114.897%2095.3243C115.8%2094.4639%20117.008%2093.9884%20118.262%2094.0002C119.516%2094.012%20120.715%2094.5102%20121.601%2095.3875C122.487%2096.2649%20122.99%2097.4511%20123%2098.6909C123.01%2099.9308%20122.528%20101.125%20121.656%20102.017L98.7995%20124.615C98.3548%20125.055%2097.8267%20125.404%2097.2453%20125.642C96.664%20125.879%2096.0409%20126.001%2095.4118%20126Z%22%20fill%3D%22white%22%20stroke%3D%22%23334155%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E";
89
+
90
+ var widgetNoDataNeutral = "data:image/svg+xml,%3Csvg%20width%3D%22200%22%20height%3D%22200%22%20viewBox%3D%220%200%20200%20200%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M100%20180C144.183%20180%20180%20144.183%20180%20100C180%2055.8172%20144.183%2020%20100%2020C55.8172%2020%2020%2055.8172%2020%20100C20%20144.183%2055.8172%20180%20100%20180Z%22%20fill%3D%22%23F1F5F9%22%2F%3E%3Cpath%20d%3D%22M100.296%20165.188C118.685%20165.188%20133.592%20163.325%20133.592%20161.026C133.592%20158.728%20118.685%20156.864%20100.296%20156.864C81.9071%20156.864%2067%20158.728%2067%20161.026C67%20163.325%2081.9071%20165.188%20100.296%20165.188Z%22%20fill%3D%22%23E2E8F0%22%2F%3E%3Cpath%20d%3D%22M147.348%2063H53.2C49.7758%2063%2047%2065.7758%2047%2069.2V136.494C47%20139.918%2049.7758%20142.694%2053.2%20142.694H147.348C150.772%20142.694%20153.548%20139.918%20153.548%20136.494V69.2C153.548%2065.7758%20150.772%2063%20147.348%2063Z%22%20fill%3D%22%23E2E8F0%22%20stroke%3D%22%23334155%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M147.348%2063H53.2078C51.5635%2063%2049.9865%2063.6532%2048.8238%2064.8159C47.661%2065.9787%2047.0078%2067.5557%2047.0078%2069.2V77.75H153.548V69.2C153.548%2067.5557%20152.895%2065.9787%20151.732%2064.8159C150.569%2063.6532%20148.992%2063%20147.348%2063Z%22%20fill%3D%22white%22%20stroke%3D%22%23334155%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M56.3002%2073.4363C58.0123%2073.4363%2059.4002%2072.0484%2059.4002%2070.3363C59.4002%2068.6242%2058.0123%2067.2363%2056.3002%2067.2363C54.5881%2067.2363%2053.2002%2068.6242%2053.2002%2070.3363C53.2002%2072.0484%2054.5881%2073.4363%2056.3002%2073.4363Z%22%20fill%3D%22%23E2E8F0%22%20stroke%3D%22%23334155%22%20stroke-width%3D%222%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M99.3281%20119.8C101.856%20119.8%20103.885%20121.871%20103.885%20124.4C103.885%20126.929%20101.856%20129%2099.3281%20129C96.8001%20129%2094.7707%20126.929%2094.7705%20124.4C94.7705%20121.871%2096.8%20119.8%2099.3281%20119.8ZM91.0703%2094.46C95.6295%2089.8464%20103.027%2089.8463%20107.586%2094.46C112.139%2099.0671%20112.138%20106.532%20107.586%20111.14C106.256%20112.485%20104.677%20113.441%20102.996%20114.003V114.5C102.996%20116.532%20101.365%20118.2%2099.3281%20118.2C97.2912%20118.2%2095.6602%20116.532%2095.6602%20114.5V112.7C95.6602%20109.511%2098.1501%20107.579%20100.284%20107.093C101.052%20106.918%20101.783%20106.529%20102.39%20105.915C104.088%20104.196%20104.089%20101.404%20102.39%2099.6846C100.697%2097.9719%2097.958%2097.9719%2096.2656%2099.6846C94.8322%20101.135%2092.5037%20101.135%2091.0703%2099.6846C89.6434%2098.2406%2089.6434%2095.9039%2091.0703%2094.46Z%22%20fill%3D%22white%22%20stroke%3D%22%23334155%22%20stroke-width%3D%222%22%2F%3E%3C%2Fsvg%3E";
91
+
92
+ /**
93
+ * Use when you want to show a no data state in a widget.
94
+ *
95
+ * @param {WidgetNoDataProps} props - The props for the WidgetMissingConfiguration component
96
+ * @returns {ReactNode} WidgetMissingConfiguration component
97
+ */
98
+ const WidgetNoData = ({ type = "Neutral", description }) => {
99
+ return (jsxRuntime.jsx("div", { className: "flex h-full w-full flex-col items-center justify-center", children: jsxRuntime.jsx(reactComponents.EmptyState, { customImageSrc: type === "Good" ? widgetNoDataGood : widgetNoDataNeutral, description: description }) }));
100
+ };
101
+
102
+ const cvaHorizontalWidgetLayoutContainer = cssClassVarianceUtilities.cvaMerge(["flex", "h-dvh", "flex-col", "overflow-auto"], {
103
+ variants: {
104
+ isScrolled: {
105
+ true: ["border-t"],
106
+ },
107
+ },
108
+ });
109
+ const cvaHorizontalChildFragment = cssClassVarianceUtilities.cvaMerge(["h-px", "w-full", "min-w-px", "bg-slate-200"]);
110
+
111
+ /**
112
+ * Widget layout with a horizontal orientation with a border in the top when scrolling.
113
+ *
114
+ * @param { HorizontalWidgetLayoutProps} props - The props for the component
115
+ * @returns {JSX.Element} HorizontalWidgetLayout component
116
+ */
117
+ const HorizontalWidgetLayout = ({ className, dataTestId, children, ref }) => {
118
+ const childrenArray = React.Children.toArray(children);
119
+ const { isAtTop } = reactComponents.useScrollDetection(ref);
120
+ return (jsxRuntime.jsx("div", { className: cvaHorizontalWidgetLayoutContainer({ className, isScrolled: !isAtTop }), "data-testid": dataTestId, ref: ref, children: childrenArray.map((child, index) => (jsxRuntime.jsxs(React.Fragment, { children: [child, index < childrenArray.length - 1 && jsxRuntime.jsx("div", { className: cvaHorizontalChildFragment() })] }, index))) }));
121
+ };
122
+
123
+ const cvaVerticalSplitWidgetLayoutContainer = cssClassVarianceUtilities.cvaMerge([
124
+ "flex",
125
+ "w-full",
126
+ "flex-row",
127
+ "overflow-hidden",
128
+ "no-scrollbar",
129
+ "h-20",
130
+ "gap-2",
131
+ "overflow-x-scroll",
132
+ "px-2",
133
+ "py-4"
134
+ ]);
135
+ cssClassVarianceUtilities.cvaMerge(["h-full", "w-px", "min-h-px", "bg-slate-200"]);
136
+
137
+ /**
138
+ * Widget layout with a vertical split
139
+ *
140
+ * @param { VerticalSplitWidgetLayoutProps} props - The props for the component
141
+ * @returns {JSX.Element} VerticalSplitWidgetLayout component
142
+ */
143
+ const VerticalSplitWidgetLayout = ({ className, dataTestId, children }) => {
144
+ const childrenArray = React.Children.toArray(children);
145
+ return (jsxRuntime.jsx("div", { className: cvaVerticalSplitWidgetLayoutContainer({ className }), "data-testid": dataTestId, children: childrenArray.map((child, index) => (jsxRuntime.jsx(React.Fragment, { children: child }, index))) }));
146
+ };
147
+
148
+ const cvaWidgetBodyDensityContainer = cssClassVarianceUtilities.cvaMerge([
149
+ "@container",
150
+ "flex",
151
+ "flex-grow",
152
+ "overflow-auto",
153
+ "w-full",
154
+ "h-dvh",
155
+ "place-items-center",
156
+ "bg-white",
157
+ "overflow-hidden",
158
+ ], {
159
+ variants: {
160
+ direction: {
161
+ row: "flex-row",
162
+ "row-reverse": "flex-row-reverse",
163
+ column: "flex-col",
164
+ "column-reverse": "flex-col-reverse",
165
+ },
166
+ density: {
167
+ none: "",
168
+ dense: "gap-1 p-2",
169
+ compact: "gap-3 p-3",
170
+ comfortable: "gap-4 p-4",
171
+ spacious: "gap-4 p-6",
172
+ auto: "gap-2 p-4 pt-2",
173
+ },
174
+ },
175
+ defaultVariants: {
176
+ direction: "column",
177
+ density: "auto",
178
+ },
179
+ });
180
+
181
+ /**
182
+ * The WidgetBody component should be used to inform the user of important information.
183
+ *
184
+ * @summary For applying padding and gap to a Widget.
185
+ * @description The padding must live here, and not on the Widget itself, as to not inset the scrollbar in case of overflow
186
+ * @param {WidgetBodyProps} props - The props for the WidgetBody component
187
+ * @returns {ReactNode} WidgetBody component
188
+ */
189
+ const WidgetBody = ({ density = "auto", children, dataTestId, className, direction = "column", }) => {
190
+ return (jsxRuntime.jsx("div", { className: cvaWidgetBodyDensityContainer({ density, className, direction }), "data-testid": dataTestId, children: children }));
191
+ };
192
+
193
+ const cvaWidgetEditBodyDensityContainer = cssClassVarianceUtilities.cvaMerge(["absolute", "left-1/2", "top-1/2", "flex", "origin-center", "-translate-x-1/2", "-translate-y-1/2", "w-96"], {
194
+ variants: {
195
+ direction: {
196
+ row: "flex-row",
197
+ "row-reverse": "flex-row-reverse",
198
+ column: "flex-col",
199
+ "column-reverse": "flex-col-reverse",
200
+ },
201
+ density: {
202
+ none: "",
203
+ dense: "gap-1 p-2",
204
+ compact: "gap-3 p-3",
205
+ comfortable: "gap-4 p-4",
206
+ spacious: "gap-4 p-6",
207
+ auto: "gap-2 p-4",
208
+ },
209
+ },
210
+ defaultVariants: {
211
+ direction: "column",
212
+ density: "auto",
213
+ },
214
+ });
215
+
216
+ /**
217
+ * The WidgetEditBody component should be used to edit a Widget. This will create a centered dialog with a header, body and footer.
218
+ * The footer will have a cancel and save button.
219
+ *
220
+ * @summary For editing a Widget.
221
+ * @param {WidgetEditBodyProps} props - The props for the WidgetEditBody component
222
+ * @returns {ReactNode} WidgetBody component
223
+ */
224
+ const WidgetEditBody = ({ children, dataTestId, className, onCancel, onSave, saveEditModeDisabled, title, }) => {
225
+ const [t] = useTranslation();
226
+ const [saving, setSaving] = React.useState(false);
227
+ return (jsxRuntime.jsxs(reactComponents.Card, { className: cvaWidgetEditBodyDensityContainer({ density: "none", className }), "data-testid": dataTestId, children: [jsxRuntime.jsx(reactComponents.CardHeader, { density: "comfortable", heading: title || t("widget.edit.title"), onClose: onCancel }), jsxRuntime.jsx(reactComponents.CardBody, { density: "comfortable", children: children }), jsxRuntime.jsxs(reactComponents.CardFooter, { density: "comfortable", children: [jsxRuntime.jsx(reactComponents.Button, { onClick: onCancel, variant: "ghost-neutral", children: t("widget.edit.cancel") }), jsxRuntime.jsx(reactComponents.Button, { disabled: saveEditModeDisabled || saving, loading: saving, onClick: async () => {
228
+ setSaving(true);
229
+ await onSave();
230
+ }, children: t("widget.edit.save") })] })] }));
231
+ };
232
+
233
+ const cvaWidgetKPI = cssClassVarianceUtilities.cvaMerge(["w-full", "h-full", "flex", "flex-col", "flex-1", "place-content-start"], {
234
+ variants: {
235
+ variant: {
236
+ small: ["px-3"],
237
+ condensed: ["px-2", "py-0"],
238
+ default: [""],
239
+ },
240
+ },
241
+ defaultVariants: {
242
+ variant: "default",
243
+ },
244
+ });
245
+ const cvaWidgetKPIHeader = cssClassVarianceUtilities.cvaMerge(["flex", "flex-row", "", "place-items-end", "gap-2", "h-10"]);
246
+ const cvaWidgetKPITitleText = cssClassVarianceUtilities.cvaMerge([
247
+ "leading-tight",
248
+ "break-words",
249
+ "flex",
250
+ "items-start",
251
+ "text-sm",
252
+ "font-medium",
253
+ "text-neutral-500",
254
+ ]);
255
+ const cvaWidgetKPIvalueText = cssClassVarianceUtilities.cvaMerge(["truncate", "whitespace-nowrap", "text-3xl", "font-medium"]);
256
+ const cvaWidgetKPITrendValueText = cssClassVarianceUtilities.cvaMerge([
257
+ "text-xs",
258
+ "font-semibold",
259
+ "whitespace-nowrap",
260
+ "truncate",
261
+ "overflow-hidden",
262
+ ]);
263
+ const cvaWidgetKPITrendPercentage = cssClassVarianceUtilities.cvaMerge(["text-xs", "font-semibold"], {
264
+ variants: {
265
+ color: {
266
+ success: ["text-success-600"],
267
+ danger: ["text-danger-600"],
268
+ neutral: ["text-neutral-500"],
269
+ },
270
+ },
271
+ defaultVariants: {
272
+ color: "success",
273
+ },
274
+ });
275
+ const cvaWidgetKPIValueContainer = cssClassVarianceUtilities.cvaMerge(["truncate", "whitespace-nowrap"], {
276
+ variants: {
277
+ isDefaultAndHasTrendValue: {
278
+ true: [],
279
+ false: ["flex", "flex-row", "gap-1"],
280
+ },
281
+ },
282
+ defaultVariants: {
283
+ isDefaultAndHasTrendValue: true,
284
+ },
285
+ });
286
+
287
+ /**
288
+ * The WidgetKPI component is used to display WidgetKPIs.
289
+ *
290
+ * @param {WidgetKPIProps} props - The props for the WidgetKPI component
291
+ * @returns {ReactElement} WidgetKPI component
292
+ */
293
+ const WidgetKPI = ({ title, value, loading, unit, className, dataTestId, tooltipLabel, trend, iconName, iconColor = "info", ...rest }) => {
294
+ return (jsxRuntime.jsx("div", { className: cvaWidgetKPI({ className }), "data-testid": dataTestId ? `${dataTestId}` : undefined, ...rest, children: loading ? (jsxRuntime.jsx("div", { className: "flex flex-col gap-2 pt-6", "data-testid": dataTestId ? `${dataTestId}-loading` : "WidgetKPI-loading", children: trend ? (jsxRuntime.jsx(reactComponents.SkeletonLines, { height: [16, 24, 16], lines: 3, margin: "6px 0", width: [100, 40, 60] })) : (jsxRuntime.jsx(reactComponents.SkeletonLines, { height: [16, 24], lines: 2, margin: "6px 0", width: [100, 40] })) })) : (jsxRuntime.jsxs("div", { className: "flex h-full flex-col justify-between", children: [jsxRuntime.jsxs("div", { className: "flex flex-col gap-1", children: [jsxRuntime.jsx("div", { className: cvaWidgetKPIHeader(), children: jsxRuntime.jsxs("div", { className: "flex items-start gap-1", children: [iconName ? (jsxRuntime.jsx(reactComponents.Icon, { className: "flex-shrink-0 py-0.5", color: iconColor, name: iconName, size: "small" })) : null, jsxRuntime.jsx(reactComponents.Tooltip, { dataTestId: dataTestId ? `${dataTestId}-tooltip` : undefined, disabled: !tooltipLabel, label: tooltipLabel, placement: "bottom", children: jsxRuntime.jsx(reactComponents.Text, { className: cvaWidgetKPITitleText(), dataTestId: dataTestId ? `${dataTestId}-title` : undefined, children: title }) })] }) }), jsxRuntime.jsx("div", { className: "flex items-end", children: jsxRuntime.jsx(reactComponents.Text, { className: cvaWidgetKPIvalueText(), dataTestId: dataTestId ? `${dataTestId}-value` : undefined, type: "div", children: jsxRuntime.jsx("div", { className: cvaWidgetKPIValueContainer({
295
+ isDefaultAndHasTrendValue: Boolean(trend?.value),
296
+ className,
297
+ }), children: jsxRuntime.jsxs("span", { className: cvaWidgetKPIvalueText(), children: [value, " ", unit] }) }) }) })] }), trend ? (jsxRuntime.jsx("div", { className: "flex items-center gap-1", children: jsxRuntime.jsx(TrendIndicator, { isSmallVariant: false, trend: trend, unit: unit }) })) : null] })) }));
298
+ };
299
+ const TrendIndicator = ({ trend, unit, isSmallVariant }) => {
300
+ if (!trend) {
301
+ return null;
302
+ }
303
+ return (jsxRuntime.jsxs("div", { className: "flex flex-row items-center gap-0.5 overflow-hidden", "data-testid": "trend-indicator", children: [!isSmallVariant && trend.value ? (jsxRuntime.jsxs(reactComponents.Text, { className: cvaWidgetKPITrendValueText(), dataTestId: "trend-value", size: "small", weight: "normal", children: [trend.value, " ", unit] })) : null, trend.variant?.icon ? jsxRuntime.jsx(reactComponents.Icon, { color: trend.variant.color, name: trend.variant.icon, size: "small" }) : null, trend.percentage ? (jsxRuntime.jsxs(reactComponents.Text, { className: cvaWidgetKPITrendPercentage({ color: trend.variant?.color }), children: [trend.percentage, "%"] })) : null] }));
304
+ };
305
+
306
+ const cvaWidgetList = cssClassVarianceUtilities.cvaMerge(["min-h-0"]);
307
+ const cvaWidgetListVirtualizedList = cssClassVarianceUtilities.cvaMerge(["w-full"]);
308
+
309
+ /**
310
+ * WidgetList used for rendering a list of in a widget
311
+ *
312
+ * @param { WidgetListProps} props - The props for the WidgetList component
313
+ * @returns {JSX.Element} WidgetList component
314
+ */
315
+ const WidgetList = ({ dataTestId, pagination, count, children, className, rowHeight = 56, scrollRef, }) => {
316
+ return (jsxRuntime.jsx("div", { className: cvaWidgetList({ className }), children: jsxRuntime.jsx(reactComponents.VirtualizedList, { className: cvaWidgetListVirtualizedList(), count: count, dataTestId: dataTestId, loadingIndicator: "skeletonLines", pagination: pagination, rowHeight: rowHeight, scrollRef: scrollRef, separator: "line", skeletonLinesHeight: `${rowHeight / 3}px`, children: index => {
317
+ return children(index);
318
+ } }) }));
319
+ };
320
+
321
+ const cvaWidgetListItem = cssClassVarianceUtilities.cvaMerge(["py-2", "px-4", "h-14", "w-full"]);
322
+
323
+ /**
324
+ * Widget ListItem component for the WidgetList component this is 1 row in the list
325
+ *
326
+ * @param { WidgetListItemProps} props - The props for the WidgetListItem component
327
+ * @returns {JSX.Element} WidgetListItem component
328
+ */
329
+ const WidgetListItem = ({ className, dataTestId, onClick, details, tableCellComponent, }) => {
330
+ const interactableItemClass = onClick
331
+ ? reactComponents.cvaInteractableItem({ cursor: "pointer", className: cvaWidgetListItem({ className }) })
332
+ : cvaWidgetListItem({ className });
333
+ return (jsxRuntime.jsx("div", { className: interactableItemClass, "data-testid": dataTestId, onClick: onClick, children: jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [jsxRuntime.jsx("div", { className: "flex items-center gap-2 overflow-hidden text-ellipsis", children: tableCellComponent }), jsxRuntime.jsxs("div", { className: "flex items-center gap-2 pl-2", children: [details, onClick ? jsxRuntime.jsx(reactComponents.Icon, { name: "ChevronRight", size: "medium" }) : null] })] }) }));
334
+ };
335
+
336
+ /*
337
+ * ----------------------------
338
+ * | SETUP TRANSLATIONS START |
339
+ * ----------------------------
340
+ * This import and function call is needed to register translations for this library.
341
+ * Do not remove this if this library has translations.
342
+ */
343
+ setupLibraryTranslations();
344
+
345
+ exports.HorizontalWidgetLayout = HorizontalWidgetLayout;
346
+ exports.VerticalSplitWidgetLayout = VerticalSplitWidgetLayout;
347
+ exports.WidgetBody = WidgetBody;
348
+ exports.WidgetEditBody = WidgetEditBody;
349
+ exports.WidgetError = WidgetError;
350
+ exports.WidgetKPI = WidgetKPI;
351
+ exports.WidgetList = WidgetList;
352
+ exports.WidgetListItem = WidgetListItem;
353
+ exports.WidgetMissingConfiguration = WidgetMissingConfiguration;
354
+ exports.WidgetNoData = WidgetNoData;
package/index.d.ts ADDED
@@ -0,0 +1 @@
1
+ export * from "./src/index";