@hisptz/dhis2-analytics 2.0.0-alpha.0 → 2.0.0-alpha.1

package/dist/components/Map/components/ThematicLayerConfiguration/ThematicLayerConfiguration.stories.js

@@ -1,26 +1,21 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var jsxRuntime = require('react/jsx-runtime');
-var ThematicLayerConfiguration = require('./ThematicLayerConfiguration');
-var reactHookForm = require('react-hook-form');
+import { jsx } from 'react/jsx-runtime';
+import { ThematicLayerConfiguration } from './ThematicLayerConfiguration';
+import { useForm } from 'react-hook-form';
 
 const Basic = {};
 Basic.args = {};
 const meta = {
   title: "DHIS2 Map/Thematic Layer Configuration",
-  component: ThematicLayerConfiguration.ThematicLayerConfiguration,
+  component: ThematicLayerConfiguration,
   decorators: [
     (MapStory) => {
-      const form = reactHookForm.useForm();
-      return /* @__PURE__ */ jsxRuntime.jsx("div", { style: { width: "50%", height: "50%" }, children: /* @__PURE__ */ jsxRuntime.jsx(MapStory, { args: { form } }) });
+      const form = useForm();
+      return /* @__PURE__ */ jsx("div", { style: { width: "50%", height: "50%" }, children: /* @__PURE__ */ jsx(MapStory, { args: { form } }) });
     }
   ]
 };
 var ThematicLayerConfiguration_stories_default = meta;
 
-exports.Basic = Basic;
-exports.default = ThematicLayerConfiguration_stories_default;
+export { Basic, ThematicLayerConfiguration_stories_default as default };
 //# sourceMappingURL=out.js.map
 //# sourceMappingURL=ThematicLayerConfiguration.stories.js.map

package/dist/components/Map/components/ThematicLayerConfiguration/components/ColorScaleSelect/components/ColorScale/index.js

@@ -1,30 +1,36 @@
-'use strict';
+import { jsx } from 'react/jsx-runtime';
+import styles from '../../styles/ColorScale.module.css';
+import { COLOR_PALETTES } from '../../constants/colors.js';
 
-var jsxRuntime = require('react/jsx-runtime');
-var styles = require('../../styles/ColorScale.module.css');
-var colors = require('../../constants/colors');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var styles__default = /*#__PURE__*/_interopDefault(styles);
-
-const ColorScale = ({ scale, bins, width, onClick }) => {
-  const colors$1 = colors.COLOR_PALETTES?.[scale]?.[bins];
+const ColorScale = ({
+  scale,
+  bins,
+  width,
+  onClick
+}) => {
+  const colors = COLOR_PALETTES?.[scale]?.[bins];
   const itemWidth = width ? width / bins : 36;
-  return /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsx(
     "ul",
     {
       onClick: () => onClick(scale),
-      className: styles__default.default.colorScale,
+      className: styles.colorScale,
       style: {
         ...width && { width }
       },
-      children: colors$1.map((color, index) => /* @__PURE__ */ jsxRuntime.jsx("li", { className: styles__default.default.item, style: { backgroundColor: color, width: itemWidth } }, index))
+      children: colors.map((color, index) => /* @__PURE__ */ jsx(
+        "li",
+        {
+          className: styles.item,
+          style: { backgroundColor: color, width: itemWidth }
+        },
+        index
+      ))
     }
   );
 };
 var ColorScale_default = ColorScale;
 
-module.exports = ColorScale_default;
+export { ColorScale_default as default };
 //# sourceMappingURL=out.js.map
 //# sourceMappingURL=index.js.map

package/dist/components/Map/components/ThematicLayerConfiguration/components/ColorScaleSelect/components/ColorScale/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../../../src/components/Map/components/ThematicLayerConfiguration/components/ColorScaleSelect/components/ColorScale/index.tsx"],"names":[],"mappings":"AAiBQ;AAhBR,OAAO,YAAY;AACnB,SAAS,sBAAsB;AAG/B,MAAM,aAAa,CAAC,EAAE,OAAO,MAAM,OAAO,QAAQ,MAAwF;AACxI,QAAM,SAAU,iBAAyB,KAAK,IAAI,IAAI;AACtD,QAAM,YAAY,QAAQ,QAAQ,OAAO;AAEzC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,SAAS,MAAM,QAAQ,KAAK;AAAA,MAC5B,WAAW,OAAO;AAAA,MAClB,OAAO;AAAA,QACL,GAAI,SAAS,EAAE,MAAM;AAAA,MACvB;AAAA,MACC,iBAAO,IAAI,CAAC,OAAe,UAC1B,oBAAC,QAAe,WAAW,OAAO,MAAM,OAAO,EAAE,iBAAiB,OAAO,OAAO,UAAU,KAAjF,KAAoF,CAC9F;AAAA;AAAA,EACH;AAEJ;AAEA,IAAO,qBAAQ","sourcesContent":["import React from \"react\";\nimport styles from \"../../styles/ColorScale.module.css\";\nimport { COLOR_PALETTES } from \"../../constants/colors\";\n\n// Returns one color scale based on a code and number of classes\nconst ColorScale = ({ scale, bins, width, onClick }: { scale: string; bins: number; width: number; onClick: (scale: string) => void }) => {\n  const colors = (COLOR_PALETTES as any)?.[scale]?.[bins];\n  const itemWidth = width ? width / bins : 36;\n\n  return (\n    <ul\n      onClick={() => onClick(scale)}\n      className={styles.colorScale}\n      style={{\n        ...(width && { width }),\n      }}>\n      {colors.map((color: string, index: number) => (\n        <li key={index} className={styles.item} style={{ backgroundColor: color, width: itemWidth }} />\n      ))}\n    </ul>\n  );\n};\n\nexport default ColorScale;\n"]}
+{"version":3,"sources":["../../../../../../../../../src/components/Map/components/ThematicLayerConfiguration/components/ColorScaleSelect/components/ColorScale/index.tsx"],"names":[],"mappings":"AA4BI;AA3BJ,OAAO,YAAY;AACnB,SAAS,sBAAsB;AAG/B,MAAM,aAAa,CAAC;AAAA,EACnB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,MAKM;AACL,QAAM,SAAU,iBAAyB,KAAK,IAAI,IAAI;AACtD,QAAM,YAAY,QAAQ,QAAQ,OAAO;AAEzC,SACC;AAAA,IAAC;AAAA;AAAA,MACA,SAAS,MAAM,QAAQ,KAAK;AAAA,MAC5B,WAAW,OAAO;AAAA,MAClB,OAAO;AAAA,QACN,GAAI,SAAS,EAAE,MAAM;AAAA,MACtB;AAAA,MAEC,iBAAO,IAAI,CAAC,OAAe,UAC3B;AAAA,QAAC;AAAA;AAAA,UAEA,WAAW,OAAO;AAAA,UAClB,OAAO,EAAE,iBAAiB,OAAO,OAAO,UAAU;AAAA;AAAA,QAF7C;AAAA,MAGN,CACA;AAAA;AAAA,EACF;AAEF;AAEA,IAAO,qBAAQ","sourcesContent":["import React from \"react\";\nimport styles from \"../../styles/ColorScale.module.css\";\nimport { COLOR_PALETTES } from \"../../constants/colors.js\";\n\n// Returns one color scale based on a code and number of classes\nconst ColorScale = ({\n\tscale,\n\tbins,\n\twidth,\n\tonClick,\n}: {\n\tscale: string;\n\tbins: number;\n\twidth: number;\n\tonClick: (scale: string) => void;\n}) => {\n\tconst colors = (COLOR_PALETTES as any)?.[scale]?.[bins];\n\tconst itemWidth = width ? width / bins : 36;\n\n\treturn (\n\t\t<ul\n\t\t\tonClick={() => onClick(scale)}\n\t\t\tclassName={styles.colorScale}\n\t\t\tstyle={{\n\t\t\t\t...(width && { width }),\n\t\t\t}}\n\t\t>\n\t\t\t{colors.map((color: string, index: number) => (\n\t\t\t\t<li\n\t\t\t\t\tkey={index}\n\t\t\t\t\tclassName={styles.item}\n\t\t\t\t\tstyle={{ backgroundColor: color, width: itemWidth }}\n\t\t\t\t/>\n\t\t\t))}\n\t\t</ul>\n\t);\n};\n\nexport default ColorScale;\n"]}

package/dist/components/Map/components/ThematicLayerConfiguration/components/ColorScaleSelect/constants/colors.js

@@ -1,5 +1,3 @@
-'use strict';
-
 const COLOR_PALETTES = {
   YlGn: {
     3: ["#f7fcb9", "#addd8e", "#31a354"],
@@ -433,7 +431,6 @@ const qualitativeColors = [
   "#e31a1c"
 ];
 
-exports.COLOR_PALETTES = COLOR_PALETTES;
-exports.qualitativeColors = qualitativeColors;
+export { COLOR_PALETTES, qualitativeColors };
 //# sourceMappingURL=out.js.map
 //# sourceMappingURL=colors.js.map

package/dist/components/Map/components/ThematicLayerConfiguration/components/ColorScaleSelect/index.js

@@ -1,18 +1,10 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var react = require('react');
-var ui = require('@dhis2/ui');
-var cx = require('classnames');
-var ColorScale = require('./components/ColorScale');
-var styles = require('./styles/ColorScaleSelect.module.css');
-var colors = require('./utils/colors');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var cx__default = /*#__PURE__*/_interopDefault(cx);
-var ColorScale__default = /*#__PURE__*/_interopDefault(ColorScale);
-var styles__default = /*#__PURE__*/_interopDefault(styles);
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState, useRef, Fragment } from 'react';
+import { Popover } from '@dhis2/ui';
+import cx from 'classnames';
+import ColorScale from './components/ColorScale/index.js';
+import styles from './styles/ColorScaleSelect.module.css';
+import { getColorPalette, getColorScale, defaultColorScale, defaultColorScaleName, colorScales } from './utils/colors.js';
 
 const ColorScaleSelect = ({
   colorClass,
@@ -21,43 +13,43 @@ const ColorScaleSelect = ({
   onChange,
   className
 }) => {
-  const [isOpen, setIsOpen] = react.useState(false);
-  const anchorRef = react.useRef(null);
-  const palette = colors.getColorPalette(colorClass, count);
+  const [isOpen, setIsOpen] = useState(false);
+  const anchorRef = useRef(null);
+  const palette = getColorPalette(colorClass, count);
   const bins = palette.split(",").length;
-  const scale = colors.getColorScale(palette) ?? colors.defaultColorScale;
+  const scale = getColorScale(palette) ?? defaultColorScale;
   const onColorScaleSelect = (scale2) => {
     onChange(scale2);
     setIsOpen(false);
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs(react.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { ref: anchorRef, className: cx__default.default(styles__default.default.colorScale, className), children: /* @__PURE__ */ jsxRuntime.jsx(
-      ColorScale__default.default,
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("div", { ref: anchorRef, className: cx(styles.colorScale, className), children: /* @__PURE__ */ jsx(
+      ColorScale,
       {
         bins,
-        scale: scale ?? colors.defaultColorScaleName,
+        scale: scale ?? defaultColorScaleName,
         onClick: () => setIsOpen(true),
         width: width || 260
       }
     ) }),
-    isOpen && /* @__PURE__ */ jsxRuntime.jsx(
-      ui.Popover,
+    isOpen && /* @__PURE__ */ jsx(
+      Popover,
       {
         reference: anchorRef,
         arrow: false,
         placement: "right",
         onClickOutside: () => setIsOpen(false),
-        children: /* @__PURE__ */ jsxRuntime.jsx(
+        children: /* @__PURE__ */ jsx(
           "div",
           {
-            className: styles__default.default.popover,
+            className: styles.popover,
             style: {
               width: width + 24 || 260,
               height: "100%",
               overflow: "auto"
             },
-            children: colors.colorScales.map((scale2, index) => /* @__PURE__ */ jsxRuntime.jsx(
-              ColorScale__default.default,
+            children: colorScales.map((scale2, index) => /* @__PURE__ */ jsx(
+              ColorScale,
               {
                 scale: scale2,
                 bins,
@@ -74,6 +66,6 @@ const ColorScaleSelect = ({
 };
 var ColorScaleSelect_default = ColorScaleSelect;
 
-module.exports = ColorScaleSelect_default;
+export { ColorScaleSelect_default as default };
 //# sourceMappingURL=out.js.map
 //# sourceMappingURL=index.js.map

package/dist/components/Map/components/ThematicLayerConfiguration/components/ColorScaleSelect/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../src/components/Map/components/ThematicLayerConfiguration/components/ColorScaleSelect/index.tsx"],"names":["scale"],"mappings":"AAsCE,SAEE,KAFF;AAtCF,SAAgB,UAAU,QAAQ,gBAAgB;AAClD,SAAS,eAAe;AACxB,OAAO,QAAQ;AACf,OAAO,gBAAgB;AACvB,OAAO,YAAY;AACnB;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACM;AAEP,MAAM,mBAAmB,CAAC;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,MAMM;AACL,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAS,KAAK;AAC1C,QAAM,YAAY,OAAuB,IAAI;AAC7C,QAAM,UAAU,gBAAgB,YAAY,KAAK;AACjD,QAAM,OAAO,QAAQ,MAAM,GAAG,EAAE;AAChC,QAAM,QAAQ,cAAc,OAAO,KAAK;AAExC,QAAM,qBAAqB,CAACA,WAAkB;AAC7C,aAASA,MAAK;AACd,cAAU,KAAK;AAAA,EAChB;AAEA,SACC,qBAAC,YACA;AAAA,wBAAC,SAAI,KAAK,WAAW,WAAW,GAAG,OAAO,YAAY,SAAS,GAC9D;AAAA,MAAC;AAAA;AAAA,QACA;AAAA,QACA,OAAO,SAAS;AAAA,QAChB,SAAS,MAAM,UAAU,IAAI;AAAA,QAC7B,OAAO,SAAS;AAAA;AAAA,IACjB,GACD;AAAA,IACC,UACA;AAAA,MAAC;AAAA;AAAA,QACA,WAAW;AAAA,QACX,OAAO;AAAA,QACP,WAAU;AAAA,QACV,gBAAgB,MAAM,UAAU,KAAK;AAAA,QAErC;AAAA,UAAC;AAAA;AAAA,YACA,WAAW,OAAO;AAAA,YAClB,OAAO;AAAA,cACN,OAAO,QAAQ,MAAM;AAAA,cACrB,QAAQ;AAAA,cACR,UAAU;AAAA,YACX;AAAA,YAEC,sBAAY,IAAI,CAACA,QAAO,UACxB;AAAA,cAAC;AAAA;AAAA,gBAEA,OAAOA;AAAA,gBACP;AAAA,gBACA,SAAS;AAAA,gBACT,OAAO,SAAS;AAAA;AAAA,cAJX;AAAA,YAKN,CACA;AAAA;AAAA,QACF;AAAA;AAAA,IACD;AAAA,KAEF;AAEF;AAEA,IAAO,2BAAQ","sourcesContent":["import React, { Fragment, useRef, useState } from \"react\";\nimport { Popover } from \"@dhis2/ui\";\nimport cx from \"classnames\";\nimport ColorScale from \"./components/ColorScale\";\nimport styles from \"./styles/ColorScaleSelect.module.css\";\nimport {\n\tcolorScales,\n\tdefaultColorScale,\n\tdefaultColorScaleName,\n\tgetColorPalette,\n\tgetColorScale,\n} from \"./utils/colors\";\n\nconst ColorScaleSelect = ({\n\tcolorClass,\n\tcount,\n\twidth,\n\tonChange,\n\tclassName,\n}: {\n\tclassName?: string;\n\tcount: number;\n\twidth: number;\n\tonChange: (palette: string) => void;\n\tcolorClass: string;\n}) => {\n\tconst [isOpen, setIsOpen] = useState(false);\n\tconst anchorRef = useRef<HTMLDivElement>(null);\n\tconst palette = getColorPalette(colorClass, count);\n\tconst bins = palette.split(\",\").length;\n\tconst scale = getColorScale(palette) ?? defaultColorScale;\n\n\tconst onColorScaleSelect = (scale: string) => {\n\t\tonChange(scale);\n\t\tsetIsOpen(false);\n\t};\n\n\treturn (\n\t\t<Fragment>\n\t\t\t<div ref={anchorRef} className={cx(styles.colorScale, className)}>\n\t\t\t\t<ColorScale\n\t\t\t\t\tbins={bins}\n\t\t\t\t\tscale={scale ?? defaultColorScaleName}\n\t\t\t\t\tonClick={() => setIsOpen(true)}\n\t\t\t\t\twidth={width || 260}\n\t\t\t\t/>\n\t\t\t</div>\n\t\t\t{isOpen && (\n\t\t\t\t<Popover\n\t\t\t\t\treference={anchorRef}\n\t\t\t\t\tarrow={false}\n\t\t\t\t\tplacement=\"right\"\n\t\t\t\t\tonClickOutside={() => setIsOpen(false)}\n\t\t\t\t>\n\t\t\t\t\t<div\n\t\t\t\t\t\tclassName={styles.popover}\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\twidth: width + 24 || 260,\n\t\t\t\t\t\t\theight: \"100%\",\n\t\t\t\t\t\t\toverflow: \"auto\",\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t{colorScales.map((scale, index) => (\n\t\t\t\t\t\t\t<ColorScale\n\t\t\t\t\t\t\t\tkey={index}\n\t\t\t\t\t\t\t\tscale={scale}\n\t\t\t\t\t\t\t\tbins={bins}\n\t\t\t\t\t\t\t\tonClick={onColorScaleSelect}\n\t\t\t\t\t\t\t\twidth={width || 260}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t))}\n\t\t\t\t\t</div>\n\t\t\t\t</Popover>\n\t\t\t)}\n\t\t</Fragment>\n\t);\n};\n\nexport default ColorScaleSelect;\n"]}
+{"version":3,"sources":["../../../../../../../src/components/Map/components/ThematicLayerConfiguration/components/ColorScaleSelect/index.tsx"],"names":["scale"],"mappings":"AAsCE,SAEE,KAFF;AAtCF,SAAgB,UAAU,QAAQ,gBAAgB;AAClD,SAAS,eAAe;AACxB,OAAO,QAAQ;AACf,OAAO,gBAAgB;AACvB,OAAO,YAAY;AACnB;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACM;AAEP,MAAM,mBAAmB,CAAC;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,MAMM;AACL,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAS,KAAK;AAC1C,QAAM,YAAY,OAAuB,IAAI;AAC7C,QAAM,UAAU,gBAAgB,YAAY,KAAK;AACjD,QAAM,OAAO,QAAQ,MAAM,GAAG,EAAE;AAChC,QAAM,QAAQ,cAAc,OAAO,KAAK;AAExC,QAAM,qBAAqB,CAACA,WAAkB;AAC7C,aAASA,MAAK;AACd,cAAU,KAAK;AAAA,EAChB;AAEA,SACC,qBAAC,YACA;AAAA,wBAAC,SAAI,KAAK,WAAW,WAAW,GAAG,OAAO,YAAY,SAAS,GAC9D;AAAA,MAAC;AAAA;AAAA,QACA;AAAA,QACA,OAAO,SAAS;AAAA,QAChB,SAAS,MAAM,UAAU,IAAI;AAAA,QAC7B,OAAO,SAAS;AAAA;AAAA,IACjB,GACD;AAAA,IACC,UACA;AAAA,MAAC;AAAA;AAAA,QACA,WAAW;AAAA,QACX,OAAO;AAAA,QACP,WAAU;AAAA,QACV,gBAAgB,MAAM,UAAU,KAAK;AAAA,QAErC;AAAA,UAAC;AAAA;AAAA,YACA,WAAW,OAAO;AAAA,YAClB,OAAO;AAAA,cACN,OAAO,QAAQ,MAAM;AAAA,cACrB,QAAQ;AAAA,cACR,UAAU;AAAA,YACX;AAAA,YAEC,sBAAY,IAAI,CAACA,QAAO,UACxB;AAAA,cAAC;AAAA;AAAA,gBAEA,OAAOA;AAAA,gBACP;AAAA,gBACA,SAAS;AAAA,gBACT,OAAO,SAAS;AAAA;AAAA,cAJX;AAAA,YAKN,CACA;AAAA;AAAA,QACF;AAAA;AAAA,IACD;AAAA,KAEF;AAEF;AAEA,IAAO,2BAAQ","sourcesContent":["import React, { Fragment, useRef, useState } from \"react\";\nimport { Popover } from \"@dhis2/ui\";\nimport cx from \"classnames\";\nimport ColorScale from \"./components/ColorScale/index.js\";\nimport styles from \"./styles/ColorScaleSelect.module.css\";\nimport {\n\tcolorScales,\n\tdefaultColorScale,\n\tdefaultColorScaleName,\n\tgetColorPalette,\n\tgetColorScale,\n} from \"./utils/colors.js\";\n\nconst ColorScaleSelect = ({\n\tcolorClass,\n\tcount,\n\twidth,\n\tonChange,\n\tclassName,\n}: {\n\tclassName?: string;\n\tcount: number;\n\twidth: number;\n\tonChange: (palette: string) => void;\n\tcolorClass: string;\n}) => {\n\tconst [isOpen, setIsOpen] = useState(false);\n\tconst anchorRef = useRef<HTMLDivElement>(null);\n\tconst palette = getColorPalette(colorClass, count);\n\tconst bins = palette.split(\",\").length;\n\tconst scale = getColorScale(palette) ?? defaultColorScale;\n\n\tconst onColorScaleSelect = (scale: string) => {\n\t\tonChange(scale);\n\t\tsetIsOpen(false);\n\t};\n\n\treturn (\n\t\t<Fragment>\n\t\t\t<div ref={anchorRef} className={cx(styles.colorScale, className)}>\n\t\t\t\t<ColorScale\n\t\t\t\t\tbins={bins}\n\t\t\t\t\tscale={scale ?? defaultColorScaleName}\n\t\t\t\t\tonClick={() => setIsOpen(true)}\n\t\t\t\t\twidth={width || 260}\n\t\t\t\t/>\n\t\t\t</div>\n\t\t\t{isOpen && (\n\t\t\t\t<Popover\n\t\t\t\t\treference={anchorRef}\n\t\t\t\t\tarrow={false}\n\t\t\t\t\tplacement=\"right\"\n\t\t\t\t\tonClickOutside={() => setIsOpen(false)}\n\t\t\t\t>\n\t\t\t\t\t<div\n\t\t\t\t\t\tclassName={styles.popover}\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\twidth: width + 24 || 260,\n\t\t\t\t\t\t\theight: \"100%\",\n\t\t\t\t\t\t\toverflow: \"auto\",\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t{colorScales.map((scale, index) => (\n\t\t\t\t\t\t\t<ColorScale\n\t\t\t\t\t\t\t\tkey={index}\n\t\t\t\t\t\t\t\tscale={scale}\n\t\t\t\t\t\t\t\tbins={bins}\n\t\t\t\t\t\t\t\tonClick={onColorScaleSelect}\n\t\t\t\t\t\t\t\twidth={width || 260}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t))}\n\t\t\t\t\t</div>\n\t\t\t\t</Popover>\n\t\t\t)}\n\t\t</Fragment>\n\t);\n};\n\nexport default ColorScaleSelect;\n"]}

package/dist/components/Map/components/ThematicLayerConfiguration/components/ColorScaleSelect/utils/colors.js

@@ -1,22 +1,25 @@
-'use strict';
+import { hcl } from 'd3-color';
+import { isString } from 'lodash';
+import { COLOR_PALETTES } from '../constants/colors.js';
 
-var d3Color = require('d3-color');
-var lodash = require('lodash');
-var colors = require('../constants/colors');
-
-const colorbrewer = colors.COLOR_PALETTES;
+const colorbrewer = COLOR_PALETTES;
 const getColorPalette = (scale, classes) => {
   return colorbrewer[scale][classes].join(",");
 };
 const getColorScale = (palette) => {
   const classes = palette.split(",").length;
-  return colorScales.find((name) => colorbrewer[name]?.[classes]?.join(",") === palette);
+  return colorScales.find(
+    (name) => colorbrewer[name]?.[classes]?.join(",") === palette
+  );
 };
 const defaultColorScaleName = "YlOrBr";
 const defaultClasses = 5;
-const defaultColorScale = getColorPalette(defaultColorScaleName, defaultClasses);
+const defaultColorScale = getColorPalette(
+  defaultColorScaleName,
+  defaultClasses
+);
 const cssColor = (color) => {
-  if (!lodash.isString(color)) {
+  if (!isString(color)) {
     return color;
   } else if (color === "##normal") {
     return null;
@@ -26,7 +29,10 @@ const cssColor = (color) => {
 const getUniqueColor = (defaultColors) => {
   const colors = [...defaultColors];
   function randomColor() {
-    const color = "#000000".replace(/0/g, () => (~~(Math.random() * 16)).toString(16));
+    const color = "#000000".replace(
+      /0/g,
+      () => (~~(Math.random() * 16)).toString(16)
+    );
     if (colors.includes(color)) {
       return randomColor();
     }
@@ -35,7 +41,7 @@ const getUniqueColor = (defaultColors) => {
   }
   return (index) => colors[index] || randomColor();
 };
-const isDarkColor = (color) => d3Color.hcl(color).l < 70;
+const isDarkColor = (color) => hcl(color).l < 70;
 const getContrastColor = (color) => isDarkColor(color) ? "#fff" : "#000";
 const colorScales = [
   "YlOrBr",
@@ -71,15 +77,6 @@ const colorScales = [
   "Set3"
 ];
 
-exports.colorScales = colorScales;
-exports.cssColor = cssColor;
-exports.defaultClasses = defaultClasses;
-exports.defaultColorScale = defaultColorScale;
-exports.defaultColorScaleName = defaultColorScaleName;
-exports.getColorPalette = getColorPalette;
-exports.getColorScale = getColorScale;
-exports.getContrastColor = getContrastColor;
-exports.getUniqueColor = getUniqueColor;
-exports.isDarkColor = isDarkColor;
+export { colorScales, cssColor, defaultClasses, defaultColorScale, defaultColorScaleName, getColorPalette, getColorScale, getContrastColor, getUniqueColor, isDarkColor };
 //# sourceMappingURL=out.js.map
 //# sourceMappingURL=colors.js.map

package/dist/components/Map/components/ThematicLayerConfiguration/components/ColorScaleSelect/utils/colors.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../../src/components/Map/components/ThematicLayerConfiguration/components/ColorScaleSelect/utils/colors.ts"],"names":[],"mappings":"AAAA,SAAS,WAAW;AACpB,SAAS,gBAAgB;AACzB,SAAS,sBAAsB;AAE/B,MAAM,cAAmC;AAGlC,MAAM,kBAAkB,CAAC,OAAe,YAAoB;AACjE,SAAO,YAAY,KAAK,EAAE,OAAO,EAAE,KAAK,GAAG;AAC7C;AAGO,MAAM,gBAAgB,CAAC,YAAoB;AAChD,QAAM,UAAU,QAAQ,MAAM,GAAG,EAAE;AACnC,SAAO,YAAY,KAAK,CAAC,SAAS,YAAY,IAAI,IAAI,OAAO,GAAG,KAAK,GAAG,MAAM,OAAO;AACvF;AAEO,MAAM,wBAAwB;AAC9B,MAAM,iBAAiB;AACvB,MAAM,oBAAoB,gBAAgB,uBAAuB,cAAc;AAG/E,MAAM,WAAW,CAAC,UAAe;AACtC,MAAI,CAAC,SAAS,KAAK,GAAG;AACpB,WAAO;AAAA,EACT,WAAW,UAAU,YAAY;AAE/B,WAAO;AAAA,EACT;AACA,UAAQ,mCAAmC,KAAK,KAAK,IAAI,MAAM,MAAM;AACvE;AAGO,MAAM,iBAAiB,CAAC,kBAAuB;AACpD,QAAM,SAAS,CAAC,GAAG,aAAa;AAEhC,WAAS,cAAsB;AAC7B,UAAM,QAAQ,UAAU,QAAQ,MAAM,OAAO,CAAC,EAAE,KAAK,OAAO,IAAI,KAAK,SAAS,EAAE,CAAC;AAGjF,QAAI,OAAO,SAAS,KAAK,GAAG;AAC1B,aAAO,YAAY;AAAA,IACrB;AAEA,WAAO,KAAK,KAAK;AAEjB,WAAO;AAAA,EACT;AAEA,SAAO,CAAC,UAAkB,OAAO,KAAK,KAAK,YAAY;AACzD;AAGO,MAAM,cAAc,CAAC,UAAkB,IAAI,KAAK,EAAE,IAAI;AAGtD,MAAM,mBAAmB,CAAC,UAAmB,YAAY,KAAK,IAAI,SAAS;AAE3E,MAAM,cAAc;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF","sourcesContent":["import { hcl } from \"d3-color\";\nimport { isString } from \"lodash\";\nimport { COLOR_PALETTES } from \"../constants/colors\";\n\nconst colorbrewer: Record<string, any> = COLOR_PALETTES;\n\n// Returns a color brewer scale for a number of classes\nexport const getColorPalette = (scale: string, classes: number) => {\n  return colorbrewer[scale][classes].join(\",\");\n};\n\n// Returns color scale name for a palette\nexport const getColorScale = (palette: string) => {\n  const classes = palette.split(\",\").length;\n  return colorScales.find((name) => colorbrewer[name]?.[classes]?.join(\",\") === palette);\n};\n\nexport const defaultColorScaleName = \"YlOrBr\";\nexport const defaultClasses = 5;\nexport const defaultColorScale = getColorPalette(defaultColorScaleName, defaultClasses);\n\n// Correct colors not adhering to the css standard (add missing #)\nexport const cssColor = (color: any) => {\n  if (!isString(color)) {\n    return color;\n  } else if (color === \"##normal\") {\n    // ##normal is used in old map favorites\n    return null; // Will apply default color\n  }\n  return (/(^[0-9A-F]{6}$)|(^[0-9A-F]{3}$)/i.test(color) ? \"#\" : \"\") + color;\n};\n\n// Returns an unique color (first from an array, then random but still unique)\nexport const getUniqueColor = (defaultColors: any) => {\n  const colors = [...defaultColors];\n\n  function randomColor(): string {\n    const color = \"#000000\".replace(/0/g, () => (~~(Math.random() * 16)).toString(16));\n\n    // Recursive until color is unique\n    if (colors.includes(color)) {\n      return randomColor();\n    }\n\n    colors.push(color);\n\n    return color;\n  }\n\n  return (index: number) => colors[index] || randomColor();\n};\n\n// Returns true if a color is dark\nexport const isDarkColor = (color: string) => hcl(color).l < 70;\n\n// Returns constrasting color\nexport const getContrastColor = (color: string) => (isDarkColor(color) ? \"#fff\" : \"#000\");\nexport type LegendColorScale = typeof colorScales[number];\nexport const colorScales = [\n  \"YlOrBr\",\n  \"Reds\",\n  \"YlGn\",\n  \"Greens\",\n  \"Blues\",\n  \"BuPu\",\n  \"RdPu\",\n  \"PuRd\",\n  \"Greys\",\n  \"YlOrBr_reverse\",\n  \"Reds_reverse\",\n  \"YlGn_reverse\",\n  \"Greens_reverse\",\n  \"Blues_reverse\",\n  \"BuPu_reverse\",\n  \"RdPu_reverse\",\n  \"PuRd_reverse\",\n  \"Greys_reverse\",\n  \"PuOr\",\n  \"BrBG\",\n  \"PRGn\",\n  \"PiYG\",\n  \"RdBu\",\n  \"RdGy\",\n  \"RdYlBu\",\n  \"Spectral\",\n  \"RdYlGn\",\n  \"Paired\",\n  \"Pastel1\",\n  \"Set1\",\n  \"Set3\",\n];\n"]}
+{"version":3,"sources":["../../../../../../../../src/components/Map/components/ThematicLayerConfiguration/components/ColorScaleSelect/utils/colors.ts"],"names":[],"mappings":"AAAA,SAAS,WAAW;AACpB,SAAS,gBAAgB;AACzB,SAAS,sBAAsB;AAE/B,MAAM,cAAmC;AAGlC,MAAM,kBAAkB,CAAC,OAAe,YAAoB;AAClE,SAAO,YAAY,KAAK,EAAE,OAAO,EAAE,KAAK,GAAG;AAC5C;AAGO,MAAM,gBAAgB,CAAC,YAAoB;AACjD,QAAM,UAAU,QAAQ,MAAM,GAAG,EAAE;AACnC,SAAO,YAAY;AAAA,IAClB,CAAC,SAAS,YAAY,IAAI,IAAI,OAAO,GAAG,KAAK,GAAG,MAAM;AAAA,EACvD;AACD;AAEO,MAAM,wBAAwB;AAC9B,MAAM,iBAAiB;AACvB,MAAM,oBAAoB;AAAA,EAChC;AAAA,EACA;AACD;AAGO,MAAM,WAAW,CAAC,UAAe;AACvC,MAAI,CAAC,SAAS,KAAK,GAAG;AACrB,WAAO;AAAA,EACR,WAAW,UAAU,YAAY;AAEhC,WAAO;AAAA,EACR;AACA,UAAQ,mCAAmC,KAAK,KAAK,IAAI,MAAM,MAAM;AACtE;AAGO,MAAM,iBAAiB,CAAC,kBAAuB;AACrD,QAAM,SAAS,CAAC,GAAG,aAAa;AAEhC,WAAS,cAAsB;AAC9B,UAAM,QAAQ,UAAU;AAAA,MAAQ;AAAA,MAAM,OACpC,CAAC,EAAE,KAAK,OAAO,IAAI,KAAK,SAAS,EAAE;AAAA,IACrC;AAGA,QAAI,OAAO,SAAS,KAAK,GAAG;AAC3B,aAAO,YAAY;AAAA,IACpB;AAEA,WAAO,KAAK,KAAK;AAEjB,WAAO;AAAA,EACR;AAEA,SAAO,CAAC,UAAkB,OAAO,KAAK,KAAK,YAAY;AACxD;AAGO,MAAM,cAAc,CAAC,UAAkB,IAAI,KAAK,EAAE,IAAI;AAGtD,MAAM,mBAAmB,CAAC,UAChC,YAAY,KAAK,IAAI,SAAS;AAExB,MAAM,cAAc;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD","sourcesContent":["import { hcl } from \"d3-color\";\nimport { isString } from \"lodash\";\nimport { COLOR_PALETTES } from \"../constants/colors.js\";\n\nconst colorbrewer: Record<string, any> = COLOR_PALETTES;\n\n// Returns a color brewer scale for a number of classes\nexport const getColorPalette = (scale: string, classes: number) => {\n\treturn colorbrewer[scale][classes].join(\",\");\n};\n\n// Returns color scale name for a palette\nexport const getColorScale = (palette: string) => {\n\tconst classes = palette.split(\",\").length;\n\treturn colorScales.find(\n\t\t(name) => colorbrewer[name]?.[classes]?.join(\",\") === palette,\n\t);\n};\n\nexport const defaultColorScaleName = \"YlOrBr\";\nexport const defaultClasses = 5;\nexport const defaultColorScale = getColorPalette(\n\tdefaultColorScaleName,\n\tdefaultClasses,\n);\n\n// Correct colors not adhering to the css standard (add missing #)\nexport const cssColor = (color: any) => {\n\tif (!isString(color)) {\n\t\treturn color;\n\t} else if (color === \"##normal\") {\n\t\t// ##normal is used in old map favorites\n\t\treturn null; // Will apply default color\n\t}\n\treturn (/(^[0-9A-F]{6}$)|(^[0-9A-F]{3}$)/i.test(color) ? \"#\" : \"\") + color;\n};\n\n// Returns an unique color (first from an array, then random but still unique)\nexport const getUniqueColor = (defaultColors: any) => {\n\tconst colors = [...defaultColors];\n\n\tfunction randomColor(): string {\n\t\tconst color = \"#000000\".replace(/0/g, () =>\n\t\t\t(~~(Math.random() * 16)).toString(16),\n\t\t);\n\n\t\t// Recursive until color is unique\n\t\tif (colors.includes(color)) {\n\t\t\treturn randomColor();\n\t\t}\n\n\t\tcolors.push(color);\n\n\t\treturn color;\n\t}\n\n\treturn (index: number) => colors[index] || randomColor();\n};\n\n// Returns true if a color is dark\nexport const isDarkColor = (color: string) => hcl(color).l < 70;\n\n// Returns constrasting color\nexport const getContrastColor = (color: string) =>\n\tisDarkColor(color) ? \"#fff\" : \"#000\";\nexport type LegendColorScale = (typeof colorScales)[number];\nexport const colorScales = [\n\t\"YlOrBr\",\n\t\"Reds\",\n\t\"YlGn\",\n\t\"Greens\",\n\t\"Blues\",\n\t\"BuPu\",\n\t\"RdPu\",\n\t\"PuRd\",\n\t\"Greys\",\n\t\"YlOrBr_reverse\",\n\t\"Reds_reverse\",\n\t\"YlGn_reverse\",\n\t\"Greens_reverse\",\n\t\"Blues_reverse\",\n\t\"BuPu_reverse\",\n\t\"RdPu_reverse\",\n\t\"PuRd_reverse\",\n\t\"Greys_reverse\",\n\t\"PuOr\",\n\t\"BrBG\",\n\t\"PRGn\",\n\t\"PiYG\",\n\t\"RdBu\",\n\t\"RdGy\",\n\t\"RdYlBu\",\n\t\"Spectral\",\n\t\"RdYlGn\",\n\t\"Paired\",\n\t\"Pastel1\",\n\t\"Set1\",\n\t\"Set3\",\n];\n"]}

package/dist/components/Map/components/ThematicLayerConfiguration/components/CustomLegend/index.js

@@ -1,36 +1,29 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var reactHookForm = require('react-hook-form');
-var ui = require('@dhis2/ui');
-var colors = require('../../../../utils/colors');
-var i18n = require('@dhis2/d2-i18n');
-var ColorScaleSelect = require('../ColorScaleSelect');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var i18n__default = /*#__PURE__*/_interopDefault(i18n);
-var ColorScaleSelect__default = /*#__PURE__*/_interopDefault(ColorScaleSelect);
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useWatch, Controller } from 'react-hook-form';
+import { SingleSelectField, SingleSelectOption, Field } from '@dhis2/ui';
+import { defaultClasses, defaultColorScaleName } from '../../../../utils/colors.js';
+import i18n from '@dhis2/d2-i18n';
+import ColorScaleSelect from '../ColorScaleSelect/index.js';
 
 function CustomLegend() {
-  const scale = reactHookForm.useWatch({
+  const scale = useWatch({
     name: "dataItem.legendConfig.scale"
   });
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "row gap-16 space-between", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { style: { width: "30%" }, children: /* @__PURE__ */ jsxRuntime.jsx(
-      reactHookForm.Controller,
+  return /* @__PURE__ */ jsxs("div", { className: "row gap-16 space-between", children: [
+    /* @__PURE__ */ jsx("div", { style: { width: "30%" }, children: /* @__PURE__ */ jsx(
+      Controller,
       {
         name: "dataItem.legendConfig.scale",
-        render: ({ field, fieldState }) => /* @__PURE__ */ jsxRuntime.jsx(
-          ui.SingleSelectField,
+        render: ({ field, fieldState }) => /* @__PURE__ */ jsx(
+          SingleSelectField,
           {
             validationText: fieldState.error?.message,
             error: Boolean(fieldState.error),
-            selected: field.value?.toString() ?? colors.defaultClasses.toString(),
-            label: i18n__default.default.t("Classes"),
+            selected: field.value?.toString() ?? defaultClasses.toString(),
+            label: i18n.t("Classes"),
             onChange: ({ selected }) => field.onChange(parseInt(selected)),
-            children: [3, 4, 5, 6, 7, 8, 9].map((value) => /* @__PURE__ */ jsxRuntime.jsx(
-              ui.SingleSelectOption,
+            children: [3, 4, 5, 6, 7, 8, 9].map((value) => /* @__PURE__ */ jsx(
+              SingleSelectOption,
               {
                 label: `${value}`,
                 value: value?.toString()
@@ -41,15 +34,15 @@ function CustomLegend() {
         )
       }
     ) }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { style: { width: "70%" }, children: /* @__PURE__ */ jsxRuntime.jsx(
-      reactHookForm.Controller,
+    /* @__PURE__ */ jsx("div", { style: { width: "70%" }, children: /* @__PURE__ */ jsx(
+      Controller,
       {
         name: "dataItem.legendConfig.colorClass",
-        render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsx(ui.Field, { label: i18n__default.default.t("Colors"), children: /* @__PURE__ */ jsxRuntime.jsx(
-          ColorScaleSelect__default.default,
+        render: ({ field }) => /* @__PURE__ */ jsx(Field, { label: i18n.t("Colors"), children: /* @__PURE__ */ jsx(
+          ColorScaleSelect,
           {
-            count: scale ?? colors.defaultClasses,
-            colorClass: field.value ?? colors.defaultColorScaleName,
+            count: scale ?? defaultClasses,
+            colorClass: field.value ?? defaultColorScaleName,
             width: 300,
             onChange: field.onChange
           }
@@ -59,6 +52,6 @@ function CustomLegend() {
   ] });
 }
 
-exports.CustomLegend = CustomLegend;
+export { CustomLegend };
 //# sourceMappingURL=out.js.map
 //# sourceMappingURL=index.js.map

package/dist/components/Map/components/ThematicLayerConfiguration/components/CustomLegend/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../src/components/Map/components/ThematicLayerConfiguration/components/CustomLegend/index.tsx"],"names":[],"mappings":"AAgBE,SAkBM,KAlBN;AAhBF,SAAS,YAAY,gBAAgB;AACrC,SAAS,OAAO,mBAAmB,0BAA0B;AAC7D;AAAA,EACC;AAAA,EACA;AAAA,OACM;AACP,OAAO,UAAU;AACjB,OAAO,sBAAsB;AAGtB,SAAS,eAAe;AAC9B,QAAM,QAAQ,SAAS;AAAA,IACtB,MAAM;AAAA,EACP,CAAC;AAED,SACC,qBAAC,SAAI,WAAU,4BACd;AAAA,wBAAC,SAAI,OAAO,EAAE,OAAO,MAAM,GAC1B;AAAA,MAAC;AAAA;AAAA,QACA,MAAK;AAAA,QACL,QAAQ,CAAC,EAAE,OAAO,WAAW,MAC5B;AAAA,UAAC;AAAA;AAAA,YACA,gBAAgB,WAAW,OAAO;AAAA,YAClC,OAAO,QAAQ,WAAW,KAAK;AAAA,YAC/B,UACC,MAAM,OAAO,SAAS,KACtB,eAAe,SAAS;AAAA,YAEzB,OAAO,KAAK,EAAE,SAAS;AAAA,YACvB,UAAU,CAAC,EAAE,SAAS,MACrB,MAAM,SAAS,SAAS,QAAQ,CAAC;AAAA,YAGjC,WAAC,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC,EAAE,IAAI,CAAC,UAC3B;AAAA,cAAC;AAAA;AAAA,gBAEA,OAAO,GAAG,KAAK;AAAA,gBACf,OAAO,OAAO,SAAS;AAAA;AAAA,cAFlB,GAAG,KAAK;AAAA,YAGd,CACA;AAAA;AAAA,QACF;AAAA;AAAA,IAEF,GACD;AAAA,IACA,oBAAC,SAAI,OAAO,EAAE,OAAO,MAAM,GAC1B;AAAA,MAAC;AAAA;AAAA,QACA,MAAK;AAAA,QACL,QAAQ,CAAC,EAAE,MAAM,MAChB,oBAAC,SAAM,OAAO,KAAK,EAAE,QAAQ,GAC5B;AAAA,UAAC;AAAA;AAAA,YACA,OAAO,SAAS;AAAA,YAChB,YACC,MAAM,SAAS;AAAA,YAEhB,OAAO;AAAA,YACP,UAAU,MAAM;AAAA;AAAA,QACjB,GACD;AAAA;AAAA,IAEF,GACD;AAAA,KACD;AAEF","sourcesContent":["import { Controller, useWatch } from \"react-hook-form\";\nimport { Field, SingleSelectField, SingleSelectOption } from \"@dhis2/ui\";\nimport {\n\tdefaultClasses,\n\tdefaultColorScaleName,\n} from \"../../../../utils/colors\";\nimport i18n from \"@dhis2/d2-i18n\";\nimport ColorScaleSelect from \"../ColorScaleSelect\";\nimport React from \"react\";\n\nexport function CustomLegend() {\n\tconst scale = useWatch({\n\t\tname: \"dataItem.legendConfig.scale\",\n\t});\n\n\treturn (\n\t\t<div className=\"row gap-16 space-between\">\n\t\t\t<div style={{ width: \"30%\" }}>\n\t\t\t\t<Controller\n\t\t\t\t\tname=\"dataItem.legendConfig.scale\"\n\t\t\t\t\trender={({ field, fieldState }) => (\n\t\t\t\t\t\t<SingleSelectField\n\t\t\t\t\t\t\tvalidationText={fieldState.error?.message}\n\t\t\t\t\t\t\terror={Boolean(fieldState.error)}\n\t\t\t\t\t\t\tselected={\n\t\t\t\t\t\t\t\tfield.value?.toString() ??\n\t\t\t\t\t\t\t\tdefaultClasses.toString()\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tlabel={i18n.t(\"Classes\")}\n\t\t\t\t\t\t\tonChange={({ selected }: { selected: string }) =>\n\t\t\t\t\t\t\t\tfield.onChange(parseInt(selected))\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{[3, 4, 5, 6, 7, 8, 9].map((value) => (\n\t\t\t\t\t\t\t\t<SingleSelectOption\n\t\t\t\t\t\t\t\t\tkey={`${value}-classes-option`}\n\t\t\t\t\t\t\t\t\tlabel={`${value}`}\n\t\t\t\t\t\t\t\t\tvalue={value?.toString()}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t</SingleSelectField>\n\t\t\t\t\t)}\n\t\t\t\t/>\n\t\t\t</div>\n\t\t\t<div style={{ width: \"70%\" }}>\n\t\t\t\t<Controller\n\t\t\t\t\tname=\"dataItem.legendConfig.colorClass\"\n\t\t\t\t\trender={({ field }) => (\n\t\t\t\t\t\t<Field label={i18n.t(\"Colors\")}>\n\t\t\t\t\t\t\t<ColorScaleSelect\n\t\t\t\t\t\t\t\tcount={scale ?? defaultClasses}\n\t\t\t\t\t\t\t\tcolorClass={\n\t\t\t\t\t\t\t\t\tfield.value ?? defaultColorScaleName\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\twidth={300}\n\t\t\t\t\t\t\t\tonChange={field.onChange}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</Field>\n\t\t\t\t\t)}\n\t\t\t\t/>\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n"]}
+{"version":3,"sources":["../../../../../../../src/components/Map/components/ThematicLayerConfiguration/components/CustomLegend/index.tsx"],"names":[],"mappings":"AAgBE,SAkBM,KAlBN;AAhBF,SAAS,YAAY,gBAAgB;AACrC,SAAS,OAAO,mBAAmB,0BAA0B;AAC7D;AAAA,EACC;AAAA,EACA;AAAA,OACM;AACP,OAAO,UAAU;AACjB,OAAO,sBAAsB;AAGtB,SAAS,eAAe;AAC9B,QAAM,QAAQ,SAAS;AAAA,IACtB,MAAM;AAAA,EACP,CAAC;AAED,SACC,qBAAC,SAAI,WAAU,4BACd;AAAA,wBAAC,SAAI,OAAO,EAAE,OAAO,MAAM,GAC1B;AAAA,MAAC;AAAA;AAAA,QACA,MAAK;AAAA,QACL,QAAQ,CAAC,EAAE,OAAO,WAAW,MAC5B;AAAA,UAAC;AAAA;AAAA,YACA,gBAAgB,WAAW,OAAO;AAAA,YAClC,OAAO,QAAQ,WAAW,KAAK;AAAA,YAC/B,UACC,MAAM,OAAO,SAAS,KACtB,eAAe,SAAS;AAAA,YAEzB,OAAO,KAAK,EAAE,SAAS;AAAA,YACvB,UAAU,CAAC,EAAE,SAAS,MACrB,MAAM,SAAS,SAAS,QAAQ,CAAC;AAAA,YAGjC,WAAC,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC,EAAE,IAAI,CAAC,UAC3B;AAAA,cAAC;AAAA;AAAA,gBAEA,OAAO,GAAG,KAAK;AAAA,gBACf,OAAO,OAAO,SAAS;AAAA;AAAA,cAFlB,GAAG,KAAK;AAAA,YAGd,CACA;AAAA;AAAA,QACF;AAAA;AAAA,IAEF,GACD;AAAA,IACA,oBAAC,SAAI,OAAO,EAAE,OAAO,MAAM,GAC1B;AAAA,MAAC;AAAA;AAAA,QACA,MAAK;AAAA,QACL,QAAQ,CAAC,EAAE,MAAM,MAChB,oBAAC,SAAM,OAAO,KAAK,EAAE,QAAQ,GAC5B;AAAA,UAAC;AAAA;AAAA,YACA,OAAO,SAAS;AAAA,YAChB,YACC,MAAM,SAAS;AAAA,YAEhB,OAAO;AAAA,YACP,UAAU,MAAM;AAAA;AAAA,QACjB,GACD;AAAA;AAAA,IAEF,GACD;AAAA,KACD;AAEF","sourcesContent":["import { Controller, useWatch } from \"react-hook-form\";\nimport { Field, SingleSelectField, SingleSelectOption } from \"@dhis2/ui\";\nimport {\n\tdefaultClasses,\n\tdefaultColorScaleName,\n} from \"../../../../utils/colors.js\";\nimport i18n from \"@dhis2/d2-i18n\";\nimport ColorScaleSelect from \"../ColorScaleSelect/index.js\";\nimport React from \"react\";\n\nexport function CustomLegend() {\n\tconst scale = useWatch({\n\t\tname: \"dataItem.legendConfig.scale\",\n\t});\n\n\treturn (\n\t\t<div className=\"row gap-16 space-between\">\n\t\t\t<div style={{ width: \"30%\" }}>\n\t\t\t\t<Controller\n\t\t\t\t\tname=\"dataItem.legendConfig.scale\"\n\t\t\t\t\trender={({ field, fieldState }) => (\n\t\t\t\t\t\t<SingleSelectField\n\t\t\t\t\t\t\tvalidationText={fieldState.error?.message}\n\t\t\t\t\t\t\terror={Boolean(fieldState.error)}\n\t\t\t\t\t\t\tselected={\n\t\t\t\t\t\t\t\tfield.value?.toString() ??\n\t\t\t\t\t\t\t\tdefaultClasses.toString()\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tlabel={i18n.t(\"Classes\")}\n\t\t\t\t\t\t\tonChange={({ selected }: { selected: string }) =>\n\t\t\t\t\t\t\t\tfield.onChange(parseInt(selected))\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{[3, 4, 5, 6, 7, 8, 9].map((value) => (\n\t\t\t\t\t\t\t\t<SingleSelectOption\n\t\t\t\t\t\t\t\t\tkey={`${value}-classes-option`}\n\t\t\t\t\t\t\t\t\tlabel={`${value}`}\n\t\t\t\t\t\t\t\t\tvalue={value?.toString()}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t</SingleSelectField>\n\t\t\t\t\t)}\n\t\t\t\t/>\n\t\t\t</div>\n\t\t\t<div style={{ width: \"70%\" }}>\n\t\t\t\t<Controller\n\t\t\t\t\tname=\"dataItem.legendConfig.colorClass\"\n\t\t\t\t\trender={({ field }) => (\n\t\t\t\t\t\t<Field label={i18n.t(\"Colors\")}>\n\t\t\t\t\t\t\t<ColorScaleSelect\n\t\t\t\t\t\t\t\tcount={scale ?? defaultClasses}\n\t\t\t\t\t\t\t\tcolorClass={\n\t\t\t\t\t\t\t\t\tfield.value ?? defaultColorScaleName\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\twidth={300}\n\t\t\t\t\t\t\t\tonChange={field.onChange}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</Field>\n\t\t\t\t\t)}\n\t\t\t\t/>\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n"]}

package/dist/components/Map/components/ThematicLayerConfiguration/components/IndicatorSelectorModal/index.js

@@ -1,14 +1,8 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var i18n = require('@dhis2/d2-i18n');
-var ui = require('@dhis2/ui');
-var react = require('react');
-var dhis2Ui = require('@hisptz/dhis2-ui');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var i18n__default = /*#__PURE__*/_interopDefault(i18n);
+import { jsxs, jsx } from 'react/jsx-runtime';
+import i18n from '@dhis2/d2-i18n';
+import { Modal, ModalTitle, ModalContent, ModalActions, ButtonStrip, Button } from '@dhis2/ui';
+import { useState, useCallback } from 'react';
+import { DataSourceSelector } from '@hisptz/dhis2-ui';
 
 function IndicatorSelectorModal({
   onUpdate,
@@ -18,18 +12,18 @@ function IndicatorSelectorModal({
   disabled,
   ...props
 }) {
-  const [selectedIndicators, setSelectedIndicators] = react.useState(selected);
-  const onUpdateClick = react.useCallback(() => {
+  const [selectedIndicators, setSelectedIndicators] = useState(selected);
+  const onUpdateClick = useCallback(() => {
     onUpdate(selectedIndicators);
     onClose();
   }, [onUpdate, selectedIndicators]);
-  const onSelect = react.useCallback((indicators) => {
+  const onSelect = useCallback((indicators) => {
     setSelectedIndicators(indicators);
   }, []);
-  return /* @__PURE__ */ jsxRuntime.jsxs(ui.Modal, { position: "middle", hide, onClose, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(ui.ModalTitle, { children: i18n__default.default.t("Select Data Item") }),
-    /* @__PURE__ */ jsxRuntime.jsx(ui.ModalContent, { children: /* @__PURE__ */ jsxRuntime.jsx(
-      dhis2Ui.DataSourceSelector,
+  return /* @__PURE__ */ jsxs(Modal, { position: "middle", hide, onClose, children: [
+    /* @__PURE__ */ jsx(ModalTitle, { children: i18n.t("Select Data Item") }),
+    /* @__PURE__ */ jsx(ModalContent, { children: /* @__PURE__ */ jsx(
+      DataSourceSelector,
       {
         ...props,
         disabled,
@@ -38,13 +32,13 @@ function IndicatorSelectorModal({
         onSelect
       }
     ) }),
-    /* @__PURE__ */ jsxRuntime.jsx(ui.ModalActions, { children: /* @__PURE__ */ jsxRuntime.jsxs(ui.ButtonStrip, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { onClick: onClose, children: i18n__default.default.t("Cancel") }),
-      /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { primary: true, onClick: onUpdateClick, children: i18n__default.default.t("Update") })
+    /* @__PURE__ */ jsx(ModalActions, { children: /* @__PURE__ */ jsxs(ButtonStrip, { children: [
+      /* @__PURE__ */ jsx(Button, { onClick: onClose, children: i18n.t("Cancel") }),
+      /* @__PURE__ */ jsx(Button, { primary: true, onClick: onUpdateClick, children: i18n.t("Update") })
     ] }) })
   ] });
 }
 
-module.exports = IndicatorSelectorModal;
+export { IndicatorSelectorModal as default };
 //# sourceMappingURL=out.js.map
 //# sourceMappingURL=index.js.map

package/dist/components/Map/components/ThematicLayerConfiguration/components/LegendSetSelector/index.js

@@ -1,15 +1,9 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var appRuntime = require('@dhis2/app-runtime');
-var react = require('react');
-var ui = require('@dhis2/ui');
-var i18n = require('@dhis2/d2-i18n');
-var lodash = require('lodash');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var i18n__default = /*#__PURE__*/_interopDefault(i18n);
+import { jsx } from 'react/jsx-runtime';
+import { useDataQuery } from '@dhis2/app-runtime';
+import { useMemo } from 'react';
+import { SingleSelectField, SingleSelectOption } from '@dhis2/ui';
+import i18n from '@dhis2/d2-i18n';
+import { isEmpty } from 'lodash';
 
 const legendSetQuery = {
   legendSets: {
@@ -26,8 +20,8 @@ function LegendSetSelector({
   required,
   ...props
 }) {
-  const { loading, data } = appRuntime.useDataQuery(legendSetQuery);
-  const options = react.useMemo(() => {
+  const { loading, data } = useDataQuery(legendSetQuery);
+  const options = useMemo(() => {
     if (data) {
       return data?.legendSets?.legendSets?.map(({ displayName, id }) => ({
         label: displayName ?? id,
@@ -36,21 +30,21 @@ function LegendSetSelector({
     }
     return [];
   }, [data]);
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    ui.SingleSelectField,
+  return /* @__PURE__ */ jsx(
+    SingleSelectField,
     {
       required,
       error: Boolean(error),
       validationText: error?.message,
       ...props,
-      label: i18n__default.default.t("Legend set"),
+      label: i18n.t("Legend set"),
       filterable: true,
-      selected: !lodash.isEmpty(options) ? selected : void 0,
-      loadingText: i18n__default.default.t("Please wait..."),
+      selected: !isEmpty(options) ? selected : void 0,
+      loadingText: i18n.t("Please wait..."),
       onChange: ({ selected: selected2 }) => onChange(selected2),
       loading,
-      children: options?.map(({ label, value }) => /* @__PURE__ */ jsxRuntime.jsx(
-        ui.SingleSelectOption,
+      children: options?.map(({ label, value }) => /* @__PURE__ */ jsx(
+        SingleSelectOption,
         {
           label,
           value
@@ -61,6 +55,6 @@ function LegendSetSelector({
   );
 }
 
-exports.LegendSetSelector = LegendSetSelector;
+export { LegendSetSelector };
 //# sourceMappingURL=out.js.map
 //# sourceMappingURL=index.js.map

package/dist/components/Map/components/ThematicLayerConfiguration/components/RadiusField.js

@@ -1,21 +1,15 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var reactHookForm = require('react-hook-form');
-var ui = require('@dhis2/ui');
-var i18n = require('@dhis2/d2-i18n');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var i18n__default = /*#__PURE__*/_interopDefault(i18n);
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Controller } from 'react-hook-form';
+import { InputField } from '@dhis2/ui';
+import i18n from '@dhis2/d2-i18n';
 
 function RadiusField() {
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "row gap-8", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      reactHookForm.Controller,
+  return /* @__PURE__ */ jsxs("div", { className: "row gap-8", children: [
+    /* @__PURE__ */ jsx(
+      Controller,
       {
-        render: ({ field, fieldState }) => /* @__PURE__ */ jsxRuntime.jsx(
-          ui.InputField,
+        render: ({ field, fieldState }) => /* @__PURE__ */ jsx(
+          InputField,
           {
             ...field,
             error: Boolean(fieldState.error),
@@ -26,18 +20,18 @@ function RadiusField() {
                 return;
               field.onChange(parseInt(value));
             },
-            label: i18n__default.default.t("Min"),
+            label: i18n.t("Min"),
             type: "number"
           }
         ),
         name: "radius.min"
       }
     ),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      reactHookForm.Controller,
+    /* @__PURE__ */ jsx(
+      Controller,
       {
-        render: ({ field, fieldState }) => /* @__PURE__ */ jsxRuntime.jsx(
-          ui.InputField,
+        render: ({ field, fieldState }) => /* @__PURE__ */ jsx(
+          InputField,
           {
             value: field.value?.toString(),
             onChange: ({ value }) => {
@@ -45,7 +39,7 @@ function RadiusField() {
                 return;
               field.onChange(parseInt(value));
             },
-            label: i18n__default.default.t("Max"),
+            label: i18n.t("Max"),
             type: "number"
           }
         ),
@@ -55,6 +49,6 @@ function RadiusField() {
   ] });
 }
 
-exports.RadiusField = RadiusField;
+export { RadiusField };
 //# sourceMappingURL=out.js.map
 //# sourceMappingURL=RadiusField.js.map