@opengeoweb/form-fields 19.3.0 → 19.5.0

package/dist/index.esm.js

@@ -21,8 +21,10 @@ var en = {
 	"form-fields-error-min-level": "The minimum level is 1",
 	"form-fields-error-latitude": "Invalid latitude, expected number with maximum two decimal degrees between -90.00 and 90.00",
 	"form-fields-error-longitude": "Invalid longitude, expected number with maximum two decimal degrees between -180.00 and 180.00",
-	"form-fields-error-latitude-minutes": "Latitude must be between -90° and 90°",
-	"form-fields-error-longitude-minutes": "Longitude must be between -180° and 180°",
+	"form-fields-error-latitude-minutes": "Latitude degrees must be between -90° and 90°, minutes between 00 and 59",
+	"form-fields-error-longitude-minutes": "Longitude degrees must be between -180° and 180°, minutes between 00 and 59",
+	"form-fields-error-invalid-minutes": "Minutes must be between 00 and 59",
+	"form-fields-error-invalid-coordinate-format": "Invalid format: latitude must be DDMM, longitude must be DDDMM",
 	"form-fields-error-valid-max": "The maximum value is exceeded",
 	"form-fields-error-level-lower": "The lower level has to be below the upper level",
 	"form-fields-error-non-or-both-cooordinates": "Please enter both coordinates",
@@ -39,6 +41,10 @@ var fi = {
 	"form-fields-error-min-level": "Pienin sallittu taso on 1",
 	"form-fields-error-latitude": "Virheellinen leveysaste, odotettu arvo on kahden desimaalin tarkkuudella -90.00 ja 90.00 asteen välissä",
 	"form-fields-error-longitude": "Virheellinen pituusaste, odotettu arvo on kahden desimaalin tarkkuudella -180 ja 180 asteen välissä",
+	"form-fields-error-latitude-minutes": "Leveysasteiden on oltava välillä -90° ja 90°, minuuttien välillä 00 ja 59",
+	"form-fields-error-longitude-minutes": "Pituusasteiden on oltava välillä -180° ja 180°, minuuttien välillä 00 ja 59",
+	"form-fields-error-invalid-minutes": "Minuuttien on oltava välillä 00 ja 59",
+	"form-fields-error-invalid-coordinate-format": "Virheellinen muoto: leveysaste DDMM, pituusaste DDDMM",
 	"form-fields-error-valid-max": "Maksimiarvo on ylitetty",
 	"form-fields-error-level-lower": "Alemman tason arvon on oltava ylemmän tason alla",
 	"form-fields-error-non-or-both-cooordinates": "Lisää molemmat kordinaatit",
@@ -55,8 +61,10 @@ var no = {
 	"form-fields-error-min-level": "The minimum level is 1",
 	"form-fields-error-latitude": "Invalid latitude, expected number with maximum two decimal degrees between -90.00 and 90.00",
 	"form-fields-error-longitude": "Invalid longitude, expected number with maximum two decimal degrees between -180.00 and 180.00",
-	"form-fields-error-latitude-minutes": "Latitude must be between -90° and 90°",
-	"form-fields-error-longitude-minutes": "Longitude must be between -180° and 180°",
+	"form-fields-error-latitude-minutes": "Latitude degrees must be between -90° and 90°, minutes between 00 and 59",
+	"form-fields-error-longitude-minutes": "Longitude degrees must be between -180° and 180°, minutes between 00 and 59",
+	"form-fields-error-invalid-minutes": "Minutes must be between 00 and 59",
+	"form-fields-error-invalid-coordinate-format": "Invalid format: latitude must be DDMM, longitude must be DDDMM",
 	"form-fields-error-valid-max": "The maximum value is exceeded",
 	"form-fields-error-level-lower": "The lower level has to be below the upper level",
 	"form-fields-error-non-or-both-cooordinates": "Please enter both coordinates",
@@ -73,6 +81,10 @@ var nl = {
 	"form-fields-error-min-level": "Het minimum niveau is 1",
 	"form-fields-error-latitude": "Ongeldige breedtegraad, er wordt een getal verwacht van maximaal 2 decimalen in graden tussen -90.00 en 90.00",
 	"form-fields-error-longitude": "Ongeldige lengtegraad, er wordt een getal verwacht van maximaal 2 decimalen in graden tussen -180.00 en 180.00",
+	"form-fields-error-latitude-minutes": "Breedtegraad moet tussen -90° en 90° zijn, minuten tussen 00 en 59",
+	"form-fields-error-longitude-minutes": "Lengtegraad moet tussen -180° en 180° zijn, minuten tussen 00 en 59",
+	"form-fields-error-invalid-minutes": "Minuten moeten tussen 00 en 59 zijn",
+	"form-fields-error-invalid-coordinate-format": "Ongeldig formaat: breedtegraad moet DDMM zijn, lengtegraad moet DDDMM zijn",
 	"form-fields-error-valid-max": "Het maximum niveau is bereikt",
 	"form-fields-error-level-lower": "Het lage niveau moet onder het hoge niveau zijn",
 	"form-fields-error-non-or-both-cooordinates": "Voer beide coördinaten in",
@@ -1019,22 +1031,70 @@ function decimalToDegreesMinutes(value) {
   }
   return "" + sign + degrees + "\xB0" + minutes.toString().padStart(2, '0') + "\u2032";
 }
-function degreesMinutesToDecimal(input) {
+/**
+ * Parse a cardinal direction prefix (N/S/E/W) from input string.
+ * Returns { negative: boolean, remaining: string }
+ */
+function parseCardinalDirection(input, isLongitude) {
+  var upperInput = input.toUpperCase().trim();
+  var firstChar = upperInput.charAt(0);
+  var remaining = upperInput.slice(1);
+  // Check for valid cardinal direction based on coordinate type
+  var validDirections = isLongitude ? ['W', 'E'] : ['S', 'N'];
+  if (!validDirections.includes(firstChar)) {
+    return {
+      negative: false,
+      remaining: input
+    };
+  }
+  switch (firstChar) {
+    case 'W':
+    case 'S':
+      return {
+        negative: true,
+        remaining: remaining
+      };
+    case 'E':
+    case 'N':
+      return {
+        negative: false,
+        remaining: remaining
+      };
+    default:
+      return {
+        negative: false,
+        remaining: input
+      };
+  }
+}
+function degreesMinutesToDecimal(input, isLongitude) {
+  if (isLongitude === void 0) {
+    isLongitude = false;
+  }
   var raw = input.toString().trim();
-  var negative = raw.startsWith('-');
-  var digits = raw.replace(/[^0-9]/g, '');
-  var sign = negative ? -1 : 1;
-  if (digits.length <= 2) {
+  // Parse cardinal direction prefix (W/E/S/N)
+  var _parseCardinalDirecti = parseCardinalDirection(raw, isLongitude),
+    cardinalNegative = _parseCardinalDirecti.negative,
+    remaining = _parseCardinalDirecti.remaining;
+  // Check for minus sign in remaining input
+  var hasMinusSign = remaining.startsWith('-');
+  var digits = remaining.replace(/[^0-9]/g, '');
+  // Determine sign: either from cardinal direction or minus sign
+  var sign = cardinalNegative || hasMinusSign ? -1 : 1;
+  // For latitude: <= 2 digits is degrees only (e.g., "90" = 90°)
+  // For longitude: <= 3 digits is degrees only (e.g., "180" = 180°)
+  var degreesOnlyMaxLen = isLongitude ? 3 : 2;
+  if (digits.length <= degreesOnlyMaxLen) {
     var _deg = parseInt(digits || '0', 10);
     return sign * _deg;
   }
   // split into degrees + minutes
   var deg = parseInt(digits.slice(0, digits.length - 2), 10);
   var min = parseInt(digits.slice(-2), 10);
-  // normalize minutes overflow (e.g. 65 → 1°05′)
-  var extraDeg = Math.floor(min / 60);
-  min %= 60;
-  return sign * (deg + extraDeg + min / 60);
+  // NOTE: We no longer normalize minutes overflow here.
+  // Invalid minutes (>59) will be rejected by validation.
+  // This preserves the raw value for validation purposes.
+  return sign * (deg + min / 60);
 }
 var DegreesMinutesField = function DegreesMinutesField(_ref) {
   var name = _ref.name,
@@ -1046,16 +1106,24 @@ var DegreesMinutesField = function DegreesMinutesField(_ref) {
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? 'small' : _ref$size,
     _ref$isLongitude = _ref.isLongitude,
-    isLongitude = _ref$isLongitude === void 0 ? false : _ref$isLongitude,
-    t = _ref.t;
+    isLongitude = _ref$isLongitude === void 0 ? false : _ref$isLongitude;
   var _useFormContext = useFormContext(),
     control = _useFormContext.control;
+  var _useFormFieldsTransla = useFormFieldsTranslation(),
+    t = _useFormFieldsTransla.t;
   var _useState = useState(null),
     localInput = _useState[0],
     setLocalInput = _useState[1];
   var _useState2 = useState(false),
     isEditing = _useState2[0],
     setIsEditing = _useState2[1];
+  // Track raw input when there's a validation error so we show what user typed
+  var _useState3 = useState(null),
+    rawInputOnError = _useState3[0],
+    setRawInputOnError = _useState3[1];
+  // Error key constants to distinguish error types
+  var INVALID_MINUTES_ERROR = 'invalidMinutes';
+  var INVALID_FORMAT_ERROR = 'invalidFormat';
   return jsx(Controller, {
     control: control,
     name: name,
@@ -1066,34 +1134,104 @@ var DegreesMinutesField = function DegreesMinutesField(_ref) {
       var value = field.value,
         onChange = field.onChange;
       var handleChange = function handleChange(e) {
-        setLocalInput(e.target.value);
+        var rawValue = e.target.value;
+        // Filter to only allow valid characters:
+        // - Digits (0-9)
+        // - Minus sign (-) only at the beginning
+        // - Cardinal directions (W/E/N/S for longitude, N/S for latitude) only at the beginning
+        // - Common formatting chars (°, ′, ', *) which will be stripped on blur
+        var validCardinals = isLongitude ? /^[WwEe]/ : /^[NnSs]/;
+        var filtered = '';
+        for (var i = 0; i < rawValue.length; i += 1) {
+          var _char = rawValue[i];
+          var upperChar = _char.toUpperCase();
+          if (/[0-9]/.test(_char)) {
+            // Always allow digits
+            filtered += _char;
+          } else if (_char === '-' && filtered === '') {
+            // Allow minus sign only at the beginning
+            filtered += _char;
+          } else if (i === 0 && validCardinals.test(upperChar) && filtered === '') {
+            // Allow valid cardinal direction only at the very beginning
+            filtered += upperChar;
+          } else if (/[°′'*]/.test(_char)) {
+            // Allow common formatting characters (will be stripped on blur)
+            filtered += _char;
+          }
+          // All other characters are silently ignored
+        }
+        setLocalInput(filtered);
         setIsEditing(true);
+        // Clear error state when user starts typing
+        setRawInputOnError(null);
       };
       var handleBlur = function handleBlur() {
-        if (localInput != null && localInput !== '-' && localInput !== '') {
-          var input = localInput.replace(/[^\d-]/g, '');
-          var negative = input.startsWith('-');
-          var digits = input.replace(/[^0-9]/g, '');
-          // Latitude: 4 digits (DDMM), Longitude: 5 (DDDMM)
-          var maxLen = isLongitude ? 5 : 4;
-          if (digits.length > maxLen) {
-            digits = digits.slice(0, maxLen);
-          }
-          var normalized = negative ? "-" + digits : digits;
-          try {
-            var decimal = degreesMinutesToDecimal(normalized);
-            onChange(decimal);
-          } catch (_unused) {
-            // Invalid, do not update form value
+        // Handle clearing the field
+        if (localInput === '' || localInput === null) {
+          onChange(null);
+          setIsEditing(false);
+          setLocalInput(null);
+          setRawInputOnError(null);
+          return;
+        }
+        // Handle just a minus sign
+        if (localInput === '-') {
+          setIsEditing(false);
+          setLocalInput(null);
+          return;
+        }
+        // Parse cardinal direction prefix (W/E/S/N)
+        var _parseCardinalDirecti2 = parseCardinalDirection(localInput, isLongitude),
+          isNegativeFromCardinal = _parseCardinalDirecti2.negative,
+          remainingInput = _parseCardinalDirecti2.remaining;
+        var input = remainingInput.replace(/[^\d-]/g, '');
+        var hasMinusSign = input.startsWith('-');
+        var digits = input.replace(/[^0-9]/g, '');
+        // Latitude: max 4 digits (DDMM), Longitude: max 5 (DDDMM)
+        var maxLen = isLongitude ? 5 : 4;
+        if (digits.length > maxLen) {
+          // Too many digits - show error but keep user's input visible
+          setRawInputOnError(localInput);
+          onChange(INVALID_FORMAT_ERROR);
+          setIsEditing(false);
+          setLocalInput(null);
+          return;
+        }
+        // Check if minutes are valid (0-59) based on coordinate type
+        // For latitude: > 2 digits means DDMM format
+        // For longitude: > 3 digits means DDDMM format
+        var degreesOnlyMaxLen = isLongitude ? 3 : 2;
+        if (digits.length > degreesOnlyMaxLen) {
+          var minutes = parseInt(digits.slice(-2), 10);
+          if (minutes > 59) {
+            // Invalid minutes - show error but keep user's input visible
+            setRawInputOnError(localInput);
+            onChange(INVALID_MINUTES_ERROR);
+            setIsEditing(false);
+            setLocalInput(null);
+            return;
           }
         }
+        // Determine if result should be negative
+        var isNegative = isNegativeFromCardinal || hasMinusSign;
+        var normalized = isNegative ? "-" + digits : digits;
+        try {
+          var decimal = degreesMinutesToDecimal(normalized, isLongitude);
+          onChange(decimal);
+          setRawInputOnError(null);
+        } catch (_unused) {
+          // Invalid, do not update form value
+        }
         setIsEditing(false);
         setLocalInput(null);
       };
       var displayValue;
       if (isEditing) {
         displayValue = localInput != null ? localInput : '';
-      } else if (value != null) {
+      } else if (fieldState.error && rawInputOnError !== null) {
+        // Show the invalid input the user typed when there's an error
+        displayValue = rawInputOnError;
+      } else if (value != null && typeof value === 'number') {
         displayValue = decimalToDegreesMinutes(value);
       } else {
         displayValue = '';
@@ -1117,9 +1255,20 @@ var DegreesMinutesField = function DegreesMinutesField(_ref) {
     },
     rules: {
       validate: function validate(value) {
-        if (value == null || isNaN(value)) {
+        if (value == null) {
           return true;
         } // let empty pass
+        // Check for special error markers
+        if (value === INVALID_MINUTES_ERROR) {
+          return t('form-fields-error-invalid-minutes');
+        }
+        if (value === INVALID_FORMAT_ERROR) {
+          return t('form-fields-error-invalid-coordinate-format');
+        }
+        // Must be a number for range checks
+        if (typeof value !== 'number' || isNaN(value)) {
+          return true;
+        }
         if (!isLongitude && (value < -90 || value > 90)) {
           return t('form-fields-error-latitude-minutes');
         }

package/dist/src/lib/components/DegreesMinutesField.d.ts

@@ -1,7 +1,13 @@
-import type { TFunction } from 'i18next';
 import React from 'react';
 export declare function decimalToDegreesMinutes(value: number): string;
-export declare function degreesMinutesToDecimal(input: string | number): number;
+/**
+ * Check if the raw input has valid minutes (0-59).
+ * For latitude: digits > 2 means DDMM format
+ * For longitude: digits > 3 means DDDMM format
+ * Returns true if valid, false otherwise.
+ */
+export declare function hasValidMinutes(input: string | number, isLongitude?: boolean): boolean;
+export declare function degreesMinutesToDecimal(input: string | number, isLongitude?: boolean): number;
 interface Props {
     name: string;
     label: string;
@@ -9,7 +15,6 @@ interface Props {
     isReadOnly?: boolean;
     size?: 'small' | 'medium';
     isLongitude?: boolean;
-    t: TFunction;
 }
 export declare const DegreesMinutesField: React.FC<Props>;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opengeoweb/form-fields",
-  "version": "19.3.0",
+  "version": "19.5.0",
   "description": "GeoWeb form-fields library for the opengeoweb project",
   "license": "Apache-2.0",
   "repository": {