@dbmx/toasts 0.0.39 → 0.0.40

package/cjs/components/SdmxDatagrid/index.cjs

@@ -6,7 +6,7 @@ var PropTypes = require('prop-types');
 var core = require('@mantine/core');
 var iconsReact = require('@tabler/icons-react');
 var reactIntl = require('react-intl');
-var data = require('../../node_modules/@dbmx/sdmx/cjs/data.cjs');
+var data = require('@dbmx/sdmx/cjs/data');
 var messages = require('./messages.cjs');
 var SDMXGrid = require('./SDMXGrid.cjs');
 var index = require('./utils/index.cjs');

package/cjs/components/SdmxDatagrid/utils/index.cjs

@@ -1,10 +1,8 @@
 'use strict';
 
 var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.cjs');
+var sdmx = require('@dbmx/sdmx');
 var urljoin = require('url-join');
-var core = require('../../../node_modules/@dbmx/sdmx/esm/core.cjs');
-var datastructures = require('../../../node_modules/@dbmx/sdmx/esm/datastructures.cjs');
-var query = require('../../../node_modules/@dbmx/sdmx/esm/query.cjs');
 
 function sortByKey(array, key) {
   return array.sort(function (a, b) {
@@ -67,9 +65,9 @@ var getStructure = /*#__PURE__*/function () {
   };
 }();
 var getDataStructure = function getDataStructure(dataflow, structure) {
-  if (!(dataflow !== null && dataflow !== void 0 && dataflow.structure)) throw new Error("Cannot get dataStructure from dataflow ".concat(core.ID(dataflow)));
-  var dsRef = core.urn2FullRef(dataflow.structure);
-  return core.resolveResourceFromStructure(structure, dataflow, dsRef, {
+  if (!(dataflow !== null && dataflow !== void 0 && dataflow.structure)) throw new Error("Cannot get dataStructure from dataflow ".concat(sdmx.ID(dataflow)));
+  var dsRef = sdmx.urn2FullRef(dataflow.structure);
+  return sdmx.resolveResourceFromStructure(structure, dataflow, dsRef, {
     noError: true
   });
 };
@@ -94,7 +92,7 @@ var getColumns = function getColumns() {
   };
 };
 var getSelectedComponents = function getSelectedComponents(resource) {
-  var components = datastructures.getComponents(resource);
+  var components = sdmx.getComponents(resource);
   return components.reduce(function (acc, component) {
     return _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, acc), {}, _rollupPluginBabelHelpers.defineProperty({}, component.id, component));
   }, {});
@@ -113,9 +111,9 @@ var getData = /*#__PURE__*/function () {
             min: 1,
             max: 100
           };
-          dataUrl = query.dataQueryUrl(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({
+          dataUrl = sdmx.dataQueryUrl(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({
             context: 'dataflow'
-          }, core.getRef(dataflow)), {}, {
+          }, sdmx.getRef(dataflow)), {}, {
             endpoint: endpoint
           }));
           min = range.min, max = range.max;

package/cjs/fake-ZW05emqw.js

@@ -0,0 +1,35 @@
+'use strict';
+
+var React = require('react');
+var core = require('@mantine/core');
+var PropTypes = require('prop-types');
+
+function _interopNamespaceDefault(e) {
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+
+var Fake = function Fake(_ref) {
+  var message = _ref.message;
+  return /*#__PURE__*/React__namespace.createElement(core.Text, null, "COUCOU ".concat(message));
+};
+Fake.propTypes = {
+  message: PropTypes.string.isRequired
+};
+
+exports.default = Fake;
+//# sourceMappingURL=fake-ZW05emqw.js.map

package/cjs/fake-ZW05emqw.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fake-ZW05emqw.js","sources":["../src/components/fake.js"],"sourcesContent":["import * as React from 'react'\nimport { Text } from '@mantine/core'\nimport PropTypes from 'prop-types'\n\nconst Fake = ({ message }) => {\n  return <Text>{`COUCOU ${message}`}</Text>\n}\n\nFake.propTypes = {\n  message: PropTypes.string.isRequired,\n}\n\nexport default Fake\n"],"names":["Fake","_ref","message","React","createElement","Text","concat","propTypes","PropTypes","string","isRequired"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAIA,IAAMA,IAAI,GAAG,SAAPA,IAAIA,CAAAC,IAAA,EAAoB;AAAA,EAAA,IAAdC,OAAO,GAAAD,IAAA,CAAPC,OAAO,CAAA;EACrB,oBAAOC,gBAAA,CAAAC,aAAA,CAACC,SAAI,kBAAAC,MAAA,CAAYJ,OAAO,CAAS,CAAC,CAAA;AAC3C,EAAC;AAEDF,IAAI,CAACO,SAAS,GAAG;AACfL,EAAAA,OAAO,EAAEM,SAAS,CAACC,MAAM,CAACC,UAAAA;AAC5B,CAAC;;;;"}

package/cjs/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../src/index.js"],"sourcesContent":["import { lazy } from 'react'\n\nconst importPath = '@dbmx/toasts'\nconst type = importPath\n\nconst toasts = [\n  {\n    id: 'fake',\n    importPath,\n    type,\n    name: 'Fake Component',\n    description: ' blah blah blah ...',\n    component: lazy(() => import('./components/fake.js')),\n    image: 'https://ui.mantine.dev/_next/static/media/stats-light.c6e8954d.svg',\n    props: {\n      message: {\n        type: 'string',\n        required: false,\n        defaultValue: 'ici les bidibules',\n      },\n    },\n  },\n]\n\nexport default toasts\n"],"names":["importPath","type","toasts","id","name","description","component","lazy","image","props","message","required","defaultValue"],"mappings":";;;;AAEA,IAAMA,UAAU,GAAG,cAAc,CAAA;AACjC,IAAMC,IAAI,GAAGD,UAAU,CAAA;AAEjBE,IAAAA,MAAM,GAAG,CACb;AACEC,EAAAA,EAAE,EAAE,MAAM;AACVH,EAAAA,UAAU,EAAVA,UAAU;AACVC,EAAAA,IAAI,EAAJA,IAAI;AACJG,EAAAA,IAAI,EAAE,gBAAgB;AACtBC,EAAAA,WAAW,EAAE,qBAAqB;EAClCC,SAAS,eAAEC,UAAI,CAAC,YAAA;IAAA,OAAM,oDAAO,oBAAsB,KAAC,CAAA;GAAC,CAAA;AACrDC,EAAAA,KAAK,EAAE,oEAAoE;AAC3EC,EAAAA,KAAK,EAAE;AACLC,IAAAA,OAAO,EAAE;AACPT,MAAAA,IAAI,EAAE,QAAQ;AACdU,MAAAA,QAAQ,EAAE,KAAK;AACfC,MAAAA,YAAY,EAAE,mBAAA;AAChB,KAAA;AACF,GAAA;AACF,CAAC;;;;"}

package/esm/fake-JHdVf8lQ.js

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import { Text } from '@mantine/core';
+import PropTypes from 'prop-types';
+
+var Fake = function Fake(_ref) {
+  var message = _ref.message;
+  return /*#__PURE__*/React.createElement(Text, null, "COUCOU ".concat(message));
+};
+Fake.propTypes = {
+  message: PropTypes.string.isRequired
+};
+
+export { Fake as default };
+//# sourceMappingURL=fake-JHdVf8lQ.js.map

package/esm/fake-JHdVf8lQ.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fake-JHdVf8lQ.js","sources":["../src/components/fake.js"],"sourcesContent":["import * as React from 'react'\nimport { Text } from '@mantine/core'\nimport PropTypes from 'prop-types'\n\nconst Fake = ({ message }) => {\n  return <Text>{`COUCOU ${message}`}</Text>\n}\n\nFake.propTypes = {\n  message: PropTypes.string.isRequired,\n}\n\nexport default Fake\n"],"names":["Fake","_ref","message","React","createElement","Text","concat","propTypes","PropTypes","string","isRequired"],"mappings":";;;;AAIA,IAAMA,IAAI,GAAG,SAAPA,IAAIA,CAAAC,IAAA,EAAoB;AAAA,EAAA,IAAdC,OAAO,GAAAD,IAAA,CAAPC,OAAO,CAAA;EACrB,oBAAOC,KAAA,CAAAC,aAAA,CAACC,IAAI,kBAAAC,MAAA,CAAYJ,OAAO,CAAS,CAAC,CAAA;AAC3C,EAAC;AAEDF,IAAI,CAACO,SAAS,GAAG;AACfL,EAAAA,OAAO,EAAEM,SAAS,CAACC,MAAM,CAACC,UAAAA;AAC5B,CAAC;;;;"}

package/esm/index-lo-MKsEb.js

@@ -0,0 +1,556 @@
+import { _ as _asyncToGenerator, a as _objectSpread2, b as _defineProperty, c as _regeneratorRuntime, d as _createForOfIteratorHelper, e as _slicedToArray, f as _toConsumableArray, g as _inherits, h as _createSuper, i as _createClass, j as _classCallCheck, k as _assertThisInitialized, l as createRoot, m as _wrapNativeSuper } from './client-gw8asYiR.js';
+import React, { useMemo, useState, useEffect, useReducer } from 'react';
+import { defineMessages, useIntl, IntlProvider } from 'react-intl';
+import { createStyles, Box, Loader, rem, Text, createEmotionCache, MantineProvider } from '@mantine/core';
+import PropTypes from 'prop-types';
+import { IconAlertCircleFilled, IconThumbDown } from '@tabler/icons-react';
+import { getObservations } from '@dbmx/sdmx/cjs/data';
+import { MantineReactTable, MRT_ShowHideColumnsButton, MRT_ToggleFullScreenButton } from 'mantine-react-table';
+import { ID, urn2FullRef, resolveResourceFromStructure, getComponents, dataQueryUrl, getRef } from '@dbmx/sdmx';
+import urljoin from 'url-join';
+import 'react-dom';
+
+var messages = defineMessages({
+  urlIsRequired: {
+    id: 'components.SdmxComponent.urlIsRequired',
+    defaultMessage: 'URL Is Required!'
+  },
+  noData: {
+    id: 'components.SdmxComponent.noData',
+    defaultMessage: 'No Data Available!'
+  },
+  dimension: {
+    id: 'components.SdmxComponent.dimension',
+    defaultMessage: 'Dimension'
+  },
+  timeDimension: {
+    id: 'components.SdmxComponent.timeDimension',
+    defaultMessage: 'Time Dimension'
+  },
+  measure: {
+    id: 'components.SdmxComponent.measure',
+    defaultMessage: 'Measure'
+  },
+  invalidComProps: {
+    id: 'components.SdmxComponent.invalidComProps',
+    defaultMessage: 'Invalid component props!'
+  }
+});
+
+var useStyles$1 = createStyles(function () {
+  return {
+    loadingContainer: {
+      width: '100%',
+      height: '100%',
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center'
+    }
+  };
+});
+var LoadingBox = function LoadingBox() {
+  var _useStyles = useStyles$1(),
+    classes = _useStyles.classes;
+  return /*#__PURE__*/React.createElement(Box, {
+    className: classes.loadingContainer
+  }, /*#__PURE__*/React.createElement(Loader, {
+    color: "blue",
+    size: "lg"
+  }));
+};
+
+function sortByKey(array, key) {
+  return array.sort(function (a, b) {
+    var x = a[key];
+    var y = b[key];
+    return x < y ? -1 : x > y ? 1 : 0;
+  });
+}
+var getStructure = /*#__PURE__*/function () {
+  var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(url) {
+    var headers,
+      response,
+      data,
+      responseHeaders,
+      _iterator,
+      _step,
+      pair,
+      _args = arguments;
+    return _regeneratorRuntime().wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          headers = _args.length > 1 && _args[1] !== undefined ? _args[1] : {};
+          _context.next = 3;
+          return fetch(url, {
+            method: 'GET',
+            headers: _objectSpread2({
+              'Content-Type': 'application/json'
+            }, headers)
+          });
+        case 3:
+          response = _context.sent;
+          _context.next = 6;
+          return response.json();
+        case 6:
+          data = _context.sent;
+          responseHeaders = {};
+          _iterator = _createForOfIteratorHelper(response.headers.entries());
+          try {
+            for (_iterator.s(); !(_step = _iterator.n()).done;) {
+              pair = _step.value;
+              responseHeaders[pair[0]] = pair[1];
+            }
+          } catch (err) {
+            _iterator.e(err);
+          } finally {
+            _iterator.f();
+          }
+          return _context.abrupt("return", {
+            data: data,
+            responseHeaders: responseHeaders
+          });
+        case 11:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee);
+  }));
+  return function getStructure(_x) {
+    return _ref.apply(this, arguments);
+  };
+}();
+var getDataStructure = function getDataStructure(dataflow, structure) {
+  if (!(dataflow !== null && dataflow !== void 0 && dataflow.structure)) throw new Error("Cannot get dataStructure from dataflow ".concat(ID(dataflow)));
+  var dsRef = urn2FullRef(dataflow.structure);
+  return resolveResourceFromStructure(structure, dataflow, dsRef, {
+    noError: true
+  });
+};
+var getColumns = function getColumns() {
+  var components = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  var comps = Object.values(components);
+  var dimensions = comps.filter(function (comp) {
+    return comp.type === 'dimension';
+  });
+  var timeDimension = comps.filter(function (comp) {
+    return comp.type === 'timeDimension';
+  })[0];
+  var measures = comps.filter(function (comp) {
+    return comp.type === 'measure';
+  });
+  var sortedDimensions = sortByKey(dimensions, 'position');
+  var sortedMesures = sortByKey(measures, 'id');
+  return {
+    dimensions: sortedDimensions,
+    timeDimension: timeDimension,
+    measures: sortedMesures
+  };
+};
+var getSelectedComponents = function getSelectedComponents(resource) {
+  var components = getComponents(resource);
+  return components.reduce(function (acc, component) {
+    return _objectSpread2(_objectSpread2({}, acc), {}, _defineProperty({}, component.id, component));
+  }, {});
+};
+var getData = /*#__PURE__*/function () {
+  var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2(dataflow, endpoint) {
+    var range,
+      dataUrl,
+      min,
+      max,
+      _args2 = arguments;
+    return _regeneratorRuntime().wrap(function _callee2$(_context2) {
+      while (1) switch (_context2.prev = _context2.next) {
+        case 0:
+          range = _args2.length > 2 && _args2[2] !== undefined ? _args2[2] : {
+            min: 1,
+            max: 100
+          };
+          dataUrl = dataQueryUrl(_objectSpread2(_objectSpread2({
+            context: 'dataflow'
+          }, getRef(dataflow)), {}, {
+            endpoint: endpoint
+          }));
+          min = range.min, max = range.max;
+          return _context2.abrupt("return", getStructure(dataUrl, {
+            'x-Range': "values=".concat(min, "-").concat(max)
+          }));
+        case 4:
+        case "end":
+          return _context2.stop();
+      }
+    }, _callee2);
+  }));
+  return function getData(_x2, _x3) {
+    return _ref2.apply(this, arguments);
+  };
+}();
+var getCellValue = function getCellValue(cell) {
+  var cellValue = cell.getValue();
+  return (cellValue === null || cellValue === void 0 ? void 0 : cellValue.name) || (cellValue === null || cellValue === void 0 ? void 0 : cellValue.id) || (cellValue === null || cellValue === void 0 ? void 0 : cellValue.value);
+};
+var getSdmxUrl = function getSdmxUrl(_ref3) {
+  var endpoint = _ref3.endpoint,
+    resourceType = _ref3.resourceType,
+    _ref3$agencyID = _ref3.agencyID,
+    agencyID = _ref3$agencyID === void 0 ? '*' : _ref3$agencyID,
+    _ref3$id = _ref3.id,
+    id = _ref3$id === void 0 ? '*' : _ref3$id,
+    _ref3$version = _ref3.version,
+    version = _ref3$version === void 0 ? '~' : _ref3$version;
+  if (!endpoint || !resourceType) throw new Error('endpoint & resourceType are required');
+  var url = urljoin(endpoint, 'structure', resourceType, agencyID, id, version, '?detail=full&references=all');
+  return url;
+};
+var getRange = function getRange(pagination) {
+  var pageIndex = pagination.pageIndex,
+    pageSize = pagination.pageSize;
+  var min = pageSize * pageIndex;
+  var max = pageSize * pageIndex + pageSize - 1;
+  return {
+    min: min,
+    max: max
+  };
+};
+var getObservationsCount = function getObservationsCount(responseHeaders) {
+  var contentRange = responseHeaders['content-range'];
+  return parseInt(contentRange.split('/')[1]);
+};
+
+var SDMXGrid = function SDMXGrid(_ref) {
+  var dataStructure = _ref.dataStructure,
+    data = _ref.data,
+    pagination = _ref.pagination,
+    onPaginationChange = _ref.onPaginationChange,
+    observationCount = _ref.observationCount,
+    isLoading = _ref.isLoading;
+  if (!data) return /*#__PURE__*/React.createElement(LoadingBox, null);
+  var intl = useIntl();
+  var components = useMemo(function () {
+    return getSelectedComponents(dataStructure);
+  }, [dataStructure]);
+  var columns = useMemo(function () {
+    var _getColumns = getColumns(components),
+      dimensions = _getColumns.dimensions,
+      timeDimension = _getColumns.timeDimension,
+      measures = _getColumns.measures;
+    return [{
+      accessorKey: 'dimension',
+      header: intl.formatMessage(messages.dimension),
+      columns: dimensions.map(function (col) {
+        return {
+          accessorKey: col.id,
+          header: col.id || col.name,
+          Cell: function Cell(_ref2) {
+            var cell = _ref2.cell;
+            return getCellValue(cell);
+          }
+        };
+      })
+    }, {
+      accessorKey: 'timeDimension',
+      header: intl.formatMessage(messages.timeDimension),
+      columns: [{
+        accessorKey: timeDimension.id,
+        header: timeDimension.id || timeDimension.name,
+        Cell: function Cell(_ref3) {
+          var cell = _ref3.cell;
+          return getCellValue(cell);
+        }
+      }]
+    }, {
+      accessorKey: 'measure',
+      header: intl.formatMessage(messages.measure),
+      columns: measures.map(function (col) {
+        return {
+          accessorKey: col.id,
+          header: col.id || col.name,
+          Cell: function Cell(_ref4) {
+            var cell = _ref4.cell;
+            return getCellValue(cell);
+          }
+        };
+      })
+    }];
+  }, [components]);
+  return /*#__PURE__*/React.createElement(MantineReactTable, {
+    data: data,
+    columns: columns,
+    initialState: {
+      density: 'xs'
+    },
+    mantineTableProps: {
+      striped: true
+    },
+    enableStickyHeader: true,
+    enableColumnFilterModes: false,
+    enableColumnActions: false,
+    enableSorting: false,
+    enablePinning: true,
+    manualPagination: true,
+    rowCount: observationCount,
+    onPaginationChange: onPaginationChange,
+    state: {
+      pagination: pagination,
+      isLoading: isLoading
+    },
+    mantinePaginationProps: {
+      rowsPerPageOptions: ['100', '500', '1000', '2000'],
+      withEdges: true
+    },
+    renderToolbarInternalActions: function renderToolbarInternalActions(_ref5) {
+      var table = _ref5.table;
+      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(MRT_ShowHideColumnsButton, {
+        table: table
+      }), /*#__PURE__*/React.createElement(MRT_ToggleFullScreenButton, {
+        table: table
+      }));
+    },
+    mantineTableContainerProps: {
+      sx: {
+        height: 'calc(100% - 110px)'
+      }
+    },
+    mantinePaperProps: {
+      sx: {
+        height: '100%'
+      }
+    }
+  });
+};
+SDMXGrid.propTypes = {
+  dataStructure: PropTypes.object,
+  data: PropTypes.array,
+  pagination: PropTypes.object.isRequired,
+  onPaginationChange: PropTypes.func.isRequired,
+  observationCount: PropTypes.number.isRequired,
+  isLoading: PropTypes.bool.isRequired
+};
+
+var useStyles = createStyles(function (theme) {
+  return {
+    wrongContainer: {
+      width: '100%',
+      height: '100%',
+      display: 'flex',
+      flexDirection: 'column',
+      justifyContent: 'center',
+      alignItems: 'center',
+      backgroundColor: theme.colors.gray[0]
+    },
+    alertIcon: {
+      width: rem(80),
+      height: rem(80),
+      color: theme.colors.gray[4]
+    },
+    alertMsg: {
+      marginTop: theme.spacing.sm,
+      color: theme.colors.gray[6]
+    }
+  };
+});
+var SdmxDatagrid = function SdmxDatagrid(_ref) {
+  var endpoint = _ref.endpoint,
+    resourceType = _ref.resourceType,
+    agencyID = _ref.agencyID,
+    id = _ref.id,
+    version = _ref.version;
+  var _useStyles = useStyles(),
+    classes = _useStyles.classes;
+  var intl = useIntl();
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isLoading = _useState2[0],
+    setIsLoading = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isError = _useState4[0],
+    setIsError = _useState4[1];
+  var _useState5 = useState(),
+    _useState6 = _slicedToArray(_useState5, 2),
+    dataflow = _useState6[0],
+    setDataflow = _useState6[1];
+  var _useState7 = useState(),
+    _useState8 = _slicedToArray(_useState7, 2),
+    dataStructure = _useState8[0],
+    setDataStructure = _useState8[1];
+  var _useState9 = useState(),
+    _useState10 = _slicedToArray(_useState9, 2),
+    data = _useState10[0],
+    setData = _useState10[1];
+  var url = useMemo(function () {
+    if (!endpoint || !resourceType || !agencyID || !id || !version) return null;else return getSdmxUrl({
+      endpoint: endpoint,
+      resourceType: resourceType,
+      agencyID: agencyID,
+      id: id,
+      version: version
+    });
+  }, [endpoint, resourceType, agencyID, id, version]);
+  var _useState11 = useState({
+      pageIndex: 0,
+      pageSize: 100
+    }),
+    _useState12 = _slicedToArray(_useState11, 2),
+    pagination = _useState12[0],
+    setPagination = _useState12[1];
+  var range = useMemo(function () {
+    return getRange(pagination);
+  }, [pagination]);
+  var _useState13 = useState(0),
+    _useState14 = _slicedToArray(_useState13, 2),
+    observationCount = _useState14[0],
+    setObservationCount = _useState14[1];
+
+  // Initializing
+  useEffect(function () {
+    setDataflow();
+    setDataStructure();
+    setData();
+    setIsLoading(false);
+    setIsError(false);
+    if (url) {
+      setIsLoading(true);
+      getStructure(url).then(function (_ref2) {
+        var _structure$data;
+        var structure = _ref2.data;
+        var df = (_structure$data = structure.data) === null || _structure$data === void 0 || (_structure$data = _structure$data.dataflows) === null || _structure$data === void 0 ? void 0 : _structure$data[0];
+        var ds = getDataStructure(df, structure);
+        setDataflow(df);
+        setDataStructure(ds);
+      })["catch"](function () {
+        setIsError(true);
+        setIsLoading(false);
+      });
+    }
+  }, [url]);
+
+  // getting data
+  useEffect(function () {
+    if (dataflow) {
+      setIsLoading(true);
+      setIsError(false);
+      getData(dataflow, endpoint, range).then(function (_ref3) {
+        var dataStructure = _ref3.data,
+          responseHeaders = _ref3.responseHeaders;
+        setObservationCount(getObservationsCount(responseHeaders));
+        setData(_toConsumableArray(getObservations(dataStructure)));
+        setIsLoading(false);
+      })["catch"](function () {
+        setIsError(true);
+        setIsLoading(false);
+      });
+    }
+  }, [range, dataflow]);
+  var handlePaginationChange = function handlePaginationChange(options) {
+    return setPagination(options);
+  };
+  if (isLoading && !dataStructure) return /*#__PURE__*/React.createElement(LoadingBox, null);
+  if (!url) return /*#__PURE__*/React.createElement(Box, {
+    className: classes.wrongContainer
+  }, /*#__PURE__*/React.createElement(IconAlertCircleFilled, {
+    className: classes.alertIcon
+  }), /*#__PURE__*/React.createElement(Text, {
+    size: "sm",
+    className: classes.alertMsg
+  }, intl.formatMessage(messages.invalidComProps)));
+  if (isError && !data) {
+    return /*#__PURE__*/React.createElement(Box, {
+      className: classes.wrongContainer
+    }, /*#__PURE__*/React.createElement(IconThumbDown, {
+      className: classes.alertIcon
+    }), /*#__PURE__*/React.createElement(Text, {
+      size: "sm",
+      className: classes.alertMsg
+    }, intl.formatMessage(messages.noData)));
+  }
+  return /*#__PURE__*/React.createElement(SDMXGrid, {
+    dataStructure: dataStructure,
+    data: data,
+    pagination: pagination,
+    onPaginationChange: handlePaginationChange,
+    observationCount: observationCount,
+    isLoading: isLoading
+  });
+};
+SdmxDatagrid.propTypes = {
+  endpoint: PropTypes.string.isRequired,
+  resourceType: PropTypes.string.isRequired,
+  agencyID: PropTypes.string.isRequired,
+  id: PropTypes.string.isRequired,
+  version: PropTypes.string.isRequired
+};
+
+var SDMXDatagrid = /*#__PURE__*/function (_HTMLElement) {
+  _inherits(SDMXDatagrid, _HTMLElement);
+  var _super = _createSuper(SDMXDatagrid);
+  function SDMXDatagrid() {
+    var _this;
+    _classCallCheck(this, SDMXDatagrid);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _super.call.apply(_super, [this].concat(args));
+    _defineProperty(_assertThisInitialized(_this), "forceUpdateComponent", void 0);
+    _defineProperty(_assertThisInitialized(_this), "container", function () {
+      var forceUpdate = useReducer(function () {
+        return {};
+      }, {})[1];
+      _this.forceUpdateComponent = forceUpdate;
+      var props = {
+        endpoint: _this.getAttribute('endpoint'),
+        resourceType: _this.getAttribute('resourceType'),
+        agencyID: _this.getAttribute('agencyID'),
+        id: _this.getAttribute('id'),
+        version: _this.getAttribute('version')
+      };
+      var containerProps = _this.getAttribute('containerProps') || {};
+      var containerPropsValue = typeof containerProps === 'string' ? JSON.parse(containerProps) : {};
+      return /*#__PURE__*/React.createElement(IntlProvider, {
+        defaultLocale: "en",
+        locale: "en",
+        messages: {}
+      }, /*#__PURE__*/React.createElement("div", containerPropsValue, /*#__PURE__*/React.createElement(SdmxDatagrid, props)));
+    });
+    return _this;
+  }
+  _createClass(SDMXDatagrid, [{
+    key: "connectedCallback",
+    value: function connectedCallback() {
+      var shadowRoot = this.attachShadow({
+        mode: 'open'
+      });
+      var mountPoint = document.createElement('div');
+      var emotionRoot = document.createElement('div');
+      shadowRoot.appendChild(mountPoint);
+      shadowRoot.appendChild(emotionRoot);
+      var appendCache = createEmotionCache({
+        key: 'mantine-wc',
+        container: emotionRoot
+      });
+      var root = createRoot(mountPoint);
+      root.render( /*#__PURE__*/React.createElement(MantineProvider, {
+        emotionCache: appendCache,
+        withGlobalStyles: true,
+        withNormalizeCSS: true
+      }, /*#__PURE__*/React.createElement(IntlProvider, {
+        defaultLocale: "en",
+        locale: "en",
+        messages: {}
+      }, /*#__PURE__*/React.createElement(this.container, null))));
+    }
+  }, {
+    key: "attributeChangedCallback",
+    value: function attributeChangedCallback() {
+      if (typeof this.forceUpdateComponent === 'function') this.forceUpdateComponent();
+    }
+  }], [{
+    key: "observedAttributes",
+    get: function get() {
+      return ['endpoint', 'resourceType', 'agencyID', 'id', 'version'];
+    }
+  }]);
+  return SDMXDatagrid;
+}( /*#__PURE__*/_wrapNativeSuper(HTMLElement));
+customElements.define('sdmx-datagrid', SDMXDatagrid);
+//# sourceMappingURL=index-lo-MKsEb.js.map