@longline/aqua-ui 1.0.183 → 1.0.186

package/formatters/Human/Human.js

@@ -1,34 +1,26 @@
 import * as React from 'react';
 /**
- * `Human` takes a `value` prop and formats it in a human-readable way.
- *
- * E.g. `10000` => `10K`
+ * `Human` formats large numbers using `Intl.NumberFormat` for locale-aware
+ * output and optional compact display (e.g. "10K", "1.2M").
  *
  * ```tsx
- * <Human value={150000}/>
+ * <Human value={1200}/>           // => "1.2K"
+ * <Human value={999999} locale="de-DE" /> // => "1 Mio."
  * ```
  */
-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)
+var Human = function (_a) {
+    var value = _a.value, _b = _a.locale, locale = _b === void 0 ? 'en' : _b, _c = _a.decimals, decimals = _c === void 0 ? 2 : _c;
+    if (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));
+    var num = typeof value === 'string' ? parseFloat(value) : value;
+    if (isNaN(num))
+        return null;
+    var formatOptions = {
+        notation: 'compact',
+        maximumFractionDigits: decimals
+    };
+    var formatted = new Intl.NumberFormat(locale, formatOptions).format(num);
+    return React.createElement(React.Fragment, null, formatted);
 };
+Human.displayName = 'Human';
 export { Human };

package/formatters/Number/Number.d.ts

@@ -5,20 +5,28 @@ interface IProps {
      */
     value: number | string;
     /**
-     * Number of fractional digits.
+     * Number of fixed fractional digits.
      * @default 2
      */
     decimals?: number;
+    /**
+     * Optional locale to use in formatting (e.g., "en-US", "fr-FR").
+     * @default undefined (browser locale)
+     */
+    locale?: string;
 }
 /**
  * `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.
  *
+ * If the input is not a valid number, it returns `null`.
+ *
  * ```tsx
  * <Number value={35100.20}/>
  * <Number value={35100.20} decimals={0}/>
+ * <Number value={1234.567} locale="de-DE" />
  * ```
  */
-declare const Number: ({ decimals, ...props }: IProps) => React.JSX.Element;
+declare const Number: ({ value, decimals, locale, ...props }: IProps) => React.JSX.Element;
 export { Number, IProps };

package/formatters/Number/Number.js

@@ -15,22 +15,28 @@ import * as React from 'react';
  * fractional digits. If provided with a string, `Number` will convert
  * it to a float first. By default, two decimals are printed.
  *
+ * If the input is not a valid number, it returns `null`.
+ *
  * ```tsx
  * <Number value={35100.20}/>
  * <Number value={35100.20} decimals={0}/>
+ * <Number value={1234.567} locale="de-DE" />
  * ```
  */
 var Number = function (_a) {
-    var _b = _a.decimals, decimals = _b === void 0 ? 2 : _b, props = __rest(_a, ["decimals"]);
-    if (props.value == null)
+    var value = _a.value, _b = _a.decimals, decimals = _b === void 0 ? 2 : _b, locale = _a.locale, props = __rest(_a, ["value", "decimals", "locale"]);
+    // Return null if value is not provided:
+    if (value == null)
+        return null;
+    // Return null if value is not a number:
+    var num = typeof value === 'string' ? parseFloat(value) : value;
+    if (isNaN(num))
         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, {
+    return (React.createElement(React.Fragment, null, num.toLocaleString(locale, {
         useGrouping: true,
         minimumFractionDigits: decimals,
-        maximumFractionDigits: decimals
-    }));
+        maximumFractionDigits: decimals,
+    })));
 };
 export { Number };

package/helper/DMS.d.ts

@@ -2,20 +2,58 @@
  * Degrees-Minutes-Seconds conversion helpers.
  */
 declare class DMS {
+    /**
+     * Converts a decimal coordinate (latitude or longitude) to a formatted DMS
+     * (degrees, minutes, seconds) string.
+     *
+     * @param value - The coordinate value as number or string.
+     * @param defaultStr - String to return if value is invalid or out of range.
+     * @param max - Maximum absolute valid value for the coordinate (e.g., 90 for
+     * latitude, 180 for longitude).
+     * @param positive - Suffix for positive values (e.g., 'N' or 'E').
+     * @param negative - Suffix for negative values (e.g., 'S' or 'W').
+     *
+     * @returns Formatted DMS string or the default string.
+     *
+     * @example
+     * ```ts
+     * toDMS(51.1789, '(no coordinates)', 90, 'N', 'S');
+     * // Returns: "51° 10′ 44″ N"
+     *
+     * toDMS('-1.8262', '(no coordinates)', 180, 'E', 'W');
+     * // Returns: "1° 49′ 34″ W"
+     *
+     * toDMS(1000, '(no coordinates)', 90, 'N', 'S');
+     * // Returns: "(no coordinates)" (out of range)
+     * ```
+     */
+    static toDMSString(value: number | string, defaultStr: string, max: number, positive: string, negative: string): string;
     /**
      * Convert a decimal latitude or longitude value to degrees,
      * minutes, and seconds.
      *
-     * @param value Value to convert
-     * @returns An array with degrees, minutes, seconds.
+     * @param value Value to convert, positive or negative decimal degrees
+     * @returns A tuple: [degrees, minutes, seconds], all positive numbers.
+     *
+     * @example
+     * ```ts
+     * DMS.toDMS(23.4394); // returns [23, 26, 22]
+     * DMS.toDMS(-73.9857); // returns [73, 59, 9]
+     * ```
      */
     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
+     * @param d Degrees (can be positive or negative)
+     * @param m Minutes (0-59)
+     * @param s Seconds (0-59)
+     * @returns Float decimal degrees, preserving sign of degrees.
+     *
+     * @example
+     * ```ts
+     * DMS.toFloat(23, 26, 22);    // returns approximately 23.4394
+     * DMS.toFloat(-73, 59, 9);    // returns approximately -73.9858
+     * ```
      */
     static toFloat: (d: number, m: number, s: number) => number;
 }

package/helper/DMS.js

@@ -4,42 +4,104 @@
 var DMS = /** @class */ (function () {
     function DMS() {
     }
+    /**
+     * Converts a decimal coordinate (latitude or longitude) to a formatted DMS
+     * (degrees, minutes, seconds) string.
+     *
+     * @param value - The coordinate value as number or string.
+     * @param defaultStr - String to return if value is invalid or out of range.
+     * @param max - Maximum absolute valid value for the coordinate (e.g., 90 for
+     * latitude, 180 for longitude).
+     * @param positive - Suffix for positive values (e.g., 'N' or 'E').
+     * @param negative - Suffix for negative values (e.g., 'S' or 'W').
+     *
+     * @returns Formatted DMS string or the default string.
+     *
+     * @example
+     * ```ts
+     * toDMS(51.1789, '(no coordinates)', 90, 'N', 'S');
+     * // Returns: "51° 10′ 44″ N"
+     *
+     * toDMS('-1.8262', '(no coordinates)', 180, 'E', 'W');
+     * // Returns: "1° 49′ 34″ W"
+     *
+     * toDMS(1000, '(no coordinates)', 90, 'N', 'S');
+     * // Returns: "(no coordinates)" (out of range)
+     * ```
+     */
+    DMS.toDMSString = function (value, defaultStr, max, positive, negative) {
+        // Convert value to number if it is a string:
+        var num = typeof value === 'number' ? value : parseFloat(value);
+        // Return default string if value is not a number or out of range:
+        if (isNaN(num) || num < -max || num > max)
+            return defaultStr;
+        // toDMS returns [degrees, minutes, seconds], all positive numbers,
+        // degrees retain the sign for direction determination.
+        var _a = DMS.toDMS(num), d = _a[0], m = _a[1], s = _a[2];
+        // Pad minutes and seconds with leading zeros if needed:
+        var mm = m.toString().padStart(2, '0');
+        // Round seconds to nearest integer, then pad:
+        var ss = Math.round(s).toString().padStart(2, '0');
+        // Use absolute degrees for display but sign for suffix:
+        var direction = d >= 0 ? positive : negative;
+        // Absolute degrees for display (e.g., 0 to max), prevent "-0"
+        var absDegrees = Math.abs(d);
+        return "".concat(absDegrees, "\u00B0 ").concat(mm, "\u2032 ").concat(ss, "\u2033 ").concat(direction);
+    };
     /**
      * Convert a decimal latitude or longitude value to degrees,
      * minutes, and seconds.
      *
-     * @param value Value to convert
-     * @returns An array with degrees, minutes, seconds.
+     * @param value Value to convert, positive or negative decimal degrees
+     * @returns A tuple: [degrees, minutes, seconds], all positive numbers.
+     *
+     * @example
+     * ```ts
+     * DMS.toDMS(23.4394); // returns [23, 26, 22]
+     * DMS.toDMS(-73.9857); // returns [73, 59, 9]
+     * ```
      */
     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;
+        if (typeof value !== 'number' || isNaN(value)) {
+            return [0, 0, 0];
+        }
+        var absValue = Math.abs(value);
+        var degrees = Math.floor(absValue);
+        var minutesFull = (absValue - degrees) * 60;
+        var minutes = Math.floor(minutesFull);
+        var seconds = Math.round((minutesFull - minutes) * 60);
+        // Handle case where seconds round up to 60:
+        if (seconds === 60) {
+            return [degrees, minutes + 1, 0];
+        }
+        // Handle case where minutes roll over to 60:
+        if (minutes === 60) {
+            return [degrees + 1, 0, seconds];
+        }
         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
+     * @param d Degrees (can be positive or negative)
+     * @param m Minutes (0-59)
+     * @param s Seconds (0-59)
+     * @returns Float decimal degrees, preserving sign of degrees.
+     *
+     * @example
+     * ```ts
+     * DMS.toFloat(23, 26, 22);    // returns approximately 23.4394
+     * DMS.toFloat(-73, 59, 9);    // returns approximately -73.9858
+     * ```
      */
     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;
+        // Clamp minutes and seconds within valid ranges
+        var minutes = Math.min(Math.max(m, 0), 59);
+        var seconds = Math.min(Math.max(s, 0), 59);
+        // Preserve sign of degrees for final float
+        var sign = d < 0 ? -1 : 1;
+        var absDegrees = Math.abs(d);
+        var floatValue = absDegrees + minutes / 60 + seconds / 3600;
+        return floatValue * sign;
     };
     return DMS;
 }());

package/package.json

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

package/controls/Dropzone/Dropbox.d.ts

@@ -1,19 +0,0 @@
-import * as React from 'react';
-interface IProps {
-    /** @ignore */
-    className?: string;
-    /**
-     * If set, allows a file filter, e.g. `.xls,.xlsx`.
-     * This does _not_ prevent the user to upload another kind of file.
-     */
-    accept?: 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

@@ -1,47 +0,0 @@
-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", accept: props.accept, 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/ListView/Ghost.d.ts

@@ -1,9 +0,0 @@
-import * as React from 'react';
-import { IListViewProps } from './IListViewProps';
-import { IColumnProps } from './Column';
-interface IProps extends IListViewProps {
-    className?: string;
-    columns: IColumnProps[];
-}
-declare const Ghost: (props: IProps) => React.JSX.Element;
-export { Ghost };

package/controls/ListView/SortButton.js

@@ -1,26 +0,0 @@
-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, { keyframes } from 'styled-components';
-var SortButtonBase = function (props) {
-    return (React.createElement("div", { className: props.className },
-        React.createElement("svg", { viewBox: "0 0 100 100" },
-            React.createElement("path", { className: "bottom", d: "M9.5,77.9h81c4.3,0,8.1,3.3,8.1,7.2v6.1c0,3.9-3.8,7.2-8.1,7.2h-81c-4.3,0-8.1-3.3-8.1-7.2\r\n          v-6.1C1.4,81.2,5.2,77.9,9.5,77.9z" }),
-            React.createElement("path", { className: "middle", d: "M9.5,39.5h52.9c4.3,0,8.1,3.3,8.1,7.2v6.1c0,3.9-3.8,7.2-8.1,7.2H9.5c-4.3,0-8.1-3.3-8.1-7.2\r\n          v-6.1C1.4,42.9,5.2,39.5,9.5,39.5z" }),
-            React.createElement("path", { className: "top", d: "M10,1.1h24.8c4.9,0,8.6,3.3,8.6,7.2v6.1c0,3.9-3.8,7.2-8.6,7.2H10c-4.9,0-8.6-3.3-8.6-7.2V8.4\r\n          C1.4,3.9,5.2,1.1,10,1.1z" }))));
-};
-var SortIconAnimation = keyframes(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  0% {\n    opacity: 1;\n  }\n  40% {\n    opacity: 0;\n  }\n  60% {\n    opacity: 0;\n  }\n  100% {\n    opacity: 1;\n  }\n"], ["\n  0% {\n    opacity: 1;\n  }\n  40% {\n    opacity: 0;\n  }\n  60% {\n    opacity: 0;\n  }\n  100% {\n    opacity: 1;\n  }\n"
-    /**
-     * The SortButton displays a caret that rotates and lights up depending on
-     * its active/reverse props.
-     */
-])));
-/**
- * The SortButton displays a caret that rotates and lights up depending on
- * its active/reverse props.
- */
-var SortButton = styled(SortButtonBase)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  // Position\n  position:    relative;\n  display:     flex; // Needed for SVG to be centered in div.\n  width:       12px;\n  height:      12px;\n\n  // Appearance\n  transition: opacity ease-in-out 150ms,\n              transform ease-in-out 150ms;\n  transform: scaleY(", ");\n  opacity: ", ";\n\n  svg {\n    transition: fill ease-in-out 150ms;\n    fill: ", ";\n    path.top, path.middle, path.bottom {\n      transform-origin: 0 0;\n      animation-name: ", ";\n      // Animation duration is set by parent TableHeaderCell.\n      animation-duration: 0s;\n      animation-timing-function: linear;\n      animation-iteration-count: infinite;\n    }\n    path.middle {\n      animation-delay: 0.25s;\n    }\n    path.bottom {\n      animation-delay: 0.5s;\n    }     \n  }\n"], ["\n  // Position\n  position:    relative;\n  display:     flex; // Needed for SVG to be centered in div.\n  width:       12px;\n  height:      12px;\n\n  // Appearance\n  transition: opacity ease-in-out 150ms,\n              transform ease-in-out 150ms;\n  transform: scaleY(", ");\n  opacity: ", ";\n\n  svg {\n    transition: fill ease-in-out 150ms;\n    fill: ", ";\n    path.top, path.middle, path.bottom {\n      transform-origin: 0 0;\n      animation-name: ", ";\n      // Animation duration is set by parent TableHeaderCell.\n      animation-duration: 0s;\n      animation-timing-function: linear;\n      animation-iteration-count: infinite;\n    }\n    path.middle {\n      animation-delay: 0.25s;\n    }\n    path.bottom {\n      animation-delay: 0.5s;\n    }     \n  }\n"])), function (p) { return p.reverse ? -1 : 1; }, function (p) { return p.active ? 1 : 0; }, function (p) { return p.dark ? p.theme.colors.primary[1] : p.theme.colors.neutral[10]; }, SortIconAnimation);
-export { SortButton };
-var templateObject_1, templateObject_2;

package/formatters/DateTime/elements/Distance.d.ts

@@ -1,24 +0,0 @@
-import * as React from 'react';
-import { Locale } from 'date-fns';
-interface IProps {
-    /**
-     * Date/time to format.
-     */
-    value: Date | string;
-    /**
-     * Optional locale.
-     */
-    locale?: Locale;
-    /**
-     * A strict formatter does not use helpers like 'almost', 'over',
-     * 'less than' and the like.
-     */
-    strict?: boolean;
-    /**
-     * If set, value gets updated every second.
-     * @default false
-     */
-    animated?: boolean;
-}
-declare const DistanceDate: ({ animated, ...props }: IProps) => React.JSX.Element;
-export { DistanceDate, IProps };

package/formatters/GIS/toDMS.d.ts

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

package/formatters/GIS/toDMS.js

@@ -1,16 +0,0 @@
-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 };