@equinor/echo-components 0.6.3 → 0.6.4

package/dist/index.js

@@ -18413,8 +18413,8 @@ var InlineTagIconLink = function InlineTagIconLink(_ref) {
   }, description)));
 };
 
-var css_248z$k = ".MainLegend-module_accordion__xjveF{align-items:center;align-self:flex-start;background:rgba(0,0,0,.65);border-radius:4px;color:var(--white);cursor:pointer;display:flex;font-size:.875rem;font-weight:500;height:2.25rem;justify-content:space-between;margin-top:2px;max-width:460px;padding:8px 14px;user-select:none;width:100%}.MainLegend-module_accordion__xjveF:hover{background:rgba(0,0,0,.9);color:var(--white)}.MainLegend-module_left__NKMwB,.MainLegend-module_right__0BIFF{align-items:center;display:flex}.MainLegend-module_icon__neT4f{margin-right:8px}.MainLegend-module_content__nzDkL{align-self:stretch;display:flex;flex-direction:column;overflow:auto;padding-right:4px}.MainLegend-module_content__nzDkL::-webkit-scrollbar{width:8px}.MainLegend-module_content__nzDkL::-webkit-scrollbar-thumb{background:rgba(0,0,0,.65)}.MainLegend-module_content__nzDkL::-webkit-scrollbar-track{background:none}.MainLegend-module_layerIcon__xI2Mf{margin-right:10px}.MainLegend-module_layerIcon__xI2Mf:last-of-type{margin-right:0}";
-var styles$i = {"accordion":"MainLegend-module_accordion__xjveF","left":"MainLegend-module_left__NKMwB","right":"MainLegend-module_right__0BIFF","icon":"MainLegend-module_icon__neT4f","content":"MainLegend-module_content__nzDkL","layerIcon":"MainLegend-module_layerIcon__xI2Mf"};
+var css_248z$k = ".MainLegend-module_accordion__xjveF{align-items:center;align-self:flex-start;background:rgba(0,0,0,.65);border-radius:4px;color:var(--white);cursor:pointer;display:flex;font-size:.875rem;font-weight:500;height:2.25rem;justify-content:space-between;margin-top:2px;max-width:460px;padding:8px 14px;user-select:none;width:100%}.MainLegend-module_accordionDesktop__Z7SS-:hover{background:rgba(0,0,0,.9);color:var(--white)}.MainLegend-module_accordionMobile__tOTvf{width:278px}.MainLegend-module_left__NKMwB,.MainLegend-module_right__0BIFF{align-items:center;display:flex}.MainLegend-module_icon__neT4f{margin-right:8px}.MainLegend-module_content__nzDkL{align-self:stretch;display:flex;flex-direction:column;overflow:auto;padding-right:4px}.MainLegend-module_content__nzDkL::-webkit-scrollbar{width:8px}.MainLegend-module_content__nzDkL::-webkit-scrollbar-thumb{background:rgba(0,0,0,.65)}.MainLegend-module_content__nzDkL::-webkit-scrollbar-track{background:none}.MainLegend-module_contentMobile__msQoO{padding-right:0;width:278px}.MainLegend-module_contentMobile__msQoO::-webkit-scrollbar{display:none}.MainLegend-module_layerIcon__xI2Mf{margin-right:10px}.MainLegend-module_layerIcon__xI2Mf:last-of-type{margin-right:0}";
+var styles$i = {"accordion":"MainLegend-module_accordion__xjveF","accordionDesktop":"MainLegend-module_accordionDesktop__Z7SS- MainLegend-module_accordion__xjveF","accordionMobile":"MainLegend-module_accordionMobile__tOTvf MainLegend-module_accordion__xjveF","left":"MainLegend-module_left__NKMwB","right":"MainLegend-module_right__0BIFF","icon":"MainLegend-module_icon__neT4f","content":"MainLegend-module_content__nzDkL","contentMobile":"MainLegend-module_contentMobile__msQoO MainLegend-module_content__nzDkL","layerIcon":"MainLegend-module_layerIcon__xI2Mf"};
 styleInject(css_248z$k);
 
 function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray$1(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it["return"] != null) it["return"](); } finally { if (didErr) throw err; } } }; }
@@ -18444,6 +18444,7 @@ function separateLayers(layers) {
   return [iconLayers, nonIconLayers];
 }
 function MainLegend(_ref) {
+  var _classnames, _classnames2;
   var legends = _ref.legends,
     layers = _ref.layers,
     legendStyle = _ref.legendStyle,
@@ -18481,12 +18482,14 @@ function MainLegend(_ref) {
     }).join(' ');
     return undefined;
   };
+  var accordion = classnames$1((_classnames = {}, _defineProperty$1(_classnames, styles$i.accordionMobile, isMobile), _defineProperty$1(_classnames, styles$i.accordionDesktop, !isMobile), _classnames));
+  var content = classnames$1((_classnames2 = {}, _defineProperty$1(_classnames2, styles$i.contentMobile, isMobile), _defineProperty$1(_classnames2, styles$i.content, !isMobile), _classnames2));
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, isOpen && /*#__PURE__*/React__default.createElement("div", {
     style: legendContentStyle,
-    className: styles$i.content
+    className: content
   }, legends), /*#__PURE__*/React__default.createElement("button", {
     style: legendStyle,
-    className: styles$i.accordion,
+    className: accordion,
     onClick: toggle,
     role: "widget"
   }, /*#__PURE__*/React__default.createElement("div", {
@@ -18520,12 +18523,12 @@ function MainLegend(_ref) {
   }, /*#__PURE__*/React__default.createElement("div", null, "+", defaultLayers.length)))));
 }
 
-var css_248z$j = ".LayerLegend-module_layerLegendContainer__DLfLy{background:rgba(0,0,0,.65);border-radius:4px;color:var(--white);cursor:pointer;font-weight:500;margin-bottom:2px;max-width:460px;user-select:none}.LayerLegend-module_layerLegendContainer__DLfLy:last-of-type{margin-bottom:0}.LayerLegend-module_header__8NHIX{align-items:center;display:flex;height:2.5rem;justify-content:space-between;padding:12px;width:100%}.LayerLegend-module_activeHeader__EBvGl{cursor:pointer}.LayerLegend-module_activeHeader__EBvGl:hover{background:rgba(0,0,0,.9);border-radius:4px;color:var(--white)}.LayerLegend-module_leftInactive__1Lq18{align-items:center;display:flex;font-size:.875rem}.LayerLegend-module_leftActive__KrRDh{font-weight:700}.LayerLegend-module_right__-IwVs{align-items:center;display:flex;font-size:.625rem}.LayerLegend-module_icon__8VwWd{margin-right:8px}.LayerLegend-module_content__ElkbY{cursor:auto;height:auto;padding-bottom:14px;padding-top:8px;width:100%}.LayerLegend-module_items__BC1cp{margin-right:4px}";
-var styles$h = {"layerLegendContainer":"LayerLegend-module_layerLegendContainer__DLfLy","header":"LayerLegend-module_header__8NHIX","activeHeader":"LayerLegend-module_activeHeader__EBvGl LayerLegend-module_header__8NHIX","disabledHeader":"LayerLegend-module_disabledHeader__Rd25i LayerLegend-module_header__8NHIX","leftInactive":"LayerLegend-module_leftInactive__1Lq18","leftActive":"LayerLegend-module_leftActive__KrRDh LayerLegend-module_leftInactive__1Lq18","right":"LayerLegend-module_right__-IwVs","icon":"LayerLegend-module_icon__8VwWd","content":"LayerLegend-module_content__ElkbY","items":"LayerLegend-module_items__BC1cp"};
+var css_248z$j = ".LayerLegend-module_layerLegendContainer__DLfLy{background:rgba(0,0,0,.65);border-radius:4px;color:var(--white);cursor:pointer;font-weight:500;margin-bottom:2px;max-width:460px;user-select:none}.LayerLegend-module_layerLegendContainer__DLfLy:last-of-type{margin-bottom:0}.LayerLegend-module_header__8NHIX{align-items:center;display:flex;height:2.5rem;justify-content:space-between;padding:12px;width:100%}.LayerLegend-module_desktopHeader__ztHh3{cursor:pointer}.LayerLegend-module_desktopHeader__ztHh3:hover{background:rgba(0,0,0,.9);border-radius:4px;color:var(--white)}.LayerLegend-module_leftInactive__1Lq18{align-items:center;display:flex;font-size:.875rem}.LayerLegend-module_leftActive__KrRDh{font-weight:700}.LayerLegend-module_right__-IwVs{align-items:center;display:flex;font-size:.625rem}.LayerLegend-module_icon__8VwWd{margin-right:8px}.LayerLegend-module_content__ElkbY{cursor:auto;height:auto;padding-bottom:14px;padding-top:8px;width:100%}.LayerLegend-module_items__BC1cp{margin-right:4px}";
+var styles$h = {"layerLegendContainer":"LayerLegend-module_layerLegendContainer__DLfLy","header":"LayerLegend-module_header__8NHIX","desktopHeader":"LayerLegend-module_desktopHeader__ztHh3 LayerLegend-module_header__8NHIX","mobileHeader":"LayerLegend-module_mobileHeader__qDHmS LayerLegend-module_header__8NHIX","disabledHeader":"LayerLegend-module_disabledHeader__Rd25i LayerLegend-module_header__8NHIX","leftInactive":"LayerLegend-module_leftInactive__1Lq18","leftActive":"LayerLegend-module_leftActive__KrRDh LayerLegend-module_leftInactive__1Lq18","right":"LayerLegend-module_right__-IwVs","icon":"LayerLegend-module_icon__8VwWd","content":"LayerLegend-module_content__ElkbY","items":"LayerLegend-module_items__BC1cp"};
 styleInject(css_248z$j);
 
 function LayerLegend(_ref) {
-  var _classnames;
+  var _classnames, _classnames2;
   var title = _ref.title,
     iconName = _ref.iconName,
     itemsCount = _ref.itemsCount,
@@ -18537,17 +18540,19 @@ function LayerLegend(_ref) {
     _useState2 = _slicedToArray(_useState, 2),
     isOpen = _useState2[0],
     setIsOpen = _useState2[1];
+  var isMobile = useIsMobile();
   var toggle = function toggle() {
     setIsOpen(function (isOpen) {
       return !isOpen;
     });
   };
   var left = classnames$1((_classnames = {}, _defineProperty$1(_classnames, styles$h.leftActive, isOpen), _defineProperty$1(_classnames, styles$h.leftInactive, !isOpen), _classnames));
+  var header = classnames$1((_classnames2 = {}, _defineProperty$1(_classnames2, styles$h.mobileHeader, isMobile), _defineProperty$1(_classnames2, styles$h.desktopHeader, !isMobile), _classnames2));
   return /*#__PURE__*/React__default.createElement("div", {
     style: style,
     className: styles$h.layerLegendContainer
   }, /*#__PURE__*/React__default.createElement("button", {
-    className: disabled ? styles$h.disabledHeader : styles$h.activeHeader,
+    className: disabled ? styles$h.disabledHeader : header,
     onClick: toggle,
     "aria-expanded": isOpen,
     "aria-controls": "legendContent",
@@ -18560,9 +18565,9 @@ function LayerLegend(_ref) {
     name: iconName
   }), /*#__PURE__*/React__default.createElement("div", null, title)), /*#__PURE__*/React__default.createElement("div", {
     className: styles$h.right
-  }, /*#__PURE__*/React__default.createElement("div", {
+  }, !isMobile && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
     className: styles$h.items
-  }, itemsTitle ? itemsTitle.toUpperCase() : 'ITEMS', ":"), /*#__PURE__*/React__default.createElement("div", null, itemsCount), !disabled && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, isOpen ? /*#__PURE__*/React__default.createElement(Icon$1, {
+  }, itemsTitle ? itemsTitle.toUpperCase() : 'ITEMS', ":"), /*#__PURE__*/React__default.createElement("div", null, itemsCount)), !disabled && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, isOpen ? /*#__PURE__*/React__default.createElement(Icon$1, {
     size: 24,
     name: "chevron_up"
   }) : /*#__PURE__*/React__default.createElement(Icon$1, {