@longline/aqua-ui 1.0.225 → 1.0.227

package/controls/Gradient/PresetGradients.d.ts

@@ -4,12 +4,12 @@ import { IGradientStop } from "../../Types";
  */
 declare class PresetGradients {
     /** Green gradient from light lime to dark teal */
-    static readonly Green: readonly IGradientStop[];
+    static Green: IGradientStop[];
     /** Blue gradient from pale cyan to deep navy */
-    static readonly Blue: readonly IGradientStop[];
+    static Blue: IGradientStop[];
     /** Red gradient from dark maroon to bright red */
-    static readonly Red: readonly IGradientStop[];
+    static Red: IGradientStop[];
     /** Rainbow gradient from teal to yellow */
-    static readonly Rainbow: readonly IGradientStop[];
+    static Rainbow: IGradientStop[];
 }
 export { PresetGradients };

package/controls/ListView/elements/Body.js

@@ -1,15 +1,14 @@
 import * as React from 'react';
 import { Selector } from '../../../inputs/Selector';
 var Body = React.forwardRef(function (props, ref) {
-    var _a;
     // The scrolling container's height is necessary to determine how many
     // rows must be rendered.
-    var _b = React.useState(0), height = _b[0], setHeight = _b[1];
+    var _a = React.useState(0), height = _a[0], setHeight = _a[1];
     // Current container scrollTop. This is updated by polling it using 
     // animation frames.
     var scrollTop = React.useRef(0);
     // This state is only used to trigger renders
-    var _c = React.useState(0), setTick = _c[1];
+    var _b = React.useState(0), setTick = _b[1];
     // Watch resize of scrolling container using ResizeObserver.
     React.useEffect(function () {
         if (!props.container)
@@ -67,7 +66,6 @@ var Body = React.forwardRef(function (props, ref) {
     var getRows = function () {
         var rows = [];
         var _a = getOffsets(), startIndex = _a[0], endIndex = _a[1];
-        var offset = startIndex * props.rowHeight;
         var _loop_1 = function (i) {
             var item = props.data[i];
             rows.push(React.createElement("div", { key: i, 
@@ -77,9 +75,7 @@ var Body = React.forwardRef(function (props, ref) {
                     props.active == item ? 'active' : null,
                     props.expanded && props.active == item ? 'expanded' : null,
                     (props.onClick || props.onDoubleClick) ? 'clickable' : null
-                ].join(' '), style: {
-                    top: (props.expanded && props.active == item) ? "48px" : "".concat(offset, "px")
-                }, onClick: props.onClick ? function () { return props.onClick(item); } : null, onDoubleClick: props.onDoubleClick ? function () { return props.onDoubleClick(item); } : null },
+                ].join(' '), onClick: props.onClick ? function () { return props.onClick(item); } : null, onDoubleClick: props.onDoubleClick ? function () { return props.onDoubleClick(item); } : null },
                 props.onCheck && React.createElement("div", { className: "cell check" },
                     React.createElement(Selector, { checked: !!item.checked, onChange: function () { return props.onCheck(i); } })),
                 props.columns.map(function (col, index) {
@@ -93,25 +89,19 @@ var Body = React.forwardRef(function (props, ref) {
                 }),
                 props.columnsEditable && React.createElement("div", { className: "cell columns" })));
             if (props.expanded && props.active == item) {
-                rows.push(React.createElement("div", { key: "".concat(i, "_expand") },
-                    React.createElement("div", { style: {
-                            position: "absolute",
-                            width: "100%",
-                            top: "".concat(offset + props.rowHeight, "px"),
-                            scrollMargin: "".concat(props.rowHeight * 2, "px")
-                        } }, props.expansion)));
-                offset += props.rowHeight * 5;
+                rows.push(React.createElement("div", { key: "".concat(i, "_expand") }, props.expansion));
             }
-            offset += props.rowHeight;
         };
         for (var i = startIndex; i <= endIndex; i++) {
             _loop_1(i);
         }
-        return rows;
+        // Here we add an offset above the rows what were actually rendered:
+        var offset = startIndex * props.rowHeight;
+        return (React.createElement("div", { style: { position: "absolute", width: "100%", top: "".concat(offset, "px") } }, rows));
     };
     return (
     // Wrap the body in an element that is as tall as the number of items
     // in the list.
-    React.createElement("div", { style: { position: 'relative', width: '100%', height: ((_a = props.data) === null || _a === void 0 ? void 0 : _a.length) * props.rowHeight } }, Array.isArray(props.data) && getRows()));
+    React.createElement("div", { style: { position: 'relative', width: '100%', height: (Array.isArray(props.data) ? props.data.length : 0) * props.rowHeight } }, Array.isArray(props.data) && getRows()));
 });
 export { Body };

package/controls/ListView/elements/Table.js

@@ -60,7 +60,7 @@ var TableBase = function (_a) {
                 options: {
                     boundary: innerRef.current ? innerRef.current.getElement() : null,
                     tether: false,
-                    padding: { top: HEADER_HEIGHT, bottom: 16 }
+                    padding: { top: 0, bottom: 16 }
                 }
             }
         ]
@@ -114,24 +114,25 @@ var TableBase = function (_a) {
                 React.createElement(ColumnsManager, { columns: props.columns, onChange: props.onChangeColumns, onClose: props.onCloseColumns, onReset: props.onResetColumns })),
         showingNoData && React.createElement(NoData, { dark: props.dark, component: props.noData }),
         React.createElement(AuxHolder, __assign({ ref: auxRef, style: __assign({ visibility: (props.active && props.aux && Array.isArray(props.data) && props.data.includes(props.active)) ? 'visible' : 'hidden' }, styles.popper) }, attributes.popper), (props.active && props.aux && Array.isArray(props.data) && props.data.includes(props.active)) && React.cloneElement(props.aux, { value: props.active })),
-        React.createElement(OverlayScrollbarsComponent, { ref: innerRef, defer: true, options: {
-                scrollbars: { theme: 'os-theme-light', autoHide: 'leave' }
-            }, style: {
-                position: "absolute",
-                left: 0,
-                top: 0,
-                right: 0,
-                bottom: 0,
-                overflowY: "auto",
-            } },
-            React.createElement("div", { className: className },
-                props.noheader != true && React.createElement(Header, __assign({}, props, { columns: activeColumns, onOpenColumns: props.onOpenColumns })),
-                React.createElement(Body, __assign({ ref: setActiveRef }, props, { columns: activeColumns, container: innerRef.current })))),
+        React.createElement("div", { className: className },
+            props.noheader != true && React.createElement(Header, __assign({}, props, { columns: activeColumns, onOpenColumns: props.onOpenColumns })),
+            React.createElement(OverlayScrollbarsComponent, { ref: innerRef, defer: true, options: {
+                    scrollbars: { theme: 'os-theme-light', autoHide: 'leave' }
+                }, style: {
+                    position: "absolute",
+                    left: 0,
+                    top: props.noheader ? 0 : "".concat(HEADER_HEIGHT, "px"),
+                    right: 0,
+                    bottom: 0,
+                    overflowY: "auto",
+                } },
+                React.createElement("div", { className: "inner" },
+                    React.createElement(Body, __assign({ ref: setActiveRef }, props, { columns: activeColumns, container: innerRef.current }))))),
         props.total && Array.isArray(props.data) && React.createElement(Total, { value: props.data.length, singular: props.singular, plural: props.plural })));
 };
 var AuxHolder = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  z-index: 1;\n  pointer-events: none;\n  // Children must turn pointer-events back on.\n"], ["\n  z-index: 1;\n  pointer-events: none;\n  // Children must turn pointer-events back on.\n"])));
 var Wrapper = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  // Size and position. A table fills its container.\n  position:    relative;\n  width:       100%;\n  height:      100%;\n  background-color: ", ";\n"], ["\n  // Size and position. A table fills its container.\n  position:    relative;\n  width:       100%;\n  height:      100%;\n  background-color: ", ";\n"])), function (p) { return p.$dark ? p.theme.colors.primary[3] : p.theme.colors.neutral[100]; });
-var TableStyled = styled(TableBase)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  position: absolute;\n  box-sizing: border-box;\n  left: 0;\n  top: 0;\n  width: 100%;\n  padding-bottom: 48px;\n\n  // Appearance:\n  font: ", ";\n  color: ", ";\n  background-color: ", ";\n\n  .row {\n    position: absolute;\n    width: 100%;\n    left: 0;\n    right: 0;\n    height: ", "px;\n    display: flex;\n    flex-direction: row;\n  }\n  .row.clickable {\n    cursor: pointer;\n  }\n\n  // Optional row hover effect:\n  ", "\n\n  // Striped rows:\n  ", "\n\n  // General styles for cells:\n  .cell {\n    position:       relative;\n    box-sizing:     border-box;\n    white-space:    nowrap;\n    text-align:     left;\n    user-select:    none;\n    outline:        none;\n    padding-left:   16px;\n    padding-right:  16px;    \n    min-width: 0; \n\n    // use flexbox to vertical-align content:\n    display: flex;\n    align-items: center;\n    justify-content: left;\n\n    // Underline.\n    &:after {\n      content: '';\n      position: absolute;\n      left: 0;\n      bottom: 0;\n      right: 0;\n      height: 1px;\n      transition: background-color ", "ms ease-in-out;\n    }    \n  }\n\n  // Cell widths:\n  ", "\n\n  .cell.check {\n    width: 48px;\n  }\n\n  .cell.columns {\n    width: 48px;\n  }\n\n  .header {\n    // Position and size:\n    position:  sticky;\n    top:       0;\n    z-index:   100;\n    height:    ", "px;\n  }\n\n  .header .cell {\n    gap: 8px;\n    justify-content: space-between;\n    // Appearance\n    background: ", ";\n    &.sort {\n      background: ", ";\n    }\n    &:after { \n      background-color: ", "; \n    }\n    // Header shadow:\n    ", "\n  }\n  // cell bottom border color:\n  .cell {\n    &:after {\n      background-color: ", ";\n    }            \n  }\n  // Active row cells:\n  .row.active .cell {\n    background-color: ", ";\n  }\n  // Last column has double right margin:\n  .cell:last-child {\n    padding-right: 32px;\n  }\n  // Last row has no bottom border:\n  .row:last-child .cell {\n    &:after {\n      visibility: hidden;\n    }    \n  }\n  // Spans in cells are ellipsized:\n  .cell > span {\n    width: 100%;\n    white-space: nowrap;\n    text-overflow: ellipsis;\n    overflow: hidden;\n  }\n\n  // Grid:\n  ", "\n\n  // If onColumns is present, remove last column header's hover underline:\n  // Also remove last gridline.\n  ", "\n\n  // Expanded row makes its cells sticky:\n  .row.expanded {\n    position: sticky;\n    top: ", "px;\n    \n    z-index: 100;\n  }\n"], ["\n  position: absolute;\n  box-sizing: border-box;\n  left: 0;\n  top: 0;\n  width: 100%;\n  padding-bottom: 48px;\n\n  // Appearance:\n  font: ", ";\n  color: ", ";\n  background-color: ", ";\n\n  .row {\n    position: absolute;\n    width: 100%;\n    left: 0;\n    right: 0;\n    height: ", "px;\n    display: flex;\n    flex-direction: row;\n  }\n  .row.clickable {\n    cursor: pointer;\n  }\n\n  // Optional row hover effect:\n  ", "\n\n  // Striped rows:\n  ", "\n\n  // General styles for cells:\n  .cell {\n    position:       relative;\n    box-sizing:     border-box;\n    white-space:    nowrap;\n    text-align:     left;\n    user-select:    none;\n    outline:        none;\n    padding-left:   16px;\n    padding-right:  16px;    \n    min-width: 0; \n\n    // use flexbox to vertical-align content:\n    display: flex;\n    align-items: center;\n    justify-content: left;\n\n    // Underline.\n    &:after {\n      content: '';\n      position: absolute;\n      left: 0;\n      bottom: 0;\n      right: 0;\n      height: 1px;\n      transition: background-color ", "ms ease-in-out;\n    }    \n  }\n\n  // Cell widths:\n  ", "\n\n  .cell.check {\n    width: 48px;\n  }\n\n  .cell.columns {\n    width: 48px;\n  }\n\n  .header {\n    // Position and size:\n    position:  sticky;\n    top:       0;\n    z-index:   100;\n    height:    ", "px;\n  }\n\n  .header .cell {\n    gap: 8px;\n    justify-content: space-between;\n    // Appearance\n    background: ", ";\n    &.sort {\n      background: ", ";\n    }\n    &:after { \n      background-color: ", "; \n    }\n    // Header shadow:\n    ", "\n  }\n  // cell bottom border color:\n  .cell {\n    &:after {\n      background-color: ", ";\n    }            \n  }\n  // Active row cells:\n  .row.active .cell {\n    background-color: ", ";\n  }\n  // Last column has double right margin:\n  .cell:last-child {\n    padding-right: 32px;\n  }\n  // Last row has no bottom border:\n  .row:last-child .cell {\n    &:after {\n      visibility: hidden;\n    }    \n  }\n  // Spans in cells are ellipsized:\n  .cell > span {\n    width: 100%;\n    white-space: nowrap;\n    text-overflow: ellipsis;\n    overflow: hidden;\n  }\n\n  // Grid:\n  ", "\n\n  // If onColumns is present, remove last column header's hover underline:\n  // Also remove last gridline.\n  ", "\n\n  // Expanded row makes its cells sticky:\n  .row.expanded {\n    position: sticky;\n    top: ", "px;\n    \n    z-index: 100;\n  }\n"])), function (p) { return p.theme.font.bodyMedium; }, function (p) { return p.dark ? p.theme.colors.neutral[100] : p.theme.colors.neutral[10]; }, function (p) { return p.dark ? p.theme.colors.primary[3] : p.theme.colors.neutral[100]; }, function (p) { return p.rowHeight; }, function (p) { return p.hover && css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    .row:hover .cell { background-color: ", "; }\n  "], ["\n    .row:hover .cell { background-color: ", "; }\n  "])), p.dark ? p.theme.colors.primary[4] : p.theme.colors.neutral[95]); }, function (p) { return p.striped && css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    .row:nth-child(2n+2) .cell {\n      background-color: ", ";\n    }\n  "], ["\n    .row:nth-child(2n+2) .cell {\n      background-color: ", ";\n    }\n  "])), darken(0.02, p.dark ? p.theme.colors.primary[3] : p.theme.colors.neutral[100])); }, function (p) { return p.theme.animation.duration; }, function (p) { return p.columns.filter(function (c) { return c.active; }).map(function (c, i) {
+var TableStyled = styled(TableBase)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  .inner {\n    position: absolute;\n    box-sizing: border-box;\n    left: 0;\n    top: 0;\n    width: 100%;\n    padding-bottom: 48px;\n  }\n\n  // Appearance:\n  font: ", ";\n  color: ", ";\n  background-color: ", ";\n\n  .row {\n    width: 100%;\n    height: ", "px;\n    display: flex;\n    flex-direction: row;\n  }\n  .row.clickable {\n    cursor: pointer;\n  }\n\n  // Optional row hover effect:\n  ", "\n\n  // Striped rows:\n  ", "\n\n  // General styles for cells:\n  .cell {\n    position:       relative;\n    box-sizing:     border-box;\n    white-space:    nowrap;\n    text-align:     left;\n    user-select:    none;\n    outline:        none;\n    padding-left:   16px;\n    padding-right:  16px;    \n    min-width: 0; \n\n    // use flexbox to vertical-align content:\n    display: flex;\n    align-items: center;\n    justify-content: left;\n\n    // Underline.\n    &:after {\n      content: '';\n      position: absolute;\n      left: 0;\n      bottom: 0;\n      right: 0;\n      height: 1px;\n      transition: background-color ", "ms ease-in-out;\n    }    \n  }\n\n  // Cell widths:\n  ", "\n\n  .cell.check {\n    width: 48px;\n  }\n\n  .cell.columns {\n    width: 48px;\n  }\n\n  .header {\n    // Position and size:\n    position:  absolute;\n    top:       0;\n    z-index:   200;\n    height:    ", "px;\n  }\n\n  .header .cell {\n    gap: 8px;\n    justify-content: space-between;\n    // Appearance\n    background: ", ";\n    &.sort {\n      background: ", ";\n    }\n    &:after { \n      background-color: ", "; \n    }\n    // Header shadow:\n    ", "\n  }\n  // cell bottom border color:\n  .cell {\n    &:after {\n      background-color: ", ";\n    }            \n  }\n  // Active row cells:\n  .row.active .cell {\n    background-color: ", ";\n  }\n  // Last column has double right margin:\n  .cell:last-child {\n    padding-right: 32px;\n  }\n  // Last row has no bottom border:\n  .row:last-child .cell {\n    &:after {\n      visibility: hidden;\n    }    \n  }\n  // Spans in cells are ellipsized:\n  .cell > span {\n    width: 100%;\n    white-space: nowrap;\n    text-overflow: ellipsis;\n    overflow: hidden;\n  }\n\n  // Grid:\n  ", "\n\n  // If onColumns is present, remove last column header's hover underline:\n  // Also remove last gridline.\n  ", "\n\n  // Expanded row makes its cells sticky:\n  .row.expanded {\n    position: sticky;\n    top: 0;\n    z-index: 100;\n  }\n"], ["\n  .inner {\n    position: absolute;\n    box-sizing: border-box;\n    left: 0;\n    top: 0;\n    width: 100%;\n    padding-bottom: 48px;\n  }\n\n  // Appearance:\n  font: ", ";\n  color: ", ";\n  background-color: ", ";\n\n  .row {\n    width: 100%;\n    height: ", "px;\n    display: flex;\n    flex-direction: row;\n  }\n  .row.clickable {\n    cursor: pointer;\n  }\n\n  // Optional row hover effect:\n  ", "\n\n  // Striped rows:\n  ", "\n\n  // General styles for cells:\n  .cell {\n    position:       relative;\n    box-sizing:     border-box;\n    white-space:    nowrap;\n    text-align:     left;\n    user-select:    none;\n    outline:        none;\n    padding-left:   16px;\n    padding-right:  16px;    \n    min-width: 0; \n\n    // use flexbox to vertical-align content:\n    display: flex;\n    align-items: center;\n    justify-content: left;\n\n    // Underline.\n    &:after {\n      content: '';\n      position: absolute;\n      left: 0;\n      bottom: 0;\n      right: 0;\n      height: 1px;\n      transition: background-color ", "ms ease-in-out;\n    }    \n  }\n\n  // Cell widths:\n  ", "\n\n  .cell.check {\n    width: 48px;\n  }\n\n  .cell.columns {\n    width: 48px;\n  }\n\n  .header {\n    // Position and size:\n    position:  absolute;\n    top:       0;\n    z-index:   200;\n    height:    ", "px;\n  }\n\n  .header .cell {\n    gap: 8px;\n    justify-content: space-between;\n    // Appearance\n    background: ", ";\n    &.sort {\n      background: ", ";\n    }\n    &:after { \n      background-color: ", "; \n    }\n    // Header shadow:\n    ", "\n  }\n  // cell bottom border color:\n  .cell {\n    &:after {\n      background-color: ", ";\n    }            \n  }\n  // Active row cells:\n  .row.active .cell {\n    background-color: ", ";\n  }\n  // Last column has double right margin:\n  .cell:last-child {\n    padding-right: 32px;\n  }\n  // Last row has no bottom border:\n  .row:last-child .cell {\n    &:after {\n      visibility: hidden;\n    }    \n  }\n  // Spans in cells are ellipsized:\n  .cell > span {\n    width: 100%;\n    white-space: nowrap;\n    text-overflow: ellipsis;\n    overflow: hidden;\n  }\n\n  // Grid:\n  ", "\n\n  // If onColumns is present, remove last column header's hover underline:\n  // Also remove last gridline.\n  ", "\n\n  // Expanded row makes its cells sticky:\n  .row.expanded {\n    position: sticky;\n    top: 0;\n    z-index: 100;\n  }\n"])), function (p) { return p.theme.font.bodyMedium; }, function (p) { return p.dark ? p.theme.colors.neutral[100] : p.theme.colors.neutral[10]; }, function (p) { return p.dark ? p.theme.colors.primary[3] : p.theme.colors.neutral[100]; }, function (p) { return p.rowHeight; }, function (p) { return p.hover && css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    .row:hover .cell { background-color: ", "; }\n  "], ["\n    .row:hover .cell { background-color: ", "; }\n  "])), p.dark ? p.theme.colors.primary[4] : p.theme.colors.neutral[95]); }, function (p) { return p.striped && css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    .row:nth-child(2n+2) .cell {\n      background-color: ", ";\n    }\n  "], ["\n    .row:nth-child(2n+2) .cell {\n      background-color: ", ";\n    }\n  "])), darken(0.02, p.dark ? p.theme.colors.primary[3] : p.theme.colors.neutral[100])); }, function (p) { return p.theme.animation.duration; }, function (p) { return p.columns.filter(function (c) { return c.active; }).map(function (c, i) {
     var _a;
     var width_definition = (_a = c.width) !== null && _a !== void 0 ? _a : 1;
     var cellIndex = p.onCheck ? i + 2 : i + 1;
@@ -141,7 +142,7 @@ var TableStyled = styled(TableBase)(templateObject_10 || (templateObject_10 = __
     else {
         return css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n        .cell:nth-child(", ") {\n          width: ", ";\n        }\n      "], ["\n        .cell:nth-child(", ") {\n          width: ", ";\n        }\n      "])), cellIndex, width_definition);
     }
-}); }, HEADER_HEIGHT, function (p) { return p.dark ? p.theme.colors.primary[5] : p.theme.colors.neutral[100]; }, function (p) { return p.dark ? p.theme.colors.neutral[10] : p.theme.colors.neutral[95]; }, function (p) { return p.dark ? p.theme.colors.primary[2] : p.theme.colors.neutral[80]; }, function (p) { return p.shadow && css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n      &:before {\n        position: absolute;\n        pointer-events: none;\n        content: '';\n        z-index: 1;\n        top: calc(100%);\n        left: 0;\n        right: 0;\n        height: 8px;\n        background: linear-gradient(rgba(0,0,0,0.1), transparent);\n      }\n    "], ["\n      &:before {\n        position: absolute;\n        pointer-events: none;\n        content: '';\n        z-index: 1;\n        top: calc(100%);\n        left: 0;\n        right: 0;\n        height: 8px;\n        background: linear-gradient(rgba(0,0,0,0.1), transparent);\n      }\n    "]))); }, function (p) { return p.dark ? p.theme.colors.primary[2] : p.theme.colors.neutral[80]; }, function (p) { var _a; return (_a = p.activeColor) !== null && _a !== void 0 ? _a : p.theme.colors.primary[1]; }, function (p) { return p.grid && css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n    .cell:not(:last-child) {\n      border-right: dashed 1px ", ";\n    }\n  "], ["\n    .cell:not(:last-child) {\n      border-right: dashed 1px ", ";\n    }\n  "])), p.dark ? p.theme.colors.primary[2] : p.theme.colors.neutral[80]); }, function (p) { return p.columnsEditable && css(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n    .header .cell:last-child {\n      &:hover {\n        &:after { \n          background-color: ", ";\n        }\n      }\n    }\n    .cell:nth-last-child(2) {\n      border-right: none;\n    }\n  "], ["\n    .header .cell:last-child {\n      &:hover {\n        &:after { \n          background-color: ", ";\n        }\n      }\n    }\n    .cell:nth-last-child(2) {\n      border-right: none;\n    }\n  "])), function (p) { return p.theme.colors.primary[2]; }); }, HEADER_HEIGHT);
+}); }, HEADER_HEIGHT, function (p) { return p.dark ? p.theme.colors.primary[5] : p.theme.colors.neutral[100]; }, function (p) { return p.dark ? p.theme.colors.neutral[10] : p.theme.colors.neutral[95]; }, function (p) { return p.dark ? p.theme.colors.primary[2] : p.theme.colors.neutral[80]; }, function (p) { return p.shadow && css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n      &:before {\n        position: absolute;\n        pointer-events: none;\n        content: '';\n        z-index: 1;\n        top: calc(100%);\n        left: 0;\n        right: 0;\n        height: 8px;\n        background: linear-gradient(rgba(0,0,0,0.1), transparent);\n      }\n    "], ["\n      &:before {\n        position: absolute;\n        pointer-events: none;\n        content: '';\n        z-index: 1;\n        top: calc(100%);\n        left: 0;\n        right: 0;\n        height: 8px;\n        background: linear-gradient(rgba(0,0,0,0.1), transparent);\n      }\n    "]))); }, function (p) { return p.dark ? p.theme.colors.primary[2] : p.theme.colors.neutral[80]; }, function (p) { var _a; return (_a = p.activeColor) !== null && _a !== void 0 ? _a : p.theme.colors.primary[1]; }, function (p) { return p.grid && css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n    .cell:not(:last-child) {\n      border-right: dashed 1px ", ";\n    }\n  "], ["\n    .cell:not(:last-child) {\n      border-right: dashed 1px ", ";\n    }\n  "])), p.dark ? p.theme.colors.primary[2] : p.theme.colors.neutral[80]); }, function (p) { return p.columnsEditable && css(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n    .header .cell:last-child {\n      &:hover {\n        &:after { \n          background-color: ", ";\n        }\n      }\n    }\n    .cell:nth-last-child(2) {\n      border-right: none;\n    }\n  "], ["\n    .header .cell:last-child {\n      &:hover {\n        &:after { \n          background-color: ", ";\n        }\n      }\n    }\n    .cell:nth-last-child(2) {\n      border-right: none;\n    }\n  "])), function (p) { return p.theme.colors.primary[2]; }); });
 var Table = function (props) { return React.createElement(TableStyled, __assign({}, props)); };
 Table.displayName = "Table";
 export { Table };

package/map/layers/IdwBlendLayer/FragmentShader.d.ts

@@ -0,0 +1,2 @@
+declare const FragmentShader = " \n  #ifdef GL_ES\n  precision mediump float;\n  #endif\n\n  // Varyings from vertex shader\n  varying vec2 v_pos; // station center in Mercator [0..1]\n  varying float v_radius;     // quad radius in Mercator units\n\n  void main() {\n      // Simply color every fragment of the quad red\n      gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);\n  }\n";
+export { FragmentShader };

package/map/layers/IdwBlendLayer/FragmentShader.js

@@ -0,0 +1,2 @@
+var FragmentShader = /*glsl*/ " \n  #ifdef GL_ES\n  precision mediump float;\n  #endif\n\n  // Varyings from vertex shader\n  varying vec2 v_pos; // station center in Mercator [0..1]\n  varying float v_radius;     // quad radius in Mercator units\n\n  void main() {\n      // Simply color every fragment of the quad red\n      gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);\n  }\n";
+export { FragmentShader };

package/map/layers/IdwBlendLayer/IdwBlendLayer.d.ts

@@ -0,0 +1,47 @@
+import * as React from 'react';
+import { IGradientStop } from '../../../Types';
+interface IPoint {
+    latitude: number;
+    longitude: number;
+    value: number;
+}
+interface IIdwBlendLayerProps {
+    /**
+     * Input data.
+     */
+    data: IPoint[];
+    /**
+     * Gradient stops. A default gradient is preset.
+     */
+    gradientStops?: IGradientStop[];
+    /**
+     * Minimum zoom level at which to render layer.
+     * @default 0
+     */
+    minZoom?: number;
+    /**
+     * Maximum zoom level at which to render layer.
+     * @default 99
+     */
+    maxZoom?: number;
+    /**
+     * Maximum world distance (in -1..1 coordinate) system away from
+     * all stations where a pixel is still drawn.
+     * @default 0.0002
+     */
+    maxDistance?: number;
+    /**
+     * Thickness of fading edge of blob (value 0..1)
+     * @default 0.15
+     */
+    fadeFraction?: number;
+}
+/**
+ * An `IdwLayer` takes a data array of the form `{ latitude, longitude, value }`,
+ * and renders a colored surface using inverse distance weighting.
+ */
+declare const IdwBlendLayer: {
+    ({ gradientStops, minZoom, maxZoom, maxDistance, fadeFraction, ...props }: IIdwBlendLayerProps): React.JSX.Element;
+    displayName: string;
+};
+export { IdwBlendLayer };

package/map/layers/IdwBlendLayer/IdwBlendLayer.js

@@ -0,0 +1,129 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import * as React from 'react';
+import { Layer, useMap } from 'react-map-gl/mapbox';
+import { MercatorCoordinate } from 'mapbox-gl';
+import { VertexShader } from './VertexShader';
+import { FragmentShader } from './FragmentShader';
+import { RgbColor } from '../../../helper/RgbColor';
+import { PresetGradients } from '../../../controls/Gradient';
+var IdwBlendLayerBase = function (props) {
+    var map = useMap();
+    var discProgram = React.useRef(null);
+    var discBuffer = React.useRef(null);
+    var texture = React.useRef(null);
+    var textureWidth = React.useRef(null);
+    var textureHeight = React.useRef(null);
+    var _a = React.useState(0), time = _a[0], setTime = _a[1];
+    // When properties change, make sure that layer is redrawn.
+    // Do this by varying its `key` with the current time.
+    React.useEffect(function () {
+        setTime(Date.now());
+    }, [props.data, props.gradientStops]);
+    //
+    // Convert a hex color (e.g. #ff0022) to an [r,g,b,a] array,
+    // where r,g,b,a are in the 0.0-1.0 range.
+    //
+    var colorToRGBA = function (color) {
+        var rgb = RgbColor.FromString(color);
+        return [rgb.red / 255.0, rgb.green / 255.0, rgb.blue / 255.0, rgb.alpha];
+    };
+    var createPointsBuffer = function (gl, points) {
+        var offsets = [
+            [-1, -1],
+            [1, -1],
+            [-1, 1],
+            [1, 1],
+        ];
+        // Flatten into Float32Array
+        var vertexData = [];
+        points.forEach(function (p) {
+            var _a = MercatorCoordinate.fromLngLat([p.longitude, p.latitude]), x = _a.x, y = _a.y;
+            offsets.forEach(function (_a) {
+                var ox = _a[0], oy = _a[1];
+                vertexData.push(x, y, p.value, ox, oy);
+            });
+        });
+        // Create buffer
+        var buffer = gl.createBuffer();
+        if (!buffer)
+            throw new Error("Failed to create WebGL buffer");
+        gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertexData), gl.STATIC_DRAW);
+        gl.bindBuffer(gl.ARRAY_BUFFER, null);
+        return buffer;
+    };
+    var onAddLayer = function (map, gl) {
+        // AddLayer is only called once.
+        // create a vertex shader
+        var vertexShader = gl.createShader(gl.VERTEX_SHADER);
+        gl.shaderSource(vertexShader, VertexShader);
+        gl.compileShader(vertexShader);
+        // create a fragment shader
+        var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
+        gl.shaderSource(fragmentShader, FragmentShader);
+        gl.compileShader(fragmentShader);
+        // link the two shaders into a WebGL program
+        discProgram.current = gl.createProgram();
+        gl.attachShader(discProgram.current, vertexShader);
+        gl.attachShader(discProgram.current, fragmentShader);
+        gl.linkProgram(discProgram.current);
+        // Create buffer from vertices:
+        discBuffer.current = createPointsBuffer(gl, props.data);
+    };
+    var onRender = function (gl, matrix, zoom, width, height) {
+        // Render is called many times while the map is panned/zoomed.
+        // You cannot have access to the map though.
+        if (zoom < props.minZoom)
+            return;
+        if (zoom > props.maxZoom)
+            return;
+        // Render is called many times while the map is panned/zoomed.
+        // You cannot have access to the map though.
+        gl.useProgram(discProgram.current);
+        // Pass a matrix uniform in: 
+        gl.uniformMatrix4fv(gl.getUniformLocation(discProgram.current, 'u_matrix'), false, matrix);
+        gl.uniform1f(gl.getUniformLocation(discProgram.current, "u_radius"), 0.0001);
+        var aPos = gl.getAttribLocation(discProgram.current, 'a_pos');
+        var aOffset = gl.getAttribLocation(discProgram.current, 'a_offset');
+        gl.bindBuffer(gl.ARRAY_BUFFER, discBuffer.current);
+        gl.enableVertexAttribArray(aPos);
+        gl.vertexAttribPointer(aPos, 3, gl.FLOAT, false, 5 * 4, 0);
+        gl.enableVertexAttribArray(aOffset);
+        gl.vertexAttribPointer(aOffset, 2, gl.FLOAT, false, 5 * 4, 3 * 4);
+        //gl.enable(gl.BLEND);
+        //gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
+        gl.drawArrays(gl.TRIANGLE_STRIP, 0, props.data.length * 4);
+    };
+    return (React.createElement(Layer, { id: null, type: "custom", beforeId: "overlay", key: time, onAdd: onAddLayer, render: function (gl, matrix) { return onRender(gl, matrix, map.current.getZoom(), map.current.getContainer().clientWidth, map.current.getContainer().clientHeight); } }));
+};
+/**
+ * An `IdwLayer` takes a data array of the form `{ latitude, longitude, value }`,
+ * and renders a colored surface using inverse distance weighting.
+ */
+var IdwBlendLayer = function (_a) {
+    var _b = _a.gradientStops, gradientStops = _b === void 0 ? PresetGradients.Blue : _b, _c = _a.minZoom, minZoom = _c === void 0 ? 0 : _c, _d = _a.maxZoom, maxZoom = _d === void 0 ? 99 : _d, _e = _a.maxDistance, maxDistance = _e === void 0 ? 0.0002 : _e, _f = _a.fadeFraction, fadeFraction = _f === void 0 ? 0.15 : _f, props = __rest(_a, ["gradientStops", "minZoom", "maxZoom", "maxDistance", "fadeFraction"]);
+    return React.createElement(IdwBlendLayerBase, __assign({ gradientStops: gradientStops, minZoom: minZoom, maxZoom: maxZoom, maxDistance: maxDistance, fadeFraction: fadeFraction }, props));
+};
+IdwBlendLayer.displayName = 'IdwBlendLayer';
+export { IdwBlendLayer };

package/map/layers/IdwBlendLayer/VertexShader.d.ts

@@ -0,0 +1,2 @@
+declare const VertexShader = " \n// Attributes\nattribute vec2 a_offset;       // quad corner: [-1,-1], [1,-1], [-1,1], [1,1]\nattribute vec2 a_pos;   // point position in Mercator [0..1]\n\n// Uniforms\nuniform mat4 u_matrix;      // Mapbox projection matrix\nuniform float u_radius;     // radius in Mercator units (e.g., 1 km converted)\n  \n// Varyings\nvarying vec2 v_pos;  // pass to fragment shader\nvarying float v_radius;\n\nvoid main() {\n    // Offset the quad corner by radius in world coordinates\n    vec2 offset = a_offset * u_radius;\n    vec2 pos = a_pos + offset;\n\n    // Pass station position & radius to fragment shader\n    v_pos = a_pos;\n    v_radius = u_radius;\n\n    // Transform to clip space\n    gl_Position = u_matrix * vec4(pos, 0.0, 1.0);\n}\n";
+export { VertexShader };

package/map/layers/IdwBlendLayer/VertexShader.js

@@ -0,0 +1,2 @@
+var VertexShader = /*glsl*/ " \n// Attributes\nattribute vec2 a_offset;       // quad corner: [-1,-1], [1,-1], [-1,1], [1,1]\nattribute vec2 a_pos;   // point position in Mercator [0..1]\n\n// Uniforms\nuniform mat4 u_matrix;      // Mapbox projection matrix\nuniform float u_radius;     // radius in Mercator units (e.g., 1 km converted)\n  \n// Varyings\nvarying vec2 v_pos;  // pass to fragment shader\nvarying float v_radius;\n\nvoid main() {\n    // Offset the quad corner by radius in world coordinates\n    vec2 offset = a_offset * u_radius;\n    vec2 pos = a_pos + offset;\n\n    // Pass station position & radius to fragment shader\n    v_pos = a_pos;\n    v_radius = u_radius;\n\n    // Transform to clip space\n    gl_Position = u_matrix * vec4(pos, 0.0, 1.0);\n}\n";
+export { VertexShader };

package/map/layers/IdwLayer/CopyFragmentShader.d.ts

@@ -0,0 +1,2 @@
+declare const CopyFragmentShader = " \n  #ifdef GL_ES\n  precision mediump float;\n  #endif\n\n  varying vec2 v_pos;\n  uniform sampler2D u_src;\n  void main() {\n    vec4 c = texture2D(u_src, v_pos);\n    // pass color as-is\n    gl_FragColor = c;\n  }\n";
+export { CopyFragmentShader };

package/map/layers/IdwLayer/CopyFragmentShader.js

@@ -0,0 +1,2 @@
+var CopyFragmentShader = /*glsl*/ " \n  #ifdef GL_ES\n  precision mediump float;\n  #endif\n\n  varying vec2 v_pos;\n  uniform sampler2D u_src;\n  void main() {\n    vec4 c = texture2D(u_src, v_pos);\n    // pass color as-is\n    gl_FragColor = c;\n  }\n";
+export { CopyFragmentShader };

package/map/layers/IdwLayer/CopyVertexShader.d.ts

@@ -0,0 +1,2 @@
+declare const CopyVertexShader = " \n  uniform   mat4 u_matrix;\n  attribute vec2 a_pos;\n\n  varying vec2 v_pos;\n\n  void main() {\n    gl_Position = vec4(a_pos.x * 2.0 - 1.0, a_pos.y * 2.0 - 1.0, 0.0, 1.0);\n    v_pos = a_pos.xy;\n  }\n";
+export { CopyVertexShader };

package/map/layers/IdwLayer/CopyVertexShader.js

@@ -0,0 +1,2 @@
+var CopyVertexShader = /*glsl*/ " \n  uniform   mat4 u_matrix;\n  attribute vec2 a_pos;\n\n  varying vec2 v_pos;\n\n  void main() {\n    gl_Position = vec4(a_pos.x * 2.0 - 1.0, a_pos.y * 2.0 - 1.0, 0.0, 1.0);\n    v_pos = a_pos.xy;\n  }\n";
+export { CopyVertexShader };

package/map/layers/IdwLayer/IdwFragmentShader.d.ts

@@ -0,0 +1,2 @@
+declare const IdwFragmentShader = " \n  #ifdef GL_ES\n  precision mediump float;\n  #endif\n\n  uniform sampler2D u_dataTexture;\n  uniform vec2 u_dataTextureSize;\n  uniform int  u_numStations;\n  varying vec2 v_pos;\n  uniform float u_gradientStops[12];\n  uniform vec4 u_gradientColors[12];\n  uniform float u_maxDistance;\n  uniform float u_fadeFraction;\n\n  //\n  // Given a value, find its corresponding color in the gradient stops.\n  //\n  vec4 getGradientColor(float position) {\n    // Find left and right stop:\n    float left = -1.0;\n    float right = 99.0;\n    vec4 leftColor;\n    vec4 rightColor;\n\n    for(int i = 0; i < 12; i++) {\n      if (u_gradientStops[i] <= position) {\n        left = u_gradientStops[i]; \n        leftColor = u_gradientColors[i];\n      } else break;\n    }\n\n    for(int i = 12 - 1; i >= 0; i--) {\n      if (u_gradientStops[i] >= position) {\n        right = u_gradientStops[i]; \n        rightColor = u_gradientColors[i];\n      } else break;\n    }\n\n    // Distance between stops:\n    float width = right - left;\n    // Distance from left stop:\n    float dist = position - left;\n    // Right stop weight:\n    float weight;\n    if(dist == 0.0) {\n      weight = dist;\n    } else {\n      weight = dist / width;\n    }\n\n    float r = leftColor.x + (rightColor.x - leftColor.x) * weight;\n    float g = leftColor.y + (rightColor.y - leftColor.y) * weight;\n    float b = leftColor.z + (rightColor.z - leftColor.z) * weight;\n    float a = leftColor.w + (rightColor.w - leftColor.w) * weight;\n    return vec4(r, g, b, a);    \n  } \n\n  // GLSL ES 1.00 compatible\n  // rgba: vec4 from texture2D (values in [0..1])\n  float decodeFloatRGBA(vec4 rgba) {\n    // convert to 0..255 and round\n    vec4 b = floor(rgba * 255.0 + 0.5);\n\n    float b0 = b.r;\n    float b1 = b.g;\n    float b2 = b.b;\n    float b3 = b.a;\n\n    // sign: top bit of b3\n    float sign = (b3 >= 128.0) ? -1.0 : 1.0;\n\n    // exponent: 8 bits where lowest bit comes from b2's top bit\n    float exp_low  = floor(b2 / 128.0);        // 0 or 1\n    float exp_high = mod(b3, 128.0);          // bits 1..7 of exponent as 0..127\n    float exponent = exp_high * 2.0 + exp_low; // full 0..255\n\n    // mantissa: 23 bits from b0,b1 and lower 7 bits of b2\n    float mantissa = b0 + b1 * 256.0 + mod(b2, 128.0) * 65536.0;\n\n    // handle special cases\n    if (exponent == 0.0) {\n      // zero or subnormal\n      if (mantissa == 0.0) {\n        return 0.0;\n      } else {\n        // subnormal numbers: (-1)^s * (mantissa / 2^23) * 2^-126\n        return sign * (mantissa / 8388608.0) * exp2(-126.0);\n      }\n    } else if (exponent == 255.0) {\n      // Inf or NaN -- return a large value for Inf, and 0 for NaN\n      if (mantissa == 0.0) {\n        return sign * 3.402823466e38; // approx FLT_MAX\n      } else {\n        return 0.0; // NaN -> 0 (or handle as you prefer)\n      }\n    } else {\n      // normalized number: (-1)^s * (1 + mantissa/2^23) * 2^(exponent-127)\n      float m = 1.0 + mantissa / 8388608.0;\n      return sign * m * exp2(exponent - 127.0);\n    }\n  }  \n\n  vec2 texCoordForIndex(float idx, vec2 texSize) {\n    float x = mod(idx, texSize.x);\n    float y = floor(idx / texSize.x);\n    return (vec2(x + 0.5, y + 0.5) / texSize);\n  }\n\n  // read triple of pixels: idx*3 + 0,1,2\n  vec3 getPoint(int index) {\n    float base = float(index) * 3.0;\n    vec4 c0 = texture2D(u_dataTexture, texCoordForIndex(base + 0.0, u_dataTextureSize)); // x (mercator)\n    vec4 c1 = texture2D(u_dataTexture, texCoordForIndex(base + 1.0, u_dataTextureSize)); // y (mercator)\n    vec4 c2 = texture2D(u_dataTexture, texCoordForIndex(base + 2.0, u_dataTextureSize)); // value\n    float mx = decodeFloatRGBA(c0);\n    float my = decodeFloatRGBA(c1);\n    float val = decodeFloatRGBA(c2);\n    return vec3(mx, my, val);\n  }\n\n  void main() {\n    float num = 0.0;\n    float denom = 0.0;\n    float power = 3.0; // IDW power\n    float minDist = 1e9;\n\n    for (int i = 0; i < 1024; i++) { // 1024 is a safe upper bound\n      if (i >= u_numStations) break;\n      vec3 station = getPoint(i);\n      float dx = v_pos.x - station.x;\n      float dy = v_pos.y - station.y;\n      float d = sqrt(dx*dx + dy*dy);\n      minDist = min(minDist, d);\n\n      if (d < 1e-6) {\n        // Exact match: use station value directly\n        num = station.z;\n        denom = 1.0;\n        // stop looping, we\u2019re done\n        break;\n      }\n\n      float w = 1.0 / pow(d, power);\n      num += w * station.z;\n      denom += w;\n    }\n\n    if (minDist > u_maxDistance) {\n      // Too far from any station \u2192 discard pixel (transparent)\n      discard;\n    }    \n\n    float value = num / denom;\n\n    // Normalize value between 0 and 1\n    //float minVal = 0.0; // pass as uniform if needed\n    //float maxVal = 1.0;\n    //float norm = clamp((value - minVal) / (maxVal - minVal), 0.0, 1.0);\n\n    // --- FADE TO TRANSPARENT ---\n    float u_fadeDistance = u_maxDistance * u_fadeFraction;\n    float alpha = 1.0;\n    if (minDist > u_maxDistance - u_fadeDistance) {\n      // fade linearly from 1 \u2192 0\n      alpha = (u_maxDistance - minDist) / u_fadeDistance;\n      alpha = clamp(alpha, 0.0, 1.0);\n    }\n\n    gl_FragColor = vec4(vec3(getGradientColor(1.0 - value)), alpha);\n  }\n\n";
+export { IdwFragmentShader };

package/map/layers/IdwLayer/IdwFragmentShader.js

@@ -0,0 +1,2 @@
+var IdwFragmentShader = /*glsl*/ " \n  #ifdef GL_ES\n  precision mediump float;\n  #endif\n\n  uniform sampler2D u_dataTexture;\n  uniform vec2 u_dataTextureSize;\n  uniform int  u_numStations;\n  varying vec2 v_pos;\n  uniform float u_gradientStops[12];\n  uniform vec4 u_gradientColors[12];\n  uniform float u_maxDistance;\n  uniform float u_fadeFraction;\n\n  //\n  // Given a value, find its corresponding color in the gradient stops.\n  //\n  vec4 getGradientColor(float position) {\n    // Find left and right stop:\n    float left = -1.0;\n    float right = 99.0;\n    vec4 leftColor;\n    vec4 rightColor;\n\n    for(int i = 0; i < 12; i++) {\n      if (u_gradientStops[i] <= position) {\n        left = u_gradientStops[i]; \n        leftColor = u_gradientColors[i];\n      } else break;\n    }\n\n    for(int i = 12 - 1; i >= 0; i--) {\n      if (u_gradientStops[i] >= position) {\n        right = u_gradientStops[i]; \n        rightColor = u_gradientColors[i];\n      } else break;\n    }\n\n    // Distance between stops:\n    float width = right - left;\n    // Distance from left stop:\n    float dist = position - left;\n    // Right stop weight:\n    float weight;\n    if(dist == 0.0) {\n      weight = dist;\n    } else {\n      weight = dist / width;\n    }\n\n    float r = leftColor.x + (rightColor.x - leftColor.x) * weight;\n    float g = leftColor.y + (rightColor.y - leftColor.y) * weight;\n    float b = leftColor.z + (rightColor.z - leftColor.z) * weight;\n    float a = leftColor.w + (rightColor.w - leftColor.w) * weight;\n    return vec4(r, g, b, a);    \n  } \n\n  // GLSL ES 1.00 compatible\n  // rgba: vec4 from texture2D (values in [0..1])\n  float decodeFloatRGBA(vec4 rgba) {\n    // convert to 0..255 and round\n    vec4 b = floor(rgba * 255.0 + 0.5);\n\n    float b0 = b.r;\n    float b1 = b.g;\n    float b2 = b.b;\n    float b3 = b.a;\n\n    // sign: top bit of b3\n    float sign = (b3 >= 128.0) ? -1.0 : 1.0;\n\n    // exponent: 8 bits where lowest bit comes from b2's top bit\n    float exp_low  = floor(b2 / 128.0);        // 0 or 1\n    float exp_high = mod(b3, 128.0);          // bits 1..7 of exponent as 0..127\n    float exponent = exp_high * 2.0 + exp_low; // full 0..255\n\n    // mantissa: 23 bits from b0,b1 and lower 7 bits of b2\n    float mantissa = b0 + b1 * 256.0 + mod(b2, 128.0) * 65536.0;\n\n    // handle special cases\n    if (exponent == 0.0) {\n      // zero or subnormal\n      if (mantissa == 0.0) {\n        return 0.0;\n      } else {\n        // subnormal numbers: (-1)^s * (mantissa / 2^23) * 2^-126\n        return sign * (mantissa / 8388608.0) * exp2(-126.0);\n      }\n    } else if (exponent == 255.0) {\n      // Inf or NaN -- return a large value for Inf, and 0 for NaN\n      if (mantissa == 0.0) {\n        return sign * 3.402823466e38; // approx FLT_MAX\n      } else {\n        return 0.0; // NaN -> 0 (or handle as you prefer)\n      }\n    } else {\n      // normalized number: (-1)^s * (1 + mantissa/2^23) * 2^(exponent-127)\n      float m = 1.0 + mantissa / 8388608.0;\n      return sign * m * exp2(exponent - 127.0);\n    }\n  }  \n\n  vec2 texCoordForIndex(float idx, vec2 texSize) {\n    float x = mod(idx, texSize.x);\n    float y = floor(idx / texSize.x);\n    return (vec2(x + 0.5, y + 0.5) / texSize);\n  }\n\n  // read triple of pixels: idx*3 + 0,1,2\n  vec3 getPoint(int index) {\n    float base = float(index) * 3.0;\n    vec4 c0 = texture2D(u_dataTexture, texCoordForIndex(base + 0.0, u_dataTextureSize)); // x (mercator)\n    vec4 c1 = texture2D(u_dataTexture, texCoordForIndex(base + 1.0, u_dataTextureSize)); // y (mercator)\n    vec4 c2 = texture2D(u_dataTexture, texCoordForIndex(base + 2.0, u_dataTextureSize)); // value\n    float mx = decodeFloatRGBA(c0);\n    float my = decodeFloatRGBA(c1);\n    float val = decodeFloatRGBA(c2);\n    return vec3(mx, my, val);\n  }\n\n  void main() {\n    float num = 0.0;\n    float denom = 0.0;\n    float power = 3.0; // IDW power\n    float minDist = 1e9;\n\n    for (int i = 0; i < 1024; i++) { // 1024 is a safe upper bound\n      if (i >= u_numStations) break;\n      vec3 station = getPoint(i);\n      float dx = v_pos.x - station.x;\n      float dy = v_pos.y - station.y;\n      float d = sqrt(dx*dx + dy*dy);\n      minDist = min(minDist, d);\n\n      if (d < 1e-6) {\n        // Exact match: use station value directly\n        num = station.z;\n        denom = 1.0;\n        // stop looping, we\u2019re done\n        break;\n      }\n\n      float w = 1.0 / pow(d, power);\n      num += w * station.z;\n      denom += w;\n    }\n\n    if (minDist > u_maxDistance) {\n      // Too far from any station \u2192 discard pixel (transparent)\n      discard;\n    }    \n\n    float value = num / denom;\n\n    // Normalize value between 0 and 1\n    //float minVal = 0.0; // pass as uniform if needed\n    //float maxVal = 1.0;\n    //float norm = clamp((value - minVal) / (maxVal - minVal), 0.0, 1.0);\n\n    // --- FADE TO TRANSPARENT ---\n    float u_fadeDistance = u_maxDistance * u_fadeFraction;\n    float alpha = 1.0;\n    if (minDist > u_maxDistance - u_fadeDistance) {\n      // fade linearly from 1 \u2192 0\n      alpha = (u_maxDistance - minDist) / u_fadeDistance;\n      alpha = clamp(alpha, 0.0, 1.0);\n    }\n\n    gl_FragColor = vec4(vec3(getGradientColor(1.0 - value)), alpha);\n  }\n\n";
+export { IdwFragmentShader };

package/map/layers/IdwLayer/IdwLayer.d.ts

@@ -0,0 +1,69 @@
+import * as React from 'react';
+import { IGradientStop } from '../../../Types';
+interface IPoint {
+    latitude: number;
+    longitude: number;
+    value: number;
+}
+interface IIdwLayerProps {
+    /**
+     * Input data.
+     */
+    data: IPoint[];
+    /**
+     * Gradient stops. A default gradient is preset.
+     */
+    gradientStops?: IGradientStop[];
+    /**
+     * Minimum zoom level at which to render layer.
+     * @default 0
+     */
+    minZoom?: number;
+    /**
+     * Maximum zoom level at which to render layer.
+     * @default 99
+     */
+    maxZoom?: number;
+    /**
+     * Maximum world distance (in -1..1 coordinate) system away from
+     * all stations where a pixel is still drawn.
+     * @default 0.0002
+     */
+    maxDistance?: number;
+    /**
+     * Thickness of fading edge of blob (value 0..1)
+     * @default 0.15
+     */
+    fadeFraction?: number;
+    /**
+     * Offscreen texture resolution. Higher resolution = more pixels,
+     * slowing down the fragment shader.
+     * @default 256
+     */
+    resolution: 16 | 32 | 64 | 128 | 256 | 512 | 1024 | 2048 | 4096;
+}
+/**
+ * An `IdwLayer` takes a data array of points of the form
+ * `{ latitude, longitude, value }`, and renders a colored surface using
+ * **inverse distance weighting**.
+ *
+ * To do this, all points are stored in a data texture, which is then read
+ * by the fragment shader. For each fragment, the fragment shader consults
+ * all points in the data texture and determines their distance to the
+ * fragment, the applies inverse distance weighting to calculate the value
+ * of the fragment.
+ *
+ * This process is _O(FxP)_, where _F_ is the number of fragments and _P_ is the
+ * number of data points. For a large screen (2048x1024) and a large number
+ * of data points (100), this will mean 209M calculations per frame. To
+ * reduce this, the actual calculations are done in a first pass to a frame
+ * buffer, using a texture of (by default) 256x256. The number of calculations
+ * is then reduced to 6M. The resulting texture is then upscaled to fill
+ * the original screen. The resolution of the offscreen texture is configurable,
+ * as long as it is a power of 2 (32, 64, 128, 256...).
+ */
+declare const IdwLayer: {
+    ({ gradientStops, minZoom, maxZoom, maxDistance, fadeFraction, resolution, ...props }: IIdwLayerProps): React.JSX.Element;
+    displayName: string;
+};
+export { IdwLayer };

package/map/layers/IdwLayer/IdwLayer.js

@@ -0,0 +1,285 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+import * as React from 'react';
+import { Layer, useMap } from 'react-map-gl/mapbox';
+import { MercatorCoordinate } from 'mapbox-gl';
+import { IdwVertexShader } from './IdwVertexShader';
+import { IdwFragmentShader } from './IdwFragmentShader';
+import { RgbColor } from '../../../helper/RgbColor';
+import { PresetGradients } from '../../../controls/Gradient';
+import { CopyVertexShader } from './CopyVertexShader';
+import { CopyFragmentShader } from './CopyFragmentShader';
+var IdwLayerBase = function (props) {
+    var map = useMap();
+    var idwProgram = React.useRef(null);
+    var vertexBuffer = React.useRef(null);
+    var dataTexture = React.useRef(null);
+    var dataTextureWidth = React.useRef(null);
+    var dataTextureHeight = React.useRef(null);
+    var offscreenTexture = React.useRef(null);
+    var fbo = React.useRef(null);
+    var copyProgram = React.useRef(null);
+    var copyBuffer = React.useRef(null);
+    var _a = React.useState(0), time = _a[0], setTime = _a[1];
+    var data = props.data.slice(0, 50);
+    // When properties change, make sure that layer is redrawn.
+    // Do this by varying its `key` with the current time.
+    React.useEffect(function () {
+        setTime(Date.now());
+    }, [props.data, props.gradientStops]);
+    //
+    // Convert a hex color (e.g. #ff0022) to an [r,g,b,a] array,
+    // where r,g,b,a are in the 0.0-1.0 range.
+    //
+    var colorToRGBA = function (color) {
+        var rgb = RgbColor.FromString(color);
+        return [rgb.red / 255.0, rgb.green / 255.0, rgb.blue / 255.0, rgb.alpha];
+    };
+    var floatToRGBABytesLE = function (value) {
+        var buf = new ArrayBuffer(4);
+        var dv = new DataView(buf);
+        dv.setFloat32(0, value, true); // little-endian
+        return [
+            dv.getUint8(0),
+            dv.getUint8(1),
+            dv.getUint8(2),
+            dv.getUint8(3),
+        ];
+    };
+    var makeTexture = function (gl) {
+        var minVal = Math.min.apply(Math, data.map(function (p) { return p.value; }));
+        var maxVal = Math.max.apply(Math, data.map(function (p) { return p.value; }));
+        var normalized = data.map(function (m) {
+            var coord = MercatorCoordinate.fromLngLat({ lng: m.longitude, lat: m.latitude });
+            return { x: coord.x, y: coord.y, value: (m.value - minVal) / (maxVal - minVal) };
+        });
+        var texSize = 1024;
+        dataTextureWidth.current = texSize;
+        dataTextureHeight.current = texSize;
+        var pixels = new Uint8Array(texSize * texSize * 4);
+        normalized.forEach(function (p, i) {
+            var values = [p.x, p.y, p.value];
+            for (var j = 0; j < 3; j++) {
+                var _a = floatToRGBABytesLE(values[j]), r = _a[0], g = _a[1], b = _a[2], a = _a[3];
+                var pixelIndex = i * 3 + j;
+                var offset = pixelIndex * 4;
+                if (offset + 3 < pixels.length) {
+                    pixels[offset + 0] = r;
+                    pixels[offset + 1] = g;
+                    pixels[offset + 2] = b;
+                    pixels[offset + 3] = a;
+                }
+            }
+        });
+        // Create / bind / upload texture
+        dataTexture.current = gl.createTexture();
+        gl.bindTexture(gl.TEXTURE_2D, dataTexture.current);
+        gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, texSize, texSize, 0, gl.RGBA, gl.UNSIGNED_BYTE, pixels);
+        // Use nearest sampling — we want exact pixel values
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+    };
+    var onAddLayer = function (map, gl) {
+        // IDW PROGRAM
+        // create a vertex shader
+        var vertexShader = gl.createShader(gl.VERTEX_SHADER);
+        gl.shaderSource(vertexShader, IdwVertexShader);
+        gl.compileShader(vertexShader);
+        // create a fragment shader
+        var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
+        gl.shaderSource(fragmentShader, IdwFragmentShader);
+        gl.compileShader(fragmentShader);
+        // link the two shaders into a WebGL program
+        idwProgram.current = gl.createProgram();
+        gl.attachShader(idwProgram.current, vertexShader);
+        gl.attachShader(idwProgram.current, fragmentShader);
+        gl.linkProgram(idwProgram.current);
+        // Create vertex buffer from vertices:
+        vertexBuffer.current = gl.createBuffer();
+        gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer.current);
+        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
+            0.0, 0.0,
+            1.0, 0.0,
+            0.0, 1.0,
+            1.0, 1.0
+        ]), gl.STATIC_DRAW);
+        // Make an OpenGL texture that contains station data (x,y,value).
+        // The texture dimensions are saved and will be passed into a shader 
+        // uniform. Note that lat/lng is converted to Mercator x,y, which has 
+        // a range of [0..1].
+        makeTexture(gl);
+        // create texture to render into
+        offscreenTexture.current = gl.createTexture();
+        gl.bindTexture(gl.TEXTURE_2D, offscreenTexture.current);
+        // allocate empty texture
+        gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, props.resolution, props.resolution, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR); // linear for smoother upsampling; you can use NEAREST if you want blocky
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+        // create framebuffer and attach texture
+        fbo.current = gl.createFramebuffer();
+        gl.bindFramebuffer(gl.FRAMEBUFFER, fbo.current);
+        gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, offscreenTexture.current, 0);
+        // check completeness (best-effort)
+        var status = gl.checkFramebufferStatus(gl.FRAMEBUFFER);
+        if (status !== gl.FRAMEBUFFER_COMPLETE) {
+            // Not fatal here — log to console
+            // eslint-disable-next-line no-console
+            console.warn('Framebuffer not complete: ', status);
+        }
+        // unbind
+        gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+        // COPY PROGRAM
+        // create a vertex shader
+        var copyVertexShader = gl.createShader(gl.VERTEX_SHADER);
+        gl.shaderSource(copyVertexShader, CopyVertexShader);
+        gl.compileShader(copyVertexShader);
+        // create a fragment shader
+        var copyFragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
+        gl.shaderSource(copyFragmentShader, CopyFragmentShader);
+        gl.compileShader(copyFragmentShader);
+        // link the two shaders into a WebGL program
+        copyProgram.current = gl.createProgram();
+        gl.attachShader(copyProgram.current, copyVertexShader);
+        gl.attachShader(copyProgram.current, copyFragmentShader);
+        gl.linkProgram(copyProgram.current);
+        // Create vertex buffer from vertices:
+        copyBuffer.current = gl.createBuffer();
+        gl.bindBuffer(gl.ARRAY_BUFFER, copyBuffer.current);
+        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
+            0.0, 0.0,
+            1.0, 0.0,
+            0.0, 1.0,
+            1.0, 1.0
+        ]), gl.STATIC_DRAW);
+    };
+    var onRender = function (gl, matrix, zoom, width, height) {
+        // Render is called many times while the map is panned/zoomed.
+        // You cannot have access to the map though.
+        if (zoom < props.minZoom)
+            return;
+        if (zoom > props.maxZoom)
+            return;
+        //
+        // FIRST PASS
+        //
+        gl.bindFramebuffer(gl.FRAMEBUFFER, fbo.current);
+        var vp = gl.getParameter(gl.VIEWPORT);
+        gl.viewport(0, 0, props.resolution, props.resolution);
+        gl.clearColor(0, 0, 0, 0);
+        gl.clear(gl.COLOR_BUFFER_BIT);
+        // Render is called many times while the map is panned/zoomed.
+        // You cannot have access to the map though.
+        gl.useProgram(idwProgram.current);
+        // Pass a matrix uniform in: 
+        gl.uniformMatrix4fv(gl.getUniformLocation(idwProgram.current, 'u_matrix'), false, matrix);
+        // Pass in number of stations:
+        gl.uniform1i(gl.getUniformLocation(idwProgram.current, "u_numStations"), data.length);
+        // put the data texture on texture unit 0
+        gl.activeTexture(gl.TEXTURE0);
+        gl.bindTexture(gl.TEXTURE_2D, dataTexture.current);
+        // Pass data texture in (use texture unit 0):
+        gl.uniform1i(gl.getUniformLocation(idwProgram.current, "u_dataTexture"), 0);
+        // Pass texture size in:
+        // Tell the shader the size of the position texture
+        gl.uniform2f(gl.getUniformLocation(idwProgram.current, "u_dataTextureSize"), dataTextureWidth.current, dataTextureHeight.current);
+        // Stops - fill up to 12 stops by using values > 1 for filler stops.
+        // e.g. [0.0, 0.5, 1.0, 2.0....] means that only the first 3 stops are used.
+        var stops = __spreadArray([], props.gradientStops.map(function (s) { return s.pos; }), true);
+        while (stops.length < 12)
+            stops.push(2.0);
+        gl.uniform1fv(gl.getUniformLocation(idwProgram.current, 'u_gradientStops'), new Float32Array(stops));
+        var colors = props.gradientStops.map(function (s) { return colorToRGBA(s.color); }).flat();
+        gl.uniform4fv(gl.getUniformLocation(idwProgram.current, 'u_gradientColors'), new Float32Array(colors));
+        // Max distance from all stations at which a pixel is drawn:
+        gl.uniform1f(gl.getUniformLocation(idwProgram.current, "u_maxDistance"), props.maxDistance);
+        // Fraction of this max distance where fading begins:
+        gl.uniform1f(gl.getUniformLocation(idwProgram.current, "u_fadeFraction"), props.fadeFraction);
+        var aPos = gl.getAttribLocation(idwProgram.current, 'a_pos');
+        gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer.current);
+        gl.enableVertexAttribArray(aPos);
+        gl.vertexAttribPointer(aPos, 2, gl.FLOAT, false, 0, 0);
+        gl.enable(gl.BLEND);
+        gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
+        gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
+        //
+        // SECOND PASS
+        // 
+        gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+        // Restore mapbox viewport:
+        gl.viewport(vp[0], vp[1], vp[2], vp[3]);
+        gl.useProgram(copyProgram.current);
+        // Pass a matrix uniform in: 
+        gl.uniformMatrix4fv(gl.getUniformLocation(copyProgram.current, 'u_matrix'), false, matrix);
+        // bind offscreen texture into unit 0 for copy pass
+        gl.activeTexture(gl.TEXTURE0);
+        gl.bindTexture(gl.TEXTURE_2D, offscreenTexture.current);
+        gl.uniform1i(gl.getUniformLocation(copyProgram.current, 'u_src'), 0);
+        var aPos2 = gl.getAttribLocation(copyProgram.current, 'a_pos');
+        gl.bindBuffer(gl.ARRAY_BUFFER, copyBuffer.current);
+        gl.enableVertexAttribArray(aPos2);
+        gl.vertexAttribPointer(aPos2, 2, gl.FLOAT, false, 0, 0);
+        gl.enable(gl.BLEND);
+        gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
+        gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
+    };
+    return (React.createElement(Layer, { id: null, type: "custom", beforeId: "overlay", key: time, onAdd: onAddLayer, render: function (gl, matrix) { return onRender(gl, matrix, map.current.getZoom(), map.current.getContainer().clientWidth, map.current.getContainer().clientHeight); } }));
+};
+/**
+ * An `IdwLayer` takes a data array of points of the form
+ * `{ latitude, longitude, value }`, and renders a colored surface using
+ * **inverse distance weighting**.
+ *
+ * To do this, all points are stored in a data texture, which is then read
+ * by the fragment shader. For each fragment, the fragment shader consults
+ * all points in the data texture and determines their distance to the
+ * fragment, the applies inverse distance weighting to calculate the value
+ * of the fragment.
+ *
+ * This process is _O(FxP)_, where _F_ is the number of fragments and _P_ is the
+ * number of data points. For a large screen (2048x1024) and a large number
+ * of data points (100), this will mean 209M calculations per frame. To
+ * reduce this, the actual calculations are done in a first pass to a frame
+ * buffer, using a texture of (by default) 256x256. The number of calculations
+ * is then reduced to 6M. The resulting texture is then upscaled to fill
+ * the original screen. The resolution of the offscreen texture is configurable,
+ * as long as it is a power of 2 (32, 64, 128, 256...).
+ */
+var IdwLayer = function (_a) {
+    var _b = _a.gradientStops, gradientStops = _b === void 0 ? PresetGradients.Blue : _b, _c = _a.minZoom, minZoom = _c === void 0 ? 0 : _c, _d = _a.maxZoom, maxZoom = _d === void 0 ? 99 : _d, _e = _a.maxDistance, maxDistance = _e === void 0 ? 0.0002 : _e, _f = _a.fadeFraction, fadeFraction = _f === void 0 ? 0.15 : _f, _g = _a.resolution, resolution = _g === void 0 ? 256 : _g, props = __rest(_a, ["gradientStops", "minZoom", "maxZoom", "maxDistance", "fadeFraction", "resolution"]);
+    return React.createElement(IdwLayerBase, __assign({ gradientStops: gradientStops, minZoom: minZoom, maxZoom: maxZoom, maxDistance: maxDistance, fadeFraction: fadeFraction, resolution: resolution }, props));
+};
+IdwLayer.displayName = 'IdwLayer';
+export { IdwLayer };

package/map/layers/IdwLayer/IdwVertexShader.d.ts

@@ -0,0 +1,2 @@
+declare const IdwVertexShader = " \n  uniform   mat4 u_matrix;\n  attribute vec2 a_pos;\n\n  varying vec2 v_pos;\n\n  void main() {\n    gl_Position = u_matrix * vec4(a_pos, 0.0, 1.0);\n    v_pos = a_pos.xy;\n  }\n";
+export { IdwVertexShader };

package/map/layers/IdwLayer/IdwVertexShader.js

@@ -0,0 +1,2 @@
+var IdwVertexShader = /*glsl*/ " \n  uniform   mat4 u_matrix;\n  attribute vec2 a_pos;\n\n  varying vec2 v_pos;\n\n  void main() {\n    gl_Position = u_matrix * vec4(a_pos, 0.0, 1.0);\n    v_pos = a_pos.xy;\n  }\n";
+export { IdwVertexShader };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@longline/aqua-ui",
-  "version": "1.0.225",
+  "version": "1.0.227",
   "description": "AquaUI",
   "author": "Alexander van Oostenrijk / Longline Environment",
   "license": "Commercial",