@longline/aqua-ui 1.0.0

package/formatters/Filesize/Filesize.js

@@ -0,0 +1,54 @@
+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';
+/**
+ * Filesize takes a `value` prop (in bytes) and renders a human-readable filesize
+ * string.  If provided with a string, `Filesize` will convert it to a number
+ * first.
+ *
+ * E.g. `10000` => `10.0 kB`
+ *
+ * The `unit` type can optionally be specified, either `si` (International
+ * System of Units, where 1 kilobyte is 1,000 byes), or `binary (where 1
+ * kilobyte equals 1,024 bytes).
+ *
+ * ```tsx
+ * <Filesize value={10000} unit='binary'/>
+ * ```
+ */
+var Filesize = function (_a) {
+    var _b = _a.unit, unit = _b === void 0 ? "si" : _b, props = __rest(_a, ["unit"]);
+    /**
+     * Convert bytes to size string (kB, MB, GB etc.)
+     */
+    var humanFileSize = function (bytes, unit) {
+        var thresh = unit == 'si' ? 1000 : 1024;
+        if (Math.abs(bytes) < thresh) {
+            return bytes + ' B';
+        }
+        var units = unit == 'si'
+            ? ['kB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']
+            : ['KiB', 'MiB', 'GiB', 'TiB', 'PiB', 'EiB', 'ZiB', 'YiB'];
+        var u = -1;
+        do {
+            bytes /= thresh;
+            ++u;
+        } while (Math.abs(bytes) >= thresh && u < units.length - 1);
+        return bytes.toFixed(2) + ' ' + units[u];
+    };
+    if (props.value == null)
+        return null;
+    // Make sure value is a number.
+    var val = (typeof props.value === 'string') ? parseFloat(props.value) : props.value;
+    return (React.createElement(React.Fragment, null, humanFileSize(val, unit)));
+};
+export { Filesize };

package/formatters/GIS/Latitude.d.ts

@@ -0,0 +1,23 @@
+import * as React from 'react';
+interface IProps {
+    /**
+     * Value to format.
+     */
+    value: number | string;
+    /**
+     * String to show if formatting fails.
+     * @default "(no coordinates)"
+     */
+    default?: string;
+}
+/**
+ * Formats a fractional latitude value as degrees, minutes and seconds (as a string).
+ * If provided with a string, `Longitude` will convert it to a number first.
+ *
+ * ```tsx
+ * <Latitude value={34.2216}/>
+ * <Latitude value={34.2216} default="Bad latitude"/>
+ * ```
+ */
+declare const Latitude: (props: IProps) => React.JSX.Element;
+export { Latitude, IProps as ILatitudeProps };

package/formatters/GIS/Latitude.js

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { toDMS } from "./toDMS";
+/**
+ * Formats a fractional latitude value as degrees, minutes and seconds (as a string).
+ * If provided with a string, `Longitude` will convert it to a number first.
+ *
+ * ```tsx
+ * <Latitude value={34.2216}/>
+ * <Latitude value={34.2216} default="Bad latitude"/>
+ * ```
+ */
+var Latitude = function (props) { return React.createElement(React.Fragment, null, toDMS(props.value, props.default, 90, "N", "S")); };
+export { Latitude };

package/formatters/GIS/Longitude.d.ts

@@ -0,0 +1,23 @@
+import * as React from 'react';
+interface IProps {
+    /**
+     * Value to format.
+     */
+    value: number | string;
+    /**
+     * String to show if formatting fails.
+     * @default "(no coordinates)"
+     */
+    default?: string;
+}
+/**
+ * Formats a fractional longitude value as degrees, minutes and seconds (as a string).
+ * If provided with a string, `Longitude` will convert it to a number first.
+ *
+ * ```tsx
+ * <Longitude value={34.2216}/>
+ * <Longitude value={34.2216} default="Bad longitude"/>
+ * ```*
+ */
+declare const Longitude: (props: IProps) => React.JSX.Element;
+export { Longitude, IProps as ILongitudeProps };

package/formatters/GIS/Longitude.js

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { toDMS } from "./toDMS";
+/**
+ * Formats a fractional longitude value as degrees, minutes and seconds (as a string).
+ * If provided with a string, `Longitude` will convert it to a number first.
+ *
+ * ```tsx
+ * <Longitude value={34.2216}/>
+ * <Longitude value={34.2216} default="Bad longitude"/>
+ * ```*
+ */
+var Longitude = function (props) { return React.createElement(React.Fragment, null, toDMS(props.value, props.default, 180, "E", "W")); };
+export { Longitude };

package/formatters/GIS/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Latitude';
+export * from './Longitude';

package/formatters/GIS/index.js

@@ -0,0 +1,2 @@
+export * from './Latitude';
+export * from './Longitude';

package/formatters/GIS/toDMS.d.ts

@@ -0,0 +1,2 @@
+declare function toDMS(value: number | string, defaultStr: string, max: number, positive: string, negative: string): string;
+export { toDMS };

package/formatters/GIS/toDMS.js

@@ -0,0 +1,16 @@
+import { DMS } from '../../helper/DMS';
+function toDMS(value, defaultStr, max, positive, negative) {
+    // Convert value to number if it is a string:
+    value = typeof value == 'number' ? value : parseFloat(value);
+    if (isNaN(value) || value < -max || value > max)
+        return defaultStr ? defaultStr : "(no coordinates)";
+    var _a = DMS.toDMS(value), d = _a[0], m = _a[1], s = _a[2];
+    var ms = m.toString();
+    if (ms.length < 2)
+        ms = "0" + ms;
+    var ss = s.toFixed(0);
+    if (ss.length < 2)
+        ss = "0" + ss;
+    return "".concat(d, "\u00B0 ").concat(ms, "\u2032 ").concat(ss, "\u2033 ").concat(d >= 0 ? positive : negative);
+}
+export { toDMS };

package/formatters/Highlight/Highlight.d.ts

@@ -0,0 +1,22 @@
+import * as React from 'react';
+interface IProps {
+    /** @ignore */
+    className?: string;
+    value: string;
+    /**
+     * String to search for. Only the first occurrence is highlighted.
+     * Matching is case-insensitive.
+     */
+    q: string;
+}
+/**
+ * Given an input string and a search query, `Highlight` highlights the first
+ * occurrence (if any) of the search query and returns a styled string (as a
+ * `ReactNode`). String matching is case-insensitive.
+ *
+ * ```tsx
+ * <Highlight value="Hello, world" q="hello"/>
+ * ```
+ */
+declare const Highlight: (props: IProps) => string | React.JSX.Element;
+export { Highlight };

package/formatters/Highlight/Highlight.js

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import { useTheme } from 'styled-components';
+/**
+ * Given an input string and a search query, `Highlight` highlights the first
+ * occurrence (if any) of the search query and returns a styled string (as a
+ * `ReactNode`). String matching is case-insensitive.
+ *
+ * ```tsx
+ * <Highlight value="Hello, world" q="hello"/>
+ * ```
+ */
+var Highlight = function (props) {
+    var theme = useTheme();
+    // Is there a search string? If not, do not highlight.
+    if (!props.q)
+        return props.value;
+    if (!props.value)
+        return props.value;
+    // Does q occur inside input string? If not, do not highlight.
+    var pos = props.value.toLowerCase().indexOf(props.q.toLowerCase());
+    if (pos == -1)
+        return props.value;
+    // Styling is done with inline styles so as not to generate too many styled-components classes.
+    var left = props.value.substring(0, pos);
+    var match = props.value.substring(pos, pos + props.q.length);
+    var right = props.value.substring(pos + props.q.length);
+    return React.createElement(React.Fragment, null,
+        left,
+        React.createElement("span", { style: { backgroundColor: theme.colors.accent } }, match),
+        right);
+};
+export { Highlight };

package/formatters/Highlight/index.d.ts

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

package/formatters/Highlight/index.js

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

package/formatters/Human/Human.d.ts

@@ -0,0 +1,18 @@
+import * as React from 'react';
+interface IProps {
+    /**
+     * Input value
+     */
+    value: number | string;
+}
+/**
+ * `Human` takes a `value` prop and formats it in a human-readable way.
+ *
+ * E.g. `10000` => `10K`
+ *
+ * ```tsx
+ * <Human value={150000}/>
+ * ```
+ */
+declare const Human: (props: IProps) => React.JSX.Element;
+export { Human, IProps };

package/formatters/Human/Human.js

@@ -0,0 +1,34 @@
+import * as React from 'react';
+/**
+ * `Human` takes a `value` prop and formats it in a human-readable way.
+ *
+ * E.g. `10000` => `10K`
+ *
+ * ```tsx
+ * <Human value={150000}/>
+ * ```
+ */
+var Human = function (props) {
+    /**
+     * Convert number to size string (K, M, G etc.)
+     */
+    var humanSize = function (value) {
+        var thresh = 1000;
+        if (Math.abs(value) < thresh) {
+            return value.toFixed(0);
+        }
+        var units = ['K', 'M', 'G', 'T', 'P', 'E', 'Z', 'Y'];
+        var u = -1;
+        do {
+            value /= thresh;
+            ++u;
+        } while (Math.abs(value) >= thresh && u < units.length - 1);
+        return (+value).toFixed(2) + units[u];
+    };
+    if (props.value == null)
+        return null;
+    // Make sure value is a number.
+    var val = (typeof props.value === 'string') ? parseFloat(props.value) : props.value;
+    return React.createElement(React.Fragment, null, humanSize(val));
+};
+export { Human };

package/formatters/Human/index.d.ts

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

package/formatters/Human/index.js

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

package/formatters/Number/Number.d.ts

@@ -0,0 +1,24 @@
+import * as React from 'react';
+interface IProps {
+    /**
+     * Value to format. This can be a string or a number.
+     */
+    value: number | string;
+    /**
+     * Number of fractional digits.
+     * @default 2
+     */
+    decimals?: number;
+}
+/**
+ * `Number` formats a number with thousands separators and optional
+ * fractional digits. If provided with a string, `Number` will convert
+ * it to a float first. By default, two decimals are printed.
+ *
+ * ```tsx
+ * <Number value={35100.20}/>
+ * <Number value={35100.20} decimals={0}/>
+ * ```
+ */
+declare const Number: ({ decimals, ...props }: IProps) => React.JSX.Element;
+export { Number, IProps };

package/formatters/Number/Number.js

@@ -0,0 +1,36 @@
+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';
+/**
+ * `Number` formats a number with thousands separators and optional
+ * fractional digits. If provided with a string, `Number` will convert
+ * it to a float first. By default, two decimals are printed.
+ *
+ * ```tsx
+ * <Number value={35100.20}/>
+ * <Number value={35100.20} decimals={0}/>
+ * ```
+ */
+var Number = function (_a) {
+    var _b = _a.decimals, decimals = _b === void 0 ? 2 : _b, props = __rest(_a, ["decimals"]);
+    if (props.value == null)
+        return null;
+    // Make sure value is a number.
+    var val = (typeof props.value === 'string') ? parseFloat(props.value) : props.value;
+    // Format number with requested fraction digits:
+    return React.createElement(React.Fragment, null, val.toLocaleString(undefined, {
+        useGrouping: true,
+        minimumFractionDigits: decimals,
+        maximumFractionDigits: decimals
+    }));
+};
+export { Number };

package/formatters/Number/index.d.ts

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

package/formatters/Number/index.js

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

package/helper/DMS.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Degrees-Minutes-Seconds conversion helpers.
+ */
+declare class DMS {
+    /**
+     * Convert a decimal latitude or longitude value to degrees,
+     * minutes, and seconds.
+     *
+     * @param value Value to convert
+     * @returns An array with degrees, minutes, seconds.
+     */
+    static toDMS: (value: number) => number[];
+    /**
+     * Convert degrees, minutes and seconds to a float value.
+     * @param d Degrees
+     * @param m Minutes
+     * @param s Seconds
+     * @returns Float representation
+     */
+    static toFloat: (d: number, m: number, s: number) => number;
+}
+export { DMS };

package/helper/DMS.js

@@ -0,0 +1,46 @@
+/**
+ * Degrees-Minutes-Seconds conversion helpers.
+ */
+var DMS = /** @class */ (function () {
+    function DMS() {
+    }
+    /**
+     * Convert a decimal latitude or longitude value to degrees,
+     * minutes, and seconds.
+     *
+     * @param value Value to convert
+     * @returns An array with degrees, minutes, seconds.
+     */
+    DMS.toDMS = function (value) {
+        value = parseFloat(value);
+        if (isNaN(value))
+            value = 0;
+        value = Math.abs(value);
+        var degrees = Math.trunc(value);
+        var seconds = (value - degrees) * 3600;
+        // Seconds are multiplied by 10,000, rounded, then divided again to avoid float errors.
+        var minutes = Math.trunc(Math.round((seconds / 60) * 10000) / 10000);
+        seconds = Math.round(seconds) % 60;
+        return [degrees, minutes, seconds];
+    };
+    /**
+     * Convert degrees, minutes and seconds to a float value.
+     * @param d Degrees
+     * @param m Minutes
+     * @param s Seconds
+     * @returns Float representation
+     */
+    DMS.toFloat = function (d, m, s) {
+        if (m < 0)
+            m = 0;
+        if (m > 59)
+            m = 59;
+        if (s < 0)
+            s = 0;
+        if (s > 59)
+            s = 59;
+        return d + m / 60 + s / 3600;
+    };
+    return DMS;
+}());
+export { DMS };

package/helper/HslColor.d.ts

@@ -0,0 +1,11 @@
+import { RgbColor } from './RgbColor';
+declare class HslColor {
+    hue: number;
+    saturation: number;
+    lightness: number;
+    alpha: number;
+    constructor(hue: number, saturation: number, lightness: number, alpha?: number);
+    static FromRgb(color: RgbColor): HslColor;
+    toString(): string;
+}
+export { HslColor };

package/helper/HslColor.js

@@ -0,0 +1,47 @@
+var HslColor = /** @class */ (function () {
+    function HslColor(hue, saturation, lightness, alpha) {
+        this.hue = hue;
+        this.saturation = saturation;
+        this.lightness = lightness;
+        this.alpha = alpha || 1;
+    }
+    HslColor.FromRgb = function (color) {
+        var red = color.red / 255;
+        var green = color.green / 255;
+        var blue = color.blue / 255;
+        var max = Math.max(red, green, blue);
+        var min = Math.min(red, green, blue);
+        var lightness = (max + min) / 2;
+        if (max === min) {
+            // achromatic
+            return new HslColor(0, 0, lightness, color.alpha);
+        }
+        var hue;
+        var delta = max - min;
+        var saturation = lightness > 0.5 ? delta / (2 - max - min) : delta / (max + min);
+        switch (max) {
+            case red:
+                hue = (green - blue) / delta + (green < blue ? 6 : 0);
+                break;
+            case green:
+                hue = (blue - red) / delta + 2;
+                break;
+            default:
+                // blue case
+                hue = (red - green) / delta + 4;
+                break;
+        }
+        hue *= 60;
+        return new HslColor(hue, saturation, lightness, color.alpha);
+    };
+    HslColor.prototype.toString = function () {
+        if (this.alpha === 1) {
+            return "hsl(".concat(this.hue, ", ").concat(Math.round(this.saturation * 100), "%, ").concat(Math.round(this.lightness * 100), "%)");
+        }
+        else {
+            return "hsla(".concat(this.hue, ", ").concat(Math.round(this.saturation * 100), "%, ").concat(Math.round(this.lightness * 100), "%, ").concat(this.alpha, ")");
+        }
+    };
+    return HslColor;
+}());
+export { HslColor };

package/helper/RgbColor.d.ts

@@ -0,0 +1,43 @@
+import { HslColor } from './HslColor';
+/**
+ * `RgbColor` encapsulates an RGB color, optionally with an alpha component.
+ * It offers parsing from and to a HTML color string.
+ */
+declare class RgbColor {
+    red: number;
+    blue: number;
+    green: number;
+    alpha: number;
+    /** Construct an RgbColor instance.
+     *  If alpha is not provided, it is assumed to be 1 (opaque).
+     */
+    constructor(red: number, green: number, blue: number, alpha?: number);
+    /** Parses a color string into an RgbColor instance.
+     *  Color strings may be:
+     *
+     *  SteelBlue (and friends)
+     *  #RRGGBB
+     *  #RRGGBBAA
+     *  #RGB
+     *  #RGBA
+     *  rgb(r,g,b)
+     *  rgba(r,g,b,a)
+     *  hsl(h,s,l)
+     *  hsla(h,s,l,a)
+     */
+    static FromString(color: string): RgbColor;
+    /**
+     * Convert a HslColor instance to an RgbColor instance.
+     */
+    static FromHsl(color: HslColor): RgbColor;
+    private toHex;
+    /**
+     * Reduces hex values if possible e.g. #ff8866 to #f86
+     */
+    private reduceHexValue;
+    /**
+     * Return string representation of this RgbColor instance.
+     */
+    toString(): string;
+}
+export { RgbColor };