@longline/aqua-ui 1.0.16 → 1.0.18

package/containers/PublicRoute/Help.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+interface IProps {
+    /** @ignore */
+    className?: string;
+    /** @ignore */
+    children?: React.ReactNode;
+    /**
+     * Help currenty active?
+     */
+    active?: boolean;
+}
+declare const Help: (props: IProps) => React.JSX.Element;
+export { Help };

package/containers/PublicRoute/Help.js

@@ -0,0 +1,28 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+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);
+};
+import * as React from 'react';
+import styled from 'styled-components';
+var HelpBase = function (props) {
+    return (React.createElement("div", { className: props.className },
+        React.createElement(Body, null,
+            React.createElement(Content, null, props.children))));
+};
+var Content = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  padding: 16px;\n  user-select: none;\n  color: white;\n\n  a {\n    color: #E9A759 !important;\n  }  \n"], ["\n  padding: 16px;\n  user-select: none;\n  color: white;\n\n  a {\n    color: #E9A759 !important;\n  }  \n"])));
+var Body = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: relative;\n  box-sizing: border-box;\n  background: \n    linear-gradient(#1C242A, #1C242A) padding-box,\n    linear-gradient(330deg, #505050 3.25%, rgba(23, 23, 23, 0.56) 18.64%, rgba(0, 0, 0, 0) 105.88%) border-box;\n  border-radius: ", "px;\n  border: 1px solid transparent; \n  font-size: 14px;\n  margin-bottom: 32px;\n\n  &:after {\n    position: absolute;\n    content: '';\n    top: calc(100% - 9px);\n    right: 30px;\n    width: 20px;\n    height: 20px;\n    background: #1C242A;\n    transform-origin: 50% 50%;\n    transform: rotate(45deg);\n    z-index: 1;\n    border-right: solid 1px #505050;\n    border-bottom: solid 1px #505050;\n    box-sizing: border-box;\n  }  \n"], ["\n  position: relative;\n  box-sizing: border-box;\n  background: \n    linear-gradient(#1C242A, #1C242A) padding-box,\n    linear-gradient(330deg, #505050 3.25%, rgba(23, 23, 23, 0.56) 18.64%, rgba(0, 0, 0, 0) 105.88%) border-box;\n  border-radius: ", "px;\n  border: 1px solid transparent; \n  font-size: 14px;\n  margin-bottom: 32px;\n\n  &:after {\n    position: absolute;\n    content: '';\n    top: calc(100% - 9px);\n    right: 30px;\n    width: 20px;\n    height: 20px;\n    background: #1C242A;\n    transform-origin: 50% 50%;\n    transform: rotate(45deg);\n    z-index: 1;\n    border-right: solid 1px #505050;\n    border-bottom: solid 1px #505050;\n    box-sizing: border-box;\n  }  \n"])), function (p) { return p.theme.radius.normal; });
+var HelpStyled = styled(HelpBase)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  position: relative;\n  height: ", ";\n  overflow: hidden;\n  transition: height ease-in-out 250ms;\n"], ["\n  position: relative;\n  height: ", ";\n  overflow: hidden;\n  transition: height ease-in-out 250ms;\n"])), function (p) { return p.active ? 'auto' : '0px'; });
+var Help = function (props) { return React.createElement(HelpStyled, __assign({}, props)); };
+export { Help };
+var templateObject_1, templateObject_2, templateObject_3;

package/containers/PublicRoute/PublicRoute.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+interface IProps {
+    /** @ignore */
+    className?: string;
+    /** @ignore */
+    children?: React.ReactNode;
+    logoUrl: string;
+    help?: React.ReactNode;
+}
+declare const PublicRoute: (props: IProps) => React.JSX.Element;
+export { PublicRoute };

package/containers/PublicRoute/PublicRoute.js

@@ -0,0 +1,45 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+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);
+};
+import * as React from 'react';
+import { styled } from 'styled-components';
+import { InfoBox } from '../InfoBox';
+import { Help } from './Help';
+import { Icon } from '../../controls/Icon';
+import { SVG } from '../../svg';
+import { ParticleGlobe } from '../../modules/ParticleGlobe/ParticleGlobe';
+var PublicRouteBase = function (props) {
+    var _a = React.useState(false), showHelp = _a[0], setShowHelp = _a[1];
+    return (React.createElement("div", { className: props.className },
+        React.createElement(ParticleGlobe, { landmass: 'day', globe: true, glow: 20, trails: 5, pointSize: 1.0, numParticles: 100000, brightness: 0.9, speedFactor: 750, minLifetime: 1000, maxLifetime: 1000, responsive: true }),
+        React.createElement(Content, null,
+            React.createElement(Help, { active: showHelp },
+                "Help content",
+                React.createElement("br", null),
+                "Help content",
+                React.createElement("br", null),
+                "Help content"),
+            React.createElement(InfoBox, { width: 400, padded: true, header: React.createElement(Header, null,
+                    React.createElement(Logo, null,
+                        React.createElement("use", { xlinkHref: props.logoUrl })),
+                    React.createElement(Icon, { circle: true, url: SVG.Icons.Info, onClick: function () { return setShowHelp(!showHelp); } })) }, props.children))));
+};
+var Logo = styled.svg(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: 32px;\n"], ["\n  height: 32px;\n"])));
+var Header = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n"], ["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n"])));
+var Content = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  position: absolute;\n  width: 400px;\n  max-width: 90vw;\n  left: 50%;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  z-index: 1;\n"], ["\n  position: absolute;\n  width: 400px;\n  max-width: 90vw;\n  left: 50%;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  z-index: 1;\n"])));
+var PublicRouteStyled = styled(PublicRouteBase)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  position:    absolute;\n  left:        0;\n  top:         0;\n  right:       0;\n  bottom:      0;\n  overflow:    hidden;  \n  background:  conic-gradient(from 0deg at 0 0, #071119 0deg, #071119 90deg, #243961 180deg, #243961 -1deg);\n  background-blend-mode: multiply;  \n"], ["\n  position:    absolute;\n  left:        0;\n  top:         0;\n  right:       0;\n  bottom:      0;\n  overflow:    hidden;  \n  background:  conic-gradient(from 0deg at 0 0, #071119 0deg, #071119 90deg, #243961 180deg, #243961 -1deg);\n  background-blend-mode: multiply;  \n"])));
+var PublicRoute = function (props) { return React.createElement(PublicRouteStyled, __assign({}, props)); };
+export { PublicRoute };
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/containers/PublicRoute/index.d.ts

@@ -0,0 +1 @@
+export * from './PublicRoute';

package/containers/PublicRoute/index.js

@@ -0,0 +1 @@
+export * from './PublicRoute';

package/controls/Dropzone/Dropbox.d.ts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+interface IProps {
+    /** @ignore */
+    className?: string;
+    onDragover: () => void;
+    onDragLeave: () => void;
+    onAddFiles: (files: File[]) => void;
+    /** Is box currently hovered (with a file)? */
+    hover: boolean;
+    /** Optional custom hint message. */
+    message?: React.ReactNode;
+}
+declare const Dropbox: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<IProps, never>> & string & Omit<(props: IProps) => React.JSX.Element, keyof React.Component<any, {}, any>>;
+export { Dropbox };

package/controls/Dropzone/Dropbox.js

@@ -0,0 +1,47 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import * as React from 'react';
+import styled, { css } from 'styled-components';
+import { SVG } from '../../svg';
+var DropboxBase = function (props) {
+    var _a;
+    var inputElement = React.useRef(null);
+    var handleClick = function () {
+        inputElement.current.click();
+    };
+    var fileListToArray = function (list) {
+        var array = [];
+        for (var i = 0; i < list.length; i++) {
+            array.push(list.item(i));
+        }
+        return array;
+    };
+    var handleAddFile = function (e) {
+        var list = e.target.files;
+        var arr = fileListToArray(list);
+        props.onAddFiles(arr);
+    };
+    var handleDragOver = function (e) {
+        e.preventDefault();
+        props.onDragover();
+    };
+    var handleDragLeave = function (e) {
+        props.onDragLeave();
+    };
+    var handleDrop = function (e) {
+        e.preventDefault();
+        var files = e.dataTransfer.files;
+        var array = fileListToArray(files);
+        props.onAddFiles(array);
+    };
+    return (React.createElement("div", { className: props.className, onClick: handleClick, onDragOver: handleDragOver, onDragLeave: handleDragLeave, onDrop: handleDrop },
+        React.createElement("div", null, (_a = props.message) !== null && _a !== void 0 ? _a : "Drop a file here to upload, or click to select."),
+        React.createElement("svg", null,
+            React.createElement("use", { xlinkHref: SVG.Other.CloudUpload })),
+        React.createElement("input", { ref: inputElement, type: "file", multiple: true, onChange: handleAddFile })));
+};
+var Dropbox = styled(DropboxBase)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: relative;\n  border: dashed 2px ", ";\n  border-radius: ", "px;\n  cursor: pointer;\n  width: 100%;\n  text-align: center;\n\n  ", "\n\n  div {\n    margin-top: 8px;\n    font-weight: 500;\n    color: ", ";\n  }\n\n  svg {\n    display: block;\n    margin: 8px;\n    width: 100%;\n    height: 150px;\n    fill: ", ";\n  }\n\n  input {\n    display: none;\n  }\n"], ["\n  position: relative;\n  border: dashed 2px ", ";\n  border-radius: ", "px;\n  cursor: pointer;\n  width: 100%;\n  text-align: center;\n\n  ", "\n\n  div {\n    margin-top: 8px;\n    font-weight: 500;\n    color: ", ";\n  }\n\n  svg {\n    display: block;\n    margin: 8px;\n    width: 100%;\n    height: 150px;\n    fill: ", ";\n  }\n\n  input {\n    display: none;\n  }\n"])), function (p) { return p.hover ? p.theme.colors.neutral[100] : p.theme.colors.neutral[80]; }, function (p) { return p.theme.radius.normal; }, function (p) { return p.hover && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    background: ", ";\n  "], ["\n    background: ", ";\n  "])), p.theme.colors.primary[3]); }, function (p) { return p.hover ? p.theme.colors.neutral[100] : p.theme.colors.neutral[80]; }, function (p) { return p.hover ? p.theme.colors.primary[1] : p.theme.colors.primary[2]; });
+export { Dropbox };
+var templateObject_1, templateObject_2;

package/controls/Dropzone/Dropzone.d.ts

@@ -0,0 +1,30 @@
+import * as React from 'react';
+interface IDropzoneProps {
+    /** @ignore */
+    className?: string;
+    /** @ignore */
+    children?: React.ReactNode;
+    /**
+     * Callback to call when files are dropped in the Dropzone. Multiple files can be uploaded at
+     * a time.
+     */
+    onAddFiles: (files: File[]) => void;
+    /**
+     * Optional translation override for Dropzone message.
+     */
+    message?: React.ReactNode;
+}
+/**
+ * A `Dropzone` accepts files, either by dragging them into the zone or by clicking the
+ * zone and selection files. Multiple files may be dragged or selected at the same
+ * time. When files are selected, Dropzone fires `onAddFiles` with a `Files[]` argument.
+ *
+ * @example
+ * <Dropzone
+ *   onAddFiles={(files: File[]) => console.log("Files dropped", files)}
+ * />
+ *
+ * @link https://henck.github.io/typeui/?path=/story/controls-dropzone--properties
+ */
+declare const Dropzone: (props: IDropzoneProps) => React.JSX.Element;
+export { Dropzone };

package/controls/Dropzone/Dropzone.js

@@ -0,0 +1,30 @@
+import * as React from 'react';
+// Other controls
+import { Dropbox } from './Dropbox';
+/**
+ * A `Dropzone` accepts files, either by dragging them into the zone or by clicking the
+ * zone and selection files. Multiple files may be dragged or selected at the same
+ * time. When files are selected, Dropzone fires `onAddFiles` with a `Files[]` argument.
+ *
+ * @example
+ * <Dropzone
+ *   onAddFiles={(files: File[]) => console.log("Files dropped", files)}
+ * />
+ *
+ * @link https://henck.github.io/typeui/?path=/story/controls-dropzone--properties
+ */
+var Dropzone = function (props) {
+    var _a = React.useState(false), hover = _a[0], setHover = _a[1];
+    var handleAddFiles = function (files) {
+        props.onAddFiles(files);
+        setHover(false);
+    };
+    var handleDragOver = function () {
+        setHover(true);
+    };
+    var handleDragLeave = function () {
+        setHover(false);
+    };
+    return (React.createElement(Dropbox, { hover: hover, message: props.message, onDragover: handleDragOver, onDragLeave: handleDragLeave, onAddFiles: handleAddFiles }));
+};
+export { Dropzone };

package/controls/Dropzone/index.d.ts

@@ -0,0 +1 @@
+export { Dropzone } from './Dropzone';

package/controls/Dropzone/index.js

@@ -0,0 +1 @@
+export { Dropzone } from './Dropzone';

package/helper/RgbColor.d.ts

@@ -39,5 +39,10 @@ declare class RgbColor {
      * Return string representation of this RgbColor instance.
      */
     toString(): string;
+    /**
+     * 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. This is for WebGL purposes.
+     */
+    static toRGBA: (color: string) => number[];
 }
 export { RgbColor };

package/helper/RgbColor.js

@@ -157,6 +157,14 @@ var RgbColor = /** @class */ (function () {
         // Reduce #FFFFFF to #FFF if possible:
         return this.reduceHexValue(hex);
     };
+    /**
+     * 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. This is for WebGL purposes.
+     */
+    RgbColor.toRGBA = function (color) {
+        var rgb = RgbColor.FromString(color);
+        return [rgb.red / 255.0, rgb.green / 255.0, rgb.blue / 255.0, rgb.alpha];
+    };
     return RgbColor;
 }());
 export { RgbColor };

package/map/Map/Map.d.ts

@@ -41,7 +41,22 @@ interface IProps {
      * @default false
      */
     clipped?: boolean;
+    /**
+     * Optional Mapbox logo position.
+     * @default top-right
+     */
+    logoPosition?: "top-right" | "top-left" | "bottom-left" | "bottom-right";
+    /**
+     * Optional minimum zoom level.
+     * @default 1
+     */
+    minZoom?: number;
+    /**
+     * Optional maximum zoom level.
+     * @default 20
+     */
+    maxZoom?: number;
 }
 declare const useViewState: () => ViewState;
-declare const Map: ({ longitude, latitude, zoom, pitch, bearing, clipped, ...props }: IProps) => React.JSX.Element;
+declare const Map: ({ longitude, latitude, zoom, pitch, bearing, clipped, logoPosition, minZoom, maxZoom, ...props }: IProps) => React.JSX.Element;
 export { Map, useViewState };

package/map/Map/Map.js

@@ -203,7 +203,7 @@ var MapBase = function (props) {
     var handleMove = function (e) {
         setViewState(e.viewState);
     };
-    return (React.createElement(GLMap, __assign({}, viewState, { mapboxAccessToken: props.token, style: { width: '100%', height: '100%', minHeight: '300px', font: theme.font.bodyMedium }, logoPosition: "top-right", mapStyle: props.style, minZoom: 1, maxZoom: 20, doubleClickZoom: true, onMove: handleMove }),
+    return (React.createElement(GLMap, __assign({}, viewState, { mapboxAccessToken: props.token, style: { width: '100%', height: '100%', minHeight: '300px', font: theme.font.bodyMedium }, logoPosition: props.logoPosition, mapStyle: props.style, minZoom: 1, maxZoom: 20, doubleClickZoom: true, onMove: handleMove }),
         props.clipped && React.createElement(React.Fragment, null,
             React.createElement(Source, { type: "raster", tiles: ["https://api.mapbox.com/raster/v1/mapbox.mapbox-terrain-dem-v1/{z}/{x}/{y}.webp?access_token=".concat(props.token)] },
                 React.createElement(Layer, { id: "overlay", type: "raster" })),
@@ -214,8 +214,8 @@ var MapBase = function (props) {
 };
 var Controls = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  pointer-events: none;\n  & > * {\n    pointer-events: all;\n  }\n\n  ", ";\n"], ["\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  pointer-events: none;\n  & > * {\n    pointer-events: all;\n  }\n\n  ", ";\n"])), function (p) { return p.theme.font.bodyMedium; });
 var Map = function (_a) {
-    var _b = _a.longitude, longitude = _b === void 0 ? -64.6 : _b, _c = _a.latitude, latitude = _c === void 0 ? 44.02 : _c, _d = _a.zoom, zoom = _d === void 0 ? 11 : _d, _e = _a.pitch, pitch = _e === void 0 ? 0 : _e, _f = _a.bearing, bearing = _f === void 0 ? 0 : _f, _g = _a.clipped, clipped = _g === void 0 ? false : _g, props = __rest(_a, ["longitude", "latitude", "zoom", "pitch", "bearing", "clipped"]);
-    return React.createElement(MapBase, __assign({ longitude: longitude, latitude: latitude, zoom: zoom, pitch: pitch, bearing: bearing, clipped: clipped }, props));
+    var _b = _a.longitude, longitude = _b === void 0 ? -64.6 : _b, _c = _a.latitude, latitude = _c === void 0 ? 44.02 : _c, _d = _a.zoom, zoom = _d === void 0 ? 11 : _d, _e = _a.pitch, pitch = _e === void 0 ? 0 : _e, _f = _a.bearing, bearing = _f === void 0 ? 0 : _f, _g = _a.clipped, clipped = _g === void 0 ? false : _g, _h = _a.logoPosition, logoPosition = _h === void 0 ? 'top-right' : _h, _j = _a.minZoom, minZoom = _j === void 0 ? 1 : _j, _k = _a.maxZoom, maxZoom = _k === void 0 ? 20 : _k, props = __rest(_a, ["longitude", "latitude", "zoom", "pitch", "bearing", "clipped", "logoPosition", "minZoom", "maxZoom"]);
+    return React.createElement(MapBase, __assign({ longitude: longitude, latitude: latitude, zoom: zoom, pitch: pitch, bearing: bearing, clipped: clipped, logoPosition: logoPosition, minZoom: minZoom, maxZoom: maxZoom }, props));
 };
 export { Map, useViewState };
 var templateObject_1;

package/modules/Globe/Elevations.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Min = -86
+ * Max = 5750
+ */
+declare const getElevation: (x: number, y: number, z: number, r: number) => number;
+export { getElevation };